fix:人员管理看板设置全屏

src/views/peopleManages/taskStatistics/index.vue

@@ -1,61 +1,57 @@
 <template>
   <div class="personView">
-    <div class="topView" style="width: 100%;height: 11%;">
-      <!-- <div class="jbd-title"> 人员管理看板 </div> -->
-      <div class="jbd-title">
-        <dv-decoration-8 style="width:20%;height:50px;position: absolute;left: 0px;top: 0px;" />
-        <div style="width:100%">
-          <div style="height:40%;font-size: 22px;margin-top: 10px;">人员管理看板</div>
-          <dv-decoration-5 style="width:30%;height: 50%;margin: 0 auto;" />
+    <dv-full-screen-container>
+      <div class="topView" style="width: 100%;height: 11%;">
+        <div class="jbd-title">
+          <dv-decoration-8 style="width:20%;height:50px;position: absolute;left: 0px;top: 0px;" />
+          <div style="width:100%">
+            <div style="height:40%;font-size: 22px;margin-top: 10px;">人员管理看板</div>
+            <dv-decoration-5 style="width:30%;height: 50%;margin: 0 auto;" />
+          </div>
+          <dv-decoration-8 :reverse="true" style="width:20%;height:50px;position:absolute;right: 0px;top: 0px;" />
         </div>
-        <dv-decoration-8 :reverse="true" style="width:20%;height:50px;position:absolute;right: 0px;top: 0px;" />
-      </div>
-      <!-- <dv-decoration-7 class="jbd-title">人员管理看板</dv-decoration-7> -->
+        <div class="contain">
+          <!-- <div class="personNum">员工数量:{{ employeeNum }}</div> -->
+          <dv-decoration-11 class="personNum" style="margin-left:10%"><i class="el-icon-user" style="color:#4ea5d6;margin-right: 3px;"></i> 员工数量:{{ employeeNum   }}人</dv-decoration-11>
+          <dv-border-box-8 class="date" style="margin-right:10%; display: flex; align-items: center;">
+            <div style="width:25%;display: inline-block;margin-right: 3px;">统计时间:</div>
+            <el-date-picker style="width:75%;" v-model="monthValues" type="monthrange" align="right" unlink-panels range-separator="至" start-placeholder="开始月份" end-placeholder="结束月份" :picker-options="pickerOptions" @change="changeDate">
+            </el-date-picker>
 
-      <div class="contain">
-        <!-- <div class="personNum">员工数量:{{ employeeNum }}</div> -->
-        <dv-decoration-11  class="personNum" style="margin-left:10%"><i class="el-icon-user" style="color:#4ea5d6;margin-right: 3px;"></i> 员工数量:{{ employeeNum   }}人</dv-decoration-11>
-        <dv-border-box-8 class="date" style="margin-right:10%; display: flex; align-items: center;">
-          <div style="width:25%;display: inline-block;margin-right: 3px;">统计时间:</div>          
-          <el-date-picker style="width:75%;" v-model="monthValues" type="monthrange" align="right" unlink-panels range-separator="至" start-placeholder="开始月份" end-placeholder="结束月份" :picker-options="pickerOptions" @change="changeDate">
-          </el-date-picker>
-        </dv-border-box-8>
-        <!-- <dv-border-box-9 >员工数量:8</dv-border-box-9> -->
-        <!-- <div class="date">
-          统计时间:
-          <el-date-picker v-model="monthValues" type="monthrange" align="right" unlink-panels range-separator="至" start-placeholder="开始月份" end-placeholder="结束月份" :picker-options="pickerOptions" @change="changeDate">
-          </el-date-picker>
-        </div> -->
-      </div>
-    </div>
-    <dv-border-box-1 style="width:100%;height:89%; box-sizing: border-box; overflow: hidden;">
-      <div style="height:3%"></div>
-      <!-- <dv-decoration-10 style="height:2%;width:100%;" /> -->
-      <div class="middleView">
-        <div class="viewLeft">
-          <pieView v-if="degreePieData.data[0].value" :info="degreePieData" />
-        </div>
-        <dv-decoration-2 :reverse="true" style="width:2%;height: 100%;" />
-        <div class="viewCenter">
-          <RingChart v-if="ranksPieData.data[2].value" :info="ranksPieData" />
-        </div>
-        <dv-decoration-2 :reverse="true" style="width:2%;height: 100%;" />
-        <div class="viewRight">
-          <CarouselTabl v-if="personInfoData.data.length" :info="personInfoData" title="员工基本信息列表" />
+          </dv-border-box-8>
+          <div style="width:80px;position: fixed;top:27px;right:-20px;z-index:999;cursor: pointer;" @click.prevent="goBack()">
+            <i class="el-icon-d-arrow-left"></i> 返回
+          </div>
         </div>
       </div>
