From 8815e3da999f4cedeb41652fec4c678bea56d342 Mon Sep 17 00:00:00 2001
From: duanxiaohai <1812246227@qq.com>
Date: Fri, 9 Aug 2024 11:00:32 +0800
Subject: [PATCH 1/2] gx

---
 src/view/person/index.vue | 284 ++++++++++++++++++++++++++++----------
 1 file changed, 210 insertions(+), 74 deletions(-)

diff --git a/src/view/person/index.vue b/src/view/person/index.vue
index 15e83e3..5b7ebd9 100644
--- a/src/view/person/index.vue
+++ b/src/view/person/index.vue
@@ -77,16 +77,17 @@
         </div>
       </div>
       <div class="person-main">
-        <div class="main-tag-item" @click="onClickTag2('出生')">出生</div>
-        <div class="main-tag-item" @click="onClickTag2('学习')">学习</div>
-        <div class="main-tag-item" @click="onClickTag2('工作')">工作</div>
-        <div class="main-tag-item" @click="onClickTag2('婚育')">婚育</div>
-        <div class="main-tag-item" @click="onClickTag2('置业')">置业</div>
-        <div class="main-tag-item" @click="onClickTag2('退休养老')">
-          退休<br />养老
+        <div
+          v-for="(item, index) in dataMyTag.myTag1"
+          class="main-tag-item"
+          :class="
+            item.name == dataMyTag.myTagshow ? 'main-tag-item_active' : ''
+          "
+          @click="onClickTag2(item, index)"
+        >
+          <span v-if="item.name == '退休养老'"> 退休<br />养老</span>
+          <span v-else>{{ item.name }}</span>
         </div>
-        <div class="main-tag-item" @click="onClickTag2('身后事')">身后事</div>
-        <div class="main-tag-item" @click="onClickTag2('综合')">综合</div>
         <div class="person-main-person"></div>
         <div class="back" @click="back()">
           <img src="@/assets/person/back.png" alt="" />
@@ -94,63 +95,113 @@
         </div>
       </div>
       <div class="person-side">
-        <div class="my-label">
-          <div class="my-label-title">养老金发放情况</div>
+        <div v-if="rightList.value < 1">
+          <div class="my-label">
+            <div class="my-label-title">养老金发放情况</div>
+          </div>
+          <div class="my-table">
+            <el-table
+              :data="data"
+              border
+              style="width: 100%"
+              max-height="500"
+              :header-cell-style="{
+                border: 'none',
+                height: '60px',
+                fontSize: '18px',
+                color: '#fff',
+              }"
+              :row-style="{
+                letterSpacing: '1px',
+                fontSize: '16px',
+                height: '50px',
+                backgroundColor: 'rgba(31, 63, 113, 1)',
+                color: '#fff',
+              }"
+            >
+              <template v-for="item in dataMyTag.tableList">
+                <el-table-column
+                  :width="item.width"
+                  :prop="item.name"
+                  :label="item.label"
+                >
+                </el-table-column>
+              </template>
+            </el-table>
+            <el-pagination
+              background
+              layout="prev, pager, next"
+              :page-size="pagination.pageSize"
+              :total="pagination.total"
+              prev-text="上一页"
+              next-text="下一页"
+              v-model:current-page="pagination.currentPage"
+              @current-change="handlePaginationYL"
+            />
+          </div>
         </div>
