whyczyk
2022-02-23 88a45dda10916e6cb8a67fa9d8621b0474b01b90
src/pages/monitoring/history-monitoring.vue
@@ -10,11 +10,10 @@
            <div class="commonTitle">
               <div class="label">测试日期:</div>
               <div class="text">
                  <van-field v-if="isAio" v-model="timeFieldValue" is-link readonly label="" placeholder="请选择测试日期" @click="openTimePopup" class="timeInput" />
                  <van-field v-else v-model="timeFieldValue" is-link readonly label="" placeholder="请选择测试日期" @click="openTimePopup" class="timeInput" />
                  <van-field v-model="timeFieldValue" is-link readonly label="" placeholder="请选择测试日期" @click="openTimePopup" class="timeInput" />
               </div>
            </div>
            <div class="commonTitle">
            <div class="commonTitle" v-if="!isLD9">
               <div class="label">显示粒度:</div>
               <div class="text">
                  <van-field v-model="show_num" is-link readonly label="" placeholder="请选择显示粒度" @click="showPicker=true" class="timeInput" />
@@ -50,13 +49,13 @@
                  {{top.test_cap}}
               </div>
            </div>
            <div class="commonTitle">
            <div class="commonTitle" v-if="!isLD9">
               <div class="label">剩余容量:</div>
               <div class="text">
                  {{top.re_cap}}
               </div>
            </div>
            <div class="commonTitle">
            <div class="commonTitle" v-if="!isLD9">
               <div class="label">续航时长:</div>
               <div class="text">
                  {{top.xuhang}}
@@ -74,7 +73,7 @@
         <div class="card">
            <div class="commonTitle cardTitle">{{monBarTitle}}</div>
            <div class="chartWarp">
               <div class="commonTitle select">
               <div class="commonTitle select" v-if="!isLD9">
                  <div class="label">数据类型:</div>
                  <div class="text">
                     <van-field v-model="chartTypetext" is-link readonly label="" placeholder="选择数据类型" @click="showTypePicker = true" class="timeInput" />
@@ -85,7 +84,7 @@
         </div>
         <div class="card">
            <div class="commonTitle cardTitle">电池电流折线图(A)</div>
            <div class="commonTitle cardTitle">{{monCurrTitle}}</div>
            <div class="chartWarp">
               <line-chart ref="groupCurr" id="groupCurr" unit="A" start-zero></line-chart>
            </div>
@@ -104,6 +103,7 @@
      </van-popup>
      <van-popup v-model="showTimePopup" round position="bottom">
         <van-cascader v-if="isAio" v-model="timeCascaderValue" title="请选择测试时间" :options="test_record1.list" active-color="#4b88f9" @close="showTimePopup = false" @finish="timeOnFinish" />
         <van-cascader v-else-if="isLD9" v-model="timeCascaderValue" title="请选择测试时间" :options="test_record2.list" active-color="#4b88f9" @close="showTimePopup = false" @finish="timeOnFinish" />
         <van-cascader v-else v-model="timeCascaderValue" title="请选择测试时间" :options="test_record.list" active-color="#4b88f9" @close="showTimePopup = false" @finish="timeOnFinish" />
      </van-popup>
      <van-popup v-model="showPicker" round position="bottom">
