动画渲染

src/api/screen/caseVerif.ts

@@ -18,9 +18,9 @@ export function getCaseProblemProperty(times) {
 
 
 
-export function getAllCaseVerificationCount(times) {
+export function getCaseVerificationCount(times) {
     return request.get({
-        url: `/datav/caseVerif/getAllCaseVerificationCount?beginTime=${times[0]}&endTime=${times[1]}`
+        url: `/datav/caseVerif/getCaseVerificationCount?beginTime=${times[0]}&endTime=${times[1]}`
     });
 }
 export function getCaseVerificationMap(times) {

src/api/screen/subScreen/subOneSupervisionNotify.ts

@@ -20,9 +20,9 @@ export function getSubOneSupervisionTrend(departId, year) {
     });
 }
 
-export function getAllSubOneSupervisionNotifyCount(departId, times) {
+export function getSubOneSupervisionNotifyCount(departId, times) {
     return request.get({
-        url: `/datav/sub1/supervisonNotify/getAllSubOneSupervisionNotifyCount?departId=${departId}&beginTime=${times[0]}&endTime=${times[1]}`
+        url: `/datav/sub1/supervisonNotify/getSubOneSupervisionNotifyCount?departId=${departId}&beginTime=${times[0]}&endTime=${times[1]}`
     });
 }
 

src/views/datav/CaseVerif.vue

@@ -8,6 +8,7 @@
             <datav-card title="分县市局排名" subTitle="案件数">
               <datav-tabs
                   type="bottom-button"
+                  v-model="caseCountRankTab"
               >
                 <datav-tab-item label="分县市局" name="1">
                   <el-scrollbar height="350px">
@@ -96,12 +97,14 @@
                 :option="option"
                 autoresize
                 @click="handleClick"
+                ref="caseVerifMap"
             />
             <datav-card title="查处问题趋势">
               <v-charts
                   style="height: 320px"
                   :option="proTrend"
                   autoresize
+                  ref="caseVerifProTrend"
               />
               <div class="gobal-dropdown-container">
                 <el-dropdown class="test" @command="handleCommand">
@@ -175,7 +178,15 @@ import vCharts from "vue-echarts";
 import changshaMap from "@/assets/data/changsha.json";
 import * as echarts from "echarts/core";
 import moment from "moment";
-import {getAllCaseVerificationCount, getCaseVerificationRank, getCaseVerificationTrend, getCaseSourceRateAndDealSituation, getCaseVerificationMap, getCaseProblemProperty, getConfinementAndPause} from "@/api/screen/CaseVerif.ts";
+import {
+  getCaseVerificationRank,
+  getCaseVerificationTrend,
+  getCaseSourceRateAndDealSituation,
+  getCaseVerificationMap,
+  getCaseProblemProperty,
+  getConfinementAndPause,
+  getCaseVerificationCount
+} from "@/api/screen/caseVerif.ts";
 
 const currentYear = new Date().getFullYear();
 const years = ref([currentYear.toString(), (currentYear - 1).toString(), (currentYear - 2).toString()]); // 年份列表
@@ -184,9 +195,6 @@ const time = ref([
   moment().startOf("year").format("YYYY-MM-DD"),
   moment().format("YYYY-MM-DD"),
 ]);
-
-
-
 const fxsjBarList = ref([]);
 const jsdwBarList = ref([]);
 const router = useRouter();
@@ -198,143 +206,30 @@ const overview = ref({
   punishOrg: 0,   // 问责单位数、
   Rate: 0,   // 查实率
 });
-let gobalTempMapVoList = ref([]);
-
-const jjjgPieList = ref([]);
-
-
-// region 事件||监听
-const handleCommand = (year) => {
-  selectedYear.value = year; // 更新当前选中的年份
-  getProTrendList(selectedYear.value);
-};
-watch(time, () => {
-  getData();
-});
-// endregion
-
-
-
-
-// region 所有函数
-const getRankList = async(timeValue) => {
-  const res = await getCaseVerificationRank(timeValue);
-  fxsjBarList.value = res.fxsjRankList
-  jsdwBarList.value = res.jsdwRankList
-}
-
-const getCaseProblemPropertyList = async(timeValue) => {
-  const res = await getCaseProblemProperty(timeValue);
-  zfbaPieOption.value.series[0].data = res.zfbaPieList;
-  fwglPieOption.value.series[0].data = res.fwglPieList;
-}
-const getOverview = async(timeValue)=>{
-  const res =  await getAllCaseVerificationCount(timeValue)
-  overview.value = res.overview
-}
-const getMapIcon = async(timeValue)=> {
-  const res = await getCaseVerificationMap(timeValue);
-  const mappedData = res.caseVerificationMapList.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.total,
-    };
-  });
-  gobalTempMapVoList.value = mappedData
-  const total = mappedData.reduce((sum, item) => sum + Number(item.value), 0);
-  const avg = total / mappedData.length; // 计算平均值
-  const range30Percent = avg*0.3   // 不用取整，小数也可以
-  option.value.series[0].data = mappedData;
-  option.value.visualMap.pieces = [
-    {gte: 0, lte: avg - range30Percent, label: "低于平均问题30%", color: "#4987F6"},
-    {gte: avg - range30Percent, lte: avg + range30Percent+0.1, label: "平均问题上下浮动30%内", color: "#F6A149"},
-    {gte: avg + range30Percent, label: "高于平均问题30%", color: "#D34343"},
-  ];
-}
-const getProTrendList= async(year) => {
-  const res = await getCaseVerificationTrend(year);
-  const temp = res.proTrendList;
-  const categories = temp.map(item => item.name);
-  const values = temp.map(item => item.value);
-  proTrend.value.xAxis.data = categories;
-  proTrend.value.series[0].data = values;
-}
-const getCaseSourceAndDeal = async (timeValue)=>{
-  const res = await getCaseSourceRateAndDealSituation(timeValue);
-  ajlyPieOption.value.series[0].data = res.caseSourceRateList
-  wzclPieOption.value.series[0].data = res.dealSituationPieList
-}
-
-const getConfinementAndPauseList =  async (timeValue)=>{
-  const res = await getConfinementAndPause(timeValue);
-  jbcloption.value.series[0].data = res.jbclList;
-  tzcloption.value.series[0].data = res.dzclList;
-}
-// endregion
-
-
-
-function getData() {
-  getRankList(time.value);
-  getCaseProblemPropertyList(time.value)
-  getOverview(time.value);
-  getMapIcon(time.value);
-  getProTrendList(selectedYear.value);
-  getCaseSourceAndDeal(time.value);
-  getConfinementAndPauseList(time.value);
-}
-
-watch(time, () => {
-  getData();
-});
-onMounted(() => {
-  getData();
-});
-
-
-
-
-
-
+let globalTempMapVoList = ref([]);
+
+const caseCountRankTab = ref('1')
+const caseVerifMap = ref(null);
+const caseVerifProTrend = ref(null);
+let caseVerifMapIntervalId;
+let caseVerifTrendIntervalId;
+let caseCountRankIntervalId;
+const colors = [
+  {
+    color: "linear-gradient( 270deg, #FB002D 0%, #822232 100%)",
+    percentage: 80,
+  },
+  {
+    color: "linear-gradient( 270deg, #FFB90E 0%, #71501D 100%)",
+    percentage: 60,
+  },
+  {
+    color: "linear-gradient( 270deg, #63E700 0%, #19674C 100%)",
+    percentage: 40,
+  },
+];
 
