对接echarts的表格

2022-05-20 10:45:25 +08:00
parent 275dddc267
commit 8298368287
6 changed files with 157 additions and 50 deletions
@@ -859,4 +859,5 @@ module.exports = {
  sponsorReview:'Sponsor review',
  fillInProjectDelivery:'Fill in project delivery',
  Resubmit:'Resubmit',
+  Quantity:'Quantity',
 }
@@ -864,4 +864,5 @@ module.exports = {
  sponsorReview:'发起人审查',
  fillInProjectDelivery:'填写工程交付',
  Resubmit:'重新提交',
+  Quantity:'数量',
 }
@@ -19,15 +19,20 @@
        </a-table>
      </div>
    </div>
+    <responsibilityList 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: 'certificationProgress',
+    components: {
+      responsibilityList
+    },
    data() {
      return {
        loading: false,
@@ -89,35 +94,40 @@
            if (res.certificationProgress == 'NA') {
              data.push({
                value: res.certificationProgressCount,
-                name: this.$t('notInvolved')
+                name: this.$t('notInvolved'),
+                status: res.certificationProgress
              })
              color.push('#9DB9D4')
              this.dataSource[0].notInvolved = res.certificationProgressCount
            } else if (res.certificationProgress == 'Not start') {
              data.push({
                value: res.certificationProgressCount,
-                name: this.$t('toBeStarted')
+                name: this.$t('toBeStarted'),
+                status: res.certificationProgress
              })
              color.push('#FDB033')
              this.dataSource[0].toBeStarted = res.certificationProgressCount
            } else if (res.certificationProgress == 'In progress') {
              data.push({
                value: res.certificationProgressCount,
-                name: this.$t('inProgress')
+                name: this.$t('inProgress'),
+                status: res.certificationProgress
              })
              color.push('#FF8543')
              this.dataSource[0].inProgress = res.certificationProgressCount
            } else if (res.certificationProgress == 'Test failed') {
              data.push({
                value: res.certificationProgressCount,
-                name: this.$t('experimentFailed')
+                name: this.$t('experimentFailed'),
+                status: res.certificationProgress
              })
              color.push('#FF8543')
              this.dataSource[0].experimentFailed = res.certificationProgressCount
            } else if (res.certificationProgress == 'Test passed') {
              data.push({
                value: res.certificationProgressCount,
-                name: this.$t('experimentPassed')
+                name: this.$t('experimentPassed'),
+                status: res.certificationProgress
              })
              color.push('#2F8DF3')
              this.dataSource[0].experimentPassed = res.certificationProgressCount
@@ -161,6 +171,15 @@
            }
          ]
        })
+        myChart.on('click', (params) => {
+          let query = {
+            title: params.seriesName,
+            projectLibraryId: this.$route.query.id,
+            operatorType: 'queryCertificationProgressStatistics',
+            certificationProgress: params.data.status
+          }
+          this.$refs.responsibilityListRef.getData(query)
+        })
      },
      mainLeftEcharts(data, color) {
        this.getEcharts('main-left', this.$t('CertificationProgress'), color, data)
@@ -1,6 +1,7 @@
 <template>
  <div class="box-content">
-    <div class="headerText">
+    <div class="headerText"
+         :title="this.$t('redSchedule') + this.$t('yellowSchedule')+this.$t('greenRequirements')+this.$t('blueUndeterminedState')">
      {{this.$t('redSchedule')}};
      {{this.$t('yellowSchedule')}};
      {{this.$t('greenRequirements')}};
@@ -25,15 +26,20 @@
        </a-table>
      </div>
    </div>
+    <responsibilityList 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: 'CurrentStatusOfTheProjectEcharts',
+    components: {
+      responsibilityList
+    },
    data() {
      return {
        loading: false,
@@ -115,6 +121,15 @@
            }
          ]
        })
+        myChart.on('click', (params) => {
+          let query = {
+            title: params.seriesName,
+            projectLibraryId: this.$route.query.id,
+            operatorType:'queryCurrentProjectStatusStatistics',
+            conditionAssessment:params.data.value
+          }
+          this.$refs.responsibilityListRef.getData(query)
+        })
      },
      mainLeftEcharts(dataSource) {
        let data = []
@@ -199,5 +214,9 @@
    color: #040B29;
    font-weight: 400;
    position: absolute;
+    width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
  }
 </style>
@@ -21,6 +21,7 @@
        <div id="main-bottom"></div>
      </div>
    </div>
