From 62eb0e7e7d49e3669b8b97fb7c6e6b16933e4eb6 Mon Sep 17 00:00:00 2001
From: baicai <18221243570@163.com>
Date: Thu, 17 Jul 2025 17:47:18 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8D=95=E4=BD=93=E7=94=B5=E6=B1=A0=E8=A1=A8?=
 =?UTF-8?q?=E6=A0=BC=E6=9B=B2=E7=BA=BF=E5=9B=BE=EF=BC=8C=E7=BB=9F=E8=AE=A1?=
 =?UTF-8?q?=E6=8A=A5=E8=A1=A8=E6=A6=82=E8=A7=88=E7=BB=9F=E8=AE=A1=E6=B2=A1?=
 =?UTF-8?q?=E6=9C=89=E6=95=B0=E6=8D=AE=E8=BF=94=E5=9B=9E=20=E9=9A=90?=
 =?UTF-8?q?=E8=97=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/ems/dzjk.js                          |   9 ++
 src/views/ems/dzjk/sbjk/dtdc/ChartDetail.vue | 150 +++++++++++++++++++
 src/views/ems/dzjk/sbjk/dtdc/index.vue       |  21 ++-
 src/views/ems/dzjk/tjbb/gltj/index.vue       |   2 +-
 4 files changed, 179 insertions(+), 3 deletions(-)
 create mode 100644 src/views/ems/dzjk/sbjk/dtdc/ChartDetail.vue

diff --git a/src/api/ems/dzjk.js b/src/api/ems/dzjk.js
index e3b1165..f9a8c29 100644
--- a/src/api/ems/dzjk.js
+++ b/src/api/ems/dzjk.js
@@ -60,6 +60,15 @@ export function getClusterDataInfoList({siteId, stackDeviceId, clusterDeviceId,
     method: 'get'
   })
 }
