settle_down_web/src/views/life-line/situational-components/echarts/pipelineEcharts/hiddenDangerEchart.vue

<template>
  <div class="gasRiskBody">
      <p class="gasRiskTimeOut" @click="showYinHuan('0',true,'')">已超时：<span class="light-red">{{ yinHuanOverHourCount }}</span></p>
    <div id="hiddenDanger-pipeline" />
      <div v-show="!isShowBottom" class="echartsBottomTest" @mouseenter="isShowBottom = true" />
      <div v-show="isShowBottom" class="echartsBottom" @mouseleave="isShowBottom = false">
        <div class="bottomInfoBox" @click="showYinHuan('0',false,$constant.YINHUAN_GRADE.get('重大'))">
          <span class="iRed">{{ zhongDaCount }}</span>
        <span>重 大</span>
      </div>
      <div class="columLine" />
        <div class="bottomInfoBox" @click="showYinHuan('0',false,$constant.YINHUAN_GRADE.get('较大'))">
          <span class="iRed">{{ jiaoDaCount }}</span>
        <span>较 大</span>
      </div>
      <div class="columLine" />
        <div class="bottomInfoBox" @click="showYinHuan('0',false,$constant.YINHUAN_GRADE.get('一般'))">
          <span class="iGreen">{{ yiBanCount }}</span>
        <span>严 重</span>
      </div>
      <div class="columLine" />
        <div class="bottomInfoBox" @click="showYinHuan('0',false,$constant.YINHUAN_GRADE.get('低'))">
          <span class="iGreen">{{ diCount }}</span>
        <span>一 般</span>
      </div>
    </div>
<!--      <el-dialog-->
<!--          v-el-drag-dialog-->

<!--          :close-on-click-modal="false"-->
<!--          :close-on-press-escape="false"-->
<!--          :lock-scroll="false"-->
<!--          :modal="false"-->
<!--          :visible.sync="dialogyinhuanVisible"-->
<!--          custom-class="dialogNew width3840px"-->
<!--          width="1920px"-->
<!--      >-->
<!--          <yinhuan v-if="dialogyinhuanVisible" ref="detailShow"/>-->
<!--      </el-dialog>-->
  </div>
</template>

<script>
import * as echarts from 'echarts'
// import { number } from 'echarts/lib/export'
import yinhuan from '@/views/yinhuan/yinhuan.vue'
import constant from '@/static/utils/constant'
import myBus from '@/views/life-line/monitor/assets/js/myBus'

