Merge branch 'ssotest' of https://git.steerinfo.com/XTEMS/xt-ems-front into ssotest

cors.js

@@ -128,5 +128,5 @@ module.exports = {
     // 'energyPerformance','energyPlan','energyQuality','energyScheduling','systemInterface'],
      // 用于构建
     devModules: ['index','metaData','systemConfig','multEntry',
-    'basicInformation','energyAnalysis','energyBalance','energyOperationSupport','energyPerformance','energyPlan','energyQuality','energyScheduling','systemInterface']
+    'basicInformation','energyAnalysis','energyBalance','energyOperationSupport','energyPerformance','energyPlan','energyQuality','energyScheduling','systemInterface','formGenerator']
 }

package.json

@@ -15,7 +15,8 @@
     "testc": "cross-env NODE_ENV=test nyc mocha-webpack --webpack-config node_modules/icore-icp/build/webpack.test.conf.js --require node_modules/icore-icp/test/setup.js node_modules/icore-icp/test/**/*.spec.js"
   },
   "dependencies": {
-    "icore-icp": "1.2.2-at.1.9"
+    "G6-4.3.11": "npm:@antv/g6@4.3.11",
+    "icore-icp": "1.2.2-at.1.11"
   },
   "devDependencies": {
     "@vue/test-utils": "^1.0.0-beta.24",

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

@@ -52,7 +52,7 @@
                         :style="filterForm.show ? null : { height: '0px' }"
                         class="box-top-form"
                         size="mini"
-                        label-width="60px"
+                        label-width="80px"
                     >
                         <el-row>
                             <el-col :span="6">
@@ -100,7 +100,7 @@
                                         allow-create
                                         v-model="filterForm.data.securityTag"
                                         placeholder="文件标签"
-                                        style="width: 100%;"
+                                        style="width: 95%;"
                                     >
                                         <el-option
                                             v-for="(item,key) in nameObj.securityTag.arr"
@@ -112,6 +112,17 @@
                                 </el-form-item>
                             </el-col>
                             <el-col :span="6">
+                              <el-form-item label="应急物资说明">
+                                  <el-input
+                                      clearable
+                                      v-model="filterForm.data.explain"
+                                      placeholder="应急物资说明"
+                                      style="width: 100%;"
+                                      @keyup.enter.native="getTableData(1)"
+                                  ></el-input>
+                              </el-form-item>
+                            </el-col>
+                            <!-- <el-col :span="6">
                                 <el-form-item label="展示模式">
                                     <el-select
                                         filterable
@@ -130,7 +141,7 @@
                                         ></el-option>
                                     </el-select>
                                 </el-form-item>
-                            </el-col>
+                            </el-col> -->
                         </el-row>
                     </el-form>
                     <div class="box-top-gjl">
@@ -242,14 +253,16 @@
                                 fixed="left"
                             ></el-table-column>
                             <el-table-column
-                                sortable
+                                sortable
+                                fixed
                                 prop="fileName"
                                 label="文件名称"
                                 width="160px"
                                 :show-overflow-tooltip="true"
                             ></el-table-column>
                              <el-table-column
-                                sortable
+                                sortable
+                                fixed
                                 prop="fileUrl"
                                 label="文件路径"
                                 width="320px"
@@ -314,6 +327,46 @@
                                           {{ tag }}
                                         </el-tag></template>
                                   </template>
+                            </el-table-column>
+                            <el-table-column
+                                sortable
+                                prop="explain"
+                                label="应急物资说明"
+                                width="140px"
+                                :show-overflow-tooltip="true"
+                            > <template slot-scope="scope">
+                                    <el-form-item
+                                        v-if="scope.row.isSelection"
+                                        :prop="scope.row.ID + '.explain'"
+                                    >
+                                        <el-input
+                                            clearable
+                                            style="width: 100%;"
+                                            v-model="tableFormDataObj[scope.row.ID].explain"
+                                        ></el-input>
+                                    </el-form-item>
+                                    <span v-else>{{scope.row.explain}}</span>
+                                </template>
+                            </el-table-column>
+                            <el-table-column
+                                sortable
+                                prop="memo"
+                                label="备注"
+                                width="180px"
+                                :show-overflow-tooltip="true"
+                            > <template slot-scope="scope">
+                                    <el-form-item
+                                        v-if="scope.row.isSelection"
+                                        :prop="scope.row.ID + '.memo'"
+                                    >
+                                        <el-input
+                                            clearable
+                                            style="width: 100%;"
+                                            v-model="tableFormDataObj[scope.row.ID].memo"
+                                        ></el-input>
+                                    </el-form-item>
+                                    <span v-else>{{scope.row.memo}}</span>
+                                </template>
                             </el-table-column>
                             <el-table-column
                                 sortable
@@ -601,7 +654,8 @@ export default {
                     isprimary: '',
                     version: formatDate(new Date(), 'yyyyMM00'),
                     fileName: '',
-                    pattern: 'table'
+                    pattern: 'table',
+                    explain: '',
                 },
                 rules: {
 
@@ -659,6 +713,10 @@ export default {
                             name: '表格'
                         }
                     ]
+                },
+                explain: {
+                  obj: {},
+                  arr: []
                 }
             },
             loading: false,
