|
|
@@ -10,7 +10,7 @@
|
|
|
<span>设备ID:{{id}}</span>
|
|
|
<span>设备名称:{{name||'无'}}</span>
|
|
|
</div>
|
|
|
- <DateSearch @dateChange="dateChange"></DateSearch>
|
|
|
+ <DateSearch @dateChange="dateChange" ref="setSelected"></DateSearch>
|
|
|
</div>
|
|
|
<div class="ctrl-check">
|
|
|
<el-button type="primary" size="mini" @click="refresh">刷新</el-button>
|
|
|
@@ -18,8 +18,9 @@
|
|
|
<el-row :gutter="20">
|
|
|
<el-col :md="24" :lg="12">
|
|
|
<el-card class="box-card">
|
|
|
- <div style="text-align:center;font-size:20px;height:360px;position: relative;" v-if="Object.keys(option1).length<=0"><div class="el-loading-mask" style=""><div class="el-loading-spinner"><svg viewBox="25 25 50 50" class="circular"><circle cx="50" cy="50" r="20" fill="none" class="path"></circle></svg><!----></div></div></div>
|
|
|
- <div v-else class="charts">
|
|
|
+ <!-- <div style="text-align:center;font-size:20px;height:360px;position: relative;" v-if="Object.keys(option1).length<=0"><div class="el-loading-mask" style=""><div class="el-loading-spinner"><svg viewBox="25 25 50 50" class="circular"><circle cx="50" cy="50" r="20" fill="none" class="path"></circle></svg></div></div></div> -->
|
|
|
+ <!-- <div v-else class="charts"> -->
|
|
|
+ <div class="charts">
|
|
|
<highcharts :options="option1" v-if="Object.keys(option1).length>0"></highcharts>
|
|
|
<div v-else style="text-align:center;font-size:20px;line-height:360px">暂无数据</div>
|
|
|
</div>
|
|
|
@@ -27,8 +28,9 @@
|
|
|
</el-col>
|
|
|
<el-col :md="24" :lg="12">
|
|
|
<el-card class="box-card">
|
|
|
- <div style="text-align:center;font-size:20px;height:360px;position: relative;" v-if="Object.keys(option2).length<=0"><div class="el-loading-mask" style=""><div class="el-loading-spinner"><svg viewBox="25 25 50 50" class="circular"><circle cx="50" cy="50" r="20" fill="none" class="path"></circle></svg><!----></div></div></div>
|
|
|
- <div v-else class="charts">
|
|
|
+ <!-- <div style="text-align:center;font-size:20px;height:360px;position: relative;" v-if="Object.keys(option2).length<=0"><div class="el-loading-mask" style=""><div class="el-loading-spinner"><svg viewBox="25 25 50 50" class="circular"><circle cx="50" cy="50" r="20" fill="none" class="path"></circle></svg></div></div></div> -->
|
|
|
+ <!-- <div v-else class="charts"> -->
|
|
|
+ <div class="charts">
|
|
|
<highcharts :options="option2" v-if="Object.keys(option2).length>0"></highcharts>
|
|
|
<div v-else style="text-align:center;font-size:20px;line-height:360px">暂无数据</div>
|
|
|
</div>
|
|
|
@@ -72,6 +74,10 @@ export default {
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
+ isOne:true,
|
|
|
+ isSelect:true,
|
|
|
+ isSelectNian:true,
|
|
|
+ isSelectYear:true,
|
|
|
loading:true,
|
|
|
id: this.$route.params.e_id,
|
|
|
name: this.$route.query.name,
|
|
|
@@ -113,6 +119,226 @@ export default {
|
|
|
},
|
|
|
methods: {
|
|
|
//获取折线数据
|
|
|
+ initChartDataList() {
|
|
|
+ this.$axios({
|
|
|
+ method: 'POST',
|
|
|
+ url: '/bzy_report_detail_chart',
|
|
|
+ data: this.qs.stringify({
|
|
|
+ req: 'filter',
|
|
|
+ id: this.queryInfo.e_id,
|
|
|
+ begin: this.queryInfo.begin,
|
|
|
+ end: this.queryInfo.end
|
|
|
+ })
|
|
|
+ }).then((res) => {
|
|
|
+ if (res.data.length) {
|
|
|
+ var ChartData = [
|
|
|
+ {
|
|
|
+ name: '温度(°C)',
|
|
|
+ dat: []
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '湿度(RH)',
|
|
|
+ dat: []
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '保温仓温度(°C)',
|
|
|
+ dat: []
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ var data = res.data
|
|
|
+ for (let item of data) {
|
|
|
+ ChartData[0].dat.unshift([
|
|
|
+ this.returnTime(item.tim),
|
|
|
+ parseFloat(item.at)
|
|
|
+ ])
|
|
|
+ ChartData[1].dat.unshift([
|
|
|
+ this.returnTime(item.tim),
|
|
|
+ parseFloat(item.ah)
|
|
|
+ ])
|
|
|
+ ChartData[2].dat.unshift([
|
|
|
+ this.returnTime(item.tim),
|
|
|
+ parseFloat(item.pre_temp)
|
|
|
+ ])
|
|
|
+ }
|
|
|
+ this.option1 = {
|
|
|
+ chart: {
|
|
|
+ zoomType: 'x'
|
|
|
+ },
|
|
|
+ title: {
|
|
|
+ text: '环境温湿度',
|
|
|
+ align: 'left'
|
|
|
+ },
|
|
|
+ subtitle: {
|
|
|
+ text: ''
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ crosshair: true, //十字基准线
|
|
|
+ type: 'datetime',
|
|
|
+ dateTimeLabelFormats: {
|
|
|
+ //根据时间间距X轴自动显示哪种格式
|
|
|
+ millisecond: '%H:%M:%S.%L',
|
|
|
+ second: '%H:%M:%S',
|
|
|
+ minute: '%H:%M',
|
|
|
+ hour: '%H:%M',
|
|
|
+ day: '%m-%d',
|
|
|
+ week: '%m-%d',
|
|
|
+ month: '%Y-%m',
|
|
|
+ year: '%Y'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ title: {
|
|
|
+ text: ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ // layout: 'vertical',
|
|
|
+ align: 'right',
|
|
|
+ verticalAlign: 'top'
|
|
|
+ },
|
|
|
+ plotOptions: {
|
|
|
+ series: {
|
|
|
+ label: {
|
|
|
+ connectorAllowed: false
|
|
|
+ },
|
|
|
+ pointStart: 2010 //该参数定义了数据点的起点
|
|
|
+ }
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: ChartData[0].name,
|
|
|
+ data: ChartData[0].dat
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: ChartData[1].name,
|
|
|
+ data: ChartData[1].dat
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ colors: ['#00e29d', '#6cbbff', '#ff3f3f'],
|
|
|
+ credits: {
|
|
|
+ //去掉默认的highcharts.com
|
|
|
+ enabled: false
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ // crosshairs: true,
|
|
|
+ shared: true, //折线共享
|
|
|
+ headerFormat: '<b>{point.x:%Y-%m-%e %H:%M:%S}</b><br>'
|
|
|
+ },
|
|
|
+ responsive: {
|
|
|
+ rules: [
|
|
|
+ {
|
|
|
+ condition: {
|
|
|
+ maxWidth: 500
|
|
|
+ },
|
|
|
+ chartOptions: {
|
|
|
+ legend: {
|
|
|
+ layout: 'horizontal',
|
|
|
+ align: 'center',
|
|
|
+ verticalAlign: 'bottom'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.option2 = {
|
|
|
+ chart: {
|
|
|
+ zoomType: 'x'
|
|
|
+ },
|
|
|
+ title: {
|
|
|
+ text: '保温仓温度',
|
|
|
+ align: 'left'
|
|
|
+ },
|
|
|
+ subtitle: {
|
|
|
+ text: ''
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ crosshair: true, //十字基准线
|
|
|
+ type: 'datetime',
|
|
|
+ dateTimeLabelFormats: {
|
|
|
+ //根据时间间距X轴自动显示哪种格式
|
|
|
+ millisecond: '%H:%M:%S.%L',
|
|
|
+ second: '%H:%M:%S',
|
|
|
+ minute: '%H:%M',
|
|
|
+ hour: '%H:%M',
|
|
|
+ day: '%m-%d',
|
|
|
+ week: '%m-%d',
|
|
|
+ month: '%Y-%m',
|
|
|
+ year: '%Y'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ title: { text: '' }
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ // layout: 'vertical',
|
|
|
+ align: 'right',
|
|
|
+ verticalAlign: 'top'
|
|
|
+ },
|
|
|
+ plotOptions: {
|
|
|
+ series: {
|
|
|
+ label: {
|
|
|
+ connectorAllowed: false
|
|
|
+ },
|
|
|
+ pointStart: 2010
|
|
|
+ }
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: ChartData[2].name,
|
|
|
+ data: ChartData[2].dat
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ colors: ['#00e29d', '#6cbbff', '#ff3f3f'],
|
|
|
+ credits: {
|
|
|
+ //去掉默认的highcharts.com
|
|
|
+ enabled: false
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ // crosshairs: true,
|
|
|
+ shared: true, //折线共享
|
|
|
+ headerFormat: '<b>{point.x:%Y-%m-%e %H:%M:%S}</b><br>'
|
|
|
+ },
|
|
|
+ responsive: {
|
|
|
+ rules: [
|
|
|
+ {
|
|
|
+ condition: {
|
|
|
+ maxWidth: 500
|
|
|
+ },
|
|
|
+ chartOptions: {
|
|
|
+ legend: {
|
|
|
+ layout: 'horizontal',
|
|
|
+ align: 'center',
|
|
|
+ verticalAlign: 'bottom'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }else{
|
|
|
+ this.option1 = {}
|
|
|
+ this.option2 = {}
|
|
|
+ if(this.isSelect){
|
|
|
+ this.$refs.setSelected.timeBtnClick(2);
|
|
|
+ this.isSelect = false
|
|
|
+ this.getChartDataList()
|
|
|
+ this.getHisDataList()
|
|
|
+ }else if(this.isSelectNian){
|
|
|
+ this.$refs.setSelected.timeBtnClick(3);
|
|
|
+ this.isSelectNian = false
|
|
|
+ this.getChartDataList()
|
|
|
+ this.getHisDataList()
|
|
|
+ }else if(this.isSelectYear){
|
|
|
+ this.$refs.setSelected.timeBtnClick(4);
|
|
|
+ this.isSelectYear = false
|
|
|
+ this.getChartDataList()
|
|
|
+ this.getHisDataList()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //获取折线数据
|
|
|
getChartDataList() {
|
|
|
this.$axios({
|
|
|
method: 'POST',
|
|
|
@@ -313,6 +539,7 @@ export default {
|
|
|
}else{
|
|
|
this.option1 = {}
|
|
|
this.option2 = {}
|
|
|
+
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
@@ -380,7 +607,12 @@ export default {
|
|
|
this.queryInfo.begin = new Date(data.begin*1000).toLocaleDateString().replace(/\//g,'-');
|
|
|
this.queryInfo.end = new Date(data.end*1000).toLocaleDateString().replace(/\//g,'-');
|
|
|
this.getHisDataList()
|
|
|
- this.getChartDataList()
|
|
|
+ if(this.isOne){
|
|
|
+ this.initChartDataList()
|
|
|
+ }else{
|
|
|
+ this.getChartDataList()
|
|
|
+ }
|
|
|
+ this.isOne = false
|
|
|
},
|
|
|
changePage(val) {
|
|
|
this.queryInfo.page = val
|