修改滚动条

chenyabin

2021-04-23 3140ec8fc9ac7d7fce42ee2d3ef222323a1c05ff

修改滚动条

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

@@ -454,6 +454,7 @@
}
/*****滚动条***/
.scroll::-webkit-scrollbar,
.s-map-popup-panel .el-tabs__content::-webkit-scrollbar,
.el-table__body-wrapper::-webkit-scrollbar,
.el-scrollbar__wrap::-webkit-scrollbar {
  /*滚动条整体样式*/
@@ -462,6 +463,7 @@
}

.scroll::-webkit-scrollbar-thumb,
.s-map-popup-panel .el-tabs__content::-webkit-scrollbar-thumb,
.el-table__body-wrapper::-webkit-scrollbar-thumb,
.el-scrollbar__wrap::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
@@ -469,6 +471,7 @@
  background: #000;
}
.scroll::-webkit-scrollbar-track,
.s-map-popup-panel .el-tabs__content::-webkit-scrollbar-track,
.el-table__body-wrapper::-webkit-scrollbar-track,
.el-scrollbar__wrap::-webkit-scrollbar-track {
  /*滚动条里面轨道*/

 src/components/LayerController/modules/LcServiceLayer.vue

@@ -3,24 +3,21 @@
        <div class="panel-title"> 图层控制 </div>
        <div class="wms-panel">
            <el-scrollbar class="wms-panel-scrollbar">
                <div v-for="item in serviceLayers" :key="item.code" class="layerbox">
                <div v-for="(item,index1) in serviceLayers" :key="index1" 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:25px;padding-top:10px;color:#fff;font-size: 16px;">
                        <input type="checkbox" :name="'wmsLayer_'+item.code" :checked="item.checked" :value="item.code" @change="swAllLayers(item,'')"/>{{ item.name }}
                        <input type="checkbox"  :class="item.type==1?'active':''" :name="'wmsLayer_'+item.code" :checked="item.checked" :value="item.code" @change="swAllLayers(item,'')"/>{{ item.name }}
                    </div>
                    <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"
                                   :name="'wmsSublayers_'+item.code+'_'+itm.code"
                                   :checked="itm.checked"
                                   :value="itm.code"
                                   @change="swAllLayers(itm,item.name)"/>{{ itm.name }}
                        <div class="basemap-layer-item" v-for="(itm,index2) in item.layers" :key="index2">
                            <input type="checkbox" :class="itm.type==1?'active':''" :name="'wmsSublayers_'+item.code+'_'+itm.code" :checked="itm.checked" :value="itm.code" @change="swAllLayers(itm,item.name)"/>{{ itm.name }}
                            <!-- 三级图层遍历 -->
                            <div class="layerbox-item-3">
                                <div class="basemap-layer-item" v-for="layer in itm.layers" :key="layer.code">
                                <div class="basemap-layer-item" v-for="(layer,index3) in itm.layers" :key="index3">
                                    <input type="checkbox"
                                           :class="layer.type==1?'active':''"
                                           :name="'wmsSublayers_'+item.code+'_'+layer.code"
                                           :checked="layer.checked"
                                           :value="layer.code"
@@ -59,6 +56,44 @@
      if (v === '专题图层') {
        bus.$emit('changeSearchBar', item)
      }

      this.serviceLayers.forEach(function (item1, index1) {
        if (item1.layers) {
          item1.istrue = 0
          item1.isfalse = 0
          item1.layers.forEach(function (item2, index2) {
            if (item2.layers) {
              item2.istrue = 0
              item2.isfalse = 0
              item2.layers.forEach(function (item3, index3) {
                if (item3.checked) { item2.istrue += 1 } else { item2.isfalse += 1 }
              })
              //  console.log(item2.layers.length, item2.istrue, item2.isfalse, item2.type)
              if (item2.istrue === item2.layers.length) {
                item2.type = 2
                item2.checked = true
              } else if (item2.isfalse === item2.layers.length) {
                item2.type = 0
                item2.checked = false
              } else {
                item2.type = 1
              }
              if (item2.checked) { item1.istrue += 1 } else { item1.isfalse += 1 }
            }
          })
          if (item1.istrue === item1.layers.length) {
            item1.type = 2
            item1.checked = true
          } else if (item1.isfalse === item1.layers.length) {
            item1.type = 0
            item1.checked = false
          } else {
            item1.type = 1
          }
          // console.log(item1.layers.length, item1.istrue, item1.isfalse, item1.type)
        }
      })
      console.log(this.serviceLayers)
    },
    swLayers (layers, checked) {
      if (layers) {
@@ -95,8 +130,8 @@

            .wms-panel-scrollbar{
                height: 600px;
                width: 285px;
                //width: 2.5rem;
                //width: 285px;
                width: 1.79rem;
                font-size: 14px;
            }
            .layerbox {
@@ -119,14 +154,16 @@
                }
                .downUp:hover{font-size: 26px;font-weight: 900}
                .layerbox-item {
                    padding-left: 30px;
                    padding-left: 0.1rem;
                    padding-top: 5px;
                    .basemap-layer-item {
                        margin-bottom: 5px;
                    .basemap-layer-item {margin-bottom: 5px;
                      input[type="checkbox"]{width:10px;height:10px;display: inline-block;text-align: center;vertical-align: middle; line-height: 10px;position: relative;}
                      input[type="checkbox"]::before{content: "";position: absolute;top: 0;left: 0;background: #fff;width: 100%;height: 100%;border: 1px solid #d9d9d9}
                      input[type="checkbox"]:checked::before{content: "\2713";background-color: @color-highlight;position: absolute;top: 0;left: 0;width:100%;border: 1px solid #fff700;color:@background-color;font-size: 10px;font-weight: bold;}

                      input[type="checkbox"]:checked::before{content: "\2713";background-color: @color-highlight;position: absolute;top: 0;left: 0;width:100%;border: 1px solid #fff700;
                          color:@background-color;font-size: 10px;font-weight: bold;}
                        input.active[type="checkbox"]::before,
                        input.active[type="checkbox"]:checked::before{content: "\2713";background: @background-color;position: absolute;top: 0;left: 0;width:100%;border: 1px solid @background-color;
                            color:@color-highlight;font-size: 10px;font-weight: bold;}
                    }
                }
                .layerbox-item-3{

 src/conf/LayerTopic.js

@@ -18,5 +18,6 @@
  name: '专题图层',
  checked: false,
  isShow: true,
  type: 0,
  layers: [LayerPollutionSources, LayerWasteWater, LayerWasteGas, LayerWasteSolid, LayerAirQuality, LayerEnvRisk, LayerSoilGroundWater, LayerPipeLines, LayerPk, LayerVideo, LayerArea]
}

 src/conf/layers/LayerAirQuality.js

@@ -7,12 +7,14 @@
  code: 'sewersAirQuality',
  name: '空气质量',
  checked: false,
  type: 0,
  layers: [
    {
      code: 'airQualityStation',
      name: '监测站',
      sname: '监测站', // 表名
      checked: false, // 默认选中状态
      type: 0,
      url: WFS_URL + '?TYPENAME=公司'
    }
  ]

 src/conf/layers/LayerArea.js

@@ -7,12 +7,14 @@
  code: 'sewersArea',
  name: '区域信息',
  checked: false,
  type: 0,
  layers: [
    {
      code: 'sewersAreaGs',
      name: '公司',
      sname: '公司', // 表名
      checked: true, // 默认选中状态
      type: 0,
      url: WFS_URL + '?TYPENAME=公司'
    },
    {
@@ -20,6 +22,7 @@
      name: '码头',
      sname: '码头',
      checked: false, // 默认选中状态
      type: 0,
      wfs: WFS_URL + '?TYPENAME=码头'
    },
    {
@@ -27,6 +30,7 @@
      name: '装置区',
      sname: '装置区',
      checked: false, // 默认选中状态
      type: 0,
      wfs: WFS_URL + '?TYPENAME=装置区'
    }
  ]

 src/conf/layers/LayerBasin.js

@@ -8,12 +8,14 @@
  name: '区域图层',
  checked: true,
  isShow: true,
  type: 2,
  layers: [
    {
      code: 'basinCj',
      name: '长江流域',
      sname: '长江流域', // 表名
      checked: true, // 默认选中状态
      type: 2,
      url: WFS_URL + '?TYPENAME=公司'
    },
    {
@@ -21,6 +23,7 @@
      name: '黄河流域',
      sname: '黄河流域',
      checked: true, // 默认选中状态
      type: 2,
      wfs: WFS_URL + '?TYPENAME=码头'
    },
    {
@@ -28,6 +31,7 @@
      name: '渤海流域',
      sname: '渤海流域',
      checked: true, // 默认选中状态
      type: 2,
      wfs: WFS_URL + '?TYPENAME=装置区'
    },
    {
@@ -35,6 +39,7 @@
      name: '其他',
      sname: '其他',
      checked: true, // 默认选中状态
      type: 2,
      wfs: WFS_URL + '?TYPENAME=装置区'
    }
  ]

 src/conf/layers/LayerEnvRisk.js

@@ -7,12 +7,14 @@
  code: 'sewersEnvRisk',
  name: '环境风险',
  checked: false,
  type: 0,
  layers: [
    {
      code: 'envRiskChart',
      name: '风险统计图',
      sname: '风险统计图', // 表名
      checked: false, // 默认选中状态
      type: 0,
      url: WFS_URL + '?TYPENAME=公司',
      color: ''
    },
@@ -21,6 +23,7 @@
      name: '物资库',
      sname: '物资库',
      checked: false, // 默认选中状态
      type: 0,
      wfs: WFS_URL + '?TYPENAME=码头',
      color: ''
    },
@@ -29,6 +32,7 @@
      name: '重大风险',
      sname: '重大风险',
      checked: false, // 默认选中状态
      type: 0,
      wfs: WFS_URL + '?TYPENAME=装置区',
      minZoom: 10,
      color: 'red'
@@ -38,6 +42,7 @@
      name: '一级风险',
      sname: '一级风险',
      checked: false, // 默认选中状态
      type: 0,
      minZoom: 10,
      color: 'sandybrown'
    },
@@ -46,6 +51,7 @@
      name: '二级风险',
      sname: '二级风险',
      checked: false,
      type: 0,
      minZoom: 10,
      color: 'yellow'
    },
@@ -54,6 +60,7 @@
      name: '三级风险',
      sname: '三级风险',
      checked: false,
      type: 0,
      minZoom: 10,
      color: 'green'
    }

 src/conf/layers/LayerPipeLines.js

@@ -11,6 +11,7 @@
  code: 'sewersPipeLines',
  name: '管线',
  checked: false,
  type: 0,
  childLayer: [LayerFsss, LayerHbss],
  layers: [
    {
@@ -18,6 +19,7 @@
      name: '雨水线',
      sname: '管网',
      checked: false,
      type: 0,
      // wfs: WFS_URL + '?TYPENAME=管网&FILTER=<Filter xmlns="http://www.opengis.net/ogc"><PropertyIsEqualTo><PropertyName>mediumtype</PropertyName><Literal>雨水管线</Literal></PropertyIsEqualTo></Filter>',
      wfs: 'http://xearth.cn:6240/geoserver/sewer/wfs?typeName=sewer:pipeline&maxFeatures=500&outputFormat=application%2Fjson&cql_filter=linenumtype=\'雨水管线\'',
      icon: 'sewers/雨水线.png',
@@ -33,6 +35,7 @@
      name: '事故水线',
      sname: '事故水',
      checked: false,
      type: 0,
      minZoom: 13,
      wfs: WFS_URL + '?TYPENAME=事故水'
    },
@@ -41,6 +44,7 @@
      name: '含油污水线',
      sname: '含油污水',
      checked: false,
      type: 0,
      minZoom: 13,
      color: '#ffaa00',
      wfs: 'http://xearth.cn:6240/geoserver/sewer/wfs?typeName=sewer:pipeline&maxFeatures=500&outputFormat=application%2Fjson&cql_filter=mediumtype=\'含油污水\'',
@@ -54,6 +58,7 @@
      name: '含盐污水线',
      sname: '含盐污水',
      checked: false,
      type: 0,
      minZoom: 13,
      wfs: WFS_URL + '?TYPENAME=含盐污水'
    },
@@ -62,6 +67,7 @@
      name: '含碱污水线',
      sname: '含碱污水',
      checked: false,
      type: 0,
      wfs: WFS_URL + '?TYPENAME=含碱污水',
      minZoom: 10
    },
@@ -70,6 +76,7 @@
      name: '生活污水',
      sname: '生活污水',
      checked: false,
      type: 0,
      minZoom: 13,
      wfs: WFS_URL + '?TYPENAME=生活污水'
    },
