单井巡查5种模式合并，相互切换，并保留最后一次的模式

src/api/wellPatrol.js

@@ -1,4 +1,4 @@
-import request from '../utils/request';
+import request from '../utils/request'
 
 const api={}
 
@@ -73,4 +73,29 @@ api.loadGrpCurveData=(wellId,paramCode,startDate,endDate)=>{
 	});
 }
 
+api.modeMenus=[
+		{
+			title:'标准模式',
+			url:'single/WellPatrolStd.vue'
+		},
+		{
+			title:'图表模式',
+			url:'single/WellPatrolDiagramHistab.vue'
+		},
+		{
+			title:'参数模式',
+			url:'single/WellPatrolParams.vue'
+		},
+		{
+			title:'图曲线模式',
+			url:'single/WellPatrolDiagramGrpCurve.vue'
+		},
+		{
+			title:'混合模式',
+			url:'single/WellPatrolMix.vue'
+		}
+	]
+
+
+
 export  default api

src/components/noticeBar/NoticeBar.vue

@@ -95,7 +95,7 @@
 	
 	const loadAlarm=()=>{
 		noticeBarAPI.loadAlarms().then(resp=>{
-			console.log(resp)
+			//console.log(resp)
 			if(resp.code!=0 || !resp.data){
 				alarmList.value=[]
 			}

src/pages/Home.vue

@@ -8,7 +8,7 @@
 			<el-tabs type="card" v-model="activeTab" closable class="tabWrap" @tab-remove="removeTabHandle">
 				 <el-tab-pane v-for="(item, index) in menuTabs" :key="item.name" :label="item.title" :name="item.name">
 					<transition name="fade">
-						<component :is="item.content"/>
+						<component :is="item.content" :replaceTab="replaceMenuComp"/>
 					</transition>
 					
 				 </el-tab-pane>
@@ -53,10 +53,17 @@
 		  store.addTab(newMenu)
 		  return
 	  }
-	  const preImp = menuModules[`./${newMenu.menuLink}`]
 	  
-	  //console.log(newMenu.menuLink)
-	 
+	  //单井巡查菜单特殊处理
+	  if(newMenu.menuLink.indexOf('WellPatrolStd.vue')>0 ){
+		  let prePatrol=app.takeSetting('singlePatrol')
+		  //替换为上次的单井巡查模式
+		  if(prePatrol){
+			  newMenu.menuLink=prePatrol
+		  }
+	  }
+	  
+	  const preImp = menuModules[`./${newMenu.menuLink}`]
 	  preImp().then(component => {
 		   newMenu["content"]=markRaw(component.default)
 		   store.addTab(newMenu)
@@ -65,18 +72,23 @@
 	   })
 	   
 	   
-	  /*
-	  loadMenuPage(newMenu.menuLink).then(component => {
-		   newMenu["content"]=markRaw(component.default)
-		   store.addTab(newMenu)
-	   }).catch(e=>{
-		   console.log(e)
-	   })*/
-	   
 	   
    })
    
+  
    
+   //更换当前窗口里的组件（单井模式切换）
+   const replaceMenuComp=(menuLink)=>{
+	   let tab=store.getTab(activeTab.value)
+	   if(!tab){
+		  return 
+	   }
+	   const preImp = menuModules[`./${menuLink}`]
+	   preImp().then(component => {
+		   tab['content']=markRaw(component.default)
+	   })
+	   app.putSetting('singlePatrol',menuLink)
+   }
    
    const router = useRouter()
    

src/pages/single/WellPatrolDiagramGrpCurve.vue

@@ -3,6 +3,17 @@
 		<div class="top">
 			<span>{{crtWell.name||'还未选择井'}}</span>
 			<!-- <div class="top-right"></div> -->
+			<el-dropdown @command="switchMode" style="float:right;">
+			      <el-button  >
+			        模式切换<el-icon class="el-icon--right"><arrow-down /></el-icon>
+			      </el-button>
+			      <template #dropdown>
+			        <el-dropdown-menu>
+			          <el-dropdown-item v-for="(menu,index) in modeMenus" :key="index" :command="index">{{menu.title}}</el-dropdown-item>
+			         
+			        </el-dropdown-menu>
+			      </template>
+			</el-dropdown>
 		</div>
 		
 		<div class="diagram-box">
@@ -64,6 +75,18 @@
 	import '@/assets/css/ContextMenu.css'
 	import { ContextMenu, ContextMenuGroup, ContextMenuSeparator, ContextMenuItem } from '@imengyu/vue3-context-menu'
 	
