update

src/assets/font/font.css

@@ -1,25 +1,35 @@
-@font-face {  
+@font-face {
   /* font-family: 'YaHei'; */
   src: url('YaHei.ttf');
-  font-weight: normal;  
-  font-style: normal;  
-  font-family:Arial,'Times New Roman','Microsoft YaHei',SimHei;   
+  font-weight: normal;
+  font-style: normal;
+  font-family: Arial, 'Times New Roman', 'Microsoft YaHei', SimHei;
 }
-@font-face {  
+
+@font-face {
   src: url('SOURCEHANSANSCN-REGULAR.OTF');
-  font-weight: normal;  
-  font-style: normal;  
-  font-family:Source Han Sans CN;   
+  font-weight: normal;
+  font-style: normal;
+  font-family: Source Han Sans CN;
 }
-@font-face {  
+
+@font-face {
   src: url('SOURCEHANSANSCN-MEDIUM.OTF');
-  font-weight: normal;  
-  font-style: normal;  
-  font-family:Source Han Sans CN-MEDIUM;   
+  font-weight: normal;
+  font-style: normal;
+  font-family: Source Han Sans CN-MEDIUM;
 }
-@font-face {  
+
+@font-face {
   src: url('SOURCEHANSANSCN-HEAVY.OTF');
-  font-weight: normal;  
-  font-style: normal;  
-  font-family:Source Han Sans CN-HEAVY;   
+  font-weight: normal;
+  font-style: normal;
+  font-family: Source Han Sans CN-HEAVY;
+}
+
+@font-face {
+  src: url('YOUSHEBIAOTIHEI-2.TTF');
+  font-weight: normal;
+  font-style: normal;
+  font-family: YouSheBiaoTiHei;
 }

src/views/groupPage/components/BarChart/ComProgressBarChart.vue

@@ -8,7 +8,8 @@ import { fontSize } from '@/views/groupPage/util'
 export default {
   name: 'ComProgressBarChart', //进度横向柱状图
   props: {
-    chartData: {}
+    chartData: {},
+    title: { type: String, required: true }
   },
   data() {
     return { myChart: null }
@@ -55,7 +56,7 @@ export default {
       let option = {
         backgroundColor: 'transparent',
         title: {
-          text: '雨水管网',
+          text: this.title,
           textStyle: {
             fontSize: fontSize(14),
             color: '#2BA7FF'

src/views/groupPage/components/ComprehensiveChart/supAndConsNumChart.vue

@@ -8,7 +8,8 @@ import { fontSize } from '@/views/groupPage/util'
 export default {
   name: 'supAndConsNumChart', //监理和施工扫码次数图表
   props: {
-    chartData: {}
+    chartData: {},
+    type: { type: String, required: true }
   },
   data() {
     return { myChart: null }
@@ -38,6 +39,57 @@ export default {
       }
     },
     initialChart() {
+      let legend = []
+      let yAxisName = ''
+      let series = []
+      if (this.type == 'progress') {
+        yAxisName = '单位：次'
+        legend = ['监理', '施工']
+        series = [
+          {
+            name: '监理',
+            type: 'bar',
+            barWidth: 8,
+            itemStyle: {
+              color: '#FFD553'
+            },
+            data: [120, 132, 101, 134, 90, 230, 210, 182, 191, 234, 290, 330]
+          },
+          {
+            name: '施工',
+            type: 'bar',
+            barWidth: 8,
+            itemStyle: {
+              color: '#0EA7FF'
+            },
+            data: [220, 182, 191, 234, 290, 330, 310, 201, 154, 190, 330, 410]
+          }
+        ]
+      }
+      if (this.type == 'quality') {
+        yAxisName = '单位：个'
+        legend = ['完成检验', '新增申请']
+        series = [
+          {
+            name: '完成检验',
+            type: 'bar',
+            barWidth: 8,
+            itemStyle: {
+              color: '#00C272'
+            },
+            data: [120, 132, 101, 134, 90, 230, 210, 182, 191, 234, 290, 330]
+          },
+          {
+            name: '新增申请',
+            type: 'bar',
+            barWidth: 8,
+            itemStyle: {
+              color: '#139FF0'
+            },
+            data: [220, 182, 191, 234, 290, 330, 310, 201, 154, 190, 330, 410]
+          }
+        ]
+      }
       let option = {
         grid: {
           left: '5%',
@@ -66,7 +118,7 @@ export default {
           textStyle: {
             color: '#FFFFFF'
           },
-          data: ['监理', '施工']
+          data: legend
         },
         xAxis: [
           {
@@ -90,7 +142,7 @@ export default {
         yAxis: [
           {
             type: 'value',
-            name: '单位：次',
+            name: yAxisName,
             nameTextStyle: {
               color: '#FFFFFF'
             },
@@ -111,26 +163,7 @@ export default {
             }
           }
         ],
-        series: [
-          {
-            name: '监理',
-            type: 'bar',
-            barWidth: 8,
-            itemStyle: {
-              color: '#FFD553'
-            },
-            data: [120, 132, 101, 134, 90, 230, 210, 182, 191, 234, 290, 330]
-          },
-          {
-            name: '施工',
-            type: 'bar',
-            barWidth: 8,
-            itemStyle: {
-              color: '#0EA7FF'
-            },
-            data: [220, 182, 191, 234, 290, 330, 310, 201, 154, 190, 330, 410]
-          }
-        ]
+        series
       }
       this.creatChart(option, this.$refs.chart)
     },

src/views/groupPage/components/GaugeChart/percentGaugeChart.vue

@@ -8,7 +8,8 @@ import { fontSize } from '@/views/groupPage/util'
 export default {
   name: 'percentGaugeChart', //设计施工综合图表
   props: {
-    chartData: {}
+    chartData: {},
+    title: {}
   },
   data() {
     return { myChart: null }
@@ -74,14 +75,16 @@ export default {
           fontWeight: '500'
         },
         arrow: {
-          fontSize: 16,
-          color: 'rgba(14, 235, 255, 1)',
-          fontWeight: 'bold'
+          height: fontSize(13),
+          width: fontSize(8),
+          backgroundColor: {
+            image: require('@/views/groupPage/images/模块图标/统计分析/向上箭头.png')
+          }
         }
       }
       let option = {
         title: {
-          text: '设计入库同比上周',
+          text: this.title,
           textStyle: {
             color: '#fff',
             fontSize: fontSize(14),
@@ -145,7 +148,7 @@ export default {
             detail: {
               formatter: function (value) {
                 var num = Math.round(value)
-                return '{valueNumber|' + num + '}{valueUnit|%}{arrow|⇑}'
+                return '{valueNumber|' + num + '}{valueUnit|%}{arrow|}'
               },
               rich: rich,
               offsetCenter: ['0%', '0%']
@@ -235,13 +238,13 @@ export default {
                   }
                 ],
                 false
-              ),
-              label: {
-                show: false
-              },
-              labelLine: {
-                show: false
-              }
+              )
+            },
+            label: {
+              show: false
+            },
+            labelLine: {
+              show: false
             },
             data: [100]
           }

src/views/groupPage/components/PieChart/ComProgressPercentChart.vue

@@ -9,6 +9,9 @@ export default {
   props: {
     chartData: {}
   },
+  data() {
+    return { myChart: null }
+  },
   watch: {
     chartData(val) {
       this.$nextTick(() => {
@@ -18,8 +21,21 @@ export default {
   },
   mounted() {
     this.initialChart()
+    //图表大小自适应
+    window.addEventListener('resize', this.onResize)
   },
   methods: {
+    destroyChart() {
+      if (this.myChart != null) {
+        this.myChart.dispose()
+        this.myChart = null
+      }
+    },
+    onResize() {
+      if (this.myChart) {
+        this.myChart.resize()
+      }
+    },
     initialChart() {
       var option = {
         title: {
@@ -128,15 +144,11 @@ export default {
       this.creatChart(option, this.$refs.chart)
     },
     creatChart(option, ref) {
-      let chart = echarts.init(ref) //this.$refs.chart
-      chart.resize()
-      chart.setOption(option, {
+      this.myChart = echarts.init(ref) //this.$refs.chart
+      this.myChart.resize()
+      this.myChart.setOption(option, {
         notMerge: true
       })
-      //图表大小自适应
-      window.addEventListener('resize', () => {
-        chart.resize()
-      })
     }
   }
 }

src/views/groupPage/districtPageModules/commonModules/SearchBox.vue

@@ -488,7 +488,17 @@ export default class SearchBox extends Vue {
   }
   //选择搜索
   pbsTreeSelectChange(data) {
-    this.searchInput = data.originname
+    switch (this.selectType) {
+      case '4':
+        this.searchInput = data.originname
+        break
+      case '3':
+        this.searchInput = data.code
+        break
+      case '2':
+        this.searchInput = data.pipeId
+        break
+    }
   }
   filterPbsTree(input) {
     ;(this.$refs['pbsTree'] as any).searchLocal(input, true)

src/views/groupPage/districtPageModules/index.vue

@@ -36,6 +36,7 @@ import ProjectPanoramic from '@/views/groupPage/districtPageModules/projectPanor
 import StatisticalAnalysis from '@/views/groupPage/districtPageModules/statisticalAnalysis/index.vue'
 import WisdomWarning from '@/views/groupPage/districtPageModules/wisdomWarning/index.vue'
 import DecisionSupport from '@/views/groupPage/districtPageModules/decisionSupport/index.vue'
+import { watch } from 'vue-demi'
 //集团分公司页面模块
 @Component({
   name: 'districtPageModules',
@@ -66,6 +67,15 @@ export default class districtPageModules extends Vue {
   get isShowExcavationAnalysis() {
     return this.$store.state.bigScreen.isShowExcavationAnalysis
   }
+  //模块下子模块当前显示
+  get currentStatisticalActive() {
+    return this.$store.state.bigScreen.currentStatisticalActive
+  }
+  @Watch('currentStatisticalActive')
+  onChangeThisSta(val) {
+    if (val == 'security') this.setBottom('1.552083rem')
+    else this.setBottom('0.052083rem')
+  }
   //关闭数据面板时,工具栏位置改变
   @Watch('districtModuleName', { immediate: true })
   onChangeVisibleMethod(val) {
@@ -86,7 +96,7 @@ export default class districtPageModules extends Vue {
       this.setBottom('0.052083rem') //10px
     } else {
       this.setLeftAndRight('2.34375rem') //450px
-      val !== 'StatisticalAnalysis' ? this.setBottom('0.052083rem') : this.setBottom('1.552083rem') //298px
+      // val !== 'StatisticalAnalysis' ? this.setBottom('0.052083rem') : this.setBottom('1.552083rem') //298px
     }
   }
   setLeftAndRight(leftRight) {

src/views/groupPage/districtPageModules/statisticalAnalysis/progressModule/ProjectSituationofPM.vue

@@ -10,13 +10,14 @@
         <div class="title">
           <div class="icon"></div>
           <span class="site-info">近期工程情况</span>
+          <div class="dateRange">{{ beginTime }}～{{ endTime }}</div>
         </div>
       </div>
       <div class="content-info">
         <!---->
         <div class="percentChartContent">
-          <div class="chart-item"><PercentGaugeChart /></div>
-          <div class="chart-item"><PercentGaugeChart /></div>
+          <div class="chart-item"><PercentGaugeChart :title="'设计入库同比上周'" /></div>
+          <div class="chart-item"><PercentGaugeChart :title="'施工部件同比上周'" /></div>
         </div>
         <!---->
         <div class="bottom3Content">
@@ -55,7 +56,7 @@
                 <span class="item-name">扫码次数统计</span>
               </div>
               <div class="scanCodeNumberContent">
-                <SupAndConsNumChartVue />
+                <SupAndConsNumChartVue :type="'progress'" />
               </div>
             </div>
           </div>
@@ -96,15 +97,18 @@
 </template>
 
 <script lang="ts">
+import moment from 'moment'
 import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
 import PercentGaugeChart from '@/views/groupPage/components/GaugeChart/percentGaugeChart.vue'
 import SupAndConsNumChartVue from '@/views/groupPage/components/ComprehensiveChart/supAndConsNumChart.vue'
-//近期工程情况
+//近期工程情况-进度
 @Component({
   name: 'ProjectSituationofPM',
   components: { PercentGaugeChart, SupAndConsNumChartVue }
 })
 export default class ProjectSituationofPM extends Vue {
+  beginTime = moment(new Date()).format('YYYY.MM.DD')
+  endTime = moment(new Date().setDate(new Date().getDate() - 7)).format('YYYY.MM.DD')
   pictureList: Array<any> = [{ index: 1 }, { index: 2 }, { index: 3 }, { index: 4 }]
   currentActive = 1
   clickPrev() {
@@ -162,6 +166,13 @@ export default class ProjectSituationofPM extends Vue {
         background-clip: text;
         -webkit-text-fill-color: transparent;
       }
+      .dateRange {
+        height: 0.0625rem /* 12/192 */;
+        font-size: 0.072917rem /* 14/192 */;
+        font-family: Source Han Sans CN;
+        font-weight: 400;
+        color: #ffffff;
+      }
     }
   }
   .content-info {

src/views/groupPage/districtPageModules/statisticalAnalysis/progressModule/StatisticalProgress.vue

@@ -57,10 +57,10 @@
               <span class="item-name">管网设计入库、扫码施工统计</span>
             </div>
             <div class="buildAndDesignContent">
-              <div class="BDC-item"><ComProgressBarChart /></div>
-              <div class="BDC-item"><ComProgressBarChart /></div>
-              <div class="BDC-item"><ComProgressBarChart /></div>
-              <div class="BDC-item"><ComProgressBarChart /></div>
+              <div class="BDC-item"><ComProgressBarChart :title="'雨水管网'" /></div>
+              <div class="BDC-item"><ComProgressBarChart :title="'污水管网'" /></div>
+              <div class="BDC-item"><ComProgressBarChart :title="'雨水检查井'" /></div>
+              <div class="BDC-item"><ComProgressBarChart :title="'污水检查井盖'" /></div>
             </div>
           </div>
           <!---->
@@ -84,12 +84,29 @@ import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
 import ComProgressPercentChart from '@/views/groupPage/components/PieChart/ComProgressPercentChart.vue'
 import ComProgressBarChart from '@/views/groupPage/components/BarChart/ComProgressBarChart.vue'
 import DesignAndConsChart from '@/views/groupPage/components/ComprehensiveChart/designAndConsChart.vue'
+import { getRequestResult } from '@/views/groupPage/apis'
 //进度统计
 @Component({
   name: 'StatisticalProgress',
   components: { ComProgressPercentChart, ComProgressBarChart, DesignAndConsChart }
 })
-export default class StatisticalProgress extends Vue {}
+export default class StatisticalProgress extends Vue {
+  mounted() {
+    this.getPageData()
+  }
+  getPageData() {
+    let data = { blockCode: 'ycepclist' }
+    let projectCode = 'HB06'
+    //获取全部数据
+    getRequestResult(data).then((res: Array<any>) => {
+      res = res.filter((item) => item.indexCode.indexOf(projectCode + '-') != -1)
+      res = res.map((item) => {
+        Object.keys(item).forEach((val) => (item[val] = item[val] || ''))
+        return { ...item }
+      })
+    })
+  }
+}
 </script>
 
 <style lang="scss" scoped>
@@ -143,6 +160,7 @@ export default class StatisticalProgress extends Vue {}
   .content-info {
     width: 100%;
     height: calc(100% - 0.166667rem);
+    display: inline-block;
     font-family: Source Han Sans CN;
     // background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.24) 100%);
     // background: linear-gradient(0deg, rgba(14, 167, 255, 0.16) 0%, rgba(14, 167, 255, 0.02) 100%);

src/views/groupPage/districtPageModules/statisticalAnalysis/progressModule/index.vue

@@ -5,7 +5,7 @@
     <!--工程情况-->
     <ProjectSituationofPM />
     <!--CWP进度-->
-    <ProgressofCWP />
+    <!-- <ProgressofCWP /> -->
   </div>
 </template>
 

src/views/groupPage/districtPageModules/statisticalAnalysis/qualityModule/ProjectSituationofQM.vue

@@ -0,0 +1,357 @@
+<template>
+  <transition
+    appear
+    name="animate__animated animate__move"
+    enter-active-class="animate__slideInRight"
+    leave-active-class="animate__slideOutRight"
+  >
+    <div class="widget-ProjectSituationofQM">
+      <div class="head">
+        <div class="title">
+          <div class="icon"></div>
+          <span class="site-info">近期工程情况</span>
+          <div class="dateRange">{{ beginTime }}～{{ endTime }}</div>
+        </div>
+      </div>
+      <div class="content-info">
+        <!---->
+        <div class="percentChartContent">
+          <div class="chart-item"><PercentGaugeChart :title="'申请检验批同比上周'" /></div>
+          <div class="chart-item"><PercentGaugeChart :title="'完成检验批同比上周'" /></div>
+        </div>
+        <!---->
+        <div class="bottom3Content">
+          <!---->
+          <div class="bottom2Content">
+            <!---->
+            <div class="overallProjectProgress">
+              <!-- <div class="title">
+                <div class="icon"></div>
+                <span class="item-name">工程总体进度</span>
+                <div class="symbol">滞后</div>
+              </div> -->
+              <div class="oppContent">
+                <div class="oppItem">
+                  <!-- <div class="oppItem-title">1、</div> -->
+                  <div class="oppItem-content">
+                    <span class="oppItem-title">1、</span>
+                    本周对在建施工作业面参与监理验收及现场质量巡视， 重点关注了大公桥调蓄池系统咬合桩验孔及浇筑、导槽钢
+                    筋验收、压力管道安装工程的沟槽开挖与回填、管道无损 探伤检测等工作。
+                  </div>
+                </div>
+                <div class="oppItem">
+                  <!-- <div class="oppItem-title">2、</div> -->
+                  <div class="oppItem-content">
+                    <span class="oppItem-title">2、</span>
+                    宜昌建设部组织各标段质量员、资料员学习质量验收资 料的基础培训，对项目划分及表单填写不规范行为进行宣
+                    贯，进一步加强精细化施工整改工作。现场落实举牌验收 制度及质量验评APP提交质量管控，督促现场用好“数字
+                  </div>
+                </div>
+              </div>
+            </div>
+            <!---->
+            <div class="scanCodeNumber">
+              <div class="title">
+                <div class="icon"></div>
+                <span class="item-name">检验批申请和完成数量统计</span>
+              </div>
+              <div class="scanCodeNumberContent">
+                <SupAndConsNumChartVue :type="'quality'" />
+              </div>
+            </div>
+          </div>
+          <!---->
+          <div class="constructionRecords">
+            <div class="title">
+              <div class="icon"></div>
+              <span class="item-name">施工记录</span>
+              <span class="item-type">（沟槽开挖）</span>
+            </div>
+            <div class="constructionRecordsContent">
+              <el-carousel ref="picCarousel" indicator-position="none" :autoplay="false" @change="changeCarousel">
+                <el-carousel-item v-for="item in pictureList" :key="item.index">
+                  <div class="consName">
+                    <div class="nameWrap">
+                      <div class="prjName">白洋冲片区排水管网综合治理工程{{ item.index }}</div>
+                      <div class="isQualified">合格</div>
+                    </div>
+                  </div>
+                  <div class="consInfo">
+                    <div class="infoWrap">
+                      <div class="pipeInfo">排水管网WS01-WS03</div>
+                      <div class="timeInfo">2022-02-03 12:12:12</div>
+                    </div>
+                  </div>
+                  <img class="consImg" src="@/views/groupPage/images/项目图册/1-调蓄池施工.png" />
+                </el-carousel-item>
+              </el-carousel>
+              <div class="switchWidget">
+                <div class="leftArrow" @click="clickPrev()"><i class="el-icon-caret-left"></i></div>
+                <div class="middleNumber">
+                  <div class="activeNum">{{ currentActive }}</div>
+                  /{{ pictureList.length }}
+                </div>
+                <div class="rightArrow" @click="clickNext()"><i class="el-icon-caret-right"></i></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script lang="ts">
+import moment from 'moment'
+import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
+import PercentGaugeChart from '@/views/groupPage/components/GaugeChart/percentGaugeChart.vue'
+import SupAndConsNumChartVue from '@/views/groupPage/components/ComprehensiveChart/supAndConsNumChart.vue'
+//近期工程情况-质量
+@Component({
+  name: 'ProjectSituationofQM',
+  components: { PercentGaugeChart, SupAndConsNumChartVue }
+})
+export default class ProjectSituationofQM extends Vue {
+  beginTime = moment(new Date()).format('YYYY.MM.DD')
+  endTime = moment(new Date().setDate(new Date().getDate() - 7)).format('YYYY.MM.DD')
+  pictureList: Array<any> = [{ index: 1 }, { index: 2 }, { index: 3 }, { index: 4 }]
+  currentActive = 1
+  clickPrev() {
+    ;(this.$refs['picCarousel'] as any).prev()
+  }
+  clickNext() {
+    ;(this.$refs['picCarousel'] as any).next()
+  }
+  changeCarousel(active, prev) {
+    this.currentActive = active + 1
+  }
+}
+</script>
+
+<style lang='scss' scoped>
+.animate__slideInRight,
+.animate__slideOutRight {
+  animation-duration: 3s; //动画持续时间
+  animation-delay: 0s; //动画延迟时间
+}
+.widget-ProjectSituationofQM {
+  z-index: 2;
+  //position
+  bottom: $size10 /* 10/192 */;
+  margin-right: $size20 /* 20/192 */;
+  right: 0;
+  position: absolute;
+  //size
+  height: calc(100% - 0.557292rem /* 107/192 */);
+  width: 2.083333rem /* 400/192 */;
+  .head {
+    height: 0.166667rem /* 32/192 */;
+    width: 100%;
+    background: linear-gradient(-90deg, rgba(43, 167, 255, 0.2) 0%, rgba(43, 167, 255, 0.08) 100%);
+    font-family: Source Han Sans CN-HEAVY;
+    .title {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      font-weight: 400;
+      align-items: center;
+      .icon {
+        height: 0.166667rem /* 32/192 */;
+        width: 0.34375rem /* 66/192 */;
+        background: url('~@/views/groupPage/images/模块图标/统计分析/工程情况.png') no-repeat center center;
+        background-size: 100% 100%;
+      }
+      span {
+        flex: 1;
+        font-weight: bold;
+        font-size: 0.083333rem /* 16/192 */;
+        color: #ffffff;
+        padding: 0.041667rem /* 8/192 */;
+        background: linear-gradient(0deg, #9bd2fa 0%, #ffffff 100%);
+        background-clip: text;
+        -webkit-text-fill-color: transparent;
+      }
+      .dateRange {
+        height: 0.0625rem /* 12/192 */;
+        font-size: 0.072917rem /* 14/192 */;
+        font-family: Source Han Sans CN;
+        font-weight: 400;
+        color: #ffffff;
+      }
+    }
+  }
+  .content-info {
+    width: 100%;
+    height: calc(100% - 0.166667rem);
+    font-family: Source Han Sans CN;
+    .percentChartContent {
+      height: 0.807292rem /* 155/192 */;
+      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      .chart-item {
+        height: 100%;
+        width: 50%;
+      }
+    }
+    .title {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      .icon {
+        height: 0.072917rem /* 14/192 */;
+        width: 0.078125rem /* 15/192 */;
+        margin-right: 0.046875rem /* 9/192 */;
+        background: url('~@/views/groupPage/images/三角.png') no-repeat center center;
+        background-size: 100% 100%;
+      }
+      .item-name,
+      .item-type {
+        font-family: Source Han Sans CN;
+        color: #0ea7ff;
+        font-size: 0.072917rem /* 14/192 */;
+        font-weight: 500;
+      }
+      .item-type {
+        color: #89c3ec !important;
+      }
+      .symbol {
+        margin-left: 0.052083rem /* 10/192 */;
+        width: 0.208333rem /* 40/192 */;
+        height: 0.104167rem /* 20/192 */;
+        font-size: 0.072917rem /* 14/192 */;
+        font-family: Source Han Sans CN;
+        font-weight: 400;
+        color: #ffffff;
+        background: linear-gradient(90deg, #2188d3, #9c2bec);
+        border-radius: 2px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+    }
+    .bottom3Content {
+      height: calc(100% - 0.807292rem /* 155/192 */);
+      width: 100%;
+      background: linear-gradient(0deg, rgba(14, 167, 255, 0.16) 0%, rgba(14, 167, 255, 0) 100%);
+    }
+    .overallProjectProgress {
+      margin-top: 0.052083rem /* 10/192 */;
+      width: 100%;
+      height: calc(100% - 1.380208rem /* 265/192 */);
+      .oppContent {
+        margin-top: 0.036458rem /* 7/192 */;
+        width: 100%;
+        height: calc(100% - 0.083333rem /* 16/192 */);
+        background: #062239;
+        overflow: auto;
+        .oppItem {
+          width: 100%;
+          padding: 0.052083rem /* 10/192 */;
+          color: #feffff;
+          font-family: Source Han Sans CN;
+          font-size: 0.072917rem /* 14/192 */;
+          .oppItem-title {
+            color: #17aaff;
+          }
+          .oppItem-content {
+            padding: 0.026042rem /* 5/192 */ 0;
+            line-height: 0.114583rem /* 22/192 */;
+          }
+        }
+      }
+    }
+    .scanCodeNumber {
+      margin-top: 0.052083rem /* 10/192 */;
+      width: 100%;
+      height: 1.25rem /* 240/192 */;
+      .scanCodeNumberContent {
+        height: calc(100% - 0.072917rem /* 14/192 */);
+        width: 100%;
+      }
+    }
+    .bottom2Content {
+      width: 100%;
+      height: calc(100% - 1.40625rem /* 270/192 */);
+      overflow: auto;
+    }
+    .constructionRecords {
+      margin-top: 0.052083rem /* 10/192 */;
+      width: 100%;
+      height: 1.354167rem /* 260/192 */;
+      .constructionRecordsContent {
+        width: 100%;
+        height: calc(100% - 0.072917rem /* 14/192 */);
+        display: flex;
+        flex-flow: column;
+        align-items: center;
+        justify-content: flex-end;
+        .el-carousel {
+          width: 90%;
+          height: 80%;
+          /deep/ .el-carousel__container {
+            height: 100% !important;
+          }
+          .consImg {
+            height: 100%;
+            width: 100%;
+          }
+          .consName,
+          .consInfo {
+            position: absolute;
+            background: rgba(0, 0, 0, 0.4);
+            width: 100%;
+            height: 0.177083rem /* 34/192 */;
+            line-height: 0.177083rem /* 34/192 */;
+            font-size: 0.072917rem /* 14/192 */;
+            font-family: Source Han Sans CN;
+            font-weight: 500;
+            color: #ffffff;
+          }
+          .consName {
+            top: 0;
+          }
+          .consInfo {
+            bottom: 0;
+          }
+          .nameWrap {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            .isQualified {
+              width: 0.322917rem /* 62/192 */;
+              text-align: center;
+              background: rgba(13, 162, 100, 0.9);
+              border-radius: 0px 0px 0px 30px;
+            }
+          }
+          .infoWrap {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+          }
+        }
+        .switchWidget {
+          display: flex;
+          align-items: center;
+          color: rgba(137, 195, 236, 1);
+          height: 0.072917rem /* 14/192 */;
+          margin: 0.052083rem /* 10/192 */;
+          .leftArrow,
+          .rightArrow {
+            font-size: 0.072917rem /* 14/192 */;
+            cursor: pointer;
+          }
+          .middleNumber {
+            display: flex;
+            .activeNum {
+              color: #2ba7ff;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/views/groupPage/districtPageModules/statisticalAnalysis/qualityModule/QualityEvaluation.vue

@@ -0,0 +1,342 @@
+<template>
+  <transition
+    appear
+    name="animate__animated animate__move"
+    enter-active-class="animate__slideInLeft"
+    leave-active-class="animate__slideOutLeft"
+  >
+    <div class="widget-QualityEvaluation">
+      <div class="head">
+        <div class="title">
+          <div class="icon"></div>
+          <span class="site-info">质量验评情况</span>
+        </div>
+      </div>
+      <div class="content-info">
+        <!---->
+        <div class="qualifiedPercent">
+          <div class="chartContent">
+            <div class="chart"><ComProgressPercentChart /></div>
+            <div class="chart-title">一次检验合格率</div>
+          </div>
+          <div class="staContent">
+            <div class="sta-item" v-for="item of staList" :key="item.name">
+              <div class="sta-value">{{ item.value }}个</div>
+              <div class="sta-name">{{ item.name }}</div>
+            </div>
+          </div>
+        </div>
+        <!---->
+        <div class="numberStatistical">
+          <div class="title">
+            <div class="icon"></div>
+            <span class="item-name">分部工程完成检验批数量统计</span>
+          </div>
+          <div class="partitionedProject">
+            <div class="partial-item" v-for="(item, index) of partialList" :key="item.name">
+              <div class="partial-title">
+                <div class="partial-number">
+                  <span class="num">{{ index + 1 }}</span>
+                </div>
+                <div class="partial-name">{{ item.name }}</div>
+              </div>
+              <div class="partial-percent">
+                <div class="percentBar" :style="{ width: item.percent + '%' }"></div>
+                <div class="percentNum">{{ item.num }}个</div>
+              </div>
+              <div class="partial-child">
+                <div class="pc-item" v-for="c of item.child" :key="c.name">
+                  <div class="pci-name">{{ c.name }}</div>
+                  <div class="pci-bar"><div class="perval" :style="{ width: c.per + '%' }"></div></div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <!---->
+          <div class="buildAndDesignLength">
+            <div class="title">
+              <div class="icon"></div>
+              <span class="item-name">长度统计</span>
+            </div>
+            <div class="lengthChartContent">
+              <DesignAndConsChart />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
+import ComProgressPercentChart from '@/views/groupPage/components/PieChart/ComProgressPercentChart.vue'
+import DesignAndConsChart from '@/views/groupPage/components/ComprehensiveChart/designAndConsChart.vue'
+//质量验评情况
+@Component({
+  name: 'QualityEvaluation',
+  components: { ComProgressPercentChart, DesignAndConsChart }
+})
+export default class QualityEvaluation extends Vue {
+  staList = [
+    { name: '分项工程验收', value: 5 },
+    { name: '分部工程验收', value: 3 },
+    { name: '申请检验批', value: 534 },
+    { name: '完成检验批', value: 534 }
+  ]
+  partialList = [
+    {
+      name: '不开槽施工管道主体结构',
+      num: 34,
+      percent: 80,
+      child: [
+        { name: '工作井维护结构', per: 50 },
+        { name: '工作井施工', per: 50 },
+        { name: '顶管管道施工', per: 50 }
+      ]
+    },
+    {
+      name: '土方工程',
+      num: 30,
+      percent: 80,
+      child: [
+        { name: '沟槽开挖', per: 100 },
+        { name: '沟槽支护', per: 50 },
+        { name: '沟槽回填', per: 50 }
+      ]
+    },
+    {
+      name: '附属物构筑物工程',
+      num: 30,
+      percent: 80,
+      child: [{ name: '基坑开挖', per: 50 }]
+    },
+    {
+      name: '路面恢复工程',
+      num: 30,
+      percent: 80,
+      child: [{ name: '基坑回填', per: 50 }]
+    }
+  ]
+}
+</script>
+
+<style lang="scss" scoped>
+.animate__slideInLeft,
+.animate__slideOutLeft {
+  animation-duration: 3s; //动画持续时间
+  animation-delay: 0s; //动画延迟时间
+}
+.widget-QualityEvaluation {
+  z-index: 2;
+  //position
+  top: 0.505208rem /* 97/192 */;
+  margin-left: $size20 /* 20/192 */;
+  position: absolute;
+  //size
+  height: calc(100% - 0.557292rem /* 107/192 */);
+  width: 2.083333rem /* 400/192 */;
+  .head {
+    height: 0.166667rem /* 32/192 */;
+    width: 100%;
+    background: linear-gradient(-90deg, rgba(43, 167, 255, 0.2) 0%, rgba(43, 167, 255, 0.08) 100%);
+    font-family: Source Han Sans CN-HEAVY;
+    .title {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      font-weight: 400;
+      align-items: center;
+      .icon {
+        height: 0.166667rem /* 32/192 */;
+        width: 0.34375rem /* 66/192 */;
+        background: url('~@/views/groupPage/images/模块图标/统计分析/质量验评情况.png') no-repeat center center;
+        background-size: 100% 100%;
+      }
+      span {
+        flex: 1;
+        font-weight: bold;
+        font-size: 0.083333rem /* 16/192 */;
+        color: #ffffff;
+        padding: 0.041667rem /* 8/192 */;
+        background: linear-gradient(0deg, #9bd2fa 0%, #ffffff 100%);
+        background-clip: text;
+        -webkit-text-fill-color: transparent;
+      }
+    }
+  }
+  @mixin positionCenter() {
+    display: flex;
+    align-items: center;
+  }
+  .content-info {
+    width: 100%;
+    height: calc(100% - 0.166667rem);
+    display: inline-block;
+    font-family: Source Han Sans CN;
+    background: linear-gradient(0deg, rgba(14, 167, 255, 0.16) 0%, rgba(14, 167, 255, 0.02) 100%);
+    .title {
+      width: 100%;
+      display: flex;
+      .icon {
+        height: 0.072917rem /* 14/192 */;
+        width: 0.078125rem /* 15/192 */;
+        margin-right: 0.046875rem /* 9/192 */;
+        background: url('~@/views/groupPage/images/三角.png') no-repeat center center;
+        background-size: 100% 100%;
+      }
+      .item-name {
+        font-family: Source Han Sans CN;
+        color: #0ea7ff;
+        font-size: 0.072917rem /* 14/192 */;
+        font-weight: 500;
+      }
+    }
+    .qualifiedPercent {
+      margin-top: 0.104167rem /* 20/192 */;
+      width: 100%;
+      height: 0.729167rem /* 140/192 */;
+      display: flex;
+      justify-content: space-between;
+      font-size: 0.072917rem /* 14/192 */;
+      font-weight: 400;
+      color: #84bde5;
+      .chartContent {
+        width: 0.677083rem /* 130/192 */;
+        height: 100%;
+        background: rgba(6, 34, 57, 0.9);
+        display: flex;
+        flex-flow: column;
+        justify-content: center;
+        .chart {
+          height: 0.572917rem /* 110/192 */;
+          width: 100%;
+        }
+        .chart-title {
+          text-align: center;
+        }
+      }
+      .staContent {
+        height: 100%;
+        width: calc(100% - 0.697917rem /* 134/192 */);
+        background: rgba(6, 34, 57, 0.9);
+        display: grid;
+        grid-template-columns: 1fr 1fr; //有几列
+        grid-template-rows: 50% 50%; //有几行
+        .sta-item {
+          display: flex;
+          flex-flow: column;
+          align-items: center;
+          justify-content: space-evenly;
+          .sta-value {
+            font-size: 0.083333rem /* 16/192 */;
+            font-weight: 500;
+            color: #ffffff;
+          }
+        }
+      }
+    }
+    .numberStatistical {
+      margin-top: 0.104167rem /* 20/192 */;
+      width: 100%;
+      height: calc(100% - 0.9375rem /* 180/192 */);
+      font-family: Source Han Sans CN;
+      .partitionedProject {
+        width: calc(100% - 0.052083rem /* 10/192 */);
+        height: calc(100% - 1.614583rem /* 310/192 */);
+        margin-left: 0.052083rem /* 10/192 */;
+        overflow: auto;
+        .partial-item {
+          width: 100%;
+          margin: 0.052083rem /* 10/192 */ 0;
+          .partial-title,
+          .partial-percent,
+          .partial-child {
+            margin: 0.052083rem /* 10/192 */ 0;
+          }
+          .partial-title {
+            display: flex;
+            align-items: center;
+            .partial-number {
+              width: 0.104167rem /* 20/192 */;
+              height: 0.104167rem /* 20/192 */;
+              background: rgba(43, 167, 255, 0.3);
+              border-radius: 50%;
+              text-align: center;
+              line-height: 0.104167rem /* 20/192 */;
+              .num {
+                font-size: 0.09375rem /* 18/192 */;
+                font-family: YouSheBiaoTiHei;
+                font-weight: 400;
+                color: #1c9af6;
+                display: block;
+                background: linear-gradient(68deg, #1ea2ff 0%, #f9d880 100%);
+                background-clip: text;
+                -webkit-text-fill-color: transparent;
+              }
+            }
+            .partial-name {
+              margin-left: 0.026042rem /* 5/192 */;
+              font-size: 0.072917rem /* 14/192 */;
+              font-weight: 500;
+              color: #2ba7ff;
+            }
+          }
+          .partial-percent {
+            width: 100%;
+            display: flex;
+            align-items: center;
+            .percentBar {
+              height: 0.041667rem /* 8/192 */;
+              background: #d3af40;
+              border-radius: 4px;
+              margin-right: 0.041667rem /* 8/192 */;
+            }
+            .percentNum {
+              font-size: 0.072917rem /* 14/192 */;
+              font-weight: 500;
+              color: #feffff;
+              white-space: nowrap;
+            }
+          }
+          .partial-child {
+            width: 100%;
+            .pc-item {
+              display: flex;
+              align-items: center;
+              padding: 0 0.052083rem /* 10/192 */ 0.052083rem /* 10/192 */;
+              .pci-name {
+                // width: 0.46875rem /* 90/192 */;
+                margin-right: 0.052083rem /* 10/192 */;
+                font-size: 0.072917rem /* 14/192 */;
+                font-weight: 400;
+                color: #feffff;
+                white-space: nowrap;
+                max-width: 0.520833rem /* 100/192 */;
+              }
+              .pci-bar {
+                width: calc(100% - 0.520833rem /* 100/192 */);
+                height: 0.03125rem /* 6/192 */;
+                .perval {
+                  height: 100%;
+                  background: linear-gradient(-90deg, #05cfe1, #0a89ff);
+                  border-radius: 0.015625rem /* 3/192 */;
+                }
+              }
+            }
+          }
+        }
+      }
+      .buildAndDesignLength {
+        margin-top: 0.15625rem /* 30/192 */;
+        width: 100%;
+        height: 1.354167rem /* 260/192 */;
+        .lengthChartContent {
+          height: calc(100% - 0.072917rem /* 14/192 */);
+          overflow: hidden;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/groupPage/districtPageModules/statisticalAnalysis/qualityModule/index.vue

@@ -1,14 +1,20 @@
 <template>
-  <div class="widget-qualityModule"></div>
+  <div class="widget-qualityModule">
+    <!--质量验评情况-->
+    <QualityEvaluation />
+    <!--近期工程情况-->
+    <ProjectSituationofQM />
+  </div>
 </template>
 
 <script lang="ts">
 import { Vue, Component, Prop } from 'vue-property-decorator'
-
+import QualityEvaluation from './QualityEvaluation.vue'
+import ProjectSituationofQM from './ProjectSituationofQM.vue'
 //统计分析-质量模块
 @Component({
   name: 'qualityModule',
-  components: {}
+  components: { QualityEvaluation, ProjectSituationofQM }
 })
 export default class qualityModule extends Vue {}
 </script>