From f99c9cac6afc899c244aa66897cb3bf35a2da7d6 Mon Sep 17 00:00:00 2001
From: 648540858 <648540858@qq.com>
Date: 星期四, 13 一月 2022 16:24:37 +0800
Subject: [PATCH] 优化通道更新
---
web_src/src/components/test.vue | 78 ++++++++++++++++++++++++---------------
1 files changed, 48 insertions(+), 30 deletions(-)
diff --git a/web_src/src/components/test.vue b/web_src/src/components/test.vue
index 603138c..d780125 100644
--- a/web_src/src/components/test.vue
+++ b/web_src/src/components/test.vue
@@ -1,33 +1,30 @@
<template>
<div id="test">
<div class="timeQuery" id="timeQuery">
- <el-row >
- <el-col :span="24">
- <div class="timeQuery-background" @mousemove="hoveEvent"></div>
- <div class="timeQuery-pointer">
- <el-tooltip class="item" effect="dark" content="Top Center 鎻愮ず鏂囧瓧" value="true" manual="true" hide-after="0" placement="top">
- <div class="timeQuery-pointer-content"></div>
- </el-tooltip>
+ <div class="timeQuery-background" ></div>
+ <div class="timeQuery-pointer">
+ <div class="timeQuery-pointer-content" id="timeQueryPointer">
+ <div class="timeQuery-pointer-handle" @mousedown.left="mousedownHandler" ></div>
</div>
+ </div>
- <div class="timeQuery-data" >
+ <div class="timeQuery-data" >
- <div class="timeQuery-data-cell" v-for="item of recordData" :style="'width:' + getDataWidth(item) + '%; left:' + getDataLeft(item) + '%'" ></div>
- <!-- <div class="timeQuery-data-cell" style="width: 30%; left: 20%" @click="timeChoose"></div>-->
- <!-- <div class="timeQuery-data-cell" style="width: 60%; left: 20%" @click="timeChoose"></div>-->
+ <div class="timeQuery-data-cell" v-for="item of recordData" :style="'width:' + getDataWidth(item) + '%; left:' + getDataLeft(item) + '%'" ></div>
+ <!-- <div class="timeQuery-data-cell" style="width: 30%; left: 20%" @click="timeChoose"></div>-->
+ <!-- <div class="timeQuery-data-cell" style="width: 60%; left: 20%" @click="timeChoose"></div>-->
+ </div>
+
+ <div class="timeQuery-label" >
+ <div class="timeQuery-label-cell" style="left: 0%">
+ <div class="timeQuery-label-cell-label">0</div>
</div>
-
- <div class="timeQuery-label" >
- <div class="timeQuery-label-cell" style="left: 0%">
- <div class="timeQuery-label-cell-label">0</div>
- </div>
- <div v-for="index of timeNode" class="timeQuery-label-cell" :style="'left:' + (100.0/timeNode*index).toFixed(4) + '%'">
- <div class="timeQuery-label-cell-label">{{24/timeNode * index}}</div>
- </div>
+ <div v-for="index of timeNode" class="timeQuery-label-cell" :style="'left:' + (100.0/timeNode*index).toFixed(4) + '%'">
+ <div class="timeQuery-label-cell-label">{{24/timeNode * index}}</div>
</div>
- </el-col>
- </el-row>
+ </div>
</div>
+
</div>
</template>
@@ -36,6 +33,7 @@
name: "test",
data() {
return {
+ mouseDown: false,
timeNode: 24,
recordData:[
{
@@ -58,9 +56,8 @@
};
},
mounted() {
- for (let i = 1; i <= 24; i++) {
- console.log("<div class=\"timeQuery-label-cell\" style=\"left: " + (100.0/24*i).toFixed(4) + "%\"></div>")
- }
+ document.body.addEventListener("mouseup", this.mouseupHandler, false)
+ document.body.addEventListener("mousemove", this.mousemoveHandler, false)
},
methods:{
getTimeNode(){
@@ -73,10 +70,6 @@
}else if (width/20 > 6) {
return 6
}
- },
- hoveEvent(event){
- console.log(2222222)
- console.log(event)
},
timeChoose(event){
console.log(event)
@@ -95,6 +88,17 @@
console.log(differenceTime)
console.log(result)
return parseFloat(differenceTime/(24*60*60*10));
+ },
+ mousedownHandler(event){
+ this.mouseDown = true
+ },
+ mousemoveHandler(event){
+ if (this.mouseDown){
+ document.getElementById("timeQueryPointer").style.left = (event.clientX - 20)+ "px"
+ }
+ },
+ mouseupHandler(event){
+ this.mouseDown = false
}
}
}
@@ -133,6 +137,7 @@
z-index: 11;
-webkit-box-shadow: #9d9d9d 0px 0px 10px inset;
margin-top: 3px;
+ top: 100%;
}
.timeQuery-label{
height: 16px;
@@ -166,10 +171,23 @@
}
.timeQuery-pointer-content{
width: 0px;
- height: 16px;
+ height: 70px;
position: absolute;
- border-right: 3px solid #f60303;
+ border-right: 2px solid #f60303;
z-index: 14;
+ top: -30px;
+ }
+ .timeQuery-pointer-handle {
+ width: 0;
+ height: 0;
+ border-top: 12px solid transparent;
+ border-right: 12px solid transparent;
+ border-bottom: 20px solid #ff0909;
+ border-left: 12px solid transparent;
+ cursor: no-drop;
+ position: absolute;
+ left: -11px;
+ top: 50px;
}
/*.timeQuery-cell:after{*/
/* content: "";*/
--
Gitblit v1.8.0