moral_manage.git

			@@ -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>