隐患图表分析

13937891274

2022-05-20 4f4cef1e47f7af9bff223ea8f448c81198ee58f7

 src/views/chartAnalysis/index.vue

@@ -1,25 +1,101 @@
<template>
    <div>
        <div class="whole_top">
            <el-form ref="form" :inline="true" :model="form" label-width="100px">
            <el-form ref="form" :inline="true" :model="form">
                <div class="top">
                    <el-form-item>
                        <el-checkbox-group v-model="checkList">
                            <el-checkbox label="复选框 A"></el-checkbox>
                            <el-checkbox label="复选框 B"></el-checkbox>
                            <el-checkbox label="复选框 C"></el-checkbox>
                    <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>
                    </el-form-item>
                    <el-form-item>
                      <el-checkbox-group v-model="checkList">
                          <el-checkbox label="复选框 A"></el-checkbox>
                          <el-checkbox label="复选框 B"></el-checkbox>
                          <el-checkbox label="复选框 C"></el-checkbox>
                    <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>
                    </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>
                    </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>
                    </el-form-item>
                    <el-form-item label="当前警情：">
                        <el-checkbox-group v-model="policeSituationList">
                            <el-checkbox label="轻警"></el-checkbox>
                            <el-checkbox label="低警"></el-checkbox>
                            <el-checkbox label="中警"></el-checkbox>
                            <el-checkbox label="重警"></el-checkbox>
                        </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>
                        <el-radio-group v-model="radio2" style="margin-left: 50px;">
                            <el-radio :label="1">曲线图</el-radio>
                            <el-radio :label="2">饼状图</el-radio>
                            <el-radio :label="3">柱形图</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </div>
                <div class="center" style="text-align: center;padding-top: 10px;">
                    <el-form-item label="检查时间：">
                <div class="center">
                    <el-form-item label="已选单位：">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item label="已选类别：">
                        <el-input v-model="form.category"></el-input>
                    </el-form-item>
                    <el-form-item label="已选级别：">
                        <el-input v-model="form.level"></el-input>
                    </el-form-item>
                    <el-form-item label="已选上级单位：">
                        <el-input v-model="form.superiorUnit"></el-input>
                    </el-form-item>
                    <el-form-item label="已选检查类别：">
                        <el-input v-model="form.inspectionCategory"></el-input>
                    </el-form-item>
                    <el-form-item label="已选当前警情：">
                        <el-input v-model="form.policeSituation"></el-input>
                    </el-form-item>
                    <el-form-item label="检查时间：" class="time">
                        <el-date-picker
                            v-model="form.time"
                            type="daterange"
@@ -32,85 +108,540 @@
                        <el-button  class="btn" size="small" type="primary" @click="close()"
                        >汇总</el-button>
                        <el-button  class="btn" size="small" type="primary" @click="close()"
                        >导出Excel</el-button>
                        >同比环比</el-button>
                    </el-form-item>
                </div>
            </el-form>
<!--            <el-table-->
<!--                :data="tableData"-->
<!--                style="width: 100%">-->
<!--                <el-table-column align="center" label="众泰煤焦化-安全隐患台帐">-->
<!--                    <el-table-column-->
<!--                        prop="name"-->
<!--                        label="隐患部门\隐患专业"-->
<!--                        align="center">-->
<!--                    </el-table-column>-->
<!--                    <el-table-column-->
<!--                        prop="province"-->
<!--                        label="采掘"-->
<!--                        align="center">-->
<!--                    </el-table-column>-->
<!--                    <el-table-column-->
<!--                        prop="city"-->
<!--                        label="生产"-->
<!--                        width="120"-->
<!--                        align="center">-->
<!--                    </el-table-column>-->
<!--                    <el-table-column-->
<!--                        prop="address"-->
<!--                        label="合计"-->
<!--                        width="300"-->
<!--                        align="center">-->
<!--                    </el-table-column>-->
<!--                </el-table-column>-->
<!--            </el-table>-->
            <div style="color: #c5021a;margin-top: 20px;">
                <div>温馨提示：</div>
                <div>点选可查询隐患详情。</div>
            </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>
    </div>
