fix:提交

src/assets/no-data.svg

+<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 220 220" height="220px" width="220px">
+    <title>无数据</title>
+    <defs>
+        <linearGradient id="linearGradient-1" y2="208.881283%" x2="50%" y1="0%" x1="50%">
+            <stop offset="0%" stop-color="#FBFBFB"></stop>
+            <stop offset="100%" stop-color="#D3DDFF"></stop>
+        </linearGradient>
+        <linearGradient id="linearGradient-2" y2="69.5330218%" x2="64.1074764%" y1="0%" x1="4.61979528%">
+            <stop offset="0%" stop-color="#FBFBFB"></stop>
+            <stop offset="100%" stop-color="#D3DDFF"></stop>
+        </linearGradient>
+        <linearGradient id="linearGradient-3" y2="69.5330218%" x2="63.4436892%" y1="0%" x1="6.75503167%">
+            <stop offset="0%" stop-color="#FBFBFB"></stop>
+            <stop offset="100%" stop-color="#D3DDFF"></stop>
+        </linearGradient>
+        <linearGradient id="linearGradient-4" y2="69.5330218%" x2="64.1283532%" y1="0%" x1="4.55263997%">
+            <stop offset="0%" stop-color="#FBFBFB"></stop>
+            <stop offset="100%" stop-color="#D3DDFF"></stop>
+        </linearGradient>
+    </defs>
+    <g fill-rule="evenodd" fill="none" stroke-width="1" stroke="none" id="无数据">
+        <rect height="220" width="220" y="0" x="0" fill="#FFFFFF" fill-opacity="0" id="矩形"></rect>
+        <ellipse ry="19.6940299" rx="110" cy="192.30597" cx="110" fill="url(#linearGradient-1)" id="椭圆形"></ellipse>
+        <rect rx="8.0733945" height="127.256835" width="161.46789" y="69.5954631" x="29.266055" fill="#F6F6F6" stroke-width="4.03669725" stroke="#F2F2F2" id="矩形"></rect>
+        <path fill="#FFFFFF" stroke-width="4.03669725" stroke="#DFE7FF" id="矩形" d="M174.331666,82.7253368 C180.145779,82.7337817 187.590164,82.8448769 196.663906,83.0583851 C198.335496,83.0984781 199.832599,83.8123101 200.901787,84.9340172 C201.970965,86.055713 202.612236,87.5852773 202.572174,89.2568521 C202.566029,89.5132872 202.543595,89.7690701 202.505637,90.0210855 L202.505637,90.0210855 L187.258112,190.694034 C187.033942,192.174133 186.285739,193.461212 185.219333,194.378265 C184.152928,195.295319 182.76832,195.842348 181.271342,195.842348 L181.271342,195.842348 L29.5128345,195.842348 C27.941712,195.842348 26.5011259,195.241435 25.4195374,194.249196 C24.337949,193.256958 23.6153583,191.873394 23.4802267,190.308094 L23.4802267,190.308094 L16.9324105,114.461277 C16.7886517,112.795419 17.3337288,111.229002 18.3312102,110.043111 C19.3286948,108.857216 20.7785859,108.051851 22.44445,107.908101 C22.7069987,107.885446 22.9707466,107.879954 23.2340131,107.891685 C73.0944366,110.113445 106.067662,109.949978 122.158037,107.442241 C134.552668,105.510497 138.974546,101.269146 142.404446,96.650054 L142.692091,96.2588522 C142.977687,95.8668375 143.257603,95.4725138 143.536053,95.0770471 L143.953153,94.4831353 C144.052944,94.3408915 144.152806,94.1985322 144.252994,94.0561266 L144.554785,93.6288396 C147.385323,89.6408203 150.668882,85.6706474 159.955334,83.2358873 C161.595907,82.8847061 165.965599,82.7339952 173.051111,82.7251689 L173.051111,82.7251689 Z"></path>
+        <g fill-rule="nonzero" transform="translate(10.000000, 8.000000)" id="？">
+            <path fill="url(#linearGradient-2)" id="形状" d="M82.2662252,0 C73.8593113,0 67.2701085,2.36538462 62.3850098,7.09615385 C58.112551,11.7321423 55.663112,18.098838 55.036693,26.1962409 L55.036736,26.1962442 C54.7612504,29.757307 57.424737,32.8674438 60.9857997,33.1429294 C64.5468624,33.4184149 67.6569992,30.7549283 67.9324848,27.1938656 C67.9453236,27.0279053 67.9517501,26.8615111 67.9517501,26.6950549 C67.9517501,26.6950549 67.9517501,26.6950549 67.9517501,26.6950549 C67.9517501,21.9642857 68.8606057,18.2472527 70.7919238,15.6565934 C72.9504557,12.5027473 76.472271,11.0384615 81.4709766,11.0384615 C85.3336128,11.0384615 88.4010003,12.0521978 90.5595323,14.1923077 C92.6044573,16.3324176 93.7405267,19.260989 93.7405267,22.978022 C93.7405267,25.793956 92.7180642,28.4972527 90.6731392,30.9752747 L89.3098559,32.5521978 C81.9254044,39.0851648 77.4947335,43.8159341 76.0178432,46.8571429 C73.7457043,50.5741758 70.8302693,56.0647174 73.7457043,59.4725275 C76.6611394,62.8803375 84.012692,61.1582252 86.8105031,59.4725275 C89.6083141,57.7868297 86.8105031,53.0562915 88.5146072,50.5741758 C90.2187114,48.0920602 91.01396,46.6318681 93.0588851,44.9423077 C98.5120184,40.2115385 101.80662,37.1703297 102.829082,36.043956 C105.555649,32.4395604 107.032539,27.8214286 107.032539,22.1895604 C107.032539,15.3186813 104.7604,9.91208791 100.216123,5.96978022 C95.6718448,1.91483516 89.6506767,0 82.2662252,0 Z M80.2213002,64.9917582 C77.7219474,64.9917582 75.6770224,65.7802198 73.9729182,67.3571429 C72.268814,68.9340659 71.4735654,70.9615385 71.4735654,73.4395604 C71.4735654,75.9175824 72.268814,77.9450549 73.9729182,79.521978 C75.6770224,81.0989011 77.7219474,82 80.2213002,82 C82.720653,82 84.765578,81.2115385 86.4696822,79.6346154 C88.1737864,78.0576923 89.082642,75.9175824 89.082642,73.4395604 C89.082642,70.9615385 88.1737864,68.9340659 86.5832892,67.3571429 C84.879185,65.7802198 82.720653,64.9917582 80.2213002,64.9917582 Z"></path>
+            <path transform="translate(20.423770, 57.472031) rotate(-24.000000) translate(-20.423770, -57.472031)" fill="url(#linearGradient-3)" id="形状" d="M21.0447149,36.472031 C16.8413085,36.472031 13.5467467,37.6835694 11.1042267,40.1066464 C8.9656825,42.4837787 7.74063569,45.7493144 7.42908634,49.9032534 L7.42903787,49.9032498 C7.29546332,51.6842213 8.63094245,53.2362676 10.411914,53.3698421 C12.1928855,53.5034167 13.7449318,52.1679375 13.8785063,50.386966 C13.8845423,50.3064879 13.8875634,50.225812 13.8875634,50.1451079 C13.8875634,50.1451079 13.8875634,50.1451079 13.8875634,50.1451079 C13.8875634,47.722031 14.3419857,45.8181848 15.3076332,44.4912617 C16.3868861,42.8758771 18.1477726,42.1258771 20.6470953,42.1258771 C22.5783902,42.1258771 24.1120655,42.6451079 25.1913185,43.7412617 C26.2137687,44.8374156 26.7817966,46.3374156 26.7817966,48.2412617 C26.7817966,49.6835694 26.2705715,51.0681848 25.2481213,52.3374156 L24.5664878,53.1451079 C20.8743065,56.4912617 18.6589977,58.9143387 17.9205615,60.472031 C16.7845057,62.3758771 15.3268057,65.1881058 16.7845057,66.9335694 C18.2422057,68.6790331 21.9179377,67.7969756 23.3168264,66.9335694 C24.7157151,66.0701633 23.3168264,63.6472046 24.1688683,62.3758771 C25.0209101,61.1045496 25.4185296,60.3566464 26.4409798,59.4912617 C29.1675137,57.0681848 30.8147946,55.5104925 31.3260197,54.9335694 C32.6892867,53.0874156 33.4277229,50.722031 33.4277229,47.8374156 C33.4277229,44.3181848 32.2916671,41.548954 30.0195556,39.5297233 C27.747444,37.4528002 24.7368962,36.472031 21.0447149,36.472031 Z M20.0222647,69.7604925 C18.7726033,69.7604925 17.7501531,70.1643387 16.8981113,70.972031 C16.0460694,71.7797233 15.6484499,72.8181848 15.6484499,74.0874156 C15.6484499,75.3566464 16.0460694,76.3951079 16.8981113,77.2028002 C17.7501531,78.0104925 18.7726033,78.472031 20.0222647,78.472031 C21.271926,78.472031 22.2943762,78.0681848 23.1464181,77.2604925 C23.9984599,76.4528002 24.4528822,75.3566464 24.4528822,74.0874156 C24.4528822,72.8181848 23.9984599,71.7797233 23.2032209,70.972031 C22.351179,70.1643387 21.271926,69.7604925 20.0222647,69.7604925 Z"></path>
+            <path transform="translate(169.938823, 48.052038) rotate(45.000000) translate(-169.938823, -48.052038)" fill="url(#linearGradient-4)" id="形状" d="M170.726632,22.0520382 C165.391433,22.0520382 161.20979,23.5520382 158.109606,26.5520382 C155.398312,29.4918304 153.843862,33.5290673 153.446256,38.6637491 L153.446271,38.6637503 C153.271274,40.9236588 154.96143,42.8975394 157.221338,43.072536 C159.481247,43.2475326 161.455127,41.5573776 161.630124,39.297469 C161.638287,39.1920464 161.642374,39.0863478 161.642374,38.9806096 C161.642374,38.9806096 161.642374,38.9806096 161.642374,38.9806096 C161.642374,35.9806096 162.219152,33.6234668 163.444806,31.9806096 C164.814654,29.9806096 167.04967,29.0520382 170.221951,29.0520382 C172.673259,29.0520382 174.619885,29.6948953 175.989734,31.0520382 C177.287485,32.4091811 178.008458,34.2663239 178.008458,36.6234668 C178.008458,38.4091811 177.359582,40.1234668 176.061831,41.6948953 L175.196664,42.6948953 C170.51034,46.8377525 167.698546,49.8377525 166.761281,51.7663239 C165.319335,54.1234668 163.469141,57.6052736 165.319335,59.7663239 C167.16953,61.9273742 171.834975,60.835303 173.610523,59.7663239 C175.386071,58.6973448 173.610523,55.6974913 174.691983,54.1234668 C175.773442,52.5494422 176.278123,51.6234668 177.575874,50.5520382 C181.036544,47.5520382 183.127365,45.6234668 183.776241,44.9091811 C185.506576,42.6234668 186.443841,39.6948953 186.443841,36.1234668 C186.443841,31.7663239 185.001895,28.3377525 182.118003,25.8377525 C179.234112,23.2663239 175.412956,22.0520382 170.726632,22.0520382 Z M169.428881,63.2663239 C167.84274,63.2663239 166.544989,63.7663239 165.46353,64.7663239 C164.38207,65.7663239 163.877389,67.0520382 163.877389,68.6234668 C163.877389,70.1948953 164.38207,71.4806096 165.46353,72.4806096 C166.544989,73.4806096 167.84274,74.0520382 169.428881,74.0520382 C171.015021,74.0520382 172.312772,73.5520382 173.394231,72.5520382 C174.475691,71.5520382 175.052469,70.1948953 175.052469,68.6234668 C175.052469,67.0520382 174.475691,65.7663239 173.466329,64.7663239 C172.384869,63.7663239 171.015021,63.2663239 169.428881,63.2663239 Z"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

