XW-AIOT/wvp-platform
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

添加云端录像功能

Browse Source
This commit is contained in:
64850858
2021-06-01 17:05:07 +08:00
parent d881cd7eb3
commit ad93be12fb
34 changed files with 16251 additions and 690 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
web_src/src/components/test.vue
View File

@@ -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 @@ export default {
name: "test",
data() {
return {
allDataList:[],
mouseDown: false,
timeNode: 24,
recordData:[
{
@@ -62,35 +56,8 @@ export default {
};
},
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(){
@@ -104,10 +71,6 @@ export default {
return 6
}
},
hoveEvent(event){
console.log(2222222)
console.log(event)
},
timeChoose(event){
console.log(event)
},
@@ -125,6 +88,17 @@ export default {
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 @@ export default {
z-index: 11;
-webkit-box-shadow: #9d9d9d 0px 0px 10px inset;
margin-top: 3px;
top: 100%;
}
.timeQuery-label{
height: 16px;
@@ -196,10 +171,23 @@ export default {
}
.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: "";*/