增加工况分析图管理模块

src/api/analysisDiagram.js

@@ -0,0 +1,25 @@
+import request from '../utils/request';
+
+const api={}
+
+api.add = (formData) => {
+	    return request({
+	        url: '/analysis/diagram/add',
+	        method: 'post',
+			data:  formData
+	    });
+}
+
+api.del = (id) => {
+	    return request({
+	        url: '/analysis/diagram/delete',
+	        method: 'post',
+			data:  {id}
+	    });
+}
+
+api.getBasePath=()=>{
+	return request.defaults.baseURL
+}
+
+export  default api

src/pages/analysis/AnalysisDiagram.vue

@@ -0,0 +1,213 @@
+<template>
+	<div class="qpage">
+		<el-form :inline="true" :model="queryForm" class="query-form-inline"  label-width="auto">
+		  <el-form-item label="井名">
+		   <div style="width:160px;">{{queryForm.wellName}}</div>
+		  </el-form-item>
+		  <el-form-item label="月份">
+		    <el-date-picker
+		            v-model="queryForm.months"
+		            type="monthrange"
+		            start-placeholder="开始月份"
+		            end-placeholder="截止月份"
+		            value-format="YYYY-MM"
+		    		
+		    	/>
+		  </el-form-item>
+		  <el-form-item>
+		    <el-button type="primary" :loading="isQuerying" @click="queryHandle">检索</el-button>
+		  </el-form-item>
+		  
+		  
+		  <el-image-viewer 
+				:hide-on-click-modal="true"
+				v-if="imageViewerCfg.show"
+				:url-list="imageViewerCfg.previewImg"
+				@close="imgViewerClose"
+		  />
+		</el-form>
+		
+		<div class="qpage-body">
+			<CrudTable 
+			ref="crudTable"
+			page-info-opts="total, prev, pager, next,sizes"
+			url="/analysis/diagram/query"
+			:autoPageSize="true"
+			
+			>
+			  <template #toolGroup>
+				  <el-button type="primary" icon="DocumentAdd" @click="showUploadWin">上传</el-button>
+				 
+			  </template>
+			  <template #tabColumns={indexGenerate}>
+				  <el-table-column type="index" :index="indexGenerate" label="序号" width="60" align="center"/>
+				  <el-table-column prop="wellName" label="井名" width="120" />
+				  <el-table-column prop="diagramTypeName" label="分析图类型" width="160" />
+				  <el-table-column prop="diagramMonthFmt" label="月份" width="120" />
+				  <el-table-column prop="createTime" label="上传时间" width="160" />
+				  <el-table-column prop="createBy" label="上传人" width="120" />
+				 <el-table-column prop="oper" label="操作" width="200" fixed="right">
+				  					<template #default="scope">
+				  						<div class="tool-column">
+				  							<el-button type="primary" icon="DataLine" size="small" @click="viewDiagram(scope.row)">查看</el-button>
+				  							
+				  							<el-button type="warning" icon="delete" size="small" @click="delHandle(scope.row)">删除</el-button>
+											
+				  						</div>
+				  					    
+				  					</template>
+				  </el-table-column>
+			  </template>
+				
+			</CrudTable>
+		</div>
+		
+		
+		<el-dialog v-model="popDialogShow" title="上传工况分析图" :close-on-click-modal="false"
+		:destroy-on-close="true"
+		>
+		    <AnalysisDiagramUpload ref="dialogInnerComp" :initData="{wellId:queryForm.wellId,wellName:queryForm.wellName}"/>
+			<template #footer>
+			    <span class="dialog-footer">
+			        <el-button @click="beforeCloseHandle('cancel')">取消</el-button>
+			        <el-button type="primary" @click="beforeCloseHandle('sure')">
+			         确定
+			        </el-button>
+			    </span>
+			</template>
+		</el-dialog>
+	</div>
+</template>
+
+<script setup>
+	import {reactive,ref,watch} from 'vue'
+	import CrudTable from "../../components/crudtable/CrudTable.vue"
+	import {ElMessageBox,ElMessage} from 'element-plus'
+	import AnalysisDiagramUpload from './AnalysisDiagramUpload.vue'
+	import { storeToRefs } from 'pinia'
+	import { useHomeStore } from '../../store/home.js'
+	import analysisDiagramAPI from '../../api/analysisDiagram.js'
+	
+	const crudTable=ref(null)
+	
+	const isQuerying=ref(false)
+	
+	const popDialogShow=ref(false)
+	const dialogInnerComp=ref(null)
+	
+	const queryForm = reactive({
+	  months: null,
+	  wellId: null,
+	  wellName:null
+	})
+	
+	const imageViewerCfg=reactive({
+		show:false,
+		previewImg:[]
+	})
+	
+	const imgViewerClose=()=>{
+		imageViewerCfg.show=false
+	}
+	
+	const viewDiagram=(record)=>{
+		imageViewerCfg.show=true
+		imageViewerCfg.previewImg=[analysisDiagramAPI.getBasePath()+record.diagramPath]
+	}
+	
+	const showUploadWin=()=>{
+		if(queryForm.wellId==null){
+			ElMessage.error('请先选择井，再继续')
+			return
+		} 
+		popDialogShow.value=true
+	}
+	
+	const queryHandle=()=>{
+		isQuerying.value=true
+		let {wellId,months}=queryForm
+		let [startMonth,endMonth]=months||[null,null]
+		setTimeout(()=>{
+			crudTable.value.query({wellId,startMonth,endMonth}).then(resp=>{
+				isQuerying.value=false
+			})
+		},100)
+		
+		
+	}
+	
+	
+	
+	const delHandle=(record)=>{
+		ElMessageBox.confirm(
+			'确定要删除该记录吗?',
+			'操作确认',
+			{
+				confirmButtonText:'确定',
+				cancelButtonText:'取消',
+				type: 'warning'
+			}
+		).then(()=>{
+			analysisDiagramAPI.del(record.id).then(resp=>{
+				if(resp.code!=0){
+					ElMessage.error(resp.msg)
+					return
+				}
+				ElMessage.success('操作成功')
+				queryHandle()
+				
+			}).catch(err=>{
+				ElMessage.error(err||'操作失败')
+			})
+		}).catch(()=>{
+			console.log('cancel del')
+		})
+	}
+	
+	const beforeCloseHandle=async (tag)=>{
+		if(tag==='cancel'){
+			popDialogShow.value=false
+		}
+		else{
+			try{
+				await dialogInnerComp.value.submitForm()
+				popDialogShow.value=false
+				queryHandle()
+			}
+			catch(err){
+				console.log(err)
+			}
+			
+		}
+	}
+	
+	
+	
+	const store = useHomeStore()
+	const {currentTreeNode} = storeToRefs(store)
+	watch(currentTreeNode, (newNode, oldNode) => {
+		if (newNode != null && newNode.nodeType == 'well') {
+			queryForm.wellId = newNode.id
+			queryForm.wellName = newNode.name
+			queryHandle()
+		}
+	
+	}, {
+		immediate: true
+	})
+	
+	
+	
+	
+	
+	
+	
+</script>
+
+<style scoped>
+	@import url('../../assets/css/qpage.css');
+	
+	.edit-form-item{
+		width:260px;
+	}
+</style>

