ソースを参照

图例库select筛选规则

shaun-sheep 4 年 前
コミット
b89adebc90
2 ファイル変更55 行追加4 行削除
  1. 28 2
      src/views/legendLibrary/index.vue
  2. 27 2
      src/views/legendRules/index.vue

+ 28 - 2
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'>
             图例库管理
@@ -183,6 +186,13 @@ export default {
                 { id: '0', name: '已作废' }
             ],
             Type: 'all', //所属分类
+            selText: '图例库管理',
+            selVal: '0',
+            dataSelect: [
+                { id: '0', name: '图例库管理' },
+                { id: '1', name: '图例绘制规则' }
+            ],
+
             typeOptions: [
                 {
                     id: 'all',
@@ -225,6 +235,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() {
@@ -417,6 +440,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);

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

@@ -7,8 +7,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-rules-top'>
             图例绘制规则
@@ -109,9 +112,28 @@ export default {
                     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: {
         /**
          * 点击工具栏按钮回调方法
@@ -228,6 +250,9 @@ export default {
             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;