中建四局(指挥中心): 修复已知问题

src/views/projectAdmin/zjsj/command/LeftThree/Steps.vue

@@ -51,11 +51,11 @@
 
       // 当前状态
       .active {
-        background: #6dc6d8;
+        // background: #6dc6d8;
       }
 
       .activeText {
-        color: #0EAEE9;
+        // color: #0EAEE9;
       }
     }
 
@@ -95,6 +95,21 @@
       }
     }
 
+    .steps-item:last-child {
+      .steps-item-num {
+        left: 100%;
+      }
+
+      .steps-item-text {
+        align-items: flex-end;
+        transform: translateX(5px);
+      }
+
+      .steps-item-line {
+        background-color: #fff;
+      }
+    }
+
     
   }
 </style>

src/views/projectAdmin/zjsj/command/center.vue

@@ -74,6 +74,7 @@ export default {
 
       width: 50px;
       height: 50px;
+      cursor: pointer;
     }
 
     // 信息窗体

src/views/projectAdmin/zjsj/command/leftFour.vue

@@ -4,18 +4,6 @@
       <div class="item" ref="firstChart"></div>
       <div class="item" ref="secondChart"></div>
       <div class="item" ref="thirdChart"></div>
-      <div class="first-box box">
-        <div class="box-title">塔吊设备数</div>
-        <img class="image" src="../assets/images/command-center/icon-tower.png" alt="">
-      </div>
-      <div class="second-box box">
-        <div class="box-title">升降机设备数</div>
-        <img class="image" src="../assets/images/command-center/icon-lifter.png" alt="">
-      </div>
-      <div class="third-box box">
-        <div class="box-title">视频设备数</div>
-        <img class="image" src="../assets/images/command-center/icon-video.png" alt="">
-      </div>
     </div>
   </Card>
 </template>
