zhulizhen1111 4 年 前
コミット
56e5638a13

+ 4 - 26
src/views/legendLibrary/addForm.vue

@@ -87,17 +87,9 @@
         <div v-if='ruleForm.Type!="None"' class='form4'>
             <div class='form4-top'>
                 <span class='form4-span1'>专业/设备、位置类型:</span>
-                <!-- <span class='form4-span1'>对应工程信息化中的位置/设备分类</span>
-                <span class='form4-span2'>工程信息化的专业</span>-->
                 <span class='form4-span3'>铺位可视化typeid</span>
             </div>
             <div class='form3-bottom'>
-                <!-- <el-select v-model='value' placeholder='请选择' size='small' style='width:200px;margin-right:48px;'>
-                    <el-option v-for='item in options1' :key='item.value' :label='item.label' :value='item.value'></el-option>
-                </el-select>
-                <el-select v-model='value' placeholder='请选择' size='small' style='width:200px;margin-right:48px'>
-                    <el-option v-for='item in options2' :key='item.value' :label='item.label' :value='item.value'></el-option>
-                </el-select>-->
                 <span class='device-list'>
                     <TreeSelect
                         tipPlace='top'
@@ -111,19 +103,6 @@
                         :hideClear='true'
                     />
                 </span>
-
-                <!-- <TreeSelect
-                    tipPlace='top'
-                    width='200'
-                    style=' margin-right:48px;'
-                    :notNull='true'
-                    :returnParentNode='false'
-                    :isShowAllChoice='true'
-                    :choseArea='true'
-                    :data='majorList'
-                    @change='treeConfirmMajor'
-                />-->
-
                 <TreeSelect
                     tipPlace='top'
                     width='200'
@@ -169,7 +148,7 @@ export default {
             ],
             options1: [],
             options2: [],