@@ -679,7 +737,9 @@ export default {
                             unitid: '',
                             seqno: '',
                             code: '',
-                            fileType: ''
+                            fileType: '',
+                            explain: '',
+                            memo: ''
                         },
                         rules: {
                             productid: [
@@ -917,7 +977,8 @@ export default {
                 params = {
                     fileName: that.filterForm.data.fileName,
                     type: that.filterForm.data.securityTypeid,
-                    fileType: that.filterForm.data.securityTag.toString()
+                    fileType: that.filterForm.data.securityTag.toString(),
+                    explain: that.filterForm.data.explain
                 };
             that.pageNum = pageNum || that.pageNum;
             that.tableLoading = true;
@@ -960,7 +1021,9 @@ export default {
                                 updateMan: item.updateMan,
                                 updateTime: item.updateTime,
                                 showInput: false,
-                                inputValue: ''
+                                inputValue: '',
+                                explain: item.explain,
+                                memo: item.memo
                             })
                             // }
                         }
@@ -1127,7 +1190,9 @@ export default {
                             SubmitData.push({
                                 Id: that.tableFormDataObj[key].ID,
                                 fileType: fileTypes,
-                                seqno: that.tableFormDataObj[key].seqno
+                                seqno: that.tableFormDataObj[key].seqno,
+                                explain: that.tableFormDataObj[key].explain,
+                                memo: that.tableFormDataObj[key].memo
                             });
                         }
                         that.loading = true;
@@ -1483,7 +1548,6 @@ export default {
           let children1 = [];
           let i = 0;
           let name = '';
-          name = treeData[0].createMan;
           for (let item of treeData) {
             i++;
             if(item.fileName === null) {
@@ -1496,7 +1560,9 @@ export default {
               });
               children = [];
             } else {
-              if(name !== item.createMan) {
+              if(name === '' || i === 1){
+                name = item.createMan;
+              } else if(name !== item.createMan) {
                 data.push({
                     name: name,
                     children: children1,
@@ -1508,12 +1574,12 @@ export default {
                 name: item.fileName,
                 value: item.fileUrl,
               });
-              if ( i=== treeData.length ) {
-                data.push({
-                    name: name,
-                    children: children1,
-                });
-              }
+            }
+            if ( i=== treeData.length && children1.length !== 0 ) {
+              data.push({
+                  name: name,
+                  children: children1,
+              });
             }
           }
           return data;

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

@@ -0,0 +1,1104 @@
+<template>
+    <!-- 文件分类 -->
+    <div class="ListOfDocument">
+        <div class="box">
+               <div class="icore-graphical-index" :style="'width: 100%;height:'+chart.height">
+                   <div class="icore-graphical-area" ref="graphical-area"></div>
+               </div>
+        </div>
+        <el-dialog
+          title="文件预览"
+          :visible.sync="dialogVisible"
+          destroy-on-close
+          width="90%"
+          top="10vh">
+          <el-button
+          size="small"
+          type="primary"
+          icon="el-icon-download"
+          v-privilege="activeMenu + '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>
+        <zj-formulaEditor :equationEditing="dialog.equationEditing"></zj-formulaEditor>
+    </div>
+</template>
+
+<script>
+import formulaEditor from '~/components/zg/formulaEditor.vue';
+import { zCheckNumber1 } from '~/utils/validator.js';
+import { formatDate } from '@/utils/util.js';
+import store from '@/store/index.js';
+export default {
+    name: 'ListOfDocument',
+    components: {
+        'zj-formulaEditor': formulaEditor
+    },
+    props: {
+        width: {
+            type: [Number, String],
+            default: '100%'
+        },
+        height: {
+            type: [Number, String],
+            default: '100%'
+        }
+    },
+    data () {
+        return {
+            multipleSelection: [],
+            tableFormDataObj: {},
+            activeMenu: '',
+            form: {
+            imgSavePath: ''
+            },
+            filterForm: {
+                show: true,
+                data: {
+                    uploadFileid: '',
+                    securityTypeid: '',
+                    securityTag: '',
+                    isprimary: '',
+                    version: formatDate(new Date(), 'yyyyMM00'),
+                    fileName: '',
+                    pattern: 'table'
+                },
+                rules: {
+
+                },
+                file: ''
+            },
+            listTopicTree: {
+                show: true,
+                loading: false,
+                data: [],
+                defaultProps: {
+                    children: 'children',
+                    label: 'securityName'
+                }
+            },
+            pageNum: 1,
+            pageSize: 20,
+            total: 0,
+            singleTableHeight: '720px',
+            tableData: [
+            ],
+            nameObj: {
+                uploadFile: {
+                    obj: {},
+                    arr: []
+                },
+                securityType: {
+                    obj: {},
+                    arr: []
+                },
+                unitid: {
+                    obj: {},
+                    arr: []
+                },
+                roleList: {
+                    obj: {},
+                    arr: []
+                }, // 角色信息
+                securityTag: {
+                    obj: {},
+                    arr: []
+                },
+                pattern: {
+                    obj: {
+                        'graphical': '图例',
+                        'table': '表格'
+                    },
+                    arr: [
+                        {
+                            id: 'graphical',
+                            name: '图例'
+                        },
+                        {
+                            id: 'table',
+                            name: '表格'
+                        }
+                    ]
+                }
+            },
+            loading: false,
+            tableLoading: false,
+            dialog: {
+                editorBox: {
+                    show: false,
+                    fileType: '',
+                    form: {
+                        default: {
+                            workprocid: ''
+                        },
+                        data: {
+                            itemid: '',
+                            productid: '',
+                            workprocid: '',
+                            isprimary: '0',
+                            unitid: '',
+                            seqno: '',
+                            code: '',
+                            fileType: ''
+                        },
+                        rules: {
+                            productid: [
+                                { required: true, message: '该项不能为空', trigger: 'change' }
+                            ],
+                            workprocid: [
+                                { required: true, message: '该项不能为空', trigger: 'change' }
+                            ],
+                            seqno: [
+                                { validator: zCheckNumber1, trigger: 'change' }
+                            ]
+                        }
+                    }
+                },
+                equationEditing: {
+                    show: false,
+                    form: {
+                        data: {
+                            clock: '',
+                            code: ''
+                        }
+                    }
+                }
+            },
+            store,
+            userInfo: {}, // 用户信息
+            qrRole: [],
+            userRoles: [],
+            dialogVisible: false,
+            previewUrl: '',
+            chart: {
+                height: '1024px',
+                show: false,
+                fileData: {
+                  fileName: '',
+                  fileUrl: ''
+                },
+                option: {
+                    title: {
+                        text: ''
+                    },
+                    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: 14
+                              },
+                              leaves: {
+                                label: {
+                                  position: 'right',
+                                  verticalAlign: 'middle',
+                                  align: 'left'
+                                }
+                              },
+                              emphasis: {
+                                focus: 'descendant'
+                              },
+                              initialTreeDepth: 2,
+                              expandAndCollapse: true,
+                              animationDuration: 550,
+                              animationDurationUpdate: 750,
+                              roam: true
+                            }
+                          ]
+                }
+            }
+        }
+    },
+    created () {
+        this.activeMenu = window.localStorage.getItem('activeMenu');
+    },
+    computed: {
+        indiviadualStyle: function() {
+            return (
+                "width:" +
+                (typeof this.width === "string" &&
+                this.width.indexOf("%") !== -1
+                    ? this.width
+                    : parseFloat(this.width) + "px") +
+                ";height:" +
+                (typeof this.height === "string" &&
+                this.height.indexOf("%") !== -1
+                    ? this.height
+                    : parseFloat(this.height) + "px")
+            );
+        }
+    },
+    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);
+        // });
+        // // that.getNodeData();
+        // // that.getNodeTreeData();
+        // that.getUploadFileData();
+        // that.getUnitIdData();
+        // // that.getTableData();
+        // that.getRoles();
+        that.getFileTreeData();
+    },
+    methods: {
+        //  计算树区域高度
+        getRoleHeight (dom) {
+            return window.innerHeight - dom.offsetTop;
+        },
+        // 获取文件类型列表
+        getNodeData () {
+            let that = this
+            let url = 'pass/ems/v1/securitytypes/getIdAndName/?securityInfo=' + that.qrRole;
+            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.securityName
+                            })
+                            obj[item.id] = item.securityName;
+                        }
+                        that.nameObj.securityType.arr = arr;
+                        that.nameObj.securityType.obj = obj;
+                        console.log(that.nameObj.securityType)
+                    } else {
+                        that.$message.error(res.message);
+                    }
+                });
+        },
+        // 获取工序节点树(产出)
+        getNodeTreeData () {
+            let that = this
+            let url = 'pass/ems/v1/securitytypes/gettree/?securityInfo=' + that.qrRole;
+            that.listTopicTree.loading = true;
+            that.axios.get(url)
+                .then(function (res) {
+                    if (res.code === '0') {
+                        that.listTopicTree.data = [{
+                            id: '',
+                            securityName: '所有记录',
+                            children: res.data
+                        }];
+                        that.getTableData();
+                    } else {
+                        that.$message.error(res.message);
+                    }
+                    that.listTopicTree.loading = false;
+                }).catch(function () {
+                    that.listTopicTree.loading = false;
+                });
+        },
+        // 获取产品
+        getUploadFileData () {
+            let that = this
+            let url = 'pass/ems/v1/uploadfiles/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.fileName
+                            })
+                            obj[item.id] = item.fileName;
+                        }
+                        that.nameObj.uploadFile.arr = arr;
+                        that.nameObj.uploadFile.obj = obj;
+                    } 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);
+                    }
+                });
+        },
+        // 获取表格中的数据
+        getTableData (pageNum) {
+            let that = this,
+                params = {
+                    fileName: that.filterForm.data.fileName,
+                    type: that.filterForm.data.securityTypeid,
+                    fileType: that.filterForm.data.securityTag.toString()
+                };
+            that.pageNum = pageNum || that.pageNum;
+            that.tableLoading = true;
+            let url = 'pass/ems/v1/uploadfiles/like/?pageNum=' + that.pageNum + '&pageSize=' + that.pageSize + '&securityInfo=' + that.qrRole;
+            that.axios.get(url, {
+                params: params
+            })
+                .then(function (res) {
+                    if (res.code === '0') {
+                        let arr = [];
+                        let map = {};
+                        let fileTypeArr = [];
+                        let fileTypeStr = '';
+                        let total = 0;
+                        for (let item of that.listTopicTree.data[0].children) {
+                            map[item.id] = true;
+                        }
+                        for (let item of res.data.list) {
+                            let result = true;
+                            fileTypeArr = [];
+                            // // result = item.type.some(i => map[i]);
+                            // if (that.qrRole.length > 0) {
+                            //     result = map.hasOwnProperty(item.type);
+                            // }
+                            // if (result) {
+                                if (item.fileType !== null) {
+                                    fileTypeArr = item.fileType.split(';');
+                                    fileTypeStr += item.fileType + ';'
+                                }
+                                total++;
+                            arr.push({
+                                ID: item.id,
+                                fileName: item.fileName,
+                                fileUrl: item.fileUrl,
+                                type: item.type,
+                                fileType: fileTypeArr,
+                                uploadTime: item.uploadTime,
+                                createMan: item.createMan,
+                                createTime: item.createTime,
+                                updateMan: item.updateMan,
+                                updateTime: item.updateTime,
+                                showInput: false,
+                                inputValue: ''
+                            })
+                            // }
+                        }
+                        if (that.nameObj.securityTag.arr.length <= 0) {
+                            fileTypeStr = fileTypeStr.substr(0, fileTypeStr.length - 1);
+                            that.nameObj.securityTag.arr = Array.from(new Set(fileTypeStr.split(';')));
+                        }
+                        that.tableData = arr;
+                        that.total = res.data.total;
+                    } else {
+                        that.$message.error(res.message);
+                    }
+                    that.getFileTreeData ();
+                    that.tableLoading = false;
+                }).catch(function () {
+                    that.tableLoading = false;
+                });
+        },
+        // 改变表格显示条数
+        tableSizeChange (val) {
+            let that = this;
+            that.pageSize = val;
+            that.getTableData(1);
+        },
+        // 重置搜索
+        tableDataCancel () {
+            let that = this;
+            that.filterForm.data.workprocid = '';
+            that.filterForm.data.productid = '';
+            that.filterForm.data.version = '';
+            that.getTableData(1);
+        },
+        // 表格中多选按钮的相关方法
+        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.ID;
+                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 = JSON.parse(JSON.stringify(tableFormDataObj));
+            that.multipleSelection = val;
+        },
+        but_add () {
+            let that = this;
+            if (!that.dialog.editorBox.form.default.workprocid) {
+                that.$message.error('请先选择左侧的详细工序');
+                return;
+            }
+            that.dialog.editorBox.form.data.itemid = '';
+            that.dialog.editorBox.form.data.productid = '';
+            that.dialog.editorBox.form.data.workprocid = that.dialog.editorBox.form.default.workprocid;
+            that.dialog.editorBox.form.data.isprimary = '0';
+            that.dialog.editorBox.form.data.unitid = that.nameObj.unitid.defaults ? that.nameObj.unitid.defaults : '';
+            that.dialog.editorBox.form.data.seqno = '';
+            that.dialog.editorBox.form.data.code = '0';
+            that.dialog.editorBox.type = 'add';
+            that.dialog.editorBox.show = true;
+            setTimeout(() => {
+                that.$refs['dialog_form'].clearValidate();
+            }, 100);
+        },
+        beforeUpload (file) {
+          let that = this;
+          that.tableLoading = true;
+          that.loading = true;
+          let foorData = new FormData();
+          foorData.append('file', file.file);
+          foorData.append('type', this.filterForm.data.securityTypeid);
+          that.axios.post('pass/ems/v1/uploadfiles/file', foorData, {
+             headers: {
+                    'Content-Type': 'multipart/form-data'
+                }
+          }).then(function (res) {
+               if (res.code === '0') {
+               that.$message({
+                    message: '上传成功',
+                    type: 'success'
+                });
+                that.$refs.upload.clearFiles();
+                that.$refs.upload1.clearFiles();
+                that.getTableData(1);
+                that.dialog.editorBox.show = false;
+                } else {
+                that.$message.error(res.message);
+                }
+                that.tableLoading = false;
+                that.loading = false;
+          }).catch(function () {
+            that.$message({
+                 message: '上传失败,FTP服务器可能已断开连接',
+                 type: 'success'
+             });
+             that.tableLoading = false;
+             that.loading = false;
+          });
+        },
+        submitUpload () {
+        let that = this;
+        this.$refs.upload.submit();
+        this.$refs.upload1.submit();
+      },
+      handleRemove (file, fileList) {
+        console.log(file, fileList);
+      },
+      // 行内标签删除
+      rowhandleClose (tag, row) {
+        let that = this;
+        that.tableFormDataObj[row.ID].fileType.splice(that.tableFormDataObj[row.ID].fileType.indexOf(tag), 1);
+      },
+      // 行内标签新增
+      rowhandleInputConfirm (row) {
+        let that = this;
+        let inputValue = that.tableFormDataObj[row.ID].inputValue;
+        if (inputValue) {
+          that.tableFormDataObj[row.ID].fileType.push(inputValue);
+        }
+        that.tableFormDataObj[row.ID].showInput = false;
+        that.tableFormDataObj[row.ID].inputValue = '';
+      },
+      // 行内input获取焦点
+      rowshowInput (row) {
+        let that = this;
+        that.tableFormDataObj[row.ID].showInput = true;
+        let id = row.ID + '-saveTagInput';
+        setTimeout(function(){
+           that.$nextTick(() => {
+             // that.$refs[id].$refs.input.focus();
+             that.$refs[id].focus();
+           });
+        },50)
+      },
+      handlePreview (file) {
+        console.log(file);
+      },
+        // 批量修改
+        but_edit_plural () {
+            let that = this;
+            if (that.multipleSelection.length > 0) {
+                that.$refs['dialog_form_arr'].validate((valid) => {
+                    if (valid) {
+                        let SubmitData = [];
+                        for (let key in that.tableFormDataObj) {
+                          let fileTypes = '';
+                          for (let item in that.tableFormDataObj[key].fileType) {
+                              if (Number(item) === that.tableFormDataObj[key].fileType.length - 1) {
+                                  fileTypes += that.tableFormDataObj[key].fileType[item];
+                              } else {
+                                  fileTypes += that.tableFormDataObj[key].fileType[item] + ';';
+                              }
+                          }
+                            SubmitData.push({
+                                Id: that.tableFormDataObj[key].ID,
+                                fileType: fileTypes,
+                                seqno: that.tableFormDataObj[key].seqno
+                            });
+                        }
+                        that.loading = true;
+                        that.axios.put('pass/ems/v1/uploadfiles/batchupdate', SubmitData)
+                            .then(function (res) {
+                                if (res.code === '0') {
+                                    that.$message({
+                                        message: '修改成功',
+                                        type: 'success'
+                                    });
+                                    that.getTableData();
+                                    that.dialog.editorBox.show = false;
+                                } else {
+                                    that.$message.error(res.message);
+                                }
+                                that.loading = false;
+                            }).catch(function () {
+                                that.loading = false;
+                            });
+                    }
+                });
+            } else {
+                this.$message.error('至少要选择一条数据');
+            }
+        },
+        // 批量删除
+        but_del_plural () {
+            let that = this;
+            that.loading = true;
+            if (that.multipleSelection.length > 0) {
+                let ids = [];
+                let paths = [];
+                for (let item of that.multipleSelection) {
+                    ids.push(item.ID);
+                    paths.push(item.fileUrl);
+                }
+                that.$confirm('是否删除已选数据?', '提示', {
+                    confirmButtonText: '确定',
+                    cancelButtonText: '取消',
+                    state: 'warning'
+                }).then(() => {
+                    that.axios.delete('pass/ems/v1/uploadfiles/' + ids.toString())
+                        .then(function (res) {
+                            if (res.code === '0') {
+                                that.$message({
+                                    message: '删除成功',
+                                    type: 'success'
+                                });
+                                that.getTableData();
+                                that.loading = false;
+                            } else {
+                                if (res.code === '51') {
+
+                                }
+                                that.$message.error(res.message);
+                            }
+                            that.loading = false;
+                        }).catch(function () {
+                          that.loading = false;
+                        });
+                }).catch(() => {
+                  that.loading = false;
+                });
+            } else {
+                this.$message.error('至少要选择一条数据');
+                that.loading = false;
+            }
+        },
+        dataSave () {
+            let that = this;
+            let SubmitData = {
+                itemid: that.dialog.editorBox.form.data.itemid,
+                productid: that.dialog.editorBox.form.data.productid,
+                workprocid: that.dialog.editorBox.form.data.workprocid,
+                isprimary: that.dialog.editorBox.form.data.isprimary,
+                unitid: that.dialog.editorBox.form.data.unitid,
+                seqno: that.dialog.editorBox.form.data.seqno,
+                code: that.dialog.editorBox.form.data.code,
+                itemtype: 'P'
+            };
+            that.$refs['dialog_form'].validate((valid) => {
+                if (valid) {
+                    if (that.dialog.editorBox.type === 'add') {
+                        that.loading = true;
+                        that.axios.post('pass/ems/v1/trmworkprocproducts/', SubmitData, {
+                            contentType: 'application/json'
+                        })
+                            .then(function (res) {
+                                if (res.code === '0') {
+                                    that.$message({
+                                        message: '新增成功',
+                                        type: 'success'
+                                    });
+                                    that.getTableData();
+                                    that.dialog.editorBox.show = false;
+                                } else {
+                                    that.$message.error(res.message);
+                                }
+                                that.loading = false;
+                            }).catch(function () {
+                                that.loading = false;
+                            });
+                    } else {
+                        that.loading = true;
+                        that.axios.put('pass/ems/v1/trmworkprocproducts/' + SubmitData.itemid, SubmitData)
+                            .then(function (res) {
+                                if (res.code === '0') {
+                                    that.$message({
+                                        message: '修改成功',
+                                        type: 'success'
+                                    });
+                                    that.getTableData();
+                                    that.dialog.editorBox.show = false;
+                                } else {
+                                    that.$message.error(res.message);
+                                }
+                                that.loading = false;
+                            }).catch(function () {
+                                that.loading = false;
+                            });
+                    }
+                }
+            });
+        },
+        but_equationEditing (row) {
+            let that = this;
+            that.dialog.equationEditing.form.data.clock = that.filterForm.data.version;
+            that.dialog.equationEditing.form.data.code = row.itemid;
+            that.dialog.equationEditing.show = true;
+        },
+        selectByTopicId (data) {
+            let that = this;
+            that.filterForm.data.securityTypeid = data.id;
+            that.getTableData(1);
+        },
+        getRoles () {
+            let that = this;
+            // 获取用户信息
+            this.store.dispatch('getUserInfo').then((res) => {
+                this.userInfo = res.data;
+                that.axios.get('pass/v1/sysuserroles/?userId=' + res.data.userId + '&pageNum=1&pageSize=100').then(rest => {
+                  if (rest) {
+                    for (let i = 0; i < rest.data.list.length; i++) {
+                      that.qrRole.push(rest.data.list[i].roleId)
+                    }
+                    that.userRoles = rest.data.list; // 获取用户角色关联信息
+                  }
+                  that.getNodeData();
+                  that.getNodeTreeData();
+                })
+            });
+            // 获取角色信息
+            this.store.dispatch('system/rolesManage/list').then(res => {
+              if (res.code === '0') {
+                this.nameObj.roleList.arr = res.data;
+                for (let obj of res.data) {
+                    this.nameObj.roleList.obj[obj.id] = {
+                        name: obj.roleName,
+                        id: obj.id
+                    };
+                }
+                } else {
+              this.$message.error(res.message);
+            }
+            });
+        },
+        downloadFile (data) {
+            let that = this;
+            let SubmitData = {
+                    fileName: data.fileName,
+                    fileUrl: data.fileUrl
+                };
+                // 不带token访问方式，留底后端修改shiroconfig.java,application.properties
+            //     let url = '/zhongsteel.pass.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;
+                })
+        },
+        // 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);
+            }
+        },
+        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';
+            let fileExtension = data.fileName.substring(data.fileName.lastIndexOf('.') + 1);
+            if (fileExtension === 'pdf') {
+                urla = 'pass/ems/v1/uploadfiles/downloadFile/';
+                type = 'application/pdf';
+                responseType = 'blob';
+            }
+            that.tableLoading = true;
+            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 = false;
+            })
+        },
+        selectTrigger(val) {
+          let that = this;
+          if (val === 'graphical') {
+            that.listTopicTree.show = false;
+            that.chart.show = true;
+            that.loading = true;
+            setTimeout(() => {
+                that.setGraphical();
+            }, 1000)
+              console.log(val);
+          } else {
+            that.chart.show = false;
+            that.listTopicTree.show = true;
+              console.log(val);
+          }
+        },
+        getFileTreeData () {
+            let that = this,
+                params = {
+                    fileName: that.filterForm.data.fileName,
+                    type: that.filterForm.data.securityTypeid,
+                    fileType: that.filterForm.data.securityTag.toString()
+                };
+            that.tableLoading = true;
+            let url = 'pass/ems/v1/uploadfiles/getFileTree/?securityInfo=' + that.qrRole;
+            that.axios.get(url, {
+                params: params
+            })
+                .then(function (res) {
+                    if (res.code === '0') {
+                      let arr = [];
+                      // that.chart.height = res.data.length * 100 + 'px';
+                      arr = that.treeDataUtil(res.data);
+                      arr[0].label = {
+                        position: 'top',
+                        verticalAlign: 'bottom',
+                        align: 'right',
+                        fontSize: 20,
+                        fontWeight: 800
+                      };
+                      that.chart.option.series[0].data = arr;
+                      that.setGraphical();
+                    } else {
+                      that.$message.error(res.message);
+                    }
+                    that.tableLoading = false;
+                }).catch(function () {
+                    that.tableLoading = false;
+                });
+        },
+        treeDataUtil (treeData) {
+          let that = this;
+          let data = [];
+          let children = [];
+          let children1 = [];
+          let i = 0;
+          let name = '';
+          for (let item of treeData) {
+            i++;
+            if(item.fileName === null) {
+              if (item.children !== null){
+                children = that.treeDataUtil(item.children);
+              };
+              data.push({
+                  name: item.createMan,
+                  children: children,
+              });
+              children = [];
+            } else {
+              if(name === '' || i === 1){
+                name = item.createMan;
+              } else if(name !== item.createMan) {
+                data.push({
+                    name: name,
+                    children: children1,
+                });
+                children1 = [];
+                name = item.createMan;
+              }
+              children1.push({
+                name: item.fileName,
+                value: item.fileUrl,
+              });
+            }
+            if ( i=== treeData.length && children1.length !== 0 ) {
+              data.push({
+                  name: name,
+                  children: children1,
+              });
+            }
+          }
+          return data;
+        },
+        /**
+         * 根据参数生成不同类型的图形化控件
+         */
+        setGraphical: function() {
+            let that = this;
+            // 引入 ECharts 主模块
+            let echarts = require("echarts");
+            require("echarts-gl");
+            // 基于准备好的dom，初始化echarts实例
+            let myChart = echarts.init(this.$refs["graphical-area"]);
+            myChart.showLoading();
+            // 绘制图表
+            myChart.setOption(that.chart.option);
+            // 设置树图的点击事件
+            myChart.on("click", function(param) {
+              // 老版本不支持
+              // if(param.event.target.culling === true){
+              //    return
+              // } else if(param.event.target.culling === false){
+              //     let args = {
+              //       fileName: param.data.name,
+              //       fileUrl: param.data.value
+              //     } //当前节点及其子节点的值
+              //     let level = param.data.level; //当前节点的层级 eg:"1-1-0",可以通过level判断当前的层级，从而进行不同的操作
+              //     that.preview (args);
+              // }
+              if(param.data.value){
+                let args = {
+                      fileName: param.data.name,
+                      fileUrl: param.data.value
+                    } //当前节点及其子节点的值
+                    let level = param.data.level; //当前节点的层级 eg:"1-1-0",可以通过level判断当前的层级，从而进行不同的操作
+                    that.preview (args);
+                }
+            });
+            myChart.hideLoading();
+            that.loading = false;
+        }
+    }
+}
+</script>
+
+<style lang="less">
+.ListOfDocument {
+    padding: 0;
+    margin: 0;
+    min-width: 700px;
+    height: 1024px;
+    .box {
+        height: 1030px;
+        padding: 15px 15px 0 15px;
+        background: url(../../../../assets/img/img/filebg.png) center bottom no-repeat;
+        background-size: 100% 100%;
+            margin: 0px;
+            .error {
+                overflow: hidden;
+                color: #f56c6c;
+                font-size: 12px;
+                line-height: 1;
+            }
+    }
+    .color_no {
+        color: #7a7a7a;
+    }
+    .color_yes {
+        color: #1a9f17;
+    }
+    .el-upload-dragger {
+        width: 120px;
+        height: 80px;
+    }
+    .el-icon-upload:before {
+    content: "\E60D";
+    position: absolute;
+    top: 20%;
+    left: 20%;
+    }
+    .uploadNew {
+        position: relative;
+        width: 120px;
+    }
+    .uploadNew .el-upload-list {
+        position: absolute;
+        left: 320px;
+        top: -10px;
+        width: 200px;
+    }
+    .upload-demo {
+        float: left;
+        width: 85px;
+        position: relative;
+    }
+    .upload-demo .el-upload-list {
+        position: absolute;
+        left: 530px;
+        top: -100px;
+        width: 200px;
+    }
+    .icore-graphical-index {
+        display: inline-block;
+        height: inherit;
+        width: inherit;
+        .icore-graphical-area {
+            height: 100%;
+            width: 100%;
+        }
+    }
+}
+</style>

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

