增加多井功图对比模块，功图对比绘制调整（支持颜色自定义，模糊时间查询）

src/api/multiDiagram.js

@@ -18,4 +18,12 @@ api.loadMultiDiagram=(reqData)=>{
 	});
 }
 
+api.loadMultiRefDrawData=(reqData)=>{
+	return request({
+	    url: '/diagram/getMultiRefDrawData',
+	    method: 'post',
+		data:  reqData
+	});
+}
+
 export  default api

src/components/diagram/lib/line.js

@@ -2,7 +2,7 @@ function Line(opts){
 	opts=opts||{};
 	this.id=null;
 	this.smpTime=opts.smpTime;
-	this.color="#000000";
+	this.color=opts.color||"#000000";
 	this.title=null;
 	this.weight=1;
 	this.type=opts.type||"GT";

src/components/diagram/lib/linegroup.js

@@ -28,11 +28,16 @@ LineGroup.prototype={
 		this.yMin=this.lineAry[0].yMin;
 		this.xMax=this.lineAry[0].xMax;
 		this.xMin=this.lineAry[0].xMin;
-		this.lineAry[0].color=this.colorAry[0];
+		if(!this.lineAry[0].color){
+			this.lineAry[0].color=this.colorAry[0];
+		}
+		
 		var clen=this.colorAry.length;
 		for(var i=1,len=this.lineAry.length;i<len;i++){
+			if(!this.lineAry[i].color){
+				this.lineAry[i].color=this.colorAry[i%clen];
+			}
 			
-			this.lineAry[i].color=this.colorAry[i%clen];
 			
 			if(this.lineAry[i].yMax>this.yMax){
 	    		this.yMax=this.lineAry[i].yMax;

src/components/diagram/lib/multidiagram.js

@@ -122,7 +122,7 @@ Diagram.prototype={
 		
 		//构建曲线对象
 		diagramData.serial.forEach((item,index)=>{
-			let line=new Line({type,xUnit,yUnit,smpTime:item.smpTime})
+			let line=new Line({type,xUnit,yUnit,smpTime:item.smpTime,color:item.color})
 			line.id=index
 			line.setData(item.xvals,item.yvals)
 			this.lineGroup.addLine(line)

src/pages/multi/MultiDiagramCompare.vue

@@ -0,0 +1,220 @@
+<template>
+	<div class="page-multicompare">
+		<div class="top">
+			<div style="width:200px;"><label>井站：</label>{{crtOrg.name}}</div>
+			<el-form :inline="true" :model="queryForm" class="query-form-inline"  label-width="auto">
+			  <el-form-item label="井号(10):">
+					<el-select v-model="queryForm.selWellIdx"  placeholder="请选择油井" style="width:300px"
+					:multiple-limit="10" collapse-tags collapse-tags-tooltip :max-collapse-tags="2" multiple>
+						<el-option 
+						v-for="(well,index) in wells"
+						:key="index"
+						:label="well.wellName"
+						:value="index"
+						/>
+						
+					</el-select>
+				</el-form-item>
+				
+				<el-button type="primary" @click="startCompare">开始对比</el-button>
+			</el-form>
+			  
+			  
+			 
+		</div>
+		<div class="top" style="border-top: 1px solid #EAEAE9;">
+			<el-form-item label=" ">
+				<el-button  plain @click="addTimept">+</el-button>
+			</el-form-item>
+			<el-form-item label=" " v-for="(itm,index) in timepts" :key="index">
+				<el-date-picker
+				    v-model="itm.time"
+				    type="datetime"
+				    placeholder="选择功图时间"
+					value-format="YYYY-MM-DD HH:mm"
+					format="YYYY-MM-DD HH:mm"
+					style="width:160px"
+				/>	
+				<el-color-picker v-model="itm.color" />
+				<el-icon  size="20" color="#bfbfbf" style="cursor: pointer;" @click="delTimept(index)"><CircleCloseFilled /></el-icon>
+			</el-form-item>
+			
+		</div>
+		<div class="page-body">
+			<div class="diagram-container" v-for="(well,index) in renderWells" :key="index">
+				<MultiDiagram :id="well.wellId" :width="520" :height="280" :scale="{x:1,y:1}"  :ctx="{wellId:well.wellId,paramCode:'diagram_load'}" :data="loadDiagramData"/>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup>
+	import {reactive,ref,watch,onMounted, nextTick} from 'vue'
+	import { storeToRefs } from 'pinia'
+	import { useHomeStore } from '../../store/home.js'
+	import {ElMessage} from 'element-plus'
+	import MultiDiagram from '../../components/diagram/MultiDiagram.vue'
+	
+	import multiSortAPI from '../../api/multiSort.js'
+	import api from '../../api/multiDiagram.js'
+	
+	const crtOrg=reactive({})
+	const wells=ref([])
+
+	const timepts=ref([]) //选择的时间点
+	
+	const renderWells=ref([])
+	
+	const queryForm=reactive({
+		selWellIdx:null
+	})
+	
+	/* const diagramCtx=reactive({
+		wellId:null,
+		wellName:null,
+		paramCode:'diagram_load'
+	}) */
+	
+	const loadDiagramData=(reqData)=>{
+		//console.log(reqData)
+		if(!timepts.value ){
+			return
+		}
+		let times=[],colors=[]
+		timepts.value.forEach((item)=>{
+			times.push(item.time+':00')
+			colors.push(item.color)
+		})
+		reqData['refTimes']=times.join(",")
+		reqData['colors']=colors.join(",")
+		
+		return api.loadMultiRefDrawData(reqData)
+	}
+	
+	const loadWells=(orgId)=>{
+		multiSortAPI.loadWells(orgId,100).then(resp=>{
+			if(resp.code!=0){
+				ElMessage.error(resp.msg)
+				return
+			}
+			wells.value=resp.data.data
+			
+		}).catch(err=>{
+			console.log(err)
+		})
+	}
+	
+	const addTimept=()=>{
+		if(timepts.value && timepts.value.length>=5){
+			ElMessage.error('对比时间点不能超过5个')
+			return
+		}
+		timepts.value.push({time:null,color:'#409EFF'})
+	}
+	
+	const delTimept=(idx)=>{
+		timepts.value.splice(idx,1)
+	}
+	
+	const startCompare=()=>{
+		//console.log(queryForm.selWellIdx)
+		if(queryForm.selWellIdx==null || queryForm.selWellIdx.length<=0){
+			ElMessage.error('未选择任何井')
+			return
+		}
+		if(timepts.value.length==0){
+			ElMessage.error('未选择任何对比时间点')
+			return
+		}
+		let mpidx={}
+		let sameChk=timepts.value.every((item)=>{
+			let rst=mpidx[item.time] || mpidx[item.color]
+			if(rst){
+				return false
+			}
+			else{
+				mpidx[item.time]=true
+				mpidx[item.color]=true
+				return true
+			}
+		})
+		
+		if(!sameChk){
+			ElMessage.error('对比时间点、颜色不应重复')
+			return
+		}
+		
+		renderDiagram()
+	}
+	
+	const renderDiagram=()=>{
+		let rdws=queryForm.selWellIdx.map((val)=>{
+			return wells.value[val]
+		})
+		
+		renderWells.value=[]
+		nextTick(()=>{
+			renderWells.value=rdws
+		})
+		
+		
+	}
+	
+	const store=useHomeStore()
+	const  {currentTreeNode} = storeToRefs(store)
+	watch(currentTreeNode,(newNode, oldNode)=>{
+			if(newNode&&newNode.nodeType=='org'){
+				crtOrg.id=newNode.id
+				crtOrg.name=newNode.name
+				
+				loadWells(newNode.id)
+			}
+	},{ immediate: true })
+</script>
+
+<style scoped>
+	.page-multicompare{
+		width:100%;
+		height: 100%;
+		box-sizing: border-box;
+		display: flex;
+		flex-flow:column nowrap;
+		
+	}
+	
+	.top{
+		height:30px;
+		line-height: 30px;
+		padding:10px;
+		background-color:#f0f9ff;
+		font-size: 14px;
+		display: flex;
+		flex-flow:row nowrap;
+		align-items: center;
+		justify-content: flex-start;
+	}
+	
+	.top label{
+		color:#555;
+	}
+	.el-form-item{
+		margin-bottom:0px;
+	}
+	
+	.page-body{
+		padding:20px;
+		flex:1;
+		display: grid;
+		grid-template-columns:repeat(auto-fill, 520px);
+		grid-template-rows:repeat(auto-fill, 280px);
+		grid-gap: 20px;
+		justify-content:center;
+		/* height: calc(100% - 50px); */
+		overflow: auto;
+	}
+	.diagram-container{
+		width:520px;
+		height:280px;
+		border:1px solid #d2d2d2;
+	}
+</style>