环路管理页面开发、接口联调

.env.development

@@ -2,8 +2,8 @@
 ENV = 'development'
 
 # 本地环境接口地址
-VITE_API_URL = 'http://101.200.198.249:8899/api/v1'
+#VITE_API_URL = 'http://101.200.198.249:8899/api/v1'
 VITE_IMG_URL = 'http://101.200.198.249:8899/'
 VITE_ASSESS_URL = 'http://zhgy.sagoo.cn/base-api/assess/v1'
-# VITE_API_URL = 'http://sgadserver.wdeveloperw.xyz/api/v1'
+VITE_API_URL = 'http://sgadserver.wdeveloperw.xyz/api/v1'
 # VITE_IMG_URL = 'http://sgadserver.wdeveloperw.xyz/'

src/api/heatStation/index.ts

@@ -4,7 +4,9 @@ export default {
   loop: {
     getList: (params: object) => get('/region/loop/list', params),
     add: (data: object) => post('/region/loop/add', data),
-    edit: (data: object) => post('/region/loop/edit', data)
+    edit: (data: object) => put('/region/loop/edit', data),
+    del: (id: number) => del('/region/loop/del', { id }),
+    detail: (id: number) => get('/region/loop/getInfoById', { id }),
   },
   heatStation: {
     getList: (params: object) => get('/region/heatStation/tree', params),

src/views/heatStation/loop/component/detail.vue

@@ -1,165 +1,200 @@
 <template>
 	<div class="system-edit-dic-container">
-		<el-dialog title="查看设备" v-model="isShowDialog" width="769px">
-			<el-form :model="ruleForm" ref="formRef" :rules="rules" size="default" label-width="110px">
-       <el-form-item label="设备标识" prop="key">
-          {{ruleForm.key}}
+		<el-dialog :title="'环路详情'" v-model="dialogVisible" width="950px">
+			<el-form :model="ruleForm" ref="formRef" size="default" label-width="110px">
+				<el-form-item label="环路名称" prop="name">
+					{{ ruleForm.name }}
+				</el-form-item>
+				<el-form-item label="环路编号" prop="code">
+					{{ ruleForm.code }}
+				</el-form-item>
+				<el-form-item label="所属换热站" prop="stationId">
+          {{ ruleForm.stationId }}
+					<!-- <el-tree-select
+						v-model="ruleForm.stationId"
+						:data="treeData"
+						:props="{
+							label: 'name',
+							children: 'children'
+						}"
+						node-key="id"
+						:clearable="true"
+						check-strictly
+						style="width: 100%;"
+						:render-after-expand="true"
+					/> -->
+				</el-form-item>
+        <el-form-item label="环路类型" prop="loopTypes">
+          {{ ruleForm.loopTypes === 1 ? '一网' : '二网' }}
         </el-form-item>
-        <el-form-item label="设备名称" prop="name">
-          {{ruleForm.name}}
+        <el-form-item label="节能类型" prop="energyTypes">
+          {{ ruleForm.energyTypes === 1 ? '节能' : '' }}
         </el-form-item>
-
-        
-
-           <el-form-item label="所属产品" prop="productId">
-       
-                {{ruleForm.productName}}
-            </el-form-item> 
-
-         <el-form-item label="所属部门" prop="deptId">
-               {{ruleForm.deptName}}
-            </el-form-item> 
-
-           
-        
-        <el-form-item label="设备证书" prop="certificate">
-            {{ruleForm.certificate}}
-        </el-form-item>
-
-        <el-form-item label="设备秘钥" prop="secureKey">
-            {{ruleForm.secureKey}}
-        </el-form-item>
-
-         <el-form-item label="固件版本号" prop="version">
-          {{ruleForm.version}}
+        <el-row :gutter="10">
+          <el-col :span="12">
+            <el-form-item label="供暖对象" prop="heatingObject">
+              {{ ruleForm.heatingObject === 1 ? '公建' : '居民' }}
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="供暖类型" prop="heatingTypes">
+              {{ ruleForm.heatingTypes === 1 ? '地暖' : '暖气片' }}
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="10">
+          <el-col :span="12">
+            <el-form-item label="供暖面积" prop="heatingArea">
+              {{ ruleForm.heatingArea }}
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="实际面积" prop="forRealArea">
+              {{ ruleForm.forRealArea }}
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-form-item label="环路年代" prop="decade">
+          {{ ruleForm.decade }}
         </el-form-item>
-      
-  
-        <el-form-item label="备注" prop="desc">
-           {{ruleForm.desc}}
+				<el-form-item label="状态" prop="status">
+          {{ ruleForm.decade === 1 ? '在线' : '不在线' }}
+				</el-form-item>
+        <el-form-item label="路线信息" prop="">
+					<div class="mb10" style="width: 100%">
+						<div style="display: flex;" class="mb10" v-for="(item, index) in pointList" :key="index">
+							<el-input v-model="item.position" :disabled="!item.editFalg" @keydown="onLocalChange(item, index)" @change="onLocalChange(item, index)" placeholder="请输入关键字进行搜索" clearable style="flex: 1; margin-right: 10px"></el-input>
+							<span>排序：</span>
+							<el-input-number v-model="item.sort" :controls="false" :disabled="!item.editFalg" placeholder="排序" clearable style="width: 100px; margin-right: 10px"></el-input-number>
+						</div>
+					</div>
         </el-form-item>
 			</el-form>
-
+			<template #footer>
+				<span class="dialog-footer">
+					<el-button @click="onCancel" size="default">取 消</el-button>
+					<el-button type="primary" @click="onSubmit" size="default">{{ ruleForm.id !== 0 ? '修 改' : '添 加' }}</el-button>
+				</span>
+			</template>
 		</el-dialog>
 	</div>
 </template>
 
 <script lang="ts">
-import { reactive, toRefs, defineComponent,ref, unref } from 'vue';
-import api from '/@/api/device';
-import {ElMessage} from "element-plus";
-interface RuleFormState {
-  id:number;
-  name:string;
-  certificate:string;
-  secureKey:string;
-  version:string;
-  productId:number;
-  deptId:number;
-  desc:string;
+import { reactive, toRefs, defineComponent, ref } from 'vue';
+import api from '/@/api/heatStation';
+import { ElMessage } from 'element-plus';
+interface Point {
+	sort?: number;
+	lnt: number;
+	lat: number
 }
-interface DicState {
-	isShowDialog: boolean;
-	ruleForm: RuleFormState;
-  rules:{}
+interface RuleFormState {
+	id?: number;
+	name: string;
+	code: string;
+	stationId: string;
+	loopTypes: string;
+	energyTypes: string;
+	heatingObject: string;
+	heatingTypes: string;
+	heatingArea: string;
+	forRealArea: string;
+	viaPoint: Array<Point>;
+	decade: string;
+	status: number;
 }
 
 export default defineComponent({
-	name: 'deviceEditPro',
-	setup(prop,{emit}) {
-    const formRef = ref<HTMLElement | null>(null);
-		const state = reactive<DicState>({
-			isShowDialog: false,
-      productData: [], // 分类数据
-      deptData: [], // 
+	name: 'headStationLoop',
+	setup(prop, { emit }) {
+		const formRef = ref<HTMLElement | null>(null);
+		const state = reactive({
+			dialogVisible: false,
 			ruleForm: {
-        id:0,
-        name:'',
-        productId:'',
-        deptId:0,
-        certificate:'',
-        secureKey:'',
-        version:'',
-        desc:''
+				id: 0,
+				name: '',
+        code: '',
+        stationId: '',
+        loopTypes: '',
+        energyTypes: '',
+        heatingObject: '',
+        heatingTypes: '',
+        heatingArea: '',
+        forRealArea: '',
+        decade: '',
+				viaPoint: [],
+        status: 1
 			},
-      rules: {
-       
-      }
-		});
+			treeData: [],
+      pointList: [] as any
+		})
 		// 打开弹窗
-		const openDialog = (row: RuleFormState|null) => {
-      resetForm();
-
-        api.product.getLists({ status: 1 }).then((res: any) => {
-          state.productData = res.product || [];
-        });
-        api.dept.getList({ status: -1 }).then((res: any) => {
-          state.deptData = res || [];
-        });
-
-
-      if (row){
-        // api.dict.getType(row.id).then((res:any)=>{
-        //   state.ruleForm = res.data.dictType
-        // })
-        state.ruleForm = row;
-      }
-			state.isShowDialog = true;
-		};
-    const resetForm = ()=>{
-      state.ruleForm = {
-        id:0,
-        name:'',
-        productId:'',
-        deptId:0,
-        certificate:'',
-        secureKey:'',
-        version:'',
-        desc:''
-      }
-    };
+		const openDialog = (row: RuleFormState | null) => {
+			resetForm()
+			queryTree()
+			if (row) {
+				(state.ruleForm as any).id = row.id
+				getDetail()
+			}
+			state.dialogVisible = true
+		}
+		const resetForm = () => {
+			state.ruleForm = {
+				id: 0,
+				name: '',
+        code: '',
+        stationId: '',
+        loopTypes: '',
+        energyTypes: '',
+        heatingObject: '',
+        heatingTypes: '',
+        heatingArea: '',
+        forRealArea: '',
+				viaPoint: [],
+        decade: '',
+        status: 1
+			}
+		}
 		// 关闭弹窗
 		const closeDialog = () => {
-			state.isShowDialog = false;
-		};
+			state.dialogVisible = false
+		}
 		// 取消
 		const onCancel = () => {
-			closeDialog();
-		};
-		// 新增
-		const onSubmit = () => {
-      const formWrap = unref(formRef) as any;
-      if (!formWrap) return;
-      formWrap.validate((valid: boolean) => {
-        if (valid) {
-          if(state.ruleForm.id!==0){
-            //修改
-            api.instance.edit(state.ruleForm).then(()=>{
-              ElMessage.success('设备类型修改成功');
-              closeDialog(); // 关闭弹窗
-              emit('typeList')
-            })
-          }else{
-            //添加
-            api.instance.add(state.ruleForm).then(()=>{
-              ElMessage.success('设备类型添加成功');
-              closeDialog(); // 关闭弹窗
-              emit('typeList')
-            })
-          }
-        }
-      });
+			closeDialog()
+			state.pointList = []
+		}
+		const queryTree = () => {
+			api.heatStation.getList({
+					name: '',
+					code: '',
+					status: -1
+				})
+				.then((res: any) => {
+					state.treeData = res || [];
+				});
 		};
-
+		const getDetail = () => {
+			api.loop.detail(state.ruleForm.id)
+				.then((res: any) => {
+					state.ruleForm = {
+						...res
+					}
+					state.pointList = state.ruleForm.viaPoint.map((item: any) => ({
+						...item,
+						editFlag: false
+					}))
+				})
+		}
 
 		return {
 			openDialog,
 			closeDialog,
 			onCancel,
-			onSubmit,
-      formRef,
-			...toRefs(state),
-		};
-	},
-});
+			formRef,
+			...toRefs(state)
+		}
+	}
+})
 </script>

