<template>
|
<div>
|
<div class="whole_top">
|
<el-form ref="form" :inline="true" :model="form">
|
<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>
|
</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>
|
</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="chartType" style="margin-left: 50px;">
|
<el-radio label="line">曲线图</el-radio>
|
<el-radio label="pie">饼状图</el-radio>
|
<el-radio label="column">柱形图</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
</div>
|
<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"
|
range-separator="至"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期">
|
</el-date-picker>
|
</el-form-item>
|
<el-form-item>
|
<el-button class="btn" size="small" type="primary" @click="close()"
|
>汇总
|
</el-button>
|
<el-button class="btn" size="small" type="primary" @click="close()"
|
>同比环比
|
</el-button>
|
</el-form-item>
|
</div>
|
</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>
|
</div>
|
</template>
|
<script>
|
import {echarts} from "../../global";
|
import {chart_analysis} from "@/api/sgyhpczl/chartAnalysis";
|
|
// 导入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)
|
|
|
export default {
|
name: "index",
|
data() {
|
return {
|
form: {
|
name: '众泰煤焦化',
|
time: '',
|
category: '生产',
|
level: '一般隐患D',
|
superiorUnit: '新疆能源',
|
inspectionCategory: '日常检查',
|
policeSituation: '轻警',
|
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": "" //警情
|
},
|
categoryList: ['生产'],
|
levelList: ['一般隐患D'],
|
superiorUnitList: ['新疆能源'],
|
inspectionCategoryList: ['日常检查'],
|
policeSituationList: ['轻警'],
|
radio: 1,
|
chartType: "column",
|
columnChartData: {},
|
lineChartData: {}
|
}
|
},
|
mounted() {
|
// this.getData()
|
this.initEacharts3()
|
},
|
watch: {
|
"chartType": function (newVal, oldVal) {
|
this.formData.echart_type = newVal;
|
this.getData();
|
}
|
},
|
methods: {
|
// 饼图
|
initEacharts3(){
|
var n = 5000,
|
data = this.getData(n);
|
console.time("line");
|
var option = {
|
chart: {
|
type: 'pie',
|
options3d: {
|
enabled: true,
|
alpha: 45,
|
beta: 0
|
}
|
},
|
title: {
|
text: '众泰煤焦化合隐患单位隐患比例分析',
|
style:{
|
fontWeight: "bold"
|
}
|
},
|
tooltip: {
|
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
|
},
|
plotOptions: {
|
pie: {
|
allowPointSelect: true,
|
cursor: 'pointer',
|
depth: 35,
|
dataLabels: {
|
enabled: true,
|
format: '{point.name}:'+' {point.y}%'
|
}
|
}
|
},
|
exporting: {
|
enabled:false //去掉右上角
|
},
|
credits: {
|
enabled: false //不显示LOGO
|
},
|
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]
|
]
|
}]
|
}
|
Highcharts.chart("cylindrical",option);
|
console.timeEnd("line");
|
},
|
getData() {
|
chart_analysis(this.formData).then(res => {
|
let data = res.data;
|
if (data.ok) {
|
console.log(this.formData.echart_type)
|
if (this.formData.echart_type == "column") {
|
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);
|
})
|
this.columnChartData.xList = xList;
|
this.columnChartData.dataList = dataList;
|
this.initCloumnChart()
|
} else if (this.formData.echart_type == "line") {
|
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: {}
|
}
|
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)
|
}
|
})
|
})
|
this.lineChartData = {}
|
this.lineChartData.timeList = timeList;
|
this.lineChartData.dataList = dataList;
|
this.initLineChart()
|
}
|
// this.initChart()
|
}
|
|
})
|
},
|
initChart() {
|
// 柱形图
|
var chartDom = document.getElementById('cylindrical');
|
// 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: 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: {}
|
// }
|
// ]
|
}
|
// 使用刚指定的配置项和数据显示图表。
|
myChart.setOption(option)
|
},
|
initLineChart() {
|
// 折线图
|
var chartDom = document.getElementById('cylindrical');
|
// 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: 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: {}
|
// }
|
// ]
|
}
|
// 使用刚指定的配置项和数据显示图表。
|
myChart.setOption(option)
|
},
|
initCloumnChart() {
|
// 柱形图
|
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: {}
|
}
|
};
|
this.columnChartData.dataList.forEach(n => {
|
n.label = labelOption;
|
})
|
option = {
|
tooltip: {
|
trigger: 'axis',
|
axisPointer: {
|
type: 'shadow'
|
}
|
},
|
legend: {
|
bottom: 0,
|
data: this.columnChartData.xList
|
// 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: this.columnChartData.dataList
|
// series: [
|
// {
|
// name: '安全环保部',
|
// type: 'bar',
|
// label: labelOption,
|
// emphasis: {
|
// focus: 'series'
|
// },
|
// data: [320]
|
// }
|
// ]
|
};
|
// 使用刚指定的配置项和数据显示图表。
|
myChart.setOption(option)
|
}
|
}
|
|
}
|
</script>
|
|
<style scoped>
|
.top {
|
padding: 10px 5px;
|
background: #e4edf4;
|
display: flex;
|
flex-direction: column;
|
}
|
|
.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;
|
}
|
|
/*日期*/
|
/deep/ .el-date-editor .el-range-separator {
|
width: auto;
|
line-height: 36px;
|
}
|
|
.btn {
|
background-color: #034ea2;
|
border: 1px solid #034ea2;
|
}
|
</style>
|
