易浩轩
1 year ago
25 changed files with 1097 additions and 276 deletions
@ -0,0 +1,140 @@ |
|||
// 堤防相关接口
|
|||
import request from '@/utils/request' |
|||
|
|||
|
|||
// 巡查计划管理-获取人员信息
|
|||
export function getPersonnelInformation(id) { |
|||
return request({ |
|||
url: `/system/user/${id}`, |
|||
method: 'get', |
|||
}) |
|||
} |
|||
// 巡查项目管理-巡视检查列表
|
|||
export function postEmbankmentInspectionChecklist(data) { |
|||
return request({ |
|||
url: '/run/df/checking/list', |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
|
|||
// 巡查项目管理-巡视检查详情
|
|||
export function getEmbankmentInspectionCheck(id) { |
|||
return request({ |
|||
url: `/run/df/checking/${id}`, |
|||
method: 'get', |
|||
}) |
|||
} |
|||
|
|||
// 巡查项目管理-新增巡视检查
|
|||
export function postEmbankmentInspection(data) { |
|||
return request({ |
|||
url: '/run/df/checking', |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
|
|||
// 巡查项目管理-修改巡视检查
|
|||
export function putEmbankmentInspection(data) { |
|||
return request({ |
|||
url: '/run/df/checking', |
|||
method: 'put', |
|||
data |
|||
}) |
|||
} |
|||
|
|||
// 巡查项目管理-堤防巡视检查
|
|||
export function deleteEmbankmentInspection(id) { |
|||
return request({ |
|||
url: `/run/df/checking/${id}`, |
|||
method: 'delete', |
|||
}) |
|||
} |
|||
|
|||
// 巡查计划管理-查询巡视检查列表
|
|||
export function postInspectionPlanlist(data) { |
|||
return request({ |
|||
url: '/run/df/plan/list', |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
|
|||
// 巡查计划管理-巡视检查详情
|
|||
export function getInspectionPlan(id) { |
|||
return request({ |
|||
url: `/run/df/plan/${id}`, |
|||
method: 'get', |
|||
}) |
|||
} |
|||
|
|||
// 巡查计划管理-新增巡视检查
|
|||
export function postInspectionPlan(data) { |
|||
return request({ |
|||
url: '/run/df/plan', |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
|
|||
// 巡查计划管理-堤防巡视检查
|
|||
export function putInspectionPlan(data) { |
|||
return request({ |
|||
url: '/run/df/plan', |
|||
method: 'put', |
|||
data |
|||
}) |
|||
} |
|||
|
|||
// 巡查计划管理-堤防巡视检查
|
|||
export function deleteInspectionPlan(id) { |
|||
return request({ |
|||
url: `/run/df/plan/${id}`, |
|||
method: 'delete', |
|||
}) |
|||
} |
|||
|
|||
// 巡查计划管理-巡查点位设置
|
|||
export function postInspectionRoute(id, data) { |
|||
return request({ |
|||
url: `/run/df/plan/points/${id}`, |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
|
|||
// 巡查计划管理-获取巡查点位
|
|||
export function getInspectionRoute(id) { |
|||
return request({ |
|||
url: `/run/df/plan/points/${id}`, |
|||
method: 'get', |
|||
}) |
|||
} |
|||
|
|||
// 巡查记录-巡查记录列表
|
|||
export function postInspectionRecordsList(data) { |
|||
return request({ |
|||
url: '/run/df/record/list', |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
|
|||
// 巡查记录-新增巡查记录
|
|||
export function postNewInspectionRecords(data) { |
|||
return request({ |
|||
url: '/run/df/record', |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
|
|||
// 巡查记录-巡查记录轨迹列表
|
|||
export function postInspectionRecordsTrajectoryList(data) { |
|||
return request({ |
|||
url: '/run/df/trace/list', |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
@ -1,112 +1,5 @@ |
|||
import request from '@/utils/request' |
|||
|
|||
// 获取字典类型列表
|
|||
export function getDictionaryList(dictType) { |
|||
return request({ |
|||
url: `/system/dict/data/type/${dictType}`, |
|||
method: 'get' |
|||
}) |
|||
} |
|||
|
|||
// 巡查项目管理-查询堤防巡视检查列表
|
|||
export function postEmbankmentInspectionChecklist(data) { |
|||
return request({ |
|||
url: '/run/df/checking/list', |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
|
|||
// 巡查项目管理-堤防巡视检查详情
|
|||
export function getEmbankmentInspectionCheck(id) { |
|||
return request({ |
|||
url: `/run/df/checking/${id}`, |
|||
method: 'get', |
|||
}) |
|||
} |
|||
|
|||
// 巡查项目管理-新增堤防巡视检查
|
|||
export function postEmbankmentInspection(data) { |
|||
return request({ |
|||
url: '/run/df/checking', |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
|
|||
// 巡查项目管理-修改堤防巡视检查
|
|||
export function putEmbankmentInspection(data) { |
|||
return request({ |
|||
url: '/run/df/checking', |
|||
method: 'put', |
|||
data |
|||
}) |
|||
} |
|||
|
|||
// 巡查项目管理-删除堤防巡视检查
|
|||
export function deleteEmbankmentInspection(id) { |
|||
return request({ |
|||
url: `/run/df/checking/${id}`, |
|||
method: 'delete', |
|||
}) |
|||
} |
|||
|
|||
// 巡查计划管理-查询堤防巡视检查列表
|
|||
export function postInspectionPlanlist(data) { |
|||
return request({ |
|||
url: '/run/df/plan/list', |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
|
|||
// 巡查计划管理-堤防巡视检查详情
|
|||
export function getInspectionPlan(id) { |
|||
return request({ |
|||
url: `/run/df/plan/${id}`, |
|||
method: 'get', |
|||
}) |
|||
} |
|||
|
|||
// 巡查计划管理-新增堤防巡视检查
|
|||
export function postInspectionPlan(data) { |
|||
return request({ |
|||
url: '/run/df/plan', |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
|
|||
// 巡查计划管理-修改堤防巡视检查
|
|||
export function putInspectionPlan(data) { |
|||
return request({ |
|||
url: '/run/df/plan', |
|||
method: 'put', |
|||
data |
|||
}) |
|||
} |
|||
|
|||
// 巡查计划管理-删除堤防巡视检查
|
|||
export function deleteInspectionPlan(id) { |
|||
return request({ |
|||
url: `/run/df/plan/${id}`, |
|||
method: 'delete', |
|||
}) |
|||
} |
|||
|
|||
// 巡查计划管理-获取人员信息
|
|||
export function getPersonnelInformation(id) { |
|||
return request({ |
|||
url: `/system/user/${id}`, |
|||
method: 'get', |
|||
}) |
|||
} |
|||
|
|||
// 巡查计划管理-获取用户列表
|
|||
export function postUserList(data) { |
|||
return request({ |
|||
url: '/system/user/list', |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
export * from './dike' |
|||
export * from './reservoir' |
|||
export * from './sluice' |
|||
export { getDicts } from '../system/dict/data' |
|||
export { listUser } from '../system/user' |
|||
@ -0,0 +1 @@ |
|||
// 水库相关接口
|
|||
@ -0,0 +1 @@ |
|||
// 水闸相关接口
|
|||
|
After Width: | Height: | Size: 4.4 KiB |
|
After Width: | Height: | Size: 2.5 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 2.5 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 354 B |
|
After Width: | Height: | Size: 980 B |
@ -0,0 +1,170 @@ |
|||
<!-- 巡查记录-堤防 --> |
|||
<script> |
|||
import { postInspectionRecordsList, } from '@/api/management' |
|||
export default { |
|||
name: 'InspectionItems', |
|||
data() { |
|||
return { |
|||
searchInput: '', |
|||
tableData: [], // 检查列表 |
|||
pageData: { |
|||
pageNum: 1, // 当前页 |
|||
pageSize: 10, // 请求数量 |
|||
pageSizes: [10, 20, 50, 100], |
|||
total: 0 // 总数量 |
|||
}, |
|||
} |
|||
}, |
|||
methods: { |
|||
// 路线设置 |
|||
routeSetting(row) { |
|||
console.log('🚀row🚀', row) |
|||
this.$router.push({ |
|||
path: '/patrolRouteSettings', |
|||
query: { name: row.name, editor: false,id:row.id } |
|||
}) |
|||
}, |
|||
getTableData(search) { |
|||
postInspectionRecordsList({ |
|||
data: { |
|||
timeView: { |
|||
timeField: "create_time" |
|||
} |
|||
}, |
|||
cv: { |
|||
name: "name", |
|||
type: "like", |
|||
value: search |
|||
}, |
|||
pageSize: this.pageData.pageSize, |
|||
pageNum: this.pageData.pageNum |
|||
}).then((res) => { |
|||
if (res) { |
|||
this.tableData = res.records |
|||
this.pageData.total = res.total |
|||
} |
|||
console.log('🚀列表数据🚀', res) |
|||
}) |
|||
} |
|||
}, |
|||
mounted() { |
|||
// 获取列表数据 |
|||
this.getTableData() |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<template> |
|||
<div class="body"> |
|||
<div class="top-title"> |
|||
基础信息管理 |
|||
</div> |
|||
<div class="table-box"> |
|||
<div class="top-search"> |
|||
<span>巡检记录：</span> |
|||
<el-input class="search-input" v-model="searchInput" placeholder="请输入巡检记录" /> |
|||
<el-button class="search-btn" type="success" @click="getTableData(searchInput)">搜索</el-button> |
|||
</div> |
|||
<el-table class="table" height="650" :data="tableData" border> |
|||
<el-table-column type="index" align="center" label="序号" width="100" /> |
|||
<el-table-column prop="name" align="center" label="巡检记录" /> |
|||
<el-table-column align="center" label="有无异常"> |
|||
<template slot-scope="scope"> |
|||
<div v-if="scope.row.status != 0" style="display: flex; justify-content: center; flex-wrap: wrap;"> |
|||
<div v-if="scope.row.parts" class="normal">正常</div> |
|||
<div v-else v-for="item in scope.row.parts" class="abnormal">{{ item }}</div> |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="operatorName" align="center" label="巡查人员" /> |
|||
<el-table-column prop="status" align="center" label="状态"> |
|||
<template slot-scope="scope"> |
|||
<span>{{ scope.row.status === 0 ? '检查中' : '已完成' }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="address" align="center" label="操作"> |
|||
<template slot-scope="scope"> |
|||
<el-button @click="routeSetting(scope.row)" type="text" size="small">巡查轨迹</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<el-pagination background class="pagination" style="margin-top: 16px;margin-right: 16px;float: right;" |
|||
:current-page="pageData.pageNum" :page-sizes="pageData.pageSizes" layout="total, prev, pager, next, sizes, jumper" |
|||
:total="pageData.total" @size-change="getTableData()"> |
|||
</el-pagination> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<style scoped lang="less"> |
|||
.body { |
|||
width: 100%; |
|||
min-height: calc(100vh - 56px); |
|||
margin-left: 24px; |
|||
|
|||
.top-title { |
|||
height: 40px; |
|||
background-color: white; |
|||
display: flex; |
|||
padding-left: 16px; |
|||
align-items: center; |
|||
font-weight: 600; |
|||
} |
|||
|
|||
.table-box { |
|||
width: 100%; |
|||
min-height: calc(100vh - 56px - 64px); |
|||
margin-top: 24px; |
|||
padding: 16px; |
|||
background-color: white; |
|||
|
|||
.top-search { |
|||
display: flex; |
|||
align-items: center; |
|||
margin-bottom: 8px; |
|||
|
|||
.search-input { |
|||
width: 300px; |
|||
margin-right: 10px; |
|||
} |
|||
|
|||
} |
|||
|
|||
.search-btn { |
|||
margin-left: 10px; |
|||
background-color: #37b29e; |
|||
border: none; |
|||
|
|||
&:hover { |
|||
background-color: #5ac6b9; |
|||
} |
|||
|
|||
&:active { |
|||
background-color: #2b8070; |
|||
} |
|||
|
|||
; |
|||
} |
|||
|
|||
.table { |
|||
height: calc(680px - 34px); |
|||
|
|||
.normal { |
|||
width: 40px; |
|||
border-radius: 5px; |
|||
background-color: #ebf7f5; |
|||
color: #36b29e; |
|||
} |
|||
|
|||
.abnormal { |
|||
width: 40px; |
|||
border-radius: 5px; |
|||
background-color: #feebeb; |
|||
color: #d9001b; |
|||
margin-right: 10px; |
|||
margin-bottom: 10px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,22 @@ |
|||
<!-- 巡查项目管理-水库 --> |
|||
<script> |
|||
export default { |
|||
name: '', |
|||
data() { |
|||
return { |
|||
|
|||
} |
|||
}, |
|||
methods: { |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<template> |
|||
<div> |
|||
水库 |
|||
</div> |
|||
</template> |
|||
|
|||
<style scoped lang="less"></style> |
|||
@ -0,0 +1,22 @@ |
|||
<!-- 巡查项目管理-水闸 --> |
|||
<script> |
|||
export default { |
|||
name: '', |
|||
data() { |
|||
return { |
|||
|
|||
} |
|||
}, |
|||
methods: { |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<template> |
|||
<div> |
|||
水闸 |
|||
</div> |
|||
</template> |
|||
|
|||
<style scoped lang="less"></style> |
|||
@ -1,72 +1,29 @@ |
|||
<!-- 工程巡查 --> |
|||
<script lang="ts"> |
|||
<!-- 巡查记录 --> |
|||
<script> |
|||
import Dike from './Dike.vue' |
|||
import Reservoir from './Reservoir.vue' |
|||
import Sluice from './Sluice.vue' |
|||
export default { |
|||
name: 'IconSelect', |
|||
data() { |
|||
return { |
|||
name: '', |
|||
} |
|||
name: 'InspectionItems', |
|||
components: { |
|||
Reservoir, // 水库 |
|||
Sluice, // 水闸 |
|||
Dike, // 堤防 |
|||
}, |
|||
methods: { |
|||
searchData() { |
|||
console.log('搜索内容', this.name); |
|||
} |
|||
computed: { |
|||
selectTab() { |
|||
return this.$store.state.topTab.selectTab |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<template> |
|||
<div class="body"> |
|||
<div class="top-title"> |
|||
基础信息管理 |
|||
</div> |
|||
<div class="table-box"> |
|||
<div class="top-search"> |
|||
<span>计划名称：</span> |
|||
<el-input class="search-input" v-model="this.name" placeholder="请输入计划名称" @input="this.searchData" /> |
|||
<el-button class="search-btn" type="success">搜索</el-button> |
|||
</div> |
|||
</div> |
|||
<div> |
|||
<Reservoir v-if="selectTab == 0"></Reservoir> |
|||
<Sluice v-if="selectTab == 1"></Sluice> |
|||
<Dike v-if="selectTab == 2"></Dike> |
|||
</div> |
|||
</template> |
|||
|
|||
<style scoped lang="less"> |
|||
.body { |
|||
width: 100%; |
|||
min-height: calc(100vh - 56px); |
|||
margin-left: 24px; |
|||
.top-title { |
|||
height: 40px; |
|||
background-color: white; |
|||
display: flex; |
|||
padding-left: 16px; |
|||
align-items: center; |
|||
font-weight: 600; |
|||
} |
|||
.table-box { |
|||
width: 100%; |
|||
min-height: calc(100vh - 56px - 64px); |
|||
margin-top: 24px; |
|||
padding: 16px; |
|||
background-color: white; |
|||
.top-search{ |
|||
display: flex; |
|||
align-items: center; |
|||
.search-input{ |
|||
width: 300px; |
|||
margin-right: 10px; |
|||
} |
|||
.search-btn{ |
|||
background-color: #37b29e; |
|||
border: none; |
|||
&:hover{ |
|||
background-color: #5ac6b9; |
|||
}; |
|||
&:active{ |
|||
background-color: #2b8070; |
|||
}; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
<style scoped lang="less"></style> |
|||
@ -0,0 +1,65 @@ |
|||
<!-- 巡查路线设置-堤防 --> |
|||
<script> |
|||
import GaoDeMap from "./components/GaoDeMap.vue" |
|||
export default { |
|||
name: '', |
|||
components: { |
|||
GaoDeMap |
|||
}, |
|||
data() { |
|||
return { |
|||
selectTab: 'first' |
|||
} |
|||
}, |
|||
methods: { |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<template> |
|||
<div class="body"> |
|||
<div class="top-title"> |
|||
基础信息管理 |
|||
</div> |
|||
<div class="map-box"> |
|||
<el-tabs v-model="selectTab" class="tab"> |
|||
<el-tab-pane style="padding: 0px 16px;" label="电子地图" name="first"> |
|||
<GaoDeMap /> |
|||
</el-tab-pane> |
|||
<el-tab-pane label="平面图" name="second">平面图</el-tab-pane> |
|||
</el-tabs> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<style scoped lang="less"> |
|||
.body { |
|||
width: 100%; |
|||
min-height: calc(100vh - 56px); |
|||
|
|||
.top-title { |
|||
height: 40px; |
|||
background-color: white; |
|||
display: flex; |
|||
padding-left: 16px; |
|||
align-items: center; |
|||
font-weight: 600; |
|||
} |
|||
|
|||
.map-box { |
|||
background-color: #fff; |
|||
border-radius: 8px; |
|||
min-height: calc(100vh - 56px - 40px - 48px); |
|||
margin: 24px; |
|||
|
|||
.tab { |
|||
/deep/.el-tabs__nav { |
|||
.el-tabs__item:first-of-type { |
|||
margin-left: 16px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,22 @@ |
|||
<!-- 巡查路线设置-水库 --> |
|||
<script> |
|||
export default { |
|||
name: '', |
|||
data() { |
|||
return { |
|||
|
|||
} |
|||
}, |
|||
methods: { |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<template> |
|||
<div> |
|||
水库 |
|||
</div> |
|||
</template> |
|||
|
|||
<style scoped lang="less"></style> |
|||
@ -0,0 +1,22 @@ |
|||
<!-- 巡查路线设置-水闸 --> |
|||
<script> |
|||
export default { |
|||
name: '', |
|||
data() { |
|||
return { |
|||
|
|||
} |
|||
}, |
|||
methods: { |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<template> |
|||
<div> |
|||
水闸 |
|||
</div> |
|||
</template> |
|||
|
|||
<style scoped lang="less"></style> |
|||
@ -0,0 +1,224 @@ |
|||
<!-- 巡查记录抽屉 --> |
|||
<script> |
|||
export default { |
|||
name: '', |
|||
data() { |
|||
return { |
|||
drawerVisible: false, |
|||
tableData: [ |
|||
{ content: '张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三', photos: '编辑', delete: '删除' }, |
|||
{ content: '张三', photos: '编辑', delete: '删除' }, |
|||
{ content: '张三', photos: '编辑', delete: '删除' }, |
|||
{ content: '张三', photos: '编辑', delete: '删除' }, |
|||
{ content: '张三', photos: '编辑', delete: '删除' }, |
|||
{ content: '张三', photos: '编辑', delete: '删除' }, |
|||
{ content: '张三', photos: '编辑', delete: '删除' }, |
|||
{ content: '张三', photos: '编辑', delete: '删除' }, |
|||
{ content: '张三', photos: '编辑', delete: '删除' }, |
|||
{ content: '张三', photos: '编辑', delete: '删除' }, |
|||
{ content: '张三', photos: '编辑', delete: '删除' }, |
|||
{ content: '张三', photos: '编辑', delete: '删除' }, |
|||
{ content: '张三', photos: '编辑', delete: '删除' }, |
|||
{ content: '张三', photos: '编辑', delete: '删除' }, |
|||
{ content: '张三', photos: '编辑', delete: '删除' }, |
|||
{ content: '张三', photos: '编辑', delete: '删除' }, |
|||
{ content: '张三', photos: '编辑', delete: '删除' }, |
|||
{ content: '张三', photos: '编辑', delete: '删除' }, |
|||
{ content: '张三', photos: '编辑', delete: '删除' }, |
|||
{ content: '张三', photos: '编辑', delete: '删除' }, |
|||
] |
|||
} |
|||
}, |
|||
methods: { |
|||
handleSpanMethod({ row, column, rowIndex, columnIndex }) { |
|||
if (columnIndex === 0) { |
|||
if (rowIndex < 4 || (rowIndex > 4 && rowIndex < 9) || (rowIndex > 8 && rowIndex < 11) || (rowIndex > 10 && rowIndex < 13) || (rowIndex > 12 && rowIndex < 18)) { |
|||
if (rowIndex === 0 || rowIndex === 5 || rowIndex === 9 || rowIndex === 11 || rowIndex === 13) { |
|||
return { |
|||
rowspan: [4, 4, 2, 2, 5][[0, 5, 9, 11, 13].indexOf(rowIndex)], |
|||
colspan: 1 |
|||
}; |
|||
} else { |
|||
return { |
|||
rowspan: 0, |
|||
colspan: 0 |
|||
}; |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<template> |
|||
<div> |
|||
<div class="masking" :class="drawerVisible ? 'masking-in' : ''"> |
|||
<div class="close-btn" @click="drawerVisible = false"> |
|||
<i class="el-icon-arrow-right"></i> |
|||
</div> |
|||
<div class="drawer-title"> |
|||
<span>巡查记录</span> |
|||
</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"> |
|||
<template slot-scope="scope"> |
|||
<div v-if="scope.$index == 0"> |
|||
<div class="box1"> |
|||
<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 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 == 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> |
|||
</el-table> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<style scoped lang="less"> |
|||
.masking { |
|||
position: absolute; |
|||
top: 0; |
|||
width: 50%; |
|||
height: 100%; |
|||
left: 120%; |
|||
z-index: 2; |
|||
background-color: #fff; |
|||
transition: left 0.5s ease-in-out; |
|||
box-shadow: -8px 0px 38px 0px rgba(0, 0, 0, 0.6); |
|||
|
|||
.close-btn { |
|||
width: 32px; |
|||
height: 32px; |
|||
position: absolute; |
|||
top: 48px; |
|||
left: -16px; |
|||
background-color: #fff; |
|||
border: 1px solid #DCDCDC; |
|||
border-radius: 50%; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
cursor: pointer; |
|||
|
|||
i { |
|||
color: #36b29e; |
|||
} |
|||
} |
|||
|
|||
.drawer-title { |
|||
width: 100%; |
|||
height: 64px; |
|||
line-height: 64px; |
|||
padding-left: 16px; |
|||
border-bottom: 1px solid #e7e7e7; |
|||
} |
|||
|
|||
.center-table { |
|||
padding: 16px; |
|||
|
|||
.box1 { |
|||
height: 352x; |
|||
display: grid; |
|||
grid-template-columns: repeat(3, 70px); |
|||
grid-template-rows: repeat(8, 44px); |
|||
} |
|||
|
|||
|
|||
.item1 { |
|||
grid-row: 1 / 9; |
|||
grid-column: 1; |
|||
line-height: 352px; |
|||
justify-content: center; |
|||
align-content: center; |
|||
border-right: 1px solid #f4f9f7; |
|||
} |
|||
|
|||
.item2 { |
|||
grid-row: 1/3; |
|||
grid-column: 2/ 4; |
|||
line-height: 88px; |
|||
justify-content: center; |
|||
align-content: center; |
|||
border-bottom: 1px solid #f4f9f7; |
|||
} |
|||
|
|||
.item3 { |
|||
grid-row: 3/7; |
|||
grid-column: 2; |
|||
line-height: 176px; |
|||
justify-content: center; |
|||
align-content: center; |
|||
border-right: 1px solid #f4f9f7; |
|||
} |
|||
|
|||
.item4 { |
|||
line-height: 44px; |
|||
justify-content: center; |
|||
align-content: center; |
|||
border-bottom: 1px solid #f4f9f7; |
|||
} |
|||
|
|||
.item5 { |
|||
line-height: 44px; |
|||
justify-content: center; |
|||
align-content: center; |
|||
border-bottom: 1px solid #f4f9f7; |
|||
} |
|||
|
|||
.item6 { |
|||
grid-row: 7/5; |
|||
grid-column: 3; |
|||
line-height: 88px; |
|||
justify-content: center; |
|||
align-content: center; |
|||
} |
|||
|
|||
|
|||
.item7 { |
|||
grid-row: 9/7; |
|||
grid-column: 2/4; |
|||
line-height: 88px; |
|||
justify-content: center; |
|||
align-content: center; |
|||
border-top: 1px solid #f4f9f7; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.masking-in { |
|||
left: 50%; |
|||
} |
|||
|
|||
/deep/.el-table__body td { |
|||
padding: 0; |
|||
height: 88px !important; |
|||
/* 设置单元格的固定高度 */ |
|||
overflow: hidden; |
|||
} |
|||
|
|||
/deep/.el-table__body td .cell { |
|||
padding: 0 !important; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,242 @@ |
|||
<!-- 高德地图 --> |
|||
<template> |
|||
<div id="container"> |
|||
<!-- <div class="box"> |
|||
<span v-for="(checkpoint, index) in checkpoints" :key="index" @click="selectCheckpoint(checkpoint)">{{ |
|||
checkpoint.name }}</span> |
|||
</div> --> |
|||
<el-button class="open-drawer-btn" size="mini" @click="drawerVisible = true">展开抽屉</el-button> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import AMapLoader from "@amap/amap-jsapi-loader"; |
|||
import { postInspectionRoute, getInspectionRoute, postInspectionRecordsTrajectoryList } from '@/api/management' |
|||
export default { |
|||
name: "map-view", |
|||
data() { |
|||
return { |
|||
checkpoints: [ |
|||
// { |
|||
// name: '检查点1', |
|||
// location: [113.431415, 23.104388] |
|||
// }, |
|||
// { |
|||
// name: '检查点2', |
|||
// location: [113.432021, 23.1038] |
|||
// }, |
|||
// { |
|||
// name: '检查点3', |
|||
// location: [113.431747, 23.102794] |
|||
// } |
|||
], |
|||
AMap: {}, |
|||
}; |
|||
}, |
|||
mounted() { |
|||
this.initAMap(); |
|||
}, |
|||
unmounted() { |
|||
this.map?.destroy(); |
|||
}, |
|||
methods: { |
|||
// 渲染线段 |
|||
renderedPolyline() { |
|||
this.map.remove(this.map.getAllOverlays('polyline')); |
|||
if (this.checkpoints.length > 1) { |
|||
const polyline = new this.AMap.Polyline({ |
|||
path: this.checkpoints.map((checkpoint) => checkpoint.location), |
|||
strokeColor: "#37E4FF", |
|||
strokeWeight: 4, |
|||
strokeOpacity: 1, |
|||
bubble: true |
|||
}); |
|||
polyline.setMap(this.map); |
|||
} |
|||
}, |
|||
// 添加点位 |
|||
addCheckpoint(name, location) { |
|||
const icon = new this.AMap.Icon({ |
|||
size: new this.AMap.Size(20, 20), |
|||
image: require('@/assets/image/map-point.png'), |
|||
imageSize: new AMap.Size(20, 20), |
|||
anchor: 'center', |
|||
}) |
|||
const marker = new this.AMap.Marker({ |
|||
position: location, |
|||
title: name, |
|||
icon, |
|||
anchor: 'bottom-center', |
|||
bubble: true, |
|||
label: { content: name, direction: 'top' }, |
|||
}); |
|||
marker.setMap(this.map); |
|||
this.checkpoints.push({ name, location, marker }); |
|||
console.log('🚀checkpoints🚀', this.checkpoints) |
|||
this.renderedPolyline() |
|||
}, |
|||
// 修改选中点位 |
|||
selectCheckpoint(checkpoint) { |
|||
const icon = new this.AMap.Icon({ |
|||
size: new this.AMap.Size(20, 20), |
|||
image: require('@/assets/image/map-point.png'), |
|||
imageSize: new AMap.Size(20, 20), |
|||
anchor: 'center', |
|||
}) |
|||
this.map.setCenter(checkpoint.location); |
|||
this.map.setZoom(18) |
|||
this.checkpoints.forEach((cp) => { |
|||
const marker = cp.marker; |
|||
if (cp === checkpoint) { |
|||
marker.setIcon('https://webapi.amap.com/theme/v1.3/markers/n/mark_r.png'); |
|||
} else { |
|||
marker.setIcon(icon); |
|||
} |
|||
}); |
|||
}, |
|||
// 删除最后一个点位 |
|||
removeLastCheckpoint() { |
|||
const lastCheckpoint = this.checkpoints.pop(); |
|||
const marker = lastCheckpoint.marker; |
|||
marker.setMap(null); |
|||
this.renderedPolyline() |
|||
}, |
|||
// 保存巡查路线 |
|||
saveInspectionRoute() { |
|||
let data = [] |
|||
this.checkpoints.forEach(element => { |
|||
let a = { |
|||
longitude: element.location[0], |
|||
latitude: element.location[1] |
|||
} |
|||
data.push(a) |
|||
}); |
|||
postInspectionRoute(this.$route.query.id, data).then((res) => { |
|||
this.$message({ |
|||
message: '保存成功', |
|||
type: 'success' |
|||
}); |
|||
}) |
|||
}, |
|||
// 加载地图 |
|||
initAMap() { |
|||
AMapLoader.load({ |
|||
key: "67533ae78bf28afc2a3da3d10d308fa1", // 申请好的Web端开发者Key，首次调用 load 时必填 |
|||
version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15 |
|||
plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等 |
|||
}) |
|||
.then((AMap) => { |
|||
this.AMap = AMap |
|||
var satellite = new AMap.TileLayer.Satellite() // 创建卫星图层 |
|||
this.map = new AMap.Map("container", { |
|||
// 设置地图容器id |
|||
viewMode: "3D", // 是否为3D地图模式 |
|||
zoom: 18, // 初始化地图级别 |
|||
doubleClickZoom: false, // 禁用双击放大 |
|||
layers: [ |
|||
satellite, |
|||
], |
|||
center: [113.43094, 23.10346], // 初始化地图中心点位置 |
|||
}); |
|||
|
|||
// 在地图加载完成后执行操作 |
|||
this.map.on("complete", () => { |
|||
console.log('🚀地图加载完毕🚀') |
|||
if (this.$route.query.editor) { |
|||
// 添加点位 |
|||
getInspectionRoute(this.$route.query.id).then((res) => { |
|||
res.data.forEach((element, index) => { |
|||
this.addCheckpoint("检查点" + (index + 1), [element.longitude, element.latitude]) |
|||
}); |
|||
}) |
|||
} else { |
|||
postInspectionRecordsTrajectoryList({ |
|||
data: { |
|||
timeView: { |
|||
timeField: "create_time" |
|||
}, |
|||
recordId: this.$route.query.id |
|||
}, |
|||
cv: { |
|||
name: "name", |
|||
type: "like", |
|||
}, |
|||
pageSize: 100, |
|||
pageNum: 1 |
|||
}).then((res) => { |
|||
console.log('🚀res🚀', res) |
|||
res.records.forEach((element, index) => { |
|||
this.addCheckpoint("检查点" + (index + 1), [element.longitude, element.latitude]) |
|||
}); |
|||
}) |
|||
} |
|||
// 给点位添加连接线 |
|||
if (this.checkpoints.length > 1) { |
|||
this.renderedPolyline() |
|||
} |
|||
}); |
|||
if (this.$route.query.editor) { |
|||
// 点击添加检查点 |
|||
this.map.on('click', (e) => { |
|||
const { lng, lat } = e.lnglat; |
|||
const name = `检查点${this.checkpoints.length + 1}`; |
|||
this.addCheckpoint(name, [lng, lat]); |
|||
}); |
|||
// 双击保存 |
|||
this.map.on('dblclick', () => { |
|||
this.saveInspectionRoute() |
|||
console.log('双击保存', this.checkpoints); |
|||
}); |
|||
// 右键清空点位 |
|||
this.map.on('rightclick', () => { |
|||
if (this.checkpoints.length > 0) { |
|||
// this.removeLastCheckpoint(); |
|||
this.checkpoints.forEach((checkpoint) => { |
|||
checkpoint.marker.setMap(null); // 将每个点位的 marker 从地图上移除 |
|||
}); |
|||
this.checkpoints = []; // 清空 checkpoints 数组 |
|||
this.renderedPolyline() // 清空连线 |
|||
} |
|||
}); |
|||
} |
|||
}) |
|||
.catch((e) => { |
|||
console.log(e); |
|||
}); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style scoped lang="scss"> |
|||
#container { |
|||
width: 100%; |
|||
height: calc(100vh - 56px - 40px - 48px - 70px); |
|||
position: relative; |
|||
|
|||
|
|||
.box { |
|||
width: 100px; |
|||
background: #fff; |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
|
|||
} |
|||
|
|||
.open-drawer-btn { |
|||
position: fixed; |
|||
top: 125px; |
|||
right: 40px; |
|||
} |
|||
|
|||
|
|||
|
|||
} |
|||
|
|||
/deep/.amap-marker-label { |
|||
background-color: rgba(0, 0, 0, 0.6); |
|||
border: none; |
|||
border-radius: 2px; |
|||
color: #fff; |
|||
font-size: 12px; |
|||
padding: 4px 8px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,29 @@ |
|||
<!-- 巡查路线设置 --> |
|||
<script> |
|||
import Dike from './Dike.vue' |
|||
import Reservoir from './Reservoir.vue' |
|||
import Sluice from './Sluice.vue' |
|||
export default { |
|||
name: 'InspectionItems', |
|||
components: { |
|||
Reservoir, // 水库 |
|||
Sluice, // 水闸 |
|||
Dike, // 堤防 |
|||
}, |
|||
computed: { |
|||
selectTab() { |
|||
return this.$store.state.topTab.selectTab |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<template> |
|||
<div> |
|||
<Reservoir v-if="selectTab == 0"></Reservoir> |
|||
<Sluice v-if="selectTab == 1"></Sluice> |
|||
<Dike v-if="selectTab == 2"></Dike> |
|||
</div> |
|||
</template> |
|||
|
|||
<style scoped lang="less"></style> |
|||
Loading…
Reference in new issue