diff --git a/src/views/projectAdmin/dataBoard/projectHuScreen/planProgress/leftBottom.vue b/src/views/projectAdmin/dataBoard/projectHuScreen/planProgress/leftBottom.vue
index 1557f782..bd509cf9 100644
--- a/src/views/projectAdmin/dataBoard/projectHuScreen/planProgress/leftBottom.vue
+++ b/src/views/projectAdmin/dataBoard/projectHuScreen/planProgress/leftBottom.vue
@@ -1,58 +1,45 @@
 <template>
-<!-- 质量问题 -->
-<div class="containerBox">
-    <div class="titleTxt">{{ title }}</div>
-    <div class="myChart">
-      <problemChart 
-      :title="{ text: 654, subTitle: '本周总任务' ,y:'35%'}" 
-      :color="['#3cabfd','#57ec72','#f294c6','#f43a8d','#6ee4f0']"
-      :data="[
-            { value: 45, name: '未开始' },
-            { value: 5, name: '未开始延期' },
-            { value: 15, name: '进行中' },
-            { value: 10, name: '执行中延期' },
-            { value: 45, name: '完成' }
-          ]" />
-    </div>
-</div>
+  <!-- 质量问题 -->
+  <Card :title="title">
+    <JNestedRingChart :title="{ text: 654, subTitle: '本周总任务' ,y:'35%' }" :series="series" />
+  </Card>
 </template>
 
 <script>
-import problemChart from '../jChart/pie/JProblemChart'
+import Card from "../components/Card.vue";
+import JNestedRingChart from "../jChart/pie/JNestedRingChart.vue";
 export default {
-components:{problemChart},
+  components: { Card, JNestedRingChart },
   props: {
     title: {
       type: String,
-      default: "default title"
+      default: ""
     }
   },
   data() {
     return {
-
+      series: [
+        {
+          color: ["#3cabfd", "#57ec72", "#f294c6", "#f43a8d", "#6ee4f0"],
+          data: [
+            { value: 45, name: "未开始" },
+            { value: 5, name: "未开始延期" },
+            { value: 15, name: "进行中" },
+            { value: 10, name: "执行中延期" },
+            { value: 45, name: "完成" }
+          ]
+        },
+        {
+          roseType: "area",
+          radius: ["58%", "54%"],
+          color: ["#0B1B35", "#244D8F"],
+          data: [30, 40, 30, 40]
+        }
+      ]
     };
-  },
-
-
-}
+  }
+};
 </script>
 
-<style lang="less" scoped>
-.containerBox {
-  width: 100%;
-  height: 100%;
-  border: 1px solid #0081c3;
-
-  .titleTxt {
-    font-size: 18px;
-    color: #6ee4f0;
-    margin-top: 5px;
-    margin-left: 5px;
-  }
-  .myChart{
-    width: 100%;
-    height: 90%;
-  }
-}
-</style>
+<style lang="less" scoped></style>
 
diff --git a/src/views/projectAdmin/dataBoard/projectHuScreen/projectHuli/hiddenDanger.vue b/src/views/projectAdmin/dataBoard/projectHuScreen/projectHuli/hiddenDanger.vue
index 5f55d628..e8464e05 100644
--- a/src/views/projectAdmin/dataBoard/projectHuScreen/projectHuli/hiddenDanger.vue
+++ b/src/views/projectAdmin/dataBoard/projectHuScreen/projectHuli/hiddenDanger.vue
@@ -1,126 +1,44 @@
 <template>
-<!-- 安全隐患 -->
-  <div class="hiddenDanger">
-    <div class="titleTxt">{{ title }}</div>
-    <div class="myChart" ref="myChart" />
-  </div>
+<!-- 质量问题 -->
+  <Card :title="title">
+    <JNestedRingChart :title="{ y:'30%' , subTitle: '隐患类别' }" :series="series" />
+  </Card>
 </template>
 
 <script>
