'修改首页图表逻辑及样式'

-import { BasicPageParams, BasicFetchResult } from '/@/api/model/baseModel';
-/**
- * @description: Request list interface parameters
- */
-export type MessageConfigParams = BasicPageParams & MessageParams;
-
-export type MessageParams = {
-  status?: number;
-  messageType?: string;
-};
-
-export interface MessageConfig {
-  id: string;
-  configName: string;
-  messageType: string;
-  platformType: string;
-  config: ConfigParams;
-  createTime: string;
-  updateTime: string;
-  status: number;
-}
-export interface ConfigParams {
-  host: string;
-  port: number;
-  username: string;
-  password: string;
-  accessKeyId: string;
-  accessKeySecret: string;
-}
-
-/**
- * @description: Request list return value
- */
-export type MessageConfigResultModel = BasicFetchResult<MessageConfig>;
-
-export type MessageConfigResult = MessageConfig;

@@ -82,7 +82,6 @@
     padding-left: 7px;
     cursor: pointer;
     transition: all 0.2s ease;
-
     &.light {
       border-bottom: 1px solid @border-color-base;
     }

 <template>
+  123
   <div ref="chartRef" :style="{ height, width }"></div>
 </template>
 <script lang="ts" setup>
-  import { ref, Ref, withDefaults, defineProps } from 'vue';
+  import { ref, Ref, withDefaults } from 'vue';
   import { useECharts } from '/@/hooks/web/useECharts';
 
   interface Props {

@@ -80,7 +80,7 @@
   </div>
 </template>
 <script lang="ts" setup>
-  import { defineProps, defineExpose, ref, onMounted } from 'vue';
+  import { ref, onMounted } from 'vue';
   import { Card } from 'ant-design-vue';
   import { getHomeData } from '/@/api/dashboard';
   import { isAdmin } from '/@/enums/roleEnum';

@@ -15,22 +15,18 @@
             >{{ item.label }}</span
           >
         </template>
-        <DatePicker @change="onDateChange" />
+        <DatePicker @change="onDateChange" v-model:value="dateValue" />
       </div>
     </template>
-    <div v-if="activeKey === '1'">
+    <div v-show="activeKey === '1'">
       <p class="center">告警数</p>
       <!-- 折线图 -->
-      <VisitAnalysis v-if="!isAdmin(role)" :alarmList="state.alarmList" />
+      <VisitAnalysis :alarmList="state.alarmList" />
     </div>
-    <div v-if="activeKey === '2'">
+    <div v-show="activeKey === '2'">
       <p class="center">消息量</p>
       <!-- 柱形图 -->
-      <VisitAnalysisBar
-        v-if="!isAdmin(role)"
-        :dataPointList="state.dataPointList"
-        :messageList="state.messageList"
-      />
+      <VisitAnalysisBar :dataPointList="state.dataPointList" :messageList="state.messageList" />
     </div>
   </Card>
   <Card v-bind="$attrs" v-if="isAdmin(role)" title="租户趋势">
@@ -73,7 +69,8 @@
     },
   ];
   // 快速选择日期
-  const activeIndex = ref(1);
+  const activeIndex = ref(3);
+  const dateValue = ref();
   const dateList = ref([
     { label: '1小时', value: 3600000 },
     { label: '1天', value: 86400000 },
@@ -82,7 +79,6 @@
   ]);
   // web Socket
   const token: string = getAuthCache(JWT_TOKEN_KEY);
-
   const state = reactive({
     server: `${import.meta.env.VITE_WEB_SOCKET}${token}`,
     alarmList: new Array<[number, string]>(),
@@ -141,7 +137,22 @@
           },
         ],
       });
+      const sendValue1 = JSON.stringify({
+        entityDataCmds: [
+          {
+            cmdId: activeKey.value,
+            historyCmd: {
+              keys: ['createdAlarmsCountHourly'],
+              startTs: Date.now() - 2592000000,
+              endTs: Date.now(),
+              interval: 86400000,
+              agg: 'COUNT',
+            },
+          },
+        ],
+      });
       send(sendValue);
