|
|
|
|
<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;">
|
|
|
|
|
<span style="color: #2683DB; font-size: 25px;">{{ pandectData.homeCount }}</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.selfStay }}</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.rentOut }}</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.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="mychart" :style="myChartStyle"></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">
|
|
|
|
|
<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 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="">
|
|
|
|
|
<div class="noe-text"> <span style="margin-top: 10px;">居民分类更新情况</span> <span class="update-settings"
|
|
|
|
|
style="margin-top: 10px;"><img referrerpolicy="no-referrer"
|
|
|
|
|
src="https://lanhu.oss-cn-beijing.aliyuncs.com/pskhmf0717eflwg54wn73s6spnsg6u48r0f69e94b-2bc8-4156-8330-902087b72e0b" />更新设置</span>
|
|
|
|
|
</div>
|
|
|
|
|
<el-tabs v-model="activeName" style="width:100%;">
|
|
|
|
|
<div class="table-container" style="height: 300px; overflow: auto;">
|
|
|
|
|
<table class="table">
|
|
|
|
|
<thead>
|
|
|
|
|
<tr>
|
|
|
|
|
<th>居民类别</th>
|
|
|
|
|
<th>总人数</th>
|
|
|
|
|
<th>分类信息不完整数</th>
|
|
|
|
|
<th>更新负责人</th>
|
|
|
|
|
<th>更新周期</th>
|
|
|
|
|
<th>更新人数</th>
|
|
|
|
|
</tr>
|
|
|
|
|
</thead>
|
|
|
|
|
<tbody>
|
|
|
|
|
<tr v-for="(item, index) in tableList" :key="item.code">
|
|
|
|
|
<td style="opacity: 0.5;">{{ item.shenfen }}</td>
|
|
|
|
|
<td style="color: #2683DB;">{{ item.zongNumber }}</td>
|
|
|
|
|
<td style="color: red;">{{ item.noAllNuber }}</td>
|
|
|
|
|
<td class="special-header">{{ item.fuzeren }}</td>
|
|
|
|
|
<td class="special-header">{{ item.zhouqi }}</td>
|
|
|
|
|
<td class="special-header">{{ item.addNum }}</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: "",
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
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",
|
|
|
|
|
numberLiM: [{ mer: 820, bilv: 0.45 }, { mer: 724, bilv: 0.56 }, { mer: 718, bilv: 0.54 }, { mer: 725, bilv: 0.69 }, { mer: 727, bilv: 0.36 }, { mer: 728, bilv: 0.64 }, { mer: 725, bilv: 0.78 }, { mer: 750, bilv: 0.25 }, { mer: 760, bilv: 0.96 }, { mer: 700, bilv: 0.38 }, { mer: 710, bilv: 0.62 }],
|
|
|
|
|
myChart: {},
|
|
|
|
|
agencyLevel: '',
|
|
|
|
|
xData: ["党员", "残疾人", "退役军人", "失业人员", "低保人员", "保障房人员", "特殊人员", "大病人员", "慢病人员", "特扶人员", "老年人"],
|
|
|
|
|
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,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
this.ehso();
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//图形
|
|
|
|
|
this.initEcharts();
|
|
|
|
|
|
|
|
|
|
this.getApiData();
|
|
|
|
|
this.$nextTick(() => {
|
|
|
|
|
this.initChart()
|
|
|
|
|
})
|
|
|
|
|
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") + "月"),
|
|
|
|
|
},
|
|
|
|
|
yAxis: {
|
|
|
|
|
type: "value",
|
|
|
|
|
},
|
|
|
|
|
series,
|
|
|
|
|
};
|
|
|
|
|
this.myChart.setOption(option, true);
|
|
|
|
|
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: ((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() {
|
|
|
|
|
// 基本柱状图
|
|
|
|
|
const option = {
|
|
|
|
|
xAxis: {
|
|
|
|
|
type: 'category',
|
|
|
|
|
axisLabel: {
|
|
|
|
|
// rotate: -45,
|
|
|
|
|
textStyle: {
|
|
|
|
|
fontSize: 10
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
axisTick: {
|
|
|
|
|
show: false, // 不显示x轴刻度线
|
|
|
|
|
},
|
|
|
|
|
data: this.xData,
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
yAxis: {},
|
|
|
|
|
graphic: [{ // 添加自定义的文字块
|
|
|
|
|
type: 'group',
|
|
|
|
|
left: 'center',
|
|
|
|
|
bottom: 20,
|
|
|
|
|
z: 100,
|
|
|
|
|
children: [
|
|
|
|
|
{
|
|
|
|
|
type: 'rect',
|
|
|
|
|
left: 0,
|
|
|
|
|
// top: 'middle',
|
|
|
|
|
shape: {
|
|
|
|
|
width: 30,
|
|
|
|
|
height: 6,
|
|
|
|
|
},
|
|
|
|
|
style: {
|
|
|
|
|
fill: '#0056D6', // 蓝色方块
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
type: 'text',
|
|
|
|
|
left: 35,
|
|
|
|
|
// top: 'middle',
|
|
|
|
|
style: {
|
|
|
|
|
text: '分类居民总数',
|
|
|
|
|
fill: '#333',
|
|
|
|
|
fontSize: 12,
|
|
|
|
|
// fontWeight: 'bold',
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
type: 'rect',
|
|
|
|
|
left: 130,
|
|
|
|
|
// top: 'middle',
|
|
|
|
|
shape: {
|
|
|
|
|
width: 30,
|
|
|
|
|
height: 6,
|
|
|
|
|
},
|
|
|
|
|
style: {
|
|
|
|
|
fill: '#FFDB84 ', // 橙色方块
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
type: 'text',
|
|
|
|
|
left: 170,
|
|
|
|
|
// top: 'middle',
|
|
|
|
|
style: {
|
|
|
|
|
text: '分类信息不完整数',
|
|
|
|
|
fill: '#333',
|
|
|
|
|
fontSize: 12,
|
|
|
|
|
// fontWeight: 'bold',
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
}],
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
type: "bar",
|
|
|
|
|
barWidth: '30%',
|
|
|
|
|
barGap: '20%',
|
|
|
|
|
data: this.yData,
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
};
|
|
|
|
|
const myChart = echarts.init(document.getElementById("mychart"));
|
|
|
|
|
myChart.setOption(option);
|
|
|
|
|
//随着屏幕大小调节图表
|
|
|
|
|
window.addEventListener("resize", () => {
|
|
|
|
|
myChart.resize();
|
|
|
|
|
});
|
|
|
|
|
myChart.on("click", (e) => {
|
|
|
|
|
console.log("123123123112", e.name);
|
|
|
|
|
this.$router.push({
|
|
|
|
|
path: "/main/base-resi",
|
|
|
|
|
query: {
|
|
|
|
|
param1: e.name,
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
ehso() {
|
|
|
|
|
this.yData = this.numberLiM.map(item => ({
|
|
|
|
|
value: item.mer,
|
|
|
|
|
itemStyle: {
|
|
|
|
|
color: {
|
|
|
|
|
type: 'linear',
|
|
|
|
|
x: 0,
|
|
|
|
|
y: 0,
|
|
|
|
|
x2: 0,
|
|
|
|
|
y2: 1,
|
|
|
|
|
colorStops: [
|
|
|
|
|
{ offset: 0, color: '#2D7DF2' },
|
|
|
|
|
{ offset: item.bilv, color: '#7EB1FE' },
|
|
|
|
|
{ offset: item.bilv, color: '#EFB632' },
|
|
|
|
|
{ offset: 1, color: '#FDD77D' }
|
|
|
|
|
],
|
|
|
|
|
global: false
|
|
|
|
|
},
|
|
|
|
|
shadowColor: "#91cc75",
|
|
|
|
|
borderType: "dashed",
|
|
|
|
|
// opacity: 0.5
|
|
|
|
|
}
|
|
|
|
|
}));
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="scss" src="@/assets/scss/modules/index.scss" scoped></style>
|