src/views/heatStation/loop/component/edit.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="system-edit-dic-container">
-		<el-dialog :title="(ruleForm.id !== 0 ? '修改' : '添加') + '环路'" v-model="dialogVisible" width="769px">
+		<el-dialog :title="(ruleForm.id !== 0 ? '修改' : '添加') + '环路'" v-model="dialogVisible" width="950px">
 			<el-form :model="ruleForm" ref="formRef" :rules="rules" size="default" label-width="110px">
 				<el-form-item label="环路名称" prop="name">
 					<el-input v-model="ruleForm.name" placeholder="请输入环路名称" />
@@ -67,19 +67,28 @@
         <el-form-item label="环路年代" prop="decade">
           <el-input v-model="ruleForm.decade" placeholder="请输入环路年代" />
         </el-form-item>
+				<el-form-item label="状态" prop="status">
+					<el-radio v-model="ruleForm.status" :label="1">在线</el-radio>
+					<el-radio v-model="ruleForm.status" :label="0">不在线</el-radio>
+				</el-form-item>
         <el-form-item label="编辑路线信息" prop="">
 					<div class="mb10">
-						<el-button type="primary">添加途经点</el-button>
+						<el-button type="primary" @click="onAddPoint">添加途经点</el-button>
 					</div>
+
 					<div class="mb10" style="width: 100%">
