bigdataCut/bigdata2/src/pages/forecasting/xycb/xycbDataDetail.vue

<template>
	<div>
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/index/xycb' }">智能性诱测报</el-breadcrumb-item>
			<el-breadcrumb-item>数据详情</el-breadcrumb-item>
		</el-breadcrumb>
		<div class="equipInfo">
			<div class="equipMsg">
				<span>设备ID：{{this.queryInfo.e_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>
		<!-- 统计图 --> 
		<div>
			<div>
				<el-row :gutter="10">
					<el-col :md="24" :lg="14">
						<el-card class="box-card">
							<div class="charts">
								<template v-if="Object.keys(options).length>0">
									<highcharts :options="options"></highcharts>
								</template>
								<template v-else>
									<div style="text-align:center;font-size:20px;line-height:450px">暂无数据</div>
								</template>
							</div>
						</el-card>
					</el-col>
					<el-col :md="24" :lg="10">
						<el-card class="box-card">
							<div class="pie">
								<template v-if="device_model==1">
									<!-- <highcharts :options="options2" :key="1"></highcharts> -->
									<template v-if="Object.keys(options2).length>0">
										<highcharts :options="options2"></highcharts>
									</template>
									<template v-else>
										<div style="text-align:center;font-size:20px;line-height:450px">暂无数据</div>
									</template>
								</template>
							</div>
						</el-card>
					</el-col>
				</el-row>
				<div class="dataTableSearch">
					<div>
					</div>
				</div>
			</div>
			<el-card class="box-card">
				<el-table :data="tableData" stripe style="width: 100%">
					<el-table-column
						v-for="(item,index) in tableHeadTxt"
						:key="index"
						:prop="item[1]"
						:label="item[0]"
						: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>
	</div>
</template>

<script>
import DateSearch from '@/components/DateSearch'
export default {
	data() {
		return {
			device_model: 1, //性诱1型或II型
			name:this.$route.query.name,
			btnSelected: '',
			lineTime: '',
			dataTime: '',
			options: {},
			worms: [
				{
					value: 1,
					label: '蛾子'
				},
				{
					value: 2,
					label: '蚊子'
				}
			],
			options2: {},
			// 状态信息
			equipStatus: {},
			// 统计图表信息
			equipChartData: [],
			//总数据条数
			total: 0,
			// 动态表头
			tableHeadTxt: [
				['设备开关', 'ds'],
				['工作状态', 'ws'],
				['环境温度', 'at'],
				['环境湿度', 'ah'],
				['充电电压', 'cv'],
				['电池电压', 'bv'],
				['红外计数值', 'infr_ct'],
				['充电状态', 'cs'],
				['电池状态', 'bs'],
				['信号强度', 'csq'],
				['版本号', 'dver'],
				['上报时间', 'addtime']
			],
			// 表格数据
			tableData: [],
			timeRange: '',
			queryInfo: {
				begin: '',
				end: '',
				e_id: this.$route.query.e_id,
				page: 1
			},
			//图表实时否有数据
			isEchartData: true,
			//表格和图表按钮样式切换参数
			display: '0', //0代表表格、1代表图表
			displayView: true,
			// 表格和图表显示切换控制
			showControl: true,
			//echarts图表参数
			echartOptions: [],
			// 动态表头
			tableHead: [],
			// 表格数据
			hisData: []
		}
	},
	created() {},
	mounted() {
		// this.getChartDataList()
		// this.getHisDataList()
	},
	methods: {
		// 返回时间戳
		returnTime(time) {
			var thisTime = time.replace(/-/g, '/');
			var time = new Date(thisTime);
			var timestamp = time.getTime() + 8 * 3600000;
			return timestamp;
		},
		//获取折线数据
		getChartDataList() {
			this.$axios({
				method: 'POST',
				url: '/sex_at_ah',
				data: this.qs.stringify({
					begin:  this.queryInfo.begin,
					end: this.queryInfo.end,
					e_id: this.queryInfo.e_id,
				})
			}).then((res) => {
				if (res.data.length > 0) {
					var ChartData = [
						{
							name: '温度（°C）',
							dat: []
						},
						{
							name: '湿度（%）',
							dat: []
						},
						{
							name: '红外计数值',
							dat: []
						},
						{
							name: '高压计数值',
							dat: []
						},
						{
							name: 'cpu温度（°C）',
							dat: []
						}
					]
					var data = res.data
					for (let item of data) {
						ChartData[0].dat.unshift([
							this.returnTime(item.tim),
							Number(item.at)
						])
						ChartData[1].dat.unshift([
							this.returnTime(item.tim),
							Number(item.ah)
						])
					}
					this.options = {
						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: [
							{
								type: 'spline',
								name: ChartData[0].name,
								data: ChartData[0].dat
							},
							
						],
						colors: ['#6cbbff', '#ff3f3f','#00e29d', ],
						credits: {
							//去掉默认的highcharts.com
							enabled: false
						},
						tooltip: {
							// crosshairs: true,
							shared: true, //折线共享
							headerFormat: '<b>{point.x:%Y-%m-%e %H:%M:%S}</b><br>'
						}
					}
					this.options2 = {
						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: [
							{
								type: 'spline',
								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'
										}
									}
								}
							]
						}
					}
					
				}else{
					this.options = {};
					this.options2 = {};
				}
			})
		},
		//获取表格数据
		getHisDataList() {
			this.$axios({
				method: 'POST',
				url: '/sex_trap_data',
				data: this.qs.stringify({
					e_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].sex_trap+')');
							dht.addtime = data[i].upl_time
							dht.ws = dht.ws ? '工作' : '待机'
							dht.cs = dht.cs ? '充电中' : '未充电'
							if(dht.bs == 0){
								dht.bs = '正常'
							}else if(dht.bs == 1){
								dht.bs = '欠压'
							}else if(dht.bs == 0){
								dht.bs = '过压'
							}
							dht.rps = dht.rps ? '正常' : '雨控'
							dht.ds = dht.ds ? '关' : '开'
							dht.tps = dht.tps ? '正常' : '温控'
							dht.lps = dht.lps ? '夜晚' : '白天'
							dht.cv = (dht.cv /1000).toFixed(2);
							dht.bv = (dht.bv/1000).toFixed(2);
							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 = []
					}
				}
			})
		},
		//改变page
		changePage(val) {
			this.queryInfo.page = val
			this.getHisDataList()
		},
		dateChange(data) {
			console.log(data.begin);
			this.queryInfo.page = 1
			this.queryInfo.begin = data.begin?new Date(data.begin*1000).toLocaleDateString().replace(/\//g,'-'):''; 
			this.queryInfo.end = data.end?new Date(data.end*1000).toLocaleDateString().replace(/\//g,'-'):''; 
			this.getHisDataList()
			this.getChartDataList()
		},
		setWidth(item) {
			if (item[1] == 'addtime') {
				return 180 + 'px'
			}
		},
		refresh() {
			this.$axios({
				method: 'POST',
				url: '/sex_mqtt_v1',
				data: this.qs.stringify({
					ext: 'data',
					e_id: this.queryInfo.e_id,
				})
			}).then((res) => {
				if (res.data == 0) {
					this.$message.success('刷新成功')
				} else {
					this.$message.err('刷新失败')
				}
			})
		}
	},
	components: {
		DateSearch
	}
}
</script>

