From 909bc281a92dc9abe07fd0721fac529847afa095 Mon Sep 17 00:00:00 2001
From: lijun <lj7788@126.com>
Date: Fri, 29 Nov 2024 23:08:39 +0800
Subject: [PATCH] update code

---
 .../public/css/largeScreenStyle.css           |  41 ++++
 yanzhu-bigscreen/src/components/header.vue    | 191 ++++++++++++------
 yanzhu-bigscreen/src/views/projectDetail.vue  | 130 +++++++++++-
 3 files changed, 294 insertions(+), 68 deletions(-)

diff --git a/yanzhu-bigscreen/public/css/largeScreenStyle.css b/yanzhu-bigscreen/public/css/largeScreenStyle.css
index e7be59c9..9b6e3884 100644
--- a/yanzhu-bigscreen/public/css/largeScreenStyle.css
+++ b/yanzhu-bigscreen/public/css/largeScreenStyle.css
@@ -50,6 +50,10 @@ body{
         width:1912px;
         height: 1080px;
     }
+    .img-openwin{
+        width: 26px;
+        height:26px;
+    }
     .div-header{
         background-image: url("../images/banner-top-1k.png");
     }
@@ -71,6 +75,22 @@ body{
     .div-header{
         background-image: url("../images/banner-top-2k.png");
     }
+    .img-openwin{
+        width: 30px;
+        height:30px;
+    }
+    .screen-one-1-1::after,.screen-one-1-2::after,.screen-one-1-3::after,
+    .screen-one-2-1::after,.screen-one-2-2::after,.screen-one-2-3::after,
+    .screen-one-3-1::after,.screen-one-3-2::after,.screen-one-3-3::after
+    {
+        background-size: auto 30px;
+        height: 30px !important;
+    }
+    .module-title{
+        height: 30px !important;
+        line-height: 30px !important;
+        font-size: 20px;
+    }
 }
 
 