@@ -120,7 +120,7 @@
import LineChart from "@/components/chart/LineChart.vue";
import getSpecialPointIndex from "@/assets/js/tools/getSpecialPointIndex";
import const_ld_nine from "@/assets/js/const/const_ld_nine";
import {
   searchStation,
   searchBattInfo,
@@ -128,7 +128,11 @@
   searchAll_lowAction,
   searchBattresdata,
   searchBattTestData,
   searchHistory
   getLD9TestList,
   searchHistory,
   getLD9Testdata,
   getLD9GrpTestdata,
   getLD9MonCaps,
} from "@/pages/monitoring/js/api";
import echarts from "echarts"
@@ -235,6 +239,7 @@
         },
         test_record: {
            value: [],
            subList: [],
            list: [{
               value: "herongDischarge",
               text: "核容放电",
@@ -314,6 +319,30 @@
               },
            ]
         },
         test_record2: {
            value: [],
            subList: [],
            list: [
               {
                  value: "herongDischarge",
                  text: "核容测试",
                  test_type: 1,
                  children: []
               },
               {
                  value: "jianceDischarge",
                  text: "监测放电",
                  test_type: 3,
                  children: []
               },
               {
                  value: "jianceCharge",
                  text: "监测充电",
                  test_type: 4,
                  children: []
               },
            ],
         },
         slider: 100,
         testTimeLong: [],
         battState: {
@@ -321,6 +350,7 @@
            stop_reason: ''
         },
         monBarTitle: "最大值=0V;最小值=0V;平均值=0V",
         monCurrTitle: "电池电流折线图(A)",
         showTypePicker: false,
         chartTypetext: '单体电压',
         chartType: 'vol',
@@ -381,7 +411,9 @@
         monInfo: {
            title: "单体电压(V)",
            unit: "V",
         }
         },
         // 当前选中的单体编号
         currMonNum: NaN,
      }
   },
   components: {
@@ -398,18 +430,41 @@
      },
      formateBattState() {
         let battState = this.battState;
         if (battState.test_type == 3) {
            return "放电(终止原因:" + battState.stop_reason + ")";
         } else if (battState.test_type == 2) {
            return "充电"
         if (this.isLD9) {
            let res = "";
            switch (battState.test_type) {
               case 1:
               case 3:
                  res = "放电 (终止原因:" + battState.stop_reason + ")";
                  break;
               case 4:
                  res = "充电";
                  break;
               default:
                  res = "";
                  break;
            }
            return res;
         } else {
            return "";
            if (battState.test_type == 3) {
               return "放电(终止原因:" + battState.stop_reason + ")";
            } else if (battState.test_type == 2) {
               return "充电"
            } else {
               return "";
            }
         }
      },
      isAio() {
         // A059设备
         let batt = this.batt;
         return this.$units.regEquipType(batt.FBSDeviceId, ["aio"]);
      },
      isLD9() {
         // LD9设备
         let batt = this.batt;
         return this.$units.regEquipType(batt.FBSDeviceId, ["LD9"]);
      }
   },
   methods: {
@@ -417,8 +472,13 @@
         this.batt = data;
         // 重置页面内容
         this.init();
         // 获取充放电记录
         this.searchBattTestData();
         if (this.isLD9) {
            // 获取LD9充放电记录
            this.searchLD9TestData();
         } else {
            // 获取充放电记录
            this.searchBattTestData();
         }
         this.isNew = false;
      },
      // 初始化页面数据
@@ -439,6 +499,11 @@
                  item1.children = [];
               });
            });
         } else if (this.isLD9) {
            this.test_record2.value = [];
            this.test_record2.list[0].children = [];
            this.test_record2.list[1].children = [];
            this.test_record2.list[2].children = [];
         }
         this.timeFieldValue = '请选择测试时间'