+    <responsibilityList ref="responsibilityListRef"/>
  </div>

 </template>
@@ -28,9 +29,13 @@
 <script>
  import * as echarts from 'echarts'
  import { getAction, postAction, deleteAction, downloadFile } from '@/api/manage'
+  import responsibilityList from './responsibilityList'

  export default {
    name: 'DeliverableStatusEchart',
+    components: {
+      responsibilityList
+    },
    data() {
      return {
        url: {
@@ -70,25 +75,29 @@
            if (res.inventoryAffirmStatus == 'Not started' || res.taskAffirmStatus == 'Not started') {
              data.push({
                value: res.inventoryAffirmStatusCount || res.taskAffirmStatusCount,
-                name: this.$t('notLaunch')
+                name: this.$t('notLaunch'),
+                status: res.inventoryAffirmStatus || res.taskAffirmStatus
              })
              color.push('#00BEBE')
            } else if (res.inventoryAffirmStatus == 'List to confirm' || res.taskAffirmStatus == 'List to confirm') {
              data.push({
                value: res.inventoryAffirmStatusCount || res.taskAffirmStatusCount,
-                name: this.$t('toBeConfirmed')
+                name: this.$t('toBeConfirmed'),
+                status: res.inventoryAffirmStatus || res.taskAffirmStatus
              })
              color.push('#FDB033')
            } else if (res.inventoryAffirmStatus == 'Accepted' || res.taskAffirmStatus == 'Accepted') {
              data.push({
                value: res.inventoryAffirmStatusCount || res.taskAffirmStatusCount,
-                name: this.$t('accept')
+                name: this.$t('accept'),
+                status: res.inventoryAffirmStatus || res.taskAffirmStatus
              })
              color.push('#2F8DF3')
            } else if (res.inventoryAffirmStatus == 'Rejected' || res.taskAffirmStatus == 'Rejected') {
              data.push({
                value: res.inventoryAffirmStatusCount || res.taskAffirmStatusCount,
-                name: this.$t('refuse')
+                name: this.$t('refuse'),
+                status: res.inventoryAffirmStatus || res.taskAffirmStatus
              })
              color.push('#9DB9D4')
            }
@@ -108,31 +117,36 @@
              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')
+                  name: this.$t('toBeConfirmed'),
+                  status: res.designFlowTaskStatus || res.prehomoFlowTaskStatus || res.verifyFlowTaskStatus
                })
                color.push('#37CED1')
              } else if (res.designFlowTaskStatus == 'Compliance' || res.prehomoFlowTaskStatus == 'Compliance' || res.verifyFlowTaskStatus == 'Compliance') {
                data.push({
                  value: res.designFlowTaskStatusCount || res.prehomoFlowTaskStatusCount || res.verifyFlowTaskStatusCount,
-                  name: this.$t('accord')
+                  name: this.$t('accord'),
+                  status: res.designFlowTaskStatus || res.prehomoFlowTaskStatus || res.verifyFlowTaskStatus
                })
                color.push('#2F8DF3')
              } 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')
+                  name: this.$t('nonConformity'),
+                  status: res.designFlowTaskStatus || res.prehomoFlowTaskStatus || res.verifyFlowTaskStatus
                })
                color.push('#FF8543')
              } 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')
+                  name: this.$t('Tracked'),
+                  status: res.designFlowTaskStatus || res.prehomoFlowTaskStatus || res.verifyFlowTaskStatus
                })
                color.push('#FDB033')
              } else if (res.designFlowTaskStatus == 'NA' || res.prehomoFlowTaskStatus == 'NA' || res.verifyFlowTaskStatus == 'NA') {
                data.push({
                  value: res.designFlowTaskStatusCount || res.prehomoFlowTaskStatusCount || res.verifyFlowTaskStatusCount,
-                  name: this.$t('notInvolved')
+                  name: this.$t('notInvolved'),
+                  status: res.designFlowTaskStatus || res.prehomoFlowTaskStatus || res.verifyFlowTaskStatus
                })
                color.push('#9DB9D4')
              }
@@ -147,7 +161,7 @@
          this.mainBottomEcharts(data, color)
        }
      },
