From 6bce1997cef9a58142258c0e12828f76d05762b1 Mon Sep 17 00:00:00 2001
From: 徐旺旺 <11530253@qq.com>
Date: 星期一, 08 三月 2021 14:49:40 +0800
Subject: [PATCH] 菜单组件联动
---
src/components/panel/RightSearchPanel.vue | 37 +++++-------------
src/components/panel/MenuTopic.vue | 8 ++--
src/conf/Topic.js | 36 +++++++++++++-----
src/components/panel/topicSearch/DischargeSearch.vue | 2
4 files changed, 42 insertions(+), 41 deletions(-)
diff --git a/src/components/panel/MenuTopic.vue b/src/components/panel/MenuTopic.vue
index 6f949fe..2b5383a 100644
--- a/src/components/panel/MenuTopic.vue
+++ b/src/components/panel/MenuTopic.vue
@@ -7,12 +7,12 @@
@click="toggle()">
<div id="menu-special-context" class="menu-special-context">
<el-checkbox-button v-show="isShow" class="menu-special-item" v-model="topicSelectAll.check" :checked="topicSelectAll.checked" @change="checkedSpecialChangeAll(topicSelectAll)">
- <div style="height: 1rem;width: 1rem;display: inline-flex;"> <img :src="topicSelectAll.icon" ></div>
+ <div style="height: 1rem;width: 1rem;display: inline-flex;"><img :src="topicSelectAll.icon" ></div>
{{ topicSelectAll.name }}</el-checkbox-button>
<el-checkbox-group :indeterminate="isIndeterminate" v-show="isShow" v-model="topicCheckedList" size="medium" @change="checkedGroupSpecialChange">
- <el-checkbox-button class="menu-special-item" v-for="item in topicList" :label="item.name" :key="item.id" :checked="item.checked" @change="checkedSpecialChange(item)">
- <div style="height: 1rem;width: 1rem;display: inline-flex;"> <img :src="item.icon" ></div>
+ <el-checkbox-button class="menu-special-item" v-for="item in topicList" :label="item" :key="item.id" :checked="item.checked" @change="checkedSpecialChange(item)">
+ <div style="height: 1rem;width: 1rem;display: inline-flex;"><img :src="item.icon" ></div>
{{item.name}}</el-checkbox-button>
</el-checkbox-group>
<!-- <ul class="menu-special-item" v-for="item in SpecialList" :key="item.id">-->
@@ -53,7 +53,7 @@
this.$store.commit('setTopic', this.topicCheckedList)
},
checkedSpecialChangeAll (val) {
- this.topicCheckedList = val.check ? this.topicList.map(item => item.name) : []
+ this.topicCheckedList = val.check ? this.topicList.map(item => item) : []
this.isIndeterminate = false
this.$store.commit('setTopic', this.topicCheckedList)
},
diff --git a/src/components/panel/RightSearchPanel.vue b/src/components/panel/RightSearchPanel.vue
index 9462fe7..4976bac 100644
--- a/src/components/panel/RightSearchPanel.vue
+++ b/src/components/panel/RightSearchPanel.vue
@@ -1,7 +1,7 @@
<template>
<div id="right-panel">
<div class="panel-tab">
- <div v-for="item in topicMenu" :key="item.id" :title="item.name" class="tab-item" @click="handleGd" :class="{'B-TMT-tab-waybill-isActive': isWaybillHover}">
+ <div v-for="item in topicMenu" :key="item.id" :title="item.name" class="tab-item" @click="handleClick(item)">
<img :src="item.icon" style="width: 24px;height: 24px;"></div>
<!-- <div class="tab-item" @click="handleHb" :class="{'B-TMT-tab-route-isActive': isRouteHover}"></div>-->
@@ -20,21 +20,16 @@
<script>
import $ from 'jquery'
-import EnvProtectSearch from './topicSearch/EnvProtectSearch'
-import DischargeSearch from './topicSearch/DischargeSearch'
-import { TopicList } from '../../conf/Topic'
-
-import SewersSearch from '@components/panel/topicSearch/SewersSearch'
+import { TopicComp, TopicList } from '../../conf/Topic'
export default {
name: 'MonitorPanel',
- components: { EnvProtectSearch, DischargeSearch },
+ components: TopicComp,
data () {
return {
- topicMenu: [],
topicList: TopicList,
topicCheckedList: [],
isPanelVisible: false,
- gcComp: SewersSearch,
+ gcComp: 'sewersSearch',
gdVisible: true,
hbVisible: false,
@@ -45,21 +40,10 @@
}
},
- computed: {},
- watch: {
- '$store.state.map.topic.topicCheckedList': function (newVal, oldVal) {
- console.log(oldVal)
- console.log(newVal)
- this.topicCheckedList = newVal
- this.topicMenu = []
- this.topicList.forEach((item) => {
- this.topicCheckedList.forEach((itm) => {
- if (item.name === itm) {
- // item.checked = tr
- this.topicMenu.push(item)
- }
- })
- })
+ computed: {
+ topicMenu () {
+ console.log(this.$store.state.map.topic.topicCheckedList)
+ return this.$store.state.map.topic.topicCheckedList
}
},
methods: {
@@ -69,8 +53,9 @@
handlePage (page) {
},
- handleGd () {
- this.title = '绠￠亾淇℃伅鏌ヨ'
+ handleClick (item) {
+ this.title = item.name
+ this.gcComp = item.comp
},
toggleMonitorPanel () {
const el = $('.btn-stretch')
diff --git a/src/components/panel/topicSearch/DischargeSearch.vue b/src/components/panel/topicSearch/DischargeSearch.vue
index 0b14697..ed987f9 100644
--- a/src/components/panel/topicSearch/DischargeSearch.vue
+++ b/src/components/panel/topicSearch/DischargeSearch.vue
@@ -91,7 +91,7 @@
components: {},
data () {
return {
- isPanelVisible: false,
+ isPanelVisible: true,
total: 0,
list: [],
form: {
diff --git a/src/conf/Topic.js b/src/conf/Topic.js
index fb1faa3..a8e25e4 100644
--- a/src/conf/Topic.js
+++ b/src/conf/Topic.js
@@ -4,54 +4,70 @@
icon: '/assets/images/menu/special.png'
}
+export const TopicComp = {
+ dischargeSearch: () => import('@components/panel/topicSearch/DischargeSearch'),
+ envProtectSearch: () => import('@components/panel/topicSearch/EnvProtectSearch'),
+ sewersSearch: () => import('@components/panel/topicSearch/SewersSearch.vue')
+}
+
export const TopicList = [{
name: '姹℃煋婧�',
id: 1,
check: false,
- icon: '/assets/images/menu/special.png'
+ icon: '/assets/images/menu/special.png',
+ comp: 'dischargeSearch'
}, {
name: '搴熸按鐩戞祴',
id: 2,
checked: false,
- icon: '/assets/images/menu/special.png'
+ icon: '/assets/images/menu/special.png',
+ comp: 'envProtectSearch'
}, {
name: '搴熸皵鐩戞祴',
id: 3,
checked: false,
- icon: '/assets/images/menu/special.png'
+ icon: '/assets/images/menu/special.png',
+ comp: 'dischargeSearch'
}, {
name: '鍥哄簾绠＄悊',
id: 4,
checked: false,
- icon: '/assets/images/menu/special.png'
+ icon: '/assets/images/menu/special.png',
+ comp: 'envProtectSearch'
}, {
name: '鐜椋庨櫓',
id: 5,
checked: false,
- icon: '/assets/images/menu/special.png'
+ icon: '/assets/images/menu/special.png',
+ comp: 'dischargeSearch'
}, {
name: '鍦熷￥鍙婂湴涓嬫按',
id: 6,
checked: false,
- icon: '/assets/images/menu/special.png'
+ icon: '/assets/images/menu/special.png',
+ comp: 'dischargeSearch'
}, {
name: '姹￠洦姘寸缃�',
id: 7,
checked: false,
- icon: '/assets/images/menu/special.png'
+ icon: '/assets/images/menu/special.png',
+ comp: 'envProtectSearch'
}, {
name: '棰勮鎶ヨ',
id: 8,
checked: false,
- icon: '/assets/images/menu/special.png'
+ icon: '/assets/images/menu/special.png',
+ comp: 'sewersSearch'
}, {
name: '鎸囨爣缁熻',
id: 9,
checked: false,
- icon: '/assets/images/menu/special.png'
+ icon: '/assets/images/menu/special.png',
+ comp: 'envProtectSearch'
}, {
name: '搴旀�ュ湴鍥�',
id: 10,
checked: false,
- icon: '/assets/images/menu/special.png'
+ icon: '/assets/images/menu/special.png',
+ comp: 'sewersSearch'
}]
--
Gitblit v1.8.0