From 54c4bdc8ac0f1bc352a7e580edc5f447bb5b70b2 Mon Sep 17 00:00:00 2001
From: fuguobin <fgbin2008@163.com>
Date: Thu, 19 Oct 2023 18:02:37 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9B=BE=E8=A1=A8=E8=AF=A6=E6=83=85=E6=8A=98?=
 =?UTF-8?q?=E7=BA=BF=E5=9B=BE=E6=95=B0=E6=8D=AE=E5=A4=84=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/device/index.ts                       |  44 +-
 src/api/device/types.ts                       |  33 +
 src/types/auto-imports.d.ts                   |   4 -
 src/views/details/index - 副本 (2).vue      | 202 +++++
 src/views/details/index - 副本.vue          | 187 ++++
 src/views/details/index.scss                  |   9 +-
 src/views/details/index.vue                   | 807 +++++++++++++++---
 .../monitoring/screen/components/main.vue     | 160 ++--
 vite.config.ts                                |   6 +-
 9 files changed, 1273 insertions(+), 179 deletions(-)
 create mode 100644 src/views/details/index - 副本 (2).vue
 create mode 100644 src/views/details/index - 副本.vue

diff --git a/src/api/device/index.ts b/src/api/device/index.ts
index 370673d..27feca4 100644
--- a/src/api/device/index.ts
+++ b/src/api/device/index.ts
@@ -29,7 +29,7 @@ export function getDept(): AxiosPromise<[]> {
  */
 export function getDeviceList(params: number): AxiosPromise<deviceVo> {
   return request({
-    url: '/bi/configuration/getDeviceListByDept/'+params,
+    url: '/bi/configuration/getDeviceListByDept/' + params,
     method: 'get'
   });
 }
@@ -41,7 +41,7 @@ export function getDeviceList(params: number): AxiosPromise<deviceVo> {
  */
 export function getViewInfo(params: number): AxiosPromise<deviceVo> {
   return request({
-    url: '/bi/configuration/getViewInfoById/'+params,
+    url: '/bi/configuration/getViewInfoById/' + params,
     method: 'get'
   });
 }
@@ -58,3 +58,43 @@ export function editConfig(data: any) {
     data: data
   });
 }
+
+/**
+ * 获取图表详情设备筛选项
+ */
+export function getDevices(): AxiosPromise<[]> {
+  return request({
+    url: '/dc/dcDeviceEcharts/getDevices',
+    method: 'get'
+  });
+}
+/**
+ * 获取图表详情参数筛选项
+ */
+export function getParams(): AxiosPromise<[]> {
+  return request({
+    url: '/dc/dcDeviceEcharts/getParams',
+    method: 'get'
+  });
+}
+/**
+ * 获取图表详情分区筛选项
+ */
+export function getPortions(): AxiosPromise<[]> {
+  return request({
+    url: '/dc/dcDeviceEcharts/getPortions',
+    method: 'get'
+  });
+}
+/**
+ * 获取折线图数据
+ *
+ * @param data
+ */
+export function getDeviceInfos(data: any) {
+  return request({
+    url: '/dc/dcDeviceEcharts/getDeviceInfos',
+    method: 'post',
+    data: data
+  });
+}
diff --git a/src/api/device/types.ts b/src/api/device/types.ts
index 7208fe2..3c95d82 100644
--- a/src/api/device/types.ts
+++ b/src/api/device/types.ts
@@ -40,3 +40,36 @@ export interface headerVo {
   ctrlFlag: string;
   paramUnit: string;
 }
