diantou/src_product/iam/risk/task/overview/risk-task-overview.vue

<template>
  <sd-detail-form
    ref="form"
    v-sd-watermark="waterMark"
    page-id="risk/task/dutie/riskDutie"
    form-id="riskDutie"
    :record-id="this.$route.query.taskId ? parseInt(this.$route.query.taskId) : null"
    :class="$style.form"
    :read-only="true"
    @sdFormReady="
      () => {
        this.initData()
      }
    "
  >
    <template v-slot="{ model, fields }">
      <div :class="[$style.charts, $style.mainDiv]">
        <div>
          <div :class="$style.content">
            <div>基本信息</div>
            <a-divider :class="$style.divider" />
            <div :class="$style.projectBrief">
              <div>
                <div :class="$style.infoDiv">
                  <span :class="$style.label"
                    >任务年度：<font>{{ model.year }}</font></span
                  >
                  <span :class="$style.label"
                    >任务类型：<font>{{ fields.dutieType.attr.displayValue }}</font></span
                  >
                  <span :class="$style.label"
                    >发起机构：<font>{{ model.inspectUnitName }}</font></span
                  >
                </div>
                <div :class="$style.dateDiv">
                  <div :class="$style.steps + ' ' + $style.process">
                    <span>
                      <a-icon
                        type="sd-audit-overview-plan"
                        theme="filled"
                        :class="$style.icon + ' ' + $style.passed"
                      />
                    </span>
                    <span>
                      <span>任务起止日期：</span>
                      <span>{{ model.dutieStartDate | sdDateFormat('YYYY-MM-DD') }}</span
                      >至<span>{{ model.dutieEndDate | sdDateFormat('YYYY-MM-DD') }}</span>
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div :class="$style.content + ' ' + $style.process">
            <div>风险识别进度</div>
            <a-divider :class="$style.divider" />
            <template v-if="firstProcess.resData.length > 0">
              <div
                ><sd-echart
                  :key="firstKey"
                  :class="$style.echarts"
                  :options="firstProcess.chart"
                  autoresize
              /></div>
              <div>
                <span @click="firstClick('all')">
                  <span>{{ firstProcess.data.totalNum }} </span>
                  <br />
                  <span>任务总数 </span>
                </span>
                <span :class="$style['no-start']" @click="firstClick('0')">
                  <span>{{ firstProcess.data.noStartNum }} </span>
                  <br />
                  <span>未开始 </span>
                </span>
                <span :class="$style['going']" @click="firstClick('1')">
                  <span>{{ firstProcess.data.executingNum }} </span>
                  <br />
                  <span>执行中</span>
                </span>
                <span :class="$style['finished']" @click="firstClick('5')">
                  <span>{{ firstProcess.data.finishedNum }} </span>
                  <br />
                  <span>已完成</span>
                </span>
              </div>
            </template>
            <template v-else>
              <div :class="$style.emptyecharts"> </div>
              <div> </div>
            </template>
          </div>
        </div>
        <div>
          <div :class="$style.content">
            <div>风险识别结果</div>
            <a-divider :class="$style.divider" />
            <template v-if="secondProcess.resData.length > 0">
              <div
                ><sd-echart
                  ref="secondChart"
                  :key="secondKey"
                  :class="$style.secondEcharts"
                  :options="secondProcess.chart"
                  autoresize
                  @click="secondClick"
              /></div>
            </template>
            <template v-else>
              <div :class="$style.emptyecharts"> </div>
            </template>
          </div>
        </div>
        <div>
          <div :class="$style.content + ' ' + $style.process">
            <div>风险评估进度</div>
            <a-divider :class="$style.divider" />
            <template v-if="threeProcess.resData.length > 0">
              <div
                ><sd-echart
                  :key="threeKey"
                  :class="$style.echarts"
                  :options="threeProcess.chart"
                  autoresize
              /></div>
              <div>
                <span @click="threeClick('all')">
                  <span>{{ threeProcess.data.totalNum }} </span>
                  <br />
                  <span>任务总数 </span>
                </span>
                <span :class="$style['no-start']" @click="threeClick('0')">
                  <span>{{ threeProcess.data.noStartNum }} </span>
                  <br />
                  <span>未开始 </span>
                </span>
                <span :class="$style['going']" @click="threeClick('1')">
                  <span>{{ threeProcess.data.executingNum }} </span>
                  <br />
                  <span>执行中</span>
                </span>
                <span :class="$style['finished']" @click="threeClick('5')">
                  <span>{{ threeProcess.data.finishedNum }} </span>
                  <br />
                  <span>已完成</span>
                </span>
              </div>
            </template>
            <template v-else>
              <div :class="$style.emptyecharts"> </div>
              <div> </div>
            </template>
          </div>
        </div>
        <div>
          <div :class="$style.content">
            <div>风险评估结果</div>
            <a-divider :class="$style.divider" />
            <template v-if="fourProcess.resData.length > 0">
              <div
                ><sd-echart
                  ref="fourChart"
                  :key="fourKey"
                  :class="$style.fourEcharts"
                  :options="fourProcess.chart"
                  autoresize
                  @click="fourClick"
              /></div>
            </template>
            <template v-else>
              <div :class="$style.emptyecharts"> </div>
            </template>
          </div>
        </div>
        <div :class="$style.bottomDiv">
          <div>
            <div :class="$style.content + ' ' + $style.process">
              <div>风险应对进度</div>
              <a-divider :class="$style.divider" />
              <template v-if="fiveProcess.resData.length > 0">
                <div
                  ><sd-echart
                    :key="fiveKey"
                    :class="$style.echarts"
                    :options="fiveProcess.chart"
                    autoresize
                /></div>
                <div>
                  <span @click="fiveClick('all')">
                    <span>{{ fiveProcess.data.totalNum }} </span>
                    <br />
                    <span>任务总数 </span>
                  </span>
                  <span :class="$style['no-start']" @click="fiveClick('0')">
                    <span>{{ fiveProcess.data.noStartNum }} </span>
                    <br />
                    <span>未开始 </span>
                  </span>
                  <span :class="$style['going']" @click="fiveClick('1')">
                    <span>{{ fiveProcess.data.executingNum }} </span>
                    <br />
                    <span>执行中</span>
                  </span>
                  <span :class="$style['finished']" @click="fiveClick('5')">
                    <span>{{ fiveProcess.data.finishedNum }} </span>
                    <br />
                    <span>已完成</span>
                  </span>
                </div>
              </template>
              <template v-else>
                <div :class="$style.emptyecharts"> </div>
                <div> </div>
              </template>
            </div>
          </div>
          <div :class="$style.middleDiv">
            <div :class="$style.content">
              <div>风险应对策略</div>
              <a-divider :class="$style.divider" />
              <template v-if="sixProcess.resData.length > 0">
                <div
                  ><sd-echart
                    ref="sixChart"
                    :key="sixKey"
                    :class="$style.sixEcharts"
                    :options="sixProcess.chart"
                    autoresize
                    @click="sixClick"
                /></div>
              </template>
              <template v-else>
                <div :class="$style.emptyecharts"> </div>
              </template>
            </div>
          </div>
          <div>
            <div :class="$style.content">
              <div>风险应对完成状态</div>
              <a-divider :class="$style.divider" />
              <template v-if="sevenProcess.resData.length > 0">
                <div
                  ><sd-echart
                    ref="sevenChart"
                    :key="sevenKey"
                    :class="$style.sevenEcharts"
                    :options="sevenProcess.chart"
                    autoresize
                    @click="sevenClick"
                /></div>
              </template>
              <template v-else>
                <div :class="$style.emptyecharts"> </div>
              </template>
            </div>
          </div>
        </div>
      </div>
    </template>
  </sd-detail-form>
