全屏，取消全屏

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

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() {

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>

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() {

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() {

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() {

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() {