src/components/ag-grid/NoRowsOverlayComponent.vue

+<!--
+ * Ag Grid 没有行数据时的渲染组件
+  -->
+<script setup lang="ts">
+defineProps<{
+  params: any;
+}>();
+</script>
+<template>
+  <div class="my-ag-grid-no-rows-component">
+    <div class="my-ag-grid-no-rows-component-content">
+      <div class="my-ag-grid-no-rows-component-img" v-if="!params.dense"></div>
+      <div :class="{ 'my-ag-grid-no-rows-component-text': !params.dense }">
+        {{ params.noRowsMessageFunc ? params.noRowsMessageFunc() : '暂无数据' }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+.my-ag-grid-no-rows-component {
+  width: 100%;
+  height: 100%;
+  position: relative;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  align-items: center;
+
+  .my-ag-grid-no-rows-component-content {
+    width: 100%;
+    height: calc(100% - 50px);
+    box-sizing: border-box;
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .my-ag-grid-no-rows-component-img {
+      width: 100%;
+      height: 100px;
+      box-sizing: border-box;
+      background: url('../../assets/no-data.svg');
+      background-size: contain;
+      background-repeat: no-repeat;
+      background-position: center;
+    }
+    .my-ag-grid-no-rows-component-text {
+      position: absolute;
+      height: 40px;
+      width: 100px;
+      text-align: center;
+      line-height: 40px;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50px, 38px);
+      box-sizing: border-box;
+      color: rgba(0, 0, 0, 0.45);
+    }
+  }
+}
+</style>
+<style lang="scss" scoped></style>