@@ -300,6 +300,7 @@
                                 prop="parentid"
                                 label="上层节点"
                                 width="120px"
+                                :show-overflow-tooltip="true"
                             ><template slot-scope="scope">
                                 <span>{{ nameObj.parentid.obj[scope.row.parentid] ? nameObj.parentid.obj[scope.row.parentid].name : scope.row.parentid }}</span>
                             </template></el-table-column>

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

@@ -0,0 +1,540 @@
+<template>
+  <div class="root">
+    <div id="headPanel">
+      <!-- <span class="logo">G6 入门教程 - 脑图</span> -->
+      <i class="gb-toggle-btn" />
+    </div>
+    <div class="crumb-nav">
+      <template v-for="(nav, index) in crumbNavs">
+        {{ index > 0 ? '>' : '' }}
+        <span :key="nav.id" class="nav-text" @click="changeNode(nav)">{{ nav.label }}</span>
+      </template>
+    </div>
+    <!-- canvas 挂载节点 -->
+    <div id="graph" />
+    <!-- 输入框 -->
+    <input v-show="showInput" id="input-controller" ref="inputController" v-model="inputValue" :style="{
+        top: `${input.y}px`,
+        left: `${input.x}px`,
+      }" type="text" @blur="inputBlur">
+  </div>
+</template>
+
+<script>
+  import G6 from '@antv/g6';
+  import registerEdge from './register-edge';
+  import registerNode from './register-node';
+  import formulaEditor from '~/components/zg/formulaEditor.vue';
+  import {
+    zCheckNumber1
+  } from '~/utils/validator.js';
+  import {
+    formatDate
+  } from '@/utils/util.js';
+  import store from '@/store/index.js';
+
+  export default {
+    name: 'root',
+    data() {
+      return {
+        multipleSelection: [],
+        tableFormDataObj: {},
+        activeMenu: '',
+        form: {
+          imgSavePath: '',
+        },
+        filterForm: {
+          show: true,
+          data: {
+            uploadFileid: '',
+            securityTypeid: '',
+            securityTag: '',
+            isprimary: '',
+            version: formatDate(new Date(), 'yyyyMM00'),
+            fileName: '',
+            pattern: 'table'
+          },
+          rules: {},
+          file: ''
+        },
+        listTopicTree: {
+          show: true,
+          loading: false,
+          data: [],
+          defaultProps: {
+            children: 'children',
+            label: 'securityName'
+          }
+        },
+        pageNum: 1,
+        pageSize: 20,
+        total: 0,
+        singleTableHeight: '720px',
+        tableData: [],
+        nameObj: {
+          uploadFile: {
+            obj: {},
+            arr: []
+          },
+          securityType: {
+            obj: {},
+            arr: []
+          },
+          unitid: {
+            obj: {},
+            arr: []
+          },
+          roleList: {
+            obj: {},
+            arr: []
+          }, // 角色信息
+          securityTag: {
+            obj: {},
+            arr: []
+          },
+          pattern: {
+            obj: {
+              'graphical': '图例',
+              'table': '表格'
+            },
+            arr: [{
+                id: 'graphical',
+                name: '图例'
+              },
+              {
+                id: 'table',
+                name: '表格'
+              }
+            ]
+          }
+        },
+        loading: false,
+        tableLoading: false,
+        dialog: {
+          editorBox: {
+            show: false,
+            fileType: '',
+            form: {
+              default: {
+                workprocid: ''
+              },
+              data: {
+                itemid: '',
+                productid: '',
+                workprocid: '',
+                isprimary: '0',
+                unitid: '',
+                seqno: '',
+                code: '',
+                fileType: ''
+              },
+              rules: {
+                productid: [{
+                  required: true,
+                  message: '该项不能为空',
+                  trigger: 'change'
+                }],
+                workprocid: [{
+                  required: true,
+                  message: '该项不能为空',
+                  trigger: 'change'
+                }],
+                seqno: [{
+                  validator: zCheckNumber1,
+                  trigger: 'change'
+                }]
+              }
+            }
+          },
+          equationEditing: {
+            show: false,
+            form: {
+              data: {
+                clock: '',
+                code: ''
+              }
+            }
+          }
+        },
+        store,
+        userInfo: {}, // 用户信息
+        qrRole: [],
+        userRoles: [],
+        dialogVisible: false,
+        previewUrl: '',
+        chart: {
+          height: '1024px',
+          show: false,
+          fileData: {
+            fileName: '',
+            fileUrl: ''
+          },
+          option: {
+            title: {
+              text: ''
+            },
+            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: 14
+              },
+              leaves: {
+                label: {
+                  position: 'right',
+                  verticalAlign: 'middle',
+                  align: 'left'
+                }
+              },
+              emphasis: {
+                focus: 'descendant'
+              },
+              initialTreeDepth: 2,
+              expandAndCollapse: true,
+              animationDuration: 550,
+              animationDurationUpdate: 750,
+              roam: true
+            }]
+          }
+        },
+        graph: null,
+        showInput: false,
+        inputValue: '',
+        activeMenu: '',
+        input: {
+          x: 0,
+          y: 0,
+        },
+        currentNode: {
+          id: null,
+        },
+        crumbNavs: [],
+      };
+    },
+    created() {
+      this.activeMenu = window.localStorage.getItem('activeMenu');
+    },
+    mounted() {
+      let that = this;
+      that.getFileTreeData();
+    },
+    beforeDestroy() {
+      this.graph.destroy();
+    },
+    methods: {
+      createGraphic() {
+        let that = this;
+        var tree = new G6.Tree({
+          id: 'graph', // 容器ID
+          width: window.innerWidth,
+          height: window.innerHeight, // 画布高
+          fitView: 'autoZoom', // 自动缩放
+          layoutCfg: {
+            direction: 'H', // 方向（LR/RL/H/TB/BT/V）
+            getHGap: function( /* d */ ) { // 横向间距
+              return 100;
+            },
+            getVGap: function( /* d */ ) { // 竖向间距
+              return 10;
+            },
+          },
+        });
+        var canvas = new G6.Canvas({
+            containerId: 'graph',
+            width: 600,
+            height: 600
+          });
+        canvas.addShape('text', {
+            attrs: {
+              x: 150,
+              y: 150,
+              fontFamily: 'PingFang SC',
+              text: '文本文本',
+              fontSize: 90,
+              stroke: 'black'
+            },
+            });
+            canvas.draw();
+        tree.source(that.chart.option.series[0].data[0]);
+        tree.node()
+          .label(function(obj) {
+            return obj.name;
+          })
+          .style({
+            fillOpacity: 1
+          })
+          // smooth 曲线
+        tree.edge().shape('VH');
+        tree.render();
+      //   // 悬浮事件
+      // tree.on('itemmouseenter', function(ev){
+      //    let item = ev.item;
+      //    tree.update(item, {
+      //      color: 'red'
+      //    });
+      // tree.refresh();
+      // });
+      // tree.on('itemmouseleave', function(ev){
+      //      let item = ev.item;
+      //      tree.update(item, {
+      //        color: null,
+      //        fontSize: 8
+      //      });
+      //      tree.refresh();
+      // });
+      tree.on('itemclick', function(ev){
+              alert("击中" + ev.item.get('model').value + "!");
+      });
+        that.graph = tree;
+      },
+      /*
+       * 1:        1
+       * 1-1:      1     1-1
+       * 1-1-1:    1     1-1     1-1-1
+       * 1-1-1-1:  1     1-1     1-1-1      1-1-1-1
+       */
+      getParentNodes(node, id, deep = 1) {
+        if (id.substring(0, 1) === '1' && deep === 1) {
+          this.crumbNavs.push(node);
+        }
+        if (id.length > 1) {
+          const $id = id.substring(0, deep * 2 + 1);
+          const $node = node.children.find(item => item.id === $id);
+
+          if ($node) {
+            this.crumbNavs.push($node);
+
+            if ($node.children) {
+              this.getParentNodes($node, id, deep + 1);
+            }
+          }
+        }
+      },
+      bindEvents() {
+        this.graph.on('node:click', e => {
+          const model = e.item.getModel();
+
+          if (e.target.cfg.name === 'node-icon-text') {
+            /* 展开按钮的事件 */
+            model.collapsed = !model.collapsed;
+            this.graph.updateItem(e.item, model);
+            this.graph.layout();
+          } else {
+            /* 节点点击事件 */
+            // 记录当前节点 id
+            this.currentNode.id = model.id;
+            this.crumbNavs = [];
+            // 查找所有的节点路径
+            this.getParentNodes(data, model.id);
+            this.graph.changeData(JSON.parse(JSON.stringify(model)));
+          }
+          e.item.toFront();
+        });
+      },
+      inputBlur() {
+        this.showInput = false;
+
+        const item = this.graph.findById(this.currentNode.id);
+        const model = item.getModel();
+
+        model.label = this.inputValue;
+        this.graph.updateItem(item, model);
+      },
+      // 编辑节点
+      editNode(item) {
+        const model = item.getModel();
+        const {
+          cacheCanvasBBox
+        } = item.get('group').cfg;
+
+        this.showInput = true;
+        this.inputValue = model.label;
+        this.currentNode.id = model.id;
+        this.input.x = cacheCanvasBBox.x + 40;
+        this.input.y = cacheCanvasBBox.y + 40;
+        this.$nextTick(() => {
+          this.$refs.inputController.focus();
+        });
+      },
+      deleteNode(item) {
+        const id = item.get('id');
+
+        if (id.length > 1) {
+          const parentId = id.substring(0, id.length - 2);
+          const parent = this.graph.findById(parentId);
+
+          parent.toFront();
+        }
+        this.graph.removeChild(id);
+
+        if (id.length > 1) {
+          const parentId = id.substring(0, id.length - 2);
+          const parent = this.graph.findById(parentId);
+          const model = parent.get('model');
+
+          if (model.children.length === 0) {
+            const group = parent.get('group');
+            const {
+              children
+            } = group.cfg;
+
+            const icon = children.find(child => child.name === 'node-icon');
+            const iconText = children.find(child => child.name === 'node-icon-text');
+
+            if (icon) {
+              icon.remove();
+              iconText.remove();
+            }
+          }
+        }
+      },
+      changeNode(node) {
+        this.graph.changeData(JSON.parse(JSON.stringify(node)));
+      },
+      getFileTreeData() {
+        let that = this,
+          params = {
+            fileName: that.filterForm.data.fileName,
+            type: that.filterForm.data.securityTypeid,
+            fileType: that.filterForm.data.securityTag.toString()
+          };
+        that.tableLoading = true;
+        let url = 'pass/ems/v1/uploadfiles/getFileTree/?securityInfo=' + that.qrRole;
+        that.axios.get(url, {
+            params: params
+          })
+          .then(function(res) {
+            if (res.code === '0') {
+              let arr = [];
+              // that.chart.height = res.data.length * 100 + 'px';
+              arr = that.treeDataUtil(res.data);
+              // arr = that.getParentNodes(res.data, 1)
+              that.chart.option.series[0].data = arr;
+              // that.setGraphical();
+              that.createGraphic();
+            } else {
+              that.$message.error(res.message);
+            }
+            that.tableLoading = false;
+          }).catch(function() {
+            that.tableLoading = false;
+          });
+      },
+      treeDataUtil(treeData) {
+        let that = this;
+        let data = [];
+        let children = [];
+        let children1 = [];
+        let i = 0;
+        let name = '';
+        for (let item of treeData) {
+          i++;
+          if (item.fileName === null) {
+            if (item.children !== null) {
+              children = that.treeDataUtil(item.children);
+            };
+            data.push({
+              nodeType: 'node',
+              name: item.createMan,
+              children: children,
+            });
+            children = [];
+          } else {
+            if(name === '' || i === 1){
+              name = item.createMan;
+            } else if (name !== item.createMan) {
+              data.push({
+                nodeType: 'node',
+                isCollapsed: true,
+                name: name,
+                children: children1,
+              });
+              children1 = [];
+              name = item.createMan;
+            }
+            children1.push({
+              itemType: 'edge',
+              name: item.fileName,
+              value: item.fileUrl,
+              children: [],
+            });
+          }
+          if ( i=== treeData.length && children1.length !== 0 ) {
+            data.push({
+              nodeType: 'node',
+              isCollapsed: true,
+              name: name,
+              children: children1,
+            });
+          }
+        }
+        return data;
+      },
+    },
+  };
+</script>
+
+<style lang="scss">
+  .crumb-nav {
+    position: absolute;
+    top: 50px;
+    left: 40px;
+    background: #73bf8f;
+    border-radius: 4px;
+    color: #fff;
+  }
+
+  .nav-text {
+    display: inline-block;
+    height: 36px;
+    line-height: 36px;
+    margin: 0 10px;
+    cursor: pointer;
+  }
+
+  .g6-component-contextmenu {
+    width: 100px;
+    padding: 6px 0;
+    cursor: pointer;
+
+    .menu-item {
+      padding: 0 10px;
+      line-height: 26px;
+
+      &:hover {
+        background: #f0f0f0;
+      }
+    }
+  }
+
+  #input-controller {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 12;
+    width: 100px;
+    height: 30px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    padding-left: 6px;
+    font-size: 14px;
+  }
+</style>

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

