elink-star
/
epmet-work-pc
13
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

搜索模块 画画界面

V1.0
dai 3 years ago
parent
695979b48c
commit
845581c637
2 changed files with 337 additions and 43 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. 139
      src/assets/scss/dataBoard/renfang/index.scss
  2. 241
      src/views/dataBoard/renfang/index.vue

139
src/assets/scss/dataBoard/renfang/index.scss
View File

@ -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 {

241
src/views/dataBoard/renfang/index.vue
View File

@ -3,8 +3,10 @@
<div class="g-left">
<div class="m-box">
<div class="box-title">
<img src="~@/assets/images/shuju/main/card-title-bg-480.png"
class="box-title-bg" />
<img
src="~@/assets/images/shuju/main/card-title-bg-480.png"
class="box-title-bg"
/>
<div class="box-title-txt">房屋概览</div>
</div>
@ -15,8 +17,10 @@
<div class="m-box">
<div class="box-title">
<img src="~@/assets/images/shuju/main/card-title-bg-480.png"
class="box-title-bg" />
<img
src="~@/assets/images/shuju/main/card-title-bg-480.png"
class="box-title-bg"
/>
<div class="box-title-txt">居民概览</div>
</div>
@ -30,8 +34,10 @@
<div class="m-map">
<div class="m-per">
<div class="item">
<img class="item-icon"
src="~@/assets/images/shuju/renfang/index/per/lnr.png" />
<img
class="item-icon"
src="~@/assets/images/shuju/renfang/index/per/lnr.png"
/>
<div class="item-info">
<div>老年人</div>
<div>
@ -41,8 +47,10 @@
</div>
</div>
<div class="item">
<img class="item-icon"
src="~@/assets/images/shuju/renfang/index/per/qsn.png" />
<img
class="item-icon"
src="~@/assets/images/shuju/renfang/index/per/qsn.png"
/>
<div class="item-info">
<div>青少年</div>
<div>
@ -52,8 +60,10 @@
</div>
</div>
<div class="item">
<img class="item-icon"
src="~@/assets/images/shuju/renfang/index/per/zyz.png" />
<img
class="item-icon"
src="~@/assets/images/shuju/renfang/index/per/zyz.png"
/>
<div class="item-info">
<div>志愿者</div>
<div>
@ -63,8 +73,10 @@
</div>
</div>
<div class="item">
<img class="item-icon"
src="~@/assets/images/shuju/renfang/index/per/dy.png" />
<img
class="item-icon"
src="~@/assets/images/shuju/renfang/index/per/dy.png"
/>
<div class="item-info">
<div>党员</div>
<div>
@ -74,8 +86,10 @@
</div>
</div>
<div class="item">
<img class="item-icon"
src="~@/assets/images/shuju/renfang/index/per/syry.png" />
<img
class="item-icon"
src="~@/assets/images/shuju/renfang/index/per/syry.png"
/>
<div class="item-info">
<div>失业人员</div>
<div>
@ -86,25 +100,115 @@
</div>
</div>
<grid-map v-if="orgData.id"
@clickAgency="clickAgencyItem"
:srcGridData="orgData" />
<grid-map
v-if="orgData.id"
@clickAgency="clickAgencyItem"
:srcGridData="orgData"
/>
</div>
<div class="m-search">
<div class="btn">
<img src="~@/assets/images/shuju/renfang/index/search/btn-bg.png"
class="btn-bg" />
<img src="~@/assets/images/shuju/renfang/index/search/btn-bg-hover.png"
class="btn-bg-hover" />
<div class="btn" @click="searchModule.displayedCard = true">
<img
src="~@/assets/images/shuju/renfang/index/search/btn-bg.png"
class="btn-bg"
/>
<img
src="~@/assets/images/shuju/renfang/index/search/btn-bg-hover.png"
class="btn-bg-hover"
/>
<span>点击搜索</span>
</div>
<div class="card" v-show="searchModule.displayedCard">
<div class="card-input">
<div class="card-btn">
<img
src="~@/assets/images/shuju/renfang/index/search/search.png"
/>
</div>
<input
type="text"
placeholder="输入关键词搜索"
@key.enter="handleSearch"
v-model="searchModule.keyword"
/>
<div class="i-div"></div>
<div class="card-btn" @click="searchModule.displayedCard = false">
<img
src="~@/assets/images/shuju/renfang/index/search/close.png"
/>
</div>
</div>
<div class="card-show">
<div class="card-tabs">
<div
:class="{ 'z-on': searchModule.resultTab == 'all' }"
@click="searchModule.resultTab = 'all'"
>
全部
</div>
<div
:class="{ 'z-on': searchModule.resultTab == 'resi' }"
@click="searchModule.resultTab = 'resi'"
>
居民
</div>
<div
:class="{ 'z-on': searchModule.resultTab == 'all' }"
@click="searchModule.resultTab = 'all'"
>
小区
</div>
<div
:class="{ 'z-on': searchModule.resultTab == 'all' }"
@click="searchModule.resultTab = 'all'"
>
楼栋
</div>
<div
:class="{ 'z-on': searchModule.resultTab == 'all' }"
@click="searchModule.resultTab = 'all'"
>
房屋
</div>
</div>
<div class="card-list" v-if="searchModule.result.length > 0">
<div
class="card-item"
:key="item.id"
v-for="item in searchModule.result"
>
<span>{{ item.title }}</span>
<img
src="~@/assets/images/shuju/renfang/index/search/arrow.png"
class="i-arrow"
/>
<img
src="~@/assets/images/shuju/renfang/index/search/arrow-on.png"
class="i-arrow z-on"
/>
</div>
</div>
<div class="card-empty" v-else>
<img src="~@/assets/images/shuju/renfang/index/empty.png" />
<span>没有找到搜索结果～</span>
</div>
</div>
</div>
</div>
<div class="m-box m-cate">
<div class="box-title">
<img src="~@/assets/images/shuju/main/card-title-bg-800.png"
class="box-title-bg" />
<img
src="~@/assets/images/shuju/main/card-title-bg-800.png"
class="box-title-bg"
/>
<div class="box-title-txt">居民分类分析</div>
<div class="box-title-btn">
@ -115,9 +219,11 @@
</div>
<div class="list">
<div class="item"
:key="item.code"
v-for="(item, index) in warningData">
<div
class="item"
:key="item.code"
v-for="(item, index) in warningData"
>
<div>{{ ("0" + (index + 1)).substr(-2) }}.</div>
<div class="item-name">{{ item.name }}</div>
<div class="item-count">
@ -128,10 +234,11 @@
</div>
<div class="item-per">
<span>较上月</span>
<img v-if="false"
src="~@/assets/images/shuju/renfang/index/up.png" />
<img v-else
src="~@/assets/images/shuju/renfang/index/down.png" />
<img
v-if="false"
src="~@/assets/images/shuju/renfang/index/up.png"
/>
<img v-else src="~@/assets/images/shuju/renfang/index/down.png" />
<b>{{ item.count }}</b>
<span>人</span>
</div>
@ -143,8 +250,10 @@
<div class="g-right">
<div class="m-box">
<div class="box-title">
<img src="~@/assets/images/shuju/main/card-title-bg-480.png"
class="box-title-bg" />
<img
src="~@/assets/images/shuju/main/card-title-bg-480.png"
class="box-title-bg"
/>
<div class="box-title-txt">数字社区</div>
</div>
@ -155,8 +264,10 @@
<div class="m-box">
<div class="box-title">
<img src="~@/assets/images/shuju/main/card-title-bg-480.png"
class="box-title-bg" />
<img
src="~@/assets/images/shuju/main/card-title-bg-480.png"
class="box-title-bg"
/>
<div class="box-title-txt">人口预警</div>
</div>
@ -166,12 +277,14 @@
</div>
<div class="m-box">
<div class="box-title">
<img src="~@/assets/images/shuju/main/card-title-bg-480.png"
class="box-title-bg" />
<img
src="~@/assets/images/shuju/main/card-title-bg-480.png"
class="box-title-bg"
/>
<div class="box-title-txt">人口分析</div>
</div>
<div class="m-subbox ">
<div class="m-subbox">
<rkfx :orgId="orgData.id"></rkfx>
</div>
</div>
@ -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,

Write Preview
Loading…
Cancel
Save