From 6289438e62f0f594cd1bc3549ea2a1127e460f1a Mon Sep 17 00:00:00 2001 From: panlinlin <648540858@qq.com> Date: 星期四, 22 四月 2021 10:22:15 +0800 Subject: [PATCH] 添加遗漏的文件 --- web_src/src/components/test.vue | 180 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 180 insertions(+), 0 deletions(-) diff --git a/web_src/src/components/test.vue b/web_src/src/components/test.vue new file mode 100644 index 0000000..603138c --- /dev/null +++ b/web_src/src/components/test.vue @@ -0,0 +1,180 @@ +<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> + + <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> + + <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> + </el-col> + </el-row> + </div> +</div> +</template> + +<script> +export default { + name: "test", + data() { + return { + timeNode: 24, + recordData:[ + { + startTime: "2021-04-18 00:00:00", + endTime: "2021-04-18 00:00:09", + }, + { + startTime: "2021-04-18 00:00:09", + endTime: "2021-04-18 01:00:05", + }, + { + startTime: "2021-04-18 02:00:01", + endTime: "2021-04-18 04:25:05", + }, + { + startTime: "2021-04-18 05:00:01", + endTime: "2021-04-18 20:00:05", + }, + ] + }; + }, + mounted() { + for (let i = 1; i <= 24; i++) { + console.log("<div class=\"timeQuery-label-cell\" style=\"left: " + (100.0/24*i).toFixed(4) + "%\"></div>") + } + }, + methods:{ + getTimeNode(){ + let mine = 20 + let width = document.getElementById("timeQuery").offsetWidth + if (width/20 > 24){ + return 24 + }else if (width/20 > 12) { + return 12 + }else if (width/20 > 6) { + return 6 + } + }, + hoveEvent(event){ + console.log(2222222) + console.log(event) + }, + timeChoose(event){ + console.log(event) + }, + getDataWidth(item){ + let startTime = new Date(item.startTime); + let endTime = new Date(item.endTime); + let result = parseFloat((endTime.getTime() - startTime.getTime())/(24*60*60*10)) + // console.log(result) + return parseFloat((endTime.getTime() - startTime.getTime())/(24*60*60*10)) + }, + getDataLeft(item){ + let startTime = new Date(item.startTime); + let differenceTime = startTime.getTime() - new Date(item.startTime.substr(0,10) + " 00:00:00").getTime() + let result = differenceTime/(24*60*60*10) + console.log(differenceTime) + console.log(result) + return parseFloat(differenceTime/(24*60*60*10)); + } + } +} +</script> + +<style scoped> + .timeQuery{ + width: 96%; + margin-left: 2%; + margin-right: 2%; + margin-top: 20%; + position: absolute; + } + .timeQuery-background{ + height: 16px; + width: 100%; + background-color: #ececec; + position: absolute; + left: 0; + top: 0; + z-index: 10; + box-shadow: #9d9d9d 0px 0px 10px inset; + } + .timeQuery-data{ + height: 16px; + width: 100%; + position: absolute; + left: 0; + top: 0; + z-index: 11; + } + .timeQuery-data-cell{ + height: 10px; + background-color: #888787; + position: absolute; + z-index: 11; + -webkit-box-shadow: #9d9d9d 0px 0px 10px inset; + margin-top: 3px; + } + .timeQuery-label{ + height: 16px; + width: 100%; + position: absolute; + pointer-events: none; + left: 0; + top: 0; + z-index: 11; + } + .timeQuery-label-cell{ + height: 16px; + position: absolute; + z-index: 12; + width: 0px; + border-right: 1px solid #b7b7b7; + } + .timeQuery-label-cell-label { + width: 23px; + text-align: center; + height: 18px; + margin-left: -10px; + margin-top: -30px; + color: #444; + } + .timeQuery-pointer{ + width: 0px; + height: 18px; + position: absolute; + left: 0; + } + .timeQuery-pointer-content{ + width: 0px; + height: 16px; + position: absolute; + border-right: 3px solid #f60303; + z-index: 14; + } + /*.timeQuery-cell:after{*/ + /* content: "";*/ + /* height: 14px;*/ + /* border: 1px solid #e70303;*/ + /* position: absolute;*/ + /*}*/ +</style> -- Gitblit v1.8.0