gx

src/view/sy.vue

@@ -180,7 +180,9 @@
             class="left_3_1_item"
             @click="showDialog('就业培训', '/api/ggfwyth/jypxList')"
           >
-            <div>{{ data.employmentService.jypx }}</div>
+            <div>
+              {{ data.employmentService.jypx }}<span>人</span>
+            </div>
             <div>就业培训</div>
             <div class="moveImg"></div>
           </div>
@@ -188,7 +190,7 @@
             class="left_3_1_item"
             @click="showDialog('就业见习服务', '/api/ggfwyth/jyjxfwList')"
           >
-            <div>{{ data.employmentService.jyjxfw }}</div>
+            <div>{{ data.employmentService.jyjxfw }}<span>次</span></div>
             <div>就业见习服务</div>
             <div class="moveImg"></div>
           </div>
@@ -196,7 +198,7 @@
             class="left_3_1_item"
             @click="showDialog('就业援助', '/api/ggfwyth/jyyzList')"
           >
-            <div>{{ data.employmentService.jyyz }}</div>
+            <div>{{ data.employmentService.jyyz }}<span>人</span></div>
             <div>就业援助</div>
             <div class="moveImg"></div>
           </div>
@@ -1075,7 +1077,7 @@ const data = reactive({
       name: "公共自行车",
       key1: "骑行次数",
       key1_value: "117231",
-      dw:"人次",
+      dw: "人次",
       key2: "骑行时长",
       key2_value: "1283时",
       img: ggjtimg,
@@ -1084,7 +1086,7 @@ const data = reactive({
       name: "电动单车",
       key1: "骑行次数",
       key1_value: "1172491",
-      dw:"人次",
+      dw: "人次",
       key2: "骑行时长",
       key2_value: "1283时",
       img: ggjtimg1,
@@ -1093,7 +1095,7 @@ const data = reactive({
       name: "公共汽车",
       key1: "公交线路",
       key1_value: "176",
-      dw:"条",
+      dw: "条",
       key2: "乘坐人次",
       key2_value: "239741人次",
       img: ggjtimg2,
@@ -1102,7 +1104,7 @@ const data = reactive({
       name: "长途汽车",
       key1: "班车次数",
       key1_value: "133",
-      dw:"次",
+      dw: "次",
       key2: "客流量",
       key2_value: "192874人次",
       img: ggjtimg3,
@@ -1111,7 +1113,7 @@ const data = reactive({
       name: "高铁",
       key1: "列车班次",
       key1_value: "23",
-      dw:"次",
+      dw: "次",
       key2: "客流量",
       key2_value: "113414人次",
       img: ggjtimg4,
@@ -2017,7 +2019,7 @@ onBeforeMount(async () => {
 }
 
 .last_1 {
-  background-image: url(@/assets/images/sy/new_jtsy.png);
+  background-image: url(@/assets/images/sy/jtcx.png);
   background-repeat: no-repeat;
   background-size: 100% 100%;
 }
@@ -2246,8 +2248,8 @@ onBeforeMount(async () => {
       margin-top: 15px;
 
       .sr {
-        display: flex;
+        // display: flex;
-        align-items: center;
+        // align-items: center;
 
         .left {
           font-weight: 400;

src/view/sy_details.vue

@@ -9,22 +9,22 @@
           </div>
         </div>
       </div>
-      <div style="width: 97.5%;position: relative">
+      <div style="width: 97.5%; position: relative">
         <div class="backgroundVirtual"></div>
         <el-table
           border
           :data="data.tableData"
-          style="width: 100%; height: 712px; margin-bottom: 20px"
+          style="width: 100%; height: 810px; margin-bottom: 20px"
-          max-height="820"
+          max-height="850px"
           class="table_border"
           :row-style="rowState"
           :header-cell-style="tableHeaderColor"
         >
-          <el-table-column prop="fullName" label="姓名" width="60" />
+          <el-table-column prop="xm" label="姓名" width="60" />
-          <el-table-column prop="address" label="地址" />
+          <el-table-column prop="dz" label="地址" />
-          <el-table-column prop="age" label="年龄" />
+          <el-table-column prop="nl" label="年龄" />
-          <el-table-column prop="IDNumber" label="身份证号" />
+          <el-table-column prop="sfzhm" label="身份证号" />
-          <el-table-column prop="PopulationLabel" label="人口标签" />
+          <el-table-column prop="bq" label="人口标签" />
         </el-table>
         <el-pagination
           background
@@ -33,8 +33,8 @@
           :total="pagination.total"
           prev-text="上一页"
           next-text="下一页"
-          @current-change="handle"
           v-model:current-page="pagination.currentPage"
+          @current-change="handlePagination"
         />
       </div>
     </div>
@@ -47,13 +47,13 @@
           </div>
         </div>
       </div>
-      <div style="width: 97.5%;position: relative">
+      <div style="width: 97.5%; position: relative">
         <div class="backgroundVirtual"></div>
         <el-table
           border
           :data="data.pagedData"
-          style="width: 100%; height: 712px; margin-bottom: 20px"
+          style="width: 100%; height: 810px; margin-bottom: 20px"
-          max-height="820"
+          max-height="850"
           class="table_border"
           :row-style="rowState"
           :header-cell-style="tableHeaderColor"
@@ -102,13 +102,13 @@
           </span>
         </div>
       </div>
-      <div style="width: 97.5%;position: relative">
+      <div style="width: 97.5%; position: relative">
         <div class="backgroundVirtual"></div>
         <el-table
           border
           :data="data.tableData2"
-          style="width: 100%; height: 712px; margin-bottom: 20px"
+          style="width: 100%; height: 810px; margin-bottom: 20px"
-          max-height="800"
+          max-height="850"
           class="table_border"
           :row-style="rowState"
           :header-cell-style="tableHeaderColor"
@@ -135,7 +135,8 @@
 </template>
 
 <script setup>
-import { ref, reactive,onMounted } from "vue";
+import { ref, reactive, onMounted } from "vue";
+import http from "@/utils/request.js";
 
 const data = reactive({
   pagedData: [],
@@ -663,16 +664,6 @@ const pagination2 = reactive({
   currentPage: 1,
 });
 //表格分页
-// const handlePagination = (current) => {
-//   console.log(current);
-//   pagination.currentPage = current;
-//   // getTable(tableType.url, pagination.currentPage);
-// };
-// //Tab切换分页
-// const handlePaginationTab = (current) => {
-//   pagination.currentPage = current;
-//   getTableTab(dataTab.url, pagination.currentPage);
-// };
 const handleSizeChange = (val) => {
   const startIndex = (val - 1) * 10;
   const endIndex = val * 10;
@@ -684,6 +675,11 @@ const handleCurrentChange = (val) => {
   const endIndex = val * 10;
   data.pagedData = data.tableData1.slice(startIndex, endIndex);
 };
+const handlePagination = (current) => {
+  // console.log(current,"page1");
+  pagination.currentPage = current;
+  getTable("/api/ggfwyth/ysyzt/lyxsdbrymd", pagination.currentPage);
+};
 // 服务表格样式
 const tableHeaderColor = (arg) => {
   return {
@@ -721,7 +717,20 @@ const rowState = (row) => {
 const change = (name, index) => {
   data.first = !data.first;
 };
+const getTable = async (url, currentPage) => {
+  await http
+    .get(`${url}?page=${currentPage}&size=${pagination.pageSize}`)
+    .then((res) => {
+      if (res.code == 200) {
+        data.tableData = res.data;
+        console.log(data.tableData);
+        pagination.total = res.count;
+      }
+    });
+};
+
 onMounted(() => {
+  getTable("/api/ggfwyth/ysyzt/lyxsdbrymd", pagination.currentPage);
   handleCurrentChange(1);
 });
 </script>
@@ -730,7 +739,7 @@ onMounted(() => {
 .module {
   width: 100%;
   height: 943px;
-  margin-top: 112px;
+  margin-top: 125px;
   display: flex;
   justify-content: space-between;
   padding: 10px 45px;
@@ -937,10 +946,9 @@ onMounted(() => {
     padding-left: 10px !important;
     text-align: center;
   }
-
+}
-  :deep(.el-table td.el-table__cell) {
+:deep(.el-table td.el-table__cell) {
-    padding-left: 10px;
+  padding: 13px 0px;
-  }
 }
 
 :deep(.el-table--enable-row-hover .el-table__body tr:hover > td) {
@@ -976,6 +984,15 @@ onMounted(() => {
   //   color: #ffffff;
   // }
 }
+:deep(.el-pagination.is-background .btn-prev) {
+  margin: 0;
+}
+:deep(.el-pagination.is-background .btn-next) {
+  margin: 0;
+}
+:deep(.el-pagination) {
+  justify-content: center;
+}
 
 .yd_title {
   box-sizing: border-box;

src/view/sy_table.vue

@@ -288,28 +288,28 @@ const data = reactive({
       name: "重特困人员救助供养",
       Bj: Bj1,
       text: "我县特困供养对象329户331人，2023年支出特困供养经费722.29万元。",
-      progress: 35, //进度条
+      progress: 95, //进度条
     },
     {
       id: "2",
       name: "医疗救助",
       Bj: Bj2,
       text: "我县医疗救助的对象为民攻部门认定的特困供养人员最低生活保障家庭成员、最低生活保障边缘家庭成员（包括纳入低保、低边的因病致贫等支出型贫困对象）。",
-      progress: 45, //进度条
+      progress: 95, //进度条
     },
     {
       id: "3",
       name: "临时救助",
       Bj: Bj3,
       text: "为数助对象发放临时救助金，2023年共救助609户1036人，数助225.39万元。",
-      progress: 100, //进度条
+      progress: 95, //进度条
     },
     {
       id: "4",
       name: "受灾人员救助",
       Bj: Bj4,
       text: "机构改革以来(2019年)，我县自然灾害形势总体平稳，未发生因灾亡人事故。",
-      progress: 25, //进度条
+      progress: 95, //进度条
     },
   ],
 });
@@ -434,7 +434,7 @@ const rowState = (row) => {
   .right_bg {
     width: 100%;
     height: 943px;
-    margin: 0 30px 30px 30px;
+    margin: 40px 30px 0px 30px;
     // background-color: pink;
     .formText {
       // .formText_top {
@@ -594,10 +594,12 @@ const rowState = (row) => {
     padding-left: 10px !important;
   }
 
-  :deep(.el-table td.el-table__cell) {
+
-    padding-left: 10px;
-  }
 }
+:deep(.el-table td.el-table__cell) {
+  padding: 12px 0px;
+}
+
 
 :deep(.el-table--enable-row-hover .el-table__body tr:hover > td) {
   background-color: #2f4b74;