</template>

<script>
import {echarts} from "../../global";

export default {
    name: "index",
    data() {
        return {
            form: {
                time: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: ''
            },
            checkList: ['复选框 A'],
            tableData: [{
                name: '财务部',
                province: '1',
                city: '4',
                address: '1'
            }, {
                name: '党委副书记',
                province: '0',
                city: '2',
                address: '0'
            }, {
                name: '众泰煤焦化',
                province: '2',
                city: '3',
                address: '1'
            }, {
                name: '王小虎',
                province: '3',
                city: '9',
                address: '2'
            }]
                time: '',
                category: '生产',
                level: '一般隐患D',
                superiorUnit: '新疆能源',
                inspectionCategory: '日常检查',
                policeSituation: '轻警',
            },
            categoryList: ['生产'],
            levelList:['一般隐患D'],
            superiorUnitList: ['新疆能源'],
            inspectionCategoryList:['日常检查'],
            policeSituationList: ['轻警'],
            radio: 1,
            radio2: 1,
        }
    },
    mounted() {
        this.initChart()
    },
    methods: {
        initChart() {
            // 折线图
            // var chartDom = document.getElementById('myChart');
            // var myChart = echarts.init(chartDom);
            // var option = {
            //     title: {
            //         text: '众泰煤焦化各隐患单位隐患走势分析',
            //         left: 'center'
            //     },
            //     legend:{
            //         bottom: 0,
            //         // textStyle: {
            //         //     color: '#ffffff'
            //         // },
            //     },
            //     grid: {
            //         left: '3%',
            //         right: '4%',
            //         bottom: '5%',
            //         containLabel: true
            //     },
            //     xAxis: {
            //         type: 'category',
            //         boundaryGap: false,
            //         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: [
            //         {
            //             name: '电仪车间',
            //             data: [50, 35, 63, 64, 79, 95, 104,50, 35, 63, 64],
            //             type: 'line',
            //             areaStyle: {}
            //         },
            //         {
            //             name: '原料二车间',
            //             data: [50, 65, 84, 93, 52, 78, 10,58,78,20,55],
            //             type: 'line',
            //             areaStyle: {}
            //         },
            //         {
            //             name: '化产二车间',
            //             data: [ 95, 104,50, 35, 79, 95, 104,50, 35, 63, 64],
            //             type: 'line',
            //             areaStyle: {}
            //         },
            //         {
            //             name: '烧焦二车间',
            //             data: [50, 35, 63, 64, 79, 95, 104,50, 35, 63, 64],
            //             type: 'line',
            //             areaStyle: {}
            //         },
            //         {
            //             name: '化产一车间',
            //             data: [50, 35, 63, 64, 79, 95, 104,50, 35, 63, 64],
            //             type: 'line',
            //             areaStyle: {}
            //         },
            //         {
            //             name: '炼焦一车间',
            //             data: [50, 35, 63, 64, 79, 95, 104,50, 35, 63, 64],
            //             type: 'line',
            //             areaStyle: {}
            //         },
            //         {
            //             name: '原料一车间',
            //             data: [50, 35, 63, 64, 79, 95, 104,50, 35, 63, 64],
            //             type: 'line',
            //             areaStyle: {}
            //         },
            //         {
            //             name: '众和机电',
            //             data: [95, 104,50, 35, 79, 95, 104,50, 35, 63, 64],
            //             type: 'line',
            //             areaStyle: {}
            //         },
            //         {
            //             name: '生产技术部',
            //             data: [50, 35, 63, 95, 104,50, 35, 63,35, 63, 64],
            //             type: 'line',
            //             areaStyle: {}
            //         },
            //         {
            //             name: '选煤厂',
            //             data: [5, 35, 67, 64, 45, 95, 23,50, 35, 63, 64],
            //             type: 'line',
            //             areaStyle: {}
            //         },
            //         {
            //             name: '工程部',
            //             data: [50, 35, 63, 16, 79, 95, 45,50, 24, 7, 64],
            //             type: 'line',
            //             areaStyle: {}
            //         },
            //         {
            //             name: '机电部',
            //             data: [50, 35, 63, 64, 79, 95, 104,50, 35, 63, 64],
            //             type: 'line',
            //             areaStyle: {}
            //         }
            //     ]
            // }
            // // 使用刚指定的配置项和数据显示图表。
            // myChart.setOption(option)

            // 饼图
            // var chartDom = document.getElementById('myChart');
            // var myChart = echarts.init(chartDom);
            // var option = {
            //     title: {
            //         text: '众泰煤焦化各隐患单位隐患走势分析',
            //         left: 'center'
            //     },
            //     legend:{
            //         bottom: 0,
            //         // textStyle: {
            //         //     color: '#ffffff'
            //         // },
            //     },
            //     grid: {
            //         left: '3%',
            //         right: '4%',
            //         bottom: '5%',
            //         containLabel: true
            //     },
            //     xAxis: {
            //         type: 'category',
            //         boundaryGap: false,
            //         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: [
            //         {
            //             name: '电仪车间',
            //             data: [50, 35, 63, 64, 79, 95, 104,50, 35, 63, 64],
            //             type: 'line',
            //             areaStyle: {}
            //         },
            //         {
            //             name: '原料二车间',
            //             data: [50, 65, 84, 93, 52, 78, 10,58,78,20,55],
            //             type: 'line',
            //             areaStyle: {}
            //         },
            //         {
            //             name: '化产二车间',
            //             data: [ 95, 104,50, 35, 79, 95, 104,50, 35, 63, 64],
            //             type: 'line',
            //             areaStyle: {}
            //         },
            //         {
            //             name: '烧焦二车间',
            //             data: [50, 35, 63, 64, 79, 95, 104,50, 35, 63, 64],
            //             type: 'line',
            //             areaStyle: {}
            //         },
            //         {
            //             name: '化产一车间',
            //             data: [50, 35, 63, 64, 79, 95, 104,50, 35, 63, 64],
            //             type: 'line',
            //             areaStyle: {}
            //         },
            //         {
            //             name: '炼焦一车间',
            //             data: [50, 35, 63, 64, 79, 95, 104,50, 35, 63, 64],
            //             type: 'line',
            //             areaStyle: {}
            //         },
            //         {
            //             name: '原料一车间',
            //             data: [50, 35, 63, 64, 79, 95, 104,50, 35, 63, 64],
            //             type: 'line',
            //             areaStyle: {}
            //         },
            //         {
            //             name: '众和机电',
            //             data: [95, 104,50, 35, 79, 95, 104,50, 35, 63, 64],
            //             type: 'line',
            //             areaStyle: {}
            //         },
            //         {
            //             name: '生产技术部',
            //             data: [50, 35, 63, 95, 104,50, 35, 63,35, 63, 64],
            //             type: 'line',
            //             areaStyle: {}
            //         },
            //         {
            //             name: '选煤厂',
            //             data: [5, 35, 67, 64, 45, 95, 23,50, 35, 63, 64],
            //             type: 'line',
            //             areaStyle: {}
            //         },
            //         {
            //             name: '工程部',
            //             data: [50, 35, 63, 16, 79, 95, 45,50, 24, 7, 64],
            //             type: 'line',
            //             areaStyle: {}
            //         },
            //         {
            //             name: '机电部',
            //             data: [50, 35, 63, 64, 79, 95, 104,50, 35, 63, 64],
            //             type: 'line',
            //             areaStyle: {}
            //         }
            //     ]
            // }
            // // 使用刚指定的配置项和数据显示图表。
            // myChart.setOption(option)

            // 柱形图
            var chartDom = document.getElementById('cylindrical');
            var myChart = echarts.init(chartDom);
            var option;
            const posList = [
                'left',
                'right',
                'top',
                'bottom',
                'inside',
                'insideTop',
                'insideLeft',
                'insideRight',
                'insideBottom',
                'insideTopLeft',
                'insideTopRight',
                'insideBottomLeft',
                'insideBottomRight'
            ];
            app.configParameters = {
                rotate: {
                    min: -90,
                    max: 90
                },
                align: {
                    options: {
                        left: 'left',
                        center: 'center',
                        right: 'right'
                    }
                },
                verticalAlign: {
                    options: {
                        top: 'top',
                        middle: 'middle',
                        bottom: 'bottom'
                    }
                },
                position: {
                    options: posList.reduce(function (map, pos) {
                        map[pos] = pos;
                        return map;
                    }, {})
                },
                distance: {
                    min: 0,
                    max: 100
                }
            };
            app.config = {
                rotate: 90,
                align: 'left',
                verticalAlign: 'middle',
                position: 'insideBottom',
                distance: 15,
                onChange: function () {
                    const labelOption = {
                        rotate: app.config.rotate,
                        align: app.config.align,
                        verticalAlign: app.config.verticalAlign,
                        position: app.config.position,
                        distance: app.config.distance
                    };
                    myChart.setOption({
                        series: [
                            {
                                label: labelOption
                            },
                            {
                                label: labelOption
                            },
                            {
                                label: labelOption
                            },
                            {
                                label: labelOption
                            }
                        ]
                    });
                }
            };
            const labelOption = {
                show: false,
                position: app.config.position,
                distance: app.config.distance,
                align: app.config.align,
                verticalAlign: app.config.verticalAlign,
                rotate: app.config.rotate,
                formatter: '{c}  {name|{a}}',
                fontSize: 16,
                rich: {
                    name: {}
                }
            };
            option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    bottom: 0,
                    data: ['安全环保部', '电仪车间', '干熄焦', '工程部','化产二车间', '化产一车间', '机电部', '炼焦二车间','炼焦一车间', '生产技术部', '消防保卫部', '选煤厂', '原料二车间', '原料一车间', '众和机电']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    containLabel: true
                },
                // toolbox: {
                //     show: true,
                //     orient: 'vertical',
                //     left: 'right',
                //     top: 'center',
                //     feature: {
                //         mark: { show: true },
                //         dataView: { show: true, readOnly: false },
                //         magicType: { show: true, type: ['line', 'bar', 'stack'] },
                //         restore: { show: true },
                //         saveAsImage: { show: true }
                //     }
                // },
                xAxis: [
                    {
                        type: 'category',
                        axisTick: { show: false },
                        // data: ['2012', '2013', '2014', '2015', '2016']
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '安全环保部',
                        type: 'bar',
                        label: labelOption,
                        emphasis: {
                            focus: 'series'
                        },
                        data: [320]
                    },
                    {
                        name: '电仪车间',
                        type: 'bar',
                        label: labelOption,
                        emphasis: {
                            focus: 'series'
                        },
                        data: [332]
                    },
                    {
                        name: '干熄焦',
                        type: 'bar',
                        label: labelOption,
                        emphasis: {
                            focus: 'series'
                        },
                        data: [150]
                    },
                    {
                        name: '工程部',
                        type: 'bar',
                        label: labelOption,
                        emphasis: {
                            focus: 'series'
                        },
                        data: [541]
                    },
                    {
                        name: '化产二车间',
                        type: 'bar',
                        label: labelOption,
                        emphasis: {
                            focus: 'series'
                        },
                        data: [256]
                    },
                    {
                        name: '化产一车间',
                        type: 'bar',
                        label: labelOption,
                        emphasis: {
                            focus: 'series'
                        },
                        data: [351]
                    },
                    {
                        name: '机电部',
                        type: 'bar',
                        label: labelOption,
                        emphasis: {
                            focus: 'series'
                        },
                        data: [122]
                    },
                    {
                        name: '炼焦二车间',
                        type: 'bar',
                        label: labelOption,
                        emphasis: {
                            focus: 'series'
                        },
                        data: [220]
                    },
                    {
                        name: '炼焦一车间',
                        type: 'bar',
                        label: labelOption,
                        emphasis: {
                            focus: 'series'
                        },
                        data: [255]
                    },
                    {
                        name: '生产技术部',
                        type: 'bar',
                        label: labelOption,
                        emphasis: {
                            focus: 'series'
                        },
                        data: [122]
                    },
                    {
                        name: '消防保卫部',
                        type: 'bar',
                        label: labelOption,
                        emphasis: {
                            focus: 'series'
                        },
                        data: [220]
                    },
                    {
                        name: '选煤厂',
                        type: 'bar',
                        label: labelOption,
                        emphasis: {
                            focus: 'series'
                        },
                        data: [255]
                    },
                    {
                        name: '原料二车间',
                        type: 'bar',
                        label: labelOption,
                        emphasis: {
                            focus: 'series'
                        },
                        data: [255]
                    },
                    {
                        name: '原料一车间',
                        type: 'bar',
                        label: labelOption,
                        emphasis: {
                            focus: 'series'
                        },
                        data: [255]
                    },
                    {
                        name: '众和机电',
                        type: 'bar',
                        label: labelOption,
                        emphasis: {
                            focus: 'series'
                        },
                        data: [255]
                    },
                ]
            };
                // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option)
        }
    }

}
</script>

