2023-10-31

src/HDrpManagement/projectData/components/pageTable.vue

@@ -31,11 +31,13 @@
       <el-pagination
           background
           small
+          :popper-append-to-body="false"
+          :append-to-body="false"
           @size-change="handleSizeChange"
           @current-change="handleCurrentChange"
           :current-page="param.content.pageNumber"
           :page-sizes="[20, 50, 100, 200]"
-          layout="total,sizes, prev, pager, next, jumper"
+          :layout="`total,${'sizes'}, prev, pager, next, jumper`"
           :total="total">
       </el-pagination>
     </div>

src/HDrpManagement/projectData/index.vue

@@ -98,80 +98,85 @@
             </div>
             <!--项目类型-->
             <div class="data-panel">
-              <div class="panel-header">
-                <div class="title">项目类型分析</div>
-                <div class="panel-select">
-                  <div class="mt-10 inline-16">
-                    <label  class="search__label" >部门:</label>
-                    <el-cascader
-                      ref="selectdep"
-                      size="small"
-                      v-model="typeTableParam.content.dataid"
-                      :options="deplist"
-                      :props="{emitPath:true,expandTrigger:'hover',checkStrictly:true,label:'label',value:'departmentid',children:'children'}" 
-                      @change="$event => {if($event.length) {typeMapParam.content.type=1;typeMapParam.content.dataid=$event[$event.length - 1];typeTableParam.content.type=1;typeTableParam.content.username='';$refs.typeTable.listData();typeInit()} else {typeMapParam.content.type='';typeMapParam.content.dataid='';typeTableParam.content.dataid='';typeTableParam.content.type='';typeTableParam.content.username='';$refs.typeTable.listData();typeInit()}}"></el-cascader>
-                  </div>
-                  <div class="mt-10 inline-16">
-                    <label  class="search__label" >业务员:</label>
-                    <el-select v-model="typeTableParam.content.username" filterable placeholder="请选择" size="small"
-                    @change="$event => {if($event) {typeMapParam.content.type=0;typeMapParam.content.dataid=$event;typeTableParam.content.type=0;typeTableParam.content.dataid=$event;typeTableParam.content.depname='';$refs.typeTable.listData();typeInit()} else {typeMapParam.content.type='';typeMapParam.content.dataid='';typeTableParam.content.dataid='';typeTableParam.content.type='';typeTableParam.content.depname='';$refs.typeTable.listData();typeInit()}}"
-                  >
-                      <el-option
-                          v-for="item in personnelList"
-                          :key="item.index"
-                          :label="item.name"
-                          :value="item.userid">
-                      </el-option>
-                    </el-select>
+              <div class="panel-content-wrapper" id="projectType">
+                <div class="panel-header">
+                  <div class="title">项目类型分析</div>
+                  <div class="panel-select">
+                    <div class="mt-10 inline-16">
+                      <label  class="search__label" >部门:</label>
+                      <el-cascader
+                        :append-to-body="false"
+                        ref="selectdep"
+                        size="small"
+                        v-model="typeTableParam.content.dataid"
+                        :options="deplist"
+                        :props="{emitPath:true,expandTrigger:'hover',checkStrictly:true,label:'label',value:'departmentid',children:'children'}" 
+                        @change="$event => {if($event.length) {typeMapParam.content.type=1;typeMapParam.content.dataid=$event[$event.length - 1];typeTableParam.content.type=1;typeTableParam.content.username='';$refs.typeTable.listData();typeInit()} else {typeMapParam.content.type='';typeMapParam.content.dataid='';typeTableParam.content.dataid='';typeTableParam.content.type='';typeTableParam.content.username='';$refs.typeTable.listData();typeInit()}}"></el-cascader>
+                    </div>
+                    <div class="mt-10 inline-16">
+                      <label  class="search__label" >业务员:</label>
+                      <el-select v-model="typeTableParam.content.username" filterable placeholder="请选择" size="small"
+                      :popper-append-to-body="false"
+                      @change="$event => {if($event) {typeMapParam.content.type=0;typeMapParam.content.dataid=$event;typeTableParam.content.type=0;typeTableParam.content.dataid=$event;typeTableParam.content.depname='';$refs.typeTable.listData();typeInit()} else {typeMapParam.content.type='';typeMapParam.content.dataid='';typeTableParam.content.dataid='';typeTableParam.content.type='';typeTableParam.content.depname='';$refs.typeTable.listData();typeInit()}}"
+                    >
+                        <el-option
+                            v-for="item in personnelList"
+                            :key="item.index"
+                            :label="item.name"
+                            :value="item.userid">
+                        </el-option>
+                      </el-select>
+                    </div>
+                    <div class="mt-10 inline-16" style="margin-left:10px">
+                      <FullScroll domId="projectType"></FullScroll>
+                    </div>
                   </div>
