diantou/src_custom/spicdecisionsupportcenter/spic-decision-support-center.vue

<template>
  <a-layout :class="$style.mainDiv">
    <a-layout-header :class="$style.header">
      <div :class="$style.title"> </div>

      <div :class="$style.rightDiv">
        <div :class="$style.titles">审计总览 </div>
        <div :class="$style.year">
          <a-date-picker
            v-model="planYear"
            :class="$style.yearSelect"
            allow-clear
            mode="year"
            picker="YYYY"
            format="YYYY"
            :input-read-only="true"
            :open="yearOpen"
            placeholder="选择年份"
            @change="handlerChange('year', $event)"
            @panelChange="panelChange"
            @openChange="openChange"
          />
        </div>
        <div :class="$style.group">
          <div v-show="auditOrg.length === 0" :class="$style.holder" @click="holderClick"
            >审计机构
          </div>
          <a-form-model-item :label="null" prop="auditOrg">
            <!-- <sd-group-picker v-model="auditOrg" :single="true" :root-node="rootNode" /> -->
            <audit-group-picker
              v-model="auditOrg"
              :single="true"
              :read-only="false"
              :root-node="rootNode"
              @change="handlerChange('org', $event)"
            />
          </a-form-model-item>
        </div>
        <!--
          需求确认去掉关闭按钮
           <div :class="$style.close" @click="closeWindow">
          <a-icon type="close"></a-icon>
        </div> -->
      </div>
    </a-layout-header>
    <a-layout-content :class="$style.contentDiv">
      <!-- 上部div (总部显示)-->
      <iam-audit-dsc-top-div
        v-if="!isTwo"
        :class="$style.topDiv"
        :unid-id="auditOrg"
        :plan-year="planYear"
      ></iam-audit-dsc-top-div>
      <!-- 上部div (二级单位显示)-->
      <spicAuditDscTopDiv
        v-if="isTwo"
        :class="$style.topDiv"
        :unid-id="auditOrg"
        :plan-year="planYear"
      ></spicAuditDscTopDiv>

      <!-- 中部div -->
      <!-- <iam-audit-dsc-center-div
        :unid-id="auditOrg"
        :plan-year="planYear"
        :class="$style.centerDiv"
      ></iam-audit-dsc-center-div> -->
      <!-- 底部div -->
      <a-row>
        <a-col :span="12">
          <iam-audit-dsc-bottom-div
            :key="key"
            title="审计发现问题"
            :unid-id="auditOrg"
            :options="chartOne"
            :class="$style.bottomDiv"
            :years="planYear"
            @echartClick="handlerOneClick"
            @getYear="handlerYear('1', $event)"
          ></iam-audit-dsc-bottom-div>
        </a-col>
        <a-col :span="12">
          <iam-audit-dsc-bottom-div
            :key="key"
            title="审计问题分析"
            :options="chartTwo"
            :unid-id="auditOrg"
            :class="$style.bottomDiv"
            :years="planYear"
            @echartClick="handlerTwoClick"
            @getYear="handlerYear('2', $event)"
          ></iam-audit-dsc-bottom-div>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="12">
          <iam-audit-dsc-bottom-div
            :key="key"
            title="问题涉及金额"
            :options="chartThree"
            :unid-id="auditOrg"
            :class="$style.bottomDiv"
            :years="planYear"
            @echartClick="handlerThreeClick"
            @getYear="handlerYear('3', $event)"
          ></iam-audit-dsc-bottom-div>
        </a-col>
        <a-col :span="12">
          <iam-audit-dsc-bottom-div
            :key="key"
            title="年度审计数量<span style='color:#e73030'>TOP5</span>的问题"
            :options="chartFour"
            :unid-id="auditOrg"
            :class="$style.bottomDiv"
            :years="planYear"
            @echartClick="handlerFourClick"
            @getYear="handlerYear('4', $event)"
          ></iam-audit-dsc-bottom-div>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="12">
          <iam-audit-dsc-bottom-div
            :key="key"
            title="审计整改情况"
            :options="chartFive"
            :unid-id="auditOrg"
            :class="$style.bottomDiv"
            :years="planYear"
            @echartClick="handlerFiveClick"
            @changeLegend="changeLegend"
            @getYear="handlerYear('5', $event)"
          ></iam-audit-dsc-bottom-div>
        </a-col>
        <a-col :span="12">
          <iam-audit-dsc-bottom-div
            :key="key"
            title="需要整改的问题"
            :options="chartSex"
            :unid-id="auditOrg"
            :class="$style.bottomDiv"
            :years="planYear"
            @echartClick="handlerSexClick"
            @getYear="handlerYear('6', $event)"
          ></iam-audit-dsc-bottom-div>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="12">
          <iam-audit-dsc-bottom-div
            :key="key"
            title="被审计整改情况"
            :options="chartSeven"
            :unid-id="auditOrg"
            :class="$style.bottomDiv"
            :years="planYear"
            @echartClick="handlerSevenClick"
            @changeLegend="changeLegend"
            @getYear="handlerYear('7', $event)"
          ></iam-audit-dsc-bottom-div>
        </a-col>
        <a-col :span="12">
          <iam-audit-dsc-bottom-div
            :key="key"
            title="被审计需整改问题"
            :options="chartEight"
            :unid-id="auditOrg"
            :class="$style.bottomDiv"
            :years="planYear"
            @echartClick="handlerEightClick"
            @getYear="handlerYear('8', $event)"
          ></iam-audit-dsc-bottom-div>
        </a-col>
      </a-row>
    </a-layout-content>
  </a-layout>
