~mayuhao/HazardInvestigationSystem.git

			@@ -69,10 +69,10 @@
			<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 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>
			@@ -105,265 +105,309 @@
			</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-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="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:'众泰煤焦化',
			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'],
			levelList: ['一般隐患D'],
			superiorUnitList: ['新疆能源'],
			inspectionCategoryList:['日常检查'],
			inspectionCategoryList: ['日常检查'],
			policeSituationList: ['轻警'],
			radio: 1,
			radio2: 1,
			chartType: "column",
			columnChartData: {},
			lineChartData: {}
			}
			},
			mounted() {
			this.initChart()
			// 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: ['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 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);
			@@ -458,6 +502,9 @@
			name: {}
			}
			};
			this.columnChartData.dataList.forEach(n => {
			n.label = labelOption;
			})
			option = {
			tooltip: {
			trigger: 'axis',
			@@ -467,7 +514,8 @@
			},
			legend: {
			bottom: 0,
			data: ['安全环保部', '电仪车间', '干熄焦', '工程部','化产二车间', '化产一车间', '机电部', '炼焦二车间','炼焦一车间', '生产技术部', '消防保卫部', '选煤厂', '原料二车间', '原料一车间', '众和机电']
			data: this.columnChartData.xList
			// data: ['安全环保部', '电仪车间', '干熄焦', '工程部','化产二车间', '化产一车间', '机电部', '炼焦二车间','炼焦一车间', '生产技术部', '消防保卫部', '选煤厂', '原料二车间', '原料一车间', '众和机电']
			},
			grid: {
			left: '3%',
			@@ -490,7 +538,7 @@
			xAxis: [
			{
			type: 'category',
			axisTick: { show: false },
			axisTick: {show: false},
			// data: ['2012', '2013', '2014', '2015', '2016']
			}
			],
			@@ -499,145 +547,20 @@
			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]
			},
			]
			series: this.columnChartData.dataList
			// series: [
			// {
			// name: '安全环保部',
			// type: 'bar',
			// label: labelOption,
			// emphasis: {
			// focus: 'series'
			// },
			// data: [320]
			// }
			// ]
			};
			// 使用刚指定的配置项和数据显示图表。
			// 使用刚指定的配置项和数据显示图表。
			myChart.setOption(option)
			}
			}
			@@ -646,88 +569,108 @@
			</script>

			<style scoped>
			.top{
			.top {
			padding: 10px 5px;
			background: #e4edf4;
			display: flex;
			flex-direction: column;
			}
			.top /deep/ .el-form-item__label{

			.top /deep/ .el-form-item__label {
			width: 110px;
			}
			.top /deep/ .el-form-item{

			.top /deep/ .el-form-item {
			margin-bottom: 5px;
			}

			/多选框间距/
			.checkbox /deep/ .el-checkbox-group{
			.checkbox /deep/ .el-checkbox-group {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: space-between;
			}
			.center{

			.center {
			text-align: center;
			padding: 10px;
			background: #ffffff;
			margin: 10px 0;
			}
			.center /deep/ .el-form-item__label{

			.center /deep/ .el-form-item__label {
			width: auto;
			padding-right: 0;
			}

			.checkbox {
			display: flex;
			}
			/deep/ .el-checkbox{

			/deep/ .el-checkbox {
			margin-right: 7px;
			}
			.checkbox /deep/ .el-checkbox{

			.checkbox /deep/ .el-checkbox {
			margin-right: 0px;
			}
			/deep/ .el-checkbox__label{

			/deep/ .el-checkbox__label {
			padding-left: 3px;
			}
			.checkbox /deep/ .el-checkbox__label{

			.checkbox /deep/ .el-checkbox__label {
			padding-left: 3px;
			}
			/deep/ .el-radio{

			/deep/ .el-radio {
			margin-right: 7px;
			}
			.center{

			.center {
			display: flex;
			align-items: center;
			justify-content: start;
			}
			.center /deep/ .el-form-item--medium{

			.center /deep/ .el-form-item--medium {
			margin-bottom: 0px;
			display: flex;
			}
			.center /deep/ .el-input__inner{

			.center /deep/ .el-input__inner {
			border: transparent;
			width: 85px;
			padding: 0 5px;
			}
			.center .time /deep/ .el-form-item__content{

			.center .time /deep/ .el-form-item__content {
			width: 70%;
			}
			.center .time /deep/ .el-input__inner{

			.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{

			/deep/ .el-icon-date {
			display: none;
			}

			/日期/
			/deep/ .el-date-editor .el-range-separator{
			/deep/ .el-date-editor .el-range-separator {
			width: auto;
			line-height: 36px;
			}
			.btn{

			.btn {
			background-color: #034ea2;
			border: 1px solid #034ea2;
			}