定时刷新5分

src/components/Max/CenterBottom.vue

@@ -29,11 +29,13 @@
 </template>
   
 <script setup>
-  import { ref, onMounted, nextTick } from 'vue';
+import { ref, onMounted, nextTick, onBeforeUnmount } from 'vue';
 import * as echarts from 'echarts';
 import { BoxApi } from '@/utils/boxApi.ts';
 import dayjs from 'dayjs';
 import { debounce } from 'lodash';
+import { useGlobalTimerStore } from '@/stores/globalTimerStore';
+
 
 
 const activeName = ref('first');
@@ -51,6 +53,16 @@
 const monthDates = ref([]);
 
 const apiInstance = new BoxApi();
+const globalTimerStore = useGlobalTimerStore();
+
+const updateChartData = async () => {
+  const range =
+    activeName.value === 'first' ? 'day' :
+      activeName.value === 'second' ? 'week' : 'month';
+
+  await updateCounts(range);
+};
+
 
 // 设置时间范围获取计数
 const getEventCount = async (timeBefore, timeAfter) => {
@@ -98,7 +110,7 @@
   },
   grid: {
     top: '10%',
-      left: '5%',
+    left: '7%',
     right: '5%',
     bottom: '20%',
   },
@@ -189,10 +201,26 @@
   calculateWeekDates();
   calculateMonthDates();
   await handleClick({ props: { name: 'first' } });
+  // 注册定时器回调
+  globalTimerStore.registerCallback(updateChartData);
+
+  // 启动全局定时器
+  globalTimerStore.startTimer();
   window.addEventListener('resize', debounce(() => {
     if (chartInstance.value) chartInstance.value.resize();
   }, 300));
+
 });
+
+onBeforeUnmount(() => {
+  globalTimerStore.unregisterCallback(updateChartData);
+  globalTimerStore.stopTimer();
+  window.removeEventListener('resize', debounce(() => {
+    if (chartInstance.value) chartInstance.value.resize();
+  }));
+});
+
+
 </script>
   
   
@@ -218,6 +246,7 @@
     border-bottom: 1px solid #3a4b5c;
   } */
 
+
 .chart-container {
   /* min-height: 350px; */
   width: 100%;
@@ -245,8 +274,6 @@
   box-sizing: border-box !important;
   background-clip: content-box !important;
   } */
-  
-  
 .el-tabs__active-bar {
   background-color: transparent !important;
 }

src/components/Max/LeftMiddle.vue

@@ -13,7 +13,9 @@ import { ref, onMounted, onBeforeUnmount } from 'vue';
 import * as echarts from 'echarts';
 import { BoxApi } from '@/utils/boxApi.ts';
 import { DCaret } from '@element-plus/icons-vue';
+import { useGlobalTimerStore } from '@/stores/globalTimerStore';
 
+const globalTimerStore = useGlobalTimerStore();
 const chartContainer = ref(null);
 let myChart = null;
 const cameras = ref([]);
@@ -236,18 +238,14 @@ const fetchCameras = async () => {
   }
 };
 
