From 043bac22f268e69657d3355e64946d8a59e00a70 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=90=B4=E5=BB=B6=E7=A6=8F?= <> Date: Fri, 9 Jun 2023 11:01:35 +0800 Subject: [PATCH] =?UTF-8?q?feat:=E6=96=B0=E5=A2=9E=E9=A3=8E=E9=99=A9?= =?UTF-8?q?=E5=8C=BA=E5=9F=9F=E9=80=BB=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .env.development | 6 +- package.json | 1 + src/App.vue | 3 + src/components/draw.component.vue | 280 ++++++++++++--------- src/service/area.service.ts | 11 +- src/service/unit.service.ts | 13 +- src/store/index.ts | 21 ++ src/views/blank.component.vue | 33 +++ src/views/common.component.scss | 9 +- src/views/risk/area/area.component.vue | 327 +++++++++++++------------ src/views/risk/areaUnit.component.html | 8 +- src/views/risk/unit/unit.component.vue | 210 ++++++++++------ 12 files changed, 555 insertions(+), 367 deletions(-) diff --git a/.env.development b/.env.development index f793e49..9b8d3d9 100644 --- a/.env.development +++ b/.env.development @@ -5,12 +5,12 @@ VUE_APP_TITLE = 汉邦唐全真数字服务平台 # 网关地址 VUE_APP_GATEWAY_URL="/dev-api" # 服务地址 -VUE_APP_BASE_API_URL="http://119.45.158.12:8081" +VUE_APP_BASE_API_URL="http://192.168.2.3:8081/" # 服务前-- 请严格遵守格式 不允许换行 -VUE_APP_SERVICE_PREFIX= '{"knowledge":"/knowledge","system":"/system"}' +VUE_APP_SERVICE_PREFIX= '{"system":"/system","prevention":"/prevention-yx"}' # 是否显示全部菜单 VUE_APP_ALL_MENU = false # 微前端地址 VUE_APP_REMOTES_URL="http://192.168.1.20:8090" # 当前应用部署地址 -VUE_APP_EXPOSES_URL="" \ No newline at end of file +VUE_APP_EXPOSES_URL="http://192.168.1.20:8090" \ No newline at end of file diff --git a/package.json b/package.json index bef5140..3a4907d 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ }, "dependencies": { "@mapbox/mapbox-gl-draw": "^1.4.1", + "@riophae/vue-treeselect": "^0.4.0", "@turf/turf": "^6.5.0", "@types/webpack-env": "^1.18.0", "axios": "^1.3.4", diff --git a/src/App.vue b/src/App.vue index 612bb0d..b262271 100644 --- a/src/App.vue +++ b/src/App.vue @@ -24,6 +24,9 @@ body{ height: 100%; } } +.v-modal{ + z-index: 98 !important; + } ul,li{ list-style: none; } diff --git a/src/components/draw.component.vue b/src/components/draw.component.vue index ad38d22..7f7fe52 100644 --- a/src/components/draw.component.vue +++ b/src/components/draw.component.vue @@ -53,81 +53,7 @@ import * as turf from '@turf/turf' } }) export default class DrawComponent extends Vue { - @PropSync("model") - public viewModel:string; - @PropSync("show",{ - required:true, - default:true - }) - public visible:boolean; - @PropSync("data",{ - required:true, - }) - public params!:any; - public fromList = false; - - @Watch("params",{immediate:true,deep:true}) - onChanges(newVal,odlVal){ - console.log(this.draw) - this.updateParams = JSON.parse(JSON.stringify(newVal)) - if(newVal.geoJson){ - this.positions = JSON.parse(newVal.geoJson); - this.positions.forEach(feature=>{ - this.draw.add(feature) - }) - const center = turf.centerOfMass(turf.featureCollection(this.positions)); - this.map.flyTo({center:center.geometry.coordinates,zoom:17}) - } - } - - @Watch("viewModel",{immediate:true,deep:true}) - onModelChanges(newVal){ - if(newVal==="list"){ - this.fromList = true; - } - this.buildUpdate() - } - - public modelMap = { - list:"批量绘制", - area:"区域绘制", - unit:"单元绘制" - } - - public listForm = [{ - name:"关键词", - key:"keyword", - width:"100%", - type:"text", - placeholder:"请输入名称关键词", - }]; - public listParams = { - keyword:"" - } - - public map:any; - public center = [-91.874, 42.76]; - - public updateParams = {} as any; - - public positions = [] as any; - - public hasInitDraw = false; - - public draw = new MapboxDraw({ - displayControlsDefault: false, - // Select which mapbox-gl-draw control buttons to add to the map. - controls: { - polygon: true, - trash: true - }, - // Set mapbox-gl-draw to draw by default. - // The user does not have to click the polygon control button first. - defaultMode: 'draw_polygon' - }) - public options = []; - public actions = []; public treeData = [{ label: '一级 1', value: '123', @@ -165,8 +91,97 @@ export default class DrawComponent extends Vue { }] }]; + public modelMap = { + list:"批量绘制", + area:"区域绘制", + unit:"单元绘制" + } + + public listForm = [{ + name:"关键词", + key:"keyword", + width:"100%", + type:"text", + placeholder:"请输入名称关键词", + }]; + public listParams = { + keyword:"" + } + + public map:any; + public center = [-91.874, 42.76]; + + public updateParams = {} as any; + + public positions = [] as any; + + public hasInitDraw = false; + public options = []; + public actions = []; + + public draw = new MapboxDraw({ + displayControlsDefault: false, + // Select which mapbox-gl-draw control buttons to add to the map. + controls: { + polygon: true, + trash: true + }, + // Set mapbox-gl-draw to draw by default. + // The user does not have to click the polygon control button first. + defaultMode: 'draw_polygon' + }) + @PropSync("model") + public viewModel:string; + @PropSync("show",{ + required:true, + default:true + }) + public visible:boolean; + @PropSync("data",{ + required:true, + }) + public params!:any; + + public fromList = false; + + @Watch("params",{immediate:true,deep:true}) + onChanges(newVal,odlVal){ + this.updateParams = JSON.parse(JSON.stringify(newVal)) + if(newVal.geoJson){ + this.positions = JSON.parse(newVal.geoJson); + + if(this.positions.length){ + this.flyToCenter(16) + } + } + } + + @Watch("viewModel",{immediate:true,deep:true}) + onModelChanges(newVal){ + if(newVal==="list"){ + this.fromList = true; + this.positions = this.getAllFeatures(this.treeData); + if(this.positions.length){ + this.addAllPolygon(); + } + } + this.buildUpdate() + } + created(){ - this.positions = [] as any; + // this.positions = [] as any; + } + + public flyToCenter(zoom){ + if(!this.map ){ + setTimeout(()=>{ + this.flyToCenter(zoom) + }) + return + } + const center = turf.centerOfMass(turf.featureCollection(this.positions)); + this.map.flyTo({center: center.geometry.coordinates, zoom: zoom}); + this.addAllPolygon(); } public getMap(map){ @@ -192,10 +207,7 @@ export default class DrawComponent extends Vue { } public addAllPolygon(){ - const features = this.getAllFeatures(this.treeData); - const featureCollection = turf.featureCollection(features); - const center = turf.centerOfMass(featureCollection); - this.map.flyTo({center:center.geometry.coordinates,zoom:12}) + const featureCollection = turf.featureCollection(this.positions); if(!this.map.getSource('allDataSource')){ this.map.addSource("allDataSource", { type: "geojson", @@ -215,16 +227,27 @@ export default class DrawComponent extends Vue { this.map.addLayer({ "id": "textLayer", "type": "symbol", - "source": "polygonSource", + "source": "allDataSource", "layout": { - "text-field": ["get", "text"], - "text-size": 24, - "text-allow-overlap": true + "text-field": ["get", "name"], + "text-size": [ + 'interpolate', + // Set the exponential rate of change to 0.5 + ['exponential', 0.5], + ['zoom'], + // When zoom is 15, buildings will be beige. + 15, + 12, + // When zoom is 18 or higher, buildings will be yellow. + 18, + 24, + ], + // "text-allow-overlap": true }, "paint": { "text-color": "#FFF", "text-halo-color": "#000", - "text-halo-width": 5 + "text-halo-width": 10 } }) }else{ @@ -233,6 +256,15 @@ export default class DrawComponent extends Vue { } + public removeLayer(){ + if(!this.map){ + return + } + this.map.removeLayer("allDataLayer") + this.map.removeLayer("textLayer") + this.map.removeSource("allDataSource") + } + public drawCallback(e){ if(e.type ==="draw.create"){ this.positions = this.positions.concat(e.features) @@ -272,39 +304,61 @@ export default class DrawComponent extends Vue { this.viewModel = "area" } } + // 点击绘制 + public drawCallBack(){ + if(!this.map){ + this.$message.error("地图未初始化完成,请稍后再试") + return + } + if(this.hasInitDraw){ + this.$message.error("绘制工具已打开请点击地图右上角进行绘制") + return + } + this.map.addControl(this.draw); + if(this.positions.length){ + this.removeLayer() + this.positions.forEach(feature=>{ + this.draw.add(feature) + }) + } + this.hasInitDraw = true; + } + + public destoryDraw(){ + this.map.removeControl(this.draw); + this.hasInitDraw = false; + } + + // 点击保存 + public doSave(){ + if(this.updateParams.topHeight{ + feature.properties = this.updateParams + }) + this.updateParams.geoJson = JSON.stringify(this.positions); + this.params = this.updateParams; + if(this.fromList){ + this.viewModel = "list"; + this.destoryDraw(); + + }else{ + this.visible = false; + } + } public callback(action){ if(action.value==="draw"){ - if(!this.map){ - this.$message.error("地图未初始化完成,请稍后再试") - return - } - if(this.hasInitDraw){ - this.$message.error("绘制工具已打开请点击地图右上角进行绘制") - return - } - this.map.addControl(this.draw); - this.hasInitDraw = true; + this.drawCallBack(); }else if(action.value==="save"){ - if(this.updateParams.topHeight{ - feature.properties = this.updateParams - }) - this.updateParams.geoJson = JSON.stringify(this.positions); - if(this.fromList){ - this.viewModel = "list" - }else{ - this.visible = false; - } }else { if(this.fromList){ this.viewModel = "list"; @@ -329,7 +383,7 @@ export default class DrawComponent extends Vue { placeholder:"请输入区域名称", },{ name:"单元名称", - key:"unitName", + key:"name", hide:this.viewModel === "area", width:"100%", disable:true, @@ -402,7 +456,7 @@ export default class DrawComponent extends Vue { display: flex; flex-direction: column; position: relative; - z-index: 99; + z-index: 1000; .title{ height: 68px; display: flex; diff --git a/src/service/area.service.ts b/src/service/area.service.ts index b11c3a3..1e39c50 100644 --- a/src/service/area.service.ts +++ b/src/service/area.service.ts @@ -7,23 +7,18 @@ export default class AreaService extends BaseService{ } // 查询列表 public selectByPage(params: any):Promise>>{ - const url = this.prefix.system+'/user/list'; + const url = this.prefix.prevention+'/risk/area/list'; return this.get(url,params,true) } // 批量删除 public deleteByIds(params):Promise>>{ - const url = this.prefix.system+'/user/list'; + const url = this.prefix.prevention+'/user/list'; return this.deleteBatch(url,params,{},true) } - // 查询详情 - public selectById(id:any,showLoading?:boolean): Promise>> { - const url = this.prefix.system+'/user/list/'+id; - return this.get(url,null,showLoading) - } // 新增或更新 public addOrUpdate(params: any, add: boolean,showLoading?:boolean): Promise>>{ - const url = this.prefix.system+'/user/list'; + const url = this.prefix.prevention+'/risk/area'; if(add){ return this.post(url,params,{},showLoading) }else{ diff --git a/src/service/unit.service.ts b/src/service/unit.service.ts index 537e573..329e2e1 100644 --- a/src/service/unit.service.ts +++ b/src/service/unit.service.ts @@ -6,11 +6,22 @@ export default class UnitService extends BaseService{ super() } public selectByPage(params: any):Promise>>{ - const url = this.prefix.system+'/user/list'; + const url = this.prefix.prevention+'/risk/unit/list'; return this.get(url,params,true) } public deleteByIds(params):Promise>>{ const url = this.prefix.system+'/user/list'; return this.deleteBatch(url,params,{},true) } + + + // 新增或更新 + public addOrUpdate(params: any, add: boolean,showLoading?:boolean): Promise>>{ + const url = this.prefix.prevention+'/risk/unit'; + if(add){ + return this.post(url,params,{},showLoading) + }else{ + return this.put(url,params,{},showLoading) + } + } } \ No newline at end of file diff --git a/src/store/index.ts b/src/store/index.ts index ceffa8e..1d01fc5 100644 --- a/src/store/index.ts +++ b/src/store/index.ts @@ -5,10 +5,31 @@ Vue.use(Vuex) export default new Vuex.Store({ state: { + deptList:[], + deptTreeList:[], + userList:[], + common_yes_no:[], + yesNoMap:{ + 0:"否", + 1:"是" + } }, getters: { }, mutations: { + + setDeptList(state,data){ + state.deptList = data; + }, + setUserList(state,data){ + state.userList = data; + }, + setDeptTreeList(state,data){ + state.deptTreeList = data; + }, + set_common_yes_no(state,data){ + state.common_yes_no = data; + } }, actions: { }, diff --git a/src/views/blank.component.vue b/src/views/blank.component.vue index eaa3aa7..c30781f 100644 --- a/src/views/blank.component.vue +++ b/src/views/blank.component.vue @@ -2,8 +2,41 @@ diff --git a/src/views/common.component.scss b/src/views/common.component.scss index bba09a3..dbdd477 100644 --- a/src/views/common.component.scss +++ b/src/views/common.component.scss @@ -28,6 +28,9 @@ text-decoration: underline; } } + .el-dialog__wrapper,.v-modal{ + z-index: 99 !important; + } .el-tree-node__content { height: 39px; @@ -39,9 +42,9 @@ } .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content { - background: #409EFF ; + background: #409EFF; border-radius: 4px; - color: #FFF ; + color: #FFF; } .td-content { @@ -73,7 +76,7 @@ .model-box { position: fixed; inset: 40px 40px 40px 240px; - z-index: 2006; + z-index: 999; .mask { position: fixed; diff --git a/src/views/risk/area/area.component.vue b/src/views/risk/area/area.component.vue index 4c4347a..9749967 100644 --- a/src/views/risk/area/area.component.vue +++ b/src/views/risk/area/area.component.vue @@ -1,6 +1,6 @@ diff --git a/src/views/risk/areaUnit.component.html b/src/views/risk/areaUnit.component.html index 1465d75..a2e0d53 100644 --- a/src/views/risk/areaUnit.component.html +++ b/src/views/risk/areaUnit.component.html @@ -22,8 +22,8 @@ @@ -38,9 +38,9 @@ - - diff --git a/src/views/risk/unit/unit.component.vue b/src/views/risk/unit/unit.component.vue index dfefbe2..766d5b1 100644 --- a/src/views/risk/unit/unit.component.vue +++ b/src/views/risk/unit/unit.component.vue @@ -9,6 +9,7 @@ import UnitService from "@/service/unit.service" import FormOption from "hbt-common/models/formOptions" import BtnOption from "hbt-common/models/btnOptions" import DrawComponent from '@/components/draw.component.vue'; +import AreaService from '@/service/area.service'; @Component({ template, components:{ @@ -20,8 +21,12 @@ import DrawComponent from '@/components/draw.component.vue'; export default class UnitManagerComponent extends BaseRecordComponent { public tableService = new UnitService(); + public areaService = new AreaService(); + public params = {} as any; + public isReadonly = false; + public formActions = [{ name:"查询", value:"search", @@ -58,84 +63,73 @@ export default class UnitManagerComponent extends BaseRecordComponent { name:"反向选择", value:"reverse" }]; - public formOptions:FormOption[] = [{ - name:"单元名称", - key:"unitId", - type:"text", - },{ - name:"责任部门", - key:"deptId", - type:"select", - datas:[{ - name:"部门1", - value:0 - },{ - name:"部门2", - value:1 - }] - }]; + public formOptions:FormOption[] = []; public showUpdate = false; public currentId = -1; public updateParams = {} as any; - public updateOptions:FormOption[] = [{ + public updateOptions:FormOption[] = []; + + + public showDraw = false; + + public drawModel = "list"; + public areaList = [] as any; + public areaNoMap = {} as any; + + + public updateActions:BtnOption[] = []; + + public selectData = []; + + created(){ + this.getAreaList(); + } + + public buildFormOptions(){ + this.updateOptions = [{ name:"选择区域", key:"areaId", placeholder:"请选择区域名称", width:"calc(50% - 20px)", type:"select", require:true, - datas:[{ - name:"区域1", - value:0 - },{ - name:"区域2", - value:1 - }] + datas:this.areaList },{ name:"区域编号", - key:"no", + key:"areaNo", type:"text", + disable:true, width:"calc(50% - 20px)", - require:true },{ name:"单元编号", - key:"no", + key:"number", type:"text", width:"calc(50% - 20px)", require:true },{ name:"单元名称", - key:"unitName", + key:"name", type:"text", width:"calc(50% - 20px)", require:true },{ name:"责任部门", - key:"deptId", - type:"select", + key:"chargeDeptId", + format:"chargeDeptName", + type:"treeSelect", width:"calc(50% - 20px)", require:true, - datas:[{ - name:"部门1", - value:0 - },{ - name:"部门2", - value:1 - }] + expandLevel:Infinity, + showError:false, + datas:this.$store.state.deptTreeList },{ name:"责任人", - key:"person", + key:"chargeUserId", type:"select", width:"calc(50% - 20px)", require:true, - datas:[{ - name:"人员1", - value:0 - },{ - name:"人员2", - value:1 - }] + datas:this.$store.state.userList },{ type:"btn", name:"单元绘制", @@ -143,42 +137,45 @@ export default class UnitManagerComponent extends BaseRecordComponent { btn:[{ name:"开始绘制", value:"draw", + height:"36px", + hide:this.isReadonly, + size:"small", + icon:"el-icon-edit-outline", type:"primary" }] }]; - - public showDraw = false; - - public drawModel = "list"; - - - public updateActions = [{ - name:"取消", - value:"cancel" - },{ - name:"保存并继续添加", - value:"saveAndContinue", - type:"primary" - },{ - name:"保存", - value:"save", - type:"primary" - }]; - - public selectData = []; - - created(){ - + this.updateActions = [{ + name:"取消", + value:"cancel" + },{ + name:"保存并继续添加", + value:"saveAndContinue", + hide:this.currentId!=-1, + type:"primary" + },{ + name:"保存", + value:"submit", + type:"primary" + }]; + this.formOptions=[{ + name:"单元名称", + key:"name", + type:"text" + },{ + name:"责任部门", + key:"chargeDeptId", + type:"select", + datas:this.$store.state.deptList + }] } public buildTable(){ - this.tableColumn.push({name:'序号',key:"index"}); - this.tableColumn.push({name:'风险分析单元',key:"deptName"}); - this.tableColumn.push({name:'责任部门',key:"deptName"}); - this.tableColumn.push({name:'责任人',key:"person"}); - this.tableColumn.push({name:'绘制情况',key:"status",render:(data)=>{ - if(data.status==0){ + this.tableColumn.push({name:'风险分析单元',key:"name"}); + this.tableColumn.push({name:'责任部门',key:"chargeDeptName"}); + this.tableColumn.push({name:'责任人',key:"chargeUserName"}); + this.tableColumn.push({name:'绘制情况',render:(data)=>{ + if(data.geoJson==='[]' || !data.geoJson){ return "未绘制" }else{ return "已绘制" @@ -186,7 +183,34 @@ export default class UnitManagerComponent extends BaseRecordComponent { }}); } - public callback(data){ + public getAreaList(){ + this.areaService.selectByPage({pageSize:10}).then((res:any)=>{ + this.areaList = res.data.datas.map(item=>{ + this.areaNoMap[item.id] = item.number; + return { + name:item.name, + value:item.id + } + }); + this.buildFormOptions() + }) + } + + public callback(data,item?){ + // 新增编辑选择部门 + if(item && item.key === "chargeDeptId"){ + this.updateParams.chargeDeptName = this.$store.state.deptList.find(item=>item.value === data)?.name; + } + // 新增编辑选择人员 + if(item && item.key === "chargeUserId"){ + this.updateParams.chargeUserName = this.$store.state.userList.find(item=>item.value === data)?.name; + } + // 新增编辑选择区域 + if(item && item.key === "areaId"){ + console.log(item) + this.updateParams.areaNo = this.areaNoMap[data]; + console.log(this.updateParams) + } // 查询 if(data.value==="search"){ this.getTableData() @@ -200,21 +224,41 @@ export default class UnitManagerComponent extends BaseRecordComponent { }else if(data.value === "selectAll"){ this.selectAll() }else if(data.value === "add"){ - this.showUpdateModel(-1) + this.showUpdateModel() }else if(data.value === "delete"){ this.deleteData(this.selectData.map((item:any)=>item.id)) }else if(data.value === "draw"){ + if(!this.updateParams.name){ + this.$message.error("请先输入单元名称"); + return + } this.drawModel = "unit"; this.showDraw = true; }else if(data.value === "drawList"){ this.drawModel = "list"; this.showDraw = true; + }else if(data.value === "submit"){ + this.tableService.addOrUpdate(this.updateParams,this.currentId===-1).then((res)=>{ + this.$message.success(this.currentId===-1?"新增成功!":"修改成功!"); + this.handleClose(); + this.getTableData(); + }) + }else if(data.value === "saveAndContinue"){ + this.tableService.addOrUpdate(this.updateParams,this.currentId===-1).then((res)=>{ + this.$message.success("新增成功!"); + this.updateParams = {bottomHeight:0,topHeight:0,geoJson:"[]"} as any + }) + }else if(data.value === "cancel"){ + this.updateParams = {} as any; + this.handleClose(); } } // 重置数据 public reset(){ this.params = { + name:null, + chargeDeptId:null, pageNum:1, pageSize:20, } as any; @@ -222,15 +266,23 @@ export default class UnitManagerComponent extends BaseRecordComponent { - public showUpdateModel(id){ - if(id!==-1){ + public showUpdateModel(data?,isRead?){ + if(!data){ + this.currentId = -1; + this.updateParams = {bottomHeight:0,topHeight:0,geoJson:"[]"} as any + }else{ + this.currentId = data.id; + this.updateParams = Object.assign({bottomHeight:0,topHeight:0,geoJson:"[]"},data); + this.isReadonly = !!isRead; + this.buildFormOptions(); } - this.currentId = id; this.showUpdate = true } public handleClose(){ this.showUpdate = false; + this.currentId = -1; + this.isReadonly = false; }