page 2 and 3

tengsx

2023-04-06 80eb2e8d0eb78caf0b5d369aba18f99ed1222b97

 src/views/layout/index.vue

@@ -26,6 +26,51 @@
                </div>
            </div>
        </map-box>
        <div class="page-search" v-if="!showBack">
          <el-input
            size="medium"
            placeholder="请输入内容"
            suffix-icon="el-icon-search"
            @change="onSearch()"
            v-model="searchVal">
          </el-input>
        </div>
        <div class="page-search page-select" v-if="!showBack">
          <el-cascader
            size="medium"
            v-model="value"
            :options="options"
            popper-class="select-popup"
            :show-all-levels="false"
            @change="selectChange">
          </el-cascader>
        </div>
        <div class="page-search page-full" @click="changeFullscreen">
          <i class="el-icon-rank"></i>
          {{ fullscreen ? '缩小' : '全屏'}}
        </div>
        <div class="page-search page-mode">
          <div :class="{active: modeActive == 0 }" @click="modeActive = 0">综合态势感知</div>
          <div :class="{active: modeActive == 1 }" @click="modeActive = 1">防汛值班</div>
        </div>
        <div class="page-map">
          <div></div>
          <div></div>
          <div></div>
        </div>
        <div class="page-search page-section">
          <el-collapse v-model="activeSection" @change="handleChange">
            <el-collapse-item v-for="item in sectionList" :key="item.title" :title="item.title" :name="item.title">
              <div class="check-item" v-for="child in item.children" :key="child.title">
                <el-checkbox :class="{active: child.checked}" v-model="child.checked">{{ child.title }}</el-checkbox>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div> 
        <div class="page-back page-search" v-if="showBack">
          <img src="images/back.png" alt="">
          <div>红卫水库</div>
        </div>
    </div>
</template>

@@ -34,8 +79,144 @@
export default {
    data () {
        return {

          fullscreen: false,  //是否全屏
          searchVal: '',      //搜索值
          modeActive: 0,      //底部切换
          showBack: false,    //是否显示返回
          options: [{
            value: 'zhinan',
            label: '指南',
            children: [{
              value: 'shejiyuanze',
              label: '设计原则',
              children: [{
                value: 'yizhi',
                label: '一致'
              }, {
                value: 'fankui',
                label: '反馈'
              }, {
                value: 'xiaolv',
                label: '效率'
              }, {
                value: 'kekong',
                label: '可控'
              }]
            }, {
              value: 'daohang',
              label: '导航',
              children: [{
                value: 'cexiangdaohang',
                label: '侧向导航'
                }, {
                value: 'dingbudaohang',
                label: '顶部导航'
              }]
            }],
         
          }],
          activeSection: '水库',
          sectionList: [
            {
              title: '水库',
              children: [
                {
                  title: '全部',
                  checked: false
                },
                {
                  title: '大型',
                  checked: false
                }
              ]
            },
            {
              title: '水文监测站',
              children: [
                {
                  title: '水位站',
                  checked: false
                },
                {
                  title: '雨量站',
                  checked: false
                }
              ]
            },
            {
              title: '安全监测站',
              children: [
                {
                  title: '全部',
                  checked: false
                }
              ]
            },
            {
              title: '监控视频',
              children: [
                {
                  title: '全部',
                  checked: false
                }
              ]
            }
          ]
      }
    },
    watch: {
      $route(val) {
        if(val.path == '/layout/home3') {
          this.showBack = true
        } else {
          this.showBack = false
        }
      }
    },
    created() {
      if(this.$route.path == '/layout/home3') {
          this.showBack = true
        }
    } ,
    methods: {
      onSearch() {

      },
      selectChange(val) {
        
      },
      changeFullscreen() {
        if(this.fullscreen) {
          this.exitFullScreen()
          return
        }
        this.requestFullscreen()
      },
      requestFullscreen () {
        const docElm = document.documentElement
        if (docElm.requestFullscreen) {
          docElm.requestFullscreen()
        } else if (docElm.msRequestFullscreen) {
          docElm.msRequestFullscreen()
        } else if (docElm.mozRequestFullScreen) {
          docElm.mozRequestFullScreen()
        } else if (docElm.webkitRequestFullScreen) {
          docElm.webkitRequestFullScreen()
        }
        this.fullscreen = true
      },
      exitFullScreen () {
        if (document.exitFullscreen) {
          document.exitFullscreen()
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen()
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen()
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen()
        }
        this.fullscreen = false
      }
    }
}
</script>