-        <div class="my-table">
-          <el-table
-            :data="data"
-            border
-            style="width: 100%"
-            max-height="250"
-            :header-cell-style="{
-              border: 'none',
-              height: '60px',
-              fontSize: '18px',
-              color: '#fff',
-            }"
-            :row-style="{
-              letterSpacing: '1px',
-              fontSize: '16px',
-              height: '50px',
-              backgroundColor: 'rgba(31, 63, 113, 1)',
-              color: '#fff',
-            }"
-          >
-            <el-table-column
-              prop="yljlx"
-              label="养老金类型"
-              width="160"
-              align="center"
-            />
-            <el-table-column
-              prop="yljffrq"
-              label="发放日期"
-              width="160"
-              align="center"
-            />
-            <el-table-column
-              prop="yljffje"
-              label="发放金额(元）"
-              width="160"
-              align="center"
-            />
-          </el-table>
-          <el-pagination
-            background
-            layout="prev, pager, next"
-            :page-size="pagination.pageSize"
-            :total="pagination.total"
-            prev-text="上一页"
-            next-text="下一页"
-            v-model:current-page="pagination.currentPage"
-            @current-change="handlePaginationYL"
-          />
+        <div v-else>
+          <div class="my-label">
+            <div class="my-label-title">基本信息</div>
+          </div>
+          <div class="my-info">
+            <div class="my-info-item">
+              <div class="my-info-label">姓&emsp;&emsp;名</div>
+              <div class="my-info-content">
+                <p>{{ baseInfo.nm || baseInfo.xm }}</p>
+              </div>
+            </div>
+            <div class="my-info-item">
+              <div class="my-info-label">证件类型</div>
+              <div class="my-info-content">
+                <p>{{ baseInfo.zjlx || "身份证" }}</p>
+              </div>
+            </div>
+            <div class="my-info-item">
+              <div class="my-info-label">证件号码</div>
+              <div class="my-info-content">
+                <p>******************</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>
+              </div>
+            </div>
+            <div class="my-info-item">
+              <div class="my-info-label">居住状态</div>
+              <div class="my-info-content">
+                <p v-if="baseInfo.jzzt == 1">居住</p>
+                <p v-else-if="baseInfo.jzzt == 0">未居住</p>
+                <p v-else></p>
+              </div>
+            </div>
+            <div class="my-info-item">
+              <div class="my-info-label">民&emsp;&emsp;族</div>
+              <div class="my-info-content">
+                <p>{{ baseInfo.ethnic }}</p>
+              </div>
+            </div>
+            <div class="my-info-item">
+              <div class="my-info-label">性&emsp;&emsp;别</div>
+              <div class="my-info-content">
+                <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 || baseInfo.dz }}</p>
+              </div>
+            </div>
+          </div>
         </div>
-        <div class="my-label">
+        <!-- <div class="my-label">
           <div class="my-label-title">医疗金发放情况</div>
-        </div>
-        <div class="my-table">
+        </div> -->
+        <!-- <div class="my-table">
           <el-table
             :data="data1"
             border
@@ -205,7 +256,7 @@
             v-model:current-page="pagination1.currentPage"
             @current-change="handlePaginationYLJ"
           />
-        </div>
+        </div> -->
       </div>
     </div>
     <Dialog
@@ -318,6 +369,52 @@ const dataMyTag = reactive({
       show: 0,
     },
   ],
