<template>
|
<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>
|
<div>
|
<el-text>名称：{{ row.deviceName }}</el-text>
|
</div>
|
</template>
|
<template #default="{ row, click }">
|
<el-text>deviceInfo</el-text>
|
</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>
|
<div>
|
<el-text>名称：{{ row.svUserName }}</el-text>
|
</div>
|
</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>
|
<div>
|
<el-text>名称：{{ row.tzUserName }}</el-text>
|
</div>
|
</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 './CompInfoSearch.vue';
|
import tzUserApi from '@/api/fytz/userApi';
|
import svUserApi from '@/api/fysp/userApi';
|
import { svToTz } from '@/enum/scene';
|
|
export default {
|
components: { CompInfoSearch },
|
props: {
|
// 设备账户匹配信息
|
data: Object,
|
// 检索范围（包含行政区划、场景类型）
|
area: Object
|
},
|
data() {
|
return {
|
// 监测设备
|
device: {},
|
// 监管用户
|
svUser: {},
|
// 环境用户
|
tzUser: {}
|
};
|
},
|
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() {},
|
// 查询监管用户
|
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() {},
|
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);
|
}
|
}
|
};
|
</script>
|
