分页修改

quanyawei

2024-01-25 a4831debee63c7071a261c5f6ecfa62fd535b2ab

分页修改

 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>


 src/views/device/govMonitorPoint.vue

@@ -5,14 +5,28 @@
        <a-form-model layout="horizontal">

          <a-row :gutter="15">

            <a-col :span="5">

              <a-button icon="plus" type="primary" @click="() => this.handleModalVisible(true)"

                style="margin-left: 25px;">新建</a-button>

              <a-button

                icon="plus"

                type="primary"

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

                style="margin-left: 25px;"

                >新建</a-button

              >

            </a-col>

            <a-col :span="5" style="margin-left: 37%">

              <a-form-model-item :wrapperCol="wrapperCol">

                <a-select placeholder="选择站点类型" style="width: 240px;margin-top:4px" @change="handleChange" allow-clear

                  show-search>

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

                <a-select

                  placeholder="选择站点类型"

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

                  @change="handleChange"

                  allow-clear

                  show-search

                >

                  <a-select-option

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

                    :key="index"

                    :value="index"

                  >

                    {{ item }}

                  </a-select-option>

                </a-select>

@@ -20,84 +34,281 @@
            </a-col>

            <a-col :span="5">

              <a-form-model-item :wrapperCol="wrapperCol">

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

                <a-input

                  v-model="searchName"

                  placeholder="请输入站点名称"

                  allow-clear

                />

              </a-form-model-item>

            </a-col>

          </a-row>

        </a-form-model>

      </div>

      <av-standard-table :dataSource="dataSource" :columns="columns" :loading="tableLoading" :paginationProps="pagination"

        @tableChange="handlerTableChange"></av-standard-table>

      <av-standard-table

        :dataSource="dataSource"

        :columns="columns"

        :loading="tableLoading"

        :paginationProps="pagination"

        @tableChange="handlerTableChange"

      ></av-standard-table>

    </div>

    <a-modal title="政府站点添加" destroyOnClose :visible="addShowOrHiddenFlag" @ok="addOK" @cancel="addCancel" okText="保存">

      <a-form-model style="margin-top: 8px" :model="addForm" :rules="rules" ref="addRulesForm">

        <a-form-model-item has-feedback :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="站点编号" prop="guid">

          <a-input placeholder="请输入站点编号" type="string" v-model="addForm.guid" />

    <a-modal

      title="政府站点添加"

      destroyOnClose

      :visible="addShowOrHiddenFlag"

      @ok="addOK"

      @cancel="addCancel"

      okText="保存"

    >

      <a-form-model

        style="margin-top: 8px"

        :model="addForm"

        :rules="rules"

        ref="addRulesForm"

      >

        <a-form-model-item

          has-feedback

          :labelCol="{ span: 5 }"

          :wrapperCol="{ span: 15 }"

          label="站点编号"

          prop="guid"

        >

          <a-input

            placeholder="请输入站点编号"

            type="string"

            v-model="addForm.guid"

          />

        </a-form-model-item>

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

          <a-input placeholder="设备名称" type="string" v-model="addForm.name" />

        <a-form-model-item

          has-feedback

          :labelCol="{ span: 5 }"

          :wrapperCol="{ span: 15 }"

          label="名称"

          prop="name"

        >

          <a-input

            placeholder="设备名称"

            type="string"

            v-model="addForm.name"

          />

        </a-form-model-item>



        <a-form-model-item :labelCol="{ span: 5 }" has-feedback :wrapperCol="{ span: 15 }" label="经度" prop="longitude">

          <a-input placeholder="请输入经度" type="string" v-model="addForm.longitude" />

        <a-form-model-item

          :labelCol="{ span: 5 }"

          has-feedback

          :wrapperCol="{ span: 15 }"

          label="经度"

          prop="longitude"

        >

          <a-input

            placeholder="请输入经度"

            type="string"

            v-model="addForm.longitude"

          />

        </a-form-model-item>

        <a-form-model-item :labelCol="{ span: 5 }" has-feedback :wrapperCol="{ span: 15 }" label="纬度" prop="latitude">

          <a-input placeholder="请输入纬度" type="string" v-model="addForm.latitude" />

        <a-form-model-item

          :labelCol="{ span: 5 }"

          has-feedback

          :wrapperCol="{ span: 15 }"

          label="纬度"

          prop="latitude"

        >

          <a-input

            placeholder="请输入纬度"

            type="string"

            v-model="addForm.latitude"

          />

        </a-form-model-item>

        <a-form-model-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="位置" has-feedback prop="position">

        <a-form-model-item

          :labelCol="{ span: 5 }"

          :wrapperCol="{ span: 15 }"

          label="位置"

          has-feedback

          prop="position"

        >

          <!--            v-decorator="['position', { rules: [{ required: true, message: '定位级别不能为空'  }] }]"-->

          <a-cascader :options="areaData" placeholder="选择城市" @change="positionLevel" labelInValue />

          <a-cascader

            :options="areaData"

            placeholder="选择城市"

            @change="positionLevel"

            labelInValue

          />

        </a-form-model-item>

        <a-form-model-item :labelCol="{ span: 5 }" has-feedback :wrapperCol="{ span: 15 }" label="站点类型"

          prop="stationLevel">

          <a-select placeholder="选择站点类型" type="string" allow-clear show-search v-model="addForm.stationLevel">

            <a-select-option v-for="(item, index) in stationLevel" :key="index" :value='index'>{{ item

            }}</a-select-option>

        <a-form-model-item

          :labelCol="{ span: 5 }"

          has-feedback

          :wrapperCol="{ span: 15 }"

          label="站点类型"

          prop="stationLevel"

        >

          <a-select

            placeholder="选择站点类型"

            type="string"

            allow-clear

            show-search

            v-model="addForm.stationLevel"

          >

            <a-select-option

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

              :key="index"

              :value="index"

              >{{ item }}</a-select-option

            >

          </a-select>

        </a-form-model-item>

        <a-form-model-item :labelCol="{ span: 5 }" has-feedback :wrapperCol="{ span: 15 }" label="描述" prop="desc">

        <a-form-model-item

          :labelCol="{ span: 5 }"

          has-feedback

          :wrapperCol="{ span: 15 }"

          label="描述"

          prop="desc"

        >

          <a-input placeholder="描述" type="string" v-model="addForm.desc" />

        </a-form-model-item>

      </a-form-model>

    </a-modal>

    <a-modal title="政府站点编辑" destroyOnClose :visible="editShowOrHiddenFlag" @ok="editSave" @cancel="editCancel"

      okText="保存">

      <a-form-model style="margin-top: 8px" :model="editForm" :rules="rules" ref="editRulesForm">

        <a-form-model-item has-feedback :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="站点编号" prop="guid">

          <a-input placeholder="请输入站点编号" type="string" v-model="editForm.guid" />

    <a-modal

      title="政府站点编辑"

      destroyOnClose

      :visible="editShowOrHiddenFlag"

      @ok="editSave"

      @cancel="editCancel"

      okText="保存"

    >

      <a-form-model

        style="margin-top: 8px"

        :model="editForm"

        :rules="rules"

        ref="editRulesForm"

      >

        <a-form-model-item

          has-feedback

          :labelCol="{ span: 5 }"

          :wrapperCol="{ span: 15 }"

          label="站点编号"

          prop="guid"

        >

          <a-input

            placeholder="请输入站点编号"

            type="string"

            v-model="editForm.guid"

          />

        </a-form-model-item>

        <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 }" has-feedback :wrapperCol="{ span: 15 }" label="经度" prop="longitude">

          <a-input placeholder="请输入经度" type="string" v-model="editForm.longitude" />

        <a-form-model-item

          :labelCol="{ span: 5 }"

          has-feedback

          :wrapperCol="{ span: 15 }"

          label="经度"

          prop="longitude"

        >

          <a-input

            placeholder="请输入经度"

            type="string"

            v-model="editForm.longitude"

          />

        </a-form-model-item>

        <a-form-model-item :labelCol="{ span: 5 }" has-feedback :wrapperCol="{ span: 15 }" label="纬度" prop="latitude">

          <a-input placeholder="请输入纬度" type="string" v-model="editForm.latitude" />

        <a-form-model-item

          :labelCol="{ span: 5 }"

          has-feedback

          :wrapperCol="{ span: 15 }"

          label="纬度"

          prop="latitude"

        >

          <a-input

            placeholder="请输入纬度"

            type="string"

            v-model="editForm.latitude"

          />

        </a-form-model-item>

        <a-form-model-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="位置" has-feedback prop="position">

        <a-form-model-item

          :labelCol="{ span: 5 }"

          :wrapperCol="{ span: 15 }"

          label="位置"

          has-feedback

          prop="position"

        >

          <!--            v-decorator="['position', { rules: [{ required: true, message: '定位级别不能为空'  }] }]"-->

          <a-cascader v-model="editForm.position" :options="areaData" placeholder="双击选择城市" @change="positionLevel"

            labelInValue />

          <a-cascader

            v-model="editForm.position"

            :options="areaData"

            placeholder="双击选择城市"

            @change="positionLevel"

            labelInValue

          />

        </a-form-model-item>

        <a-form-model-item :labelCol="{ span: 5 }" has-feedback :wrapperCol="{ span: 15 }" label="站点类型"

          prop="stationLevel">

          <a-select placeholder="选择站点类型" type="string" allow-clear show-search v-model="editForm.stationLevel">

            <a-select-option v-for="(item, index) in stationLevel" :key="index" :value='index'>{{ item

            }}</a-select-option>

        <a-form-model-item

          :labelCol="{ span: 5 }"

          has-feedback

          :wrapperCol="{ span: 15 }"

          label="站点类型"

          prop="stationLevel"

        >

          <a-select

            placeholder="选择站点类型"

            type="string"

            allow-clear

            show-search

            v-model="editForm.stationLevel"

          >

            <a-select-option

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

              :key="index"

              :value="index"

              >{{ item }}</a-select-option

            >

          </a-select>

        </a-form-model-item>

        <a-form-model-item :labelCol="{ span: 5 }" has-feedback :wrapperCol="{ span: 15 }" label="描述" prop="desc">

        <a-form-model-item

          :labelCol="{ span: 5 }"

          has-feedback

          :wrapperCol="{ span: 15 }"

          label="描述"

          prop="desc"

        >

          <a-input placeholder="描述" type="string" v-model="editForm.desc" />

        </a-form-model-item>

      </a-form-model>

    </a-modal>

    <a-modal title="政府站点编辑" destroyOnClose :visible="editSiteShowOrHiddenFlag" :rules="siteRules" @ok="editSiteSave"

      @cancel="editSiteCancel" okText="保存">

      <a-form-model style="margin-top: 8px" :model="editSiteForm" ref="editSiteRulesForm">

        <a-form-model-item has-feedback :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="站点编号" prop="guid">

          <a-input placeholder="请输入站点编号" type="string" v-model="editSiteForm.guid" />

    <a-modal

      title="政府站点编辑"

      destroyOnClose

      :visible="editSiteShowOrHiddenFlag"

      :rules="siteRules"

      @ok="editSiteSave"

      @cancel="editSiteCancel"

      okText="保存"

    >

      <a-form-model

        style="margin-top: 8px"

        :model="editSiteForm"

        ref="editSiteRulesForm"

      >

        <a-form-model-item

          has-feedback

          :labelCol="{ span: 5 }"

          :wrapperCol="{ span: 15 }"

          label="站点编号"

          prop="guid"

        >

          <a-input

            placeholder="请输入站点编号"

            type="string"

            v-model="editSiteForm.guid"

          />

        </a-form-model-item>

        <p class="errInfor">要求：更换站点编号时间为每小时45-50分之间!</p>

      </a-form-model>

