<template>
|
<FYTable @search="onSearch" :pagination="false" ref="tableRef" size="small">
|
<template #options>
|
<!-- 区县 -->
|
<FYOptionLocation
|
:allOption="false"
|
:level="3"
|
:checkStrictly="false"
|
v-model:value="formSearch.locations"
|
></FYOptionLocation>
|
<!-- 场景类型 -->
|
<FYOptionScene
|
:allOption="false"
|
:type="2"
|
v-model:value="formSearch.scenetype"
|
></FYOptionScene>
|
<FYOptionTime :initValue="false" type="month" v-model:value="formSearch.time"></FYOptionTime>
|
</template>
|
<template #buttons> </template>
|
|
<template #options-expand>
|
<el-form :inline="true">
|
<CompQuickSet @quick-set="setOptions"></CompQuickSet>
|
</el-form>
|
</template>
|
|
<!-- <template #options-expand2>
|
<CompDeviceMatchEdit :area="area"></CompDeviceMatchEdit>
|
</template> -->
|
|
<template #table-column>
|
<el-table-column fixed="left" type="index" label="#" width="40" index="1"></el-table-column>
|
<el-table-column
|
prop="deviceCode"
|
:show-overflow-tooltip="true"
|
label="监测设备编号"
|
width="160"
|
>
|
</el-table-column>
|
<el-table-column prop="deviceName" :show-overflow-tooltip="true" label="监测设备名称">
|
</el-table-column>
|
<el-table-column prop="svUserName" :show-overflow-tooltip="true" label="监管用户名称">
|
</el-table-column>
|
<el-table-column prop="tzUserName" :show-overflow-tooltip="true" label="守法自助用户名称">
|
</el-table-column>
|
<el-table-column
|
prop="createTime"
|
:show-overflow-tooltip="true"
|
label="创建时间"
|
:formatter="timeFormat"
|
>
|
</el-table-column>
|
<el-table-column fixed="right" label="操作" width="100">
|
<template #default="{ row }">
|
<el-button type="primary" size="small" @click="itemEdit(row)">编辑</el-button>
|
</template>
|
</el-table-column>
|
</template>
|
</FYTable>
|
<el-drawer
|
v-model="drawerShow"
|
title="设备匹配记录编辑"
|
direction="btt"
|
size="80%"
|
destroy-on-close
|
>
|
<CompDeviceMatchEdit :data="selectedItem" :area="area"></CompDeviceMatchEdit>
|
</el-drawer>
|
</template>
|
<script setup>
|
/**
|
* 监测设备和场景匹配记录管理
|
*/
|
import dayjs from 'dayjs';
|
import { ref, reactive, computed, getCurrentInstance } from 'vue';
|
import userMapApi from '@/api/fysp/userMapApi';
|
|
import CompDeviceMatchEdit from '@/views/fysp/config/device/CompDeviceMatchEdit.vue';
|
|
// fixme 2024.9.26 后续可以用vueuse中的时间格式化方法来代替
|
const { $fm } = getCurrentInstance().appContext.config.globalProperties;
|
|
/******** 匹配记录查询 ********/
|
const tableRef = ref();
|
const formSearch = reactive({
|
locations: {},
|
scenetype: {},
|
time: dayjs().add(-1, 'M').date(1).toDate()
|
});
|
|
const area = computed(() => {
|
return {
|
provincecode: formSearch.locations.pCode,
|
provincename: formSearch.locations.pName,
|
citycode: formSearch.locations.cCode,
|
cityname: formSearch.locations.cName,
|
districtcode: formSearch.locations.dCode,
|
districtname: formSearch.locations.dName,
|
towncode: formSearch.locations.tCode,
|
townname: formSearch.locations.tName,
|
starttime: $fm.formatYMDH(formSearch.time),
|
scensetypeid: formSearch.scenetype.value,
|
online: true,
|
// 此处数据来源固定为飞羽监管系统
|
sourceType: 2
|
};
|
});
|
|
function onSearch(page, func) {
|
userMapApi.fetchDeviceMap(area.value).then((res) => {
|
func({ data: res.data });
|
});
|
}
|
|
function setOptions(param) {
|
formSearch.locations = param.locations;
|
formSearch.scenetype = param.scenetype;
|
// formSearch.sourceType = param.sourceType;
|
tableRef.value.onSearch();
|
}
|
|
function timeFormat(row) {
|
const time = row.createTime;
|
if (time) {
|
return $fm.formatYMDH(time);
|
} else {
|
return '';
|
}
|
}
|
|
/******** 匹配记录编辑 ********/
|
const drawerShow = ref(false);
|
const selectedItem = ref(null);
|
function itemEdit(row) {
|
selectedItem.value = row;
|
drawerShow.value = true;
|
}
|
</script>
|
