Compare commits
2 Commits
master
...
origin/fea
| Author | SHA1 | Date |
|---|---|---|
Jackwang
|
d8201c229e | 4 years ago |
|
Jackwang
|
5ce54819fd | 4 years ago |
4 changed files with 718 additions and 0 deletions
@ -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> |
||||
@ -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>  |
||||
|
<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> |
||||
@ -0,0 +1,276 @@ |
|||||
|
<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="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>--> |
||||
|
<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="address" label-width="120px"> |
||||
|
<el-input v-model="dataForm.address" |
||||
|
:disabled="dataForm.address === ''" |
||||
|
type="text" |
||||
|
clearable |
||||
|
style="width:400px"> |
||||
|
</el-input>  |
||||
|
<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="纬度" 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> |
||||
|
</template> |
||||
|
</el-dialog> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import debounce from 'lodash/debounce' |
||||
|
import MapSelect from './map-select' |
||||
|
export default { |
||||
|
data () { |
||||
|
return { |
||||
|
visible: false, |
||||
|
dataForm: { |
||||
|
id: '', |
||||
|
equipmentAlias: '', |
||||
|
deviceCode: '', |
||||
|
deviceName: '', |
||||
|
keyFalg: '', |
||||
|
clockRadius: 200, |
||||
|
address: '', |
||||
|
longitude: '', |
||||
|
latitude: '', |
||||
|
state: '', |
||||
|
deptId: '', |
||||
|
deptName: '', |
||||
|
allDeptIds: '', |
||||
|
allDeptNames: '', |
||||
|
parentDeptIds: '', |
||||
|
parentDeptNames: '', |
||||
|
delFlag: '', |
||||
|
revision: '', |
||||
|
createdBy: '', |
||||
|
createdTime: '', |
||||
|
updatedBy: '', |
||||
|
updatedTime: '', |
||||
|
allDeptIdsShow:[] |
||||
|
}, |
||||
|
mapSelectVisible: false, |
||||
|
options: [], |
||||
|
keyFalgList:[ |
||||
|
{dictValue: '0', dictName: '否'}, |
||||
|
{dictValue: '1', dictName: '是'} |
||||
|
] |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
dataRule () { |
||||
|
return { |
||||
|
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' } |
||||
|
// ], |
||||
|
keyFalg: [ |
||||
|
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } |
||||
|
], |
||||
|
address: [ |
||||
|
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } |
||||
|
], |
||||
|
longitude: [ |
||||
|
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } |
||||
|
], |
||||
|
latitude: [ |
||||
|
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } |
||||
|
], |
||||
|
state: [ |
||||
|
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } |
||||
|
], |
||||
|
deptId: [ |
||||
|
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } |
||||
|
], |
||||
|
deptName: [ |
||||
|
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } |
||||
|
], |
||||
|
allDeptIds: [ |
||||
|
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } |
||||
|
], |
||||
|
allDeptNames: [ |
||||
|
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } |
||||
|
], |
||||
|
parentDeptIds: [ |
||||
|
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } |
||||
|
], |
||||
|
parentDeptNames: [ |
||||
|
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } |
||||
|
], |
||||
|
delFlag: [ |
||||
|
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } |
||||
|
], |
||||
|
revision: [ |
||||
|
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } |
||||
|
], |
||||
|
createdBy: [ |
||||
|
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } |
||||
|
], |
||||
|
createdTime: [ |
||||
|
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } |
||||
|
], |
||||
|
updatedBy: [ |
||||
|
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } |
||||
|
], |
||||
|
updatedTime: [ |
||||
|
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } |
||||
|
] |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
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() |
||||
|
if (this.dataForm.id) { |
||||
|
this.getInfo() |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
// 获取信息 |
||||
|
getInfo () { |
||||
|
this.$http.get(`/custom/monitoring/${this.dataForm.id}`).then(({ data: res }) => { |
||||
|
if (res.code !== 0) { |
||||
|
return this.$message.error(res.msg) |
||||
|
} |
||||
|
this.dataForm = { |
||||
|
...this.dataForm, |
||||
|
...res.data |
||||
|
} |
||||
|
}).catch(() => {}) |
||||
|
}, |
||||
|
// 表单提交 |
||||
|
dataFormSubmitHandle: debounce(function () { |
||||
|
this.$refs['dataForm'].validate((valid) => { |
||||
|
if (!valid) { |
||||
|
return false |
||||
|
} |
||||
|
this.$http[!this.dataForm.id ? 'post' : 'put']('/custom/monitoring/', this.dataForm).then(({ data: res }) => { |
||||
|
if (res.code !== 0) { |
||||
|
return this.$message.error(res.msg) |
||||
|
} |
||||
|
this.$message({ |
||||
|
message: this.$t('prompt.success'), |
||||
|
type: 'success', |
||||
|
duration: 500, |
||||
|
onClose: () => { |
||||
|
this.visible = false |
||||
|
this.$emit('refreshDataList') |
||||
|
} |
||||
|
}) |
||||
|
}).catch(() => {}) |
||||
|
}) |
||||
|
}, 1000, { 'leading': true, 'trailing': false }) |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
@ -0,0 +1,137 @@ |
|||||
|
<template> |
||||
|
<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 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 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 @click="getDataList()">{{ $t('query') }}</el-button> |
||||
|
</el-form-item> |
||||
|
<el-form-item> |
||||
|
<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="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="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="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 :label="$t('handle')" fixed="right" header-align="center" align="center" width="150"> |
||||
|
<template slot-scope="scope"> |
||||
|
<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> |
||||
|
<el-pagination |
||||
|
:current-page="page" |
||||
|
:page-sizes="[10, 20, 50, 100]" |
||||
|
:page-size="limit" |
||||
|
:total="total" |
||||
|
layout="total, sizes, prev, pager, next, jumper" |
||||
|
@size-change="pageSizeChangeHandle" |
||||
|
@current-change="pageCurrentChangeHandle"> |
||||
|
</el-pagination> |
||||
|
<!-- 弹窗, 新增 / 修改 --> |
||||
|
<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update> |
||||
|
</div> |
||||
|
</el-card> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import mixinViewModule from '@/mixins/view-module' |
||||
|
import AddOrUpdate from './monitoring-add-or-update' |
||||
|
export default { |
||||
|
mixins: [mixinViewModule], |
||||
|
data () { |
||||
|
return { |
||||
|
mixinViewModuleOptions: { |
||||
|
getDataListURL: '/custom/monitoring/page', |
||||
|
getDataListIsPage: true, |
||||
|
deleteURL: '/custom/monitoring', |
||||
|
deleteIsBatch: true |
||||
|
}, |
||||
|
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> |
||||
Loading…
Reference in new issue