@@ -31,28 +19,53 @@ export default {
     return {}
   },
   mounted() {
-    this.initChart('firstChart')
+    this.initChart('firstChart', 7, '塔吊设备数', require('../assets/images/command-center/icon-tower.png'))
-    this.initChart('secondChart')
+    this.initChart('secondChart', 4, '升降机设备数', require('../assets/images/command-center/icon-lifter.png'))
-    this.initChart('thirdChart')
+    this.initChart('thirdChart', 5, '视频设备数', require('../assets/images/command-center/icon-video.png'))
   },
   methods: {
-    initChart(ref) {
+    initChart(ref, value, title = '默认标题', image) {
       const myChart = echarts.init(this.$refs[ref])
 
-      let angle = 0 //角度，用来做简单的动画效果的
+      let angle = 0 // 角度，用来做简单的动画效果的
-      let value = 7
+
       const option = {
         // backgroundColor: '#061740',
         title: {
-          text: value,
+          text: '{a|'+ value +'}\n{b|'+ title +'}',
+          // text: '10\n' + title,
           x: 'center',
           y: 'center',
           top: '35%',
           textStyle: {
-            fontSize: 20,
+            rich: {
-            color: '#e5e442'
+              a: {
+                fontSize: 20,
+                color: '#e5e442'
+              },
+              b: {
+                fontSize: 13,
+                color: '#ffffff',
+                padding: [5, 0]
+              }
+            }
           }
         },
+        graphic: {
+          elements: [
+            {
+              type: 'image',
+              style: {
+                image,
+                width: 20,
+                height: 20
+              },
+              left: '46%',
+              top: '59%',
+              z: 100
+            }
+          ]
+        },
         series: [
           {
             name: 'ring5',
@@ -329,63 +342,25 @@ export default {
   width: 100%;
   height: 100%;
   white-space: nowrap;
-  transform: translateY(-20px);
+  transform: translateY(-15px);
-
 
   .item {
     display: inline-block;
     width: calc(100% / 2);
-    height: 100%;
+    height: 110%;
     color: transparent;
 
     &:nth-child(1) {
-      transform: translateX(-22%);
+      transform: translate(-22%, -6%);
     }
 
     &:nth-child(2) {
-      transform: translateX(-48%);
+      transform: translate(-48%, -6%);
     }
 
     &:nth-child(3) {
-      transform: translateX(-75%);
+      transform: translate(-75%, -6%);
     }
   }
-
-  .box {
-    position: absolute;
-    color: #fff;
-    text-align: center;
-    font-size: 12px;
-    
-    .box-title {
-      margin-bottom: 3px;
-    }
-
-    .image {
-      width: 20px;
-      height: 20px;
-    }
-  }
-
-  .first-box {
-    bottom: 30%;
-    left: 7%;
-  }
-
-  .first-box {
-    bottom: 30%;
-    left: 6.5%;
-  }
-
-  .second-box {
-    bottom: 30%;
-    left: 42.5%;
-  }
-
-  .third-box {
-    bottom: 30%;
-    left: 80.5%;
-  }
 }
-
 </style>

src/views/projectAdmin/zjsj/command/leftOne.vue

@@ -21,7 +21,7 @@ export default {
       { name: '用地面积', content: '112768.21㎡' },
       { name: '建设单位', content: '中建四局发展(广州天河)有限公司' },
       { name: '设计单位', content: '中国建筑第四工程局有限公司' },
-      { name: '勘察单位', content: '贵州中间建筑科研设计院有限公司' },
+      { name: '勘察单位', content: '贵州中建建筑科研设计院有限公司' },
       { name: '监理单位', content: '广州宏元建设工程咨询有限公司' },
     ]
   })
@@ -40,11 +40,11 @@ export default {
     height: 100%;
     display: flex;
     flex-direction: column;
-    justify-content: space-between;
     color: #fff;
     overflow-y: scroll;
 
     .list-item {
+      position: relative;
       display: flex;
       box-sizing: border-box;
       border-left: 4px solid #66d3d8;
@@ -60,6 +60,19 @@ export default {
 
       &:hover {
         padding: 20px 0;
+        &::before {
+          content: '';
+          position: absolute;
+          top: 50%;
+          left: 8px;
+          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 {

src/views/projectAdmin/zjsj/command/rightFour.vue

@@ -34,6 +34,10 @@ export default {
         { name: '中国建筑第四工程局有限公司', content: '' },
         { name: '中国建筑第四工程局有限公司', content: '' },
         { name: '中国建筑第四工程局有限公司', content: '' },
+        { name: '中国建筑第四工程局有限公司', content: '' },
+        { name: '中国建筑第四工程局有限公司', content: '' },
+        { name: '中国建筑第四工程局有限公司', content: '' },
+        { name: '中国建筑第四工程局有限公司', content: '' },
       ]
     }
   },
@@ -84,11 +88,11 @@ export default {
    
     display: flex;
     flex-direction: column;
-    justify-content: space-between;
     color: #fff;
     overflow-y: scroll;
 
     .list-item {
+      position: relative;
       display: flex;
       box-sizing: border-box;
       border-left: 4px solid #66d3d8;
@@ -104,6 +108,19 @@ export default {
 
       &:hover {
         padding: 20px 0;
+        &::before {
+          content: '';
+          position: absolute;
+          top: 50%;
+          left: 8px;
+          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 .3s;
+        }
       }
 
       &:hover .value {

src/views/projectAdmin/zjsj/command/rightOne.vue

@@ -4,7 +4,7 @@
       <div class="left">
         <div class="top">
           <div class="image">
-            <img style="height: 90%" src="../assets/images/command-center/instrument-panel.png" alt="">
+            <img src="../assets/images/command-center/instrument-panel.png" alt="">
             <div class="value">
               <span class="number">45</span>
               <span class="unit">%</span>
@@ -61,6 +61,9 @@ export default {
   height: 100%;
 
   .left {
+    box-sizing: border-box;
+    padding: 10px 0;
+
     display: flex;
     flex-direction: column;
     justify-content: space-around;
@@ -71,24 +74,36 @@ export default {
 
     .top {
       display: flex;
+      align-items: center;
       justify-content: center;
+
+      width: 100%;
+      height: 140px;
+
       .image {
         display: grid;
         place-items: center;
         position: relative;
-        width: 140px;
+        width: 100%;
-        height: 140px;
+        height: 100%;
+        img {
+          height: 140px;
+        }
         .value {
           position: absolute;
           top: 50%;
           left: 50%;
-          transform: translate(-50%, -16%);
+          transform: translate(-50%, -50%);
           font-size: 23px;
         }
       }
     }
 
     .bottom {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
       font-size: 13px;
     }
 

src/views/projectAdmin/zjsj/command/rightThree.vue

@@ -3,10 +3,9 @@
     <div class="container">
       <div class="left list">
         <div class="list-item" v-for="(item, key) in leftList" :key="key">
-          <div
+          <div class="image">
-            class="label"
+            <img :src="item.image">
-            :style="{ backgroundColor: item.labelColor, color: item.color, transform: 'rotate(-90deg) translateX(-16px) translateY(-18px)' }"
+          </div>
-          >{{ item.label }}</div>
           <div class="value">
             <div class="number">{{ item.value }}</div>
             <span class="unit">{{ item.unit }}</span>
@@ -47,9 +46,9 @@ export default {
     return {
       // 左边的列表
       leftList: {
-        'PM2.5': { label: 'PM2.5', value: 68, unit: 'μg/m³', labelColor: '#434337', color: '#ffc300' },
+        'PM2.5': { label: 'PM2.5', value: 68, unit: 'μg/m³', image: require('../assets/images/command-center/icon-pm25.png'), },
-        PM10: { label: 'PM10', value: 36, unit: 'μg/m³', labelColor: '#3f353d', color: '#f46927' },
+        PM10: { label: 'PM10', value: 36, unit: 'μg/m³', image: require('../assets/images/command-center/icon-pm10.png') },
-        噪音: { label: '噪音', value: 13, unit: '%dB', labelColor: '#434c5d', color: '#c6c9ce' }
+        噪音: { label: '噪音', value: 13, unit: '%dB', image: require('../assets/images/command-center/icon-noise.png') }
       },
       // 右边的列表
       rightList: {
@@ -63,8 +62,18 @@ export default {
           color: '#f66629',
           valueBackgroundImage: require('../assets/images/command-center/block3.png')
         },
-        windDirection: { label: '风向', value: '东南', unit: '风', image: require('../assets/images/command-center/icon-windDirection.png') },
+        windDirection: {
-        barometricPressure: { label: '大气压', value: 101, unit: 'KPa', image: require('../assets/images/command-center/icon-barometricPressure.png') }
+          label: '风向',
+          value: '东南',
+          unit: '风',
+          image: require('../assets/images/command-center/icon-windDirection.png')
+        },
+        barometricPressure: {
+          label: '大气压',
+          value: 101,
+          unit: 'KPa',
+          image: require('../assets/images/command-center/icon-barometricPressure.png')
+        }
       }
     }
   },
@@ -99,6 +108,11 @@ export default {
 
       height: calc(100% / 3.5);
 
+      .image {
+        width: 18px;
+        margin-right: 20px;
+      }
+
       .label {
         box-sizing: border-box;
 

src/views/projectAdmin/zjsj/command/rightTwo.vue

@@ -1,7 +1,7 @@
 <template>
   <Card title="质量管理">
     <div class="container">
-      <div class="left" ref="chart"></div>
+      <div class="left" ref="chart" style="transform: translateY(5px)"></div>
       <div class="right">
         <div class="top">
           <div class="left">
@@ -38,7 +38,7 @@ export default {
         { name: '钢结构工程', content: '' },
         { name: '建筑装饰工程', content: '' },
         { name: '主体结构', content: '' },
-        { name: '建筑电气', content: '' },
+        { name: '建筑电气', content: '' }
       ]
     }
   },
@@ -56,14 +56,14 @@ export default {
         },
         title: {
           text: '质量问题数',
-          left: '47%',
+          left: '48%',
           top: '55%',
           textAlign: 'center',
           textStyle: {
-            fontSize: '15',
+            fontSize: '13',
             color: '#8f929b',
             fontWeight: '400'
-          },
+          }
         },
         series: [
           {
@@ -78,11 +78,11 @@ export default {
             },
             data: [
               {
-                value: '56',
+                value: '14',
-                name: '标题',
+                name: '未整改质量问题',
                 itemStyle: {
                   normal: {
-                    color: '#f25d17'
+                    color: '#60d3d0'
                   }
                 },
                 label: {
@@ -92,14 +92,14 @@ export default {
                 }
               },
               {
-                value: 100 - '56',
+                value: '13',
-                name: '占位',
+                name: '已整改质量问题',
                 tooltip: {
-                  show: false
+                  show: true
                 },
                 itemStyle: {
                   normal: {
-                    color: '#60d3d0'
+                    color:  '#f25d17'
                   }
                 },
                 label: {
@@ -109,20 +109,46 @@ export default {
                       fontSize: 36,
                       color: '#ffc30f',
                       // 调整label的位置
-                      padding:[-30, 0, 0, 0],
+                      padding: [-30, 0, 0, 0]
                     }
                   }
                 }
               }
             ]
           },
-          // {
+          {
-          //   type: 'pie',
+            name: '人员类型',
-          //   roseType: 'area',
+            type: 'pie',
-          //   radius: ['58%', '54%'],
+            hoverAnimation: false,
-          //   color: ['#182337', '#68d7d9'],
+            legendHoverLink: false,
-          //   data: [50, 50]
+            radius: ['67%', '70%'],
-          // }
+            center: ['50%', '50%'],
+            color: ['#182337', '#60d3d0'],
+            label: {
+              normal: {
+                position: 'inner'
+              }
+            },
+            labelLine: {
+              normal: {
+                show: false
+              }
+            },
+            tooltip: {
+              show: false
+            },
+
+            data: [
+              {
+                value: 50,
+                name: ''
+              },
+              {
+                value: 50,
+                name: ''
+              },
+            ]
+          }
         ]
       }
 
@@ -142,9 +168,6 @@ export default {
   height: 100%;
 
   > .left {
-    // display: grid;
-    // place-items: center;
-
     width: 50%;
     height: 100%;
   }
@@ -171,16 +194,16 @@ export default {
       flex: 1;
       display: flex;
       flex-direction: column;
-      justify-content: space-between;
       color: #fff;
       overflow-y: scroll;
 
       .list-item {
+        position: relative;
         display: flex;
         box-sizing: border-box;
         border-left: 4px solid #66d3d8;
         margin-bottom: 5px;
-        padding: 6px 0;
+        padding: 5px 0;
         width: 100%;
         background-image: linear-gradient(to right, #3b7589, #212c3e);
         font-size: 12px;
@@ -190,7 +213,20 @@ export default {
         white-space: nowrap;
 
         &:hover {
-          padding: 20px 0;
+          padding: 10px 0;
+          &::before {
+            content: '';
+            position: absolute;
+            top: 50%;
+            left: 8px;
+            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 .3s;
+          }
         }
 
         &:hover .value {