update

src/views/groupPage/baseMap/components/ProjectMap.vue

@@ -347,6 +347,10 @@ export default {
               function (layers) {
                 for (var i = 0; i < layers.length; i++) {
                   var ly = layers[i]
+                  //BIM模型控制
+                  ly.aliasName = item.name.split('-')[1] || ''
+                  ly.sceneType = item.name.split('-')[0] == 'BIM模型' ? 'BIM模型' : ''
+                  //
                   ly.selectEnabled = true
                   ly.clearMemoryImmediately = false
                   ly.cullEnabled = false

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

@@ -0,0 +1,160 @@
+<template>
+  <div class="chart" ref="chart"></div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import { fontSize } from '../../util'
+export default {
+  name: 'ComRankingBarChart', //项目统计柱状图
+  props: {
+    chartData: {}
+  },
+  data() {
+    return { myChart: null }
+  },
+  watch: {
+    chartData: {
+      handler() {
+        this.$nextTick(() => {
+          this.initialChart()
+        })
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  mounted() {
+    //图表大小自适应
+    window.addEventListener('resize', this.onResize)
+  },
+  methods: {
+    destroyChart() {
+      if (this.myChart != null) {
+        this.myChart.dispose()
+        this.myChart = null
+      }
+    },
+    onResize() {
+      if (this.myChart) {
+        this.initialChart()
+      }
+    },
+    getBarColor(index) {
+      const colors = [
+        { index: 0, color0: '#D72627', color1: '#FF6162' },
+        { index: 1, color0: '#D6791F', color1: '#FFA44B' },
+        { index: 2, color0: '#ECC438', color1: '#F5D975' }
+      ]
+      return colors.find((i) => i.index == index) || { index: 3, color0: '#0A89FF', color1: '#05CFE1' }
+    },
+    initialChart() {
+      this.destroyChart()
+      let seriesData = [],
+        dataArr = [18203, 23489, 29034, 104970, 131744]
+      dataArr.sort((a, b) => b - a)
+      dataArr.forEach((item, index) => {
+        seriesData.unshift({
+          value: item,
+          itemStyle: {
+            color: {
+              type: 'linear',
+              x: 0,
+              y: 0,
+              x2: 1,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: this.getBarColor(index).color0 },
+                { offset: 1, color: this.getBarColor(index).color1 }
+              ],
+              global: false
+            }
+          }
+        })
+      })
+      let option = {
+        tooltip: {
+          show: true,
+          confine: true,
+          borderWidth: 0,
+          textStyle: {
+            color: '#fff'
+          },
+          backgroundColor: 'rgba(50,50,50,0.7)',
+          trigger: 'axis',
+          axisPointer: {
+            lineStyle: {
+              type: 'solid',
+              color: 'rgba(255, 255, 255, 0.3)'
+            }
+          }
+        },
+        grid: {
+          top: '5%',
+          left: '5%',
+          right: '8%',
+          bottom: '-5%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'value',
+          show: false
+        },
+        yAxis: {
+          type: 'category',
+          axisTick: { show: false },
+          axisLine: { show: false },
+          axisLabel: {
+            color: '#A4D9F9',
+            width: fontSize(100),
+            overflow: 'truncate'
+          },
+          data: ['xxx隐患', 'xxx隐患', 'xxx隐患', 'xxx隐患', 'xxx隐患']
+        },
+        series: [
+          {
+            name: '2011',
+            type: 'bar',
+            barWidth: 8,
+            label: {
+              show: true,
+              position: 'right',
+              fontSize: fontSize(14),
+              fontFamily: 'Source Han Sans CN',
+              fontWeight: 500,
+              color: '#FEFFFF'
+            },
+            itemStyle: {
+              borderRadius: [0, 5, 5, 0]
+            },
+            data: seriesData
+          }
+        ]
+      }
+      this.creatChart(option, this.$refs.chart)
+    },
+    creatChart(option, ref) {
+      try {
+        this.myChart = echarts.init(ref) //this.$refs.chart
+        this.myChart.setOption(option, { notMerge: true })
+        var autoHeight = option.yAxis[1].data.length * 50 + 100
+        this.myChart.getDom().style.height = autoHeight + 'px'
+        this.myChart.getDom().childNodes[0].style.height = autoHeight + 'px'
+        this.myChart.getDom().childNodes[0].childNodes[0].setAttribute('height', autoHeight)
+        this.myChart.getDom().childNodes[0].childNodes[0].style.height = autoHeight + 'px'
+        this.myChart.resize()
+      } catch {}
+    }
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.onResize)
+    this.destroyChart()
+  }
+}
+</script>
+<style lang="scss" scoped>
+.chart {
+  height: 100%;
+  width: 100%;
+}
+</style>

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

@@ -66,13 +66,19 @@ export default {
           show: true,
           x: 'right',
           y: '10',
+          itemWidth: 12,
+          itemHeight: 8,
           icon: 'inherit',
-          itemWidth: 15,
-          itemHeight: 10,
           textStyle: {
             color: '#FFFFFF'
           },
-          data: ['高风险作业']
+          data: [
+            { name: '高风险作业' },
+            { name: '一级', itemStyle: { color: '#ED2727' } },
+            { name: '二级', itemStyle: { color: '#D6791F' } },
+            { name: '三级', itemStyle: { color: '#EFA82D' } },
+            { name: '四级', itemStyle: { color: '#979546' } }
+          ]
         },
         xAxis: [
           {

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

@@ -0,0 +1,206 @@
+<template>
+  <div class="chart" ref="chart"></div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import { fontSize } from '@/views/groupPage/util'
+export default {
+  name: 'riskTypeChart', //隐患创建信息图表
+  props: {
+    chartData: {}
+  },
+  data() {
+    return { myChart: null }
+  },
+  watch: {
+    chartData(val) {
+      this.$nextTick(() => {
+        this.initialChart()
+      })
+    }
+  },
+  mounted() {
+    //图表大小自适应
+    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() {
+      this.destroyChart()
+      let option = {
+        grid: {
+          left: '3%',
+          right: '3%',
+          top: '20%',
+          bottom: '0%',
+          containLabel: true
+        },
+        tooltip: {
+          show: true,
+          confine: true,
+          borderWidth: 0,
+          textStyle: {
+            color: '#fff'
+          },
+          backgroundColor: 'rgba(50,50,50,0.7)',
+          trigger: 'axis',
+          axisPointer: {
+            lineStyle: {
+              type: 'solid',
+              color: 'rgba(255, 255, 255, 0.3)'
+            }
+          }
+        },
+        legend: {
+          show: true,
+          x: 'right',
+          y: '10',
+          itemWidth: 12,
+          itemHeight: 8,
+          icon: 'inherit',
+          textStyle: {
+            color: '#FFFFFF'
+          },
+          data: [
+            { name: '轻微', itemStyle: { color: '#13E3F0' } },
+            { name: '重要', itemStyle: { color: '#E6C14D' } },
+            { name: '重大', itemStyle: { color: '#FF2828' } }
+          ]
+        },
+        xAxis: [
+          {
+            type: 'category',
+            boundaryGap: true,
+            axisLabel: {
+              color: '#FFFFFF'
+            },
+            axisLine: {
+              show: false
+            },
+            axisTick: {
+              show: false
+            },
+            splitLine: {
+              show: false
+            },
+            data: this.chartData.xData
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value',
+            name: '单位：个',
+            nameTextStyle: {
+              color: '#FFFFFF'
+            },
+            axisLabel: {
+              color: '#FFFFFF'
+            },
+            axisLine: {
+              show: false
+            },
+            axisTick: {
+              show: false
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: 'rgba(255, 255, 255, 0.2)'
+              }
+            }
+          }
+        ],
+        series: [
+          {
+            type: 'bar',
+            stack: 'total',
+            name: '重大',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: '#FF2828'
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(151,149,70,0)'
+                }
+              ])
+            },
+            barWidth: 12,
+            data: this.chartData.levelThree
+          },
+          {
+            type: 'bar',
+            stack: 'total',
+            name: '重要',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: '#E6C14D'
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(151,149,70,0)'
+                }
+              ])
+            },
+            barWidth: 12,
+            data: this.chartData.levelTwo
+          },
+          {
+            type: 'bar',
+            stack: 'total',
+            name: '轻微',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: '#13E3F0'
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(151,149,70,0)'
+                }
+              ])
+            },
+            barWidth: 12,
+            data: this.chartData.levelOne
+          }
+        ]
+      }
+      this.creatChart(option, this.$refs.chart)
+    },
+    creatChart(option, ref) {
+      this.myChart = echarts.init(ref) //this.$refs.chart
+      this.myChart.resize()
+      this.myChart.setOption(option, {
+        notMerge: true
+      })
+    }
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.onResize)
+    this.destroyChart()
+  }
+}
+</script>
+
+<style lang='scss' scoped>
+.chart {
+  height: 100%;
+  width: 100%;
+}
+</style>

