guzijian / wvp-GB28181-pro · Commits

Commit 6289438e62f0f594cd1bc3549ea2a1127e460f1a

Authored by panlinlin
1 parent c566d4d7

添加遗漏的文件

Inline Side-by-side
Showing 1 changed file with 180 additions and 0 deletions
web_src/src/components/test.vue 0 → 100644
  View file @6289438
  1 +<template>
  2 +<div id="test">
  3 + <div class="timeQuery" id="timeQuery">
  4 + <el-row >
  5 + <el-col :span="24">
  6 + <div class="timeQuery-background" @mousemove="hoveEvent"></div>
  7 + <div class="timeQuery-pointer">
  8 + <el-tooltip class="item" effect="dark" content="Top Center 提示文字" value="true" manual="true" hide-after="0" placement="top">
  9 + <div class="timeQuery-pointer-content"></div>
  10 + </el-tooltip>
  11 + </div>
  12 +
  13 + <div class="timeQuery-data" >
  14 +
  15 + <div class="timeQuery-data-cell" v-for="item of recordData" :style="'width:' + getDataWidth(item) + '%; left:' + getDataLeft(item) + '%'" ></div>
  16 + <!-- <div class="timeQuery-data-cell" style="width: 30%; left: 20%" @click="timeChoose"></div>-->
  17 + <!-- <div class="timeQuery-data-cell" style="width: 60%; left: 20%" @click="timeChoose"></div>-->
  18 + </div>
  19 +
  20 + <div class="timeQuery-label" >
  21 + <div class="timeQuery-label-cell" style="left: 0%">
  22 + <div class="timeQuery-label-cell-label">0</div>
  23 + </div>
  24 + <div v-for="index of timeNode" class="timeQuery-label-cell" :style="'left:' + (100.0/timeNode*index).toFixed(4) + '%'">
  25 + <div class="timeQuery-label-cell-label">{{24/timeNode * index}}</div>
  26 + </div>
  27 + </div>
  28 + </el-col>
  29 + </el-row>
  30 + </div>
  31 +</div>
  32 +</template>
  33 +
  34 +<script>
  35 +export default {
  36 + name: "test",
  37 + data() {
  38 + return {
  39 + timeNode: 24,
  40 + recordData:[
  41 + {
  42 + startTime: "2021-04-18 00:00:00",
  43 + endTime: "2021-04-18 00:00:09",
  44 + },
  45 + {
  46 + startTime: "2021-04-18 00:00:09",
  47 + endTime: "2021-04-18 01:00:05",
  48 + },
  49 + {
  50 + startTime: "2021-04-18 02:00:01",
  51 + endTime: "2021-04-18 04:25:05",
  52 + },
  53 + {
  54 + startTime: "2021-04-18 05:00:01",
  55 + endTime: "2021-04-18 20:00:05",
  56 + },
  57 + ]
  58 + };
  59 + },
  60 + mounted() {
  61 + for (let i = 1; i <= 24; i++) {
  62 + console.log("<div class=\"timeQuery-label-cell\" style=\"left: " + (100.0/24*i).toFixed(4) + "%\"></div>")
  63 + }
  64 + },
  65 + methods:{
  66 + getTimeNode(){
  67 + let mine = 20
  68 + let width = document.getElementById("timeQuery").offsetWidth
  69 + if (width/20 > 24){
  70 + return 24
  71 + }else if (width/20 > 12) {
  72 + return 12
  73 + }else if (width/20 > 6) {
  74 + return 6
  75 + }
  76 + },
  77 + hoveEvent(event){
  78 + console.log(2222222)
  79 + console.log(event)
  80 + },
  81 + timeChoose(event){
  82 + console.log(event)
  83 + },
  84 + getDataWidth(item){
  85 + let startTime = new Date(item.startTime);
  86 + let endTime = new Date(item.endTime);
  87 + let result = parseFloat((endTime.getTime() - startTime.getTime())/(24*60*60*10))
  88 + // console.log(result)
  89 + return parseFloat((endTime.getTime() - startTime.getTime())/(24*60*60*10))
  90 + },
  91 + getDataLeft(item){
  92 + let startTime = new Date(item.startTime);
  93 + let differenceTime = startTime.getTime() - new Date(item.startTime.substr(0,10) + " 00:00:00").getTime()
  94 + let result = differenceTime/(24*60*60*10)
  95 + console.log(differenceTime)
  96 + console.log(result)
  97 + return parseFloat(differenceTime/(24*60*60*10));
  98 + }
  99 + }
  100 +}
  101 +</script>
  102 +
  103 +<style scoped>
  104 + .timeQuery{
  105 + width: 96%;
  106 + margin-left: 2%;
  107 + margin-right: 2%;
  108 + margin-top: 20%;
  109 + position: absolute;
  110 + }
  111 + .timeQuery-background{
  112 + height: 16px;
  113 + width: 100%;
  114 + background-color: #ececec;
  115 + position: absolute;
  116 + left: 0;
  117 + top: 0;
  118 + z-index: 10;
  119 + box-shadow: #9d9d9d 0px 0px 10px inset;
  120 + }
  121 + .timeQuery-data{
  122 + height: 16px;
  123 + width: 100%;
  124 + position: absolute;
  125 + left: 0;
  126 + top: 0;
  127 + z-index: 11;
  128 + }
  129 + .timeQuery-data-cell{
  130 + height: 10px;
  131 + background-color: #888787;
  132 + position: absolute;
  133 + z-index: 11;
  134 + -webkit-box-shadow: #9d9d9d 0px 0px 10px inset;
  135 + margin-top: 3px;
  136 + }
  137 + .timeQuery-label{
  138 + height: 16px;
  139 + width: 100%;
  140 + position: absolute;
  141 + pointer-events: none;
  142 + left: 0;
  143 + top: 0;
  144 + z-index: 11;
  145 + }
  146 + .timeQuery-label-cell{
  147 + height: 16px;
  148 + position: absolute;
  149 + z-index: 12;
  150 + width: 0px;
  151 + border-right: 1px solid #b7b7b7;
  152 + }
  153 + .timeQuery-label-cell-label {
  154 + width: 23px;
  155 + text-align: center;
  156 + height: 18px;
  157 + margin-left: -10px;
  158 + margin-top: -30px;
  159 + color: #444;
  160 + }
  161 + .timeQuery-pointer{
  162 + width: 0px;
  163 + height: 18px;
  164 + position: absolute;
  165 + left: 0;
  166 + }
  167 + .timeQuery-pointer-content{
  168 + width: 0px;
  169 + height: 16px;
  170 + position: absolute;
  171 + border-right: 3px solid #f60303;
  172 + z-index: 14;
  173 + }
  174 + /*.timeQuery-cell:after{*/
  175 + /* content: "";*/
  176 + /* height: 14px;*/
  177 + /* border: 1px solid #e70303;*/
  178 + /* position: absolute;*/
  179 + /*}*/
  180 +</style>