elink-star
/
epmet-work-pc-chengyang
8
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

首页差不多弄完了

feature
dai 3 years ago
parent
55e7c3fb1f
commit
244c6ce94b
12 changed files with 1144 additions and 210 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      src/assets/images/shuju/main/close.png
  2. 66
      src/assets/scss/dataBoard/popup-info.scss
  3. 6
      src/views/dataBoard/cpts/bread.vue
  4. 135
      src/views/dataBoard/cpts/house-details.vue
  5. 18
      src/views/dataBoard/cpts/map/index.vue
  6. 61
      src/views/dataBoard/cpts/map/popup.vue
  7. 153
      src/views/dataBoard/cpts/popup.vue
  8. 378
      src/views/dataBoard/cpts/resi-details.vue
  9. 149
      src/views/dataBoard/renfang/cpts/bread.vue
  10. 259
      src/views/dataBoard/renfang/cpts/rkyj.vue
  11. 127
      src/views/dataBoard/renfang/index.vue
  12. 2
      src/views/dataBoardMain/main-navbar.vue

BIN
src/assets/images/shuju/main/close.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 597 B

66
src/assets/scss/dataBoard/popup-info.scss
View File

@ -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);
}
}
}
}

6
src/views/dataBoard/cpts/bread.vue
View File

@ -12,7 +12,7 @@
:key="item.path" :key="item.path"
:to="{ path: item.path }" :to="{ path: item.path }"
> >
<span @click="handleClickItem(item, index)">{{ <span @click="handleClickItem(item)">{{
item.meta.title item.meta.title
}}</span> }}</span>
</el-breadcrumb-item> </el-breadcrumb-item>
@ -65,8 +65,8 @@ export default {
created() {}, created() {},
methods: { methods: {
handleClickItem(item, index) { handleClickItem(item) {
this.$emit("tap", { item, index }); this.$emit("tap", { item });
}, },
}, },
}; };

135
src/views/dataBoard/cpts/house-details.vue
View File

@ -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>

18
src/views/dataBoard/cpts/map/index.vue
View File