+  myTag1: [
+    {
+      name: "出生",
+    },
+    {
+      name: "学习",
+    },
+    {
+      name: "工作",
+    },
+    {
+      name: "婚育",
+    },
+    {
+      name: "置业",
+    },
+    {
+      name: "退休养老",
+    },
+    {
+      name: "身后事",
+    },
+    {
+      name: "综合",
+    },
+  ],
+  myTagshow: "出生",
+  /**
+   * @type {Array}
+   * @description 表格配置
+   */
+  tableList: [
+    {
+      name: "yljlx",
+      label: "养老金类型",
+      width: "160",
+    },
+    {
+      name: "yljffrq",
+      label: "发放日期",
+    },
+    {
+      name: "yljffje",
+      label: "发放金额(元）",
+    },
+  ],
 });
 //存放养老金数据
 const data = ref([
@@ -342,6 +439,7 @@ const data = ref([
     sum: "1000",
   },
 ]);
+
 const pagination = reactive({
   current: 1,
   pageSize: 5,
@@ -548,6 +646,27 @@ const columnsList = reactive({
       },
     ],
   },
+  综合: {
+    url: "/api/ggfwyth/ysyzt/getRyzhxx",
+    column: [
+      // {
+      //   label: "身份证号码",
+      //   property: "identNo",
+      // },
+      {
+        label: "医疗保险类型",
+        property: "ylbxlx",
+      },
+      {
+        label: "发放日期",
+        property: "jfrq",
+      },
+      {
+        label: "缴费金额",
+        property: "jfje",
+      },
+    ],
+  },
 });
 //特殊标签弹框
 const onClickTag = (item) => {
@@ -556,10 +675,11 @@ const onClickTag = (item) => {
   dialogShow.value = true;
 };
 //圆球弹框
-const onClickTag2 = (name) => {
-  tableType.title = name;
-  tableType.url = columnsList[name].url;
-  tableType.columns = columnsList[name].column;
+const onClickTag2 = (val, index) => {
+  dataMyTag.myTagshow = val.name;
+  tableType.title = val.name;
+  tableType.url = columnsList[val.name].url;
+  tableType.columns = columnsList[val.name].column;
   getTable(tableType.url);
   dialogShow.value = true;
 };
@@ -569,6 +689,10 @@ const paginationDialog = reactive({
   total: 50,
   showTotal: 0,
 });
+//判断右侧显示的为表格还是列表，0为列表，1为表格
+const rightType = ref(0);
+//存放右侧单条数据
+const rightList = ref([]);
 //获取表格数据
 const getTable = (url) => {
   http
@@ -580,6 +704,17 @@ const getTable = (url) => {
     .then((res) => {
       if (res.code == 200) {
         tableType.data = res.data;
+        if (tableType.data?.length > 1) {
+          rightType.value = 1;
+        } else {
+          if (tableType.data == null) {
+            rightList.value = [];
+          } else {
+            rightList.value = tableType.data[0];
+          }
+          rightType.value = 0;
+        }
+        console.log(rightType.value);
       }
     });
 };
@@ -810,16 +945,17 @@ onMounted(() => {
         right: 110px;
       }
 
-      &:hover {
-        background: url("../../assets/person/tag-active.png") no-repeat;
-        background-size: 100% 100%;
-        color: #00fffc;
-      }
+      // &:hover {
+      //   background: url("../../assets/person/tag-active.png") no-repeat;
+      //   background-size: 100% 100%;
+      //   color: #00fffc;
+      // }
     }
 
     .main-tag-item_active {
       background: url("../../assets/person/tag-active.png") no-repeat;
-      background-size: cover;
+      background-size: 100% 100%;
+      color: #00fffc;
     }
 
     .person-main-person {

From 73cb3d57c68354542fcccc2ebe3ec6c418a24dca Mon Sep 17 00:00:00 2001
From: duanxiaohai <1812246227@qq.com>
Date: Fri, 9 Aug 2024 11:20:56 +0800
Subject: [PATCH 2/2] gx

---
 src/view/person/index.vue | 30 ++++++++++++++----------------
 1 file changed, 14 insertions(+), 16 deletions(-)

diff --git a/src/view/person/index.vue b/src/view/person/index.vue
index 5b7ebd9..d8c4048 100644
--- a/src/view/person/index.vue
+++ b/src/view/person/index.vue
@@ -80,10 +80,8 @@
         <div
           v-for="(item, index) in dataMyTag.myTag1"
           class="main-tag-item"
-          :class="
-            item.name == dataMyTag.myTagshow ? 'main-tag-item_active' : ''
-          "
-          @click="onClickTag2(item, index)"
+          :class="item.name == tableType.title ? 'main-tag-item_active' : ''"
+          @click="onClickTag2(item.name)"
         >
           <span v-if="item.name == '退休养老'"> 退休<br />养老</span>
           <span v-else>{{ item.name }}</span>
@@ -95,9 +93,9 @@
         </div>
       </div>
       <div class="person-side">
-        <div v-if="rightList.value < 1">
+        <div v-if="rightList.length < 1">
           <div class="my-label">
-            <div class="my-label-title">养老金发放情况</div>
+            <div class="my-label-title">{{ tableType.title }}</div>
           </div>
           <div class="my-table">
             <el-table
@@ -119,11 +117,12 @@
                 color: '#fff',
               }"
             >
-              <template v-for="item in dataMyTag.tableList">
+              <template v-for="item in tableType.columns">
                 <el-table-column
                   :width="item.width"
-                  :prop="item.name"
+                  :prop="item.property"
                   :label="item.label"
+                  align="center"
                 >
                 </el-table-column>
               </template>
@@ -395,7 +394,6 @@ const dataMyTag = reactive({
       name: "综合",
     },
   ],
-  myTagshow: "出生",
   /**
    * @type {Array}
    * @description 表格配置
@@ -486,7 +484,7 @@ const pagination1 = reactive({
 const dialogShow = ref(false);
 const tableType = reactive({
   url: "",
-  title: "",
+  title: "出生",
   columns: [],
   data: [],
 });
@@ -675,13 +673,11 @@ const onClickTag = (item) => {
   dialogShow.value = true;
 };
 //圆球弹框
-const onClickTag2 = (val, index) => {
-  dataMyTag.myTagshow = val.name;
-  tableType.title = val.name;
-  tableType.url = columnsList[val.name].url;
-  tableType.columns = columnsList[val.name].column;
+const onClickTag2 = (name) => {
+  tableType.title = name;
+  tableType.url = columnsList[name].url;
+  tableType.columns = columnsList[name].column;
   getTable(tableType.url);
-  dialogShow.value = true;
 };
 const paginationDialog = reactive({
   current: 1,
@@ -815,6 +811,7 @@ watch(
     identNo.value = props.message.identNo;
     getData(props.message.identNo);
     getYlj();
+    onClickTag2("出生");
     jump.value = "map";
   }
 );
@@ -827,6 +824,7 @@ onMounted(() => {
     // getData("3");
     // identNo.value="3"
     getYlj();
+    onClickTag2("出生");
   } else {
     jump.value = "map";
   }