@@ -78,6 +85,7 @@
      name: '净化水线',
      sname: '净化水',
      checked: false,
      type: 0,
      minZoom: 13,
      wfs: WFS_URL + '?TYPENAME=净化水'
    },
@@ -85,6 +93,7 @@
      code: 'loopline',
      name: '循环水线',
      sname: '循环水',
      type: 0,
      checked: false,
      minZoom: 13,
      wfs: WFS_URL + '?TYPENAME=循环水'
@@ -94,6 +103,7 @@
      name: '生产污水',
      sname: '生产污水',
      checked: false,
      type: 0,
      minZoom: 13,
      color: '#a8a800',
      wfs: 'http://xearth.cn:6240/geoserver/sewer/wfs?typeName=sewer:pipeline&maxFeatures=500&outputFormat=application%2Fjson&cql_filter=mediumtype=\'生产污水\'',

 src/conf/layers/LayerPk.js

@@ -6,12 +6,14 @@
  name: '排放口',
  icon: 'sewers/雨水排口.png',
  checked: true,
  type: 0,
  layers: [
    {
      code: 'sewersNpk',
      name: '内排口',
      sname: '内排口',
      checked: true,
      type: 0,
      icon: 'sewers/雨水排口.png',
      wfs: 'http://xearth.cn:6240/geoserver/sewer/wfs?service=WFS&version=1.0.0&request=GetFeature&typeName=sewer:dischargeport&maxFeatures=50&outputFormat=application/json&cql_filter=pfktype=\'内排\'',
      minZoom: 10 // 在指定级别显示
@@ -22,6 +24,7 @@
      sname: '外排口',
      icon: 'sewers/雨水排口.png',
      checked: true, // 默认选中状态
      type: 0,
      wfs: 'http://xearth.cn:6240/geoserver/sewer/wfs?service=WFS&version=1.0.0&request=GetFeature&typeName=sewer:dischargeport&maxFeatures=50&outputFormat=application/json&cql_filter=pfktype=\'外排\'',
      minZoom: 10
    }

 src/conf/layers/LayerPollutionSources.js

@@ -6,12 +6,14 @@
  code: 'pollutionSources',
  name: '污染源',
  checked: false,
  type: 0,
  layers: [
    {
      code: 'pollutionSourcesSczz',
      name: '生产装置',
      sname: '生产装置', // 表名
      checked: false, // 默认选中状态
      type: 0,
      url: 'http://www.baidu.com', // 请求业务数据接口
      minZoom: 10 // 在指定级别显示
    },
@@ -20,6 +22,7 @@
      name: '治理设施',
      sname: '治理设施', // 表名
      checked: false, // 默认选中状态
      type: 0,
      url: 'http://www.baidu.com', // 请求业务数据接口
      minZoom: 10 // 在指定级别显示
    }]

 src/conf/layers/LayerSoilGroundWater.js

