分页修改

quanyawei

2024-01-25 a4831debee63c7071a261c5f6ecfa62fd535b2ab

 src/views/list/devicesMonitorPoint.vue

@@ -1,543 +1,644 @@
<template>

    <div>

        <a-card :bordered="false" style="margin-top:24px">

            <div class="tableList">

                <div class="tableListForm">

                    <a-form @submit="handleSearch" layout="horizontal" :form="searchForm">

                        <a-row :gutter="{ md: 8, lg: 24, xl: 48 }">

                            <a-button icon="plus" type="primary" @click="() => this.handleModalVisible(true)" style="margin-left: 25px;">

                                新建

                            </a-button>

                            <div style="float:right;display:flex">

                                <span style="margin-top:10px;margin-right:10px;font-size:14px">组织: </span>

                                <a-select

                                    placeholder="选择组织(输入名称搜索)"

                                    :value="selectedItems"

                                    style="width: 240px;margin-top:4px"

                                    @change="handleChange"

                                    :filter-option="filteredOptions"

                                    allow-clear

                                    show-search

                                >

                                    <a-select-option v-for="(item,index) in orgData" :key="index" :value="item.id">

                                    {{ item.name }}

                                    </a-select-option>

                                </a-select>

                                <a-form-item  v-bind="searchFormLayout" style="width: 240px">

                                    <a-input v-model="serch.name"  placeholder="请输入站点名称" allow-clear />

                                </a-form-item>

                            </div>

                        </a-row>

                    </a-form>

                </div>

            <av-standard-table :dataSource="dataSource"

                     :selectedRows="selectedRows"

                     :columns="columns"

                     :loading="tableLoading"

                     :paginationProps="pagination"

                     @tableChange="handlerTableChange"

                     @selectChange="handlerSelectChange">

                <!-- <template slot="organizationId" >

  <div>

    <a-card :bordered="false" style="margin-top:24px">

      <div class="tableList">

        <div class="tableListForm">

          <a-form @submit="handleSearch" layout="horizontal" :form="searchForm">

            <a-row :gutter="{ md: 8, lg: 24, xl: 48 }">

              <a-button

                icon="plus"

                type="primary"

                @click="() => this.handleModalVisible(true)"

                style="margin-left: 25px;"

              >

                新建

              </a-button>

              <div style="float:right;display:flex">

                <span style="margin-top:10px;margin-right:10px;font-size:14px"

                  >组织:

                </span>

                <a-select

                  placeholder="选择组织(输入名称搜索)"

                  :value="selectedItems"

                  style="width: 240px;margin-top:4px"

                  @change="handleChange"

                  :filter-option="filteredOptions"

                  allow-clear

                  show-search

                >

                  <a-select-option

                    v-for="(item, index) in orgData"

                    :key="index"

                    :value="item.id"

                  >

                    {{ item.name }}

                  </a-select-option>

                </a-select>

                <a-form-item v-bind="searchFormLayout" style="width: 240px">

                  <a-input

                    v-model="serch.name"

                    placeholder="请输入站点名称"

                    allow-clear

                  />

                </a-form-item>

              </div>

            </a-row>

          </a-form>

        </div>

        <av-standard-table

          :dataSource="dataSource"

          :selectedRows="selectedRows"

          :columns="columns"

          :loading="tableLoading"

          :paginationProps="pagination"

          @tableChange="handlerTableChange"

          @selectChange="handlerSelectChange"

        >

          <!-- <template slot="organizationId" >

                    <div v-for="(item,index) in orgData" :key="index">{{item.name}}</div>

                </template> -->

                <!-- <template slot="region" >

          <!-- <template slot="region" >

                    <div v-for="(item,index) in regionData" :key="index">

                        {{item}}

                    </div>

                </template> -->

            </av-standard-table>

        </div>

        </av-standard-table>

      </div>

    </a-card>



    <a-modal title="添加-站点" destroyOnClose :visible="visibleCreateModal" @ok="handleCreateModalOk" @cancel="handleCreateModalCancel">

        <a-form style="margin-top: 8px" :form="createForm">

            <a-form-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="名称" has-feedback>

                <a-input placeholder="请输入" v-decorator="['name', { rules: [{ required: true, message: '请输入名称！', min: 1 }] }]"/>

            </a-form-item>

            <a-form-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="组织" has-feedback >

                <a-select

                    v-decorator="['organizationId', { rules: [{ required: true, message: '请选择组织！' }] }]"

                    placeholder="选择组织(输入名称搜索)"

                    style="width: 240px;margin-top:4px"

                    :filter-option="filteredOptions"

                    allow-clear

                    show-search

                >

                    <a-select-option v-for="(item,index) in orgData" :key="index" :value="item.id">

                    {{ item.name }}

                    </a-select-option>

                </a-select>

            </a-form-item>

            <a-form-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="省/市/区" has-feedback >

                <a-cascader v-decorator="['provinceCode', { rules: [{ required: true, message: '请选择地区！'}] }]" :options="region" placeholder="选择地区"  @change="onChangeReginon" />

            </a-form-item>

            <a-form-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="详细地址">

                <a-input v-decorator="['address']" placeholder="请输入" />

            </a-form-item>

            <a-form-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="经度">

                <a-input v-decorator="['longitude']" placeholder="请输入" />

            </a-form-item>

            <a-form-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="纬度">

                <a-input v-decorator="['latitude']" placeholder="请输入" />

            </a-form-item>

            <a-form-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="备注">

                <a-input v-decorator="['desc']" placeholder="请输入" />

            </a-form-item>

        </a-form>

    <a-modal

      title="添加-站点"

      destroyOnClose

      :visible="visibleCreateModal"

      @ok="handleCreateModalOk"

      @cancel="handleCreateModalCancel"

    >

      <a-form style="margin-top: 8px" :form="createForm">

        <a-form-item

          :labelCol="{ span: 5 }"

          :wrapperCol="{ span: 15 }"

          label="名称"

          has-feedback

        >

          <a-input

            placeholder="请输入"

            v-decorator="[

              'name',

              { rules: [{ required: true, message: '请输入名称！', min: 1 }] },

            ]"

          />

        </a-form-item>

        <a-form-item

          :labelCol="{ span: 5 }"

          :wrapperCol="{ span: 15 }"

          label="组织"

          has-feedback

        >

          <a-select

            v-decorator="[

              'organizationId',

              { rules: [{ required: true, message: '请选择组织！' }] },

            ]"

            placeholder="选择组织(输入名称搜索)"

            style="width: 240px;margin-top:4px"

            :filter-option="filteredOptions"

            allow-clear

            show-search

          >

            <a-select-option

              v-for="(item, index) in orgData"

              :key="index"

              :value="item.id"

            >

              {{ item.name }}

            </a-select-option>

          </a-select>

        </a-form-item>

        <a-form-item

          :labelCol="{ span: 5 }"

          :wrapperCol="{ span: 15 }"

          label="省/市/区"

          has-feedback

        >

          <a-cascader

            v-decorator="[

              'provinceCode',

              { rules: [{ required: true, message: '请选择地区！' }] },

            ]"

            :options="region"

            placeholder="选择地区"

            @change="onChangeReginon"

          />

        </a-form-item>

        <a-form-item

          :labelCol="{ span: 5 }"

          :wrapperCol="{ span: 15 }"

          label="详细地址"

        >

          <a-input v-decorator="['address']" placeholder="请输入" />

        </a-form-item>

        <a-form-item

          :labelCol="{ span: 5 }"

          :wrapperCol="{ span: 15 }"

          label="经度"

        >

          <a-input v-decorator="['longitude']" placeholder="请输入" />

        </a-form-item>

        <a-form-item

          :labelCol="{ span: 5 }"

          :wrapperCol="{ span: 15 }"

          label="纬度"

        >

          <a-input v-decorator="['latitude']" placeholder="请输入" />

        </a-form-item>

        <a-form-item

          :labelCol="{ span: 5 }"

          :wrapperCol="{ span: 15 }"

          label="备注"

        >

          <a-input v-decorator="['desc']" placeholder="请输入" />

        </a-form-item>

      </a-form>

    </a-modal>



    <update-task-form :visible.sync="updateTaskFormVisible" :record="updateRecord" @ok="handleUpdateOk"></update-task-form>

    <update-task-form

      :visible.sync="updateTaskFormVisible"

      :record="updateRecord"

      @ok="handleUpdateOk"

    ></update-task-form>



    <distribution-monitor  :width="modelSize.width" :height="modelSize.height"  :visible.sync="distributionMenuVisible" :record="updateRecord1" @ok="handleUpdateOk"></distribution-monitor>

    <distribution-monitor

      :width="modelSize.width"

      :height="modelSize.height"

      :visible.sync="distributionMenuVisible"

      :record="updateRecord1"

      @ok="handleUpdateOk"

    ></distribution-monitor>



    <pick-coordinate :mapUrl="mapUrl" :mapRecord="mapRecord"  v-if="!mapFlag" @mapFlag="receiveFlag"/>



