全屏，取消全屏

aa306577 · 张伯涛 · 937b88c5 · aa306577 · aa306577 · aa306577
Commit aa306577 authored May 24, 2022 by 张伯涛
8 changed files
--- a/src/assets/image/exitFullBtn.png
+++ b/src/assets/image/exitFullBtn.png
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -90,7 +90,7 @@ $menuHover:#1A2137;
 $subMenuBg:#232C48;
 $subMenuHover:#1A2137;

-$sideBarWidth: 224px;
+$sideBarWidth: 200px;
 $sideHideWidth: 54px;

 // the :export directive is the magic sauce for webpack

--- a/src/views/IntegratedMonitor/equipment.vue
+++ b/src/views/IntegratedMonitor/equipment.vue
@@ -36,7 +36,8 @@
      <div>
        <el-button type="button" size="mini" class="headBtn" @click="handleToRecovery">回收站</el-button>
        <el-button type="button" size="mini" class="headBtn" @click="refresh">刷新</el-button>
-        <el-button id="fullscreen_btn" type="button" size="mini" class="headBtn">全屏</el-button>
+        <el-button  v-if="!fullscreen" id="fullscreen_btn" type="button" size="mini" class="headBtn">全屏</el-button>
+        <el-button v-if="fullscreen" id="fullscreen_btn2" type="button" size="mini" class="headBtn">取消全屏</el-button>
      </div>
    </div>
    <div class="mointorBody">
