zl-opd-view/src/pages/multi/multiPatrol.vue

<template>
	<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 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)
			setTimeout(()=>{patrolTable.value.query({orgId})},100)
		}).catch(err=>{
			ElMessage.error(err||'获取井站信息失败')
		})
	}
	
	watch(currentTreeNode,(newNode, oldNode)=>{
			if(newNode&&newNode.nodeType=='org'){
				crtOrg.value=newNode.name
				tableHead.value=[]
				getOrgInfo(newNode.id)
				
			}
	},{ 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 scoped>
	@import url('../../assets/css/qpage.css');
	.v-contextmenu-item{
		padding:8px 20px;
	}
	
	.alarm-cell{
		 background-color: #ff0000 !important;
		 color:#fff;
	}
	
	.val-cell{
		/* background-color: #ff0000; */
		line-height:24px;
	}
	
</style>