wxz
3 years ago
59 changed files with 8490 additions and 4656 deletions
@ -1,4 +1,5 @@ |
|||
NODE_ENV=production |
|||
VUE_APP_API_SERVER = https://epmet-cloud.elinkservice.cn/api |
|||
VUE_APP_BIPASS_API_SERVER = http://bipaas.elinkservice.cn/linkdata/linkdata-gateway/route |
|||
VUE_APP_NODE_ENV=prod |
|||
VUE_APP_PUBLIC_PATH=epmet-oper |
|||
|
|||
@ -1,4 +1,5 @@ |
|||
NODE_ENV=production |
|||
VUE_APP_API_SERVER = https://epdc-shibei.elinkservice.cn/api |
|||
# VUE_APP_BIPASS_API_SERVER = http://bipaas.elinkservice.cn/linkdata/linkdata-gateway/route |
|||
VUE_APP_NODE_ENV=shibei_prod |
|||
VUE_APP_PUBLIC_PATH=epmet-oper |
|||
|
After Width: | Height: | Size: 689 B |
|
After Width: | Height: | Size: 868 B |
|
After Width: | Height: | Size: 597 B |
|
Before Width: | Height: | Size: 3.9 KiB After Width: | Height: | Size: 1.9 KiB |
|
Before Width: | Height: | Size: 3.2 KiB After Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 3.0 KiB After Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 3.2 KiB After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 3.5 KiB After Width: | Height: | Size: 1.7 KiB |
@ -1,15 +1,55 @@ |
|||
.m-listbox-main{ |
|||
.g-pgi { |
|||
min-height: 100%; |
|||
box-sizing: border-box; |
|||
margin-left:16px; |
|||
|
|||
.g-listbox{ |
|||
|
|||
} |
|||
padding: 0 25px 50px; |
|||
} |
|||
|
|||
.m-title { |
|||
display: flex; |
|||
align-items: center; |
|||
margin-top: 15px; |
|||
|
|||
} |
|||
.title_img { |
|||
width: 17px; |
|||
height: 17px; |
|||
} |
|||
.tip_title { |
|||
margin-left: 8px; |
|||
font-size: 16px; |
|||
font-family: PingFangSC-Medium, PingFang SC; |
|||
font-weight: 500; |
|||
color: #ffffff; |
|||
line-height: 22px; |
|||
} |
|||
|
|||
.title_line { |
|||
margin-left: 8px; |
|||
width: 244px; |
|||
height: 1px; |
|||
background: linear-gradient(270deg, rgba(55, 198, 255, 0.1) 0%, #1995ff 100%); |
|||
} |
|||
|
|||
.second-select { |
|||
margin: 0 10px 0 10px; |
|||
|
|||
::v-deep .el-input { |
|||
width: 180px; |
|||
height: 36px; |
|||
.el-input__inner { |
|||
height: 100%; |
|||
padding: 0 10px; |
|||
color: #fff; |
|||
line-height: 36px; |
|||
background: #06186d; |
|||
border: 1px solid #1a64cc; |
|||
} |
|||
|
|||
.el-icon-arrow-up:before { |
|||
content: "\e78f"; |
|||
} |
|||
// .el-select__caret:before { |
|||
// content: '\E790' |
|||
// } |
|||
} |
|||
} |
|||
} |
|||
|
|||
@ -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,114 @@ |
|||
/*--------------------------------------------------------------- |
|||
| 【数据中台专用】请求接口封装 | |
|||
---------------------------------------------------------------*/ |
|||
import axios from "axios"; |
|||
import curry from "dai-js/tools/curry"; |
|||
import { Message } from "element-ui"; |
|||
import { clearLoginInfo } from "@/utils"; |
|||
|
|||
axios.defaults.withCredentials = true; |
|||
axios.defaults.crossDomain = true; |
|||
|
|||
const request = curry((method, uri, data = {}, params = {}) => { |
|||
return new Promise((reslove) => { |
|||
let returnIniData = { |
|||
httpCode: "", |
|||
data: {}, |
|||
msg: "", |
|||
code: "", |
|||
}; |
|||
|
|||
const { headers, mockId } = params; |
|||
|
|||
// env文件配置接口
|
|||
let url = process.env.VUE_APP_BIPASS_API_SERVER; |
|||
|
|||
// mock 开发临时用接口
|
|||
if (mockId) { |
|||
url = "https://mock.apifox.cn/m2/2242395-0-default/" + mockId; |
|||
} |
|||
|
|||
const succFn = (res) => { |
|||
// log(`[request成功] ${url}`, data, res);
|
|||
let retData = { |
|||
...returnIniData, |
|||
...res.data, |
|||
httpCode: res.statusCode, |
|||
}; |
|||
// if(typeof Vue.$afterRequestHook == 'function'){
|
|||
// retData = Vue.$afterRequestHook(retData);
|
|||
// }
|
|||
if (res.data.code > 8000 && res.data.code < 10000) { |
|||
// Message.error(res.data.msg);
|
|||
} |
|||
if (res.code == 1007 || res.code == 1024 || res.code == 2003) { |
|||
// 10005 token为空 10006登陆超时 10007别处登录
|
|||
console.log("登录失效"); |
|||
Message.error(res.data.msg); |
|||
clearLoginInfo(); |
|||
return next({ |
|||
name: "login", |
|||
}); |
|||
} |
|||
|
|||
reslove(retData); |
|||
}; |
|||
|
|||
const failFn = (err) => { |
|||
// log(`[request失败] ${url}`, data, err);
|
|||
|
|||
reslove( |
|||
Object.assign({}, returnIniData, { |
|||
httpCode: "9999", //访问出现意外
|
|||
msg: "网络错误", |
|||
}) |
|||
); |
|||
}; |
|||
|
|||
if (method.toUpperCase() == "POST") { |
|||
axios |
|||
.post( |
|||
url, |
|||
{ |
|||
apiCode: "/api/post", |
|||
dispatcherSystem: "dataservice", |
|||
param: { |
|||
ds_code: uri, |
|||
app_code: "empet", |
|||
orderby: "[]", |
|||
...data, |
|||
}, |
|||
}, |
|||
{ |
|||
headers, |
|||
responseType: "json", |
|||
} |
|||
) |
|||
.then(succFn) |
|||
.catch(failFn); |
|||
} else { |
|||
axios |
|||
.post( |
|||
url, |
|||
{ |
|||
apiCode: "/api/get", |
|||
dispatcherSystem: "dataservice", |
|||
param: { |
|||
ds_code: uri, |
|||
app_code: "empet", |
|||
orderby: "[]", |
|||
...data, |
|||
}, |
|||
}, |
|||
{ |
|||
headers, |
|||
responseType: "json", |
|||
} |
|||
) |
|||
.then(succFn) |
|||
.catch(failFn); |
|||
} |
|||
}); |
|||
}); |
|||
|
|||
export const requestPostBi = request("post"); |
|||
File diff suppressed because it is too large
@ -1,84 +1,147 @@ |
|||
<template> |
|||
<div> |
|||
<div class="m-bread"> |
|||
<div class="g-line"> |
|||
<div class="line-left"></div> |
|||
<div class="line-right"></div> |
|||
</div> |
|||
<div class="g-bread"> |
|||
<el-breadcrumb :separator="separator"> |
|||
<el-breadcrumb-item v-for="item in breadList" |
|||
:key="item.path" |
|||
:to="{ path: item.path }"> |
|||
{{ item.meta.title }} |
|||
</el-breadcrumb-item> |
|||
|
|||
</el-breadcrumb> |
|||
</div> |
|||
<div class="g-line"> |
|||
<div class="line-left"></div> |
|||
<div class="line-right"></div> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
<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 in breadList" |
|||
:key="item.path" |
|||
:to="{ path: item.path }" |
|||
> |
|||
<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 ScreenLoading from "./loading"; |
|||
import { mapGetters } from 'vuex' |
|||
import { mapGetters } from "vuex"; |
|||
|
|||
export default { |
|||
name: "table", |
|||
components: { |
|||
ScreenLoading, |
|||
}, |
|||
props: { |
|||
//分隔符 |
|||
separator: { |
|||
type: String, |
|||
default: '/' |
|||
}, |
|||
|
|||
//面包屑列表 |
|||
breadList: { |
|||
type: Array, |
|||
default: () => { |
|||
return []; |
|||
}, |
|||
}, |
|||
|
|||
}, |
|||
data () { |
|||
return { |
|||
|
|||
pageSize: 10, |
|||
pageNo: 1, |
|||
}; |
|||
}, |
|||
watch: {}, |
|||
computed: { |
|||
|
|||
|
|||
|
|||
...mapGetters(['clientHeight', 'iframeHeight']) |
|||
}, |
|||
mounted () { }, |
|||
|
|||
created () { }, |
|||
|
|||
methods: { |
|||
|
|||
}, |
|||
name: "bread", |
|||
components: { |
|||
ScreenLoading, |
|||
}, |
|||
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" |
|||
src="@/assets/scss/dataBoard/bread.scss" |
|||
scoped |
|||
></style> |
|||
|
|||
<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); |
|||
} |
|||
|
|||
.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> |
|||
|
|||
@ -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> |
|||
File diff suppressed because it is too large
@ -0,0 +1,398 @@ |
|||
<template> |
|||
<div class="m-pop" ref="pop" @mousewheel="handleWheel" v-show="!hidden"> |
|||
<div class="info"> |
|||
<div v-if="type === '1'"> |
|||
<div class="u-info-title"> |
|||
<img |
|||
class="img" |
|||
src="@/assets/images/shuju/renfang/jm-logo.png" |
|||
alt |
|||
/> |
|||
<span>居民信息</span> |
|||
</div> |
|||
|
|||
<div @click="handleClickBtn('watch-resi')" class="more-btn"> |
|||
查看更多 > |
|||
</div> |
|||
|
|||
<div class="item"> |
|||
<span class="field">姓名：</span> |
|||
<span>{{ info.user_name || "--" }}</span> |
|||
</div> |
|||
<div class="item"> |
|||
<span class="field">所属网格：</span> |
|||
<span>{{ info.grid || "--" }}</span> |
|||
</div> |
|||
<div class="item"> |
|||
<span class="field">所属小区：</span> |
|||
<span>{{ info.house || "--" }}</span> |
|||
</div> |
|||
|
|||
<div class="item"> |
|||
<span class="field">手机号：</span> |
|||
<span>{{ info.telephone || "--" }}</span> |
|||
</div> |
|||
<div class="item"> |
|||
<span class="field">性别：</span> |
|||
<span>{{ info.genderShow || "--" }}</span> |
|||
</div> |
|||
<div class="item"> |
|||
<span class="field">身份证号：</span> |
|||
<span>{{ info.idcard || "--" }}</span> |
|||
</div> |
|||
|
|||
<div class="item"> |
|||
<span class="field">工作单位：</span> |
|||
<span>{{ info.workunit || "--" }}</span> |
|||
</div> |
|||
<div class="item"> |
|||
<span class="field">人户状况：</span> |
|||
<span>{{ info.household || "--" }}</span> |
|||
</div> |
|||
<div class="item"> |
|||
<span class="field">人员类别：</span> |
|||
<span>{{ info.classtype || "--" }}</span> |
|||
</div> |
|||
|
|||
<div class="operate"> |
|||
<div |
|||
@click="handleClickBtn('create-demand')" |
|||
v-if="info.agencyId == $store.state.user.agencyId" |
|||
class="btn z-blue" |
|||
> |
|||
发布需求 |
|||
</div> |
|||
|
|||
<div |
|||
v-if=" |
|||
info.agencyId == $store.state.user.agencyId && |
|||
type === 'volunteer' |
|||
" |
|||
@click="handleClickBtn('create-service')" |
|||
class="btn z-yellow" |
|||
> |
|||
发起服务 |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div v-if="type === '2'"> |
|||
<div class="u-info-title"> |
|||
<img |
|||
class="img" |
|||
src="@/assets/images/shuju/renfang/house-logo.png" |
|||
alt |
|||
/> |
|||
<span>小区信息</span> |
|||
</div> |
|||
|
|||
<div class="item"> |
|||
<span class="field">所属组织：</span> |
|||
<span>{{ info.community || "--" }}</span> |
|||
</div> |
|||
<div class="item"> |
|||
<span class="field">所属网格：</span> |
|||
<span>{{ info.grid || "--" }}</span> |
|||
</div> |
|||
<div class="item"> |
|||
<span class="field">小区名称：</span> |
|||
<span>{{ info.village_name || "--" }}</span> |
|||
</div> |
|||
<div class="item"> |
|||
<span class="field">关联物业：</span> |
|||
<span>{{ info.property || "--" }}</span> |
|||
</div> |
|||
<div class="item"> |
|||
<span class="field">实有楼栋：</span> |
|||
<span>{{ info.building || "--" }}</span> |
|||
</div> |
|||
</div> |
|||
|
|||
<div v-if="type === '3'"> |
|||
<div class="u-info-title"> |
|||
<img |
|||
class="img" |
|||
src="@/assets/images/shuju/renfang/house-logo.png" |
|||
alt |
|||
/> |
|||
<span>楼栋信息</span> |
|||
</div> |
|||
|
|||
<div class="item"> |
|||
<span class="field">所属小区：</span> |
|||
<span>{{ info.village_name || "--" }}</span> |
|||
</div> |
|||
<div class="item"> |
|||
<span class="field">楼栋名称：</span> |
|||
<span>{{ info.village_name || "--" }}</span> |
|||
</div> |
|||
<div class="item"> |
|||
<span class="field">楼栋类型：</span> |
|||
<span>{{ info.building_type || "--" }}</span> |
|||
</div> |
|||
<div class="item"> |
|||
<span class="field">单元数：</span> |
|||
<span>{{ info.unit_count || "--" }}</span> |
|||
</div> |
|||
<div class="item"> |
|||
<span class="field">层数：</span> |
|||
<span>{{ info.levels_count || "--" }}</span> |
|||
</div> |
|||
<div class="item"> |
|||
<span class="field">总户数：</span> |
|||
<span>{{ info.households || "--" }}</span> |
|||
</div> |
|||
<div class="item"> |
|||
<span class="field">人口数：</span> |
|||
<span>{{ info.resident_count || "--" }}</span> |
|||
</div> |
|||
<div class="item"> |
|||
<span class="field">楼长姓名：</span> |
|||
<span>{{ info.hm_name || "--" }}</span> |
|||
</div> |
|||
<div class="item"> |
|||
<span class="field">楼长电话：</span> |
|||
<span>{{ info.hm_phone || "--" }}</span> |
|||
</div> |
|||
</div> |
|||
|
|||
<div v-if="type === '4'"> |
|||
<div class="u-info-title"> |
|||
<img |
|||
class="img" |
|||
src="@/assets/images/shuju/renfang/house-logo.png" |
|||
alt |
|||
/> |
|||
<span>房屋信息</span> |
|||
</div> |
|||
|
|||
<div @click="handleClickBtn('watch-house')" class="more-btn"> |
|||
查看更多 > |
|||
</div> |
|||
|
|||
<div class="item"> |
|||
<span class="field">房屋名称：</span> |
|||
<span>{{ info.title || "--" }}</span> |
|||
</div> |
|||
<div class="item"> |
|||
<span class="field">房屋类型：</span> |
|||
<span>{{ info.house_type || "--" }}</span> |
|||
</div> |
|||
<div class="item"> |
|||
<span class="field">房屋用途：</span> |
|||
<span>{{ info.house_usage || "--" }}</span> |
|||
</div> |
|||
<div class="item"> |
|||
<span class="field">房屋状态：</span> |
|||
<span>{{ info.house_state || "--" }}</span> |
|||
</div> |
|||
<div class="item"> |
|||
<span class="field">房主姓名：</span> |
|||
<span>{{ info.holder_name || "--" }}</span> |
|||
</div> |
|||
<div class="item"> |
|||
<span class="field">联系方式：</span> |
|||
<span>{{ info.holder_phone || "--" }}</span> |
|||
</div> |
|||
<div class="item"> |
|||
<span class="field">房主身份证：</span> |
|||
<span>{{ info.holder_idcard || "--" }}</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { requestPost, requestGet } from "@/js/dai/request"; |
|||
|
|||
export default { |
|||
name: "popup", |
|||
|
|||
props: { |
|||
item: { |
|||
type: Object, |
|||
default: () => ({}), |
|||
}, |
|||
}, |
|||
|
|||
data() { |
|||
return { |
|||
hidden: true, |
|||
type: "", |
|||
srcItem: {}, |
|||
info: {}, |
|||
list: [], |
|||
}; |
|||
}, |
|||
|
|||
computed: {}, |
|||
watch: {}, |
|||
|
|||
mounted() {}, |
|||
|
|||
methods: { |
|||
handleWheel(e) { |
|||
if (this.$refs.pop.clientHeight >= 321) { |
|||
e.stopPropagation(); |
|||
} |
|||
}, |
|||
|
|||
handleClickBtn(type) { |
|||
this.$emit("operate", type, { |
|||
type: this.type, |
|||
id: this.srcItem.id, |
|||
...this.info, |
|||
}); |
|||
}, |
|||
|
|||
handleClickListItem(item) { |
|||
console.log("handleClickListItem", item); |
|||
this.$emit("clickListItem", item); |
|||
}, |
|||
|
|||
async show(item) { |
|||
console.log("-----------------show:", item); |
|||
const { type, latitude, longitude } = item; |
|||
if (!type) { |
|||
return false; |
|||
} |
|||
if (!latitude || !longitude) { |
|||
this.$message.warning("请先完善坐标位置"); |
|||
return false; |
|||
} |
|||
|
|||
this.type = item.type; |
|||
this.srcItem = item; |
|||
this.info = item; |
|||
this.hidden = false; |
|||
return true; |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import "@/assets/scss/c/config.scss"; |
|||
@import "@/assets/scss/c/function.scss"; |
|||
@import "@/assets/scss/modules/visual/c/common.scss"; |
|||
|
|||
.m-pop { |
|||
@include scrollBar2; |
|||
box-sizing: border-box; |
|||
padding: 10px 0; |
|||
width: 350px; |
|||
color: #fff; |
|||
font-size: 14px; |
|||
line-height: 20px; |
|||
max-height: 500px; |
|||
overflow-y: auto; |
|||
|
|||
.info { |
|||
padding: 10px; |
|||
.u-info-title { |
|||
margin-bottom: 10px; |
|||
line-height: 20px; |
|||
font-size: 14px; |
|||
font-family: PingFangSC-Medium, PingFang SC; |
|||
font-weight: 500; |
|||
color: #ffffff; |
|||
|
|||
img { |
|||
position: relative; |
|||
top: 2px; |
|||
margin-right: 6px; |
|||
width: 16px; |
|||
vertical-align: top; |
|||
} |
|||
} |
|||
|
|||
.item-pics { |
|||
display: flex; |
|||
margin: 20px 0; |
|||
img { |
|||
display: block; |
|||
width: 32%; |
|||
height: 90px; |
|||
margin-right: 9px; |
|||
object-fit: cover; |
|||
} |
|||
} |
|||
} |
|||
.item { |
|||
@include toe; |
|||
font-size: 14px; |
|||
font-family: PingFang SC; |
|||
font-weight: 400; |
|||
color: rgba(#ffffff, 0.85); |
|||
line-height: 28px; |
|||
.field { |
|||
display: inline-block; |
|||
margin-right: 5px; |
|||
min-width: 90px; |
|||
text-align: right; |
|||
color: rgba(#ffffff, 0.65); |
|||
} |
|||
} |
|||
|
|||
.list { |
|||
.item { |
|||
display: flex; |
|||
align-items: center; |
|||
margin-bottom: 5px; |
|||
padding: 5px; |
|||
border-bottom: 1px dashed #124584; |
|||
&:last-child { |
|||
border-bottom: none; |
|||
} |
|||
.item-cnt { |
|||
@include toe; |
|||
width: 90%; |
|||
} |
|||
.i-arrow { |
|||
margin-left: auto; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.operate { |
|||
display: flex; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.more-btn { |
|||
position: absolute; |
|||
right: 20px; |
|||
top: 28px; |
|||
width: 80px; |
|||
height: 24px; |
|||
font-family: PingFangSC-Regular, PingFang SC; |
|||
font-weight: 400; |
|||
color: #1a95ff; |
|||
line-height: 20px; |
|||
font-size: 14px; |
|||
text-align: right; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.btn { |
|||
margin-top: 20px; |
|||
margin-right: 20px; |
|||
width: 110px; |
|||
line-height: 30px; |
|||
border: 1px solid #eee; |
|||
text-align: center; |
|||
font-size: 18px; |
|||
border-radius: 2px; |
|||
cursor: pointer; |
|||
&.z-blue { |
|||
background: #09a5ff; |
|||
border-color: #09a5ff; |
|||
} |
|||
&.z-yellow { |
|||
background: #fe6b53; |
|||
border-color: #fe6b53; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,155 @@ |
|||
<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; |
|||
position: absolute; |
|||
height: auto; |
|||
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> |
|||
@ -1,431 +1,424 @@ |
|||
<template> |
|||
<div> |
|||
<div v-if="showTitle" |
|||
class="m-title"> |
|||
<img class="title_img" |
|||
src="@/assets/images/index/list-logo.png" |
|||
alt /> |
|||
<div class="tip_title">{{titleName}}</div> |
|||
<div class="title_line"></div> |
|||
</div> |
|||
|
|||
<div class="m-table"> |
|||
<table class="g-table" |
|||
border="0" |
|||
cellspacing="0" |
|||
cellpadding="0"> |
|||
|
|||
<col :align="item.align" |
|||
:width="item.width" |
|||
:key="'col' + index" |
|||
v-for="(item, index) in colList" /> |
|||
|
|||
<thead> |
|||
<tr class="g-table-header"> |
|||
<th class="g-table-header-th" |
|||
v-for="item in header" |
|||
:key="item"> |
|||
{{ item }} |
|||
</th> |
|||
</tr> |
|||
</thead> |
|||
<!-- <el-scrollbar :style="{height:treeHeight}" |
|||
<div> |
|||
<div class="m-table"> |
|||
<table class="table" border="0" cellspacing="0" cellpadding="0"> |
|||
<col |
|||
:align="item.align" |
|||
:width="item.width" |
|||
:key="'col' + index" |
|||
v-for="(item, index) in colList" |
|||
/> |
|||
|
|||
<thead> |
|||
<tr class="table-header"> |
|||
<th |
|||
class="table-header-th" |
|||
v-for="item in header" |
|||
:key="item" |
|||
> |
|||
{{ item }} |
|||
</th> |
|||
</tr> |
|||
</thead> |
|||
<!-- <el-scrollbar :style="{height:treeHeight}" |
|||
class="g-scrollar"> --> |
|||
<tbody v-if="!loading" |
|||
class="g-table-body"> |
|||
<tr class="g-table-body-tr" |
|||
v-for="(value, index) in list" |
|||
:key="index" |
|||
@click="handleClickRow(index)"> |
|||
<td class="td" |
|||
v-for="(item, indexs) in value" |
|||
:key="indexs"> |
|||
<div v-if="typeof item === 'string' || typeof item === 'number'" |
|||
:title="item"> |
|||
{{ item }} |
|||
</div> |
|||
|
|||
<div v-if="typeof item === 'object' && item.type === 'img'"> |
|||
<!-- <span>{{ item.type+ item.src}}</span> --> |
|||
<img style="width: 18px; height: 18px" |
|||
:src="item.src" |
|||
alt="" /> |
|||
</div> |
|||
|
|||
<div v-if="typeof item === 'object' && item && item.type == 'index'"> |
|||
<img v-if="highlightTop3 && index == 0" |
|||
src="@/assets/img/shuju/top/1.png" |
|||
alt="" /> |
|||
<img v-else-if="highlightTop3 && index == 1" |
|||
src="@/assets/img/shuju/top/2.png" |
|||
alt="" /> |
|||
<img v-else-if="highlightTop3 && index == 2" |
|||
src="@/assets/img/shuju/top/3.png" |
|||
alt="" /> |
|||
<span v-else>{{ index + 1 }}</span> |
|||
</div> |
|||
|
|||
<a v-else-if=" |
|||
typeof item === 'object' && item && item.type == 'operate' |
|||
" |
|||
v-for="btn in item.list" |
|||
:key="'operate' + index + btn" |
|||
@click.stop="handleClickBtn(index, btn)">{{ btn }}</a> |
|||
<a v-else-if=" |
|||
typeof item === 'object' && item && item.type == 'people' |
|||
" |
|||
@click="handleClickPeople(item)">{{ item.name }}</a> |
|||
</td> |
|||
</tr> |
|||
</tbody> |
|||
<!-- </el-scrollbar> --> |
|||
</table> |
|||
|
|||
<div class="table-status" |
|||
v-if="loading"> |
|||
<screen-loading>加载中</screen-loading> |
|||
</div> |
|||
|
|||
<div class="table-status" |
|||
v-if="list.length == 0 && !loading"> |
|||
<div class="no-data"> |
|||
<img src="@/assets/img/modules/visual/noData.png" |
|||
class="no-data-img" /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="m-pagination"> |
|||
<el-pagination :current-page="pageNo" |
|||
:page-size="pageSize" |
|||
background |
|||
:total="total" |
|||
layout="total"> |
|||
</el-pagination> |
|||
<el-pagination :current-page="pageNo" |
|||
:page-size="pageSize" |
|||
background |
|||
:total="total" |
|||
layout="prev, pager, next, jumper, sizes" |
|||
@current-change="handlePageNoChange" |
|||
@size-change="handleSizeChange"> |
|||
</el-pagination> |
|||
</div> |
|||
|
|||
</div> |
|||
<tbody v-if="!loading" class="table-body"> |
|||
<tr |
|||
class="table-body-tr" |
|||
v-for="(value, index) in list" |
|||
:key="index" |
|||
@click="handleClickRow(index)" |
|||
> |
|||
<td |
|||
class="td" |
|||
v-for="(item, indexs) in value" |
|||
:key="indexs" |
|||
> |
|||
<div |
|||
v-if=" |
|||
typeof item === 'string' || |
|||
typeof item === 'number' |
|||
" |
|||
:title="item" |
|||
> |
|||
{{ item }} |
|||
</div> |
|||
|
|||
<div |
|||
v-if=" |
|||
typeof item === 'object' && |
|||
item.type === 'img' |
|||
" |
|||
> |
|||
<!-- <span>{{ item.type+ item.src}}</span> --> |
|||
<img |
|||
style="width: 18px; height: 18px" |
|||
:src="item.src" |
|||
alt="" |
|||
/> |
|||
</div> |
|||
|
|||
<div |
|||
v-if=" |
|||
typeof item === 'object' && |
|||
item && |
|||
item.type == 'index' |
|||
" |
|||
> |
|||
<img |
|||
v-if="highlightTop3 && index == 0" |
|||
src="@/assets/img/shuju/top/1.png" |
|||
alt="" |
|||
/> |
|||
<img |
|||
v-else-if="highlightTop3 && index == 1" |
|||
src="@/assets/img/shuju/top/2.png" |
|||
alt="" |
|||
/> |
|||
<img |
|||
v-else-if="highlightTop3 && index == 2" |
|||
src="@/assets/img/shuju/top/3.png" |
|||
alt="" |
|||
/> |
|||
<span v-else>{{ index + 1 }}</span> |
|||
</div> |
|||
|
|||
<a |
|||
v-else-if=" |
|||
typeof item === 'object' && |
|||
item && |
|||
item.type == 'operate' |
|||
" |
|||
fixed |
|||
v-for="btn in item.list" |
|||
:key="'operate' + index + btn" |
|||
@click.stop="handleClickBtn(index, btn)" |
|||
>{{ btn }}</a |
|||
> |
|||
<a |
|||
v-else-if=" |
|||
typeof item === 'object' && |
|||
item && |
|||
item.type == 'people' |
|||
" |
|||
@click="handleClickPeople(item)" |
|||
>{{ item.name }}</a |
|||
> |
|||
</td> |
|||
</tr> |
|||
</tbody> |
|||
<!-- </el-scrollbar> --> |
|||
</table> |
|||
|
|||
<div class="table-status" v-if="loading"> |
|||
<screen-loading>加载中</screen-loading> |
|||
</div> |
|||
|
|||
<div class="table-status" v-if="list.length == 0 && !loading"> |
|||
<div class="no-data"> |
|||
<img |
|||
src="@/assets/img/modules/visual/noData.png" |
|||
class="no-data-img" |
|||
/> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="m-pagination"> |
|||
<el-pagination |
|||
:current-page="pageNo" |
|||
:page-size="pageSize" |
|||
background |
|||
:total="total" |
|||
layout="total" |
|||
> |
|||
</el-pagination> |
|||
<el-pagination |
|||
:current-page="pageNo" |
|||
:page-size="pageSize" |
|||
background |
|||
:total="total" |
|||
layout="prev, pager, next, jumper, sizes" |
|||
@current-change="handlePageNoChange" |
|||
@size-change="handleSizeChange" |
|||
> |
|||
</el-pagination> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import ScreenLoading from "./loading"; |
|||
import { mapGetters } from 'vuex' |
|||
import { mapGetters } from "vuex"; |
|||
|
|||
export default { |
|||
name: "table", |
|||
components: { |
|||
ScreenLoading, |
|||
}, |
|||
props: { |
|||
//是否显示标题，默认为true |
|||
showTitle: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
//列表标题名称 |
|||
titleName: { |
|||
type: String, |
|||
default: "列表" |
|||
}, |
|||
//各列对齐方式、宽度等属性 |
|||
colList: { |
|||
type: Array, |
|||
default: () => { |
|||
return [ |
|||
// { |
|||
// align: "center", |
|||
// width: "50%", |
|||
// }, |
|||
]; |
|||
}, |
|||
}, |
|||
//表头 |
|||
header: { |
|||
type: Array, |
|||
required: false, |
|||
default: () => { |
|||
return []; |
|||
}, |
|||
}, |
|||
//每行数据 |
|||
list: { |
|||
type: Array, |
|||
required: false, |
|||
default: () => { |
|||
return []; |
|||
}, |
|||
}, |
|||
//数据总数 |
|||
total: { |
|||
type: Number, |
|||
default: 0 |
|||
}, |
|||
loading: { |
|||
type: Boolean, |
|||
default: true, |
|||
}, |
|||
highlightTop3: { |
|||
type: Boolean, |
|||
default: false, |
|||
}, |
|||
}, |
|||
data () { |
|||
return { |
|||
|
|||
pageSize: 10, |
|||
pageNo: 1, |
|||
}; |
|||
}, |
|||
watch: {}, |
|||
computed: { |
|||
|
|||
|
|||
treeHeight () { |
|||
return this.$store.state.inIframe ? this.clientHeight - 300 + this.iframeHeight + 'px' : this.clientHeight - 300 + 'px' |
|||
|
|||
}, |
|||
treeWidth () { |
|||
return document.documentElement.clientWidth |
|||
}, |
|||
|
|||
...mapGetters(['clientHeight', 'iframeHeight']) |
|||
}, |
|||
mounted () { }, |
|||
|
|||
created () { }, |
|||
|
|||
methods: { |
|||
//点击某一行 |
|||
handleClickRow (index) { |
|||
this.$emit("handleClickRow", index); |
|||
}, |
|||
handleClickBtn (index, type) { |
|||
this.$emit("operate", index, type); |
|||
}, |
|||
handleClickPeople (item) { |
|||
this.$router.push({ |
|||
path: `/main-shuju/visual-basicinfo-people/${item.uid}`, |
|||
}); |
|||
}, |
|||
|
|||
handlePageNoChange (val) { |
|||
this.$emit("handlePageNoChange", val); |
|||
}, |
|||
handleSizeChange (val) { |
|||
this.$emit("handleSizeChange", val); |
|||
}, |
|||
}, |
|||
name: "list", |
|||
components: { |
|||
ScreenLoading, |
|||
}, |
|||
props: { |
|||
//各列对齐方式、宽度等属性 |
|||
colList: { |
|||
type: Array, |
|||
default: () => { |
|||
return [ |
|||
// { |
|||
// align: "center", |
|||
// width: "50%", |
|||
// }, |
|||
]; |
|||
}, |
|||
}, |
|||
//表头 |
|||
header: { |
|||
type: Array, |
|||
required: false, |
|||
default: () => { |
|||
return []; |
|||
}, |
|||
}, |
|||
//每行数据 |
|||
list: { |
|||
type: Array, |
|||
required: false, |
|||
default: () => { |
|||
return []; |
|||
}, |
|||
}, |
|||
//数据总数 |
|||
total: { |
|||
type: Number, |
|||
default: 0, |
|||
}, |
|||
loading: { |
|||
type: Boolean, |
|||
default: true, |
|||
}, |
|||
highlightTop3: { |
|||
type: Boolean, |
|||
default: false, |
|||
}, |
|||
}, |
|||
data() { |
|||
return { |
|||
pageSize: 10, |
|||
pageNo: 1, |
|||
}; |
|||
}, |
|||
watch: {}, |
|||
computed: { |
|||
treeHeight() { |
|||
return this.$store.state.inIframe |
|||
? this.clientHeight - 300 + this.iframeHeight + "px" |
|||
: this.clientHeight - 300 + "px"; |
|||
}, |
|||
treeWidth() { |
|||
return document.documentElement.clientWidth; |
|||
}, |
|||
|
|||
...mapGetters(["clientHeight", "iframeHeight"]), |
|||
}, |
|||
mounted() {}, |
|||
|
|||
created() {}, |
|||
|
|||
methods: { |
|||
//点击某一行 |
|||
handleClickRow(index) { |
|||
this.$emit("handleClickRow", index); |
|||
}, |
|||
handleClickBtn(index, type) { |
|||
this.$emit("operate", index, type); |
|||
}, |
|||
handleClickPeople(item) { |
|||
this.$router.push({ |
|||
path: `/main-shuju/visual-basicinfo-people/${item.uid}`, |
|||
}); |
|||
}, |
|||
|
|||
handlePageNoChange(val) { |
|||
this.$emit("handlePageNoChange", val); |
|||
}, |
|||
handleSizeChange(val) { |
|||
this.$emit("handleSizeChange", val); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.m-title { |
|||
display: flex; |
|||
align-items: center; |
|||
// margin-left: 24px; |
|||
|
|||
.title_img { |
|||
width: 17px; |
|||
height: 17px; |
|||
} |
|||
.tip_title { |
|||
margin-left: 8px; |
|||
font-size: 16px; |
|||
font-family: PingFangSC-Medium, PingFang SC; |
|||
font-weight: 500; |
|||
color: #ffffff; |
|||
line-height: 22px; |
|||
} |
|||
|
|||
.title_line { |
|||
margin-left: 8px; |
|||
width: 244px; |
|||
height: 1px; |
|||
background: linear-gradient( |
|||
270deg, |
|||
rgba(55, 198, 255, 0.1) 0%, |
|||
#1995ff 100% |
|||
); |
|||
} |
|||
} |
|||
.m-table { |
|||
margin-top: 9px; |
|||
width: 100%; |
|||
.g-table { |
|||
box-sizing: border-box; |
|||
width: 100%; |
|||
height: 100%; |
|||
border: none; |
|||
table-layout: fixed; |
|||
|
|||
&-header { |
|||
width: 100%; |
|||
height: 56px; |
|||
font-size: 14px; |
|||
font-family: PingFangSC-Regular, PingFang SC; |
|||
font-weight: 400; |
|||
color: rgba(255, 255, 255, 0.65); |
|||
line-height: 20px; |
|||
|
|||
&-th { |
|||
text-align: left; |
|||
border: none; |
|||
padding: 18px 5px 18px 24px; |
|||
// width: calc(100% / 5); |
|||
} |
|||
} |
|||
|
|||
&-body { |
|||
box-sizing: border-box; |
|||
width: 100%; |
|||
font-size: 14px; |
|||
font-family: PingFangSC-Regular, PingFang SC; |
|||
font-weight: 400; |
|||
color: #ffffff; |
|||
line-height: 20px; |
|||
|
|||
&-tr { |
|||
box-sizing: border-box; |
|||
width: 100%; |
|||
min-height: 56px; |
|||
|
|||
.td { |
|||
box-sizing: border-box; |
|||
text-align: left; |
|||
border: none; |
|||
padding: 18px 5px 18px 24px; |
|||
|
|||
> div { |
|||
overflow: hidden; |
|||
white-space: nowrap; |
|||
text-overflow: ellipsis; |
|||
word-wrap: normal; |
|||
} |
|||
|
|||
a { |
|||
font-size: 14px; |
|||
font-family: PingFangSC-Regular, PingFang SC; |
|||
font-weight: 400; |
|||
color: #1a95ff; |
|||
line-height: 20px; |
|||
cursor: pointer; |
|||
} |
|||
} |
|||
} |
|||
|
|||
&-tr:nth-child(2n-1) { |
|||
background: rgba(26, 149, 255, 0.15); |
|||
} |
|||
|
|||
// &-tr:hover { |
|||
// background: url("../../../../assets/img/modules/visual/hover-bac.png") |
|||
// no-repeat center; |
|||
// background-size: 100% 100%; |
|||
// } |
|||
} |
|||
|
|||
/deep/ .el-scrollbar__wrap { |
|||
width: 100% !important; |
|||
overflow-x: hidden !important; |
|||
} |
|||
} |
|||
.g-scrollar { |
|||
width: 100%; |
|||
} |
|||
|
|||
.table-status { |
|||
position: relative; |
|||
height: 300px; |
|||
|
|||
// 暂无数据 |
|||
.no-data { |
|||
&-img { |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
margin: auto; |
|||
} |
|||
} |
|||
} |
|||
margin-top: 9px; |
|||
// width: 100%; |
|||
overflow: hidden; |
|||
min-height: 300px; |
|||
|
|||
.table { |
|||
box-sizing: border-box; |
|||
width: 100%; |
|||
border: none; |
|||
table-layout: fixed; |
|||
|
|||
&-header { |
|||
width: 100%; |
|||
height: 56px; |
|||
font-size: 14px; |
|||
font-family: PingFangSC-Regular, PingFang SC; |
|||
font-weight: 400; |
|||
color: rgba(255, 255, 255, 0.65); |
|||
line-height: 20px; |
|||
|
|||
&-th { |
|||
text-align: left; |
|||
border: none; |
|||
padding: 18px 5px 18px 24px; |
|||
// width: calc(100% / 5); |
|||
} |
|||
} |
|||
|
|||
&-body { |
|||
box-sizing: border-box; |
|||
width: 100%; |
|||
font-size: 14px; |
|||
font-family: PingFangSC-Regular, PingFang SC; |
|||
font-weight: 400; |
|||
color: #ffffff; |
|||
line-height: 20px; |
|||
|
|||
&-tr { |
|||
box-sizing: border-box; |
|||
width: 100%; |
|||
min-height: 56px; |
|||
|
|||
.td { |
|||
box-sizing: border-box; |
|||
text-align: left; |
|||
border: none; |
|||
padding: 18px 5px 18px 24px; |
|||
|
|||
> div { |
|||
overflow: hidden; |
|||
white-space: nowrap; |
|||
text-overflow: ellipsis; |
|||
word-wrap: normal; |
|||
} |
|||
|
|||
a { |
|||
font-size: 14px; |
|||
font-family: PingFangSC-Regular, PingFang SC; |
|||
font-weight: 400; |
|||
color: #1a95ff; |
|||
line-height: 20px; |
|||
cursor: pointer; |
|||
} |
|||
} |
|||
} |
|||
|
|||
&-tr:nth-child(2n-1) { |
|||
background: rgba(26, 149, 255, 0.15); |
|||
} |
|||
|
|||
// &-tr:hover { |
|||
// background: url("../../../../assets/img/modules/visual/hover-bac.png") |
|||
// no-repeat center; |
|||
// background-size: 100% 100%; |
|||
// } |
|||
} |
|||
|
|||
/deep/ .el-scrollbar__wrap { |
|||
width: 100% !important; |
|||
overflow-x: hidden !important; |
|||
} |
|||
} |
|||
.g-scrollar { |
|||
width: 100%; |
|||
} |
|||
|
|||
.table-status { |
|||
position: relative; |
|||
height: 300px; |
|||
|
|||
// 暂无数据 |
|||
.no-data { |
|||
&-img { |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
margin: auto; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.m-pagination { |
|||
box-sizing: border-box; |
|||
margin-top: 24px; |
|||
width: 100%; |
|||
height: 40px; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
|
|||
/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active { |
|||
font-size: 14px; |
|||
font-family: PingFangSC-Regular, PingFang SC; |
|||
font-weight: 400; |
|||
|
|||
color: #ffffff; |
|||
border-radius: 2px; |
|||
border: 1px solid rgba(26, 149, 255, 0.45); |
|||
background: #1a95ff; |
|||
} |
|||
|
|||
/deep/ .el-pagination .el-pager li { |
|||
font-size: 14px; |
|||
font-family: PingFangSC-Regular, PingFang SC; |
|||
font-weight: 400; |
|||
color: rgba(255, 255, 255, 0.65); |
|||
border-radius: 2px; |
|||
border: 1px solid rgba(26, 149, 255, 0.45); |
|||
background: #00023a; |
|||
} |
|||
|
|||
/deep/ .el-pagination .btn-prev { |
|||
font-size: 14px; |
|||
font-family: PingFangSC-Regular, PingFang SC; |
|||
font-weight: 400; |
|||
color: rgba(255, 255, 255, 0.65); |
|||
border-radius: 2px; |
|||
border: 1px solid rgba(26, 149, 255, 0.45); |
|||
background: #00023a; |
|||
} |
|||
|
|||
/deep/ .el-pagination .btn-next { |
|||
font-size: 14px; |
|||
font-family: PingFangSC-Regular, PingFang SC; |
|||
font-weight: 400; |
|||
color: rgba(255, 255, 255, 0.65); |
|||
border-radius: 2px; |
|||
border: 1px solid rgba(26, 149, 255, 0.45); |
|||
background: #00023a; |
|||
} |
|||
/deep/ .el-pagination__editor.el-input .el-input__inner { |
|||
font-size: 14px; |
|||
font-family: PingFangSC-Regular, PingFang SC; |
|||
font-weight: 400; |
|||
color: rgba(255, 255, 255, 0.65); |
|||
border-radius: 2px; |
|||
border: 1px solid rgba(26, 149, 255, 0.45); |
|||
background: #00023a; |
|||
} |
|||
|
|||
/deep/ .el-pagination .el-select .el-input .el-input__inner { |
|||
margin-left: 14px; |
|||
font-size: 14px; |
|||
font-family: PingFangSC-Regular, PingFang SC; |
|||
font-weight: 400; |
|||
color: rgba(255, 255, 255, 0.65); |
|||
border-radius: 2px; |
|||
border: 1px solid rgba(26, 149, 255, 0.45); |
|||
background: #00023a; |
|||
} |
|||
box-sizing: border-box; |
|||
margin-top: 24px; |
|||
width: 100%; |
|||
height: 40px; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
|
|||
/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active { |
|||
font-size: 14px; |
|||
font-family: PingFangSC-Regular, PingFang SC; |
|||
font-weight: 400; |
|||
|
|||
color: #ffffff; |
|||
border-radius: 2px; |
|||
border: 1px solid rgba(26, 149, 255, 0.45); |
|||
background: #1a95ff; |
|||
} |
|||
|
|||
/deep/ .el-pagination .el-pager li { |
|||
font-size: 14px; |
|||
font-family: PingFangSC-Regular, PingFang SC; |
|||
font-weight: 400; |
|||
color: rgba(255, 255, 255, 0.65); |
|||
border-radius: 2px; |
|||
border: 1px solid rgba(26, 149, 255, 0.45); |
|||
background: #00023a; |
|||
} |
|||
|
|||
/deep/ .el-pagination .btn-prev { |
|||
font-size: 14px; |
|||
font-family: PingFangSC-Regular, PingFang SC; |
|||
font-weight: 400; |
|||
color: rgba(255, 255, 255, 0.65); |
|||
border-radius: 2px; |
|||
border: 1px solid rgba(26, 149, 255, 0.45); |
|||
background: #00023a; |
|||
} |
|||
|
|||
/deep/ .el-pagination .btn-next { |
|||
font-size: 14px; |
|||
font-family: PingFangSC-Regular, PingFang SC; |
|||
font-weight: 400; |
|||
color: rgba(255, 255, 255, 0.65); |
|||
border-radius: 2px; |
|||
border: 1px solid rgba(26, 149, 255, 0.45); |
|||
background: #00023a; |
|||
} |
|||
/deep/ .el-pagination__editor.el-input .el-input__inner { |
|||
font-size: 14px; |
|||
font-family: PingFangSC-Regular, PingFang SC; |
|||
font-weight: 400; |
|||
color: rgba(255, 255, 255, 0.65); |
|||
border-radius: 2px; |
|||
border: 1px solid rgba(26, 149, 255, 0.45); |
|||
background: #00023a; |
|||
} |
|||
|
|||
/deep/ .el-pagination .el-select .el-input .el-input__inner { |
|||
margin-left: 14px; |
|||
font-size: 14px; |
|||
font-family: PingFangSC-Regular, PingFang SC; |
|||
font-weight: 400; |
|||
color: rgba(255, 255, 255, 0.65); |
|||
border-radius: 2px; |
|||
border: 1px solid rgba(26, 149, 255, 0.45); |
|||
background: #00023a; |
|||
} |
|||
} |
|||
</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: "bread", |
|||
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,404 +1,522 @@ |
|||
<template> |
|||
<div> |
|||
<div class="fwgl-main"> |
|||
<div class="g-pie"> |
|||
<div class="pie-left"> |
|||
<screen-echarts-frame class="" |
|||
@myChartMethod="pieInitOk" |
|||
ref="pieChart"></screen-echarts-frame> |
|||
</div> |
|||
<div class="pie-legend"> |
|||
<div class="item"> |
|||
<div class="item-logo logo1"></div> |
|||
<div class="item-name">自住房屋</div> |
|||
</div> |
|||
<div class="item"> |
|||
<div class="item-logo logo2"></div> |
|||
<div class="item-name">出租房屋</div> |
|||
</div> |
|||
<div class="item"> |
|||
<div class="item-logo logo3"></div> |
|||
<div class="item-name">闲置房屋</div> |
|||
</div> |
|||
</div> |
|||
<div class="pie-right"> |
|||
<div class="right-row"> |
|||
<div class="row-item"> |
|||
<div class="item-one"> |
|||
<img class="img" |
|||
src="@/assets/images/shuju/renfang/house-logo.png" |
|||
alt /> |
|||
<div class="title">房屋总数</div> |
|||
</div> |
|||
<div class="item-two"> |
|||
<div class="num">2818</div> |
|||
<div class="unit">户</div> |
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
<div class="row-item marginleft10"> |
|||
<div class="item-one"> |
|||
<img class="img" |
|||
src="@/assets/images/shuju/renfang/house-logo.png" |
|||
alt /> |
|||
<div class="title">自住房屋</div> |
|||
</div> |
|||
<div class="item-two"> |
|||
<div class="num">2642</div> |
|||
<div class="unit">户</div> |
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
<div class="right-row margintop18"> |
|||
<div class="row-item"> |
|||
<div class="item-one"> |
|||
<img class="img" |
|||
src="@/assets/images/shuju/renfang/house-logo.png" |
|||
alt /> |
|||
<div class="title">出租房屋</div> |
|||
</div> |
|||
<div class="item-two"> |
|||
<div class="num">818</div> |
|||
<div class="unit">户</div> |
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
<div class="row-item marginleft10"> |
|||
<div class="item-one"> |
|||
<img class="img" |
|||
src="@/assets/images/shuju/renfang/house-logo.png" |
|||
alt /> |
|||
<div class="title">闲置房屋</div> |
|||
</div> |
|||
<div class="item-two"> |
|||
<div class="num">316</div> |
|||
<div class="unit">户</div> |
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="g-bar"> |
|||
<div class="bar-title"> |
|||
|
|||
<img class="title_img" |
|||
src="@/assets/images/index/list-logo.png" |
|||
alt /> |
|||
<div class="tip_title">近一年房屋状态变化趋势图</div> |
|||
<div class="title_line"></div> |
|||
|
|||
</div> |
|||
<div class="bar-legend"> |
|||
<div class="item-logo logo1"></div> |
|||
<div class="item-name">自住房屋</div> |
|||
<div class="item-logo logo2 marginleft10"></div> |
|||
<div class="item-name">出租房屋</div> |
|||
<div class="item-logo logo3 marginleft10"></div> |
|||
<div class="item-name">闲置房屋</div> |
|||
</div> |
|||
<div class="bar-main"> |
|||
<screen-echarts-frame class="" |
|||
@myChartMethod="barInitOk" |
|||
ref="barChart"></screen-echarts-frame> |
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
<!-- <screen-nodata class="nodata" |
|||
<div> |
|||
<div class="m-fwgl"> |
|||
<div class="m-pie"> |
|||
<div class="pie-left"> |
|||
<screen-echarts-frame |
|||
class="" |
|||
@myChartMethod="pieInitOk" |
|||
ref="pieChart" |
|||
></screen-echarts-frame> |
|||
</div> |
|||
<div class="pie-legend"> |
|||
<div class="item"> |
|||
<div class="item-logo logo1"></div> |
|||
<div class="item-name">自住房屋</div> |
|||
</div> |
|||
<div class="item"> |
|||
<div class="item-logo logo2"></div> |
|||
<div class="item-name">出租房屋</div> |
|||
</div> |
|||
<div class="item"> |
|||
<div class="item-logo logo3"></div> |
|||
<div class="item-name">闲置房屋</div> |
|||
</div> |
|||
</div> |
|||
<div class="pie-right"> |
|||
<div class="right-row"> |
|||
<div class="row-item" @click="toListPage"> |
|||
<div class="item-one"> |
|||
<img |
|||
class="img" |
|||
src="@/assets/images/shuju/renfang/house-logo.png" |
|||
alt |
|||
/> |
|||
<div class="title">房屋总数</div> |
|||
</div> |
|||
<div class="item-two"> |
|||
<div class="num">{{ info.house_count }}</div> |
|||
<div class="unit">户</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div |
|||
class="row-item marginleft10" |
|||
@click="toListPage('self_dwelling')" |
|||
> |
|||
<div class="item-one"> |
|||
<img |
|||
class="img" |
|||
src="@/assets/images/shuju/renfang/house-logo.png" |
|||
alt |
|||
/> |
|||
<div class="title">自住房屋</div> |
|||
</div> |
|||
<div class="item-two"> |
|||
<div class="num"> |
|||
{{ info.self_dwelling_count }} |
|||
</div> |
|||
<div class="unit">户</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div |
|||
class="right-row margintop18" |
|||
@click="toListPage('lease')" |
|||
> |
|||
<div class="row-item"> |
|||
<div class="item-one"> |
|||
<img |
|||
class="img" |
|||
src="@/assets/images/shuju/renfang/house-logo.png" |
|||
alt |
|||
/> |
|||
<div class="title">出租房屋</div> |
|||
</div> |
|||
<div class="item-two"> |
|||
<div class="num">{{ info.lease_count }}</div> |
|||
<div class="unit">户</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div |
|||
class="row-item marginleft10" |
|||
@click="toListPage('unused')" |
|||
> |
|||
<div class="item-one"> |
|||
<img |
|||
class="img" |
|||
src="@/assets/images/shuju/renfang/house-logo.png" |
|||
alt |
|||
/> |
|||
<div class="title">闲置房屋</div> |
|||
</div> |
|||
<div class="item-two"> |
|||
<div class="num">{{ info.unused_count }}</div> |
|||
<div class="unit">户</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="m-bar"> |
|||
<div class="bar-title"> |
|||
<img |
|||
class="title_img" |
|||
src="@/assets/images/index/list-logo.png" |
|||
alt |
|||
/> |
|||
<div class="tip_title">近一年房屋状态变化趋势图</div> |
|||
<div class="title_line"></div> |
|||
</div> |
|||
<div class="bar-legend"> |
|||
<div class="item-logo logo1"></div> |
|||
<div class="item-name">自住房屋</div> |
|||
<div class="item-logo logo2 marginleft10"></div> |
|||
<div class="item-name">出租房屋</div> |
|||
<div class="item-logo logo3 marginleft10"></div> |
|||
<div class="item-name">闲置房屋</div> |
|||
</div> |
|||
<div class="bar-main"> |
|||
<screen-echarts-frame |
|||
class="" |
|||
@myChartMethod="barInitOk" |
|||
ref="barChart" |
|||
></screen-echarts-frame> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- <screen-nodata class="nodata" |
|||
v-if="showNoData"></screen-nodata> --> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { requestPost } from "@/js/dai/request"; |
|||
import screenEchartsFrame from "@/views/dataBoard/cpts/screen-echarts-frame/index"; |
|||
import { pieOption } from './fwPieOption.js' |
|||
import { barOption } from './fwBarOption.js' |
|||
import { pieOption } from "./fwPieOption.js"; |
|||
import { barOption } from "./fwBarOption.js"; |
|||
import { requestPostBi } from "@/js/dai/request-bipass"; |
|||
|
|||
export default { |
|||
props: { |
|||
orgId: { |
|||
type: String, |
|||
default: "", |
|||
}, |
|||
}, |
|||
components: { |
|||
screenEchartsFrame |
|||
}, |
|||
// mixins: [animate] |
|||
beforeDestroy () { |
|||
this.timer && clearInterval(this.timer) |
|||
}, |
|||
data () { |
|||
return { |
|||
showNoData: false, |
|||
timer: null, |
|||
barChart: '', |
|||
pieChart: '', |
|||
pieOption: {}, |
|||
barOption: {}, |
|||
pieInitState: false, |
|||
barInitState: false, |
|||
pieData: [] |
|||
} |
|||
}, |
|||
mounted () { |
|||
this.getData() |
|||
}, |
|||
methods: { |
|||
pieInitOk () { |
|||
|
|||
this.pieInitState = true |
|||
}, |
|||
barInitOk () { |
|||
this.barInitState = true |
|||
}, |
|||
getData () { |
|||
this.getBar() |
|||
this.getPie() |
|||
}, |
|||
getBar () { |
|||
if (this.barInitState) { |
|||
this.getBarChart() |
|||
} else { |
|||
setTimeout(() => { |
|||
this.getBar() |
|||
}, 500) |
|||
} |
|||
}, |
|||
getPie () { |
|||
if (this.pieInitState) { |
|||
this.getPieChart() |
|||
} else { |
|||
setTimeout(() => { |
|||
this.getPie() |
|||
}, 500) |
|||
} |
|||
}, |
|||
// 获取饼状图 |
|||
async getPieChart () { |
|||
|
|||
this.$refs.pieChart.clear() |
|||
// this.$refs.pieChart.showLoading() |
|||
|
|||
// 获取pieChart配置 |
|||
this.pieOption = pieOption() |
|||
|
|||
// 设置三个配置值 |
|||
this.pieOption.title.text = '73%' |
|||
this.pieData = [ |
|||
{ value: 1048, name: 'Search Engine' }, |
|||
{ value: 735, name: 'Direct' }, |
|||
{ value: 580, name: 'Email' } |
|||
] |
|||
this.pieOption.series[0].data = this.pieData; |
|||
// this.$refs.pieChart.hideLoading() |
|||
this.$refs.pieChart.setOption(this.pieOption) |
|||
}, |
|||
|
|||
// 获取饼状图 |
|||
async getBarChart () { |
|||
this.showNoData = false |
|||
this.$refs.barChart.clear() |
|||
// this.$refs.barChart.showLoading() |
|||
|
|||
|
|||
// this.$refs.barChart.hideLoading() |
|||
let xaxis = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'] |
|||
let series = [ |
|||
{ data: [120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90] }, |
|||
{ data: [120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90] }, |
|||
{ data: [120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90] } |
|||
] |
|||
|
|||
// if (res.data.xaxis && res.data.xaxis.length > 0) { |
|||
// const { |
|||
// xaxis, |
|||
// totalIndexData, |
|||
// serviceAbilityData, |
|||
// partyDevAbilityData, |
|||
// governAbilityData |
|||
// } = res.data |
|||
|
|||
// this.barOption = barOption() |
|||
// this.$refs.barChart.hideLoading() |
|||
// this.$refs.barChart.setOption(this.barOption, true) |
|||
// this.$refs.barChart.setOption({ |
|||
// xAxis: { data: xaxis }, |
|||
// series: [ |
|||
// { data: totalIndexData }, |
|||
// { data: partyDevAbilityData }, |
|||
// { data: governAbilityData }, |
|||
// { data: serviceAbilityData } |
|||
// ] |
|||
// }, true) |
|||
// } else { |
|||
// this.showNoData = true |
|||
// } |
|||
|
|||
this.barOption = barOption() |
|||
// this.$refs.barChart.hideLoading() |
|||
this.$refs.barChart.setOption(this.barOption, true) |
|||
this.$refs.barChart.setOption({ |
|||
xAxis: { data: xaxis }, |
|||
series: series |
|||
}, true) |
|||
} |
|||
|
|||
} |
|||
props: { |
|||
orgId: { |
|||
type: String, |
|||
default: "", |
|||
}, |
|||
}, |
|||
components: { |
|||
screenEchartsFrame, |
|||
}, |
|||
|
|||
data() { |
|||
return { |
|||
showNoData: false, |
|||
barChart: "", |
|||
pieChart: "", |
|||
pieOption: {}, |
|||
barOption: {}, |
|||
pieInitState: false, |
|||
barInitState: false, |
|||
pieData: [], |
|||
|
|||
info: { |
|||
house_count: "--", |
|||
self_dwelling_count: "--", |
|||
lease_count: "--", |
|||
unused_count: "--", |
|||
}, |
|||
}; |
|||
}, |
|||
mounted() { |
|||
this.getData(); |
|||
}, |
|||
watch: { |
|||
orgId() { |
|||
this.getData(); |
|||
}, |
|||
}, |
|||
methods: { |
|||
toListPage(type = "") { |
|||
this.$router.push({ |
|||
path: "/dataBoard/renfang/house-list", |
|||
query: { |
|||
org_id: this.orgId, |
|||
type, |
|||
}, |
|||
}); |
|||
}, |
|||
|
|||
pieInitOk() { |
|||
this.pieInitState = true; |
|||
}, |
|||
barInitOk() { |
|||
this.barInitState = true; |
|||
}, |
|||
async getData() { |
|||
await this.getInfo(); |
|||
this.getBar(); |
|||
this.getPie(); |
|||
}, |
|||
getBar() { |
|||
if (this.barInitState) { |
|||
this.getBarData(); |
|||
} else { |
|||
setTimeout(() => { |
|||
this.getBar(); |
|||
}, 500); |
|||
} |
|||
}, |
|||
getPie() { |
|||
if (this.pieInitState) { |
|||
this.iniPieChart(); |
|||
} else { |
|||
setTimeout(() => { |
|||
this.getPie(); |
|||
}, 500); |
|||
} |
|||
}, |
|||
|
|||
// 获取房屋总数等 |
|||
async getInfo() { |
|||
const url = "house_view"; |
|||
|
|||
const { data, code, msg } = await requestPostBi( |
|||
url, |
|||
{ |
|||
queryParam: { |
|||
org_id: this.orgId, |
|||
}, |
|||
}, |
|||
{ |
|||
mockId: 60007107, |
|||
} |
|||
); |
|||
|
|||
if (code === 0 && data && Array.isArray(data) && data.length > 0) { |
|||
let info = data[0]; |
|||
this.info = { ...this.info, ...info }; |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
// 获取饼状图 |
|||
async iniPieChart() { |
|||
this.$refs.pieChart.clear(); |
|||
// this.$refs.pieChart.showLoading() |
|||
|
|||
// 获取pieChart配置 |
|||
this.pieOption = pieOption(); |
|||
|
|||
const { info } = this; |
|||
// 设置三个配置值 |
|||
this.pieOption.title.text = |
|||
parseInt((100 * info.self_dwelling_count) / info.house_count) + |
|||
"%"; |
|||
this.pieData = [ |
|||
{ value: info.self_dwelling_count, name: "自住房屋" }, |
|||
{ value: info.lease_count, name: "出租房屋" }, |
|||
{ value: info.unused_count, name: "闲置房屋" }, |
|||
]; |
|||
this.pieOption.series[0].data = this.pieData; |
|||
this.$refs.pieChart.setOption(this.pieOption); |
|||
// this.$refs.pieChart.hideLoading() |
|||
|
|||
// 点击饼图 切换中心显示的比例 |
|||
this.$refs.pieChart.myChart.on("selectchanged", (params) => { |
|||
console.log(params); |
|||
const { |
|||
fromActionPayload: { dataIndexInside }, |
|||
} = params; |
|||
this.pieOption.title.text = |
|||
parseInt( |
|||
(100 * |
|||
[ |
|||
info.self_dwelling_count, |
|||
info.lease_count, |
|||
info.unused_count, |
|||
][dataIndexInside]) / |
|||
info.house_count |
|||
) + "%"; |
|||
this.$refs.pieChart.myChart.setOption(this.pieOption); |
|||
}); |
|||
}, |
|||
|
|||
// 获取房屋总数等 |
|||
async getBarData() { |
|||
const url = "house_trend"; |
|||
|
|||
this.$refs.barChart.showLoading(); |
|||
const { data, code, msg } = await requestPostBi( |
|||
url, |
|||
{ |
|||
queryParam: { |
|||
org_id: this.org_id, |
|||
}, |
|||
}, |
|||
{ |
|||
mockId: 60388110, |
|||
} |
|||
); |
|||
|
|||
if (code === 0 && data && Array.isArray(data) && data.length > 0) { |
|||
let xaxis = []; |
|||
let series = [{ data: [] }, { data: [] }, { data: [] }]; |
|||
for (const { |
|||
month, |
|||
self_dwelling_count, |
|||
lease_count, |
|||
unused_count, |
|||
} of data) { |
|||
xaxis.push(month); |
|||
series[0].data.push(self_dwelling_count); |
|||
series[1].data.push(lease_count); |
|||
series[2].data.push(unused_count); |
|||
} |
|||
this.iniBarChart(xaxis, series); |
|||
this.$refs.barChart.hideLoading(); |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
|
|||
// 获取饼状图 |
|||
async iniBarChart(xaxis, series) { |
|||
this.showNoData = false; |
|||
this.$refs.barChart.clear(); |
|||
// let xaxis = [ |
|||
// "1月", |
|||
// "2月", |
|||
// "3月", |
|||
// "4月", |
|||
// "5月", |
|||
// "6月", |
|||
// "7月", |
|||
// "8月", |
|||
// "9月", |
|||
// "10月", |
|||
// "11月", |
|||
// "12月", |
|||
// ]; |
|||
// let series = [ |
|||
// { |
|||
// data: [ |
|||
// 120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, |
|||
// 90, |
|||
// ], |
|||
// }, |
|||
// { |
|||
// data: [ |
|||
// 120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, |
|||
// 90, |
|||
// ], |
|||
// }, |
|||
// { |
|||
// data: [ |
|||
// 120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, |
|||
// 90, |
|||
// ], |
|||
// }, |
|||
// ]; |
|||
this.barOption = barOption(); |
|||
this.$refs.barChart.setOption(this.barOption, true); |
|||
this.$refs.barChart.setOption( |
|||
{ |
|||
xAxis: { data: xaxis }, |
|||
series: series, |
|||
}, |
|||
true |
|||
); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.fwgl-main { |
|||
height: 100%; |
|||
width: 100%; |
|||
|
|||
.g-pie { |
|||
margin-top: 24px; |
|||
display: flex; |
|||
justify-content: space-around; |
|||
|
|||
.pie-left { |
|||
height: 120px; |
|||
flex: 0 0 120px; |
|||
} |
|||
|
|||
.pie-legend { |
|||
.item { |
|||
display: flex; |
|||
margin-bottom: 12px; |
|||
} |
|||
} |
|||
.pie-right { |
|||
.right-row { |
|||
display: flex; |
|||
// justify-content: space-between; |
|||
|
|||
.row-item { |
|||
flex: 0 0 100px; |
|||
.item-one { |
|||
display: flex; |
|||
.img { |
|||
width: 15px; |
|||
height: 15px; |
|||
} |
|||
.title { |
|||
margin-left: 9px; |
|||
font-size: 14px; |
|||
font-family: PingFangSC-Regular, PingFang SC; |
|||
font-weight: 400; |
|||
color: rgba(255, 255, 255, 0.65); |
|||
} |
|||
} |
|||
|
|||
.item-two { |
|||
margin-top: 8px; |
|||
display: flex; |
|||
align-items: flex-end; |
|||
margin-left: 23px; |
|||
|
|||
.num { |
|||
font-size: 24px; |
|||
font-family: PingFangSC-Medium, PingFang SC; |
|||
font-weight: 500; |
|||
color: #ffffff; |
|||
} |
|||
|
|||
.unit { |
|||
margin-left: 9px; |
|||
font-size: 14px; |
|||
font-family: PingFangSC-Medium, PingFang SC; |
|||
font-weight: 500; |
|||
color: #ffffff; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.g-bar { |
|||
position: relative; |
|||
margin-top: 14px; |
|||
|
|||
.bar-title { |
|||
display: flex; |
|||
align-items: center; |
|||
// margin-left: 24px; |
|||
|
|||
.title_img { |
|||
width: 17px; |
|||
height: 17px; |
|||
} |
|||
.tip_title { |
|||
margin-left: 8px; |
|||
font-size: 16px; |
|||
font-family: PingFangSC-Medium, PingFang SC; |
|||
font-weight: 500; |
|||
color: #ffffff; |
|||
line-height: 22px; |
|||
} |
|||
|
|||
.title_line { |
|||
margin-left: 8px; |
|||
width: 244px; |
|||
height: 1px; |
|||
background: linear-gradient( |
|||
270deg, |
|||
rgba(55, 198, 255, 0.1) 0%, |
|||
#1995ff 100% |
|||
); |
|||
} |
|||
} |
|||
|
|||
.bar-legend { |
|||
position: absolute; |
|||
top: 37px; |
|||
right: 20px; |
|||
display: flex; |
|||
} |
|||
|
|||
.bar-main { |
|||
margin-top: 10px; |
|||
height: 225px; |
|||
} |
|||
} |
|||
.m-fwgl { |
|||
height: 100%; |
|||
width: 100%; |
|||
|
|||
.m-pie { |
|||
margin-top: 24px; |
|||
display: flex; |
|||
justify-content: space-around; |
|||
|
|||
.pie-left { |
|||
height: 120px; |
|||
flex: 0 0 120px; |
|||
} |
|||
|
|||
.pie-legend { |
|||
.item { |
|||
display: flex; |
|||
margin-bottom: 12px; |
|||
} |
|||
} |
|||
.pie-right { |
|||
.right-row { |
|||
display: flex; |
|||
// justify-content: space-between; |
|||
|
|||
.row-item { |
|||
flex: 0 0 100px; |
|||
.item-one { |
|||
display: flex; |
|||
.img { |
|||
width: 15px; |
|||
height: 15px; |
|||
} |
|||
.title { |
|||
margin-left: 9px; |
|||
font-size: 14px; |
|||
font-family: PingFangSC-Regular, PingFang SC; |
|||
font-weight: 400; |
|||
color: rgba(255, 255, 255, 0.65); |
|||
} |
|||
} |
|||
|
|||
.item-two { |
|||
margin-top: 8px; |
|||
display: flex; |
|||
align-items: flex-end; |
|||
margin-left: 23px; |
|||
|
|||
.num { |
|||
font-size: 24px; |
|||
font-family: PingFangSC-Medium, PingFang SC; |
|||
font-weight: 500; |
|||
color: #ffffff; |
|||
} |
|||
|
|||
.unit { |
|||
margin-left: 9px; |
|||
font-size: 14px; |
|||
font-family: PingFangSC-Medium, PingFang SC; |
|||
font-weight: 500; |
|||
color: #ffffff; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.m-bar { |
|||
position: relative; |
|||
margin-top: 14px; |
|||
|
|||
.bar-title { |
|||
display: flex; |
|||
align-items: center; |
|||
// margin-left: 24px; |
|||
|
|||
.title_img { |
|||
width: 17px; |
|||
height: 17px; |
|||
} |
|||
.tip_title { |
|||
margin-left: 8px; |
|||
font-size: 16px; |
|||
font-family: PingFangSC-Medium, PingFang SC; |
|||
font-weight: 500; |
|||
color: #ffffff; |
|||
line-height: 22px; |
|||
} |
|||
|
|||
.title_line { |
|||
margin-left: 8px; |
|||
width: 244px; |
|||
height: 1px; |
|||
background: linear-gradient( |
|||
270deg, |
|||
rgba(55, 198, 255, 0.1) 0%, |
|||
#1995ff 100% |
|||
); |
|||
} |
|||
} |
|||
|
|||
.bar-legend { |
|||
position: absolute; |
|||
top: 37px; |
|||
right: 20px; |
|||
display: flex; |
|||
} |
|||
|
|||
.bar-main { |
|||
margin-top: 10px; |
|||
height: 225px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.item-name { |
|||
margin-left: 8px; |
|||
font-size: 12px; |
|||
font-family: PingFangSC-Regular, PingFang SC; |
|||
font-weight: 400; |
|||
color: #8c8c8c; |
|||
margin-left: 8px; |
|||
font-size: 12px; |
|||
font-family: PingFangSC-Regular, PingFang SC; |
|||
font-weight: 400; |
|||
color: #8c8c8c; |
|||
} |
|||
|
|||
.item-logo { |
|||
margin-top: 2px; |
|||
width: 8px; |
|||
height: 8px; |
|||
margin-top: 2px; |
|||
width: 8px; |
|||
height: 8px; |
|||
} |
|||
|
|||
.logo1 { |
|||
background: #6fdeff; |
|||
background: #6fdeff; |
|||
} |
|||
.logo2 { |
|||
background: #ffaa00; |
|||
background: #ffaa00; |
|||
} |
|||
.logo3 { |
|||
background: #1a95ff; |
|||
background: #1a95ff; |
|||
} |
|||
.marginleft10 { |
|||
margin-left: 10px; |
|||
margin-left: 10px; |
|||
} |
|||
|
|||
.margintop18 { |
|||
margin-top: 18px; |
|||
margin-top: 18px; |
|||
} |
|||
</style> |
|||
|
|||
@ -1,387 +1,462 @@ |
|||
<template> |
|||
<div> |
|||
<div class="jmgl-main"> |
|||
<div class="g-pie"> |
|||
<div class="pie-left"> |
|||
<screen-echarts-frame class="" |
|||
@myChartMethod="pieInitOk" |
|||
ref="pieChart"></screen-echarts-frame> |
|||
</div> |
|||
<div class="pie-legend"> |
|||
<div class="item"> |
|||
<div class="item-logo logo1"></div> |
|||
<div class="item-name">常住人口</div> |
|||
</div> |
|||
<div class="item"> |
|||
<div class="item-logo logo2"></div> |
|||
<div class="item-name">流动人口</div> |
|||
</div> |
|||
|
|||
</div> |
|||
<div class="pie-right"> |
|||
<div class="right-row"> |
|||
<div class="row-item"> |
|||
<div class="item-one"> |
|||
<img class="img" |
|||
src="@/assets/images/shuju/renfang/jm-logo.png" |
|||
alt /> |
|||
<div class="title">居民总数</div> |
|||
</div> |
|||
<div class="item-two"> |
|||
<div class="num">2818</div> |
|||
<div class="unit">人</div> |
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
<div class="row-item marginleft10"> |
|||
<div class="item-one"> |
|||
<img class="img" |
|||
src="@/assets/images/shuju/renfang/jm-logo.png" |
|||
alt /> |
|||
<div class="title">常住人口</div> |
|||
</div> |
|||
<div class="item-two"> |
|||
<div class="num">2642</div> |
|||
<div class="unit">人</div> |
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
<div class="right-row margintop18"> |
|||
<div class="row-item"> |
|||
<div class="item-one"> |
|||
<img class="img" |
|||
src="@/assets/images/shuju/renfang/jm-logo.png" |
|||
alt /> |
|||
<div class="title">流动人口</div> |
|||
</div> |
|||
<div class="item-two"> |
|||
<div class="num">818</div> |
|||
<div class="unit">人</div> |
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="g-bar"> |
|||
<div class="bar-title"> |
|||
|
|||
<img class="title_img" |
|||
src="@/assets/images/index/list-logo.png" |
|||
alt /> |
|||
<div class="tip_title">近一年人口流动变化趋势图</div> |
|||
<div class="title_line"></div> |
|||
|
|||
</div> |
|||
<div class="bar-legend"> |
|||
<div class="item-logo logo1"></div> |
|||
<div class="item-name">常住人口</div> |
|||
<div class="item-logo logo2 marginleft10"></div> |
|||
<div class="item-name">流动人口</div> |
|||
|
|||
</div> |
|||
<div class="bar-main"> |
|||
<screen-echarts-frame class="" |
|||
@myChartMethod="barInitOk" |
|||
ref="barChart"></screen-echarts-frame> |
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
<!-- <screen-nodata class="nodata" |
|||
<div> |
|||
<div class="m-jmgl"> |
|||
<div class="m-pie"> |
|||
<div class="pie-left"> |
|||
<screen-echarts-frame |
|||
class="" |
|||
@myChartMethod="pieInitOk" |
|||
ref="pieChart" |
|||
></screen-echarts-frame> |
|||
</div> |
|||
<div class="pie-legend"> |
|||
<div class="item"> |
|||
<div class="item-logo logo1"></div> |
|||
<div class="item-name">常住人口</div> |
|||
</div> |
|||
<div class="item"> |
|||
<div class="item-logo logo2"></div> |
|||
<div class="item-name">流动人口</div> |
|||
</div> |
|||
</div> |
|||
<div class="pie-right"> |
|||
<div class="right-row"> |
|||
<div class="row-item" @click="toResiListPage"> |
|||
<div class="item-one"> |
|||
<img |
|||
class="img" |
|||
src="@/assets/images/shuju/renfang/jm-logo.png" |
|||
alt |
|||
/> |
|||
<div class="title">居民总数</div> |
|||
</div> |
|||
<div class="item-two"> |
|||
<div class="num">{{ info.resident_count }}</div> |
|||
<div class="unit">人</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div |
|||
class="row-item marginleft10" |
|||
@click="toResiListPage('inhabitant')" |
|||
> |
|||
<div class="item-one"> |
|||
<img |
|||
class="img" |
|||
src="@/assets/images/shuju/renfang/jm-logo.png" |
|||
alt |
|||
/> |
|||
<div class="title">常住人口</div> |
|||
</div> |
|||
<div class="item-two"> |
|||
<div class="num"> |
|||
{{ info.inhabitant_count }} |
|||
</div> |
|||
<div class="unit">人</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="right-row margintop18"> |
|||
<div |
|||
class="row-item" |
|||
@click="toResiListPage('floating')" |
|||
> |
|||
<div class="item-one"> |
|||
<img |
|||
class="img" |
|||
src="@/assets/images/shuju/renfang/jm-logo.png" |
|||
alt |
|||
/> |
|||
<div class="title">流动人口</div> |
|||
</div> |
|||
<div class="item-two"> |
|||
<div class="num">{{ info.floating_count }}</div> |
|||
<div class="unit">人</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="m-bar"> |
|||
<div class="bar-title"> |
|||
<img |
|||
class="title_img" |
|||
src="@/assets/images/index/list-logo.png" |
|||
alt |
|||
/> |
|||
<div class="tip_title">近一年人口流动变化趋势图</div> |
|||
<div class="title_line"></div> |
|||
</div> |
|||
<div class="bar-legend"> |
|||
<div class="item-logo logo1"></div> |
|||
<div class="item-name">常住人口</div> |
|||
<div class="item-logo logo2 marginleft10"></div> |
|||
<div class="item-name">流动人口</div> |
|||
</div> |
|||
<div class="bar-main"> |
|||
<screen-echarts-frame |
|||
class="" |
|||
@myChartMethod="barInitOk" |
|||
ref="barChart" |
|||
></screen-echarts-frame> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- <screen-nodata class="nodata" |
|||
v-if="showNoData"></screen-nodata> --> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { requestPost } from "@/js/dai/request"; |
|||
import screenEchartsFrame from "@/views/dataBoard/cpts/screen-echarts-frame/index"; |
|||
import { pieOption } from './jmPieOption.js' |
|||
import { barOption } from './jmBarOption.js' |
|||
import { pieOption } from "./jmPieOption.js"; |
|||
import { barOption } from "./jmBarOption.js"; |
|||
import { requestPostBi } from "@/js/dai/request-bipass"; |
|||
|
|||
export default { |
|||
props: { |
|||
orgId: { |
|||
type: String, |
|||
default: "", |
|||
}, |
|||
}, |
|||
components: { |
|||
screenEchartsFrame |
|||
}, |
|||
// mixins: [animate] |
|||
beforeDestroy () { |
|||
this.timer && clearInterval(this.timer) |
|||
}, |
|||
data () { |
|||
return { |
|||
showNoData: false, |
|||
timer: null, |
|||
barChart: '', |
|||
pieChart: '', |
|||
pieOption: {}, |
|||
barOption: {}, |
|||
pieInitState: false, |
|||
barInitState: false, |
|||
pieData: [] |
|||
} |
|||
}, |
|||
mounted () { |
|||
this.getData() |
|||
}, |
|||
methods: { |
|||
pieInitOk () { |
|||
|
|||
this.pieInitState = true |
|||
}, |
|||
barInitOk () { |
|||
this.barInitState = true |
|||
}, |
|||
getData () { |
|||
this.getBar() |
|||
this.getPie() |
|||
}, |
|||
getBar () { |
|||
if (this.barInitState) { |
|||
this.getBarChart() |
|||
} else { |
|||
setTimeout(() => { |
|||
this.getBar() |
|||
}, 500) |
|||
} |
|||
}, |
|||
getPie () { |
|||
if (this.pieInitState) { |
|||
this.getPieChart() |
|||
} else { |
|||
setTimeout(() => { |
|||
this.getPie() |
|||
}, 500) |
|||
} |
|||
}, |
|||
// 获取饼状图 |
|||
async getPieChart () { |
|||
|
|||
this.$refs.pieChart.clear() |
|||
// this.$refs.pieChart.showLoading() |
|||
|
|||
// 获取pieChart配置 |
|||
this.pieOption = pieOption() |
|||
|
|||
// 设置三个配置值 |
|||
this.pieOption.title.text = '73%' |
|||
this.pieData = [ |
|||
{ value: 1048, name: 'Search Engine' }, |
|||
{ value: 735, name: 'Direct' }, |
|||
|
|||
] |
|||
this.pieOption.series[0].data = this.pieData; |
|||
// this.$refs.pieChart.hideLoading() |
|||
this.$refs.pieChart.setOption(this.pieOption) |
|||
}, |
|||
|
|||
// 获取饼状图 |
|||
async getBarChart () { |
|||
this.showNoData = false |
|||
this.$refs.barChart.clear() |
|||
// this.$refs.barChart.showLoading() |
|||
|
|||
|
|||
// this.$refs.barChart.hideLoading() |
|||
let xaxis = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'] |
|||
let series = [ |
|||
{ data: [120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90] }, |
|||
{ data: [120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90] }, |
|||
|
|||
] |
|||
|
|||
// if (res.data.xaxis && res.data.xaxis.length > 0) { |
|||
// const { |
|||
// xaxis, |
|||
// totalIndexData, |
|||
// serviceAbilityData, |
|||
// partyDevAbilityData, |
|||
// governAbilityData |
|||
// } = res.data |
|||
|
|||
// this.barOption = barOption() |
|||
// this.$refs.barChart.hideLoading() |
|||
// this.$refs.barChart.setOption(this.barOption, true) |
|||
// this.$refs.barChart.setOption({ |
|||
// xAxis: { data: xaxis }, |
|||
// series: [ |
|||
// { data: totalIndexData }, |
|||
// { data: partyDevAbilityData }, |
|||
// { data: governAbilityData }, |
|||
// { data: serviceAbilityData } |
|||
// ] |
|||
// }, true) |
|||
// } else { |
|||
// this.showNoData = true |
|||
// } |
|||
|
|||
this.barOption = barOption() |
|||
// this.$refs.barChart.hideLoading() |
|||
this.$refs.barChart.setOption(this.barOption, true) |
|||
this.$refs.barChart.setOption({ |
|||
xAxis: { data: xaxis }, |
|||
series: series |
|||
}, true) |
|||
} |
|||
|
|||
} |
|||
props: { |
|||
orgId: { |
|||
type: String, |
|||
default: "", |
|||
}, |
|||
}, |
|||
components: { |
|||
screenEchartsFrame, |
|||
}, |
|||
// mixins: [animate] |
|||
beforeDestroy() { |
|||
this.timer && clearInterval(this.timer); |
|||
}, |
|||
data() { |
|||
return { |
|||
showNoData: false, |
|||
timer: null, |
|||
barChart: "", |
|||
pieChart: "", |
|||
pieOption: {}, |
|||
barOption: {}, |
|||
pieInitState: false, |
|||
barInitState: false, |
|||
pieData: [], |
|||
|
|||
info: { |
|||
resident_count: "--", |
|||
inhabitant_count: "--", |
|||
floating_count: "--", |
|||
}, |
|||
}; |
|||
}, |
|||
watch: { |
|||
orgId() { |
|||
this.getData(); |
|||
}, |
|||
}, |
|||
mounted() { |
|||
this.getData(); |
|||
}, |
|||
methods: { |
|||
toResiListPage(type = "") { |
|||
this.$router.push({ |
|||
path: "/dataBoard/renfang/resi-list", |
|||
query: { |
|||
org_id: this.orgId, |
|||
type, |
|||
}, |
|||
}); |
|||
}, |
|||
pieInitOk() { |
|||
this.pieInitState = true; |
|||
}, |
|||
barInitOk() { |
|||
this.barInitState = true; |
|||
}, |
|||
async getData() { |
|||
await this.getInfo(); |
|||
this.getBar(); |
|||
this.getPie(); |
|||
}, |
|||
getBar() { |
|||
if (this.barInitState) { |
|||
this.getBarData(); |
|||
} else { |
|||
setTimeout(() => { |
|||
this.getBar(); |
|||
}, 500); |
|||
} |
|||
}, |
|||
getPie() { |
|||
if (this.pieInitState) { |
|||
this.iniPieChart(); |
|||
} else { |
|||
setTimeout(() => { |
|||
this.getPie(); |
|||
}, 500); |
|||
} |
|||
}, |
|||
|
|||
// 获取房屋总数等 |
|||
async getInfo() { |
|||
const url = "resident_view"; |
|||
|
|||
const { data, code, msg } = await requestPostBi( |
|||
url, |
|||
{ |
|||
queryParam: { |
|||
org_id: this.orgId, |
|||
}, |
|||
}, |
|||
{ |
|||
mockId: 60029804, |
|||
} |
|||
); |
|||
|
|||
if (code === 0 && data && Array.isArray(data) && data.length > 0) { |
|||
let info = data[0]; |
|||
this.info = { ...this.info, ...info }; |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
|
|||
// 获取饼状图 |
|||
async iniPieChart() { |
|||
this.$refs.pieChart.clear(); |
|||
// this.$refs.pieChart.showLoading() |
|||
|
|||
// 获取pieChart配置 |
|||
this.pieOption = pieOption(); |
|||
|
|||
const { info } = this; |
|||
// 设置三个配置值 |
|||
this.pieOption.title.text = |
|||
parseInt((100 * info.inhabitant_count) / info.resident_count) + |
|||
"%"; |
|||
this.pieData = [ |
|||
{ value: info.inhabitant_count, name: "常住人口" }, |
|||
{ value: info.floating_count, name: "流动人口" }, |
|||
]; |
|||
this.pieOption.series[0].data = this.pieData; |
|||
this.$refs.pieChart.setOption(this.pieOption); |
|||
// this.$refs.pieChart.hideLoading() |
|||
|
|||
// 点击饼图 切换中心显示的比例 |
|||
this.$refs.pieChart.myChart.on("selectchanged", (params) => { |
|||
console.log(params); |
|||
const { |
|||
fromActionPayload: { dataIndexInside }, |
|||
} = params; |
|||
this.pieOption.title.text = |
|||
parseInt( |
|||
(100 * |
|||
[info.inhabitant_count, info.floating_count][ |
|||
dataIndexInside |
|||
]) / |
|||
info.resident_count |
|||
) + "%"; |
|||
this.$refs.pieChart.myChart.setOption(this.pieOption); |
|||
}); |
|||
}, |
|||
|
|||
// 获取房屋总数等 |
|||
async getBarData() { |
|||
const url = "resident_trend"; |
|||
|
|||
this.$refs.barChart.showLoading(); |
|||
const { data, code, msg } = await requestPostBi( |
|||
url, |
|||
{ |
|||
queryParam: { |
|||
org_id: this.org_id, |
|||
}, |
|||
}, |
|||
{ |
|||
mockId: 60389779, |
|||
} |
|||
); |
|||
|
|||
if (code === 0 && data && Array.isArray(data) && data.length > 0) { |
|||
let xaxis = []; |
|||
let series = [{ data: [] }, { data: [] }]; |
|||
for (const { |
|||
month, |
|||
inhabitant_count, |
|||
floating_count, |
|||
} of data) { |
|||
xaxis.push(month); |
|||
series[0].data.push(inhabitant_count); |
|||
series[1].data.push(floating_count); |
|||
} |
|||
this.iniBarChart(xaxis, series); |
|||
this.$refs.barChart.hideLoading(); |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
|
|||
// 获取饼状图 |
|||
async iniBarChart(xaxis, series) { |
|||
this.showNoData = false; |
|||
this.$refs.barChart.clear(); |
|||
this.barOption = barOption(); |
|||
this.$refs.barChart.setOption(this.barOption, true); |
|||
this.$refs.barChart.setOption( |
|||
{ |
|||
xAxis: { data: xaxis }, |
|||
series, |
|||
}, |
|||
true |
|||
); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.jmgl-main { |
|||
height: 100%; |
|||
width: 100%; |
|||
|
|||
.g-pie { |
|||
margin-top: 24px; |
|||
display: flex; |
|||
justify-content: space-around; |
|||
|
|||
.pie-left { |
|||
height: 120px; |
|||
flex: 0 0 120px; |
|||
} |
|||
|
|||
.pie-legend { |
|||
.item { |
|||
display: flex; |
|||
margin-bottom: 12px; |
|||
} |
|||
} |
|||
.pie-right { |
|||
.right-row { |
|||
display: flex; |
|||
// justify-content: space-between; |
|||
|
|||
.row-item { |
|||
flex: 0 0 100px; |
|||
.item-one { |
|||
display: flex; |
|||
.img { |
|||
width: 15px; |
|||
height: 15px; |
|||
} |
|||
.title { |
|||
margin-left: 9px; |
|||
font-size: 14px; |
|||
font-family: PingFangSC-Regular, PingFang SC; |
|||
font-weight: 400; |
|||
color: rgba(255, 255, 255, 0.65); |
|||
} |
|||
} |
|||
|
|||
.item-two { |
|||
margin-top: 8px; |
|||
display: flex; |
|||
align-items: flex-end; |
|||
margin-left: 23px; |
|||
|
|||
.num { |
|||
font-size: 24px; |
|||
font-family: PingFangSC-Medium, PingFang SC; |
|||
font-weight: 500; |
|||
color: #ffffff; |
|||
} |
|||
|
|||
.unit { |
|||
margin-left: 9px; |
|||
font-size: 14px; |
|||
font-family: PingFangSC-Medium, PingFang SC; |
|||
font-weight: 500; |
|||
color: #ffffff; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.g-bar { |
|||
position: relative; |
|||
margin-top: 14px; |
|||
|
|||
.bar-title { |
|||
display: flex; |
|||
align-items: center; |
|||
// margin-left: 24px; |
|||
|
|||
.title_img { |
|||
width: 17px; |
|||
height: 17px; |
|||
} |
|||
.tip_title { |
|||
margin-left: 8px; |
|||
font-size: 16px; |
|||
font-family: PingFangSC-Medium, PingFang SC; |
|||
font-weight: 500; |
|||
color: #ffffff; |
|||
line-height: 22px; |
|||
} |
|||
|
|||
.title_line { |
|||
margin-left: 8px; |
|||
width: 244px; |
|||
height: 1px; |
|||
background: linear-gradient( |
|||
270deg, |
|||
rgba(55, 198, 255, 0.1) 0%, |
|||
#1995ff 100% |
|||
); |
|||
} |
|||
} |
|||
|
|||
.bar-legend { |
|||
position: absolute; |
|||
top: 37px; |
|||
right: 20px; |
|||
display: flex; |
|||
} |
|||
|
|||
.bar-main { |
|||
margin-top: 10px; |
|||
height: 225px; |
|||
} |
|||
} |
|||
.m-jmgl { |
|||
height: 100%; |
|||
width: 100%; |
|||
|
|||
.m-pie { |
|||
margin-top: 24px; |
|||
display: flex; |
|||
justify-content: space-around; |
|||
|
|||
.pie-left { |
|||
height: 120px; |
|||
flex: 0 0 120px; |
|||
} |
|||
|
|||
.pie-legend { |
|||
.item { |
|||
display: flex; |
|||
margin-bottom: 12px; |
|||
} |
|||
} |
|||
.pie-right { |
|||
.right-row { |
|||
display: flex; |
|||
// justify-content: space-between; |
|||
|
|||
.row-item { |
|||
flex: 0 0 100px; |
|||
.item-one { |
|||
display: flex; |
|||
.img { |
|||
width: 15px; |
|||
height: 15px; |
|||
} |
|||
.title { |
|||
margin-left: 9px; |
|||
font-size: 14px; |
|||
font-family: PingFangSC-Regular, PingFang SC; |
|||
font-weight: 400; |
|||
color: rgba(255, 255, 255, 0.65); |
|||
} |
|||
} |
|||
|
|||
.item-two { |
|||
margin-top: 8px; |
|||
display: flex; |
|||
align-items: flex-end; |
|||
margin-left: 23px; |
|||
|
|||
.num { |
|||
font-size: 24px; |
|||
font-family: PingFangSC-Medium, PingFang SC; |
|||
font-weight: 500; |
|||
color: #ffffff; |
|||
} |
|||
|
|||
.unit { |
|||
margin-left: 9px; |
|||
font-size: 14px; |
|||
font-family: PingFangSC-Medium, PingFang SC; |
|||
font-weight: 500; |
|||
color: #ffffff; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.m-bar { |
|||
position: relative; |
|||
margin-top: 14px; |
|||
|
|||
.bar-title { |
|||
display: flex; |
|||
align-items: center; |
|||
// margin-left: 24px; |
|||
|
|||
.title_img { |
|||
width: 17px; |
|||
height: 17px; |
|||
} |
|||
.tip_title { |
|||
margin-left: 8px; |
|||
font-size: 16px; |
|||
font-family: PingFangSC-Medium, PingFang SC; |
|||
font-weight: 500; |
|||
color: #ffffff; |
|||
line-height: 22px; |
|||
} |
|||
|
|||
.title_line { |
|||
margin-left: 8px; |
|||
width: 244px; |
|||
height: 1px; |
|||
background: linear-gradient( |
|||
270deg, |
|||
rgba(55, 198, 255, 0.1) 0%, |
|||
#1995ff 100% |
|||
); |
|||
} |
|||
} |
|||
|
|||
.bar-legend { |
|||
position: absolute; |
|||
top: 37px; |
|||
right: 20px; |
|||
display: flex; |
|||
} |
|||
|
|||
.bar-main { |
|||
margin-top: 10px; |
|||
height: 225px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.item-name { |
|||
margin-left: 8px; |
|||
font-size: 12px; |
|||
font-family: PingFangSC-Regular, PingFang SC; |
|||
font-weight: 400; |
|||
color: #8c8c8c; |
|||
margin-left: 8px; |
|||
font-size: 12px; |
|||
font-family: PingFangSC-Regular, PingFang SC; |
|||
font-weight: 400; |
|||
color: #8c8c8c; |
|||
} |
|||
|
|||
.item-logo { |
|||
margin-top: 2px; |
|||
width: 8px; |
|||
height: 8px; |
|||
margin-top: 2px; |
|||
width: 8px; |
|||
height: 8px; |
|||
} |
|||
|
|||
.logo1 { |
|||
background: #6fdeff; |
|||
background: #6fdeff; |
|||
} |
|||
.logo2 { |
|||
background: #ffaa00; |
|||
background: #ffaa00; |
|||
} |
|||
.logo3 { |
|||
background: #1a95ff; |
|||
background: #1a95ff; |
|||
} |
|||
.marginleft10 { |
|||
margin-left: 10px; |
|||
margin-left: 10px; |
|||
} |
|||
|
|||
.margintop18 { |
|||
margin-top: 18px; |
|||
margin-top: 18px; |
|||
} |
|||
</style> |
|||
|
|||
@ -1,263 +1,366 @@ |
|||
<template> |
|||
<div class="rkyj-main"> |
|||
<div class="list"> |
|||
<div v-for="(dataitem,index) in listData" |
|||
:key="index" |
|||
:class="['item',{'item-sel':dataitem.sel}]" |
|||
@click="selItem(dataitem,index)"> |
|||
{{dataitem.name}} |
|||
|
|||
</div> |
|||
|
|||
</div> |
|||
<div class="pie-main"> |
|||
<div class="legend"> |
|||
<div class="legend-row"> |
|||
|
|||
<div class="sexblue">男性</div> |
|||
<div class="content"> |
|||
<div class="num">15632</div> |
|||
<div class="unit">人</div> |
|||
</div> |
|||
</div> |
|||
<div class="legend-row"> |
|||
|
|||
<div class="sexyellow">女性</div> |
|||
<div class="content"> |
|||
<div class="num">142632</div> |
|||
<div class="unit">人</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="pie"> |
|||
<screen-echarts-frame @myChartMethod="pieInitOk" |
|||
ref="pieChart"></screen-echarts-frame> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
<div class="m-rkyj"> |
|||
<div class="list"> |
|||
<div |
|||
v-for="item in tabList" |
|||
:key="item" |
|||
:class="['item', { 'item-sel': currentTab == item }]" |
|||
@click="currentTab = item" |
|||
> |
|||
{{ item }} |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="pie-main"> |
|||
<div class="legend"> |
|||
<div |
|||
class="legend-row" |
|||
:key="'pie' + item.name" |
|||
v-for="item in pieData" |
|||
> |
|||
<div class="name">{{ item.name }}</div> |
|||
<div class="content"> |
|||
<div class="num">{{ item.value }}</div> |
|||
<div class="unit">人</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="pie"> |
|||
<screen-echarts-frame |
|||
@myChartMethod="pieInitOk" |
|||
ref="pieChart" |
|||
></screen-echarts-frame> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { requestPost } from "@/js/dai/request"; |
|||
import screenEchartsFrame from "@/views/dataBoard/cpts/screen-echarts-frame/index"; |
|||
import { pieOption } from './rkfxPieOption.js' |
|||
import { pieOption } from "./rkfxPieOption.js"; |
|||
import { requestPostBi } from "@/js/dai/request-bipass"; |
|||
|
|||
export default { |
|||
props: { |
|||
orgId: { |
|||
type: String, |
|||
default: "", |
|||
}, |
|||
}, |
|||
data () { |
|||
return { |
|||
showNoData: false, |
|||
timer: null, |
|||
pieChart: '', |
|||
pieOption: {}, |
|||
pieInitState: false, |
|||
pieData: [], |
|||
listData: [ |
|||
{ |
|||
name: '性别', |
|||
sel: true |
|||
}, |
|||
{ |
|||
name: '户籍', |
|||
sel: false |
|||
}, |
|||
{ |
|||
name: '入户状况', |
|||
sel: false |
|||
}, |
|||
{ |
|||
name: '年龄', |
|||
sel: false |
|||
}, |
|||
{ |
|||
name: '志愿者类别', |
|||
sel: false |
|||
}, |
|||
{ |
|||
name: '党员文化程度', |
|||
sel: false |
|||
}, |
|||
{ |
|||
name: '下级人口分布', |
|||
sel: false |
|||
}, |
|||
|
|||
] |
|||
} |
|||
}, |
|||
components: { |
|||
screenEchartsFrame |
|||
}, |
|||
mounted () { |
|||
this.getPie() |
|||
}, |
|||
methods: { |
|||
selItem (selItem, selIndex) { |
|||
this.listData.forEach((element, index) => { |
|||
if (index === selIndex) { |
|||
element.sel = true |
|||
} else { |
|||
element.sel = false |
|||
} |
|||
|
|||
}); |
|||
}, |
|||
|
|||
pieInitOk () { |
|||
this.pieInitState = true |
|||
}, |
|||
getPie () { |
|||
if (this.pieInitState) { |
|||
this.getPieChart() |
|||
} else { |
|||
setTimeout(() => { |
|||
this.getPie() |
|||
}, 500) |
|||
} |
|||
}, |
|||
// 获取饼状图 |
|||
async getPieChart () { |
|||
|
|||
this.$refs.pieChart.clear() |
|||
// this.$refs.pieChart.showLoading() |
|||
|
|||
// 获取pieChart配置 |
|||
this.pieOption = pieOption() |
|||
|
|||
// 设置三个配置值 |
|||
|
|||
this.pieData = [ |
|||
{ value: 40, name: 'rose 1' }, |
|||
{ value: 38, name: 'rose 2' }, |
|||
] |
|||
this.pieOption.series[0].data = this.pieData; |
|||
// this.$refs.pieChart.hideLoading() |
|||
this.$refs.pieChart.setOption(this.pieOption) |
|||
}, |
|||
|
|||
}, |
|||
props: { |
|||
orgId: { |
|||
type: String, |
|||
default: "", |
|||
}, |
|||
}, |
|||
data() { |
|||
return { |
|||
showNoData: false, |
|||
timer: null, |
|||
pieChart: "", |
|||
pieOption: {}, |
|||
pieInitState: false, |
|||
pieData: [], |
|||
|
|||
tabList: [ |
|||
"性别", |
|||
"户籍", |
|||
"人户状况", |
|||
"年龄", |
|||
"志愿者类别", |
|||
"党员文化程度", |
|||
// "下级人口分布", |
|||
], |
|||
currentTab: "性别", |
|||
|
|||
info: { |
|||
male_count: 0, |
|||
female_count: 0, |
|||
resi_y_house_y_count: 0, |
|||
resi_y_house_n_count: 0, |
|||
resi_n_house_y_count: 0, |
|||
primary_count: 0, |
|||
junior_high_count: 0, |
|||
second_speci_count: 0, |
|||
high_school_count: 0, |
|||
junior_college_count: 0, |
|||
undergrad_count: 0, |
|||
master_count: 0, |
|||
doctor_count: 0, |
|||
local_count: 0, |
|||
field_count: 0, |
|||
age50_count: 0, |
|||
age5059_count: 0, |
|||
age6069_count: 0, |
|||
age7079_count: 0, |
|||
age80_count: 0, |
|||
culture_count: 0, |
|||
committee_count: 0, |
|||
capable_count: 0, |
|||
friend_count: 0, |
|||
agent_count: 0, |
|||
mediator_count: 0, |
|||
collector_count: 0, |
|||
security_count: 0, |
|||
party_mem_count: 0, |
|||
}, |
|||
}; |
|||
}, |
|||
components: { |
|||
screenEchartsFrame, |
|||
}, |
|||
mounted() { |
|||
this.init(); |
|||
}, |
|||
watch: { |
|||
currentTab() { |
|||
this.setPieData(); |
|||
}, |
|||
orgId() { |
|||
this.init(); |
|||
}, |
|||
}, |
|||
methods: { |
|||
async init() { |
|||
await this.getInfo(); |
|||
|
|||
this.getPie(); |
|||
}, |
|||
|
|||
// 获取房屋总数等 |
|||
async getInfo() { |
|||
const url = "resident_analyze"; |
|||
|
|||
this.$refs.pieChart.showLoading(); |
|||
const { data, code, msg } = await requestPostBi( |
|||
url, |
|||
{ |
|||
queryParam: { |
|||
org_id: this.orgId, |
|||
}, |
|||
}, |
|||
{ |
|||
mockId: 60041615, |
|||
} |
|||
); |
|||
this.$refs.pieChart.hideLoading(); |
|||
|
|||
if (code === 0 && data && Array.isArray(data) && data.length > 0) { |
|||
let info = data[0]; |
|||
this.info = { ...this.info, ...info }; |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
|
|||
selItem(selItem, selIndex) { |
|||
this.tabList.forEach((element, index) => { |
|||
if (index === selIndex) { |
|||
element.sel = true; |
|||
} else { |
|||
element.sel = false; |
|||
} |
|||
}); |
|||
}, |
|||
|
|||
pieInitOk() { |
|||
this.pieInitState = true; |
|||
}, |
|||
|
|||
getPie() { |
|||
if (this.pieInitState) { |
|||
this.setPieData(); |
|||
} else { |
|||
setTimeout(() => { |
|||
this.getPie(); |
|||
}, 500); |
|||
} |
|||
}, |
|||
|
|||
setPieData() { |
|||
const { currentTab, info } = this; |
|||
if (currentTab == "性别") { |
|||
this.pieData = [ |
|||
{ value: info.male_count, name: "男" }, |
|||
{ value: info.female_count, name: "女" }, |
|||
]; |
|||
} else if (currentTab == "户籍") { |
|||
this.pieData = [ |
|||
{ value: info.local_count, name: "本地户籍" }, |
|||
{ value: info.field_count, name: "外地户籍" }, |
|||
]; |
|||
} else if (currentTab == "人户状况") { |
|||
this.pieData = [ |
|||
{ value: info.resi_y_house_y_count, name: "人户一致" }, |
|||
{ value: info.resi_y_house_n_count, name: "人在户不在" }, |
|||
{ value: info.resi_n_house_y_count, name: "户在人不在" }, |
|||
]; |
|||
} else if (currentTab == "年龄") { |
|||
this.pieData = [ |
|||
{ value: info.age50_count, name: "50岁以下" }, |
|||
{ value: info.age5059_count, name: "50-59岁" }, |
|||
{ value: info.age6069_count, name: "60-69岁" }, |
|||
{ value: info.age7079_count, name: "70-79岁" }, |
|||
{ value: info.age80_count, name: "80岁以上" }, |
|||
]; |
|||
} else if (currentTab == "志愿者类别") { |
|||
this.pieData = [ |
|||
{ value: info.culture_count, name: "文化队伍" }, |
|||
{ value: info.committee_count, name: "楼委会" }, |
|||
{ value: info.capable_count, name: "能人达人" }, |
|||
{ value: info.friend_count, name: "老友俱乐部" }, |
|||
{ value: info.agent_count, name: "代办员" }, |
|||
{ value: info.mediator_count, name: "调解员" }, |
|||
{ value: info.collector_count, name: "采集员" }, |
|||
{ value: info.security_count, name: "治安巡逻员" }, |
|||
{ value: info.party_mem_count, name: "党员中心户" }, |
|||
]; |
|||
} else if (currentTab == "党员文化程度") { |
|||
this.pieData = [ |
|||
{ value: info.primary_count, name: "小学及文盲" }, |
|||
{ value: info.junior_high_count, name: "初中" }, |
|||
{ value: info.second_speci_count, name: "中专" }, |
|||
{ value: info.high_school_count, name: "高中" }, |
|||
{ value: info.junior_college_count, name: "大专" }, |
|||
{ value: info.undergrad_count, name: "本科" }, |
|||
{ value: info.master_count, name: "硕士" }, |
|||
{ value: info.doctor_count, name: "博士" }, |
|||
]; |
|||
} else if (currentTab == "下级人口分布") { |
|||
this.pieData = []; |
|||
} |
|||
this.iniPieChart(); |
|||
}, |
|||
|
|||
// 获取饼状图 |
|||
async iniPieChart() { |
|||
this.$refs.pieChart.clear(); |
|||
// 获取pieChart配置 |
|||
this.pieOption = pieOption(); |
|||
this.pieOption.series[0].name = this.currentTab; |
|||
this.pieOption.series[0].data = this.pieData; |
|||
this.$refs.pieChart.setOption(this.pieOption); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.rkyj-main { |
|||
.list { |
|||
margin-top: 8px; |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
|
|||
.item { |
|||
margin-top: 8px; |
|||
background-image: url(../../../../assets/images/shuju/renfang/rkfx-bg.png); |
|||
background-size: cover; |
|||
flex: 0 0 117px; |
|||
|
|||
height: 32px; |
|||
margin-right: 2px; |
|||
text-align: center; |
|||
align-items: center; |
|||
font-size: 14px; |
|||
font-family: PingFangSC-Medium, PingFang SC; |
|||
font-weight: 500; |
|||
color: #ffffff; |
|||
line-height: 32px; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.item-sel { |
|||
background-image: url(../../../../assets/images/shuju/renfang/rkfx-bg-sel.png); |
|||
background-size: cover; |
|||
} |
|||
} |
|||
|
|||
.pie-main { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
margin-left: 25px; |
|||
|
|||
.legend { |
|||
// flex: 0 0 140px; |
|||
margin-top: 40px; |
|||
|
|||
.legend-row { |
|||
margin-top: 15px; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
|
|||
.sexblue { |
|||
position: relative; |
|||
|
|||
margin-left: 5px; |
|||
font-size: 12px; |
|||
font-family: PingFangSC-Regular, PingFang SC; |
|||
font-weight: 400; |
|||
color: rgba(255, 255, 255, 0.65); |
|||
line-height: 17px; |
|||
|
|||
&::before { |
|||
content: ""; |
|||
position: absolute; |
|||
top: 4px; |
|||
left: -15px; |
|||
width: 8px; |
|||
height: 8px; |
|||
background: #1a95ff; |
|||
} |
|||
} |
|||
.sexyellow { |
|||
position: relative; |
|||
|
|||
margin-left: 5px; |
|||
font-size: 12px; |
|||
font-family: PingFangSC-Regular, PingFang SC; |
|||
font-weight: 400; |
|||
color: rgba(255, 255, 255, 0.65); |
|||
line-height: 17px; |
|||
|
|||
&::before { |
|||
content: ""; |
|||
position: absolute; |
|||
top: 4px; |
|||
left: -15px; |
|||
width: 8px; |
|||
height: 8px; |
|||
background: #ff6138; |
|||
} |
|||
} |
|||
|
|||
.content { |
|||
margin-left: 24px; |
|||
display: flex; |
|||
align-items: flex-end; |
|||
|
|||
font-family: PingFangSC-Medium, PingFang SC; |
|||
font-weight: 500; |
|||
color: #ffffff; |
|||
} |
|||
|
|||
.num { |
|||
font-size: 20px; |
|||
} |
|||
|
|||
.unit { |
|||
margin-left: 5px; |
|||
font-size: 14px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.pie { |
|||
margin-top: 32px; |
|||
flex: 0 0 280px; |
|||
height: 270px; |
|||
} |
|||
} |
|||
.m-rkyj { |
|||
.list { |
|||
margin-top: 8px; |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
|
|||
.item { |
|||
margin-top: 8px; |
|||
background-image: url(../../../../assets/images/shuju/renfang/rkfx-bg.png); |
|||
background-size: cover; |
|||
flex: 0 0 117px; |
|||
|
|||
height: 32px; |
|||
margin-right: 2px; |
|||
text-align: center; |
|||
align-items: center; |
|||
font-size: 14px; |
|||
font-family: PingFangSC-Medium, PingFang SC; |
|||
font-weight: 500; |
|||
color: #ffffff; |
|||
line-height: 32px; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.item-sel { |
|||
background-image: url(../../../../assets/images/shuju/renfang/rkfx-bg-sel.png); |
|||
background-size: cover; |
|||
} |
|||
} |
|||
|
|||
.pie-main { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
margin-left: 25px; |
|||
|
|||
.legend { |
|||
// flex: 0 0 140px; |
|||
margin-top: 40px; |
|||
|
|||
.legend-row { |
|||
margin-top: 15px; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
|
|||
&:nth-child(1) .name::before { |
|||
background: #1a95ff; |
|||
} |
|||
&:nth-child(2) .name::before { |
|||
background: #ff6138; |
|||
} |
|||
&:nth-child(3) .name::before { |
|||
background: #2adcea; |
|||
} |
|||
&:nth-child(4) .name::before { |
|||
background: #2cc4ad; |
|||
} |
|||
&:nth-child(5) .name::before { |
|||
background: #7377f5; |
|||
} |
|||
&:nth-child(6) .name::before { |
|||
background: #32de66; |
|||
} |
|||
&:nth-child(7) .name::before { |
|||
background: #8155d4; |
|||
} |
|||
&:nth-child(8) .name::before { |
|||
background: #c7ea48; |
|||
} |
|||
&:nth-child(9) .name::before { |
|||
background: #ef47c2; |
|||
} |
|||
&:nth-child(10) .name::before { |
|||
background: #d43349; |
|||
} |
|||
.name { |
|||
position: relative; |
|||
margin-left: 5px; |
|||
font-size: 12px; |
|||
font-family: PingFangSC-Regular, PingFang SC; |
|||
font-weight: 400; |
|||
color: rgba(255, 255, 255, 0.65); |
|||
line-height: 17px; |
|||
|
|||
&::before { |
|||
content: ""; |
|||
position: absolute; |
|||
top: 4px; |
|||
left: -15px; |
|||
width: 8px; |
|||
height: 8px; |
|||
} |
|||
} |
|||
|
|||
.content { |
|||
margin-left: 24px; |
|||
display: flex; |
|||
align-items: flex-end; |
|||
|
|||
font-family: PingFangSC-Medium, PingFang SC; |
|||
font-weight: 500; |
|||
color: #ffffff; |
|||
} |
|||
|
|||
.num { |
|||
font-size: 20px; |
|||
} |
|||
|
|||
.unit { |
|||
margin-left: 5px; |
|||
font-size: 14px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.pie { |
|||
margin-top: 32px; |
|||
flex: 0 0 280px; |
|||
height: 270px; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
|
|||
@ -1,32 +1,54 @@ |
|||
import * as echarts from 'echarts' |
|||
import * as echarts from "echarts"; |
|||
export function pieOption() { |
|||
const center = ["50%", "170px"]; |
|||
return { |
|||
color: ['#1A95FF', '#FF6138'], |
|||
series: [ |
|||
{ |
|||
name: 'Nightingale Chart', |
|||
type: 'pie', |
|||
radius: [40, 130], |
|||
center: ['50%', '50%'], |
|||
roseType: 'area', |
|||
itemStyle: { |
|||
borderRadius: 1 |
|||
}, |
|||
label:{ |
|||
normal:{ |
|||
position:'inner', |
|||
show:true, |
|||
formatter:'{d}%', |
|||
fontSize:24, |
|||
color: "#FFFFFF", |
|||
} |
|||
}, |
|||
data: [ |
|||
|
|||
|
|||
] |
|||
} |
|||
] |
|||
}; |
|||
const center = ["50%", "170px"]; |
|||
return { |
|||
color: [ |
|||
"#1A95FF", |
|||
"#FF6138", |
|||
"#2adcea", |
|||
"#2cc4ad", |
|||
"#7377f5", |
|||
"#32de66", |
|||
"#8155d4", |
|||
"#c7ea48", |
|||
"#ef47c2", |
|||
"d43349", |
|||
], |
|||
tooltip: { |
|||
trigger: "item", |
|||
}, |
|||
series: [ |
|||
{ |
|||
name: "", |
|||
type: "pie", |
|||
radius: [40, 130], |
|||
center: ["50%", "50%"], |
|||
roseType: "area", |
|||
itemStyle: { |
|||
borderRadius: 1, |
|||
}, |
|||
avoidLabelOverlap: false, |
|||
labelLine: { |
|||
show: false, |
|||
}, |
|||
label: { |
|||
normal: { |
|||
position: "inner", |
|||
show: true, |
|||
formatter: "{d}%", |
|||
fontSize: 24, |
|||
color: "#FFFFFF", |
|||
}, |
|||
}, |
|||
emphasis: { |
|||
label: { |
|||
show: true, |
|||
fontSize: 36, |
|||
fontWeight: "bold", |
|||
}, |
|||
}, |
|||
data: [], |
|||
}, |
|||
], |
|||
}; |
|||
} |
|||
|
|||
@ -1,142 +1,176 @@ |
|||
<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="m-list"> |
|||
<div class="title"> |
|||
<div>预警居民类别</div> |
|||
<div> |
|||
黄色预警<img |
|||
class="img" |
|||
src="@/assets/images/shuju/renfang/remark.png" |
|||
alt |
|||
/> |
|||
</div> |
|||
<div> |
|||
红色预警<img |
|||
class="img" |
|||
src="@/assets/images/shuju/renfang/remark.png" |
|||
alt |
|||
/> |
|||
</div> |
|||
</div> |
|||
<div class="list"> |
|||
<div v-for="(dataitem, index) in list" :key="index" class="item"> |
|||
<div class="item-title">{{ dataitem.type_name }}</div> |
|||
<div |
|||
class="item-num" |
|||
@click=" |
|||
toListPage('yellow', dataitem.type, dataitem.type_name) |
|||
" |
|||
> |
|||
<img |
|||
class="img" |
|||
src="@/assets/images/shuju/renfang/warning-yellow.png" |
|||
alt |
|||
/>{{ dataitem.yellow_warn }}栋 （{{ |
|||
dataitem.yellow_threshold |
|||
}}） |
|||
</div> |
|||
<div |
|||
class="item-num" |
|||
@click=" |
|||
toListPage('red', dataitem.type, dataitem.type_name) |
|||
" |
|||
> |
|||
<img |
|||
class="img" |
|||
src="@/assets/images/shuju/renfang/warning-red.png" |
|||
alt |
|||
/>{{ dataitem.red_warn }}栋 （{{ dataitem.red_threshold }}） |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { requestPost } from "@/js/dai/request"; |
|||
import { requestPostBi } from "@/js/dai/request-bipass"; |
|||
|
|||
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 { |
|||
list: [ |
|||
{ |
|||
type: "", |
|||
type_name: "--", |
|||
yellow_warn: "--", |
|||
red_warn: "--", |
|||
yellow_threshold: "--", |
|||
red_threshold: "--", |
|||
}, |
|||
], |
|||
}; |
|||
}, |
|||
mounted() { |
|||
this.getList(); |
|||
}, |
|||
methods: { |
|||
toListPage(level, type_id = "", type_name) { |
|||
this.$router.push({ |
|||
path: "/dataBoard/renfang/warn-building", |
|||
query: { |
|||
org_id: this.orgId, |
|||
type_id, |
|||
type_name, |
|||
level, |
|||
}, |
|||
}); |
|||
}, |
|||
|
|||
async getList() { |
|||
const url = "resident_class_warn"; |
|||
|
|||
const { data, code, msg } = await requestPostBi( |
|||
url, |
|||
{ |
|||
queryParam: { |
|||
org_id: this.orgId, |
|||
}, |
|||
}, |
|||
{ |
|||
mockId: 60040087, |
|||
} |
|||
); |
|||
|
|||
if (code === 0 && data && Array.isArray(data) && data.length > 0) { |
|||
this.list = data; |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.rkyj-main { |
|||
.title { |
|||
margin: 24px 0 24px 24px; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
.m-list { |
|||
padding-bottom: 20px; |
|||
|
|||
.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; |
|||
} |
|||
|
|||
.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 { |
|||
width: 33%; |
|||
} |
|||
|
|||
.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 { |
|||
width: 33%; |
|||
text-align: center; |
|||
.img { |
|||
display: inline-block; |
|||
width: 32px; |
|||
height: 32px; |
|||
margin-right: 8px; |
|||
} |
|||
} |
|||
} |
|||
.item:nth-child(2n-1) { |
|||
background: rgba(26, 149, 255, 0.15); |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
|
|||
@ -1,115 +1,195 @@ |
|||
<template> |
|||
<div class="szsq-main"> |
|||
<div class="item"> |
|||
<img class="img" |
|||
src="@/assets/images/shuju/renfang/szsq-logo.png" |
|||
alt /> |
|||
<div class="content"> |
|||
<div class="row1"> |
|||
<div class="title">数字社区</div> |
|||
<div class="line"></div> |
|||
</div> |
|||
<div class="row2"> |
|||
<span class="num">521</span> |
|||
<span class="unit">个</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="item"> |
|||
<img class="img" |
|||
src="@/assets/images/shuju/renfang/szsq-logo.png" |
|||
alt /> |
|||
<div class="content"> |
|||
<div class="row1"> |
|||
<div class="title">开通数量</div> |
|||
<div class="line"></div> |
|||
</div> |
|||
<div class="row2"> |
|||
<span class="num">123</span> |
|||
<span class="unit">个</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
<div class="szsq-main"> |
|||
<div class="item"> |
|||
<img |
|||
class="img" |
|||
src="@/assets/images/shuju/renfang/szsq-logo.png" |
|||
alt |
|||
/> |
|||
<div class="content"> |
|||
<div class="row1"> |
|||
<div class="title">社区开通占比</div> |
|||
<div class="line"></div> |
|||
</div> |
|||
<div class="row2"> |
|||
<span class="num">{{ info.per }}</span> |
|||
<span class="unit">%</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="item"> |
|||
<img |
|||
class="img" |
|||
src="@/assets/images/shuju/renfang/szsq-logo.png" |
|||
alt |
|||
/> |
|||
<div class="content"> |
|||
<div class="row1"> |
|||
<div class="title">社区总数</div> |
|||
<div class="line"></div> |
|||
</div> |
|||
<div class="row2"> |
|||
<span class="num">{{ info.community_count }}</span> |
|||
<span class="unit">个</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="item"> |
|||
<img |
|||
class="img" |
|||
src="@/assets/images/shuju/renfang/szsq-logo.png" |
|||
alt |
|||
/> |
|||
<div class="content"> |
|||
<div class="row1"> |
|||
<div class="title">开通数量</div> |
|||
<div class="line"></div> |
|||
</div> |
|||
<div class="row2"> |
|||
<span class="num">{{ info.account_count }}</span> |
|||
<span class="unit">个</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { requestPost } from "@/js/dai/request"; |
|||
import { requestPostBi } from "@/js/dai/request-bipass"; |
|||
|
|||
export default { |
|||
props: { |
|||
orgId: { |
|||
type: String, |
|||
default: "", |
|||
}, |
|||
}, |
|||
data () { }, |
|||
mounted () { }, |
|||
methods: {}, |
|||
props: { |
|||
orgId: { |
|||
type: String, |
|||
default: "", |
|||
}, |
|||
}, |
|||
data() { |
|||
return { |
|||
info: { |
|||
per: "--", |
|||
community_count: "--", |
|||
account_count: "--", |
|||
}, |
|||
}; |
|||
}, |
|||
mounted() { |
|||
this.getInfo(); |
|||
}, |
|||
|
|||
watch: { |
|||
orgId() { |
|||
this.getInfo(); |
|||
}, |
|||
}, |
|||
methods: { |
|||
// 社区开通占比 |
|||
async getInfo() { |
|||
const url = "account_view"; |
|||
|
|||
const { data, code, msg } = await requestPostBi( |
|||
url, |
|||
{ |
|||
queryParam: { |
|||
org_id: this.orgId, |
|||
}, |
|||
}, |
|||
{ |
|||
mockId: 61305622, |
|||
} |
|||
); |
|||
|
|||
if (code === 0 && data && Array.isArray(data) && data.length > 0) { |
|||
let info = data[0]; |
|||
this.info.community_count = info.community_count; |
|||
this.info.account_count = info.account_count; |
|||
this.info.per = parseInt( |
|||
(100 * info.account_count) / info.community_count |
|||
); |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.szsq-main { |
|||
margin-top: 22px; |
|||
display: flex; |
|||
justify-content: space-around; |
|||
|
|||
.item { |
|||
display: flex; |
|||
|
|||
.img { |
|||
height: 64px; |
|||
width: 64px; |
|||
} |
|||
|
|||
.content { |
|||
margin-left: 19px; |
|||
|
|||
.row1 { |
|||
.title { |
|||
font-size: 14px; |
|||
font-family: PingFangSC-Regular, PingFang SC; |
|||
font-weight: 400; |
|||
color: rgba(255, 255, 255, 0.65); |
|||
padding-left: 8px; |
|||
} |
|||
|
|||
.line { |
|||
margin-top: -6px; |
|||
width: 88px; |
|||
height: 8px; |
|||
background: linear-gradient( |
|||
270deg, |
|||
rgba(168, 241, 255, 0) 0%, |
|||
#6fdeff 100% |
|||
); |
|||
opacity: 0.25; |
|||
} |
|||
} |
|||
|
|||
.row2 { |
|||
margin-top: 4px; |
|||
|
|||
.num { |
|||
font-size: 24px; |
|||
font-family: PingFangSC-Medium, PingFang SC; |
|||
font-weight: 500; |
|||
color: #ffffff; |
|||
line-height: 33px; |
|||
} |
|||
|
|||
.unit { |
|||
margin-left: 9px; |
|||
font-size: 14px; |
|||
font-family: PingFangSC-Medium, PingFang SC; |
|||
font-weight: 500; |
|||
color: #ffffff; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
margin-top: 22px; |
|||
display: flex; |
|||
justify-content: space-around; |
|||
|
|||
.item { |
|||
display: flex; |
|||
|
|||
.img { |
|||
width: 24px; |
|||
height: 24px; |
|||
} |
|||
|
|||
&:first-child { |
|||
.img { |
|||
margin-top: -5px; |
|||
width: 64px; |
|||
height: 64px; |
|||
} |
|||
|
|||
.content { |
|||
margin-top: 5px; |
|||
margin-left: 15px; |
|||
} |
|||
} |
|||
|
|||
.content { |
|||
margin-top: 5px; |
|||
margin-left: 5px; |
|||
|
|||
.row1 { |
|||
.title { |
|||
font-size: 14px; |
|||
font-family: PingFangSC-Regular, PingFang SC; |
|||
font-weight: 400; |
|||
color: rgba(255, 255, 255, 0.65); |
|||
padding-left: 8px; |
|||
} |
|||
|
|||
.line { |
|||
margin-top: -6px; |
|||
width: 88px; |
|||
height: 8px; |
|||
background: linear-gradient( |
|||
270deg, |
|||
rgba(168, 241, 255, 0) 0%, |
|||
#6fdeff 100% |
|||
); |
|||
opacity: 0.25; |
|||
} |
|||
} |
|||
|
|||
.row2 { |
|||
margin-top: 4px; |
|||
padding-left: 8px; |
|||
|
|||
.num { |
|||
font-size: 24px; |
|||
font-family: PingFangSC-Medium, PingFang SC; |
|||
font-weight: 500; |
|||
color: #ffffff; |
|||
line-height: 33px; |
|||
} |
|||
|
|||
.unit { |
|||
margin-left: 9px; |
|||
font-size: 14px; |
|||
font-family: PingFangSC-Medium, PingFang SC; |
|||
font-weight: 500; |
|||
color: #ffffff; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
|
|||
@ -0,0 +1,241 @@ |
|||
<template> |
|||
<div class="g-pgi"> |
|||
<!-- 组织路由 --> |
|||
<cpt-bread |
|||
:separator="'/'" |
|||
@tap="handleClickBreadItem" |
|||
:breadList="breadList" |
|||
></cpt-bread> |
|||
|
|||
<div class="m-title"> |
|||
<img |
|||
class="title_img" |
|||
src="@/assets/images/index/list-logo.png" |
|||
alt |
|||
/> |
|||
<div class="tip_title">{{ tableTitle }}</div> |
|||
<div class="title_line"></div> |
|||
</div> |
|||
|
|||
<cpt-tb |
|||
:col-list="colList" |
|||
:loading="loading" |
|||
:header="header" |
|||
:list="list" |
|||
:total="total" |
|||
@handleSizeChange="handleSizeChange" |
|||
@handlePageNoChange="handlePageNoChange" |
|||
@operate="showInfo" |
|||
></cpt-tb> |
|||
|
|||
<house-details |
|||
@close="displayedHouseId = ''" |
|||
:house-id="displayedHouseId" |
|||
v-if="displayedHouseId" |
|||
/> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import cptTb from "@/views/dataBoard/cpts/tb"; |
|||
import cptBread from "@/views/dataBoard/renfang/cpts/bread"; |
|||
import houseDetails from "@/views/dataBoard/cpts/house-details"; |
|||
import { requestPostBi } from "@/js/dai/request-bipass"; |
|||
import getQueryPara from "dai-js/modules/getQueryPara"; |
|||
|
|||
export default { |
|||
name: "house-list", |
|||
|
|||
components: { |
|||
cptTb, |
|||
cptBread, |
|||
houseDetails, |
|||
}, |
|||
|
|||
data() { |
|||
return { |
|||
breadList: [ |
|||
{ |
|||
type: "back", |
|||
meta: { |
|||
title: "人房总览", |
|||
}, |
|||
}, |
|||
{ |
|||
meta: { |
|||
title: "房屋列表", |
|||
}, |
|||
}, |
|||
], |
|||
|
|||
tableTitle: "房屋列表", |
|||
searchName: "", |
|||
|
|||
orgLevel: "", |
|||
org_id: "", |
|||
houseType: "", // 流动 常驻 全部 |
|||
|
|||
loading: true, |
|||
pageSize: 10, |
|||
pageNo: 1, |
|||
total: 0, |
|||
srcTableData: [], |
|||
list: [], |
|||
|
|||
colList: [ |
|||
{ |
|||
align: "left", |
|||
width: "5%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "10%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "10%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "10%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "10%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "10%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "5%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "10%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "5%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "10%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "10%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "10%", |
|||
}, |
|||
], |
|||
|
|||
header: [ |
|||
"序号", |
|||
"所属小区", |
|||
"所属楼栋", |
|||
"单元号", |
|||
"门牌号", |
|||
"房屋类型", |
|||
"房屋用途", |
|||
"房屋状态", |
|||
"房主姓名", |
|||
"联系电话", |
|||
"证件号", |
|||
"操作", |
|||
], |
|||
|
|||
displayedHouseId: "", |
|||
}; |
|||
}, |
|||
|
|||
mounted() { |
|||
this.org_id = getQueryPara("org_id"); |
|||
this.houseType = getQueryPara("type"); |
|||
this.getList(); |
|||
}, |
|||
|
|||
methods: { |
|||
handleClickBreadItem({ item }) { |
|||
if (item.type == "back") { |
|||
this.$router.back(); |
|||
} |
|||
}, |
|||
|
|||
handleSearch() {}, |
|||
|
|||
showInfo(index) { |
|||
let item = this.srcTableData[index]; |
|||
this.displayedHouseId = item.house_id; |
|||
}, |
|||
|
|||
handlePageNoChange(pageNo) { |
|||
this.pageNo = pageNo; |
|||
this.getList(); |
|||
}, |
|||
|
|||
handleSizeChange(pageSize) { |
|||
this.pageSize = pageSize; |
|||
this.getList(); |
|||
}, |
|||
|
|||
async getList() { |
|||
const { org_id, houseType, pageNo, pageSize } = this; |
|||
this.loading = true; |
|||
|
|||
const url = "house_list"; |
|||
|
|||
const { data, code, msg } = await requestPostBi( |
|||
url, |
|||
{ |
|||
queryParam: { |
|||
org_id, |
|||
houseType, |
|||
pageNo, |
|||
pageSize, |
|||
}, |
|||
}, |
|||
{ |
|||
mockId: 60068051, |
|||
} |
|||
); |
|||
|
|||
this.loading = false; |
|||
|
|||
if (code === 0) { |
|||
this.srcTableData = data; |
|||
// this.total = data.total; |
|||
|
|||
this.list = data.map((item, index) => { |
|||
return [ |
|||
index + 1, |
|||
item.village ? item.village : "--", |
|||
item.building ? item.building : "--", |
|||
item.unit ? item.unit : "--", |
|||
item.door ? item.door : "--", |
|||
item.house_type ? item.house_type : "--", |
|||
item.house_usage ? item.house_usage : "--", |
|||
item.house_state ? item.house_state : "--", |
|||
item.holder_name ? item.holder_name : "--", |
|||
item.holder_phone ? item.holder_phone : "--", |
|||
item.holder_idcard ? item.holder_idcard : "--", |
|||
|
|||
{ type: "operate", list: ["查看"] }, |
|||
]; |
|||
}); |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
}, |
|||
|
|||
destroyed() { |
|||
console.log("我已经离开了！"); |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" src="@/assets/scss/dataBoard/listBox.scss" scoped></style> |
|||
File diff suppressed because it is too large
@ -0,0 +1,284 @@ |
|||
<template> |
|||
<div class="g-pgi"> |
|||
<!-- 组织路由 --> |
|||
<cpt-bread |
|||
:separator="'/'" |
|||
@tap="handleClickBreadItem" |
|||
:breadList="breadList" |
|||
></cpt-bread> |
|||
|
|||
<div class="m-title"> |
|||
<img |
|||
class="title_img" |
|||
src="@/assets/images/index/list-logo.png" |
|||
alt |
|||
/> |
|||
<div class="tip_title">{{ tableTitle }}</div> |
|||
<div class="title_line"></div> |
|||
|
|||
<div class="second-select"> |
|||
<el-select |
|||
v-model="subclassId" |
|||
:popper-append-to-body="false" |
|||
placeholder="请选择" |
|||
> |
|||
<el-option |
|||
v-for="item in subclassList" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value" |
|||
@click.native="handleChangeDate(item.value)" |
|||
> |
|||
</el-option> |
|||
</el-select> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="g-listbox"> |
|||
<cpt-tb |
|||
:col-list="colList" |
|||
:loading="loading" |
|||
:header="header" |
|||
:list="list" |
|||
:total="total" |
|||
@handleSizeChange="handleSizeChange" |
|||
@handlePageNoChange="handlePageNoChange" |
|||
@operate="showInfo" |
|||
></cpt-tb> |
|||
</div> |
|||
|
|||
<resi-details |
|||
@close="displayedResiId = ''" |
|||
:resi-id="displayedResiId" |
|||
v-if="displayedResiId" |
|||
/> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import cptTb from "@/views/dataBoard/cpts/tb"; |
|||
import cptBread from "@/views/dataBoard/renfang/cpts/bread"; |
|||
import resiDetails from "@/views/dataBoard/cpts/resi-details"; |
|||
import { requestPostBi } from "@/js/dai/request-bipass"; |
|||
import getQueryPara from "dai-js/modules/getQueryPara"; |
|||
|
|||
export default { |
|||
name: "resi-list", |
|||
|
|||
components: { |
|||
cptTb, |
|||
cptBread, |
|||
resiDetails, |
|||
}, |
|||
|
|||
data() { |
|||
return { |
|||
breadList: [ |
|||
{ |
|||
type: "back", |
|||
meta: { |
|||
title: "人房总览", |
|||
}, |
|||
}, |
|||
{ |
|||
meta: { |
|||
title: "居民类别", |
|||
}, |
|||
}, |
|||
], |
|||
|
|||
tableTitle: "居民类别", |
|||
searchName: "", |
|||
|
|||
orgLevel: "", |
|||
org_id: "", |
|||
type_id: "", // 居民类别 |
|||
|
|||
loading: true, |
|||
pageSize: 10, |
|||
pageNo: 1, |
|||
total: 0, |
|||
srcTableData: [], |
|||
list: [], |
|||
|
|||
colList: [ |
|||
{ |
|||
align: "left", |
|||
width: "5%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "10%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "20%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "20%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "15%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "10%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "5%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "10%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "10%", |
|||
}, |
|||
], |
|||
|
|||
header: [ |
|||
"序号", |
|||
"姓名", |
|||
"所属网格", |
|||
"所属房屋", |
|||
"手机", |
|||
"身份证", |
|||
"性别", |
|||
"出生日期", |
|||
"操作", |
|||
], |
|||
|
|||
displayedResiId: "", |
|||
|
|||
subclassList: [], |
|||
subclassId: "", |
|||
}; |
|||
}, |
|||
|
|||
mounted() { |
|||
this.org_id = getQueryPara("org_id"); |
|||
this.type_id = getQueryPara("type_id"); |
|||
const type_name = getQueryPara("type_name"); |
|||
this.getList(); |
|||
this.breadList[1].meta.title = type_name; |
|||
|
|||
if (this.type_id == "6") { |
|||
this.getSubclass(); |
|||
} |
|||
}, |
|||
|
|||
methods: { |
|||
handleClickBreadItem({ item }) { |
|||
if (item.type == "back") { |
|||
this.$router.back(); |
|||
} |
|||
}, |
|||
|
|||
handleSearch() {}, |
|||
|
|||
showInfo(index) { |
|||
let item = this.srcTableData[index]; |
|||
this.displayedResiId = item.user_id; |
|||
}, |
|||
|
|||
handlePageNoChange(pageNo) { |
|||
this.pageNo = pageNo; |
|||
this.getList(); |
|||
}, |
|||
|
|||
handleSizeChange(pageSize) { |
|||
this.pageSize = pageSize; |
|||
this.getList(); |
|||
}, |
|||
|
|||
async getSubclass() { |
|||
const { org_id, type_id } = this; |
|||
this.loading = true; |
|||
|
|||
const url = "resident_class_list"; |
|||
|
|||
const { data, code, msg } = await requestPostBi( |
|||
url, |
|||
{ |
|||
queryParam: { |
|||
org_id, |
|||
type_id, |
|||
}, |
|||
}, |
|||
{ |
|||
mockId: 60069169, |
|||
} |
|||
); |
|||
|
|||
this.loading = false; |
|||
|
|||
if (code === 0) { |
|||
this.subclassList = data.map((item, index) => { |
|||
return { |
|||
label: item.label, |
|||
value: item.value, |
|||
}; |
|||
}); |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
|
|||
async getList() { |
|||
const { org_id, type_id, pageNo, pageSize } = this; |
|||
this.loading = true; |
|||
|
|||
const url = "resident_class_list"; |
|||
|
|||
const { data, code, msg } = await requestPostBi( |
|||
url, |
|||
{ |
|||
queryParam: { |
|||
org_id, |
|||
type_id, |
|||
pageNo, |
|||
pageSize, |
|||
}, |
|||
}, |
|||
{ |
|||
mockId: 60069169, |
|||
} |
|||
); |
|||
|
|||
this.loading = false; |
|||
|
|||
if (code === 0) { |
|||
this.srcTableData = data; |
|||
// this.total = data.total; |
|||
|
|||
this.list = data.map((item, index) => { |
|||
return [ |
|||
index + 1, |
|||
item.user_name ? item.user_name : "--", |
|||
item.grid ? item.grid : "--", |
|||
item.house ? item.house : "--", |
|||
item.telephone ? item.telephone : "--", |
|||
item.idcard ? item.idcard : "--", |
|||
item.gender ? item.gender : "--", |
|||
item.birthday ? item.birthday : "--", |
|||
|
|||
{ type: "operate", list: ["查看"] }, |
|||
]; |
|||
}); |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
}, |
|||
|
|||
destroyed() { |
|||
console.log("我已经离开了！"); |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" src="@/assets/scss/dataBoard/listBox.scss" scoped></style> |
|||
@ -0,0 +1,225 @@ |
|||
<template> |
|||
<div class="g-pgi"> |
|||
<!-- 组织路由 --> |
|||
<cpt-bread |
|||
:separator="'/'" |
|||
@tap="handleClickBreadItem" |
|||
:breadList="breadList" |
|||
></cpt-bread> |
|||
|
|||
<div class="m-title"> |
|||
<img |
|||
class="title_img" |
|||
src="@/assets/images/index/list-logo.png" |
|||
alt |
|||
/> |
|||
<div class="tip_title">{{ tableTitle }}</div> |
|||
<div class="title_line"></div> |
|||
</div> |
|||
|
|||
<div class="g-listbox"> |
|||
<cpt-tb |
|||
:col-list="colList" |
|||
:loading="loading" |
|||
:header="header" |
|||
:list="list" |
|||
:total="total" |
|||
@handleSizeChange="handleSizeChange" |
|||
@handlePageNoChange="handlePageNoChange" |
|||
@operate="showInfo" |
|||
></cpt-tb> |
|||
</div> |
|||
|
|||
<resi-details |
|||
@close="displayedResiId = ''" |
|||
:resi-id="displayedResiId" |
|||
v-if="displayedResiId" |
|||
/> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import cptTb from "@/views/dataBoard/cpts/tb"; |
|||
import cptBread from "@/views/dataBoard/renfang/cpts/bread"; |
|||
import resiDetails from "@/views/dataBoard/cpts/resi-details"; |
|||
import { requestPostBi } from "@/js/dai/request-bipass"; |
|||
import getQueryPara from "dai-js/modules/getQueryPara"; |
|||
|
|||
export default { |
|||
name: "resi-list", |
|||
|
|||
components: { |
|||
cptTb, |
|||
cptBread, |
|||
resiDetails, |
|||
}, |
|||
|
|||
data() { |
|||
return { |
|||
breadList: [ |
|||
{ |
|||
type: "back", |
|||
meta: { |
|||
title: "人房总览", |
|||
}, |
|||
}, |
|||
{ |
|||
meta: { |
|||
title: "居民列表", |
|||
}, |
|||
}, |
|||
], |
|||
|
|||
tableTitle: "居民列表", |
|||
searchName: "", |
|||
|
|||
orgLevel: "", |
|||
org_id: "", |
|||
resiType: "", // 流动 常驻 全部 |
|||
|
|||
loading: true, |
|||
pageSize: 10, |
|||
pageNo: 1, |
|||
total: 0, |
|||
srcTableData: [], |
|||
list: [], |
|||
|
|||
colList: [ |
|||
{ |
|||
align: "left", |
|||
width: "5%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "10%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "20%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "20%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "15%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "10%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "5%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "10%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "10%", |
|||
}, |
|||
], |
|||
|
|||
header: [ |
|||
"序号", |
|||
"姓名", |
|||
"所属网格", |
|||
"所属房屋", |
|||
"手机", |
|||
"身份证", |
|||
"性别", |
|||
"出生日期", |
|||
"操作", |
|||
], |
|||
|
|||
displayedResiId: "", |
|||
}; |
|||
}, |
|||
|
|||
mounted() { |
|||
this.org_id = getQueryPara("org_id"); |
|||
this.resiType = getQueryPara("type"); |
|||
this.getList(); |
|||
}, |
|||
|
|||
methods: { |
|||
handleClickBreadItem({ item }) { |
|||
if (item.type == "back") { |
|||
this.$router.back(); |
|||
} |
|||
}, |
|||
|
|||
handleSearch() {}, |
|||
|
|||
showInfo(index) { |
|||
let item = this.srcTableData[index]; |
|||
this.displayedResiId = item.user_id; |
|||
}, |
|||
|
|||
handlePageNoChange(pageNo) { |
|||
this.pageNo = pageNo; |
|||
this.getList(); |
|||
}, |
|||
|
|||
handleSizeChange(pageSize) { |
|||
this.pageSize = pageSize; |
|||
this.getList(); |
|||
}, |
|||
|
|||
async getList() { |
|||
const { org_id, resiType, pageNo, pageSize } = this; |
|||
this.loading = true; |
|||
|
|||
const url = "resident_list"; |
|||
|
|||
const { data, code, msg } = await requestPostBi( |
|||
url, |
|||
{ |
|||
queryParam: { |
|||
org_id, |
|||
resiType, |
|||
pageNo, |
|||
pageSize, |
|||
}, |
|||
}, |
|||
{ |
|||
mockId: 60069169, |
|||
} |
|||
); |
|||
|
|||
this.loading = false; |
|||
|
|||
if (code === 0) { |
|||
this.srcTableData = data; |
|||
// this.total = data.total; |
|||
|
|||
this.list = data.map((item, index) => { |
|||
return [ |
|||
index + 1, |
|||
item.user_name ? item.user_name : "--", |
|||
item.grid ? item.grid : "--", |
|||
item.house ? item.house : "--", |
|||
item.telephone ? item.telephone : "--", |
|||
item.idcard ? item.idcard : "--", |
|||
item.gender ? item.gender : "--", |
|||
item.birthday ? item.birthday : "--", |
|||
|
|||
{ type: "operate", list: ["查看"] }, |
|||
]; |
|||
}); |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
}, |
|||
|
|||
destroyed() { |
|||
console.log("我已经离开了！"); |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" src="@/assets/scss/dataBoard/listBox.scss" scoped></style> |
|||
@ -0,0 +1,223 @@ |
|||
<template> |
|||
<div class="g-pgi"> |
|||
<!-- 组织路由 --> |
|||
<cpt-bread |
|||
:separator="'/'" |
|||
@tap="handleClickBreadItem" |
|||
:breadList="breadList" |
|||
></cpt-bread> |
|||
|
|||
<div v-if="!displayedId"> |
|||
<div class="m-title"> |
|||
<img |
|||
class="title_img" |
|||
src="@/assets/images/index/list-logo.png" |
|||
alt |
|||
/> |
|||
<div class="tip_title">{{ tableTitle }}</div> |
|||
<div class="title_line"></div> |
|||
</div> |
|||
|
|||
<cpt-tb |
|||
:col-list="colList" |
|||
:loading="loading" |
|||
:header="header" |
|||
:list="list" |
|||
:total="total" |
|||
@handleSizeChange="handleSizeChange" |
|||
@handlePageNoChange="handlePageNoChange" |
|||
@operate="showInfo" |
|||
></cpt-tb> |
|||
</div> |
|||
|
|||
<resi-list :building_id="displayedId" v-if="displayedId" /> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import cptTb from "@/views/dataBoard/cpts/tb"; |
|||
import cptBread from "@/views/dataBoard/renfang/cpts/bread"; |
|||
import resiList from "./resi"; |
|||
import { requestPostBi } from "@/js/dai/request-bipass"; |
|||
import getQueryPara from "dai-js/modules/getQueryPara"; |
|||
|
|||
export default { |
|||
name: "house-list", |
|||
|
|||
components: { |
|||
cptTb, |
|||
cptBread, |
|||
resiList, |
|||
}, |
|||
|
|||
data() { |
|||
return { |
|||
breadList: [ |
|||
{ |
|||
type: "back", |
|||
meta: { |
|||
title: "人房总览", |
|||
}, |
|||
}, |
|||
{ |
|||
type: "building", |
|||
meta: { |
|||
title: "预警楼栋列表", |
|||
}, |
|||
}, |
|||
], |
|||
|
|||
tableTitle: "预警楼栋列表", |
|||
searchName: "", |
|||
|
|||
orgLevel: "", |
|||
org_id: "", |
|||
type_id: "", |
|||
type_name: "", |
|||
level: "", |
|||
|
|||
loading: true, |
|||
pageSize: 10, |
|||
pageNo: 1, |
|||
total: 0, |
|||
srcTableData: [], |
|||
list: [], |
|||
|
|||
colList: [ |
|||
{ |
|||
align: "left", |
|||
width: "5%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "15%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "20%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "20%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "20%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "20%", |
|||
}, |
|||
], |
|||
|
|||
header: [ |
|||
"序号", |
|||
"所属网格", |
|||
"所属小区", |
|||
"楼号", |
|||
"预警人数", |
|||
"操作", |
|||
], |
|||
|
|||
displayedId: "", |
|||
}; |
|||
}, |
|||
|
|||
mounted() { |
|||
this.org_id = getQueryPara("org_id"); |
|||
this.level = getQueryPara("level"); |
|||
this.type_id = getQueryPara("type_id"); |
|||
const type_name = getQueryPara("type_name"); |
|||
this.breadList[1].meta.title = type_name + "预警楼栋"; |
|||
this.getList(); |
|||
}, |
|||
|
|||
methods: { |
|||
handleClickBreadItem({ item }) { |
|||
if (item.type == "back") { |
|||
this.$router.back(); |
|||
} else if (item.type == "building") { |
|||
this.displayedId = ""; |
|||
|
|||
const { breadList } = this; |
|||
this.breadList = breadList.slice(0, 2); |
|||
} |
|||
}, |
|||
|
|||
handleSearch() {}, |
|||
|
|||
showInfo(index) { |
|||
let item = this.srcTableData[index]; |
|||
this.displayedId = building_id; |
|||
|
|||
this.breadList.push({ |
|||
meta: { |
|||
title: "预警人员列表", |
|||
}, |
|||
}); |
|||
}, |
|||
|
|||
handlePageNoChange(pageNo) { |
|||
this.pageNo = pageNo; |
|||
this.getList(); |
|||
}, |
|||
|
|||
handleSizeChange(pageSize) { |
|||
this.pageSize = pageSize; |
|||
this.getList(); |
|||
}, |
|||
|
|||
async getList() { |
|||
const { org_id, type_id, level, pageNo, pageSize } = this; |
|||
this.loading = true; |
|||
|
|||
const url = |
|||
level == "yellow" |
|||
? "resident_warn_building_y" |
|||
: "resident_warn_building_r"; |
|||
|
|||
const { data, code, msg } = await requestPostBi( |
|||
url, |
|||
{ |
|||
queryParam: { |
|||
org_id, |
|||
type_id, |
|||
pageNo, |
|||
pageSize, |
|||
}, |
|||
}, |
|||
{ |
|||
mockId: 60071540, |
|||
} |
|||
); |
|||
|
|||
this.loading = false; |
|||
|
|||
if (code === 0) { |
|||
this.srcTableData = data; |
|||
// this.total = data.total; |
|||
|
|||
this.list = data.map((item, index) => { |
|||
return [ |
|||
index + 1, |
|||
item.grid ? item.grid : "--", |
|||
item.building ? item.building : "--", |
|||
item.unit ? item.unit : "--", |
|||
item.door ? item.door : "--", |
|||
|
|||
{ type: "operate", list: ["查看人员"] }, |
|||
]; |
|||
}); |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
}, |
|||
|
|||
destroyed() { |
|||
console.log("我已经离开了！"); |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" src="@/assets/scss/dataBoard/listBox.scss" scoped></style> |
|||
@ -0,0 +1,199 @@ |
|||
<template> |
|||
<div class="g-pgi"> |
|||
<div class="m-title"> |
|||
<img |
|||
class="title_img" |
|||
src="@/assets/images/index/list-logo.png" |
|||
alt |
|||
/> |
|||
<div class="tip_title">{{ tableTitle }}</div> |
|||
<div class="title_line"></div> |
|||
</div> |
|||
|
|||
<cpt-tb |
|||
:col-list="colList" |
|||
:loading="loading" |
|||
:header="header" |
|||
:list="list" |
|||
:total="total" |
|||
@handleSizeChange="handleSizeChange" |
|||
@handlePageNoChange="handlePageNoChange" |
|||
@operate="showInfo" |
|||
></cpt-tb> |
|||
|
|||
<resi-details |
|||
@close="displayedResiId = ''" |
|||
:resi-id="displayedResiId" |
|||
v-if="displayedResiId" |
|||
/> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import cptTb from "@/views/dataBoard/cpts/tb"; |
|||
import cptBread from "@/views/dataBoard/renfang/cpts/bread"; |
|||
import resiDetails from "@/views/dataBoard/cpts/resi-details"; |
|||
import { requestPostBi } from "@/js/dai/request-bipass"; |
|||
import getQueryPara from "dai-js/modules/getQueryPara"; |
|||
|
|||
export default { |
|||
name: "resi-list", |
|||
|
|||
props: { |
|||
building_id: { |
|||
type: String, |
|||
default: "", |
|||
}, |
|||
}, |
|||
|
|||
components: { |
|||
cptTb, |
|||
cptBread, |
|||
resiDetails, |
|||
}, |
|||
|
|||
data() { |
|||
return { |
|||
tableTitle: "预警人员列表", |
|||
searchName: "", |
|||
|
|||
orgLevel: "", |
|||
org_id: "", |
|||
type_id: "", // 预警人员列表 |
|||
|
|||
loading: true, |
|||
pageSize: 10, |
|||
pageNo: 1, |
|||
total: 0, |
|||
srcTableData: [], |
|||
list: [], |
|||
|
|||
colList: [ |
|||
{ |
|||
align: "left", |
|||
width: "5%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "10%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "20%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "20%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "15%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "10%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "5%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "10%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "10%", |
|||
}, |
|||
], |
|||
|
|||
header: [ |
|||
"序号", |
|||
"姓名", |
|||
"所属网格", |
|||
"所属房屋", |
|||
"手机", |
|||
"身份证", |
|||
"性别", |
|||
"出生日期", |
|||
"操作", |
|||
], |
|||
|
|||
displayedResiId: "", |
|||
}; |
|||
}, |
|||
|
|||
mounted() { |
|||
this.getList(); |
|||
}, |
|||
|
|||
methods: { |
|||
showInfo(index) { |
|||
let item = this.srcTableData[index]; |
|||
this.displayedResiId = item.user_id; |
|||
}, |
|||
|
|||
handlePageNoChange(pageNo) { |
|||
this.pageNo = pageNo; |
|||
this.getList(); |
|||
}, |
|||
|
|||
handleSizeChange(pageSize) { |
|||
this.pageSize = pageSize; |
|||
this.getList(); |
|||
}, |
|||
|
|||
async getList() { |
|||
const { org_id, type_id, pageNo, pageSize } = this; |
|||
this.loading = true; |
|||
|
|||
const url = "resident_class_list"; |
|||
|
|||
const { data, code, msg } = await requestPostBi( |
|||
url, |
|||
{ |
|||
queryParam: { |
|||
org_id, |
|||
type_id, |
|||
pageNo, |
|||
pageSize, |
|||
}, |
|||
}, |
|||
{ |
|||
mockId: 60069169, |
|||
} |
|||
); |
|||
|
|||
this.loading = false; |
|||
|
|||
if (code === 0) { |
|||
this.srcTableData = data; |
|||
// this.total = data.total; |
|||
|
|||
this.list = data.map((item, index) => { |
|||
return [ |
|||
index + 1, |
|||
item.user_name ? item.user_name : "--", |
|||
item.grid ? item.grid : "--", |
|||
item.house ? item.house : "--", |
|||
item.telephone ? item.telephone : "--", |
|||
item.idcard ? item.idcard : "--", |
|||
item.gender ? item.gender : "--", |
|||
item.birthday ? item.birthday : "--", |
|||
|
|||
{ type: "operate", list: ["查看"] }, |
|||
]; |
|||
}); |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
}, |
|||
|
|||
destroyed() { |
|||
console.log("我已经离开了！"); |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" src="@/assets/scss/dataBoard/listBox.scss" scoped></style> |
|||
Loading…
Reference in new issue