Merge branch 'feature_1.0'

quanyawei

2024-01-25 d53995cad3a6351250333115a15c506e5926d8f5

 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>