guangyin
/
hbt-prevention-ui
forked from xxhjsb/hbt-prevention-ui
1
0
Fork 0
Code Pull Requests Activity

Merge branch 'wuyanfu' into dev

kongyeqing
吴延福 2023-06-09 16:00:57 +08:00
parent 3def40d1cd 4e1028b914
commit cdef5d6121
8 changed files with 251 additions and 131 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

141
src/components/draw.component.vue
View File

@ -4,29 +4,30 @@
<span>{{modelMap[viewModel]}}</span>
<div class="actions">
<div class="btn" @click="drawScreenFull">全屏</div>
<i class="btn el-icon-close" @click="visible=false"></i>
<i class="btn el-icon-close" @click="closePop()"></i>
</div>
</div>
<div class="content-box">
<div class="update-box">
<div class="form-box">
<FormComponent v-if="viewModel!=='list'" labelWidth="56px" :fullBtn="true" :btnPosition="'center'" @change="change" :data.sync="updateParams" @actionCallback="callback" :options="options" :actions="actions"></FormComponent>
<FormComponent v-if="viewModel!=='list'" labelWidth="56px" :isReadonly="isReadonly" :fullBtn="true" :btnPosition="'center'" @change="change" :data.sync="updateParams" @actionCallback="callback" :options="options" :actions="actions"></FormComponent>
<FormComponent v-else labelWidth="56px" @change="change" :data.sync="listParams" :options="listForm" ></FormComponent>
</div>
<div class="tree-box" v-if="viewModel==='list'">
<el-tree :data="treeData" :expand-on-click-node="false" default-expand-all highlight-current
<el-tree :data="treeData" :props="{children:'children',label:'name'}" :expand-on-click-node="false" default-expand-all highlight-current
:filter-node-method="filterNode"
ref="tree" @node-click="handleNodeClick">
<span class="custom-tree-node" slot-scope="{ node, data }">
<span class="text-block">{{ node.label }}</span>
<span>
<el-button
v-if="!data.geoJson || data.geoJson==='[]'"
type="text"
size="mini"
@click="() => drawNode(data)">
绘制
</el-button>
<!-- <el-tag v-else size="mini" type="success">已绘制</el-tag> -->
<el-tag v-else size="mini" type="success">已绘制</el-tag>
</span>
</span>
</el-tree>
@ -46,6 +47,8 @@ import screenfull from "screenfull"
import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css';
import MapboxDraw from '@mapbox/mapbox-gl-draw';
import * as turf from '@turf/turf'
import UnitService from '@/service/unit.service';
import AreaService from '@/service/area.service';
@Component({
components:{
MapComponent,
@ -54,42 +57,10 @@ import * as turf from '@turf/turf'
})
export default class DrawComponent extends Vue {
public treeData = [{
label: '一级 1',
value: '123',
children: [{
label: '二级 1-1',
children: [{
label: '三级 1-1-1'
}]
}]
}, {
label: '一级 2',
children: [{
label: '二级 2-1',
children: [{
label: '三级 2-1-1'
}]
}, {
label: '二级 2-2',
children: [{
label: '三级 2-2-1'
}]
}]
}, {
label: '一级 3',
children: [{
label: '二级 3-1',
children: [{
label: '三级 3-1-1'
}]
}, {
label: '二级 3-2',
children: [{
label: '三级 3-2-1'
}]
}]
}];
public unitService = new UnitService()
public areaService = new AreaService()
public treeData = [] as any;
public modelMap = {
list:"批量绘制",
@ -132,6 +103,8 @@ export default class DrawComponent extends Vue {
})
@PropSync("model")
public viewModel:string;
@Prop()
public isReadonly:boolean;
@PropSync("show",{
required:true,
default:true
@ -160,23 +133,28 @@ export default class DrawComponent extends Vue {
onModelChanges(newVal){
if(newVal==="list"){
this.fromList = true;
this.positions = this.getAllFeatures(this.treeData);
if(this.positions.length){
this.addAllPolygon();
}
this.setTreeData();
}
this.buildUpdate()
}
@Watch("visible",{immediate:true,deep:true})
onVisibleChanges(newVal){
// console.log("close")
// if(!newVal){
// }
}
@Emit("onClose")
onClose(data){
//Emit false
}
created(){
// this.positions = [] as any;
}
public flyToCenter(zoom){
public flyToCenter(zoom,timer?){
if(!this.map ){
setTimeout(()=>{
this.flyToCenter(zoom)
})
return
}
const center = turf.centerOfMass(turf.featureCollection(this.positions));
@ -184,12 +162,24 @@ export default class DrawComponent extends Vue {
this.addAllPolygon();
}
public setTreeData(){
this.unitService.getUnitTree().then(res=>{
this.treeData = res.data;
this.positions = this.getAllFeatures(this.treeData);
if(this.positions.length && this.map){
this.addAllPolygon();
}
})
}
public getMap(map){
this.map = map;
if(this.viewModel!=="list"){
this.map.on('draw.create', this.drawCallback);
this.map.on('draw.delete', this.drawCallback);
this.map.on('draw.update', this.drawCallback);
this.map.on('draw.create', this.drawCallback);
this.map.on('draw.delete', this.drawCallback);
this.map.on('draw.update', this.drawCallback);
if(this.positions.length){
this.addAllPolygon();
this.flyToCenter(this.fromList?14:16)
}
}
@ -260,9 +250,11 @@ export default class DrawComponent extends Vue {
if(!this.map){
return
}
this.map.removeLayer("allDataLayer")
this.map.removeLayer("textLayer")
this.map.removeSource("allDataSource")
if(this.map.getSource("allDataSource")){
this.map.removeLayer("allDataLayer")
this.map.removeLayer("textLayer")
this.map.removeSource("allDataSource")
}
}
public drawCallback(e){
@ -273,6 +265,7 @@ export default class DrawComponent extends Vue {
}else{
this.positions.splice(this.positions.findIndex((item:any)=>item.id===e.features[0].id),1)
}
console.log(this.positions)
}
public drawScreenFull(){
@ -284,7 +277,7 @@ export default class DrawComponent extends Vue {
// 树节点过滤
public filterNode(value, data) {
if (!value) return true;
return data.label.indexOf(value) !== -1;
return data.name.indexOf(value) !== -1;
}
public change(data,meta){
@ -294,10 +287,16 @@ export default class DrawComponent extends Vue {
}
public handleNodeClick(node){
this.positions = JSON.parse(node.geoJson);
const geoJson = JSON.parse(node.geoJson);
if(!geoJson.length){
return
}
const center = turf.centerOfMass(turf.featureCollection(geoJson));
this.map.flyTo({center: center.geometry.coordinates, zoom: 18});
}
public drawNode(data){
this.params =Object.assign({bottomHeight:0,topHeight:0,geoJson:"[]"},data) as any;
if(data.area_id){
this.viewModel = "unit"
}else{
@ -343,12 +342,15 @@ export default class DrawComponent extends Vue {
feature.properties = this.updateParams
})
this.updateParams.geoJson = JSON.stringify(this.positions);
this.params = this.updateParams;
if(this.fromList){
this.viewModel = "list";
this.destoryDraw();
const service = this.viewModel==='unit'?this.unitService:this.areaService;
service.addOrUpdate(this.updateParams,false).then(res=>{
this.viewModel = "list";
this.destoryDraw();
})
this.onClose(false)
}else{
this.params = this.updateParams;
this.visible = false;
}
}
@ -359,10 +361,13 @@ export default class DrawComponent extends Vue {
if(action.value==="draw"){
this.drawCallBack();
}else if(action.value==="save"){
this.doSave()
}else {
if(this.fromList){
this.viewModel = "list";
this.draw.deleteAll()
if(this.hasInitDraw){
this.draw.deleteAll()
}
}else{
this.visible = false;
}
@ -423,10 +428,19 @@ export default class DrawComponent extends Vue {
mounted(){
}
public closePop(){
this.removeMap();
this.updateParams = {} as any;
this.onClose(false)
this.visible = false;
}
public removeMap(){
this.map.off('draw.create', this.drawCallback);
this.map.off('draw.delete', this.drawCallback);
this.map.off('draw.update', this.drawCallback);
this.removeLayer();
this.map.remove();
this.map = null;
}
@ -445,6 +459,9 @@ export default class DrawComponent extends Vue {
.el-tree-node__content{
height: auto;
}
.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content .el-button--text{
color: #FFF;
}
}
.draw-box{

7
src/service/area.service.ts
View File

@ -12,10 +12,15 @@ export default class AreaService extends BaseService<any>{
}
// 批量删除
public deleteByIds(params):Promise<AxiosResponse<ActionResult<any>>>{
const url = this.prefix.prevention+'/user/list';
const url = this.prefix.prevention+'/risk/area';
return this.deleteBatch(url,params,{},true)
}
public getAreaNumber():Promise<AxiosResponse<ActionResult<any>>>{
const url = this.prefix.prevention+'/risk/area/number';
return this.get(url,null)
}
// 新增或更新
public addOrUpdate(params: any, add: boolean,showLoading?:boolean): Promise<AxiosResponse<ActionResult<any>>>{
const url = this.prefix.prevention+'/risk/area';

14
src/service/unit.service.ts
View File

@ -10,11 +10,23 @@ export default class UnitService extends BaseService<any>{
return this.get(url,params,true)
}
public deleteByIds(params):Promise<AxiosResponse<ActionResult<any>>>{
const url = this.prefix.system+'/user/list';
const url = this.prefix.prevention+'/risk/unit';
return this.deleteBatch(url,params,{},true)
}
public getUnitNumber(params):Promise<AxiosResponse<ActionResult<any>>>{
const url = this.prefix.prevention+'/risk/unit/number';
return this.get(url,params)
}
public getUnitTree():Promise<AxiosResponse<ActionResult<any>>>{
const url = this.prefix.prevention+'/risk/unit/tree';
return this.get(url,null)
}
// 新增或更新
public addOrUpdate(params: any, add: boolean,showLoading?:boolean): Promise<AxiosResponse<ActionResult<any>>>{
const url = this.prefix.prevention+'/risk/unit';

22
src/store/index.ts
View File

@ -9,12 +9,23 @@ export default new Vuex.Store({
deptTreeList:[],
userList:[],
common_yes_no:[],
yesNoMap:{
0:"否",
1:"是"
}
prevention_dangrous_level:[],
},
getters: {
common_yes_no_map:(state)=>{
const map = {};
state.common_yes_no.forEach((item:any)=>{
map[item.value] = item.name
})
return map
},
prevention_dangrous_level_map:(state)=>{
const map = {};
state.common_yes_no.forEach((item:any)=>{
map[item.value] = item.name
})
return map
}
},
mutations: {
@ -29,6 +40,9 @@ export default new Vuex.Store({
},
set_common_yes_no(state,data){
state.common_yes_no = data;
},
set_prevention_dangrous_level(state,data){
state.prevention_dangrous_level = data;
}
},
actions: {

9
src/views/blank.component.vue
View File

@ -13,7 +13,8 @@ export default class BlankComponent extends Vue {
this.systemService.getDeptTree(),
this.systemService.getDeptList(),
this.systemService.getUserList({pageSize:0}),
this.systemService.getDictData("common_yes_no")
this.systemService.getDictData("common_yes_no"),
this.systemService.getDictData("prevention_dangrous_level")
]).then(((results:any)=>{
this.$store.commit("setDeptTreeList",results[0].data);
@ -36,6 +37,12 @@ export default class BlankComponent extends Vue {
value:isNaN(+item.dictValue)?item.dictValue:+item.dictValue
}
}))
this.$store.commit("set_prevention_dangrous_level",results[4].data.map(item=>{
return {
name:item.dictLabel,
value:isNaN(+item.dictValue)?item.dictValue:+item.dictValue
}
}))
}))
}
}

98
src/views/risk/area/area.component.vue
View File

@ -105,6 +105,7 @@ export default class AreaManagerComponent extends BaseRecordComponent<any> {
name:"区域编号",
key:"number",
type:"text",
disable:true,
showError:false,
width:"calc(50% - 20px)",
require:true
@ -137,6 +138,7 @@ export default class AreaManagerComponent extends BaseRecordComponent<any> {
},{
name:"属于重大危险源",
key:"majorHazardFlag",
format:"majorHazardName",
type:"radio",
width:"calc(50% - 20px)",
require:true,
@ -186,6 +188,14 @@ export default class AreaManagerComponent extends BaseRecordComponent<any> {
size:"small",
icon:"el-icon-edit-outline",
type:"primary"
},{
name:"查看绘制",
value:"readDraw",
hide:!this.isReadonly,
height:"36px",
size:"small",
icon:"el-icon-edit-outline",
type:"primary"
}]
}];
@ -224,7 +234,7 @@ export default class AreaManagerComponent extends BaseRecordComponent<any> {
this.tableColumn.push({name:'责任部门',key:"chargeDeptName"});
this.tableColumn.push({name:'责任人',key:"chargeUserName"});
this.tableColumn.push({name:'是否属于重大危险源',key:"majorHazardFlag",render:(data)=>{
return this.$store.state.yesNoMap[data.majorHazardFlag]
return this.$store.getters.common_yes_no_map[data.majorHazardFlag]
}});
this.tableColumn.push({name:'绘制情况',render:(data)=>{
if(data.geoJson==='[]' || !data.geoJson){
@ -235,50 +245,75 @@ export default class AreaManagerComponent extends BaseRecordComponent<any> {
}});
}
public doDraw(){
if(!this.updateParams.name){
this.$message.error("请先输入区域名称");
return
}
this.drawModel = "area";
this.showDraw = true;
}
public getCreateNumber(){
this.tableService.getAreaNumber().then((res)=>{
this.updateParams = {bottomHeight:0,topHeight:0,geoJson:"[]",number:res.data} as any;
this.buildFormOptions();
this.showUpdate = true
})
}
public doSave(goOn?){
this.tableService.addOrUpdate(this.updateParams,this.currentId===-1).then((res)=>{
this.$message.success(this.currentId===-1?"新增成功！":"修改成功！");
if(goOn){
this.getCreateNumber();
}else{
this.handleClose();
}
this.getTableData();
})
}
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 === "majorHazardFlag"){
this.updateOptions[5].hide = !data;
this.updateOptions[6].hide = !data;
}
// 查询
if(data.value==="search"){
if(data && data.value==="search"){
this.getTableData()
// 重置
}else if(data.value === "reset"){
}else if(data && data.value === "reset"){
this.reset()
// 反选
}else if(data.value === "reverse"){
}else if(data && data.value === "reverse"){
this.toggleAll()
// 全选
}else if(data.value === "selectAll"){
}else if(data && data.value === "selectAll"){
this.selectAll()
}else if(data.value === "add"){
}else if(data && data.value === "add"){
this.showUpdateModel()
}else if(data.value === "delete"){
}else if(data && 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 = "area";
this.showDraw = true;
}else if(data.value === "drawList"){
}else if(data && (data.value === "draw" || data.value==="readDraw")){
this.doDraw()
}else if(data && 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"){
}else if(data && data.value === "submit"){
this.doSave()
}else if(data && data.value === "saveAndContinue"){
this.doSave(true)
}else if(data && data.value === "cancel"){
this.updateParams = {} as any;
this.handleClose();
}
@ -299,14 +334,15 @@ export default class AreaManagerComponent extends BaseRecordComponent<any> {
public showUpdateModel(data?,isRead?){
if(!data){
this.currentId = -1;
this.updateParams = {bottomHeight:0,topHeight:0,geoJson:"[]"} as any
this.getCreateNumber();
}else{
this.currentId = data.id;
this.updateParams = Object.assign({bottomHeight:0,topHeight:0,geoJson:"[]"},data);
this.updateParams = Object.assign({bottomHeight:0,topHeight:0,geoJson:"[]",majorHazardName:this.$store.getters.common_yes_no_map[data.majorHazardFlag]},data);
this.isReadonly = !!isRead;
this.buildFormOptions();
this.isReadonly = !!isRead
this.showUpdate = true
}
this.showUpdate = true
}
public handleClose(){

5
src/views/risk/areaUnit.component.html
View File

@ -24,7 +24,7 @@
<template slot-scope="scope">
<el-button type="text" @click="showUpdateModel(scope.row,true)">查看</el-button>
<el-button type="text" @click="showUpdateModel(scope.row)">修改</el-button>
<el-button type="text" @click="deleteData([scope.row])">删除</el-button>
<el-button type="text" @click="deleteData([scope.row.id])">删除</el-button>
<el-button type="text">二维码</el-button>
</template>
</el-table-column>
@ -35,7 +35,7 @@
</div>
<div class="model-box" v-if="showDraw">
<div class="mask"></div>
<DrawComponent :model.sync="drawModel" :data.sync="updateParams" :show.sync="showDraw"></DrawComponent>
<DrawComponent :model.sync="drawModel" :isReadonly="isReadonly" :data.sync="updateParams" :show.sync="showDraw" @onClose="getTableData"></DrawComponent>
</div>
<el-dialog :close-on-click-modal="false" :title="isReadonly?'详情':currentId===-1?'新增':'编辑'" :visible.sync="showUpdate" width="952px"
@ -43,5 +43,6 @@
<FormComponent :options="updateOptions" :isReadonly="isReadonly" labelWidth="110px" labelAlign="right" :data.sync="updateParams"
@actionCallback="callback" :actions="updateActions" :full-btn="true" @change="callback"
btn-position="center"></FormComponent>
</el-dialog>
</div>

86
src/views/risk/unit/unit.component.vue
View File

@ -105,6 +105,7 @@ export default class UnitManagerComponent extends BaseRecordComponent<any> {
name:"单元编号",
key:"number",
type:"text",
disable:true,
width:"calc(50% - 20px)",
require:true
},{
@ -126,6 +127,7 @@ export default class UnitManagerComponent extends BaseRecordComponent<any> {
},{
name:"责任人",
key:"chargeUserId",
format:"chargeUserName",
type:"select",
width:"calc(50% - 20px)",
require:true,
@ -142,6 +144,14 @@ export default class UnitManagerComponent extends BaseRecordComponent<any> {
size:"small",
icon:"el-icon-edit-outline",
type:"primary"
},{
name:"查看绘制",
value:"readDraw",
hide:!this.isReadonly,
height:"36px",
size:"small",
icon:"el-icon-edit-outline",
type:"primary"
}]
}];
@ -196,7 +206,36 @@ export default class UnitManagerComponent extends BaseRecordComponent<any> {
})
}
public doDraw(){
console.log("openDraw")
if(!this.updateParams.name){
this.$message.error("请先输入单元名称");
return
}
this.drawModel = "unit";
this.showDraw = true;
}
public getCreateNumber(params){
this.tableService.getUnitNumber(params).then((res)=>{
this.updateParams.number = res.data;
})
}
public doSave(goOn?){
this.tableService.addOrUpdate(this.updateParams,this.currentId===-1).then((res)=>{
this.$message.success(this.currentId===-1?"新增成功！":"修改成功！");
if(goOn){
this.updateParams = {bottomHeight:0,topHeight:0,geoJson:"[]",number:null} as any;
}else{
this.handleClose();
}
this.getTableData();
})
}
public callback(data,item?){
console.log(data,item)
// 新增编辑选择部门
if(item && item.key === "chargeDeptId"){
this.updateParams.chargeDeptName = this.$store.state.deptList.find(item=>item.value === data)?.name;
@ -207,48 +246,35 @@ export default class UnitManagerComponent extends BaseRecordComponent<any> {
}
// 新增编辑选择区域
if(item && item.key === "areaId"){
console.log(item)
this.updateParams.areaNo = this.areaNoMap[data];
console.log(this.updateParams)
this.getCreateNumber({areaNo:this.updateParams.areaNo})
}
// 查询
if(data.value==="search"){
if(data && data.value==="search"){
this.getTableData()
// 重置
}else if(data.value === "reset"){
}else if(data && data.value === "reset"){
this.reset()
// 反选
}else if(data.value === "reverse"){
}else if(data && data.value === "reverse"){
this.toggleAll()
// 全选
}else if(data.value === "selectAll"){
}else if(data && data.value === "selectAll"){
this.selectAll()
}else if(data.value === "add"){
}else if(data && data.value === "add"){
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"){
}else if(data && (data.value === "draw" || data.value==="readDraw")){
this.doDraw()
}else if(data && 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"){
}else if(data && data.value === "submit"){
this.doSave()
}else if(data && data.value === "saveAndContinue"){
this.doSave(true)
}else if(data && data.value === "cancel"){
this.updateParams = {} as any;
this.handleClose();
}
@ -269,10 +295,11 @@ export default class UnitManagerComponent extends BaseRecordComponent<any> {
public showUpdateModel(data?,isRead?){
if(!data){
this.currentId = -1;
this.updateParams = {bottomHeight:0,topHeight:0,geoJson:"[]"} as any
this.updateParams = {bottomHeight:0,topHeight:0,geoJson:"[]",number:null} as any;
this.showUpdate = true
}else{
this.currentId = data.id;
this.updateParams = Object.assign({bottomHeight:0,topHeight:0,geoJson:"[]"},data);
this.updateParams = Object.assign({bottomHeight:0,topHeight:0,geoJson:"[]",number:null},data);
this.isReadonly = !!isRead;
this.buildFormOptions();
}
@ -280,6 +307,7 @@ export default class UnitManagerComponent extends BaseRecordComponent<any> {
}
public handleClose(){
this.updateParams = {} as any;
this.showUpdate = false;
this.currentId = -1;
this.isReadonly = false;