首页屏幕动画渲染

src/components/datav/chart-bar.vue

@@ -107,6 +107,7 @@ function getColor(val) {
   }
   if (props.color instanceof Array) {
     const colors = [...props.color];
+    // percentage降序
     colors.sort((a, b) => b.percentage - a.percentage);
     for (let i = 0; i < colors.length; i++) {
       if (val > colors[i].percentage) {
@@ -135,11 +136,16 @@ function getColor(val) {
     .bar-item_content {
       .bar-item_content-bar {
         height: 13px;
-
       }
     }
   }
 
+  &[size="bigNumber"] {
+    .bar-item_content {
+      width: calc(100% - var(--label-width) - 16px - 100px);
+    }
+  }
+
   &[size="small"] {
     font-size: 12px;
 

src/views/datav/Gobal.vue

@@ -9,13 +9,14 @@
               <datav-tabs
                   v-model="activeOrgTab"
                   type="bottom-button"
+                  @mouseenter.native="handleMouseEnter"
+                  @mouseleave.native="handleMouseLeave"
               >
                 <datav-tab-item label="分县市局" name="1">
                   <el-scrollbar height="340px">
                     <datav-chart-bar
                         :data="fxsjlist"
-                        size="large"
+                        size="bigNumber"
-                        :max="11"
                         :color="colors"
                     />
                   </el-scrollbar>
@@ -25,7 +26,7 @@
                     <datav-chart-bar
                         :data="jsdwlist"
                         :max="11"
-                        size="large"
+                        size="bigNumber"
                         :color="colors"
                     />
                   </el-scrollbar>
@@ -35,8 +36,9 @@
             <datav-card title="业务类型占比">
               <v-charts
                   style="height: 360px;"
-                  :option="zfbaPieOption"
+                  :option="ywlxPieOption"
                   autoresize
+                  ref="ywlxzbOption"
               />
             </datav-card>
           </el-col>
@@ -124,6 +126,7 @@
                   style="height: 370px;"
                   :option="wtlxPieOption"
                   autoresize
+                  ref="wtlxzbOption"
               />
             </datav-card>
 
@@ -131,7 +134,6 @@
         </el-row>
       </main>
     </div>
-
   </el-scrollbar>
 </template>
 
@@ -152,10 +154,11 @@ import {
 
 // region  各种变量
 const router = useRouter();
-const fxsjlist = ref([{}]);  // 分县市区机构问题排名
+const fxsjlist = ref([{
+  label: "天心分局",
+  value: 99999
+}]);  // 分县市区机构问题排名
 const jsdwlist = ref([]);  // 局属单位机构问题排名
-const ywzblist = ref([]);  // 业务类型占比
-const wtlxlist = ref([]);  // 问题类型占比
 const tcwtlist = ref([]);  // 突出问题排名
 const overview = ref({
   totalPro: 0,
@@ -202,17 +205,18 @@ const colors = [
 const activeOrgTab = ref("1");
 const globalMap = ref(null)
 const globalTrend = ref(null)
+const ywlxzbOption = ref(null)
+const wtlxzbOption = ref(null)
+let cardIntervalId;
+let wtlxPieCircularIntervalId;  // 问题类型占比定时器
 let globalMapIntervalId;   // 地图定时器
 let globalTrendIntervalId;   // 问题趋势定时器
+let ywlxPieCircularIntervalId;  // 业务类型占比定时器
 // endregion
 
 // region  图表变量
 // 业务类型占比
-const zfbaPieOption = computed(() => {
+const ywlxPieOption = ref({
-  return {
-    tooltip: {
-      trigger: "item",
-    },
   series: [
     {
       type: "pie",
@@ -220,17 +224,15 @@ const zfbaPieOption = computed(() => {
       label: {
         color: "#fff",
       },
-        data: ywzblist.value,
+      data: [],
     },
   ],
-  };
-});
-// 问题类型占比
-const wtlxPieOption = computed(() => {
-  return {
   tooltip: {
     trigger: "item",
   },
+});
+// 问题类型占比
+const wtlxPieOption = ref({
   series: [
     {
       type: "pie",
@@ -238,13 +240,13 @@ const wtlxPieOption = computed(() => {
       label: {
         color: "#fff",
       },
-        data: wtlxlist.value,
+      data: [],
-
     },
   ],
-  };
+  tooltip: {
+    trigger: "item",
+  },
 });
-// 地图
 echarts.registerMap("changsha", changshaMap);
 const option = ref({
   geo: {
@@ -415,16 +417,14 @@ const getOrganizationRankData = async (timeValue = time.value) => {
   fxsjlist.value = res.fxsjlist;
   jsdwlist.value = res.jsdwlist;
 }
-
 const getBusinessRateData = async (timeValue = time.value) => {
   const res = await getBusinessRate(timeValue);
-  ywzblist.value = res.ywzblist;
+  ywlxPieOption.value.series[0].data = res.ywzblist;
 }
 const getAllGlobalCountData = async (timeValue = time.value) => {
   const res = await getAllGlobalCount(timeValue);
   overview.value = res.overview;
 }
-
 const getGlobalMapData = async (timeValue = time.value) => {
   const res = await getGlobalMap(timeValue);
   const mappedData = res.globalTempMapVoList.map(item => {
@@ -471,18 +471,20 @@ const getGlobalMapData = async (timeValue = time.value) => {
       value: item.totalPro,
     };
   });
-  const total = mappedData.reduce((sum, item) => sum + Number(item.value), 0);
+  // 总数
-  const avg = total / mappedData.length; // 计算平均值
+  const maxItem = mappedData.reduce((max, item) => (Number(item.value) > Number(max.value) ? item : max), mappedData[0]);
-  const range30Percent = avg * 0.3   // 不用取整，小数也可以
+  const range40Percent = maxItem.value * 0.4   // 不用取整，小数也可以
+  const range60Percent = maxItem.value * 0.6   // 不用取整，小数也可以
+  const range80Percent = maxItem.value * 0.8   // 不用取整，小数也可以
   globalTempMapVoList.value = mappedData;
   option.value.series[0].data = globalTempMapVoList;
+  console.log(range40Percent, range60Percent, range80Percent);
   option.value.visualMap.pieces = [
-    {gte: 0, lte: avg - range30Percent, label: "低于平均问题30%", color: "#4987F6"},
+    {gte: 0, lte: range40Percent, label: "低于最大问题的40%", color: "#4987F6"},
-    {gte: avg - range30Percent, lte: avg + range30Percent + 0.1, label: "平均问题上下浮动30%内", color: "#F6A149"},
+    {gte: range40Percent, lte: range60Percent, label: "平均问题上下浮动30%内", color: "#F6A149"},
-    {gte: avg + range30Percent, label: "高于平均问题30%", color: "#D34343"},
+    {gte: range80Percent, label: "高于平均问题30%", color: "#D34343"},
   ];
 }
-
 const getGlobalTrendData = async (year = selectedYear.value) => {
   const res = await getGlobalTrend(year);
   const globalRecentlyTrendList = res.globalRecentlyTrendList;
@@ -496,13 +498,11 @@ const getStrongProblemRateData = async (timeValue = time.value) => {
   const res = await getStrongProblemRate(timeValue);
   tcwtlist.value = res.tcwtlist;
 }
-
 const getProblemBusinessRateData = async (timeValue = time.value) => {
   const res = await getProblemBusinessRate(timeValue);
-  wtlxlist.value = res.wtlxlist;
+  wtlxPieOption.value.series[0].data = res.wtlxlist;
 }
 
-
 function getData() {
   getOrganizationRankData();
   getBusinessRateData();
@@ -513,10 +513,26 @@ function getData() {
   getProblemBusinessRateData();
 }
 
+onMounted(() => {
+  getData();
+  cardAnimation();
+  setupEventListeners();
+});
+// endregion
+
+// region 动画
 // 卡片动画
 const cardAnimation = () => {
   activeOrgTab.value = (parseInt(activeOrgTab.value) % 2 + 1).toString();
-  setTimeout(cardAnimation, 3000);
+  cardIntervalId = setTimeout(cardAnimation, 3000);
+};
+const handleMouseEnter = () => {
+  clearInterval(cardIntervalId)
+};
+const handleMouseLeave = () => {
+  cardIntervalId = setTimeout(() => {
+    cardAnimation();
+  }, 3000);
 };
 
 // 地图动画
@@ -544,7 +560,7 @@ const mapAnimation = () => {
 globalMapIntervalId = setInterval(mapAnimation, 2000);
 
 // 趋势动画
-const GlobalTrendAnimation = () => {
+const globalTrendAnimation = () => {
   const myGlobalTrend = globalTrend?.value?.chart;
   if (!myGlobalTrend) return;
   const randomNum = Math.floor(Math.random() * 12);
@@ -554,18 +570,31 @@ const GlobalTrendAnimation = () => {
     dataIndex: randomNum,
   });
 }
-globalTrendIntervalId = setInterval(GlobalTrendAnimation, 2000);
+globalTrendIntervalId = setInterval(globalTrendAnimation, 2000);
-
+
-
+// 执法办案环形图
-
+const yelxzbCircularAnimation = () => {
-
+  const ywlxzbOptionTemp = ywlxzbOption?.value?.chart;
-onMounted(() => {
+  if (!ywlxzbOptionTemp) return;
-  getData();
+  const length = ywlxPieOption.value.series[0].data.length;
-  cardAnimation();
+  const randomNum = Math.floor(Math.random() * length);
-  setupEventListeners();
+  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;
+  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});
+};
+wtlxPieCircularIntervalId = setInterval(wtlxzbCircularAnimation, 2000);
 // endregion
 
 // region 事件||监听
@@ -587,22 +616,46 @@ const handleClick = (params) => {
   }).href;
   window.open(url, "_blank");
 }
-
+// 鼠标经过事件
-// 鼠标经过地图事件
 const setupEventListeners = () => {
+  const ywlxzbOptionTemp = ywlxzbOption?.value?.chart;
+  ywlxzbOptionTemp.on('mousemove', (e) => {
+    clearInterval(ywlxPieCircularIntervalId);
+    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(ywlxPieCircularIntervalId);
+    ywlxPieCircularIntervalId = setInterval(yelxzbCircularAnimation, 2000);
+
+  });
+
+
   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);
   });
+
+
+  const wtlxzbOptionTemp = wtlxzbOption?.value?.chart;
+  wtlxzbOptionTemp.on('mousemove', (e) => {
+    clearInterval(wtlxPieCircularIntervalId);
+    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(wtlxPieCircularIntervalId);
+    wtlxPieCircularIntervalId = setInterval(wtlxzbCircularAnimation, 2000);
+  })
 };
 // endregion
 

src/views/datav/SceneInsp.vue

@@ -1287,7 +1287,7 @@ const sceneInspMapAnimation = () => {
 sceneInspMapIntervalId = setInterval(sceneInspMapAnimation, 2000);
 
 const SceneInspTrendAnimation = () => {
-  const mySceneInspProTrend = sceneInspProTrend.value.chart;
+  const mySceneInspProTrend = sceneInspProTrend?.value?.chart;
   if (!mySceneInspProTrend) return;
   const randomNum = Math.floor(Math.random() * 12);
   mySceneInspProTrend.dispatchAction({

src/views/datav/VideoInsp.vue

@@ -233,6 +233,7 @@ const years = ref([currentYear.toString(), (currentYear - 1).toString(), (curren
 const selectedYear = ref(currentYear); // 当前选中的年份
 const videoMap = ref(null);
 let videoMapIntervalId;
+let sceneInspTrendIntervalId;
 const colors = [
   {
     color: "linear-gradient( 270deg, #FB002D 0%, #822232 100%)",

src/views/datav/subonedatav/SubOneGlobal.vue

@@ -80,6 +80,7 @@
                 :option="option"
                 autoresize
                 ref="subOneGlobalMap"
+                @click="handleClick"
             />
 
             <div>
@@ -129,6 +130,7 @@
         </el-row>
       </main>
     </div>
+    <negative-info-depart-dialog v-model="show" :departId="tempDepartId" />
 
   </el-scrollbar>
 </template>
@@ -149,6 +151,9 @@ import {
 } from "@/api/screen/subScreen/subOneGlobal.ts";
 
 // region  各种变量
+const show = ref(false);  // 负面信息弹窗显示
+const tempDepartId = ref(0);  // 临时部门id
+
 const router = useRouter();
 const route = useRoute();
 const currentMapData = ref({})
@@ -191,7 +196,7 @@ const colors = [
     percentage: 40,
   },
 ];
-let subOneGlobalMapIntervalId ;  // 问题趋势
+let subOneGlobalMapIntervalId ;
 // endregion
 
 
@@ -469,7 +474,7 @@ const cardAnimation = () => {
 
 //地图动画
 const mapAnimation = () => {
-  const mySubOneGlobalMap = subOneGlobalMap.value.chart;
+  const mySubOneGlobalMap = subOneGlobalMap?.value?.chart;
   if (!mySubOneGlobalMap) return;
   // 来个随机数，9个图  0~8的整数就ok
   const tempNum =  currentMapData?.value?.geoJson?.features?.length
@@ -525,6 +530,16 @@ const setupEventListeners = () => {
     subOneGlobalMapIntervalId = setInterval(mapAnimation, 2000);
   });
 };
+
+const handleClick = (params) => {
+  const departId = params.data.departId;
+  show.value = true;
+  tempDepartId.value=2661
+  console.log(subOneGlobalMapIntervalId);
+  clearInterval(subOneGlobalMapIntervalId);
+  // alert(departId)
+}
+
 // endregion