-      getEcharts(chart, title, color, data) {
+      getEcharts(chart, title, color, data, num) {
        var myChart = echarts.init(document.getElementById(chart))
        myChart.setOption({
          title: {
@@ -182,26 +196,49 @@
            }
          ]
        })
+        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('listConfirmationProgress'), color, data)
+        this.getEcharts('main-left', this.$t('listConfirmationProgress'), color, data, 1)
      }
      ,
      mainRightEcharts(data, color) {
-        this.getEcharts('main-right', this.$t('taskConfirmationProgress'), color, data)
+        this.getEcharts('main-right', this.$t('taskConfirmationProgress'), color, data, 2)
      }
      ,
      mainLeftContentEcharts(data, color) {
-        this.getEcharts('main-left-content', this.$t('designComplianceConfirmationProgress'), color, data)
+        this.getEcharts('main-left-content', this.$t('designComplianceConfirmationProgress'), color, data, 3)
      }
      ,
      mainRightContentEcharts(data, color) {
-        this.getEcharts('main-right-content', this.$t('preHomeConfirmProgress'), color, data)
+        this.getEcharts('main-right-content', this.$t('preHomeConfirmProgress'), color, data, 4)
      }
      ,
      mainBottomEcharts(data, color) {
-        this.getEcharts('main-bottom', this.$t('verificationComplianceConfirmationProgress'), color, data)
+        this.getEcharts('main-bottom', this.$t('verificationComplianceConfirmationProgress'), color, data, 5)
      }
    }
  }
@@ -1,7 +1,7 @@
 <template>
  <a-modal
-    :title="$t('batSetting')"
-    :width="1200"
+    :title="title"
+    :width="800"
    :visible="visible"
    :confirm-loading="confirmLoading"
    :maskClosable="false"
@@ -12,57 +12,87 @@
        {{$t('cancel')}}
      </a-button>
    </template>
+    <div style="text-align: right;margin-bottom: 10px">
+      <div @click="handleExport" class="operator-text">
+        <a-icon type="export" :rotate="-90"/>
+        {{$t('export')}}
+      </div>
+    </div>
+    <a-table
+      ref="table"
+      :loading="loading"
+      :pagination="false"
+      :scroll="{x: true,y:400}"
+      :data-source="dataSource"
+      :columns="columns"
+    >
+    </a-table>
  </a-modal>
 </template>

 <script>
-  import { getAction, postAction } from '@/api/manage'
+  import { getAction, postAction, downloadFile } from '@/api/manage'
  import moment from 'moment'
+
  export default {
    name: 'responsibilityList',
-    props: ['url'],
    data() {
      return {
        visible: false,
+        title: '',
        confirmLoading: false,
-        formInline: {},
-        rules: {},
-        ids: []
+        loading: false,
+        dataSource: [],
+        queryParam: {},
+        url: {
+          groupByTerritoryXls: '/project/projectLibraryBase/exportProjectDetailsStatisticsGroupByTerritoryXls',
+          GroupByTerritory: '/project/projectLibraryBase/getProjectDetailsStatisticsGroupByTerritory'
+        },
+        columns: [
+          {
+            title: this.$t('areaOfResponsibility'),
+            dataIndex: 'dutyTerritory',
+            align: 'center',
+            width:400,
+            ellipsis: true
+          },
+          {
+            title: this.$t('Quantity'),
+            dataIndex: 'amount',
+            align: 'center',
+            ellipsis: true,
+            width:300,
+          }
+        ]
      }
    },
    mounted() {
    },
    methods: {
-      edit(data) {
+      getData(data) {
        this.visible = true
-        this.$nextTick(() => {
-          this.ids = data || []
-          this.formInline = {}
-        })
+        this.title = data.title
+        this.queryParam = data
+        this.getList(data)
      },
-      handleOk() {
-        let ids = JSON.parse(JSON.stringify(this.ids))
-        let query = {
-          ids: ids.join(','),
-          ...this.formInline
-        }
-        this.confirmLoading = true
-        postAction(this.url.setBatch, query).then((res) => {
+      getList(data) {
+        this.loading = true
+        getAction(this.url.GroupByTerritory, data).then((res) => {
          if (res.success) {
-            this.$message.success(this.$t('OperationSuccessful'))
-            this.visible = false
-            this.confirmLoading = false
-            this.$emit('batSettingList')
+            this.loading = false
+            this.dataSource = res.result.dataList || []
          } else {
-            this.$message.warning(this.$t('operationFailed'))
-            this.confirmLoading = false
+            this.loading = false
+            this.dataSource = []
          }
        })
      },
-      handleCancel() {
-        this.formInline = {}
-        this.visible = false
+      handleExport() {
+        downloadFile(this.url.groupByTerritoryXls, this.title + '.xls', this.queryParam)
      },
+      handleCancel() {
+        this.visible = false
+      }
    }
  }
 </script>