src/pages/analysis/AnalysisDiagramUpload.vue

@@ -0,0 +1,172 @@
+<template>
+	<div class="edit-page">
+		<el-form :model="formModel" ref="formComp" label-position="left" label-width="auto" :inline="true" :rules="rules">
+		    <el-row :gutter="20">
+				<el-col :sm="24" :md="24">
+					<el-form-item label="井名" prop="wellName">
+					  <div style="width:120px;">{{formModel.wellName}}</div>
+					</el-form-item>
+				</el-col>
+				<el-col :sm="24" :md="12">
+					<el-form-item label="分析图类型" prop="diagramType">
+					  <el-select v-model="formModel.diagramType"  placeholder="选择类别" style="width:100%">
+					  	<el-option label="月度分析" value="month"/>
+						<el-option label="异常分析" value="exception"/>
+					  </el-select>
+					</el-form-item>
+				</el-col>
+				<el-col :sm="24" :md="12">
+					<el-form-item label="月份" prop="diagramMonth">
+					  <el-date-picker
+					          v-model="formModel.diagramMonth"
+					          type="month"
+					          value-format="YYYY-MM"
+					  		
+					  	/>
+					</el-form-item>
+				</el-col>
+			</el-row>
+		</el-form>
+		
+		<div style="margin:20px 0px;">
+			<p style="margin:10px 0px;">工况分析图<span style="font-size:12px;color:#999;">(大小不超过5M)</span></p>
+			<el-upload
+			   v-model:file-list="fileList"
+			   :action="analysisDiagramAPI.getBasePath()+'/upload/add'"
+			   :headers="{token:app.getToken()}"
+			   :data="{sort:'analysis',useFor:'工况分析图'}"
+			   list-type="picture-card"
+			   :limit="1"
+			   :on-preview="handleUploadPreview"
+			   :on-remove="handleUploadRemove"
+			   :before-upload="beforeAvatarUpload"
+			   :on-exceed="handleUploadExceed"
+			   :on-success="handleUploadSuccess"
+			   :on-error="handleUploadError"
+			   
+			 >
+			   <el-icon><Plus /></el-icon>
+			 </el-upload>
+		</div>
+	</div>
+</template>
+
+<script setup>
+	import {reactive,ref,onMounted,toRaw} from 'vue'
+	import app from '@/utils/app.js'
+	import analysisDiagramAPI from '../../api/analysisDiagram.js'
+	import {ElMessageBox,ElMessage} from 'element-plus'
+	
+	const props=defineProps({
+		initData:Object
+	})
+	
+	
+	const formComp = ref(null);
+	const formModel = reactive({
+			wellId:props.initData.wellId,
+			wellName:props.initData.wellName,
+			diagramType:null,
+			diagramMonth:null
+		})
+	
+	const rules =reactive({
+		wellName:[
+				{required:true,message:'井名还未选择',trigger:'blur'}
+			],
+		diagramType:[
+				{required:true,message:'分析图类型还未选择',trigger:'blur'}
+			],
+		diagramMonth:[
+				{required:true,message:'分析月份还未选择',trigger:'blur'}
+			]
+	})
+	
+	//上传组件配置
+	
+	const fileList = ref([])
+	
+	const handleUploadPreview=(uploadFile)=>{
+		//previewImageUrl.value = uploadFile.url
+		//previewDialogShow.value = true
+	}
+	
+	const handleUploadRemove=(uploadFile, uploadFiles)=>{
+		//console.log(uploadFile, uploadFiles)
+	}
+	
+	const handleUploadExceed=(files,uploadFiles)=>{
+		ElMessage.error('每次只能上传1个图片文件');
+	}
+	
+	const handleUploadSuccess=(resp,uploadFile,uploadFiles)=>{
+		if(resp.code!=0){
+			ElMessage.error(resp.msg);
+		}
+		console.log(resp)
+	}
+	
+	const handleUploadError=(error,uploadFile,uploadFiles)=>{
+		ElMessage.error('上传文件出错');
+	}
+	
+	const beforeAvatarUpload=(rawFile)=>{
+		//console.log(rawFile)
+		if (rawFile.type !== 'image/jpeg'&&rawFile.type !== 'image/png') {
+			ElMessage.error('请上传jpg/jpeg/png格式图片!')
+			return false
+		}
+		else if(rawFile.size / 1024 /1024  > 5){
+			ElMessage.error('单张图片不能超过5M!')
+			return false
+		}
+		
+		return true
+		
+	}
+	//上传组件配置结束
+	
+	const submitForm= async()=>{	
+		let validateRst=false
+		try{
+			validateRst = await formComp.value.validate()
+		}
+		catch(err){
+			ElMessage.error("请按要求填写数据");
+			console.log(err)
+			return Promise.reject('invalidate')
+		}
+		if(validateRst){  //验证通过，准备提交数据
+		  if(fileList.value==null||fileList.value.length==0){
+			  ElMessage.error("请先上传文件再继续");
+			  return Promise.reject('invalidate')
+		  }
+		  try{
+			    let reqData=toRaw(formModel)
+				reqData['fileId']=fileList.value[0].response.data.fileId
+				reqData['diagramMonth']=reqData['diagramMonth']+'-01'
+				let resp =await analysisDiagramAPI.add(reqData)
+				if(resp.code!=0){
+					ElMessage.error(resp.msg)
+					return Promise.reject(resp.msg)
+				}
+				ElMessage.success('操作成功')
+				return Promise.resolve('ok')
+			}
+			catch (e) {
+				ElMessage.error(e||'操作失败')
+				return Promise.reject('操作失败')
+			}
+		}
+	}
+	
+	defineExpose({
+		submitForm
+	})
+</script>
+
+<style scoped>
+	.el-col{
+		height:60px;
+	}
+</style>