sgxt_web/src/views/home/model/statistics.vue

<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>