<style lang='less' scoped>
.box-card {
	position: relative;
}
.equipInfo {
	.equipMsg {
		font-size: 14px;
		color: #3d3d3d;
		i {
			font-size: 16px;
			color: #14a478;
		}
		span {
			margin-left: 5px;
		}
	}
	display: flex;
	justify-content: space-between;
	margin-bottom: 15px;
}

.time-check {
	display: flex;
	justify-content: space-between;
	.el-input__inner {
		margin-left: 10px;
		width: 222px;
	}
}

.chartsSelect {
	text-align: right;
	position: absolute;
	z-index: 999;
	left: 0;
	right: 21px;
}
.charts,
.pie {
	height: 423px;
}
.equipStatus {
	display: flex;
	justify-content: center;
	margin: 10px 0;
	.equipIcon {
		margin-right: 14%;
	}
	.equipParams {
		min-width: 80px;
		line-height: 27px;
		p {
			color: #a6a6a6;
		}
	}
}

.dataTableSearch {
	display: flex;
	justify-content: space-between;
	margin: 20px 0;
	.el-input__inner {
		width: 222px;
	}
}

// .check-btns{display:flex;justify-content: space-between;margin-bottom:20px}
.echarts {
	width: 100%;
	height: 300px;
}
.ctrl-check {
	margin-bottom: 20px;
}
</style>