Merge branch 'master' of http://xearth.cn:6600/r/wuyushui/SewerAndRainNetwork into master
| | |
| | | data () { |
| | | return { |
| | | isShow: true, |
| | | currentBaseMapCode: 'tianditu_img', |
| | | basemapList: [] |
| | | } |
| | | }, |
| | |
| | | const code = itm.code |
| | | this.basemapList.forEach((item) => { |
| | | if (item.code === code) { |
| | | this.basemapHelper.showBasemap(item.code, item.conf.annotationCheck, true) |
| | | console.log(this.currentBaseMapCode) |
| | | if (this.currentBaseMapCode == null || this.currentBaseMapCode !== code) { |
| | | this.currentBaseMapCode = code |
| | | this.basemapHelper.showBasemap(item.code, item.conf.annotationCheck, true) |
| | | } else { |
| | | this.basemapHelper.showBasemap(item.code, item.conf.annotationCheck, false) |
| | | } |
| | | |
| | | this.basemapHelper.getBasemapList().forEach((item) => { |
| | | item.layer.bringToBack() |
| | | }) |
| | |
| | | this.basemapList = [] |
| | | this.basemapMap = new Map() |
| | | this.basemapLayerGroup = this.L.layerGroup().addTo(options.map) |
| | | this.currentBaseMapCode = null |
| | | } |
| | | |
| | | /** |
| | |
| | | this.basemapLayerGroup.addLayer(basemap.layer) |
| | | if (showAnnotation) { |
| | | this.basemapLayerGroup.addLayer(basemap.annotation) |
| | | } else { |
| | | this.basemapLayerGroup.removeLayer(basemap.annotation) |
| | | } |
| | | } |
| | | |
| | |
| | | @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">--> |
| | |
| | | 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) |
| | | }, |
| | |
| | | <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>--> |
| | |
| | | |
| | | <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, |
| | |
| | | |
| | | } |
| | | }, |
| | | 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: { |
| | |
| | | |
| | | handlePage (page) { |
| | | }, |
| | | handleGd () { |
| | | this.title = '管道信息查询' |
| | | handleClick (item) { |
| | | this.title = item.name |
| | | this.gcComp = item.comp |
| | | }, |
| | | toggleMonitorPanel () { |
| | | const el = $('.btn-stretch') |
| | |
| | | components: {}, |
| | | data () { |
| | | return { |
| | | isPanelVisible: false, |
| | | isPanelVisible: true, |
| | | total: 0, |
| | | list: [], |
| | | form: { |
New file |
| | |
| | | /* eslint-disable */ |
| | | // Adds a fade-out animation to grid layers when they're removed from the map |
| | | |
| | | (function () { |
| | | var gridProto = L.GridLayer.prototype |
| | | var onRemoveProto = gridProto.onRemove |
| | | var onAddProto = gridProto.onAdd |
| | | var fadeDuration = 200 |
| | | |
| | | L.GridLayer.include({ |
| | | |
| | | onAdd: function (map) { |
| | | if (this._fadeOutTime) { |
| | | var now = performance.now() || (+new Date()) |
| | | L.Util.cancelAnimFrame(this._fadeOutFrame) |
| | | this._fadeOutTime = now + fadeDuration - this._fadeOutTime + now |
| | | L.Util.requestAnimFrame(this._fadeIn, this) |
| | | } else { |
| | | onAddProto.call(this, map) |
| | | } |
| | | }, |
| | | |
| | | onRemove: function (map) { |
| | | if (this._fadeOutTime) { |
| | | // We're removing this *again* quickly after removing and re-adding |
| | | var now = performance.now() || (+new Date()) |
| | | |
| | | this._fadeOutTime = now + fadeDuration - this._fadeOutTime + now |
| | | } |
| | | this._fadeOutTime = (performance.now() || (+new Date())) + fadeDuration * 2 |
| | | this._fadeOutMap = this._map |
| | | |
| | | L.Util.requestAnimFrame(this._fadeOut, this) |
| | | }, |
| | | |
| | | _fadeOut: function () { |
| | | if (!this._fadeOutTime || !this._container) { return } |
| | | |
| | | var now = performance.now() || (+new Date()) |
| | | |
| | | var opacity = Math.min((this._fadeOutTime - now) / fadeDuration, 1) |
| | | // console.log('fadeout:', opacity); |
| | | if (opacity < 0) { |
| | | this._fadeOutTime = false |
| | | |
| | | onRemoveProto.call(this, this._fadeOutMap) |
| | | |
| | | return |
| | | } |
| | | |
| | | L.DomUtil.setOpacity(this._container, opacity * this.options.opacity) |
| | | |
| | | this._fadeOutFrame = L.Util.requestAnimFrame(this._fadeOut, this) |
| | | }, |
| | | |
| | | // Only runs when the gridlayer is quickly re-added while it's being faded out |
| | | _fadeIn: function _fadeIn () { |
| | | if (!this._fadeOutTime || !this._container) { return } |
| | | |
| | | var now = performance.now() || (+new Date()) |
| | | |
| | | var opacity = (now - this._fadeOutTime) / fadeDuration |
| | | // console.log('fadein:', opacity); |
| | | |
| | | if (opacity > 1) { |
| | | this._fadeOutTime = false |
| | | return |
| | | } |
| | | |
| | | L.DomUtil.setOpacity(this._container, opacity * this.options.opacity) |
| | | |
| | | L.Util.requestAnimFrame(this._fadeIn, this) |
| | | } |
| | | |
| | | }) |
| | | })() |
| | |
| | | const mapConfig = { |
| | | IsLoadMapByToken: true, // 是否通过token加载地图 |
| | | showBaseMapType: 1, // 1显示天地图,2显示arcgis地图 |
| | | // defaultBasemapCode: 'tianditu_img', // 默认显示 地图类型 |
| | | IntranetBaseMaps: TDT.intranet, |
| | | InternetBaseMaps: TDT.internet, |
| | | Layers: { LayerSewersLine: [LayerSewersLine], layerSewersPoint: LayerSewersPoint } // 污雨水图层配置 |
| | |
| | | const TIANDITU_GIS_TOKEN = '5d76218063082952d18b76da5005f490' // 备用tk: f1b72b5e7cb1175acddfa485f1bc9770 |
| | | const intranet = [ |
| | | { |
| | | code: 'sinopec_img', |
| | | code: 'tianditu_img', |
| | | name: '中石化天地图影像', |
| | | icon_actived: '/assets/images/map-pages/icon/img.png', |
| | | icon_deactived: '/assets/images/map-pages/icon/img.png', |
| | |
| | | } |
| | | }, |
| | | { |
| | | code: 'sinopec_vec', |
| | | code: 'tianditu_vec', |
| | | name: '中石化天地图矢量', |
| | | icon_actived: '/assets/images/map-pages/icon/road.png', |
| | | icon_deactived: '/assets/images/map-pages/icon/road.png', |
| | |
| | | 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' |
| | | }] |
| | |
| | | import L from 'leaflet' |
| | | import 'leaflet.markercluster' |
| | | import 'leaflet-canvas-markers' |
| | | import './components/plugin/Leaflet.GridLayer.FadeOut' |
| | | Vue.config.productionTip = false |
| | | |
| | | Vue.use(ElementUI) |