| | |
| | | </div> |
| | | </li> |
| | | </ul> --> |
| | | <ul v-for="item in topicList" :key="item.name" |
| | | <ul v-for="item in list" :key="item.name" |
| | | :class="item.checked?'module-wrap map-btn-active':'module-wrap map-btn-unactive'" |
| | | @click="()=>{selected(item)}" v-show="item.isShow"> |
| | | <el-tooltip :popper-class="'map-tooltip'" effect="dark" :content="item.name" placement="left"> |
| | |
| | | <script> |
| | | import EnvRiskSearch from './topicSearch/EnvRiskSearch' |
| | | import DischargeSearch from './topicSearch/DischargeSearch' |
| | | import { TopicList } from '../../conf/Topic' |
| | | import { topicList } from '../../conf/Topic' |
| | | |
| | | import GasWasteSearch from '@components/panel/topicSearch/GasWasteSearch' |
| | | import WaterWasteSearch from '@components/panel/topicSearch/WaterWasteSearch' |
| | | import WasteGasSearch from '@components/panel/topicSearch/WasteGasSearch' |
| | | import WasteWaterSearch from '@components/panel/topicSearch/WasteWaterSearch' |
| | | import SolidWasteSearch from '@components/panel/topicSearch/SolidWasteSearch' |
| | | import SewersSearch from '@components/panel/topicSearch/SewersSearch' |
| | | import SoilGroundWaterSearch from '@components/panel/topicSearch/SoilGroundWaterSearch.vue' |
| | |
| | | import PipeInformationSearch from '@components/panel/topicSearch/pipeInformationSearch.vue' |
| | | import EnterpriseEmergencySearch from './topicSearch/EnterpriseEmergencySearch' |
| | | |
| | | import bus from '@/eventBus' |
| | | |
| | | export default { |
| | | name: 'MonitorPanel', |
| | | components: { |
| | | GasWasteSearch, |
| | | WaterWasteSearch, |
| | | WasteGasSearch, |
| | | WasteWaterSearch, |
| | | SolidWasteSearch, |
| | | EnvRiskSearch, |
| | | DischargeSearch, |
| | |
| | | return { |
| | | isShow: true, |
| | | topicMenu: [], |
| | | topicList: TopicList, |
| | | list: topicList, |
| | | topicCheckedList: [], |
| | | isPanelVisible: false, |
| | | gcComp: SewersSearch, |
| | |
| | | selectGroup: false |
| | | } |
| | | }, |
| | | computed: {}, |
| | | computed: { |
| | | serviceLayers () { |
| | | return this.$store.state.map.serviceLayers.LayerSewersLine |
| | | } |
| | | }, /* |
| | | watch: { |
| | | '$store.state.map.topic.topicCheckedList': function (newVal, oldVal) { |
| | | console.log(oldVal) |
| | |
| | | }) |
| | | }) |
| | | } |
| | | }, |
| | | }, */ |
| | | methods: { |
| | | handleClose (done) { |
| | | console.log(done) |
| | | }, |
| | | setSearchPanelChange () { |
| | | // 搜索面板没有显示时,将所有主题选择状态设置为false |
| | | this.selectGroup = !this.selectGroup |
| | | if (!this.selectGroup) { |
| | | this.topicList.forEach((itm) => { |
| | | this.list.forEach((itm) => { |
| | | itm.checked = false |
| | | }) |
| | | } |
| | | }, |
| | | unselected (val) { |
| | | // console.log(val) |
| | | this.selectGroup = true |
| | | this.list.forEach((itm) => { |
| | | if (itm.name === val.name) { |
| | | console.log(val.name) |
| | | itm.checked = false |
| | | itm.isShow = false |
| | | } |
| | | }) |
| | | }, |
| | | selected (val) { |
| | | // console.log(val) |
| | | this.title = val.name |
| | | this.selectGroup = true |
| | | this.topicList.forEach((itm) => { |
| | | itm.checked = val.name === itm.name |
| | | this.list.forEach((itm) => { |
| | | if (itm.name === val.name) { |
| | | itm.isShow = true |
| | | itm.checked = true |
| | | } else { |
| | | itm.checked = false |
| | | } |
| | | }) |
| | | this.setComp(val) |
| | | }, |
| | | setComp (val) { |
| | | this.title = val.name |
| | | switch (val.name) { |
| | | case '污染源': |
| | | this.gcComp = DischargeSearch |
| | | break |
| | | case '废水': |
| | | this.gcComp = WaterWasteSearch |
| | | this.gcComp = WasteWaterSearch |
| | | break |
| | | case '废气': |
| | | this.gcComp = GasWasteSearch |
| | | this.gcComp = WasteGasSearch |
| | | break |
| | | case '固废': |
| | | this.gcComp = SolidWasteSearch |
| | |
| | | } |
| | | }, |
| | | handlePage (page) { |
| | | }, |
| | | handleGd () { |
| | | this.title = '管道信息查询' |
| | | }, |
| | | toggleMonitorPanel () { |
| | | this.isCollapse = !this.isCollapse |
| | |
| | | // }) |
| | | // } |
| | | }, |
| | | defaultLastOne () { |
| | | let v = {} |
| | | this.topicList.forEach((item) => { |
| | | if (item.isShow) { |
| | | v = item |
| | | containsLayer (layer) { |
| | | if (layer) { |
| | | for (let i = 0; i < layer.length; i++) { |
| | | const lay = layer[i] |
| | | const checked = lay.checked |
| | | |
| | | for (let j = 0; j < this.list.length; j++) { |
| | | const topic = this.list[j] |
| | | if (lay.name === topic.name) { |
| | | if (lay.layers) { |
| | | const isChecked = this.isChecked(lay.layers) |
| | | if (isChecked) { |
| | | this.selected(topic) |
| | | } else { |
| | | this.unselected(topic) |
| | | } |
| | | } else if (checked) { |
| | | this.selected(topic) |
| | | } |
| | | break |
| | | } |
| | | } |
| | | this.containsLayer(lay.layers) |
| | | } |
| | | }) |
| | | this.selected(v) |
| | | } |
| | | }, |
| | | isChecked (layers) { |
| | | for (let i = 0; i < layers.length; i++) { |
| | | const layer = layers[i] |
| | | const checked = layer.checked |
| | | if (checked) { |
| | | return true |
| | | } |
| | | if (layer.layers) { |
| | | return this.isChecked(layer.layers) |
| | | } |
| | | } |
| | | return false |
| | | } |
| | | }, |
| | | mounted () { |
| | | const that = this |
| | | bus.$on('changeSearchBar', function (obj) { |
| | | that.gcComp = '' |
| | | that.topicList.forEach((item) => { |
| | | if (item.name === obj.name) { |
| | | if (obj.type > 0) { |
| | | item.isShow = true |
| | | } else { |
| | | item.isShow = false |
| | | } |
| | | // item.isShow = obj.checked |
| | | if (item.isShow) { |
| | | that.selected(item) |
| | | } else { |
| | | that.defaultLastOne() |
| | | } |
| | | } |
| | | }) |
| | | }) |
| | | // console.log(that.topicList) |
| | | /* bus.$on('changeSearchBar', (obj) => { |
| | | const topic = this.search(this.serviceLayers, obj) |
| | | console.log('====' + JSON.stringify(topic)) |
| | | }) */ |
| | | }, |
| | | watch: { |
| | | serviceLayers: { |
| | | handler: function (newVal, oldVal) { |
| | | this.containsLayer(newVal) |
| | | }, |
| | | immediate: true, |
| | | deep: true |
| | | } |
| | | } |
| | | } |
| | | </script> |