@@ -140,6 +141,7 @@ export default {
  name: 'Equipment',
  data() {
    return {
+      fullscreen: false,
      prohibitForm: {
        starTime: '',
        timeLength: ''
@@ -264,9 +266,37 @@ export default {
    handleExpand() {
      const element = document.getElementById('container_max')// 指定全屏区域元素
      document.getElementById('fullscreen_btn').addEventListener('click', () => {
-        if (screenfull.isEnabled) {
-          screenfull.request(element)
+        // if (screenfull.isEnabled) {
+        //   screenfull.request(element)
+        // }
+        // 判断是否已经是全屏
+        // 如果是全屏，退出
+        if (this.fullscreen) {
+          if (document.exitFullscreen) {
+            document.exitFullscreen()
+          } else if (document.webkitCancelFullScreen) {
+            document.webkitCancelFullScreen()
+          } else if (document.mozCancelFullScreen) {
+            document.mozCancelFullScreen()
+          } else if (document.msExitFullscreen) {
+            document.msExitFullscreen()
          }
+          console.log('已还原！')
+        } else { // 否则，进入全屏
+          if (element.requestFullscreen) {
+            element.requestFullscreen()
+          } else if (element.webkitRequestFullScreen) {
+            element.webkitRequestFullScreen()
+          } else if (element.mozRequestFullScreen) {
+            element.mozRequestFullScreen()
+          } else if (element.msRequestFullscreen) {
+            // IE11
+            element.msRequestFullscreen()
+          }
+          console.log('已全屏！')
+        }
+        // 改变当前全屏状态
+        this.fullscreen = !this.fullscreen
      })// 实现模块全屏
    },
    handleGoback() {

--- a/src/views/IntegratedMonitor/viewExhibition/logicalGroup.vue
+++ b/src/views/IntegratedMonitor/viewExhibition/logicalGroup.vue
@@ -3,7 +3,8 @@
    <div class="logicalHead">
      <div class="logicalBtns">
        <el-button class="headBtnW" @click="refresh">刷新</el-button>
-        <el-button id="fullscreen_btn" class="headBtnW">全屏</el-button>
+        <el-button   v-if="!fullscreen" id="fullscreen_btn" class="headBtnW">全屏</el-button>
+        <el-button  v-if="fullscreen" id="fullscreen_btn2" class="headBtnW">取消全屏</el-button>
      </div>
    </div>
    <div class="logicalBody">
@@ -181,6 +182,7 @@ export default {
  name: 'LogicalGroup',
  data() {
    return {
+      fullscreen: false,
      dataTree: [{
        id: 1,
        icon: require('@/assets/image/shebei.png'),
@@ -353,11 +355,39 @@ export default {
    handleExpand() {
      const element = document.getElementById('container_max')// 指定全屏区域元素
      document.getElementById('fullscreen_btn').addEventListener('click', () => {
-        if (screenfull.isEnabled) {
-          screenfull.request(element)
+        // if (screenfull.isEnabled) {
+        //   screenfull.request(element)
+        // }
+        // 判断是否已经是全屏
+        // 如果是全屏，退出
+        if (this.fullscreen) {
+          if (document.exitFullscreen) {
+            document.exitFullscreen()
+          } else if (document.webkitCancelFullScreen) {
+            document.webkitCancelFullScreen()
+          } else if (document.mozCancelFullScreen) {
+            document.mozCancelFullScreen()
+          } else if (document.msExitFullscreen) {
+            document.msExitFullscreen()
          }
-      })// 实现模块全屏
+          console.log('已还原！')
+        } else { // 否则，进入全屏
+          if (element.requestFullscreen) {
+            element.requestFullscreen()
+          } else if (element.webkitRequestFullScreen) {
+            element.webkitRequestFullScreen()
+          } else if (element.mozRequestFullScreen) {
+            element.mozRequestFullScreen()
+          } else if (element.msRequestFullscreen) {
+            // IE11
+            element.msRequestFullscreen()
+          }
+          console.log('已全屏！')
        }
+        // 改变当前全屏状态
+        this.fullscreen = !this.fullscreen
+      })// 实现模块全屏
+    },
  }
 }
 </script>

--- a/src/views/IntegratedMonitor/viewExhibition/monitorView.vue
+++ b/src/views/IntegratedMonitor/viewExhibition/monitorView.vue
 <template>
-  <div class="monitorView">
+  <div  id="container_max" class="monitorView">
    <div class="warnHead">
      <div class="warnBtns">
        <el-button class="headBtn" @click="handleAdd">添加</el-button>
        <el-button class="headBtn" @click="handleAdd">修改</el-button>
        <el-button class="headBtn">删除</el-button>
        <el-button class="headBtnW" @click="refresh">刷新</el-button>
-        <el-button id="fullscreen_btn" class="headBtnW">全屏</el-button>
+        <el-button  v-if="!fullscreen" id="fullscreen_btn" class="headBtnW">全屏</el-button>
+        <el-button v-if="fullscreen" id="fullscreen_btn2" class="headBtnW">取消全屏</el-button>
      </div>
    </div>
    <div class="monitorViewBody">
@@ -111,6 +112,7 @@ export default {
  name: 'MonitorView',
  data() {
    return {
+      fullscreen: false,
      searchForm: {
        title: '',
        type: ''
@@ -188,9 +190,37 @@ export default {
    handleExpand() {
      const element = document.getElementById('container_max')// 指定全屏区域元素
      document.getElementById('fullscreen_btn').addEventListener('click', () => {
-        if (screenfull.isEnabled) {
-          screenfull.request(element)
+        // if (screenfull.isEnabled) {
+        //   screenfull.request(element)
+        // }
+        // 判断是否已经是全屏
+        // 如果是全屏，退出
+        if (this.fullscreen) {
+          if (document.exitFullscreen) {
+            document.exitFullscreen()
+          } else if (document.webkitCancelFullScreen) {
+            document.webkitCancelFullScreen()
+          } else if (document.mozCancelFullScreen) {
+            document.mozCancelFullScreen()
+          } else if (document.msExitFullscreen) {
+            document.msExitFullscreen()
          }
+          console.log('已还原！')
+        } else { // 否则，进入全屏
+          if (element.requestFullscreen) {
+            element.requestFullscreen()
+          } else if (element.webkitRequestFullScreen) {
+            element.webkitRequestFullScreen()
+          } else if (element.mozRequestFullScreen) {
+            element.mozRequestFullScreen()
+          } else if (element.msRequestFullscreen) {
+            // IE11
+            element.msRequestFullscreen()
+          }
+          console.log('已全屏！')
+        }
+        // 改变当前全屏状态
+        this.fullscreen = !this.fullscreen
      })// 实现模块全屏
    },
    refresh() {

--- a/src/views/IntegratedMonitor/viewExhibition/stateStatistics.vue
+++ b/src/views/IntegratedMonitor/viewExhibition/stateStatistics.vue
 <template>
-  <div class="stateModule">
+  <div id="container_max" class="stateModule">
    <div class="warnHead">
      <div class="warnBtns">
        <el-button class="headBtn" @click="handleAdd">添加</el-button>
        <el-button class="headBtn" @click="handleAdd">修改</el-button>
        <el-button class="headBtn">删除</el-button>
        <el-button class="headBtnW" @click="refresh">刷新</el-button>
-        <el-button id="fullscreen_btn" class="headBtnW">全屏</el-button>
+        <el-button v-if="!fullscreen" id="fullscreen_btn" class="headBtnW">全屏</el-button>
+        <el-button v-if="fullscreen" id="fullscreen_btn2" class="headBtnW">取消全屏</el-button>
      </div>
    </div>
    <div style="padding: 15px 40px 15px;">
@@ -153,6 +154,7 @@ export default {
  name: 'StateStatistics',
  data() {
    return {
+      fullscreen: false,
      data: [{
        id: 1,
        label: '本机容器',
@@ -389,9 +391,37 @@ export default {
    handleExpand() {
      const element = document.getElementById('container_max')// 指定全屏区域元素
      document.getElementById('fullscreen_btn').addEventListener('click', () => {
-        if (screenfull.isEnabled) {
-          screenfull.request(element)
+        // if (screenfull.isEnabled) {
+        //   screenfull.request(element)
+        // }
+        // 判断是否已经是全屏
+        // 如果是全屏，退出
+        if (this.fullscreen) {
+          if (document.exitFullscreen) {
+            document.exitFullscreen()
+          } else if (document.webkitCancelFullScreen) {
+            document.webkitCancelFullScreen()
+          } else if (document.mozCancelFullScreen) {
+            document.mozCancelFullScreen()
+          } else if (document.msExitFullscreen) {
+            document.msExitFullscreen()
          }
+          console.log('已还原！')
+        } else { // 否则，进入全屏
+          if (element.requestFullscreen) {
+            element.requestFullscreen()
+          } else if (element.webkitRequestFullScreen) {
+            element.webkitRequestFullScreen()
+          } else if (element.mozRequestFullScreen) {
+            element.mozRequestFullScreen()
+          } else if (element.msRequestFullscreen) {
+            // IE11
+            element.msRequestFullscreen()
+          }
+          console.log('已全屏！')
+        }
+        // 改变当前全屏状态
+        this.fullscreen = !this.fullscreen
      })// 实现模块全屏
    },
    refresh() {

--- a/src/views/IntegratedMonitor/warning/warningSetup.vue
+++ b/src/views/IntegratedMonitor/warning/warningSetup.vue
@@ -7,7 +7,8 @@
        <el-button class="headBtn">删除</el-button>
        <el-button class="headBtn">禁止</el-button>
        <el-button class="headBtnW" @click="refresh">刷新</el-button>
-        <el-button id="fullscreen_btn" class="headBtnW">全屏</el-button>
+        <el-button  v-if="!fullscreen" id="fullscreen_btn" class="headBtnW">全屏</el-button>
+        <el-button v-if="fullscreen" id="fullscreen_btn2" class="headBtnW">取消全屏</el-button>
      </div>
    </div>
    <div class="warnBody">
@@ -165,6 +166,7 @@ export default {
  name: 'WarningSetup',
  data() {
    return {
+      fullscreen: false,
      data: [{
        id: 1,
        icon: require('@/assets/image/shebei.png'),
@@ -255,9 +257,37 @@ export default {
    handleExpand() {
      const element = document.getElementById('container_max')// 指定全屏区域元素
      document.getElementById('fullscreen_btn').addEventListener('click', () => {
-        if (screenfull.isEnabled) {
-          screenfull.request(element)
+        // if (screenfull.isEnabled) {
+        //   screenfull.request(element)
+        // }
+        // 判断是否已经是全屏
+        // 如果是全屏，退出
+        if (this.fullscreen) {
+          if (document.exitFullscreen) {
+            document.exitFullscreen()
+          } else if (document.webkitCancelFullScreen) {
+            document.webkitCancelFullScreen()
+          } else if (document.mozCancelFullScreen) {
+            document.mozCancelFullScreen()
+          } else if (document.msExitFullscreen) {
+            document.msExitFullscreen()
          }
+          console.log('已还原！')
+        } else { // 否则，进入全屏
+          if (element.requestFullscreen) {
+            element.requestFullscreen()
+          } else if (element.webkitRequestFullScreen) {
+            element.webkitRequestFullScreen()
+          } else if (element.mozRequestFullScreen) {
+            element.mozRequestFullScreen()
+          } else if (element.msRequestFullscreen) {
+            // IE11
+            element.msRequestFullscreen()
+          }
+          console.log('已全屏！')
+        }
+        // 改变当前全屏状态
+        this.fullscreen = !this.fullscreen
      })// 实现模块全屏
    },
    closeAddDialog() {

--- a/src/views/overView/dashboard/equipment.vue
+++ b/src/views/overView/dashboard/equipment.vue
@@ -3,7 +3,7 @@
    <el-row :gutter="12">
      <el-col :span="6">
        <div class="equipmentLeft">
-          <div style="height: 50px"></div>
+          <div style="height: 50px" />
          <el-card class="box-card">
            <div style="display: flex;margin-top: 10px">
              <el-divider direction="vertical" />
@@ -106,7 +106,8 @@
      <el-col :span="6">
        <div class="equipmentRight">
          <div style="display: flex;justify-content: end; height: 50px;padding-right: 5px">
-            <img id="fullscreen_btn" style=" cursor:pointer;height: 35px;width: 35px" :src="expandPage">
+            <img v-if="!fullscreen" id="fullscreen_btn" style=" cursor:pointer;height: 35px;width: 35px" :src="expandPage">
+            <img v-if="fullscreen" id="fullscreen_btn2" style=" cursor:pointer;height: 35px;width: 35px" :src="expandPageShrink">
            <div style="font-size: 30px;padding-left: 20px; padding-right: 20px">{{ nowDate }}</div>
            <div>
              <div style="font-size: 20px">{{ week }}</div>
@@ -116,7 +117,7 @@
          <el-card class="box-card">
            <div style="display: flex;margin-top: 10px">
              <el-divider direction="vertical" />
-              <div class="cardTitle">故障统计折线图</div>
+              <div class="cardTitle">故障统计折线图</div>2
            </div>
            <el-row style="margin-top: 20px">
              <div id="echarts-enterFirst" class="span_1">
@@ -159,6 +160,7 @@ export default {
  name: 'Equipment',
  data() {
    return {
+      fullscreen: false,
      isFullscrenn: false,
      expandPage: require('@/assets/image/expand.png'),
      nowDate: '',
@@ -173,6 +175,7 @@ export default {
        { label: '智盘服务器-10.1.154', time: '2019-12-09' }
      ],
      equipmentIcon: require('@/assets/image/shebeizongshu.png'),
+      expandPageShrink: require('@/assets/image/exitFullBtn.png'),
      monitorIcon: require('@/assets/image/jiankongdianshu.png'),
      warnIcon: require('@/assets/image/gaojingshu.png')
    }
@@ -270,9 +273,37 @@ export default {
    handleExpand() {
      const element = document.getElementById('container_max')// 指定全屏区域元素
      document.getElementById('fullscreen_btn').addEventListener('click', () => {
-        if (screenfull.isEnabled) {
-          screenfull.request(element)
-        }
+        // if (screenfull.isEnabled) {
+        //   screenfull.request(element)
+        // }
+        // 判断是否已经是全屏
+        // 如果是全屏，退出
+        if (this.fullscreen) {
+          if (document.exitFullscreen) {
+            document.exitFullscreen()
+          } else if (document.webkitCancelFullScreen) {
+            document.webkitCancelFullScreen()
+          } else if (document.mozCancelFullScreen) {
+            document.mozCancelFullScreen()
+          } else if (document.msExitFullscreen) {
+            document.msExitFullscreen()
+          }
+          console.log('已还原！')
+        } else { // 否则，进入全屏
+          if (element.requestFullscreen) {
+            element.requestFullscreen()
+          } else if (element.webkitRequestFullScreen) {
+            element.webkitRequestFullScreen()
+          } else if (element.mozRequestFullScreen) {
+            element.mozRequestFullScreen()
+          } else if (element.msRequestFullscreen) {
+            // IE11
+            element.msRequestFullscreen()
+          }
+          console.log('已全屏！')
+        }
+        // 改变当前全屏状态
+        this.fullscreen = !this.fullscreen
      })// 实现模块全屏
    },
    getTime() {