</div>

    <pick-coordinate

      :mapUrl="mapUrl"

      :mapRecord="mapRecord"

      v-if="!mapFlag"

      @mapFlag="receiveFlag"

    />

  </div>

</template>



<script lang="tsx">

import {

    Component,

    Prop,

    Vue,

    Model,

    Watch

} from 'vue-property-decorator';

import { Component, Prop, Vue, Model, Watch } from "vue-property-decorator";





import moment from 'moment';

import moment from "moment";

import { get, post } from "@/util/request";

import org from '@/util/org'

import org from "@/util/org";



import { Observable, Subscription, BehaviorSubject } from 'rxjs';

import { Observable, Subscription, BehaviorSubject } from "rxjs";



import UpdateTaskForm from './components/UpdateTaskFormMonitor.vue';

import DistributionMonitor from './components/DistributionMonitor.vue'

import UpdateTaskForm from "./components/UpdateTaskFormMonitor.vue";

import DistributionMonitor from "./components/DistributionMonitor.vue";



import TestModal from './components/TestModal.vue';

import TestModal from "./components/TestModal.vue";

import PickCoordinate from "@/components/map/pickCoordinate.vue";



const statusMap = ['default', 'processing', 'success', 'error'];

const status = ['关闭', '运行中', '已上线', '异常'];

