<template>
|
<el-row>
|
<el-col :span="8">
|
<el-text>新设备</el-text>
|
<el-form :inline="true">
|
<FYOptionTime :initValue="true" type="date" v-model:value="updateTime"></FYOptionTime>
|
<el-form-item>
|
<el-button type="primary" :loading="loading" @click="fetchNewDevice"
|
>查询新设备</el-button
|
>
|
</el-form-item>
|
</el-form>
|
<el-scrollbar height="76vh">
|
<el-space direction="vertical" alignment="normal">
|
<ItemDevice v-for="item in deviceList" :key="item.id" :item="item" @add="addDevice" />
|
</el-space>
|
</el-scrollbar>
|
</el-col>
|
<el-col :span="8">
|
<DeviceMatch :device="selectedDevice" :scene="selectedScene" @success="onUploadSuccess"></DeviceMatch>
|
</el-col>
|
<el-col :span="8">
|
<el-text>监管工地</el-text>
|
<el-form :inline="false">
|
<FYOptionText
|
label="场景名称"
|
placeholder="输入名称关键字"
|
width="400px"
|
v-model:value="searchText"
|
></FYOptionText>
|
<el-form-item>
|
<el-button type="primary" :loading="loading2" @click="fetchScene">查询监管场景</el-button>
|
</el-form-item>
|
</el-form>
|
<el-scrollbar height="70vh">
|
<!-- <el-space direction="vertical" alignment="normal"> -->
|
<ItemScene v-for="item in sceneList" :key="item.sguid" :item="item" @add="addScene" />
|
<!-- </el-space> -->
|
</el-scrollbar>
|
</el-col>
|
</el-row>
|
</template>
|
<script setup>
|
import { ref, computed } from 'vue';
|
import dayjs from 'dayjs';
|
import constructionApi from '@/api/additional-jingan/constructionApi';
|
import sceneApi from '@/api/fysp/sceneApi';
|
import { useFetchData } from '@/composables/fetchData';
|
|
import ItemDevice from './components/ItemDevice.vue';
|
import DeviceMatch from './components/DeviceMatch.vue';
|
|
const { loading, fetchData } = useFetchData();
|
|
const updateTime = ref();
|
const deviceList = ref([]);
|
const selectedDevice = ref(null);
|
|
const searchText = ref();
|
const sceneList = ref([]);
|
const selectedScene = ref(null);
|
|
// 查询需确认的设备清单
|
function fetchNewDevice() {
|
const param = dayjs(updateTime.value).format('YYYY-MM-DD HH:mm:ss');
|
fetchData(() => {
|
return constructionApi.queryDevice(param).then((res) => {
|
deviceList.value = res.data;
|
});
|
});
|
}
|
|
function addDevice(item) {
|
selectedDevice.value = item;
|
searchText.value = item.name;
|
fetchScene();
|
}
|
|
const { loading: loading2, fetchData: fetchData2 } = useFetchData();
|
// 查询监管场景
|
function fetchScene() {
|
const area = {};
|
area.sceneName = searchText.value;
|
fetchData2((page, pageSize) => {
|
return sceneApi.searchScene(area, page, pageSize).then((res) => {
|
sceneList.value = res.data;
|
});
|
});
|
}
|
|
function addScene(item) {
|
selectedScene.value = item;
|
}
|
|
/**
|
* 上传设备完成
|
*/
|
function onUploadSuccess() {
|
const i = deviceList.value.indexOf(selectedDevice.value)
|
deviceList.value.splice(i, 1)
|
selectedDevice.value = null
|
selectedScene.value = null
|
|
}
|
</script>
|
<style scoped>
|
.device-scene-wrap {
|
border: 1px solid black;
|
}
|
</style>
|
