fj-dc-ui/.svn/pristine/7b/7b3ca2f595eb2019abf8a094fdd9c39a4d6b8a4d.svn-base

<!--  -->
<template>
    <div>
        <div style="width:100%;" :style="{'height': colHeight - 40 + 'px'}" ref="normal_bar_chart"></div>
    </div>
</template>

<script>
    //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
    //例如：import 《组件名称》 from '《组件路径》';
    import echarts from 'echarts'
    import request from "@util/gw_ajax_request"

    export default {
        //import引入的组件需要注入到对象中才能使用
        props: ['addForm', 'addForms', 'addFormt', 'isClear', 'testBool','singleOrMach'],

        components: {},
        data() {
            //这里存放数据
            return {
                countToNormal: 0,//专业饼图的一般问题数量
                countToHeavier: 0,//专业饼图的较重问题数量
                countToSerious: 0,//专业饼图的严重问题数量
                countToIfCasePblmfdx: 0,
                countToIfCasePblmdx: 0,
                countTotalHeavier_Serious_normal: 0,//柱状图 一般较重严重总数，用于算占比线
                countTotalHeavier_Serious: 0,//柱状图 一般较重严重总数，用于算占比线
                countTotalHeavier_Normal: 0,//柱状图 一般较重严重总数，用于算占比线
                countTotalSerious_Normal: 0,//柱状图 一般较重严重总数，用于算占比线
                // problemNumCount:[],
                // problemNumName:[],
                heavier_Serious_normal_Lists: [],//专业柱状图数据集
                zrtz_mainBodyNum_list: [],//专业柱状图较总数
                problemNumCountHeavier: [],//专业柱状图较重数据
                problemNumCountSerious: [],//专业柱状图严重数据
                problemNumCountNormal: [],//专业柱状图一般数据
                problemName: [],//专业柱状图横轴
                nhs_zb: [],//专业柱状图占比数据
                nhs_zb_n: [],//专业柱状图占比数据
                nhs_zb_h: [],//专业柱状图占比数据
                nhs_zb_s: [],//专业柱状图占比数据
                nhs_zb_nh: [],//专业柱状图占比数据
                nhs_zb_ns: [],//专业柱状图占比数据
                nhs_zb_hs: [],//专业柱状图占比数据
                barData_zy: {},
                pieData_zy: [],
                pieData_ifDx: [],
                barData: [],
                mySeries: [],
                scale: 1,
                rich: {
                    yellow: {
                        color: "#ffc72b",
                        fontSize: 30 * this.scale,
                        padding: [5, 4],
                        align: 'center'
                    },
                    black: {
                        // color: "#3a3a3a",
                        fontSize: 30 * this.scale,
                        padding: [5, 4],
                        align: 'center'
                    },
                    blackSmall: {
                        // color: "#3a3a3a",
                        fontSize: 16 * this.scale,
                        padding: [5, 4],
                        align: 'center'
                    },
                    total: {
                        // color: "#ffc72b",
                        fontSize: 40 * this.scale,
                        align: 'center'
                    },
                    white: {
                        // color: "#fff",
                        align: 'center',
                        fontSize: 14 * this.scale,
                        padding: [21, 0]
                    },
                    blue: {
                        color: '#49dff0',
                        fontSize: 16 * this.scale,
                        align: 'center'
                    },
                    hr: {
                        borderColor: '#3a3a3a',
                        width: '100%',
                        borderWidth: 1,
                        height: 0,
                    }
                },
                colHeight: window.innerHeight - 90,
                option: {},
                isChangeOrAdd: "",
                chart: {},
                selectNum: 1,
                flag: true,
                // testBool:true,
                radius_in: "",
                radius_out: "",
                selectLegend: null,
                isMuch:null
            }
        },
        //监听属性 类似于data概念
        computed: {},
        //监控data中的数据变化
        watch: {
            "singleOrMach": {
                handler(newVal, oldVal) {
                    //debugger
                    var _self = this;
                    _self.isMuch = false;
                    if(newVal=="much"){
                        _self.isMuch = true
                    }
                    if (this.testBool) {
                        _self.getDataChartData(_self.addForm)
                    }
                },
                deep: true
            },
            "addForm.year": {
                handler(newVal, oldVal) {
                    //debugger
                        var _self = this;
                        if (this.testBool) {
                            _self.getDataChartData(_self.addForm)
                        }
                },
                deep: true
            },
            "addForm.years": {
                handler(newVal, oldVal) {
                    //debugger
                    var _self = this;
                    if (this.testBool) {
                        _self.getDataChartData(_self.addForm)
                    }
                },
                deep: true
            },
            "addForm.batch": {
                handler(newVal, oldVal) {
                    //debugger
                        var _self = this;
                        if (this.testBool) {
                            _self.getDataChartData(_self.addForm)
                        }
                },
                deep: true
            },
            "addForm.rgstrId": {
                handler(newVal, oldVal) {
                    //debugger
                    if(newVal) {
                        var _self = this;
                        if (this.testBool) {
                            _self.getDataChartData(_self.addForm)
                        }
                    }
                },
                deep: true
            },
            // "addForms.year": {
            //     handler(newVal, oldVal) {
            //         if(newVal) {
            //             var _self = this;
            //             console.log("newVal:" + newVal + ", oldVal:" + oldVal)
            //             this.selectNum = 2;
            //             this.mySeries = [];
            //             this.selectLegend = null;
            //             if (this.testBool) {
            //                 _self.getDataChartData(_self.addForms, _self.selectNum)
            //             }
            //         }
            //     },
            //     deep: true
            // },
            // "addForms.batch": {
            //     handler(newVal, oldVal) {
            //         if(newVal) {
            //             var _self = this;
            //             console.log("newVal:" + newVal + ", oldVal:" + oldVal)
            //             this.selectNum = 2;
            //             this.mySeries = [];
            //             this.selectLegend = null;
            //             if (this.testBool) {
            //                 _self.getDataChartData(_self.addForms, _self.selectNum)
            //             }
            //         }
            //     },
            //     deep: true
            // },
            // "addForms.rgstrId": {
            //     handler(newVal, oldVal) {
            //         if(newVal) {
            //             var _self = this;
            //             console.log("newVal:" + newVal + ", oldVal:" + oldVal)
            //             this.selectNum = 2;
            //             this.mySeries = [];
            //             this.selectLegend = null;
            //             if (this.testBool) {
            //                 _self.getDataChartData(_self.addForms, _self.selectNum)
            //             }
            //         }
            //     },
            //     deep: true
            // },
            // "addFormt.year": {
            //     handler(newVal, oldVal) {
            //         if(newVal) {
            //             var _self = this;
            //             console.log("newVal:" + newVal + ", oldVal:" + oldVal)
            //             this.selectNum = 3;
            //             this.mySeries = [];
            //             this.selectLegend = null;
            //             if (this.testBool) {
            //                 _self.getDataChartData(_self.addFormt, _self.selectNum)
            //             }
            //         }
            //     },
            //     deep: true
            // },
            // "addFormt.batch": {
            //     handler(newVal, oldVal) {
            //         if(newVal) {
            //             var _self = this;
            //             console.log("newVal:" + newVal + ", oldVal:" + oldVal)
            //             this.selectNum = 3;
            //             this.mySeries = [];
            //             this.selectLegend = null;
            //             if (this.testBool) {
            //                 _self.getDataChartData(_self.addFormt, _self.selectNum)
            //             }
            //         }
            //     },
            //     deep: true
            // },
            // "addFormt.rgstrId": {
            //     handler(newVal, oldVal) {
            //         if(newVal) {
            //             var _self = this;
            //             console.log("newVal:" + newVal + ", oldVal:" + oldVal)
            //             this.selectNum = 3;
            //             this.mySeries = [];
            //             this.selectLegend = null;
            //             if (this.testBool) {
            //                 _self.getDataChartData(_self.addFormt, _self.selectNum)
            //             }
            //         }
            //     },
            //     deep: true
            // },
        },
        //方法集合
        methods: {
            changeYears(years){
                var _self = this;
                if (this.testBool) {
                    _self.addForm.years = years;
                    _self.getDataChartData(_self.addForm)
                }
            },
            uniqueArr(obj){
                var list = [];
                if(Object.keys(obj).length>0){
                    for(var k in obj){
                        for(var i = 0;i<obj[k].length;i++){
                            if(list.length==0){
                                list.push(obj[k][i].name);
                            }else{
                               var isFlag = false;
                               for(var j = 0;j<list.length;j++){
                                   if(obj[k][i].name==list[j]){
                                       isFlag = true;
                                   }
                               }
                               if(!isFlag){
                                   list.push(obj[k][i].name);
                               }
                            }
                        }
                    }
                }
                return list;
            },
            //饼图-专业
            getDataChartData(params) {
                //debugger
                var obj = {};
                if(this.isMuch==true){
                   obj.rgstrId =  params.rgstrId;
                   if(params.years instanceof Array){
                       obj.years =  params.years.length>0?params.years.join(","):"";
                   }else{
                       obj.years =  params.years;
                   }
                }else{
                    obj.years = params.year;
                    obj.batch = params.batch
                    obj.rgstrId =  params.rgstrId;
                }
                var _self = this;
                _self.loading = true;
                var xList = [];
                var mySeries = [];
                request.post(`/tac/pblm/info/countPblmInfoByStbNew`, obj).then(res => {
                    if (res.success) {
                        xList =  _self.uniqueArr(res.data);
                        var v = 0;
                        var dataL = Object.keys(res.data).length==0?100:100/Object.keys(res.data).length;
                        for(var k in res.data){
                            v++;
                            var sum = 0;
                            var NormalCount = 0;
                            var HeavierCount = 0;
                            var SeriousCount = 0;
                            var countToIfCasePblmfdx = 0;
                            var countToIfCasePblmdx = 0;
                            for(var m = 0;m<res.data[k].length;m++){
                                sum+= parseInt(res.data[k][m].count==null?0:res.data[k][m].count);
                                NormalCount+=(res.data[k][m].normal==null?0:parseInt(res.data[k][m].normal));
                                HeavierCount+=(res.data[k][m].heavier==null?0:parseInt(res.data[k][m].heavier));
                                SeriousCount+=(res.data[k][m].serious==null?0:parseInt(res.data[k][m].serious));
                                countToIfCasePblmfdx +=(res.data[k][m].isNotCasePblmCount==null?0:parseInt(res.data[k][m].isNotCasePblmCount));
                                countToIfCasePblmdx +=(res.data[k][m].isCasePblmCount==null?0:parseInt(res.data[k][m].isCasePblmCount));
                            }
                            let line = {
                                name: "占比",
                                type: "line",
                                yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
                                showAllSymbol: true, //显示所有图形。
                                symbol: "circle", //标记的图形为实心圆
                                symbolSize: 10, //标记的大小
                                itemStyle: {
                                    //折线拐点标志的样式
                                    color: "#49dff0"
                                },
                                lineStyle: {
                                    color: "#49dff0"
                                },
                                areaStyle: {
                                    color: "rgba(5,140,255, 0.2)"
                                },
                                data: []
                            };
                            let barNormal = {
                                name: "一般问题",
                                stack: k,
                                type: "bar",
                                barWidth: 25,
                                label: {
                                    show: true
                                },
                                itemStyle: {
                                    normal: {
                                        color: "#5ce9c7"
                                    }
                                },
                                // data: [47,47,35,36,35,15,15]
                                data: [],
                            }
                            let barHeavier = {
                                name: "较重问题",
                                stack: k,
                                type: "bar",
                                barWidth: 25,
                                label: {
                                    show: true
                                },
                                itemStyle: {
                                    normal: {
                                        color: "#fed172"
                                    }
                                },
                                // data: [47,47,35,36,35,15,15]
                                data: [],
                            }
                            let barSerious = {
                                name: "严重问题",
                                stack: k,
                                type: "bar",
                                barWidth: 25,
                                label: {
                                    show: true
                                },
                                itemStyle: {
                                    normal: {
                                        color: "#fb6086"
                                    }
                                },
                                // data: [47,47,35,36,35,15,15]
                                data: [],
                            }

                            let count = {
                                name: "问题总数",
                                type: "bar",
                                stack: k+1,
                                barWidth: 25,
                                barGap: '-100%',
                                itemStyle: {
                                    normal: {
                                        color: "#0195f2"
                                    }
                                },
                                data: [],
                                label: {
                                    show: true,
                                    normal: {
                                        show: true,
                                        fontSize: 16,
                                        fontWeight: 'bold',
                                        color: '#333',
                                        position: 'top',
                                    },
                                    formatter: function (params) {
                                        return params.value
                                    }
                                }
                            }

                            let pieYanZhongChengDu = {
                                name: '严重程度分布情况',
                                type: 'pie',
                                radius: ['0%','15%'],
                                center: ['85%', (dataL/1.8)*v+"%"],
                                color: ['#5ce9c7', '#fed172', '#fb6086'],
                                data: [
                                    {name:"一般",value:0},
                                    {name:"较重",value:0},
                                    {name:"严重",value:0}
                                ],
                                itemStyle: {
                                    emphasis: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                },
                                label: {
                                    formatter: k+'年:{b}{c}({d}%)'
                                }
                            }
                            let pieDianXingWenTi = {
                                name: '典型问题分布',
                                type: 'pie',
                                radius: ['0%', "15%"],
                                center: ['95%', (dataL/1.5)*v+"%"],
                                color: ['#fb6086', '#fed172'],
                                data: [
                                    {name:'典型',value:0},
                                    {name:'非典型',value:0}
                                ],
                                itemStyle: {
                                    emphasis: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                },
                                label: {
                                    formatter: k+':{b}{c}({d}%)'
                                }
                            }
                            pieYanZhongChengDu.data[0].value = NormalCount;
                            pieYanZhongChengDu.data[1].value = HeavierCount;
                            pieYanZhongChengDu.data[2].value = SeriousCount;
                            pieDianXingWenTi.data[0].value = countToIfCasePblmdx;
                            pieDianXingWenTi.data[1].value = countToIfCasePblmfdx;
                            for(var j = 0;j<xList.length;j++){
                                for(var l = 0;l<res.data[k].length;l++){
                                   if(xList[j] == res.data[k][l].name){
                                       var countv = 0;
                                       barNormal.data.push({value:res.data[k][l].normal==null?0:res.data[k][l].normal,year:k});
                                       barHeavier.data.push(res.data[k][l].heavier==null?0:res.data[k][l].heavier);
                                       barSerious.data.push(res.data[k][l].serious==null?0:res.data[k][l].serious);
                                       countv+=(res.data[k][l].normal==null?0:parseInt(res.data[k][l].normal));
                                       countv+=(res.data[k][l].heavier==null?0:parseInt(res.data[k][l].heavier));
                                       countv+=(res.data[k][l].serious==null?0:parseInt(res.data[k][l].serious));
                                       count.data.push(countv);
                                       line.data.push((countv/sum*100).toFixed(2));
                                   }
                                }
                            }
                            mySeries.push(barNormal,barHeavier,barSerious,count,line,pieYanZhongChengDu);
                        }
                        var chart = echarts.init(this.$refs['normal_bar_chart']);
                        let option = {
                            toolbox: {
                                show: true,
                                orient: "vertical",
                                left: "right",
                                top: "top",
                                feature: {
                                    saveAsImage: { show: true },  // 保存图表
                                },
                            },
                            title: {
                                // text: _self.barData_zy.pc1.count + '个问题分布情况',
                                textStyle: {
                                    align: 'center',
                                    // color: '#fff',
                                    fontSize: 20,
                                },
                                top: '3%',
                                left: '5%',
                            },
                            // backgroundColor: '#0f375f',
                            grid: {
                                top: "15%",
                                bottom: "15%",
                                left: "5%",
                                right: "30%",
                                containLabel: true
                            },
                            tooltip: {
                                trigger: "axis",
                                axisPointer: {
                                    type: "shadow",
                                    label: {
                                        show: true
                                    }
                                },
                                formatter: function (params) {
                                    var relVal = "";
                                    for (var i = 0, l = params.length; i < l; i++) {
                                        if(params[i].data.year){
                                            if(i==0){
                                                relVal += params[i].name+"("+params[i].data.year+")";
                                                relVal += '<br/>' + params[i].marker + params[i].seriesName + ': ' + params[i].value + "个"
                                            }else{
                                                relVal += '<br/>' +params[i].name+"("+params[i].data.year+")";
                                                relVal += '<br/>' + params[i].marker + params[i].seriesName + ': ' + params[i].value + "个"
                                            }

                                        }else{
                                            if(params[i].seriesName=="占比"){
                                                relVal += '<br/>' + params[i].marker + params[i].seriesName + ': ' +  params[i].value + "%";
                                            }else{
                                                relVal += '<br/>' + params[i].marker + params[i].seriesName + ': ' + params[i].value + "个"
                                            }

                                        }
                                    }
                                    return relVal;
                                }
                            },
                            legend: {
                                data: ["占比", "一般问题", "较重问题", "严重问题", "问题总数"],
                                top: "5%",
                                textStyle: {
                                    //color: "#ffffff"
                                },
                                selected: {
                                    "问题总数": false  //图例为‘全部’的一项默认置灰
                                }
                            },
                            xAxis: {
                                data: xList,
                                axisLine: {
                                    show: true //隐藏X轴轴线
                                },

                                axisTick: {
                                    show: true //隐藏X轴刻度
                                },
                                axisLabel: {
                                    rotate: 15,
                                    show: true,
                                    textStyle: {
                                        // color: "#ebf8ac" //X轴文字颜色
                                    }
                                }
                            },
                            yAxis: [
                                {
                                    type: "value",
                                    name: "个",
                                    nameTextStyle: {
                                        // color: "#ebf8ac"
                                    },
                                    splitLine: {
                                        show: false
                                    },
                                    axisTick: {
                                        show: true
                                    },
                                    axisLine: {
                                        show: true
                                    },
                                    axisLabel: {
                                        show: true,
                                        textStyle: {
                                            // color: "#ebf8ac"
                                        }
                                    },
                                },
                                {
                                    type: "value",
                                    name: "占比",
                                    nameTextStyle: {
                                        // color: "#ebf8ac"
                                    },
                                    position: "right",
                                    splitLine: {
                                        show: false
                                    },
                                    splitLine: {
                                        show: false
                                    },
                                    axisTick: {
                                        show: true
                                    },
                                    axisLine: {
                                        show: true
                                    },
                                    axisLabel: {
                                        show: true,
                                        formatter: "{value} %", //右侧Y轴文字显示
                                        textStyle: {
                                            // color: "#ebf8ac"
                                        }
                                    }
                                },
                                {
                                    type: "value",
                                    gridIndex: 0,
                                    min: 50,
                                    max: 100,
                                    splitNumber: 8,
                                    splitLine: {
                                        show: false
                                    },
                                    axisLine: {
                                        show: false
                                    },
                                    axisTick: {
                                        show: false
                                    },
                                    axisLabel: {
                                        show: false
                                    },
                                    splitArea: {
                                        show: true,
                                        areaStyle: {
                                            color: ["rgba(250,250,250,0.0)", "rgba(250,250,250,0.05)"]
                                        }
                                    }
                                }
                            ],
                            series:mySeries,
                        };

                        chart.clear();
                        chart.setOption(option);
                        window.addEventListener("resize", () => {
                            chart.resize();
                        });
                    }
                })
            }
        },
        //生命周期 - 创建完成（可以访问当前this实例）
        created() {

        },
        //生命周期 - 挂载完成（可以访问DOM元素）
        mounted() {
            this.isMuch = false;
            if(this.singleOrMach == "much"){
                this.isMuch = true;
            }
            this.getDataChartData(this.addForm)
        },
        beforeCreate() {
        }, //生命周期 - 创建之前
        beforeMount() {
        }, //生命周期 - 挂载之前
        beforeUpdate() {
        }, //生命周期 - 更新之前
        updated() {
        }, //生命周期 - 更新之后
        beforeDestroy() {
        }, //生命周期 - 销毁之前
        destroyed() {
        }, //生命周期 - 销毁完成
        activated() {
        }, //如果页面有keep-alive缓存功能，这个函数会触发
    }
</script>
<style scoped>

</style>