摄像机树样式,导出数据样式

ZZJ

2022-08-02 ed35d0b4c2051e067bd9904c4b0158257d5db0d9

摄像机树样式,导出数据样式

 dist.rar

Binary files differ

 package.json

@@ -42,7 +42,7 @@
    "vue-router": "^3.0.3",
    "vue-video-player": "^5.0.2",
    "vue-window-modal": "git+https://github.com/ropbla9/vue-window-modal.git",
    "vue2-animate": "^2.1.1",
    "vue2-animate": "^2.1.4",
    "vuedraggable": "^2.23.0",
    "vuex": "^3.4.0",
    "webpack": "^4.43.0",

 src/components/CameraLeft.vue

@@ -1,7 +1,7 @@
<template>
  <div class="CameraLeft">
    <div class="tree">
      <transition name="slideLeft">
  <transition name="slideLeft">
    <div class="CameraLeft">
      <div class="tree">
        <div
          class="left-tree-box"
          v-show="TreeDataPool.showTreeBox"
@@ -370,9 +370,9 @@
            <button ref="import-btn" v-show="false"></button>
          </el-upload>
        </div>
      </transition>
      </div>
    </div>
  </div>
  </transition>
</template>

<script>

 src/components/giantTree/index.vue

@@ -45,11 +45,7 @@
    />
    <div class="empty" v-if="!node.length">暂无摄像机数据,请添加摄像机!</div>
    <div class="dialog-box-bg" v-show="showDialog" @click="hideDialogBox"></div>
    <div
      class="dialog-box"
      v-show="showDialog"
      :style="{ left: clientX + 'px', top: clientY + 'px' }"
    >
    <div class="dialog-box" v-show="showDialog">
      <el-card :body-style="{ padding: '10px' }">
        <el-form
          :model="dialogForm"
@@ -416,9 +412,11 @@
}

.dialog-box {
  position: absolute;
  top: 415px;
  left: 43px;
  position: fixed;
  width: 220px;
  z-index: 1;
  z-index: 3;
}
.dialog-box-bg {
  position: absolute;

 src/main.ts

@@ -16,6 +16,7 @@

import "swiper/dist/css/swiper.css";
import './assets/css/element-variables.scss'
import 'vue2-animate/dist/vue2-animate.min.css'




 src/views/hashrate/CameraManage/index.vue

@@ -13,7 +13,10 @@
      </el-select>
    </div>
    <div class="content">
      <CameraLeft :appName="'Camera'" ref="left"></CameraLeft>
      <div class="column-left" ref="left">
        <div class="resize-line" @mousedown="TextWidthChange"></div>
        <CameraLeft :appName="'Camera'" ref="left"></CameraLeft>
      </div>
      <div class="right">
        <div class="tabs">
          <div
@@ -165,6 +168,31 @@
    });
  },
  methods: {
    TextWidthChange(e) {
      console.log(1212);
      let odivParent = e.currentTarget.parentNode; //获取目标父元素
      let dx = e.clientX; //当你第一次单击的时候，存储x轴的坐标。
      let dw = odivParent.offsetWidth; //存储默认的div的宽度。
      document.onmousemove = (e) => {
        odivParent.style.width = dw + (e.clientX - dx) + "px";

        if (odivParent.offsetWidth <= 100) {
          //当盒子缩小到一定范围内的时候，让他保持一个固定值，不再继续改变
          odivParent.style.width = "100px";
        }

        if (odivParent.offsetWidth + odivParent.offsetLeft >= this.pdfWidth) {
          odivParent.style.width = this.pdfWidth - odivParent.offsetLeft + "px";
        }
      };
      document.onmouseup = (e) => {
        document.onmousemove = null;
        document.onmouseup = null;
      };
      e.stopPropagation();
      e.preventDefault();
      return false;
    },
    handAddDevice(node) {
      let _this = this;
      setTimeout(() => {
@@ -312,9 +340,25 @@
    margin-bottom: 60px;
    display: flex;
    align-items: stretch;
    .CameraLeft {
    .column-left {
      position: relative;
      margin-right: 24px;
      width: 292px;
      background-color: #fff;
    }

    .resize-line {
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      border-right: 2px solid #efefef;
      border-left: 2px solid #e0e0e0;
      z-index: 1;
      cursor: ew-resize;
    }
    .resize-line:hover {
      border-left: 2px dashed skyblue;
    }

    .right {

 src/views/hashrate/HashManage/components/SettingBox.vue

@@ -1,6 +1,6 @@
<template>
  <div class="SettingBox">
    <div class="title">退出集群</div>
    <div class="title">算力设置</div>

    <div class="settingBody">
      <div class="settingItem">

 src/views/search/Searching.vue

@@ -141,7 +141,7 @@

          <div class="btnArea">
            <div class="button light" @click.stop="showDownBox = !showDownBox">
              <span class="el-icon-plus"></span>
              <span class="iconfont">&#xe643;</span>
              导出数据
            </div>

@@ -1075,39 +1075,43 @@
.btnArea {
  padding: 0 10px;
  margin-right: 10px;
  background-color: #0064ff;
  color: #0064ff;
  background-color: #fff;
  text-align: center;
  line-height: 28px;
  display: inline-block;
  height: 28px;
  border-radius: 5px;
  cursor: pointer;
  color: #fff;
  font-size: 12px;
  border: 1px solid #0065ff;

  .light {
  }

  .downBox {
    top: 104px;
    right: 255px;
    position: absolute;
    text-align: center;
    border: 1px solid #0064ff;
    background-color: #fff;
    border-radius: 9px;
    border-radius: 3px;
    color: #3d3d3d;

    width: 100px;
    z-index: 10;
    padding: 10px;
    box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.05),
      0px 4px 5px 0px rgba(0, 0, 0, 0.08), 0px 2px 4px -1px rgba(0, 0, 0, 0.12);

    .downItem {
      text-align: center;
      height: 28px;
      line-height: 28px;
      height: 40px;
      line-height: 40px;
      font-size: 12px;
      border-radius: 9px;
      cursor: pointer;

      &:hover {
        background-color: #f5f5fa;
        background-color: #f0f5fa;
      }
    }
  }

 src/views/search/components/giantTree/index.vue

@@ -346,9 +346,11 @@
</script>
<style lang="scss" scoped>
.dialog-box {
  position: absolute;
  top: 415px;
  left: 43px;
  position: fixed;
  width: 220px;
  z-index: 1;
  z-index: 3;
}
.dialog-box-bg {
  position: absolute;

 src/views/search/components/treeMenu/index.vue

@@ -403,9 +403,11 @@
</script>
<style lang="scss" scoped>
.dialog-box {
  position: absolute;
  top: 415px;
  left: 43px;
  position: fixed;
  width: 220px;
  z-index: 1;
  z-index: 3;
}
.dialog-box-bg {
  position: absolute;