-                  <!-- <div class="mt-10 inline-16" style="margin-left:10px">
-                    <FullScroll domId="projectType"></FullScroll>
-                  </div> -->
                 </div>
-              </div>
-              <div class="panel-content" id="projectType">
-                <div ref="typeEl" style="width:30%"></div>
-                <div class="panel-table" style="width:70%">
-                  <pageTable
-                    ref="typeTable"
-                    :tablecols="tool.tabelCol($route.name).projectTable.tablecols"
-                    :param="typeTableParam"
-                    :custom="true"
-                    fixedName="operation"
-                  >
-                    <template v-slot:custom="scope">
-                      <div v-if="scope.data.columnname == 'sys_tag'">
-                        <el-tag size="small" v-for="(item,index) in scope.data.data.sys_tag" :key="index">{{ item }}</el-tag>
-                      </div>
-                      <div v-else-if="scope.data.columnname == 'operation'">
-                        <el-button type="text" size="small" @click="goDetail(scope.data.data)">详情</el-button>
-                      </div>
-                      <div v-else-if="scope.data.columnname == 'signamount_due'">
-                        {{ tool.formatAmount(scope.data.data.signamount_due,2,'￥') }}
-                      </div>
-                      <div v-else-if="scope.data.columnname === 'industry'">
-                        <el-tag size="small" v-for="(item,index) in scope.data.data.industry" :key="index">{{ item }}</el-tag>
-                      </div>
-                      <div v-else-if="scope.data.columnname === 'tradingstatus'">
-                        <span style="color:#3874f6" v-if="scope.data.data[[scope.data.columnname]] == '未成交'">{{scope.data.data[[scope.data.columnname]]}}</span>
-                        <span style="color:#fa8c16" v-else-if="scope.data.data[[scope.data.columnname]] == '已成交'">{{scope.data.data[[scope.data.columnname]]}}</span>
-                        <span style="color:#333333" v-else-if="scope.data.data[[scope.data.columnname]] == '多次成交'">{{scope.data.data[[scope.data.columnname]]}}</span>
-                      </div>
-                      <div v-else-if="scope.data.columnname === 'status'">
-                        <span style="color:rgb(250, 140, 22)" v-if="scope.data.data[[scope.data.columnname]] == '已成交'">{{scope.data.data[[scope.data.columnname]]}}</span>
-                        <span style="color:#52c41a" v-else-if="scope.data.data[[scope.data.columnname]] == '跟进中'">{{scope.data.data[[scope.data.columnname]]}}</span>
-                        <span style="color:#999999" v-else-if="scope.data.data[[scope.data.columnname]] == '已失败' || scope.data.data[[scope.data.columnname]] == '已结案'">{{scope.data.data[[scope.data.columnname]]}}</span>
-                      </div>
-                      <div v-else-if="scope.data.columnname == 'scale'">
-                        {{scope.data.data.scale ? scope.data.data.scale + scope.data.data.unitname : '' }}
-                      </div>
-                      <div v-else>
-                        {{ scope.data.data[scope.data.columnname] }}
-                      </div>
-                    </template>
-                  </pageTable>
+                <div class="panel-content">
+                  <div ref="typeEl" style="width:30%"></div>
+                  <div class="panel-table" style="width:70%">
+                    <pageTable
+                      ref="typeTable"
+                      :tablecols="tool.tabelCol($route.name).projectTable.tablecols"
+                      :param="typeTableParam"
+                      :custom="true"
+                      fixedName="operation"
+                    >
+                      <template v-slot:custom="scope">
+                        <div v-if="scope.data.columnname == 'sys_tag'">
+                          <el-tag size="small" v-for="(item,index) in scope.data.data.sys_tag" :key="index">{{ item }}</el-tag>
+                        </div>
+                        <div v-else-if="scope.data.columnname == 'operation'">
+                          <el-button type="text" size="small" @click="goDetail(scope.data.data)">详情</el-button>
+                        </div>
+                        <div v-else-if="scope.data.columnname == 'signamount_due'">
+                          {{ tool.formatAmount(scope.data.data.signamount_due,2,'￥') }}
+                        </div>
+                        <div v-else-if="scope.data.columnname === 'industry'">
+                          <el-tag size="small" v-for="(item,index) in scope.data.data.industry" :key="index">{{ item }}</el-tag>
+                        </div>
+                        <div v-else-if="scope.data.columnname === 'tradingstatus'">
+                          <span style="color:#3874f6" v-if="scope.data.data[[scope.data.columnname]] == '未成交'">{{scope.data.data[[scope.data.columnname]]}}</span>
+                          <span style="color:#fa8c16" v-else-if="scope.data.data[[scope.data.columnname]] == '已成交'">{{scope.data.data[[scope.data.columnname]]}}</span>
+                          <span style="color:#333333" v-else-if="scope.data.data[[scope.data.columnname]] == '多次成交'">{{scope.data.data[[scope.data.columnname]]}}</span>
+                        </div>
+                        <div v-else-if="scope.data.columnname === 'status'">
+                          <span style="color:rgb(250, 140, 22)" v-if="scope.data.data[[scope.data.columnname]] == '已成交'">{{scope.data.data[[scope.data.columnname]]}}</span>
+                          <span style="color:#52c41a" v-else-if="scope.data.data[[scope.data.columnname]] == '跟进中'">{{scope.data.data[[scope.data.columnname]]}}</span>
+                          <span style="color:#999999" v-else-if="scope.data.data[[scope.data.columnname]] == '已失败' || scope.data.data[[scope.data.columnname]] == '已结案'">{{scope.data.data[[scope.data.columnname]]}}</span>
+                        </div>
+                        <div v-else-if="scope.data.columnname == 'scale'">
+                          {{scope.data.data.scale ? scope.data.data.scale + scope.data.data.unitname : '' }}
+                        </div>
+                        <div v-else>
+                          {{ scope.data.data[scope.data.columnname] }}
+                        </div>
+                      </template>
+                    </pageTable>
+                  </div>
                 </div>
               </div>
