From d8201c229e426ce4655c31067ea8047ada68e4aa Mon Sep 17 00:00:00 2001
From: Jackwang <wt373747285@163.com>
Date: Thu, 9 Sep 2021 14:08:58 +0800
Subject: [PATCH] =?UTF-8?q?=E7=9B=91=E6=8E=A7=E8=AE=BE=E5=A4=87=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/modules/custom/address-check.vue    |  52 ++++
 src/views/modules/custom/map-select.vue       | 253 ++++++++++++++++++
 .../custom/monitoring-add-or-update.vue       | 189 ++++++++-----
 src/views/modules/custom/monitoring.vue       | 108 ++++++--
 4 files changed, 510 insertions(+), 92 deletions(-)
 create mode 100644 src/views/modules/custom/address-check.vue
 create mode 100644 src/views/modules/custom/map-select.vue

diff --git a/src/views/modules/custom/address-check.vue b/src/views/modules/custom/address-check.vue
new file mode 100644
index 0000000..15f31d2
--- /dev/null
+++ b/src/views/modules/custom/address-check.vue
@@ -0,0 +1,52 @@
+<template>
+  <el-dialog
+    :visible.sync="visible"
+    title="地址确认"
+    :append-to-body="true"
+    :modal-append-to-body="false"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+  >
+    <el-form :model="dataForm" :label-width="$i18n.locale === 'en-US' ? '180px' : '140px'">
+      <el-form-item label="地址:">
+        <div>{{dataForm.address}}</div>
+      </el-form-item>
+      <el-form-item label="经度:">
+        <div>{{dataForm.longitude}}</div>
+      </el-form-item>
+      <el-form-item label="纬度:">
+        <div>{{dataForm.latitude}}</div>
+      </el-form-item>
+    </el-form>
+    <template slot="footer">
+      <el-button @click="checkOk()" type="primary">{{$t("confirm")}}</el-button>
+    </template>
+  </el-dialog>
+</template>
+<script>
+export default {
+  data () {
+    return {
+      visible: false,
+      dataForm: {
+        address: '',
+        longitude: 0,//经度
+        latitude: 0,//纬度
+        city: ''
+      }
+    }
+  },
+  methods: {
+    init (dataForm) {
+      this.visible = true
+      this.$nextTick(() => {
+        this.dataForm = dataForm
+      })
+    },
+    checkOk () {
+      this.$emit('checkOk', true)
+      this.visible = false
+    }
+  }
+}
+</script>
diff --git a/src/views/modules/custom/map-select.vue b/src/views/modules/custom/map-select.vue
new file mode 100644
index 0000000..b838b37
--- /dev/null
+++ b/src/views/modules/custom/map-select.vue
@@ -0,0 +1,253 @@
+
+<template>
+  <el-dialog :visible.sync="visible" :close-on-click-modal="false" :close-on-press-escape="false" append-to-body>
+    <el-form
+      :inline="true"
+      :model="dataForm"
+      :label-width="$i18n.locale === 'en-US' ? '120px' : '120px'"
+    >
+      <el-row>
+        <el-form-item label="活动地点：" prop="address">
+          <el-input v-model="dataForm.address" type="text" clearable style="width:400px"></el-input>&emsp;
+          <el-button type="primary" @click="searchKeyword()">搜索</el-button>
+        </el-form-item>
+      </el-row>
+      <el-row>
+        <el-form-item label=" " prop="map">
+          <div>
+            <div id="container" style="width:500px;height:400px;"></div>
+          </div>
+        </el-form-item>
+      </el-row>
+    </el-form>
+    <address-check v-if="addressCheckVisible" ref="addressCheck" v-on:checkOk="checkOk"></address-check>
+  </el-dialog>
+</template>
+<script>
+import jsonp from 'jsonp'
+import AddressCheck from './address-check'
+var searchService
+export default {
+  name: 'maps',
+  data () {
+    return {
+      dataForm: {
+        address: '',
+        longitude: 0, // 经度
+        latitude: 0, // 纬度
+        city: '',
+        type: 1,
+        radius: 200
+      },
+      visible: false,
+      addressCheckVisible: false
+    }
+  },
+  methods: {
+    init (type, radius) {
+      this.visible = true
+      this.dataForm.address = ''
+      this.dataForm.type = type
+      this.dataForm.radius = radius
+      this.getMyLocation()
+    },
+    getAddress (lat, lng) {
+      this.dataForm.longitude = lng
+      this.dataForm.latitude = lat
+      var url3 =
+        'https://apis.map.qq.com/ws/geocoder/v1/?location=' +
+        lat +
+        ',' +
+        lng +
+        '&key=MQFBZ-LTWW6-R7XSK-MFXUQ-DVSIE-BGB4M&output=jsonp'
+      jsonp(url3, null, (err, data) => {
+        if (err) {
+          console.log(err)
+        }
+        console.log(data)
+        this.dataForm.address = data.result.address
+      })
+    },
+    getMyLocation () {
+      var geolocation = new qq.maps.Geolocation(
+        'MQFBZ-LTWW6-R7XSK-MFXUQ-DVSIE-BGB4M',
+        'e家党群-管理端'
+      )
+      geolocation.getIpLocation(this.showPosition, this.showErr)
+    },
+    showPosition (position) {
+      console.log(position)
+      this.dataForm.latitude = position.lat
+      this.dataForm.longitude = position.lng
+      this.dataForm.city = position.city
+      this.getAddress(position.lat,position.lng)
+      this.setMap()
+    },
+    showErr () {
+      console.log('定位失败')
+      this.getMyLocation() // 定位失败再请求定位，测试使用
+    },
+    setMap () {
+      const that = this
+      var markerList = []
+      var radiusList = []
+      // 步骤：定义map变量 调用 qq.maps.Map() 构造函数   获取地图显示容器
+      // 设置地图中心点
+      var myLatlng = new qq.maps.LatLng(
+        this.dataForm.latitude,
+        this.dataForm.longitude
+      )
+      // 定义工厂模式函数
+      var zoom = this.capacity()
+      var myOptions = {
+        zoom: zoom, // 设置地图缩放级别
+        center: myLatlng, // 设置中心点样式
+        mapTypeId: qq.maps.MapTypeId.ROADMAP // 设置地图样式详情参见MapType
+      }
+      // 获取dom元素添加地图信息
+      var map = new qq.maps.Map(
+        document.getElementById('container'),
+        myOptions
+      )
+      // 设置圆形
+      var radius = new qq.maps.Circle({
+        center: new qq.maps.LatLng(
+          this.dataForm.latitude,
+          this.dataForm.longitude
+        ),
+        radius: this.dataForm.radius,
+        map: map
+      })
+      radiusList.push(radius)
+      var marker = new qq.maps.Marker({
+        position: myLatlng,
+        map: map
+      })
+      qq.maps.event.addListener(marker,'click',function (event) {
+        that.addressCheckHandle()
+      })
+      markerList.push(marker)
+      // 添加监听事件   获取鼠标单击事件
+      qq.maps.event.addListener(map, 'click', function (event) {
+        that.cleanMarkRadius(markerList, radiusList)
+        that.getAddress(event.latLng.lat, event.latLng.lng)
+        var myLatlng = new qq.maps.LatLng(event.latLng.lat, event.latLng.lng)
+        map.setCenter(myLatlng)
+        var marker = new qq.maps.Marker({
+          position: event.latLng,
+          map: map
+        })
+        // 设置圆形
+        var radius = new qq.maps.Circle({
+          center: new qq.maps.LatLng(event.latLng.lat, event.latLng.lng),
+          radius: that.dataForm.radius,
+          map: map
+        })
+        radiusList.push(radius)
+        markerList.push(marker)
+        qq.maps.event.addListener(map, 'click', function (event) {
+          that.cleanMarkRadius(markerList, radiusList)
+        })
+        qq.maps.event.addListener(marker, 'click', function (event) {
+          that.addressCheckHandle()
+        })
+      })
+      // 调用地址解析类
+      searchService = new qq.maps.SearchService({
+        complete: function (result) {
+          var pois = result.detail.pois
+          if (pois == null || pois.length <= 0) {
+            alert('未找到地址!')
+            that.getAddress(that.dataForm.latitude, that.dataForm.longitude)
+            return
+          }
+          map.setCenter(pois[0].latLng)
+          that.getAddress(pois[0].latLng.lat, pois[0].latLng.lng)
+          var marker = new qq.maps.Marker({
+            map: map,
+            position: pois[0].latLng
+          })
+          // 设置圆形
+          var radius = new qq.maps.Circle({
+            center: new qq.maps.LatLng(pois[0].latLng.lat, pois[0].latLng.lng),
+            radius: that.dataForm.radius,
+            map: map
+          })
+          radiusList.push(radius)
+          markerList.push(marker)
+          that.cleanMarkRadius(markerList, radiusList)
+          qq.maps.event.addListener(marker, 'click', function (event) {
+            that.addressCheckHandle()
+          })
+        }
+      })
+    },
+    searchKeyword () {
+      searchService.setLocation(this.dataForm.city)
+      searchService.search(this.dataForm.address)
+    },
+    addressCheckHandle () {
+      if (this.dataForm.address === '' || !(this.dataForm.latitude > 0)) {
+        alert('请选择地址!')
+        return
+      }
+      this.addressCheckVisible = true
+      this.$nextTick(() => {
+        this.$refs.addressCheck.init(this.dataForm)
+      })
+    },
+    checkOk (checkOk) {
+      if (checkOk) {
+        this.$emit('position', this.dataForm)
+        this.visible = false
+      }
+    },
+    cleanMarkRadius (markerList, radiusList) {
+      if (markerList) {
+        if (markerList.length > 1) {
+          for (var i4 = 0; i4 < markerList.length - 1; i4++) {
+            markerList[i4].setMap(null)
+          }
+        } else {
+          for (var i3 = 0; i3 < markerList.length; i3++) {
+            markerList[i3].setMap(null)
+          }
+        }
+      }
+      if (radiusList) {
+        if (radiusList.length > 1) {
+          for (var i2 = 0; i2 < radiusList.length - 1; i2++) {
+            radiusList[i2].setMap(null)
+          }
+        } else {
+          for (var i1 = 0; i1 < markerList.length; i1++) {
+            radiusList[i1].setMap(null)
+          }
+        }
+      }
+    },
+    capacity () {
+      if (this.dataForm.radius > 0 && this.dataForm.radius <= 25) {
+        return 18
+      } else if (this.dataForm.radius > 25 && this.dataForm.radius <= 50) {
+        return 17
+      } else if (this.dataForm.radius > 50 && this.dataForm.radius <= 100) {
+        return 16
+      } else if (this.dataForm.radius > 100 && this.dataForm.radius <= 200) {
+        return 15
+      } else if (this.dataForm.radius > 200 && this.dataForm.radius <= 500) {
+        return 14
+      } else if (this.dataForm.radius > 500 && this.dataForm.radius <= 1000) {
+        return 13
+      } else if (this.dataForm.radius > 1000 && this.dataForm.radius <= 2000) {
+        return 12
+      } else if (this.dataForm.radius > 2000 && this.dataForm.radius <= 5000) {
+        return 11
+      }
+    }
+  },
+  components: {
+    AddressCheck
+  }
+}
+</script>
diff --git a/src/views/modules/custom/monitoring-add-or-update.vue b/src/views/modules/custom/monitoring-add-or-update.vue
index 8dd464f..654999c 100644
--- a/src/views/modules/custom/monitoring-add-or-update.vue
+++ b/src/views/modules/custom/monitoring-add-or-update.vue
@@ -1,67 +1,89 @@
 <template>
   <el-dialog :visible.sync="visible" :title="!dataForm.id ? $t('add') : $t('update')" :close-on-click-modal="false" :close-on-press-escape="false">
     <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" :label-width="$i18n.locale === 'en-US' ? '120px' : '80px'">
