<template>
|
<el-card shadow="hover">
|
<div>新设备</div>
|
<div v-if="device">{{ device.name }}</div>
|
<div v-else>未选择</div>
|
<el-divider></el-divider>
|
<div>监管场景</div>
|
<div v-if="scene">{{ scene.name }}</div>
|
<div v-else>未选择</div>
|
<template #footer>
|
<el-row justify="space-between">
|
<div>
|
<!-- <el-button type="primary" plain :disabled="!enabled">名称同步</el-button> -->
|
<el-button type="primary" plain :disabled="!enabled">录入设备信息</el-button>
|
</div>
|
<el-button type="danger" :disabled="!enabled">上传匹配信息</el-button>
|
</el-row>
|
<el-row></el-row>
|
</template>
|
</el-card>
|
</template>
|
<script setup>
|
import { ref, computed, watch } from 'vue';
|
import deviceApi from '@/api/fysp/deviceApi';
|
|
const props = defineProps({
|
device: Object,
|
scene: Object
|
});
|
|
const deviceList = ref([]);
|
|
const enabled = computed(() => {
|
return props.device && props.scene;
|
});
|
|
watch(
|
() => props.scene,
|
(nV, oV) => {
|
if (nV != oV) {
|
fetchDeviceInfo();
|
}
|
}
|
);
|
|
function fetchDeviceInfo() {
|
deviceApi.fetchDevice(props.scene.guid).then((res) => {
|
deviceList.value = res.data;
|
});
|
}
|
</script>
|
