换热站大屏接口数据处理

src/api/dataVisual/index.ts

@@ -0,0 +1,76 @@
+import request from '@/utils/request';
+import { AxiosPromise } from 'axios';
+import { weatherVo } from './types';
+
+/**
+ * 获取热源列表
+ */
+export function getDeptList(data: any) {
+  return request({
+    url: '/system/dept/selectList',
+    method: 'post',
+    data: data
+  });
+}
+/**
+ * 获取图表数据
+ */
+export function getrealTime(queryParams: any) {
+  return request({
+    url: 'dc/heatSourceScreen/heatSource/realTime/data',
+    method: 'get',
+    params: queryParams
+  });
+}
+/**
+ * 温度曲线
+ */
+export function getTempChart(queryParams: any) {
+  return request({
+    url: '/dc/heatSourceScreen/heatExchangeStation/temperature/history/Data',
+    method: 'get',
+    params: queryParams
+  });
+}
+/**
+ * 温度曲线
+ */
+export function getTempChartPolling(queryParams: any) {
+  return request({
+    url: '/dc/heatSourceScreen/heatExchangeStation/temperature/realTime/data',
+    method: 'get',
+    params: queryParams
+  });
+}
+
+/**
+ * 压力曲线
+ */
+export function getPressChart(queryParams: any) {
+  return request({
+    url: '/dc/heatSourceScreen/heatExchangeStation/stress/history/data',
+    method: 'get',
+    params: queryParams
+  });
+}
+/**
+ * 压力曲线
+ */
+export function getPressChartPolling(queryParams: any) {
+  return request({
+    url: '/dc/heatSourceScreen/heatExchangeStation/stress/realTime/data',
+    method: 'get',
+    params: queryParams
+  });
+}
+
+/**
+ * 获取换热站Table列表
+ */
+export function getTableData(data: any) {
+  return request({
+    url: '/dc/heatSourceScreen/heatSource/table/data',
+    method: 'post',
+    data: data
+  });
+}

src/api/dataVisual/types.ts

@@ -0,0 +1,22 @@
+/**
+ * 天气参数
+ */
+export interface weatherVo {
+  date: string;
+  tem_day: string;
+  tem_night: string;
+  wea: string;
+  wea_img: string;
+  win: string;
+  win_speed: string;
+}
+
+/**
+ * 水消耗参数
+ */
+export interface waterVo {
+  field1: number;
+  field2: number;
+  field3: number;
+  name: string;
+}

src/store/modules/date.js

@@ -5,7 +5,9 @@ const useCounter = defineStore('date', {
    * 存储全局状态
    */
   state: () => ({
-    dateStr: ''
+    deptIdStr:'',
+    dateStr: '',
+    orgStr:''
   }),
 
   /**
@@ -17,8 +19,14 @@ const useCounter = defineStore('date', {
    * 编辑业务逻辑  类似于methods
    */
   actions: {
+    deptStore(val) {
+      this.deptIdStr = val;
+    },
     dateStore(val) {
       this.dateStr = val;
+    },
+    orgStore(val) {
+      this.orgStr = val;
     }
   }
 });

src/types/auto-imports.d.ts

@@ -2,9 +2,11 @@
 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']
@@ -271,9 +273,11 @@ 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,33 +9,27 @@ 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']
-    ElIcon: typeof import('element-plus/es')['ElIcon']
     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']
-    ElMenuItemGroup: typeof import('element-plus/es')['ElMenuItemGroup']
     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']

src/views/dashboard/index.vue

