ztqt.git - Gitblit

			@@ -122,6 +122,7 @@
			</template>
			<script>
			import {echarts} from "../../global";
			import {chart_analysis} from "@/api/sgyhpczl/chartAnalysis";

			export default {
			name: "index",
			@@ -136,6 +137,17 @@
			inspectionCategory: '日常检查',
			policeSituation: '轻警',
			},
			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: ['新疆能源'],
			@@ -143,227 +155,259 @@
			policeSituationList: ['轻警'],
			radio: 1,
			radio2: 1,
			columnChartData:{}
			}
			},
			mounted() {
			this.initChart()
			this.getData()
			},
			methods: {
			getData(){
			chart_analysis(this.formData).then(res=>{
			let data = res.data;
			if(data.ok){
			let xList = [];
			let dataList = [];
			data.data[0].forEach(n=>{
			xList.push(n.graph);
			let sigleData = {
			"name": n.graph,
			"type": 'bar',
			"label": "labelOption",
			"emphasis": {
			focus: 'series'
			},
			"data": [n.yAxes]
			}
			dataList.push(sigleData);
			})
			this.columnChartData.xList = xList;
			this.columnChartData.dataList = dataList;
			this.initCloumnChart()
			// this.initChart()
			}

			})
			},
			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('cylindrical');
			// var chartDom = document.getElementById('myChart');
			// var myChart = echarts.init(chartDom);
			// var option = {
			// title: {
			// text: '众泰煤焦化各隐患单位隐患走势分析',
			// left: 'center'
			var myChart = echarts.init(chartDom);
			var option = {
			title: {
			text: '众泰煤焦化各隐患单位隐患走势分析',
			left: 'center'
			},
			legend:{
			bottom: 0,
			// textStyle: {
			// color: '#ffffff'
			// },
			// 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)
			},
			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)

			},
			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)
			},
			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%',
			@@ -499,143 +547,18 @@
			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)