diff --git a/src/views/projectAdmin/zjsj/assets/images/command-center/block.png b/src/views/projectAdmin/zjsj/assets/images/command-center/block.png
new file mode 100644
index 00000000..1ab9efb8
Binary files /dev/null and b/src/views/projectAdmin/zjsj/assets/images/command-center/block.png differ
diff --git a/src/views/projectAdmin/zjsj/assets/images/command-center/block2.png b/src/views/projectAdmin/zjsj/assets/images/command-center/block2.png
new file mode 100644
index 00000000..72897f59
Binary files /dev/null and b/src/views/projectAdmin/zjsj/assets/images/command-center/block2.png differ
diff --git a/src/views/projectAdmin/zjsj/assets/images/command-center/block3.png b/src/views/projectAdmin/zjsj/assets/images/command-center/block3.png
new file mode 100644
index 00000000..de64a50a
Binary files /dev/null and b/src/views/projectAdmin/zjsj/assets/images/command-center/block3.png differ
diff --git a/src/views/projectAdmin/zjsj/assets/images/command-center/block4-active.png b/src/views/projectAdmin/zjsj/assets/images/command-center/block4-active.png
new file mode 100644
index 00000000..e954b131
Binary files /dev/null and b/src/views/projectAdmin/zjsj/assets/images/command-center/block4-active.png differ
diff --git a/src/views/projectAdmin/zjsj/assets/images/command-center/block4.png b/src/views/projectAdmin/zjsj/assets/images/command-center/block4.png
new file mode 100644
index 00000000..c58446af
Binary files /dev/null and b/src/views/projectAdmin/zjsj/assets/images/command-center/block4.png differ
diff --git a/src/views/projectAdmin/zjsj/assets/images/command-center/icon-lifter.png b/src/views/projectAdmin/zjsj/assets/images/command-center/icon-lifter.png
new file mode 100644
index 00000000..f5f3cfeb
Binary files /dev/null and b/src/views/projectAdmin/zjsj/assets/images/command-center/icon-lifter.png differ
diff --git a/src/views/projectAdmin/zjsj/assets/images/command-center/icon-tower.png b/src/views/projectAdmin/zjsj/assets/images/command-center/icon-tower.png
new file mode 100644
index 00000000..eaa2a61d
Binary files /dev/null and b/src/views/projectAdmin/zjsj/assets/images/command-center/icon-tower.png differ
diff --git a/src/views/projectAdmin/zjsj/assets/images/command-center/icon-video.png b/src/views/projectAdmin/zjsj/assets/images/command-center/icon-video.png
new file mode 100644
index 00000000..f0457ae0
Binary files /dev/null and b/src/views/projectAdmin/zjsj/assets/images/command-center/icon-video.png differ
diff --git a/src/views/projectAdmin/zjsj/assets/images/command-center/instrument-panel.png b/src/views/projectAdmin/zjsj/assets/images/command-center/instrument-panel.png
new file mode 100644
index 00000000..eb294432
Binary files /dev/null and b/src/views/projectAdmin/zjsj/assets/images/command-center/instrument-panel.png differ
diff --git a/src/views/projectAdmin/zjsj/assets/images/command-center/map.png b/src/views/projectAdmin/zjsj/assets/images/command-center/map.png
new file mode 100644
index 00000000..09fdc861
Binary files /dev/null and b/src/views/projectAdmin/zjsj/assets/images/command-center/map.png differ
diff --git a/src/views/projectAdmin/zjsj/assets/images/command-center/max-block.png b/src/views/projectAdmin/zjsj/assets/images/command-center/max-block.png
new file mode 100644
index 00000000..64f2e80d
Binary files /dev/null and b/src/views/projectAdmin/zjsj/assets/images/command-center/max-block.png differ
diff --git a/src/views/projectAdmin/zjsj/assets/images/command-center/triangle.png b/src/views/projectAdmin/zjsj/assets/images/command-center/triangle.png
new file mode 100644
index 00000000..657ad44c
Binary files /dev/null and b/src/views/projectAdmin/zjsj/assets/images/command-center/triangle.png differ
diff --git a/src/views/projectAdmin/zjsj/command/center.vue b/src/views/projectAdmin/zjsj/command/center.vue
index c3cce9a5..241dcdf8 100644
--- a/src/views/projectAdmin/zjsj/command/center.vue
+++ b/src/views/projectAdmin/zjsj/command/center.vue
@@ -1,18 +1,116 @@
 <template>