-          <el-form-item label="设备别名" prop="equipmentAlias">
-          <el-input v-model="dataForm.equipmentAlias" placeholder="设备别名"></el-input>
+        <el-form-item label="所属组织"
+                      prop="allDeptIdsShow" label-width="120px">
+            <el-cascader v-model="dataForm.allDeptIdsShow"
+                         :options="options"
+                         :props="{ checkStrictly: true, multiple: false, emitPath: true }"
+                         clearable
+                         @change="changeHandle"
+                         collapse-tags></el-cascader>
+        </el-form-item>
+<!--        <el-form-item label="设备名称" prop="deviceName" label-width="120px">-->
+<!--            <el-input v-model="dataForm.deviceName" placeholder="第三方设备名称"></el-input>-->
+<!--        </el-form-item>-->
+          <el-form-item label="设备别名" prop="equipmentAlias" label-width="120px">
+          <el-input v-model="dataForm.equipmentAlias" placeholder="设备别名" style="width:400px"></el-input>
       </el-form-item>
-          <el-form-item label="第三方设备编码" prop="deviceCode">
-          <el-input v-model="dataForm.deviceCode" placeholder="第三方设备编码"></el-input>
+<!--          <el-form-item label="设备编码" prop="deviceCode">-->
+<!--          <el-input v-model="dataForm.deviceCode" placeholder="第三方设备编码"></el-input>-->
+<!--      </el-form-item>-->
+          <el-form-item label="重点监控标识" prop="keyFalg" label-width="120px">
+<!--          <el-input v-model="dataForm.keyFalg" placeholder="重点监控设备标识：0否1是"></el-input>-->
+              <el-select v-model="dataForm.keyFalg" clearable placeholder="重点监控设备标识">
+                  <el-option v-for="item in keyFalgList" :key="item.dictValue" :label="item.dictName" :value="item.dictValue">
+                  </el-option>
+              </el-select>
       </el-form-item>