@@ -0,0 +1,792 @@
+<template>
+  <div class="root">
+    <div id="headPanel">
+      <!-- <span class="logo">G6 入门教程 - 脑图</span> -->
+      <i class="gb-toggle-btn" />
+    </div>
+    <div class="crumb-nav" v-if="activeMenu + 'TITLE'">
+      <template v-for="(nav, index) in crumbNavs">
+        {{ index > 0 ? '>' : '' }}
+        <span :key="nav.id" class="nav-text" @click="changeNode(nav)">{{ nav.label }}</span>
+      </template>
+    </div>
+    <div class="text-nav">
+      <span>{{ chart.option.title.text }}</span>
+    </div>
+    <!-- canvas 挂载节点 -->
+    <div id="graph" />
+    <!-- 输入框 -->
+    <input v-show="showInput" id="input-controller" ref="inputController" v-model="inputValue" :style="{
+        top: `${input.y}px`,
+        left: `${input.x}px`,
+      }" type="text" @blur="inputBlur">
+    <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" v-privilege="activeMenu + '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>
+  </div>
+</template>
+
+<script>
+  import G6 from 'G6-4.3.11';
+  import registerEdge from './register-edge';
+  import registerNode from './register-node';
+  import formulaEditor from '~/components/zg/formulaEditor.vue';
+  import {
+    zCheckNumber1
+  } from '~/utils/validator.js';
+  import {
+    formatDate
+  } from '@/utils/util.js';
+  import store from '@/store/index.js';
+
+  export default {
+    name: 'root',
+    data() {
+      return {
+        multipleSelection: [],
+        tableFormDataObj: {},
+        form: {
+          imgSavePath: '',
+        },
+        filterForm: {
+          show: true,
+          data: {
+            uploadFileid: '',
+            securityTypeid: '',
+            securityTag: '',
+            isprimary: '',
+            version: formatDate(new Date(), 'yyyyMM00'),
+            fileName: '',
+            pattern: 'table'
+          },
+          rules: {},
+          file: ''
+        },
+        listTopicTree: {
+          show: true,
+          loading: false,
+          data: [],
+          defaultProps: {
+            children: 'children',
+            label: 'securityName'
+          }
+        },
+        pageNum: 1,
+        pageSize: 20,
+        total: 0,
+        singleTableHeight: '720px',
+        tableData: [],
+        nameObj: {
+          uploadFile: {
+            obj: {},
+            arr: []
+          },
+          securityType: {
+            obj: {},
+            arr: []
+          },
+          unitid: {
+            obj: {},
+            arr: []
+          },
+          roleList: {
+            obj: {},
+            arr: []
+          }, // 角色信息
+          securityTag: {
+            obj: {},
+            arr: []
+          },
+          pattern: {
+            obj: {
+              'graphical': '图例',
+              'table': '表格'
+            },
+            arr: [{
+                id: 'graphical',
+                name: '图例'
+              },
+              {
+                id: 'table',
+                name: '表格'
+              }
+            ]
+          }
+        },
+        loading: false,
+        tableLoading: false,
+        dialog: {
+          editorBox: {
+            show: false,
+            fileType: '',
+            form: {
+              default: {
+                workprocid: ''
+              },
+              data: {
+                itemid: '',
+                productid: '',
+                workprocid: '',
+                isprimary: '0',
+                unitid: '',
+                seqno: '',
+                code: '',
+                fileType: ''
+              },
+              rules: {
+                productid: [{
+                  required: true,
+                  message: '该项不能为空',
+                  trigger: 'change'
+                }],
+                workprocid: [{
+                  required: true,
+                  message: '该项不能为空',
+                  trigger: 'change'
+                }],
+                seqno: [{
+                  validator: zCheckNumber1,
+                  trigger: 'change'
+                }]
+              }
+            }
+          },
+          equationEditing: {
+            show: false,
+            form: {
+              data: {
+                clock: '',
+                code: ''
+              }
+            }
+          }
+        },
+        store,
+        userInfo: {}, // 用户信息
+        qrRole: [],
+        userRoles: [],
+        dialogVisible: false,
+        previewUrl: '',
+        chart: {
+          height: '1024px',
+          show: false,
+          fileData: {
+            fileName: '',
+            fileUrl: ''
+          },
+          option: {
+            title: {
+              text: '典型事故应急"四步"管控体系'
+            },
+            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: 14
+              },
+              leaves: {
+                label: {
+                  position: 'right',
+                  verticalAlign: 'middle',
+                  align: 'left'
+                }
+              },
+              emphasis: {
+                focus: 'descendant'
+              },
+              initialTreeDepth: 2,
+              expandAndCollapse: true,
+              animationDuration: 550,
+              animationDurationUpdate: 750,
+              roam: true
+            }]
+          }
+        },
+        graph: null,
+        showInput: false,
+        inputValue: '',
+        activeMenu: '',
+        input: {
+          x: 0,
+          y: 0,
+        },
+        currentNode: {
+          id: null,
+        },
+        crumbNavs: [],
+      };
+    },
+    created() {
+      this.activeMenu = window.localStorage.getItem('activeMenu');
+    },
+    mounted() {
+      let that = this;
+      that.getFileTreeData();
+    },
+    beforeDestroy() {
+      this.graph.destroy();
+    },
+    methods: {
+      createGraphic() {
+        const vm = this;
+
+        registerEdge(G6);
+        registerNode(G6);
+
+        const menu = new G6.Menu({
+          offsetY: -20,
+          itemTypes: ['node'],
+          getContent(e) {
+            return `
+       <p class="menu-item" command="edit-node">编辑文本</p>
+       <p class="menu-item" command="delete-node">删除节点</p>
+     `;
+          },
+          handleMenuClick(target, item) {
+            const command = target.getAttribute('command');
+
+            switch (command) {
+              case 'edit-node':
+                vm.editNode(item);
+                break;
+              case 'delete-node':
+                vm.deleteNode(item);
+                break;
+            }
+          },
+        });
+        const graph = new G6.TreeGraph({
+          container: document.getElementById('graph'),
+          width: window.innerWidth - 10,
+          height: window.innerHeight - 10,
+          defaultNode: {
+            type: 'tree-node',
+            style: {
+              width: 100,
+              height: 30,
+              radius: 4,
+              fill: '#ffffff40',
+              // stroke: '#999',
+              stroke: '#161616',
+            },
+            labelCfg: {
+              style: {
+                fontSize: 14,
+              },
+            },
+          },
+          defaultEdge: {
+            type: 'right-tree',
+          },
+          layout: {
+            type: 'mindmap',
+            direction: 'H',
+            getHeight: function getHeight() {
+              return 16;
+            },
+            getWidth: function getWidth() {
+              return 16;
+            },
+            getVGap: function getVGap() {
+              return 20;
+            },
+            getHGap: function getHGap() {
+              return 120;
+            },
+          },
+          modes: {
+            default: [
+              'drag-canvas',
+              'zoom-canvas',
+              'drag-node',
+              // {
+              //   type: 'collapse-expand',
+              //   onChange(item, collapsed) {
+              //     const data = item.get('model');
+              //     data.collapsed = collapsed;
+              //     return true;
+              //   },
+              // },
+            ],
+          },
+          // plugins: [menu],
+          fitView: true,
+          fitViewPadding: 80,
+        });
+        // graph.data(vm.chart.option.series[0].data[0]);
+        // gragh.render();
+        graph.read({
+          ...vm.chart.option.series[0].data[0]
+        });
+        graph.fitView(80);
+        this.graph = graph;
+        this.bindEvents();
+      },
+      /*
+       * 1:        1
+       * 1-1:      1     1-1
+       * 1-1-1:    1     1-1     1-1-1
+       * 1-1-1-1:  1     1-1     1-1-1      1-1-1-1
+       */
+      getParentNodes(node, id, deep = 1) {
+        if (id.substring(0, 1) === '1' && deep === 1) {
+          this.crumbNavs.push(node);
+        }
+        if (id.length > 1) {
+          const $id = id.substring(0, deep * 2 + 1);
+          const $node = node.children.find(item => item.id === $id);
+
+          if ($node) {
+            this.crumbNavs.push($node);
+
+            if ($node.children && $node.children.length > 0) {
+              this.getParentNodes($node, id, deep + 1);
+            }
+          }
+        }
+      },
+      bindEvents() {
+        this.graph.on('node:click', e => {
+          const model = e.item.getModel();
+
+          if (e.target.cfg.name === 'node-icon-text') {
+            /* 展开按钮的事件 */
+            model.collapsed = !model.collapsed;
+            this.graph.updateItem(e.item, model);
+            this.graph.layout();
+            this.graph.fitView(80);;
+          } else {
+            if (model.value) {
+              let args = {
+                fileName: model.label,
+                fileUrl: model.value
+              } //当前节点及其子节点的值
+              this.preview(args);
+            } else {
+              if (model.id.length === 1) {
+                // this.chart.option.title.text = '安泰控股集团';
+              } else {
+                // this.chart.option.title.text = model.label;
+              }
+              /* 节点点击事件 */
+              // 记录当前节点 id
+              model.collapsed = false;
+              this.currentNode.id = model.id;
+              this.crumbNavs = [];
+              // 查找所有的节点路径
+              this.getParentNodes(this.chart.option.series[0].data[0], model.id);
+              this.graph.changeData(JSON.parse(JSON.stringify(model)));
+              this.graph.fitView(80);
+            }
+          }
+          e.item.toFront();
+        });
+      },
+      inputBlur() {
+        this.showInput = false;
+
+        const item = this.graph.findById(this.currentNode.id);
+        const model = item.getModel();
+
+        model.label = this.inputValue;
+        this.graph.updateItem(item, model);
+      },
+      // 编辑节点
+      editNode(item) {
+        const model = item.getModel();
+        const {
+          cacheCanvasBBox
+        } = item.get('group').cfg;
+
+        this.showInput = true;
+        this.inputValue = model.label;
+        this.currentNode.id = model.id;
+        this.input.x = cacheCanvasBBox.x;
+        this.input.y = cacheCanvasBBox.y;
+        this.$nextTick(() => {
+          this.$refs.inputController.focus();
+        });
+      },
+      deleteNode(item) {
+        const id = item.get('id');
+
+        if (id.length > 1) {
+          const parentId = id.substring(0, id.length - 2);
+          const parent = this.graph.findById(parentId);
+
+          parent.toFront();
+        }
+        this.graph.removeChild(id);
+
+        if (id.length > 1) {
+          const parentId = id.substring(0, id.length - 2);
+          const parent = this.graph.findById(parentId);
+          const model = parent.get('model');
+
+          if (model.children.length === 0) {
+            const group = parent.get('group');
+            const {
+              children
+            } = group.cfg;
+
+            const icon = children.find(child => child.name === 'node-icon');
+            const iconText = children.find(child => child.name === 'node-icon-text');
+
+            if (icon) {
+              icon.remove();
+              iconText.remove();
+            }
+          }
+        }
+      },
+      changeNode(node) {
+        if (node.id.length === 1) {
+          // this.chart.option.title.text = '安泰控股集团';
+        } else {
+          // this.chart.option.title.text = node.label;
+        }
+        this.graph.changeData(JSON.parse(JSON.stringify(node)));
+        this.graph.fitView(80);;
+      },
+      getFileTreeData() {
+        let that = this,
+          params = {
+            fileName: that.filterForm.data.fileName,
+            type: that.filterForm.data.securityTypeid,
+            fileType: that.filterForm.data.securityTag.toString()
+          };
+        that.tableLoading = true;
+        let url = 'pass/ems/v1/uploadfiles/getFileTree/?securityInfo=' + that.qrRole;
+        that.axios.get(url, {
+            params: params
+          })
+          .then(function(res) {
+            if (res.code === '0') {
+              let arr = [];
+              // that.chart.height = res.data.length * 100 + 'px';
+              arr = that.treeDataUtil(res.data, '');
+              // arr = that.getParentNodes(res.data, 1)
+              arr[0].labelCfg = {
+                style: {
+                  fontSize: 30,
+                },
+              };
+              arr[0].id = '1';
+              arr[0].collapsed = false,
+                that.chart.option.series[0].data = arr;
+              // that.setGraphical();
+              that.createGraphic();
+            } else {
+              that.$message.error(res.message);
+            }
+            that.tableLoading = false;
+          }).catch(function() {
+            that.tableLoading = false;
+          });
+      },
+      treeDataUtil(treeData, id) {
+        let that = this;
+        let data = [];
+        let children = [];
+        let children1 = [];
+        let i = 0;
+        let k = 0;
+        let j = 0;
+        let g = 0;
+        let name = '';
+        for (let item of treeData) {
+          i++;
+          if (item.fileName === null) {
+            g++;
+            if (item.children !== null) {
+              if (id == '') {
+                children = that.treeDataUtil(item.children, i);
+              } else {
+                children = that.treeDataUtil(item.children, id + '-' + g);
+              }
+            };
+            data.push({
+              collapsed: true,
+              id: id + '-' + g,
+              nodeType: 'node',
+              label: item.createMan,
+              children: children,
+            });
+            children = [];
+          } else {
+            if (name === '' || i === 1) {
+              name = item.createMan;
+            } else if (name !== item.createMan) {
+              g++;
+              for (let ch of children1) {
+                ch.id = id + '-' + g + ch.id.substring(ch.id.lastIndexOf("-"))
+              }
+              data.push({
+                collapsed: true,
+                id: id + '-' + g,
+                nodeType: 'node',
+                isCollapsed: true,
+                label: name,
+                children: children1,
+              });
+              j = 0;
+              children1 = [];
+              name = item.createMan;
+            }
+            j++;
+            children1.push({
+              id: id + '-' + g + '-' + j,
+              label: item.fileName,
+              value: item.fileUrl,
+              children: [],
+            });
+          }
+          if (i === treeData.length && children1.length !== 0) {
+            g++;
+            for (let ch of children1) {
+              ch.id = id + '-' + g + ch.id.substring(ch.id.lastIndexOf("-"))
+            }
+            data.push({
+              collapsed: true,
+              id: id + '-' + g,
+              nodeType: 'node',
+              isCollapsed: true,
+              label: name,
+              children: children1,
+            });
+          }
+        }
+        return data;
+      },
+      downloadFile(data) {
+        let that = this;
+        let SubmitData = {
+          fileName: data.fileName,
+          fileUrl: data.fileUrl
+        };
+        // 不带token访问方式，留底后端修改shiroconfig.java,application.properties
+        //     let url = '/zhongsteel.pass.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;
+        })
+      },
+      // 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);
+        }
+      },
+      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';
+        let fileExtension = data.fileName.substring(data.fileName.lastIndexOf('.') + 1);
+        if (fileExtension === 'pdf') {
+          urla = 'pass/ems/v1/uploadfiles/downloadFile/';
+          type = 'application/pdf';
+          responseType = 'blob';
+        }
+        that.tableLoading = true;
+        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 = false;
+        })
+      },
+    },
+  };
+</script>
+
+<style lang="scss">
+  .root {
+    background: linear-gradient(rgba(0,0,0,0), rgba(173, 173, 173, 0.6)), url(../../../../assets/img/img/filebg7.png) center bottom no-repeat;
+    background-size: 100% 100%;
+  }
+
+  .crumb-nav {
+    position: absolute;
+    top: 20px;
+    left: 40px;
+    background: #73bf8f;
+    border-radius: 4px;
+    color: #fff;
+  }
+
+  .nav-text {
+    display: inline-block;
+    height: 36px;
+    line-height: 36px;
+    margin: 0 10px;
+    cursor: pointer;
+  }
+
+  .g6-component-contextmenu {
+    width: 100px;
+    padding: 6px 0;
+    cursor: pointer;
+
+    .menu-item {
+      padding: 0 10px;
+      line-height: 26px;
+
+      &:hover {
+        background: #f0f0f0;
+      }
+    }
+  }
+
+  #input-controller {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 12;
+    width: 100px;
+    height: 30px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    padding-left: 6px;
+    font-size: 14px;
+  }
+
+  .text-nav {
+    position: absolute;
+    top: 40px;
+    left: 28%;
+    font-size: 60px;
+    font-weight: 600;
+    // background: #73bf8f;
+    // border-radius: 4px;
+    color: #000000;
+  }
+</style>

