动画

src/api/data/supervisionNotify.ts

@@ -88,3 +88,9 @@ export function getCheckBeer(times) {
     });
 }
 
+
+export function getWorkDynamics(times) {
+    return request.get({
+        url: `/datav/supervisonNotify/getWorkDynamics?beginTime=${times[0]}&endTime=${times[1]}`
+    });
+}

src/api/screen/jwpy.ts

@@ -25,10 +25,13 @@ export function GetBMYYBQS(PeriodId, OrgNo, TaskID) {
     });
 }
 
-export function GetZHMYLPM(PeriodId, PeriodSonID) {
+export function GetZHMYLPM(PeriodId, PeriodSonID, OrgId, TaskID, TaskClass) {
     let formData = new FormData();
     formData.append("PeriodId", PeriodId);
     formData.append("PeriodSonID", PeriodSonID);
+    formData.append("OrgId", OrgId);
+    formData.append("TaskID", TaskID);
+    formData.append("TaskClass", TaskClass);
     return outrequest.post({
         url: `/out-police-service/api/DSJ/GetZHMYLPM`,
         body: formData

src/components/datav/chart-bar.vue

@@ -105,7 +105,7 @@ function getColor(val) {
   if (props.color instanceof String) {
     return props.color;
   }
-  console.log(val)
+  // console.log(val)
   if (props.color instanceof Array) {
     const colors = [...props.color];
     // percentage降序

src/components/datav/header.vue

@@ -20,7 +20,7 @@
         </router-link>
       </nav>
       <h1>
-        <router-link to="/datav/gobal">
+        <router-link to="/datav/global">
           <span>长沙公安数字督察一体化平台</span>
         </router-link>
       </h1>
@@ -50,12 +50,6 @@ import Img1 from '/imgs/datav/base.png'
 import Img2 from '/imgs/datav/base_active.png'
 
 
-const goToBaidu = () => {
-  window.open('http://65.47.6.114:8001/police-service/map-index.html?FPID=920507&ticket=dcZcPz0WPEoQaOb14HmRETDQjFL8cKgYSW6OyR0mQcLt-eHJ7HSQn2WDxilMwCaXGOxS3LZx1p9Is1b7yOM7BVoU1o0IVRwDT1on2yQK8JU=', '_blank');
-  // 可根据需要设置激活状态，这里简单设置为点击后激活
-  isActive.value = true;
-};
-
 </script>
 <style lang="scss" scoped>
 header {

src/enums/orgMapping.js

@@ -0,0 +1,28 @@
+// nameMapping.js
+// 映射后端传来的名字和前端地图名字
+
+export const orgMapping = {
+    '长沙县局': '长沙县',
+    '芙蓉分局': '芙蓉区',
+    '天心分局': '天心区',
+    '岳麓分局': '岳麓区',
+    '开福分局': '开福区',
+    '雨花分局': '雨花区',
+    '望城分局': '望城区',
+    '宁乡市局': '宁乡市',
+    '浏阳市局': '浏阳市',
+    '高新分局': '高新区'
+};
+
+// 映射名字和自定义属性
+export function mapOrgNameMapping(backendData, valueMapping) {
+    return backendData.map(item => {
+        const mappedName = orgMapping[item.name] || item.name;
+        return {
+            ...item,
+            originalName: item.name, // 保留原始名称,就是后端传送的名字
+            name: mappedName,
+            value: item[valueMapping], // 自定义属性
+        };
+    });
+}

src/router/routes.ts

@@ -19,8 +19,8 @@ export const routes = [
         component: () => import('@/views/Support.vue'),
     },
     {
-        path: '/datav/gobal',
+        path: '/datav/global',
-        component: () => import('@/views/datav/Gobal.vue'),
+        component: () => import('@/views/datav/Global.vue'),
     },
     {
         path: '/datav/videoInsp',

src/views/datav/CaseVerif.vue

@@ -8,7 +8,8 @@
             <datav-card title="分县市局排名" subTitle="案件数">
               <datav-tabs
                   type="bottom-button"
-                  v-model="caseCountRankTab"
+                  v-model="caseVerifRankTab"
+                  ref="caseVerifRankTabs"
               >
                 <datav-tab-item label="分县市局" name="1">
                   <el-scrollbar height="350px">
@@ -38,6 +39,7 @@
                       style="height: 320px"
                       :option="zfbaPieOption"
                       autoresize
+                      ref="zfbaProProperty"
                   />
                 </datav-tab-item>
                 <datav-tab-item label="服务管理" name="2">
@@ -130,6 +132,7 @@
                         style="height: 340px"
                         :option="ajlyPieOption"
                         autoresize
+                        ref="caseSourceRate"
                     />
                   </div>
                 </datav-tab-item>
@@ -144,6 +147,7 @@
                 </datav-tab-item>
               </datav-tabs>
             </datav-card>
+
             <datav-card>
               <datav-tabs>
                 <datav-tab-item label="禁闭处理情况" name="1">
@@ -152,6 +156,7 @@
                         style="height: 340px"
                         :option="jbcloption"
                         autoresize
+                        ref="jbclSituation"
                     />
                   </div>
                 </datav-tab-item>
@@ -187,10 +192,11 @@ import {
   getConfinementAndPause,
   getCaseVerificationCount
 } from "@/api/screen/caseVerif.ts";
+import {circularChart} from "@/views/datav/simulateData/AnimationTestData.js";
 
 const currentYear = new Date().getFullYear();
 const years = ref([currentYear.toString(), (currentYear - 1).toString(), (currentYear - 2).toString()]); // 年份列表
-const selectedYear = ref('2024'); // 当前选中的年份
+const selectedYear = ref(currentYear); // 当前选中的年份
 const time = ref([
   moment().subtract(1, "year").format("YYYY-MM-DD"),
   moment().format("YYYY-MM-DD"),
@@ -208,12 +214,19 @@ const overview = ref({
 });
 let globalTempMapVoList = ref([]);
 
-const caseCountRankTab = ref('1')
+const caseVerifRankTab = ref('1');
+const caseVerifRankTabs = ref(null);
+const zfbaProProperty = ref(null);
 const caseVerifMap = ref(null);
 const caseVerifProTrend = ref(null);
+const caseSourceRate = ref(null);
+const jbclSituation = ref(null);
+let caseVerifRankIntervalId;
+let caseVerifProPropertyIntervalId;
 let caseVerifMapIntervalId;
 let caseVerifTrendIntervalId;
-let caseCountRankIntervalId;
+let caseVerifCaseSourceIntervalId;
+let caseVerifJbclSituationIntervalId;
 const colors = [
   {
     color: "linear-gradient( 270deg, #FB002D 0%, #822232 100%)",
@@ -395,6 +408,7 @@ const ajlyPieOption = ref({
   ],
   tooltip: {
     trigger: "item",
+    position: 'bottom',
   },
 });
 const wzclPieOption = ref({
@@ -425,6 +439,7 @@ const zfbaPieOption = ref({
   ],
   tooltip: {
     trigger: "item",
+    position: 'bottom',
   },
 });
 const fwglPieOption = ref({
@@ -460,6 +475,7 @@ const jgjjPieOption = ref({
 const jbcloption = ref({
   tooltip: {
     trigger: "item",
+    position: 'bottom',
   },
   series: [
     {
@@ -519,6 +535,7 @@ const getCaseVerificationRankData = async (timeValue) => {
 const getCaseProblemPropertyData = async (timeValue) => {
   const res = await getCaseProblemProperty(timeValue);
   zfbaPieOption.value.series[0].data = res.zfbaPieList;
+  // zfbaPieOption.value.series[0].data = circularChart
   fwglPieOption.value.series[0].data = res.fwglPieList;
 }
 const getCaseVerificationCountData = async (timeValue) => {
@@ -593,13 +610,16 @@ const getCaseVerificationTrendData = async (year) => {
 const getCaseSourceRateAndDealSituationData = async (timeValue) => {
   const res = await getCaseSourceRateAndDealSituation(timeValue);
   ajlyPieOption.value.series[0].data = res.caseSourceRateList
+  // ajlyPieOption.value.series[0].data = circularChart
   wzclPieOption.value.series[0].data = res.dealSituationPieList
 }
 const getConfinementAndPauseData = async (timeValue) => {
   const res = await getConfinementAndPause(timeValue);
   jbcloption.value.series[0].data = res.jbclList;
+  // jbcloption.value.series[0].data = circularChart
   tzcloption.value.series[0].data = res.dzclList;
 }
+
 function getData() {
   getCaseVerificationRankData(time.value);
   getCaseProblemPropertyData(time.value)
@@ -610,66 +630,95 @@ function getData() {
   getConfinementAndPauseData(time.value);
 }
 
+// endregion
+
+// region动画
 // 分县市局排名动画
-const caseCountRankAnimation = () => {
+const caseVerifRankAnimation = () => {
-  caseCountRankTab.value = (parseInt(caseCountRankTab.value) % 2 + 1).toString();
+  caseVerifRankTab.value = (parseInt(caseVerifRankTab.value) % 2 + 1).toString();
 };
-caseCountRankIntervalId = setInterval(caseCountRankAnimation, 2000);
+caseVerifRankIntervalId = setInterval(caseVerifRankAnimation, 2000);
-
+const caseVerifProPropertyAnimation = () => {
+  const temp = zfbaProProperty?.value?.chart;
+  if (!temp) return;
+  const length = zfbaPieOption.value.series[0].data.length;
+  const randomNum = Math.floor(Math.random() * length);
+  temp?.dispatchAction({type: 'downplay', seriesIndex: 0});
+  temp?.dispatchAction({type: 'highlight', seriesIndex: 0, dataIndex: randomNum}); // 显示
+  temp?.dispatchAction({type: 'showTip', seriesIndex: 0, dataIndex: randomNum});
+}
+caseVerifProPropertyIntervalId = setInterval(caseVerifProPropertyAnimation, 2000);
 // 地图动画
 const caseVerifMapAnimation = () => {
-  const myCaseVerifMap = caseVerifMap?.value?.chart;
+  const mapTemp = caseVerifMap?.value?.chart;
-  if (!myCaseVerifMap) return;
+  if (!mapTemp) return;
   // 来个随机数，9个图  0~8的整数就ok
   const randomNum = Math.floor(Math.random() * 9);
-  myCaseVerifMap.dispatchAction({
+  mapTemp.dispatchAction({
     type: "downplay", //downplay 取消高亮
     seriesIndex: 0,
   });
-  myCaseVerifMap.dispatchAction({
+  mapTemp.dispatchAction({
     type: "highlight", //highLight 高亮指定的数据图形
     seriesIndex: 0, //系列index
     dataIndex: randomNum, //数据index
   });
-  myCaseVerifMap.dispatchAction({
+  mapTemp.dispatchAction({
     type: "showTip", //showTip 显示提示框
     seriesIndex: 0,
     dataIndex: randomNum,
   });
 }
-// 启动定时器，每隔 2 秒执行一次
 caseVerifMapIntervalId = setInterval(caseVerifMapAnimation, 2000);
-
 // 问题趋势动画
-const CaseVerifTrendAnimation = () => {
+const caseVerifTrendAnimation = () => {
-  const myCaseVerifProTrend = caseVerifProTrend?.value?.chart;
+  const proTrendTemp = caseVerifProTrend?.value?.chart;
-  if (!myCaseVerifProTrend) return;
+  if (!proTrendTemp) return;
   const randomNum = Math.floor(Math.random() * 12);
-  myCaseVerifProTrend.dispatchAction({
+  proTrendTemp.dispatchAction({
     type: 'showTip',
     seriesIndex: 0,
     dataIndex: randomNum,
   });
 }
-caseVerifTrendIntervalId = setInterval(CaseVerifTrendAnimation, 2000);
+caseVerifTrendIntervalId = setInterval(caseVerifTrendAnimation, 2000);
+// 案件来源占比
+const caseVerifCaseSourceRateAnimation = () => {
+  const temp = caseSourceRate?.value?.chart;
+  if (!temp) return;
+  const length = ajlyPieOption.value.series[0].data.length;
+  const randomNum = Math.floor(Math.random() * length);
+  temp?.dispatchAction({type: 'downplay', seriesIndex: 0});
+  temp?.dispatchAction({type: 'highlight', seriesIndex: 0, dataIndex: randomNum}); // 显示
+  temp?.dispatchAction({type: 'showTip', seriesIndex: 0, dataIndex: randomNum});
+}
+caseVerifCaseSourceIntervalId = setInterval(caseVerifCaseSourceRateAnimation, 2000);
+// 禁闭处理情况
+const caseVerifJbclSituationAnimation = () => {
+  const temp = jbclSituation?.value?.chart;
+  if (!temp) return;
+  const length = jbcloption.value.series[0].data.length;
+  const randomNum = Math.floor(Math.random() * length);
+  temp?.dispatchAction({type: 'downplay', seriesIndex: 0});
+  temp?.dispatchAction({type: 'highlight', seriesIndex: 0, dataIndex: randomNum}); // 显示
+  temp?.dispatchAction({type: 'showTip', seriesIndex: 0, dataIndex: randomNum});
+}
+caseVerifJbclSituationIntervalId = setInterval(caseVerifJbclSituationAnimation, 2000);
+// region动画
 
 
+// region 事件||监听
+watch(time, () => {
+  getData();
+});
 onMounted(() => {
   getData();
-  caseCountRankAnimation()
   setupEventListeners();
 });
-// endregion
-
-
-// region 事件||监听
 const handleCommand = (year) => {
   selectedYear.value = year; // 更新当前选中的年份
   getCaseVerificationTrendData(selectedYear.value);
 };
-watch(time, () => {
-  getData();
-});
 const handleClick = (params) => {
   const departId = params.data.departId;
   const url = router.resolve({
@@ -679,20 +728,87 @@ const handleClick = (params) => {
   window.open(url, "_blank");
 }
 const setupEventListeners = () => {
-  const myCaseVerifMap = caseVerifMap?.value?.chart;
+  caseVerifRankAnimationStop();
+  caseVerifMapAnimationStop();
+  caseVerifProPropertyAnimationStop();
+  caseVerifTrendAnimationStop();
+  caseVerifCaseSourceRateAnimationStop();
+  caseVerifJbclSituationAnimationStop();
+};
+const caseVerifRankAnimationStop = () => {
+  const temp = caseVerifRankTabs.value.$el;
+  temp.addEventListener('mouseenter', () => {
+    clearInterval(caseVerifRankIntervalId)
+  });
+  temp.addEventListener('mouseleave', () => {
+    clearInterval(caseVerifRankIntervalId); // 确保没有多个定时器同时运行
+    caseVerifRankIntervalId = setInterval(caseVerifRankAnimation, 3000);
+  });
+}
+const caseVerifProPropertyAnimationStop = () => {
+  const temp = zfbaProProperty?.value?.chart;
+  temp.on('mousemove', (e) => {
+    clearInterval(caseVerifProPropertyIntervalId);
+    temp.dispatchAction({type: "downplay", seriesIndex: 0,});
+    temp.dispatchAction({type: "highlight", seriesIndex: 0, dataIndex: e.dataIndex,});
+    temp.dispatchAction({type: "showTip", seriesIndex: 0, dataIndex: e.dataIndex,});
+  })
+  temp.on('mouseout', () => {
+    clearInterval(caseVerifProPropertyIntervalId);
+    caseVerifProPropertyIntervalId = setInterval(caseVerifProPropertyAnimation, 2000);
+  })
+}
+const caseVerifMapAnimationStop = () => {
+  const mapTemp = caseVerifMap?.value?.chart;
   // 鼠标移入
-  myCaseVerifMap.on('mousemove', (e) => {
+  mapTemp.on('mousemove', (e) => {
     clearInterval(caseVerifMapIntervalId);
-    myCaseVerifMap.dispatchAction({type: "downplay", seriesIndex: 0,});
+    mapTemp.dispatchAction({type: "downplay", seriesIndex: 0,});
-    myCaseVerifMap.dispatchAction({type: "highlight", seriesIndex: 0, dataIndex: e.dataIndex,});
+    mapTemp.dispatchAction({type: "highlight", seriesIndex: 0, dataIndex: e.dataIndex,});
-    myCaseVerifMap.dispatchAction({type: "showTip", seriesIndex: 0, dataIndex: e.dataIndex,});
+    mapTemp.dispatchAction({type: "showTip", seriesIndex: 0, dataIndex: e.dataIndex,});
   });
   // 鼠标移出
-  myCaseVerifMap.on('mouseout', () => {
+  mapTemp.on('mouseout', () => {
     clearInterval(caseVerifMapIntervalId); // 确保没有多个定时器同时运行
     caseVerifMapIntervalId = setInterval(caseVerifMapAnimation, 2000);
   });
-};
+}
+const caseVerifTrendAnimationStop = () => {
+  const temp = caseVerifProTrend?.value.getDom();
+  temp.addEventListener('mouseenter', () => {
+    clearInterval(caseVerifTrendIntervalId);
+  });
+  temp.addEventListener('mouseleave', () => {
+    clearInterval(caseVerifTrendIntervalId);
+    caseVerifTrendIntervalId = setInterval(caseVerifTrendAnimation, 1000);
+  });
+}
+const caseVerifCaseSourceRateAnimationStop = () => {
+  const temp = caseSourceRate?.value?.chart;
+  temp.on('mousemove', (e) => {
+    clearInterval(caseVerifCaseSourceIntervalId);
+    temp.dispatchAction({type: "downplay", seriesIndex: 0,});
+    temp.dispatchAction({type: "highlight", seriesIndex: 0, dataIndex: e.dataIndex,});
+    temp.dispatchAction({type: "showTip", seriesIndex: 0, dataIndex: e.dataIndex,});
+  })
+  temp.on('mouseout', () => {
+    clearInterval(caseVerifCaseSourceIntervalId);
+    caseVerifCaseSourceIntervalId = setInterval(caseVerifCaseSourceRateAnimation, 2000);
+  })
+}
+const caseVerifJbclSituationAnimationStop = () => {
+  const temp = jbclSituation?.value?.chart;
+  temp.on('mousemove', (e) => {
+    clearInterval(caseVerifJbclSituationIntervalId);
+    temp.dispatchAction({type: "downplay", seriesIndex: 0,});
+    temp.dispatchAction({type: "highlight", seriesIndex: 0, dataIndex: e.dataIndex,});
+    temp.dispatchAction({type: "showTip", seriesIndex: 0, dataIndex: e.dataIndex,});
+  })
+  temp.on('mouseout', () => {
+    clearInterval(caseVerifJbclSituationIntervalId);
+    caseVerifJbclSituationIntervalId = setInterval(caseVerifJbclSituationAnimation, 2000);
+  })
+}
 // endregion
 
 </script>

src/views/datav/Global.vue

@@ -9,8 +9,7 @@
               <datav-tabs
                   v-model="activeOrgTab"
                   type="bottom-button"
-                  @mouseenter.native="handleMouseEnter"
+                  ref="cardProRank"
-                  @mouseleave.native="handleMouseLeave"
               >
                 <datav-tab-item label="分县市局" name="1">
                   <el-scrollbar height="340px">
@@ -151,6 +150,7 @@ import {
   getAllGlobalCount,
   getGlobalTrend
 } from "@/api/screen/gobal.ts";
+import {mapOrgNameMapping, orgMapping} from "@/enums/orgMapping.js";
 
 // region  各种变量
 const router = useRouter();
@@ -201,11 +201,12 @@ const colors = [
 ];
 
 const activeOrgTab = ref("1");
+const cardProRank = ref(null);
 const globalMap = ref(null)
 const globalTrend = ref(null)
 const ywlxzbOption = ref(null)
 const wtlxzbOption = ref(null)
-let cardIntervalId;
+let cardProRankIntervalId;
 let wtlxPieCircularIntervalId;  // 问题类型占比定时器
 let globalMapIntervalId;   // 地图定时器
 let globalTrendIntervalId;   // 问题趋势定时器
@@ -259,7 +260,6 @@ const option = ref({
     trigger: 'item',
     position: "bottom",
     formatter: function (params) {
-      // console.log(params);
       const dataItem = globalTempMapVoList.value.find(item => item.name.includes(params.name.substring(0, 2)));
       if (dataItem) {
         return `
@@ -426,56 +426,13 @@ const getAllGlobalCountData = async (timeValue = time.value) => {
 }
 const getGlobalMapData = async (timeValue = time.value) => {
   const res = await getGlobalMap(timeValue);
-  const mappedData = res.globalTempMapVoList.map(item => {
+  const mappedData = mapOrgNameMapping(res.globalTempMapVoList, "totalPro");
-    let name;
+  // 所有问题总数
-    switch (item.name) {
-      case '长沙县局':
-        name = '长沙县';
-        break;
-      case '芙蓉分局':
-        name = '芙蓉区';
-        break;
-      case '天心分局':
-        name = '天心区';
-        break;
-      case '岳麓分局':
-        name = '岳麓区';
-        break;
-      case '开福分局':
-        name = '开福区';
-        break;
-      case '雨花分局':
-        name = '雨花区';
-        break;
-      case '望城分局':
-        name = '望城区';
-        break;
-      case '宁乡市局':
-        name = '宁乡市';
-        break;
-      case '浏阳市局':
-        name = '浏阳市';
-        break;
-      case '高新分局':
-        name = '高新区';
-        break;
-      default:
-        name = item.name;
-        break;
-    }
-    return {
-      ...item,
-      originalName: item.name, // 添加原始名称
-      name: name,
-      value: item.totalPro,
-    };
-  });
-  // 总数
   const maxItem = mappedData.reduce((max, item) => (Number(item.value) > Number(max.value) ? item : max), mappedData[0]);
   const range60Percent = maxItem.value * 0.6   // 不用取整，小数也可以
   const range80Percent = maxItem.value * 0.8   // 不用取整，小数也可以
   globalTempMapVoList.value = mappedData;
-  option.value.series[0].data = globalTempMapVoList;
+  option.value.series[0].data = mappedData;
   option.value.visualMap.pieces = [
     {gte: 0, lte: range60Percent, label: "低于最大问题的60%", color: "#4987F6"},
     {gte: range60Percent, lte: range80Percent, label: "介于最大问题的60%~80%", color: "#F6A149"},
@@ -510,27 +467,25 @@ function getData() {
   getProblemBusinessRateData();
 }
 
-onMounted(() => {
-  getData();
-  cardAnimation();
-  setupEventListeners();
-});
 // endregion
 
 // region 动画
 // 卡片动画
 const cardAnimation = () => {
   activeOrgTab.value = (parseInt(activeOrgTab.value) % 2 + 1).toString();
-  cardIntervalId = setTimeout(cardAnimation, 3000);
 };
-const handleMouseEnter = () => {
+cardProRankIntervalId = setInterval(cardAnimation, 3000);
-  clearInterval(cardIntervalId)
+// 业务类型占比环形图
-};
+const ywlxzbCircularAnimation = () => {
-const handleMouseLeave = () => {
+  const ywlxzbOptionTemp = ywlxzbOption?.value?.chart;
-  cardIntervalId = setTimeout(() => {
+  if (!ywlxzbOptionTemp) return;
-    cardAnimation();
+  const length = ywlxPieOption.value.series[0].data.length;
-  }, 3000);
+  const randomNum = Math.floor(Math.random() * length);
+  ywlxzbOptionTemp?.dispatchAction({type: 'downplay', seriesIndex: 0});
+  ywlxzbOptionTemp?.dispatchAction({type: 'highlight', seriesIndex: 0, dataIndex: randomNum}); // 显示
+  ywlxzbOptionTemp?.dispatchAction({type: 'showTip', seriesIndex: 0, dataIndex: randomNum});
 };
+ywlxPieCircularIntervalId = setInterval(ywlxzbCircularAnimation, 2000);
 
 // 地图动画
 const mapAnimation = () => {
@@ -569,19 +524,7 @@ const globalTrendAnimation = () => {
 }
 globalTrendIntervalId = setInterval(globalTrendAnimation, 2000);
 
-// 执法办案环形图
+// 问题类型占比环形图
-const yelxzbCircularAnimation = () => {
-  const ywlxzbOptionTemp = ywlxzbOption?.value?.chart;
-  if (!ywlxzbOptionTemp) return;
-  const length = ywlxPieOption.value.series[0].data.length;
-  const randomNum = Math.floor(Math.random() * length);
-  ywlxzbOptionTemp?.dispatchAction({type: 'downplay', seriesIndex: 0});
-  ywlxzbOptionTemp?.dispatchAction({type: 'highlight', seriesIndex: 0, dataIndex: randomNum}); // 显示
-  ywlxzbOptionTemp?.dispatchAction({type: 'showTip', seriesIndex: 0, dataIndex: randomNum});
-};
-ywlxPieCircularIntervalId = setInterval(yelxzbCircularAnimation, 2000);
-
-// 执法办案环形图
 const wtlxzbCircularAnimation = () => {
   const wtlxzbOptionTemp = wtlxzbOption?.value?.chart;
   if (!wtlxzbOptionTemp) return;
@@ -595,6 +538,10 @@ wtlxPieCircularIntervalId = setInterval(wtlxzbCircularAnimation, 2000);
 // endregion
 
 // region 事件||监听
+onMounted(() => {
+  getData();
+  setupEventListeners();
+});
 // 更换年份事件
 const handleCommand = (year) => {
   selectedYear.value = year; // 更新当前选中的年份
@@ -613,47 +560,75 @@ const handleClick = (params) => {
   }).href;
   window.open(url, "_blank");
 }
-// 鼠标经过事件
+
+// 鼠标经过||进入事件  用于停止动画，清除定时器
 const setupEventListeners = () => {
-  const ywlxzbOptionTemp = ywlxzbOption?.value?.chart;
+  cartProRankAnimtionStop()
-  ywlxzbOptionTemp.on('mousemove', (e) => {
+  ywlxzbAnimationStop()
+  mapAnimationStop()
+  trendAnimationStop()
+  wtlxzbAnimationStop()
+};
+const cartProRankAnimtionStop = () => {
+  const temp = cardProRank.value?.$el;
+  temp.addEventListener('mouseenter', () => {
+    clearInterval(cardProRankIntervalId)
+  });
+  temp.addEventListener('mouseleave', () => {
+    cardProRankIntervalId = setTimeout(() => {
+      cardAnimation();
+    }, 3000);
+  });
+}
+const ywlxzbAnimationStop = () => {
+  const temp = ywlxzbOption?.value?.chart;
+  temp.on('mousemove', (e) => {
     clearInterval(ywlxPieCircularIntervalId);
-    ywlxzbOptionTemp.dispatchAction({type: "downplay", seriesIndex: 0,});
+    temp.dispatchAction({type: "downplay", seriesIndex: 0,});
-    ywlxzbOptionTemp.dispatchAction({type: "highlight", seriesIndex: 0, dataIndex: e.dataIndex,});
+    temp.dispatchAction({type: "highlight", seriesIndex: 0, dataIndex: e.dataIndex,});
-    ywlxzbOptionTemp.dispatchAction({type: "showTip", seriesIndex: 0, dataIndex: e.dataIndex,});
+    temp.dispatchAction({type: "showTip", seriesIndex: 0, dataIndex: e.dataIndex,});
   })
-  ywlxzbOptionTemp.on('mouseout', () => {
+  temp.on('mouseout', () => {
     clearInterval(ywlxPieCircularIntervalId);
-    ywlxPieCircularIntervalId = setInterval(yelxzbCircularAnimation, 2000);
+    ywlxPieCircularIntervalId = setInterval(ywlxzbCircularAnimation, 2000);
-
   });
-
+}
-
+const mapAnimationStop = () => {
-  const myGlobalMap = globalMap.value.chart;
+  const temp = globalMap.value.chart;
-  myGlobalMap.on('mousemove', (e) => {
+  temp.on('mousemove', (e) => {
     clearInterval(globalMapIntervalId);
-    myGlobalMap.dispatchAction({type: "downplay", seriesIndex: 0,});
+    temp.dispatchAction({type: "downplay", seriesIndex: 0,});
-    myGlobalMap.dispatchAction({type: "highlight", seriesIndex: 0, dataIndex: e.dataIndex,});
+    temp.dispatchAction({type: "highlight", seriesIndex: 0, dataIndex: e.dataIndex,});
-    myGlobalMap.dispatchAction({type: "showTip", seriesIndex: 0, dataIndex: e.dataIndex,});
+    temp.dispatchAction({type: "showTip", seriesIndex: 0, dataIndex: e.dataIndex,});
   });
-  myGlobalMap.on('mouseout', () => {
+  temp.on('mouseout', () => {
     clearInterval(globalMapIntervalId); // 确保没有多个定时器同时运行
     globalMapIntervalId = setInterval(mapAnimation, 2000);
   });
-
+}
-
+const trendAnimationStop = () => {
-  const wtlxzbOptionTemp = wtlxzbOption?.value?.chart;
+  const temp = globalTrend?.value.getDom();
-  wtlxzbOptionTemp.on('mousemove', (e) => {
+  temp.addEventListener('mouseenter', () => {
+    clearInterval(globalTrendIntervalId);
+  });
+  temp.addEventListener('mouseleave', () => {
+    clearInterval(globalTrendIntervalId);
+    globalTrendIntervalId = setInterval(globalTrendAnimation, 2000);
+  });
+}
+const wtlxzbAnimationStop = () => {
+  const temp = wtlxzbOption?.value?.chart;
+  temp.on('mousemove', (e) => {
     clearInterval(wtlxPieCircularIntervalId);
-    wtlxzbOptionTemp.dispatchAction({type: "downplay", seriesIndex: 0,});
+    temp.dispatchAction({type: "downplay", seriesIndex: 0,});
-    wtlxzbOptionTemp.dispatchAction({type: "highlight", seriesIndex: 0, dataIndex: e.dataIndex,});
+    temp.dispatchAction({type: "highlight", seriesIndex: 0, dataIndex: e.dataIndex,});
-    wtlxzbOptionTemp.dispatchAction({type: "showTip", seriesIndex: 0, dataIndex: e.dataIndex,});
+    temp.dispatchAction({type: "showTip", seriesIndex: 0, dataIndex: e.dataIndex,});
   })
-  wtlxzbOptionTemp.on('mouseout', () => {
+  temp.on('mouseout', () => {
     clearInterval(wtlxPieCircularIntervalId);
     wtlxPieCircularIntervalId = setInterval(wtlxzbCircularAnimation, 2000);
   })
-};
+}
 // endregion
 
 

src/views/datav/Jwpy.vue

@@ -61,7 +61,7 @@
 
             </datav-card>
             <datav-card title="调查滿意度">
-              <el-container >
+              <el-container>
                 <el-header>
                   <el-row class="mb-32">
                     <el-col :span="11">
@@ -422,10 +422,28 @@ const handleChartClick = async (params) => {
     }
   }
   await getData();
+  // 覆盖 综合滿意度排名 右下角
+  discovery();
 };
 // endregion
 
 
+// 覆盖满意度排名右下角
+const discovery = () => {
+  // 综合满意度排名
+  GetZHMYLPM(selectYear.value, selectMonth.value, selectOrg.value, task.value, 2).then((res) => {
+    tableData1.value = res[0].lstCity
+    let temp = res[0].lstSheng;
+    // 返回数据数组是连着的  这里需要分组
+    // const group2 = temp.filter(item => item.SetName === "(省)县市考评");
+    const group3 = temp.filter(item => item.SetName === "(省)派出所");
+    // tableData2.value = group2
+    tableData3.value = group3
+  });
+
+}
+
+
 echarts.registerMap("changsha", changshaMap);
 const option = ref({
   geo: {
@@ -477,7 +495,7 @@ const option1 = ref({
   xAxis: {
     type: "category",
     boundaryGap: true,
-    data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月',],
+    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月',],
     axisLabel: {
       interval: 0,
     },
@@ -529,7 +547,7 @@ const option1 = ref({
           },
         ]),
       },
-      data: [1,1,1,1,1,1,1,1,1,1,1,1], // 直接添加数据
+      data: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1], // 直接添加数据
     },
   ],
   grid: {left: '0%', right: '0%', top: '5%', bottom: '0%', containLabel: true},
@@ -538,7 +556,7 @@ const option2 = ref({
   xAxis: {
     type: "category",
     boundaryGap: true,
-    data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月',],
+    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月',],
     axisTick: {
       show: false // 隐藏x轴的刻度
     },
@@ -585,7 +603,7 @@ const option2 = ref({
           color: 'rgba(109, 221, 159, 0.47)'
         }, {offset: 1, color: 'rgba(109, 221, 159, 0)'}])
       },
-      data: [1,1,1,1,1,1,1,1,1,1,1,1], // 直接添加数据
+      data: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1], // 直接添加数据
     },
   ],
   grid: {left: '5%', right: '5%', top: '10%', bottom: '20%', containLabel: true},
@@ -711,8 +729,6 @@ onMounted(async () => {
   }
   // 获取数据
   await getData();
-
-
 });
 
 async function getData() {

src/views/datav/MailVisits.vue

@@ -187,6 +187,13 @@
                       autoresize
                   />
                 </datav-tab-item>
+                <datav-tab-item label="局长信箱" name="3">
+                  <v-charts
+                      style="width: 105%; height: 300px; "
+                      :option="manageTrend"
+                      autoresize
+                  />
+                </datav-tab-item>
                 <datav-tab-item label="12337信访" name="4">
                   <v-charts
                       style="width: 105%; height: 300px; "
@@ -465,13 +472,13 @@ const getOverview = async (timeValue = time.value) => {
 const getTrend = async (year = selectedYear.value) => {
   const res = await getMailTrend(year);
   const policeList = res.policeList;
-  const manageList = res.manageList;
+  const commissionerList = res.commissionerList;
   const numberList = res.numberList;
   const countryList = res.countryList;
   const policecategories = policeList.map(item => item.name);
   const policevalues = policeList.map(item => item.value);
-  const managecategories = manageList.map(item => item.name);
+  const managecategories = commissionerList.map(item => item.name);
-  const managevalues = manageList.map(item => item.value);
+  const managevalues = commissionerList.map(item => item.value);
   const numbercategories = numberList.map(item => item.name);
   const numbervalues = numberList.map(item => item.value);
   const countrycategories = countryList.map(item => item.name);
@@ -581,62 +588,15 @@ echarts.registerMap("changsha", changshaMap);
 const gobalTempMapVoList = [
   {
     "name": "芙蓉分局",
-    "total": 704,
+    "total": 0,
-    "countryTotal": 153,
+    "countryTotal": 0,
-    "policeTotal": 506,
+    "policeTotal": 0,
-    "numTotal": 45,
+    "commissionerTotal":0,
-  }, {
+    "numTotal": 0,
-    "name": "天心分局",
-    "total": 700,
-    "countryTotal": 150,
-    "policeTotal": 483,
-    "numTotal": 67,
-  }, {
-    "name": "岳麓分局",
-    "total": 609,
-    "countryTotal": 94,
-    "policeTotal": 462,
-    "numTotal": 53,
-  }, {
-    "name": "开福分局",
-    "total": 392,
-    "countryTotal": 108,
-    "policeTotal": 224,
-    "numTotal": 60,
-  }, {
-    "name": "雨花分局",
-    "total": 886,
-    "countryTotal": 204,
-    "policeTotal": 601,
-    "numTotal": 81,
-  }, {
-    "name": "望城分局",
-    "total": 273,
-    "countryTotal": 22,
-    "policeTotal": 224,
-    "numTotal": 27,
-  }, {
-    "name": "浏阳市局",
-    "total": 335,
-    "countryTotal": 34,
-    "policeTotal": 261,
-    "numTotal": 40,
-  }, {
-    "name": "宁乡市局",
-    "total": 309,
-    "countryTotal": 16,
-    "policeTotal": 267,
-    "numTotal": 26,
-  }, {
-    "name": "长沙县局",
-    "total": 422,
-    "countryTotal": 75,
-    "policeTotal": 303,
-    "numTotal": 44,
   }
 ];
 
-// const gobalTempMapVoList=[]
+
 const option = ref({
   geo: {
     map: "changsha",
@@ -646,6 +606,7 @@ const option = ref({
     formatter: function (params) {
       console.log(params)
       const dataItem = mailMapIconList.value.find(item => item.name.includes(params.name.substring(0, 2)));
+      //
       if (dataItem) {
         return `
         <div class="tooltip">
@@ -1142,11 +1103,4 @@ const handleClick = (params) => {
 
 </style>
 
-<!--
+
-<datav-tab-item label="局长信箱" name="3">
-<v-charts
-    style="width: 105%; height: 300px; "
-    :option="manageTrend"
-    autoresize
-/>
-</datav-tab-item>-->

src/views/datav/SceneInsp.vue

@@ -11,6 +11,7 @@
               <datav-tabs
                   v-model="rcdcProRankTab"
                   type="bottom-button"
+                  ref="sceneInspRcdcProRankTabs"
               >
                 <datav-tab-item label="分县市局" name="1">
                   <el-row class="mb-32">
@@ -131,6 +132,7 @@
                   style="height: 310px"
                   :option="wtlxPieOption"
                   autoresize
+                  ref="sceneProblemTypeRate"
               />
             </datav-card>
           </el-col>
@@ -175,7 +177,7 @@
                 :option="option"
                 autoresize
                 @click="handleClick"
-                ref="sceneInspMap"
+                ref="sceneMap"
             />
             <datav-card title="问题趋势">
               <v-charts
@@ -202,7 +204,9 @@
 
           <el-col :span="6">
             <datav-card>
-              <datav-tabs v-model="zxdcProRankTab" size="small">
+              <datav-tabs v-model="zxdcProRankTab"
+                          size="small"
+                          ref="sceneInspZxdcProRankTabs">
                 <datav-tab-item label="黄赌毒" name="1">
                   <datav-tabs
                       type="bottom-button">
@@ -768,13 +772,15 @@
 
 
             <datav-card title="督察工作动态">
-              <el-scrollbar height="310px">
+              <el-scrollbar height="310px" ref="sceneScrollbar">
                 <datav-message
                     v-for="(msg, index) in messages"
                     :key="index"
                     :type="msg.type"
-                    :title="msg.title"
+                    :title="msg.workType"
-                    :content="msg.content" :date="msg.date"
+                    :content="msg.contentTxt"
+                    :date="msg.releaseTime"
+
                 />
               </el-scrollbar>
             </datav-card>
@@ -794,11 +800,20 @@ import moment from "moment";
 import {
   getChangedRank, getCheckBeer, getCompanyProblem, getGunController, getHandleCase,
   getProblemTypeRate, getSupervisionNotifyCount, getSupervisionNotifyMap,
-  getSupervisionTrend, getYellowBetDrug
+  getSupervisionTrend, getWorkDynamics, getYellowBetDrug
 } from "@/api/data/supervisionNotify.ts";
 import router from "@/router/index.ts";
+import {circularChart, workDynamics} from "@/views/datav/simulateData/AnimationTestData.js";
+
 
 // region 所有变量
+const time = ref([
+  moment().subtract(1, "year").format("YYYY-MM-DD"),
+  moment().format("YYYY-MM-DD"),
+]);
+const currentYear = new Date().getFullYear();
+const years = ref([currentYear.toString(), (currentYear - 1).toString(), (currentYear - 2).toString()]); // 年份列表
+const selectedYear = ref(currentYear); // 当前选中的年份
 
 const overview = ref({
   problemNumber: 0,
@@ -892,43 +907,27 @@ const jsdwCheckBeerRankList = ref([])  //  工作日测酒排行局属单位
 const messages = ref([
   {
     type: '',
-    title: '工作简报',
+    workType: '工作简报',
-    content: '为强化队伍纪律作风监督，给严打整治“雷霆行动”及即将到来的国庆节安保维稳工作提供强有力的纪律监督保障，9月25日20时至23时，市局警务督察支队安排6个现场督察组，对干部、民警共计119人开展集中酒精吹气测试。',
+    contentTxt: '为强化队伍纪律作风监督，给严打整治“雷霆行动”及即将到来的国庆节安保维稳工作提供强有力的纪律监督保障，9月25日20时至23时，市局警务督察支队安排6个现场督察组，对干部、民警共计119人开展集中酒精吹气测试。',
-    date: '2024-09-27 10:32'
+    releaseTime: '2024-09-27 10:32'
-  },
-  {
-    type: 'warning',
-    title: '工作简报',
-    content: '为持续抓好“六项规定”贯彻执行，扎实做好中秋佳节前队伍纪律作风监督，9月3日20时至22时，市局警务督察支队联合机关党委以及来支队跟班学习的督察专干，组成6个督察组，对干部、民警、辅警共计112人开展集中酒精吹气测试。',
-    date: '2024-09-06 16:23'
-  },
-  {
-    type: 'warning',
-    title: '工作简报',
-    content: '为强化队伍纪律作风监督，给“夏季治安打击整治行动”及党的二十届三中全会安保维稳工作提供强有力地纪律监督保障，7月11日晚，市局警务督察支队联合机关党委，派出6个现场督察组，对干部、民警、辅警共计111人开展集中酒精吹气测试。',
-    date: '2024-07-15 14:39'
-  },
-  {
-    type: 'warning',
-    title: '工作简报',
-    content: '为督促各参战警力切实履职，拧紧责任链条，保障周杰伦演唱会安全顺利进行，根据市局统一部署，2024年5月30日至6月2日，由警务督察支队牵头，统筹参战单位督察力量，对全市公安机关周杰伦演唱会安全保卫工作开展全方位督导检查。',
-    date: '2024-06-06 09:04'
   }
 ]);
-const currentYear = new Date().getFullYear();
-const years = ref([currentYear.toString(), (currentYear - 1).toString(), (currentYear - 2).toString()]); // 年份列表
-const selectedYear = ref(currentYear); // 当前选中的年份
-const time = ref([
-  moment().subtract(1, "year").format("YYYY-MM-DD"),
-  moment().format("YYYY-MM-DD"),
-]);
-
-const sceneInspMap = ref(null);
-const sceneInspProTrend = ref(null);
 const rcdcProRankTab = ref("1"); // 日常督察问题排行tab
 const zxdcProRankTab = ref("1"); // 专项督察问题排行tab
+const sceneInspRcdcProRankTabs = ref(null)
+const sceneProblemTypeRate = ref(null);
+const sceneMap = ref(null);
+const sceneInspProTrend = ref(null);
+const sceneInspZxdcProRankTabs = ref(null);
+const sceneScrollbar = ref(null);
+const currentIndex = ref(0);
+let sceneInspRcdxIntervalId;
+let sceneProblemTypeRateIntervalId;
 let sceneInspMapIntervalId;
 let sceneInspTrendIntervalId;
+let sceneInspZxdxIntervalId;
+let sceneWorkDynamicsIntervalId;
+
 const colors = [
   {
     color: "linear-gradient( 270deg, #FB002D 0%, #822232 100%)",
@@ -943,7 +942,6 @@ const colors = [
     percentage: 0,
   },
 ];
-
 const dayTimeColors = [
   {
     color: "linear-gradient( 270deg, #63E700 0%, #19674C 100%)",
@@ -959,9 +957,6 @@ const dayTimeColors = [
     percentage: 0,
   },
 ];
-
-
-
 // endregion
 
 // region 所有图表
@@ -1149,9 +1144,9 @@ const getChangedRankData = async () => {
   fxsjChangedRankList.value = res.fxsjChangedRankList;
   jsdwChangedRankList.value = res.jsdwChangedRankList;
 }
-
 const getProblemTypeRateData = async () => {
   const res = await getProblemTypeRate(time.value);
+  // wtlxList.value = circularChart;
   wtlxList.value = res.wtlxList;
 }
 const getSupervisionNotifyCountData = async () => {
@@ -1224,7 +1219,6 @@ const getSupervisionTrendData = async () => {
   proTrend.value.xAxis.data = categories;
   proTrend.value.series[0].data = values;
 }
-
 const getYellowBetDrugData = async () => {
   const res = await getYellowBetDrug(time.value);
   fxsjYellowBetOverview.value = res.fxsjYellowBetOverview;
@@ -1261,6 +1255,14 @@ const getCheckBeerData = async () => {
   fxsjCheckBeerRankList.value = res.fxsjCheckBeerRankList;
   jsdwCheckBeerRankList.value = res.jsdwCheckBeerRankList;
 }
+const getWorkDynamicsData = async () => {
+  const res = await getWorkDynamics(time.value);
+  // 还要颜色映射
+  // messages.value = workDynamics;
+  messages.value = res.newsVoList;
+}
+getWorkDynamicsData()
+
 const getData = async () => {
   getChangedRankData();
   getProblemTypeRateData();
@@ -1273,32 +1275,42 @@ const getData = async () => {
   getHandleCaseData();
   getCheckBeerData();
 }
+// endregion
 
-const rcdxRankAnimation = () => {
+// region 动画
-  rcdcProRankTab.value = (parseInt(rcdcProRankTab.value) % 2 + 1).toString();
+// 日常督察问题排行动画
-  setTimeout(rcdxRankAnimation, 3000);
-};
 
-const zxdxRankAnimation = () => {
+const sceneInspRcdxRankAnimation = () => {
-  zxdcProRankTab.value = (parseInt(zxdcProRankTab.value) % 5 + 1).toString();
+  rcdcProRankTab.value = (parseInt(rcdcProRankTab.value) % 2 + 1).toString();
-  setTimeout(zxdxRankAnimation, 3000);
 };
-
+sceneInspRcdxIntervalId = setInterval(sceneInspRcdxRankAnimation, 3000);
+// 问题类型占比
+const sceneProblemTypeRateAnimation = () => {
+  const temp = sceneProblemTypeRate?.value?.chart;
+  if (!temp) return;
+  const length = wtlxPieOption.value.series[0].data.length;
+  const randomNum = Math.floor(Math.random() * length);
+  temp?.dispatchAction({type: 'downplay', seriesIndex: 0});
+  temp?.dispatchAction({type: 'highlight', seriesIndex: 0, dataIndex: randomNum}); // 显示
+  temp?.dispatchAction({type: 'showTip', seriesIndex: 0, dataIndex: randomNum});
+}
+sceneProblemTypeRateIntervalId = setInterval(sceneProblemTypeRateAnimation, 2000);
+// 地图动画
 const sceneInspMapAnimation = () => {
-  const mySceneInspMap = sceneInspMap?.value?.chart;
+  const mapTemp = sceneMap?.value?.chart;
-  if (!mySceneInspMap) return;
+  if (!mapTemp) return;
   // 来个随机数，9个图  0~8的整数就ok
   const randomNum = Math.floor(Math.random() * 9);
-  mySceneInspMap.dispatchAction({
+  mapTemp.dispatchAction({
     type: "downplay", //downplay 取消高亮
     seriesIndex: 0,
   });
-  mySceneInspMap.dispatchAction({
+  mapTemp.dispatchAction({
     type: "highlight", //highLight 高亮指定的数据图形
     seriesIndex: 0, //系列index
     dataIndex: randomNum, //数据index
   });
-  mySceneInspMap.dispatchAction({
+  mapTemp.dispatchAction({
     type: "showTip", //showTip 显示提示框
     seriesIndex: 0,
     dataIndex: randomNum,
@@ -1306,31 +1318,47 @@ const sceneInspMapAnimation = () => {
 };
 // 启动定时器，每隔 2 秒执行一次
 sceneInspMapIntervalId = setInterval(sceneInspMapAnimation, 2000);
-
+// 问题趋势动画
-const SceneInspTrendAnimation = () => {
+const sceneInspTrendAnimation = () => {
-  const mySceneInspProTrend = sceneInspProTrend?.value?.chart;
+  const trendTemp = sceneInspProTrend?.value?.chart;
-  if (!mySceneInspProTrend) return;
+  if (!trendTemp) return;
   const randomNum = Math.floor(Math.random() * 12);
-  mySceneInspProTrend.dispatchAction({
+  trendTemp.dispatchAction({
     type: 'showTip',
     seriesIndex: 0,
     dataIndex: randomNum,
   });
 }
-sceneInspTrendIntervalId = setInterval(SceneInspTrendAnimation, 2000);
+sceneInspTrendIntervalId = setInterval(sceneInspTrendAnimation, 2000);
+// 专项督察问题排行动画  直接切换大tab，里面不管了
+const sceneInspZxdxRankAnimation = () => {
+  zxdcProRankTab.value = (parseInt(zxdcProRankTab.value) % 5 + 1).toString();
+};
+sceneInspZxdxIntervalId = setInterval(sceneInspZxdxRankAnimation, 3000);
+// 工作动态动画
+const sceneWorkDynamicsAnimation = () => {
+  const sceneScrollTemp = sceneScrollbar?.value;
+  const maxScroll = sceneScrollTemp?.wrapRef?.scrollHeight - sceneScrollTemp?.wrapRef?.clientHeight;
+  currentIndex.value > maxScroll ? currentIndex.value = 0 : currentIndex.value += 1;
+  if (currentIndex.value === 0) {
+    sceneScrollTemp?.scrollTo({top: currentIndex.value});
+  } else {
+    sceneScrollTemp?.scrollTo({top: currentIndex.value});
+  }
+}
+sceneWorkDynamicsIntervalId = setInterval(sceneWorkDynamicsAnimation, 50);
 
-onMounted(() => {
-  getData();
-  rcdxRankAnimation();  // 日常督察问题排行动画
-  zxdxRankAnimation();  // 专项督察问题排行动画
-  setupEventListeners();
-});
 // endregion
 
+
 // region 事件
 watch(time, () => {
   getData();
 });
+onMounted(() => {
+  getData();
+  setupEventListeners();
+});
 const handleCommand = (year) => {
   selectedYear.value = year; // 更新当前选中的年份
   getSupervisionTrend(year).then(res => {
@@ -1342,6 +1370,7 @@ const handleCommand = (year) => {
     proTrend.value.series[0].data = values;
   });
 };
+
 const handleClick = (params) => {
   const departId = params.data.departId;
   const url = router.resolve({
@@ -1353,20 +1382,82 @@ const handleClick = (params) => {
 
 // 鼠标经过地图事件
 const setupEventListeners = () => {
-  const mySceneInspMap = sceneInspMap?.value?.chart;
+  sceneInspRcdxRankAnimationStop();
+  sceneProblemTypeRateAnimationStop();
+  sceneInspMapAnimationStop();
+  SceneInspTrendAnimationStop();
+  sceneInspZxdxRankAnimationStop();
+  sceneWorkDynamicsAnimationStop();
+};
+const sceneInspRcdxRankAnimationStop = () => {
+  const temp = sceneInspRcdcProRankTabs.value?.$el;
+  temp.addEventListener('mouseenter', () => {
+    clearInterval(sceneInspRcdxIntervalId)
+  });
+  temp.addEventListener('mouseleave', () => {
+    clearInterval(sceneInspRcdxIntervalId);
+    sceneInspRcdxIntervalId = setInterval(sceneInspRcdxRankAnimation, 3000);
+  });
+}
+const sceneProblemTypeRateAnimationStop = () => {
+  const temp = sceneProblemTypeRate?.value?.chart;
+  temp.on('mousemove', (e) => {
+    clearInterval(sceneProblemTypeRateIntervalId);
+    temp.dispatchAction({type: "downplay", seriesIndex: 0,});
+    temp.dispatchAction({type: "highlight", seriesIndex: 0, dataIndex: e.dataIndex,});
+    temp.dispatchAction({type: "showTip", seriesIndex: 0, dataIndex: e.dataIndex,});
+  })
+  temp.on('mouseout', () => {
+    clearInterval(sceneProblemTypeRateIntervalId);
+    sceneProblemTypeRateIntervalId = setInterval(sceneProblemTypeRateAnimation, 2000);
+  })
+}
+const sceneInspMapAnimationStop = () => {
+  const mapTemp = sceneMap?.value?.chart;
   // 鼠标移入
-  mySceneInspMap.on('mousemove', (e) => {
+  mapTemp.on('mousemove', (e) => {
     clearInterval(sceneInspMapIntervalId);
-    mySceneInspMap.dispatchAction({type: "downplay", seriesIndex: 0,});
+    mapTemp.dispatchAction({type: "downplay", seriesIndex: 0,});
-    mySceneInspMap.dispatchAction({type: "highlight", seriesIndex: 0, dataIndex: e.dataIndex,});
+    mapTemp.dispatchAction({type: "highlight", seriesIndex: 0, dataIndex: e.dataIndex,});
-    mySceneInspMap.dispatchAction({type: "showTip", seriesIndex: 0, dataIndex: e.dataIndex,});
+    mapTemp.dispatchAction({type: "showTip", seriesIndex: 0, dataIndex: e.dataIndex,});
   });
   // 鼠标移出
-  mySceneInspMap.on('mouseout', () => {
+  mapTemp.on('mouseout', () => {
     clearInterval(sceneInspMapIntervalId); // 确保没有多个定时器同时运行
     sceneInspMapIntervalId = setInterval(sceneInspMapAnimation, 2000);
   });
-};
+}
+const SceneInspTrendAnimationStop = () => {
+  const temp = sceneInspProTrend?.value.getDom();
+  temp.addEventListener('mouseenter', () => {
+    clearInterval(sceneInspTrendIntervalId);
+  });
+  temp.addEventListener('mouseleave', () => {
+    clearInterval(sceneInspTrendIntervalId);
+    sceneInspTrendIntervalId = setInterval(sceneInspTrendAnimation, 2000);
+  });
+}
+const sceneInspZxdxRankAnimationStop = () => {
+  const temp = sceneInspZxdcProRankTabs.value?.$el;
+  temp.addEventListener('mouseenter', () => {
+    clearInterval(sceneInspZxdxIntervalId)
+  });
+  temp.addEventListener('mouseleave', () => {
+    clearInterval(sceneInspZxdxIntervalId);
+    sceneInspZxdxIntervalId = setInterval(sceneInspZxdxRankAnimation, 3000);
+  });
+}
+const sceneWorkDynamicsAnimationStop = () => {
+  const temp = sceneScrollbar.value?.$el;
+  temp.addEventListener('mouseenter', () => {
+    // alert(1);
+    clearInterval(sceneWorkDynamicsIntervalId)
+  });
+  temp.addEventListener('mouseleave', () => {
+    clearInterval(sceneWorkDynamicsIntervalId);
+    sceneWorkDynamicsIntervalId = setInterval(sceneWorkDynamicsAnimation, 50);
+  });
+}
 // endregion
 
 </script>

src/views/datav/VideoInsp.vue

@@ -46,6 +46,7 @@
               <datav-tabs
                   type="bottom-button"
                   v-model="proRankTab"
+                  ref="videoProRank"
               >
                 <datav-tab-item label="分县市局" name="1">
                   <el-scrollbar height="280px">
@@ -181,6 +182,7 @@
                   style="height: 300px"
                   :option="ProblemTypeRateChart"
                   autoresize
+                  ref="videoProblemTypeRate"
               />
             </datav-card>
           </el-col>
@@ -200,6 +202,7 @@ import {
   getVideoSuperviseProblemRank, getVideoSuperviseMap, getVideoSuperviseTrend
 } from "@/api/screen/videoSupervise.ts";
 import moment from "moment/moment.js";
+import {mapOrgNameMapping} from "@/enums/orgMapping.js";
 
 // region 所有变量
 const router = useRouter();
@@ -210,7 +213,6 @@ const time = ref([
 const proRankTab = ref("1");
 const fxsjRankList = ref([]);
 const jsdwRankList = ref([]);
-
 const overview = ref({
   discoverProblem: 0,
   changedProblem: 0,
@@ -231,10 +233,15 @@ const mapIconList = ref([{
 const currentYear = new Date().getFullYear();
 const years = ref([currentYear.toString(), (currentYear - 1).toString(), (currentYear - 2).toString()]); // 年份列表
 const selectedYear = ref(currentYear); // 当前选中的年份
+
+const videoProRank = ref(null)
 const videoMap = ref(null);
-const videoProTrend=ref(null);
+const videoProTrend = ref(null);
+const videoProblemTypeRate = ref(null);
+let videoProRankIntervalId;
 let videoMapIntervalId;
-let videoInspTrendIntervalId;
+let videoTrendIntervalId;
+let videoProblemTypeRateIntervalId;
 const colors = [
   {
     color: "linear-gradient( 270deg, #FB002D 0%, #822232 100%)",
@@ -245,7 +252,7 @@ const colors = [
     percentage: 60,
   }
 ];
-const videoUrl = 'webrtc://47.121.143.167/live/livestream';
+
 // endregion
 
 // region 所有图表
@@ -395,8 +402,7 @@ const option = ref({
         borderColor: "#FF0000", // 高亮时边框颜色
         borderWidth: 4 // 高亮时边框宽度
       },
-      data: mapIconList,
+      data: [],
-
     }
   ],
 })
@@ -429,57 +435,13 @@ const getAllVideoSuperviseCountData = async (timeValue) => {
 }
 const getVideoSuperviseMapData = async (timeValue) => {
   const res = await getVideoSuperviseMap(timeValue);
-  // console.log(res.videoSuperviseMapIconVoList)
+  const mappedData = mapOrgNameMapping(res.videoSuperviseMapIconVoList, "discoverProblem");
-  const mappedData = res.videoSuperviseMapIconVoList.map(item => {
-    let name;
-    switch (item.name) {
-      case '长沙县局':
-        name = '长沙县';
-        break;
-      case '芙蓉分局':
-        name = '芙蓉区';
-        break;
-      case '天心分局':
-        name = '天心区';
-        break;
-      case '岳麓分局':
-        name = '岳麓区';
-        break;
-      case '开福分局':
-        name = '开福区';
-        break;
-      case '雨花分局':
-        name = '雨花区';
-        break;
-      case '望城分局':
-        name = '望城区';
-        break;
-      case '宁乡市局':
-        name = '宁乡市';
-        break;
-      case '浏阳市局':
-        name = '浏阳市';
-        break;
-      case '高新分局':
-        name = '高新区';
-        break;
-      default:
-        name = item.name;
-        break;
-    }
-    return {
-      ...item,
-      originalName: item.name, // 添加原始名称
-      name: name,
-      value: item.discoverProblem,
-    };
-  });
   // 总数
   const maxItem = mappedData.reduce((max, item) => (Number(item.value) > Number(max.value) ? item : max), mappedData[0]);
   const range60Percent = maxItem.value * 0.6   // 不用取整，小数也可以
   const range80Percent = maxItem.value * 0.8   // 不用取整，小数也可以
   mapIconList.value = mappedData
-  option.value.series[0].data = mapIconList
+  option.value.series[0].data = mappedData
   option.value.visualMap.pieces = [
     {gte: 0, lte: range60Percent, label: "低于最大问题的60%", color: "#4987F6"},
     {gte: range60Percent, lte: range80Percent, label: "介于最大问题的60%~80%", color: "#F6A149"},
@@ -499,19 +461,21 @@ const getVideoSuperviseProblemTypeRateData = async (timeValue) => {
   ProblemTypeRateChart.value.series[0].data = res.videoSuperviseProblemTypeRate
 }
 
-const getData = async () => {
+const getData = () => {
   getVideoSuperviseProblemRankData(time.value)
   getAllVideoSuperviseCountData(time.value);
   getVideoSuperviseMapData(time.value)
   getVideoSuperviseTrendData(selectedYear.value)
   getVideoSuperviseProblemTypeRateData(time.value);
 }
+// endregion
 
-const proCardAnimation = () => {
+// region  动画
+// 问题数排名动画
+const videoProRankAnimation = () => {
   proRankTab.value = (parseInt(proRankTab.value) % 2 + 1).toString();
-  setTimeout(proCardAnimation, 3000);
 };
-
+videoProRankIntervalId = setInterval(videoProRankAnimation, 3000);
 // 地图动画
 const videoMapAnimation = () => {
   const myVideoMap = videoMap?.value?.chart;
@@ -535,30 +499,37 @@ const videoMapAnimation = () => {
 };
 // 启动定时器，每隔 2 秒执行一次
 videoMapIntervalId = setInterval(videoMapAnimation, 2000);
-
+// 问题趋势
-const videoInspTrendAnimation = () => {
+const videoTrendAnimation = () => {
-  const myVideoProTrend = videoProTrend?.value?.chart;
+  const trendTemp = videoProTrend?.value?.chart;
-  if (!myVideoProTrend) return;
+  if (!trendTemp) return;
   const randomNum = Math.floor(Math.random() * 12);
-  myVideoProTrend.dispatchAction({
+  trendTemp.dispatchAction({
     type: 'showTip',
     seriesIndex: 0,
     dataIndex: randomNum,
   });
 }
-videoInspTrendIntervalId = setInterval(videoInspTrendAnimation, 2000);
+videoTrendIntervalId = setInterval(videoTrendAnimation, 2000);
+// 问题类型占比动画
+const videoProblemTypeRateAnimation = () => {
+  const temp = videoProblemTypeRate?.value?.chart;
+  if (!temp) return;
+  const length = ProblemTypeRateChart.value.series[0].data.length;
+  const randomNum = Math.floor(Math.random() * length);
+  temp?.dispatchAction({type: 'downplay', seriesIndex: 0});
+  temp?.dispatchAction({type: 'highlight', seriesIndex: 0, dataIndex: randomNum}); // 显示
+  temp?.dispatchAction({type: 'showTip', seriesIndex: 0, dataIndex: randomNum});
+}
+videoProblemTypeRateIntervalId = setInterval(videoProblemTypeRateAnimation, 2000);
+// endregion
 
 
+// region 事件||监听
 onMounted(() => {
   getData();
-  proCardAnimation();
   setupEventListeners();
-
 })
-// endregion
-
-
-// region 事件||监听
 watch(time, () => {
   getData()
 })
@@ -577,21 +548,60 @@ const handleClick = (params) => {
 
 // 鼠标经过地图事件
 const setupEventListeners = () => {
-  const myVideoMap = videoMap?.value?.chart;
+  videoProRankAnimationStop();
+  videoMapAnimationStop();
+  videoTrendAnimationStop();
+  videoProblemTypeRateAnimationStop();
+};
+const videoProRankAnimationStop = () => {
+  const temp = videoProRank.value?.$el;
+  temp.addEventListener('mouseenter', () => {
+    clearInterval(videoProRankIntervalId)
+  });
+  temp.addEventListener('mouseleave', () => {
+    clearInterval(videoProRankIntervalId); // 确保没有多个定时器同时运行
+    videoProRankIntervalId = setInterval(videoProRankAnimation, 3000);
+  });
+}
+const videoMapAnimationStop = () => {
+  const temp = videoMap?.value?.chart;
   // 鼠标移入
-  myVideoMap.on('mousemove', (e) => {
+  temp.on('mousemove', (e) => {
     clearInterval(videoMapIntervalId);
-    myVideoMap.dispatchAction({type: "downplay", seriesIndex: 0,});
+    temp.dispatchAction({type: "downplay", seriesIndex: 0,});
-    myVideoMap.dispatchAction({type: "highlight", seriesIndex: 0, dataIndex: e.dataIndex,});
+    temp.dispatchAction({type: "highlight", seriesIndex: 0, dataIndex: e.dataIndex,});
-    myVideoMap.dispatchAction({type: "showTip", seriesIndex: 0, dataIndex: e.dataIndex,});
+    temp.dispatchAction({type: "showTip", seriesIndex: 0, dataIndex: e.dataIndex,});
   });
   // 鼠标移出
-  myVideoMap.on('mouseout', () => {
+  temp.on('mouseout', () => {
     clearInterval(videoMapIntervalId); // 确保没有多个定时器同时运行
     videoMapIntervalId = setInterval(videoMapAnimation, 2000);
   });
-};
+}
-
+// videoProTrend
+const videoTrendAnimationStop = () => {
+  const temp = videoProTrend?.value.getDom();
+  temp.addEventListener('mouseenter', () => {
+    clearInterval(videoTrendIntervalId);
+  });
+  temp.addEventListener('mouseleave', () => {
+    clearInterval(videoTrendIntervalId);
+    videoTrendIntervalId = setInterval(videoTrendAnimation, 2000);
+  });
+}
+const videoProblemTypeRateAnimationStop = () => {
+  const temp = videoProblemTypeRate?.value?.chart;
+  temp.on('mousemove', (e) => {
+    clearInterval(videoProblemTypeRateIntervalId);
+    temp.dispatchAction({type: "downplay", seriesIndex: 0,});
+    temp.dispatchAction({type: "highlight", seriesIndex: 0, dataIndex: e.dataIndex,});
+    temp.dispatchAction({type: "showTip", seriesIndex: 0, dataIndex: e.dataIndex,});
+  })
+  temp.on('mouseout', () => {
+    clearInterval(videoProblemTypeRateIntervalId);
+    videoProblemTypeRateIntervalId = setInterval(videoProblemTypeRateAnimation, 2000);
+  })
+}
 // endregion
 
 

src/views/datav/simulateData/AnimationTestData.js

@@ -0,0 +1,29 @@
+export const circularChart = [
+    {"name": "张三", value: 22},
+    {"name": "李四", value: 12},
+    {"name": "王五", value: 2},
+    {"name": "赵六", value: 42},
+]
+
+export const workDynamics = [
+    {
+        type: '',
+        workType: '工作简报',
+        contentTxt: '为强化队伍纪律作风监督，给严打整治“雷霆行动”及即将到来的国庆节安保维稳工作提供强有力的纪律监督保障，9月25日20时至23时，市局警务督察支队安排6个现场督察组，对干部、民警共计119人开展集中酒精吹气测试。',
+        releaseTime: '2024-09-27 10:32'
+    },
+    {
+        type: '',
+        workType: '工作简报',
+        contentTxt: '为强化队伍纪律作风监督，给严打整治“雷霆行动”及即将到来的国庆节安保维稳工作提供强有力的纪律监督保障，9月25日20时至23时，市局警务督察支队安排6个现场督察组，对干部、民警共计119人开展集中酒精吹气测试。',
+        releaseTime: '2024-09-27 10:32'
+    },
+    {
+        type: '',
+        workType: '工作简报',
+        contentTxt: '为强化队伍纪律作风监督，给严打整治“雷霆行动”及即将到来的国庆节安保维稳工作提供强有力的纪律监督保障，9月25日20时至23时，市局警务督察支队安排6个现场督察组，对干部、民警共计119人开展集中酒精吹气测试。',
+        releaseTime: '2024-09-27 10:32'
+    }
+
+]
+

src/views/datav/simulateData/ZHMYLPH.json

@@ -0,0 +1,165 @@
+// 区域的满意率排名
+{
+  "ok": true,
+  "message": "查询成功",
+  "httpStatusCode": 0,
+  "redirectUrl": null,
+  "data": [
+    {
+      "lstSheng": [
+        {
+          "OrganizeID": null,
+          "OrganizeName": "(省)县市考评",
+          "FinalRP": "满意度",
+          "TBRp": null,
+          "TBRpts": null,
+          "SetName": null,
+          "MydRanking": "排名",
+          "State3": 0
+        },
+        {
+          "OrganizeID": "430124",
+          "OrganizeName": "宁乡市公安局",
+          "FinalRP": "96.87",
+          "TBRp": "97.64",
+          "TBRpts": "-0.77",
+          "SetName": "(省)县市考评",
+          "MydRanking": "1",
+          "State3": 28284
+        },
+        {
+          "OrganizeID": "430181",
+          "OrganizeName": "浏阳市公安局",
+          "FinalRP": "96.35",
+          "TBRp": "97.32",
+          "TBRpts": "-0.97",
+          "SetName": "(省)县市考评",
+          "MydRanking": "2",
+          "State3": 33177
+        },
+        {
+          "OrganizeID": "430112",
+          "OrganizeName": "望城分局",
+          "FinalRP": "96.25",
+          "TBRp": "97.55",
+          "TBRpts": "-1.30",
+          "SetName": "(省)县市考评",
+          "MydRanking": "3",
+          "State3": 25290
+        },
+        {
+          "OrganizeID": "430121",
+          "OrganizeName": "长沙县公安局",
+          "FinalRP": "95.91",
+          "TBRp": "96.87",
+          "TBRpts": "-0.96",
+          "SetName": "(省)县市考评",
+          "MydRanking": "4",
+          "State3": 42643
+        },
+        {
+          "OrganizeID": null,
+          "OrganizeName": "(省)区",
+          "FinalRP": "满意度",
+          "TBRp": null,
+          "TBRpts": null,
+          "SetName": null,
+          "MydRanking": "排名",
+          "State3": 0
+        },
+        {
+          "OrganizeID": "430100",
+          "OrganizeName": "长沙市直属",
+          "FinalRP": "98.78",
+          "TBRp": "97.17",
+          "TBRpts": "1.61",
+          "SetName": "(省)区",
+          "MydRanking": "1",
+          "State3": 735
+        },
+        {
+          "OrganizeID": "430197",
+          "OrganizeName": "公共交通治安管理分局",
+          "FinalRP": "95.89",
+          "TBRp": "93.18",
+          "TBRpts": "2.71",
+          "SetName": "(省)区",
+          "MydRanking": "2",
+          "State3": 324
+        },
+        {
+          "OrganizeID": "430199",
+          "OrganizeName": "高新区分局",
+          "FinalRP": "95.83",
+          "TBRp": "97.10",
+          "TBRpts": "-1.27",
+          "SetName": "(省)区",
+          "MydRanking": "3",
+          "State3": 5840
+        },
+        {
+          "OrganizeID": "430102",
+          "OrganizeName": "芙蓉分局",
+          "FinalRP": "95.77",
+          "TBRp": "97.31",
+          "TBRpts": "-1.54",
+          "SetName": "(省)区",
+          "MydRanking": "4",
+          "State3": 8982
+        },
+        {
+          "OrganizeID": "430105",
+          "OrganizeName": "开福分局",
+          "FinalRP": "95.64",
+          "TBRp": "97.05",
+          "TBRpts": "-1.41",
+          "SetName": "(省)区",
+          "MydRanking": "5",
+          "State3": 10901
+        },
+        {
+          "OrganizeID": "430103",
+          "OrganizeName": "天心分局",
+          "FinalRP": "95.54",
+          "TBRp": "97.55",
+          "TBRpts": "-2.01",
+          "SetName": "(省)区",
+          "MydRanking": "6",
+          "State3": 18346
+        },
+        {
+          "OrganizeID": "430111",
+          "OrganizeName": "雨花分局",
+          "FinalRP": "95.04",
+          "TBRp": "95.78",
+          "TBRpts": "-0.74",
+          "SetName": "(省)区",
+          "MydRanking": "7",
+          "State3": 23195
+        },
+        {
+          "OrganizeID": "430104",
+          "OrganizeName": "岳麓分局",
+          "FinalRP": "94.71",
+          "TBRp": "95.96",
+          "TBRpts": "-1.25",
+          "SetName": "(省)区",
+          "MydRanking": "8",
+          "State3": 31140
+        }
+      ],
+      "lstCity": [
+        {
+          "OrganizeID": "4301",
+          "OrganizeName": "湖南省长沙市公安局",
+          "FinalRP": "96.40",
+          "TBRp": "97.23",
+          "TBRpts": "-0.83",
+          "SetName": "(省)全市",
+          "MydRanking": "1",
+          "State3": 549852
+        }
+      ]
+    }
+  ]
+}

src/views/datav/simulateData/ZHMYLPHPlus.json

@@ -0,0 +1,274 @@
+// 总体的满意率排名
+{
+  "ok": true,
+  "message": "查询成功",
+  "httpStatusCode": 0,
+  "redirectUrl": null,
+  "data": [
+    {
+      "lstSheng": [
+        {
+          "OrganizeID": null,
+          "OrganizeName": "(省)派出所",
+          "FinalRP": "满意度",
+          "TBRp": null,
+          "TBRpts": null,
+          "SetName": null,
+          "MydRanking": "排名",
+          "State3": 0
+        },
+        {
+          "OrganizeID": "43012117",
+          "OrganizeName": "长沙县公安局交通警察大队",
+          "FinalRP": "100.00",
+          "TBRp": "98.21",
+          "TBRpts": "1.79",
+          "SetName": "(省)派出所",
+          "MydRanking": "1",
+          "State3": 18
+        },
+        {
+          "OrganizeID": "43012103",
+          "OrganizeName": "长沙县公安局治安管理大队",
+          "FinalRP": "100.00",
+          "TBRp": "100.00",
+          "TBRpts": "0.00",
+          "SetName": "(省)派出所",
+          "MydRanking": "1",
+          "State3": 8
+        },
+        {
+          "OrganizeID": "43012151",
+          "OrganizeName": "福临派出所",
+          "FinalRP": "100.00",
+          "TBRp": "98.03",
+          "TBRpts": "1.97",
+          "SetName": "(省)派出所",
+          "MydRanking": "1",
+          "State3": 150
+        },
+        {
+          "OrganizeID": "43012106",
+          "OrganizeName": "长沙县公安局人口与出入境管理大队",
+          "FinalRP": "98.67",
+          "TBRp": "99.48",
+          "TBRpts": "-0.81",
+          "SetName": "(省)派出所",
+          "MydRanking": "4",
+          "State3": 376
+        },
+        {
+          "OrganizeID": "43012150",
+          "OrganizeName": "果园派出所",
+          "FinalRP": "98.56",
+          "TBRp": "98.99",
+          "TBRpts": "-0.43",
+          "SetName": "(省)派出所",
+          "MydRanking": "5",
+          "State3": 199
+        },
+        {
+          "OrganizeID": "43012165",
+          "OrganizeName": "长龙派出所",
+          "FinalRP": "98.15",
+          "TBRp": "97.41",
+          "TBRpts": "0.74",
+          "SetName": "(省)派出所",
+          "MydRanking": "6",
+          "State3": 453
+        },
+        {
+          "OrganizeID": "43012146",
+          "OrganizeName": "金井派出所",
+          "FinalRP": "97.89",
+          "TBRp": "98.75",
+          "TBRpts": "-0.86",
+          "SetName": "(省)派出所",
+          "MydRanking": "7",
+          "State3": 308
+        },
+        {
+          "OrganizeID": "43012148",
+          "OrganizeName": "路口派出所",
+          "FinalRP": "97.62",
+          "TBRp": "95.70",
+          "TBRpts": "1.92",
+          "SetName": "(省)派出所",
+          "MydRanking": "8",
+          "State3": 154
+        },
+        {
+          "OrganizeID": "43012145",
+          "OrganizeName": "江背派出所",
+          "FinalRP": "97.31",
+          "TBRp": "99.19",
+          "TBRpts": "-1.88",
+          "SetName": "(省)派出所",
+          "MydRanking": "9",
+          "State3": 580
+        },
+        {
+          "OrganizeID": "43012156",
+          "OrganizeName": "榔梨派出所",
+          "FinalRP": "96.65",
+          "TBRp": "96.98",
+          "TBRpts": "-0.33",
+          "SetName": "(省)派出所",
+          "MydRanking": "10",
+          "State3": 1085
+        },
+        {
+          "OrganizeID": "43012157",
+          "OrganizeName": "黄兴派出所",
+          "FinalRP": "96.32",
+          "TBRp": "96.38",
+          "TBRpts": "-0.06",
+          "SetName": "(省)派出所",
+          "MydRanking": "11",
+          "State3": 1198
+        },
+        {
+          "OrganizeID": "43012154",
+          "OrganizeName": "青山铺派出所",
+          "FinalRP": "96.09",
+          "TBRp": "93.46",
+          "TBRpts": "2.63",
+          "SetName": "(省)派出所",
+          "MydRanking": "12",
+          "State3": 104
+        },
+        {
+          "OrganizeID": "43012161",
+          "OrganizeName": "新安派出所",
+          "FinalRP": "95.65",
+          "TBRp": "96.35",
+          "TBRpts": "-0.70",
+          "SetName": "(省)派出所",
+          "MydRanking": "13",
+          "State3": 1187
+        },
+        {
+          "OrganizeID": "43012105",
+          "OrganizeName": "长沙县公安局刑事侦查大队",
+          "FinalRP": "95.45",
+          "TBRp": "96.30",
+          "TBRpts": "-0.85",
+          "SetName": "(省)派出所",
+          "MydRanking": "14",
+          "State3": 11
+        },
+        {
+          "OrganizeID": "43012143",
+          "OrganizeName": "黄花派出所",
+          "FinalRP": "95.20",
+          "TBRp": "95.00",
+          "TBRpts": "0.20",
+          "SetName": "(省)派出所",
+          "MydRanking": "15",
+          "State3": 1644
+        },
+        {
+          "OrganizeID": "43012152",
+          "OrganizeName": "开慧派出所",
+          "FinalRP": "95.05",
+          "TBRp": "93.96",
+          "TBRpts": "1.09",
+          "SetName": "(省)派出所",
+          "MydRanking": "16",
+          "State3": 135
+        },
+        {
+          "OrganizeID": "43012163",
+          "OrganizeName": "泉塘派出所",
+          "FinalRP": "95.03",
+          "TBRp": "94.24",
+          "TBRpts": "0.79",
+          "SetName": "(省)派出所",
+          "MydRanking": "17",
+          "State3": 928
+        },
+        {
+          "OrganizeID": "43012162",
+          "OrganizeName": "湘龙派出所",
+          "FinalRP": "94.73",
+          "TBRp": "96.43",
+          "TBRpts": "-1.70",
+          "SetName": "(省)派出所",
+          "MydRanking": "18",
+          "State3": 2671
+        },
+        {
+          "OrganizeID": "43012144",
+          "OrganizeName": "春华派出所",
+          "FinalRP": "94.49",
+          "TBRp": "98.02",
+          "TBRpts": "-3.53",
+          "SetName": "(省)派出所",
+          "MydRanking": "19",
+          "State3": 309
+        },
+        {
+          "OrganizeID": "43012142",
+          "OrganizeName": "安沙派出所",
+          "FinalRP": "93.72",
+          "TBRp": "97.25",
+          "TBRpts": "-3.53",
+          "SetName": "(省)派出所",
+          "MydRanking": "20",
+          "State3": 679
+        },
+        {
+          "OrganizeID": "43012149",
+          "OrganizeName": "高桥派出所",
+          "FinalRP": "93.01",
+          "TBRp": "96.82",
+          "TBRpts": "-3.81",
+          "SetName": "(省)派出所",
+          "MydRanking": "21",
+          "State3": 120
+        },
+        {
+          "OrganizeID": "43012141",
+          "OrganizeName": "星沙派出所",
+          "FinalRP": "92.80",
+          "TBRp": "94.56",
+          "TBRpts": "-1.76",
+          "SetName": "(省)派出所",
+          "MydRanking": "22",
+          "State3": 2198
+        },
+        {
+          "OrganizeID": "43012155",
+          "OrganizeName": "北山派出所",
+          "FinalRP": "92.27",
+          "TBRp": "94.19",
+          "TBRpts": "-1.92",
+          "SetName": "(省)派出所",
+          "MydRanking": "23",
+          "State3": 430
+        },
+        {
+          "OrganizeID": "43012102",
+          "OrganizeName": "长沙县公安局经济犯罪侦查大队",
+          "FinalRP": "0.00",
+          "TBRp": "100.00",
+          "TBRpts": "-100.00",
+          "SetName": "(省)派出所",
+          "MydRanking": "24",
+          "State3": 0
+        },
+        {
+          "OrganizeID": "43012129",
+          "OrganizeName": "长沙县公安局指挥中心",
+          "FinalRP": "0.00",
+          "TBRp": "96.31",
+          "TBRpts": "-96.31",
+          "SetName": "(省)派出所",
+          "MydRanking": "24",
+          "State3": 0
+        }
+      ],
+      "lstCity": null
+    }
+  ]
+}

src/views/datav/subonedatav/SubOneCaseVerif.vue

@@ -8,6 +8,8 @@
             <datav-card title="所队排名" subTitle="案件数">
               <datav-tabs
                   type="bottom-button"
+                  v-model="subOneCaseVerifRankTab"
+                  ref="subOneCaseVerifRankTabs"
               >
                 <datav-tab-item label="派出所" name="1">
                   <el-scrollbar height="350px">
@@ -36,6 +38,7 @@
                       style="height: 320px"
                       :option="zfbaPieOption"
                       autoresize
+                      ref="subOneZfbaProProperty"
                   />
                 </datav-tab-item>
                 <datav-tab-item label="服务管理" name="2">
@@ -94,13 +97,15 @@
                 style="height: 420px"
                 :option="option"
                 autoresize
-                ref="chart"
+                ref="subOneCaseVerifMap"
+                @click="handleClick"
             />
             <datav-card title="查实问题趋势">
               <v-charts
                   style="height: 320px"
                   :option="proTrend"
                   autoresize
+                  ref="subOneCaseVerifProTrend"
               />
               <div class="gobal-dropdown-container">
                 <el-dropdown class="test" @command="handleCommand">
@@ -126,6 +131,7 @@
                         style="height: 340px"
                         :option="ajlyPieOption"
                         autoresize
+                        ref="subOneCaseSourceRate"
                     />
                   </div>
                 </datav-tab-item>
@@ -148,6 +154,7 @@
                         style="height: 340px"
                         :option="jbcloption"
                         autoresize
+                        ref="subOneJbclSituation"
                     />
                   </div>
                 </datav-tab-item>
@@ -167,6 +174,7 @@
       </main>
     </div>
   </el-scrollbar>
+  <negative-info-depart-dialog v-model="showDialog" :departId="tempDepartId"/>
 </template>
 
 <script setup>
@@ -177,9 +185,13 @@ import moment from "moment";
 import {getSubOneStreetMap} from "@/api/screen/subScreen/subOneGlobal.ts";
 import {
   getSubOneAllCaseVerificationCount,
-  getSubOneCaseProblemProperty, getSubOneCaseSourceRateAndDealSituation, getSubOneCaseVerificationMap,
+  getSubOneCaseProblemProperty,
-  getSubOneCaseVerificationRank, getSubOneCaseVerificationTrend
+  getSubOneCaseSourceRateAndDealSituation,
+  getSubOneCaseVerificationMap,
+  getSubOneCaseVerificationRank,
+  getSubOneCaseVerificationTrend
 } from "@/api/screen/subScreen/subOneCaseVerif.ts";
+import {circularChart} from "@/views/datav/simulateData/AnimationTestData.js";
 
 // region 所有变量
 const currentYear = new Date().getFullYear();
@@ -191,7 +203,6 @@ const time = ref([
 ]);
 const route = useRoute();
 const currentDepartId = route.query.departId;
-const chart = ref(null);  // 地图
 const currentMapData = ref({})  // 地图数据
 const fxsjBarList = ref([]);
 const jsdwBarList = ref([]);
@@ -214,6 +225,23 @@ const colors = [
     percentage: 60,
   },
 ];
+const showDialog = ref(false);
+const tempDepartId = ref(0);  // 临时部门id
+
+const subOneCaseVerifRankTab = ref('1');
+const subOneCaseVerifRankTabs = ref(null);
+const subOneZfbaProProperty = ref(null);
+const subOneCaseVerifMap = ref(null);
+const subOneCaseVerifProTrend = ref(null);
+const subOneCaseSourceRate = ref(null);
+const subOneJbclSituation = ref(null);
+let subOneCaseVerifRankIntervalId;
+let subOneCaseVerifProPropertyIntervalId;
+let subOneCaseVerifMapIntervalId;
+let subOneCaseVerifTrendIntervalId;
+let subOneCaseVerifCaseSourceIntervalId;
+let subOneCaseVerifJbclSituationIntervalId;
+
 // endregion
 
 // region 所有图表
@@ -221,11 +249,12 @@ echarts.registerMap("changsha", changshaMap);
 const option = ref({
   tooltip: {
     trigger: 'item',
+    position: 'bottom',
     formatter: function (params) {
       console.log(params)
       const dataItem = gobalTempMapVoList.value.find(item => item.name === params.name) || {}; // 找到对应的数据项
       console.log("Data item:", dataItem);
-      if (dataItem.name===params.name ) {
+      if (dataItem.name === params.name) {
         return `
         <div class="tooltip">
           <div class="tooltip-title">${params.name}</div>
@@ -272,7 +301,7 @@ const option = ref({
     },
     calculable: true,
     inRange: {
-      color: ["#4987F6","#F6A149", "#D34343" ],
+      color: ["#4987F6", "#F6A149", "#D34343"],
     },
   },
   series: [
@@ -281,7 +310,7 @@ const option = ref({
       type: "map",
       map: "changsha",
       hoverAnimation: true,
-      roam:true,
+      roam: true,
       label: {
         show: true,
         color: "white",
@@ -310,7 +339,7 @@ const proTrend = ref({
       // 去掉X轴刻度线
       show: false
     },
-    data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月'],
+    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月'],
   },
   yAxis: {
     type: "value",
@@ -370,6 +399,7 @@ const ajlyPieOption = ref({
   ],
   tooltip: {
     trigger: "item",
+    position: "bottom"
   },
 });
 const wzclPieOption = ref({
@@ -400,6 +430,7 @@ const zfbaPieOption = ref({
   ],
   tooltip: {
     trigger: "item",
+    position: "bottom"
   },
 });
 const fwglPieOption = ref({
@@ -435,6 +466,7 @@ const jgjjPieOption = ref({
 const jbcloption = ref({
   tooltip: {
     trigger: "item",
+    position: "bottom"
   },
   series: [
     {
@@ -489,24 +521,24 @@ const getMapJSON = async (departId) => {
   const res = await getSubOneStreetMap(departId);
   currentMapData.value = res;
   echarts.registerMap("changsha", res);
-  chart.value.chart.setOption(option.value);
+  subOneCaseVerifMap.value.chart.setOption(option.value);
 }
-const getRankListData = async(departId, timeValue) => {
+const getSubOneCaseVerificationRankData = async (departId, timeValue) => {
   const res = await getSubOneCaseVerificationRank(departId, timeValue);
   fxsjBarList.value = res.fxsjRankList
   jsdwBarList.value = res.jsdwRankList
 }
-const getCaseProblemPropertyList = async(departId, timeValue) => {
+const getSubOneCaseProblemPropertyData = async (departId, timeValue) => {
-  const res = await getSubOneCaseProblemProperty(departId,timeValue);
+  const res = await getSubOneCaseProblemProperty(departId, timeValue);
   zfbaPieOption.value.series[0].data = res.zfbaPieList;
   fwglPieOption.value.series[0].data = res.fwglPieList;
 }
-const getOverview = async(departId, timeValue)=>{
+const getSubOneAllCaseVerificationCountData = async (departId, timeValue) => {
   const res = await getSubOneAllCaseVerificationCount(departId, timeValue)
   overview.value = res.overview
 }
-const getMapIcon = async(departId, timeValue)=> {
+const getSubOneCaseVerificationMapData = async (departId, timeValue) => {
-  const res = await getSubOneCaseVerificationMap(departId,timeValue);
+  const res = await getSubOneCaseVerificationMap(departId, timeValue);
   const mappedData = res.caseVerificationMapList.map(item => {
     return {
       ...item,
@@ -524,7 +556,7 @@ const getMapIcon = async(departId, timeValue)=> {
     {gte: range80Percent, label: "高于最大问题80%", color: "#D34343"},
   ];
 }
-const getProTrendList= async(departId, year) => {
+const getSubOneCaseVerificationTrendData = async (departId, year) => {
   const res = await getSubOneCaseVerificationTrend(departId, year);
   const temp = res.proTrendList;
   const categories = temp.map(item => item.name);
@@ -532,43 +564,216 @@ const getProTrendList= async(departId, year) => {
   proTrend.value.xAxis.data = categories;
   proTrend.value.series[0].data = values;
 }
-const getCaseSourceAndDeal = async (departId, timeValue)=>{
+const getSubOneCaseSourceRateAndDealSituationData = async (departId, timeValue) => {
   const res = await getSubOneCaseSourceRateAndDealSituation(departId, timeValue);
   ajlyPieOption.value.series[0].data = res.caseSourceRateList
   wzclPieOption.value.series[0].data = res.dealSituationPieList
 }
 
-// const getConfinementAndPauseList =  async (timeValue)=>{
+// const getConfinementAndPauseList =  async (departId,timeValue)=>{
 //   const res = await getConfinementAndPause(timeValue);
 //   jbcloption.value.series[0].data = res.jbclList;
 //   tzcloption.value.series[0].data = res.dzclList;
+//   // jbcloption.value.series[0].data = circularChart;
 // }
 function getData() {
   getMapJSON(currentDepartId)
-  getRankListData(currentDepartId,time.value)
+  getSubOneCaseVerificationRankData(currentDepartId, time.value)
-  getCaseProblemPropertyList(currentDepartId,time.value)
+  getSubOneCaseProblemPropertyData(currentDepartId, time.value)
-  getOverview(currentDepartId,time.value)
+  getSubOneAllCaseVerificationCountData(currentDepartId, time.value)
-  getMapIcon(currentDepartId,time.value)
+  getSubOneCaseVerificationMapData(currentDepartId, time.value)
-  getProTrendList(currentDepartId,currentYear)
+  getSubOneCaseVerificationTrendData(currentDepartId, currentYear)
-  getCaseSourceAndDeal(currentDepartId,time.value)
+  getSubOneCaseSourceRateAndDealSituationData(currentDepartId, time.value)
+  // getConfinementAndPauseList(currentDepartId, time.value)
 }
 
-onMounted(() => {
-  getData();
-});
 // endregion
 
 
-// region 事件||监听
+// region动画
-const handleCommand = ( year) => {
+// 分县市局排名动画
-  selectedYear.value = year; // 更新当前选中的年份
+const subOneCaseVerifRankAnimation = () => {
-  getProTrendList(currentDepartId,year);
+  subOneCaseVerifRankTab.value = (parseInt(subOneCaseVerifRankTab.value) % 2 + 1).toString();
 };
+subOneCaseVerifRankIntervalId = setInterval(subOneCaseVerifRankAnimation, 2000);
+const subOneCaseVerifProPropertyAnimation = () => {
+  const temp = subOneZfbaProProperty?.value?.chart;
+  if (!temp) return;
+  const length = zfbaPieOption.value.series[0].data.length;
+  const randomNum = Math.floor(Math.random() * length);
+  temp?.dispatchAction({type: 'downplay', seriesIndex: 0});
+  temp?.dispatchAction({type: 'highlight', seriesIndex: 0, dataIndex: randomNum}); // 显示
+  temp?.dispatchAction({type: 'showTip', seriesIndex: 0, dataIndex: randomNum});
+}
+subOneCaseVerifProPropertyIntervalId = setInterval(subOneCaseVerifProPropertyAnimation, 2000);
+// 地图动画
+const subOneCaseVerifMapAnimation = () => {
+  const mapTemp = subOneCaseVerifMap?.value?.chart;
+  if (!mapTemp) return;
+  // 取后端传过来的有地图数据的长度，有些街道没有数据，没有意义
+  const mapLength = gobalTempMapVoList.value.length;
+  const randomNum = Math.floor(mapLength);
+  console.log(randomNum);
+  mapTemp.dispatchAction({
+    type: "downplay", //downplay 取消高亮
+  });
+  mapTemp.dispatchAction({
+    type: "highlight", //highLight 高亮指定的数据图形
+    seriesIndex: 0, //系列index
+    dataIndex: randomNum, //数据index
+  });
+  mapTemp.dispatchAction({
+    type: "showTip", //showTip 显示提示框
+    seriesIndex: 0,
+    dataIndex: randomNum,
+  });
+}
+subOneCaseVerifMapIntervalId = setInterval(subOneCaseVerifMapAnimation, 2000);
+
+// 问题趋势动画
+const subOneCaseVerifTrendAnimation = () => {
+  const proTrendTemp = subOneCaseVerifProTrend?.value?.chart;
+  if (!proTrendTemp) return;
+  const randomNum = Math.floor(Math.random() * 12);
+  proTrendTemp.dispatchAction({
+    type: 'showTip',
+    seriesIndex: 0,
+    dataIndex: randomNum,
+  });
+}
+subOneCaseVerifTrendIntervalId = setInterval(subOneCaseVerifTrendAnimation, 2000);
+// 案件来源占比
+const subOneCaseVerifCaseSourceRateAnimation = () => {
+  const temp = subOneCaseSourceRate?.value?.chart;
+  if (!temp) return;
+  const length = ajlyPieOption.value.series[0].data.length;
+  const randomNum = Math.floor(Math.random() * length);
+  temp?.dispatchAction({type: 'downplay', seriesIndex: 0});
+  temp?.dispatchAction({type: 'highlight', seriesIndex: 0, dataIndex: randomNum}); // 显示
+  temp?.dispatchAction({type: 'showTip', seriesIndex: 0, dataIndex: randomNum});
+}
+subOneCaseVerifCaseSourceIntervalId = setInterval(subOneCaseVerifCaseSourceRateAnimation, 2000);
+// 禁闭处理情况
+const subOneCaseVerifJbclSituationAnimation = () => {
+  const temp = subOneJbclSituation?.value?.chart;
+  if (!temp) return;
+  const length = jbcloption.value.series[0].data.length;
+  const randomNum = Math.floor(Math.random() * length);
+  temp?.dispatchAction({type: 'downplay', seriesIndex: 0});
+  temp?.dispatchAction({type: 'highlight', seriesIndex: 0, dataIndex: randomNum}); // 显示
+  temp?.dispatchAction({type: 'showTip', seriesIndex: 0, dataIndex: randomNum});
+}
+subOneCaseVerifJbclSituationIntervalId = setInterval(subOneCaseVerifJbclSituationAnimation, 2000);
+
+// endregion
+
+// region 事件||监听
 watch(time, () => {
   getData();
 });
-// endregion
+onMounted(() => {
+  getData();
+  setupEventListeners();
+});
+const handleCommand = (year) => {
+  selectedYear.value = year; // 更新当前选中的年份
+  getSubOneCaseVerificationTrendData(currentDepartId, year);
+};
+const handleClick = (params) => {
+  const departId = params.data.departId;
+  showDialog.value = true;
+  tempDepartId.value = departId
+  clearInterval(subOneGlobalMapIntervalId);
+}
+const setupEventListeners = () => {
+  caseVerifRankAnimationStop();
+  caseVerifProPropertyAnimationStop();
+  subOneCaseVerifMapAnimationStop();
+  subOneCaseVerifTrendAnimationStop();
+  subOneCaseVerifCaseSourceRateAnimationStop();
+  subOneCaseVerifJbclSituationAnimationStop();
+};
+const caseVerifRankAnimationStop = () => {
+  const temp = subOneCaseVerifRankTabs.value.$el;
+  temp.addEventListener('mouseenter', () => {
+    clearInterval(subOneCaseVerifRankIntervalId)
+  });
+  temp.addEventListener('mouseleave', () => {
+    clearInterval(subOneCaseVerifRankIntervalId); // 确保没有多个定时器同时运行
+    subOneCaseVerifRankIntervalId = setInterval(subOneCaseVerifRankAnimation, 3000);
+  });
+}
+
+const caseVerifProPropertyAnimationStop = () => {
+  const temp = subOneZfbaProProperty?.value?.chart;
+  temp.on('mousemove', (e) => {
+    clearInterval(subOneCaseVerifProPropertyIntervalId);
+    temp.dispatchAction({type: "downplay", seriesIndex: 0,});
+    temp.dispatchAction({type: "highlight", seriesIndex: 0, dataIndex: e.dataIndex,});
+    temp.dispatchAction({type: "showTip", seriesIndex: 0, dataIndex: e.dataIndex,});
+  })
+  temp.on('mouseout', () => {
+    clearInterval(subOneCaseVerifProPropertyIntervalId);
+    subOneCaseVerifProPropertyIntervalId = setInterval(subOneCaseVerifProPropertyAnimation, 2000);
+  })
+}
+const subOneCaseVerifMapAnimationStop = () => {
+  const mapTemp = subOneCaseVerifMap?.value?.chart;
+  // 鼠标移入
+  mapTemp.on('mousemove', (e) => {
+    clearInterval(subOneCaseVerifMapIntervalId);
+    mapTemp.dispatchAction({type: "downplay", seriesIndex: 0,});
+    mapTemp.dispatchAction({type: "highlight", seriesIndex: 0, dataIndex: e.dataIndex,});
+    mapTemp.dispatchAction({type: "showTip", seriesIndex: 0, dataIndex: e.dataIndex,});
+  });
+  // 鼠标移出
+  mapTemp.on('mouseout', () => {
+    if ( showDialog ){
+      clearInterval(subOneCaseVerifMapIntervalId); // 确保没有多个定时器同时运行
+    }else {
+      clearInterval(subOneCaseVerifMapIntervalId); // 确保没有多个定时器同时运行
+      subOneCaseVerifMapIntervalId = setInterval(subOneCaseVerifMapAnimation, 2000);
+    }
+  });
+}
+const subOneCaseVerifTrendAnimationStop = () => {
+  const temp = subOneCaseVerifProTrend?.value.getDom();
+  temp.addEventListener('mouseenter', () => {
+    clearInterval(subOneCaseVerifTrendIntervalId);
+  });
+  temp.addEventListener('mouseleave', () => {
+    clearInterval(subOneCaseVerifTrendIntervalId);
+    subOneCaseVerifTrendIntervalId = setInterval(subOneCaseVerifTrendAnimation, 2000);
+  });
+}
+const subOneCaseVerifCaseSourceRateAnimationStop = () => {
+  const temp = subOneCaseSourceRate?.value?.chart;
+  temp.on('mousemove', (e) => {
+    clearInterval(subOneCaseVerifCaseSourceIntervalId);
+    temp.dispatchAction({type: "downplay", seriesIndex: 0,});
+    temp.dispatchAction({type: "highlight", seriesIndex: 0, dataIndex: e.dataIndex,});
+    temp.dispatchAction({type: "showTip", seriesIndex: 0, dataIndex: e.dataIndex,});
+  })
+  temp.on('mouseout', () => {
+    clearInterval(subOneCaseVerifCaseSourceIntervalId);
+    subOneCaseVerifCaseSourceIntervalId = setInterval(subOneCaseVerifCaseSourceRateAnimation, 2000);
+  })
+}
+const subOneCaseVerifJbclSituationAnimationStop = () => {
+  const temp = subOneJbclSituation?.value?.chart;
+  temp.on('mousemove', (e) => {
+    clearInterval(subOneCaseVerifJbclSituationIntervalId);
+    temp.dispatchAction({type: "downplay", seriesIndex: 0,});
+    temp.dispatchAction({type: "highlight", seriesIndex: 0, dataIndex: e.dataIndex,});
+    temp.dispatchAction({type: "showTip", seriesIndex: 0, dataIndex: e.dataIndex,});
+  })
+  temp.on('mouseout', () => {
+    clearInterval(subOneCaseVerifJbclSituationIntervalId);
+    subOneCaseVerifJbclSituationIntervalId = setInterval(subOneCaseVerifJbclSituationAnimation, 2000);
+  })
+}
 
+// endregion
 
 
 </script>
@@ -653,6 +858,7 @@ watch(time, () => {
   right: 20px;
   top: 15px;
 }
+
 .test {
   width: 95px;
   height: 25px;

src/views/datav/subonedatav/SubOneGlobal.vue

@@ -9,6 +9,9 @@
               <datav-tabs
                   v-model="activeOrgTab"
                   type="bottom-button"
+                  @mouseenter.native="handleMouseEnter"
+                  @mouseleave.native="handleMouseLeave"
+                  ref="subOneCard"
               >
                 <datav-tab-item label="派出所" name="1">
                   <el-scrollbar height="340px">
@@ -35,8 +38,9 @@
             <datav-card title="业务类型占比">
               <v-charts
                   style="height: 360px;"
-                  :option="zfbaPieOption"
+                  :option="ywlxPieOption"
                   autoresize
+                  ref="subOneYwlxzbOption"
               />
             </datav-card>
           </el-col>
@@ -90,6 +94,7 @@
                     style="height: 280px;"
                     :option="proTrend"
                     autoresize
+                    ref="subOneGlobalTrend"
                 />
                 <div class="gobal-dropdown-container">
                   <el-dropdown class="test" @command="handleCommand">
@@ -124,6 +129,7 @@
                   style="height: 370px;"
                   :option="wtlxPieOption"
                   autoresize
+                  ref="subOneWtlxzbOption"
               />
             </datav-card>
 
@@ -154,13 +160,10 @@ import {
 // region  各种变量
 const showDialog = ref(false);  // 负面信息弹窗显示
 const tempDepartId = ref(0);  // 临时部门id
-
-const router = useRouter();
 const route = useRoute();
 const currentMapData = ref({})
 const subOneGlobalMap = ref(null);  // 地图
 const currentDepartId = route.query.departId;
-const activeOrgTab = ref("1");
 const fxsjlist = ref([]);  // 分县市区机构问题排名
 const jsdwlist = ref([]);  // 局属单位机构问题排名
 const ywzblist = ref([]);  // 业务类型占比
@@ -194,20 +197,25 @@ const colors = [
   },
   {
     color: "linear-gradient( 270deg, #63E700 0%, #19674C 100%)",
-    percentage: 40,
+    percentage: 0,
   },
 ];
-let subOneGlobalMapIntervalId;
+const activeOrgTab = ref("1");
+const subOneCard = ref(null);
+const globalMap = ref(null)
+const subOneGlobalTrend = ref(null)
+const subOneYwlxzbOption = ref(null)
+const subOneWtlxzbOption = ref(null)
+let subOneCardIntervalId;
+let subOneYwlxPieCircularIntervalId;  // 业务类型占比定时器
+let subOneGlobalMapIntervalId;   // 地图定时器
+let subOneGlobalTrendIntervalId;   // 问题趋势定时器
+let subOneWtlxPieCircularIntervalId;  // 问题类型占比定时器
 // endregion
 
-
 // region  图表变量
 // 业务类型占比
-const zfbaPieOption = computed(() => {
+const ywlxPieOption = ref({
-  return {
-    tooltip: {
-      trigger: "item",
-    },
   series: [
     {
       type: "pie",
@@ -215,10 +223,12 @@ const zfbaPieOption = computed(() => {
       label: {
         color: "#fff",
       },
-        data: ywzblist.value,
+      data: [],
     },
   ],
-  };
+  tooltip: {
+    trigger: "item",
+  },
 });
 // 问题类型占比
 const wtlxPieOption = computed(() => {
@@ -466,14 +476,37 @@ const getData = () => {
   getSubOneProblemBusinessRateData(currentDepartId, time.value);
   getMapJSON(currentDepartId);
 };
+// endregion
+
+// region 动画
 // 卡片动画
-const cardAnimation = () => {
+const subOneCardAnimation = () => {
   activeOrgTab.value = (parseInt(activeOrgTab.value) % 2 + 1).toString();
-  setTimeout(cardAnimation, 3000);
+  subOneCardIntervalId = setTimeout(subOneCardAnimation, 3000);
+};
+const handleMouseEnter = () => {
+  clearInterval(subOneCardIntervalId)
+};
+const handleMouseLeave = () => {
+  subOneCardIntervalId = setTimeout(() => {
+    subOneCardAnimation();
+  }, 3000);
 };
 
+// 业务类型占比环形图
+const subOneYwlxzbCircularAnimation = () => {
+  const ywlxzbOptionTemp = subOneYwlxzbOption?.value?.chart;
+  if (!ywlxzbOptionTemp) return;
+  const length = ywlxPieOption.value.series[0].data.length;
+  const randomNum = Math.floor(Math.random() * length);
+  ywlxzbOptionTemp?.dispatchAction({type: 'downplay', seriesIndex: 0});
+  ywlxzbOptionTemp?.dispatchAction({type: 'highlight', seriesIndex: 0, dataIndex: randomNum}); // 显示
+  ywlxzbOptionTemp?.dispatchAction({type: 'showTip', seriesIndex: 0, dataIndex: randomNum});
+};
+subOneYwlxPieCircularIntervalId = setInterval(subOneYwlxzbCircularAnimation, 2000);
+
 //地图动画
-const mapAnimation = () => {
+const subOneMapAnimation = () => {
   const mySubOneGlobalMap = subOneGlobalMap?.value?.chart;
   if (!mySubOneGlobalMap) return;
   // 来个随机数，9个图  0~8的整数就ok
@@ -495,30 +528,61 @@ const mapAnimation = () => {
   });
 };
 // 启动定时器，每隔 2 秒执行一次
-subOneGlobalMapIntervalId = setInterval(mapAnimation, 2000);
+subOneGlobalMapIntervalId = setInterval(subOneMapAnimation, 2000);
-
+
+// 趋势动画
+const subOneGlobalTrendAnimation = () => {
+  const myGlobalTrend = subOneGlobalTrend?.value?.chart;
+  if (!myGlobalTrend) return;
+  const randomNum = Math.floor(Math.random() * 12);
+  myGlobalTrend.dispatchAction({
+    type: 'showTip',
+    seriesIndex: 0,
+    dataIndex: randomNum,
+  });
+}
+subOneGlobalTrendIntervalId = setInterval(subOneGlobalTrendAnimation, 2000);
+
+// 问题类型占比环形图
+const subOneWtlxzbCircularAnimation = () => {
+  const wtlxzbOptionTemp = subOneWtlxzbOption?.value?.chart;
+  if (!wtlxzbOptionTemp) return;
+  const length = ywlxPieOption.value.series[0].data.length;
+  const randomNum = Math.floor(Math.random() * length);
+  wtlxzbOptionTemp?.dispatchAction({type: 'downplay', seriesIndex: 0});
+  wtlxzbOptionTemp?.dispatchAction({type: 'highlight', seriesIndex: 0, dataIndex: randomNum}); // 显示
+  wtlxzbOptionTemp?.dispatchAction({type: 'showTip', seriesIndex: 0, dataIndex: randomNum});
+};
+subOneWtlxPieCircularIntervalId = setInterval(subOneWtlxzbCircularAnimation, 2000);
 
 onMounted(() => {
   getData();
-  cardAnimation();
-  mapAnimation();
   setupEventListeners();
 });
 // endregion
 
 // region  事件||监听
+watch(time, () => {
+  getData();
+});
 const handleCommand = (year) => {
   selectedYear.value = year; // 更新当前选中的年份
   getSubOneGlobalTrendData(currentDepartId, selectedYear.value);
 };
-watch(time, () => {
-  getData();
-});
 const setupEventListeners = () => {
+  const ywlxzbOptionTemp = subOneYwlxzbOption?.value?.chart;
+  ywlxzbOptionTemp.on('mousemove', (e) => {
+    clearInterval(subOneYwlxPieCircularIntervalId);
+    ywlxzbOptionTemp.dispatchAction({type: "downplay", seriesIndex: 0,});
+    ywlxzbOptionTemp.dispatchAction({type: "highlight", seriesIndex: 0, dataIndex: e.dataIndex,});
+    ywlxzbOptionTemp.dispatchAction({type: "showTip", seriesIndex: 0, dataIndex: e.dataIndex,});
+  })
+  ywlxzbOptionTemp.on('mouseout', () => {
+    clearInterval(subOneYwlxPieCircularIntervalId);
+    subOneYwlxPieCircularIntervalId = setInterval(subOneYwlxzbCircularAnimation, 2000);
+  });
+
   const mySubOneGlobalMap = subOneGlobalMap?.value?.chart;
-  const map = document.getElementById("map");
-  console.log(map)
-  // 鼠标移入
   mySubOneGlobalMap.on('mousemove', (e) => {
     // console.log(e.dataIndex);
     clearInterval(subOneGlobalMapIntervalId);
@@ -526,16 +590,27 @@ const setupEventListeners = () => {
     mySubOneGlobalMap.dispatchAction({type: "highlight", seriesIndex: 0, dataIndex: e.dataIndex,});
     mySubOneGlobalMap.dispatchAction({type: "showTip", seriesIndex: 0, dataIndex: e.dataIndex,});
   });
-  // 鼠标移出
   mySubOneGlobalMap.on('mouseout', () => {
     // 如果有弹窗
     if (showDialog.value) {
       clearInterval(subOneGlobalMapIntervalId); // 确保没有多个定时器同时运行
     } else {
       clearInterval(subOneGlobalMapIntervalId); // 确保没有多个定时器同时运行
-      subOneGlobalMapIntervalId = setInterval(mapAnimation, 2000);
+      subOneGlobalMapIntervalId = setInterval(subOneMapAnimation, 2000);
     }
   });
+
+  const wtlxzbOptionTemp = subOneWtlxzbOption?.value?.chart;
+  wtlxzbOptionTemp.on('mousemove', (e) => {
+    clearInterval(subOneWtlxPieCircularIntervalId);
+    wtlxzbOptionTemp.dispatchAction({type: "downplay", seriesIndex: 0,});
+    wtlxzbOptionTemp.dispatchAction({type: "highlight", seriesIndex: 0, dataIndex: e.dataIndex,});
+    wtlxzbOptionTemp.dispatchAction({type: "showTip", seriesIndex: 0, dataIndex: e.dataIndex,});
+  })
+  wtlxzbOptionTemp.on('mouseout', () => {
+    clearInterval(subOneWtlxPieCircularIntervalId);
+    subOneWtlxPieCircularIntervalId = setInterval(subOneWtlxzbCircularAnimation, 2000);
+  })
 };
 
 const handleClick = (params) => {
@@ -543,7 +618,6 @@ const handleClick = (params) => {
   showDialog.value = true;
   tempDepartId.value = departId
   clearInterval(subOneGlobalMapIntervalId);
-  // alert(departId)
 }
 
 // endregion

src/views/datav/subonedatav/SubOneMailVisits.vue

@@ -560,64 +560,16 @@ const getData = () => {
 
 // region 所有图
 echarts.registerMap("changsha", changshaMap);
-const gobalTempMapVoList = [
+const globalTempMapVoList = [
   {
     "name": "芙蓉分局",
-    "total": 704,
+    "total": 0,
-    "countryTotal": 153,
+    "countryTotal": 0,
-    "policeTotal": 506,
+    "policeTotal": 0,
-    "numTotal": 45,
+    "commissionerTotal":0,
-  }, {
+    "numTotal": 0,
-    "name": "天心分局",
-    "total": 700,
-    "countryTotal": 150,
-    "policeTotal": 483,
-    "numTotal": 67,
-  }, {
-    "name": "岳麓分局",
-    "total": 609,
-    "countryTotal": 94,
-    "policeTotal": 462,
-    "numTotal": 53,
-  }, {
-    "name": "开福分局",
-    "total": 392,
-    "countryTotal": 108,
-    "policeTotal": 224,
-    "numTotal": 60,
-  }, {
-    "name": "雨花分局",
-    "total": 886,
-    "countryTotal": 204,
-    "policeTotal": 601,
-    "numTotal": 81,
-  }, {
-    "name": "望城分局",
-    "total": 273,
-    "countryTotal": 22,
-    "policeTotal": 224,
-    "numTotal": 27,
-  }, {
-    "name": "浏阳市局",
-    "total": 335,
-    "countryTotal": 34,
-    "policeTotal": 261,
-    "numTotal": 40,
-  }, {
-    "name": "宁乡市局",
-    "total": 309,
-    "countryTotal": 16,
-    "policeTotal": 267,
-    "numTotal": 26,
-  }, {
-    "name": "长沙县局",
-    "total": 422,
-    "countryTotal": 75,
-    "policeTotal": 303,
-    "numTotal": 44,
   }
 ];
-// const gobalTempMapVoList=[]
 const option = ref({
   tooltip: {
     trigger: 'item',
@@ -625,6 +577,7 @@ const option = ref({
       const dataItem = mailMapIconList.value.find(item => item.name === params.name) || {}; // 找到对应的数据项
       // console.log("Data item:", dataItem);
       console.log("Data item:", mailMapIconList.value);
+      //
       if (dataItem.name===params.name ) {
         return `
         <div class="tooltip">
@@ -698,7 +651,7 @@ const option = ref({
         borderColor: "#FF0000", // 高亮时边框颜色
         borderWidth: 4 // 高亮时边框宽度
       },
-      data: gobalTempMapVoList.map(item => ({
+      data: globalTempMapVoList.map(item => ({
         name: item.name,
         value: item.totalPro  // 将 totalPro 值映射到 value 字段
       }))

src/views/datav/subonedatav/SubOneSceneInsp.vue

@@ -7,10 +7,10 @@
 
           <el-col :span="6">
             <datav-card title="日常督察情况">
-
               <datav-tabs
-                  v-model="activeOrgTab"
+                  v-model="subOneRcdcProRankTab"
                   type="bottom-button"
+                  ref="subOneSceneInspRcdcProRankTabs"
               >
                 <datav-tab-item label="派出所" name="1">
                   <el-row class="mb-32">
@@ -123,8 +123,6 @@
                   </el-scrollbar>
                 </datav-tab-item>
               </datav-tabs>
-
-
             </datav-card>
 
 
@@ -133,6 +131,7 @@
                   style="height: 310px"
                   :option="wtlxPieOption"
                   autoresize
+                  ref="subOneSceneProblemTypeRate"
               />
             </datav-card>
           </el-col>
@@ -183,6 +182,7 @@
                   style="height: 280px"
                   :option="proTrend"
                   autoresize
+                  ref="subOneSceneInspProTrend"
               />
               <div class="gobal-dropdown-container">
                 <el-dropdown class="test" @command="handleCommand">
@@ -202,7 +202,7 @@
 
           <el-col :span="6">
             <datav-card>
-              <datav-tabs v-model="activeTabRight" size="small">
+              <datav-tabs v-model="subOneZxdcProRankTab" size="small" ref="subOneSceneInspZxdcProRankTabs">
                 <datav-tab-item label="黄赌毒" name="1">
                   <datav-tabs
                       type="bottom-button">
@@ -770,7 +770,7 @@
 
 
             <datav-card title="督察工作动态">
-              <el-scrollbar height="310px">
+              <el-scrollbar height="310px" ref="subOneSceneScrollbar">
                 <datav-message
                     v-for="(msg, index) in messages"
                     :key="index"
@@ -800,10 +800,19 @@ import {
   getSubOneProblemTypeRate, getSubOneSupervisionMap, getSubOneSupervisionNotifyCount,
   getSubOneSupervisionTrend, getSubOneYellowBetDrug
 } from "@/api/screen/subScreen/subOneSupervisionNotify.ts";
-
+import {circularChart} from "@/views/datav/simulateData/AnimationTestData.js";
 
 // region 所有变量
-const activeTabRight = ref("1")
+const time = ref([
+  moment().subtract(1, "year").format("YYYY-MM-DD"),
+  moment().format("YYYY-MM-DD"),
+]);
+const route = useRoute();
+const currentDepartId = route.query.departId;
+const currentYear = new Date().getFullYear();
+const years = ref([currentYear.toString(), (currentYear - 1).toString(), (currentYear - 2).toString()]); // 年份列表
+const selectedYear = ref(currentYear); // 当前选中的年份
+
 const overview = ref({
   correctionRate: 0,
   supervisionNotifyPreTotal: 0,
@@ -896,39 +905,29 @@ const jsdwCheckBeerRankList = ref([])  //  工作日测酒排行局属单位
 const messages = ref([
   {
     type: '',
-    title: '工作简报',
+    workType: '工作简报',
-    content: '为强化队伍纪律作风监督，给严打整治“雷霆行动”及即将到来的国庆节安保维稳工作提供强有力的纪律监督保障，9月25日20时至23时，市局警务督察支队安排6个现场督察组，对干部、民警共计119人开展集中酒精吹气测试。',
+    contentTxt: '为强化队伍纪律作风监督，给严打整治“雷霆行动”及即将到来的国庆节安保维稳工作提供强有力的纪律监督保障，9月25日20时至23时，市局警务督察支队安排6个现场督察组，对干部、民警共计119人开展集中酒精吹气测试。',
-    date: '2024-09-27 10:32'
+    releaseTime: '2024-09-27 10:32'
-  },
-  {
-    type: 'warning',
-    title: '工作简报',
-    content: '为持续抓好“六项规定”贯彻执行，扎实做好中秋佳节前队伍纪律作风监督，9月3日20时至22时，市局警务督察支队联合机关党委以及来支队跟班学习的督察专干，组成6个督察组，对干部、民警、辅警共计112人开展集中酒精吹气测试。',
-    date: '2024-09-06 16:23'
-  },
-  {
-    type: 'warning',
-    title: '工作简报',
-    content: '为强化队伍纪律作风监督，给“夏季治安打击整治行动”及党的二十届三中全会安保维稳工作提供强有力地纪律监督保障，7月11日晚，市局警务督察支队联合机关党委，派出6个现场督察组，对干部、民警、辅警共计111人开展集中酒精吹气测试。',
-    date: '2024-07-15 14:39'
-  },
-  {
-    type: 'warning',
-    title: '工作简报',
-    content: '为督促各参战警力切实履职，拧紧责任链条，保障周杰伦演唱会安全顺利进行，根据市局统一部署，2024年5月30日至6月2日，由警务督察支队牵头，统筹参战单位督察力量，对全市公安机关周杰伦演唱会安全保卫工作开展全方位督导检查。',
-    date: '2024-06-06 09:04'
   }
 ]);
-const currentYear = new Date().getFullYear();
+
-const years = ref([currentYear.toString(), (currentYear - 1).toString(), (currentYear - 2).toString()]); // 年份列表
+const subOneZxdcProRankTab = ref("1"); // 专项督察问题排行tab
-const selectedYear = ref('2024'); // 当前选中的年份
+const subOneRcdcProRankTab = ref("1")
-const subOneSceneInspMapChart = ref(null);  // 地图
+const subOneSceneInspRcdcProRankTabs = ref(null)
-const route = useRoute();
+const subOneSceneProblemTypeRate = ref(null);
-const currentDepartId = route.query.departId;
+const subOneSceneInspMapChart = ref(null);
-const time = ref([
+const subOneSceneInspProTrend = ref(null);
-  moment().subtract(1, "year").format("YYYY-MM-DD"),
+const subOneSceneInspZxdcProRankTabs = ref(null);
-  moment().format("YYYY-MM-DD"),
+const subOneSceneScrollbar = ref(null);
-]);
+const currentIndex = ref(0);
+let subOneSceneInspRcdxIntervalId;
+let subOneSceneProblemTypeRateIntervalId;
+let subOneSceneInspMapIntervalId;
+let subOneSceneInspTrendIntervalId;
+let subOneSceneInspZxdxIntervalId;
+let subOneSceneWorkDynamicsIntervalId;
+
+
 const colors = [
   {
     color: "linear-gradient( 270deg, #FB002D 0%, #822232 100%)",
@@ -943,7 +942,6 @@ const colors = [
     percentage: 0,
   },
 ];
-
 const dayTimeColors = [
   {
     color: "linear-gradient( 270deg, #63E700 0%, #19674C 100%)",
@@ -968,10 +966,11 @@ echarts.registerMap("changsha", changshaMap);
 const option = ref({
   tooltip: {
     trigger: 'item',
+    position: 'bottom',
     formatter: function (params) {
       const dataItem = superviseTempMapVoList.value.find(item => item.name === params.name) || {}; // 找到对应的数据项
       console.log("Data item:", dataItem);
-      if (dataItem.name===params.name ) {
+      if (dataItem.name === params.name) {
         return `
         <div class="tooltip">
           <div class="tooltip-title">${params.name}</div>
@@ -1146,8 +1145,8 @@ const getSubOneChangedRankData = async (departId, times) => {
 }
 const getSubOneProblemTypeRateData = async (departId, times) => {
   const res = await getSubOneProblemTypeRate(departId, times)
+  // wtlxList.value = circularChart;
   wtlxList.value = res.wtlxList
-  console.log(res);
 }
 const getSubOneSupervisionNotifyCountData = async (departId, times) => {
   const res = await getSubOneSupervisionNotifyCount(departId, times)
@@ -1235,19 +1234,174 @@ const getData = async () => {
   getSubOneHandleCaseData(currentDepartId, time.value);
   getSubOneCheckBeerData(currentDepartId, time.value);
 }
-onMounted(() => {
+
-  getData();
-});
 // endregion
 
+// region 动画
+// 日常督察问题排行动画
+const subOneSceneInspRcdxRankAnimation = () => {
+  subOneRcdcProRankTab.value = (parseInt(subOneRcdcProRankTab.value) % 2 + 1).toString();
+};
+subOneSceneInspRcdxIntervalId = setInterval(subOneSceneInspRcdxRankAnimation, 3000);
+// 问题类型占比
+const subOneSceneProblemTypeRateAnimation = () => {
+  const temp = subOneSceneProblemTypeRate?.value?.chart;
+  if (!temp) return;
+  const length = wtlxPieOption.value.series[0].data.length;
+  const randomNum = Math.floor(Math.random() * length);
+  temp?.dispatchAction({type: 'downplay', seriesIndex: 0});
+  temp?.dispatchAction({type: 'highlight', seriesIndex: 0, dataIndex: randomNum}); // 显示
+  temp?.dispatchAction({type: 'showTip', seriesIndex: 0, dataIndex: randomNum});
+}
+subOneSceneProblemTypeRateIntervalId = setInterval(subOneSceneProblemTypeRateAnimation, 2000);
+
+// 地图动画
+const subOneSceneInspMapAnimation = () => {
+  const mapTemp = subOneSceneInspMapChart?.value?.chart;
+  if (!mapTemp) return;
+  // 来个随机数，9个图  0~8的整数就ok
+  const randomNum = Math.floor(Math.random() * 9);
+  mapTemp.dispatchAction({
+    type: "downplay", //downplay 取消高亮
+    seriesIndex: 0,
+  });
+  mapTemp.dispatchAction({
+    type: "highlight", //highLight 高亮指定的数据图形
+    seriesIndex: 0, //系列index
+    dataIndex: randomNum, //数据index
+  });
+  mapTemp.dispatchAction({
+    type: "showTip", //showTip 显示提示框
+    seriesIndex: 0,
+    dataIndex: randomNum,
+  });
+};
+// 启动定时器，每隔 2 秒执行一次
+subOneSceneInspMapIntervalId = setInterval(subOneSceneInspMapAnimation, 2000);
+// 问题趋势动画
+const subOneSceneInspTrendAnimation = () => {
+  const trendTemp = subOneSceneInspProTrend?.value?.chart;
+  if (!trendTemp) return;
+  const randomNum = Math.floor(Math.random() * 12);
+  trendTemp.dispatchAction({
+    type: 'showTip',
+    seriesIndex: 0,
+    dataIndex: randomNum,
+  });
+}
+subOneSceneInspTrendIntervalId = setInterval(subOneSceneInspTrendAnimation, 2000);
+// // 专项督察问题排行动画  直接切换大tab，里面不管了
+const subOneSceneInspZxdxRankAnimation = () => {
+  subOneZxdcProRankTab.value = (parseInt(subOneZxdcProRankTab.value) % 5 + 1).toString();
+};
+subOneSceneInspZxdxIntervalId = setInterval(subOneSceneInspZxdxRankAnimation, 3000);
+// 工作动态动画
+// const subOneSceneWorkDynamicsAnimation = () => {
+//   const sceneScrollTemp = subOneSceneScrollbar?.value;
+//   const maxScroll = sceneScrollTemp?.wrapRef?.scrollHeight - sceneScrollTemp?.wrapRef?.clientHeight;
+//   currentIndex.value > maxScroll ? currentIndex.value = 0 : currentIndex.value += 1;
+//   if (currentIndex.value === 0) {
+//     sceneScrollTemp?.scrollTo({top: currentIndex.value});
+//   } else {
+//     sceneScrollTemp?.scrollTo({top: currentIndex.value});
+//   }
+// }
+// subOneSceneWorkDynamicsIntervalId = setInterval(subOneSceneWorkDynamicsAnimation, 50);
+// endregion
+
+
 // region 监听
 watch(time, () => {
   getData();
 });
+onMounted(() => {
+  getData();
+  setupEventListeners();
+});
 const handleCommand = (year) => {
   selectedYear.value = year; // 更新当前选中的年份
   getSubOneSupervisionTrendData(currentDepartId, selectedYear.value);
 };
+
+// 鼠标经过地图事件
+const setupEventListeners = () => {
+  subOneSceneInspRcdxRankAnimationStop();
+  subOneSceneProblemTypeRateAnimationStop();
+  subOneSceneInspMapAnimationStop();
+  subOneSceneInspTrendAnimationStop();
+  subOneSceneInspZxdxRankAnimationStop();
+  // subOneSceneWorkDynamicsAnimationStop();
+};
+const subOneSceneInspRcdxRankAnimationStop = () => {
+  const temp = subOneSceneInspRcdcProRankTabs.value?.$el;
+  temp.addEventListener('mouseenter', () => {
+    clearInterval(subOneSceneInspRcdxIntervalId)
+  });
+  temp.addEventListener('mouseleave', () => {
+    clearInterval(subOneSceneInspRcdxIntervalId);
+    subOneSceneInspRcdxIntervalId = setInterval(subOneSceneInspRcdxRankAnimation, 3000);
+  });
+}
+const subOneSceneProblemTypeRateAnimationStop = () => {
+  const temp = subOneSceneProblemTypeRate?.value?.chart;
+  temp.on('mousemove', (e) => {
+    clearInterval(subOneSceneProblemTypeRateIntervalId);
+    temp.dispatchAction({type: "downplay", seriesIndex: 0,});
+    temp.dispatchAction({type: "highlight", seriesIndex: 0, dataIndex: e.dataIndex,});
+    temp.dispatchAction({type: "showTip", seriesIndex: 0, dataIndex: e.dataIndex,});
+  })
+  temp.on('mouseout', () => {
+    clearInterval(subOneSceneProblemTypeRateIntervalId);
+    subOneSceneProblemTypeRateIntervalId = setInterval(subOneSceneProblemTypeRateAnimation, 2000);
+  })
+}
+const subOneSceneInspMapAnimationStop = () => {
+  const mapTemp = subOneSceneInspMapChart?.value?.chart;
+  // 鼠标移入
+  mapTemp.on('mousemove', (e) => {
+    clearInterval(subOneSceneInspMapIntervalId);
+    mapTemp.dispatchAction({type: "downplay", seriesIndex: 0,});
+    mapTemp.dispatchAction({type: "highlight", seriesIndex: 0, dataIndex: e.dataIndex,});
+    mapTemp.dispatchAction({type: "showTip", seriesIndex: 0, dataIndex: e.dataIndex,});
+  });
+  // 鼠标移出
+  mapTemp.on('mouseout', () => {
+    clearInterval(subOneSceneInspMapIntervalId); // 确保没有多个定时器同时运行
+    subOneSceneInspMapIntervalId = setInterval(subOneSceneInspMapAnimation, 2000);
+  });
+}
+const subOneSceneInspTrendAnimationStop = () => {
+  const temp = subOneSceneInspProTrend?.value.getDom();
+  temp.addEventListener('mouseenter', () => {
+    clearInterval(subOneSceneInspTrendIntervalId);
+  });
+  temp.addEventListener('mouseleave', () => {
+    clearInterval(subOneSceneInspTrendIntervalId);
+    subOneSceneInspTrendIntervalId = setInterval(subOneSceneInspTrendAnimation, 2000);
+  });
+}
+const subOneSceneInspZxdxRankAnimationStop = () => {
+  const temp = subOneSceneInspZxdcProRankTabs.value?.$el;
+  temp.addEventListener('mouseenter', () => {
+    clearInterval(subOneSceneInspZxdxIntervalId)
+  });
+  temp.addEventListener('mouseleave', () => {
+    clearInterval(subOneSceneInspZxdxIntervalId);
+    subOneSceneInspZxdxIntervalId = setInterval(subOneSceneInspZxdxRankAnimation, 3000);
+  });
+}
+// const sceneWorkDynamicsAnimationStop = () => {
+//   const temp = sceneScrollbar.value?.$el;
+//   temp.addEventListener('mouseenter', () => {
+//     // alert(1);
+//     clearInterval(sceneWorkDynamicsIntervalId)
+//   });
+//   temp.addEventListener('mouseleave', () => {
+//     clearInterval(sceneWorkDynamicsIntervalId);
+//     sceneWorkDynamicsIntervalId = setInterval(sceneWorkDynamicsAnimation, 50);
+//   });
+// }
+
 // endregion
 
 

src/views/datav/subonedatav/SubOneVideoInsp.vue

@@ -46,6 +46,7 @@
               <datav-tabs
                   type="bottom-button"
                   v-model="subOneProRankTab"
+                  ref="subOneVideoProRank"
               >
                 <datav-tab-item label="派出所" name="1">
                   <el-scrollbar height="280px">
@@ -105,13 +106,15 @@
                 style="height: 420px"
                 :option="option"
                 autoresize
-                ref="subOneVideoInspMapChart"
+                ref="subOneVideoMapChart"
+                @click="handleClick"
             />
             <datav-card title="问题趋势">
               <v-charts
                   style="height: 250px"
                   :option="proTrend"
                   autoresize
+                  ref="subOneVideoProTrend"
               />
               <div class="gobal-dropdown-container">
                 <el-dropdown class="test" @command="handleCommand">
@@ -179,12 +182,14 @@
                   style="height: 300px"
                   :option="ProblemTypeRateChart"
                   autoresize
+                  ref="subOneVideoProblemTypeRate"
               />
             </datav-card>
           </el-col>
         </el-row>
       </main>
     </div>
+    <negative-info-depart-dialog v-model="showDialog" :departId="tempDepartId"/>
   </el-scrollbar>
 </template>
 
@@ -192,16 +197,18 @@
 import changshaMap from "@/assets/data/changsha.json";
 import vCharts from "vue-echarts";
 import * as echarts from "echarts/core";
-import {
-  getVideoSuperviseMap
-} from "@/api/screen/videoSupervise.ts";
 import moment from "moment/moment.js";
 import {getSubOneStreetMap} from "@/api/screen/subScreen/subOneGlobal.ts";
 import {
-  getSubOneAllVideoSuperviseCount, getSubOneVideoSuperviseMap,
+  getSubOneAllVideoSuperviseCount,
-  getSubOneVideoSuperviseProblemRank, getSubOneVideoSuperviseProblemTypeRate, getSubOneVideoSuperviseTrend
+  getSubOneVideoSuperviseMap,
+  getSubOneVideoSuperviseProblemRank,
+  getSubOneVideoSuperviseProblemTypeRate,
+  getSubOneVideoSuperviseTrend
 } from "@/api/screen/subScreen/subOneVideoSupervise.ts";
 // region 所有变量
+const route = useRoute();
+const currentDepartId = route.query.departId;
 const time = ref([
   moment().subtract(1, "year").format("YYYY-MM-DD"),
   moment().format("YYYY-MM-DD"),
@@ -224,15 +231,13 @@ const mapIconList = ref([{
   relativePer: 152,
   changedRate: 100
 }])
+
 const currentYear = new Date().getFullYear();
-const years = ref([currentYear.toString(), (currentYear - 1).toString(), (currentYear - 2).toString()]); // 年份列表
+const years = ref([currentYear.toString(), (currentYear - 1).toString(), (currentYear - 2).toString()]);
-const selectedYear = ref('2024'); // 当前选中的年份
+const selectedYear = ref(currentYear); // 当前选中的年份
+
 const currentMapData = ref({})
-const subOneVideoInspMapChart = ref(null);  // 地图
+const subOneVideoMapChart = ref(null);  // 地图
-const route = useRoute();
-const currentDepartId = route.query.departId;
-const subOneProRankTab=ref("1")
-let subOneVideoMapIntervalId;
 const colors = [
   {
     color: "linear-gradient( 270deg, #FB002D 0%, #822232 100%)",
@@ -243,6 +248,19 @@ const colors = [
     percentage: 60,
   },
 ];
+const showDialog = ref(false);  // 负面信息弹窗显示
+const tempDepartId = ref(0);  // 临时部门id
+
+// 动画涉及到的变量
+const subOneProRankTab = ref("1")
+const subOneVideoProRank = ref(null)
+const subOneVideoProTrend = ref(null);
+const subOneVideoProblemTypeRate = ref(null);
+let subOneVideoProRankIntervalId;
+let subOneVideoMapIntervalId;
+let subOneVideoTrendIntervalId;
+let subOneVideoProblemTypeRateIntervalId;
+
 // endregion
 
 // region 所有图表
@@ -413,7 +431,7 @@ const getMapJSON = async (departId) => {
   const res = await getSubOneStreetMap(departId);
   currentMapData.value = res;
   echarts.registerMap("changsha", res);
-  subOneVideoInspMapChart.value.chart.setOption(option.value);
+  subOneVideoMapChart.value.chart.setOption(option.value);
 }
 
 const getSubOneVideoSuperviseProblemRankData = async (departId, timeValue) => {
@@ -425,8 +443,6 @@ const getSubOneAllVideoSuperviseCountData = async (departId, timeValue) => {
   const res = await getSubOneAllVideoSuperviseCount(departId, timeValue);
   overview.value = res.overview;
 }
-
-
 const getSubOneVideoSuperviseMapData = async (departId, timeValue) => {
   const res = await getSubOneVideoSuperviseMap(departId, timeValue);
   const mappedData = res.videoSuperviseMapIconVoList.map(item => {
@@ -446,13 +462,6 @@ const getSubOneVideoSuperviseMapData = async (departId, timeValue) => {
     {gte: range80Percent, label: "高于最大问题80%", color: "#D34343"},
   ];
 }
-
-const getSubOneVideoSuperviseProblemTypeRateData = async (departId, timeValue) => {
-  const res = await getSubOneVideoSuperviseProblemTypeRate(departId, timeValue);
-  ProblemTypeRateChart.value.series[0].data = res.subOneVideoSuperviseProblemTypeRate
-}
-
-
 const getSubOneVideoSuperviseTrendData = async (departId, year) => {
   const res = await getSubOneVideoSuperviseTrend(departId, year);
   const temp = res.videoSuperviseTrendList;
@@ -461,6 +470,12 @@ const getSubOneVideoSuperviseTrendData = async (departId, year) => {
   proTrend.value.xAxis.data = categories;
   proTrend.value.series[0].data = values;
 }
+const getSubOneVideoSuperviseProblemTypeRateData = async (departId, timeValue) => {
+  const res = await getSubOneVideoSuperviseProblemTypeRate(departId, timeValue);
+  ProblemTypeRateChart.value.series[0].data = res.subOneVideoSuperviseProblemTypeRate
+}
+
+
 const getData = async () => {
   getMapJSON(currentDepartId)
   getSubOneVideoSuperviseProblemRankData(currentDepartId, time.value);
@@ -472,42 +487,62 @@ const getData = async () => {
 
 
 // 卡片动画
-const subOneProCardAnimation = () => {
+const subOneVideoProRankAnimation = () => {
   subOneProRankTab.value = (parseInt(subOneProRankTab.value) % 2 + 1).toString();
-  setTimeout(subOneProCardAnimation, 3000);
 };
+subOneVideoProRankIntervalId = setInterval(subOneVideoProRankAnimation, 3000);
 
 // 地图动画
 const subOneVideoMapAnimation = () => {
-  const mySubOneVideoInspMapChart = subOneVideoInspMapChart?.value?.chart;
+  const mapTemp = subOneVideoMapChart?.value?.chart;
-  if (!mySubOneVideoInspMapChart) return;
+  if (!mapTemp) return;
   // 获取随机数，介于0到当前地图数据长度之间
   const tempNum = currentMapData?.value?.geoJson?.features?.length
   const randomNum = Math.floor(Math.random() * tempNum);
-  mySubOneVideoInspMapChart.dispatchAction({
+  mapTemp.dispatchAction({
     type: "downplay", //downplay 取消高亮
     seriesIndex: 0,
   });
-  mySubOneVideoInspMapChart.dispatchAction({
+  mapTemp.dispatchAction({
     type: "highlight", //highLight 高亮指定的数据图形
     seriesIndex: 0, //系列index
     dataIndex: randomNum, //数据index
   });
-  mySubOneVideoInspMapChart.dispatchAction({
+  mapTemp.dispatchAction({
     type: "showTip", //showTip 显示提示框
     seriesIndex: 0,
     dataIndex: randomNum,
   });
 };
-// 启动定时器，每隔 2 秒执行一次
 subOneVideoMapIntervalId = setInterval(subOneVideoMapAnimation, 2000);
 
-
+// 问题趋势动画
+const subOneVideoTrendAnimation = () => {
+  const trendTemp = subOneVideoProTrend?.value?.chart;
+  if (!trendTemp) return;
+  const randomNum = Math.floor(Math.random() * 12);
+  trendTemp.dispatchAction({
+    type: 'showTip',
+    seriesIndex: 0,
+    dataIndex: randomNum,
+  });
+}
+subOneVideoTrendIntervalId = setInterval(subOneVideoTrendAnimation, 2000);
+// 问题类型占比动画
+const subOneVideoProblemTypeRateAnimation = () => {
+  const temp = subOneVideoProblemTypeRate?.value?.chart;
+  if (!temp) return;
+  const length = ProblemTypeRateChart.value.series[0].data.length;
+  const randomNum = Math.floor(Math.random() * length);
+  temp?.dispatchAction({type: 'downplay', seriesIndex: 0});
+  temp?.dispatchAction({type: 'highlight', seriesIndex: 0, dataIndex: randomNum}); // 显示
+  temp?.dispatchAction({type: 'showTip', seriesIndex: 0, dataIndex: randomNum});
+}
+subOneVideoProblemTypeRateIntervalId = setInterval(subOneVideoProblemTypeRateAnimation, 2000);
 
 onMounted(() => {
   getData();
-  subOneProCardAnimation();  // 启动卡片动画
+  setupEventListeners();  // 设置鼠标监听
-  setupEventListeners();  // 设置地图监听
 })
 // endregion
 
@@ -519,25 +554,76 @@ const handleCommand = (year) => {
   selectedYear.value = year; // 更新当前选中的年份
   getSubOneVideoSuperviseTrendData(currentDepartId, selectedYear.value)
 };
+const subOneVideoProRankAnimationStop = () => {
+  const temp = subOneVideoProRank.value?.$el;
+  temp.addEventListener('mouseenter', () => {
+    clearInterval(subOneVideoProRankIntervalId)
+  });
+  temp.addEventListener('mouseleave', () => {
+    subOneVideoProRankIntervalId = setTimeout(() => {
+      subOneVideoProRankAnimation();
+    }, 3000);
+  });
 
-
+}
-// 鼠标经过地图事件
+const subOneVideoMapAnimationStop = () => {
-const setupEventListeners = () => {
+  const temp = subOneVideoMapChart?.value?.chart;
-  const mySubOneVideoInspMapChart = subOneVideoInspMapChart?.value?.chart;
   // 鼠标移入
-  mySubOneVideoInspMapChart.on('mousemove', (e) => {
+  temp.on('mousemove', (e) => {
     clearInterval(subOneVideoMapIntervalId);
-    mySubOneVideoInspMapChart.dispatchAction({type: "downplay", seriesIndex: 0,});
+    temp.dispatchAction({type: "downplay", seriesIndex: 0,});
-    mySubOneVideoInspMapChart.dispatchAction({type: "highlight", seriesIndex: 0, dataIndex: e.dataIndex,});
+    temp.dispatchAction({type: "highlight", seriesIndex: 0, dataIndex: e.dataIndex,});
-    mySubOneVideoInspMapChart.dispatchAction({type: "showTip", seriesIndex: 0, dataIndex: e.dataIndex,});
+    temp.dispatchAction({type: "showTip", seriesIndex: 0, dataIndex: e.dataIndex,});
   });
   // 鼠标移出
-  mySubOneVideoInspMapChart.on('mouseout', () => {
+  temp.on('mouseout', () => {
+    if (showDialog.value) {
+      clearInterval(subOneVideoMapIntervalId); // 确保没有多个定时器同时运行
+    } else {
       clearInterval(subOneVideoMapIntervalId); // 确保没有多个定时器同时运行
       subOneVideoMapIntervalId = setInterval(subOneVideoMapAnimation, 2000);
+    }
   });
-};
 
+
+}
+const subOneVideoTrendAnimationStop = () => {
+  const temp = subOneVideoProTrend?.value.getDom();
+  temp.addEventListener('mouseenter', () => {
+    clearInterval(subOneVideoTrendIntervalId);
+  });
+  temp.addEventListener('mouseleave', () => {
+    clearInterval(subOneVideoTrendIntervalId);
+    subOneVideoTrendIntervalId = setInterval(subOneVideoTrendAnimation, 2000);
+  });
+}
+const subOneVideoProblemTypeRateAnimationStop = () => {
+  const temp = subOneVideoProblemTypeRate?.value?.chart;
+  temp.on('mousemove', (e) => {
+    clearInterval(subOneVideoProblemTypeRateIntervalId);
+    temp.dispatchAction({type: "downplay", seriesIndex: 0,});
+    temp.dispatchAction({type: "highlight", seriesIndex: 0, dataIndex: e.dataIndex,});
+    temp.dispatchAction({type: "showTip", seriesIndex: 0, dataIndex: e.dataIndex,});
+  })
+  temp.on('mouseout', () => {
+    clearInterval(subOneVideoProblemTypeRateIntervalId);
+    subOneVideoProblemTypeRateIntervalId = setInterval(subOneVideoProblemTypeRateAnimation, 2000);
+  })
+}
+// 鼠标事件监听，停止动画执行
+const setupEventListeners = () => {
+  subOneVideoProRankAnimationStop();
+  subOneVideoMapAnimationStop();
+  subOneVideoTrendAnimationStop();
+  subOneVideoProblemTypeRateAnimationStop();
+};
+// 地图点击事件
+const handleClick = (params) => {
+  const departId = params.data.departId;
+  showDialog.value = true;
+  tempDepartId.value = departId
+  clearInterval(subOneVideoMapIntervalId);
+}
 // endregion
 
 </script>