Browse Source

设备界面优化

pull/1/head
ljlong_2630 1 year ago
parent
commit
4e0eb29245
  1. 19
      src/api/model/device.js
  2. 224
      src/views/model/device/index.vue

19
src/api/model/device.js

@ -66,4 +66,21 @@ export function getUuid(){
url: '/model/dcBaseDeviceinfo/getUuid',
method: 'post',
})
}
}
//获取字段筛选项
export function getfilterItem(){
return request({
url: '/model/dcBaseDeviceinfo/getfilterItem',
method: 'get',
})
}
//获取列表带筛选值
export function listWithFilterColumn(data){
return request({
url: '/model/dcBaseDeviceinfo/listWithFilterColumn',
method: 'post',
data: data
});
}

224
src/views/model/device/index.vue

@ -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>
Loading…
Cancel
Save