bigdataCut/bigdata2/src/pages/forecasting/bzy/DataDetail.vue

<template>
	<div>
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/index/bzy' }">植物孢子捕捉仪</el-breadcrumb-item>
			<el-breadcrumb-item>数据详情</el-breadcrumb-item>
		</el-breadcrumb>
		<div class="equipInfo">
			<div class="detail">
				<i></i>
				<span>设备ID：{{id}}</span>
				<span>设备名称：{{name||'无'}}</span>
			</div>
			<DateSearch @dateChange="dateChange"></DateSearch>
		</div>
		<div class="ctrl-check">
			<el-button type="primary" size="mini" @click="refresh">刷新</el-button>
		</div>
		<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">
						<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>
				</el-card>
			</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">
						<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>
				</el-card>
			</el-col>
		</el-row>
		<div class="dataTableSearch">
		</div>
		<el-card class="box-card">
			<el-table v-loading="loading" :data="tableData" stripe style="width: 100%">
				<el-table-column
					v-for="(item,index) in tableHeadTxt"
					:key="index"
					:prop="item[1]"
					:label="item[0]"
					:show-overflow-tooltip="true"
					:width="setWidth(item)"
				>
					<template slot-scope="scope">{{scope.row[scope.column.property]}}</template>
				</el-table-column>
			</el-table>
			<el-pagination
				background
				layout="prev, pager, next"
				:total="total"
				:current-page="queryInfo.page"
				@current-change="changePage"
			></el-pagination>
		</el-card>
	</div>
</template>

<script>
import DateSearch from '@/components/DateSearch'
export default {
	data() {
		return {
			loading:true,
			id: this.$route.params.e_id,
			name: this.$route.query.name,
			option1: {},
			option2: {},
			btnSelected: '',
			timeRange: '',
			lineTime: '',
			tableHeadTxt: [
				['设备开关', 'on_off'],
				['环境温度(°C)', 'at'],
				['环境湿度(%)', 'ah'],
				['保温仓设定温度(°C)', 'set_temp'],
				['保温仓当前温度(°C)', 'pre_temp'],
				['电池状态', 'bat_sta'],
				['雨控状态', 'rps'],
				['摄像头状态', 'usb_sta'],
				['电压(V)', 'v_bat'],
				['海拔高度', 'alti'],
				['信号强度', 'csq'],
				['设备版本', 'dver'],
				['上报时间', 'addtime']
			],
			queryInfo: {
				begin: '',
				end: '',
				e_id: this.$route.params.e_id,
				name: this.$route.query.name,
				page: 1
			},
			// 表格数据
			tableData: [],
			total: 0
		}
	},
	mounted() {
		// this.getChartDataList()
		// this.getHisDataList()
	},
	methods: {
		//获取折线数据
		getChartDataList() {
			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 = {}
				}
			})
		},
		// 返回时间戳
		returnTime(time) {
			var thisTime = time.replace(/-/g, '/');
			var time = new Date(thisTime);
			var timestamp = time.getTime() + 8 * 3600000;
			return timestamp;
		},
		//获取表格数据
		getHisDataList() {
			this.$axios({
				method: 'POST',
				url: '/bzy_report_detail',
				data: this.qs.stringify({
					req: 'filter',
					id: this.queryInfo.e_id,
					begin: this.queryInfo.begin,
					end: this.queryInfo.end,
					page: this.queryInfo.page
				})
			}).then((res) => {
				this.total = res.data.nums
				if (this.total>0) {
					var data = res.data.dat
					if (data.length > 0) {
						this.tableData = []
						for (var i = 0; i < data.length; i++) {
							var dht = eval('('+data[i].bzy_data+')');
							dht.addtime = data[i].upl_time
							dht.on_off = dht.on_off == 0 ? '关' : '开'
							dht.bat_sta = dht.bat_sta == 0 ? '正常' : '电量过低'
							dht.rps = dht.rps == 0 ? '正常' : '雨控'
							dht.usb_sta = dht.usb_sta == 0 ? '正常' : '异常' //摄像头状态
							if (dht.lamp != undefined) {
								if (dht.ws == 1) {
									if (stat.lamp == 1) {
										dht.blbs = '工作中'
									} else if (dht.lux == 0) {
										dht.blbs = 'N/A（未检测到传感器）'
									} else {
										dht.blbs = '异常'
									}
								} else {
									dht.blbs = '关闭'
								}
							} else {
								dht.blbs = '--'
							}
							this.tableData.push(dht)
						}
					}
				}else{
					this.tableData = []
				}
				this.loading = false;
			})
		},
		dateChange(data) {
			this.option1 = {}
			this.option2 = {}
			this.loading = true;
			this.queryInfo.page = 1
			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()
		},
		changePage(val) {
			this.queryInfo.page = val
			this.getHisDataList()
		},
		setWidth(item) {
			if (item[1] == 'addtime') {
				return 180 + 'px'
			}
		},
		refresh() {
			this.$axios({
				method: 'POST',
				url: '/bzy_mqtt',
				data: this.qs.stringify({
					req: 'read',
					topicid: this.queryInfo.e_id,
				})
			}).then((res) => {
				if (res.data == 0) {
					this.$message.success('刷新成功')
				} else {
					this.$message.err('刷新失败')
				}
			})
		}
	},
	components: {
		DateSearch
	}
}
</script>

<style lang='less' scoped>
.equipInfo {
	display: flex;
	margin-bottom: 10px;
	justify-content: space-between;
	.detail {
		font-size: 14px;
		color: #666;
		span {
			margin-right: 20px;
		}
	}
}
.dataTableSearch {
	display: flex;
	justify-content: space-between;
	margin: 20px 0;
}
.el-input__inner {
	width: 222px !important;
}
.ctrl-check {
	margin-bottom: 20px;
}
</style>