src/views/groupPage/components/OthersChart/ComThreeDimensionsChart.vue

@@ -8,7 +8,8 @@ import 'echarts-gl'
 export default {
   name: 'threeDimensionsChart', //3D饼图
   props: {
-    chartData: {}
+    chartData: {},
+    distance: { default: 180, type: Number }
   },
   data() {
     return {
@@ -295,7 +296,7 @@ export default {
               zoomSensitivity: 0,
               panSensitivity: 0,
               autoRotate: false,
-              distance: 180
+              distance: that.distance
             },
             //后处理特效可以为画面添加高光、景深、环境光遮蔽（SSAO）、调色等效果。可以让整个画面更富有质感。
             postEffect: {

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

@@ -0,0 +1,181 @@
+<template>
+  <div class="chart" ref="chart"></div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import { fontSize } from '@/views/groupPage/util'
+export default {
+  name: 'ComRightAngelPercentChart', //进度直角饼图
+  props: {
+    value: { type: Number, default: 0 },
+    color: {
+      type: Array,
+      default: () => {
+        return ['#0976FE', '#02D4F3']
+      }
+    }
+  },
+  data() {
+    return { myChart: null }
+  },
+  watch: {
+    value(val) {
+      this.$nextTick(() => {
+        this.initialChart()
+      })
+    }
+  },
+  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() {
+      this.destroyChart()
+      let that = this
+      let color = new echarts.graphic.LinearGradient(1, 0, 0, 0, [
+        { offset: 0, color: this.color[0] },
+        { offset: 1, color: this.color[1] }
+      ])
+      let option = {
+        title: {
+          text: this.value + '%',
+          textStyle: {
+            color: '#eee',
+            fontFamily: 'AgencyFB-Bold',
+            fontSize: fontSize(24)
+          },
+          subtext: '占比',
+          subtextStyle: {
+            fontSize: fontSize(14),
+            fontFamily: 'Source Han Sans CN',
+            fontWeight: 400,
+            color: ' #84BDE5'
+          },
+          left: 'center',
+          top: '30%'
+        },
+        tooltip: {
+          show: true,
+          borderWidth: 0,
+          textStyle: {
+            color: '#fff'
+          },
+          backgroundColor: 'rgba(50,50,50,0.7)',
+          formatter: function (params) {
+            return params.marker + '占比' + that.value + '%'
+          },
+          confine: true
+        },
+        angleAxis: {
+          max: 100,
+          clockwise: true, // 逆时针
+          // 隐藏刻度线
+          axisLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          },
+          axisLabel: {
+            show: false
+          },
+          splitLine: {
+            show: false
+          }
+        },
+        radiusAxis: {
+          type: 'category',
+          // 隐藏刻度线
+          axisLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          },
+          axisLabel: {
+            show: false
+          },
+          splitLine: {
+            show: false
+          }
+        },
+        polar: {
+          center: ['50%', '50%'],
+          radius: '160%' //图形大小
+        },
+        series: [
+          {
+            type: 'bar',
+            data: [
+              {
+                value: this.value,
+                itemStyle: {
+                  color
+                }
+              }
+            ],
+            coordinateSystem: 'polar',
+            roundCap: false,
+            barWidth: 13,
+            barGap: '-100%', // 两环重叠
+            z: 2
+          },
+          {
+            // 灰色环
+            type: 'bar',
+            data: [
+              {
+                value: 100,
+                itemStyle: {
+                  color: '#104775',
+                  shadowColor: 'rgba(0, 0, 0, 0.2)',
+                  shadowBlur: 5,
+                  shadowOffsetY: 2
+                }
+              }
+            ],
+            coordinateSystem: 'polar',
+            roundCap: false,
+            barWidth: 13,
+            barGap: '-100%', // 两环重叠
+            z: 1
+          }
+        ]
+      }
+      this.creatChart(option, this.$refs.chart)
+    },
+    creatChart(option, ref) {
+      this.myChart = echarts.init(ref) //this.$refs.chart
+      this.myChart.resize()
+      this.myChart.setOption(option, {
+        notMerge: true
+      })
+    }
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.onResize)
+    this.destroyChart()
+  }
+}
+</script>
+
+<style lang='scss' scoped>
+.chart {
+  height: 100%;
+  width: 100%;
+}
+</style>

src/views/groupPage/districtPageModules/customTools/layerControl.vue

@@ -1,6 +1,10 @@
 <template>
   <div class="widget-layerControl">
     <el-tabs v-model="activeName" @tab-click="tabClick">
