修改表格箭头

wangqi

2021-03-25 90bd41135b97f97f284da2716cec475a7ae8d657

修改表格箭头

 src/components/LayerController/modules/LcBaseMap.vue

@@ -2,7 +2,7 @@
  <div class="base-map-inner-panel" v-show="isShow">
    <div  style="display: flex;" v-for="item in basemapList" :key="item.code" class="basemap-layer-item">
        <img class="base-map-img" :src="item.conf.icon_actived" width="50" height="50" :title="item.name"
             @click="changeBasemap(item)"/>
             @click="changeBasemap(item)" alt=""/>
        <el-checkbox  class="base-map-anno" name="basemap" v-model="item.conf.annotationCheck"
                     label="标注" @change="changeBasemap(item)">
        </el-checkbox>
@@ -30,6 +30,7 @@
  methods: {
    updateBasemapList () {
      this.basemapList = this.basemapHelper.getBasemapList()
      console.log(this.basemapList)
    },
    changeBasemap (itm) {
      const code = itm.code

 src/components/LayerController/modules/LcServiceLayer.vue

@@ -1,134 +1,134 @@
<template>
    <div class="inner-panel">
        <div class="title">
            图层控制
        </div>
        <div class="wms-panel">
            <div v-for="item in serviceLayers" :key="item.code" class="layerbox">
                <div><input type="checkbox" :name="'wmsLayer_'+item.code" :checked="item.checked" :value="item.code"
                            @change="swAllLayers(item)"/>{{ item.name }} <span @click="swFilter(item)"
                                                                               class="btn-filter">过滤</span>
                </div>
                <div class="layerbox-item">
                    <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="swWmsLayer(item.url,itm)"/>{{
                        itm.name }}
                    </div>
                </div>
            </div>
        </div>
        <lc-service-layer-filter v-if="layerFilterVisible" ref="serviceLayerFilter"></lc-service-layer-filter>
<!--        <div class="title">-->
<!--            图层控制-->
<!--        </div>-->
<!--        <div class="wms-panel">-->
<!--            <div v-for="item in serviceLayers" :key="item.code" class="layerbox">-->
<!--                <div><input type="checkbox" :name="'wmsLayer_'+item.code" :checked="item.checked" :value="item.code"-->
<!--                            @change="swAllLayers(item)"/>{{ item.name }} <span @click="swFilter(item)"-->
<!--                                                                               class="btn-filter">过滤</span>-->
<!--                </div>-->
<!--                <div class="layerbox-item">-->
<!--                    <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="swWmsLayer(item.url,itm)"/>{{-->
<!--                        itm.name }}-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
<!--        <lc-service-layer-filter v-if="layerFilterVisible" ref="serviceLayerFilter"></lc-service-layer-filter>-->
    </div>
</template>

<script>
import WfsHelper from '../../helpers/WfsHelper'
import LcServiceLayerFilter from '@components/LayerController/modules/LcServiceLayerFilter'
import AjaxUtils from '../../../utils/AjaxUtils'
<!--<script>-->
<!--import WfsHelper from '../../helpers/WfsHelper'-->
<!--import LcServiceLayerFilter from '@components/LayerController/modules/LcServiceLayerFilter'-->
<!--import AjaxUtils from '../../../utils/AjaxUtils'-->

export default {
  name: 'LcServiceLayer',
  components: { LcServiceLayerFilter },
  data () {
    return {
      layerFilterVisible: false
    }
  },
  computed: {
    serviceLayers () {
      return this.$store.state.map.serviceLayers.LayerSewersLine
    }
  },
  mounted () {
    // console.log('03步骤：', this.helper)
    this.updateServiceLayerList()
  },
  methods: {
    swAllLayers (item) {
      // eslint-disable-next-line no-debugger
      item.checked = !item.checked
      for (let i = 0, len = item.layers.length; i < len; ++i) {
        item.layers[i].checked = item.checked
      }
      this.updateWms()
    },
    loadWfs () {
      var wfsHelper = new WfsHelper()
      wfsHelper.addTypeName('管线点')
      wfsHelper.addEquals('pipename', '研究院01路YS000001')
<!--export default {-->
<!--  name: 'LcServiceLayer',-->
<!--  components: { LcServiceLayerFilter },-->
<!--  data () {-->
<!--    return {-->
<!--      layerFilterVisible: false-->
<!--    }-->
<!--  },-->
<!--  computed: {-->
<!--    serviceLayers () {-->
<!--      return this.$store.state.map.serviceLayers.LayerSewersLine-->
<!--    }-->
<!--  },-->
<!--  mounted () {-->
<!--    // console.log('03步骤：', this.helper)-->
<!--    this.updateServiceLayerList()-->
<!--  },-->
<!--  methods: {-->
<!--    swAllLayers (item) {-->
<!--      // eslint-disable-next-line no-debugger-->
<!--      item.checked = !item.checked-->
<!--      for (let i = 0, len = item.layers.length; i < len; ++i) {-->
<!--        item.layers[i].checked = item.checked-->
<!--      }-->
<!--      this.updateWms()-->
<!--    },-->
<!--    loadWfs () {-->
<!--      var wfsHelper = new WfsHelper()-->
<!--      wfsHelper.addTypeName('管线点')-->
<!--      wfsHelper.addEquals('pipename', '研究院01路YS000001')-->

      AjaxUtils.GetDataAsynByUrl(wfsHelper.getUrl(), {}, (res) => {
        console.log(res)
      })
    },
    swWmsLayer (url, itm) {
      itm.checked = !itm.checked
      if (itm.checked) {
        window.serviceLayerHelper.loadGeojsonLayer(url, itm)
      } else {
        window.serviceLayerHelper.removeLayer(itm)
      }
      // this.updateWms()
    },
    swFilter (item) {
      this.layerFilterVisible = !this.layerFilterVisible
    },
    updateServiceLayerList () {
<!--      AjaxUtils.GetDataAsynByUrl(wfsHelper.getUrl(), {}, (res) => {-->
<!--        console.log(res)-->
<!--      })-->
<!--    },-->
<!--    swWmsLayer (url, itm) {-->
<!--      itm.checked = !itm.checked-->
<!--      if (itm.checked) {-->
<!--        window.serviceLayerHelper.loadGeojsonLayer(url, itm)-->
<!--      } else {-->
<!--        window.serviceLayerHelper.removeLayer(itm)-->
<!--      }-->
<!--      // this.updateWms()-->
<!--    },-->
<!--    swFilter (item) {-->
<!--      this.layerFilterVisible = !this.layerFilterVisible-->
<!--    },-->
<!--    updateServiceLayerList () {-->

    },
    updateWms () {
      var mapConfig = this.mapConfig
      var wmsHelper = new WfsHelper()
      wmsHelper.initMapConfig(mapConfig)
      var wmsLayersMap = wmsHelper.getWmsLayersMap()
      for (var k in wmsLayersMap) {
        var layers = wmsLayersMap[k]
        var tileLayer = window.serviceLayerHelper.getTileLayer(k)
        if (tileLayer) {
          tileLayer.setParams({ layers: layers.join(',') }, false)
          tileLayer.setUrl(tileLayer.config.url, false)
        }
      }
    }
  }
}
</script>
<!--    },-->
<!--    updateWms () {-->
<!--      var mapConfig = this.mapConfig-->
<!--      var wmsHelper = new WfsHelper()-->
<!--      wmsHelper.initMapConfig(mapConfig)-->
<!--      var wmsLayersMap = wmsHelper.getWmsLayersMap()-->
<!--      for (var k in wmsLayersMap) {-->
<!--        var layers = wmsLayersMap[k]-->
<!--        var tileLayer = window.serviceLayerHelper.getTileLayer(k)-->
<!--        if (tileLayer) {-->
<!--          tileLayer.setParams({ layers: layers.join(',') }, false)-->
<!--          tileLayer.setUrl(tileLayer.config.url, false)-->
<!--        }-->
<!--      }-->
<!--    }-->
<!--  }-->
<!--}-->
<!--</script>-->

<style scoped lang="less">
    .inner-panel {
        .title{
            color: #ffffff;
            font-size: 16px;
            font-weight: 600;
            margin: 10px;
            text-align: center;
        }
        .btn-filter {
            cursor: pointer;
            color: #ffffff;
        }
<!--<style scoped lang="less">-->
<!--    .inner-panel {-->
<!--        .title{-->
<!--            color: #ffffff;-->
<!--            font-size: 16px;-->
<!--            font-weight: 600;-->
<!--            margin: 10px;-->
<!--            text-align: center;-->
<!--        }-->
<!--        .btn-filter {-->
<!--            cursor: pointer;-->
<!--            color: #ffffff;-->
<!--        }-->

        .wms-panel {
            width: 250px;
<!--        .wms-panel {-->
<!--            width: 250px;-->

            .layerbox {
                width: 100%;
<!--            .layerbox {-->
<!--                width: 100%;-->

                .layerbox-item {
                    display: flex;
                    flex-flow: row wrap;
                    margin-left: 15px;
                    margin-top: 5px;
<!--                .layerbox-item {-->
<!--                    display: flex;-->
<!--                    flex-flow: row wrap;-->
<!--                    margin-left: 15px;-->
<!--                    margin-top: 5px;-->

                    .basemap-layer-item {
                        width: 50%;
                    }
                }
            }
        }
    }
<!--                    .basemap-layer-item {-->
<!--                        width: 50%;-->
<!--                    }-->
<!--                }-->
<!--            }-->
<!--        }-->
<!--    }-->

</style>
<!--</style>-->

 src/components/panel/ToolBoxPanel.vue

@@ -24,13 +24,13 @@
            </el-button>
            <el-button v-for="(itemT,indexT) in item.items" :key="indexT" @click="choiceItem(itemT,indexT)"
                       v-show="item.index!=='2'">
              <img :src="itemT.iconChoose" :title="itemT.title" v-if="Selecd === indexT && checkedItem"/>
              <img :src="itemT.icon" :title="itemT.title" v-else/>
              <img :src="itemT.iconChoose" :title="itemT.title" v-if="Selecd === indexT && checkedItem" alt=""/>
              <img :src="itemT.icon" :title="itemT.title" alt="" v-else/>
            </el-button>
            <div class="base-map-inner-panel" v-show="item.index==='2'">
              <div v-for="item in basemapList" :key="item.code" class="basemap-layer-item">
                <img class="base-map-img" width="50" height="50" :src="item.conf.icon_actived" :title="item.name"
                     @click="changeBasemap(item)"/>
                     @click="changeBasemap(item)" alt=""/>
                <el-checkbox class="base-map-anno" name="basemap" v-model="item.conf.annotationCheck"
                             label="标注" @change="changeBasemap(item)">
                </el-checkbox>
@@ -265,6 +265,7 @@
  methods: {
    updateBasemapList () {
      this.basemapList = this.basemapHelper.getBasemapList()
      console.log()
    },
    changeBasemap (itm) {
      this.active = -1

 src/components/table/components/WasteGas.vue

@@ -11,10 +11,19 @@
                    width="30px"
                    label=""
            >
                <template>
                    <i class="el-icon-caret-right"></i>
                    <span style="margin-left: 10px"></span>
                </template>
              <template slot-scope="{row,$index}">
                <!--                   <i class="el-icon-caret-right" v-if="$index ===1"></i>-->
                <el-popover
                    placement="bottom"
                    trigger="click"
                    :disabled="!isShowIcon"
                    popper-class="popovers"
                >
                  <ChemicalWastewater v-show="$index ===1"></ChemicalWastewater>
                  <i class="el-icon-caret-right" :class="{active: isActive === $index}" slot="reference" @click="doIcon($index)"></i>
                  <!--                   <i class="el-icon-caret-bottom"   slot="reference" v-else @click="doIcon($index)"></i>-->
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column
                    label="序号"
@@ -78,7 +87,7 @@
                        label="正常"
                        width="60px">
                  <template slot-scope="{row,$index}">
                    <u v-if="$index!=1" >{{row.normal}}</u>
                    <u v-if="$index!==1" >{{row.normal}}</u>
                    <el-popover v-else
                                placement="bottom-end"
                                width="200"
@@ -110,7 +119,7 @@
                        label="缺失"
                        width="60px">
                  <template slot-scope="{row,$index}">
                    <u v-if="$index!=1" >{{row.deficiency}}</u>
                    <u v-if="$index!==1" >{{row.deficiency}}</u>
                    <el-popover v-else
                                placement="bottom-end"
                                width="200"
@@ -128,18 +137,20 @@
</template>

<script>
// import ChemicalWastewater from '@components/table/components/componented/ChemicalWastewater'
import ChemicalWastewater from '@components/table/components/componented/ChemicalWastewater'
import Refinery from '@components/table/components/componented/refinery'
import MissingAlarm from '@components/table/components/componented/MissingAlarm'
export default {
  name: 'WasteGas',
  components: {
    MissingAlarm,
    Refinery
    // ChemicalWastewater
    Refinery,
    ChemicalWastewater
  },
  data () {
    return {
      isActive: '',
      isShowIcon: false,
      tableData: [{
        UserName: '集团名称',
        WasteWaters: '',
@@ -192,7 +203,7 @@
    }
  },
  methods: {
    tableHeaderColor ({ row, column, owIndex, columnIndex }) {
    tableHeaderColor ({ columnIndex }) {
      return 'background-color: rgba(26, 73, 81, 0.901960784313726);color:#fff;font-wight:500;font-size:12px;text-align:center;height:0px'
    },
    // 表头样式设置
@@ -202,11 +213,27 @@
    // 获取点击的表格
    handle (row, column, event, cell) {
      console.log(row.UserName)
    },
    doIcon (index) {
      if (index !== 1) {
        this.isShowIcon = false
        this.isActive = ''
        return
      }
      this.isShowIcon = !this.isShowIcon
      if (index === this.isActive) {
        this.isActive = ''
        return
      }
      this.isActive = index
    }
  }
}
</script>

<style scoped>

.active {
  /*color: red;*/
  transform:rotate(90deg);
}
</style>

 src/components/table/components/componented/MissingAlarm.vue

@@ -111,21 +111,21 @@
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        address: ' 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-02',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        address: ' 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-04',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        address: ' 1518 弄',
        zip: 200333
      }]
    }

 src/components/table/components/componented/refinery.vue

@@ -43,19 +43,19 @@
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
        address: ' 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
        address: ' 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
        address: ' 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
        address: ' 1516 弄'
      }]
    }
  }

 src/views/MapTemplate.vue

