Merge pull request #294 from lawrencehj/wvp-28181-2.0

648540858

2021-12-30 e53ce59166b38880db2762293cca06011b1f66a3

 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: "";*/