From 6cff7d5e69d917d232f5baba3f2b82bde3a69cd5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=AA=86=E4=B9=90?= <342503599@qq.com>
Date: Wed, 19 Oct 2022 19:17:21 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=AD=E5=BB=BA=E5=9B=9B=E5=B1=80(=E6=8C=87?=
 =?UTF-8?q?=E6=8C=A5=E4=B8=AD=E5=BF=83):=E7=BB=86=E8=8A=82=E6=9B=B4?=
 =?UTF-8?q?=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../projectAdmin/fourEngin/command/center.vue |  80 +++++++------
 .../fourEngin/command/leftOne.vue             | 113 +++++++++---------
 .../fourEngin/command/leftThree.vue           |   7 +-
 .../fourEngin/command/rightFour.vue           |   2 +
 .../fourEngin/command/rightOne.vue            |   8 +-
 .../fourEngin/command/rightThree.vue          |  32 ++---
 .../fourEngin/command/rightTwo.vue            |  38 +++---
 .../fourEngin/components/Card.vue             |   2 +-
 8 files changed, 143 insertions(+), 139 deletions(-)

diff --git a/src/views/projectAdmin/fourEngin/command/center.vue b/src/views/projectAdmin/fourEngin/command/center.vue
index d9a25d4d..cfa07ff1 100644
--- a/src/views/projectAdmin/fourEngin/command/center.vue
+++ b/src/views/projectAdmin/fourEngin/command/center.vue
@@ -3,12 +3,13 @@
     <div class="image">
       <img src="../assets/images/command-center/map.png" />
       <!-- 标记点 -->
-      <div class="sign" @mouseenter="handleMouseenter" @mouseleave="handleMouseleave">
+      <!--  @mouseenter="handleMouseenter" @mouseleave="handleMouseleave" -->
+      <div class="sign" @click="clickBtn">
         <!-- <img src="../assets/images/command-center/marker.png" > -->
         <div class="sign-item"></div>
       </div>
       <!-- 信息窗体 -->
-      <div class="information-form">
+      <div class="information-form" v-if="open">
         <div class="form">
           <div class="form-item" style="height: 30px;" v-for="(item, key) in informationForm" :key="key">
             <span class="label">{{ item.label }}</span>