</template>

<script>
import minxoptions from './minxisoptions'
import auditGroupPicker from '@product/iam/components/picker/audit-group-picker.vue'
import spicAuditDscTopDiv from './components/spic-audit-dsc-top-div.vue'
import axios from '@/common/services/axios-instance'
import iamAuditDscService from './components/iam-audit-dsc-service'
import { getUserInfo } from '@/common/store-mixin'
import components from './_import-components/spic-decision-support-center-import'

export default {
  name: 'SpicDecisionSupportCenter',
  metaInfo: {
    title: '审计总览 ',
  },
  components: {
    auditGroupPicker,
    spicAuditDscTopDiv,
    ...components,
  },
  mixins: [minxoptions],
  data() {
    return {
      yearOpen: false,
      key: 0,
      auditOrg: [],
      options: [],
      planYear: undefined,
      rootNode: {},
      isTwo: false,
    }
  },
  watch: {
    // 监听数据，更新之后需要刷新图标
    planYear() {
      this.key++
    },
    auditOrg() {
      this.key++
    },
  },

  created() {
    // this.options = []
    // let curYear = new Date().getFullYear() - 5
    // for (let i = 0; i < 10; i++) {
    //   this.options.push({
    //     value: curYear + '',
    //     label: curYear,
    //   })
    //   curYear++
    // }
    let userInfo = getUserInfo()
    const params = {
      orgId: userInfo.deptId,
    }
    // iamAuditDscService.getUserInfo(params).then((res) => {
    //   this.id = res.data
    //   const deptCode = userInfo.deptId.toString()
    //   const deptName = userInfo.deptName
    //   this.rootNode = { code: deptCode, name: deptName, id: this.id }
    // })
    axios({
      url: 'api/xcoa-mobile/v1/iamorg/getCurrentUserGroup',
      method: 'get',
    }).then((res) => {
      userInfo = res.data
      params.orgId = res.data.id
      axios({
        url: 'api/xcoa-mobile/v1/iamorg/findIamOrg',
        method: 'post',
        params,
      })
        .then((res) => {
          this.id = res.data.id
          const deptCode = res.data.orgId + ''
          const deptName = res.data.orgName
          this.rootNode = { code: deptCode, name: deptName, id: this.id }
          // this.id = res.data.id
          // const deptCode = userInfo.id.toString()
          // const deptName = res.data.orgName
          // this.rootNode = { code: deptCode, name: deptName, id: this.id }
          // bug22421 默认统计机构设置到本机构及一下
          const currNoe = {
            id: res.data.orgId,
            // oldId: 0,
            text: deptName,
            name: deptName,
            title: deptName,
            code: deptCode,
            leaf: false,
            isleaf: false,
            props: {},
            children: [],
            differentDisplay: false,
            expandable: true,
            type: 'Group',
          }
          this.auditOrg.push(currNoe)
          var code = currNoe.id
          axios({
            url: 'api/xcoa-mobile/v1/iamtarget/checkGroup?code=' + code,
            method: 'get',
          }).then((res) => {
            this.isTwo = res.data
            // console.log('shifou二级currNoe', this.isTwo)
          })
        })
        .finally(() => {
          this.loadData()
        })
    })

    // 22738 年份默认为当年
    this.planYear = new Date().getFullYear().toString()
  },
  mounted() {},
  methods: {
    // type 1-6 各自图表的type选取时间返回对应的年份year
    handlerYear(type, year) {
      debugger
      // console.log('日期返回', type, year)
      var unit = this.auditOrg
      const params = {
        unitId: unit[0].id,
        planYear: year,
      }
      if (type * 1 === 1) {
        // 发现问题数(柱状图)
        this.findQuestionNum(params)
      } else if (type * 1 === 2) {
        const params = {
          unitId: unit[0].id,
          planYear: year,
          name: 4,
        }
        // 审计问题分析
        this.findQuestionQuery1(params)
      } else if (type * 1 === 3) {
        // 问题涉及金额
        this.findAmountNum(params)
      } else if (type * 1 === 4) {
        const params = {
          unitId: unit[0].id,
          planYear: year,
          name: 4,
        }
        // 年度TOP5数据
        this.findTopQuery1(params)
      } else if (type * 1 === 5) {
        const params = {
          unitId: unit[0].id,
          planYear: year,
          name: 4,
        }
        // 审计整改情况
        this.findRectQuery1(params)
      } else if (type * 1 === 6) {
        // 需要整改的问题
        this.findRectQuestionNum(params)
      } else if (type * 1 === 7) {
        const params = {
          unitId: unit[0].id,
          planYear: year,
          name: 4,
        }
        // 被审计整改情况
        this.findRectQuerySeven1(params)
      } else if (type * 1 === 8) {
        // 被审计需整改问题
        this.findRectQuestionNumEight(params)
      }
    },
    // 点击事件
    handlerChange(type, e) {
      var code = this.auditOrg[0].id
      console.log('点击============groupgroupgroup-----', code)
      axios({
        url: 'api/xcoa-mobile/v1/iamtarget/checkGroup?code=' + code,
        method: 'get',
      }).then((res) => {
        this.isTwo = res.data
        console.log('shifou二级', this.isTwo)
      })
      // console.log('输出1111111111', type, e)
      this.loadData()
    },
    loadData() {
      const _this = this
      var year = this.planYear
      var unit = this.auditOrg
      // console.log(unit[0].id, 'params--unit[0].idunit[0].id')
      const params = {
        unitId: unit[0].id,
        planYear: this.planYear,
      }
      // 发现问题数(柱状图)
      this.findQuestionNum(params)
      // 审计问题分析
      this.findQuestionQuery()
      // 问题涉及金额
      this.findAmountNum(params)
      // 年度TOP5数据
      this.findTopQuery()
      // 审计整改情况
      this.findRectQuery()
      // 需要整改的问题
      this.findRectQuestionNum(params)
      // 被审计整改情况
      this.findRectQuerySeven()
      // 被审计需整改问题
      this.findRectQuestionNumEight(params)
    },

    // 发现问题数(柱状图)
    findQuestionNum(params) {
      const _this = this
      iamAuditDscService.findQuestionNumQuery(params).then((res) => {
        // console.log('柱状图11111----', res.data)
        const datas = res.data[0].data
        // console.log('柱状图11111----2', datas)

        let arr = []
        this.$nextTick(() => {
          if (datas?.length > 0) {
            arr = datas.map((itc) => {
              // console.log(itc, 'data------------')
              const obj = {
                name: itc?.name || null,
                value: itc?.value || 0,
                value1: itc?.text || 0,
                value2: itc?.percentage || 0,
              }
              return obj
            })
          } else {
            arr = []
          }
          // const datas = res.data
          // let arr = []
          // this.$nextTick(() => {
          //   if (datas?.length > 0) {
          //     arr = datas.map((itc) => {
          //       console.log(itc, 'data------------')
          //       const obj = {
          //         name: itc.data[0]?.name || null,
          //         value: itc.data[0]?.value || 0,
          //         value1: itc.data[0]?.text || 0,
          //         value2: itc.data[0]?.percentage || 0,
          //       }
          //       return obj
          //     })
          //   } else {
          //     arr = []
          //   }
          this.oneChartsMap(arr)
        })
      })
    },
    // 审计问题分析
    findQuestionQuery() {
      var unit = this.auditOrg
      const params = {
        unitId: unit[0].id,
        planYear: this.planYear,
        name: 4,
      }
      const _this = this
      iamAuditDscService.findQuestionQuery(params).then((res) => {
        const data = res.data
        // console.log('审计问题分析-------', data)
        _this.$nextTick(() => {
          const arr = data.map((itc) => {
            const obj = {
              name: itc.data[0].name,
              value: itc.data[0].value || 0,
              value2: itc.data[0].value1 || 0,
              // value3: itc.data[0].value2 || 0,
            }
            return obj
          })
          this.twoChartMap(arr)
        })
      })
    },
    findQuestionQuery1(params) {
      const _this = this
      iamAuditDscService.findQuestionQuery(params).then((res) => {
        const data = res.data
        _this.$nextTick(() => {
          const arr = data.map((itc) => {
            const obj = {
              name: itc.data[0].name,
              value: itc.data[0].value,
              value2: itc.data[0].value1,
              // value3: itc.data[0].value2,
            }

            return obj
          })
          this.twoChartMap(arr)
        })
      })
    },
    // 问题涉及金额
    findAmountNum(params) {
      const _this = this
      iamAuditDscService.getAuditFindMoneyList(params).then((res) => {
        const data = res.data
        // console.log('问题涉及金额-----------', data)
        _this.$nextTick(() => {
          const datas = JSON.parse(JSON.stringify(res.data[0]))
          const arr = datas.data.map((itc) => {
            const obj = {
              name: itc.name,
              value: itc.value || 0,
            }
            return obj
          })
          this.threeChartMap(arr)
        })
      })
    },
    // 年度TOP5
    findTopQuery() {
      var unit = this.auditOrg
      const params = {
        unitId: unit[0].id,
        planYear: this.planYear,
        name: 4,
      }
      const _this = this
      iamAuditDscService.getTOPResult(params).then((res) => {
        const data = res.data.filter((itcv) => itcv.data?.length > 0)
        console.log('年度TOP 5-------', data)
        let yearsc = ''
        _this.$nextTick(() => {
          const arr = data.map((itc) => {
            yearsc = itc.data[0].value
            const datas = []
            itc.data.forEach((itcv) => {
              datas.push({ label: itcv.name, value: itcv?.text || 0 })
            })
            const obj = {
              name: yearsc,
              data: datas,
            }
            return obj
          })
          console.log('年度TOP', arr)
          _this.fourChartMap(arr)
        })
      })
    },
    findTopQuery1(params) {
      const _this = this
      iamAuditDscService.getTOPResult(params).then((res) => {
        const data = res.data.filter((itcv) => itcv.data?.length > 0)
        let yearsc = ''
        let arr = []
        _this.$nextTick(() => {
          console.log(data, 'data------')
          if (data?.length > 0) {
            arr = data.map((itc) => {
              yearsc = itc.data[0].value
              const datas = []
              itc.data.forEach((itcv) => {
                datas.push({ label: itcv.name, value: itcv?.text * 1 || 0 })
              })
              const obj = {
                name: yearsc,
                data: datas,
              }
              return obj
            })
          } else {
            arr = []
          }

          console.log(arr, 'shuju1---arr')
          _this.fourChartMap(arr)
        })
      })
    },
    // 审计整改情况
    findRectQuery() {
      var unit = this.auditOrg
      const params = {
        unitId: unit[0].id,
        planYear: this.planYear,
        name: 4,
      }
      const _this = this
      iamAuditDscService.getRectResult(params).then((res) => {
        const data = res.data
        // console.log('审计整改情况------', data)
        _this.$nextTick(() => {
          const arr = data.map((itc) => {
            const obj = {
              name: itc.data[0].value,
              // value: 0,
              value2: itc.data[0].text || 0,
              // value3: itc.data[0].id,
              value4: itc.data[0].percentage || 0,
            }

            return obj
          })
          // console.log('xilie--', arr)
          this.fiveChartsMap(arr)
        })
      })
    },
    findRectQuery1(params) {
      const _this = this
      iamAuditDscService.getRectResult(params).then((res) => {
        const data = res.data
        _this.$nextTick(() => {
          const arr = data.map((itc) => {
            const obj = {
              name: itc.data[0].value,
              // value: 0,
              value2: itc.data[0].text || 0,
              // value3: itc.data[0].id,
              value4: itc.data[0].percentage || 0,
            }

            return obj
          })
          this.fiveChartsMap(arr)
        })
      })
    },

    // 需要整改的问题
    findRectQuestionNum(params) {
      const _this = this
      iamAuditDscService.getQuestionRectResult(params).then((res) => {
        const data = res.data
        // console.log('需要整改的问题', data)
        _this.$nextTick(() => {
          const datas = JSON.parse(JSON.stringify(res.data[0]))
          const arr = datas.data.map((itc) => {
            const obj = {
              name: itc.name,
              value: itc.value || 0,
              value2: itc.percentage || 0,
            }
            return obj
          })
          this.sexChartsMap(arr)
        })
      })
    },

    findRectQuerySeven() {
      var unit = this.auditOrg
      const params = {
        unitId: unit[0].id,
        planYear: this.planYear,
        name: 4,
      }
      const _this = this
      iamAuditDscService.getSevenRectResult(params).then((res) => {
        const data = res.data
        _this.$nextTick(() => {
          const arr = data.map((itc) => {
            const obj = {
              name: itc.data[0].value,
              value2: itc.data[0].text || 0,
              value4: itc.data[0].percentage || 0,
            }

            return obj
          })
          this.SevenChartsMap(arr)
        })
      })
    },

    findRectQuerySeven1(params) {
      const _this = this
      iamAuditDscService.getSevenRectResult(params).then((res) => {
        const data = res.data
        _this.$nextTick(() => {
          const arr = data.map((itc) => {
            const obj = {
              name: itc.data[0].value,
              value2: itc.data[0].text || 0,
              value4: itc.data[0].percentage || 0,
            }

            return obj
          })
          this.SevenChartsMap(arr)
        })
      })
    },
    findRectQuestionNumEight(params) {
      const _this = this
      iamAuditDscService.getEightQuestionRectResult(params).then((res) => {
        const data = res.data
        // console.log('需要整改的问题', data)
        _this.$nextTick(() => {
          const datas = JSON.parse(JSON.stringify(res.data[0]))
          const arr = datas.data.map((itc) => {
            const obj = {
              name: itc.name,
              value: itc.value || 0,
              value2: itc.percentage || 0,
            }
            return obj
          })
          this.eightChartsMap(arr)
        })
      })
    },

    // 1 审计发现问题
    handlerOneClick(item) {
      console.log(item, '-1-')
    },
    // 2 审计问题分析
    handlerTwoClick(item) {
      console.log(item, '-2-')
    },
    // 3 问题涉及金额
    handlerThreeClick(item) {
      console.log(item, '-3-')
    },
    // 4 年度审计数量TOP5的问题
    handlerFourClick(item) {
      debugger
      console.log(item, '年度审计数量TOP5点击')
      var unit = this.auditOrg
      var year = item.name
      const params = {
        unitId: unit[0].id,
        planYear: year,
        name: 4,
      }
      const url =
        '#/spic-audit-dsc-topfive-list?params=' +
        encodeURIComponent(JSON.stringify(params)) +
        '&type=top5list' +
        '&year=' +
        year
      window.open(url)
      console.log(item, '-4-')
    },
    // 5 审计整改情况
    handlerFiveClick(item) {
      console.log(item, '-5-')
    },
    // 6 需要整改的问题
    handlerSexClick(item) {
      console.log(item, '-6-')
    },
    handlerSevenClick(item) {
      console.log(item, '-7-')
    },
    handlerEightClick(item) {
      console.log(item, '-8-')
    },

    /**
     * 关闭当前窗口
     */
    closeWindow() {
      window.opener = window
      const win = window.open('', '_self')
      win.close()
    },
    holderClick() {
      document.querySelector('.group_iam-audit-dsc-main_product .ant-select').click()
    },
    /**
     * 打开或关闭年度选择
     */
    openChange(open) {
      this.yearOpen = open
    },
    /**
     * 年份选择时，关闭弹窗
     */
    panelChange(value) {
      this.planYear = value.format('YYYY')
      this.yearOpen = !this.yearOpen
      this.loadData()
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
$header-height: 60px;
.main-div {
  min-height: 100%;
  .header {
    display: flex;
    height: 60px;
    padding: 0 30px;
    font-size: 25px;
    line-height: 60px;
    color: #fff;
    background: #1b365d;
    .title {
      float: left;
      width: 50%;
      background: url('~@custom/images/logo.png') no-repeat left;
    }
    .right-div {
      .titles {
        padding-right: 50px;
        font-size: 18px;
        color: #fff;
      }

      display: flex;
      justify-content: flex-end;
      width: 50%;
      :global(.ant-form-item-control) {
        :global(.ant-select-selection--multiple .ant-select-selection__choice) {
          color: #fff;
          background-color: transparent;
        }
        :global(.ant-select-selection__choice__remove) {
          color: #fff;
        }
        :global(.ant-select-focused) {
          box-shadow: none;
        }
        :global(.ant-select) {
          width: 200px;
          margin-top: 11px;
          vertical-align: baseline;
          cursor: pointer;
        }
        :global(.ant-select-selection--multiple) {
          cursor: pointer;
        }
        :global(.ant-select-search__field) {
          display: none;
        }
        :global(.ant-select-selection) {
          background-color: transparent;
          border: none;
        }
        :global(.icon_audit-value-picker_product) {
          color: #fff;
        }
      }
      :global(.ant-input) {
        color: #fff;
        background-color: transparent;
        border: none;
      }
      :global(.ant-calendar-picker-icon) {
        color: #fff;
      }
      .year {
        margin-right: 15px;
        .year-select {
          display: block;
          width: 120px;
          margin-top: 15px;
          :global(.ant-calendar-picker-input) {
            cursor: pointer;
          }
        }
      }
      .group {
        position: relative;
        .holder {
          position: absolute;
          left: 10px;
          z-index: 1;
          font-size: 16px;
          color: #bfbfbf;
          cursor: pointer;
        }
        :global(.ant-select-selection) {
          overflow-y: hidden;
        }
        :global(.ant-select-selection__choice) {
          border: none;
        }
        :global(.ant-select-selection__choice__remove) {
          display: none;
        }
      }
      .close {
        margin-left: 15px;
        font-size: 22px;
        cursor: pointer;
      }
    }
  }
  .content-div {
    margin: 20px;
  }
  .top-div {
    background: transparent;
  }
  .center-div {
    margin-top: 20px;
  }
  .bottom-div {
    margin-top: 20px;
  }
}
</style>