饼图数据加载

cqf

2022-05-23 9e551347cd3b2382ae063b702d20ce4aa7db8505

饼图数据加载

 src/views/Issuedbysuperiors/index.vue

@@ -322,7 +322,6 @@
        this.initLlr()
        this.initYHBM()
        this.initYHZT()
        this.changeJCDW()
    },
    watch: {
        "YHType": function (newVal, oldVal) {

 src/views/chartAnalysis/index.vue

@@ -1,58 +1,35 @@
<template>
    <div>
        <div class="whole_top">
            <el-form ref="form" :inline="true" :model="form">
            <el-form ref="form" :inline="true" :model="formData">
                <div class="top">
                    <el-form-item label="类别：">
                        <el-checkbox-group v-model="categoryList">
                            <el-checkbox label="生产"></el-checkbox>
                            <el-checkbox label="设备"></el-checkbox>
                            <el-checkbox label="电气"></el-checkbox>
                            <el-checkbox label="仪表"></el-checkbox>
                            <el-checkbox label="安全管理"></el-checkbox>
                            <el-checkbox label="其他"></el-checkbox>
                        <el-checkbox-group v-model="formData.ht_typesub">
                            <el-checkbox v-for="item in YHLXList" :key="item.value" :value="item.value"
                                         :label="item.value"></el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                    <el-form-item label="级别：">
                        <el-checkbox-group v-model="levelList">
                            <el-checkbox label="一般隐患D"></el-checkbox>
                            <el-checkbox label="一般隐患C"></el-checkbox>
                            <el-checkbox label="重大隐患B"></el-checkbox>
                            <el-checkbox label="重大隐患A"></el-checkbox>
                        <el-checkbox-group v-model="formData.level">
                            <el-checkbox v-for="item in YHJBList" :key="item.value" :value="item.value"
                                         :label="item.value"></el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                    <el-form-item label="上级单位：">
                        <el-checkbox-group v-model="superiorUnitList">
                            <el-checkbox label="新疆能源"></el-checkbox>
                            <el-checkbox label="河南能源"></el-checkbox>
                            <el-checkbox label="新疆能源小分队"></el-checkbox>
                            <el-checkbox label="河南能源小分队"></el-checkbox>
                            <el-checkbox label="新疆能源救护大队"></el-checkbox>
                            <el-checkbox label="河南省应急管理厅"></el-checkbox>
                            <el-checkbox label="河南省工信厅"></el-checkbox>
                            <el-checkbox label="所属县市安监部门"></el-checkbox>
                        <el-checkbox-group v-model="formData.superior">
                            <!--                            <el-checkbox v-for="item in JCBMList" :label="item.value"></el-checkbox>-->
                            <el-checkbox v-for="item in JCBMList" :key="item.value" :value="item.value"
                                         :label="item.value"></el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                    <el-form-item label="检查类别：" class="checkbox">
                        <el-checkbox-group v-model="inspectionCategoryList">
                            <el-checkbox label="日常检查"></el-checkbox>
                            <el-checkbox label="领导深入现场"></el-checkbox>
                            <el-checkbox label="安全大检查"></el-checkbox>
                            <el-checkbox label="生产系统专业检查"></el-checkbox>
                            <el-checkbox label="设备系统专业检查"></el-checkbox>
                            <el-checkbox label="电气系统专业检查"></el-checkbox>
                            <el-checkbox label="仪表系统专业检查"></el-checkbox>
                            <el-checkbox label="安全管理专业检查"></el-checkbox>
                            <el-checkbox label="其他专项检查"></el-checkbox>
                            <el-checkbox label="双击建设考核"></el-checkbox>
                            <el-checkbox label="安全标准化验收"></el-checkbox>
                            <el-checkbox label="职业卫生健康"></el-checkbox>
                            <el-checkbox label="举一反三"></el-checkbox>
                            <el-checkbox label="安全督察小分队"></el-checkbox>
                        <el-checkbox-group v-model="formData.checktype">
                            <el-checkbox v-for="item in JCLBList" :key="item.value" :value="item.value"
                                         :label="item.value"></el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                    <el-form-item label="当前警情：">
                        <el-checkbox-group v-model="policeSituationList">
                        <el-checkbox-group v-model="formData.curWarningLevel">
                            <el-checkbox label="轻警"></el-checkbox>
                            <el-checkbox label="低警"></el-checkbox>
                            <el-checkbox label="中警"></el-checkbox>
@@ -60,14 +37,14 @@
                        </el-checkbox-group>
                    </el-form-item>
                    <el-form-item style="margin-left: 30px;">
                        <el-radio-group v-model="radio">
                            <el-radio :label="1">按隐患单位</el-radio>
                            <el-radio :label="2">按类别</el-radio>
                            <el-radio :label="3">按级别</el-radio>
                            <el-radio :label="4">按检查单位</el-radio>
                            <el-radio :label="5">按录入单位</el-radio>
                            <el-radio :label="6">按检查类别</el-radio>
                            <el-radio :label="7">按当前警情</el-radio>
                        <el-radio-group v-model="formData.model">
                            <el-radio label="1">按隐患单位</el-radio>
                            <el-radio label="2">按类别</el-radio>
                            <el-radio label="3">按级别</el-radio>
                            <el-radio label="4">按检查单位</el-radio>
                            <el-radio label="5">按录入单位</el-radio>
                            <el-radio label="6">按检查类别</el-radio>
                            <el-radio label="7">按当前警情</el-radio>
                        </el-radio-group>
                        <el-radio-group v-model="chartType" style="margin-left: 50px;">
                            <el-radio label="line">曲线图</el-radio>
@@ -78,26 +55,26 @@
                </div>
                <div class="center">
                    <el-form-item label="已选单位：">
                        <el-input v-model="form.name"></el-input>
                        <el-input autosize  v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item label="已选类别：">
                        <el-input v-model="form.category"></el-input>
                    <el-form-item autosize label="已选类别：">
                        <el-input v-model="formData.ht_typesub.join(',')"></el-input>
                    </el-form-item>
                    <el-form-item label="已选级别：">
                        <el-input v-model="form.level"></el-input>
                        <el-input v-model="formData.level.join(',')"></el-input>
                    </el-form-item>
                    <el-form-item label="已选上级单位：">
                        <el-input v-model="form.superiorUnit"></el-input>
                        <el-input v-model="formData.superior.join(',')"></el-input>
                    </el-form-item>
                    <el-form-item label="已选检查类别：">
                        <el-input v-model="form.inspectionCategory"></el-input>
                        <el-input v-model="formData.checktype.join(',')"></el-input>
                    </el-form-item>
                    <el-form-item label="已选当前警情：">
                        <el-input v-model="form.policeSituation"></el-input>
                        <el-input v-model="formData.curWarningLevel.join(',')"></el-input>
                    </el-form-item>
                    <el-form-item label="检查时间：" class="time">
                        <el-date-picker
                            v-model="form.time"
                            v-model="time"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
@@ -105,7 +82,7 @@
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-button class="btn" size="small" type="primary" @click="close()"
                        <el-button class="btn" size="small" type="primary" @click="getData()"
                        >汇总
                        </el-button>
                        <el-button class="btn" size="small" type="primary" @click="close()"
@@ -116,21 +93,32 @@
            </el-form>
        </div>
        <div class="whole_bottom">
            <!--            <div id="myChart" style="width: 100%;height: 550px;"></div>-->
            <!--            <div id="circular" style="width: 100%;height: 550px;"></div>-->
            <div id="cylindrical" style="width: 100%;height: 650px;"></div>
            <div v-if="chartType == 'pie'" id="pie" style="width: 100%;height: 550px;"></div>
            <div v-if="chartType == 'line'" id="line" style="width: 100%;height: 550px;"></div>
            <div v-if="chartType == 'column'" id="column" style="width: 100%;height: 650px;"></div>
        </div>
    </div>
</template>
<script>
import {echarts} from "../../global";
import {chart_analysis} from "@/api/sgyhpczl/chartAnalysis";
import {
    initJCBM,
    initYHLX,
    initBC,
    initJCLB,
    initYHBM,
    initYHJB,
    initLlr,
    initReformStatus
} from "@/api/sgyhpczl/initSelect";

// 导入chart组件
import Highcharts from "highcharts/highstock";
import loadExporting from "highcharts/modules/exporting";
import exportExcel from "highcharts/modules/export-data.src";
import highcharts3d from 'highcharts/highcharts-3d'

loadExporting(Highcharts);
exportExcel(Highcharts);
highcharts3d(Highcharts)
@@ -151,15 +139,15 @@
                chart: null,
            },
            formData: {
                "echart_type": "column", //line:折线图；column：柱状图；pie :饼状图
                "model": "0", //0：
                "beginTime": "2022-04-01", //开始时间
                "endTime": "2022-04-30", //结束时间
                "ht_typesub": "", //隐患类别
                "level": "", //隐患级别
                "superior": "", //上级单位
                "checktype": "", //检查类别
                "curWarningLevel": "" //警情
                "echart_type": "line", //line:折线图；column：柱状图；pie :饼状图
                "model": "1", //0：
                "beginTime": "", //开始时间
                "endTime": "", //结束时间
                "ht_typesub": [], //隐患类别
                "level": [], //隐患级别
                "superior": [], //上级单位
                "checktype": [], //检查类别
                "curWarningLevel": [] //警情
            },
            categoryList: ['生产'],
            levelList: ['一般隐患D'],
@@ -167,27 +155,115 @@
            inspectionCategoryList: ['日常检查'],
            policeSituationList: ['轻警'],
            radio: 1,
            chartType: "column",
            chartType: "line",
            columnChartData: {},
            lineChartData: {}
            lineChartData: {},
            time: [],
            pieChartData: [],
            JCBMList: [],
            YHLXList: [],
            BCList: [],
            JCLBList: [],
            YHBMList: [],
            YHJBList: [],
            YHZTList: [],
        }
    },
    mounted() {
        // this.getData()
        this.initEacharts3()
        this.time.push(this.getCurrentMonthFirst(), this.getCurrentMonthLast());
        this.initYHLX()
        this.initYHJB()
        this.initBC()
        this.initJCLB()
        this.initLlr()
        this.initYHBM()
        this.initYHZT()
        this.changeJCDW(0)
        this.getData()
    },
    watch: {
        "chartType": function (newVal, oldVal) {
            this.formData.echart_type = newVal;
            console.log(this.formData.echart_type)
            this.getData();
        }
    },
    methods: {
        initYHLX() {
            initYHLX().then(res => {
                if (res.data.ok == 1) {
                    this.YHLXList = res.data.data
                } else {
                    this.$message({type: 'error', message: res.data.msg, duration: 3000})
                }
            })
        },
        initYHJB() {
            initYHJB().then(res => {
                if (res.data.ok == 1) {
                    this.YHJBList = res.data.data
                } else {
                    this.$message({type: 'error', message: res.data.msg, duration: 3000})
                }
            })
        },
        initYHZT() {
            initReformStatus().then(res => {
                if (res.data.ok == 1) {
                    this.YHZTList = res.data.data
                    console.log(this.YHZTList)
                } else {
                    this.$message({type: 'error', message: res.data.msg, duration: 3000})
                }
            })
        },
        initBC() {
            initBC().then(res => {
                if (res.data.ok == 1) {
                    this.BCList = res.data.data
                } else {
                    this.$message({type: 'error', message: res.data.msg, duration: 3000})
                }
            })
        },
        initJCLB() {
            initJCLB().then(res => {
                if (res.data.ok == 1) {
                    this.JCLBList = res.data.data
                } else {
                    this.$message({type: 'error', message: res.data.msg, duration: 3000})
                }
            })
        },
        initLlr() {
            initLlr().then(res => {
                if (res.data.ok == 1) {
                    this.llrList = res.data.data
                } else {
                    this.$message({type: 'error', message: res.data.msg, duration: 3000})
                }
            })
        },
        initYHBM() {
            initYHBM().then(res => {
                if (res.data.ok == 1) {
                    this.YHBMList = res.data.data
                } else {
                    this.$message({type: 'error', message: res.data.msg, duration: 3000})
                }
            })
        },
        changeJCDW(val) {
            initJCBM(val).then(res => {
                if (res.data.ok == 1) {
                    this.JCBMList = res.data.data
                } else {
                    this.$message({type: 'error', message: res.data.msg, duration: 3000})
                }
            })
        },
        // 饼图
        initEacharts3(){
            var n = 5000,
                data = this.getData(n);
            console.time("line");
        initEacharts3() {
            var option = {
                chart: {
                    type: 'pie',
@@ -199,7 +275,7 @@
                },
                title: {
                    text: '众泰煤焦化合隐患单位隐患比例分析',
                    style:{
                    style: {
                        fontWeight: "bold"
                    }
                },
@@ -213,12 +289,12 @@
                        depth: 35,
                        dataLabels: {
                            enabled: true,
                            format: '{point.name}:'+' {point.y}%'
                            format: '{point.name}:' + ' {point.y}%'
                        }
                    }
                },
                exporting: {
                    enabled:false //去掉右上角
                    enabled: false //去掉右上角
                },
                credits: {
                    enabled: false //不显示LOGO
@@ -226,100 +302,105 @@
                series: [{
                    type: 'pie',
                    name: '浏览器占比',
                    data: [
                        ['安全环保部',   5.0],
                        ['电仪车间',       16.8],
                        {
                            name: '干熄焦',
                            y: 12.8,
                            sliced: true,
                            selected: true
                        },
                        ['工程部',    8.5],
                        ['化产二车间',     6.2],
                        ['化产一车间',   0.7],
                        ['机电部',   0.7],
                        ['炼焦二车间',   3.7],
                        ['炼焦一车间',   4.8],
                        ['生产技术部',   4.2],
                        ['消防保卫部',   4.7],
                        ['选煤厂',   0.7],
                        ['原料二车间',   15.7],
                        ['原料一车间',   34.7],
                        ['众和机电',   0.7]
                    ]
                    data: this.pieChartData
                }]
            }
            Highcharts.chart("cylindrical",option);
            console.timeEnd("line");
            Highcharts.chart("pie", option);
        },
        getData() {
            chart_analysis(this.formData).then(res => {
            this.formData.beginTime = this.time[0]
            this.formData.endTime = this.time[1]
            let requestData = JSON.parse(JSON.stringify(this.formData));
            console.log(requestData)
            requestData.ht_typesub = requestData.ht_typesub.join(",")
            requestData.level = requestData.level.join(",")
            requestData.superior = requestData.superior.join(",")
            requestData.checktype = requestData.checktype.join(",")
            requestData.curWarningLevel = requestData.curWarningLevel.join(",")

            chart_analysis(requestData).then(res => {
                let data = res.data;
                if (data.ok) {
                    console.log(this.formData.echart_type)
                    if (this.formData.echart_type == "column") {
                        this.columnChartData = {};
                        let xList = [];
                        let dataList = [];
                        data.data[0].forEach(n => {
                            xList.push(n.graph);
                            let singleData = {
                                "name": n.graph,
                                "type": 'bar',
                                "label": "labelOption",
                                "emphasis": {
                                    focus: 'series'
                                },
                                "data": [n.yAxes]
                            }
                            dataList.push(singleData);
                        })
                        if (data.data != null && data.data.length > 0) {
                            data.data[0].forEach(n => {
                                xList.push(n.graph);
                                let singleData = {
                                    "name": n.graph,
                                    "type": 'bar',
                                    "label": "labelOption",
                                    "emphasis": {
                                        focus: 'series'
                                    },
                                    "data": [n.yAxes]
                                }
                                dataList.push(singleData);
                            })
                        }
                        this.columnChartData.xList = xList;
                        this.columnChartData.dataList = dataList;
                        this.initCloumnChart()
                    } else if (this.formData.echart_type == "line") {
                        this.lineChartData = {}
                        let dataList = [];
                        let timeList = [];
                        data.data[0].forEach(n => {
                            if(timeList.indexOf(n.days)==-1){
                                timeList.push(n.days)
                            }
                            let obj = dataList.find(v => v.name == n.catalogy);
                            if (obj == null) {
                                // obj.data.push(n.counts);
                                obj = {
                                    name: n.catalogy,
                                    data: [],
                                    type: 'line',
                                    areaStyle: {}
                        if (data.data != null && data.data.length > 0) {
                            data.data[0].forEach(n => {
                                if (timeList.indexOf(n.days) == -1) {
                                    timeList.push(n.days)
                                }
                                dataList.push(obj)
                            }
                        })
                        timeList.forEach(time=>{
                            let singileData = data.data[0].filter(n=>n.days == time)
                            dataList.forEach(n=>{
                                let searchData = singileData.find(v=>v.catalogy == n.name);
                                if(searchData!=null){
                                    n.data.push(searchData.counts)
                                }else{
                                    n.data.push(0)
                                let obj = dataList.find(v => v.name == n.catalogy);
                                if (obj == null) {
                                    // obj.data.push(n.counts);
                                    obj = {
                                        name: n.catalogy,
                                        data: [],
                                        type: 'line',
                                        areaStyle: {}
                                    }
                                    dataList.push(obj)
                                }
                            })
                        })
                        this.lineChartData = {}
                            timeList.forEach(time => {
                                let singileData = data.data[0].filter(n => n.days == time)
                                dataList.forEach(n => {
                                    let searchData = singileData.find(v => v.catalogy == n.name);
                                    if (searchData != null) {
                                        n.data.push(searchData.counts)
                                    } else {
                                        n.data.push(0)
                                    }
                                })
                            })
                        }
                        this.lineChartData.timeList = timeList;
                        this.lineChartData.dataList = dataList;
                        console.log(this.lineChartData)
                        this.initLineChart()
                    } else {
                        this.pieChartData = []
                        data.data[0].forEach(n => {
                            var datas = {
                                name: n.chartName,
                                y: parseInt(n.chartValue),
                                sliced: true,
                                selected: false
                            };
                            this.pieChartData.push(datas);
                        })
                        this.initEacharts3();
                    }
                    // this.initChart()
                }

            })
        },
        initChart() {
            // 柱形图
            var chartDom = document.getElementById('cylindrical');
            var chartDom = document.getElementById('column');
            // var chartDom = document.getElementById('myChart');
            var myChart = echarts.init(chartDom);
            var option = {
@@ -343,28 +424,19 @@
                    type: 'category',
                    boundaryGap: false,
                    data: this.lineChartData.timeList
                    // data: ['2022-05-01', '', '2022-05-03', '', '2022-05-05', '', '2022-05-07', '', '2022-05-09', '', '2022-05-11']
                },
                yAxis: {
                    type: 'value'
                },
                color: ['#9a0202', '#02cccc', '#0202ff', '#ff9a02', '#02ff02', '#CC02CCFF', '#35FF02FF', '#CCFF67FF', '#35CC67FF', '#9A0202FF'],
                series:this.lineChartData.dataList
                // series: [
                //     {
                //         name: '电仪车间',
                //         data: [50, 35, 63, 64, 79, 95, 104, 50, 35, 63, 64],
                //         type: 'line',
                //         areaStyle: {}
                //     }
                // ]
                series: this.lineChartData.dataList
            }
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option)
        },
        initLineChart() {
            // 折线图
            var chartDom = document.getElementById('cylindrical');
            var chartDom = document.getElementById('line');
            // var chartDom = document.getElementById('myChart');
            var myChart = echarts.init(chartDom);
            var option = {
@@ -394,7 +466,7 @@
                    type: 'value'
                },
                color: ['#9a0202', '#02cccc', '#0202ff', '#ff9a02', '#02ff02', '#CC02CCFF', '#35FF02FF', '#CCFF67FF', '#35CC67FF', '#9A0202FF'],
                series:this.lineChartData.dataList
                series: this.lineChartData.dataList
                // series: [
                //     {
                //         name: '电仪车间',
@@ -409,7 +481,7 @@
        },
        initCloumnChart() {
            // 柱形图
            var chartDom = document.getElementById('cylindrical');
            var chartDom = document.getElementById('column');
            var myChart = echarts.init(chartDom);
            var option;
            const posList = [
@@ -502,6 +574,7 @@
                    name: {}
                }
            };
            console.log(this.columnChartData)
            this.columnChartData.dataList.forEach(n => {
                n.label = labelOption;
            })
@@ -539,6 +612,7 @@
                    {
                        type: 'category',
                        axisTick: {show: false},
                        data: this.columnChartData.xList
                        // data: ['2012', '2013', '2014', '2015', '2016']
                    }
                ],
@@ -562,8 +636,40 @@
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option)
        }
    }
        },
        getCurrentMonthFirst() {
            var date = new Date();
            date.setDate(1);
            var month = parseInt(date.getMonth() + 1);
            var day = date.getDate();
            if (month < 10) {
                month = '0' + month
            }
            if (day < 10) {
                day = '0' + day
            }

            return date.getFullYear() + '-' + month + '-' + day;
        },
        getCurrentMonthLast() {
            var date = new Date();
            var currentMonth = date.getMonth();
            var nextMonth = ++currentMonth;
            var nextMonthFirstDay = new Date(date.getFullYear(), nextMonth, 1);
            var oneDay = 1000 * 60 * 60 * 24;
            var lastTime = new Date(nextMonthFirstDay - oneDay);
            var month = parseInt(lastTime.getMonth() + 1);
            var day = lastTime.getDate();
            if (month < 10) {
                month = '0' + month
            }
            if (day < 10) {
                day = '0' + day
            }
            return date.getFullYear() + '-' + month + '-' + day;
        },
    },


}
</script>

 src/views/summaryPotentialSafetyHzards/index.vue

@@ -125,6 +125,7 @@
                    </el-table-column>
                    <el-table-column
                        v-for="item in tableData[0].items"
                        :key="item.x_label"
                        :label="item.x_label"
                        align="center">
                        <template slot-scope="scope">