From 1691f5d002c0d4897fb54641fd0d0c96f8eb6ab9 Mon Sep 17 00:00:00 2001
From: mk <2403457699@qq.com>
Date: Mon, 21 Aug 2023 18:04:37 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A6=96=E9=A1=B5=E6=A0=B7=E5=BC=8F=E6=9B=B4?=
 =?UTF-8?q?=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/scss/modules/index.scss | 112 +++++---
 src/views/modules/home/index.vue   | 427 +++++++++++++----------------
 2 files changed, 254 insertions(+), 285 deletions(-)

diff --git a/src/assets/scss/modules/index.scss b/src/assets/scss/modules/index.scss
index c3ff9044a..df6d8e02d 100644
--- a/src/assets/scss/modules/index.scss
+++ b/src/assets/scss/modules/index.scss
@@ -3,15 +3,20 @@
 
 .g-row {
     padding: 10px 6px;
-    display: flex;
-    .g-row-left {
-        margin-right: auto;
-        width: calc(66%);
-    }
-    .g-row-right {
-        margin-left: auto;
-        width: calc(34% - 16px);
+   
+    section{
+        display: flex;
+
+        .g-row-left {
+            margin-right: auto;
+            width: calc(34% - 16px);
+        }
+        .g-row-right {
+            margin-left: auto;
+            width: calc(66%);
+        }
     }
+   
 }
 
 .m-box {
@@ -25,16 +30,9 @@
         padding: 4px 0;
         font-size: 15px;
         font-family: PingFangSC-Medium, PingFang SC;
-        font-weight: 500;
+        font-weight: 600;
         color: rgba(0, 0, 0, 0.85);
         line-height: 17px;
-
-        > img {
-            vertical-align: bottom;
-            margin-right: 5px;
-            width: 17px;
-            height: 17px;
-        }
     }
 
     .more {
@@ -70,12 +68,15 @@
         font-weight: 500;
         color: $c1;
         line-height: 47px;
+        text-align: center;
     }
 
     .tabs {
         margin-top: 24px;
         display: flex;
         align-items: center;
+        width: 60%;
+        margin: 0 auto;
         > div {
             position: relative;
             margin-right: 30px;
@@ -128,7 +129,7 @@
             border-radius: 4px;
             border: 1px solid $c1;
             display: flex;
-
+            margin: 0 auto;
             .input {
                 position: relative;
                 width: calc(100% - 100px);
@@ -211,7 +212,7 @@
 
 .m-pan {
     position: relative;
-    height: 488px;
+    height: 510px;
     box-sizing: border-box;
 
     .cnt {
@@ -251,14 +252,14 @@
             }
         }
         .cnt-right {
-            margin-left: auto;
-            width: calc(100% - 240px - 40px);
-            height: 402px;
+            // margin-left: auto;
+            width: calc(100%);
+            height: 320px;
             overflow-y: auto;
 
             .list {
                 .item {
-                    margin-bottom: 30px;
+                    margin-bottom: 19px;
                     display: flex;
                     align-items: center;
                     font-size: 14px;
@@ -297,7 +298,7 @@
 
                     .item-progress {
                         margin-right: 15px;
-                        width: 60%;
+                        width: 74%;
                         height: 24px;
                         background: #e6f0ff;
                         border-radius: 1px;
@@ -315,7 +316,7 @@
 }
 
 .m-tx {
-    height: 466px;
+    height: 250px;
     margin-bottom: 13px;
     .cnt {
         box-sizing: border-box;
@@ -334,36 +335,61 @@
         }
 
         .item {
-            padding: 16px 0 12px;
+            padding: 0px 0 7px;
             border-bottom: 1px dashed #f0f5fa;
             &:last-child {
                 border-bottom: none;
             }
-            .item-title {
-                @include toe;
-                height: 22px;
-                font-size: 14px;
-                font-family: PingFangSC-Regular, PingFang SC;
-                font-weight: 400;
-                color: rgba(0, 0, 0, 0.85);
-                line-height: 22px;
-                &:hover {
-                    color: $c1;
-                    cursor: pointer;
+            display: flex;
+            align-items: center;
+            .item_right{
+                flex: 1;
+                .item-title {
+                    @include toe;
+                    height: 22px;
+                    font-size: 14px;
+                    font-family: PingFangSC-Regular, PingFang SC;
+                    font-weight: 400;
+                    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 {
-                font-size: 12px;
-                font-family: PingFangSC-Regular, PingFang SC;
-                font-weight: 400;
-                color: rgba(0, 0, 0, 0.45);
-                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 {
-    height: 302px;
+    height: 247px;
 
     .cnt {
         box-sizing: border-box;
diff --git a/src/views/modules/home/index.vue b/src/views/modules/home/index.vue
index 8c2277bc2..127dac563 100644
--- a/src/views/modules/home/index.vue
+++ b/src/views/modules/home/index.vue
@@ -2,123 +2,118 @@
 <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 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="tabs">
-							<div
-								:class="{ 'z-on': searchData.type == 'jumin' }"
-								@click="searchDataTab('jumin')"
-							>
-								查居民
+								<div class="close-btn" v-if="searchData.searchKey != ''" @click="searchData.searchKey = ''">
+									<img src="@/assets/img/shequ/close.png" />
+								</div>
 							</div>
-							<div
-								:class="{ 'z-on': searchData.type == 'fangwu' }"
-								@click="searchDataTab('fangwu')"
-							>
-								查房屋
+							<div class="btn" @click="handleClickSearchBtn">
+								查一下
 							</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>
+			<section>
+				<div class="g-row-left">
+					<div class="m-box m-tx">
+						<div class="wrap">
+							<div class="header">
+								<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_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">
+											{{ item.content }}
+										</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 class="btn2" @click="handleClickSearchBtn('smart')">
-								<img src="@/assets/images/index/i-search.png" />
-								智能查询
-							</div> -->
+						</div>
+					</div>
+					<div class="m-box m-tb">
+						<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 class="m-box m-pan">
-					<div class="wrap">
+				<div class="g-row-right">
+					<!--  -->
+					<div class="m-box m-pan">
 						<div class="header">
-							<img
-								src="@/assets/images/index/title-icon-sqzl.png"
-							/>
-							<span>社区总览</span>
+							<span>当前组织名称概览</span>
 						</div>
-						<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>
+						<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 class="item" @click="handleClickCategory(item)" :key="item.code" v-for="(
+												item, index
+											) in resiCategory.list">
 										<div>
 											{{
 												("0" + (index + 1)).substr(-2)
@@ -132,11 +127,9 @@
 											{{ item.count }}人
 										</div>
 										<div class="item-progress">
-											<b
-												:style="{
-													width: item.per + '%',
-												}"
-											></b>
+											<b :style="{
+												width: item.per + '%',
+											}"></b>
 										</div>
 										<div class="item-per">
 											{{ item.per }} %
@@ -145,136 +138,17 @@
 								</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 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>
+			</section>
 		</div>
 		<fastcall ref="fastcall" />
 	</div>
@@ -285,7 +159,7 @@ 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 },
 
@@ -296,7 +170,8 @@ export default {
 				type: "jumin",
 				searchKey: "",
 			},
-
+			btnSelectA: false,
+			btnSelectB: true,
 			typePlaceholder: {
 				jumin: "请输入姓名或联系电话或证件号",
 				fangwu: "请输入小区名称或楼栋名称",
@@ -325,6 +200,54 @@ export default {
 			},
 
 			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: {
@@ -352,13 +275,28 @@ export default {
 	},
 	mounted() {
 		this.getApiData();
+		this.$nextTick(()=>{
+			this.initChart()
+		})
 		console.log(
 			"dynamicMenuRoutes----------------------------",
 			this.$store.state.sidebarMenuList
 		);
 	},
 	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;
 		},
 		handleClickCategory(item) {
@@ -390,15 +328,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
 			}
@@ -453,7 +391,7 @@ export default {
 		async getNoticeData() {
 			const url = "/message/intelligentMessage/list";
 			let params = {
-				last: "6",
+				last: "4",
 			};
 
 			const { data, code, msg } = await requestGet(url, params);
@@ -502,4 +440,9 @@ export default {
 };
 </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>