src/views/energyOperationSupport/components/securitys/register-behavior.js

@@ -0,0 +1,15 @@
+
+export default G6 => {
+  G6.registerBehavior('node-collaspe', {
+    getEvents () {
+      return {
+        'node:click': 'nodeOnClick',
+      };
+    },
+    nodeOnClick (e) {
+      const value = e.target.cfg.collaspe;
+
+      e.item.setState('collapse-expand', value);
+    },
+  });
+};

src/views/energyOperationSupport/components/securitys/register-edge.js

@@ -0,0 +1,55 @@
+export default G6 => {
+  G6.registerEdge('right-tree', {
+    draw (cfg, group) {
+      const xOffset = 22;
+      const yOffset = 10;
+      const { startPoint, endPoint } = cfg;
+      const Ydiff = endPoint.y - startPoint.y;
+      // 开口方向
+      const left = startPoint.x - endPoint.x > 0;
+      const QPoint = {
+        x: left ? startPoint.x - xOffset : startPoint.x + xOffset,
+        y: endPoint.y,
+      };
+      const path = Ydiff === 0 ? [
+        ['M', startPoint.x + xOffset, startPoint.y],
+        ['L', endPoint.x, endPoint.y],
+      ] : [
+          ['M', startPoint.x, startPoint.y],
+          ['L', QPoint.x, startPoint.y],
+          ['L', QPoint.x, endPoint.y + (Ydiff > 0 ? -yOffset : yOffset)],
+          ['Q', QPoint.x, QPoint.y, left ? QPoint.x - yOffset : QPoint.x + yOffset, endPoint.y],
+          ['L', endPoint.x, endPoint.y],
+      ];
+
+      const shape = group.addShape('path', {
+        attrs: {
+          path,
+          stroke: '#161616',
+          ...cfg,
+        },
+        name: 'right-tree-edge',
+      });
+
+      const { note } = cfg.targetNode.getModel();
+
+      if (note) {
+        const label = group.addShape('text', {
+          attrs: {
+            x:        QPoint.x + 6,
+            y:        endPoint.y - 3,
+            text:     note || '',
+            fill:     '#161616',
+            fontSize: 12,
+          },
+          name:   'right-tree-note',
+          zIndex: 10,
+        });
+
+        group.sort();
+        label.toFront();
+      }
+      return shape;
+    },
+  });
+};