+export interface deetsVo {
+  centerDeviceCode: string;
+  deviceName: string;
+}
+export interface partitionVo {
+  createBy: string;
+  createTime: string;
+  cssClass: null;
+  default: boolean;
+  dictCode: number;
+  dictLabel: string;
+  dictSort: number;
+  dictType: string;
+  dictValue: string;
+  isDefault: null;
+  listClass: string;
+  remark: null;
+  status: string;
+  updateBy: null;
+  updateTime: null;
+}
+export interface parameterVo {
+  classType: string;
+  createTime: null;
+  deleteTime: null;
+  id: number;
+  note: null;
+  paramClassCode: string;
+  paramClassName: string;
+  paramUnit: string;
+  updateTime: null;
+  version: null;
+}
diff --git a/src/types/auto-imports.d.ts b/src/types/auto-imports.d.ts
index 5742656..e5c7bdb 100644
--- a/src/types/auto-imports.d.ts
+++ b/src/types/auto-imports.d.ts
@@ -5,8 +5,6 @@ declare global {
   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']
@@ -276,8 +274,6 @@ declare module 'vue' {
     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']>
diff --git a/src/views/details/index - 副本 (2).vue b/src/views/details/index - 副本 (2).vue
new file mode 100644
index 0000000..30ed388
--- /dev/null
+++ b/src/views/details/index - 副本 (2).vue	
@@ -0,0 +1,202 @@
+<template>
+  <div class="details">
+    <el-card class="search" shadow="always">
+      <el-form ref="searchRef" :inline="true" :model="searchForm" label-width="100px" class="demo-ruleForm">
+        <el-form-item label="时间" prop="time">
+          <el-date-picker
+            v-model="searchForm.time"
+            type="datetimerange"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
+            :default-time="defaultTime1"
+          />
+        </el-form-item>
+        <el-form-item label="颗粒度" prop="particle">
+          <el-select v-model="searchForm.particle" placeholder="请选择">
+            <el-option v-for="item in particleData" :key="item.value" :label="item.label" :value="item.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="设备" prop="device">
+          <el-select v-model="searchForm.device" placeholder="请选择">
+            <el-option v-for="item in optionss" :key="item.value" :label="item.label" :value="item.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="参数" prop="parameter">
+          <el-select v-model="searchForm.parameter" placeholder="请选择">
+            <el-option v-for="item in optionss" :key="item.value" :label="item.label" :value="item.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="submitForm(searchRef)">确认</el-button>
+          <el-button @click="resetForm(searchRef)">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+    <el-card class="echart" shadow="always">
+      <div class="comparisonInfo">
+        <div ref="stackedRef" class="stackedLine" />
+      </div>
+    </el-card>
+  </div>
+</template>
+<script lang="ts" setup>
+import * as echarts from 'echarts';
+import { Ref } from 'vue';
+const stackedRef: Ref<HTMLElement | any> = ref(null);
+import type { FormInstance } from 'element-plus';
+
+const searchRef = ref<FormInstance>();
+const defaultTime1 = new Date(2000, 1, 1, 12, 0, 0); // '12:00:00'
+const searchForm = reactive({
+  time: '',
+  particle: '',
+  device: '',
+  parameter: ''
+});
+
+const submitForm = (formEl: FormInstance | undefined) => {
+  if (!formEl) return;
+  formEl.validate(valid => {
+    if (valid) {
+      console.log('submit!');
+    } else {
+      console.log('error submit!');
+      return false;
+    }
+  });
+};
+
+const resetForm = (formEl: FormInstance | undefined) => {
+  if (!formEl) return;
+  formEl.resetFields();
+};
+const particleData = [
+  { label: '分钟', value: 1 },
+  { label: '小时', value: 2 }
+];
+const optionss = [
+  {
+    value: 'Option1',
+    label: 'Option1'
+  },
+  {
+    value: 'Option2',
+    label: 'Option2'
+  }
+];
+
+const colors = ['#EE6666', '#91CC75', '#5470C6'];
+const options = {
+  color: colors,
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'cross'
+    }
+  },
+  grid: {
+    right: '20%'
+  },
+  toolbox: {
+    feature: {
+      dataView: { show: true, readOnly: false },
+      restore: { show: true },
+      saveAsImage: { show: true }
+    }
+  },
+  legend: {
+    data: ['回温', '供压', '回压']
+  },
+  xAxis: [
+    {
+      type: 'category',
+      axisTick: {
+        alignWithLabel: true
+      },
+      // prettier-ignore
+      data: ['2021', '2022', '2023', '2024', '2025', '2026', '2027', '2028', '2029', '2030', '2031', '2032']
+    }
+  ],
+  yAxis: [
+    {
+      type: 'value',
+      name: '回温',
+      position: 'right',
+      alignTicks: true,
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: colors[0]
+        }
+      },
+      axisLabel: {
+        formatter: '{value} ml'
+      }
+    },
+    {
+      type: 'value',
+      name: '供压',
+      position: 'right',
+      alignTicks: true,
+      offset: 80,
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: colors[1]
+        }
+      },
+      axisLabel: {
+        formatter: '{value} ml'
+      }
+    },
+    {
+      type: 'value',
+      name: '回压',
+      position: 'left',
+      alignTicks: true,
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: colors[2]
+        }
+      },
+      axisLabel: {
+        formatter: '{value} °C'
+      }
+    }
+  ],
+  series: [
+    {
+      name: '回温',
+      type: 'line',
+      data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
+    },
+    {
+      name: '供压',
+      type: 'line',
+      yAxisIndex: 2,
+      data: [5.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
+    },
+    {
+      name: '回压',
+      type: 'line',
+      yAxisIndex: 1,
+      data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
+    }
+  ]
+};
+
+onMounted(() => {
+  // 图表初始化
+  const chart = echarts.init(stackedRef.value);
+  chart.setOption(options);
+
+  // 大小自适应
+  window.addEventListener('resize', () => {
+    chart.resize();
+  });
+});
+</script>
+<style lang="scss" scoped>
+@import './index.scss';
+</style>
diff --git a/src/views/details/index - 副本.vue b/src/views/details/index - 副本.vue
new file mode 100644
index 0000000..d513ea8
--- /dev/null
+++ b/src/views/details/index - 副本.vue	
@@ -0,0 +1,187 @@
+<template>
+  <div class="details">
+    <el-card class="search" shadow="always">
+      <el-form ref="searchRef" :inline="true" :model="searchForm" label-width="100px" class="demo-ruleForm">
+        <el-form-item label="时间" prop="time">
+          <el-date-picker
+            v-model="searchForm.time"
+            type="datetimerange"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
+            :default-time="defaultTime1"
+          />
+        </el-form-item>
+        <!-- <el-form-item label="颗粒度" prop="particle">
+          <el-select v-model="searchForm.particle" placeholder="请选择">
+            <el-option v-for="item in optionss" :key="item.value" :label="item.label" :value="item.value" />
+          </el-select>
+        </el-form-item> -->
+        <el-form-item label="设备" prop="device">
+          <el-select v-model="searchForm.device" placeholder="请选择">
+            <el-option v-for="item in optionss" :key="item.value" :label="item.label" :value="item.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="参数" prop="parameter">
+          <el-select v-model="searchForm.parameter" placeholder="请选择">
+            <el-option v-for="item in optionss" :key="item.value" :label="item.label" :value="item.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="submitForm(searchRef)">确认</el-button>
+          <el-button @click="resetForm(searchRef)">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+    <el-card class="echart" shadow="always">
+      <div class="comparisonInfo">
+        <div ref="stackedRef" class="stackedLine" />
+      </div>
+    </el-card>
+  </div>
+</template>
+<script lang="ts" setup>
+import * as echarts from 'echarts';
+import { Ref } from 'vue';
+const stackedRef: Ref<HTMLElement | any> = ref(null);
+import type { FormInstance } from 'element-plus';
+
+const searchRef = ref<FormInstance>();
+const defaultTime1 = new Date(2000, 1, 1, 12, 0, 0); // '12:00:00'
+const searchForm = reactive({
+  time: '',
+  particle: '',
+  device: '',
+  parameter: ''
+});
+
+const submitForm = (formEl: FormInstance | undefined) => {
+  if (!formEl) return;
+  formEl.validate(valid => {
+    if (valid) {
+      console.log('submit!');
+    } else {
+      console.log('error submit!');
+      return false;
+    }
+  });
+};
+
+const resetForm = (formEl: FormInstance | undefined) => {
+  if (!formEl) return;
+  formEl.resetFields();
+};
+const optionss = [
+  {
+    value: 'Option1',
+    label: 'Option1'
+  },
+  {
+    value: 'Option2',
+    label: 'Option2'
+  },
+  {
+    value: 'Option3',
+    label: 'Option3'
+  },
+  {
+    value: 'Option4',
+    label: 'Option4'
+  },
+  {
+    value: 'Option5',
+    label: 'Option5'
+  }
+];
+
+const options = {
+  title: {
+    text: 'Temperature Change in the Coming Week'
+  },
+  tooltip: {
+    trigger: 'axis'
+  },
+  legend: {},
+  toolbox: {
+    show: true,
+    feature: {
+      dataZoom: {
+        yAxisIndex: 'none'
+      },
+      dataView: { readOnly: false },
+      magicType: { type: ['line', 'bar'] },
+      restore: {},
+      saveAsImage: {}
+    }
+  },
+  xAxis: {
+    type: 'category',
+    boundaryGap: false,
+    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+  },
+  yAxis: {
+    type: 'value',
+    axisLabel: {
+      formatter: '{value} °C'
+    }
+  },
+  series: [
+    {
+      name: 'Highest',
+      type: 'line',
+      data: [10, 11, 13, 11, 12, 12, 9],
+      markPoint: {
+        data: [
+          { type: 'max', name: 'Max' },
+          { type: 'min', name: 'Min' }
+        ]
+      },
+      markLine: {
+        data: [{ type: 'average', name: 'Avg' }]
+      }
+    },
+    {
+      name: 'Lowest',
+      type: 'line',
+      data: [1, -2, 2, 5, 3, 2, 0],
+      markPoint: {
+        data: [{ name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }]
+      },
+      markLine: {
+        data: [
+          { type: 'average', name: 'Avg' },
+          [
+            {
+              symbol: 'none',
+              x: '90%',
+              yAxis: 'max'
+            },
+            {
+              symbol: 'circle',
+              label: {
+                position: 'start',
+                formatter: 'Max'
+              },
+              type: 'max',
+              name: '最高点'
+            }
+          ]
+        ]
+      }
+    }
+  ]
+};
+
+onMounted(() => {
+  // 图表初始化
+  const chart = echarts.init(stackedRef.value);
+  chart.setOption(options);
+
+  // 大小自适应
+  window.addEventListener('resize', () => {
+    chart.resize();
+  });
+});
+</script>
+<style lang="scss" scoped>
+@import './index.scss';
+</style>
diff --git a/src/views/details/index.scss b/src/views/details/index.scss
index 5e35a50..f8973ae 100644
--- a/src/views/details/index.scss
+++ b/src/views/details/index.scss
@@ -1,13 +1,18 @@
 .details {
-    padding: 1.5rem;
+  padding: 1.5rem;
   .search {
     margin-bottom: 1.5rem;
+    .searchForm {
+      .item {
+        margin-bottom: 0;
+      }
+    }
   }
   .echart {
     .comparisonInfo {
       .stackedLine {
         width: 100%;
-        height: 500px;
+        height: 80vh;
       }
     }
   }
diff --git a/src/views/details/index.vue b/src/views/details/index.vue
index f6e2058..7b3bf6d 100644
--- a/src/views/details/index.vue
+++ b/src/views/details/index.vue
@@ -1,29 +1,54 @@
 <template>
   <div class="details">
     <el-card class="search" shadow="always">
-      <el-form ref="searchRef" :inline="true" :model="searchForm" label-width="100px" class="demo-ruleForm">
-        <el-form-item label="时间" prop="time">
+      <el-form class="searchForm" ref="searchRef" :inline="true" :model="searchForm" label-width="100px">
+        <el-form-item class="item" label="时间" prop="time">
           <el-date-picker
             v-model="searchForm.time"
             type="datetimerange"
             start-placeholder="开始时间"
             end-placeholder="结束时间"
-            :default-time="defaultTime1"
+            format="YYYY/MM/DD HH:mm:ss"
+            value-format="YYYY-MM-DD HH:mm:ss"
+            :default-time="defaultTime"
+            @change="timeChange"
           />
         </el-form-item>
-        <el-form-item label="颗粒度" prop="particle">
-          <el-select v-model="searchForm.particle" placeholder="请选择">
-            <el-option v-for="item in optionss" :key="item.value" :label="item.label" :value="item.value" />
+        <el-form-item class="item" label="设备" prop="device">
+          <el-select v-model="searchForm.device" multiple filterable placeholder="请选择设备" @change="deviceChange">
+            <el-option
+              v-for="item in deviceData"
+              :key="item.centerDeviceCode"
+              :label="item.deviceName"
+              :value="item.centerDeviceCode"
+            />
           </el-select>
         </el-form-item>
-        <el-form-item label="设备" prop="device">
-          <el-select v-model="searchForm.device" placeholder="请选择">
-            <el-option v-for="item in optionss" :key="item.value" :label="item.label" :value="item.value" />
+        <el-form-item class="item" label="参数" prop="parameter">
+          <el-select
+            v-model="searchForm.parameter"
+            multiple
+            :multiple-limit="multipleLimit"
+            filterable
+            placeholder="请选择参数"
+            @change="parameterChange"
+          >
+            <el-option
+              v-for="item in parameterData"
+              :key="item.paramClassCode"
+              :label="item.paramClassName"
+              :value="item.paramClassCode"
+            />
           </el-select>
         </el-form-item>
-        <el-form-item label="参数" prop="parameter">
-          <el-select v-model="searchForm.parameter" placeholder="请选择">
-            <el-option v-for="item in optionss" :key="item.value" :label="item.label" :value="item.value" />
+        <el-form-item class="item" label="分区" prop="partition">
+          <el-select v-model="searchForm.partition" filterable placeholder="请选择分区" @change="partitionChange">
+            <el-option
+              v-for="item in partitionData"
+              :key="item.dictValue"
+              :label="item.dictLabel"
+              :value="item.dictValue"
+            />
           </el-select>
         </el-form-item>
         <el-form-item>
@@ -45,128 +70,613 @@ import { Ref } from 'vue';
 const stackedRef: Ref<HTMLElement | any> = ref(null);
 import type { FormInstance } from 'element-plus';
 
+import { getDevices, getParams, getPortions, getDeviceInfos } from '@/api/device/index';
+import { deetsVo, partitionVo, parameterVo } from '@/api/device/types';
+
 const searchRef = ref<FormInstance>();
-const defaultTime1 = new Date(2000, 1, 1, 12, 0, 0); // '12:00:00'
+const defaultTime = new Date(2000, 1, 1, 12, 0, 0); // '12:00:00'
+const multipleLimit = ref(0);
 const searchForm = reactive({
   time: '',
-  particle: '',
-  device: '',
-  parameter: ''
+  device: [],
+  parameter: [],
+  partition: ''
 });
+const filterForm = reactive({
+  startTime: '',
+  endTime: '',
+  deviceUuid: '',
+  paramCode: '',
+  partion: ''
+});
+const colors = ['#5470c6', '#91cc75', '#fac858', '#1a94bc', '#f26b1f', '#5bae23'];
+const deviceData = ref<deetsVo[]>();
+const parameterData = ref<parameterVo[]>();
+const partitionData = ref<partitionVo[]>();
 
-const submitForm = (formEl: FormInstance | undefined) => {
-  if (!formEl) return;
-  formEl.validate(valid => {
-    if (valid) {
-      console.log('submit!');
-    } else {
-      console.log('error submit!');
-      return false;
-    }
-  });
-};
-
-const resetForm = (formEl: FormInstance | undefined) => {
-  if (!formEl) return;
-  formEl.resetFields();
-};
-const optionss = [
-  {
-    value: 'Option1',
-    label: 'Option1'
-  },
-  {
-    value: 'Option2',
-    label: 'Option2'
-  },
-  {
-    value: 'Option3',
-    label: 'Option3'
-  },
-  {
-    value: 'Option4',
-    label: 'Option4'
-  },
-  {
-    value: 'Option5',
-    label: 'Option5'
-  }
-];
-
-const options = {
+// let base = +new Date();
+// let oneDay = 24 * 3600 * 1000;
+// let data = [[base, Math.random() * 300]];
+// for (let i = 1; i < 200; i++) {
+//   let now = new Date((base += oneDay));
+//   console.log('now--', now);
+//   data.push([+now, Math.round((Math.random() - 0.5) * 20 + data[i - 1][1])]);
+// }
+const options1 = {
   title: {
-    text: 'Temperature Change in the Coming Week'
+    text: '多设备单参数'
   },
   tooltip: {
     trigger: 'axis'
+    //   position: function (pt: any) {
+    //     return [pt[0], '10%'];
+    //   }
+  },
+  legend: {
+    data: ['华尔街3号站', '颐和城', '李相', '汪家新村', '白沙岛']
+  },
+  grid: {
+    top: '80',
+    left: '100',
+    right: '150',
+    bottom: '50',
+    containLabel: true
   },
-  legend: {},
   toolbox: {
-    show: true,
     feature: {
-      dataZoom: {
-        yAxisIndex: 'none'
-      },
-      dataView: { readOnly: false },
-      magicType: { type: ['line', 'bar'] },
-      restore: {},
-      saveAsImage: {}
+      restore: {}
     }
   },
   xAxis: {
-    type: 'category',
-    boundaryGap: false,
-    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+    type: 'time',
+    boundaryGap: false
   },
   yAxis: {
     type: 'value',
-    axisLabel: {
-      formatter: '{value} °C'
+    scale: true, //自适应
+    minInterval: 1, //最小间距
+    name: '单位()',
+    nameTextStyle: {
+      color: '#000',
+      fontSize: 12,
+      padding: [0, 0, 0, 0] //name文字位置 对应 上右下左
+    },
+    axisTick: {
+      // 轴刻度
+      show: false
     }
+    // boundaryGap: [0, '100%']
   },
+  dataZoom: [
+    {
+      type: 'inside',
+      startValue: '0'
+      // start: 0,
+      // end: 20
+    },
+    {
+      startValue: '0'
+      //   start: 0,
+      //   end: 20
+    }
+  ],
   series: [
     {
-      name: 'Highest',
+      name: '华尔街3号站',
+      type: 'line',
+      smooth: true,
+      symbol: 'none',
+      data: [
+        ['2023-10-01 08:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-01 09:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-01 10:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-01 11:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-01 12:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-01 13:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-01 14:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-01 15:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-02 08:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-02 09:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-02 10:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-02 11:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-02 12:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-02 13:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-02 14:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-02 15:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-03 08:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-03 09:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-03 10:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-03 11:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-03 12:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-03 13:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-03 14:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-03 15:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-04 08:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-04 09:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-04 10:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-04 11:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-04 12:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-04 13:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-04 14:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-04 15:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-05 08:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-05 09:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-05 10:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-05 11:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-05 12:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-05 13:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-05 14:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-05 15:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-06 08:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-06 09:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-06 10:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-06 11:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-06 12:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-06 13:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-06 14:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-06 15:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-07 08:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-07 09:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-07 10:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-07 11:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-07 12:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-07 13:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-07 14:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-07 15:00:00', Math.round(Math.random() * 500)]
+      ]
+    },
+    {
+      name: '颐和城',
       type: 'line',
-      data: [10, 11, 13, 11, 12, 12, 9],
-      markPoint: {
-        data: [
-          { type: 'max', name: 'Max' },
-          { type: 'min', name: 'Min' }
-        ]
+      smooth: true,
+      symbol: 'none',
+      data: [
+        ['2023-10-01 08:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-01 09:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-01 10:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-01 11:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-01 12:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-01 13:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-01 14:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-01 15:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-02 08:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-02 09:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-02 10:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-02 11:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-02 12:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-02 13:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-02 14:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-02 15:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-03 08:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-03 09:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-03 10:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-03 11:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-03 12:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-03 13:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-03 14:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-03 15:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-04 08:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-04 09:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-04 10:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-04 11:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-04 12:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-04 13:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-04 14:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-04 15:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-05 08:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-05 09:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-05 10:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-05 11:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-05 12:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-05 13:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-05 14:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-05 15:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-06 08:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-06 09:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-06 10:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-06 11:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-06 12:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-06 13:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-06 14:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-06 15:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-07 08:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-07 09:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-07 10:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-07 11:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-07 12:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-07 13:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-07 14:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-07 15:00:00', Math.round(Math.random() * 500)]
+      ]
+    },
+    {
+      name: '李相',
+      type: 'line',
+      smooth: true,
+      symbol: 'none',
+      data: [
+        ['2023-10-01 08:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-01 09:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-01 10:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-01 11:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-01 12:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-01 13:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-01 14:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-01 15:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-02 08:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-02 09:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-02 10:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-02 11:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-02 12:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-02 13:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-02 14:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-02 15:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-03 08:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-03 09:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-03 10:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-03 11:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-03 12:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-03 13:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-03 14:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-03 15:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-04 08:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-04 09:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-04 10:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-04 11:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-04 12:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-04 13:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-04 14:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-04 15:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-05 08:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-05 09:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-05 10:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-05 11:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-05 12:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-05 13:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-05 14:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-05 15:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-06 08:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-06 09:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-06 10:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-06 11:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-06 12:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-06 13:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-06 14:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-06 15:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-07 08:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-07 09:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-07 10:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-07 11:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-07 12:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-07 13:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-07 14:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-07 15:00:00', Math.round(Math.random() * 500)]
+      ]
+    }
+  ]
+};
+
+const options2 = {
+  color: colors,
+  title: {
+    text: '单设备多参数'
+  },
+  tooltip: {
+    trigger: 'axis'
+    //   position: function (pt: any) {
+    //     return [pt[0], '10%'];
+    //   }
+  },
+  legend: {
+    data: ['瞬时流量', '瞬时热量', '累计热量']
+  },
+  grid: {
+    top: '80',
+    left: '100',
+    right: '150',
+    bottom: '50',
+    containLabel: true
+  },
+  toolbox: {
+    feature: {
+      restore: {}
+    }
+  },
+  xAxis: {
+    type: 'time',
+    boundaryGap: false
+  },
+  yAxis: [
+    {
+      type: 'value',
+      name: '瞬时流量(m³/h)',
+      position: 'left',
+      alignTicks: true,
+      scale: true, //自适应
+      minInterval: 1, //最小间距
+      nameTextStyle: {
+        fontSize: 12,
+        padding: [0, 0, 0, 0] //name文字位置 对应 上右下左
+      },
+      axisTick: {
+        // 轴刻度
+        show: false
       },
-      markLine: {
-        data: [{ type: 'average', name: 'Avg' }]
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: colors[0]
+        }
       }
     },
     {
-      name: 'Lowest',
-      type: 'line',
-      data: [1, -2, 2, 5, 3, 2, 0],
-      markPoint: {
-        data: [{ name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }]
+      type: 'value',
+      name: '瞬时热量(JG/h)',
+      position: 'right',
+      alignTicks: true,
+      scale: true, //自适应
+      minInterval: 1, //最小间距
+      nameTextStyle: {
+        fontSize: 12,
+        padding: [0, 0, 0, 0] //name文字位置 对应 上右下左
+      },
+      axisTick: {
+        // 轴刻度
+        show: false
       },
-      markLine: {
-        data: [
-          { type: 'average', name: 'Avg' },
-          [
-            {
-              symbol: 'none',
-              x: '90%',
-              yAxis: 'max'
-            },
-            {
-              symbol: 'circle',
-              label: {
-                position: 'start',
-                formatter: 'Max'
-              },
-              type: 'max',
-              name: '最高点'
-            }
-          ]
-        ]
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: colors[1]
+        }
       }
+    },
+    {
+      type: 'value',
+      name: '累计热量(JG)',
+      position: 'right',
+      alignTicks: true,
+      offset: 100,
+      scale: true, //自适应
+      minInterval: 1, //最小间距
+      nameTextStyle: {
+        fontSize: 12,
+        padding: [0, 0, 0, 0] //name文字位置 对应 上右下左
+      },
+      axisTick: {
+        // 轴刻度
+        show: false
+      },
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: colors[2]
+        }
+      }
+    }
+  ],
+  // yAxis: {
+  //   type: 'value',
+  //   scale: true, //自适应
+  //   minInterval: 1, //最小间距
+  //   name: '单位()',
+  //   nameTextStyle: {
+  //     color: '#000',
+  //     fontSize: 12,
+  //     padding: [0, 0, 0, 0] //name文字位置 对应 上右下左
+  //   },
+  //   axisTick: {
+  //     // 轴刻度
+  //     show: false
+  //   }
+  // },
+  dataZoom: [
+    {
+      type: 'inside',
+      startValue: '0'
+      // start: 0,
+      // end: 20
+    },
+    {
+      startValue: '0'
+      //   start: 0,
+      //   end: 20
+    }
+  ],
+  series: [
+    {
+      name: '瞬时流量',
+      type: 'line',
+      smooth: true,
+      symbol: 'none',
+      data: [
+        ['2023-10-01 08:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-01 09:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-01 10:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-01 11:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-01 12:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-01 13:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-01 14:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-01 15:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-02 08:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-02 09:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-02 10:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-02 11:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-02 12:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-02 13:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-02 14:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-02 15:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-03 08:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-03 09:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-03 10:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-03 11:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-03 12:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-03 13:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-03 14:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-03 15:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-04 08:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-04 09:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-04 10:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-04 11:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-04 12:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-04 13:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-04 14:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-04 15:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-05 08:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-05 09:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-05 10:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-05 11:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-05 12:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-05 13:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-05 14:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-05 15:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-06 08:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-06 09:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-06 10:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-06 11:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-06 12:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-06 13:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-06 14:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-06 15:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-07 08:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-07 09:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-07 10:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-07 11:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-07 12:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-07 13:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-07 14:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-07 15:00:00', Math.round(Math.random() * 500)]
+      ]
+    },
+    {
+      name: '瞬时热量',
+      type: 'line',
+      smooth: true,
+      symbol: 'none',
+      yAxisIndex: 1,
+      data: [
+        ['2023-10-01 08:00:00', Math.round(Math.random() * 100)],
+        ['2023-10-01 09:00:00', Math.round(Math.random() * 100)],
+        ['2023-10-01 10:00:00', Math.round(Math.random() * 100)],
+        ['2023-10-01 11:00:00', Math.round(Math.random() * 100)],
+        ['2023-10-01 12:00:00', Math.round(Math.random() * 100)],
+        ['2023-10-01 13:00:00', Math.round(Math.random() * 100)],
+        ['2023-10-01 14:00:00', Math.round(Math.random() * 100)],
+        ['2023-10-01 15:00:00', Math.round(Math.random() * 100)],
+        ['2023-10-02 08:00:00', Math.round(Math.random() * 100)],
+        ['2023-10-02 09:00:00', Math.round(Math.random() * 100)],
+        ['2023-10-02 10:00:00', Math.round(Math.random() * 100)],
+        ['2023-10-02 11:00:00', Math.round(Math.random() * 100)],
+        ['2023-10-02 12:00:00', Math.round(Math.random() * 100)],
+        ['2023-10-02 13:00:00', Math.round(Math.random() * 100)],
+        ['2023-10-02 14:00:00', Math.round(Math.random() * 100)],
+        ['2023-10-02 15:00:00', Math.round(Math.random() * 100)],
+        ['2023-10-03 08:00:00', Math.round(Math.random() * 100)],
+        ['2023-10-03 09:00:00', Math.round(Math.random() * 100)],
+        ['2023-10-03 10:00:00', Math.round(Math.random() * 100)],
+        ['2023-10-03 11:00:00', Math.round(Math.random() * 100)],
+        ['2023-10-03 12:00:00', Math.round(Math.random() * 100)],
+        ['2023-10-03 13:00:00', Math.round(Math.random() * 100)],
+        ['2023-10-03 14:00:00', Math.round(Math.random() * 100)],
+        ['2023-10-03 15:00:00', Math.round(Math.random() * 100)],
+        ['2023-10-04 08:00:00', Math.round(Math.random() * 100)],
+        ['2023-10-04 09:00:00', Math.round(Math.random() * 100)],
+        ['2023-10-04 10:00:00', Math.round(Math.random() * 100)],
+        ['2023-10-04 11:00:00', Math.round(Math.random() * 100)],
+        ['2023-10-04 12:00:00', Math.round(Math.random() * 100)],
+        ['2023-10-04 13:00:00', Math.round(Math.random() * 100)],
+        ['2023-10-04 14:00:00', Math.round(Math.random() * 100)],
+        ['2023-10-04 15:00:00', Math.round(Math.random() * 100)],
+        ['2023-10-05 08:00:00', Math.round(Math.random() * 100)],
+        ['2023-10-05 09:00:00', Math.round(Math.random() * 100)],
+        ['2023-10-05 10:00:00', Math.round(Math.random() * 100)],
+        ['2023-10-05 11:00:00', Math.round(Math.random() * 100)],
+        ['2023-10-05 12:00:00', Math.round(Math.random() * 100)],
+        ['2023-10-05 13:00:00', Math.round(Math.random() * 100)],
+        ['2023-10-05 14:00:00', Math.round(Math.random() * 100)],
+        ['2023-10-05 15:00:00', Math.round(Math.random() * 100)],
+        ['2023-10-06 08:00:00', Math.round(Math.random() * 100)],
+        ['2023-10-06 09:00:00', Math.round(Math.random() * 100)],
+        ['2023-10-06 10:00:00', Math.round(Math.random() * 100)],
+        ['2023-10-06 11:00:00', Math.round(Math.random() * 100)],
+        ['2023-10-06 12:00:00', Math.round(Math.random() * 100)],
+        ['2023-10-06 13:00:00', Math.round(Math.random() * 100)],
+        ['2023-10-06 14:00:00', Math.round(Math.random() * 100)],
+        ['2023-10-06 15:00:00', Math.round(Math.random() * 100)],
+        ['2023-10-07 08:00:00', Math.round(Math.random() * 100)],
+        ['2023-10-07 09:00:00', Math.round(Math.random() * 100)],
+        ['2023-10-07 10:00:00', Math.round(Math.random() * 100)],
+        ['2023-10-07 11:00:00', Math.round(Math.random() * 100)],
+        ['2023-10-07 12:00:00', Math.round(Math.random() * 100)],
+        ['2023-10-07 13:00:00', Math.round(Math.random() * 100)],
+        ['2023-10-07 14:00:00', Math.round(Math.random() * 100)],
+        ['2023-10-07 15:00:00', Math.round(Math.random() * 100)]
+      ]
+    },
+    {
+      name: '累计热量',
+      type: 'line',
+      smooth: true,
+      symbol: 'none',
+      yAxisIndex: 2,
+      data: [
+        ['2023-10-01 08:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-01 09:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-01 10:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-01 11:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-01 12:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-01 13:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-01 14:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-01 15:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-02 08:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-02 09:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-02 10:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-02 11:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-02 12:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-02 13:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-02 14:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-02 15:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-03 08:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-03 09:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-03 10:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-03 11:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-03 12:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-03 13:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-03 14:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-03 15:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-04 08:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-04 09:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-04 10:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-04 11:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-04 12:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-04 13:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-04 14:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-04 15:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-05 08:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-05 09:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-05 10:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-05 11:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-05 12:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-05 13:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-05 14:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-05 15:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-06 08:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-06 09:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-06 10:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-06 11:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-06 12:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-06 13:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-06 14:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-06 15:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-07 08:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-07 09:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-07 10:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-07 11:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-07 12:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-07 13:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-07 14:00:00', Math.round(Math.random() * 500)],
+        ['2023-10-07 15:00:00', Math.round(Math.random() * 500)]
+      ]
     }
   ]
 };
@@ -174,13 +684,98 @@ const options = {
 onMounted(() => {
   // 图表初始化
   const chart = echarts.init(stackedRef.value);
-  chart.setOption(options);
+  chart.setOption(options1);
+
+  getDevice();
+  getParam();
+  getPortion();
+  getDeviceInfo();
 
   // 大小自适应
   window.addEventListener('resize', () => {
     chart.resize();
   });
 });
+
+function getDevice() {
+  //获取设备
+  const params = {};
+  getDevices().then((res: any) => {
+    if (res.code === 200) {
+      deviceData.value = res.data;
+    }
+  });
+}
+function getParam() {
+  //获取参数
+  const params = {};
+  getParams().then((res: any) => {
+    if (res.code === 200) {
+      parameterData.value = res.data;
+    }
+  });
+}
+function getPortion() {
+  //获取分区
+  const params = {};
+  getPortions().then((res: any) => {
+    if (res.code === 200) {
+      partitionData.value = res.data;
+    }
+  });
+}
+function getDeviceInfo() {
+  //获取折线图数据
+  const params = filterForm;
+  getDeviceInfos(params).then((res: any) => {
+    if (res.code === 200) {
+    }
+  });
+}
+
+function timeChange(res: any) {
+  //时间区间确认
+  filterForm.startTime = res[0];
+  filterForm.endTime = res[1];
+}
+
+function deviceChange(res: any) {
+  //设备选择确认
+  searchForm.parameter = [];
+  multipleLimit.value = res.length <= 1 ? 0 : 1;
+  filterForm.deviceUuid = res.toString();
+}
+function parameterChange(res: any) {
+  //参数选择确认
+  filterForm.paramCode = res.toString();
+}
+function partitionChange(res: string) {
+  //分区确认
+  filterForm.partion = res;
+}
+const submitForm = (formEl: FormInstance | undefined) => {
+  //筛选确认
+  if (!formEl) return;
+  formEl.validate(valid => {
+    if (valid) {
+      getDeviceInfo();
+      console.log('submit:', filterForm);
+    } else {
+      console.log('error submit!');
+      return false;
+    }
+  });
+};
+const resetForm = (formEl: FormInstance | undefined) => {
+  //筛选重置
+  if (!formEl) return;
+  formEl.resetFields();
+  filterForm.startTime = '';
+  filterForm.endTime = '';
+  filterForm.deviceUuid = '';
+  filterForm.paramCode = '';
+  filterForm.partion = '';
+};
 </script>
 <style lang="scss" scoped>
 @import './index.scss';
diff --git a/src/views/monitoring/screen/components/main.vue b/src/views/monitoring/screen/components/main.vue
index f9ac497..87e14f2 100644
--- a/src/views/monitoring/screen/components/main.vue
+++ b/src/views/monitoring/screen/components/main.vue
@@ -13,17 +13,39 @@
   > -->
   <div class="mainTable" :style="{ height: `${sidebarHeight}px` }">
     <n-spin :show="loadingShow">
-      <vxe-grid ref="tableRef" class="tableGrid" align="center" auto-resize keep-source :height="sidebarHeight - 4"
-        header-row-class-name="headerRowClass" header-cell-class-name="headerCellClass" row-class-name="tableRowClass"
-        cell-class-name="tableCellClass" :sort-config="{ multiple: true, trigger: 'cell' }" :stripe="!tableBorder" :border="tableBorder"
-        :column-config="{ resizable: true, useKey: true }" :row-config="{ useKey: true }" :span-method="mergeRowMethod"
-        :columns="tableColumn" :data="tableData" @cell-dblclick="cellDBLClickEvent">
+      <vxe-grid
+        ref="tableRef"
+        class="tableGrid"
+        align="center"
+        auto-resize
+        keep-source
+        :height="sidebarHeight - 4"
+        header-row-class-name="headerRowClass"
+        header-cell-class-name="headerCellClass"
+        row-class-name="tableRowClass"
+        cell-class-name="tableCellClass"
+        :sort-config="{ multiple: true, trigger: 'cell' }"
+        :stripe="!tableBorder"
+        :border="tableBorder"
+        :column-config="{ resizable: true, useKey: true }"
+        :row-config="{ useKey: true }"
+        :span-method="mergeRowMethod"
+        :columns="tableColumn"
+        :data="tableData"
+        @cell-dblclick="cellDBLClickEvent"
+      >
         <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" />
+            <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" @click.native="nameClick(row.deviceuuid)">{{ row.gTitle }}</span>
           </div>
         </template>
@@ -33,8 +55,17 @@
   </div>
   <vxe-modal :title="modalTitle" v-model="editModal">
     <template #default>
-      <vxe-form title-colon ref="formRef" title-align="right" title-width="100" :data="formData" :rules="formRules"
-        :loading="formLoading" @submit="submitEvent" @reset="resetEvent">
+      <vxe-form
+        title-colon
+        ref="formRef"
+        title-align="right"
+        title-width="100"
+        :data="formData"
+        :rules="formRules"
+        :loading="formLoading"
+        @submit="submitEvent"
+        @reset="resetEvent"
+      >
         <vxe-form-item field="value" span="24" :item-render="{}" title-overflow>
           <template #default="params">
             <vxe-input v-model="params.data.value" placeholder="请输入数值" clearable></vxe-input>
@@ -63,12 +94,12 @@ import {
   VxeFormEvents,
   VxeTablePropTypes
 } from 'vxe-table';
-import { getTableHeader, getStationInfo, getTableData, editConfig,sendCtrl } from '@/api/table/list';
+import { getTableHeader, getStationInfo, getTableData, editConfig, sendCtrl } from '@/api/table/list';
 import { TableVo } from '@/api/table/types';
 import { tableStore } from '@/store/modules/table';
 import mitt from '@/plugins/bus';
 import socket from '@/utils/socket';
-import useStorage from '@/utils/useStorage'
+import useStorage from '@/utils/useStorage';
 const sessionStorageIns = useStorage('sessionStorage');
 
 const tableStoreCounter = tableStore();
@@ -83,17 +114,17 @@ const menuKey = ref(0);
 const tableColumn = ref([]);
 const tableData = ref<TableVo[]>([]);
 const tableRef = ref<VxeGridInstance<TableVo>>();
-const cellRow = ref({})
-const cellColumn = ref()
-const cellField = ref()
-const tableBorder=ref(true)
+const cellRow = ref({});
+const cellColumn = ref();
+const cellField = ref();
+const tableBorder = ref(true);
 // const fields = ref(['deviceuuid']) //需要合并的列数据字段
 // const waringArrow = ref([])
 
 interface FormDataVO {
   //url: string;
   deviceName: string;
-  paramCode :string;
+  paramCode: string;
   value: string;
 }
 const formRef = ref<VxeFormInstance>();
@@ -102,7 +133,7 @@ const formData = ref<FormDataVO>({
   //url: '',
   deviceName: '',
   paramCode: '',
-  value: '',
+  value: ''
 });
 const formRules = ref<VxeFormPropTypes.Rules>({
   value: [
@@ -115,12 +146,12 @@ const formRules = ref<VxeFormPropTypes.Rules>({
         if (!reg.test(itemValue)) {
           return new Error('请输入正确数值！');
         }
-      },
-    },
-  ],
+      }
+    }
+  ]
 });
 