src/components/index.ts

@@ -6,6 +6,7 @@ import CanvasStaticRoute from './canvas-static-route/CanvasStaticRoute.vue';
 import ChartCarouselWarp from './chart-carousel-warp/ChartCarouselWarp.vue';
 import TitlePage from './title-page/TitlePage.vue';
 import UpLoader from './uploader-page/UpLoader.vue';
+import AgGridNoRowsComponent from './ag-grid/NoRowsOverlayComponent.vue';
 
 export {
   DateTimePick as ComDateTimePick,
@@ -16,6 +17,7 @@ export {
   ChartCarouselWarp as ComChartCarouselWarp,
   TitlePage as ComTitlePage,
   UpLoader as ComUpLoader,
+  AgGridNoRowsComponent as ComAgGridNoRowsComponent,
 };
 
 export default {
@@ -27,4 +29,5 @@ export default {
   ChartCarouselWarp,
   TitlePage,
   UpLoader,
+  AgGridNoRowsComponent,
 };

src/css/app.scss

-// app global css in SCSS form
-
 a:link {
   color: $primary;
 } /* 未访问的链接 */
@@ -76,3 +74,24 @@ a:hover {
     }
   }
 }
+
+.ag-theme-alpine {
+  --ag-alpine-active-color: #a39391 !important;
+  .ag-header {
+    background-color: #e79686;
+  }
+  .ag-cell-label-container {
+    color: #716e77;
+  }
+  .ag-center-cols-viewport {
+    background-color: #716e77;
+  }
+  .ag-center-cols-container {
+    background-color: #716e77;
+    .ag-row {
+      background-color: #716e77;
+      border-bottom: 1px solid #716e77;
+      color: #e79686;
+    }
+  }
+}

