From 15196f8d718436c534f189b7fab78ee04a4e4168 Mon Sep 17 00:00:00 2001
From: baicai <18221243570@163.com>
Date: Fri, 15 Aug 2025 09:50:30 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8D=95=E4=BD=93=E7=94=B5=E6=B1=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/ems/dzjk/sbjk/dtdc/ChartDetail.vue | 261 +++++++++++--------
 src/views/ems/dzjk/sbjk/dtdc/List.vue        |   4 +-
 src/views/ems/dzjk/sbjk/dtdc/index.vue       |   4 +-
 3 files changed, 152 insertions(+), 117 deletions(-)

diff --git a/src/views/ems/dzjk/sbjk/dtdc/ChartDetail.vue b/src/views/ems/dzjk/sbjk/dtdc/ChartDetail.vue
index 22f6054..2b9a386 100644
--- a/src/views/ems/dzjk/sbjk/dtdc/ChartDetail.vue
+++ b/src/views/ems/dzjk/sbjk/dtdc/ChartDetail.vue
@@ -20,8 +20,9 @@
             start-placeholder="开始时间"
             value-format="yyyy-MM-dd"
             :picker-options="pickerOptions"
-            :default-value="defaultDateRange"
-            end-placeholder="结束时间">
+            end-placeholder="结束时间"
+            :clearable="false"
+          >
           </el-date-picker>
         </el-form-item>
         <el-form-item>
@@ -29,149 +30,181 @@
           <el-button @click="onReset">重置</el-button>
         </el-form-item>
       </el-form>
-      <div id="lineChart" style="height: 360px;width: 100%;"></div>
+      <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'
+import * as echarts from "echarts";
+import resize from "@/mixins/ems/resize";
+import { getSingleBatteryData } from "@/api/ems/dzjk";
+import { formatDate } from "@/filters/ems";
 export default {
   mixins: [resize],
   data() {
     return {
       loading: false,
-      siteId:'',
-      deviceId:'',
-      clusterDeviceId:'',
-      dataType:'',//展示的数据类型 空值展示所有数据
-      pickerOptions:{
+      siteId: "",
+      deviceId: "",
+      clusterDeviceId: "",
+      dataType: "", //展示的数据类型 空值展示所有数据
+      pickerOptions: {
         disabledDate(time) {
           return time.getTime() > Date.now();
         },
       },
       dialogTableVisible: false,
       dateRange: [],
-      defaultDateRange:[]
-    }
+      defaultDateRange: [],
+    };
   },
   methods: {
-    handleColsed(done){
-      if (!this.chart) {
-        return done()
-      }
-      this.chart.dispose()
-      this.chart = null
-      done()
+    resetDefaultDateRange() {
+      const now = new Date(),
+        formatNow = formatDate(now);
+      const weekAgo = formatDate(
+        new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000)
+      );
+      this.dateRange = [weekAgo, formatNow];
+      this.defaultDateRange = [weekAgo, formatNow];
     },
-    getData(){
-      if(this.loading) return
+    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()
+      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()
+    onReset() {
+      this.dateRange = this.defaultDateRange;
+      this.getData();
     },
-    initChart({siteId, clusterDeviceId, deviceId},dataType) {
-      this.siteId=siteId
-      this.clusterDeviceId=clusterDeviceId
-      this.deviceId=deviceId
-      this.dataType=dataType
-      this.dateRange=[]
-      this.dialogTableVisible = true
-      this.$nextTick(()=>{
-        !this.chart && (this.chart = echarts.init(document.querySelector('#lineChart')))
-        this.getData()
-      })
+    initChart({ siteId, clusterDeviceId, deviceId }, dataType) {
+      this.siteId = siteId;
+      this.clusterDeviceId = clusterDeviceId;
+      this.deviceId = deviceId;
+      this.dataType = dataType;
+      this.resetDefaultDateRange();
+      this.dialogTableVisible = true;
+      this.$nextTick(() => {
+        !this.chart &&
+          (this.chart = echarts.init(document.querySelector("#lineChart")));
+        this.getData();
+      });
     },
     setOption(data) {
       const obj = {
-        voltage:'电压',
-        temperature:'温度',
-        soc:'SOC',
-        soh:'SOH',
-      }
-      let source,series,{dataType} = this
-      if(dataType){
-        source = [['日期',obj[dataType]]]
-        data.forEach(item => {
-          source.push([item.dataTimestamp,item[dataType]])
-        })
-        series=[{
-          name:obj[dataType],
-          type: 'line',
-        }]
-      }else{
-        source = [['日期','电压','温度','SOC','SOH']]
-        data.forEach(item => {
-          source.push([item.dataTimestamp,item.voltage,item.temperature,item.soc,item.soh])
-        })
-        series=[
+        voltage: "电压",
+        temperature: "温度",
+        soc: "SOC",
+        soh: "SOH",
+      };
+      let source,
+        series,
+        { dataType } = this;
+      if (dataType) {
+        source = [["日期", obj[dataType]]];
+        data.forEach((item) => {
+          source.push([item.dataTimestamp, item[dataType]]);
+        });
+        series = [
           {
-            name:'电压',
-            type: 'line',
-
-          },{
-            name:'温度',
-            type: 'line',
+            name: obj[dataType],
+            type: "line",
+          },
+        ];
+      } else {
+        source = [["日期", "电压", "温度", "SOC", "SOH"]];
+        data.forEach((item) => {
+          source.push([
+            item.dataTimestamp,
+            item.voltage,
+            item.temperature,
+            item.soc,
+            item.soh,
+          ]);
+        });
+        series = [
+          {
+            name: "电压",
+            type: "line",
           },
           {
-            name:'SOC',
-            type: 'line',
-
-          },{
-            name:'SOH',
-            type: 'line',
-          }]
+            name: "温度",
+            type: "line",
+          },
+          {
+            name: "SOC",
+            type: "line",
+          },
+          {
+            name: "SOH",
+            type: "line",
+          },
+        ];
       }
 
-
-      this.chart && this.chart.setOption({
-        color:['#FFBD00','#3C81FF','#05AEA3','#F86F70'],
-        grid: {
-          containLabel: true
-        },
-        legend: {
-          left: 'center',
-          bottom: '15',
-        },
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: { // 坐标轴指示器，坐标轴触发有效
-            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
-          }
-        },
-        textStyle:{
-          color:"#333333",
-        },
-        xAxis: {
-          type: 'category',
-        },
-        yAxis: {
-          type: 'value',
-        },
-        dataset:{
-          source
-        },
-        series
-      })
-    }
+      this.chart &&
+        this.chart.setOption({
+          color: ["#FFBD00", "#3C81FF", "#05AEA3", "#F86F70"],
+          grid: {
+            containLabel: true,
+          },
+          legend: {
+            left: "center",
+            bottom: "15",
+          },
+          tooltip: {
+            trigger: "axis",
+            axisPointer: {
+              // 坐标轴指示器，坐标轴触发有效
+              type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
+            },
+          },
+          textStyle: {
+            color: "#333333",
+          },
+          xAxis: {
+            type: "category",
+          },
+          yAxis: {
+            type: "value",
+          },
+          dataset: {
+            source,
+          },
+          series,
+        });
+    },
   },
