Merge branch 'sqy_dev' into 'main'

feat地理位置---:历史记录

See merge request huang/yun-teng-iot-front!63

@@ -6,3 +6,27 @@ export const getDeviceProfile = () => {
     url: '/deviceProfile/me/list',
   });
 };
+
+export const getDeviceHistoryInfo = (params) => {
+  return defHttp.get(
+    {
+      url: `/plugins/telemetry/DEVICE/${params.entityId}/values/timeseries`,
+      params: { ...params, entityId: null, orderBy: 'ASC' },
+    },
+    {
+      joinPrefix: false,
+    }
+  );
+};
+
+// 获取设备数据的keys
+export const getDeviceDataKeys = (id: string) => {
+  return defHttp.get(
+    {
+      url: `/plugins/telemetry/DEVICE/${id}/keys/timeseries`,
+    },
+    {
+      joinPrefix: false,
+    }
+  );
+};

@@ -14,7 +14,6 @@ import { setupStore } from '/@/store';
 import { setupGlobDirectives } from '/@/directives';
 import { setupI18n } from '/@/locales/setupI18n';
 import { registerGlobComp } from '/@/components/registerGlobComp';
-
 // Do not introduce on-demand in local development?
 // In the local development for introduce on-demand, the number of browser requests will increase by about 20%.
 // Which may slow down the browser refresh.

@@ -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,

@@ -92,89 +92,328 @@ export const columns: BasicColumn[] = [
   },
 ];
 