-const userStorageInfo = sessionStorage.getItem('userInfo')
+const userStorageInfo = sessionStorage.getItem('userInfo');
 const userInfo = JSON.parse(userStorageInfo === null ? '' : userStorageInfo);
 //const apiUrl = import.meta.env.VITE_APP_WS_API
 //const wsUrl = `${apiUrl}websocket/${userInfo.userName}`; //websocket地址
@@ -130,7 +161,8 @@ const userInfo = JSON.parse(userStorageInfo === null ? '' : userStorageInfo);
 // const baseApi = "http://board.heatiot.cn:8001/prod-api"//websocket链接地址，与项目接口地址一致。
 //const baseApi = import.meta.env.VITE_APP_BASE_API
 //const apiUrl = baseApi.replace(/https?:/, '');
-const wsUrl = `ws://${window.location.host}/ws/websocket/${userInfo.userName}`; //websocket地址
+// const wsUrl = `ws://${window.location.host}/ws/websocket/${userInfo.userName}`; //websocket地址
+const wsUrl = `ws://10.10.10.56:9010/websocket/${userInfo.userName}`; //websocket地址
 
 const emit = defineEmits(['tableHeaderData']);
 // const listData = ref([
@@ -143,12 +175,12 @@ const emit = defineEmits(['tableHeaderData']);
 defineProps({
   tapsShow: {
     type: Boolean,
-    default: true,
+    default: true
   },
   sidebarHeight: {
     type: Number,
-    default: 0,
-  },
+    default: 0
+  }
 });
 
 // watch(
