|
|
@@ -192,10 +192,15 @@
|
|
|
style="display: inline-block"
|
|
|
class="text-[#ad9399] w-[70px] text-[12px] cursor-pointer z-[999] justify-center flex items-center"
|
|
|
>
|
|
|
- <el-popover placement="bottom" :width="250" trigger="hover">
|
|
|
+ <el-popover placement="bottom" :width="250" trigger="click">
|
|
|
<template #reference>
|
|
|
- <div class="flex items-center">
|
|
|
- <span> 油服编码 </span> <Icon icon="ep:arrow-down" />
|
|
|
+ <div class="flex items-center" @click.stop>
|
|
|
+ <span> 油服编码 </span>
|
|
|
+ <Icon
|
|
|
+ icon="ep:arrow-down"
|
|
|
+ class="ml-1 cursor-pointer text-[#ad9399]"
|
|
|
+ @click.stop
|
|
|
+ />
|
|
|
</div>
|
|
|
</template>
|
|
|
<div class="flex items-center gap-2">
|
|
|
@@ -225,9 +230,9 @@
|
|
|
style="display: inline-block"
|
|
|
class="text-[#ad9399] w-[70px] text-[12px] cursor-pointer z-[999] justify-center flex items-center"
|
|
|
>
|
|
|
- <el-popover placement="bottom" :width="250" trigger="hover">
|
|
|
+ <el-popover placement="bottom" :width="250" trigger="click">
|
|
|
<template #reference>
|
|
|
- <div class="flex items-center">
|
|
|
+ <div class="flex items-center" @click.stop>
|
|
|
<span> 历史编码 </span> <Icon icon="ep:arrow-down" />
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -258,9 +263,9 @@
|
|
|
style="display: inline-block"
|
|
|
class="text-[#ad9399] w-[70px] text-[12px] cursor-pointer z-[999] justify-center flex items-center"
|
|
|
>
|
|
|
- <el-popover placement="bottom" :width="250" trigger="hover">
|
|
|
+ <el-popover placement="bottom" :width="250" trigger="click">
|
|
|
<template #reference>
|
|
|
- <div class="flex items-center">
|
|
|
+ <div class="flex items-center" @click.stop>
|
|
|
<span> 设备名称 </span> <Icon icon="ep:arrow-down" />
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -284,13 +289,67 @@
|
|
|
</el-link>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column label="设备号" sortable align="center" prop="deviceNo" width="120" />
|
|
|
+ <el-table-column label="设备号" sortable align="center" prop="deviceNo" width="120">
|
|
|
+ <template #header>
|
|
|
+ <span
|
|
|
+ style="display: inline-block"
|
|
|
+ class="text-[#ad9399] w-[70px] text-[12px] cursor-pointer z-[999] justify-center flex items-center"
|
|
|
+ >
|
|
|
+ <el-popover placement="bottom" :width="250" trigger="click">
|
|
|
+ <template #reference>
|
|
|
+ <div class="flex items-center" @click.stop>
|
|
|
+ <span> 设备号 </span> <Icon icon="ep:arrow-down" />
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <div class="flex items-center gap-2">
|
|
|
+ <el-input
|
|
|
+ v-model="queryParams.deviceNo"
|
|
|
+ placeholder="请输入设备号"
|
|
|
+ style="width: 180px"
|
|
|
+ clearable
|
|
|
+ @keyup.enter="handleQuery"
|
|
|
+ />
|
|
|
+ <el-button type="primary" :icon="Search" @click="handleQuery">搜索</el-button>
|
|
|
+ </div>
|
|
|
+ </el-popover>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
<el-table-column
|
|
|
:label="t('iotDevice.dept')"
|
|
|
align="center"
|
|
|
prop="deptName"
|
|
|
min-width="150"
|
|
|
- />
|
|
|
+ >
|
|
|
+ <template #header>
|
|
|
+ <span
|
|
|
+ style="display: inline-block"
|
|
|
+ class="text-[#ad9399] w-[70px] text-[12px] cursor-pointer z-[999] justify-center flex items-center"
|
|
|
+ >
|
|
|
+ <el-popover placement="bottom" :width="250" trigger="click">
|
|
|
+ <template #reference>
|
|
|
+ <div class="flex items-center" @click.stop>
|
|
|
+ <span> {{ t('iotDevice.dept') }} </span> <Icon icon="ep:arrow-down" />
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <div class="flex items-center gap-2">
|
|
|
+ <el-tree-select
|
|
|
+ :teleported="false"
|
|
|
+ v-model="queryParams.deptId"
|
|
|
+ :data="deptList"
|
|
|
+ :props="defaultProps"
|
|
|
+ check-strictly
|
|
|
+ node-key="id"
|
|
|
+ filterable
|
|
|
+ placeholder="请选择所在部门"
|
|
|
+ @change="handleQuery"
|
|
|
+ style="width: 200px"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </el-popover>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
<el-table-column
|
|
|
:label="t('iotDevice.status')"
|
|
|
align="center"
|
|
|
@@ -354,47 +413,222 @@
|
|
|
align="center"
|
|
|
prop="assetClassName"
|
|
|
min-width="170"
|
|
|
- />
|
|
|
+ >
|
|
|
+ <template #header>
|
|
|
+ <span
|
|
|
+ style="display: inline-block"
|
|
|
+ class="text-[#ad9399] w-[70px] text-[12px] cursor-pointer z-[999] justify-center flex items-center"
|
|
|
+ >
|
|
|
+ <el-popover placement="bottom" :width="250" trigger="click">
|
|
|
+ <template #reference>
|
|
|
+ <div class="flex items-center" @click.stop>
|
|
|
+ <span> {{ t('iotDevice.assetClass') }} </span> <Icon icon="ep:arrow-down" />
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <div class="flex items-center gap-2">
|
|
|
+ <el-input
|
|
|
+ v-model="queryParams.assetClassName"
|
|
|
+ placeholder="请输入资产类别"
|
|
|
+ style="width: 180px"
|
|
|
+ clearable
|
|
|
+ />
|
|
|
+ <el-button type="primary" :icon="Search" @click="handleQuery">搜索</el-button>
|
|
|
+ </div>
|
|
|
+ </el-popover>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
|
|
|
- <el-table-column label="车牌号" align="center" prop="carNo" min-width="170" />
|
|
|
+ <el-table-column label="车牌号" align="center" prop="carNo" min-width="170">
|
|
|
+ <template #header>
|
|
|
+ <el-popover placement="bottom" :width="250" trigger="click">
|
|
|
+ <template #reference>
|
|
|
+ <div class="flex items-center" @click.stop>
|
|
|
+ <span> 车牌号 </span> <Icon icon="ep:arrow-down" />
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <div class="flex items-center gap-2">
|
|
|
+ <el-input
|
|
|
+ v-model="queryParams.carNo"
|
|
|
+ placeholder="请输入车牌号"
|
|
|
+ style="width: 180px"
|
|
|
+ clearable
|
|
|
+ />
|
|
|
+ <el-button type="primary" :icon="Search" @click="handleQuery">搜索</el-button>
|
|
|
+ </div>
|
|
|
+ </el-popover>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
|
|
|
- <el-table-column
|
|
|
- :label="t('deviceForm.mfg')"
|
|
|
- align="center"
|
|
|
- prop="manufacturer"
|
|
|
- min-width="200"
|
|
|
- />
|
|
|
+ <el-table-column align="center" prop="manufacturer" min-width="200">
|
|
|
+ <template #header>
|
|
|
+ <el-popover placement="bottom" :width="250" trigger="click">
|
|
|
+ <template #reference>
|
|
|
+ <div class="flex items-center" @click.stop>
|
|
|
+ <span>
|
|
|
+ {{ t('deviceForm.mfg') }}
|
|
|
+ </span>
|
|
|
+ <Icon icon="ep:arrow-down" />
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <div class="flex items-center gap-2">
|
|
|
+ <el-input
|
|
|
+ v-model="queryParams.manufacturer"
|
|
|
+ placeholder="请输入制造商"
|
|
|
+ style="width: 180px"
|
|
|
+ clearable
|
|
|
+ />
|
|
|
+ <el-button type="primary" :icon="Search" @click="handleQuery">搜索</el-button>
|
|
|
+ </div>
|
|
|
+ </el-popover>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
<el-table-column
|
|
|
:label="t('deviceForm.brand')"
|
|
|
align="center"
|
|
|
prop="brandName"
|
|
|
min-width="150"
|
|
|
- />
|
|
|
+ >
|
|
|
+ <template #header>
|
|
|
+ <el-popover placement="bottom" :width="250" trigger="click">
|
|
|
+ <template #reference>
|
|
|
+ <div class="flex items-center" @click.stop>
|
|
|
+ <span> {{ t('deviceForm.brand') }} </span> <Icon icon="ep:arrow-down" />
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <div class="flex items-center gap-2">
|
|
|
+ <el-input
|
|
|
+ v-model="queryParams.brandName"
|
|
|
+ placeholder="请输入品牌"
|
|
|
+ style="width: 180px"
|
|
|
+ clearable
|
|
|
+ />
|
|
|
+ <el-button type="primary" :icon="Search" @click="handleQuery">搜索</el-button>
|
|
|
+ </div>
|
|
|
+ </el-popover>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
<el-table-column
|
|
|
:label="t('deviceForm.model')"
|
|
|
align="center"
|
|
|
prop="model"
|
|
|
min-width="170"
|
|
|
- />
|
|
|
+ >
|
|
|
+ <template #header>
|
|
|
+ <el-popover placement="bottom" :width="250" trigger="click">
|
|
|
+ <template #reference>
|
|
|
+ <div class="flex items-center" @click.stop>
|
|
|
+ <span> {{ t('deviceForm.model') }} </span> <Icon icon="ep:arrow-down" />
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <div class="flex items-center gap-2">
|
|
|
+ <el-input
|
|
|
+ v-model="queryParams.model"
|
|
|
+ placeholder="请输入规格型号"
|
|
|
+ style="width: 180px"
|
|
|
+ clearable
|
|
|
+ />
|
|
|
+ <el-button type="primary" :icon="Search" @click="handleQuery">搜索</el-button>
|
|
|
+ </div>
|
|
|
+ </el-popover>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
<el-table-column
|
|
|
:label="t('devicePerson.rp')"
|
|
|
align="center"
|
|
|
prop="chargeName"
|
|
|
min-width="170"
|
|
|
- />
|
|
|
+ >
|
|
|
+ <template #header>
|
|
|
+ <el-popover placement="bottom" :width="250" trigger="click">
|
|
|
+ <template #reference>
|
|
|
+ <div class="flex items-center" @click.stop>
|
|
|
+ <span> {{ t('devicePerson.rp') }} </span> <Icon icon="ep:arrow-down" />
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <div class="flex items-center gap-2">
|
|
|
+ <el-input
|
|
|
+ v-model="queryParams.chargeName"
|
|
|
+ placeholder="请输入责任人"
|
|
|
+ style="width: 180px"
|
|
|
+ clearable
|
|
|
+ />
|
|
|
+ <el-button type="primary" :icon="Search" @click="handleQuery">搜索</el-button>
|
|
|
+ </div>
|
|
|
+ </el-popover>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
<el-table-column
|
|
|
:label="t('deviceForm.useProject')"
|
|
|
align="center"
|
|
|
prop="useProject"
|
|
|
min-width="170"
|
|
|
- />
|
|
|
+ >
|
|
|
+ <template #header>
|
|
|
+ <el-popover placement="bottom" :width="250" trigger="click">
|
|
|
+ <template #reference>
|
|
|
+ <div class="flex items-center">
|
|
|
+ <span> {{ t('deviceForm.useProject') }} </span> <Icon icon="ep:arrow-down" />
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <div class="flex items-center gap-2">
|
|
|
+ <el-input
|
|
|
+ v-model="queryParams.useProject"
|
|
|
+ placeholder="请输入使用项目"
|
|
|
+ style="width: 180px"
|
|
|
+ clearable
|
|
|
+ />
|
|
|
+ <el-button type="primary" :icon="Search" @click="handleQuery">搜索</el-button>
|
|
|
+ </div>
|
|
|
+ </el-popover>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
<el-table-column
|
|
|
:label="t('deviceForm.assetOwner')"
|
|
|
align="center"
|
|
|
prop="assetOwnership"
|
|
|
min-width="170"
|
|
|
- />
|
|
|
- <el-table-column label="所在地点" align="center" prop="address" min-width="170" />
|
|
|
+ >
|
|
|
+ <template #header>
|
|
|
+ <el-popover placement="bottom" :width="250" trigger="click">
|
|
|
+ <template #reference>
|
|
|
+ <div class="flex items-center">
|
|
|
+ <span> {{ t('deviceForm.assetOwner') }} </span> <Icon icon="ep:arrow-down" />
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <div class="flex items-center gap-2">
|
|
|
+ <el-input
|
|
|
+ v-model="queryParams.assetOwnership"
|
|
|
+ placeholder="请输入资产归属"
|
|
|
+ style="width: 180px"
|
|
|
+ clearable
|
|
|
+ />
|
|
|
+ <el-button type="primary" :icon="Search" @click="handleQuery">搜索</el-button>
|
|
|
+ </div>
|
|
|
+ </el-popover>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="所在地点" align="center" prop="address" min-width="170">
|
|
|
+ <template #header>
|
|
|
+ <el-popover placement="bottom" :width="250" trigger="click">
|
|
|
+ <template #reference>
|
|
|
+ <div class="table-header-flex">
|
|
|
+ <span>所在地点</span>
|
|
|
+ <Icon icon="ep:arrow-down" @click.stop />
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <div class="flex items-center gap-2">
|
|
|
+ <el-input
|
|
|
+ v-model="queryParams.address"
|
|
|
+ placeholder="请输入所在地点"
|
|
|
+ style="width: 180px"
|
|
|
+ clearable
|
|
|
+ />
|
|
|
+ <el-button type="primary" :icon="Search" @click="handleQuery">搜索</el-button>
|
|
|
+ </div>
|
|
|
+ </el-popover>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
<el-table-column
|
|
|
:label="t('operationFill.operation')"
|
|
|
align="center"
|
|
|
@@ -449,6 +683,7 @@ import { defaultProps, handleTree } from '@/utils/tree'
|
|
|
import * as ProductClassifyApi from '@/api/pms/productclassify'
|
|
|
import { useRefreshStore } from '@/store/modules/pms/refreshStore'
|
|
|
import { Search } from '@element-plus/icons-vue'
|
|
|
+import * as DeptApi from '@/api/system/dept'
|
|
|
|
|
|
/** 设备台账 列表 */
|
|
|
defineOptions({ name: 'IotDevicePms' })
|
|
|
@@ -456,6 +691,7 @@ defineOptions({ name: 'IotDevicePms' })
|
|
|
const message = useMessage() // 消息弹窗
|
|
|
const { t } = useI18n() // 国际化
|
|
|
const { push } = useRouter() // 路由跳转
|
|
|
+const deptList = ref<Tree[]>([]) // 树形结构
|
|
|
|
|
|
const refreshStore = useRefreshStore()
|
|
|
const loading = ref(true) // 列表的加载中
|
|
|
@@ -467,6 +703,9 @@ const total = ref(0) // 列表的总页数
|
|
|
const queryParams = reactive({
|
|
|
pageNo: 1,
|
|
|
pageSize: 10,
|
|
|
+ useProject: undefined,
|
|
|
+ assetOwnership: undefined,
|
|
|
+ address: undefined,
|
|
|
deviceCode: undefined,
|
|
|
deviceName: undefined,
|
|
|
brand: undefined,
|
|
|
@@ -501,7 +740,9 @@ const queryParams = reactive({
|
|
|
yfDeviceCode: undefined,
|
|
|
carNo: undefined,
|
|
|
deviceNo: undefined,
|
|
|
- assetClassName: undefined
|
|
|
+ assetClassName: undefined,
|
|
|
+ manufacturer: undefined,
|
|
|
+ chargeName: undefined
|
|
|
})
|
|
|
const queryFormRef = ref() // 搜索的表单
|
|
|
const exportLoading = ref(false) // 导出的加载中
|
|
|
@@ -561,6 +802,12 @@ const moreQuery = (show) => {
|
|
|
}
|
|
|
/** 重置按钮操作 */
|
|
|
const resetQuery = () => {
|
|
|
+ queryParams.chargeName = undefined
|
|
|
+ queryParams.address = undefined
|
|
|
+ queryParams.manufacturer = undefined
|
|
|
+ queryParams.useProject = undefined
|
|
|
+ queryParams.model = undefined
|
|
|
+ queryParams.assetOwnership = undefined
|
|
|
queryFormRef.value.resetFields()
|
|
|
handleQuery()
|
|
|
}
|
|
|
@@ -629,6 +876,8 @@ onMounted(async () => {
|
|
|
queryParams.sortingFields.push(sort)
|
|
|
await getList()
|
|
|
refreshStore.registerCallback('devicerouter', getList)
|
|
|
+
|
|
|
+ deptList.value = handleTree(await DeptApi.getSimpleDeptList())
|
|
|
})
|
|
|
</script>
|
|
|
<style scoped scss>
|
|
|
@@ -643,4 +892,61 @@ onMounted(async () => {
|
|
|
border: none !important;
|
|
|
outline: none !important;
|
|
|
}
|
|
|
+
|
|
|
+::v-deep .el-table__header-wrapper {
|
|
|
+ position: sticky !important;
|
|
|
+ width: 100%;
|
|
|
+ top: 0px;
|
|
|
+ z-index: 2000;
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .el-tooltip__trigger {
|
|
|
+ border: none !important;
|
|
|
+ outline: none !important;
|
|
|
+}
|
|
|
+
|
|
|
+/* 表头对齐样式 */
|
|
|
+.table-header-flex {
|
|
|
+ display: flex !important;
|
|
|
+ align-items: center !important;
|
|
|
+ justify-content: center !important;
|
|
|
+ height: 100% !important;
|
|
|
+ width: 100% !important;
|
|
|
+ padding: 0 !important;
|
|
|
+}
|
|
|
+
|
|
|
+.table-header-text {
|
|
|
+ flex: 1;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #606266;
|
|
|
+}
|
|
|
+
|
|
|
+.header-arrow-icon {
|
|
|
+ margin-left: 4px;
|
|
|
+ cursor: pointer;
|
|
|
+ color: #ad9399;
|
|
|
+ font-size: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+.popover-content-flex {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 修复单元格对齐 */
|
|
|
+::v-deep .el-table th,
|
|
|
+::v-deep .el-table td {
|
|
|
+ padding: 6px 0 !important;
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .el-table th .cell,
|
|
|
+::v-deep .el-table td .cell {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ height: 100%;
|
|
|
+ padding: 0 8px;
|
|
|
+}
|
|
|
</style>
|
