From 3b7a6d97bf6c12ab0400a04527aaf8246e6926b7 Mon Sep 17 00:00:00 2001
From: fuguobin <fgbin2008@163.com>
Date: Tue, 31 Oct 2023 17:55:28 +0800
Subject: [PATCH] =?UTF-8?q?=E9=83=A8=E9=97=A8=E5=86=85=E5=AE=B9=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/details/index - 副本.vue          | 1424 +++++++++++++++++
 src/views/details/index.vue                   |   75 +-
 src/views/details/test.vue                    |  136 --
 src/views/monitoring/components/header.vue    |    6 +-
 src/views/monitoring/components/menu.vue      |   68 +-
 .../devicemanage/components/main.vue          |   34 +-
 .../monitoring/screen/components/main.vue     |   93 +-
 vite.config.ts                                |    4 +-
 8 files changed, 1606 insertions(+), 234 deletions(-)
 create mode 100644 src/views/details/index - 副本.vue
 delete mode 100644 src/views/details/test.vue

diff --git a/src/views/details/index - 副本.vue b/src/views/details/index - 副本.vue
new file mode 100644
index 0000000..1926778
--- /dev/null
+++ b/src/views/details/index - 副本.vue	
@@ -0,0 +1,1424 @@
+<template>
+  <div class="details">
+    <el-card class="search" shadow="always">
+      <template #header>
+        <div class="cardHeader">
+          <span>搜索筛选项</span>
+          <n-tooltip trigger="hover">
+            <template #trigger>
+              <n-button class="tooltips" circle quaternary @click="lineClick">
+                <template #icon>
+                  <n-icon>
+                    <ReturnDownBack />
+                  </n-icon>
+                </template>
+              </n-button>
+            </template>
+            返回上一页
+          </n-tooltip>
+        </div>
+      </template>
+      <el-form class="searchForm" ref="searchRef" :rules="rules" :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="结束时间"
+            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 class="item" label="设备:" prop="device">
+          <el-select
+            v-model="searchForm.device"
+            multiple
+            filterable
+            clearable
+            collapse-tags
+            collapse-tags-tooltip
+            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 class="item" label="参数:" prop="parameter">
+          <el-select
+            v-model="searchForm.parameter"
+            multiple
+            :multiple-limit="multipleLimit"
+            filterable
+            clearable
+            collapse-tags
+            collapse-tags-tooltip
+            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 class="item" label="分区:" prop="partition">
+          <el-select
+            v-model="searchForm.partition"
+            filterable
+            clearable
+            collapse-tags
+            collapse-tags-tooltip
+            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 class="item">
+          <el-checkbox v-model="searchForm.showZero" label="是否显示0值" size="large" />
+        </el-form-item>
+        <div class="formBtn">
+          <el-form-item class="item">
+            <el-button type="primary" @click="submitForm(searchRef)">搜索</el-button>
+            <el-button @click="resetForm(searchRef)">重置</el-button>
+          </el-form-item>
+        </div>
+      </el-form>
+    </el-card>
+    <el-card class="echart" shadow="always">
+      <div class="comparisonInfo">
+        <div ref="stackedRef" class="stackedLine">暂无数据</div>
+      </div>
+    </el-card>
+  </div>
+</template>
+<script lang="ts" setup>
+import * as echarts from 'echarts';
+import { Ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { randomColor } from '@/utils/index';
+const stackedRef: Ref<HTMLElement | any> = ref(null);
+import type { FormInstance, FormRules } from 'element-plus';
+import { ReturnDownBack } from '@vicons/ionicons5';
+
+import { getDevices, getParams, getPortions, getDeviceInfos } from '@/api/device/index';
+import { deetsVo, partitionVo, parameterVo, seriesVo } from '@/api/device/types';
+
+const router = useRouter();
+const route = useRoute();
+
+const searchRef = ref<FormInstance>();
+const defaultTime = new Date(2000, 1, 1, 12, 0, 0); // '12:00:00'
+const multipleLimit = ref(0);
+const parameterLimit = ref(0);
+const deptId = ref(0);
+// const seriesData = ref<seriesVo[]>();
+const searchForm = reactive({
+  time: '',
+  device: [],
+  parameter: [],
+  partition: '',
+  showZero: false
+});
+const filterForm = reactive({
+  startTime: '',
+  endTime: '',
+  deviceUuid: '',
+  paramCode: '',
+  partion: '',
+  showZero: false
+});
+const rules = reactive<FormRules>({
+  time: [
+    {
+      required: true,
+      message: '请选择时间区间',
+      trigger: 'change'
+    }
+  ],
+  device: [
+    {
+      required: true,
+      message: '请选择设备',
+      trigger: 'change'
+    }
+  ],
+  parameter: [
+    {
+      required: true,
+      message: '请选择参数',
+      trigger: 'change'
+    }
+  ]
+});
+
+const resetInit = {
+  mainInfos: [],
+  additionalInfo: null
+};
+const colors = ['#5470c6', '#91cc75', '#fac858', '#1a94bc', '#f26b1f', '#5bae23'];
+const deviceData = ref<deetsVo[]>();
+const parameterData = ref<parameterVo[]>();
+const partitionData = ref<partitionVo[]>();
+
+// 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 options = {
+  color: colors,
+  title: {
+    text: '',
+    x: 'center',
+    y: 'center',
+    textStyle: {
+      fontSize: 14,
+      fontWeight: 'normal'
+    }
+  },
+  tooltip: {
+    trigger: 'axis'
+  },
+  legend: {
+    data: ['']
+  },
+  grid: {
+    top: '80',
+    left: '100',
+    right: '150',
+    bottom: '50',
+    containLabel: true
+  },
+  toolbox: {
+    show: true,
+    feature: {
+      dataZoom: {
+        yAxisIndex: 'none'
+      },
+      // dataView: { readOnly: false },
+      magicType: { type: ['line', 'bar'] },
+      restore: {},
+      saveAsImage: {},
+      // 工具配置
+      myLeft: {
+        show: true,
+        title: '上一个',
+        icon: 'path://M735.208665 65.582671l-446.41733 446.417329 446.41733 446.417329z',
+        onclick: () => {
+          keyClick('0');
+          // prevClick();
+        }
+      },
+      myRight: {
+        show: true,
+        title: '下一个',
+        icon: 'path://M288.791335 65.582671l446.41733 446.417329-446.41733 446.417329z',
+        onclick: () => {
+          keyClick('1');
+          // nextClick();
+        }
+      }
+    }
+  },
+  dataZoom: [
+    {
+      type: 'inside',
+      startValue: '0'
+    },
+    {
+      startValue: '0'
+    }
+  ],
+  xAxis: {
+    type: 'time',
+    boundaryGap: false
+  },
+  yAxis: [{}],
+  // 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
+  //     },
+  //     axisLine: {
+  //       show: true,
+  //       lineStyle: {
+  //         color: colors[0]
+  //       }
+  //     }
+  //   },
+  //   {
+  //     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
+  //     },
+  //     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]
+  //       }
+  //     }
+  //   }
+  // ],
+  series: [{}]
+  // series: [
+  //   {
+  //     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',
+  //     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 options1 = {
+  color: colors,
+  title: {
+    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
+  },
+  toolbox: {
+    feature: {
+      restore: {}
+    }
+  },
+  xAxis: {
+    type: 'time',
+    boundaryGap: false
+  },
+  yAxis: {
+    type: 'value',
+    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: '华尔街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',
+      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,
+      offset: 0,
+      scale: true, //自适应
+      minInterval: 1, //最小间距
+      nameTextStyle: {
+        fontSize: 12,
+        padding: [0, 0, 0, 0] //name文字位置 对应 上右下左
+      },
+      axisTick: {
+        // 轴刻度
+        show: false
+      },
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: colors[0]
+        }
+      }
+    },
+    {
+      type: 'value',
+      name: '瞬时热量(JG/h)',
+      position: 'right',
+      alignTicks: true,
+      offset: 0,
+      scale: true, //自适应
+      minInterval: 1, //最小间距
+      nameTextStyle: {
+        fontSize: 12,
+        padding: [0, 0, 0, 0] //name文字位置 对应 上右下左
+      },
+      axisTick: {
+        // 轴刻度
+        show: false
+      },
+      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',
+      yAxisIndex: 0,
+      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: 1,
+      data: [
+        ['2023-10-01 08:00:00', Math.round(Math.random() * 600)],
+        ['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)]
+      ]
+    }
+  ]
+};
+
+onMounted(() => {
+  deptId.value = sessionStorage.getItem('deptId') === null ? 0 : Number(sessionStorage.getItem('deptId'));
+  getDevice();
+  getParam();
+  getPortion();
+  // const chart = echarts.init(stackedRef.value);
+  // chart.setOption(options2);
+});
+
+document.addEventListener('keyup', e => {
+  //监听键盘事件
+  console.log('按键:', e.key);
+  if (e.key === 'ArrowUp') {
+    keyClick('0');
+  } else if (e.key === 'ArrowDown') {
+    keyClick('1');
+  }
+});
+function keyClick(res: string) {
+  //键盘事件
+  if (filterForm.startTime === '' && filterForm.endTime === '') {
+    ElMessage({
+      message: '请选择时间',
+      type: 'warning'
+    });
+    return;
+  }
+  if (filterForm.deviceUuid === '') {
+    ElMessage({
+      message: '请选择设备',
+      type: 'warning'
+    });
+    return;
+  }
+  if (filterForm.paramCode === '') {
+    ElMessage({
+      message: '请选择参数',
+      type: 'warning'
+    });
+    return;
+  }
+  const device = searchForm.device;
+  const deviceDataValue = deviceData.value;
+  console.log('已选设备:', searchForm.device);
+  if (device.length === 1 && deviceDataValue?.length != 0) {
+    deviceDataValue?.map((item: deetsVo, index: number) => {
+      console.log('遍历设备:', item, index);
+      if (res === '0') {
+        //上一个
+        if (device[0] === item.centerDeviceCode && index != 0) {
+          searchForm.device = [deviceDataValue[index - 1].centerDeviceCode];
+          filterForm.deviceUuid = searchForm.device.toString();
+          console.log('当前设备:', searchForm.device);
+        }
+      } else if (res === '1') {
+        //下一个
+        if (device[0] === item.centerDeviceCode && index + 1 != deviceDataValue?.length) {
+          console.log('当前设备:', item.deviceName, index);
+          searchForm.device = [deviceDataValue[index + 1].centerDeviceCode];
+          filterForm.deviceUuid = searchForm.device.toString();
+          console.log('当前设备:', searchForm.device);
+        }
+      }
+    });
+  }
+  getDeviceInfo();
+}
+
+function lineClick() {
+  //返回上一页
+  router.go(-1);
+}
+
+function getDevice() {
+  //获取设备
+  const params = deptId.value;
+  getDevices(params).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;
+      for (let i = 0; i < res.data.length - 6; i++) {
+        colors.push(randomColor());
+      }
+      // console.log('colors--', colors);
+    }
+  });
+}
+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) {
+      init(res.data);
+    }
+  });
+}
+
+function init(data: any) {
+  //折线图实例化
+  options.yAxis = [];
+  options.legend.data = [];
+  options.series = [];
+  if (data.mainInfos.length === 0) {
+    options.title.text = '暂无数据';
+    options.title.x = 'center';
+    options.title.y = 'center';
+    const chart = echarts.init(stackedRef.value);
+    chart.clear();
+    chart.resize();
+    console.log('options--', options);
+    chart.setOption(options);
+    return;
+  }
+  options.title.text = data.additionalInfo.name;
+  options.title.x = 'top';
+  options.title.y = 'left';
+  data.units.map((item: seriesVo, index: number) => {
+    const offsetData = index === 0 ? 0 : index === 1 ? 0 : (index - 1) * 100;
+    console.log('offsetData--', offsetData);
+    options.yAxis.push({
+      type: 'value',
+      name: `${item.name}(${item.unit})`,
+      position: `${index === 0 ? 'left' : 'right'}`,
+      alignTicks: true,
+      offset: offsetData,
+      scale: true, //自适应
+      // minInterval: 1, //最小间距
+      nameTextStyle: {
+        fontSize: 12,
+        padding: [0, 0, 0, 0] //name文字位置 对应 上右下左
+      },
+      axisTick: {
+        // 轴刻度
+        show: false
+      },
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: colors[index]
+        }
+      }
+    });
+  });
+  data.mainInfos.map((item: seriesVo, index: number) => {
+    options.legend.data.push(item.name);
+    options.series.push({
+      name: item.name,
+      type: 'line',
+      smooth: true,
+      symbol: 'none',
+      yAxisIndex: item.index,
+      data: item.data
+    });
+  });
+  // if (multipleLimit.value === 0 && parameterLimit.value === 1) {
+  //   console.log('单设备多参数');
+  //   data.mainInfos.map((item: seriesVo, index: number) => {
+  //     const offsetData = index === 0 ? 0 : index === 1 ? 0 : (index - 1) * 100;
+  //     console.log('offsetData--', offsetData);
+  //     options.legend.data.push(item.name);
+  //     options.yAxis.push({
+  //       type: 'value',
+  //       name: `${item.name}(${item.paramUnit})`,
+  //       position: `${index === 0 ? 'left' : 'right'}`,
+  //       alignTicks: true,
+  //       offset: offsetData,
+  //       scale: true, //自适应
+  //       // minInterval: 1, //最小间距
+  //       nameTextStyle: {
+  //         fontSize: 12,
+  //         padding: [0, 0, 0, 0] //name文字位置 对应 上右下左
+  //       },
+  //       axisTick: {
+  //         // 轴刻度
+  //         show: false
+  //       },
+  //       axisLine: {
+  //         show: true,
+  //         lineStyle: {
+  //           color: colors[index]
+  //         }
+  //       }
+  //     });
+  //     options.series.push({
+  //       name: item.name,
+  //       type: 'line',
+  //       smooth: true,
+  //       symbol: 'none',
+  //       yAxisIndex: index,
+  //       data: item.data
+  //     });
+  //   });
+  // } else {
+  //   console.log('多设备单参数');
+  //   options.yAxis.push({
+  //     type: 'value',
+  //     scale: true, //自适应
+  //     minInterval: 1, //最小间距
+  //     name: `${data.additionalInfo.name}(${data.additionalInfo.unit})`,
+  //     nameTextStyle: {
+  //       fontSize: 12,
+  //       padding: [0, 0, 0, 0] //name文字位置 对应 上右下左
+  //     },
+  //     axisTick: {
+  //       // 轴刻度
+  //       show: false
+  //     }
+  //   });
+  //   data.mainInfos.map((item: seriesVo) => {
+  //     options.legend.data.push(item.name);
+  //     options.series.push({
+  //       name: item.name,
+  //       type: 'line',
+  //       smooth: true,
+  //       symbol: 'none',
+  //       data: item.data
+  //     });
+  //   });
+  // }
+  const chart = echarts.init(stackedRef.value);
+  chart.clear();
+  chart.resize();
+  console.log('options--', options);
+  chart.setOption(options);
+
+  // this.option.title.text = this.title;
+  // this.option.xAxis.data = this.data.xaxis;
+  // this.option.series = [];
+  // this.option.legend.data = [];
+  // this.data.data.forEach((item, index) => {
+  //   this.option.legend.data.push(item.text);
+  //   this.option.series.push({
+  //     name: item.text,
+  //     data: item.data,
+  //     symbolSize: 9,
+  //     itemStyle: {
+  //       normal: {
+  //         color: this.color[index % this.color.length], //折线点的颜色
+  //         lineStyle: {
+  //           color: this.color[index % this.color.length], //折线的颜色
+  //           width: 1 //设置线条粗细
+  //         }
+  //       }
+  //     },
+  //     type: 'line'
+  //   });
+  // });
+  // this.option && this.myChart.setOption(this.option);
+  // 自适应
+  // window.addEventListener('resize', () => {
+  //   chart.resize();
+  // });
+}
+
+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) {
+  //参数选择确认
+  parameterLimit.value = res.length <= 1 ? 0 : 1;
+  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 = '';
+  init(resetInit);
+};
+</script>
+<style lang="scss" scoped>
+@import './index.scss';
+</style>
diff --git a/src/views/details/index.vue b/src/views/details/index.vue
index bf3d5ac..6012fd5 100644
--- a/src/views/details/index.vue
+++ b/src/views/details/index.vue
@@ -34,7 +34,6 @@
         <el-form-item class="item" label="设备:" prop="device">
           <el-select
             v-model="searchForm.device"