src/views/energyOperationSupport/components/securitys/register-node.js

@@ -0,0 +1,136 @@
+/* 注册自定义节点 */
+
+export default G6 => {
+  G6.registerNode('tree-node', {
+    draw(cfg, group) {
+      const isNodeStyle = cfg.nodeType === 'node';
+      const style = this.getShapeStyle(cfg, group); // node 样式
+      const textStyle = {
+        ...style
+      }; // 文本节点样式
+      const size = G6.Util.getTextSize(cfg.label, 14);
+
+      if (!isNodeStyle) {
+        delete textStyle.fill;
+        delete textStyle.stroke;
+        textStyle.width = size[0] + 12;
+      }
+      const attrs = isNodeStyle ? style : textStyle;
+      const shape = group.addShape('rect', {
+        attrs,
+        name: 'rect-node',
+      });
+      let fontSize = 14;
+      let textAlign = 'left'
+      let content = cfg.label;
+      if (cfg.id === '1'){
+        fontSize = 22;
+        textAlign = 'start';
+        content = cfg.label.replace(/(.{10})/g, '$1\n');
+        if (cfg.label.length % 10 === 0) {
+         content = content.substring(0,content.lastIndexOf("\n"));
+        }
+      }
+      const text = group.addShape('text', {
+        attrs: {
+          fontSize: fontSize,
+          fill: '#000000',
+          textAlign: textAlign,
+          textBaseline: 'middle',
+          text: content,
+          x: 0,
+          y: 0,
+        },
+        name: 'node-label',
+      });
+      const bbox = text.getBBox();
+      const hasChildren = cfg.children && cfg.children.length > 0;
+      shape.attr({
+        x: -bbox.width / 2 - 4,
+        y: -bbox.height / 2 - 6,
+        width: bbox.width + (hasChildren ? 26 : 12),
+        height: bbox.height + 12,
+      });
+      text.attr({
+        x: -bbox.width / 2,
+        y: 0
+      })
+      if (hasChildren) {
+        let r = 6;
+        let line = 1;
+        if (cfg.id === '1'){
+          r = 8;
+          line = 2;
+        }
+        const circleX = !isNodeStyle && style.width > size[0] ? (-style.width / 2 + size[0] + 22) : (attrs.width /
+          2 + 11);
+        group.addShape('marker', {
+          attrs: {
+            x: bbox.width / 2 + 12,
+            y: 0,
+            r: r,
+            symbol: cfg.collapsed ? G6.Marker.expand : G6.Marker.collapse,
+            stroke: '#181818',
+            lineWidth: line,
+          },
+          name: 'node-icon-text',
+        });
+        // group.addShape('circle', {
+        //   attrs: {
+        //     r: 7,
+        //     fill: '#fff',
+        //     stroke: '#ccc',
+        //     x: circleX,
+        //   },
+        //   name: 'node-icon',
+        // });
+
+        // const iconX = !isNodeStyle && style.width > size[0] ? (-style.width / 2 + size[0] + 17) : (style.width /
+        //   2 + 6);
+
+        // group.addShape('text', {
+        //   attrs: {
+        //     text: '-',
+        //     fontSize: 16,
+        //     fill: '#ccc',
+        //     cursor: 'pointer',
+        //     x: iconX,
+        //     y: 6,
+        //   },
+        //   name: 'node-icon-text',
+        // });
+      }
+
+      return shape;
+    },
+    // update: (cfg, item) => {
+    //   const group = item.getContainer();
+    //   const icon = group.find((e) => e.get('name') === 'collapse-icon');
+    //   icon.attr('symbol', cfg.collapsed ? G6.Marker.expand : G6.Marker.collapse);
+    // },
+    update(cfg, node) {
+      const group = node.getContainer();
+      const children = group.get('children');
+      const nodeLabel = children.find(child => child.cfg.name === 'node-label');
+      const icon = children.find(child => child.cfg.name === 'node-icon-text');
+      let content = cfg.label;
+      if (cfg.id === '1'){
+        content = cfg.label.replace(/(.{10})/g, '$1\n')
+        if (cfg.label.length % 10 === 0) {
+         content = content.substring(0,content.lastIndexOf("\n"));
+        }
+      }
+      if (nodeLabel) {
+        nodeLabel.attr({
+          text: content,
+        });
+      }
+
+      if (icon) {
+        icon.attr(
+          'symbol', cfg.collapsed ? G6.Marker.expand : G6.Marker.collapse
+        );
+      }
+    },
+  }, 'rect');
+};