-            options3: [],
+
             borderLineOption: [
                 {
                     id: 'solid',
@@ -393,10 +372,7 @@ export default {
             //console.log(data, 'data')
             this.$set(this.ruleForm, 'InfoTypeId', data)
         },
-        //专业
-        // treeConfirmMajor(id, info) {
-        //     // this.$set(this.ruleForm, 'InfoSystem', data)
-        // },
+
         //位置/设备
         treeConfirmDevice(id, info) {
             // this.$set(this.ruleForm, 'InfoLocal', data)
@@ -406,9 +382,11 @@ export default {
                 let type = info[i]
                 if (type.name.includes('/')) {
                     InfoLocal.push(type)
+                    //位置/设备
                     this.$set(this.ruleForm, 'InfoLocal', InfoLocal)
                 } else {
                     InfoSystem.push(type)
+                    //专业
                     this.$set(this.ruleForm, 'InfoSystem', InfoSystem)
                 }
             }

+ 52 - 22
src/views/legendLibrary/index.vue

@@ -6,8 +6,11 @@
             <img class='img-logo' src='@/assets/imgs/logo_tu.png' alt />
             <span style='color:#1F2329'>万达管理说明书</span>
             <span class='circular'></span>
-            <span style='color:#1F2329'>图例库管理</span>
-            <i class='el-icon-caret-bottom'></i>
+            <!-- <span style='color:#1F2329'>图例库管理</span>
+            <i class='el-icon-caret-bottom'></i>-->
+            <Dropdown v-model='selVal' :data='dataSelect'>
+                <span style=' font-size: 14px;color: #1f2329 ;'>{{selText}}</span>
+            </Dropdown>
         </div>
         <div class='legend-library-top'>
             图例库管理
@@ -48,7 +51,7 @@
                         width='280'
                         style='margin:0 12px'
                         :isShowAllChoice='true'
-                        :returnParentNode='false'
+                        :returnParentNode='true'
                         :choseArea='true'
                         :data='deviceList'
                         :hideClear='true'
@@ -108,18 +111,26 @@
                     <template slot-scope='{row}'>{{row.Unit || '--'}}</template>
                 </el-table-column>
                 <el-table-column prop='position' label='对应广场说明书的位置'>
-                    <template slot-scope='{row}'>{{row.position || '--'}}</template>
+                    <template slot-scope='{row}'>
+                        <span v-for='item in row.GraphCategorys ' :key='item.Name'>{{item.Name}}</span>
+                    </template>
                 </el-table-column>
                 <el-table-column label='对应工程信息化' align='center'>
-                    <el-table-column prop='type' label='位置/设备分类' width='240'>
-                        <template slot-scope='{row}'>{{row.InfoLocal || '--'}}</template>
+                    <el-table-column prop='type' label='位置/设备分类' width='240' :show-overflow-tooltip='true'>
+                        <template slot-scope='{row}'>
+                            <span v-for='item in row.InfoLocal ' :key='item.name'>{{item.name}}</span>
+                        </template>
                     </el-table-column>
                     <el-table-column prop='system' label='专业'>
-                        <template slot-scope='{row}'>{{row.InfoSystem || '--'}}</template>
+                        <template slot-scope='{row}'>
+                            <span v-for='(item,index) in row.InfoSystem ' :key='index'>{{item}}</span>
+                        </template>
                     </el-table-column>
                 </el-table-column>
                 <el-table-column prop='typeId' resizable label='铺位可视化typeid' width='140'>
-                    <template slot-scope='{row}'>{{row.InfoSystem || '--'}}</template>
+                    <template slot-scope='{row}'>
+                        <span v-for='(item,index) in row.InfoTypeId ' :key='index'>{{item}}</span>
+                    </template>
                 </el-table-column>
                 <el-table-column label='操作' width='100' v-if='state==1'>
                     <template slot-scope='scope' v-if='state==1'>
@@ -176,6 +187,13 @@ export default {
                 { id: '0', name: '已作废' }
             ],
             Type: 'all', //所属分类
+            selText: '图例库管理',
+            selVal: '0',
+            dataSelect: [
+                { id: '0', name: '图例库管理' },
+                { id: '1', name: '图例绘制规则' }
+            ],
+
             typeOptions: [
                 {
                     id: 'all',
@@ -218,6 +236,19 @@ export default {
             InfoTypeIds: undefined //铺位可视化typeid
         }
     },
+    watch: {
+        selVal(n, o) {
+            if (n === o) return
+            this.selText = this.dataSelect.find(d => d.id === n).name
+            console.log(n, o)
+            if (n == 0) {
+                this.$router.push({ path: 'legendLibrary' })
+            }
+            if (n == 1) {
+                this.$router.push({ path: 'legendRules' })
+            }
+        }
+    },
     methods: {
         //业下设备分类和位置分类树形结构
         initQueryDeviceAndPOsition() {
@@ -355,20 +386,16 @@ export default {
         // },
         //位置/设备
         treeConfirmDevice(id, info) {
-            // console.log(id, info)
-            // var a = []
-            // var d = []
-            // for (let i = 0; i < info.length; i++) {
-            //     let type = info[i]
-            //     if (type.name.includes('/')) {
-            //         a.push(type)
-            //     } else {
-            //         d.push(type)
-            //     }
-            // }
-            // console.log('a:', a, 'd:', d)
-
-            this.InfoLocals = id
+            this.InfoSystems = []
+            this.InfoLocals = []
+            for (let i = 0; i < info.length; i++) {
+                let type = info[i]
+                if (type.name.includes('/')) {
+                    this.InfoLocals.push(type.id)
+                } else {
+                    this.InfoSystems.push(type.id)
+                }
+            }
             this.getTableList()
         },
         //说明书位置
@@ -415,6 +442,9 @@ export default {
             margin: 0 8px 3px 8px;
         }
     }
+    /deep/ .p-drop .p-drop-title .p-drop-triangle {
+        margin-top: -5px;
+    }
     .legend-library-top {
         height: 48px;
         background: rgba(247, 249, 250, 1);

+ 139 - 2
src/views/legendRules/index.vue

@@ -1,6 +1,18 @@
 <template>
     <!-- 图例库首页 -->
     <div class='legend-rules'>
+        <div class='nav'>
+            <img class='img-menu' src='@/assets/imgs/menu.png' alt />
+            <el-divider direction='vertical'></el-divider>
+            <img class='img-logo' src='@/assets/imgs/logo_tu.png' alt />
+            <span style='color:#1F2329'>万达管理说明书</span>
+            <span class='circular'></span>
+            <!-- <span style='color:#1F2329'>图例绘制规则</span>
+            <i class='el-icon-caret-bottom'></i>-->
+            <Dropdown v-model='selVal' :data='dataSelect'>
+                <span style=' font-size: 14px;color: #1f2329 ;'>{{selText}}</span>
+            </Dropdown>
+        </div>
         <div class='legend-rules-top'>
             图例绘制规则
             <el-button type='primary' class='rules-button' size='small' @click='add'>添加图例</el-button>
@@ -19,7 +31,7 @@
                 ></a-tree>
             </div>
             <div class='legend-rules-right'>
-                <el-table :data='tableData' style='width: 100%'>
+                <!-- <el-table :data='tableData' style='width: 100%'>
                     <el-table-column prop='Name' label='图例名称'>
                         <template slot-scope='{row}'>{{row.Name || '--'}}</template>
                     </el-table-column>
@@ -37,7 +49,17 @@
                             <el-button @click='deleteClick(scope.row)' type='text' size='small'>删除</el-button>
                         </template>
                     </el-table-column>
-                </el-table>
+                </el-table>-->
+                <Table
+                    :head='headList2'
+                    :source='tableData'
+                    :toolButtons='toolBtns'
+                    :selectWidth='180'
+                    height='100%'
+                    @tool-button-click='buttonClickHandle'
+                >
+                    <img slot-scope='{col, row}' v-if='col.key==="Url"' class='img' :src='`/serve/topology-wanda/Picture/query/${row.Url}`' alt />
+                </Table>
             </div>
         </div>
         <add-legend ref='addLegend' @mesg='mesg'></add-legend>
@@ -57,10 +79,101 @@ export default {
                 children: 'Category',
                 title: 'Name',
                 key: 'Id'
+            }, //test
+            // 可筛选表格表头列表
+            headList2: [
+                {
+                    title: '图例名称', // 列的名称
+                    key: 'Name', // 列的标识
+                    show: true // 是否显示该列
+                },
+                {
+                    title: '图例样式',
+                    key: 'Url',
+                    show: true
+                },
+                {
+                    title: '单位',
+                    key: 'Unit',
+                    show: true
+                }
+            ],
+            // 操作按钮组 (非必填)
+            toolBtns: [
+                {
+                    icon: 'copy',
+                    name: '上移'
+                },
+                {
+                    icon: 'print',
+                    name: '下移'
+                },
+                {
+                    icon: 'pending',
+                    name: '删除'
+                }
+            ],
+            selText: '图例绘制规则',
+            selVal: '0',
+            dataSelect: [
+                { id: '0', name: '图例库管理' },
+                { id: '1', name: '图例绘制规则' }
+            ]
+        }
+    },
+    watch: {
+        selVal(n, o) {
+            if (n === o) return
+            this.selText = this.dataSelect.find(d => d.id === n).name
+            console.log(n, o)
+            if (n == 0) {
+                this.$router.push({ path: 'legendLibrary' })
+            }
+            if (n == 1) {
+                this.$router.push({ path: 'legendRules' })
             }
         }
     },
     methods: {
+        /**
+         * 点击工具栏按钮回调方法
+         * @param {Object} Obj {tool:{icon:'icon组件名称',name:'按钮名称',type:'icon组件type'},item:当前行数据}
+         */
+        buttonClickHandle(obj) {
+            let index = Number(obj.item.index.split('-')[1])
+            let _this = this
+            switch (obj.tool.name) {
+                case '删除':
+                    this.deleteClick(obj.item)
+                    break
+                case '上移':
+                    up()
+                    break
+                case '下移':
+                    down()
+                    break
+            }
+            function up() {
+                if (index == 0) {
+                    _this.$message.error('处于顶端,不可再上移')
+                } else {
+                    let upDate = _this.tableData[index - 1]
+                    _this.tableData.splice(index - 1, 1)
+                    _this.tableData.splice(index, 0, upDate)
+                }
+            }
+
+            function down() {
+                if (index == _this.tableData.length - 1) {
+                    _this.$message.error('处于底端,不可再下移')
+                } else {
+                    let downDate = _this.tableData[index + 1]
+                    _this.tableData.splice(index + 1, 1)
+                    _this.tableData.splice(index, 0, downDate)
+                }
+            }
+        },
+
         handleNodeClick(data, e) {
             this.GraphCategoryId = [e.node.eventKey]
             this.getData()
@@ -116,6 +229,30 @@ export default {
     display: flex;
     flex-direction: column;
     color: #1f2329;
+    .nav {
+        height: 48px;
+        line-height: 48px;
+        width: 100%;
+        background: #fff;
+        margin-left: 17px;
+        .img-menu {
+            margin-right: 9px;
+        }
+        .img-logo {
+            margin: 0 9px;
+        }
+        .circular {
+            display: inline-block;
+            width: 4px;
+            height: 4px;
+            background: rgba(195, 198, 203, 1);
+            border-radius: 50%;
+            margin: 0 8px 3px 8px;
+        }
+    }
+    /deep/ .p-drop .p-drop-title .p-drop-triangle {
+        margin-top: -5px;
+    }
     .legend-rules-top {
         text-align: center;
         height: 48px;