Browse Source

增加分页

develop
fuguobin 1 year ago
parent
commit
05704fc7da
  1. 1
      src/api/device/types.ts
  2. 23
      src/api/table/list.ts
  3. 20
      src/views/monitoring/components/menu.vue
  4. 2
      src/views/monitoring/devicemanage/components/main.vue
  5. 51
      src/views/monitoring/screen/components/main.vue
  6. 29
      src/views/monitoring/screen/index.scss
  7. 4
      vite.config.ts

1
src/api/device/types.ts

@ -30,6 +30,7 @@ export interface deviceVo {
header_main?: headerVo[];
header_valve?: headerVo[];
header_pump?: headerVo[];
header_pumpx?: headerVo[];
}
export interface headerVo {
id: string;

23
src/api/table/list.ts

@ -32,15 +32,28 @@ export function getTableHeader(): AxiosPromise<[]> {
});
}
// /**
// * 获取表格数据
// *
// * @param id
// */
// export function getTableData(params: number): AxiosPromise<TableVo> {
// return request({
// url: '/bi/opt/getTableData/' + params,
// method: 'get'
// });
// }
/**
*
*
*
* @param id
* @param data
*/
export function getTableData(params: number): AxiosPromise<TableVo> {
export function getTableData(data: any) {
return request({
url: '/bi/opt/getTableData/' + params,
method: 'get'
url: '/bi/opt/getTableDataPage',
method: 'post',
data: data
});
}

20
src/views/monitoring/components/menu.vue

@ -59,12 +59,17 @@ function menuApi() {
//
getMenu().then((res: any) => {
if (res.code === 200) {
menuDeptKey.value = routerType.value === '1' ? deptId.value : getFirstNodeLastLevel(res.data).deptId;
menuDeptKey.value =
routerType.value === '1'
? deptId.value
: routerType.value === '0' && deptId.value != 0
? deptId.value
: getFirstNodeLastLevel(res.data).deptId;
removeChildren(res.data);
menuOptions.value = res.data;
selectedKey.value = menuDeptKey.value;
sessionStorageIns.setUseStorage('deptId', menuDeptKey.value);
mitt.emit(props.menuType === '1' ? 'menuKey' : 'deviceMenuKey', menuDeptKey.value);
mitt.emit('menuKey', menuDeptKey.value);
emit('tableMenuData', res.data);
}
});
@ -73,13 +78,18 @@ function comMenuApi() {
//
getMenuData().then((res: any) => {
if (res.code === 200) {
menuIdKey.value = routerType.value === '1' ? id.value : getFirstNodeLastLevel(res.data).deptId;
const parentId = routerType.value === '1' ? id.value : getFirstNodeLastLevel(res.data).parentId;
menuIdKey.value =
routerType.value === '1'
? id.value
: routerType.value === '0' && id.value != 0
? id.value
: getFirstNodeLastLevel(res.data).deptId;
const parentId = routerType.value === '1' ? deptId.value : getFirstNodeLastLevel(res.data).parentId;
removeChildren(res.data);
menuOptions.value = res.data;
selectedKey.value = menuIdKey.value;
sessionStorageIns.setUseStorage('deptId', routerType.value === '1' ? deptId.value : parentId);
mitt.emit(props.menuType === '1' ? 'menuKey' : 'deviceMenuKey', menuIdKey.value);
mitt.emit('deviceMenuKey', menuIdKey.value);
emit('tableMenuData', res.data);
}
});

2
src/views/monitoring/devicemanage/components/main.vue

@ -200,7 +200,7 @@
:key="index"
>
<div class="content pump">
<span v-for="(res, index) in item.header_pump" :key="index">
<span v-for="(res, index) in item.header_pumpx" :key="index">
<i>{{ res.label }} </i>
<i v-if="res.ctrlFlag === 0">{{ res.value }}{{ res.paramUnit }}</i>
<i v-if="res.ctrlFlag === 1">

51
src/views/monitoring/screen/components/main.vue

@ -49,6 +49,19 @@
<span class="name" @click.native="nameClick(row.deviceuuid)">{{ row.gTitle }}</span>
</div>
</template>
<template #pager>
<!--使用 pager 插槽-->
<vxe-pager
class="tablePage"
:layouts="['Sizes', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total']"
v-model:current-page="tablePage.currentPage"
v-model:page-size="tablePage.pageSize"
auto-hidden
:total="tablePage.total"
@page-change="handlePageChange"
>
</vxe-pager>
</template>
</vxe-grid>
<!-- <vxe-grid class="tableGrid" v-bind="gridOptions"> </vxe-grid> -->
</n-spin>
@ -110,7 +123,8 @@ import {
VxeFormInstance,
VxeFormPropTypes,
VxeFormEvents,
VxeTablePropTypes
VxeTablePropTypes,
VxePagerEvents
} from 'vxe-table';
import { getTableHeader, getStationInfo, getTableData, editConfig, sendCtrl } from '@/api/table/list';
import { TableVo } from '@/api/table/types';
@ -136,6 +150,12 @@ const cellRow = ref({});
const cellColumn = ref();
const cellField = ref();
const tableBorder = ref(true);
const tablePage = reactive({
total: 0,
currentPage: 1,
pageSize: 10
});
// const fields = ref(['deviceuuid']) //
// const waringArrow = ref([])
@ -182,7 +202,7 @@ const userInfo = JSON.parse(userStorageInfo === null ? '' : userStorageInfo);
//const baseApi = import.meta.env.VITE_APP_BASE_API
//const apiUrl = baseApi.replace(/https?:/, '');
const wsUrl = `ws://${window.location.host}/ws/websocket/${userInfo.userName}`; //websocket
// const wsUrl = `ws://10.10.10.56:9010/websocket/${userInfo.userName}`; //websocket
// const wsUrl = `ws://172.1.2.6:9010/websocket/${userInfo.userName}`; //websocket
const emit = defineEmits(['tableHeaderData']);
// const listData = ref([
@ -228,11 +248,16 @@ const headerData = ref<HeaderVo[]>();
onMounted(() => {
// stationInfo();
// tableHeader();
tablePage.currentPage =
sessionStorage.getItem('currentPage') === null ? 1 : Number(sessionStorage.getItem('currentPage'));
tablePage.pageSize = sessionStorage.getItem('pageSize') === null ? 10 : Number(sessionStorage.getItem('pageSize'));
socket.initialize(wsUrl); //websocket http://
});
mitt.on('menuKey', (res: any) => {
//
tablePage.currentPage = 1;
sessionStorageIns.setUseStorage('currentPage', 1);
menuKey.value = res;
tableHeader();
tableDatas();
@ -292,6 +317,14 @@ mitt.on('tableMessage', (res: any) => {
// console.log("waringArrow:", waringArrow.value)
});
const handlePageChange: VxePagerEvents.PageChange = ({ currentPage, pageSize }) => {
tablePage.currentPage = currentPage;
tablePage.pageSize = pageSize;
sessionStorageIns.setUseStorage('currentPage', currentPage);
sessionStorageIns.setUseStorage('pageSize', pageSize);
tableDatas();
};
function stationInfo() {
//
getStationInfo().then((res: any) => {
@ -361,13 +394,19 @@ function tableHeader() {
function tableDatas() {
//
const params = menuKey.value;
// const params = menuKey.value;
const params = {
pageNum: tablePage.currentPage,
pageSize: tablePage.pageSize,
orgCode: menuKey.value
};
loadingShow.value = true;
getTableData(params).then((res: any) => {
if (res.code === 200) {
// tableData.value=oldData
tableData.value = res.data;
tableStoreCounter.tableDataAction(res.data);
tableData.value = res.rows;
tableStoreCounter.tableDataAction(res.rows);
tablePage.total = res.total;
// gridOptions.data = res.data;
loadingShow.value = false;
}
@ -399,7 +438,7 @@ const cellDBLClickEvent: VxeTableEvents.CellDblclick<TableVo> = ({ row, column }
const formatRole: VxeColumnPropTypes.Formatter<HeaderVo> = ({ cellValue }) => {
//object
console.log(cellValue);
// console.log(cellValue);
// const iconFont=cellValue.changeProp===-1?'<i class="iconfont icon-decline" />':(cellValue.changeProp===1?'<i class="iconfont icon-rise" />':'<i/>')
// const cellData = `<span class="cellClass ${cellValue.alertProp===1?'warning':''}">${cellValue.val}</span>${iconFont}`;
// const cellData = `<span class="cellClass ${cellValue.alertProp === 1 ? 'warning' : cellValue.canBeControl === '1' ? 'cellEdit' : ''}">${cellValue.val}</span><i class="iconfont ${cellValue.changeProp === -1 ? 'icon-decline' : cellValue.changeProp === 1 ? 'icon-rise' : ''}" ></i>${cellValue.canBeControl === '1' ? '<i class="iconfont icon-edit-icon"></i>' : ''}`;

29
src/views/monitoring/screen/index.scss

@ -452,6 +452,35 @@
}
}
}
.tablePage {
--vxe-pager-background-color: none;
padding: 0 2rem;
color: #b1e3ff;
:deep(.vxe-select) {
.vxe-input--inner {
color: #b1e3ff;
border: 1px solid #b1e3ff;
background-color: transparent;
}
.vxe-select--panel {
color: #b1e3ff;
.vxe-select-option--wrapper {
border: 1px solid #b1e3ff;
background: -webkit-linear-gradient(top, #02072b 0%, #02082b 100%);
.vxe-select-option:not(.is--disabled).is--hover {
background: none;
}
}
}
}
:deep(.vxe-pager--jump) {
.vxe-pager--goto {
color: #b1e3ff;
border: 1px solid #b1e3ff;
background-color: transparent;
}
}
}
// /*滚动条整体部分*/
// .tableGrid ::-webkit-scrollbar {

4
vite.config.ts

@ -45,9 +45,9 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
hmr: true, //配置HMR
proxy: {
'/dev-api': {
target: 'http://172.1.2.6:9010/', //本地接口地址
// target: 'http://172.1.2.6:9010/', //本地接口地址
// target: 'http://172.1.2.158:9010/', //本地接口地址
// target: 'http://10.10.10.56:9010/', //线上测试接口地址
target: 'http://10.10.10.56:9010/', //线上测试接口地址
changeOrigin: true,
rewrite: path => path.replace(/^\/dev-api/, '')
}

Loading…
Cancel
Save