diff --git a/src/views/projectAdmin/common/jChart/bar/JBarChart.vue b/src/views/projectAdmin/common/jChart/bar/JBarChart.vue
new file mode 100644
index 00000000..71c60199
--- /dev/null
+++ b/src/views/projectAdmin/common/jChart/bar/JBarChart.vue
@@ -0,0 +1,162 @@
+<template>
+  <div class="j-bar-chart" ref="jBarChart"></div>
+</template>
+
+<script>
+import echarts from 'echarts4'
+export default {
+  props: {
+    title: {
+      type: Object,
+      default: () => ({
+        text: ''
+      })
+    },
+    tooltip: {
+      type: Object,
+      default: () => ({ show: false })
+    },
+    grid: {
+      type: Array,
+      default: () => ['15%', '2%', '2%', '2%']
+    },
+    color: {
+      type: Array,
+      default: () => ['#5EC2D0', '#61D2B9', '#F67F51', '#7851F6']
+    },
+    xData: {
+      required: true,
+      type: Array,
+      default: () => []
+    },
+    yData: {
+      type: Array,
+      default: () => []
+    },
+    series: {
+      type: Array,
+      default: () => []
+    }
+  },
+  mounted() {
+    this.jBarChart = echarts.init(this.$refs.jBarChart)
+    this.createChart()
+  },
+  data() {
+    return { jBarChart: null }
+  },
+  watch: {
+    xData: {
+      handler(newVal, oldVal) {
+        if (newVal != oldVal) {
+          this.createChart()
+        }
+      },
+      deep: true
+    },
+    yData: {
+      handler(newVal, oldVal) {
+        if (newVal != oldVal) {
+          this.createChart()
+        }
+      },
+      deep: true
+    }
+  },
+  methods: {
+    createChart() {
+      const { title, tooltip, grid, color, xData, yData, series } = this
+      const configSeries = (series => {
+        if (series.length) {
+          return series.map(item => ({ name: item.name, type: 'bar', data: item.data, barWidth: 20, itemStyle: item.itemStyle }))
+        } else {
+          return [{ data: yData, type: 'bar', barWidth: 15 }]
+        }
+      })(series)
+
+      const option = {
+        title: {
+          text: title.text,
+          right: 20,
+          textStyle: {
+            fontSize: '14px',
+            color: '#5EC2D0',
+            fontWeight: 'normal'
+          }
+        },
+        legend: {
+          icon: 'circle',
+          top: 15,
+          left: 20,
+          itemWidth: 8,
+          textStyle: { color: '#fff' },
+          data: [{ name: '计划用料' }, { name: '实际用料' }]
+        },
+        tooltip,
+        grid: {
+          top: grid[0],
+          right: grid[1],
+          bottom: grid[2],
+          left: grid[3],
+          containLabel: true
+        },
+        color,
+        xAxis: {
+          type: 'category',
+          data: xData,
+          axisLine: {
+            show: true,
+            lineStyle: {
+              type: [5, 10]
+            }
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: '#fff'
+            }
+          },
+          axisTick: {
+            show: false
+          }
+        },
+        yAxis: {
+          type: 'value',
+          splitNumber: 4,
+          splitLine: {
+            show: true,
+            lineStyle: {
+              type: [5, 10],
+              color: '#323D50'
+            }
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              type: [5, 10]
+            }
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: '#fff'
+            }
+          },
+          axisTick: {
+            show: false
+          }
+        },
+        series: configSeries
+      }
+      this.jBarChart.setOption(option)
+    }
+  }
+}
+</script>
+
+<style>
+.j-bar-chart {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/views/projectAdmin/common/jChart/bar/JProgressChart.vue b/src/views/projectAdmin/common/jChart/bar/JProgressChart.vue
new file mode 100644
index 00000000..43e188a1
--- /dev/null
+++ b/src/views/projectAdmin/common/jChart/bar/JProgressChart.vue
@@ -0,0 +1,139 @@
+<template>
+  <div class="j-progress-chart" ref="JProgressChart"></div>
+</template>
+
+<script>
+import echarts from 'echarts4'
+export default {
+  props: {
+    grid: {
+      type: Array,
+      default: () => ['10', '8%', '10', '10']
+    },
+    seriesData: {
+      required: true,
+      type: Array,
+      default: () => []
+    },
+    yData: {
+      required: true,
+      type: Array,
+      default: () => []
+    }
+  },
+  mounted() {
+    this.JProgressChart = echarts.init(this.$refs.JProgressChart)
+    this.createChart()
+  },
+  data() {
+    return { JProgressChart: null }
+  },
+  watch:{
+    seriesData:{
+      handler(newVal,oldVal){
+         if(newVal != oldVal){
+          this.createChart();
+         }
+       },
+       deep:true,
+    }
+  },
+  methods: {
+    createChart() {
+      const { grid, seriesData, yData } = this
+      const max = Math.max(...seriesData)
+      const maxData = seriesData.map(item => max)
+      const option = {
+        grid: {
+          top: grid[0],
+          right: grid[1],
+          bottom: grid[2],
+          left: grid[3],
+          containLabel: true
+        },
+        xAxis: {
+          type: 'value',
+          axisLabel: {
+            formatter: () => ''
+          },
+          splitLine: {
+            show: false
+          },
+          axisLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          }
+        },
+        yAxis: {
+          type: 'category',
+          axisLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          },
+          data: yData,
+          axisLabel: {
+            textStyle: {
+              fontSize: 12,
+              color: '#fff'
+            }
+          }
+        },
+        series: [
+          {
+            type: 'bar',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+                { offset: 0, color: '#4A90E2' },
+                { offset: 1, color: '#4ADEE2' }
+              ]),
+              barBorderRadius: 3
+            },
+            label: {
+              show: true,
+              position: 'right',
+              color: 'white',
+              textStyle: {
+                fontSize: 15
+              }
+            },
+            data: seriesData,
+            barWidth: 13
+          },
+          {
+            type: 'bar',
+            itemStyle: {
+              color: 'rgba(255, 255, 255, 0.1)',
+              barBorderRadius: 3
+            },
+            // label: {
+            //   show: true,
+            //   position: 'right',
+            //   color: 'white',
+            //   textStyle: {
+            //     fontSize: 15
+            //   }
+            // },
+            barGap: '-100%',
+            barCategoryGap: '40%',
+            data: maxData,
+            barWidth: 13,
+            animation: false
+          }
+        ]
+      }
+      this.JProgressChart.setOption(option)
+    }
+  }
+}
+</script>
+
+<style>
+.j-progress-chart {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/views/projectAdmin/common/jChart/line/JLineChart.vue b/src/views/projectAdmin/common/jChart/line/JLineChart.vue
new file mode 100644
index 00000000..4762da1d
--- /dev/null
+++ b/src/views/projectAdmin/common/jChart/line/JLineChart.vue
@@ -0,0 +1,165 @@
+<template>
+  <div class="j-line-chart" ref="JLineChart"></div>
+</template>
+
+<script>
+import echarts from 'echarts4'
+export default {
+  props: {
+    title: {
+      type: Object,
+      default: () => ({ text: '' })
+    },
+    grid: {
+      type: Array,
+      default: () => ['12%', '2%', '6%', '1%']
+    },
+    color: {
+      type: Array,
+      default: () => ['#FAC915', '#ff6c7f', '#6ee4f0', '#F67F51', '#7851F6']
+    },
+    xData: {
+      required: true,
+      type: Array,
+      default: () => []
+    },
+    series: {
+      required: true,
+      type: Array,
+      default: () => [{}]
+    }
+  },
+  mounted() {
+    this.JLineChart = echarts.init(this.$refs.JLineChart)
+    this.createChart()
+  },
+  data() {
+    return { JLineChart: null }
+  },
+  watch: {
+    xData: {
+      handler(newVal, oldVal) {
+        if (newVal != oldVal) {
+          this.createChart()
+        }
+      },
+      deep: true,
+      immediate: true
+    },
+    series: {
+      handler(newVal, oldVal) {
+        if (newVal != oldVal) {
+          this.createChart()
+        }
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  methods: {
+    createChart() {
+      const { title, grid, color, xData, series } = this
+
+      const fmtSeries = (series => {
+        return series.map(item => ({
+          name: item.name,
+          type: 'line',
+          smooth: true,
+          data: item.data,
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              { offset: 0, color: item.areaColor[0] },
+              { offset: 1, color: item.areaColor[1] }
+            ])
+          },
+          showSymbol: item.showSymbol,
+          itemStyle: {
+            emphasis: item.emphasis
+          }
+        }))
+      })(series)
+
+      const option = {
+        title: {
+          text: title.text,
+          right: 20,
+          textStyle: {
+            fontSize: '14px',
+            color: '#5EC2D0',
+            fontWeight: 'normal'
+          }
+        },
+        legend: {
+          left: 20,
+          textStyle: {
+            color: '#fff'
+          }
+        },
+        grid: {
+          top: grid[0],
+          right: grid[1],
+          bottom: grid[2],
+          left: grid[3],
+          containLabel: true
+        },
+        tooltip: {
+          trigger: 'axis'
+        },
+        color,
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: xData,
+          axisTick: {
+            show: false
+          },
+          axisLabel: {
+            textStyle: {
+              color: 'rgba(255, 255, 255, .8)'
+            }
+          },
+          axisLine: {
+            lineStyle: {
+              type: [5, 10],
+              color: '#364252'
+            }
+          }
+        },
+        yAxis: {
+          type: 'value',
+          axisTick: {
+            show: false
+          },
+          axisLabel: {
+            textStyle: {
+              color: 'rgba(255, 255, 255, .8)'
+            }
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              type: [5, 10],
+              color: '#787E8A'
+            }
+          },
+          splitLine: {
+            lineStyle: {
+              type: [5, 10],
+              color: '#364252'
+            }
+          }
+        },
+        series: fmtSeries
+      }
+      this.JLineChart.setOption(option)
+    }
+  }
+}
+</script>
+
+<style>
+.j-line-chart {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/views/projectAdmin/common/jChart/pie/JNestedRingChart.vue b/src/views/projectAdmin/common/jChart/pie/JNestedRingChart.vue
new file mode 100644
index 00000000..103a9656
--- /dev/null
+++ b/src/views/projectAdmin/common/jChart/pie/JNestedRingChart.vue
@@ -0,0 +1,108 @@
+<template>
+  <div class="j-nested-ring-chart" ref="jNestedRingChart"></div>
+</template>
+
+<script>
+import echarts from 'echarts4'
+export default {
+  props: {
+    title: {
+      type: Object,
+      default: () => ({
+        text: '',
+        subTitle: '',
+        x: '48%',
+        y: '36%'
+      })
+    },
+    legend: {
+      type: Object,
+      default: () => ({})
+    },
+    series: {
+      required: true,
+      type: Array,
+      default: () => []
+    }
+  },
+  mounted() {
+    this.jNestedRingChart = echarts.init(this.$refs.jNestedRingChart)
+    this.createChart()
+  },
+  data() {
+    return {
+      jNestedRingChart: null
+    }
+  },
+  methods: {
+    createChart() {
+      const { title, legend, series } = this
+      const setSeries = (series => {
+        return series.map(item => ({
+          type: 'pie',
+          label: false,
+          center: ['50%', '50%'],
+          radius: item.radius || ['65%', '80%'],
+          roseType: item.roseType,
+          color: item.color,
+          data: item.data
+        }))
+      })(series)
+
+      const option = {
+        title: {
+          text: title.text,
+          subtext: title.subTitle,
+          x: title.x || '49%',
+          y: title.y || '40%',
+          show: true,
+          textAlign: 'center',
+          textStyle: {
+            fontSize: 20,
+            fontWeight: 'normal',
+            color: '#fff'
+          },
+          subtextStyle: {
+            fontSize: 16,
+            fontWeight: 'normal',
+            color: '#fff'
+          }
+        },
+        tooltip: {
+          trigger: 'item'
+        },
+        legend: {
+          show: legend.show === false ? false : true,
+          type: 'scroll',
+          orient: 'vertical',
+          right: 50,
+          top: 'center',
+          itemWidth: 10,
+          itemHeight: 10,
+          selectedMode: false,
+          icon: 'circle',
+          textStyle: {
+            color: '#ffffff',
+            fontSize: 14
+          },
+          formatter: legend.formatter
+        },
+        series: setSeries
+      }
+      this.jNestedRingChart.setOption(option)
+    }
+  },
+  watch: {
+    series() {
+      this.createChart()
+    }
+  }
+}
+</script>
+
+<style>
+.j-nested-ring-chart {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/views/projectAdmin/common/jChart/pie/JProblemChart.vue b/src/views/projectAdmin/common/jChart/pie/JProblemChart.vue
new file mode 100644
index 00000000..0ac1a408
--- /dev/null
+++ b/src/views/projectAdmin/common/jChart/pie/JProblemChart.vue
@@ -0,0 +1,123 @@
+<template>
+  <!-- 质量问题 -->
+  <div class="myChart" ref="myChart" />
+</template>
+
+<script>
+import echarts from "echarts4";
+export default {
+  props: {
+    title: {
+      type: Object,
+      default: () => ({
+        text: "",
+        subTitle: "",
+        x: "48%",
+        y: "36%"
+      })
+    },
+    data: {
+      type: Array,
+      default: () => [{ value: 1, name: "" }]
+    },
+    color: {
+      type: Array,
+      default: () => ["#3cabfd", "#57ec72", "#f294c6", "#f43a8d", "#6ee4f0"]
+    }
+  },
+  data() {
+    return {};
+  },
+  mounted() {
+    this.initMyChart();
+  },
+  methods: {
+    initMyChart() {
+      const myChart = echarts.init(this.$refs.myChart);
+      const option = {
+        title: {
+          x: this.title.x || "29%",
+          y: this.title.y || "43%",
+          show: true,
+          text: this.title.text,
+          subtext: this.title.subTitle,
+          textAlign: "center",
+          textStyle: {
+            fontSize: 20,
+            fontWeight: "normal",
+            color: "#fff"
+          },
+          subtextStyle: {
+            fontSize: 16,
+            fontWeight: "normal",
+            color: "#fff"
+          }
+        },
+        tooltip: {
+          trigger: "item"
+        },
+        legend: {
+          type: "scroll",
+          orient: "vertical",
+          right: 50,
+          top: "center",
+          itemWidth: 10, // 设置宽度
+          itemHeight: 10, // 设置高度
+          selectedMode: true,
+          icon: "circle",
+          textStyle: {
+            color: "#ffffff",
+            fontSize: 14
+          }
+        },
+        color: this.color,
+        series: [
+          {
+            type: "pie",
+            radius: ["30%", "25%"],
+            center: ["30%", "50%"],
+            labelLine: {
+              show: false
+            },
+            // x:'-20%',
+            color: ["#07162b", "#244e92", "#07162b", "#244e92"],
+            data: [{ value: 25 }, { value: 25 }, { value: 25 }, { value: 25 }]
+          },
+          {
+            type: "pie",
+            radius: ["50%", "65%"],
+            center: ["30%", "50%"],
+            avoidLabelOverlap: true,
+            label: {
+              show: false,
+              position: "center"
+            },
+            emphasis: {
+              label: {
+                show: false,
+                fontSize: "20",
+                color: "#fff",
+                fontWeight: "bold"
+              },
+              scaleSize: 12
+            },
+            labelLine: {
+              show: false
+            },
+            data: this.data
+          }
+        ]
+      };
+
+      myChart.setOption(option);
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.myChart {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/views/projectAdmin/common/jChart/pie/JRingChart.vue b/src/views/projectAdmin/common/jChart/pie/JRingChart.vue
new file mode 100644
index 00000000..35432e35
--- /dev/null
+++ b/src/views/projectAdmin/common/jChart/pie/JRingChart.vue
@@ -0,0 +1,114 @@
+<template>
+  <div class="j-ring-chart" ref="jRingChart"></div>
+</template>
+
+<script>
+import echarts from 'echarts4'
+export default {
+  props: {
+    data: {
+      type: Array,
+      default: () => [{ value: 1, name: '' }]
+    },
+    color: {
+      type: Array,
+      default: () => ['#5181F6', '#61D2B9', '#F67F51', '#7851F6']
+    },
+    title: {
+      type: Object,
+      default: () => ({
+        text: '',
+        subTitle: '',
+        x: '48%',
+        y: '36%'
+      })
+    },
+    radius: {
+      type: Array,
+      default: () => ['65%', '80%']
+    }
+  },
+  mounted() {
+    this.createRingChart()
+  },
+  watch:{
+    data:{
+      handler(newVal,oldVal){
+         if(newVal != oldVal){
+          this.createRingChart();
+         }
+       },
+       deep:true,
+       immediate:true,
+    },
+    title:{
+      handler(newVal,oldVal){
+         if(newVal != oldVal){
+          this.createRingChart();
+         }
+       },
+       deep:true,
+       immediate:true,
+    }
+  },
+  methods: {
+    createRingChart() {
+      const jRingChart = echarts.init(this.$refs.jRingChart)
+      const { title } = this
+      const option = {
+        color: this.color,
+        title: {
+          show: true,
+          text: title.text,
+          x: title.x || '48%',
+          y: title.y || '36%',
+          z: 5,
+          textAlign: 'center',
+          textStyle: {
+            color: 'rgba(255, 255, 255, 1)',
+            fontSize: 20
+          },
+          subtext: title.subTitle,
+          subtextStyle: {
+            color: 'rgba(255, 255, 255, 0.8)',
+            fontSize: 13
+          }
+        },
+        grid: {
+          right: 0
+        },
+        legend: {
+          show: false
+        },
+        series: [
+          {
+            name: '',
+            type: 'pie',
+            radius: this.radius,
+            avoidLabelOverlap: false,
+            hoverAnimation: false,
+            label: {
+              show: false,
+              position: 'center'
+            },
+            labelLine: {
+              show: false
+            },
+            data: this.data
+          }
+        ]
+      }
+
+      console.log(option, '草')
+      jRingChart.setOption(option)
+    }
+  }
+}
+</script>
+
+<style>
+.j-ring-chart {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/views/projectAdmin/zjsj/assets/images/sourse/bg-car-count.png b/src/views/projectAdmin/zjsj/assets/images/sourse/bg-car-count.png
new file mode 100644
index 00000000..6181af16
Binary files /dev/null and b/src/views/projectAdmin/zjsj/assets/images/sourse/bg-car-count.png differ
diff --git a/src/views/projectAdmin/zjsj/cim/index.vue b/src/views/projectAdmin/zjsj/cim/index.vue
index cb58eb39..4fa17a12 100644
--- a/src/views/projectAdmin/zjsj/cim/index.vue
+++ b/src/views/projectAdmin/zjsj/cim/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="cim">
-    <!-- <div class="between">
+    <div class="between">
       <div class="top">
         <LeftTop />
       </div>
@@ -16,7 +16,7 @@
       <div class="bottom">
         <RightBottom />
       </div>
-    </div> -->
+    </div>
   </div>
 </template>
 
@@ -37,8 +37,8 @@ export default {
   color: #fff;
   display: flex;
   justify-content: space-between;
-  background: url(../assets/temp/2.png) no-repeat;
-  background-size: 100% 100%;
+  // background: url(../assets/temp/2.png) no-repeat;
+  // background-size: 100% 100%;
   .between {
     width: 20%;
     height: 100%;
@@ -52,7 +52,7 @@ export default {
   .center {
     width: calc(60% - 40px);
     height: 100%;
-    background: skyblue;
+    border: 1px solid skyblue;
   }
 }
 </style>
diff --git a/src/views/projectAdmin/zjsj/cim/leftBottom.vue b/src/views/projectAdmin/zjsj/cim/leftBottom.vue
index 74ea4220..f89fe298 100644
--- a/src/views/projectAdmin/zjsj/cim/leftBottom.vue
+++ b/src/views/projectAdmin/zjsj/cim/leftBottom.vue
@@ -1,6 +1,8 @@
 <template>
   <Card title="倾斜摄影">
-    倾斜摄影
+    <div class="videos">
+      <div class="video" v-for="i in 6" :key="i"></div>
+    </div>
   </Card>
 </template>
 
@@ -11,4 +13,19 @@ export default {
 }
 </script>
 
-<style></style>
+<style lang="less" scoped>
+.videos {
+  box-sizing: border-box;
+  padding-top: 10px;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  .video {
+    width: 48%;
+    height: 30%;
+    border: 1px solid skyblue;
+  }
+}
+</style>
diff --git a/src/views/projectAdmin/zjsj/cim/leftTop.vue b/src/views/projectAdmin/zjsj/cim/leftTop.vue
index 7ef1bb86..e93d7934 100644
--- a/src/views/projectAdmin/zjsj/cim/leftTop.vue
+++ b/src/views/projectAdmin/zjsj/cim/leftTop.vue
@@ -1,14 +1,63 @@
 <template>
   <Card title="BIM协同">
-    BIM协同
+    <div class="table">
+      <div class="row">
+        <div class="td">规划报批</div>
+        <div class="td">施工图审查</div>
+        <div class="td">竣工验收</div>
+      </div>
+      <div class="row" :class="{ warning: !row[0] }" v-for="(row, i) in list" :key="i">
+        <div class="td">{{ row[0] ? '符合' : '不符合' }}</div>
+        <div class="td">{{ row[1] ? '符合' : '不符合' }}</div>
+        <div class="td">{{ row[2] ? '已验收' : '未验收' }}</div>
+      </div>
+    </div>
   </Card>
 </template>
 
 <script>
 import Card from '../components/Card.vue'
 export default {
-  components: { Card }
+  components: { Card },
+  data() {
+    const list = new Array(9).fill(0).map((item, index) => new Array(3).fill(0).map(() => (index === 3 ? 0 : 1)))
+    return {
+      list
+    }
+  },
+  methods: {}
 }
 </script>
 
-<style></style>
+<style lang="less" scoped>
+.table {
+  box-sizing: border-box;
+  padding: 20px 10px 0;
+  width: 100%;
+  height: 100%;
+  .row {
+    margin-bottom: 12px;
+    height: 22px;
+    line-height: 22px;
+    font-size: 12px;
+    display: flex;
+    .td {
+      flex: 1;
+      text-align: center;
+    }
+    &:nth-child(1) {
+      font-size: 14px;
+      color: #67d4d9;
+    }
+    &.warning {
+      background: linear-gradient(90deg, #a45133, #a4513338);
+      &::before {
+        content: '';
+        width: 4px;
+        height: 100%;
+        background-color: #e7622a;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/projectAdmin/zjsj/cim/rightBottom.vue b/src/views/projectAdmin/zjsj/cim/rightBottom.vue
index 40296e6d..4a48ecd8 100644
--- a/src/views/projectAdmin/zjsj/cim/rightBottom.vue
+++ b/src/views/projectAdmin/zjsj/cim/rightBottom.vue
@@ -1,14 +1,82 @@
 <template>
   <Card title="模型外审">
-    模型外审
+    <div class="chart">
+      <JNestedRingChart :title="{ text: '73', subTitle: '问题总数' }" :series="series" :legend="{ show: false }" />
+    </div>
+    <div class="legend">
+      <div class="legend-item">未查看</div>
+      <div class="legend-item">已查看</div>
+      <div class="legend-item">已解决</div>
+      <div class="legend-item">已回复</div>
+    </div>
   </Card>
 </template>
 
 <script>
 import Card from '../components/Card.vue'
+import JNestedRingChart from '../../common/jChart/pie/JNestedRingChart.vue'
 export default {
-  components: { Card }
+  components: { Card, JNestedRingChart },
+  data() {
+    return {
+      series: [
+        {
+          roseType: 'area',
+          radius: ['58%', '52%'],
+          color: ['#0B1B35', '#4A8C9C'],
+          data: [30, 40, 30, 40]
+        },
+        {
+          radius: ['65%', '82%'],
+          color: ['#FFFFFF', '#E86129', '#FFC303', '#6EE4F0'],
+          data: [
+            { value: 11, name: '未查看' },
+            { value: 11, name: '已查看' },
+            { value: 11, name: '已解决' },
+            { value: 11, name: '已回复' }
+          ]
+        }
+      ]
+    }
+  }
 }
 </script>
 
-<style></style>
+<style lang="less" scoped>
+.chart {
+  box-sizing: border-box;
+  padding-top: 20px;
+  height: 70%;
+}
+.legend {
+  margin-top: 30px;
+  display: flex;
+  justify-content: space-around;
+  flex-wrap: wrap;
+  .legend-item {
+    width: 45%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    &::before {
+      content: '';
+      margin-right: 8px;
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+    }
+    &:nth-child(1)::before {
+      background-color: #ffffff;
+    }
+    &:nth-child(2)::before {
+      background-color: #e86129;
+    }
+    &:nth-child(3)::before {
+      background-color: #ffc303;
+    }
+    &:nth-child(4)::before {
+      background-color: #6ee4f0;
+    }
+  }
+}
+</style>
diff --git a/src/views/projectAdmin/zjsj/cim/rightTop.vue b/src/views/projectAdmin/zjsj/cim/rightTop.vue
index 81d33233..9ff8e77f 100644
--- a/src/views/projectAdmin/zjsj/cim/rightTop.vue
+++ b/src/views/projectAdmin/zjsj/cim/rightTop.vue
@@ -1,14 +1,74 @@
 <template>
   <Card title="模型内审">
-    模型内审
+    <div class="chart">
+      <JNestedRingChart :title="{ text: '33', subTitle: '问题总数' }" :series="series" :legend="{ show: false }" />
+    </div>
+    <div class="legend">
+      <div class="legend-item">未查看</div>
+      <div class="legend-item">未解决</div>
+      <div class="legend-item">已解决</div>
+    </div>
   </Card>
 </template>
 
 <script>
 import Card from '../components/Card.vue'
+import JNestedRingChart from '../../common/jChart/pie/JNestedRingChart.vue'
 export default {
-  components: { Card }
+  components: { Card, JNestedRingChart },
+  data() {
+    return {
+      series: [
+        {
+          roseType: 'area',
+          radius: ['58%', '52%'],
+          color: ['#0B1B35', '#4A8C9C'],
+          data: [30, 40, 30, 40]
+        },
+        {
+          radius: ['65%', '82%'],
+          color: ['#E86129', '#FFC303', '#6EE4F0'],
+          data: [
+            { value: 11, name: '未查看' },
+            { value: 11, name: '未解决' },
+            { value: 11, name: '已解决' }
+          ]
+        }
+      ]
+    }
+  }
 }
 </script>
 
-<style></style>
+<style lang="less" scoped>
+.chart {
+  box-sizing: border-box;
+  padding-top: 20px;
+  height: 70%;
+}
+.legend {
+  margin-top: 30px;
+  display: flex;
+  justify-content: space-around;
+  .legend-item {
+    display: flex;
+    align-items: center;
+    &::before {
+      content: '';
+      margin-right: 8px;
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+    }
+    &:nth-child(1)::before {
+      background-color: #e86129;
+    }
+    &:nth-child(2)::before {
+      background-color: #ffc303;
+    }
+    &:nth-child(3)::before {
+      background-color: #6ee4f0;
+    }
+  }
+}
+</style>
diff --git a/src/views/projectAdmin/zjsj/progress/index.vue b/src/views/projectAdmin/zjsj/progress/index.vue
index 1f8188f4..1ba20a3b 100644
--- a/src/views/projectAdmin/zjsj/progress/index.vue
+++ b/src/views/projectAdmin/zjsj/progress/index.vue
@@ -6,14 +6,34 @@
         <TopRight />
       </div>
     </div>
-    <div class="bottom"></div>
+    <div class="bottom">
+      <div class="progress-item" :class="{ success: i < 6 }" v-for="(v, i) in progress" :key="i">
+        <div class="date">{{ v.date }}</div>
+        <div class="name">{{ v.name }}</div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 import TopRight from './topRight.vue'
 export default {
-  components: { TopRight }
+  components: { TopRight },
+  data() {
+    return {
+      progress: [
+        { name: '基础工程', date: '2022-02-02' },
+        { name: '主体结构施工', date: '2022-02-02' },
+        { name: '屋面工程', date: '2022-02-02' },
+        { name: '机械设备安拆工程', date: '2022-02-02' },
+        { name: '室内装饰装修工程', date: '2022-02-02' },
+        { name: '室内装饰装修工程', date: '2022-02-02' },
+        { name: '室内装饰装修工程', date: '2022-02-02' },
+        { name: '室内装饰装修工程', date: '2022-02-02' },
+        { name: '室内装饰装修工程', date: '2022-02-02' }
+      ]
+    }
+  }
 }
 </script>
 
@@ -39,7 +59,41 @@ export default {
   }
   .bottom {
     height: 26%;
-    border: 1px solid skyblue;
+    color: #fff;
+    display: flex;
+    align-items: center;
+    .progress-item {
+      position: relative;
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      &::before {
+        content: '';
+        width: 8px;
+        height: 8px;
+        background-color: #fff;
+        border: 1px solid #2de1fa;
+        border-radius: 50%;
+      }
+      &:not(:last-child)::after {
+        content: '';
+        position: absolute;
+        left: 50%;
+        bottom: calc(100% - 5px);
+        width: 100%;
+        height: 1px;
+        background-color: #ccc;
+      }
+      &.success::after {
+        background-color: #2de1fa;
+      }
+      .date {
+        margin: 4px 0;
+        font-size: 12px;
+        color: #ddd;
+      }
+    }
   }
 }
 </style>
diff --git a/src/views/projectAdmin/zjsj/progress/topRight.vue b/src/views/projectAdmin/zjsj/progress/topRight.vue
index 0a41b0bc..fbba0f01 100644
--- a/src/views/projectAdmin/zjsj/progress/topRight.vue
+++ b/src/views/projectAdmin/zjsj/progress/topRight.vue
@@ -1,14 +1,83 @@
 <template>
   <Card title="进度任务">
-    进度任务
+    <div class="tabs">
+      <div class="tab checked">待办事项</div>
+      <div class="tab">未来提醒</div>
+    </div>
+    <div class="list">
+      <vue-scroll>
+        <div class="list-item" v-for="(v, i) in todos" :key="i">
+          <div class="todo">{{ v.todo }}</div>
+          <div class="startTime">
+            <span class="grey">计划开始时间：</span><span class="blue">{{ v.startTime }}</span>
+          </div>
+          <div class="endTime">
+            <span class="grey">计划结束时间：</span><span class="blue">{{ v.endTime }}</span>
+          </div>
+          <div class="delay orange">已延期{{ v.delay }}天</div>
+        </div>
+      </vue-scroll>
+    </div>
   </Card>
 </template>
 
 <script>
 import Card from '../components/Card.vue'
 export default {
-  components: { Card }
+  components: { Card },
+  data() {
+    return {
+      todos: [
+        { todo: '大罗勒密河', startTime: '2022-02-01', endTime: '2022-02-01', delay: 2 },
+        { todo: '大罗勒密河', startTime: '2022-02-01', endTime: '2022-02-01', delay: 2 },
+        { todo: '大罗勒密河', startTime: '2022-02-01', endTime: '2022-02-01', delay: 2 },
+        { todo: '大罗勒密河', startTime: '2022-02-01', endTime: '2022-02-01', delay: 2 },
+        { todo: '大罗勒密河', startTime: '2022-02-01', endTime: '2022-02-01', delay: 2 }
+      ]
+    }
+  }
 }
 </script>
 
-<style></style>
+<style lang="less" scoped>
+.tabs {
+  display: flex;
+  color: #fff;
+  .tab {
+    width: 100px;
+    height: 40px;
+    line-height: 40px;
+    text-align: center;
+    cursor: pointer;
+    &.checked {
+      color: #2de1fa;
+    }
+  }
+}
+.list {
+  padding-left: 20px;
+  height: calc(100% - 40px);
+  color: #fff;
+  .list-item {
+    &:not(:last-child) {
+      margin-bottom: 30px;
+    }
+    div {
+      &:not(:first-child) {
+        font-size: 12px;
+        margin-top: 6px;
+      }
+    }
+  }
+}
+
+.grey {
+  color: #ccc;
+}
+.blue {
+  color: #2de1fa;
+}
+.orange {
+  color: #f56c36;
+}
+</style>
diff --git a/src/views/projectAdmin/zjsj/sourse/components/CarTable.vue b/src/views/projectAdmin/zjsj/sourse/components/CarTable.vue
new file mode 100644
index 00000000..0aaa89fe
--- /dev/null
+++ b/src/views/projectAdmin/zjsj/sourse/components/CarTable.vue
@@ -0,0 +1,59 @@
+<template>
+  <div class="table">
+    <div class="thead">
+      <div class="row">
+        <div>抓拍照片</div>
+        <div>车辆信息</div>
+        <div>抓拍时间</div>
+      </div>
+    </div>
+    <div class="tbody">
+      <vue-scroll>
+        <div class="row" v-for="i in 9" :key="i">
+          <div><img src="" /></div>
+          <div class="carNum">粤A455632</div>
+          <div class="datetime">2011-02-03 15:30</div>
+        </div>
+      </vue-scroll>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style lang="less" scoped>
+.table {
+  width: 100%;
+  height: 100%;
+  .thead {
+    padding-bottom: 12px;
+    color: #59b2c0;
+  }
+  .tbody {
+    height: calc(100% - 30px);
+  }
+  .row {
+    display: flex;
+    align-items: center;
+    &:not(:last-child) {
+      margin-bottom: 12px;
+    }
+    div {
+      text-align: center;
+      &:last-child {
+        width: 160px;
+      }
+      &:not(:last-child) {
+        flex: 1;
+      }
+      img {
+        width: 80px;
+        height: 50px;
+        background: skyblue;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/projectAdmin/zjsj/sourse/components/MaterialTable.vue b/src/views/projectAdmin/zjsj/sourse/components/MaterialTable.vue
new file mode 100644
index 00000000..d9c3fb5a
--- /dev/null
+++ b/src/views/projectAdmin/zjsj/sourse/components/MaterialTable.vue
@@ -0,0 +1,73 @@
+<template>
+  <div class="material-table">
+    <div class="title">物料进场</div>
+    <div class="table">
+      <div class="thead">
+        <div class="row">
+          <div>物料类型</div>
+          <div>重量(KG)</div>
+          <div>时间</div>
+        </div>
+      </div>
+      <div class="tbody">
+        <vue-scroll>
+          <div class="row" v-for="i in 9" :key="i">
+            <div>水泥</div>
+            <div>35</div>
+            <div>2011-02-03 15:30</div>
+          </div>
+        </vue-scroll>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style lang="less" scoped>
+.material-table {
+  width: 100%;
+  height: 100%;
+  .title {
+    height: 50px;
+    line-height: 40px;
+    font-size: 20px;
+    color: #6de3ef;
+    text-align: center;
+  }
+  .table {
+    width: 100%;
+    height: calc(100% - 50px);
+    .thead {
+      padding-bottom: 12px;
+      color: #59b2c0;
+    }
+    .tbody {
+      height: calc(100% - 30px);
+    }
+    .row {
+      display: flex;
+      align-items: center;
+      &:not(:last-child) {
+        margin-bottom: 12px;
+      }
+      div {
+        text-align: center;
+        &:last-child {
+          width: 160px;
+        }
+        &:not(:last-child) {
+          flex: 1;
+        }
+        img {
+          width: 80px;
+          height: 50px;
+          background: skyblue;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/projectAdmin/zjsj/sourse/index.vue b/src/views/projectAdmin/zjsj/sourse/index.vue
index 027573bd..250e8699 100644
--- a/src/views/projectAdmin/zjsj/sourse/index.vue
+++ b/src/views/projectAdmin/zjsj/sourse/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="sourse">
-    <!-- <div class="left">
+    <div class="left">
       <div class="top">
         <LeftTop />
       </div>
@@ -15,7 +15,7 @@
       <div class="bottom">
         <RightBottom />
       </div>
-    </div> -->
+    </div>
   </div>
 </template>
 
@@ -36,8 +36,8 @@ export default {
   color: #fff;
   display: flex;
   justify-content: space-between;
-  background: url(../assets/temp/3.png) no-repeat;
-  background-size: 100% 100%;
+  // background: url(../assets/temp/3.png) no-repeat;
+  // background-size: 100% 100%;
   .left {
     width: 22%;
     height: 100%;
diff --git a/src/views/projectAdmin/zjsj/sourse/leftBottom.vue b/src/views/projectAdmin/zjsj/sourse/leftBottom.vue
index e438dabb..c6804fae 100644
--- a/src/views/projectAdmin/zjsj/sourse/leftBottom.vue
+++ b/src/views/projectAdmin/zjsj/sourse/leftBottom.vue
@@ -1,14 +1,23 @@
 <template>
   <Card title="车辆冲洗抓拍">
-    车辆冲洗抓拍
+    <div class="list">
+      <CarTable />
+    </div>
   </Card>
 </template>
 
 <script>
 import Card from '../components/Card.vue'
+import CarTable from './components/CarTable.vue'
 export default {
-  components: { Card }
+  components: { Card, CarTable }
 }
 </script>
 
-<style></style>
+<style lang="less" scoped>
+.list {
+  box-sizing: border-box;
+  padding-top: 20px;
+  height: 100%;
+}
+</style>
diff --git a/src/views/projectAdmin/zjsj/sourse/leftTop.vue b/src/views/projectAdmin/zjsj/sourse/leftTop.vue
index b27a1d69..a0bcea67 100644
--- a/src/views/projectAdmin/zjsj/sourse/leftTop.vue
+++ b/src/views/projectAdmin/zjsj/sourse/leftTop.vue
@@ -1,14 +1,50 @@
 <template>
   <Card title="车辆管理">
-    车辆管理
+    <div class="car-count">
+      今日入场<span>234</span>辆
+    </div>
+    <div class="car-count">
+      今日出场<span>126</span>辆
+    </div>
+    <div class="list">
+      <CarTable />
+    </div>
   </Card>
 </template>
 
 <script>
 import Card from '../components/Card.vue'
+import CarTable from './components/CarTable.vue'
 export default {
-  components: { Card }
+  components: { Card, CarTable }
 }
 </script>
 
-<style></style>
+<style lang="less" scoped>
+.car-count {
+  padding-top: 10px;
+  padding-left: 30px;
+  font-size: 18px;
+  color: #59b2c0;
+  display: flex;
+  align-items: center;
+  span {
+    margin-left: 40px;
+    margin-right: 20px;
+    width: 140px;
+    height: 50px;
+    line-height: 60px;
+    text-align: center;
+    font-size: 28px;
+    font-weight: bold;
+    color: #fff;
+    background: url(../assets/images/sourse/bg-car-count.png) no-repeat;
+    background-size: 100% 100%;
+  }
+}
+.list {
+  box-sizing: border-box;
+  padding-top: 20px;
+  height: calc(100% - 120px);
+}
+</style>
diff --git a/src/views/projectAdmin/zjsj/sourse/rightBottom.vue b/src/views/projectAdmin/zjsj/sourse/rightBottom.vue
index f6f393d9..52dc8fd0 100644
--- a/src/views/projectAdmin/zjsj/sourse/rightBottom.vue
+++ b/src/views/projectAdmin/zjsj/sourse/rightBottom.vue
@@ -1,14 +1,28 @@
 <template>
   <Card title="检查统计">
-    检查统计
+    <div class="list-group">
+      <div class="list"><MaterialTable title="物料进场" /></div>
+      <div class="list"><MaterialTable title="物料出场" /></div>
+      <div class="list"><MaterialTable title="材料检验" /></div>
+    </div>
   </Card>
 </template>
 
 <script>
 import Card from '../components/Card.vue'
+import MaterialTable from './components/MaterialTable.vue'
 export default {
-  components: { Card }
+  components: { Card, MaterialTable }
 }
 </script>
 
-<style></style>
+<style lang="less" scoped>
+.list-group {
+  height: 100%;
+  display: flex;
+  justify-content: space-around;
+  .list {
+    width: 28%;
+  }
+}
+</style>
diff --git a/src/views/projectAdmin/zjsj/sourse/rightTop.vue b/src/views/projectAdmin/zjsj/sourse/rightTop.vue
index 30c1c9b0..c894b927 100644
--- a/src/views/projectAdmin/zjsj/sourse/rightTop.vue
+++ b/src/views/projectAdmin/zjsj/sourse/rightTop.vue
@@ -1,13 +1,42 @@
 <template>
   <Card title="隐患趋势">
-    隐患趋势
+    <JBarChart :tooltip="{}" :xData="xData" :series="series" />
   </Card>
 </template>
 
 <script>
 import Card from '../components/Card.vue'
+import JBarChart from '../../common/jChart/bar/JBarChart.vue'
+import echarts from 'echarts4'
 export default {
-  components: { Card }
+  components: { Card, JBarChart },
+  data() {
+    return {
+      xData: new Array(12).fill('破产倒闭').map((v, i) => i + 1 + '月'),
+      series: [
+        {
+          name: '计划用料',
+          data: [23, 44, 63, 12, 45, 78, 34, 67, 32, 44, 13, 75],
+          itemStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              { offset: 0, color: '#6de1ee' },
+              { offset: 1, color: '#6de1ee24' }
+            ])
+          }
+        },
+        {
+          name: '实际用料',
+          data: [44, 13, 86, 24, 43, 78, 12, 32, 45, 82, 21, 76],
+          itemStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              { offset: 0, color: '#DE5F2A' },
+              { offset: 1, color: '#DE5F2A24' }
+            ])
+          }
+        }
+      ]
+    }
+  }
 }
 </script>