内容修改

longyvfengyun

2024-03-28 c9edc21dac11a334c1a49aec5cb829760def34c2

 src/views/analysis/hdAnalysis.vue

@@ -3,14 +3,16 @@
import carInfoModule from "@/views/moudle/battShow/carInfo";
import FlexBox from "@/components/FlexBox.vue";
import ChartBox from "@/components/chartBox.vue";
import {dataAnalysisModule} from "@/views/analysis/module";
import {dataAnalysisModule, bmsAnalysisTimeModule} from "@/views/analysis/module";
import HdwChart from "@/components/echarts/hdwChart.vue";
import getNormalLine from "@/components/echarts/options/normalLine";
import {ElMessage} from "element-plus";
import getChartLinesMax from "@/util/getChartLinesMax";

const carName = ref("");
const timeRange = ref([]);
timeRange.value = [new Date("2020-01-01 00:00:00"), new Date("2023-01-01 00:00:00")];
const nowDate = new Date().format("yyyy-MM-dd hh:mm:ss");
timeRange.value = [new Date("2020-01-01 00:00:00"), new Date(nowDate)];
const {carList, getCarNames} = carInfoModule();

const  {
@@ -81,10 +83,12 @@
const loading = ref(false);
const searchData = async ()=>{
   loading.value = true;
   const rs = await searchBmsAnalysis();
   const startTime = new Date(timeRange.value[0]).format("yyyy-MM-dd hh:mm:ss");
   const endTime = new Date(timeRange.value[1]).format("yyyy-MM-dd hh:mm:ss");
   const rs = await searchBmsAnalysis(carName.value, startTime, endTime);
   loading.value = false;
   await nextTick();
   if(rs.code === 1) {
   if(rs.code === 1 && rs.data) {
      const data = rs.data;
      // 图表1
      title1.value = data.y1Name;
@@ -142,14 +146,30 @@
      // 图表3
      title3.value = data.y3Name;
      let chart3Data = formatData(data.bmsAlgorithmVoList3);
      chart3Option.xAxis.data = chart3Data.x;
      chart3Option.xAxis.data = chart3Data.x.map(item=>{
         return '#'+(item+1);
      });
      const chart3MaxInfo = getChartLinesMax(chart3Data.y);
      chart3Option.series = chart3Data.y.map((item, key)=>{
         return {
            name: '#'+(key+1),
            name: data.y3Name,
            type: 'line',
            sampling: "lttb",
            smooth: false,
            symbolSize: 0,
            markPoint: {
               data: [
                  {
                     name: "最大值",
                     value: "#"+(chart3MaxInfo.x+1),
                     xAxis: chart3Data.x[chart3MaxInfo.x],
                     yAxis: chart3MaxInfo.y,
                     itemStyle: {
                        color: '#ff0000'
                     }
                  },
               ]
            },
            data: item,
         }
      });
@@ -169,14 +189,30 @@
      // 图表4
      title4.value = data.y4Name;
      let chart4Data = formatData(data.bmsAlgorithmVoList4);
      chart4Option.xAxis.data = chart4Data.x;
      chart4Option.xAxis.data = chart4Data.x.map(item=>{
         return '#'+(item+1);
      });
      const chart4MaxInfo = getChartLinesMax(chart4Data.y);
      chart4Option.series = chart4Data.y.map((item, key)=>{
         return {
            name: '#'+(key+1),
            name: data.y4Name,
            type: 'line',
            sampling: "lttb",
            smooth: false,
            symbolSize: 0,
            markPoint: {
               data: [
                  {
                     name: "最大值",
                     value: "#"+(chart4MaxInfo.x+1),
                     xAxis: chart4Data.x[chart4MaxInfo.x],
                     yAxis: chart4MaxInfo.y,
                     itemStyle: {
                        color: '#ff0000'
                     }
                  },
               ]
            },
            data: item,
         }
      });
@@ -241,13 +277,12 @@
         left: '1%',
         right: '4%',
         bottom: '3%',
         top: "6%",
         containLabel: true
      }
   });
   chart3Option.tooltip.show = false;
   chart3Option.xAxis.axisLabel.show = false;
   chart3Option.xAxis.axisLine.show = false;
   chart3Option.tooltip.show = true;
   chart3Option.xAxis.axisLabel.show = true;
   chart3Option.xAxis.axisLine.show = true;

   title4.value = "图表4";
   chart4Option = getNormalLine({
@@ -257,13 +292,12 @@
         left: '1%',
         right: '4%',
         bottom: '3%',
         top: "6%",
         containLabel: true
      }
   });
   chart4Option.tooltip.show = false;
   chart4Option.xAxis.axisLabel.show = false;
   chart4Option.xAxis.axisLine.show = false;
   chart4Option.tooltip.show = true;
   chart4Option.xAxis.axisLabel.show = true;
   chart4Option.xAxis.axisLine.show = true;
}

const setChart = ()=>{
@@ -281,10 +315,21 @@
          A 15 15, 0, 1, 1, 27.99 7.5
          L 15 15
        " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
      `
      `;
const cascaderValue = ref([]);

const {
   usefulTimeRangeList,
   getBmsAnalysisTime
} = bmsAnalysisTimeModule();
const cascaderHandleChange = ()=>{
   carName.value = cascaderValue.value[0];
   timeRange.value = cascaderValue.value[1].split("~");
}

onMounted(()=>{
   analysisType.value = 1;
   getBmsAnalysisTime(analysisType.value);
   getCarNames();
   initChart();
   setChart();
@@ -302,33 +347,23 @@
         <div class="input-list">
            <div class="input-item">
               <div class="input-wrapper">
                  <div class="input-label">车辆名称:</div>
                  <div class="input-label">数据筛选:</div>
                  <div class="input-content">
                     <el-select v-model="carName" filterable>
                        <el-option
                           v-for="(item, key) in carList" :key="'key'+key"
                           :value="item.key" :label="item.label"></el-option>
                     </el-select>
                     <el-cascader
                        class="w400"
                        v-model="cascaderValue"
                        :options="usefulTimeRangeList"
                        @change="cascaderHandleChange">
                        <template #default="{ node, data }">
                           <span>{{ data.label }}</span>
                           <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
                        </template>
                     </el-cascader>
                  </div>
               </div>
            </div>
            <div class="input-item">
               <div class="input-wrapper">
                  <div class="input-label">日期选择:</div>
                  <div class="input-content">
                     <el-date-picker
                        v-model="timeRange"
                        type="datetimerange"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                        format="YYYY-MM-DD HH:mm:ss"
                        date-format="YYYY/MM/DD ddd"
                        time-format="A hh:mm:ss"></el-date-picker>
                  </div>
               </div>
            </div>
            <div class="input-item">
               <el-button :loading="loading" type="primary" @click="searchData">查询</el-button>
               <el-button :disabled="cascaderValue.length === 0" :loading="loading" type="primary" @click="searchData">查询</el-button>
            </div>
         </div>
      </div>
@@ -438,4 +473,7 @@
   height: 100%;
   padding: 8px 0 8px 8px;
}
/deep/ .el-cascader.w400 {
   width: 400px;
}
</style>