-// 清理轮播和事件监听
+const resizeChart = () => {
-onBeforeUnmount(() => {
+  if (myChart && !myChart.isDisposed()) {
-  if (dataZoomMoveTimer) {
+    myChart.resize();
-    clearInterval(dataZoomMoveTimer);
+  } else {
-    dataZoomMoveTimer = null; // 确保计时器被清空
+    console.warn('Attempted to resize a disposed ECharts instance.');
   }
-  if (myChart) {
+};
-    window.removeEventListener('resize', resizeChart); // 确保事件监听器被移除
+
-    myChart.dispose();
-    myChart = null;
-  }
-});
 
 
 
@@ -259,16 +257,26 @@ onMounted(async () => {
 
   // 监听窗口变化事件，调整图表大小
   window.addEventListener('resize', resizeChart);
+
+  globalTimerStore.registerCallback(fetchCameras);
+  globalTimerStore.startTimer();
+
 });
 
-
+// 清理轮播和事件监听
-const resizeChart = () => {
+onBeforeUnmount(() => {
-  if (myChart && !myChart.isDisposed()) {
+  if (dataZoomMoveTimer) {
-    myChart.resize();
+    clearInterval(dataZoomMoveTimer);
-  } else {
+    dataZoomMoveTimer = null; // 确保计时器被清空
-    console.warn('Attempted to resize a disposed ECharts instance.');
   }
-};
+  if (myChart) {
+    window.removeEventListener('resize', resizeChart); // 确保事件监听器被移除
+    myChart.dispose();
+    myChart = null;
+  }
+  globalTimerStore.unregisterCallback(fetchCameras);
+  globalTimerStore.stopTimer();  
+});
 
 
 // const resizeChart = () => {
@@ -289,17 +297,19 @@ const resizeChart = () => {
   height: 41vh;
   margin: 20px;
 }
+
 .show-bt {
   background-color: #001529;
   border: #001529;
-  width: 6vw;
+  width: 79px;
-  height: 4vh;
+  height: 30px;
   border-radius: 6px;
   color: white;
   font-weight: bolder;
-  font-size: 15px;
+  font-size: 0.9rem;
   padding: 0;
 }
+
 .chart-container {
   /* margin: 0 1vw 0 1vw; */
   padding-top: 0;

src/components/Max/LeftTop.vue

@@ -18,7 +18,7 @@
             <!-- 右侧分为两行 -->
             <el-col :sm="24" :md="16">
               <el-row>
-                <el-col :sm="24" :md="24">
+                <el-col :sm="24" :md="24" class="inner-title-text">
                   通道总数：
                 </el-col>
               </el-row>
@@ -41,7 +41,7 @@
             <!-- 右侧分为两行 -->
             <el-col :sm="24" :md="16">
               <el-row>
-                <el-col :sm="24" :md="24">
+                <el-col :sm="24" :md="24" class="inner-title-text">
                   在线：
                 </el-col>
               </el-row>
@@ -64,7 +64,7 @@
             <!-- 右侧分为两行 -->
             <el-col :sm="24" :md="16">
               <el-row>
-                <el-col :sm="24" :md="24">
+                <el-col :sm="24" :md="24" class="inner-title-text">
                   离线:
                 </el-col>
               </el-row>
@@ -89,7 +89,7 @@
             <!-- 右侧分为两行 -->
             <el-col :sm="24" :md="16">
               <el-row>
-                <el-col :sm="24" :md="24">
+                <el-col :sm="24" :md="24" class="inner-title-text">
                   事件总数：
                 </el-col>
               </el-row>
@@ -112,7 +112,7 @@
             <!-- 右侧分为两行 -->
             <el-col :sm="24" :md="16">
               <el-row>
-                <el-col :sm="24" :md="24">
+                <el-col :sm="24" :md="24" class="inner-title-text">
                   已处理:
                 </el-col>
               </el-row>
@@ -135,7 +135,7 @@
             <!-- 右侧分为两行 -->
             <el-col :sm="24" :md="16">
               <el-row>
-                <el-col :sm="24" :md="24">
+                <el-col :sm="24" :md="24" class="inner-title-text">
                   未处理:
                 </el-col>
               </el-row>
@@ -163,6 +163,7 @@ import CameraOffline from '@/icons/CameraOffline.vue';
 import EventAll from '@/icons/EventAll.vue';
 import EventClosed from '@/icons/EventClosed.vue';
 import EventPending from '@/icons/EventPending.vue';
+import { useGlobalTimerStore } from '@/stores/globalTimerStore';
 
 const apiInstance = new BoxApi();
 const cameraCount = ref(0);
@@ -320,8 +321,19 @@ onMounted(() => {
   // getMonthData();
   fetchCameras();
   fetchEvents();
+  const globalTimerStore = useGlobalTimerStore();
+  globalTimerStore.registerCallback(fetchCameras);
+  globalTimerStore.registerCallback(fetchEvents);
 
+  globalTimerStore.startTimer();
+});
 
+onBeforeUnmount(() => {
+  const globalTimerStore = useGlobalTimerStore();
+
+  // 注销回调
+  globalTimerStore.unregisterCallback(fetchCameras);
+  globalTimerStore.unregisterCallback(fetchEvents);
 });
 
 
@@ -333,7 +345,11 @@ onMounted(() => {
   height: 100%;
   margin: 1vh;
   padding: 2vh 0;
-
+  overflow-y: scroll;
+  scrollbar-width:none;
+}
+.count-container::-webkit-scrollbar {
+  display: none; 
 }
 
 
@@ -341,14 +357,19 @@ onMounted(() => {
 .bottom-row {
   background-color: #001529;
   color: aliceblue;
-  padding: 0;
+  padding: 0.5vh;
   margin: 0;
 }
 
+.inner-title-text{
+  font-size: 0.9rem;
+}
+
 
 
 .inner-count-text {
   color: rgb(91, 224, 241);
+  font-size: 1rem;
 }
 
 .tab-div {
@@ -357,7 +378,7 @@ onMounted(() => {
 
 ::v-deep .el-tabs__item {
   color: #fff;
-  font-size: 13px;
+  font-size: 0.8rem;
   padding: 0;
   margin-left: 1vh;
   height: 20px;

src/components/Max/RightTop.vue

@@ -3,16 +3,16 @@
 
     <div class="search-row">
       <div class="bt-search">
-        <el-button type="primary" @click="handleFilter" class="alert-bt">点击查询</el-button>
+        <el-button type="primary" @click="handleFilter" class="alert-bt"><el-icon><Search /></el-icon>点击查询</el-button>
       </div>
       <div class="start-col">
-        <el-date-picker v-model="filterParams.timeAfter"  :teleported="false" type="datetime" placeholder="请选择开始时间" prefix-icon="CaretBottom" popper-class="popperClass" ></el-date-picker>
+        <el-date-picker v-model="filterParams.timeAfter" :teleported="false" type="datetime" placeholder="请选择开始时间"
+          prefix-icon="CaretBottom" popper-class="popperClass"></el-date-picker>
       </div>
       <div class="end-col">
-        <el-date-picker v-model="filterParams.timeBefore"  :teleported="false" type="datetime" placeholder="请选择结束时间" prefix-icon="CaretBottom" popper-class="popperClass" ></el-date-picker>
+        <el-date-picker v-model="filterParams.timeBefore" :teleported="false" type="datetime" placeholder="请选择结束时间"
+          prefix-icon="CaretBottom" popper-class="popperClass"></el-date-picker>
       </div>
-      
-      
     </div>
     <div id="3d-bar-chart" class="myPanChart"></div>
 
@@ -34,6 +34,10 @@
 import { ref, reactive, onMounted, onBeforeUnmount, computed } from 'vue';
 import { BoxApi } from '@/utils/boxApi.ts';
 import * as echarts from 'echarts';
+import { Search } from '@element-plus/icons-vue';
+import { useGlobalTimerStore } from '@/stores/globalTimerStore';
+
+const globalTimerStore = useGlobalTimerStore();
 
 const apiInstance = new BoxApi();
 const typeMapping = reactive({});
@@ -60,22 +64,118 @@ const renderChart = () => {
   const chartInstance = echarts.init(chartDom);
 
   const colorList = [
-    // new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+
-    //   { offset: 0, color: "rgba(69,233,254,1)" },
+
-    //   { offset: 1, color: "rgba(69,233,254,0.3)" }
-    // ]),
     new echarts.graphic.LinearGradient(1, 0, 0, 0, [
-      { offset: 0, color: "rgba(255,181,111,1)" },
+      { offset: 0, color: "rgba(135, 206, 250,0.7)" },
-      { offset: 1, color: "rgba(255,181,111,0.3)" }
+      { offset: 1, color: "rgba(135, 206, 250,0.3)" }
     ]),
     new echarts.graphic.LinearGradient(0, 1, 0, 0, [
-      { offset: 0, color: "rgba(101,122,250,1)" },
+      { offset: 0, color: "rgba(95, 158, 160,0.8)" },
-      { offset: 1, color: "rgba(101,122,250,0.3)" }
+      { offset: 1, color: "rgba(95, 158, 160,0.3)" }
+    ]),
+    new echarts.graphic.LinearGradient(1, 0, 0, 0, [
+      { offset: 0, color: "rgba(255, 99, 71, 1)" },
+      { offset: 1, color: "rgba(255, 99, 71, 0.3)" }
+    ]),
+    new echarts.graphic.LinearGradient(1, 0, 0, 0, [
+      { offset: 0, color: "rgba(218, 112, 214,0.6)" },
+      { offset: 1, color: "rgba(218, 112, 214,0.3)" }
+    ]),
+    new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+      { offset: 0, color: "rgba(138, 43, 226,0.7)" },
+      { offset: 1, color: "rgba(138, 43, 226,0.3)" }
     ]),
     new echarts.graphic.LinearGradient(0, 0, 1, 0, [
-      { offset: 0, color: "rgba(45,190,146,1)" },
+      { offset: 0, color: "rgba(75, 0, 130,0.8)" },
-      { offset: 1, color: "rgba(45,190,146,0.3)" }
+      { offset: 1, color: "rgba(75, 0, 130,0.3)" }
     ]),
+    new echarts.graphic.LinearGradient(1, 0, 0, 0, [
+      { offset: 0, color: "rgba(173, 216, 230,0.7)" },
+      { offset: 1, color: "rgba(173, 216, 230,0.3)" }
+    ]),
+    new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+      { offset: 0, color: "rgba(100, 149, 237,0.8)" },
+      { offset: 1, color: "rgba(100, 149, 237,0.3)" }
+    ]),
+    new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+      { offset: 0, color: "rgba(25, 25, 112,0.9)" },
+      { offset: 1, color: "rgba(25, 25, 112,0.3)" }
+    ]),
+    new echarts.graphic.LinearGradient(1, 0, 0, 0, [
+      { offset: 0, color: "rgba(64, 224, 208,0.7)" },
+      { offset: 1, color: "rgba(64, 224, 208,0.3)" }
+    ]),
+    new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+      { offset: 0, color: "rgba(32, 178, 170,0.8)" },
+      { offset: 1, color: "rgba(32, 178, 170,0.3)" }
+    ]),
+    new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+      { offset: 0, color: "rgba(47, 79, 79,0.9)" },
+      { offset: 1, color: "rgba(47, 79, 79,0.3)" }
+    ]),
+    //深海绿 //海浪青 //薄荷青 //幽夜蓝 //极地蓝 //浅冰蓝 //深紫罗兰 //静夜紫 //薰衣草紫 //薄暮紫 //冰川青 //清晨蓝
+
+    new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+      { offset: 0, color: "rgba(123, 104, 238,0.7)" },
+      { offset: 1, color: "rgba(123, 104, 238,0.3)" }
+    ]),
+
+
+    new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+      { offset: 0, color: "rgba(255, 165, 0, 1)" },
+      { offset: 1, color: "rgba(255, 165, 0, 0.3)" }
+    ]), // 橙色
+
+    new echarts.graphic.LinearGradient(1, 0, 0, 0, [
+      { offset: 0, color: "rgba(255, 182, 193, 1)" },
+      { offset: 1, color: "rgba(255, 182, 193, 0.3)" }
+    ]), // 浅粉红
+
+    new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+      { offset: 0, color: "rgba(250, 128, 114, 1)" },
+      { offset: 1, color: "rgba(250, 128, 114, 0.3)" }
+    ]), // 鲑鱼橙
+
+    new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+      { offset: 0, color: "rgba(240, 128, 128, 1)" },
+      { offset: 1, color: "rgba(240, 128, 128, 0.3)" }
+    ]), // 浅珊瑚红
+
+    new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+      { offset: 0, color: "rgba(255, 140, 0, 1)" },
+      { offset: 1, color: "rgba(255, 140, 0, 0.3)" }
+    ]), // 深橙色
+
+    new echarts.graphic.LinearGradient(1, 0, 0, 0, [
+      { offset: 0, color: "rgba(255, 215, 0, 1)" },
+      { offset: 1, color: "rgba(255, 215, 0, 0.3)" }
+    ]), // 金色
+
+    new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+      { offset: 0, color: "rgba(255, 228, 181, 1)" },
+      { offset: 1, color: "rgba(255, 228, 181, 0.3)" }
+    ]), // 小麦色
+
+    new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+      { offset: 0, color: "rgba(255, 160, 122, 1)" },
+      { offset: 1, color: "rgba(255, 160, 122, 0.3)" }
+    ]), // 浅鲑鱼色
+
+    new echarts.graphic.LinearGradient(1, 0, 0, 0, [
+      { offset: 0, color: "rgba(250, 250, 210, 1)" },
+      { offset: 1, color: "rgba(250, 250, 210, 0.3)" }
+    ]), // 浅金黄
+
+    new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+      { offset: 0, color: "rgba(255, 223, 186, 1)" },
+      { offset: 1, color: "rgba(255, 223, 186, 0.3)" }
+    ]), // 暖杏色
+
+    new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+      { offset: 0, color: "rgba(245, 222, 179, 1)" },
+      { offset: 1, color: "rgba(245, 222, 179, 0.3)" }
+    ]), // 小麦暖黄
 
   ];
 
