elink-star
/
ShibeiWorkPlatform_Frontend
11
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

11

shibei_master
jiangyy 3 years ago
parent
cb50f7c3ac
commit
900884aaf8
2 changed files with 271 additions and 135 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 173
      src/assets/scss/modules/visual/fiveLayerMap.scss
  2. 225
      src/views/modules/visual/communityGovern/fivelayers/mapIndex.vue

173
src/assets/scss/modules/visual/fiveLayerMap.scss
View File

@ -49,7 +49,7 @@
} }
.div_data { .div_data {
flex: 0 0 622px; flex: 0 0 600px;
margin-left: 12px; margin-left: 12px;
.div_search { .div_search {
@ -115,7 +115,7 @@
background-size: 100% 100%; background-size: 100% 100%;
.div_coverage{ .div_coverage{
padding: 30px 20px 30px 20px; padding: 30px 10px 32px 10px;
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
@ -143,92 +143,65 @@
.div_category { .div_category {
box-sizing: border-box; box-sizing: border-box;
width: 100%; height:238px;
padding:0 20px 20px;
.category_item {
.info_loading { margin-bottom: 15px;
margin-top: 50px;
}
.info_tip {
padding: 31px 0 0 19px;
display: flex; display: flex;
> img { justify-content: start;
height: 34px;
width: 46px;
}
.tip_title { // margin:auto;
line-height: 34px;
margin-left: 7px;
font-size: 22px;
font-family: PingFang SC;
font-weight: 800;
color: #ffffff;
}
}
.info_list {
margin-top: 9px; .list_item {
.item { // padding: 18px 59px 0;
.item_line { justify-content: start;
margin-top: 13px; flex:0 0 135px;
margin-left: 24px;
width: 517px; > img {
height: 0px; height: 18px;
border: 1px dotted #1797ff31; width: 18px;
border-width: 0.5px;
} }
.last_line { .item_content{
border: 1px dotted #1797ff00; width:100px;
margin-left:8px;
font-size: 16px;
font-family: PingFang SC;
font-weight: 400;
color: #D2E7FF;
} }
.list_item {
display: flex; .item_content_sel{
padding: 18px 59px 0; color: #99c7fb;
justify-content: space-between;
.list_item_col {
flex: 0 0 240px;
display: flex;
> img {
height: 76px;
width: 76px;
}
.item_content {
margin-left: 10px;
height: 76px;
display: flex;
flex-direction: column;
justify-content: center;
.item_label {
font-size: 18px;
font-family: PingFang SC;
font-weight: 400;
color: #ffffff;
}
.item_count {
margin-top: 10px;
font-size: 28px;
font-family: PingFang SC;
font-weight: bold;
color: #00fffc;
}
}
}
} }
}
.list_item:hover{
cursor: pointer;
}
::v-deep .el-popper { ::v-deep .el-popper {
padding: 0px; padding: 0px;
} }
// //
}
}
}
.div_category {
/deep/ .el-scrollbar__wrap {
overflow-x: hidden !important;
} }
} }
} }
.div_info { .div_info {
@ -283,37 +256,33 @@
padding: 18px 59px 0; padding: 18px 59px 0;
justify-content: space-between; justify-content: space-between;
.list_item_col { > img {
flex: 0 0 240px; height: 36px;
display: flex; width: 36px;
}
> img { .item_content {
height: 76px; margin-left: 10px;
width: 76px; height: 76px;
display: flex;
flex-direction: column;
justify-content: center;
.item_label {
font-size: 18px;
font-family: PingFang SC;
font-weight: 400;
color: #ffffff;
} }
.item_count {
.item_content { margin-top: 10px;
margin-left: 10px; font-size: 28px;
height: 76px; font-family: PingFang SC;
display: flex; font-weight: bold;
flex-direction: column; color: #00fffc;
justify-content: center;
.item_label {
font-size: 18px;
font-family: PingFang SC;
font-weight: 400;
color: #ffffff;
}
.item_count {
margin-top: 10px;
font-size: 28px;
font-family: PingFang SC;
font-weight: bold;
color: #00fffc;
}
} }
} }
} }
::v-deep .el-popper { ::v-deep .el-popper {
@ -324,11 +293,7 @@
} }
} }
.div_tips {
/deep/ .el-scrollbar__wrap {
overflow-x: hidden !important;
}
}
} }
} }

225
src/views/modules/visual/communityGovern/fivelayers/mapIndex.vue
View File