@@ -107,215 +318,245 @@


<script lang="tsx">

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

import org from '@/util/org'

import org from "@/util/org";

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

@Component({

  components: {

  }

  components: {},

})

export default class govMonitorPoint extends Vue {

  // 定义样式

  private wrapperCol: any = {

    sm: { span: 16 }//控制文本框的长度

  }

    sm: { span: 16 }, //控制文本框的长度

  };

  // 站点id查询条件

  private stationLevelId: any = ''

  private stationLevelId: any = "";

  // 列头

  private columns: any[] = [

    {

      title: "序号",

      dataIndex: "key",

      key: "key",

      align: "center",

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

      width: 60,

    },

    {

      title: "站点编号",

      dataIndex: "guid"

      dataIndex: "guid",

    },



    {

      title: "名称",

      dataIndex: "name"

      dataIndex: "name",

    },

    {

      title: "经度",

      dataIndex: "longitude"

      dataIndex: "longitude",

    },

    {

      title: "纬度",

      dataIndex: "latitude"

      dataIndex: "latitude",

    },

    {

      title: "定位",

      dataIndex: "position"

      dataIndex: "position",

    },

    {

      title: "站点类型",

      dataIndex: "stationLevelName"

      dataIndex: "stationLevelName",

    },

    {

      title: "描述",

      dataIndex: "desc"

      dataIndex: "desc",

    },

    {

      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[] = [];

  // 显示新增隐藏标识

  private addShowOrHiddenFlag: boolean = false

  private addShowOrHiddenFlag: boolean = false;

  // 显示编辑隐藏标识

  private editShowOrHiddenFlag: boolean = false

  private editShowOrHiddenFlag: boolean = false;



  private editSiteShowOrHiddenFlag: boolean = false

  private editSiteShowOrHiddenFlag: boolean = false;

  // 存放地理位置信息

  private areaData: any = JSON.parse(JSON.stringify(org))

  private areaData: any = JSON.parse(JSON.stringify(org));

  // 指定新增和编辑规则

  private rules: any = {

    guid: [

      { required: true, message: '设备编号不能为空', trigger: ['change', 'blur'] },

      {

        required: true,

        message: "设备编号不能为空",

        trigger: ["change", "blur"],

      },

    ],

    name: [

      { required: true, message: '名称不能为空', trigger: ['change', 'blur'] },

      { required: true, message: "名称不能为空", trigger: ["change", "blur"] },

    ],

    longitude: [

      { required: true, message: '经度不能为空', trigger: ['change', 'blur'] },

      { required: true, message: "经度不能为空", trigger: ["change", "blur"] },

    ],

    latitude: [

      { required: true, message: '纬度不能为空', trigger: ['change', 'blur'] },

      { required: true, message: "纬度不能为空", trigger: ["change", "blur"] },

    ],

    position: [

      { required: true, message: '请选择定位级别', trigger: ['change', 'blur'] },

      {

        required: true,

        message: "请选择定位级别",

        trigger: ["change", "blur"],

      },

    ],

    stationLevel: [

      { required: true, message: '请选择站点类型', trigger: ['change', 'blur'] },

    ]

  }

      {

        required: true,

        message: "请选择站点类型",

        trigger: ["change", "blur"],

      },

    ],

  };

  private siteRules: any = {

    guid: [

      { required: true, message: '设备编号不能为空', trigger: ['change', 'blur'] },

    ]

  }

      {

        required: true,

        message: "设备编号不能为空",

        trigger: ["change", "blur"],

      },

    ],

  };

  // 政府站点类型

  private stationLevel: any = {}

  private stationLevel: any = {};

  // 存放编辑前的数据record

  private editBeforeRecord: any = null

  private editBeforeSiteRecord: any = null

  private editBeforeRecord: any = null;

  private editBeforeSiteRecord: any = null;

  // 新增表单数据

  private addForm: any = {

    guid: '',

    name: '',

    longitude: '',

    latitude: '',

    guid: "",

    name: "",

    longitude: "",

    latitude: "",

    position: [],

    stationLevel: undefined,

    desc: ''

  }

    desc: "",

  };

  // 编辑表单数据

  private editForm: any = {

    id: -1,

    guid: '',

    name: '',

    longitude: '',

    latitude: '',

    guid: "",

    name: "",

    longitude: "",

    latitude: "",

    position: [],

    stationLevel: undefined,

    desc: ''

  }

    desc: "",

  };

  // 编辑表单数据

  private editSiteForm: any = {

    id: -1,

    guid: ''

  }

    guid: "",

  };

  // 分页数据

  private pagination: any = {

    total: 0,

    current: 0,

    pageSize: 8,

    showSizeChanger: false,

    showQuickJumper: false

    current: 1,

    pageSize: 10,

    showSizeChanger: true,

    showQuickJumper: true,

    pageSizeOptions: ["10", "30", "60", "100"],

    showTotal: (total: number) => `共有 ${this.pagination.total} 条数据`, //分页中显示总的数据

  };

  // 监听站点名称变化

  @Watch('searchName', {

  @Watch("searchName", {

    deep: true,

    immediate: true

    immediate: true,

  })

  private watchName(newVal: string, oldVal: string) {

    this.searchName = newVal

    this.pagination.current = 1

    this.queryGovDatas()

    this.searchName = newVal;

    this.pagination.current = 1;

    this.queryGovDatas();

  }

  // 生命周期函数

  private created() {

    this.selectDatas()

    this.queryGovDatas()

    this.selectDatas();

    this.queryGovDatas();

  }

  // 监听分页数据下标变化

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

    this.pagination.current = pagination.current

    this.queryGovDatas()

    this.pagination.current = pagination.current;

    this.pagination.pageSize = pagination.pageSize;

    this.pagination.total = pagination.total;

    this.queryGovDatas();

  }

  //下拉查询框方法

  private handleChange(selectedItems: any) {

    if (selectedItems) {

      this.stationLevelId = selectedItems

      this.stationLevelId = selectedItems;

    } else {

      this.stationLevelId = ''

      this.stationLevelId = "";

    }

    this.pagination.current = 1

    this.queryGovDatas()

    this.pagination.current = 1;

    this.queryGovDatas();

  }

  // 定位级别数据

  private positionLevel(val: any, selectedOptions: any) {

    if (selectedOptions && selectedOptions.length > 0) {

      this.addForm.position = selectedOptions

      this.addForm.position = selectedOptions;

    } else {

      this.addForm.position = undefined

      this.addForm.position = undefined;

    }

  }

  // 获取下拉框数据

  private selectDatas() {

    get("dict/data/query?type=stationLevel ", {}).then(res => {

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

        this.stationLevel = res.data.data

      }

    })

      .catch(err => {

    get("dict/data/query?type=stationLevel ", {})

      .then((res) => {

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

          this.stationLevel = res.data.data;

        }

      })

      .catch((err) => {

        console.log(err);

      });

  }

  // 查询所有站点信息

  private queryGovDatas() {

    get('govMonitorPoint/getGovMonitorPointByCondition', {

    get("govMonitorPoint/getGovMonitorPointByCondition", {

      current: this.pagination.current,

      size: this.pagination.pageSize,

      name: this.searchName,

      stationLevel: this.stationLevelId

      stationLevel: this.stationLevelId,

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

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

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

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

        const govDatas = res.data.data.govMonitorPointList

        const govDatas = res.data.data.govMonitorPointList;

        if (govDatas.length > 0) {

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

            for (let j = 0; j < govDatas[i].position.length; j++) {

              govDatas[i].stationLevelName = this.stationLevel[govDatas[i].stationLevel]

              govDatas[i].stationLevelName = this.stationLevel[

                govDatas[i].stationLevel

              ];

            }

          }

        }

        this.dataSource = govDatas

        this.dataSource = govDatas;

      }

    })

    });

  }

  // 新增显示

  private handleModalVisible(flag: boolean) {

    this.addShowOrHiddenFlag = flag

    this.addShowOrHiddenFlag = flag;

  }

  // 新增成功

  private addOK() {

    this.$refs.addRulesForm.validate((valid: any) => {

      if (valid) {

        post('govMonitorPoint/insert', {

        post("govMonitorPoint/insert", {

          guid: this.addForm.guid, //政府站点编码

          name: this.addForm.name, //名称

          longitude: this.addForm.longitude, //经度

@@ -324,51 +565,51 @@
          cityCode: this.addForm.position[1].value,

          areaCode: this.addForm.position[2].value,

          stationLevel: this.addForm.stationLevel,

          desc: this.addForm.desc //备注

          desc: this.addForm.desc, //备注

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

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

            this.pagination.current = 1

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

            this.queryGovDatas()

            this.pagination.current = 1;

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

            this.queryGovDatas();

          } else {

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

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

          }

        })

        this.addShowOrHiddenFlag = false

        });

        this.addShowOrHiddenFlag = false;

        this.addForm = {

          guid: '',

          name: '',

          longitude: '',

          latitude: '',

          guid: "",

          name: "",

          longitude: "",

          latitude: "",

          position: [],

          stationLevel: undefined,

          desc: ''

        }

        this.addShowOrHiddenFlag = false

          desc: "",

        };

        this.addShowOrHiddenFlag = false;

      }

    })

    });

  }

  // 新增取消

  private addCancel() {

    this.addForm = {

      guid: '',

      name: '',

      longitude: '',

      latitude: '',

      guid: "",

      name: "",

      longitude: "",

      latitude: "",

      position: [],

      stationLevel: undefined,

      desc: ''

    }

    this.addShowOrHiddenFlag = false

      desc: "",

    };

    this.addShowOrHiddenFlag = false;

  }

  // 编辑显示

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

    this.editShowOrHiddenFlag = flag

    this.editBeforeRecord = record

    const positon = []

    positon.push(record.provinceCode)

    positon.push(record.cityCode)

    positon.push(record.areaCode)

    this.editShowOrHiddenFlag = flag;

    this.editBeforeRecord = record;

    const positon = [];

    positon.push(record.provinceCode);

    positon.push(record.cityCode);

    positon.push(record.areaCode);

    this.editForm = {

      id: record.id,

      guid: record.guid,

@@ -377,75 +618,112 @@
      latitude: record.latitude,

      position: positon,

      stationLevel: record.stationLevel,

      desc: record.desc === undefined ? '' : record.desc

    }

      desc: record.desc === undefined ? "" : record.desc,

    };

  }

  // 编辑显示

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

    this.editSiteShowOrHiddenFlag = flag

    this.editBeforeSiteRecord = record

    const positon = []

    positon.push(record.provinceCode)

    positon.push(record.cityCode)

    positon.push(record.areaCode)

    this.editSiteShowOrHiddenFlag = flag;

    this.editBeforeSiteRecord = record;

    const positon = [];

    positon.push(record.provinceCode);

    positon.push(record.cityCode);

    positon.push(record.areaCode);

    this.editSiteForm = {

      id: record.id,

      guid: record.guid

    }

      guid: record.guid,

    };

  }

  // 编辑站点保存

  private editSiteSave() {

    this.$refs.editSiteRulesForm.validate((valid: any) => {

      if (valid) {

        const guid = this.editSiteForm.guid === this.editBeforeSiteRecord.guid ? null : this.editSiteForm.guid

        if (!(guid)) {

          this.$message.warning('未修改！')

        const guid =

          this.editSiteForm.guid === this.editBeforeSiteRecord.guid

            ? null

            : this.editSiteForm.guid;

        if (!guid) {

          this.$message.warning("未修改！");

        } else {

          get('govMonitorPoint/updateGuid', {

          get("govMonitorPoint/updateGuid", {

            id: this.editSiteForm.id,

            guid

            guid,

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

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

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

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

              this.editSiteForm = {

                id: -1,

                guid: ''

              }

              this.editSiteShowOrHiddenFlag = false

              this.queryGovDatas()

                guid: "",

              };

              this.editSiteShowOrHiddenFlag = false;

              this.queryGovDatas();

            } else {

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

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

            }

          })

          });

        }

      }

    })

    });

  }

  private editSiteCancel() {

    this.editForm = {

      id: -1,

      guid: ''

    }

    this.editSiteShowOrHiddenFlag = false

      guid: "",

    };

    this.editSiteShowOrHiddenFlag = false;

  }

  // 编辑保存

  private editSave() {

    this.$refs.editRulesForm.validate((valid: any) => {

      if (valid) {

        const name = this.editForm.name === this.editBeforeRecord.name ? null : this.editForm.name

        const guid = this.editForm.guid === this.editBeforeRecord.guid ? null : this.editForm.guid

        const longitude = this.editForm.longitude === this.editBeforeRecord.longitude ? null : this.editForm.longitude

        const latitude = this.editForm.latitude === this.editBeforeRecord.latitude ? null : this.editForm.latitude

        const position = (this.editForm.position[0] === this.editBeforeRecord.provinceCode &&

        const name =

          this.editForm.name === this.editBeforeRecord.name

            ? null

            : this.editForm.name;

        const guid =

          this.editForm.guid === this.editBeforeRecord.guid

            ? null

            : this.editForm.guid;

        const longitude =

          this.editForm.longitude === this.editBeforeRecord.longitude

            ? null

            : this.editForm.longitude;

        const latitude =

          this.editForm.latitude === this.editBeforeRecord.latitude

            ? null

            : this.editForm.latitude;

        const position =

          this.editForm.position[0] === this.editBeforeRecord.provinceCode &&

          this.editForm.position[1] === this.editBeforeRecord.cityCode &&

          this.editForm.position[2] === this.editBeforeRecord.areaCode) ? null : this.editForm.position

        const stationLevel = this.editForm.stationLevel === this.editBeforeRecord.stationLevel ? null : this.editForm.stationLevel

        const desc = this.editBeforeRecord.desc === undefined ? (this.editForm.desc === '' ? null : this.editForm.desc) :

          this.editForm.desc === this.editBeforeRecord.desc ? null : this.editForm.desc

        if (!(name || guid || longitude || latitude || position || stationLevel || desc)) {

          this.$message.warning('未修改！')

          this.editForm.position[2] === this.editBeforeRecord.areaCode

            ? null

            : this.editForm.position;

        const stationLevel =

          this.editForm.stationLevel === this.editBeforeRecord.stationLevel

            ? null

            : this.editForm.stationLevel;

        const desc =

          this.editBeforeRecord.desc === undefined

            ? this.editForm.desc === ""

              ? null

              : this.editForm.desc

            : this.editForm.desc === this.editBeforeRecord.desc

            ? null

            : this.editForm.desc;

        if (

          !(

            name ||

            guid ||

            longitude ||

            latitude ||

            position ||

            stationLevel ||

            desc

          )

        ) {

          this.$message.warning("未修改！");

        } else {

          post('govMonitorPoint/update', {

          post("govMonitorPoint/update", {

            id: this.editForm.id,

            guid,

            name,

@@ -455,66 +733,63 @@
            cityCode: position === null ? null : position[1],

            areaCode: position === null ? null : position[2],

            stationLevel,

            desc

            desc,

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

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

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

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

              this.editForm = {

                id: -1,

                guid: '',

                name: '',

                longitude: '',

                latitude: '',

                guid: "",

                name: "",

                longitude: "",

                latitude: "",

                position: [],

                stationLevel: undefined,

                desc: ''

              }

              this.editShowOrHiddenFlag = false

              this.queryGovDatas()

                desc: "",

              };

              this.editShowOrHiddenFlag = false;

              this.queryGovDatas();

            } else {

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

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

            }

          })

          });

        }

      }

    })

    });

  }

  // 编辑取消

  private editCancel() {

    this.editForm = {

      id: -1,

      guid: '',

      name: '',

      longitude: '',

      latitude: '',

      guid: "",

      name: "",

      longitude: "",

      latitude: "",

      position: [],

      stationLevel: undefined,

      desc: ''

    }

    this.editShowOrHiddenFlag = false

      desc: "",

    };

    this.editShowOrHiddenFlag = false;

  }

  // 删除

  private delete(record: any) {

    post('govMonitorPoint/delete', {

      id: record.id

    post("govMonitorPoint/delete", {

      id: record.id,

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

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

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

        this.pagination.current = 1

        this.queryGovDatas()

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

        this.pagination.current = 1;

        this.queryGovDatas();

      } else {

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

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

      }

    })

    });

  }

  // 数据操作方法

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

    return (

      <div>

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

          {" "}

          编辑{" "}

        </a>

        <a onClick={() => this.editShow(true, record)}> 编辑 </a>

        <a-divider type="vertical" />

        <a-popconfirm

          title="确认删除吗？"

@@ -525,12 +800,9 @@
          <a href="#">删除</a>

        </a-popconfirm>

        <a-divider type="vertical" />

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

          {" "}

          政府站点修改{" "}

        </a>

        <a onClick={() => this.editSiteShow(true, record)}> 政府站点修改 </a>

      </div>

    )

    );

  }

}

