布局项目详情

2023-04-24 17:17:21 +08:00
parent bc46d0a37a
commit 60a3973cb4
8 changed files with 94 additions and 425 deletions
@@ -0,0 +1,300 @@
+<template>
+  <div>
+    <div class="box-content">
+      <div class="box-content-left">
+        <div id="main-left"></div>
+      </div>
+      <div class="box-content-right">
+        <div id="main-right"></div>
+      </div>
+    </div>
+    <div class="box-content">
+      <div class="box-content-bottom">
+        <div id="main-bottom"></div>
+      </div>
+    </div>
+    <responsibilityList @responsibility="responsibility" ref="responsibilityListRef"/>
+  </div>
+
+</template>
+
+<script>
+  import * as echarts from 'echarts'
+  import { getAction, postAction, deleteAction, downloadFile } from '@/api/manage'
+  import responsibilityList from './responsibilityList'
+
+  export default {
+    name: 'certificationActivity',
+    components: {
+      responsibilityList
+    },
+    props: {
+      idList: {
+        type: Array,
+        default: []
+      }
+    },
+    data() {
+      return {
+        url: {
+          getProjectDetailsStatistics: '/project/projectLibraryBase/getProjectDetailsStatistics'
+        }
+      }
+    },
+    mounted() {
+      this.mainRightEcharts()
+      this.mainBottomEcharts()
+      this.getData()
+    },
+    methods: {
+      getData() {
+        let id = ''
+        if (this.idList && this.idList.length > 0) {
+          id = this.idList.join(',')
+        } else {
+          id = this.$route.query.id
+        }
+        getAction(this.url.getProjectDetailsStatistics, { id: id }).then((res) => {
+          if (res.success) {
+            if (res.result) {
+              let listingToConfirmMap = res.result.listingToConfirmMap ? res.result.listingToConfirmMap.listingToConfirmMapList : []
+              let taskToConfirmMap = res.result.taskToConfirmMap ? res.result.taskToConfirmMap.taskToConfirmMapList : []
+              let designComplianceMap = res.result.designComplianceMap ? res.result.designComplianceMap.designComplianceMapList : []
+              let prehomoMap = res.result.prehomoMap ? res.result.prehomoMap.prehomoMapList : []
+              let verifyComplianceMap = res.result.verifyComplianceMap ? res.result.verifyComplianceMap.verifyComplianceMapList : []
+              this.dataEcharts(listingToConfirmMap, 1)
+              this.dataEcharts(taskToConfirmMap, 2)
+              this.dataEchartsOne(designComplianceMap, 1)
+              this.dataEchartsOne(prehomoMap, 2)
+              this.dataEchartsOne(verifyComplianceMap, 3)
+            }
+          }
+        })
+      },
+      dataEcharts(val, num) {
+        let data = []
+        let color = []
+        if (val && val.length > 0) {
+          val.forEach((res) => {
+            if (res.inventoryAffirmStatus == 'Not started' || res.taskAffirmStatus == 'Not started') {
+              data.push({
+                value: res.inventoryAffirmStatusCount || res.taskAffirmStatusCount,
+                name: this.$t('notLaunch'),
+                status: res.inventoryAffirmStatus || res.taskAffirmStatus
+              })
+              color.push('#707486')
+            } else if (res.inventoryAffirmStatus == 'List to confirm' || res.taskAffirmStatus == 'List to confirm') {
+              data.push({
+                value: res.inventoryAffirmStatusCount || res.taskAffirmStatusCount,
+                name: this.$t('toBeConfirmed'),
+                status: res.inventoryAffirmStatus || res.taskAffirmStatus
+              })
+              color.push('#00B3BE')
+            } else if (res.inventoryAffirmStatus == 'Accepted' || res.taskAffirmStatus == 'Accepted') {
+              data.push({
+                value: res.inventoryAffirmStatusCount || res.taskAffirmStatusCount,
+                name: this.$t('accept'),
+                status: res.inventoryAffirmStatus || res.taskAffirmStatus
+              })
+              color.push('#26BD4B')
+            } else if (res.inventoryAffirmStatus == 'Rejected' || res.taskAffirmStatus == 'Rejected') {
+              data.push({
+                value: res.inventoryAffirmStatusCount || res.taskAffirmStatusCount,
+                name: this.$t('refuse'),
+                status: res.inventoryAffirmStatus || res.taskAffirmStatus
+              })
+              color.push('#E83030')
+            }
+          })
+        }
+        if (num == 1) {
+          this.mainLeftEcharts(data, color)
+        } else {
+          this.mainRightEcharts(data, color)
+        }
+      },
+      dataEchartsOne(val, num) {
+        let data = []
+        let color = []
+        if (val && val.length > 0) {
+          val.forEach((res) => {
+              if (res.designFlowTaskStatus == 'No rating' || res.prehomoFlowTaskStatus == 'No rating' || res.verifyFlowTaskStatus == 'No rating') {
+                data.push({
+                  value: res.designFlowTaskStatusCount || res.prehomoFlowTaskStatusCount || res.verifyFlowTaskStatusCount,
+                  name: this.$t('toBeConfirmed'),
+                  status: res.designFlowTaskStatus || res.prehomoFlowTaskStatus || res.verifyFlowTaskStatus
+                })
+                color.push('#00B3BE')
+              } else if (res.designFlowTaskStatus == 'Compliance' || res.prehomoFlowTaskStatus == 'Compliance' || res.verifyFlowTaskStatus == 'Compliance') {
+                data.push({
+                  value: res.designFlowTaskStatusCount || res.prehomoFlowTaskStatusCount || res.verifyFlowTaskStatusCount,
+                  name: this.$t('accord'),
+                  status: res.designFlowTaskStatus || res.prehomoFlowTaskStatus || res.verifyFlowTaskStatus
+                })
+                color.push('#26BD4B')
+              } else if (res.designFlowTaskStatus == 'Non-Compliance' || res.prehomoFlowTaskStatus == 'Non-Compliance' || res.verifyFlowTaskStatus == 'Non-Compliance') {
+                data.push({
+                  value: res.designFlowTaskStatusCount || res.prehomoFlowTaskStatusCount || res.verifyFlowTaskStatusCount,
+                  name: this.$t('nonConformity'),
+                  status: res.designFlowTaskStatus || res.prehomoFlowTaskStatus || res.verifyFlowTaskStatus
+                })
+                color.push('#E83030')
+              } else if (res.designFlowTaskStatus == 'To be tracked' || res.prehomoFlowTaskStatus == 'To be tracked' || res.verifyFlowTaskStatus == 'To be tracked') {
+                data.push({
+                  value: res.designFlowTaskStatusCount || res.prehomoFlowTaskStatusCount || res.verifyFlowTaskStatusCount,
+                  name: this.$t('Tracked'),
+                  status: res.designFlowTaskStatus || res.prehomoFlowTaskStatus || res.verifyFlowTaskStatus
+                })
+                color.push('#FDA71C')
+              } else if (res.designFlowTaskStatus == 'NA' || res.prehomoFlowTaskStatus == 'NA' || res.verifyFlowTaskStatus == 'NA') {
+                data.push({
+                  value: res.designFlowTaskStatusCount || res.prehomoFlowTaskStatusCount || res.verifyFlowTaskStatusCount,
+                  name: this.$t('notInvolved'),
+                  status: res.designFlowTaskStatus || res.prehomoFlowTaskStatus || res.verifyFlowTaskStatus
+                })
+                color.push('#707486')
+              } else if (res.designFlowTaskStatus == 'Termination of task' || res.prehomoFlowTaskStatus == 'Termination of task' || res.verifyFlowTaskStatus == 'Termination of task') {
+                data.push({
+                  value: res.designFlowTaskStatusCount || res.prehomoFlowTaskStatusCount || res.verifyFlowTaskStatusCount,
+                  name: this.$t('taskTermination'),
+                  status: res.designFlowTaskStatus || res.prehomoFlowTaskStatus || res.verifyFlowTaskStatus
+                })
+                color.push('#E83030')
+              }
+            }
+          )
+        }
+        if (num == 1) {
+          this.mainLeftContentEcharts(data, color)
+        } else if (num == 2) {
+          this.mainRightContentEcharts(data, color)
+        } else if (num == 3) {
+          this.mainBottomEcharts(data, color)
+        }
+      },
+      getEcharts(chart, title, color, data, num) {
+        var myChart = echarts.init(document.getElementById(chart))
+        myChart.setOption({
+          title: {
+            text: title
+          },
+          tooltip: {
+            trigger: 'item'
+          },
+          legend: {
+            itemWidth: 12,
+            itemHeight: 12,
+            bottom: '0',
+            left: 'center',
+            itemGap: 30,
+            icon: 'circle'
+          },
+          series: [
+            {
+              name: title,
+              type: 'pie',
+              radius: ['40%', '54%'],
+              avoidLabelOverlap: false,
+              label: {
+                show: false,
+                position: 'center'
+              },
+              labelLine: {
+                show: false
+              },
+              color: color,
+              data: data
+            }
+          ]
+        })
+        myChart.on('click', (params) => {
+          let query = {
+            title: params.seriesName,
+            projectLibraryId: this.$route.query.id
+          }
+          if (num === 1) {
+            query.operatorType = 'queryListingToConfirmStatistics'
+            query.inventoryAffirmStatus = params.data.status
+          } else if (num === 2) {
+            query.operatorType = 'queryTaskToConfirmStatistics'
+            query.taskAffirmStatus = params.data.status
+          } else if (num === 3) {
+            query.operatorType = 'queryDesignStatistics'
+            query.designFlowTaskStatus = params.data.status
+          } else if (num === 4) {
+            query.operatorType = 'queryPrehomoStatistics'
+            query.prehomoFlowTaskStatus = params.data.status
+          } else if (num === 5) {
+            query.operatorType = 'queryVerifyStatistics'
+            query.verifyFlowTaskStatus = params.data.status
+          }
+          this.$refs.responsibilityListRef.getData(query)
+        })
+      }
+      ,
+      mainLeftEcharts(data, color) {
+        this.getEcharts('main-left', this.$t('certificationTaskConfirmation'), color, data, 1)
+      }
+      ,
+      mainRightEcharts(data, color) {
+        this.getEcharts('main-right', this.$t('preHomoFlow'), color, data, 2)
+      }
+      ,
+      mainBottomEcharts(data, color) {
+        this.getEcharts('main-bottom', this.$t('CertificationProgress'), color, data, 5)
+      },
+      responsibility(item) {
+        this.$emit('currentStatus', item)
+      }
+    }
+  }
+</script>
+
+<style scoped lang="less">
+  .box-content {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 20px;
+
+    .box-content-left {
+      width: calc(50% - 10px);
+      height: 346px;
+      border: 2px #eff1f3 solid;
+      border-radius: 6px;
+      margin-top: 4px;
+      #main-left {
+        width: 100%;
+        height: 100%;
+        padding: 20px 24px;
+        box-sizing: border-box;
+      }
+    }
+
+    .box-content-right {
+      width: calc(50% - 10px);
+      height: 346px;
+      border: 2px #eff1f3 solid;
+      border-radius: 6px;
+      margin-top: 4px;
+      #main-right {
+        width: 100%;
+        height: 100%;
+        padding: 20px 24px;
+        box-sizing: border-box;
+      }
+    }
+    .box-content-bottom{
+      width: 100%;
+      height: 346px;
+      border: 2px #eff1f3 solid;
+      border-radius: 6px;
+      #main-bottom {
+        width: 100%;
+        height: 100%;
+        padding: 20px 24px;
+        box-sizing: border-box;
+      }
+    }
+  }
+</style>