lcw
This commit is contained in:
254
src/views/home/model/statistics.vue
Normal file
254
src/views/home/model/statistics.vue
Normal file
@ -0,0 +1,254 @@
|
||||
<template>
|
||||
|
||||
<div class="comom-cnt chart-container" @mouseenter="mouseEnter" @mouseleave="mouseLeave">
|
||||
<span class="toggle-btn" @click="addFn">切换</span>
|
||||
<transition name="flip" mode="out-in">
|
||||
<div v-if="list[add]" class="flip-wrapper chart-content" :key="add">
|
||||
<BarHatEcharts :isXAxisData="true" :echartsId="`qylxEchartsmm-${add}`" :data="list[add]" :autoTooltip="true" :chartLeft="{ dataAxis:'25%', categoryAxis: '5%' }" />
|
||||
</div>
|
||||
<div v-else class="flip-wrapper no-data">
|
||||
暂无数据
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted, onBeforeUnmount, onUnmounted } from 'vue';
|
||||
import { tbGsxtXscjTjForSjbm } from '@/api/qbcj'
|
||||
import BarHatEcharts from "@/views/home/echarts/barHatEcharts.vue";
|
||||
const list = ref([]);
|
||||
// 请求数据
|
||||
const getXscjTjForSjbm = () => {
|
||||
tbGsxtXscjTjForSjbm({}).then(res => {
|
||||
// 先将原始数据处理为一维数组
|
||||
const zsDataArray = res.zs.map((item, index) => {
|
||||
return {
|
||||
org_name: item.org_name,
|
||||
zsCount: item.count,
|
||||
yczCount: item.org_name === res.ycz[index].org_name ? res.ycz[index].count : 0
|
||||
}
|
||||
});
|
||||
|
||||
// 将一维数组转换为每7个元素为一组的二维数组
|
||||
const groupSize = 7;
|
||||
const ZsData = Array.from({
|
||||
length: Math.ceil(zsDataArray.length / groupSize)
|
||||
}, (_, i) => zsDataArray.slice(i * groupSize, (i + 1) * groupSize));
|
||||
console.log(ZsData);
|
||||
list.value = ZsData.map(item => {
|
||||
return {
|
||||
loading: false,
|
||||
list: [{
|
||||
name: '总数',
|
||||
value: item.map(items => items.zsCount),
|
||||
color: ['rgba(0,244,255,1)', 'rgba(0,77,167,1)'],
|
||||
}, {
|
||||
name: '已处置',
|
||||
value: item.map(items => items.yczCount),
|
||||
color: ['rgba(24, 232, 229, 1)', 'rgba(3, 110, 83, 1)'],
|
||||
}],
|
||||
xDate: item.map(item => {
|
||||
if (item.org_name.indexOf('林芝市公安局') == 0) {
|
||||
return item.org_name.slice(6, item.org_name.length)
|
||||
} else if (item.org_name.indexOf('林芝市') == 0) {
|
||||
return item.org_name.slice(3, item.org_name.length)
|
||||
} else if (item.org_name.indexOf('西藏自治区林芝市') == 0) {
|
||||
return item.org_name.slice(8, item.org_name.length)
|
||||
} else {
|
||||
return item.org_name
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
const add = ref(0)
|
||||
const addFn = () => {
|
||||
// 确保list数组有数据时才执行切换操作
|
||||
if (list.value.length > 0) {
|
||||
// 确保不超过list的长度，实现循环切换
|
||||
add.value = (add.value + 1) % list.value.length
|
||||
}
|
||||
}
|
||||
let times=ref()
|
||||
onMounted(() => {
|
||||
getXscjTjForSjbm()
|
||||
times.value=setInterval(() => {
|
||||
addFn()
|
||||
}, 30000);
|
||||
// getYjczDate()
|
||||
})
|
||||
// 鼠标移入
|
||||
const mouseEnter = () => {
|
||||
clearInterval(times.value)
|
||||
}
|
||||
// 鼠标移出
|
||||
const mouseLeave = () => {
|
||||
// 清除可能存在的旧定时器，避免多个定时器同时运行
|
||||
clearInterval(times.value)
|
||||
// 设置为5秒自动切换，更容易测试效果
|
||||
times.value = setInterval(() => {
|
||||
addFn()
|
||||
}, 30000)
|
||||
}
|
||||
onUnmounted(() => {
|
||||
clearInterval(times.value)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-loading-mask {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/css/homeScreen.scss";
|
||||
|
||||
.loading-more {
|
||||
text-align: center;
|
||||
padding: 8px;
|
||||
color: #83bff6;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.zdryBox {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
.ryBox {
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
|
||||
// 隐藏滚动条但保留滚动功能
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
-ms-overflow-style: none; // IE和Edge
|
||||
scrollbar-width: none; // Firefox
|
||||
|
||||
li {
|
||||
padding: 12px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
transition: background-color 0.3s;
|
||||
cursor: pointer;
|
||||
box-sizing: border-box;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(20, 107, 190, 0.2);
|
||||
}
|
||||
|
||||
>div:first-child {
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
margin-bottom: 8px;
|
||||
font-size: 14px;
|
||||
/* 标题限制1行，超出用省略号 */
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.meta-info {
|
||||
text-align: right;
|
||||
color: #83bff6;
|
||||
font-size: 12px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
>div:last-child {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
/* 内容限制3行，超出用省略号 */
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.switchover {
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
margin-left: 20px;
|
||||
color: rgb(255, 146, 4);
|
||||
}
|
||||
|
||||
/* 图表容器样式 */
|
||||
.chart-container {
|
||||
border-right: 1px solid #ebebeb;
|
||||
width: 100%;
|
||||
height: 100% !important;
|
||||
}
|
||||
|
||||
/* 切换按钮样式 */
|
||||
.toggle-btn {
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
margin-left: 20px;
|
||||
color: rgb(255, 146, 4);
|
||||
font-family: 'YSBTH';
|
||||
}
|
||||
|
||||
/* 图表内容区域样式 */
|
||||
.chart-content {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* 暂无数据样式 */
|
||||
.no-data {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
// 翻转过渡动画样式
|
||||
.flip-wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
perspective: 1000px;
|
||||
}
|
||||
|
||||
.flip-enter-active,
|
||||
.flip-leave-active {
|
||||
transition: all 0.6s ease;
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
|
||||
.flip-enter-from {
|
||||
transform: rotateY(90deg);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.flip-enter-to {
|
||||
transform: rotateY(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.flip-leave-from {
|
||||
transform: rotateY(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.flip-leave-to {
|
||||
transform: rotateY(-90deg);
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user