</script>


 src/views/list/Unit.vue

@@ -159,400 +159,399 @@
</template>

<script lang="tsx">
import {
    Component,
    Prop,
    Vue,
    Model,
    Watch,
} from 'vue-property-decorator';
import moment from 'moment';
import { Component, Prop, Vue, Model, Watch } from "vue-property-decorator";
import moment from "moment";
import { get, post } from "@/util/request";
import * as _ from 'lodash';
import * as _ from "lodash";
@Component({
  components: {
  },
  components: {},
})
export default class QueryList extends Vue {
 //规则定义
  //规则定义
  private rules: any = {
    unitName:[
      { required: true, message: '名称不能为空', trigger: 'blur' },
      { message: '名称字数不能超过20个！', max: 19 },
    unitName: [
      { required: true, message: "名称不能为空", trigger: "blur" },
      { message: "名称字数不能超过20个！", max: 19 },
    ],
    parentCode:[{ required: true, message: '请选择！' }],
    areaCode:[{ required: true, message: '请选择！' }],
    state:[{ required: true, message: '请选择！' }]
  }
    private formLayout = {
      labelCol: {
        span: 5,
      },
      wrapperCol: {
        span: 15,
      },
    };
    private serch:any = {
        name:'',
        parentCode: [],
        areaCode:''
    }
    private editForm: any = {
        unitName:'',
        parentCode: [],
        areaCode:'',
        state:'0',
    }

  private pagination:any={
    total:0,
    current:1,
    pageSize:10,
    showSizeChanger: true,
    showQuickJumper: true,
    pageSizeOptions: ['10', '30', '60', '100'],
    showTotal: (total:number) => `共有 ${this.pagination.total} 条数据`,  //分页中显示总的数据
    parentCode: [{ required: true, message: "请选择！" }],
    areaCode: [{ required: true, message: "请选择！" }],
    state: [{ required: true, message: "请选择！" }],
  };
  private formLayout = {
    labelCol: {
      span: 5,
    },
    wrapperCol: {
      span: 15,
    },
  };
  private serch: any = {
    name: "",
    parentCode: [],
    areaCode: "",
  };
  private editForm: any = {
    unitName: "",
    parentCode: [],
    areaCode: "",
    state: "0",
  };

    @Watch('serch.name')
    private watchsearchInform(newVal:string,oldval:string){
      if (newVal !== '' && oldval === '') {
        this.pagination.current = 1
      }
        this.handleSearch()
  private pagination: any = {
    total: 0,
    current: 1,
    pageSize: 10,
    showSizeChanger: true,
    showQuickJumper: true,
    pageSizeOptions: ["10", "30", "60", "100"],
    showTotal: (total: number) => `共有 ${this.pagination.total} 条数据`, //分页中显示总的数据
  };

  @Watch("serch.name")
  private watchsearchInform(newVal: string, oldval: string) {
    if (newVal !== "" && oldval === "") {
      this.pagination.current = 1;
    }
    this.handleSearch();
  }

    private expandForm: boolean = false;
  private expandForm: boolean = false;

    private selectedRows: any[] = [];
    
    private parentListOptions: any[] = [];
    private newParentListOptions: any[] = [];
  private selectedRows: any[] = [];

    private tableLoading: boolean = false;
    private visibleInvalidityModal: boolean = false;
  private parentListOptions: any[] = [];
  private newParentListOptions: any[] = [];

    private moment: any = moment;
    private pageState: String = 'add';
  private tableLoading: boolean = false;
  private visibleInvalidityModal: boolean = false;

    private dataSource: any[] = [];
    
    private areaCodeList: any[] = [];
    
    private newAreaCodeList: any[] = [];
  private moment: any = moment;
  private pageState: String = "add";

    private visibleCreateModal: boolean = false;
  private dataSource: any[] = [];

  private areaCodeList: any[] = [];

  private newAreaCodeList: any[] = [];

  private visibleCreateModal: boolean = false;

  private createForm: any = null;
    
    private title: any = null;

  private title: any = null;

  private columns: any[] = [
      {
    {
      title: "序号",
      dataIndex: "key",
      key: "key",
      align: "center",
      customRender: (text,record,index) => `${index+1}`,
      customRender: (text, record, index) => `${index + 1}`,
      width: 60,
    },
    {
      title: '名称',
             align: "center",
            dataIndex: 'unitName',
        },
        {
          title: '上级区域',
             align: "center",
            dataIndex: 'parentName',
        },
        {
          title: '所属区域',
             align: "center",
            dataIndex: 'areaName',
        },
        {
            title: '操作时间',
            dataIndex: 'updateTime',
        },
        {
          title: '操作人',
             align: "center",
            dataIndex: 'createName',
        },
        {
            title: '状态',
          dataIndex: 'state',
             align: "center",
            customRender: this.progressStateRender,
      title: "名称",
      align: "center",
      dataIndex: "unitName",
    },
            {
            title: '是否作废',
          dataIndex: 'isInvalid',
             align: "center",
            customRender: this.progressIsInvalidRender,
        },
        {
          title: '操作',
             align: "center",
            customRender: this.opRender,
        },
    ];
    {
      title: "上级区域",
      align: "center",
      dataIndex: "parentName",
    },
    {
      title: "所属区域",
      align: "center",
      dataIndex: "areaName",
    },
    {
      title: "操作时间",
      dataIndex: "updateTime",
    },
    {
      title: "操作人",
      align: "center",
      dataIndex: "createName",
    },
    {
      title: "状态",
      dataIndex: "state",
      align: "center",
      customRender: this.progressStateRender,
    },
    {
      title: "是否作废",
      dataIndex: "isInvalid",
      align: "center",
      customRender: this.progressIsInvalidRender,
    },
    {
      title: "操作",
      align: "center",
      customRender: this.opRender,
    },
  ];


    private handleModalVisible(isVisible: boolean): void {
      this.visibleCreateModal = isVisible;
      this.pageState='add'
      this.title='新建责任单位'
    }
  private handleModalVisible(isVisible: boolean): void {
    this.visibleCreateModal = isVisible;
    this.pageState = "add";
    this.title = "新建责任单位";
  }

  private handleSearch(): void {
    console.log(this.serch)
       const data = this.serch.parentCode
        let code =data[data.length-1]
        
        get("unit/selectUint",{
            name:this.serch.name,
            parentCode:code,
            parentCodeList:this.serch.parentCode,
            areaCode:this.serch.areaCode,
            page:this.pagination.current,
            size: this.pagination.pageSize
        }).then(res=>{
          this.dataSource = res.data.data.item
          this.pagination.total = res.data.data.total
        })
        .catch(err=>{
            console.log(err);
        })
    }
    console.log(this.serch);
    const data = this.serch.parentCode;
    let code = data[data.length - 1];

    get("unit/selectUint", {
      name: this.serch.name,
      parentCode: code,
      parentCodeList: this.serch.parentCode,
      areaCode: this.serch.areaCode,
      page: this.pagination.current,
      size: this.pagination.pageSize,
    })
      .then((res) => {
        this.dataSource = res.data.data.item;
        this.pagination.total = res.data.data.total;
      })
      .catch((err) => {
        console.log(err);
      });
  }

  private handlerTableChange(pagination: any, filter: any, sorter: any): void {
      console.log('pagination',pagination)
      this.pagination.current = pagination.current
      this.pagination.pageSize = pagination.pageSize
      this.pagination.total = pagination.total
      this.handleSearch()
    }
    console.log("pagination", pagination);
    this.pagination.current = pagination.current;
    this.pagination.pageSize = pagination.pageSize;
    this.pagination.total = pagination.total;
    this.handleSearch();
  }

