From d470a3b16905a8b9ac68b84daec0f935567c6f95 Mon Sep 17 00:00:00 2001
From: fuguobin <fgbin2008@163.com>
Date: Wed, 6 Mar 2024 15:16:20 +0800
Subject: [PATCH] =?UTF-8?q?=E6=95=B0=E6=8D=AE=E7=9B=91=E6=8E=A7=E6=8E=A5?=
 =?UTF-8?q?=E5=8F=A3=E5=AD=97=E6=AE=B5=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/dashboard/index.ts                    |  27 +
 src/api/table/list.ts                         |  14 +-
 src/views/dashboard/components/BarChart.vue   | 472 +++++++++++-------
 src/views/dashboard/components/LineChart.vue  |  20 +-
 .../dashboard/components/returnChart.vue      | 340 +++++++++++++
 src/views/dashboard/index.vue                 |   6 +-
 .../monitoring/screen/components/main.vue     |   3 +-
 .../monitoring/screenData/components/main.vue |  16 +-
 8 files changed, 691 insertions(+), 207 deletions(-)
 create mode 100644 src/views/dashboard/components/returnChart.vue

diff --git a/src/api/dashboard/index.ts b/src/api/dashboard/index.ts
index 9494752..78af5ec 100644
--- a/src/api/dashboard/index.ts
+++ b/src/api/dashboard/index.ts
@@ -52,3 +52,30 @@ export function getDeviceCountApi() {
     method: 'get'
   });
 }
+/**
+ * 一网温度
+ */
+export function getFirstLineApi() {
+  return request({
+    url: '/home/first/line',
+    method: 'get'
+  });
+}
+/**
+ * 一网供温排行
+ */
+export function getSupplyTemperatureRanking() {
+  return request({
+    url: '/home/first/supplyTemperatureRanking',
+    method: 'get'
+  });
+}
+/**
+ * 一网回温排行
+ */
+export function getBackTemperatureRanking() {
+  return request({
+    url: '/home/first/backTemperatureRanking',
+    method: 'get'
+  });
+}
diff --git a/src/api/table/list.ts b/src/api/table/list.ts
index 98151bd..01897e2 100644
--- a/src/api/table/list.ts
+++ b/src/api/table/list.ts
@@ -59,6 +59,17 @@ export function getTableData(data: any) {
   });
 }
 
