安全指挥

src/views/energyOperationSupport/components/securitys/pic2.vue

@@ -0,0 +1,1431 @@
+<template>
+  <div class="root">
+    <el-row :gutter="10" class="container">
+      <el-col :span="24">
+        <div class="itemBox" :span="24">
+          <el-row :gutter="10" class="flex-box">
+            <el-col :span="6">
+              <span class="label">标签名称</span>
+              <el-autocomplete v-model="searchParam.searchLabel" :fetch-suggestions="getLabelList" placeholder="请输入标签名"
+                @select="handleSelect" class="el-select"></el-autocomplete>
+            </el-col>
+            <el-col :span="2" class="mt10">
+              <el-checkbox v-model="searchParam.radioTime" @change="isShowTimeinfo">显示时间</el-checkbox>
+            </el-col>
+            <el-col :span="2" class="mt10">
+              <el-checkbox v-model="searchParam.radioItemStatus" @change="isShowItemStatus">显示状态</el-checkbox>
+            </el-col>
+          </el-row>
+          <div class="canvaBox">
+            <div class="minimap"></div>
+            <!-- 树图相关 -->
+            <div id="treeDiv" class="whr100"></div>
+            <!-- 重命名节点Dialog -->
+            <el-dialog title="提示" :visible.sync="renameDialogVisible" width="30%" :before-close="editDialogClose">
+              <el-input v-model="inputLabel.name" placeholder="请输入"></el-input>
+              <span slot="footer" class="dialog-footer">
+                <el-button @click="renameDialogVisible = false">取 消</el-button>
+                <el-button type="primary" @click="renameSubmit">确 定</el-button>
+              </span>
+            </el-dialog>
+            <!-- 删除dialog -->
+            <el-dialog title="提示" :visible.sync="delDialogVisible" width="20%" :before-close="delDialogClose">
+              <div class="title">是否确认删除？</div>
+              <span slot="footer" class="dialog-footer">
+                <el-button @click="delDialogVisible = false">取 消</el-button>
+                <el-button type="primary" @click="delSubmit">确 定</el-button>
+              </span>
+            </el-dialog>
+          </div>
+        </div>
+
+      </el-col>
+      <el-drawer title="节点信息" :visible.sync="dataInfoDrawerVisible" class="dataInfo-drawer-dialog" @close="dataInfoClose"
+        size="50%">
+        <el-form ref="dataInfoForm" :model="dataInfoForm" label-width="90px">
+          <el-form-item label="节点名称">
+            <el-col :span="11">
+              <el-input v-model="dataInfoForm.name"></el-input>
+            </el-col>
+          </el-form-item>
+
+          <el-form-item label="详细情况">
+            <el-col :span="11">
+              <el-input v-model="dataInfoForm.content"></el-input>
+            </el-col>
+          </el-form-item>
+        </el-form>
+        <div class="dataInfoFootDiv">
+          <el-button @click="dataInfoDrawerVisible = false">取 消</el-button>
+          <el-button type="primary" @click="dataInfoSubmit">保 存</el-button>
+        </div>
+      </el-drawer>
+      <el-dialog title="文件预览" :visible.sync="dialogVisible" destroy-on-close width="90%" top="6vh" height="90%">
+        <el-button size="small" type="primary" icon="el-icon-download" @click="downloadFile(chart.fileData)"
+          :loading="loading" style="position: absolute; right: 100px; top: 20px;">
+          点击保存
+        </el-button>
+        <iframe :src="previewUrl" width="100%" :height="singleTableHeight"></iframe>
+      </el-dialog>
+    </el-row>
+    <!-- 上传器 -->
+    <el-dialog title="文件重新上传" :visible.sync="dialogVisible2" destroy-on-close width="15%" top="6vh" height="90%">
+      <el-upload class="upload-demo" ref="upload2" action="" :http-request="beforeUpload2" :loading="uploadloading"
+        :auto-upload="true">
+        <el-button slot="trigger" size="small" type="primary" :loading="loading" icon="el-icon-plus">选取文件
+        </el-button>
+      </el-upload>
+    </el-dialog>
+
+    <el-dialog title="文件上传" :visible.sync="dialogVisible1" destroy-on-close width="15%" top="6vh" height="90%">
+      <el-upload class="upload-demo" ref="upload1" action="" :http-request="beforeUpload" :loading="loading"
+        :auto-upload="true">
+        <el-button slot="trigger" size="small" type="primary" :loading="loading" icon="el-icon-plus">选取文件
+        </el-button>
+      </el-upload>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import moment from "moment";
+import { Message } from "element-ui";
+import G6 from "@antv/g6";
+import insertCss from "insert-css";
+
+
+const { Util, TreeGraph, registerNode, Menu, Tooltip, Minimap } = G6;
+let graph = {};
+//节点类型颜色
+const nodeType2Color = {
+  0: "#BBDAFB",
+  100: "#FFFFCC",
+  200: "#FBD4D4",
+  300: "#BCF2DA",
+  400: "#CCFF99",
+  500: "#FBD4D4",
+  600: "#BBDAFB",
+};
+//根据节点状态颜色
+const itemStatusColor = { 
+  0: "#5B8FF9",
+  100: "#EEBC20",
+  200: "#5BD8A6",
+  300: "#F46649",
+};
+export default {
+  name: "root",
+
+  data() {
+    return {
+      singleTableHeight: '720px',
+      previewUrl: '',
+      activeMenu: '',
+      nodeid: '',
+      NodeData: {
+
+      },
+      selectFileType: "",
+      uploadData: [],
+      uploadIf: true,
+      tableHeight: 500,
+      uploadStop: false,
+      dialogVisible: false,
+      dialogVisible1: false,
+      dialogVisible2: false,
+      loading: false,
+      loading2: false,
+      uploadloading : false,
+      tableLoading: false,
+      chart: {
+        height: '1024px',
+        show: false,
+        fileData: {
+          fileName: '',
+          fileUrl: ''
+        },
+        option: {
+          tooltip: {
+            trigger: 'item',
+            triggerOn: 'mousemove'
+          },
+          toolbox: {
+            feature: {
+              saveAsImage: {}
+            }
+          },
+          series: [{
+            type: 'tree',
+            data: [],
+            top: '2%',
+            left: '25%',
+            bottom: '1%',
+            right: '20%',
+            symbolSize: 8,
+            nodePadding: 50,
+            label: {
+              position: 'left',
+              verticalAlign: 'bottom',
+              align: 'right',
+              fontSize: 15
+            },
+            leaves: {
+              label: {
+                position: 'right',
+                verticalAlign: 'middle',
+                align: 'left'
+              }
+            },
+            emphasis: {
+              focus: 'descendant'
+            },
+            initialTreeDepth: 2,
+            expandAndCollapse: true,
+            animationDuration: 550,
+            animationDurationUpdate: 750,
+            roam: true
+          }]
+        }
+      },
+      initTinymce: {
+        language: "zh_CN", //语言
+        height: 300, //编辑器高度
+        branding: false, //是否禁用“Powered by TinyMCE”
+        menubar: false, //顶部菜单栏显示
+      },
+      renameDialogVisible: false,
+      delDialogVisible: false,
+      dataInfoDrawerVisible: false,
+      dataInfoForm: {
+        id: "",
+        name: "",
+        itemtype: "",
+        itemstatus: "",
+        content: "",
+        createtime: "",
+        tlevel: "",
+        parentid: "",
+        filename: ""
+      },
+      file: {
+        id: "",
+        filename: ""
+      },
+      itemStatusList: {
+        100: "无文件",
+        200: "有文件",
+      },
+      dataList: [],
+      itemTypeList: {
+        100: "项目准备工作相关",
+        200: "项目程序制作",
+        300: "项目测试相关"
+      },
+      dataInfo: [],
+      selectLabelList: [],
+      findLabeltimeout: false,
+      lastSelectedNodeArr: [], // 上次选中节点
+      itemNode: {}, // 右键菜单项 点击时的节点
+      inputLabel: {
+        name: "",
+      },
+      treeData: [],
+      listData: [],
+      searchParam: {
+        searchLabel: "",
+        searchItemStatus: "",
+        itemtype: "",
+        radioItemStatus: "",
+      },
+    };
+  },
+  created() {
+    //  this.treeData3();
+    this.getGxNameData();
+
+  },
+  mounted() {
+  },
+  methods: {
+    treeData3() {
+      //获取tree数据
+      // this.treeData = require('../securitys/treeData2.json');
+      let that = this;
+      console.log('treeData:', that.treeData)
+      // 根据tree获取平级数组../
+      const treeData = JSON.parse(JSON.stringify(this.treeData));
+      this.listData = this.treeToList(treeData);
+
+      // select数据
+      this.listData.forEach((item) => {
+        this.selectLabelList.push({
+          value: item.name,
+          name: item.name,
+          id: item.id,
+          levle: item.tlevel
+        });
+      });
+      let tNow = moment();
+      this.$nextTick(() => {
+        this.treeInit();
+      });
+    },
+
+    treeInit() {
+      const that = this;
+      that.styleCss(); // 样式函数
+      // 创建G6右键菜单
+      const menu = new Menu({
+        itemTypes: ["node"],
+        getContent(evt) {
+          const model = evt.item.getModel();
+          let menuHtml = `
+              <div class="contextmenu__item" id="addLabel">新建标签</div>
+              <div class="contextmenu__item" id="editLabel">重命名</div>
+              <div class="contextmenu__item" id="delLabel">删除</div>
+              <div class="contextmenu__item" id="beforeUpload">上传文件</div>
+              <div class="contextmenu__item" id="beforeUpload2">修改上传文件</div>`;
+          return menuHtml;
+        },
+        handleMenuClick(target, item) {
+          if (target.id == "addLabel") {
+            // 新建
+            that.itemNode = item;
+            Object.keys(that.dataInfoForm).forEach((key) => {
+              that.dataInfoForm[key] = "";
+            });
+            that.dataInfoDrawerVisible = true;
+          } else if (target.id == "editLabel") {
+            // 重命名
+            that.itemNode = item;
+            that.renameDialog();
+          } else if (target.id == "beforeUpload") {
+            // 上传文件
+            that.itemNode = item;
+            console.log('fileitemNode', that.itemNode)
+            that.dialogVisible1 = true;
+          } else if (target.id == "beforeUpload2") {
+            // 修改上传的文件
+            that.itemNode = item;
+            that.dialogVisible2 = true;
+          } else if (target.id == "delLabel") {
+            // 删除
+            that.itemNode = item;
+            that.delDialogVisible = true;
+          } else if (target.id == "dataInfoLabel") {
+          } else if (target.id == "detailLabel") {
+            // 修改
+            that.itemNode = item;
+            that.dataInfoForm = that.itemNode.getModel();
+            that.dataInfoForm.content = that.dataInfoForm.content.toString();
+            that.dataInfoDrawerVisible = true;
+          }
+        },
+      });
+      //弹出层
+      const tooltip = new Tooltip({
+        getContent(e) {
+          var tooltipHtml = "";
+          const model = e.item.getModel();
+          if (model.content && model.content.toString().length > 0) {
+            tooltipHtml =
+              `
+                <div class="tooltip-header" >` +
+              model.createtime +
+              `（` +
+              model.itemStatusName +
+              `)</div>
+                <div class="tooltip-content" ><h3>` +
+              model.name +
+              `</h3>` +
+              model.content +
+              `</div> `;
+          }
+          return tooltipHtml;
+        },
+        shouldBegin(e) {
+          //设置条件，没有内容不显示tooltip
+          const model = e.item.getModel();
+          return model.content ? true : false;
+        },
+        itemTypes: ["node"],
+        offsetX: 1,
+        offsetY: 0,
+        fixToNode: false,
+        offset: 10,
+      });
+      // 实例化 minimap 插件
+      const minimap = new Minimap({
+        container: document.querySelector(".minimap"),
+        size: [200, 200],
+      });
+      // G6增加自定义节点信息;
+      registerNode(
+        "rNode",
+        {
+          drawShape: (cfg, group) => {
+            const {
+              id,
+              name,
+              itemtype,
+              style,
+              size,
+              itemstatus,
+              itemStatusName,
+              createtime,
+              tlevel,
+              file_name,
+              file_url
+            } = cfg;
+            const rect = group.addShape("rect", {
+              attrs: {
+                ...style,
+                x: -size[0] / 2,
+                y: -size[1] / 2,
+                width: size[0],
+                height: size[1],
+                fill: nodeType2Color[itemtype],
+              },
+              name: "rect",
+            });
+            // text time
+            group.addShape("text", {
+              attrs: {
+                text: that.searchParam.radioTime
+                  ? moment(createtime).format("YYYY-MM-DD")
+                  : "",
+                x: -size[0] / 2,
+                y: -size[1] / 2 - 15,
+                opacity: 1,
+                fill: "#999",
+                textBaseline: "top",
+              },
+              name: "rect-shape-text1",
+            });
+            // text itemStatusName
+            group.addShape("text", {
+              attrs: {
+                text: that.searchParam.radioItemStatus ? "(" + itemStatusName + ")" : "",
+                x: size[0] / 2 - 70,
+                y: size[1] / 2 - 46,
+                opacity: 1,
+                fill: itemStatusColor[itemstatus],
+                textBaseline: "top",
+              },
+              name: "rect-shape-text2",
+            });
+            return rect;
+          },
+          update: (cfg, item) => {
+            const { id, name, createtime, itemstatus, itemStatusName } = cfg;
+            const group = item.getContainer();
+            // 更新节点名
+            const label = group.find((e) => e.get("name") === "text-shape");
+            label.attr("text", this.formatLabel(name));
+            // 更新时间
+            const text1 = group.find((e) => e.get("name") === "rect-shape-text1");
+            text1.attr(
+              "text",
+              that.searchParam.radioTime
+                ? moment(createtime).format("YYYY-MM-DD")
+                : ""
+            );
+            // 更新状态及样式
+            const text2 = group.find((e) => e.get("name") === "rect-shape-text2");
+            text2.attr({
+              text: that.searchParam.radioItemStatus ? "(" + itemStatusName + ")" : "",
+              fill: itemStatusColor[itemstatus],
+            });
+          },
+        },
+        "rect"
+      );
+
+      const treeDiv = document.querySelector("#treeDiv");
+      const width = treeDiv.scrollWidth;
+      const height = treeDiv.scrollHeight || 800;
+
+      graph = new TreeGraph({
+        plugins: [menu, minimap, tooltip],
+        container: "treeDiv",
+        width: window.innerWidth - 10,
+        height: window.innerHeight - 10,
+        fitView: true,
+        pixelRatio: 2,
+        modes: {
+          // 内置行为参考 https://antv-g6.gitee.io/zh/docs/manual/middle/states/defaultBehavior
+          default: ["collapse-expand", "drag-canvas", "zoom-canvas", "drag-node"],
+        },
+        // 设置一些状态时节点变化
+        nodeStateStyles: {
+          mouseenter: {
+            // 鼠标划入样式设置
+            shadowColor: "#CCC",
+            shadowBlur: 1,
+          },
+          clicked: {
+            // 选中样式设置
+            stroke: "#409EFF",
+            lineWidth: 2,
+            shadowColor: "#409EFF",
+            shadowBlur: 10
+          },
+        },
+        // 节点类型及样式
+        defaultNode: {
+          size: [100, 30],
+          type: "rNode",
+          style: {
+            // 节点阴影颜色和宽度
+            shadowColor: "#CCC",
+            shadowBlur: 20,
+            // 阴影偏移量
+            shadowOffsetX: 5,
+            shadowOffsetY: 5,
+            // 边框颜色和宽度
+            stroke: "",
+            lineWidth: 0,
+          },
+        },
+        // 连线类型及样式
+        defaultEdge: {
+          type: "polyline",
+          style: {
+            // 节点阴影颜色和宽度
+            shadowColor: "#CCC",
+            shadowBlur: 10,
+            // 阴影偏移量
+            shadowOffsetX: 5,
+            shadowOffsetY: 5,
+            // 颜色和宽度
+            stroke: "#999",
+            lineWidth: 2,
+          },
+        },
+        //布局和绘图类型
+        layout: {
+          type: "mindmap",
+          direction: "H",
+          getHeight: function getHeight() {
+            return 40;
+          },
+          getWidth: function getWidth() {
+            return 200;
+          },
+          getVGap: function getVGap() {
+            return 10;
+          },
+          getHGap: function getHGap() {
+            return 80;
+          },
+        },
+
+      });
+
+      // 格式化tree数据
+      Util.traverseTree(this.treeData, (item) => {
+        if (item.tlevel >= 2) {
+          item.collapsed = true;
+        }
+        Object.keys(that.itemStatusList).forEach(function (k) {
+          if (k == item.itemstatus) {
+            item.itemStatusName = that.itemStatusList[k];
+          }
+        });
+        item.label = that.formatLabel(item.name);
+      });
+      graph.read(this.treeData);
+      graph.fitView();
+
+      if (typeof window !== "undefined")
+        window.onresize = () => {
+          this.$nextTick(() => {
+            if (!graph || graph.get("destroyed")) return;
+            if (!treeDiv || !treeDiv.scrollWidth || !treeDiv.scrollHeight) return;
+            graph.changeSize(treeDiv.scrollWidth, treeDiv.scrollHeight);
+            graph.render();
+            graph.fitView();
+          });
+        };
+      graph.on("node:click", function (event) {
+        const { item } = event;
+        const nodeItem = event.item // 获取被点击的节点元素对象
+        const nodeModel = item.getModel();
+        if (nodeModel.tlevel >= 3 && nodeModel.file_url !== null) {
+          let arg = {
+            fileUrl: nodeModel.file_url,
+            fileName: nodeModel.file_name
+          }
+          that.preview(arg);
+        }
+
+        that.findNodesByModels([nodeModel]);
+      });
+
+      // 鼠标点击画布，显示所有节点和边 
+      graph.on('canvas:click', function (event) {
+        const nodes = graph.getNodes();
+        const edges = graph.getEdges();
+        nodes.forEach((node) => {
+          node.show();
+        });
+        edges.forEach((edge) => {
+          edge.show();
+        });
+        graph.paint();
+      });
+      // 鼠标移入节点 node:mouseenter
+      graph.on("node:mouseenter", (evt) => {
+        const { item } = evt;
+        graph.setItemState(item, "mouseenter", true);
+        // // 获得当前鼠标操作的目标节点
+        // const node = item;
+        // // 获得目标节点的所有相关边
+        // const edges = node.getEdges();
+        // // 将所有相关边的 running 状态置为 true，此时将会触发自定义节点的 setState 函数
+        // edges.forEach((edge) => graph.setItemState(edge, "running", true));
+      });
+      // 鼠标移出节点 node:mouseleave
+      graph.on("node:mouseleave", (evt) => {
+        const { item } = evt;
+        graph.setItemState(item, "mouseenter", false);
+        // // 获得当前鼠标操作的目标节点
+        // const node = item;
+        // // 获得目标节点的所有相关边
+        // const edges = node.getEdges();
+        // // 将所有相关边的 running 状态置为 false，此时将会触发自定义节点的 setState 函数
+        // edges.forEach((edge) => graph.setItemState(edge, "running", false));
+      });
+    },
+    // 获取节点结构数据
+    getGxNameData() {
+      let that = this
+      let url = 'pass/ems/v1/emssecuernodes/findAll';
+      that.axios.post(url)
+        .then(res => {
+          if (res.code === '0') {
+            that.treeData = res.data[0];
+            console.log('datajson', that.treeData[0])
+            that.treeData3();
+          } else {
+            that.$message.error(res.message);
+          }
+        })
+    },
+ // 获取节点结构数据
+ getGxNameData3() {
+      let that = this
+      let url = 'pass/ems/v1/emssecuernodes/findAll';
+      that.axios.post(url)
+        .then(res => {
+          if (res.code === '0') {
+            that.treeData = res.data[0];
+            console.log('datajson', that.treeData[0])
+          } else {
+            that.$message.error(res.message);
+          }
+        })
+    },
+    getGxNameData2(id) {
+      let that = this
+      let url = `pass/ems/v1/emssecuernodes/${id}`;
+      that.axios.get(url)
+        .then(res => {
+          if (res.code === '0') {
+            that.nodeid = res.data.id;
+            that.test();
+          } else {
+            that.$message.error(res.message);
+          }
+        })
+    },
+    //查询是否有文件信息
+    getFileMeg(id) {
+      let that = this
+      let url = `pass/ems/v1/uploadfiles/${id}`;
+      that.axios.get(url)
+        .then(res => {
+          if (res.code === '0') {
+            if (res.fileName) {
+              that.selectFileType = "1";
+            }
+          } else {
+            that.$message.error(res.message);
+          }
+        })
+    },
+    //搜索相关
+    getLabelList(queryString, cb) {
+      var selectLabelList = this.selectLabelList;
+      var results = queryString
+        ? selectLabelList.filter(this.createStateFilter(queryString))
+        : selectLabelList;
+
+      clearTimeout(this.findLabeltimeout);
+      this.findLabeltimeout = setTimeout(() => {
+        cb(results);
+      }, 100);
+    },
+    createStateFilter(queryString) {
+      return (searchLabel) => {
+        return searchLabel.value.toLowerCase().indexOf(queryString.toLowerCase()) != -1;
+      };
+    },
+    handleSelect(item) {
+      // 清空searchLabel
+      this.searchParam.searchItemStatus = "";
+      const node = graph.findById(item.id);
+      graph.focusItem(node, true, {
+        easing: "easeCubic",
+        duration: 500,
+      });
+      graph.translate(0, -200);
+      this.findNodesByModels([item]);
+    },
+    initTree(data) {
+      // 文本超出隐藏 (字段, 最大长度, 字体大小)
+      const fittingString = (str, maxWidth, fontSize) => {
+        const ellipsis = '...';
+        const ellipsisLength = G6.Util.getTextSize(ellipsis, fontSize)[0];
+        let currentWidth = 0;
+        let res = str;
+        const pattern = new RegExp('[\u4E00-\u9FA5]+'); // distinguish the Chinese charactors and letters
+        str.split('').forEach((letter, i) => {
+          if (currentWidth > maxWidth - ellipsisLength) return;
+          if (pattern.test(letter)) {
+            // Chinese charactors
+            currentWidth += fontSize;
+          } else {
+            // get the width of single letter according to the fontSize
+            currentWidth += G6.Util.getLetterWidth(letter, fontSize);
+          }
+          if (currentWidth > maxWidth - ellipsisLength) {
+            res = `${str.substr(0, i)}${ellipsis}`;
+          }
+        });
+        return res;
+      };
+    },
+    findNodesByModels(arr) {
+      // 查询是否有被选中节点,并清除样式
+      if (this.lastSelectedNodeArr) {
+        this.lastSelectedNodeArr.map((val) => {
+          graph.setItemState(val.id, "clicked", false);
+        });
+        this.lastSelectedNodeArr = [];
+      }
+      // arr为空，就不走下面选中逻辑了
+      if (arr) {
+        arr.map((item) => {
+          let findobj = graph.findById(item.id);
+          if (findobj) {
+            // 保存选中节点
+            this.lastSelectedNodeArr.push(findobj.getModel());
+            // 修改选中节点样式
+            graph.setItemState(item.id, "clicked", true);
+          }
+        });
+      }
+    },
+    // 重置条件
+    searchResetFn() {
+      Object.keys(this.searchParam).forEach((key) => {
+        this.searchParam[key] = "";
+      });
+      this.findNodesByModels();
+    },
+    searchFn() {
+      // 清空searchLabel
+      this.searchParam.searchLabel = "";
+      console.log('searchParam', this.searchParam)
+      //搜索状态fn
+      let searchNodes = [];
+      let searchNodeModels = [];
+      //获取选中状态的所有节点
+      searchNodes = graph.findAll("node", (node) => {
+        return node.get("model").itemstatus == this.searchParam.searchItemStatus;
+      });
+      //获取选中状态的所有model
+      searchNodes.forEach((item) => {
+        searchNodeModels.push(item.get("model"));
+      });
+      this.findNodesByModels(searchNodeModels);
+    },
+    isShowTimeinfo() {
+      graph.render();
+      graph.fitView();
+    },
+    isShowItemStatus() {
+      graph.render();
+      graph.fitView();
+    },
+    renameDialog() {
+      this.inputLabel.name = this.itemNode._cfg.model.name;
+      this.renameDialogVisible = true;
+    },
+    dataInfoSubmit() {
+      let that = this;
+      if (this.dataInfoForm.name == "") {
+        Message.error("请输入名称");
+        return;
+      }
+      //add 新建子节点
+      if (!this.dataInfoForm.id) {
+        //this.dataInfoForm.id = `n-${Math.random()}`;
+        this.dataInfoForm.label = this.formatLabel(this.dataInfoForm.name);
+        this.dataInfoForm.itemtype = this.itemNode._cfg.model.itemtype;
+        this.dataInfoForm.itemstatus = 0;
+        this.dataInfoForm.tlevel = this.itemNode._cfg.model.tlevel + 1;
+        this.dataInfoForm.parentid = this.itemNode._cfg.model.id;
+        this.addGxNameData(this.dataInfoForm)
+        const model = this.itemNode.getModel();
+        if (!model.children) {
+          model.children = [];
+        }
+        this.dataInfoForm.id = that.nodeid;
+        console.log('that.nodeid', that.nodeid)
+        model.children.push(this.dataInfoForm);
+        graph.updateChild(model, model.id);
+      } else {
+        //修改节点
+        const model = this.itemNode.getModel();
+        const originStyle = this.itemNode.get("originStyle");
+        let updateModel = {
+          ...model,
+          ...this.dataInfoForm,
+          itemstatus: 0,
+          itemStatusName: "已保存",
+          name: this.dataInfoForm.name,
+        };
+        const nodeItem = graph.findById(model.id);
+        graph.updateItem(nodeItem, updateModel);
+      }
+      this.dataInfoDrawerVisible = false;
+      Message.success("新建成功");
+    },
+    test() {
+      //this.dataInfoForm.id = `n-${Math.random()}`;
+      let that = this;
+      this.dataInfoForm.label = this.formatLabel(this.dataInfoForm.name);
+      this.dataInfoForm.itemtype = this.itemNode._cfg.model.itemtype;
+      this.dataInfoForm.itemstatus = 0;
+      this.dataInfoForm.tlevel = this.itemNode._cfg.model.tlevel + 1;
+      this.dataInfoForm.parentid = this.itemNode._cfg.model.id;
+      const model = this.itemNode.getModel();
+      if (!model.children) {
+        model.children = [];
+      }
+      this.dataInfoForm.id = that.nodeid;
+      console.log('that.nodeid', that.nodeid)
+      model.children.push(this.dataInfoForm);
+      graph.updateChild(model, model.id);
+
+    },
+
+    renameSubmit() {
+      const model = this.itemNode.getModel();
+      const updateModel = {
+        ...model,
+        name: this.inputLabel.name,
+        label: this.formatLabel(this.inputLabel.name),
+      };
+      const updateModel2 = {
+        name: this.inputLabel.name,
+        content : this.inputLabel.content
+      };
+      let id = model.id;
+      this.updateNameData(id, updateModel2);
+      console.log('renanme model', id)
+      this.itemNode.update(updateModel);
+      Message.success("修改成功");
+      this.renameDialogVisible = false;
+    },
+    delSubmit() {
+      this.delDialogVisible = false;
+      const model = this.itemNode.getModel();
+      if (model.depth != 0) {
+        //根节点不能删除，这里写删除访问后台接口逻辑
+        let id = model.id;
+        this.getFileMeg(id);
+        if (this.selectFileType === '1') {
+          this.open1();
+        }
+        this.but_del_plural(id);
+        graph.removeChild(model.id);
+        //停止缩进动画，不加就像收起节点一样，视觉显示错误
+        graph.stopAnimate();
+        Message.success("删除成功");
+      }
+    },
+    updateDatepicker(arr) {
+      //时间更新
+      this.dataInfoForm = {
+        ...this.dataInfoForm,
+        startTime: arr[0],
+        endTime: arr[1],
+      };
+    },
+    downloadImage() {
+      graph.downloadFullImage('tree');
+    },
+    editDialogClose() {
+      this.renameDialogVisible = false;
+    },
+    delDialogClose() {
+      this.renameDialogVisible = false;
+    },
+    dataInfoClose() {
+      this.dataInfoDrawerVisible = false;
+    },
+    //格式化label
+    formatLabel(str) {
+      return str.length > 20 ? str.substr(0, 20) + "..." : str;
+    },
+    // js实现文件下载而不直接打开
+    saveAs(data, fileName) {
+      this.loading = true;
+      let urlObject = window.URL || window.webkitURL || window;
+      // 将二进制流转为blob
+      let exportBlob = new Blob([data]);
+      if (typeof window.navigator.msSaveBlob !== 'undefined') {
+        // 兼容IE，window.navigator.msSaveBlob：以本地方式保存文件
+        window.navigator.msSaveBlob(exportBlob, decodeURI(fileName));
+        this.loading = false;
+      } else {
+        // 创建新的URL并指向File对象或者Blob对象的地址
+        let blobURL = urlObject.createObjectURL(exportBlob);
+        let saveLink = document.createElement('a');
+        // 兼容：某些浏览器不支持HTML5的download属性
+        if (typeof saveLink.download === 'undefined') {
+          saveLink.setAttribute('target', '_blank');
+        } else {
+          saveLink.download = fileName;
+        }
+        // 创建新的URL并指向File对象或者Blob对象的地址
+        saveLink.href = blobURL;
+        saveLink.click();
+        // 释放blob URL地址
+        urlObject.revokeObjectURL(exportBlob);
+        this.loading = false;
+        // let blob = new Blob([data])
+        // let fileURL = urlObject.createObjectURL(blob);
+        // 下载代码
+        // let downEle = document.createElement('a')
+        // let fname = `download` //下载文件的名字
+        // downEle.href = fileURL
+        // downEle.setAttribute('download', fname)
+        // document.body.appendChild(downEle)
+        // downEle.click()
+        // window.open(fileURL);
+      }
+    },
+    // 新增节点结构数据
+    addGxNameData(arr1) {
+      let that = this
+      let url = 'pass/ems/v1/emssecuernodes/';
+      that.axios.post(url, arr1)
+        .then(res => {
+          if (res.code === '0') {
+            let id = res.data.id;
+            that.getGxNameData2(id);
+
+          } else {
+            that.$message.error(res.message);
+          }
+        })
+    },
+    // 更改节点名称
+    updateNameData(arr1, arr2) {
+      let that = this
+      let url = `pass/ems/v1/emssecuernodes/${arr1}`;
+      that.axios.put(url, arr2)
+        .then(res => {
+          if (res.code === '0') {
+
+            console.log('res', res)
+          } else {
+            that.$message.error(res.message);
+          }
+        })
+    },
+      // 更改文件信息
+      updateNameData2(arr1, arr2) {
+      let that = this
+      let url = `pass/ems/v1/emssecuernodes/${arr1}`;
+      that.axios.put(url, arr2)
+        .then(res => {
+          if (res.code === '0') {
+
+            console.log('res', res)
+          } else {
+            that.$message.error(res.message);
+          }
+        })
+    },
+    //删除提示
+    open1() {
+      const h = this.$createElement;
+      this.$notify({
+        title: '删除警告',
+        message: h('i', { style: 'color: teal' }, '该节点存在文件，请确认是否永久删除！！！')
+      });
+    },
+    //上传文件
+    beforeUpload(file) {
+      let that = this;
+      that.uploadloading = true;
+      let foorData = new FormData();
+      foorData.append('file', file.file);
+      foorData.append('id', that.itemNode._cfg.id);
+      foorData.append('name', that.itemNode._cfg.model.label);
+      that.axios.post('pass/ems/v1/uploadfiles/file2', foorData, {
+        headers: {
+          'Content-Type': 'multipart/form-data'
+        }
+      }).then(function (res) {
+        if (res.code === '0') {
+          that.$message({
+            message: '上传成功',
+            type: 'success'
+          });
+          let arr2 = {
+            itemstatus : 200, 
+            itemtype: 200
+          }
+          that.updateNameData2(that.itemNode._cfg.id,arr2);
+          that.uploadloading = false;
+          that.$refs.upload1.clearFiles();
+          location.reload();
+        }
+        else {
+          that.$message.error(res.message);
+          that.$refs.upload1.clearFiles();
+        }
+        that.tableLoading = false;
+        that.uploadloading = false;
+      })
+    },
+    //重新上传文件
+    beforeUpload2(file) {
+      let that = this;
+      that.loading = true;
+      let foorData = new FormData();
+      foorData.append('file', file.file);
+      foorData.append('id', that.itemNode._cfg.id);
+      foorData.append('name', that.itemNode._cfg.model.label);
+      that.del_fileName(that.itemNode._cfg.id);
+      that.axios.post('pass/ems/v1/uploadfiles/file2', foorData, {
+        headers: {
+          'Content-Type': 'multipart/form-data'
+        }
+      }).then(function (res) {
+        if (res.code === '0') {
+          that.$message({
+            message: '修改成功',
+            type: 'success'
+          });
+          that.loading = false;
+          that.$refs.upload2.clearFiles();
+          location.reload()
+        }
+        else {
+          that.$message.error(res.message);
+          that.$refs.upload2.clearFiles();
+        }
+        that.tableLoading = false;
+        that.loading = false;
+      })
+    },
+    // 删除上传的文件
+    del_fileName(id) {
+      let that = this;
+      if (id) {
+        that.axios.delete('pass/ems/v1/uploadfiles/' + id)
+          .then(function (res) {
+            if (res.code === '0') {
+              that.$message({
+                message: '删除成功',
+                type: 'success'
+              });
+            } else {
+              if (res.code === '51') {
+              }
+              that.$message.error(res.message);
+            }
+          }).catch(function () {
+          });
+      }
+    },
+    // 删除节点
+    but_del_plural(val1) {
+      let that = this;
+      if (val1) {
+        that.axios.delete('pass/ems/v1/emssecuernodes/' + val1)
+          .then(function (res) {
+            if (res.code === '0') {
+              that.$message({
+                message: '删除成功',
+                type: 'success'
+              });
+            } else {
+              if (res.code === '51') {
+              }
+              that.$message.error(res.message);
+            }
+          }).catch(function () {
+          });
+      }
+    },
+
+    //预览文件
+    preview(data) {
+      let that = this;
+      that.loading = true;
+      that.chart.fileData = data;
+      let SubmitData = {
+        fileName: data.fileName,
+        fileUrl: data.fileUrl
+      };
+      let urla = 'pass/ems/v1/uploadfiles/getfile/';
+      let type = 'text/html';
+      let responseType = 'application/json';
+      if (data.fileName !== null) {
+        let fileExtension = data.fileName.substring(data.fileName.lastIndexOf('.') + 1);
+        if (fileExtension === 'pdf') {
+          urla = 'pass/ems/v1/uploadfiles/downloadFile/';
+          type = 'application/pdf';
+          responseType = 'blob';
+        }
+        that.axios.get(urla, {
+          params: SubmitData,
+          responseType: responseType
+        }).then(function (res) {
+          console.log('111');
+          let urlObject = window.URL || window.webkitURL || window;
+          // 将二进制流转为blob
+          let blob = new Blob([res], {
+            type: type
+          });
+          if (fileExtension !== 'pdf') {
+            blob = new Blob([res.data], {
+              type: type
+            });
+          }
+          // if (typeof window.navigator.msSaveBlob !== 'undefined') {
+          //   // 兼容IE，window.navigator.msSaveBlob：以本地方式保存文件
+          //   window.navigator.msSaveBlob(blob, decodeURI(fileName))
+          // } else {
+          // 创建新的URL并指向File对象或者Blob对象的地址
+          let blobURL = urlObject.createObjectURL(blob);
+          that.dialogVisible = true;
+          that.previewUrl = blobURL;
+          that.tableLoading = false;
+          that.loading = false;
+          // 'https://file.keking.cn/onlinePreview?url=' + encodeURIComponent(blobURL)
+          // http://view.officeapps.live.com/op/view.aspx?src' + blobURL;
+          // 创建a标签，用于跳转至下载链接
+          // let tempLink = document.createElement('a')
+          // tempLink.style.display = 'none'
+          // tempLink.href = blobURL;
+          // tempLink.setAttribute('download', decodeURI(fileName))
+          // 兼容：某些浏览器不支持HTML5的download属性
+          // if (typeof tempLink.download === 'undefined') {
+          //   tempLink.setAttribute('target', '_blank')
+          // }
+          // // 挂载a标签
+          // document.body.appendChild(tempLink)
+          // tempLink.click()
+          // // 销毁a标签
+          // document.body.removeChild(tempLink)
+          // 释放blob URL地址
+          // urlObject.revokeObjectURL(blobURL);
+          setTimeout(() => {
+            urlObject.revokeObjectURL(blobURL);
+          }, 1000)
+        }).catch(function () {
+          //that.tableLoading = false;
+          that.$message.error('预览失败');
+          that.loading = true;
+        })
+      }
+
+    },
+    //下载文件
+    downloadFile(data) {
+      let that = this;
+      let SubmitData = {
+        fileName: data.fileName,
+        fileUrl: data.fileUrl
+      };
+      // 不带token访问方式，留底后端修改shiroconfig.java,application.properties
+      //     let url = '/icore.icp.web/pass/ems/v1/uploadfiles/downloadFile/?fileName=' + that.tableFormDataObj[key].fileName + '&fileUrl=' + that.tableFormDataObj[key].fileUrl;
+      // const xhr = new XMLHttpRequest();
+      // xhr.open('GET', url, true);
+      // xhr.responseType = 'blob';
+      // xhr.onload = () => {
+      //     if (xhr.status === 200) {
+      //         var fileName = that.tableFormDataObj[key].fileName;
+      //         // 获取文件blob数据并保存
+      //         that.saveAs(xhr.response, fileName);
+      //     }
+      // };
+      // xhr.send();
+      that.loading = true;
+      let urla = 'pass/ems/v1/uploadfiles/downloadFile/';
+      that.axios.get(urla, {
+        params: SubmitData,
+        responseType: 'blob'
+      }).then(function (res) {
+        that.saveAs(res, data.fileName);
+        that.$message({
+          message: '下载成功',
+          type: 'success'
+        });
+        that.loading = false;
+      }).catch(function () {
+        that.$message.error('下载失败');
+        that.loading = false;
+      })
+    },
+    /* tree转化平级数组 */
+    treeToList(tree) {
+      var queen = [];
+      var out = [];
+      queen = queen.concat(tree);
+      while (queen.length) {
+        var first = queen.shift();
+        if (first.children) {
+          queen = queen.concat(first.children);
+          delete first["children"];
+        }
+        out.push(first);
+      }
+      return out;
+    },
+    back() {
+      this.$router.go(-1);
+    },
+    // 浮框样式
+    styleCss() {
+      insertCss(`
+          .g6-component-tooltip {
+            max-width: 600px;
+            max-height: 500px;
+            overflow-y: auto;
+            position: absolute;
+            left: -150px;
+            z-index: 5;
+            border: 1px solid #e2e2e2;
+            border-radius: 4px;
+            font-size: 14px;
+            color: #545454;
+            background-color: rgba(255, 255, 255, 0.9);
+            padding: 10px 8px;
+            box-shadow: rgb(174, 174, 174) 0px 0px 10px;
+            text-align: justify;
+            text-justify: newspaper;
+            word-break: break-all;
+          }
+  
+        .contextmenu__item {
+          display: block;
+          line-height: 34px;
+          text-align: center;
+        }
+        .contextmenu__item:not(:last-child) {
+          border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+        }
+        .g6-component-contextmenu {
+          width: 150px;
+        }
+        .contextmenu__item:hover {
+          cursor: pointer;
+          background: #66b1ff;
+          border-color: #66b1ff;
+          color: #fff;
+        }
+        .tooltip-header{
+          padding:5px;
+          text-align: left;
+          border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+          font-size: 14px;
+        }
+        .tooltip-content{
+          line-height:26px;
+          font-size: 14px;
+          padding:5px;
+          text-align: left;
+        }
+      `);
+    },
+  },
+};
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+.minimap {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+  border: 1px solid #ddd;
+  background-color: #fff;
+}
+
+.container {
+  border: 1px solid #305d91;
+  height: 100%;
+  position: relative;
+  overflow: auto;
+
+  .top {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    height: 50px;
+    background-color: rgb(43, 104, 137);
+    padding: 0 20px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    .cursor {
+      cursor: pointer;
+      font-size: 20px;
+    }
+
+    .el-button {
+      min-width: 70px;
+    }
+  }
+
+  .itemBox {
+    background-color: white;
+    padding: 15px;
+    font-size: 14px;
+
+    .form-item {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      ::v-deep {
+        .el-form-item {
+          padding-bottom: 10px !important;
+        }
+      }
+    }
+
+    span {
+      color: rgba(0, 0, 0, 0.65);
+    }
+  }
+
+  .dataInfoFootDiv {
+    text-align: center;
+    margin-bottom: 20px;
+
+    ::v-deep {
+      .el-button {
+        width: 100px;
+        margin-right: 30px;
+      }
+    }
+  }
+
+  .el-form-item {
+    margin-bottom: 10px;
+  }
+
+  .flex-box {
+    padding-bottom: 15px;
+    border-bottom: 1px solid rgba(151, 151, 151, 0.35);
+
+    .el-row {
+      display: flex;
+      align-items: center;
+      margin-bottom: 15px;
+    }
+
+    .el-col {
+      display: flex;
+      align-items: center;
+    }
+
+    .label {
+      margin-right: 5px;
+    }
+
+    .el-select,
+    .el-input,
+    .el-autocomplete,
+    .el-date-editor {
+      width: 80%;
+    }
+  }
+
+  .canvaBox {
+    height: 100%;
+    position: relative;
+    background: url(../../../../assets/img/img/filebg8.jpg) center bottom no-repeat;
+    background-size: 100% 100%;
+  }
+
+  .whr100 {
+    width: 100%;
+    height: 100%;
+    position: relative;
+  }
+
+  .mt10 {
+    margin-top: 10px;
+  }
+}
+
+::v-deep {
+  .dataInfo-drawer-dialog {
+    :focus {
+      outline: 0;
+    }
+
+    .el-drawer__header {
+      border-bottom: 1px solid rgba(151, 151, 151, 0.35);
+      padding-bottom: 10px;
+      margin-bottom: 10px;
+    }
+
+    .el-drawer__body {
+      padding: 0 5px;
+    }
+  }
+
+  .el-progress-bar__outer,
+  .el-progress-bar__inner {
+    border-radius: 0;
+  }
+
+  .el-date-editor--daterange.el-input__inner {
+    width: 394px;
+  }
+}
+
+.uploader-example {
+  width: 880px;
+  padding: 15px;
+  margin: 40px auto 0;
+  font-size: 12px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, .4);
+}
+
+.uploader-example .uploader-btn {
+  margin-right: 4px;
+}
+
+.uploader-example .uploader-list {
+  max-height: 440px;
+  overflow: auto;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+</style>
+  
+  

src/views/energyOperationSupport/components/securitys/safainfo.vue

@@ -0,0 +1,1661 @@
+<template>
+  <!-- 安全信息 -->
+  <div class="outElectricity">
+    <div class="box">
+      <div class="box-top">
+        <el-form
+          style="overflow: hidden"
+          :style="filterForm.show ? null : { height: '0px' }"
+          size="mini"
+          label-width="75px"
+        >
+          <el-row>
+            <el-col :span="6">
+              <el-form-item label="日期">
+                <zj-timegran-date
+                  v-model="filterForm.data.yearmonth"
+                  style="width: 100%"
+                  :type="'daterange'"
+                  :timegranId="filterForm.data.timegranid"
+
+                  :defaultOffset="-1"
+                  :custom="1"
+                ></zj-timegran-date>
+              </el-form-item>
+            </el-col>
+            <el-col :span="5">
+              <el-form-item label="工序">
+                <el-select
+                  filterable
+                  clearable
+                  v-model="filterForm.data.process"
+                  placeholder="工序"
+                  multiple
+                  collapse-tags
+                  style="width: 100%"
+                >
+                  <el-option
+                    v-for="item of nameObj.process.arr"
+                    :key="item.id"
+                    :value="item.id"
+                    :label="item.name"
+                  ></el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="5">
+              <el-form-item label="类型">
+                <el-select
+                  filterable
+                  clearable
+                  v-model="filterForm.data.type"
+                  multiple
+                  collapse-tags
+                  placeholder="类型"
+                  style="width: 100%"
+                >
+                  <el-option
+                    v-for="item of nameObj.itemtype.arr"
+                    :key="item.id"
+                    :value="item.id"
+                    :label="item.name"
+                  ></el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="5"> </el-col>
+            <el-col :span="5"> </el-col>
+          </el-row>
+        </el-form>
+        <div class="box-top-gjl">
+          <el-form size="mini" label-width="75px">
+            <el-row>
+              <el-col :span="16">
+                <el-button
+                  class="button"
+                  type="primary"
+                  size="mini"
+                  icon="el-icon-plus"
+                  @click="but_add"
+                  :loading="loading"
+                  >新增</el-button
+                >
+                <el-button
+                  class="button"
+                  type="danger"
+                  size="mini"
+                  icon="el-icon-delete"
+                  v-if="butPrivilege.PUT"
+                  @click="but_del_plural()"
+                  :loading="loading"
+                  >删除</el-button
+                >
+                <el-upload
+                  ref="upload"
+                  style="display: inline-block; margin-left: 5px"
+                  action="#"
+                  :before-upload="beforeUpload"
+                  type="primary"
+                  :http-request="beforeUpload"
+                  :on-change="uploadExcel"
+                  :show-file-list="false"
+                  :file-list="fileList"
+                  :limit="limitUpload"
+                  accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
+                  :auto-upload="false"
+                >
+                  <el-button
+                    type="primary"
+                    size="mini"
+                    icon="el-icon-bottom-right"
+                    >Excel导入</el-button
+                  >
+                </el-upload>
+                <el-button
+                  class="button"
+                  type="primary"
+                  size="mini"
+                  icon="el-icon-download"
+                  v-if="butPrivilege.PUT"
+                  @click="downloadFile()"
+                  :loading="loading"
+                  >下载模板</el-button
+                >
+              </el-col>
+
+              <el-col :span="8">
+                <div style="float: right; text-align: right">
+                  <el-button
+                    class="button"
+                    type="primary"
+                    size="mini"
+                    icon="el-icon-search"
+                    v-if="butPrivilege.QUERY"
+                    @click="getTableData(1)"
+                    >查询</el-button
+                  >
+                  <el-button
+                    class="button"
+                    type="success"
+                    size="mini"
+                    icon="el-icon-download"
+                    @click="dowloadFile()"
+                    :loading="loading"
+                    >导出数据</el-button
+                  >
+                  <el-button
+                    size="mini"
+                    :icon="
+                      filterForm.show
+                        ? 'el-icon-caret-top'
+                        : 'el-icon-caret-bottom'
+                    "
+                    :title="filterForm.show ? '收起搜索区' : '展开搜索区'"
+                    @click="
+                      filterForm.show = !filterForm.show;
+                      $nextTick(() => {
+                        singleTableHeight =
+                          getRoleHeight($refs['singleTable'].$el) - 45;
+                      });
+                    "
+                    >{{ filterForm.show ? "收起" : "展开" }}</el-button
+                  >
+                </div>
+              </el-col>
+            </el-row>
+          </el-form>
+        </div>
+      </div>
+      <div class="box-bottom">
+        <el-form
+          size="mini"
+          ref="dialog_form_arr"
+          label-width="0px"
+          :model="tableFormDataObj"
+        >
+          <el-table
+            stripe
+            id="singleTable"
+            ref="singleTable"
+            :data="tableData"
+            v-loading="tableLoading"
+            style="width: 100%"
+            :height="singleTableHeight"
+            border
+            size="mini"
+            highlight-current-row
+            @selection-change="handleSelectionChange"
+            :row-class-name="tableRowClassName"
+            @cell-click="cellClick"
+          >
+            <el-table-column
+              type="selection"
+              width="40"
+              align="center"
+              fixed="left"
+              class-name="cnspicuous"
+            ></el-table-column>
+            <el-table-column
+              sortable
+              type="index"
+              prop="index"
+              label="序号"
+              fixed="left"
+              width="50px"
+              :show-overflow-tooltip="true"
+            ></el-table-column>
+            <el-table-column
+              prop="dates"
+              label="日期"
+              fixed="left"
+              width="80px"
+              :show-overflow-tooltip="true"
+            ></el-table-column>
+            <el-table-column prop="type" label="类型" fixed="left" width="80px">
+              <template slot-scope="scope">
+                <span>{{
+                  nameObj.itemtype.obj[scope.row.type]
+                    ? nameObj.itemtype.obj[scope.row.type]
+                    : scope.row.type
+                }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column
+              prop="process"
+              label="地点"
+              width="100px"
+              :show-overflow-tooltip="true"
+            ></el-table-column>
+            <el-table-column
+              prop="id"
+              label="ID"
+              width="130px"
+              :show-overflow-tooltip="true"
+            ></el-table-column>
+            <el-table-column
+              prop="content"
+              label="内容"
+              width="300px"
+              :show-overflow-tooltip="true"
+            >
+            </el-table-column>
+            <el-table-column
+              prop="createtime"
+              label="创建时间"
+              width="160px"
+              :show-overflow-tooltip="true"
+            ></el-table-column>
+            <el-table-column
+              prop="createman"
+              label="创建人"
+              width="80px"
+              :show-overflow-tooltip="true"
+            ></el-table-column>
+            <el-table-column
+              prop="updatetime"
+              label="修改时间"
+              width="160px"
+              :show-overflow-tooltip="true"
+            >
+            </el-table-column>
+            <el-table-column
+              prop="updateman"
+              label="修改人"
+              width="80px"
+              :show-overflow-tooltip="true"
+            ></el-table-column>
+            <el-table-column
+              prop="memo"
+              label="备注"
+              width="280px"
+              :show-overflow-tooltip="true"
+            >
+            </el-table-column>
+            <el-table-column
+              class-name="gn-TableDownloadExcel-none"
+              label="操作"
+              align="center"
+              width="150px"
+              fixed="right"
+            >
+              <template slot-scope="scope">
+                <div>
+                  <el-button
+                    type="primary"
+                    size="mini"
+                    v-privilege="activeMenu + 'PUT'"
+                    @click="but_edita(scope.row)"
+                    >查看</el-button
+                  >
+                  <el-button
+                    size="mini"
+                    type="primary"
+                    @click="but_editaa(scope.row)"
+                    :loading="loading"
+                    >编辑
+                  </el-button>
+                </div>
+              </template>
+            </el-table-column>
+
+            <el-table-column
+              prop="id"
+              label="ID"
+              width="140px"
+              v-if="filterForm.data.show"
+            ></el-table-column>
+          </el-table>
+        </el-form>
+        <el-pagination
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="total"
+          :page-sizes="[10, 20, 50, 100, 500, 1000]"
+          :page-size="pageSize"
+          :current-page.sync="pageNum"
+          @size-change="tableSizeChange"
+          @current-change="getTableData()"
+          style="text-align: right; margin-top: 10px"
+        ></el-pagination>
+      </div>
+    </div>
+    <el-dialog
+      title="安全信息新增"
+      :visible.sync="dialog.editorBox1.show"
+      width="600px"
+      :close-on-click-modal="false"
+      :show-close="!loading"
+    >
+      <div>
+        <el-form
+          :model="dialog.editorBox.form.data"
+          ref="dialog_form"
+          size="mini"
+          label-width="95px"
+          :rules="dialog.editorBox.form.rules"
+        >
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="工序" prop="process">
+                <el-select
+                  placeholder=""
+                  prop="process"
+                  v-model="dialog.editorBox.form.data.process"
+                  style="width: 100%"
+                  :rules="dialog.editorBox.form.process"
+                >
+                  <el-option
+                    v-for="item of nameObj.process.arr"
+                    :key="item.id"
+                    :value="item.name"
+                    :label="item.name"
+                  ></el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="日期" prop="yearmonth">
+                <zj-timegran-date
+                  v-model="dialog.editorBox.form.data.yearmonth"
+                  style="width: 100%"
+                  :timegranId="'DAY'"
+                  :rules="dialog.editorBox.form.yearmonth"
+                ></zj-timegran-date>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="类型" prop="type">
+                <el-select
+                  filterable
+                  clearable
+                  v-model="dialog.editorBox.form.data.type"
+                  collapse-tags
+                  placeholder="类型"
+                  style="width: 100%"
+                  :rules="dialog.editorBox.form.type"
+                >
+                  <el-option
+                    v-for="item of nameObj.itemtype.arr"
+                    :key="item.id"
+                    :value="item.name"
+                    :label="item.name"
+                  >
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="备注" prop="meno">
+                <el-input
+                  clearable
+                  v-model="dialog.editorBox.form.data.memo"
+                  style="width: 100%"
+                >
+                </el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="内容" prop="content">
+                <el-input
+                  clearable
+                  v-model="dialog.editorBox.form.data.content"
+                  style="width: 100%"
+                  :rules="dialog.editorBox.form.content"
+                >
+                </el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button :loading="loading" @click="dialog.editorBox.show = false"
+          >取 消</el-button
+        >
+        <el-button type="primary" @click="dataSave" :loading="loading"
+          >保 存</el-button
+        >
+      </span>
+    </el-dialog>
+    <el-dialog
+      :title="
+        '安全信息清单 - ' + (dialog.editorBox.type === 'add' ? '查看' : '编辑')
+      "
+      :visible.sync="dialog.editorBox.show"
+      width="940px"
+      :close-on-click-modal="false"
+      :show-close="!loading"
+    >
+      <div>
+        <el-form
+          ref="dialog_form"
+          :model="dialog.editorBox.form.data"
+          :rules="dialog.editorBox.form.rules"
+          size="mini"
+          label-width="120px"
+        >
+          <el-row>
+            <el-col :span="8">
+              <el-form-item label="ID" prop="id">
+                <el-input
+                  clearable
+                  v-model="dialog.editorBox.form.data.id"
+                  placeholder=""
+                  style="width: 100%"
+                  disabled
+                ></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="日期" prop="yearmonth">
+                <el-date-picker
+                  v-model="dialog.editorBox.form.data.yearmonth"
+                  type="date"
+                  :disabled="none"
+                  placeholder="选择日期"
+                  value-format="yyyy-MM-dd"
+                  format="yyyy-MM-dd"
+                  :formatter="yearmonth"
+                  style="width: 100%"
+                >
+                </el-date-picker>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="申请负责人" prop="createman">
+                <el-input
+                  clearable
+                  v-model="dialog.editorBox.form.data.createman"
+                  placeholder=""
+                  style="width: 100%"
+                  :disabled="none"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="8">
+              <el-form-item label="工序" prop="process">
+                <el-select
+                  filterable
+                  clearable
+                  v-model="dialog.editorBox.form.data.process"
+                  collapse-tags
+                  placeholder="类型"
+                  :disabled="none"
+                  style="width: 100%"
+                >
+                  <el-option
+                    v-for="item of nameObj.process.arr"
+                    :key="item.id"
+                    :value="item.id"
+                    :label="item.name"
+                  >
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="类型" prop="type">
+                <el-select
+                  filterable
+                  clearable
+                  v-model="dialog.editorBox.form.data.type"
+                  collapse-tags
+                  placeholder="类型"
+                  :disabled="none"
+                  style="width: 100%"
+                >
+                  <el-option
+                    v-for="item of nameObj.itemtype.arr"
+                    :key="item.id"
+                    :value="item.id"
+                    :label="item.name"
+                  >
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-container>
+            <el-main style="padding: 0">
+              <el-form-item label="安全内容" prop="content">
+                <el-input
+                  clearable
+                  :disabled="none"
+                  class="nr-textarea"
+                  type="textarea"
+                  v-model="dialog.editorBox.form.data.content"
+                  placeholder=""
+                  style="width: 100%"
+                ></el-input>
+              </el-form-item>
+            </el-main>
+          </el-container>
+          <el-form-item label="备注" prop="memo">
+            <el-input
+              clearable
+              type="textarea"
+              :disabled="none"
+              v-model="dialog.editorBox.form.data.memo"
+              placeholder=""
+              style="width: 100%"
+            ></el-input>
+          </el-form-item>
+        </el-form>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="but_edita2()">{{
+          buttontype ? "确认" : "提交"
+        }}</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { zCheckNumber1 } from "~/utils/validator.js";
+import timegranDate from "~/components/zg/timegranDate.vue";
+import { formatDate, XtcommonSummaries, getCookie } from "@/utils/util.js";
+export default {
+  name: "outElectricity",
+  components: {
+    "zj-timegran-date": timegranDate,
+  },
+  data() {
+    let setDate = new Date();
+    setDate.setDate(15);
+    setDate.setMonth(setDate.getMonth() - 1);
+    return {
+      fileList: [], //上传的文件列表, 例如: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}]
+      limitUpload: 100, //允许上传次数（不刷新页面情况下）
+      userInfo: {
+        data: null,
+      },
+      buttontype: true,
+      none: true,
+      rowIndex: "",
+      columnId: "",
+      focusTarget: null,
+      seqArr: [],
+      editSetFlag: "",
+      filterForm: {
+        show: true,
+        data: {
+          yearmonth: "", //日期
+          type: "", //类型
+          process: "", //工序
+          clock: "",
+          clockc: "",
+          workprocid: [],
+          location: [],
+          networkid: [],
+          state: "",
+          itemname: "",
+          searchtype: "0",
+          measureid: "",
+          line: "",
+          unit: "",
+          weight: "",
+          cjr: "",
+          xgr: "",
+          xgsj: "",
+          memo: "",
+          cp: "",
+          sysl: "",
+          wxsy: "",
+          parentid: "LG",
+          cjsj: "",
+          jzsj: "",
+          zt: "",
+          show: false,
+        },
+        rules: {},
+        disabled: {
+          networkid: false,
+        },
+      },
+      pageNum: 1,
+      pageSize: 100,
+      total: 0,
+      singleTableHeight: 100,
+      tableData: [],
+      originalData: [],
+      loading: false,
+      tableLoading: false,
+      multipleSelection: [],
+      tableFormDataObj: {},
+      tableFormRules: {
+        mintvalue: [
+          // { required: true, message: '该项不能为空', trigger: 'change' },
+          { validator: zCheckNumber1, trigger: "change" },
+        ],
+        mendvalue: [
+          // { required: true, message: '该项不能为空', trigger: 'change' },
+          { validator: zCheckNumber1, trigger: "change" },
+        ],
+        weight: [
+          { required: true, message: "该项不能为空", trigger: "change" },
+        ],
+        wastage: [{ validator: zCheckNumber1, trigger: "change" }],
+        secondVal: [{ validator: zCheckNumber1, trigger: "change" }],
+        type: [{ required: true, message: "该项不能为空", trigger: "change" }],
+      },
+      nameObj: {
+        itemtype: {
+          obj: {
+            AUTO: "生产安全",
+            MANUAL: "意外安全",
+            VIRTUAL: "人身安全",
+          },
+          arr: [
+            {
+              id: "AUTO",
+              name: "生产安全",
+            },
+            {
+              id: "MANUAL",
+              name: "意外安全",
+            },
+            {
+              id: "VIRTUAL",
+              name: "人身安全",
+            },
+          ],
+        },
+        state: {
+          obj: {
+            0: {
+              name: "未编辑",
+              color: "#7a7a7a",
+            },
+            1: {
+              name: "已编辑",
+              color: "rgb(28, 111, 217)",
+            },
+            2: {
+              name: "已审核",
+              color: "red",
+            },
+            3: {
+              name: "已接收",
+              color: "red",
+            },
+          },
+          arr: [
+            {
+              id: "0",
+              name: "未编辑",
+            },
+            {
+              id: "1",
+              name: "已编辑",
+            },
+            {
+              id: "2",
+              name: "已审核",
+            },
+            {
+              name: "已接收",
+              color: "red",
+            },
+          ],
+        },
+        type: {
+          obj: {
+            0: "否",
+            1: "是",
+          },
+          arr: [
+            {
+              id: "0",
+              name: "否",
+            },
+            {
+              id: "1",
+              name: "是",
+            },
+          ],
+        },
+        unitid: {
+          obj: {},
+          arr: [],
+        },
+        process: {
+          obj: {},
+          arr: [],
+        },
+        line: {
+          obj: {
+            "AT2005-1": {
+              id: "AT2005-1",
+              name: "供高线一车间",
+            },
+            "AT2006-1": {
+              id: "AT2006-1",
+              name: "供高线二车间",
+            },
+            "AT2007-1": {
+              id: "AT2007-1",
+              name: "供型钢厂异形坯",
+            },
+            "AT3008-1": {
+              id: "AT3008-1",
+              name: "外销方坯",
+            },
+          },
+          arr: [
+            {
+              id: "AT2005-1",
+              name: "供高线一车间",
+            },
+            {
+              id: "AT2006-1",
+              name: "供高线二车间",
+            },
+            {
+              id: "AT2007-1",
+              name: "供型钢厂异形坯",
+            },
+            {
+              id: "AT3008-1",
+              name: "外销方坯",
+            },
+          ],
+        },
+        location: {
+          obj: {},
+          arr: [],
+          showDataArr: [],
+        },
+        locateid: {
+          obj: {},
+          arr: [],
+        },
+        networkid: {
+          obj: {},
+          arr: [],
+        },
+        userId: {
+          obj: {},
+          arr: [],
+        },
+      },
+      dialog: {
+        fRow: null,
+        editorBox1: {
+          show: false,
+        },
+        editorBox: {
+          show: false,
+          type: "",
+          form: {
+            default: {
+              workprocid: "",
+            },
+            data: {
+              process: "", //工序
+              yearmonth: "", //日期
+              weight: "",
+              memo: "", //备注
+              type: "", //类型
+              content: "", //内容
+              createman: "", //创建人
+              id: "",
+              updateman: "", //修改人
+            },
+            rules: {
+              content: [
+                { required: true, message: "该项不能为空", trigger: "change" },
+              ],
+              yearmonth: [
+                { required: true, message: "该项不能为空", trigger: "change" },
+              ],
+              process: [
+                { required: true, message: "该项不能为空", trigger: "change" },
+              ],
+              type: [
+                { required: true, message: "该项不能为空", trigger: "change" },
+              ],
+            },
+          },
+        },
+        editorBox2: {
+          show: false,
+          type: "",
+          form: {
+            data: {
+              yearmonth: "",
+            },
+            rules: {
+              yearmonth: [
+                { required: true, message: "该项不能为空", trigger: "change" },
+              ],
+            },
+          },
+        },
+      },
+      butPrivilege: {
+        QUERY: false,
+        PUT: false,
+        CHECK: false,
+        UNDOCHECK: false,
+        IMPORT: false,
+      },
+      loginName: getCookie("loginName"),
+    };
+  },
+  created() {
+    // 获取按钮权限
+    this.activeMenu = window.localStorage.getItem("activeMenu");
+    for (let key in this.butPrivilege) {
+      this.butPrivilege[key] = this.checkPrivilege(this.activeMenu + key);
+    }
+  },
+  mounted() {
+    let that = this;
+    window.PEDataObj = {
+      // 将数据绑定到window上，供main页面使用
+      vm: that,
+      // tableArr：用于导出成Excel的表格的信息
+      tableArr: [
+        {
+          name: "",
+          id: "singleTable",
+        },
+      ],
+    };
+    that.$nextTick(() => {
+      // 立即获取的height有一定偏差，通过setTimeout延迟来解决
+      setTimeout(() => {
+        that.singleTableHeight =
+          that.getRoleHeight(that.$refs["singleTable"].$el) - 45;
+      }, 1);
+    });
+    // 接收路由参数
+    if (that.$route.query.networkid) {
+      that.filterForm.disabled.networkid = true;
+      that.filterForm.data.networkid = that.$route.query.networkid.split(",");
+    }
+    that.getworkprocidData();
+    that.getTableData(1);
+  },
+  methods: {
+    //上传前校验
+    uploadOk(file) {
+      // 文件类型
+      console.log(`上传前校验---`, file);
+      const isType = file.type === "application/vnd.ms-excel";
+      const isTypeComputer =
+        file.type ===
+        "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
+      const fileType = isType || isTypeComputer;
+      if (!fileType) {
+        this.$message.error("上传文件只能是xls/xlsx格式！");
+      }
+      // 文件大小限制为20M
+      const fileLimit = file.size / 1024 / 1024 < 20;
+      if (!fileLimit) {
+        this.$message.error("上传文件大小不超过20M！");
+      }
+      return fileType && fileLimit;
+    },
+    // excel表上传
+    uploadExcel(file, fileList) {
+      const fileTemp = file.raw;
+      const fileName = file.raw.name;
+      const fileType = fileName.substring(fileName.lastIndexOf(".") + 1);
+      // 判断上传文件格式
+      if (fileTemp) {
+        if (fileType === "xlsx" || fileType === "xls") {
+          const formData = new FormData(); //这一步不能变
+          formData.append("fileName", fileName);
+          formData.append("file", file.raw);
+          this.axios
+            .post("pass/ems/v1/emssafeinfos/insertExcel/", formData, {
+              headers: { "Content-Type": "multipart/form-data" },
+            })
+            .then((res) => {
+              if (res.code === 200) {
+                this.$message({
+                  message: "数据导入成功",
+                  type: "success",
+                });
+              } else {
+                this.$message({
+                  message: "数据导入失败",
+                  type: "warning",
+                });
+              }
+            });
+        } else {
+          this.$message({
+            type: "warning",
+            message: "附件格式错误，请重新上传！",
+          });
+        }
+      } else {
+        this.$message({
+          type: "warning",
+          message: "请上传附件！",
+        });
+      }
+    },
+
+    funcShowAllCameras() {
+      let that = this;
+      that.buttontype = false;
+    },
+
+    but_edita(row) {
+      let that = this;
+      that.dialog.editorBox.type = "add";
+      that.none = true;
+      for (let key in that.dialog.editorBox.form.data) {
+        if (typeof row[key] !== "undefined") {
+          that.dialog.editorBox.form.data[key] = row[key];
+        } else {
+          console.log("key:" + key);
+        }
+      }
+      //   if (row.filename) {
+      //     let fn = (row.filename + "").trim().split(";");
+      //     if (fn && fn.length > 0) {
+      //       let declareid = row.declareid;
+      //       for (let i = 0; i < fn.length; i++) {
+      //         if (fn[i]) {
+      //           let fname = {
+      //             name: fn[i],
+      //             url:
+      //               "/icore.icp.web/pass/ems/static/" + declareid + "/" + fn[i],
+      //             file: null,
+      //             operation: "",
+      //           };
+      //           that.dialog.editorBox.files.push(fname);
+      //         }
+      //       }
+      //     }
+      //   }
+      that.dialog.editorBox.show = true;
+    },
+    but_editaa(row) {
+      let that = this;
+      that.dialog.editorBox.type = "PUT";
+      that.none = false;
+      for (let key in that.dialog.editorBox.form.data) {
+        if (typeof row[key] !== "undefined") {
+          that.dialog.editorBox.form.data[key] = row[key];
+        } else {
+          console.log("key:" + key);
+        }
+      }
+      //   if (row.filename) {
+      //     let fn = (row.filename + "").trim().split(";");
+      //     if (fn && fn.length > 0) {
+      //       let declareid = row.declareid;
+      //       for (let i = 0; i < fn.length; i++) {
+      //         if (fn[i]) {
+      //           let fname = {
+      //             name: fn[i],
+      //             url:
+      //               "/icore.icp.web/pass/ems/static/" + declareid + "/" + fn[i],
+      //             file: null,
+      //             operation: "",
+      //           };
+      //           that.dialog.editorBox.files.push(fname);
+      //         }
+      //       }
+      //     }
+      //   }
+      that.dialog.editorBox.show = true;
+    },
+    // 修改
+    but_edita2() {
+      let that = this;
+      let id = that.dialog.editorBox.form.data.id;
+
+      let parmas = {
+        dates: that.dialog.editorBox.form.data.yearmonth,
+        type: that.dialog.editorBox.form.data.type,
+        process: that.dialog.editorBox.form.data.process,
+        memo: that.dialog.editorBox.form.data.memo,
+        content: that.dialog.editorBox.form.data.content,
+      };
+
+      that.loading = true;
+      that.axios
+        .put(`pass/ems/v1/emssafeinfos/${id}`, parmas)
+        .then(function (res) {
+          if (res.code === "0") {
+            let msg = res.message;
+            if (!msg || msg === "操作成功") {
+              that.$message({
+                message: "操作成功",
+                type: "success",
+              });
+            } else {
+              that.$message.warning("修改成功，注意：" + msg);
+            }
+            that.dialog.editorBox.show = false;
+            that.getTableData(1);
+          } else {
+            that.$message.error(res.message);
+          }
+          that.loading = false;
+        })
+        .catch(function () {
+          that.loading = false;
+        });
+    },
+    getworkprocidData() {
+      let that = this;
+      let url = "pass/ems/v1/trmworkprocs/getIdAndName";
+      that.axios.get(url).then(function (res) {
+        if (res.code === "0") {
+          let arr = [];
+          let obj = {};
+          for (let item of res.data) {
+            arr.push({
+              id: item.id,
+              name: item.name,
+            });
+            obj[item.id] = item.name;
+          }
+          that.nameObj.process.arr = arr;
+          that.nameObj.process.obj = obj;
+        } else {
+          that.$message.error(res.message);
+        }
+      });
+    },
+    //  计算树区域高度
+    getRoleHeight(dom) {
+      return window.innerHeight - dom.offsetTop;
+    },
+    // 获取工序列表
+    // getNodeData () {
+    //     let that = this
+    //     let url = 'pass/ems/v1/trmworkprocs/getIdAndName?issettle=1';
+    //     that.axios.get(url)
+    //         .then(function (res) {
+    //             if (res.code === '0') {
+    //                 let arr = [];
+    //                 let obj = {};
+    //                 for (let item of res.data) {
+    //                     arr.push({
+    //                         id: item.id,
+    //                         name: item.name
+    //                     })
+    //                     obj[item.id] = item.name;
+    //                 }
+    //                 that.nameObj.workprocid.arr = arr;
+    //                 that.nameObj.workprocid.obj = obj;
+    //                 that.connn();
+    //             } else {
+    //                 that.$message.error(res.message);
+    //             }
+    //         });
+    // },
+    getUnitIdData() {
+      let that = this;
+      let url = "pass/ems/v1/trmunits/getIdAndName";
+      that.axios.get(url).then(function (res) {
+        if (res.code === "0") {
+          let arr = [];
+          let obj = {};
+          for (let item of res.data) {
+            arr.push({
+              id: item.id,
+              name: item.name,
+            });
+            obj[item.id] = item.name;
+            if (item.name === "吨") {
+              that.nameObj.unitid.defaults = that.nameObj.unitid.defaults
+                ? that.nameObj.unitid.defaults
+                : item.id;
+            }
+          }
+          that.nameObj.unitid.arr = arr;
+          that.nameObj.unitid.obj = obj;
+        } else {
+          that.$message.error(res.message);
+        }
+      });
+    },
+    // 获取位置
+    getLocateIdData() {
+      let that = this;
+      let url = "pass/ems/v1/trmlocations/getidandname/";
+      that.axios.get(url).then(function (res) {
+        if (res.code === "0") {
+          let arr = [];
+          let obj = {};
+          for (let item of res.data) {
+            arr.push({
+              id: item.id,
+              name: item.name,
+            });
+            obj[item.id] = item.name;
+          }
+          that.nameObj.locateid.arr = arr;
+          that.nameObj.locateid.obj = obj;
+        } else {
+          that.$message.error(res.message);
+        }
+      });
+    },
+    // 获取表格中的数据
+    getTableData(pageNum) {
+      let that = this,
+        params = {},
+        pData = {
+          dates: that.filterForm.data.yearmonth[0],
+          dates2: that.filterForm.data.yearmonth[1],
+          type: that.filterForm.data.type.toString(),
+          process: that.filterForm.data.process,
+        };
+      for (let key in pData) {
+        if (pData[key]) {
+          params[key] = pData[key];
+        }
+      }
+      that.pageNum = pageNum || that.pageNum;
+      that.tableLoading = true;
+      let url =
+        "pass/ems/v1/emssafeinfos/?pageNum=" +
+        that.pageNum +
+        "&pageSize=" +
+        that.pageSize;
+      that.axios
+        .get(url, {
+          params: params,
+        })
+        .then(function (res) {
+          if (res.code === "0") {
+            let arr = [];
+            for (let e of res.data.list) {
+              arr.push({
+                content: e.content,
+                createman: e.createman,
+                createtime: e.createtime,
+                dates: e.dates,
+                filename: e.filename,
+                memo: e.memo,
+                process: e.process,
+                type: e.type,
+                updateman: e.updateman,
+                updatetime: e.updatetime,
+                id: e.id,
+              });
+            }
+            that.total = res.data.total;
+            that.tableData = arr;
+            that.originalData = arr;
+          } else {
+            that.$message.error(res.message);
+          }
+          that.$nextTick(() => {
+            setTimeout(() => {
+              that.singleTableHeight =
+                that.getRoleHeight(that.$refs["singleTable"].$el) - 46;
+            }, 1);
+          });
+          that.tableLoading = false;
+        })
+        .catch(function () {
+          that.tableLoading = false;
+        });
+    },
+    // 改变表格显示条数
+    tableSizeChange(val) {
+      let that = this;
+      that.pageSize = val;
+      that.getTableData(1);
+    },
+    // 重置搜索
+    tableDataCancel() {
+      let that = this;
+      for (let key in that.filterForm.data) {
+        if (!that.filterForm.disabled || !that.filterForm.disabled[key]) {
+          if (that.filterForm.data[key] instanceof Array) {
+            that.filterForm.data[key] = [];
+          } else {
+            that.filterForm.data[key] = "";
+          }
+        }
+      }
+      that.getTableData(1);
+    },
+    keyDown(event1, disabledFlag) {
+      let tdTarget = event1.target;
+      let _this = this;
+      while (tdTarget.tagName !== "TD") {
+        tdTarget = tdTarget.parentElement;
+      }
+      // 如果按下键盘下键或者回车键
+      if (event.keyCode === 40 || event.keyCode === 13) {
+        let index = parseInt(this.rowIndex);
+        // index++;
+        if (index !== this.seqArr[this.seqArr.length - 1]) {
+          for (let i = 0; i < this.seqArr.length; i++) {
+            if (index === this.seqArr[i]) {
+              index = this.seqArr[i + 1];
+              break;
+            }
+          }
+        }
+        this.editSetFlag = index + this.columnId;
+        let id = "#" + this.editSetFlag;
+        this.$nextTick(() => {
+          $(id).click();
+        });
+      } else if (event.keyCode === 38) {
+        // 键盘上键
+        let index = parseInt(this.rowIndex);
+        if (index !== this.seqArr[0]) {
+          for (let i = 0; i < this.seqArr.length; i++) {
+            if (index === this.seqArr[i]) {
+              index = this.seqArr[i - 1];
+              break;
+            }
+          }
+        }
+        this.editSetFlag = index + this.columnId;
+        let id = "#" + this.editSetFlag;
+        this.$nextTick(() => {
+          $(id).click();
+        });
+      } else if (event.keyCode === 37) {
+        // 键盘左键
+        $(tdTarget).prevAll().find("input:text").last().click();
+      } else if (event.keyCode === 39) {
+        // 键盘右键
+        $(tdTarget).nextAll().find("input").eq(0).click();
+      }
+    },
+    handleSelectionChange(val) {
+      let that = this;
+      let tableFormDataObj = {};
+      for (let item of that.tableData) {
+        item.isSelection = false;
+      }
+      for (let item of val) {
+        let obj = {};
+        let xId = item.itemid + "-" + item.clock + "-" + item.timegranid;
+        if (that.tableFormDataObj[xId]) {
+          tableFormDataObj[xId] = that.tableFormDataObj[xId];
+        } else {
+          for (let key in item) {
+            obj[key] = item[key];
+          }
+          tableFormDataObj[xId] = obj;
+        }
+        item.isSelection = true;
+      }
+      that.tableFormDataObj = tableFormDataObj;
+      that.multipleSelection = val;
+    },
+    //新增
+    dataSave() {
+      let that = this;
+      let SubmitData = {
+        dates: that.dialog.editorBox.form.data.yearmonth,
+        type: that.dialog.editorBox.form.data.type,
+        process: that.dialog.editorBox.form.data.process,
+        memo: that.dialog.editorBox.form.data.memo,
+        content: that.dialog.editorBox.form.data.content,
+        id: that.dialog.editorBox.form.data.id,
+      };
+      console.log("SubmitData", SubmitData);
+      that.$refs["dialog_form"].validate((valid) => {
+        if (valid) {
+          that.loading = true;
+          that.axios
+            .post("pass/ems/v1/emssafeinfos/", SubmitData)
+            .then(function (res) {
+              if (res.code === "0") {
+                that.$message({
+                  message: "新增成功",
+                  type: "success",
+                });
+                that.getTableData();
+                that.dialog.editorBox1.show = false;
+              } else {
+                that.$message.error(res.message);
+              }
+              that.loading = false;
+            })
+            .catch(function () {
+              that.loading = false;
+            });
+        }
+      });
+    },
+    // 批量删除
+    but_del_plural() {
+      let that = this;
+      if (this.multipleSelection.length > 0) {
+        let id = "";
+        for (let item of this.multipleSelection) {
+          id += item.id + ",";
+        }
+        that
+          .$confirm("是否删除已选数据?", "提示", {
+            confirmButtonText: "确定",
+            cancelButtonText: "取消",
+            state: "warning",
+          })
+          .then(() => {
+            that.axios
+              .delete(`pass/ems/v1/emssafeinfos/${id}`)
+              .then(function (res) {
+                if (res.code === "0") {
+                  that.$message({
+                    message: "删除成功",
+                    type: "success",
+                  });
+                  that.getTableData();
+                } else {
+                  that.$message.error(res.message);
+                }
+              })
+              .catch(function () {});
+          })
+          .catch(() => {});
+      } else {
+        this.$message.error("至少要选择一条数据");
+      }
+    },
+    upState(state = "2") {
+      let that = this;
+      let dataArr = [];
+      for (let item of that.multipleSelection) {
+        if (item.state !== state) {
+          dataArr.push(item);
+        }
+      }
+      if (dataArr.length > 0) {
+        that
+          .$confirm(
+            "本次将要" +
+              (state === "2" ? "审核" : "撤销审核") +
+              dataArr.length +
+              "条数据，是否确定?",
+            "提示",
+            {
+              confirmButtonText: "确定",
+              cancelButtonText: "取消",
+              state: "warning",
+            }
+          )
+          .then(() => {
+            let SubmitData = [];
+            for (let item of dataArr) {
+              SubmitData.push({
+                state: state,
+                id: item.id,
+              });
+            }
+            that.loading = true;
+            that.axios
+              .put("pass/ems/v1/trmtransfereactvalues/batchcheck2", SubmitData)
+              .then(function (res) {
+                if (res.code === "0") {
+                  that.$message({
+                    message: (state === "2" ? "审核" : "撤销") + "成功",
+                    type: "success",
+                  });
+                  that.getTableData();
+                } else {
+                  that.$message.error(res.message);
+                }
+                that.loading = false;
+              })
+              .catch(function () {
+                that.loading = false;
+              });
+          })
+          .catch(() => {});
+      } else {
+        if (that.multipleSelection.length > 0) {
+          this.$message.error(
+            "没有需要" + (state === "2" ? "审核" : "撤销") + "的数据"
+          );
+        } else {
+          this.$message.error("至少要选择一条数据");
+        }
+      }
+    },
+    but_add() {
+      let that = this;
+      that.dialog.editorBox1.show = true;
+      (that.dialog.editorBox.form.data.process = ""),
+        (that.dialog.editorBox.form.data.content = ""),
+        (that.dialog.editorBox.form.data.type = "");
+        (that.dialog.editorBox.form.data.memo = "");
+      setTimeout(() => {
+        that.$refs["dialog_form"].clearValidate();
+      }, 100);
+    },
+    tableRowClassName({ row, rowIndex }) {
+      // 把每一行的索引放进row
+      row.index = rowIndex;
+    },
+    cellClick(row, column, cell, event) {
+      let _this = this;
+      this.rowIndex = row.index;
+      this.columnId = column.id;
+      _this.editSetFlag = row.index + column.id;
+      _this.focusTarget = event.target;
+      while (_this.focusTarget.tagName !== "TD") {
+        _this.focusTarget = _this.focusTarget.parentElement;
+      }
+      _this.$nextTick(() => {
+        let target = this.focusTarget;
+        $(target).find("input").focus();
+      });
+    },
+    // 获取一行的总和
+    rowSum: function (item, event) {
+      let result = 0;
+      let that = this;
+      for (let weiIndex in item.weight) {
+        for (let weiKey in item.weight[weiIndex]) {
+          result += Number(item.weight[weiIndex][weiKey]);
+        }
+      }
+      return result;
+    },
+    // 导入方法
+    beforeUpload(event, file, fileList) {
+      let _this = this;
+      let formData = new FormData();
+      formData.append("file", file.raw);
+      _this.loading = true;
+      this.axios
+        .post("pass/ems/v1/emsprodplanyears/excelimport/", formData, {
+          headers: { "Content-Type": "multipart/form-data" },
+        })
+        .then((res) => {
+          if (res.code === "200") {
+            this.$message.success("操作成功");
+            _this.getTableData();
+          } else {
+            this.$message.error(res.message);
+          }
+          _this.loading = false;
+        })
+        .catch(() => {
+          _this.loading = false;
+        });
+    },
+    // 导出数据到excel
+    dowloadFile() {
+      let that = this,
+        params = {},
+        pData = {
+          dates: that.filterForm.data.yearmonth[0],
+          dates2: that.filterForm.data.yearmonth[1],
+          type: that.filterForm.data.type.toString(),
+          process: that.filterForm.data.process,
+        };
+      for (let key in pData) {
+        if (pData[key]) {
+          params[key] = pData[key];
+        }
+      }
+      that.tableLoading = true;
+      let url = "pass/ems/v1/emssafeinfos/downloadExcel/?";
+      that.axios
+        .get(url, {
+          responseType: "blob",
+          params: params,
+        })
+        .then(function (res) {
+          const blob = new Blob([res]);
+          that.saveAs(blob, "安全信息.xlsx");
+          that.$message({
+            message: "导出成功",
+            type: "success",
+          });
+          that.getTableData(1);
+        })
+        .catch(function () {
+          that.$message.error("导出失败");
+        });
+    },
+    saveAs(text, name, opts) {
+      saveAs(text, name, opts);
+    },
+    //下载文件
+    downloadFile(data) {
+      let that = this;
+      let fileName = "xxxx年安全信息.xlsx";
+      let fileUrl = "/安泰控股集团/测试/2023/04/26/1682481861703943.xlsx";
+      let SubmitData = {
+        fileName: fileName,
+        fileUrl: fileUrl,
+      };
+      //that.loading = true;
+      let urla = "pass/ems/v1/uploadfiles/downloadFile/";
+      that.axios
+        .get(urla, {
+          params: SubmitData,
+          responseType: "blob",
+        })
+        .then(function (res) {
+          that.saveAs(res, fileName);
+          that.$message({
+            message: "下载成功",
+            type: "success",
+          });
+          that.loading = false;
+        })
+        .catch(function () {
+          that.$message.error("下载失败");
+          that.loading = false;
+        });
+    },
+    // js实现文件下载而不直接打开
+    saveAs(data, fileName) {
+      this.loading = true;
+      let urlObject = window.URL || window.webkitURL || window;
+      // 将二进制流转为blob
+      let exportBlob = new Blob([data]);
+      if (typeof window.navigator.msSaveBlob !== "undefined") {
+        // 兼容IE，window.navigator.msSaveBlob：以本地方式保存文件
+        window.navigator.msSaveBlob(exportBlob, decodeURI(fileName));
+        this.loading = false;
+      } else {
+        // 创建新的URL并指向File对象或者Blob对象的地址
+        let blobURL = urlObject.createObjectURL(exportBlob);
+        let saveLink = document.createElement("a");
+        // 兼容：某些浏览器不支持HTML5的download属性
+        if (typeof saveLink.download === "undefined") {
+          saveLink.setAttribute("target", "_blank");
+        } else {
+          saveLink.download = fileName;
+        }
+        // 创建新的URL并指向File对象或者Blob对象的地址
+        saveLink.href = blobURL;
+        saveLink.click();
+        // 释放blob URL地址
+        urlObject.revokeObjectURL(exportBlob);
+        this.loading = false;
+        // let blob = new Blob([data])
+        // let fileURL = urlObject.createObjectURL(blob);
+        // 下载代码
+        // let downEle = document.createElement('a')
+        // let fname = `download` //下载文件的名字
+        // downEle.href = fileURL
+        // downEle.setAttribute('download', fname)
+        // document.body.appendChild(downEle)
+        // downEle.click()
+        // window.open(fileURL);
+      }
+    },
+  },
+};
+function sortNumber(a, b) {
+  return a - b;
+}
+</script>
+
+<style lang="less">
+.outElectricity {
+  min-width: 700px;
+  height: 100%;
+
+  .box {
+    height: 100%;
+    padding: 15px 15px 0 15px;
+
+    .box-top {
+      .el-form-item {
+        margin-bottom: 7px;
+      }
+
+      .box-top-gjl {
+        overflow: hidden;
+        padding: 7px 0;
+        border-top: 1px solid #ccc;
+      }
+    }
+
+    .rowDisable td {
+      color: #6bb025 !important;
+    }
+
+    .el-table .el-table__row {
+      height: 35px;
+    }
+
+    .el-table__body .el-form-item--mini.el-form-item {
+      margin: 0px;
+
+      .error {
+        overflow: hidden;
+        color: #f56c6c;
+        font-size: 12px;
+        line-height: 1;
+      }
+    }
+  }
+
+  .color_no {
+    color: #7a7a7a;
+  }
+
+  .color_yes {
+    color: #1a9f17;
+  }
+
+  .cnspicuous .el-checkbox__input.is-disabled .el-checkbox__inner {
+    background-color: #dcdfe6;
+    border-color: #babbbf;
+  }
+}
+</style>

src/views/energyOperationSupport/router/index.js

@@ -52,6 +52,8 @@ import SecurityFilePic from '../components/securitys/SecurityFilePic.vue'
 import pic from '../components/securitys/pic.vue'
 // 安全文件一览图
 import pic1 from '../components/securitys/pic1.vue'
+// 安全文件一览图2
+import pic2 from '../components/securitys/pic2.vue'
 // 安全文件一览图
 import riskDistributionPic from '../components/securitys/riskDistributionPic.vue'
 //检修停复役检修申请
@@ -64,6 +66,8 @@ import submitted from '../components/MaintenanceStopService/submitted.vue'
 import submittedselect from '../components/MaintenanceStopService/submittedselect.vue'
 //应急物資
 import emermaterials from '../components/EmergencyFoods/emermaterials.vue'
+//安全信息录入导出
+import safainfo from '../components/securitys/safainfo.vue'
 //应急物资
 Vue.use(Router)
 
@@ -196,6 +200,11 @@ export default new Router({
                 name: 'pic1',
                 component: pic1
             },
+            {
+                path: 'pic2',
+                name: 'pic2',
+                component: pic2
+            },
             {
                 path: 'riskDistributionPic',
                 name: 'riskDistributionPic',
@@ -225,7 +234,13 @@ export default new Router({
                 path: 'emermaterials',
                 name: 'emermaterials',
                 component: emermaterials
+            },
+            {
+                path: 'safainfo',
+                name: 'safainfo',
+                component: safainfo
             }
+            
         ]
     }]
 })