diff --git a/src/views/projectAdmin/zjsj/assets/temp/1.png b/src/views/projectAdmin/zjsj/assets/temp/1.png
new file mode 100644
index 00000000..5342afd5
Binary files /dev/null and b/src/views/projectAdmin/zjsj/assets/temp/1.png differ
diff --git a/src/views/projectAdmin/zjsj/assets/temp/2.png b/src/views/projectAdmin/zjsj/assets/temp/2.png
new file mode 100644
index 00000000..07941975
Binary files /dev/null and b/src/views/projectAdmin/zjsj/assets/temp/2.png differ
diff --git a/src/views/projectAdmin/zjsj/assets/temp/3.png b/src/views/projectAdmin/zjsj/assets/temp/3.png
new file mode 100644
index 00000000..153440e1
Binary files /dev/null and b/src/views/projectAdmin/zjsj/assets/temp/3.png differ
diff --git a/src/views/projectAdmin/zjsj/assets/temp/4.png b/src/views/projectAdmin/zjsj/assets/temp/4.png
new file mode 100644
index 00000000..dc766fd1
Binary files /dev/null and b/src/views/projectAdmin/zjsj/assets/temp/4.png differ
diff --git a/src/views/projectAdmin/zjsj/assets/temp/5.png b/src/views/projectAdmin/zjsj/assets/temp/5.png
new file mode 100644
index 00000000..84f507cb
Binary files /dev/null and b/src/views/projectAdmin/zjsj/assets/temp/5.png differ
diff --git a/src/views/projectAdmin/zjsj/assets/temp/6.png b/src/views/projectAdmin/zjsj/assets/temp/6.png
new file mode 100644
index 00000000..45a5e8a5
Binary files /dev/null and b/src/views/projectAdmin/zjsj/assets/temp/6.png differ
diff --git a/src/views/projectAdmin/zjsj/assets/temp/7.png b/src/views/projectAdmin/zjsj/assets/temp/7.png
new file mode 100644
index 00000000..e32f44ef
Binary files /dev/null and b/src/views/projectAdmin/zjsj/assets/temp/7.png differ
diff --git a/src/views/projectAdmin/zjsj/assets/temp/8.png b/src/views/projectAdmin/zjsj/assets/temp/8.png
new file mode 100644
index 00000000..d93ad99d
Binary files /dev/null and b/src/views/projectAdmin/zjsj/assets/temp/8.png differ
diff --git a/src/views/projectAdmin/zjsj/assets/temp/9.png b/src/views/projectAdmin/zjsj/assets/temp/9.png
new file mode 100644
index 00000000..6c3f7f19
Binary files /dev/null and b/src/views/projectAdmin/zjsj/assets/temp/9.png differ
diff --git a/src/views/projectAdmin/zjsj/carbon/centerBottom.vue b/src/views/projectAdmin/zjsj/carbon/centerBottom.vue
new file mode 100644
index 00000000..52e55837
--- /dev/null
+++ b/src/views/projectAdmin/zjsj/carbon/centerBottom.vue
@@ -0,0 +1,14 @@
+<template>
+  <Card title="晴雨表">
+    晴雨表
+  </Card>
+</template>
+
+<script>
+import Card from '../components/Card.vue'
+export default {
+  components: { Card }
+}
+</script>
+
+<style></style>
diff --git a/src/views/projectAdmin/zjsj/carbon/centerTop.vue b/src/views/projectAdmin/zjsj/carbon/centerTop.vue
new file mode 100644
index 00000000..22d7eab5
--- /dev/null
+++ b/src/views/projectAdmin/zjsj/carbon/centerTop.vue
@@ -0,0 +1,14 @@
+<template>
+  <Card title="实时数据">
+    实时数据
+  </Card>
+</template>
+
+<script>
+import Card from '../components/Card.vue'
+export default {
+  components: { Card }
+}
+</script>
+
+<style></style>
diff --git a/src/views/projectAdmin/zjsj/carbon/index.vue b/src/views/projectAdmin/zjsj/carbon/index.vue
index 661e27b4..9fe939db 100644
--- a/src/views/projectAdmin/zjsj/carbon/index.vue
+++ b/src/views/projectAdmin/zjsj/carbon/index.vue
@@ -1,9 +1,66 @@
 <template>
-  <div class="carbon">carbon</div>
+  <div class="carbon">
+    <div class="between">
+      <div class="top"><LeftTop /></div>
+      <div class="center"><LeftCenter /></div>
+      <div class="bottom"><LeftBottom /></div>
+    </div>
+    <div class="center">
+      <div class="top"><CenterTop /></div>
+      <div class="bottom"><CenterBottom /></div>
+    </div>
+    <div class="between">
+      <div class="top"><RightTop /></div>
+      <div class="center"><RightCenter /></div>
+      <div class="bottom"><RightBottom /></div>
+    </div>
+  </div>
 </template>
 
 <script>
