曲线图为空值优化

src/mock/routes.json

@@ -65,7 +65,7 @@
           "component": "data-visual/index",
           "name": "dataVisual",
           "meta": {
-            "title": "换热站",
+            "title": "换热站监控",
             "icon": "document",
             "hidden": false,
             "roles": ["biadmin"],

src/types/auto-imports.d.ts

@@ -2,11 +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']
-  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']
@@ -273,11 +268,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']>
-    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/types/components.d.ts

@@ -9,56 +9,9 @@ declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     Breadcrumb: typeof import('./../components/Breadcrumb/index.vue')['default']
     Button: typeof import('./../components/Widgets/button.vue')['default']
-    ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb']
-    ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem']
-    ElButton: typeof import('element-plus/es')['ElButton']
-    ElCard: typeof import('element-plus/es')['ElCard']
-    ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
-    ElCol: typeof import('element-plus/es')['ElCol']
-    ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
-    ElDialog: typeof import('element-plus/es')['ElDialog']
-    ElDivider: typeof import('element-plus/es')['ElDivider']
-    ElDropdown: typeof import('element-plus/es')['ElDropdown']
-    ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
-    ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
-    ElForm: typeof import('element-plus/es')['ElForm']
-    ElFormItem: typeof import('element-plus/es')['ElFormItem']
-    ElInput: typeof import('element-plus/es')['ElInput']
-    ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
-    ElMenu: typeof import('element-plus/es')['ElMenu']
-    ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
-    ElOption: typeof import('element-plus/es')['ElOption']
-    ElPagination: typeof import('element-plus/es')['ElPagination']
-    ElPopover: typeof import('element-plus/es')['ElPopover']
-    ElRow: typeof import('element-plus/es')['ElRow']
-    ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
-    ElSelect: typeof import('element-plus/es')['ElSelect']
-    ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
-    ElSwitch: typeof import('element-plus/es')['ElSwitch']
-    ElTable: typeof import('element-plus/es')['ElTable']
-    ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
-    ElTimePicker: typeof import('element-plus/es')['ElTimePicker']
-    ElTooltip: typeof import('element-plus/es')['ElTooltip']
-    ElTree: typeof import('element-plus/es')['ElTree']
     Hamburger: typeof import('./../components/Hamburger/index.vue')['default']
     LangSelect: typeof import('./../components/LangSelect/index.vue')['default']
     MultiUpload: typeof import('./../components/Upload/MultiUpload.vue')['default']
-    NBadge: typeof import('naive-ui')['NBadge']
-    NButton: typeof import('naive-ui')['NButton']
-    NCard: typeof import('naive-ui')['NCard']
-    NCollapse: typeof import('naive-ui')['NCollapse']
-    NCollapseItem: typeof import('naive-ui')['NCollapseItem']
-    NDrawer: typeof import('naive-ui')['NDrawer']
-    NDrawerContent: typeof import('naive-ui')['NDrawerContent']
-    NIcon: typeof import('naive-ui')['NIcon']
-    NInput: typeof import('naive-ui')['NInput']
-    NInputNumber: typeof import('naive-ui')['NInputNumber']
-    NMenu: typeof import('naive-ui')['NMenu']
-    NModal: typeof import('naive-ui')['NModal']
-    NScrollbar: typeof import('naive-ui')['NScrollbar']
-    NSpin: typeof import('naive-ui')['NSpin']
-    NSwitch: typeof import('naive-ui')['NSwitch']
-    NTooltip: typeof import('naive-ui')['NTooltip']
     Pagination: typeof import('./../components/Pagination/index.vue')['default']
     RightPanel: typeof import('./../components/RightPanel/index.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']

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

@@ -14,7 +14,7 @@
         <svg-icon class="logoIcon" icon-class="BIlogo" />
       </div>
       <div class="line"></div>
-      <div class="text">智能生产调度系统 - {{ deviceTitle }}锅炉房</div>
+      <div class="text">生产监控大屏 - {{ deviceTitle }}</div>
     </div>
     <div class="home">
       <div class="homeBtn" @click="returnBack">
@@ -44,6 +44,14 @@
       </svg>
       <span class="tooltip">返回</span>
     </div>
+    <div class="menuTabs">
+      <el-tabs v-model="activeTabs" class="tabs">
+        <el-tab-pane label="能源站概览" name="0"></el-tab-pane>
+        <el-tab-pane label="全网平衡" name="1"></el-tab-pane>
+        <el-tab-pane label="负荷预测" name="2"></el-tab-pane>
+        <el-tab-pane label="智能调度" name="3"></el-tab-pane>
+      </el-tabs>
+    </div>
     <div class="menu">
       <el-popover popper-class="menuPopover" placement="bottom-start" trigger="hover" :width="240">
         <template #reference>
@@ -82,6 +90,7 @@ const defaultProps = {
   label: 'deptName',
   value: 'deptId'
 };
+const activeTabs = ref('1');
 
 onMounted(() => {
   getWeatherData();
@@ -250,7 +259,8 @@ function getDeptData() {
 .menuInfo {
   display: flex;
   justify-content: space-between;
-  margin-top: 20px;
+  align-items: center;
+  margin-top: 15px;
   .return {
     width: 20px;
     height: 20px;
@@ -306,6 +316,28 @@ function getDeptData() {
     background-position: right;
     transition-duration: 0.5s;
   }
+
+  .menuTabs {
+    :deep(.tabs) {
+      --el-text-color-primary: #d1dffa;
+      --el-color-primary: #ffa949;
+      .el-tabs__header {
+        margin: 0;
+        .el-tabs__nav-wrap::after {
+          content: none;
+        }
+        .el-tabs__item {
+          font-size: var(--el-font-size-medium);
+          padding: 0 20px !important;
+        }
+        .el-tabs__item.is-active {
+          color: #fff;
+          background: linear-gradient(180deg, rgba(255, 169, 73, 0) 0%, rgba(255, 169, 73, 0.27) 100%);
+        }
+      }
+    }
+  }
+
   .menu {
     width: 35px;
     .menuIcon {

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

@@ -1081,7 +1081,7 @@ function getDeviceInfo() {
 
 const debounceClick = debounce(() => {
   getDevicePolling();
-}, 360000);
+}, 10000);
 
 function getDevicePolling() {
   //轮询获取折线图数据
@@ -1094,7 +1094,7 @@ function getDevicePolling() {
         timer.value = setTimeout(async () => {
           await (timer.value && clearTimeout(timer.value));
           await getDevicePolling();
-        }, 360000);
+        }, 10000);
       }
       if (res.data.additionalInfo != null) {
         currentEndTime.value = res.data.additionalInfo.endTime;
@@ -1185,7 +1185,7 @@ function init(data: any) {
       data: item.data,
       tooltip: {
         valueFormatter: function (value: any) {
-          return value + ' ' + item.paramUnit;
+          return value === null ? '--' : value + ' ' + item.paramUnit;
         }
       }
     });

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

@@ -575,7 +575,7 @@ function getDeviceInfo() {
 
 const debounceClick = debounce(() => {
   getDevicePolling();
-}, 360000);
+}, 10000);
 
 function getDevicePolling() {
   //轮询获取折线图数据
@@ -588,7 +588,7 @@ function getDevicePolling() {
         timer.value = setTimeout(async () => {
           await (timer.value && clearTimeout(timer.value));
           await getDevicePolling();
-        }, 360000);
+        }, 10000);
       }
       if (res.data.additionalInfo != null) {
         currentEndTime.value = res.data.additionalInfo.endTime;
@@ -679,7 +679,7 @@ function init(data: any) {
       data: item.data,
       tooltip: {
         valueFormatter: function (value: any) {
-          return value + ' ' + item.paramUnit;
+          return value === null ? '--' : value + ' ' + item.paramUnit;
         }
       }
     });

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

@@ -12,6 +12,8 @@ const counterStore = useCounter();
 const yearMonthDay = ref();
 const priPressRef: Ref<HTMLElement | any> = ref(null);
 const deptId = ref('208');
+const timer = ref();
+const isCurrentRoute = ref(true);
 
 const options = {
   tooltip: {
@@ -210,6 +212,12 @@ function getCompany() {
   getrealTime(params).then((res: any) => {
     const chart = echarts.init(priPressRef.value);
     if (res.code === 200 && Object.keys(res.data).length != 0) {
+      if (isCurrentRoute.value) {
+        timer.value = setTimeout(async () => {
+          await (timer.value && clearTimeout(timer.value));
+          await getCompany();
+        }, 10000);
+      }
       options.dataset.source = res.data.source;
       options.yAxis[0].name = `Mpa`;
       chart.setOption(options);
@@ -225,6 +233,12 @@ function getCompany() {
     }
   });
 }
+onUnmounted(() => {
+  //组件注销前清除setTimeout
+  if (timer.value !== null || timer.value !== undefined) {
+    clearTimeout(timer.value);
+  }
+});
 </script>
 <style lang="scss" scoped>
 .priPressInfo {

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

@@ -11,6 +11,8 @@ import useCounter from '@/store/modules/date';
 const counterStore = useCounter();
 const priTempRef: Ref<HTMLElement | any> = ref(null);
 const deptId = ref('208');
+const timer = ref();
+const isCurrentRoute = ref(true);
 
 const options = {
   tooltip: {
@@ -159,6 +161,12 @@ function getElect() {
   getrealTime(params).then((res: any) => {
     const chart = echarts.init(priTempRef.value);
     if (res.code === 200 && Object.keys(res.data).length != 0) {
+      if (isCurrentRoute.value) {
+        timer.value = setTimeout(async () => {
+          await (timer.value && clearTimeout(timer.value));
+          await getElect();
+        }, 10000);
+      }
       options.dataset.source = res.data.source;
       options.yAxis[0].name = `℃`;
       chart.setOption(options);
@@ -174,6 +182,12 @@ function getElect() {
     }
   });
 }
+onUnmounted(() => {
+  //组件注销前清除setTimeout
+  if (timer.value !== null || timer.value !== undefined) {
+    clearTimeout(timer.value);
+  }
+});
 </script>
 <style lang="scss" scoped>
 .priTempInfo {

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

@@ -12,6 +12,8 @@ const counterStore = useCounter();
 const yearMonthDay = ref();
 const secPressRef: Ref<HTMLElement | any> = ref(null);
 const deptId = ref('208');
+const timer = ref();
+const isCurrentRoute = ref(true);
 
 const options = {
   tooltip: {
@@ -210,6 +212,12 @@ function getCompany() {
   getrealTime(params).then((res: any) => {
     const chart = echarts.init(secPressRef.value);
     if (res.code === 200 && Object.keys(res.data).length != 0) {
+      if (isCurrentRoute.value) {
+        timer.value = setTimeout(async () => {
+          await (timer.value && clearTimeout(timer.value));
+          await getCompany();
+        }, 10000);
+      }
       options.dataset.source = res.data.source;
       options.yAxis[0].name = `Mpa`;
       chart.setOption(options);
@@ -225,6 +233,12 @@ function getCompany() {
     }
   });
 }
+onUnmounted(() => {
+  //组件注销前清除setTimeout
+  if (timer.value !== null || timer.value !== undefined) {
+    clearTimeout(timer.value);
+  }
+});
 </script>
 <style lang="scss" scoped>
 .secPressInfo {

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

@@ -12,6 +12,8 @@ const counterStore = useCounter();
 const yearMonthDay = ref();
 const secTempRef: Ref<HTMLElement | any> = ref(null);
 const deptId = ref('208');
+const timer = ref();
+const isCurrentRoute = ref(true);
 
 const options = {
   tooltip: {
@@ -210,6 +212,12 @@ function getCompany() {
   getrealTime(params).then((res: any) => {
     const chart = echarts.init(secTempRef.value);
     if (res.code === 200 && Object.keys(res.data).length != 0) {
+      if (isCurrentRoute.value) {
+        timer.value = setTimeout(async () => {
+          await (timer.value && clearTimeout(timer.value));
+          await getCompany();
+        }, 10000);
+      }
       options.dataset.source = res.data.source;
       options.yAxis[0].name = `℃`;
       chart.setOption(options);
@@ -225,6 +233,12 @@ function getCompany() {
     }
   });
 }
+onUnmounted(() => {
+  //组件注销前清除setTimeout
+  if (timer.value !== null || timer.value !== undefined) {
+    clearTimeout(timer.value);
+  }
+});
 </script>
 <style lang="scss" scoped>
 .secTempInfo {

src/views/details/index.vue

@@ -987,7 +987,7 @@ function init(data: any) {
       data: item.data,
       tooltip: {
         valueFormatter: function (value: any) {
-          return value + ' ' + item.paramUnit;
+          return value === null ? '--' : value + ' ' + item.paramUnit;
         }
       }
     });