-          <el-form-item label="第三方设备名称" prop="deviceName">
-          <el-input v-model="dataForm.deviceName" placeholder="第三方设备名称"></el-input>
+        <el-form-item label="位置"
+                      prop="address" label-width="120px">
+            <el-input v-model="dataForm.address"
+                      :disabled="dataForm.address === ''"
+                      type="text"
+                      clearable
+                      style="width:400px">
+            </el-input>&emsp;
+            <el-button type="primary"
+                       @click="mapSelectHandle(1)">地图选择</el-button>
+        </el-form-item>
+          <el-form-item label="经度" prop="longitude" label-width="120px">
+          <el-input v-model="dataForm.longitude" style="width:400px" placeholder="经度" :disabled="true"></el-input>
       </el-form-item>
-          <el-form-item label="重点监控设备标识：0否1是" prop="keyFalg">
-          <el-input v-model="dataForm.keyFalg" placeholder="重点监控设备标识：0否1是"></el-input>
-      </el-form-item>
-          <el-form-item label="位置" prop="address">
-          <el-input v-model="dataForm.address" placeholder="位置"></el-input>
-      </el-form-item>
-          <el-form-item label="经度" prop="longitude">
-          <el-input v-model="dataForm.longitude" placeholder="经度"></el-input>
-      </el-form-item>
-          <el-form-item label="纬度" prop="latitude">
-          <el-input v-model="dataForm.latitude" placeholder="纬度"></el-input>
-      </el-form-item>
-          <el-form-item label="状态：0正常 1故障" prop="state">
-          <el-input v-model="dataForm.state" placeholder="状态：0正常 1故障"></el-input>
-      </el-form-item>
-          <el-form-item label="部门ID" prop="deptId">
-          <el-input v-model="dataForm.deptId" placeholder="部门ID"></el-input>
-      </el-form-item>
-          <el-form-item label="部门名称" prop="deptName">
-          <el-input v-model="dataForm.deptName" placeholder="部门名称"></el-input>
-      </el-form-item>
-          <el-form-item label="所有部门ID" prop="allDeptIds">
-          <el-input v-model="dataForm.allDeptIds" placeholder="所有部门ID"></el-input>
-      </el-form-item>
-          <el-form-item label="所有部门名称" prop="allDeptNames">
-          <el-input v-model="dataForm.allDeptNames" placeholder="所有部门名称"></el-input>
-      </el-form-item>
-          <el-form-item label="父所有部门" prop="parentDeptIds">
-          <el-input v-model="dataForm.parentDeptIds" placeholder="父所有部门"></el-input>
-      </el-form-item>
-          <el-form-item label="父所有部门" prop="parentDeptNames">
-          <el-input v-model="dataForm.parentDeptNames" placeholder="父所有部门"></el-input>
-      </el-form-item>
-          <el-form-item label="删除标识 0-否，1-是" prop="delFlag">
-          <el-input v-model="dataForm.delFlag" placeholder="删除标识 0-否，1-是"></el-input>
-      </el-form-item>
-          <el-form-item label="乐观锁" prop="revision">
-          <el-input v-model="dataForm.revision" placeholder="乐观锁"></el-input>
-      </el-form-item>
-          <el-form-item label="创建人" prop="createdBy">
-          <el-input v-model="dataForm.createdBy" placeholder="创建人"></el-input>
-      </el-form-item>
-          <el-form-item label="创建时间" prop="createdTime">
-          <el-input v-model="dataForm.createdTime" placeholder="创建时间"></el-input>
-      </el-form-item>
-          <el-form-item label="更新人" prop="updatedBy">
-          <el-input v-model="dataForm.updatedBy" placeholder="更新人"></el-input>
-      </el-form-item>
-          <el-form-item label="更新时间" prop="updatedTime">
-          <el-input v-model="dataForm.updatedTime" placeholder="更新时间"></el-input>
+          <el-form-item label="纬度" prop="latitude" label-width="120px">
+          <el-input v-model="dataForm.latitude" style="width:400px" placeholder="纬度" :disabled="true"></el-input>
       </el-form-item>
