| | |
| | | </el-button> |
| | | </template> |
| | | <template slot-scope="{type,size,row,index}" slot="menu"> |
| | | <el-button icon="el-icon-coordinate" :size="size" :type="type" |
| | | @click="handlePersonList(row)">活动人员</el-button> |
| | | <el-button icon="el-icon-data-line" :size="size" :type="type" |
| | | @click="handleCarList(row)">活动车辆</el-button> |
| | | <el-button icon="el-icon-coordinate" :size="size" :type="type" @click="handlePersonList(row)">活动人员 |
| | | </el-button> |
| | | <el-button icon="el-icon-data-line" :size="size" :type="type" @click="handleCarList(row)">活动车辆 |
| | | </el-button> |
| | | </template> |
| | | <!-- <template slot="activityAreaForm"> --> |
| | | <!-- <dc-map ref="dcMap" @toData="toData" :range="form.activityArea"></dc-map> --> |
| | | <!-- </template> --> |
| | | |
| | | </avue-crud> |
| | | |
| | | <el-drawer title="活动人员区域" :visible.sync="personBox" :append-to-body="true" size="50%" :destroy-on-close="true"> |
| | |
| | | <el-drawer title="活动车辆区域" :visible.sync="carBox" :append-to-body="true" size="50%" :destroy-on-close="true"> |
| | | <securityManageCar ref="car" :securityId="securityId" /> |
| | | </el-drawer> |
| | | |
| | | <el-dialog title="提示" :visible.sync="placeBox" append-to-body destroy-on-close width="70%"> |
| | | <search-map @getLonLat="getLonLat" @getAddress="getAddress" :point-lon-lat="point"></search-map> |
| | | <span slot="footer" class="dialog-footer"> |
| | | <el-button type="primary" @click="confirmLonLat">确 定</el-button> |
| | | </span> |
| | | </el-dialog> |
| | | </basic-container> |
| | | </template> |
| | | |
| | |
| | | import { mapGetters } from "vuex" |
| | | import securityManage from "@/views/securityManage/securityManage" |
| | | import securityManageCar from "@/views/securityManageCar/securityManageCar" |
| | | import MapBox from "@/components/map/mapBox" |
| | | import SearchMap from "@/components/map/searchMap" |
| | | import DcMap from "@/components/map/dcMap" |
| | | |
| | | export default { |
| | | components: { |
| | | DcMap, |
| | | SearchMap, |
| | | MapBox, |
| | | securityManage, |
| | | securityManageCar |
| | | }, |
| | |
| | | securityId: "", |
| | | carBox: false, |
| | | personBox: false, |
| | | placeBox: false, |
| | | point: "", |
| | | chosePoint: {}, |
| | | form: {}, |
| | | query: {}, |
| | | loading: true, |
| | |
| | | message: "请输入活动名称", |
| | | trigger: "blur" |
| | | }], |
| | | overHidden: true, |
| | | }, |
| | | { |
| | | label: "负责单位", |
| | | prop: "company", |
| | | hide: true, |
| | | }, |
| | | { |
| | | label: "负责人", |
| | | prop: "person", |
| | | width: 80, |
| | | placeholder: '请输入民警姓名', |
| | | rules: [{ |
| | | required: true, |
| | | message: "请输入负责人", |
| | | message: "请输入民警姓名", |
| | | trigger: "blur" |
| | | }], |
| | | }, |
| | |
| | | }], |
| | | }, |
| | | { |
| | | type: 'select', |
| | | label: "活动地点", |
| | | prop: "place", |
| | | // addDisplay: false, |
| | | // editDisplay: false, |
| | | // viewDisplay: false, |
| | | }, |
| | | { |
| | | label: "所属辖区", |
| | | prop: "deptId", |
| | | type: "tree", |
| | | dicUrl: "api/blade-system/dept/lazy-list", |
| | | props: { |
| | | label: 'deptName', |
| | | value: 'id', |
| | | children: 'children' |
| | | span: 24, |
| | | click: () => { |
| | | this.placeBox = !this.placeBox |
| | | }, |
| | | search: true, |
| | | searchSpan: 4, |
| | | width: 110, |
| | | overHidden: true, |
| | | rules: [{ |
| | | required: true, |
| | | message: "请选择所属辖区", |
| | | trigger: "blur" |
| | | }] |
| | | }, |
| | | // { |
| | | // label: "地址", |
| | | // prop: "avueMap", |
| | | // type: "map", |
| | | // }, |
| | | { |
| | | label: "开始时间", |
| | | prop: "startTime", |
| | | type: "datetime", |
| | | defaultTime: '00:00:00', |
| | | format: "yyyy-MM-dd HH:mm", |
| | | valueFormat: "yyyy-MM-dd HH:mm:ss", |
| | | rules: [{ |
| | | required: true, |
| | | message: "请输入开始时间", |
| | | message: "请选择活动地点", |
| | | trigger: "blur" |
| | | }], |
| | | width: 120, |
| | | }, |
| | | { |
| | | label: "结束时间", |
| | | prop: "endTime", |
| | | type: "datetime", |
| | | defaultTime: '23:59:59', |
| | | format: "yyyy-MM-dd HH:mm", |
| | | valueFormat: "yyyy-MM-dd HH:mm", |
| | | rules: [{ |
| | | required: true, |
| | | message: "请输入结束时间", |
| | | trigger: "blur" |
| | | }], |
| | | width: 120, |
| | | }, |
| | | |
| | | { |
| | | label: "经度", |
| | | prop: "longitude", |
| | | span: 12, |
| | | hide: true, |
| | | disabled: true, |
| | | rules: [{ |
| | | required: true, |
| | | message: "请输入纬度", |
| | |
| | | prop: "latitude", |
| | | span: 12, |
| | | hide: true, |
| | | disabled: true, |
| | | rules: [{ |
| | | required: true, |
| | | message: "请输入纬度", |
| | | trigger: "blur" |
| | | }], |
| | | }, |
| | | // { |
| | | // label: "活动区域", |
| | | // prop: "activityArea", |
| | | // type: "input", |
| | | // hide: true, |
| | | // span: 24, |
| | | // display: true, |
| | | // addDisplay: true, |
| | | // rules: [{ |
| | | // required: true, |
| | | // message: "请绘制活动区域", |
| | | // trigger: "blur" |
| | | // }], |
| | | // }, |
| | | { |
| | | label: "所属辖区", |
| | | prop: "deptId", |
| | | type: "tree", |
| | | dicUrl: "api/blade-system/dept/getPoliceStationTree", |
| | | props: { |
| | | label: 'name', |
| | | value: 'id', |
| | | children: 'children' |
| | | }, |
| | | search: true, |
| | | searchSpan: 4, |
| | | defaultExpandAll: "true", |
| | | width: 110, |
| | | rules: [{ |
| | | required: true, |
| | | message: "请选择所属辖区", |
| | | trigger: "blur" |
| | | }] |
| | | }, |
| | | { |
| | | label: "标绘类型", |
| | | prop: "plotType", |
| | | type: "select", |
| | | dicData: [ |
| | | { |
| | | label: "二维", |
| | | value: 1 |
| | | }, |
| | | { |
| | | label: "三维", |
| | | value: 3 |
| | | } |
| | | ], |
| | | search: true, |
| | | searchSpan: 4, |
| | | rules: [{ |
| | | required: true, |
| | | message: "请选择标绘类型", |
| | | trigger: "blur" |
| | | }] |
| | | }, |
| | | // { |
| | | // label: "地址", |
| | | // prop: "avueMap", |
| | | // type: "map", |
| | | // }, |
| | | { |
| | | span: 24, |
| | | label: "时间范围", |
| | | prop: "datetimerange", |
| | | type: "datetimerange", |
| | | // defaultTime: ['00:00', '00:00'], |
| | | format: "yyyy-MM-dd HH:mm", |
| | | valueFormat: "yyyy-MM-dd HH:mm", |
| | | startPlaceholder: '开始时间', |
| | | endPlaceholder: '结束时间', |
| | | rules: [{ |
| | | required: true, |
| | | message: "请选择时间范围", |
| | | trigger: "blur" |
| | | }], |
| | | width: 120, |
| | | }, |
| | | // { |
| | | // label: "开始时间", |
| | | // prop: "startTime", |
| | | // type: "datetime", |
| | | // defaultTime: '00:00:00', |
| | | // format: "yyyy-MM-dd HH:mm", |
| | | // valueFormat: "yyyy-MM-dd HH:mm:ss", |
| | | // rules: [{ |
| | | // required: true, |
| | | // message: "请输入开始时间", |
| | | // trigger: "blur" |
| | | // }], |
| | | // width: 120, |
| | | // }, |
| | | // { |
| | | // label: "结束时间", |
| | | // prop: "endTime", |
| | | // type: "datetime", |
| | | // defaultTime: '23:59:59', |
| | | // format: "yyyy-MM-dd HH:mm", |
| | | // valueFormat: "yyyy-MM-dd HH:mm", |
| | | // disabledDate (time) { |
| | | // return time.getTime() < Date.now() |
| | | // }, |
| | | // rules: [{ |
| | | // required: true, |
| | | // message: "请输入结束时间", |
| | | // trigger: "blur" |
| | | // }], |
| | | // width: 120, |
| | | // }, |
| | | // { |
| | | // label: "", |
| | | // prop: "map", |
| | |
| | | // // display:false, |
| | | // component: "AvueMap", |
| | | // }, |
| | | |
| | | { |
| | | label: "活动类型", |
| | | prop: "type", |
| | |
| | | label: "人数", |
| | | prop: "number", |
| | | width: 60, |
| | | rules: [{ |
| | | required: true, |
| | | message: "请输入人数", |
| | | trigger: "blur" |
| | | }], |
| | | }, |
| | | { |
| | | label: "活动内容", |
| | | prop: "content", |
| | | type: "textarea", |
| | | span: 24 |
| | | span: 24, |
| | | hide: true, |
| | | }, |
| | | ] |
| | | }, |
| | |
| | | }) |
| | | }, |
| | | rowSave (row, done, loading) { |
| | | row.startTime = row.datetimerange[0] |
| | | row.endTime = row.datetimerange[1] |
| | | |
| | | row.position = row.longitude + " " + row.latitude |
| | | add(row).then(() => { |
| | | this.onLoad(this.page) |
| | |
| | | }) |
| | | }, |
| | | rowUpdate (row, index, done, loading) { |
| | | row.startTime = row.datetimerange[0] |
| | | row.endTime = row.datetimerange[1] |
| | | |
| | | row.position = row.longitude + " " + row.latitude |
| | | update(row).then(() => { |
| | | this.onLoad(this.page) |
| | |
| | | getDetail(this.form.id).then(res => { |
| | | var data = res.data.data |
| | | this.form = data |
| | | this.form['datetimerange'] = [data.startTime, data.endTime] |
| | | this.form['longitude'] = data.position.split(" ")[0] |
| | | this.form['latitude'] = data.position.split(" ")[1] |
| | | this.point = "POINT(" + this.form.longitude + " " + this.form.latitude + ")" |
| | | this.$refs.dcMap.showPolygon(this.form.activityArea) |
| | | }) |
| | | } |
| | | done() |
| | |
| | | handleCarList (row) { |
| | | this.carBox = true |
| | | this.securityId = row.id |
| | | }, |
| | | //地图传回的polygon坐标 |
| | | toData (data) { |
| | | console.log('data', data) |
| | | this.form.activityArea = data |
| | | }, |
| | | getLonLat (data) { |
| | | this.chosePoint.longitude = data[0] |
| | | this.chosePoint.latitude = data[1] |
| | | }, |
| | | getAddress (data) { |
| | | this.chosePoint.address = data |
| | | }, |
| | | confirmLonLat () { |
| | | if (this.chosePoint.longitude) { |
| | | this.form.longitude = this.chosePoint.longitude |
| | | this.form.latitude = this.chosePoint.latitude |
| | | this.form.place = this.chosePoint.address |
| | | this.point = "POINT(" + this.form.longitude + " " + this.form.latitude + ")" |
| | | this.placeBox = false |
| | | } else { |
| | | this.$alert('该点没有位置信息,请重新选点!', '提示', { |
| | | confirmButtonText: '确定', |
| | | }) |
| | | } |
| | | |
| | | } |
| | | } |
| | | } |
| | | </script> |
| | | |
| | | <style> |
| | | |
| | | </style> |
| | | <style></style> |