-      <dv-decoration-10 style="height:2%;width:96%; margin: 0 auto;" />
-      <div class="bottomView">
-        <div class="detectionTask">
-          <!-- <div id="echart-line" :style="{ width: '100%', height: '100%', paddingRight: '10px' }"></div> -->
-          <BarChart v-if="this.option.yAxis.data[0]" :info="option" :config="{title:'检测任务统计',id:'textJob'}" />
-        </div>
-        <dv-decoration-2 :reverse="true" style="width:2%;height: 100%;" />
-        <div class="taskMatters">
-          <BarChart v-if="optionPersonShow" :info="optionPerson" :config="{title:'任务事宜统计',id:'taskMatters'}" />
+      <dv-border-box-1 style="width:100%;height:89%; box-sizing: border-box; overflow: hidden;">
+        <div style="height:3%"></div>
+        <!-- <dv-decoration-10 style="height:2%;width:100%;" /> -->
+        <div class="middleView">
+          <div class="viewLeft">
+            <pieView v-if="degreePieData.data[0].value" :info="degreePieData" />
+          </div>
+          <dv-decoration-2 :reverse="true" style="width:2%;height: 100%;" />
+          <div class="viewCenter">
+            <RingChart v-if="ranksPieData.data[2].value" :info="ranksPieData" />
+          </div>
+          <dv-decoration-2 :reverse="true" style="width:2%;height: 100%;" />
+          <div class="viewRight">
+            <CarouselTabl v-if="personInfoData.data.length" :info="personInfoData" title="员工基本信息列表" />
+          </div>
         </div>
-        <!-- <dv-decoration-2 :reverse="true" style="width:2%;height: 100%;" /> -->
-        <!-- <el-dialog :visible.sync="dialogTableVisible">
+        <dv-decoration-10 style="height:2%;width:96%; margin: 0 auto;" />
+        <div class="bottomView">
+          <div class="detectionTask">
+            <!-- <div id="echart-line" :style="{ width: '100%', height: '100%', paddingRight: '10px' }"></div> -->
+            <BarChart v-if="this.option.yAxis.data[0]" :info="option" :config="{title:'检测任务统计',id:'textJob'}" />
+          </div>
+          <dv-decoration-2 :reverse="true" style="width:2%;height: 100%;" />
+          <div class="taskMatters">
+            <BarChart v-if="optionPersonShow" :info="optionPerson" :config="{title:'任务事宜统计',id:'taskMatters'}" />
+          </div>
+          <!-- <dv-decoration-2 :reverse="true" style="width:2%;height: 100%;" /> -->
+          <!-- <el-dialog :visible.sync="dialogTableVisible">
         <div class="dialogbox">
           <div class="jbd-title-cont"> {{ setParams.seriesName }}-{{ setParams.name }} </div>
           <div class="ibps">
@@ -70,11 +66,11 @@
           </div>
         </div>
       </el-dialog> -->
-      </div>
-    </dv-border-box-1>
+        </div>
+      </dv-border-box-1>
+    </dv-full-screen-container>
   </div>
 </template>
-  
 <script>
 import * as echarts from "echarts";
 import curdPost from "@/business/platform/form/utils/custom/joinCURD.js";