@@ -518,6 +583,57 @@
               console.log(error);
            });
      },
      // 查询LD9测试信息
      searchLD9TestData() {
         let batt = this.batt;
         getLD9TestList({
            BattGroupId: batt.BattGroupId,
         })
            .then(res => {
               // 解析数据
               let rs = JSON.parse(res.data.result);
               let herongDischarge = []; // 核容测试
               let jianceDischarge = []; // 监测放电
               let jianceCharge = []; // 监测充电
               if (rs.code == 1) {
                  rs.data.forEach((item) => {
                     item.value = item.test_starttime;
                     item.text = item.test_starttime;
                     let list = item.ld9testdata.map((v) => {
                        v.test_type = item.test_type;
                        return {
                           text: "电池单体#" + v.test_monnum,
                           value: v.test_monnum,
                           value1: v
                        };
                     });
                     item.children = list;
                     switch (item.test_type) {
                        case 1:
                           herongDischarge.push(item);
                           break;
                        case 3:
                           jianceDischarge.push(item);
                           break;
                        case 4:
                           jianceCharge.push(item);
                           break;
                     }
                  });
               } else {
                  this.$toast("未获取到充放电记录");
               }
               // 充放电记录
               this.test_record2.list[0].children = herongDischarge;
               this.test_record2.list[1].children = jianceDischarge;
               this.test_record2.list[2].children = jianceCharge;
            })
            .catch(error => {
               this.$layer.close(loading);
               console.log(error);
            });
      },
      // 设置A059充放电数据
      setAioTestRecord(data, index) {
         data.map(item => {
@@ -549,9 +665,13 @@
         this.timeFieldValue = selectedOptions.map((option) => option.text).join('/');
         this.test_record1.value = []
         this.test_record.value = []
         this.test_record2.value = []
         selectedOptions?.map(item => {
            if (this.isAio) {
               this.test_record1.value.push(item.value)
            } else if (this.isLD9) {
               this.test_record2.value.push(item.value)
               this.test_record2.value1 = item.value1
            } else {
               this.test_record.value.push(item.value)
            }
@@ -572,23 +692,87 @@
      // 切换测试信息
      testRecordChange() {
         let testRecord = this.getTestRecord();
         console.log(testRecord)
         // 初始化图表
         this.initChart();
         // 已选择测试信息
         if (testRecord != -1) {
            let num = testRecord.record_num / this.show_num;    // 根据粒度查询数据
            // 查询历史数据
            this.searchHistory(testRecord.BattGroupId, testRecord.test_record_count, num);
            if (this.isLD9) {
               this.battState.test_type = testRecord.test_type;
               this.currMonNum = testRecord.test_monnum;
               //查询LD9历史数据
               this.getLD9TestRecord(testRecord)
            } else {
               // 查询历史数据
               this.searchHistory(testRecord.BattGroupId, testRecord.test_record_count, num);
            }
         }
      },
      getLD9TestRecord(data) {
         this.$axios
            .all([
               getLD9Testdata(data),
               getLD9GrpTestdata(data),
               getLD9MonCaps(data),
            ])
            .then(
               this.$axios.spread((...res) => {
                  let res0 = JSON.parse(res[0].data.result);
                  let res1 = JSON.parse(res[1].data.result);
                  let res2 = JSON.parse(res[2].data.result);
                  this.loading = false;
                  // 放电数据
                  if (res0.code) {
                     this.HistoryData = res0.data;
                     // 格式化数据
                     this.formateHisData(res0.data);
                     // this.searchBattresdata();
                  }
                  // 组端数据
                  if (res1.code) {
                     let data = res1.data[0];
                     this.grpData = data;
                     allData.groupVol = data.group_vol;
                     allData.testCurr = data.test_curr;
                     allData.testCap = data.test_cap;
                     allData.test_timelong = data.test_timelong;
                     this.setLD9TopData();
                     const obj = const_ld_nine.test_stopreason;
                     this.battState.test_type = data.test_type;
                     this.battState.stop_reason = obj[data.test_stopreason] || "未知";
                  }
                  // 所有单体的实际容量数据
                  let monBarVol = [];
                  if (res2.code) {
                     let data = res2.data;
                     monBarChart.series[0].data = monBarVol;
                     let batt = this.batt;
                     for (let i = 1, j = batt.MonCount; i <= j; i++) {
                        monBarVol.push(["#" + i, 0]);
                     }
                     data.forEach((v) => {
                        let idx = v.test_monnum - 1;
                        monBarVol[idx][1] = v.test_cap;
                     });
                  }
                  this.setLD9BarChart();
               })
            )
            .catch((err) => {
               this.loading = false;
               console.error(err);
            });
      },
      // 获取测试的信息
      getTestRecord() {
         let value = this.test_record.value;
         // A059设备
         if (this.isAio) {
            value = this.test_record1.value;
         } else if (this.isLD9) {
            value = this.test_record2.value;
         }
         // 没有选择充放电记录,返回-1
         if (value.length == 0) {
@@ -620,9 +804,14 @@
               break;
            }
         }
         if (this.isLD9) {
            result = this.test_record2.value1;
         }
         // 设置电池状态
         this.battState.test_type = result.test_type;
         this.battState.stop_reason = result.test_stoptype_reason;
         if (!this.isLD9) {
            this.battState.stop_reason = result.test_stoptype_reason;
         }
         // 返回结果集
         return result;
      },
@@ -705,15 +894,21 @@
            monLineTemp.push([testTimeLong, item.mon_tmp]);
         });
         // 初始化图表的配置项
         this.initChartOptions();
         // 设置容量
         this.setCapList();
         // 设置折线图表
         this.setLineChart();
         // 执行滑动事件
         this.sliderInput();
         if (this.isLD9) {
            // 初始化图表的配置项
            this.initLD9ChartOptions();
            // 设置折线图表
            this.setLineChart();
         } else {
            // 初始化图表的配置项
            this.initChartOptions();
            // 设置容量
            this.setCapList();
            // 设置折线图表
            this.setLineChart();
            // 执行滑动事件
            this.sliderInput();
         }
      },
      setCapList() {
         let batt = this.batt;
@@ -756,6 +951,17 @@
         // 设置柱状图
         this.setBarChart();
      },
      setLD9TopData() {
         // 组端电压和在线电压
         let groupVol = allData.groupVol;
         let testCurr = allData.testCurr;
         let testCap = allData.testCap;
         this.top.group = "组端:" + groupVol.toFixed(2) + "V";
         this.top.curr = testCurr.toFixed(1) + "A";
         this.top.test_cap = testCap.toFixed(1) + "AH";
         this.top.test_long = this.$units.formatSeconds(allData.test_timelong);
      },
      // 设置顶部文本框的数据
      setTopData() {
@@ -987,14 +1193,115 @@
            res: [], // 单体内阻
         };
         // 初始化图表的配置项
         this.initChartOptions();
         if (this.isLD9) {
            // 初始化图表的配置项
            this.initLD9ChartOptions();
            // 设置折线图
            this.setLineChart();
            // 设置柱状图
            this.setLD9BarChart();
         } else {
            // 初始化图表的配置项
            this.initChartOptions();
            // 设置折线图
            this.setLineChart();
            // 设置柱状图
            this.setBarChart();
         }
      },
      initLD9ChartOptions() {
         this.monBarTitle = "单体实际容量柱状图(AH)";
         // 端电压折线图
         groupVolLineChart = {
            color: ["#0081ff", "#df9d02"],
            title: {
               show: false,
               text: "端电压折线图(V)",
               x: "left",
               textStyle: {
                  fontSize: "14",
               },
            },
            legend: {
               show: false,
               data: ["在线电压", "组端电压"],
               right: 0,
               orient: "vertical",
            },
            series: [
               {
                  name: "在线电压",
                  data: [],
               },
               {
                  name: "组端电压",
                  data: [],
               },
            ],
         };
         // 设置折线图
         this.setLineChart();
         // 电池电流折线图
         currLineChart = {
            title: {
               show: false,
               text: "单体电流折线图(A)",
               x: "center",
               textStyle: {
                  fontSize: "14",
               },
            },
            series: [
               {
                  name: "单体电流",
                  areaStyle: {
                     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                           offset: 0,
                           color: "#00feff",
                        },
                        {
                           offset: 1,
                           color: "transparent",
                        },
                     ]),
                  },
                  data: [],
               },
            ],
         };
         // 设置柱状图
         this.setBarChart();
         // 单体信息折线图
         monLineChart = {
            title: {
               show: false,
               text: "单体电压(V)",
               x: "center",
               textStyle: {
                  fontSize: "14",
               },
            },
            series: [],
         };
         // 图表类型
         // 单体信息柱状图
         monBarChart = {
            title: {
               show: false,
               text: "单体实际容量柱状图(AH)",
               x: "center",
               textStyle: {
                  fontSize: "14",
               },
            },
            series: [
               {
                  name: "实际容量",
                  // hColor: "#0B388B",
                  data: [],
               },
            ],
         };
      },
      initChartOptions() {
         // 端电压折线图
@@ -1094,14 +1401,33 @@
      },
      // 设置折线图
      setLineChart() {
         // 设置端电压折线图
         this.setGroupVolLineChart();
         // 设置电池电流折线图
         this.setCurrLineChart();
         // 设置单体折线图
         this.setMonLineChart();
         // 建立联动
         this.$G.chartManage.connect(["groupVol", "groupCurr", "monInfo"]);
         if (this.isLD9) {
            // 设置端电压折线图
            this.setLD9GroupVolLineChart();
            // 设置电池电流折线图
            this.setLD9CurrLineChart();
            // 设置单体折线图
            this.setLD9MonLineChart();
            // 建立联动
            this.$G.chartManage.connect(["groupVol", "groupCurr", "monInfo"]);
         } else {
            // 设置端电压折线图
            this.setGroupVolLineChart();
            // 设置电池电流折线图
            this.setCurrLineChart();
            // 设置单体折线图
            this.setMonLineChart();
            // 建立联动
            this.$G.chartManage.connect(["groupVol", "groupCurr", "monInfo"]);
         }
      },
      setLD9GroupVolLineChart() {
         // 根据allData.groupVol数据设置groupVolLineChart的值
         groupVolLineChart.series[0].data = allData.onlineVol;
         groupVolLineChart.series[1].data = allData.groupVol;
         this.groupVolTitle = "组端电压折线图(V)";
         // 更新图表
         this.$refs.groupVol.setOption(groupVolLineChart);
      },
      // 设置端电压折线图
      setGroupVolLineChart() {
@@ -1183,12 +1509,42 @@
         // 更新图表
         this.$refs.groupVol.setOption(groupVolLineChart);
      },
      // 设置电池电流折线图
      setCurrLineChart() {
      setLD9CurrLineChart() {
         const monNum = this.currMonNum ? '#' + this.currMonNum : '';
         this.monCurrTitle = `单体${monNum}测试电流折线图(A)`;
         // 根据allData.testCurr数据设置currLineChart的值
         currLineChart.series[0].name = monNum + '电流';
         currLineChart.series[0].data = allData.testCurr;
         // 更新图表
         this.$refs.groupCurr.setOption(currLineChart);
      },
      // 设置电池电流折线图
      setCurrLineChart() {
         this.monCurrTitle = "电池电流折线图(A)";
         // 根据allData.testCurr数据设置currLineChart的值
         currLineChart.series[0].data = allData.testCurr;
         // 更新图表
         this.$refs.groupCurr.setOption(currLineChart);
      },
      setLD9MonLineChart() {
         // 根据monLineData的值设置monLineChart
         let dataList = monLineData.vol;
         let monNum = this.currMonNum ? '#' + this.currMonNum : '';
         let title = `单体${monNum}测试电压折线图(V)`;
         this.monInfo.title = title;
         monLineChart.title.show = false;
         monLineChart.series = dataList.map((item, index) => {
            let monNum = "#" + (index + 1) + '电压';
            return {
               name: monNum,
               data: item,
            };
         });
         this.$nextTick(() => {
            // 更新图表
            this.$refs.monInfo.setOption(monLineChart);
         });
      },
      // 设置单体折线图
      setMonLineChart() {
@@ -1233,6 +1589,10 @@
         });
      },
      // 设置柱状图
      setLD9BarChart() {
         this.$refs.monBar.setOption(monBarChart);
      },
      // 设置柱状图
      setBarChart() {
         let chartInfo = this.getChartInfo();
         let unit = chartInfo.unit;