大屏增加动态变化

src/views/data-screen-mock/components/AgeRatioChart.vue

@@ -19,12 +19,18 @@
   const load = ref(false);
   const timer1 = ref();
   const datas = ref({});
+  const getRandomIntInclusive = (min, max) => {
+    const minCeiled = Math.ceil(min);
+    const maxFloored = Math.floor(max);
+    return Math.floor(Math.random() * (maxFloored - minCeiled + 1) + minCeiled);
+  }
   const query = () => {
     load.value = true;
     getSecurityTotal().then(res=> {
       load.value = false;
       if (res.success && res.result && res.result.length) {
-        datas.value = res.result[0]
+        datas.value.securityDays = (datas.value.securityDays || res.result[0].securityDays) + getRandomIntInclusive(0, 1)
+        datas.value.interceptAttackDays = (datas.value.interceptAttackDays || res.result[0].interceptAttackDays) + getRandomIntInclusive(0, 3)
       }
     })
   }

src/views/data-screen-mock/components/AnnualUseChart.vue

 <template>
   <div class="echarts">
-    <ECharts :option="option" :resize="false" :onClick="onClick" />
+    <ECharts :option="option" :resize="false" :onClick="onClick" @mousemove="onMousemove" @mouseleave="onMouseleave" />
   </div>
 </template>
 
@@ -297,6 +297,26 @@
       }
     });
   };
+  const onMousemove = () => {
+    if (timer.value) {
+      clearInterval(timer.value);
+      timer.value = null;
+    }
+  }
+  const onMouseleave = () => {
+    if (timer.value) {
+      clearInterval(timer.value);
+      timer.value = null;
+    }
+    timer.value = setInterval(() => {
+      dataZoom.value.startValue++;
+      if (dataZoom.value.endValue++ >= salvProName.value.length - 1) {
+        dataZoom.value.startValue = 0;
+        dataZoom.value.endValue = 3;
+      }
+      // chart?.setOption(option);
+    }, 1000);
+  }
   query();
   timer1.value = setInterval(() => {
     if (!load.value) {

src/views/data-screen-mock/components/HotPlateChart.vue

 <template>
   <div class="echarts">
-    <ECharts :option="option" :resize="false" />
+    <ECharts :option="option" :resize="false" @mousemove="onMousemove" @mouseleave="onMouseleave"/>
   </div>
 </template>
 
@@ -283,6 +283,26 @@
       }
     });
   };
