From a4831debee63c7071a261c5f6ecfa62fd535b2ab Mon Sep 17 00:00:00 2001
From: quanyawei <401863037@qq.com>
Date: Thu, 25 Jan 2024 16:21:18 +0800
Subject: [PATCH] 分页修改
---
src/views/device/areaConfiguration.vue | 987 +++++++++++++++++++++++++++++++--------------------------
1 files changed, 534 insertions(+), 453 deletions(-)
diff --git a/src/views/device/areaConfiguration.vue b/src/views/device/areaConfiguration.vue
index 9287d34..594a87b 100644
--- a/src/views/device/areaConfiguration.vue
+++ b/src/views/device/areaConfiguration.vue
@@ -3,89 +3,101 @@
<div class="tableList">
<div class="tableListForm">
<a-form-model layout="horizontal">
- <a-row :gutter="15">
+ <a-row :gutter="15">
<a-col :span="5">
<a-button
- icon="plus"
- type="primary"
- @click="() => this.handleModalVisible(true)"
- style="margin-left: 25px;"
- >������</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
+ 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">
+ <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-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
- >
+ </a-form-model>
</div>
<av-standard-table
- :dataSource="dataSource"
- :columns="columns"
- :loading="tableLoading"
- :paginationProps="pagination"
- @tableChange="handlerTableChange"
+ :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="������"
+ title="���������������������"
+ destroyOnClose
+ :visible="addShowOrHiddenFlag"
+ @ok="addOK"
+ @cancel="addCancel"
+ okText="������"
>
<a-form-model
- style="margin-top: 8px"
- :model="addForm"
- :rules="rules"
- ref="addRulesForm"
+ 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-form-model-item
+ has-feedback
+ :labelCol="{ span: 5 }"
+ :wrapperCol="{ span: 15 }"
+ label="������"
+ prop="name"
+ >
<a-input
- placeholder="������������"
- type="string"
- v-model="addForm.name"
+ 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"
+ :labelCol="{ span: 5 }"
+ :wrapperCol="{ span: 15 }"
+ label="������"
+ has-feedback
+ prop="orgId"
>
<a-select
- placeholder="���������������"
- type="string"
- allow-clear
- show-search
- v-model="addForm.orgId"
+ 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">
+ <a-select-option
+ v-for="(item, index) in orgData"
+ :key="index"
+ :value="item.id"
+ >
{{ item.name }}
</a-select-option>
</a-select>
@@ -93,515 +105,585 @@
</a-form-model>
</a-modal>
<a-modal
- title="���������������������"
- destroyOnClose
- :visible="editShowOrHiddenFlag"
- @ok="editSave"
- @cancel="editCancel"
- okText="������"
+ title="���������������������"
+ destroyOnClose
+ :visible="editShowOrHiddenFlag"
+ @ok="editSave"
+ @cancel="editCancel"
+ okText="������"
>
<a-form-model
- style="margin-top: 8px"
- :model="editForm"
- :rules="rules"
- ref="editRulesForm"
+ 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
+ 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
+ :labelCol="{ span: 5 }"
+ :wrapperCol="{ span: 15 }"
+ label="������"
+ has-feedback
>
<a-input
- placeholder="������"
- type="string"
- disabled="disabled"
- v-model="editForm.orgName"
+ 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"
+ 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"
+ 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">
+ @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"/>
+ <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>
+ <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 { Component, Vue, Watch } from "vue-property-decorator";
+import org from "@/util/org";
import { get, post } from "@/util/request";
import axios from "axios";
@Component({
- components: {
- }
+ components: {},
})
export default class areaConfiguration extends Vue {
// ������������
private wrapperCol: any = {
- sm: {span: 16}//������������������������
- }
- private orgData: 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"
+ dataIndex: "name",
},
{
title: "������������",
- dataIndex: "organization_name"
+ dataIndex: "organization_name",
},
{
title: "���������������",
- dataIndex: "centerLongitude"
+ dataIndex: "centerLongitude",
},
{
title: "���������������",
- dataIndex: "centerLatitude"
+ dataIndex: "centerLatitude",
},
{
title: "������������",
- dataIndex: "createTime"
+ dataIndex: "createTime",
},
{
title: "������",
- customRender: this.opRender
- }
+ customRender: this.opRender,
+ },
];
// ������������������������������
- private searchName: string = ''
+ private searchName: string = "";
// ���������������������������
- private tableLoading: boolean = false
+ private tableLoading: boolean = false;
// ������
- private dataSource: any[] =[]
+ private dataSource: any[] = [];
// ���������������id
- private queryId: any = undefined
+ private queryId: any = undefined;
// ������������������������
- private addShowOrHiddenFlag: boolean = false
+ private addShowOrHiddenFlag: boolean = false;
// ������������������������
- private editShowOrHiddenFlag: boolean = false
+ private editShowOrHiddenFlag: boolean = false;
// ���������������������flag
- private areaPointConfigurationFlag: boolean = false
+ private areaPointConfigurationFlag: boolean = false;
// ���������
- private treeData: any = []
+ private treeData: any = [];
// ���������������������
- private checkedKeys: any = []
+ private checkedKeys: any = [];
// ���������������������������������
- private mapRecord: any = {}
+ private mapRecord: any = {};
// ���������
private polyline: any = {
editing: false,
- points: []
- }
+ points: [],
+ };
// ���������������������������
private rules: any = {
name: [
- {required: true, message: '������������������', trigger: ['change', 'blur']},
+ { required: true, message: "������������������", trigger: ["change", "blur"] },
],
orgId: [
- {required: true, message: '���������������', trigger: ['change', 'blur']},
- ]
- }
+ { required: true, message: "���������������", trigger: ["change", "blur"] },
+ ],
+ };
// ������������������������record
- private editBeforeRecord: any = null
+ private editBeforeRecord: any = null;
// ������������������
private addForm: any = {
- name: '',
- orgId: undefined
- }
+ name: "",
+ orgId: undefined,
+ };
private handleChange(val: any) {
- this.pagination.current = 1
- this.queryId = val
- this.getDataByCondition()
+ this.pagination.current = 1;
+ this.queryId = val;
+ this.getDataByCondition();
}
// ������������������
private editForm: any = {
- name: '',
+ name: "",
orgId: undefined,
- orgName: ''
- }
+ orgName: "",
+ };
// ������������
private pagination: any = {
total: 0,
current: 1,
- pageSize: 8,
- showSizeChanger: false,
- showQuickJumper: false
+ pageSize: 10,
+ showSizeChanger: true,
+ showQuickJumper: true,
+ pageSizeOptions: ["10", "30", "60", "100"],
+ showTotal: (total: number) => `������ ${this.pagination.total} ���������`, //���������������������������
};
// ������������
- private monitorPoints: any = []
+ private monitorPoints: any = [];
// ���������������id
- private deviceIds: any = []
+ private deviceIds: any = [];
// ������������
private map: any = {
- center: {lng: 116.404, lat: 39.915},
+ center: { lng: 116.404, lat: 39.915 },
zoom: 14,
points: [],
chooseCenter: {
- point: {lng: '', lat: ''},
- flag: false
- }
- }
+ point: { lng: "", lat: "" },
+ flag: false,
+ },
+ };
// ������������������������
- @Watch('searchName', {
+ @Watch("searchName", {
deep: true,
- immediate:true
+ immediate: true,
})
private watchName() {
- this.pagination.current = 1
- this.getDataByCondition()
+ this.pagination.current = 1;
+ this.getDataByCondition();
}
// ������������������
private created() {
- this.getAllOrg()
- this.getDataByCondition()
+ this.getAllOrg();
+ this.getDataByCondition();
}
// ������������������������������
private handlerTableChange(pagination: any, filter: any, sorter: any): void {
- this.pagination.current = pagination.current
- this.getDataByCondition()
+ 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 getAllOrg() {
+ get("organization/queryNames", {}).then((res) => {
+ this.orgData = res.data.data.organizationVOs.reverse();
+ });
}
// ������������������������������
private getDataByCondition() {
- let params = {}
+ let params = {};
if (this.queryId === undefined) {
params = {
name: this.searchName,
current: this.pagination.current,
- size: this.pagination.pageSize
- }
+ size: this.pagination.pageSize,
+ };
} else {
params = {
orgId: this.queryId,
name: this.searchName,
current: this.pagination.current,
- size: this.pagination.pageSize
- }
+ 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
+ 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('���������������������������������')
+ 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('���������������')
+ 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
+ this.addShowOrHiddenFlag = flag;
}
// ������������
private addCancel() {
- this.addForm.name = ''
- this.addForm.orgId = undefined
- this.addShowOrHiddenFlag = false
+ 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 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
+ 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('���������')
+ this.$message.warning("���������");
} else {
- post('servicesScope/update', {
- id: this.editBeforeRecord.id,
- name: name,
- organizationId: organizationId
- }
- ).then((res: any) => {
+ 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)
+ this.getDataByCondition();
+ this.editShowOrHiddenFlag = false;
+ this.editBeforeRecord = null;
+ this.$message.success(res.data.message);
} else {
- this.$message.warning(res.data.message)
+ this.$message.warning(res.data.message);
}
- })
+ });
}
}
- })
+ });
}
// ������������
private editCancel() {
- this.editShowOrHiddenFlag = false
+ 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.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;
+ });
}
- 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
+ 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;
}
- 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 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 = []
+ 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
+ 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
+ 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)
- }
- })
+ 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) {
@@ -610,126 +692,125 @@
// }
// ������������������������
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)
- })
+ 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
+ let infos = info.checkedNodes;
if (infos.length > 0) {
infos = infos.filter((item: any) => {
- if (typeof item.key === 'string') {
- return item
+ 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 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()
- })
+ point: point,
+ deviceId: item.key.substring(index + 1, item.key.length),
+ };
+ return pointObj;
+ // const id = item.key.substr()
+ });
} else {
- this.map.points = []
+ this.map.points = [];
}
}
// ���������������������
- private toggle(){
+ private toggle() {
if (this.map.points.length === 0) {
- this.$message.warning('������������������������������������������')
+ this.$message.warning("������������������������������������������");
return;
}
if (this.map.points.length === 1) {
- this.$message.warning('���������������������������')
+ this.$message.warning("���������������������������");
return;
}
- this.polyline.editing = !this.polyline.editing
+ 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]
+ 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]
+ 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
+ { 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()
+ this.polyline.points = e.target.getPath();
}
// ���������������
private chooseCenter() {
- this.map.chooseCenter.flag = !this.map.chooseCenter.flag
+ 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
+ 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
+ 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)
+ 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>
- )
+ <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>
--
Gitblit v1.8.0