export default {
    name: 'GasRiskEchart',
    components: {
        yinhuan
    },
    props: {
        // eslint-disable-next-line vue/require-prop-type-constructor
        yinHuanOverHourCount: 0, // 超时数量
        yinHuan: { // 隐患
            type: Array,
            default: function() {
                return []
            }
        }
    },
    data() {
        return {
            isShowBottom: false,
            dialogyinhuanVisible: false,
            zhongDaCount: 0,
            jiaoDaCount: 0,
            yiBanCount: 0,
            diCount: 0,
            zhongDaCountBai: 0,
            jiaoDaCountBai: 0,
            yiBanCountBai: 0,
            diCountBai: 0
        }
    },
    deactivated() {
        this.dialogtestVueVisible = false
    },
    watch: {
        yinHuan(newVal, oldVal) {
            // 监听 num 属性的数据变化
            // 作用 : 只要 num 的值发生变化,这个方法就会被调用
            // 只要没有发生变化，就没有办法进行其他的操作
            // newData是更新后的数据
            // oldData是旧数据
            // //console.log('newVal:', newVal)
            // //console.log('oldVal:', oldVal)
            let zhongDaCount = 0
            let jiaoDaCount = 0
            let yiBanCount = 0
            let diCount = 0
            // 0-一级，1-二级，2-三级，3-四级，
            for (let i = 0; i < newVal.length; i++) {
                if (newVal[i].hidden_trouble_grade == constant.YINHUAN_GRADE.get('低')) {
                    diCount = newVal[i].count
                } else if (newVal[i].hidden_trouble_grade == constant.YINHUAN_GRADE.get('一般')) {
                    yiBanCount = newVal[i].count
                } else if (newVal[i].hidden_trouble_grade == constant.YINHUAN_GRADE.get('较大')) {
                    jiaoDaCount = newVal[i].count
                } else if (newVal[i].hidden_trouble_grade == constant.YINHUAN_GRADE.get('重大')) {
                    zhongDaCount = newVal[i].count
                }
            }
            this.zhongDaCount = zhongDaCount
            this.jiaoDaCount = jiaoDaCount
            this.yiBanCount = yiBanCount
            this.diCount = diCount
            const total = zhongDaCount + jiaoDaCount + yiBanCount + diCount
            this.zhongDaCountBai = (zhongDaCount / total * 100).toFixed(2)
            this.jiaoDaCountBai = (jiaoDaCount / total * 100).toFixed(2)
            this.yiBanCountBai = (yiBanCount / total * 100).toFixed(2)
            this.diCountBai = (diCount / total * 100).toFixed(2)
            this.getChart()
        }
    },
    mounted() {
        this.getChart()
    },
    methods: {
        // 显示风险小屏幕, sceneCode选择场景,isOver是否超时,selectGrade选择等级
        showYinHuan(sceneCode, isOver, selectGrade) {
            myBus.$emit('showYinHuan', { sceneCode: '4', isOver, selectGrade })
            // this.dialogyinhuanVisible = true
            // this.$nextTick(() => {
            //     this.$refs.detailShow.toGetData('4', isOver, selectGrade)
            // })
        },
        contains(arrays, obj) {
            var i = arrays.length
            while (i--) {
                if (arrays[i].name === obj) {
                    return i
                }
            }
            return false
        },
        getChart() {
            const myChart = echarts.init(document.getElementById('hiddenDanger-pipeline'))
            var mapData = [
                {
                    'name': '重大隐患',
                    'value': this.zhongDaCount,
                    'color': '#FB565E'
                },
                {
                    'name': '较大隐患',
                    'value': this.jiaoDaCount,
                    'color': '#F19904'
                },
                {
                    'name': '严重隐患',
                    'value': this.yiBanCount,
                    'color': '#2B78FF'
                }, {
                    'name': '一般隐患',
                    'value': this.diCount,
                    'color': '#00F2FF'
                }
            ]
            var data = []
            var IndustryArr = []
            var indicator = []
            var sum = 0
            mapData.forEach(item => {
                data.push(item.value)
                IndustryArr.push(item.name)
                sum += item.value
                if (sum === 0) {
                    sum = 1
                }
                indicator.push({
                    max: 100,
                    name: item.name,
                    value: item.value,
                    color:item.color
                })
            })
            //console.log('sum', indicator)
            const colorList = ['#FB565E', '#F19904', '#2B78FF', '#00F2FF']
            var option = {
                tooltip: {
                    show: false
                },
                radar: [{
                    indicator: indicator,
                    radius: '70%',
                    nameGap: 10,
                    center: ['50%', '50%'],
                    splitNumber: 4,
                    name: {
                        formatter: (params, index) => {
                            //console.log('param', indicator[i])
                            var i = this.contains(indicator, params)
                            var percent = ((indicator[i].value / sum) * 100).toFixed(2)
                            return '{value|' + indicator[i].value + '个' + '}' + '\xa0' + '{percent|' + percent + '%' + '}' + '\n' + params
                            // return `\xa0\xa0\xa0\xa0\xa0` + '处置率：' + indicator[index].percent + '%'
                        },
                        textStyle: {
                            color: 'white',
                            fontSize: 30,
                            rich: {
                                percent: {
                                    fontSize: 30,
                                    fontWeight: 'normal',
                                    color: 'white'
                                }
                            }
                        }
                    },
                    splitArea: {
                        areaStyle: {
                            color: [
                                'rgba(100, 152, 255, 0.7)',
                                'rgba(100, 152, 255, 0.5)',
                                'rgba(100, 152, 255, 0.3)',
                                'rgba(100, 152, 255, 0.1)'
                                // 'rgba(100, 152, 255, 0.3)',
                                // 'rgba(100, 152, 255, 0.2)'
                            ],
                            shadowColor: 'rgba(0, 0, 0, 0.3)'
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(255, 255, 255, 0.2)'
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(255, 255, 255, 0)'
                        }
                    }
                }],
                series: [{
                    name: '雷达图',
                    type: 'radar',
                    symbolSize: 15,
                    emphasis: {
                        areaStyle: {
                            color: 'rgba(164, 199, 255, 1)'
                        }
                    },
                    data: [{
                        value: [...data],
                        name: '行业贷款分布',
                        textStyle: {
                            fontSize: 30
                        },
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    0,
                                    1,
                                    [
                                        {
                                            offset: 0,
                                            color: 'rgba(251, 86, 94, 1)'
                                        },
                                        {
                                            offset: 0.5,
                                            color: 'rgba(0, 242, 255, 1)'
                                        },
                                        {
                                            offset: 1,
                                            color: 'rgba(43, 120, 255, 1)'
                                        }
                                    ],
                                    false
                                )
                            }
                        },
                        lineStyle: {
                            color: 'rgba(25, 86, 224, 1)'
                        }
                    }]
                }]
            }

            myChart.setOption(option)
            myChart.on('click', (e) => {
                //console.log(e)
                // 没有反应,所以不行
                // let selectGrade = ''
                // if (e.name === '重大风险') {
                //     selectGrade = '3'
                // } else if (e.name === '较大风险') {
                //     selectGrade = '2'
                // } else if (e.name === '一般风险') {
                //     selectGrade = '1'
                // } else if (e.name === '低 风 险') {
                //     selectGrade = '0'
                // }
                // this.showYinHuan('0', false, selectGrade)
            })
        }
    }
}
</script>

<style scoped>
#hiddenDanger-pipeline{
    width: 765px;
    height: 550px;
}
/deep/ .el-dialog__wrapper {
    pointer-events: none !important;
}

/deep/ .el-dialog {
    pointer-events: auto !important;
}

/deep/ .el-dialog__headerbtn {
    //font-size: 75px;
    z-index: 10000;
}
</style>