</template>

<script>
import 'echarts/lib/chart/pie'
import 'echarts/lib/chart/bar'
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 systemManage from '@/system-manage/system-manage'
import riskTaskOverviewServices from './risk-task-overview-services'
import components from './_import-components/risk-task-overview-import'

export default {
  name: 'RiskTaskOverview',
  metaInfo: {
    title: '任务概况',
  },
  components: {
    ...components,
  },
  data() {
    return {
      firstKey: 0,
      secondKey: 0,
      threeKey: 0,
      fourKey: 0,
      fiveKey: 0,
      sixKey: 0,
      sevenKey: 0,
      params: {},
      taskInfo: {},
      waterMark: systemManage.getFormWaterMark(),
      taskId: '',
      currenStep: 0,
      avatars: {
        groupLeader: {
          src: '',
        },
        projectPrincipal: {
          src: '',
        },
      },
      steps: [],
      firstProcess: {
        selectVal: 'all',
        resData: [],
        data: {},
        chart: {
          title: [
            {
              text: '95%',
              textStyle: {
                color: '#8675FF',
                fontSize: 40,
              },
              itemGap: 20,
              x: 'center',
              top: '50%',
            },
            {
              text: '完成率',
              textStyle: {
                color: '#444444',
                fontSize: 25,
                fontWeight: 'normal',
              },
              itemGap: 20,
              x: 'center',
              top: '40%',
            },
          ],

          angleAxis: {
            polarIndex: 0,
            min: 0,
            max: 100,
            show: false,
            boundaryGap: ['40%', '40%'],
            startAngle: 90,
          },
          radiusAxis: {
            type: 'category',
            show: true,
            axisLabel: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
          },
          polar: [{}],

          series: [
            {
              type: 'bar',
              z: 10,
              name: '完成度',
              data: [50],
              showBackground: false,
              backgroundStyle: {
                borderWidth: 10,
                width: 10,
              },
              coordinateSystem: 'polar',
              roundCap: true,
              barWidth: 20, // 大的占比环
              itemStyle: {
                normal: {
                  opacity: 1,
                  color: '#8675FF',
                },
              },
            },
            {
              type: 'pie',
              name: '内层细圆环',
              radius: ['45%', '35%'],
              startAngle: 90,
              hoverAnimation: false,
              clockWise: true,
              silent: true,
              itemStyle: {
                normal: {
                  color: '#DCE0FA',
                  shadowBlur: 0,
                  shadowColor: '#66666a',
                },
              },
              tooltip: {
                show: false,
              },
              label: {
                show: false,
              },
              data: [100],
            },
          ],
        },
      },
      secondProcess: {
        selectVal: 'all',
        resData: [],
        data: {},
        chart: {
          color: ['#5470c6', '#91cc75', '#fac858'],
          tooltip: {
            trigger: 'item',
          },
          legend: {
            top: '5%',
            left: 'center',
          },
          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: [],
            },
          ],
        },
      },
      threeProcess: {
        selectVal: 'all',
        resData: [],
        data: {},
        chart: {
          title: [
            {
              text: '95%',
              textStyle: {
                color: '#8675FF',
                fontSize: 40,
              },
              itemGap: 20,
              x: 'center',
              top: '50%',
            },
            {
              text: '完成率',
              textStyle: {
                color: '#444444',
                fontSize: 25,
                fontWeight: 'normal',
              },
              itemGap: 20,
              x: 'center',
              top: '40%',
            },
          ],

          angleAxis: {
            polarIndex: 0,
            min: 0,
            max: 100,
            show: false,
            boundaryGap: ['40%', '40%'],
            startAngle: 90,
          },
          radiusAxis: {
            type: 'category',
            show: true,
            axisLabel: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
          },
          polar: [{}],

          series: [
            {
              type: 'bar',
              z: 10,
              name: '完成度',
              data: [50],
              showBackground: false,
              backgroundStyle: {
                borderWidth: 10,
                width: 10,
              },
              coordinateSystem: 'polar',
              roundCap: true,
              barWidth: 20, // 大的占比环
              itemStyle: {
                normal: {
                  opacity: 1,
                  color: '#8675FF',
                },
              },
            },
            {
              type: 'pie',
              name: '内层细圆环',
              radius: ['45%', '35%'],
              startAngle: 90,
              hoverAnimation: false,
              clockWise: true,
              silent: true,
              itemStyle: {
                normal: {
                  color: '#DCE0FA',
                  shadowBlur: 0,
                  shadowColor: '#66666a',
                },
              },
              tooltip: {
                show: false,
              },
              label: {
                show: false,
              },
              data: [100],
            },
          ],
        },
      },
      fourProcess: {
        selectVal: 'all',
        resData: [],
        data: {},
        chart: {
          color: ['#5470c6', '#91cc75', '#fac858'],
          tooltip: {
            trigger: 'item',
          },
          legend: {
            top: '5%',
            left: 'center',
          },
          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: [],
            },
          ],
        },
      },
      fiveProcess: {
        selectVal: 'all',
        resData: [],
        data: {},
        chart: {
          title: [
            {
              text: '95%',
              textStyle: {
                color: '#8675FF',
                fontSize: 40,
              },
              itemGap: 20,
              x: 'center',
              top: '50%',
            },
            {
              text: '完成率',
              textStyle: {
                color: '#444444',
                fontSize: 25,
                fontWeight: 'normal',
              },
              itemGap: 20,
              x: 'center',
              top: '40%',
            },
          ],

          angleAxis: {
            polarIndex: 0,
            min: 0,
            max: 100,
            show: false,
            boundaryGap: ['40%', '40%'],
            startAngle: 90,
          },
          radiusAxis: {
            type: 'category',
            show: true,
            axisLabel: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
          },
          polar: [{}],

          series: [
            {
              type: 'bar',
              z: 10,
              name: '完成度',
              data: [50],
              showBackground: false,
              backgroundStyle: {
                borderWidth: 10,
                width: 10,
              },
              coordinateSystem: 'polar',
              roundCap: true,
              barWidth: 20, // 大的占比环
              itemStyle: {
                normal: {
                  opacity: 1,
                  color: '#8675FF',
                },
              },
            },
            {
              type: 'pie',
              name: '内层细圆环',
              radius: ['45%', '35%'],
              startAngle: 90,
              hoverAnimation: false,
              clockWise: true,
              silent: true,
              itemStyle: {
                normal: {
                  color: '#DCE0FA',
                  shadowBlur: 0,
                  shadowColor: '#66666a',
                },
              },
              tooltip: {
                show: false,
              },
              label: {
                show: false,
              },
              data: [100],
            },
          ],
        },
      },
      sixProcess: {
        selectVal: 'all',
        resData: [],
        data: {},
        chart: {
          color: ['#91cc75', '#fac858', '#ee6666', '#5470c6'],
          tooltip: {
            trigger: 'item',
          },
          legend: {
            top: '5%',
            left: 'center',
          },
          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: [],
            },
          ],
        },
      },
      sevenProcess: {
        selectVal: 'all',
        resData: [],
        data: {},
        chart: {
          color: [],
          tooltip: {
            trigger: 'item',
          },
          series: [
            {
              stillShowZeroSum: false,
              name: '风险识别结果',
              type: 'pie',
              labelLine: { length: 50 },
              radius: [35, 145],
              roseType: 'area',
              data: [],
            },
          ],
        },
      },
    }
  },
  created() {
    const taskId = this.$route.query.taskId
    if (taskId) {
      this.taskId = taskId
    }
  },
  mounted() {},
  methods: {
    // 第一个图表点击钻取
    firstClick(type) {
      const url = `/risk-task-overview-list?taskId=${this.taskId}&listType=first${
        type === 'all' ? '' : '&endType=' + type
      }`
      crossWindowWatcher.waitForChanged(url)
    },
    // 第二个图表点击钻取
    secondClick(params) {
      let type
      if (params.data.name === '新增') {
        type = 'insert'
      }
      if (params.data.name === '修改') {
        type = 'update'
      }
      if (params.data.name === '废弃') {
        type = 'delete'
      }
      const url = `/risk-task-overview-list?taskId=${this.taskId}&listType=second&dataType=${type}`
      crossWindowWatcher.waitForChanged(url)
    },
    // 第三个图表点击钻取
    threeClick(type) {
      const url = `/risk-task-overview-list?taskId=${this.taskId}&listType=three${
        type === 'all' ? '' : '&endType=' + type
      }`
      crossWindowWatcher.waitForChanged(url)
    },
    // 第四个图表点击钻取
    fourClick(params) {
      let type
      if (params.data.name === '高风险') {
        type = '高风险'
      }
      if (params.data.name === '中风险') {
        type = '中风险'
      }
      if (params.data.name === '低风险') {
        type = '低风险'
      }
      const url = `/risk-task-overview-list?taskId=${this.taskId}&listType=four&dataType=${type}`
      crossWindowWatcher.waitForChanged(url)
    },
    // 第五个图表点击钻取
    fiveClick(type) {
      const url = `/risk-task-overview-list?taskId=${this.taskId}&listType=five${
        type === 'all' ? '' : '&endType=' + type
      }`
      crossWindowWatcher.waitForChanged(url)
    },
    // 第六个图表点击钻取
    sixClick(params) {
      let type
      if (params.data.name === '接受') {
        type = 'accept'
      }
      if (params.data.name === '规避') {
        type = 'avoid'
      }
      if (params.data.name === '降低') {
        type = 'reduce'
      }
      if (params.data.name === '转移') {
        type = 'transfer'
      }
      const url = `/risk-task-overview-list?taskId=${this.taskId}&listType=six&dataType=${type}`
      crossWindowWatcher.waitForChanged(url)
    },
    // 第七个图表点击钻取
    sevenClick(params) {
      let type
      if (params.data.name === '尚未应对') {
        type = 'noYetResponded'
      }
      if (params.data.name === '进行中') {
        type = 'progress'
      }
      if (params.data.name === '已完成') {
        type = 'completed'
      }
      if (params.data.name === '不应对') {
        type = 'notResponded'
      }
      const url = `/risk-task-overview-list?taskId=${this.taskId}&listType=seven&dataType=${type}`
      crossWindowWatcher.waitForChanged(url)
    },

    getStepName(stepId) {
      const steps = this.steps.filter((item) => {
        return item.id === stepId
      })
      if (steps.length !== 0) {
        return steps[0].name
      }
      return ''
    },
    getUserAvatar(account) {
      return riskTaskOverviewServices.getUserAvatar(account).then((res) => {
        return URL.createObjectURL(res.data)
      })
    },
    initData() {
      // 获取第一个图表
      this.getFirstData({ taskId: this.taskId, columnValue: 'identifyProgress' })
      // 获取第二个图表
      this.getSecondData({ taskId: this.taskId, columnValue: 'identifyResult' })
      // 获取第三个图表
      this.getThreeData({ taskId: this.taskId, columnValue: 'assessmentProgress' })
      // 获取第四个图表
      this.getFourData({ taskId: this.taskId, columnValue: 'assessmentResult' })
      // 获取第五个图表
      this.getFiveData({ taskId: this.taskId, columnValue: 'responseProgress' })
      // 获取第六个图表
      this.getSixData({ taskId: this.taskId, columnValue: 'responseStrategy' })
      // 获取第七个图表
      this.getSevenData({ taskId: this.taskId, columnValue: 'responseState' })
    },
    // 获取第一个图表
    getFirstData(params) {
      // 风险识别进度
      riskTaskOverviewServices.getEchartsData(params).then((res) => {
        this.firstProcess.resData = res.data.data
        if (res.data.data.length > 0) {
          this.firstProcess.chart.series[0].data = [Math.round(res.data.data[0].TYPE5)]
          if (res.data.data[0].TYPES === 0) {
            this.firstProcess.chart.title[0].text = '0%'
          } else {
            this.firstProcess.chart.title[0].text =
              Math.round((res.data.data[0].TYPE5 / res.data.data[0].TYPES) * 100) + '%'
          }
          this.firstProcess.chart.series[0].data = [
            Math.round((res.data.data[0].TYPE5 / res.data.data[0].TYPES) * 100),
          ]
          this.firstKey++
          this.firstProcess.data = {
            totalNum: res.data.data[0].TYPES,
            noStartNum: res.data.data[0].TYPE0,
            executingNum: res.data.data[0].TYPE1,
            finishedNum: res.data.data[0].TYPE5,
          }
        }
      })
    },
    // 获取第二个图表
    getSecondData(params) {
      riskTaskOverviewServices.getEchartsData(params).then((res) => {
        this.secondProcess.resData = res.data.data
        if (res.data.data.length > 0) {
          this.secondProcess.chart.series[0].data.push(
            { value: res.data.data[0].INSERTS, name: '新增' },
            { value: res.data.data[0].UPDATES, name: '修改' },
            { value: res.data.data[0].DELETES, name: '废弃' }
          )
        }
      })
    },
    // 获取第三个图表
    getThreeData(params) {
      // 风险识别进度
      riskTaskOverviewServices.getEchartsData(params).then((res) => {
        this.threeProcess.resData = res.data.data
        if (res.data.data.length > 0) {
          this.threeProcess.chart.series[0].data = [Math.round(res.data.data[0].TYPE5)]
          if (res.data.data[0].TYPES === 0) {
            this.threeProcess.chart.title[0].text = '0%'
          } else {
            this.threeProcess.chart.title[0].text =
              Math.round((res.data.data[0].TYPE5 / res.data.data[0].TYPES) * 100) + '%'
          }
          this.threeProcess.chart.series[0].data = [
            Math.round((res.data.data[0].TYPE5 / res.data.data[0].TYPES) * 100),
          ]
          this.threeKey++
          this.threeProcess.data = {
            totalNum: res.data.data[0].TYPES,
            noStartNum: res.data.data[0].TYPE0,
            executingNum: res.data.data[0].TYPE1,
            finishedNum: res.data.data[0].TYPE5,
          }
        }
      })
    },
    // 获取第四个图表
    getFourData(params) {
      riskTaskOverviewServices.getEchartsData(params).then((res) => {
        this.fourProcess.resData = res.data.data
        if (res.data.data.length === 0) return
        if (res.data.data.length > 0) {
          this.fourProcess.chart.series[0].data.push(
            { value: res.data.data[0]['高风险'], name: '高风险' },
            { value: res.data.data[0]['中风险'], name: '中风险' },
            { value: res.data.data[0]['低风险'], name: '低风险' }
          )
        }
      })
    },
    // 获取第五个图表
    getFiveData(params) {
      riskTaskOverviewServices.getEchartsData(params).then((res) => {
        this.fiveProcess.resData = res.data.data
        if (res.data.data.length > 0) {
          this.fiveProcess.chart.series[0].data = [Math.round(res.data.data[0].TYPE5)]
          if (res.data.data[0].TYPES === 0) {
            this.fiveProcess.chart.title[0].text = '0%'
          } else {
            this.fiveProcess.chart.title[0].text =
              Math.round((res.data.data[0].TYPE5 / res.data.data[0].TYPES) * 100) + '%'
          }
          this.fiveProcess.chart.series[0].data = [
            Math.round((res.data.data[0].TYPE5 / res.data.data[0].TYPES) * 100),
          ]
          this.fiveKey++
          this.fiveProcess.data = {
            totalNum: res.data.data[0].TYPES,
            noStartNum: res.data.data[0].TYPE0,
            executingNum: res.data.data[0].TYPE1,
            finishedNum: res.data.data[0].TYPE5,
          }
        }
      })
    },
    // 获取第六个图表
    getSixData(params) {
      riskTaskOverviewServices.getEchartsData(params).then((res) => {
        this.sixProcess.resData = res.data.data
        if (res.data.data.length === 0) return
        if (res.data.data.length > 0) {
          this.sixProcess.chart.series[0].data.push(
            { value: res.data.data[0]['接受'], name: '接受' },
            { value: res.data.data[0]['规避'], name: '规避' },
            { value: res.data.data[0]['降低'], name: '降低' },
            { value: res.data.data[0]['转移'], name: '转移' }
          )
        }
      })
    },
    // 获取第七个图表
    getSevenData(params) {
      riskTaskOverviewServices.getEchartsData(params).then((res) => {
        this.sevenProcess.resData = res.data.data
        if (res.data.data.length === 0) return
        if (res.data.data.length > 0) {
          if (res.data.data[0]['尚未应对'] !== 0) {
            this.sevenProcess.chart.color.push('#ea7ccc')
            this.sevenProcess.chart.series[0].data.push({
              value: res.data.data[0]['尚未应对'],
              name: '尚未应对',
            })
          }
          if (res.data.data[0]['进行中'] !== 0) {
            this.sevenProcess.chart.color.push('#5470c6')
            this.sevenProcess.chart.series[0].data.push({
              value: res.data.data[0]['进行中'],
              name: '进行中',
            })
          }
          if (res.data.data[0]['已完成'] !== 0) {
            this.sevenProcess.chart.color.push('#91cc75')
            this.sevenProcess.chart.series[0].data.push({
              value: res.data.data[0]['已完成'],
              name: '已完成',
            })
          }
          if (res.data.data[0]['不应对'] !== 0) {
            this.sevenProcess.chart.color.push('#fac858')
            this.sevenProcess.chart.series[0].data.push({
              value: res.data.data[0]['不应对'],
              name: '不应对',
            })
          }
        }
      })
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
@import '@/webflow/sd-flow-form.scss';
.main-div {
  display: inline-block;
  background: #ededed;
  width: 100%;
}
.radio-div {
  position: absolute;
  margin: 0px 30px;
  top: 65px;
  z-index: 200;
}
:global(.title_sd-detail-form_common) {
  visibility: hidden;
}
.res-div {
  position: absolute;
  bottom: 30px;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  padding: 0px 30%;
  font-size: 18px;
  font-weight: bold;
}
.four-echarts {
  width: 100%;
}
.test-div {
  position: absolute;
  right: 0;
  width: 100%;
  display: flex;
  font-size: 16px;
  font-weight: bold;
  flex-direction: column;
  color: #000;
  align-items: flex-end;
  margin: 0 30px;
  z-index: 100;
  span {
    cursor: pointer;
  }
}
.form {
  // background-color: rgb(232, 232, 232);
  .title_sd-detail-form_common .buttons_sd-detail-form_common {
    display: none;
  }
  :global(.buttons_sd-detail-form_common) {
    visibility: hidden;
    display: none;
  }
}

.process > div:last-child {
  position: absolute;
  bottom: 30px;
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  padding: 0px 30%;
  & > span {
    display: inline-block;
    margin: 0 5px;
    color: #000;
    cursor: pointer;
    &.no-start {
      color: grey;
    }
    &.going {
      color: green;
    }
    &.finished {
      color: blue;
    }
  }
}
.find > div:last-child {
  position: absolute;

  span {
    display: inline-block;
    margin: 0 5px;
  }
}

.charts {
  padding: 10px 0 0 10px;
  .icon {
    position: relative;
    top: 20%;
    // margin-right: 10px;
    font-size: 25px;
    color: #e9e9e9;
  }

  .emptyecharts {
    width: 600px;
    height: 400px;
    margin: auto auto;
    text-align: center;
    &::after {
      display: block;
      padding-top: 150px;
      content: '无数据';
    }
  }

  & > div {
    float: left;
    width: 50%;
    padding: 0 10px 10px 0;
  }
  & > div:first-child {
    width: 100%;
    .content > div:first-child {
      margin-left: 0;
    }
    .content > div {
      margin-left: 20px;
      // height: 30px;
      & > span {
        margin-right: 50px;
      }
      &.projectBrief {
        position: relative;
        height: 140px;
        & > div {
          position: absolute;
        }
        .info-div {
          display: flex;
          justify-content: space-between;
          font {
            color: #000000;
          }
        }
        .date-div {
          display: flex;
          justify-content: space-evenly;
        }
        & > div:first-child {
          top: 10px;
          right: 150px;
          left: 150px;
          width: 50%;
          margin: auto;

          .user {
            display: block;
            float: left;
            margin: 10px 0;
            & > span {
              float: left;
              margin-right: 5px;
            }
            & > span > span {
              display: block;
              font-size: 14px;
              color: #1e1e1e;
            }
            & > span > span:last-child {
              font-size: 10px;
              color: #b8b9be;
            }
          }
        }

        .label {
          margin-left: 20px;
          color: #c0c0c6;
        }
        .label:first-child {
          margin-left: 0;
        }

        .steps.process {
          & > span:first-child {
            border-color: #6dcded;
          }
          .icon {
            color: #6dcded;
          }
        }
        .steps {
          position: relative;
          float: left;
          width: 260px;
          padding: 20px 10px;
          &::before {
            position: absolute;
            right: 5px;
            display: block;
            width: 1px;
            height: 56px;
            content: '';
            border: 1px solid rgb(246, 246, 246);
          }
          &:last-child::before {
            display: none;
          }
          & > span:first-child {
            display: inline-block;
            width: 50px;
            height: 50px;
            margin: 0;
            margin-right: 10px;
            text-align: center;
            border: 2px solid #e9e9e9;
            border-radius: 50%;
          }
          & > span {
            display: inline-block;
            float: left;
            font-size: 14px;
            line-height: 25px;
            color: #1e1e1e;
            word-break: keep-all;
          }
          & > span > span:first-child {
            display: block;
            font-size: 14px;
            color: #c0c0c6;
          }
        }
      }

      &.divider {
        height: 1px;
        margin: 10px 0;
      }
    }
    .status {
      display: block;
      height: 100%;
      background-color: #54c5eb;
      border-radius: 10%;
      .icon {
        top: 20px;
        font-size: 100px;
        color: #76d1ef;
      }
      span {
        position: absolute;
        top: 60px;
        left: 40px;
        font-size: 18px;
        color: #fbfdfe;
      }
    }
  }
  .echarts {
    margin: auto auto;
  }
  .second-echarts {
    width: 100%;
    height: 400px;
  }
  .find-echarts {
    width: 100%;
  }
  .content {
    position: relative;
    padding: 10px;
    background-color: #fff;
    & > div:first-child {
      font-weight: bold;
    }
    & > div:first-child::before {
      display: inline-block;
      width: 3px;
      height: 0;
      // margin: 0 10px;
      vertical-align: bottom;
      content: '';
      background-color: #1890ff;
    }
  }

  .divider {
    margin: 10px 0;
  }
  .bottom-div {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    .middle-div {
      padding: 0 10px;
    }
    & > div {
      width: 100%;
    }
  }
}
</style>