-						<el-input v-model="keyword" @change="onLocalChange" placeholder="请输入关键字进行搜索" clearable style="width: 100%;"></el-input>
+						<div style="display: flex;" class="mb10" v-for="(item, index) in pointList" :key="index">
+							<el-input v-model="item.position" :disabled="!item.editFalg" @change="onLocalChange(item, index)" placeholder="请输入关键字进行搜索" clearable style="flex: 1; margin-right: 10px"></el-input>
+							<span>排序：</span>
+							<el-input-number v-model="item.sort" :controls="false" :disabled="!item.editFalg" placeholder="排序" clearable style="width: 100px; margin-right: 10px"></el-input-number>
+
+							<el-button type="primary" v-if="item.editFalg" @click="onSavePoint(item, index)">保存</el-button>
+							<el-button type="primary" v-else @click="item.editFalg = true">修改</el-button>
+							<el-button type="danger" @click="onRemovePoint(index)">删除</el-button>
+						</div>
 					</div>
 					<div style="width: 100%; height: 300px" id="loop-map-container"></div>
         </el-form-item>
-				<el-form-item label="状态" prop="status">
-					<el-radio v-model="ruleForm.status" :label="1">在线</el-radio>
-					<el-radio v-model="ruleForm.status" :label="0">不在线</el-radio>
-				</el-form-item>
 			</el-form>
 			<template #footer>
 				<span class="dialog-footer">