  private handleCreateModalOk() {
    let api ='unit/insert'
    if (this.pageState === 'edit') {
      api='unit/update'
    let api = "unit/insert";
    if (this.pageState === "edit") {
      api = "unit/update";
    }
    this.$refs.ruleForm.validate((valid: any) => {
      console.log(valid);
      if (valid) {
        const data = this.editForm.parentCode
        let code =data[data.length-1]
        const data = this.editForm.parentCode;
        let code = data[data.length - 1];
        console.log(this.editForm);
        // 插入角色
        post(api, {
            unitId: this.editForm.unitId,
            unitName:this.editForm.unitName,
            parentCode: code,
            parentCodeList:this.editForm.parentCode,
            areaCode: this.editForm.areaCode,
            state:parseInt(this.editForm.state)
        }).then((res: any) => {
           this.handleSearch()
          this.visibleCreateModal = false
          this.editForm = {
            unitName:'',
            parentCode: [],
            areaCode:'',
            state: '0',
            parentCodeList:[]
          }
        }).catch((err)=>{
            console.log(err);
          unitId: this.editForm.unitId,
          unitName: this.editForm.unitName,
          parentCode: code,
          parentCodeList: this.editForm.parentCode,
          areaCode: this.editForm.areaCode,
          state: parseInt(this.editForm.state),
        })
          .then((res: any) => {
            this.handleSearch();
            this.visibleCreateModal = false;
            this.editForm = {
              unitName: "",
              parentCode: [],
              areaCode: "",
              state: "0",
              parentCodeList: [],
            };
          })
          .catch((err) => {
            console.log(err);
          });
      } else {
        console.log('error submit!!');
        console.log("error submit!!");
        return false;
      }
    });

      console.log('editForm',this.editForm)
    }
    console.log("editForm", this.editForm);
  }