+// 动态生成options
+function generateOptions(value: number) {
+  if (value === 3600000) {
+    return [
+      {
+        label: '10秒',
+        value: 10000,
+      },
+      {
+        label: '15秒',
+        value: 15000,
+      },
+      {
+        label: '30秒',
+        value: 30000,
+      },
+      {
+        label: '1分钟',
+        value: 60000,
+      },
+      {
+        label: '2分钟',
+        value: 120000,
+      },
+      {
+        label: '5分钟',
+        value: 300000,
+      },
+    ];
+  } else if (value === 7200000) {
+    return [
+      {
+        label: '15秒',
+        value: 15000,
+      },
+      {
+        label: '30秒',
+        value: 30000,
+      },
+      {
+        label: '1分钟',
+        value: 60000,
+      },
+      {
+        label: '2分钟',
+        value: 120000,
+      },
+      {
+        label: '5分钟',
+        value: 300000,
+      },
+      {
+        label: '10分钟',
+        value: 600000,
+      },
+      {
+        label: '15分钟',
+        value: 900000,
+      },
+    ];
+  } else if (value === 18000000) {
+    return [
+      {
+        label: '1分钟',
+        value: 60000,
+      },
+      {
+        label: '2分钟',
+        value: 120000,
+      },
+      {
+        label: '5分钟',
+        value: 300000,
+      },
+      {
+        label: '10分钟',
+        value: 600000,
+      },
+      {
+        label: '15分钟',
+        value: 900000,
+      },
+      {
+        label: '30分钟',
+        value: 1800000,
+      },
+    ];
+  } else if (value === 36000000) {
+    return [
+      {
+        label: '2分钟',
+        value: 120000,
+      },
+      {
+        label: '5分钟',
+        value: 300000,
+      },
+      {
+        label: '10分钟',
+        value: 600000,
+      },
+      {
+        label: '15分钟',
+        value: 900000,
+      },
+      {
+        label: '30分钟',
+        value: 1800000,
+      },
+      {
+        label: '1小时',
+        value: 3600000,
+      },
+    ];
+  } else if (value === 43200000) {
+    return [
+      {
+        label: '2分钟',
+        value: 120000,
+      },
+      {
+        label: '5分钟',
+        value: 300000,
+      },
+      {
+        label: '10分钟',
+        value: 600000,
+      },
+      {
+        label: '15分钟',
+        value: 900000,
+      },
+      {
+        label: '30分钟',
+        value: 1800000,
+      },
+      {
+        label: '1小时',
+        value: 3600000,
+      },
+    ];
+  } else if (value === 86400000) {
+    return [
+      {
+        label: '5分钟',
+        value: 300000,
+      },
+      {
+        label: '10分钟',
+        value: 600000,
+      },
+      {
+        label: '15分钟',
+        value: 900000,
+      },
+      {
+        label: '30分钟',
+        value: 1800000,
+      },
+      {
+        label: '1小时',
+        value: 3600000,
+      },
+      {
+        label: '2小时',
+        value: 7200000,
+      },
+    ];
+  } else if (value === 604800000) {
+    return [
+      {
+        label: '30分钟',
+        value: 1800000,
+      },
+      {
+        label: '1小时',
+        value: 3600000,
+      },
+      {
+        label: '2小时',
+        value: 7200000,
+      },
+      {
+        label: '5小时',
+        value: 18000000,
+      },
+      {
+        label: '10小时',
+        value: 36000000,
+      },
+      {
+        label: '12小时',
+        value: 43200000,
+      },
+      {
+        label: '1天',
+        value: 86400000,
+      },
+    ];
+  } else {
+    return [
+      {
+        label: '2小时',
+        value: 7200000,
+      },
+      {
+        label: '5小时',
+        value: 18000000,
+      },
+      {
+        label: '10小时',
+        value: 36000000,
+      },
+      {
+        label: '12小时',
+        value: 43200000,
+      },
+      {
+        label: '1天',
+        value: 86400000,
+      },
+    ];
+  }
+}
 export const schemas: FormSchema[] = [
   {
-    field: 'name',
+    field: 'endTs',
     label: '最后数据',
     component: 'Select',
-    componentProps: {
-      options: [
-        {
-          label: '最近1小时',
-          value: '1',
-        },
-        {
-          label: '最近2小时',
-          value: '2',
-        },
-        {
-          label: '最近5小时',
-          value: '5',
+    required: true,
+    componentProps({ formModel, formActionType }) {
+      return {
+        onChange(value) {
+          const { updateSchema } = formActionType;
+          formModel.interval = '';
+          updateSchema({
+            field: 'interval',
+            componentProps: {
+              placeholder: '请选择分组间隔',
+              options: generateOptions(value),
+            },
+          });
         },
-        {
-          label: '最近12小时',
-          value: '12',
-        },
-        {
-          label: '最近1天',
-          value: '1天',
-        },
-        {
-          label: '最近7天',
-          value: '7天',
-        },
-        {
-          label: '最近30天',
-          value: '30天',
-        },
-      ],
+        options: [
+          {
+            label: '最近1小时',
+            value: 3600000,
+          },
+          {
+            label: '最近2小时',
+            value: 7200000,
+          },
+          {
+            label: '最近5小时',
+            value: 18000000,
+          },
+          {
+            label: '最近10小时',
+            value: 36000000,
+          },
+          {
+            label: '最近12小时',
+            value: 43200000,
+          },
+          {
+            label: '最近1天',
+            value: 86400000,
+          },
+          {
+            label: '最近7天',
+            value: 604800000,
+          },
+          {
+            label: '最近30天',
+            value: 2592000000,
+          },
+        ],
+      };
     },
     colProps: {
       span: 6,
     },
   },
   {
-    field: 'name',
+    field: 'interval',
     label: '分组间隔',
     component: 'Select',
+    colProps: {
+      span: 6,
+    },
     componentProps: {
+      placeholder: '请选择分组间隔',
       options: [
         {
-          label: '15秒',
-          value: '15',
-        },
-        {
-          label: '30秒',
-          value: '30',
+          label: '5分钟',
+          value: 300000,
         },
         {
-          label: '1分钟',
-          value: '60',
+          label: '10分钟',
+          value: 600000,
         },
         {
-          label: '2分钟',
-          value: '120',
+          label: '15分钟',
+          value: 900000,
         },
         {
-          label: '5分钟',
-          value: '360',
+          label: '30分钟',
+          value: 1800000,
         },
         {
-          label: '10分钟',
-          value: '600',
+          label: '1小时',
+          value: 3600000,
         },
         {
-          label: '15分钟',
-          value: '900',
+          label: '2小时',
+          value: 7200000,
         },
       ],
     },
-    colProps: {
-      span: 6,
-    },
   },
   {
-    field: 'name',
+    field: 'agg',
     label: '数据聚合功能',
     component: 'Select',
     componentProps: {

 <template>
-  <div class="wrapper">
+  <div class="wrapper123">
     <div ref="wrapRef" :style="{ height, width }"> </div>
     <div class="right-wrap">
       <BasicTable @register="registerTable" @rowClick="deviceRowClick">
@@ -25,14 +25,21 @@
         </template>
       </BasicTable>
     </div>
-    <a-button type="primary" @click="handleClick">打开弹窗</a-button>
-    <BasicModal @register="registerModal" title="历史数据" width="70%">
+    <BasicModal
+      @register="registerModal"
+      title="历史数据"
+      width="70%"
+      :footer="null"
+      @cancel="cancelHistoryModal"
+      :canFullscreen="false"
+    >
       <BasicForm @register="registerForm" />
+      <div ref="chartRef" :style="{ height: '600px', 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,9 @@
   import { useModal, BasicModal } from '/@/components/Modal';
   import { BasicForm, useForm } from '/@/components/Form';
   import { schemas } from './config.data';
+  import { useECharts } from '/@/hooks/web/useECharts';
+  import { getDeviceHistoryInfo, getDeviceDataKeys } from '/@/api/alarm/position';
+  import moment from 'moment';
   export default defineComponent({
     name: 'BaiduMap',
     components: {
@@ -64,7 +74,7 @@
     setup() {
       const wrapRef = ref<HTMLDivElement | null>(null);
       const { toPromise } = useScript({ src: BAI_DU_MAP_URL });
-
+      const entityId = ref('');
       async function initMap() {
         await toPromise();
         await nextTick();
@@ -73,13 +83,9 @@
         if (!wrapEl) return;
         const map = new BMap.Map(wrapEl);
         const point = new BMap.Point(104.04666605565338, 30.543516387560476);
-
         map.centerAndZoom(point, 15);
         map.enableScrollWheelZoom(true);
       }
-      onMounted(() => {
-        initMap();
-      });
 
       const [registerTable] = useTable({
         api: devicePage,
@@ -90,9 +96,13 @@
         },
         showIndexColumn: false,
         useSearchForm: true,
+        pagination: {
+          showSizeChanger: false,
+        },
       });
       // 点击表格某一行触发
       const deviceRowClick = (record) => {
+        entityId.value = record.tbDeviceId;
         const BMap = (window as any).BMap;
         const wrapEl = unref(wrapRef);
         const map = new BMap.Map(wrapEl);
@@ -106,30 +116,32 @@
           };
           map.centerAndZoom(point, 15);
           map.enableScrollWheelZoom(true);
+          // 创建信息窗口对象
           let infoWindow = new BMap.InfoWindow(
             `
-          <div style="display:flex;justify-content:space-between; margin:20px 0px;">
-            <div style="font-size:16px;font-weight:bold">${name}</div>
-            ${
-              deviceState === 'INACTIVE'
-                ? '<div style="display:flex;align-items:center"><img style="width:15px;height:15px" src="/src/assets/images/djh.png">待激活</div>'
-                : deviceState === 'ONLINE'
-                ? '<div style="display:flex;align-items:center"><img style="width:15px;height:15px" src="/src/assets/images/online1.png">在线</div>'
-                : '<div style="display:flex;align-items:center"><img style="width:15px;height:15px" src="/src/assets/images/lx1.png">离线</div>'
-            }
-          </div>
-          <div>所属组织：${organizationDTO.name}</div>
-          <div style="margin-top:6px;">接入协议：${deviceProfile.transportType}</div>
-          <div style="margin-top:6px;">设备位置：${address}</div>
-          <div style="margin-top:6px;">下线时间：${updateTime}</div>
-          <div style="display:flex;justify-content:space-between; margin-top:10px">
-            <button style="color:#fff;background-color:#409eff;padding:4px; border-radius:4px;">设备信息</button>
-            <button style="color:#fff;background-color:#409eff;padding:4px; border-radius:4px;">报警记录</button>
-            <button  onclick="historyClick()"style="color:#fff;background-color:#409eff;padding:4px; border-radius:4px;">历史数据</button>
-          </div>
-          `,
+            <div style="display:flex;justify-content:space-between; margin:20px 0px;">
+              <div style="font-size:16px;font-weight:bold">${name}</div>
+              ${
+                deviceState === 'INACTIVE'
+                  ? '<div style="display:flex;align-items:center"><img style="width:15px;height:15px" src="/src/assets/images/djh.png">待激活</div>'
+                  : deviceState === 'ONLINE'
+                  ? '<div style="display:flex;align-items:center"><img style="width:15px;height:15px" src="/src/assets/images/online1.png">在线</div>'
+                  : '<div style="display:flex;align-items:center"><img style="width:15px;height:15px" src="/src/assets/images/lx1.png">离线</div>'
+              }
+            </div>
+            <div>所属组织：${organizationDTO.name}</div>
+            <div style="margin-top:6px;">接入协议：${deviceProfile.transportType}</div>
+            <div style="margin-top:6px;">设备位置：${address}</div>
+            <div style="margin-top:6px;">下线时间：${updateTime}</div>
+            <div style="display:flex;justify-content:space-between; margin-top:10px">
+              <button style="color:#fff;background-color:#409eff;padding:4px; border-radius:4px;">设备信息</button>
+              <button style="color:#fff;background-color:#409eff;padding:4px; border-radius:4px;">报警记录</button>
+              <button onclick="openHistoryModal()" style="color:#fff;background-color:#409eff;padding:4px; border-radius:4px;">历史数据</button>
+            </div>
+            `,
             options
-          ); // 创建信息窗口对象
+          );
+
           map.openInfoWindow(infoWindow, map.getCenter());
           let preMarker = null;
           const rivet =
@@ -156,39 +168,190 @@
           let infoWindow = new BMap.InfoWindow('该设备暂无地理位置', options); // 创建信息窗口对象
           map.openInfoWindow(infoWindow, map.getCenter());
         }
-
-        console.log(record);
       };
-
+      let keys = [];
       const [registerModal, { openModal }] = useModal();
-      const [registerForm] = useForm({
+      const [registerForm, { resetFields, getFieldsValue, setFieldsValue, validate }] = useForm({
         labelWidth: 120,
         schemas,
+        async submitFunc() {
+          // 表单验证
+          await validate();
+          let { endTs, interval, agg } = getFieldsValue();
+          if (!endTs) return;
+          // 数据收集
+          const dataArray: any[] = [];
+          const startTs = Date.now() - endTs;
+          endTs = Date.now();
+          // 发送请求
+          const res = await getDeviceHistoryInfo({
+            entityId: entityId.value,
+            keys: keys.join(),
+            startTs,
+            endTs,
+            interval,
+            agg,
+          });
+          // 处理数据
+          for (const key in res) {
+            for (const item1 of res[key]) {
+              let { ts, value } = item1;
+              const time = moment(ts).format('YYYY-MM-DD HH:mm:ss');
+              value = Number(value).toFixed(2);
+              dataArray.push([time, value, key]);
+            }
+          }
+
+          const series: any = keys.map((item) => {
+            return {
+              name: item,
+              type: 'line',
+              stack: 'Total',
+              data: dataArray.filter((item1) => item1[2] === item),
+            };
+          });
+          // 设置数据
+          setOptions({
+            tooltip: {
+              trigger: 'axis',
+            },
+            legend: {
+              data: keys,
+            },
+            grid: {
+              left: '3%',
+              right: '4%',
+              bottom: '3%',
+              containLabel: true,
+            },
+            dataZoom: [
+              {
+                type: 'inside',
+                start: 0,
+                end: 50,
+              },
+              {
+                start: 20,
+                end: 40,
+              },
+            ],
+            xAxis: {
+              type: 'time',
+              boundaryGap: false,
+            },
+            yAxis: {
+              type: 'value',
+              boundaryGap: [0, '100%'],
+            },
+            series,
+          });
+        },
       });
-      const handleClick = () => {
+
+      const chartRef = ref<HTMLDivElement | null>(null);
+      const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
+
+      const openHistoryModal = async () => {
         openModal(true);
-      };
 
+        // 收集参数
+        const dataArray: any[] = [];
+        const startTs = Date.now() - 86400000; //最近一天
+        const endTs = Date.now();
+        // 发送请求
+        keys = await getDeviceDataKeys(entityId.value);
+        const res = await getDeviceHistoryInfo({
+          entityId: entityId.value,
+          keys: keys.join(),
+          startTs,
+          endTs,
+          interval: 7200000, //间隔两小时
+          agg: 'AVG',
+        });
+        // 处理数据
+        for (const key in res) {
+          for (const item1 of res[key]) {
+            let { ts, value } = item1;
+            const time = moment(ts).format('YYYY-MM-DD HH:mm:ss');
+            value = Number(value).toFixed(2);
+            dataArray.push([time, value, key]);
+          }
+        }
+        const series: any = keys.map((item) => {
+          return {
+            name: item,
+            type: 'line',
+            stack: 'Total',
+            data: dataArray.filter((item1) => item1[2] === item),
+          };
+        });
+        // 设置数据;
+        setOptions({
+          tooltip: {
+            trigger: 'axis',
+          },
+          legend: {
+            data: keys,
+          },
+          grid: {
+            left: '3%',
+            right: '4%',
+            bottom: '3%',
+            containLabel: true,
+          },
+          dataZoom: [
+            {
+              type: 'inside',
+              start: 0,
+              end: 50,
+            },
+            {
+              start: 0,
+              end: 20,
+            },
+          ],
+          xAxis: {
+            type: 'time',
+            boundaryGap: false,
+          },
+          yAxis: {
+            type: 'value',
+            boundaryGap: [0, '100%'],
+          },
+          series,
+        });
+
+        setFieldsValue({
+          endTs: 86400000,
+          interval: 7200000,
+          agg: 'AVG',
+        });
+      };
+      const cancelHistoryModal = () => {
+        resetFields();
+        setOptions({});
+      };
+      onMounted(() => {
+        initMap();
+        (window as any).openHistoryModal = openHistoryModal;
+      });
       return {
         wrapRef,
         registerTable,
         deviceRowClick,
         DeviceState,
-        handleClick,
         registerModal,
         registerForm,
+        chartRef,
+        cancelHistoryModal,
       };
     },
   });
 </script>
-
 <style scoped>
   .wrapper {
     position: relative;
   }
-  .active {
-    background-color: #fff;
-  }
   .right-wrap {
     padding-top: 10px;
     width: 22%;

@@ -13,32 +13,35 @@
             light:border-#F2F2F5
           "
         >
-          <img :src="item.imgUrl" style="width: 90px; height: 90px" />
+          <img :src="item.imgUrl" style="width: 5rem; height: 5rem" />
           <div class="growCardItem-right">
             <div class="flex justify-between ml-3">
-              <div style="font-size: 26px; color: #333">{{ item.value }}</div>
-              <img src="../../../../assets/images/tip.png" style="width: 20px; height: 20px" />
+              <div style="font-size: 1.625rem; color: #333">{{ item.value }}</div>
+              <img src="../../../../assets/images/tip.png" style="width: 1.4rem; height: 1.4rem" />
             </div>
             <div class="ml-3">{{ item.title }}</div>
-            <div class="ml-1.5 mt-3 flex flex-nowrap" style="width: 240px" v-if="item.offLine">
+            <div class="ml-1.5 mt-3 flex flex-nowrap" style="width: 15rem" v-if="item.offLine">
               <div class="count">
                 <img
                   src="../../../../assets/images/online.png"
-                  style="width: 10px; height: 10px; margin-right: 4px"
+                  style="width: 0.6rem; height: 0.6rem"
+                  class="mr-1"
                 />
                 在线 {{ item.onLine }}
               </div>
               <div class="count">
                 <img
                   src="../../../../assets/images/offline.png"
-                  style="width: 10px; height: 10px; margin-right: 4px"
+                  style="width: 0.6rem; height: 0.6rem"
+                  class="mr-1"
                 />
                 离线 {{ item.offLine }}
               </div>
               <div class="count">
                 <img
                   src="../../../../assets/images/inactive.png"
-                  style="width: 10px; height: 10px; margin-right: 4px"
+                  style="width: 0.6rem; height: 0.6rem"
+                  class="mr-1"
                 />
                 未激活 {{ item.inactive }}
               </div>
@@ -56,24 +59,24 @@
 
 <style scoped lang="less">
   .growCardItem {
-    height: 179px;
+    height: 11.187rem;
     color: #666;
     .growCardItem-top {
       display: flex;
-      margin: 20px;
-      padding-bottom: 10px;
+      margin: 1.25rem;
+      padding-bottom: 0.625rem;
       .growCardItem-right {
-        width: 300px;
+        width: 18.75rem;
         .count {
           display: flex;
-          font-size: 12px;
+          font-size: 0.75rem;
           align-items: center;
-          margin-left: 8px;
+          margin-left: 0.5rem;
         }
       }
     }
     .growCardItem-bottom {
-      margin-left: 20px;
+      margin-left: 1.25rem;
     }
   }
 </style>

@@ -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({
@@ -54,25 +54,24 @@
         dataSource: state.recordList,
       });
 
-      const { send } = useWebSocket(state.server, {
+      const { send, close } = useWebSocket(state.server, {
         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 = [];
+          console.log('来新消息了', '---data---', data);
+          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);
             }
@@ -80,9 +79,9 @@
           newArray.forEach((item) => {
             let flag = false;
             state.recordList.forEach((item1) => {
-              if (item.key === item1.key) {
-                item1.time = item.time;
+              if (item1.key === item.key) {
                 item1.value = item.value;
+                item1.time = item.time;
                 flag = true;
               }
             });
@@ -91,7 +90,10 @@
             }
           });
         },
-        onDisconnected() {},
+        onDisconnected() {
+          console.log('断开连接了');
+          close();
+        },
         onError() {
           createMessage.error('webSocket连接超时,请联系管理员');
         },