ljf
/
shuili-vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

feat: 电子地图页面表格布局完成

feature-sy-v1.0.0
易浩轩 1 year ago
parent
a8e28a3dbf
commit
06b384b124
2 changed files with 256 additions and 67 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 227
      src/views/runManage/engineering/patrolRouteSettings/components/Drawer.vue
  2. 4
      src/views/runManage/engineering/patrolRouteSettings/components/GaoDeMap.vue

227
src/views/runManage/engineering/patrolRouteSettings/components/Drawer.vue
View File

@ -2,12 +2,17 @@
<script>
export default {
name: '',
props: {
drawerVisible: {
type: Boolean,
default: false
}
},
data() {
return {
drawerVisible: false,
tableData: [
{ content: '张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三', photos: '编辑', delete: '删除' },
{ content: '张三', photos: '编辑', delete: '删除' },
{ content: '张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三', photos: '编辑', delete: '删除' },
{ content: '张三', photos: '编辑', delete: '删除' },
{ content: '张三', photos: '编辑', delete: '删除' },
{ content: '张三', photos: '编辑', delete: '删除' },
@ -54,7 +59,8 @@ export default {
<template>
<div>
<div class="masking" :class="drawerVisible ? 'masking-in' : ''">
<div class="close-btn" @click="drawerVisible = false">
<div class="close-btn" @click="$emit('close-drawer');
">
<i class="el-icon-arrow-right"></i>
</div>
<div class="drawer-title">
@ -62,7 +68,7 @@ export default {
</div>
<div class="center-table">
<el-table :data="tableData" height="636" border style="width: 100%" :span-method="handleSpanMethod">
<el-table-column align="center" class="first-column" label="工程部位" width="210">
<el-table-column align="center" class="first-column" label="工程部位" width="264">
<template slot-scope="scope">
<div v-if="scope.$index == 0">
<div class="box1">
@ -75,20 +81,50 @@ export default {
<div class="item7">堤脚</div>
</div>
</div>
<div v-if="scope.$index == 4" style="height: 88px;">二、护坡地和堤防工程保护范围</div>
<div v-if="scope.$index == 5">三、堤岸防护工程</div>
<div v-if="scope.$index == 9">四、防渗排水设施</div>
<div v-if="scope.$index == 11">五、交叉建筑物及接连段</div>
<div v-if="scope.$index == 13">六、管理设施</div>
<div v-if="scope.$index == 4">二、护坡地和堤防工程保护范围</div>
<div v-if="scope.$index == 5">
<div class="box2">
<div class="item1">三、堤岸防护工程</div>
<div class="item2">坡式</div>
<div class="item3">墙式</div>
<div class="item4">护脚</div>
<div class="item5">滩岸</div>
</div>
</div>
<div v-if="scope.$index == 9">
<div class="box3">
<div class="item1">四、防渗排水设施</div>
<div class="item2">防渗设施</div>
<div class="item3">排水设施</div>
</div>
</div>
<div v-if="scope.$index == 11">
<div class="box3">
<div class="item1">五、交叉建筑物及接连段</div>
<div class="item2">连接段</div>
<div class="item3">交叉建筑物</div>
</div>
</div>
<div v-if="scope.$index == 13">
<div class="box4">
<div class="item1">六、管理设施</div>
<div class="item2">观测设施</div>
<div class="item3">交通通信设施</div>
<div class="item4">信息化设施</div>
<div class="item5">标识标牌</div>
<div class="item6">管理房</div>
</div>
</div>
<div v-if="scope.$index == 18">七、生物防护工程</div>
<div v-if="scope.$index == 19">八、其他</div>
</template>
</el-table-column>
<el-table-column prop="content" align="center" class-name="aaaaa" label="检查内容" width="200" />
<el-table-column prop="photos" align="center" label="打卡图片" width="150" />
<el-table-column align="center" label="检查记录">
<el-table-column prop="isNormal" align="center" label="是否正常" width="150" />
<el-table-column prop="problems" align="center" label="存在问题" width="150" />
<el-table-column prop="content" align="center" class-name="column-item" label="检查内容" min-width="200" />
<el-table-column v-if="!this.$route.query.editor" prop="photos" align="center" class-name="column-item"
label="打卡图片" width="150" />
<el-table-column v-if="!this.$route.query.editor" align="center" class-name="column-item" label="检查记录">
<el-table-column prop="isNormal" align="center" class-name="column-item" label="是否正常" width="150" />
<el-table-column prop="problems" align="center" class-name="column-item" label="存在问题" width="150" />
</el-table-column>
</el-table>
</div>
@ -138,13 +174,12 @@ export default {
.center-table {
padding: 16px;
.box1 {
height: 352x;
display: grid;
grid-template-columns: repeat(3, 70px);
grid-template-columns: repeat(3, 88px);
grid-template-rows: repeat(8, 44px);
}
.item1 {
grid-row: 1 / 9;
@ -205,20 +240,170 @@ export default {
border-top: 1px solid #f4f9f7;
}
}
.box2 {
height: 352px;
display: grid;
grid-template-columns: repeat(3, 88px);
grid-template-rows: repeat(8, 44px);
.item1 {
grid-row: 1 / 9;
grid-column: 1/3;
line-height: 352px;
justify-content: center;
align-content: center;
border-right: 1px solid #f4f9f7;
}
.item2 {
grid-row: 1/3;
grid-column: 3;
line-height: 88px;
justify-content: center;
align-content: center;
border-bottom: 1px solid #f4f9f7;
}
.item3 {
grid-row: 3/5;
grid-column: 3;
line-height: 88px;
justify-content: center;
align-content: center;
border-bottom: 1px solid #f4f9f7;
}
.item4 {
grid-row: 5/7;
grid-column: 3;
line-height: 88px;
justify-content: center;
align-content: center;
border-bottom: 1px solid #f4f9f7;
}
.item5 {
grid-row: 7/9;
grid-column: 3;
line-height: 88px;
justify-content: center;
align-content: center;
}
}
.box3 {
height: 176px;
display: grid;
grid-template-columns: repeat(3, 88px);
grid-template-rows: repeat(8, 44px);
.item1 {
grid-row: 1 / 5;
grid-column: 1/3;
line-height: 176px;
justify-content: center;
align-content: center;
border-right: 1px solid #f4f9f7;
}
.item2 {
grid-row: 1/3;
grid-column: 3;
line-height: 88px;
justify-content: center;
align-content: center;
border-bottom: 1px solid #f4f9f7;
}
.item3 {
grid-row: 3/5;
grid-column: 3;
line-height: 88px;
justify-content: center;
align-content: center;
}
}
.box4 {
height: 440px;
display: grid;
grid-template-columns: repeat(3, 88px);
grid-template-rows: repeat(8, 44px);
.item1 {
grid-row: 1 / 10;
grid-column: 1/3;
line-height: 440px;
justify-content: center;
align-content: center;
border-right: 1px solid #f4f9f7;
}
.item2 {
grid-row: 1/3;
grid-column: 3;
line-height: 88px;
justify-content: center;
align-content: center;
border-bottom: 1px solid #f4f9f7;
}
.item3 {
grid-row: 3/5;
grid-column: 3;
line-height: 88px;
justify-content: center;
align-content: center;
}
.item4 {
grid-row: 5/7;
grid-column: 3;
line-height: 88px;
justify-content: center;
align-content: center;
}
.item5 {
grid-row: 7/9;
grid-column: 3;
line-height: 88px;
justify-content: center;
align-content: center;
}
.item6 {
grid-row: 9/11;
grid-column: 3;
line-height: 88px;
justify-content: center;
align-content: center;
}
}
}
}
.masking-in {
left: 50%;
}
/deep/.el-table__body td {
/deep/.el-table__body tr td {
padding: 0;
height: 88px !important;
/* 设置单元格的固定高度 */
overflow: hidden;
}
/deep/.el-table__body td .cell {
/deep/ .cell {
padding: 0 !important;
}
/deep/.column-item {
padding-left: 10px !important;
}
/deep/.column-item .cell {
padding: 18;
max-height: 70px !important;
overflow: auto;
}
</style>

4
src/views/runManage/engineering/patrolRouteSettings/components/GaoDeMap.vue
View File

@ -6,15 +6,19 @@
checkpoint.name }}</span>
</div> -->
<el-button class="open-drawer-btn" size="mini" @click="drawerVisible = true">展开抽屉</el-button>
<Drawer :drawer-visible="drawerVisible" @close-drawer="drawerVisible = false"></Drawer>
</div>
</template>
<script>
import AMapLoader from "@amap/amap-jsapi-loader";
import { postInspectionRoute, getInspectionRoute, postInspectionRecordsTrajectoryList } from '@/api/management'
import Drawer from './Drawer.vue'
export default {
name: "map-view",
components: { Drawer },
data() {
return {
drawerVisible: false,
checkpoints: [
// {
// name: '检查点1',

Write Preview
Loading…
Cancel
Save