树形组件滚动

ZZJ

2021-12-20 f309eb5a5de6c7c27dfe44c9d5ad4c1e6ea600e2

树形组件滚动

 src/components/giantTree/zTree/ztree.vue

@@ -41,11 +41,11 @@
          showLine: true,
          showIcon: true, // default to hide icon
          addHoverDom: this.addHoverDom,
          removeHoverDom: this.removeHoverDom
          removeHoverDom: this.removeHoverDom,
        },
        check: {
          chkboxType: { "Y": "", "N": "" },
          enable: this.showCheckbox
          chkboxType: { Y: "", N: "" },
          enable: this.showCheckbox,
        },
        callback: {
          onAsyncError: (...arg) => {
@@ -84,7 +84,6 @@
          },
          onMouseUp: (...arg) => {
            this.$emit("onMouseUp", ...arg);

          },
          onRemove: (...arg) => {
            this.$emit("onRemove", ...arg);
@@ -122,6 +121,10 @@
    },
    showCheckbox: {
      handler: function () {
        let top = $("#" + this.ztreeId)
          .parent()
          .scrollTop();

        this.ztreeSetting.check.enable = this.showCheckbox;

        if (this.ztreeObj) {
@@ -134,11 +137,14 @@
            Object.assign({}, this.ztreeSetting, this.setting),
            this.list
          );
          $("#" + this.ztreeId)
            .parent()
            .scrollTop(top);
          this.$emit("onCreated", this.ztreeObj);
        });
      },
      immediate: true,
    }
    },
  },
  methods: {
    addHoverDom(treeid, treeNode) {
@@ -146,103 +152,137 @@
      const item = document.getElementById(`${treeNode.tId}_a`);

      // 文件夹新增按钮
      if (item && !item.querySelector('.el-icon-circle-plus-outline') && treeNode.isParent && !this.readonly && !this.gb28181) {
        const btn = document.createElement('i');
      if (
        item &&
        !item.querySelector(".el-icon-circle-plus-outline") &&
        treeNode.isParent &&
        !this.readonly &&
        !this.gb28181
      ) {
        const btn = document.createElement("i");
        btn.id = `${treeid}_${treeNode.id}_btn`;
        btn.classList.add('el-icon-circle-plus-outline');
        btn.classList.add('primary');
        btn.classList.add("el-icon-circle-plus-outline");
        btn.classList.add("primary");
        // btn.innerText = '删除';
        btn.addEventListener('click', (e) => {
          e.stopPropagation()
        btn.addEventListener("click", (e) => {
          e.stopPropagation();
          // this.clickRemove(treeNode)
          _vue.$emit("onAddNode", treeNode);
        })
        });

        item.appendChild(btn);
      }

      // 文件夹删除按钮
      if (item && !item.querySelector('.el-icon-remove-outline') && treeNode.isParent && !this.readonly && !treeNode.children && !this.gb28181) {
        const btn = document.createElement('i');
      if (
        item &&
        !item.querySelector(".el-icon-remove-outline") &&
        treeNode.isParent &&
        !this.readonly &&
        !treeNode.children &&
        !this.gb28181
      ) {
        const btn = document.createElement("i");
        btn.id = `${treeid}_${treeNode.id}_btn`;
        btn.classList.add('el-icon-remove-outline');
        btn.classList.add('danger');
        btn.classList.add("el-icon-remove-outline");
        btn.classList.add("danger");
        // btn.innerText = '删除';
        btn.addEventListener('click', (e) => {
          e.stopPropagation()
        btn.addEventListener("click", (e) => {
          e.stopPropagation();
          // this.clickRemove(treeNode)
          _vue.$emit("onRemoveNode", treeNode);
        })
        });

        item.appendChild(btn);
      }

      // 文件夹编辑按钮
      if (item && !item.querySelector('.el-icon-edit') && treeNode.isParent && !this.readonly) {
        const btn = document.createElement('i');
      if (
        item &&
        !item.querySelector(".el-icon-edit") &&
        treeNode.isParent &&
        !this.readonly
      ) {
        const btn = document.createElement("i");
        btn.id = `${treeid}_${treeNode.id}_btn`;
        btn.classList.add('el-icon-edit');
        btn.classList.add('primary');
        btn.classList.add("el-icon-edit");
        btn.classList.add("primary");
        // btn.innerText = '删除';
        btn.addEventListener('click', (e) => {
          e.stopPropagation()
        btn.addEventListener("click", (e) => {
          e.stopPropagation();
          // this.clickRemove(treeNode)
          _vue.$emit("onRenameNode", treeNode);
        })
        });

        item.appendChild(btn);
      }

      // 添加摄像机按钮
      if (item && !item.querySelector('.iconshishishipin') && treeNode.isParent && !this.readonly && !this.gb28181) {
        const btn = document.createElement('i');
      if (
        item &&
        !item.querySelector(".iconshishishipin") &&
        treeNode.isParent &&
        !this.readonly &&
        !this.gb28181
      ) {
        const btn = document.createElement("i");
        btn.id = `${treeid}_${treeNode.id}_btn`;
        btn.classList.add('iconfont');
        btn.classList.add('iconshishishipin');
        btn.classList.add('primary');
        btn.classList.add('icon-fix');
        btn.classList.add("iconfont");
        btn.classList.add("iconshishishipin");
        btn.classList.add("primary");
        btn.classList.add("icon-fix");
        // btn.innerText = '删除';
        btn.addEventListener('click', (e) => {
          e.stopPropagation()
        btn.addEventListener("click", (e) => {
          e.stopPropagation();
          // this.clickRemove(treeNode)
          _vue.$emit("onAddDevice", treeNode.id);
        })
        });

        item.appendChild(btn);
      }

      // 导入摄像机按钮
      if (item && !item.querySelector('.icondaoru') && treeNode.isParent && !this.readonly && !this.gb28181) {
        const btn = document.createElement('i');
      if (
        item &&
        !item.querySelector(".icondaoru") &&
        treeNode.isParent &&
        !this.readonly &&
        !this.gb28181
      ) {
        const btn = document.createElement("i");
        btn.id = `${treeid}_${treeNode.id}_btn`;
        btn.classList.add('iconfont');
        btn.classList.add('icondaoru');
        btn.classList.add('primary');
        btn.classList.add('icon-fix');
        btn.classList.add("iconfont");
        btn.classList.add("icondaoru");
        btn.classList.add("primary");
        btn.classList.add("icon-fix");
        // btn.innerText = '删除';
        btn.addEventListener('click', (e) => {
          e.stopPropagation()
        btn.addEventListener("click", (e) => {
          e.stopPropagation();
          // this.clickRemove(treeNode)
          _vue.$emit("onImport", treeNode.id);
        })
        });

        item.appendChild(btn);
      }

      // 查看底图按钮
      if (item && !item.querySelector('.icontupian1') && treeNode.type == "camera") {
        const btn = document.createElement('i');
      if (
        item &&
        !item.querySelector(".icontupian1") &&
        treeNode.type == "camera"
      ) {
        const btn = document.createElement("i");
        btn.id = `${treeid}_${treeNode.id}_btn`;
        btn.classList.add('iconfont');
        btn.classList.add('icontupian1');
        btn.classList.add('primary');
        btn.classList.add('icon-fix');
        btn.classList.add("iconfont");
        btn.classList.add("icontupian1");
        btn.classList.add("primary");
        btn.classList.add("icon-fix");
        // btn.innerText = '删除';
        btn.addEventListener('click', (e) => {
          e.stopPropagation()
        btn.addEventListener("click", (e) => {
          e.stopPropagation();
          // this.clickRemove(treeNode)
          _vue.$emit("onShowPic", treeNode);
        })
        });

        item.appendChild(btn);
      }
@@ -253,38 +293,38 @@
    removeHoverDom(treeid, treeNode) {
      const item = document.getElementById(`${treeNode.tId}_a`);
      if (item) {
        let btn = item.querySelector('.el-icon-circle-plus-outline');
        let btn = item.querySelector(".el-icon-circle-plus-outline");
        if (btn) {
          item.removeChild(item.querySelector('.el-icon-circle-plus-outline'))
          item.removeChild(item.querySelector(".el-icon-circle-plus-outline"));
        }

        btn = item.querySelector('.el-icon-remove-outline');
        btn = item.querySelector(".el-icon-remove-outline");
        if (btn) {
          item.removeChild(item.querySelector('.el-icon-remove-outline'))
          item.removeChild(item.querySelector(".el-icon-remove-outline"));
        }

        btn = item.querySelector('.el-icon-edit');
        btn = item.querySelector(".el-icon-edit");
        if (btn) {
          item.removeChild(item.querySelector('.el-icon-edit'))
          item.removeChild(item.querySelector(".el-icon-edit"));
        }

        btn = item.querySelector('.iconshishishipin');
        btn = item.querySelector(".iconshishishipin");
        if (btn) {
          item.removeChild(item.querySelector('.iconshishishipin'))
          item.removeChild(item.querySelector(".iconshishishipin"));
        }

        btn = item.querySelector('.icondaoru');
        btn = item.querySelector(".icondaoru");
        if (btn) {
          item.removeChild(item.querySelector('.icondaoru'))
          item.removeChild(item.querySelector(".icondaoru"));
        }

        btn = item.querySelector('.icontupian1');
        btn = item.querySelector(".icontupian1");
        if (btn) {
          item.removeChild(item.querySelector('.icontupian1'))
          item.removeChild(item.querySelector(".icontupian1"));
        }
      }
    },
  }
  },
};
</script>


 vue.config.js

@@ -1,34 +1,34 @@
'use strict'
const glob = require('glob')
const pages = {}
const IS_VENDOR = /[\\/]node_modules[\\/]/
const pageVendor = {}
"use strict";
const glob = require("glob");
const pages = {};
const IS_VENDOR = /[\\/]node_modules[\\/]/;
const pageVendor = {};

const pkg = require('./package.json')
const timestamp = new Date().getTime()
const queryStr = `?v=${pkg.version}&t=${timestamp}`
const pkg = require("./package.json");
const timestamp = new Date().getTime();
const queryStr = `?v=${pkg.version}&t=${timestamp}`;

glob.sync('./src/pages/**/main.ts').forEach(path => {
  const chunk = path.split('./src/pages/')[1].split('/main.ts')[0]
  const chunk_vendor = `${chunk}-vendors`
  const chunk_common = `${chunk}-common`
glob.sync("./src/pages/**/main.ts").forEach((path) => {
  const chunk = path.split("./src/pages/")[1].split("/main.ts")[0];
  const chunk_vendor = `${chunk}-vendors`;
  const chunk_common = `${chunk}-common`;
  pages[chunk] = {
    entry: path,
    template: 'public/index.html',
    title: chunk == 'desktop/index' ? 'SmartAI' : chunk,
    chunks: [chunk_vendor, 'chunk-common', chunk]
  }
  if (chunk != 'index') {
    pages[chunk].filename = 'view/' + chunk + '.html'
    template: "public/index.html",
    title: chunk == "desktop/index" ? "SmartAI" : chunk,
    chunks: [chunk_vendor, "chunk-common", chunk],
  };
  if (chunk != "index") {
    pages[chunk].filename = "view/" + chunk + ".html";
  }

  pageVendor[chunk_vendor] = {
    name: chunk_vendor,
    priority: -11,
    chunks: c => c.name === chunk,
    chunks: (c) => c.name === chunk,
    test: /\.js$/,
    enforce: true
  }
    enforce: true,
  };

  // pageVendor[chunk_common] = {
  //   name: chunk_common,
@@ -38,30 +38,31 @@
  //   reuseExistingChunk: true,
  //   enforce: true
  // }
})
});

// const serverUrl = "http://58.118.225.79:41243" // 羊五
const serverUrl = "http://192.168.20.117:7009"
//const serverUrl = "http://192.168.20.117:7009"
const serverUrl = "http://192.168.20.10:7009";

module.exports = {
  pages,
  chainWebpack: config => {
    config.plugins.delete('named-chunks')
    if (process.env.NODE_ENV === 'production') {
      config.output.filename('js/[name].js' + queryStr).end()
      config.output.chunkFilename('js/[name].js' + queryStr).end()
  chainWebpack: (config) => {
    config.plugins.delete("named-chunks");
    if (process.env.NODE_ENV === "production") {
      config.output.filename("js/[name].js" + queryStr).end();
      config.output.chunkFilename("js/[name].js" + queryStr).end();
      // 修改生产配置
      config.plugin('extract-css').tap(() => [
      config.plugin("extract-css").tap(() => [
        {
          filename: `css/[name].css${queryStr}`,
          chunkFilename: `css/[name].css${queryStr}`
        }
      ])
          chunkFilename: `css/[name].css${queryStr}`,
        },
      ]);
    }

    config.optimization.splitChunks({
      cacheGroups: pageVendor
    })
      cacheGroups: pageVendor,
    });

    // config.module.rule('fonts').use('url-loader').loader('file-loader').options({ name: 'fonts/[name].[ext]', publicPath: '../' })
    //config.module.rule('fonts').use('url-loader').loader('file-loader').options({ name: 'fonts/[name].[ext]', outputPath: '../' })
@@ -70,51 +71,51 @@
  filenameHashing: false,
  pwa: {
    iconPaths: {
      favicon32: 'favicon.ico',
      favicon16: 'favicon.ico'
    }
      favicon32: "favicon.ico",
      favicon16: "favicon.ico",
    },
  },
  devServer: {
    proxy: {
      '/track': {
      "/track": {
        target: serverUrl,
        // ws: true,
        changeOrigin: true,
      },
      '/ws': {
      "/ws": {
        target: serverUrl,
        // ws: true,
        changeOrigin: true,
      },
      "/data/api-v/app/findAllApp": {
         target: '/',
        target: "/",
        //target: 'http://localhost:8080/',
        changeOrigin: true,
        pathRewrite: {
          '^/data/api-v/app/findAllApp': 'apps.json'
        }
          "^/data/api-v/app/findAllApp": "apps.json",
        },
      },
      "/api-c": {
        target: serverUrl,
        changeOrigin: true
        changeOrigin: true,
      },
      "/api-v": {
        target: serverUrl,
        changeOrigin: true
        changeOrigin: true,
      },
      "/api-f": {
        target: serverUrl,
        // secure: false,
        changeOrigin: true
        changeOrigin: true,
      },
      "/api-p": {
        target: serverUrl,
        // secure: false,
        changeOrigin: true
        changeOrigin: true,
      },
      "/api-u": {
        target: serverUrl,
        changeOrigin: true
        changeOrigin: true,
      },
      "/httpImage": {
        target: serverUrl,
@@ -123,7 +124,7 @@
      "/files": {
        target: serverUrl,
        changeOrigin: true, //开启代理
      }
    }
  }
}
      },
    },
  },
};