三个页面开发

back/src/views/modules/capabilityTraceability/index.vue

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