src/views/energyOperationSupport/router/index.js

@@ -45,7 +45,13 @@ import tubeQuery from '../components/rectificationPunishmentTube/tubeQuery.vue'
 // 安全文件管理
 import SecurityFile from '../components/securitys/SecurityFile.vue'
 // 安全文件管理
-import securitys from '../components/securitys/Securitys.vue'
+import securitys from '../components/securitys/Securitys.vue'
+// 安全文件一览图
+import SecurityFilePic from '../components/securitys/SecurityFilePic.vue'
+// 安全文件一览图
+import pic from '../components/securitys/pic.vue'
+// 安全文件一览图
+import pic1 from '../components/securitys/pic1.vue'
 
 Vue.use(Router)
 
@@ -162,6 +168,21 @@ export default new Router({
                 path: 'securitys',
                 name: 'securitys',
                 component: securitys
+            },
+            {
+                path: 'SecurityFilePic',
+                name: 'SecurityFilePic',
+                component: SecurityFilePic
+            },
+            {
+                path: 'pic',
+                name: 'pic',
+                component: pic
+            },
+            {
+                path: 'pic1',
+                name: 'pic1',
+                component: pic1
             }
         ]
     }]

src/views/systemInterface/components/webSocketLog.vue

@@ -24,6 +24,13 @@
                 @click="sendNotice"
                 v-privilege="activeMenu + 'SEND'"
             >选择接收人</el-button>
