gx

src/view/person/index.vue

@@ -3,34 +3,31 @@
     <div class="person-content">
       <div class="person-side">
         <div class="my-label">
-                    <div class="my-label-title">
+          <div class="my-label-title">基本信息</div>
-                        基本信息
-                    </div>
         </div>
         <div class="my-info">
-
           <div class="my-info-item">
-                        <div class="my-info-label ">姓&emsp;&emsp;名</div>
+            <div class="my-info-label">姓&emsp;&emsp;名</div>
             <div class="my-info-content">
-                            <p>{{baseInfo.nm}}</p>
+              <p>{{ baseInfo.nm }}</p>
             </div>
           </div>
           <div class="my-info-item">
             <div class="my-info-label">证件类型</div>
             <div class="my-info-content">
-                            <p>{{baseInfo.zjlx || '身份证'}}</p>
+              <p>{{ baseInfo.zjlx || "身份证" }}</p>
             </div>
           </div>
           <div class="my-info-item">
             <div class="my-info-label">证件号码</div>
             <div class="my-info-content">
-                            <p>{{baseInfo.identNo}}</p>
+              <p>{{ baseInfo.identNo }}</p>
             </div>
           </div>
           <div class="my-info-item">
             <div class="my-info-label">政治面貌</div>
             <div class="my-info-content">
-                            <p>{{baseInfo.zzmm || ''}}</p>
+              <p>{{ baseInfo.zzmm || "" }}</p>
             </div>
           </div>
           <div class="my-info-item">
@@ -41,32 +38,38 @@
             </div>
           </div>
           <div class="my-info-item">
-                        <div class="my-info-label ">民&emsp;&emsp;族</div>
+            <div class="my-info-label">民&emsp;&emsp;族</div>
             <div class="my-info-content">
-                            <p>{{baseInfo.ethnic}}</p>
+              <p>{{ baseInfo.ethnic }}</p>
             </div>
           </div>
           <div class="my-info-item">
-                        <div class="my-info-label ">性&emsp;&emsp;别</div>
+            <div class="my-info-label">性&emsp;&emsp;别</div>
             <div class="my-info-content">
-                            <p>{{baseInfo.gender}}</p>
+              <p>{{ baseInfo.gender }}</p>
             </div>
           </div>
           <div class="my-info-item">
             <div class="my-info-label">户口登记地</div>
             <div class="my-info-content">
-                            <p>{{baseInfo.domicAddr}}</p>
+              <p>{{ baseInfo.domicAddr }}</p>
             </div>
           </div>
         </div>
         <div class="my-label">
-                    <div class="my-label-title">
+          <div class="my-label-title">标签</div>
-                        标签
-                    </div>
         </div>
         <div class="my-tag">
-                    <div class="my-tag-item" v-for="item in 25" :key="item" @click="onClickTag(item)">
+          <div
-                        <p>标签</p>
+            class="my-tag-item"
+            v-for="item in dataMyTag.myTag"
+            :key="item"
+            @click="onClickTag(item)"
+            :class="item.show ? 'my-tag-item_active' : ''"
+          >
+            <p>
+              {{ item.name }}
+            </p>
           </div>
         </div>
       </div>
@@ -79,75 +82,138 @@
         <div class="main-tag-item">退休<br />养老</div>
         <div class="main-tag-item">身后事</div>
         <div class="main-tag-item">综合</div>
-                <div class="person-main-person">
+        <div class="person-main-person"></div>
-                </div>
       </div>
       <div class="person-side">
         <div class="my-label">
-                    <div class="my-label-title">
+          <div class="my-label-title">养老金发放情况</div>
-                        养老金发放情况
-                    </div>
         </div>
         <div class="my-table">
-                    <el-table :data="data" border style="width: 100%" max-height="250" :header-cell-style="{
+          <el-table
+            :data="data"
+            border
+            style="width: 100%"
+            max-height="250"
+            :header-cell-style="{
               border: 'none',
               height: '60px',
               fontSize: '18px',
               color: '#fff',
