增加单井历史数据模块

src/pages/single/WellHisData.vue

@@ -0,0 +1,97 @@
+<template>
+	<div class="qpage">
+		<el-form :inline="true" :model="queryForm" class="query-form-inline"  label-width="auto">
+			  <el-form-item label="井名:">
+				<div style="width:150px;">{{queryForm.wellName}}</div>
+			  </el-form-item>
+			  <el-form-item label=" ">
+				<el-date-picker v-model="queryForm.dataTime" type="datetimerange" range-separator="至"
+					start-placeholder="开始时间" end-placeholder="截止时间" :unlink-panels="true"
+					value-format="YYYY-MM-DD HH:mm:ss" />
+			  </el-form-item>
+			  
+			  
+			  <el-form-item>
+				<el-button type="primary" :loading="isQuerying" @click="queryHandle">检索</el-button>
+			  </el-form-item>
+		</el-form>
+		
+		<div class="qpage-body">
+			<CrudTable 
+			ref="crudTable"
+			page-info-opts="total, prev, pager, next,sizes"
+			url="/base/device/query"
+			:pageSize="20"
+			:autoLoad="false"
+			>
+			<template #tabColumns={indexGenerate}>
+				<el-table-column type="index" :index="indexGenerate" label="序号" width="60" align="center" fixed/>
+				<el-table-column prop="dataTime" label="时间" width="160"  fixed/>
+				<el-table-column :prop="param.paramCode" :label="param.paramName" width="100" align="right" v-for="(param,index) in params" :key="index"/>
+			</template>
+			</CrudTable>
+		</div>
+	</div>
+</template>
+
+<script setup>
+	import {reactive,ref,watch,toRaw} from 'vue'
+	import {storeToRefs} from 'pinia'
+	import {useHomeStore} from '../../store/home.js'
+	import wellParamAPI from '../../api/wellParam.js'
+	import {ElMessageBox,ElMessage} from 'element-plus'
+	import CrudTable from "../../components/crudtable/CrudTable.vue"
+	
+	const isQuerying = ref(false)
+	
+	const crudTable=ref(null)
+	
+	const queryForm = reactive({
+		wellId: null,
+		wellName: null,
+		dataTime: null
+	})
+	
+	const queryHandle=()=>{
+		isQuerying.value=true
+		crudTable.value.query(queryForm).then(resp=>{
+			isQuerying.value=false
+		})
+		
+	}
+	
+	const params = ref([])
+	const store = useHomeStore()
+	const {currentTreeNode} = storeToRefs(store)
+	
+	//加载该井的参数配置信息
+	const loadWellParam = () => {
+		wellParamAPI.loadWellParam(queryForm.wellId).then(resp => {
+			//console.log(resp)
+			if (resp.code != 0) {
+				ElMessage.error(resp.msg)
+				return
+			}
+			params.value = resp.data.data.filter(param=>param.paramCode.indexOf('diagram')<0)
+			
+			
+		}).catch(err => {
+			console.log(err)
+		})
+	}
+	
+	watch(currentTreeNode, (newNode, oldNode) => {
+		if (newNode != null && newNode.nodeType == 'well') {
+			queryForm.wellId = newNode.id
+			queryForm.wellName = newNode.name
+			loadWellParam()
+		}
+	
+	}, {
+		immediate: true
+	})
+</script>
+
+<style scoped>
+	@import url('../../assets/css/qpage.css');
+</style>