lianmei
/
dc-ui
mirror of https://gitee.com/lmlz_0/dc-ui.git
3
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

设备界面优化

pull/1/head
ljlong_2630 1 year ago
parent
3fbf000166
commit
4e0eb29245
2 changed files with 204 additions and 39 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 19
      src/api/model/device.js
  2. 224
      src/views/model/device/index.vue

19
src/api/model/device.js
View File

@ -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
View File

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