单体电池

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 * as echarts from "echarts";
-import resize from '@/mixins/ems/resize'
+import resize from "@/mixins/ems/resize";
-import {getSingleBatteryData} from '@/api/ems/dzjk'
+import { getSingleBatteryData } from "@/api/ems/dzjk";
+import { formatDate } from "@/filters/ems";
 export default {
   mixins: [resize],
   data() {
     return {
       loading: false,
-      siteId:'',
+      siteId: "",
-      deviceId:'',
+      deviceId: "",
-      clusterDeviceId:'',
+      clusterDeviceId: "",
-      dataType:'',//展示的数据类型 空值展示所有数据
+      dataType: "", //展示的数据类型 空值展示所有数据
-      pickerOptions:{
+      pickerOptions: {
         disabledDate(time) {
           return time.getTime() > Date.now();
         },
       },
       dialogTableVisible: false,
       dateRange: [],
-      defaultDateRange:[]
+      defaultDateRange: [],
-    }
+    };
   },
   methods: {
-    handleColsed(done){
+    resetDefaultDateRange() {
-      if (!this.chart) {
+      const now = new Date(),
-        return done()
+        formatNow = formatDate(now);
-      }
+      const weekAgo = formatDate(
-      this.chart.dispose()
+        new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000)
-      this.chart = null
+      );
-      done()
+      this.dateRange = [weekAgo, formatNow];
+      this.defaultDateRange = [weekAgo, formatNow];
     },
-    getData(){
+    handleColsed(done) {
-      if(this.loading) return
+      if (!this.chart) {
+        return done();
+      }
+      this.chart.dispose();
+      this.chart = null;
+      done();
+    },
+    getData() {
+      if (this.loading) return;
       this.loading = true;
-      this.chart.showLoading()
+      this.chart.showLoading();
-      const {siteId, deviceId,clusterDeviceId,dateRange:[startDate='',endDate='']}=this;
+      const {
-      getSingleBatteryData({siteId, deviceId,clusterDeviceId,startDate,endDate}).then(response => {
+        siteId,
-        this.setOption(response?.data || [])
+        deviceId,
-      }).finally(()=>{
+        clusterDeviceId,
-        this.loading = false;
+        dateRange: [startDate = "", endDate = ""],
-        this.chart.hideLoading()
+      } = this;
+      getSingleBatteryData({
+        siteId,
+        deviceId,
+        clusterDeviceId,
+        startDate,
+        endDate,
       })
+        .then((response) => {
+          this.setOption(response?.data || []);
+        })
+        .finally(() => {
+          this.loading = false;
+          this.chart.hideLoading();
+        });
     },
     // 重置
-    onReset(){
+    onReset() {
-      this.dateRange=[]
+      this.dateRange = this.defaultDateRange;
-      this.getData()
+      this.getData();
     },
-    initChart({siteId, clusterDeviceId, deviceId},dataType) {
+    initChart({ siteId, clusterDeviceId, deviceId }, dataType) {
-      this.siteId=siteId
+      this.siteId = siteId;
-      this.clusterDeviceId=clusterDeviceId
+      this.clusterDeviceId = clusterDeviceId;
-      this.deviceId=deviceId
+      this.deviceId = deviceId;
-      this.dataType=dataType
+      this.dataType = dataType;
-      this.dateRange=[]
+      this.resetDefaultDateRange();
-      this.dialogTableVisible = true
+      this.dialogTableVisible = true;
-      this.$nextTick(()=>{
+      this.$nextTick(() => {
-        !this.chart && (this.chart = echarts.init(document.querySelector('#lineChart')))
+        !this.chart &&
-        this.getData()
+          (this.chart = echarts.init(document.querySelector("#lineChart")));
-      })
+        this.getData();
+      });
     },
     setOption(data) {
       const obj = {
-        voltage:'电压',
+        voltage: "电压",
-        temperature:'温度',
+        temperature: "温度",
-        soc:'SOC',
+        soc: "SOC",
-        soh:'SOH',
+        soh: "SOH",
-      }
+      };
-      let source,series,{dataType} = this
+      let source,
-      if(dataType){
+        series,
-        source = [['日期',obj[dataType]]]
+        { dataType } = this;
-        data.forEach(item => {
+      if (dataType) {
-          source.push([item.dataTimestamp,item[dataType]])
+        source = [["日期", obj[dataType]]];
-        })
+        data.forEach((item) => {
-        series=[{
+          source.push([item.dataTimestamp, item[dataType]]);
-          name:obj[dataType],
+        });
-          type: 'line',
+        series = [
-        }]
-      }else{
-        source = [['日期','电压','温度','SOC','SOH']]
-        data.forEach(item => {
-          source.push([item.dataTimestamp,item.voltage,item.temperature,item.soc,item.soh])
-        })
-        series=[
           {
-            name:'电压',
+            name: obj[dataType],
-            type: 'line',
+            type: "line",
-
+          },
-          },{
+        ];
-            name:'温度',
+      } else {
-            type: 'line',
+        source = [["日期", "电压", "温度", "SOC", "SOH"]];
+        data.forEach((item) => {
+          source.push([
+            item.dataTimestamp,
+            item.voltage,
+            item.temperature,
+            item.soc,
+            item.soh,
+          ]);
+        });
+        series = [
+          {
+            name: "电压",
+            type: "line",
           },
           {
-            name:'SOC',
+            name: "温度",
-            type: 'line',
+            type: "line",
-
+          },
-          },{
+          {
-            name:'SOH',
+            name: "SOC",
-            type: 'line',
+            type: "line",
-          }]
+          },
+          {
+            name: "SOH",
+            type: "line",
+          },
+        ];
       }
 
-
+      this.chart &&
-      this.chart && this.chart.setOption({
+        this.chart.setOption({
-        color:['#FFBD00','#3C81FF','#05AEA3','#F86F70'],
+          color: ["#FFBD00", "#3C81FF", "#05AEA3", "#F86F70"],
-        grid: {
+          grid: {
-          containLabel: true
+            containLabel: true,
-        },
+          },
-        legend: {
+          legend: {
-          left: 'center',
+            left: "center",
-          bottom: '15',
+            bottom: "15",
-        },
+          },
-        tooltip: {
+          tooltip: {
-          trigger: 'axis',
+            trigger: "axis",
-          axisPointer: { // 坐标轴指示器，坐标轴触发有效
+            axisPointer: {
-            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+              // 坐标轴指示器，坐标轴触发有效
-          }
+              type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
-        },
+            },
-        textStyle:{
+          },
-          color:"#333333",
+          textStyle: {
-        },
+            color: "#333333",
-        xAxis: {
+          },
-          type: 'category',
+          xAxis: {
-        },
+            type: "category",
-        yAxis: {
+          },
-          type: 'value',
+          yAxis: {
-        },
+            type: "value",
-        dataset:{
+          },
-          source
+          dataset: {
-        },
+            source,
-        series
+          },
-      })
+          series,
-    }
+        });
+    },
   },
-  mounted(){
+  mounted() {},
-    const now = new Date();
+};
-    const lastMonth = new Date(now.getFullYear(), now.getMonth() - 1, 1);
-    this.defaultDateRange = [lastMonth, now];
-  }
-}
 </script>

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>

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;