-                    }" :row-style="{
+            }"
+            :row-style="{
               letterSpacing: '1px',
               fontSize: '16px',
               height: '50px',
               backgroundColor: 'rgba(31, 63, 113, 1)',
               color: '#fff',
-                    }">
+            }"
-                        <el-table-column prop="type" label="养老金类型" width="160" align="center" />
+          >
-                        <el-table-column prop="date" label="发放日期" width="160" align="center" />
+            <el-table-column
-                        <el-table-column prop="sum" label="发放金额(元）" width="160" align="center" />
+              prop="type"
-
+              label="养老金类型"
+              width="160"
+              align="center"
+            />
+            <el-table-column
+              prop="date"
+              label="发放日期"
+              width="160"
+              align="center"
+            />
+            <el-table-column
+              prop="sum"
+              label="发放金额(元）"
+              width="160"
+              align="center"
+            />
           </el-table>
-                    <el-pagination background layout="prev, pager, next" :page-size="pagination.pageSize"
+          <el-pagination
-                        :total="pagination.total" prev-text="上一页" next-text="下一页"
+            background
-                        v-model:current-page="pagination.currentPage" @current-change="handlePagination" />
+            layout="prev, pager, next"
+            :page-size="pagination.pageSize"
+            :total="pagination.total"
+            prev-text="上一页"
+            next-text="下一页"
+            v-model:current-page="pagination.currentPage"
+            @current-change="handlePagination"
+          />
         </div>
         <div class="my-label">
-                    <div class="my-label-title">
+          <div class="my-label-title">医疗金发放情况</div>
-                        医疗金发放情况
-                    </div>
         </div>
         <div class="my-table">
-                    <el-table :data="data1" border style="width: 100%" max-height="250" :header-cell-style="{
+          <el-table
+            :data="data1"
+            border
+            style="width: 100%"
+            max-height="250"
+            :header-cell-style="{
               border: 'none',
               height: '60px',
               fontSize: '18px',
               color: '#fff',
-                    }" :row-style="{
+            }"
+            :row-style="{
               letterSpacing: '1px',
               fontSize: '16px',
               height: '50px',
               backgroundColor: 'rgba(31, 63, 113, 1)',
               color: '#fff',
-                    }">
+            }"
-                        <el-table-column prop="type" label="医疗类型" width="115" align="center" />
+          >
-                        <el-table-column prop="date" label="使用日期" width="115" align="center" />
+            <el-table-column
-                        <el-table-column prop="sum" label="使用金额" width="115" align="center" />
+              prop="type"
-                        <el-table-column prop="sum" label="详情" width="135" align="center" />
+              label="医疗类型"
+              width="115"
+              align="center"
+            />
+            <el-table-column
+              prop="date"
+              label="使用日期"
+              width="115"
+              align="center"
+            />
+            <el-table-column
+              prop="sum"
+              label="使用金额"
+              width="115"
+              align="center"
+            />
+            <el-table-column
+              prop="sum"
+              label="详情"
+              width="135"
+              align="center"
+            />
           </el-table>
-                    <el-pagination background layout="prev, pager, next" :page-size="pagination1.pageSize"
+          <el-pagination
-                        :total="pagination1.total" prev-text="上一页" next-text="下一页"
+            background
-                        v-model:current-page="pagination1.currentPage" @current-change="handlePagination" />
+            layout="prev, pager, next"
-                </div>
+            :page-size="pagination1.pageSize"
-
+            :total="pagination1.total"
+            prev-text="上一页"
+            next-text="下一页"
+            v-model:current-page="pagination1.currentPage"
+            @current-change="handlePagination"
+          />
         </div>
       </div>