@@ -101,7 +110,7 @@ interface Point {
 	lat: number
 }
 interface RuleFormState {
-	id: number;
+	id?: number;
 	name: string;
 	code: string;
 	stationId: string;
@@ -138,15 +147,22 @@ export default defineComponent({
         status: 1
 			},
 			rules: {
-				name: [{ required: true, message: '环路名称不能为空', trigger: 'blur' }],
-				code: [{ required: true, message: '环路编号不能为空', trigger: 'blur' }],
-				stationId: [{ required: true, message: '所属换热站不能为空', trigger: 'blur' }],
-				loopTypes: [{ required: true, message: '环路类型不能为空', trigger: 'blur' }],
-				status: [{ required: true, message: '状态不能为空', trigger: 'blur' }]
+				name: [{ required: true, message: '环路名称不能为空', trigger: ['blur', 'change'] }],
+				code: [{ required: true, message: '环路编号不能为空', trigger: ['blur', 'change'] }],
+				stationId: [{ required: true, message: '所属换热站不能为空', trigger: ['blur', 'change'] }],
+				loopTypes: [{ required: true, message: '环路类型不能为空', trigger: ['blur', 'change'] }],
+				energyTypes: [{ required: true, message: '节能类型不能为空', trigger: ['blur', 'change'] }],
+				heatingObject: [{ required: true, message: '供暖对象不能为空', trigger: ['blur', 'change'] }],
+				heatingTypes: [{ required: true, message: '供暖类型不能为空', trigger: ['blur', 'change'] }],
+				heatingArea: [{ required: true, message: '供暖面积不能为空', trigger: ['blur', 'change'] }],
+				forRealArea: [{ required: true, message: '实际面积不能为空', trigger: ['blur', 'change'] }],
+				decade: [{ required: true, message: '年代不能为空', trigger: ['blur', 'change'] }],
+				status: [{ required: true, message: '状态不能为空', trigger: ['blur', 'change'] }]
 			},
 			treeData: [],
-			keyword: '', // 地图关键字
-			mapLocal: null as any
+			mapLocal: null as any, // 地图搜索
+			pointList: [] as any,
+			pointIndex: -1,
 		})
 		// 打开弹窗
 		const openDialog = (row: RuleFormState | null) => {
@@ -156,7 +172,8 @@ export default defineComponent({
 				initMap()
 			})
 			if (row) {
-				(state.ruleForm as any) = row
+				(state.ruleForm as any).id = row.id
+				getDetail()
 			}
 			state.dialogVisible = true
 		}
