From ab3a41ae6652a527d85211d47642c9761a1339ee Mon Sep 17 00:00:00 2001
From: Luck-Xiaomi <1569717859@qq.com>
Date: Tue, 6 Sep 2022 11:25:11 +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):=20=E4=BF=AE=E5=A4=8D=E5=B7=B2?=
 =?UTF-8?q?=E7=9F=A5=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../images/command-center/icon-noise.png      | Bin 0 -> 507 bytes
 .../images/command-center/icon-pm10.png       | Bin 0 -> 740 bytes
 .../images/command-center/icon-pm25.png       | Bin 0 -> 789 bytes
 .../zjsj/command/LeftThree/Steps.vue          |  19 +++-
 .../projectAdmin/zjsj/command/center.vue      |   1 +
 .../projectAdmin/zjsj/command/leftFour.vue    | 103 +++++++-----------
 .../projectAdmin/zjsj/command/leftOne.vue     |  17 ++-
 .../projectAdmin/zjsj/command/rightFour.vue   |  19 +++-
 .../projectAdmin/zjsj/command/rightOne.vue    |  23 +++-
 .../projectAdmin/zjsj/command/rightThree.vue  |  32 ++++--
 .../projectAdmin/zjsj/command/rightTwo.vue    |  88 ++++++++++-----
 11 files changed, 194 insertions(+), 108 deletions(-)
 create mode 100644 src/views/projectAdmin/zjsj/assets/images/command-center/icon-noise.png
 create mode 100644 src/views/projectAdmin/zjsj/assets/images/command-center/icon-pm10.png
 create mode 100644 src/views/projectAdmin/zjsj/assets/images/command-center/icon-pm25.png