-            multiple
             filterable
             clearable
             collapse-tags
@@ -54,7 +53,6 @@
           <el-select
             v-model="searchForm.parameter"
             multiple
-            :multiple-limit="multipleLimit"
             filterable
             clearable
             collapse-tags
@@ -89,7 +87,7 @@
           </el-select>
         </el-form-item>
         <el-form-item class="item">
-          <el-checkbox v-model="searchForm.showZero" label="是否显示0值" size="large" />
+          <el-checkbox v-model="searchForm.showZero" label="是否显示0值" size="large" @change="showZeroChange" />
         </el-form-item>
         <div class="formBtn">
           <el-form-item class="item">
@@ -104,7 +102,6 @@
         <div ref="stackedRef" class="stackedLine">暂无数据</div>
       </div>
     </el-card>
-    <!-- <Test /> -->
   </div>
 </template>
 <script lang="ts" setup>
@@ -115,7 +112,6 @@ import { randomColor } from '@/utils/index';
 const stackedRef: Ref<HTMLElement | any> = ref(null);
 import type { FormInstance, FormRules } from 'element-plus';
 import { ReturnDownBack } from '@vicons/ionicons5';
-// import Test from './test.vue';
 
 import { getDevices, getParams, getPortions, getDeviceInfos } from '@/api/device/index';
 import { deetsVo, partitionVo, parameterVo, seriesVo } from '@/api/device/types';