-export default {}
+import LeftTop from './leftTop.vue'
+import LeftCenter from './leftCenter.vue'
+import LeftBottom from './leftBottom.vue'
+import CenterTop from './centerTop.vue'
+import CenterBottom from './centerBottom.vue'
+import RightTop from './rightTop.vue'
+import RightCenter from './rightCenter.vue'
+import RightBottom from './rightBottom.vue'
+export default {
+  components: { LeftTop, LeftCenter, LeftBottom, CenterTop, CenterBottom, RightTop, RightCenter, RightBottom }
+}
 </script>
 
-<style></style>
+<style lang="less" scoped>
+.carbon {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: space-between;
+  // background: url(../assets/temp/7.png) no-repeat;
+  // background-size: 100% 100%;
+  .between {
+    width: 20%;
+    height: 100%;
+    .top {
+      height: 33.33%;
+    }
+    .center {
+      height: 33.33%;
+    }
+    .bottom {
+      height: 33.33%;
+    }
+  }
+  > .center {
+    width: calc(60% - 40px);
+    height: 100%;
+    .top {
+      height: 70%;
+    }
+    .bottom {
+      height: 30%;
+    }
+  }
+}
+</style>
diff --git a/src/views/projectAdmin/zjsj/carbon/leftBottom.vue b/src/views/projectAdmin/zjsj/carbon/leftBottom.vue
new file mode 100644
index 00000000..36501364
--- /dev/null
+++ b/src/views/projectAdmin/zjsj/carbon/leftBottom.vue
@@ -0,0 +1,14 @@
+<template>
+  <Card title="趋势图">
+    趋势图
+  </Card>
+</template>
+
+<script>
+import Card from '../components/Card.vue'
+export default {
+  components: { Card }
+}
+</script>
+
+<style></style>
diff --git a/src/views/projectAdmin/zjsj/carbon/leftCenter.vue b/src/views/projectAdmin/zjsj/carbon/leftCenter.vue
new file mode 100644
index 00000000..91b401d1
--- /dev/null
+++ b/src/views/projectAdmin/zjsj/carbon/leftCenter.vue
@@ -0,0 +1,14 @@
+<template>
+  <Card title="雾炮喷淋">
+    雾炮喷淋
+  </Card>
+</template>
+
+<script>
+import Card from '../components/Card.vue'
+export default {
+  components: { Card }
+}
+</script>
+
+<style></style>
diff --git a/src/views/projectAdmin/zjsj/carbon/leftTop.vue b/src/views/projectAdmin/zjsj/carbon/leftTop.vue
new file mode 100644
index 00000000..46804d97
--- /dev/null
+++ b/src/views/projectAdmin/zjsj/carbon/leftTop.vue
@@ -0,0 +1,14 @@
+<template>
+  <Card title="环境监测">
+    环境监测
+  </Card>
+</template>
+
+<script>
+import Card from '../components/Card.vue'
+export default {
+  components: { Card }
+}
+</script>
+
+<style></style>
diff --git a/src/views/projectAdmin/zjsj/carbon/rightBottom.vue b/src/views/projectAdmin/zjsj/carbon/rightBottom.vue
new file mode 100644
index 00000000..1ad04124
--- /dev/null
+++ b/src/views/projectAdmin/zjsj/carbon/rightBottom.vue
@@ -0,0 +1,14 @@
+<template>
+  <Card title="报警记录">
+    报警记录
+  </Card>
+</template>
+
+<script>
+import Card from '../components/Card.vue'
+export default {
+  components: { Card }
+}
+</script>
+
+<style></style>
diff --git a/src/views/projectAdmin/zjsj/carbon/rightCenter.vue b/src/views/projectAdmin/zjsj/carbon/rightCenter.vue
new file mode 100644
index 00000000..2a2ad3ee
--- /dev/null
+++ b/src/views/projectAdmin/zjsj/carbon/rightCenter.vue
@@ -0,0 +1,14 @@
+<template>
+  <Card title="今日报警统计">
+    今日报警统计
+  </Card>
+</template>
+
+<script>
+import Card from '../components/Card.vue'
+export default {
+  components: { Card }
+}
+</script>
+
+<style></style>
diff --git a/src/views/projectAdmin/zjsj/carbon/rightTop.vue b/src/views/projectAdmin/zjsj/carbon/rightTop.vue
new file mode 100644
index 00000000..5239a579
--- /dev/null
+++ b/src/views/projectAdmin/zjsj/carbon/rightTop.vue
@@ -0,0 +1,14 @@
+<template>
+  <Card title="空气分析">
+    空气分析
+  </Card>
+</template>
+
+<script>
+import Card from '../components/Card.vue'
+export default {
+  components: { Card }
+}
+</script>
+
+<style></style>
diff --git a/src/views/projectAdmin/zjsj/cim/index.vue b/src/views/projectAdmin/zjsj/cim/index.vue
index 4512ed57..cb58eb39 100644
--- a/src/views/projectAdmin/zjsj/cim/index.vue
+++ b/src/views/projectAdmin/zjsj/cim/index.vue
@@ -1,9 +1,58 @@
 <template>
