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
765dd86d95
commit
dfb00fb71e
2 changed files with 152 additions and 154 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 44
      src/assets/scss/modules/index.scss
  2. 262
      src/views/modules/home/index.vue

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

@ -2,11 +2,15 @@
@import "../c/function";
.g-row {
padding: 10px 6px;
padding: 5px 6px;
display: flex;
height: 100%;
.g-row-left {
margin-right: auto;
width: calc(66%);
display: flex;
flex-direction: column;
justify-content: space-around;
}
.g-row-right {
margin-left: auto;
@ -211,12 +215,19 @@
.m-pan {
position: relative;
height: 488px;
box-sizing: border-box;
.cnt {
width: 100%;
height:calc( 100vh - 420px);
overflow: hidden;
.flex_box{
height:calc(100% - 30px);
width: 100%;
overflow: hidden;
.cnt {
margin-top: 20px;
display: flex;
overflow: hidden;
height: 100%;
.cnt-left {
box-sizing: border-box;
padding: 16px;
@ -229,7 +240,7 @@
font-weight: 400;
color: rgba(0, 0, 0, 0.85);
line-height: 24px;
height: 100%;
.subtitle {
padding: 4px 0;
font-size: 15px;
@ -251,12 +262,8 @@
}
}
.cnt-right {
// margin-left: auto;
width: 100%;
height: 287px;
overflow-y: auto;
.list {
margin-bottom: 71px;
.item {
margin-bottom: 30px;
display: flex;
@ -311,18 +318,29 @@
}
}
}
::v-deep .el-tabs__content {
overflow: scroll !important;
height: 100% !important;
}
}
}
}
.m-tx {
height: 466px;
margin-bottom: 13px;
width: 100%;
height:calc( 100vh - 430px);
overflow: hidden;
padding-right: 5px;
box-sizing: border-box;
.cnt {
box-sizing: border-box;
margin-top: 12px;
border-radius: 2px;
overflow: hidden;
overflow:hidden scroll ;
height: calc(100% - 50px);
.empty {
text-align: center;
color: #999;

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

@ -10,16 +10,10 @@
</div>
<div class="tabs">
<div
:class="{ 'z-on': searchData.type == 'jumin' }"
@click="searchDataTab('jumin')"
>
<div :class="{ 'z-on': searchData.type == 'jumin' }" @click="searchDataTab('jumin')">
查居民
</div>
<div
:class="{ 'z-on': searchData.type == 'fangwu' }"
@click="searchDataTab('fangwu')"
>
<div :class="{ 'z-on': searchData.type == 'fangwu' }" @click="searchDataTab('fangwu')">
查房屋
</div>
</div>
@ -27,110 +21,101 @@
<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"
/>
<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 class="btn2" @click="handleClickSearchBtn('smart')">
<img src="@/assets/images/index/i-search.png" />
智能查询
</div> -->
</div>
</div>
</div>
<div class="m-box m-pan">
<div class=" m-pan m-box">
<div class="header">
<img
src="@/assets/images/index/title-icon-sqzl.png"
/>
<span>社区总览</span>
</div>
<p>{{ pandectData.deptName }}，<span v-if="pandectData.gridCount">划分为{{ pandectData.underCount }}个{{
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 class="cnt">
<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>
<img src="@/assets/images/index/title-icon-sqzl.png" />
<span>社区总览</span>
</div>
<div class="flex_box">
<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>
<el-tabs v-model="activeName" style="width: calc(100% - 240px - 40px);margin-left: auto;">
<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">
</el-tab-pane>
</el-tabs>
</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 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"
@ -165,7 +150,6 @@
</div>
</div>
</div>
</div>
<div class="m-box m-tb">
<div class="wrap">
<div class="header">
@ -177,10 +161,10 @@
</div>
<div class="more">更多></div>
<div class="cnt">
<div id="my_chart" style="width: 100%;height: 200px; position: relative;top:-10px"></div>
<div id="my_chart" style="width: 100%;height: 230px; position: relative;top:-10px"></div>
</div>
</div>
</div>
</div>
</div>
<fastcall ref="fastcall" />
</div>
@ -233,25 +217,29 @@ export default {
noticeData: [],
btnSelectA: false,
btnSelectB: true,
activeName: 'resi',
option : {
option: {
tooltip: {
trigger: 'axis'
},
legend: {
data: ['12345不满意数', '省满意调查不满意数', '社区自评不满意数']
data: ['12345不满意数', '省满意调查不满意数', '社区自评不满意数'],
bottom: '10%',
icon: 'rect',
itemWidth: 20,
itemHeight: 5,
itemGap: 20,
},
grid: {
left: '3%',
right: '4%',
bottom: '8%',
bottom: '25%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
saveAsImage: {}
}
},
xAxis: {
@ -264,26 +252,26 @@ export default {
},
series: [
{
name: '12345不满意数',
type: 'line',
stack: 'Total',
data: [120, 132, 101, 134, 90, 230, 210]
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: [220, 182, 191, 234, 290, 330, 310]
},
{
name: '社区自评不满意数',
type: 'line',
stack: 'Total',
data: [150, 232, 201, 154, 190, 330, 410]
name: '社区自评不满意数',
type: 'line',
stack: 'Total',
data: [150, 232, 201, 154, 190, 330, 410]
}
]
},
myChart:{}
myChart: {}
}
},
computed: {
@ -311,7 +299,7 @@ export default {
},
mounted() {
this.getApiData();
this.$nextTick(()=>{
this.$nextTick(() => {
this.initChart()
})
console.log(
@ -320,25 +308,17 @@ export default {
);
},
methods: {
initChart(){
this.myChart = echarts.init(document.getElementById('my_chart'));
this.myChart.setOption(this.option)
window.addEventListener('resize', this.handleWindowResize);
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();
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;
},
handleClickCategory(item) {
@ -350,13 +330,13 @@ export default {
});
},
async readClearOne(item){
console.log("item",item)
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){
const { data, code, msg } = await requestPost(url)
if (code == 0) {
this.getNoticeData()
}else if(code >= 8000){
} else if (code >= 8000) {
this.$message.error(msg)
}
},
@ -380,15 +360,15 @@ export default {
this.$router.push({
path: "/main/shequ-chaxun"
});
localStorage.setItem('homeSearchType',type)
localStorage.setItem('homeSearchKey',searchKey)
localStorage.setItem('homeSearchType', type)
localStorage.setItem('homeSearchKey', searchKey)
},
handleClickSearchBtn(str) {
const {
searchData: { type, searchKey },
} = this;
if(str){
if (str) {
this.toSearchPage(type, searchKey);
return
}
@ -443,7 +423,7 @@ export default {
async getNoticeData() {
const url = "/message/intelligentMessage/list";
let params = {
last: "6",
last: "10",
};
const { data, code, msg } = await requestGet(url, params);

Write Preview
Loading…
Cancel
Save