指定区域全屏功能

src/views/IntegratedMonitor/equipment.vue

+<template>
+  <div id="container_max" class="monitor">
+    <div class="mointorHead">
+      <span>监测总数:
+        <span class="equipmentCount" @click="toMonitorPage">104</span>设备的
+        <span class="MonitorPointCount" @click="toMonitorPage">2142</span>个监测点</span>
+      <div class="blockDiv">
+        <span class="st-square" style="background-color: #3db58d;" />
+        <span class="blockCount">1664</span>
+      </div>
+      <div class="blockDiv">
+        <span class="st-square" style="background-color: #edb845;" onclick="handleShowList" />
+        <el-button type="text" class="blockCount" @click="handleShowList">12</el-button>
+      </div>
+      <div class="blockDiv">
+        <span class="st-square" style="background-color: #eb5d5d;" @click="handleShowList" />
+        <span class="blockCount" @click="handleShowList">17</span>
+      </div>
+      <div class="blockDiv">
+        <span class="st-square" style="background-color: #a6a6a6;" @click="handleShowList" />
+        <span class="blockCount" @click="handleShowList">448</span>
+      </div>
+      <div class="blockDiv">
+        <span class="st-square" style="background-color: black;" @click="handleShowList" />
+        <span class="blockCount" @click="handleShowList">1</span>
+      </div>
+      <el-form inline label-width="auto" label-position="right">
+        <el-form-item v-if="showList === false" class="headSearch" label=" ">
+          <i style="font-size: 23px;line-height: 32px; background-color: #d6d6d6;  border: 1px solid #cccccc " class="el-icon-search" />
+          <el-input v-model.trim="serchForm.CONNAMECN" class="searchInput" clearable placeholder="请输入关键字" />
+        </el-form-item>
+      </el-form>
+      <el-link v-if="showList" class="backClass" type="primary" @click.stop="handleGoback">返回</el-link>
+      <el-button type="button" size="mini" class="headBtn" @click="handleToRecovery">回收站</el-button>
+      <el-button type="button" size="mini" class="headBtn">刷新</el-button>
+      <el-button id="fullscreen_btn" type="button" size="mini" class="headBtn">全屏</el-button>
+    </div>
+    <div class="mointorBody">
+      <el-table
+        :data="dataList"
+        border
+        :row-key="getKeys"
+        :expand-row-keys="expand"
+        :tree-props="{children: 'child'}"
+      >
+        <el-table-column label="名称" prop="name" show-overflow-tooltip />
+        <el-table-column label="IP" prop="ip" show-overflow-tooltip />
+        <el-table-column label="类型" prop="type" show-overflow-tooltip />
+        <el-table-column label="最新数据时间" prop="newTime" show-overflow-tooltip />
+        <el-table-column label="描述" prop="describe" show-overflow-tooltip />
+        <el-table-column label="操作">
+          <template slot-scope="scope">
+            <el-link @click="update(scope.row)">编辑</el-link>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+  </div>
+</template>
+
+<script>
+import screenfull from 'screenfull'
+
+export default {
+  name: 'Equipment',
+  data() {
+    return {
+      showList: false,
+      dataList: [
+        { id: '1', name: '127.0.0.1', ip: '127.0.0.1', type: '容器', newTime: '2022-05-06 15:36:43', describe: '',
+          child: [
+            { id: '11', name: '虚拟设备', ip: '', type: '组', newTime: '2022-05-06 15:36:43', describe: '',
+              child: [
+                { id: '111', name: 'ping', ip: '', type: 'Ping', newTime: '2022-05-06 15:36:43', describe: '',
+                  child: [
+                    { id: '1111', name: 'ping 192.168.8.20', ip: '', type: 'Ping', newTime: '2022-05-06 15:36:43', describe: '' }
+                  ] }
+              ] },
+            { id: '12', name: '服务器系统', ip: '', type: '组', newTime: '2022-05-06 15:36:43', describe: '' }
+          ] }
+      ],
+      // 获取row的key值
+      getKeys(row) {
+        return row.id
+      },
+      // 要展开的行，数值的元素是row的key值
+      expand: [],
+      serchForm: {
+        CONNAMECN: ''
+      }
+    }
+  },
+  created() {
+  },
+  mounted() {
+    this.handleExpandList() // 展开列表
+    this.handleExpand() // 全屏
+  },
+  methods: {
+    handleExpand() {
+      const element = document.getElementById('container_max')// 指定全屏区域元素
+      document.getElementById('fullscreen_btn').addEventListener('click', () => {
+        if (screenfull.isEnabled) {
+          screenfull.request(element)
+        }
+      })// 实现模块全屏
+    },
+    handleGoback() {
+      this.showList = false
+    },
+    handleShowList() {
+      this.showList = true
+      console.log('aaaa', this.showList)
+    },
+    update() {
+
+    },
+    handleToRecovery() {
+      this.$router.push(
+        {
+          path: '/IntegratedMonitor/recovery'
+        }
+      )
+    },
+    handleExpandList() {
+      this.expand.push(this.dataList[0].id)
+    },
+    toMonitorPage() {}
+  }
+}
+</script>
+
+<style lang="scss">
+.monitor{
+  padding: 10px;
+  .mointorHead{
+    padding-top: 10px;
+    background-color: #edeef3 !important;
+    line-height: 32px;
+    display: flex;
+    padding-left: 15px;
+    .headBtn{
+      height: 24px;
+      border-radius: 4px;
+      line-height: 22px;
+      font-size: 12px;
+      padding: 0 10px;
+      margin: 5px;
+      color: #444;
+      border-color: #ddd;
+    }
+    .headSearch{
+      .searchInput{
+        border: 1px solid #cccccc;
+        border-left: 0;
+        .el-input__inner{
+          border-radius: 0;
+          border: 0;
+        }
+      }
+      .el-form-item__content{
+        display: flex;
+      }
+    }
+    .blockDiv{
+      margin: 0 15px;
+      .blockCount{
+        cursor: pointer;
+        color: #3c8dbc;
+      }
+      .st-square{
+        cursor: pointer;
+        margin-right: 6px;
+        width: 9px;
+        height: 9px;
+        display: inline-block;
+      }
+    }
+    .equipmentCount{
+      color: #72afd2;
+      cursor: pointer;
+    }
+    .MonitorPointCount{
+      color: #eb5d5d;
+      cursor: pointer;
+    }
+  }
+}
+</style>