@@ -205,18 +237,18 @@ mitt.on('treeData', (res: any) => {
 
 mitt.on('tableMessage', (res: any) => {
   //监听表格数据变化
-  console.log("tableMessage--", res.data);
+  console.log('tableMessage--', res.data);
   const $table = tableRef.value;
-  const tableArray = tableData.value
+  const tableArray = tableData.value;
   if ($table) {
-    console.log("tableRef--", tableRef.value)
+    console.log('tableRef--', tableRef.value);
     res.data.map((item: any) => {
-      const index = tableArray.findIndex((obj) => obj.id === item.id);
+      const index = tableArray.findIndex(obj => obj.id === item.id);
       if (index !== -1) {
         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);
@@ -262,9 +294,9 @@ function tableHeader() {
         type: 'html',
         formatter: formatRole,
         visible: false
-      },
+      }
     ];
-    console.log(tableCessText)
+    console.log(tableCessText);
     res.data.map((item: any) => {
       if (item.formatter != undefined || item.children != undefined) {
         item.formatter = eval(item.formatter);
@@ -327,19 +359,19 @@ const cellDBLClickEvent: VxeTableEvents.CellDblclick<TableVo> = ({ row, column }
   //edit ty zhousq 2023-10-12 修改控制方式为接口方式，修改formdata提交的属性值
   // ctrlPro.centeruuid 设备UUID cellField.ctrlPro.paramcode 设备参数编码 cellField.val 设备值
   //ctrlPro 为新增的单元格属性，控制参数回传
-  console.log("cellData--", row, column);
+  console.log('cellData--', row, column);
   const cellField = row[column.field];
   //const data = row.data;
-  cellRow.value = row
-  cellColumn.value = column
-  cellField.value = cellField
+  cellRow.value = row;
+  cellColumn.value = column;
+  cellField.value = cellField;
   if (cellField.canBeControl === '1') {
     modalTitle.value = column.title;
     ///formData.value.url = data.url;
     //formData.value.deviceName = cellField.deviceName;
     formData.value.value = cellField.val;
-    formData.value.deviceName=cellField.ctrlPro.centeruuid
-    formData.value.paramCode=cellField.ctrlPro.paramcode
+    formData.value.deviceName = cellField.ctrlPro.centeruuid;
+    formData.value.paramCode = cellField.ctrlPro.paramcode;
     editModal.value = true;
   }
   console.log(row[column.field]);
@@ -349,30 +381,34 @@ const formatRole: VxeColumnPropTypes.Formatter<HeaderVo> = ({ cellValue }) => {
   //表单参数为object时处理
   // const iconFont=cellValue.changeProp===-1?'<i class="iconfont icon-decline" />':(cellValue.changeProp===1?'<i class="iconfont icon-rise" />':'<i/>')
   // const cellData = `<span class="cellClass ${cellValue.alertProp===1?'warning':''}">${cellValue.val}</span>${iconFont}`;
-  const cellData = `<span class="cellClass ${cellValue.alertProp === 1 ? 'warning' : (cellValue.canBeControl === '1' ? 'cellEdit' : '')}">${cellValue.val}</span><i class="iconfont ${cellValue.changeProp === -1 ? 'icon-decline' : (cellValue.changeProp === 1 ? 'icon-rise' : '')}" ></i>${cellValue.canBeControl === '1' ? '<i class="iconfont icon-edit-icon"></i>' : ''}`;
+  const cellData = `<span class="cellClass ${
+    cellValue.alertProp === 1 ? 'warning' : cellValue.canBeControl === '1' ? 'cellEdit' : ''
+  }">${cellValue.val}</span><i class="iconfont ${
+    cellValue.changeProp === -1 ? 'icon-decline' : cellValue.changeProp === 1 ? 'icon-rise' : ''
+  }" ></i>${cellValue.canBeControl === '1' ? '<i class="iconfont icon-edit-icon"></i>' : ''}`;
   return cellData;
 };
 
 // 通用行合并函数（将相同多列数据合并为一行）
 const mergeRowMethod: VxeTablePropTypes.SpanMethod<TableVo> = ({ row, _rowIndex, column, visibleData }) => {
-  const fields = ['gTitle']
-  const cellValue = row[column.field]
+  const fields = ['gTitle'];
+  const cellValue = row[column.field];
   if (cellValue && fields.includes(column.field)) {
-    const prevRow = visibleData[_rowIndex - 1]
-    let nextRow = visibleData[_rowIndex + 1]
+    const prevRow = visibleData[_rowIndex - 1];
+    let nextRow = visibleData[_rowIndex + 1];
     if (prevRow && prevRow[column.field] === cellValue) {
-      return { rowspan: 0, colspan: 0 }
+      return { rowspan: 0, colspan: 0 };
     } else {
-      let countRowspan = 1
+      let countRowspan = 1;
       while (nextRow && nextRow[column.field] === cellValue) {
-        nextRow = visibleData[++countRowspan + _rowIndex]
+        nextRow = visibleData[++countRowspan + _rowIndex];
       }
       if (countRowspan > 1) {
-        return { rowspan: countRowspan, colspan: 1 }
+        return { rowspan: countRowspan, colspan: 1 };
       }
     }
   }
-}
+};
 
 const submitEvent: VxeFormEvents.Submit = () => {
   //修改数据之后通过websocket传给后端
@@ -381,13 +417,13 @@ const submitEvent: VxeFormEvents.Submit = () => {
   const submitData = {
     //code: 'W01',
     //data: {
-      //url: formData.value.url,
-      //deviceName: formData.value.deviceName,
-      //value: formData.value.value,
-      deviceUUID:formData.value.deviceName,
-      paramCode: formData.value.paramCode,
-      valueType: "",
-      value:formData.value.value
+    //url: formData.value.url,
+    //deviceName: formData.value.deviceName,
+    //value: formData.value.value,
+    deviceUUID: formData.value.deviceName,
+    paramCode: formData.value.paramCode,
+    valueType: '',
+    value: formData.value.value
     //},
   };
   console.log(submitData);
@@ -402,10 +438,10 @@ const submitEvent: VxeFormEvents.Submit = () => {
   editModal.value = false;
 
   if ($table) {
-    const row = cellRow.value
+    const row = cellRow.value;
     const field = cellColumn.value.field;
-    row[field].val = formData.value.value
-    $table.reloadRow(row, null, field)
+    row[field].val = formData.value.value;
+    $table.reloadRow(row, null, field);
   }
 
   // VXETable.modal.message({ content: '保存成功', status: 'success' });
@@ -413,7 +449,7 @@ const submitEvent: VxeFormEvents.Submit = () => {
 
 function nameClick(row: any) {
   //点击设备名称跳转设备管理
-  console.log(row)
+  console.log(row);
   sessionStorageIns.setUseStorage('id', row.id);
   router.push({ path: '/devicemanage', query: { id: row.id } });
 }
diff --git a/vite.config.ts b/vite.config.ts
index fc899d5..b029392 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -45,9 +45,9 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
       hmr: true, //配置HMR
       proxy: {
         [env.VITE_APP_BASE_API]: {
-          target: 'http://172.1.2.196:9010/',//本地接口地址
-          // target: 'http://172.1.2.48:9000/',//本地接口地址
-          // target: 'http://board.heatiot.cn:8001/prod-api/', //线上接口地址
+          // target: 'http://172.1.2.196:9010/', //本地接口地址
+          target: 'http://172.1.2.93:9010/', //本地接口地址
+          // target: 'http://10.10.10.56:9010/', //线上测试接口地址
           changeOrigin: true,
           rewrite: path => path.replace(new RegExp('^' + env.VITE_APP_BASE_API), '')
         }