+  const onMousemove = () => {
+    if (timer.value) {
+      clearInterval(timer.value);
+      timer.value = null;
+    }
+  }
+  const onMouseleave = () => {
+    if (timer.value) {
+      clearInterval(timer.value);
+      timer.value = null;
+    }
+    timer.value = setInterval(() => {
+      dataZoom.value.startValue++;
+      if (dataZoom.value.endValue++ >= salvProName.value.length - 1) {
+        dataZoom.value.startValue = 0;
+        dataZoom.value.endValue = 3;
+      }
+      // chart?.setOption(option);
+    }, 1000);
+  }
   query();
   timer1.value = setInterval(() => {
     if (!load.value) {

src/views/data-screen-mock/components/PlatformSourceChart.vue

@@ -6,6 +6,7 @@
 </template>
 
 <script setup>
+
   import ECharts from '@/components/ECharts/index.vue';
   import echarts from '@/components/ECharts/config';
   import { getAISecurityTotal } from '@/api/dataScreenMock';
@@ -13,11 +14,22 @@
   const load = ref(false);
   const timer1 = ref();
   const datas = ref([]);
+  const getRandomIntInclusive = (min, max) => {
+    const minCeiled = Math.ceil(min);
+    const maxFloored = Math.floor(max);
+    return Math.floor(Math.random() * (maxFloored - minCeiled + 1) + minCeiled);
+  }
   const query = () => {
     load.value = true;
     getAISecurityTotal().then(res=> {
       load.value = false;
       if (res.success) {
+        res.result.forEach(v => {
+          const num = (v.total + getRandomIntInclusive(-10, 20))
+          v.total = num < 0 ? 0 : num
+          const num1 = (v.newTotal + getRandomIntInclusive(-10, 50))
+          v.newTotal = num1 < 0 ? 0 : num1
+        })
         datas.value = res.result
       }
     })

src/views/data-screen-mock/components/RealTimeAccessChart.vue

@@ -21,11 +21,20 @@
     'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAoCAYAAAAhf6DEAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAA6SURBVEhLY2x8/vY/A4mg3zwcTDOBSTLBqGYSwahmEsGoZhLBqGYSwahmEsGoZhLBqGYSwZDUzMAAAJldBMF2UASmAAAAAElFTkSuQmCC';
   var g_cellBarImg0_y = new Image();
   g_cellBarImg0_y.src = g_cellBar0_y;
+  const getRandomIntInclusive = (min, max) => {
+    const minCeiled = Math.ceil(min);
+    const maxFloored = Math.floor(max);
+    return Math.floor(Math.random() * (maxFloored - minCeiled + 1) + minCeiled);
+  }
   const query = () => {
     load.value = true;
     getNetTypeTotal().then(res=> {
       load.value = false;
       if (res.success) {
+        res.result.forEach(v => {
+          const num = (v.value + getRandomIntInclusive(-3, 6))
+          v.value = num > 100 ? 100 : num < 0 ? 0 : num
+        })
         datas.value = res.result
       }
     })

src/views/data-screen/components/AgeRatioChart.vue

@@ -19,12 +19,18 @@
   const load = ref(false);
   const timer1 = ref();
   const datas = ref({});
+  const getRandomIntInclusive = (min, max) => {
+    const minCeiled = Math.ceil(min);
+    const maxFloored = Math.floor(max);
+    return Math.floor(Math.random() * (maxFloored - minCeiled + 1) + minCeiled);
+  }
   const query = () => {
     load.value = true;
     getSecurityTotal().then(res=> {
       load.value = false;
       if (res.success && res.result && res.result.length) {
-        datas.value = res.result[0]
+        datas.value.securityDays = (datas.value.securityDays || res.result[0].securityDays) + getRandomIntInclusive(0, 1)
+        datas.value.interceptAttackDays = (datas.value.interceptAttackDays || res.result[0].interceptAttackDays) + getRandomIntInclusive(0, 3)
       }
     })
   }

src/views/data-screen/components/AnnualUseChart.vue

 <template>
   <div class="echarts">
-    <ECharts :option="option" :resize="false" :onClick="onClick" />
+    <ECharts :option="option" :resize="false" :onClick="onClick" @mousemove="onMousemove" @mouseleave="onMouseleave" />
   </div>
 </template>
 
@@ -297,6 +297,26 @@
       }
     });
   };
+  const onMousemove = () => {
+    if (timer.value) {
+      clearInterval(timer.value);
+      timer.value = null;
+    }
+  }
+  const onMouseleave = () => {
+    if (timer.value) {
+      clearInterval(timer.value);
+      timer.value = null;
+    }
+    timer.value = setInterval(() => {
+      dataZoom.value.startValue++;
+      if (dataZoom.value.endValue++ >= salvProName.value.length - 1) {
+        dataZoom.value.startValue = 0;
+        dataZoom.value.endValue = 3;
+      }
+      // chart?.setOption(option);
+    }, 1000);
+  }
   query();
   timer1.value = setInterval(() => {
     if (!load.value) {

src/views/data-screen/components/HotPlateChart.vue

 <template>
   <div class="echarts">
-    <ECharts :option="option" :resize="false" />
+    <ECharts :option="option" :resize="false" @mousemove="onMousemove" @mouseleave="onMouseleave"/>
   </div>
 </template>
 
@@ -283,6 +283,26 @@
       }
     });
   };
