| | |
| | | <i class="downUp el-icon-caret-bottom" @click="item.isShow=!item.isShow" :class="item.isShow?'':'active'" ></i><!-- el-icon-arrow-down --> |
| | | <!-- 一级图层遍历 --> |
| | | <div style="padding-left:25px;padding-top:10px;color:#fff;font-size: 16px;"> |
| | | <input type="checkbox" :class="item.type==1?'active':''" :name="'wmsLayer_'+item.code" :checked="item.checked" :value="item.code" @change="swAllLayers(item)"/>{{ item.name }} |
| | | <input type="checkbox" :class="{ 'active': item.type === 1 }" :name="'wmsLayer_'+item.code" :checked="item.checked" :value="item.code" @change="swAllLayers(item)"/>{{ item.name }} |
| | | </div> |
| | | <div class="layerbox-item" v-show="item.isShow" > |
| | | <!-- 二级图层遍历 --> |
| | | <div class="basemap-layer-item" v-for="(itm,index2) in item.layers" :key="index2" :class="!itm.layers?'felxs':''" > |
| | | <input type="checkbox" :class="itm.type==1?'active':''" :name="'wmsSublayers_'+item.code+'_'+itm.code" :checked="itm.checked" :value="itm.code" @change="swAllLayers(itm)"/>{{ itm.name }} |
| | | <input type="checkbox" :class="{ 'active': itm.type === 1 }" :name="'wmsSublayers_'+item.code+'_'+itm.code" :checked="itm.checked" :value="itm.code" @change="swAllLayers(itm)"/>{{ itm.name }} |
| | | <!-- 三级图层遍历 --> |
| | | <div class="layerbox-item-3" v-show="itm.layers"> |
| | | <div class="basemap-layer-item" v-for="(layer,index3) in itm.layers" :key="index3"> |
| | | <input type="checkbox" |
| | | :class="layer.type==1?'active':''" |
| | | :class="{ 'active': layer.type === 1 }" |
| | | :name="'wmsSublayers_'+item.code+'_'+layer.code" |
| | | :checked="layer.checked" |
| | | :value="layer.code" |
| | |
| | | } else { |
| | | this.toggleLayer(item) |
| | | } |
| | | this.serviceLayers.forEach(function (item1, index1) { |
| | | if (item1.layers) { |
| | | item1.istrue = 0 |
| | | item1.isfalse = 0 |
| | | item1.layers.forEach(function (item2, index2) { |
| | | if (item2.layers) { |
| | | item2.istrue = 0 |
| | | item2.isfalse = 0 |
| | | item2.layers.forEach(function (item3, index3) { |
| | | if (item3.checked) { item2.istrue += 1 } else { item2.isfalse += 1 } |
| | | }) |
| | | // console.log(item2.layers.length, item2.istrue, item2.isfalse, item2.type) |
| | | if (item2.istrue === item2.layers.length) { |
| | | item2.type = 2 |
| | | item2.checked = true |
| | | } else if (item2.isfalse === item2.layers.length) { |
| | | item2.type = 0 |
| | | item2.checked = false |
| | | } else { |
| | | item2.type = 1 |
| | | } |
| | | if (item1.name === '专题图层') { |
| | | bus.$emit('changeSearchBar', item2) |
| | | // console.log(item2, 'item2') |
| | | } |
| | | if (item2.checked) { item1.istrue += 1 } else { item1.isfalse += 1 } |
| | | } |
| | | }) |
| | | if (item1.istrue === item1.layers.length) { |
| | | item1.type = 2 // 全选 |
| | | item1.checked = true |
| | | } else if (item1.isfalse === item1.layers.length) { |
| | | item1.type = 0 // 不选 |
| | | item1.checked = false |
| | | } else { |
| | | item1.type = 1 // 半选 |
| | | } |
| | | if (item1.name === '企业应急') { |
| | | console.log(item1) |
| | | bus.$emit('changeSearchBar', item1) |
| | | } |
| | | // console.log(item1.layers.length, item1.istrue, item1.isfalse, item1.type) |
| | | } |
| | | }) |
| | | bus.$emit('changeSearchBar', item) |
| | | |
| | | // console.log(this.serviceLayers) |
| | | }, |
| | | swLayers (configs, checked) { |
| | |
| | | } |
| | | } |
| | | }, |
| | | setLayerType (configs, checkedSum) { |
| | | if (configs) { |
| | | for (let i = 0, len = configs.length; i < len; ++i) { |
| | | const config = configs[i] |
| | | const checked = config.checked |
| | | if (config.layers) { |
| | | checkedSum = this.setLayerType(config.layers, checkedSum || 0) |
| | | if (checkedSum === config.layers.length) { |
| | | config.type = 2 |
| | | config.checked = true |
| | | } else if (checkedSum === 0) { |
| | | config.type = 0 |
| | | config.checked = false |
| | | } else { |
| | | config.type = 1 |
| | | } |
| | | checkedSum = 0 |
| | | continue |
| | | } |
| | | checkedSum = checkedSum + (checked ? 1 : 0) |
| | | } |
| | | return checkedSum |
| | | } |
| | | }, |
| | | toggleLayer (itm) { |
| | | if (itm.checked) { |
| | | window.layerFactory.show(itm) |
| | |
| | | } |
| | | // this.updateWms() |
| | | } |
| | | }, |
| | | watch: { |
| | | serviceLayers: { |
| | | handler: function (val) { |
| | | this.setLayerType(val, 0) |
| | | }, |
| | | immediate: true, |
| | | deep: true |
| | | } |
| | | } |
| | | } |
| | | </script> |
| | |
| | | var point = this.map.latLngToContainerPoint(latlng, this.map.getZoom()) |
| | | const wmsLayerService = window.layerFactory.wmsLayerService |
| | | const layers = wmsLayerService.wmsLayerList.getLayers() |
| | | // const filters = wmsLayerService.wmsLayerList.getFilters() |
| | | const filters = wmsLayerService.wmsLayerList.getFilters() |
| | | const wmsParams = Object.assign({ |
| | | LAYERS: layers, |
| | | QUERY_LAYERS: layers, |
| | |
| | | Y: Math.round(point.y), |
| | | BBOX: this.map.getBounds().toBBoxString() |
| | | }, this.defaultWmsParams, params) |
| | | if (filters) { |
| | | wmsParams.CQL_FILTER = filters |
| | | } |
| | | AjaxUtils.get4JsonDataByUrl(WMS_URL, wmsParams, (res) => { |
| | | resolve(res.data) |
| | | }) |
| | |
| | | </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 PipeChangesSearch from '@components/panel/topicSearch/pipeChangesSearch.vue' |
| | | import PipeInformationSearch from '@components/panel/topicSearch/pipeInformationSearch.vue' |
| | | import EnterpriseEmergencySearch from './topicSearch/EnterpriseEmergencySearch' |
| | | |
| | | import bus from '@/eventBus' |
| | | |
| | | export default { |
| | | name: 'MonitorPanel', |
| | |
| | | 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 |
| | |
| | | } |
| | | }, |
| | | 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> |
| | |
| | | import SolidWaste from '@components/table/components/WasteSolid' |
| | | import AirQuality from '@components/table/components/AirQuality' |
| | | |
| | | import { TopicList } from '../../../conf/Topic' |
| | | import { topicList } from '../../../conf/Topic' |
| | | |
| | | export default { |
| | | name: 'tabHandover', |
| | |
| | | return { |
| | | titleProp: '', |
| | | activeName: 'gcComp', |
| | | topicList: TopicList, |
| | | topicList: topicList, |
| | | gcComp: AirQuality |
| | | } |
| | | }, |
| | |
| | | emergencyesources: '应急物资', |
| | | firefightingunit: '消防单位', |
| | | unitareaboundary: '装置区边界', |
| | | sensitivetarget: '敏感目标' |
| | | sensitivetarget: '敏感目标', |
| | | chokevalve: '截流闸' |
| | | } |
| | | |
| | | export const LAYERPROPS = { |
| | |
| | | name: '管网名称', |
| | | linenumtype: '管线类型', |
| | | pipename: '管线名称', |
| | | subchaname: '支线名称', |
| | | mediumtype: '输送介质', |
| | | length: '长度(m)', |
| | | startposname: '起点位置名称', |
| | |
| | | huncount: '常规人口数量', |
| | | structureoridsitearea: '占地面积', |
| | | adminzonename: '行政隶属' |
| | | }, |
| | | // 截流闸 |
| | | chokevalve: { |
| | | closurename: '名称', |
| | | closurecode: '编码', |
| | | pointnumber: '测点编号', |
| | | mediumtype: '介质', |
| | | size: '尺寸(m)', |
| | | operatingtype: '控制方式', |
| | | telephone: '联系电话', |
| | | resperson: '负责人', |
| | | startdate: '投用日期', |
| | | operationalstatus: '运行状态' |
| | | } |
| | | } |
| | |
| | | EnterpriseEmergencySearch: () => import('@components/panel/topicSearch/EnterpriseEmergencySearch.vue') |
| | | } |
| | | |
| | | export const TopicList = [{ |
| | | export const topicList = [{ |
| | | name: '污染源', |
| | | id: 1, |
| | | check: false, |
| | | checked: false, |
| | | isShow: false, |
| | | icon: 'iconwuranyuan', |
| | | comp: '' |