+// region 所有图表
 echarts.registerMap("changsha", changshaMap);
 const option = ref({
   geo: {
@@ -348,10 +243,11 @@ const option = ref({
   },
   tooltip: {
     trigger: 'item',
+    position: 'bottom',
     formatter: function (params) {
       console.log(params)
-      const dataItem = gobalTempMapVoList.value.find(item => item.name.includes(params.name.substring(0, 2)));
-      if (dataItem  ) {
+      const dataItem = globalTempMapVoList.value.find(item => item.name.includes(params.name.substring(0, 2)));
+      if (dataItem) {
         return `
         <div class="tooltip">
           <div class="tooltip-title">${dataItem.originalName}</div>
@@ -405,7 +301,7 @@ const option = ref({
     },
     calculable: true,
     inRange: {
-      color: ["#4987F6","#F6A149", "#D34343" ],
+      color: ["#4987F6", "#F6A149", "#D34343"],
     },
   },
   series: [
@@ -443,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",
@@ -615,8 +511,169 @@ const tzcloption = ref({
     },
   ],
 });
+// endregion
 
 
+// region 所有函数
+const getCaseVerificationRankData = async (timeValue) => {
+  const res = await getCaseVerificationRank(timeValue);
+  fxsjBarList.value = res.fxsjRankList
+  jsdwBarList.value = res.jsdwRankList
+}
+const getCaseProblemPropertyData = async (timeValue) => {
+  const res = await getCaseProblemProperty(timeValue);
+  zfbaPieOption.value.series[0].data = res.zfbaPieList;
+  fwglPieOption.value.series[0].data = res.fwglPieList;
+}
+const getCaseVerificationCountData = async (timeValue) => {
+  const res = await getCaseVerificationCount(timeValue)
+  overview.value = res.overview
+}
+const getCaseVerificationMapData = async (timeValue) => {
+  const res = await getCaseVerificationMap(timeValue);
+  const mappedData = res.caseVerificationMapList.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.total,
+    };
+  });
+  globalTempMapVoList.value = mappedData
+  const total = mappedData.reduce((sum, item) => sum + Number(item.value), 0);
+  const avg = total / mappedData.length; // 计算平均值
+  const range30Percent = avg * 0.3   // 不用取整，小数也可以
+  option.value.series[0].data = mappedData;
+  option.value.visualMap.pieces = [
+    {gte: 0, lte: avg - range30Percent, label: "低于平均问题30%", color: "#4987F6"},
+    {gte: avg - range30Percent, lte: avg + range30Percent + 0.1, label: "平均问题上下浮动30%内", color: "#F6A149"},
+    {gte: avg + range30Percent, label: "高于平均问题30%", color: "#D34343"},
+  ];
+}
+const getCaseVerificationTrendData = async (year) => {
+  const res = await getCaseVerificationTrend(year);
+  const temp = res.proTrendList;
+  const categories = temp.map(item => item.name);
+  const values = temp.map(item => item.value);
+  proTrend.value.xAxis.data = categories;
+  proTrend.value.series[0].data = values;
+}
+const getCaseSourceRateAndDealSituationData = async (timeValue) => {
+  const res = await getCaseSourceRateAndDealSituation(timeValue);
+  ajlyPieOption.value.series[0].data = res.caseSourceRateList
+  wzclPieOption.value.series[0].data = res.dealSituationPieList
+}
+const getConfinementAndPauseData = async (timeValue) => {
+  const res = await getConfinementAndPause(timeValue);
+  jbcloption.value.series[0].data = res.jbclList;
+  tzcloption.value.series[0].data = res.dzclList;
+}
+function getData() {
+  getCaseVerificationRankData(time.value);
+  getCaseProblemPropertyData(time.value)
+  getCaseVerificationCountData(time.value);
+  getCaseVerificationMapData(time.value);
+  getCaseVerificationTrendData(selectedYear.value);
+  getCaseSourceRateAndDealSituationData(time.value);
+  getConfinementAndPauseData(time.value);
+}
+
+// 分县市局排名动画
+const caseCountRankAnimation = () => {
+  caseCountRankTab.value = (parseInt(caseCountRankTab.value) % 2 + 1).toString();
+};
+caseCountRankIntervalId = setInterval(caseCountRankAnimation, 2000);
+
+// 地图动画
+const caseVerifMapAnimation = () => {
+  const myCaseVerifMap = caseVerifMap?.value?.chart;
+  if (!myCaseVerifMap) return;
+  // 来个随机数，9个图  0~8的整数就ok
+  const randomNum = Math.floor(Math.random() * 9);
+  myCaseVerifMap.dispatchAction({
+    type: "downplay", //downplay 取消高亮
+    seriesIndex: 0,
+  });
+  myCaseVerifMap.dispatchAction({
+    type: "highlight", //highLight 高亮指定的数据图形
+    seriesIndex: 0, //系列index
+    dataIndex: randomNum, //数据index
+  });
+  myCaseVerifMap.dispatchAction({
+    type: "showTip", //showTip 显示提示框
+    seriesIndex: 0,
+    dataIndex: randomNum,
+  });
+}
+// 启动定时器，每隔 2 秒执行一次
+caseVerifMapIntervalId = setInterval(caseVerifMapAnimation, 2000);
+
+// 问题趋势动画
+const CaseVerifTrendAnimation = () => {
+  const myCaseVerifProTrend = caseVerifProTrend.value.chart;
+  if (!myCaseVerifProTrend) return;
+  const randomNum = Math.floor(Math.random() * 12);
+  myCaseVerifProTrend.dispatchAction({
+    type: 'showTip',
+    seriesIndex: 0,
+    dataIndex: randomNum,
+  });
+}
+caseVerifTrendIntervalId = setInterval(CaseVerifTrendAnimation, 2000);
+
+
+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({
@@ -625,26 +682,22 @@ const handleClick = (params) => {
   }).href;
   window.open(url, "_blank");
 }
-
-
-
-
-const colors = [
-  {
-    color: "linear-gradient( 270deg, #FB002D 0%, #822232 100%)",
-    percentage: 80,
-  },
-  {
-    color: "linear-gradient( 270deg, #FFB90E 0%, #71501D 100%)",
-    percentage: 60,
-  },
-  {
-    color: "linear-gradient( 270deg, #63E700 0%, #19674C 100%)",
-    percentage: 40,
-  },
-];
-
-
+const setupEventListeners = () => {
+  const myCaseVerifMap = caseVerifMap?.value?.chart;
+  // 鼠标移入
+  myCaseVerifMap.on('mousemove', (e) => {
+    clearInterval(caseVerifMapIntervalId);
+    myCaseVerifMap.dispatchAction({type: "downplay", seriesIndex: 0,});
+    myCaseVerifMap.dispatchAction({type: "highlight", seriesIndex: 0, dataIndex: e.dataIndex,});
+    myCaseVerifMap.dispatchAction({type: "showTip", seriesIndex: 0, dataIndex: e.dataIndex,});
+  });
+  // 鼠标移出
+  myCaseVerifMap.on('mouseout', () => {
+    clearInterval(caseVerifMapIntervalId); // 确保没有多个定时器同时运行
+    caseVerifMapIntervalId = setInterval(caseVerifMapAnimation, 2000);
+  });
+};
+// endregion
 
 </script>
 
@@ -728,6 +781,7 @@ const colors = [
   right: 20px;
   top: 15px;
 }
+
 .test {
   width: 95px;
   height: 25px;

src/views/datav/Gobal.vue

@@ -80,6 +80,7 @@
                 :option="option"
                 autoresize
                 @click="handleClick"
+                ref="globalMap"
             />
 
             <div>
@@ -88,6 +89,7 @@
                     style="height: 280px;"
                     :option="proTrend"
                     autoresize
+                    ref="globalTrend"
                 />
                 <div class="gobal-dropdown-container">
                   <el-dropdown class="test" @command="handleCommand">
@@ -150,7 +152,6 @@ import {
 
 // region  各种变量
 const router = useRouter();
-const activeOrgTab = ref("1");
 const fxsjlist = ref([{}]);  // 分县市区机构问题排名
 const jsdwlist = ref([]);  // 局属单位机构问题排名
 const ywzblist = ref([]);  // 业务类型占比
@@ -180,10 +181,9 @@ const globalTempMapVoList = ref([
     "value": 200
   }
 ]);  // 地图临时数据
-
 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 colors = [
   {
     color: "linear-gradient( 270deg, #FB002D 0%, #822232 100%)",
@@ -198,6 +198,12 @@ const colors = [
     percentage: 40,
   },
 ];
+
+const activeOrgTab = ref("1");
+const globalMap = ref(null)
+const globalTrend=ref(null)
+let globalMapIntervalId;   // 地图定时器
+let globalTrendIntervalId;   // 问题趋势定时器
 // endregion
 
 // region  图表变量
@@ -251,6 +257,7 @@ const option = ref({
   },
   tooltip: {
     trigger: 'item',
+    position: "bottom",
     formatter: function (params) {
       // console.log(params);
       const dataItem = globalTempMapVoList.value.find(item => item.name.includes(params.name.substring(0, 2)));
@@ -288,13 +295,7 @@ const option = ref({
         </div>`;
       }
     },
-    // backgroundColor: "#031577", //
-    // borderColor: "#0A2F86",
-    borderWidth: 0, // 设置边框宽度为1像素
-    borderRadius: 3, // 设置边框半径为3像素
-    shadowBlur: 0, // 设置阴影模糊程度为8像素
-    shadowOffsetX: 0, // 设置水平阴影位移量为0像素
-    shadowOffsetY: 0, // 设置垂直阴影位移量为6像素
+
   },
   visualMap: {
     type: "piecewise",
@@ -501,6 +502,7 @@ const getProblemBusinessRateData = async (timeValue = time.value) => {
   wtlxlist.value = res.wtlxlist;
 }
 
+
 function getData() {
   getOrganizationRankData();
   getBusinessRateData();
@@ -511,26 +513,72 @@ function getData() {
   getProblemBusinessRateData();
 }
 
+// 卡片动画
+const cardAnimation = () => {
+  activeOrgTab.value = (parseInt(activeOrgTab.value) % 2 + 1).toString();
+  setTimeout(cardAnimation, 3000);
+};
+
+// 地图动画
+const mapAnimation = () => {
+  const myGlobalMap = globalMap?.value?.chart;
+  if (!myGlobalMap) return;
+  // 来个随机数，9个图  0~8的整数就ok
+  const randomNum = Math.floor(Math.random() * 9);
+  myGlobalMap.dispatchAction({
+    type: "downplay", //downplay 取消高亮
+    seriesIndex: 0,
+  });
+  myGlobalMap.dispatchAction({
+    type: "highlight", //highLight 高亮指定的数据图形
+    seriesIndex: 0, //系列index
+    dataIndex: randomNum, //数据index
+  });
+  myGlobalMap.dispatchAction({
+    type: "showTip", //showTip 显示提示框
+    seriesIndex: 0,
+    dataIndex: randomNum,
+  });
+};
+// 启动定时器，每隔 2 秒执行一次
+globalMapIntervalId = setInterval(mapAnimation, 2000);
+
+// 趋势动画
+const GlobalTrendAnimation = () => {
+  const myGlobalTrend = globalTrend?.value?.chart;
+  if (!myGlobalTrend) return;
+  const randomNum = Math.floor(Math.random() * 12);
+  myGlobalTrend.dispatchAction({
+    type: 'showTip',
+    seriesIndex: 0,
+    dataIndex: randomNum,
+  });
+}
+globalTrendIntervalId = setInterval(GlobalTrendAnimation, 2000);
+
+
+
+
 onMounted(() => {
   getData();
+  cardAnimation();
+  setupEventListeners();
 });
+
+
 // endregion
 
 // region 事件||监听
+// 更换年份事件
 const handleCommand = (year) => {
   selectedYear.value = year; // 更新当前选中的年份
-  getGlobalRecentlyTrendByMonth(year).then(res => {
-    const globalRecentlyTrendList = res.globalRecentlyTrendList;
-    const categories = globalRecentlyTrendList.map(item => item.name);
-    const values = globalRecentlyTrendList.map(item => item.value);
-    // 更新图表数据
-    proTrend.value.xAxis.data = categories;
-    proTrend.value.series[0].data = values;
-  });
+  getGlobalTrendData();
 };
+// 更换时间事件
 watch(time, () => {
   getData();
 });
+// 点击地图事件
 const handleClick = (params) => {
   const departId = params.data.departId;
   const url = router.resolve({
@@ -539,6 +587,23 @@ const handleClick = (params) => {
   }).href;
   window.open(url, "_blank");
 }
+
+// 鼠标经过地图事件
+const setupEventListeners = () => {
+  const myGlobalMap = globalMap.value.chart;
+  // 鼠标移入
+  myGlobalMap.on('mousemove', (e) => {
+    clearInterval(globalMapIntervalId);
+    myGlobalMap.dispatchAction({type: "downplay", seriesIndex: 0,});
+    myGlobalMap.dispatchAction({type: "highlight", seriesIndex: 0, dataIndex: e.dataIndex,});
+    myGlobalMap.dispatchAction({type: "showTip", seriesIndex: 0, dataIndex: e.dataIndex,});
+  });
+  // 鼠标移出
+  myGlobalMap.on('mouseout', () => {
+    clearInterval(globalMapIntervalId); // 确保没有多个定时器同时运行
+    globalMapIntervalId = setInterval(mapAnimation, 2000);
+  });
+};
 // endregion
 
 

src/views/datav/MailVisits.vue

@@ -408,6 +408,20 @@ const time = ref([
 const currentYear = new Date().getFullYear();
 const years = ref([currentYear.toString(), (currentYear - 1).toString(), (currentYear - 2).toString()]); // 年份列表
 const selectedYear = ref(currentYear); // 当前选中的年份
+const colors = [
+  {
+    color: "linear-gradient( 270deg, #FB002D 0%, #822232 100%)",
+    percentage: 80,
+  },
+  {
+    color: "linear-gradient( 270deg, #FFB90E 0%, #71501D 100%)",
+    percentage: 60,
+  },
+  {
+    color: "linear-gradient( 270deg, #63E700 0%, #19674C 100%)",
+    percentage: 40,
+  },
+];
 //endregion
 
 // region 所有函数
@@ -985,6 +999,7 @@ const option3 = {
 // endregion
 
 
+// region 监听|事件
 const handleCommand = (year) => {
   selectedYear.value = year;
   getTrend()
@@ -995,10 +1010,10 @@ watch(time, () => {
 })
 onMounted(() => {
   getData();
-  // timer = setInterval(() => {
-  //   activeMailTab.value = (parseInt(activeMailTab.value) % 3 + 1).toString();
-  //   console.log("Active Tab: ", activeMailTab.value);
-  // }, 3000); // 每3秒切换一次
+  timer = setInterval(() => {
+    activeMailTab.value = (parseInt(activeMailTab.value) % 3 + 1).toString();
+    console.log("Active Tab: ", activeMailTab.value);
+  }, 3000); // 每3秒切换一次
 });
 const handleClick = (params) => {
   const departId = params.data.departId;
@@ -1008,21 +1023,7 @@ const handleClick = (params) => {
   }).href;
   window.open(url, "_blank");
 }
-const colors = [
-  {
-    color: "linear-gradient( 270deg, #FB002D 0%, #822232 100%)",
-    percentage: 80,
-  },
-  {
-    color: "linear-gradient( 270deg, #FFB90E 0%, #71501D 100%)",
-    percentage: 60,
-  },
-  {
-    color: "linear-gradient( 270deg, #63E700 0%, #19674C 100%)",
-    percentage: 40,
-  },
-];
-
+// endregion
 
 </script>
 

src/views/datav/SceneInsp.vue

@@ -9,7 +9,7 @@
             <datav-card title="日常督察情况">
 
               <datav-tabs
-                  v-model="activeOrgTab"
+                  v-model="rcdcProRankTab"
                   type="bottom-button"
               >
                 <datav-tab-item label="分县市局" name="1">
@@ -173,12 +173,14 @@
                 :option="option"
                 autoresize
                 @click="handleClick"
+                ref="sceneInspMap"
             />
             <datav-card title="问题趋势">
               <v-charts
                   style="height: 280px"
                   :option="proTrend"
                   autoresize
+                  ref="sceneInspProTrend"
               />
               <div class="gobal-dropdown-container">
                 <el-dropdown class="test" @command="handleCommand">
@@ -198,7 +200,7 @@
 
           <el-col :span="6">
             <datav-card>
-              <datav-tabs v-model="activeTabRight" size="small">
+              <datav-tabs v-model="zxdcProRankTab" size="small">
                 <datav-tab-item label="黄赌毒" name="1">
                   <datav-tabs
                       type="bottom-button">
@@ -795,7 +797,7 @@ import {
 import router from "@/router/index.ts";
 
 // region 所有变量
-const activeTabRight = ref("1")
+
 const overview = ref({
   problemNumber: 0,
   rectifingNumber: 0,
@@ -913,11 +915,18 @@ const messages = ref([
 ]);
 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().startOf("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
+let sceneInspMapIntervalId;
+let sceneInspTrendIntervalId;
 const colors = [
   {
     color: "linear-gradient( 270deg, #FB002D 0%, #822232 100%)",
@@ -965,8 +974,9 @@ const option = ref({
   },
   tooltip: {
     trigger: 'item',
+    position: 'bottom',
     formatter: function (params) {
-      console.log(params)
+      // console.log(params)
       const dataItem = superviseTempMapVoList.value.find(item => item.name.includes(params.name.substring(0, 2)));
       if (dataItem) {
         return `
@@ -1243,8 +1253,56 @@ const getData = async () => {
   getCheckBeerData();
 }
 
+const rcdxRankAnimation = () => {
+  rcdcProRankTab.value = (parseInt(rcdcProRankTab.value) % 2 + 1).toString();
+  setTimeout(rcdxRankAnimation, 3000);
+};
+
+const zxdxRankAnimation = () => {
+  zxdcProRankTab.value = (parseInt(zxdcProRankTab.value) % 5 + 1).toString();
+  setTimeout(zxdxRankAnimation, 3000);
+};
+
+const sceneInspMapAnimation = () => {
+  const mySceneInspMap = sceneInspMap?.value?.chart;
+  if (!mySceneInspMap) return;
+  // 来个随机数，9个图  0~8的整数就ok
+  const randomNum = Math.floor(Math.random() * 9);
+  mySceneInspMap.dispatchAction({
+    type: "downplay", //downplay 取消高亮
+    seriesIndex: 0,
+  });
+  mySceneInspMap.dispatchAction({
+    type: "highlight", //highLight 高亮指定的数据图形
+    seriesIndex: 0, //系列index
+    dataIndex: randomNum, //数据index
+  });
+  mySceneInspMap.dispatchAction({
+    type: "showTip", //showTip 显示提示框
+    seriesIndex: 0,
+    dataIndex: randomNum,
+  });
+};
+// 启动定时器，每隔 2 秒执行一次
+sceneInspMapIntervalId = setInterval(sceneInspMapAnimation, 2000);
+
+const SceneInspTrendAnimation = () => {
+  const mySceneInspProTrend = sceneInspProTrend.value.chart;
+  if (!mySceneInspProTrend) return;
+  const randomNum = Math.floor(Math.random() * 12);
+  mySceneInspProTrend.dispatchAction({
+    type: 'showTip',
+    seriesIndex: 0,
+    dataIndex: randomNum,
+  });
+}
+sceneInspTrendIntervalId = setInterval(SceneInspTrendAnimation, 2000);
+
 onMounted(() => {
   getData();
+  rcdxRankAnimation();  // 日常督察问题排行动画
+  zxdxRankAnimation();  // 专项督察问题排行动画
+  setupEventListeners();
 });
 // endregion
 
@@ -1263,7 +1321,6 @@ const handleCommand = (year) => {
     proTrend.value.series[0].data = values;
   });
 };
-
 const handleClick = (params) => {
   const departId = params.data.departId;
   const url = router.resolve({
@@ -1272,6 +1329,23 @@ const handleClick = (params) => {
   }).href;
   window.open(url, "_blank");
 }
+
+// 鼠标经过地图事件
+const setupEventListeners = () => {
+  const mySceneInspMap = sceneInspMap?.value?.chart;
+  // 鼠标移入
+  mySceneInspMap.on('mousemove', (e) => {
+    clearInterval(sceneInspMapIntervalId);
+    mySceneInspMap.dispatchAction({type: "downplay", seriesIndex: 0,});
+    mySceneInspMap.dispatchAction({type: "highlight", seriesIndex: 0, dataIndex: e.dataIndex,});
+    mySceneInspMap.dispatchAction({type: "showTip", seriesIndex: 0, dataIndex: e.dataIndex,});
+  });
+  // 鼠标移出
+  mySceneInspMap.on('mouseout', () => {
+    clearInterval(sceneInspMapIntervalId); // 确保没有多个定时器同时运行
+    sceneInspMapIntervalId = setInterval(sceneInspMapAnimation, 2000);
+  });
+};
 // endregion
 
 </script>

src/views/datav/VideoInsp.vue

@@ -5,7 +5,7 @@
       <main>
         <el-row :gutter="16">
           <el-col :span="6">
-            <VideoComponent />
+            <VideoComponent/>
             <datav-card title="内部视频">
               <div class="row mt-4 mb-20">
                 <div class="col col-8">
@@ -46,6 +46,7 @@
             <datav-card title="问题数排名" sub-title="查实问题数" style="height: 370px;">
               <datav-tabs
                   type="bottom-button"
+                  v-model="proRankTab"
               >
                 <datav-tab-item label="分县市局" name="1">
                   <el-scrollbar height="280px">
@@ -106,6 +107,7 @@
                 :option="option"
                 autoresize
                 @click="handleClick"
+                ref="videoMap"
             />
             <datav-card title="问题趋势">
               <v-charts
@@ -116,7 +118,7 @@
               <div class="gobal-dropdown-container">
                 <el-dropdown class="test" @command="handleCommand">
                    <span class="el-dropdown-link my-gobal-yearselect">
-                      {{ selectedYear + ' 年'}}
+                      {{ selectedYear + ' 年' }}
                     </span>
                   <template #dropdown>
                     <el-dropdown-menu style="width: 90px">
@@ -198,13 +200,14 @@ import {
   getVideoSuperviseProblemRank, getVideoSuperviseMap, getVideoSuperviseTrend
 } from "@/api/screen/videoSupervise.ts";
 import moment from "moment/moment.js";
+
 // region 所有变量
 const router = useRouter();
 const time = ref([
   moment().startOf("year").format("YYYY-MM-DD"),
   moment().format("YYYY-MM-DD"),
 ]);
-
+const proRankTab = ref("1");
 const fxsjRankList = ref([]);
 const jsdwRankList = ref([]);
 
@@ -216,7 +219,7 @@ const overview = ref({
   changedRate: 0,
 });
 const mapIconList = ref([{
-  originalName:"浏阳市局",
+  originalName: "浏阳市局",
   name: "浏阳市",
   discoverProblem: 135,
   changedProblem: 135,
@@ -227,7 +230,9 @@ const mapIconList = ref([{
 
 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 videoMap = ref(null);
+let videoMapIntervalId;
 const colors = [
   {
     color: "linear-gradient( 270deg, #FB002D 0%, #822232 100%)",
@@ -316,6 +321,7 @@ const option = ref({
   },
   tooltip: {
     trigger: 'item',
+    position: "bottom",
     formatter: function (params) {
       const dataItem = mapIconList.value.find(item => item.name.includes(params.name.substring(0, 2)));
       if (dataItem) {
@@ -364,7 +370,7 @@ const option = ref({
 
     calculable: true,
     inRange: {
-      color: ["#4987F6","#F6A149", "#D34343" ],
+      color: ["#4987F6", "#F6A149", "#D34343"],
     },
   },
   series: [
@@ -471,16 +477,16 @@ const getVideoSuperviseMapData = async (timeValue) => {
   });
   const total = mappedData.reduce((sum, item) => sum + Number(item.value), 0);
   const avg = total / mappedData.length; // 计算平均值
-  const range30Percent = avg*0.3   // 不用取整，小数也可以
+  const range30Percent = avg * 0.3   // 不用取整，小数也可以
   mapIconList.value = mappedData
   option.value.series[0].data = mapIconList
   option.value.visualMap.pieces = [
     {gte: 0, lte: avg - range30Percent, label: "低于平均问题30%", color: "#4987F6"},
-    {gte: avg - range30Percent, lte: avg + range30Percent+0.1, label: "平均问题上下浮动30%内", color: "#F6A149"},
+    {gte: avg - range30Percent, lte: avg + range30Percent + 0.1, label: "平均问题上下浮动30%内", color: "#F6A149"},
     {gte: avg + range30Percent, label: "高于平均问题30%", color: "#D34343"},
   ];
 }
-const getVideoSuperviseTrendData = async(year)=> {
+const getVideoSuperviseTrendData = async (year) => {
   const res = await getVideoSuperviseTrend(year);
   const temp = res.videoSuperviseTrendList;
   const categories = temp.map(item => item.name);
@@ -500,17 +506,61 @@ const getData = async () => {
   getVideoSuperviseTrendData(selectedYear.value)
   getVideoSuperviseProblemTypeRateData(time.value);
 }
-// endregion
+
+const proCardAnimation = () => {
+  proRankTab.value = (parseInt(proRankTab.value) % 2 + 1).toString();
+  setTimeout(proCardAnimation, 3000);
+};
+
+// 地图动画
+const videoMapAnimation = () => {
+  const myVideoMap = videoMap?.value?.chart;
+  if (!myVideoMap) return;
+  // 来个随机数，9个图  0~8的整数就ok
+  const randomNum = Math.floor(Math.random() * 9);
+  myVideoMap.dispatchAction({
+    type: "downplay", //downplay 取消高亮
+    seriesIndex: 0,
+  });
+  myVideoMap.dispatchAction({
+    type: "highlight", //highLight 高亮指定的数据图形
+    seriesIndex: 0, //系列index
+    dataIndex: randomNum, //数据index
+  });
+  myVideoMap.dispatchAction({
+    type: "showTip", //showTip 显示提示框
+    seriesIndex: 0,
+    dataIndex: randomNum,
+  });
+};
+// 启动定时器，每隔 2 秒执行一次
+videoMapIntervalId = setInterval(videoMapAnimation, 2000);
+
+const SceneInspTrendAnimation = () => {
+  const mySceneInspProTrend = sceneInspProTrend.value.chart;
+  if (!mySceneInspProTrend) return;
+  const randomNum = Math.floor(Math.random() * 12);
+  mySceneInspProTrend.dispatchAction({
+    type: 'showTip',
+    seriesIndex: 0,
+    dataIndex: randomNum,
+  });
+}
+sceneInspTrendIntervalId = setInterval(SceneInspTrendAnimation, 2000);
 
 
+onMounted(() => {
+  getData();
+  proCardAnimation();
+  setupEventListeners();
+})
+// endregion
+
 
 // region 事件||监听
 watch(time, () => {
   getData()
 })
-onMounted(() => {
-  getData()
-})
 const handleCommand = (year) => {
   selectedYear.value = year; // 更新当前选中的年份
   getVideoSuperviseTrendData(selectedYear.value)
@@ -523,6 +573,24 @@ const handleClick = (params) => {
   }).href;
   window.open(url, "_blank");
 }
+
+// 鼠标经过地图事件
+const setupEventListeners = () => {
+  const myVideoMap = videoMap?.value?.chart;
+  // 鼠标移入
+  myVideoMap.on('mousemove', (e) => {
+    clearInterval(videoMapIntervalId);
+    myVideoMap.dispatchAction({type: "downplay", seriesIndex: 0,});
+    myVideoMap.dispatchAction({type: "highlight", seriesIndex: 0, dataIndex: e.dataIndex,});
+    myVideoMap.dispatchAction({type: "showTip", seriesIndex: 0, dataIndex: e.dataIndex,});
+  });
+  // 鼠标移出
+  myVideoMap.on('mouseout', () => {
+    clearInterval(videoMapIntervalId); // 确保没有多个定时器同时运行
+    videoMapIntervalId = setInterval(videoMapAnimation, 2000);
+  });
+};
+
 // endregion
 
 

src/views/datav/subonedatav/SubOneCaseVerif.vue

@@ -5,7 +5,7 @@
       <main>
         <el-row :gutter="16">
           <el-col :span="6">
-            <datav-card title="所队排名" subTitle="查实案件数">
+            <datav-card title="所队排名" subTitle="案件数">
               <datav-tabs
                   type="bottom-button"
               >

src/views/datav/subonedatav/SubOneGlobal.vue

@@ -79,7 +79,7 @@
                 style="height: 360px"
                 :option="option"
                 autoresize
-                ref="chart"
+                ref="subOneGlobalMap"
             />
 
             <div>
@@ -152,7 +152,7 @@ import {
 const router = useRouter();
 const route = useRoute();
 const currentMapData = ref({})
-const chart = ref(null);  // 地图
+const subOneGlobalMap = ref(null);  // 地图
 const currentDepartId = route.query.departId;
 const activeOrgTab = ref("1");
 const fxsjlist = ref([]);  // 分县市区机构问题排名
@@ -191,6 +191,7 @@ const colors = [
     percentage: 40,
   },
 ];
+let subOneGlobalMapIntervalId ;  // 问题趋势
 // endregion
 
 
@@ -235,16 +236,9 @@ const wtlxPieOption = computed(() => {
 // 地图
 echarts.registerMap("changsha", changshaMap);
 const option = ref({
-  geo: {
-    map: "changsha",
-    itemStyle: {
-      normal: {
-        opacity: 0 // 设置透明度
-      },
-    }
-  },
   tooltip: {
     trigger: 'item',
+    position: 'bottom',
     formatter: function (params) {
       const dataItem = globalTempMapVoList.value.find(item => item.name === params.name) || {}; // 找到对应的数据项
       console.log("Data item:", dataItem);
@@ -404,8 +398,9 @@ const proTrend = ref({
 const getMapJSON = async (departId = currentDepartId) => {
   const res = await getSubOneStreetMap(departId);
   currentMapData.value = res;
+
   echarts.registerMap("changsha", res);
-  chart.value.chart.setOption(option.value);
+  subOneGlobalMap.value.chart.setOption(option.value);
 }
 const getOrganizationProRankData = async (departId = currentDepartId, timeValue = time.value) => {
   const res = await getSubOneOrganizationRank(departId, timeValue);
@@ -455,8 +450,6 @@ const getSubOneProblemBusinessRateData = async (departId = currentDepartId, time
   const res = await getSubOneProblemBusinessRate(departId, timeValue);
   wtlxlist.value = res.wtlxlist;
 }
-
-
 const getData = () => {
   getOrganizationProRankData(currentDepartId, time.value);
   getBusinessRateData(currentDepartId, time.value);
@@ -468,9 +461,43 @@ const getData = () => {
   getMapJSON(currentDepartId);
 
 };
+// 卡片动画
+const cardAnimation = () => {
+  activeOrgTab.value = (parseInt(activeOrgTab.value) % 2 + 1).toString();
+  setTimeout(cardAnimation, 3000);
+};
+
+//地图动画
+const mapAnimation = () => {
+  const mySubOneGlobalMap = subOneGlobalMap.value.chart;
+  if (!mySubOneGlobalMap) return;
+  // 来个随机数，9个图  0~8的整数就ok
+  const tempNum =  currentMapData?.value?.geoJson?.features?.length
+  const randomNum = Math.floor(Math.random() * tempNum);
+  mySubOneGlobalMap.dispatchAction({
+    type: "downplay", //downplay 取消高亮
+    seriesIndex: 0,
+  });
+  mySubOneGlobalMap.dispatchAction({
+    type: "highlight", //highLight 高亮指定的数据图形
+    seriesIndex: 0, //系列index
+    dataIndex: randomNum, //数据index
+  });
+  mySubOneGlobalMap.dispatchAction({
+    type: "showTip", //showTip 显示提示框
+    seriesIndex: 0,
+    dataIndex: randomNum,
+  });
+};
+// 启动定时器，每隔 2 秒执行一次
+subOneGlobalMapIntervalId = setInterval(mapAnimation, 2000);
+
 
 onMounted(() => {
-  getData()
+  getData();
+  cardAnimation();
+  mapAnimation();
+  setupEventListeners();
 });
 // endregion
 
@@ -482,6 +509,22 @@ const handleCommand = (year) => {
 watch(time, () => {
   getData();
 });
+const setupEventListeners = () => {
+  const mySubOneGlobalMap = subOneGlobalMap.value.chart;
+  // 鼠标移入
+  mySubOneGlobalMap.on('mousemove', (e) => {
+    // console.log(e.dataIndex);
+    clearInterval(subOneGlobalMapIntervalId);
+    mySubOneGlobalMap.dispatchAction({type: "downplay", seriesIndex: 0,});
+    mySubOneGlobalMap.dispatchAction({type: "highlight", seriesIndex: 0, dataIndex: e.dataIndex,});
+    mySubOneGlobalMap.dispatchAction({type: "showTip", seriesIndex: 0, dataIndex: e.dataIndex,});
+  });
+  // 鼠标移出
+  mySubOneGlobalMap.on('mouseout', () => {
+    clearInterval(subOneGlobalMapIntervalId); // 确保没有多个定时器同时运行
+    subOneGlobalMapIntervalId = setInterval(mapAnimation, 2000);
+  });
+};
 // endregion
 
 

src/views/datav/subonedatav/SubOneSceneInsp.vue

@@ -794,9 +794,8 @@ import moment from "moment";
 
 import {getSubOneStreetMap} from "@/api/screen/subScreen/subOneGlobal.ts";
 import {
-  getAllSubOneSupervisionNotifyCount,
   getSubOneChangedRank, getSubOneCheckBeer, getSubOneCompanyProblem, getSubOneGunController, getSubOneHandleCase,
-  getSubOneProblemTypeRate, getSubOneSupervisionMap,
+  getSubOneProblemTypeRate, getSubOneSupervisionMap, getSubOneSupervisionNotifyCount,
   getSubOneSupervisionTrend, getSubOneYellowBetDrug
 } from "@/api/screen/subScreen/subOneSupervisionNotify.ts";
 
@@ -1118,8 +1117,7 @@ const getMapJSON = async (departId = currentDepartId) => {
   echarts.registerMap("changsha", res);
   subOneSceneInspMapChart.value.chart.setOption(option.value);
 }
-
-const getChangedRank = async (departId, times) => {
+const getSubOneChangedRankData = async (departId, times) => {
   const res = await getSubOneChangedRank(departId, times)
   fxsjRankOverview.value = res.fxsjRankOverview;
   jsdwRankOverview.value = res.jsdwRankOverview;
@@ -1128,15 +1126,13 @@ const getChangedRank = async (departId, times) => {
   console.log(res);
 
 }
-
-const getProblemTypeRate = async (departId, times) => {
+const getSubOneProblemTypeRateData = async (departId, times) => {
   const res = await getSubOneProblemTypeRate(departId, times)
   wtlxList.value = res.wtlxList
   console.log(res);
 }
-
-const getSupervisionOverView = async (departId, times) => {
-  const res = await getAllSubOneSupervisionNotifyCount(departId, times)
+const getSubOneSupervisionNotifyCountData = async (departId, times) => {
+  const res = await getSubOneSupervisionNotifyCount(departId, times)
   Object.assign(overview.value, {
     correctionRate: Number(res.overview.rectifyRate),
     supervisionNotifyPreTotal: Number(res.overview.personNumber),
@@ -1146,8 +1142,7 @@ const getSupervisionOverView = async (departId, times) => {
     supervisionNotifyOrgTotal: Number(res.overview.departNumber),
   });
 }
-
-const getMapData = async (departId, times) => {
+const getSubOneSupervisionMapData = async (departId, times) => {
   const res = await getSubOneSupervisionMap(departId, times);
   const mappedData = res.superviseTempMapVoList.map(item => {
     return {
@@ -1166,93 +1161,75 @@ const getMapData = async (departId, times) => {
   superviseTempMapVoList.value = mappedData;
   option.value.series[0].data = mappedData;
 }
-const getSupervisionTrend = async (departId, times) => {
-  const res = await getSubOneSupervisionTrend(departId, times)
+const getSubOneSupervisionTrendData = async (departId, year) => {
+  const res = await getSubOneSupervisionTrend(departId, year)
   const supervisionTrend = res.supervisionTrend;
   const categories = supervisionTrend.map(item => item.name);
   const values = supervisionTrend.map(item => item.value);
   proTrend.value.xAxis.data = categories;
   proTrend.value.series[0].data = values;
 }
-
-const getYellowBetDrugData = async (departId, times) => {
+const getSubOneYellowBetDrugData = async (departId, times) => {
   const res = await getSubOneYellowBetDrug(departId, times)
   fxsjYellowBetOverview.value = res.fxsjYellowBetOverview
   jsdwYellowBetOverview.value = res.jsdwYellowBetOverview
   fxsjYellowBetRankList.value = res.fxsjYellowBetRankList
   jsdwYellowBetRankList.value = res.jsdwYellowBetRankList
 }
-
-const getGunControllerData = async (departId, times) => {
+const getSubOneGunControllerData = async (departId, times) => {
   const res = await getSubOneGunController(departId, times)
   fxsjGunControllerOverview.value = res.fxsjGunControllerOverview
   jsdwGunControllerOverview.value = res.jsdwGunControllerOverview
   fxsjGunControllerRankList.value = res.fxsjGunControllerRankList
   jsdwGunControllerRankList.value = res.jsdwGunControllerRankList
 }
-
-const getCompanyProblemData = async (departId, times) => {
+const getSubOneCompanyProblemData = async (departId, times) => {
   const res = await getSubOneCompanyProblem(departId, times)
   fxsjCompanyProblemOverview.value = res.fxsjCompanyProblemOverview
   jsdwCompanyProblemOverview.value = res.jsdwCompanyProblemOverview
   fxsjCompanyProblemRankList.value = res.fxsjCompanyProblemRankList
   jsdwCompanyProblemRankList.value = res.jsdwCompanyProblemRankList
 }
-
-const getHandleCaseData = async (departId, times) => {
+const getSubOneHandleCaseData = async (departId, times) => {
   const res = await getSubOneHandleCase(departId, times)
   fxsjHandleCaseOverview.value = res.fxsjHandleCaseOverview
   jsdwHandleCaseOverview.value = res.jsdwHandleCaseOverview
   fxsjHandleCaseRankList.value = res.fxsjHandleCaseRankList
   jsdwHandleCaseRankList.value = res.jsdwHandleCaseRankList
 }
-
-const getCheckBeerData = async (departId, times) => {
+const getSubOneCheckBeerData = async (departId, times) => {
   const res = await getSubOneCheckBeer(departId, times)
   fxsjCheckBeerOverview.value = res.fxsjCheckBeerOverview
   jsdwCheckBeerOverview.value = res.jsdwCheckBeerOverview
   fxsjCheckBeerRankList.value = res.fxsjCheckBeerRankList
   jsdwCheckBeerRankList.value = res.jsdwCheckBeerRankList
 }
-
-
 const getData = async () => {
   getMapJSON(currentDepartId);
-  getChangedRank(currentDepartId, time.value);
-  getProblemTypeRate(currentDepartId, time.value);
-  getSupervisionOverView(currentDepartId, time.value);
-  getMapData(currentDepartId, time.value);
-  getSupervisionTrend(currentDepartId, time.value);
-  getYellowBetDrugData(currentDepartId, time.value);
-  getGunControllerData(currentDepartId, time.value);
-  getCompanyProblemData(currentDepartId, time.value);
-  getHandleCaseData(currentDepartId, time.value);
-  getCheckBeerData(currentDepartId, time.value);
+  getSubOneChangedRankData(currentDepartId, time.value);
+  getSubOneProblemTypeRateData(currentDepartId, time.value);
+  getSubOneSupervisionNotifyCountData(currentDepartId, time.value);
+  getSubOneSupervisionMapData(currentDepartId, time.value);
+  getSubOneSupervisionTrendData(currentDepartId, selectedYear.value);
+  getSubOneYellowBetDrugData(currentDepartId, time.value);
+  getSubOneGunControllerData(currentDepartId, time.value);
+  getSubOneCompanyProblemData(currentDepartId, time.value);
+  getSubOneHandleCaseData(currentDepartId, time.value);
+  getSubOneCheckBeerData(currentDepartId, time.value);
 }
+onMounted(() => {
+  getData();
+});
 // endregion
 
 // region 监听
-
 watch(time, () => {
   getData();
 });
-
-
-onMounted(() => {
-  getData();
-});
 const handleCommand = (year) => {
   selectedYear.value = year; // 更新当前选中的年份
-  getSupervisionTrend(currentDepartId, year).then(res => {
-    const supervisionTrend = res.supervisionTrend;
-    const categories = supervisionTrend.map(item => item.name);
-    const values = supervisionTrend.map(item => item.value);
-    // 更新图表数据
-    proTrend.value.xAxis.data = categories;
-    proTrend.value.series[0].data = values;
-  });
+  getSubOneSupervisionTrendData(currentDepartId, selectedYear.value);
 };
-
 // endregion
 
 

src/views/datav/subonedatav/SubOneVideoInsp.vue

@@ -45,6 +45,7 @@
             <datav-card title="问题数排名" sub-title="问题数" style="height: 370px;">
               <datav-tabs
                   type="bottom-button"
+                  v-model="subOneProRankTab"
               >
                 <datav-tab-item label="派出所" name="1">
                   <el-scrollbar height="280px">
@@ -230,6 +231,8 @@ const currentMapData = ref({})
 const subOneVideoInspMapChart = 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%)",
@@ -311,6 +314,7 @@ echarts.registerMap("changsha", changshaMap);
 const option = ref({
   tooltip: {
     trigger: 'item',
+    position: 'bottom',
     formatter: function (params) {
       const dataItem = mapIconList.value.find(item => item.name === params.name) || {}; // 找到对应的数据项
       console.log("Data item:", dataItem);
@@ -471,8 +475,45 @@ const getData = async () => {
   getSubOneVideoSuperviseTrendData(currentDepartId, selectedYear.value)
   getSubOneVideoSuperviseProblemTypeRateData(currentDepartId, time.value)
 }
+
+
+// 卡片动画
+const subOneProCardAnimation = () => {
+  subOneProRankTab.value = (parseInt(subOneProRankTab.value) % 2 + 1).toString();
+  setTimeout(subOneProCardAnimation, 3000);
+};
+
+// 地图动画
+const subOneVideoMapAnimation = () => {
+  const mySubOneVideoInspMapChart = subOneVideoInspMapChart?.value?.chart;
+  if (!mySubOneVideoInspMapChart) return;
+  // 获取随机数，介于0到当前地图数据长度之间
+  const tempNum =  currentMapData?.value?.geoJson?.features?.length
+  const randomNum = Math.floor(Math.random() * tempNum);
+  mySubOneVideoInspMapChart.dispatchAction({
+    type: "downplay", //downplay 取消高亮
+    seriesIndex: 0,
+  });
+  mySubOneVideoInspMapChart.dispatchAction({
+    type: "highlight", //highLight 高亮指定的数据图形
+    seriesIndex: 0, //系列index
+    dataIndex: randomNum, //数据index
+  });
+  mySubOneVideoInspMapChart.dispatchAction({
+    type: "showTip", //showTip 显示提示框
+    seriesIndex: 0,
+    dataIndex: randomNum,
+  });
+};
+// 启动定时器，每隔 2 秒执行一次
+subOneVideoMapIntervalId = setInterval(subOneVideoMapAnimation, 2000);
+
+
+
 onMounted(() => {
-  getData()
+  getData();
+  subOneProCardAnimation();  // 启动卡片动画
+  setupEventListeners();  // 设置地图监听
 })
 // endregion
 
@@ -484,6 +525,25 @@ const handleCommand = (year) => {
   selectedYear.value = year; // 更新当前选中的年份
   getSubOneVideoSuperviseTrendData(currentDepartId, selectedYear.value)
 };
+
+
+// 鼠标经过地图事件
+const setupEventListeners = () => {
+  const mySubOneVideoInspMapChart = subOneVideoInspMapChart?.value?.chart;
+  // 鼠标移入
+  mySubOneVideoInspMapChart.on('mousemove', (e) => {
+    clearInterval(subOneVideoMapIntervalId);
+    mySubOneVideoInspMapChart.dispatchAction({type: "downplay", seriesIndex: 0,});
+    mySubOneVideoInspMapChart.dispatchAction({type: "highlight", seriesIndex: 0, dataIndex: e.dataIndex,});
+    mySubOneVideoInspMapChart.dispatchAction({type: "showTip", seriesIndex: 0, dataIndex: e.dataIndex,});
+  });
+  // 鼠标移出
+  mySubOneVideoInspMapChart.on('mouseout', () => {
+    clearInterval(subOneVideoMapIntervalId); // 确保没有多个定时器同时运行
+    subOneVideoMapIntervalId = setInterval(subOneVideoMapAnimation, 2000);
+  });
+};
+
 // endregion
 
 </script>