单井巡查界面展示，采集数据展示

src/api/wellPatrol.js

@@ -0,0 +1,21 @@
+import request from '../utils/request';
+
+const api={}
+
+api.getTemp=(wellId)=>{
+	return request({
+	    url: '/singlepatrol/getTemp',
+	    method: 'post',
+		data:  {wellId}
+	});
+}
+
+api.loadData=(wellId)=>{
+	return request({
+	    url: '/singlepatrol/loadData',
+	    method: 'post',
+		data:  {wellId}
+	});
+}
+
+export  default api

src/components/layouttmp/LayoutEL.vue

@@ -0,0 +1,94 @@
+<template>
+	<div class="single" v-if="elModel.elType=='single'" :style="{width:elModel.width+'px',height:elModel.height+'px',left:elModel.left+'px',top:elModel.top+'px'}">
+		<div class="single-header">{{elModel.paramName}}</div>
+		<div class="single-body single-body-alarm">
+			<label class="val">{{elData?elData[elModel.paramCode]:null}}</label>
+			<label class="unit">{{elModel?.unit}}</label>
+		</div>
+	</div>
+	<div class="multi" v-else-if="elModel.elType=='multi'" :style="{width:elModel.width+'px',height:elModel.height+'px',left:elModel.left+'px',top:elModel.top+'px'}">
+		{{elModel.paramName}}
+	</div>
+	
+	<div class="wellName" v-else-if="elModel.elType=='wellName'" :style="{width:elModel.width+'px',height:elModel.height+'px',left:elModel.left+'px',top:elModel.top+'px'}">
+		{{elData?elData[elModel.paramCode]:null}}
+	</div>
+</template>
+
+<script setup>
+	import {ref,reactive,toRaw,onMounted } from 'vue'
+	
+	const props=defineProps({
+		elModel:{
+			type:Object,
+			required:true
+		},
+		elData:{
+			type:Object
+		}
+	})
+	
+</script>
+
+<style scoped>
+	.single,.multi{
+		box-sizing: border-box;
+		width: 100%;
+		height: 100%;
+		padding: 0px;
+		background-color: #d9f0ff;
+		border:1px solid #e3f1f8;
+		border-radius: 5px;
+		position: absolute;
+	}
+	.single .single-header{
+		background-color:#5085ff;
+		height: 50%;
+		
+		border-top-left-radius: 5px;
+		border-top-right-radius: 5px;
+		color:#fff;
+		text-align: center;
+		
+		font-size: 14px;
+		display: flex;
+		flex-flow: row nowrap;
+		justify-content: center;
+		align-items: center;
+	}
+	
+	.single-body-alarm{
+		background-color: #d04029;
+		color: #ffff00;
+	}
+	
+	.single-body{
+		height: 50%;
+		font-size: 16px;
+		/* padding-top: 5%; */
+		display: flex;
+		flex-flow:row nowrap;
+		align-items: center;
+	}
+	.single-body .val{
+		flex:1;
+		text-align: right;
+		padding:0px 5px;
+	}
+	.single-body .unit{
+		width:40px;
+		font-size:14px;
+		text-align: right;
+	}
+	
+	.multi{
+		text-align: center;
+		font-size: 14px;
+	}
+	
+	.wellName{
+		padding: 0px;
+		border-bottom: 1px solid #5085ff;
+		position: absolute;
+	}
+</style>

src/pages/single/wellPatrol.vue

@@ -1,9 +1,93 @@
 <template>
-	<div>单井数据</div>
+	<div class="page-container">
+		<LayoutEL v-for="(elModel,index) in tempConfig" :key="index" :elModel="elModel" :elData="elDataObj"/>
+	</div>
 </template>
 
-<script>
+<script setup>
+	import {reactive,ref,watch,toRaw,onMounted,nextTick } from 'vue'
+	import Diagram from '../../components/diagram/Diagram.vue'
+	import LayoutEL from '../../components/layouttmp/LayoutEL.vue'
+	import wellPatrolAPI from '../../api/wellPatrol.js'
+	import { storeToRefs } from 'pinia'
+	import { useHomeStore } from '../../store/home.js'
+	
+	import { directive, Contextmenu, ContextmenuItem } from 'v-contextmenu';
+	import 'v-contextmenu/dist/themes/default.css'
+	import {ElMessage} from 'element-plus'
+	
+	const tempConfig=ref([])
+	
+	const elDataObj=ref({})
+	
+	const crtWell=reactive({})
+	
+	const store=useHomeStore()
+	const  {currentTreeNode} = storeToRefs(store)
+	
+	//切换井时进行数据的重置
+	const resetPage=()=>{
+		tempConfig.value=[]
+		elDataObj.value={}
+	}
+	
+	const getTemp=(wellId)=>{
+		resetPage()
+		wellPatrolAPI.getTemp(wellId).then(resp=>{
+			//console.log(resp)
+			if(resp.code==0&&resp.data){
+				tempConfig.value=resp.data  //JSON.parse(resp.data.tempContent)
+				nextTick(()=>{
+					loadData(wellId)
+				})
+			}
+			else{
+				ElMessage.error('未找到模板数据')
+			}
+			
+		}).catch(err=>{
+			ElMessage.error(err||'获取模板信息失败')
+		})
+	}
+	
+	const loadData=(wellId)=>{
+		wellPatrolAPI.loadData(wellId).then(resp=>{
+			console.log(resp)
+			if(resp.code!=0||!resp.data){
+				ElMessage.error(resp.msg||'未获取到实时数据')
+				return
+			}
+			resp.data.wellName=crtWell.name
+			Object.assign(elDataObj.value,resp.data)
+		}).catch(err=>{
+			ElMessage.error(err||'获取实时数据失败')
+		})
+	}
+	
+	onMounted(()=>{
+		if(!crtWell.id){
+			ElMessage.error('还未选择井')
+		}
+	})
+	
+	watch(currentTreeNode,(newNode, oldNode)=>{
+			if(newNode&&newNode.nodeType=='well'){
+				crtWell.id=newNode.id
+				crtWell.name=newNode.name
+				getTemp(newNode.id)
+				
+			}
+	},{ immediate: true })
+	
+	
 </script>
 
-<style>
+<style scoped>
+	.page-container{
+		width:100%;
+		height: 100%;
+		box-sizing: border-box;
+		padding:2px;
+		position: relative;
+	}
 </style>