+      <el-tab-pane label="BIM模型" name="bimlayer">
+        <el-tree ref="baseTree" :data="BIMLayers" node-key="id" :props="defaultProps" @node-click="LocateToBIM">
+        </el-tree>
+      </el-tab-pane>
       <el-tab-pane label="基础图层" name="baselayer">
         <el-tree
           ref="baseTree"
@@ -85,6 +89,9 @@ export default {
         themelayer: 'themelayer'
       },
 
+      BIMLayers: [],
+      bimDefaultCheck: [],
+      //
       baselayers: [],
       themelayers: [],
       sjlayers: [],
@@ -232,6 +239,8 @@ export default {
     initLayers() {
       //树状数据处理
       this.loadLayerList()
+      //特殊处理额外的BIM模型数据
+      this.loadBimLayer()
     },
     /**
      * 加载图层信息
@@ -598,6 +607,30 @@ export default {
           })
           break
       }
+    },
+    /* 额外的bim模型图层控制 */
+    loadBimLayer() {
+      let layers = this.viewer.scene.layers.layerQueue.filter((i) => i.sceneType == 'BIM模型'),
+        temp = []
+      layers.forEach((item) => {
+        let target = temp.find((i) => i.label == item.aliasName)
+        if (!target) {
+          temp.push({ label: item.aliasName, children: [], info: { ...item } })
+        }
+      })
+      this.BIMLayers = temp
+    },
+    LocateToBIM(data) {
+      const { info } = data || {}
+      const { lat, lon } = info
+      this.viewer.camera.flyTo({
+        destination: Cesium.Cartesian3.fromDegrees(lon, lat, 500),
+        orientation: {
+          heading: 0,
+          pitch: Cesium.Math.toRadians(-90),
+          roll: 0
+        }
+      })
     }
   }
 }

src/views/groupPage/districtPageModules/projectPanoramic/ProjectProgressNew.vue

@@ -29,7 +29,23 @@
             <div class="icon"></div>
             <span class="item-name">本年结算情况</span>
           </div>
-          <div class="content"></div>
+          <div class="content">
+            <div class="chart-container">
+              <ComRightAngelPercentChart :value="0" />
+            </div>
+            <div class="dataInfo">
+              <div class="data-item" v-for="(item, index) of settleList" :key="item.name">
+                <div
+                  class="pointSymbol"
+                  :style="index == 0 ? 'background:#2BA7FF;box-shadow: 0px 0px 10px #2BA7FF;' : ''"
+                ></div>
+                <div class="data-wrap">
+                  <div class="data-title">{{ item.name }}</div>
+                  <div class="data-value data-value-settle">{{ item.value }} {{ item.unit }}</div>
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
         <!--  -->
         <div class="content-item outputValue">
@@ -37,7 +53,28 @@
             <div class="icon"></div>
             <span class="item-name">建管本年产值统计</span>
           </div>
-          <div class="content"></div>
+          <div class="content">
+            <div class="chart-container">
+              <div class="chart-title">
+                完成占比：<span>{{ complishPercent }}%</span>
+              </div>
+              <ComThreeDimensionsChart v-on="{ fontSize }" :chartData="staList" :distance="150" />
+              <!-- 底座背景 -->
+              <div class="bg" :style="{ 'background-image': `url('${url}')` }"></div>
+            </div>
+            <div class="dataInfo">
+              <div class="data-item" v-for="(item, index) of staList" :key="item.name">
+                <div
+                  class="pointSymbol"
+                  :style="index == 0 ? 'background:#13D28A;box-shadow: 0px 0px 10px #13D28A;' : ''"
+                ></div>
+                <div class="data-wrap">
+                  <div class="data-title">{{ item.name }}</div>
+                  <div class="data-value">{{ item.value }} {{ item.unit }}</div>
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
         <!--  -->
         <div class="content-item outputValueSta">
@@ -45,7 +82,36 @@
             <div class="icon"></div>
             <span class="item-name">建管本年产值统计</span>
           </div>
-          <div class="content"></div>
+          <div class="content OVSContent">
+            <div class="bc-item">
+              <div class="bc-title">人员配置</div>
+              <div class="bc-value">
+                总人数：<span>{{ totalPerson }}</span>
+              </div>
+            </div>
+            <div class="bc-content">
+              <div class="bcb-item" v-for="item in staffingList" :key="item.title">
+                <div class="bcb-title">{{ item.title }}</div>
+                <div class="bcb-value">{{ item.value }}{{ item.unit }}</div>
+              </div>
+            </div>
+            <div class="bc-item">
+              <div class="bc-title">设备配置</div>
+              <div class="bc-value">
+                总数量：<span>{{ totalDevice }}</span>
+              </div>
+            </div>
+            <div class="bcb-content">
+              <el-carousel :autoplay="true" direction="vertical">
+                <el-carousel-item v-for="(part, index) in devicesList" :key="index">
+                  <div class="bcbc-item" v-for="item in part.list" :key="item.title">
+                    <div class="bcbc-title">{{ item.title }}</div>
+                    <div class="bcbc-value">{{ item.value }}{{ item.unit }}</div>
+                  </div>
+                </el-carousel-item>
+              </el-carousel>
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -61,6 +127,8 @@ import ComOneBatteryChart from '../../components/BatteryChart/ComOneBatteryChart
 import ComProgressChart from '../../components/BarChart/ComProgressChart.vue'
 import ComProgressPieChart from '../../components/PieChart/ComProgressPieChart.vue'
 import ComThreeDimensionsChart from '../../components/OthersChart/ComThreeDimensionsChart.vue'