+              
             </div>
             <!--项目等级分析-->
             <div class="data-panel">
@@ -811,7 +816,7 @@
               </div>
             </div>
             <!--有效项目未跟进情况-->
-            <div class="data-panel">
+            <div style="margin-top:40px">
               <div class="panel-header">
                 <div class="title">有效项目未跟进天数分析</div>
                 <div class="panel-select">
@@ -872,7 +877,7 @@
               <div>
                 <div ref="customerUnfllowEl" style="height:400px"></div>
                 <div style="font-size:16px;color:#333333;margin:10px 0">{{ unfllowStatus ? unfllowStatus : '全部' }}</div>
-                <div>
+                <div style="height:500px">
                   <pageTable
                     v-if="projectType[0].value != ''"
                     ref="customerUnfllowTable"
@@ -913,7 +918,7 @@
               </div>
             </div>
             <!--项目生命周期分析-->
-            <div class="data-panel">
+            <div style="margin-top:40px">
               <div class="panel-header">
                 <div class="title">项目生命周期分析</div>
               </div>
@@ -2337,6 +2342,7 @@ export default {
 }
 .data-panel {
   margin-top: 40px;
+  height: 500px;
 }
 .data-panel .panel-header {
   display: flex;
@@ -2357,6 +2363,11 @@ export default {
   align-items: center;
   justify-content: space-between;
   background:#ffffff;
+  height: calc(100% - 53px);
+}
+.panel-content-wrapper {
+  height: 100%;
+  background:#ffffff;
 }
 .panel-content div:first-child {
   padding: 0 5px;
@@ -2424,4 +2435,7 @@ export default {
 .el-empty {
   padding: 0 !important;
 }
+.panel-table {
+  height: 100%;
+}
 </style>

src/components/fullScroll/index.vue

@@ -5,14 +5,19 @@
 </template>
 
 <script>
+import {mapGetters} from 'vuex'
 export default {
   name:'fullScroll',
   data() {
     return {
-      fullscreen:false
     }
   },
   props:['domId'],
+  computed:{
+    ...mapGetters({
+      fullScroll:'fullScroll'
+    })
+  },
   methods: {
     enterFullscreen () {
       if (this.fullscreen) {
@@ -25,7 +30,7 @@ export default {
         } else if (document.msExitFullscreen) {
             document.msExitFullscreen();
         }
-        this.fullscreen = false
+        this.$store.commit('setFullScroll',false)
       } else {
         /* 获取(<html>)元素以全屏显示页面 */
         const full = document.getElementById(this.domId)
@@ -41,7 +46,7 @@ export default {
         } else if (full.msRequestFullscreen) {
             full.msRequestFullscreen()
         }
-        this.fullscreen = true
+        this.$store.commit('setFullScroll',true)
       }
       
     },

src/store/index.js

@@ -28,7 +28,8 @@ export default new Vuex.Store({
     DrawerShow:false,
     historyRouter:null,
     pageCache:['projectData'],
-    svlistData:[]
+    svlistData:[],
+    fullScroll:false
   },
   getters: {
     siteinfo:state => state.siteinfo,
@@ -51,6 +52,7 @@ export default new Vuex.Store({
     isRouterAlive:state => state.isRouterAlive,
     pageCache: state => state.pageCache,
     svlistData:state => state.svlistData,
+    fullScroll:state => state.fullScroll
 
   },
   mutations: {
@@ -127,6 +129,9 @@ export default new Vuex.Store({
     },
     saveListData (state,data) {
       state.svlistData = data
+    },
+    setFullScroll (state,data) {
+      state.fullScroll = data
     }
   },
   actions: {