xzt
11 months ago
7 changed files with 506 additions and 7 deletions
|
After Width: | Height: | Size: 232 KiB |
|
After Width: | Height: | Size: 1004 KiB |
@ -1,3 +1,289 @@ |
|||
<template> |
|||
<div>一张图</div> |
|||
<div class="page"> |
|||
<div class="select"> |
|||
<el-form :model="queryParams"> |
|||
<el-form-item label="行政区划" prop="adcd" label-width="68px"> |
|||
<el-cascader |
|||
:options="areasOptions" |
|||
v-model="queryParams.adcd" |
|||
:props="areasOptionProps" |
|||
placeholder="请选择行政区划" |
|||
clearable |
|||
size="small" |
|||
style="width: 100%" |
|||
> |
|||
</el-cascader> |
|||
</el-form-item> |
|||
</el-form> |
|||
</div> |
|||
<div class="main"> |
|||
<div class="main_head"> |
|||
<div class="head_title"> |
|||
<div class="iconSpan"> |
|||
<span class="first"></span> |
|||
<span class="second"></span> |
|||
</div> |
|||
<span class="text"> |
|||
工程分布一张图 |
|||
<em> (数据更新时间：2023/05/25) </em> |
|||
</span> |
|||
</div> |
|||
<div class="head_btn">进入</div> |
|||
</div> |
|||
<div class="main_content"> |
|||
<div class="con_head"> |
|||
<div class="head_btn"> |
|||
<span |
|||
:class="{ activeSpan1: activeName == '1' }" |
|||
@click="chooseName('1')" |
|||
>业务概况图</span |
|||
> |
|||
<span |
|||
:class="{ activeSpan1: activeName == '2' }" |
|||
@click="chooseName('2')" |
|||
>机构地图</span |
|||
> |
|||
</div> |
|||
</div> |
|||
<div class="con_info"> |
|||
<div class="info_left"> |
|||
<div class="infoItem"> |
|||
<span>总项目数</span> |
|||
<span>12688</span> |
|||
</div> |
|||
<div class="infoItem"> |
|||
<span>初步批复</span> |
|||
<span>8688</span> |
|||
</div> |
|||
<div class="infoItem"> |
|||
<span>施工中</span> |
|||
<span>6588</span> |
|||
</div> |
|||
<div class="infoItem"> |
|||
<span>已完工</span> |
|||
<span>8688</span> |
|||
</div> |
|||
</div> |
|||
<div class="info_right"> |
|||
<img src="@/assets/image/SMap.png" alt="" /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import { getAreasData } from "@/api/areas/index"; |
|||
export default { |
|||
data() { |
|||
return { |
|||
activeName: "1", |
|||
areasOptionProps: { |
|||
emitPath: false, //value返回最后一级的 |
|||
checkStrictly: true, //选择任意一级 |
|||
// lazy: true, |
|||
// lazyLoad: function qylazyLoad(node) { |
|||
// // node.level = 5; |
|||
// console.log("node", node.level); |
|||
// }, |
|||
}, |
|||
areasOptions: [], |
|||
queryParams: { |
|||
adcd: null, |
|||
}, |
|||
}; |
|||
}, |
|||
created() { |
|||
this.getTreeData(); |
|||
}, |
|||
methods: { |
|||
chooseName(key) { |
|||
this.activeName = key; |
|||
}, |
|||
getTreeData() { |
|||
getAreasData().then((items) => { |
|||
// console.log("getAreasData", items.data); |
|||
let res = []; |
|||
let getChildren = (res, pid) => { |
|||
for (const i of items.data) { |
|||
if (i.parentid === pid) { |
|||
const newItem = { |
|||
label: i.name, |
|||
value: i.id, |
|||
}; |
|||
if (i.layer != 3) newItem.children = []; |
|||
res.push(newItem); |
|||
getChildren(newItem.children, newItem.value); |
|||
} |
|||
} |
|||
}; |
|||
getChildren(res, items.data[0].parentid); |
|||
this.areasOptions = res; |
|||
// 当不是admin时，默认行政区域 |
|||
// if (this.$userProfile.createUid != "admin") { |
|||
// this.queryParams.data.adcd = this.areasOptions[0].value; |
|||
// } |
|||
// return res; |
|||
}); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.page { |
|||
width: 1200px; |
|||
background: #fff; |
|||
display: flex; |
|||
flex-direction: column; |
|||
// border: 1px solid red; |
|||
.select { |
|||
height: 64px; |
|||
display: flex; |
|||
align-items: center; |
|||
padding-left: 24px; |
|||
margin-bottom: 20px; |
|||
/deep/ .el-form-item { |
|||
margin-bottom: 0; |
|||
.el-input__inner { |
|||
width: 320px; |
|||
} |
|||
} |
|||
} |
|||
.main { |
|||
height: 800px; |
|||
display: flex; |
|||
flex-direction: column; |
|||
.main_head { |
|||
height: 58px; |
|||
background: #f3feff; |
|||
padding: 16px 24px; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
.head_title { |
|||
height: 26px; |
|||
display: flex; |
|||
.iconSpan { |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: space-evenly; |
|||
margin-right: 8px; |
|||
.first { |
|||
width: 6px; |
|||
height: 6px; |
|||
background: #f86220; |
|||
} |
|||
.second { |
|||
width: 6px; |
|||
height: 6px; |
|||
background: #36b29e; |
|||
} |
|||
} |
|||
.text { |
|||
font-size: 18px; |
|||
line-height: 26px; |
|||
& > em { |
|||
font-size: 14px; |
|||
color: #8c8c8c; |
|||
font-style: normal; |
|||
} |
|||
} |
|||
} |
|||
.head_btn { |
|||
font-size: 14px; |
|||
color: #36b29e; |
|||
cursor: pointer; |
|||
} |
|||
} |
|||
.main_content { |
|||
flex: 1; |
|||
padding: 20px 50px; |
|||
// background: skyblue; |
|||
display: flex; |
|||
flex-direction: column; |
|||
.con_head { |
|||
height: 32px; |
|||
display: flex; |
|||
justify-content: flex-end; |
|||
margin-bottom: 20px; |
|||
.head_btn { |
|||
// border: 1px solid #d9d9d9; |
|||
// border-radius: 4px; |
|||
& > span { |
|||
display: inline-block; |
|||
padding: 5px 16px; |
|||
font-size: 14px; |
|||
color: #262626; |
|||
cursor: pointer; |
|||
border: 1px solid #d9d9d9; |
|||
} |
|||
& > span:nth-child(1) { |
|||
border-radius: 4px 0 0 4px; |
|||
} |
|||
& > span:nth-child(2) { |
|||
border-radius: 0 4px 4px 0; |
|||
} |
|||
.activeSpan1 { |
|||
border: 1px solid #36b29e; |
|||
color: #36b29e; |
|||
} |
|||
.activeSpan2 { |
|||
border: 1px solid #36b29e; |
|||
color: #36b29e; |
|||
} |
|||
} |
|||
} |
|||
.con_info { |
|||
flex: 1; |
|||
// border: 1px solid red; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
.info_left { |
|||
width: 240px; |
|||
height: 464px; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: space-between; |
|||
// border: 1px solid red; |
|||
.infoItem { |
|||
height: 104px; |
|||
padding: 16px; |
|||
background: linear-gradient( |
|||
to bottom, |
|||
#cff3f6 0%, |
|||
rgba(207, 243, 246, 0.3) 100% |
|||
); |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: space-between; |
|||
& > span:nth-child(1) { |
|||
color: #262626; |
|||
font-size: 16px; |
|||
} |
|||
& > span:nth-child(2) { |
|||
color: #36b29e; |
|||
font-size: 40px; |
|||
} |
|||
} |
|||
& > .infoItem:nth-last-child(1) { |
|||
background: linear-gradient( |
|||
to bottom, |
|||
#c7f3e3 0%, |
|||
rgba(199, 243, 227, 0.2) 100% |
|||
); |
|||
} |
|||
} |
|||
.info_right { |
|||
width: 800px; |
|||
height: 600px; |
|||
// border: 1px solid red; |
|||
& > img { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
|
|||
Loading…
Reference in new issue