feat:首页新增饼状图和调整部分样式

@@ -137,10 +137,14 @@
         <div class="mr-4">
         <div class="mr-4">
           <img
           <img
             v-if="!isAdmin(role)"
             v-if="!isAdmin(role)"
-            src="/src/assets/images/msg-count.png"
+            src="/src/assets/images/product.png"
+            style="width: 5.625rem; height: 5.625rem"
+          />
+          <img
+            v-else
+            src="/src/assets/images/product.png"
             style="width: 5.625rem; height: 5.625rem"
             style="width: 5.625rem; height: 5.625rem"
           />
           />
-          <img v-else src="/src/assets/images/kf.png" style="width: 5.625rem; height: 5.625rem" />
         </div>
         </div>
         <div class="flex-auto">
         <div class="flex-auto">
           <div class="flex justify-between" style="align-items: center">
           <div class="flex justify-between" style="align-items: center">

 <template>
 <template>
-  <div ref="chartRef" :style="{ height, width }"></div>
+  <div v-show="dataSeries.length" ref="chartRef" :style="{ height, width }"></div>
+  <div v-show="!dataSeries.length"><Empty :image="Empty.PRESENTED_IMAGE_SIMPLE" /></div>
 </template>
 </template>
 <script lang="ts">
 <script lang="ts">
   import { defineComponent, PropType, ref, Ref, onMounted, toRefs } from 'vue';
   import { defineComponent, PropType, ref, Ref, onMounted, toRefs } from 'vue';
   import { useECharts } from '/@/hooks/web/useECharts';
   import { useECharts } from '/@/hooks/web/useECharts';
+  import { Empty } from 'ant-design-vue';
 
 
   export default defineComponent({
   export default defineComponent({
+    components: { Empty },
     props: {
     props: {
       width: {
       width: {
         type: String as PropType<string>,
         type: String as PropType<string>,
@@ -65,7 +68,7 @@
         //自适应
         //自适应
         window.addEventListener('resize', () => resize());
         window.addEventListener('resize', () => resize());
       });
       });
-      return { chartRef };
+      return { chartRef, Empty, dataSeries };
     },
     },
   });
   });
 </script>
 </script>

@@ -23,15 +23,14 @@
         />
         />
       </div>
       </div>
     </template>
     </template>
-    <div v-if="activeKey === '1'">
-      <!-- 折线图 -->
+    <!-- <div v-if="activeKey === '1'">
       <CustomerAlarmMessage
       <CustomerAlarmMessage
         v-if="role === 'CUSTOMER_USER'"
         v-if="role === 'CUSTOMER_USER'"
         type="CUSTOMER_ALARM_STATISTICAL"
         type="CUSTOMER_ALARM_STATISTICAL"
         :customerList="customerAlarmList"
         :customerList="customerAlarmList"
       />
       />
       <VisitAnalysis v-else :alarmList="state.alarmList" />
       <VisitAnalysis v-else :alarmList="state.alarmList" />
-    </div>
+    </div> -->
     <div v-if="activeKey === '2'">
     <div v-if="activeKey === '2'">
       <!-- 柱形图 -->
       <!-- 柱形图 -->
       <CustomerAlarmMessage
       <CustomerAlarmMessage
@@ -100,7 +99,7 @@
 <script lang="ts" setup>
 <script lang="ts" setup>
   import { ref, reactive } from 'vue';
   import { ref, reactive } from 'vue';
   import { Card, DatePicker } from 'ant-design-vue';
   import { Card, DatePicker } from 'ant-design-vue';
-  import VisitAnalysis from './VisitAnalysis.vue';
+  // import VisitAnalysis from './VisitAnalysis.vue';
   import VisitAnalysisBar from './VisitAnalysisBar.vue';
   import VisitAnalysisBar from './VisitAnalysisBar.vue';
   import { isAdmin } from '/@/enums/roleEnum';
   import { isAdmin } from '/@/enums/roleEnum';
   import { useWebSocket } from '@vueuse/core';
   import { useWebSocket } from '@vueuse/core';
@@ -197,7 +196,11 @@
               latestValues: [
               latestValues: [
                 {
                 {
                   type: 'TIME_SERIES',
                   type: 'TIME_SERIES',
-                  key: 'createdAlarmsCountHourly',
+                  key: 'transportMsgCountHourly',
+                },
+                {
+                  type: 'TIME_SERIES',
+                  key: 'transportDataPointsCountHourly',
                 },
                 },
               ],
               ],
             },
             },
