Compare commits
3 Commits
2830005fe8
...
9e9529b41c
Author | SHA1 | Date | |
---|---|---|---|
![]() |
9e9529b41c | ||
![]() |
d95c3d7bd3 | ||
![]() |
3523380010 |
@ -22,7 +22,7 @@
|
||||
<text>{{ titleName+echartName }}</text>
|
||||
</view>
|
||||
<view id="echart_p">
|
||||
<qiun-data-charts type="line" :opts="opts" :chartData="chartData" :ontouch="true"
|
||||
<qiun-data-charts type="area" :opts="opts" :chartData="chartData" :ontouch="true"
|
||||
background="none" />
|
||||
</view>
|
||||
</view>
|
||||
@ -38,26 +38,29 @@
|
||||
background: {
|
||||
backgroundColor: 'transparent',
|
||||
},
|
||||
|
||||
equipmentId:'',
|
||||
|
||||
equipmentId: '',
|
||||
|
||||
chartData: {},
|
||||
opts: {
|
||||
color: ["#24B383"],
|
||||
padding: [15, 10, 0, 15],
|
||||
padding: [15, 35, 0, 15],
|
||||
dataLabel: false,
|
||||
dataPointShape: false,
|
||||
enableScroll: true,
|
||||
enableScroll: false,
|
||||
legend: {},
|
||||
tooltipShow: true,
|
||||
xAxis: {
|
||||
disableGrid: true,
|
||||
scrollShow: true,
|
||||
scrollAlign: 'left',
|
||||
scrollColor: '#24B383',
|
||||
scrollBackgroundColor: '#DFE5E4',
|
||||
itemCount: 3,
|
||||
// scrollShow: true,
|
||||
labelCount: 4,
|
||||
// scrollAlign: 'left',
|
||||
// scrollColor: '#24B383',
|
||||
// scrollBackgroundColor: '#DFE5E4',
|
||||
// itemCount: '5',
|
||||
boundaryGap: "justify",
|
||||
format: "",
|
||||
// format: "",
|
||||
|
||||
},
|
||||
yAxis: {
|
||||
gridType: "dash",
|
||||
@ -66,14 +69,14 @@
|
||||
data: [{
|
||||
title: '',
|
||||
min: 0,
|
||||
// max: 14
|
||||
// max: '',
|
||||
titleOffsetY: -5,
|
||||
}]
|
||||
},
|
||||
extra: {
|
||||
area: {
|
||||
type: "curve",
|
||||
opacity: 0.2,
|
||||
opacity: 0.8,
|
||||
addLine: true,
|
||||
width: 2,
|
||||
gradient: true,
|
||||
@ -81,90 +84,96 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
categoriesList:[],
|
||||
valuePH:'',
|
||||
valuePHList:[],
|
||||
newValuePHList:[],
|
||||
unit:'',
|
||||
|
||||
titleName:'',
|
||||
echartName:''
|
||||
|
||||
categoriesList: [],
|
||||
valuePH: '',
|
||||
valuePHList: [],
|
||||
newValuePHList: [],
|
||||
unit: '',
|
||||
|
||||
titleName: '',
|
||||
echartName: ''
|
||||
};
|
||||
},
|
||||
onReady() {
|
||||
// this.getEchartsData()
|
||||
// this.getServerData();
|
||||
|
||||
|
||||
},
|
||||
onLoad(option) {
|
||||
console.log(option);
|
||||
if(option.id){
|
||||
// console.log(option);
|
||||
if (option.id) {
|
||||
this.equipmentId = option.id
|
||||
}
|
||||
if(option.data){
|
||||
if (option.data) {
|
||||
this.valuePH = option.data
|
||||
}
|
||||
if(option.name){
|
||||
if (option.name) {
|
||||
this.echartName = option.name
|
||||
}
|
||||
if(option.unit){
|
||||
if (option.unit) {
|
||||
this.unit = option.unit
|
||||
this.opts.yAxis.data[0].title = option.unit
|
||||
}
|
||||
|
||||
this.titleName = this.getStatus(option.equipmentNumber,option.targetValue)
|
||||
|
||||
this.titleName = this.getStatus(option.equipmentNumber, option.targetValue)
|
||||
},
|
||||
mounted() {
|
||||
this.getEchartsData()
|
||||
this.getEchartsData()
|
||||
},
|
||||
methods: {
|
||||
getServerData() {
|
||||
|
||||
|
||||
//模拟从服务器获取数据时的延时
|
||||
setTimeout(() => {
|
||||
//模拟服务器返回数据,如果数据格式和标准格式不同,需自行按下面的格式拼接
|
||||
let res = {
|
||||
categories: this.categoriesList,
|
||||
categories: this.categoriesList,
|
||||
series: [{
|
||||
name: this.titleName+this.echartName,
|
||||
name: this.titleName + this.echartName,
|
||||
data: this.newValuePHList
|
||||
}, ]
|
||||
};
|
||||
this.chartData = JSON.parse(JSON.stringify(res));
|
||||
}, 500);
|
||||
},
|
||||
|
||||
|
||||
// 获取折线图数据
|
||||
getEchartsData(){
|
||||
getEchartsData() {
|
||||
this.$http({
|
||||
url:this.api.chart_fsdata + '?equipmentId=' + this.equipmentId,
|
||||
method:'POST'
|
||||
}).then(res=>{
|
||||
console.log(res,'获取折线图数据');
|
||||
res.data.forEach((i,index)=>{
|
||||
url: this.api.chart_fsdata + '?equipmentId=' + this.equipmentId,
|
||||
method: 'POST'
|
||||
}).then(res => {
|
||||
console.log(res, '获取折线图数据');
|
||||
res.data.forEach((i, index) => {
|
||||
this.categoriesList.push(i.time);
|
||||
this.valuePHList.push(i.value)
|
||||
})
|
||||
this.getServerData();
|
||||
this.getServerData();
|
||||
|
||||
this.categoriesList = this.categoriesList.map(item => {
|
||||
return item.split(' ')[1]
|
||||
})
|
||||
// this.opts.xAxis.itemCount = this.categoriesList.length
|
||||
// console.log(this.categoriesList,'this.categoriesList');
|
||||
// console.log(this.valuePHList,'this.valuePHList');
|
||||
this.newValuePHList = this.valuePHList.map((e,index)=>{
|
||||
return e[this.titleName+this.echartName] == undefined ? '' : e[this.titleName+this.echartName]
|
||||
this.newValuePHList = this.valuePHList.map((e, index) => {
|
||||
return e[this.titleName + this.echartName] == undefined ? '' : e[this.titleName +
|
||||
this.echartName]
|
||||
})
|
||||
console.log(this.newValuePHList,'121212212121211111111');
|
||||
console.log(this.newValuePHList, '121212212121211111111');
|
||||
})
|
||||
},
|
||||
|
||||
|
||||
// 判断是否是平均或者目标,或者是1#
|
||||
getStatus(equipmentNumber,targetValue){
|
||||
if(targetValue == 1){
|
||||
getStatus(equipmentNumber, targetValue) {
|
||||
if (targetValue == 1) {
|
||||
return '目标'
|
||||
}else if(targetValue == 0 && equipmentNumber == 0){
|
||||
} else if (targetValue == 0 && equipmentNumber == 0) {
|
||||
return '1#平均'
|
||||
}else if(targetValue == 0 && equipmentNumber == 15){
|
||||
} else if (targetValue == 0 && equipmentNumber == 15) {
|
||||
return '2#平均'
|
||||
}else if(targetValue == 0 && equipmentNumber != 0 && equipmentNumber != 15){
|
||||
} else if (targetValue == 0 && equipmentNumber != 0 && equipmentNumber != 15) {
|
||||
return equipmentNumber + '#'
|
||||
}
|
||||
}
|
||||
@ -266,7 +275,7 @@
|
||||
width: 100%;
|
||||
height: calc(100% - 74rpx);
|
||||
box-sizing: border-box;
|
||||
padding: 0 20rpx;
|
||||
padding: 0 0rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -210,21 +210,24 @@ var _default = {
|
||||
chartData: {},
|
||||
opts: {
|
||||
color: ["#24B383"],
|
||||
padding: [15, 10, 0, 15],
|
||||
padding: [15, 35, 0, 15],
|
||||
dataLabel: false,
|
||||
dataPointShape: false,
|
||||
enableScroll: true,
|
||||
enableScroll: false,
|
||||
legend: {},
|
||||
tooltipShow: true,
|
||||
xAxis: {
|
||||
disableGrid: true,
|
||||
scrollShow: true,
|
||||
scrollAlign: 'left',
|
||||
scrollColor: '#24B383',
|
||||
scrollBackgroundColor: '#DFE5E4',
|
||||
itemCount: 3,
|
||||
boundaryGap: "justify",
|
||||
format: ""
|
||||
// scrollShow: true,
|
||||
labelCount: 4,
|
||||
// scrollAlign: 'left',
|
||||
// scrollColor: '#24B383',
|
||||
// scrollBackgroundColor: '#DFE5E4',
|
||||
// itemCount: '5',
|
||||
boundaryGap: "justify"
|
||||
// format: "",
|
||||
},
|
||||
|
||||
yAxis: {
|
||||
gridType: "dash",
|
||||
dashLength: 2,
|
||||
@ -232,14 +235,14 @@ var _default = {
|
||||
data: [{
|
||||
title: '',
|
||||
min: 0,
|
||||
// max: 14
|
||||
// max: '',
|
||||
titleOffsetY: -5
|
||||
}]
|
||||
},
|
||||
extra: {
|
||||
area: {
|
||||
type: "curve",
|
||||
opacity: 0.2,
|
||||
opacity: 0.8,
|
||||
addLine: true,
|
||||
width: 2,
|
||||
gradient: true,
|
||||
@ -261,7 +264,7 @@ var _default = {
|
||||
// this.getServerData();
|
||||
},
|
||||
onLoad: function onLoad(option) {
|
||||
console.log(option);
|
||||
// console.log(option);
|
||||
if (option.id) {
|
||||
this.equipmentId = option.id;
|
||||
}
|
||||
@ -309,6 +312,10 @@ var _default = {
|
||||
_this2.valuePHList.push(i.value);
|
||||
});
|
||||
_this2.getServerData();
|
||||
_this2.categoriesList = _this2.categoriesList.map(function (item) {
|
||||
return item.split(' ')[1];
|
||||
});
|
||||
// this.opts.xAxis.itemCount = this.categoriesList.length
|
||||
// console.log(this.categoriesList,'this.categoriesList');
|
||||
// console.log(this.valuePHList,'this.valuePHList');
|
||||
_this2.newValuePHList = _this2.valuePHList.map(function (e, index) {
|
||||
|
@ -1 +1 @@
|
||||
<view class="target_water_fertilizer_PH data-v-3d983434"><u-navbar vue-id="454957e0-1" background="{{background}}" is-back="{{true}}" back-icon-color="#FFFFFF" border-bottom="{{false}}" title="{{titleName+echartName}}" title-color="#FFFFFF" title-bold="{{true}}" title-size="32" class="data-v-3d983434" bind:__l="__l"></u-navbar><view class="navbar data-v-3d983434"><image src="../../static/PH_bg.png" mode class="data-v-3d983434"></image></view><view class="content data-v-3d983434"><view class="number data-v-3d983434">{{''+(valuePH+unit)+''}}</view><view class="data_analysis data-v-3d983434"><image src="../../static/data_analysis.png" mode class="data-v-3d983434"></image><text class="data-v-3d983434">数据分析</text></view><view class="echart data-v-3d983434"><view class="title data-v-3d983434"><image src="../../static/icon_ph.png" mode class="data-v-3d983434"></image><text class="data-v-3d983434">{{titleName+echartName}}</text></view><view id="echart_p" class="data-v-3d983434"><qiun-data-charts vue-id="454957e0-2" type="line" opts="{{opts}}" chartData="{{chartData}}" ontouch="{{true}}" background="none" class="data-v-3d983434" bind:__l="__l"></qiun-data-charts></view></view></view></view>
|
||||
<view class="target_water_fertilizer_PH data-v-3d983434"><u-navbar vue-id="454957e0-1" background="{{background}}" is-back="{{true}}" back-icon-color="#FFFFFF" border-bottom="{{false}}" title="{{titleName+echartName}}" title-color="#FFFFFF" title-bold="{{true}}" title-size="32" class="data-v-3d983434" bind:__l="__l"></u-navbar><view class="navbar data-v-3d983434"><image src="../../static/PH_bg.png" mode class="data-v-3d983434"></image></view><view class="content data-v-3d983434"><view class="number data-v-3d983434">{{''+(valuePH+unit)+''}}</view><view class="data_analysis data-v-3d983434"><image src="../../static/data_analysis.png" mode class="data-v-3d983434"></image><text class="data-v-3d983434">数据分析</text></view><view class="echart data-v-3d983434"><view class="title data-v-3d983434"><image src="../../static/icon_ph.png" mode class="data-v-3d983434"></image><text class="data-v-3d983434">{{titleName+echartName}}</text></view><view id="echart_p" class="data-v-3d983434"><qiun-data-charts vue-id="454957e0-2" type="area" opts="{{opts}}" chartData="{{chartData}}" ontouch="{{true}}" background="none" class="data-v-3d983434" bind:__l="__l"></qiun-data-charts></view></view></view></view>
|
@ -108,6 +108,6 @@
|
||||
width: 100%;
|
||||
height: calc(100% - 74rpx);
|
||||
box-sizing: border-box;
|
||||
padding: 0 20rpx;
|
||||
padding: 0 0rpx;
|
||||
}
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user