settle_down_web/src/views/life-line/situational-components/echarts/roadEcharts/gasRiskEchart.vue

<template>
  <div class="gasRiskBody">
    <p class="gasRiskTimeOut" @click="showFenXian('0',false,'')">共计风险：<span class="light-red">{{ totalCount }}</span></p>
    <div id="gasRisk-road" />
    <div v-show="!isShowBottom" class="echartsBottomTest" @mouseenter="isShowBottom = true" />
    <div v-show="isShowBottom" class="echartsBottom" @mouseleave="isShowBottom = false">
      <div class="bottomInfoBox" @click="showFenXian('0',false,$constant.RISK_GRADE.get('重大'))">
        <span class="iRed">{{ zhongDaCount }}</span>
        <span>重 大</span>
      </div>
      <div class="columLine" />
      <div class="bottomInfoBox" @click="showFenXian('0',false,$constant.RISK_GRADE.get('较大'))">
        <span class="iRed">{{ jiaoDaCount }}</span>
        <span>较 大</span>
      </div>
      <div class="columLine" />
      <div class="bottomInfoBox" @click="showFenXian('0',false,$constant.RISK_GRADE.get('一般'))">
        <span class="iGreen">{{ yiBanCount }}</span>
        <span>一 般</span>
      </div>
      <div class="columLine" />
      <div class="bottomInfoBox" @click="showFenXian('0',false,$constant.RISK_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="dialogtestVueVisible"-->
<!--      custom-class="dialogNew width3840px"-->
<!--      width="3840px"-->
<!--    >-->
<!--      <testVue v-if="dialogtestVueVisible" ref="detailShow" />-->
<!--    </el-dialog>-->
  </div>
</template>

<script>
import * as echarts from 'echarts'
import testVue from '@/views/testProfile/testVue.vue'
import constant from '@/static/utils/constant'
import myBus from '@/views/life-line/monitor/assets/js/myBus'