-  <div class="contentBox">
+  <div class="container">
+    <div class="image">
+      <img src="../assets/images/command-center/map.png" alt="">
+      <!-- 标记点 -->
+      <div class="sign" @mouseenter="handleMouseenter" @mouseleave="handleMouseleave"></div>
+      <!-- 信息窗体 -->
+      <div v-show="open" class="information-form">
+        <div class="form">
+          <div class="form-item" style="height: 30px;" v-for="(item, key) in informationForm" :key="key">
+            <span class="label">{{ item.label }}</span>
+            <div class="bottom">
+              <span class="value" :style="{ fontStyle: item.unit ? 'italic' : '' }">{{ item.value }}</span>
+              <span v-if="item.value" class="unit">{{ item.unit }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 export default {
   data() {
-    return {};
-  }
+    return {
+      // 信息窗体开关
+      open: false,
+      // 信息窗体表单
+      informationForm: {
+        projectName: { label: '项目名称:', value: '中建四局安置房三期工程' },
+        projectStatus: { label: '项目状态:', value: '正常施工' },
+        schedule: { label: '形象进度:', value: '主体施工' },
+        costOfProjects: { label: '项目造价:', value: 956.33, unit: '万元' },
+        completedInvestment: { label: '已完成投资:', value: 956.33, unit: '万元' },
+        area: { label: '工程面积:', value: 15300, unit: '㎡' },
+        developmentOrganization: { label: '建设单位:', value: '中建四局发展(广州天河)有限公司' },
+        projectAddress: { label: '项目地址:', value: '建宁路与热河交叉路口' },
+      },
+    };
+  },
+  methods: {
+    // 标记点 鼠标移入事件
+    handleMouseenter() {
+      this.open = true;
+    },
+    // 标记点 鼠标移出事件
+    handleMouseleave() {
+      this.open = false;
+    },
+  },
 };
 </script>
 
 <style lang="less" scoped>
