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> |
<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> |
</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