增加分页

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;

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,
+    url: '/bi/opt/getTableDataPage',
-    method: 'get'
+    method: 'post',
+    data: data
   });
 }
 

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;
+      menuIdKey.value =
-      const parentId = routerType.value === '1' ? id.value : getFirstNodeLastLevel(res.data).parentId;
+        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);
     }
   });

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">

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;
+      tableData.value = res.rows;
-      tableStoreCounter.tableDataAction(res.data);
+      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>' : ''}`;

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 {

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/, '')
         }