内容提交

longyvfengyun

2023-11-20 55c60e84df6378b5e79bb5ebf1c3ce8dc281c69f

 src/views/battShow.vue

@@ -3,8 +3,16 @@
import ChartBox from "@/components/chartBox.vue";
import HdwChart from "@/components/echarts/hdwChart.vue";
import getNormalLine from "@/components/echarts/options/normalLine"
import {nextTick, onMounted, ref} from "vue";
import {onMounted, ref} from "vue";
import getRadiusBarOption from "@/components/echarts/options/radiusBar";
import carInfoModule from "@/views/moudle/battShow/carInfo";
import battHistoryModule from "@/views/moudle/battShow/battHistory";
import getDataIndex from "@/util/getDataIndex";
import getNormalBar from "@/components/echarts/options/getNormalBar";
import getMin from "@/components/echarts/options/tools/getMin";
import getMax from "@/components/echarts/options/tools/getMax";
import getBarNum from "@/components/echarts/options/tools/getBarNum";
import * as echarts from 'echarts';

const carName = ref("");
const timeRange = ref("");
@@ -21,11 +29,7 @@
  totalVolLine.value.resize();
}

import carInfoModule from "@/views/moudle/battShow/carInfo";
const {carList, getCarNames} = carInfoModule();

import battHistoryModule from "@/views/moudle/battShow/battHistory";
import getDataIndex from "@/util/getDataIndex";

const {
   getBattHistory
@@ -43,7 +47,13 @@
      totalData = data;
      slideVal.value = 100;
      let currentDataIndex = getDataIndex(totalData.length, slideVal.value);
      console.log(totalData[currentDataIndex]);
      if(currentDataIndex !== -1 && totalData.length !== 0) {
         setBarData(totalData[currentDataIndex]);
      }else {
         setBarData(-1)
      }

      setLineData(data);
   }catch (e) {
      console.log(e);
   }
@@ -53,51 +63,182 @@

