遥感检测与后台默认展示关联，修改数据转换逻辑

guoshilong

2022-09-27 b2e3aa019e2705d8aa13ba863155b42513f84c12

遥感检测与后台默认展示关联，修改数据转换逻辑

 src/assets/viewdata.js

@@ -9,22 +9,37 @@
var viewdata = []
getRemoteDetailsList().then(res=>{
    var data = res.data.data

    data.forEach(e=>{
        var childItem = []
        var i=0
        e.remoteList.forEach(k=>{
            childItem.push({
            var myItem = {
                title:k.reName,
                url:k.reUrl
            })
                url:k.reUrl,
                type:k.reType//0为默认展示、1为不展示
            }
            childItem.push(myItem)
            if (k.reType =="0"){
                myItem.index = i
                e.selectItem = myItem
            }
            i++
        })
        if (!e.selectItem){
            e.selectItem =  childItem[0]
            e.selectItem.index = 0
        }

        viewdata.push({
            name:e.name,
            latitude: e.latitude,
            longitude: e.longitude,
            selectItem: e.selectItem,
            childItem:childItem
        })
    })


})
export {viewdata}


 src/components/remote/index.vue

@@ -142,6 +142,11 @@
    },

    created () {
        this.farmSelectList=viewdata
        this.currentTitle= viewdata.selectItem.name
        this.timeLineList= viewdata[0].childItem
        this.currentObj= viewdata[0].selectItem
        this.currentInd = viewdata[0].selectItem.index
        // this.leftRollerLayers = [
        //         {
        //     title: '2022年6月影像',
@@ -308,11 +313,10 @@
                    maximumLevel: 18
                })
            )

            viewdata.forEach(item => {
                global.viewer.imageryLayers.addImageryProvider(
                    new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
                        url: item.childItem[0].url,
                        url: item.selectItem.url,
                        maximumLevel: 18
                    })
                )
@@ -395,8 +399,18 @@
        // 遥感监测多时相基地下拉事件
        selectItem (item, index) {
            this.timeLineList = item.childItem
            this.currentObj = this.timeLineList[0]
            this.currentInd = 0
            if(this.timeLineList.some(e=>{return e.type == "0"})){
                for(var i = 0; i<this.timeLineList.length;i++){
                    if(this.timeLineList[i].type == "0"){
                        this.currentObj = this.timeLineList[i]
                        this.currentInd = i
                        break
                    }
                }
            }else{
                this.currentObj = this.timeLineList[0]
                this.currentInd = 0
            }
            this.goToDcBylatlon(item.latitude, item.longitude)
        },
        // 遥感监测卷帘左基地下拉事件

 src/components/selectName/index.vue

