This commit is contained in:
2309368887@qq.com 2022-06-27 10:41:08 +08:00
commit 862deb2ee3
4 changed files with 635 additions and 5 deletions

View File

@ -5,7 +5,7 @@ export default {
area: { area: {
list: { list: {
name: "获取", name: "获取区域列表",
req: async function(data){ req: async function(data){
return await http.get( return await http.get(
`${config.API_URL}/am/area/`, `${config.API_URL}/am/area/`,
@ -13,8 +13,16 @@ export default {
); );
} }
}, },
item: {
name: "获取某个区域详情",
req: async function(data){
return await http.get(
`${config.API_URL}/am/area/${id}/`
);
}
},
update: { update: {
name: "更新", name: "更新区域",
req: async function(id, data){ req: async function(id, data){
return await http.put( return await http.put(
`${config.API_URL}/am/area/${id}/`, `${config.API_URL}/am/area/${id}/`,
@ -22,15 +30,31 @@ export default {
} }
}, },
create: { create: {
name: "创建", name: "创建区域",
req: async function(data){ req: async function(data){
return await http.post( return await http.post(
`${config.API_URL}/am/area/`, `${config.API_URL}/am/area/`,
data); data);
} }
}, },
bindRail: {
name: "绑定围栏",
req: async function(id,data){
return await http.post(
`${config.API_URL}/am/area/${id}/bind_rail/`,
data);
}
},
deletes: {
name: "批量删除区域",
req: async function(data){
return await http.post(
`${config.API_URL}/am/area/deletes/`,
data);
}
},
delete: { delete: {
name: "删除", name: "删除区域",
req: async function(id){ req: async function(id){
return await http.delete( return await http.delete(
`${config.API_URL}/am/area/${id}/`); `${config.API_URL}/am/area/${id}/`);

View File

@ -0,0 +1,205 @@
<template>
<el-container>
<el-header>
<div class="left-panel">
<el-button type="primary" icon="el-icon-plus" @click="handleForm('add')"></el-button>
</div>
<div class="right-panel">
<div class="right-panel-search">
<el-input v-model="search.keyword" placeholder="姓名/手机号" clearable @click="upsearch"></el-input>
<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
</div>
</div>
</el-header>
<el-main class="nopadding">
<scTable ref="table" :apiObj="apiObj" row-key="id" @selection-change="selectionChange" stripe @resetQuery="resetQuery" >
<el-table-column type="selection" width="50"></el-table-column>
<el-table-column label="序号" type="index" width="50"></el-table-column>
<el-table-column label="区域编号" prop="number" min-width="100"></el-table-column>
<el-table-column label="区域名称" prop="name" min-width="150"></el-table-column>
<el-table-column label="区域类型" min-width="100">
<template #default="scope">{{cates[scope.row.cate]}}</template>
</el-table-column>
<el-table-column label="风险等级" min-width="100">
<template #default="scope">{{levels[scope.row.level]}}</template>
</el-table-column>
<el-table-column label="访客人员" min-width="100">
<template #default="scope">
<span v-if="scope.row.visitor_yes">允许进入</span>
<span v-else>禁止进入</span>
</template>
</el-table-column>
<el-table-column label="相关方人员" min-width="100">
<template #default="scope">
<span v-if="scope.row.remployee_yes">允许进入</span>
<span v-else>禁止进入</span>
</template>
</el-table-column>
<el-table-column label="全部员工" min-width="100">
<template #default="scope">
<span v-if="scope.row.employee_yes">允许进入</span>
<span v-else>审批进入</span>
</template>
</el-table-column>
<el-table-column label="最小人员数" prop="count_people_min" min-width="90"></el-table-column>
<el-table-column label="最大人员数" prop="count_people_max" min-width="90"></el-table-column>
<el-table-column label="当前人数" prop="count_people" min-width="90"></el-table-column>
<el-table-column label="所属部门" prop="create_time" min-width="180"></el-table-column>
<el-table-column label="创建时间" prop="create_time" width="160"></el-table-column>
<el-table-column label="操作" fixed="right" align="center" width="120">
<template #default="scope">
<el-button-group>
<el-button text type="primary" size="small" @click="handleRail(scope.row)">围栏</el-button>
<el-button text type="warning" size="small" @click="handleForm('edit',scope.row)">编辑</el-button>
<el-popconfirm title="确定删除吗?" @confirm="handleDel(scope.row, scope.$index)">
<template #reference>
<el-button text type="danger" size="small">删除</el-button>
</template>
</el-popconfirm>
</el-button-group>
</template>
</el-table-column>
</scTable>
</el-main>
</el-container>
<save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSaveSuccess" @closed="dialog.save=false"></save-dialog>
<save-rail-dialog v-if="dialog.saveRail" ref="saveRailDialog" :areaId="areaId" :areaName="areaName" @success="handleSaveSuccess" @closed="dialog.saveRail=false"></save-rail-dialog>
</template>
<script>
import saveDialog from './area_form.vue'
import saveRailDialog from './area_rail_form.vue'
export default {
name: 'amArea',
components: {
saveDialog,
saveRailDialog
},
data() {
return {
dialog: {
save: false,
saveRail: false,
permission: false
},
apiObj: this.$API.am.area.list,
query: {},
selection: [],
search: {
keyword: null
},
levels:{
10:'低风险',
20:'一般风险',
30:'较大风险',
40:'重大风险',
},
cates:{
10:'生活区域',
20:'一般区域',
30:'重点区域',
},
areaId:null,
areaName:'',
}
},
methods: {
///
handleForm(type,row) {
this.dialog.save = true;
this.$nextTick(() => {
if(type==='add'){
this.$refs.saveDialog.open(type)
}else{
this.$refs.saveDialog.open(type).setData(row)
}
})
},
handleRail(row){
this.areaId = row.id;
this.areaName = row.name;
this.dialog.saveRail = true;
},
//
async handleDel(row){
await this.$API.am.area.delete.req(row.id).then(res=>{
if(res.err_msg){
this.$message.error(res.err_msg);
}else{
this.$refs.table.refresh();
this.$message.success("删除成功")
}
});
},
//
async batch_del(){
this.$confirm(`确定删除选中的 ${this.selection.length} 项吗?如果删除项中含有子集将会被一并删除`, '提示', {
type: 'warning'
}).then(() => {
const loading = this.$loading();
let params = {pk:{pks:this.selection}};
this.$API.am.area.deletes.req(params).then(res=>{
loading.close();
if(res.err_msg){
this.$message.error(res.err_msg);
}else{
this.$refs.table.refresh();
this.$message.success("删除成功")
}
});
}).catch(() => {
})
},
//
selectionChange(selection){
this.selection = selection;
},
//
changeSwitch(val, row){
row.status = row.status == '1'?'0':'1'
row.$switch_status = true;
setTimeout(()=>{
delete row.$switch_status;
row.status = val;
this.$message.success("操作成功")
}, 500)
},
//
upsearch(){
},
//ID
filterTree(id){
var target = null;
function filter(tree){
tree.forEach(item => {
if(item.id == id){
target = item
}
if(item.children){
filter(item.children)
}
})
}
filter(this.$refs.table.tableData)
return target
},
//
handleSaveSuccess(data, mode){
if(mode=='add'){
this.$refs.table.refresh()
}else if(mode=='edit'){
this.$refs.table.refresh()
}
},
resetQuery(){
this.query = {}
}
}
}
</script>

235
src/views/am/area_form.vue Normal file
View File

@ -0,0 +1,235 @@
<template>
<el-Dialog
:title="titleMap[mode]"
v-model="visible"
destroy-on-close
@closed="closeDrawer"
>
<el-form
ref="dialogForm"
:model="form"
:rules="rules"
:disabled="mode==='show'"
label-width="120px"
>
<el-row>
<el-col :md="12" :sm="24">
<el-form-item label="区域名称" prop="name">
<el-input v-model="form.name" placeholder="请输入真实姓名" clearable></el-input>
</el-form-item>
</el-col>
<el-col :md="12" :sm="24">
<el-form-item label="区域类型" prop="cate">
<el-select v-model="form.cate" style="width: 100%">
<el-option
v-for="item in cateOptions"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :md="12" :sm="24">
<el-form-item label="风险等级" prop="level">
<el-select v-model="form.level" style="width: 100%">
<el-option
v-for="item in levelOptions"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :md="12" :sm="24">
<el-form-item label="区域编号">
<el-input v-model="form.number" placeholder="请输入手机号" clearable></el-input>
</el-form-item>
</el-col>
<el-col :md="12" :sm="24">
<el-form-item label="所属部门">
<el-cascader
v-model="form.dept"
:options="group"
:props="groupsProps"
clearable
style="width: 100%;">
</el-cascader>
</el-form-item>
</el-col>
<el-col :md="12" :sm="24">
<el-form-item label="最小人员数">
<el-input v-model="form.count_people_min" placeholder="最小人员数" clearable></el-input>
</el-form-item>
</el-col>
<el-col :md="12" :sm="24">
<el-form-item label="最大人员数">
<el-input v-model="form.count_people_max" placeholder="最大人员数" clearable></el-input>
</el-form-item>
</el-col>
<el-col :md="12" :sm="24">
<el-form-item label="当前人数">
<el-input v-model="form.count_people" placeholder="当前人数" clearable></el-input>
</el-form-item>
</el-col>
<el-col :md="12" :sm="24">
<el-form-item label="准许访客人员">
<el-switch v-model="form.visitor_yes"/>
</el-form-item>
</el-col>
<el-col :md="12" :sm="24">
<el-form-item label="准许相关方人员">
<el-switch v-model="form.remployee_yes"/>
</el-form-item>
</el-col>
<el-col :md="12" :sm="24">
<el-form-item label="准许全部员工">
<el-switch v-model="form.employee_yes"/>
</el-form-item>
</el-col>
</el-row>
</el-form>
<template #footer>
<el-button
type="primary"
:loading="isSaveing"
@click="submit"
>
保存
</el-button>
<el-button @click="visible = false">取消</el-button>
</template>
</el-Dialog>
</template>
<script>
import {genTree} from "@/utils/verificate";
const defaultForm = {
id: null,
name: '',
level: 10,
number: '',
visitor_yes: false,
remployee_yes: false,
employee_yes: false,
belong_dept: '',
count_people_min: 1,
count_people_max: 1,
count_people: 0,
cate: 10,
};
export default {
emits: ["success", "closed"],
data() {
return {
loading: false,
mode: "add",
titleMap: {
add: '新增区域',
edit: '区域编辑',
},
levelOptions:[
{id:10,name:'低风险'},
{id:20,name:'一般风险'},
{id:30,name:'较大风险'},
{id:40,name:'重大风险'}
],
cateOptions:[
{id:10,name:'生活区域'},
{id:20,name:'一般区域'},
{id:30,name:'重点区域'}
],
visible: false,
isSaveing: false,
form: defaultForm,
//
rules: {
name: [
{required: true, message: '请输入区域名称'}
],
level: [
{required: true, message: ' 区域风险等级'}
],
cate: [
{required: true, message: '区域分类'}
],
},
groupsProps: {
// value: "id",
multiple: false,
emitPath: false,
checkStrictly: true,
},
group: [],
postOptions: [],
selectionFilters: [],
};
},
mounted() {
this.getGroup();
},
methods: {
//
async getGroup() {
let res = await this.$API.system.dept.list.req({page: 0});
this.group =genTree(res);
},
//
open(mode) {
this.mode = mode;
this.visible = true;
return this;
},
closeDrawer() {
this.visible = false;
this.$emit('closed');
},
//
submit() {
this.$refs.dialogForm.validate((valid) => {
if (valid) {
this.isSaveing = true;
if (this.mode === 'add') {
this.$API.am.area.create.req(this.form)
.then(res => {
this.isSaveing = false;
this.visible = false;
this.$emit("success", this.form, this.mode);
this.$message.success("操作成功");
return res
}).catch(err => {
this.isSaveing = false;
return err
})
} else {
this.$API.am.area.update.req(this.form.id, this.form)
.then(res => {
this.isSaveing = false;
this.visible = false;
this.$emit("success", this.form, this.mode);
this.$message.success("操作成功");
return res
}).catch(err => {
this.isSaveing = false;
return err
})
}
}
});
},
//
setData(data) {
console.log(defaultForm);
// this.form = defaultForm;
Object.assign(this.form, data);
},
},
};
</script>
<style>
</style>

View File

@ -0,0 +1,166 @@
<template>
<el-drawer
:title="areaName+'围栏设置'"
v-model="visible"
destroy-on-close
@closed="closeDrawer"
>
<el-container v-loading="loading">
<el-main style="padding: 0 20px 20px 20px;">
<!--地图-->
<div id='mapContainer1'></div>
</el-main>
<el-footer>
<el-button
type="primary"
:loading="isSaveing"
@click="submit"
>
保存
</el-button>
<el-button @click="visible = false">取消</el-button>
</el-footer>
</el-container>
</el-drawer>
</template>
<script>
export default {
emits: ["success", "closed"],
props: {
areaId: {
type: String,
},
areaName: {
type: String,
}
},
data() {
return {
loading: false,
visible: true,
isSaveing: false,
coordinates:[],
};
},
mounted() {
this.$nextTick(()=>{
this.loadMap();
})
},
methods: {
loadMap(){
let that = this;
window.map = new jsmap.JSMap({
mapType: jsmap.JSMapType.MAP_3D,
container: 'mapContainer1',
mapServerURL: 'data/map',
enableShadows: false, // false
enableLighting: false, // false
luminanceAtZenith: 0.54, //
scatteringIntensity: 1.0, //
specularIntensity: 0, //
mapScaleLevelRange: [16, 23],// 1623,[1,24]
floorControlOptions: {
floorHeight: 20,//
position: jsmap.JSControlPosition.RIGHT_TOP,//
offset: {
x: 10,
y: 10,
}//
},
imageryProvider: jsmap.JSImageryProviderType.VECTOR_OSM,
backgroundColor: '#3798ff', //
defaultTiltAngle: 30, //
defaultRotateAngle: 60, //
});
window.map.openMapById('0000');
window.map.on('loadComplete', e => {
console.log('Map loadComplete!');
var pointMarker = new jsmap.JSPointMarker({
color: '#00FF00', //
size: 10, //
position: new jsmap.JSPoint(114.628074820438, 38.8157131095379, 0), //
floorId: 2, //id,1
outlineColor: '#CD5C5C', //线
outlineWidth: 2, //线
depthTest: true, //
show: true, //
allowPicking: true, //
displayCondition: new jsmap.JSDisplayCondition(0.0, 1000), //
nearFarScale: new jsmap.JSNearFarScale(0.0, 10.0, 500, 0.5), //
callback: (node) => {
console.log(node);
}//
});
window.map.addMarker(pointMarker);
let drawTool2 = new jsmap.JSDrawToolControl({
position: jsmap.JSControlPosition.RIGHT_TOP, //
offset: {
x: 80,
y: 180
}, //
drawMode: jsmap.JSDrawMode.POLYGON, //POINT: POLYLINE:线 POLYGON:
//
callback: (feature) => {
console.log('add', feature);
console.log(feature.properties);//type:POLYGON;id:"";name:"";floorNo:"";floorId:""
console.log(feature.geometry);//feature.geometry.coordinates:[[],[]]
that.coordinates = feature.geometry.coordinates[0];
debugger;
},
//
removeCallback: (feature) => {
// console.log('remove', feature);
},
//
editCallback: (feature) => {
// console.log('editCallback', feature);
},
//
locateCallback: (feature) => {
// console.log('locate..', feature);
}
});
window.map.addControl(drawTool2);
});
},
closeDrawer() {
this.$emit('closed');
},
//
submit() {
if(this.coordinates.length>0){
this.isSaveing = true;
this.$API.am.area.bindRail.req(this.areaId,this.coordinates)
.then(res => {
this.isSaveing = false;
this.visible = false;
this.$emit("success");
this.$message.success("操作成功");
return res
}).catch(err => {
this.isSaveing = false;
return err
})
}else{
}
},
/*//表单注入数据
setData(data) {
console.log(defaultForm);
this.areaId = data.id;
this.areaName = data.name;
},*/
},
};
</script>
<style>
.el-drawer.rtl{
width: 90%!important;
}
</style>