From e89c458e490d094fc0d1e83610b665a8cd8dbe31 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E8=A3=95=E8=B4=A2?= <cyc58469@163.com>
Date: Thu, 10 Apr 2025 00:56:38 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A3=8E=E9=99=A9=E7=AE=A1=E7=90=86=E8=8F=9C?=
 =?UTF-8?q?=E5=8D=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/xm/pro/xmRisk/Overview.vue | 774 +++++++++++++++++++++++++++
 1 file changed, 774 insertions(+)
 create mode 100644 src/views/xm/pro/xmRisk/Overview.vue

diff --git a/src/views/xm/pro/xmRisk/Overview.vue b/src/views/xm/pro/xmRisk/Overview.vue
new file mode 100644
index 00000000..93895309
--- /dev/null
+++ b/src/views/xm/pro/xmRisk/Overview.vue
@@ -0,0 +1,774 @@
+<template>
+
+  <el-row v-adaptive="{ bottom: 64 }" :gutter="10">
+    <!-- 行业指标柱状图 -->
+    <el-col :span="12">
+      <el-card class="box-card" style="padding:0px ;height:425px;">
+        <template #header>
+          <span>风险职能分布</span> 
+        </template> 
+        <div>
+          <Echart :options="drawKclassBar()" :height="320" />
+        </div>
+      </el-card>
+    </el-col>
+    <!-- 周期指标柱状图 -->
+    <el-col :span="12">
+      <el-card class="box-card" style="padding:0px ;height:425px">
+        <template #header>
+          <span>风险周期分布</span> 
+        </template>
+        <div>
+          <Echart :options="drawCalcTypeBar()" :height="320" />
+        </div>
+      </el-card>
+    </el-col>
+    <el-col :span="8">
+      <el-card class="box-card" style="padding:0px ;height:425px;margin-top:10px;">
+        <template #header>
+          <span>风险等级分布</span> 
+        </template> 
+        <div>
+          <Echart :options="drawKtypePie()" :height="320" />
+        </div>
+      </el-card>
+    </el-col>
+    <el-col :span="8">
+      <el-card class="box-card" style="height:425px;margin-top:10px;">
+        <template #header>
+          <span>风险审核状态分布</span>
+        </template>
+        <div>
+          <Echart :options="drawKadmPie()" :height="320" />
+        </div>
+      </el-card>
+    </el-col>
+
+    <el-col :span="8">
+      <el-card class="box-card" style="height:425px;margin-top:10px;">
+        <template #header>
+          <span>风险状态分布</span>
+        </template>
+        <div>
+          <Echart :options="drawKstatusPie()" :height="350" />
+        </div>
+      </el-card>
+    </el-col>
+    
+    <el-col :span="8">
+      <el-card class="box-card" style="padding:0px ;height:425px;margin-top:10px;">
+        <template #header>
+          <span>风险预警</span>
+        </template>
+         
+        <div>
+          <Echart :options="drawKwarnStatusPie()" :height="350" />
+        </div>
+      </el-card>
+    </el-col> 
+    <el-col :span="16">
+      <el-card class="box-card" style="padding:0px ;height:425px;margin-top:10px;">
+        <template #header>
+          <span>风险部门分布</span>
+        </template>
+         
+        <div>
+          <Echart :options="drawDeptidBar()" :height="350" />
+        </div>
+      </el-card>
+    </el-col> 
+    <el-col :span="24">
+      <el-card class="box-card" style="padding:0px ;height:425px;margin-top:10px;">
+        <template #header>
+          <span>风险项目分布</span>
+        </template>
+         
+        <div>
+          <Echart :options="drawProjectIdBar()" :height="350" />
+        </div>
+      </el-card>
+    </el-col> 
+  </el-row>
+</template>
+
+<script>
+import util from "@/components/mdp-ui/js/util"; // 全局公共库
+import { mapState } from 'pinia'
+import { useUserStore } from '@/store/modules/user'
+import { useXmStore, useXmStore2 } from '@/store/modules/xm'
+
+import { getXmRiskAttDist } from '@/api/xm/pro/xmRisk'; 
+ 
+export default {
+  computed: {
+    ...mapState(useUserStore, ["userInfo"]),
+    ...mapState(useXmStore, ['projectInfo']),
+     
+  },
+
+  // props:['selProject'],
+  watch: { 
+  },
+  data() {
+    return {
+      load: { list: false, add: false, calcProject: false, calcSettle: false },
+      isActive: true,
+      selProject: {},
+      maxTableHeight: 300, 
+      kstatusOptions:[],
+      ktypeOptions:[],
+      kclassOptions:[],
+      kadmStatusOptions:[],
+      calcTypeOptions:[],
+      kwarnStatusOptions:[],
+
+      kclassDatas:[],
+      calcTypeDatas:[],
+      ktypeDatas:[],
+      kadmStatusDatas:[],
+      kstatusDatas:[],
+      deptidDatas:[],
+      projectIdDatas:[],
+      kwarnStatusDatas:[],
+    };
+  },
+
+  methods: {
+    drawKclassBar() {
+      let option = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '10%',
+          containLabel: true
+        },
+        yAxis: {
+          type: 'value'
+        },
+        xAxis: {
+          type: 'category',
+          data: this.kclassOptions.map(k=>k.name)
+        },
+        series: [
+          {
+            label: {
+              normal: {
+                show: true,
+                position: 'top',
+                color: '#000000',
+              }
+            },
+            data: this.kclassDatas, 
+            type: 'bar',
+            barMaxWidth:60
+          }
+        ]
+      };
+      return option;
+    },
+    drawCalcTypeBar() {
+      let option = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '10%',
+          containLabel: true
+        },
+        yAxis: {
+          type: 'value'
+        },
+        xAxis: {
+          type: 'category',
+          data: this.calcTypeOptions.map(k=>k.name)
+        },
+        series: [
+          {
+            label: {
+              normal: {
+                show: true,
+                position: 'top',
+                color: '#000000',
+              }
+            },
+            data: this.calcTypeDatas, 
+            type: 'bar',
+            barMaxWidth:60
+          }
+        ]
+      };
+      return option;
+    },
+    drawKtypePie() {
+      let option = {
+        title: {
+          left: 'center'
+        },
+        tooltip: {
+          trigger: 'item',
+
+        },
+        calculable: true,
+
+        legend: {
+          show: true,
+          bottom: 'bottom',
+          data: this.ktypeOptions.map(k=>k.name),
+        },
+        graphic: {
+          type: 'text',
+          left: 'center',
+          top: '40%',
+          style: {
+            // text: '总数',
+            text:
+              '指标数' + this.ktypeDatas.reduce((p,c)=> p+c.value,0),
+
+            textAlign: 'center',
+            fill: '#333',
+            width: 30,
+            height: 30,
+            fontSize: 14
+          }
+        },
+
+        color: this.ktypeOptions.map(k=>k.color), // 全局颜色池
+        series: [
+          {
+            type: 'pie',
+            center: ['50%', '40%'],
+            radius: ['35%', '60%'],
+            data: this.ktypeDatas,
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: 'rgba(0, 0, 0, 0.5)'
+              }
+            },
+
+            label: {
+              show: true,
+              formatter: '{b}: {c}  ({d}%)'
+            },
+          }
+        ]
+      };
+      return option
+    },
+
+    drawKadmPie() {
+      let option = {
+        title: {
+          left: 'center'
+        },
+        tooltip: {
+          trigger: 'item',
+
+        },
+        calculable: true,
+
+        legend: {
+          show: true,
+          bottom: 'bottom',
+          data: this.kadmStatusOptions.map(k=>k.name),
+        },
+        graphic: {
+          type: 'text',
+          left: 'center',
+          top: '40%',
+          style: {
+            // text: '总数',
+            text:
+              '指标数' + this.kadmStatusDatas.reduce((p,c)=> p+c.value,0),
+
+            textAlign: 'center',
+            fill: '#333',
+            width: 30,
+            height: 30,
+            fontSize: 14
+          }
+        },
+
+        color: this.kadmStatusOptions.map(k=>k.color||''), // 全局颜色池
+        series: [
+          {
+            type: 'pie',
+            center: ['50%', '40%'],
+            radius: ['35%', '60%'],
+            data: this.kadmStatusDatas,
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: 'rgba(0, 0, 0, 0.5)'
+              }
+            },
+
+            label: {
+              show: true,
+              formatter: '{b}: {c}  ({d}%)'
+            },
+          }
+        ]
+      };
+      return option
+    },
+    
+    drawKstatusPie() {
+      let option = {
+        title: {
+          left: 'center'
+        },
+        tooltip: {
+          trigger: 'item',
+
+        },
+        calculable: true,
+
+        legend: {
+          show: true,
+          bottom: 'bottom',
+          data: this.kstatusOptions.map(k=>k.name),
+        },
+        graphic: {
+          type: 'text',
+          left: 'center',
+          top: '40%',
+          style: {
+            // text: '总数',
+            text:
+              '指标数' + this.kstatusDatas.reduce((p,c)=> p+c.value,0),
+
+            textAlign: 'center',
+            fill: '#333',
+            width: 30,
+            height: 30,
+            fontSize: 14
+          }
+        },
+        color: this.kstatusOptions.map(k=>k.color), // 全局颜色池
+        series: [
+          {
+            type: 'pie',
+            center: ['50%', '40%'],
+            radius: ['35%', '60%'],
+            data: this.kstatusDatas,
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: 'rgba(0, 0, 0, 0.5)'
+              }
+            },
+
+            label: {
+              show: true,
+              formatter: '{b}: {c}  ({d}%)'
+            },
+          }
+        ]
+      };
+      return option
+    },
+    
+    
+    drawKwarnStatusPie() {
+      let option = {
+        title: {
+          left: 'center'
+        },
+        tooltip: {
+          trigger: 'item',
+
+        },
+        calculable: true,
+
+        legend: {
+          show: true,
+          bottom: 'bottom',
+          data: this.kwarnStatusOptions.map(k=>k.name),
+        },
+        graphic: {
+          type: 'text',
+          left: 'center',
+          top: '40%',
+          style: {
+            // text: '总数',
+            text:
+              '指标数' + this.kwarnStatusDatas.reduce((p,c)=> p+c.value,0),
+
+            textAlign: 'center',
+            fill: '#333',
+            width: 30,
+            height: 30,
+            fontSize: 14
+          }
+        },
+        color: this.kwarnStatusOptions.map(k=>k.color), // 全局颜色池
+        series: [
+          {
+            type: 'pie',
+            center: ['50%', '40%'],
+            radius: ['35%', '60%'],
+            data: this.kwarnStatusDatas,
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: 'rgba(0, 0, 0, 0.5)'
+              }
+            },
+
+            label: {
+              show: true,
+              formatter: '{b}: {c}  ({d}%)'
+            },
+          }
+        ]
+      };
+      return option
+    },
+    drawDeptidBar() {
+      let option = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '10%',
+          containLabel: true
+        },
+        yAxis: {
+          type: 'value'
+        },
+        xAxis: {
+          type: 'category',
+          data: this.deptidDatas.map(k=>k.name)
+        },
+        series: [
+          {
+            label: {
+              normal: {
+                show: true,
+                position: 'top',
+                color: '#000000',
+              }
+            },
+            data: this.deptidDatas, 
+            type: 'bar',
+            barMaxWidth:60
+          }
+        ]
+      };
+      return option;
+    },  
+    
+    drawProjectIdBar() {
+      let option = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '10%',
+          containLabel: true
+        },
+        yAxis: {
+          type: 'value'
+        },
+        xAxis: {
+          type: 'category',
+          data: this.projectIdDatas.map(k=>k.name)
+        },
+        series: [
+          {
+            label: {
+              normal: {
+                show: true,
+                position: 'top',
+                color: '#000000',
+              }
+            },
+            data: this.projectIdDatas, 
+            type: 'bar',
+            barMaxWidth:60
+          }
+        ]
+      };
+      return option;
+    },  
+  },
+
+  mounted() {
+    this.selProject = this.projectInfo ||{}
+    this.$mdp.getDictOptions('kstatus').then(o=>{
+      this.kstatusOptions=o
+      getXmRiskAttDist({groupBy:'kstatus',projectId:this.selProject.id}).then(res=>{
+        let datas=res.data
+        this.kstatusDatas=this.kstatusOptions.map((k,index)=>{
+          let data=datas.find(d=>d.name==k.id) 
+          if(index==0){
+            data={name:k.id,value:0}
+            data.value=datas.filter(d=>!d.name||d.name==k.id).reduce((p,c)=>p+c.value,0)
+          }
+          if(data){
+            return {name:k.name,value:data.value}
+          }else{
+            return {name:k.name,value:0}
+          }
+        })
+        
+      })
+    })
+    
+    this.$mdp.getDictOptions('ktype').then(o=>{
+      this.ktypeOptions=o
+      getXmRiskAttDist({groupBy:'ktype',projectId:this.selProject.id}).then(res=>{
+        let datas=res.data
+        this.ktypeDatas=this.ktypeOptions.map((k,index)=>{
+          let data=datas.find(d=>d.name==k.id) 
+          if(index==0){
+            data={name:k.id,value:0}
+            data.value=datas.filter(d=>!d.name||d.name==k.id).reduce((p,c)=>p+c.value,0)
+          }
+          if(data){
+            return {name:k.name,value:data.value}
+          }else{
+            return {name:k.name,value:0}
+          }
+        })
+        
+      })
+    })
+    
+    this.$mdp.getDictOptions('kclass').then(o=>{
+      this.kclassOptions=o
+      getXmRiskAttDist({groupBy:'kclass',projectId:this.selProject.id}).then(res=>{
+        let datas=res.data
+        this.kclassDatas=this.kclassOptions.map((k,index)=>{
+          let data=datas.find(d=>d.name==k.id) 
+          if(index==0){
+            data={name:k.id,value:0}
+            data.value=datas.filter(d=>!d.name||d.name==k.id).reduce((p,c)=>p+c.value,0)
+          }
+          if(data){
+            return {name:k.name,value:data.value}
+          }else{
+            return {name:k.name,value:0}
+          }
+        })
+        
+      })
+    })
+    
+    this.$mdp.getDictOptions('kadmStatus').then(o=>{
+      this.kadmStatusOptions=o
+      getXmRiskAttDist({groupBy:'kadm_status',projectId:this.selProject.id}).then(res=>{
+      let datas=res.data
+      this.kadmStatusDatas=this.kadmStatusOptions.map((k,index)=>{
+          let data=datas.find(d=>d.name==k.id) 
+          if(index==0){
+            data={name:k.id,value:0}
+            data.value=datas.filter(d=>!d.name||d.name==k.id).reduce((p,c)=>p+c.value,0)
+          }
+        if(data){
+            return {name:k.name,value:data.value}
+          }else{
+            return {name:k.name,value:0}
+          }
+      })
+      
+    })
+    })
+    
+    this.$mdp.getDictOptions('calcType').then(o=>{
+      this.calcTypeOptions=o
+      getXmRiskAttDist({groupBy:'calc_type',projectId:this.selProject.id}).then(res=>{
+        let datas=res.data
+        this.calcTypeDatas=this.calcTypeOptions.map((k,index)=>{
+          let data=datas.find(d=>d.name==k.id) 
+          if(index==0){
+            data={name:k.id,value:0}
+            data.value=datas.filter(d=>!d.name||d.name==k.id).reduce((p,c)=>p+c.value,0)
+          }
+          if(data){
+              return {name:k.name,value:data.value}
+            }else{
+              return {name:k.name,value:0}
+            }
+        })
+        
+      })
+    }) 
+    this.$mdp.getDictOptions('kwarnStatus').then(o=>{
+      this.kwarnStatusOptions=o
+      getXmRiskAttDist({groupBy:'kwarn_status',projectId:this.selProject.id}).then(res=>{
+        let datas=res.data  
+        this.kwarnStatusDatas=this.kwarnStatusOptions.map((k,index)=>{
+          let data=datas.find(d=>d.name==k.id) 
+          if(index==0){
+            data={name:k.id,value:0}
+            data.value=datas.filter(d=>!d.name||d.name==k.id).reduce((p,c)=>p+c.value,0)
+          }
+          if(data){
+              return {name:k.name,value:data.value}
+            }else{
+              return {name:k.name,value:0}
+            }
+        })
+        
+      })
+    }) 
+    getXmRiskAttDist({groupBy:'deptid',projectId:this.selProject.id}).then(res=>{
+        let datas=res.data
+        this.deptidDatas=datas.map(k=>{ 
+           return k
+        })
+        
+      })
+      getXmRiskAttDist({groupBy:'project_id',projectId:this.selProject.id}).then(res=>{
+        let datas=res.data
+        this.projectIdDatas=datas.map(k=>{
+           return k
+        })
+        
+      })
+    
+
+
+
+    
+
+  },
+
+};
+</script>
+
+<style scoped lang="scss">
+.container {
+  margin: 10px;
+}
+
+.header {
+  display: flex;
+  justify-content: flex-start;
+  padding: 10px;
+
+  span {
+    padding-right: 15px;
+  }
+}
+
+.col {
+  margin-bottom: 20px;
+}
+
+.icon1 {
+  color: #fff;
+  border-radius: 15px;
+  text-align: center;
+  font-size: 20px;
+  display: inline-block;
+  margin-right: 5px;
+  margin-left: 5px;
+}
+
+.icon2 {
+  color: #000000;
+  border-radius: 15px;
+  text-align: center;
+  font-size: 20px;
+  display: inline-block;
+  margin-right: 5px;
+  margin-left: 5px;
+}
+
+.item {
+  display: flex;
+  justify-content: flex-start;
+  position: relative;
+
+  .progress-item {
+    position: absolute;
+    width: 80%;
+  }
+}
+
+.card-font {
+  color: #000000;
+  font-size: 12px;
+
+  .el-col {
+    margin-bottom: 20px;
+  }
+}
+
+.calendar-header {
+  display: flex;
+  justify-content: space-between;
+
+  .cal-header-boxs {
+    flex: 1;
+    display: flex;
+    justify-content: flex-end;
+
+    .cal-header-box {
+      padding: 5px;
+      height: 45px;
+      margin-left: 10px;
+    }
+
+    .box-icon {
+      text-align: center;
+    }
+
+    .box-info {
+      text-align: center;
+      font-size: 12px;
+      color: #000000;
+    }
+  }
+}
+
+.el-tag:hover {
+  cursor: pointer;
+}
+
+.value {
+  cursor: pointer;
+}
+
+.reference {
+  margin-top: 10px;
+  font-size: 12px;
+}
+
+.click {
+  background: #e9f7ff;
+}
+
+.calendar-box {
+  display: flex;
+  justify-content: flex-start;
+}</style>
+