@@ -33,7 +33,6 @@
    methods: {

        currentClick (item, index) {
            // 触发Student组件实例身上的atguigu事件
            this.$emit('selectItem', item, index)
            if (this.currentIndex == index) {
                this.listFlag = false

 src/components/selectTime/index.vue

@@ -1,21 +1,22 @@
<template>
    <!--时间线-->
    <div>
        <div class="current-select" @click="listFlag = !listFlag">
            <div class="title">{{ currentTitle }}</div>
            <i class="el-icon-caret-bottom"></i>
        </div>

        <div class="list-box" v-show="listFlag">
            <ul>
                <li
                    v-for="(item, index) in selectList"
                    :key="index"
                    @click="currentClick(item, index)"
                >{{item.title}}</li>
            </ul>
        </div>
  <!--时间线-->
  <div>
    <div class="current-select" @click="listFlag = !listFlag">
      <div class="title">{{ currentTitle }}</div>
      <i class="el-icon-caret-bottom"></i>
    </div>

    <div class="list-box" v-show="listFlag">
      <ul>
        <li
            v-for="(item, index) in selectList"
            :key="index"
            @click="currentClick(item, index)"
        >{{ item.title }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
@@ -28,192 +29,221 @@
window.splitScreenFourLayers = null

export default {
    name: 'selectTime',
    props: ['leftOrRight', 'type', 'selectList'],
    data () {
        return {
            listFlag: false,
            currentTitle: null,
            currentIndex: null
        }
    },
    mounted () {

    },

    methods: {
        init () {
            this.$nextTick(() => {
                this.currentTitle = this.selectList[0].title
                this.currentIndex = 0

                this.removeLeftAddLayer()
                this.removeRightAddLayer()

                this.leftAddLayer(this.selectList[0])
                this.rightAddLayer(this.selectList[0])
            })
        },

        screenInit () {
            this.currentTitle = this.selectList[0].title
            this.currentIndex = 0

            if (this.type == 'viewerOne') {
                this.removeLayers('splitScreenOneLayers')
                this.addLayers('splitScreenOneLayers', this.selectList[0])
            } else if (this.type == 'viewerTwo') {
                this.removeLayers('splitScreenTwoLayers')
                this.addLayers('splitScreenTwoLayers', this.selectList[0])
            } else if (this.type == 'viewerThree') {
                this.removeLayers('splitScreenThreeLayers')
                this.addLayers('splitScreenThreeLayers', this.selectList[0])
            } else if (this.type == 'viewerFour') {
                this.removeLayers('splitScreenFourLayers')
                this.addLayers('splitScreenFourLayers', this.selectList[0])
            }
        },

        clearLayer () {
            if (this.leftOrRight == 'left') {
                this.removeLeftAddLayer()
            } else {
                this.removeRightAddLayer()
            }
        },

        leftAddLayer (params) {
            leftCurrentLayer = global.viewer.imageryLayers.addImageryProvider(
                new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
                    url: params.url,
                    maximumLevel: 18,
                    ltileMatrixSetID: 'default028mm',
                    layer: 'nanchengdom'
                }),-1
            )
        },
        rightAddLayer (params) {
            rightCurrentLayer = global.viewer.mapSplit.addBaseLayer(
                new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
                    url: params.url,
                    maximumLevel: 18,
                    tileMatrixSetID: 'default028mm',
                    layer: 'nanchengRightdom'
                })
            )
        },

        removeLeftAddLayer () {
            if (leftCurrentLayer != null) {
                global.viewer.imageryLayers.remove(leftCurrentLayer)
                leftCurrentLayer = null
            }
        },

        removeRightAddLayer () {
            if (rightCurrentLayer != null) {
                global.viewer.imageryLayers.remove(rightCurrentLayer)
                rightCurrentLayer = null
            }
        },

        addLayers (variable, params) {
            window[variable] = window[this.type].imageryLayers.addImageryProvider(
                    new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
                        url: params.url,
                        maximumLevel: 18,
                        ltileMatrixSetID: 'default028mm',
                        layer: 'nanchengdom'
                    })
            )
        },

        removeLayers (variable) {
            if (window[variable] != null) {
                window[this.type].imageryLayers.remove(window[variable])
                window[variable] = null
            }
        },

        currentClick (item, index) {
            if (this.currentIndex == index) {
                this.listFlag = false
                return
            }
            if (this.leftOrRight) {
                this.currentTitle = item.title
                this.currentIndex = index

                if (this.leftOrRight == 'left') {
                    this.removeLeftAddLayer()
                    this.leftAddLayer(item)
                } else {
                    this.removeRightAddLayer()
                    this.rightAddLayer(item)
                }

                this.listFlag = false
            } else {
                this.currentTitle = item.title
                this.currentIndex = index

                if (this.type == 'viewerOne') {
                    this.removeLayers('splitScreenOneLayers')
                    this.addLayers('splitScreenOneLayers', item)
                } else if (this.type == 'viewerTwo') {
                    this.removeLayers('splitScreenTwoLayers')
                    this.addLayers('splitScreenTwoLayers', item)
                } else if (this.type == 'viewerThree') {
                    this.removeLayers('splitScreenThreeLayers')
                    this.addLayers('splitScreenThreeLayers', item)
                } else if (this.type == 'viewerFour') {
                    this.removeLayers('splitScreenFourLayers')
                    this.addLayers('splitScreenFourLayers', item)
                }

                this.listFlag = false
            }
        }
    },

    destroyed () {

  name: 'selectTime',
  props: ['leftOrRight', 'type', 'selectList'],
  data () {
    return {
      listFlag: false,
      currentTitle: null,
      currentIndex: null
    }
  },
  mounted () {

  },

  methods: {
    init () {
      this.$nextTick(() => {

        if (this.selectList.some(e => {
          return e.type == '0'
        })) {
          for (let i = 0; i < this.selectList.length; i++) {
            if (this.selectList[i].type == '0') {
              this.currentTitle = this.selectList[i].title
              this.currentIndex = i
              this.removeLeftAddLayer()
              this.removeRightAddLayer()
              this.leftAddLayer(this.selectList[i])
              this.rightAddLayer(this.selectList[i])
              break
            }
          }
        } else {
          this.currentTitle = this.selectList[0].title
          this.currentIndex = 0

          this.removeLeftAddLayer()
          this.removeRightAddLayer()
          this.leftAddLayer(this.selectList[0])
          this.rightAddLayer(this.selectList[0])
        }

      })
    },

    screenInit () {
      var mySelect = {}
      if (this.selectList.some(e => {return e.type == '0'})) {
        for (let i = 0; i < this.selectList.length; i++) {
          if (this.selectList[i].type == '0') {
            this.currentTitle = this.selectList[i].title
            this.currentIndex = i
            mySelect = this.selectList[i]
            break
          }
        }
      } else {
        this.currentTitle = this.selectList[0].title
        this.currentIndex = 0
        mySelect = this.selectList[0]
      }
      if (this.type == 'viewerOne') {
        this.removeLayers('splitScreenOneLayers')
        this.addLayers('splitScreenOneLayers', mySelect)
      } else if (this.type == 'viewerTwo') {
        this.removeLayers('splitScreenTwoLayers')
        this.addLayers('splitScreenTwoLayers', mySelect)
      } else if (this.type == 'viewerThree') {
        this.removeLayers('splitScreenThreeLayers')
        this.addLayers('splitScreenThreeLayers', mySelect)
      } else if (this.type == 'viewerFour') {
        this.removeLayers('splitScreenFourLayers')
        this.addLayers('splitScreenFourLayers', mySelect)
      }
    },

    clearLayer () {
      if (this.leftOrRight == 'left') {
        this.removeLeftAddLayer()
      } else {
        this.removeRightAddLayer()
      }
    },

    leftAddLayer (params) {
      leftCurrentLayer = global.viewer.imageryLayers.addImageryProvider(
          new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
            url: params.url,
            maximumLevel: 18,
            ltileMatrixSetID: 'default028mm',
            layer: 'nanchengdom'
          }), -1
      )
    },
    rightAddLayer (params) {
      rightCurrentLayer = global.viewer.mapSplit.addBaseLayer(
          new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
            url: params.url,
            maximumLevel: 18,
            tileMatrixSetID: 'default028mm',
            layer: 'nanchengRightdom'
          })
      )
    },

    removeLeftAddLayer () {
      if (leftCurrentLayer != null) {
        global.viewer.imageryLayers.remove(leftCurrentLayer)
        leftCurrentLayer = null
      }
    },

    removeRightAddLayer () {
      if (rightCurrentLayer != null) {
        global.viewer.imageryLayers.remove(rightCurrentLayer)
        rightCurrentLayer = null
      }
    },

    addLayers (variable, params) {
      window[variable] = window[this.type].imageryLayers.addImageryProvider(
          new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
            url: params.url,
            maximumLevel: 18,
            ltileMatrixSetID: 'default028mm',
            layer: 'nanchengdom'
          })
      )
    },

    removeLayers (variable) {
      if (window[variable] != null) {
        window[this.type].imageryLayers.remove(window[variable])
        window[variable] = null
      }
    },

    currentClick (item, index) {
      if (this.currentIndex == index) {
        this.listFlag = false
        return
      }
      if (this.leftOrRight) {
        this.currentTitle = item.title
        this.currentIndex = index

        if (this.leftOrRight == 'left') {
          this.removeLeftAddLayer()
          this.leftAddLayer(item)
        } else {
          this.removeRightAddLayer()
          this.rightAddLayer(item)
        }

        this.listFlag = false
      } else {
        this.currentTitle = item.title
        this.currentIndex = index

        if (this.type == 'viewerOne') {
          this.removeLayers('splitScreenOneLayers')
          this.addLayers('splitScreenOneLayers', item)
        } else if (this.type == 'viewerTwo') {
          this.removeLayers('splitScreenTwoLayers')
          this.addLayers('splitScreenTwoLayers', item)
        } else if (this.type == 'viewerThree') {
          this.removeLayers('splitScreenThreeLayers')
          this.addLayers('splitScreenThreeLayers', item)
        } else if (this.type == 'viewerFour') {
          this.removeLayers('splitScreenFourLayers')
          this.addLayers('splitScreenFourLayers', item)
        }

        this.listFlag = false
      }
    }
  },

  destroyed () {

  }
}
</script>

