三个页面开发

This commit is contained in:
gongjiale 2022-11-02 14:09:42 +08:00
parent ef095da37f
commit 5ecd94df32
1 changed files with 155 additions and 1 deletions

View File

@ -16,7 +16,7 @@
<div class="overview">
<div class="top"><i></i>总体情况</div>
<div class="main">
<div class="item" v-for="item in allSituation" :key="item">
<div class="item" v-for="item in allSituation" :key="item" @click="openTab(item)">
<div class="left"></div>
<div class="right">
<div>{{item.name}}</div>
@ -169,6 +169,65 @@
</div>
</div>
</div>
<!--GIS图层资源-->
<el-dialog title="GIS图层资源" :visible.sync="yunshow" class="status_change">
<div>
<el-table
:data="dataList1"
border
style="width: 100%"
height="500px"
>
<el-table-column
prop="a"
label="能力名称"
header-align="center"
align="center"
></el-table-column>
<el-table-column
min-width="150%"
prop="b"
label="能力描述"
header-align="center"
align="center"
></el-table-column>
<el-table-column
prop="c"
label="归属系统"
header-align="center"
align="center"
></el-table-column>
<el-table-column
prop="d"
label="归属项目"
header-align="center"
align="center"
></el-table-column>
<el-table-column
prop="e"
label="归属部门"
header-align="center"
align="center"
></el-table-column>
<el-table-column
prop="f"
label="注册者"
header-align="center"
align="center"
></el-table-column>
</el-table>
<el-pagination
:current-page="page"
:page-sizes="[10, 20, 50, 100]"
:page-size="limit"
:total="Number(9)"
layout="total, sizes, prev, pager, next, jumper"
@size-change="pageSizeChangeHandle"
@current-change="pageCurrentChangeHandle"
>
</el-pagination>
</div>
</el-dialog>
</div>
</template>
<script>
@ -223,6 +282,82 @@ export default {
},
data () {
return {
dataList1: [
{
"a": "草地GIS服务",
"b": "以草地生态系统为研究区域,整合多源信息,为草地生态系统管理提供技术支持",
"c": "CM平台",
"d": "城市信息模型CM平台建设项目",
"e": "住房与建设保障局",
"f": "孙**"
},
{
"a": "行政区-街道",
"b": "街道行政边界",
"c": "CM平台",
"d": "城市信息模型CM平台建设项目",
"e": "住房与建设保障局",
"f": "孙**"
},
{
"a": "单元网格(城管网络)",
"b": "城管网络图层",
"c": "CM平台",
"d": "城市信息模型CM平台建设项目",
"e": "住房与建设保障局",
"f": "孙**"
},
{
"a": "核心部件图层",
"b": "核心部件图层",
"c": "CM平台",
"d": "城市信息模型CM平台建设项目",
"e": "住房与建设保障局",
"f": "孙**"
},
{
"a": "商圈及其缓冲区",
"b": "商圈及其缓冲区",
"c": "CM平台",
"d": "城市信息模型CM平台建设项目",
"e": "住房与建设保障局",
"f": "孙**"
},
{
"a": "商圈数据",
"b": "商圈图层数据",
"c": "CM平台",
"d": "城市信息模型平台建设项目",
"e": "工业和信息化局",
"f": "孙**"
},
{
"a": "政务版电子地图(蓝黑版球面坐标系)",
"b": "政务版电子地图暗黑风格2021年更新CGCS2000球面坐标系",
"c": "智慧时空信息云平台",
"d": "智慧时空信息云平台建设项目",
"e": "自然资源和规划局",
"f": "孙**"
},
{
"a": "影像地图(平面坐标系)",
"b": "影像地图CGCS2000球面坐标系2021年更新",
"c": "智慧时空信息云平台",
"d": "智慧时空信息云平台建设项目",
"e": "自然资源和规划局",
"f": "孙**"
},
{
"a": "影像地图(球面坐标系)",
"b": "影像地图CGCS2000球面坐标系2021年更新",
"c": "智慧时空信息云平台",
"d": "智慧时空信息云平台建设项目",
"e": "自然资源和规划局",
"f": "孙**"
},
],
yunshow:false,
tabList: ['总体情况', '部门情况', '地市情况'],
selectTab: '总体情况',
allSituation: [{ name: '注册项目', num: '100个' }, { name: '注册系统', num: '100个' }, { name: '视频资源', num: '100万路' }, { name: 'GIS图层', num: '100项' }, { name: '云网资源', num: '100个' }, { name: '组件资源', num: '100项' }],
@ -541,6 +676,11 @@ export default {
}
},
methods: {
openTab(item){
if(item.name==='GIS图层'){
this.yunshow=true
}
},
myEcharts () {
var chartDom1 = document.getElementById('echarts1')
var chartDom2 = document.getElementById('echarts2')
@ -573,6 +713,19 @@ export default {
}
</script>
<style lang='scss' scoped>
.status_change {
::v-deep .el-dialog__header{
background-color:#dee1e3;
padding: 10px 10px 10px;
.el-dialog__title,.el-dialog__headerbtn i{
color: #000;
}
}
.dialog-footer{
text-align: center;
}
}
.capabilityTraceability {
.top {
display: flex;
@ -617,6 +770,7 @@ export default {
justify-content: center;
align-items: center;
.item {
cursor:pointer;
margin: 10px 0;
padding: 0 45px 0 40px;
display: flex;