获取数据源

一、目的

优化完页面的基础上，在查询条件中选择工段和年份后，能够从接口中获取到数据源，在图表上方显示对应的图表标题，并根据数据源显示对应的图表数据。

二、过程

1.下载一个iosselect-master文件，里面包含一级到六级的联动(如果以后项目中遇到联动问题，可作为参考);
链接地址:https://pan.baidu.com/s/1aAwd1rJGPO3IYOMiPVDbnQ

2.改造原有程序(以质量目标为例)
(1)根据联动参考文件，为工段编写一个二级联动的js；

export var iosProvinces = [ 
    {
        "value": "油封",
        "id": "130001",
        "parentId": "0"
    },
export var iosCitys = [
    {
        "value": "油封一班",
        "id": "130100",
        "parentId": "130001"
},
{
        "value": "油封二班",
        "id": "130200",
        "parentId": "130001"
    },

在联动参考文件中，采用了parentId的方式，这样第一级中的子级只需要填写同样的parentId即可。

(2)JavaScript部分关键代码
//引入js

import { iosProvinces } from '../../../../static/zhiliang/zhiliangmubiao-data.js' 
import { iosCitys } from '../../../../static/zhiliang/zhiliangmubiao-data.js' 

//定义默认值及生命周期

export default {
mounted() {
//定义工段及年份的默认值
            this.iosProvinces = iosProvinces;
            this.iosCitys = iosCitys;
            
            this.provincesid= this.iosProvinces[0].id;
            this.citysid= this.iosCitys[0].id;

            this.provincesvalue= this.iosProvinces[0].value;
            this.citysvalue= this.iosCitys[0].value;
            this.year = new Date().getFullYear();
for (var i = 0; i < 10; i++) {
                var temp = {
                    'id': this.year - i,
                    'value': this.year - i
                }
                this.yearlist.push(temp);
            }
//绘图
            this.initLine();
//改变图表标题
            this.changeEchartTile();
//从接口获取数据源
            this.getinterfacedata();
}
}

//二级联动
例如查询条件中工段的”油封-油封一班”，或者年月中的”年-月”；

methods: {
showpickerleveltwo: function(type, data, value, subdata, subvalue) {
				if (data.length == 0) {
					this.$dialog.toast({
						mes: '无可选数据！',
						timeout: 1000
					});
					return;
				}
				var that = this;
				var example = new iosselect(2, // 第一个参数为级联层级，演示为1
					[
						data, subdata
					], // 演示数据
					{
						container: '.container', // 容器class
						title: '', // 标题
						itemHeight: 50, // 每个元素的高度
						itemShowCount: 3, // 每一列显示元素个数，超出将隐藏
						oneLevelId: value, // 第一级默认值
						twoLevelId: subvalue, // 第2级默认值
						relation: [1, 1],
						callback: function(selectOneObj, selectTwoObj) { // 用户确认选择后的回调函数
							if (type == 1) {
								that.provincesid = selectOneObj.id;
								that.provincesvalue = selectOneObj.value;
								that.citysid = selectTwoObj.id;
								that.citysvalue = selectTwoObj.value;

								//that.changebtn();
								//图表名随着工段变化而变化
								that.changeEchartTile();

								that.getinterfacedata();

							} else if (type == 2) {
								that.yearvalue = selectOneObj.id;
								that.year = selectOneObj.value;
							}
						}
					});
			},
}

//一级联动
例如查询条件中工段的”油封”，年份的”年”;

showpickerlevelone: function(data, type, value) {
				if (data.length == 0) {
					this.$dialog.toast({
						mes: '无可选数据！',
						timeout: 1000
					});
					return;
				}
				var that = this;
				var example = new iosselect(1, // 第一个参数为级联层级，演示为1
					[
						data
					], // 演示数据
					{
						container: '.container', // 容器class
						title: '', // 标题
						itemHeight: 50, // 每个元素的高度
						itemShowCount: 3, // 每一列显示元素个数，超出将隐藏
						oneLevelId: value, // 第一级默认值
						callback: function(selectOneObj) { // 用户确认选择后的回调函数
							if (type == 1) {
								that.yearvalue = selectOneObj.id;
								that.year = selectOneObj.value;

								//从接口获取数据源
								that.getinterfacedata();
							}
						}
					});
			},

//改变echarts标题

changeEchartTile() {
				var option1 = this.option;
				option1.title.text = this.citysvalue;
				
				this.myChart1.setOption(option1);
				window.onresize = this.myChart1.resize;
			},

//从接口获取数据源

getinterfacedata: function(type) {

				//获取目标值
				var param = {
					//时间
					y: this.year,
					//工
					class: this.provincesvalue,
					//段
					team: this.citysvalue

				}
				console.log(param);
				http.post('search', 'GOALCHECKService', param)
					.then(data => {
						console.log(data);

						var option1 = this.option;				
						if (data.result.resultObj && data.result.resultObj.hasOwnProperty("table")) {
							this.table = data.result.resultObj.table;
						} else {
							this.table =
							{
								source: [
									["月","机加平均故障间隔时间","装配平均故障间隔时间","机加平均故障间隔时间目标值","装配平均故障间隔时间目标值"]
									,["01",95,50,100,60]  
									,["02",75,60,100,60]  
									,["03",90,70,100,60]  
									,["04",85,50,100,60]  
									,["05",100,40,100,60] 
									,["06",105,40,100,60] 
									,["07",85,60,100,60]  
									,["08",95,70,100,60]  
									,["09",140,50,100,60] 
									,["10",110,40,100,60] 
									,["11",105,60,100,60] 
									,["12",105,50,100,60] 
								]

							};
						}

						this.loadCharts(type, this.table);
						
					})
					.catch(err => {
						console.log(err)
					})

			},

//给echarts图重新加载数据

loadCharts(type, dataSet) {	
				var option1=this.option;

				//option1.title.text = this.citysvalue;
				option1.dataset = dataSet;

				this.myChart1.setOption(option1);
				window.onresize = this.myChart1.resize;

			},

三、界面显示

可以从图中看出，点击不同的工段时，图表会显示相对应的工段标题，并从右侧控制台可看到获取的数据源也与工段及年份相对应。