@ -871,6 +871,24 @@ export default {
height: 100%; height: 100%;
border-radius: 10px; border-radius: 10px;
overflow: hidden; overflow: hidden;
background: transparent;
&::after {
position: absolute;
content: "";
display: block;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
background: radial-gradient(
rgba(#020c38, 0) 0%,
rgba(#020c38, 0) 60%,
rgba(#020c38, 1) 85%,
rgba(#020c38, 1) 100%
);
}
&.z-td { &.z-td {
#app { #app {

61
src/views/dataBoard/cpts/map/popup.vue
View File

@ -162,6 +162,10 @@
房主身份证： 房主身份证：
<span>{{ info.holder_idcard || "--" }}</span> <span>{{ info.holder_idcard || "--" }}</span>
</div> </div>
<div @click="handleClickBtn('watch-house')" class="more-btn">
更多
</div>
</div> </div>
</div> </div>
</div> </div>
@ -232,63 +236,6 @@ export default {
this.hidden = false; this.hidden = false;
return true; return true;
}, },
async loadResi(info) {
const url = "/epmetuser/icresiuser/resi-brief/" + info.id;
// const url = "http://yapi.elinkservice.cn/mock/245/heart/icpartyunit/distribution"
let params = {};
const { data, code, msg } = await requestPost(url, params);
if (code === 0) {
data.icUserName = data.icUserName ? data.icUserName : "--";
data.gridName = data.gridName ? data.gridName : "--";
data.villageName = data.villageName ? data.villageName : "--";
data.mobile = data.mobile ? data.mobile : "--";
data.idCard = data.idCard ? data.idCard : "--";
data.birthday = data.birthday ? data.birthday : "--";
data.contacts = data.contacts ? data.contacts : "--";
data.contactsMobile = data.contactsMobile
? data.contactsMobile
: "--";
data.isBdhjShow = data.isBdhj
? data.isBdhj === "0"
? "否"
: "是"
: "--";
data.genderShow = data.gender
? data.gender === "0"
? "女"
: "男"
: "--";
if (data.rhzk === "rhyz") {
data.rhzkShow = "人户一致";
} else if (data.rhzk === "rzhbz") {
data.rhzkShow = "人在户不在";
} else if (data.rhzk === "hzrbz") {
data.rhzkShow = "户在人不在";
} else {
data.rhzkShow = "--";
}
let categoriesArray = [];
for (let key in data.volunteerCategories) {
categoriesArray.push(data.volunteerCategories[key]);
}
if (categoriesArray.length > 0) {
data.categories = categoriesArray.join(",");
} else {
data.categories = "--";
}
this.info = JSON.parse(JSON.stringify(data));
} else {
this.$message.error(msg);
}
},
}, },
}; };
</script> </script>

153
src/views/dataBoard/cpts/popup.vue
View File

@ -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>

378
src/views/dataBoard/cpts/resi-details.vue
View File

@ -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>

149
src/views/dataBoard/renfang/cpts/bread.vue
View File

@ -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>

259
src/views/dataBoard/renfang/cpts/rkyj.vue
View File

@ -1,142 +1,157 @@
<template> <template>
<div class="rkyj-main"> <div class="rkyj-main">
<div class="title"> <div class="title">
<div>预警居民类别</div> <div>预警居民类别</div>
<div>黄色预警(5-10人)<img class="img" <div>
src="@/assets/images/shuju/renfang/remark.png" 黄色预警(5-10人)<img
alt /></div> class="img"
<div>红色预警(10人以上)<img class="img" src="@/assets/images/shuju/renfang/remark.png"
src="@/assets/images/shuju/renfang/remark.png" alt
alt /></div> />
</div>
</div> <div>
<div class="list"> 红色预警(10人以上)<img
<el-scrollbar :style="{height:treeHeight}" class="img"
class="g-scrollar"> src="@/assets/images/shuju/renfang/remark.png"
alt
<div v-for="(dataitem,index) in listData" />
:key="index" </div>
class="item"> </div>
<div class="item-title">{{dataitem.type}}</div> <div class="list">
<div class="item-num"><img class="img" <el-scrollbar class="g-scrollar">
src="@/assets/images/shuju/renfang/warning-yellow.png" <div
alt />{{dataitem.yellow}}栋</div> v-for="(dataitem, index) in listData"
<div class="item-num"><img class="img" :key="index"
src="@/assets/images/shuju/renfang/warning-red.png" class="item"
alt />{{dataitem.red}}栋</div> >
</div> <div class="item-title">{{ dataitem.type }}</div>
</el-scrollbar> <div class="item-num">
</div> <img
</div> 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> </template>
<script> <script>
import { requestPost } from "@/js/dai/request"; import { requestPost } from "@/js/dai/request";
export default { export default {
props: { props: {
orgId: { orgId: {
type: String, type: String,
default: "", default: "",
}, },
}, },
data () { data() {
return { return {
listData: [ listData: [
{ {
type: '低保人员', type: "低保人员",
yellow: 200, yellow: 200,
red: 5, red: 5,
}, },
{ {
type: '失业人员', type: "失业人员",
yellow: 2, yellow: 2,
red: 500, red: 500,
}, },
{ {
type: '老年人', type: "老年人",
yellow: 2000, yellow: 2000,
red: 5, red: 5,
}, },
{ {
type: '空巢老人', type: "空巢老人",
yellow: 2, yellow: 2,
red: 5, red: 5,
}, },
{ {
type: '大病', type: "大病",
yellow: 2, yellow: 2,
red: 5, red: 5,
}, },
{ {
type: '慢病', type: "慢病",
yellow: 2, yellow: 2,
red: 5, red: 5,
}, },
] ],
} };
}, },
mounted () { }, mounted() {},
methods: {}, methods: {},
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.rkyj-main { .rkyj-main {
.title { .title {
margin: 24px 0 24px 24px; margin: 24px 0 24px 24px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
font-size: 16px; font-size: 16px;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500; font-weight: 500;
color: #ffffff; color: #ffffff;
.img { .img {
margin-left: 4px; margin-left: 4px;
width: 15px; width: 15px;
height: 15px; height: 15px;
} }
} }
.list { .list {
/deep/ .el-scrollbar__wrap { /deep/ .el-scrollbar__wrap {
// width: 100% !important; // width: 100% !important;
overflow-x: hidden !important; overflow-x: hidden !important;
} }
.g-scrollar { .g-scrollar {
// width: 100%; // width: 100%;
height: 168px; height: 168px;
.item { .item {
padding: 12px 20px 12px 24px; padding: 12px 20px 12px 24px;
font-size: 14px; font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400; font-weight: 400;
color: #ffffff; color: #ffffff;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
.item-title { .item-title {
flex: 0 0 60px; flex: 0 0 60px;
} }
.item-num { .item-num {
flex: 0 0 100px; flex: 0 0 100px;
// text-align: right; // text-align: right;
.img { .img {
width: 32px; width: 32px;
height: 32px; height: 32px;
margin-right: 8px; margin-right: 8px;
} }
} }
} }
.item:nth-child(2n-1) { .item:nth-child(2n-1) {
background: rgba(26, 149, 255, 0.15); background: rgba(26, 149, 255, 0.15);
} }
} }
} }
} }
</style> </style>

127
src/views/dataBoard/renfang/index.vue
View File

@ -118,9 +118,9 @@
<grid-map <grid-map
ref="map" ref="map"
v-if="orgData.id"
@clickAgency="clickAgencyItem" @clickAgency="clickAgencyItem"
:srcGridData="orgData" :srcGridData="orgData"
@clickDotBtn="handleClickDotBtn"
/> />
</div> </div>
@ -291,7 +291,7 @@
</div> </div>
<div class="g-right"> <div class="g-right">
<div class="m-box"> <div class="m-box" v-if="orgLevel == 'dis'">
<div class="box-title"> <div class="box-title">
<img <img
src="~@/assets/images/shuju/main/card-title-bg-480.png" src="~@/assets/images/shuju/main/card-title-bg-480.png"
@ -335,6 +335,18 @@
<cpt-loading v-show="false" /> <cpt-loading v-show="false" />
</div> </div>
<resi-details
@close="displayedResiId = ''"
:resi-id="displayedResiId"
v-if="displayedResiId"
/>
<house-details
@close="displayedHouseId = ''"
:house-id="displayedHouseId"
v-if="displayedHouseId"
/>
</div> </div>
</template> </template>
@ -345,14 +357,29 @@ import jmgl from "@/views/dataBoard/renfang/cpts/jmgl";
import rkfx from "@/views/dataBoard/renfang/cpts/rkfx"; import rkfx from "@/views/dataBoard/renfang/cpts/rkfx";
import rkyj from "@/views/dataBoard/renfang/cpts/rkyj"; import rkyj from "@/views/dataBoard/renfang/cpts/rkyj";
import szsq from "@/views/dataBoard/renfang/cpts/szsq"; import szsq from "@/views/dataBoard/renfang/cpts/szsq";
import cptBread from "@/views/dataBoard/renfang/cpts/bread";
import cptLoading from "@/views/dataBoard/cpts/loading"; import cptLoading from "@/views/dataBoard/cpts/loading";
import cptBread from "@/views/dataBoard/cpts/bread"; import houseDetails from "@/views/dataBoard/cpts/house-details";
import resiDetails from "@/views/dataBoard/cpts/resi-details";
import { requestPostBi } from "@/js/dai/request-bipass"; import { requestPostBi } from "@/js/dai/request-bipass";
import { requestPost } from "@/js/dai/request"; import { requestPost } from "@/js/dai/request";
import getQueryPara from "dai-js/modules/getQueryPara"; import getQueryPara from "dai-js/modules/getQueryPara";
export default { export default {
components: { gridMap, fwgl, jmgl, rkfx, rkyj, szsq, cptLoading, cptBread }, name: "renfang",
components: {
gridMap,
fwgl,
jmgl,
rkfx,
rkyj,
szsq,
cptLoading,
cptBread,
houseDetails,
resiDetails,
},
data() { data() {
return { return {
@ -366,7 +393,7 @@ export default {
{ {
orgId: "", orgId: "",
orgLevel: "", orgLevel: "",
meta: { title: "人防总览" }, meta: { title: "人房总览" },
}, },
], ],
@ -392,24 +419,22 @@ export default {
aged_ratio: "--", aged_ratio: "--",
teenagers_ratio: "--", teenagers_ratio: "--",
}, },
displayedResiId: "1",
displayedHouseId: "",
}; };
}, },
mounted() { mounted() {
this.init(); const queryOrgId = getQueryPara("orgId");
const queryOrgLevel = getQueryPara("orgLevel");
this.init(queryOrgId, queryOrgLevel);
}, },
watch: { watch: {},
$route() {
this.init();
},
},
methods: { methods: {
async init() { async init(queryOrgId, queryOrgLevel) {
const queryOrgId = getQueryPara("orgId");
const queryOrgLevel = getQueryPara("orgLevel");
console.log("orgId", queryOrgId);
if (queryOrgId) { if (queryOrgId) {
this.orgId = queryOrgId; this.orgId = queryOrgId;
this.orgLevel = queryOrgLevel || "agency"; this.orgLevel = queryOrgLevel || "agency";
@ -421,27 +446,48 @@ export default {
//加载组织数据 //加载组织数据
this.loading = false; this.loading = false;
await this.loadOrgData(); await this.loadOrgData();
// await this.getMapData();
// await this.getSubMapData();
this.getResiCategoryData(); this.getResiCategoryData();
this.getPerInfo(); this.getPerInfo();
this.loading = true; this.loading = true;
}, },
clickBreadItem(item, index) { handleClickDotBtn(type, info) {
console.log(item); console.log("handleClickDotBtn", type, info);
const { breadList } = this; if (type == "watch-resi") {
if (index + 1 == breadList.length) return; this.displayedResiId = info.user_id;
breadList = breadList.slice(0, index); } else if (type == "watch-house") {
this.breadList = breadList; this.displayedHouseId = info.house_id;
}
},
clickBreadItem({ item }) {
this.toBread(item);
}, },
clickAgencyItem(item) { clickAgencyItem(item) {
console.log(item); console.log(item);
this.$router.push({ this.toBread({
path: "/dataBoard/renfang/index", orgId: item.id,
query: { orgId: item.id, orgLevel: item.level }, orgLevel: item.level,
meta: { title: item.name },
}); });
// this.init(); },
toBread(item) {
const { orgId } = item;
const { breadList } = this;
let index = breadList.findIndex((val) => val.orgId === orgId);
// return console.log(item, breadList, index);
if (index >= 0) {
this.breadList = breadList.slice(0, index + 1);
} else {
breadList.push(item);
this.breadList = breadList;
}
this.init(item.orgId, item.orgLevel);
}, },
// 点击搜索结果条目，在地图上显示点和详情弹窗 // 点击搜索结果条目，在地图上显示点和详情弹窗
@ -479,7 +525,8 @@ export default {
}, },
}, },
{ {
mockId: 60048078, // mockId: 60044224,
mockId: 60048067,
} }
); );
@ -574,7 +621,7 @@ export default {
url, url,
{ {
queryParam: { queryParam: {
org_id: this.orgData.id, org_id: this.orgId,
}, },
}, },
{ {
@ -585,6 +632,32 @@ export default {
if (code === 0) { if (code === 0) {
let info = data[0]; let info = data[0];
this.orgData = info; this.orgData = info;
this.orgId = this.orgData.id;
this.orgLevel = this.orgData.level;
} else {
this.$message.error(msg);
}
},
//获取地图上显示的组织数据
async getSubMapData() {
console.log("=========================getMapData");
const url = "sub_org_map";
const { data, code, msg } = await requestPostBi(
url,
{
queryParam: {
org_id: this.orgId,
},
},
{
mockId: 61831860,
}
);
if (code === 0) {
this.orgData.children = data;
} else { } else {
this.$message.error(msg); this.$message.error(msg);
} }

2
src/views/dataBoardMain/main-navbar.vue
View File

@ -10,7 +10,7 @@
<div <div
class="nav-item" class="nav-item"
:class="{ 'z-on': $route.path == '/dataBoard/renfang/index' }" :class="{ 'z-on': $route.path == '/dataBoard/renfang/index' }"
@click="toPage('/board')" @click="toPage('/dataBoard/renfang/index')"
> >
<span>人房总览</span> <span>人房总览</span>
</div> </div>

Write Preview
Loading…
Cancel
Save