派生自 wuyushui/SewerAndRainNetwork

YANGDL
2021-01-05 1e40f7d8824d8859a6edbec3ae3fd0d857115553
Merge remote-tracking branch 'origin/master'

# Conflicts:
# src/views/MapTemplate.vue
1个文件已添加
1个文件已修改
247 ■■■■ 已修改文件
src/components/panel/TopEnterprisePanel.vue 149 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/MapTemplate.vue 98 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/components/panel/TopEnterprisePanel.vue
New file
@@ -0,0 +1,149 @@
<template>
  <div class="top-enterprise-panel">
    <el-form :inline="true" :model="formInline" ref="form" style="margin-left:5px">
      <el-form-item label="分类:">
        <el-select v-model="form.regionType" @change="handlePipelineType">
          <el-option
              v-for="item in regionTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="企业名称:">
        <el-select v-model="form.pipelineType" @change="handlePipelineType">
          <el-option
              v-for="item in pipelineTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="模糊搜索:">
        <el-input v-model="form.name" placeholder="在此输入载具号"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  name: 'TopEnterprisePanel',
  components: {},
  data() {
    return {
      isPanelVisible: false,
      total: 0,
      list: [],
      regionTypeOptions: [{
        value: '1',
        label: '长江流域'
      }, {
        value: '2',
        label: '黄河流域'
      }, {
        value: '3',
        label: '南部沿海水域'
      }, {
        value: '4',
        label: '环渤海水域'
      }, {
        value: '5',
        label: '其他地域'
      }, {
        value: '6',
        label: '催化剂公司'
      }],
      enterpriseOptions: [{
        value: '1',
        label: '北海炼化'
      }, {
        value: '2',
        label: '茂名石化'
      }, {
        value: '3',
        label: '湛江东兴'
      }, {
        value: '4',
        label: '广州石化'
      }, {
        value: '5',
        label: '海南炼化'
      }, {
        value: '6',
        label: '茂名润滑油'
      }],
      form: {
        regionType: '',
      }
    }
  },
  methods: {
    handleClose(done) {
      console.log(done)
    },
    handleClick(tab, event) {
      console.log(tab, event)
    },
    handleSearch() {
    },
    onSubmit() {
    }
  },
  mounted() {
    this.handleSearch()
  }
}
</script>
<style lang="less">
.top-enterprise-panel {
  position: absolute;
  margin:0 auto;
  left: 0; right: 0; top: 0;bottom: 0;
  z-index: 1000;
  width: 940px;
  height: 50px;
  padding-top: 15px;
  background: #07325b;
  border:2px solid #2A8FD4;
  border-radius:10px;
  .el-form-item__label{
    color: #ffffff;
  }
  .el-message-box__content {
    background-color: #030D2E;
  }
  .search-form .el-form-item {
    margin: 0px;
  }
  .search-form .el-icon-search {
    display: grid;
    line-height: 30px;
    font-size: 18px;
  }
  .search-panel {
    border: #07325B;
    background-color: #07325B;
  }
  .search-result {
    margin: 5px 0px 0px 0px;
    padding: 0px;
    border: #051842;
    overflow-y: scroll;
    background-color: #051842;
  }
}
</style>
src/views/MapTemplate.vue
@@ -1,13 +1,14 @@
<template>
  <div class="full-screen">
    <div id="map" ref="rootmap"></div>
    <sgis-layer-controller :preset="'warningPreset'">
      <lc-basemap></lc-basemap>
      <div class="bar-line"></div>
      <lc-service-layer></lc-service-layer>
    </sgis-layer-controller>
    <lc-service-layer-filter v-show="showServiceLayerFilter" ref="serviceLayerFilter"></lc-service-layer-filter>
    <monitor-panel></monitor-panel>
        <div id="map" ref="rootmap"></div>
        <sgis-layer-controller :preset="'warningPreset'">
            <lc-basemap></lc-basemap>
            <div class="barline"></div>
            <lc-service-layer></lc-service-layer>
        </sgis-layer-controller>
        <lc-service-layer-filter v-show="showServiceLayerFilter" ref="serviceLayerFilter"></lc-service-layer-filter>
        <monitor-panel></monitor-panel>
        <top-enterprise-panel></top-enterprise-panel>
  </div>
