派生自 wuyushui/SewerAndRainNetwork

徐旺旺
2021-05-30 1f0e9a20cd76e21538b4ca77a3ed7ce2a979de90
src/components/panel/RightSearchPanel.vue
@@ -12,7 +12,7 @@
                    </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">
@@ -51,7 +51,7 @@
<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'
@@ -60,9 +60,7 @@
import SoilGroundWaterSearch from '@components/panel/topicSearch/SoilGroundWaterSearch.vue'
import PipeChangesSearch from '@components/panel/topicSearch/pipeChangesSearch.vue'
import PipeInformationSearch from '@components/panel/topicSearch/pipeInformationSearch.vue'
import ReportSearch from './topicSearch/ReportSearch'
import bus from '@/eventBus'
import EnterpriseEmergencySearch from './topicSearch/EnterpriseEmergencySearch'
export default {
  name: 'MonitorPanel',
@@ -72,13 +70,13 @@
    SolidWasteSearch,
    EnvRiskSearch,
    DischargeSearch,
    ReportSearch
    EnterpriseEmergencySearch
  },
  data () {
    return {
      isShow: true,
      topicMenu: [],
      topicList: TopicList,
      list: topicList,
      topicCheckedList: [],
      isPanelVisible: false,
      gcComp: SewersSearch,
@@ -86,13 +84,16 @@
      hbVisible: false,
      pkVisible: false,
      toggleMonitorStyle: 'right:0px',
      title: '污雨水管网',
      isCollapse: true,
      selectGroup: false
    }
  },
  computed: {},
  computed: {
    serviceLayers () {
      return this.$store.state.map.serviceLayers.LayerSewersLine
    }
  }, /*
  watch: {
    '$store.state.map.topic.topicCheckedList': function (newVal, oldVal) {
      console.log(oldVal)
@@ -107,26 +108,46 @@
        })
      })
    }
  },
  }, */
  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
@@ -156,14 +177,11 @@
          this.gcComp = PipeInformationSearch
          break
        case '企业应急':
          this.gcComp = ReportSearch
          this.gcComp = EnterpriseEmergencySearch
          break
      }
    },
    handlePage (page) {
    },
    handleGd () {
      this.title = '管道信息查询'
    },
    toggleMonitorPanel () {
      this.isCollapse = !this.isCollapse
@@ -205,32 +223,60 @@
      //     })
      //   }
    },
    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) {
      // console.log(obj.checked, obj.name)
      that.gcComp = ''
      that.topicList.forEach((item) => {
        if (item.name === obj.name) {
          item.isShow = obj.checked
          if (item.isShow) {
            that.selected(item)
          } else {
            that.defaultLastOne()
          }
        }
      })
    })
    /* 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>
@@ -324,7 +370,7 @@
    color: @color-tool;
    position: absolute;
    top: 24px;
    right: 0.02rem;
    left: 0.02rem;
    border: none; //1px solid @color-tool;
    width: 0.2rem;
    height: 0.2rem;
@@ -688,12 +734,16 @@
  }
  .footer-page {
    position: absolute;
   // position: absolute;
    background-color: transparent !important;
    bottom: 10px !important;
    margin-left: 0px;
  //  bottom: 10px !important;
   // margin-left: 0px;
    border: none;
    margin: 0;
    border-top: 1px solid rgba(0, 255, 246, 0.14);
   .el-card__body{
     padding: 5px;
   }
    .warnPagination {
      .btn-quicknext, .btn-quickprev {
        color: #e4e8f1 !important;