@@ -202,9 +302,9 @@ const handleFilter = () => {
   const timeAfter = filterParams.timeAfter ? formatDateTimeToISO(new Date(filterParams.timeAfter)) : null;
   const timeBefore = filterParams.timeBefore ? formatDateTimeToISO(new Date(filterParams.timeBefore)) : null;
   fetchTypeCounts(timeAfter, timeBefore); // 重新统计数量，添加时间条件
-  
 };
 
+
 const formatDateTime = (datetime) => {
   const date = new Date(datetime);
   const year = date.getFullYear();
@@ -238,10 +338,14 @@ onMounted(async () => {
   await fetchTypeCounts(); // 初次加载时不加时间条件
   window.addEventListener('resize', handleResize);
   await renderChart();
+  globalTimerStore.registerCallback(handleFilter);
+  globalTimerStore.startTimer();
 });
 
 onBeforeUnmount(() => {
   window.removeEventListener('resize', handleResize);
+  globalTimerStore.unregisterCallback(handleFilter);
+  globalTimerStore.stopTimer();
 });
 </script>
 
@@ -275,7 +379,9 @@ onBeforeUnmount(() => {
 
 }
 
-.start-col,.end-col,.bt-search{
+.start-col,
+.end-col,
+.bt-search {
   display: flex;
   justify-content: left;
   align-items: center;

src/main.ts

@@ -13,16 +13,20 @@ import '@kjgl77/datav-vue3/dist/style.css';
 import mitt from 'mitt';
 import Antd from 'ant-design-vue';
 import 'ant-design-vue/dist/reset.css';
+import { createPinia } from 'pinia';
 
 
 const app = createApp(App)
 const globalWebSocket = useGlobalWebSocket();
+const pinia = createPinia();
+
 app.provide('globalWebSocket', globalWebSocket);
 // app.provide('axios', axiosInstance);
 app.use(ElementPlus, { locale: zhCn });
 app.use(router);
 app.use(DataVVue3);
 app.use(Antd);
+app.use(pinia)
 
 // 导航守卫，检查登录状态
 router.beforeEach((to, from, next) => {