You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
559 lines
16 KiB
559 lines
16 KiB
|
|
<template>
|
|
<div>
|
|
<div class="g-row">
|
|
<div class="g-row-left">
|
|
<div class="m-box m-search">
|
|
<div class="wrap">
|
|
<div class="title">
|
|
<span>社区查询</span>
|
|
</div>
|
|
|
|
<div class="tabs">
|
|
<div :class="{ 'z-on': searchData.type == 'jumin' }"
|
|
@click="searchDataTab('jumin')">
|
|
查居民
|
|
</div>
|
|
<div :class="{ 'z-on': searchData.type == 'fangwu' }"
|
|
@click="searchDataTab('fangwu')">
|
|
查房屋
|
|
</div>
|
|
</div>
|
|
|
|
<div class="search">
|
|
<div class="search-input">
|
|
<div class="input">
|
|
<input type="text"
|
|
:placeholder="typePlaceholder[searchData.type]
|
|
"
|
|
v-model="searchData.searchKey"
|
|
@keyup.enter="handleClickSearchBtn" />
|
|
|
|
<div class="close-btn"
|
|
v-if="searchData.searchKey != ''"
|
|
@click="searchData.searchKey = ''">
|
|
<img src="@/assets/img/shequ/close.png" />
|
|
</div>
|
|
</div>
|
|
<div class="btn"
|
|
@click="handleClickSearchBtn">
|
|
查一下
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class=" m-pan m-box">
|
|
<div class="header">
|
|
<img src="@/assets/images/index/title-icon-sqzl.png" />
|
|
<span>组织总览</span>
|
|
</div>
|
|
<div class="flex_box">
|
|
<div class="cnt">
|
|
<div class="cnt-left">
|
|
<div class="subtitle">
|
|
<img src="@/assets/images/index/i-sqjj.png" />
|
|
<span>组织简介</span>
|
|
</div>
|
|
<p>
|
|
{{ pandectData.deptName }}，<span v-if="pandectData.gridCount">划分为{{
|
|
pandectData.underCount }}个{{
|
|
pandectData.underName
|
|
}}，</span> 现有房屋{{ pandectData.homeCount }}间，自住房屋{{
|
|
pandectData.selfStay
|
|
}}间、出租房屋{{
|
|
pandectData.rentOut
|
|
}}间、闲置房屋{{
|
|
pandectData.vacantHouse
|
|
}}间，现有居民{{pandectData.resiCount}}户、{{pandectData.totalResidents}}人，其中常住人口{{pandectData.permanentResiCount}}人，流动人口{{pandectData.floatingResiCount}}人，各类群体分布如下：
|
|
</p>
|
|
|
|
<div class="subtitle">
|
|
<img src="@/assets/images/index/i-fxjg.png" />
|
|
<span>分析结果</span>
|
|
</div>
|
|
|
|
<p class="hint"
|
|
v-if="resiCategory.list.length > 0">
|
|
根据数据分析结果，建议重点关注
|
|
<b>{{ resiCategory.list[0].name }}、{{
|
|
resiCategory.list[1].name
|
|
}}、{{ resiCategory.list[2].name }}</b>
|
|
三类群体，开展相关的社区服务和活动。
|
|
</p>
|
|
</div>
|
|
<el-tabs v-model="activeName"
|
|
style="width: calc(100% - 240px - 40px);margin-left: auto;">
|
|
<el-tab-pane label="居民分类统计"
|
|
name="resi">
|
|
<div class="cnt-right">
|
|
<div class="list">
|
|
<div class="item"
|
|
@click="handleClickCategory(item)"
|
|
:key="item.code"
|
|
v-for="(
|
|
item, index
|
|
) in resiCategory.list">
|
|
<div>
|
|
{{
|
|
("0" + (index + 1)).substr(-2)
|
|
}}.
|
|
</div>
|
|
<div class="item-name">
|
|
{{ item.name }}
|
|
</div>
|
|
<div class="item-div"></div>
|
|
<div class="item-count">
|
|
{{ item.count }}人
|
|
</div>
|
|
<div class="item-progress">
|
|
<b :style="{
|
|
width: item.per + '%',
|
|
}"></b>
|
|
</div>
|
|
<div class="item-per">
|
|
{{ item.per }} %
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-tab-pane>
|
|
<el-tab-pane label="智能预测"
|
|
name="zhineng">
|
|
<div class="cnt-right">
|
|
<div class="list">
|
|
<div class="item"
|
|
:key="item.code"
|
|
v-for="(
|
|
item, index
|
|
) in znycCategory.list">
|
|
<div>
|
|
{{
|
|
("0" + (index + 1)).substr(-2)
|
|
}}.
|
|
</div>
|
|
<div class="item-name">
|
|
{{ item.name }}
|
|
</div>
|
|
<div class="item-div"></div>
|
|
<div class="item-count">
|
|
{{ item.count }}人
|
|
</div>
|
|
<div class="item-progress">
|
|
<b :style="{
|
|
width: item.per + '%',
|
|
}"></b>
|
|
</div>
|
|
<div class="item-per">
|
|
{{ item.per }} %
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="g-row-right">
|
|
<div class="m-box m-tx">
|
|
<div class="header">
|
|
<img src="@/assets/images/index/title-icon-zntx.png" />
|
|
<span>智能提醒</span>
|
|
</div>
|
|
<div class="more"
|
|
@click="toNoticePage">更多></div>
|
|
<div class="cnt"
|
|
v-if="noticeData.length > 0">
|
|
<div @click="handleClickNotice(item)"
|
|
class="item"
|
|
:key="'notice' + item.targetId + index"
|
|
v-for="(item, index) in noticeData">
|
|
<div class="item_left">
|
|
<i class="i-tag"
|
|
v-if="item.readFlag == 1">已读</i>
|
|
<i class="i-tag"
|
|
v-else>未读</i>
|
|
</div>
|
|
<div class="item_right">
|
|
<div class="item-date">
|
|
{{ item.createdTime }}
|
|
</div>
|
|
<div class="item-title">
|
|
{{ item.content }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="cnt"
|
|
v-else>
|
|
<div class="empty">
|
|
<img src="~@/assets/images/shuju/renfang/index/empty.png" />
|
|
<span>暂无提醒～</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="m-box m-tb">
|
|
<div class="wrap">
|
|
<div class="header">
|
|
<img src="@/assets/images/index/title-icon-zntb.png" />
|
|
<span>不满意事项月度趋势分析</span>
|
|
</div>
|
|
</div>
|
|
<!-- <div class="more">更多></div> -->
|
|
<div class="cnt">
|
|
<div id="my_chart"
|
|
style="width: 100%;height: 230px; position: relative;top:-10px"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<fastcall ref="fastcall" />
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { requestPost, requestGet } from "@/js/dai/request";
|
|
import resiCategoryMap from "@/views/business/resi-category-map.js";
|
|
import { mapGetters } from "vuex";
|
|
import nextTick from "dai-js/tools/nextTick";
|
|
import fastcall from "@/views/modules/cpts/fastcall";
|
|
import * as echarts from 'echarts';
|
|
|
|
export default {
|
|
components: { fastcall },
|
|
|
|
data () {
|
|
return {
|
|
searchStatus: "ini", //ing over
|
|
searchData: {
|
|
type: "jumin",
|
|
searchKey: "",
|
|
},
|
|
|
|
typePlaceholder: {
|
|
jumin: "请输入姓名或联系电话或证件号",
|
|
fangwu: "请输入小区名称或楼栋名称",
|
|
xuqiu: "请输入需求人或需求内容或服务方",
|
|
},
|
|
|
|
resiCategory: {
|
|
loading: false,
|
|
total: "",
|
|
list: [],
|
|
},
|
|
znycCategory: {
|
|
loading: false,
|
|
total: "",
|
|
list: [],
|
|
},
|
|
|
|
orgData: {
|
|
id: "",
|
|
level: "agency",
|
|
},
|
|
|
|
pandectData: {
|
|
communityName: "",
|
|
streetName: "",
|
|
gridCount: "",
|
|
resiCount: "",
|
|
homeCount: "",
|
|
floatingResiCount: "",
|
|
permanentResiCount: "",
|
|
},
|
|
|
|
noticeData: [],
|
|
|
|
activeName: 'resi',
|
|
|
|
option: {
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
legend: {
|
|
data: ['12345不满意数', '省满意调查不满意数', '社区自查不满意数'],
|
|
bottom: '10%',
|
|
icon: 'rect',
|
|
itemWidth: 20,
|
|
itemHeight: 5,
|
|
itemGap: 20,
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '25%',
|
|
containLabel: true
|
|
},
|
|
toolbox: {
|
|
// feature: {
|
|
// saveAsImage: {}
|
|
// }
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月']
|
|
},
|
|
yAxis: {
|
|
type: 'value'
|
|
},
|
|
series: [
|
|
{
|
|
name: '12345不满意数',
|
|
type: 'line',
|
|
stack: 'Total',
|
|
data: [120, 132, 101, 134, 90, 230, 210]
|
|
},
|
|
{
|
|
name: '省满意调查不满意数',
|
|
type: 'line',
|
|
stack: 'Total',
|
|
data: [220, 182, 191, 234, 290, 330, 310]
|
|
},
|
|
{
|
|
name: '社区自查不满意数',
|
|
type: 'line',
|
|
stack: 'Total',
|
|
data: [150, 232, 201, 154, 190, 330, 410]
|
|
}
|
|
]
|
|
},
|
|
myChart: {}
|
|
}
|
|
},
|
|
computed: {
|
|
maxTableHeight () {
|
|
// return this.clientHeight - 450;
|
|
return 420;
|
|
},
|
|
...mapGetters(["clientHeight"]),
|
|
},
|
|
watch: {
|
|
"searchData.searchKey": function (val) {
|
|
if (val == "") {
|
|
this.searchStatus = "ini";
|
|
}
|
|
},
|
|
$route: {
|
|
handler: function (newVal, oldVal) {
|
|
if (newVal.name == "home") {
|
|
this.getApiData();
|
|
}
|
|
},
|
|
deep: true,
|
|
immediate: true,
|
|
},
|
|
},
|
|
mounted () {
|
|
this.getApiData();
|
|
this.$nextTick(() => {
|
|
this.initChart()
|
|
})
|
|
console.log(
|
|
"dynamicMenuRoutes----------------------------",
|
|
this.$store.state.sidebarMenuList
|
|
);
|
|
},
|
|
methods: {
|
|
initChart () {
|
|
this.myChart = echarts.init(document.getElementById('my_chart'));
|
|
this.myChart.setOption(this.option)
|
|
window.addEventListener('resize', this.handleWindowResize);
|
|
},
|
|
handleWindowResize () {
|
|
if (this.myChart) {
|
|
this.myChart.resize();
|
|
}
|
|
},
|
|
searchDataTab (str) {
|
|
this.searchData.type = str;
|
|
},
|
|
handleClickCategory (item) {
|
|
this.$router.push({
|
|
name: "base-resi",
|
|
params: {
|
|
category: item.code
|
|
}
|
|
});
|
|
|
|
},
|
|
async readClearOne (item) {
|
|
console.log("item", item)
|
|
const url = `/message/intelligentMessage/msg/clearOne/?msgId=${item.id}`
|
|
const { data, code, msg } = await requestPost(url)
|
|
if (code == 0) {
|
|
this.getNoticeData()
|
|
} else if (code >= 8000) {
|
|
this.$message.error(msg)
|
|
}
|
|
},
|
|
handleClickNotice (item) {
|
|
const { msgType, targetId } = item;
|
|
this.readClearOne(item)
|
|
if (msgType == "community_house") {
|
|
this.$refs.fastcall.showHouseInfo(targetId);
|
|
} else if (msgType == "resident_base_info") {
|
|
this.$refs.fastcall.showResiInfo(targetId);
|
|
}
|
|
},
|
|
|
|
toNoticePage () {
|
|
this.$router.push({
|
|
path: "/main/home-notice",
|
|
});
|
|
},
|
|
|
|
toSearchPage (type, searchKey) {
|
|
this.$router.push({
|
|
path: "/main/shequ-chaxun"
|
|
});
|
|
localStorage.setItem('homeSearchType', type)
|
|
localStorage.setItem('homeSearchKey', searchKey)
|
|
},
|
|
|
|
handleClickSearchBtn (str) {
|
|
const {
|
|
searchData: { type, searchKey },
|
|
} = this;
|
|
if (str) {
|
|
this.toSearchPage(type, searchKey);
|
|
return
|
|
}
|
|
if (!searchKey) return this.$message.error("请输入搜索条件");
|
|
this.toSearchPage(type, searchKey);
|
|
},
|
|
|
|
async getApiData () {
|
|
await this.getOrgData();
|
|
this.getWarningList();
|
|
this.getZnycList();
|
|
this.getPandectData();
|
|
this.getNoticeData();
|
|
},
|
|
|
|
//加载组织数据
|
|
async getOrgData () {
|
|
const url = "/gov/org/agency/maporg";
|
|
let params = {
|
|
orgId: "",
|
|
level: "",
|
|
};
|
|
|
|
const { data, code, msg } = await requestPost(url, params);
|
|
|
|
if (code === 0) {
|
|
this.orgData = data;
|
|
} else {
|
|
this.$message.error(msg);
|
|
}
|
|
},
|
|
|
|
//加载组织数据
|
|
async getPandectData () {
|
|
const url = "/actual/base/residentHouseMerge/communityOverview";
|
|
let params = {
|
|
// orgId: "",
|
|
// level: "",
|
|
};
|
|
|
|
const { data, code, msg } = await requestGet(url, params);
|
|
|
|
if (code === 0) {
|
|
if (data) {
|
|
this.pandectData = data;
|
|
}
|
|
} else {
|
|
this.$message.error(msg);
|
|
}
|
|
},
|
|
|
|
//加载组织数据
|
|
async getNoticeData () {
|
|
const url = "/message/intelligentMessage/list";
|
|
let params = {
|
|
last: "10",
|
|
};
|
|
|
|
const { data, code, msg } = await requestGet(url, params);
|
|
|
|
if (code === 0) {
|
|
if (data) {
|
|
this.noticeData = data;
|
|
}
|
|
} else {
|
|
this.$message.error(msg);
|
|
}
|
|
},
|
|
|
|
//加载组织数据
|
|
async getWarningList () {
|
|
const url = "/actual/base/resiCategory/categoryCountList";
|
|
let params = {
|
|
// id: this.orgData.id,
|
|
// level: "agency",
|
|
};
|
|
|
|
this.resiCategory.loading = true;
|
|
const { data, code, msg } = await requestGet(url, params);
|
|
this.resiCategory.loading = false;
|
|
|
|
if (code === 0) {
|
|
if (data) {
|
|
this.resiCategory.count = data.resiCount;
|
|
this.resiCategory.list = data.categoryList.map((item) => {
|
|
return {
|
|
code: item.categoryName,
|
|
name: resiCategoryMap[item.categoryName] || "",
|
|
count: item.categoryCount,
|
|
per: parseInt(
|
|
(100 * item.categoryCount) / data.resiCount
|
|
),
|
|
const: "const",
|
|
};
|
|
});
|
|
}
|
|
} else {
|
|
this.$message.error(msg);
|
|
}
|
|
},
|
|
//加载智能预测数据
|
|
async getZnycList () {
|
|
const url = "/actual/base/resiCategory/intelligentPredictioncategoryCountList";
|
|
// const url = "/actual/base/resiCategory/categoryCountList";
|
|
let params = {
|
|
// id: this.orgData.id,
|
|
// level: "agency",
|
|
};
|
|
|
|
this.znycCategory.loading = true;
|
|
const { data, code, msg } = await requestGet(url, params);
|
|
this.znycCategory.loading = false;
|
|
|
|
if (code === 0) {
|
|
if (data) {
|
|
this.znycCategory.count = data.resiCount;
|
|
this.znycCategory.list = data.categoryList.map((item) => {
|
|
return {
|
|
code: item.categoryName,
|
|
name: resiCategoryMap[item.categoryName] || "",
|
|
count: item.categoryCountNext,
|
|
// per: parseInt(
|
|
// (100 * item.categoryCount) / data.resiCount
|
|
// ),
|
|
per: item.change_ratio,
|
|
const: "const",
|
|
};
|
|
});
|
|
}
|
|
} else {
|
|
this.$message.error(msg);
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" src="@/assets/scss/modules/index.scss" scoped></style>
|
|
|