From 3c9c0336f7c1783dfea1f07b7fc970cca2d44351 Mon Sep 17 00:00:00 2001
From: fuguobin <fgbin2008@163.com>
Date: Fri, 20 Oct 2023 17:26:51 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9B=BE=E8=A1=A8=E8=AF=A6=E6=83=85=E5=88=B6?=
 =?UTF-8?q?=E4=BD=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/device/types.ts      |   8 +
 src/types/auto-imports.d.ts  |   4 +
 src/views/details/index.scss |   6 +-
 src/views/details/index.vue  | 505 +++++++++++++++++++++++++++++++++--
 vite.config.ts               |   2 +-
 5 files changed, 506 insertions(+), 19 deletions(-)

diff --git a/src/api/device/types.ts b/src/api/device/types.ts
index 3c95d82..6bfe661 100644
--- a/src/api/device/types.ts
+++ b/src/api/device/types.ts
@@ -73,3 +73,11 @@ export interface parameterVo {
   updateTime: null;
   version: null;
 }
+export interface seriesVo {
+  name: string;
+  type: string;
+  smooth: boolean;
+  symbol: string;
+  paramUnit: string;
+  data: Array<string | number>;
+}
diff --git a/src/types/auto-imports.d.ts b/src/types/auto-imports.d.ts
index e5c7bdb..5742656 100644
--- a/src/types/auto-imports.d.ts
+++ b/src/types/auto-imports.d.ts
@@ -5,6 +5,8 @@ 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']
@@ -274,6 +276,8 @@ 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.scss b/src/views/details/index.scss
index f8973ae..f86e1ef 100644
--- a/src/views/details/index.scss
+++ b/src/views/details/index.scss
@@ -12,7 +12,11 @@
     .comparisonInfo {
       .stackedLine {
         width: 100%;
-        height: 80vh;
+        height: 82vh;
+        font-size: 1.4rem;
+        text-align: center;
+        color: #606266;
+        line-height: 82vh;
       }
     }
   }
diff --git a/src/views/details/index.vue b/src/views/details/index.vue
index 7b3bf6d..ca759af 100644
--- a/src/views/details/index.vue
+++ b/src/views/details/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="details">
     <el-card class="search" shadow="always">
-      <el-form class="searchForm" ref="searchRef" :inline="true" :model="searchForm" label-width="100px">
+      <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"
@@ -15,7 +15,16 @@
           />
         </el-form-item>
         <el-form-item class="item" label="设备" prop="device">
-          <el-select v-model="searchForm.device" multiple filterable placeholder="请选择设备" @change="deviceChange">
+          <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"
@@ -30,6 +39,9 @@
             multiple
             :multiple-limit="multipleLimit"
             filterable
+            clearable
+            collapse-tags
+            collapse-tags-tooltip
             placeholder="请选择参数"
             @change="parameterChange"
           >
@@ -42,7 +54,15 @@
           </el-select>
         </el-form-item>
         <el-form-item class="item" label="分区" prop="partition">
-          <el-select v-model="searchForm.partition" filterable placeholder="请选择分区" @change="partitionChange">
+          <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"
@@ -51,7 +71,7 @@
             />
           </el-select>
         </el-form-item>
-        <el-form-item>
+        <el-form-item class="item">
           <el-button type="primary" @click="submitForm(searchRef)">确认</el-button>
           <el-button @click="resetForm(searchRef)">重置</el-button>
         </el-form-item>
@@ -59,7 +79,7 @@
     </el-card>
     <el-card class="echart" shadow="always">
       <div class="comparisonInfo">
-        <div ref="stackedRef" class="stackedLine" />
+        <div ref="stackedRef" class="stackedLine">暂无数据</div>
       </div>
     </el-card>
   </div>
@@ -68,14 +88,16 @@
 import * as echarts from 'echarts';
 import { Ref } from 'vue';
 const stackedRef: Ref<HTMLElement | any> = ref(null);
-import type { FormInstance } from 'element-plus';
+import type { FormInstance, FormRules } from 'element-plus';
 
 import { getDevices, getParams, getPortions, getDeviceInfos } from '@/api/device/index';
-import { deetsVo, partitionVo, parameterVo } from '@/api/device/types';
+import { deetsVo, partitionVo, parameterVo, seriesVo } from '@/api/device/types';
 
 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 seriesData = ref<seriesVo[]>();
 const searchForm = reactive({
   time: '',
   device: [],
@@ -89,6 +111,34 @@ const filterForm = reactive({
   paramCode: '',
   partion: ''
 });
+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[]>();
@@ -102,7 +152,318 @@ const partitionData = ref<partitionVo[]>();
 //   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: {
+  //   feature: {
+  //     restore: {}
+  //   }
+  // },
+  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: '多设备单参数'
   },
@@ -392,6 +753,7 @@ const options2 = {
       name: '瞬时流量(m³/h)',
       position: 'left',
       alignTicks: true,
+      offset: 0,
       scale: true, //自适应
       minInterval: 1, //最小间距
       nameTextStyle: {
@@ -414,6 +776,7 @@ const options2 = {
       name: '瞬时热量(JG/h)',
       position: 'right',
       alignTicks: true,
+      offset: 0,
       scale: true, //自适应
       minInterval: 1, //最小间距
       nameTextStyle: {
@@ -489,6 +852,7 @@ const options2 = {
       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)],
@@ -682,19 +1046,11 @@ const options2 = {
 };
 
 onMounted(() => {
-  // 图表初始化
-  const chart = echarts.init(stackedRef.value);
-  chart.setOption(options1);
-
   getDevice();
   getParam();
   getPortion();
-  getDeviceInfo();
-
-  // 大小自适应
-  window.addEventListener('resize', () => {
-    chart.resize();
-  });
+  // const chart = echarts.init(stackedRef.value);
+  // chart.setOption(options2);
 });
 
 function getDevice() {
@@ -729,10 +1085,123 @@ 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 = '暂无数据';
+  } else {
+    options.title.text = data.additionalInfo.name;
+    options.title.x = 'top';
+    options.title.y = 'left';
+    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];
@@ -747,6 +1216,7 @@ function deviceChange(res: any) {
 }
 function parameterChange(res: any) {
   //参数选择确认
+  parameterLimit.value = res.length <= 1 ? 0 : 1;
   filterForm.paramCode = res.toString();
 }
 function partitionChange(res: string) {
@@ -775,6 +1245,7 @@ const resetForm = (formEl: FormInstance | undefined) => {
   filterForm.deviceUuid = '';
   filterForm.paramCode = '';
   filterForm.partion = '';
+  init(resetInit);
 };
 </script>
 <style lang="scss" scoped>
diff --git a/vite.config.ts b/vite.config.ts
index b029392..c6d658d 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -46,7 +46,7 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
       proxy: {
         [env.VITE_APP_BASE_API]: {
           // target: 'http://172.1.2.196:9010/', //本地接口地址
-          target: 'http://172.1.2.93:9010/', //本地接口地址
+          target: 'http://172.1.2.139:9010/', //本地接口地址
           // target: 'http://10.10.10.56:9010/', //线上测试接口地址
           changeOrigin: true,
           rewrite: path => path.replace(new RegExp('^' + env.VITE_APP_BASE_API), '')