<template>
|
<a-card :bordered="false" style="margin-top:24px">
|
<div class="tableList">
|
<div class="tableListForm">
|
<a-form-model layout="horizontal">
|
<a-row :gutter="15">
|
<a-col :span="5">
|
<a-button
|
icon="plus"
|
type="primary"
|
@click="() => this.handleModalVisible(true)"
|
style="margin-left: 25px;"
|
>新建</a-button
|
>
|
</a-col>
|
<a-col :span="5" style="margin-left: 37%">
|
<a-form-model-item :wrapperCol="wrapperCol">
|
<a-select
|
placeholder="选择组织"
|
style="width: 240px;margin-top:4px"
|
@change="handleChange"
|
allow-clear
|
show-search
|
>
|
<a-select-option
|
v-for="(item, index) in orgData"
|
:key="index"
|
:value="item.id"
|
>
|
{{ item.name }}
|
</a-select-option>
|
</a-select>
|
</a-form-model-item>
|
</a-col>
|
<a-col :span="5">
|
<a-form-model-item :wrapperCol="wrapperCol">
|
<a-input
|
v-model="searchName"
|
placeholder="请输入名称查询"
|
allow-clear
|
/>
|
</a-form-model-item>
|
</a-col>
|
</a-row>
|
</a-form-model>
|
</div>
|
<av-standard-table
|
:dataSource="dataSource"
|
:columns="columns"
|
:loading="tableLoading"
|
:paginationProps="pagination"
|
@tableChange="handlerTableChange"
|
></av-standard-table>
|
</div>
|
<a-modal
|
title="区域扩散图添加"
|
destroyOnClose
|
:visible="addShowOrHiddenFlag"
|
@ok="addOK"
|
@cancel="addCancel"
|
okText="保存"
|
>
|
<a-form-model
|
style="margin-top: 8px"
|
:model="addForm"
|
:rules="rules"
|
ref="addRulesForm"
|
>
|
<a-form-model-item
|
has-feedback
|
:labelCol="{ span: 5 }"
|
:wrapperCol="{ span: 15 }"
|
label="名称"
|
prop="name"
|
>
|
<a-input
|
placeholder="设备名称"
|
type="string"
|
v-model="addForm.name"
|
/>
|
</a-form-model-item>
|
<a-form-model-item
|
:labelCol="{ span: 5 }"
|
:wrapperCol="{ span: 15 }"
|
label="组织"
|
has-feedback
|
prop="orgId"
|
>
|
<a-select
|
placeholder="请选择组织"
|
type="string"
|
allow-clear
|
show-search
|
v-model="addForm.orgId"
|
>
|
<a-select-option
|
v-for="(item, index) in orgData"
|
:key="index"
|
:value="item.id"
|
>
|
{{ item.name }}
|
</a-select-option>
|
</a-select>
|
</a-form-model-item>
|
</a-form-model>
|
</a-modal>
|
<a-modal
|
title="区域扩散图编辑"
|
destroyOnClose
|
:visible="editShowOrHiddenFlag"
|
@ok="editSave"
|
@cancel="editCancel"
|
okText="保存"
|
>
|
<a-form-model
|
style="margin-top: 8px"
|
:model="editForm"
|
:rules="rules"
|
ref="editRulesForm"
|
>
|
<a-form-model-item
|
has-feedback
|
:labelCol="{ span: 5 }"
|
:wrapperCol="{ span: 15 }"
|
label="名称"
|
prop="name"
|
>
|
<a-input placeholder="名称" type="string" v-model="editForm.name" />
|
</a-form-model-item>
|
<a-form-model-item
|
:labelCol="{ span: 5 }"
|
:wrapperCol="{ span: 15 }"
|
label="组织"
|
has-feedback
|
>
|
<a-input
|
placeholder="名称"
|
type="string"
|
disabled="disabled"
|
v-model="editForm.orgName"
|
/>
|
</a-form-model-item>
|
</a-form-model>
|
</a-modal>
|
<a-modal
|
title="坐标选择"
|
width="70%"
|
destroyOnClose
|
:visible="areaPointConfigurationFlag"
|
@ok="editAreaPoint"
|
@cancel="editCancelMap"
|
okText="确定"
|
class="areaStyle"
|
>
|
<div>
|
<a-layout>
|
<a-layout>
|
<a-layout-sider>
|
<a-tree
|
v-model="checkedKeys"
|
checkable
|
@select="onSelect"
|
:tree-data="treeData"
|
@check="onCheck"
|
/>
|
</a-layout-sider>
|
|
<a-layout-content>
|
<div style="position: relative">
|
<baidu-map
|
@ready="handler"
|
:center="map.center"
|
:zoom="map.zoom"
|
:scroll-wheel-zoom="true"
|
@click="mapClick"
|
style="height: 600px;width: 100%; z-index: 9"
|
>
|
<bm-control>
|
<a-button
|
type="primary"
|
style="margin-top: 20px; margin-left: 10px; border: none"
|
@click="toggle"
|
>{{
|
polyline.editing ? "停止绘制" : "开始绘制"
|
}}</a-button
|
>
|
<a-button
|
type="primary"
|
style="margin-top: 20px; margin-left: 10px; border: none"
|
@click="chooseCenter"
|
>{{
|
!map.chooseCenter.flag ? "选择中心点" : "确认选择"
|
}}</a-button
|
>
|
<p
|
style="position: absolute;top: 20px;left: 240px;z-index: 10; width: 400px"
|
>
|
<a-input
|
disabled="disabled"
|
placeholder="中心点经度"
|
v-model="map.chooseCenter.point.lng"
|
style="display: inline; width: 160px;height: 32px"
|
/>
|
<a-input
|
disabled="disabled"
|
placeholder="中心点纬度"
|
v-model="map.chooseCenter.point.lat"
|
style="display: inline; width: 160px;height: 32px;margin-left: 10px"
|
/>
|
</p>
|
</bm-control>
|
<!-- <bm-local-search :keyword="keyword" :auto-viewport="true" style="display: none" ></bm-local-search>-->
|
<bm-marker
|
v-for="item in map.points"
|
:position="item.point"
|
></bm-marker>
|
<bm-circle
|
v-for="item in map.points"
|
:center="item.point"
|
:radius="2000"
|
stroke-color="red"
|
:stroke-opacity="0.5"
|
:stroke-weight="1"
|
:editing="false"
|
></bm-circle>
|
<bm-polygon
|
:path="polyline.points"
|
stroke-color="blue"
|
:stroke-opacity="0.5"
|
:stroke-weight="2"
|
:editing="polyline.editing"
|
@lineupdate="updatePolygonPath"
|
/>
|
<bm-marker
|
v-if="
|
map.chooseCenter.flag || map.chooseCenter.point.lat !== ''
|
"
|
:position="map.chooseCenter.point"
|
color="blue"
|
:dragging="true"
|
animation="BMAP_ANIMATION_BOUNCE"
|
></bm-marker>
|
</baidu-map>
|
</div>
|
</a-layout-content>
|
</a-layout>
|
</a-layout>
|
</div>
|
</a-modal>
|
</a-card>
|
</template>
|
|
<script lang="tsx">
|
import { Component, Vue, Watch } from "vue-property-decorator";
|
import org from "@/util/org";
|
import { get, post } from "@/util/request";
|
import axios from "axios";
|
|
@Component({
|
components: {},
|
})
|
export default class areaConfiguration extends Vue {
|
// 定义样式
|
private wrapperCol: any = {
|
sm: { span: 16 }, //控制文本框的长度
|
};
|
private orgData: any = [];
|
// 列头
|
private columns: any[] = [
|
{
|
title: "序号",
|
dataIndex: "key",
|
key: "key",
|
align: "center",
|
customRender: (text: any, record: any, index: any) => `${index + 1}`,
|
width: 60,
|
},
|
{
|
title: "名称",
|
dataIndex: "name",
|
},
|
{
|
title: "所属组织",
|
dataIndex: "organization_name",
|
},
|
{
|
title: "中心点经度",
|
dataIndex: "centerLongitude",
|
},
|
{
|
title: "中心点纬度",
|
dataIndex: "centerLatitude",
|
},
|
|
{
|
title: "创建时间",
|
dataIndex: "createTime",
|
},
|
{
|
title: "操作",
|
customRender: this.opRender,
|
},
|
];
|
// 用于查询站点模糊查询
|
private searchName: string = "";
|
// 用于检验是否有数据
|
private tableLoading: boolean = false;
|
// 数据
|
private dataSource: any[] = [];
|
// 查询的组织id
|
private queryId: any = undefined;
|
// 显示新增隐藏标识
|
private addShowOrHiddenFlag: boolean = false;
|
// 显示编辑隐藏标识
|
private editShowOrHiddenFlag: boolean = false;
|
// 区域点显示隐藏flag
|
private areaPointConfigurationFlag: boolean = false;
|
// 树数据
|
private treeData: any = [];
|
// 树结构初始选择
|
private checkedKeys: any = [];
|
// 存放数据信息，用在地图
|
private mapRecord: any = {};
|
// 绘制框
|
private polyline: any = {
|
editing: false,
|
points: [],
|
};
|
// 指定新增和编辑规则
|
private rules: any = {
|
name: [
|
{ required: true, message: "名称不能为空", trigger: ["change", "blur"] },
|
],
|
|
orgId: [
|
{ required: true, message: "请选择组织", trigger: ["change", "blur"] },
|
],
|
};
|
// 存放编辑前的数据record
|
private editBeforeRecord: any = null;
|
// 新增表单数据
|
private addForm: any = {
|
name: "",
|
orgId: undefined,
|
};
|
private handleChange(val: any) {
|
this.pagination.current = 1;
|
this.queryId = val;
|
this.getDataByCondition();
|
}
|
// 编辑表单数据
|
private editForm: any = {
|
name: "",
|
orgId: undefined,
|
orgName: "",
|
};
|
// 分页数据
|
private pagination: any = {
|
total: 0,
|
current: 1,
|
pageSize: 10,
|
showSizeChanger: true,
|
showQuickJumper: true,
|
pageSizeOptions: ["10", "30", "60", "100"],
|
showTotal: (total: number) => `共有 ${this.pagination.total} 条数据`, //分页中显示总的数据
|
};
|
// 站点信息
|
private monitorPoints: any = [];
|
// 选中的设备id
|
private deviceIds: any = [];
|
// 地图数据
|
private map: any = {
|
center: { lng: 116.404, lat: 39.915 },
|
zoom: 14,
|
points: [],
|
chooseCenter: {
|
point: { lng: "", lat: "" },
|
flag: false,
|
},
|
};
|
// 监听站点名称变化
|
@Watch("searchName", {
|
deep: true,
|
immediate: true,
|
})
|
private watchName() {
|
this.pagination.current = 1;
|
this.getDataByCondition();
|
}
|
// 生命周期函数
|
private created() {
|
this.getAllOrg();
|
this.getDataByCondition();
|
}
|
// 监听分页数据下标变化
|
private handlerTableChange(pagination: any, filter: any, sorter: any): void {
|
this.pagination.current = pagination.current;
|
this.pagination.pageSize = pagination.pageSize;
|
this.pagination.total = pagination.total;
|
this.getDataByCondition();
|
}
|
|
// 获得所有组织
|
private getAllOrg() {
|
get("organization/queryNames", {}).then((res) => {
|
this.orgData = res.data.data.organizationVOs.reverse();
|
});
|
}
|
// 查询所有区域范围数据
|
private getDataByCondition() {
|
let params = {};
|
if (this.queryId === undefined) {
|
params = {
|
name: this.searchName,
|
current: this.pagination.current,
|
size: this.pagination.pageSize,
|
};
|
} else {
|
params = {
|
orgId: this.queryId,
|
name: this.searchName,
|
current: this.pagination.current,
|
size: this.pagination.pageSize,
|
};
|
}
|
get("servicesScope/getDataByCondition", params).then((res: any) => {
|
if (res.data.code === 0) {
|
this.dataSource = res.data.data.servicesScopes;
|
this.pagination.total = res.data.data.totalNumber;
|
} else {
|
console.log("所有数据列表获取失败！");
|
}
|
});
|
}
|
// 新增成功
|
private addOK() {
|
post("servicesScope/insert", {
|
name: this.addForm.name,
|
organizationId: this.addForm.orgId,
|
})
|
.then((res: any) => {
|
if (res.data.code === 0) {
|
this.getDataByCondition();
|
this.addShowOrHiddenFlag = false;
|
this.addForm.name = "";
|
this.addForm.orgId = undefined;
|
this.$message.success(res.data.message);
|
} else {
|
this.$message.warning(res.data.message);
|
}
|
})
|
.catch((err: any) => {
|
this.$message.error("新增失败！");
|
});
|
}
|
// 新增显示
|
private handleModalVisible(flag: boolean) {
|
this.addShowOrHiddenFlag = flag;
|
}
|
// 新增取消
|
private addCancel() {
|
this.addForm.name = "";
|
this.addForm.orgId = undefined;
|
this.addShowOrHiddenFlag = false;
|
}
|
// 编辑显示
|
private editShow(flag: boolean, record: any) {
|
this.editBeforeRecord = record;
|
this.editShowOrHiddenFlag = flag;
|
this.editForm.name = record.name;
|
this.editForm.orgId = record.organizationId;
|
this.editForm.orgName = record.organization_name;
|
this.editBeforeRecord = record;
|
}
|
// 确认编辑
|
private editSave() {
|
this.$refs.editRulesForm.validate((valid: any) => {
|
if (valid) {
|
const name =
|
this.editForm.name === this.editBeforeRecord.name
|
? null
|
: this.editForm.name;
|
const organizationId =
|
this.editForm.orgId === this.editBeforeRecord.organizationId
|
? null
|
: this.editForm.orgId;
|
if (name === null && organizationId === null) {
|
this.$message.warning("未修改");
|
} else {
|
post("servicesScope/update", {
|
id: this.editBeforeRecord.id,
|
name: name,
|
organizationId: organizationId,
|
}).then((res: any) => {
|
if (res.data.code === 0) {
|
this.getDataByCondition();
|
this.editShowOrHiddenFlag = false;
|
this.editBeforeRecord = null;
|
this.$message.success(res.data.message);
|
} else {
|
this.$message.warning(res.data.message);
|
}
|
});
|
}
|
}
|
});
|
}
|
// 取消编辑
|
private editCancel() {
|
this.editShowOrHiddenFlag = false;
|
}
|
|
// 显示区域点弹窗
|
private areaPointConfiguration(flag: boolean, record: any) {
|
this.areaPointConfigurationFlag = flag;
|
this.mapRecord = record;
|
get("device/selectMonitorPiontAndDeviceByOrgId", {
|
organization_id: record.organizationId,
|
}).then((res) => {
|
if (res.data.code === 0) {
|
this.monitorPoints = res.data.data;
|
if (this.monitorPoints.length > 0) {
|
this.map.center.lng = this.monitorPoints[0].longitude;
|
this.map.center.lat = this.monitorPoints[0].latitude;
|
}
|
this.treeData = this.monitorPoints.map((item: any) => {
|
let devices = [];
|
if (item.devices.length > 0) {
|
devices = item.devices.map((device: any) => {
|
const d = {
|
key: item.id + "-" + device.id,
|
title: device.name,
|
value: {
|
longitude: device.longitude,
|
latitude: device.latitude,
|
},
|
};
|
return d;
|
});
|
}
|
const obj = {
|
key: item.id,
|
title: item.name,
|
value: {
|
longitude: item.longitude,
|
latitude: item.latitude,
|
},
|
children: devices,
|
};
|
return obj;
|
});
|
if (this.treeData.length > 0) {
|
if (record.boundary !== null) {
|
const points = record.boundary.split(";").map((item) => {
|
const point = item.split(",");
|
const obj = { lng: point[0], lat: point[1] };
|
return obj;
|
});
|
this.polyline.points = points;
|
}
|
if (
|
!(
|
record.boundary === null &&
|
record.centerLatitude === null &&
|
record.centerLongitude === null
|
)
|
) {
|
this.map.chooseCenter.point.lat = record.centerLatitude;
|
this.map.chooseCenter.point.lng = record.centerLongitude;
|
get("servicesScopeDevice/getDevicesAndMonitorPoint", {
|
servicesScopeId: record.id,
|
}).then((res: any) => {
|
if (res.data.code === 0) {
|
const selectDevices = res.data.data;
|
this.map.center.lat = record.centerLatitude;
|
this.map.center.lng = record.centerLongitude;
|
const devicesExit = selectDevices.map((item: any) => {
|
if (item.devices.length > 0) {
|
const children = item.devices.map((device: any) => {
|
const treeDevice = {
|
key: item.id + "-" + device.id,
|
title: device.name,
|
value: {
|
longitude: device.longitude,
|
latitude: device.latitude,
|
},
|
};
|
return treeDevice;
|
});
|
const treeDevices = {
|
key: item.id,
|
title: item.name,
|
children: children,
|
};
|
return treeDevices;
|
}
|
});
|
if (devicesExit.length > 0) {
|
const points = new Array();
|
devicesExit.forEach((item: any) => {
|
item.children.forEach((child: any) => {
|
this.checkedKeys.push(child.key);
|
const point = {
|
lng: child.value.longitude,
|
lat: child.value.latitude,
|
};
|
const deviceId = child.key.substr(
|
child.key.indexOf("-") + 1,
|
child.key.length
|
);
|
const obj = {
|
point: point,
|
deviceId: deviceId,
|
};
|
points.push(obj);
|
});
|
});
|
this.map.points = points;
|
}
|
}
|
});
|
}
|
}
|
}
|
});
|
}
|
// 初始化地图
|
private handler({ BMap, map }) {
|
this.map.zoom = 14;
|
}
|
// 隐藏区域点弹窗
|
private editCancelMap() {
|
this.areaPointConfigurationFlag = false;
|
this.map.points = [];
|
this.polyline.points = [];
|
this.polyline.editing = false;
|
this.map.chooseCenter.point.lng = "";
|
this.map.chooseCenter.point.lat = "";
|
this.map.chooseCenter.flag = false;
|
this.checkedKeys = [];
|
}
|
// 保存区域点的修改
|
private editAreaPoint() {
|
let lnglat = this.polyline.points.map((point: any) => {
|
return point.lng + "," + point.lat;
|
});
|
const boundary = lnglat.join(";");
|
if (boundary === "") {
|
this.$message.warning("请进行区域绘制！");
|
return;
|
}
|
if (
|
(this.map.chooseCenter.point.lat === "" ||
|
this.map.chooseCenter.point.lat === null) &&
|
(this.map.chooseCenter.point.lng === "" ||
|
this.map.chooseCenter.point.lng === null)
|
) {
|
this.$message.warning("请选择中心点！");
|
return;
|
}
|
post("servicesScope/addBoundaryBindDevice", {
|
devices: this.deviceIds.join(","),
|
servicesScope: {
|
id: this.mapRecord.id,
|
name: null,
|
organizationId: null,
|
centerLongitude: this.map.chooseCenter.point.lng,
|
centerLatitude: this.map.chooseCenter.point.lat,
|
boundary: boundary,
|
},
|
}).then((res: any) => {
|
if (res.data.code === 0) {
|
this.getDataByCondition();
|
this.areaPointConfigurationFlag = false;
|
this.map.points = [];
|
this.polyline.points = [];
|
this.polyline.editing = false;
|
this.map.chooseCenter.point.lng = "";
|
this.map.chooseCenter.point.lat = "";
|
this.checkedKeys = [];
|
this.map.chooseCenter.flag = false;
|
this.$message.success(res.data.message);
|
} else {
|
this.$message.warning(res.data.message);
|
}
|
});
|
}
|
// 树结构文字选中
|
// private onSelect(selectedKeys: any, info: any) {
|
// console.log('onSelect', info);
|
// console.log('selectedKeys', selectedKeys);
|
// }
|
// 树结构选中框选中
|
private onCheck(checkedKeys: any, info: any) {
|
this.deviceIds = checkedKeys
|
.filter((item: any) => {
|
if (typeof item === "string") {
|
return item;
|
}
|
})
|
.map((item: any) => {
|
return item.substr(item.indexOf("-") + 1, item.length);
|
});
|
|
let infos = info.checkedNodes;
|
if (infos.length > 0) {
|
infos = infos.filter((item: any) => {
|
if (typeof item.key === "string") {
|
return item;
|
}
|
});
|
this.map.points = infos.map((item: any) => {
|
const point = {
|
lng: item.data.props.value.longitude,
|
lat: item.data.props.value.latitude,
|
};
|
const index = item.key.indexOf("-");
|
|
const pointObj = {
|
point: point,
|
deviceId: item.key.substring(index + 1, item.key.length),
|
};
|
return pointObj;
|
// const id = item.key.substr()
|
});
|
} else {
|
this.map.points = [];
|
}
|
}
|
// 显示隐藏绘制框
|
private toggle() {
|
if (this.map.points.length === 0) {
|
this.$message.warning("请选择设备点再进行区域绘制！");
|
return;
|
}
|
if (this.map.points.length === 1) {
|
this.$message.warning("至少选择两台设备！");
|
return;
|
}
|
this.polyline.editing = !this.polyline.editing;
|
if (this.polyline.editing) {
|
if (this.polyline.points.length === 0) {
|
const lngMaxOrMin = this.map.points.sort((item1: any, item2: any) => {
|
return item1.point.lng - item2.point.lng;
|
});
|
const lngMin = lngMaxOrMin[0];
|
const lngMax = lngMaxOrMin[lngMaxOrMin.length - 1];
|
const latMaxOrMin = this.map.points.sort((item1: any, item2: any) => {
|
return item1.point.lat - item2.point.lat;
|
});
|
const latMin = latMaxOrMin[0];
|
const latMax = latMaxOrMin[latMaxOrMin.length - 1];
|
const points = [
|
{ lng: lngMax.point.lng, lat: latMax.point.lat },
|
{ lng: lngMax.point.lng, lat: latMin.point.lat },
|
{ lng: lngMin.point.lng, lat: latMin.point.lat },
|
{ lng: lngMin.point.lng, lat: latMax.point.lat },
|
];
|
this.polyline.points = points;
|
}
|
}
|
}
|
// 多边形变化
|
private updatePolygonPath(e: any) {
|
this.polyline.points = e.target.getPath();
|
}
|
// 选择中心点
|
private chooseCenter() {
|
this.map.chooseCenter.flag = !this.map.chooseCenter.flag;
|
}
|
// 点击地图中心点显示
|
private mapClick(e: any) {
|
if (this.map.chooseCenter.flag) {
|
const { lng, lat } = e.point;
|
this.map.chooseCenter.point.lng = lng;
|
this.map.chooseCenter.point.lat = lat;
|
}
|
}
|
|
// 删除数据
|
private delete(record: any) {
|
post("servicesScope/delete", {
|
id: record.id,
|
}).then((res: any) => {
|
if (res.data.code === 0) {
|
this.pagination.current = 1;
|
this.getDataByCondition();
|
this.$message.success(res.data.message);
|
}
|
});
|
}
|
|
// 数据操作方法
|
private opRender(text: string, record: any, index: number) {
|
return (
|
<div>
|
<a onClick={() => this.editShow(true, record)}> 编辑 </a>
|
<a-divider type="vertical" />
|
<a onClick={() => this.areaPointConfiguration(true, record)}>
|
{" "}
|
经纬度区域点配置{" "}
|
</a>
|
<a-divider type="vertical" />
|
<a-popconfirm
|
title="确认删除吗？"
|
ok-text="确定"
|
cancel-text="取消"
|
onConfirm={() => this.delete(record)}
|
>
|
<a href="#">删除</a>
|
</a-popconfirm>
|
</div>
|
);
|
}
|
}
|
</script>
|
|
<style scoped>
|
/deep/.ant-modal-body {
|
padding: 10px;
|
}
|
/deep/.ant-layout-sider {
|
background: #fff;
|
line-height: 120px;
|
}
|
/deep/.ant-tree-node-content-wrapper {
|
width: 140px;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
}
|
/deep/.BMap_cpyCtrl {
|
display: none;
|
}
|
/deep/.anchorBL {
|
display: none;
|
}
|
</style>
|
