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.
747 lines
25 KiB
747 lines
25 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>
|
|
</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_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="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-table :data="tableList" style="width: 100%;margin-top:26px;overflow-y: scroll;" :height="maxTableHeight" border :cell-style="columnbackgroundStyle" class="m-table-item">
|
|
<el-table-column label="居民类别" align="center" width="105">
|
|
<template slot-scope="scope">
|
|
<span style="color:#989898">{{scope.row.residentCategoryName}}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="总人数" width="105" align="center">
|
|
<template slot-scope="scope">
|
|
<span style="color:#006fd6">{{scope.row.total}}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="分类信息不完整数" align="center" :show-overflow-tooltip="true">
|
|
<template slot-scope="scope">
|
|
<span style="color:#ff1200;cursor: pointer;" @click="handelCLickJump(scope.row)">{{scope.row.nonIntegratedNum}}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="更新负责人" :show-overflow-tooltip="true" align="center" v-if="showAll">
|
|
<template slot-scope="scope">
|
|
<span style="color:#ff1200;">{{scope.row.userName}}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="更新周期" align="center" width="105">
|
|
<template slot-scope="scope">
|
|
<span style="color:#989898;">{{scope.row.updatePeriod?scope.row.updatePeriod =='month'?'每自然月':scope.row.updatePeriod =='halfMonth'?'每半自然月':scope.row.updatePeriod =='week'?'每周':'':''}}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="更新人数" align="center" width="105">
|
|
<template slot-scope="scope">
|
|
<span style="color:#006fd6;">{{scope.row.updateResiNum}}</span><span style="color:#989898;">({{scope.row.updatePeriodName?scope.row.updatePeriodName:'--'}})</span>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</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() {
|
|
const _h = this.clientHeight - 610 ;
|
|
return _h;
|
|
},
|
|
...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 == 'community') {
|
|
this.showAll = true
|
|
}
|
|
},
|
|
|
|
columnbackgroundStyle({ row, column, rowIndex, columnIndex }) {
|
|
if (columnIndex == 3||columnIndex == 4||columnIndex == 5) {
|
|
return 'background:#fffcf3;'
|
|
}
|
|
},
|
|
|
|
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);
|
|
}
|
|
},
|
|
async readClearOne(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) {
|
|
this.readClearOne(item);
|
|
if (item.msgType == "community_house") {
|
|
let { agencyId, gridId, gridName, houseId, houseName, targetId } = item
|
|
this.$store.dispatch('saveDataH', { agencyId, gridId, gridName, houseId: targetId, houseName:'房屋详情' });
|
|
this.$router.push({ name: 'house-huaxiang' });
|
|
this.$store.state.contentTabs = this.$store.state.contentTabs.map(item => {
|
|
if (item.name === "house-huaxiang") {
|
|
return { ...item, title: '房屋信息' };
|
|
}
|
|
return item;
|
|
});
|
|
} else if (item.msgType == "resident_base_info") {
|
|
let {
|
|
agencyId,
|
|
gridId,
|
|
gridName,
|
|
gender,
|
|
homeId,
|
|
homeName,
|
|
name,
|
|
targetId,
|
|
deptName
|
|
} = item;
|
|
this.$store.dispatch("saveData", {
|
|
agencyId,
|
|
gridId,
|
|
gridName,
|
|
gender,
|
|
homeId,
|
|
homeName,
|
|
name:'居民详情',
|
|
resiId: targetId,
|
|
});
|
|
this.$router.push({ name: "jumin-huaxiang" });
|
|
this.$store.state.contentTabs = this.$store.state.contentTabs.map(
|
|
(item) => {
|
|
if (item.name === "jumin-huaxiang") {
|
|
return { ...item, title: name };
|
|
}
|
|
return item;
|
|
}
|
|
);
|
|
}
|
|
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);
|
|
}
|
|
},
|
|
handelCLickJump(e){
|
|
this.$router.push({
|
|
path: "/main/base-nonIntResi",
|
|
query: {
|
|
resiCategory: e.residentCategory,
|
|
}
|
|
});
|
|
},
|
|
|
|
//加载组织数据
|
|
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,
|
|
axisLabel: {
|
|
rotate: 50 // 设置旋转角度为45度
|
|
}
|
|
}],
|
|
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) => {
|
|
this.$router.push({
|
|
path: "/main/base-nonIntResi",
|
|
query: {
|
|
resiCategory: e.data.extraProperty,
|
|
}
|
|
});
|
|
|
|
});
|
|
});
|
|
},
|
|
|
|
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" src="@/assets/scss/modules/index.scss" scoped></style>
|
|
|