@@ -118,50 +649,83 @@
.top{
    padding: 10px 5px;
    background: #e4edf4;
    display: flex;
    flex-direction: column;
}
/*下拉框图标隐藏*/
.whole_top .select /deep/ .el-input__suffix-inner .is-reverse{
.top /deep/ .el-form-item__label{
    width: 110px;
}
.top /deep/ .el-form-item{
    margin-bottom: 5px;
}
/*多选框间距*/
.checkbox /deep/ .el-checkbox-group{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}
.center{
    text-align: center;
    padding: 10px;
    background: #ffffff;
    margin: 10px 0;
}
.center /deep/ .el-form-item__label{
    width: auto;
    padding-right: 0;
}
.checkbox {
    display: flex;
}
/deep/ .el-checkbox{
    margin-right: 7px;
}
.checkbox /deep/ .el-checkbox{
    margin-right: 0px;
}
/deep/ .el-checkbox__label{
    padding-left: 3px;
}
.checkbox /deep/ .el-checkbox__label{
    padding-left: 3px;
}
/deep/ .el-radio{
    margin-right: 7px;
}
.center{
    display: flex;
    align-items: center;
    justify-content: start;
}
.center /deep/ .el-form-item--medium{
    margin-bottom: 0px;
    display: flex;
}
.center /deep/ .el-input__inner{
    border: transparent;
    width: 85px;
    padding: 0 5px;
}
.center .time /deep/ .el-form-item__content{
    width: 70%;
}
.center .time /deep/ .el-input__inner{
    width: 218px;
}
.center .time /deep/ .el-range-input {
    width: 90px;
    border: 1px solid #DCDFE6;
    border-radius: 4px;
    padding: 0 5px;
}
/deep/ .el-icon-date{
    display: none;
}
.whole_top .select /deep/ .el-input__suffix-inner .el-icon-arrow-up{
    display: none;
}
/*设下拉框颜色*/
.select /deep/.el-input__inner {
    border: 1px solid #c5dbec;
    font-weight: bold;
    background: #dfeffc;
    /*.el-icon-circle-close*/
}
.whole_top .select /deep/.el-select .el-input__inner:focus {
    color: #e6860b;
}
.select /deep/ .is-focus .el-select__tags-text{
    color: #000000;
}
/*下拉框选值之后的样式*/
.select /deep/ .el-tag.el-tag--info {
    background-color: transparent;;
    border-color: transparent;
    font-weight: bold;
    color: #e6860b;
}
/*placeholder颜色修改*/
.whole_top ::-webkit-input-placeholder {
    color: #000000;
}
.whole_top :-moz-placeholder {
    color: #000000;
}
.whole_top ::-moz-placeholder{
    color: #000000;
}
.whole_top :-ms-input-placeholder {
    color: #000000;
}
/*日期*/
/deep/ .el-date-editor .el-range-separator{
    width: auto;
    line-height: 36px;
}
.btn{
    background-color: #034ea2;