diantou/src_product/iam/risk/task/riskMap/risk-assessment-map.vue

<template>
  <a-card :class="$style.topDiv">
    <a-spin :spinning="spinning" tip="数据加载中...">
      <div :class="$style.title">风险图谱</div>
      <div :class="$style.radioDiv">
        <div>
          <font :class="$style.radioText">风险维度：</font>
          <a-radio-group v-model="selectType" @change="radioChange">
            <a-radio value="GY">固有风险</a-radio>
            <a-radio value="SY">剩余风险</a-radio>
          </a-radio-group></div
        >
        <div>
          <a-button type="primary" @click="resetMap">重置</a-button>
        </div>
      </div>
      <div :class="$style.mainDiv">
        <div :class="$style.leftDiv">
          <div :class="$style.title">风险图谱</div>
          <table :class="$style.leftTable">
            <tr>
              <td>{{ riskDegreeList[4] }}</td>
              <td>5</td>
              <td
                :class="{
                  [$style.greenTd]: lowRiskLeft <= 5 && lowRiskRight >= 5,
                  [$style.yellowTd]: mediumRiskLeft <= 5 && mediumRiskRight >= 5,
                  [$style.redTd]: heightRiskLeft <= 5 && heightRiskRight >= 5,
                }"
                @click="
                  tdClick(
                    1,
                    5,
                    riskAssessmentMapInfo[riskPossibilityList[0] + '_' + riskDegreeList[4]]
                  )
                "
              >
                {{
                  riskAssessmentMapInfo[riskPossibilityList[0] + '_' + riskDegreeList[4]]
                    | mapFormat
                }}</td
              >
              <td
                :class="{
                  [$style.greenTd]: lowRiskLeft <= 10 && lowRiskRight >= 10,
                  [$style.yellowTd]: mediumRiskLeft <= 10 && mediumRiskRight >= 10,
                  [$style.redTd]: heightRiskLeft <= 10 && heightRiskRight >= 10,
                }"
                @click="
                  tdClick(
                    2,
                    5,
                    riskAssessmentMapInfo[riskPossibilityList[1] + '_' + riskDegreeList[4]]
                  )
                "
                >{{
                  riskAssessmentMapInfo[riskPossibilityList[1] + '_' + riskDegreeList[4]]
                    | mapFormat
                }}</td
              >
              <td
                :class="{
                  [$style.greenTd]: lowRiskLeft <= 15 && lowRiskRight >= 15,
                  [$style.yellowTd]: mediumRiskLeft <= 15 && mediumRiskRight >= 15,
                  [$style.redTd]: heightRiskLeft <= 15 && heightRiskRight >= 15,
                }"
                @click="
                  tdClick(
                    3,
                    5,
                    riskAssessmentMapInfo[riskPossibilityList[2] + '_' + riskDegreeList[4]]
                  )
                "
                >{{
                  riskAssessmentMapInfo[riskPossibilityList[2] + '_' + riskDegreeList[4]]
                    | mapFormat
                }}</td
              >
              <td
                :class="{
                  [$style.greenTd]: lowRiskLeft <= 20 && lowRiskRight >= 20,
                  [$style.yellowTd]: mediumRiskLeft <= 20 && mediumRiskRight >= 20,
                  [$style.redTd]: heightRiskLeft <= 20 && heightRiskRight >= 20,
                }"
                @click="
                  tdClick(
                    4,
                    5,
                    riskAssessmentMapInfo[riskPossibilityList[3] + '_' + riskDegreeList[4]]
                  )
                "
                >{{
                  riskAssessmentMapInfo[riskPossibilityList[3] + '_' + riskDegreeList[4]]
                    | mapFormat
                }}</td
              >
              <td
                :class="{
                  [$style.greenTd]: lowRiskLeft <= 25 && lowRiskRight >= 25,
                  [$style.yellowTd]: mediumRiskLeft <= 25 && mediumRiskRight >= 25,
                  [$style.redTd]: heightRiskLeft <= 25 && heightRiskRight >= 25,
                }"
                @click="
                  tdClick(
                    5,
                    5,
                    riskAssessmentMapInfo[riskPossibilityList[4] + '_' + riskDegreeList[4]]
                  )
                "
                >{{
                  riskAssessmentMapInfo[riskPossibilityList[4] + '_' + riskDegreeList[4]]
                    | mapFormat
                }}</td
              >
            </tr>
            <tr>
              <td>{{ riskDegreeList[3] }}</td>
              <td>4</td>
              <td
                :class="{
                  [$style.greenTd]: lowRiskLeft <= 4 && lowRiskRight >= 4,
                  [$style.yellowTd]: mediumRiskLeft <= 4 && mediumRiskRight >= 4,
                  [$style.redTd]: heightRiskLeft <= 4 && heightRiskRight >= 4,
                }"
                @click="
                  tdClick(
                    1,
                    4,
                    riskAssessmentMapInfo[riskPossibilityList[0] + '_' + riskDegreeList[3]]
                  )
                "
                >{{
                  riskAssessmentMapInfo[riskPossibilityList[0] + '_' + riskDegreeList[3]]
                    | mapFormat
                }}</td
              >
              <td
                :class="{
                  [$style.greenTd]: lowRiskLeft <= 8 && lowRiskRight >= 8,
                  [$style.yellowTd]: mediumRiskLeft <= 8 && mediumRiskRight >= 8,
                  [$style.redTd]: heightRiskLeft <= 8 && heightRiskRight >= 8,
                }"
                @click="
                  tdClick(
                    2,
                    4,
                    riskAssessmentMapInfo[riskPossibilityList[1] + '_' + riskDegreeList[3]]
                  )
                "
                >{{
                  riskAssessmentMapInfo[riskPossibilityList[1] + '_' + riskDegreeList[3]]
                    | mapFormat
                }}</td
              >
              <td
                :class="{
                  [$style.greenTd]: lowRiskLeft <= 12 && lowRiskRight >= 12,
                  [$style.yellowTd]: mediumRiskLeft <= 12 && mediumRiskRight >= 12,
                  [$style.redTd]: heightRiskLeft <= 12 && heightRiskRight >= 12,
                }"
                @click="
                  tdClick(
                    3,
                    4,
                    riskAssessmentMapInfo[riskPossibilityList[2] + '_' + riskDegreeList[3]]
                  )
                "
                >{{
                  riskAssessmentMapInfo[riskPossibilityList[2] + '_' + riskDegreeList[3]]
                    | mapFormat
                }}</td
              >
              <td
                :class="{
                  [$style.greenTd]: lowRiskLeft <= 16 && lowRiskRight >= 16,
                  [$style.yellowTd]: mediumRiskLeft <= 16 && mediumRiskRight >= 16,
                  [$style.redTd]: heightRiskLeft <= 16 && heightRiskRight >= 16,
                }"
                @click="
                  tdClick(
                    4,
                    4,
                    riskAssessmentMapInfo[riskPossibilityList[3] + '_' + riskDegreeList[3]]
                  )
                "
                >{{
                  riskAssessmentMapInfo[riskPossibilityList[3] + '_' + riskDegreeList[3]]
                    | mapFormat
                }}</td
              >
              <td
                :class="{
                  [$style.greenTd]: lowRiskLeft <= 20 && lowRiskRight >= 20,
                  [$style.yellowTd]: mediumRiskLeft <= 20 && mediumRiskRight >= 20,
                  [$style.redTd]: heightRiskLeft <= 20 && heightRiskRight >= 20,
                }"
                @click="
                  tdClick(
                    5,
                    4,
                    riskAssessmentMapInfo[riskPossibilityList[4] + '_' + riskDegreeList[3]]
                  )
                "
                >{{
                  riskAssessmentMapInfo[riskPossibilityList[4] + '_' + riskDegreeList[3]]
                    | mapFormat
                }}</td
              >
            </tr>
            <tr>
              <td>{{ riskDegreeList[2] }}</td>
              <td>3</td>
              <td
                :class="{
                  [$style.greenTd]: lowRiskLeft <= 3 && lowRiskRight >= 3,
                  [$style.yellowTd]: mediumRiskLeft <= 3 && mediumRiskRight >= 3,
                  [$style.redTd]: heightRiskLeft <= 3 && heightRiskRight >= 3,
                }"
                @click="
                  tdClick(
                    1,
                    3,
                    riskAssessmentMapInfo[riskPossibilityList[0] + '_' + riskDegreeList[2]]
                  )
                "
                >{{
                  riskAssessmentMapInfo[riskPossibilityList[0] + '_' + riskDegreeList[2]]
                    | mapFormat
                }}</td
              >
              <td
                :class="{
                  [$style.greenTd]: lowRiskLeft <= 6 && lowRiskRight >= 6,
                  [$style.yellowTd]: mediumRiskLeft <= 6 && mediumRiskRight >= 6,
                  [$style.redTd]: heightRiskLeft <= 6 && heightRiskRight >= 6,
                }"
                @click="
                  tdClick(
                    2,
                    3,
                    riskAssessmentMapInfo[riskPossibilityList[1] + '_' + riskDegreeList[2]]
                  )
                "
                >{{
                  riskAssessmentMapInfo[riskPossibilityList[1] + '_' + riskDegreeList[2]]
                    | mapFormat
                }}</td
              >
              <td
                :class="{
                  [$style.greenTd]: lowRiskLeft <= 9 && lowRiskRight >= 9,
                  [$style.yellowTd]: mediumRiskLeft <= 9 && mediumRiskRight >= 9,
                  [$style.redTd]: heightRiskLeft <= 9 && heightRiskRight >= 9,
                }"
                @click="
                  tdClick(
                    3,
                    3,
                    riskAssessmentMapInfo[riskPossibilityList[2] + '_' + riskDegreeList[2]]
                  )
                "
                >{{
                  riskAssessmentMapInfo[riskPossibilityList[2] + '_' + riskDegreeList[2]]
                    | mapFormat
                }}</td
              >
              <td
                :class="{
                  [$style.greenTd]: lowRiskLeft <= 12 && lowRiskRight >= 12,
                  [$style.yellowTd]: mediumRiskLeft <= 12 && mediumRiskRight >= 12,
                  [$style.redTd]: heightRiskLeft <= 12 && heightRiskRight >= 12,
                }"
                @click="
                  tdClick(
                    4,
                    3,
                    riskAssessmentMapInfo[riskPossibilityList[3] + '_' + riskDegreeList[2]]
                  )
                "
                >{{
                  riskAssessmentMapInfo[riskPossibilityList[3] + '_' + riskDegreeList[2]]
                    | mapFormat
                }}</td
              >
              <td
                :class="{
                  [$style.greenTd]: lowRiskLeft <= 15 && lowRiskRight >= 15,
                  [$style.yellowTd]: mediumRiskLeft <= 15 && mediumRiskRight >= 15,
                  [$style.redTd]: heightRiskLeft <= 15 && heightRiskRight >= 15,
                }"
                @click="
                  tdClick(
                    5,
                    3,
                    riskAssessmentMapInfo[riskPossibilityList[4] + '_' + riskDegreeList[2]]
                  )
                "
                >{{
                  riskAssessmentMapInfo[riskPossibilityList[4] + '_' + riskDegreeList[2]]
                    | mapFormat
                }}</td
              >
            </tr>
            <tr>
              <td>{{ riskDegreeList[1] }}</td>
              <td>2</td>
              <td
                :class="{
                  [$style.greenTd]: lowRiskLeft <= 2 && lowRiskRight >= 2,
                  [$style.yellowTd]: mediumRiskLeft <= 2 && mediumRiskRight >= 2,
                  [$style.redTd]: heightRiskLeft <= 2 && heightRiskRight >= 2,
                }"
                @click="
                  tdClick(
                    1,
                    2,
                    riskAssessmentMapInfo[riskPossibilityList[0] + '_' + riskDegreeList[1]]
                  )
                "
                >{{
                  riskAssessmentMapInfo[riskPossibilityList[0] + '_' + riskDegreeList[1]]
                    | mapFormat
                }}</td
              >
              <td
                :class="{
                  [$style.greenTd]: lowRiskLeft <= 4 && lowRiskRight >= 4,
                  [$style.yellowTd]: mediumRiskLeft <= 4 && mediumRiskRight >= 4,
                  [$style.redTd]: heightRiskLeft <= 4 && heightRiskRight >= 4,
                }"
                @click="
                  tdClick(
                    2,
                    2,
                    riskAssessmentMapInfo[riskPossibilityList[1] + '_' + riskDegreeList[1]]
                  )
                "
                >{{
                  riskAssessmentMapInfo[riskPossibilityList[1] + '_' + riskDegreeList[1]]
                    | mapFormat
                }}</td
              >
              <td
                :class="{
                  [$style.greenTd]: lowRiskLeft <= 6 && lowRiskRight >= 6,
                  [$style.yellowTd]: mediumRiskLeft <= 6 && mediumRiskRight >= 6,
                  [$style.redTd]: heightRiskLeft <= 6 && heightRiskRight >= 6,
                }"
                @click="
                  tdClick(
                    3,
                    2,
                    riskAssessmentMapInfo[riskPossibilityList[2] + '_' + riskDegreeList[1]]
                  )
                "
                >{{
                  riskAssessmentMapInfo[riskPossibilityList[2] + '_' + riskDegreeList[1]]
                    | mapFormat
                }}</td
              >
              <td
                :class="{
                  [$style.greenTd]: lowRiskLeft <= 8 && lowRiskRight >= 8,
                  [$style.yellowTd]: mediumRiskLeft <= 8 && mediumRiskRight >= 8,
                  [$style.redTd]: heightRiskLeft <= 8 && heightRiskRight >= 8,
                }"
                @click="
                  tdClick(
                    4,
                    2,
                    riskAssessmentMapInfo[riskPossibilityList[3] + '_' + riskDegreeList[1]]
                  )
                "
                >{{
                  riskAssessmentMapInfo[riskPossibilityList[3] + '_' + riskDegreeList[1]]
                    | mapFormat
                }}</td
              >
              <td
                :class="{
                  [$style.greenTd]: lowRiskLeft <= 10 && lowRiskRight >= 10,
                  [$style.yellowTd]: mediumRiskLeft <= 10 && mediumRiskRight >= 10,
                  [$style.redTd]: heightRiskLeft <= 10 && heightRiskRight >= 10,
                }"
                @click="
                  tdClick(
                    5,
                    2,
                    riskAssessmentMapInfo[riskPossibilityList[4] + '_' + riskDegreeList[1]]
                  )
                "
                >{{
                  riskAssessmentMapInfo[riskPossibilityList[4] + '_' + riskDegreeList[1]]
                    | mapFormat
                }}</td
              >
            </tr>
            <tr>
              <td>{{ riskDegreeList[0] }}</td>
              <td>1</td>
              <td
                :class="{
                  [$style.greenTd]: lowRiskLeft <= 1 && lowRiskRight >= 1,
                  [$style.yellowTd]: mediumRiskLeft <= 1 && mediumRiskRight >= 1,
                  [$style.redTd]: heightRiskLeft <= 1 && heightRiskRight >= 1,
                }"
                @click="
                  tdClick(
                    1,
                    1,
                    riskAssessmentMapInfo[riskPossibilityList[0] + '_' + riskDegreeList[0]]
                  )
                "
                >{{
                  riskAssessmentMapInfo[riskPossibilityList[0] + '_' + riskDegreeList[0]]
                    | mapFormat
                }}</td
              >
              <td
                :class="{
                  [$style.greenTd]: lowRiskLeft <= 2 && lowRiskRight >= 2,
                  [$style.yellowTd]: mediumRiskLeft <= 2 && mediumRiskRight >= 2,
                  [$style.redTd]: heightRiskLeft <= 2 && heightRiskRight >= 2,
                }"
                @click="
                  tdClick(
                    2,
                    1,
                    riskAssessmentMapInfo[riskPossibilityList[1] + '_' + riskDegreeList[0]]
                  )
                "
                >{{
                  riskAssessmentMapInfo[riskPossibilityList[1] + '_' + riskDegreeList[0]]
                    | mapFormat
                }}</td
              >
              <td
                :class="{
                  [$style.greenTd]: lowRiskLeft <= 3 && lowRiskRight >= 3,
                  [$style.yellowTd]: mediumRiskLeft <= 3 && mediumRiskRight >= 3,
                  [$style.redTd]: heightRiskLeft <= 3 && heightRiskRight >= 3,
                }"
                @click="
                  tdClick(
                    3,
                    1,
                    riskAssessmentMapInfo[riskPossibilityList[2] + '_' + riskDegreeList[0]]
                  )
                "
                >{{
                  riskAssessmentMapInfo[riskPossibilityList[2] + '_' + riskDegreeList[0]]
                    | mapFormat
                }}</td
              >
              <td
                :class="{
                  [$style.greenTd]: lowRiskLeft <= 4 && lowRiskRight >= 4,
                  [$style.yellowTd]: mediumRiskLeft <= 4 && mediumRiskRight >= 4,
                  [$style.redTd]: heightRiskLeft <= 4 && heightRiskRight >= 4,
                }"
                @click="
                  tdClick(
                    4,
                    1,
                    riskAssessmentMapInfo[riskPossibilityList[3] + '_' + riskDegreeList[0]]
                  )
                "
                >{{
                  riskAssessmentMapInfo[riskPossibilityList[3] + '_' + riskDegreeList[0]]
                    | mapFormat
                }}</td
              >
              <td
                :class="{
                  [$style.greenTd]: lowRiskLeft <= 5 && lowRiskRight >= 5,
                  [$style.yellowTd]: mediumRiskLeft <= 5 && mediumRiskRight >= 5,
                  [$style.redTd]: heightRiskLeft <= 5 && heightRiskRight >= 5,
                }"
                @click="
                  tdClick(
                    5,
                    1,
                    riskAssessmentMapInfo[riskPossibilityList[4] + '_' + riskDegreeList[0]]
                  )
                "
                >{{
                  riskAssessmentMapInfo[riskPossibilityList[4] + '_' + riskDegreeList[0]]
                    | mapFormat
                }}</td
              >
            </tr>
            <tr>
              <td colspan="2" rowspan="2" :class="$style.cptd">
                <div :class="$style.cDiv">C</div>
                <div :class="$style.pDiv">P</div> </td
              ><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td>
            </tr>
            <tr>
              <td>{{ riskPossibilityList[0] }}</td>
              <td>{{ riskPossibilityList[1] }}</td>
              <td>{{ riskPossibilityList[2] }}</td>
              <td>{{ riskPossibilityList[3] }}</td>
              <td>{{ riskPossibilityList[4] }}</td></tr
            >
          </table>
        </div>
        <div :class="$style.rightDiv">
          <div :class="$style.title">风险分布</div>
          <div :class="$style.upDiv">
            <sd-echart
              v-if="chartOptions.series[0].data.length > 0"
              ref="chartKey"
              :key="chartKey"
              :class="$style.chart"
              :options="chartOptions"
              autoresize
              @click="chartClick"
            />
            <div v-else :class="$style.noDataDiv">
              暂无数据
            </div>
          </div>
          <div :class="$style.downDiv">
            <table :class="$style.downTable">
              <tr>
                <td :class="$style.th">风险等级</td>
                <td :class="$style.th">数量</td>
                <td :class="$style.th">占比</td>
              </tr>
              <tr>
                <td>高</td>
                <td :class="$style.normalTd" @click="tdRightClick('高风险', tableInfo.height)"
                  ><a>{{ tableInfo.height }}</a></td
                >
                <td v-if="tableInfo.height === 0">0%</td>
                <td v-else>{{ (tableInfo.height / tableInfo.all) | numFormat }}</td>
              </tr>
              <tr>
                <td>中</td>
                <td :class="$style.normalTd" @click="tdRightClick('中风险', tableInfo.middle)"
                  ><a>{{ tableInfo.middle }}</a></td
                >
                <td v-if="tableInfo.middle === 0">0%</td>
                <td v-else>{{ (tableInfo.middle / tableInfo.all) | numFormat }}</td>
              </tr>
              <tr>
                <td>低</td>
                <td :class="$style.normalTd" @click="tdRightClick('低风险', tableInfo.down)"
                  ><a>{{ tableInfo.down }}</a></td
                >
                <td v-if="tableInfo.down === 0">0%</td>
                <td v-else>{{ (tableInfo.down / tableInfo.all) | numFormat }}</td>
              </tr>
              <tr>
                <td>合{{ '\u2003\u2003' }}计</td>
                <td
                  :class="$style.normalTd"
                  @click="
                    tdRightClick('合计', tableInfo.height + tableInfo.middle + tableInfo.down)
                  "
                  ><a>{{
                    (tableInfo.height + tableInfo.middle + tableInfo.down) | numFormatStr
                  }}</a></td
                >
                <td></td>
              </tr>
            </table>
          </div>
        </div>
      </div>
    </a-spin>
  </a-card>