<style  lang="scss" scoped>
<style lang="scss" scoped>
.current-select {
    padding: 0 15px;
    width: 166px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    border-radius: 4px 4px 4px 4px;
    box-sizing: border-box;
    font-size: 12px;
    color: #717171;
    cursor: pointer;
  padding: 0 15px;
  width: 166px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
  border-radius: 4px 4px 4px 4px;
  box-sizing: border-box;
  font-size: 12px;
  color: #717171;
  cursor: pointer;
}

.list-box {
    position: absolute;
    top: 32px;
    width: 166px;
    height: 240px;
    overflow-y: auto;
    background: #ffffff;
    border-radius: 4px 4px 4px 4px;
    box-sizing: border-box;
    font-size: 12px;
    color: #717171;
  position: absolute;
  top: 32px;
  width: 166px;
  height: 240px;
  overflow-y: auto;
  background: #ffffff;
  border-radius: 4px 4px 4px 4px;
  box-sizing: border-box;
  font-size: 12px;
  color: #717171;

    li {
        line-height: 30px;
        text-align: center;
        cursor: pointer;
    }
  li {
    line-height: 30px;
    text-align: center;
    cursor: pointer;
  }
}
</style>

 src/components/splitScreen/index.vue

@@ -584,25 +584,25 @@
            this.viewerOneLayers = item.childItem
            this.$refs.ViewerOne.init()
            this.goToViewerOneBylatlon(item.latitude, item.longitude, window.viewerOne)
            this.setUrlTemplateImageryProvider(item.childItem[0], window.viewerOne)
            this.setUrlTemplateImageryProvider(item.selectItem, window.viewerOne)
        },
        selectItemTwo (item, index) {
            this.viewerTwoLayers = item.childItem
            this.$refs.ViewerTwo.init()
            this.goToViewerOneBylatlon(item.latitude, item.longitude, window.viewerTwo)
            this.setUrlTemplateImageryProvider(item.childItem[0], window.viewerTwo)
            this.setUrlTemplateImageryProvider(item.selectItem, window.viewerTwo)
        },
        selectItemThree (item, index) {
            this.viewerThreeLayers = item.childItem
            this.$refs.ViewerThree.init()
            this.goToViewerOneBylatlon(item.latitude, item.longitude, window.viewerThree)
            this.setUrlTemplateImageryProvider(item.childItem[0], window.viewerThree)
            this.setUrlTemplateImageryProvider(item.selectItem, window.viewerThree)
        },
        selectItemFour (item, index) {
            this.viewerFourLayers = item.childItem
            this.$refs.ViewerFour.init()
            this.goToViewerOneBylatlon(item.latitude, item.longitude, window.viewerFour)
            this.setUrlTemplateImageryProvider(item.childItem[0], window.viewerFour)
            this.setUrlTemplateImageryProvider(item.selectItem, window.viewerFour)
        },
        cameraSetView (viewer, camera) {
            viewer.camera.setView({

 src/components/timeLine/index.vue

@@ -468,10 +468,8 @@
    watch: {
        currentInd: {
            handler (newName, oldName) {
                if (newName == 0) {
                    this.$refs.TimePointer.style.left = 0 + 14 + 'px'
                    this.$refs.TextPopup.style.left = 0 - 38 + 'px'
                }
                this.$refs.TimePointer.style.left = parseInt(newName)*48+2 + 14 + 'px'
                this.$refs.TextPopup.style.left = parseInt(newName)*48+2 - 38 + 'px'
            }
        }
    },
@@ -544,11 +542,12 @@

            this.currentObj = item
            this.currentInd = index

            if (parseInt(this.$refs.mytimeline.style.left) < 0) {

                this.$refs.TimePointer.style.left = e.target.offsetLeft + parseInt(this.$refs.mytimeline.style.left) + 14 + 'px'
                this.$refs.TextPopup.style.left = e.target.offsetLeft + parseInt(this.$refs.mytimeline.style.left) - 38 + 'px'
            } else {

                if (e.target.offsetLeft <= 480) {
                    this.$refs.TimePointer.style.left = e.target.offsetLeft + 14 + 'px'
                    this.$refs.TextPopup.style.left = e.target.offsetLeft - 38 + 'px'

 src/utils/public.js

@@ -4,6 +4,7 @@
 * @returns {*} 转化过的值
 */
function numUnitConversion (num) {
    num = num-0
    return (num > 9999) ? (num / 10000).toFixed(2) + 'w' : num.toFixed(0)
}