跟进动态新增全屏功能

src/components/normal-basic-layout-new/details/modules/followUp/followUp.vue

@@ -1,17 +1,20 @@
 <template>
-  <div class="normal-panel follow__panel" >
+  <div class="normal-panel follow__panel" id="containerFull">
     <div class="container flex-align-center flex-between">
       <div>
         <slot name="collapse"></slot>
         <p class="inline-16">跟进动态</p>
       </div>
-      <addLog :ownertable="ownertable" :ownerid="owneridNew" @onSuccess="queryLogs" :status="status"></addLog>
+      <div style="display: flex;justify-content: space-between">
+        <fullScreen class="inline-16" domId="containerFull" @onFull="onFull" @backFull="backFull"></fullScreen>
+        <addLog :ownertable="ownertable" :ownerid="owneridNew" @onSuccess="queryLogs" :status="status"></addLog>
+      </div>
     </div>
     <div  class="container" >
       <div v-if="logList.length === 0">
         <el-empty description="暂无记录" :image-size="40"></el-empty>
       </div>
-      <div>
+      <div :style="{overflow: isFull?'auto':'none',height:isFull?(windowHeight - 100) + 'px':''}">
         <el-timeline>
           <el-timeline-item
             v-for="i in logList" :key="i.index"
@@ -132,7 +135,7 @@
 <script>
 import upload from '@/components/upload/hw_obs_upload.vue'
 import previewImage from '@/components/previewImage/index.vue'
-
+import fullScreen from "@/views/salesData/components/fullScreen";
 import addLog from './addLog.vue'
 import editLog from './editLog.vue'
 export default {
@@ -141,7 +144,8 @@ export default {
     addLog,
     editLog,
     upload,
-    previewImage
+    previewImage,
+    fullScreen
   },
   data () {
     return {
@@ -149,7 +153,9 @@ export default {
       logList:[],
       nowUserid:'',
       ownertableNew:'',
-      owneridNew:''
+      owneridNew:'',
+      isFull:false,
+      windowHeight: window.innerHeight,  //实时屏幕高度
     }
   },
   methods:{
@@ -211,15 +217,39 @@ export default {
       this.tool.showMessage(res,()=>{
         this.queryLogs()
       })
+    },
+    /*全屏*/
+    onFull(){
+      this.heightChart = this.windowWidth > 1128 ? 'calc(100vh - 85px)':'calc(100vh - 115px)'
+      this.isFull = true
+    },
+    /*退出全屏*/
+    backFull(val){
+      this.heightChart = '100%'
+      this.isFull = false
+      this.$emit('backFull',val)
     }
   },
   mounted () {
    /* this.queryLogs()*/
     this.nowUserid = JSON.parse(sessionStorage.getItem('active_account')).userid
+
+    var that = this;
+    // <!--把window.onresize事件挂在到mounted函数上-->
+    window.onresize = () => {
+      return (() => {
+        window.fullHeight = document.documentElement.clientHeight;
+        that.windowHeight = window.fullHeight; // 高
+      })()
+    };
   },
   watch: {
     $route () {
      /* this.queryLogs()*/
+    },
+    windowHeight (val) {
+      console.log("实时屏幕高度：",val );
+      console.log(this.windowHeight)
     }
   }
 }

src/components/normal-basic-layout/details/modules/followUp/followUp.vue

@@ -1,17 +1,20 @@
 <template>
-  <div class="normal-panel follow__panel" >
+  <div class="normal-panel follow__panel" id="containerFull">
     <div class="container flex-align-center flex-between">
       <div>
         <slot name="collapse"></slot>
         <p class="inline-16">跟进动态</p>
       </div>
-      <addLog :ownertable="ownertable" @onSuccess="queryLogs" :status="status"></addLog>
+      <div style="display: flex;justify-content: space-between">
+        <fullScreen class="inline-16" domId="containerFull" @onFull="onFull" @backFull="backFull"></fullScreen>
+        <addLog :ownertable="ownertable" @onSuccess="queryLogs" :status="status"></addLog>
+      </div>
     </div>
     <div  class="container" >
       <div v-if="logList.length === 0">
         <el-empty description="暂无记录" :image-size="40"></el-empty>
       </div>
-      <div>
+      <div :style="{overflow: isFull?'auto':'none',height:isFull?(windowHeight - 100) + 'px':''}">
         <el-timeline>
           <el-timeline-item
             v-for="i in logList" :key="i.index"
@@ -132,7 +135,7 @@
 <script>
 import upload from '@/components/upload/hw_obs_upload.vue'
 import previewImage from '@/components/previewImage/index.vue'
-
+import fullScreen from "@/views/salesData/components/fullScreen";
 import addLog from './addLog.vue'
 import editLog from './editLog.vue'
 export default {
@@ -141,7 +144,8 @@ export default {
     addLog,
     editLog,
     upload,
-    previewImage
+    previewImage,
+    fullScreen
   },
   data () {
     return {
@@ -149,7 +153,9 @@ export default {
       logList:[],
       nowUserid:'',
       ownertableNew:'',
-      owneridNew:''
+      owneridNew:'',
+      isFull:false,
+      windowHeight: window.innerHeight,  //实时屏幕高度
     }
   },
   methods:{
@@ -209,15 +215,40 @@ export default {
       this.tool.showMessage(res,()=>{
         this.queryLogs()
       })
+    },
+    /*全屏*/
+    onFull(){
+      this.heightChart = this.windowWidth > 1128 ? 'calc(100vh - 85px)':'calc(100vh - 115px)'
+      this.isFull = true
+    },
+    /*退出全屏*/
+    backFull(val){
+      this.heightChart = '100%'
+      this.isFull = false
+      this.$emit('backFull',val)
     }
   },
   mounted () {
     this.queryLogs()
+    console.log(this.windowHeight,'windowHeight高度')
     this.nowUserid = JSON.parse(sessionStorage.getItem('active_account')).userid
+
+    var that = this;
+    // <!--把window.onresize事件挂在到mounted函数上-->
+    window.onresize = () => {
+      return (() => {
+        window.fullHeight = document.documentElement.clientHeight;
+        that.windowHeight = window.fullHeight; // 高
+      })()
+    };
   },
   watch: {
     $route () {
       this.queryLogs()
+    },
+    windowHeight (val) {
+      console.log("实时屏幕高度：",val );
+      console.log(this.windowHeight)
     }
   }
 }

src/views/salesData/components/fullScreen.vue

@@ -18,9 +18,7 @@ export default {
   methods:{
     /*全屏*/
     enterFullscreen(){
-      console.log('执行111')
       this.scrollSave = this.scrollHeight
-      console.log(this.scrollSave,'save')
       /* 获取(<html>)元素以全屏显示页面 */
       const full = document.getElementById(this.domId)
       if (full.RequestFullScreen) {