电池历史滚动条

longyvfengyun

2023-11-16 a1b9f03aa4b85e91ad2248db99b274003e166f15

 src/views/battShow.vue

@@ -4,28 +4,93 @@
import HdwChart from "@/components/echarts/hdwChart.vue";
import getNormalLine from "@/components/echarts/options/normalLine"
import {onMounted, ref} from "vue";
import getRadiusBarOption from "@/components/echarts/options/radiusBar";

const carName = ref("");
const timeRange = ref("");

const tempLine = ref(null);
const volLine = ref(null);
timeRange.value = [new Date("2020-01-01 00:00:00"), new Date("2023-01-01 00:00:00")];
const tempBar = ref(null);
const volBar = ref(null);
const alarmLine = ref(null);
const totalVolLine = ref(null);

const resize = ()=>{
  tempLine.value.resize();
  volLine.value.resize();
  tempBar.value.resize();
  volBar.value.resize();
  alarmLine.value.resize();
  totalVolLine.value.resize();
}

onMounted(()=>{
  const tempLineOption = getNormalLine();
  tempLine.value.setOption(tempLineOption);
import carInfoModule from "@/views/moudle/battShow/carInfo";
const {carList, getCarNames} = carInfoModule();

  const volLineOption = getNormalLine();
  volLine.value.setOption(volLineOption);
import battHistoryModule from "@/views/moudle/battShow/battHistory";
import getDataIndex from "@/util/getDataIndex";

const {
   getBattHistory
} = battHistoryModule();

let totalData = [];
const searchBattHistory = async ()=> {
   slideVal.value = 100;
   try {
      const rs = await getBattHistory(carName.value, timeRange.value);
      let data = [];
      if (rs.code !== 0) {
         data = rs.data;
      }
      totalData = data;

      let currentDataIndex = getDataIndex(totalData.length, slideVal.value);
      console.log(totalData[currentDataIndex]);
   }catch (e) {
      console.log(e);
   }
}

const slideVal = ref(100);

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

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

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);
@@ -33,7 +98,7 @@
  const totalVolLineOption = getNormalLine();
  totalVolLine.value.setOption(totalVolLineOption);

  resize();
   resize();
});
</script>

@@ -47,9 +112,9 @@
              <div class="input-label">车辆名称:</div>
              <div class="input-content">
                <el-select v-model="carName" filterable>
                  <el-option value="snr" label="汽车1"></el-option>
                  <el-option value="snr1" label="汽车2"></el-option>
                  <el-option value="snr2" label="汽车3"></el-option>
                  <el-option
                     v-for="(item, key) in carList" :key="'key'+key"
                    :value="item.key" :label="item.label"></el-option>
                </el-select>
              </div>
            </div>
@@ -69,49 +134,64 @@
              </div>
            </div>
          </div>
           <div class="input-item">
              <el-button type="primary" @click="searchBattHistory">查询</el-button>
           </div>
        </div>
      </div>
      <div class="batt-show-body">
        <div class="batt-chart-list top">
          <div class="batt-chart-item left">
            <flex-box>
              <div class="flex-box-content">
                <chart-box title="单体温度">
                  <hdw-chart ref="tempLine"></hdw-chart>
                </chart-box>
              </div>
            </flex-box>
          </div>
          <div class="batt-chart-item right">
            <flex-box>
              <div class="flex-box-content">
                <chart-box title="单体电压">
                  <hdw-chart ref="volLine"></hdw-chart>
                </chart-box>
              </div>
            </flex-box>
          </div>
        </div>
        <div class="batt-chart-list bottom">
          <div class="batt-chart-item left">
            <flex-box>
              <div class="flex-box-content">
                <chart-box title="告警事件">
                  <hdw-chart ref="alarmLine"></hdw-chart>
                </chart-box>
              </div>
            </flex-box>
          </div>
          <div class="batt-chart-item right">
            <flex-box>
              <div class="flex-box-content">
                <chart-box title="总单体电压">
                  <hdw-chart ref="totalVolLine"></hdw-chart>
                </chart-box>
              </div>
            </flex-box>
          </div>
        </div>
         <div class="batt-chart-list-wrapper">
            <div class="batt-chart-list-content">
               <div class="batt-chart-list top">
                  <div class="batt-chart-item left">
                     <flex-box>
                        <div class="flex-box-content">
                           <chart-box title="单体温度">
                              <hdw-chart ref="tempBar"></hdw-chart>
                           </chart-box>
                        </div>
                     </flex-box>
                  </div>
                  <div class="batt-chart-item right">
                     <flex-box>
                        <div class="flex-box-content">
                           <chart-box title="单体电压">
                              <hdw-chart ref="volBar"></hdw-chart>
                           </chart-box>
                        </div>
                     </flex-box>
                  </div>
               </div>
               <div class="batt-chart-list bottom">
                  <div class="batt-chart-item left">
                     <flex-box>
                        <div class="flex-box-content">
                           <chart-box title="告警事件">
                              <hdw-chart ref="alarmLine"></hdw-chart>
                           </chart-box>
                        </div>
                     </flex-box>
                  </div>
                  <div class="batt-chart-item right">
                     <flex-box>
                        <div class="flex-box-content">
                           <chart-box title="总单体电压">
                              <hdw-chart ref="totalVolLine"></hdw-chart>
                           </chart-box>
                        </div>
                     </flex-box>
                  </div>
               </div>
            </div>
            <div class="batt-chart-list-footer">
               <el-slider
                  v-model="slideVal"
                  :format-tooltip="formatTooltip"
                  :format-value-text="formatTooltip"
                  @input="handleSlideInput"></el-slider>
            </div>
         </div>

      </div>
    </div>
  </div>
@@ -135,24 +215,35 @@
    }
  }
}
.batt-chart-list {
  display: flex;
  height: 50%;
  &.top {
    padding-bottom: 4px;
  }
  &.bottom {
    padding-top: 4px;
  }
  .batt-chart-item {
    flex:1;
    &.left {
      padding-right: 4px;
    }
    &.right {
      padding-left: 4px;
    }
  }
.batt-chart-list-wrapper {
   display: flex;
   height: 100%;
   flex-direction: column;
   .batt-chart-list-content {
      flex: 1;
      .batt-chart-list {
         display: flex;
         height: 50%;
         &.top {
            padding-bottom: 4px;
         }
         &.bottom {
            padding-top: 4px;
         }
         .batt-chart-item {
            flex:1;
            &.left {
               padding-right: 4px;
            }
            &.right {
               padding-left: 4px;
            }
         }
      }
   }
   .batt-chart-list-footer {
      padding: 4px 16px;
   }
}
.flex-box-content {
  height: 100%;
@@ -167,7 +258,7 @@
.input-wrapper {
  display: flex;
  .input-content {
    width: 160px;
    min-width: 160px;
    vertical-align: middle;
  }
  .input-label {
@@ -179,4 +270,4 @@
    vertical-align: middle;
  }
}
</style>
</style>