wip:历史记录折线图,接口待调试

@@ -21,10 +21,10 @@
   import { BasicTable, useTable, TableAction } from '/@/components/Table';
   import { alarmColumns, alarmSearchSchemas } from './config/detail.config';
   import { getDeviceAlarm } from '/@/api/device/deviceManager';
-  import AlarmDetailDrawer from './cpns/AlarmDetailDrawer.vue';
   import { useDrawer } from '/@/components/Drawer';
+  import AlarmDetailDrawer from './cpns/AlarmDetailDrawer.vue';
   export default defineComponent({
-    name: 'DeviceManagement',
+    name: 'AlarmCenter',
     components: {
       BasicTable,
       TableAction,

+export const getLineData = (() => {
+  const category: any[] = [];
+  let dottedBase = +new Date();
+  const lineData: any[] = [];
+
+  for (let i = 0; i < 20; i++) {
+    const date = new Date((dottedBase += 1000 * 3600 * 24));
+    category.push([date.getFullYear(), date.getMonth() + 1, date.getDate()].join('-'));
+    const b = Math.random() * 200;
+    const d = Math.random() * 200;
+    lineData.push(d + b);
+  }
+  console.log(lineData);
+  return { category, lineData };
+})();

@@ -25,14 +25,21 @@
         </template>
       </BasicTable>
     </div>
-    <a-button type="primary" @click="handleClick">打开弹窗</a-button>
-    <BasicModal @register="registerModal" title="历史数据" width="70%">
+    <a-button type="primary" @click="openHistoryModal">打开弹窗</a-button>
+    <BasicModal
+      @register="registerModal"
+      title="历史数据"
+      width="70%"
+      :footer="null"
+      @cancel="cancelHistoryModal"
+    >
       <BasicForm @register="registerForm" />
+      <div ref="chartRef" :style="{ height: '300px', width }"></div>
     </BasicModal>
   </div>
 </template>
 <script lang="ts">
-  import { defineComponent, ref, nextTick, unref, onMounted } from 'vue';
+  import { defineComponent, ref, nextTick, unref, onMounted, Ref } from 'vue';
   import { useScript } from '/@/hooks/web/useScript';
   import { formSchema, columns } from './config.data';
   import { BasicTable, useTable } from '/@/components/Table';
@@ -43,6 +50,10 @@
   import { useModal, BasicModal } from '/@/components/Modal';
   import { BasicForm, useForm } from '/@/components/Form';
   import { schemas } from './config.data';
+
+  import { useECharts } from '/@/hooks/web/useECharts';
+  import { getLineData } from './data';
+
   export default defineComponent({
     name: 'BaiduMap',
     components: {
@@ -77,9 +88,6 @@
         map.centerAndZoom(point, 15);
         map.enableScrollWheelZoom(true);
       }
-      onMounted(() => {
-        initMap();
-      });
 
       const [registerTable] = useTable({
         api: devicePage,
@@ -106,6 +114,7 @@
           };
           map.centerAndZoom(point, 15);
           map.enableScrollWheelZoom(true);
+          // 创建信息窗口对象
           let infoWindow = new BMap.InfoWindow(
             `
           <div style="display:flex;justify-content:space-between; margin:20px 0px;">
@@ -129,7 +138,7 @@
           </div>
           `,
             options
-          ); // 创建信息窗口对象
+          );
           map.openInfoWindow(infoWindow, map.getCenter());
           let preMarker = null;
           const rivet =
@@ -161,22 +170,89 @@
       };
 
       const [registerModal, { openModal }] = useModal();
-      const [registerForm] = useForm({
+      const [registerForm, { resetFields }] = useForm({
         labelWidth: 120,
         schemas,
       });
-      const handleClick = () => {
+
+      const chartRef = ref<HTMLDivElement | null>(null);
+      const { setOptions, echarts } = useECharts(chartRef as Ref<HTMLDivElement>);
+      const { lineData, category } = getLineData;
+      const openHistoryModal = () => {
         openModal(true);
+        setOptions({
+          backgroundColor: '#0f375f',
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              type: 'shadow',
+              label: {
+                show: true,
+                backgroundColor: '#333',
+              },
+            },
+          },
+          xAxis: {
+            data: category,
+            axisLine: {
+              lineStyle: {
+                color: '#ccc',
+              },
+            },
+          },
+          yAxis: {
+            splitLine: { show: false },
+            axisLine: {
+              lineStyle: {
+                color: '#ccc',
+              },
+            },
+          },
+          series: [
+            {
+              name: '当日数据',
+              type: 'line',
+              smooth: true,
+              showAllSymbol: 'auto',
+              symbol: 'emptyCircle',
+              symbolSize: 15,
+              data: lineData,
+            },
+            {
+              name: 'line',
+              type: 'bar',
+              barGap: '-100%',
+              barWidth: 10,
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: 'rgba(20,200,212,0.5)' },
+                  { offset: 0.2, color: 'rgba(20,200,212,0.2)' },
+                  { offset: 1, color: 'rgba(20,200,212,0)' },
+                ]),
+              },
+              z: -12,
+              data: lineData,
+            },
+          ],
+        });
+      };
+      const cancelHistoryModal = () => {
+        resetFields();
       };
+      onMounted(() => {
+        initMap();
+      });
 
       return {
         wrapRef,
         registerTable,
         deviceRowClick,
         DeviceState,
-        handleClick,
         registerModal,
         registerForm,
+        chartRef,
+        openHistoryModal,
+        cancelHistoryModal,
       };
     },
   });

@@ -8,8 +8,8 @@
   import { useWebSocket } from '@vueuse/core';
   import { JWT_TOKEN_KEY } from '/@/enums/cacheEnum';
   import { getAuthCache } from '/@/utils/auth';
-  import type { socketDataType } from '../../types';
   import { useMessage } from '/@/hooks/web/useMessage';
+  import type { socketDataType } from '../../types';
   export default defineComponent({
     name: 'RealTimeData',
     components: {
@@ -22,7 +22,7 @@
       },
     },
     setup(props) {
-      const token = getAuthCache(JWT_TOKEN_KEY);
+      const token: string = getAuthCache(JWT_TOKEN_KEY);
       const state = reactive({
         server: `ws://101.133.234.90:8080/api/ws/plugins/telemetry?token=${token}`,
         sendValue: JSON.stringify({
@@ -58,23 +58,22 @@
         onConnected() {
           send(state.sendValue);
           console.log('建立连接了');
-          console.log(props.deviceDetail.tbDeviceId);
         },
         onMessage(_, e) {
           const { data } = JSON.parse(e.data);
           console.log('来新消息了', 'data---', data);
-          const newArray: any = [];
+          const newArray: socketDataType[] = [];
           for (const key in data) {
-            const newData = data[key].flat(1);
+            const [time, value] = data[key].flat(1);
             let obj = {
               key,
-              time: newData[0],
-              value: newData[1],
+              time,
+              value,
             };
             if (state.recordList.length === 0) {
-              state.recordList.push(obj);
+              state.recordList.unshift(obj);
             } else {
-              newArray.push(obj);
+              newArray.unshift(obj);
             }
           }
           newArray.forEach((item) => {
@@ -91,7 +90,6 @@
             }
           });
         },
-        onDisconnected() {},
         onError() {
           createMessage.error('webSocket连接超时,请联系管理员');
         },