-.contentBox{
-    width: 50%;
+.container {
+  display: grid;
+  place-items: center;
+  width: 100%;
+  height: 100%;
+
+  .image {
+    width: 100%;
+    position: relative;
+    img {
+      width: 100%;
+    }
+
+    // 标记点
+    .sign {
+      position: absolute;
+      right: 25.8%;
+      top: 33%;
+
+      width: 50px;
+      height: 50px;
+    }
+
+    // 信息窗体
+    .information-form {
+      position: absolute;
+      right: 33%;
+      top: 23%;
+
+      padding: 20px;
+      width: 300px;
+      height: 400px;
+      background-color: #44bfc598;
+      border: 2px solid #89a483;
+      border-radius: 4px;
+      transition: all .3s;
+      .form {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        height: 100%;
+        .form-item {
+          display: flex;
+          align-items: center;
+          padding: 5px 0;
+          font-weight: bold;
+          .label {
+            margin-right: 10px;
+            color: #002636;
+          }
+
+          .value {
+            color: #000;
+          }
+        }
+      }
+
+    }
+  }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/projectAdmin/zjsj/command/index.vue b/src/views/projectAdmin/zjsj/command/index.vue
index 3538d50b..805b8a47 100644
--- a/src/views/projectAdmin/zjsj/command/index.vue
+++ b/src/views/projectAdmin/zjsj/command/index.vue
@@ -15,17 +15,9 @@
       </div>
     </div>
     <div class="centerBox">
-      <div class="centerTop">
+      <div class="center">
         <Center />
       </div>
-      <div class="centerBot">
-        <div class="one">
-          <CenterBOne />
-        </div>
-        <div class="two">
-          <CenterBTwo />
-        </div>
-      </div>
     </div>
     <div class="rightBox">
       <div class="rightOne">
@@ -100,19 +92,8 @@ export default {
     width: 50%;
     margin-left: 2%;
     margin-right: 2%;
-    .centerTop {
-      height: 78%;
-      background-color: #11a0a6;
-    }
-    .centerBot {
-      margin-top: 2%;
-      display: flex;
-      .one {
-        width: 100%;
-      }
-      .two {
-        width: 100%;
-      }
+    .center {
+      height: 100%;
     }
   }
   .rightBox {
diff --git a/src/views/projectAdmin/zjsj/command/leftFour.vue b/src/views/projectAdmin/zjsj/command/leftFour.vue
index 628b89d6..8e3a231f 100644
--- a/src/views/projectAdmin/zjsj/command/leftFour.vue
+++ b/src/views/projectAdmin/zjsj/command/leftFour.vue
@@ -6,7 +6,15 @@
       <div class="item" ref="thirdChart"></div>
       <div class="first-box box">
         <div class="box-title">塔吊设备数</div>
-        <img class="image" src="" alt="">
+        <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>
@@ -331,11 +339,11 @@ export default {
     color: transparent;
 
     &:nth-child(1) {
-      transform: translateX(-20%);
+      transform: translateX(-22%);
     }
 
     &:nth-child(2) {
-      transform: translateX(-47%);
+      transform: translateX(-48%);
     }
 
     &:nth-child(3) {
@@ -356,13 +364,27 @@ export default {
     .image {
       width: 20px;
       height: 20px;
-      background-color: green;
     }
   }
 
   .first-box {
     bottom: 30%;
-    left: 8%;
+    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 f19aa5c8..3f0f196e 100644
--- a/src/views/projectAdmin/zjsj/command/leftOne.vue
+++ b/src/views/projectAdmin/zjsj/command/leftOne.vue
@@ -26,9 +26,9 @@ export default {
       { name: '项目位置', content: '测试测试测试测试' },
       { name: '项目位置', content: '测试测试测试测试' },
       { name: '项目位置', content: '测试测试测试测试' },
-      { name: '项目位置', content: '测试测试测试测试' },
-    ],
-  }),
+      { name: '项目位置', content: '测试测试测试测试' }
+    ]
+  })
 }
 </script>
 
@@ -40,27 +40,30 @@ export default {
   height: 100%;
 
   .list {
+    width: 100%;
     height: 100%;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     color: #fff;
-    font-weight: 500;
     overflow-y: scroll;
 
     .list-item {
+      display: flex;
       box-sizing: border-box;
       border-left: 4px solid #66d3d8;
       margin-bottom: 5px;
-      padding: 10px 30px;
+      padding: 10px 0;
       width: 100%;
-      background-image: linear-gradient(to right , #3b7589, #212c3e);
-      font-size: 13px;
+      background-image: linear-gradient(to right, #3b7589, #212c3e);
+      font-size: 12px;
+      font-weight: 500;
       cursor: pointer;
-      transition: all .3s;
+      transition: all 0.3s;
+      white-space: nowrap;
 
       &:hover {
-        padding: 30px;
+        padding: 20px 0;
       }
 
       &:hover .value {
@@ -71,8 +74,21 @@ export default {
         margin-bottom: 0;
       }
 
+      .label,
+      .value {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
       .label {
-        margin-right: 30px;
+        box-sizing: border-box;
+        width: 25%;
+        padding-left: 20px;
+      }
+
+      .value {
+        width: 75%;
       }
     }
   }
diff --git a/src/views/projectAdmin/zjsj/command/rightOne.vue b/src/views/projectAdmin/zjsj/command/rightOne.vue
index f9a1a07a..c6b37983 100644
--- a/src/views/projectAdmin/zjsj/command/rightOne.vue
+++ b/src/views/projectAdmin/zjsj/command/rightOne.vue
@@ -1,11 +1,47 @@
 <template>
-  <div>
-    <Card title="安全管理">
-      <div class="contentBox">
-        123
+  <Card title="安全管理">
+    <div class="container">
+      <div class="left">
+        <div class="top">
+          <div class="image">
+            <img style="width: 100%" src="../assets/images/command-center/instrument-panel.png" alt="">
+            <div class="value">
+              <span class="number">45</span>
+              <span class="unit">%</span>
+            </div>
+          </div>
+        </div>
+        <div class="bottom">
+          <span class="label">巡检总数/已完成整改</span>
+          <div class="value">
+            <span class="number">200</span>/<span class="number">45</span>
+          </div>
+        </div>
       </div>
-    </Card>
-  </div>
+      <div class="right">
+        <div class="content">
+          <div class="top-title">安全生产天数</div>
+
+          <div class="days">
+            <div class="number item">0</div>
+            <div class="number item">3</div>
+            <div class="number item">6</div>
+            <div class="number item">5</div>
+            <div class="text item">天</div>
+          </div>
+          
+          <div class="bottom">
+            <span class="label">安全生产起始日期：</span>
+            <div class="value">
+              <span>2019</span>年
+              <span>03</span>月
+              <span>15</span>日
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </Card>
 </template>
 
 <script>
@@ -18,4 +54,114 @@ export default {
 }
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.container {
+  display: flex;
+  width: 100%;
+  height: 100%;
+
+  .left {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    width: 50%;
+    height: 100%;
+
+    .top {
+      display: flex;
+      justify-content: center;
+      .image {
+        position: relative;
+        width: 175px;
+        .value {
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          font-size: 23px;
+        }
+      }
+    }
+
+    .bottom {
+      font-size: 13px;
+    }
+
+    .label {
+      font-size: 15px;
+      color: #a5b2c0;
+    }
+
+    .value {
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      .number:nth-child(1) {
+        color: #fff;
+      }
+
+      .number:nth-child(2) {
+        color: #af5320;
+      }
+      
+    }
+  }
+
+  .right {
+    display: grid;
+    place-items: center;
+    width: 50%;
+    height: 100%;
+
+    .content {
+      box-sizing: border-box;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      align-items: center;
+
+      padding: 16px 6px 8px;
+      width: 175px;
+      height: 152px;
+      background-image: url('../assets/images/command-center/max-block.png');
+
+      .top-title {
+        margin-bottom: 15px;
+        font-size: 20px;
+        color: #65b3b5;
+        text-align: center;
+      }
+
+      .days {
+        display: flex;
+        .item {
+          display: grid;
+          place-items: center;
+          width: 34px;
+          height: 64px;
+          color: #fff;
+          font-size: 20px;
+          &.number {
+            background-image: url('../assets/images/command-center/block.png');
+          }
+          &.text {
+            width: 28px !important;
+            font-size: 17px;
+          }
+        }
+      }
+
+      .bottom {
+        width: 100%;
+        text-align: right;
+        display: flex;
+        color: #a5b2c0;
+        font-size: 12px;
+        white-space: nowrap;
+        transform: scale(65%);
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/projectAdmin/zjsj/command/rightTwo.vue b/src/views/projectAdmin/zjsj/command/rightTwo.vue
index b7feb088..3ac5019f 100644
--- a/src/views/projectAdmin/zjsj/command/rightTwo.vue
+++ b/src/views/projectAdmin/zjsj/command/rightTwo.vue
@@ -1,21 +1,229 @@
 <template>
-  <div>
-    <Card title="质量管理">
-      <div class="contentBox">
-        123
+  <Card title="质量管理">
+    <div class="container">
+      <div class="left" ref="chart"></div>
+      <div class="right">
+        <div class="top">
+          <div class="left">
+            <span class="label">已整改质量问题</span>
+            <span class="value">(13)</span>
+          </div>
+          <div class="right">
+            <span class="label">未整改质量问题</span>
+            <span class="value">(14)</span>
+          </div>
+        </div>
+        <div class="list">
+          <div class="list-item" v-for="(item, index) in list" :key="index">
+            <span class="label">{{ item.name }}</span>
+            <span class="value">{{ item.content }}</span>
+          </div>
+        </div>
       </div>
-    </Card>
-  </div>
+    </div>
+  </Card>
 </template>
 
 <script>
 import Card from '../components/Card'
+
+import echarts from 'echarts4'
+
 export default {
   components: { Card },
   data() {
-    return {}
+    return {
+      list: [
+        { name: '项目位置', content: '测试测试测试测试' },
+        { name: '项目位置', content: '测试测试测试测试' },
+        { name: '项目位置', content: '测试测试测试测试' },
+        { name: '项目位置', content: '测试测试测试测试' },
+        { name: '项目位置', content: '测试测试测试测试' },
+        { name: '项目位置', content: '测试测试测试测试' },
+        { name: '项目位置', content: '测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试' },
+        { name: '项目位置', content: '测试测试测试测试' },
+        { name: '项目位置', content: '测试测试测试测试' },
+        { name: '项目位置', content: '1测试测试测试测试' }
+      ]
+    }
+  },
+  mounted() {
+    this.initChart()
+  },
+  methods: {
+    initChart() {
+      const myChart = echarts.init(this.$refs.chart)
+
+      const option = {
+        backgroundColor: '#182337',
+        tooltip: {
+          trigger: 'item'
+        },
+        title: {
+          text: '质量问题数',
+          left: '47%',
+          top: '55%',
+          textAlign: 'center',
+          textStyle: {
+            fontSize: '15',
+            color: '#8f929b',
+            fontWeight: '400'
+          },
+        },
+        series: [
+          {
+            type: 'pie',
+            radius: ['80', '68'],
+            center: ['50%', '50%'],
+            hoverAnimation: true,
+            label: {
+              normal: {
+                position: 'center'
+              }
+            },
+            data: [
+              {
+                value: '56',
+                name: '标题',
+                itemStyle: {
+                  normal: {
+                    color: '#f25d17'
+                  }
+                },
+                label: {
+                  normal: {
+                    show: false
+                  }
+                }
+              },
+              {
+                value: 100 - '56',
+                name: '占位',
+                tooltip: {
+                  show: false
+                },
+                itemStyle: {
+                  normal: {
+                    color: '#60d3d0'
+                  }
+                },
+                label: {
+                  normal: {
+                    formatter: '56',
+                    textStyle: {
+                      fontSize: 36,
+                      color: '#ffc30f',
+                      // 调整label的位置
+                      padding:[-30, 0, 0, 0],
+                    }
+                  }
+                }
+              }
+            ]
+          },
+          // {
+          //   type: 'pie',
+          //   roseType: 'area',
+          //   radius: ['58%', '54%'],
+          //   color: ['#182337', '#68d7d9'],
+          //   data: [50, 50]
+          // }
+        ]
+      }
+
+      myChart.setOption(option)
+    }
   }
 }
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.container {
+  display: flex;
+  box-sizing: border-box;
+  padding-bottom: 5px;
+
+  width: 100%;
+  height: 100%;
+
+  > .left {
+    display: grid;
+    place-items: center;
+
+    width: 50%;
+    height: 100%;
+  }
+
+  > .right {
+    display: flex;
+    flex-direction: column;
+    width: 50%;
+    .top {
+      display: flex;
+      padding: 10px 0;
+      color: #fff;
+      font-size: 12px;
+      white-space: nowrap;
+      line-height: 34px;
+      .left {
+        color: #af5320;
+        transform: translateX(-10%);
+      }
+    }
+
+    .list {
+      width: 100%;
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      color: #fff;
+      overflow-y: scroll;
+
+      .list-item {
+        display: flex;
+        box-sizing: border-box;
+        border-left: 4px solid #66d3d8;
+        margin-bottom: 5px;
+        padding: 10px 0;
+        width: 100%;
+        background-image: linear-gradient(to right, #3b7589, #212c3e);
+        font-size: 12px;
+        font-weight: 500;
+        cursor: pointer;
+        transition: all 0.3s;
+        white-space: nowrap;
+
+        &:hover {
+          padding: 20px 0;
+        }
+
+        &:hover .value {
+          color: #c2805f;
+        }
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+
+        .label,
+        .value {
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+
+        .label {
+          box-sizing: border-box;
+          width: 40%;
+          padding-left: 20px;
+        }
+
+        .value {
+          width: 60%;
+        }
+      }
+    }
+  }
+}
+</style>