智慧农业大数据平台
xiebin
2022-11-16 3dc278f10a4c3e3db7ce3a445bed710bdc88916e
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'
                })
            )
        },
        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>