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.
767 lines
26 KiB
767 lines
26 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 class="mewq">
|
|
<div class="boxss">
|
|
<div style="margin-top: 10px;">
|
|
<span style="color: #2683DB; font-size: 25px;">{{ pandectData.totalResidents }}</span>
|
|
<br>
|
|
<span style="color: #858585; font-size: 12px;">居民总数</span>
|
|
</div>
|
|
</div>
|
|
<div class="boxss">
|
|
<div style="margin-top: 10px;">
|
|
<span style="color: #2683DB; font-size: 25px;">{{ pandectData.permanentResiCount }}</span>
|
|
<br>
|
|
<span style="color: #858585; font-size: 12px;">常住人口</span>
|
|
</div>
|
|
</div>
|
|
<div class="boxss">
|
|
<div style="margin-top: 10px;">
|
|
<span style="color: #2683DB; font-size: 25px;">{{ pandectData.floatingResiCount }}</span>
|
|
<br>
|
|
<span style="color: #858585; font-size: 12px;">流动人口</span>
|
|
</div>
|
|
</div>
|
|
<div class="boxss">
|
|
<div style="margin-top: 10px;" @click="jumpToHouse()">
|
|
<span style="color: #2683DB; font-size: 25px;">{{ pandectData.homeCount }}</span>
|
|
<br>
|
|
<span style="color: #858585; font-size: 12px;">房屋总数</span>
|
|
</div>
|
|
</div>
|
|
<div class="boxss" @click="jumpToHouse('zizhuM')">
|
|
<div style="margin-top: 10px;">
|
|
<span style="color: #2683DB; font-size: 25px;">{{ pandectData.selfStay }}</span>
|
|
<br>
|
|
<span style="color: #858585; font-size: 12px;">自住房屋</span>
|
|
</div>
|
|
</div>
|
|
<div class="boxss" @click="jumpToHouse('chuzuM')">
|
|
<div style="margin-top: 10px;">
|
|
<span style="color: #2683DB; font-size: 25px;">{{ pandectData.rentOut }}</span>
|
|
<br>
|
|
<span style="color: #858585; font-size: 12px;">出租房屋</span>
|
|
</div>
|
|
</div>
|
|
<div class="boxss" @click="jumpToHouse('xianzhiM')">
|
|
<div style="margin-top: 10px;">
|
|
<span style="color: #2683DB; font-size: 25px;">{{ pandectData.vacantHouse }}</span>
|
|
<br>
|
|
<span style="color: #858585; font-size: 12px;">闲置房屋</span>
|
|
</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="header">
|
|
<div class="newqsa"><span>居民分类信息不完整数量统计</span></div>
|
|
<!-- <img src="@/assets/images/index/title-icon-zntb.png" /> -->
|
|
|
|
</div>
|
|
<div class="cnt">
|
|
<!-- 树状图 -->
|
|
<div class="echart" id="myBarchart" style="width: 100%; height: 100%;"></div>
|
|
<!-- 树状图end -->
|
|
|
|
<!-- <div class="cnt-left">
|
|
<div class="subtitle">
|
|
<img src="@/assets/images/index/i-sqjj.png"/>
|
|
<span>{{agencyLevel!='district'?agencyLevel=='street'?'街道':agencyLevel=='community'?'社区':agencyLevel=='grid'?'网格':'组织':'组织'}}简介 </span>
|
|
</div>
|
|
<p>
|
|
{{ pandectData.deptName }}，<span v-if="pandectData.gridCount">划分为 <b>{{
|
|
pandectData.underCount
|
|
}}</b> 个 <b>{{
|
|
pandectData.underName
|
|
}}，</b> </span> 现有房屋 <b>{{ pandectData.homeCount }}</b> 间，自住房屋 <b>{{
|
|
pandectData.selfStay
|
|
}}</b> 间、出租房屋 <b>{{
|
|
pandectData.rentOut
|
|
}}</b> 间、闲置房屋 <b>{{
|
|
pandectData.vacantHouse
|
|
}}</b> 间，现有居民 <b>{{ pandectData.resiCount }}</b> 户、 <b>{{
|
|
pandectData.totalResidents
|
|
}}</b> 人，其中常住人口 <b>{{ pandectData.permanentResiCount }}</b> 人，流动人口 <b>{{
|
|
pandectData.floatingResiCount
|
|
}}</b> 人，各类群体分布如下：
|
|
</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:100%">
|
|
<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 class="m-box m-tb">
|
|
<div class="wrap">
|
|
<div class="header">
|
|
<div class="newqsa"><span>不满意事项(月度)趋势分析</span></div>
|
|
<!-- <img src="@/assets/images/index/title-icon-zntb.png" /> -->
|
|
</div>
|
|
</div>
|
|
<!-- <div class="more">更多></div> -->
|
|
<div class="cnt">
|
|
<div id="my_chart" style="width: 100%; height: 230px; position: relative; top: -30px"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="g-row-right" style="margin-right: 20px;">
|
|
<div class="m-box m-tx">
|
|
<div class="header">
|
|
<div class="newqsa"><span>消息提醒</span></div>
|
|
<!-- <img src="@/assets/images/index/title-icon-zntx.png" /> -->
|
|
</div>
|
|
<div class="more" @click="toNoticePage">更多></div>
|
|
<div class="cnt" v-if="noticeData.length > 0" style="margin-top: 0px;">
|
|
<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"
|
|
style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 450px;">
|
|
<img v-if="index === 0" class="thumbnail_1" referrerpolicy="no-referrer"
|
|
src="https://lanhu.oss-cn-beijing.aliyuncs.com/psjidpevo98fb607sd028bliakr139r25k82b2fbda-8291-4fe3-b190-bfe723a10036" />{{
|
|
item.content }}
|
|
</div>
|
|
</div>
|
|
<div class="item_left">
|
|
<i class="i-tag" v-if="item.readFlag == 1">已读</i>
|
|
<i class="i-tag" v-else>未读</i>
|
|
</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="white-box"> -->
|
|
<div class="m-box m-tx" style="position: relative;">
|
|
<div class="noe-text"> <span style="margin-top: 10px;">居民分类更新情况</span> <span class="update-settings"
|
|
style="margin-top: 10px;" v-show="showAll" @click="jumpToJuMin()"><img referrerpolicy="no-referrer"
|
|
src="https://lanhu.oss-cn-beijing.aliyuncs.com/pskhmf0717eflwg54wn73s6spnsg6u48r0f69e94b-2bc8-4156-8330-902087b72e0b" />更新设置</span>
|
|
</div>
|
|
<!-- <el-tabs style="width:100%; height: 100%;"> -->
|
|
<div class="table-container" style=" height: auto; width:100%; height: 100%; overflow-y: auto; position: absolute; bottom: 5px;">
|
|
<table class="table" style=" height: auto; width:100%; height: 100%;">
|
|
<thead>
|
|
<tr>
|
|
<th>居民类别</th>
|
|
<th>总人数</th>
|
|
<th>分类信息不完整数</th>
|
|
<th v-show="showAll">更新负责人</th>
|
|
<th>更新周期</th>
|
|
<th>更新人数</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="(item, index) in tableList" :key="item.code">
|
|
<td style="opacity: 0.5;">{{ item.residentCategoryName }}</td>
|
|
<td style="color: #2683DB;">{{ item.total }}</td>
|
|
<td style="color: red;">{{ item.nonIntegratedNum }}</td>
|
|
<td class="special-header" v-show="showAll">{{ item.userName }}</td>
|
|
<td class="special-header">{{ item.updatePeriodName }}</td>
|
|
<td class="special-header">{{ item.updateResiNum }}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<!-- </el-tabs> -->
|
|
</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: "",
|
|
},
|
|
showAll: false,
|
|
|
|
typePlaceholder: {
|
|
jumin: "请输入姓名或联系电话或证件号",
|
|
fangwu: "请输入小区名称或楼栋名称",
|
|
xuqiu: "请输入需求人或需求内容或服务组织",
|
|
},
|
|
|
|
resiCategory: {
|
|
loading: false,
|
|
total: "",
|
|
list: [],
|
|
},
|
|
tableList: [
|
|
// { shenfen: '党员', zongNumber: '10', noAllNuber: '1', fuzeren: '王五', zhouqi: '1', addNum: '1' },
|
|
// { shenfen: '党员', zongNumber: '10', noAllNuber: '1', fuzeren: '王五', zhouqi: '1', addNum: '1' },
|
|
// { shenfen: '党员', zongNumber: '10', noAllNuber: '1', fuzeren: '王五', zhouqi: '1', addNum: '1' },
|
|
// { shenfen: '保障房人员', zongNumber: '10', noAllNuber: '1', fuzeren: '王五', zhouqi: '1', addNum: '1' },
|
|
// { shenfen: '党员', zongNumber: '10', noAllNuber: '1', fuzeren: '王五', zhouqi: '1', addNum: '1' },
|
|
// { shenfen: '党员', zongNumber: '10', noAllNuber: '1', fuzeren: '王五', zhouqi: '1', addNum: '1' },
|
|
// { shenfen: '党员', zongNumber: '10', noAllNuber: '1', fuzeren: '王五', zhouqi: '1', addNum: '1' },
|
|
// { shenfen: '党员', zongNumber: '10', noAllNuber: '1', fuzeren: '王五', zhouqi: '1', addNum: '1' },
|
|
// { shenfen: '党员', zongNumber: '10', noAllNuber: '1', fuzeren: '王五', zhouqi: '1', addNum: '1' },
|
|
// { shenfen: '党员', zongNumber: '10', noAllNuber: '1', fuzeren: '王五', zhouqi: '1', addNum: '1' },
|
|
],
|
|
znycCategory: {
|
|
loading: false,
|
|
total: "",
|
|
list: [],
|
|
},
|
|
|
|
orgData: {
|
|
id: "",
|
|
level: "agency",
|
|
},
|
|
|
|
pandectData: {
|
|
communityName: "",
|
|
streetName: "",
|
|
gridCount: "",
|
|
resiCount: "",
|
|
homeCount: "",
|
|
floatingResiCount: "",
|
|
permanentResiCount: "",
|
|
},
|
|
noticeData: [],
|
|
activeName: "resi",
|
|
myChart: {},
|
|
myBarchart:{},
|
|
agencyLevel: '',
|
|
yData: [
|
|
// {
|
|
// value: 720,
|
|
// itemStyle: {
|
|
// color: {
|
|
// type: 'linear',
|
|
// x: 0,
|
|
// y: 0,
|
|
// x2: 0,
|
|
// y2: 1,
|
|
// colorStops: [{
|
|
// offset: 0, color: '#2D7DF2' // 上部颜色
|
|
// }, {
|
|
// offset: 0.45, color: '#7EB1FE' // 中部颜色
|
|
// }, {
|
|
// offset: 0.45, color: '#EFB632' // 中部颜色
|
|
// }, {
|
|
// offset: 1, color: '#FDD77D' // 下部颜色
|
|
// }],
|
|
// global: false // 默认为 false
|
|
// },
|
|
// shadowColor: "#91cc75",
|
|
// borderType: "dashed",
|
|
// // opacity: 0.5
|
|
// }
|
|
// },725,165,765,742,710,720,730,735,762,754
|
|
],
|
|
myChartStyle: { float: "left", width: "140%", height: "100%" },
|
|
}
|
|
},
|
|
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,
|
|
},
|
|
},
|
|
created() {
|
|
},
|
|
mounted() {
|
|
// this.ehso();
|
|
//图形
|
|
|
|
|
|
this.getApiData();
|
|
this.$nextTick(() => {
|
|
this.initChart()
|
|
this.initEcharts();
|
|
|
|
})
|
|
this.agencyLevel = localStorage.getItem("level", data.level);
|
|
console.log(
|
|
"dynamicMenuRoutes----------------------------",
|
|
this.$store.state.sidebarMenuList
|
|
);
|
|
},
|
|
methods: {
|
|
initChart() {
|
|
this.$http.get("/governance/satisfactionOverview/notSatisfactionTrend").then(({ data: { data } }) => {
|
|
this.myChart = echarts.init(document.getElementById("my_chart"));
|
|
// console.log("123123", data.series)
|
|
let series = data.series.map((item, index) => {
|
|
return {
|
|
...item,
|
|
type: "line",
|
|
lineStyle: { // 添加lineStyle属性来指定折线样式
|
|
color: index === 0 ? '#F76828' : index === 1 ? '#EDB42D' : '#0056D6' // 根据索引指定不同的颜色
|
|
},
|
|
symbol: 'none',
|
|
itemStyle: {
|
|
color: index === 0 ? '#F76828' : index === 1 ? '#EDB42D' : '#0056D6' // 设置折点颜色
|
|
}
|
|
};
|
|
});
|
|
let option = {
|
|
tooltip: {
|
|
trigger: "axis",
|
|
},
|
|
legend: {
|
|
data: data.series.map((item) => item.name),
|
|
bottom: "-5",
|
|
icon: "rect",
|
|
itemWidth: 20,
|
|
itemHeight: 5,
|
|
itemGap: 20,
|
|
},
|
|
grid: {
|
|
left: "3%",
|
|
right: "4%",
|
|
bottom: "15%",
|
|
containLabel: true,
|
|
},
|
|
toolbox: {
|
|
// feature: {
|
|
// saveAsImage: {}
|
|
// }
|
|
},
|
|
xAxis: {
|
|
type: "category",
|
|
boundaryGap: false,
|
|
// data: data.monthTimes.map((item) => this.$moment(item).format("M") + "月"),
|
|
data: data.monthTimes
|
|
},
|
|
yAxis: {
|
|
type: "value",
|
|
},
|
|
series,
|
|
};
|
|
this.myChart.setOption(option, true);
|
|
window.addEventListener("resize", this.handleWindowResize);
|
|
});
|
|
this.borderH();
|
|
const level = localStorage.getItem('level');
|
|
console.log('Stored level:', level);
|
|
if (level == 'district' || 'community') {
|
|
this.showAll = true
|
|
}
|
|
|
|
},
|
|
|
|
|
|
borderH() {
|
|
this.$http.post("/actual/base/residentCategoryUpdateInfo/getUpdateAndintegrityList").then(({ data: { data } }) => {
|
|
this.tableList = data
|
|
console.log("请求成功:", data);
|
|
});
|
|
},
|
|
|
|
handleWindowResize() {
|
|
if (this.myChart) {
|
|
this.myChart.resize();
|
|
this.myBarChart.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);
|
|
}
|
|
this.getNoticeData()
|
|
},
|
|
|
|
toNoticePage() {
|
|
this.$router.push({
|
|
path: "/main/home-notice",
|
|
});
|
|
},
|
|
jumpToJuMin() {
|
|
this.$router.push({
|
|
path: "/main/workSys-setResiUpdate-index",
|
|
});
|
|
},
|
|
//
|
|
jumpToHouse(e) {
|
|
this.$router.push({
|
|
path: "/main/base-community-community",
|
|
query: {
|
|
param1: e,
|
|
}
|
|
});
|
|
},
|
|
|
|
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",
|
|
readFlag: '0'
|
|
};
|
|
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: ((100 * item.categoryCount) / data.resiCount).toFixed(0),
|
|
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);
|
|
}
|
|
},
|
|
initEcharts() {
|
|
this.$http.get("/actual/base/residentIntegrity/resiCategoryStats/byOrg/query4Org").then(({ data: { data } }) => {
|
|
this.myBarchart = echarts.init(document.getElementById("myBarchart"));
|
|
let xData = data.categoryStatsDatas.map(item => item.resiCategoryName)
|
|
// let integratedNum = data.categoryStatsDatas.map(item => item.integratedNum)
|
|
// let nonIntegratedNum = data.categoryStatsDatas.map(item => item.nonIntegratedNum)
|
|
let option = {
|
|
backgroundColor: '#fff',
|
|
color: ['#448cf6', '#f7ca60', ],
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
}
|
|
},
|
|
legend: {
|
|
x: 'center',
|
|
bottom: '8%',
|
|
data: ['分类信息完整数', '分类信息不完整数']
|
|
},
|
|
grid: { //图表的位置
|
|
top: '5%',
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '20%',
|
|
containLabel: true
|
|
},
|
|
yAxis: [{
|
|
type: 'value',
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: ['#f2f2f2']
|
|
}
|
|
},
|
|
}],
|
|
xAxis: [{
|
|
type: 'category',
|
|
data: xData
|
|
}],
|
|
series: [{
|
|
name: '分类信息完整数',
|
|
type: 'bar',
|
|
stack: '总量',
|
|
barWidth: '30px',
|
|
data: data.categoryStatsDatas.map((item, index) => ({
|
|
value: item.integratedNum,
|
|
extraProperty: item.resiCategory
|
|
})),
|
|
},
|
|
{
|
|
name: '分类信息不完整数',
|
|
type: 'bar',
|
|
stack: '总量',
|
|
data: data.categoryStatsDatas.map((item, index) => ({
|
|
value: item.nonIntegratedNum,
|
|
extraProperty: item.resiCategory
|
|
})),
|
|
}
|
|
]
|
|
};
|
|
this.myBarchart.setOption(option);
|
|
window.addEventListener("resize", this.handleWindowResize);
|
|
this.myBarchart.on("click", (e) => {
|
|
console.log(e);
|
|
this.$router.push({
|
|
path: "/main/base-nonIntResi-nonIntResi",
|
|
query: {
|
|
resiCategory: e.data.extraProperty,
|
|
}
|
|
});
|
|
|
|
});
|
|
});
|
|
},
|
|
|
|
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" src="@/assets/scss/modules/index.scss" scoped></style>
|
|
|