-  mounted(){
-    const now = new Date();
-    const lastMonth = new Date(now.getFullYear(), now.getMonth() - 1, 1);
-    this.defaultDateRange = [lastMonth, now];
-  }
-}
+  mounted() {},
+};
 </script>
diff --git a/src/views/ems/dzjk/sbjk/dtdc/List.vue b/src/views/ems/dzjk/sbjk/dtdc/List.vue
index 94c9034..09d66bf 100644
--- a/src/views/ems/dzjk/sbjk/dtdc/List.vue
+++ b/src/views/ems/dzjk/sbjk/dtdc/List.vue
@@ -12,7 +12,9 @@
           :class="handleListClass(item)"
           @click="chartDetail(item)"
         >
-          <div style="font-size: 10px;font-weight: 500">{{ item.clusterDeviceId }}</div>
+          <div style="font-size: 10px; font-weight: 600">
+            {{ item.clusterDeviceId }}
+          </div>
           <div>#{{ item.deviceId }}</div>
           <div class="dy">{{ item.voltage }}V</div>
           <div class="wd">{{ item.temperature }}℃</div>
diff --git a/src/views/ems/dzjk/sbjk/dtdc/index.vue b/src/views/ems/dzjk/sbjk/dtdc/index.vue
index 244eeb6..d085e62 100644
--- a/src/views/ems/dzjk/sbjk/dtdc/index.vue
+++ b/src/views/ems/dzjk/sbjk/dtdc/index.vue
@@ -62,7 +62,7 @@
     </el-form>
     <!-- 切换 -->
     <div class="tip-container">
-      <div class="color-tip">
+      <div class="color-tip" v-show="activeBtn === 'list'">
         单体信息
         <span class="tip minwd">最低单体温度</span>
         <span class="tip maxwd">最高单体温度</span>
@@ -255,7 +255,7 @@ export default {
     },
     init() {
       // 只有页面初次加载或切换站点的时候调用电池堆列表，其他情况不需要
-      this.search = { stackId: "", clusterId: "" ,batteryId:""}; //保证切换站点时，清空选择项
+      this.search = { stackId: "", clusterId: "", batteryId: "" }; //保证切换站点时，清空选择项
       this.clusterOptions = [];
       this.pageNum = 1;
       this.totalSize = 0;