@@ -83,7 +79,7 @@ import pieView from "@/views/system/jbdHome/board/component/getPieView";
 import CarouselTabl from "@/views/system/jbdHome/board/component/CarouselTabl";
 // import { pending, handledTask } from '@/api/platform/office/bpmReceived'
 // import { queryPageList } from '@/api/platform/bpmn/bpmTask'
-import ActionUtils from "@/utils/action";
+import screenfull from "screenfull";
 import { sync } from "@/api/platform/mail/outMail";
 import data from "@/components/ibps-icon-select/data";
 export default {
@@ -442,7 +438,7 @@ export default {
           {
             name: "其他",
             value: 0,
-          }
+          },
         ],
         color: ["#FFFF00", "#99CC00", "#6666FF", "#FF6666"],
         config: { title: "职称统计", idSelector: "ranksid" },
@@ -451,7 +447,7 @@ export default {
         //员工基本信息轮播表
         header: ["姓名", "学历学位", "职称", "员工编号", "入职时间"],
         data: [],
-        columnWidth: ["90", "90","80", "120","120"],
+        columnWidth: ["90", "90", "80", "120", "120"],
         rowNum: 7,
         align: "center",
         hoverPause: true,
@@ -462,6 +458,13 @@ export default {
   },
   computed: {},
   methods: {
+    allView() {
+      // 默认显示全屏
+      screenfull.request();
+    },
+    goBack() {
+      this.$router.back(-1);
+    },
     async getTtaskMattersData() {
       let this_ = this;
       this.optionPersonShow = false;
@@ -784,10 +787,10 @@ export default {
         personInfo = [];
         personInfo.push(item.name_);
         personInfo.push(item.zui_gao_xue_li_x_ || `   `);
-        personInfo.push(item.zhi_cheng_deng_ji ||  `   `);
-        personInfo.push(item.jian_ding_zi_ge_z ||  `   `);
-        personInfo.push(item.ru_zhi_shi_jian_ ||  `   `);
-        this.personInfoData.data.push(personInfo ||  `   `);
+        personInfo.push(item.zhi_cheng_deng_ji || `   `);
+        personInfo.push(item.jian_ding_zi_ge_z || `   `);
+        personInfo.push(item.ru_zhi_shi_jian_ || `   `);
+        this.personInfoData.data.push(personInfo || `   `);
       }
     },
     //饼图 环形图数据
@@ -841,6 +844,10 @@ export default {
     },
   },
   created() {
+    if (screenfull.isEnabled && !screenfull.isFullscreen) {
+      this.allView();
+    }
+
     const initendDate = new Date();
     this.endDate =
       initendDate.getFullYear() +
@@ -868,6 +875,11 @@ export default {
     this.degreeGradeInfoData();
     this.getTtaskMattersData();
   },
+  beforeDestroy() {
+    if (screenfull.isFullscreen) {
+      screenfull.toggle();
+    }
+  },
   mounted() {
     // this.initChart();
   },
@@ -876,8 +888,18 @@ export default {
   <style lang="less" scoped>
 .personView {
   width: 100%;
-  height: calc(100vh - 100px);
+  height: 100vh;
+  position: absolute;
+  background-color: #030409;
+  color: #fff;
+  z-index: 999;
+}
+#dv-full-screen-container {
   background-image: url("~@/views/system/jbdHome/board/img/bg.png");
+  background-size: 100% 100%;
+  box-shadow: 0 0 3px blue;
+  display: flex;
+  flex-direction: column;
 }
 .topView {
   overflow: hidden;
@@ -896,7 +918,7 @@ export default {
     height: 50%;
     display: flex;
     justify-content: space-between;
-    border-left: 1px solid #dfdcdc;
+    // border-left: 1px solid #dfdcdc;
     color: white;
     .personNum {
       margin-left: 20px;
@@ -909,7 +931,7 @@ export default {
       width: 300px;
       height: 80%;
     }
-    /deep/.dv-border-box-8 .border-box-content{
+    /deep/.dv-border-box-8 .border-box-content {
       display: flex;
       align-items: center;
       padding: 0px 2px;