@@ -210,7 +213,7 @@
           {
           {
             cmdId: activeKey.value,
             cmdId: activeKey.value,
             historyCmd: {
             historyCmd: {
-              keys: ['createdAlarmsCountHourly'],
+              keys: ['transportMsgCountHourly', 'transportDataPointsCountHourly'],
               startTs: Date.now() - 2592000000,
               startTs: Date.now() - 2592000000,
               endTs: Date.now(),
               endTs: Date.now(),
               interval: 86400000,
               interval: 86400000,
@@ -240,21 +243,26 @@
         }
         }
       } else {
       } else {
         if (data) {
         if (data) {
-          const { transportDataPointsCountHourly, transportMsgCountHourly } =
-            data.data[0].latest.TIME_SERIES;
-          state.dataPoint = [
-            transportDataPointsCountHourly.ts,
-            transportDataPointsCountHourly.value,
-          ];
-          state.MsgCount = [
-            transportDataPointsCountHourly.ts,
-            transportDataPointsCountHourly.value,
-          ];
-          state.dataPointList.push([
-            transportDataPointsCountHourly.ts,
-            transportDataPointsCountHourly.value,
-          ]);
-          state.messageList.push([transportMsgCountHourly.ts, transportMsgCountHourly.value]);
+          console.log('消息数', data);
+          if (data) {
+            const { transportDataPointsCountHourly, transportMsgCountHourly } =
+              data.data[0].latest.TIME_SERIES;
+            state.dataPoint = [
+              transportDataPointsCountHourly?.ts,
+              transportDataPointsCountHourly?.value,
+            ];
+            state.MsgCount = [
+              transportDataPointsCountHourly?.ts,
+              transportDataPointsCountHourly?.value,
+            ];
+            state.dataPointList.push([
+              transportDataPointsCountHourly?.ts,
+              transportDataPointsCountHourly?.value,
+            ]);
+            console.log('state.dataPointList', state.dataPointList);
+            state.messageList.push([transportMsgCountHourly?.ts, transportMsgCountHourly?.value]);
+            console.log('state.messageList', state.messageList);
+          }
         }
         }
         if (update) {
         if (update) {
           const { transportDataPointsCountHourly, transportMsgCountHourly } = update[0].timeseries;
           const { transportDataPointsCountHourly, transportMsgCountHourly } = update[0].timeseries;
@@ -268,6 +276,8 @@
           }
           }
           state.dataPointList = newArray;
           state.dataPointList = newArray;
           state.messageList = newArray1;
           state.messageList = newArray1;
+          console.log('newArray', state.dataPointList);
+          console.log('newArray1', state.messageList);
         }
         }
       }
       }
     },
     },

@@ -5,7 +5,7 @@
   </div>
   </div>
 </template>
 </template>
 <script lang="ts" setup>
 <script lang="ts" setup>
-  import { ref, Ref, watch, withDefaults } from 'vue';
+  import { ref, Ref, watch, withDefaults, onMounted } from 'vue';
   import { useECharts } from '/@/hooks/web/useECharts';
   import { useECharts } from '/@/hooks/web/useECharts';
   import { Empty } from 'ant-design-vue';
   import { Empty } from 'ant-design-vue';
   type DataItem = [number, string];
   type DataItem = [number, string];
@@ -23,6 +23,62 @@
   });
   });
   const chartRef = ref<HTMLDivElement | null>(null);
   const chartRef = ref<HTMLDivElement | null>(null);
   const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
   const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
+  onMounted(() => {
+    // 计算总量
+    let dataPointTotal = 0;
+    let messageTotal = 0;
+    for (const item of props.dataPointList) {
+      dataPointTotal += Number(item[1]);
+    }
+    for (const item of props.messageList) {
+      messageTotal += Number(item[1]);
+    }
+    setOptions({
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          type: 'shadow',
+        },
+      },
+      xAxis: {
+        type: 'time',
+      },
+      legend: {
+        data: ['传输数据点', '传输消息量'],
+        left: 'center',
+        formatter: (name) => {
+          return name === '传输数据点' ? `${name} ${dataPointTotal}` : `${name} ${messageTotal}`;
+        },
+      },
+
+      yAxis: {},
+      grid: {
+        left: '3%',
+        right: '4%',
+        bottom: '3%',
+        containLabel: true,
+      },
+      series: [
+        {
+          name: '传输数据点',
+          type: 'line',
+          stack: 'total',
+          data: props.dataPointList,
+          // barWidth: '10%',
+          color: '#5AEEED',
+        },
+        {
+          name: '传输消息量',
+          type: 'line',
+          stack: 'total',
+          // barWidth: '10%',
+          data: props.messageList,
+          color: '#3C78FF',
+        },
+      ],
+    });
+  });
+
   watch(
   watch(
     () => [props.dataPointList, props.messageList],
     () => [props.dataPointList, props.messageList],
     ([newValue, newValue1]) => {
     ([newValue, newValue1]) => {