曲线图表动态数据修改

src/directive/permission/index.ts

@@ -8,6 +8,7 @@ export const hasPerm: Directive = {
   mounted(el: HTMLElement, binding: DirectiveBinding) {
     // 「超级管理员」拥有所有的按钮权限
     const { roles, perms } = useUserStoreHook();
+    debugger;
     if (roles.includes('ROOT')) {
       return true;
     }
@@ -17,6 +18,7 @@ export const hasPerm: Directive = {
       const requiredPerms = value; // DOM绑定需要的按钮权限标识
 
       const hasPerm = perms?.some(perm => {
+        debugger;
         return requiredPerms.includes(perm);
       });
 
@@ -24,9 +26,7 @@ export const hasPerm: Directive = {
         el.parentNode && el.parentNode.removeChild(el);
       }
     } else {
-      throw new Error(
+      throw new Error("need perms! Like v-has-perm=\"['sys:user:add','sys:user:edit']\"");
-        "need perms! Like v-has-perm=\"['sys:user:add','sys:user:edit']\""
-      );
     }
   }
 };

src/types/auto-imports.d.ts

@@ -2,7 +2,6 @@
 export {}
 declare global {
   const EffectScope: typeof import('vue')['EffectScope']
-  const ElForm: typeof import('element-plus/es')['ElForm']
   const ElMessage: typeof import('element-plus/es')['ElMessage']
   const ElMessageBox: typeof import('element-plus/es')['ElMessageBox']
   const ElNotification: typeof import('element-plus/es')['ElNotification']
@@ -273,7 +272,6 @@ import { UnwrapRef } from 'vue'
 declare module 'vue' {
   interface ComponentCustomProperties {
     readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']>
-    readonly ElForm: UnwrapRef<typeof import('element-plus/es')['ElForm']>
     readonly ElMessage: UnwrapRef<typeof import('element-plus/es')['ElMessage']>
     readonly ElMessageBox: UnwrapRef<typeof import('element-plus/es')['ElMessageBox']>
     readonly ElNotification: UnwrapRef<typeof import('element-plus/es')['ElNotification']>

src/utils/index.ts

@@ -34,6 +34,35 @@ export function numberRandom(min: number, max: number) {
   return Math.floor(Math.random() * (max - min + 1) + min);
 }
 
+/**
+ * 防抖
+ */
+export function debounce(handle, delay) {
+  var timer = null;
+  return function () {
+    var _self = this,
+      _args = arguments;
+    clearTimeout(timer);
+    timer = setTimeout(function () {
+      handle.apply(_self, _args);
+    }, delay);
+  };
+}
+
+/**
+ * 节流
+ */
+export function throttle(handler, wait) {
+  var lastTime = 0;
+  return function (e) {
+    var nowTime = new Date().getTime();
+    if (nowTime - lastTime > wait) {
+      handler.apply(this, arguments);
+      lastTime = nowTime;
+    }
+  };
+}
+
 /**
  * 值之间的过度
  * @param {number} num 需要过度的数值
@@ -94,6 +123,31 @@ export function diffDays(date: any, otherDate: any) {
   return Math.ceil(Math.abs(date - otherDate) / (1000 * 60 * 60 * 24));
 }
 
+/**
+ * 计算当前之后一段时间
+ * @param {Date} currentTime 当前时间
+ * @param {string} type 类型：1:日,2:时,3:分,4:秒,5:月,6:年
+ */
+export const endTime = (currentTime: any, type: string) => {
+  const today = new Date(currentTime);
+  switch (type) {
+    case '1':
+      return new Date(today.getTime() + 24 * 60 * 60 * 1000);
+    case '2':
+      return new Date(today.getTime() + 60 * 60 * 1000);
+    case '3':
+      return new Date(today.getTime() + 60 * 1000);
+    case '4':
+      return new Date(today.getTime() + 1000);
+    case '5':
+      return new Date(today.getTime() + 30 * 24 * 60 * 60 * 1000);
+    case '6':
+      return new Date(today.getTime() + 365 * 24 * 60 * 60 * 1000);
+    default:
+      return today;
+  }
+};
+
 /**
  * 确认一个数字是奇数还是偶数
  * @param {number} num 数字

src/views/details/index.vue

@@ -81,7 +81,7 @@
             clearable
             collapse-tags
             collapse-tags-tooltip
-            placeholder="请选择分类"
+            placeholder="请选择参数分类"
             style="width: 150px"
             @change="classChange"
           >
@@ -96,7 +96,7 @@
             clearable
             collapse-tags
             collapse-tags-tooltip
-            placeholder="请选择参数"
+            placeholder="请选择曲线参数"
             @change="parameterChange"
           >
             <el-option
@@ -136,7 +136,7 @@
     <el-card class="echart" shadow="always">
       <div class="sidebar">
         <h3>换热站</h3>
-        <el-menu default-active="" class="deviceMenu" @select="handleSelect" @open="handleOpen">
+        <el-menu :default-active="filterForm.deviceUuid" class="deviceMenu" @select="deviceSelect" @open="deviceOpen">
           <el-menu-item :index="item.centerDeviceCode" v-for="item in deviceData" :key="item.centerDeviceCode">
             <i class="iconfont icon-station" />
             <el-tooltip class="box-item" effect="dark" :content="item.deviceName" placement="right-start">
@@ -146,7 +146,7 @@
         </el-menu>
       </div>
       <div class="comparisonInfo">
-        <div ref="stackedRef" class="stackedLine">暂无数据</div>
+        <div ref="stackedRef" id="stackedLine" class="stackedLine">暂无数据</div>
       </div>
       <div class="sidebar">
         <div class="paramList">
@@ -165,24 +165,29 @@ import * as echarts from 'echarts';
 import { Ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { useDateFormat, useNow } from '@vueuse/core';
-import { randomColor } from '@/utils/index';
+import { randomColor, endTime, debounce } from '@/utils/index';
 const stackedRef: Ref<HTMLElement | any> = ref(null);
 import type { FormInstance, FormRules } from 'element-plus';
 import { ReturnDownBack } from '@vicons/ionicons5';
 
-import { getAllDevices, getClass, getParams, getPortions, getDeviceInfos } from '@/api/device/index';
+import { getAllDevices, getDevices, getClass, getParams, getPortions, getDeviceInfos } from '@/api/device/index';
 import { partitionVo, classVo, parameterVo, seriesVo, mainInfoVo } from '@/api/device/types';
 
 const router = useRouter();
 const route = useRoute();
 const currentTime = useDateFormat(useNow(), 'YYYY-MM-DD');
+const currentEndTime = ref();
+// const nowTime = ref();
+const timer = ref();
+const isCurrentRoute = ref(true);
 // const currentSecond = useDateFormat(useNow(), 'YYYY-MM-DD HH:mm:ss');
 
 const searchRef = ref<FormInstance>();
 // const defaultTime: [Date, Date] = [new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 12, 0, 0)];
 // const multipleLimit = ref(0);
 // const parameterLimit = ref(0);
-// const deptId = ref(0);
+const deptId = ref(0);
+const keyupType = ref();
 // const seriesData = ref<seriesVo[]>();
 const daysData: any = reactive([
   {
@@ -203,6 +208,7 @@ const daysData: any = reactive([
   }
 ]);
 const searchForm: any = reactive({
+  startTime: '',
   date: '',
   time: '',
   step: 1,
@@ -219,7 +225,8 @@ const filterForm = reactive({
   deviceUuid: '',
   paramCode: '',
   partion: '',
-  showZero: false
+  showZero: false,
+  queryType: 1 //1:正常查询，2:实时查询
 });
 const rules = reactive<FormRules>({
   // device: [
@@ -232,7 +239,7 @@ const rules = reactive<FormRules>({
   // parameter: [
   //   {
   //     required: true,
-  //     message: '请选择参数',
+  //     message: '请选择曲线参数',
   //     trigger: 'change'
   //   }
   // ]
@@ -315,10 +322,301 @@ const options = {
   series: [{}]
 };
 
+const options2 = {
+  color: colors,
+  title: {
+    text: '单设备多参数'
+  },
+  tooltip: {
+    trigger: 'axis'
+    //   position: function (pt: any) {
+    //     return [pt[0], '10%'];
+    //   }
+  },
+  legend: {
+    data: ['瞬时流量', '瞬时热量', '累计热量']
+  },
+  grid: {
+    top: '80',
+    left: '100',
+    right: '150',
+    bottom: '50',
+    containLabel: true
+  },
+  toolbox: {
+    feature: {
+      restore: {}
+    }
+  },
+  xAxis: {
+    type: 'time',
+    boundaryGap: false
+  },
+  yAxis: [
+    {
+      type: 'value',
+      name: '瞬时流量(m³/h)',
+      position: 'left',
+      alignTicks: true,
+      offset: 0,
+      scale: true, //自适应
+      minInterval: 1, //最小间距
+      nameTextStyle: {
+        fontSize: 12,
+        padding: [0, 0, 0, 0] //name文字位置 对应 上右下左
+      },
+      axisTick: {
+        // 轴刻度
+        show: false
+      },
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: colors[0]
+        }
+      }
+    },
+    {
+      type: 'value',
+      name: '瞬时热量(JG/h)',
+      position: 'right',
+      alignTicks: true,
+      offset: 0,
+      scale: true, //自适应
+      minInterval: 1, //最小间距
+      nameTextStyle: {
+        fontSize: 12,
+        padding: [0, 0, 0, 0] //name文字位置 对应 上右下左
+      },
+      axisTick: {
+        // 轴刻度
+        show: false
+      },
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: colors[1]
+        }
+      }
+    }
+  ],
+  dataZoom: [
+    {
+      type: 'inside',
+      startValue: '0'
+      // start: 0,
+      // end: 20
+    },
+    {
+      startValue: '0'
+      //   start: 0,
+      //   end: 20
+    }
+  ],
+  series: [
+    {
+      name: '瞬时流量',
+      type: 'line',
+      smooth: true,
+      symbol: 'none',
+      yAxisIndex: 0,
+      data: [
+        ['2023-10-01 08:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-01 09:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-01 10:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-01 11:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-01 12:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-01 13:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-01 14:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-01 15:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-02 08:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-02 09:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-02 10:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-02 11:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-02 12:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-02 13:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-02 14:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-02 15:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-03 08:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-03 09:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-03 10:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-03 11:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-03 12:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-03 13:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-03 14:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-03 15:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-04 08:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-04 09:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-04 10:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-04 11:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-04 12:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-04 13:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-04 14:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-04 15:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-05 08:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-05 09:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-05 10:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-05 11:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-05 12:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-05 13:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-05 14:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-05 15:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-06 08:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-06 09:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-06 10:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-06 11:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-06 12:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-06 13:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-06 14:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-06 15:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-07 08:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-07 09:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-07 10:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-07 11:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-07 12:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-07 13:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-07 14:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-07 15:00:00', Math.round(Math.random() * 500)]
+      ]
+    },
+    {
+      name: '瞬时热量',
+      type: 'line',
+      smooth: true,
+      symbol: 'none',
+      yAxisIndex: 1,
+      data: [
+        ['2023-10-01 08:00:00', Math.round(Math.random() * 100)],
+        ['2023-10-01 09:00:00', Math.round(Math.random() * 100)],
+        ['2023-10-01 10:00:00', Math.round(Math.random() * 100)],
+        ['2023-10-01 11:00:00', Math.round(Math.random() * 100)],
+        ['2023-10-01 12:00:00', Math.round(Math.random() * 100)],
+        ['2023-10-01 13:00:00', Math.round(Math.random() * 100)],
+        ['2023-10-01 14:00:00', Math.round(Math.random() * 100)],
+        ['2023-10-01 15:00:00', Math.round(Math.random() * 100)],
+        ['2023-10-02 08:00:00', Math.round(Math.random() * 100)],
+        ['2023-10-02 09:00:00', Math.round(Math.random() * 100)],
+        ['2023-10-02 10:00:00', Math.round(Math.random() * 100)],
+        ['2023-10-02 11:00:00', Math.round(Math.random() * 100)],
+        ['2023-10-02 12:00:00', Math.round(Math.random() * 100)],
+        ['2023-10-02 13:00:00', Math.round(Math.random() * 100)],
+        ['2023-10-02 14:00:00', Math.round(Math.random() * 100)],
+        ['2023-10-02 15:00:00', Math.round(Math.random() * 100)],
+        ['2023-10-03 08:00:00', Math.round(Math.random() * 100)],
+        ['2023-10-03 09:00:00', Math.round(Math.random() * 100)],
+        ['2023-10-03 10:00:00', Math.round(Math.random() * 100)],
+        ['2023-10-03 11:00:00', Math.round(Math.random() * 100)],
+        ['2023-10-03 12:00:00', Math.round(Math.random() * 100)],
+        ['2023-10-03 13:00:00', Math.round(Math.random() * 100)],
+        ['2023-10-03 14:00:00', Math.round(Math.random() * 100)],
+        ['2023-10-03 15:00:00', Math.round(Math.random() * 100)],
+        ['2023-10-04 08:00:00', Math.round(Math.random() * 100)],
+        ['2023-10-04 09:00:00', Math.round(Math.random() * 100)],
+        ['2023-10-04 10:00:00', Math.round(Math.random() * 100)],
+        ['2023-10-04 11:00:00', Math.round(Math.random() * 100)],
+        ['2023-10-04 12:00:00', Math.round(Math.random() * 100)],
+        ['2023-10-04 13:00:00', Math.round(Math.random() * 100)],
+        ['2023-10-04 14:00:00', Math.round(Math.random() * 100)],
+        ['2023-10-04 15:00:00', Math.round(Math.random() * 100)],
+        ['2023-10-05 08:00:00', Math.round(Math.random() * 100)],
+        ['2023-10-05 09:00:00', Math.round(Math.random() * 100)],
+        ['2023-10-05 10:00:00', Math.round(Math.random() * 100)],
+        ['2023-10-05 11:00:00', Math.round(Math.random() * 100)],
+        ['2023-10-05 12:00:00', Math.round(Math.random() * 100)],
+        ['2023-10-05 13:00:00', Math.round(Math.random() * 100)],
+        ['2023-10-05 14:00:00', Math.round(Math.random() * 100)],
+        ['2023-10-05 15:00:00', Math.round(Math.random() * 100)],
+        ['2023-10-06 08:00:00', Math.round(Math.random() * 100)],
+        ['2023-10-06 09:00:00', Math.round(Math.random() * 100)],
+        ['2023-10-06 10:00:00', Math.round(Math.random() * 100)],
+        ['2023-10-06 11:00:00', Math.round(Math.random() * 100)],
+        ['2023-10-06 12:00:00', Math.round(Math.random() * 100)],
+        ['2023-10-06 13:00:00', Math.round(Math.random() * 100)],
+        ['2023-10-06 14:00:00', Math.round(Math.random() * 100)],
+        ['2023-10-06 15:00:00', Math.round(Math.random() * 100)],
+        ['2023-10-07 08:00:00', Math.round(Math.random() * 100)],
+        ['2023-10-07 09:00:00', Math.round(Math.random() * 100)],
+        ['2023-10-07 10:00:00', Math.round(Math.random() * 100)],
+        ['2023-10-07 11:00:00', Math.round(Math.random() * 100)],
+        ['2023-10-07 12:00:00', Math.round(Math.random() * 100)],
+        ['2023-10-07 13:00:00', Math.round(Math.random() * 100)],
+        ['2023-10-07 14:00:00', Math.round(Math.random() * 100)],
+        ['2023-10-07 15:00:00', Math.round(Math.random() * 100)]
+      ]
+    },
+    {
+      name: '累计热量',
+      type: 'line',
+      smooth: true,
+      symbol: 'none',
+      yAxisIndex: 1,
+      data: [
+        ['2023-10-01 08:00:00', Math.round(Math.random() * 600)],
+        ['2023-10-01 09:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-01 10:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-01 11:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-01 12:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-01 13:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-01 14:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-01 15:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-02 08:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-02 09:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-02 10:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-02 11:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-02 12:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-02 13:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-02 14:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-02 15:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-03 08:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-03 09:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-03 10:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-03 11:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-03 12:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-03 13:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-03 14:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-03 15:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-04 08:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-04 09:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-04 10:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-04 11:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-04 12:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-04 13:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-04 14:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-04 15:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-05 08:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-05 09:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-05 10:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-05 11:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-05 12:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-05 13:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-05 14:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-05 15:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-06 08:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-06 09:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-06 10:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-06 11:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-06 12:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-06 13:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-06 14:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-06 15:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-07 08:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-07 09:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-07 10:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-07 11:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-07 12:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-07 13:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-07 14:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-07 15:00:00', Math.round(Math.random() * 500)]
+      ]
+    }
+  ]
+};
+
 onMounted(() => {
-  // deptId.value = sessionStorage.getItem('deptId') === null ? 0 : Number(sessionStorage.getItem('deptId'));
+  deptId.value = sessionStorage.getItem('deptId') === null ? 0 : Number(sessionStorage.getItem('deptId'));
   searchForm.date = currentTime.value;
   searchForm.time = '00:00:00';
+  searchForm.startTime = currentTime.value + ' 00:00:00';
   filterForm.startTime = currentTime.value + ' 00:00:00';
   // searchForm.time = [currentTime.value + ' 00:00:00', currentSecond.value];
   // filterForm.startTime = currentTime.value + ' 00:00:00';
@@ -326,29 +624,24 @@ onMounted(() => {
   getDevice();
   getParam();
   getPortion();
+  // const chart = echarts.init(document.getElementById("stackedLine"));
+  // chart.setOption(options2);
 });
 
-const handleSelect = (key: string, keyPath: string[], item: object) => {
+onUnmounted(() => {
+  //组件注销前清除setTimeout
+  if (timer.value !== null || timer.value !== undefined) {
+    clearTimeout(timer.value);
+  }
+});
+
+const deviceSelect = (key: string, keyPath: string[], item: object) => {
   //点击换热站列表
   console.log(key, keyPath, item);
   filterForm.deviceUuid = key;
-  if (filterForm.startTime === '') {
+  verifyInfo();
-    ElMessage({
-      message: '请选择时间',
-      type: 'warning'
-    });
-    return;
-  }
-  if (filterForm.paramCode === '') {
-    ElMessage({
-      message: '请选择参数',
-      type: 'warning'
-    });
-    return;
-  }
-  getDeviceInfo();
 };
-const handleOpen = (key: string, keyPath: string[]) => {
+const deviceOpen = (key: string, keyPath: string[]) => {
   console.log(key, keyPath);
   filterForm.deviceUuid = key;
 };
@@ -361,12 +654,17 @@ function lineClick() {
 document.addEventListener('keyup', e => {
   //监听键盘事件
   console.log('按键:', e.key);
-  if (e.key === 'ArrowUp') {
+  keyupType.value = e.key;
-    keyClick('0');
+  keyClickDebounce();
-  } else if (e.key === 'ArrowDown') {
+  // if (e.key === 'ArrowUp') {
-    keyClick('1');
+  //   // keyClick('0');
-  }
+  // } else if (e.key === 'ArrowDown') {
+  //   keyClick('1');
+  // }
 });
+const keyClickDebounce = debounce(() => {
+  keyClick(keyupType.value);
+}, 500);
 function keyClick(res: string) {
   //键盘事件
   if (filterForm.startTime === '') {
@@ -374,40 +672,38 @@ function keyClick(res: string) {
       message: '请选择时间',
       type: 'warning'
     });
-    return;
+  } else if (filterForm.paramCode === '') {
-  }
-  if (filterForm.paramCode === '') {
     ElMessage({
-      message: '请选择参数',
+      message: '请选择曲线参数',
       type: 'warning'
     });
-    return;
+  } else {
-  }
+    const device = filterForm.deviceUuid;
-  const device = searchForm.device;
+    const deviceDataValue = deviceData.value;
-  const deviceDataValue = deviceData.value;
+    // console.log('已选设备:', filterForm.deviceUuid);
-  console.log('已选设备:', searchForm.device);
+    if (deviceDataValue?.length != 0) {
-  if (deviceDataValue?.length != 0) {
+      deviceDataValue?.map((item: deviceVo, index: number) => {
-    deviceDataValue?.map((item: deviceVo, index: number) => {
+        // console.log('遍历设备:', item, index);
-      console.log('遍历设备:', item, index);
+        if (res === 'ArrowUp') {
-      if (res === '0') {
+          //上一个
-        //上一个
+          if (device === item.centerDeviceCode && index != 0) {
-        if (device === item.centerDeviceCode && index != 0) {
+            filterForm.deviceUuid = deviceDataValue[index - 1].centerDeviceCode;
-          searchForm.device = deviceDataValue[index - 1].centerDeviceCode;
+            // filterForm.deviceUuid = filterForm.deviceUuid;
-          filterForm.deviceUuid = searchForm.device;
+            // console.log('当前设备:', filterForm.deviceUuid);
-          console.log('当前设备:', searchForm.device);
+          }
+        } else if (res === 'ArrowDown') {
+          //下一个
+          if (device === item.centerDeviceCode && index + 1 != deviceDataValue?.length) {
+            // console.log('当前设备:', item.deviceName, index);
+            filterForm.deviceUuid = deviceDataValue[index + 1].centerDeviceCode;
+            // filterForm.deviceUuid = filterForm.deviceUuid;
+            // console.log('当前设备:', filterForm.deviceUuid);
+          }
         }
-      } else if (res === '1') {
+      });
-        //下一个
+    }
-        if (device === item.centerDeviceCode && index + 1 != deviceDataValue?.length) {
+    getDeviceInfo();
-          console.log('当前设备:', item.deviceName, index);
-          searchForm.device = deviceDataValue[index + 1].centerDeviceCode;
-          filterForm.deviceUuid = searchForm.device;
-          console.log('当前设备:', searchForm.device);
-        }
-      }
-    });
   }
-  getDeviceInfo();
 }
 
 function showZeroChange() {
@@ -418,8 +714,8 @@ function showZeroChange() {
 
 function getDevice() {
   //获取设备
-  // const params = deptId.value;
+  const params = deptId.value;
-  getAllDevices().then((res: any) => {
+  getDevices(params).then((res: any) => {
     if (res.code === 200) {
       deviceData.value = res.data;
     }
@@ -446,14 +742,67 @@ function getPortion() {
 function getDeviceInfo() {
   //获取折线图数据
   const params = filterForm;
+  params.startTime = searchForm.startTime;
+  params.step = searchForm.step;
+  params.stepType = searchForm.stepType;
+  params.queryType = 1;
   getDeviceInfos(params).then((res: any) => {
     if (res.code === 200) {
       mainInfoList.value = res.data.mainInfos;
+      if (res.data.additionalInfo != null) {
+        currentEndTime.value = res.data.additionalInfo.endTime;
+        debounceClick();
+      }
       init(res.data);
     }
   });
 }
 
+const debounceClick = debounce(() => {
+  getDeviceInfoss();
+}, 360000);
+
+function getDeviceInfoss() {
+  //轮询获取折线图数据
+  console.log(useDateFormat(new Date(), 'YYYY-MM-DD HH:mm:ss').value);
+  const params = filterForm;
+  params.startTime = currentEndTime.value;
+  params.step = 6;
+  params.stepType = '3';
+  params.queryType = 2;
+  console.log(params);
+  getDeviceInfos(params).then((res: any) => {
+    if (res.code === 200) {
+      if (isCurrentRoute.value) {
+        timer.value = setTimeout(async () => {
+          await (timer.value && clearTimeout(timer.value));
+          await getDeviceInfoss();
+        }, 360000);
+      }
+      if (res.data.additionalInfo != null) {
+        currentEndTime.value = res.data.additionalInfo.endTime;
+        console.log(currentEndTime.value, res.data.mainInfos);
+      }
+      options.series.forEach((originalObj: any) => {
+        res.data.mainInfos.forEach((newObj: any) => {
+          if (originalObj.name === newObj.name) {
+            newObj.data.map((item: any) => {
+              originalObj.data.push(item);
+            });
+          }
+        });
+      });
+      console.log(options.series);
+      const chart = echarts.init(document.getElementById('stackedLine'));
+      chart.setOption(options);
+      // mainInfoList.value = res.data.mainInfos;
+      // init(res.data);
+    } else {
+      clearTimeout(timer.value);
+    }
+  });
+}
+
 function init(data: any) {
   //折线图实例化
   options.yAxis = [];
@@ -463,7 +812,7 @@ function init(data: any) {
     options.title.text = '暂无数据';
     options.title.x = 'center';
     options.title.y = 'center';
-    const chart = echarts.init(stackedRef.value);
+    const chart = echarts.init(document.getElementById('stackedLine'));
     chart.clear();
     chart.resize();
     console.log('options--', options);
@@ -514,7 +863,7 @@ function init(data: any) {
       data: item.data
     });
   });
-  const chart = echarts.init(stackedRef.value);
+  const chart = echarts.init(document.getElementById('stackedLine'));
   chart.clear();
   chart.resize();
   console.log('options--', options);
@@ -534,15 +883,29 @@ function init(data: any) {
 // }
 function dateChange(res: any) {
   //日期选择
-  console.log('date--', res, searchForm.date);
+  // console.log('date--', res, searchForm.date);
-  filterForm.startTime = res + ' ' + searchForm.time;
+  if (res === null) {
-  console.log('date--', filterForm.startTime);
+    searchForm.startTime = '';
+    filterForm.startTime = '';
+  } else {
+    searchForm.startTime = res + ' ' + searchForm.time;
+    filterForm.startTime = res + ' ' + searchForm.time;
+    verifyInfo();
+    // console.log('date--', filterForm.startTime);
+  }
 }
 function timeChange(res: any) {
   //时间选择
-  console.log('time--', res, searchForm.time);
+  if (searchForm.date === null) {
-  filterForm.startTime = searchForm.date + ' ' + res;
+    searchForm.startTime = '';
-  console.log('time--', filterForm.startTime);
+    filterForm.startTime = '';
+  } else {
+    // console.log('time--', res, searchForm.time);
+    searchForm.startTime = searchForm.date + ' ' + res;
+    filterForm.startTime = searchForm.date + ' ' + res;
+    verifyInfo();
+    // console.log('time--', filterForm.startTime);
+  }
 }
 function stepChange(num: any) {
   //时间长度
@@ -551,10 +914,12 @@ function stepChange(num: any) {
 function stepTypeChange(value: string) {
   //时间长度
   filterForm.stepType = value;
+  verifyInfo();
 }
 function classChange(value: string) {
   //分类选择确认
   searchForm.parameter = [];
+  filterForm.paramCode = '';
   parameterData.value = [];
   classData.value?.map((res: any) => {
     if (value === res.setId) {
@@ -568,16 +933,40 @@ function classChange(value: string) {
       console.log('paramCode--', filterForm.paramCode);
     }
   });
+  verifyInfo();
 }
 function parameterChange(value: any) {
   //参数选择确认
   // parameterLimit.value = value.length <= 1 ? 0 : 1;
+  filterForm.paramCode = '';
   filterForm.paramCode = value.toString();
-  console.log('paramCode--', filterForm.paramCode);
+  // console.log('paramCode--', filterForm.paramCode);
+  verifyInfo();
 }
 function partitionChange(res: string) {
   //分区确认
   filterForm.partion = res;
+  verifyInfo();
+}
+function verifyInfo() {
+  if (filterForm.deviceUuid === '') {
+    ElMessage({
+      message: '请选择换热站',
+      type: 'warning'
+    });
+  } else if (filterForm.startTime === '') {
+    ElMessage({
+      message: '请选择起始时间',
+      type: 'warning'
+    });
+  } else if (filterForm.paramCode === '') {
+    ElMessage({
+      message: '请选择曲线参数',
+      type: 'warning'
+    });
+  } else {
+    getDeviceInfo();
+  }
 }
 // const submitForm = (formEl: FormInstance | undefined) => {
 //   //筛选确认

src/views/monitoring/devicemanage/components/main.vue

@@ -345,7 +345,7 @@ function gitDevice() {
   const params = deviceMenuKey.value;
   getViewInfo(params).then((res: any) => {
     if (res.code === 200) {
-      if (isCurrentRoute) {
+      if (isCurrentRoute.value) {
         timer.value = setTimeout(async () => {
           await (timer.value && clearTimeout(timer.value));
           await gitDevice();

src/views/monitoring/screen/components/main.vue

@@ -134,7 +134,14 @@ import { tableStore } from '@/store/modules/table';
 import mitt from '@/plugins/bus';
 import socket from '@/utils/socket';
 import useStorage from '@/utils/useStorage';
+import { useUserStoreHook } from '@/store/modules/user';
+
 const sessionStorageIns = useStorage('sessionStorage');
+const { perms } = useUserStoreHook();
+const requiredPerms = ['model:device:contrl']; //控制单元格可修改权限
+const controlPerm = perms?.some(perm => {
+  return requiredPerms.includes(perm);
+});
 
 const tableStoreCounter = tableStore();
 // import type { MenuOption } from 'naive-ui'
@@ -430,7 +437,7 @@ const cellDBLClickEvent: VxeTableEvents.CellDblclick<TableVo> = ({ row, column }
   cellRow.value = row;
   cellColumn.value = column;
   cellField.value = cellField;
-  if (cellField.canBeControl === '1') {
+  if (cellField.canBeControl === '1' && controlPerm) {
     modalTitle.value = column.title;
     ///formData.value.url = data.url;
     //formData.value.deviceName = cellField.deviceName;
@@ -454,7 +461,7 @@ const formatRole: VxeColumnPropTypes.Formatter<HeaderVo> = ({ cellValue }) => {
     cellValue.ctrlPro.valueType != 'bool' ? cellValue.val : cellValue.val === 'true' ? '启' : '停'
   }</span><i class="iconfont ${
     cellValue.changeProp === -1 ? 'icon-decline' : cellValue.changeProp === 1 ? 'icon-rise' : ''
-  }" ></i>${cellValue.canBeControl === '1' ? '<i class="iconfont icon-edit-icon"></i>' : ''}`;
+  }" ></i>${cellValue.canBeControl === '1' && controlPerm ? '<i class="iconfont icon-edit-icon"></i>' : ''}`;
   return cellData;
 };