-        <Dialog :dialogShow="dialogShow" :columns="tableType.columns" :title="tableType.title"
+    </div>
-            :tableData="tableType.data" :pagination="paginationDialog" @close="close" @handle="handlePagination">
+    <Dialog
+      :dialogShow="dialogShow"
+      :columns="tableType.columns"
+      :title="tableType.title"
+      :tableData="tableType.data"
+      :pagination="paginationDialog"
+      @close="close"
+      @handle="handlePagination"
+    >
     </Dialog>
   </div>
 </template>
 
 <script setup>
-import { reactive, ref,onMounted } from 'vue'
+import { reactive, ref, onMounted } from "vue";
 import Dialog from "@/view/dialog/dialog.vue";
 import { useRouter, useRoute } from "vue-router";
 import http from "@/utils/request.js";
@@ -155,74 +221,150 @@ const router = useRouter();
 const routers = useRoute();
 const data = ref([
   {
-        type: '基础养老金',
+    type: "基础养老金",
-        date: '2022-01-01',
+    date: "2022-01-01",
-        sum: '1000'
+    sum: "1000",
   },
   {
-        type: '基础养老金',
+    type: "基础养老金",
-        date: '2022-01-01',
+    date: "2022-01-01",
-        sum: '1000'
+    sum: "1000",
   },
   {
-        type: '基础养老金',
+    type: "基础养老金",
-        date: '2022-01-01',
+    date: "2022-01-01",
-        sum: '1000'
+    sum: "1000",
   },
   {
-        type: '基础养老金',
+    type: "基础养老金",
-        date: '2022-01-01',
+    date: "2022-01-01",
-        sum: '1000'
+    sum: "1000",
   },
-
+]);
-])
+const dataMyTag = reactive({
+  myTag: [
+    {
+      name: "低保",
+      jkName: "dbao",
+      show: false,
+    },
+    {
+      name: "低边",
+      jkName: "dbian",
+      show: false,
+    },
+    {
+      name: "特困",
+      jkName: "tk",
+      show: false,
+    },
+    {
+      name: "残疾人",
+      jkName: "",
+      show: false,
+    },
+    {
+      name: "退役军人",
+      jkName: "tyjr",
+      show: false,
+    },
+    {
+      name: "留守",
+      jkName: "jzzt",
+      show: false,
+    },
+    {
+      name: "困境儿童",
+      jkName: "kjet",
+      show: false,
+    },
+    {
+      name: "医保支出万元以上",
+      jkName: "",
+      show: false,
+    },
+    {
+      name: "残疾",
+      jkName: "cj",
+      show: false,
+    },
+    {
+      name: "高血压",
+      jkName: "gxy",
+      show: false,
+    },
+    {
+      name: "糖尿病",
+      jkName: "tnb",
+      show: false,
+    },
+    {
+      name: "高血脂",
+      jkName: "",
+      show: false,
+    },
+    {
+      name: "高血糖",
+      jkName: "",
+      show: false,
+    },
+    {
+      name: "其他疾病",
+      jkName: "",
+      show: false,
+    },
+    {
+      name: "大病住院",
+      jkName: "",
+      show: false,
+    },
+  ],
+});
 const pagination = reactive({
   current: 1,
   pageSize: 5,
   total: 50,
-    showTotal: 0
+  showTotal: 0,
-})
+});
 const handleTableChange = (pagination) => {
-    console.log(pagination)
+  console.log(pagination);
-}
+};
-const baseInfo=ref({
+const baseInfo = ref({});
-   
-})
 const data1 = ref([
   {
-        type: '职工医疗',
+    type: "职工医疗",
-        date: '2023/12',
+    date: "2023/12",
-        sum: '500',
+    sum: "500",
-        info: '人民医院******'
+    info: "人民医院******",
   },
   {
-        type: '职工医疗',
+    type: "职工医疗",
-        date: '2023/12',
+    date: "2023/12",
-        sum: '500',
+    sum: "500",
-        info: '人民医院******'
+    info: "人民医院******",
   },
   {
-        type: '职工医疗',
+    type: "职工医疗",
-        date: '2023/12',
+    date: "2023/12",
-        sum: '500',
+    sum: "500",
-        info: '人民医院******'
+    info: "人民医院******",
   },
   {
-        type: '职工医疗',
+    type: "职工医疗",
-        date: '2023/12',
+    date: "2023/12",
-        sum: '500',
+    sum: "500",
-        info: '人民医院******'
+    info: "人民医院******",
   },
-])
+]);
 const pagination1 = reactive({
   current: 1,
   pageSize: 5,
   total: 50,
-    showTotal: 0
+  showTotal: 0,
-})
+});
-const dialogShow = ref(false)
+const dialogShow = ref(false);
 const tableType = reactive({
-    title: '基础养老金',
+  title: "基础养老金",
   columns: [
     {
       label: "领取日期",
@@ -231,52 +373,54 @@ const tableType = reactive({
     {
       label: "领取医院",
       property: "hospital",
-        }, {
+    },
+    {
       label: "详情",
       property: "info",
     },
   ],
   data: [],
-})
+});
 const onClickTag = (item) => {
-    dialogShow.value = true
+  dialogShow.value = true;
-}
+};
 const paginationDialog = reactive({
   current: 1,
   pageSize: 5,
   total: 50,
-    showTotal: 0
+  showTotal: 0,
-})
+});
 const close = (pagination) => {
-    dialogShow.value = false
+  dialogShow.value = false;
-}
+};
 const handlePagination = (pagination) => {
-    dialogShow.value = false
+  dialogShow.value = false;
-}
+};
-const getData =(nm,identNo)=>{
+const getData = (nm, identNo) => {
   http
-    .get(
+    .get(`/api/ggfwyth/ysyzt/getRysmzqDetails?nm=${nm}&identNo=${identNo}`)
-      `/api/ggfwyth/ysyzt/getRysmzqDetails?nm=${nm}&identNo=${
-        identNo
-      }`
-    )
     .then((res) => {
       if (res.code == 200) {
-        baseInfo.value=res.data;
+        baseInfo.value = res.data;
+        dataMyTag.myTag.map((item) => {
+          item.show = res.data[item.jkName];
+          console.log(res.data[item.jkName],555);
+        });
+
       }
     });
-}
+};
-onMounted(()=>{
+onMounted(() => {
   // console.log(routers.query);
-    getData(routers.query.nm,routers.query.identNo)
+  getData(routers.query.nm, routers.query.identNo);
-})
+});
 </script>
 
 <style lang="scss" scoped>
 .person-container {
   width: 100%;
   height: 100%;
-    background: url('../../assets/person/bg.png') no-repeat;
+  background: url("../../assets/person/bg.png") no-repeat;
   background-size: 100% 100%;
 
   .person-content {
@@ -291,7 +435,17 @@ onMounted(()=>{
   .person-side {
     width: 480px;
     height: 100%;
-        background: linear-gradient(270deg, rgba(0, 52, 131, 0.69) 0%, rgba(0, 32, 83, 0.77) 50%, rgba(0, 60, 131, 0.74) 100%), radial-gradient(128% 99% at 100% 46%, rgba(0, 48, 125, 0.29) 0%, rgba(0, 61, 134, 0.42) 100%);
+    background: linear-gradient(
+        270deg,
+        rgba(0, 52, 131, 0.69) 0%,
+        rgba(0, 32, 83, 0.77) 50%,
+        rgba(0, 60, 131, 0.74) 100%
+      ),
+      radial-gradient(
+        128% 99% at 100% 46%,
+        rgba(0, 48, 125, 0.29) 0%,
+        rgba(0, 61, 134, 0.42) 100%
+      );
     box-shadow: inset 0px 0px 56px 0px rgba(173, 221, 255, 0.5);
     border-radius: 8px;
     backdrop-filter: blur(3px);
@@ -304,7 +458,7 @@ onMounted(()=>{
     height: 100%;
 
     .main-tag-item {
-            background: url('../../assets/person/tag.png') no-repeat;
+      background: url("../../assets/person/tag.png") no-repeat;
       background-size: 100% 100%;
       width: 100px;
       height: 100px;
@@ -314,7 +468,7 @@ onMounted(()=>{
       font-size: 20px;
       font-family: Microsoft YaHei;
       font-weight: bold;
-            color: #FFFFFF;
+      color: #ffffff;
       position: absolute;
       cursor: pointer;
       z-index: 5;
@@ -360,18 +514,16 @@ onMounted(()=>{
       }
 
       &:hover {
-                background: url('../../assets/person/tag-active.png') no-repeat;
+        background: url("../../assets/person/tag-active.png") no-repeat;
         background-size: 100% 100%;
       }
-
     }
 
     .main-tag-item_active {
-            background: url('../../assets/person/tag-active.png') no-repeat;
+      background: url("../../assets/person/tag-active.png") no-repeat;
       background-size: cover;
     }
 
-
     .person-main-person {
       position: absolute;
       top: 55%;
@@ -379,14 +531,14 @@ onMounted(()=>{
       transform: translate(-50%, -48%);
       width: 340px;
       height: 813px;
-            background: url('../../assets/person/person.png') no-repeat;
+      background: url("../../assets/person/person.png") no-repeat;
       background-size: 100% 100%;
       z-index: 3;
     }
   }
 
   .my-label {
-        background: url('../../assets/person/label.png') no-repeat;
+    background: url("../../assets/person/label.png") no-repeat;
     background-size: 100% 100%;
     padding-left: 32px;
     padding-bottom: 16px;
@@ -419,7 +571,7 @@ onMounted(()=>{
         font-family: PingFangSC, PingFang SC;
         font-weight: 400;
         font-size: 18px;
-                color: #A8E0FF;
+        color: #a8e0ff;
         line-height: 25px;
         letter-spacing: 2px;
 
@@ -429,37 +581,30 @@ onMounted(()=>{
           right: -10px;
           top: 0;
         }
-
       }
 
-
-
       .my-info-content {
         margin-left: 18px;
         font-family: PingFangSC, PingFang SC;
         font-weight: 500;
         font-size: 18px;
-                color: #FFFFFF;
+        color: #ffffff;
         line-height: 25px;
         text-align: left;
         font-style: normal;
-
-
       }
 
       .my-info-content {
         font-family: PingFangSC, PingFang SC;
         font-weight: 500;
         font-size: 18px;
-                color: #FFFFFF;
+        color: #ffffff;
         line-height: 25px;
         letter-spacing: 1px;
         text-align: left;
         font-style: normal;
       }
     }
-
-
   }
 
   .my-tag {
@@ -476,7 +621,7 @@ onMounted(()=>{
 
     &::-webkit-scrollbar-thumb {
       border-radius: 2px;
-            background: #FFFFFF;
+      background: #ffffff;
     }
 
     &::-webkit-scrollbar-track {
@@ -484,18 +629,16 @@ onMounted(()=>{
       background: rgba(255, 255, 255, 0.2);
     }
 
-
-
     .my-tag-item {
       display: inline-block;
       background: rgba(255, 255, 255, 0.2);
       border-radius: 2px;
-            border: 1px solid #FFFFFF;
+      border: 1px solid #ffffff;
       padding: 10px 20px;
       font-family: PingFangSC, PingFang SC;
       font-weight: 500;
       font-size: 16px;
-            color: #FFFFFF;
+      color: #ffffff;
       line-height: 22px;
       letter-spacing: 2px;
       text-align: center;
@@ -569,7 +712,6 @@ onMounted(()=>{
           border: 1px solid #6bade1;
         }
       }
-
     }
   }
 }

src/view/sy_table.vue

@@ -469,7 +469,7 @@ const tapshow = (parentId, childId) => {
   data.taps = childId;
   getData(parentId.name, parentId.son[childId].name);
 
-  // 年龄百分比
+  // 菜单名匹配
   const menuName = [
     "幼有善育",
     "学有优教",