gx

src/view/dialog/dialogRW.vue

@@ -0,0 +1,385 @@
+<template>
+  <div class="dialogPage">
+    <el-dialog
+      v-model="dialogShow"
+      width="80vw"
+      :show-close="false"
+      center
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+    >
+      <template #header="{ close, titleId, titleClass }">
+        <div class="my-header">
+          <el-icon size="26" color="#fff" @click="closeDialog">
+            <CircleCloseFilled />
+          </el-icon>
+        </div>
+      </template>
+
+      <div class="tabelPart">
+        <div class="bo">
+          <div class="title">
+            <div class="title_top">
+              <img
+                src="@/assets/images/table_l.png"
+                alt=""
+                style="margin-right: 10px"
+              />
+              <div class="name">{{ title }}</div>
+              <img
+                src="@/assets/images/table_r.png"
+                alt=""
+                style="margin-left: 10px"
+              />
+            </div>
+            <img
+              class="title_botton"
+              src="@/assets/images/table_c.png"
+              alt=""
+            />
+          </div>
+        </div>
+        <div style="width: 100%; height: calc(100% - 110px)">
+          <div class="tabelHead">
+            <div><span>姓名：</span>{{ data.character.xm }}</div>
+            <div><span>地址：</span>{{ data.character.dz }}</div>
+            <div><span>年龄：</span>{{ data.character.age }}</div>
+            <div><span>标签：</span>{{ data.character.titleName }}</div>
+            <div class="status">
+              <span>状态：</span><img :src="lampImages[data.character.zt]" />
+            </div>
+          </div>
+          <el-table
+            :data="data.tableData"
+            height="100%"
+            :key="tableKey"
+            :header-cell-style="{ background: '#008FCD' }"
+            @row-click="handleRowClick"
+          >
+            <template v-for="item in data.columns" :key="item.label">
+              <el-table-column
+                v-if="item.type === 'slot'"
+                :show-overflow-tooltip="true"
+                :label="item.label"
+                :property="item.property"
+                :width="item.width || ''"
+                :align="item.align || 'center'"
+              >
+                <template #default="scope">
+                  <!-- 状态 -->
+                  <div v-if="item.property == 'zt'">
+                    <div v-for="index in 3" :key="index">
+                      <img
+                        style="width: 30px; height: 30px"
+                        v-if="scope.row.zt == index"
+                        :src="lampImages[index]"
+                        alt="状态"
+                      />
+                    </div>
+                  </div>
+                  <!-- <slot
+                    :name="item.property"
+                    :currentCol="item"
+                    :currentData="scope.row"
+                  ></slot> -->
+                </template>
+              </el-table-column>
+              <el-table-column
+                v-else
+                :property="item.property"
+                :label="item.label"
+                :show-overflow-tooltip="true"
+                 :width="item.width || ''"
+                :align="item.align || 'center'"
+              />
+            </template>
+          </el-table>
+        </div>
+
+        <div class="pagePart">
+          <el-pagination
+            background
+            layout="prev, pager, next,total"
+            :page-size="pagination.pageSize"
+            :total="pagination.total"
+            prev-text="上一页"
+            next-text="下一页"
+            @current-change="handle"
+            v-model:current-page="pagination.currentPage"
+          />
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script setup>
+import {
+  onMounted,
+  reactive,
+  ref,
+  onBeforeMount,
+  defineProps,
+  watch,
+  nextTick,
+} from "vue";
+import { CircleCloseFilled } from "@element-plus/icons-vue";
+import { useRouter, useRoute } from "vue-router";
+import lamp1 from "../../assets/sy-table/green.gif";
+import lamp2 from "../../assets/sy-table/red.gif";
+import lamp3 from "../../assets/sy-table/yellow.gif";
+import lamp4 from "../../assets/sy-table/green1.gif";
+import lamp5 from "../../assets/sy-table/red1.gif";
+import lamp6 from "../../assets/sy-table/yellow1.gif";
+import lamp7 from "../../assets/sy-table/lampGreen3.png";
+import lamp8 from "../../assets/sy-table/lampRed3.png";
+import lamp9 from "../../assets/sy-table/lampYellow3.png";
+
+const router = useRouter();
+const routers = useRoute();
+
+const props = defineProps({
+  dialogShow: {
+    type: Boolean,
+    default: () => {
+      return false;
+    },
+  },
+  columns: {
+    type: Array,
+    default: () => {
+      return [];
+    },
+  },
+  tableData: {
+    type: Array,
+    default: () => {
+      return [];
+    },
+  },
+  title: {
+    type: String,
+    default: () => {
+      return "";
+    },
+  },
+  pagination: {
+    type: Object,
+    required: true,
+  },
+  character: {
+    type: Object,
+    required: true,
+  },
+});
+const emit = defineEmits(["close", "handle", "loadTables", "openMessage"]);
+
+const handleRowClick = (row, column, event) => {
+  if (props.dj) {
+    console.log(row, props.dj, "rwxq");
+    // router.push({
+    //   path: `/home/index/person`,
+    //   query: { identNo: row.identNo, type: "detail" },
+    // });
+    // row 是当前行的数据
+    emit("openMessage", { identNo: row.identNo });
+  }
+};
+
+// 详情弹框
+const dialogShow = ref();
+const data = reactive({
+  title: "",
+  columns: [],
+  tableData: [],
+  character: [],
+  pagination: {},
+});
+// 使用对象存储所有图片路径
+const lampImages = {
+  1: lamp1,
+  2: lamp2,
+  3: lamp3,
+  4: lamp4,
+  5: lamp5,
+  6: lamp6,
+  7: lamp7,
+  8: lamp8,
+  9: lamp9,
+};
+const gridData = [];
+//切换页数后置顶
+const tableKey = ref(Math.random());
+// 监听
+watch(
+  () => props.dialogShow,
+  (newVal, oldVal) => {
+    dialogShow.value = newVal;
+    // data.tableData = props.tableData;
+    data.columns = props.columns;
+  }
+);
+watch(
+  () => props.tableData,
+  (newVal, oldVal) => {
+    data.tableData = props.tableData;
+    console.log("状态1", data);
+    tableKey.value = Math.random();
+  }
+);
+watch(
+  () => props.character,
+  (newVal, oldVal) => {
+    data.character = props.character;
+  }
+);
+// 使用生命钩子
+onMounted(() => {
+  dialogShow.value = props.dialogShow;
+  data.columns = props.columns;
+  data.title = props.title;
+  data.tableData = props.tableData;
+  console.log("状态", data);
+
+  const paginationTotal = document.querySelector(".el-pagination__total");
+  // paginationTotal.innerText = `总共 ${props.pagination.total} 组数据`;
+});
+
+const closeDialog = () => {
+  dialogShow.value = false;
+  emit("close");
+};
+//分页器
+const handle = (current) => {
+  emit("handle", current);
+};
+</script>
+<style lang="scss" scoped>
+:deep(.el-dialog) {
+  --el-dialog-bg-color: none;
+  --el-dialog-width: 76% !important;
+}
+
+.my-header {
+  display: flex;
+  flex-direction: row-reverse;
+}
+
+.tabelPart {
+  padding: 16px;
+  background: linear-gradient(
+      270deg,
+      rgba(0, 77, 131, 0.69) 0%,
+      rgba(0, 51, 83, 0.77) 50%,
+      rgba(0, 77, 131, 0.74) 100%
+    ),
+    radial-gradient(
+      66% 40% at 50% 0%,
+      rgba(1, 150, 243, 0.55) 0%,
+      rgba(0, 116, 255, 0) 100%
+    );
+  box-shadow: inset 0px 0px 56px 0px rgba(100, 191, 255, 0.5);
+  border: 2px solid;
+  border-image: linear-gradient(
+      180deg,
+      rgba(21, 150, 255, 1),
+      rgba(0, 157, 227, 0)
+    )
+    2 2;
+  .tabelHead {
+    color: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    img {
+      width: 36px;
+      height: 36px;
+    }
+    // &div:nth-last-child(1){
+    //   display: flex;
+    //   align-items: center;
+    // }
+    .status {
+      display: flex;
+      align-items: center;
+    }
+  }
+  :deep(.el-table) {
+    --el-table-bg-color: none;
+    --el-table-tr-bg-color: none;
+    --el-table-header-bg-color: none;
+    background: none;
+    border: none;
+    --el-table-text-color: #fff;
+    --el-table-header-text-color: #fff;
+  }
+
+  // :deep(.el-table th) {
+  //   text-align: center;
+  // }
+}
+
+.pagePart {
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  :deep(.el-pagination) {
+    --el-pagination-button-disabled-bg-color: none;
+    --el-pagination-bg-color: none;
+    --el-pagination-button-bg-color: none;
+    --el-pagination-button-color: #fff;
+    color: #fff;
+  }
+
+  :deep(.el-pagination button:disabled) {
+    background-color: rgba(0, 116, 255, 0) !important;
+  }
+  :deep(.el-pagination > .is-last) {
+    color: #ffffff;
+  }
+}
+
+.bo {
+  width: 100%;
+  display: flex;
+}
+
+.title {
+  margin: 10px auto;
+  display: flex;
+  flex-direction: column;
+
+  &_top {
+    display: flex;
+    align-items: end;
+    justify-content: center;
+
+    img {
+      height: 33px;
+      width: 33px;
+    }
+
+    .name {
+      font-family: PangMenZhengDao, PangMenZhengDao;
+      font-weight: 600;
+      font-size: 33px;
+      color: #ffffff;
+      line-height: 38px;
+      text-align: center;
+      font-style: normal;
+      letter-spacing: 2px;
+      background: linear-gradient(180deg, #ffffff 0%, #51ffef 100%);
+      -webkit-background-clip: text;
+      /*将设置的背景颜色限制在文字中*/
+      -webkit-text-fill-color: transparent;
+      /*给文字设置成透明*/
+    }
+  }
+
+  &_botton {
+    margin-top: 5px;
+    height: 19px;
+  }
+}
+</style>

src/view/person/index.vue

@@ -771,10 +771,12 @@ const columnsList = reactive({
       {
         label: "走访人",
         property: "name",
+        width: 90,
       },
       {
         label: "来访者",
         property: "visitor",
+        width: 90,
       },
       {
         label: "来访日期",

src/view/sy_details.vue

@@ -48,7 +48,7 @@
         </el-table>
         <el-pagination
           background
-          layout="prev, pager, next"
+          layout="prev, pager, next, total"
           :page-size="pagination.pageSize"
           :total="pagination.total"
           prev-text="上一页"
@@ -95,7 +95,7 @@
         </el-table>
         <el-pagination
           background
-          layout="prev, pager, next"
+          layout="prev, pager, next, total"
           :page-size="pagination1.pageSize"
           :total="pagination1.total"
           prev-text="上一页"
@@ -201,8 +201,8 @@
           class="table_border"
           :row-style="rowState"
           :header-cell-style="tableHeaderColor"
-          @row-click="handleRowClick"
         >
+          <!-- @row-click="handleRowClick" -->
           <template v-for="item in data.column_2">
             <el-table-column
               v-if="item.type == 'slot'"
@@ -212,6 +212,17 @@
               :align="item.align || 'left'"
             >
               <template #default="scope">
+                <!-- 姓名 -->
+                <div v-if="item.property == 'xm'">
+                  <div @click="handleRowClick(scope.row)">
+                    {{ scope.row.xm }}
+                  </div>
+                </div>
+                <div v-if="item.property == 'fullName'">
+                  <div @click="handleRowClick(scope.row)">
+                    {{ scope.row.fullName }}
+                  </div>
+                </div>
                 <!-- 状态 -->
                 <div v-if="item.property == 'zt'">
                   <div v-for="index in 3" :key="index">
@@ -219,6 +230,7 @@
                       style="width: 30px; height: 30px"
                       v-if="scope.row.zt == index"
                       :src="lampImages[index]"
+                      @click="statusDetails(scope.row)"
                     />
                   </div>
                 </div>
@@ -239,7 +251,7 @@
         </el-table>
         <el-pagination
           background
-          layout="prev, pager, next"
+          layout="prev, pager, next, total"
           :page-size="pagination2.pageSize"
           :total="pagination2.total"
           prev-text="上一页"
@@ -249,6 +261,18 @@
         />
       </div>
     </div>
+
+    <DialogLamp
+      :dialogShow="dialogShow"
+      :title="tableType.title"
+      :tableData="tableType.data"
+      :columns="tableType.columns"
+      :character="tableType.character"
+      :pagination="pagination3"
+      @close="closeJj"
+      @handle="handlePagination"
+    >
+    </DialogLamp>
   </div>
 </template>
 
@@ -258,6 +282,8 @@ import http from "@/utils/request.js";
 import { useRouter, useRoute } from "vue-router";
 import { ElMessage } from "element-plus";
 import tools from "@/utils/tools";
+import DialogLamp from "./dialog/dialogRW.vue";
+
 import lamp1 from "../assets/sy-table/green.gif";
 import lamp2 from "../assets/sy-table/red.gif";
 import lamp3 from "../assets/sy-table/yellow.gif";
@@ -337,6 +363,7 @@ const formData = reactive({
         label: "姓名",
         property: "fullName",
         width: "90",
+        type: "slot",
       },
       {
         label: "状态",
@@ -359,6 +386,20 @@ const formData = reactive({
         property: "PopulationLabel",
       },
     ],
+    column_3: [
+      {
+        label: "服务内容",
+        property: "fwnr",
+        align: "left",
+      },
+      {
+        label: "结果",
+        property: "zt",
+        width: "200",
+        align: "center",
+        type: "slot",
+      },
+    ],
     tableData: [
       {
         SerialNumber: "01",
@@ -608,11 +649,12 @@ const formData = reactive({
     resultsList: [],
     tableData2: [
       {
-        fullName: "吴*琴",
+        fullName: "伍*凤",
         zt: 1,
-        address: "龙游户籍的公民...",
+        address: "衢州市龙游县模******居民委员会",
-        age: "57",
+        age: "46",
-        PopulationLabel: "自主申报",
+        PopulationLabel: "收入型低保",
+        sfzhm: "281889",
       },
       {
         fullName: "吴*琴",
@@ -691,9 +733,28 @@ const formData = reactive({
         age: "57",
         PopulationLabel: "自主申报",
       },
-
+    ],
-      
+    tableData3: [
-     
+      {
+        fwnr: "经济困难老年人发放养老护理补贴每月125元，同时很据能力评估等级发放养老服务补贴：重度失能每人每月500元、中度失能每人每月250元、轻度失能每人每月125元。",
+        zt: 1,
+        identNo: "309601",
+      },
+      {
+        fwnr: "80周岁（含）至89周岁的老年人，每人每月享受60元高龄老人生活津贴：90周岁（含)至98司岁的老年人，每人每明享受160元高龄老人生活连贴：99同岁及以上的老年人，每人每月享安1000元长寿保健补助金。",
+        zt: 2,
+        identNo: "309601",
+      },
+      {
+        fwnr: "80周岁以上老年人每年，80周岁以下老年人每两年可申请免费评估一次。",
+        zt: 3,
+        identNo: "309601",
+      },
+      {
+        fwnr: "病儿童经济困难老年人发放养老护理补贴每月125元，同时很据能力评估等级发放养老服务补贴：重度失能每人每月500元、中度失能每人每月250元、轻度失能每人每月125元。171.4元/月",
+        zt: 1,
+        identNo: "309601",
+      },
     ],
   },
   hjlnrTableData: {
@@ -751,6 +812,7 @@ const formData = reactive({
         label: "姓名",
         property: "xm",
         width: "90",
+        type: "slot",
       },
       {
         label: "状态",
@@ -774,6 +836,20 @@ const formData = reactive({
         type: "slot",
       },
     ],
+    column_3: [
+      {
+        label: "服务内容",
+        property: "fwnr",
+        align: "left",
+      },
+      {
+        label: "结果",
+        property: "zt",
+        width: "200",
+        align: "center",
+        type: "slot",
+      },
+    ],
     tableData: [
       {
         SerialNumber: "01",
@@ -924,6 +1000,7 @@ const formData = reactive({
     tableData2: [
       {
         xm: "杨*根",
+        identNo: "309601",
         zt: 1,
         dz: "浙江省龙游县龙*****号",
         age: "87",
@@ -1251,6 +1328,23 @@ const formData = reactive({
         bzlx: "1",
       },
     ],
+    tableData3: [
+      {
+        fwnr: "经济困难老年人发放养老护理补贴每月125",
+        zt: 1,
+        identNo: "309601",
+      },
+      {
+        fwnr: "经济困难老年人发放养老护理补贴每月125",
+        zt: 2,
+        identNo: "309601",
+      },
+      {
+        fwnr: "经济困难老年人发放养老护理补贴每月125",
+        zt: 3,
+        identNo: "309601",
+      },
+    ],
   },
   lmbhzTableData: {
     url: "",
@@ -1312,6 +1406,7 @@ const formData = reactive({
         label: "姓名",
         property: "xm",
         width: "90",
+        type: "slot",
       },
       {
         label: "状态",
@@ -2034,6 +2129,12 @@ const pagination2 = reactive({
   pageSize: 20,
   currentPage: 1,
 });
+const pagination3 = reactive({
+  url: "",
+  total: 10,
+  pageSize: 20,
+  currentPage: 1,
+});
 //表格分页切换
 const handlePagination = (current) => {
   // console.log(current,"page1");
@@ -2155,7 +2256,7 @@ const selectedLamp1 = reactive({
   yellow: false,
 });
 const lampScreen = (val, val2) => {
-  console.log(222, val2);
+  // console.log(222, val2);
   if (selectedLamp.value === val) {
     return;
   }
@@ -2163,7 +2264,7 @@ const lampScreen = (val, val2) => {
 
   const filteredData = val2.filter((element) => element.zt === val);
   data.tableData2 = filteredData;
-
+  pagination2.total = data.tableData2.length;
   selectedLamp1.green = !val2.some((element) => element.zt === 1);
   selectedLamp1.red = !val2.some((element) => element.zt === 2);
   selectedLamp1.yellow = !val2.some((element) => element.zt === 3);
@@ -2184,7 +2285,152 @@ const lampScreen = (val, val2) => {
   // );
   console.log(111, data.tableData2, selectedLamp1, val);
 };
+//---------表格弹框-------
+const dialogShow = ref(false);
+const tableType = reactive({
+  url: "",
+  title: "",
+  data: [],
+  columns: [],
+  character: [],
+});
+//表格column列表
+const columns = reactive({
+  聚集数据: {
+    column: [
+      {
+        label: "姓名",
+        property: "xm",
+      },
+      {
+        label: "出生日期",
+        property: "birth",
+      },
+      {
+        label: "性别",
+        property: "sex",
+      },
+      {
+        label: "迁出地址",
+        property: "ydz",
+      },
+      {
+        label: "地址",
+        property: "xdz",
+      },
+    ],
+  },
+  培训: {
+    column: [
+      {
+        label: "姓名",
+        property: "xm",
+      },
+      {
+        label: "培训机构名称",
+        property: "pxjgmc",
+      },
+      {
+        label: "培训项目",
+        property: "pxxm",
+      },
+    ],
+  },
+});
+const statusDetails = (val) => {
+  tableType.title = `服务详情`;
+  console.log(111, val);
 
+  switch (data.name) {
+    case "最低生活保障":
+      data.identNo = val.sfzhm;
+      if (data.identNo == null) {
+        ElMessage.warning({
+          message: `${val.fullName}无id!`,
+          offset: 100, // 距离窗口顶部的偏移量
+        });
+      } else {
+        tableType.columns = formData.dbTableData.column_3;
+        tableType.data = formData.dbTableData.tableData3;
+        pagination3.total = formData.dbTableData.tableData3.length;
+        tableType.character = {
+          ...val,
+          xm: val.fullName,
+          dz: val.address,
+          titleName: formData.name,
+        };
+        dialogShow.value = true;
+      }
+      break;
+    case "老年人福利补贴":
+      data.identNo = val.identNo;
+      if (data.identNo == null) {
+        ElMessage.warning({
+          message: `${val.xm}无id!`,
+          offset: 100, // 距离窗口顶部的偏移量
+        });
+      } else {
+        tableType.columns = formData.hjlnrTableData.column_3;
+        tableType.data = formData.hjlnrTableData.tableData3;
+        pagination3.total = formData.hjlnrTableData.tableData3.length;
+        tableType.character = {
+          ...val,
+          titleName: formData.name,
+        };
+        dialogShow.value = true;
+      }
+      break;
+    case "慢性病患者健康管理":
+      data.identNo = val.identNo;
+      if (data.identNo == null) {
+        ElMessage.warning({
+          message: `${val.xm}无id!`,
+          offset: 100, // 距离窗口顶部的偏移量
+        });
+      } else {
+        tableType.columns = formData.hjlnrTableData.column_3;
+        tableType.data = formData.hjlnrTableData.tableData3;
+        pagination3.total = formData.hjlnrTableData.tableData3.length;
+        dialogShow.value = true;
+      }
+      break;
+    case "义务教育学生生活补助":
+      data.identNo = val.identNo;
+      if (data.identNo !== null) {
+        tableType.columns = formData.hjlnrTableData.column_3;
+        tableType.data = formData.hjlnrTableData.tableData3;
+        pagination3.total = formData.hjlnrTableData.tableData3.length;
+        dialogShow.value = true;
+      } else {
+        ElMessage.warning({
+          message: `${val.xm}无id!`,
+          offset: 100, // 距离窗口顶部的偏移量
+        });
+      }
+      break;
+    case "义务教育学生营养改善计划":
+      data.identNo = val.identNo;
+      if (data.identNo !== null) {
+        tableType.columns = formData.hjlnrTableData.column_3;
+        tableType.data = formData.hjlnrTableData.tableData3;
+        pagination3.total = formData.hjlnrTableData.tableData3.length;
+        dialogShow.value = true;
+      } else {
+        ElMessage.warning({
+          message: `${val.xm}无id!`,
+          offset: 100, // 距离窗口顶部的偏移量
+        });
+      }
+      break;
+    default:
+      break;
+  }
+};
+const closeJj = () => {
+  dialogShow.value = false;
+  tableType.data = [];
+  pagination3.currentPage = 1;
+};
 const getTable = (pagination) => {
   http
     .get(
@@ -2235,7 +2481,7 @@ const getServiceList = async (pagination, sfxs) => {
     });
 };
 
-const handleRowClick = (row, column, event) => {
+const handleRowClick = (row) => {
   // row 是当前行的数据
   console.log(row);
   switch (data.name) {
@@ -2320,10 +2566,10 @@ const updateFormDataAndTable = (formDataName, tableData) => {
   data.column_2 = tableData.column_2;
   data.tableData = tableData.resultsList;
   data.tableData1 = tableData.tableData;
-  data.tableData2 = tableData.tableData2;
+  data.tableData2 = tableData.tableData2; //假数据
-  data.tableData3 = tableData.tableData2;
+  data.tableData3 = tableData.tableData2; //假数据
   pagination1.total = tableData.tableData.length;
-  console.log(6666, data.tableData2);
+  // console.log(6666, data.tableData2);
 
   lampScreen(1, data.tableData3);
   handleCurrentChange(1);
@@ -2894,6 +3140,10 @@ onMounted(() => {
 }
 </style>
 <style lang="scss" scoped>
+// 分页
+:deep(.el-pagination > .is-last) {
+  color: #fff !important ;
+}
 :deep(.el-pagination.is-background .el-pager li) {
   color: #fff;
   background: rgba(255, 255, 255, 0.14);

vite.config.js

@@ -15,8 +15,8 @@ export default defineConfig({
       // 第一个代理
       "/api": {
         // 匹配到啥来进行方向代理
-        // target: "http://10.0.0.65:8095/", //刘进
+        target: "http://10.0.0.65:8095/", //刘进
-        target: "http://220.191.238.50:996/", //线上
+        // target: "http://220.191.238.50:996/", //线上
         changeOrigin: true, //是否支持跨域
         //rewrite: (path) => path.replace(/^\/api/, '') // 如果不需要api 直接把路径上的api 替换成空，这个
       },