elink-star
/
epmet-work-pc-chengyang
12
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

首页最终版

feature
mk 2 years ago
parent
13697d2bd0
commit
765dd86d95
2 changed files with 187 additions and 172 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 35
      src/assets/scss/modules/index.scss
  2. 256
      src/views/modules/home/index.vue

35
src/assets/scss/modules/index.scss
View File

@ -251,9 +251,9 @@
} }
} }
.cnt-right { .cnt-right {
margin-left: auto; // margin-left: auto;
width: calc(100% - 240px - 40px); width: 100%;
height: 402px; height: 287px;
overflow-y: auto; overflow-y: auto;
.list { .list {
@ -297,7 +297,7 @@
.item-progress { .item-progress {
margin-right: 15px; margin-right: 15px;
width: 60%; width: 100%;
height: 24px; height: 24px;
background: #e6f0ff; background: #e6f0ff;
border-radius: 1px; border-radius: 1px;
@ -334,11 +334,15 @@
} }
.item { .item {
padding: 16px 0 12px; padding: 16px 0 7px;
border-bottom: 1px dashed #f0f5fa; border-bottom: 1px dashed #f0f5fa;
&:last-child { &:last-child {
border-bottom: none; border-bottom: none;
} }
display: flex;
align-items: center;
.item_right{
flex: 1;
.item-title { .item-title {
@include toe; @include toe;
height: 22px; height: 22px;
@ -360,6 +364,27 @@
line-height: 17px; line-height: 17px;
} }
} }
.item_left{
width: 40px;
margin-right:15px;
.i-tag{
display: block;
margin-right: 15px;
width: 40px;
height: 22px;
border-radius: 4px;
border: 1px solid rgba(0, 0, 0, 0.15);
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(0, 0, 0, 0.88);
line-height: 20px;
font-style: normal;
text-align: center;
}
}
}
} }
} }
.m-tb { .m-tb {

256
src/views/modules/home/index.vue
View File

@ -59,66 +59,40 @@
</div> </div>
<div class="m-box m-pan"> <div class="m-box m-pan">
<div class="wrap">
<div class="header"> <div class="header">
<img <img
src="@/assets/images/index/title-icon-sqzl.png" src="@/assets/images/index/title-icon-sqzl.png"
/> />
<span>社区总览</span> <span>社区总览</span>
</div> </div>
<div class="cnt"> <p>{{ pandectData.deptName }}，<span v-if="pandectData.gridCount">划分为{{ pandectData.underCount }}个{{
<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 pandectData.underName
}}，</span }}，</span>现有房屋{{ pandectData.homeCount }}间、自住房屋{{ pandectData.selfStay }}间、
>现有居民{{ pandectData.homeCount }}户、{{ 出租房屋{{ pandectData.rentOut }}间、
闲置房屋{{ pandectData.vacantHouse }}间、现有居民{{
pandectData.resiCount pandectData.resiCount
}}人，其中常住人口{{ }}户、{{
pandectData.totalResidents
}}人、其中常住人口{{
pandectData.permanentResiCount pandectData.permanentResiCount
}}人，流动人口{{ }}人，流动人口{{
pandectData.floatingResiCount pandectData.floatingResiCount
}}人，各类群体分布如下： }}人，各类群体分布如下：
</p> </p>
<div>
<div class="subtitle"> <el-button-group class="btn_group">
<img <el-button type="primary" :plain="btnSelectA"
src="@/assets/images/index/i-fxjg.png" @click="handleClickResiCategory">居民分类统计</el-button>
/> <el-button type="primary" :plain="btnSelectB"
<span>分析结果</span> @click="handleClickIntelligentPrediction">智能预测</el-button>
</div> </el-button-group>
<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> </div>
<div class="cnt">
<div class="cnt-right"> <div class="cnt-right">
<div class="list"> <div class="list">
<div <div class="item" @click="handleClickCategory(item)" :key="item.code" v-for="(
class="item"
@click="handleClickCategory(item)"
:key="item.code"
v-for="(
item, index item, index
) in resiCategory.list" ) in resiCategory.list">
>
<div> <div>
{{ {{
("0" + (index + 1)).substr(-2) ("0" + (index + 1)).substr(-2)
@ -132,11 +106,9 @@
{{ item.count }}人 {{ item.count }}人
</div> </div>
<div class="item-progress"> <div class="item-progress">
<b <b :style="{
:style="{
width: item.per + '%', width: item.per + '%',
}" }"></b>
></b>
</div> </div>
<div class="item-per"> <div class="item-per">
{{ item.per }} % {{ item.per }} %
@ -145,7 +117,14 @@
</div> </div>
</div> </div>
</div> </div>
</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> </div>
</div> </div>
@ -160,12 +139,13 @@
</div> </div>
<div class="more" @click="toNoticePage">更多></div> <div class="more" @click="toNoticePage">更多></div>
<div class="cnt" v-if="noticeData.length > 0"> <div class="cnt" v-if="noticeData.length > 0">
<div <div @click="handleClickNotice(item)" class="item" :key="'notice' + item.targetId + index"
@click="handleClickNotice(item)" v-for="(item, index) in noticeData">
class="item" <div class="item_left">
:key="'notice' + item.targetId + index" <i class="i-tag" v-if="item.readFlag == 1">已读</i>
v-for="(item, index) in noticeData" <i class="i-tag" v-else>未读</i>
> </div>
<div class="item_right">
<div class="item-date"> <div class="item-date">
{{ item.createdTime }} {{ item.createdTime }}
</div> </div>
@ -174,6 +154,7 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="cnt" v-else> <div class="cnt" v-else>
<div class="empty"> <div class="empty">
@ -191,87 +172,12 @@
<img <img
src="@/assets/images/index/title-icon-zntb.png" src="@/assets/images/index/title-icon-zntb.png"
/> />
<span>智能填报</span> <span>不满意事项月度趋势分析</span>
</div> </div>
</div> </div>
<div class="more">更多></div> <div class="more">更多></div>
<div class="cnt"> <div class="cnt">
<div class="item"> <div id="my_chart" style="width: 100%;height: 200px; position: relative;top:-10px"></div>
<img
class="item-tag"
src="@/assets/images/index/i-zntb.png"
/>
<div class="item-name">
《80-90周岁高龄老人生活补助申请表》
</div>
<div class="item-btns">
<div class="item-btn">
<img src="@/assets/images/index/i-tx.png" />
<span>填写</span>
</div>
<div class="item-btn">
<img src="@/assets/images/index/i-xz.png" />
<span>下载</span>
</div>
</div>
</div>
<div class="item">
<img
class="item-tag"
src="@/assets/images/index/i-zntb.png"
/>
<div class="item-name">
《80-90周岁高龄老人生活补助申请表》
</div>
<div class="item-btns">
<div class="item-btn">
<img src="@/assets/images/index/i-tx.png" />
<span>填写</span>
</div>
<div class="item-btn">
<img src="@/assets/images/index/i-xz.png" />
<span>下载</span>
</div>
</div>
</div>
<div class="item">
<img
class="item-tag"
src="@/assets/images/index/i-zntb.png"
/>
<div class="item-name">
《80-90周岁高龄老人生活补助申请表》
</div>
<div class="item-btns">
<div class="item-btn">
<img src="@/assets/images/index/i-tx.png" />
<span>填写</span>
</div>
<div class="item-btn">
<img src="@/assets/images/index/i-xz.png" />
<span>下载</span>
</div>
</div>
</div>
<div class="item">
<img
class="item-tag"
src="@/assets/images/index/i-zntb.png"
/>
<div class="item-name">
《80-90周岁高龄老人生活补助申请表》
</div>
<div class="item-btns">
<div class="item-btn">
<img src="@/assets/images/index/i-tx.png" />
<span>填写</span>
</div>
<div class="item-btn">
<img src="@/assets/images/index/i-xz.png" />
<span>下载</span>
</div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -285,6 +191,7 @@ import resiCategoryMap from "@/views/business/resi-category-map.js";
import { mapGetters } from "vuex"; import { mapGetters } from "vuex";
import nextTick from "dai-js/tools/nextTick"; import nextTick from "dai-js/tools/nextTick";
import fastcall from "@/views/modules/cpts/fastcall"; import fastcall from "@/views/modules/cpts/fastcall";
import * as echarts from 'echarts';
export default { export default {
components: { fastcall }, components: { fastcall },
@ -325,7 +232,59 @@ export default {
}, },
noticeData: [], noticeData: [],
};
btnSelectA: false,
btnSelectB: true,
option : {
tooltip: {
trigger: 'axis'
},
legend: {
data: ['12345不满意数', '省满意调查不满意数', '社区自评不满意数']
},
grid: {
left: '3%',
right: '4%',
bottom: '8%',
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: { computed: {
maxTableHeight() { maxTableHeight() {
@ -352,12 +311,33 @@ export default {
}, },
mounted() { mounted() {
this.getApiData(); this.getApiData();
this.$nextTick(()=>{
this.initChart()
})
console.log( console.log(
"dynamicMenuRoutes----------------------------", "dynamicMenuRoutes----------------------------",
this.$store.state.sidebarMenuList this.$store.state.sidebarMenuList
); );
}, },
methods: { 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();
}
},
handleClickResiCategory() {
this.btnSelectA = false
this.btnSelectB = true
},
handleClickIntelligentPrediction() {
this.btnSelectA = true
this.btnSelectB = false
},
searchDataTab(str){ searchDataTab(str){
this.searchData.type = str; this.searchData.type = str;
}, },
@ -370,9 +350,19 @@ export default {
}); });
}, },
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) { handleClickNotice(item) {
const { msgType, targetId } = item; const { msgType, targetId } = item;
this.readClearOne(item)
if (msgType == "community_house") { if (msgType == "community_house") {
this.$refs.fastcall.showHouseInfo(targetId); this.$refs.fastcall.showHouseInfo(targetId);
} else if (msgType == "resident_base_info") { } else if (msgType == "resident_base_info") {

Write Preview
Loading…
Cancel
Save