电池历史滚动条

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,6 +140,8 @@
        </div>
      </div>
      <div class="batt-show-body">
          <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>
@@ -154,6 +183,16 @@
          </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>
</template>
@@ -176,6 +215,12 @@
    }
  }
}
.batt-chart-list-wrapper {
    display: flex;
    height: 100%;
    flex-direction: column;
    .batt-chart-list-content {
        flex: 1;
.batt-chart-list {
  display: flex;
  height: 50%;
@@ -195,6 +240,11 @@
    }
  }
}
    }
    .batt-chart-list-footer {
        padding: 4px 16px;
    }
}
.flex-box-content {
  height: 100%;
  padding: 8px 0 8px 8px;