|
|
@ -1,6 +1,6 @@ |
|
|
|
<template> |
|
|
|
<div class="app-container"> |
|
|
|
<el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="120px"> |
|
|
|
<el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="100px" class="my-custom-form"> |
|
|
|
<el-row> |
|
|
|
<el-col :span="4"> |
|
|
|
<el-form-item label="中台设备编码" prop="centerDeviceCode"> |
|
|
@ -160,8 +160,8 @@ |
|
|
|
</el-form-item> |
|
|
|
</el-col> |
|
|
|
<el-col :span="4" v-show="collapseVisible"> |
|
|
|
<el-form-item label="设备分组" prop="deviceGroupId"> |
|
|
|
<el-select v-model="queryParams.deviceGroupId" placeholder="请选择设备分组ID" clearable> |
|
|
|
<el-form-item label="设备分组" prop="deviceGroupName"> |
|
|
|
<el-select v-model="queryParams.deviceGroupName" placeholder="请选择设备分组ID" clearable> |
|
|
|
<el-option label="请添加设备分组" value="" /> |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
@ -212,39 +212,46 @@ |
|
|
|
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"> |
|
|
|
</right-toolbar> |
|
|
|
</el-row> |
|
|
|
<el-table v-loading="loading" :data="deviceList" @selection-change="handleSelectionChange" :max-height="tableHeight" :border="true" :column-width-draggable="true"> |
|
|
|
<el-table ref="deviceTable" v-loading="loading" :data="deviceList" @selection-change="handleSelectionChange" @sort-change="sortChange" @filter-change="filterChange" :max-height="tableHeight" :border="true" :column-width-draggable="true"> |
|
|
|
<el-table-column type="selection" width="55" align="center" fixed="left"/> |
|
|
|
<el-table-column label="中台设备编码" align="center" prop="centerDeviceCode" :width="120"/> |
|
|
|
<el-table-column label="设备名称" align="center" prop="deviceName" :width="120"/> |
|
|
|
<el-table-column label="通讯来源类型" align="center" prop="deviceSource" :width="120"/> |
|
|
|
<el-table-column label="是否可用" align="center" prop="enabledFlag" :width="120"> |
|
|
|
<el-table-column label="中台设备编码" align="center" prop="centerDeviceCode" :width="150"/> |
|
|
|
<el-table-column label="设备名称" align="center" prop="deviceName" :width="120" sortable/> |
|
|
|
<el-table-column label="通讯来源类型" align="center" prop="deviceSource" :width="150" column-key="deviceSource" filter-placement="bottom-end" |
|
|
|
:filters="getfilterNameItem('deviceSource')" :filter-method="filterMethod" sortable/> |
|
|
|
<el-table-column label="是否可用" align="center" prop="enabledFlag" :width="120" column-key="enabledFlag" filter-placement="bottom-end" |
|
|
|
:filters="getfilterNameItem('enabledFlag')" :filter-method="filterMethod" sortable> |
|
|
|
<template #default="scope"> |
|
|
|
<dict-tag :options="enabledFlagTable" :value="scope.row.enabledFlag"/> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column label="设备类型" align="center" prop="deviceType" :width="120"> |
|
|
|
<el-table-column label="设备类型" align="center" prop="deviceType" :width="120" column-key="deviceType" filter-placement="bottom-end" |
|
|
|
:filters="getfilterNameItem('deviceType')" :filter-method="filterMethod" sortable> |
|
|
|
<template #default="scope"> |
|
|
|
<dict-tag :options="dc_device_type" :value="scope.row.deviceType"/> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column label="所属组织名称" align="center" prop="orgName" :width="120" /> |
|
|
|
<el-table-column label="位置编码" align="center" prop="locationCode" :width="120"/> |
|
|
|
<el-table-column label="位置名称" align="center" prop="locationName" :width="120"/> |
|
|
|
<el-table-column label="设备应用范围" align="center" prop="deviceClass" :width="120"/> |
|
|
|
<el-table-column label="接口名称" align="center" prop="apiName" :width="120"/> |
|
|
|
<el-table-column label="服务器地址" align="center" prop="serverIp" :width="120"/> |
|
|
|
<el-table-column label="从属网关ID" align="center" prop="gatewayId" :width="120"/> |
|
|
|
<el-table-column label="纬度" align="center" prop="latValue" :width="120"/> |
|
|
|
<el-table-column label="经度" align="center" prop="lagValue" :width="120"/> |
|
|
|
<el-table-column label="是否告警" align="center" prop="alertEnabled" :width="120"> |
|
|
|
<el-table-column label="所属组织名称" align="center" prop="orgName" :width="150" sortable/> |
|
|
|
<el-table-column label="位置编码" align="center" prop="locationCode" :width="120" sortable/> |
|
|
|
<el-table-column label="位置名称" align="center" prop="locationName" :width="120" sortable/> |
|
|
|
<el-table-column label="设备应用范围" align="center" prop="deviceClass" :width="150" sortable/> |
|
|
|
<el-table-column label="接口名称" align="center" prop="apiName" :width="120" sortable/> |
|
|
|
<el-table-column label="服务器地址" align="center" prop="serverIp" :width="120" sortable/> |
|
|
|
<el-table-column label="从属网关ID" align="center" prop="gatewayId" :width="120" sortable/> |
|
|
|
<el-table-column label="纬度" align="center" prop="latValue" :width="120" sortable/> |
|
|
|
<el-table-column label="经度" align="center" prop="lagValue" :width="120" sortable/> |
|
|
|
<el-table-column label="是否告警" align="center" prop="alertEnabled" :width="120" column-key="alertEnabled" filter-placement="bottom-end" |
|
|
|
:filters="getfilterNameItem('alertEnabled')" :filter-method="filterMethod" sortable> |
|
|
|
<template #default="scope"> |
|
|
|
<dict-tag :options="alertEnabledTable" :value="scope.row.alertEnabled"/> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column label="设备模型" align="center" prop="deviceModelId" :width="120"> |
|
|
|
<el-table-column label="设备模型" align="center" prop="deviceModelId" :width="120" column-key="deviceModelId" filter-placement="bottom-end" |
|
|
|
:filters="getfilterNameItem('deviceModelId')" :filter-method="filterMethod" sortable> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column label="租户号" align="center" prop="tentantId" :width="120"/> |
|
|
|
<el-table-column label="设备分组" align="center" prop="deviceGroupId" :width="120"/> |
|
|
|
<el-table-column label="租户号" align="center" prop="tentantId" :width="120" sortable/> |
|
|
|
<el-table-column label="设备分组" align="center" prop="deviceGroupName" :width="120" column-key="deviceGroupName" filter-placement="bottom-end" |
|
|
|
:filters="getfilterNameItem('deviceGroupName')" :filter-method="filterMethod" sortable/> |
|
|
|
<el-table-column label="设备排序" align="center" prop="sort" :width="120" sortable/> |
|
|
|
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" :width="300" :fixed="fixedColumns?'right':false"> |
|
|
|
<template #header> |
|
|
|
<div class="fixed-column-header" style="text-align: center;display: block;" @dblclick="toggleFixedColumns"> |
|
|
@ -273,8 +280,8 @@ |
|
|
|
<pagination |
|
|
|
v-show="total>0" |
|
|
|
:total="total" |
|
|
|
v-model:page="queryParams.pageNum" |
|
|
|
v-model:limit="queryParams.pageSize" |
|
|
|
v-model:page="params.pageNum" |
|
|
|
v-model:limit="params.pageSize" |
|
|
|
@pagination="getList" |
|
|
|
/> |
|
|
|
|
|
|
@ -328,7 +335,7 @@ |
|
|
|
</el-col> |
|
|
|
<el-col :span="12"> |
|
|
|
<el-form-item label="设备类型" prop="deviceType"> |
|
|
|
<el-select v-model="form.deviceTypeId" placeholder="请选择设备类型"> |
|
|
|
<el-select v-model="form.deviceType" placeholder="请选择设备类型"> |
|
|
|
<el-option |
|
|
|
v-for="dict in dc_device_type" |
|
|
|
:key="dict.value" |
|
|
@ -415,12 +422,17 @@ |
|
|
|
</el-form-item> |
|
|
|
</el-col> |
|
|
|
<el-col :span="12"> |
|
|
|
<el-form-item label="设备分组" prop="deviceGroupId"> |
|
|
|
<el-select v-model="form.deviceGroupId" placeholder="请选择设备分组ID"> |
|
|
|
<el-form-item label="设备分组" prop="deviceGroupName"> |
|
|
|
<el-select v-model="form.deviceGroupName" placeholder="请选择设备分组ID"> |
|
|
|
<el-option label="请选择字典生成" value="" /> |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
|
</el-col> |
|
|
|
<el-col :span="12"> |
|
|
|
<el-form-item label="设备排序" prop="sort"> |
|
|
|
<el-input v-model="form.sort" placeholder="请输入租户号" /> |
|
|
|
</el-form-item> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
</el-form> |
|
|
|
<template #footer> |
|
|
@ -447,9 +459,16 @@ |
|
|
|
margin-right: 5px; |
|
|
|
} |
|
|
|
} |
|
|
|
.my-custom-form .el-form-item { |
|
|
|
.el-select{ |
|
|
|
width:100%; |
|
|
|
} |
|
|
|
margin-right: 0 !important; |
|
|
|
width: 96%; |
|
|
|
} |
|
|
|
</style> |
|
|
|
<script setup name="Device"> |
|
|
|
import { getUuid, listDevice, getDevice, delDevice, addDevice, updateDevice } from "@/api/model/device"; |
|
|
|
import { getUuid, listDevice, getDevice, delDevice, addDevice, updateDevice, listWithFilterColumn } from "@/api/model/device"; |
|
|
|
import { deptTreeSelect } from "@/api/system/user"; |
|
|
|
import lock from "@/assets/icons/svg/lock.svg"; |
|
|
|
import { ref,onMounted,onUnmounted } from "vue"; |
|
|
@ -471,7 +490,10 @@ const deptOptions = ref([]); |
|
|
|
const disabled = ref(false); |
|
|
|
const fixedColumns = ref(true); |
|
|
|
const tableHeight = ref("0px"); |
|
|
|
const pageSize = ref(10); |
|
|
|
const sortItemMap = ref({}); |
|
|
|
const queryParamFilter = ref({}); |
|
|
|
const sortProps = ref([]); |
|
|
|
|
|
|
|
const enabledFlag = ref([ |
|
|
|
{label: '可用', value: true, elTagType: 'default', elTagClass: null}, |
|
|
|
{label: '不可用', value: false, elTagType: 'default', elTagClass: null} |
|
|
@ -491,9 +513,11 @@ const alertEnabledTable = ref([ |
|
|
|
|
|
|
|
const data = reactive({ |
|
|
|
form: {}, |
|
|
|
queryParams: { |
|
|
|
params: { |
|
|
|
pageNum: 1, |
|
|
|
pageSize: 10, |
|
|
|
}, |
|
|
|
queryParams: { |
|
|
|
centerDeviceCode: null, |
|
|
|
deviceName: null, |
|
|
|
deviceSource: null, |
|
|
@ -514,7 +538,7 @@ const data = reactive({ |
|
|
|
alertEnabled: null, |
|
|
|
deviceModelId: null, |
|
|
|
tentantId: null, |
|
|
|
deviceGroupId: null |
|
|
|
deviceGroupName: null |
|
|
|
}, |
|
|
|
rules: { |
|
|
|
deviceName: [ |
|
|
@ -541,14 +565,23 @@ const data = reactive({ |
|
|
|
} |
|
|
|
}); |
|
|
|
|
|
|
|
const { queryParams, form, rules } = toRefs(data); |
|
|
|
const { queryParams, form, rules, params } = toRefs(data); |
|
|
|
|
|
|
|
/** 查询设备信息列表 */ |
|
|
|
function getList() { |
|
|
|
loading.value = true; |
|
|
|
listDevice(queryParams.value).then(response => { |
|
|
|
deviceList.value = response.rows; |
|
|
|
total.value = response.total; |
|
|
|
let param = { |
|
|
|
"obj":queryParams.value, |
|
|
|
"params":queryParamFilter.value, |
|
|
|
"sort":sortProps.value, |
|
|
|
"pageNum": params.value.pageNum, |
|
|
|
"pageSize": params.value.pageSize, |
|
|
|
} |
|
|
|
listWithFilterColumn(param).then(response => { |
|
|
|
deviceList.value = response.data.tableData.rows; |
|
|
|
total.value = response.data.tableData.total; |
|
|
|
sortItemMap.value = response.data.filter; |
|
|
|
queryParamFilter.value = new Object(); |
|
|
|
loading.value = false; |
|
|
|
}); |
|
|
|
} |
|
|
@ -592,20 +625,24 @@ function reset() { |
|
|
|
deleteBy: null, |
|
|
|
deleteTime: null, |
|
|
|
id: null, |
|
|
|
deviceGroupId: null |
|
|
|
deviceGroupName: null |
|
|
|
}; |
|
|
|
proxy.resetForm("deviceRef"); |
|
|
|
} |
|
|
|
|
|
|
|
/** 搜索按钮操作 */ |
|
|
|
function handleQuery() { |
|
|
|
queryParams.value.pageNum = 1; |
|
|
|
params.value.pageNum = 1; |
|
|
|
getList(); |
|
|
|
} |
|
|
|
|
|
|
|
/** 重置按钮操作 */ |
|
|
|
function resetQuery() { |
|
|
|
proxy.resetForm("queryRef"); |
|
|
|
proxy.$refs.deviceTable.clearSort(); |
|
|
|
proxy.$refs.deviceTable.clearFilter(); |
|
|
|
queryParamFilter.value = new Object(); |
|
|
|
sortProps.value = new Array(); |
|
|
|
handleQuery(); |
|
|
|
} |
|
|
|
|
|
|
@ -768,6 +805,117 @@ const calculateTableHeight = () => { |
|
|
|
}); |
|
|
|
}; |
|
|
|
|
|
|
|
function getfilterNameItem(value){ |
|
|
|
console.log("sortItemMap"); |
|
|
|
console.log(sortItemMap); |
|
|
|
let result = ''; |
|
|
|
let resultItem = new Object(); |
|
|
|
if(value==='enabledFlag'){ |
|
|
|
if(sortItemMap.value[value]?.length>0){ |
|
|
|
result = sortItemMap.value[value].map(element=>{ |
|
|
|
enabledFlag.value.forEach(item=>{ |
|
|
|
if(item.value===element.text){ |
|
|
|
resultItem = item.label; |
|
|
|
} |
|
|
|
}); |
|
|
|
return { |
|
|
|
text: resultItem, |
|
|
|
value: element.value, |
|
|
|
}; |
|
|
|
}); |
|
|
|
} |
|
|
|
}else if(value==='alertEnabled'){ |
|
|
|
if(sortItemMap.value[value]?.length>0){ |
|
|
|
result = sortItemMap.value[value].map(element=>{ |
|
|
|
alertEnabled.value.forEach(item=>{ |
|
|
|
if(item.value===element.text){ |
|
|
|
resultItem = item.label; |
|
|
|
} |
|
|
|
}); |
|
|
|
return { |
|
|
|
text: resultItem, |
|
|
|
value: element.value, |
|
|
|
}; |
|
|
|
}); |
|
|
|
} |
|
|
|
}else if(value==='deviceType'){ |
|
|
|
if(sortItemMap.value[value]?.length>0){ |
|
|
|
result = sortItemMap.value[value].map(element=>{ |
|
|
|
dc_device_type.value.forEach(item=>{ |
|
|
|
if(item.value===String(element.text)){ |
|
|
|
resultItem = item.label; |
|
|
|
} |
|
|
|
}); |
|
|
|
return { |
|
|
|
text: resultItem, |
|
|
|
value: element.value, |
|
|
|
}; |
|
|
|
}); |
|
|
|
} |
|
|
|
}else{ |
|
|
|
result = sortItemMap.value[value]; |
|
|
|
} |
|
|
|
return result; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
function filterChange(filterItem) { |
|
|
|
const outerObjectKeys = Object.keys(filterItem); |
|
|
|
if(outerObjectKeys.length===1){ |
|
|
|
queryParamFilter.value[outerObjectKeys[0]] = filterItem[outerObjectKeys[0]]; |
|
|
|
} |
|
|
|
|
|
|
|
loading.value = true; |
|
|
|
let param = { |
|
|
|
"obj":queryParams.value, |
|
|
|
"params":queryParamFilter.value, |
|
|
|
"sort":sortProps.value, |
|
|
|
"pageNum": params.value.pageNum, |
|
|
|
"pageSize": params.value.pageSize, |
|
|
|
} |
|
|
|
listWithFilterColumn(param).then(response => { |
|
|
|
deviceList.value = response.data.tableData.rows; |
|
|
|
total.value = response.data.tableData.total; |
|
|
|
sortItemMap.value = response.data.filter; |
|
|
|
queryParamFilter.value = new Object(); |
|
|
|
loading.value = false; |
|
|
|
}); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
function filterMethod(value, row, column){ |
|
|
|
if(column==null){ |
|
|
|
return; |
|
|
|
} |
|
|
|
if(queryParamFilter.value[column.property] == null || queryParamFilter.value[column.property].length==0){ |
|
|
|
queryParamFilter.value[column.property]=[]; |
|
|
|
queryParamFilter.value[column.property].push(value); |
|
|
|
}else{ |
|
|
|
let flag = false; |
|
|
|
queryParamFilter.value[column.property].forEach(item=>{ |
|
|
|
if(item==value){ |
|
|
|
flag = true; |
|
|
|
} |
|
|
|
}) |
|
|
|
if(!flag){ |
|
|
|
queryParamFilter.value[column.property].push(value); |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
function sortChange({column, prop, order }){ |
|
|
|
if(column==null){ |
|
|
|
return; |
|
|
|
} |
|
|
|
sortProps.value = sortProps.value.filter(item => item.prop !== prop); |
|
|
|
if(order!=null){ |
|
|
|
sortProps.value.push({prop:prop,order:order}); |
|
|
|
} |
|
|
|
getList(); |
|
|
|
} |
|
|
|
|
|
|
|
getDeptTree(); |
|
|
|
getList(); |
|
|
|
</script> |
|
|
|
</script> |