<template>
|
<el-row justify="end">
|
<el-button icon="check" type="success" @click="save" :loading="saveLoading"
|
>保存</el-button
|
>
|
</el-row>
|
<el-row :gutter="20">
|
<el-col :span="8">
|
<CompInfoSearch
|
v-model="device"
|
label="设备"
|
placeholder="输入设备MN码或名称"
|
@search="searchDevice"
|
>
|
<template #selected="{ row }">
|
<div>
|
<el-text>编号：{{ row.deviceCode }}</el-text>
|
</div>
|
<el-space>
|
<el-text>名称：{{ row.deviceName }}</el-text>
|
<el-button
|
v-show="row.deviceName"
|
type="primary"
|
icon="DocumentCopy"
|
text
|
circle
|
@click="copyDeviceName(row.deviceName)"
|
/>
|
</el-space>
|
</template>
|
<template #default="{ row, click }">
|
<ItemDevice :item="row" @add="selectDevice(row, click)" />
|
</template>
|
</CompInfoSearch>
|
</el-col>
|
<el-col :span="8">
|
<CompInfoSearch
|
v-model="svUser"
|
label="监管用户"
|
placeholder="输入用户名称"
|
@search="searchSVUser"
|
>
|
<template #selected="{ row }">
|
<div>
|
<el-text>编号：{{ row.svUserId }}</el-text>
|
</div>
|
<el-space>
|
<el-text>名称：{{ row.svUserName }}</el-text>
|
<el-button
|
v-show="row.svUserName"
|
type="primary"
|
icon="DocumentCopy"
|
text
|
circle
|
@click="copySVUser(row.svUserName)"
|
/>
|
</el-space>
|
</template>
|
<template #default="{ row, click }">
|
<ItemUser :item="row" @add="selectSVUser(row, click)" />
|
</template>
|
</CompInfoSearch>
|
</el-col>
|
<el-col :span="8">
|
<CompInfoSearch
|
v-model="tzUser"
|
label="环境用户"
|
placeholder="输入用户名称"
|
@search="searchTZUser"
|
>
|
<template #selected="{ row }">
|
<div>
|
<el-text>编号：{{ row.tzUserId }}</el-text>
|
</div>
|
<el-space>
|
<el-text>名称：{{ row.tzUserName }}</el-text>
|
<el-button
|
v-show="row.tzUserName"
|
type="primary"
|
icon="DocumentCopy"
|
text
|
circle
|
@click="copyTZUser(row.tzUserName)"
|
/>
|
</el-space>
|
</template>
|
<template #default="{ row, click }">
|
<ItemUser :item="row" @add="selectTZUser(row, click)" />
|
</template>
|
</CompInfoSearch>
|
</el-col>
|
</el-row>
|
</template>
|
|
<script>
|
import { useCloned } from '@vueuse/core';
|
import CompInfoSearch from '../components/CompInfoSearch.vue';
|
import tzUserApi from '@/api/fytz/userApi';
|
import svUserApi from '@/api/fysp/userApi';
|
import userMapApi from '@/api/fysp/userMapApi';
|
import { svToTz } from '@/enum/scene';
|
import { saveAs } from 'file-saver';
|
|
export default {
|
components: { CompInfoSearch },
|
props: {
|
// 设备账户匹配信息
|
data: Object,
|
// 检索范围（包含行政区划、场景类型）
|
area: Object
|
},
|
emits: ['save'],
|
data() {
|
return {
|
// 监测设备
|
device: {},
|
// 监管用户
|
svUser: {},
|
// 环境用户
|
tzUser: {},
|
// 保存loading
|
saveLoading: false
|
};
|
},
|
watch: {
|
data: {
|
handler(nValue, oValue) {
|
if (nValue != oValue) {
|
this.device = {
|
deviceCode: nValue.deviceCode,
|
deviceName: nValue.deviceName
|
};
|
this.svUser = {
|
svUserId: nValue.svUserId,
|
svUserName: nValue.svUserName
|
};
|
this.tzUser = {
|
tzUserId: nValue.tzUserId,
|
tzUserName: nValue.tzUserName
|
};
|
}
|
},
|
immediate: true
|
}
|
},
|
methods: {
|
// 查询监测设备
|
searchDevice(param, callback) {
|
const { text, page, pageSize } = param;
|
const { cloned: area } = useCloned(this.area);
|
return userMapApi
|
.searchThirdPartyDevice(area.value, text, page, pageSize)
|
.then((res) => {
|
if (res.success) {
|
const l = res.data.map((value) => {
|
return {
|
deviceCode: value.mnCode,
|
deviceName: value.name,
|
district: area.value.districtname
|
};
|
});
|
callback({
|
data: l,
|
total: res.head.totalCount
|
});
|
}
|
});
|
},
|
// 查询监管用户
|
searchSVUser(param, callback) {
|
const { text, page, pageSize } = param;
|
const { cloned: area } = useCloned(this.area);
|
area.value.sceneName = text;
|
return svUserApi
|
.searchUser(area.value, text, page, pageSize)
|
.then((res) => {
|
if (res.success) {
|
const l = res.data.map((value) => {
|
return {
|
guid: value.guid,
|
realname: value.realname,
|
acountname: value.acountname,
|
district: value.remark
|
};
|
});
|
callback({
|
data: l,
|
total: res.head.totalCount
|
});
|
}
|
})
|
.finally(() => {
|
callback();
|
});
|
},
|
// 查询环境（守法自助小程序）用户
|
searchTZUser(param, callback) {
|
const { text, page, pageSize } = param;
|
const area = {};
|
// 行政区划
|
area.provinceCode = this.area.provincecode;
|
area.provinceName = this.area.provincename;
|
area.cityCode = this.area.citycode;
|
area.cityName = this.area.cityname;
|
area.districtCode = this.area.districtcode;
|
area.districtName = this.area.districtname;
|
area.townCode = this.area.towncode;
|
area.townName = this.area.townname;
|
// 场景类型
|
const tzSceneType = svToTz(this.area.scensetypeid);
|
area.sceneTypes = [tzSceneType.value];
|
// 上下线状态
|
area.online = this.area.online;
|
// 关键字
|
area.searchText = text;
|
|
tzUserApi
|
.fetchUser(page, pageSize, area)
|
.then((res) => {
|
if (res) {
|
const l = res.data.map((value) => {
|
return {
|
guid: value.userInfo.guid,
|
realname: value.userInfo.realname,
|
acountname: value.userInfo.acountname,
|
district: value.userInfo.extension1
|
};
|
});
|
callback({
|
data: l,
|
total: res.head.totalCount
|
});
|
}
|
})
|
.finally(() => {
|
callback();
|
});
|
},
|
selectDevice(row, click) {
|
const p = {
|
deviceCode: row.deviceCode,
|
deviceName: row.deviceName
|
};
|
click(p);
|
},
|
selectSVUser(row, click) {
|
const p = {
|
svUserId: row.guid,
|
svUserName: row.realname
|
};
|
click(p);
|
},
|
selectTZUser(row, click) {
|
const p = {
|
tzUserId: row.guid,
|
tzUserName: row.realname
|
};
|
click(p);
|
},
|
// 复制监管用户
|
copySVUser(svUserName) {
|
// 使用Clipboard API将用户名称复制到剪贴板
|
navigator.clipboard
|
.writeText(svUserName)
|
.then(() => {
|
this.$message({
|
message: '监管用户名称已复制到剪贴板',
|
type: 'success'
|
});
|
})
|
.catch((err) => {
|
this.$message({
|
message: '复制失败，请手动复制',
|
type: 'error'
|
});
|
console.error('复制失败:', err);
|
});
|
},
|
// 复制环境用户
|
copyTZUser(tzUserName) {
|
// 使用Clipboard API将用户名称复制到剪贴板
|
navigator.clipboard
|
.writeText(tzUserName)
|
.then(() => {
|
this.$message({
|
message: '环境用户名称已复制到剪贴板',
|
type: 'success'
|
});
|
})
|
.catch((err) => {
|
this.$message({
|
message: '复制失败，请手动复制',
|
type: 'error'
|
});
|
console.error('复制失败:', err);
|
});
|
},
|
// 复制监测设备名称
|
copyDeviceName(deviceName) {
|
// 使用Clipboard API将用户名称复制到剪贴板
|
navigator.clipboard
|
.writeText(deviceName)
|
.then(() => {
|
this.$message({
|
message: '监测设备名称已复制到剪贴板',
|
type: 'success'
|
});
|
})
|
.catch((err) => {
|
this.$message({
|
message: '复制失败，请手动复制',
|
type: 'error'
|
});
|
console.error('复制失败:', err);
|
});
|
},
|
// 保存
|
save() {
|
const deviceMap = {
|
id: this.data.id,
|
...this.device,
|
...this.svUser,
|
...this.tzUser
|
};
|
this.saveLoading = true;
|
userMapApi
|
.insertOrUpdate(this.area, deviceMap)
|
.then((res) => {
|
if (res.success) {
|
this.$message({
|
message: '保存成功',
|
type: 'success'
|
});
|
this.$emit('save', deviceMap);
|
}
|
})
|
.finally(() => {
|
this.saveLoading = false;
|
});
|
}
|
}
|
};
|
</script>
|
