图表动态数据修改

src/api/device/index.ts

@@ -117,6 +117,19 @@ export function getDeviceInfos(data: any) {
   });
 }
 
+/**
+ * 获取轮询折线图数据
+ *
+ * @param data
+ */
+export function getDeviceInfosPolling(data: any) {
+  return request({
+    url: '/dc/dcDeviceEcharts/device/realtime/data',
+    method: 'post',
+    data: data
+  });
+}
+
 /**
  * 天气数据图表
  *

src/types/auto-imports.d.ts

@@ -6,7 +6,6 @@ declare global {
   const ElMessage: typeof import('element-plus/es')['ElMessage']
   const ElMessageBox: typeof import('element-plus/es')['ElMessageBox']
   const ElNotification: typeof import('element-plus/es')['ElNotification']
-  const NEllipsis: typeof import('naive-ui')['NEllipsis']
   const asyncComputed: typeof import('@vueuse/core')['asyncComputed']
   const autoResetRef: typeof import('@vueuse/core')['autoResetRef']
   const computed: typeof import('vue')['computed']
@@ -277,7 +276,6 @@ declare module 'vue' {
     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']>
-    readonly NEllipsis: UnwrapRef<typeof import('naive-ui')['NEllipsis']>
     readonly asyncComputed: UnwrapRef<typeof import('@vueuse/core')['asyncComputed']>
     readonly autoResetRef: UnwrapRef<typeof import('@vueuse/core')['autoResetRef']>
     readonly computed: UnwrapRef<typeof import('vue')['computed']>

src/views/data-visual/components/hxPress.vue

@@ -1011,7 +1011,8 @@ const options = {
       color: '#fff'
     },
     axisPointer: {
-      type: 'cross'
+      type: 'cross',
+      animation: false
     }
   },
   legend: {
@@ -1043,7 +1044,9 @@ const options = {
   ],
   xAxis: {
     type: 'time',
-    boundaryGap: false,
+    splitLine: {
+      show: false
+    },
     axisLabel: {
       show: true,
       color: '#D1E1FF'
@@ -1101,7 +1104,7 @@ function getDevicePolling() {
         timer.value = setTimeout(async () => {
           await (timer.value && clearTimeout(timer.value));
           await getDevicePolling();
-        }, 10000);
+        }, 5000);
       }
       if (res.data.additionalInfo != null) {
         currentEndTime.value = res.data.additionalInfo.endTime;
@@ -1111,6 +1114,7 @@ function getDevicePolling() {
         res.data.mainInfos.forEach((newObj: any) => {
           if (originalObj.name === newObj.name) {
             newObj.data.map((item: any) => {
+              originalObj.data.shift();
               originalObj.data.push(item);
             });
           }
@@ -1187,7 +1191,7 @@ function init(data: any) {
       name: item.name,
       type: 'line',
       smooth: true,
-      symbol: 'none',
+      showSymbol: false,
       yAxisIndex: item.index,
       data: item.data,
       tooltip: {

src/views/data-visual/components/hxTemp.vue

@@ -505,7 +505,8 @@ const options = {
       color: '#fff'
     },
     axisPointer: {
-      type: 'cross'
+      type: 'cross',
+      animation: false
     }
   },
   legend: {
@@ -537,7 +538,9 @@ const options = {
   ],
   xAxis: {
     type: 'time',
-    boundaryGap: false,
+    splitLine: {
+      show: false
+    },
     axisLabel: {
       show: true,
       color: '#D1E1FF'
@@ -595,7 +598,7 @@ function getDevicePolling() {
         timer.value = setTimeout(async () => {
           await (timer.value && clearTimeout(timer.value));
           await getDevicePolling();
-        }, 10000);
+        }, 5000);
       }
       if (res.data.additionalInfo != null) {
         currentEndTime.value = res.data.additionalInfo.endTime;
@@ -605,6 +608,7 @@ function getDevicePolling() {
         res.data.mainInfos.forEach((newObj: any) => {
           if (originalObj.name === newObj.name) {
             newObj.data.map((item: any) => {
+              originalObj.data.shift();
               originalObj.data.push(item);
             });
           }
@@ -681,7 +685,7 @@ function init(data: any) {
       name: item.name,
       type: 'line',
       smooth: true,
-      symbol: 'none',
+      showSymbol: false,
       yAxisIndex: item.index,
       data: item.data,
       tooltip: {

src/views/details/index.vue

@@ -237,6 +237,7 @@ import {
   getParams,
   getPortions,
   getDeviceInfos,
+  getDeviceInfosPolling,
   weatherHoursList
 } from '@/api/device/index';
 import { partitionVo, classVo, parameterVo, seriesVo, mainInfoVo } from '@/api/device/types';
@@ -346,7 +347,8 @@ const options = {
   tooltip: {
     trigger: 'axis',
     axisPointer: {
-      type: 'cross'
+      type: 'cross',
+      animation: false
     }
   },
   legend: {
@@ -383,15 +385,17 @@ const options = {
   dataZoom: [
     {
       type: 'inside',
-      startValue: '0'
+      startValue: 0
     },
     {
-      startValue: '0'
+      startValue: 0
     }
   ],
   xAxis: {
     type: 'time',
-    boundaryGap: false
+    splitLine: {
+      show: false
+    }
   },
   yAxis: [{}],
   series: [{}]
@@ -880,7 +884,7 @@ function getweatherHoursList() {
 
 const debounceClick = debounce(() => {
   getDevicePolling();
-}, 360000);
+}, 10000);
 
 function getDevicePolling() {
   //轮询获取折线图数据
@@ -891,13 +895,13 @@ function getDevicePolling() {
   params.stepType = '3';
   params.queryType = 2;
   console.log(params);
-  getDeviceInfos(params).then((res: any) => {
+  getDeviceInfosPolling(params).then((res: any) => {
     if (res.code === 200) {
       if (isCurrentRoute.value) {
         timer.value = setTimeout(async () => {
           await (timer.value && clearTimeout(timer.value));
           await getDevicePolling();
-        }, 360000);
+        }, 5000);
       }
       if (res.data.additionalInfo != null) {
         currentEndTime.value = res.data.additionalInfo.endTime;
@@ -907,6 +911,7 @@ function getDevicePolling() {
         res.data.mainInfos.forEach((newObj: any) => {
           if (originalObj.name === newObj.name) {
             newObj.data.map((item: any) => {
+              originalObj.data.shift();
               originalObj.data.push(item);
             });
           }
@@ -951,6 +956,10 @@ function init(data: any) {
     console.log('offsetData--', offsetData);
     options.yAxis.push({
       type: 'value',
+      boundaryGap: [0, '100%'],
+      splitLine: {
+        show: false
+      },
       name: `${item.name}(${item.unit})`,
       position: `${index === 0 ? 'left' : 'right'}`,
       alignTicks: true,
@@ -982,7 +991,7 @@ function init(data: any) {
       name: item.name,
       type: 'line',
       smooth: true,
-      symbol: 'none',
+      showSymbol: false,
       yAxisIndex: item.index,
       data: item.data,
       tooltip: {