增加多井巡查模块

src/api/multiPatrol.js

@@ -0,0 +1,13 @@
+import request from '../utils/request';
+
+const api={}
+
+api.getMultiTemp=(orgId)=>{
+	return request({
+	    url: '/multipatrol/getOrgTemp',
+	    method: 'post',
+		data:  {orgId}
+	});
+}
+
+export  default api

src/components/crudtable/PatrolTable.vue

@@ -0,0 +1,188 @@
+<template>
+	<div class="tab-container">
+		<div class="tab-toolbar">
+			<div class="tool-group">
+				<el-button-group>
+					<slot name="toolGroup"></slot>
+				</el-button-group>
+			</div>
+			<slot name="toolMid"></slot>
+			<div style="flex:1"></div>
+			<el-icon class="is-loading" v-show="isLoading"><loading/></el-icon>
+			<el-pagination
+			      v-model:current-page="pagination.currentPage"
+			      v-model:page-size="pagination.pageSize"
+			      :page-sizes="pageSizeOpts"
+			      :small="false"
+			      :disabled="false"
+			      :background="false"
+			      :layout="pageInfoOpts"
+			      :total="pagination.totalRows"
+			      
+			/>
+		</div>
+		
+		<div class="tab-main">
+			<el-table :data="tableDatas" style="width: 100%;height:100%;"  border stripe highlight-current-row v-bind="$attrs">
+			     <slot name="tabColumns" :index-generate="indexGenerate"></slot>
+			</el-table>
+		</div>
+		
+	</div>
+</template>
+
+<script setup>
+	import {reactive,ref,onMounted,toRaw,watch} from 'vue'
+	import request from '../../utils/request'
+	import { ElMessage } from "element-plus"
+	
+	
+	
+	const props=defineProps({
+		pageSize:Number,
+		pageSizeOpts:{
+			type:Array,
+			default:[5,20,50,100]
+		},
+		pageInfoOpts:String,
+		url:String,
+		datas:Array,
+		initWhere:Object,
+		autoLoad:{
+			type:Boolean,
+			default:true
+		},
+		beforeBindData:Function,
+		autoTurnPageInterval:Number
+	})
+	
+	const pagination=reactive({
+		currentPage:1,
+		pageSize:props.pageSize||5,
+		totalRows:0,
+		pageCount:1,
+		watchReload:true //通过监听器重载
+	})
+	
+	const isLoading=ref(false)
+	const tableDatas=ref([])
+	
+	
+	onMounted(()=>{
+		
+		if(props.url&&props.autoLoad){
+			query()
+		}
+		else{
+			tableDatas.value=props.datas
+		}
+	})
+	
+	let _queryParam={}
+	
+	
+	
+	//只监听翻页、页size更改
+	watch([
+		()=>pagination.currentPage,
+		()=>pagination.pageSize,
+	],
+	   ([newcp,newpz],[oldcp,oldpz])=>{
+		
+		if(pagination.watchReload){
+			load(_queryParam)
+		}
+		
+		
+	})
+	
+	let getReqParam=(queryParams)=>{
+		
+		return Object.assign({},props.initWhere,toRaw(pagination),queryParams)
+		
+	}
+	
+	const getPageInfo=()=>{
+		return toRaw(pagination)
+	}
+	
+	const query=(queryParams)=>{
+		pagination.watchReload=false
+		pagination.currentPage=1  //新的查询页码重置为1,禁止通过监听自动查询，手动查询，便于外部接收查询状态
+		return load(queryParams)
+	} 
+	
+	const load=async (queryParams)=>{
+		//console.log('query...')
+		isLoading.value=true
+		try{
+			let resp=await request({url: props.url,method: 'post',data: getReqParam(queryParams)})
+			isLoading.value=false
+			console.log(resp)
+			pagination.watchReload=true				
+			//pagination.currentPage=resp.currentPage
+			
+			if(resp.code===0){
+				tableDatas.value=props.beforeBindData?props.beforeBindData(resp.data.data):resp.data.data
+				pagination.totalRows=resp.data.totalRow
+				pagination.pageCount = resp.data.pageCount
+				_queryParam=queryParams||{}
+				
+				return 0
+			}
+			else{
+				ElMessage.error(resp.msg||"加载数据失败");
+				return -1
+			}
+			
+		}
+		catch (e) {
+			pagination.watchReload=true
+			isLoading.value=false
+			ElMessage.error("加载数据失败");
+		    console.log(e)
+			return -1
+		}
+		
+	}
+	
+	const indexGenerate=(index)=>{
+		return (pagination.currentPage-1) * pagination.pageSize + index + 1
+	}
+		
+	
+	
+	defineExpose({
+		query,
+		getPageInfo
+		
+	})
+	
+	
+</script>
+
+<style scoped>
+	.tab-container{
+		height:100%;
+	}
+	.tab-toolbar{
+		height:50px;
+		padding:10px 10px;
+		box-sizing: border-box;
+		background-color: #f0f9ff;
+		display: flex;
+		justify-content:space-between;
+		border:1px solid #e3f1f8;
+		border-bottom:0px;
+	}
+	
+	.tab-toolbar .is-loading{
+		margin:8px 20px;
+	}
+	
+	.tab-main{
+		height: calc(100% - 50px);
+	}
+	
+	
+</style>