+  const onMousemove = () => {
+    if (timer.value) {
+      clearInterval(timer.value);
+      timer.value = null;
+    }
+  }
+  const onMouseleave = () => {
+    if (timer.value) {
+      clearInterval(timer.value);
+      timer.value = null;
+    }
+    timer.value = setInterval(() => {
+      dataZoom.value.startValue++;
+      if (dataZoom.value.endValue++ >= salvProName.value.length - 1) {
+        dataZoom.value.startValue = 0;
+        dataZoom.value.endValue = 3;
+      }
+      // chart?.setOption(option);
+    }, 1000);
+  }
   query();
   timer1.value = setInterval(() => {
     if (!load.value) {

src/views/data-screen/components/PlatformSourceChart.vue

@@ -13,11 +13,22 @@
   const load = ref(false);
   const timer1 = ref();
   const datas = ref([]);
+  const getRandomIntInclusive = (min, max) => {
+    const minCeiled = Math.ceil(min);
+    const maxFloored = Math.floor(max);
+    return Math.floor(Math.random() * (maxFloored - minCeiled + 1) + minCeiled);
+  }
   const query = () => {
     load.value = true;
     getAISecurityTotal().then(res=> {
       load.value = false;
       if (res.success) {
+        res.result.forEach(v => {
+          const num = (v.total + getRandomIntInclusive(-10, 20))
+          v.total = num < 0 ? 0 : num
+          const num1 = (v.newTotal + getRandomIntInclusive(-10, 50))
+          v.newTotal = num1 < 0 ? 0 : num1
+        })
         datas.value = res.result
       }
     })

src/views/data-screen/components/RealTimeAccessChart.vue

@@ -21,11 +21,20 @@
     'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAoCAYAAAAhf6DEAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAA6SURBVEhLY2x8/vY/A4mg3zwcTDOBSTLBqGYSwahmEsGoZhLBqGYSwahmEsGoZhLBqGYSwZDUzMAAAJldBMF2UASmAAAAAElFTkSuQmCC';
   var g_cellBarImg0_y = new Image();
   g_cellBarImg0_y.src = g_cellBar0_y;
+  const getRandomIntInclusive = (min, max) => {
+    const minCeiled = Math.ceil(min);
+    const maxFloored = Math.floor(max);
+    return Math.floor(Math.random() * (maxFloored - minCeiled + 1) + minCeiled);
+  }
   const query = () => {
     load.value = true;
     getNetTypeTotal().then(res=> {
       load.value = false;
       if (res.success) {
+        res.result.forEach(v => {
+          const num = (v.value + getRandomIntInclusive(-3, 6))
+          v.value = num > 100 ? 100 : num < 0 ? 0 : num
+        })
         datas.value = res.result
       }
     })

src/views/home/components/SalesOverview.vue

@@ -108,8 +108,12 @@
         tooltip: {
           trigger: 'axis',
           confine: true,
-          hideDelay: 200, // 浮层隐藏的延迟
+          // showDelay: 1000, // 浮层隐藏的延迟
+          hideDelay: 10000000, // 浮层隐藏的延迟
           enterable: true,
+          // triggerOn: 'click',
+          renderMode: 'html',
+          transitionDuration: 0.9,
           formatter: (params) => {
             let tipData = params[0];
             let html = `<div style="height: auto;max-height: 170px;overflow-y: auto;">${tipData.name}${props.dayActiveName === '日' ? ':00' : ''} <i >${tipData.value}</i> 个<br/>`;
@@ -126,9 +130,12 @@
             }
             return html;
           },
+          position: (point) => {
+            return [point[0], '10%'];
+          },
           // backgroundColor: "transparent",
           // borderColor: "transparent",
-          axisPointer: { lineStyle: { type: 'dashed' }, snap: true },
+          axisPointer: { lineStyle: { type: 'dashed' } },
           // extraCssText: "box-shadow: none;padding:0"
         },
         grid: {