@@ -171,6 +171,7 @@ const timePeriod = computed(() => {
 onMounted(() => {
   getWeatherData();
   const webVersion = sessionStorage.getItem('webVersion');
+  debugger
   if (webVersion != '') {
     const version = JSON.parse(webVersion);
     notice.value = ElNotification({

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

@@ -6,15 +6,15 @@
           <span>一网温度<i></i></span>
         </div>
         <div class="info">
-          <BoxPlot />
+          <PriTemp />
         </div>
       </div>
       <div class="flow">
         <div class="title">
-          <span>一网热力站流量<i></i></span>
+          <span>一网压力<i></i></span>
         </div>
         <div class="info">
-          <Bar />
+          <PriPress />
         </div>
       </div>
     </div>
@@ -24,7 +24,7 @@
           <span>温度<i></i></span>
         </div>
         <div class="info">
-          <Temp />
+          <HxTemp />
         </div>
       </div>
       <div class="flow">
@@ -32,7 +32,7 @@
           <span>压力<i></i></span>
         </div>
         <div class="info">
-          <Line />
+          <HxPress />
         </div>
       </div>
     </div>
@@ -42,26 +42,27 @@
           <span>二网温度<i></i></span>
         </div>
         <div class="info">
-          <BoxPlot />
+          <SecTemp />
         </div>
       </div>
       <div class="flow">
         <div class="title">
-          <span>二网热力站压力<i></i></span>
+          <span>二网压力<i></i></span>
         </div>
         <div class="info">
-          <Bar />
+          <SecPress />
         </div>
       </div>
     </div>
   </div>
 </template>
 <script lang="ts" setup>
-import BoxPlot from './boxPlot.vue';
-import Bar from './bar.vue';
-import Temp from './temp.vue';
-import Line from './line.vue';
-import Table from './table.vue';
+import PriTemp from './priTemp.vue';
+import SecTemp from './secTemp.vue';
+import HxPress from './hxPress.vue';
+import HxTemp from './hxTemp.vue';
+import SecPress from './secPress.vue';
+import PriPress from './priPress.vue';
 </script>
 <style lang="scss" scoped>
 .chartsInfo {
@@ -72,7 +73,7 @@ import Table from './table.vue';
   .flow {
     height: 421px;
     padding: 20px 27px;
-    border: 1px solid #3776b8;
+    background-color: #1A2537;
   }
   .temp {
     margin-bottom: 28px;

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

@@ -45,12 +45,12 @@
       <span class="tooltip">返回</span>
     </div>
     <div class="menu">
-      <el-popover popper-class="menuPopover" placement="bottom-start" trigger="hover" :width="200">
+      <el-popover popper-class="menuPopover" placement="bottom-start" trigger="hover" :width="240">
         <template #reference>
           <svg-icon class="menuIcon" icon-class="icon_menu" />
         </template>
         <div class="menuList">
-          <el-tree :data="data" :props="defaultProps" accordion highlight-current @node-click="handleNodeClick" />
+          <el-tree :data="deptData" :props="defaultProps" accordion highlight-current @node-click="handleNodeClick" />
         </div>
       </el-popover>
     </div>
@@ -59,85 +59,30 @@
 <script lang="ts" setup>
 import { useDateFormat, useNow } from '@vueuse/core';
 import { getWeather } from '@/api/user/index';
+import { getDeptList } from '@/api/dataVisual/index';
+import useCounter from '@/store/modules/date';
 import calendar from '@/utils/lunar';
+const counterStore = useCounter();
 const currentTime = useDateFormat(useNow(), 'YYYY-MM-DD HH:mm:ss');
 const weatherData = ref({ city: '', weather: '', temperature: '', weatherImg: '' });
 const timer = ref();
 const isCurrentRoute = ref(true);
-
-interface Tree {
-  label: string;
-  children?: Tree[];
-}
+const deptData = ref();
 const handleNodeClick = (node: any) => {
   if (!node.children || node.children.length === 0) {
-    console.log(node)
+    console.log(node);
+    counterStore.deptStore(node.deptId);
   }
 };
-const data: Tree[] = [
-  {
-    label: 'Level one 1',
-    children: [
-      {
-        label: 'Level two 1-1',
-        children: [
-          {
-            label: 'Level three 1-1-1'
-          }
-        ]
-      }
-    ]
-  },
-  {
-    label: 'Level one 2',
-    children: [
-      {
-        label: 'Level two 2-1',
-        children: [
-          {
-            label: 'Level three 2-1-1'
-          }
-        ]
-      },
-      {
-        label: 'Level two 2-2',
-        children: [
-          {
-            label: 'Level three 2-2-1'
-          }
-        ]
-      }
-    ]
-  },
-  {
-    label: 'Level one 3',
-    children: [
-      {
-        label: 'Level two 3-1',
-        children: [
-          {
-            label: 'Level three 3-1-1'
-          }
-        ]
-      },
-      {
-        label: 'Level two 3-2',
-        children: [
-          {
-            label: 'Level three 3-2-1'
-          }
-        ]
-      }
-    ]
-  }
-];
 const defaultProps = {
   children: 'children',
-  label: 'label'
+  label: 'deptName',
+  value: 'deptId'
 };
 
 onMounted(() => {
   getWeatherData();
+  getDeptData();
 });
 
 function getWeatherData() {
@@ -156,6 +101,18 @@ function getWeatherData() {
     }
   });
 }
+function getDeptData() {
+  //获取热源列表
+  const params = {
+    orgType: '1002'
+  };
+  getDeptList(params).then((res: any) => {
+    if (res.code === 200) {
+      deptData.value = res.data;
+      counterStore.deptStore(res.data[0].deptId);
+    }
+  });
+}
 </script>
 <style lang="scss" scoped>
 .headerInfo {
@@ -292,7 +249,7 @@ function getWeatherData() {
     position: relative;
     transition-duration: 0.5s;
     .returnIcon {
-      fill: white;
+      fill: #fff;
     }
 
     .tooltip {
@@ -300,8 +257,8 @@ function getWeatherData() {
       top: -20px;
       opacity: 0;
       width: 50px;
-      background: linear-gradient(to right, rgb(39, 107, 255), rgb(108, 184, 255));
-      color: white;
+      background: linear-gradient(to right, #f96800, #f2de28);
+      color: #fff;
       padding: 5px;
       border-radius: 5px;
       display: flex;
@@ -317,7 +274,7 @@ function getWeatherData() {
       content: '';
       width: 10px;
       height: 10px;
-      background: linear-gradient(45deg, rgb(39, 107, 255), rgb(108, 184, 255));
+      background: linear-gradient(45deg, #f96800, #f2de28);
       background-size: 1000%;
       background-position: center;
       transform: rotate(45deg);

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

@@ -0,0 +1,708 @@
+<template>
+  <div class="hxTempInfo">
+    <div ref="hxTempRef" id="hxTempEchart" class="hxTempEchart">暂无数据</div>
+  </div>
+</template>
+<script lang="ts" setup>
+import * as echarts from 'echarts';
+import { Ref } from 'vue';
+import useCounter from '@/store/modules/date';
+import { useDateFormat } from '@vueuse/core';
+import { getTempChart, getTempChartPolling } from '@/api/dataVisual/index';
+import { debounce } from '@/utils/index';
+import { seriesVo, mainInfoVo } from '@/api/device/types';
+const counterStore = useCounter();
+const yearMonthDay = ref();
+const hxTempRef: Ref<HTMLElement | any> = ref(null);
+const mapEcharts = ref();
+const currentEndTime = ref();
+const timer = ref();
+const isCurrentRoute = ref(true);
+const mainInfoList = ref<mainInfoVo[]>();
+const deviceUuid = ref();
+
+// const dataData = {
+//   mainInfos: [
+//     {
+//       name: '一次网回温(低区)',
+//       paramUnit: '°C',
+//       index: 0,
+//       average: 33.43,
+//       data: [
+//         ['2024-02-07 00:00:01', 30.88],
+//         ['2024-02-07 00:05:01', 30.69],
+//         ['2024-02-07 00:10:01', 30.51],
+//         ['2024-02-07 00:15:01', 30.31],
+//         ['2024-02-07 00:20:01', 30.12],
+//         ['2024-02-07 00:25:01', 29.96],
+//         ['2024-02-07 00:30:01', 29.81],
+//         ['2024-02-07 00:35:01', 29.66],
+//         ['2024-02-07 00:40:01', 29.51],
+//         ['2024-02-07 00:45:01', 29.38],
+//         ['2024-02-07 00:50:01', 29.28],
+//         ['2024-02-07 00:55:01', 29.18],
+//         ['2024-02-07 01:00:01', 29.07],
+//         ['2024-02-07 01:05:01', 28.99],
+//         ['2024-02-07 01:10:01', 28.89],
+//         ['2024-02-07 01:15:01', 28.8],
+//         ['2024-02-07 01:20:01', 28.68],
+//         ['2024-02-07 01:25:01', 28.54],
+//         ['2024-02-07 01:30:01', 28.41],
+//         ['2024-02-07 01:35:01', 28.26],
+//         ['2024-02-07 01:40:01', 28.09],
+//         ['2024-02-07 01:45:01', 27.89],
+//         ['2024-02-07 01:50:01', 27.68],
+//         ['2024-02-07 01:55:01', 27.38],
+//         ['2024-02-07 02:00:01', 27.19],
+//         ['2024-02-07 02:05:01', 27.13],
+//         ['2024-02-07 02:10:01', 27.16],
+//         ['2024-02-07 02:15:01', 27.24],
+//         ['2024-02-07 02:20:01', 27.33],
+//         ['2024-02-07 02:25:01', 27.41],
+//         ['2024-02-07 02:30:01', 27.48],
+//         ['2024-02-07 02:35:01', 27.53],
+//         ['2024-02-07 02:40:01', 27.52],
+//         ['2024-02-07 02:45:01', 27.52],
+//         ['2024-02-07 02:50:01', 27.47],
+//         ['2024-02-07 02:55:01', 27.45],
+//         ['2024-02-07 03:00:01', 27.38],
+//         ['2024-02-07 03:05:01', 27.28],
+//         ['2024-02-07 03:10:01', 27.2],
+//         ['2024-02-07 03:15:01', 27.11],
+//         ['2024-02-07 03:20:01', 27.01],
+//         ['2024-02-07 03:25:01', 26.98],
+//         ['2024-02-07 03:30:01', 27.02],
+//         ['2024-02-07 03:35:01', 27.28],
+//         ['2024-02-07 03:40:01', 28.03],
+//         ['2024-02-07 03:45:01', 37.96],
+//         ['2024-02-07 03:50:01', 31.84],
+//         ['2024-02-07 03:55:01', 30.32],
+//         ['2024-02-07 04:00:01', 30.46],
+//         ['2024-02-07 04:05:01', 31.73],
+//         ['2024-02-07 04:10:01', 32.63],
+//         ['2024-02-07 04:15:01', 33.05],
+//         ['2024-02-07 04:20:01', 33.5],
+//         ['2024-02-07 04:25:01', 34.03],
+//         ['2024-02-07 04:30:01', 34.43],
+//         ['2024-02-07 04:35:01', 34.55],
+//         ['2024-02-07 04:40:01', 34.89],
+//         ['2024-02-07 04:45:01', 35.51],
+//         ['2024-02-07 04:50:01', 36.1],
+//         ['2024-02-07 04:55:01', 36.53],
+//         ['2024-02-07 05:00:01', 36.99],
+//         ['2024-02-07 05:05:01', 37.41],
+//         ['2024-02-07 05:10:01', 37.8],
+//         ['2024-02-07 05:15:01', 37.98],
+//         ['2024-02-07 05:20:01', 37.94],
+//         ['2024-02-07 05:25:01', 38.17],
+//         ['2024-02-07 05:30:01', 38.65],
+//         ['2024-02-07 05:35:01', 39.09],
+//         ['2024-02-07 05:40:01', 39.35],
+//         ['2024-02-07 05:45:01', 39.67],
+//         ['2024-02-07 05:50:01', 40.06],
+//         ['2024-02-07 05:55:01', 40.41],
+//         ['2024-02-07 06:00:01', 40.62],
+//         ['2024-02-07 06:05:01', 40.73],
+//         ['2024-02-07 06:10:01', 40.89],
+//         ['2024-02-07 06:15:01', 41.15],
+//         ['2024-02-07 06:20:01', 41.58],
+//         ['2024-02-07 06:25:01', 41.74],
+//         ['2024-02-07 06:30:01', 41.78],
+//         ['2024-02-07 06:35:01', 41.82],
+//         ['2024-02-07 06:40:01', 41.76],
+//         ['2024-02-07 06:45:01', 41.63],
+//         ['2024-02-07 06:50:01', 41.69],
+//         ['2024-02-07 06:55:01', 41.96],
+//         ['2024-02-07 07:00:01', 42.44],
+//         ['2024-02-07 07:05:01', 42.81],
+//         ['2024-02-07 07:10:01', 43.06],
+//         ['2024-02-07 07:15:01', 43.34],
+//         ['2024-02-07 07:20:01', 43.66],
+//         ['2024-02-07 07:25:01', 43.86],
+//         ['2024-02-07 07:30:01', 43.95],
+//         ['2024-02-07 07:35:01', 43.95],
+//         ['2024-02-07 07:40:01', 43.84],
+//         ['2024-02-07 07:45:01', 44.03],
+//         ['2024-02-07 07:50:01', 44.24],
+//         ['2024-02-07 07:55:01', 44.45],
+//         ['2024-02-07 08:00:01', 44.64],
+//         ['2024-02-07 08:05:01', 44.81],
+//         ['2024-02-07 08:10:01', 44.94],
+//         ['2024-02-07 08:15:01', 44.97],
+//         ['2024-02-07 08:20:01', 44.76],
+//         ['2024-02-07 08:25:01', 44.87],
+//         ['2024-02-07 08:30:01', 45.21],
+//         ['2024-02-07 08:35:01', 45.33],
+//         ['2024-02-07 08:40:01', 44.92],
+//         ['2024-02-07 08:45:01', 44.8],
+//         ['2024-02-07 08:50:01', 44.18],
+//         ['2024-02-07 08:55:01', 43.08],
+//         ['2024-02-07 09:00:01', 42.06],
+//         ['2024-02-07 09:05:01', 41.12],
+//         ['2024-02-07 09:10:01', 40.26],
+//         ['2024-02-07 09:15:01', 39.5],
+//         ['2024-02-07 09:20:01', 38.81],
+//         ['2024-02-07 09:25:01', 38.1],
+//         ['2024-02-07 09:30:01', 37.25],
+//         ['2024-02-07 09:35:01', 36.81],
+//         ['2024-02-07 09:40:01', 36.45],
+//         ['2024-02-07 09:45:01', 0],
+//         ['2024-02-07 09:50:01', 0],
+//         ['2024-02-07 09:55:01', 36.34],
+//         ['2024-02-07 10:00:01', 36.17],
+//         ['2024-02-07 10:05:01', 35.85],
+//         ['2024-02-07 10:10:01', 35.25],
+//         ['2024-02-07 10:15:01', 34.91],
+//         ['2024-02-07 10:20:01', 34.23],
+//         ['2024-02-07 10:25:01', 33.33],
+//         ['2024-02-07 10:30:01', 32.84],
+//         ['2024-02-07 10:35:01', 32.55],
+//         ['2024-02-07 10:40:01', 32.33],
+//         ['2024-02-07 10:45:01', 32.15],
+//         ['2024-02-07 10:50:01', 32],
+//         ['2024-02-07 10:55:01', 31.87],
+//         ['2024-02-07 11:00:01', 31.76],
+//         ['2024-02-07 11:05:01', 31.66],
+//         ['2024-02-07 11:10:01', 31.55],
+//         ['2024-02-07 11:15:01', 31.43],
+//         ['2024-02-07 11:20:01', 31.29],
+//         ['2024-02-07 11:25:01', 31.14],
+//         ['2024-02-07 11:30:01', 30.98],
+//         ['2024-02-07 11:35:01', 30.8],
+//         ['2024-02-07 11:40:01', 30.63],
+//         ['2024-02-07 11:45:01', 30.46],
+//         ['2024-02-07 11:50:01', 30.3],
+//         ['2024-02-07 11:55:01', 30.16],
+//         ['2024-02-07 12:00:01', 30.02],
+//         ['2024-02-07 12:05:01', 29.91],
+//         ['2024-02-07 12:10:01', 29.81],
+//         ['2024-02-07 12:15:01', 29.75],
+//         ['2024-02-07 12:20:01', 29.65],
+//         ['2024-02-07 12:25:01', 29.54],
+//         ['2024-02-07 12:30:01', 29.43],
+//         ['2024-02-07 12:35:01', 29.33],
+//         ['2024-02-07 12:40:01', 29.18],
+//         ['2024-02-07 12:45:01', 29.03],
+//         ['2024-02-07 12:50:01', 28.88],
+//         ['2024-02-07 12:55:01', 28.78],
+//         ['2024-02-07 13:00:01', 28.74],
+//         ['2024-02-07 13:05:01', 28.75],
+//         ['2024-02-07 13:10:01', 28.8],
+//         ['2024-02-07 13:15:01', 28.89],
+//         ['2024-02-07 13:20:01', 28.97],
+//         ['2024-02-07 13:25:01', 29.07],
+//         ['2024-02-07 13:30:01', 29.11],
+//         ['2024-02-07 13:35:01', 29.15],
+//         ['2024-02-07 13:40:01', 29.15],
+//         ['2024-02-07 13:45:01', 29.13],
+//         ['2024-02-07 13:50:01', 29.09],
+//         ['2024-02-07 13:55:01', 28.99],
+//         ['2024-02-07 14:00:01', 28.92],
+//         ['2024-02-07 14:05:01', 28.84],
+//         ['2024-02-07 14:10:01', 28.73],
+//         ['2024-02-07 14:15:01', 28.6],
+//         ['2024-02-07 14:20:01', 28.52],
+//         ['2024-02-07 14:25:01', 28.42],
+//         ['2024-02-07 14:30:01', 28.35],
+//         ['2024-02-07 14:35:01', 28.27],
+//         ['2024-02-07 14:40:01', 28.19],
+//         ['2024-02-07 14:45:01', 28.14],
+//         ['2024-02-07 14:50:01', 28.08],
+//         ['2024-02-07 14:55:01', 28.03],
+//         ['2024-02-07 15:00:01', 27.96],
+//         ['2024-02-07 15:05:01', 27.92],
+//         ['2024-02-07 15:10:01', 27.89],
+//         ['2024-02-07 15:15:01', 27.85],
+//         ['2024-02-07 15:20:01', 27.92],
+//         ['2024-02-07 15:25:01', 28.38],
+//         ['2024-02-07 15:30:01', 29.35],
+//         ['2024-02-07 15:35:01', 35.52],
+//         ['2024-02-07 15:40:01', 30.86],
+//         ['2024-02-07 15:45:01', 29.91],
+//         ['2024-02-07 15:50:01', 30.42],
+//         ['2024-02-07 15:55:01', 31.63],
+//         ['2024-02-07 16:00:01', 32.6],
+//         ['2024-02-07 16:05:01', 33.18],
+//         ['2024-02-07 16:10:01', 33.6],
+//         ['2024-02-07 16:15:01', 34.23],
+//         ['2024-02-07 16:20:01', 34.53],
+//         ['2024-02-07 16:25:01', 34.66],
+//         ['2024-02-07 16:30:01', 35.01],
+//         ['2024-02-07 16:35:01', 35.65],
+//         ['2024-02-07 16:40:01', 36.22],
+//         ['2024-02-07 16:45:01', 36.62],
+//         ['2024-02-07 16:50:01', 37],
+//         ['2024-02-07 16:55:01', 37.48],
+//         ['2024-02-07 17:00:01', 38.03],
+//         ['2024-02-07 17:05:01', 38.24],
+//         ['2024-02-07 17:10:01', 38.43],
+//         ['2024-02-07 17:15:01', 38.62],
+//         ['2024-02-07 17:20:01', 38.91],
+//         ['2024-02-07 17:25:01', 39.38],
+//         ['2024-02-07 17:30:01', 39.82]
+//       ],
+//       min: 0,
+//       max: 0
+//     },
+//     {
+//       name: '一次网供温(低区)',
+//       paramUnit: '°C',
+//       index: 0,
+//       average: 47.31,
+//       data: [
+//         ['2024-02-07 00:00:01', 41.87],
+//         ['2024-02-07 00:05:01', 42.12],
+//         ['2024-02-07 00:10:01', 42.35],
+//         ['2024-02-07 00:15:01', 42.6],
+//         ['2024-02-07 00:20:01', 42.83],
+//         ['2024-02-07 00:25:01', 43.06],
+//         ['2024-02-07 00:30:01', 43.23],
+//         ['2024-02-07 00:35:01', 43.42],
+//         ['2024-02-07 00:40:01', 43.57],
+//         ['2024-02-07 00:45:01', 43.74],
+//         ['2024-02-07 00:50:01', 43.83],
+//         ['2024-02-07 00:55:01', 43.91],
+//         ['2024-02-07 01:00:01', 43.95],
+//         ['2024-02-07 01:05:01', 43.95],
+//         ['2024-02-07 01:10:01', 43.93],
+//         ['2024-02-07 01:15:01', 43.93],
+//         ['2024-02-07 01:20:01', 43.95],
+//         ['2024-02-07 01:25:01', 43.97],
+//         ['2024-02-07 01:30:01', 44.03],
+//         ['2024-02-07 01:35:01', 44.11],
+//         ['2024-02-07 01:40:01', 44.21],
+//         ['2024-02-07 01:45:01', 44.33],
+//         ['2024-02-07 01:50:01', 44.45],
+//         ['2024-02-07 01:55:01', 44.61],
+//         ['2024-02-07 02:00:01', 44.83],
+//         ['2024-02-07 02:05:01', 45.09],
+//         ['2024-02-07 02:10:01', 45.38],
+//         ['2024-02-07 02:15:01', 45.64],
+//         ['2024-02-07 02:20:01', 45.89],
+//         ['2024-02-07 02:25:01', 46.12],
+//         ['2024-02-07 02:30:01', 46.32],
+//         ['2024-02-07 02:35:01', 46.44],
+//         ['2024-02-07 02:40:01', 46.56],
+//         ['2024-02-07 02:45:01', 46.65],
+//         ['2024-02-07 02:50:01', 46.73],
+//         ['2024-02-07 02:55:01', 46.8],
+//         ['2024-02-07 03:00:01', 46.86],
+//         ['2024-02-07 03:05:01', 46.92],
+//         ['2024-02-07 03:10:01', 46.98],
+//         ['2024-02-07 03:15:01', 47.05],
+//         ['2024-02-07 03:20:01', 47.12],
+//         ['2024-02-07 03:25:01', 47.3],
+//         ['2024-02-07 03:30:01', 47.63],
+//         ['2024-02-07 03:35:01', 48.32],
+//         ['2024-02-07 03:40:01', 50.01],
+//         ['2024-02-07 03:45:01', 73.31],
+//         ['2024-02-07 03:50:01', 57.99],
+//         ['2024-02-07 03:55:01', 50.02],
+//         ['2024-02-07 04:00:01', 46.41],
+//         ['2024-02-07 04:05:01', 46.07],
+//         ['2024-02-07 04:10:01', 46.73],
+//         ['2024-02-07 04:15:01', 47.35],
+//         ['2024-02-07 04:20:01', 48.13],
+//         ['2024-02-07 04:25:01', 48.77],
+//         ['2024-02-07 04:30:01', 48.97],
+//         ['2024-02-07 04:35:01', 48.23],
+//         ['2024-02-07 04:40:01', 48.39],
+//         ['2024-02-07 04:45:01', 49.43],
+//         ['2024-02-07 04:50:01', 50.55],
+//         ['2024-02-07 04:55:01', 51.29],
+//         ['2024-02-07 05:00:01', 52.12],
+//         ['2024-02-07 05:05:01', 52.75],
+//         ['2024-02-07 05:10:01', 53.02],
+//         ['2024-02-07 05:15:01', 52.67],
+//         ['2024-02-07 05:20:01', 51.66],
+//         ['2024-02-07 05:25:01', 51.62],
+//         ['2024-02-07 05:30:01', 52.61],
+//         ['2024-02-07 05:35:01', 53.66],
+//         ['2024-02-07 05:40:01', 54.17],
+//         ['2024-02-07 05:45:01', 54.78],
+//         ['2024-02-07 05:50:01', 55.47],
+//         ['2024-02-07 05:55:01', 56.04],
+//         ['2024-02-07 06:00:01', 56.04],
+//         ['2024-02-07 06:05:01', 55.81],
+//         ['2024-02-07 06:10:01', 55.78],
+//         ['2024-02-07 06:15:01', 56.34],
+//         ['2024-02-07 06:20:01', 57.14],
+//         ['2024-02-07 06:25:01', 57.24],
+//         ['2024-02-07 06:30:01', 56.98],
+//         ['2024-02-07 06:35:01', 56.53],
+//         ['2024-02-07 06:40:01', 55.69],
+//         ['2024-02-07 06:45:01', 54.94],
+//         ['2024-02-07 06:50:01', 54.82],
+//         ['2024-02-07 06:55:01', 55.8],
+//         ['2024-02-07 07:00:01', 57.38],
+//         ['2024-02-07 07:05:01', 58.26],
+//         ['2024-02-07 07:10:01', 58.62],
+//         ['2024-02-07 07:15:01', 58.93],
+//         ['2024-02-07 07:20:01', 59.36],
+//         ['2024-02-07 07:25:01', 59.55],
+//         ['2024-02-07 07:30:01', 59.54],
+//         ['2024-02-07 07:35:01', 58.86],
+//         ['2024-02-07 07:40:01', 58.13],
+//         ['2024-02-07 07:45:01', 58.37],
+//         ['2024-02-07 07:50:01', 59.1],
+//         ['2024-02-07 07:55:01', 59.76],
+//         ['2024-02-07 08:00:01', 60.38],
+//         ['2024-02-07 08:05:01', 60.74],
+//         ['2024-02-07 08:10:01', 60.88],
+//         ['2024-02-07 08:15:01', 60.41],
+//         ['2024-02-07 08:20:01', 59.4],
+//         ['2024-02-07 08:25:01', 59.4],
+//         ['2024-02-07 08:30:01', 60.32],
+//         ['2024-02-07 08:35:01', 60.36],
+//         ['2024-02-07 08:40:01', 59.48],
+//         ['2024-02-07 08:45:01', 58.28],
+//         ['2024-02-07 08:50:01', 55.9],
+//         ['2024-02-07 08:55:01', 52.56],
+//         ['2024-02-07 09:00:01', 49.62],
+//         ['2024-02-07 09:05:01', 46.37],
+//         ['2024-02-07 09:10:01', 44.31],
+//         ['2024-02-07 09:15:01', 42.89],
+//         ['2024-02-07 09:20:01', 41.79],
+//         ['2024-02-07 09:25:01', 40.76],
+//         ['2024-02-07 09:30:01', 39.84],
+//         ['2024-02-07 09:35:01', 39],
+//         ['2024-02-07 09:40:01', 38.54],
+//         ['2024-02-07 09:45:01', 0],
+//         ['2024-02-07 09:50:01', 0],
+//         ['2024-02-07 09:55:01', 38.36],
+//         ['2024-02-07 10:00:01', 38.28],
+//         ['2024-02-07 10:05:01', 38.14],
+//         ['2024-02-07 10:10:01', 37.96],
+//         ['2024-02-07 10:15:01', 37.86],
+//         ['2024-02-07 10:20:01', 37.83],
+//         ['2024-02-07 10:25:01', 37.75],
+//         ['2024-02-07 10:30:01', 37.71],
+//         ['2024-02-07 10:35:01', 37.86],
+//         ['2024-02-07 10:40:01', 38.23],
+//         ['2024-02-07 10:45:01', 38.51],
+//         ['2024-02-07 10:50:01', 38.81],
+//         ['2024-02-07 10:55:01', 39.11],
+//         ['2024-02-07 11:00:01', 39.36],
+//         ['2024-02-07 11:05:01', 39.57],
+//         ['2024-02-07 11:10:01', 39.75],
+//         ['2024-02-07 11:15:01', 39.92],
+//         ['2024-02-07 11:20:01', 40.09],
+//         ['2024-02-07 11:25:01', 40.26],
+//         ['2024-02-07 11:30:01', 40.42],
+//         ['2024-02-07 11:35:01', 40.62],
+//         ['2024-02-07 11:40:01', 40.81],
+//         ['2024-02-07 11:45:01', 40.98],
+//         ['2024-02-07 11:50:01', 41.19],
+//         ['2024-02-07 11:55:01', 41.34],
+//         ['2024-02-07 12:00:01', 41.47],
+//         ['2024-02-07 12:05:01', 41.6],
+//         ['2024-02-07 12:10:01', 41.71],
+//         ['2024-02-07 12:15:01', 41.74],
+//         ['2024-02-07 12:20:01', 41.77],
+//         ['2024-02-07 12:25:01', 41.8],
+//         ['2024-02-07 12:30:01', 41.88],
+//         ['2024-02-07 12:35:01', 41.95],
+//         ['2024-02-07 12:40:01', 42.03],
+//         ['2024-02-07 12:45:01', 42.13],
+//         ['2024-02-07 12:50:01', 42.23],
+//         ['2024-02-07 12:55:01', 42.35],
+//         ['2024-02-07 13:00:01', 42.5],
+//         ['2024-02-07 13:05:01', 42.72],
+//         ['2024-02-07 13:10:01', 42.97],
+//         ['2024-02-07 13:15:01', 43.23],
+//         ['2024-02-07 13:20:01', 43.45],
+//         ['2024-02-07 13:25:01', 43.68],
+//         ['2024-02-07 13:30:01', 43.86],
+//         ['2024-02-07 13:35:01', 44.02],
+//         ['2024-02-07 13:40:01', 44.16],
+//         ['2024-02-07 13:45:01', 44.29],
+//         ['2024-02-07 13:50:01', 44.37],
+//         ['2024-02-07 13:55:01', 44.44],
+//         ['2024-02-07 14:00:01', 44.52],
+//         ['2024-02-07 14:05:01', 44.58],
+//         ['2024-02-07 14:10:01', 44.65],
+//         ['2024-02-07 14:15:01', 44.68],
+//         ['2024-02-07 14:20:01', 44.75],
+//         ['2024-02-07 14:25:01', 44.79],
+//         ['2024-02-07 14:30:01', 44.85],
+//         ['2024-02-07 14:35:01', 44.89],
+//         ['2024-02-07 14:40:01', 44.98],
+//         ['2024-02-07 14:45:01', 45.05],
+//         ['2024-02-07 14:50:01', 45.14],
+//         ['2024-02-07 14:55:01', 45.23],
+//         ['2024-02-07 15:00:01', 45.31],
+//         ['2024-02-07 15:05:01', 45.41],
+//         ['2024-02-07 15:10:01', 45.51],
+//         ['2024-02-07 15:15:01', 45.61],
+//         ['2024-02-07 15:20:01', 46.04],
+//         ['2024-02-07 15:25:01', 47.34],
+//         ['2024-02-07 15:30:01', 49.23],
+//         ['2024-02-07 15:35:01', 66.1],
+//         ['2024-02-07 15:40:01', 52.83],
+//         ['2024-02-07 15:45:01', 46.31],
+//         ['2024-02-07 15:50:01', 44.12],
+//         ['2024-02-07 15:55:01', 44.51],
+//         ['2024-02-07 16:00:01', 45.88],
+//         ['2024-02-07 16:05:01', 47.28],
+//         ['2024-02-07 16:10:01', 48.15],
+//         ['2024-02-07 16:15:01', 48.88],
+//         ['2024-02-07 16:20:01', 48.65],
+//         ['2024-02-07 16:25:01', 47.9],
+//         ['2024-02-07 16:30:01', 47.92],
+//         ['2024-02-07 16:35:01', 49.09],
+//         ['2024-02-07 16:40:01', 50.25],
+//         ['2024-02-07 16:45:01', 50.84],
+//         ['2024-02-07 16:50:01', 51.22],
+//         ['2024-02-07 16:55:01', 51.97],
+//         ['2024-02-07 17:00:01', 52.86],
+//         ['2024-02-07 17:05:01', 53.03],
+//         ['2024-02-07 17:10:01', 52.5],
+//         ['2024-02-07 17:15:01', 52.37],
+//         ['2024-02-07 17:20:01', 52.65],
+//         ['2024-02-07 17:25:01', 53.68],
+//         ['2024-02-07 17:30:01', 54.6]
+//       ],
+//       min: 0,
+//       max: 0
+//     }
+//   ],
+//   additionalInfo: {
+//     name: '望滨锅炉房',
+//     unit: null,
+//     endTime: '2024-02-07 17:30:01'
+//   },
+//   units: [
+//     {
+//       index: 0,
+//       name: '摄氏度',
+//       unit: '°C',
+//       unitMin: 0,
+//       unitMax: 100
+//     }
+//   ]
+// };
+
+const colors = ['#5470c6', '#91cc75', '#fac858', '#1a94bc', '#f26b1f', '#5bae23'];
+const options = {
+  color: colors,
+  title: {
+    text: '',
+    top: 10,
+    left: 20,
+    textStyle: {
+      fontSize: 14,
+      fontWeight: 'normal',
+      color: '#D1E1FF'
+    }
+  },
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'cross'
+    }
+  },
+  legend: {
+    data: [''],
+    top: 10,
+    right: 10,
+    itemWidth: 11,
+    itemHeight: 2,
+    textStyle: {
+      color: '#D1E1FF',
+      fontSize: 14
+    }
+  },
+  grid: {
+    top: '20%',
+    left: '2%',
+    right: '2%',
+    bottom: '15%',
+    containLabel: true
+  },
+  dataZoom: [
+    {
+      type: 'inside',
+      startValue: '0'
+    },
+    {
+      startValue: '0'
+    }
+  ],
+  xAxis: {
+    type: 'time',
+    boundaryGap: false,
+    axisLabel: {
+      show: true,
+      color: '#D1E1FF'
+    },
+    axisLine: {
+      lineStyle: {
+        color: '#904FC5'
+      }
+    }
+  },
+  yAxis: [{}],
+  series: [{}]
+};
+
+onMounted(() => {
+  console.log('起始时间:', useDateFormat(new Date(), 'YYYY-MM-DD HH:mm:ss').value);
+  // init(dataData);
+});
+watchEffect(() => {
+  const dataStr = counterStore.orgStr;
+  if (dataStr != '') {
+    deviceUuid.value = dataStr;
+    getDeviceInfo();
+  }
+});
+function getDeviceInfo() {
+  //获取折线图数据
+  const params = {
+    deviceUuid: deviceUuid.value
+  };
+  getTempChart(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(() => {
+  getDevicePolling();
+}, 360000);
+
+function getDevicePolling() {
+  //轮询获取折线图数据
+  const params = {
+    deviceUuid: deviceUuid.value
+  };
+  getTempChartPolling(params).then((res: any) => {
+    if (res.code === 200) {
+      if (isCurrentRoute.value) {
+        timer.value = setTimeout(async () => {
+          await (timer.value && clearTimeout(timer.value));
+          await getDevicePolling();
+        }, 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(hxTempRef.value);
+      chart.setOption(options);
+      // mainInfoList.value = res.data.mainInfos;
+      // init(res.data);
+    } else {
+      clearTimeout(timer.value);
+    }
+  });
+}
+function init(data: any) {
+  //折线图实例化
+  options.yAxis = [];
+  options.legend.data = [];
+  options.series = [];
+  if (data.mainInfos.length === 0) {
+    // options.title.text = '暂无数据';
+    const chart = echarts.init(hxTempRef.value);
+    mapEcharts.value = chart;
+    chart.clear();
+    chart.resize();
+    console.log('options--', options);
+    chart.setOption(options);
+    return;
+  }
+  options.title.text = data.additionalInfo.name;
+  data.units.map((item: seriesVo, index: number) => {
+    const offsetData = index === 0 ? 0 : index === 1 ? 0 : (index - 1) * 100;
+    console.log('offsetData--', offsetData);
+    options.yAxis.push({
+      type: 'value',
+      name: `${item.name}(${item.unit})`,
+      position: `${index === 0 ? 'left' : 'right'}`,
+      alignTicks: true,
+      offset: offsetData,
+      scale: true, //自适应
+      // minInterval: 1, //最小间距
+      min: item.unitMin, //最小值
+      max: item.unitMax, //最大值
+      // interval: 10, //刻度间隔
+      nameTextStyle: {
+        color: '#D1E1FF',
+        fontSize: 12,
+        padding: [0, 0, 0, 0] //name文字位置 对应 上右下左
+      },
+      axisTick: {
+        // 轴刻度
+        show: false
+      },
+      axisLabel: {
+        show: true,
+        color: '#D1E1FF'
+      },
+      splitLine: {
+        // 网格线
+        show: true,
+        lineStyle: {
+          //分割线
+          color: '#D1E1FF',
+          width: 1,
+          opacity: 0.2
+        }
+      }
+    });
+  });
+  data.mainInfos.map((item: seriesVo, index: number) => {
+    options.legend.data.push(item.name);
+    options.series.push({
+      name: item.name,
+      type: 'line',
+      smooth: true,
+      symbol: 'none',
+      yAxisIndex: item.index,
+      data: item.data
+    });
+  });
+  const chart = echarts.init(hxTempRef.value);
+  chart.clear();
+  window.addEventListener('resize', function () {
+    chart.resize();
+  });
+  mapEcharts.value = chart;
+  chart.resize();
+  console.log('options--', options);
+  chart.setOption(options);
+  console.log('结束时间:', useDateFormat(new Date(), 'YYYY-MM-DD HH:mm:ss').value);
+}
+</script>
+<style lang="scss" scoped>
+.hxTempInfo {
+  width: 100%;
+  height: 318px;
+  .hxTempEchart {
+    width: 100%;
+    height: 318px;
+    line-height: 318px;
+    text-align: center;
+    font-size: 16px;
+    color: #d2def6;
+    z-index: 99999;
+  }
+}
+</style>

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

@@ -25,7 +25,7 @@ const options = {
     itemWidth: 11,
     itemHeight: 2,
     textStyle: {
-      color: '#fff',
+      color: '#D1E1FF',
       fontSize: 14
     }
   },
@@ -48,7 +48,7 @@ const options = {
     boundaryGap: false,
     axisLabel: {
       show: true,
-      color: '#99CFFF'
+      color: '#D1E1FF'
     },
     axisLine: {
       lineStyle: {
@@ -61,7 +61,7 @@ const options = {
       type: 'value',
       name: '单位',
       nameTextStyle: {
-        color: '#546778',
+        color: '#D1E1FF',
         fontSize: 12,
         padding: [0, 0, 0, 0] //name文字位置 对应 上右下左
       },
@@ -71,7 +71,7 @@ const options = {
       },
       axisLabel: {
         show: true,
-        color: '#546778'
+        color: '#D1E1FF'
       },
       splitLine: {
         // 网格线

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

@@ -0,0 +1,208 @@
+<template>
+  <div class="priPressInfo">
+    <div ref="priPressRef" class="priPressechart" />
+  </div>
+</template>
+<script lang="ts" setup>
+import * as echarts from 'echarts';
+import { Ref } from 'vue';
+import { getrealTime } from '@/api/dataVisual/index';
+import useCounter from '@/store/modules/date';
+const counterStore = useCounter();
+const yearMonthDay = ref();
+const priPressRef: Ref<HTMLElement | any> = ref(null);
+const deptId = ref('208');
+
+const options = {
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'cross'
+    }
+  },
+  legend: {
+    top: 10,
+    right: 10,
+    itemWidth: 11,
+    itemHeight: 2,
+    textStyle: {
+      color: '#D1E1FF',
+      fontSize: 14
+    }
+  },
+  grid: {
+    top: '20%',
+    left: '0',
+    right: '0',
+    bottom: '0',
+    containLabel: true
+  },
+  dataZoom: [
+    {
+      type: 'inside',
+      show: false,
+      startValue: 0,
+      endValue: 10,
+      height: '10',
+      bottom: '0'
+    }
+  ],
+  dataset: {
+    source: [
+      // ['name', '换热站11', '换热站22', '换热站33', '换热站4', '换热站5', '换热站6', '换热站7'],
+      // ['回压-低', 50, 22, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
+      // ['供压-低', 10, 19, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
+      // ['回压-中', 2.0, 22, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
+      // ['供压-中', 2.6, 19, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
+      // ['回压-高', 2.0, 22, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
+      // ['供压-高', 2.6, 19, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
+    ]
+  },
+  xAxis: {
+    type: 'category',
+    axisLabel: {
+      show: true,
+      color: '#D1E1FF'
+    }
+  },
+  yAxis: [
+    {
+      type: 'value',
+      name: '',
+      scale: true, //自适应
+      nameTextStyle: {
+        color: '#D1E1FF',
+        fontSize: 12,
+        padding: [0, 0, 0, 0] //name文字位置 对应 上右下左
+      },
+      axisTick: {
+        // 轴刻度
+        show: false
+      },
+      axisLabel: {
+        show: true,
+        color: '#D1E1FF'
+      },
+      splitLine: {
+        // 网格线
+        show: true,
+        lineStyle: {
+          //分割线
+          color: '#306269',
+          width: 1,
+          opacity: 0.2
+        }
+      }
+    }
+  ],
+  series: [
+    {
+      type: 'bar',
+      seriesLayoutBy: 'row',
+      stack: 'Ad',
+      barWidth: 15,
+      emphasis: {
+        focus: 'series'
+      }
+    },
+    {
+      type: 'bar',
+      seriesLayoutBy: 'row',
+      stack: 'Ad',
+      barWidth: 15,
+      emphasis: {
+        focus: 'series'
+      }
+    },
+    {
+      type: 'bar',
+      seriesLayoutBy: 'row',
+      barWidth: 15,
+      stack: 'Low Zone',
+      emphasis: {
+        focus: 'series'
+      }
+    },
+    {
+      type: 'bar',
+      seriesLayoutBy: 'row',
+      barWidth: 15,
+      stack: 'Low Zone',
+      emphasis: {
+        focus: 'series'
+      }
+    },
+    {
+      type: 'bar',
+      seriesLayoutBy: 'row',
+      barWidth: 15,
+      stack: 'High Area',
+      emphasis: {
+        focus: 'series'
+      }
+    },
+    {
+      type: 'bar',
+      seriesLayoutBy: 'row',
+      barWidth: 15,
+      stack: 'High Area',
+      emphasis: {
+        focus: 'series'
+      }
+    }
+  ]
+};
+
+onMounted(() => {
+  // 图表初始化
+  const chart = echarts.init(priPressRef.value);
+  chart.setOption(options);
+  // getCompany();
+
+  // 大小自适应
+  window.addEventListener('resize', () => {
+    chart.resize();
+  });
+});
+watchEffect(() => {
+  const dataStr = counterStore.deptIdStr;
+  if (dataStr != '') {
+    deptId.value = dataStr;
+    getCompany();
+  }
+});
+function getCompany() {
+  //获取图表数据
+  const params = {
+    orgCode: deptId.value,
+    viewType: 'heatSourceC'
+  };
+  getrealTime(params).then((res: any) => {
+    const chart = echarts.init(priPressRef.value);
+    if (res.code === 200 && Object.keys(res.data).length != 0) {
+      options.dataset.source = res.data.source;
+      options.yAxis[0].name = `Mpa`;
+      chart.setOption(options);
+    } else {
+      chart.showLoading({
+        text: '暂无数据',
+        color: '#1A2537',
+        textColor: '#d2def6',
+        maskColor: '#1A2537',
+        fontSize: 16,
+        zlevel: 0
+      });
+    }
+  });
+}
+</script>
+<style lang="scss" scoped>
+.priPressInfo {
+  width: 100%;
+  height: 318px;
+  .priPressechart {
+    width: 100%;
+    height: 318px;
+  }
+}
+</style>

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

@@ -0,0 +1,188 @@
+<template>
+  <div class="priTempInfo">
+    <div ref="priTempRef" class="priTempEchart" />
+  </div>
+</template>
+<script lang="ts" setup>
+import * as echarts from 'echarts';
+import { Ref } from 'vue';
+import { getrealTime } from '@/api/dataVisual/index';
+import useCounter from '@/store/modules/date';
+const counterStore = useCounter();
+const priTempRef: Ref<HTMLElement | any> = ref(null);
+const deptId = ref('208');
+
+const options = {
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'cross'
+    }
+  },
+  legend: {
+    top: 10,
+    right: 10,
+    itemWidth: 11,
+    itemHeight: 2,
+    textStyle: {
+      color: '#fff',
+      fontSize: 14
+    }
+  },
+  grid: {
+    top: '20%',
+    left: '0',
+    right: '0',
+    bottom: '0',
+    containLabel: true
+  },
+  dataZoom: [
+    {
+      type: 'inside',
+      show: false,
+      startValue: 0,
+      endValue: 10,
+      height: '10',
+      bottom: '0'
+    }
+  ],
+  dataset: {
+    source: [
+      // ['name', '换热站11', '换热站22', '换热站33', '换热站4', '换热站5', '换热站6', '换热站7'],
+      // ['一网回水(低区)', 2.0, 22, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
+      // ['一网回水(中区)', 2.6, 19, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
+      // ['一网回水(高区)', 3.2, 15, 8.0, 22.5, 30, 65, 182.8, 198.2, 50.2, 12.2, 8.0, 2.2],
+      // ['一网供温(低区)', 2.0, 18, 12, 70.1, 30.9, 50.7, 80.2, 23.4, 23.0, 16.5, 12.0, 6.2]
+    ]
+  },
+  xAxis: {
+    type: 'category',
+    axisLabel: {
+      show: true,
+      color: '#D1E1FF'
+    }
+  },
+  yAxis: [
+    {
+      type: 'value',
+      name: '',
+      scale: true, //自适应
+      nameTextStyle: {
+        color: '#D1E1FF',
+        fontSize: 12,
+        padding: [0, 0, 0, 0] //name文字位置 对应 上右下左
+      },
+      axisTick: {
+        // 轴刻度
+        show: false
+      },
+      axisLabel: {
+        show: true,
+        color: '#D1E1FF'
+      },
+      splitLine: {
+        // 网格线
+        show: true,
+        lineStyle: {
+          //分割线
+          color: '#306269',
+          width: 1,
+          opacity: 0.2
+        }
+      }
+    }
+  ],
+  series: [
+    {
+      type: 'bar',
+      seriesLayoutBy: 'row',
+      tooltip: {
+        valueFormatter: function (value: any) {
+          return value + ' ℃';
+        }
+      }
+    },
+    {
+      type: 'bar',
+      seriesLayoutBy: 'row',
+      tooltip: {
+        valueFormatter: function (value: any) {
+          return value + ' ℃';
+        }
+      }
+    },
+    {
+      type: 'bar',
+      seriesLayoutBy: 'row',
+      tooltip: {
+        valueFormatter: function (value: any) {
+          return value + ' ℃';
+        }
+      }
+    },
+    {
+      type: 'line',
+      seriesLayoutBy: 'row',
+      tooltip: {
+        valueFormatter: function (value: any) {
+          return value + ' °C';
+        }
+      }
+    }
+  ]
+};
+
+onMounted(() => {
+  // 图表初始化
+  const chart = echarts.init(priTempRef.value);
+  chart.setOption(options);
+  // getElect();
+
+  // 大小自适应
+  window.addEventListener('resize', () => {
+    chart.resize();
+  });
+});
+watchEffect(() => {
+  const dataStr = counterStore.deptIdStr;
+  if (dataStr != '') {
+    deptId.value = dataStr;
+    getElect();
+  }
+});
+function getElect() {
+  //获取图表数据
+  const params = {
+    orgCode: deptId.value,
+    viewType: 'heatSourceA'
+  };
+  getrealTime(params).then((res: any) => {
+    const chart = echarts.init(priTempRef.value);
+    if (res.code === 200 && Object.keys(res.data).length != 0) {
+      options.dataset.source = res.data.source;
+      options.yAxis[0].name = `℃`;
+      chart.setOption(options);
+    } else {
+      chart.showLoading({
+        text: '暂无数据',
+        color: '#1A2537',
+        textColor: '#d2def6',
+        maskColor: '#1A2537',
+        fontSize: 16,
+        zlevel: 0
+      });
+    }
+  });
+}
+</script>
+<style lang="scss" scoped>
+.priTempInfo {
+  width: 100%;
+  height: 318px;
+
+  .priTempEchart {
+    width: 100%;
+    height: 318px;
+  }
+}
+</style>

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

@@ -0,0 +1,208 @@
+<template>
+  <div class="secPressInfo">
+    <div ref="secPressRef" class="secPressEchart" />
+  </div>
+</template>
+<script lang="ts" setup>
+import * as echarts from 'echarts';
+import { Ref } from 'vue';
+import { getrealTime } from '@/api/dataVisual/index';
+import useCounter from '@/store/modules/date';
+const counterStore = useCounter();
+const yearMonthDay = ref();
+const secPressRef: Ref<HTMLElement | any> = ref(null);
+const deptId = ref('208');
+
+const options = {
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'cross'
+    }
+  },
+  legend: {
+    top: 10,
+    right: 10,
+    itemWidth: 11,
+    itemHeight: 2,
+    textStyle: {
+      color: '#D1E1FF',
+      fontSize: 14
+    }
+  },
+  grid: {
+    top: '20%',
+    left: '0',
+    right: '0',
+    bottom: '0',
+    containLabel: true
+  },
+  dataZoom: [
+    {
+      type: 'inside',
+      show: false,
+      startValue: 0,
+      endValue: 10,
+      height: '10',
+      bottom: '0'
+    }
+  ],
+  dataset: {
+    source: [
+      // ['name', '换热站11', '换热站22', '换热站33', '换热站4', '换热站5', '换热站6', '换热站7'],
+      // ['回压-低', 50, 22, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
+      // ['供压-低', 10, 19, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
+      // ['回压-中', 2.0, 22, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
+      // ['供压-中', 2.6, 19, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
+      // ['回压-高', 2.0, 22, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
+      // ['供压-高', 2.6, 19, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
+    ]
+  },
+  xAxis: {
+    type: 'category',
+    axisLabel: {
+      show: true,
+      color: '#D1E1FF'
+    }
+  },
+  yAxis: [
+    {
+      type: 'value',
+      name: '',
+      scale: true, //自适应
+      nameTextStyle: {
+        color: '#D1E1FF',
+        fontSize: 12,
+        padding: [0, 0, 0, 0] //name文字位置 对应 上右下左
+      },
+      axisTick: {
+        // 轴刻度
+        show: false
+      },
+      axisLabel: {
+        show: true,
+        color: '#D1E1FF'
+      },
+      splitLine: {
+        // 网格线
+        show: true,
+        lineStyle: {
+          //分割线
+          color: '#306269',
+          width: 1,
+          opacity: 0.2
+        }
+      }
+    }
+  ],
+  series: [
+    {
+      type: 'bar',
+      seriesLayoutBy: 'row',
+      stack: 'Ad',
+      barWidth: 15,
+      emphasis: {
+        focus: 'series'
+      }
+    },
+    {
+      type: 'bar',
+      seriesLayoutBy: 'row',
+      stack: 'Ad',
+      barWidth: 15,
+      emphasis: {
+        focus: 'series'
+      }
+    },
+    {
+      type: 'bar',
+      seriesLayoutBy: 'row',
+      barWidth: 15,
+      stack: 'Low Zone',
+      emphasis: {
+        focus: 'series'
+      }
+    },
+    {
+      type: 'bar',
+      seriesLayoutBy: 'row',
+      barWidth: 15,
+      stack: 'Low Zone',
+      emphasis: {
+        focus: 'series'
+      }
+    },
+    {
+      type: 'bar',
+      seriesLayoutBy: 'row',
+      barWidth: 15,
+      stack: 'High Area',
+      emphasis: {
+        focus: 'series'
+      }
+    },
+    {
+      type: 'bar',
+      seriesLayoutBy: 'row',
+      barWidth: 15,
+      stack: 'High Area',
+      emphasis: {
+        focus: 'series'
+      }
+    }
+  ]
+};
+
+onMounted(() => {
+  // 图表初始化
+  const chart = echarts.init(secPressRef.value);
+  chart.setOption(options);
+  // getCompany();
+
+  // 大小自适应
+  window.addEventListener('resize', () => {
+    chart.resize();
+  });
+});
+watchEffect(() => {
+  const dataStr = counterStore.deptIdStr;
+  if (dataStr != '') {
+    deptId.value = dataStr;
+    getCompany();
+  }
+});
+function getCompany() {
+  //获取图表数据
+  const params = {
+    orgCode: deptId.value,
+    viewType: 'heatSourceD'
+  };
+  getrealTime(params).then((res: any) => {
+    const chart = echarts.init(secPressRef.value);
+    if (res.code === 200 && Object.keys(res.data).length != 0) {
+      options.dataset.source = res.data.source;
+      options.yAxis[0].name = `Mpa`;
+      chart.setOption(options);
+    } else {
+      chart.showLoading({
+        text: '暂无数据',
+        color: '#1A2537',
+        textColor: '#d2def6',
+        maskColor: '#1A2537',
+        fontSize: 16,
+        zlevel: 0
+      });
+    }
+  });
+}
+</script>
+<style lang="scss" scoped>
+.secPressInfo {
+  width: 100%;
+  height: 318px;
+  .secPressEchart {
+    width: 100%;
+    height: 318px;
+  }
+}
+</style>

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

@@ -0,0 +1,208 @@
+<template>
+  <div class="secTempInfo">
+    <div ref="secTempRef" class="secTempEchart" />
+  </div>
+</template>
+<script lang="ts" setup>
+import * as echarts from 'echarts';
+import { Ref } from 'vue';
+import { getrealTime } from '@/api/dataVisual/index';
+import useCounter from '@/store/modules/date';
+const counterStore = useCounter();
+const yearMonthDay = ref();
+const secTempRef: Ref<HTMLElement | any> = ref(null);
+const deptId = ref('208');
+
+const options = {
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'cross'
+    }
+  },
+  legend: {
+    top: 10,
+    right: 10,
+    itemWidth: 11,
+    itemHeight: 2,
+    textStyle: {
+      color: '#D1E1FF',
+      fontSize: 14
+    }
+  },
+  grid: {
+    top: '20%',
+    left: '0',
+    right: '0',
+    bottom: '0',
+    containLabel: true
+  },
+  dataZoom: [
+    {
+      type: 'inside',
+      show: false,
+      startValue: 0,
+      endValue: 10,
+      height: '10',
+      bottom: '0'
+    }
+  ],
+  dataset: {
+    source: [
+      // ['name', '换热站11', '换热站22', '换热站33', '换热站4', '换热站5', '换热站6', '换热站7'],
+      // ['回温-低', 2.0, 22, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
+      // ['供温-低', 2.6, 19, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
+      // ['回温-中', 2.0, 22, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
+      // ['供温-中', 2.6, 19, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
+      // ['回温-高', 2.0, 22, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
+      // ['供温-高', 2.6, 19, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
+    ]
+  },
+  xAxis: {
+    type: 'category',
+    axisLabel: {
+      show: true,
+      color: '#D1E1FF'
+    }
+  },
+  yAxis: [
+    {
+      type: 'value',
+      name: '',
+      scale: true, //自适应
+      nameTextStyle: {
+        color: '#D1E1FF',
+        fontSize: 12,
+        padding: [0, 0, 0, 0] //name文字位置 对应 上右下左
+      },
+      axisTick: {
+        // 轴刻度
+        show: false
+      },
+      axisLabel: {
+        show: true,
+        color: '#D1E1FF'
+      },
+      splitLine: {
+        // 网格线
+        show: true,
+        lineStyle: {
+          //分割线
+          color: '#306269',
+          width: 1,
+          opacity: 0.2
+        }
+      }
+    }
+  ],
+  series: [
+    {
+      type: 'bar',
+      seriesLayoutBy: 'row',
+      stack: 'Ad',
+      barWidth: 15,
+      emphasis: {
+        focus: 'series'
+      }
+    },
+    {
+      type: 'bar',
+      seriesLayoutBy: 'row',
+      stack: 'Ad',
+      barWidth: 15,
+      emphasis: {
+        focus: 'series'
+      }
+    },
+    {
+      type: 'bar',
+      seriesLayoutBy: 'row',
+      barWidth: 15,
+      stack: 'Low Zone',
+      emphasis: {
+        focus: 'series'
+      }
+    },
+    {
+      type: 'bar',
+      seriesLayoutBy: 'row',
+      barWidth: 15,
+      stack: 'Low Zone',
+      emphasis: {
+        focus: 'series'
+      }
+    },
+    {
+      type: 'bar',
+      seriesLayoutBy: 'row',
+      barWidth: 15,
+      stack: 'High Area',
+      emphasis: {
+        focus: 'series'
+      }
+    },
+    {
+      type: 'bar',
+      seriesLayoutBy: 'row',
+      barWidth: 15,
+      stack: 'High Area',
+      emphasis: {
+        focus: 'series'
+      }
+    }
+  ]
+};
+
+onMounted(() => {
+  // 图表初始化
+  const chart = echarts.init(secTempRef.value);
+  chart.setOption(options);
+  // getCompany();
+
+  // 大小自适应
+  window.addEventListener('resize', () => {
+    chart.resize();
+  });
+});
+watchEffect(() => {
+  const dataStr = counterStore.deptIdStr;
+  if (dataStr != '') {
+    deptId.value = dataStr;
+    getCompany();
+  }
+});
+function getCompany() {
+  //获取图表数据
+  const params = {
+    orgCode: deptId.value,
+    viewType: 'heatSourceB'
+  };
+  getrealTime(params).then((res: any) => {
+    const chart = echarts.init(secTempRef.value);
+    if (res.code === 200 && Object.keys(res.data).length != 0) {
+      options.dataset.source = res.data.source;
+      options.yAxis[0].name = `℃`;
+      chart.setOption(options);
+    } else {
+      chart.showLoading({
+        text: '暂无数据',
+        color: '#1A2537',
+        textColor: '#d2def6',
+        maskColor: '#1A2537',
+        fontSize: 16,
+        zlevel: 0
+      });
+    }
+  });
+}
+</script>
+<style lang="scss" scoped>
+.secTempInfo {
+  width: 100%;
+  height: 318px;
+  .secTempEchart {
+    width: 100%;
+    height: 318px;
+  }
+}
+</style>

src/views/data-visual/components/table - 副本.vue

@@ -0,0 +1,142 @@
+<template>
+  <div class="tableInfo">
+    <el-table
+      class="tableClass"
+      :data="tableData"
+      header-row-class-name="headerRow"
+      header-cell-class-name="headerCell"
+      row-class-name="rowClass"
+      cell-class-name="cellClass"
+      stripe
+    >
+      <el-table-column prop="id" label="序号" align="center" width="80" />
+      <el-table-column prop="name" label="换热站" align="center" width="180" show-overflow-tooltip />
+      <el-table-column prop="date" label="Date" align="center" />
+      <el-table-column prop="name" label="Name" align="center" />
+      <el-table-column prop="address" label="Address" align="center" />
+    </el-table>
+  </div>
+</template>
+<script lang="ts" setup>
+const tableData = [
+  {
+    id: '1',
+    date: '2016-05-03',
+    name: '大唐管井',
+    address: 'No. 189, Grove St, Los Angeles'
+  },
+  {
+    id: '11',
+    date: '2016-05-02',
+    name: '汪家鑫城二期',
+    address: 'No. 189, Grove St, Los Angeles'
+  },
+  {
+    id: '12',
+    date: '2016-05-04',
+    name: '东湖紫东苑（兆城紫东苑）',
+    address: 'No. 189, Grove St, Los Angeles'
+  },
+  {
+    id: '22',
+    date: '2016-05-01',
+    name: '汪家鑫城一期B区A区C区',
+    address: 'No. 189, Grove St, Los Angeles'
+  },
+  {
+    id: '1',
+    date: '2016-05-03',
+    name: '大唐管井',
+    address: 'No. 189, Grove St, Los Angeles'
+  },
+  {
+    id: '11',
+    date: '2016-05-02',
+    name: '汪家鑫城二期',
+    address: 'No. 189, Grove St, Los Angeles'
+  },
+  {
+    id: '12',
+    date: '2016-05-04',
+    name: '东湖紫东苑（兆城紫东苑）',
+    address: 'No. 189, Grove St, Los Angeles'
+  },
+  {
+    id: '22',
+    date: '2016-05-01',
+    name: '汪家鑫城一期B区A区C区',
+    address: 'No. 189, Grove St, Los Angeles'
+  },
+  {
+    id: '1',
+    date: '2016-05-03',
+    name: '大唐管井',
+    address: 'No. 189, Grove St, Los Angeles'
+  },
+  {
+    id: '11',
+    date: '2016-05-02',
+    name: '汪家鑫城二期',
+    address: 'No. 189, Grove St, Los Angeles'
+  },
+  {
+    id: '12',
+    date: '2016-05-04',
+    name: '东湖紫东苑（兆城紫东苑）',
+    address: 'No. 189, Grove St, Los Angeles'
+  },
+  {
+    id: '22',
+    date: '2016-05-01',
+    name: '汪家鑫城一期B区A区C区',
+    address: 'No. 189, Grove St, Los Angeles'
+  }
+];
+</script>
+<style lang="scss" scoped>
+.tableInfo {
+  height: 378px;
+  margin-top: 20px;
+  overflow: hidden;
+  :deep(.tableClass) {
+    height: 376px;
+    font-size: 18px;
+    --el-table-border: none;
+    --el-table-text-color: #d2def6;
+    --el-table-header-text-color: #d2def6;
+    --el-table-row-hover-bg-color: none;
+    --el-table-header-bg-color: #0d1015;
+    --el-table-tr-bg-color: #0d1b35;
+    --el-fill-color-lighter: #0d1015;
+    .headerCell,.cellClass{
+      padding: 12px 0;
+    }
+    .el-table__inner-wrapper::before {
+      content: none;
+    }
+    .el-table__inner-wrapper {
+      .cellClass:hover {
+        background-color: transparent;
+      }
+    }
+    // .headerRow {
+    //   .headerCell {
+    //     border-bottom: none;
+    //     background-color: #0d1015;
+    //   }
+    // }
+    // .rowClass {
+    //   background-color: #0d1b35;
+    //   .cellClass {
+    //     border-bottom: none;
+    //     background-color: #0d1b35;
+    //   }
+    // }
+    // .rowClass.el-table__row--striped {
+    //   .cellClass {
+    //     background-color: #0d1015;
+    //   }
+    // }
+  }
+}
+</style>

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

@@ -1,143 +1,258 @@
 <template>
   <div class="tableInfo">
-    <el-table
-      class="tableClass"
+    <vxe-grid
+      ref="tableRef"
+      class="tableGrid"
+      align="center"
+      auto-resize
+      keep-source
+      header-row-class-name="headerRowClass"
+      header-cell-class-name="headerCellClass"
+      row-class-name="tableRowClass"
+      cell-class-name="tableCellClass"
+      :height="390"
+      :sort-config="{ multiple: true, trigger: 'cell' }"
+      :stripe="!tableBorder"
+      :border="tableBorder"
+      :column-config="{ resizable: true, useKey: true }"
+      :row-config="{ useKey: true }"
+      :columns="tableColumn"
       :data="tableData"
-      header-row-class-name="headerRow"
-      header-cell-class-name="headerCell"
-      row-class-name="rowClass"
-      cell-class-name="cellClass"
-      stripe
+      :loading="loadingShow"
+      show-overflow
+      @cell-dblclick="cellDBLClickEvent"
     >
-      <el-table-column prop="id" label="序号" align="center" width="80" />
-      <el-table-column prop="name" label="换热站" align="center" width="180" show-overflow-tooltip />
-      <el-table-column prop="date" label="Date" align="center" />
-      <el-table-column prop="name" label="Name" align="center" />
-      <el-table-column prop="address" label="Address" align="center" />
-    </el-table>
+      <template #deviceuuid_default="{ row }">
+        <div class="title">
+          <svg-icon
+            icon-class="warning_lights"
+            style="fill: currentColor; width: 15px; height: 15px; color: green"
+            v-if="row.deviceuuid.deviceStatus === 0"
+          />
+          <svg-icon
+            icon-class="warning_lights"
+            style="fill: currentColor; width: 15px; height: 15px; color: red"
+            v-if="row.deviceuuid.deviceStatus === 2"
+          />
+          <span class="name">{{ row.gTitle }}</span>
+        </div>
+      </template>
+      <template #pager>
+        <!--使用 pager 插槽-->
+        <vxe-pager
+          class="tablePage"
+          :layouts="['Sizes', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total']"
+          v-model:current-page="tablePage.currentPage"
+          v-model:page-size="tablePage.pageSize"
+          auto-hidden
+          size="mini"
+          :total="tablePage.total"
+          @page-change="handlePageChange"
+        >
+        </vxe-pager>
+      </template>
+    </vxe-grid>
   </div>
 </template>
 <script lang="ts" setup>
-const tableData = [
-  {
-    id: '1',
-    date: '2016-05-03',
-    name: '大唐管井',
-    address: 'No. 189, Grove St, Los Angeles'
-  },
-  {
-    id: '11',
-    date: '2016-05-02',
-    name: '汪家鑫城二期',
-    address: 'No. 189, Grove St, Los Angeles'
-  },
-  {
-    id: '12',
-    date: '2016-05-04',
-    name: '东湖紫东苑（兆城紫东苑）',
-    address: 'No. 189, Grove St, Los Angeles'
-  },
-  {
-    id: '22',
-    date: '2016-05-01',
-    name: '汪家鑫城一期B区A区C区',
-    address: 'No. 189, Grove St, Los Angeles'
-  },
-  {
-    id: '1',
-    date: '2016-05-03',
-    name: '大唐管井',
-    address: 'No. 189, Grove St, Los Angeles'
-  },
-  {
-    id: '11',
-    date: '2016-05-02',
-    name: '汪家鑫城二期',
-    address: 'No. 189, Grove St, Los Angeles'
-  },
-  {
-    id: '12',
-    date: '2016-05-04',
-    name: '东湖紫东苑（兆城紫东苑）',
-    address: 'No. 189, Grove St, Los Angeles'
-  },
-  {
-    id: '22',
-    date: '2016-05-01',
-    name: '汪家鑫城一期B区A区C区',
-    address: 'No. 189, Grove St, Los Angeles'
-  },
-  {
-    id: '1',
-    date: '2016-05-03',
-    name: '大唐管井',
-    address: 'No. 189, Grove St, Los Angeles'
-  },
-  {
-    id: '11',
-    date: '2016-05-02',
-    name: '汪家鑫城二期',
-    address: 'No. 189, Grove St, Los Angeles'
-  },
-  {
-    id: '12',
-    date: '2016-05-04',
-    name: '东湖紫东苑（兆城紫东苑）',
-    address: 'No. 189, Grove St, Los Angeles'
-  },
+import {
+  VxeGridProps,
+  VxeGridInstance,
+  VxeTableEvents,
+  VxeColumnPropTypes,
+  VXETable,
+  VxeFormInstance,
+  VxeFormPropTypes,
+  VxeFormEvents,
+  VxeTablePropTypes,
+  VxePagerEvents
+} from 'vxe-table';
+import { getTableHeader } from '@/api/table/list';
+import { getTableData } from '@/api/dataVisual/index';
+import { TableVo } from '@/api/table/types';
+import { tableStore } from '@/store/modules/table';
+import useStorage from '@/utils/useStorage';
+import useCounter from '@/store/modules/date';
+const counterStore = useCounter();
+const sessionStorageIns = useStorage('sessionStorage');
+const tableStoreCounter = tableStore();
+const loadingShow = ref(false);
+const tableColumn = ref([]);
+const tableData = ref<TableVo[]>();
+const deptId = ref('208');
+const tableBorder = ref(false);
+const tablePage = reactive({
+  total: 0,
+  currentPage: 1,
+  pageSize: 10
+});
+
+interface HeaderVo {
+  code: string;
+  name: string;
+  value: string;
+}
+const headerData = ref<HeaderVo[]>();
+
+onMounted(() => {
+  tableHeader();
+  // tableDatas();
+});
+watchEffect(() => {
+  const dataStr = counterStore.deptIdStr;
+  if (dataStr != '') {
+    deptId.value = dataStr;
+    tableDatas();
+  }
+});
+
+const handlePageChange: VxePagerEvents.PageChange = ({ currentPage, pageSize }) => {
+  //分页
+  tablePage.currentPage = currentPage;
+  tablePage.pageSize = pageSize;
+  sessionStorageIns.setUseStorage('currentPage', currentPage);
+  sessionStorageIns.setUseStorage('pageSize', pageSize);
+  tableDatas();
+};
+
+function tableHeader() {
+  //获取表格header
+  getTableHeader().then((res: any) => {
+    console.log(res);
+    // 列配置
+    const tableCessText = [
       {
-    id: '22',
-    date: '2016-05-01',
-    name: '汪家鑫城一期B区A区C区',
-    address: 'No. 189, Grove St, Los Angeles'
+        id: 0,
+        title: 'ID',
+        field: 'id',
+        type: 'html',
+        formatter: formatRole,
+        visible: false
       }
     ];
+    console.log(tableCessText);
+    res.data.map((item: any) => {
+      if (item.formatter != undefined || item.children != undefined) {
+        item.formatter = eval(item.formatter);
+        if (item.children && item.children.length) {
+          item.children.map((res: any) => {
+            res.formatter = eval(res.formatter);
+          });
+        }
+      }
+    });
+    nextTick(() => {
+      tableColumn.value = res.data;
+    });
+  });
+}
+
+function tableDatas() {
+  //获取表格数据
+  // const params = menuKey.value;
+  console.log('接口开始:', useDateFormat(new Date(), 'YYYY-MM-DD HH:mm:ss').value);
+  const params = {
+    pageNum: tablePage.currentPage,
+    pageSize: tablePage.pageSize,
+    orgCode: deptId.value
+  };
+  loadingShow.value = true;
+  getTableData(params).then((res: any) => {
+    if (res.code === 200) {
+      // tableData.value=oldData
+      tableData.value = res.rows;
+      if (res.rows.length != 0) {
+        counterStore.orgStore(res.rows[0].deviceuuid.uuid);
+      } else {
+        counterStore.orgStore('0');
+      }
+      tableStoreCounter.tableDataAction(res.rows);
+      tablePage.total = res.total;
+      // gridOptions.data = res.data;
+      loadingShow.value = false;
+      console.log('接口结束:', useDateFormat(new Date(), 'YYYY-MM-DD HH:mm:ss').value);
+    }
+  });
+}
+
+const cellDBLClickEvent: VxeTableEvents.CellDblclick<TableVo> = ({ row, column }) => {
+  //双击单元格
+  console.log('cellData--', row, column);
+  counterStore.orgStore(row.deviceuuid.uuid);
+};
+const formatRole: VxeColumnPropTypes.Formatter<HeaderVo> = ({ cellValue }) => {
+  //渲染表格字段
+  console.log('渲染开始:', useDateFormat(new Date(), 'YYYY-MM-DD HH:mm:ss').value);
+  const cellData = `
+  <span class="cellClass ${cellValue.alertProp === 1 ? 'warning' : ''}">
+    ${cellValue.ctrlPro.valueType != 'bool' ? cellValue.val : cellValue.val === 'true' ? '启' : '停'}
+    </span>`;
+  console.log('渲染完成:', useDateFormat(new Date(), 'YYYY-MM-DD HH:mm:ss').value);
+  return cellData;
+};
 </script>
 <style lang="scss" scoped>
 .tableInfo {
-  height: 378px;
+  height: 390px;
   margin-top: 20px;
-  border: 1px solid #3776b8;
+  background-color: #1a2537;
   overflow: hidden;
-  :deep(.tableClass) {
-    height: 376px;
-    font-size: 18px;
-    --el-table-border: none;
-    --el-table-text-color: #d2def6;
-    --el-table-header-text-color: #d2def6;
-    --el-table-row-hover-bg-color: none;
-    --el-table-header-bg-color: #0d1015;
-    --el-table-tr-bg-color: #0d1b35;
-    --el-fill-color-lighter: #0d1015;
-    .headerCell,.cellClass{
-      padding: 12px 0;
-    }
-    .el-table__inner-wrapper::before {
-      content: none;
-    }
-    .el-table__inner-wrapper {
-      .cellClass:hover {
+
+  .tableGrid {
+    --vxe-table-header-background-color: #151e2c;
+    --vxe-table-header-font-color: #d2def6;
+    --vxe-table-body-background-color: #1a2537;
+    --vxe-table-row-striped-background-color: #151e2c;
+    --vxe-table-border-color: #1a2537;
+    --vxe-table-resizable-line-color: #151e2c;
+    --vxe-font-size: 18px;
+    --vxe-font-color: #d2def6;
+    --vxe-loading-background-color: #1a2537;
+    --vxe-pager-background-color: #1a2537;
+    --vxe-input-background-color: #151e2c;
+    --vxe-select-panel-background-color: #151e2c;
+    --vxe-select-option-hover-background-color: #1a2537;
+
+    :deep(.vxe-table) {
+      .vxe-loading {
+        background-color: #1a2537;
+      }
+    }
+  }
+
+  /*滚动条整体部分*/
+  .tableGrid ::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+
+  /*滚动条的轨道*/
+  .tableGrid ::-webkit-scrollbar-track {
     background-color: transparent;
+    -webkit-border-radius: 8px;
+    -moz-border-radius: 8px;
+    border-radius: 8px;
   }
+
+  /*滚动条里面的小方块，能向上向下移动*/
+  .tableGrid ::-webkit-scrollbar-thumb {
+    background-color: rgb(147, 147, 153, 0.5);
+    -webkit-border-radius: 8px;
+    -moz-border-radius: 8px;
+    border-radius: 8px;
   }
-    // .headerRow {
-    //   .headerCell {
-    //     border-bottom: none;
-    //     background-color: #0d1015;
-    //   }
-    // }
-    // .rowClass {
-    //   background-color: #0d1b35;
-    //   .cellClass {
-    //     border-bottom: none;
-    //     background-color: #0d1b35;
-    //   }
-    // }
-    // .rowClass.el-table__row--striped {
-    //   .cellClass {
-    //     background-color: #0d1015;
-    //   }
-    // }
+
+  .tableGrid ::-webkit-scrollbar-thumb:hover {
+    background-color: #a8a8a8;
+  }
+
+  .tableGrid ::-webkit-scrollbar-thumb:active {
+    background-color: #787878;
+  }
+
+  /*边角，即两个滚动条的交汇处*/
+  .tableGrid ::-webkit-scrollbar-corner {
+    background-color: transparent;
   }
 }
 </style>

src/views/data-visual/index.scss

@@ -7,14 +7,14 @@
   transition: 0.3s;
   color: #fff;
   font-size: 16px;
-  background-color: #142036;
+  background-color: #24344E;
   z-index: 100;
   .header {
     position: relative;
     height: 125px;
     padding: 21px 40px 0 40px;
-    background-color: #0C182C;
-    border-bottom: 1px solid #3D4C64;
+    background-color: #1A2537;
+    border-bottom: 1px solid #47556C;
     // span {
     //   line-height: 62px;
     //   font-size: 30px;