panyuyi
1 year ago
10 changed files with 771 additions and 57 deletions
@ -0,0 +1,10 @@ |
|||
/node_modules/** |
|||
/dist/ |
|||
/dist* |
|||
/public/* |
|||
/docs/* |
|||
/vite.config.ts |
|||
/src/types/env.d.ts |
|||
/docs/**/* |
|||
/plop/**/* |
|||
CHANGELOG |
|||
@ -0,0 +1,19 @@ |
|||
module.exports = { |
|||
printWidth: 100, |
|||
tabWidth: 2, |
|||
useTabs: false, |
|||
semi: false, |
|||
vueIndentScriptAndStyle: false, |
|||
singleQuote: true, |
|||
quoteProps: 'as-needed', |
|||
bracketSpacing: true, |
|||
trailingComma: 'none', |
|||
jsxSingleQuote: false, |
|||
arrowParens: 'always', |
|||
insertPragma: false, |
|||
requirePragma: false, |
|||
proseWrap: 'never', |
|||
htmlWhitespaceSensitivity: 'strict', |
|||
endOfLine: 'auto', |
|||
rangeStart: 0 |
|||
} |
|||
@ -0,0 +1,71 @@ |
|||
/** |
|||
懒得弄windcss，手写一些常用的 |
|||
*/ |
|||
|
|||
/***** margin ******/ |
|||
@for $i from 1 through 32 { |
|||
.m-#{$i}{ |
|||
margin: #{$i}px; |
|||
} |
|||
.ml-#{$i}{ |
|||
margin-left: #{$i}px; |
|||
} |
|||
.mr-#{$i}{ |
|||
margin-right: #{$i}px; |
|||
} |
|||
.mt-#{$i}{ |
|||
margin-top: #{$i}px; |
|||
} |
|||
.mb-#{$i}{ |
|||
margin-bottom: #{$i}px; |
|||
} |
|||
.\!m-#{$i}{ |
|||
margin: #{$i}px !important; |
|||
} |
|||
.\!ml-#{$i}{ |
|||
margin-left: #{$i}px !important; |
|||
} |
|||
.\!mr-#{$i}{ |
|||
margin-right: #{$i}px !important; |
|||
} |
|||
.\!mt-#{$i}{ |
|||
margin-top: #{$i}px !important; |
|||
} |
|||
.\!mb-#{$i}{ |
|||
margin-bottom: #{$i}px !important; |
|||
} |
|||
} |
|||
|
|||
/***** padding ******/ |
|||
@for $i from 1 through 32 { |
|||
.p-#{$i}{ |
|||
margin: #{$i}px; |
|||
} |
|||
.pl-#{$i}{ |
|||
padding-left: #{$i}px; |
|||
} |
|||
.pr-#{$i}{ |
|||
padding-right: #{$i}px; |
|||
} |
|||
.pt-#{$i}{ |
|||
padding-top: #{$i}px; |
|||
} |
|||
.pb-#{$i}{ |
|||
padding-bottom: #{$i}px; |
|||
} |
|||
.\!p-#{$i}{ |
|||
margin: #{$i}px !important; |
|||
} |
|||
.\!pl-#{$i}{ |
|||
padding-left: #{$i}px !important; |
|||
} |
|||
.\!pr-#{$i}{ |
|||
padding-right: #{$i}px !important; |
|||
} |
|||
.\!pt-#{$i}{ |
|||
padding-top: #{$i}px !important; |
|||
} |
|||
.\!pb-#{$i}{ |
|||
padding-bottom: #{$i}px !important; |
|||
} |
|||
} |
|||
@ -0,0 +1,178 @@ |
|||
<!-- 巡查管理页 --> |
|||
<template> |
|||
<div class="patrol-manage-page page"> |
|||
<div class="top-title">堤防巡查管理</div> |
|||
<div class="table-box"> |
|||
<div class="top-search"> |
|||
<span>堤防名称：</span> |
|||
<el-input |
|||
class="search-input" |
|||
v-model="searchInput" |
|||
placeholder="请输入堤防名称" |
|||
/> |
|||
<span>堤防类型：</span> |
|||
<el-select v-model="dikeType" placeholder="请选择"> |
|||
<el-option |
|||
v-for="item in dikeTypeList" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value" |
|||
> |
|||
</el-option> |
|||
</el-select> |
|||
<el-button |
|||
class="!ml-10" |
|||
type="success" |
|||
@click="getTableData(searchInput)" |
|||
>搜索</el-button |
|||
> |
|||
<el-button @click="resetSearch()">重置</el-button> |
|||
</div> |
|||
<el-table class="mt-16" height="625" :data="tableData" border> |
|||
<el-table-column type="index" align="center" label="序号" width="80" /> |
|||
<el-table-column prop="name" align="center" label="堤防名称" /> |
|||
<el-table-column prop="name" align="center" label="堤防代码" /> |
|||
<el-table-column prop="name" align="center" label="管理单位" /> |
|||
<el-table-column prop="name" align="center" label="行政主管部门" /> |
|||
<el-table-column prop="name" align="center" label="最近巡查时间" /> |
|||
<el-table-column prop="operate" align="center" label="操作"> |
|||
<template slot-scope="scope"> |
|||
<el-button |
|||
style="margin-right: 16px" |
|||
@click="handleSet(scope.row)" |
|||
type="text" |
|||
size="small" |
|||
>巡查配置</el-button |
|||
> |
|||
<el-button @click="handleGoPlan(scope.row)" type="text" size="small" |
|||
>计划管理</el-button |
|||
> |
|||
<el-button |
|||
@click="handleGoRecord(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> |
|||
<script> |
|||
import { getDikeProjectList } from "@/api/dike"; |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
pageData: { |
|||
pageNum: 1, |
|||
pageSize: 10, |
|||
total: 0, |
|||
}, |
|||
searchInput: "", |
|||
dikeTypeList: [ |
|||
{ |
|||
label: "全部", |
|||
value: "", |
|||
}, |
|||
], // 堤防类型列表 |
|||
dikeType: "", |
|||
tableData: [ |
|||
{ |
|||
dikeId: "123123", |
|||
dikeName: "test", |
|||
}, |
|||
], |
|||
}; |
|||
}, |
|||
created() {}, |
|||
mounted() { |
|||
this.getDikeTypeListData(); |
|||
this.getTableData(); |
|||
}, |
|||
methods: { |
|||
// 获取堤防类型数据 |
|||
getDikeTypeListData() {}, |
|||
// 获取列表信息 |
|||
getTableData() { |
|||
getDikeProjectList({ |
|||
pageNum: this.pageData.pageNum, |
|||
pageSize: this.pageData.pageSize, |
|||
type: this.dikeType || "", |
|||
}).then((res) => { |
|||
console.log("res >>>>> ", res); |
|||
}); |
|||
}, |
|||
// 重置搜索条件 |
|||
resetSearch() { |
|||
this.searchInput = ""; |
|||
this.dikeType = ""; |
|||
this.getTableData(); |
|||
}, |
|||
handleGoPlan(row) { |
|||
this.$router.push({ |
|||
path: "inspectionPlan", |
|||
query: { |
|||
id: row.dikeId, |
|||
}, |
|||
}); |
|||
}, |
|||
handleGoRecord(row) { |
|||
this.$router.push({ |
|||
path: "inspectionRecords", |
|||
query: { |
|||
id: row.dikeId, |
|||
}, |
|||
}); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style scoped lang="scss"> |
|||
.patrol-manage-page { |
|||
width: 100%; |
|||
min-height: calc(100vh - 56px); |
|||
padding-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 { |
|||
margin-bottom: 8px; |
|||
|
|||
.search-input { |
|||
width: 202px; |
|||
margin-right: 10px; |
|||
} |
|||
} |
|||
|
|||
.table { |
|||
height: calc(680px - 34px); |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,23 +1,367 @@ |
|||
<template> |
|||
<div class='dike-detail-page'> |
|||
<el-dialog v-model="show" :visible.sync="dialogVisible" title="堤防详情" width="720px"> |
|||
<div>弹窗内容</div> |
|||
<el-dialog :visible.sync="showDialog" title="堤防详情" width="960px"> |
|||
<div class="title">工程基础信息</div> |
|||
<el-row class="mt-12" :gutter="10"> |
|||
<el-col :span="8"> |
|||
<span>堤防名称：</span> |
|||
<span>这是什么名称啊啊啊啊啊</span> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<span>堤防编码：</span> |
|||
<span>44011111000009</span> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<span>起点所在行政区划：</span> |
|||
<span>广东省广州市白云区</span> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row class="mt-12" :gutter="10"> |
|||
<el-col :span="8"> |
|||
<span>终点所在行政区划：</span> |
|||
<span>广州市白云区</span> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<span>空间位置：</span> |
|||
<el-button type="primary" link>打开地图</el-button> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<span>起点桩号：</span> |
|||
<span>沉香沙0+000</span> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row class="mt-12" :gutter="10"> |
|||
<el-col :span="8"> |
|||
<span>终点桩号：</span> |
|||
<span>沉香沙3+212</span> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<span>堤防类型：</span> |
|||
<span>江河堤</span> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<span>是否为蓄滞洪区堤防：</span> |
|||
<span>否</span> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row class="mt-12" :gutter="10"> |
|||
<el-col :span="8"> |
|||
<span>堤防跨界情况：</span> |
|||
<span>未跨县</span> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<span>所在河流：</span> |
|||
<span>珠江西航道支1</span> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<span>河流岸别：</span> |
|||
<span>左岸</span> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row class="mt-12" :gutter="10"> |
|||
<el-col :span="8"> |
|||
<span>堤防型式：</span> |
|||
<span>土石混合堤</span> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<span>最近达标加固完工状态：</span> |
|||
<span>已开展达标加固</span> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<span>最近达标加固完工时间：</span> |
|||
<span>2021-11-12</span> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row class="mt-12" :gutter="10"> |
|||
<el-col :span="8"> |
|||
<span>建成时间：</span> |
|||
<span>-</span> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<span>工程任务：</span> |
|||
<span>防洪</span> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<span>堤防级别：</span> |
|||
<span>4级</span> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row class="mt-12" :gutter="10"> |
|||
<el-col :span="8"> |
|||
<span>设计防洪(潮)标准[重现期]：</span> |
|||
<span>20</span> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<span>规划防洪(潮)标准[重现期]：</span> |
|||
<span>20</span> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<span>堤防长度(m)：</span> |
|||
<span>3631</span> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row class="mt-12" :gutter="10"> |
|||
<el-col :span="8"> |
|||
<span>达标长度(m)：</span> |
|||
<span>-</span> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<span>保护人口(单位:万人)：</span> |
|||
<span>0</span> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<span>保护农田(单位:万亩)：</span> |
|||
<span>否</span> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row class="mt-12" :gutter="10"> |
|||
<el-col :span="8"> |
|||
<span>重要基础设施：</span> |
|||
<span></span> |
|||
</el-col> |
|||
<!-- <el-col :span="8"> |
|||
<span></span> |
|||
<span></span> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<span></span> |
|||
<span></span> |
|||
</el-col> --> |
|||
</el-row> |
|||
<div class="title mt-20">工程管理情况</div> |
|||
<div class="tile-line mt-10"> |
|||
<span class="pl-2 pr-2">工程管理单位</span> |
|||
</div> |
|||
<el-row class="mt-12" :gutter="10"> |
|||
<el-col :span="8"> |
|||
<span>工程管理单位：</span> |
|||
<span>广州市珠江前后航道流域实物中心</span> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<span>工程管理单位性质：</span> |
|||
<span>事业</span> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<span>工程管理单位权属：</span> |
|||
<span>市级管理</span> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row class="mt-12" :gutter="10"> |
|||
<el-col :span="8"> |
|||
<span>工程管理单位责任人：</span> |
|||
<span>胡细凤</span> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<span>工程管理单位负责人职务：</span> |
|||
<span>主任</span> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<span>工程管理单位责任人电话：</span> |
|||
<span>13609037391</span> |
|||
</el-col> |
|||
</el-row> |
|||
<div class="tile-line mt-10"> |
|||
<span class="pl-2 pr-2">水行政主管部门</span> |
|||
</div> |
|||
<el-row class="mt-12" :gutter="10"> |
|||
<el-col :span="8"> |
|||
<span>水行政主管部门：</span> |
|||
<span>广州市水务局</span> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<span>水行政主管部门性质：</span> |
|||
<span>机关</span> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<span>水行政主管部门负责人：</span> |
|||
<span>何矩文</span> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row class="mt-12" :gutter="10"> |
|||
<el-col :span="8"> |
|||
<span>水行政主管部门责任人职务：</span> |
|||
<span>二级调研员</span> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<span>水行政主管部门责任人电话：</span> |
|||
<span>13800000000</span> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<span>行业归口管理部门：水利部门</span> |
|||
<span>13609037391</span> |
|||
</el-col> |
|||
</el-row> |
|||
<div class="tile-line mt-10"> |
|||
<span class="pl-2 pr-2">防汛行政责任人</span> |
|||
</div> |
|||
<el-row class="mt-12" :gutter="10"> |
|||
<el-col :span="8"> |
|||
<span>防汛行政责任人：</span> |
|||
<span>周军</span> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<span>防汛行政责任人职务：</span> |
|||
<span>白云区副区长</span> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<span>防汛行政责任人手机号码：</span> |
|||
<span>13580325008</span> |
|||
</el-col> |
|||
</el-row> |
|||
<div class="tile-line mt-10"> |
|||
<span class="pl-2 pr-2">划界确权</span> |
|||
</div> |
|||
<el-row class="mt-12" :gutter="10"> |
|||
<el-col :span="8"> |
|||
<span>管理范围划界：</span> |
|||
<span>完成划定</span> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<span>完成时间：</span> |
|||
<span>2021-07</span> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<span></span> |
|||
<span></span> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row class="mt-12" :gutter="10"> |
|||
<el-col :span="24"> |
|||
<span>上传证明材料：</span> |
|||
<span>xxxxxxx报告.pdf</span> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row class="mt-12" :gutter="10"> |
|||
<el-col :span="8"> |
|||
<span>管理范围确权：</span> |
|||
<span>尚未开展</span> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<span>保护范围划界：</span> |
|||
<span>完成划定</span> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<span>完成时间：</span> |
|||
<span>2021-07</span> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row class="mt-12" :gutter="10"> |
|||
<el-col :span="24"> |
|||
<span>上传证明材料：</span> |
|||
<span>尚未开展</span> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row class="mt-12" :gutter="10"> |
|||
<el-col :span="24"> |
|||
<span>工程图片：</span> |
|||
<span></span> |
|||
</el-col> |
|||
</el-row> |
|||
<div class="tile-line mt-10"> |
|||
<span class="pl-2 pr-2">监控类型</span> |
|||
</div> |
|||
<el-row class="mt-12" :gutter="10"> |
|||
<el-col :span="8"> |
|||
<span>监控类型：</span> |
|||
<span>无监控</span> |
|||
</el-col> |
|||
</el-row> |
|||
<div class="title mt-20">工程管理情况</div> |
|||
<el-row class="mt-12" :gutter="10"> |
|||
<el-col :span="8"> |
|||
<span>监控类型：</span> |
|||
<span>无监控</span> |
|||
</el-col> |
|||
</el-row> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import { |
|||
listDikeInfo, |
|||
getDikeInfo, |
|||
delDikeInfo, |
|||
addDikeInfo, |
|||
updateDikeInfo, |
|||
exportDikeInfo, |
|||
} from "@/api/yg/dikeInfo"; |
|||
|
|||
export default { |
|||
props:{ |
|||
show:'' |
|||
value:Boolean, |
|||
id: String |
|||
}, |
|||
data(){ |
|||
return {} |
|||
return { |
|||
detailsData: null, |
|||
} |
|||
}, |
|||
computed:{ |
|||
showDialog: { |
|||
get(){ |
|||
return this.value |
|||
}, |
|||
set(val){ |
|||
this.$emit('input',val) |
|||
} |
|||
} |
|||
}, |
|||
watch:{ |
|||
value(newVal, old){ |
|||
if(newVal){ |
|||
this.initData() |
|||
} |
|||
} |
|||
}, |
|||
methods:{ |
|||
initData(){ |
|||
if(this.id){ |
|||
getDikeInfo(this.id).then(res=>{ |
|||
this.detailsData = res |
|||
}) |
|||
} |
|||
} |
|||
}, |
|||
created(){}, |
|||
methods:{} |
|||
mounted(){ |
|||
|
|||
}, |
|||
} |
|||
</script> |
|||
<style scoped lang='less'> |
|||
.dike-detail-page{ |
|||
.title{ |
|||
position: relative; |
|||
font-size: 14px; |
|||
font-weight: 700; |
|||
padding-left: 20px; |
|||
&::before{ |
|||
position: absolute; |
|||
left: 0; |
|||
top: 0; |
|||
content: " "; |
|||
background: #31a08e; |
|||
width: 4px; |
|||
height: 14px; |
|||
} |
|||
} |
|||
.tile-line{ |
|||
display: flex; |
|||
align-items: center; |
|||
&::before{ |
|||
flex: 1; |
|||
content: " "; |
|||
width: auto; |
|||
height: 1px; |
|||
background: #999; |
|||
} |
|||
&::after{ |
|||
flex: 1; |
|||
content: " "; |
|||
width: auto; |
|||
height: 1px; |
|||
background: #999; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
|
|||
Loading…
Reference in new issue