+/**
+ * 获取供暖办表格header
+ */
+export function getMockTableHeader(): AxiosPromise<[]> {
+  return request({
+    // url: '/bi/opt/getTableHeader',
+    url: '/dc/mock/data/monitor/table/header',
+    method: 'get'
+  });
+}
+
 /**
  * 获取供暖办表格数据
  *
@@ -66,7 +77,8 @@ export function getTableData(data: any) {
  */
 export function getMockTableData(data: any) {
   return request({
-    url: '/bi/opt/mock/getTableDataPage',
+    // url: '/bi/opt/mock/getTableDataPage',
+    url: '/dc/mock/data/monitor/table/data',
     method: 'post',
     data: data
   });
diff --git a/src/views/dashboard/components/BarChart.vue b/src/views/dashboard/components/BarChart.vue
index 78fd2c6..369697b 100644
--- a/src/views/dashboard/components/BarChart.vue
+++ b/src/views/dashboard/components/BarChart.vue
@@ -1,11 +1,18 @@
-<!--  线 + 柱混合图 -->
 <template>
-  <div :id="id" :class="className" :style="{ height, width }" />
+  <div ref="complaintRef" id="stackedLine" class="complaintLine" :style="{ height, width }" />
 </template>
-
 <script setup>
 import * as echarts from 'echarts';
-import { randomColor } from '@/utils/index';
+import { randomColor, endTime, debounce } from '@/utils/index';
+import { getSupplyTemperatureRanking } from '@/api/dashboard/index';
+// import { Ref } from 'vue';
+// const complaintRef: Ref<HTMLElement | any> = ref(null);
+import useCounter from '@/store/modules/date';
+const counterStore = useCounter();
+const yearMonthDay = ref();
+const timer = ref();
+const isCurrentRoute = ref(true);
+const mapEcharts = ref();
 
 const props = defineProps({
   id: {
@@ -28,203 +35,244 @@ const props = defineProps({
   }
 });
 
-const defualData = [
-  {
-    cdate: '2016',
-    cname: '换热站1,换热站2,换热站3,换热站4,换热站5,换热站6,换热站7,换热站8,换热站9,换热站10',
-    cut: '20.9,13.82,3.6,0.56,1.49,9.48,32,21,65,19'
-  },
-  {
-    cdate: '2017',
-    cname: '换热站1,换热站2,换热站3,换热站4,换热站5,换热站6,换热站7,换热站8,换热站9,换热站10',
-    cut: '18.7,12.82,13.6,9.56,12.49,13.48,21,23,52,53'
-  },
-  {
-    cdate: '2018',
-    cname: '换热站1,换热站2,换热站3,换热站4,换热站5,换热站6,换热站7,换热站8,换热站9,换热站10',
-    cut: '14.9,18.82,7.6,19.56,13.49,17.48,80,33,63,42'
-  },
-  {
-    cdate: '2019',
-    cname: '换热站1,换热站2,换热站3,换热站4,换热站5,换热站6,换热站7,换热站8,换热站9,换热站10',
-    cut: '16.9,3.82,13.6,15.56,12.49,14.48,54,35,40,20'
-  },
-  {
-    cdate: '2020',
-    cname: '换热站1,换热站2,换热站3,换热站4,换热站5,换热站6,换热站7,换热站8,换热站9,换热站10',
-    cut: '3.8,8.82,13.6,21.56,15.49,19.2,16,19,24,52'
-  },
-  {
-    cdate: '2021',
-    cname: '换热站1,换热站2,换热站3,换热站4,换热站5,换热站6,换热站7,换热站8,换热站9,换热站10',
-    cut: '23.9,16.82,13.6,17.56,14.49,19.98,18,12,30,35'
-  },
-  {
-    cdate: '2022',
-    cname: '换热站1,换热站2,换热站3,换热站4,换热站5,换热站6,换热站7,换热站8,换热站9,换热站10',
-    cut: '12,23,46,52,39,32,25,28,31,37'
-  },
-  {
-    cdate: '2023',
-    cname: '换热站1,换热站2,换热站3,换热站4,换热站5,换热站6,换热站7,换热站8,换热站9,换热站10',
-    cut: '52,59,60,49,42,36,10,9,21,28'
-  }
-];
-const colors = ['#5470c6', '#91cc75', '#fac858', '#1a94bc', '#f26b1f', '#5bae23'];
-const ccolors = {};
-var updateFrequency = 1000; // 数据更新速度
-var years = [];
-var startIndex = 0;
-for (var i = 0; i < defualData.length; ++i) {
-  years.push(defualData[i]);
+onMounted(() => {
+  getHeatRate();
+});
+// watchEffect(() => {
+//   const dataStr = counterStore.dateStr;
+//   if (dataStr != '') {
+//     yearMonthDay.value = counterStore.dateStr.split('-');
+//     getHeatRate();
+//   }
+// });
+function getHeatRate() {
+  //获取图表数据
+  const params = {};
+  getSupplyTemperatureRanking().then(res => {
+    if (res.code === 200 && Object.keys(res.data).length != 0) {
+      dataInfo(res.data);
+    }
+  });
 }
-// 获取第一个数据
-var startYear = years[startIndex].cdate;
-var startName = years[startIndex].cname.split(',');
-var startCut = years[startIndex].cut.split(',');
-for (let i = 0; i < startName.length; i++) {
-  if (i < 6) {
-    ccolors[startName[i]] = colors[i];
-  } else {
-    ccolors[startName[i]] = randomColor();
+function dataInfo(data) {
+  const defualData = data;
+  // const defualData = [
+  //   {
+  //     cdate: '2016',
+  //     cname: '换热站1,换热站2,换热站3,换热站4,换热站5,换热站6,换热站7,换热站8,换热站9,换热站10',
+  //     cut: '20.9,13.82,3.6,0.56,1.49,9.48,32,21,65,19'
+  //   },
+  //   {
+  //     cdate: '2017',
+  //     cname: '换热站1,换热站2,换热站3,换热站4,换热站5,换热站6,换热站7,换热站8,换热站9,换热站10',
+  //     cut: '18.7,12.82,13.6,9.56,12.49,13.48,21,23,52,53'
+  //   },
+  //   {
+  //     cdate: '2018',
+  //     cname: '换热站1,换热站2,换热站3,换热站4,换热站5,换热站6,换热站7,换热站8,换热站9,换热站10',
+  //     cut: '14.9,18.82,7.6,19.56,13.49,17.48,80,33,63,42'
+  //   },
+  //   {
+  //     cdate: '2019',
+  //     cname: '换热站1,换热站2,换热站3,换热站4,换热站5,换热站6,换热站7,换热站8,换热站9,换热站10',
+  //     cut: '16.9,3.82,13.6,15.56,12.49,14.48,54,35,40,20'
+  //   },
+  //   {
+  //     cdate: '2020',
+  //     cname: '换热站1,换热站2,换热站3,换热站4,换热站5,换热站6,换热站7,换热站8,换热站9,换热站10',
+  //     cut: '3.8,8.82,13.6,21.56,15.49,19.2,16,19,24,52'
+  //   },
+  //   {
+  //     cdate: '2021',
+  //     cname: '换热站1,换热站2,换热站3,换热站4,换热站5,换热站6,换热站7,换热站8,换热站9,换热站10',
+  //     cut: '23.9,16.82,13.6,17.56,14.49,19.98,18,12,30,35'
+  //   },
+  //   {
+  //     cdate: '2022',
+  //     cname: '换热站1,换热站2,换热站3,换热站4,换热站5,换热站6,换热站7,换热站8,换热站9,换热站10',
+  //     cut: '12,23,46,52,39,32,25,28,31,37'
+  //   },
+  //   {
+  //     cdate: '2023',
+  //     cname: '换热站1,换热站2,换热站3,换热站4,换热站5,换热站6,换热站7,换热站8,换热站9,换热站10',
+  //     cut: '52,59,60,49,42,36,10,9,21,28'
+  //   }
+  // ];
+  const colors = ['#5470c6', '#91cc75', '#fac858', '#1a94bc', '#f26b1f', '#5bae23'];
+  const ccolors = {};
+  const chart = echarts.init(document.getElementById('stackedLine'));
+  mapEcharts.value = chart;
+  var updateFrequency = 1000; // 数据更新速度
+  var years = [];
+  var startIndex = 0;
+  for (var i = 0; i < defualData.length; ++i) {
+    years.push(defualData[i]);
   }
-}
-console.log(ccolors);
+  // 获取第一个数据
+  var startYear = years[startIndex].cdate;
+  var startName = years[startIndex].cname.split(',');
+  var startCut = years[startIndex].cut.split(',');
+  for (let i = 0; i < startName.length; i++) {
+    if (i < 6) {
+      ccolors[startName[i]] = colors[i];
+    } else {
+      ccolors[startName[i]] = randomColor();
+    }
+  }
+  console.log(ccolors);
 
-const options = {
-  // tooltip: {
-  //   trigger: 'axis',
-  //   axisPointer: {
-  //     type: 'shadow'
-  //   }
-  // },
-  legend: {
-    right: 100,
-    itemWidth: 11,
-    itemHeight: 2,
-    color: '#fff',
-    fontSize: 14
-  },
-  grid: {
-    top: '0',
-    left: '0',
-    right: '0',
-    bottom: '0',
-    containLabel: true
-  },
-  xAxis: {
-    max: 'dataMax',
-    type: 'value',
-    nameTextStyle: {
-      color: '#000',
-      fontSize: 12,
-      padding: [0, 0, 0, 0] //name文字位置 对应 上右下左
+  const options = {
+    // tooltip: {
+    //   trigger: 'axis',
+    //   axisPointer: {
+    //     type: 'shadow'
+    //   }
+    // },
+    legend: {
+      right: 100,
+      itemWidth: 11,
+      itemHeight: 2,
+      color: '#fff',
+      fontSize: 14
     },
-    axisTick: {
-      // 轴刻度
-      show: false
-    },
-    axisLabel: {
-      show: true,
-      color: '#000',
-      formatter: function (n) {
-        return Math.round(n) + '';
-      }
+    grid: {
+      top: '0',
+      left: '0',
+      right: '10%',
+      bottom: '0',
+      containLabel: true
     },
-    splitLine: {
-      // 网格线
-      show: true,
-      lineStyle: {
-        //分割线
-        type: 'dashed',
-        color: '#306269',
-        width: 1,
-        opacity: 0.2
+    dataZoom: [
+      //Y轴滑动条
+      {
+        type: 'slider',
+        show: true,
+        yAxisIndex: [0],
+        width: 8,
+        height: '90%',
+        right: '10',
+        startValue: 0,
+        endValue: 10,
+        zoomLoxk: true,
+        top: 'middle'
+      },
+      {
+        type: 'inside',
+        yAxisIndex: [0],
+        zoomOnMouseWheel: true,
+        moveOnMouseMove: true,
+        moveOnMouseWheel: true
       }
-    }
-  },
-  dataset: {
-    source: defualData
-  },
-  yAxis: {
-    type: 'category',
-    nameTextStyle: {
-      color: '#000',
-      fontSize: 12,
-      padding: [0, 0, 0, 0] //name文字位置 对应 上右下左
-    },
-    axisTick: {
-      // 轴刻度
-      show: false
-    },
-    axisLabel: {
-      show: true,
-      color: '#000',
-      rich: {
-        flag: {
-          fontSize: 25,
-          padding: 5
+    ],
+    xAxis: {
+      max: 'dataMax',
+      type: 'value',
+      nameTextStyle: {
+        color: '#000',
+        fontSize: 12,
+        padding: [0, 0, 0, 0] //name文字位置 对应 上右下左
+      },
+      axisTick: {
+        // 轴刻度
+        show: false
+      },
+      axisLabel: {
+        show: true,
+        color: '#000',
+        formatter: function (n) {
+          return Math.round(n) + '';
+        }
+      },
+      splitLine: {
+        // 网格线
+        show: true,
+        lineStyle: {
+          //分割线
+          type: 'dashed',
+          color: '#306269',
+          width: 1,
+          opacity: 0.2
         }
       }
     },
-    inverse: true,
-    animationDuration: 300, //第一次柱条排序动的时长
-    animationDurationUpdate: 300, //第一次后柱条排序动画时长
-    data: startName
-  },
-  series: [
-    {
-      // name: '2023',
-      type: 'bar',
-      barWidth: 20, //柱宽
-      showBackground: false,
-      realtimeSort: true, // 开启该动态排序效果
-      itemStyle: {
-        color: function (param) {
-          return ccolors[param.name];
-        }
+    dataset: {
+      source: defualData
+    },
+    yAxis: {
+      type: 'category',
+      nameTextStyle: {
+        color: '#000',
+        fontSize: 12,
+        padding: [0, 0, 0, 0] //name文字位置 对应 上右下左
       },
-      encode: {
-        x: 0,
-        y: 3
+      axisTick: {
+        // 轴刻度
+        show: false
       },
-      label: {
+      axisLabel: {
         show: true,
-        precision: 1,
-        position: 'right',
         color: '#000',
-        valueAnimation: false // 柱子右侧的数字动态变化
-      },
-      emphasis: {
-        focus: 'series' //聚焦当前高亮的数据所在的系列的所有图形
+        rich: {
+          flag: {
+            fontSize: 25,
+            padding: 5
+          }
+        }
       },
-      data: startCut
-    }
-  ],
-  animationDuration: 0,
-  animationDurationUpdate: 3000,
-  animationEasing: 'linear',
-  animationEasingUpdate: 'linear',
-  graphic: {
-    elements: [
+      inverse: true,
+      animationDuration: 300, //第一次柱条排序动的时长
+      animationDurationUpdate: 300, //第一次后柱条排序动画时长
+      data: startName
+    },
+    series: [
       {
-        type: 'text',
-        right: 50,
-        bottom: 50,
-        style: {
-          text: startYear,
-          font: 'bolder 80px monospace',
-          fill: 'rgba(100, 100, 100, 0.25)'
+        // name: '2023',
+        type: 'bar',
+        // barWidth: 20, //柱宽
+        showBackground: false,
+        realtimeSort: true, // 开启该动态排序效果
+        itemStyle: {
+          color: function (param) {
+            return ccolors[param.name];
+          }
         },
-        z: 100
+        encode: {
+          x: 0,
+          y: 3
+        },
+        label: {
+          show: true,
+          precision: 1,
+          position: 'right',
+          color: '#000',
+          valueAnimation: false // 柱子右侧的数字动态变化
+        },
+        emphasis: {
+          focus: 'series' //聚焦当前高亮的数据所在的系列的所有图形
+        },
+        data: startCut
       }
-    ]
-  }
-};
-
-onMounted(() => {
-  // 图表初始化
-  const chart = echarts.init(document.getElementById(props.id));
+    ],
+    animationDuration: 0,
+    animationDurationUpdate: 3000,
+    animationEasing: 'linear',
+    animationEasingUpdate: 'linear',
+    graphic: {
+      elements: [
+        {
+          type: 'text',
+          right: 50,
+          bottom: 50,
+          style: {
+            text: startYear,
+            font: 'bolder 80px monospace',
+            fill: 'rgba(100, 100, 100, 0.25)'
+          },
+          z: 100
+        }
+      ]
+    }
+  };
   chart.setOption(options);
   for (var i = startIndex; i < defualData.length - 1; ++i) {
     (function (i) {
@@ -233,18 +281,60 @@ onMounted(() => {
       }, (i + 1) * updateFrequency);
     })(i);
   }
-
-  // 大小自适应
-  window.addEventListener('resize', () => {
-    chart.resize();
-  });
-
   function getDeviceInfos(year) {
     options.yAxis.data = year.cname.split(',');
     options.series[0].data = year.cut.split(',');
     options.graphic.elements[0].style.text = year.cdate;
-    const chart = echarts.init(document.getElementById(props.id));
+    const chart = echarts.init(document.getElementById('stackedLine'));
     chart.setOption(options);
   }
+  // 大小自适应
+  window.addEventListener('resize', () => {
+    chart.resize();
+  });
+}
+onUnmounted(() => {
+  if (mapEcharts.value) {
+    //echarts销毁函数
+    echarts.dispose(mapEcharts.value);
+    mapEcharts.value = null;
+  }
 });
+// function getDeviceInfoss() {
+//   //轮询获取柱形图数据
+//   const params = filterForm;
+//   params.startTime = currentEndTime.value;
+//   params.step = 6;
+//   params.stepType = '3';
+//   params.queryType = 2;
+//   console.log(params);
+//   getDeviceInfos(params).then(res => {
+//     if (res.code === 200 && Object.keys(res.data).length != 0) {
+//       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 => {
+//         res.data.mainInfos.forEach(newObj => {
+//           if (originalObj.name === newObj.name) {
+//             newObj.data.map(item => {
+//               originalObj.data.push(item);
+//             });
+//           }
+//         });
+//       });
+//       console.log(options.series);
+//       const chart = echarts.init(document.getElementById('stackedLine'));
+//       chart.setOption(options);
+//     } else {
+//       clearTimeout(timer.value);
+//     }
+//   });
+// }
 </script>
diff --git a/src/views/dashboard/components/LineChart.vue b/src/views/dashboard/components/LineChart.vue
index c34203d..1c371fa 100644
--- a/src/views/dashboard/components/LineChart.vue
+++ b/src/views/dashboard/components/LineChart.vue
@@ -1,10 +1,11 @@
 <!--  线 + 柱混合图 -->
 <template>
-  <div :id="id" :class="className" :style="{ height, width }" />
+  <div :ref="id" :id="id" :class="className" :style="{ height, width }" />
 </template>
 
 <script lang="ts" setup>
 import * as echarts from 'echarts';
+import { getFirstLineApi } from '@/api/dashboard/index';
 
 const props = defineProps({
   id: {
@@ -53,9 +54,9 @@ const options = {
   dataset: {
     source: [
       ['product', '2024-01-01', '2024-01-02', '2024-01-03', '2024-01-04', '2024-01-05', '2024-01-06', '2024-01-07'],
-      ['进温', 59.2, 78.9, 87.8, 79.5, 52.4, 90.7, 55],
+      ['供温', 59.2, 78.9, 87.8, 79.5, 52.4, 90.7, 55],
       ['回温', 42.0, 60.1, 62.8, 55.9, 30.2, 79.2, 20],
-      ['进温均温', 52, 77, 75, 70.1, 53.4, 50, 40],
+      ['供温均温', 52, 77, 75, 70.1, 53.4, 50, 40],
       ['回温均温', 40, 52, 61, 49, 20.4, 61.8, 10]
     ]
   },
@@ -136,10 +137,23 @@ onMounted(() => {
   // 图表初始化
   const chart = echarts.init(document.getElementById(props.id) as HTMLDivElement);
   chart.setOption(options);
+  getFirstLine();
 
   // 大小自适应
   window.addEventListener('resize', () => {
     chart.resize();
   });
 });
+function getFirstLine() {
+  //获取图表数据
+  const params = {};
+  getFirstLineApi().then((res: any) => {
+    if (res.code === 200 && Object.keys(res.data).length != 0) {
+      options.dataset.source = res.data.source;
+      options.yAxis[0].name = `单位(${res.data.unit})`;
+      const chart = echarts.init(document.getElementById(props.id) as HTMLDivElement);
+      chart.setOption(options);
+    }
+  });
+}
 </script>
diff --git a/src/views/dashboard/components/returnChart.vue b/src/views/dashboard/components/returnChart.vue
new file mode 100644
index 0000000..9c78bee
--- /dev/null
+++ b/src/views/dashboard/components/returnChart.vue
@@ -0,0 +1,340 @@
+<template>
+  <div ref="complaintRef" id="returnChart" class="complaintLine" :style="{ height, width }" />
+</template>
+<script setup>
+import * as echarts from 'echarts';
+import { randomColor, endTime, debounce } from '@/utils/index';
+import { getBackTemperatureRanking } from '@/api/dashboard/index';
+// import { Ref } from 'vue';
+// const complaintRef: Ref<HTMLElement | any> = ref(null);
+import useCounter from '@/store/modules/date';
+const counterStore = useCounter();
+const yearMonthDay = ref();
+const timer = ref();
+const isCurrentRoute = ref(true);
+const mapEcharts = ref();
+
+const props = defineProps({
+  id: {
+    type: String,
+    default: 'lineChart'
+  },
+  className: {
+    type: String,
+    default: ''
+  },
+  width: {
+    type: String,
+    default: '200px',
+    required: true
+  },
+  height: {
+    type: String,
+    default: '200px',
+    required: true
+  }
+});
+
+onMounted(() => {
+  getHeatRate();
+});
+// watchEffect(() => {
+//   const dataStr = counterStore.dateStr;
+//   if (dataStr != '') {
+//     yearMonthDay.value = counterStore.dateStr.split('-');
+//     getHeatRate();
+//   }
+// });
+function getHeatRate() {
+  //获取图表数据
+  const params = {};
+  getBackTemperatureRanking().then(res => {
+    if (res.code === 200 && Object.keys(res.data).length != 0) {
+      dataInfo(res.data);
+    }
+  });
+}
+function dataInfo(data) {
+  const defualData = data;
+  // const defualData = [
+  //   {
+  //     cdate: '2016',
+  //     cname: '换热站1,换热站2,换热站3,换热站4,换热站5,换热站6,换热站7,换热站8,换热站9,换热站10',
+  //     cut: '20.9,13.82,3.6,0.56,1.49,9.48,32,21,65,19'
+  //   },
+  //   {
+  //     cdate: '2017',
+  //     cname: '换热站1,换热站2,换热站3,换热站4,换热站5,换热站6,换热站7,换热站8,换热站9,换热站10',
+  //     cut: '18.7,12.82,13.6,9.56,12.49,13.48,21,23,52,53'
+  //   },
+  //   {
+  //     cdate: '2018',
+  //     cname: '换热站1,换热站2,换热站3,换热站4,换热站5,换热站6,换热站7,换热站8,换热站9,换热站10',
+  //     cut: '14.9,18.82,7.6,19.56,13.49,17.48,80,33,63,42'
+  //   },
+  //   {
+  //     cdate: '2019',
+  //     cname: '换热站1,换热站2,换热站3,换热站4,换热站5,换热站6,换热站7,换热站8,换热站9,换热站10',
+  //     cut: '16.9,3.82,13.6,15.56,12.49,14.48,54,35,40,20'
+  //   },
+  //   {
+  //     cdate: '2020',
+  //     cname: '换热站1,换热站2,换热站3,换热站4,换热站5,换热站6,换热站7,换热站8,换热站9,换热站10',
+  //     cut: '3.8,8.82,13.6,21.56,15.49,19.2,16,19,24,52'
+  //   },
+  //   {
+  //     cdate: '2021',
+  //     cname: '换热站1,换热站2,换热站3,换热站4,换热站5,换热站6,换热站7,换热站8,换热站9,换热站10',
+  //     cut: '23.9,16.82,13.6,17.56,14.49,19.98,18,12,30,35'
+  //   },
+  //   {
+  //     cdate: '2022',
+  //     cname: '换热站1,换热站2,换热站3,换热站4,换热站5,换热站6,换热站7,换热站8,换热站9,换热站10',
+  //     cut: '12,23,46,52,39,32,25,28,31,37'
+  //   },
+  //   {
+  //     cdate: '2023',
+  //     cname: '换热站1,换热站2,换热站3,换热站4,换热站5,换热站6,换热站7,换热站8,换热站9,换热站10',
+  //     cut: '52,59,60,49,42,36,10,9,21,28'
+  //   }
+  // ];
+  const colors = ['#5470c6', '#91cc75', '#fac858', '#1a94bc', '#f26b1f', '#5bae23'];
+  const ccolors = {};
+  const chart = echarts.init(document.getElementById('returnChart'));
+  mapEcharts.value = chart;
+  var updateFrequency = 1000; // 数据更新速度
+  var years = [];
+  var startIndex = 0;
+  for (var i = 0; i < defualData.length; ++i) {
+    years.push(defualData[i]);
+  }
+  // 获取第一个数据
+  var startYear = years[startIndex].cdate;
+  var startName = years[startIndex].cname.split(',');
+  var startCut = years[startIndex].cut.split(',');
+  for (let i = 0; i < startName.length; i++) {
+    if (i < 6) {
+      ccolors[startName[i]] = colors[i];
+    } else {
+      ccolors[startName[i]] = randomColor();
+    }
+  }
+  console.log(ccolors);
+
+  const options = {
+    // tooltip: {
+    //   trigger: 'axis',
+    //   axisPointer: {
+    //     type: 'shadow'
+    //   }
+    // },
+    legend: {
+      right: 100,
+      itemWidth: 11,
+      itemHeight: 2,
+      color: '#fff',
+      fontSize: 14
+    },
+    grid: {
+      top: '0',
+      left: '0',
+      right: '10%',
+      bottom: '0',
+      containLabel: true
+    },
+    dataZoom: [
+      //Y轴滑动条
+      {
+        type: 'slider',
+        show: true,
+        yAxisIndex: [0],
+        width: 8,
+        height: '90%',
+        right: '10',
+        startValue: 0,
+        endValue: 10,
+        zoomLoxk: true,
+        top: 'middle'
+      },
+      {
+        type: 'inside',
+        yAxisIndex: [0],
+        zoomOnMouseWheel: true,
+        moveOnMouseMove: true,
+        moveOnMouseWheel: true
+      }
+    ],
+    xAxis: {
+      max: 'dataMax',
+      type: 'value',
+      nameTextStyle: {
+        color: '#000',
+        fontSize: 12,
+        padding: [0, 0, 0, 0] //name文字位置 对应 上右下左
+      },
+      axisTick: {
+        // 轴刻度
+        show: false
+      },
+      axisLabel: {
+        show: true,
+        color: '#000',
+        formatter: function (n) {
+          return Math.round(n) + '';
+        }
+      },
+      splitLine: {
+        // 网格线
+        show: true,
+        lineStyle: {
+          //分割线
+          type: 'dashed',
+          color: '#306269',
+          width: 1,
+          opacity: 0.2
+        }
+      }
+    },
+    dataset: {
+      source: defualData
+    },
+    yAxis: {
+      type: 'category',
+      nameTextStyle: {
+        color: '#000',
+        fontSize: 12,
+        padding: [0, 0, 0, 0] //name文字位置 对应 上右下左
+      },
+      axisTick: {
+        // 轴刻度
+        show: false
+      },
+      axisLabel: {
+        show: true,
+        color: '#000',
+        rich: {
+          flag: {
+            fontSize: 25,
+            padding: 5
+          }
+        }
+      },
+      inverse: true,
+      animationDuration: 300, //第一次柱条排序动的时长
+      animationDurationUpdate: 300, //第一次后柱条排序动画时长
+      data: startName
+    },
+    series: [
+      {
+        // name: '2023',
+        type: 'bar',
+        // barWidth: 20, //柱宽
+        showBackground: false,
+        realtimeSort: true, // 开启该动态排序效果
+        itemStyle: {
+          color: function (param) {
+            return ccolors[param.name];
+          }
+        },
+        encode: {
+          x: 0,
+          y: 3
+        },
+        label: {
+          show: true,
+          precision: 1,
+          position: 'right',
+          color: '#000',
+          valueAnimation: false // 柱子右侧的数字动态变化
+        },
+        emphasis: {
+          focus: 'series' //聚焦当前高亮的数据所在的系列的所有图形
+        },
+        data: startCut
+      }
+    ],
+    animationDuration: 0,
+    animationDurationUpdate: 3000,
+    animationEasing: 'linear',
+    animationEasingUpdate: 'linear',
+    graphic: {
+      elements: [
+        {
+          type: 'text',
+          right: 50,
+          bottom: 50,
+          style: {
+            text: startYear,
+            font: 'bolder 80px monospace',
+            fill: 'rgba(100, 100, 100, 0.25)'
+          },
+          z: 100
+        }
+      ]
+    }
+  };
+  chart.setOption(options);
+  for (var i = startIndex; i < defualData.length - 1; ++i) {
+    (function (i) {
+      setTimeout(function () {
+        getDeviceInfos(years[i + 1]);
+      }, (i + 1) * updateFrequency);
+    })(i);
+  }
+  function getDeviceInfos(year) {
+    options.yAxis.data = year.cname.split(',');
+    options.series[0].data = year.cut.split(',');
+    options.graphic.elements[0].style.text = year.cdate;
+    const chart = echarts.init(document.getElementById('returnChart'));
+    chart.setOption(options);
+  }
+  // 大小自适应
+  window.addEventListener('resize', () => {
+    chart.resize();
+  });
+}
+onUnmounted(() => {
+  if (mapEcharts.value) {
+    //echarts销毁函数
+    echarts.dispose(mapEcharts.value);
+    mapEcharts.value = null;
+  }
+});
+// function getDeviceInfoss() {
+//   //轮询获取柱形图数据
+//   const params = filterForm;
+//   params.startTime = currentEndTime.value;
+//   params.step = 6;
+//   params.stepType = '3';
+//   params.queryType = 2;
+//   console.log(params);
+//   getDeviceInfos(params).then(res => {
+//     if (res.code === 200 && Object.keys(res.data).length != 0) {
+//       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 => {
+//         res.data.mainInfos.forEach(newObj => {
+//           if (originalObj.name === newObj.name) {
+//             newObj.data.map(item => {
+//               originalObj.data.push(item);
+//             });
+//           }
+//         });
+//       });
+//       console.log(options.series);
+//       const chart = echarts.init(document.getElementById('returnChart'));
+//       chart.setOption(options);
+//     } else {
+//       clearTimeout(timer.value);
+//     }
+//   });
+// }
+</script>
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index 3a7e8c3..a0c7b4e 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -72,14 +72,14 @@
         </el-col>
         <el-col :span="8">
           <el-card>
-            <template #header> 一网进温排行 </template>
+            <template #header> 一网供温排行 </template>
             <BarChart id="barChart" height="300px" width="100%" />
           </el-card>
         </el-col>
         <el-col :span="8">
           <el-card>
             <template #header> 一网回温排行 </template>
-            <BarChart id="barCharts" height="300px" width="100%" />
+            <ReturnChart id="returnChart" height="300px" width="100%" />
           </el-card>
         </el-col>
       </el-row>
@@ -102,7 +102,7 @@ import calendar from '@/utils/lunar';
 import countTo from '@/utils/countTo';
 import LineChart from './components/LineChart.vue';
 import BarChart from './components/BarChart.vue';
-import PieChart from './components/PieChart.vue';
+import ReturnChart from './components/returnChart.vue';
 import avatar from '@/assets/images/avatar.png';
 import mitt from '@/plugins/bus';
 
diff --git a/src/views/monitoring/screen/components/main.vue b/src/views/monitoring/screen/components/main.vue
index 86140a4..35d7954 100644
--- a/src/views/monitoring/screen/components/main.vue
+++ b/src/views/monitoring/screen/components/main.vue
@@ -308,7 +308,7 @@ mitt.on('tableMessage', (res: any) => {
         tableArray.splice(index, 1, item);
       }
     });
-    console.log('tableData--', tableArray);
+    // console.log('tableData--', tableArray);
     $table.loadData(tableArray);
     // if (res.code === 'datareal') {
     // const index = tableData.value.findIndex((obj) => obj.id === res.data.id);
@@ -440,6 +440,7 @@ const cellDBLClickEvent: VxeTableEvents.CellDblclick<TableVo> = ({ row, column }
   cellRow.value = row;
   cellColumn.value = column;
   cellField.value = cellField;
+  debugger;
   if (cellField.canBeControl === '1' && controlPerm) {
     modalTitle.value = column.title;
     ///formData.value.url = data.url;
diff --git a/src/views/monitoring/screenData/components/main.vue b/src/views/monitoring/screenData/components/main.vue
index 708f260..6533bed 100644
--- a/src/views/monitoring/screenData/components/main.vue
+++ b/src/views/monitoring/screenData/components/main.vue
@@ -36,19 +36,19 @@
       show-overflow
       @cell-dblclick="cellDBLClickEvent"
     >
-      <template #deviceuuid_default="{ row }">
+      <template #assetInfo_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"
+            v-if="row.assetInfo.assetStatus === '0'"
           />
           <svg-icon
             icon-class="warning_lights"
             style="fill: currentColor; width: 15px; height: 15px; color: red"
-            v-if="row.deviceuuid.deviceStatus === 2"
+            v-if="row.assetInfo.assetStatus === '2'"
           />
-          <span class="name" @click.native="nameClick(row.deviceuuid)">{{ row.gTitle }}</span>
+          <span class="name" @click.native="nameClick(row.assetInfo)">{{ row.gTitle }}</span>
         </div>
       </template>
       <template #pager>
@@ -128,7 +128,7 @@ import {
   VxeTablePropTypes,
   VxePagerEvents
 } from 'vxe-table';
-import { getTableHeader, getStationInfo, getMockTableData, editConfig, sendCtrl } from '@/api/table/list';
+import { getMockTableHeader, getStationInfo, getMockTableData, editConfig, sendCtrl } from '@/api/table/list';
 import { TableVo } from '@/api/table/types';
 import { tableStore } from '@/store/modules/table';
 import mitt from '@/plugins/bus';
@@ -167,7 +167,7 @@ const tablePage = reactive({
   currentPage: 1,
   pageSize: 10
 });
-// const fields = ref(['deviceuuid']) //需要合并的列数据字段
+// const fields = ref(['assetInfo']) //需要合并的列数据字段
 // const waringArrow = ref([])
 
 interface FormDataVO {
@@ -357,7 +357,7 @@ function stationInfo() {
 
 function tableHeader() {
   //获取表格header
-  getTableHeader().then((res: any) => {
+  getMockTableHeader().then((res: any) => {
     console.log(res);
     // 列配置
     const tableCessText = [
@@ -389,7 +389,7 @@ function tableHeader() {
     //   {
     //     id: 1,
     //     title: '设备名称',
-    //     field: 'deviceuuid',
+    //     field: 'assetInfo',
     //     colSort: 2,
     //     colType: '2',
     //     width: 150,