UNION_NSI/target/classes/static/components/syr/syrinfo.vue

<template>
  <transition name="el-zoom-in-center">
    <div class="transition-item" v-show="smm.status==='detail'">
      <el-card shadow="never" class="box-card">
        <div slot="header" class="clearfix">
          <el-button icon="el-icon-back" type="text" @click="changeStatus" style="font-size: 18px">返回</el-button>
        </div>

      </el-card>
    </div>
  </transition>

</template>

<script>
let passPlot = null
let goodPlot = null

let jylxPlot = null
let lxlevelPlot = null


module.exports = {
  data() {
    return {
      kt: {
        jbxx: {},
        lxpsxx: {},
        jtpsxx: {},
        jtbgs: {},
        yjcgfj: []
      },
      pwlxxxshow: false,
      pwjtxxshow: false
    }
  },
  props: {
    smm: {
      type: 'Object',
      default: () => {
        return {
          status: 'table',
          id: '',
          active: '1',
          showpane: [1],
          request: ''
        }
      }
    },
  },
  watch: {
    smm(o) {
      if (o.status === 'detail') {
        this.getData(o.id)
      }
    }
  },
  methods: {
    changeStatus() {
      this.smm.status = 'table'
      this.$emit('update:smm', this.smm)
    },
    getData(val) {
      $.get(base + '/platform/syr/common/findOne', {id: val}).then(res => {
        if (res.code === 0) {
          this.kt = res.data
          this.kt.jbxx.xmzcy = JSON.parse(res.data.jbxx.xmzcy)
          if (this.kt.jbxx.state >= 40 && this.smm.showpane.includes(4)) {
            this.initPwLxPsPlot()
          }
          if (this.kt.jbxx.state > 100 && this.kt.jbxx.lxresult === 1 && this.smm.showpane.includes(10)) {
            this.initPwJtPsPlot()
          }
        }
      })
    },
    initPwLxPsPlot() {
      //已评审的
      let ypsList = this.kt.lxpsxx.filter(o => o.pssj !== null)
      if (ypsList.length > 0) {
        this.pwlxxxshow = true
      }
      //建议立项的
      let jylxList = this.kt.lxpsxx.filter(o => o.isjylx === 1)

      this.$nextTick(() => {
        const jylxDiv = document.getElementById('jylxDiv')
        const jylxChart = echarts.init(jylxDiv)
        const value = (jylxList.length / ypsList.length) * 100;
        const option = {
          tooltip: {
            formatter: '{a} <br/>{b} : {c}%'
          },
          series: [
            {
              name: 'Pressure',
              type: 'gauge',
              progress: {
                show: true
              },
              detail: {
                valueAnimation: true,
                formatter: '{value}'
              },
              data: [
                {
                  value: value,
                  name: '建议立项率'
                }
              ]
            }
          ]
        };
        jylxChart.setOption(option)


        const level2List = this.kt.lxpsxx.filter(o => {
          return o.lxlevel === '2000'
        })
        const level3List = this.kt.lxpsxx.filter(o => {
          return o.lxlevel === '3000'
        })
        const level5List = this.kt.lxpsxx.filter(o => {
          return o.lxlevel === '5000'
        })
        let roleData = [{name: '2000元', value: level2List.length}, {
          name: '3000元',
          value: level3List.length
        }, {name: '5000元', value: level5List.length}]

        const lxlevelChart = echarts.init(document.getElementById('lxlevelDiv'))
        lxlevelChart.setOption({
          legend: {
            orient: 'vertical',
            left: 'left'
          },
          tooltip: {
            trigger: 'item'
          },
          series: [
            {
              name: '立项等次',
              type: 'pie',
              radius: '50%',
              data: roleData,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        })
      })
    },
    initPwJtPsPlot() {
      //已评审的
      let ypsList = this.kt.jtpsxx.filter(o => o.pssj !== null)
      //通过的
      let passList = this.kt.jtpsxx.filter(o => o.ispass === 1)
      //优秀的
      let goodList = this.kt.jtpsxx.filter(o => o.isgood === 1)

      this.$nextTick(() => {
        const passChart = echarts.init(document.getElementById('passDiv'))
        const passValue = (passList.length / ypsList.length) * 100
        passChart.setOption({
          tooltip: {
            formatter: '{a} <br/>{b} : {c}%'
          },
          series: [
            {
              name: 'Pressure',
              type: 'gauge',
              progress: {
                show: true
              },
              detail: {
                valueAnimation: true,
                formatter: '{value}'
              },
              data: [
                {
                  value: passValue,
                  name: ''
                }
              ]
            }
          ]
        })

        const goodChart = echarts.init(document.getElementById('goodDiv'))
        const goodValue = (goodList.length / passList.length) * 100
        goodChart.setOption({
          tooltip: {
            formatter: '{a} <br/>{b} : {c}%'
          },
          series: [
            {
              name: 'Pressure',
              type: 'gauge',
              progress: {
                show: true
              },
              detail: {
                valueAnimation: true,
                formatter: '{value}'
              },
              data: [
                {
                  value: goodValue,
                  name: ''
                }
              ]
            }
          ]
        })


      })


      // if(passPlot){passPlot.destory()}
      // this.$nextTick(()=>{
      //     passPlot = new G2Plot.Liquid(document.getElementById('passDiv'), {
      //         forceFit: false,
      //         width: 150,
      //         height: 150,
      //         min: 0,
      //         max: ypsList.length,
      //         value: passList.length,
      //         statistic: {
      //             formatter: (value) => ((100 * value) / ypsList.length).toFixed(1) + '%',
      //         }
      //     })
      //     passPlot.render()
      // })


      // if(goodPlot){goodPlot.destory()}
      // this.$nextTick(()=>{
      //     goodPlot = new G2Plot.Liquid(document.getElementById('goodDiv'), {
      //         forceFit: false,
      //         width: 150,
      //         height: 150,
      //         min: 0,
      //         max: passList.length,
      //         value: goodList.length,
      //         statistic: {
      //             formatter: (value) => ((100 * value) / passList.length).toFixed(1) + '%',
      //         }
      //     })
      //     goodPlot.render()
      // })
    }
  }
}
</script>

<style>
.td-title {
  /*background-color:  #EBEEF5;*/
}

.td-content {
  color: gray;
}

.table-bordered > tbody > tr > td {
  text-align: center;
}

.el-tab-pane {
  height: 100%;
  overflow-y: auto;
}

.el-collapse-item__header {
  background-color: #317fca !important;
  color: #fff !important;
  padding-left: 10px !important;
  height: 35px !important;
  line-height: 35px !important;
  font-size: 16px !important;
}

.table {
  margin-bottom: 0px;
}

.table-bordered {
  border: none !important;
}

.item-label {
  width: 150px;
  text-align: right;
  vertical-align: middle;
  float: left;
  font-size: 14px;
  color: #606266;
  line-height: 40px;
  padding: 0 12px 0 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.item-label:after {
  content: ':';
}

.item-content {
  margin-left: 150px;
  line-height: 40px;
  position: relative;
  font-size: 14px;
}

.level-span {
  width: 20px;
  height: 20px;
  text-align: center;
  display: inline-block;
  border-radius: 10px;
}

.level-1 {
  border: 1px solid #DC143C;
  color: #DC143C;
}

.level-2 {
  border: 1px solid #FF69B4;
  color: #FF69B4;
}

.level-3 {
  border: 1px solid #FF4500;
  color: #FF4500;
}

.text-maxheight {
  max-height: 200px;
  overflow-y: auto;
}

.box-card-syr {
  /*width: 50%;*/
  /*margin: 10px;*/
}

</style>