src/pages/multi/multiPatrol.vue

@@ -1,9 +1,203 @@
 <template>
-	<div>多井数据</div>
+	<div class="qpage" @click="contextmenu.hide()">
+		<h4 style="margin:0px auto 10px;text-align: center;height:20px">{{crtOrg}}</h4>
+		<div class="qpage-body">
+			<PatrolTable 
+			ref="patrolTable"
+			page-info-opts="total, prev, pager, next,sizes"
+			url="/multipatrol/loadPatrolWell"
+			:autoLoad="false"
+			:pageSize="20"
+			@cell-contextmenu="cellContextmenuHandle"
+			:beforeBindData="beforeBindDataHandle"
+			>
+			
+			  <template #tabColumns={indexGenerate}>
+				  <el-table-column type="index" :index="indexGenerate" label="序号" width="60" align="center" fixed="left"/>
+				 
+				  <el-table-column v-for="(col, index) in tableHead"
+				  	:key="index"
+				  	:prop="col.paramCode"
+				  	:align="col.align || 'center'"
+				  	:width="col.width || 100"
+				  	:label="col.paramName"
+				  	:fixed="col.fixed"
+				  	
+				  >
+					<template #default="scope">
+					  
+						<el-tooltip  trigger="hover" placement="top" width="auto" :disabled="!(scope.row[col.paramCode]?.alarm)"
+						 effect="dark" :content="scope.row[col.paramCode]?.alarm"
+						>
+						<div class="val-cell" :class="{'alarm-cell':(scope.row[col.paramCode]?.alarm)}">{{scope.row[col.paramCode]?.val}}</div>
+						</el-tooltip>
+					</template>
+					
+				  </el-table-column>
+			  </template>
+				
+			</PatrolTable>
+		</div>
+		
+		<template>
+		  <Contextmenu ref="contextmenu">
+		    <ContextmenuItem @click="ctxtMenuClickHandle($event,'ParamAlarmDefine','报警设置')">报警设置</ContextmenuItem>
+		    <ContextmenuItem @click="ctxtMenuClickHandle($event,'ParamHisData','历史数据')">历史数据</ContextmenuItem>
+		    <ContextmenuItem @click="ctxtMenuClickHandle($event,'ParamHisCurve','历史曲线')">历史曲线</ContextmenuItem>
+		  </Contextmenu>
+		</template>
+		
+		<el-dialog v-model="dialogCtr.show" :title="dialogCtr.title" :close-on-click-modal="false" :destroy-on-close="true" width="70%">
+			<component :is="dialogInnerComp[dialogCompKey]" :ctxObj="ctxcell"></component>
+			<template #footer>
+				<el-button @click="dialogCtr.show=false">关闭</el-button>
+			</template>
+		</el-dialog>
+		
+	</div>
 </template>
 
