factory_web/src/views/wpm_bx/monitor_detail.vue

<!-- 日志详情 mlog信息以及mlogb -->
<template>
	<el-drawer
		title="监测数据"
		v-model="visible"
		:size="'70%'"
		destroy-on-close
		@closed="$emit('closed')"
	>
		<div id="tableWap" style="height: 100%;" v-if="route_code=='zlybcl'">
			<el-tabs v-model="activeName" @tab-change="handleClick1">
				<el-tab-pane  v-for="item in mpointList" :label="item.nickname" :name="item.nickname" :key="item.id" lazy>
					<scTable
						v-if="item.name !== '折线图'"
						ref="table"
						:apiObj="apiObj"
						row-key="id"
						stripe
						:height="tableHeight1"
						:params="{'mpoint':item.id, 'timex__gte':startTime, 'timex__lte':endTime}"   
						hideDo                                            
					>
						<el-table-column label="时间" prop="timex">
						</el-table-column>
						<el-table-column label="数值" prop="val_float">
							<template #default="scope">
								{{ scope.row.val_float.toFixed(3) }}
							</template>
						</el-table-column>
					</scTable>
					<scEcharts v-if="item.name == '折线图'"  :height="chartHeight" :option="option"></scEcharts>
				</el-tab-pane>
			</el-tabs>
		</div>
		<div id="tableWap" style="height: 100%;" v-else>
			<el-tabs v-model="activeName" @tab-change="handleClick">
				<el-tab-pane  v-for="item in mpointList" :label="item.nickname" :name="item.nickname" :key="item.id" lazy>
					<scTable
						ref="table"
						:apiObj="apiObj"
						row-key="id"
						stripe
						:height="tableHeight"
						:params="{'mpoint':item.id, 'timex__gte':startTime, 'timex__lte':endTime}"   
						hideDo                                            
					>
						<el-table-column label="时间" prop="timex">
						</el-table-column>
						<el-table-column label="数值" prop="val_float">
							<template #default="scope">
								{{ scope.row.val_float.toFixed(3) }}
							</template>
						</el-table-column>
					</scTable>
					<scEcharts height="280px" :option="option"></scEcharts>
				</el-tab-pane>
			</el-tabs>
		</div>
	</el-drawer>
</template>
<script>
export default {
	props: {
		equipmentId: {
			type: String,
			default: "",
		},
		endTime: {
			type: String,
			default: "",
		},
		startTime: {
			type: String,
			default: "",
		},
	},
	emits: ["success", "closed"],
	data() {
		return {
			apiObj:null,
			loading: false,
			isSaveing: false,
			visible: false,
			params:{},
			query:{},
			mpointList:[],
			activeName: "",
			tableHeight:300,
			tableHeight1:300,
			chartHeight:'280px',
			option: {
				title: {
					text: "",
				},
				tooltip: {
					trigger: "axis",
				},
				grid: {
					left: "3%",
					right: "4%",
					bottom: "3%",
					containLabel: true,
				},
				xAxis: {
					type: "category",
					boundaryGap: false,
					data: [],
				},
				yAxis: {
					type: "value",
					min: 0,   
        			max: 100   
				},
				series:[
					{
						name: "数据检测",
						type: "line",
						data: [],
					}
				]
			}
		};
	},
	mounted() {
		this.route_code = this.$route.path.split("/")[2];
	},
	methods: {
		open() {
			let that = this;
			that.mpointList = [];
			this.visible = true;
			that.$nextTick(() => {
				let height = document.getElementById("tableWap").clientHeight;
				that.tableHeight = height - 345;
				that.tableHeight1 = height - 40;
				that.chartHeight =(height - 40)+'px';
			})
			that.params.timex__gte = that.startTime;
			that.params.timex__lte = that.endTime;
			that.$API.enm.mpoint.list.req({ep_belong:that.equipmentId,page:0}).then((res) => {
				if(res.length>0){
					that.mpointList = res;
					that.activeName = res[0].nickname;
					that.params.mpoint = res[0].id;
					that.apiObj = that.$API.enm.mplogx;
					if(this.route_code =='zlybcl'){
						let obj = {name:'折线图',nickname:'折线图',id:'666'};
						that.mpointList.push(obj);
						that.chartData();
						that.handleClick1();
					}else{
						that.handleClick();
					}
				}else{
					that.$message.error("该设备没有监测点");
				}
			})
		},
		handleClick(val){
			let that = this;
			that.option.xAxis.data = [];
			that.option.series[0].data = [];
			that.mpointList.forEach(item=>{
			    if(item.nickname == that.activeName){
					that.query.mpoint = item.id;
					that.query.page = 1;
					that.option.title.text = that.activeName;
					let params = {};
					params.mpoint = item.id;
					params.timex__gte = that.startTime;
					params.timex__lte = that.endTime;
					params.page = 0;
					that.$API.enm.mplogx.req(params).then((res) => {
						let xAxisData = [],seriesData = [];
						res.forEach(item=>{
							xAxisData.unshift(item.timex);
							let value = Number(item.val_float).toFixed(3);
							seriesData.unshift(value);
						})
						let minNum =  seriesData.reduce((a, b) => a < b ? a : b);
						let maxNum = Math.max(...seriesData);
						that.option.yAxis.min = minNum;
						that.option.yAxis.max = maxNum;
						that.option.xAxis.data = xAxisData;
						that.option.series[0].data = seriesData;
					})
				}
			})
		},
		handleClick1(val){
			let that = this;
			that.mpointList.forEach(item=>{
			    if(item.nickname == that.activeName){
					that.query.mpoint = item.id;
					that.query.page = 1;
				}
			})
		},
		chartData(){
			let that = this;
			const promises = that.mpointList.map(item => {
				if (item.name !== '折线图') {
					let params = {
						mpoint: item.id,
						timex__gte: that.startTime,
						timex__lte: that.endTime,
						page: 0
					};
					return that.$API.enm.mplogx.req(params);
				}
			});
			Promise.all(promises).then(responses => {
				that.option.xAxis.data = [];
				that.option.series.data = [];
				let minNum = null,maxNum = 0,series = [];
				responses.forEach((res,index) => {
					if(res!==undefined){
						let minNum0=0,maxNum0=0,seriesData = [],xAxisData = [];
						res.forEach(item=>{
							xAxisData.unshift(item.timex);
							let value = Number(item.val_float);
							seriesData.unshift(value);
						})
						that.option.xAxis.data = xAxisData;
						minNum0 =  seriesData.reduce((a, b) => a < b ? a : b);
						minNum = minNum === null ? minNum0 : Math.min(minNum,minNum0);
						maxNum0 = Math.max(...seriesData);
						maxNum = Math.max(maxNum,maxNum0);
						series.push({
							name: that.mpointList[index].nickname,
							type: "line",
							data: seriesData,
						})
					}
				});
				that.option.yAxis.min = minNum;
				that.option.yAxis.max = maxNum;
				that.option.series = series;
			}).catch(error => {
				console.error('Error:', error);
			});
		},
	},
};
</script>

<style scoped>
.file_show{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	background: rgb(255,255,255);
	z-index: 999;
}
</style>