From f49efb5eddf8805157b0f9ff598c903993e2a85f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=99=BD=E8=8F=9C?=
 <43331987+JiaLiBai@users.noreply.github.com>
Date: Tue, 9 Dec 2025 18:25:36 +0800
Subject: [PATCH] =?UTF-8?q?ems=E6=8E=A5=E5=8F=A3=E3=80=81=E7=BB=BC?=
 =?UTF-8?q?=E5=90=88=E6=9F=A5=E8=AF=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/ems/dzjk.js                   |   8 +
 src/views/ems/dzjk/sbjk/ems/index.vue | 487 +++++++++++++++-----------
 src/views/ems/search/index.vue        | 388 +++++++++++++-------
 3 files changed, 547 insertions(+), 336 deletions(-)

diff --git a/src/api/ems/dzjk.js b/src/api/ems/dzjk.js
index f60a9fd..56a36b0 100644
--- a/src/api/ems/dzjk.js
+++ b/src/api/ems/dzjk.js
@@ -24,6 +24,14 @@ export function getSiteAllDeviceCategory(siteId) {
     })
 }
 
+//EMS
+export function getEmsDataList(siteId) {
+    return request({
+        url: `/ems/siteMonitor/getEmsDataList?siteId=${siteId}`,
+        method: 'get',
+    })
+}
+
 //获取pcs、实时运行头部的设备信息
 export function getRunningHeadInfo(siteId) {
     return request({
diff --git a/src/views/ems/dzjk/sbjk/ems/index.vue b/src/views/ems/dzjk/sbjk/ems/index.vue
index f440f7a..db31a67 100644
--- a/src/views/ems/dzjk/sbjk/ems/index.vue
+++ b/src/views/ems/dzjk/sbjk/ems/index.vue
@@ -1,206 +1,253 @@
 <template>
   <div v-loading="loading" class="ems">
-    <div
-        v-for="(item, index) in list"
-        :key="index + 'PcsHome'"
-        style="margin-bottom: 25px"
+    <!--    <div-->
+    <!--        v-for="(item, index) in list"-->
+    <!--        :key="index + 'PcsHome'"-->
+    <!--        style="margin-bottom: 25px"-->
+    <!--    >-->
+    <!--      <el-card-->
+    <!--          :class="{-->
+    <!--          'warning-card-container': item.workStatus === '1',-->
+    <!--          'timing-card-container': item.workStatus === '2',-->
+    <!--          'running-card-container': !['1', '2'].includes(item.workStatus),-->
+    <!--        }"-->
+    <!--          class="sbjk-card-container common-card-container-body-no-padding common-card-container-no-title-bg"-->
+    <!--          shadow="always"-->
+    <!--      >-->
+    <!--        &lt;!&ndash;        标题&ndash;&gt;-->
+    <!--        <div slot="header">-->
+    <!--          <span class="large-title"-->
+    <!--          >{{ item.deviceName }}</span-->
+    <!--          >-->
+    <!--          <div class="info">-->
+    <!--            <div>-->
+    <!--              {{-->
+    <!--                $store.state.ems.workStatusOptions[item.workStatus]-->
+    <!--              }}-->
+    <!--            </div>-->
+    <!--            <div>数据更新时间：{{ item.dataUpdateTime }}</div>-->
+    <!--          </div>-->
+    <!--          <div class="alarm">-->
+    <!--            <el-button type="primary" size="small" style="margin-right:20px;" @click="pointDetail(item,'point')">-->
+    <!--              详细-->
+    <!--            </el-button>-->
+    <!--            <el-badge :value="item.alarmNum || 0" class="item">-->
+    <!--              <i-->
+    <!--                  class="el-icon-message-solid alarm-icon"-->
+    <!--                  @click="pointDetail(item,'alarmPoint')"-->
+    <!--              ></i>-->
+    <!--            </el-badge>-->
+    <!--          </div>-->
+    <!--        </div>-->
+    <!--        &lt;!&ndash;        工作状态&ndash;&gt;-->
+    <!--        <div class="descriptions-main">-->
+    <!--          <el-descriptions :colon="false" :column="5" direction="vertical">-->
+    <!--            <el-descriptions-item-->
+    <!--                :contentClassName="`descriptions-direction ${-->
+    <!--                            item.workStatus === '0' ? 'save' : 'danger'-->
+    <!--                          }`"-->
+    <!--                :span="1"-->
+    <!--                label="工作状态"-->
+    <!--                labelClassName="descriptions-label"-->
+    <!--            >{{-->
+    <!--                $store.state.ems.workStatusOptions[item.workStatus]-->
+    <!--              }}-->
+    <!--            </el-descriptions-item-->
+    <!--            >-->
+    <!--            <el-descriptions-item-->
+    <!--                :span="1"-->
+    <!--                contentClassName="descriptions-direction"-->
+    <!--                label="工作模式"-->
+    <!--                labelClassName="descriptions-label"-->
+    <!--            >-->
+    <!--              todo 手动/自动-->
+    <!--              {{-->
+    <!--                $store.state.ems.gridStatusOptions[item.gridStatus]-->
+    <!--              }}-->
+
+    <!--            </el-descriptions-item-->
+    <!--            >-->
+    <!--            <el-descriptions-item-->
+    <!--                :span="1"-->
+    <!--                contentClassName="descriptions-direction"-->
+    <!--                label="并网状态"-->
+    <!--                labelClassName="descriptions-label"-->
+    <!--            >{{-->
+    <!--                $store.state.ems.gridStatusOptions[item.gridStatus]-->
+    <!--              }}-->
+    <!--            </el-descriptions-item-->
+    <!--            >-->
+    <!--            <el-descriptions-item-->
+    <!--                :span="1"-->
+    <!--                contentClassName="descriptions-direction"-->
+    <!--                label="告警状态"-->
+    <!--                labelClassName="descriptions-label"-->
+    <!--            >-->
+    <!--              todo-->
+    <!--              &lt;!&ndash;-->
+    <!--              {{-->
+    <!--                              $store.state.ems.warnOptions[item.warnMode]-->
+    <!--                            }}&ndash;&gt;-->
+    <!--            </el-descriptions-item-->
+    <!--            >-->
+    <!--            <el-descriptions-item-->
+    <!--                :contentClassName="`descriptions-direction ${-->
+    <!--                item.deviceStatus === '2' ? 'save' : 'danger'-->
+    <!--              }`"-->
+    <!--                :span="1"-->
+    <!--                label="设备状态"-->
+    <!--                labelClassName="descriptions-label"-->
+    <!--            >{{-->
+    <!--                $store.state.ems.deviceStatusOptions[item.deviceStatus]-->
+    <!--              }}-->
+    <!--            </el-descriptions-item-->
+    <!--            >-->
+    <!--          </el-descriptions>-->
+    <!--        </div>-->
+    <!--        &lt;!&ndash;        用电量&ndash;&gt;-->
+    <!--        <div class="descriptions-main descriptions-main-bg-color">-->
+    <!--          <el-descriptions :colon="false" :column="5" direction="vertical">-->
+    <!--            <el-descriptions-item-->
+    <!--                :span="5"-->
+    <!--                contentClassName="descriptions-direction"-->
+    <!--                label="当日用电量："-->
+    <!--                labelClassName="descriptions-label"-->
+    <!--            >-->
+    <!--            </el-descriptions-item-->
+    <!--            >-->
+    <!--            <el-descriptions-item-->
+    <!--                :span="1"-->
+    <!--                contentClassName="descriptions-direction"-->
+    <!--                label="电网用电量"-->
+    <!--                labelClassName="descriptions-label"-->
+    <!--            >-->
+    <!--            </el-descriptions-item-->
+    <!--            >-->
+    <!--            <el-descriptions-item-->
+    <!--                :span="1"-->
+    <!--                contentClassName="descriptions-direction"-->
+    <!--                label="储能放电量"-->
+    <!--                labelClassName="descriptions-label"-->
+    <!--            >-->
+    <!--            </el-descriptions-item-->
+    <!--            >-->
+    <!--            <el-descriptions-item-->
+    <!--                :span="1"-->
+    <!--                contentClassName="descriptions-direction"-->
+    <!--                label="储能充电量"-->
+    <!--                labelClassName="descriptions-label"-->
+    <!--            >-->
+    <!--            </el-descriptions-item-->
+    <!--            >-->
+
+    <!--            <el-descriptions-item-->
+    <!--                :span="1"-->
+    <!--                contentClassName="descriptions-direction"-->
+    <!--                label="负荷用电量"-->
+    <!--                labelClassName="descriptions-label"-->
+    <!--            >-->
+    <!--            </el-descriptions-item-->
+    <!--            >-->
+    <!--            <el-descriptions-item-->
+    <!--                :span="1"-->
+    <!--                contentClassName="descriptions-direction"-->
+    <!--                label="光伏发电量"-->
+    <!--                labelClassName="descriptions-label"-->
+    <!--            >-->
+    <!--            </el-descriptions-item-->
+    <!--            >-->
+    <!--          </el-descriptions>-->
+    <!--        </div>-->
+    <!--        &lt;!&ndash;        表格&ndash;&gt;-->
+    <!--        <el-table-->
+    <!--            class="common-table"-->
+    <!--            stripe-->
+    <!--            style="width: 100%;margin-top:25px;">-->
+    <!--          <el-table-column-->
+    <!--              label="功率"-->
+    <!--              prop="type">-->
+    <!--          </el-table-column>-->
+    <!--          <el-table-column-->
+    <!--              label="电网"-->
+    <!--          >-->
+    <!--            <template slot-scope="scope">-->
+    <!--              <span class="pointer"-->
+    <!--                    @click="showChart('簇电压',scope.row.clusterId)">{{ scope.row.clusterVoltage }} V</span>-->
+    <!--            </template>-->
+    <!--          </el-table-column>-->
+    <!--          <el-table-column-->
+    <!--              label="储能">-->
+    <!--            <template slot-scope="scope">-->
+    <!--              <span class="pointer"-->
+    <!--                    @click="showChart('簇电流',scope.row.clusterId)">{{ scope.row.clusterCurrent }} A</span>-->
+    <!--            </template>-->
+    <!--          </el-table-column>-->
+    <!--          <el-table-column-->
+    <!--              label="负荷">-->
+    <!--            <template slot-scope="scope">-->
+    <!--              <span class="pointer"-->
+    <!--                    @click="showChart('簇电流',scope.row.clusterId)">{{ scope.row.clusterCurrent }} A</span>-->
+    <!--            </template>-->
+    <!--          </el-table-column>-->
+    <!--          <el-table-column-->
+    <!--              label="光伏">-->
+    <!--            <template slot-scope="scope">-->
+    <!--              <span class="pointer"-->
+    <!--                    @click="showChart('当前SOC',scope.row.clusterId)">{{ scope.row.currentSoc }} %</span>-->
+    <!--            </template>-->
+    <!--          </el-table-column>-->
+    <!--        </el-table>-->
+    <!--        &lt;!&ndash;        图表&ndash;&gt;-->
+    <!--        <div id="emsChart" style="height: 350px"></div>-->
+    <!--      </el-card>-->
+    <!--    </div>-->
+    <el-card
+        v-for="(item,index) in list"
+        :key="index+'emsList'"
+        class="sbjk-card-container list running-card-container"
+        shadow="always"
     >
-      <el-card
-          :class="{
-          'warning-card-container': item.workStatus === '1',
-          'timing-card-container': item.workStatus === '2',
-          'running-card-container': !['1', '2'].includes(item.workStatus),
-        }"
-          class="sbjk-card-container common-card-container-body-no-padding common-card-container-no-title-bg"
-          shadow="always"
-      >
-        <!--        标题-->
-        <div slot="header">
-          <span class="large-title"
-          >{{ item.deviceName }}</span
-          >
-          <div class="info">
-            <div>
-              {{
-                $store.state.ems.workStatusOptions[item.workStatus]
-              }}
-            </div>
-            <div>数据更新时间：{{ item.dataUpdateTime }}</div>
-          </div>
-          <div class="alarm">
-            <el-button type="primary" size="small" style="margin-right:20px;" @click="pointDetail(item,'point')">
-              详细
-            </el-button>
-            <el-badge :value="item.alarmNum || 0" class="item">
-              <i
-                  class="el-icon-message-solid alarm-icon"
-                  @click="pointDetail(item,'alarmPoint')"
-              ></i>
-            </el-badge>
+      <div slot="header">
+        <span class="large-title">{{ item.deviceName }}</span>
+        <div class="info">
+          <div>
+            EMS控制模式: {{
+              item.emsStatus === 0 ? '自动' : '手动'
+            }}
           </div>
+          <div>数据更新时间：{{ item.dataUpdateTime }}</div>
         </div>
-        <!--        工作状态-->
-        <div class="descriptions-main">
-          <el-descriptions :colon="false" :column="5" direction="vertical">
-            <el-descriptions-item
-                :contentClassName="`descriptions-direction ${
-                            item.workStatus === '0' ? 'save' : 'danger'
-                          }`"
-                :span="1"
-                label="工作状态"
-                labelClassName="descriptions-label"
-            >{{
-                $store.state.ems.workStatusOptions[item.workStatus]
-              }}
-            </el-descriptions-item
-            >
-            <el-descriptions-item
-                :span="1"
-                contentClassName="descriptions-direction"
-                label="工作模式"
-                labelClassName="descriptions-label"
-            >
-              todo 手动/自动
-              {{
-                $store.state.ems.gridStatusOptions[item.gridStatus]
-              }}
+        <div class="alarm">
+          <el-button size="small" style="margin-right:20px;" type="primary" @click="pointDetail(item,'point')">详细
+          </el-button>
+          <el-badge :value="item.alarmNum || 0" class="item">
+            <i
+                class="el-icon-message-solid alarm-icon"
+                @click="pointDetail(item,'alarmPoint')"
+            ></i>
+          </el-badge>
+        </div>
+      </div>
+      <el-row class="device-info-row">
+        <el-col v-for="(tempDataItem,tempDataIndex) in bmsDataList" :key="tempDataIndex+'bmsTempData'"
+                :span="6" class="device-info-col">
+            <span class="pointer" @click="showChart(tempDataItem.name,item.deviceId)">
+              <span class="left">{{ tempDataItem.name }}</span> <span class="right">{{ item[tempDataItem.attr] }}<span
+                v-html="tempDataItem.unit"></span></span>
+            </span>
+        </el-col>
+      </el-row>
+      <el-row class="device-info-row" style="margin-top:20px;">
+        <el-col v-for="(tempDataItem,tempDataIndex) in pcsDataList" :key="tempDataIndex+'pcsTempData'"
+                :span="6" class="device-info-col">
+            <span class="pointer" @click="showChart(tempDataItem.name,item.deviceId)">
+              <span class="left">{{ tempDataItem.name }}</span> <span class="right">{{ item[tempDataItem.attr] }}<span
+                v-html="tempDataItem.unit"></span></span>
+            </span>
+        </el-col>
+      </el-row>
+    </el-card>
 
-            </el-descriptions-item
-            >
-            <el-descriptions-item
-                :span="1"
-                contentClassName="descriptions-direction"
-                label="并网状态"
-                labelClassName="descriptions-label"
-            >{{
-                $store.state.ems.gridStatusOptions[item.gridStatus]
-              }}
-            </el-descriptions-item
-            >
-            <el-descriptions-item
-                :span="1"
-                contentClassName="descriptions-direction"
-                label="告警状态"
-                labelClassName="descriptions-label"
-            >
-              todo
-              <!--
-              {{
-                              $store.state.ems.warnOptions[item.warnMode]
-                            }}-->
-            </el-descriptions-item
-            >
-            <el-descriptions-item
-                :contentClassName="`descriptions-direction ${
-                item.deviceStatus === '2' ? 'save' : 'danger'
-              }`"
-                :span="1"
-                label="设备状态"
-                labelClassName="descriptions-label"
-            >{{
-                $store.state.ems.deviceStatusOptions[item.deviceStatus]
-              }}
-            </el-descriptions-item
-            >
-          </el-descriptions>
-        </div>
-        <!--        用电量-->
-        <div class="descriptions-main descriptions-main-bg-color">
-          <el-descriptions :colon="false" :column="5" direction="vertical">
-            <el-descriptions-item
-                :span="5"
-                contentClassName="descriptions-direction"
-                label="当日用电量："
-                labelClassName="descriptions-label"
-            >
-            </el-descriptions-item
-            >
-            <el-descriptions-item
-                :span="1"
-                contentClassName="descriptions-direction"
-                label="电网用电量"
-                labelClassName="descriptions-label"
-            >
-            </el-descriptions-item
-            >
-            <el-descriptions-item
-                :span="1"
-                contentClassName="descriptions-direction"
-                label="储能放电量"
-                labelClassName="descriptions-label"
-            >
-            </el-descriptions-item
-            >
-            <el-descriptions-item
-                :span="1"
-                contentClassName="descriptions-direction"
-                label="储能充电量"
-                labelClassName="descriptions-label"
-            >
-            </el-descriptions-item
-            >
-
-            <el-descriptions-item
-                :span="1"
-                contentClassName="descriptions-direction"
-                label="负荷用电量"
-                labelClassName="descriptions-label"
-            >
-            </el-descriptions-item
-            >
-            <el-descriptions-item
-                :span="1"
-                contentClassName="descriptions-direction"
-                label="光伏发电量"
-                labelClassName="descriptions-label"
-            >
-            </el-descriptions-item
-            >
-          </el-descriptions>
-        </div>
-        <!--        表格-->
-        <el-table
-            class="common-table"
-            stripe
-            style="width: 100%;margin-top:25px;">
-          <el-table-column
-              label="功率"
-              prop="type">
-          </el-table-column>
-          <el-table-column
-              label="电网"
-          >
-            <template slot-scope="scope">
-              <span class="pointer"
-                    @click="showChart('簇电压',scope.row.clusterId)">{{ scope.row.clusterVoltage }} V</span>
-            </template>
-          </el-table-column>
-          <el-table-column
-              label="储能">
-            <template slot-scope="scope">
-              <span class="pointer"
-                    @click="showChart('簇电流',scope.row.clusterId)">{{ scope.row.clusterCurrent }} A</span>
-            </template>
-          </el-table-column>
-          <el-table-column
-              label="负荷">
-            <template slot-scope="scope">
-              <span class="pointer"
-                    @click="showChart('簇电流',scope.row.clusterId)">{{ scope.row.clusterCurrent }} A</span>
-            </template>
-          </el-table-column>
-          <el-table-column
-              label="光伏">
-            <template slot-scope="scope">
-              <span class="pointer"
-                    @click="showChart('当前SOC',scope.row.clusterId)">{{ scope.row.currentSoc }} %</span>
-            </template>
-          </el-table-column>
-        </el-table>
-        <!--        图表-->
-        <div id="emsChart" style="height: 350px"></div>
-      </el-card>
-    </div>
     <el-empty v-show="list.length <= 0" :image-size="200"></el-empty>
     <point-chart ref="pointChart" :site-id="siteId"/>
     <point-table ref="pointTable"/>
@@ -211,7 +258,7 @@
 import pointChart from "./../PointChart.vue";
 import PointTable from "@/views/ems/site/sblb/PointTable.vue";
 import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
-import {getPcsDetailInfo} from "@/api/ems/dzjk";
+import {getEmsDataList} from "@/api/ems/dzjk";
 import intervalUpdate from "@/mixins/ems/intervalUpdate";
 
 export default {
@@ -222,21 +269,53 @@ export default {
     return {
       loading: false,
       list: [],
+      bmsDataList: [{
+        name: 'BMS1SOC',
+        attr: 'bms1Soc'
+      },
+        {
+          name: 'BMS2SOC',
+          attr: 'bms2Soc'
+        },
+        {
+          name: 'BMS3SOC',
+          attr: 'bms3Soc'
+        },
+        {
+          name: 'BMS4SOC',
+          attr: 'bms4Soc'
+        }],
+      pcsDataList: [{
+        name: 'PCS-1有功功率',
+        attr: 'pcs1Yggl'
+      },
+        {
+          name: 'PCS-2有功功率',
+          attr: 'pcs2Yggl'
+        },
+        {
+          name: 'PCS-3有功功率',
+          attr: 'pcs3Yggl'
+        },
+        {
+          name: 'PCS-4有功功率',
+          attr: 'pcs4Yggl'
+        }]
     };
   },
   methods: {
     // 查看设备电位表格
     pointDetail(row, dataType) {
       const {deviceId} = row
-      this.$refs.pointTable.showTable({siteId: this.siteId, deviceId, deviceCategory: 'PCS'}, dataType)
+      this.$refs.pointTable.showTable({siteId: this.siteId, deviceId, deviceCategory: 'EMS'}, dataType)
     },
-    showChart(pointName, deviceId, isBranch = false) {
+    showChart(pointName, deviceId) {
       pointName &&
-      this.$refs.pointChart.showChart({pointName, deviceCategory: isBranch ? 'BRANCH' : 'PCS', deviceId});
+      this.$refs.pointChart.showChart({pointName, deviceCategory: 'EMS', deviceId});
     },
-    getPcsList() {
+    getData() {
       this.loading = true;
-      getPcsDetailInfo(this.siteId)
+      getEmsDataList(this.siteId)
           .then((response) => {
             const data = response?.data || {};
             this.list = JSON.parse(JSON.stringify(data));
@@ -244,7 +323,7 @@ export default {
           .finally(() => (this.loading = false));
     },
     updateData() {
-      this.getPcsList();
+      this.getData();
     },
     init() {
       this.updateData();
diff --git a/src/views/ems/search/index.vue b/src/views/ems/search/index.vue
index 61b20ed..220d53e 100644
--- a/src/views/ems/search/index.vue
+++ b/src/views/ems/search/index.vue
@@ -1,68 +1,68 @@
 <template>
   <div
-    v-loading="loading"
-    class="ems-dashboard-editor-container"
-    style="background-color: #ffffff"
+      v-loading="loading"
+      class="ems-dashboard-editor-container"
+      style="background-color: #ffffff"
   >
     <el-form ref="form" :model="form" label-position="top">
       <el-form-item
-        label="站点"
-        prop="siteIds"
-        :rules="[{ required: true, message: '请选择站点' }]"
+          label="站点"
+          prop="siteIds"
+          :rules="[{ required: true, message: '请选择站点' }]"
       >
         <el-radio-group v-model="form.siteIds" @input="changeSiteIds">
           <el-radio
-            v-for="(item, index) in siteList"
-            :key="index + 'zdListSearch'"
-            :label="item.siteId"
+              v-for="(item, index) in siteList"
+              :key="index + 'zdListSearch'"
+              :label="item.siteId"
           >
             {{ item.siteName }}
           </el-radio>
         </el-radio-group>
       </el-form-item>
       <el-form-item
-        label="设备"
-        prop="deviceCategory"
-        :rules="[{ required: true, message: '请选择设备' }]"
+          label="设备"
+          prop="deviceCategory"
+          :rules="[{ required: true, message: '请选择设备' }]"
       >
         <el-radio-group v-model="form.deviceCategory" @input="changeSiteIds">
           <el-radio
-            v-for="(item, index) in deviceCategoryList"
-            :key="index + 'sbListSearch'"
-            :label="item.code"
+              v-for="(item, index) in deviceCategoryList"
+              :key="index + 'sbListSearch'"
+              :label="item.code"
           >
             {{ item.name }}
           </el-radio>
         </el-radio-group>
       </el-form-item>
       <el-form-item
-        v-if="isDtdc"
-        label="单体电池(不超过5个)"
-        prop="child"
-        :rules="[{ required: true, message: '请选择单体电池' }]"
+          v-if="isDtdc"
+          label="单体电池(不超过5个)"
+          prop="child"
+          :rules="[{ required: true, message: '请选择单体电池' }]"
       >
         <el-cascader
-          v-model="form.child"
-          style="width: 400px"
-          :props="{ multiple: true }"
-          :show-all-levels="false"
-          :options="childOptions"
-          @change="handleChildChange"
+            v-model="form.child"
+            style="width: 400px"
+            :props="{ multiple: true }"
+            :show-all-levels="false"
+            :options="childOptions"
+            @change="handleChildChange"
         ></el-cascader>
       </el-form-item>
       <div style="display: flex">
         <el-form-item
-          label="点位"
-          prop="pointName"
-          :rules="[{ required: true, message: '请输入点位' }]"
-          style="margin-right: 50px"
+            label="点位"
+            prop="pointName"
+            :rules="[{ required: true, message: '请输入点位' }]"
+            style="margin-right: 50px"
         >
           <el-autocomplete
-            v-model="form.pointName"
-            placeholder="请输入点位"
-            clearable
-            :fetch-suggestions="querySearchAsync"
-            @select="handleSelect"
+              v-model="form.pointName"
+              placeholder="请输入点位"
+              clearable
+              :fetch-suggestions="querySearchAsync"
+              @select="handleSelect"
           ></el-autocomplete>
         </el-form-item>
       </div>
@@ -71,8 +71,8 @@
       </el-form-item>
     </el-form>
     <el-card
-      shadow="always"
-      class="common-card-container common-card-container-body-no-padding time-range-card"
+        shadow="always"
+        class="common-card-container common-card-container-body-no-padding time-range-card"
     >
       <div slot="header" class="time-range-header">
         <span class="card-title">
@@ -83,10 +83,10 @@
           </el-radio-group>
         </span>
         <date-time-select
-          ref="dateTimeSelect"
-          :data-unit="form.dataUnit"
-          @initDate="(e) => (form.dataRange = e || [])"
-          @updateDate="updateDate"
+            ref="dateTimeSelect"
+            :data-unit="form.dataUnit"
+            @initDate="(e) => (form.dataRange = e || [])"
+            @updateDate="updateDate"
         />
       </div>
       <div style="height: 350px" id="searchChart"></div>
@@ -97,18 +97,14 @@
 <script>
 import * as echarts from "echarts";
 import resize from "@/mixins/ems/resize";
-import { getAllSites } from "@/api/ems/zddt";
-import {
-  getAllDeviceCategory,
-  getPointValueList,
-  pointFuzzyQuery,
-  getAllBatteryIdsBySites,
-} from "@/api/ems/search";
+import {getAllSites} from "@/api/ems/zddt";
+import {getAllBatteryIdsBySites, getAllDeviceCategory, getPointValueList, pointFuzzyQuery,} from "@/api/ems/search";
 import DateTimeSelect from "./DateTimeSelect.vue";
+
 export default {
   name: "Search",
   mixins: [resize],
-  components: { DateTimeSelect },
+  components: {DateTimeSelect},
   computed: {
     isDtdc() {
       return this.form.deviceCategory === "BATTERY";
@@ -161,7 +157,7 @@ export default {
     getChildList() {
       this.childOptions = [];
       this.form.child = [];
-      const { siteIds } = this.form;
+      const {siteIds} = this.form;
       getAllBatteryIdsBySites([siteIds]).then((response) => {
         const data = response?.data || {};
         const base = 50;
@@ -178,7 +174,7 @@ export default {
           if (num === 0) return;
           for (let i = 1; i <= num; i++) {
             const start = (i - 1) * base + 1,
-              end = i * base;
+                end = i * base;
             options[index].children.push({
               value: i,
               label: `${start}-${end}`,
@@ -214,76 +210,89 @@ export default {
       this.getDate();
     },
     setOption(data) {
+      // 点位类型	dataType	1-瞬时值 2-累计值	仅当值为2展示差值
+      // 图表类型	chartType	1-曲线图，2-箱线图
       if (!this.chart) return;
       this.chart.clear();
       console.log("返回的数据", data);
-      let dataset = [];
-      if (data.length > 0) {
-        data.forEach((item, index) => {
-          item.deviceList.forEach((inner) => {
-            dataset.push({
-              name: `${
-                this.isDtdc
-                  ? `${inner.parentDeviceId ? inner.parentDeviceId + "-" : ""}`
-                  : ""
-              }${inner.deviceId}`,
-              type: "line",
-              markPoint: {
-                symbolSize: 30,
-                emphasis: {
-                  disabled:false//打开 鼠标高亮
-                },
-                data: [//最大值、最小值
-                  {
-                    // type: 'max',
-                    name: `最大值`,
-                    coord:[inner.maxDate,inner.maxValue],
-                    relativeTo:'coordinate',
-                    label: {
-                      position: "top",
-                      formatter: item.dataType === 2 ? ([
-                        `最大值:${inner.maxValue}`,
-                        // `平均值:${inner.avgValue}`,
-                        `差值:${inner.diffValue}`,
-                      ]).join('\n') : ([
-                        `最大值:${inner.maxValue}`,
-                        // `平均值:${inner.avgValue}`,
-                      ]).join('\n'),
-                    },
-                  },
-                  {
-                    // type: 'min',
-                    name: `最小值`,
-                    coord:[inner.minDate,inner.minValue],
-                    relativeTo:'coordinate',
-                    label: {
-                      position: "top",
-                      formatter: item.dataType === 2 ? ([
-                        `最小值:${inner.minValue}`,
-                        // `平均值:${inner.avgValue}`,
-                        `差值:${inner.diffValue}`,
-                      ]).join('\n') : ([
-                        `最小值:${inner.minValue}`,
-                        // `平均值:${inner.avgValue}`,
-                      ]).join('\n'),
-                    }
-                  }
-                ]
-              },
-              xdata: [],
-              data: [],
-            });
-            const length = dataset.length;
-            inner.pointValueList.forEach((value) => {
-              dataset[length - 1].xdata.push(value.valueDate);
-              dataset[length - 1].data.push(value.pointValue);
-            });
-          });
-        });
-      } else {
+      if (!data || data.length <= 0) {
         this.$message.warning("暂无数据");
       }
-      console.log("图表数据", dataset);
+      console.log('展示的图表类型chartType', data[0].chartType)
+
+      if (data[0].chartType === 2) {
+        //   箱型图
+        this.setBoxOption(data)
+      } else {
+        //折线图
+        this.setLineOption(data)
+      }
+
+    },
+    setLineOption(data) {
+      let dataset = [];
+      data.forEach((item, index) => {
+        item.deviceList.forEach((inner) => {
+          dataset.push({
+            name: `${
+                this.isDtdc
+                    ? `${inner.parentDeviceId ? inner.parentDeviceId + "-" : ""}`
+                    : ""
+            }${inner.deviceId}`,
+            type: "line",
+            markPoint: {
+              symbolSize: 30,
+              emphasis: {
+                disabled: false//打开 鼠标高亮
+              },
+              data: [//最大值、最小值
+                {
+                  // type: 'max',
+                  name: `最大值`,
+                  coord: [inner.maxDate, inner.maxValue],
+                  relativeTo: 'coordinate',
+                  label: {
+                    position: "top",
+                    formatter: item.dataType === 2 ? ([
+                      `最大值:${inner.maxValue}`,
+                      // `平均值:${inner.avgValue}`,
+                      `差值:${inner.diffValue}`,
+                    ]).join('\n') : ([
+                      `最大值:${inner.maxValue}`,
+                      // `平均值:${inner.avgValue}`,
+                    ]).join('\n'),
+                  },
+                },
+                {
+                  // type: 'min',
+                  name: `最小值`,
+                  coord: [inner.minDate, inner.minValue],
+                  relativeTo: 'coordinate',
+                  label: {
+                    position: "top",
+                    formatter: item.dataType === 2 ? ([
+                      `最小值:${inner.minValue}`,
+                      // `平均值:${inner.avgValue}`,
+                      `差值:${inner.diffValue}`,
+                    ]).join('\n') : ([
+                      `最小值:${inner.minValue}`,
+                      // `平均值:${inner.avgValue}`,
+                    ]).join('\n'),
+                  }
+                }
+              ]
+            },
+            xdata: [],
+            data: [],
+          });
+          const length = dataset.length;
+          inner.pointValueList.forEach((value) => {
+            dataset[length - 1].xdata.push(value.valueDate);
+            dataset[length - 1].data.push(value.pointValue);
+          });
+        });
+      });
+      console.log("折线图图表数据", dataset);
       this.chart.setOption({
         legend: {
           // left: 'center',
@@ -305,7 +314,121 @@ export default {
         textStyle: {
           color: "#333333",
         },
-        xAxis: { type: "category", data: dataset?.[0]?.xdata || [] },
+        xAxis: {type: "category", data: dataset?.[0]?.xdata || []},
+        yAxis: {
+          type: "value",
+        },
+        dataZoom: [
+          {
+            type: "inside",
+            start: 0,
+            end: 100,
+          },
+          {
+            start: 0,
+            end: 100,
+          },
+        ],
+        series: dataset,
+      });
+    },
+    setBoxOption(data) {
+      let dataset = [];
+      data.forEach((item, index) => {
+        item.deviceList.forEach((inner) => {
+          dataset.push({
+            name: `${
+                this.isDtdc
+                    ? `${inner.parentDeviceId ? inner.parentDeviceId + "-" : ""}`
+                    : ""
+            }${inner.deviceId}`,
+            type: "boxplot",
+            // markPoint: {
+            //   symbolSize: 30,
+            //   emphasis: {
+            //     disabled: false//打开 鼠标高亮
+            //   },
+            //   data: [//最大值、最小值
+            //     {
+            //       // type: 'max',
+            //       name: `最大值`,
+            //       coord: [inner.maxDate, inner.maxValue],
+            //       relativeTo: 'coordinate',
+            //       label: {
+            //         position: "top",
+            //         formatter: item.dataType === 2 ? ([
+            //           `最大值:${inner.maxValue}`,
+            //           // `平均值:${inner.avgValue}`,
+            //           `差值:${inner.diffValue}`,
+            //         ]).join('\n') : ([
+            //           `最大值:${inner.maxValue}`,
+            //           // `平均值:${inner.avgValue}`,
+            //         ]).join('\n'),
+            //       },
+            //     },
+            //     {
+            //       // type: 'min',
+            //       name: `最小值`,
+            //       coord: [inner.minDate, inner.minValue],
+            //       relativeTo: 'coordinate',
+            //       label: {
+            //         position: "top",
+            //         formatter: item.dataType === 2 ? ([
+            //           `最小值:${inner.minValue}`,
+            //           // `平均值:${inner.avgValue}`,
+            //           `差值:${inner.diffValue}`,
+            //         ]).join('\n') : ([
+            //           `最小值:${inner.minValue}`,
+            //           // `平均值:${inner.avgValue}`,
+            //         ]).join('\n'),
+            //       }
+            //     }
+            //   ]
+            // },
+            xdata: [],
+            data: [],
+          });
+          const length = dataset.length;
+          inner.pointValueList.forEach((value) => {
+            const {valueDate, min, q1, median, q3, max} = value
+            dataset[length - 1].xdata.push(valueDate);
+            dataset[length - 1].data.push([min, q1, median, q3, max]);
+          });
+        });
+      });
+      console.log("箱型图图表数据", dataset);
+      this.chart.setOption({
+        legend: {
+          // left: 'center',
+          // top: '10',
+        },
+        grid: {
+          containLabel: true,
+        },
+        tooltip: {
+          trigger: 'item',
+          formatter: function (params) {
+            console.log(11111111111, params.data)
+            let data = params.data;
+            let result = params.name + ' ' + params.seriesName + '<br/>';
+            result += '最小值: ' + data[1] + '<br/>';
+            result += '平均值: ' + data[3] + '<br/>';
+            result += '最大值: ' + data[5];
+            return result;
+          }
+          // trigger: "axis",
+          // axisPointer: {
+          //   type: 'cross',
+          // },
+          // axisPointer: {
+          //   // 坐标轴指示器，坐标轴触发有效
+          //   type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
+          // },
+        },
+        textStyle: {
+          color: "#333333",
+        },
+        xAxis: {type: "category", data: dataset?.[0]?.xdata || []},
         yAxis: {
           type: "value",
         },
@@ -345,9 +468,9 @@ export default {
       }).then((response) => {
         const data = response?.data || [];
         cb(
-          data.map((item) => {
-            return { name: item, value: item };
-          })
+            data.map((item) => {
+              return {name: item, value: item};
+            })
         );
       });
     },
@@ -359,10 +482,11 @@ export default {
     },
     getZdList() {
       return getAllSites()
-        .then((response) => {
-          this.siteList = response.data || [];
-        })
-        .finally(() => {});
+          .then((response) => {
+            this.siteList = response.data || [];
+          })
+          .finally(() => {
+          });
     },
     getDate() {
       this.$refs.form.validate((valid) => {
@@ -371,8 +495,8 @@ export default {
             return this.$message.error("请输入正确的点位");
           }
           if (
-            this.isDtdc &&
-            (this.form.child.length === 0 || this.form.child.length > 5)
+              this.isDtdc &&
+              (this.form.child.length === 0 || this.form.child.length > 5)
           ) {
             return this.$message.error("请选择单体电池且不能超过5个");
           }
@@ -417,12 +541,12 @@ export default {
             endDate,
             siteDeviceMap,
           })
-            .then((response) => {
-              this.setOption(response?.data || []);
-            })
-            .finally(() => {
-              this.loading = false;
-            });
+              .then((response) => {
+                this.setOption(response?.data || []);
+              })
+              .finally(() => {
+                this.loading = false;
+              });
         }
       });
     },
@@ -440,7 +564,7 @@ export default {
       this.initChart();
       this.$refs.dateTimeSelect.init();
       Promise.all([this.getDeviceCategory(), this.getZdList()]).finally(
-        () => (this.loading = false)
+          () => (this.loading = false)
       );
     });
   },