<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" @click="setNewDevice"
|
>录入设备信息</el-button
|
>
|
</div>
|
<el-button type="danger" :disabled="!enabled">上传匹配信息</el-button>
|
</el-row>
|
<div v-if="newDevice">
|
<el-text>新增设备</el-text>
|
<FormDevice :form-info="newDevice" :is-edit="true" ></FormDevice>
|
</div>
|
<div v-if="deviceList.length > 0">
|
<el-text>已有设备</el-text>
|
<FormDevice v-for="item in deviceList" :key="item.diId" :form-info="item"></FormDevice>
|
</div>
|
</template>
|
</el-card>
|
</template>
|
<script setup>
|
import { ref, computed, watch } from 'vue';
|
import deviceApi from '@/api/fysp/deviceApi';
|
|
import FormDevice from './FormDevice.vue';
|
|
const props = defineProps({
|
device: Object,
|
scene: Object
|
});
|
|
// 新增设备信息
|
const newDevice = ref();
|
// 场景已有设备信息
|
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;
|
});
|
}
|
|
function setNewDevice() {
|
newDevice.value = {
|
diName: props.device.name,
|
diMnCode: props.device.code,
|
diType: 1,
|
diSupplier: null,
|
diMaintainer: null,
|
diRunningStatus: true,
|
diRemoved: false
|
};
|
}
|
</script>
|
