电池历史滚动条

longyvfengyun

2023-11-16 a1b9f03aa4b85e91ad2248db99b274003e166f15

电池历史滚动条

 src/util/getDataIndex.js

New file
@@ -0,0 +1,13 @@
/**
 * 根据进度调返回当前数据记录的笔数
 * @param num 数据总条数
 * @param percent 进度
 * @return {number}
 */
function getDataIndex(num, percent) {
  if (percent <= 0) {
    return 0;
  }
  return Math.floor((num * percent) / 100) - 1;
}
export default getDataIndex;

 src/views/battShow.vue

@@ -8,7 +8,7 @@

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 tempBar = ref(null);
const volBar = ref(null);
const alarmLine = ref(null);
@@ -25,20 +25,47 @@
const {carList, getCarNames} = carInfoModule();

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) {
            console.log(rs.data);
            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(()=>{
@@ -113,46 +140,58 @@
        </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="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 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>
@@ -176,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%;