const OPTIONS = ['Apples', 'Nails', 'Bananas', 'Helicopters'];

const statusMap = ["default", "processing", "success", "error"];

const status = ["关闭", "运行中", "已上线", "异常"];

const OPTIONS = ["Apples", "Nails", "Bananas", "Helicopters"];

@Component({

    components: {

        UpdateTaskForm,

        DistributionMonitor,

        PickCoordinate

    },

  components: {

    UpdateTaskForm,

    DistributionMonitor,

    PickCoordinate,

  },

})

export default class QueryList extends Vue {

    private region:any

  private region: any;



    private searchForm: any;

  private searchForm: any;



  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 serch:any = {

        name:''

    }

    // 省市区地区码

    private regionCode:number[] = []

    private searchFormLayout: any = {

        labelCol: {

            span: 5,

        },

        wrapperCol: {

            span: 18,

            offset: 1,

        },

    };

  private serch: any = {

    name: "",

  };

  // 省市区地区码

  private regionCode: number[] = [];

  private searchFormLayout: any = {

    labelCol: {

      span: 5,

    },

    wrapperCol: {

      span: 18,

      offset: 1,

    },

  };



    private modelSize:any={

        width:500,

        height:500

    }

  private modelSize: any = {

    width: 500,

    height: 500,

  };



    private saveData:any={

        name:'',

        organizationId:'',

        provinceCode:'',

        cityCode:'',

        areaCode:'',

        longitude:'',

        latitude:'',

        address:'',

        desc: '',

    }

  private saveData: any = {

    name: "",

    organizationId: "",

    provinceCode: "",

    cityCode: "",

    areaCode: "",

    longitude: "",

    latitude: "",

    address: "",

    desc: "",

  };



    private mapRecord: any = {}

  private mapRecord: any = {};



    private mapUrl:string = 'monitorPoint/updateMonitorPoint'

  private mapUrl: string = "monitorPoint/updateMonitorPoint";



    // 储存选择城市的值

    private onChangeReginon(value: any){

      this.regionCode = value

    }

  // 储存选择城市的值

  private onChangeReginon(value: any) {

    this.regionCode = value;

  }



    // 下拉查询框变量

    private selectedItems:any[]=[]

  // 下拉查询框变量

  private selectedItems: any[] = [];



    // 下拉查询框

    private filteredOptions(input:any,option:any) {

      return (

        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0

        );

    }

  // 下拉查询框

  private filteredOptions(input: any, option: any) {

    return (

      option.componentOptions.children[0].text

        .toLowerCase()

        .indexOf(input.toLowerCase()) >= 0

    );

  }



    //下拉查询框方法

