首页样式

src/assets/scss/modules/index.scss

@@ -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;
-
+    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,17 +318,28 @@
                 }
             }
         }
+        ::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;

src/views/modules/home/index.vue

@@ -10,16 +10,10 @@
 						</div>
 
 						<div class="tabs">
-							<div
+							<div :class="{ 'z-on': searchData.type == 'jumin' }" @click="searchDataTab('jumin')">
-								:class="{ 'z-on': searchData.type == 'jumin' }"
-								@click="searchDataTab('jumin')"
-							>
 								查居民
 							</div>
-							<div
+							<div :class="{ 'z-on': searchData.type == 'fangwu' }" @click="searchDataTab('fangwu')">
-								:class="{ 'z-on': searchData.type == 'fangwu' }"
-								@click="searchDataTab('fangwu')"
-							>
 								查房屋
 							</div>
 						</div>
@@ -27,67 +21,62 @@
 						<div class="search">
 							<div class="search-input">
 								<div class="input">
-									<input
+									<input type="text" :placeholder="typePlaceholder[searchData.type]
-										type="text"
+										" v-model="searchData.searchKey" @keyup.enter="handleClickSearchBtn" />
-										:placeholder="
-											typePlaceholder[searchData.type]
-										"
-										v-model="searchData.searchKey"
-										@keyup.enter="handleClickSearchBtn"
-									/>
 
-									<div
+									<div class="close-btn" v-if="searchData.searchKey != ''"
-										class="close-btn"
+										@click="searchData.searchKey = ''">
-										v-if="searchData.searchKey != ''"
+										<img src="@/assets/img/shequ/close.png" />
-										@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-pan m-box">
-				<div class="m-box m-pan">
 					<div class="header">
-							<img
+						<img src="@/assets/images/index/title-icon-sqzl.png" />
-								src="@/assets/images/index/title-icon-sqzl.png"
-							/>
 						<span>社区总览</span>
 					</div>
-						<p>{{ pandectData.deptName }}，<span v-if="pandectData.gridCount">划分为{{ pandectData.underCount }}个{{
+					<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.selfStay }}间、
+	}}，</span>现有居民{{ pandectData.homeCount }}户、{{
-						出租房屋{{ pandectData.rentOut }}间、
-						闲置房屋{{ pandectData.vacantHouse }}间、现有居民{{
 	pandectData.resiCount
-						}}户、{{
+}}人，其中常住人口{{
-							pandectData.totalResidents
-						}}人、其中常住人口{{
 	pandectData.permanentResiCount
 }}人，流动人口{{
 	pandectData.floatingResiCount
 }}人，各类群体分布如下：
 								</p>
-						<div>
+
-							<el-button-group class="btn_group">
+								<div class="subtitle">
-								<el-button type="primary" :plain="btnSelectA"
+									<img src="@/assets/images/index/i-fxjg.png" />
-									@click="handleClickResiCategory">居民分类统计</el-button>
+									<span>分析结果</span>
-								<el-button type="primary" :plain="btnSelectB"
-									@click="handleClickIntelligentPrediction">智能预测</el-button>
-							</el-button-group>
 								</div>
-						<div class="cnt">	
+
+								<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="(
@@ -116,21 +105,17 @@
 											</div>
 										</div>
 									</div>
+								</el-tab-pane>
+								<el-tab-pane label="智能预测" name="zhineng">
+
+								</el-tab-pane>
+							</el-tabs>
+						</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 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,7 +161,7 @@
 					</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>
@@ -233,20 +217,24 @@ export default {
 
 			noticeData: [],
 
-			btnSelectA: false,
+			activeName: 'resi',
-			btnSelectB: true,
 
 			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: {
@@ -330,14 +318,6 @@ export default {
 				this.myChart.resize();
 			}
 		},
-		handleClickResiCategory() {
-			this.btnSelectA = false
-			this.btnSelectB = true
-		},
-		handleClickIntelligentPrediction() {
-			this.btnSelectA = true
-			this.btnSelectB = false
-		},
 		searchDataTab(str) {
 			this.searchData.type = str;
 		},
@@ -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);