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) {
--el-dialog-bg-color: none;
--el-dialog-width: 55% !important;
--el-dialog-margin-top: 7vh;
--el-dialog-margin-top: 11vh;
}
.my-header {

View File

@ -240,7 +240,9 @@ const selectChange1 = (e) => {
:deep(.el-dialog) {
--el-dialog-bg-color: none;
--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 {

View File

@ -3,12 +3,9 @@
<div class="person-content">
<div class="person-side">
<div class="my-label">
<div class="my-label-title">
基本信息
</div>
<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">
@ -18,7 +15,7 @@
<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">
@ -30,7 +27,7 @@
<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">
@ -60,13 +57,19 @@
</div>
</div>
<div class="my-label">
<div class="my-label-title">
标签
</div>
<div class="my-label-title">标签</div>
</div>
<div class="my-tag">
<div class="my-tag-item" v-for="item in 25" :key="item" @click="onClickTag(item)">
<p>标签</p>
<div
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>
@ -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">退休<br />养老</div>
<div class="main-tag-item">身后事</div>
<div class="main-tag-item">综合</div>
<div class="person-main-person">
</div>
<div class="person-main-person"></div>
</div>
<div class="person-side">
<div class="my-label">
<div class="my-label-title">
养老金发放情况
</div>
<div class="my-label-title">养老金发放情况</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 prop="sum" label="发放金额(元)" width="160" align="center" />
}"
>
<el-table-column
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"
:total="pagination.total" prev-text="上一页" next-text="下一页"
v-model:current-page="pagination.currentPage" @current-change="handlePagination" />
<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="handlePagination"
/>
</div>
<div class="my-label">
<div class="my-label-title">
医疗金发放情况
</div>
<div class="my-label-title">医疗金发放情况</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 prop="sum" label="使用金额" width="115" align="center" />
<el-table-column prop="sum" label="详情" width="135" align="center" />
}"
>
<el-table-column
prop="type"
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"
:total="pagination1.total" prev-text="上一页" next-text="下一页"
v-model:current-page="pagination1.currentPage" @current-change="handlePagination" />
</div>
<el-pagination
background
layout="prev, pager, next"
: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"
:tableData="tableType.data" :pagination="paginationDialog" @close="close" @handle="handlePagination">
</div>
<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: '基础养老金',
date: '2022-01-01',
sum: '1000'
type: "基础养老金",
date: "2022-01-01",
sum: "1000",
},
{
type: '基础养老金',
date: '2022-01-01',
sum: '1000'
type: "基础养老金",
date: "2022-01-01",
sum: "1000",
},
{
type: '基础养老金',
date: '2022-01-01',
sum: '1000'
type: "基础养老金",
date: "2022-01-01",
sum: "1000",
},
{
type: '基础养老金',
date: '2022-01-01',
sum: '1000'
type: "基础养老金",
date: "2022-01-01",
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)
}
const baseInfo=ref({
})
console.log(pagination);
};
const baseInfo = ref({});
const data1 = ref([
{
type: '职工医疗',
date: '2023/12',
sum: '500',
info: '人民医院******'
type: "职工医疗",
date: "2023/12",
sum: "500",
info: "人民医院******",
},
{
type: '职工医疗',
date: '2023/12',
sum: '500',
info: '人民医院******'
type: "职工医疗",
date: "2023/12",
sum: "500",
info: "人民医院******",
},
{
type: '职工医疗',
date: '2023/12',
sum: '500',
info: '人民医院******'
type: "职工医疗",
date: "2023/12",
sum: "500",
info: "人民医院******",
},
{
type: '职工医疗',
date: '2023/12',
sum: '500',
info: '人民医院******'
type: "职工医疗",
date: "2023/12",
sum: "500",
info: "人民医院******",
},
])
]);
const pagination1 = reactive({
current: 1,
pageSize: 5,
total: 50,
showTotal: 0
})
const dialogShow = ref(false)
showTotal: 0,
});
const dialogShow = ref(false);
const tableType = reactive({
title: '基础养老金',
title: "基础养老金",
columns: [
{
label: "领取日期",
@ -231,53 +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) => {
http
.get(
`/api/ggfwyth/ysyzt/getRysmzqDetails?nm=${nm}&identNo=${
identNo
}`
)
.get(`/api/ggfwyth/ysyzt/getRysmzqDetails?nm=${nm}&identNo=${identNo}`)
.then((res) => {
if (res.code == 200) {
baseInfo.value = res.data;
dataMyTag.myTag.map((item) => {
item.show = res.data[item.jkName];
console.log(res.data[item.jkName],555);
});
}
});
}
};
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 {
@ -292,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);
@ -305,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;
@ -315,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;
@ -361,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%;
@ -380,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;
@ -420,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;
@ -430,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 {
@ -477,7 +621,7 @@ onMounted(()=>{
&::-webkit-scrollbar-thumb {
border-radius: 2px;
background: #FFFFFF;
background: #ffffff;
}
&::-webkit-scrollbar-track {
@ -485,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;
@ -570,7 +712,6 @@ onMounted(()=>{
border: 1px solid #6bade1;
}
}
}
}
}

View File

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

View File

@ -50,6 +50,7 @@
<el-table
border
:data="data.tableData"
max-height="280"
style="width: 100%; height: 280x"
class="table_border"
:row-style="rowState"
@ -463,19 +464,37 @@ const data = reactive({
});
const tapshow = (parentId, childId) => {
// console.log(parentId, childId, "");
console.log(parentId, childId, "菜单名");
data.taps1 = parentId.id;
data.taps = childId;
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) => {
// console.log(val, "");
console.log(val, "最低生活保障");
data.tabPosition.forEach((parent) => {
parent.visible = false;
if (parent.id === val.id) {
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(() => {
getData("弱有所扶", "社会救助服务");
sevenYX("弱有众扶");
});
// onMounted(() => {
// let token = tools.data.get("token");