    private handleCreateModalCancel(): any {
      this.visibleCreateModal = false;
      this.editForm = {
        unitName:'',
        parentCode: [],
        areaCode:'',
        state: '0',
        parentCodeList:[]
      }
    }
  private handleCreateModalCancel(): any {
    this.visibleCreateModal = false;
    this.editForm = {
      unitName: "",
      parentCode: [],
      areaCode: "",
      state: "0",
      parentCodeList: [],
    };
  }
  private handleInvalidityModalCancel(): any {
      this.editForm = {
        unitName:'',
        parentCode: [],
        areaCode:'',
        state: '0',
        parentCodeList:[]
      }
      this.visibleInvalidityModal = false;
    }
    this.editForm = {
      unitName: "",
      parentCode: [],
      areaCode: "",
      state: "0",
      parentCodeList: [],
    };
    this.visibleInvalidityModal = false;
  }

    private cityData() {
        get("system/area/queryCity",{
          
        }).then(res => {
          console.log('00000000000000', res);
          let org = res.data.data;
          let lists = JSON.stringify(org);
  private cityData() {
    get("system/area/queryCity", {})
      .then((res) => {
        console.log("00000000000000", res);
        let org = res.data.data;
        let lists = JSON.stringify(org);

          lists = lists.replace(/"areaCode"/g, '"value"');
        lists = lists.replace(/"areaCode"/g, '"value"');

          lists = lists.replace(/"areaName"/g, '"label"');
        lists = lists.replace(/"areaName"/g, '"label"');

          const treeLists = JSON.parse(lists)
          this.parentListOptions = JSON.parse(JSON.stringify(treeLists))
          this.newParentListOptions = JSON.parse(JSON.stringify(treeLists))
        })
        .catch(err=>{
            console.log(err);
        })
    }
        const treeLists = JSON.parse(lists);
        this.parentListOptions = JSON.parse(JSON.stringify(treeLists));
        this.newParentListOptions = JSON.parse(JSON.stringify(treeLists));
      })
      .catch((err) => {
        console.log(err);
      });
  }

  private  positionLevel(val: any) {
    this.serch.areaCode = ''
    this.editForm.areaCode = ''
     let code =val[val.length-1]
        get("system/area/code",{
          code:code
        }).then(res => {
          console.log('00000000000000', res);
          this.areaCodeList= res.data.data;
          this.newAreaCodeList= res.data.data;
        })
        .catch(err=>{
            console.log(err);
        })
    }
  private positionLevel(val: any) {
    this.serch.areaCode = "";
    this.editForm.areaCode = "";
    let code = val[val.length - 1];
    get("system/area/code", {
      code: code,
    })
      .then((res) => {
        console.log("00000000000000", res);
        this.areaCodeList = res.data.data;
        this.newAreaCodeList = res.data.data;
      })
      .catch((err) => {
        console.log(err);
      });
  }

    private mounted() {
  private mounted() {
    this.handleSearch();
    this.cityData();
  }

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

  private handleAssert(record: any) {
    get("unit/state", {
      unitId: record.unitId,
    })
      .then((res) => {
        this.handleSearch();
        this.cityData()
    }
        this.$message.success("操作成功");
      })
      .catch((err) => {
        console.log(err);
      });
  }
  private recordTableData: any = null;
  private handleInvalidity(record: any) {
    this.visibleInvalidityModal = true;
    this.recordTableData = record;
  }

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

    private handleAssert(record: any){
       get("unit/state",{
         unitId: record.unitId,
          
       }).then(res => {
           this.handleSearch()
           this.$message.success('操作成功')
        })
        .catch(err=>{
            console.log(err);
        })
    }
    private recordTableData: any = null;
    private handleInvalidity(record: any) {
      this.visibleInvalidityModal = true
       this.recordTableData=record
    }
  
  private handleInvalidityModalOk(record: any) {
       this.createForm.validateFields((err: any, fieldsValue: any) => {
            if (err) {
                return;
            }
            get("unit/invalid",{
              unitId: this.recordTableData.unitId,
              invalidReason:this.createForm.getFieldValue('code')
            }).then(res => { 
              this.$message.success('操作成功')
              this.visibleInvalidityModal = false
              this.handleSearch()
            })
            .catch(err=>{
                console.log(err);
            })
    this.createForm.validateFields((err: any, fieldsValue: any) => {
      if (err) {
        return;
      }
      get("unit/invalid", {
        unitId: this.recordTableData.unitId,
        invalidReason: this.createForm.getFieldValue("code"),
      })
        .then((res) => {
          this.$message.success("操作成功");
          this.visibleInvalidityModal = false;
          this.handleSearch();
        })
        .catch((err) => {
          console.log(err);
        });
    });
  }
    

  private progressIsInvalidRender(text: Number) {
        if (text === 0) {
            return <a-badge status = 'success' text = '未作废' />;
        }
        return <a-badge status = 'error' text = '已作废' />;
    if (text === 0) {
      return <a-badge status="success" text="未作废" />;
    }
    return <a-badge status="error" text="已作废" />;
  }
  

  private progressStateRender(text: string) {
        if (text === '0') {
            return <a-badge status = 'success' text = '生效' />;
        }
        return <a-badge status = 'processing' text = '未生效' />;
    if (text === "0") {
      return <a-badge status="success" text="生效" />;
    }
    return <a-badge status="processing" text="未生效" />;
  }
    private async handleUpdateModalVisible(visible: boolean, record: any): void {
      this.visibleCreateModal = true;
      await this.positionLevel(record.parentCodeList)
      this.title = '编辑责任单位'
      let params = _.cloneDeep(record)
      console.log(params)
      params.parentCode=record.parentCodeList
      this.editForm = params 
      this.pageState='edit'
      console.log('editForm',record)
    }
    private async handleDetailModalVisible(visible: boolean, record: any): void {
      this.visibleCreateModal = true;
      await this.positionLevel(record.parentCodeList)
      this.title = '责任单位详情'
       let params = _.cloneDeep(record)
      console.log(params)
      params.parentCode=record.parentCodeList
      this.editForm = params 
      this.pageState='view'
    }
  private async handleUpdateModalVisible(visible: boolean, record: any): void {
    this.visibleCreateModal = true;
    await this.positionLevel(record.parentCodeList);
    this.title = "编辑责任单位";
    let params = _.cloneDeep(record);
    console.log(params);
    params.parentCode = record.parentCodeList;
    this.editForm = params;
    this.pageState = "edit";
    console.log("editForm", record);
  }
  private async handleDetailModalVisible(visible: boolean, record: any): void {
    this.visibleCreateModal = true;
    await this.positionLevel(record.parentCodeList);
    this.title = "责任单位详情";
    let params = _.cloneDeep(record);
    console.log(params);
    params.parentCode = record.parentCodeList;
    this.editForm = params;
    this.pageState = "view";
  }
  private opRender(text: string, record: any, index: number) {
    // 生效console
    console.log('record',record)
    if (record.state === '0') {
    console.log("record", record);
    if (record.state === "0") {
      if (Number(record.isInvalid) === 0) {
        return <div>
              <a onClick = {
                () => this.handleDetailModalVisible(true, record)
            } > 详情 </a>
            <a-divider type = 'vertical' />
            <a  onClick = {
                () => this.handleInvalidity(record)
            } >作废</a>
            </div>
        return (
          <div>
            <a onClick={() => this.handleDetailModalVisible(true, record)}>
              {" "}
              详情{" "}
            </a>
            <a-divider type="vertical" />
            <a onClick={() => this.handleInvalidity(record)}>作废</a>
          </div>
        );
      } else {
         return <div>
              <a onClick = {
                () => this.handleDetailModalVisible(true, record)
            } > 详情 </a>
            </div>
        return (
          <div>
            <a onClick={() => this.handleDetailModalVisible(true, record)}>
              {" "}
              详情{" "}
            </a>
          </div>
        );
      }
        } else {
           return   <div>
              <a onClick = {
                () => this.handleDetailModalVisible(true, record)
            } > 详情 </a>
            <a-divider type='vertical' />
             <a onClick = {
                () => this.handleUpdateModalVisible(true, record)
            } > 编辑 </a>
            </div>
        }
      this.handleSearch();
    } else {
      return (
        <div>
          <a onClick={() => this.handleDetailModalVisible(true, record)}>
            {" "}
            详情{" "}
          </a>
          <a-divider type="vertical" />
          <a onClick={() => this.handleUpdateModalVisible(true, record)}>
            {" "}
            编辑{" "}
          </a>
        </div>
      );
    }

  }
}
</script>

<style lang="less" scoped>
</style>
<style lang="less" scoped></style>

 src/views/list/devicesBasic.vue

@@ -1205,12 +1205,15 @@
  private createForm: any = null;



  private editRecord: any = {};



  private pagination: any = {

    total: 0,

    current: 1,

    pageSize: 5,

    showSizeChanger: false,

    showQuickJumper: false

    pageSize: 10,

    showSizeChanger: true,

    showQuickJumper: true,

    pageSizeOptions: ["10", "30", "60", "100"],

    showTotal: (total: number) => `共有 ${this.pagination.total} 条数据`, //分页中显示总的数据

  };



  private updateRecord1: any = {};

@@ -1347,7 +1350,7 @@
    //   agehou:''

    // }

  ]

 


  private rowSelectionChange(selectedRowKeys: string[], selectedRows: DataType[]){

    //  console.log(selectedRows);

     this.selectedtable=selectedRows

@@ -1380,6 +1383,14 @@
  }



  private columns: any[] = [

    {

      title: "序号",

      dataIndex: "key",

      key: "key",

      align: "center",

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

      width: 60,

    },

    {

      title: "名称",

      dataIndex: "name"

@@ -1641,6 +1652,9 @@
  private current: number = 1

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

    this.current = pagination.current

    this.pagination.current = pagination.current;

    this.pagination.pageSize = pagination.pageSize;

    this.pagination.total = pagination.total;

    this.loadRuleData(pagination.current)

  }



@@ -1686,7 +1700,7 @@
        console.log(21323);

         for(var i=0;i<this.datatable.length;i++){

          if(this.ceAQIvalue==='+'){

             this.datatable[i].cel=((this.datatable[i].cel-0) + (this.ceAQIvaluein-0)).toFixed(2) 
             this.datatable[i].cel=((this.datatable[i].cel-0) + (this.ceAQIvaluein-0)).toFixed(2)

          }else if(this.ceAQIvalue==='-'){

            this.datatable[i].cel=Number((this.datatable[i].cel - this.ceAQIvaluein).toFixed(2))

          }else if(this.ceAQIvalue==='*'){

@@ -1702,16 +1716,16 @@
        //   this.datatable[i].cel=parseFloat(this.datatable[i].cel+this.ceAQIvaluein).toFixed(2)

        //   this.datatable[i].agehou='aqi*'+this.datatable[i].aqi+'+'+'ce1*'+this.datatable[i].cel

            if(this.AQIvalue1==='+'){

              this.datatable[i].aqi=((this.datatable[i].aqi-0) + (this.AQIvalue-0)).toFixed(2) 
              this.datatable[i].aqi=((this.datatable[i].aqi-0) + (this.AQIvalue-0)).toFixed(2)

            }else if(this.AQIvalue1==='-'){

              this.datatable[i].aqi=Number((this.datatable[i].aqi - this.AQIvalue)).toFixed(2)

            } else if(this.AQIvalue1==='*'){

              this.datatable[i].aqi=Number((this.datatable[i].aqi * this.AQIvalue)).toFixed(2)

            }else if(this.AQIvalue1==='/'){

              this.datatable[i].aqi=Number((this.datatable[i].aqi / this.AQIvalue).toFixed(3))

            } 
            }

            if(this.ceAQIvalue==='+'){

             this.datatable[i].cel=((this.datatable[i].cel-0) + (this.ceAQIvaluein-0)).toFixed(2) 
             this.datatable[i].cel=((this.datatable[i].cel-0) + (this.ceAQIvaluein-0)).toFixed(2)

            }else if(this.ceAQIvalue==='-'){

              this.datatable[i].cel=Number((this.datatable[i].cel - this.ceAQIvaluein)).toFixed(2)

            }else if(this.ceAQIvalue==='*'){

@@ -1951,11 +1965,11 @@


  // 存放查询的组织id

  private selectMt: any = null

  


  private loading: boolean=false

  


  private handleCancel(){

    


  }

  //新建保存

  private handleCreateModalOk() {

@@ -2097,7 +2111,7 @@
            name: this.serch.name,

            mac: this.serch.name,

            page: pageSize,

            size: 8

            size: this.pagination.pageSize,

        })

        .then(res => {

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

@@ -2200,13 +2214,13 @@
  }

  // 接收新增经纬度点

  private receiveLomLat(lonLat: any) {

   


    this.addLL = lonLat

    this.getTownData(lonLat)

  }

  


  private getTownData(lonLat: any) {

    console.log(lonLat,'dsasa');  
    console.log(lonLat,'dsasa');

            let self=this

                    var geocoder = new AMap.Geocoder({

                        // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode

@@ -2248,7 +2262,7 @@
                            // result为对应的地理位置详细信息

                        }

                    })

				


    // jsonp('/proxy/reverse_geocoding/v3/', {

    // jsonp('https://api.map.baidu.com/reverse_geocoding/v3/', {

    //     ak: 'e5ig9Z7AKFjv8wbkqDbuLkUMzBev0tgT',


 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;


 src/views/list/devicesVersion.vue

@@ -3,23 +3,24 @@
    <a-card :bordered="false" style="margin-top:24px">

      <div class="tableList">

        <div class="tableListForm">

          <a-form

            @submit="handleSearch"

            layout="horizontal"

            :form="searchForm"

          >

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

                >新建</a-button

              >

              <a-form-item

                v-bind="searchFormLayout"

                style="width: 240px;float: right;"

              >

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

                <a-input

                  v-model="serch.name"

                  placeholder="请输入型号名称"

                  allow-clear

                />

              </a-form-item>

            </a-row>

          </a-form>

@@ -45,19 +46,21 @@
      @cancel="handleCreateModalCancel"

      okText="保存"

    >



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

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

        <a-form-item

          :labelCol="{ span: 5 }"

          :wrapperCol="{ span: 15 }"

          label="名称"

          has-feedback

        >

         <a-input

                placeholder="型号名称"

                type="string"

                v-decorator="['deviceName', { rules: [{ required: true, message: '请输入名称！' }] }]"

              />

          <a-input

            placeholder="型号名称"

            type="string"

            v-decorator="[

              'deviceName',

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

            ]"

          />

        </a-form-item>



        <a-form-item

@@ -90,14 +93,11 @@
<script lang="tsx">

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





import moment from "moment";

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





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

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





import modalService from "@/core/ModalService.ts";



@@ -107,24 +107,24 @@
@Component({

  components: {

    UpdateTaskForm,

    DistributionVersion

  }

    DistributionVersion,

  },

})

export default class QueryList extends Vue {

  private searchForm: any;



  private serch: any = {

    name: ""

    name: "",

  };



  private searchFormLayout: any = {

    labelCol: {

      span: 5

      span: 5,

    },

    wrapperCol: {

      span: 18,

      offset: 1

    }

      offset: 1,

    },

  };



  private form: any = {};

@@ -159,30 +159,40 @@


  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: "createTime"

      dataIndex: "createTime",

    },

    {

      title: "备注",

      dataIndex: "desc"

      dataIndex: "desc",

    },

    {

      title: "操作",

      customRender: this.opRender

    }

      customRender: this.opRender,

    },

  ];



  private pagination: any = {

    total: 0,

    current: 0,

    pageSize: 5,

    showSizeChanger: false,

    showQuickJumper: false

    current: 1,

    pageSize: 10,

    showSizeChanger: true,

    showQuickJumper: true,

    pageSizeOptions: ["10", "30", "60", "100"],

    showTotal: (total: number) => `共有 ${this.pagination.total} 条数据`, //分页中显示总的数据

  };

  constructor() {

    super();

@@ -200,20 +210,20 @@
    return [

      {

        text: status[0],

        value: 0

        value: 0,

      },

      {

        text: status[1],

        value: 1

        value: 1,

      },

      {

        text: status[2],

        value: 2

        value: 2,

      },

      {

        text: status[3],

        value: 3

      }

        value: 3,

      },

    ];

  }



@@ -233,20 +243,23 @@


  private handleSearch(): void {

    get("manageRole/getManageRoleByNameFuzzy", {

          name: this.serch.name,

          current: 1,

          size: 100

      })

      .then(res => {

      name: this.serch.name,

      current: 1,

      size: 100,

    })

      .then((res) => {

        this.dataSource = res.data.data.manageRoles;

      })

      .catch(err => {

      .catch((err) => {

        console.log(err);

      });

  }



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

    this.loadRuleData(pagination.current)

    this.pagination.current = pagination.current;

    this.pagination.pageSize = pagination.pageSize;

    this.pagination.total = pagination.total;

    this.loadRuleData(pagination.current);

  }



  private testCallback(param: any) {}

@@ -287,7 +300,7 @@


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

    this.updateRecord1 = record;

      this.distributionMenuVisible = true;

    this.distributionMenuVisible = true;

  }



  private handleCreateModalOk() {

@@ -295,23 +308,21 @@
      if (err) {

        return;

      }

      post("version/insert",

          {

            name: this.createForm.getFieldValue("deviceName"),

            desc: this.createForm.getFieldValue("desc")

          }

        )

      post("version/insert", {

        name: this.createForm.getFieldValue("deviceName"),

        desc: this.createForm.getFieldValue("desc"),

      })

        .then((res: any) => {

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

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

            return

            return;

          }

          this.createForm.resetFields();

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

          this.visibleCreateModal = false;

          this.loadRuleData(1);

        })

        .catch(err => {

        .catch((err) => {

          console.log(err);

        });

    });

