From a1b9f03aa4b85e91ad2248db99b274003e166f15 Mon Sep 17 00:00:00 2001
From: longyvfengyun <496960745@qq.com>
Date: 星期四, 16 十一月 2023 17:28:10 +0800
Subject: [PATCH] 电池历史滚动条
---
src/util/getDataIndex.js | 13 +++
src/views/battShow.vue | 170 +++++++++++++++++++++++++++---------------
2 files changed, 123 insertions(+), 60 deletions(-)
diff --git a/src/util/getDataIndex.js b/src/util/getDataIndex.js
new file mode 100644
index 0000000..213d3b5
--- /dev/null
+++ b/src/util/getDataIndex.js
@@ -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;
diff --git a/src/views/battShow.vue b/src/views/battShow.vue
index 91dcbe0..26b8fe2 100644
--- a/src/views/battShow.vue
+++ b/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%;
--
Gitblit v1.9.1