@@ -1,6 +1,7 @@
<template>
  <div class="full-screen">
    <popup ref="popup" @callPopup="callPopup"></popup>
    <popup-gas ref="popupGas" @popupgas="popupgas"></popup-gas>
    <div id="map" ref="rootmap">
    </div>
    <sgis-layer-controller :preset="'warningPreset'">
@@ -9,7 +10,7 @@
      <lc-service-layer class="barline" v-if="lcServiceLayerVisible"></lc-service-layer>
    </sgis-layer-controller>
    <monitor-panel></monitor-panel>
    <!--        <top-enterprise-panel></top-enterprise-panel>-->
<!--            <top-enterprise-panel></top-enterprise-panel>-->
    <tool-box-panel ref="toolBox"></tool-box-panel>
<!--    <menu-special></menu-special>-->
    <legend-panel></legend-panel>
@@ -22,6 +23,8 @@
<script>
import 'leaflet/dist/leaflet.css'
import Sgis from '@src/Sgis'
// import Vue from 'vue'
import creatPopup from './creatPopup.js'
// import mapConfig from '@/conf/MapConfig'
import SgisLayerController from '@components/LayerController/LayerController'
import LcBasemap from '@components/LayerController/modules/LcBaseMap'
@@ -34,6 +37,7 @@
// import MenuSpecial from '@components/panel/MenuTopic'
import LegendPanel from '@components/panel/LegendPanel'
import Enterprise from '../components/table/enterprise'
import PopupGas from '@/components/flueGas/popup-gas'

