<template>
|
<div>
|
<h4 class="font-weight-bold py-3 mb-2">
|
<router-link to="/device">
|
<span class="text-muted font-weight-light">设备管理 /</span>
|
</router-link>
|
设备{{$route.query && $route.query.id?'编辑':'添加'}}
|
</h4>
|
<b-card no-body class="pt30 pl20 pr20 pb30">
|
<b-form @submit="saveDevice">
|
<h5>设备配置</h5>
|
<div class="row">
|
<div class="col">
|
<b-form-group
|
horizontal
|
label-class="text-sm-right"
|
:label-cols="4"
|
label="设备类型："
|
>
|
<el-select
|
@change="testUrl='';isTestState= false"
|
v-model="form.deviceType"
|
required
|
placeholder="请选择设备">
|
<el-option
|
v-for="item in deviceTypeDicts"
|
:key="item.value"
|
:label="item.lable"
|
:value="item.value">
|
</el-option>
|
</el-select>
|
<!-- <b-form-select v-model="form.deviceType" text-field="lable" required :options="deviceTypeDicts"/> -->
|
</b-form-group>
|
<b-form-group
|
horizontal
|
label-class="text-sm-right"
|
:label-cols="4"
|
label="设备应用于："
|
label-for="authorizationSystem"
|
>
|
<el-select
|
v-model="form.authorizationSystem"
|
required
|
multiple
|
collapse-tags
|
placeholder="请选择系统">
|
<el-option
|
v-for="item in sysDicts"
|
:key="item.value"
|
:label="item.lable"
|
:value="item.value">
|
</el-option>
|
</el-select>
|
<!-- <b-form-select v-model="form.authorizationSystem" text-field="lable" required :options="sysDicts"/> -->
|
</b-form-group>
|
<b-form-group
|
horizontal
|
required
|
label-class="text-sm-right"
|
:label-cols="4"
|
label="设备名称："
|
label-for="deviceName"
|
:invalid-feedback="requiredValid(form.deviceName)"
|
:valid-feedback="requiredValid(form.deviceName)"
|
:state="requiredState(form.deviceName)"
|
>
|
<b-form-input id="deviceName"
|
type="text"
|
v-model="form.deviceName"
|
:state="requiredState(form.deviceName)"
|
placeholder="输入设备名称">
|
</b-form-input>
|
</b-form-group>
|
<b-form-group
|
horizontal
|
label-class="text-sm-right"
|
required
|
:label-cols="4"
|
label="设备编号："
|
label-for="deviceSn"
|
:invalid-feedback="requiredValid(form.deviceSn)"
|
:valid-feedback="requiredValid(form.deviceSn)"
|
:state="requiredState(form.deviceSn)"
|
>
|
<b-form-input id="deviceSn"
|
type="text"
|
v-model="form.deviceSn"
|
:state="requiredState(form.deviceSn)"
|
placeholder="输入设备编号">
|
</b-form-input>
|
</b-form-group>
|
<b-form-group
|
horizontal
|
label-class="text-sm-right"
|
:label-cols="4"
|
label="设备位置描述："
|
label-for="description"
|
:invalid-feedback="requiredValid(form.description)"
|
:valid-feedback="requiredValid(form.description)"
|
:state="requiredState(form.description)"
|
>
|
<b-form-input id="description"
|
type="text"
|
v-model="form.description"
|
:state="requiredState(form.description)"
|
placeholder="输入设备位置描述">
|
</b-form-input>
|
</b-form-group>
|
</div>
|
<div class="col">
|
<b-form-group
|
horizontal
|
label-class="text-sm-right"
|
:label-cols="4"
|
label="设备品牌："
|
label-for="cameraType"
|
:invalid-feedback="requiredValid(form.cameraType)"
|
:valid-feedback="requiredValid(form.cameraType)"
|
:state="requiredState(form.cameraType)"
|
>
|
<b-form-input id="cameraType"
|
type="text"
|
v-model="form.cameraType"
|
:state="requiredState(form.cameraType)"
|
placeholder="输入摄像机品牌">
|
</b-form-input>
|
</b-form-group>
|
<b-form-group
|
horizontal
|
label-class="text-sm-right"
|
:label-cols="4"
|
label="设备供应商："
|
label-for="equipmentSupper"
|
>
|
<b-form-input id="equipmentSupper"
|
type="text"
|
v-model="unRequiredForm.equipmentSupper"
|
placeholder="输入设备供应商">
|
</b-form-input>
|
</b-form-group>
|
<b-form-group
|
horizontal
|
label-class="text-sm-right"
|
:label-cols="4"
|
label="系统集成商："
|
label-for="systemIntegrator"
|
>
|
<b-form-input id="systemIntegrator"
|
type="text"
|
v-model="unRequiredForm.systemIntegrator"
|
placeholder="输入系统集成商">
|
</b-form-input>
|
</b-form-group>
|
<b-form-group
|
horizontal
|
label-class="text-sm-right"
|
:label-cols="4"
|
label="维保单位："
|
label-for="maintenanceUnit"
|
>
|
<b-form-input id="maintenanceUnit"
|
type="text"
|
v-model="unRequiredForm.maintenanceUnit"
|
placeholder="输入维保单位">
|
</b-form-input>
|
</b-form-group>
|
</div>
|
</div>
|
<hr/>
|
<h5>服务器配置</h5>
|
<div class="row">
|
<div class="col-6">
|
<b-form-group
|
horizontal
|
label-class="text-sm-right"
|
:label-cols="4"
|
label="IP地址："
|
label-for="ip"
|
:invalid-feedback="IPValid(unRequiredForm.ip)"
|
:valid-feedback="IPValid(unRequiredForm.ip)"
|
:state="IPState(unRequiredForm.ip)"
|
>
|
<b-form-input id="ip"
|
type="text"
|
v-model="unRequiredForm.ip"
|
:state="IPState(unRequiredForm.ip)"
|
placeholder="输入IP地址">
|
</b-form-input>
|
</b-form-group>
|
<b-form-group
|
horizontal
|
label-class="text-sm-right"
|
:label-cols="4"
|
label="端口号："
|
label-for="port"
|
:invalid-feedback="portValid(unRequiredForm.port)"
|
:valid-feedback="portValid(unRequiredForm.port)"
|
:state="portState(unRequiredForm.port)"
|
>
|
<b-form-input id="port"
|
type="text"
|
v-model="unRequiredForm.port"
|
:state="portState(unRequiredForm.port)"
|
placeholder="输入端口号">
|
</b-form-input>
|
</b-form-group>
|
<b-form-group
|
horizontal
|
label-class="text-sm-right"
|
:label-cols="4"
|
label="用户名："
|
label-for="username"
|
>
|
<b-form-input id="username"
|
type="text"
|
v-model="unRequiredForm.username"
|
placeholder="输入用户名">
|
</b-form-input>
|
</b-form-group>
|
<b-form-group
|
horizontal
|
label-class="text-sm-right"
|
:label-cols="4"
|
label="密码："
|
label-for="password"
|
>
|
<b-form-input id="password"
|
type="password"
|
v-model="unRequiredForm.password"
|
placeholder="输入密码">
|
</b-form-input>
|
</b-form-group>
|
<div class="text-center">
|
<b-btn variant="primary" class="pr20 pl20" @click="testConnection">测试连接</b-btn>
|
</div>
|
</div>
|
<div class="col-6 check-map-image" v-if="testUrl">
|
<httpImg :src="testUrl" width="100%" height="auto"/>
|
</div>
|
</div>
|
<div class="text-right mt-3">
|
<!-- v-show="isTestState" -->
|
<ladda-btn :loading="saveLoading" @click.native="saveDevice" data-style="slide-down" class="btn btn-primary">保存</ladda-btn>
|
|
<b-btn variant="default" @click="$router.push({path:'/device'})">返回</b-btn>
|
</div>
|
</b-form>
|
</b-card>
|
</div>
|
</template>
|
|
<script>
|
import LaddaBtn from '@/vendor/libs/ladda/Ladda'
|
import { Select, Option } from 'element-ui'
|
import { getGloDicts, getSysList } from '@/server/common.js'
|
import {
|
addDevice,
|
updateDevice,
|
getDeviceInfo,
|
getDeviceCaptureImage,
|
testConnection
|
} from '@/server/deviceManagement.js'
|
export default {
|
name: 'deviceAdd',
|
metaInfo: {
|
title: '设备添加'
|
},
|
data() {
|
return {
|
userInfo: this.$store.getters.basicUserInfo,
|
form: {
|
description: '',
|
deviceName: '',
|
deviceSn: '',
|
deviceType: '',
|
authorizationSystem: '',
|
cameraType: ''
|
},
|
unRequiredForm: {
|
ip: '',
|
port: '',
|
equipmentSupper: '',
|
maintenanceUnit: '',
|
systemIntegrator: '',
|
username: '',
|
password: ''
|
},
|
deviceTypeDicts: [],
|
sysDicts: [],
|
saveLoading: false,
|
ischeckUp: false,
|
|
isTestState: false,
|
testUrl: ''
|
}
|
},
|
methods: {
|
/* 表单校验 start */
|
requiredValid(val) {
|
return this.ischeckUp ? (val !== '' ? '' : '此字段为必填项') : ''
|
},
|
requiredState(val) {
|
return this.ischeckUp ? val !== '' : null
|
},
|
|
IPValid(val) {
|
return this.ischeckUp
|
? this.IPState(val)
|
? ''
|
: '请输入正确的ip地址'
|
: ''
|
},
|
IPState(val) {
|
var reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/
|
return this.ischeckUp && val !== '' ? reg.test(val) : null
|
},
|
portValid(val) {
|
return this.ischeckUp
|
? this.portState(val)
|
? ''
|
: '端口号必须是0-65535的数字'
|
: ''
|
},
|
portState(val) {
|
var reg = /^([0-9]|[1-9]\d{1,3}|[1-5]\d{4}|6[0-5]{2}[0-3][0-5])$/
|
return this.ischeckUp && val !== '' ? reg.test(val) : null
|
},
|
|
/* 表单校验 end */
|
/* 查询系统字典 */
|
async getSysDicts() {
|
let res = await getSysList({
|
orgId: this.userInfo.orgId,
|
userId: this.userInfo.id,
|
tags: 'device'
|
})
|
if (res && !res.error) {
|
this.sysDicts = res
|
}
|
},
|
/* 查询设备字典 */
|
async getDeviceTypeDicts() {
|
let res = await getGloDicts({
|
type: 'DEVICE_TYPE'
|
})
|
if (res && !res.error && res.data) {
|
this.deviceTypeDicts = res.data
|
}
|
},
|
/* 获取设备信息 */
|
async getDeviceInfo(id) {
|
let res = await getDeviceInfo({ orgId: this.userInfo.orgId, id })
|
if (res) {
|
for (let name in this.form) {
|
if (name === 'authorizationSystem') {
|
this.form.authorizationSystem = res.authorizationSystem
|
.replace(/^,+|,+$/g, '')
|
.split(',')
|
} else {
|
this.form[name] = res[name]
|
}
|
}
|
}
|
},
|
async addDevice(json) {
|
let res = await addDevice(json)
|
this.saveLoading = false
|
if (res && res.success) {
|
if (res.data) {
|
this.$toast({
|
type: res.data.success ? 'success' : 'warning',
|
message: res.data.message ? res.data.message : '操作失败'
|
})
|
}
|
this.$router.push({ path: '/device' })
|
} else if (res) {
|
this.$toast({
|
type: 'error',
|
message: res.msg ? res.msg : '操作失败'
|
})
|
}
|
},
|
async updateDevice(json) {
|
let res = await updateDevice(json)
|
/* if (res) {
|
this.saveLoading = false
|
this.$toast({
|
type: res.success ? 'success' : 'warning',
|
message: res.message
|
})
|
this.$router.push({ path: '/device' })
|
} */
|
this.saveLoading = false
|
if (res && res.success) {
|
if (res.data) {
|
this.$toast({
|
type: res.data.success ? 'success' : 'warning',
|
message: res.data.message ? res.data.message : '操作失败'
|
})
|
}
|
this.$router.push({ path: '/device' })
|
} else if (res) {
|
this.$toast({
|
type: 'error',
|
message: res.msg ? res.msg : '操作失败'
|
})
|
}
|
},
|
async getCameraDeviceState(deviceJson) {
|
let res = await getDeviceCaptureImage({
|
orgId: this.userInfo.orgId,
|
deviceJson
|
})
|
/* {"width":1920,"url":"group1/M02/B6/B8/wKgBy1t7ufyAOPTJAAdpp1b2Zd4466.jpg","height":1080} */
|
if (res && res.success) {
|
if (res.data && res.data.url) {
|
this.isTestState = true
|
this.testUrl = res.data.url
|
this.$toast({
|
type: 'success',
|
message: res.msg ? res.msg : '测试连接成功'
|
})
|
} else {
|
this.$toast({
|
type: 'warning',
|
message: res.msg ? res.msg : '测试连接失败：无图片'
|
})
|
}
|
} else if (res) {
|
this.$toast({
|
type: 'error',
|
message: res.msg ? res.msg : '试连接失败'
|
})
|
}
|
},
|
async getOtherDeviceState(deviceJson) {
|
let res = await testConnection({
|
orgId: this.userInfo.orgId,
|
deviceJson
|
})
|
|
if (res && res.success && res.data.result) {
|
this.isTestState = true
|
this.$toast({
|
type: 'success',
|
message: res.msg ? res.msg : '测试连接成功'
|
})
|
} else if (res) {
|
this.$toast({
|
type: 'error',
|
message: res.msg ? res.msg : '测试连接失败'
|
})
|
}
|
},
|
formValid(isTest) {
|
let json = {
|
orgId: this.userInfo.orgId,
|
...this.form
|
}
|
/* 校验拦截 start */
|
this.ischeckUp = true
|
if (json.deviceType === '') {
|
this.$notify({
|
group: 'foo',
|
type: 'error',
|
title: '抱歉，《设备类型》还没选',
|
text: '《设备类型》为必填字段，必须选择，才能保存'
|
})
|
return false
|
}
|
if (json.authorizationSystem.length === 0) {
|
this.$notify({
|
group: 'foo',
|
type: 'error',
|
title: '抱歉，《设备应用于》还没选',
|
text: '《设备应用于》为必填字段，必须选择，才能保存'
|
})
|
return false
|
}
|
for (let name in json) {
|
if (json[name] === '') {
|
return false
|
}
|
}
|
/* 测试连接 */
|
if (isTest) {
|
if (
|
!this.IPState(this.unRequiredForm.ip) ||
|
!this.portState(this.unRequiredForm.port) ||
|
!this.unRequiredForm.username ||
|
!this.unRequiredForm.password
|
) {
|
this.$notify({
|
group: 'foo',
|
type: 'error',
|
title: '抱歉，《测试连接》模式下服务器配置必填',
|
text: '《IP地址》《端口号》《用户名》《密码》为必填字段'
|
})
|
return false
|
}
|
}
|
/* 校验拦截 end */
|
let testJson = {}
|
testJson.ip = this.unRequiredForm.ip
|
testJson.port = this.unRequiredForm.port
|
testJson.username = this.unRequiredForm.username
|
testJson.password = this.unRequiredForm.password
|
testJson.cameraType = this.form.cameraType
|
testJson.deviceType = this.form.deviceType
|
return testJson
|
},
|
/* 测试连通 */
|
async testConnection(evt) {
|
evt.preventDefault()
|
let testJson = await this.formValid(true)
|
if (!testJson) {
|
return false
|
}
|
if (testJson.deviceType === '1') {
|
this.getCameraDeviceState(JSON.stringify(testJson))
|
} else {
|
this.getOtherDeviceState(JSON.stringify(testJson))
|
}
|
},
|
async saveDevice(evt) {
|
evt.preventDefault()
|
let testJson = await this.formValid()
|
if (!testJson) {
|
return false
|
}
|
let json = {
|
orgId: this.userInfo.orgId,
|
...this.form,
|
...this.unRequiredForm
|
}
|
/* 保存拼接 */
|
json.authorizationSystem = ',' + json.authorizationSystem + ','
|
this.saveLoading = true
|
|
if (this.$route.query.id && this.$route.query.id !== '') {
|
json.id = this.$route.query.id
|
this.updateDevice(json)
|
} else {
|
// 添加
|
this.addDevice(json)
|
}
|
}
|
},
|
created() {
|
/* 查询字典 */
|
this.getSysDicts()
|
this.getDeviceTypeDicts()
|
/* 初始化 */
|
if (this.$route.query.id && this.$route.query.id !== '') {
|
this.getDeviceInfo(this.$route.query.id)
|
}
|
},
|
components: {
|
LaddaBtn,
|
elSelect: Select,
|
elOption: Option
|
}
|
}
|
</script>
|
<style>
|
.check-map-image {
|
overflow: auto;
|
max-height: 680px;
|
}
|
</style>
|