@@ -125,13 +121,13 @@ const route = useRoute();
 
 const searchRef = ref<FormInstance>();
 const defaultTime = new Date(2000, 1, 1, 12, 0, 0); // '12:00:00'
-const multipleLimit = ref(0);
+// const multipleLimit = ref(0);
 const parameterLimit = ref(0);
 const deptId = ref(0);
 // const seriesData = ref<seriesVo[]>();
 const searchForm = reactive({
   time: '',
-  device: [],
+  device: '',
   parameter: [],
   partition: '',
   showZero: false
@@ -172,8 +168,12 @@ const resetInit = {
   mainInfos: [],
   additionalInfo: null
 };
+export interface deviceVo {
+  centerDeviceCode: string;
+  deviceName: string;
+}
 const colors = ['#5470c6', '#91cc75', '#fac858', '#1a94bc', '#f26b1f', '#5bae23'];
-const deviceData = ref<deetsVo[]>();
+const deviceData = ref<deviceVo[]>();
 const parameterData = ref<parameterVo[]>();
 const partitionData = ref<partitionVo[]>();
 
@@ -1113,6 +1113,11 @@ onMounted(() => {
   // chart.setOption(options2);
 });
 
+function lineClick() {
+  //返回上一页
+  router.go(-1);
+}
+
 document.addEventListener('keyup', e => {
   //监听键盘事件
   console.log('按键:', e.key);
@@ -1146,23 +1151,24 @@ function keyClick(res: string) {
     return;
   }
   const device = searchForm.device;
+  const deviceDataValue = deviceData.value;
   console.log('已选设备:', searchForm.device);
-  if (device.length === 1 && deviceData.value?.length != 0) {
-    deviceData.value?.map((item: deetsVo, index: number) => {
+  if (deviceDataValue?.length != 0) {
+    deviceDataValue?.map((item: deviceVo, index: number) => {
       console.log('遍历设备:', item, index);
       if (res === '0') {
         //上一个
-        if (device[0] === item.centerDeviceCode && index != 0) {
-          searchForm.device = [deviceData.value[index - 1].centerDeviceCode];
-          filterForm.deviceUuid = searchForm.device.toString();
+        if (device === item.centerDeviceCode && index != 0) {
+          searchForm.device = deviceDataValue[index - 1].centerDeviceCode;
+          filterForm.deviceUuid = searchForm.device;
           console.log('当前设备:', searchForm.device);
         }
       } else if (res === '1') {
         //下一个
-        if (device[0] === item.centerDeviceCode && index + 1 != deviceData.value?.length) {
+        if (device === item.centerDeviceCode && index + 1 != deviceDataValue?.length) {
           console.log('当前设备:', item.deviceName, index);
-          searchForm.device = [deviceData.value[index + 1].centerDeviceCode];
-          filterForm.deviceUuid = searchForm.device.toString();
+          searchForm.device = deviceDataValue[index + 1].centerDeviceCode;
+          filterForm.deviceUuid = searchForm.device;
           console.log('当前设备:', searchForm.device);
         }
       }
@@ -1171,9 +1177,34 @@ function keyClick(res: string) {
   getDeviceInfo();
 }
 
-function lineClick() {
-  //返回上一页
-  router.go(-1);
+function showZeroChange() {
+  //是否显示0值
+  if (filterForm.startTime === '' && filterForm.endTime === '') {
+    searchForm.showZero = !searchForm.showZero;
+    ElMessage({
+      message: '请选择时间',
+      type: 'warning'
+    });
+    return;
+  }
+  if (filterForm.deviceUuid === '') {
+    searchForm.showZero = !searchForm.showZero;
+    ElMessage({
+      message: '请选择设备',
+      type: 'warning'
+    });
+    return;
+  }
+  if (filterForm.paramCode === '') {
+    searchForm.showZero = !searchForm.showZero;
+    ElMessage({
+      message: '请选择参数',
+      type: 'warning'
+    });
+    return;
+  }
+  filterForm.showZero = searchForm.showZero;
+  getDeviceInfo();
 }
 
 function getDevice() {
@@ -1382,9 +1413,9 @@ function timeChange(res: any) {
 
 function deviceChange(res: any) {
   //设备选择确认
-  searchForm.parameter = [];
-  multipleLimit.value = res.length <= 1 ? 0 : 1;
-  filterForm.deviceUuid = res.toString();
+  // searchForm.parameter = [];
+  // multipleLimit.value = res.length <= 1 ? 0 : 1;
+  filterForm.deviceUuid = res;
 }
 function parameterChange(res: any) {
   //参数选择确认
diff --git a/src/views/details/test.vue b/src/views/details/test.vue
deleted file mode 100644
index e5d1ca7..0000000
--- a/src/views/details/test.vue
+++ /dev/null
@@ -1,136 +0,0 @@
-<template>
-  <div id="demo"></div>
-</template>
-
-<script setup lang="ts">
-import * as echart from 'echarts';
-import { onMounted, ref } from 'vue';
-
-const start = ref(7);
-const end = ref(9);
-
-onMounted(() => {
-  const myChart = echart.init(document.getElementById('demo'));
-  const option = {
-    tooltip: {
-      trigger: 'axis',
-      axisPointer: {
-        type: 'shadow'
-      }
-    },
-    grid: {
-      top: 50,
-      bottom: 50,
-      right: 30
-    },
-    toolbox: {
-      show: true, // 是否显示
-      orient: 'horizontal', // 方向
-      itemSize: 15, // 图标大小
-      itemGap: 8, // 间隔
-      showTitle: true, // 鼠标悬浮时是否显示标题
-      feature: {
-        // 工具配置
-        myLeft: {
-          show: true,
-          title: '上一个',
-          icon: 'path://M735.208665 65.582671l-446.41733 446.417329 446.41733 446.417329z',
-          onclick: () => {
-            if (end.value < 9) {
-              start.value += 1;
-              end.value += 1;
-            }
-            myChart.dispatchAction({
-              type: 'dataZoom',
-              // 可选，dataZoom 组件的 index，多个 dataZoom 组件时有用，默认为 0
-              dataZoomIndex: 0,
-              // 开始位置的数值
-              startValue: start.value,
-              // 结束位置的数值
-              endValue: end.value
-            });
-          }
-        },
-        myRight: {
-          show: true,
-          title: '下一个',
-          icon: 'path://M288.791335 65.582671l446.41733 446.417329-446.41733 446.417329z',
-          onclick: () => {
-            if (start.value > 0) {
-              start.value -= 1;
-              end.value -= 1;
-            }
-            myChart.dispatchAction({
-              type: 'dataZoom',
-              // 可选，dataZoom 组件的 index，多个 dataZoom 组件时有用，默认为 0
-              dataZoomIndex: 0,
-              // 开始位置的数值
-              startValue: start.value,
-              // 结束位置的数值
-              endValue: end.value
-            });
-          }
-        }
-      },
-      iconStyle: {
-        // 图标样式
-        color: '#869AD7'
-      },
-      right: 3
-    },
-    xAxis: {
-      type: 'value',
-      splitLine: {
-        lineStyle: {
-          type: 'dashed'
-        }
-      }
-    },
-    yAxis: {
-      type: 'category',
-      data: ['ten', 'nine', 'eight', 'seven', 'six', 'five', 'four', 'three', 'two', 'one']
-    },
-    // 设置滑块
-    dataZoom: [
-      {
-        // 是否显示滑块
-        show: true,
-        // 那一条y轴的滑块
-        yAxisIndex: 0,
-        // 当前数据窗口外的数据，被 设置为空
-        filterMode: 'empty',
-        // 滑块的宽高
-        width: 15,
-        height: '70%',
-        // 滚动条內空白显示
-        showDataShadow: false,
-        // 滑块的位置
-        left: '95%',
-        // 起始位置 类目轴表示下标
-        startValue: 10,
-        // 结束位置
-        endValue: 8,
-        // 锁定选择区域的大小  最多显示3个类目
-        zoomLock: true
-      }
-    ],
-    series: [
-      {
-        name: 'Cost',
-        type: 'bar',
-        data: [12, 23, 34, 56, 43, 67, 89, 90, 76, 29]
-      }
-    ]
-  };
-  myChart.setOption(option);
-});
-</script>
-
-<style lang="scss" scoped>
-#demo {
-  width: 600px;
-  height: 300px;
-  border: 1px solid red;
-  padding-right: 30px;
-}
-</style>
diff --git a/src/views/monitoring/components/header.vue b/src/views/monitoring/components/header.vue
index 95f731a..be47d60 100644
--- a/src/views/monitoring/components/header.vue
+++ b/src/views/monitoring/components/header.vue
@@ -106,8 +106,8 @@
         </el-table-column>
         <el-table-column prop="totalCounts" label="告警累计" align="center" />
         <el-table-column label="报警时间" align="center">
-          <el-table-column prop="alertFirstTime" label="首次告警时间" align="center" />
-          <el-table-column prop="alertLastTime" label="末次告警时间" align="center" />
+          <el-table-column prop="alertFirstTimeS" label="首次告警时间" align="center" />
+          <el-table-column prop="alertLastTimeS" label="末次告警时间" align="center" />
         </el-table-column>
         <el-table-column fixed="right" label="操作" align="center">
           <template #default="scope">
@@ -269,7 +269,7 @@ function getwaringList() {
   const paramsr = {
     beginTime: '',
     endTime: '',
-    orgCode: deptId.value,
+    orgCode: sessionStorage.getItem('deptId') === null ? 0 : Number(sessionStorage.getItem('deptId')),
     params
   };
   getWarList(paramsr).then((res: any) => {
diff --git a/src/views/monitoring/components/menu.vue b/src/views/monitoring/components/menu.vue
index f5788ec..757ca7f 100644
--- a/src/views/monitoring/components/menu.vue
+++ b/src/views/monitoring/components/menu.vue
@@ -1,55 +1,65 @@
 <template>
   <div class="menuCantent">
-    <n-menu ref="menuInstRef" class="menu" :indent="0" :options="menuOptions" v-model:value="selectedKey"
-      key-field="deptId" label-field="deptName" :default-expand-all="false" :watch-props="['defaultExpandedKeys']"
-      :render-label="renderMenuLabel" @update:value="menuUpdateValue" />
+    <n-menu
+      ref="menuInstRef"
+      class="menu"
+      :indent="0"
+      :options="menuOptions"
+      v-model:value="selectedKey"
+      key-field="deptId"
+      label-field="deptName"
+      :default-expand-all="false"
+      :watch-props="['defaultExpandedKeys']"
+      :render-label="renderMenuLabel"
+      @update:value="menuUpdateValue"
+    />
   </div>
 </template>
 
 <script lang="ts" setup>
-import { useRoute } from "vue-router";
+import { useRoute } from 'vue-router';
 import type { MenuOption } from 'naive-ui';
 // import { NEllipsis } from 'naive-ui';
 import { getMenu } from '@/api/table/list';
 import { getMenuData } from '@/api/device/index';
 import { getFirstNodeLastLevel } from '@/utils/index';
-import useStorage from '@/utils/useStorage'
+import useStorage from '@/utils/useStorage';
 import mitt from '@/plugins/bus';
-const router = useRoute()
+const router = useRoute();
 const menuOptions = ref([]);
 const selectedKey = ref();
 const sessionStorageIns = useStorage('sessionStorage');
-const routerType = ref('')
-const id = ref(0)
-const deptId = ref(0)
-const menuDeptKey = ref(0)
-const menuIdKey = ref(0)
+const routerType = ref('');
+const id = ref(0);
+const deptId = ref(0);
+const menuDeptKey = ref(0);
+const menuIdKey = ref(0);
 
 const emit = defineEmits(['tableMenuData']);
 
 const props = defineProps({
   menuType: {
     type: String,
-    default: '1',
-  },
+    default: '1'
+  }
 });
 
 onMounted(() => {
-  routerType.value = router.query?.id === undefined ? "0" : "1"
-  id.value = sessionStorage.getItem('id') === null ? 0 : Number(sessionStorage.getItem('id'))
-  deptId.value = sessionStorage.getItem('deptId') === null ? 0 : Number(sessionStorage.getItem('deptId'))
+  routerType.value = router.query?.id === undefined ? '0' : '1';
+  id.value = sessionStorage.getItem('id') === null ? 0 : Number(sessionStorage.getItem('id'));
+  deptId.value = sessionStorage.getItem('deptId') === null ? 0 : Number(sessionStorage.getItem('deptId'));
   if (props.menuType === '1') {
     menuApi();
   } else if (props.menuType === '2') {
-    comMenuApi()
+    comMenuApi();
   }
 });
 
 function menuApi() {
-  //获取数据左侧菜单
+  //获取表格左侧菜单
   getMenu().then((res: any) => {
     if (res.code === 200) {
-      menuDeptKey.value = routerType.value === '1' ? deptId.value : getFirstNodeLastLevel(res.data).deptId
+      menuDeptKey.value = routerType.value === '1' ? deptId.value : getFirstNodeLastLevel(res.data).deptId;
       removeChildren(res.data);
       menuOptions.value = res.data;
       selectedKey.value = menuDeptKey.value;
@@ -63,11 +73,12 @@ function comMenuApi() {
   //获取组态左侧菜单
   getMenuData().then((res: any) => {
     if (res.code === 200) {
-      menuIdKey.value = routerType.value === '1' ? id.value : getFirstNodeLastLevel(res.data).deptId
+      menuIdKey.value = routerType.value === '1' ? id.value : getFirstNodeLastLevel(res.data).deptId;
+      const parentId = routerType.value === '1' ? id.value : getFirstNodeLastLevel(res.data).parentId;
       removeChildren(res.data);
       menuOptions.value = res.data;
       selectedKey.value = menuIdKey.value;
-      sessionStorageIns.setUseStorage('deptId', routerType.value === '1' ? deptId.value : menuIdKey.value);
+      sessionStorageIns.setUseStorage('deptId', routerType.value === '1' ? deptId.value : parentId);
       mitt.emit(props.menuType === '1' ? 'menuKey' : 'deviceMenuKey', menuIdKey.value);
       emit('tableMenuData', res.data);
     }
@@ -80,7 +91,7 @@ function removeChildren(menu: any) {
     return;
   }
 
-  menu.forEach((item) => {
+  menu.forEach(item => {
     if (item.children && item.children.length === 0) {
       delete item.children;
     } else {
@@ -93,11 +104,14 @@ const renderMenuLabel = (option: MenuOption) => {
   //菜单标题增加提示
   // return h(NEllipsis, null, option.deptName as string);
   return h(NEllipsis, null, { default: () => option.deptName });
-}
+};
 
 function menuUpdateValue(key: string, item: MenuOption) {
   //点击菜单
   sessionStorageIns.setUseStorage(props.menuType === '1' ? 'deptId' : 'id', key);
+  if (props.menuType === '2') {
+    sessionStorageIns.setUseStorage('deptId', item.parentId);
+  }
   mitt.emit(props.menuType === '1' ? 'menuKey' : 'deviceMenuKey', key);
   console.log(key, item);
 }
@@ -129,17 +143,17 @@ function menuUpdateValue(key: string, item: MenuOption) {
           }
 
           .n-menu-item-content__arrow {
-            color: #B1E3FF;
+            color: #b1e3ff;
           }
         }
 
         .n-menu-item-content.n-menu-item-content--child-active {
           .n-menu-item-content-header {
-            color: #B1E3FF;
+            color: #b1e3ff;
           }
 
           .n-menu-item-content__arrow {
-            color: #B1E3FF;
+            color: #b1e3ff;
           }
         }
 
@@ -158,7 +172,7 @@ function menuUpdateValue(key: string, item: MenuOption) {
 
         .n-menu-item-content-header {
           font-size: 2.2rem;
-          color: #B1E3FF;
+          color: #b1e3ff;
         }
       }
 
diff --git a/src/views/monitoring/devicemanage/components/main.vue b/src/views/monitoring/devicemanage/components/main.vue
index e397fc4..05b3cac 100644
--- a/src/views/monitoring/devicemanage/components/main.vue
+++ b/src/views/monitoring/devicemanage/components/main.vue
@@ -144,8 +144,8 @@
                       @update:value="submitBlur(res)"
                       v-if="res.ctrlpro.valueType === 'bool'"
                     >
-                      <template #checked>Y</template>
-                      <template #unchecked>N</template>
+                      <template #checked>启</template>
+                      <template #unchecked>停</template>
                     </n-switch>
                     <n-input
                       size="tiny"
@@ -212,8 +212,34 @@
                       @update:value="submitBlur(res)"
                       v-if="res.ctrlpro.valueType === 'bool'"
                     >
-                      <template #checked>Y</template>
-                      <template #unchecked>N</template>
+                      <template #checked>启</template>
+                      <template #unchecked>停</template>
+                    </n-switch>
+                    <n-input
+                      size="tiny"
+                      v-model:value="res.value"
+                      readonly
+                      placeholder="0"
+                      style="width: 80px; opacity: 0.9; text-align: center"
+                      v-if="res.ctrlpro.valueType != 'bool'"
+                      @click="inputClick(res)"
+                    />
+                  </i>
+                </span>
+                <span v-for="(res, index) in item.header_pump" :key="index">
+                  <i>{{ res.label }}： </i>
+                  <i v-if="res.ctrlFlag === 0">{{ res.value }}{{ res.paramUnit }}</i>
+                  <i v-if="res.ctrlFlag === 1">
+                    <n-switch
+                      class="switch"
+                      size="small"
+                      v-model:value="res.value"
+                      style="--n-rail-color-active: #409eff; --n-rail-color: #ff4949"
+                      @update:value="submitBlur(res)"
+                      v-if="res.ctrlpro.valueType === 'bool'"
+                    >
+                      <template #checked>启</template>
+                      <template #unchecked>停</template>
                     </n-switch>
                     <n-input
                       size="tiny"
diff --git a/src/views/monitoring/screen/components/main.vue b/src/views/monitoring/screen/components/main.vue
index f6c4920..27e64e2 100644
--- a/src/views/monitoring/screen/components/main.vue
+++ b/src/views/monitoring/screen/components/main.vue
@@ -61,14 +61,32 @@
         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>
+            <vxe-switch
+              v-model="params.data.value"
+              size="small"
+              open-label="启"
+              close-label="停"
+              v-if="params.data.valueType === 'bool'"
+            ></vxe-switch>
+            <vxe-input
+              v-model="params.data.value"
+              placeholder="请输入数值"
+              type="number"
+              clearable
+              v-if="params.data.valueType != 'bool'"
+            ></vxe-input>
+            <!-- <vxe-input
+              v-model="params.data.value"
+              placeholder="请输入数值"
+              clearable
+              v-if="params.data.valueType != 'bool'"
+            ></vxe-input> -->
           </template>
         </vxe-form-item>
         <vxe-form-item align="center" span="24">
@@ -122,34 +140,36 @@ const tableBorder = ref(true);
 // const waringArrow = ref([])
 
 interface FormDataVO {
-  //url: string;
-  deviceName: string;
-  paramCode: string;
-  value: string;
+  centeruuid: string;
+  paramcode: string;
+  url: string;
+  valueType: string;
+  value: string | boolean;
 }
 const formRef = ref<VxeFormInstance>();
 const formLoading = ref(false);
 const formData = ref<FormDataVO>({
-  //url: '',
-  deviceName: '',
-  paramCode: '',
+  centeruuid: '',
+  paramcode: '',
+  url: '',
+  valueType: '',
   value: ''
 });
-const formRules = ref<VxeFormPropTypes.Rules>({
-  value: [
-    { required: true, message: '请输入数值' },
-    { min: 1, max: 100, message: '长度在 1 到 100 个字符' },
-    {
-      validator({ itemValue }) {
-        // 自定义校验
-        const reg = /^-?\d+\.?\d{0,2}$/;
-        if (!reg.test(itemValue)) {
-          return new Error('请输入正确数值！');
-        }
-      }
-    }
-  ]
-});
+// const formRules = ref<VxeFormPropTypes.Rules>({
+//   value: [
+//     { required: true, message: '请输入数值' },
+//     { min: 1, max: 100, message: '长度在 1 到 100 个字符' },
+//     {
+//       validator({ itemValue }) {
+//         // 自定义校验
+//         const reg = /^-?\d+\.?\d{0,2}$/;
+//         if (!reg.test(itemValue)) {
+//           return new Error('请输入正确数值！');
+//         }
+//       }
+//     }
+//   ]
+// });
 
 const userStorageInfo = sessionStorage.getItem('userInfo');
 const userInfo = JSON.parse(userStorageInfo === null ? '' : userStorageInfo);
@@ -369,9 +389,9 @@ const cellDBLClickEvent: VxeTableEvents.CellDblclick<TableVo> = ({ row, column }
     modalTitle.value = column.title;
     ///formData.value.url = data.url;
     //formData.value.deviceName = cellField.deviceName;
+    formData.value = cellField.ctrlPro;
     formData.value.value = cellField.val;
-    formData.value.deviceName = cellField.ctrlPro.centeruuid;
-    formData.value.paramCode = cellField.ctrlPro.paramcode;
+    // formData.value.paramCode = cellField.ctrlPro.paramcode;
     editModal.value = true;
   }
   console.log(row[column.field]);
@@ -379,11 +399,15 @@ const cellDBLClickEvent: VxeTableEvents.CellDblclick<TableVo> = ({ row, column }
 
 const formatRole: VxeColumnPropTypes.Formatter<HeaderVo> = ({ cellValue }) => {
   //表单参数为object时处理
+  console.log(cellValue);
   // 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.ctrlPro.valueType != 'bool' ? cellValue.val : cellValue.val === 'true' ? '启' : '停'
+  }</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;
@@ -414,23 +438,12 @@ const submitEvent: VxeFormEvents.Submit = () => {
   //修改数据之后通过websocket传给后端
   formLoading.value = true;
   const $table = tableRef.value;
-  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
-    //},
-  };
+  const submitData = formData.value;
   console.log(submitData);
   //Add by zhousq 2023-10-12 控制接口调用 post 方法
   sendCtrl(submitData).then((res: any) => {
     if (res.code === 200) {
-      console.log(res.data);
+      ElNotification({ message: res.data.msg });
     }
   });
   //socket.onSend(submitData);
diff --git a/vite.config.ts b/vite.config.ts
index e88c3fd..0dbe8a2 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -45,9 +45,9 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
       hmr: true, //配置HMR
       proxy: {
         '/dev-api': {
-          // target: 'http://172.1.2.196:9010/', //本地接口地址
+          target: 'http://172.1.2.6:9010/', //本地接口地址
           // target: 'http://172.1.2.158:9010/', //本地接口地址
-          target: 'http://10.10.10.56:9010/', //线上测试接口地址
+          // target: 'http://10.10.10.56:9010/', //线上测试接口地址
           changeOrigin: true,
           rewrite: path => path.replace(/^\/dev-api/, '')
         }