src/modules/page9/element/AgGridDetailGrids.vue

@@ -5,6 +5,7 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted } from 'vue';
 import { AgGridVue } from 'ag-grid-vue3';
+import Com from 'src/components';
 import 'ag-grid-enterprise';
 import 'ag-grid-community/styles/ag-grid.css';
 import 'ag-grid-community/styles/ag-theme-alpine.css';
@@ -36,13 +37,22 @@ const detailCellRendererParams = reactive({
     enableRangeSelection: true, // 启用范围选择
     pagination: true,
     paginationAutoPageSize: true,
+    noRowsOverlayComponent: Com.AgGridNoRowsComponent,
+    noRowsOverlayComponentParams: {
+      dense: true,
+    },
   },
   // 获得每个细节网格的行数
   getDetailRowData: (params: any) => {
-    params.successCallback(params.data.callRecords || []);
+    // params.successCallback(params.data.callRecords || []);
+    params.successCallback([]);
   },
 });
 
+const noRowsOverlayComponentParams = reactive({
+  noRowsMessageFunc: () => '没有数据啦',
+});
+
 const state = reactive({
   columnDefs: [
     { field: 'name', headerName: '姓名', cellRenderer: 'agGroupCellRenderer' },
@@ -58,14 +68,15 @@ const state = reactive({
 });
 
 onMounted(() => {
+  setTimeout(() => {
     fetch('https://www.ag-grid.com/example-assets/master-detail-data.json')
       .then((result) => result.json())
       .then((remoteRowData) => {
-      state.rowData = remoteRowData;
-      console.log('rowData', state.rowData[0]);
+        let arr = [...remoteRowData];
+        state.rowData = remoteRowData.concat(arr);
+        console.log('rowData', remoteRowData[0]);
       });
-
-  // .then((remoteRowData) => (state.rowData = remoteRowData));
+  }, 3000);
 });
 
 function onGridReady(params: any) {
@@ -90,11 +101,12 @@ function isRowMaster(dataItem: any) {
         animateRows=true：启用行动画
         :masterDetail="true" 启用展开的细节网格行
         :isRowMaster="isRowMaster" 确定哪一个行该展开
+        :noRowsOverlayComponentParams="noRowsOverlayComponentParams"
      -->
 
     <div>
       <ag-grid-vue
-        style="height: 700px"
+        style="height: 500px"
         class="ag-theme-alpine"
         :columnDefs="state.columnDefs"
         :rowData="state.rowData"
@@ -103,6 +115,10 @@ function isRowMaster(dataItem: any) {
         :masterDetail="true"
         :isRowMaster="isRowMaster"
         :detailCellRendererParams="detailCellRendererParams"
+        :noRowsOverlayComponent="Com.AgGridNoRowsComponent"
+        :noRowsOverlayComponentParams="noRowsOverlayComponentParams"
+        :pagination="true"
+        :paginationPageSize="5"
         @grid-ready="onGridReady"
       >
       </ag-grid-vue>