</template>

<script>
import 'echarts/lib/chart/pie'
import 'echarts/lib/chart/gauge'
import 'echarts/lib/component/polar'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/title'
import crossWindowWatcher from '@/common/services/cross-window-watcher'
import { message } from '@/common/one-ui'
import { NUMERIC } from '@chenfengyuan/vue-qrcode'
import riskTasksService from '../risk-tasks-service'
import riskAssessmentMapService from './risk-assessment-map-service'
import components from './_import-components/risk-assessment-map-import'

export default {
  name: 'RiskAssessmentMap',
  metaInfo: {
    title: '风险图谱',
  },
  components,
  filters: {
    mapFormat(val) {
      if (!val | (val === 0)) return ''
      return val
    },
    numFormat(val) {
      if (!val | (val === 'undefined')) return ''
      const num = val * 100 + ''
      if (num.includes('.')) {
        return parseFloat(num).toFixed(1) + '%'
      } else {
        return num + '%'
      }
    },
    numFormatStr(val) {
      if (val !== 0 && !val | (val === 'undefined')) return ''
      return val
    },
  },
  data() {
    return {
      chartKey: 0,
      tableInfo: {
        hight: '',
        middle: '',
        down: '',
      },
      chartOptions: {
        color: ['#d9001b', '#8676ff', '#dce0fa'],
        tooltip: {
          trigger: 'item',
        },
        legend: {
          show: false,
        },
        series: [
          {
            name: '风险任务',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 100,
              borderColor: '#fff',
              borderWidth: 2,
            },
            label: {
              show: false,
              position: 'center',
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '40',
                fontWeight: 'bold',
              },
            },
            labelLine: {
              show: false,
            },
            data: [],
          },
        ],
      },
      spinning: true, // 是否加载中
      taskId: null,
      selectType: 'GY',
      backgroundImg: {
        backgroundImage: 'url(' + require('./semiquantitativeRiskMap.png') + ' )',
      },
      riskAssessmentMapInfo: {},
      riskDegreeList: [], // 风险影响程度
      riskPossibilityList: [], // 发生可能性
      lowRiskLeft: 0,
      lowRiskRight: 0,
      mediumRiskLeft: 0,
      mediumRiskRight: 0,
      heightRiskLeft: 0,
      heightRiskRight: 0,
    }
  },
  mounted() {
    // 获取风险任务ID
    this.taskId = parseFloat(this.$route.query.taskId)
    // 根据风险任务ID获取准则
    this.getTaskInfo(this.taskId)
  },
  methods: {
    // 风险图谱td点击事件
    tdClick(x, y, val) {
      const url = `/risk-assessment-map-list?taskId=${this.taskId}&occurPossibilityNum=${x}&riskImpactDegreeNum=${y}&listType=left`
      crossWindowWatcher.waitForChanged(url)
    },
    // 风险分布td点击事件
    tdRightClick(val, num) {
      if ((num === undefined) | (num === null) | isNaN(num)) return
      const url = `/risk-assessment-map-list?taskId=${this.taskId}&recordValue=${val}&listType=right&riskDimension=${this.selectType}`
      crossWindowWatcher.waitForChanged(url)
    },
    // 固有剩余变化时
    radioChange(val) {
      const data = {
        taskId: this.taskId,
        riskDimension: this.selectType,
        columnValue: 'riskSpread',
      }
      this.spinning = true
      riskAssessmentMapService.getRiskAssessmentMap(data).then((res) => {
        if (res.data.data.length !== 0) {
          this.tableInfo = {
            height: res.data.data[0]['高'],
            middle: res.data.data[0]['中'],
            down: res.data.data[0]['低'],
            all: res.data.data[0]['高'] + res.data.data[0]['中'] + res.data.data[0]['低'],
          }
          this.chartOptions.series[0].data = []
          this.chartOptions.series[0].data.push(
            { value: res.data.data[0]['高'], name: '高风险' },
            { value: res.data.data[0]['中'], name: '中风险' },
            { value: res.data.data[0]['低'], name: '低风险' }
          )
        } else {
          this.tableInfo = {
            hight: '',
            middle: '',
            down: '',
          }
          this.chartOptions.series[0].data = []
        }
        this.spinning = false
      })
    },
    // echarts图表点击事件
    chartClick(params) {
      this.tdRightClick(params.name)
    },
    // 重置风险评估
    resetMap() {
      this.spinning = true
      riskAssessmentMapService
        .resetRiskAssessmentMap(this.taskId)
        .then((res) => {
          this.getTaskInfo(this.taskId)
        })
        .catch((err) => {
          message.error(err, 1)
          this.spinning = false
        })
    },
    // 获取风险任务信息
    getTaskInfo(taskId) {
      riskTasksService
        .getRiskTaskInfo(taskId)
        .then((res) => {
          const riskCriteriaId = res.data.pageFormData.pageFieldInfos.find((item) => {
            return item.name === 'riskCriteriaId'
          }).value
          return riskTasksService.getRiskCriteriaInfo(parseFloat(riskCriteriaId))
        })
        .then((res) => {
          // 风险等级
          const riskLevelEntitys = res.data.pageFormData.pageFieldInfos.find((item) => {
            return item.name === 'riskLevelEntitys'
          }).value
          const riskLevelEntitysObj = JSON.parse(riskLevelEntitys)
          this.lowRiskLeft = parseFloat(riskLevelEntitysObj[2].minNum)
          this.lowRiskRight = parseFloat(riskLevelEntitysObj[2].maxNum)
          this.mediumRiskLeft = parseFloat(riskLevelEntitysObj[1].minNum)
          this.mediumRiskRight = parseFloat(riskLevelEntitysObj[1].maxNum)
          this.heightRiskLeft = parseFloat(riskLevelEntitysObj[0].minNum)
          this.heightRiskRight = parseFloat(riskLevelEntitysObj[0].maxNum)
          // 发生可能性 riskPossibilityEntitys 横向
          const riskPossibilityEntitys = res.data.pageFormData.pageFieldInfos.find((item) => {
            return item.name === 'riskPossibilityEntitys'
          }).value
          const riskPossibilityEntitysObj = JSON.parse(riskPossibilityEntitys)
          this.riskPossibilityList = []
          this.riskPossibilityList.push(riskPossibilityEntitysObj[0].definition)
          this.riskPossibilityList.push(riskPossibilityEntitysObj[1].definition)
          this.riskPossibilityList.push(riskPossibilityEntitysObj[2].definition)
          this.riskPossibilityList.push(riskPossibilityEntitysObj[3].definition)
          this.riskPossibilityList.push(riskPossibilityEntitysObj[4].definition)
          // 风险影响程度 riskDegreeEntitys  纵向
          const riskDegreeEntitys = res.data.pageFormData.pageFieldInfos.find((item) => {
            return item.name === 'riskDegreeEntitys'
          }).value
          const riskDegreeEntitysObj = JSON.parse(riskDegreeEntitys)
          this.riskDegreeList = []
          this.riskDegreeList.push(riskDegreeEntitysObj[0].score1)
          this.riskDegreeList.push(riskDegreeEntitysObj[0].score2)
          this.riskDegreeList.push(riskDegreeEntitysObj[0].score3)
          this.riskDegreeList.push(riskDegreeEntitysObj[0].score4)
          this.riskDegreeList.push(riskDegreeEntitysObj[0].score5)
          // 获取风险图谱
          const data = {
            taskId: this.taskId,
            columnValue: 'riskChart',
          }
          return riskAssessmentMapService.getRiskAssessmentMap(data)
        })
        .then((res) => {
          this.riskAssessmentMapInfo = {}
          if (res.data.data.length !== 0) {
            this.riskAssessmentMapInfo = res.data.data[0]
          }
          // 获取右侧图表内容
          const data = {
            taskId: this.taskId,
            riskDimension: this.selectType,
            columnValue: 'riskSpread',
          }
          return riskAssessmentMapService.getRiskAssessmentMap(data)
        })
        .then((res) => {
          this.tableInfo = {}
          this.chartOptions.series[0].data = []
          if (res.data.data.length !== 0) {
            this.tableInfo = {
              height: res.data.data[0]['高'],
              middle: res.data.data[0]['中'],
              down: res.data.data[0]['低'],
              all: res.data.data[0]['高'] + res.data.data[0]['中'] + res.data.data[0]['低'],
            }
            this.chartOptions.series[0].data.push(
              { value: res.data.data[0]['高'], name: '高风险' },
              { value: res.data.data[0]['中'], name: '中风险' },
              { value: res.data.data[0]['低'], name: '低风险' }
            )
          }
          this.spinning = false
        })
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.top-div {
  .title {
    font-size: 20px;
    font-weight: bold;
    text-align: center;
  }
  .radio-div {
    display: flex;
    justify-content: space-between;
    margin: 0px 5% 0 8%;
    .radio-text {
      font-weight: bold;
    }
  }
  .main-div {
    display: flex;
    justify-content: center;
    padding-top: 20px;
    .left-div {
      width: 100%;
      .left-table {
        margin: 20px auto;
        td {
          cursor: pointer;
          height: 100px;
          width: 100px;
          border: 1px solid #e7e7e7;
          text-align: center;
          background: #fbfbfb;
          font-weight: bold;
        }
        .cptd {
          background-image: linear-gradient(to bottom right, #fbfbfb 50%, #eee, #fbfbfb 51%);
          background-repeat: no-repeat;
          background-size: contain;
          .c-div {
            height: 100px;
            line-height: 100px;
            text-align: left;
            padding-left: 20%;
            font-size: 45px;
            font-weight: bold;
          }
          .p-div {
            height: 100px;
            line-height: 100px;
            text-align: right;
            padding-right: 20%;
            font-size: 45px;
            font-weight: bold;
          }
        }
        .green-td {
          background: #70b603;
          color: #fff;
          cursor: pointer;
        }
        .yellow-td {
          background: #ffff00;
          color: #9d9d9d;
          cursor: pointer;
        }
        .red-td {
          background: #d9001b;
          color: #fff;
          cursor: pointer;
        }
      }
    }
    .right-div {
      width: 100%;
      .up-div {
        height: 470px;
        .no-data-div {
          text-align: center;
          padding: 20% 0;
          color: #cbcbcb;
          font-size: 18px;
        }
        .chart {
          height: 100%;
          width: 100%;
        }
      }
      .down-div {
        height: 200px;
        .down-table {
          width: 80%;
          margin: auto;
          .th {
            background: #5c96dd;
            color: #fff;
            width: 33%;
          }
          td {
            text-align: center;
            font-size: 17px;
            font-weight: bold;
            border: 1px solid #e7e7e7;
            background: #fbfbfb;
            height: 50px;
          }
          .normal-td {
            cursor: pointer;
          }
        }
      }
    }
  }
}
</style>