export default {
  name: 'MapTemplate',
@@ -48,11 +52,11 @@
    LcBasemap,
    LcServiceLayer,
    Popup,
    summarySheets
    summarySheets,
    PopupGas
  },
  data () {
    return {
      // isShowBtn: false,
      map: null,
      lcServiceLayerVisible: false,
      basemapHelper: {},
@@ -66,14 +70,14 @@
    }
  },
  beforeMount () {
    // import('@/assets/airQuality.json').then(res => {
    //   console.log(res.features)
    // })
    this.$nextTick(() => {
      this.init()
    })
  },
  methods: {
    isShowHidden () {
      this.isShowBtn = !this.isShowBtn
    },
    saveMapStatus () {
      window.serviceLayerHelper = this.serviceLayerHelper
      this.$store.commit('setMapObj', this.map)
@@ -83,7 +87,7 @@

      this.lcServiceLayerVisible = true
    },
    init () {
    init: function () {
      const mapcontainer = this.$refs.rootmap
      this.map = Sgis.initMap(mapcontainer)
      this.$refs.toolBox.map = this.map
@@ -103,9 +107,13 @@
      // this.setBasemapHelper(this.basemapHelper)
      // this.setServiceLayerHelper(this.serviceLayerHelper)
      // this.setVectorLayerHelper(this.vectorLayerHelper)
      this.addMarker()
      import('@/assets/airQuality.json').then(res => {
      // this.addMarker()
        this.addMarker(res.features)
      })
      // console.log(this.L)
    },
    addMarker () {
    addMarker (arr) {
      const L = this.L
      var icon = new L.Icon({
        iconUrl: 'assets/images/map/marker-icon.png',
@@ -115,7 +123,8 @@
        popupAnchor: [1, -34],
        shadowSize: [41, 41]
      })
      var marker = L.marker([32.2221, 118.7843], {
      // 00000000000000000000
      var marker = L.marker([32.222, 118.7843], {
        icon: icon
      }).addTo(this.map)
        .bindPopup(() => this.$refs.popup.$el, {
@@ -131,14 +140,81 @@
          // sticky:true,//是否标记在点上面
          className: 'anim-tooltip'// CSS控制
        })

      marker.on('popupopen', this.onLayerClick)
      // 000000000000000000
      // 废气
      // const MagicMarker = new L.marker.magic([32.226, 118.7848], {
      //   iconUrl: 'assets/images/map/marker-icon.png',
      //   magic: 'vanishIn'
      // }).addTo(this.map)
      arr.forEach(item => {
        const { geometry: { coordinates } } = item
        const coordinate = coordinates.map(item => parseFloat(item))
        const data = creatPopup({ isShow: true, tirm: '666' })
        console.log(item.properties.name)
        // console.log(coordinate)
        L.marker(coordinate, { icon: icon }).addTo(this.map).bindPopup(() => data, {
          className: 's-map-popup',
          minWidth: 300,
          closeButton: false,
          autoClose: false
        }).bindTooltip(item.properties.name, {
          // permanent : true,
          offset: [0, 0], // 偏移
          direction: 'right', // 放置位置
          // sticky:true,//是否标记在点上面
          className: 'anim-tooltip'// CSS控制
        })
      })
      // marker.on('popupopen', this.onClickgaspoppup)
      // console.log(this.$refs)
      // L.marker([38.8332098722457, 117.447918949615], {
      //   icon: icon
      // }).addTo(this.map)
      // var marker = L.marker([32.222, 118.7843], {
      //   icon: icon
      // }).addTo(this.map)
      //   .bindPopup(() => data, {
      //     className: 's-map-popup',
      //     minWidth: 300,
      //     closeButton: false,
      //     autoClose: false
      //   })
      //   .bindTooltip('字体光晕效果t.', {
      //     // permanent : true,
      //     offset: [0, 0], // 偏移
      //     direction: 'right', // 放置位置
      //     // sticky:true,//是否标记在点上面
      //     className: 'anim-tooltip'// CSS控制
      //   })
      //
      // L.marker([32.229, 118.7843], {
      //   icon: icon
      // }).addTo(this.map)
      //   .bindPopup(() => data1, {
      //     className: 's-map-popup',
      //     minWidth: 300,
      //     closeButton: false,
      //     autoClose: false
      //   })
      //   .bindTooltip('字体光晕效果t.', {
      //     // permanent : true,
      //     offset: [0, 0], // 偏移
      //     direction: 'right', // 放置位置
      //     // sticky:true,//是否标记在点上面
      //     className: 'anim-tooltip'// CSS控制
      //   })
      //
      // marker.on('popupopen', this.onLayerClick)
    },
    onLayerClick () {
      this.$refs.popup.setShow()
    },
    callPopup (val) {
      console.log(val)
    },
    popupgas () {
      console.log(1)
    }
  }
}