+	const props=defineProps({
+		replaceTab:Function
+	})
+	
+	//模式切换菜单配置
+	const modeMenus=ref(wellPatrolAPI.modeMenus.filter(menu=>menu.url.indexOf('WellPatrolDiagramGrpCurve')<0))
+	const switchMode=(command)=>{
+		let url=modeMenus.value[command].url
+		props.replaceTab(url)
+	}
+	
+	//模式切换菜单配置-结束
 	
 	let {proxy} = getCurrentInstance()
 	//右键菜单配置

src/pages/single/WellPatrolDiagramHistab.vue

@@ -3,6 +3,17 @@
 		<div class="top">
 			<span>{{crtWell.name}}</span>
 			<!-- <div class="top-right"></div> -->
+			<el-dropdown @command="switchMode" style="float:right;">
+			      <el-button  >
+			        模式切换<el-icon class="el-icon--right"><arrow-down /></el-icon>
+			      </el-button>
+			      <template #dropdown>
+			        <el-dropdown-menu>
+			          <el-dropdown-item v-for="(menu,index) in modeMenus" :key="index" :command="index">{{menu.title}}</el-dropdown-item>
+			         
+			        </el-dropdown-menu>
+			      </template>
+			</el-dropdown>
 		</div>
 		
 		<div class="diagram-box">
@@ -75,8 +86,21 @@
 	import '@/assets/css/ContextMenu.css'
 	import { ContextMenu, ContextMenuGroup, ContextMenuSeparator, ContextMenuItem } from '@imengyu/vue3-context-menu'
 	
+	const props=defineProps({
+		replaceTab:Function
+	})
 	
 	let {proxy} = getCurrentInstance()