@@ -180,11 +197,12 @@ export default defineComponent({
 		// 关闭弹窗
 		const closeDialog = () => {
 			state.dialogVisible = false
+			state.pointList = [];
+			(formRef.value as any).clearValidate()
 		}
 		// 取消
 		const onCancel = () => {
 			closeDialog()
-			state.keyword = ''
 		}
 		const queryTree = () => {
 			api.heatStation.getList({
@@ -196,30 +214,78 @@ export default defineComponent({
 					state.treeData = res || [];
 				});
 		};
+		const getDetail = () => {
+			api.loop.detail(state.ruleForm.id)
+				.then((res: any) => {
+					state.ruleForm = {
+						...res
+					}
+					state.pointList = state.ruleForm.viaPoint.map((item: any) => ({
+						...item,
+						editFlag: false
+					}))
+				})
+		}
 		// 新增
 		const onSubmit = () => {
 			const formWrap = unref(formRef) as any
 			if (!formWrap) return;
 			formWrap.validate((valid: boolean) => {
 				if (valid) {
-					if (state.ruleForm.id) {
+					if (!state.pointList.length) {
+						ElMessage.warning('请选择途经点')
+						return
+					}
+					for (let i = 0; i < state.pointList.length; i++) {
+						let item = state.pointList[i]
+						if (!item.lnt && !item.lat) {
+							ElMessage.warning('途经点填错错误')
+							return
+						}
+					}
+					let params = { ...state.ruleForm }
+					params.viaPoint = state.pointList.map((item: any, index: number) => ({
+						sort: index + 1,
+						lnt: item.lnt,
+						lat: item.lat,
+						position: item.position
+					}))
+					if (params.id) {
 						//修改
-						api.loop.edit(state.ruleForm).then(() => {
+						api.loop.edit(params).then(() => {
 							ElMessage.success('环路修改成功')
 							closeDialog() // 关闭弹窗
-							emit('querylist')
+							emit('queryList')
 						})
 					} else {
 						//添加
-						api.loop.add(state.ruleForm).then(() => {
+						api.loop.add(params).then(() => {
 							ElMessage.success('环路添加成功')
 							closeDialog() // 关闭弹窗
-							emit('querylist')
+							emit('queryList')
 						})
 					}
 				}
 			})
 		}
+		// 新增途经点
+		const onAddPoint = () => {
+			state.pointList.push({
+				sort: undefined,
+				position: '',
+				lnt: '',
+				lat: '',
+				editFalg: true
+			})
+		}
+		// 保存途经点
+		const onSavePoint = (item: any, index: number) => {
+			item.editFalg = false
+		}
+		// 移除途经点
+		const onRemovePoint = (index: number) => {
+			state.pointList.splice(index, 1)
+		}
 		
 		const initMap = () => {
 			let BMapGL = (window as any).BMapGL
@@ -241,17 +307,26 @@ export default defineComponent({
 			state.mapLocal = new BMapGL.LocalSearch(map, {
 				renderOptions:{map: map}
 			})
-
+			console.log('map', map)
 			map.addEventListener('click', (e: any) => {
 				console.log('map--click', e)
 				let point = e.latlng
+				if (state.pointIndex > -1) {
+					state.pointList[state.pointIndex].lnt = point.lng
+					state.pointList[state.pointIndex].lat = point.lat
+					let str = e.currentTarget.infoWindow.centerDiv.innerText
+					let address = str.replace(/[^\s]+[\s\t\n]+([^\s\t\n]+)[\s\t\n]+.*/g, '$1')
+					state.pointList[state.pointIndex].position = address
+				}
 				// state.ruleForm.lnt = point.lng
 				// state.ruleForm.lat = point.lat
+				// .replace(/[^\s]+[\s\t\n]+([^\s\t\n]+)[\s\t\n]+.*/g, '$1')
 			})
 		}
 
-		const onLocalChange = () => {
-			state.mapLocal.search(state.keyword)
+		const onLocalChange = (item: any, index: number) => {
+			state.mapLocal.search(item.position)
+			state.pointIndex = index
 		}
 
 		return {
@@ -261,6 +336,9 @@ export default defineComponent({
 			onSubmit,
 			formRef,
 			onLocalChange,
+			onAddPoint,
+			onRemovePoint,
+			onSavePoint,
 			...toRefs(state)
 		}
 	}

src/views/heatStation/loop/index.vue

@@ -143,6 +143,7 @@ interface TableDataState {
 			code: string;
 			loopTypes: string;
 			heatingObject: string;
+			status: number;
 		};
 	};
 }
@@ -167,7 +168,8 @@ export default defineComponent({
 					name: '',
 					code: '',
 					loopTypes: '',
-					heatingObject: ''
+					heatingObject: '',
+					status: -1
 				},
 			},
 		});
@@ -197,28 +199,28 @@ export default defineComponent({
 		};
 		// 删除产品
 		const onRowDel = (row: TableDataRow) => {
-			let msg = '你确定要删除所选数据？';
-			let ids: number[] = [];
-			if (row) {
-				msg = `此操作将永久删除设备：“${row.name}”，是否继续?`;
-				ids = [row.id];
-			} else {
-				ids = state.ids;
-			}
-			if (ids.length === 0) {
-				ElMessage.error('请选择要删除的数据。');
-				return;
-			}
+			// let msg = '你确定要删除所选数据？';
+			// let ids: number[] = [];
+			// if (row) {
+			let msg = `此操作将永久删除环路：“${row.name}”，是否继续?`;
+			// 	ids = [row.id];
+			// } else {
+			// 	ids = state.ids;
+			// }
+			// if (ids.length === 0) {
+			// 	ElMessage.error('请选择要删除的数据。');
+			// 	return;
+			// }
 			ElMessageBox.confirm(msg, '提示', {
 				confirmButtonText: '确认',
 				cancelButtonText: '取消',
 				type: 'warning',
 			})
 				.then(() => {
-					// api.loop.del(ids).then(() => {
-					// 	ElMessage.success('删除成功');
-					// 	queryList();
-					// });
+					api.loop.del(row.id).then(() => {
+						ElMessage.success('删除成功');
+						queryList();
+					});
 				})
 				.catch(() => {});
 		};