+// 单体电池图表
+//http://localhost:8089/ems/siteMonitor/getSingleBatteryData?clusterDeviceId=BMSC01&siteId=021_FXX_01&deviceId=001&startDate=2025-07-11&endDate=2025-07-18
+export function getSingleBatteryData({siteId,deviceId,clusterDeviceId,startDate,endDate}) {
+  return request({
+    url: `/ems/siteMonitor/getSingleBatteryData?siteId=${siteId}&deviceId=${deviceId}&startDate=${startDate}&endDate=${endDate}&clusterDeviceId=${clusterDeviceId}`,
+    method: 'get'
+  })
+}
+
 //获取液冷列表数据
 export function getCoolingDataList(siteId) {
   return request({
diff --git a/src/views/ems/dzjk/sbjk/dtdc/ChartDetail.vue b/src/views/ems/dzjk/sbjk/dtdc/ChartDetail.vue
new file mode 100644
index 0000000..f461b9e
--- /dev/null
+++ b/src/views/ems/dzjk/sbjk/dtdc/ChartDetail.vue
@@ -0,0 +1,150 @@
+<template>
+  <el-dialog
+    :visible.sync="dialogTableVisible"
+    :close-on-click-modal="false"
+    show-close
+    destroy-on-close
+    lock-scroll
+    append-to-body
+    width="700px"
+    class="ems-dialog"
+    :before-close="handleColsed"
+  >
+    <div>
+      <el-form size="medium" label-width="100px" inline>
+        <el-form-item label="时间选择">
+          <el-date-picker
+            v-model="dateRange"
+            type="daterange"
+            range-separator="至"
+            start-placeholder="开始时间"
+            value-format="yyyy-MM-dd"
+            :picker-options="pickerOptions"
+            :default-value="defaultDateRange"
+            end-placeholder="结束时间">
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="getData">搜索</el-button>
+          <el-button @click="onReset">重置</el-button>
+        </el-form-item>
+      </el-form>
+      <div id="lineChart" style="height: 360px;width: 100%;"></div>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import resize from '@/mixins/ems/resize'
+import {getSingleBatteryData} from '@/api/ems/dzjk'
+export default {
+  mixins: [resize],
+  data() {
+    return {
+      loading: false,
+      siteId:'',
+      deviceId:'',
+      clusterDeviceId:'',
+      pickerOptions:{
+        disabledDate(time) {
+          return time.getTime() > Date.now();
+        },
+      },
+      dialogTableVisible: false,
+      dateRange: [],
+      defaultDateRange:[]
+    }
+  },
+  methods: {
+    handleColsed(done){
+      if (!this.chart) {
+        return done()
+      }
+      this.chart.dispose()
+      this.chart = null
+      done()
+    },
+    getData(){
+      if(this.loading) return
+      this.loading = true;
+      this.chart.showLoading()
+      const {siteId, deviceId,clusterDeviceId,dateRange:[startDate='',endDate='']}=this;
+      getSingleBatteryData({siteId, deviceId,clusterDeviceId,startDate,endDate}).then(response => {
+        this.setOption(response?.data || [])
+      }).finally(()=>{
+        this.loading = false;
+        this.chart.hideLoading()
+      })
+    },
+    // 重置
+    onReset(){
+      this.dateRange=[]
+      this.getData()
+    },
+    initChart({siteId, clusterDeviceId, deviceId}) {
+      this.siteId=siteId
+      this.clusterDeviceId=clusterDeviceId
+      this.deviceId=deviceId
+      this.dateRange=[]
+      this.dialogTableVisible = true
+      this.$nextTick(()=>{
+        !this.chart && (this.chart = echarts.init(document.querySelector('#lineChart')))
+        this.getData()
+      })
+    },
+    setOption(data) {
+      const source = [['日期','电压','温度','SOC','SOH']]
+      data.forEach(item => {
+        source.push([item.dataTimestamp,item.voltage,item.temperature,item.soc,item.soh])
+      })
+      this.chart && this.chart.setOption({
+        color:['#FFBD00','#3C81FF','#05AEA3','#F86F70'],
+        legend: {
+          bottom: '10',
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: { // 坐标轴指示器，坐标轴触发有效
+            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+          }
+        },
+        textStyle:{
+          color:"#333333",
+        },
+        xAxis: {
+          type: 'category',
+        },
+        yAxis: {
+          type: 'value',
+        },
+        dataset:{
+          source
+        },
+        series: [
+          {
+            name:'电压',
+            type: 'line',
+
+          },{
+            name:'温度',
+            type: 'line',
+          },
+          {
+            name:'SOC',
+            type: 'line',
+
+          },{
+            name:'SOH',
+            type: 'line',
+          }]
+      })
+    }
+  },
+  mounted(){
+    const now = new Date();
+    const lastMonth = new Date(now.getFullYear(), now.getMonth() - 1, 1);
+    this.defaultDateRange = [lastMonth, now];
+  }
+}
+</script>
diff --git a/src/views/ems/dzjk/sbjk/dtdc/index.vue b/src/views/ems/dzjk/sbjk/dtdc/index.vue
index d332244..126940b 100644
--- a/src/views/ems/dzjk/sbjk/dtdc/index.vue
+++ b/src/views/ems/dzjk/sbjk/dtdc/index.vue
@@ -61,6 +61,17 @@
             prop="soh"
             label="SOH（%）">
           </el-table-column>
+          <el-table-column
+            label="曲线图">
+            <template slot-scope="scope">
+              <el-button
+                @click="chartDetail(scope.row)"
+                type="text"
+                size="small">
+                展示
+              </el-button>
+            </template>
+          </el-table-column>
         </el-table>
         <el-pagination
           v-show="tableData.length>0"
@@ -75,7 +86,7 @@
           style="margin-top:15px;text-align: center"
           >
         </el-pagination>
-
+      <chart-detail ref="chartDetail"/>
     </el-card>
 </template>
 
@@ -84,10 +95,11 @@
 import BarChart from './BarChart'
 import {getStackNameList, getClusterNameList, getClusterDataInfoList} from '@/api/ems/dzjk'
 import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
+import ChartDetail from "./ChartDetail.vue";
 export default {
   name:'DzjkSbjkDtdc',
   mixins:[getQuerySiteId],
-  components:{BarChart},
+  components:{BarChart, ChartDetail},
   data() {
     return {
       loading:false,
@@ -102,6 +114,11 @@ export default {
     }
   },
   methods:{
+    //查看表格行图表
+    chartDetail(row){
+      const { clusterDeviceId, deviceId} = row,{siteId} = this
+      this.$refs.chartDetail.initChart({siteId,clusterDeviceId,deviceId})
+    },
     // 分页
     handleSizeChange(val) {
       this.pageSize = val;
diff --git a/src/views/ems/dzjk/tjbb/gltj/index.vue b/src/views/ems/dzjk/tjbb/gltj/index.vue
index 82e2edf..53c61fd 100644
--- a/src/views/ems/dzjk/tjbb/gltj/index.vue
+++ b/src/views/ems/dzjk/tjbb/gltj/index.vue
@@ -1,7 +1,7 @@
 
 <template>
   <div>
-    <syzb/>
+<!--    <syzb/>-->
     <dlzb/>
   </div>
 </template>