+	
+	//模式切换菜单配置
+	const modeMenus=ref(wellPatrolAPI.modeMenus.filter(menu=>menu.url.indexOf('DiagramHistab')<0))
+	const switchMode=(command)=>{
+		let url=modeMenus.value[command].url
+		props.replaceTab(url)
+	}
+	//模式切换菜单配置-结束
+	
+	
 	//右键菜单配置
 	const ctxmenuOpts=reactive({
 		show:false,

src/pages/single/WellPatrolMix.vue

@@ -8,7 +8,22 @@
 		
 		<div class="diagram-box">
 			<div class="single-box">
-				<div class="single-header">{{crtWell.name?(crtWell.name+'生产主要参数'):'还未选择井'}}</div>
+				<div class="single-header">
+					<label>{{crtWell.name?(crtWell.name+'生产主要参数'):'还未选择井'}}</label>
+					<div class="single-header-switch">
+						<el-dropdown @command="switchMode">
+						      <el-button  size="small">
+						        模式切换<el-icon class="el-icon--right"><arrow-down /></el-icon>
+						      </el-button>
+						      <template #dropdown>
+						        <el-dropdown-menu>
+						          <el-dropdown-item v-for="(menu,index) in modeMenus" :key="index" :command="index">{{menu.title}}</el-dropdown-item>
+						         
+						        </el-dropdown-menu>
+						      </template>
+						    </el-dropdown>
+					</div>
+				</div>
 				<div class="single-body">
 					<div class="param-block" v-for="(param,index) in singleParams">
 					  <div class="param-tit">{{param.paramName}}</div>
@@ -75,8 +90,21 @@
 	import '@/assets/css/ContextMenu.css'
 	import { ContextMenu, ContextMenuGroup, ContextMenuSeparator, ContextMenuItem } from '@imengyu/vue3-context-menu'
 	
+	const props=defineProps({
+		replaceTab:Function
+	})
 	
 	let {proxy} = getCurrentInstance()
+	
+	//模式切换菜单配置
+	const modeMenus=ref(wellPatrolAPI.modeMenus.filter(menu=>menu.url.indexOf('WellPatrolMix')<0))
+	const switchMode=(command)=>{
+		let url=modeMenus.value[command].url
+		props.replaceTab(url)
+	}
+	
+	//模式切换菜单配置-结束
+	
 	//右键菜单配置
 	const ctxmenuOpts=reactive({
 		show:false,
@@ -366,6 +394,12 @@
 		text-align: center;
 		background-color: #f2f2f2;
 		padding:5px;
+		height:24px;
+		
+	}
+	.single-header-switch{
+		float:right;
+		/* margin-right:10px; */
 	}
 	.single-body{
 		display: grid;

src/pages/single/WellPatrolParams.vue

@@ -2,7 +2,20 @@
 	<div class="page-container">
 		<div class="top">
 			<label v-if="!crtWell.id">请选择井</label>
-			<div class="param-block" style="font-weight: bolder;">{{crtWell.name}}</div>
+			<div class="param-block" style="font-weight: bolder;">
+				<div class="param-tit">{{crtWell.name}}</div>
+				<el-dropdown @command="switchMode">
+				      <el-button  >
+				        模式切换<el-icon class="el-icon--right"><arrow-down /></el-icon>
+				      </el-button>
+				      <template #dropdown>
+				        <el-dropdown-menu>
+				          <el-dropdown-item v-for="(menu,index) in modeMenus" :key="index" :command="index">{{menu.title}}</el-dropdown-item>
+				         
+				        </el-dropdown-menu>
+				      </template>
+				</el-dropdown>
+			</div>	
 			<div class="param-block" v-for="(param,index) in tabParams" @contextmenu="showCtxMenu($event,param)">
 			  <div class="param-tit">{{param.paramName}}</div>
 			  <div class="param-val" :class="{'param-val-alarm':patrolAlarm[param.paramCode]}"  :title="patrolAlarm[param.paramCode]?.alarmDesc">{{patrolData[param.paramCode]}}</div>
@@ -67,6 +80,19 @@
 	import '@/assets/css/ContextMenu.css'
 	import { ContextMenu, ContextMenuGroup, ContextMenuSeparator, ContextMenuItem } from '@imengyu/vue3-context-menu'
 	
+	const props=defineProps({
+		replaceTab:Function
+	})
+	
+	//模式切换菜单配置
+	const modeMenus=ref(wellPatrolAPI.modeMenus.filter(menu=>menu.url.indexOf('WellPatrolParams')<0))
+	const switchMode=(command)=>{
+		let url=modeMenus.value[command].url
+		props.replaceTab(url)
+	}
+	
+	//模式切换菜单配置-结束
+	
 	let {proxy} = getCurrentInstance()
 	//右键菜单配置
 	

src/pages/single/wellPatrol.vue → src/pages/single/WellPatrolStd.vue

@@ -30,6 +30,17 @@
 			
 			<div class="wellName" v-else-if="elModel.elType=='wellName'" :style="{width:elModel.width+'px','line-height':elModel.height+'px',height:elModel.height+'px',left:elModel.left+'px',top:elModel.top+'px'}" @contextmenu="showCtxMenu($event,{elType:'wellName'})">
 				{{elDataObj[elModel.paramCode]}}<span style="font-size:12px;color:#666;margin-left:5px;" :title="elDataObj.status">{{elDataObj.status}}</span>
+				<el-dropdown @command="switchMode">
+				      <el-button  size="small">
+				        模式切换<el-icon class="el-icon--right"><arrow-down /></el-icon>
+				      </el-button>
+				      <template #dropdown>
+				        <el-dropdown-menu>
+				          <el-dropdown-item v-for="(menu,index) in modeMenus" :key="index" :command="index">{{menu.title}}</el-dropdown-item>
+				         
+				        </el-dropdown-menu>
+				      </template>
+				    </el-dropdown>
 			</div>
 		</template>
 	
@@ -81,6 +92,19 @@
 	import '@/assets/css/ContextMenu.css'
 	import { ContextMenu, ContextMenuGroup, ContextMenuSeparator, ContextMenuItem } from '@imengyu/vue3-context-menu'
 	
+	const props=defineProps({
+		replaceTab:Function
+	})
+	
+	//模式切换菜单配置
+	const modeMenus=ref(wellPatrolAPI.modeMenus.filter(menu=>menu.url.indexOf('WellPatrolStd')<0))
+	const switchMode=(command)=>{
+		let url=modeMenus.value[command].url
+		props.replaceTab(url)
+	}
+	//模式切换菜单配置-结束
+	
+	
 	let {proxy} = getCurrentInstance()
 	
 	//右键菜单配置

src/store/home.js

@@ -46,6 +46,10 @@ export const useHomeStore = defineStore('home', {
 	  existTab(tabId){
 		let existAry=this.menuTabs.filter((item) => item.name ==tabId)
 		return existAry.length>0
+	  },
+	  getTab(tabId){
+		  let tabs=this.menuTabs.filter((item) => item.name ==tabId)
+		  return tabs?tabs[0]:null
 	  }
   }
 })

src/utils/request.js

@@ -9,7 +9,7 @@ axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded
 //axios  默认发送数据采用 application/json，传参用params，实际用的是get请求参数附加到url后，用data传参，参数放在request boy中
 const service = axios.create({
     baseURL:import.meta.env.VITE_API_PATH,    //http://127.0.0.1:8080/zl  //http://42.56.120.92:9602/zl-opd-server
-    timeout: 8000
+    timeout: 15000
 });
 
 service.interceptors.request.use(