    private handleChange(selectedItems:any) {

      this.selectedItems = selectedItems;

      this.handleSearch()

    }

  //下拉查询框方法

  private handleChange(selectedItems: any) {

    this.selectedItems = selectedItems;

    this.handleSearch();

  }



    // 组件数据

    private orgData:any = {}

  // 组件数据

  private orgData: any = {};



    // 获得所有组织

    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();

    });

  }



    @Watch('serch.name')

    private watchsearchInform(newVal:string,oldval:string){

      this.pagination.current = 1

            this.handleSearch()

    }

  @Watch("serch.name")

  private watchsearchInform(newVal: string, oldval: string) {

    this.pagination.current = 1;

    this.handleSearch();

  }



    private created() {

        this.createForm = this.$form.createForm(this, {name: "devicesMonitorPoint"});

        this.searchForm = this.$form.createForm(this, {name: "devicesMonitorPoint"});

        this.getAllOrg()

        this.region = org

    }

    private expandForm: boolean = false;

  private created() {

    this.createForm = this.$form.createForm(this, {

      name: "devicesMonitorPoint",

    });

    this.searchForm = this.$form.createForm(this, {

      name: "devicesMonitorPoint",

    });

    this.getAllOrg();

    this.region = org;

  }

  private expandForm: boolean = false;



    private selectedRowKeys: any[] = [];

  private selectedRowKeys: any[] = [];



    private selectedRows: any[] = [];

  private selectedRows: any[] = [];



    private tableLoading: boolean = false;

  private tableLoading: boolean = false;



    private moment: any = moment;

  private moment: any = moment;



    private dataSource: any[] = [];

  private dataSource: any[] = [];



    private regionData:number[]=[]

  private regionData: number[] = [];



    private visibleCreateModal: boolean = false;

  private visibleCreateModal: boolean = false;



    private updateTaskFormVisible: boolean = false;

  private updateTaskFormVisible: boolean = false;



    private distributionMenuVisible: boolean = false;

  private distributionMenuVisible: boolean = false;



    private createForm: any = null;

  private createForm: any = null;



    private updateRecord: any = {};

  private updateRecord: any = {};



    private updateRecord1: any = {};

    // 初始化站点信息

    private monitorPoints:any = {}

  private updateRecord1: any = {};

  // 初始化站点信息

  private monitorPoints: any = {};



    private columns: any[] = [{

            title: '名称',

            dataIndex: 'name',

        },

        {

            title: '组织',

            dataIndex: 'organizationName',

            width: '10%',

            // scopedSlots: { customRender: 'organizationId' },

        },

        {

            title: '省市区',

            dataIndex: 'tempRegionData',

            // scopedSlots: { customRender: 'region' },

        },

        {

            title: '地址',

            dataIndex: 'address',

        },

        {

            title: '经度',

            dataIndex: 'longitude',

        },

        {

            title: '纬度',

            dataIndex: 'latitude',

        },

        {

            title: '备注',

            dataIndex: 'desc',

        },

        {

            title: '操作',

            customRender: this.opRender,

        },

  private columns: any[] = [

    {

      title: "序号",

      dataIndex: "key",

      key: "key",

      align: "center",

      customRender: (text: any, record: any, index: any) => `${index + 1}`,

      width: 60,

    },

    {

      title: "名称",

      dataIndex: "name",

    },

    {

      title: "组织",

      dataIndex: "organizationName",

      width: "10%",

      // scopedSlots: { customRender: 'organizationId' },

    },

    {

      title: "省市区",

      dataIndex: "tempRegionData",

      // scopedSlots: { customRender: 'region' },

    },

    {

      title: "地址",

      dataIndex: "address",

    },

    {

      title: "经度",

      dataIndex: "longitude",

    },

    {

      title: "纬度",

      dataIndex: "latitude",

    },

    {

      title: "备注",

      dataIndex: "desc",

    },

    {

      title: "操作",

      customRender: this.opRender,

    },

  ];



  constructor() {

    super();

  }



  get status() {

    return status;

  }



  get statusMap() {

    return statusMap;

  }



  get statuFilters() {

    return [

      {

        text: status[0],

        value: 0,

      },

      {

        text: status[1],

        value: 1,

      },

      {

        text: status[2],

        value: 2,

      },

      {

        text: status[3],

        value: 3,

      },

    ];

  }



    constructor() {

        super();

    }

  private regionFilters(value: any) {

    if (!value) return "";

    return org[value];

  }



    get status() {

        return status;

    }

  private handleModalVisible(isVisible: boolean): void {

    this.visibleCreateModal = isVisible;

  }



    get statusMap() {

        return statusMap;

    }

  private handleSearch(): void {

    get("monitorPoint/getMonitorPointByFuzzy", {

      name: this.serch.name,

      organization_id: this.selectedItems,

      current: this.pagination.current,

      size: this.pagination.pageSize,

      orderType: 1,

    })

      .then((res) => {

        this.dataSource = res.data.data.monitorPoints;

        let tempMonitor = res.data.data.monitorPoints;

        this.pagination.total = res.data.data.totalNumber;

        this.pagination.current = res.data.data.current;

        for (let i = 0; i < tempMonitor.length; i++) {

          tempMonitor[i].tempRegionData =

            tempMonitor[i].provinceCode[1] +

            tempMonitor[i].cityCode[1] +

            tempMonitor[i].areaCode[1];

          tempMonitor[i].organizationName = tempMonitor[i].organizationId[1];

          tempMonitor[i].organizationId = tempMonitor[i].organizationId[0];

        }

      })

      .catch((err) => {

        console.log(err);

      });

  }



    get statuFilters() {

        return [{

                text: status[0],

                value: 0,

            },

            {

                text: status[1],

                value: 1,

            },

            {

                text: status[2],

                value: 2,

            },

            {

                text: status[3],

                value: 3,

            },

        ];

    }

  private handlerTableChange(pagination: any, filter: any, sorter: any): void {

    this.pagination.current = pagination.current;

    this.pagination.pageSize = pagination.pageSize;

    this.pagination.total = pagination.total;

    this.loadRuleData();

  }



  private testCallback(param: any) {}



  private handleUpdateModalVisible(visible: boolean, record: any): void {

    this.updateTaskFormVisible = true;

    this.updateRecord = record;

  }



    private regionFilters(value:any) {

      if (!value) return ''

      return org[value]

    }

  private handleUpdateModalVisible1(visible: boolean, record: any): void {

    this.updateRecord1 = record;

    setTimeout(() => {

      this.distributionMenuVisible = true;

    }, 500);

  }



    private handleModalVisible(isVisible: boolean): void {

        this.visibleCreateModal = isVisible;

    }



    private handleSearch(): void {

        get("monitorPoint/getMonitorPointByFuzzy",{

            name: this.serch.name,

            organization_id:this.selectedItems,

            current: this.pagination.current,

            size: this.pagination.pageSize,

            orderType:1

  private handleCreateModalOk() {

    this.createForm.validateFields((err: any, fieldsValue: any) => {

      if (err) {

        return;

      }

      const name = this.createForm.getFieldValue("name");

      // const organizationId = this.selectedItems[0].id

      const organizationId = this.createForm.getFieldValue("organizationId");

      const provinceCode = this.regionCode[0] ? this.regionCode[0] : "";

      const cityCode = this.regionCode[1] ? this.regionCode[1] : "";

      const areaCode = this.regionCode[2] ? this.regionCode[2] : "";

      const longitude = this.createForm.getFieldValue("longitude");

      const latitude = this.createForm.getFieldValue("latitude");

      const address = this.createForm.getFieldValue("address");

      const desc = this.createForm.getFieldValue("desc");

      post("monitorPoint/insertOneMonitorPoint", {

        name: name,

        organizationId: organizationId,

        provinceCode: provinceCode,

        cityCode: cityCode,

        areaCode: areaCode,

        longitude: longitude,

        latitude: latitude,

        address: address,

        desc: desc,

      })

        .then((res: any) => {

          if (res.data.code !== 0) {

            this.$message.warning(res.data.message, 2);

            return;

          }

          this.createForm.resetFields();

          this.visibleCreateModal = false;

          this.$message.success(res.data.message, 2);

          this.loadRuleData();

        })

        .then(res=>{

            this.dataSource = res.data.data.monitorPoints;

          let tempMonitor = res.data.data.monitorPoints

          this.pagination.total = res.data.data.totalNumber

        .catch((err) => {

          console.log(err);

        });

    });

  }



  private handleUpdateOk() {

    this.loadRuleData();

  }



  private handleCreateModalCancel(): any {

    this.visibleCreateModal = false;

  }



  private handlerSelectChange(arr1: any, arr2: any) {

    this.selectedRows = arr2;

  }



  private handleMenuClick(e: any) {}



  private mounted() {

    this.loadRuleData();

    // this.menuData()

  }



  // 地图组件

  private showMap(flag: boolean, record: any) {

    this.mapFlag = flag;

    this.mapRecord = record;

  }



  private mapFlag: boolean = true;



  private receiveFlag(flag: boolean) {

    this.mapFlag = true;

  }



  @Watch("mapFlag")

  private monitorMapFlag(newVal: boolean, oldVal: boolean) {

    this.mapFlag = newVal;

  }



  private loadRuleData() {

    this.tableLoading = true;

    get("monitorPoint/getAllMonitorPoint", {

      current: this.pagination.current,

      size: this.pagination.pageSize,

      orderType: 1,

    })

      .then((res) => {

        if (res.data.code === 0) {

          this.dataSource = res.data.data.monitorPoints;

          let tempMonitor = res.data.data.monitorPoints;

          this.pagination.total = res.data.data.totalNumber;

          this.pagination.current = res.data.data.current;

            for (let i = 0; i < tempMonitor.length; i++) {

                tempMonitor[i].tempRegionData = tempMonitor[i].provinceCode[1] + tempMonitor[i].cityCode[1] + tempMonitor[i].areaCode[1]

                tempMonitor[i].organizationName = tempMonitor[i].organizationId[1]

                tempMonitor[i].organizationId = tempMonitor[i].organizationId[0]

            }

        })

        .catch(err=>{

            console.log(err);

        })

    }



    private handlerTableChange(pagination: any, filter: any, sorter: any): void {

      this.pagination.current = pagination.current

      this.loadRuleData()

    }



    private testCallback(param: any) {

    }



    private handleUpdateModalVisible(visible: boolean, record: any): void {

        this.updateTaskFormVisible = true;

        this.updateRecord = record;

    }



    private handleUpdateModalVisible1(visible: boolean, record: any): void {

        this.updateRecord1 = record;

        setTimeout(()=>{

            this.distributionMenuVisible = true;

        },500)

    }



    private handleCreateModalOk() {

        this.createForm.validateFields((err: any, fieldsValue: any) => {

            if (err) {

                return;

            }

            const name = this.createForm.getFieldValue('name');

            // const organizationId = this.selectedItems[0].id

            const organizationId = this.createForm.getFieldValue('organizationId')

            const provinceCode = this.regionCode[0]?this.regionCode[0]:''

            const cityCode = this.regionCode[1]?this.regionCode[1]:''

            const areaCode = this.regionCode[2]?this.regionCode[2]:''

            const longitude = this.createForm.getFieldValue('longitude');

            const latitude = this.createForm.getFieldValue('latitude');

            const address = this.createForm.getFieldValue('address');

            const desc = this.createForm.getFieldValue('desc');

            post('monitorPoint/insertOneMonitorPoint', {

                name:name,

                organizationId:organizationId,

                provinceCode:provinceCode,

                cityCode:cityCode,

                areaCode:areaCode,

                longitude:longitude,

                latitude:latitude,

                address:address,

                desc: desc,

            }).then((res: any) => {

                if(res.data.code !== 0){

                    this.$message.warning(res.data.message,2)

                  return;;

                }

                this.createForm.resetFields();

                this.visibleCreateModal = false;

                this.$message.success(res.data.message, 2);

                this.loadRuleData();

            }).catch((err)=>{

                console.log(err);

            })

        });

    }



    private handleUpdateOk() {

        this.loadRuleData();

    }



    private handleCreateModalCancel(): any {

        this.visibleCreateModal = false;

    }



    private handlerSelectChange(arr1: any, arr2: any) {

        this.selectedRows = arr2;

    }



    private handleMenuClick(e: any) {

    }



    private mounted() {

        this.loadRuleData();

        // this.menuData()

    }



    // 地图组件

    private showMap(flag: boolean, record: any) {

        this.mapFlag = flag

        this.mapRecord = record

    }





    private mapFlag: boolean = true



    private receiveFlag(flag: boolean) {

    this.mapFlag = true

    }



    @Watch('mapFlag')

    private monitorMapFlag(newVal: boolean, oldVal: boolean) {

        this.mapFlag = newVal

    }



    private loadRuleData() {

        this.tableLoading = true;

        get('monitorPoint/getAllMonitorPoint',{

                current: this.pagination.current,

                size: this.pagination.pageSize,

                orderType:1

        })

        .then((res) => {

          if (res.data.code === 0) {

            this.dataSource = res.data.data.monitorPoints;

            let tempMonitor = res.data.data.monitorPoints

            this.pagination.total = res.data.data.totalNumber

            this.pagination.current = res.data.data.current;

            let tempRegionData

            for (let i = 0; i < tempMonitor.length; i++) {

              tempMonitor[i].tempRegionData = tempMonitor[i].provinceCode[1] + tempMonitor[i].cityCode[1] + tempMonitor[i].areaCode[1]

              tempMonitor[i].organizationName = tempMonitor[i].organizationId[1]

              tempMonitor[i].organizationId = tempMonitor[i].organizationId[0]

            }

          let tempRegionData;

          for (let i = 0; i < tempMonitor.length; i++) {

            tempMonitor[i].tempRegionData =

              tempMonitor[i].provinceCode[1] +

              tempMonitor[i].cityCode[1] +

              tempMonitor[i].areaCode[1];

            tempMonitor[i].organizationName = tempMonitor[i].organizationId[1];

            tempMonitor[i].organizationId = tempMonitor[i].organizationId[0];

          }



        })

        .finally(() => {

            this.tableLoading = false;

        });

    }







    private rightRender(text: string) {

        return `${text} 万`;

    }



    private statusRender(text: any, record: any, index: number) {

        return <a-badge status = {

          statusMap[text]

        }

        text = {

            status[text]

      })

      .finally(() => {

        this.tableLoading = false;

      });

  }



  private rightRender(text: string) {

    return `${text} 万`;

  }



  private statusRender(text: any, record: any, index: number) {

    return <a-badge status={statusMap[text]} text={status[text]} />;

  }



  private updatedAtRender(text: string) {

    return <span> {moment(text).format("YYYY-MM-DD HH:mm:ss")} </span>;

  }



  private deleteManageRole(record: any) {

    post("monitorPoint/deleteMonitorPoint", { id: record.id })

      .then((res) => {

        if (res.data.code === 0) {

          this.$message.success("删除成功");

          this.loadRuleData();

        } else {

          this.$message.warning(res.data.message);

        }

        />;

    }

      })

      .catch((error) => {

        this.$message.warning(error);

      });

  }



    private updatedAtRender(text: string) {

        return <span> {

            moment(text).format('YYYY-MM-DD HH:mm:ss')

        } </span>;

    }



    private deleteManageRole(record: any){

        post('monitorPoint/deleteMonitorPoint',{id:record.id}

        ).then((res)=>{

          if (res.data.code === 0) {

            this.$message.success('删除成功')

            this.loadRuleData()

          } else {

            this.$message.warning(res.data.message)

          }

        })

        .catch((error)=> {

            this.$message.warning(error)

        })

    }



    private opRender(text: string, record: any, index: number) {

        return <div>

            <a onClick = {

                () => this.handleUpdateModalVisible(true, record)

            } > 编辑 </a>

            <a-divider type = 'vertical' />

            <a-popconfirm title="确认删除吗？" ok-text="确定" cancel-text="取消" onConfirm={()=>this.deleteManageRole(record)}>

                <a href="#">删除</a>

            </a-popconfirm>

            <a-divider type = 'vertical' />

            <a onClick={() => this.showMap(false, record)}>配置坐标</a>

            </div>;

    }

  private opRender(text: string, record: any, index: number) {

    return (

      <div>

        <a onClick={() => this.handleUpdateModalVisible(true, record)}>

          {" "}

          编辑{" "}

        </a>

        <a-divider type="vertical" />

        <a-popconfirm

          title="确认删除吗？"

          ok-text="确定"

          cancel-text="取消"

          onConfirm={() => this.deleteManageRole(record)}

        >

          <a href="#">删除</a>

        </a-popconfirm>

        <a-divider type="vertical" />

        <a onClick={() => this.showMap(false, record)}>配置坐标</a>

      </div>

    );

  }

}

</script>



<style lang="less">

.tableList {

    .tableListOperator {

        margin-bottom: 16px;

  .tableListOperator {

    margin-bottom: 16px;



        button {

            margin-right: 8px;

        }

    button {

      margin-right: 8px;

    }

  }

}

.mapShow {

  display: none;