@ -35,32 +35,29 @@
<span>{{item.label}}</span> <span>{{item.label}}</span>
</div> </div>
</div> </div>
<div class="div_category">
<el-scrollbar style="height:98%">
<el-scrollbar style="height:98%">
<div class="div_category">
<div v-for="(item,index) in categoryListshow" <div v-for="(item,index) in categoryListshow"
:key="index" :key="index"
class="category_item"> class="category_item">
<div class="list_item">
<div v-for="(colItem,colIndex) in item"
:key="colIndex"
class="list_item_col"
@click="handleTo(colItem)">
<img :src="colItem.dataIcon"
alt />
<div class="item_content">
<div class="item_label">{{colItem.categoryName}}</div>
</div> <div v-for="(colItem,colIndex) in item"
:key="colIndex"
class="list_item"
@click="handleClickCategory(index,colIndex)">
<img :src="colItem.dataIcon"
alt />
<span :class="['item_content',colItem.sel?'item_content_sel':'']">{{colItem.categoryName}}
</span>
</div>
</div> </div>
<div :class="['item_line',{'last_line':index==(categoryListshow.length-1)}]"></div>
</div> </div>
</div> </el-scrollbar>
</el-scrollbar> </div>
</div> </div>
<div class="div_info"> <div class="div_info">
<!-- <el-scrollbar style="height:98%"> <!-- <el-scrollbar style="height:98%">
@ -231,7 +228,6 @@ const vueGis = {
name: 'HomeMap', name: 'HomeMap',
data () { data () {
return { return {
centerPoint: [],//中心点位置 centerPoint: [],//中心点位置
zoom: 14,//缩放范围：区14 zoom: 14,//缩放范围：区14
minZoom: 1,//最小缩放 minZoom: 1,//最小缩放
@ -345,8 +341,20 @@ const vueGis = {
}, },
//点击类别 //点击类别
handleClickCategory (index) { handleClickCategory (index, colIndex) {
this.categoryListshow[index][colIndex].sel = !this.coverageTypesList[index].sel
this.categoryList[index].sel = !this.coverageTypesList[index].sel
let item = this.coverageTypesList[index]
this.$set(this.coverageTypesList, index, item)
this.coverageTypes = []
this.coverageTypesList.forEach(element => {
if (element.select) {
this.coverageTypes.push(element.value)
}
});
}, },
async loadCategoryList () { async loadCategoryList () {
@ -360,26 +368,189 @@ const vueGis = {
const { data, code, msg } = await requestPost(url, params) const { data, code, msg } = await requestPost(url, params)
if (code === 0) { if (code === 0) {
this.categoryList = data // this.categoryList = data
this.categoryList = [
{
categoryKey: "0",
categoryName: "deserunt"
},
{
categoryKey: "1",
categoryName: "deserunt"
},
{
categoryKey: "2",
categoryName: "deserunt"
},
{
categoryKey: "3",
categoryName: "deserunt"
},
{
categoryKey: "4",
categoryName: "deserunt"
},
{
categoryKey: "0",
categoryName: "deserunt"
},
{
categoryKey: "1",
categoryName: "deserunt"
},
{
categoryKey: "2",
categoryName: "deserunt"
},
{
categoryKey: "3",
categoryName: "deserunt"
},
{
categoryKey: "4",
categoryName: "deserunt"
},
{
categoryKey: "0",
categoryName: "deserunt"
},
{
categoryKey: "1",
categoryName: "deserunt"
},
{
categoryKey: "2",
categoryName: "deserunt"
},
{
categoryKey: "3",
categoryName: "deserunt"
},
{
categoryKey: "4",
categoryName: "deserunt"
},
{
categoryKey: "0",
categoryName: "deserunt"
},
{
categoryKey: "1",
categoryName: "deserunt"
},
{
categoryKey: "2",
categoryName: "deserunt"
},
{
categoryKey: "3",
categoryName: "deserunt"
},
{
categoryKey: "4",
categoryName: "deserunt"
},
{
categoryKey: "0",
categoryName: "deserunt"
},
{
categoryKey: "1",
categoryName: "deserunt"
},
{
categoryKey: "2",
categoryName: "deserunt"
},
{
categoryKey: "3",
categoryName: "deserunt"
},
{
categoryKey: "4",
categoryName: "deserunt"
},
{
categoryKey: "0",
categoryName: "deserunt"
},
{
categoryKey: "1",
categoryName: "deserunt"
},
{
categoryKey: "2",
categoryName: "deserunt"
},
{
categoryKey: "3",
categoryName: "deserunt"
},
{
categoryKey: "4",
categoryName: "deserunt"
},
{
categoryKey: "0",
categoryName: "deserunt"
},
{
categoryKey: "1",
categoryName: "deserunt"
},
{
categoryKey: "2",
categoryName: "deserunt"
},
{
categoryKey: "3",
categoryName: "deserunt"
},
{
categoryKey: "4",
categoryName: "机关直属部门"
},
{
categoryKey: "0",
categoryName: "deserunt"
},
{
categoryKey: "1",
categoryName: "deserunt"
},
{
categoryKey: "2",
categoryName: "deserunt"
},
{
categoryKey: "3",
categoryName: "deserunt"
},
{
categoryKey: "4",
categoryName: "deserunt"
},
]
this.categoryListshow = [] this.categoryListshow = []
let itemArray = [] let itemArray = []
this.categoryList.forEach((item, index) => { this.categoryList.forEach((item, index) => {
if (!item.dataIcon) { if (!item.dataIcon) {
item.dataIcon = require('../../../../../assets/img/shuju/volunteer3.png') item.dataIcon = require('../../../../../assets/img/shuju/volunteer3.png')
} }
if (index % 4 === 0) {//偶数 item.sel = true
itemArray.push(item)
} else {
itemArray.push(item)
this.categoryListshow.push(itemArray)
itemArray = []
}
}); });
let chunk = 4
for (let i = 0, j = this.categoryList.length; i < j; i += chunk) {
this.categoryListshow.push(this.categoryList.slice(i, i + chunk))
}
console.log(this.categoryListshow)
} else { } else {
this.$message.error(msg) this.$message.error(msg)

Write Preview
Loading…
Cancel
Save