160 行
6.4 KiB
JavaScript
160 行
6.4 KiB
JavaScript
define(['jquery', 'bootstrap', 'backend', 'addtabs', 'table', 'echarts', 'echarts-theme', 'template'], function ($, undefined, Backend, Datatable, Table, Echarts, undefined, Template) {
|
|
|
|
var Controller = {
|
|
index: function () {
|
|
var vue = new Vue({
|
|
el: '#data',
|
|
data: {
|
|
lineCharts: [],
|
|
granaryList: [],
|
|
typeList: [],
|
|
search: {
|
|
gid: '',
|
|
year: '',
|
|
type: 'rapeseed'
|
|
}
|
|
},
|
|
created() {
|
|
this.getInitData();
|
|
},
|
|
methods: {
|
|
// 获取初始化数据
|
|
getInitData() {
|
|
let loading = this.$loading({
|
|
lock: true,
|
|
text: '数据加载中...',
|
|
spinner: 'el-icon-loading',
|
|
background: 'rgba(0, 0, 0, 0.3)'
|
|
});
|
|
|
|
$.ajax({
|
|
url: 'dashboard/getInitData',
|
|
type: 'GET',
|
|
data: {},
|
|
success: res => {
|
|
loading.close();
|
|
if (res.code === 200) {
|
|
this.granaryList = res.data.granaryList;
|
|
this.typeList = res.data.typeList;
|
|
this.search.year = res.data.year;
|
|
|
|
if (this.granaryList.length) {
|
|
this.search.gid = this.granaryList[0]['id'];
|
|
}
|
|
|
|
this.lineCharts = res.data.lineCharts;
|
|
this.paramsLineCharts();
|
|
} else {
|
|
this.$message.warning(res.msg);
|
|
}
|
|
}
|
|
})
|
|
},
|
|
// 获取检测折线图数据
|
|
getParamsLineCharts() {
|
|
let loading = this.$loading({
|
|
lock: true,
|
|
text: '数据加载中...',
|
|
spinner: 'el-icon-loading',
|
|
background: 'rgba(0, 0, 0, 0.3)'
|
|
});
|
|
|
|
$.ajax({
|
|
url: 'dashboard/getParamsLineCharts',
|
|
type: 'GET',
|
|
data: {
|
|
gid: this.search.gid,
|
|
year: this.search.year,
|
|
type: this.search.type
|
|
},
|
|
success: res => {
|
|
loading.close();
|
|
if (res.code === 200) {
|
|
this.lineCharts = res.data.lineCharts;
|
|
this.paramsLineCharts();
|
|
} else {
|
|
this.$message.warning(res.msg);
|
|
}
|
|
}
|
|
})
|
|
},
|
|
// 折线图
|
|
paramsLineCharts() {
|
|
let series = this.lineCharts;
|
|
let lineChart = Echarts.init(document.getElementById('main-chart'));
|
|
let legendData = [];
|
|
|
|
if (series.seriesData && series.seriesData.length) {
|
|
// 数据处理
|
|
for (item of series.seriesData) {
|
|
item.type = 'line';
|
|
item.areaStyle = {
|
|
focus: 'series'
|
|
};
|
|
|
|
legendData.push(item.name);
|
|
}
|
|
} else {
|
|
console.log('aaasd');
|
|
series.seriesData = [{
|
|
name: '暂无检测数据',
|
|
type: 'line',
|
|
areaStyle: {
|
|
focus: 'series'
|
|
},
|
|
data: []
|
|
}];
|
|
}
|
|
|
|
let option = {
|
|
title: {
|
|
text: ''
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'cross',
|
|
label: {
|
|
backgroundColor: '#6a7985'
|
|
}
|
|
}
|
|
},
|
|
legend: {
|
|
data: legendData
|
|
},
|
|
toolbox: {
|
|
feature: {
|
|
saveAsImage: {}
|
|
}
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: 0,
|
|
containLabel: true
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
data: series.list
|
|
}
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: 'value'
|
|
}
|
|
],
|
|
series: series.seriesData
|
|
};
|
|
|
|
lineChart.setOption(option, true);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
};
|
|
|
|
return Controller;
|
|
});
|