电池历史滚动条

longyvfengyun

2023-11-16 a1b9f03aa4b85e91ad2248db99b274003e166f15

 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%;