@@ -333,44 +344,41 @@


  private created() {

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

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

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

    this.loadRuleData(1);

  }



  private loadRuleData(page:number) {

  private loadRuleData(page: number) {

    this.tableLoading = true;

    get("version/query", {

          name: this.serch.name,

          orderType: 1,

          order: 'createTime',

          page: page,

          size: 8

      })

      .then(res => {

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

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

        } else {

          this.tableLoading = false;

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

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

          this.pagination.pageSize = res.data.data.size;

          this.dataSource = res.data.data.versions;

        }

      });

      name: this.serch.name,

      orderType: 1,

      order: "createTime",

      page: page,

      size: this.pagination.pageSize,

    }).then((res) => {

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

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

      } else {

        this.tableLoading = false;

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

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

        this.pagination.pageSize = res.data.data.size;

        this.dataSource = res.data.data.versions;

      }

    });

  }



  private deleteManageRole(record: any) {

    post("version/delete",

        { id: record.id },

      )

      .then(res => {

    post("version/delete", { id: record.id })

      .then((res) => {

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

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

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

          this.loadRuleData(1);

        }

      })

      .catch(err=> {

        this.$message.warning(err,2)

      .catch((err) => {

        this.$message.warning(err, 2);

      });

  }




 src/views/list/specialDevice.vue

@@ -3,352 +3,239 @@
    <a-card :bordered="false" style="margin-top:24px">

      <div class="tableList">

        <div class="tableListForm">

          <a-form-model  layout="horizontal">

              <a-row :gutter="[8,0]">

          <a-form-model layout="horizontal">

            <a-row :gutter="[8, 0]">

              <a-col :span="2">

              <a-button

                <a-button

                  icon="plus"

                  type="primary"

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

                  style="margin-left: 25px;"

              >新建

              </a-button>

                  >新建

                </a-button>

              </a-col>

                <a-col :span="12">

                  <a-button

                      icon="search"

                      type="primary"

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

                      style="margin-left: 25px;"

              <a-col :span="12">

                <a-button

                  icon="search"

                  type="primary"

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

                  style="margin-left: 25px;"

                  >设备所属历史组织

                  </a-button>

                </a-col>

                <a-col :span="4">

              <a-form-model-item  :labelCol="{span:16}" :wrapperCol="{span:20}">

                <a-select

                </a-button>

              </a-col>

              <a-col :span="4">

                <a-form-model-item

                  :labelCol="{ span: 16 }"

                  :wrapperCol="{ span: 20 }"

                >

                  <a-select

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

                    allow-clear

                    show-search

                    style="width:200px"

                    :filter-option="filterOption"

                    @change="handleChange"

                >

<!--    @change="handleChange"                  -->

                  <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="6">

              <a-form-model-item

                  :labelCol="{span:2}" :wrapperCol="{span:10}"

                  >

                    <!--    @change="handleChange"                  -->

                    <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="6">

                <a-form-model-item

                  :labelCol="{ span: 2 }"

                  :wrapperCol="{ span: 10 }"

                  fieldDecoratorId="name"

              >

                <a-input v-model="serchName" placeholder="请输入设备名称或者mac"/>

              </a-form-model-item>

                </a-col>

                >

                  <a-input

                    v-model="serchName"

                    placeholder="请输入设备名称或者mac"

                  />

                </a-form-model-item>

              </a-col>

            </a-row>

          </a-form-model>

        </div>

        <av-standard-table

            :dataSource="dataSource"

            :columns="columns"

            :paginationProps="pagination"

            @tableChange="handlerTableChange"

          :dataSource="dataSource"

          :columns="columns"

          :paginationProps="pagination"

          @tableChange="handlerTableChange"

        ></av-standard-table>

        <!--  :loading="tableLoading"

          :paginationProps="pagination"

          @tableChange="handlerTableChange"

          @selectChange="handlerSelectChange"-->

      </div>



    </a-card>



    <a-modal

        title="添加特殊设备"

        destroyOnClose

        :visible="visibleCreateModal"

        @ok="handleCreateModalOk"

        @cancel="handleCreateModalCancel"

        okText="保存"

      title="添加特殊设备"

      destroyOnClose

      :visible="visibleCreateModal"

      @ok="handleCreateModalOk"

      @cancel="handleCreateModalCancel"

      okText="保存"

    >

      <a-form-model

          style="margin-top: 8px"

          :model="addData"

          :rules="rules"

          ref="addRulesForm"

        style="margin-top: 8px"

        :model="addData"

        :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="addData.name"

            placeholder="设备名称"

            type="string"

            v-model="addData.name"

          />

        </a-form-model-item>



        <a-form-model-item

            :labelCol="{ span: 5 }"

            has-feedback

            :wrapperCol="{ span: 15 }"

            label="mac"

            prop="mac"

          :labelCol="{ span: 5 }"

          has-feedback

          :wrapperCol="{ span: 15 }"

          label="mac"

          prop="mac"

        >

          <a-input

              placeholder="mac地址"

              type="string"

              v-model="addData.mac"

          />

          <a-input placeholder="mac地址" type="string" v-model="addData.mac" />

        </a-form-model-item>

        <a-form-model-item

            :labelCol="{ span: 5 }"

            has-feedback

            :wrapperCol="{ span: 15 }"

            label="组织"

            prop="organization"

          :labelCol="{ span: 5 }"

          has-feedback

          :wrapperCol="{ span: 15 }"

          label="组织"

          prop="organization"

        >

          <a-select

              placeholder="选择组织（输入名称搜索）"

              type="string"

              allow-clear

              show-search

              :filter-option="filterOption"

              v-model="addData.organization"

          >

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

          </a-select>

        </a-form-model-item>

        <a-form-model-item

            :labelCol="{ span: 5 }"

            has-feedback

            :wrapperCol="{ span: 15 }"

            label="设备型号"

            prop="version"

        >

          <a-select

              placeholder="选择型号（输入名称搜索）"

              type="string"

              allow-clear

              :filter-option="filterOption"

              show-search

              v-model="addData.version"

          >

            <a-select-option v-for="(item,index) in versions" :key="index" :value = 'item.id'>{{ item.name }}</a-select-option>

          </a-select>

        </a-form-model-item>

        <a-form-model-item

            :labelCol="{ span: 5 }"

            has-feedback

            :wrapperCol="{ span: 15 }"

            label="设备类型"

            prop="type"

        >

          <a-select

              placeholder="选择类型"

              type="string"

              allow-clear

              :filter-option="filterOption"

              show-search

              v-model="addData.type"

          >

            <a-select-option v-for="(item,index) in dictDeviceType" :key="index" :value = 'index'>{{ item }}</a-select-option>

          </a-select>

        </a-form-model-item>

        <a-form-model-item

            :labelCol="{ span: 5 }"

            has-feedback

            :wrapperCol="{ span: 15 }"

            label="维护人"

        >

          <a-select

              placeholder="选择维护人"

              mode="multiple"

              type="string"

              allow-clear

              :filter-option="filterOption"

              v-model="addData.operators"

            placeholder="选择组织（输入名称搜索）"

            type="string"

            allow-clear

            show-search

            :filter-option="filterOption"

            v-model="addData.organization"

          >

            <a-select-option

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

                :key="index"

                :value = 'item.id'

            >{{ item.user_name }}

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

              :key="index"

              :value="item.id"

              >{{ item.name }}</a-select-option

            >

          </a-select>

        </a-form-model-item>

        <a-form-model-item

          :labelCol="{ span: 5 }"

          has-feedback

          :wrapperCol="{ span: 15 }"

          label="设备型号"

          prop="version"

        >

          <a-select

            placeholder="选择型号（输入名称搜索）"

            type="string"

            allow-clear

            :filter-option="filterOption"

            show-search

            v-model="addData.version"

          >

            <a-select-option

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

              :key="index"

              :value="item.id"

              >{{ item.name }}</a-select-option

            >

          </a-select>

        </a-form-model-item>

        <a-form-model-item

          :labelCol="{ span: 5 }"

          has-feedback

          :wrapperCol="{ span: 15 }"

          label="设备类型"

          prop="type"

        >

          <a-select

            placeholder="选择类型"

            type="string"

            allow-clear

            :filter-option="filterOption"

            show-search

            v-model="addData.type"

          >

            <a-select-option

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

              :key="index"

              :value="index"

              >{{ item }}</a-select-option

            >

          </a-select>

        </a-form-model-item>

        <a-form-model-item

          :labelCol="{ span: 5 }"

          has-feedback

          :wrapperCol="{ span: 15 }"

          label="维护人"

        >

          <a-select

            placeholder="选择维护人"

            mode="multiple"

            type="string"

            allow-clear

            :filter-option="filterOption"

            v-model="addData.operators"

          >

            <a-select-option

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

              :key="index"

              :value="item.id"

              >{{ item.user_name }}

            </a-select-option>

          </a-select>

        </a-form-model-item>



          <a-form-model-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="位置" prop="positionBack">

            <a-cascader  :options="areaData" placeholder="双击选择城市(为显示城市下的政府站点)" change-on-select

                        @change="positionLevel" labelInValue/>

        </a-form-model-item>

        <a-form-model-item

            :labelCol="{ span: 5 }"

            has-feedback

            :wrapperCol="{ span: 15 }"

            label="政府站点"

          :labelCol="{ span: 5 }"

          :wrapperCol="{ span: 15 }"

          label="位置"

          prop="positionBack"

        >

          <a-select

              placeholder="政府站点"

              v-model="addData.guid"

              allow-clear

              :filter-option="filterOption"

              show-search

          >

            <a-select-option

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

                :key="index"

                :value="item.guid"

            >{{ item.name }}

            </a-select-option>

          </a-select>

        </a-form-model-item>

      </a-form-model>



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

    </a-modal>



    <a-modal

        title="编辑特殊设备"

        destroyOnClose

        :visible="editFlag"

        @ok="handleEditModalOk"

        @cancel="handleEditModalCancel"

        okText="保存"

    >

      <a-form-model

          style="margin-top: 8px"

          :form="form"

          :model="editData"

          :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="editData.name"

          />

        </a-form-model-item>



        <a-form-model-item

            :labelCol="{ span: 5 }"

            has-feedback

            :wrapperCol="{ span: 15 }"

            label="mac"

            prop="mac"

        >

          <a-input

              placeholder="mac地址"

              type="string"

              v-model="editData.mac"

          <a-cascader

            :options="areaData"

            placeholder="双击选择城市(为显示城市下的政府站点)"

            change-on-select

            @change="positionLevel"

            labelInValue

          />

        </a-form-model-item>

        <a-form-model-item

            :labelCol="{ span: 5 }"

            has-feedback

            :wrapperCol="{ span: 15 }"

            label="组织"

            prop="organization"

          :labelCol="{ span: 5 }"

          has-feedback

          :wrapperCol="{ span: 15 }"

          label="政府站点"

        >

          <a-select

              placeholder="选择组织（输入名称搜索）"

              type="string"

              allow-clear

              show-search

              :filter-option="filterOption"

              v-model="editData.organization"

          >

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

          </a-select>

        </a-form-model-item>

        <a-form-model-item

            :labelCol="{ span: 5 }"

            has-feedback

            :wrapperCol="{ span: 15 }"

            label="设备型号"

            prop="version"

        >

          <a-select

              placeholder="选择型号（输入名称搜索）"

              type="string"

              allow-clear

              :filter-option="filterOption"

              show-search

              v-model="editData.version"

          >

            <a-select-option v-for="(item,index) in versions" :key="index" :value = 'item.id'>{{ item.name }}</a-select-option>

          </a-select>

        </a-form-model-item>

        <a-form-model-item

            :labelCol="{ span: 5 }"

            has-feedback

            :wrapperCol="{ span: 15 }"

            label="设备类型"

            prop="type"

        >

          <a-select

              placeholder="选择类型"

              type="string"

              allow-clear

              :filter-option="filterOption"

              show-search

              v-model="editData.type"

          >

            <a-select-option v-for="(item,index) in dictDeviceType" :key="index" :value = 'index'>{{ item }}</a-select-option>

          </a-select>

        </a-form-model-item>

        <a-form-model-item

            :labelCol="{ span: 5 }"

            has-feedback

            :wrapperCol="{ span: 15 }"

            label="维护人"

        >

          <a-select

              placeholder="选择维护人"

              mode="multiple"

              type="string"

              allow-clear

              :filter-option="filterOption"

              v-model="editData.operators"

            placeholder="政府站点"

            v-model="addData.guid"

            allow-clear

            :filter-option="filterOption"

            show-search

          >

            <a-select-option

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

                :key="index"

                :value = 'item.id'

            >{{ item.user_name }}

            </a-select-option>

          </a-select>

        </a-form-model-item>

        <a-form-model-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="位置" prop="positionBack">

          <a-cascader  :options="areaData" placeholder="双击选择城市(为显示城市下的政府站点)" change-on-select

                       @change="positionLevel" labelInValue/>

        </a-form-model-item>

        <a-form-model-item

            :labelCol="{ span: 5 }"

            has-feedback

            :wrapperCol="{ span: 15 }"

            label="政府站点"

        >

          <a-select

              placeholder="政府站点"

              v-model="editData.guid"

              allow-clear

              :filter-option="filterOption"

              show-search

          >

            <a-select-option

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

                :key="index"

                :value="item.guid"

            >{{ item.name }}

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

              :key="index"

              :value="item.guid"

              >{{ item.name }}

            </a-select-option>

          </a-select>

        </a-form-model-item>

@@ -356,21 +243,196 @@


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

    </a-modal>

    <Calibration :caliRecord="caliRecord"  :wFlag="visibleFlag" @cFlag="turnFlag"/>

    <history-table :visible="historyFlag" :orgData="orgData" @hFlag="turnHFlag"/>



    <a-modal

      title="编辑特殊设备"

      destroyOnClose

      :visible="editFlag"

      @ok="handleEditModalOk"

      @cancel="handleEditModalCancel"

      okText="保存"

    >

      <a-form-model

        style="margin-top: 8px"

        :form="form"

        :model="editData"

        :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="editData.name"

          />

        </a-form-model-item>



        <a-form-model-item

          :labelCol="{ span: 5 }"

          has-feedback

          :wrapperCol="{ span: 15 }"

          label="mac"

          prop="mac"

        >

          <a-input placeholder="mac地址" type="string" v-model="editData.mac" />

        </a-form-model-item>

        <a-form-model-item

          :labelCol="{ span: 5 }"

          has-feedback

          :wrapperCol="{ span: 15 }"

          label="组织"

          prop="organization"

        >

          <a-select

            placeholder="选择组织（输入名称搜索）"

            type="string"

            allow-clear

            show-search

            :filter-option="filterOption"

            v-model="editData.organization"

          >

            <a-select-option

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

              :key="index"

              :value="item.id"

              >{{ item.name }}</a-select-option

            >

          </a-select>

        </a-form-model-item>

        <a-form-model-item

          :labelCol="{ span: 5 }"

          has-feedback

          :wrapperCol="{ span: 15 }"

          label="设备型号"

          prop="version"

        >

          <a-select

            placeholder="选择型号（输入名称搜索）"

            type="string"

            allow-clear

            :filter-option="filterOption"

            show-search

            v-model="editData.version"

          >

            <a-select-option

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

              :key="index"

              :value="item.id"

              >{{ item.name }}</a-select-option

            >

          </a-select>

        </a-form-model-item>

        <a-form-model-item

          :labelCol="{ span: 5 }"

          has-feedback

          :wrapperCol="{ span: 15 }"

          label="设备类型"

          prop="type"

        >

          <a-select

            placeholder="选择类型"

            type="string"

            allow-clear

            :filter-option="filterOption"

            show-search

            v-model="editData.type"

          >

            <a-select-option

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

              :key="index"

              :value="index"

              >{{ item }}</a-select-option

            >

          </a-select>

        </a-form-model-item>

        <a-form-model-item

          :labelCol="{ span: 5 }"

          has-feedback

          :wrapperCol="{ span: 15 }"

          label="维护人"

        >

          <a-select

            placeholder="选择维护人"

            mode="multiple"

            type="string"

            allow-clear

            :filter-option="filterOption"

            v-model="editData.operators"

          >

            <a-select-option

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

              :key="index"

              :value="item.id"

              >{{ item.user_name }}

            </a-select-option>

          </a-select>

        </a-form-model-item>

        <a-form-model-item

          :labelCol="{ span: 5 }"

          :wrapperCol="{ span: 15 }"

          label="位置"

          prop="positionBack"

        >

          <a-cascader

            :options="areaData"

            placeholder="双击选择城市(为显示城市下的政府站点)"

            change-on-select

            @change="positionLevel"

            labelInValue

          />

        </a-form-model-item>

        <a-form-model-item

          :labelCol="{ span: 5 }"

          has-feedback

          :wrapperCol="{ span: 15 }"

          label="政府站点"

        >

          <a-select

            placeholder="政府站点"

            v-model="editData.guid"

            allow-clear

            :filter-option="filterOption"

            show-search

          >

            <a-select-option

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

              :key="index"

              :value="item.guid"

              >{{ item.name }}

            </a-select-option>

          </a-select>

        </a-form-model-item>

      </a-form-model>



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

    </a-modal>

    <Calibration

      :caliRecord="caliRecord"

      :wFlag="visibleFlag"

      @cFlag="turnFlag"

    />

    <history-table

      :visible="historyFlag"

      :orgData="orgData"

      @hFlag="turnHFlag"

    />

  </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 { get, post } from "@/util/request";

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

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

import Calibration from '@/components/device/calibration.vue';

import HistoryTable from '@/components/specialDevice/historyTable.vue';

import Calibration from "@/components/device/calibration.vue";

import HistoryTable from "@/components/specialDevice/historyTable.vue";

import org from "@/util/org";



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

@@ -381,365 +443,427 @@
    UpdateTaskForm,

    DistributionMenu,

    Calibration,

    HistoryTable

  }

    HistoryTable,

  },

})

