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
5f25b87c5e
commit
1691f5d002
2 changed files with 254 additions and 285 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. 112
      src/assets/scss/modules/index.scss
  2. 425
      src/views/modules/home/index.vue

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

@ -3,15 +3,20 @@
.g-row { .g-row {
padding: 10px 6px; padding: 10px 6px;
display: flex;
.g-row-left { section{
margin-right: auto; display: flex;
width: calc(66%);
} .g-row-left {
.g-row-right { margin-right: auto;
margin-left: auto; width: calc(34% - 16px);
width: calc(34% - 16px); }
.g-row-right {
margin-left: auto;
width: calc(66%);
}
} }
} }
.m-box { .m-box {
@ -25,16 +30,9 @@
padding: 4px 0; padding: 4px 0;
font-size: 15px; font-size: 15px;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500; font-weight: 600;
color: rgba(0, 0, 0, 0.85); color: rgba(0, 0, 0, 0.85);
line-height: 17px; line-height: 17px;
> img {
vertical-align: bottom;
margin-right: 5px;
width: 17px;
height: 17px;
}
} }
.more { .more {
@ -70,12 +68,15 @@
font-weight: 500; font-weight: 500;
color: $c1; color: $c1;
line-height: 47px; line-height: 47px;
text-align: center;
} }
.tabs { .tabs {
margin-top: 24px; margin-top: 24px;
display: flex; display: flex;
align-items: center; align-items: center;
width: 60%;
margin: 0 auto;
> div { > div {
position: relative; position: relative;
margin-right: 30px; margin-right: 30px;
@ -128,7 +129,7 @@
border-radius: 4px; border-radius: 4px;
border: 1px solid $c1; border: 1px solid $c1;
display: flex; display: flex;
margin: 0 auto;
.input { .input {
position: relative; position: relative;
width: calc(100% - 100px); width: calc(100% - 100px);
@ -211,7 +212,7 @@
.m-pan { .m-pan {
position: relative; position: relative;
height: 488px; height: 510px;
box-sizing: border-box; box-sizing: border-box;
.cnt { .cnt {
@ -251,14 +252,14 @@
} }
} }
.cnt-right { .cnt-right {
margin-left: auto; // margin-left: auto;
width: calc(100% - 240px - 40px); width: calc(100%);
height: 402px; height: 320px;
overflow-y: auto; overflow-y: auto;
.list { .list {
.item { .item {
margin-bottom: 30px; margin-bottom: 19px;
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 14px; font-size: 14px;
@ -297,7 +298,7 @@
.item-progress { .item-progress {
margin-right: 15px; margin-right: 15px;
width: 60%; width: 74%;
height: 24px; height: 24px;
background: #e6f0ff; background: #e6f0ff;
border-radius: 1px; border-radius: 1px;
@ -315,7 +316,7 @@
} }
.m-tx { .m-tx {
height: 466px; height: 250px;
margin-bottom: 13px; margin-bottom: 13px;
.cnt { .cnt {
box-sizing: border-box; box-sizing: border-box;
@ -334,36 +335,61 @@
} }
.item { .item {
padding: 16px 0 12px; padding: 0px 0 7px;
border-bottom: 1px dashed #f0f5fa; border-bottom: 1px dashed #f0f5fa;
&:last-child { &:last-child {
border-bottom: none; border-bottom: none;
} }
.item-title { display: flex;
@include toe; align-items: center;
height: 22px; .item_right{
font-size: 14px; flex: 1;
font-family: PingFangSC-Regular, PingFang SC; .item-title {
font-weight: 400; @include toe;
color: rgba(0, 0, 0, 0.85); height: 22px;
line-height: 22px; font-size: 14px;
&:hover { font-family: PingFangSC-Regular, PingFang SC;
color: $c1; font-weight: 400;
cursor: pointer; color: rgba(0, 0, 0, 0.85);
line-height: 22px;
&:hover {
color: $c1;
cursor: pointer;
}
}
.item-date {
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(0, 0, 0, 0.45);
line-height: 17px;
} }
} }
.item-date { .item_left{
font-size: 12px; width: 40px;
font-family: PingFangSC-Regular, PingFang SC; margin-right:15px;
font-weight: 400; .i-tag{
color: rgba(0, 0, 0, 0.45); display: block;
line-height: 17px; 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 {
height: 302px; height: 247px;
.cnt { .cnt {
box-sizing: border-box; box-sizing: border-box;

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

@ -2,123 +2,118 @@
<template> <template>
<div> <div>
<div class="g-row"> <div class="g-row">
<div class="g-row-left"> <div class="m-box m-search">
<div class="m-box m-search"> <div class="wrap">
<div class="wrap"> <div class="title">
<div class="title"> <span>社区查询</span>
<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>
<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="tabs"> <div class="close-btn" v-if="searchData.searchKey != ''" @click="searchData.searchKey = ''">
<div <img src="@/assets/img/shequ/close.png" />
:class="{ 'z-on': searchData.type == 'jumin' }" </div>
@click="searchDataTab('jumin')"
>
查居民
</div> </div>
<div <div class="btn" @click="handleClickSearchBtn">
:class="{ 'z-on': searchData.type == 'fangwu' }" 查一下
@click="searchDataTab('fangwu')"
>
查房屋
</div> </div>
</div> </div>
</div>
<div class="search"> </div>
<div class="search-input"> </div>
<div class="input"> <section>
<input <div class="g-row-left">
type="text" <div class="m-box m-tx">
:placeholder=" <div class="wrap">
typePlaceholder[searchData.type] <div class="header">
" <span>智能提醒</span>
v-model="searchData.searchKey" </div>
@keyup.enter="handleClickSearchBtn" <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"
<div v-for="(item, index) in noticeData">
class="close-btn" <div class="item_left">
v-if="searchData.searchKey != ''" <i class="i-tag" v-if="item.readFlag == 1">已读</i>
@click="searchData.searchKey = ''" <i class="i-tag" v-else>未读</i>
> </div>
<img <div class="item_right">
src="@/assets/img/shequ/close.png" <div class="item-date">
/> {{ item.createdTime }}
</div>
<div class="item-title">
{{ item.content }}
</div>
</div> </div>
</div> </div>
<div class="btn" @click="handleClickSearchBtn"> </div>
查一下
<div class="cnt" v-else>
<div class="empty">
<img src="~@/assets/images/shuju/renfang/index/empty.png" />
<span>暂无提醒～</span>
</div> </div>
</div> </div>
<!-- <div class="btn2" @click="handleClickSearchBtn('smart')"> </div>
<img src="@/assets/images/index/i-search.png" /> </div>
智能查询 <div class="m-box m-tb">
</div> --> <div class="wrap">
<div class="header">
<span>不满意事项月度趋势分析</span>
</div>
</div>
<div class="cnt">
<!-- 图表 -->
<div id="my_chart" style="width: 500px;height: 200px; position: relative;top:-10px"></div>
</div> </div>
</div> </div>
</div> </div>
<div class="g-row-right">
<div class="m-box m-pan"> <!-- -->
<div class="wrap"> <div class="m-box m-pan">
<div class="header"> <div class="header">
<img <span>当前组织名称概览</span>
src="@/assets/images/index/title-icon-sqzl.png" </div>
/> <p>{{ pandectData.deptName }}，<span v-if="pandectData.gridCount">划分为{{ pandectData.underCount }}个{{
<span>社区总览</span> pandectData.underName
}}，</span>现有房屋{{ pandectData.homeCount }}间、自住房屋{{ pandectData.selfStay }}间、
出租房屋{{ pandectData.rentOut }}间、
闲置房屋{{ pandectData.vacantHouse }}间、现有居民{{
pandectData.resiCount
}}户、{{
pandectData.totalResidents
}}人、其中常住人口{{
pandectData.permanentResiCount
}}人，流动人口{{
pandectData.floatingResiCount
}}人，各类群体分布如下：
</p>
<div>
<el-button-group class="btn_group">
<el-button type="primary" :plain="btnSelectA"
@click="handleClickResiCategory">居民分类统计</el-button>
<el-button type="primary" :plain="btnSelectB"
@click="handleClickIntelligentPrediction">智能预测</el-button>
</el-button-group>
</div> </div>
<div class="cnt"> <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.resiCount
}}人，其中常住人口{{
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>
<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" item, index
@click="handleClickCategory(item)" ) in resiCategory.list">
:key="item.code"
v-for="(
item, index
) in resiCategory.list"
>
<div> <div>
{{ {{
("0" + (index + 1)).substr(-2) ("0" + (index + 1)).substr(-2)
@ -132,11 +127,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,136 +138,17 @@
</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>
</div> </section>
<div class="g-row-right">
<div class="m-box m-tx">
<div class="wrap">
<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-date">
{{ item.createdTime }}
</div>
<div class="item-title">
{{ item.content }}
</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>
<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 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 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>
<fastcall ref="fastcall" /> <fastcall ref="fastcall" />
</div> </div>
@ -285,7 +159,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 },
@ -296,7 +170,8 @@ export default {
type: "jumin", type: "jumin",
searchKey: "", searchKey: "",
}, },
btnSelectA: false,
btnSelectB: true,
typePlaceholder: { typePlaceholder: {
jumin: "请输入姓名或联系电话或证件号", jumin: "请输入姓名或联系电话或证件号",
fangwu: "请输入小区名称或楼栋名称", fangwu: "请输入小区名称或楼栋名称",
@ -325,6 +200,54 @@ export default {
}, },
noticeData: [], noticeData: [],
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]
}
]
},
}; };
}, },
computed: { computed: {
@ -352,13 +275,28 @@ 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: {
searchDataTab(str){ initChart(){
var myChart = echarts.init(document.getElementById('my_chart'));
myChart.setOption(this.option)
},
handleClickResiCategory() {
this.btnSelectA = false
this.btnSelectB = true
},
handleClickIntelligentPrediction() {
this.btnSelectA = true
this.btnSelectB = false
},
searchDataTab(str) {
this.searchData.type = str; this.searchData.type = str;
}, },
handleClickCategory(item) { handleClickCategory(item) {
@ -390,15 +328,15 @@ export default {
this.$router.push({ this.$router.push({
path: "/main/shequ-chaxun" path: "/main/shequ-chaxun"
}); });
localStorage.setItem('homeSearchType',type) localStorage.setItem('homeSearchType', type)
localStorage.setItem('homeSearchKey',searchKey) localStorage.setItem('homeSearchKey', searchKey)
}, },
handleClickSearchBtn(str) { handleClickSearchBtn(str) {
const { const {
searchData: { type, searchKey }, searchData: { type, searchKey },
} = this; } = this;
if(str){ if (str) {
this.toSearchPage(type, searchKey); this.toSearchPage(type, searchKey);
return return
} }
@ -453,7 +391,7 @@ export default {
async getNoticeData() { async getNoticeData() {
const url = "/message/intelligentMessage/list"; const url = "/message/intelligentMessage/list";
let params = { let params = {
last: "6", last: "4",
}; };
const { data, code, msg } = await requestGet(url, params); const { data, code, msg } = await requestGet(url, params);
@ -502,4 +440,9 @@ export default {
}; };
</script> </script>
<style lang="scss" src="@/assets/scss/modules/index.scss" scoped></style> <style lang="scss" src="@/assets/scss/modules/index.scss" scoped>
#my_chart {
width: 500px;
height: 200px;
}
</style>

Write Preview
Loading…
Cancel
Save