From 62e82ea9ee6a73cf7cdcfe1ab1a7b49a23f571e3 Mon Sep 17 00:00:00 2001
From: 648540858 <648540858@qq.com>
Date: 星期五, 15 十月 2021 17:58:28 +0800
Subject: [PATCH] 录像下载修复
---
web_src/src/components/test.vue | 108 ++++++++++++++++++++++++------------------------------
1 files changed, 48 insertions(+), 60 deletions(-)
diff --git a/web_src/src/components/test.vue b/web_src/src/components/test.vue
index 6d53c54..d780125 100644
--- a/web_src/src/components/test.vue
+++ b/web_src/src/components/test.vue
@@ -1,36 +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>
- <ul>
- <li v-for="item of allDataList" >{{!!item.name?item.name:item.dname}}</li>
- </ul>
+ <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>
@@ -39,7 +33,7 @@
name: "test",
data() {
return {
- allDataList:[],
+ mouseDown: false,
timeNode: 24,
recordData:[
{
@@ -62,35 +56,8 @@
};
},
mounted() {
- var list1 = [{
- key: Math.random()*10,
- name: "浜�1"
- },{
- key: Math.random()*10,
- name: "浜�2"
- },{
- key: Math.random()*10,
- name: "浜�3"
- }]
- var list2 = [{
- key: Math.random()*10,
- dname: "閮ㄩ棬1"
- },{
- key: Math.random()*10,
- dname: "閮ㄩ棬2"
- },{
- key: Math.random()*10,
- dname: "閮ㄩ棬3"
- }]
-
- var allData = list1.concat(list2)
- allData.sort((a, b)=>{
- return a.key-b.key;
- })
- this.allDataList = allData;
- 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(){
@@ -103,10 +70,6 @@
}else if (width/20 > 6) {
return 6
}
- },
- hoveEvent(event){
- console.log(2222222)
- console.log(event)
},
timeChoose(event){
console.log(event)
@@ -125,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
}
}
}
@@ -163,6 +137,7 @@
z-index: 11;
-webkit-box-shadow: #9d9d9d 0px 0px 10px inset;
margin-top: 3px;
+ top: 100%;
}
.timeQuery-label{
height: 16px;
@@ -196,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