dai
3 years ago
12 changed files with 1144 additions and 210 deletions
|
After Width: | Height: | Size: 597 B |
@ -0,0 +1,66 @@ |
|||
@import "../c/config"; |
|||
@import "../c/function"; |
|||
@import "./c/common"; |
|||
|
|||
.m-info { |
|||
padding: 20px 50px 10px; |
|||
|
|||
.subtitle { |
|||
display: flex; |
|||
margin-left: -10px; |
|||
padding: 10px; |
|||
align-items: center; |
|||
font-size: 16px; |
|||
font-family: PingFangSC-Medium, PingFang SC; |
|||
font-weight: 500; |
|||
color: rgba(255, 255, 255, 0.85); |
|||
line-height: 22px; |
|||
|
|||
.i-chunk { |
|||
margin-right: 5px; |
|||
width: 4px; |
|||
height: 12px; |
|||
background: #1a95ff; |
|||
border-radius: 1px; |
|||
} |
|||
|
|||
.i-line { |
|||
margin-left: 8px; |
|||
flex: 1; |
|||
width: 100%; |
|||
height: 1px; |
|||
border: 1px dashed rgba(26, 149, 255, 0.45); |
|||
} |
|||
} |
|||
|
|||
.row { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
|
|||
.item { |
|||
display: flex; |
|||
padding: 15px 0; |
|||
min-width: 50%; |
|||
line-height: 24px; |
|||
|
|||
.field { |
|||
width: 80px; |
|||
font-size: 14px; |
|||
text-align: right; |
|||
font-family: PingFangSC-Regular, PingFang SC; |
|||
font-weight: 400; |
|||
color: rgba(#ffffff, 0.5); |
|||
} |
|||
|
|||
.value { |
|||
flex: 1; |
|||
width: 100%; |
|||
margin-left: 10px; |
|||
font-size: 14px; |
|||
font-family: PingFangSC-Regular, PingFang SC; |
|||
font-weight: 400; |
|||
color: rgba(#ffffff, 0.85); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,135 @@ |
|||
<template> |
|||
<popup title="房屋详情" @close="handleClose"> |
|||
<template v-slot:cnt> |
|||
<div class="m-info"> |
|||
<div class="row"> |
|||
<div class="item"> |
|||
<div class="field">所属小区：</div> |
|||
<div class="value">{{ info.village }}</div> |
|||
</div> |
|||
<div class="item"> |
|||
<div class="field">所属楼栋：</div> |
|||
<div class="value">{{ info.building }}</div> |
|||
</div> |
|||
<div class="item"> |
|||
<div class="field">单元号：</div> |
|||
<div class="value">{{ info.unit }}</div> |
|||
</div> |
|||
<div class="item"> |
|||
<div class="field">门牌号：</div> |
|||
<div class="value">{{ info.door }}</div> |
|||
</div> |
|||
<div class="item"> |
|||
<div class="field">房屋类型：</div> |
|||
<div class="value">{{ info.house_type }}</div> |
|||
</div> |
|||
<div class="item"> |
|||
<div class="field">房屋用途：</div> |
|||
<div class="value">{{ info.house_usage }}</div> |
|||
</div> |
|||
<div class="item"> |
|||
<div class="field">房屋状态：</div> |
|||
<div class="value">{{ info.house_state }}</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="row"> |
|||
<div class="item"> |
|||
<div class="field">房主姓名：</div> |
|||
<div class="value">{{ info.holder_name }}</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="row"> |
|||
<div class="item"> |
|||
<div class="field">联系电话：</div> |
|||
<div class="value">{{ info.holder_phone }}</div> |
|||
</div> |
|||
<div class="item"> |
|||
<div class="field">证件号：</div> |
|||
<div class="value">{{ info.holder_idcard }}</div> |
|||
</div> |
|||
<div class="item"> |
|||
<div class="field">备注：</div> |
|||
<div class="value">{{ info.remark }}</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
</popup> |
|||
</template> |
|||
|
|||
<script> |
|||
import popup from "@/views/dataBoard/cpts/popup"; |
|||
import { requestPostBi } from "@/js/dai/request-bipass"; |
|||
|
|||
export default { |
|||
name: "houseDetails", |
|||
props: { |
|||
houseId: { |
|||
type: String, |
|||
default: "", |
|||
}, |
|||
}, |
|||
|
|||
components: { popup }, |
|||
|
|||
data() { |
|||
return { |
|||
info: { |
|||
village: "--", |
|||
building: "--", |
|||
unit: "--", |
|||
door: "--", |
|||
house_type: "--", |
|||
house_usage: "--", |
|||
house_state: "--", |
|||
holder_name: "--", |
|||
holder_phone: "--", |
|||
holder_idcard: "--", |
|||
remark: "--", |
|||
house_id: "--", |
|||
}, |
|||
}; |
|||
}, |
|||
|
|||
mounted() { |
|||
this.getApiData(); |
|||
}, |
|||
|
|||
methods: { |
|||
handleClose() { |
|||
this.$emit("close"); |
|||
}, |
|||
|
|||
async getApiData() { |
|||
this.getInfo(); |
|||
}, |
|||
|
|||
// 根据房屋id获取详情 |
|||
async getInfo() { |
|||
const url = "house_info"; |
|||
|
|||
const { data, code, msg } = await requestPostBi( |
|||
url, |
|||
{ |
|||
queryParam: { |
|||
house_id: this.houseId, |
|||
}, |
|||
}, |
|||
{ |
|||
mockId: 60235478, |
|||
} |
|||
); |
|||
|
|||
if (code === 0) { |
|||
this.info = { ...this.info, ...data[0] }; |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" src="@/assets/scss/dataBoard/popup-info.scss" scoped></style> |
|||
@ -0,0 +1,153 @@ |
|||
<template> |
|||
<div class="m-pop"> |
|||
<div class="wrap"> |
|||
<div> |
|||
<div class="title"> |
|||
<img |
|||
src="@/assets/images/shuju/main/card-subtitle-icon.png" |
|||
/> |
|||
<span>{{ title }}</span> |
|||
<i class="i-lin"></i> |
|||
</div> |
|||
|
|||
<div class="btn-close" @click="handleClose"> |
|||
<img src="@/assets/images/shuju/main/close.png" /> |
|||
</div> |
|||
|
|||
<div |
|||
class="cnt" |
|||
:style="{ |
|||
maxHeight: $store.state.fixed1920.height - 280 + 'px', |
|||
}" |
|||
> |
|||
<slot name="cnt"></slot> |
|||
</div> |
|||
|
|||
<div class="operate"> |
|||
<div class="btn" @click="handleClose">关闭</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: "popup", |
|||
|
|||
props: { |
|||
title: { |
|||
type: String, |
|||
default: "详情", |
|||
}, |
|||
}, |
|||
|
|||
components: {}, |
|||
|
|||
data() { |
|||
return {}; |
|||
}, |
|||
|
|||
mounted() {}, |
|||
|
|||
methods: { |
|||
handleClose() { |
|||
this.$emit("close"); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import "~@/assets/scss/c/config.scss"; |
|||
@import "~@/assets/scss/c/function.scss"; |
|||
@import "~@/assets/scss/dataBoard/c/common.scss"; |
|||
|
|||
.m-pop { |
|||
@include shield; |
|||
background-color: rgba(#000, 0.65); |
|||
|
|||
.wrap { |
|||
position: relative; |
|||
box-sizing: border-box; |
|||
margin: 80px auto 0; |
|||
padding: 24px 16px; |
|||
width: 820px; |
|||
background: #00023a; |
|||
box-shadow: inset 0px 0px 40px 0px rgba(26, 149, 255, 0.45); |
|||
border-radius: 4px; |
|||
border: 1px solid #1a95ff; |
|||
|
|||
.cnt { |
|||
overflow-y: auto; |
|||
@include scrollBar; |
|||
} |
|||
|
|||
.title { |
|||
margin-bottom: 10px; |
|||
padding: 4px 2px; |
|||
font-size: 16px; |
|||
font-family: PingFangSC-Medium, PingFang SC; |
|||
font-weight: 500; |
|||
color: rgba(#ffffff, 0.85); |
|||
line-height: 22px; |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
img { |
|||
display: block; |
|||
margin-right: 5px; |
|||
width: 17px; |
|||
} |
|||
|
|||
span { |
|||
display: block; |
|||
} |
|||
.i-line { |
|||
position: relative; |
|||
display: block; |
|||
width: 160px; |
|||
height: 1px; |
|||
background: linear-gradient( |
|||
270deg, |
|||
rgba(55, 198, 255, 0.1) 0%, |
|||
#1995ff 100% |
|||
); |
|||
} |
|||
} |
|||
|
|||
.btn-close { |
|||
position: absolute; |
|||
top: 24px; |
|||
right: 16px; |
|||
cursor: pointer; |
|||
img { |
|||
width: 16px; |
|||
} |
|||
} |
|||
|
|||
.operate { |
|||
display: flex; |
|||
.btn { |
|||
margin-left: auto; |
|||
display: block; |
|||
width: 60px; |
|||
height: 32px; |
|||
border-radius: 2px; |
|||
border: 1px solid rgba(255, 255, 255, 0.45); |
|||
font-size: 14px; |
|||
font-family: PingFangSC-Regular, PingFang SC; |
|||
font-weight: 400; |
|||
color: #ffffff; |
|||
line-height: 32px; |
|||
text-align: center; |
|||
cursor: pointer; |
|||
opacity: 0.85; |
|||
&:hover { |
|||
opacity: 1; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,378 @@ |
|||
<template> |
|||
<popup title="居民详情" @close="handleClose"> |
|||
<template v-slot:cnt> |
|||
<div class="m-info"> |
|||
<div class="subtitle"> |
|||
<i class="i-chunk"></i> |
|||
<span>基本信息</span> |
|||
<i class="i-line"></i> |
|||
</div> |
|||
<div class="row"> |
|||
<div class="item"> |
|||
<div class="field">所属网格：</div> |
|||
<div class="value"> |
|||
{{ info.community + " - " + info.grid }} |
|||
</div> |
|||
</div> |
|||
<div class="item"> |
|||
<div class="field">所属房屋：</div> |
|||
<div class="value"> |
|||
{{ |
|||
info.village + |
|||
" - " + |
|||
info.building + |
|||
" - " + |
|||
info.unit + |
|||
" - " + |
|||
info.room |
|||
}} |
|||
</div> |
|||
</div> |
|||
<div class="item"> |
|||
<div class="field">本地户籍：</div> |
|||
<div class="value">{{ info.census_type }}</div> |
|||
</div> |
|||
</div> |
|||
<div class="row"> |
|||
<div class="item"> |
|||
<div class="field">居民姓名：</div> |
|||
<div class="value">{{ info.name }}</div> |
|||
</div> |
|||
<div class="item"> |
|||
<div class="field">出生日期：</div> |
|||
<div class="value">{{ info.birthday }}</div> |
|||
</div> |
|||
<div class="item"> |
|||
<div class="field">性别：</div> |
|||
<div class="value">{{ info.gender }}</div> |
|||
</div> |
|||
<div class="item"> |
|||
<div class="field">民族：</div> |
|||
<div class="value">{{ info.ethnic }}</div> |
|||
</div> |
|||
<div class="item"> |
|||
<div class="field">联系电话：</div> |
|||
<div class="value">{{ info.telephone }}</div> |
|||
</div> |
|||
<div class="item"> |
|||
<div class="field">证件号：</div> |
|||
<div class="value">{{ info.idcard }}</div> |
|||
</div> |
|||
<div class="item"> |
|||
<div class="field">备注：</div> |
|||
<div class="value">{{ info.resident_remark }}</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="subtitle"> |
|||
<i class="i-chunk"></i> |
|||
<span>分类信息</span> |
|||
<i class="i-line"></i> |
|||
</div> |
|||
|
|||
<div class="row"> |
|||
<div class="item"> |
|||
<div class="field">居民分类：</div> |
|||
<div class="value"> |
|||
<div class="u-categorys"> |
|||
<span v-if="info.crowd">党员</span> |
|||
<span v-if="info.mlsp">低保人员</span> |
|||
<span v-if="info.srs">保障房人员</span> |
|||
<span v-if="info.unemployed">失业人员</span> |
|||
<span v-if="info.woca">育龄妇女</span> |
|||
<span v-if="info.exs">退役军人</span> |
|||
<span v-if="info.ufs">统战人员</span> |
|||
<span v-if="info.petitioner">信访人员</span> |
|||
<span v-if="info.volunteer">志愿者</span> |
|||
<span v-if="info.in_person">失独人员</span> |
|||
<span v-if="info.tenant">租户</span> |
|||
<span v-if="info.float_popu">流动人口</span> |
|||
<span v-if="info.special_popu">特殊人群</span> |
|||
<span v-if="info.aaaa">独居老人</span> |
|||
<span v-if="info.empty_nest">空巢老人</span> |
|||
<span v-if="info.disability">失能老人</span> |
|||
<span v-if="info.dementia">失智老人</span> |
|||
<span v-if="info.adisability">残疾</span> |
|||
<span v-if="info.ser_ill">大病</span> |
|||
<span v-if="info.ncd">慢病</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="subtitle"> |
|||
<i class="i-chunk"></i> |
|||
<span>其他信息</span> |
|||
<i class="i-line"></i> |
|||
</div> |
|||
|
|||
<div class="m-tabs"> |
|||
<div |
|||
class="tab-btn" |
|||
@click="subStartTabIndex" |
|||
v-if="tabList.length > 7" |
|||
> |
|||
<img |
|||
src="@/assets/img/shuju/people/arrow-double-left.png" |
|||
/> |
|||
</div> |
|||
<div |
|||
v-show=" |
|||
index >= startTabIndex && index < startTabIndex + 7 |
|||
" |
|||
class="tab" |
|||
:class=" |
|||
currentTabIndex % tabList.length == index |
|||
? 'z-on' |
|||
: '' |
|||
" |
|||
:key="'tab' + index" |
|||
@click="currentTabIndex = index" |
|||
v-for="(item, index) in tabList" |
|||
> |
|||
{{ item }} |
|||
</div> |
|||
<div |
|||
class="tab-btn" |
|||
@click="addStartTabIndex" |
|||
v-if="tabList.length > 7" |
|||
> |
|||
<img |
|||
src="@/assets/img/shuju/people/arrow-double-right.png" |
|||
/> |
|||
</div> |
|||
</div> |
|||
|
|||
<div v-if="currentTab == '教育信息'"> |
|||
<div class="row"> |
|||
<div class="item"> |
|||
<div class="field">文化程度：</div> |
|||
<div class="value">{{ info.education }}</div> |
|||
</div> |
|||
<div class="item"> |
|||
<div class="field">备注：</div> |
|||
<div class="value">{{ info.education_remark }}</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
</popup> |
|||
</template> |
|||
|
|||
<script> |
|||
import popup from "@/views/dataBoard/cpts/popup"; |
|||
import { requestPostBi } from "@/js/dai/request-bipass"; |
|||
|
|||
export default { |
|||
name: "residentDetails", |
|||
props: { |
|||
resiId: { |
|||
type: String, |
|||
default: "", |
|||
}, |
|||
}, |
|||
|
|||
components: { popup }, |
|||
|
|||
data() { |
|||
return { |
|||
info: { |
|||
woca: true, |
|||
exs: false, |
|||
srs: true, |
|||
household: "--", |
|||
holdingrel: "--", |
|||
ethnic: "--", |
|||
community: "--", |
|||
user_id: "--", |
|||
census_type: "--", |
|||
aged: true, |
|||
spouse: "--", |
|||
mlsp: false, |
|||
ncp: true, |
|||
disable_idcard: "--", |
|||
volunteer: false, |
|||
village: "--", |
|||
disable_degree: "--", |
|||
marital: "--", |
|||
native_place: "--", |
|||
disable_type: "--", |
|||
building: "--", |
|||
disable_remark: "--", |
|||
skill: "--", |
|||
petitioner: true, |
|||
unemployed: true, |
|||
needs_group: "--", |
|||
hobby: "--", |
|||
unit: "--", |
|||
gender: "--", |
|||
retire_income: "--", |
|||
workunit: "--", |
|||
ufs: false, |
|||
birthday: "--", |
|||
in_person: false, |
|||
adisability: false, |
|||
household_remark: "--", |
|||
belief: "--", |
|||
education_remark: "--", |
|||
education: "--", |
|||
residence_current: "--", |
|||
career: "--", |
|||
empty_nest: false, |
|||
idcard: "--", |
|||
room: "--", |
|||
guardian: "--", |
|||
tenant: true, |
|||
residence: "--", |
|||
supporters: "--", |
|||
ser_ill: false, |
|||
ncd: true, |
|||
belief_remark: "--", |
|||
dementia: false, |
|||
disability: true, |
|||
telephone: "--", |
|||
income: "--", |
|||
native: "--", |
|||
crowd: false, |
|||
resident_remark: "--", |
|||
hobby_remark: "--", |
|||
retire_remark: "--", |
|||
special_popu: true, |
|||
street: "--", |
|||
float_popu: true, |
|||
supporters_relation: "--", |
|||
name: "--", |
|||
grid: "--", |
|||
retire_date: "--", |
|||
}, |
|||
|
|||
currentTabIndex: 0, |
|||
startTabIndex: 0, |
|||
tabList: [ |
|||
"教育信息", |
|||
"兴趣爱好", |
|||
"宗教信仰", |
|||
"健康信息", |
|||
"工作信息", |
|||
"经济状况", |
|||
"居住信息", |
|||
"家庭信息", |
|||
], |
|||
}; |
|||
}, |
|||
|
|||
computed: { |
|||
currentTab() { |
|||
return this.tabList[this.currentTabIndex]; |
|||
}, |
|||
}, |
|||
|
|||
mounted() { |
|||
this.getApiData(); |
|||
}, |
|||
|
|||
methods: { |
|||
addStartTabIndex() { |
|||
const { startTabIndex, tabList } = this; |
|||
if (startTabIndex < tabList.length - 7) { |
|||
this.startTabIndex = startTabIndex + 1; |
|||
} else { |
|||
this.startTabIndex = tabList.length - 7; |
|||
} |
|||
}, |
|||
subStartTabIndex() { |
|||
const { startTabIndex, tabList } = this; |
|||
if (startTabIndex > 0) { |
|||
this.startTabIndex = startTabIndex - 1; |
|||
} else { |
|||
this.startTabIndex = 0; |
|||
} |
|||
}, |
|||
|
|||
handleClose() { |
|||
this.$emit("close"); |
|||
}, |
|||
|
|||
async getApiData() { |
|||
this.getInfo(); |
|||
}, |
|||
|
|||
// 根据房屋id获取详情 |
|||
async getInfo() { |
|||
const url = "resident_info"; |
|||
|
|||
const { data, code, msg } = await requestPostBi( |
|||
url, |
|||
{ |
|||
queryParam: { |
|||
resident_id: this.resiId, |
|||
}, |
|||
}, |
|||
{ |
|||
mockId: 60069644, |
|||
} |
|||
); |
|||
|
|||
if (code === 0) { |
|||
this.info = { ...this.info, ...data[0] }; |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" src="@/assets/scss/dataBoard/popup-info.scss" scoped></style> |
|||
<style lang="scss" scoped> |
|||
@import "~@/assets/scss/c/config.scss"; |
|||
@import "~@/assets/scss/c/function.scss"; |
|||
|
|||
.u-categorys { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
|
|||
span { |
|||
display: block; |
|||
width: 90px; |
|||
} |
|||
} |
|||
|
|||
.m-tabs { |
|||
margin-top: 30px; |
|||
display: flex; |
|||
align-items: center; |
|||
padding-left: 20px; |
|||
|
|||
.tab-btn { |
|||
width: 30px; |
|||
text-align: center; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.tab { |
|||
@include toe; |
|||
margin: 0 5px; |
|||
min-width: 72px; |
|||
padding: 0 8px; |
|||
height: 24px; |
|||
box-shadow: inset 0px 0px 12px 0px rgba(26, 149, 255, 0.45); |
|||
border-radius: 2px; |
|||
border: 1px solid #1a95ff; |
|||
border-radius: 2px; |
|||
text-align: center; |
|||
font-size: 14px; |
|||
font-family: PingFang SC; |
|||
font-weight: 400; |
|||
color: #ffffff; |
|||
line-height: 23px; |
|||
cursor: pointer; |
|||
transition: all ease 0.5s; |
|||
&.z-on { |
|||
background: linear-gradient(90deg, #1a5afd, #009cff); |
|||
box-shadow: none; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,149 @@ |
|||
<template> |
|||
<div> |
|||
<div class="m-bread"> |
|||
<div class="line"> |
|||
<div class="line-left"></div> |
|||
<div class="line-right"></div> |
|||
</div> |
|||
<div class="bread"> |
|||
<el-breadcrumb :separator="separator"> |
|||
<el-breadcrumb-item |
|||
v-for="(item, index) in breadList" |
|||
:key="'b' + index" |
|||
> |
|||
<span |
|||
class="bread-span" |
|||
@click="handleClickItem(item)" |
|||
>{{ item.meta.title }}</span |
|||
> |
|||
</el-breadcrumb-item> |
|||
</el-breadcrumb> |
|||
</div> |
|||
<div class="line"> |
|||
<div class="line-left"></div> |
|||
<div class="line-right"></div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { mapGetters } from "vuex"; |
|||
|
|||
export default { |
|||
name: "table", |
|||
components: {}, |
|||
props: { |
|||
//分隔符 |
|||
separator: { |
|||
type: String, |
|||
default: "/", |
|||
}, |
|||
|
|||
//面包屑列表 |
|||
breadList: { |
|||
type: Array, |
|||
default: () => { |
|||
return []; |
|||
}, |
|||
}, |
|||
}, |
|||
data() { |
|||
return { |
|||
pageSize: 10, |
|||
pageNo: 1, |
|||
}; |
|||
}, |
|||
watch: {}, |
|||
computed: { |
|||
...mapGetters(["clientHeight", "iframeHeight"]), |
|||
}, |
|||
mounted() {}, |
|||
|
|||
created() {}, |
|||
|
|||
methods: { |
|||
handleClickItem(item) { |
|||
this.$emit("tap", { item }); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.m-bread { |
|||
padding: 0 0 15px 0; |
|||
|
|||
.bread { |
|||
margin: 4px 0; |
|||
padding: 8px 16px; |
|||
height: 40px; |
|||
background: rgba(26, 149, 255, 0.15); |
|||
width: 100%; |
|||
|
|||
/deep/ .el-breadcrumb__item { |
|||
line-height: 25px; |
|||
font-size: 14px; |
|||
} |
|||
|
|||
/deep/ .el-breadcrumb__item .el-breadcrumb__inner { |
|||
font-family: PingFangSC-Regular, PingFang SC; |
|||
font-weight: 400; |
|||
color: #ffffff; |
|||
} |
|||
|
|||
/deep/ .el-breadcrumb__item:first-child .el-breadcrumb__inner { |
|||
font-family: PingFangSC-Regular, PingFang SC; |
|||
font-weight: 400; |
|||
color: rgba(255, 255, 255, 0.65); |
|||
} |
|||
|
|||
/deep/ .bread-span { |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.router_parents { |
|||
line-height: 25px; |
|||
font-size: 14px; |
|||
font-family: PingFangSC-Regular, PingFang SC; |
|||
font-weight: 400; |
|||
color: rgba(255, 255, 255, 0.65); |
|||
|
|||
.arrow { |
|||
padding: 0 5px; |
|||
} |
|||
} |
|||
.router_parents:hover { |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.router_child { |
|||
line-height: 25px; |
|||
font-size: 14px; |
|||
font-family: PingFangSC-Regular, PingFang SC; |
|||
font-weight: 400; |
|||
color: #ffffff; |
|||
} |
|||
} |
|||
|
|||
.line { |
|||
display: flex; |
|||
width: 100%; |
|||
|
|||
.line-left { |
|||
flex-grow: 0; |
|||
flex-shrink: 0; |
|||
flex-basis: 16px; |
|||
height: 1px; |
|||
background: #1a95ff; |
|||
} |
|||
.line-right { |
|||
flex-grow: 1; |
|||
flex-shrink: 1; |
|||
flex-basis: 0px; |
|||
height: 1px; |
|||
background: rgba(26, 149, 255, 0.45); |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,142 +1,157 @@ |
|||
<template> |
|||
<div class="rkyj-main"> |
|||
<div class="title"> |
|||
<div>预警居民类别</div> |
|||
<div>黄色预警(5-10人)<img class="img" |
|||
src="@/assets/images/shuju/renfang/remark.png" |
|||
alt /></div> |
|||
<div>红色预警(10人以上)<img class="img" |
|||
src="@/assets/images/shuju/renfang/remark.png" |
|||
alt /></div> |
|||
|
|||
</div> |
|||
<div class="list"> |
|||
<el-scrollbar :style="{height:treeHeight}" |
|||
class="g-scrollar"> |
|||
|
|||
<div v-for="(dataitem,index) in listData" |
|||
:key="index" |
|||
class="item"> |
|||
<div class="item-title">{{dataitem.type}}</div> |
|||
<div class="item-num"><img class="img" |
|||
src="@/assets/images/shuju/renfang/warning-yellow.png" |
|||
alt />{{dataitem.yellow}}栋</div> |
|||
<div class="item-num"><img class="img" |
|||
src="@/assets/images/shuju/renfang/warning-red.png" |
|||
alt />{{dataitem.red}}栋</div> |
|||
</div> |
|||
</el-scrollbar> |
|||
</div> |
|||
</div> |
|||
<div class="rkyj-main"> |
|||
<div class="title"> |
|||
<div>预警居民类别</div> |
|||
<div> |
|||
黄色预警(5-10人)<img |
|||
class="img" |
|||
src="@/assets/images/shuju/renfang/remark.png" |
|||
alt |
|||
/> |
|||
</div> |
|||
<div> |
|||
红色预警(10人以上)<img |
|||
class="img" |
|||
src="@/assets/images/shuju/renfang/remark.png" |
|||
alt |
|||
/> |
|||
</div> |
|||
</div> |
|||
<div class="list"> |
|||
<el-scrollbar class="g-scrollar"> |
|||
<div |
|||
v-for="(dataitem, index) in listData" |
|||
:key="index" |
|||
class="item" |
|||
> |
|||
<div class="item-title">{{ dataitem.type }}</div> |
|||
<div class="item-num"> |
|||
<img |
|||
class="img" |
|||
src="@/assets/images/shuju/renfang/warning-yellow.png" |
|||
alt |
|||
/>{{ dataitem.yellow }}栋 |
|||
</div> |
|||
<div class="item-num"> |
|||
<img |
|||
class="img" |
|||
src="@/assets/images/shuju/renfang/warning-red.png" |
|||
alt |
|||
/>{{ dataitem.red }}栋 |
|||
</div> |
|||
</div> |
|||
</el-scrollbar> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { requestPost } from "@/js/dai/request"; |
|||
|
|||
export default { |
|||
props: { |
|||
orgId: { |
|||
type: String, |
|||
default: "", |
|||
}, |
|||
}, |
|||
data () { |
|||
return { |
|||
listData: [ |
|||
{ |
|||
type: '低保人员', |
|||
yellow: 200, |
|||
red: 5, |
|||
}, |
|||
{ |
|||
type: '失业人员', |
|||
yellow: 2, |
|||
red: 500, |
|||
}, |
|||
{ |
|||
type: '老年人', |
|||
yellow: 2000, |
|||
red: 5, |
|||
}, |
|||
{ |
|||
type: '空巢老人', |
|||
yellow: 2, |
|||
red: 5, |
|||
}, |
|||
{ |
|||
type: '大病', |
|||
yellow: 2, |
|||
red: 5, |
|||
}, |
|||
{ |
|||
type: '慢病', |
|||
yellow: 2, |
|||
red: 5, |
|||
}, |
|||
] |
|||
} |
|||
}, |
|||
mounted () { }, |
|||
methods: {}, |
|||
props: { |
|||
orgId: { |
|||
type: String, |
|||
default: "", |
|||
}, |
|||
}, |
|||
data() { |
|||
return { |
|||
listData: [ |
|||
{ |
|||
type: "低保人员", |
|||
yellow: 200, |
|||
red: 5, |
|||
}, |
|||
{ |
|||
type: "失业人员", |
|||
yellow: 2, |
|||
red: 500, |
|||
}, |
|||
{ |
|||
type: "老年人", |
|||
yellow: 2000, |
|||
red: 5, |
|||
}, |
|||
{ |
|||
type: "空巢老人", |
|||
yellow: 2, |
|||
red: 5, |
|||
}, |
|||
{ |
|||
type: "大病", |
|||
yellow: 2, |
|||
red: 5, |
|||
}, |
|||
{ |
|||
type: "慢病", |
|||
yellow: 2, |
|||
red: 5, |
|||
}, |
|||
], |
|||
}; |
|||
}, |
|||
mounted() {}, |
|||
methods: {}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.rkyj-main { |
|||
.title { |
|||
margin: 24px 0 24px 24px; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
.title { |
|||
margin: 24px 0 24px 24px; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
|
|||
font-size: 16px; |
|||
font-family: PingFangSC-Medium, PingFang SC; |
|||
font-weight: 500; |
|||
color: #ffffff; |
|||
font-size: 16px; |
|||
font-family: PingFangSC-Medium, PingFang SC; |
|||
font-weight: 500; |
|||
color: #ffffff; |
|||
|
|||
.img { |
|||
margin-left: 4px; |
|||
width: 15px; |
|||
height: 15px; |
|||
} |
|||
} |
|||
.img { |
|||
margin-left: 4px; |
|||
width: 15px; |
|||
height: 15px; |
|||
} |
|||
} |
|||
|
|||
.list { |
|||
/deep/ .el-scrollbar__wrap { |
|||
// width: 100% !important; |
|||
overflow-x: hidden !important; |
|||
} |
|||
.g-scrollar { |
|||
// width: 100%; |
|||
height: 168px; |
|||
.list { |
|||
/deep/ .el-scrollbar__wrap { |
|||
// width: 100% !important; |
|||
overflow-x: hidden !important; |
|||
} |
|||
.g-scrollar { |
|||
// width: 100%; |
|||
height: 168px; |
|||
|
|||
.item { |
|||
padding: 12px 20px 12px 24px; |
|||
font-size: 14px; |
|||
font-family: PingFangSC-Regular, PingFang SC; |
|||
font-weight: 400; |
|||
color: #ffffff; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
.item { |
|||
padding: 12px 20px 12px 24px; |
|||
font-size: 14px; |
|||
font-family: PingFangSC-Regular, PingFang SC; |
|||
font-weight: 400; |
|||
color: #ffffff; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
|
|||
.item-title { |
|||
flex: 0 0 60px; |
|||
} |
|||
.item-title { |
|||
flex: 0 0 60px; |
|||
} |
|||
|
|||
.item-num { |
|||
flex: 0 0 100px; |
|||
// text-align: right; |
|||
.img { |
|||
width: 32px; |
|||
height: 32px; |
|||
margin-right: 8px; |
|||
} |
|||
} |
|||
} |
|||
.item:nth-child(2n-1) { |
|||
background: rgba(26, 149, 255, 0.15); |
|||
} |
|||
} |
|||
} |
|||
.item-num { |
|||
flex: 0 0 100px; |
|||
// text-align: right; |
|||
.img { |
|||
width: 32px; |
|||
height: 32px; |
|||
margin-right: 8px; |
|||
} |
|||
} |
|||
} |
|||
.item:nth-child(2n-1) { |
|||
background: rgba(26, 149, 255, 0.15); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
|
|||
Loading…
Reference in new issue