This commit is contained in:
姚宇浩 2024-08-02 16:36:10 +08:00
commit ffd222dd88
5 changed files with 703 additions and 518 deletions

View File

@ -188,7 +188,7 @@ const closeDialog = () => {
:deep(.el-dialog) { :deep(.el-dialog) {
--el-dialog-bg-color: none; --el-dialog-bg-color: none;
--el-dialog-width: 55% !important; --el-dialog-width: 55% !important;
--el-dialog-margin-top: 7vh; --el-dialog-margin-top: 11vh;
} }
.my-header { .my-header {

View File

@ -240,7 +240,9 @@ const selectChange1 = (e) => {
:deep(.el-dialog) { :deep(.el-dialog) {
--el-dialog-bg-color: none; --el-dialog-bg-color: none;
--el-dialog-width: 76% !important; --el-dialog-width: 76% !important;
--el-dialog-margin-top: 7vh; --el-dialog-margin-top: 11vh;
// --el-dialog-margin-bottom: 0px !important;
margin-bottom: 0px !important;
} }
.my-header { .my-header {

View File

@ -3,34 +3,31 @@
<div class="person-content"> <div class="person-content">
<div class="person-side"> <div class="person-side">
<div class="my-label"> <div class="my-label">
<div class="my-label-title"> <div class="my-label-title">基本信息</div>
基本信息
</div>
</div> </div>
<div class="my-info"> <div class="my-info">
<div class="my-info-item"> <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"> <div class="my-info-content">
<p>{{baseInfo.nm}}</p> <p>{{ baseInfo.nm }}</p>
</div> </div>
</div> </div>
<div class="my-info-item"> <div class="my-info-item">
<div class="my-info-label">证件类型</div> <div class="my-info-label">证件类型</div>
<div class="my-info-content"> <div class="my-info-content">
<p>{{baseInfo.zjlx || '身份证'}}</p> <p>{{ baseInfo.zjlx || "身份证" }}</p>
</div> </div>
</div> </div>
<div class="my-info-item"> <div class="my-info-item">
<div class="my-info-label">证件号码</div> <div class="my-info-label">证件号码</div>
<div class="my-info-content"> <div class="my-info-content">
<p>{{baseInfo.identNo}}</p> <p>{{ baseInfo.identNo }}</p>
</div> </div>
</div> </div>
<div class="my-info-item"> <div class="my-info-item">
<div class="my-info-label">政治面貌</div> <div class="my-info-label">政治面貌</div>
<div class="my-info-content"> <div class="my-info-content">
<p>{{baseInfo.zzmm || ''}}</p> <p>{{ baseInfo.zzmm || "" }}</p>
</div> </div>
</div> </div>
<div class="my-info-item"> <div class="my-info-item">
@ -41,32 +38,38 @@
</div> </div>
</div> </div>
<div class="my-info-item"> <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"> <div class="my-info-content">
<p>{{baseInfo.ethnic}}</p> <p>{{ baseInfo.ethnic }}</p>
</div> </div>
</div> </div>
<div class="my-info-item"> <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"> <div class="my-info-content">
<p>{{baseInfo.gender}}</p> <p>{{ baseInfo.gender }}</p>
</div> </div>
</div> </div>
<div class="my-info-item"> <div class="my-info-item">
<div class="my-info-label">户口登记地</div> <div class="my-info-label">户口登记地</div>
<div class="my-info-content"> <div class="my-info-content">
<p>{{baseInfo.domicAddr}}</p> <p>{{ baseInfo.domicAddr }}</p>
</div> </div>
</div> </div>
</div> </div>
<div class="my-label"> <div class="my-label">
<div class="my-label-title"> <div class="my-label-title">标签</div>
标签
</div>
</div> </div>
<div class="my-tag"> <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> </div>
</div> </div>
@ -74,80 +77,143 @@
<div class="main-tag-item">出生</div> <div class="main-tag-item">出生</div>
<div class="main-tag-item">学习</div> <div class="main-tag-item">学习</div>
<div class="main-tag-item">工作</div> <div class="main-tag-item">工作</div>
<div class="main-tag-item">置业</div>
<div class="main-tag-item">婚育</div> <div class="main-tag-item">婚育</div>
<div class="main-tag-item">置业</div>
<div class="main-tag-item">退休<br />养老</div> <div class="main-tag-item">退休<br />养老</div>
<div class="main-tag-item">身后事</div> <div class="main-tag-item">身后事</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>
<div class="person-side"> <div class="person-side">
<div class="my-label"> <div class="my-label">
<div class="my-label-title"> <div class="my-label-title">养老金发放情况</div>
养老金发放情况
</div>
</div> </div>
<div class="my-table"> <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', border: 'none',
height: '60px', height: '60px',
fontSize: '18px', fontSize: '18px',
color: '#fff', color: '#fff',
}" :row-style="{ }"
:row-style="{
letterSpacing: '1px', letterSpacing: '1px',
fontSize: '16px', fontSize: '16px',
height: '50px', height: '50px',
backgroundColor: 'rgba(31, 63, 113, 1)', backgroundColor: 'rgba(31, 63, 113, 1)',
color: '#fff', 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-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>
<div class="my-label"> <div class="my-label">
<div class="my-label-title"> <div class="my-label-title">医疗金发放情况</div>
医疗金发放情况
</div>
</div> </div>
<div class="my-table"> <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', border: 'none',
height: '60px', height: '60px',
fontSize: '18px', fontSize: '18px',
color: '#fff', color: '#fff',
}" :row-style="{ }"
:row-style="{
letterSpacing: '1px', letterSpacing: '1px',
fontSize: '16px', fontSize: '16px',
height: '50px', height: '50px',
backgroundColor: 'rgba(31, 63, 113, 1)', backgroundColor: 'rgba(31, 63, 113, 1)',
color: '#fff', 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-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>
</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> </Dialog>
</div> </div>
</template> </template>
<script setup> <script setup>
import { reactive, ref,onMounted } from 'vue' import { reactive, ref, onMounted } from "vue";
import Dialog from "@/view/dialog/dialog.vue"; import Dialog from "@/view/dialog/dialog.vue";
import { useRouter, useRoute } from "vue-router"; import { useRouter, useRoute } from "vue-router";
import http from "@/utils/request.js"; import http from "@/utils/request.js";
@ -155,74 +221,150 @@ const router = useRouter();
const routers = useRoute(); const routers = useRoute();
const data = ref([ 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({ const pagination = reactive({
current: 1, current: 1,
pageSize: 5, pageSize: 5,
total: 50, total: 50,
showTotal: 0 showTotal: 0,
}) });
const handleTableChange = (pagination) => { const handleTableChange = (pagination) => {
console.log(pagination) console.log(pagination);
} };
const baseInfo=ref({ const baseInfo = ref({});
})
const data1 = 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({ const pagination1 = reactive({
current: 1, current: 1,
pageSize: 5, pageSize: 5,
total: 50, total: 50,
showTotal: 0 showTotal: 0,
}) });
const dialogShow = ref(false) const dialogShow = ref(false);
const tableType = reactive({ const tableType = reactive({
title: '基础养老金', title: "基础养老金",
columns: [ columns: [
{ {
label: "领取日期", label: "领取日期",
@ -231,53 +373,54 @@ const tableType = reactive({
{ {
label: "领取医院", label: "领取医院",
property: "hospital", property: "hospital",
}, { },
{
label: "详情", label: "详情",
property: "info", property: "info",
}, },
], ],
data: [], data: [],
}) });
const onClickTag = (item) => { const onClickTag = (item) => {
dialogShow.value = true dialogShow.value = true;
} };
const paginationDialog = reactive({ const paginationDialog = reactive({
current: 1, current: 1,
pageSize: 5, pageSize: 5,
total: 50, total: 50,
showTotal: 0 showTotal: 0,
}) });
const close = (pagination) => { const close = (pagination) => {
dialogShow.value = false dialogShow.value = false;
} };
const handlePagination = (pagination) => { const handlePagination = (pagination) => {
dialogShow.value = false dialogShow.value = false;
} };
const getData =(nm,identNo)=>{ const getData = (nm, identNo) => {
http http
.get( .get(`/api/ggfwyth/ysyzt/getRysmzqDetails?nm=${nm}&identNo=${identNo}`)
`/api/ggfwyth/ysyzt/getRysmzqDetails?nm=${nm}&identNo=${
identNo
}`
)
.then((res) => { .then((res) => {
if (res.code == 200) { 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); // console.log(routers.query);
// getData(routers.query.nm,routers.query.identNo) getData(routers.query.nm, routers.query.identNo);
});
})
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.person-container { .person-container {
width: 100%; width: 100%;
height: 100%; height: 100%;
background: url('../../assets/person/bg.png') no-repeat; background: url("../../assets/person/bg.png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
.person-content { .person-content {
@ -292,7 +435,17 @@ onMounted(()=>{
.person-side { .person-side {
width: 480px; width: 480px;
height: 100%; 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); box-shadow: inset 0px 0px 56px 0px rgba(173, 221, 255, 0.5);
border-radius: 8px; border-radius: 8px;
backdrop-filter: blur(3px); backdrop-filter: blur(3px);
@ -305,7 +458,7 @@ onMounted(()=>{
height: 100%; height: 100%;
.main-tag-item { .main-tag-item {
background: url('../../assets/person/tag.png') no-repeat; background: url("../../assets/person/tag.png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
width: 100px; width: 100px;
height: 100px; height: 100px;
@ -315,7 +468,7 @@ onMounted(()=>{
font-size: 20px; font-size: 20px;
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-weight: bold; font-weight: bold;
color: #FFFFFF; color: #ffffff;
position: absolute; position: absolute;
cursor: pointer; cursor: pointer;
z-index: 5; z-index: 5;
@ -361,18 +514,16 @@ onMounted(()=>{
} }
&:hover { &:hover {
background: url('../../assets/person/tag-active.png') no-repeat; background: url("../../assets/person/tag-active.png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
} }
} }
.main-tag-item_active { .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; background-size: cover;
} }
.person-main-person { .person-main-person {
position: absolute; position: absolute;
top: 55%; top: 55%;
@ -380,14 +531,14 @@ onMounted(()=>{
transform: translate(-50%, -48%); transform: translate(-50%, -48%);
width: 340px; width: 340px;
height: 813px; height: 813px;
background: url('../../assets/person/person.png') no-repeat; background: url("../../assets/person/person.png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
z-index: 3; z-index: 3;
} }
} }
.my-label { .my-label {
background: url('../../assets/person/label.png') no-repeat; background: url("../../assets/person/label.png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
padding-left: 32px; padding-left: 32px;
padding-bottom: 16px; padding-bottom: 16px;
@ -420,7 +571,7 @@ onMounted(()=>{
font-family: PingFangSC, PingFang SC; font-family: PingFangSC, PingFang SC;
font-weight: 400; font-weight: 400;
font-size: 18px; font-size: 18px;
color: #A8E0FF; color: #a8e0ff;
line-height: 25px; line-height: 25px;
letter-spacing: 2px; letter-spacing: 2px;
@ -430,37 +581,30 @@ onMounted(()=>{
right: -10px; right: -10px;
top: 0; top: 0;
} }
} }
.my-info-content { .my-info-content {
margin-left: 18px; margin-left: 18px;
font-family: PingFangSC, PingFang SC; font-family: PingFangSC, PingFang SC;
font-weight: 500; font-weight: 500;
font-size: 18px; font-size: 18px;
color: #FFFFFF; color: #ffffff;
line-height: 25px; line-height: 25px;
text-align: left; text-align: left;
font-style: normal; font-style: normal;
} }
.my-info-content { .my-info-content {
font-family: PingFangSC, PingFang SC; font-family: PingFangSC, PingFang SC;
font-weight: 500; font-weight: 500;
font-size: 18px; font-size: 18px;
color: #FFFFFF; color: #ffffff;
line-height: 25px; line-height: 25px;
letter-spacing: 1px; letter-spacing: 1px;
text-align: left; text-align: left;
font-style: normal; font-style: normal;
} }
} }
} }
.my-tag { .my-tag {
@ -477,7 +621,7 @@ onMounted(()=>{
&::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb {
border-radius: 2px; border-radius: 2px;
background: #FFFFFF; background: #ffffff;
} }
&::-webkit-scrollbar-track { &::-webkit-scrollbar-track {
@ -485,18 +629,16 @@ onMounted(()=>{
background: rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.2);
} }
.my-tag-item { .my-tag-item {
display: inline-block; display: inline-block;
background: rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.2);
border-radius: 2px; border-radius: 2px;
border: 1px solid #FFFFFF; border: 1px solid #ffffff;
padding: 10px 20px; padding: 10px 20px;
font-family: PingFangSC, PingFang SC; font-family: PingFangSC, PingFang SC;
font-weight: 500; font-weight: 500;
font-size: 16px; font-size: 16px;
color: #FFFFFF; color: #ffffff;
line-height: 22px; line-height: 22px;
letter-spacing: 2px; letter-spacing: 2px;
text-align: center; text-align: center;
@ -570,7 +712,6 @@ onMounted(()=>{
border: 1px solid #6bade1; border: 1px solid #6bade1;
} }
} }
} }
} }
} }

View File

@ -47,7 +47,7 @@
'below-line2': index % 2 === 0, 'below-line2': index % 2 === 0,
}, },
]" ]"
>{{ item.progress + "%" }}</span >{{ (item.progress).toFixed(2) + "%" }}</span
> >
<span <span
style="color: #fff; white-space: nowrap" style="color: #fff; white-space: nowrap"

View File

@ -50,6 +50,7 @@
<el-table <el-table
border border
:data="data.tableData" :data="data.tableData"
max-height="280"
style="width: 100%; height: 280x" style="width: 100%; height: 280x"
class="table_border" class="table_border"
:row-style="rowState" :row-style="rowState"
@ -463,19 +464,37 @@ const data = reactive({
}); });
const tapshow = (parentId, childId) => { const tapshow = (parentId, childId) => {
// console.log(parentId, childId, ""); console.log(parentId, childId, "菜单名");
data.taps1 = parentId.id; data.taps1 = parentId.id;
data.taps = childId; data.taps = childId;
getData(parentId.name, parentId.son[childId].name); getData(parentId.name, parentId.son[childId].name);
//
const menuName = [
"幼有善育",
"学有优教",
"劳有所得",
"病有良医",
"老有康养",
"住有宜居",
"弱有众扶",
];
// parentId menuName
const firstChar = parentId.name.charAt(0);
const matchingMenu = menuName.find((name) => name.charAt(0) === firstChar);
if (matchingMenu) {
sevenYX(matchingMenu);
}
}; };
const toggleVisibility = (val) => { const toggleVisibility = (val) => {
// console.log(val, ""); console.log(val, "最低生活保障");
data.tabPosition.forEach((parent) => { data.tabPosition.forEach((parent) => {
parent.visible = false; parent.visible = false;
if (parent.id === val.id) { if (parent.id === val.id) {
parent.visible = !parent.visible; parent.visible = !parent.visible;
} }
}); });
tapshow(val,0)
}; };
// //
@ -533,9 +552,32 @@ const getData = async (name, fullName) => {
} }
}); });
}; };
const sevenYX = (name) => {
http.get(`/api/ggfwyth/pg/qyx?ly=${name}`).then((res) => {
if (res.code == 200) {
console.log(res.data, "七优享");
data.tableData = [];
if (res.data.length > 0) {
res.data.forEach((item, index) => {
data.tableData.push({
highFrequencyApp: item.zb, //
targetValue: item.mbz, //()
targetValue1: item.mbz, ////()
targetValue2: item.wcz, //
targetValue3: item.sspm, //
targetValue4: item.zbqk, //
targetValue5: item.qtdw, //
targetValue6: item.zrdw, //
});
});
}
}
});
};
onMounted(() => { onMounted(() => {
getData("弱有所扶", "社会救助服务"); getData("弱有所扶", "社会救助服务");
sevenYX("弱有众扶");
}); });
// onMounted(() => { // onMounted(() => {
// let token = tools.data.get("token"); // let token = tools.data.get("token");