|
@@ -12,6 +12,27 @@ import * as echarts from "echarts"
|
|
|
import commonTitle from '../components/commonTitle.vue'
|
|
|
import { setMax } from "../components/common.js";
|
|
|
|
|
|
+var moniData = [
|
|
|
+ {
|
|
|
+ circname:"内部循环1",
|
|
|
+ begintime: '00:00',
|
|
|
+ endtime: '00:40',
|
|
|
+ sections:[
|
|
|
+ {secname:0,temperature:'50.0',humidity:'78.0',time:"00:00"},
|
|
|
+ {secname:1,temperature:'40.0',humidity:'78.0',time:"00:20"},
|
|
|
+ {secname:2,temperature:'40.0',humidity:'58.0',time:"00:40"}
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ circname:"内部循环2",
|
|
|
+ begintime: '00:50',
|
|
|
+ endtime: '01:10',
|
|
|
+ sections:[
|
|
|
+ {secname:4,temperature:'40.0',humidity:'-58.0',time:"00:50"},
|
|
|
+ {secname:5,temperature:'60.0',humidity:'-88.0',time:"01:10"}
|
|
|
+ ]
|
|
|
+ },
|
|
|
+]
|
|
|
export default {
|
|
|
components: { commonTitle },
|
|
|
name: '',
|
|
@@ -25,6 +46,11 @@ export default {
|
|
|
},
|
|
|
data () {
|
|
|
return {
|
|
|
+ chooseXunhuan: {
|
|
|
+ circname: '',
|
|
|
+ begintime: '',
|
|
|
+ endtime: ''
|
|
|
+ },
|
|
|
uEcharts: null,
|
|
|
uOption: null,
|
|
|
legendData: [
|
|
@@ -32,9 +58,14 @@ export default {
|
|
|
{ name: '温度实值', value: 50 },
|
|
|
{ name: '湿度实值', value: 60.3 },
|
|
|
],
|
|
|
- fusheData: [150, 230, 224, 218, 135, 147, 260],
|
|
|
- wenduData: [120, 132, 101, 134, 90, 230, 210],
|
|
|
- shiduData: [220, 182, 191, 234, 290, 330, 310],
|
|
|
+ fusheData: [],
|
|
|
+ wenduData: [],
|
|
|
+ shiduData: [],
|
|
|
+ timeData: [],
|
|
|
+ // fusheData: [150, 230, 224, 218, 135, 147, 260],
|
|
|
+ // wenduData: [50, 60, 60, 70, 50, 50, 60],
|
|
|
+ // shiduData: [40, 70, 70, 40, 40, 50, 50],
|
|
|
+ // timeData: ['08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00']
|
|
|
}
|
|
|
},
|
|
|
watch: {
|
|
@@ -44,9 +75,32 @@ export default {
|
|
|
},
|
|
|
immediate: true,
|
|
|
deep: true
|
|
|
- }
|
|
|
+ },
|
|
|
+ 'chooseXunhuan.circname': {
|
|
|
+ handler(newValue, oldValue){
|
|
|
+ if(newValue){
|
|
|
+ console.log(newValue, oldValue)
|
|
|
+ var value = newValue.find(item => item.circname === newValue)
|
|
|
+ console.log(value)
|
|
|
+ if(value){
|
|
|
+ this.chooseXunhuan.circname = value.circname
|
|
|
+ this.chooseXunhuan.begintime = value.begintime
|
|
|
+ this.chooseXunhuan.endtime = value.endtime
|
|
|
+ } else {
|
|
|
+ this.chooseXunhuan.circname = ''
|
|
|
+ this.chooseXunhuan.begintime = ''
|
|
|
+ this.chooseXunhuan.endtime = ''
|
|
|
+ }
|
|
|
+ }
|
|
|
+ console.log(this.chooseXunhuan)
|
|
|
+ this.changeData(this.data)
|
|
|
+ },
|
|
|
+ // immediate: true,
|
|
|
+ deep: true
|
|
|
+ },
|
|
|
},
|
|
|
created () {
|
|
|
+ // this.changeData(moniData)
|
|
|
},
|
|
|
mounted () {
|
|
|
this.$nextTick(() => {
|
|
@@ -66,6 +120,9 @@ export default {
|
|
|
left: '46',
|
|
|
bottom: '40'
|
|
|
},
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ },
|
|
|
xAxis: {
|
|
|
type: 'category',
|
|
|
axisTick: { show: false }, // 横坐标刻度
|
|
@@ -80,7 +137,7 @@ export default {
|
|
|
color: '#fff'
|
|
|
}
|
|
|
},
|
|
|
- data: ['8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00']
|
|
|
+ data: _this.timeData
|
|
|
},
|
|
|
yAxis: [
|
|
|
{
|
|
@@ -103,9 +160,10 @@ export default {
|
|
|
color: '#fff',
|
|
|
padding: [0, 0, 0, 20],
|
|
|
},
|
|
|
- min: 0,
|
|
|
- max: setMax(maxa),
|
|
|
- interval: setMax(maxa) / 5,
|
|
|
+ alignTicks: true,
|
|
|
+ // min: 0,
|
|
|
+ // max: setMax(maxa),
|
|
|
+ // interval: setMax(maxa) / 5,
|
|
|
},
|
|
|
{
|
|
|
type: 'value',
|
|
@@ -127,9 +185,10 @@ export default {
|
|
|
color: '#fff',
|
|
|
// padding: [0, 0, 0, 20],
|
|
|
},
|
|
|
- min: 0,
|
|
|
- max: setMax(maxb),
|
|
|
- interval: setMax(maxb) / 5,
|
|
|
+ alignTicks: true,
|
|
|
+ // min: 0,
|
|
|
+ // max: setMax(maxb),
|
|
|
+ // interval: setMax(maxb) / 5,
|
|
|
},
|
|
|
],
|
|
|
legend: {
|
|
@@ -141,12 +200,12 @@ export default {
|
|
|
fontSize: 11
|
|
|
},
|
|
|
top: '15',
|
|
|
- // 使用回调函数
|
|
|
- formatter: function (name) {
|
|
|
- console.log(name)
|
|
|
- var currentObj = _this.legendData.find(item => item.name === name)
|
|
|
- return name + ':' + currentObj.value;
|
|
|
- },
|
|
|
+ // 使用回调函数:加上数值方法
|
|
|
+ // formatter: function (name) {
|
|
|
+ // console.log(name)
|
|
|
+ // var currentObj = _this.legendData.find(item => item.name === name)
|
|
|
+ // return name + ':' + currentObj.value;
|
|
|
+ // },
|
|
|
data: _this.legendData.map(item => item.name),
|
|
|
},
|
|
|
series: [
|
|
@@ -195,7 +254,7 @@ export default {
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ // 颜色渐变
|
|
|
{
|
|
|
offset: 0,
|
|
|
- color: 'rgb(207, 168, 9, 0)'
|
|
|
+ color: 'rgba(207, 168, 9, .8)'
|
|
|
},
|
|
|
{
|
|
|
offset: 0.5,
|
|
@@ -203,11 +262,27 @@ export default {
|
|
|
},
|
|
|
{
|
|
|
offset: 1,
|
|
|
- color: 'rgb(207, 168, 9, 0)'
|
|
|
+ color: 'rgba(207, 168, 9, .8)'
|
|
|
}
|
|
|
])
|
|
|
}
|
|
|
},
|
|
|
+ markArea: {
|
|
|
+ itemStyle: {
|
|
|
+ color: 'rgba(255, 173, 177, 0.4)'
|
|
|
+ },
|
|
|
+ data: [
|
|
|
+ [
|
|
|
+ {
|
|
|
+ name: _this.chooseXunhuan.circname,
|
|
|
+ xAxis: _this.chooseXunhuan.begintime
|
|
|
+ },
|
|
|
+ {
|
|
|
+ xAxis: _this.chooseXunhuan.endtime
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ ]
|
|
|
+ },
|
|
|
data: _this.wenduData,
|
|
|
},
|
|
|
{
|
|
@@ -221,7 +296,7 @@ export default {
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ // 颜色渐变
|
|
|
{
|
|
|
offset: 0,
|
|
|
- color: 'rgb(73, 228, 233, 0)'
|
|
|
+ color: 'rgba(73, 228, 233, .8)'
|
|
|
},
|
|
|
{
|
|
|
offset: 0.5,
|
|
@@ -229,7 +304,7 @@ export default {
|
|
|
},
|
|
|
{
|
|
|
offset: 1,
|
|
|
- color: 'rgb(73, 228, 233, 0)'
|
|
|
+ color: 'rgba(73, 228, 233, .8)'
|
|
|
}
|
|
|
])
|
|
|
}
|
|
@@ -243,31 +318,63 @@ export default {
|
|
|
this.uEcharts.resize();
|
|
|
});
|
|
|
},
|
|
|
- // // 取最大值
|
|
|
- // setMax(num) {
|
|
|
- // // 1.判断是否小数: //判断是否含有小数点:要检索的字符串值没有出现,则该方法返回 -1。
|
|
|
- // if (num.toString().indexOf(".") != -1) {//有小数点
|
|
|
- // num = Math.ceil(num);//向上取整
|
|
|
- // }
|
|
|
- // // 2.向上取整数倍
|
|
|
- // if (num.toString().length < 2) {
|
|
|
- // // 一位数1
|
|
|
- // num = 10;
|
|
|
- // } else if (num.toString().length < 3) {
|
|
|
- // // 2位数
|
|
|
- // num = Math.ceil(num / 5) * 5;// 变成最近的5的倍数
|
|
|
- // } else {
|
|
|
- // // 位数--先判断是不是1000...的倍数
|
|
|
- // var t = '';
|
|
|
- // for (let i = 0; i < num.toString().length - 1; i++) {
|
|
|
- // t += '0';//'0000...'
|
|
|
- // }
|
|
|
- // if ((num % Number(1 + t)) != 0) {//不是100的倍数
|
|
|
- // num = (Number(num.toString().substr(0, 1)) + 1) * Number(1 + t);
|
|
|
- // }
|
|
|
- // }
|
|
|
- // return num
|
|
|
- // }
|
|
|
+ // 改变获取数据为所需格式
|
|
|
+ changeData(data){
|
|
|
+ console.log('预制曲线数据', data)
|
|
|
+ data.forEach(element => {
|
|
|
+ var wenduArr = element.sections.map(item => {
|
|
|
+ return item.temperature
|
|
|
+ })
|
|
|
+ var shiduArr = element.sections.map(item => {
|
|
|
+ return item.humidity
|
|
|
+ })
|
|
|
+ var timeArr = element.sections.map(item => {
|
|
|
+ return item.time
|
|
|
+ })
|
|
|
+ this.wenduData = [...this.wenduData, ...wenduArr]
|
|
|
+ this.shiduData = [...this.shiduData, ...shiduArr]
|
|
|
+ this.timeData = [...this.timeData, ...timeArr]
|
|
|
+ console.log(this.wenduData)
|
|
|
+ console.log(this.shiduData)
|
|
|
+ });
|
|
|
+ var _this = this
|
|
|
+ this.uEcharts.setOption({
|
|
|
+ xAxis: {
|
|
|
+ data: this.timeData
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '辐射强度值',
|
|
|
+ data: _this.fusheData
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '温度实值',
|
|
|
+ markArea: {
|
|
|
+ itemStyle: {
|
|
|
+ color: 'rgba(67, 172, 225, 0.4)'
|
|
|
+ // color: 'rgba(255, 173, 177, 0.4)'
|
|
|
+ },
|
|
|
+ data: [
|
|
|
+ [
|
|
|
+ {
|
|
|
+ name: _this.chooseXunhuan.circname,
|
|
|
+ xAxis: _this.chooseXunhuan.begintime
|
|
|
+ },
|
|
|
+ {
|
|
|
+ xAxis: _this.chooseXunhuan.endtime
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ data: _this.wenduData
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '湿度实值',
|
|
|
+ data: _this.shiduData
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ });
|
|
|
+ },
|
|
|
}
|
|
|
}
|
|
|
</script>
|