From 845581c6372456620cad10652c8b40a0b7e49099 Mon Sep 17 00:00:00 2001 From: dai <851733175@qq.com> Date: Mon, 9 Jan 2023 14:45:51 +0800 Subject: [PATCH] =?UTF-8?q?=E6=90=9C=E7=B4=A2=E6=A8=A1=E5=9D=97=20?= =?UTF-8?q?=E7=94=BB=E7=94=BB=E7=95=8C=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/scss/dataBoard/renfang/index.scss | 139 ++++++++++- src/views/dataBoard/renfang/index.vue | 241 +++++++++++++++---- 2 files changed, 337 insertions(+), 43 deletions(-) diff --git a/src/assets/scss/dataBoard/renfang/index.scss b/src/assets/scss/dataBoard/renfang/index.scss index 91deae30c..bfa76a3a8 100644 --- a/src/assets/scss/dataBoard/renfang/index.scss +++ b/src/assets/scss/dataBoard/renfang/index.scss @@ -12,7 +12,7 @@ } .g-center { position: relative; - width: 800px; + width: 820px; } .g-right { width: 480px; @@ -71,6 +71,143 @@ } } } + + .card { + position: absolute; + top: 0; + left: 0; + z-index: 71; + width: 100%; + height: 386px; + background: #00023a; + box-shadow: inset 0px 0px 40px 0px rgba(26, 149, 255, 0.45); + border-radius: 4px; + border: 1px solid #1a95ff; + + .card-input { + display: flex; + padding: 10px; + align-items: center; + + .i-div { + margin-left: auto; + margin-right: 10px; + width: 1px; + height: 12px; + background: rgba(255, 255, 255, 0.45); + border-radius: 1px; + } + + input { + line-height: 40px; + height: 40px; + width: 600px; + font-size: 16px; + font-family: PingFangSC-Regular, PingFang SC; + font-weight: 400; + color: rgba(255, 255, 255, 0.85); + line-height: 22px; + background: transparent; + border: none; + &::placeholder { + color: rgba(255, 255, 255, 0.65); + } + } + + .card-btn { + padding: 10px; + cursor: pointer; + img { + display: block; + width: 16px; + } + } + } + + .card-show { + .card-tabs { + border-top: 1px solid rgba(26, 149, 255, 0.45); + border-bottom: 1px solid rgba(26, 149, 255, 0.45); + line-height: 48px; + font-size: 16px; + font-family: PingFangSC-Regular, PingFang SC; + font-weight: 400; + color: #ffffff; + cursor: pointer; + display: flex; + align-items: center; + + > div { + padding: 0 17px; + + &.z-on, + &:hover { + color: #1a95ff; + } + } + } + + .card-empty { + > img { + display: block; + width: 120px; + margin: 0 auto; + margin-top: 80px; + } + > span { + margin-top: 8px; + display: block; + font-size: 14px; + font-family: PingFangSC-Regular, PingFang SC; + font-weight: 400; + color: rgba(255, 255, 255, 0.65); + line-height: 20px; + text-align: center; + } + } + + .card-list { + margin: 24px 16px; + height: 230px; + overflow-y: auto; + @include scrollBar; + .card-item { + display: flex; + align-items: center; + padding: 0 24px; + width: 100%; + height: 40px; + line-height: 40px; + background: rgba(26, 149, 255, 0.15); + font-size: 14px; + font-family: PingFangSC-Regular, PingFang SC; + font-weight: 400; + color: #ffffff; + cursor: pointer; + opacity: 0.85; + &:nth-child(2n) { + background: transparent; + } + .i-arrow { + margin-left: auto; + width: 16px; + &.z-on { + display: none; + } + } + &:hover { + opacity: 1; + .i-arrow { + display: none; + &.z-on { + display: block; + } + } + } + } + } + } + } } .m-box { diff --git a/src/views/dataBoard/renfang/index.vue b/src/views/dataBoard/renfang/index.vue index 4de148365..e76fe82ba 100644 --- a/src/views/dataBoard/renfang/index.vue +++ b/src/views/dataBoard/renfang/index.vue @@ -3,8 +3,10 @@
- +
房屋概览
@@ -15,8 +17,10 @@
- +
居民概览
@@ -30,8 +34,10 @@
- +
老年人
@@ -41,8 +47,10 @@
- +
青少年
@@ -52,8 +60,10 @@
- +
志愿者
@@ -63,8 +73,10 @@
- +
党员
@@ -74,8 +86,10 @@
- +
失业人员
@@ -86,25 +100,115 @@
- +
-
- - +
+ + 点击搜索
+ +
+
+
+ +
+ + + +
+ +
+ +
+
+
+
+
+ 全部 +
+
+ 居民 +
+
+ 小区 +
+
+ 楼栋 +
+
+ 房屋 +
+
+ +
+
+ {{ item.title }} + + +
+
+ +
+ + 没有找到搜索结果～ +
+
+
- +
居民分类分析
@@ -115,9 +219,11 @@
-
+
{{ ("0" + (index + 1)).substr(-2) }}.
{{ item.name }}
@@ -128,10 +234,11 @@
较上月 - - + + {{ item.count }} 人
@@ -143,8 +250,10 @@
- +
数字社区
@@ -155,8 +264,10 @@
- +
人口预警
@@ -166,12 +277,14 @@
- +
人口分析
-
+
@@ -192,7 +305,7 @@ import getQueryPara from "dai-js/modules/getQueryPara"; export default { components: { gridMap, fwgl, jmgl, rkfx, rkyj, szsq }, - data () { + data() { return { orgData: {}, //当前组织对象 orgId: "", @@ -200,9 +313,49 @@ export default { subAgencyArray: [], warningData: [], + + searchModule: { + displayedCard: false, + keyword: "", + resultTab: "all", // all resi + result: [ + { + id: 1, + title: "四季景园", + }, + { + id: 11, + title: "四季景园-四号楼", + }, + { + id: 1111, + title: "四季景园-四号楼-1单元", + }, + { + id: 111111, + title: "四季景园-四号楼-1单元-101", + }, + { + id: 12342, + title: "四季景园-2单元", + }, + { + id: 133, + title: "四季景园-2单元-2号楼-201", + }, + { + id: 122, + title: "四季景园2", + }, + { + id: 1312, + title: "四季景园4", + }, + ], + }, }; }, - async mounted () { + async mounted() { const queryOrgId = getQueryPara("orgId"); const queryOrgLevel = getQueryPara("orgLevel"); console.log("orgId", queryOrgId); @@ -216,8 +369,12 @@ export default { this.getWarningList(); }, methods: { + handleSearch() { + console.log(this.searchModule); + }, + //加载组织数据 - async getWarningList () { + async getWarningList() { const url = "/epmetuser/statsresiwarn/list"; let params = { id: this.orgData.id, @@ -241,7 +398,7 @@ export default { }, //加载组织数据 - async loadOrgData () { + async loadOrgData() { const url = "/gov/org/agency/maporg"; let params = { orgId: this.orgId,