-import echarts from "echarts4";
+import Card from '../components/Card.vue'
+import JNestedRingChart from '../jChart/pie/JNestedRingChart.vue'
 export default {
-  data() {
-    return {
-
-    };
-  },
+  components: { Card, JNestedRingChart },
   props: {
     title: {
       type: String,
-      default: "default title"
+      default: ''
     }
   },
-  mounted(){
-    this.initMyChart();
-  },
-  methods:{
-    initMyChart(){
-        const myChart = echarts.init(this.$refs.myChart);
-        const option = {
-        title: {
-          subtext: "隐患类别",
-          textAlign: 'center',
-          x: '29%',
-          y: '43%',
-          textStyle: {
-            fontSize: 20,
-            fontWeight: 'normal',
-            color: '#fff',
-          },
-          subtextStyle: {
-            fontSize: 16,
-            fontWeight: 'normal',
-            color: '#fff'
-          },
+  data() {
+    return {
+      series: [
+        {
+          color: ['#3cabfd', '#58ec72', '#f43a8d', '#f294c6', '#6ee4f0',],
+          data: [
+            { value: 45, name: '文明施工' },
+            { value: 5, name: '未分类' },
+            { value: 15, name: '安全管理' },
+            { value: 10, name: '施工安全' },
+            { value: 45, name: '基础工程' },
+          ]
         },
-        tooltip: {
-          trigger: "item",
-        },
-        legend: {
-          type: 'scroll',
-          orient: 'vertical',
-          right: 90,
-          top: 'center',
-          itemWidth: 10, // 设置宽度
-          itemHeight: 10, // 设置高度
-          selectedMode: true,
-          icon: 'circle',
-          textStyle: {
-            color: '#ffffff',
-            fontSize: 14,
-          }
-        },
-        color: ['#3cabfd', '#58ec72', '#f294c6', '#f43a8d', '#6ee4f0',],
-        series: [
-          {
-            type: "pie",
-            radius: ["50%", "65%"],
-            center: ['30%', '50%'],
-            avoidLabelOverlap: true,
-            // itemStyle: {
-            //   borderRadius: 8,
-            //   borderColor: '#11316c',
-            //   borderWidth: 6,
-            // },
-            label: {
-              show: false,
-              position: "center",
-            },
-            emphasis: {
-              label: {
-                show: false,
-                fontSize: "20",
-                color: '#fff',
-                fontWeight: "bold",
-              },
-              scaleSize: 12,
-            },
-            labelLine: {
-              show: false,
-            },
-            data: [
-              { value: 15, name: "文明施工" },
-              { value: 2, name: "未分类" },
-              { value: 5, name: "安全管理" },
-              { value: 6, name: "施工安全" },
-              { value: 20, name: "基础工程" },
-            ],
-          },
-        ],
-      };
-
-      myChart.setOption(option);
+        {
+          roseType: 'area',
+          radius: ['58%', '54%'],
+          color: ['#0B1B35', '#244D8F'],
+          data: [30, 40, 30, 40]
+        }
+      ]
     }
   }
 }
 </script>
 
-
-<style lang="less" scoped>
-.hiddenDanger {
-  width: 100%;
-  height: 100%;
-  border: 1px solid #0081c3;
-
-  .titleTxt {
-    font-size: 18px;
-    color: #6ee4f0;
-    margin-top: 5px;
-    margin-left: 5px;
-  }
-  .myChart{
-    width: 100%;
-    height: 100%;
-  }
-}
-</style>
\ No newline at end of file
+<style lang="less" scoped></style>
diff --git a/src/views/projectAdmin/dataBoard/projectHuScreen/projectHuli/qualityProblem.vue b/src/views/projectAdmin/dataBoard/projectHuScreen/projectHuli/qualityProblem.vue
index 6bc8e5e1..e8464e05 100644
--- a/src/views/projectAdmin/dataBoard/projectHuScreen/projectHuli/qualityProblem.vue
+++ b/src/views/projectAdmin/dataBoard/projectHuScreen/projectHuli/qualityProblem.vue
@@ -1,50 +1,44 @@
 <template>
 <!-- 质量问题 -->
-  <div class="containerBox">
-    <div class="titleTxt">{{ title }}</div>
-    <div class="myChart">
-      <problemChart 
-      :title="{  subTitle: '隐患类别', y: '30%'}" 
-      :color="['#3cabfd', '#58ec72', '#f294c6', '#f43a8d', '#6ee4f0']" 
-      :data="[
-            { value: 15, name: '文明施工' },
-            { value: 2, name: '未分类' },
-            { value: 5, name: '安全管理' },
-            { value: 6, name: '施工安全' },
-            { value: 20, name: '基础工程' },
-          ]" />
-    </div>
-  </div>
+  <Card :title="title">
+    <JNestedRingChart :title="{ y:'30%' , subTitle: '隐患类别' }" :series="series" />
+  </Card>
 </template>
 
 <script>
-import problemChart from '../jChart/pie/JProblemChart'
+import Card from '../components/Card.vue'
+import JNestedRingChart from '../jChart/pie/JNestedRingChart.vue'
 export default {
-  components:{problemChart},
+  components: { Card, JNestedRingChart },
   props: {
     title: {
       type: String,
-      default: "default title"
+      default: ''
     }
   },
+  data() {
+    return {
+      series: [
+        {
+          color: ['#3cabfd', '#58ec72', '#f43a8d', '#f294c6', '#6ee4f0',],
+          data: [
+            { value: 45, name: '文明施工' },
+            { value: 5, name: '未分类' },
+            { value: 15, name: '安全管理' },
+            { value: 10, name: '施工安全' },
+            { value: 45, name: '基础工程' },
+          ]
+        },
+        {
+          roseType: 'area',
+          radius: ['58%', '54%'],
+          color: ['#0B1B35', '#244D8F'],
+          data: [30, 40, 30, 40]
+        }
+      ]
+    }
+  }
 }
 </script>
 
-<style lang="less" scoped>
-.containerBox {
-  width: 100%;
-  height: 100%;
-  border: 1px solid #0081c3;
-
-  .titleTxt {
-    font-size: 18px;
-    color: #6ee4f0;
-    margin-top: 5px;
-    margin-left: 5px;
-  }
-  .myChart {
-    width: 100%;
-    height: 100%;
-  }
-}
-</style>
\ No newline at end of file
+<style lang="less" scoped></style>
diff --git a/src/views/projectAdmin/dataBoard/projectHuScreen/projectHuli/videoPhoto.vue b/src/views/projectAdmin/dataBoard/projectHuScreen/projectHuli/videoPhoto.vue
index 35a9aeaa..4a3862be 100644
--- a/src/views/projectAdmin/dataBoard/projectHuScreen/projectHuli/videoPhoto.vue
+++ b/src/views/projectAdmin/dataBoard/projectHuScreen/projectHuli/videoPhoto.vue
@@ -1,16 +1,49 @@
 <template>
-<!-- 视频宣传 -->
+  <!-- 视频宣传 -->
   <div class="videoPhoto">
-    <div class="titleTxt">{{ title }}</div>
-    <img style="height:85%;width:90%; margin-left:5%; margin-top:2%;" src="@/assets/images/projectImg/videoPic.png" alt="" />
+    <div class="titleTxt">
+      <el-button type="text" class="video" @click="toVideo()">宣传视频</el-button>
+      <el-button type="text" class="image" @click="toImage()">效果图</el-button>
+    </div>
+    <video v-if="!show" class="topInner videos" autoplay controls loop></video>
+    <img
+      v-else
+      style="height:85%;width:90%; margin-left:5%; margin-top:2%;"
+      src="@/assets/images/projectImg/videoPic.png"
+      alt
+    />
+
+    <!-- 替换视频 -->
+    <!-- v-if="projectData.videoUrl && optionListIndex == 1" -->
+    <el-upload
+      class="changeVideoBox"
+      :src="$store.state.FILEURL + projectData.videoUrl"
+      :action="$store.state.UPLOADURL"
+      :on-success="(file) => handleSuccess(file, 1)"
+      :on-error="(file) => handleError(file, 1)"
+      :beforeUpload="(file) => handleBeforeUpload(file, 1)"
+      name="files"
+      :show-file-list="false"
+    >
+      <!-- 更换视频 -->
+      <span class="changeVideoBtn">
+        {{
+        $t('message.companyDiagram.changeVideo')
+        }}
+      </span>
+    </el-upload>
   </div>
 </template>
 
 <script>
+import { getProjectDetail } from "@/assets/js/api/baseInfo.js";
 export default {
   data() {
     return {
-
+      show: false,
+      projectData: {
+        videoUrl: ""
+      }
     };
   },
   props: {
@@ -18,8 +51,35 @@ export default {
       type: String,
       default: "default title"
     }
+  },
+  created() {
+    this.getDataDateils();
+  },
+  methods: {
+    toVideo() {
+      this.show = false;
+    },
+    toImage() {
+      this.show = true;
+    },
+    //获取项目详情
+    getDataDateils() {
+      let data = {
+        projectSn: this.$store.state.projectSn
+      };
+      console.log("当前的参数", data);
+      getProjectDetail(data).then(res => {
+        if (res.code == 200) {
+          this.projectData = res.result;
+          console.log("projectData", this.projectData);
+        }
+      });
+    },
+    handleSuccess() {},
+    handleError() {},
+    handleBeforeUpload() {}
   }
-}
+};
 </script>
 
 <style lang="less" scoped>
@@ -27,12 +87,27 @@ export default {
   width: 100%;
   height: 100%;
   border: 1px solid #0081c3;
-
-  .titleTxt {
+  .video,
+  .image {
     font-size: 18px;
     color: #6ee4f0;
     margin-top: 5px;
     margin-left: 5px;
   }
+  .changeVideoBtn {
+    border: 1px solid rgba(255, 255, 255, 0.5);
+    padding: 3px 5px;
+    font-size: 14px;
+    cursor: pointer;
+    position: absolute;
+    left: 50%;
+    top: 45%;
+    display: none;
+    transform: translate(-50%, -50%);
+  }
+  .videos:hover + .changeVideoBox .changeVideoBtn,
+  .changeVideoBox:hover .changeVideoBtn {
+    display: block;
+  }
 }
 </style>
\ No newline at end of file