派生自 wuyushui/SewerAndRainNetwork

chenzeping
2021-03-08 b376aad2139fbc2dfe57c0568a90fc634a3af1ce
Merge branch 'master' of http://xearth.cn:6600/r/wuyushui/SewerAndRainNetwork into master
1个文件已添加
9个文件已修改
178 ■■■■ 已修改文件
src/components/LayerController/modules/LcBaseMap.vue 10 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/components/helpers/BasemapHelper.js 3 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/components/panel/MenuTopic.vue 8 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/components/panel/RightSearchPanel.vue 37 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/components/panel/topicSearch/DischargeSearch.vue 2 ●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/components/plugin/Leaflet.GridLayer.FadeOut.js 76 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/conf/MapConfig.js 1 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/conf/TDT.js 4 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/conf/Topic.js 36 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/main.js 1 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/components/LayerController/modules/LcBaseMap.vue
@@ -16,6 +16,7 @@
  data () {
    return {
      isShow: true,
      currentBaseMapCode: 'tianditu_img',
      basemapList: []
    }
  },
@@ -34,7 +35,14 @@
      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()
          })
src/components/helpers/BasemapHelper.js
@@ -11,6 +11,7 @@
    this.basemapList = []
    this.basemapMap = new Map()
    this.basemapLayerGroup = this.L.layerGroup().addTo(options.map)
    this.currentBaseMapCode = null
  }
    /**
@@ -58,6 +59,8 @@
      this.basemapLayerGroup.addLayer(basemap.layer)
      if (showAnnotation) {
        this.basemapLayerGroup.addLayer(basemap.annotation)
      } else {
        this.basemapLayerGroup.removeLayer(basemap.annotation)
      }
    }
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)
    },
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')
src/components/panel/topicSearch/DischargeSearch.vue
@@ -91,7 +91,7 @@
  components: {},
  data () {
    return {
      isPanelVisible: false,
      isPanelVisible: true,
      total: 0,
      list: [],
      form: {
src/components/plugin/Leaflet.GridLayer.FadeOut.js
New file
@@ -0,0 +1,76 @@
/* 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)
    }
  })
})()
src/conf/MapConfig.js
@@ -34,6 +34,7 @@
const mapConfig = {
  IsLoadMapByToken: true, // 是否通过token加载地图
  showBaseMapType: 1, // 1显示天地图,2显示arcgis地图
  // defaultBasemapCode: 'tianditu_img', // 默认显示 地图类型
  IntranetBaseMaps: TDT.intranet,
  InternetBaseMaps: TDT.internet,
  Layers: { LayerSewersLine: [LayerSewersLine], layerSewersPoint: LayerSewersPoint } // 污雨水图层配置
src/conf/TDT.js
@@ -4,7 +4,7 @@
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',
@@ -40,7 +40,7 @@
    }
  },
  {
    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',
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'
}]
src/main.js
@@ -12,6 +12,7 @@
import L from 'leaflet'
import 'leaflet.markercluster'
import 'leaflet-canvas-markers'
import './components/plugin/Leaflet.GridLayer.FadeOut'
Vue.config.productionTip = false
Vue.use(ElementUI)