-  <div class="cim">cim</div>
+  <div class="cim">
+    <!-- <div class="between">
+      <div class="top">
+        <LeftTop />
+      </div>
+      <div class="bottom">
+        <LeftBottom />
+      </div>
+    </div>
+    <div class="center"></div>
+    <div class="between">
+      <div class="top">
+        <RightTop />
+      </div>
+      <div class="bottom">
+        <RightBottom />
+      </div>
+    </div> -->
+  </div>
 </template>
 
 <script>
-export default {}
+import LeftTop from './leftTop.vue'
+import LeftBottom from './leftBottom.vue'
+import RightTop from './rightTop.vue'
+import RightBottom from './rightBottom.vue'
+export default {
+  components: { LeftTop, LeftBottom, RightTop, RightBottom }
+}
 </script>
 
-<style></style>
+<style lang="less" scoped>
+.cim {
+  width: 100%;
+  height: 100%;
+  color: #fff;
+  display: flex;
+  justify-content: space-between;
+  background: url(../assets/temp/2.png) no-repeat;
+  background-size: 100% 100%;
+  .between {
+    width: 20%;
+    height: 100%;
+    .top {
+      height: 50%;
+    }
+    .bottom {
+      height: 50%;
+    }
+  }
+  .center {
+    width: calc(60% - 40px);
+    height: 100%;
+    background: skyblue;
+  }
+}
+</style>
diff --git a/src/views/projectAdmin/zjsj/cim/leftBottom.vue b/src/views/projectAdmin/zjsj/cim/leftBottom.vue
new file mode 100644
index 00000000..74ea4220
--- /dev/null
+++ b/src/views/projectAdmin/zjsj/cim/leftBottom.vue
@@ -0,0 +1,14 @@
+<template>
+  <Card title="倾斜摄影">
+    倾斜摄影
+  </Card>
+</template>
+
+<script>
+import Card from '../components/Card.vue'
+export default {
+  components: { Card }
+}
+</script>
+
+<style></style>
diff --git a/src/views/projectAdmin/zjsj/cim/leftTop.vue b/src/views/projectAdmin/zjsj/cim/leftTop.vue
new file mode 100644
index 00000000..7ef1bb86
--- /dev/null
+++ b/src/views/projectAdmin/zjsj/cim/leftTop.vue
@@ -0,0 +1,14 @@
+<template>
+  <Card title="BIM协同">
+    BIM协同
+  </Card>
+</template>
+
+<script>
+import Card from '../components/Card.vue'
+export default {
+  components: { Card }
+}
+</script>
+
+<style></style>
diff --git a/src/views/projectAdmin/zjsj/cim/rightBottom.vue b/src/views/projectAdmin/zjsj/cim/rightBottom.vue
new file mode 100644
index 00000000..40296e6d
--- /dev/null
+++ b/src/views/projectAdmin/zjsj/cim/rightBottom.vue
@@ -0,0 +1,14 @@
+<template>
+  <Card title="模型外审">
+    模型外审
+  </Card>
+</template>
+
+<script>
+import Card from '../components/Card.vue'
+export default {
+  components: { Card }
+}
+</script>
+
+<style></style>
diff --git a/src/views/projectAdmin/zjsj/cim/rightTop.vue b/src/views/projectAdmin/zjsj/cim/rightTop.vue
new file mode 100644
index 00000000..81d33233
--- /dev/null
+++ b/src/views/projectAdmin/zjsj/cim/rightTop.vue
@@ -0,0 +1,14 @@
+<template>
+  <Card title="模型内审">
+    模型内审
+  </Card>
+</template>
+
+<script>
+import Card from '../components/Card.vue'
+export default {
+  components: { Card }
+}
+</script>
+
+<style></style>
diff --git a/src/views/projectAdmin/zjsj/command/centerBOne.vue b/src/views/projectAdmin/zjsj/command/centerBOne.vue
index 6ba5ef00..e2cc836f 100644
--- a/src/views/projectAdmin/zjsj/command/centerBOne.vue
+++ b/src/views/projectAdmin/zjsj/command/centerBOne.vue
@@ -1,22 +1,21 @@
 <template>
   <div>
-    <CardData title="事件详情">
-        <div class="contentBox">
-            123
-        </div>
-    </CardData>
+    <Card title="事件详情">
+      <div class="contentBox">
+        123
+      </div>
+    </Card>
   </div>
 </template>
 
 <script>
-import CardData from "../components/cardData";
+import Card from '../components/Card'
 export default {
-  components: { CardData },
+  components: { Card },
   data() {
-    return {};
+    return {}
   }
-};
+}
 </script>
 
-<style lang="less" scoped>
-</style>
\ No newline at end of file
+<style lang="less" scoped></style>
diff --git a/src/views/projectAdmin/zjsj/command/centerBTwo.vue b/src/views/projectAdmin/zjsj/command/centerBTwo.vue
index 88a2ddf8..62ee0b5d 100644
--- a/src/views/projectAdmin/zjsj/command/centerBTwo.vue
+++ b/src/views/projectAdmin/zjsj/command/centerBTwo.vue
@@ -1,22 +1,21 @@
 <template>
   <div>
