xiangshan
/
ggfwjsc
22
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

gx

This commit is contained in:
duanxiaohai 2024-08-02 16:34:44 +08:00
parent 26cf5693bf
commit 0f2b4e4bb3
2 changed files with 655 additions and 513 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

424
src/view/person/index.vue
View File

@ -3,34 +3,31 @@
<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-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>
<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>
@ -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>
<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,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
}
const getData =(nm,identNo)=>{
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;
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;
}
}
}
}
}

2
src/view/sy_table.vue
View File

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