| | |
| | | <div class="content_header" slot="header"> |
| | | <three-btn @click="goSelect">重选文件</three-btn> |
| | | <three-btn @click="exportExcel">导出</three-btn> |
| | | <div class=""> |
| | | 记录开始时间:2021-03-21 17:52:05 |
| | | 测试类型:充电 |
| | | 绝缘 |
| | | <div class="summary"> |
| | | <div class="summary-item">记录开始时间:<span>{{ summary.testStartTime }}</span></div> |
| | | <div class="summary-item">测试类型:<span>{{ summary.testType }}</span></div> |
| | | <div class="summary-item">正极绝缘电阻:<span>{{ summary.PosInsRes }}KΩ</span></div> |
| | | <div class="summary-item">负极绝缘电阻:<span>{{ summary.NegInsRes }}KΩ</span></div> |
| | | </div> |
| | | </div> |
| | | <div class="main"> |
| | | <div class="flex-row contain-flex-column"> |
| | | <flex-box class="item" size="mini" title="组端电压折线图"> |
| | | <normal-lines id="groupVol" ref="groupVol" unit="V"></normal-lines> |
| | | </flex-box> |
| | | <flex-box class="item" size="mini" title="电池电流折线图"> |
| | | <normal-lines id="groupCurr" ref="groupCurr" unit="A"></normal-lines> |
| | | </flex-box> |
| | | </div> |
| | | <div class="flex-row contain-flex-column"> |
| | | <flex-box class="item" size="mini" title="单体电压折线图"> |
| | | <normal-lines id="vol" ref="vol" unit="V"></normal-lines> |
| | | </flex-box> |
| | | <flex-box class="item" size="mini" title="容量折线图"> |
| | | <div slot="tools" class="chart-tools-wrapper"> |
| | | <el-select |
| | | v-model="chartType" |
| | | size="mini" |
| | | @change="changeChartType" |
| | | > |
| | | <el-option |
| | | v-for="item in chartTypes" |
| | | :key="item.value" |
| | | :label="item.label" |
| | | :value="item.value" |
| | | ></el-option> |
| | | </el-select> |
| | | <div class="flex-row"> |
| | | <div class="flex-row-inner contain-flex-column"> |
| | | <div class="item"> |
| | | <flex-box class="item-inner" size="mini" title="组端电压折线图"> |
| | | <normal-lines id="groupVol" ref="groupVol" unit="V"></normal-lines> |
| | | </flex-box> |
| | | </div> |
| | | <normal-lines id="cap" ref="cap" unit="AH"></normal-lines> |
| | | </flex-box> |
| | | <div class="item"> |
| | | <flex-box class="item-inner" size="mini" title="电池电流折线图"> |
| | | <normal-lines id="groupCurr" ref="groupCurr" unit="A"></normal-lines> |
| | | </flex-box> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="flex-row"> |
| | | <div class="flex-row-inner contain-flex-column"> |
| | | <div class="item"> |
| | | <flex-box class="item-inner" size="mini" title="单体电压折线图"> |
| | | <normal-lines id="vol" ref="vol" unit="V"></normal-lines> |
| | | </flex-box> |
| | | </div> |
| | | <div class="item"> |
| | | <flex-box class="item-inner" size="mini" :title="optsTitle"> |
| | | <div slot="tools" class="chart-tools-wrapper"> |
| | | <el-select |
| | | v-model="chartType" |
| | | size="mini" |
| | | @change="changeChartType" |
| | | > |
| | | <el-option |
| | | v-for="item in chartTypes" |
| | | :key="item.value" |
| | | :label="item.label" |
| | | :value="item.value" |
| | | ></el-option> |
| | | </el-select> |
| | | </div> |
| | | <normal-lines id="other" ref="other"></normal-lines> |
| | | </flex-box> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <!-- 导出用的图表 可变的那组图 --> |
| | |
| | | import ThreeBtn from "@/components/ThreeBtn"; |
| | | import axios from "@/assets/js/axios"; |
| | | const dataType = { |
| | | 0xFD: '放电', |
| | | 0xFC: '充电', |
| | | 0xFB: '普通数据' |
| | | 0xfd: "放电", |
| | | 0xfc: "充电", |
| | | 0xfb: "普通数据", |
| | | }; |
| | | |
| | | export default { |
| | |
| | | }, |
| | | data() { |
| | | let info = this.$route.query.data; |
| | | let { fboData, fboDataStart } = info; |
| | | let lastRecord = fboData[fboData.length - 1]; |
| | | let chartTypes = [ |
| | | { |
| | | label: "环境温度", |
| | | value: "tempEnvi", |
| | | }, |
| | | { |
| | | label: "环境湿度", |
| | | value: "humiEnvi", |
| | | } |
| | | ]; |
| | | let capTest = fboDataStart.DataType == 0xfd || fboDataStart.DataType == 0xfc; |
| | | return { |
| | | info, |
| | | chartType: "testCap", |
| | | chartTypes: [ |
| | | capTest, |
| | | chartType: capTest ? "testCap" : "tempEnvi", |
| | | chartTypes: capTest ? [ |
| | | { |
| | | label: "测试容量", |
| | | value: "testCap", |
| | | unit: "AH", |
| | | fixed: 0, |
| | | }, |
| | | { |
| | | label: "实际容量(预估)", |
| | | value: "actualCap", |
| | | unit: "AH", |
| | | fixed: 0, |
| | | }, |
| | | // { |
| | | // label: "剩余容量", |
| | | // value: "residualCap", |
| | | // unit: "AH", |
| | | // fixed: 0, |
| | | // }, |
| | | // { |
| | | // label: "剩余时间", |
| | | // value: "residualTime", |
| | | // unit: "", |
| | | // fixed: 0, |
| | | // }, |
| | | ], |
| | | ...chartTypes |
| | | ] : [...chartTypes], |
| | | testCapOption: null, |
| | | actualCapOption: null, |
| | | residualCapOption: null, |
| | | residualTimeOption: null, |
| | | unit: '' |
| | | tempEnviOption: null, |
| | | humiEnviOption: null, |
| | | summary: { |
| | | testStartTime: fboDataStart.testStartTime, |
| | | testType: dataType[fboDataStart.DataType], |
| | | PosInsRes: lastRecord.PosInsRes, |
| | | NegInsRes: lastRecord.NegInsRes, |
| | | }, |
| | | optsTitle: capTest ? '测试容量拆线图' : '环境温度折线图' |
| | | }; |
| | | }, |
| | | methods: { |
| | |
| | | groupVol = [], |
| | | groupCurr = [], |
| | | testCap = [], |
| | | actualCap = [], |
| | | residualCap = [], |
| | | residualTime = [], |
| | | PosInsRes = [], |
| | | NegInsRes = [], |
| | | // actualCap = [], |
| | | // residualCap = [], |
| | | // residualTime = [], |
| | | // PosInsRes = [], |
| | | // NegInsRes = [], |
| | | tempEnvi = [], |
| | | humiEnvi = [], |
| | | SingleVol = []; |
| | | for (let i = 0, j = monCount; i < j; i++) { |
| | | SingleVol[i] = { |
| | |
| | | // 测试容量 |
| | | testCap.push(item.testCap); |
| | | // 实际容量 |
| | | actualCap.push(item.actualCap); |
| | | // actualCap.push(item.actualCap); |
| | | // 剩余容量 |
| | | residualCap.push(item.residualCap); |
| | | // residualCap.push(item.residualCap); |
| | | // 剩余时间 |
| | | residualTime.push(item.residualTime); |
| | | // residualTime.push(item.residualTime); |
| | | // 正极绝缘电阻 |
| | | PosInsRes.push(item.PosInsRes); |
| | | // PosInsRes.push(item.PosInsRes); |
| | | // 负极绝缘电阻 |
| | | NegInsRes.push(item.NegInsRes); |
| | | // NegInsRes.push(item.NegInsRes); |
| | | // 环境温度 |
| | | tempEnvi.push(item.Temp_Envi); |
| | | // 环境湿度 |
| | | humiEnvi.push(item.Humi_Envi); |
| | | // 单体电压 |
| | | for (let m = 0, n = monCount; m < n; m++) { |
| | | SingleVol[m].data.push(item.SingleVol[m]); |
| | |
| | | series: SingleVol, |
| | | }; |
| | | let testCapOption = { |
| | | unit: 'AH', |
| | | unit: "AH", |
| | | xData: times, |
| | | series: [ |
| | | { |
| | |
| | | }, |
| | | ], |
| | | }, |
| | | actualCapOption = { |
| | | unit: 'AH', |
| | | tempEnviOption = { |
| | | unit: "℃", |
| | | xData: times, |
| | | series: [ |
| | | { |
| | | name: "实际容量", |
| | | name: "环境温度", |
| | | type: "line", |
| | | symbolSize: 0, |
| | | sampling: "lttb", |
| | | data: actualCap, |
| | | data: tempEnvi, |
| | | }, |
| | | ], |
| | | }, |
| | | residualCapOption = { |
| | | unit: 'AH', |
| | | humiEnviOption = { |
| | | unit: "%", |
| | | xData: times, |
| | | series: [ |
| | | { |
| | | name: "剩余容量", |
| | | name: "环境湿度", |
| | | type: "line", |
| | | symbolSize: 0, |
| | | sampling: "average", |
| | | data: residualCap, |
| | | }, |
| | | ], |
| | | }, |
| | | residualTimeOption = { |
| | | unit: '', |
| | | xData: times, |
| | | series: [ |
| | | { |
| | | name: "剩余时间", |
| | | type: "line", |
| | | symbolSize: 0, |
| | | sampling: "average", |
| | | data: residualTime, |
| | | data: humiEnvi, |
| | | }, |
| | | ], |
| | | }; |
| | | this.testCapOption = testCapOption; |
| | | this.actualCapOption = actualCapOption; |
| | | this.residualCapOption = residualCapOption; |
| | | this.residualTimeOption = residualTimeOption; |
| | | this.tempEnviOption = tempEnviOption; |
| | | this.humiEnviOption = humiEnviOption; |
| | | |
| | | this.$refs.groupVol.setData(groupVolOption); |
| | | this.$refs.groupCurr.setData(currOption); |
| | | this.$refs.vol.setData(volOption); |
| | | this.$refs.cap.setData(testCapOption); |
| | | this.$refs.other.setData(this.capTest ? testCapOption : tempEnviOption); |
| | | // 建立联动 |
| | | this.$G.chartManage.connect(["groupVol", "groupCurr", "vol", "cap"]); |
| | | this.$G.chartManage.connect(["groupVol", "groupCurr", "vol", "other"]); |
| | | }, |
| | | changeChartType(v) { |
| | | this.$refs.cap.setData(this[v + "Option"]); |
| | | this.optsTitle = v.label + '折线图'; |
| | | this.$refs.other.setData(this[v + "Option"]); |
| | | }, |
| | | goSelect() { |
| | | this.$router.push("/selectFile"); |
| | | this.$router.push({path: "/selectFile", query: {reselect: 1}}); |
| | | }, |
| | | // 导出报表 |
| | | exportExcel() { |
| | | // 容量折线图 |
| | | let arr = ['testCap', 'actualCap']; |
| | | let arr = ["testCap", "tempEnvi", "humiEnvi"]; |
| | | let o_pic = {}; |
| | | arr.forEach((v) => { |
| | | let option = this[v + 'Option']; |
| | | this.unit = option.unit; |
| | | let option = this[v + "Option"]; |
| | | this.$refs.hideChart.setData(option); |
| | | o_pic[v] = this.$refs.hideChart.getDataURL(); |
| | | }); |
| | |
| | | groupVol_echart: this.$refs.groupVol.getDataURL(), |
| | | curr_echart: this.$refs.groupCurr.getDataURL(), |
| | | vol_echart: this.$refs.vol.getDataURL(), |
| | | cap_echart: o_pic.testCap, |
| | | actualCap_echart: o_pic.actualCap |
| | | tempEnvi_echart: o_pic.tempEnvi, |
| | | humiEnvi_echart: o_pic.humiEnvi, |
| | | }; |
| | | if (this.capTest) { |
| | | params.cap_echart = o_pic.testCap; |
| | | } |
| | | |
| | | let baseURL = axios.defaults.baseURL; |
| | | baseURL = baseURL ? baseURL : ""; |
| | | var actionUrl = baseURL + "export"; |
| | |
| | | } |
| | | .flex-row { |
| | | flex: 1; |
| | | position: relative; |
| | | } |
| | | .item-inner, |
| | | .flex-row-inner { |
| | | position: absolute; |
| | | left: 0; |
| | | top: 0; |
| | | right: 0; |
| | | bottom: 0; |
| | | } |
| | | .contain-flex-column { |
| | | display: flex; |
| | |
| | | .item { |
| | | background: #0d43a7; |
| | | flex: 1; |
| | | position: relative; |
| | | } |
| | | .content_header { |
| | | padding: 8px; |
| | | padding: 8px 8px 12px; |
| | | display: flex; |
| | | color: #fff; |
| | | align-items: center; |
| | | } |
| | | .summary { |
| | | display: flex; |
| | | flex-wrap: wrap; |
| | | } |
| | | .summary-item { |
| | | margin-left: 1em; |
| | | } |
| | | .summary-item span { |
| | | color: #ff0; |
| | | } |
| | | >>> .three-btn { |
| | | flex-shrink: 0; |
| | | } |
| | | >>> .three-btn + .three-btn { |
| | | margin-left: 8px; |