diff --git a/src/views/projectAdmin/zjsj/assets/images/command-center/icon-noise.png b/src/views/projectAdmin/zjsj/assets/images/command-center/icon-noise.png
new file mode 100644
index 0000000000000000000000000000000000000000..85eeff0e7316014d434736e5564809d0210717b7
GIT binary patch
literal 507
zcmV<X0R;YuP)<h;3K|Lk000e1NJLTq000sI001ut1^@s6?kbuj00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0gy>VK~#7F?N%*Q
z!$1(-FcpoYGDrpt#St4BWG(y!ko*RI0wA&2NNjNwM<v0vk~oSB`z9OM9+zv%q%#$_
zGjDRekGF64cGCo9SsqdcwnH76C-OvFPt<4Z)0)<^%<VDG7!QmgV`>mD7*B18Y8wa<
z4xXy{4;xY29KA8FWPEGeu(4!EjD!&~PSkvzx7I|kT_FlB^R0>IjEw#!bjG+_hp5S*
zuHOX_a&#@@b4F}#aMcmQ88hA)g;I7zRpL`cPJ!iL1e;OGQ->3*Bl#~bqJLR$#X7tW
zWQ?1PMFr{&p%*S9T`xG8$QWgTp34~{szT3PM7Wi@+aDPdrHbgcftMP$>H6>07>b4h
z5+^8Jv{2|$1Y5{67gexhwH^s3_1-2$sqzjb$kkXmfdkagPqJ-9uT<U8v-~df0jd%l
zlkqyXg{G4THMqr3A;$}DCLtxFtdR&ebYYo4kS9Vzm|v?Dk*LVTdu?dkk&Nf&0as<G
xrdP2`#tkj!t+8n%a$9ar1pXV+6L}(+eFG8!RT*Sf`WFBI002ovPDHLkV1kb>$43AF

literal 0
HcmV?d00001

diff --git a/src/views/projectAdmin/zjsj/assets/images/command-center/icon-pm10.png b/src/views/projectAdmin/zjsj/assets/images/command-center/icon-pm10.png
new file mode 100644
index 0000000000000000000000000000000000000000..359e05acf36ae530b98491b0bc3d9b9a08c8f832
GIT binary patch
literal 740
zcmV<A0vr8_P)<h;3K|Lk000e1NJLTq000sI001ut1^@s6?kbuj00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0(nV9K~#7F?N&Q-
z+E5fd_dQXX4M3ehpWr@W1EgoDQW^S;7m#spNNutJvjN6+;tjBYP^E*Jq(FK%=gQz<
zq8}bRmCp=9Al;*L|B{~{Td(j0aCjoT5dBA@sOVydT_-@h5Y(Yq!MR1`<6EdKs}UvI
zh~XzBXoH6o_N9tV?3d2r%u878n`FASfgdT*REN)z3vVJHUfYKReX>z1z8>1-#7Nt`
za8;8qrIPji%@S_ClTW0oL$py!B#;$vKFxeYFn5U{tNs78V<dXbfL?48cO$BEkvpR;
zd56~@D9t5`oX+B4d@_K@KzC|@HRE*YMaTcxAO}W9(;2N#;Iy8)a-gCT(O)-dtg_x!
zK^~sBvKi!wl|YeU&Fi~TA_GgHL2tez7h0~!J4{1BR~*Jxgs6bb7@09iE?IoTG;0-*
z>l&MK43Elq-mJy3oU@_}v&L!AFD2TNbneda1CLc?P02nB)})+eB8pj5ORlpf;|`fI
zVxP^u4+D<M_w4*{D%y)<f3r#C!p3jrv#YM`I7pA`Mpmd)x~%z7t+MwYMip<<mJzAj
zD6tuJcvCJ>O;P^^*ArGa15S5j!C7?W5vEz=B$Fsf++YK911J2<S>^q*R>>ry{H~Gg
z&e<y6aF7?<Dy2j=vzh*a&abFwJ7#eVih51BahuH8DITkc89VtM+!v&)Ck=k)nl4qu
zw0|&?bS80ao0|;yIgV9iwPR_wnPej=7WSB8Qbd#+BX;WjN_Ge9xw0ZdP-$x-!}MIx
zw6(@q4R_bs)Z;2dmirbDtyJCiC5gXBd-s$R@tx=_UDHL-hpRWIvbSsc2)w*!m*Wp<
WWa@Hd#;?=>0000<MNUMnLSTX^!%%<#

literal 0
HcmV?d00001

diff --git a/src/views/projectAdmin/zjsj/assets/images/command-center/icon-pm25.png b/src/views/projectAdmin/zjsj/assets/images/command-center/icon-pm25.png
new file mode 100644
index 0000000000000000000000000000000000000000..6daf6cb84abf167c4bc8c3cdd7a07f889d347781
GIT binary patch
literal 789
zcmV+w1M2*VP)<h;3K|Lk000e1NJLTq000sI001ut1^@s6?kbuj00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0;)+wK~#7F-Bz)3
z+CUI}dxzbbAHa1IegLP=@B?=5$p?V@#OXcm!KstDhxB1wq%)H`{6P2t=rFp=yAukM
z&`Ba;CNtg{gmk)l_xA1Xt;BxE3mm`{4rKoU$e_h*JM_9y46m<wUBE;`9ODEl{Sg`+
z|IT6#6<rc|Ud_n(om>9?Nq^w#HUtAG`_3W3=-YaX(q;*$<eO*bP0tB>&tEIes#+su
zABncy4nzrsMP?epOfLBPf&X1V&NpnR6ZHZfvBEMvz1TG!4G^g|w>g247QtqITx^q<
zpOEOilPYcU3^H33HPcuB4&;Ov^nIeHNB7o9x%|--J({J5s}nMBJ_)1wE`Ir<R^Elp
zbEh7Vqc4rG(E5S3_Jadkai1u*===PVV%IFAVhwe`4eRU`rR>AHJ<R|C3jhhT+Kyn%
zXS(M?K846_42ECzfnXN|JKa8-F~Q)$AT#9a13|Ivgcs(EzRQ5YpGWOI7||st$0{40
zgxR0dU~2~}+OmX{)V;-D0lCB9ggZuTYyg!&4n&gdwT0o%b1ViDOR>de&>01%i*^iU
zM)?+$T~a2tD;4M-jD5`<a_wmh8;$rs-47@;Q=QYDD-US>3GgPnXK-QWu0sHdFHKms
zCWT3UdN}+?XktYckggZr+8GP@6B<m`Tq`O8Qg5*my5Y~B2^m}>GE*O^Rq=`dkY|w`
zXkA9jok7_tHhNhNBs@Zd-L%YV<&i7SWTK!(frO$ao2$VoLC#RaiWwahd|Uy&d<&{(
zv{Dy7<RSxR_07h&YwXP^j@krfJ@jsha*XcEv?}Xsix>n>`~@m3oY~fWH>&=IVcZB*
z@=P;kn4TUeTK#2v9>w!^H>#76$59XKMiXULD<OSRu9w)u4)(>?DDZyQYLv)t69M2d
THOVzc00000NkvXXu0mjf<+onA

literal 0
HcmV?d00001

diff --git a/src/views/projectAdmin/zjsj/command/LeftThree/Steps.vue b/src/views/projectAdmin/zjsj/command/LeftThree/Steps.vue
index 44ec6760..94340f41 100644
--- a/src/views/projectAdmin/zjsj/command/LeftThree/Steps.vue
+++ b/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>
diff --git a/src/views/projectAdmin/zjsj/command/center.vue b/src/views/projectAdmin/zjsj/command/center.vue
index 5f069731..37313fc7 100644
--- a/src/views/projectAdmin/zjsj/command/center.vue
+++ b/src/views/projectAdmin/zjsj/command/center.vue
@@ -74,6 +74,7 @@ export default {
 
       width: 50px;
       height: 50px;
+      cursor: pointer;
     }
 
     // 信息窗体
diff --git a/src/views/projectAdmin/zjsj/command/leftFour.vue b/src/views/projectAdmin/zjsj/command/leftFour.vue
index e5f66338..1a3a8ae7 100644
--- a/src/views/projectAdmin/zjsj/command/leftFour.vue
+++ b/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('secondChart')
-    this.initChart('thirdChart')
+    this.initChart('firstChart', 7, '塔吊设备数', require('../assets/images/command-center/icon-tower.png'))
+    this.initChart('secondChart', 4, '升降机设备数', require('../assets/images/command-center/icon-lifter.png'))
+    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 value = 7
+      let angle = 0 // 角度，用来做简单的动画效果的
+
       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,
-            color: '#e5e442'
+            rich: {
+              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>
diff --git a/src/views/projectAdmin/zjsj/command/leftOne.vue b/src/views/projectAdmin/zjsj/command/leftOne.vue
index ea6b3eb1..aa2c5e09 100644
--- a/src/views/projectAdmin/zjsj/command/leftOne.vue
+++ b/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 {
diff --git a/src/views/projectAdmin/zjsj/command/rightFour.vue b/src/views/projectAdmin/zjsj/command/rightFour.vue
index ac21e411..c6bc0800 100644
--- a/src/views/projectAdmin/zjsj/command/rightFour.vue
+++ b/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 {
diff --git a/src/views/projectAdmin/zjsj/command/rightOne.vue b/src/views/projectAdmin/zjsj/command/rightOne.vue
index 63157f8e..95446cfb 100644
--- a/src/views/projectAdmin/zjsj/command/rightOne.vue
+++ b/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;
-        height: 140px;
+        width: 100%;
+        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;
     }
 
diff --git a/src/views/projectAdmin/zjsj/command/rightThree.vue b/src/views/projectAdmin/zjsj/command/rightThree.vue
index 0d649cab..7a8ec834 100644
--- a/src/views/projectAdmin/zjsj/command/rightThree.vue
+++ b/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
-            class="label"
-            :style="{ backgroundColor: item.labelColor, color: item.color, transform: 'rotate(-90deg) translateX(-16px) translateY(-18px)' }"
-          >{{ item.label }}</div>
+          <div class="image">
+            <img :src="item.image">
+          </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' },
-        PM10: { label: 'PM10', value: 36, unit: 'μg/m³', labelColor: '#3f353d', color: '#f46927' },
-        噪音: { label: '噪音', value: 13, unit: '%dB', labelColor: '#434c5d', color: '#c6c9ce' }
+        '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³', image: require('../assets/images/command-center/icon-pm10.png') },
+        噪音: { 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') },
-        barometricPressure: { label: '大气压', value: 101, unit: 'KPa', image: require('../assets/images/command-center/icon-barometricPressure.png') }
+        windDirection: {
+          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;
 
diff --git a/src/views/projectAdmin/zjsj/command/rightTwo.vue b/src/views/projectAdmin/zjsj/command/rightTwo.vue
index 730b698b..1c55778f 100644
--- a/src/views/projectAdmin/zjsj/command/rightTwo.vue
+++ b/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',
-                name: '标题',
+                value: '14',
+                name: '未整改质量问题',
                 itemStyle: {
                   normal: {
-                    color: '#f25d17'
+                    color: '#60d3d0'
                   }
                 },
                 label: {
@@ -92,14 +92,14 @@ export default {
                 }
               },
               {
-                value: 100 - '56',
-                name: '占位',
+                value: '13',
+                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',
-          //   roseType: 'area',
-          //   radius: ['58%', '54%'],
-          //   color: ['#182337', '#68d7d9'],
-          //   data: [50, 50]
-          // }
+          {
+            name: '人员类型',
+            type: 'pie',
+            hoverAnimation: false,
+            legendHoverLink: false,
+            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 {