</template>
@@ -20,76 +21,75 @@
import LcServiceLayer from '@components/LayerController/modules/LcServiceLayer'
import LcServiceLayerFilter from '@components/LayerController/modules/LcServiceLayerFilter'
import MonitorPanel from '@components/panel/MonitorPanel'
// import { mapMutations, mapState } from 'vuex'
import TopEnterprisePanel from "@components/panel/TopEnterprisePanel";
export default {
  name: 'MapTemplate',
  components: { SgisLayerController, MonitorPanel, LcBasemap, LcServiceLayer, LcServiceLayerFilter },
  data () {
  components: {TopEnterprisePanel, SgisLayerController, MonitorPanel, LcBasemap, LcServiceLayer, LcServiceLayerFilter},
  data(){
    return {
      basemapHelper: {},
      serviceLayerHelper: {},
      vectorLayerHelper: {}
    }
  },
  computed: {
    showServiceLayerFilter () {
  computed:{
    showServiceLayerFilter(){
      return this.$store.state.map.showServiceLayerFilter
    },
    mapConfig () {
    mapConfig(){
      return this.$store.state.map.mapConfig
    }
  },
  beforeMount () {
    this.$nextTick(() => {
      this.init()
    })
  beforeMount(){
      this.$nextTick(() => {
          this.init()
      })
  },
  methods: {
    saveMapStatus () {
      this.$store.commit('setMapObj', this.mapObj)
      this.$store.commit('setBasemapHelper', this.basemapHelper)
      this.$store.commit('setServiceLayerHelper', this.serviceLayerHelper)
      this.$store.commit('setVectorLayerHelper', this.vectorLayerHelper)
  methods:{
    saveMapStatus(){
      this.$store.commit('setMapObj', this.mapObj);
      this.$store.commit('setBasemapHelper', this.basemapHelper);
      this.$store.commit('setServiceLayerHelper', this.serviceLayerHelper);
      this.$store.commit('setVectorLayerHelper', this.vectorLayerHelper);
    },
    init () {
      const mapcontainer = this.$refs.rootmap
      this.mapObj = Sgis.initMap(mapcontainer)
      init() {
        const mapcontainer = this.$refs.rootmap
        this.mapObj = Sgis.initMap(mapcontainer)
      this.basemapHelper = Sgis.initBasemapsHelper(this.mapObj.map, this.mapObj.L) // 初始化基础底图助手
      this.basemapHelper.initBasemap(this.mapConfig, false) // 第二个参数,表示是否内网底图
        this.basemapHelper = Sgis.initBasemapsHelper(this.mapObj.map, this.mapObj.L) // 初始化基础底图助手
        this.basemapHelper.initBasemap(this.mapConfig, false) // 第二个参数,表示是否内网底图
      this.serviceLayerHelper = Sgis.initTileLayersHelper(this.mapObj.map, this.mapObj.L) // 初始化业务底图助手
      this.serviceLayerHelper.initServiceLayers(this.mapConfig)
        this.serviceLayerHelper = Sgis.initTileLayersHelper(this.mapObj.map, this.mapObj.L) // 初始化业务底图助手
        this.serviceLayerHelper.initServiceLayers(this.mapConfig)
      this.vectorLayerHelper = Sgis.initVectorLayersHelper(this.mapObj.map, this.mapObj.L) // 初始化动态要素图层助手
      this.vectorLayerHelper.initVectorLayers(this.mapConfig)
        this.vectorLayerHelper = Sgis.initVectorLayersHelper(this.mapObj.map, this.mapObj.L) // 初始化动态要素图层助手
        this.vectorLayerHelper.initVectorLayers(this.mapConfig)
      this.saveMapStatus()
      // this.setMapObj(this.mapObj)
      // this.setBasemapHelper(this.basemapHelper)
      // this.setServiceLayerHelper(this.serviceLayerHelper)
      // this.setVectorLayerHelper(this.vectorLayerHelper)
    }
        this.saveMapStatus()
        // this.setMapObj(this.mapObj)
        // this.setBasemapHelper(this.basemapHelper)
        // this.setServiceLayerHelper(this.serviceLayerHelper)
        // this.setVectorLayerHelper(this.vectorLayerHelper)
      }
  }
}
</script>
<style lang="less">
.full-screen {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  position: absolute;
  #map {
.full-screen{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    position: absolute;
  #map{
    height: 100%;
    width: 100%;
  }
  .bar-line {
  .barline{
    width: 100%;
    height: 1px;
    background-color: #0661AE;