const handleSlideInput = ()=>{
   let currentDataIndex = getDataIndex(totalData.length, slideVal.value);
   if(currentDataIndex !== -1) {
      console.log(totalData[currentDataIndex]);
   if(currentDataIndex !== -1 && totalData.length !== 0) {
      setBarData(totalData[currentDataIndex]);
   }else {
      setBarData(-1);
   }
}

const formatTooltip = (val)=>{
   let currentDataIndex = getDataIndex(totalData.length, slideVal.value);
   let rs = val+"";
   if(currentDataIndex !== -1) {
   if(currentDataIndex !== -1 && totalData.length !== 0) {
      let data = totalData[currentDataIndex];
      return new Date(data.gatherTime).format("yyyy-MM-dd hh:mm:ss");
   }
   return rs;
}

onMounted(()=>{
const tempBarOption = getNormalBar({
   grid: {
      top: '15%',
      right: '3%',
      left: '5%',
      bottom: '6%'
   }
});
const volBarOption = getNormalBar({
   minRatio: 0.999,
   maxRatio: 1.001,
   grid: {
      top: '15%',
      right: '3%',
      left: '5%',
      bottom: '6%'
   }
});
const setBarData = (data)=>{
   tempBarOption.series[0].name = "单体温度";
   volBarOption.series[0].name = "单体电压";
   volBarOption.series[0].label.show = false;
   if(data !== -1) {
      let tempData = data.monomerTemp.split(",").map((item, key) => {
         return ["#" + (key + 1), item]
      });
      const tempNum = getBarNum(tempData);
      tempBarOption.option.min = tempNum.min;
      tempBarOption.option.max = tempNum.max;
      tempBarOption.title.text = "最大值="+tempNum.max+"℃;最小值="+tempNum.min+"℃;平均值="+tempNum.avg+"℃";
      tempBarOption.series[0].data = tempData;

      let volData = data.monomerVol.split(",").map((item, key) => {
         return ["#" + (key + 1), item]
      });
      const volNum = getBarNum(volData);
      volBarOption.option.min = volNum.min;
      volBarOption.option.max = volNum.max;
      volBarOption.title.text = "最大值="+volNum.max+"V;最小值="+volNum.min+"V;平均值="+volNum.avg+"V";
      volBarOption.series[0].type="line";
      volBarOption.series[0].markPoint= {
         data: [
            {
               type: 'max',
               name: 'Max',
               itemStyle: {
                  color: "#FF0000"
               }
            },
            { type: 'min', name: 'Min' }
         ]
      };
      volBarOption.series[0].data = volData;
   }else {
      tempBarOption.series[0].data = [];
      volBarOption.series[0].data = [];
   }
   tempBar.value.setOption(tempBarOption);
   volBar.value.setOption(volBarOption);
}

const alarmLineOption = getNormalLine({
   minRatio: 1,
   maxRatio: 1,
});
const totalVolLineOption = getNormalLine({
   minRatio: 1,
   maxRatio: 1,
});

let lineData = {
   times: [],
   vol: [],
   temp: []
};

const setLineData = (data)=>{
   // 初始化lineData
   lineData = {
      times: [],
      vol: [],
      temp: []
   };

   // 遍历数据
   for(let i=0; i<data.length; i++) {
      let itemData = data[i];
      lineData.times.push(new Date(itemData.gatherTime).format("yyyy-MM-dd hh:mm:ss"));
      // 单体温度
      itemData.monomerTemp.split(",").map((item, key)=>{
         if(lineData.temp[key] === undefined) {
            lineData.temp[key] = [];
         }
         lineData.temp[key].push(item);
      });

      // 单体电压
      itemData.monomerVol.split(",").map((item, key)=>{
         if(lineData.vol[key] === undefined) {
            lineData.vol[key] = [];
         }
         lineData.vol[key].push(item);
      });
   }

   alarmLineOption.xAxis.data = lineData.times;
   alarmLineOption.series = lineData.temp.map((item, key)=>{
      return {
         name: '#'+(key+1),
         type: 'line',
         smooth: false,
         symbolSize: 0,
         data: item,
      }
   });
   alarmLine.value.setOption(alarmLineOption);

   totalVolLineOption.xAxis.data = lineData.times;
   totalVolLineOption.tooltip.formatter = (params)=>{
      let res = params[0].name + '<br/>';
      res +='<table>'
      params.forEach((item,key) => {
         res += "<td style='padding: 2px'>";
         res += item.marker;
         res += item.seriesName;
         res += ' : ' + item.data + 'V';
         res += "</td>";
         if((key+1)%5 === 0) {
            res += '<tr></tr>';
         }
      });
      res +='<table>'
      return res;
   };
   totalVolLineOption.series = lineData.vol.map((item, key)=>{
      return {
         name: '#'+(key+1),
         type: 'line',
         smooth: false,
         symbolSize: 0,
         data: item,
      }
   });
   totalVolLine.value.setOption(totalVolLineOption);
}
onMounted(()=>{
   getCarNames();

  const tempBarOption = getRadiusBarOption({
     grid: {
        top: '15%',
        right: '3%',
        left: '5%',
        bottom: '5%'
     }
  });
  tempBar.value.setOption(tempBarOption);

  const volBarOption = getRadiusBarOption({
     grid: {
        top: '15%',
        right: '3%',
        left: '5%',
        bottom: '5%'
     }
  });
  volBar.value.setOption(volBarOption);

  const alarmLineOption = getNormalLine();
  alarmLine.value.setOption(alarmLineOption);

  const totalVolLineOption = getNormalLine();
  alarmLine.value.setOption(alarmLineOption);
  totalVolLine.value.setOption(totalVolLineOption);

   echarts.connect([
      alarmLine.value.getChart(),
      totalVolLine.value.getChart()
   ]);
   resize();
});
</script>
@@ -166,7 +307,7 @@
                  <div class="batt-chart-item left">
                     <flex-box>
                        <div class="flex-box-content">
                           <chart-box title="告警事件">
                           <chart-box title="总单体温度">
                              <hdw-chart ref="alarmLine"></hdw-chart>
                           </chart-box>
                        </div>
@@ -191,7 +332,6 @@
                  @input="handleSlideInput"></el-slider>
            </div>
         </div>

      </div>
    </div>
  </div>
@@ -242,7 +382,7 @@
      }
   }
   .batt-chart-list-footer {
      padding: 4px 16px;
      padding: 4px 8px;
   }
}
.flex-box-content {