hejunjie
1 month ago
7 changed files with 2204 additions and 0 deletions
@ -0,0 +1,436 @@ |
|||
<template> |
|||
<div class="slider-right"> |
|||
<!-- <div class="top-title">{{ $router.currentRoute.meta.title }}</div> --> |
|||
<TopBackTitle></TopBackTitle> |
|||
<div class="table-box"> |
|||
<div class="top-box"> |
|||
<span>巡视检查名称：</span> |
|||
<el-input |
|||
:disabled="isEdit" |
|||
v-model="formData.name" |
|||
:maxlength="50" |
|||
size="small" |
|||
class="search-input" |
|||
placeholder="请输入巡视检查名称" |
|||
></el-input> |
|||
<span>巡检类型：</span> |
|||
<el-select |
|||
:disabled="isEdit" |
|||
v-model="formData.type" |
|||
placeholder="请选择" |
|||
> |
|||
<el-option |
|||
v-for="item in xcTypeOptions" |
|||
:key="item.dictValue" |
|||
:label="item.dictLabel" |
|||
:value="item.dictValue" |
|||
> |
|||
</el-option> |
|||
</el-select> |
|||
</div> |
|||
|
|||
<div class="xc-form-table"> |
|||
<el-row class="flex l-t-border"> |
|||
<div |
|||
class="w-240 flex-shrink-0 flex justify-center items-center r-b-border p-4" |
|||
> |
|||
<div>工程部位</div> |
|||
</div> |
|||
<div class="flex flex-1 w-full"> |
|||
<div class="flex-1 flex justify-center items-center r-b-border"> |
|||
<div>检查内容</div> |
|||
</div> |
|||
<div class="w-120 flex justify-center items-center r-b-border"> |
|||
<div>是否检查项</div> |
|||
</div> |
|||
</div> |
|||
</el-row> |
|||
<el-row |
|||
v-for="(item, index) in xcTreeData" |
|||
:key="item.key" |
|||
class="flex font-12" |
|||
> |
|||
<el-col> |
|||
<div class="flex w-full l-t-border"> |
|||
<div |
|||
class="flex items-center p-4 r-b-border" |
|||
:class="{ |
|||
'w-240 flex-shrink-0': !item.children.length, |
|||
'w-80 flex-shrink-0': item.children.length, |
|||
}" |
|||
> |
|||
{{ index + 1 }},{{ item.value }} |
|||
</div> |
|||
<div v-if="item.children.length" class="flex flex-1 flex-col"> |
|||
<div |
|||
class="flex flex-1" |
|||
v-for="item2 in item.children" |
|||
:key="item2.key" |
|||
> |
|||
<div |
|||
class="flex items-center p-4 r-b-border" |
|||
:class="{ |
|||
'w-80 flex-shrink-0': item2.children.length, |
|||
'w-160 flex-shrink-0': !item2.children.length, |
|||
}" |
|||
> |
|||
{{ item2.value }} |
|||
</div> |
|||
<div |
|||
v-if="item2.children.length" |
|||
class="flex flex-1 flex-col" |
|||
> |
|||
<div |
|||
class="flex" |
|||
v-for="item3 in item2.children" |
|||
:key="item3.key" |
|||
> |
|||
<div |
|||
class="flex items-center p-4 r-b-border w-80 flex-shrink-0" |
|||
> |
|||
{{ item3.value }} |
|||
</div> |
|||
<!-- 三级项目的问题 --> |
|||
<div class="flex flex-1 items-center"> |
|||
<div |
|||
class="flex flex-1 items-center p-4 r-b-border h-full" |
|||
> |
|||
<el-input |
|||
:disabled="!item3.check || isEdit" |
|||
v-model="item3.content" |
|||
type="textarea" |
|||
:rows="1" |
|||
:maxlength="500" |
|||
placeholder="请输入检查内容" |
|||
></el-input> |
|||
</div> |
|||
<div |
|||
class="w-120 flex justify-center items-center p-4 r-b-border h-full" |
|||
> |
|||
<el-radio-group |
|||
:disabled="isEdit" |
|||
class="inspection-radio-group" |
|||
v-model="item3.check" |
|||
> |
|||
<el-radio :disabled="isEdit" :label="true" |
|||
>是</el-radio |
|||
> |
|||
<el-radio :disabled="isEdit" :label="false" |
|||
>否</el-radio |
|||
> |
|||
</el-radio-group> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!-- 两级项目的问题 --> |
|||
<div v-else class="flex flex-1 items-center"> |
|||
<div class="flex-1 flex items-center p-4 r-b-border h-full"> |
|||
<el-input |
|||
:disabled="!item2.check || isEdit" |
|||
v-model="item2.content" |
|||
type="textarea" |
|||
:rows="1" |
|||
:maxlength="500" |
|||
placeholder="请输入检查内容" |
|||
></el-input> |
|||
</div> |
|||
<div |
|||
class="w-120 flex justify-center items-center p-4 r-b-border h-full" |
|||
> |
|||
<el-radio-group |
|||
:disabled="isEdit" |
|||
class="inspection-radio-group" |
|||
v-model="item2.check" |
|||
> |
|||
<el-radio :label="true">是</el-radio> |
|||
<el-radio :label="false">否</el-radio> |
|||
</el-radio-group> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!-- 只有一级项目的问题 --> |
|||
<div v-else class="flex flex-1 items-center"> |
|||
<div class="flex-1 flex items-center p-4 r-b-border h-full"> |
|||
<el-input |
|||
:disabled="!item.check || isEdit" |
|||
v-model="item.content" |
|||
type="textarea" |
|||
:rows="1" |
|||
:maxlength="500" |
|||
placeholder="请输入检查内容" |
|||
></el-input> |
|||
</div> |
|||
<div |
|||
class="w-120 flex justify-center items-center p-4 r-b-border h-full" |
|||
> |
|||
<el-radio-group |
|||
:disabled="isEdit" |
|||
class="inspection-radio-group" |
|||
v-model="item.check" |
|||
> |
|||
<el-radio :label="true">是</el-radio> |
|||
<el-radio :label="false">否</el-radio> |
|||
</el-radio-group> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
</el-row> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="bottom-btns"> |
|||
<el-button :disabled="isEdit" type="primary" @click="handleSave" |
|||
>保存</el-button |
|||
> |
|||
<el-button @click="$router.go(-1)">返回</el-button> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import { intersection } from "lodash"; |
|||
import { |
|||
putInspectionProjectData, |
|||
checkUsed, |
|||
postInspectionProjectData, |
|||
getCheckingDictTree, |
|||
getInspectionProjectDetails, |
|||
} from "@/api/dike"; |
|||
import TopBackTitle from "@/components/TopBackTitle/index.vue"; |
|||
|
|||
export default { |
|||
components: { |
|||
TopBackTitle, |
|||
}, |
|||
data() { |
|||
return { |
|||
xcTreeData: [], |
|||
xcTypeOptions: [], |
|||
isEdit: false, |
|||
formData: { |
|||
id: null, |
|||
name: "", |
|||
type: "", |
|||
items: [], |
|||
}, |
|||
}; |
|||
}, |
|||
created() { |
|||
// 获取巡查类型 |
|||
this.getDicts("xs_classfy").then((res) => { |
|||
if (res.data && Array.isArray(res.data)) { |
|||
this.xcTypeOptions = res.data; |
|||
} |
|||
}); |
|||
}, |
|||
methods: { |
|||
// 获取详情信息 |
|||
async getDetailsData() { |
|||
const dictData = await getCheckingDictTree("df_xs_c_classfy"); |
|||
let _xcTreeData = this.transformArr(dictData?.data); |
|||
const checkId = this.$route.query.id; |
|||
if (checkId) { |
|||
const detailData = await getInspectionProjectDetails(checkId); |
|||
if (detailData?.data?.items) { |
|||
// 匹配xcTreeData |
|||
this.formData.name = detailData.data.name; |
|||
this.formData.type = detailData.data.type; |
|||
this.matchXcTreeData(_xcTreeData, detailData.data.items); |
|||
} |
|||
const checkUsedData = await checkUsed(this.$route.query.id); |
|||
this.isEdit = checkUsedData?.data; |
|||
} |
|||
this.xcTreeData = _xcTreeData; |
|||
}, |
|||
// 树转换 |
|||
transformArr(treeList) { |
|||
// 递归设置路径 |
|||
function deepCalc(item, part = []) { |
|||
item.parts = [...part, item.key]; |
|||
if (item.children?.length) { |
|||
item.children.forEach((v) => { |
|||
if (!v.children || v.children.length === 0) { |
|||
v.parts = [...item.parts, v.key]; |
|||
v.content = v.remark || ""; |
|||
} else { |
|||
deepCalc(v, item.parts); |
|||
} |
|||
}); |
|||
} |
|||
} |
|||
treeList.forEach((item) => { |
|||
deepCalc(item); |
|||
}); |
|||
return treeList; |
|||
}, |
|||
// 匹配xcTreeData |
|||
matchXcTreeData(treeData, dataList) { |
|||
treeData.forEach((v) => { |
|||
if (!v.children?.length) { |
|||
for (const item of dataList) { |
|||
v.id = item.id; |
|||
if (intersection(v.parts, item.parts).length === v.parts.length) { |
|||
// 证明匹配成功 |
|||
v.content = item.content || ""; |
|||
v.check = true; |
|||
break; |
|||
} |
|||
} |
|||
} else { |
|||
this.matchXcTreeData(v.children, dataList); |
|||
} |
|||
}); |
|||
}, |
|||
|
|||
// 获取xcTreeData中的check为true的数据 |
|||
getCheckData(treeData) { |
|||
let res = []; |
|||
treeData.forEach((v) => { |
|||
if (v.check) { |
|||
res.push({ |
|||
parts: v.parts, |
|||
id: v.id || null, |
|||
content: v.content, |
|||
}); |
|||
} |
|||
if (v.children?.length) { |
|||
res = res.concat(this.getCheckData(v.children)); |
|||
} |
|||
}); |
|||
return res; |
|||
}, |
|||
|
|||
// 保存 |
|||
handleSave() { |
|||
if (!this.formData.name) { |
|||
this.$message.error("请输入巡视检查名称"); |
|||
return; |
|||
} |
|||
if (!this.formData.type) { |
|||
this.$message.error("请选择巡检类型"); |
|||
return; |
|||
} |
|||
this.formData.items = this.getCheckData(this.xcTreeData); |
|||
|
|||
if (this.$route.query.id) { |
|||
this.formData.id = this.$route.query.id; |
|||
} |
|||
|
|||
if (this.formData.id) { |
|||
putInspectionProjectData(this.formData).then((res) => { |
|||
this.$message.success("保存成功"); |
|||
setTimeout(() => { |
|||
this.$router.go(-1); |
|||
}, 500); |
|||
}); |
|||
} else { |
|||
postInspectionProjectData(this.formData).then((res) => { |
|||
if (res.data?.id) { |
|||
this.formData.id = res.data.id; |
|||
} |
|||
this.$message.success("保存成功"); |
|||
setTimeout(() => { |
|||
this.$router.go(-1); |
|||
}, 500); |
|||
}); |
|||
} |
|||
}, |
|||
}, |
|||
mounted() { |
|||
this.getDetailsData(); |
|||
}, |
|||
}; |
|||
</script> |
|||
<style scoped lang="scss"> |
|||
.top-title { |
|||
height: 50px; |
|||
background-color: white; |
|||
display: flex; |
|||
padding-left: 16px; |
|||
align-items: center; |
|||
font-weight: 600; |
|||
} |
|||
|
|||
.table-box { |
|||
width: 100%; |
|||
height: calc(100% - 50px - 24px); |
|||
margin-top: 24px; |
|||
padding: 16px; |
|||
background-color: white; |
|||
overflow: auto; |
|||
|
|||
.top-box { |
|||
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; |
|||
} |
|||
} |
|||
} |
|||
.xc-form-table { |
|||
} |
|||
.l-t-border { |
|||
border-left: 1px solid #eee; |
|||
border-top: 1px solid #eee; |
|||
} |
|||
.r-b-border { |
|||
border-right: 1px solid #eee; |
|||
border-bottom: 1px solid #eee; |
|||
} |
|||
|
|||
.w-p-20 { |
|||
width: 20%; |
|||
} |
|||
.w-p-80 { |
|||
width: 80%; |
|||
} |
|||
|
|||
.w-p-50 { |
|||
width: 50%; |
|||
} |
|||
|
|||
.w-80 { |
|||
width: 80px !important; |
|||
} |
|||
.w-120 { |
|||
width: 120px !important; |
|||
} |
|||
.w-160 { |
|||
width: 160px !important; |
|||
} |
|||
.w-240 { |
|||
width: 240px !important; |
|||
} |
|||
</style> |
|||
<style lang="scss"> |
|||
.inspection-radio-group { |
|||
.el-radio { |
|||
margin-right: 10px; |
|||
.el-radio__label { |
|||
padding-left: 4px; |
|||
} |
|||
&:last-child { |
|||
margin-right: 0; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,328 @@ |
|||
<!-- 巡查记录管理 --> |
|||
<template> |
|||
<div class="slider-right"> |
|||
<TopBackTitle :showBackBtn="false"></TopBackTitle> |
|||
<div class="table-box slider-right-body" ref="tableBoxRef"> |
|||
<div class="pb-16" ref="topBoxRef"> |
|||
<div class="search-form flex flex-wrap" ref="searchFormRef"> |
|||
<div class="search-item flex items-center"> |
|||
<span class="search-label">巡查名称</span> |
|||
<el-input |
|||
clearable |
|||
size="small" |
|||
class="w-202 ml-10" |
|||
:maxlength="50" |
|||
v-model="paramsData.patrolName" |
|||
placeholder="请输入名称" |
|||
/> |
|||
</div> |
|||
|
|||
<div class="search-item flex items-center"> |
|||
<span class="search-label">巡查类型</span> |
|||
<el-select |
|||
clearable |
|||
size="small" |
|||
class="w-202 ml-10" |
|||
v-model="paramsData.patrolType" |
|||
:popper-append-to-body="false" |
|||
filterable |
|||
placeholder="请选择" |
|||
> |
|||
<el-option label="全部" value=""> </el-option> |
|||
<el-option |
|||
v-for="item in xcTypeOptions" |
|||
:key="item.dictValue" |
|||
:label="item.dictLabel" |
|||
:value="item.dictValue" |
|||
> |
|||
</el-option> |
|||
</el-select> |
|||
</div> |
|||
|
|||
<div class="search-item flex items-center"> |
|||
<span class="search-label">巡查时间</span> |
|||
<el-date-picker |
|||
size="small" |
|||
class="ml-10" |
|||
v-model="paramsData.patrolTime" |
|||
type="daterange" |
|||
value-format="yyyy-MM-dd" |
|||
range-separator="至" |
|||
start-placeholder="开始日期" |
|||
end-placeholder="结束日期" |
|||
> |
|||
</el-date-picker> |
|||
</div> |
|||
|
|||
<div class="search-item flex items-center"> |
|||
<span class="search-label">巡查责任人</span> |
|||
<el-input |
|||
clearable |
|||
size="small" |
|||
class="w-202 ml-10" |
|||
:maxlength="50" |
|||
v-model="paramsData.dutyHolder" |
|||
placeholder="请输入名称" |
|||
/> |
|||
</div> |
|||
|
|||
<div class="search-item flex items-center"> |
|||
<span class="search-label">巡查类别</span> |
|||
<el-select |
|||
clearable |
|||
size="small" |
|||
class="w-202 ml-10" |
|||
v-model="paramsData.patrolCategory" |
|||
:popper-append-to-body="false" |
|||
filterable |
|||
placeholder="请选择" |
|||
> |
|||
<el-option label="全部" value=""> </el-option> |
|||
<el-option label="机电巡查" value="0"> </el-option> |
|||
<el-option label="工程巡查" value="1"> </el-option> |
|||
</el-select> |
|||
</div> |
|||
|
|||
<div class="search-item flex items-center"> |
|||
<span class="search-label">巡查状态</span> |
|||
<el-select |
|||
clearable |
|||
size="small" |
|||
class="w-202 ml-10" |
|||
v-model="paramsData.patrolStatus" |
|||
:popper-append-to-body="false" |
|||
filterable |
|||
placeholder="请选择" |
|||
> |
|||
<el-option label="全部" value=""> </el-option> |
|||
<el-option label="日常巡查" value="0"> </el-option> |
|||
<el-option label="不定期巡查" value="1"> </el-option> |
|||
<el-option label="汛前巡查" value="2"> </el-option> |
|||
</el-select> |
|||
</div> |
|||
<div class="flex-1 flex justify-end search-item"> |
|||
<el-button |
|||
size="small" |
|||
class="flex-shrink-0 myml-12" |
|||
type="success" |
|||
@click="handleChangeQuery" |
|||
>查询</el-button |
|||
> |
|||
<el-button |
|||
class="flex-shrink-0" |
|||
size="small" |
|||
@click="handleResetQuery" |
|||
>重置</el-button |
|||
> |
|||
</div> |
|||
</div> |
|||
<div class="line" ref="lineRef"></div> |
|||
</div> |
|||
<el-table |
|||
:height="tableHeight" |
|||
:data="tableData" |
|||
border |
|||
> |
|||
<el-table-column prop="orderNumber" align="center" label="单号" /> |
|||
<el-table-column prop="patrolName" align="center" label="巡查名称" /> |
|||
<el-table-column prop="patrolType" align="center" label="巡查类型"> |
|||
<template slot-scope="scope"> |
|||
<span>{{ |
|||
getDictLabelName(scope.row.patrolType, "xcTypeOptions") |
|||
}}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="patrolCategory" align="center" label="巡查类别"> |
|||
<template slot-scope="scope"> |
|||
<span>{{ |
|||
getDictLabelName(scope.row.patrolCategory, "xcTypeOptions") |
|||
}}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="patrolStatus" align="center" label="巡查状态"> |
|||
<template slot-scope="scope"> |
|||
<span>{{ |
|||
getDictLabelName(scope.row.patrolStatus, "xcTypeOptions") |
|||
}}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="dutyHolder" align="center" label="责任人" /> |
|||
<el-table-column |
|||
prop="startDate" |
|||
align="center" |
|||
label="巡查开始时间/结束时间" |
|||
> |
|||
<template slot-scope="scope"> |
|||
<span |
|||
>{{ scope.row.startDate || "-" }}/{{ |
|||
scope.row.endDate || "-" |
|||
}}</span |
|||
> |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
<el-table-column |
|||
prop="opera" |
|||
align="center" |
|||
label="操作" |
|||
fixed="right" |
|||
width="168" |
|||
> |
|||
<template slot-scope="scope"> |
|||
<el-button |
|||
type="text" |
|||
size="small" |
|||
@click="handleCheckDetails(scope.row, false)" |
|||
>查看</el-button |
|||
> |
|||
<el-button |
|||
type="text" |
|||
size="small" |
|||
@click="handleCheckDetails(scope.row, true)" |
|||
>编辑</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="(e) => handlePageSizeChange(e)" |
|||
@current-change="(e) => handleCurrentPageChange(e)" |
|||
> |
|||
</el-pagination> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import TopBackTitle from "@/components/TopBackTitle/index.vue"; |
|||
import { postDFInspectionRecordsList } from "@/api/management"; |
|||
import { calcTableHeight } from "@/mixins/calcTableHeight"; |
|||
|
|||
export default { |
|||
components: {TopBackTitle}, |
|||
mixins: [calcTableHeight], |
|||
data() { |
|||
return { |
|||
tableData: [ |
|||
{ |
|||
orderNumber: 1, |
|||
patrolName: '测试', |
|||
patrolType: '1', |
|||
patrolCategory: '1', |
|||
patrolStatus: '1', |
|||
dutyHolder: '测试', |
|||
} |
|||
], |
|||
xcTypeOptions: [], |
|||
handleStatusOptions: [], |
|||
currentRow: {}, |
|||
paramsData: { |
|||
patrolName: "", |
|||
patrolType: "", |
|||
patrolTime: [], |
|||
dutyHolder: '', |
|||
patrolCategory: '', |
|||
patrolStatus: '' |
|||
}, |
|||
pageData: { |
|||
pageNum: 1, // 当前页 |
|||
pageSize: 10, // 请求数量 |
|||
pageSizes: [10, 20, 50, 100], |
|||
total: 0, // 总数量 |
|||
}, |
|||
}; |
|||
}, |
|||
created() { |
|||
this.getDicts("xs_classfy").then((response) => { |
|||
this.xcTypeOptions = response.data; |
|||
}); |
|||
}, |
|||
methods: { |
|||
handleCurrentPageChange(page) { |
|||
this.pageData.pageNum = page; |
|||
this.getTableData(); |
|||
}, |
|||
handlePageSizeChange(pageSize) { |
|||
this.pageData.pageSize = pageSize; |
|||
this.getTableData(); |
|||
}, |
|||
|
|||
handleCheckDetails() { |
|||
this.$router.push({ |
|||
path: "inspectionRecordDetails", |
|||
}); |
|||
}, |
|||
getDictLabelName(type, dictListName) { |
|||
if (!this[dictListName]) return ""; |
|||
return ( |
|||
this[dictListName].find((item) => item.dictValue === type)?.dictLabel || |
|||
"" |
|||
); |
|||
}, |
|||
// 查询 |
|||
handleChangeQuery() { |
|||
this.reqCountCalc(); |
|||
this.pageData.pageNum = 1; |
|||
this.getTableData(); |
|||
}, |
|||
// 重置搜索 |
|||
handleResetQuery() { |
|||
this.paramsData.patrolName = ""; |
|||
this.paramsData.patrolType = ""; |
|||
this.paramsData.patrolTime = []; |
|||
this.paramsData.dutyHolder = ""; |
|||
this.paramsData.patrolCategory = ""; |
|||
this.paramsData.patrolStatus = ""; |
|||
this.reqCountCalc(); |
|||
this.pageData.pageNum = 1; |
|||
this.getTableData(); |
|||
}, |
|||
getTableData() { |
|||
postDFInspectionRecordsList({ |
|||
data: { |
|||
timeView: { |
|||
timeField: "create_time", |
|||
}, |
|||
adcd: this.paramsData.adcd, |
|||
dikeName: this.paramsData.dikeName, |
|||
dikeType: this.paramsData.dikeType, |
|||
lineName: this.paramsData.lineName, |
|||
lineType: this.paramsData.lineType, |
|||
dutyHolderType: this.paramsData.dutyHolderType, |
|||
// status: this.paramsData.status, |
|||
handleStatus: this.paramsData.handleStatus, |
|||
}, |
|||
params: { |
|||
sort: "desc", |
|||
orderBy: "create_time", |
|||
}, |
|||
pageSize: this.pageData.pageSize, |
|||
pageNum: this.pageData.pageNum, |
|||
}).then((res) => { |
|||
if (res) { |
|||
this.tableData = res.records; |
|||
this.pageData.total = res.total; |
|||
} |
|||
}); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style scoped lang="scss"> |
|||
.search-form { |
|||
.search-item { |
|||
margin-bottom: 16px; |
|||
.search-label { |
|||
width: 120px; |
|||
text-align: right; |
|||
flex-shrink: 0; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,329 @@ |
|||
<!-- 验收记录管理 --> |
|||
<template> |
|||
<div class="slider-right"> |
|||
<TopBackTitle :showBackBtn="false"></TopBackTitle> |
|||
<div class="table-box slider-right-body" ref="tableBoxRef"> |
|||
<div class="pb-16" ref="topBoxRef"> |
|||
<div class="search-form flex flex-wrap" ref="searchFormRef"> |
|||
<div class="search-item flex items-center"> |
|||
<span class="search-label">巡查名称</span> |
|||
<el-input |
|||
clearable |
|||
size="small" |
|||
class="w-202 ml-10" |
|||
:maxlength="50" |
|||
v-model="paramsData.patrolName" |
|||
placeholder="请输入名称" |
|||
/> |
|||
</div> |
|||
|
|||
<div class="search-item flex items-center"> |
|||
<span class="search-label">巡查类型</span> |
|||
<el-select |
|||
clearable |
|||
size="small" |
|||
class="w-202 ml-10" |
|||
v-model="paramsData.patrolType" |
|||
:popper-append-to-body="false" |
|||
filterable |
|||
placeholder="请选择" |
|||
> |
|||
<el-option label="全部" value=""> </el-option> |
|||
<el-option |
|||
v-for="item in xcTypeOptions" |
|||
:key="item.dictValue" |
|||
:label="item.dictLabel" |
|||
:value="item.dictValue" |
|||
> |
|||
</el-option> |
|||
</el-select> |
|||
</div> |
|||
|
|||
<div class="search-item flex items-center"> |
|||
<span class="search-label">巡查时间</span> |
|||
<el-date-picker |
|||
size="small" |
|||
class="ml-10" |
|||
v-model="paramsData.patrolTime" |
|||
type="daterange" |
|||
value-format="yyyy-MM-dd" |
|||
range-separator="至" |
|||
start-placeholder="开始日期" |
|||
end-placeholder="结束日期" |
|||
> |
|||
</el-date-picker> |
|||
</div> |
|||
|
|||
<div class="search-item flex items-center"> |
|||
<span class="search-label">巡查责任人</span> |
|||
<el-input |
|||
clearable |
|||
size="small" |
|||
class="w-202 ml-10" |
|||
:maxlength="50" |
|||
v-model="paramsData.dutyHolder" |
|||
placeholder="请输入名称" |
|||
/> |
|||
</div> |
|||
|
|||
<div class="search-item flex items-center"> |
|||
<span class="search-label">巡查类别</span> |
|||
<el-select |
|||
clearable |
|||
size="small" |
|||
class="w-202 ml-10" |
|||
v-model="paramsData.patrolCategory" |
|||
:popper-append-to-body="false" |
|||
filterable |
|||
placeholder="请选择" |
|||
> |
|||
<el-option label="全部" value=""> </el-option> |
|||
<el-option label="机电巡查" value="0"> </el-option> |
|||
<el-option label="工程巡查" value="1"> </el-option> |
|||
</el-select> |
|||
</div> |
|||
|
|||
<div class="search-item flex items-center"> |
|||
<span class="search-label">巡查状态</span> |
|||
<el-select |
|||
clearable |
|||
size="small" |
|||
class="w-202 ml-10" |
|||
v-model="paramsData.patrolStatus" |
|||
:popper-append-to-body="false" |
|||
filterable |
|||
placeholder="请选择" |
|||
> |
|||
<el-option label="全部" value=""> </el-option> |
|||
<el-option label="日常巡查" value="0"> </el-option> |
|||
<el-option label="不定期巡查" value="1"> </el-option> |
|||
<el-option label="汛前巡查" value="2"> </el-option> |
|||
</el-select> |
|||
</div> |
|||
<div class="flex-1 flex justify-end search-item"> |
|||
<el-button |
|||
size="small" |
|||
class="flex-shrink-0 myml-12" |
|||
type="success" |
|||
@click="handleChangeQuery" |
|||
>查询</el-button |
|||
> |
|||
<el-button |
|||
class="flex-shrink-0" |
|||
size="small" |
|||
@click="handleResetQuery" |
|||
>重置</el-button |
|||
> |
|||
</div> |
|||
</div> |
|||
<div class="line" ref="lineRef"></div> |
|||
</div> |
|||
<el-table |
|||
:height="tableHeight" |
|||
:data="tableData" |
|||
border |
|||
> |
|||
<el-table-column prop="orderNumber" align="center" label="单号" /> |
|||
<el-table-column prop="patrolName" align="center" label="巡查名称" /> |
|||
<el-table-column prop="patrolType" align="center" label="巡查类型"> |
|||
<template slot-scope="scope"> |
|||
<span>{{ |
|||
getDictLabelName(scope.row.patrolType, "xcTypeOptions") |
|||
}}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="patrolCategory" align="center" label="巡查类别"> |
|||
<template slot-scope="scope"> |
|||
<span>{{ |
|||
getDictLabelName(scope.row.patrolCategory, "xcTypeOptions") |
|||
}}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="patrolStatus" align="center" label="巡查状态"> |
|||
<template slot-scope="scope"> |
|||
<span>{{ |
|||
getDictLabelName(scope.row.patrolStatus, "xcTypeOptions") |
|||
}}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="dutyHolder" align="center" label="责任人" /> |
|||
<el-table-column |
|||
prop="startDate" |
|||
align="center" |
|||
label="巡查开始时间/结束时间" |
|||
> |
|||
<template slot-scope="scope"> |
|||
<span |
|||
>{{ scope.row.startDate || "-" }}/{{ |
|||
scope.row.endDate || "-" |
|||
}}</span |
|||
> |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
<el-table-column |
|||
prop="opera" |
|||
align="center" |
|||
label="操作" |
|||
fixed="right" |
|||
width="168" |
|||
> |
|||
<template slot-scope="scope"> |
|||
<el-button |
|||
type="text" |
|||
size="small" |
|||
@click="handleCheckDetails(scope.row, false)" |
|||
>查看</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="(e) => handlePageSizeChange(e)" |
|||
@current-change="(e) => handleCurrentPageChange(e)" |
|||
> |
|||
</el-pagination> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import TopBackTitle from "@/components/TopBackTitle/index.vue"; |
|||
import dayjs from "dayjs"; |
|||
import { postDFInspectionRecordsList } from "@/api/management"; |
|||
import { calcTableHeight } from "@/mixins/calcTableHeight"; |
|||
|
|||
export default { |
|||
components: {TopBackTitle}, |
|||
mixins: [calcTableHeight], |
|||
data() { |
|||
return { |
|||
dayjs, |
|||
tableData: [ |
|||
{ |
|||
orderNumber: 1, |
|||
patrolName: '测试', |
|||
patrolType: '1', |
|||
patrolCategory: '1', |
|||
patrolStatus: '1', |
|||
dutyHolder: '测试', |
|||
} |
|||
], |
|||
xcTypeOptions: [], |
|||
handleStatusOptions: [], |
|||
currentRow: {}, |
|||
paramsData: { |
|||
patrolName: "", |
|||
patrolType: "", |
|||
patrolTime: [], |
|||
dutyHolder: '', |
|||
patrolCategory: '', |
|||
patrolStatus: '' |
|||
}, |
|||
pageData: { |
|||
pageNum: 1, // 当前页 |
|||
pageSize: 10, // 请求数量 |
|||
pageSizes: [10, 20, 50, 100], |
|||
total: 0, // 总数量 |
|||
}, |
|||
}; |
|||
}, |
|||
created() { |
|||
this.getDicts("xs_classfy").then((response) => { |
|||
this.xcTypeOptions = response.data; |
|||
}); |
|||
}, |
|||
methods: { |
|||
handleCurrentPageChange(page) { |
|||
this.pageData.pageNum = page; |
|||
this.getTableData(); |
|||
}, |
|||
handlePageSizeChange(pageSize) { |
|||
this.pageData.pageSize = pageSize; |
|||
this.getTableData(); |
|||
}, |
|||
|
|||
handleCheckDetails(row, canEdit) { |
|||
this.currentRow = row; |
|||
this.currentRow.canEdit = !!canEdit; |
|||
this.dialogVisible = true; |
|||
}, |
|||
calcHours(start, end) { |
|||
if (!start || !end) return "-"; |
|||
return dayjs(end).diff(dayjs(start), "hour"); |
|||
}, |
|||
getDictLabelName(type, dictListName) { |
|||
if (!this[dictListName]) return ""; |
|||
return ( |
|||
this[dictListName].find((item) => item.dictValue === type)?.dictLabel || |
|||
"" |
|||
); |
|||
}, |
|||
// 查询 |
|||
handleChangeQuery() { |
|||
this.reqCountCalc(); |
|||
this.pageData.pageNum = 1; |
|||
this.getTableData(); |
|||
}, |
|||
// 重置搜索 |
|||
handleResetQuery() { |
|||
this.paramsData.patrolName = ""; |
|||
this.paramsData.patrolType = ""; |
|||
this.paramsData.patrolTime = []; |
|||
this.paramsData.dutyHolder = ""; |
|||
this.paramsData.patrolCategory = ""; |
|||
this.paramsData.patrolStatus = ""; |
|||
this.reqCountCalc(); |
|||
this.pageData.pageNum = 1; |
|||
this.getTableData(); |
|||
}, |
|||
getTableData() { |
|||
postDFInspectionRecordsList({ |
|||
data: { |
|||
timeView: { |
|||
timeField: "create_time", |
|||
}, |
|||
adcd: this.paramsData.adcd, |
|||
dikeName: this.paramsData.dikeName, |
|||
dikeType: this.paramsData.dikeType, |
|||
lineName: this.paramsData.lineName, |
|||
lineType: this.paramsData.lineType, |
|||
dutyHolderType: this.paramsData.dutyHolderType, |
|||
// status: this.paramsData.status, |
|||
handleStatus: this.paramsData.handleStatus, |
|||
}, |
|||
params: { |
|||
sort: "desc", |
|||
orderBy: "create_time", |
|||
}, |
|||
pageSize: this.pageData.pageSize, |
|||
pageNum: this.pageData.pageNum, |
|||
}).then((res) => { |
|||
if (res) { |
|||
this.tableData = res.records; |
|||
this.pageData.total = res.total; |
|||
} |
|||
}); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style scoped lang="scss"> |
|||
.search-form { |
|||
.search-item { |
|||
margin-bottom: 16px; |
|||
.search-label { |
|||
width: 120px; |
|||
text-align: right; |
|||
flex-shrink: 0; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
|
|||
@ -0,0 +1,256 @@ |
|||
<template> |
|||
<div class="slider-right"> |
|||
<!-- <div class="top-title">{{ $router.currentRoute.meta.title }}</div> --> |
|||
<TopBackTitle></TopBackTitle> |
|||
<div class="table-box"> |
|||
<div class="form-row-title">缺陷信息</div> |
|||
<div class="defectInformation"> |
|||
<el-row> |
|||
<el-col :span="8"> |
|||
<div class="tc-text2">堤防名称：</div> |
|||
<div class="tc-text1">123</div> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<div class="tc-text2">堤防巡查责任人：</div> |
|||
<div class="tc-text1">123</div> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<div class="tc-text2">巡查类别：</div> |
|||
<div class="tc-text1">123</div> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<div class="tc-text2">堤防巡查开始/结束时间：</div> |
|||
<div class="tc-text1">123</div> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<div class="tc-text2">巡查部位：</div> |
|||
<div class="tc-text1">123</div> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<div class="tc-text2">问题位置：</div> |
|||
<div class="tc-text1">123</div> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<div class="tc-text2">问题等级：</div> |
|||
<div class="tc-text1">123</div> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<div class="tc-text2">具体描述：</div> |
|||
<div class="tc-text1">123</div> |
|||
</el-col> |
|||
<el-col :span="24"> |
|||
<div class="tc-text2">缺陷图片：</div> |
|||
<div class="tc-text1">123</div> |
|||
</el-col> |
|||
</el-row> |
|||
</div> |
|||
<div class="form-row-title">养护记录</div> |
|||
<el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="top"> |
|||
<el-row gutter="48"> |
|||
<el-col span="8"> |
|||
<el-form-item label="维养责任人:" prop="name"> |
|||
<el-input |
|||
placeholder="请输入内容" |
|||
v-model="form.name"> |
|||
</el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col span="8"> |
|||
<el-form-item label="维养开始/结束时间：" prop="projectName"> |
|||
<el-date-picker |
|||
size="small" |
|||
class="ml-10" |
|||
style="width: 100%;" |
|||
v-model="form.time" |
|||
type="daterange" |
|||
value-format="yyyy-MM-dd" |
|||
range-separator="至" |
|||
start-placeholder="开始日期" |
|||
end-placeholder="结束日期" |
|||
> |
|||
</el-date-picker> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row> |
|||
<el-col span="16"> |
|||
<el-form-item label="维养详情：" prop="describe"> |
|||
<el-input |
|||
type="textarea" |
|||
:rows="4" |
|||
placeholder="请输入内容" |
|||
maxlength="200" |
|||
show-word-limit |
|||
v-model="form.describe"> |
|||
</el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
<el-form-item label="附件：" prop="describe"> |
|||
123 |
|||
</el-form-item> |
|||
</el-form> |
|||
|
|||
<el-table |
|||
:height="tableHeight" |
|||
:data="tableData" |
|||
style="margin-bottom: 16px;" |
|||
border |
|||
> |
|||
<el-table-column prop="nspectionLocation" align="center" label="巡查部位" /> |
|||
<el-table-column prop="inspectionContent" align="center" label="检查内容" /> |
|||
</el-table> |
|||
<div class="form-row-title">验收意见</div> |
|||
|
|||
<el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="right"> |
|||
<el-row gutter="48"> |
|||
<el-col span="8"> |
|||
<el-form-item label="复核人:" prop="name"> |
|||
<el-input |
|||
placeholder="请输入内容" |
|||
v-model="form.name"> |
|||
</el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col span="8"> |
|||
<el-form-item label="复核时间：" prop="projectName"> |
|||
<el-date-picker |
|||
size="small" |
|||
class="ml-10" |
|||
style="width: 100%;" |
|||
v-model="form.time" |
|||
type="daterange" |
|||
value-format="yyyy-MM-dd" |
|||
range-separator="至" |
|||
start-placeholder="开始日期" |
|||
end-placeholder="结束日期" |
|||
> |
|||
</el-date-picker> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row> |
|||
<el-col span="16"> |
|||
<el-form-item label="复核意见：" prop="describe"> |
|||
<el-input |
|||
type="textarea" |
|||
:rows="4" |
|||
placeholder="请输入内容" |
|||
maxlength="200" |
|||
show-word-limit |
|||
v-model="form.describe"> |
|||
</el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
</el-form> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import TopBackTitle from "@/components/TopBackTitle/index.vue"; |
|||
import {calcTableHeight} from "@/mixins/calcTableHeight"; |
|||
import SyMixMap from "@/views/components/SyMixMap.vue"; |
|||
import {getRecordDetails, getRecordTraceList} from "@/api/dike"; |
|||
|
|||
export default { |
|||
components: { |
|||
SyMixMap, |
|||
TopBackTitle, |
|||
}, |
|||
mixins: [calcTableHeight], |
|||
data() { |
|||
return { |
|||
entries: {}, |
|||
traceList: [], |
|||
tableData: [{ |
|||
nspectionLocation: '堤坡与戗台', |
|||
inspectionContent: '是否坚实平整', |
|||
}], |
|||
form: { |
|||
name: '张三', |
|||
projectName: '项目名称内容', |
|||
dikeName: '堤防名称内容', |
|||
inspectionCategory: '工程巡查', |
|||
time: [], |
|||
describe: '', |
|||
}, |
|||
rules: { |
|||
name: [{required: true}], |
|||
projectName: [{required: true}], |
|||
dikeName: [{required: true}], |
|||
inspectionCategory: [{required: true}], |
|||
time: [{required: true}], |
|||
describe: [{required: true}], |
|||
} |
|||
}; |
|||
}, |
|||
created() { |
|||
}, |
|||
mounted() { |
|||
this.initData() |
|||
}, |
|||
methods: { |
|||
async initData() { |
|||
const res = await getRecordDetails(17); |
|||
this.entries = res.data?.entries ? JSON.parse(res.data.entries) : {}; |
|||
getRecordTraceList({ |
|||
data: { |
|||
recordId: 17, |
|||
}, |
|||
params: { |
|||
orderBy: "create_time", |
|||
sort: "desc", // 升序 |
|||
}, |
|||
pageNum: 1, |
|||
pageSize: 100, |
|||
}).then((res) => { |
|||
this.traceList = |
|||
res.records |
|||
?.map((v) => { |
|||
return [v.longitude, v.latitude]; |
|||
}) |
|||
?.reverse() || []; |
|||
}); |
|||
|
|||
console.log('this.traceList', this.traceList) |
|||
console.log('this.entries', this.entries) |
|||
} |
|||
}, |
|||
}; |
|||
</script> |
|||
<style lang="scss"> |
|||
.table-box { |
|||
width: 100%; |
|||
height: calc(100% - 50px - 24px); |
|||
margin-top: 24px; |
|||
padding: 16px; |
|||
background-color: white; |
|||
overflow: auto; |
|||
} |
|||
.form-row-title { |
|||
font-size: 16px; |
|||
font-weight: bold; |
|||
margin-bottom: 16px; |
|||
border-left: 4px solid #36b29e; |
|||
padding-left: 8px; |
|||
} |
|||
.row-item { |
|||
display: flex; |
|||
font-size: 14px; |
|||
line-height: 22px; |
|||
margin-bottom: 16px; |
|||
& > div { |
|||
width: 50%; |
|||
} |
|||
} |
|||
.defectInformation { |
|||
.el-row { |
|||
margin-bottom: 16px; |
|||
.el-col { |
|||
margin-bottom: 16px; |
|||
} |
|||
} |
|||
|
|||
} |
|||
</style> |
|||
@ -0,0 +1,185 @@ |
|||
<template> |
|||
<div class="slider-right"> |
|||
<!-- <div class="top-title">{{ $router.currentRoute.meta.title }}</div> --> |
|||
<TopBackTitle></TopBackTitle> |
|||
<div class="table-box"> |
|||
<div class="form-row-title">巡查路线</div> |
|||
<div class="patrol-box"> |
|||
<el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="right"> |
|||
<el-form-item label="巡查人:" prop="name"> |
|||
{{ form.name }} |
|||
</el-form-item> |
|||
<el-form-item label="巡查项目名称:" prop="projectName"> |
|||
{{ form.projectName }} |
|||
</el-form-item> |
|||
<el-form-item label="巡查堤防名称:" prop="dikeName"> |
|||
{{ form.dikeName }} |
|||
</el-form-item> |
|||
<el-form-item label="巡查类别:" prop="inspectionCategory"> |
|||
{{ form.inspectionCategory }} |
|||
</el-form-item> |
|||
<el-form-item label="巡查时间:" prop="time"> |
|||
<el-date-picker |
|||
size="small" |
|||
class="ml-10" |
|||
v-model="form.time" |
|||
type="daterange" |
|||
value-format="yyyy-MM-dd" |
|||
range-separator="至" |
|||
start-placeholder="开始日期" |
|||
end-placeholder="结束日期" |
|||
> |
|||
</el-date-picker> |
|||
</el-form-item> |
|||
<el-form-item label="巡查范围:" prop="describe"> |
|||
<el-input |
|||
type="textarea" |
|||
:rows="4" |
|||
placeholder="请输入内容" |
|||
maxlength="200" |
|||
show-word-limit |
|||
v-model="form.describe"> |
|||
</el-input> |
|||
</el-form-item> |
|||
</el-form> |
|||
<div class="map-box"> |
|||
<SyMixMap |
|||
:showPosition="false" |
|||
:entries="entries" |
|||
:canEdit="false" |
|||
:traceList="traceList" |
|||
></SyMixMap> |
|||
</div> |
|||
</div> |
|||
<div class="form-row-title">巡查项</div> |
|||
|
|||
<el-table |
|||
:height="tableHeight" |
|||
:data="tableData" |
|||
style="margin-bottom: 16px;" |
|||
border |
|||
> |
|||
<el-table-column prop="nspectionLocation" align="center" label="巡查部位" /> |
|||
<el-table-column prop="inspectionContent" align="center" label="检查内容" /> |
|||
</el-table> |
|||
<div class="form-row-title">缺陷问题列表</div> |
|||
|
|||
<el-table |
|||
:height="tableHeight" |
|||
:data="tableData" |
|||
border |
|||
> |
|||
<el-table-column type="selection" width="55"></el-table-column> |
|||
<el-table-column prop="nspectionLocation" align="center" label="巡查部位" /> |
|||
<el-table-column prop="inspectionContent" align="center" label="问题等级" /> |
|||
<el-table-column prop="inspectionContent" align="center" label="具体位置" /> |
|||
<el-table-column prop="inspectionContent" align="center" label="具体描述" /> |
|||
<el-table-column prop="inspectionContent" align="center" label="缺陷照片" /> |
|||
<el-table-column prop="inspectionContent" align="center" label="维养状态" /> |
|||
<el-table-column prop="inspectionContent" align="center" label="操作" /> |
|||
</el-table> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import TopBackTitle from "@/components/TopBackTitle/index.vue"; |
|||
import {calcTableHeight} from "@/mixins/calcTableHeight"; |
|||
import SyMixMap from "@/views/components/SyMixMap.vue"; |
|||
import {getRecordDetails, getRecordTraceList} from "@/api/dike"; |
|||
|
|||
export default { |
|||
components: { |
|||
SyMixMap, |
|||
TopBackTitle, |
|||
}, |
|||
mixins: [calcTableHeight], |
|||
data() { |
|||
return { |
|||
entries: {}, |
|||
traceList: [], |
|||
tableData: [{ |
|||
nspectionLocation: '堤坡与戗台', |
|||
inspectionContent: '是否坚实平整', |
|||
}], |
|||
form: { |
|||
name: '张三', |
|||
projectName: '项目名称内容', |
|||
dikeName: '堤防名称内容', |
|||
inspectionCategory: '工程巡查', |
|||
time: [], |
|||
describe: '', |
|||
}, |
|||
rules: { |
|||
name: [{required: true}], |
|||
projectName: [{required: true}], |
|||
dikeName: [{required: true}], |
|||
inspectionCategory: [{required: true}], |
|||
time: [{required: true}], |
|||
describe: [{required: true}], |
|||
} |
|||
}; |
|||
}, |
|||
created() { |
|||
}, |
|||
mounted() { |
|||
this.initData() |
|||
}, |
|||
methods: { |
|||
async initData() { |
|||
const res = await getRecordDetails(17); |
|||
this.entries = res.data?.entries ? JSON.parse(res.data.entries) : {}; |
|||
getRecordTraceList({ |
|||
data: { |
|||
recordId: 17, |
|||
}, |
|||
params: { |
|||
orderBy: "create_time", |
|||
sort: "desc", // 升序 |
|||
}, |
|||
pageNum: 1, |
|||
pageSize: 100, |
|||
}).then((res) => { |
|||
this.traceList = |
|||
res.records |
|||
?.map((v) => { |
|||
return [v.longitude, v.latitude]; |
|||
}) |
|||
?.reverse() || []; |
|||
}); |
|||
|
|||
console.log('this.traceList', this.traceList) |
|||
console.log('this.entries', this.entries) |
|||
} |
|||
}, |
|||
}; |
|||
</script> |
|||
<style lang="scss"> |
|||
.table-box { |
|||
width: 100%; |
|||
height: calc(100% - 50px - 24px); |
|||
margin-top: 24px; |
|||
padding: 16px; |
|||
background-color: white; |
|||
overflow: auto; |
|||
} |
|||
.form-row-title { |
|||
font-size: 16px; |
|||
font-weight: bold; |
|||
margin-bottom: 16px; |
|||
border-left: 4px solid #36b29e; |
|||
padding-left: 8px; |
|||
} |
|||
.patrol-box { |
|||
display: flex; |
|||
height: 385px; |
|||
gap: 16px; |
|||
margin-bottom: 16px; |
|||
.el-form { |
|||
flex: 1; |
|||
} |
|||
.map-box { |
|||
width: 50%; |
|||
height: 100%; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,335 @@ |
|||
<!-- 缺陷清单管理 --> |
|||
<template> |
|||
<div class="slider-right"> |
|||
<TopBackTitle :showBackBtn="false"></TopBackTitle> |
|||
<div class="table-box slider-right-body" ref="tableBoxRef"> |
|||
<div class="pb-16" ref="topBoxRef"> |
|||
<div class="search-form flex flex-wrap" ref="searchFormRef"> |
|||
<div class="search-item flex items-center"> |
|||
<span class="search-label">巡查名称</span> |
|||
<el-input |
|||
clearable |
|||
size="small" |
|||
class="w-202 ml-10" |
|||
:maxlength="50" |
|||
v-model="paramsData.patrolName" |
|||
placeholder="请输入名称" |
|||
/> |
|||
</div> |
|||
|
|||
<div class="search-item flex items-center"> |
|||
<span class="search-label">巡查类型</span> |
|||
<el-select |
|||
clearable |
|||
size="small" |
|||
class="w-202 ml-10" |
|||
v-model="paramsData.patrolType" |
|||
:popper-append-to-body="false" |
|||
filterable |
|||
placeholder="请选择" |
|||
> |
|||
<el-option label="全部" value=""> </el-option> |
|||
<el-option |
|||
v-for="item in xcTypeOptions" |
|||
:key="item.dictValue" |
|||
:label="item.dictLabel" |
|||
:value="item.dictValue" |
|||
> |
|||
</el-option> |
|||
</el-select> |
|||
</div> |
|||
|
|||
<div class="search-item flex items-center"> |
|||
<span class="search-label">巡查时间</span> |
|||
<el-date-picker |
|||
size="small" |
|||
class="ml-10" |
|||
v-model="paramsData.patrolTime" |
|||
type="daterange" |
|||
value-format="yyyy-MM-dd" |
|||
range-separator="至" |
|||
start-placeholder="开始日期" |
|||
end-placeholder="结束日期" |
|||
> |
|||
</el-date-picker> |
|||
</div> |
|||
|
|||
<div class="search-item flex items-center"> |
|||
<span class="search-label">巡查责任人</span> |
|||
<el-input |
|||
clearable |
|||
size="small" |
|||
class="w-202 ml-10" |
|||
:maxlength="50" |
|||
v-model="paramsData.dutyHolder" |
|||
placeholder="请输入名称" |
|||
/> |
|||
</div> |
|||
|
|||
<div class="search-item flex items-center"> |
|||
<span class="search-label">巡查类别</span> |
|||
<el-select |
|||
clearable |
|||
size="small" |
|||
class="w-202 ml-10" |
|||
v-model="paramsData.patrolCategory" |
|||
:popper-append-to-body="false" |
|||
filterable |
|||
placeholder="请选择" |
|||
> |
|||
<el-option label="全部" value=""> </el-option> |
|||
<el-option label="机电巡查" value="0"> </el-option> |
|||
<el-option label="工程巡查" value="1"> </el-option> |
|||
</el-select> |
|||
</div> |
|||
|
|||
<div class="search-item flex items-center"> |
|||
<span class="search-label">巡查状态</span> |
|||
<el-select |
|||
clearable |
|||
size="small" |
|||
class="w-202 ml-10" |
|||
v-model="paramsData.patrolStatus" |
|||
:popper-append-to-body="false" |
|||
filterable |
|||
placeholder="请选择" |
|||
> |
|||
<el-option label="全部" value=""> </el-option> |
|||
<el-option label="日常巡查" value="0"> </el-option> |
|||
<el-option label="不定期巡查" value="1"> </el-option> |
|||
<el-option label="汛前巡查" value="2"> </el-option> |
|||
</el-select> |
|||
</div> |
|||
<div class="flex-1 flex justify-end search-item"> |
|||
<el-button |
|||
size="small" |
|||
class="flex-shrink-0 myml-12" |
|||
type="success" |
|||
@click="handleChangeQuery" |
|||
>查询</el-button |
|||
> |
|||
<el-button |
|||
class="flex-shrink-0" |
|||
size="small" |
|||
@click="handleResetQuery" |
|||
>重置</el-button |
|||
> |
|||
</div> |
|||
</div> |
|||
<div class="line" ref="lineRef"></div> |
|||
</div> |
|||
<el-table |
|||
:height="tableHeight" |
|||
:data="tableData" |
|||
border |
|||
> |
|||
<el-table-column prop="orderNumber" align="center" label="单号" /> |
|||
<el-table-column prop="patrolName" align="center" label="巡查名称" /> |
|||
<el-table-column prop="patrolType" align="center" label="巡查类型"> |
|||
<template slot-scope="scope"> |
|||
<span>{{ |
|||
getDictLabelName(scope.row.patrolType, "xcTypeOptions") |
|||
}}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="patrolCategory" align="center" label="巡查类别"> |
|||
<template slot-scope="scope"> |
|||
<span>{{ |
|||
getDictLabelName(scope.row.patrolCategory, "xcTypeOptions") |
|||
}}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="patrolStatus" align="center" label="巡查状态"> |
|||
<template slot-scope="scope"> |
|||
<span>{{ |
|||
getDictLabelName(scope.row.patrolStatus, "xcTypeOptions") |
|||
}}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="dutyHolder" align="center" label="责任人" /> |
|||
<el-table-column |
|||
prop="startDate" |
|||
align="center" |
|||
label="巡查开始时间/结束时间" |
|||
> |
|||
<template slot-scope="scope"> |
|||
<span |
|||
>{{ scope.row.startDate || "-" }}/{{ |
|||
scope.row.endDate || "-" |
|||
}}</span |
|||
> |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
<el-table-column |
|||
prop="opera" |
|||
align="center" |
|||
label="操作" |
|||
fixed="right" |
|||
width="168" |
|||
> |
|||
<template slot-scope="scope"> |
|||
<el-button |
|||
type="text" |
|||
size="small" |
|||
@click="handleCheckDetails(scope.row, false)" |
|||
>领单</el-button |
|||
> |
|||
<el-button |
|||
type="text" |
|||
size="small" |
|||
@click="handleCheckDetails(scope.row, true)" |
|||
>查看</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="(e) => handlePageSizeChange(e)" |
|||
@current-change="(e) => handleCurrentPageChange(e)" |
|||
> |
|||
</el-pagination> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import TopBackTitle from "@/components/TopBackTitle/index.vue"; |
|||
import dayjs from "dayjs"; |
|||
import { postDFInspectionRecordsList } from "@/api/management"; |
|||
import { calcTableHeight } from "@/mixins/calcTableHeight"; |
|||
|
|||
export default { |
|||
components: {TopBackTitle}, |
|||
mixins: [calcTableHeight], |
|||
data() { |
|||
return { |
|||
dayjs, |
|||
tableData: [ |
|||
{ |
|||
orderNumber: 1, |
|||
patrolName: '测试', |
|||
patrolType: '1', |
|||
patrolCategory: '1', |
|||
patrolStatus: '1', |
|||
dutyHolder: '测试', |
|||
} |
|||
], |
|||
xcTypeOptions: [], |
|||
handleStatusOptions: [], |
|||
currentRow: {}, |
|||
paramsData: { |
|||
patrolName: "", |
|||
patrolType: "", |
|||
patrolTime: [], |
|||
dutyHolder: '', |
|||
patrolCategory: '', |
|||
patrolStatus: '' |
|||
}, |
|||
pageData: { |
|||
pageNum: 1, // 当前页 |
|||
pageSize: 10, // 请求数量 |
|||
pageSizes: [10, 20, 50, 100], |
|||
total: 0, // 总数量 |
|||
}, |
|||
}; |
|||
}, |
|||
created() { |
|||
this.getDicts("xs_classfy").then((response) => { |
|||
this.xcTypeOptions = response.data; |
|||
}); |
|||
}, |
|||
methods: { |
|||
handleCurrentPageChange(page) { |
|||
this.pageData.pageNum = page; |
|||
this.getTableData(); |
|||
}, |
|||
handlePageSizeChange(pageSize) { |
|||
this.pageData.pageSize = pageSize; |
|||
this.getTableData(); |
|||
}, |
|||
|
|||
handleCheckDetails() { |
|||
this.$router.push({ |
|||
path: "defectDetails", |
|||
}); |
|||
}, |
|||
calcHours(start, end) { |
|||
if (!start || !end) return "-"; |
|||
return dayjs(end).diff(dayjs(start), "hour"); |
|||
}, |
|||
getDictLabelName(type, dictListName) { |
|||
if (!this[dictListName]) return ""; |
|||
return ( |
|||
this[dictListName].find((item) => item.dictValue === type)?.dictLabel || |
|||
"" |
|||
); |
|||
}, |
|||
// 查询 |
|||
handleChangeQuery() { |
|||
this.reqCountCalc(); |
|||
this.pageData.pageNum = 1; |
|||
this.getTableData(); |
|||
}, |
|||
// 重置搜索 |
|||
handleResetQuery() { |
|||
this.paramsData.patrolName = ""; |
|||
this.paramsData.patrolType = ""; |
|||
this.paramsData.patrolTime = []; |
|||
this.paramsData.dutyHolder = ""; |
|||
this.paramsData.patrolCategory = ""; |
|||
this.paramsData.patrolStatus = ""; |
|||
this.reqCountCalc(); |
|||
this.pageData.pageNum = 1; |
|||
this.getTableData(); |
|||
}, |
|||
getTableData() { |
|||
postDFInspectionRecordsList({ |
|||
data: { |
|||
timeView: { |
|||
timeField: "create_time", |
|||
}, |
|||
adcd: this.paramsData.adcd, |
|||
dikeName: this.paramsData.dikeName, |
|||
dikeType: this.paramsData.dikeType, |
|||
lineName: this.paramsData.lineName, |
|||
lineType: this.paramsData.lineType, |
|||
dutyHolderType: this.paramsData.dutyHolderType, |
|||
// status: this.paramsData.status, |
|||
handleStatus: this.paramsData.handleStatus, |
|||
}, |
|||
params: { |
|||
sort: "desc", |
|||
orderBy: "create_time", |
|||
}, |
|||
pageSize: this.pageData.pageSize, |
|||
pageNum: this.pageData.pageNum, |
|||
}).then((res) => { |
|||
if (res) { |
|||
this.tableData = res.records; |
|||
this.pageData.total = res.total; |
|||
} |
|||
}); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style scoped lang="scss"> |
|||
.search-form { |
|||
.search-item { |
|||
margin-bottom: 16px; |
|||
.search-label { |
|||
width: 120px; |
|||
text-align: right; |
|||
flex-shrink: 0; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
|
|||
@ -0,0 +1,335 @@ |
|||
<!-- 养护记录管理管理 --> |
|||
<template> |
|||
<div class="slider-right"> |
|||
<TopBackTitle :showBackBtn="false"></TopBackTitle> |
|||
<div class="table-box slider-right-body" ref="tableBoxRef"> |
|||
<div class="pb-16" ref="topBoxRef"> |
|||
<div class="search-form flex flex-wrap" ref="searchFormRef"> |
|||
<div class="search-item flex items-center"> |
|||
<span class="search-label">巡查名称</span> |
|||
<el-input |
|||
clearable |
|||
size="small" |
|||
class="w-202 ml-10" |
|||
:maxlength="50" |
|||
v-model="paramsData.patrolName" |
|||
placeholder="请输入名称" |
|||
/> |
|||
</div> |
|||
|
|||
<div class="search-item flex items-center"> |
|||
<span class="search-label">巡查类型</span> |
|||
<el-select |
|||
clearable |
|||
size="small" |
|||
class="w-202 ml-10" |
|||
v-model="paramsData.patrolType" |
|||
:popper-append-to-body="false" |
|||
filterable |
|||
placeholder="请选择" |
|||
> |
|||
<el-option label="全部" value=""> </el-option> |
|||
<el-option |
|||
v-for="item in xcTypeOptions" |
|||
:key="item.dictValue" |
|||
:label="item.dictLabel" |
|||
:value="item.dictValue" |
|||
> |
|||
</el-option> |
|||
</el-select> |
|||
</div> |
|||
|
|||
<div class="search-item flex items-center"> |
|||
<span class="search-label">巡查时间</span> |
|||
<el-date-picker |
|||
size="small" |
|||
class="ml-10" |
|||
v-model="paramsData.patrolTime" |
|||
type="daterange" |
|||
value-format="yyyy-MM-dd" |
|||
range-separator="至" |
|||
start-placeholder="开始日期" |
|||
end-placeholder="结束日期" |
|||
> |
|||
</el-date-picker> |
|||
</div> |
|||
|
|||
<div class="search-item flex items-center"> |
|||
<span class="search-label">巡查责任人</span> |
|||
<el-input |
|||
clearable |
|||
size="small" |
|||
class="w-202 ml-10" |
|||
:maxlength="50" |
|||
v-model="paramsData.dutyHolder" |
|||
placeholder="请输入名称" |
|||
/> |
|||
</div> |
|||
|
|||
<div class="search-item flex items-center"> |
|||
<span class="search-label">巡查类别</span> |
|||
<el-select |
|||
clearable |
|||
size="small" |
|||
class="w-202 ml-10" |
|||
v-model="paramsData.patrolCategory" |
|||
:popper-append-to-body="false" |
|||
filterable |
|||
placeholder="请选择" |
|||
> |
|||
<el-option label="全部" value=""> </el-option> |
|||
<el-option label="机电巡查" value="0"> </el-option> |
|||
<el-option label="工程巡查" value="1"> </el-option> |
|||
</el-select> |
|||
</div> |
|||
|
|||
<div class="search-item flex items-center"> |
|||
<span class="search-label">巡查状态</span> |
|||
<el-select |
|||
clearable |
|||
size="small" |
|||
class="w-202 ml-10" |
|||
v-model="paramsData.patrolStatus" |
|||
:popper-append-to-body="false" |
|||
filterable |
|||
placeholder="请选择" |
|||
> |
|||
<el-option label="全部" value=""> </el-option> |
|||
<el-option label="日常巡查" value="0"> </el-option> |
|||
<el-option label="不定期巡查" value="1"> </el-option> |
|||
<el-option label="汛前巡查" value="2"> </el-option> |
|||
</el-select> |
|||
</div> |
|||
<div class="flex-1 flex justify-end search-item"> |
|||
<el-button |
|||
size="small" |
|||
class="flex-shrink-0 myml-12" |
|||
type="success" |
|||
@click="handleChangeQuery" |
|||
>查询</el-button |
|||
> |
|||
<el-button |
|||
class="flex-shrink-0" |
|||
size="small" |
|||
@click="handleResetQuery" |
|||
>重置</el-button |
|||
> |
|||
</div> |
|||
</div> |
|||
<div class="line" ref="lineRef"></div> |
|||
</div> |
|||
<el-table |
|||
:height="tableHeight" |
|||
:data="tableData" |
|||
border |
|||
> |
|||
<el-table-column prop="orderNumber" align="center" label="单号" /> |
|||
<el-table-column prop="patrolName" align="center" label="巡查名称" /> |
|||
<el-table-column prop="patrolType" align="center" label="巡查类型"> |
|||
<template slot-scope="scope"> |
|||
<span>{{ |
|||
getDictLabelName(scope.row.patrolType, "xcTypeOptions") |
|||
}}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="patrolCategory" align="center" label="巡查类别"> |
|||
<template slot-scope="scope"> |
|||
<span>{{ |
|||
getDictLabelName(scope.row.patrolCategory, "xcTypeOptions") |
|||
}}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="patrolStatus" align="center" label="巡查状态"> |
|||
<template slot-scope="scope"> |
|||
<span>{{ |
|||
getDictLabelName(scope.row.patrolStatus, "xcTypeOptions") |
|||
}}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="dutyHolder" align="center" label="责任人" /> |
|||
<el-table-column |
|||
prop="startDate" |
|||
align="center" |
|||
label="巡查开始时间/结束时间" |
|||
> |
|||
<template slot-scope="scope"> |
|||
<span |
|||
>{{ scope.row.startDate || "-" }}/{{ |
|||
scope.row.endDate || "-" |
|||
}}</span |
|||
> |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
<el-table-column |
|||
prop="opera" |
|||
align="center" |
|||
label="操作" |
|||
fixed="right" |
|||
width="168" |
|||
> |
|||
<template slot-scope="scope"> |
|||
<el-button |
|||
type="text" |
|||
size="small" |
|||
@click="handleCheckDetails(scope.row, false)" |
|||
>查看</el-button |
|||
> |
|||
<el-button |
|||
type="text" |
|||
size="small" |
|||
@click="handleCheckDetails(scope.row, true)" |
|||
>编辑</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="(e) => handlePageSizeChange(e)" |
|||
@current-change="(e) => handleCurrentPageChange(e)" |
|||
> |
|||
</el-pagination> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import TopBackTitle from "@/components/TopBackTitle/index.vue"; |
|||
import dayjs from "dayjs"; |
|||
import { postDFInspectionRecordsList } from "@/api/management"; |
|||
import { calcTableHeight } from "@/mixins/calcTableHeight"; |
|||
|
|||
export default { |
|||
components: {TopBackTitle}, |
|||
mixins: [calcTableHeight], |
|||
data() { |
|||
return { |
|||
dayjs, |
|||
tableData: [ |
|||
{ |
|||
orderNumber: 1, |
|||
patrolName: '测试', |
|||
patrolType: '1', |
|||
patrolCategory: '1', |
|||
patrolStatus: '1', |
|||
dutyHolder: '测试', |
|||
} |
|||
], |
|||
xcTypeOptions: [], |
|||
handleStatusOptions: [], |
|||
currentRow: {}, |
|||
paramsData: { |
|||
patrolName: "", |
|||
patrolType: "", |
|||
patrolTime: [], |
|||
dutyHolder: '', |
|||
patrolCategory: '', |
|||
patrolStatus: '' |
|||
}, |
|||
pageData: { |
|||
pageNum: 1, // 当前页 |
|||
pageSize: 10, // 请求数量 |
|||
pageSizes: [10, 20, 50, 100], |
|||
total: 0, // 总数量 |
|||
}, |
|||
}; |
|||
}, |
|||
created() { |
|||
this.getDicts("xs_classfy").then((response) => { |
|||
this.xcTypeOptions = response.data; |
|||
}); |
|||
}, |
|||
methods: { |
|||
handleCurrentPageChange(page) { |
|||
this.pageData.pageNum = page; |
|||
this.getTableData(); |
|||
}, |
|||
handlePageSizeChange(pageSize) { |
|||
this.pageData.pageSize = pageSize; |
|||
this.getTableData(); |
|||
}, |
|||
|
|||
handleCheckDetails(row, canEdit) { |
|||
this.currentRow = row; |
|||
this.currentRow.canEdit = !!canEdit; |
|||
this.dialogVisible = true; |
|||
}, |
|||
calcHours(start, end) { |
|||
if (!start || !end) return "-"; |
|||
return dayjs(end).diff(dayjs(start), "hour"); |
|||
}, |
|||
getDictLabelName(type, dictListName) { |
|||
if (!this[dictListName]) return ""; |
|||
return ( |
|||
this[dictListName].find((item) => item.dictValue === type)?.dictLabel || |
|||
"" |
|||
); |
|||
}, |
|||
// 查询 |
|||
handleChangeQuery() { |
|||
this.reqCountCalc(); |
|||
this.pageData.pageNum = 1; |
|||
this.getTableData(); |
|||
}, |
|||
// 重置搜索 |
|||
handleResetQuery() { |
|||
this.paramsData.patrolName = ""; |
|||
this.paramsData.patrolType = ""; |
|||
this.paramsData.patrolTime = []; |
|||
this.paramsData.dutyHolder = ""; |
|||
this.paramsData.patrolCategory = ""; |
|||
this.paramsData.patrolStatus = ""; |
|||
this.reqCountCalc(); |
|||
this.pageData.pageNum = 1; |
|||
this.getTableData(); |
|||
}, |
|||
getTableData() { |
|||
postDFInspectionRecordsList({ |
|||
data: { |
|||
timeView: { |
|||
timeField: "create_time", |
|||
}, |
|||
adcd: this.paramsData.adcd, |
|||
dikeName: this.paramsData.dikeName, |
|||
dikeType: this.paramsData.dikeType, |
|||
lineName: this.paramsData.lineName, |
|||
lineType: this.paramsData.lineType, |
|||
dutyHolderType: this.paramsData.dutyHolderType, |
|||
// status: this.paramsData.status, |
|||
handleStatus: this.paramsData.handleStatus, |
|||
}, |
|||
params: { |
|||
sort: "desc", |
|||
orderBy: "create_time", |
|||
}, |
|||
pageSize: this.pageData.pageSize, |
|||
pageNum: this.pageData.pageNum, |
|||
}).then((res) => { |
|||
if (res) { |
|||
this.tableData = res.records; |
|||
this.pageData.total = res.total; |
|||
} |
|||
}); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style scoped lang="scss"> |
|||
.search-form { |
|||
.search-item { |
|||
margin-bottom: 16px; |
|||
.search-label { |
|||
width: 120px; |
|||
text-align: right; |
|||
flex-shrink: 0; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
|
|||
Loading…
Reference in new issue