-    <CardData title="项目人员管理">
-        <div class="contentBox">
-            123
-        </div>
-    </CardData>
+    <Card title="项目人员管理">
+      <div class="contentBox">
+        123
+      </div>
+    </Card>
   </div>
 </template>
 
 <script>
-import CardData from "../components/cardData";
+import Card from '../components/Card'
 export default {
-  components: { CardData },
+  components: { Card },
   data() {
-    return {};
+    return {}
   }
-};
+}
 </script>
 
-<style lang="less" scoped>
-</style>
\ No newline at end of file
+<style lang="less" scoped></style>
diff --git a/src/views/projectAdmin/zjsj/command/index.vue b/src/views/projectAdmin/zjsj/command/index.vue
index c417a65e..31b9a4e3 100644
--- a/src/views/projectAdmin/zjsj/command/index.vue
+++ b/src/views/projectAdmin/zjsj/command/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="containerBox">
-    <div class="leftBox">
+    <!-- <div class="leftBox">
       <div class="leftOne">
         <leftOne></leftOne>
       </div>
@@ -40,29 +40,29 @@
       <div class="rightFour">
         <rightFour></rightFour>
       </div>
-    </div>
+    </div> -->
   </div>
 </template>
 
 <script>
-import leftOne from "./leftOne";
-import leftTwo from "./leftTwo";
-import leftThree from "./leftThree";
-import leftFour from "./leftFour";
-import center from "./center";
-import centerBOne from "./centerBOne";
-import centerBTwo from "./centerBTwo";
-import rightOne from "./rightOne";
-import rightTwo from "./rightTwo";
-import rightThree from "./rightThree";
-import rightFour from "./rightFour";
+import leftOne from './leftOne'
+import leftTwo from './leftTwo'
+import leftThree from './leftThree'
+import leftFour from './leftFour'
+import center from './center'
+import centerBOne from './centerBOne'
+import centerBTwo from './centerBTwo'
+import rightOne from './rightOne'
+import rightTwo from './rightTwo'
+import rightThree from './rightThree'
+import rightFour from './rightFour'
 
 export default {
-  components: { leftOne, leftTwo, leftThree, leftFour, center ,centerBOne,centerBTwo,rightOne,rightTwo,rightThree,rightFour},
+  components: { leftOne, leftTwo, leftThree, leftFour, center, centerBOne, centerBTwo, rightOne, rightTwo, rightThree, rightFour },
   data() {
-    return {};
+    return {}
   }
-};
+}
 </script>
 
 <style lang="less" scoped>