+<!--          <el-form-item label="状态：0正常 1故障" prop="state">-->
+<!--          <el-input v-model="dataForm.state" placeholder="状态：0正常 1故障"></el-input>-->
+<!--      </el-form-item>-->
+<!--          <el-form-item label="部门ID" prop="deptId">-->
+<!--          <el-input v-model="dataForm.deptId" placeholder="部门ID"></el-input>-->
+<!--      </el-form-item>-->
+<!--          <el-form-item label="所有部门ID" prop="allDeptIds">-->
+<!--          <el-input v-model="dataForm.allDeptIds" placeholder="所有部门ID"></el-input>-->
+<!--      </el-form-item>-->
+<!--          <el-form-item label="所有部门名称" prop="allDeptNames">-->
+<!--          <el-input v-model="dataForm.allDeptNames" placeholder="所有部门名称"></el-input>-->
+<!--      </el-form-item>-->
+<!--          <el-form-item label="父所有部门" prop="parentDeptIds">-->
+<!--          <el-input v-model="dataForm.parentDeptIds" placeholder="父所有部门"></el-input>-->
+<!--      </el-form-item>-->
+<!--          <el-form-item label="父所有部门" prop="parentDeptNames">-->
+<!--          <el-input v-model="dataForm.parentDeptNames" placeholder="父所有部门"></el-input>-->
+<!--      </el-form-item>-->
+<!--          <el-form-item label="删除标识 0-否，1-是" prop="delFlag">-->
+<!--          <el-input v-model="dataForm.delFlag" placeholder="删除标识 0-否，1-是"></el-input>-->
+<!--      </el-form-item>-->
+<!--          <el-form-item label="乐观锁" prop="revision">-->
+<!--          <el-input v-model="dataForm.revision" placeholder="乐观锁"></el-input>-->
+<!--      </el-form-item>-->
+<!--          <el-form-item label="创建人" prop="createdBy">-->
+<!--          <el-input v-model="dataForm.createdBy" placeholder="创建人"></el-input>-->
+<!--      </el-form-item>-->
+<!--          <el-form-item label="创建时间" prop="createdTime">-->
+<!--          <el-input v-model="dataForm.createdTime" placeholder="创建时间"></el-input>-->
+<!--      </el-form-item>-->
+<!--          <el-form-item label="更新人" prop="updatedBy">-->
+<!--          <el-input v-model="dataForm.updatedBy" placeholder="更新人"></el-input>-->
+<!--      </el-form-item>-->
+<!--          <el-form-item label="更新时间" prop="updatedTime">-->
+<!--          <el-input v-model="dataForm.updatedTime" placeholder="更新时间"></el-input>-->
+<!--      </el-form-item>-->
       </el-form>
