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

ZZJ

2022-08-02 ed35d0b4c2051e067bd9904c4b0158257d5db0d9

 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 {