@@ -90,6 +110,27 @@ body{
     .div-header{
         background-image: url("../images/banner-top-4k.png");
     }
+    .img-openwin{
+        width: 40px;
+        height: 40px;
+    }
+    .screen-one-1-1::after,.screen-one-1-2::after,.screen-one-1-3::after,
+    .screen-one-2-1::after,.screen-one-2-2::after,.screen-one-2-3::after,
+    .screen-one-3-1::after,.screen-one-3-2::after,.screen-one-3-3::after
+    {
+        background-size: auto 40px;
+        height: 40px !important;
+    }
+    .module-title{
+        height: 40px !important;
+        line-height: 40px !important;
+        font-size: 26px;
+    }
+}
+.img-openwin{
+    position: absolute;
+    top:0px;
+    right: 0px;
 }
 .main-app {
     height:calc(100%  - 130px);
diff --git a/yanzhu-bigscreen/src/components/header.vue b/yanzhu-bigscreen/src/components/header.vue
index 2d5913a1..090cd070 100644
--- a/yanzhu-bigscreen/src/components/header.vue
+++ b/yanzhu-bigscreen/src/components/header.vue
@@ -1,84 +1,87 @@
 <template>
-  <div class="div-header">
-    <el-row >
-        <el-col :span="8">
-            <div class="head-title-tab">
-                <div :class="nav == 1 ? 'head-nav active' : 'head-nav'" @click="doNav(1)">项目概况</div>
-                <div :class="nav == 2 ? 'head-nav active' : 'head-nav'" @click="doNav(2)">项目详情</div>
-                <div :class="nav == 3 ? 'head-nav active' : 'head-nav'" @click="doNav(3)">安全管理</div>
-                <div :class="nav == 4 ? 'head-nav active' : 'head-nav'" @click="doNav(4)">质量管理</div>
-                <div :class="nav == 5 ? 'head-nav active' : 'head-nav'" @click="doNav(5)">进度管理</div>
-            </div>
-        </el-col>
-        <el-col :span="8" class="header-center">
-            数字建安施工管理平台
-        </el-col>
-        <el-col :span="8">
-            <div class="header-title-user-info">
-                <el-select v-model="selProject" style="width: 150px;margin-right: 20px;height:30px;line-height: 30px;" @change="doProjectSelect">
-                    <el-option v-for="it in projects" :key="it.id" :label="it.projectName" :value="it.id"></el-option>
-                </el-select>
-                <span class="command" @click="doLogout">{{ nickName }}
-                    <i class="el-icon-switch-button"></i>
-                </span>
-            </div>
-        </el-col>
-    </el-row>
-  </div>
+    <div class="div-header">
+        <el-row>
+            <el-col :span="8">
+                <div class="head-title-tab">
+                    <div :class="nav == 1 ? 'head-nav active' : 'head-nav'" @click="doNav(1)">项目概况</div>
+                    <div :class="nav == 2 ? 'head-nav active' : 'head-nav'" @click="doNav(2)">项目详情</div>
+                    <div :class="nav == 3 ? 'head-nav active' : 'head-nav'" @click="doNav(3)">安全管理</div>
+                    <div :class="nav == 4 ? 'head-nav active' : 'head-nav'" @click="doNav(4)">质量管理</div>
+                    <div :class="nav == 5 ? 'head-nav active' : 'head-nav'" @click="doNav(5)">进度管理</div>
+                </div>
+            </el-col>
+            <el-col :span="8" class="header-center">
+                数字建安施工管理平台
+            </el-col>
+            <el-col :span="8">
+                <div class="header-title-user-info">
+                    <el-select v-model="selProject" popper-class="header-sel-project-pop"
+                        style="width: 150px;margin-right: 20px;height:30px;line-height: 30px;"
+                        @change="doProjectSelect">
+                        <el-option v-for="it in projects" :key="it.id" :label="it.projectName"
+                            :value="it.id"></el-option>
+                    </el-select>
+                    <span class="command" @click="doLogout">{{ nickName }}
+                        <i class="el-icon-switch-button"></i>
+                    </span>
+                </div>
+            </el-col>
+        </el-row>
+    </div>
 </template>
 
 <script>
 export default {
-    data(){
+    data() {
         return {
-            nav:1,
-            selProject:'',
-            projects:[]
+            nav: 1,
+            selProject: '',
+            projects: []
         }
     },
-    computed:{
-        nickName(){
+    computed: {
+        nickName() {
             return this.$store.getters.nickName;
         },
-        curNav(){
+        curNav() {
             return this.$store.getters.nav;
         }
     },
-    watch:{
-        curNav(n,o){
-            this.nav=this.$store.getters.nav;
+    watch: {
+        curNav(n, o) {
+            this.nav = this.$store.getters.nav;
         }
     },
-    mounted(){
-        window.xapp=this;
-        this.$api.project.findMyProjectList().then(d=>{
-            this.projects=d.rows||[];
-            if(this.projects.length>0){
-                let id=localStorage.getItem("selProj")||this.projects[0].id
-                this.selProject=+id;
+    mounted() {
+        window.xapp = this;
+        this.$api.project.findMyProjectList().then(d => {
+            this.projects = d.rows || [];
+            if (this.projects.length > 0) {
+                let id = localStorage.getItem("selProj") || this.projects[0].id
+                this.selProject = +id;
                 this.doProjectSelect();
             }
         });
     },
-    methods:{
-        doProjectSelect(){
-            let tmps=this.projects.filter(d=>d.id==this.selProject);
-            if(tmps.length>0){
-                this.$store.dispatch('SetSelProject',tmps[0]);               
-            }else{
-                this.$store.dispatch('SetSelProject',null);
+    methods: {
+        doProjectSelect() {
+            let tmps = this.projects.filter(d => d.id == this.selProject);
+            if (tmps.length > 0) {
+                this.$store.dispatch('SetSelProject', tmps[0]);
+            } else {
+                this.$store.dispatch('SetSelProject', null);
             }
-            localStorage.setItem("selProj",this.selProject);
+            localStorage.setItem("selProj", this.selProject);
         },
-        doNav(n){
-            if(this.nav==n){
+        doNav(n) {
+            if (this.nav == n) {
                 return;
             }
-            this.nav=n;
-            let path=["/index","/detail","/prjSafety","/prjQuality","/prjProgress"][n-1];
+            this.nav = n;
+            let path = ["/index", "/detail", "/prjSafety", "/prjQuality", "/prjProgress"][n - 1];
             this.$router.push(path);
         },
-        doLogout(){
+        doLogout() {
             this.$confirm('确定注销并退出系统吗？', '提示', {
                 confirmButtonText: '确定',
                 cancelButtonText: '取消',
@@ -94,13 +97,85 @@ export default {
 </script>
 
 <style lang="less">
-.div-header{
+.div-header {
     line-height: 100px;
-    .header-center{
+
+    .header-center {
         text-align: center;
         color: #3da2ff;
         font-size: 32px;
         font-weight: bold;
     }
 }
+
+@media (min-width: 1921px) and (max-width: 2560px) {
+    .div-header {
+        .head-nav {
+            font-size: 16px;
+            width: auto;
+            height: auto;
+            padding: 5px 40px;
+            position: relative;
+            top: -8px;
+        }
+    }
+
+    .header-center {
+        font-size: 42px !important;
+        margin-top: 10px;
+    }
+
+    .header-title-user-info {
+        font-size: 20px;
+
+        .el-select {
+            transform: scale(1.5);
+            margin-right: 60px !important;
+            position: relative;
+            top: -5px;
+        }
+    }
+    .header-sel-project-pop {
+        transform: scale(1.5);
+        width: 200px;
+        min-width: unset !important;
+        margin-left: 50px;
+    }
+}
+
+@media (min-width: 2561px) {
+    .div-header {
+        .head-nav {
+            font-size: 20px;
+            width: auto;
+            height: auto;
+            padding: 5px 40px;
+            position: relative;
+            top: -8px;
+        }
+    }
+
+    .header-center {
+        font-size: 52px !important;
+        margin-top: 10px;
+    }
+
+    .header-title-user-info {
+        font-size: 30px;
+
+        .el-select {
+            transform: scale(2);
+            margin-right: 100px !important;
+            position: relative;
+            top: -5px;
+        }
+    }
+
+    .header-sel-project-pop {
+        transform: scale(2);
+        width: 200px;
+        min-width: unset !important;
+        margin-left: 100px;
+    }
+}
 </style>
\ No newline at end of file
diff --git a/yanzhu-bigscreen/src/views/projectDetail.vue b/yanzhu-bigscreen/src/views/projectDetail.vue
index 797926bb..4f7ae17e 100644
--- a/yanzhu-bigscreen/src/views/projectDetail.vue
+++ b/yanzhu-bigscreen/src/views/projectDetail.vue
@@ -3,8 +3,10 @@
 
         <el-col :span="6" class="h100">
             <module-one-1-1 label="项目概况">
-                <div class="glr-title">{{ selProject?.projectName||'' }}</div>
+                <img src="images/icon2001.png" class="img-openwin"/>
+                <div class="glr-title prj-info-title">{{ selProject?.projectName||'' }}</div>
                 <div class="dept-info-list">
+                    <el-row>
                     <el-col :span="12" class="dept-item">
                         <div class="dept-title">建设单位</div>
                         <div v-if="deptType1==null" class="dept-nodata">
@@ -14,7 +16,7 @@
                             <img class="dept-img" src="images/company_3.png"/>
                             <div class="dept-row">
                                 <div class="dept-name"> {{ deptType1.deptName }}</div>
-                                <div class="dept-leader-phone">
+                                <div class="dept-leader-phone" :title="(deptType1.leader||'')+' '+(deptType1.phone||'')">
                                     <span class="dept-leader">{{deptType1.leader}}</span>
                                     <span class="dept-phone">{{deptType1.phone}}</span>
                                 </div>
@@ -30,13 +32,15 @@
                             <img class="dept-img" src="images/company_2.png"/>
                             <div class="dept-row">
                                 <div class="dept-name"> {{ deptType2.deptName }}</div>
-                                <div class="dept-leader-phone">
+                                <div class="dept-leader-phone" :title="(deptType2.leader||'')+' '+(deptType2.phone||'')">
                                     <span class="dept-leader">{{deptType2.leader}}</span>
                                     <span class="dept-phone">{{deptType2.phone}}</span>
                                 </div>
                             </div>
                         </div>                    
                     </el-col>
+                </el-row>
+                <el-row>
                     <el-col :span="12" class="dept-item">
                         <div class="dept-title">总包单位</div>
                         <div v-if="deptType3.deptName==null" class="dept-nodata">
@@ -46,7 +50,7 @@
                             <img class="dept-img" src="images/company_3.png"/>
                             <div class="dept-row">
                                 <div class="dept-name"> {{ deptType3.deptName }}</div>
-                                <div class="dept-leader-phone">
+                                <div class="dept-leader-phone" :title="(deptType3.leader||'')+' '+(deptType3.phone||'')">
                                     <span class="dept-leader">{{deptType3.leader}}</span>
                                     <span class="dept-phone">{{deptType3.phone}}</span>
                                 </div>
@@ -62,14 +66,15 @@
                             <img class="dept-img" src="images/company_11.png"/>
                             <div class="dept-row">
                                 <div class="dept-name"> {{ deptType4.deptName }}</div>
-                                <div class="dept-leader-phone">
+                                <div class="dept-leader-phone" :title="(deptType4.leader||'')+' '+(deptType4.phone||'')">
                                     <span class="dept-leader">{{deptType4.leader}}</span>
                                     <span class="dept-phone">{{deptType4.phone}}</span>
                                 </div>
                             </div>
                         </div>                    
                     </el-col>
-
+                </el-row>
+                <el-row>
                     <el-col :span="12" class="dept-item">
                         <div class="dept-title">检测单位</div>
                         <div v-if="deptType5==null" class="dept-nodata">
@@ -79,7 +84,7 @@
                             <img class="dept-img" src="images/company_12.png"/>
                             <div class="dept-row">
                                 <div class="dept-name"> {{ deptType5.deptName }}</div>
-                                <div class="dept-leader-phone">
+                                <div class="dept-leader-phone" :title="(deptType5.leader||'')+' '+(deptType5.phone||'')">
                                     <span class="dept-leader">{{deptType5.leader}}</span>
                                     <span class="dept-phone">{{deptType5.phone}}</span>
                                 </div>
@@ -96,14 +101,14 @@
                             <img class="dept-img" src="images/company_10.png"/>
                             <div class="dept-row">
                                 <div class="dept-name"> {{ deptType6.deptName }}</div>
-                                <div class="dept-leader-phone">
+                                <div class="dept-leader-phone" :title="(deptType6.leader||'')+' '+(deptType6.phone||'')">
                                     <span class="dept-leader">{{deptType6.leader}}</span>
                                     <span class="dept-phone">{{deptType6.phone}}</span>
                                 </div>
                             </div>
                         </div>                    
                     </el-col>
-
+                </el-row>
                 </div>
             </module-one-1-1>
             <module-one-1-1 label="项目概况">
@@ -181,4 +186,109 @@ export default {
 }
 </script>
 
-<style lang="less"></style>
\ No newline at end of file
+<style lang="less">
+.project-detail{
+    color: #c2d5f6;
+    .dept-info-list{
+        height: calc(100% - 30px);
+        margin-top:10px;
+        .el-row{
+            min-height: 33%;
+        }
+        .dept-item{
+           .dept-title{
+            line-height: 30px;
+            font-size: 14px;
+           } 
+           .dept-nodata{
+            color:#ccc;
+            font-size: 12px;
+           }
+           .dept-info{
+            display: flex;
+            .dept-img{
+                width:42px;
+                height:42px;
+            }
+            .dept-row{
+                margin-left: 8px;
+                font-size:12px;   
+                line-height: 22px;
+                display: inline-grid;
+                flex-grow: 1;
+                padding-right: 10px;
+                .dept-name{
+                    color: #50a2eb;
+                }
+                .dept-leader-phone{
+                    color: #ab3715;
+                     cursor: pointer;    
+                     overflow: hidden;
+                        white-space: nowrap;
+                        text-overflow: ellipsis;           
+                    .dept-leader{
+                        margin-right:10px;
+                    }
+                }
+            }
+           }
+        }
+    }
+}
+@media (min-width: 1921px) and (max-width: 2560px) {
+    .project-detail{
+        .prj-info-title{
+            font-size:24px;
+        }
+        .dept-info-list{
+            .dept-item{
+                .dept-title{
+                    font-size: 18px;
+                    line-height: 40px;
+                }
+                .dept-nodata{
+                    font-size: 16px;
+                }
+                .dept-info{
+                    .dept-img{
+                        width:60px;
+                        height:60px;
+                    }
+                    .dept-row{
+                        font-size: 18px;
+                        line-height: 32px;
+                    }
+                }
+            }
+        }
+    }
+}
+@media (min-width: 2561px) {
+    .project-detail{
+        .prj-info-title{
+            font-size:32px;
+        }
+        .dept-info-list{
+            .dept-item{
+                .dept-title{
+                    font-size: 24px;
+                    line-height: 40px;
+                }
+                .dept-nodata{
+                    font-size: 18px;
+                }
+                .dept-info{
+                    .dept-img{
+                        width:100px;
+                        height:100px;
+                    }
+                    .dept-row{
+                        font-size: 24px;
+                        line-height: 32px;
+                    }
+                }
+            }
+        }
+    }
+}
+</style>
\ No newline at end of file