Merge branch 'master' of http://s16s652780.51mypc.cn:49896/r/hbwri/bigScreen

tengsx

2023-04-07 36c045a4f518f6506eab91e48ee48ce7d1aaa21d

 src/views/layout/index.vue

@@ -1,9 +1,9 @@
<!--
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 16:18:24
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-04-04 13:18:56
 * @FilePath: \hbsl\src\views\layout\index.vue
 * @LastEditors: song
 * @LastEditTime: 2023-04-07 08:53:48
 * @FilePath: \bigScreen\src\views\layout\index.vue
 * @Description: 
 * 
 * Copyright (c) 2022 by shuishen 1109946754@qq.com, All Rights Reserved. 
@@ -15,7 +15,7 @@
            <div slot="mainContent" class="main-content" id="MainContent">
                <div class="main-header">
                    <div class="title">
                        湖北省水库大坝监测平台
                        智慧水库平台
                    </div>
                </div>

@@ -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="modeChange(0, 'home')">综合态势感知</div>
          <div :class="{active: modeActive == 1 }" @click="modeChange(1, 'home2')">防汛值班</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,151 @@
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()
      },
      modeChange(idx, path) {
        if(this.modeActive == idx) return
        this.modeActive = idx
        this.$router.push({
          path: '/layout/' + path
        })
      },
      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>
@@ -48,16 +236,22 @@
    width: 100%;
    height: 100%;

    .main-content {
        position: fixed;
    #MainContent {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 99;
    }

    .main-content {

        height: 1080px;
        background:
            url(/images/header.png) no-repeat center / 100% 100%,
            url(/images/pro-bg.png) no-repeat center / 100% 100%;
        z-index: 99;

        pointer-events: none;

        .main-header {
@@ -82,6 +276,7 @@
                font-weight: 400;
                color: #EFF8FC;
                line-height: 22px;
                text-align: center;
                // opacity: 0.89;
                // text-shadow: 0px 4px 1px rgba(19, 80, 143, 0.66);