-<script>
+<script setup>
+	import {reactive,ref,watch,onMounted} from 'vue'
+	import PatrolTable from '../../components/crudtable/PatrolTable.vue'
+	import ColumnFun from '../../components/crudtable/ColumnFun.vue'
+	import { storeToRefs } from 'pinia'
+	import { useHomeStore } from '../../store/home.js'
+	import multiPatrolAPI from '../../api/multiPatrol.js'
+	import {ElMessageBox,ElMessage} from 'element-plus'
+	import ParamAlarmDefine from '../alarm/ParamAlarmDefine.vue'
+	import ParamHisData from '../single/ParamHisData.vue'
+	import ParamHisCurve from '../single/ParamHisCurve.vue'
+	
+	
+	import { directive, Contextmenu, ContextmenuItem } from 'v-contextmenu';
+	import 'v-contextmenu/dist/themes/default.css'
+	
+	const patrolTable=ref(null)
+	
+	const contextmenu=ref(null)
+	
+	const store=useHomeStore()
+	const  {currentTreeNode} = storeToRefs(store)
+	
+	const crtOrg=ref(null)
+	
+	const tableHead=ref([])
+	
+	const dialogCtr=reactive({
+		show:false,
+		title:'查看窗口',
+		
+	})
+	
+	const dialogInnerComp={
+		ParamAlarmDefine,
+		ParamHisData,
+		ParamHisCurve
+	}
+	
+	const dialogCompKey=ref(null)
+	
+	const getOrgInfo=(orgId)=>{
+		multiPatrolAPI.getMultiTemp(orgId).then(resp=>{
+			console.log(resp)
+			if(resp.code!=0){
+				ElMessage.error(resp.msg||'获取井站信息失败')
+				return
+			}
+			tableHead.value=JSON.parse(resp.data.tempContent)
+		}).catch(err=>{
+			ElMessage.error(err||'获取井站信息失败')
+		})
+	}
+	
+	watch(currentTreeNode,(newNode, oldNode)=>{
+			if(newNode&&newNode.nodeType=='org'){
+				crtOrg.value=newNode.name
+				tableHead.value=[]
+				getOrgInfo(newNode.id)
+				setTimeout(()=>{patrolTable.value.query({orgId:newNode.id})},100)
+			}
+	},{ immediate: true })
+	
+	const ctxcell=reactive({
+		wellName:null,
+		wellId:null,
+		paramCode:null,
+		paramName:null,
+		paramId:null
+	})
+	
+	const cellContextmenuHandle=(row, column, cell, event)=>{
+		event.preventDefault()
+		contextmenu.value.hide()
+		if(column.type=='index'||'time;status;wellName'.indexOf(column.property)>=0){
+			return
+		}
+		
+		contextmenu.value.show({top:event.pageY,left:event.pageX})
+		ctxcell.wellId=row.wellId.val
+		ctxcell.wellName=row.wellName.val
+		ctxcell.paramCode=column.property
+		ctxcell.paramName=column.label
+	}
+	
+	const ctxtMenuClickHandle=(event,action,actionName)=>{
+		dialogCompKey.value=action
+		dialogCtr.title=`${actionName}【${ctxcell.wellName}】`
+		dialogCtr.show=true
+		
+	}
+	
+	const parseCellVal=(valStr)=>{
+		//console.log(valStr)
+		if(valStr){
+			return valStr.split(";")
+		}
+		return []
+	}
+	
+	const beforeBindDataHandle=(datas)=>{
+		datas.forEach(data=>{
+			for(let key in data){
+				//console.log(data)
+				if(data[key]!=null){
+					let [val,grade,alarm]=(data[key].toString()).split(';')
+					if(key=="casing_press"){
+						alarm='套压过高'
+					}
+					data[key]={val,grade,alarm}	
+				}
+				//console.log(data) 
+			}
+		})
+		return datas
+	}
+	
 </script>
 
-<style>
+<style scoped>
+	@import url('../../assets/css/qpage.css');
+	.v-contextmenu-item{
+		padding:8px 20px;
+	}
+	
+	.alarm-cell{
+		 background-color: #ff0000 !important;
+	}
+	
+	.val-cell{
+		/* background-color: #ff0000; */
+		line-height:24px;
+	}
+	.qpage-body:deep(.el-popper.is-customized) {
+	  /* Set padding to ensure the height is 32px */
+	  padding: 6px 12px;
+	  background: linear-gradient(90deg, rgb(159, 229, 151), rgb(204, 229, 129));
+	}
+	
+	.qpage-body:deep(.el-popper.is-customized .el-popper__arrow::before) {
+	  background: linear-gradient(45deg, #b2e68d, #bce689);
+	  right: 0;
+	}
 </style>