@@ -70,6 +70,8 @@ export default {
   display: flex;
   width: 100%;
   height: 100%;
+  background: url(../assets/temp/1.png) no-repeat;
+  background-size: 100% 100%;
   .leftBox {
     width: 25%;
     .leftOne {
@@ -86,18 +88,18 @@ export default {
     width: 50%;
     margin-left: 2%;
     margin-right: 2%;
-    .centerTop{
+    .centerTop {
       height: 78%;
       background-color: #11a0a6;
     }
-    .centerBot{
+    .centerBot {
       margin-top: 2%;
       display: flex;
-      .one{
+      .one {
         width: 100%;
         // margin-left: 10%;
       }
-      .two{
+      .two {
         width: 100%;
       }
     }
@@ -115,4 +117,4 @@ export default {
     }
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/projectAdmin/zjsj/command/leftFour.vue b/src/views/projectAdmin/zjsj/command/leftFour.vue
index 3d031574..9dbaf38e 100644
--- a/src/views/projectAdmin/zjsj/command/leftFour.vue
+++ b/src/views/projectAdmin/zjsj/command/leftFour.vue
@@ -1,22 +1,21 @@
 <template>
   <div>
-    <CardData title="设备管理">
-        <div class="contentBox">
-            123
-        </div>
-    </CardData>
+    <Card title="设备管理">
+      <div class="contentBox">
+        123
+      </div>
+    </Card>
   </div>
 </template>
 
 <script>
-import CardData from "../components/cardData";
+import Card from '../components/Card'
 export default {
-  components: { CardData },
+  components: { Card },
   data() {
-    return {};
+    return {}
   }
-};
+}
 </script>
 
-<style lang="less" scoped>
-</style>
\ No newline at end of file
+<style lang="less" scoped></style>
diff --git a/src/views/projectAdmin/zjsj/command/leftOne.vue b/src/views/projectAdmin/zjsj/command/leftOne.vue
index b5c249d7..39a51e64 100644
--- a/src/views/projectAdmin/zjsj/command/leftOne.vue
+++ b/src/views/projectAdmin/zjsj/command/leftOne.vue
@@ -1,31 +1,31 @@
 <template>
   <div>
-    <CardData title="项目信息">
-        <div class="contentBox">
-            <div class="box">
-                <span>项目位置</span>
-                <span>建宁路与热河交叉路口</span>
-            </div>
+    <Card title="项目信息">
+      <div class="contentBox">
+        <div class="box">
+          <span>项目位置</span>
+          <span>建宁路与热河交叉路口</span>
         </div>
-    </CardData>
+      </div>
+    </Card>
   </div>
 </template>
 
 <script>
-import CardData from "../components/cardData";
+import Card from '../components/Card'
 export default {
-  components: { CardData },
+  components: { Card },
   data() {
-    return {};
+    return {}
   }
-};
+}
 </script>
 
 <style lang="less" scoped>
-.box{
-    height:40px;
-    line-height: 40px;
-    background-image:  url('~@/assets/images/projectZjsj/intro.png');
-    background-size: 100%;
+.box {
+  height: 40px;
+  line-height: 40px;
+  background-image: url('~@/assets/images/projectZjsj/intro.png');
+  background-size: 100%;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/projectAdmin/zjsj/command/leftThree.vue b/src/views/projectAdmin/zjsj/command/leftThree.vue
index dd0b78d5..644d5a64 100644
--- a/src/views/projectAdmin/zjsj/command/leftThree.vue
+++ b/src/views/projectAdmin/zjsj/command/leftThree.vue
@@ -1,22 +1,21 @@
 <template>
   <div>
-    <CardData title="进度管理">
-        <div class="contentBox">
-            123
-        </div>
-    </CardData>
+    <Card title="进度管理">
+      <div class="contentBox">
+        123
+      </div>
+    </Card>
   </div>
 </template>
 
 <script>
-import CardData from "../components/cardData";
+import Card from '../components/Card'
 export default {
-  components: { CardData },
+  components: { Card },
   data() {
-    return {};
+    return {}
   }
-};
+}
 </script>
 
-<style lang="less" scoped>
-</style>
\ No newline at end of file
+<style lang="less" scoped></style>
diff --git a/src/views/projectAdmin/zjsj/command/leftTwo.vue b/src/views/projectAdmin/zjsj/command/leftTwo.vue
index c8df044c..51ba3c02 100644
--- a/src/views/projectAdmin/zjsj/command/leftTwo.vue
+++ b/src/views/projectAdmin/zjsj/command/leftTwo.vue
@@ -1,22 +1,21 @@
 <template>
   <div>
-    <CardData title="人员概况">
-        <div class="contentBox">
-            123
-        </div>
-    </CardData>
+    <Card title="人员概况">
+      <div class="contentBox">
+        123
+      </div>
+    </Card>
   </div>
 </template>
 
 <script>
-import CardData from "../components/cardData";
+import Card from '../components/Card'
 export default {
-  components: { CardData },
+  components: { Card },
   data() {
-    return {};
+    return {}
   }
-};
+}
 </script>
 
-<style lang="less" scoped>
-</style>
\ No newline at end of file
+<style lang="less" scoped></style>
diff --git a/src/views/projectAdmin/zjsj/command/rightFour.vue b/src/views/projectAdmin/zjsj/command/rightFour.vue
index ae4740ee..b2f2d5f2 100644
--- a/src/views/projectAdmin/zjsj/command/rightFour.vue
+++ b/src/views/projectAdmin/zjsj/command/rightFour.vue
@@ -1,22 +1,21 @@
 <template>
   <div>
-    <CardData title="亮点展示">
-        <div class="contentBox">
-            123
-        </div>
-    </CardData>
+    <Card title="亮点展示">
+      <div class="contentBox">
+        123
+      </div>
+    </Card>
   </div>
 </template>
 
 <script>
-import CardData from "../components/cardData";
+import Card from '../components/Card'
 export default {
-  components: { CardData },
+  components: { Card },
   data() {
-    return {};
+    return {}
   }
-};
+}
 </script>
 
-<style lang="less" scoped>
-</style>
\ No newline at end of file
+<style lang="less" scoped></style>
diff --git a/src/views/projectAdmin/zjsj/command/rightOne.vue b/src/views/projectAdmin/zjsj/command/rightOne.vue
index dee5db56..f9a1a07a 100644
--- a/src/views/projectAdmin/zjsj/command/rightOne.vue
+++ b/src/views/projectAdmin/zjsj/command/rightOne.vue
@@ -1,22 +1,21 @@
 <template>
   <div>
-    <CardData title="安全管理">
-        <div class="contentBox">
-            123
-        </div>
-    </CardData>
+    <Card title="安全管理">
+      <div class="contentBox">
+        123
+      </div>
+    </Card>
   </div>
 </template>
 
 <script>
-import CardData from "../components/cardData";
+import Card from '../components/Card'
 export default {
-  components: { CardData },
+  components: { Card },
   data() {
-    return {};
+    return {}
   }
-};
+}
 </script>
 
-<style lang="less" scoped>
-</style>
\ No newline at end of file
+<style lang="less" scoped></style>
diff --git a/src/views/projectAdmin/zjsj/command/rightThree.vue b/src/views/projectAdmin/zjsj/command/rightThree.vue
index 8c42d65d..bb212547 100644
--- a/src/views/projectAdmin/zjsj/command/rightThree.vue
+++ b/src/views/projectAdmin/zjsj/command/rightThree.vue
@@ -1,22 +1,21 @@
 <template>
   <div>
-    <CardData title="环境监测">
-        <div class="contentBox">
-            123
-        </div>
-    </CardData>
+    <Card title="环境监测">
+      <div class="contentBox">
+        123
+      </div>
+    </Card>
   </div>
 </template>
 
 <script>
-import CardData from "../components/cardData";
+import Card from '../components/Card'
 export default {
-  components: { CardData },
+  components: { Card },
   data() {
-    return {};
+    return {}
   }
-};
+}
 </script>
 
-<style lang="less" scoped>
-</style>
\ No newline at end of file
+<style lang="less" scoped></style>
diff --git a/src/views/projectAdmin/zjsj/command/rightTwo.vue b/src/views/projectAdmin/zjsj/command/rightTwo.vue
index a28113ee..b7feb088 100644
--- a/src/views/projectAdmin/zjsj/command/rightTwo.vue
+++ b/src/views/projectAdmin/zjsj/command/rightTwo.vue
@@ -1,22 +1,21 @@
 <template>
   <div>
-    <CardData title="质量管理">
-        <div class="contentBox">
-            123
-        </div>
-    </CardData>
+    <Card title="质量管理">
+      <div class="contentBox">
+        123
+      </div>
+    </Card>
   </div>
 </template>
 
 <script>
-import CardData from "../components/cardData";
+import Card from '../components/Card'
 export default {
-  components: { CardData },
+  components: { Card },
   data() {
-    return {};
+    return {}
   }
-};
+}
 </script>
 
-<style lang="less" scoped>
-</style>
\ No newline at end of file
+<style lang="less" scoped></style>
diff --git a/src/views/projectAdmin/zjsj/components/cardData.vue b/src/views/projectAdmin/zjsj/components/Card.vue
similarity index 72%
rename from src/views/projectAdmin/zjsj/components/cardData.vue
rename to src/views/projectAdmin/zjsj/components/Card.vue
index 853ff7cb..f69efe8f 100644
--- a/src/views/projectAdmin/zjsj/components/cardData.vue
+++ b/src/views/projectAdmin/zjsj/components/Card.vue
@@ -23,16 +23,16 @@ export default {
   width: 100%;
   height: 100%;
   .title {
-    height: 45px;
+    height: 34px;
+    line-height: 28px;
     text-align: center;
-    line-height: 40px;
     font-size: 18px;
     color: #ffffff;
-    background-image:  url('~@/assets/images/projectZjsj/border.png');
-    background-size: 100%;
+    background-image: url('../assets/images/common/bg-card.png');
+    background-size: 100% 100%;
   }
   .content {
-    height: calc(100% - 45px);
+    height: calc(100% - 34px);
   }
 }
 </style>
diff --git a/src/views/projectAdmin/zjsj/govComp/index.vue b/src/views/projectAdmin/zjsj/govComp/index.vue
index fd265dfd..32e77b99 100644
--- a/src/views/projectAdmin/zjsj/govComp/index.vue
+++ b/src/views/projectAdmin/zjsj/govComp/index.vue
@@ -6,4 +6,11 @@
 export default {}
 </script>
 
-<style></style>
+<style lang="less" scoped>
+.gov-comp {
+  width: 100%;
+  height: 100%;
+  background: url(../assets/temp/9.png) no-repeat;
+  background-size: 100% 100%;
+}
+</style>
diff --git a/src/views/projectAdmin/zjsj/monitor/index.vue b/src/views/projectAdmin/zjsj/monitor/index.vue
index 2a584b02..5560803e 100644
--- a/src/views/projectAdmin/zjsj/monitor/index.vue
+++ b/src/views/projectAdmin/zjsj/monitor/index.vue
@@ -6,4 +6,11 @@
 export default {}
 </script>
 
-<style></style>
+<style lang="less" scoped>
+.monitor {
+  width: 100%;
+  height: 100%;
+  background: url(../assets/temp/8.png) no-repeat;
+  background-size: 100% 100%;
+}
+</style>
diff --git a/src/views/projectAdmin/zjsj/progress/index.vue b/src/views/projectAdmin/zjsj/progress/index.vue
index 7e002e2a..1f8188f4 100644
--- a/src/views/projectAdmin/zjsj/progress/index.vue
+++ b/src/views/projectAdmin/zjsj/progress/index.vue
@@ -1,9 +1,45 @@
 <template>
-  <div class="progress">progress</div>
+  <div class="progress">
+    <div class="top">
+      <div class="left"></div>
+      <div class="right">
+        <TopRight />
+      </div>
+    </div>
+    <div class="bottom"></div>
+  </div>
 </template>
 
 <script>
-export default {}
+import TopRight from './topRight.vue'
+export default {
+  components: { TopRight }
+}
 </script>
 
-<style></style>
+<style lang="less" scoped>
+.progress {
+  width: 100%;
+  height: 100%;
+  // background: url(../assets/temp/4.png) no-repeat;
+  // background-size: 100% 100%;
+  .top {
+    height: 74%;
+    display: flex;
+    justify-content: space-between;
+    .left {
+      width: 76%;
+      height: 100%;
+      border: 1px solid skyblue;
+    }
+    .right {
+      width: calc(24% - 20px);
+      height: 100%;
+    }
+  }
+  .bottom {
+    height: 26%;
+    border: 1px solid skyblue;
+  }
+}
+</style>
diff --git a/src/views/projectAdmin/zjsj/progress/topRight.vue b/src/views/projectAdmin/zjsj/progress/topRight.vue
new file mode 100644
index 00000000..0a41b0bc
--- /dev/null
+++ b/src/views/projectAdmin/zjsj/progress/topRight.vue
@@ -0,0 +1,14 @@
+<template>
+  <Card title="进度任务">
+    进度任务
+  </Card>
+</template>
+
+<script>
+import Card from '../components/Card.vue'
+export default {
+  components: { Card }
+}
+</script>
+
+<style></style>
diff --git a/src/views/projectAdmin/zjsj/quality/index.vue b/src/views/projectAdmin/zjsj/quality/index.vue
index 8925a42e..1b22b196 100644
--- a/src/views/projectAdmin/zjsj/quality/index.vue
+++ b/src/views/projectAdmin/zjsj/quality/index.vue
@@ -6,4 +6,11 @@
 export default {}
 </script>
 
-<style></style>
+<style lang="less" scoped>
+.quality {
+  width: 100%;
+  height: 100%;
+  background: url(../assets/temp/6.png) no-repeat;
+  background-size: 100% 100%;
+}
+</style>
diff --git a/src/views/projectAdmin/zjsj/security/centerBottom.vue b/src/views/projectAdmin/zjsj/security/centerBottom.vue
new file mode 100644
index 00000000..3126f6ef
--- /dev/null
+++ b/src/views/projectAdmin/zjsj/security/centerBottom.vue
@@ -0,0 +1,14 @@
+<template>
+  <Card title="危大工程">
+    危大工程
+  </Card>
+</template>
+
+<script>
+import Card from '../components/Card.vue'
+export default {
+  components: { Card }
+}
+</script>
+
+<style></style>
diff --git a/src/views/projectAdmin/zjsj/security/centerTop.vue b/src/views/projectAdmin/zjsj/security/centerTop.vue
new file mode 100644
index 00000000..fdad6889
--- /dev/null
+++ b/src/views/projectAdmin/zjsj/security/centerTop.vue
@@ -0,0 +1,14 @@
+<template>
+  <Card title="人员管理">
+    人员管理
+  </Card>
+</template>
+
+<script>
+import Card from '../components/Card.vue'
+export default {
+  components: { Card }
+}
+</script>
+
+<style></style>
diff --git a/src/views/projectAdmin/zjsj/security/index.vue b/src/views/projectAdmin/zjsj/security/index.vue
index ea4360ad..a9084991 100644
--- a/src/views/projectAdmin/zjsj/security/index.vue
+++ b/src/views/projectAdmin/zjsj/security/index.vue
@@ -1,9 +1,59 @@
 <template>
-  <div class="security">security</div>
+  <div class="security">
+    <div class="left">
+      <div class="top"><LeftTop /></div>
+      <div class="bottom"><LeftBottom /></div>
+    </div>
+    <div class="center">
+      <div class="top"><CenterTop /></div>
+      <div class="bottom"><CenterBottom /></div>
+    </div>
+    <div class="right"><RightTop /></div>
+  </div>
 </template>
 
 <script>
-export default {}
+import LeftTop from './leftTop.vue'
+import LeftBottom from './leftBottom.vue'
+import CenterTop from './centerTop.vue'
+import CenterBottom from './centerBottom.vue'
+import RightTop from './rightTop.vue'
+export default {
+  components: { LeftTop, LeftBottom, CenterTop, CenterBottom, RightTop }
+}
 </script>
 
-<style></style>
+<style lang="less" scoped>
+.security {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: space-between;
+  // background: url(../assets/temp/5.png) no-repeat;
+  // background-size: 100% 100%;
+  .left {
+    width: 20%;
+    height: 100%;
+    .top {
+      height: 60%;
+    }
+    .bottom {
+      height: 40%;
+    }
+  }
+  .center {
+    width: calc(60% - 40px);
+    height: 100%;
+    .top {
+      height: 65%;
+    }
+    .bottom {
+      height: 35%;
+    }
+  }
+  .right {
+    width: 20%;
+    height: 100%;
+  }
+}
+</style>
diff --git a/src/views/projectAdmin/zjsj/security/leftBottom.vue b/src/views/projectAdmin/zjsj/security/leftBottom.vue
new file mode 100644
index 00000000..f716c028
--- /dev/null
+++ b/src/views/projectAdmin/zjsj/security/leftBottom.vue
@@ -0,0 +1,14 @@
+<template>
+  <Card title="视频AI分析">
+    视频AI分析
+  </Card>
+</template>
+
+<script>
+import Card from '../components/Card.vue'
+export default {
+  components: { Card }
+}
+</script>
+
+<style></style>
diff --git a/src/views/projectAdmin/zjsj/security/leftTop.vue b/src/views/projectAdmin/zjsj/security/leftTop.vue
new file mode 100644
index 00000000..7e3bc781
--- /dev/null
+++ b/src/views/projectAdmin/zjsj/security/leftTop.vue
@@ -0,0 +1,14 @@
+<template>
+  <Card title="安全巡检">
+    安全巡检
+  </Card>
+</template>
+
+<script>
+import Card from '../components/Card.vue'
+export default {
+  components: { Card }
+}
+</script>
+
+<style></style>
diff --git a/src/views/projectAdmin/zjsj/security/rightTop.vue b/src/views/projectAdmin/zjsj/security/rightTop.vue
new file mode 100644
index 00000000..8206274c
--- /dev/null
+++ b/src/views/projectAdmin/zjsj/security/rightTop.vue
@@ -0,0 +1,14 @@
+<template>
+  <Card title="设备监控">
+    设备监控
+  </Card>
+</template>
+
+<script>
+import Card from '../components/Card.vue'
+export default {
+  components: { Card }
+}
+</script>
+
+<style></style>
diff --git a/src/views/projectAdmin/zjsj/sourse/index.vue b/src/views/projectAdmin/zjsj/sourse/index.vue
index f489e7f0..027573bd 100644
--- a/src/views/projectAdmin/zjsj/sourse/index.vue
+++ b/src/views/projectAdmin/zjsj/sourse/index.vue
@@ -1,9 +1,62 @@
 <template>
-  <div class="sourse">sourse</div>
+  <div class="sourse">
+    <!-- <div class="left">
+      <div class="top">
+        <LeftTop />
+      </div>
+      <div class="bottom">
+        <LeftBottom />
+      </div>
+    </div>
+    <div class="right">
+      <div class="top">
+        <RightTop />
+      </div>
+      <div class="bottom">
+        <RightBottom />
+      </div>
+    </div> -->
+  </div>
 </template>
 
 <script>
-export default {}
+import LeftTop from './leftTop.vue'
+import LeftBottom from './leftBottom.vue'
+import RightTop from './rightTop.vue'
+import RightBottom from './rightBottom.vue'
+export default {
+  components: { LeftTop, LeftBottom, RightTop, RightBottom }
+}
 </script>
 
-<style></style>
+<style lang="less" scoped>
+.sourse {
+  width: 100%;
+  height: 100%;
+  color: #fff;
+  display: flex;
+  justify-content: space-between;
+  background: url(../assets/temp/3.png) no-repeat;
+  background-size: 100% 100%;
+  .left {
+    width: 22%;
+    height: 100%;
+    .top {
+      height: 50%;
+    }
+    .bottom {
+      height: 50%;
+    }
+  }
+  .right {
+    width: calc(78% - 40px);
+    height: 100%;
+    .top {
+      height: 60%;
+    }
+    .bottom {
+      height: 40%;
+    }
+  }
+}
+</style>
diff --git a/src/views/projectAdmin/zjsj/sourse/leftBottom.vue b/src/views/projectAdmin/zjsj/sourse/leftBottom.vue
new file mode 100644
index 00000000..e438dabb
--- /dev/null
+++ b/src/views/projectAdmin/zjsj/sourse/leftBottom.vue
@@ -0,0 +1,14 @@
+<template>
+  <Card title="车辆冲洗抓拍">
+    车辆冲洗抓拍
+  </Card>
+</template>
+
+<script>
+import Card from '../components/Card.vue'
+export default {
+  components: { Card }
+}
+</script>
+
+<style></style>
diff --git a/src/views/projectAdmin/zjsj/sourse/leftTop.vue b/src/views/projectAdmin/zjsj/sourse/leftTop.vue
new file mode 100644
index 00000000..b27a1d69
--- /dev/null
+++ b/src/views/projectAdmin/zjsj/sourse/leftTop.vue
@@ -0,0 +1,14 @@
+<template>
+  <Card title="车辆管理">
+    车辆管理
+  </Card>
+</template>
+
+<script>
+import Card from '../components/Card.vue'
+export default {
+  components: { Card }
+}
+</script>
+
+<style></style>
diff --git a/src/views/projectAdmin/zjsj/sourse/rightBottom.vue b/src/views/projectAdmin/zjsj/sourse/rightBottom.vue
new file mode 100644
index 00000000..f6f393d9
--- /dev/null
+++ b/src/views/projectAdmin/zjsj/sourse/rightBottom.vue
@@ -0,0 +1,14 @@
+<template>
+  <Card title="检查统计">
+    检查统计
+  </Card>
+</template>
+
+<script>
+import Card from '../components/Card.vue'
+export default {
+  components: { Card }
+}
+</script>
+
+<style></style>
diff --git a/src/views/projectAdmin/zjsj/sourse/rightTop.vue b/src/views/projectAdmin/zjsj/sourse/rightTop.vue
new file mode 100644
index 00000000..30c1c9b0
--- /dev/null
+++ b/src/views/projectAdmin/zjsj/sourse/rightTop.vue
@@ -0,0 +1,14 @@
+<template>
+  <Card title="隐患趋势">
+    隐患趋势
+  </Card>
+</template>
+
+<script>
+import Card from '../components/Card.vue'
+export default {
+  components: { Card }
+}
+</script>
+
+<style></style>