+import ComRightAngelPercentChart from '../../components/PieChart/ComRightAngelPercentChart.vue'
+
 const staffTypeList = [
   { code: 'person_all', name: '总包部' },
   { code: 'person_build', name: '建设部' },
@@ -82,7 +150,13 @@ const deviceTypeList = [
 //项目进展
 @Component({
   name: 'ProjectProgress',
-  components: { ComOneBatteryChart, ComProgressChart, ComProgressPieChart, ComThreeDimensionsChart }
+  components: {
+    ComOneBatteryChart,
+    ComProgressChart,
+    ComProgressPieChart,
+    ComThreeDimensionsChart,
+    ComRightAngelPercentChart
+  }
 })
 export default class ProjectProgress extends Vue {
   @Prop({ type: Object, default: () => {} }) dataInfo!: any
@@ -93,6 +167,7 @@ export default class ProjectProgress extends Vue {
   buildStatusData: object = {}
   buildDredgingData: object = {}
   complishPercent: number = 0 //完成占比
+  settleList: Array<any> = [{}, {}]
   staList: Array<any> = [{}, {}]
   totalPerson: number = 0
   totalDevice: number = 0
@@ -107,98 +182,9 @@ export default class ProjectProgress extends Vue {
   get projectCode() {
     return this.$store.state.bigScreen.currentProjectCode
   }
-  // @Watch('projectCode', { immediate: true })
-  // onChangMehod() {
-  //   setTimeout(() => {
-  //     this.getPageData()
-  //   }, 3000)
-  // }
   roundFun(value, n) {
     return Math.round(value * Math.pow(10, n)) / Math.pow(10, n)
   }
-  // getPageData() {
-  //   let data = { blockCode: 'ycepclist' }
-  //   let projectCode = this.projectCode
-  //   this.reset()
-  //   //获取全部数据
-  //   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,
-  //         indexValue:
-  //           item.unit === '万'
-  //             ? this.roundFun(this.setNoNull(item.indexValue) / 10000, 4)
-  //             : this.setNoNull(item.indexValue)
-  //       }
-  //     })
-  //     //投资完成情况
-  //     this.investData = {
-  //       num: res.find((e) => e.indexCode == projectCode + '-' + 21).indexValue,
-  //       numUnit: res.find((e) => e.indexCode == projectCode + '-' + 2).unit,
-  //       total: res.find((e) => e.indexCode == projectCode + '-' + 2).indexValue,
-  //       totalUnit: res.find((e) => e.indexCode == projectCode + '-' + 2).unit
-  //     }
-  //     //设计进度
-  //     this.progressData = this.progressData.map((item, index) => {
-  //       let target = index * 2
-  //       return {
-  //         name: res.find((e) => e.indexCode == projectCode + '-' + (index + 22)).indexName,
-  //         percent:
-  //           res.find((e) => e.indexCode == projectCode + '-' + (index + 22)).indexValue +
-  //           res.find((e) => e.indexCode == projectCode + '-' + (index + 22)).unit,
-  //         totalAmout: res.find((e) => e.indexCode == projectCode + '-' + (target + 25)).indexValue,
-  //         finishAmout: res.find((e) => e.indexCode == projectCode + '-' + (target + 26)).indexValue
-  //       }
-  //     })
-  //     //施工进度
-  //     this.buildStatusData = {
-  //       building: res.find((e) => e.indexCode == projectCode + '-' + 31).indexValue,
-  //       finished: res.find((e) => e.indexCode == projectCode + '-' + 32).indexValue,
-  //       nobuilding: res.find((e) => e.indexCode == projectCode + '-' + 33).indexValue,
-  //       unit: res.find((e) => e.indexCode == projectCode + '-' + 31).unit
-  //     }
-  //     this.buildDredgingData = {
-  //       building: res.find((e) => e.indexCode == projectCode + '-' + 34).indexValue,
-  //       finished: 0,
-  //       nobuilding: res.find((e) => e.indexCode == projectCode + '-' + 35).indexValue,
-  //       unit: res.find((e) => e.indexCode == projectCode + '-' + 34).unit
-  //     }
-  //     //上周项目情况
-  //     this.complishPercent =
-  //       res.find((e) => e.indexCode == projectCode + '-' + 38).indexValue +
-  //       res.find((e) => e.indexCode == projectCode + '-' + 38).unit
-  //     this.staList = this.staList.map((item, index) => {
-  //       return {
-  //         name: res.find((e) => e.indexCode == projectCode + '-' + (index + 36)).indexName,
-  //         value: res.find((e) => e.indexCode == projectCode + '-' + (index + 36)).indexValue,
-  //         unit: '亿'
-  //       }
-  //     })
-  //     //
-  //     this.totalPerson = res.find((e) => e.indexCode == projectCode + '-' + +39).indexValue
-  //     this.totalDevice = res.find((e) => e.indexCode == projectCode + '-' + +40).indexValue
-  //     res
-  //       .filter((item) => item.indexCode.indexOf(projectCode + '-' + '40') != -1)
-  //       .forEach((citem) => {
-  //         this.staffingList.push({
-  //           title: citem.indexName,
-  //           value: citem.indexValue,
-  //           unit: citem.unit
-  //         })
-  //       })
-  //     res
-  //       .filter((item) => item.indexCode.indexOf(projectCode + '-' + '44') != -1)
-  //       .forEach((citem) => {
-  //         this.devicesList.push({
-  //           title: citem.indexName,
-  //           value: citem.indexValue,
-  //           unit: citem.unit
-  //         })
-  //       })
-  //   })
-  // }
   reset() {
     this.staffingList = []
     this.devicesList = []
@@ -228,8 +214,12 @@ export default class ProjectProgress extends Vue {
     this.contructContent = contruct_content
     this.complishPercent = year_finish_ratio
     this.staList = [
-      { name: '本年计划完成产值', value: +year_plan, unit: '万元' },
-      { name: '本年实际完成产值', value: +year_finish, unit: '万元' }
+      { name: '本年完成产值', value: +year_finish, unit: '万元' },
+      { name: '年度产值计划', value: +year_plan, unit: '万元' }
+    ]
+    this.settleList = [
+      { name: '本年投资计划', value: 0, unit: '万元' },
+      { name: '本年结算金额', value: 0, unit: '万元' }
     ]
     let staff = [],
       devices = []
@@ -243,9 +233,22 @@ export default class ProjectProgress extends Vue {
     }
     this.staffingList = staff
     this.totalPerson = this.countTotal(staff, 'value')
-    this.devicesList = devices
+    this.devicesList = this.splitArr(devices, 4)
     this.totalDevice = this.countTotal(devices, 'value')
   }
+  splitArr(res, splitNum = 5) {
+    let temp = [],
+      symbol = 0
+    res.forEach((item: any, index) => {
+      if ((index + 1) % splitNum != 0) {
+        temp[symbol] ? temp[symbol].list.push({ ...item }) : temp.push({ list: [{ ...item }] })
+      } else {
+        temp[symbol].list.length < splitNum ? temp[symbol].list.push({ ...item }) : temp.push({ list: [{ ...item }] })
+        symbol++
+      }
+    })
+    return temp
+  }
   countTotal(arr, keyName) {
     let total = 0
     total = arr.reduce(function (total, currentValue, currentIndex, arr) {
@@ -372,16 +375,221 @@ export default class ProjectProgress extends Vue {
         line-height: 0.109375rem /* 21/192 */;
         word-break: break-all;
       }
+      .chart-container {
+        width: 50%;
+        position: relative;
+        .chart-title {
+          position: absolute;
+          left: 0.15625rem /* 30/192 */;
+          font-size: 0.083333rem /* 16/192 */;
+          font-family: Source Han Sans CN;
+          font-weight: bold;
+          top: 0.052083rem /* 10/192 */;
+          color: #ffffff;
+          white-space: normal;
+          span {
+            font-family: AgencyFB-Bold;
+            font-weight: bold;
+            font-size: 0.104167rem /* 20/192 */;
+          }
+        }
+        .bg {
+          width: 100%;
+          height: 100%;
+        }
+        .bg {
+          position: absolute;
+          top: 0;
+          left: -0.026042rem /* 5/192 */;
+          right: 0;
+          margin: 0 auto;
+          width: 80%;
+          // width: 55%;
+          // height: 95%;
+          // left: 0.041667rem /* 8/192 */;
+          z-index: -1;
+          // width: 0.46875rem /* 90/192 */;
+          // height: 0.390625rem /* 75/192 */;
+          background: no-repeat center;
+          // background-image: url('~@/views/groupPage/images/底座样式.png');
+          background-size: 100% 100%;
+        }
+      }
+      .dataInfo {
+        width: 50%;
+        display: flex;
+        flex-flow: column;
+        justify-content: space-around;
+        font-family: Source Han Sans CN;
+
+        .data-item {
+          display: flex;
+          align-items: center;
+          padding: 0.052083rem /* 10/192 */;
+          color: #ffffff;
+          height: 45%;
+          position: relative;
+          .pointSymbol,
+          .data-title {
+            margin-right: 0.052083rem /* 10/192 */;
+            white-space: nowrap;
+          }
+          .pointSymbol {
+            border-radius: 50%;
+            height: 0.052083rem /* 10/192 */;
+            width: 0.052083rem /* 10/192 */;
+          }
+          .data-wrap {
+            display: flex;
+            flex-flow: column;
+          }
+          .data-title {
+            font-size: 0.072917rem /* 14/192 */;
+            font-weight: 400;
+            color: #87bfe8;
+          }
+          .data-value {
+            font-size: 0.09375rem /* 18/192 */;
+            font-family: AgencyFB-Bold;
+            font-weight: bold;
+            // color: #ffffff;
+            padding: 0.052083rem /* 10/192 */ 0;
+          }
+        }
+        .data-item:first-child {
+          .data-value {
+            color: #13d28a;
+            background: linear-gradient(0deg, #01b174 0%, #35ffcb 100%);
+            background-clip: text;
+            -webkit-text-fill-color: transparent;
+          }
+          .data-value-settle {
+            color: #12d3ff;
+            background: linear-gradient(180deg, #50d6fd 0%, #2d92fa 100%);
+            background-clip: text;
+            -webkit-text-fill-color: transparent;
+          }
+        }
+        .data-item:first-child::after {
+          content: '';
+          height: 0.005208rem /* 1/192 */;
+          width: 90%;
+          background: rgba(11, 122, 192, 0.3);
+          left: 0;
+          right: 0;
+          bottom: 0;
+          margin: 0 auto;
+          position: absolute;
+        }
+      }
+      .OVSContent {
+        width: 100%;
+        height: calc(100% - 0.135417rem /* 26/192 */);
+        display: flex;
+        flex-flow: column;
+        .bc-item {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          width: 100%;
+          height: 0.208333rem /* 40/192 */;
+          background: rgba(14, 167, 255, 0.14);
+          padding: 0.052083rem /* 10/192 */;
+          margin-bottom: 0.03125rem /* 6/192 */;
+          .bc-title {
+            font-size: 0.072917rem /* 14/192 */;
+            font-weight: 500;
+            color: #2ba7ff;
+          }
+          .bc-value {
+            font-size: 0.072917rem /* 14/192 */;
+            font-weight: 400;
+            color: rgba(139, 191, 228, 1);
+            & > span {
+              font-family: AgencyFB-Bold;
+              font-weight: bold;
+              color: rgba(43, 167, 255, 1);
+            }
+          }
+        }
+        .bc-content {
+          height: 0.3125rem /* 60/192 */;
+          width: 100%;
+          background: rgba(255, 255, 255, 0.1);
+          margin-bottom: 0.052083rem /* 10/192 */;
+          display: flex;
+          justify-content: space-around;
+          .bcb-item {
+            height: 100%;
+            display: flex;
+            flex-flow: column;
+            justify-content: space-around;
+            .bcb-title {
+              font-size: 0.072917rem /* 14/192 */;
+              font-weight: 400;
+              color: #ffffff;
+            }
+            .bcb-value {
+              font-size: 0.072917rem /* 14/192 */;
+              font-weight: 500;
+              color: #ffffff;
+              text-align: center;
+            }
+          }
+        }
+        .bcb-content {
+          width: 100%;
+          height: 0.442708rem /* 85/192 */;
+          overflow: auto;
+          /deep/ .el-carousel {
+            height: 100%;
+            width: 100%;
+            .el-carousel__container {
+              height: inherit;
+              width: inherit;
+            }
+            .el-carousel__indicators {
+              display: none;
+            }
+          }
+          .bcbc-item {
+            width: calc(50% - 0.020833rem /* 4/192 */);
+            height: 0.208333rem /* 40/192 */;
+            background: rgba(255, 255, 255, 0.1);
+            float: left;
+            margin-bottom: 0.026042rem /* 5/192 */;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 0 0.052083rem /* 10/192 */;
+            font-size: 0.072917rem /* 14/192 */;
+            color: #ffffff;
+            .bcbc-title {
+              font-family: Source Han Sans CN;
+              font-weight: 400;
+            }
+            .bcbc-value {
+              font-family: Source Han Sans CN-MEDIUM;
+              font-weight: 500;
+            }
+          }
+          .bcbc-item:nth-child(odd) {
+            margin-right: 0.041667rem /* 8/192 */;
+          }
+        }
+      }
     }
     .progress {
-      height: 0.859375rem /* 165/192 */ !important;
+      // height: 0.859375rem /* 165/192 */ !important;
+      height: calc(100% - 3.666667rem /* 704/192 */) !important;
     }
     .settlement,
     .outputValue {
-      height: 1.041667rem /* 200/192 */ !important;
+      height: 0.9375rem /* 180/192 */ !important;
     }
     .outputValueSta {
-      height: calc(100% - 3.151042rem /* 605/192 */) !important;
+      // height: calc(100% - 3.151042rem /* 605/192 */) !important;
+      height: 1.583333rem /* 304/192 */ !important;
     }
   }
 }

src/views/groupPage/districtPageModules/projectPanoramic/index.vue

@@ -7,7 +7,7 @@
     <!--项目图册-->
     <ProjectPhotos />
     <!--项目进展-->
-    <ProjectProgress :dataInfo="dataInfo" />
+    <ProjectProgressNew :dataInfo="dataInfo" />
     <!--项目统计-->
     <ProjectIndexStatistic :dataInfo="dataInfo" />
   </div>
@@ -18,7 +18,7 @@ import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
 import ProjectOverview from './ProjectOverview.vue'
 import ParticipationUnits from './ParticipationUnits.vue'
 import ProjectPhotos from './ProjectPhotos.vue'
-import ProjectProgress from './ProjectProgress.vue'
+import ProjectProgressNew from './ProjectProgressNew.vue'
 import ProjectIndexStatistic from './ProjectIndexStatistic.vue'
 import { getEpcProjectInfo } from '../../apis'
 //
@@ -26,7 +26,7 @@ import pbsTree from '../../districtPageModules/customTools/pbsTree.vue'
 //工程全景模块
 @Component({
   name: 'projectPanoramic',
-  components: { ProjectOverview, ParticipationUnits, ProjectPhotos, ProjectProgress, ProjectIndexStatistic }
+  components: { ProjectOverview, ParticipationUnits, ProjectPhotos, ProjectProgressNew, ProjectIndexStatistic }
 })
 export default class projectPanoramic extends Vue {
   pbsTreeInfo = null

src/views/groupPage/districtPageModules/statisticalAnalysis/ThemeSwitch.vue

@@ -39,7 +39,8 @@ export default class specialSwitch extends Vue {
   dataList: Array<any> = [
     { title: '进度', name: 'progress' },
     { title: '质量', name: 'quality' },
-    { title: '安全', name: 'security' }
+    { title: '安全', name: 'security' },
+    { title: '投资', name: 'invest' }
   ]
   subList: Array<any> = ['进度专题', '管道开挖']
   childrenActive = null
@@ -97,9 +98,9 @@ export default class specialSwitch extends Vue {
 .widget-specialSwitch {
   top: 0.505208rem /* 97/192 */;
   left: 50%;
-  margin-left: -1.041667rem /* 200/192 */;
+  margin-left: -1.276042rem /* 245/192 */;
   height: 0.416667rem /* 80/192 */;
-  width: 2.083333rem /* 400/192 */;
+  width: 2.552083rem /* 490/192 */;
   position: absolute;
   font-family: Source Han Sans CN;
   .boxpanel {

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

@@ -178,7 +178,6 @@ export default class ProjectSituationofQM extends Vue {
       (item) => moment(new Date()).diff(moment(item.create_time), 'days') < moment(new Date()).daysInMonth()
     )
     this.recordsList = result.records
-    console.log('质量验评记录', this.recordsList)
   }
   async getImgData() {
     const res = await getImgFiles({ size: 999, imgType: 'tjfxzl', groupCode: this.projectCode, isShow: 1 })

src/views/groupPage/districtPageModules/statisticalAnalysis/securityModule/InspectionsNum.vue

@@ -86,6 +86,7 @@ export default class InspectionsNum extends Vue {
   animation-delay: 0s; //动画延迟时间
 }
 .widget-InspectionsNum {
+  background-color: #000;
   bottom: 0.052083rem /* 10/192 */;
   left: 50%;
   margin-left: -2.645833rem /* 508/192 */;
@@ -126,7 +127,7 @@ export default class InspectionsNum extends Vue {
     width: 100%;
     height: calc(100% - 0.166667rem);
     display: inline-block;
-    background: linear-gradient(0deg, rgba(14, 167, 255, 0.16) 0%, rgba(14, 167, 255, 0.02) 100%);
+    background: linear-gradient(0deg, rgba(14, 167, 255, 0.238) 0%, rgba(14, 167, 255, 0) 100%);
     font-family: Source Han Sans CN;
   }
 }

src/views/groupPage/districtPageModules/statisticalAnalysis/securityModule/RiskAndSecurityNew.vue

@@ -0,0 +1,374 @@
+<template>
+  <transition
+    appear
+    name="animate__animated animate__move"
+    enter-active-class="animate__slideInRight"
+    leave-active-class="animate__slideOutRight"
+  >
+    <div class="widget-RiskAndSecurityNew">
+      <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="securityContent">
+          <div class="title">
+            <div class="icon"></div>
+            <span class="item-name">安全</span>
+          </div>
+          <!---->
+          <div class="sc-text">
+            <div class="sctItem">
+              <div class="sctItem-content">
+                <span class="sctItem-title"></span>
+                {{ weeklySafetyReport }}
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="rectificationStatistic">
+          <div class="title">
+            <div class="icon"></div>
+            <span class="item-name">近7天隐患创建情况</span>
+          </div>
+          <div class="rsChart">
+            <RiskTypeChart :chartData="chartData" />
+          </div>
+        </div>
+        <!---->
+        <div class="riskContent">
+          <div class="risk-item" v-for="(item, index) in [0, 1, 2, 3]" :key="index">
+            <div class="risk-title">
+              <div class="type-name">
+                <span :style="{ border: '1px solid #ff2828', color: '#ff2828' }">重大</span>
+                <span>安全防护</span>
+              </div>
+              <div class="time-status">
+                <span>2023/4/22 16:32:19</span>
+                <span>待整改</span>
+              </div>
+            </div>
+            <div class="risk-content">
+              <span>珠海路WZH1a</span>
+              <span>未按标准佩戴安全帽未按标准佩戴安全帽未按标准佩戴安全帽 未按标准佩戴安全帽</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script lang="ts">
+import moment from 'moment'
+import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
+import RiskTypeChart from '../../../components/ComprehensiveChart/riskTypeChart.vue'
+import { getRequestResult, getDangerCheckSevenDayData, getWeekCountData } from '../../../apis'
+//近期隐患与安全(2023/5/5)
+@Component({
+  name: 'RiskAndSecurityNew',
+  components: { RiskTypeChart }
+})
+export default class RiskAndSecurityNew extends Vue {
+  beginTime = moment(new Date().setDate(new Date().getDate() - 6)).format('YYYY.MM.DD')
+  endTime = moment(new Date()).format('YYYY.MM.DD')
+  // beginTime = ''
+  // endTime = ''
+  weeklySafetyReport = ''
+  chartData = {}
+  rcStaList = [
+    { level: '一级', lastMonth: 22, past6Months: 50 },
+    { level: '二级', lastMonth: 22, past6Months: 50 },
+    { level: '三级', lastMonth: 22, past6Months: 50 },
+    { level: '四级', lastMonth: 22, past6Months: 50 },
+    { level: '高风险作业', lastMonth: 22, past6Months: 50 }
+  ]
+  rcList = []
+  get projectCode() {
+    return this.$store.state.bigScreen.currentProjectCode
+  }
+  @Watch('projectCode', { immediate: true })
+  onChangMehod() {
+    this.getPageData()
+  }
+  async getPageData() {
+    let data = { blockCode: 'ycepclist' }
+    let projectCode = this.projectCode
+    //获取全部数据
+    const result = await getRequestResult(data)
+    let res = (result as any).filter((item) => item.indexCode.indexOf(projectCode + '-') != -1)
+    res = res.map((item) => {
+      Object.keys(item).forEach((val) => (item[val] = item[val] || ''))
+      return { ...item }
+    })
+    // this.weeklySafetyReport = res.find((e) => e.indexCode == projectCode + '-' + 148).indexValue
+    let dataIndex = Array.from({ length: 7 }, (value, key) => key + 1), //1-7
+      xData = [],
+      report = [],
+      rectification = []
+    // dataIndex.forEach((item) => {
+    //   xData.push(res.find((e) => e.indexCode == projectCode + '-' + '149' + '-' + item).indexName.split('上')[0])
+    //   report.push(res.find((e) => e.indexCode == projectCode + '-' + '149' + '-' + item).indexValue)
+    //   rectification.push(res.find((e) => e.indexCode == projectCode + '-' + '150' + '-' + item).indexValue)
+    // })
+    // this.chartData = {
+    //   xData,
+    //   report,
+    //   rectification
+    // }
+    this.rcList = res.find((e) => e.indexCode == projectCode + '-' + 151).indexValue.split('/')
+
+    const interfaceResult = await getDangerCheckSevenDayData({ code: this.projectCode })
+    console.log('近7天隐患上报和隐患整改数量统计', interfaceResult)
+    this.chartData = {
+      xData: ['05/01', '05/02', '05/03', '05/04', '05/05', '05/06', '05/07'],
+      levelOne: [11, 12, 31, 42, 54, 62, 77],
+      levelTwo: [41, 22, 37, 45, 33, 38, 17],
+      levelThree: [31, 52, 23, 34, 65, 46, 87]
+    }
+    //
+    const WeekCountData = await getWeekCountData({ code: this.projectCode })
+    if (!WeekCountData.result) return
+    const { safety_content, start_date, end_date } = WeekCountData.result || {}
+    this.weeklySafetyReport = safety_content
+    // this.beginTime = start_date.split(' ')[0]
+    // this.endTime = end_date.split(' ')[0]
+  }
+}
+</script>
+
+<style lang='scss' scoped>
+.animate__slideInRight,
+.animate__slideOutRight {
+  animation-duration: 3s; //动画持续时间
+  animation-delay: 0s; //动画延迟时间
+}
+.widget-RiskAndSecurityNew {
+  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);
+    display: inline-block;
+    background: linear-gradient(0deg, rgba(14, 167, 255, 0.16) 0%, rgba(14, 167, 255, 0.02) 100%);
+    font-family: Source Han Sans CN;
+    .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;
+      }
+    }
+    .securityContent {
+      margin-top: 0.09375rem /* 18/192 */;
+      width: 100%;
+      height: 0.885417rem /* 170/192 */;
+      background: #051e32;
+      padding: 0.052083rem /* 10/192 */;
+      overflow: hidden;
+      .sc-text {
+        margin-top: 0.072917rem /* 14/192 */;
+        height: calc(100% - 0.145833rem /* 28/192 */);
+        width: 100%;
+        overflow: auto;
+        .sctItem {
+          width: 100%;
+          color: #feffff;
+          font-family: Source Han Sans CN;
+          font-size: 0.072917rem /* 14/192 */;
+          .sctItem-content {
+            line-height: 0.114583rem /* 22/192 */;
+            word-break: break-all;
+            .sctItem-title {
+              color: #17aaff;
+            }
+          }
+        }
+      }
+    }
+    .rectificationStatistic {
+      margin-top: 0.104167rem /* 20/192 */;
+      height: 1.25rem /* 240/192 */;
+      width: 100%;
+      padding: 0.052083rem /* 10/192 */;
+      .rsChart {
+        height: calc(100% - 0.072917rem /* 14/192 */);
+        width: 100%;
+      }
+    }
+    .riskContent {
+      margin-top: 0.052083rem /* 10/192 */;
+      width: 100%;
+      height: calc(100% - 2.385417rem /* 458/192 */);
+      padding: 0.052083rem /* 10/192 */;
+      overflow: auto;
+      .risk-item {
+        width: 100%;
+        height: 0.520833rem /* 100/192 */;
+        display: flex;
+        align-items: center;
+        flex-flow: column;
+        position: relative;
+        margin-bottom: 0.104167rem /* 20/192 */;
+        .risk-title {
+          width: 100%;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          .type-name {
+            display: flex;
+            align-items: center;
+            & > span:first-child {
+              display: inline-block;
+              width: 0.208333rem /* 40/192 */;
+              height: 0.104167rem /* 20/192 */;
+              border-radius: 2px;
+              font-size: 0.072917rem /* 14/192 */;
+              font-family: Source Han Sans CN;
+              font-weight: 400;
+              text-align: center;
+              line-height: 0.09375rem /* 18/192 */;
+              margin-right: 0.03125rem /* 6/192 */;
+            }
+            span {
+              font-size: 0.083333rem /* 16/192 */;
+              font-family: Source Han Sans CN;
+              font-weight: 500;
+              color: #ffffff;
+            }
+          }
+          .time-status {
+            display: flex;
+            align-items: center;
+            & > span:last-child {
+              display: inline-block;
+              width: 0.260417rem /* 50/192 */;
+              height: 0.104167rem /* 20/192 */;
+              background: linear-gradient(90deg, #dc8310, #d99032);
+              border-radius: 0.010417rem /* 2/192 */;
+              font-size: 0.072917rem /* 14/192 */;
+              font-family: Source Han Sans CN;
+              font-weight: 400;
+              color: #ffffff;
+              text-align: center;
+              line-height: 0.09375rem /* 18/192 */;
+              margin-left: 0.041667rem /* 8/192 */;
+            }
+            span {
+              font-size: 0.072917rem /* 14/192 */;
+              font-family: Source Han Sans CN;
+              font-weight: 400;
+              color: #7fbfe4;
+            }
+          }
+        }
+        .risk-content {
+          height: calc(100% - 0.104167rem /* 20/192 */);
+          width: 100%;
+          overflow: auto;
+          display: flex;
+          flex-flow: column;
+          & > span:first-child {
+            margin-top: 0.083333rem /* 16/192 */;
+            font-size: 0.072917rem /* 14/192 */;
+            font-family: Source Han Sans CN;
+            font-weight: 500;
+            color: #0ea7ff;
+          }
+          & > span:last-child {
+            margin-top: 0.041667rem /* 8/192 */;
+            font-size: 0.072917rem /* 14/192 */;
+            font-family: Source Han Sans CN;
+            font-weight: 500;
+            color: #ffffff;
+          }
+        }
+      }
+      .risk-item::after {
+        content: '';
+        height: 1px;
+        width: 100%;
+        background: rgba(255, 255, 255, 0.24);
+        position: absolute;
+        bottom: 0;
+      }
+    }
+  }
+}
+</style>

src/views/groupPage/districtPageModules/statisticalAnalysis/securityModule/StatisticalRisk.vue

@@ -44,6 +44,15 @@
         <div class="grandTotalChart">
           <StatisticalReportingChart :type="'reporting'" :chartData="chartData" />
         </div>
+        <div class="rankingOfTypes">
+          <div class="title">
+            <div class="icon"></div>
+            <span class="item-name">隐患类型排行榜</span>
+          </div>
+          <div class="content">
+            <ComRankingBarChart />
+          </div>
+        </div>
       </div>
     </div>
   </transition>
@@ -53,12 +62,13 @@
 import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
 import ComProgressPercentChart from '../../../components/PieChart/ComProgressPercentChart.vue'
 import StatisticalReportingChart from '../../../components/ComprehensiveChart/statisticalReportingChart.vue'
+import ComRankingBarChart from '../../../components/BarChart/ComRankingBarChart.vue'
 import { getRequestResult, getDangerCheckCountData } from '../../../apis'
 import { roundFun } from '@/views/groupPage/util'
 //隐患统计
 @Component({
   name: 'StatisticalRisk',
-  components: { ComProgressPercentChart, StatisticalReportingChart }
+  components: { ComProgressPercentChart, StatisticalReportingChart, ComRankingBarChart }
 })
 export default class StatisticalRisk extends Vue {
   riskPercent = 0
@@ -195,6 +205,23 @@ export default class StatisticalRisk extends Vue {
     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: 0 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;
+      }
+    }
     .riskPercent {
       margin-top: 0.09375rem /* 18/192 */;
       height: 0.385417rem /* 74/192 */;
@@ -319,7 +346,16 @@ export default class StatisticalRisk extends Vue {
     .grandTotalChart {
       width: 100%;
       // height: calc(100% - 1.1875rem /* 228/192 */);
-      height: calc(100% - 0.479167rem /* 92/192 */);
+      // height: calc(100% - 0.479167rem /* 92/192 */);
+      height: 1.041667rem /* 200/192 */;
+    }
+    .rankingOfTypes {
+      width: 100%;
+      height: calc(100% - 1.520833rem /* 292/192 */);
+      .content {
+        width: 100%;
+        height: calc(100% - 0.072917rem /* 14/192 */);
+      }
     }
   }
 }

src/views/groupPage/districtPageModules/statisticalAnalysis/securityModule/StatisticalSecurity.vue

@@ -25,12 +25,12 @@
             <div class="icon"></div>
             <span class="item-name">危险源等级</span>
           </div>
-          <div class="hierarchy">
+          <!-- <div class="hierarchy">
             <div class="subhierarchy sh0">一级</div>
             <div class="subhierarchy sh1">二级</div>
             <div class="subhierarchy sh2">三级</div>
             <div class="subhierarchy sh3">四级</div>
-          </div>
+          </div> -->
           <div class="hierarchyChart">
             <RiskLevelChart :chartData="chartData" />
           </div>
@@ -175,7 +175,7 @@ export default class StatisticalSecurity extends Vue {
       .icon {
         height: 0.072917rem /* 14/192 */;
         width: 0.078125rem /* 15/192 */;
-        margin-right: 0.046875rem /* 9/192 */;
+        margin: 0 0.046875rem /* 9/192 */;
         background: url('~@/views/groupPage/images/三角.png') no-repeat center center;
         background-size: 100% 100%;
       }
@@ -267,7 +267,8 @@ export default class StatisticalSecurity extends Vue {
       }
       .hierarchyChart {
         width: 100%;
-        height: calc(100% - 0.25rem /* 48/192 */);
+        // height: calc(100% - 0.25rem /* 48/192 */);
+        height: calc(100% - 0.072917rem /* 14/192 */);
       }
     }
   }

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

@@ -5,7 +5,7 @@
     <!--安全统计-->
     <StatisticalSecurity />
     <!--近期隐患与安全-->
-    <RiskAndSecurity />
+    <RiskAndSecurityNew />
     <!--安全巡查次数统计-->
     <InspectionsNum />
   </div>
@@ -15,12 +15,12 @@
 import { Vue, Component, Prop } from 'vue-property-decorator'
 import StatisticalRisk from './StatisticalRisk.vue'
 import StatisticalSecurity from './StatisticalSecurity.vue'
-import RiskAndSecurity from './RiskAndSecurity.vue'
+import RiskAndSecurityNew from './RiskAndSecurityNew.vue'
 import InspectionsNum from './InspectionsNum.vue'
 //统计分析-安全模块
 @Component({
   name: 'securityModule',
-  components: { StatisticalRisk, RiskAndSecurity, InspectionsNum, StatisticalSecurity }
+  components: { StatisticalRisk, RiskAndSecurityNew, InspectionsNum, StatisticalSecurity }
 })
 export default class securityModule extends Vue {}
 </script>

src/views/groupPage/header/header.vue

@@ -13,7 +13,14 @@
             <div class="maintitle">
               <div class="caption">{{ title }}</div>
               <div class="splitLine"></div>
-              <el-select ref="select" v-model="treeSelectText" placeholder="" :popper-append-to-body="false">
+              <el-select
+                class="autoWidth-select"
+                ref="select"
+                v-model="treeSelectText"
+                placeholder=""
+                :popper-append-to-body="false"
+              >
+                <template slot="prefix">{{ treeSelectText }}</template>
                 <el-option
                   :value="treeValue.value"
                   :label="treeValue.label"
@@ -392,16 +399,17 @@ export default {
             margin: 0 0.0625rem /* 12/192 */;
           }
           /deep/ .el-select {
-            display: block;
+            // display: block;
+            min-width: 0.479167rem /* 92/192 */;
             // width: 0.78125rem /* 150/192 */;
-            width: 1.09375rem /* 210/192 */;
+            // width: 1.09375rem /* 210/192 */;
             font-size: 0.104167rem /* 20/192 */;
             font-weight: 500;
             font-family: Source Han Sans CN-MEDIUM;
             .el-input__inner {
               font-family: Source Han Sans CN-MEDIUM;
               padding-left: 0;
-              padding-right: 0.260417rem /* 50/192 */;
+              // padding-right: 0.260417rem /* 50/192 */;
               background: transparent;
               border: none;
               color: #2ba7ff;
@@ -409,10 +417,10 @@ export default {
             .el-input {
               font-size: inherit;
             }
-            .el-input__suffix {
-              display: none;
-              right: 0.104167rem /* 20/192 */;
-            }
+            // .el-input__suffix {
+            //   display: none;
+            //   right: 0.104167rem /* 20/192 */;
+            // }
             .el-select__caret {
               display: flex;
               align-items: center;
@@ -428,7 +436,18 @@ export default {
               border-left: 0.036458rem /* 7/192 */ solid transparent;
               transform: rotate(180deg);
             }
+            input {
+              position: absolute;
+            }
+            .el-input__prefix {
+              position: relative;
+              left: 0;
+              padding-right: 30px;
+              line-height: 40px;
+              visibility: hidden;
+            }
           }
+
           /deep/ .el-tree {
             background: #023c5d;
             color: #f9fdff;