+      <map-select v-if="mapSelectVisible"
+                  ref="mapSelect"
+                  v-on:position="position"></map-select>
+
     <template slot="footer">
       <el-button @click="visible = false">{{ $t('cancel') }}</el-button>
       <el-button type="primary" @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button>
@@ -71,6 +93,7 @@
 
 <script>
 import debounce from 'lodash/debounce'
+import MapSelect from './map-select'
 export default {
   data () {
     return {
@@ -81,6 +104,7 @@ export default {
         deviceCode: '',
         deviceName: '',
         keyFalg: '',
+        clockRadius: 200,
         address: '',
         longitude: '',
         latitude: '',
@@ -96,8 +120,15 @@ export default {
         createdBy: '',
         createdTime: '',
         updatedBy: '',
-        updatedTime: ''
-      }
+        updatedTime: '',
+        allDeptIdsShow:[]
+      },
+        mapSelectVisible: false,
+        options: [],
+        keyFalgList:[
+          {dictValue: '0', dictName: '否'},
+          {dictValue: '1', dictName: '是'}
+        ]
     }
   },
   computed: {
@@ -106,12 +137,12 @@ export default {
         equipmentAlias: [
           { required: true, message: this.$t('validate.required'), trigger: 'blur' }
         ],
-        deviceCode: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
-        ],
-        deviceName: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
-        ],
+        // deviceCode: [
+        //   { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        // ],
+        // deviceName: [
+        //   { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        // ],
         keyFalg: [
           { required: true, message: this.$t('validate.required'), trigger: 'blur' }
         ],
@@ -166,8 +197,38 @@ export default {
       }
     }
   },