@@ -7,12 +7,14 @@
  code: 'sewersSoilGroundWater',
  name: '土壤及地下水',
  checked: false,
  type: 0,
  layers: [
    {
      code: 'soil',
      name: '土壤',
      sname: '土壤', // 表名
      checked: false, // 默认选中状态
      type: 0,
      url: WFS_URL + '?TYPENAME=公司'
    },
    {
@@ -20,6 +22,7 @@
      name: '地下水',
      sname: '地下水',
      checked: false, // 默认选中状态
      type: 0,
      wfs: WFS_URL + '?TYPENAME=码头'
    },
    {
@@ -27,6 +30,7 @@
      name: '一级风险地块',
      sname: '一级风险地块',
      checked: false, // 默认选中状态
      type: 0,
      wfs: WFS_URL + '?TYPENAME=装置区',
      color: 'red'
    },
@@ -35,6 +39,7 @@
      name: '二级风险地块',
      sname: '二级风险地块',
      checked: false, // 默认选中状态
      type: 0,
      wfs: WFS_URL + '?TYPENAME=装置区',
      color: 'yellow'
    },
@@ -43,6 +48,7 @@
      name: '三级风险地块',
      sname: '三级风险地块',
      checked: false, // 默认选中状态
      type: 0,
      wfs: WFS_URL + '?TYPENAME=装置区',
      color: 'green'
    }

 src/conf/layers/LayerVideo.js