+      send(sendValue1);
       console.log('建立连接了');
     },
     onMessage(_, e) {
@@ -199,26 +210,30 @@
       close();
     },
   });
+
+  // 切换tab页
   function onTabChange(key: string) {
     activeKey.value = key;
-    if (key === '1') {
-      const sendAlarmValue = JSON.stringify({
-        entityDataCmds: [
-          {
-            cmdId: activeKey.value,
-            historyCmd: {
-              keys: ['createdAlarmsCountHourly'],
-              startTs: Date.now() - 86400000,
-              endTs: Date.now(),
-              interval: 7200000,
-              limit: 12,
-              agg: 'COUNT',
-            },
+    activeIndex.value = 3;
+    dateValue.value = '';
+    const sendValue = JSON.stringify({
+      entityDataCmds: [
+        {
+          cmdId: activeKey.value,
+          historyCmd: {
+            keys:
+              activeKey.value === '1'
+                ? ['createdAlarmsCountHourly']
+                : ['transportMsgCountHourly', 'transportDataPointsCountHourly'],
+            startTs: Date.now() - 2592000000,
+            endTs: Date.now(),
+            interval: 86400000,
+            agg: 'COUNT',
           },
-        ],
-      });
-      send(sendAlarmValue);
-    } else {
+        },
+      ],
+    });
+    if (key === '2') {
       const sendMessageValue = JSON.stringify({
         entityDataCmds: [
           {
@@ -267,24 +282,9 @@
           },
         ],
       });
-      const sendMessageValue2 = JSON.stringify({
-        entityDataCmds: [
-          {
-            cmdId: activeKey.value,
-            historyCmd: {
-              keys: ['transportMsgCountHourly', 'transportDataPointsCountHourly'],
-              startTs: Date.now() - 86400000,
-              endTs: Date.now(),
-              interval: 7200000,
-              limit: 12,
-              agg: 'COUNT',
-            },
-          },
-        ],
-      });
       send(sendMessageValue);
-      send(sendMessageValue2);
     }
+    send(sendValue);
   }
   // 选择日期
   function onDateChange(_, dateString) {
@@ -313,12 +313,14 @@
   }
   // 快速选择时间
   function quickQueryDate(index: number, value: number) {
+    if (activeIndex.value === index) return;
     activeIndex.value = index;
-    let limit = 12;
-    if (value === 604800000) {
-      limit = 7;
-    } else if (value === 2592000000) {
-      limit = 30;
+    dateValue.value = '';
+    let interval = 3600000;
+    if (value === 86400000) {
+      interval = 7200000;
+    } else if (value === 604800000 || value === 2592000000) {
+      interval = 86400000;
     }
     // 动态发送ws数据
     const sendValue = JSON.stringify({
@@ -332,8 +334,7 @@
                 : ['transportMsgCountHourly', 'transportDataPointsCountHourly'],
             startTs: Date.now() - value,
             endTs: Date.now(),
-            interval: value > 3600000 ? 7200000 : 300000,
-            limit,
+            interval,
             agg: 'COUNT',
           },
         },
@@ -341,7 +342,7 @@
     });
     send(sendValue);
 
-    console.log(value);
+    console.log(JSON.parse(sendValue), '----interval');
   }
 </script>
 

 <template>
+  123
   <div ref="chartRef" :style="{ height, width }"></div>
 </template>
 <script lang="ts" setup>
-  import { ref, Ref, withDefaults, defineProps } from 'vue';
+  import { ref, Ref, withDefaults } from 'vue';
   import { useECharts } from '/@/hooks/web/useECharts';
 
   interface Props {

@@ -2,7 +2,7 @@
   <div ref="chartRef" :style="{ height, width }"></div>
 </template>
 <script lang="ts" setup>
-  import { onMounted, ref, Ref, withDefaults, defineProps, watch } from 'vue';
+  import { onMounted, ref, Ref, withDefaults, watch } from 'vue';
   import { useECharts } from '/@/hooks/web/useECharts';
 
   interface Props {
@@ -20,43 +20,29 @@
   const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
 
   onMounted(() => {
-    console.log(props.alarmList);
     setOptions({
       tooltip: {
         trigger: 'axis',
-        axisPointer: {
-          lineStyle: {
-            width: 1,
-            color: '#019680',
-          },
-        },
       },
+      grid: {
+        left: '3%',
+        right: '4%',
+        bottom: '3%',
+        containLabel: true,
+      },
+
       xAxis: {
         type: 'time',
-        boundaryGap: false,
-        splitLine: {
-          show: true,
-          lineStyle: {
-            width: 1,
-            type: 'solid',
-            color: 'rgba(226,226,226,0.5)',
-          },
-        },
-        axisTick: {
-          show: false,
-        },
       },
-      yAxis: {},
-      grid: { left: '1%', right: '1%', top: '2  %', bottom: 0, containLabel: true },
+      yAxis: {
+        type: 'value',
+      },
       series: [
         {
-          smooth: true,
+          name: '告警数',
+          type: 'bar',
+          stack: 'Total',
           data: props.alarmList,
-          type: 'line',
-          areaStyle: {},
-          itemStyle: {
-            color: '#5ab1ef',
-          },
         },
       ],
     });
@@ -68,39 +54,26 @@
       setOptions({
         tooltip: {
           trigger: 'axis',
-          axisPointer: {
-            lineStyle: {
-              width: 1,
-              color: '#019680',
-            },
-          },
         },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true,
+        },
+
         xAxis: {
           type: 'time',
-          boundaryGap: false,
-          splitLine: {
-            show: true,
-            lineStyle: {
-              width: 1,
-              type: 'solid',
-              color: 'rgba(226,226,226,0.5)',
-            },
-          },
-          axisTick: {
-            show: false,
-          },
         },
-        yAxis: {},
-        grid: { left: '1%', right: '1%', top: '2  %', bottom: 0, containLabel: true },
+        yAxis: {
+          type: 'value',
+        },
         series: [
           {
-            smooth: true,
+            name: '告警数',
+            type: 'bar',
+            stack: 'Total',
             data: newValue,
-            type: 'line',
-            areaStyle: {},
-            itemStyle: {
-              color: '#5ab1ef',
-            },
           },
         ],
       });

@@ -2,7 +2,7 @@
   <div ref="chartRef" :style="{ height, width }"></div>
 </template>
 <script lang="ts" setup>
-  import { ref, Ref, watch, withDefaults, defineProps } from 'vue';
+  import { ref, Ref, watch, withDefaults } from 'vue';
   import { useECharts } from '/@/hooks/web/useECharts';
   type DataItem = [number, string];
   interface Props {
@@ -38,21 +38,25 @@
         },
         yAxis: {},
         grid: {
-          bottom: 100,
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true,
         },
         series: [
           {
-            name: '传输数据点',
+            name: '传输消息量',
             type: 'bar',
             stack: 'total',
-            data: newValue,
+            data: newValue1,
+            color: '#5c7bd9',
           },
           {
-            name: '传输消息量',
+            name: '传输数据点',
             type: 'bar',
             stack: 'total',
-
-            data: newValue1,
+            data: newValue,
+            color: '#9fe080',
           },
         ],
       });

@@ -44,6 +44,13 @@
           labelWidth: 120,
           schemas: alarmSearchSchemas,
         },
+        showTableSetting: true,
+        tableSetting: {
+          redo: true,
+          size: false,
+          setting: false,
+          fullScreen: false,
+        },
         useSearchForm: true,
         bordered: true,
         showIndexColumn: false,