export default class SpecialDevice extends Vue {



  // 存放国控站点数据

  private govMonitors: any[] = []

  private govMonitors: any[] = [];



  // 联动省市区数据

  private areaData: any = JSON.parse(JSON.stringify(org))

  private form: any = null

  private areaData: any = JSON.parse(JSON.stringify(org));

  private form: any = null;

  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: "mac",

      dataIndex: "mac"

      dataIndex: "mac",

    },

    {

      title: "型号",

      dataIndex: "version.name"

      dataIndex: "version.name",

    },

    {

      title: "当前组织",

      dataIndex: "organization.name"

      dataIndex: "organization.name",

    },

    {

      title: "政府站点",

      dataIndex: "govMonitorPoint.name"

      dataIndex: "govMonitorPoint.name",

    },

    {

      title: "维护人",

      dataIndex: "operates"

      dataIndex: "operates",

    },

    {

      title: "设备类型",

      dataIndex: "specialType.name"

      dataIndex: "specialType.name",

    },

    {

      title: "操作",

      customRender: this.opRender

    }

      customRender: this.opRender,

    },

  ];

  // 定位级别数据

  private positionLevel(val: any) {

    var code = val[val.length-1]

    this.getGovPointByArea(code)

    var code = val[val.length - 1];

    this.getGovPointByArea(code);

  }



  // 根据定位级别获取政府站点

  private getGovPointByArea(code: any) {

    get('govMonitorPoint/govMonitorPoints', {

        regionCode: code

    get("govMonitorPoint/govMonitorPoints", {

      regionCode: code,

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

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

        this.govMonitors = res.data.data

        this.govMonitors = res.data.data;

      }

    })

    });

  }

  //存放分页数据

  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} 条数据`, //分页中显示总的数据

  };



  // 存放组织查询的id

  private orgId: any = null

  private orgId: any = null;



  // 双向绑定的add数据

  private addData: any = {

    name: '',

    mac: '',

    name: "",

    mac: "",

    organization: undefined,

    version: undefined,

    type: undefined,

    operators: [],

    guid: undefined

  }

    guid: undefined,

  };



  // 双向绑定的edit数据

  private editData: any = {

    name: '',

    mac: '',

    name: "",

    mac: "",

    organization: undefined,

    version: undefined,

    type: undefined,

    operators: [],

    guid: undefined

  }

    guid: undefined,

  };



  // 用于模糊查询

  private serchName: string = ''

  private serchName: string = "";



  // 组织数据

  private orgData: any = []

  private orgData: any = [];



  // 新增显示隐藏标识

  private visibleCreateModal: boolean = false

  private visibleCreateModal: boolean = false;



  // 历史设备隐藏显示标识

  private historyFlag: boolean = false



  private historyFlag: boolean = false;



  // 存放初始数据

  private dataSource: any[] = []

  private dataSource: any[] = [];



  // 用于存放字典数据

  private dictDeviceType: any = {}

  private dictDeviceType: any = {};



  //维护人

  private operators: any[] = [];



  // 型号

  private versions: any[] =[]

  private versions: any[] = [];



  //规则指定

  private rules: any = {

    name: [

      {required: true, message: '名称不能为空', trigger: ['change', 'blur']},

      { required: true, message: "名称不能为空", trigger: ["change", "blur"] },

    ],

    mac: [

      {required: true, message: 'mac不能为空', trigger: ['change', 'blur']},

      { required: true, message: "mac不能为空", trigger: ["change", "blur"] },

    ],

    organization: [

        {required: true, message: '监控站点不能为空', trigger: ['change', 'blur']},

      ],

      {

        required: true,

        message: "监控站点不能为空",

        trigger: ["change", "blur"],

      },

    ],

    version: [

        {required: true, message: '设备型号不能为空', trigger: ['change', 'blur']},

      ],

      {

        required: true,

        message: "设备型号不能为空",

        trigger: ["change", "blur"],

      },

    ],

    type: [

      {required: true, message: '设备型号不能为空', trigger: ['change', 'blur']},

    ]

  }

      {

        required: true,

        message: "设备型号不能为空",

        trigger: ["change", "blur"],

      },

    ],

  };



  // 监听分页数据下标变化

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

    this.pagination.current = pagination.current

    this.getCurrentOrgData()

    this.pagination.current = pagination.current;

    this.pagination.pageSize = pagination.pageSize;

    this.pagination.total = pagination.total;

    this.getCurrentOrgData();

  }



  //下拉组织数据

  private handleChange(selectedItems:any) {

  private handleChange(selectedItems: any) {

    if (selectedItems === undefined) {

      this.orgId = null

    }else {

      this.orgId = null;

    } else {

      this.orgId = selectedItems;

    }

    this.getCurrentOrgData()

    this.getCurrentOrgData();

  }



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

    return (

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

      option.componentOptions.children[0].text

        .toLowerCase()

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

    );

  }



  @Watch('serchName',{

    deep: true

})

  @Watch("serchName", {

    deep: true,

  })

  private watchSerchName(newVal: string, oldVal: string) {

    this.pagination.current = 1

    this.getCurrentOrgData()

    this.pagination.current = 1;

    this.getCurrentOrgData();

  }



  // 初始进入页面

  private created() {

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

    // this.getAllOrg()

    this.getCurrentOrgData()

    this.getDropDownData()

    this.getCurrentOrgData();

    this.getDropDownData();

  }





  //新建 ，调取初始单位，转换单位

  private getDropDownData(){

  private getDropDownData() {

    //初始加载特殊设备类型

    get("dict/data/query?type=specialDeviceType ", {})

        .then(res => {

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

            this.dictDeviceType = res.data.data

          }

        })

        .catch(err => {

          console.log(err);

        });

      .then((res) => {

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

          this.dictDeviceType = res.data.data;

        }

      })

      .catch((err) => {

        console.log(err);

      });

    //初始加载型号

    get("device/versions", {})

        .then(res => {

          this.versions = res.data.data.reverse();

        })

        .catch(err => {

          console.log(err);

        });

      .then((res) => {

        this.versions = res.data.data.reverse();

      })

      .catch((err) => {

        console.log(err);

      });

    //初始加载维护人

    get("device/operators", {})

        .then(res => {

          this.operators = res.data.data;

        })

        .catch(err => {

          console.log(err);

        });

      .then((res) => {

        this.operators = res.data.data;

      })

      .catch((err) => {

        console.log(err);

      });

    // 初始加载所有组织

    get("organization/queryNames", {}).then(res => {

      this.orgData = res.data.data.organizationVOs.reverse()

    })

    get("organization/queryNames", {}).then((res) => {

      this.orgData = res.data.data.organizationVOs.reverse();

    });

  }



  // 新增显示

  private handleModalVisible(flag: any) {

    this.getGovPointByArea('')

    this.visibleCreateModal = flag

    this.getGovPointByArea("");

    this.visibleCreateModal = flag;

  }





  // 历史数据窗口显示

  private handleModalHistoryVisible(flag: boolean) {

    this.historyFlag = flag

    this.historyFlag = flag;

  }



  // 获取所有显示数据

  private getCurrentOrgData() {

    get('specialDevice/getSpecialDeviceByCondition',{

        current: this.pagination.current,

        size:this.pagination.pageSize,

        organization_id: this.orgId,

        keyword: this.serchName

    get("specialDevice/getSpecialDeviceByCondition", {

      current: this.pagination.current,

      size: this.pagination.pageSize,

      organization_id: this.orgId,

      keyword: this.serchName,

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

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

        const specialDevices = res.data.data.specialDevices

        const specialDevices = res.data.data.specialDevices;

        // 处理维护人数组，以字符串方式显示

        specialDevices.forEach((item: any) => {

          let operates = ''

          let operates = "";

          if (item.operates) {

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

              operates += item.operates[i].name+'、'

              operates += item.operates[i].name + "、";

            }

          }

          if  (operates.length > 0) {

          if (operates.length > 0) {

            operates = operates.substr(0, operates.length - 1);

          }

          item.operates = operates

        })

          item.operates = operates;

        });

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

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



        this.dataSource = specialDevices

        this.dataSource = specialDevices;

      }

    })

    });

  }



  // 新增保存

  private handleCreateModalOk() {

    this.$refs.addRulesForm.validate((valid: any) => {

      if (valid) {

        post('specialDevice/insert',

            {

        post("specialDevice/insert", {

          name: this.addData.name,

          mac: this.addData.mac,

          organizationId: this.addData.organization,

          deviceVersionId: this.addData.version,

          specialType: this.addData.type,

          operateIds: this.addData.operators.length === 0 ? null : JSON.stringify(this.addData.operators).substr(1,JSON.stringify(this.addData.operators).length-2),

              guid: this.addData.guid

          operateIds:

            this.addData.operators.length === 0

              ? null

              : JSON.stringify(this.addData.operators).substr(

                  1,

                  JSON.stringify(this.addData.operators).length - 2

                ),

          guid: this.addData.guid,

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

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

            this.pagination.current = 1

            this.getCurrentOrgData()

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

            this.visibleCreateModal = false

            this.pagination.current = 1;

            this.getCurrentOrgData();

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

            this.visibleCreateModal = false;

            this.addData = {

              name: '',

              mac: '',

              name: "",

              mac: "",

              organization: undefined,

              version: undefined,

              type: undefined,

              operators: []

            }

              operators: [],

            };

          } else {

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

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

          }

        })

        });



        this.visibleCreateModal = false

        this.visibleCreateModal = false;

        // 双向绑定的add数据

      this.addData = {

          name: '',

          mac: '',

        this.addData = {

          name: "",

          mac: "",

          organization: undefined,

          version: undefined,

          type: undefined,

          operators: []

        }

      }else {

          operators: [],

        };

      } else {

        return;

      }

    })

    });

  }



  // 新增取消

  private handleCreateModalCancel() {

      this.visibleCreateModal = false

  this.addData = {

      name: '',

      mac: '',

    this.visibleCreateModal = false;

    this.addData = {

      name: "",

      mac: "",

      organization: undefined,

      version: undefined,

      type: undefined,

      operators: []

    }

      operators: [],

    };

  }



  // 编辑设备

  private editFlag: boolean = false

  private editRecord: any = {}

  private editFlag: boolean = false;

  private editRecord: any = {};

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

    this.getGovPointByArea('')

    this.editRecord = record

    this.editData.name = record.name

    this.editData.mac = record.mac

    this.editData.organization = record.organizationId

    this.editData.type = record.specialType.dataKey

    this.editData.version = record.deviceVersionId

    if (record.operates !== '') {

      const operateIds = record.operateIds.split(',')

      const ops = []

    this.getGovPointByArea("");

    this.editRecord = record;

    this.editData.name = record.name;

    this.editData.mac = record.mac;

    this.editData.organization = record.organizationId;

    this.editData.type = record.specialType.dataKey;

    this.editData.version = record.deviceVersionId;

    if (record.operates !== "") {

      const operateIds = record.operateIds.split(",");

      const ops = [];

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

        ops.push(Number(operateIds[i]))

        ops.push(Number(operateIds[i]));

      }

      this.editData.operators = ops

      this.editData.operators = ops;

    } else {

      this.editData.operators = []

      this.editData.operators = [];

    }

    this.editData.guid = record.govMonitorPoint.guid

    this.editFlag = flag

    this.editData.guid = record.govMonitorPoint.guid;

    this.editFlag = flag;

  }

  // 编辑确认

  private handleEditModalOk() {

    this.$refs.editRulesForm.validate((valid: any) => {

      if (valid) {

        let name = this.editData.name === this.editRecord.name ? null : this.editData.name

        let mac = this.editData.mac === this.editRecord.mac ? null : this.editData.mac

        let organizationId = this.editData.organization === this.editRecord.organizationId ? null : this.editData.organization

        let deviceVersionId = this.editData.version === this.editRecord.deviceVersionId ? null : this.editData.version

        let specialType = this.editData.type === this.editRecord.specialType.dataKey ? null : this.editData.type

        let operateIds = null

        let name =

          this.editData.name === this.editRecord.name

            ? null

            : this.editData.name;

        let mac =

          this.editData.mac === this.editRecord.mac ? null : this.editData.mac;

        let organizationId =

          this.editData.organization === this.editRecord.organizationId

            ? null

            : this.editData.organization;

        let deviceVersionId =

          this.editData.version === this.editRecord.deviceVersionId

            ? null

            : this.editData.version;

        let specialType =

          this.editData.type === this.editRecord.specialType.dataKey

            ? null

            : this.editData.type;

        let operateIds = null;

        if (this.editRecord.operateIds || this.editData.operators.length > 0) {

          operateIds = JSON.stringify(this.editData.operators).substr(1,JSON.stringify(this.editData.operators).length - 2) === this.editRecord.operateIds

                        ? null : JSON.stringify(this.editData.operators).substr(1,JSON.stringify(this.editData.operators).length - 2)

          operateIds =

            JSON.stringify(this.editData.operators).substr(

              1,

              JSON.stringify(this.editData.operators).length - 2

            ) === this.editRecord.operateIds

              ? null

              : JSON.stringify(this.editData.operators).substr(

                  1,

                  JSON.stringify(this.editData.operators).length - 2

                );

        }

        let guid = this.editData.guid === this.editRecord.govMonitorPoint.guid ? null : this.editData.guid

        if (!(name || mac || organizationId || deviceVersionId || specialType || (operateIds === '' || operateIds) || guid)) {

          this.$message.warning('未修改！')

        }else {

          post('specialDevice/update',{

        let guid =

          this.editData.guid === this.editRecord.govMonitorPoint.guid

            ? null

            : this.editData.guid;

        if (

          !(

            name ||

            mac ||

            organizationId ||

            deviceVersionId ||

            specialType ||

            operateIds === "" ||

            operateIds ||

            guid

          )

        ) {

          this.$message.warning("未修改！");

        } else {

          post("specialDevice/update", {

            id: this.editRecord.id,

            name,

            mac,

@@ -747,93 +871,87 @@
            deviceVersionId,

            specialType,

            operateIds,

            guid

            guid,

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

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

              this.getCurrentOrgData()

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

              this.getCurrentOrgData();

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

            } else {

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

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

            }

          })

          this.editFlag = false

          });

          this.editFlag = false;

        }

      }else {

        return

      } else {

        return;

      }

    })

    });

  }



  // 编辑取消

  private handleEditModalCancel() {

    this.editFlag = false

    this.editFlag = false;

  }



  // 删除设备

  private deleteDevice(record: any) {

      post('specialDevice/delete',{

        id: record.id

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

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

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

          this.pagination.current = 1

          this.getCurrentOrgData()

        } else {

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

        }

      })

    post("specialDevice/delete", {

      id: record.id,

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

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

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

        this.pagination.current = 1;

        this.getCurrentOrgData();

      } else {

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

      }

    });

  }



  // 配置校准值

  private visibleFlag: boolean = false

  private caliRecord: any = null

  private visibleFlag: boolean = false;

  private caliRecord: any = null;

  private showCalibration(record: any) {

    this.visibleFlag = true

    this.caliRecord = record

    this.visibleFlag = true;

    this.caliRecord = record;

  }

  // 隐藏弹出框

  private turnFlag(flag: boolean) {

    this.visibleFlag = false

    this.visibleFlag = false;

  }

  // 隐藏弹出框

  private turnHFlag(flag: boolean) {

    this.historyFlag = flag

    this.historyFlag = flag;

  }





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

    return (

        <div>

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

            {" "}

            编辑{" "}

      <div>

        <a onClick={() => this.handleEditModalVisible(true, record)}> 编辑 </a>

        <a-divider type="vertical" />

        <a-popconfirm

          title="确认删除吗？"

          ok-text="确定"

          cancel-text="取消"

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

        >

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

        </a-popconfirm>

        <a-divider type="vertical" />



        <a-dropdown>

          <a class="ant-dropdown-link">

            更多 <a-icon type="down" />

          </a>

          <a-divider type="vertical"/>

          <a-popconfirm

              title="确认删除吗？"

              ok-text="确定"

              cancel-text="取消"

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

          >

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

          </a-popconfirm>

          <a-divider type="vertical"/>



          <a-dropdown>

            <a class="ant-dropdown-link">

              更多 <a-icon type="down"/></a>

            <a-menu slot="overlay">

              <a-menu-item>

                <a onClick={() =>this.showCalibration(record) }>配置校准值</a>

              </a-menu-item>

            </a-menu>

          </a-dropdown>

        </div>

    )

        ;

          <a-menu slot="overlay">

            <a-menu-item>

              <a onClick={() => this.showCalibration(record)}>配置校准值</a>

            </a-menu-item>

          </a-menu>

        </a-dropdown>

      </div>

    );

  }





}

</script>



@@ -866,6 +984,4 @@
    min-height: 0;

  }

}





</style>