<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" @click="uploadMatchScene"
|
>上传匹配信息</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 constructionApi from '@/api/additional-jingan/constructionApi';
|
import { useFetchData } from '@/composables/fetchData';
|
import { ElMessage } from 'element-plus';
|
|
import FormDevice from './FormDevice.vue';
|
|
const props = defineProps({
|
device: Object,
|
scene: Object
|
});
|
|
const emit = defineEmits(['success']);
|
|
// 新增设备信息
|
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
|
};
|
}
|
|
const { loading, fetchData } = useFetchData();
|
/**
|
* 上传设备关联工地
|
*/
|
function uploadMatchScene() {
|
const param = {
|
name: props.scene.name,
|
address: props.scene.location,
|
street: props.scene.townname,
|
lon: props.device.lon,
|
lat: props.device.lat,
|
sbCode: props.device.code,
|
sbName: props.device.name
|
};
|
|
fetchData(() => {
|
return constructionApi.uploadConstructionDevice(param).then((res) => {
|
ElMessage({
|
message: res.message,
|
type: 'success'
|
});
|
emit('success');
|
});
|
});
|
}
|
</script>
|
