Merge branch 'develop' of http://xearth.cn:6600/r/wuyushui/SewerAndRainNetw...

zhangshuaibao

2021-04-08 3bc191973a0a67cbc8c0d77d92ea1a807555aa6a

Merge branch 'develop' of http://xearth.cn:6600/r/wuyushui/SewerAndRainNetwork into develop


 Conflicts:

	src/components/BaseNav/PublicBounced/GasComponents/EChartsHour.vue

 .DS_Store

Binary files differ

 .gitignore

@@ -29,4 +29,4 @@
.DS_Store
package-lock.json
.idea
.dist
/dist

 public/assets/.DS_Store

Binary files differ

 public/assets/images/.DS_Store

Binary files differ

 public/assets/images/map-pages/.DS_Store

Binary files differ

 public/assets/images/map-pages/icon/.DS_Store

Binary files differ

 public/assets/images/map/company.png

Binary files differ

 public/assets/images/map/company_oil.png

 public/assets/images/map/company_refining.png

 public/assets/images/map/company_sales.png

 src/.DS_Store

Binary files differ

 src/api/mapApi.js

@@ -36,6 +36,10 @@
  getWasteGasDetails (data) {
    return axios.get(mapUrl.getWasteGasDetails, data)
  },
  // 废气点小时日数据
  getWasteGasMonData (data) {
    return axios.get(mapUrl.getWasteGasMonData, data)
  },
  // 废水点
  getWasteWater (data) {
    return axios.get(mapUrl.getWasteWater, data)

 src/api/mapUrl.js

@@ -12,6 +12,7 @@

export const getWasteGas = $HOST + '/wasteGas/getWasteGas'
export const getWasteGasDetails = $HOST + '/wasteGas/getWasteGasMonitoringDetails'
export const getWasteGasMonData = $HOST + '/wasteGas/QueryOnlineMonData'

export const getWasteWater = $HOST + '/wasteWater/getWasteWater' // 废水点信息
export const getWasteWaterMonitoring = $HOST + '/wasteWater/getWasteWaterMonitoring' // 废水监测数据

 src/assets/.DS_Store

Binary files differ

 src/assets/css/map/_map-variable.less

@@ -6,6 +6,7 @@
@color-tool: #C0C4CC;//工具色
@color-shadow: #00fff6;//显示颜色
@background-color: rgba(0, 16, 30, .7);//背景填充色
@background-color4: rgba(0, 16, 30, .4);//背景填充色
@background-color-light: rgba(40, 50, 100, .4);//光晕
@background-color-split: rgba(0, 255, 246, .14);//分割线
@background-color-tools: #1A4951;//工具箱

 src/assets/css/map/map-panel-style.less

@@ -1,5 +1,9 @@
@import "_map-variable";

.leaflet-container,
html,body{
 // font-family: 'Microsoft YaHei';
  font: 12px/1.5 "Microsoft YaHei", Arial, Helvetica, sans-serif;
}
/*全局设置***********/
h1, h2, h3, h4, h5, h6, ul, li, p {
  padding: 0;
@@ -243,18 +247,67 @@

/***************Company 图层 悬浮框样式。*********************************/
.company-bindTooltip {
  background: @background-color-split;
  border: none;
  position: absolute;
  top:0;
  left: 0;
  display: flex;
  justify-content: center;
  justify-items: center;
  img{display: block;width: 30px;height: 30px;margin-left: -15px;margin-top: -15px}
  ul{
    width: 120px;
    margin-left: -60px;
    text-align: center;
    display: flex;
    position: absolute;
    top:20px;
    left:0;
    li{
      position: absolute;
      top:0;
      left:0;
      width: 100%;
      font-weight: 900;
      text-shadow: 0 0 4px #fff;
  color: red;
  font-size: 16px;
  font-weight: 900 !important;
  text-shadow: 0 0 5px #fff;
  //filter:Dropshadow(offx=1,offy=0,color=white)
  //Dropshadow(offx=0,offy=1,color=white)
  //Dropshadow(offx=0,offy=-1,color=white)
  //Dropshadow(offx=-1,offy=0,color=white);
      height: 20px;
      line-height: 18px;
      overflow: visible;
    }
  }
}
/*.company-bindTooltip {
  //background: @background-color-split;
  background: none;
  border: none;
  color: red;
  //font-size: 16px;
  box-shadow: none;
  -webkit-text-stroke: .5px #fff;
  text-shadow: 0 0 5px #fff;
  filter:Dropshadow(offx=1,offy=0,color=white)
  Dropshadow(offx=0,offy=1,color=white)
  Dropshadow(offx=0,offy=-1,color=white)
  Dropshadow(offx=-1,offy=0,color=white);
  box-shadow: none;
  -webkit-text-stroke: 0.1px #fff;
  font: 16px "Microsoft YaHei", Arial, Helvetica, sans-serif;
  ul{
    position: relative;
    li:not(:first-child){
      position: absolute;
      top:0;
      left:0;
      width: 100%;
      font-weight: 900;
    }
    li{
      text-shadow: 0 0 4px #fff;
    }
  }
}*/
.company-bindTooltip:before{
  display: none;
}

.company-bindTooltip-hover h3 {
@@ -268,15 +321,15 @@
  list-style: none;
  margin: 0;
  padding: 0;
  width: 260px;
  display: flex;
  //width: 260px;
  //display: flex;
  flex-wrap: wrap;
}

.company-bindTooltip-hover ul li {
  margin: 0;
  padding: 3px 0;
  width: 50%;
  //width: 50%;
}

/*************** PublicTable 表格样式。*********************************/
@@ -345,6 +398,7 @@
  .icon{
    width: 20px;
    margin: 0 auto;
    font-size: 20px;
  }

}

 src/assets/images/.DS_Store

Binary files differ

 src/assets/images/map-pages/.DS_Store

Binary files differ

 src/assets/images/map-pages/icon/.DS_Store

Binary files differ

 src/components/BaseNav/PublicBounced/GasComponents/EChartsHour.vue

@@ -2,35 +2,107 @@
<template>
    <div id="Tab">
        <div class="infomation">
            <el-tag>氮氧化物:29.93 标准:100</el-tag>
            <el-tag>二氧化硫:17.34 标准:50</el-tag>
            <el-tag>烟尘:6.93 标准:30</el-tag>
            <el-tag>废气流量:120343.18</el-tag>
<!--            <el-tag>氮氧化物 : 29.93 标准 : 100</el-tag>-->
<!--            <el-tag>二氧化硫 : 17.34 标准 : 50</el-tag>-->
<!--            <el-tag>烟尘 : 6.93 标准 : 30</el-tag>-->
<!--            <el-tag>废气流量 : 120343.18</el-tag>-->
          <el-row>
            <el-col :span="6"><div class="grid-content bg-purple">氮氧化物 : 29.93 标准 : 100</div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple">二氧化硫 : 17.34 标准 : 50</div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple">烟尘 : 6.93 标准 : 30</div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple">废气流量 : 120343.18</div></el-col>
<!--            <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>-->
          </el-row>
        </div>
        <div class="form-echrts">
            <!--    :title="this.$attrs.getWasteGasDetails[0].OnLineMonEmissPointName"      -->
            <div class="from-search">
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-date-picker
                            class="date"
                            v-model="value"
                            type="datetimerange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                    </el-date-picker>
                    <el-form-item label="采样点数" class="text-size">
                        <el-select v-model="formInline.region" placeholder="0">
                            <el-option label="0" value="shanghai"></el-option>
                            <el-option label="25" value="beijing"></el-option>
                            <el-option label="50" value="beijing"></el-option>
                            <el-option label="75" value="beijing"></el-option>
                            <el-option label="100" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">查询</el-button>
                    </el-form-item>
                    <el-button size="mini" round @click="dialogVisible = true">明细表</el-button>
<!--                <el-form :inline="true" :model="formInline" class="demo-form-inline">-->
<!--                    <el-form-item label="审批人">-->
<!--                        <el-input v-model="formInline.user" placeholder="审批人"></el-input>-->
<!--                    </el-form-item>-->
<!--                    <div class="block">-->
<!--                        <el-date-picker-->
<!--                            size="'mini"-->
<!--                                class="date"-->
<!--                                v-model="value"-->
<!--                                type="datetimerange"-->
<!--                                range-separator="至"-->
<!--                                start-placeholder="开始日期"-->
<!--                                end-placeholder="结束日期">-->
<!--                        </el-date-picker>-->
<!--                    </div>-->
<!--                    <el-form-item label="采样点数" class="text-size">-->
<!--                        <el-select v-model="formInline.region" placeholder="0">-->
<!--                            <el-option label="0" value="shanghai"></el-option>-->
<!--                            <el-option label="25" value="beijing"></el-option>-->
<!--                            <el-option label="50" value="beijing"></el-option>-->
<!--                            <el-option label="75" value="beijing"></el-option>-->
<!--                            <el-option label="100" value="beijing"></el-option>-->
<!--                        </el-select>-->
<!--                    </el-form-item>-->
<!--                    <el-form-item>-->
<!--                        <el-button type="primary" @click="onSubmit">查询</el-button>-->
<!--                    </el-form-item>-->

<!--                </el-form>-->
<!--              <input list="students">-->
<!--              <datalist id="students">-->
<!--                <option value="Lily">-->
<!--                <option value="Lucy">-->
<!--                <option value="Jim">-->
<!--                <option value="Lily">-->
<!--              </datalist>-->
              <el-row type="flex" :gutter="20">
                <el-col :span="14">
<!--                  <el-row>-->
<!--                    <el-col :span="12">-->
<!--                      <el-row type="flex" justify="space-between">-->
<!--                        <el-col class="pickerData">-->
<!--                          开始时间:-->
<!--                          <el-date-picker-->
<!--                              type="date">-->
<!--                          </el-date-picker>-->
<!--                        </el-col>-->
<!--                      </el-row>-->
<!--                    </el-col>-->
<!--                    <el-col :span="12" type="flex">-->
<!--                      <el-row type="flex" justify="center">-->
<!--                        <el-col>-->
<!--                          结束时间:-->
<!--                          <el-date-picker-->
<!--                              type="date"-->
<!--                          >-->
<!--                          </el-date-picker>-->
<!--                        </el-col>-->
<!--                      </el-row>-->
<!--                    </el-col>-->
<!--                  </el-row>-->
                </el-col>
                <el-col :span="5">
                  采样点数:
                  <input list="source" id="ipt" class="echatsInput">
                  <datalist id="source">
                    <option value="0" />
                    <option value="25" />
                    <option value="50" />
                    <option value="75" />
                    <option value="100" />
                  </datalist>
<!--                  <div data-tap-disabled="true">-->
<!--                    采样点数:-->
<!--                    <select id="source">-->
<!--                      <option value="1">0</option>-->
<!--                      <option value="2">25</option>-->
<!--                      <option value="3">50</option>-->
<!--                      <option value="4">75</option>-->
<!--                      <option value="5">100</option>-->
<!--                    </select>-->
<!--                  </div>-->
                </el-col>
                <el-col class="detailbtn" :span="2" @click="onSubmit">查询</el-col>
                <el-col :span="3">
                  <div class="detailbtn" @click="dialogVisible = true" >明细表</div>
                    <el-dialog :visible.sync="dialogVisible"
                               :append-to-body="true"
                               :title="this.$attrs.value==='feiqi'?this.$attrs.getWasteGasDetails[0].OnLineMonEmissPointName:this.$attrs.getWasteWaterMonitoringDetails[0].OnLineMonEmissPointName"
@@ -42,21 +114,22 @@
                            <public-detailed-list v-bind="$attrs"></public-detailed-list>
                        </div>
                    </el-dialog>
                </el-form>
                </el-col>
              </el-row>
            </div>
            <div style="width:100%;height:1rem;margin-top:-0.1rem;position:absolute;" id="echarts" ref="main">
            <div style="width:100%;height:200px;" id="echarts" ref="main">
            </div>
        </div>
    </div>
</template>

<script>
// import PublicDetailedList from '@components/BaseNav/PublicBounced/GasComponents/PublicDetailedList'
import PublicDetailedList from '@components/BaseNav/PublicBounced/GasComponents/PublicDetailedList'

export default {
  name: 'ECharts',
  components: {
    // PublicDetailedList
    PublicDetailedList
  },
  data () {
    return {
@@ -283,25 +356,63 @@
</script>

<style scoped lang="less">
    .infomation {
.grid-content{
  font-size: 8px!important;
  background-color:#2e4967;
  text-align: center;
  margin: 0 2px 4px 2px;
  border-radius: 2px;
}
.Infomation {
  margin-left: 10px;
        height: 0.2rem;
        display: flex;
        justify-content: space-around;
        margin-bottom: 5px;
    }

    .el-tag {
        height: 25px;
    width: 140px;
        line-height: 25px;
  margin-right: 10px;
  font-size: 10px;
        background-color: rgba(0, 255, 246, 0.14);
        color: #00d0f9;
        border: none;
  padding: 0 15px;
    }

    .form-echrts {
  width: 100%;
        height: 1rem;
        border-top: 1px solid #396d83;

  //margin: 10px 10px 10px 10px;
  .from-search{
    //display: flex;
    //justify-content: space-between;
    .pickerData{
      display: flex;
      justify-content: space-between;
    }
    /deep/.el-input__inner{
      width: 40px!important;
      height: 16px!important;
      background-color: #2e4967;
    }
    .echatsInput{
      color: #00ffff;
      background-color: #2e4967;
      border: none;
      border-radius: 6px;
      width: 40px;
    }
    .detailbtn{
      background-color:#2e4967;
      text-align: center;
      padding: 0 7px;
      line-height: 20px;
      border-radius: 4px;
      margin-right: 6px;
    }
  }
        .el-dialog-div {
            //height: 50vh!important;
            overflow: auto;

 src/components/BaseNav/PublicBounced/GasComponents/PublicChart.vue

@@ -30,7 +30,7 @@
  methods: {
    tabTaggle (taggleMenu) {
      this.currentTab = taggleMenu
      debugger
      // debugger
    }
  }
}

 src/components/BaseNav/PublicBounced/GasComponents/PublicTabs.vue

@@ -14,7 +14,7 @@
            <el-col :span="8">生产单位:{{ setWasteGasdata.porltName }}</el-col>
            <el-col :span="8">排放类型名称:{{ setWasteGasdata.MonTypeName }}</el-col>
          </el-row>
          <el-row type="flex" class="row-bg" justify="space-around">
          <el-row type="flex" class="row-bg row-item-two" justify="space-around">
            <el-col :span="8">排放去向:{{ setWasteGasdata.EmissDirecti }}</el-col>
            <el-col :span="18">控制级别名称:{{ setWasteGasdata.ContrLevelShowName }}</el-col>
            <el-col :span="18">内/外排口:{{ setWasteGasdata.OrOutPortName }}</el-col>
@@ -36,7 +36,7 @@
            <el-col :span="8">生产单位:{{ setWasteWaterdata.porltName }}</el-col>
            <el-col :span="8">排放类型名称:{{ setWasteWaterdata.MonTypeName }}</el-col>
          </el-row>
          <el-row type="flex" class="row-bg" justify="space-around">
          <el-row type="flex" class="row-bg row-item-two" justify="space-around">
            <el-col :span="8">排放去向:{{ setWasteWaterdata.EmissDirecti }}</el-col>
            <el-col :span="8">控制级别名称:{{ setWasteWaterdata.ContrLevelShowName }}</el-col>
            <el-col :span="8">内/外排口:{{ setWasteWaterdata.OrOutPortName }}</el-col>
@@ -77,7 +77,7 @@
  margin-bottom: 10px;
  background-color: rgba(33, 41, 69, 0.9);
  //width: 6rem;
  height: 0.5rem;
  //height: 0.5rem;
}

.main {
@@ -87,13 +87,19 @@
  .main-matter {
    font-size: 13px;
    font-weight: normal;
    //padding: 10px 6px;
    padding: 0px 6px;
    border: 1px solid #396d83;

    .row-item-one {
      //flex-wrap: nowrap;
      overflow: hidden;
      margin-top: 6px;
      margin-bottom: 7px;
      //margin-left: 10px;
    }

    .row-item-two{
      margin-bottom: 6px;
    }
    .el-row {
      width: 100%;
      color: #00d0f9;

 src/components/LayerController/LayerController.vue

@@ -7,7 +7,7 @@
        <!--        <span class="icon-name">图层</span>-->
      </div>
    </el-tooltip>
    <transition name="animationChange">
    <transition name="layerChange">
      <div :class="'legend-content map-background'" v-show="layerControllerVisible">
        <lc-service-layer></lc-service-layer>
        <button  @click="showPanel" type="button" class="el-button special-button el-button--default el-icon-d-arrow-left"></button>
@@ -74,14 +74,27 @@
</script>

<style lang="less">
  .animationChange-enter-active, .animationChange-leave-active {

  .layerChange-enter-active {
    transform-origin: top left;
    animation: bounce-in .2s;
  }
  .layerChange-leave-active {
    transform-origin: top left;
    animation: bounce-in .2s reverse;
  }
  /*

  .layerChange-enter-active,
  .layerChange-leave-active {
    transition: all 0.5s;
  }

  .animationChange-enter, .animationChange-leave-to {
  .layerChange-enter,
  .layerChange-leave-to {
    opacity: 0;
    transform: translateX(-100px);
  }
  }*/
  .float-panel.active{
    overflow: visible;
  }
@@ -234,17 +247,26 @@
    background: #0E3565;
  }
  .el-button--default{
    padding: 15px 3px;
    background:@background-color;
    padding: 0;
    background:@background-color4;
    color:@color-tool;
    position: absolute;
    top:0;
    left: 100%;
    margin-left: .02rem;
    border-radius: 0.03rem 50% 50% 0.03rem;
    top:24px;
    right:0.02rem;
    border:none;//1px solid @color-tool;
    width: 0.2rem;
    height: 0.2rem;
    text-align: center;
    line-height: 0.2rem;
    margin-top: -0.1rem;
    border-radius: 50%;
    // border-radius: 0.03rem 50% 50% 0.03rem;
  }
  .el-button--default:hover{
    background:@background-color;
    border:1px solid @color;
    box-shadow: 0 0 2px @color;
    color:@color;
  }
  .legend-content{
    width: 1.79167rem;

 src/components/LayerController/logic/Company.js

@@ -2,7 +2,7 @@
 * 固废
 */
// 区分不同类型 使用不同img
const companyImg = '/assets/images/map/company.png'
const companyImg = '/assets/images/map/company_refining.png'

const mapApi = require('../../../api/mapApi').default
const AnimalService = require('../service/AnimalService').default
@@ -28,20 +28,29 @@
      const positionY = data[i].Longitude

      var iconUrl = companyImg
      const htmls = '<div><img src="' + iconUrl + '"><ul><li>' + data[i].name + '</li><li>' + data[i].name + '</li><li>' + data[i].name + '</li><li>' + data[i].name + '</li><li>' + data[i].name + '</li><li>' + data[i].name + '</li></ul></div>'
      var myIcon = L.divIcon({
        html: htmls,
        className: 'company-bindTooltip',
        iconSize: 16
      })

      const marker = L.marker([positionX, positionY], {
        icon: L.icon({
        /* icon: L.icon({
          iconUrl: iconUrl,
          iconSize: [30, 30],
          iconAnchor: [13, 5]
        }),
          iconAnchor: [15, 15]
        }), */
        icon: myIcon,
        test: data[i]
      })
      marker.bindTooltip(data[i].name, {
      /* const htmls = '<ul><li>' + data[i].name + '</li></ul>'
      marker.bindTooltip(htmls, {
        permanent: true,
        offset: [0, 14],
        offset: [0, 5],
        direction: 'bottom',
        className: 'company-bindTooltip'
      })
      }) */
      layer.addLayer(marker)
    }
  }

 src/components/LayerController/logic/SolidWaste.js

@@ -39,8 +39,8 @@
        totransferData: getSolidWasteData[i],
        icon: L.icon({
          iconUrl: iconUrl,
          iconSize: [20, 20],
          iconAnchor: [10, 10]
          iconSize: [30, 30],
          iconAnchor: [15, 15]
        })
      })
      layer.addLayer(marker)

 src/components/LayerController/logic/WasteGas.js

@@ -40,8 +40,8 @@
        test: data[i],
        icon: L.icon({
          iconUrl: iconUrl,
          iconSize: [20, 20],
          iconAnchor: [10, 10]
          iconSize: [30, 38],
          iconAnchor: [15, 19]
        })
      })
      layer.addLayer(marker)
@@ -59,6 +59,16 @@
    const dataValue = {
      StoragePlaceId: e.layer.options.test.StoragePlaceId
    }
    // const GasOnlinedata = {
    //   onLineMonEmissPointId: 23,
    //   monItemId: 28,
    //   emissTypeld: 2,
    //   beginTime: 2020/0o4/0o6 15:13:20,
    //   endTime=2020/0o4/0o7;15:13:20,
    //   dataType:1
    // }
    // const Mondata = await mapApi.getWasteGasMonData(GasOnlinedata)
    // console.log(Mondata)
    const result = await mapApi.getWasteGasDetails(dataValue)
    // console.log(result.Result.DataInfo)
    const PublicBounced = window.Vue.extend(publicBounced)

 src/components/LayerController/logic/WasteWater.js

@@ -37,8 +37,8 @@
        test: data[i],
        icon: L.icon({
          iconUrl: iconUrl,
          iconSize: [20, 20],
          iconAnchor: [10, 10]
          iconSize: [35, 35],
          iconAnchor: [18, 18]
        })
      })
      layer.addLayer(marker)

 src/components/LayerController/modules/LcServiceLayer.vue

@@ -4,12 +4,12 @@
        <div class="wms-panel">
            <el-scrollbar class="wms-panel-scrollbar">
                <div v-for="item in serviceLayers" :key="item.code" class="layerbox">
                    <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:10px;padding-top:10px">
                        <input type="checkbox" :name="'wmsLayer_'+item.code" :checked="item.checked" :value="item.code"
                               @change="swAllLayers(item)"/>{{ item.name }}
                    <div style="padding-left:25px;padding-top:10px;color:#fff">
                        <input type="checkbox" :name="'wmsLayer_'+item.code" :checked="item.checked" :value="item.code" @change="swAllLayers(item)"/>{{ item.name }}
                    </div>
                    <div class="layerbox-item">
                    <div class="layerbox-item" v-show="item.isShow">
                        <!-- 二级图层遍历 -->
                        <div class="basemap-layer-item" v-for="itm in item.layers" :key="itm.code">
                            <input type="checkbox"
@@ -24,7 +24,8 @@
                                           :name="'wmsSublayers_'+item.code+'_'+layer.code"
                                           :checked="layer.checked"
                                           :value="layer.code"
                                           @change="swWmsLayer(layer)"/>{{ layer.name }}
                                           @change="swWmsLayer(layer)"/>
                                    <span :style="'color:'+layer.color">{{ layer.name }}</span>
                                </div>
                            </div>
                        </div>
@@ -117,6 +118,23 @@
            }
            .layerbox {
                width: 100%;
                position: relative;
                .downUp{
                    position: absolute;
                    top:3px;
                    left: -2px;
                    height: 30px;
                    width: 30px;
                    text-align: center;
                    line-height: 30px;
                    cursor: pointer;
                    font-size: 20px;
                    transition: all 1.5s;
                }
                .downUp.active{
                    transform: rotate(-90deg);
                }
                .downUp:hover{font-size: 26px;font-weight: 900}
                .layerbox-item {
                    padding-left: 30px;
                    padding-top: 5px;

 src/components/LayerController/service/WfsLayerService.js

@@ -45,9 +45,9 @@
          fillColor: STYLES.FILL_COLOR,
          color: STYLES.COLOR,
          fillOpacity: STYLES.FILL_OPACITY,
          opacity: STYLES.OPACITY,
          dashArray: STYLES.DASH_ARRAY,
          dashSpeed: STYLES.DASH_SPPED
          opacity: STYLES.OPACITY
          // dashArray: STYLES.DASH_ARRAY,
          // dashSpeed: STYLES.DASH_SPPED
        }
      },
      pointToLayer: (geoJsonPoint, latlng) => {

 src/components/panel/BaseNavMenuItem.vue

 src/components/panel/RightSearchPanel.vue

@@ -1,16 +1,17 @@
<template>
  <div class="panel-right" v-show="isShow">
      <transition name="searchPanelChange">
          <div style=" display: inline-flex;">
    <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}">-->
<!--        <img :src="item.icon" style="width: 24px;height: 24px;"></div>-->
      <div class="container">
          <ul>
                      <!--  <ul>
              <li style="text-align: right">
                  <button type="button" class="el-button special-button el-button--default el-icon-d-arrow-right"></button>
                              <div @click="setSearchPanelChange" type="button" class="el-button special-button el-button--default">
                                  <i class=" el-icon-d-arrow-right" v-if="selectGroup"></i>
                                  <i class=" el-icon-d-arrow-left" v-else ></i>
                              </div>
              </li>
          </ul>

                      </ul> -->
        <ul  v-for="item in topicList" :key="item.name" :class="item.checked?'module-wrap map-btn-active':'module-wrap map-btn-unactive'" @click="()=>{selected(item)}" >
              <el-tooltip :popper-class="'map-tooltip'" effect="dark" :content="item.name" placement="left">
                  <li>
@@ -20,30 +21,27 @@
        </ul>
      </div>
    </div>
<!--    <div class="panel-fold-btn" >-->
<!--      <div class="btn-stretch" @click="toggleMonitorPanel"></div>-->
<!--    </div>-->

<!--      <div class="panel-fold-btn" @click="toggleMonitorPanel" >-->
<!--            <div :class="[isCollapse? 'btn-stretch':'btn-shrink']" ></div>-->
<!--&lt;!&ndash;                <div class="btn-stretch" v-if="isCollapse"  </div>&ndash;&gt;-->
<!--&lt;!&ndash;            <div class="btn-shrink" v-else-if="!isCollapse" ></div>&ndash;&gt;-->
<!--&lt;!&ndash;        :style = "{width:isCollapse ? '290px' : '0px'}"&ndash;&gt;-->
<!--      </div>-->
<!--    <div class="right-control" v-if="!isCollapse"  >-->
    <div class="right-control" :class="[{ 'unfold': !isCollapse },{ 'shrink': isCollapse }] " >
      <div class="panel-fold-btn" @click="toggleMonitorPanel">
<!--        <div class="btn-stretch" v-if="isCollapse"></div>-->
<!--        <div class="btn-shrink" v-else-if="!isCollapse"></div>-->
        <div :class="[isCollapse? 'btn-stretch':'btn-shrink']" ></div>
      </div>

      <div :class="'search-container map-background'">
                  <div :class="'search-container map-background'" v-show="selectGroup" >
                      <div @click="setSearchPanelChange" type="button" class="el-button special-button el-button--default ">
                          <i class=" el-icon-d-arrow-right" v-if="selectGroup"></i>
                          <i class=" el-icon-d-arrow-left" v-else ></i>
                      </div>
        <div class="el-message-box__content" style="padding:0 6px 6px 6px;font-size: 13px;">
          <component :title="title" :is="gcComp"></component>
        </div>
      </div>
    </div>
          </div>
       </transition>
      <!-- <el-tooltip :popper-class="'map-tooltip'" effect="dark" content="搜索" placement="left" v-show="!selectGroup">
          <div :class="selectGroup === true ?'active-button':''" class="iconBtn"   @click="setSearchPanelChange" style="position: absolute;top:0;right: 0" >
             <i class="el-icon-search icon"></i>
          </div>
      </el-tooltip> -->
  </div>
</template>

@@ -75,7 +73,8 @@
      toggleMonitorStyle: 'right:0px',

      title: '污雨水管网',
      isCollapse: true
      isCollapse: true,
      selectGroup: true
    }
  },
  computed: {},
@@ -98,9 +97,18 @@
    handleClose (done) {
      console.log(done)
    },
    setSearchPanelChange () {
      this.selectGroup = !this.selectGroup
      if (!this.selectGroup) {
        this.topicList.forEach((itm) => {
          itm.checked = false
        })
      }
    },
    selected (val) {
      // console.log(val)
      this.title = val.name
      this.selectGroup = true
      this.topicList.forEach((itm) => {
        itm.checked = val.name === itm.name
      })
@@ -180,7 +188,14 @@
</script>

<style lang="less">

    .searchPanelChange-enter-active {
        transform-origin: top right;
        animation: bounce-in .2s;
    }
    .searchPanelChange-leave-active {
        transform-origin: top right;
        animation: bounce-in .2s reverse;
    }
.search-container {
    position: relative;
    width: 1.79167rem;
@@ -247,16 +262,28 @@
  //  background-color: #061e51 !important;
  //  border: solid 1px #0e639e !important;
  //}
    .el-button--default {
        padding: 15px 3px;
        background: rgba(0, 16, 30, 0.7);
        color: #C0C4CC;
        border-radius:50%  0.03rem 0.03rem 50% ;
    .el-button--default.special-button {
        padding: 0;
        background:@background-color4;
        color:@color-tool;
        position: absolute;
        top:24px;
        right:0.02rem;
        border:none;//1px solid @color-tool;
        width: 0.2rem;
        height: 0.2rem;
        text-align: center;
        line-height: 0.2rem;
        margin-top: -0.1rem;
        border-radius: 50%;
        z-index: 999;
    }
    .el-button--default:hover{
    .el-button--default.special-button:hover{
        background:@background-color;
        border:1px solid @color;
        box-shadow: 0 0 2px @color;
        color:@color;
    }

  .el-form-item__label {
    color: rgb(52, 224, 255);
    color: @color;

 src/components/panel/ToolBoxPanel.vue

@@ -41,9 +41,9 @@
<!--            </div>-->
            <lc-base-map v-show="item.index==='2'"></lc-base-map>
          </el-popover>
          <el-button @click="changeSelect" class="special-button">
          <!-- <el-button @click="changeSelect" class="special-button">
            <i class="el-icon-d-arrow-left"></i>
          </el-button>
          </el-button> -->
        </el-row>
      </transition>
    </div>
@@ -382,12 +382,15 @@
    },
    changeSelect () {
      this.selectGroup = false
      this.isShow = !this.isShow
      this.active = -1
    },
    changeSelectMouse () {
      this.selectGroup = true
      this.selectGroup = !this.selectGroup
      if (this.selectGroup) {
      this.isShow = []
      } else {
        this.isShow = !this.isShow
        this.active = -1
      }
    }
  }
}
@@ -489,8 +492,9 @@
      .special-button {
        width: 0.1362rem;
        height: 0.2725rem;
        color: #C0C4CC;
        border-radius: 0.03rem 50% 50% 0.03rem;
        background:@background-color4;
        color:@color-tool;
        border:1px solid @color-tool;
      }
      .special-button:hover{
        color: #00fff6;

 src/components/panel/bounced/TextBounced.vue

 src/components/plugin/DownLoad.js

 src/components/plugin/FullScreen.js

 src/components/plugin/MakeTation.js

 src/components/plugin/MeaSure.js

 src/components/plugin/leaflet-measure-path/leaflet-measure-path.css

 src/components/plugin/leaflet-measure-path/leaflet-measure-path.js

 src/components/table/summarySheets.vue

@@ -1,45 +1,87 @@
<template>
  <div class="summary-sheets">
    <el-tooltip :popper-class="'map-tooltip'" effect="dark" content="统计表" placement="left">
    <el-tooltip :popper-class="'map-tooltip'" effect="dark" content="报表" placement="left">
      <div :class='["iconBtn",subtopic ? "active-button" : ""]' @click="subtopicBtn" >
         <i class="el-icon-tickets icon"></i>
      </div>
    </el-tooltip>
    <transition name="animationChange">
        <div class="subtopic" v-if="subtopic">
            <el-tooltip :popper-class="'map-tooltip'" effect="dark" content="统计表" placement="bottom">
      <div :class='["iconBtn",summaryVisible ? "active-button" : ""]' @click="closeBtn">
        <img src="@assets/images/map-pages/icon/toolbox/table.png" alt="" class="icon">
        <!--<span class="icon-name">统计表</span>-->
      </div>
    </el-tooltip>
    <!--        <Dialog ref="summarySheets" title="企业指标分类统计">-->
    <!--          <tab-handover></tab-handover>-->
    <!--        </Dialog >-->
    <div class="dialog" v-drag v-show="dialogShow">
      <tab-handover></tab-handover>
            <el-tooltip :popper-class="'map-tooltip'" effect="dark" content="指标" placement="bottom">
              <div :class='["iconBtn",companyVisible ? "active-button" : ""]' @click="showStatisDialog()" >
                <!-- <img src="@/assets/images/map-pages/icon/map/company.png" alt="" class="icon"> -->
                <i class="el-icon-office-building icon"></i>
    </div>
            </el-tooltip>
            <el-tooltip :popper-class="'map-tooltip'" effect="dark" content="预报警" placement="bottom">
              <div :class='["iconBtn",warnVisible ? "active-button" : ""]' @click="showWarnDialog()" >
                <img src="@/assets/images/map-pages/icon/map/warn.png" alt="" class="icon">
                <!--<span class="icon-name">预报警</span>-->
              </div>
            </el-tooltip>
        </div>
    </transition>
    <Dialog ref="summarySheets" title="企业预警报警分类统计" >
      <tab-handover></tab-handover>
    </Dialog>
    <Dialog ref="warnDialog" title="企业预警报警分类统计" >
      <warn></warn>
    </Dialog>
    <Dialog ref="indexStatisticsDialog" title="企业指标分类统计">
      <index-statistics></index-statistics>
    </Dialog>
  </div>
</template>

<script>
import tabHandover from '@components/table/components/tabHandover'
// import Dialog from '@views/popup/Dialog'
import Dialog from '../../views/popup/Dialog'
import Warn from './components/Warn'
import IndexStatistics from './components/IndexStatistics'

import '@/components/BaseNav/SolidWaste/directive/dir'

export default {
  name: 'summary-sheet.vue',
  components: {
    tabHandover
    tabHandover,
    Dialog,
    Warn,
    IndexStatistics
    // Dialog
  },
  data () {
    return {
      summaryVisible: false,
      dialogShow: false
      dialogShow: false,
      comp: Warn,
      warnVisible: false,
      companyVisible: false,
      subtopic: false
    }
  },
  methods: {
    closeBtn () {
      this.dialogShow = !this.dialogShow
      // const summary = document.getElementById('summary')
      // summary.style.display = 'none'
      this.$refs.summarySheets.show()
      this.summaryVisible = true
    },
    showWarnDialog () {
      this.$refs.warnDialog.show()
      this.warnVisible = true
    },
    showStatisDialog () {
      this.$refs.indexStatisticsDialog.show()
      this.companyVisible = true
    },
    subtopicBtn () {
      this.subtopic = !this.subtopic
    }
  },
  mounted () {
@@ -48,19 +90,48 @@
      this.$refs.summarySheets.$on('closeDialog', () => {
        that.summaryVisible = false
      })
      this.$refs.warnDialog.$on('closeDialog', () => {
        that.warnVisible = false
      })
      this.$refs.indexStatisticsDialog.$on('closeDialog', () => {
        that.companyVisible = false
      })
    })
  }
}
</script>

<style scoped lang="less">
  .animationChange-enter-active, .animationChange-leave-active {
    transition: all 0.5s;
  }

  .animationChange-enter, .animationChange-leave-to {
    opacity: 0;
    transform: translateX(-100px);
  }

.summary-sheets {
  position: absolute;
  display: inline-flex;
  overflow: hidden;
  top: 0.42979rem;
  left: 0.14583rem;
  /*width: 850px;*/
  /*height: 265px;*/
  z-index: 500;
  .subtopic{
    display: inline-flex;
    .iconBtn{
      margin-left: 0.03rem;
      border-color:#DCDFE6;
      color:#fff;
    }
    .iconBtn.active-button{
      border-color:#00fff6 !important;
      color:#00fff6 !important;
    }
  }

  .dialog {
    //width: 800px;

 src/conf/Constants.js

@@ -20,7 +20,7 @@
  OPACITY: 1,
  DASH_ARRAY: '4,4',
  DASH_SPPED: -5,
  ICON_SIZE: [20, 20]
  ICON_SIZE: [10, 10]
}

export const props = {

 src/conf/LayerPipeLine.js

@@ -9,5 +9,6 @@
  code: 'sewersPipeLine',
  name: '管线数据',
  checked: true,
  isShow: true,
  layers: [LayerPipeLines, LayerPk, LayerArea]
}

 src/conf/LayerTopic.js

@@ -13,5 +13,6 @@
  code: 'sewersTopic',
  name: '专题图层',
  checked: true,
  isShow: true,
  layers: [LayerPollutionSources, LayerWasteWater, LayerWasteGas, LayerWasteSolid, LayerAirQuality, LayerEnvRisk, LayerSoilGroundWater]
}

 src/conf/layers/LayerBasin.js

@@ -7,6 +7,7 @@
  code: 'sewersBasin',
  name: '区域图层',
  checked: true,
  isShow: true,
  layers: [
    {
      code: 'basinCj',

 src/conf/layers/LayerEnvRisk.js

@@ -14,7 +14,8 @@
      sname: '风险统计图', // 表名
      checked: true, // 默认选中状态
      url: WFS_URL + '?TYPENAME=公司',
      minZoom: 10
      minZoom: 10,
      color: ''
    },
    {
      code: 'envRiskMaterial',
@@ -22,7 +23,8 @@
      sname: '物资库',
      checked: true, // 默认选中状态
      wfs: WFS_URL + '?TYPENAME=码头',
      minZoom: 10
      minZoom: 10,
      color: ''
    },
    {
      code: 'envRiskMajor',
@@ -30,7 +32,8 @@
      sname: '重大风险',
      checked: true, // 默认选中状态
      wfs: WFS_URL + '?TYPENAME=装置区',
      minZoom: 10
      minZoom: 10,
      color: 'red'
    },
    {
      code: 'envRiskFirst',
@@ -38,7 +41,8 @@
      sname: '一级风险',
      checked: true, // 默认选中状态
      wfs: WFS_URL + '?TYPENAME=装置区',
      minZoom: 10
      minZoom: 10,
      color: 'sandybrown'
    },
    {
      code: 'envRiskSecond',
@@ -46,7 +50,8 @@
      sname: '二级风险',
      checked: true, // 默认选中状态
      wfs: WFS_URL + '?TYPENAME=装置区',
      minZoom: 10
      minZoom: 10,
      color: 'yellow'
    }
  ]
}

 src/views/MapTemplate.vue

@@ -10,7 +10,7 @@
    <!--    <menu-special></menu-special>-->
    <legend-panel></legend-panel>
    <summary-sheets></summary-sheets>
    <enterprise></enterprise>
    <!-- <enterprise></enterprise> -->
    <!--    <el-button id="map-btn" el-icon-c-scale-to-original icon="el-icon-c-scale-to-original" circle @click="isShowHidden"></el-button>-->
    <!--    <el-button type="primary" @click="ChangeState" class="solid-waste">固废</el-button>-->
    <!--    <el-button type="primary" @click="ChangeWaterState" class="Waste-water">废水</el-button>-->
@@ -31,7 +31,7 @@
import Popup from '@views/popup/Popup'
// import MenuSpecial from '@components/panel/MenuTopic'
import LegendPanel from '@components/panel/LegendPanel'
import Enterprise from '../components/table/enterprise'
// import Enterprise from '../components/table/enterprise'
// // 公共展示数据
import PublicBounced from '@components/BaseNav/PublicBounced/PublicBounced'
import LayerFactory from '@components/LayerController/service/LayerFactory'
@@ -39,7 +39,7 @@
export default {
  name: 'MapTemplate',
  components: {
    Enterprise,
    // Enterprise,
    LegendPanel,
    // MenuSpecial,
    ToolBoxPanel,