@@ -4,5 +4,6 @@
export const LayerVideo = {
  code: 'sewersVideo',
  name: '视频监控',
  checked: false
  checked: false,
  type: 0
}

 src/conf/layers/LayerWasteGas.js

@@ -6,12 +6,14 @@
  code: 'wasteGas',
  name: '废气',
  checked: false,
  type: 0,
  layers: [
    {
      code: 'wasteGasPfk',
      name: '排放口',
      sname: '排放口', // 表名
      checked: false,
      type: 0,
      url: 'http://www.baidu.com'
    },
    {
@@ -19,6 +21,7 @@
      name: '可燃气',
      sname: '可燃气',
      checked: false,
      type: 0,
      url: ''
    },
    {
@@ -26,6 +29,7 @@
      name: '有害气',
      sname: '有害气',
      checked: false,
      type: 0,
      url: ''
    },
    {
@@ -33,6 +37,7 @@
      name: 'VOCs',
      sname: 'VOCs',
      checked: false,
      type: 0,
      url: ''
    }
  ]

 src/conf/layers/LayerWasteSolid.js

@@ -7,12 +7,14 @@
  code: 'wasteSolid',
  name: '固废',
  checked: false,
  type: 0,
  layers: [
    {
      code: 'wasteSolidCcd',
      name: '贮存点',
      sname: '贮存点',
      checked: false,
      type: 0,
      url: 'http://www.baidu2.com'
    }
  ]

 src/conf/layers/LayerWasteWater.js

@@ -6,12 +6,14 @@
  code: 'wasteWater',
  name: '废水',
  checked: false,
  type: 0,
  layers: [
    {
      code: 'wasteWaterPfk',
      name: '排放口',
      sname: '排放口', // 表名
      checked: false, // 默认选中状态
      type: 0,
      url: 'http://www.baidu.com'
    },
    {
@@ -19,6 +21,7 @@
      name: '流量',
      sname: '流量',
      checked: false, // 默认选中状态
      type: 0,
      url: 'http://www.baidu2.com'
    },
    {
@@ -26,6 +29,7 @@
      name: '液位',
      sname: '液位',
      checked: false, // 默认选中状态
      type: 0,
      url: ''
    }
  ]

 src/views/popup/Popup.vue

@@ -96,9 +96,9 @@
<style lang="less" >
@import '../../assets/css/map/map-popup.less';
#popup{
  .el-tabs__content{
    max-height: 300px;
    overflow: auto;
 .el-tabs__content{
    max-height: 240px;
    overflow-y: scroll;
  }
}
</style>