环比，趋势

apps/web-antd/src/views/property/electricEnergy/electricityQOQ/index.vue

@@ -1,11 +1,72 @@
 <script setup lang="ts">
+import { Page, type VbenFormProps } from '@vben/common-ui';
+import {
+  useVbenVxeGrid,
+  type VxeGridProps
+} from '#/adapter/vxe-table';
+import {
+  paymentReviewList,
+} from '#/api/property/costManagement/paymentReview';
+import { columns, querySchema } from './data';
 
+const formOptions: VbenFormProps = {
+  commonConfig: {
+    labelWidth: 30,
+    componentProps: {
+      allowClear: true,
+    },
+  },
+  schema: querySchema(),
+  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
+};
+
+const gridOptions: VxeGridProps = {
+  checkboxConfig: {
+    highlight: true,
+    reserve: true,
+  },
+  columns,
+  height: 'auto',
+  keepSource: true,
+  pagerConfig: {},
+  proxyConfig: {
+    ajax: {
+      query: async ({ page }, formValues = {}) => {
+        return await paymentReviewList({
+          pageNum: page.currentPage,
+          pageSize: page.pageSize,
+          ...formValues,
+        });
+      },
+    },
+  },
+  rowConfig: {
+    keyField: 'id',
+  },
+  id: 'property-paymentReview-index'
+};
+
+const [BasicTable, tableApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+});
 </script>
 
 <template>
-
+  <div class="box">
+    <div class="left" style="background: red;margin: 16px 0 16px 16px"></div>
+    <div class="right">
+      <Page :auto-content-height="true">
+        <BasicTable table-title="用电环比分析列表"/>
+      </Page>
+    </div>
+  </div>
 </template>
 
 <style scoped lang="scss">
-
+.box{
+  display: grid;
+  grid-template-columns: 1fr 3fr;
+  gap: 30px;
+}
 </style>