src/views/IntegratedMonitor/recovery.vue

+<template>
+  <div id="container_max" class="recoveryClass">
+    <div class="recoveryHead">
+      <el-link class="backClass" :underline="false" type="primary" @click.stop="handleGoback">返回</el-link>
+      <el-button type="button" size="mini" class="headBtn">刷新</el-button>
+      <el-button type="button" size="mini" class="headBtn" id="fullscreen_btn">全屏</el-button>
+    </div>
+    <el-table :data="dataList" border>
+      <el-table-column label="名称" prop="name" :show-overflow-tooltip="true" />
+      <el-table-column label="原位置" prop="oldPosition" :show-overflow-tooltip="true" />
+      <el-table-column label="删除时间" prop="delTime" :show-overflow-tooltip="true" />
+      <el-table-column label="类型" prop="type" :show-overflow-tooltip="true" />
+      <el-table-column label="操作">
+        <template slot-scope="{ row }">
+          <el-link :underline="false" type="primary" @click.stop="reduction(row)">还原</el-link>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+import screenfull from 'screenfull'
+
+export default {
+  name: 'Recovery',
+  data() {
+    return {
+      dataList: [
+        { name: '防汛ARCGIS服务器_10.2.22.157', oldPosition: '负载均衡', delTime: '2022-03-29 15:49:49', type: 'HP ilo4' },
+        { name: '18F核心防火墙', oldPosition: '网络设备常用网络设备', delTime: '2022-03-29 15:50:47', type: 'HP ilo4' },
+        { name: '10.2.13.20', oldPosition: '负载均衡', delTime: '2022-03-29 15:49:49', type: 'Port' }
+      ]
+    }
+  },
+  mounted() {
+    this.handleExpand()
+  },
+  created() {
+  },
+  methods: {
+    handleExpand() {
+      const element = document.getElementById('container_max')// 指定全屏区域元素
+      document.getElementById('fullscreen_btn').addEventListener('click', () => {
+        if (screenfull.isEnabled) {
+          screenfull.request(element)
+        }
+      })// 实现模块全屏
+    },
+    handleGoback() {
+      this.$router.push(
+        {
+          path: '/IntegratedMonitor/equipment'
+        }
+      )
+    }
+
+  }
+}
+</script>
+
+<style lang="scss">
+.recoveryClass {
+  padding: 15px;
+  .headDivider{
+    background-color: #edeef3 !important;
+  }
+  .recoveryHead {
+    padding-top: 10px;
+    background-color: #edeef3 !important;
+    line-height: 32px;
+    display: flex;
+    justify-content: end;
+    padding-left: 15px;
+    .backClass{
+      margin-right: 10px;
+    }
+    .headBtn{
+      height: 24px;
+      border-radius: 4px;
+      line-height: 22px;
+      font-size: 12px;
+      padding: 0 10px;
+      margin: 5px;
+      color: #444;
+      border-color: #ddd;
+    }
+  }
+}
+</style>

src/views/overView/dashboard/equipment.vue

 <template>
-  <div class="equipment">
+  <div id="container_max" class="equipment">
     <el-row :gutter="12">
       <el-col :span="6">
         <div class="equipmentLeft">
@@ -105,7 +105,7 @@
       <el-col :span="6">
         <div class="equipmentRight">
           <div style="display: flex">
-            <img style="cursor:pointer;" :src="expandPage" @click="handleExpand">
+            <img id="fullscreen_btn" style="cursor:pointer;" :src="expandPage">
             <div style="font-size: 30px;padding-right: 20px">{{ nowDate }}</div>
             <div>
               <div>{{ week }}</div>
@@ -159,7 +159,7 @@ export default {
   data() {
     return {
       isFullscrenn: false,
-      expandPage: require('@/assets/image/logo.png'),
+      expandPage: require('@/assets/image/expand.png'),
       nowDate: '',
       nowTimer: '', // 时间定时器
       week: '',
@@ -185,6 +185,7 @@ export default {
     this.nowTimer = setInterval(this.getTime, 1000) // 定时获取当前时间
   },
   mounted() {
+    this.handleExpand()
     this.getDataTime()
     this.genderStatistics()
     this.genderRightFifst()
@@ -265,8 +266,12 @@ export default {
   },
   methods: {
     handleExpand() {
-      this.isFullscrenn = !this.isFullscrenn
-      screenfull.toggle()
+      const element = document.getElementById('container_max')// 指定全屏区域元素
+      document.getElementById('fullscreen_btn').addEventListener('click', () => {
+        if (screenfull.isEnabled) {
+          screenfull.request(element)
+        }
+      })// 实现模块全屏
     },
     getTime() {
       const date = new Date()