@@ -33,15 +34,17 @@ export default {
   data() {
     return {
       // 信息窗体开关
-      open: false,
+      open: true,
       // 信息窗体表单
       informationForm: {
-        projectName: { label: '项目名称:', value: undefined },
-        bulidStatus: { label: '项目状态:', value: undefined },
-        constructionStage: { label: '形象进度:', value: undefined },
-        projectAcreage: { label: '工程面积:', value: undefined, unit: '㎡' },
-        constructionUnit: { label: '建设单位:', value: undefined },
-        projectAddress: { label: '项目地址:', value: undefined }
+        projectName: { label: '项目名称:', value: '中建四局安置房三期工程' },
+        bulidStatus: { label: '项目状态:', value: '正常施工' },
+        constructionStage: { label: '形象进度:', value: '主体施工' },
+        val1:{label: '项目造价:', value: '956.33万元'},
+        val2:{label: '已完成投资::', value: '956.33万元'},
+        projectAcreage: { label: '工程面积:', value: '1.53', unit: '㎡' },
+        constructionUnit: { label: '建设单位:', value: '中建四局发展(广州天河)有限公司'},
+        projectAddress: { label: '项目地址:', value: '建宁路与热河交叉路口' },
       },
       // 项目状态枚举
       projectStatusEnum: {
@@ -72,33 +75,36 @@ export default {
     }
   },
   created() {
-    this.getList()
+    // this.getList()
   },
   methods: {
     /** 查询数据 */
-    getList() {
-      listProjectInfo({ projectSn: this.$store.state.projectSn }).then(res => {
-        console.log('项目信息: ', res)
-        const informationForm = this.informationForm
-        Object.keys(informationForm).forEach(key => {
+    // getList() {
+    //   listProjectInfo({ projectSn: this.$store.state.projectSn }).then(res => {
+    //     console.log('项目信息: ', res)
+    //     const informationForm = this.informationForm
+    //     Object.keys(informationForm).forEach(key => {
           
-          if (key === 'constructionStage') {
-            informationForm[key].value = this.constructionStageEnum[res.result[key]]
-          } else if (key === 'bulidStatus') {
-            informationForm[key].value = this.projectStatusEnum[res.result[key]]
-          } else {
-            informationForm[key].value = res.result[key]
-          }
-        })
-      })
-    },
+    //       if (key === 'constructionStage') {
+    //         informationForm[key].value = this.constructionStageEnum[res.result[key]]
+    //       } else if (key === 'bulidStatus') {
+    //         informationForm[key].value = this.projectStatusEnum[res.result[key]]
+    //       } else {
+    //         informationForm[key].value = res.result[key]
+    //       }
+    //     })
+    //   })
+    // },
     // 标记点 鼠标移入事件
-    handleMouseenter() {
-      this.open = true
-    },
-    // 标记点 鼠标移出事件
-    handleMouseleave() {
-      this.open = false
+    // handleMouseenter() {
+    //   this.open = true
+    // },
+    // // 标记点 鼠标移出事件
+    // handleMouseleave() {
+    //   this.open = false
+    // },
+    clickBtn(){
+      this.open = !this.open
     }
   }
 }
@@ -224,14 +230,14 @@ export default {
 
     // 信息窗体
     .information-form {
-      display: none;
+      // display: none;
       position: absolute;
-      right: 33%;
-      top: 23%;
-
+      right: 15%;
+      top: 35%;
       padding: 20px;
-      width: 300px;
-      height: 400px;
+      width: 290px;
+      height: 275px;
+      font-size: 14px;
       background-color: #44bfc598;
       border: 2px solid #89a483;
       border-radius: 4px;
diff --git a/src/views/projectAdmin/fourEngin/command/leftOne.vue b/src/views/projectAdmin/fourEngin/command/leftOne.vue
index e2c63855..1f58b802 100644
--- a/src/views/projectAdmin/fourEngin/command/leftOne.vue
+++ b/src/views/projectAdmin/fourEngin/command/leftOne.vue
@@ -1,10 +1,10 @@
 <template>
   <Card title="项目信息">
     <div class="container">
-      <vue-scroll style="height: 100%;">
+      <vue-scroll style="height: 95%;">
         <div class="list">
           <div class="list-item" v-for="(item, key) in list" :key="key">
-            <span class="label">{{ item.label }}</span>
+            <span class="label">{{ item.label +' : '}} </span>
             <span class="value">{{ item.value }}</span>
           </div>
         </div>
@@ -24,31 +24,31 @@ export default {
   data: () => ({
     // 项目信息列表
     list: {
-      projectAddress: { label: '项目位置', value: undefined },
-      projectAcreage: { label: '用地面积', value: undefined },
-      constructionUnit: { label: '建设单位', value: undefined },
-      designUnit: { label: '设计单位', value: undefined },
-      exploreUnit: { label: '勘察单位', value: undefined },
-      supervisorUnit: { label: '监理单位', value: undefined },
+      projectAddress: { label: '项目位置', value: ' 建宁路与热河交叉路口' },
+      projectAcreage: { label: '用地面积', value: ' 112768.21㎡' },
+      constructionUnit: { label: '建设单位', value: ' 中建四局发展(广州天河)有限公司' },
+      designUnit: { label: '设计单位', value: ' 中国建筑第四工程局有限公司' },
+      exploreUnit: { label: '勘察单位', value: ' 贵州中建建筑科研设计院有限公司' },
+      supervisorUnit1: { label: '监理单位', value: ' 广州宏元建设工程咨询有限公司' },
     },
   }),
   created() {
-    this.getList()
+    // this.getList()
   },
   computed: {
     ...mapState(['projectSn']),
   },
   methods: {
     /** 查询列表 */
-    getList() {
-      listProjectInfo({ projectSn: this.projectSn }).then(res => {
-        console.log('项目信息: ', res);
-        const list = this.list;
-        Object.keys(list).forEach(key => {
-          list[key].value = res.result[key];
-        })
-      })
-    },
+    // getList() {
+    //   listProjectInfo({ projectSn: this.projectSn }).then(res => {
+    //     console.log('项目信息: ', res);
+    //     const list = this.list;
+    //     Object.keys(list).forEach(key => {
+    //       list[key].value = res.result[key];
+    //     })
+    //   })
+    // },
   },
 }
 </script>
@@ -56,72 +56,67 @@ export default {
 <style lang="less" scoped>
 .container {
   box-sizing: border-box;
-  padding: 16px;
-  padding-bottom: 0;
+  padding-top: 16px;
+  padding-left: 16px;
   width: 100%;
   height: 100%;
 
   .list {
     width: 100%;
     height: 100%;
-    display: flex;
-    flex-direction: column;
     color: #fff;
-    // overflow-y: scroll;
+    overflow-y: scroll;
 
     .list-item {
       flex: 1;
       position: relative;
       display: flex;
       box-sizing: border-box;
-      border-left: 4px solid #66d3d8;
-      margin-bottom: 3px;
-      padding: 9px 0;
+      padding: 8px 0;
       width: 100%;
-      background-image: linear-gradient(to right, #3b7589, #182337);
-      font-size: 14px;
+      font-size: 16px;
       font-weight: 500;
       cursor: pointer;
       transition: all 0.3s;
       white-space: nowrap;
 
-      &:hover {
-        margin-top: 2px;
-        margin-bottom: 5px;
-        padding: 20px 0;
-        &::before {
-          content: '';
-          position: absolute;
-          top: 50%;
-          left: 6px;
-          display: inline-block;
-          transform: translate(0, -50%);
-          width: 8px;
-          height: 14px;
-          background-image: url('../assets/images/command-center/triangle.png');
-          background-size: 100% 100%;
-          transition: all .3s;
-        }
-      }
+      // &:hover {
+      //   margin-top: 2px;
+      //   margin-bottom: 5px;
+      //   padding: 20px 0;
+      //   &::before {
+      //     content: '';
+      //     position: absolute;
+      //     top: 50%;
+      //     left: 6px;
+      //     display: inline-block;
+      //     transform: translate(0, -50%);
+      //     width: 8px;
+      //     height: 14px;
+      //     background-image: url('../assets/images/command-center/triangle.png');
+      //     background-size: 100% 100%;
+      //     transition: all .3s;
+      //   }
+      // }
 
-      &:hover .value {
-        color: #c2805f;
-      }
+      // &:hover .value {
+      //   color: #c2805f;
+      // }
 
-      &:last-child {
-        margin-bottom: 0;
-      }
+      // &:last-child {
+      //   margin-bottom: 0;
+      // }
 
-      .label,
-      .value {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
+      // .label,
+      // .value {
+      //   overflow: hidden;
+      //   text-overflow: ellipsis;
+      //   white-space: nowrap;
+      // }
 
       .label {
         box-sizing: border-box;
-        width: 25%;
+        width: 22%;
         padding-left: 20px;
       }
 
diff --git a/src/views/projectAdmin/fourEngin/command/leftThree.vue b/src/views/projectAdmin/fourEngin/command/leftThree.vue
index dfda693e..74a2cd47 100644
--- a/src/views/projectAdmin/fourEngin/command/leftThree.vue
+++ b/src/views/projectAdmin/fourEngin/command/leftThree.vue
@@ -110,12 +110,12 @@ export default {
     .list-item {
       display: flex;
       justify-content: space-between;
-
       height: calc(100% / 3.5);
 
       .image {
         width: 18px;
         margin-right: 20px;
+        margin-top: 5px;
       }
 
       .label {
@@ -150,9 +150,8 @@ export default {
         }
 
         .unit {
-          font-size: 18px;
-          color: #b2b4be;
-          font-weight: bold;
+          font-size: 14px;
+          color: #FFFFFF;
         }
       }
     }
diff --git a/src/views/projectAdmin/fourEngin/command/rightFour.vue b/src/views/projectAdmin/fourEngin/command/rightFour.vue
index 3a0b3dbc..c4b87a1e 100644
--- a/src/views/projectAdmin/fourEngin/command/rightFour.vue
+++ b/src/views/projectAdmin/fourEngin/command/rightFour.vue
@@ -73,6 +73,7 @@ export default {
  }
   .max::after{
     content: '更多 >';
+    cursor: pointer;
     color: #66D4D9;
     position: absolute;
     right: 4%;
@@ -106,6 +107,7 @@ export default {
     }
   }
   .swiper{
+    cursor: pointer;
     .swiper1{
       height: 80%;
       width: 96%;
diff --git a/src/views/projectAdmin/fourEngin/command/rightOne.vue b/src/views/projectAdmin/fourEngin/command/rightOne.vue
index ed7072b6..3de74e67 100644
--- a/src/views/projectAdmin/fourEngin/command/rightOne.vue
+++ b/src/views/projectAdmin/fourEngin/command/rightOne.vue
@@ -7,7 +7,7 @@
             <img src="../assets/images/common/echart_orange.gif" alt="">
             <div class="value">
               <span class="number">{{ pollingData.closeRatio || 0 }}</span>
-              <span class="unit">%</span>
+              <!-- <span class="unit">%</span> -->
             </div>
           </div>
         </div>
@@ -176,8 +176,8 @@ export default {
     }
 
     .label {
-      font-size: 15px;
-      color: #a5b2c0;
+      font-size: 8px;
+      color: #FFFFFF;
     }
 
     .value {
@@ -208,7 +208,7 @@ export default {
       .top-title {
         margin-bottom: 15px;
         font-size: 20px;
-        color: #65b3b5;
+        color: #66D4D9;
         text-align: center;
       }
 
diff --git a/src/views/projectAdmin/fourEngin/command/rightThree.vue b/src/views/projectAdmin/fourEngin/command/rightThree.vue
index 90440571..f8b08d16 100644
--- a/src/views/projectAdmin/fourEngin/command/rightThree.vue
+++ b/src/views/projectAdmin/fourEngin/command/rightThree.vue
@@ -41,6 +41,7 @@ export default {
  }
   .max::after{
     content: '更多 >';
+    cursor: pointer;
     color: #66D4D9;
     position: absolute;
     right: 4%;
@@ -80,23 +81,24 @@ export default {
       white-space: nowrap;
 
       &:hover {
+        cursor: pointer;
         margin-top: 2px;
         margin-bottom: 5px;
-        padding: 15px 0;
-        padding-left: 20px;
-        &::before {
-          content: '';
-          position: absolute;
-          top: 50%;
-          left: 6px;
-          display: inline-block;
-          transform: translate(0, -50%);
-          width: 8px;
-          height: 14px;
-          background-image: url('../assets/images/command-center/triangle.png');
-          background-size: 100% 100%;
-          transition: all .3s;
-        }
+        // padding: 15px 0;
+        // padding-left: 20px;
+        // &::before {
+        //   content: '';
+        //   position: absolute;
+        //   top: 50%;
+        //   left: 6px;
+        //   display: inline-block;
+        //   transform: translate(0, -50%);
+        //   width: 8px;
+        //   height: 14px;
+        //   background-image: url('../assets/images/command-center/triangle.png');
+        //   background-size: 100% 100%;
+        //   transition: all .3s;
+        // }
       }
     }
 
diff --git a/src/views/projectAdmin/fourEngin/command/rightTwo.vue b/src/views/projectAdmin/fourEngin/command/rightTwo.vue
index 71809069..23ac05d8 100644
--- a/src/views/projectAdmin/fourEngin/command/rightTwo.vue
+++ b/src/views/projectAdmin/fourEngin/command/rightTwo.vue
@@ -4,7 +4,7 @@
       <div class="left">
         <JNestedRingChart
           :title="{
-            text: '27',
+            text: '56',
             y: '35%',
             subTitle: '质量问题数',
             color1: '#FFC303',
@@ -114,8 +114,8 @@ export default {
           color: ["#65d3d8", "#e5612a"],
           startAngle: 90,
           data: [
-            { value: 13, name: "未整改质量问题" },
-            { value: 14, name: "已整改质量问题" },
+            { value: 28, name: "未整改质量问题" },
+            { value: 28, name: "已整改质量问题" },
           ],
         },
       ],
@@ -319,22 +319,22 @@ export default {
         white-space: nowrap;
 
         &:hover {
-          padding: 15px 0;
-          margin-top: 2px;
-          margin-bottom: 4px;
-          &::before {
-            content: "";
-            position: absolute;
-            top: 50%;
-            left: 6px;
-            display: inline-block;
-            transform: translate(0, -50%);
-            width: 6.6px;
-            height: 11.6px;
-            background-image: url("../assets/images/command-center/triangle.png");
-            background-size: 100% 100%;
-            transition: all 0.3s;
-          }
+        //   padding: 15px 0;
+        //   margin-top: 2px;
+        //   margin-bottom: 4px;
+        //   &::before {
+        //     content: "";
+        //     position: absolute;
+        //     top: 50%;
+        //     left: 6px;
+        //     display: inline-block;
+        //     transform: translate(0, -50%);
+        //     width: 6.6px;
+        //     height: 11.6px;
+        //     background-image: url("../assets/images/command-center/triangle.png");
+        //     background-size: 100% 100%;
+        //     transition: all 0.3s;
+        //   }
           .value {
             color: #c2805f;
           }
diff --git a/src/views/projectAdmin/fourEngin/components/Card.vue b/src/views/projectAdmin/fourEngin/components/Card.vue
index d185b7d7..3b1cc0e1 100644
--- a/src/views/projectAdmin/fourEngin/components/Card.vue
+++ b/src/views/projectAdmin/fourEngin/components/Card.vue
@@ -26,7 +26,7 @@ export default {
     height: 34px;
     line-height: 25px;
     text-align: center;
-    font-size: 14px;
+    font-size: 20px;
     color: #ffffff;
     background-image: url('../assets/images/common/bg-card.png');
     background-size: 100% 100%;