+            <el-button
+                type="primary"
+                size="small"
+                class="reading"
+                @click="readingMessages"
+                v-privilege="activeMenu + 'READING'"
+            >一键已读</el-button>
             <el-tabs v-model="activeName" @tab-click="handleClick" class="right-tabs">
                 <el-tab-pane label="接收人" name="receive">
                     <span slot="label"><i class="el-icon-message"></i> 接收人</span>
@@ -112,6 +119,12 @@
                 <el-tab-pane label="未读消息" name="unRead">
                     <span slot="label"><el-badge :is-dot="noticeInfo.list.length > 0" size="mini" class="item"><i class="el-icon-news"></i></el-badge> 未读消息</span>
                     <div style="width: 100%;padding: 5px 15px 0px 15px;position: relative;">
+                      <el-form
+                          size="mini"
+                          ref="dialog_form_arr"
+                          label-width="0px"
+                          :model="tableFormDataObj"
+                      >
                         <el-table
                             ref="noticeInfo"
                             v-loading="noticeInfo.loading"
@@ -121,7 +134,14 @@
                             :height="treeHeight"
                             highlight-current-row
                             :data="noticeInfo.list"
+                            @selection-change="handleSelectionChange"
                         >
+                            <el-table-column
+                              type="selection"
+                              width="30"
+                              align="center"
+                              >
+                            </el-table-column>
                             <el-table-column
                                 prop="title"
                                 label="标题"
@@ -179,6 +199,7 @@
                                 </template>
                             </el-table-column>
                         </el-table>
+                        </el-form>
                         <div class="foot-style">
                             <el-pagination
                                 @size-change="pageSizeChange"
@@ -497,6 +518,7 @@ export default {
                 }
             },
             multipleSelection: [],
+            tableFormDataObj: {},
             areaObject: {
                 title: '',
                 text: ''
@@ -784,9 +806,10 @@ export default {
                 status: status,
                 pageNum: pageNum,
                 pageSize: pageSize,
-                companyId: this.companyId
+                companyId: this.companyId,
+                userId: this.userId
             },
-            this.axios.get('pass/ems/v1/emswebsocketlogs/?state='+form.status + '&pageNum=' + form.pageNum + '&pageSize=' + form.pageSize + '&companyId=' + form.companyId).then(res => {
+            this.axios.get('pass/ems/v1/emswebsocketlogs/?state='+form.status + '&pageNum=' + form.pageNum + '&pageSize=' + form.pageSize + '&companyId=' + form.companyId + '&relation=' + form.userId).then(res => {
                 if (res.code === '0') {
                     if (status === '0') {
                         that.noticeInfo.list = res.data.list;
@@ -826,7 +849,7 @@ export default {
                           }
                         })
                         that.noticeInfo.loading = false;
-                        that.setFilterDatas(that.$refs.noticeInfo.columns, that.noticeInfo.list, ['title', 'recRole', 'sendtime', 'sendor']);
+                        that.setFilterDatas(that.$refs.noticeInfo.columns, that.noticeInfo.list, ['title', 'recRole', 'createtime', 'createman']);
                         that.noticeTable.tableParams.page.total = res.data.total;
                     } else if (status === '1') {
                       that.noticeInfo.hasReadList = res.data.list;
@@ -866,7 +889,7 @@ export default {
                         }
                       })
                       that.noticeInfo.loading2 = false;
-                      that.setFilterDatas(that.$refs.noticeInfo2.columns, that.noticeInfo.hasReadList, ['title', 'recRole', 'sendtime', 'sendor']);
+                      that.setFilterDatas(that.$refs.noticeInfo2.columns, that.noticeInfo.hasReadList, ['title', 'recRole', 'closetime', 'closeman']);
                       that.noticeTable.tableParams2.page.total = res.data.total;
                     } else {
                         that.noticeInfo.receiveList = res.data.list;
@@ -906,7 +929,7 @@ export default {
                           }
                         })
                         that.noticeInfo.loading3 = false;
-                        that.setFilterDatas(that.$refs.noticeInfo3.columns, that.noticeInfo.receiveList, ['title', 'recRole', 'sendtime', 'sendor']);
+                        that.setFilterDatas(that.$refs.noticeInfo3.columns, that.noticeInfo.receiveList, ['title', 'recRole', 'createtime', 'createman']);
                         that.noticeTable.tableParams3.page.total = res.data.total;
                     }
                 } else {
@@ -930,16 +953,30 @@ export default {
             this.$confirm('确认关闭？')
             .then(_ => {
                 done();
-                // if (this.activeName === 'unRead') {
-                //     this.noticeInfo.list.forEach((item, index) => {
-                //         if (this.noticeRow.id === item.id) {
-                //             this.noticeInfo.list.splice(index, 1);
-                //             this.noticeTable.tableParams.page.total -= 1;
-                //             this.noticeInfo.hasReadList.unshift(item);
-                //             this.noticeTable.tableParams2.page.total += 1;
-                //         }
-                //     })
-                // }
+                if (this.activeName === 'unRead' && this.userId !== 'admin') {
+                    this.noticeInfo.list.forEach((item, index) => {
+                        if (this.noticeRow.id === item.id) {
+                            this.noticeInfo.list.splice(index, 1);
+                            this.noticeTable.tableParams.page.total -= 1;
+                            this.noticeInfo.hasReadList.unshift(item);
+                            this.noticeTable.tableParams2.page.total += 1;
+                        }
+                    })
+                    let messageType = {
+                      state: '1',
+                    };
+                    this.axios.put("pass/ems/v1/emswebsocketlogs/"+this.noticeRow.id, messageType, {
+                        individualType: "json",
+                      }).then((res) => {
+                        if (res.code === "0") {
+                          // do
+                        } else {
+                          that.$message.error(res.message);
+                        }
+                      }).catch((error) => {
+                        // console.log(error.message);
+                      });
+                }
             })
             .catch((err) => {
                 console.log(err);
@@ -972,6 +1009,70 @@ export default {
             // }).catch((err) => {
             //     console.log(err);
             // })
+        },
+        // 一键已读
+        readingMessages () {
+            let that = this;
+            if (that.multipleSelection.length > 0) {
+                        let SubmitData = [];
+                        for (let key in that.tableFormDataObj) {
+                            SubmitData.push({
+                                id: that.tableFormDataObj[key].id,
+                            });
+                        }
+                        that.noticeInfo.loading = true;
+                        that.axios.put('pass/ems/v1/emswebsocketlogs/batchupdate', SubmitData)
+                            .then(function (res) {
+                                if (res.code === '0') {
+                                    that.$message({
+                                        message: '修改成功',
+                                        type: 'success'
+                                    });
+                                  for (let key in that.tableFormDataObj) {
+                                    that.noticeInfo.list.forEach((item, index) => {
+                                      if (that.tableFormDataObj[key].id === item.id) {
+                                        that.noticeInfo.list.splice(index, 1);
+                                        that.noticeTable.tableParams.page.total -= 1;
+                                        that.noticeInfo.hasReadList.unshift(item);
+                                        that.noticeTable.tableParams2.page.total += 1;
+                                      }
+                                    })
+                                  }
+                                  if (Object.keys(that.tableFormDataObj).length >= 20 || that.noticeInfo.list.length === 0){
+                                    that.getNotice('0');
+                                  }
+                                } else {
+                                    that.$message.error(res.message);
+                                }
+                                that.noticeInfo.loading = false;
+                            }).catch(function () {
+                                that.noticeInfo.loading = false;
+                            });
+            } else {
+                this.$message.error('至少要选择一条数据');
+            }
+        },
+        handleSelectionChange (val) {
+            let that = this;
+            let tableFormDataObj = {};
+            for (let item of that.noticeInfo.list) {
+                item.isSelection = false;
+            }
+            for (let item of val) {
+                let obj = {};
+                let xId = item.id;
+                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 = JSON.parse(JSON.stringify(tableFormDataObj));
+            that.multipleSelection = val;
         }
     }
 }
@@ -1169,6 +1270,12 @@ export default {
     top: 6px;
     right: 15px;
 }
+.reading {
+    z-index: 1999;
+    position: absolute;
+    top: 6px;
+    right: 200px;
+}
 .cover {
     width: 100%;
     height: 100%;