export default {
    name: 'GasRiskEchart',
    components: {
        testVue

    },
    props: {
        // eslint-disable-next-line vue/require-prop-type-constructor
        fenXianOverHourCount: 0, // 超时数量
        fenXian: { // 风险
            type: Array,
            default: function() {
                return []
            }
        }
    },
    data() {
        return {
            isShowBottom: false,
            dialogtestVueVisible: false,
            zhongDaCount: 0,
            jiaoDaCount: 0,
            yiBanCount: 0,
            diCount: 0,
            zhongDaCountBai: 0,
            jiaoDaCountBai: 0,
            yiBanCountBai: 0,
            diCountBai: 0,
            totalCount: 0
        }
    },
    watch: {
        fenXian(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
            let totalCount = 0
            // 0-一级，1-二级，2-三级，3-四级，
            for (let i = 0; i < newVal.length; i++) {
                if (newVal[i].fxdj == constant.RISK_GRADE.get('低')) {
                    diCount = newVal[i].count
                    totalCount += newVal[i].count
                } else if (newVal[i].fxdj == constant.RISK_GRADE.get('一般')) {
                    yiBanCount = newVal[i].count
                    totalCount += newVal[i].count
                } else if (newVal[i].fxdj == constant.RISK_GRADE.get('较大')) {
                    jiaoDaCount = newVal[i].count
                    totalCount += newVal[i].count
                } else if (newVal[i].fxdj == constant.RISK_GRADE.get('重大')) {
                    zhongDaCount = newVal[i].count
                    totalCount += newVal[i].count
                }
            }

            this.zhongDaCount = zhongDaCount
            this.jiaoDaCount = jiaoDaCount
            // //console.log('jiaoDaCount',jiaoDaCount)
            this.yiBanCount = yiBanCount
            this.diCount = diCount
            this.totalCount = totalCount
            let total = zhongDaCount + jiaoDaCount + yiBanCount + diCount
            if (total === 0) {
                total = 1
            }
            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)
            // //console.log('jiaoDaCount1',jiaoDaCount)
            this.getChart()
            // //console.log('jiaoDaCount2',jiaoDaCount)
        }
    },
    deactivated() {
        this.dialogtestVueVisible = false
    },
    mounted() {
        // this.getChart()
    },
    methods: {
        // 显示风险小屏幕, sceneCode选择场景,isOver是否超时,selectGrade选择等级
        showFenXian(sceneCode, isOver, selectGrade) {
            myBus.$emit('showFenXian', { sceneCode: '6', isOver, selectGrade })
            // this.dialogtestVueVisible = true
            // this.$nextTick(() => {
            //     this.$refs.detailShow.toGetData('6', isOver, selectGrade)
            // })
        },
        getChart() {
            const myChart = echarts.init(document.getElementById('gasRisk-road'))
            var colorList = ['#FB565E', '#F19904', '#5C8BED', '#00F2FF']
            var datas = [{
                'value': this.zhongDaCountBai,
                'name': '重大风险',
                'number': this.zhongDaCount
            },
            {
                'value': this.jiaoDaCountBai,
                'name': '较大风险',
                'number': this.jiaoDaCount
            },
            {
                'value': this.yiBanCountBai,
                'name': '一般风险',
                'number': this.yiBanCount
            },
            {
                'value': this.diCountBai,
                'name': '低 风 险',
                'number': this.diCount
            }
            ]
            const maxArr = (new Array(datas.length)).fill(100)
            var option = {
                tooltip: {
                    trigger: 'axis',
                    formatter: (params) => {
                        // console.log('params', params)
                        let str = ''
                        str += `<span
                                  style="display:inline-block;
                                  margin-right:15px;
                                  border-radius:5px;
                                  width:20px;
                                  height:20px;
                                  background-color:${params[0].color}"></span>${params[0].name}：${params[0].value}`
                        return str
                    },
                    backgroundColor: 'rgba(255, 255, 255, 0.8)', // 背景
                    padding: [10, 30, 10, 30],
                    textStyle: {
                        color: 'rgba(51, 51, 51, 0.9)',
                        fontSize: 30
                    },
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    show: false
                },
                grid: {
                    top: 0,
                    bottom: 0,
                    left: 20,
                    right: 20,
                    containLabel: true
                },
                xAxis: {
                    axisLine: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    },
                    axisLabel: {
                        show: false,
                        textStyle: {
                            color: 'white',
                            fontSize: 30
                        }
                    }

                },
                yAxis: [{
                    type: 'category',
                    inverse: true,
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisPointer: {
                        label: {
                            show: true,
                            margin: 30
                        }
                    },
                    data: datas.map(item => item.name),
                    axisLabel: {
                        margin: 30,
                        fontSize: 30,
                        // align: 'left',
                        color: 'white'
                    }
                }, {
                    type: 'category',
                    inverse: true,
                    axisTick: 'none',
                    axisLine: 'none',
                    show: true,
                    data: datas.map(item => item.value),
                    axisLabel: {
                        show: true,
                        fontSize: 30,
                        color: 'rgba(0, 242, 255, 1)',
                        fontFamily: 'mfNumber',
                        formatter: function(params, index) {
                            // //console.log('param', params)
                            return '\xa0\xa0\xa0\xa0\xa0' + params + '%'
                        }
                        // formatter:function (param) {
                        //    return `<div style="color: red">${param}</div>`
                        // }
                    }
                }],
                series: [{
                    z: 2,
                    name: 'value',
                    type: 'bar',
                    barWidth: 41,
                    zlevel: 1,
                    data: datas.map((item, i) => {
                        const itemStyle = {
                            color: i > 3 ? colorList[3] : colorList[i],
                            shadowBlur: 50,
                            borderWidth: 0,
                            shadowColor: i > 3 ? colorList[3] : colorList[i],
                            borderColor: i > 3 ? colorList[3] : colorList[i],
                            barBorderRadius: [5, 5, 5, 5]
                        }
                        return {
                            value: item.value,
                            itemStyle: itemStyle
                        }
                    }),
                    label: {
                        show: false,
                        position: 'right',
                        color: '#333333',
                        fontSize: 30,
                        offset: [10, 0]
                    }
                },
                {
                    name: '背景',
                    type: 'bar',
                    barWidth: 41,
                    barGap: '-100%',
                    itemStyle: {
                        normal: {
                            color: 'rgba(254, 254, 254, 0.5)',
                            barBorderRadius: [5, 5, 5, 5]
                        }
                    },
                    data: maxArr
                }

                ]
            }
            myChart.setOption(option)
            myChart.on('click', (e) => {
                // console.log(e)
                let selectGrade = ''
                if (e.name === '重大风险') {
                    selectGrade = '4'
                } else if (e.name === '较大风险') {
                    selectGrade = '3'
                } else if (e.name === '一般风险') {
                    selectGrade = '2'
                } else if (e.name === '低 风 险') {
                    selectGrade = '1'
                }
                this.showFenXian('0', false, selectGrade)
            })
        }
    }
}
</script>

<style scoped>
   #gasRisk-road{
       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>