+    created () {
+        this.$http
+            .get(`/sys/user/deptOptions/getAllByLoginUser`)
+            .then(({ data: res }) => {
+                if (res.code !== 0) {
+                    return this.$message.error(res.msg)
+                }
+                this.options = res.data.options
+            })
+            .catch(() => { })
+    },
+    components: {
+        MapSelect
+    },
   methods: {
+      changeHandle(value){
+          this.dataForm.deptId = this.dataForm.allDeptIdsShow[value.length-1]
+      },
+      position (position) {
+          this.dataForm.address = position.address
+          this.dataForm.latitude = position.latitude
+          this.dataForm.longitude = position.longitude
+      },
+      mapSelectHandle (type) {
+          this.mapSelectVisible = true
+
+          this.$nextTick(() => {
+              this.$refs.mapSelect.init(type, this.dataForm.clockRadius)
+          })
+      },
     init () {
+      this.dataForm.allDeptIdsShow=[]
       this.visible = true
       this.$nextTick(() => {
         this.$refs['dataForm'].resetFields()
diff --git a/src/views/modules/custom/monitoring.vue b/src/views/modules/custom/monitoring.vue
index 5bab21e..8f5ed70 100644
--- a/src/views/modules/custom/monitoring.vue
+++ b/src/views/modules/custom/monitoring.vue
@@ -2,46 +2,66 @@
   <el-card shadow="never" class="aui-card--fill">
     <div class="mod-custom__monitoring}">
       <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
-        <el-form-item>
-          <el-input v-model="dataForm.id" placeholder="id" clearable></el-input>
+        <el-form-item label="所属组织"
+                      prop="allDeptIdsShow" label-width="80px">
+          <el-cascader v-model="allDeptIdsShow"
+                       :options="options"
+                       :props="{ checkStrictly: true, multiple: false, emitPath: true }"
+                       clearable
+                       collapse-tags></el-cascader>
         </el-form-item>
-        <el-form-item>
-          <el-button @click="getDataList()">{{ $t('query') }}</el-button>
+        <el-form-item label="位置" prop="address">
+          <el-input v-model="dataForm.address"
+                    placeholder="位置"
+                    clearable></el-input>
+        </el-form-item>
+        <el-form-item label="状态" prop="state">
+          <el-select v-model="dataForm.state" clearable placeholder="状态">
+            <el-option v-for="item in stateList" :key="item.dictValue" :label="item.dictName" :value="item.dictValue">
+            </el-option>
+          </el-select>
         </el-form-item>
         <el-form-item>
-          <el-button v-if="$hasPermission('custom:monitoring:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
+          <el-button @click="getDataList()">{{ $t('query') }}</el-button>
         </el-form-item>
         <el-form-item>
-          <el-button v-if="$hasPermission('custom:monitoring:delete')" type="danger" @click="deleteHandle()">{{ $t('deleteBatch') }}</el-button>
+          <el-button type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
         </el-form-item>
+<!--        <el-form-item>-->
+<!--          <el-button v-if="$hasPermission('custom:monitoring:delete')" type="danger" @click="deleteHandle()">{{ $t('deleteBatch') }}</el-button>-->
+<!--        </el-form-item>-->
       </el-form>
       <el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle" style="width: 100%;">
-        <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
-        <el-table-column prop="id" label="id" header-align="center" align="center"></el-table-column>
+        <el-table-column type="index"
+                         width="50"
+                         label="序号" align="center"></el-table-column>
+<!--        <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>-->
+<!--        <el-table-column prop="id" label="id" header-align="center" align="center"></el-table-column>-->
+        <el-table-column prop="deviceName" label="设备原始名" header-align="center" align="center"></el-table-column>
         <el-table-column prop="equipmentAlias" label="设备别名" header-align="center" align="center"></el-table-column>
-        <el-table-column prop="deviceCode" label="第三方设备编码" header-align="center" align="center"></el-table-column>
-        <el-table-column prop="deviceName" label="第三方设备名称" header-align="center" align="center"></el-table-column>
-        <el-table-column prop="keyFalg" label="重点监控设备标识：0否1是" header-align="center" align="center"></el-table-column>
+<!--        <el-table-column prop="deviceCode" label="第三方设备编码" header-align="center" align="center"></el-table-column>-->
+<!--        <el-table-column prop="deviceName" label="第三方设备名称" header-align="center" align="center"></el-table-column>-->
+<!--        <el-table-column prop="keyFalg" label="重点监控设备标识：0否1是" header-align="center" align="center"></el-table-column>-->
         <el-table-column prop="address" label="位置" header-align="center" align="center"></el-table-column>
-        <el-table-column prop="longitude" label="经度" header-align="center" align="center"></el-table-column>
-        <el-table-column prop="latitude" label="纬度" header-align="center" align="center"></el-table-column>
-        <el-table-column prop="state" label="状态：0正常 1故障" header-align="center" align="center"></el-table-column>
-        <el-table-column prop="deptId" label="部门ID" header-align="center" align="center"></el-table-column>
-        <el-table-column prop="deptName" label="部门名称" header-align="center" align="center"></el-table-column>
-        <el-table-column prop="allDeptIds" label="所有部门ID" header-align="center" align="center"></el-table-column>
-        <el-table-column prop="allDeptNames" label="所有部门名称" header-align="center" align="center"></el-table-column>
-        <el-table-column prop="parentDeptIds" label="父所有部门" header-align="center" align="center"></el-table-column>
-        <el-table-column prop="parentDeptNames" label="父所有部门" header-align="center" align="center"></el-table-column>
-        <el-table-column prop="delFlag" label="删除标识 0-否，1-是" header-align="center" align="center"></el-table-column>
-        <el-table-column prop="revision" label="乐观锁" header-align="center" align="center"></el-table-column>
-        <el-table-column prop="createdBy" label="创建人" header-align="center" align="center"></el-table-column>
+<!--        <el-table-column prop="longitude" label="经度" header-align="center" align="center"></el-table-column>-->
+<!--        <el-table-column prop="latitude" label="纬度" header-align="center" align="center"></el-table-column>-->
+        <el-table-column prop="stateName" label="状态" header-align="center" align="center"></el-table-column>
+<!--        <el-table-column prop="deptId" label="部门ID" header-align="center" align="center"></el-table-column>-->
+        <el-table-column prop="deptName" label="所属组织" header-align="center" align="center"></el-table-column>
+<!--        <el-table-column prop="allDeptIds" label="所有部门ID" header-align="center" align="center"></el-table-column>-->
+<!--        <el-table-column prop="allDeptNames" label="所有部门名称" header-align="center" align="center"></el-table-column>-->
+<!--        <el-table-column prop="parentDeptIds" label="父所有部门" header-align="center" align="center"></el-table-column>-->
+<!--        <el-table-column prop="parentDeptNames" label="父所有部门" header-align="center" align="center"></el-table-column>-->
+<!--        <el-table-column prop="delFlag" label="删除标识 0-否，1-是" header-align="center" align="center"></el-table-column>-->
+<!--        <el-table-column prop="revision" label="乐观锁" header-align="center" align="center"></el-table-column>-->
+<!--        <el-table-column prop="createdBy" label="创建人" header-align="center" align="center"></el-table-column>-->
         <el-table-column prop="createdTime" label="创建时间" header-align="center" align="center"></el-table-column>
-        <el-table-column prop="updatedBy" label="更新人" header-align="center" align="center"></el-table-column>
-        <el-table-column prop="updatedTime" label="更新时间" header-align="center" align="center"></el-table-column>
+<!--        <el-table-column prop="updatedBy" label="更新人" header-align="center" align="center"></el-table-column>-->
+<!--        <el-table-column prop="updatedTime" label="更新时间" header-align="center" align="center"></el-table-column>-->
         <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
           <template slot-scope="scope">
-            <el-button v-if="$hasPermission('custom:monitoring:update')" type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">{{ $t('update') }}</el-button>
-            <el-button v-if="$hasPermission('custom:monitoring:delete')" type="text" size="small" @click="deleteHandle(scope.row.id)">{{ $t('delete') }}</el-button>
+            <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">{{ $t('update') }}</el-button>
+            <el-button type="text" size="small" @click="deleteHandle(scope.row.id)">{{ $t('delete') }}</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -75,11 +95,43 @@ export default {
       },
       dataForm: {
         id: ''
-      }
+      },
+      allDeptIdsShow:[],
+      stateList: [
+        {dictValue: '0', dictName: '正常'},
+        {dictValue: '1', dictName: '故障'},
+      ]
     }
   },
+  created () {
+    this.$http
+            .get(`/sys/user/deptOptions/getAllByLoginUser`)
+            .then(({ data: res }) => {
+              if (res.code !== 0) {
+                return this.$message.error(res.msg)
+              }
+              this.options = res.data.options
+            })
+            .catch(() => { })
+  },
   components: {
     AddOrUpdate
+  },
+  watch: {
+    allDeptIdsShow: function (val) {
+      if (val.length === 0) {
+        this.dataForm.deptId = ''
+      } else {
+        this.dataForm.deptId = this.allDeptIdsShow[val.length-1]
+      }
+    }
+  },
+  methods :{
+
+    // changeHandle(value){
+    //   this.dataForm.deptId = this.dataForm.allDeptIdsShow[value.length-1]
+    //   this.dataForm.allDeptIdsShow = ''
+    // },
   }
 }
 </script>