panyuyi
1 month ago
15 changed files with 5216 additions and 0 deletions
@ -0,0 +1,97 @@ |
|||
// 堤防相关接口
|
|||
import request from "@/utils/request"; |
|||
export * from "./analysis"; |
|||
|
|||
/*************************************巡查记录管理**************************************/ |
|||
// 堤防巡视检查记录列表v2
|
|||
export function postV2RecordList(data) { |
|||
return request({ |
|||
url: "/run/sz/v2/record/list", |
|||
method: "post", |
|||
data, |
|||
}); |
|||
} |
|||
// 堤防巡视检查记录新增或修改v2
|
|||
export function postV2Record(data, commit) { |
|||
return request({ |
|||
url: `/run/sz/v2/record/${commit}`, |
|||
method: "post", |
|||
data, |
|||
}); |
|||
} |
|||
|
|||
// 堤防巡视检查记录详情v2
|
|||
export function gettV2Record(id) { |
|||
return request({ |
|||
url: `/run/sz/v2/record/${id}`, |
|||
method: "get", |
|||
}); |
|||
} |
|||
|
|||
/*************************************缺陷清单管理**************************************/ |
|||
// 堤防巡查缺陷列表v2
|
|||
export function postV2ProblemList(data) { |
|||
return request({ |
|||
url: "/run/sz/v2/problem/list", |
|||
method: "post", |
|||
data, |
|||
}); |
|||
} |
|||
/*************************************养护记录管理**************************************/ |
|||
// 堤防养护列表v2
|
|||
export function postV2YhList(data) { |
|||
return request({ |
|||
url: "/run/sz/v2/yh/list", |
|||
method: "post", |
|||
data, |
|||
}); |
|||
} |
|||
|
|||
// 堤防养护详情v2
|
|||
export function getV2Yh(id) { |
|||
return request({ |
|||
url: `/run/sz/v2/yh/${id}`, |
|||
method: "get", |
|||
}); |
|||
} |
|||
|
|||
// 堤防养护新增或修改v2
|
|||
export function postV2Yh(data, commit) { |
|||
return request({ |
|||
url: `/run/sz/v2/yh/${commit}`, |
|||
method: "post", |
|||
data, |
|||
}); |
|||
} |
|||
/*************************************验收记录管理**************************************/ |
|||
// 审批列表
|
|||
export function postV2ApprovalList(data) { |
|||
return request({ |
|||
url: "/run/sz/v2/yh/approval/list", |
|||
method: "post", |
|||
data, |
|||
}); |
|||
} |
|||
// 审批通过
|
|||
export function postV2ApprovalPassed(data, id) { |
|||
return request({ |
|||
url: `/run/sz/v2/yh/approval/passed/${id}`, |
|||
method: "post", |
|||
data, |
|||
}); |
|||
} |
|||
// 审批驳回
|
|||
export function postV2ApprovalRejected(data, id) { |
|||
return request({ |
|||
url: `/run/sz/v2/yh/approval/rejected/${id}`, |
|||
method: "post", |
|||
data, |
|||
}); |
|||
} |
|||
// 审批意见
|
|||
export function getV2ApprovalComment(formId) { |
|||
return request({ |
|||
url: `/run/sz/v2/yh/approval/comment/${formId}`, |
|||
method: "get", |
|||
}); |
|||
} |
|||
Binary file not shown.
@ -0,0 +1,371 @@ |
|||
<!-- 巡查记录管理 --> |
|||
<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.name" |
|||
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.type" |
|||
:popper-append-to-body="false" |
|||
filterable |
|||
placeholder="请选择" |
|||
> |
|||
<el-option label="全部" value=""></el-option> |
|||
<el-option |
|||
v-for="item in maintenanceType" |
|||
: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.time" |
|||
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.category" |
|||
:popper-append-to-body="false" |
|||
filterable |
|||
placeholder="请选择" |
|||
> |
|||
<el-option label="全部" value=""></el-option> |
|||
<el-option |
|||
v-for="item in maintenanceCategory" |
|||
: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-select |
|||
clearable |
|||
size="small" |
|||
class="w-202 ml-10" |
|||
v-model="paramsData.status" |
|||
:popper-append-to-body="false" |
|||
filterable |
|||
placeholder="请选择" |
|||
> |
|||
<el-option label="全部" value=""></el-option> |
|||
<el-option |
|||
v-for="item in maintenanceStatus" |
|||
:key="item.dictValue" |
|||
:label="item.dictLabel" |
|||
:value="item.dictValue" |
|||
> |
|||
</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="id" align="center" label="单号"/> |
|||
<el-table-column prop="checkingName" align="center" label="巡查名称"/> |
|||
<el-table-column prop="type" align="center" label="巡查类型"> |
|||
<template slot-scope="scope"> |
|||
<span>{{ |
|||
getDictLabelName(scope.row.type, "maintenanceType") |
|||
}}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="category" align="center" label="巡查类别"> |
|||
<template slot-scope="scope"> |
|||
<span>{{ |
|||
getDictLabelName(scope.row.category, "maintenanceCategory") |
|||
}}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="status" align="center" label="巡查状态" width="100"> |
|||
<template slot-scope="scope"> |
|||
<span style="position: relative" |
|||
:style="['3', '5', '6'].includes(scope.row.status) && {color: 'rgba(0,0,0,0.4)'}"> |
|||
<div |
|||
v-if="scope.row.status === '1'" |
|||
style="position: absolute;left: -16px;top: 6px;width: 8px;height: 8px;border-radius: 50%; background: #FFB20D" |
|||
></div> |
|||
<div |
|||
v-if="scope.row.status === '2'" |
|||
style="position: absolute;left: -16px;top: 6px;width: 8px;height: 8px;border-radius: 50%; background: #0EC885" |
|||
></div> |
|||
<div |
|||
v-if="scope.row.status === '4'" |
|||
style="position: absolute;left: -16px;top: 6px;width: 8px;height: 8px;border-radius: 50%; background: #3A89FE" |
|||
></div> |
|||
<div |
|||
v-if="['3', '5', '6'].includes(scope.row.status)" |
|||
style="position: absolute;left: -16px;top: 6px;width: 8px;height: 8px;border-radius: 50%; background: #A6A6A6" |
|||
></div> |
|||
{{ getDictLabelName(scope.row.status, "maintenanceStatus") }} |
|||
</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="createName" 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" |
|||
v-hasPermi="['df:run:patrol:inspection:list:item:check']" |
|||
@click="handleCheckDetails(scope.row, false)" |
|||
>查看 |
|||
</el-button |
|||
> |
|||
<el-button |
|||
type="text" |
|||
size="small" |
|||
:disabled="scope.row.status !== '1'" |
|||
v-hasPermi="['df:run:patrol:inspection:list:item:edit']" |
|||
@click="handleEditDetails(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 {calcTableHeight} from "@/mixins/calcTableHeight"; |
|||
|
|||
import { |
|||
postV2RecordList |
|||
} from "@/api/dike/patrolMaintenance"; |
|||
|
|||
export default { |
|||
components: {TopBackTitle}, |
|||
mixins: [calcTableHeight], |
|||
data() { |
|||
return { |
|||
tableData: [], |
|||
maintenanceStatus: [], |
|||
maintenanceCategory: [], |
|||
maintenanceType: [], |
|||
paramsData: { |
|||
name: "", |
|||
type: "", |
|||
time: [], |
|||
dutyHolder: '', |
|||
category: '', |
|||
status: '' |
|||
}, |
|||
pageData: { |
|||
pageNum: 1, // 当前页 |
|||
pageSize: 10, // 请求数量 |
|||
pageSizes: [10, 20, 50, 100], |
|||
total: 0, // 总数量 |
|||
}, |
|||
}; |
|||
}, |
|||
created() { |
|||
this.getDicts("patrol_maintenance_status").then((response) => { |
|||
this.maintenanceStatus = response.data; |
|||
}); |
|||
this.getDicts("patrol_maintenance_category").then((response) => { |
|||
this.maintenanceCategory = response.data; |
|||
}); |
|||
this.getDicts("patrol_maintenance_type").then((response) => { |
|||
this.maintenanceType = response.data; |
|||
}); |
|||
}, |
|||
mounted() { |
|||
this.getTableData() |
|||
}, |
|||
methods: { |
|||
handleCurrentPageChange(page) { |
|||
this.pageData.pageNum = page; |
|||
this.getTableData(); |
|||
}, |
|||
handlePageSizeChange(pageSize) { |
|||
this.pageData.pageSize = pageSize; |
|||
this.getTableData(); |
|||
}, |
|||
handleCheckDetails(row) { |
|||
this.$router.push({ |
|||
path: "inspectionRecordDetails", |
|||
query: {id: row.id, checkingId: row.checkingId, mode: "check"}, |
|||
}); |
|||
}, |
|||
handleEditDetails(row) { |
|||
this.$router.push({ |
|||
path: "inspectionRecordDetails", |
|||
query: {id: row.id, checkingId: row.checkingId, mode: "edit"}, |
|||
}); |
|||
}, |
|||
getDictLabelName(type, dictListName) { |
|||
if (!this[dictListName]) return ""; |
|||
return ( |
|||
this[dictListName].find((item) => item.dictValue === type)?.dictLabel || |
|||
"" |
|||
); |
|||
}, |
|||
// 查询 |
|||
handleChangeQuery() { |
|||
this.pageData.pageNum = 1; |
|||
this.getTableData(); |
|||
}, |
|||
// 重置搜索 |
|||
handleResetQuery() { |
|||
this.paramsData.name = ""; |
|||
this.paramsData.type = ""; |
|||
this.paramsData.time = []; |
|||
this.paramsData.dutyHolder = ""; |
|||
this.paramsData.category = ""; |
|||
this.paramsData.status = ""; |
|||
this.pageData.pageNum = 1; |
|||
this.getTableData(); |
|||
}, |
|||
getTableData() { |
|||
const data = { |
|||
name: this.paramsData.name, |
|||
type: this.paramsData.type, |
|||
dutyHolder: this.paramsData.dutyHolder, |
|||
category: this.paramsData.category, |
|||
status: this.paramsData.status, |
|||
startDate: this.paramsData.time && this.paramsData.time.length > 1 ? this.paramsData.time[0] : '', |
|||
endDate: this.paramsData.time && this.paramsData.time.length > 1 ? this.paramsData.time[1] : '', |
|||
} |
|||
postV2RecordList({ |
|||
data: { |
|||
timeView: { |
|||
timeField: "create_time", |
|||
}, |
|||
...data, |
|||
}, |
|||
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,389 @@ |
|||
<!-- 验收记录管理 --> |
|||
<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.name" |
|||
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.type" |
|||
:popper-append-to-body="false" |
|||
filterable |
|||
placeholder="请选择" |
|||
> |
|||
<el-option label="全部" value=""> </el-option> |
|||
<el-option |
|||
v-for="item in maintenanceType" |
|||
: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.time" |
|||
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.category" |
|||
:popper-append-to-body="false" |
|||
filterable |
|||
placeholder="请选择" |
|||
> |
|||
<el-option label="全部" value=""> </el-option> |
|||
<el-option |
|||
v-for="item in maintenanceCategory" |
|||
: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-select |
|||
clearable |
|||
size="small" |
|||
class="w-202 ml-10" |
|||
v-model="paramsData.status" |
|||
:popper-append-to-body="false" |
|||
filterable |
|||
placeholder="请选择" |
|||
> |
|||
<el-option label="全部" value=""> </el-option> |
|||
<el-option |
|||
v-for="item in maintenanceStatus" |
|||
: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-select |
|||
clearable |
|||
size="small" |
|||
class="w-202 ml-10" |
|||
v-model="paramsData.problemLevel" |
|||
:popper-append-to-body="false" |
|||
filterable |
|||
placeholder="请选择" |
|||
> |
|||
<el-option label="全部" value=""> </el-option> |
|||
<el-option |
|||
v-for="item in maintenanceLevel" |
|||
:key="item.dictValue" |
|||
:label="item.dictLabel" |
|||
:value="item.dictValue" |
|||
> |
|||
</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="id" align="center" label="单号" /> |
|||
<el-table-column prop="detail.name" align="center" label="巡查名称" /> |
|||
<el-table-column align="center" label="巡查类型"> |
|||
<template slot-scope="scope"> |
|||
<span>{{ |
|||
getDictLabelName(scope.row.detail.type, "maintenanceType") |
|||
}}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="category" align="center" label="巡查类别"> |
|||
<template slot-scope="scope"> |
|||
<span>{{ |
|||
getDictLabelName(scope.row.detail.category || '', "maintenanceCategory") |
|||
}}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="status" align="center" label="巡查状态" width="100"> |
|||
<template slot-scope="scope"> |
|||
<span style="position: relative" |
|||
:style="['3', '5', '6'].includes(scope.row.detail.status) && {color: 'rgba(0,0,0,0.4)'}"> |
|||
<div |
|||
v-if="scope.row.detail.status === '1'" |
|||
style="position: absolute;left: -16px;top: 6px;width: 8px;height: 8px;border-radius: 50%; background: #FFB20D" |
|||
></div> |
|||
<div |
|||
v-if="scope.row.detail.status === '2'" |
|||
style="position: absolute;left: -16px;top: 6px;width: 8px;height: 8px;border-radius: 50%; background: #0EC885" |
|||
></div> |
|||
<div |
|||
v-if="scope.row.detail.status === '4'" |
|||
style="position: absolute;left: -16px;top: 6px;width: 8px;height: 8px;border-radius: 50%; background: #3A89FE" |
|||
></div> |
|||
<div |
|||
v-if="['3', '5', '6'].includes(scope.row.detail.status)" |
|||
style="position: absolute;left: -16px;top: 6px;width: 8px;height: 8px;border-radius: 50%; background: #A6A6A6" |
|||
></div> |
|||
{{ getDictLabelName(scope.row.detail.status, "maintenanceStatus") }} |
|||
</span> |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
<el-table-column align="center" label="问题等级" width="120"> |
|||
<template slot-scope="scope"> |
|||
<span>{{ |
|||
getDictLabelName(scope.row.detail.problemLevel || '', "maintenanceLevel") |
|||
}}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="detail.dutyHolderName" align="center" label="责任人" /> |
|||
<el-table-column |
|||
prop="submitTime" |
|||
align="center" |
|||
label="验收时间" |
|||
/> |
|||
|
|||
<el-table-column |
|||
prop="opera" |
|||
align="center" |
|||
label="操作" |
|||
fixed="right" |
|||
width="168" |
|||
> |
|||
<template slot-scope="scope"> |
|||
<el-button |
|||
type="text" |
|||
size="small" |
|||
v-hasPermi="['df:run:patrol:acceptance:list:item:check']" |
|||
@click="handleCheckDetails(scope.row, 'check')" |
|||
>查看</el-button |
|||
> |
|||
<el-button |
|||
type="text" |
|||
size="small" |
|||
:disabled="scope.row.detail.status === '5'" |
|||
v-hasPermi="['df:run:patrol:acceptance:list:item:edit']" |
|||
@click="handleCheckDetails(scope.row, 'edit')" |
|||
>编辑</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 { calcTableHeight } from "@/mixins/calcTableHeight"; |
|||
|
|||
import { postV2ApprovalList } from "@/api/dike/patrolMaintenance"; |
|||
export default { |
|||
components: { TopBackTitle }, |
|||
mixins: [calcTableHeight], |
|||
data() { |
|||
return { |
|||
tableData: [], |
|||
maintenanceStatus: [], |
|||
maintenanceCategory: [], |
|||
maintenanceType: [], |
|||
maintenanceLevel: [], |
|||
paramsData: { |
|||
name: "", |
|||
type: "", |
|||
time: [], |
|||
dutyHolder: "", |
|||
category: "", |
|||
problemLevel: "", |
|||
status: "", |
|||
}, |
|||
pageData: { |
|||
pageNum: 1, // 当前页 |
|||
pageSize: 10, // 请求数量 |
|||
pageSizes: [10, 20, 50, 100], |
|||
total: 0, // 总数量 |
|||
}, |
|||
}; |
|||
}, |
|||
created() { |
|||
this.getDicts("patrol_maintenance_status").then((response) => { |
|||
this.maintenanceStatus = response.data; |
|||
}); |
|||
this.getDicts("patrol_maintenance_category").then((response) => { |
|||
this.maintenanceCategory = response.data; |
|||
}); |
|||
this.getDicts("patrol_maintenance_type").then((response) => { |
|||
this.maintenanceType = response.data; |
|||
}); |
|||
this.getDicts("patrol_maintenance_level").then((response) => { |
|||
this.maintenanceLevel = response.data; |
|||
}); |
|||
}, |
|||
mounted() { |
|||
this.getTableData(); |
|||
}, |
|||
methods: { |
|||
handleCurrentPageChange(page) { |
|||
this.pageData.pageNum = page; |
|||
this.getTableData(); |
|||
}, |
|||
handlePageSizeChange(pageSize) { |
|||
this.pageData.pageSize = pageSize; |
|||
this.getTableData(); |
|||
}, |
|||
handleCheckDetails(row, mode) { |
|||
this.$router.push({ |
|||
path: "acceptanceDetails", |
|||
query: { id: row.id, formId: row.formId, recordId: row.detail.recordId, defectId: row.detail.problemId, mode: mode }, |
|||
}); |
|||
}, |
|||
getDictLabelName(type, dictListName) { |
|||
if (!this[dictListName]) return ""; |
|||
return ( |
|||
this[dictListName].find((item) => item.dictValue === type)?.dictLabel || |
|||
"" |
|||
); |
|||
}, |
|||
// 查询 |
|||
handleChangeQuery() { |
|||
this.pageData.pageNum = 1; |
|||
this.getTableData(); |
|||
}, |
|||
// 重置搜索 |
|||
handleResetQuery() { |
|||
this.paramsData.name = ""; |
|||
this.paramsData.type = ""; |
|||
this.paramsData.time = []; |
|||
this.paramsData.dutyHolder = ""; |
|||
this.paramsData.category = ""; |
|||
this.paramsData.status = ""; |
|||
this.paramsData.problemLevel = ""; |
|||
this.pageData.pageNum = 1; |
|||
this.getTableData(); |
|||
}, |
|||
getTableData() { |
|||
const data = { |
|||
condition: { |
|||
status: this.paramsData.status, |
|||
name: this.paramsData.name, |
|||
type: this.paramsData.type, |
|||
dutyHolder: this.paramsData.dutyHolder, |
|||
category: this.paramsData.category, |
|||
problemLevel: this.paramsData.problemLevel, |
|||
startDate: |
|||
this.paramsData.time && this.paramsData.time.length > 1 |
|||
? this.paramsData.time[0] |
|||
: "", |
|||
endDate: |
|||
this.paramsData.time && this.paramsData.time.length > 1 |
|||
? this.paramsData.time[1] |
|||
: "", |
|||
} |
|||
}; |
|||
postV2ApprovalList({ |
|||
data: { |
|||
timeView: { |
|||
timeField: "create_time", |
|||
}, |
|||
...data, |
|||
}, |
|||
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,397 @@ |
|||
<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">{{ form.dikeName }}</div> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<div class="tc-text2">堤防巡查责任人：</div> |
|||
<div class="tc-text1">{{ form.createName }}</div> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<div class="tc-text2">巡查类别：</div> |
|||
<div class="tc-text1"> |
|||
{{getDictLabelName(form.category, "maintenanceCategory") }} |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<div class="tc-text2">堤防巡查开始/结束时间：</div> |
|||
<div class="tc-text1">{{ form.startDate }}/{{ form.endDate }}</div> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<div class="tc-text2">巡查部位：</div> |
|||
<div class="tc-text1">{{ form.partsName }}</div> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<div class="tc-text2">问题位置：</div> |
|||
<div class="tc-text1">{{ form.position }}</div> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<div class="tc-text2">问题等级：</div> |
|||
<div class="tc-text1"> |
|||
{{getDictLabelName(form.problemLevel, "maintenanceLevel") }} |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<div class="tc-text2">具体描述：</div> |
|||
<div class="tc-text1">{{ form.content }}</div> |
|||
</el-col> |
|||
<el-col :span="24"> |
|||
<div class="tc-text2">缺陷图片：</div> |
|||
<div class="tc-text1"> |
|||
<el-image |
|||
v-for="item in form.problemImages" |
|||
style="width: 240px; height: 135px;margin-right: 16px;" |
|||
:src="item" |
|||
:preview-src-list="form.problemImages"> |
|||
</el-image> |
|||
</div> |
|||
</el-col> |
|||
</el-row> |
|||
</div> |
|||
<div class="form-row-title">养护记录</div> |
|||
<el-form :model="form" :rules="rules" label-width="120px" label-position="top"> |
|||
<el-row :gutter="48"> |
|||
<el-col :span="8"> |
|||
<el-form-item label="维养责任人:" prop="userName"> |
|||
<el-input |
|||
disabled |
|||
placeholder="请输入内容" |
|||
v-model="form.userName"> |
|||
</el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-form-item label="维养开始/结束时间：" prop="time"> |
|||
<el-date-picker |
|||
size="small" |
|||
class="ml-10" |
|||
style="width: 100%;" |
|||
disabled |
|||
v-model="form.time" |
|||
type="daterange" |
|||
value-format="yyyy-MM-dd HH:mm:ss" |
|||
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" |
|||
disabled |
|||
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"> |
|||
<el-image |
|||
v-for="item in form.images" |
|||
style="width: 240px; height: 135px;margin-right: 16px;" |
|||
:src="item.url" |
|||
:preview-src-list="form.images"> |
|||
</el-image> |
|||
</el-form-item> |
|||
</el-form> |
|||
<el-table |
|||
:height="tableHeight" |
|||
:data="fileData" |
|||
style="margin-bottom: 16px;" |
|||
border |
|||
> |
|||
<el-table-column type="index" align="center" label="序号" /> |
|||
<el-table-column prop="name" align="center" label="附件名称" /> |
|||
<el-table-column prop="url" align="center" label="附件详情" /> |
|||
<el-table-column align="center" label="操作" fixed="right" width="168"> |
|||
<template slot-scope="scope"> |
|||
<div style="display:flex;"> |
|||
<el-button disabled size="small" style="margin-right: 10px;" type="text">上传</el-button> |
|||
<el-button |
|||
type="text" |
|||
size="small" |
|||
disabled |
|||
slot="reference" |
|||
v-hasPermi="['df:run:checking:item:delete']" |
|||
>删除</el-button |
|||
> |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
</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="operator"> |
|||
<el-input |
|||
disabled |
|||
placeholder="请输入内容" |
|||
v-model="form.operator"> |
|||
</el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-form-item label="复核时间：" prop="approvalTime"> |
|||
<el-date-picker |
|||
size="small" |
|||
class="ml-10" |
|||
:disabled="$route.query.mode === 'check'" |
|||
style="width: 100%;" |
|||
v-model="form.approvalTime" |
|||
type="date" |
|||
value-format="yyyy-MM-dd HH:mm:ss" |
|||
> |
|||
</el-date-picker> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row> |
|||
<el-col :span="16"> |
|||
<el-form-item label="复核意见：" prop="comment"> |
|||
<el-input |
|||
type="textarea" |
|||
:rows="4" |
|||
:disabled="$route.query.mode === 'check'" |
|||
placeholder="请输入内容" |
|||
maxlength="200" |
|||
show-word-limit |
|||
v-model="form.comment"> |
|||
</el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
</el-form> |
|||
</div> |
|||
<div class="bottom-btns" v-if="$route.query.mode !== 'check'"> |
|||
<el-button |
|||
type="primary" |
|||
@click="handleAccept(true)" |
|||
v-hasPermi="['df:run:patrol:acceptance:detail:passed']" |
|||
>通过</el-button |
|||
> |
|||
<el-button |
|||
type="danger" |
|||
@click="handleAccept(false)" |
|||
v-hasPermi="['df:run:patrol:acceptance:detail:rejected']" |
|||
>驳回</el-button |
|||
> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import TopBackTitle from "@/components/TopBackTitle/index.vue"; |
|||
import {calcTableHeight} from "@/mixins/calcTableHeight"; |
|||
import SyMixMap from "@/views/components/SyMixMap.vue"; |
|||
import {getV2Yh, getV2ApprovalComment, gettV2Record, postV2ApprovalPassed, postV2ApprovalRejected} from "@/api/dike/patrolMaintenance"; |
|||
import {getDictMapData} from "@/api/system/dict/data"; |
|||
import {mapGetters} from "vuex"; |
|||
|
|||
export default { |
|||
components: { |
|||
SyMixMap, |
|||
TopBackTitle, |
|||
}, |
|||
mixins: [calcTableHeight], |
|||
data() { |
|||
return { |
|||
entries: {}, |
|||
traceList: [], |
|||
fileData: [], |
|||
maintenanceCategory: [], |
|||
maintenanceLevel: [], |
|||
tableData: [{ |
|||
nspectionLocation: '堤坡与戗台', |
|||
inspectionContent: '是否坚实平整', |
|||
}], |
|||
form: { |
|||
operator: '', |
|||
approvalTime: '', |
|||
comment: '', |
|||
images: '', |
|||
createName: '', |
|||
userName: '', |
|||
dikeName: '', |
|||
category: '', |
|||
parts: '', |
|||
partsName: '', |
|||
content: '', |
|||
describe: '', |
|||
position: '', |
|||
problemImages: '', |
|||
problemLevel: '', |
|||
createUid: '', |
|||
dikeCode: '', |
|||
dikeType: '', |
|||
type: '', |
|||
time: [], |
|||
scope: '', |
|||
}, |
|||
rules: { |
|||
userName: [{required: true}], |
|||
projectName: [{required: true}], |
|||
dikeName: [{required: true}], |
|||
inspectionCategory: [{required: true}], |
|||
time: [{required: true}], |
|||
describe: [{required: true}], |
|||
operator: [{required: true}], |
|||
approvalTime: [{required: true, message: "请选择复核时间", trigger: "change"}], |
|||
comment: [{required: true, message: "请输入复核意见", trigger: "change"}], |
|||
} |
|||
}; |
|||
}, |
|||
created() { |
|||
this.getDicts("patrol_maintenance_category").then((response) => { |
|||
this.maintenanceCategory = response.data; |
|||
}); |
|||
this.getDicts("patrol_maintenance_level").then((response) => { |
|||
this.maintenanceLevel = response.data; |
|||
}); |
|||
}, |
|||
mounted() { |
|||
this.initData() |
|||
}, |
|||
computed: { |
|||
...mapGetters({ |
|||
userId: "uid", |
|||
userName: "name", |
|||
}), |
|||
}, |
|||
methods: { |
|||
async initData() { |
|||
const checking = await gettV2Record(this.$route.query.recordId) |
|||
this.form.createName = checking.data.createName |
|||
this.form.operator = this.userName |
|||
this.form.dikeName = checking.data.dikeName |
|||
this.form.checkingId = checking.data.checkingId |
|||
this.form.checkingName = checking.data.checkingName |
|||
this.form.status = checking.data.status |
|||
this.form.problems = checking.data.problems |
|||
this.form.category = checking.data.category |
|||
this.form.createUid = checking.data.createUid |
|||
this.form.dikeCode = checking.data.dikeCode |
|||
this.form.dikeType = checking.data.dikeType |
|||
this.form.type = checking.data.type |
|||
this.form.startDate = checking.data.startDate |
|||
this.form.endDate = checking.data.endDate |
|||
checking.data.problems.forEach(item => { |
|||
if(item.id === this.$route.query.defectId) { |
|||
this.form.content = item.content |
|||
this.form.position = item.position |
|||
this.form.parts = item.parts |
|||
getDictMapData("df_xs_c_classfy").then((res) => { |
|||
let parts = '' |
|||
item.parts.forEach((part) => { |
|||
if (parts) { |
|||
parts = parts + ':' + part |
|||
} else { |
|||
parts = part |
|||
} |
|||
}) |
|||
this.form.partsName = res.data[parts] |
|||
}) |
|||
this.form.problemLevel = item.problemLevel |
|||
this.form.problemImages = item.problemImages |
|||
} |
|||
}) |
|||
const Yh = await getV2Yh(this.$route.query.formId) |
|||
this.form.time[0] = Yh.data.startDate |
|||
this.form.time[1] = Yh.data.endDate |
|||
this.form.describe = Yh.data.content |
|||
this.form.userName = Yh.data.dutyHolderName |
|||
this.form.time = [...this.form.time] |
|||
this.form.images = Yh.data.doc.images |
|||
this.fileData = Yh.data.doc.docs |
|||
const ApprovalComment = await getV2ApprovalComment(this.$route.query.formId) |
|||
this.form.approvalTime = ApprovalComment.data[0].approvalTime |
|||
this.form.comment = ApprovalComment.data[0].comment |
|||
}, |
|||
|
|||
getDictLabelName(type, dictListName) { |
|||
if (!this[dictListName]) return ""; |
|||
return ( |
|||
this[dictListName].find((item) => item.dictValue === type)?.dictLabel || |
|||
"" |
|||
); |
|||
}, |
|||
handleAccept(type) { |
|||
this.$refs.form.validate((valid) => { |
|||
if (valid) { |
|||
const data = { |
|||
approvalTime: this.form.approvalTime, |
|||
comment: this.form.comment, |
|||
formId: this.$route.query.formId, |
|||
id: this.$route.query.id, |
|||
} |
|||
if (type) { |
|||
postV2ApprovalPassed(data, this.$route.query.id).then(res => { |
|||
this.$message.success('通过成功') |
|||
this.$router.go(-1) |
|||
}) |
|||
} else { |
|||
postV2ApprovalRejected(data, this.$route.query.id).then(res => { |
|||
this.$message.success('驳回成功') |
|||
this.$router.go(-1) |
|||
}) |
|||
} |
|||
} |
|||
}) |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style lang="scss"> |
|||
.table-box { |
|||
width: 100%; |
|||
height: calc(100% - 50px - 24px); |
|||
margin-top: 24px; |
|||
padding: 16px; |
|||
padding-bottom: 80px; |
|||
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; |
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
.tc-text2,.tc-text1 { |
|||
line-height: 22px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,183 @@ |
|||
<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">{{ form.dikeName }}</div> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<div class="tc-text2">堤防巡查责任人：</div> |
|||
<div class="tc-text1">{{ form.createName }}</div> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<div class="tc-text2">巡查类别：</div> |
|||
<div class="tc-text1"> |
|||
{{getDictLabelName(form.category, "maintenanceCategory") }} |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<div class="tc-text2">堤防巡查开始/结束时间：</div> |
|||
<div class="tc-text1">{{ form.startDate }}/{{ form.endDate }}</div> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<div class="tc-text2">巡查部位：</div> |
|||
<div class="tc-text1">{{ form.partsName }}</div> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<div class="tc-text2">问题位置：</div> |
|||
<div class="tc-text1">{{ form.position }}</div> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<div class="tc-text2">问题等级：</div> |
|||
<div class="tc-text1"> |
|||
{{getDictLabelName(form.problemLevel, "maintenanceLevel") }} |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<div class="tc-text2">具体描述：</div> |
|||
<div class="tc-text1">{{ form.content }}</div> |
|||
</el-col> |
|||
<el-col :span="24"> |
|||
<div class="tc-text2">缺陷图片：</div> |
|||
<div class="tc-text1"> |
|||
<el-image |
|||
v-for="item in form.problemImages" |
|||
style="width: 240px; height: 135px;margin-right: 16px;" |
|||
:src="item" |
|||
:preview-src-list="form.problemImages"> |
|||
</el-image> |
|||
</div> |
|||
</el-col> |
|||
</el-row> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import TopBackTitle from "@/components/TopBackTitle/index.vue"; |
|||
import {calcTableHeight} from "@/mixins/calcTableHeight"; |
|||
import SyMixMap from "@/views/components/SyMixMap.vue"; |
|||
import {gettV2Record} from "@/api/dike/patrolMaintenance"; |
|||
import {getDictMapData} from "@/api/system/dict/data"; |
|||
|
|||
export default { |
|||
components: { |
|||
SyMixMap, |
|||
TopBackTitle, |
|||
}, |
|||
mixins: [calcTableHeight], |
|||
data() { |
|||
return { |
|||
maintenanceCategory: [], |
|||
maintenanceLevel: [], |
|||
form: { |
|||
createName: '', |
|||
dikeName: '', |
|||
category: '', |
|||
parts: '', |
|||
partsName: '', |
|||
content: '', |
|||
position: '', |
|||
problemImages: '', |
|||
problemLevel: '', |
|||
startDate: '', |
|||
endDate: '', |
|||
}, |
|||
}; |
|||
}, |
|||
created() { |
|||
this.getDicts("patrol_maintenance_category").then((response) => { |
|||
this.maintenanceCategory = response.data; |
|||
}); |
|||
this.getDicts("patrol_maintenance_level").then((response) => { |
|||
this.maintenanceLevel = response.data; |
|||
}); |
|||
}, |
|||
mounted() { |
|||
this.initData() |
|||
}, |
|||
methods: { |
|||
async initData() { |
|||
const checking = await gettV2Record(this.$route.query.recordId) |
|||
this.form.createName = checking.data.createName |
|||
this.form.dikeName = checking.data.dikeName |
|||
this.form.problems = checking.data.problems |
|||
this.form.category = checking.data.category |
|||
this.form.startDate = checking.data.startDate |
|||
this.form.endDate = checking.data.endDate |
|||
checking.data.problems.forEach(item => { |
|||
if(item.id === this.$route.query.defectId) { |
|||
this.form.content = item.content |
|||
this.form.position = item.position |
|||
this.form.parts = item.parts |
|||
getDictMapData("df_xs_c_classfy").then((res) => { |
|||
let parts = '' |
|||
item.parts.forEach((part) => { |
|||
if (parts) { |
|||
parts = parts + ':' + part |
|||
} else { |
|||
parts = part |
|||
} |
|||
}) |
|||
this.form.partsName = res.data[parts] |
|||
}) |
|||
this.form.problemLevel = item.problemLevel |
|||
this.form.problemImages = item.problemImages |
|||
} |
|||
}) |
|||
}, |
|||
|
|||
getDictLabelName(type, dictListName) { |
|||
if (!this[dictListName]) return ""; |
|||
return ( |
|||
this[dictListName].find((item) => item.dictValue === type)?.dictLabel || |
|||
"" |
|||
); |
|||
} |
|||
}, |
|||
}; |
|||
</script> |
|||
<style lang="scss"> |
|||
.table-box { |
|||
width: 100%; |
|||
height: calc(100% - 50px - 24px); |
|||
margin-top: 24px; |
|||
padding: 16px; |
|||
padding-bottom: 80px; |
|||
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; |
|||
} |
|||
} |
|||
|
|||
} |
|||
.tc-text2,.tc-text1 { |
|||
line-height: 22px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,585 @@ |
|||
<template> |
|||
<div class="slider-right"> |
|||
<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="createName"> |
|||
{{ form.createName }} |
|||
</el-form-item> |
|||
<el-form-item label="巡查项目名称:" prop="name"> |
|||
{{ form.name }} |
|||
</el-form-item> |
|||
<el-form-item label="巡查堤防名称:" prop="dikeName"> |
|||
{{ form.dikeName }} |
|||
</el-form-item> |
|||
<el-form-item label="巡查类别:" prop="category"> |
|||
{{ getDictLabelName(form.category, "maintenanceCategory") }} |
|||
</el-form-item> |
|||
<el-form-item label="巡查时间:" prop="time"> |
|||
<el-date-picker |
|||
size="small" |
|||
class="ml-10" |
|||
:disabled="$route.query.mode === 'check'" |
|||
v-model="form.time" |
|||
type="daterange" |
|||
value-format="yyyy-MM-dd HH:mm:ss" |
|||
range-separator="至" |
|||
start-placeholder="开始日期" |
|||
end-placeholder="结束日期" |
|||
> |
|||
</el-date-picker> |
|||
</el-form-item> |
|||
<el-form-item label="巡查范围:" prop="scope"> |
|||
<el-input |
|||
type="textarea" |
|||
:disabled="$route.query.mode === 'check'" |
|||
:rows="4" |
|||
placeholder="请输入内容" |
|||
maxlength="200" |
|||
show-word-limit |
|||
resize="none" |
|||
v-model="form.scope" |
|||
> |
|||
</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="name" align="center" label="巡查部位" /> |
|||
<el-table-column prop="content" align="center" label="检查内容" /> |
|||
</el-table> |
|||
<div class="form-row-title">缺陷问题列表</div> |
|||
<div |
|||
class="flex-1 flex justify-end search-item" |
|||
style="margin-bottom: 16px" |
|||
> |
|||
<el-button |
|||
size="small" |
|||
:disabled="$route.query.mode === 'check'" |
|||
class="flex-shrink-0 myml-12" |
|||
type="success" |
|||
v-hasPermi="['df:run:patrol:inspection:detail:add']" |
|||
@click="addProblems" |
|||
>新增</el-button |
|||
> |
|||
<el-button |
|||
type="danger" |
|||
:disabled="$route.query.mode === 'check'" |
|||
class="flex-shrink-0" |
|||
@click="delProblems" |
|||
v-hasPermi="['df:run:patrol:inspection:detail:allDel']" |
|||
size="small" |
|||
>删除</el-button |
|||
> |
|||
</div> |
|||
<el-table |
|||
:height="tableHeight" |
|||
:data="problemsData" |
|||
@selection-change="handleSelectionChange" |
|||
border |
|||
> |
|||
<el-table-column type="selection" width="55"></el-table-column> |
|||
<el-table-column prop="itemId" label="巡查部位"> |
|||
<template slot-scope="scope"> |
|||
<el-select |
|||
clearable |
|||
size="small" |
|||
class="w-202 ml-10" |
|||
:disabled="$route.query.mode === 'check'" |
|||
v-model="scope.row.itemId" |
|||
filterable |
|||
@change="handleChangeSelectParts(scope.row)" |
|||
placeholder="请选择" |
|||
> |
|||
<el-option |
|||
v-for="item in tableData" |
|||
:key="item.id" |
|||
:label="item.name" |
|||
:value="item.id" |
|||
> |
|||
</el-option> |
|||
</el-select> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="problemLevel" label="问题等级" width="180"> |
|||
<template slot-scope="scope"> |
|||
<el-select |
|||
clearable |
|||
size="small" |
|||
:disabled="$route.query.mode === 'check'" |
|||
v-model="scope.row.problemLevel" |
|||
filterable |
|||
placeholder="请选择" |
|||
> |
|||
<el-option |
|||
v-for="item in maintenanceLevel" |
|||
:key="item.dictValue" |
|||
:label="item.dictLabel" |
|||
:value="item.dictValue" |
|||
> |
|||
</el-option> |
|||
</el-select> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="position" label="具体位置"> |
|||
<template slot-scope="scope"> |
|||
<el-input |
|||
:disabled="$route.query.mode === 'check'" |
|||
v-model="scope.row.position" |
|||
placeholder="请输入" |
|||
></el-input> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="content" label="具体描述"> |
|||
<template slot-scope="scope"> |
|||
<el-input |
|||
:disabled="$route.query.mode === 'check'" |
|||
v-model="scope.row.content" |
|||
placeholder="请输入" |
|||
></el-input> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column align="center" label="缺陷照片"> |
|||
<template slot-scope="scope"> |
|||
<div class="imgBox"> |
|||
<div class="imgList" v-for="item in scope.row.problemImages"> |
|||
<el-image |
|||
style="width: 40px; height: 40px" |
|||
:src="item" |
|||
:preview-src-list="scope.row.problemImages" |
|||
> |
|||
</el-image> |
|||
<div |
|||
class="delImg" |
|||
v-if="$route.query.mode !== 'check'" |
|||
@click="delImage(item, scope.row.problemImages)" |
|||
> |
|||
× |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="status" align="center" label="维养状态" width="100"> |
|||
<template slot-scope="scope"> |
|||
<span style="position: relative" |
|||
:style="['3', '5', '6'].includes(scope.row.status) && {color: 'rgba(0,0,0,0.4)'}"> |
|||
<div |
|||
v-if="scope.row.status === '1'" |
|||
style="position: absolute;left: -16px;top: 6px;width: 8px;height: 8px;border-radius: 50%; background: #FFB20D" |
|||
></div> |
|||
<div |
|||
v-if="scope.row.status === '2'" |
|||
style="position: absolute;left: -16px;top: 6px;width: 8px;height: 8px;border-radius: 50%; background: #0EC885" |
|||
></div> |
|||
<div |
|||
v-if="scope.row.status === '4'" |
|||
style="position: absolute;left: -16px;top: 6px;width: 8px;height: 8px;border-radius: 50%; background: #3A89FE" |
|||
></div> |
|||
<div |
|||
v-if="['3', '5', '6'].includes(scope.row.status)" |
|||
style="position: absolute;left: -16px;top: 6px;width: 8px;height: 8px;border-radius: 50%; background: #A6A6A6" |
|||
></div> |
|||
{{ getDictLabelName(scope.row.status, "maintenanceStatus") }} |
|||
</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="opera" |
|||
align="center" |
|||
label="操作" |
|||
fixed="right" |
|||
width="168" |
|||
> |
|||
<template slot-scope="scope"> |
|||
<div style="display: flex"> |
|||
<el-upload |
|||
class="" |
|||
action="#" |
|||
:http-request=" |
|||
(e) => { |
|||
handleUploadProject(e, scope.row); |
|||
} |
|||
" |
|||
:before-upload=" |
|||
(e) => { |
|||
beforeUploadProject(e, scope.row); |
|||
} |
|||
" |
|||
:show-file-list="false" |
|||
accept=".png,.jpg,.jpeg" |
|||
> |
|||
<el-button |
|||
:disabled="$route.query.mode === 'check'" |
|||
size="small" |
|||
style="margin-right: 10px" |
|||
type="text" |
|||
v-hasPermi="['df:run:patrol:inspection:detail:item:upload']" |
|||
>上传图片</el-button |
|||
> |
|||
</el-upload> |
|||
<el-popconfirm |
|||
confirm-button-text="确定" |
|||
cancel-button-text="取消" |
|||
icon="el-icon-info" |
|||
icon-color="red" |
|||
title="确定删除吗？" |
|||
@confirm="deleteTableItem(scope.row)" |
|||
> |
|||
<el-button |
|||
:style="$route.query.mode !== 'check' &&{color: 'red'}" |
|||
type="text" |
|||
size="small" |
|||
:disabled="$route.query.mode === 'check'" |
|||
slot="reference" |
|||
v-hasPermi="['df:run:patrol:inspection:detail:item:del']" |
|||
>删除</el-button |
|||
> |
|||
</el-popconfirm> |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
<div class="bottom-btns" v-if="$route.query.mode !== 'check'"> |
|||
<el-button |
|||
type="primary" |
|||
v-hasPermi="['df:run:patrol:inspection:detail:submit']" |
|||
@click="handleSave(true)" |
|||
> |
|||
保存并提交 |
|||
</el-button> |
|||
<el-button |
|||
type="primary" |
|||
v-hasPermi="['df:run:patrol:inspection:detail:save']" |
|||
@click="handleSave(false)" |
|||
> |
|||
保存 |
|||
</el-button> |
|||
<el-button @click="$router.go(-1)">返回</el-button> |
|||
</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, |
|||
getV2PatrolChecking, |
|||
} from "@/api/dike"; |
|||
import { gettV2Record, postV2Record } from "@/api/dike/patrolMaintenance"; |
|||
import { uploadFileData } from "@/api/system/upload"; |
|||
import { getDictMapData } from "@/api/system/dict/data"; |
|||
|
|||
export default { |
|||
components: { |
|||
SyMixMap, |
|||
TopBackTitle, |
|||
}, |
|||
mixins: [calcTableHeight], |
|||
data() { |
|||
return { |
|||
entries: {}, |
|||
maintenanceStatus: [], |
|||
maintenanceLevel: [], |
|||
maintenanceCategory: [], |
|||
traceList: [], |
|||
problemsCheckData: [], // 缺陷问题列表数据 |
|||
problemsData: [], // 巡查项列表 |
|||
tableData: [], // 巡查项下拉数据 |
|||
form: { |
|||
createName: "", |
|||
name: "", |
|||
dikeName: "", |
|||
category: "", |
|||
createUid: "", |
|||
dikeCode: "", |
|||
dikeType: "", |
|||
type: "", |
|||
time: [], |
|||
scope: "", |
|||
}, |
|||
rules: { |
|||
createName: [{ required: true }], |
|||
name: [{ required: true }], |
|||
dikeName: [{ required: true }], |
|||
category: [{ required: true }], |
|||
time: [{ required: true, message: "请选择巡查时间", trigger: "change"}], |
|||
scope: [{ required: true, message: "请输入巡查方位", trigger: "change" }], |
|||
}, |
|||
}; |
|||
}, |
|||
created() { |
|||
this.getDicts("patrol_maintenance_status").then((response) => { |
|||
this.maintenanceStatus = response.data; |
|||
}); |
|||
this.getDicts("patrol_maintenance_category").then((response) => { |
|||
this.maintenanceCategory = response.data; |
|||
}); |
|||
this.getDicts("patrol_maintenance_level").then((response) => { |
|||
this.maintenanceLevel = response.data; |
|||
}); |
|||
}, |
|||
mounted() { |
|||
this.initData(); |
|||
}, |
|||
methods: { |
|||
async initData() { |
|||
this.getDetail(); |
|||
this.getMapData(); |
|||
}, |
|||
async getDetail() { |
|||
if (this.$route.query.id) { |
|||
const details = await gettV2Record(this.$route.query.id); |
|||
this.form.time[0] = details.data.startDate; |
|||
this.form.time[1] = details.data.endDate; |
|||
this.form.scope = details.data.scope; |
|||
this.problemsData = details.data.problems; |
|||
this.form.time = [...this.form.time]; |
|||
} |
|||
const checking = await getV2PatrolChecking(this.$route.query.checkingId); |
|||
this.form.createName = checking.data.createName; |
|||
this.form.name = checking.data.name; |
|||
this.form.dikeName = checking.data.dikeName; |
|||
this.form.category = checking.data.category; |
|||
this.form.createUid = checking.data.createUid; |
|||
this.form.dikeCode = checking.data.dikeCode; |
|||
this.form.dikeType = checking.data.dikeType; |
|||
this.form.type = checking.data.type; |
|||
const items = checking.data.items; |
|||
getDictMapData("df_xs_c_classfy").then((res) => { |
|||
items.forEach((item) => { |
|||
let parts = ""; |
|||
item.parts.forEach((part) => { |
|||
if (parts) { |
|||
parts = parts + ":" + part; |
|||
} else { |
|||
parts = part; |
|||
} |
|||
}); |
|||
item.name = res.data[parts]; |
|||
}); |
|||
this.tableData = items; |
|||
}); |
|||
}, |
|||
async getMapData() { |
|||
// 获取地图数据 |
|||
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() || []; |
|||
}); |
|||
}, |
|||
|
|||
handleChangeSelectParts(row) { |
|||
row.parts = this.tableData.find((v) => v.id === row.itemId)?.parts; |
|||
}, |
|||
// 图片上传后 |
|||
handleUploadProject(e, row) { |
|||
const { file } = e; |
|||
let fData = new FormData(); |
|||
fData.append("file", file); |
|||
uploadFileData(fData) |
|||
.then((res) => { |
|||
row.problemImages.push(res.url); |
|||
}) |
|||
.catch((err) => { |
|||
console.log("err >>>>> ", err); |
|||
}); |
|||
}, |
|||
// 图片上传前 |
|||
beforeUploadProject(e, row) { |
|||
const { name, size } = e; |
|||
if (!/\.(jpg|png|jpeg)$/.test(name)) { |
|||
this.$message.warning("文件格式不正确"); |
|||
return false; |
|||
} |
|||
if (row.problemImages?.length >= 3) { |
|||
this.$message({ |
|||
message: "最多上传3份", |
|||
type: "warning", |
|||
}); |
|||
return false; |
|||
} |
|||
return true; |
|||
}, |
|||
delImage(img, problemImages) { |
|||
const index = problemImages.indexOf(img); |
|||
problemImages.splice(index, 1); |
|||
}, |
|||
addProblems() { |
|||
this.problemsData.push({ |
|||
problemLevel: "1", |
|||
partsId: this.tableData[0].parts, |
|||
poistion: "", |
|||
content: "", |
|||
problemImages: [], |
|||
status: "0", |
|||
}); |
|||
}, |
|||
getDictLabelName(type, dictListName) { |
|||
if (!this[dictListName]) return ""; |
|||
return ( |
|||
this[dictListName].find((item) => item.dictValue === type)?.dictLabel || |
|||
"" |
|||
); |
|||
}, |
|||
handleSelectionChange(e) { |
|||
this.problemsCheckData = e || []; |
|||
}, |
|||
delProblems() { |
|||
this.$confirm("是否删除选中的问题?", "提示", { |
|||
confirmButtonText: "确定", |
|||
cancelButtonText: "取消", |
|||
type: "warning", |
|||
}) |
|||
.then(() => { |
|||
this.problemsCheckData.forEach((Check) => { |
|||
const index = this.problemsData.indexOf(Check); |
|||
this.problemsData.splice(index, 1); |
|||
}); |
|||
}) |
|||
.catch(() => { |
|||
console.log("取消删除"); |
|||
}); |
|||
}, |
|||
deleteTableItem(row) { |
|||
const index = this.problemsData.indexOf(row); |
|||
this.problemsData.splice(index, 1); |
|||
}, |
|||
handleSave(commit) { |
|||
this.$refs.form.validate((valid) => { |
|||
if (valid) { |
|||
const data = { |
|||
category: this.form.category, |
|||
checkingId: this.$route.query.checkingId, |
|||
checkingName: this.form.name, |
|||
createName: this.form.createName, |
|||
createUid: this.form.createUid, |
|||
dikeName: this.form.dikeName, |
|||
dikeCode: this.form.dikeCode, |
|||
dikeType: this.form.dikeType, |
|||
scope: this.form.scope, |
|||
problems: this.problemsData, |
|||
startDate: |
|||
this.form.time && this.form.time.length > 1 ? this.form.time[0] : "", |
|||
endDate: |
|||
this.form.time && this.form.time.length > 1 ? this.form.time[1] : "", |
|||
type: this.form.type, |
|||
}; |
|||
if (this.$route.query.id) { |
|||
data.id = this.$route.query.id; |
|||
} |
|||
postV2Record(data, commit).then((res) => { |
|||
this.$message.success("保存成功"); |
|||
this.$router.go(-1); |
|||
}); |
|||
} |
|||
}); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style lang="scss"> |
|||
.table-box { |
|||
width: 100%; |
|||
height: calc(100% - 50px - 24px); |
|||
margin-top: 24px; |
|||
padding: 16px; |
|||
padding-bottom: 80px; |
|||
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%; |
|||
} |
|||
} |
|||
.imgBox { |
|||
display: flex; |
|||
padding: 10px; |
|||
.imgList { |
|||
position: relative; |
|||
margin-right: 10px; |
|||
&:hover { |
|||
.delImg { |
|||
display: flex; |
|||
} |
|||
} |
|||
.el-image { |
|||
border-radius: 4px; |
|||
} |
|||
.delImg { |
|||
display: none; |
|||
position: absolute; |
|||
top: 0; |
|||
right: 0; |
|||
justify-content: center; |
|||
align-items: center; |
|||
width: 14px; |
|||
height: 14px; |
|||
color: #ffffff; |
|||
cursor: pointer; |
|||
background: rgba(0, 0, 0, 0.6); |
|||
} |
|||
} |
|||
} |
|||
.el-upload-list { |
|||
display: none; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,480 @@ |
|||
<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">{{ form.dikeName }}</div> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<div class="tc-text2">堤防巡查责任人：</div> |
|||
<div class="tc-text1">{{ form.createName }}</div> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<div class="tc-text2">巡查类别：</div> |
|||
<div class="tc-text1"> |
|||
{{getDictLabelName(form.category, "maintenanceCategory") }} |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<div class="tc-text2">堤防巡查开始/结束时间：</div> |
|||
<div class="tc-text1">{{ form.startDate }}/{{ form.endDate }}</div> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<div class="tc-text2">巡查部位：</div> |
|||
<div class="tc-text1">{{ form.partsName }}</div> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<div class="tc-text2">问题位置：</div> |
|||
<div class="tc-text1">{{ form.position }}</div> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<div class="tc-text2">问题等级：</div> |
|||
<div class="tc-text1"> |
|||
{{getDictLabelName(form.problemLevel, "maintenanceLevel") }} |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<div class="tc-text2">具体描述：</div> |
|||
<div class="tc-text1">{{ form.content }}</div> |
|||
</el-col> |
|||
<el-col :span="24"> |
|||
<div class="tc-text2">缺陷图片：</div> |
|||
<div class="tc-text1"> |
|||
<el-image |
|||
v-for="item in form.problemImages" |
|||
style="width: 240px; height: 135px;margin-right: 16px;" |
|||
:src="item" |
|||
:preview-src-list="form.problemImages"> |
|||
</el-image> |
|||
</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="userName"> |
|||
<el-input |
|||
disabled |
|||
placeholder="请输入内容" |
|||
v-model="form.userName"> |
|||
</el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-form-item label="维养开始/结束时间：" prop="time"> |
|||
<el-date-picker |
|||
size="small" |
|||
class="ml-10" |
|||
style="width: 100%;" |
|||
v-model="form.time" |
|||
type="daterange" |
|||
:disabled="$route.query.mode === 'check'" |
|||
value-format="yyyy-MM-dd HH:mm:ss" |
|||
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" |
|||
:disabled="$route.query.mode === 'check'" |
|||
placeholder="请输入内容" |
|||
maxlength="200" |
|||
show-word-limit |
|||
v-model="form.describe"> |
|||
</el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
<el-form-item label="附件：" prop="images"> |
|||
<el-upload |
|||
class="" |
|||
action="#" |
|||
style="margin-bottom: 16px;" |
|||
:http-request="handleUploadProject1" |
|||
:before-upload="beforeUploadProject1" |
|||
:show-file-list="false" |
|||
accept=".png,.jpg,.tif,.gif" |
|||
> |
|||
<div style="display:flex;"> |
|||
<el-button |
|||
:disabled="$route.query.mode === 'check'" |
|||
style="margin-right: 16px;" |
|||
size="small" |
|||
type="primary" |
|||
v-hasPermi="['df:run:patrol:maintenance:detail:attachment']" |
|||
>上传</el-button> |
|||
<div slot="tip" style="margin-top: 0" class="el-upload__tip">文件上传支持.jpg.png.tif.gif 单张图片5M以内，最多上传3张</div> |
|||
</div> |
|||
</el-upload> |
|||
<el-image |
|||
v-for="item in form.images" |
|||
style="width: 240px; height: 135px;margin-right: 16px;" |
|||
:src="item.url" |
|||
:preview-src-list="form.images"> |
|||
</el-image> |
|||
</el-form-item> |
|||
</el-form> |
|||
|
|||
<el-table |
|||
:height="tableHeight" |
|||
:data="fileData" |
|||
style="margin-bottom: 16px;" |
|||
border |
|||
> |
|||
<el-table-column type="index" align="center" label="序号" /> |
|||
<el-table-column prop="name" align="center" label="附件名称" /> |
|||
<el-table-column prop="url" align="center" label="附件详情" /> |
|||
<el-table-column align="center" label="操作" fixed="right" width="168"> |
|||
<template slot-scope="scope"> |
|||
<div style="display:flex;"> |
|||
<el-upload |
|||
class="" |
|||
action="#" |
|||
:http-request="(e) => {handleUploadProject(e, scope.row)}" |
|||
:before-upload="(e) => {beforeUploadProject(e, scope.row)}" |
|||
:show-file-list="false" |
|||
accept=".png,.jpg,.jpeg" |
|||
> |
|||
<el-button |
|||
:disabled="$route.query.mode === 'check'" |
|||
size="small" |
|||
style="margin-right: 10px;" |
|||
type="text" |
|||
v-hasPermi="['df:run:patrol:maintenance:detail:item:upload']" |
|||
>上传</el-button> |
|||
</el-upload> |
|||
<el-popconfirm |
|||
confirm-button-text="确定" |
|||
cancel-button-text="取消" |
|||
icon="el-icon-info" |
|||
icon-color="red" |
|||
title="确定删除吗？" |
|||
@confirm="deleteTableItem(scope.row)" |
|||
> |
|||
<el-button |
|||
:style="$route.query.mode !== 'check' &&{color: 'red'}" |
|||
type="text" |
|||
size="small" |
|||
:disabled="$route.query.mode === 'check'" |
|||
slot="reference" |
|||
v-hasPermi="['df:run:patrol:maintenance:detail:item:del']" |
|||
>删除</el-button |
|||
> |
|||
</el-popconfirm> |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
<div class="bottom-btns" v-if="$route.query.mode !== 'check'"> |
|||
<el-button |
|||
type="primary" |
|||
@click="handleSave(true)" |
|||
v-hasPermi="['df:run:patrol:maintenance:detail:submit']" |
|||
>保存并提交</el-button |
|||
> |
|||
<el-button |
|||
type="primary" |
|||
@click="handleSave(false)" |
|||
v-hasPermi="['df:run:patrol:maintenance:detail:save']" |
|||
>保存</el-button |
|||
> |
|||
<el-button @click="$router.go(-1)">返回</el-button> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import TopBackTitle from "@/components/TopBackTitle/index.vue"; |
|||
import { calcTableHeight } from "@/mixins/calcTableHeight"; |
|||
import SyMixMap from "@/views/components/SyMixMap.vue"; |
|||
import { uploadFileData } from "@/api/system/upload"; |
|||
import { getV2Yh, postV2Yh, gettV2Record } from "@/api/dike/patrolMaintenance"; |
|||
import { getDictMapData } from "@/api/system/dict/data"; |
|||
import { mapGetters } from "vuex"; |
|||
|
|||
export default { |
|||
components: { |
|||
SyMixMap, |
|||
TopBackTitle, |
|||
}, |
|||
mixins: [calcTableHeight], |
|||
data() { |
|||
return { |
|||
entries: {}, |
|||
traceList: [], |
|||
fileData: [ |
|||
{ |
|||
name: '工作票', |
|||
url: '' |
|||
}, |
|||
{ |
|||
name: '操作票', |
|||
url: '' |
|||
} |
|||
], |
|||
maintenanceCategory: [], |
|||
maintenanceLevel: [], |
|||
tableData: [{ |
|||
nspectionLocation: '堤坡与戗台', |
|||
inspectionContent: '是否坚实平整', |
|||
}], |
|||
form: { |
|||
images: [], |
|||
createName: '', |
|||
userName: '', |
|||
dikeName: '', |
|||
category: '', |
|||
parts: '', |
|||
partsName: '', |
|||
content: '', |
|||
describe: '', |
|||
position: '', |
|||
problemImages: '', |
|||
problemLevel: '', |
|||
createUid: '', |
|||
dikeCode: '', |
|||
dikeType: '', |
|||
type: '', |
|||
time: [], |
|||
scope: '', |
|||
}, |
|||
rules: { |
|||
userName: [{required: true}], |
|||
projectName: [{required: true}], |
|||
dikeName: [{required: true}], |
|||
inspectionCategory: [{required: true}], |
|||
time: [{required: true, message: "请选择巡查时间", trigger: "change"}], |
|||
describe: [{required: true, message: "输入巡查详情", trigger: "change"}], |
|||
} |
|||
}; |
|||
}, |
|||
created() { |
|||
this.getDicts("patrol_maintenance_category").then((response) => { |
|||
this.maintenanceCategory = response.data; |
|||
}); |
|||
this.getDicts("patrol_maintenance_level").then((response) => { |
|||
this.maintenanceLevel = response.data; |
|||
}); |
|||
}, |
|||
mounted() { |
|||
this.initData() |
|||
}, |
|||
computed: { |
|||
...mapGetters({ |
|||
userId: "uid", |
|||
userName: "name", |
|||
}), |
|||
}, |
|||
methods: { |
|||
async initData() { |
|||
const checking = await gettV2Record(this.$route.query.recordId) |
|||
this.form.createName = checking.data.createName |
|||
this.form.userName = this.userName |
|||
this.form.userId = this.userId |
|||
this.form.dikeName = checking.data.dikeName |
|||
this.form.checkingId = checking.data.checkingId |
|||
this.form.checkingName = checking.data.checkingName |
|||
this.form.status = checking.data.status |
|||
this.form.problems = checking.data.problems |
|||
this.form.category = checking.data.category |
|||
this.form.createUid = checking.data.createUid |
|||
this.form.dikeCode = checking.data.dikeCode |
|||
this.form.dikeType = checking.data.dikeType |
|||
this.form.type = checking.data.type |
|||
this.form.startDate = checking.data.startDate |
|||
this.form.endDate = checking.data.endDate |
|||
checking.data.problems.forEach(item => { |
|||
if(item.id === this.$route.query.defectId) { |
|||
this.form.content = item.content |
|||
this.form.position = item.position |
|||
this.form.parts = item.parts |
|||
getDictMapData("df_xs_c_classfy").then((res) => { |
|||
let parts = '' |
|||
item.parts.forEach((part) => { |
|||
if (parts) { |
|||
parts = parts + ':' + part |
|||
} else { |
|||
parts = part |
|||
} |
|||
}) |
|||
this.form.partsName = res.data[parts] |
|||
}) |
|||
this.form.problemLevel = item.problemLevel |
|||
this.form.problemImages = item.problemImages |
|||
} |
|||
}) |
|||
if (this.$route.query.id) { |
|||
const ApprovalComment = await getV2Yh(this.$route.query.id) |
|||
this.form.time[0] = ApprovalComment.data.startDate |
|||
this.form.time[1] = ApprovalComment.data.endDate |
|||
this.form.describe = ApprovalComment.data.content |
|||
this.form.time = [...this.form.time] |
|||
this.form.images = ApprovalComment.data.doc.images |
|||
this.fileData = ApprovalComment.data.doc.docs |
|||
} |
|||
}, |
|||
getDictLabelName(type, dictListName) { |
|||
if (!this[dictListName]) return ""; |
|||
return ( |
|||
this[dictListName].find((item) => item.dictValue === type)?.dictLabel || |
|||
"" |
|||
); |
|||
}, |
|||
// 图片上传后 |
|||
handleUploadProject(e, row) { |
|||
const { file } = e; |
|||
let fData = new FormData(); |
|||
fData.append("file", file); |
|||
uploadFileData(fData) |
|||
.then((res) => { |
|||
row.url = res.url; |
|||
}) |
|||
.catch((err) => { |
|||
console.log("err >>>>> ", err); |
|||
}); |
|||
}, |
|||
// 图片上传前 |
|||
beforeUploadProject(e, row) { |
|||
const { name, size } = e; |
|||
if (!/\.(jpg|png|jpeg)$/.test(name)) { |
|||
this.$message.warning("文件格式不正确"); |
|||
return false; |
|||
} |
|||
if (row.problemImages?.length >= 3) { |
|||
this.$message({ |
|||
message: "最多上传3份", |
|||
type: "warning", |
|||
}); |
|||
return false; |
|||
} |
|||
return true; |
|||
}, |
|||
// 图片上传后 |
|||
handleUploadProject1(e, row) { |
|||
const { file } = e; |
|||
let fData = new FormData(); |
|||
fData.append("file", file); |
|||
uploadFileData(fData) |
|||
.then((res) => { |
|||
this.form.images.push({ |
|||
name: res.name, |
|||
url: res.url |
|||
}); |
|||
}) |
|||
.catch((err) => { |
|||
console.log("err >>>>> ", err); |
|||
}); |
|||
}, |
|||
// 图片上传前 |
|||
beforeUploadProject1(e, row) { |
|||
const { name, size } = e; |
|||
if (!/\.(jpg|png|tif|gif)$/.test(name)) { |
|||
this.$message.warning("文件格式不正确"); |
|||
return false; |
|||
} |
|||
if (this.form.images?.length >= 3) { |
|||
this.$message({ |
|||
message: "最多上传3份", |
|||
type: "warning", |
|||
}); |
|||
return false; |
|||
} |
|||
return true; |
|||
}, |
|||
deleteTableItem(row) { |
|||
row.url = '' |
|||
}, |
|||
handleSave(commit) { |
|||
this.$refs.form.validate((valid) => { |
|||
if (valid) { |
|||
const data = { |
|||
name: this.form.checkingName, |
|||
dikeCode: this.form.dikeCode, |
|||
dikeType: this.form.dikeType, |
|||
dikeName: this.form.dikeName, |
|||
status: this.form.status, |
|||
type: this.form.type, |
|||
category: this.form.category, |
|||
checkingId: this.form.checkingId, |
|||
content: this.form.describe, |
|||
dutyHolderId: this.form.userId, |
|||
dutyHolderName: this.form.userName, |
|||
problemLevel: this.form.problemLevel, |
|||
problemId: this.$route.query.defectId, |
|||
recordId: this.$route.query.recordId, |
|||
doc: { |
|||
images: this.form.images, |
|||
docs: this.fileData, |
|||
}, |
|||
startDate: this.form.time && this.form.time.length > 1 ? this.form.time[0] : '', |
|||
endDate: this.form.time && this.form.time.length > 1 ? this.form.time[1] : '', |
|||
} |
|||
if (this.$route.query.id) { |
|||
data.id = this.$route.query.id |
|||
} |
|||
postV2Yh(data, commit).then(res => { |
|||
this.$message.success('保存成功') |
|||
this.$router.go(-1) |
|||
}) |
|||
} |
|||
}) |
|||
|
|||
} |
|||
}, |
|||
}; |
|||
</script> |
|||
<style lang="scss"> |
|||
.table-box { |
|||
width: 100%; |
|||
height: calc(100% - 50px - 24px); |
|||
margin-top: 24px; |
|||
padding: 16px; |
|||
padding-bottom: 80px; |
|||
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; |
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
.tc-text2,.tc-text1 { |
|||
line-height: 22px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,376 @@ |
|||
<!-- 缺陷清单管理 --> |
|||
<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.name" |
|||
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.type" |
|||
:popper-append-to-body="false" |
|||
filterable |
|||
placeholder="请选择" |
|||
> |
|||
<el-option label="全部" value=""> </el-option> |
|||
<el-option |
|||
v-for="item in maintenanceType" |
|||
: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.time" |
|||
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.category" |
|||
:popper-append-to-body="false" |
|||
filterable |
|||
placeholder="请选择" |
|||
> |
|||
<el-option label="全部" value=""> </el-option> |
|||
<el-option |
|||
v-for="item in maintenanceCategory" |
|||
: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-select |
|||
clearable |
|||
size="small" |
|||
class="w-202 ml-10" |
|||
v-model="paramsData.status" |
|||
:popper-append-to-body="false" |
|||
filterable |
|||
placeholder="请选择" |
|||
> |
|||
<el-option label="全部" value=""> </el-option> |
|||
<el-option |
|||
v-for="item in maintenanceStatus" |
|||
: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-select |
|||
clearable |
|||
size="small" |
|||
class="w-202 ml-10" |
|||
v-model="paramsData.problemLevel" |
|||
:popper-append-to-body="false" |
|||
filterable |
|||
placeholder="请选择" |
|||
> |
|||
<el-option label="全部" value=""> </el-option> |
|||
<el-option |
|||
v-for="item in maintenanceLevel" |
|||
:key="item.dictValue" |
|||
:label="item.dictLabel" |
|||
:value="item.dictValue" |
|||
> |
|||
</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="id" align="center" label="单号" /> |
|||
<el-table-column prop="checkingName" align="center" label="巡查名称" /> |
|||
<el-table-column prop="type" align="center" label="巡查类型"> |
|||
<template slot-scope="scope"> |
|||
<span>{{ |
|||
getDictLabelName(scope.row.type, "maintenanceType") |
|||
}}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="category" align="center" label="巡查类别"> |
|||
<template slot-scope="scope"> |
|||
<span>{{ |
|||
getDictLabelName(scope.row.category, "maintenanceCategory") |
|||
}}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="level" align="center" label="问题等级" width="120"> |
|||
<template slot-scope="scope"> |
|||
<span>{{ |
|||
getDictLabelName(scope.row.problemLevel, "maintenanceLevel") |
|||
}}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="dutyHolderName" 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" |
|||
v-hasPermi="['df:run:patrol:defect:list:item:getInvoices']" |
|||
@click="handleReceiveDetails(scope.row)" |
|||
>领单</el-button |
|||
> |
|||
<el-button |
|||
type="text" |
|||
size="small" |
|||
v-hasPermi="['df:run:patrol:defect:list:item:check']" |
|||
@click="handleCheckDetails(scope.row)" |
|||
>查看</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 { calcTableHeight } from "@/mixins/calcTableHeight"; |
|||
|
|||
import { |
|||
postV2ProblemList |
|||
} from "@/api/dike/patrolMaintenance"; |
|||
export default { |
|||
components: {TopBackTitle}, |
|||
mixins: [calcTableHeight], |
|||
data() { |
|||
return { |
|||
tableData: [], |
|||
maintenanceStatus: [], |
|||
maintenanceCategory: [], |
|||
maintenanceType: [], |
|||
maintenanceLevel: [], |
|||
paramsData: { |
|||
name: "", |
|||
type: "", |
|||
time: [], |
|||
dutyHolder: '', |
|||
category: '', |
|||
status: '', |
|||
problemLevel: '' |
|||
}, |
|||
pageData: { |
|||
pageNum: 1, // 当前页 |
|||
pageSize: 10, // 请求数量 |
|||
pageSizes: [10, 20, 50, 100], |
|||
total: 0, // 总数量 |
|||
}, |
|||
}; |
|||
}, |
|||
created() { |
|||
this.getDicts("patrol_maintenance_status").then((response) => { |
|||
this.maintenanceStatus = response.data; |
|||
}); |
|||
this.getDicts("patrol_maintenance_category").then((response) => { |
|||
this.maintenanceCategory = response.data; |
|||
}); |
|||
this.getDicts("patrol_maintenance_type").then((response) => { |
|||
this.maintenanceType = response.data; |
|||
}); |
|||
this.getDicts("patrol_maintenance_level").then((response) => { |
|||
this.maintenanceLevel = response.data; |
|||
}); |
|||
}, |
|||
mounted() { |
|||
this.getTableData() |
|||
}, |
|||
methods: { |
|||
handleCurrentPageChange(page) { |
|||
this.pageData.pageNum = page; |
|||
this.getTableData(); |
|||
}, |
|||
handlePageSizeChange(pageSize) { |
|||
this.pageData.pageSize = pageSize; |
|||
this.getTableData(); |
|||
}, |
|||
handleReceiveDetails(row) { |
|||
this.$router.push({ |
|||
path: "maintenanceDetails", |
|||
query: { recordId: row.recordId, defectId: row.id, checkingId: row.checkingId }, |
|||
}); |
|||
}, |
|||
handleCheckDetails(row) { |
|||
this.$router.push({ |
|||
path: "defectDetails", |
|||
query: { recordId: row.recordId, defectId: row.id , mode: 'check' }, |
|||
}); |
|||
}, |
|||
getDictLabelName(type, dictListName) { |
|||
if (!this[dictListName]) return ""; |
|||
return ( |
|||
this[dictListName].find((item) => item.dictValue === type)?.dictLabel || |
|||
"" |
|||
); |
|||
}, |
|||
// 查询 |
|||
handleChangeQuery() { |
|||
this.pageData.pageNum = 1; |
|||
this.getTableData(); |
|||
}, |
|||
// 重置搜索 |
|||
handleResetQuery() { |
|||
this.paramsData.name = ""; |
|||
this.paramsData.type = ""; |
|||
this.paramsData.time = []; |
|||
this.paramsData.dutyHolder = ""; |
|||
this.paramsData.category = ""; |
|||
this.paramsData.status = ""; |
|||
this.paramsData.problemLevel = ""; |
|||
this.pageData.pageNum = 1; |
|||
this.getTableData(); |
|||
}, |
|||
getTableData() { |
|||
const data = { |
|||
name: this.paramsData.name, |
|||
type: this.paramsData.type, |
|||
dutyHolder: this.paramsData.dutyHolder, |
|||
category: this.paramsData.category, |
|||
status: this.paramsData.status, |
|||
problemLevel: this.paramsData.problemLevel, |
|||
startDate: this.paramsData.time && this.paramsData.time.length > 1 ? this.paramsData.time[0] : '', |
|||
endDate: this.paramsData.time && this.paramsData.time.length > 1 ? this.paramsData.time[1] : '', |
|||
} |
|||
postV2ProblemList({ |
|||
data: { |
|||
timeView: { |
|||
timeField: "create_time", |
|||
}, |
|||
...data, |
|||
}, |
|||
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,3 @@ |
|||
<template> |
|||
<router-view /> |
|||
</template> |
|||
@ -0,0 +1,395 @@ |
|||
<!-- 养护记录管理管理 --> |
|||
<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.name" |
|||
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.type" |
|||
:popper-append-to-body="false" |
|||
filterable |
|||
placeholder="请选择" |
|||
> |
|||
<el-option label="全部" value=""> </el-option> |
|||
<el-option |
|||
v-for="item in maintenanceType" |
|||
: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.time" |
|||
type="daterange" |
|||
value-format="yyyy-MM-dd HH:mm:ss" |
|||
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.category" |
|||
:popper-append-to-body="false" |
|||
filterable |
|||
placeholder="请选择" |
|||
> |
|||
<el-option label="全部" value=""> </el-option> |
|||
<el-option |
|||
v-for="item in maintenanceCategory" |
|||
: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-select |
|||
clearable |
|||
size="small" |
|||
class="w-202 ml-10" |
|||
v-model="paramsData.status" |
|||
:popper-append-to-body="false" |
|||
filterable |
|||
placeholder="请选择" |
|||
> |
|||
<el-option label="全部" value=""> </el-option> |
|||
<el-option |
|||
v-for="item in maintenanceStatus" |
|||
: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-select |
|||
clearable |
|||
size="small" |
|||
class="w-202 ml-10" |
|||
v-model="paramsData.problemLevel" |
|||
:popper-append-to-body="false" |
|||
filterable |
|||
placeholder="请选择" |
|||
> |
|||
<el-option label="全部" value=""> </el-option> |
|||
<el-option |
|||
v-for="item in maintenanceLevel" |
|||
:key="item.dictValue" |
|||
:label="item.dictLabel" |
|||
:value="item.dictValue" |
|||
> |
|||
</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="id" align="center" label="单号" /> |
|||
<el-table-column prop="name" align="center" label="巡查名称" /> |
|||
<el-table-column prop="type" align="center" label="巡查类型"> |
|||
<template slot-scope="scope"> |
|||
<span>{{ |
|||
getDictLabelName(scope.row.type, "maintenanceType") |
|||
}}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="category" align="center" label="巡查类别"> |
|||
<template slot-scope="scope"> |
|||
<span>{{ |
|||
getDictLabelName(scope.row.category, "maintenanceCategory") |
|||
}}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="status" align="center" label="巡查状态" width="100"> |
|||
<template slot-scope="scope"> |
|||
<span style="position: relative" |
|||
:style="['3', '5', '6'].includes(scope.row.status) && {color: 'rgba(0,0,0,0.4)'}"> |
|||
<div |
|||
v-if="scope.row.status === '1'" |
|||
style="position: absolute;left: -16px;top: 6px;width: 8px;height: 8px;border-radius: 50%; background: #FFB20D" |
|||
></div> |
|||
<div |
|||
v-if="scope.row.status === '2'" |
|||
style="position: absolute;left: -16px;top: 6px;width: 8px;height: 8px;border-radius: 50%; background: #0EC885" |
|||
></div> |
|||
<div |
|||
v-if="scope.row.status === '4'" |
|||
style="position: absolute;left: -16px;top: 6px;width: 8px;height: 8px;border-radius: 50%; background: #3A89FE" |
|||
></div> |
|||
<div |
|||
v-if="['3', '5', '6'].includes(scope.row.status)" |
|||
style="position: absolute;left: -16px;top: 6px;width: 8px;height: 8px;border-radius: 50%; background: #A6A6A6" |
|||
></div> |
|||
{{ getDictLabelName(scope.row.status, "maintenanceStatus") }} |
|||
</span> |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
<el-table-column prop="level" align="center" label="问题等级" width="120"> |
|||
<template slot-scope="scope"> |
|||
<span>{{ |
|||
getDictLabelName(scope.row.problemLevel, "maintenanceLevel") |
|||
}}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="dutyHolderName" 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" |
|||
v-hasPermi="['df:run:patrol:maintenance:list:item:check']" |
|||
@click="handleCheckDetails(scope.row, 'check')" |
|||
>查看</el-button |
|||
> |
|||
<el-button |
|||
type="text" |
|||
size="small" |
|||
v-hasPermi="['df:run:patrol:maintenance:list:item:edit']" |
|||
:disabled="scope.row.status !== '4'" |
|||
@click="handleCheckDetails(scope.row, 'edit')" |
|||
>编辑</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 { calcTableHeight } from "@/mixins/calcTableHeight"; |
|||
import { |
|||
postV2YhList |
|||
} from "@/api/dike/patrolMaintenance"; |
|||
export default { |
|||
components: {TopBackTitle}, |
|||
mixins: [calcTableHeight], |
|||
data() { |
|||
return { |
|||
tableData: [], |
|||
maintenanceStatus: [], |
|||
maintenanceCategory: [], |
|||
maintenanceLevel: [], |
|||
maintenanceType: [], |
|||
paramsData: { |
|||
name: "", |
|||
type: "", |
|||
time: [], |
|||
dutyHolder: '', |
|||
category: '', |
|||
status: '', |
|||
problemLevel: '' |
|||
}, |
|||
pageData: { |
|||
pageNum: 1, // 当前页 |
|||
pageSize: 10, // 请求数量 |
|||
pageSizes: [10, 20, 50, 100], |
|||
total: 0, // 总数量 |
|||
}, |
|||
}; |
|||
}, |
|||
created() { |
|||
this.getDicts("patrol_maintenance_status").then((response) => { |
|||
this.maintenanceStatus = response.data; |
|||
}); |
|||
this.getDicts("patrol_maintenance_category").then((response) => { |
|||
this.maintenanceCategory = response.data; |
|||
}); |
|||
this.getDicts("patrol_maintenance_type").then((response) => { |
|||
this.maintenanceType = response.data; |
|||
}); |
|||
this.getDicts("patrol_maintenance_level").then((response) => { |
|||
this.maintenanceLevel = response.data; |
|||
}); |
|||
}, |
|||
mounted() { |
|||
this.getTableData() |
|||
}, |
|||
methods: { |
|||
handleCurrentPageChange(page) { |
|||
this.pageData.pageNum = page; |
|||
this.getTableData(); |
|||
}, |
|||
handlePageSizeChange(pageSize) { |
|||
this.pageData.pageSize = pageSize; |
|||
this.getTableData(); |
|||
}, |
|||
handleCheckDetails(row, mode) { |
|||
this.$router.push({ |
|||
path: "maintenanceDetails", |
|||
query: { id: row.id, recordId: row.recordId, defectId: row.problemId, mode: mode }, |
|||
}); |
|||
}, |
|||
getDictLabelName(type, dictListName) { |
|||
if (!this[dictListName]) return ""; |
|||
return ( |
|||
this[dictListName].find((item) => item.dictValue === type)?.dictLabel || |
|||
"" |
|||
); |
|||
}, |
|||
// 查询 |
|||
handleChangeQuery() { |
|||
this.pageData.pageNum = 1; |
|||
this.getTableData(); |
|||
}, |
|||
// 重置搜索 |
|||
handleResetQuery() { |
|||
this.paramsData.name = ""; |
|||
this.paramsData.type = ""; |
|||
this.paramsData.time = []; |
|||
this.paramsData.dutyHolder = ""; |
|||
this.paramsData.category = ""; |
|||
this.paramsData.status = ""; |
|||
this.paramsData.problemLevel = ""; |
|||
this.pageData.pageNum = 1; |
|||
this.getTableData(); |
|||
}, |
|||
getTableData() { |
|||
const data = { |
|||
name: this.paramsData.name, |
|||
type: this.paramsData.type, |
|||
dutyHolder: this.paramsData.dutyHolder, |
|||
category: this.paramsData.category, |
|||
status: this.paramsData.status, |
|||
problemLevel: this.paramsData.problemLevel, |
|||
startDate: this.paramsData.time && this.paramsData.time.length > 1 ? this.paramsData.time[0] : '', |
|||
endDate: this.paramsData.time && this.paramsData.time.length > 1 ? this.paramsData.time[1] : '', |
|||
} |
|||
postV2YhList({ |
|||
data: { |
|||
timeView: { |
|||
timeField: "create_time", |
|||
}, |
|||
...data, |
|||
}, |
|||
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,347 @@ |
|||
<template> |
|||
<div class="overview-analysis-page slider-right"> |
|||
<TopBackTitle :showBackBtn="false"></TopBackTitle> |
|||
|
|||
<div class="slider-right-body"> |
|||
<div class="top-search"> |
|||
<span class="ml-10">巡查周期：</span> |
|||
<el-date-picker |
|||
v-model="paramsData.timeRange" |
|||
size="small" |
|||
type="daterange" |
|||
range-separator="至" |
|||
start-placeholder="开始日期" |
|||
end-placeholder="结束日期" |
|||
value-format="yyyy-MM-dd" |
|||
></el-date-picker> |
|||
<span class="ml-10">行政区划：</span> |
|||
<el-cascader |
|||
v-model="paramsData.adcd" |
|||
:props="areasOptionProps" |
|||
placeholder="请选择行政区划" |
|||
clearable |
|||
size="small" |
|||
> |
|||
</el-cascader> |
|||
<el-button |
|||
class="search-btn !ml-16" |
|||
size="small" |
|||
type="success" |
|||
@click="handleSearch()" |
|||
>查询</el-button |
|||
> |
|||
<el-button @click="resetSearch()" size="small">重置</el-button> |
|||
</div> |
|||
|
|||
<div class="content-box"> |
|||
<div class="sum-box-list"> |
|||
<div class="list-item"> |
|||
<div class="item-title">巡查工程总数(个)</div> |
|||
<div class="item-value"> |
|||
{{ projectSum == null ? "-" : projectSum }} |
|||
</div> |
|||
</div> |
|||
<div class="list-item"> |
|||
<div class="item-title">巡查记录总数(个)</div> |
|||
<div class="item-value"> |
|||
{{ xcRecordsSum == null ? "-" : xcRecordsSum }} |
|||
</div> |
|||
</div> |
|||
<div class="list-item"> |
|||
<div class="item-title">巡查缺陷总数(个)</div> |
|||
<div class="item-value"> |
|||
{{ flawSum == null ? "-" : flawSum }} |
|||
</div> |
|||
</div> |
|||
<div class="list-item"> |
|||
<div class="item-title">缺陷养护总数(个)</div> |
|||
<div class="item-value"> |
|||
{{ yhSum == null ? "-" : yhSum }} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="echarts-box-list"> |
|||
<div class="title">工程分布</div> |
|||
<div class="echarts-box" ref="proEchart"></div> |
|||
</div> |
|||
|
|||
<div class="echarts-box-list"> |
|||
<div class="title">巡查分析</div> |
|||
<div class="echarts-box" ref="patrolEchart"></div> |
|||
</div> |
|||
|
|||
<div class="echarts-box-list"> |
|||
<div class="title">缺陷和养护对比</div> |
|||
<div class="echarts-box" ref="compareEchart"></div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import * as echarts from "echarts"; |
|||
import TopBackTitle from "@/components/TopBackTitle/index.vue"; |
|||
import { cascaderLazyLoad } from "@/utils/elUtils"; |
|||
|
|||
import { getV2PatrolStatisticChart } from "@/api/dike"; |
|||
|
|||
import { initCommonBarLineOptions } from "@/utils/echartsUtils"; |
|||
|
|||
export default { |
|||
components: { |
|||
TopBackTitle, |
|||
}, |
|||
data() { |
|||
return { |
|||
projectSum: null, |
|||
xcRecordsSum: null, |
|||
flawSum: null, |
|||
yhSum: null, |
|||
tabsList: [], |
|||
paramsData: { |
|||
timeRange: [], |
|||
adcd: null, |
|||
}, |
|||
areasOptionProps: { |
|||
emitPath: false, |
|||
checkStrictly: true, //选择任意一级 |
|||
expandTrigger: "hover", |
|||
lazy: true, |
|||
lazyLoad: cascaderLazyLoad, |
|||
}, |
|||
proEchartInstance: null, |
|||
patrolEchartInstance: null, |
|||
compareEchartInstance: null, |
|||
}; |
|||
}, |
|||
mounted() { |
|||
this.getTableData(); |
|||
window.addEventListener("resize", this.echartsResizeFunc); |
|||
}, |
|||
beforeMounted() { |
|||
window.removeEventListener("resize", this.echartsResizeFunc); |
|||
}, |
|||
methods: { |
|||
// 底层获取图表数据 |
|||
requestFunc({ group }) { |
|||
return getV2PatrolStatisticChart({ |
|||
group, |
|||
startTime: this.paramsData.timeRange[0] |
|||
? this.paramsData[0] + " 00:00:00" |
|||
: null, |
|||
endTime: this.paramsData.timeRange[1] |
|||
? this.paramsData[1] + " 23:59:59" |
|||
: null, |
|||
adcd: this.paramsData.adcd, |
|||
}); |
|||
}, |
|||
// 渲染echarts图表 |
|||
|
|||
renderEcharts({ |
|||
group, |
|||
echartsInstanceName, |
|||
echartsDomName, |
|||
echartsOptions, |
|||
}) { |
|||
return new Promise((r, j) => { |
|||
this.requestFunc({ |
|||
group, |
|||
}) |
|||
.then((res) => { |
|||
if (res.data) { |
|||
this.$nextTick(() => { |
|||
if (this[echartsInstanceName]) |
|||
this[echartsInstanceName].dispose(); |
|||
this[echartsInstanceName] = echarts.init( |
|||
this.$refs[echartsDomName] |
|||
); |
|||
this[echartsInstanceName].setOption( |
|||
initCommonBarLineOptions({ |
|||
...echartsOptions, |
|||
data: res.data || {}, |
|||
}) |
|||
); |
|||
}); |
|||
} |
|||
r(res); |
|||
}) |
|||
.catch((err) => { |
|||
j(err); |
|||
}); |
|||
}); |
|||
}, |
|||
echartsResizeFunc() { |
|||
if (this.proEchartInstance) this.proEchartInstance.resize(); |
|||
if (this.patrolEchartInstance) this.patrolEchartInstance.resize(); |
|||
if (this.compareEchartInstance) this.compareEchartInstance.resize(); |
|||
}, |
|||
// 获取页面数据 |
|||
getTableData() { |
|||
// 渲染工程分布 |
|||
this.renderEcharts({ |
|||
group: "C_1", |
|||
echartsInstanceName: "proEchartInstance", |
|||
echartsDomName: "proEchart", |
|||
echartsOptions: { |
|||
type: "bar", |
|||
seriesOptions: { |
|||
itemStyle: { |
|||
color: "#36B29E", |
|||
}, |
|||
barWidth: 20, |
|||
}, |
|||
}, |
|||
}).then((res) => { |
|||
if (res.data) { |
|||
// 渲染图表和统计总数 |
|||
if (res.data?.yaxis?.length) { |
|||
let num = res.data.yaxis[0]?.series.find( |
|||
(v) => v.code === "DF_PROJECT_ADCD_SUM" |
|||
)?.sum; |
|||
this.projectSum = Number(num ?? null); |
|||
} |
|||
} |
|||
}); |
|||
// 获取巡查分析数据 |
|||
this.renderEcharts({ |
|||
group: "C_2", |
|||
echartsInstanceName: "patrolEchartInstance", |
|||
echartsDomName: "patrolEchart", |
|||
echartsOptions: { |
|||
type: "bar", |
|||
colors: ["#29CCCC", "#0099DF"], |
|||
seriesOptions: { |
|||
barWidth: 20, |
|||
stack: "one", |
|||
}, |
|||
}, |
|||
}).then((res) => { |
|||
if (res.data) { |
|||
// 渲染图表和统计总数 |
|||
if (res.data?.yaxis?.length) { |
|||
this.xcRecordsSum = res.data.yaxis |
|||
.flatMap((item) => item.series) |
|||
.flatMap((v) => Number(v.sum ?? null)) |
|||
.reduce((acc, cur) => acc + cur, 0); |
|||
} |
|||
} |
|||
}); |
|||
// 获取巡查分析数据 |
|||
this.renderEcharts({ |
|||
group: "C_3", |
|||
echartsInstanceName: "compareEchartInstance", |
|||
echartsDomName: "compareEchart", |
|||
echartsOptions: { |
|||
type: "bar", |
|||
colors: ["#81B84A", "#0099DF"], |
|||
seriesOptions: { |
|||
barWidth: 20, |
|||
}, |
|||
}, |
|||
}).then((res) => { |
|||
if (res.data) { |
|||
// 渲染图表和统计总数 |
|||
if (res.data?.yaxis?.length) { |
|||
let newArr = res.data.yaxis.flatMap((v) => v.series); |
|||
let num1 = newArr.find((v) => v.code === "DF_QX_ADCD_SUM")?.sum; |
|||
this.flawSum = Number(num1 ?? null); |
|||
let num2 = newArr.find((v) => v.code === "DF_YH_ADCD_SUM")?.sum; |
|||
this.yhSum = Number(num2 ?? null); |
|||
} |
|||
} |
|||
}); |
|||
}, |
|||
handleSearch() { |
|||
this.getTableData(); |
|||
}, |
|||
resetSearch() { |
|||
this.paramsData.timeRange = []; |
|||
this.paramsData.adcd = null; |
|||
this.getTableData(); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style scoped lang="scss"> |
|||
.overview-analysis-page { |
|||
.slider-right-body { |
|||
padding: 0; |
|||
.top-search { |
|||
padding: 24px; |
|||
border-bottom: 1px solid #ccc; |
|||
} |
|||
|
|||
.content-box { |
|||
padding: 24px; |
|||
.sum-box-list { |
|||
display: flex; |
|||
.list-item { |
|||
width: 25%; |
|||
height: 102px; |
|||
border: 1px solid #36b29e; |
|||
border-radius: 10px; |
|||
position: relative; |
|||
padding: 16px 24px; |
|||
margin-right: 16px; |
|||
margin-bottom: 12px; |
|||
background: linear-gradient( |
|||
180deg, |
|||
#eafffc 0%, |
|||
rgba(222, 255, 250, 0) 100% |
|||
), |
|||
#ffffff; |
|||
overflow: hidden; |
|||
&::after { |
|||
position: absolute; |
|||
content: ""; |
|||
background: url("../../../../../assets/image/icon-attr-bg.png") |
|||
no-repeat center center; |
|||
width: 64px; |
|||
height: 64px; |
|||
right: -12px; |
|||
bottom: -12px; |
|||
} |
|||
.item-title { |
|||
font-size: 14px; |
|||
} |
|||
.item-value { |
|||
margin-top: 12px; |
|||
font-size: 32px; |
|||
color: #36b29e; |
|||
font-weight: 500; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.echarts-box-list { |
|||
.title { |
|||
padding-left: 10px; |
|||
font-size: 14px; |
|||
font-weight: 500; |
|||
margin-top: 12px; |
|||
margin-bottom: 12px; |
|||
position: relative; |
|||
&::before { |
|||
content: " "; |
|||
width: 4px; |
|||
height: 4px; |
|||
background: #36b29e; |
|||
position: absolute; |
|||
left: 1px; |
|||
top: 50%; |
|||
margin-top: -2px; |
|||
transform: rotate(45deg); |
|||
} |
|||
} |
|||
|
|||
.echarts-box { |
|||
width: 100%; |
|||
height: 224px; |
|||
border: 1px solid #f0f0f0; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,529 @@ |
|||
<!-- 巡查项 --> |
|||
<template> |
|||
<div class="slider-right"> |
|||
<TopBackTitle></TopBackTitle> |
|||
<div class="table-box"> |
|||
<div class="top-box"> |
|||
<el-form |
|||
:inline="true" |
|||
:model="formData" |
|||
:rules="rules" |
|||
:disabled="!canEdit" |
|||
ref="ruleForm" |
|||
label-width="120px" |
|||
> |
|||
<el-form-item label="巡查堤防名称" prop="dikeName"> |
|||
<el-select |
|||
:disabled="!canEdit" |
|||
class="w-240" |
|||
size="small" |
|||
remote |
|||
filterable |
|||
reserve-keyword |
|||
:maxlength="50" |
|||
:remote-method="handleGetRemoteDikeMethod" |
|||
@focus="handleGetRemoteDikeMethod('')" |
|||
@change="handleChangeDike" |
|||
v-model="formData.dikeName" |
|||
placeholder="请选择堤防" |
|||
> |
|||
<el-option |
|||
v-for="item in dikeList" |
|||
:key="item.dikeCode" |
|||
:label="item.dikeName" |
|||
:value="item.dikeName" |
|||
></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="巡查堤防编码" prop="dikeCode"> |
|||
<el-input |
|||
v-model="formData.dikeCode" |
|||
:disabled="true" |
|||
placeholder="请选择堤防" |
|||
></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="巡查项目名称" prop="name"> |
|||
<el-input |
|||
v-model="formData.name" |
|||
:disable="true" |
|||
placeholder="请输入" |
|||
></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="巡查类别" prop="category"> |
|||
<el-select |
|||
:disabled="!canEdit" |
|||
v-model="formData.category" |
|||
placeholder="请选择" |
|||
> |
|||
<el-option |
|||
v-for="item in xcCategoryList" |
|||
:key="item.dictValue" |
|||
:label="item.dictLabel" |
|||
:value="item.dictValue" |
|||
> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="巡查类型" prop="type"> |
|||
<el-select |
|||
:disabled="!canEdit" |
|||
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> |
|||
</el-form-item> |
|||
<el-form-item label="创建人" prop="createUid"> |
|||
<el-input |
|||
v-model="formData.createName" |
|||
:disabled="true" |
|||
placeholder="请输入" |
|||
></el-input> |
|||
</el-form-item> |
|||
</el-form> |
|||
</div> |
|||
|
|||
<div> |
|||
<el-table :data="tableData" border> |
|||
<el-table-column prop="parts" label="工程部位" width="320"> |
|||
<template slot-scope="scope"> |
|||
<el-cascader |
|||
:disabled="!canEdit" |
|||
class="w-full" |
|||
v-model="scope.row.parts" |
|||
@change="(val) => handleChangeCascader(val, scope.row)" |
|||
:options="xcTreeData" |
|||
:props="{ |
|||
checkStrictly: true, |
|||
expandTrigger: 'hover', |
|||
label: 'value', |
|||
value: 'key', |
|||
}" |
|||
clearable |
|||
></el-cascader> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="content" label="检查内容"> |
|||
<template slot-scope="scope"> |
|||
<el-input |
|||
:disabled="!canEdit" |
|||
v-model="scope.row.content" |
|||
placeholder="请输入" |
|||
></el-input> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="操作" width="180"> |
|||
<template slot-scope="scope"> |
|||
<el-button |
|||
:disabled="!canEdit" |
|||
type="text" |
|||
@click="handleAddNew(scope.$index)" |
|||
>新增</el-button |
|||
> |
|||
<el-button :disabled="!canEdit" type="text">删除</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
<template #empty> |
|||
<el-button |
|||
:disabled="!canEdit" |
|||
type="primary" |
|||
@click="handleAddNew(null)" |
|||
>新增</el-button |
|||
> |
|||
</template> |
|||
</el-table> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="bottom-btns"> |
|||
<el-button :disabled="!canEdit" type="primary" @click="handleSave" |
|||
>保存</el-button |
|||
> |
|||
<el-button @click="$router.go(-1)">返回</el-button> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import { intersection } from "lodash"; |
|||
import { |
|||
checkUsed, |
|||
getCheckingDictTree, |
|||
postV2PatrolChecking, |
|||
putV2PatrolChecking, |
|||
getV2PatrolChecking, |
|||
getRunProjectList, |
|||
} from "@/api/dike"; |
|||
import TopBackTitle from "@/components/TopBackTitle/index.vue"; |
|||
|
|||
import { getDictMapData } from "@/api/system/dict/data"; |
|||
import { mapGetters } from "vuex"; |
|||
|
|||
export default { |
|||
components: { |
|||
TopBackTitle, |
|||
}, |
|||
data() { |
|||
return { |
|||
tableData: [ |
|||
{ |
|||
id: null, |
|||
parts: [], |
|||
content: "", |
|||
}, |
|||
], |
|||
xcTreeData: [], |
|||
xcTypeOptions: [], |
|||
xcCategoryList: [], |
|||
dikeList: [], |
|||
formData: { |
|||
id: null, |
|||
dikeCode: "", |
|||
dikeName: "", |
|||
name: "", |
|||
type: "", |
|||
category: "", |
|||
createUid: "", |
|||
createName: "", |
|||
items: [], |
|||
}, |
|||
rules: { |
|||
dikeCode: [{ required: true, message: "请选择", trigger: "change" }], |
|||
dikeName: [{ required: true, message: "请选择", trigger: "change" }], |
|||
name: [{ required: true, message: "请输入", trigger: "blur" }], |
|||
category: [{ required: true, message: "请选择", trigger: "change" }], |
|||
type: [{ required: true, message: "请选择", trigger: "change" }], |
|||
createUid: [ |
|||
{ |
|||
required: true, |
|||
message: "未能识别当前登录用户", |
|||
trigger: "change", |
|||
}, |
|||
], |
|||
}, |
|||
}; |
|||
}, |
|||
computed: { |
|||
...mapGetters({ |
|||
userId: "uid", |
|||
userName: "name", |
|||
}), |
|||
canEdit: function () { |
|||
return ( |
|||
this.$route.query.type === "edit" || this.$route.query.type === "add" |
|||
); |
|||
}, |
|||
}, |
|||
created() { |
|||
// 获取巡查类型 |
|||
this.getDicts("patrol_maintenance_type").then((res) => { |
|||
if (res.data && Array.isArray(res.data)) { |
|||
this.xcTypeOptions = res.data; |
|||
} |
|||
}); |
|||
this.getDicts("patrol_maintenance_category").then((res) => { |
|||
if (res.data && Array.isArray(res.data)) { |
|||
this.xcCategoryList = res.data; |
|||
} |
|||
}); |
|||
getDictMapData("df_xs_c_classfy").then((res) => { |
|||
// this.mapLabelData = res?.data || {}; |
|||
// this.getTableData(); |
|||
}); |
|||
}, |
|||
mounted() { |
|||
this.getDetailsData(); |
|||
}, |
|||
methods: { |
|||
handleGetRemoteDikeMethod(query) { |
|||
getRunProjectList({ |
|||
pageSize: 10, |
|||
pageNum: 1, |
|||
data: { |
|||
dikeName: query, |
|||
}, |
|||
}).then((res) => { |
|||
if (res) { |
|||
this.dikeList = res.records; |
|||
} |
|||
}); |
|||
}, |
|||
handleChangeDike() { |
|||
let res = this.dikeList.find( |
|||
(v) => v.dikeName === this.formData.dikeName |
|||
); |
|||
this.formData.dikeType = res.dikeType; |
|||
this.formData.dikeCode = res.dikeCode; |
|||
}, |
|||
// 获取详情信息 |
|||
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 { data } = await getV2PatrolChecking(checkId); |
|||
if (data?.items) { |
|||
this.formData.id = data.id; |
|||
this.formData.name = data.name; |
|||
this.formData.type = data.type; |
|||
this.formData.category = data.category; |
|||
this.formData.dikeCode = data.dikeCode; |
|||
this.formData.dikeName = data.dikeName; |
|||
this.formData.createUid = data.createUid; |
|||
this.formData.createName = data.createName; |
|||
// 匹配xcTreeData |
|||
this.matchXcTreeData(_xcTreeData, data.items); |
|||
this.tableData = data.items; |
|||
} |
|||
} else { |
|||
this.formData.createUid = this.userId; |
|||
this.formData.createName = this.userName; |
|||
} |
|||
this.xcTreeData = _xcTreeData; |
|||
}, |
|||
// 修改级联选项时填写content |
|||
handleChangeCascader(val, row) { |
|||
if (val?.length) { |
|||
let resObj = this.xcTreeData.find((v) => v.key === val[0]); |
|||
for (let i = 1; i < val.length; i++) { |
|||
let resDict = resObj.children?.find((v) => v.key === val[i]); |
|||
if (resDict) { |
|||
resObj = resDict; |
|||
} else { |
|||
break; |
|||
} |
|||
} |
|||
if (!row.content) row.content = resObj.content; |
|||
} |
|||
}, |
|||
handleChangeSelectDike(val) { |
|||
let res = this.dikeList.find((v) => v.dikeCode === val); |
|||
if (res) this.formData.dikeName = res.dikeName; |
|||
}, |
|||
// 树转换 |
|||
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 || ""; |
|||
delete v.children; |
|||
} else { |
|||
deepCalc(v, item.parts); |
|||
} |
|||
}); |
|||
} else { |
|||
delete item.children; |
|||
} |
|||
} |
|||
treeList.forEach((item) => { |
|||
deepCalc(item); |
|||
}); |
|||
return treeList; |
|||
}, |
|||
// 匹配维修养护内容 |
|||
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 || ""; |
|||
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; |
|||
}, |
|||
handleAddNew(index) { |
|||
console.log("index >>>>> ", index); |
|||
if (index !== null) { |
|||
this.tableData.splice(index + 1, 0, { |
|||
id: null, |
|||
parts: [], |
|||
content: "", |
|||
}); |
|||
} else { |
|||
this.tableData.push({ |
|||
id: null, |
|||
parts: [], |
|||
content: "", |
|||
}); |
|||
} |
|||
}, |
|||
// 保存 |
|||
handleSave() { |
|||
console.log("保存 >>> ", { |
|||
...this.formData, |
|||
items: this.tableData, |
|||
}); |
|||
if (this.$route.query.id) { |
|||
this.formData.id = this.$route.query.id; |
|||
} |
|||
this.$refs.ruleForm.validate().then((valid) => { |
|||
if (valid) { |
|||
console.log("valid >>>>> ", valid); |
|||
if (this.tableData.length) { |
|||
if ( |
|||
this.tableData.some( |
|||
(v) => !v.content || !v.parts || !v.parts.length |
|||
) |
|||
) { |
|||
this.$message.error("请完善巡查部位或检车内容"); |
|||
return; |
|||
} |
|||
} else { |
|||
this.$message.error("请至少新增一条巡查项目"); |
|||
return; |
|||
} |
|||
if (this.formData.id) { |
|||
putV2PatrolChecking({ |
|||
...this.formData, |
|||
items: this.tableData, |
|||
}).then((res) => { |
|||
this.$message.success("更新成功"); |
|||
setTimeout(() => { |
|||
this.$router.go(-1); |
|||
}, 500); |
|||
}); |
|||
} else { |
|||
postV2PatrolChecking({ |
|||
...this.formData, |
|||
items: this.tableData, |
|||
}).then((res) => { |
|||
if (res.data?.id) { |
|||
this.formData.id = res.data.id; |
|||
} |
|||
this.$message.success("保存成功"); |
|||
setTimeout(() => { |
|||
this.$router.go(-1); |
|||
}, 500); |
|||
}); |
|||
} |
|||
} |
|||
}); |
|||
}, |
|||
}, |
|||
}; |
|||
</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; |
|||
padding-bottom: 80px; |
|||
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,320 @@ |
|||
<!-- 巡查项目管理-堤防 --> |
|||
<script> |
|||
import { getDicts } from "@/api/management"; |
|||
|
|||
import { getV2PatrolCheckingList, delV2PatrolChecking } from "@/api/dike"; |
|||
|
|||
import TopBackTitle from "@/components/TopBackTitle/index.vue"; |
|||
import { calcTableHeight } from "@/mixins/calcTableHeight"; |
|||
|
|||
export default { |
|||
name: "patrolItemsManage", |
|||
components: { |
|||
TopBackTitle, |
|||
}, |
|||
mixins: [calcTableHeight], |
|||
data() { |
|||
return { |
|||
paramsData: { |
|||
name: "", |
|||
type: "", |
|||
category: "", |
|||
}, |
|||
xcTypeOptions: [], // 检查类型 |
|||
xcCategoryOptions: [], // 检查类别 |
|||
tableData: [], // 检查列表 |
|||
pageData: { |
|||
pageNum: 1, // 当前页 |
|||
pageSize: 10, // 请求数量 |
|||
pageSizes: [10, 20, 50, 100], |
|||
total: 0, // 总数量 |
|||
}, |
|||
}; |
|||
}, |
|||
methods: { |
|||
handleCurrentPageChange(page) { |
|||
this.pageData.pageNum = page; |
|||
this.getTableData(); |
|||
}, |
|||
handlePageSizeChange(pageSize) { |
|||
this.pageData.pageSize = pageSize; |
|||
this.getTableData(); |
|||
}, |
|||
deleteTableItem(row) { |
|||
console.log("deleteTableItem删除 >>>>> ", row); |
|||
delV2PatrolChecking(row.id).then((res) => { |
|||
this.getTableData(); |
|||
this.$message.success("删除成功"); |
|||
}); |
|||
}, |
|||
// 表格筛选 |
|||
searchTableList() { |
|||
this.getTableData(); |
|||
}, |
|||
// 重置搜索 |
|||
resetSearch() { |
|||
this.paramsData.name = ""; |
|||
this.paramsData.type = ""; |
|||
this.paramsData.category = ""; |
|||
this.pageData.pageNum = 1; |
|||
this.getTableData(); |
|||
}, |
|||
// 添加巡查项目 |
|||
handleAddItem() { |
|||
this.$router.push({ |
|||
path: "patrolItemsDetails", |
|||
query: { |
|||
type: "add", |
|||
}, |
|||
}); |
|||
}, |
|||
// 编辑巡查项目 |
|||
handleOperateTableItem(row, mode) { |
|||
this.$router.push({ |
|||
path: "patrolItemsDetails", |
|||
query: { |
|||
id: row.id, |
|||
type: mode, |
|||
}, |
|||
}); |
|||
}, |
|||
|
|||
// 获取列表数据 |
|||
getTableData() { |
|||
getV2PatrolCheckingList({ |
|||
data: { |
|||
category: this.paramsData.category, |
|||
dikeCode: "", |
|||
name: this.paramsData.name, |
|||
type: this.paramsData.type, |
|||
}, |
|||
cv: { |
|||
name: "name", |
|||
type: "like", |
|||
}, |
|||
pageSize: this.pageData.pageSize, |
|||
pageNum: this.pageData.pageNum, |
|||
}).then((res) => { |
|||
if (res) { |
|||
this.tableData = res.records; |
|||
this.pageData.total = res.total; |
|||
} |
|||
}); |
|||
}, |
|||
// 领单操作 |
|||
handleGetInvoices(row) { |
|||
this.$router.push({ |
|||
path: "inspectionRecordDetails", |
|||
query: { |
|||
checkingId: row.id, |
|||
}, |
|||
}); |
|||
}, |
|||
}, |
|||
mounted() { |
|||
// 获取列表数据 |
|||
this.getTableData(); |
|||
// 获取巡查类型 |
|||
getDicts("patrol_maintenance_type").then((res) => { |
|||
if (res.data && Array.isArray(res.data)) { |
|||
this.xcTypeOptions = res.data; |
|||
} |
|||
}); |
|||
getDicts("patrol_maintenance_category").then((res) => { |
|||
if (res.data && Array.isArray(res.data)) { |
|||
this.xcCategoryOptions = res.data; |
|||
} |
|||
}); |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<template> |
|||
<div class="slider-right"> |
|||
<TopBackTitle :showBackBtn="false" /> |
|||
<div class="table-box slider-right-body" ref="tableBoxRef"> |
|||
<div class="" ref="topBoxRef"> |
|||
<div class="top-search"> |
|||
<span>巡视检查名称：</span> |
|||
<el-input |
|||
class="search-input" |
|||
v-model="paramsData.name" |
|||
placeholder="请输入巡视检查名称" |
|||
/> |
|||
<span class="ml-10">巡查类型：</span> |
|||
<el-select v-model="paramsData.type" placeholder="请选择"> |
|||
<el-option label="全部" value=""></el-option> |
|||
<el-option |
|||
v-for="item in xcTypeOptions" |
|||
:label="item.dictLabel" |
|||
:value="item.dictValue" |
|||
:key="item.dictValue" |
|||
></el-option> |
|||
</el-select> |
|||
<span class="ml-10">巡查类别：</span> |
|||
<el-select v-model="paramsData.category" placeholder="请选择"> |
|||
<el-option label="全部" value=""></el-option> |
|||
<el-option |
|||
v-for="item in xcCategoryOptions" |
|||
:label="item.dictLabel" |
|||
:value="item.dictValue" |
|||
:key="item.dictValue" |
|||
></el-option> |
|||
</el-select> |
|||
<el-button |
|||
class="search-btn !ml-16" |
|||
type="success" |
|||
@click="searchTableList()" |
|||
>搜索</el-button |
|||
> |
|||
<el-button @click="resetSearch()">重置</el-button> |
|||
<el-button |
|||
class="search-btn" |
|||
style="float: right" |
|||
type="success" |
|||
v-hasPermi="['df:run:patrol:checking:item:add']" |
|||
@click="handleAddItem" |
|||
>添加</el-button |
|||
> |
|||
</div> |
|||
</div> |
|||
<el-table :height="tableHeight" :data="tableData" border> |
|||
<!-- <el-table-column type="index" align="center" label="序号" width="100"> |
|||
</el-table-column> --> |
|||
<el-table-column prop="id" align="center" label="单号" width="100"> |
|||
</el-table-column> |
|||
<el-table-column prop="name" align="center" label="巡查名称"> |
|||
</el-table-column> |
|||
<el-table-column prop="dikeName" align="center" label="工程名称"> |
|||
</el-table-column> |
|||
<el-table-column prop="dikeCode" align="center" label="工程代码"> |
|||
</el-table-column> |
|||
<el-table-column align="center" label="巡查类型"> |
|||
<template slot-scope="scope"> |
|||
<span v-if="xcTypeOptions.length > 0 && scope.row.type !== null">{{ |
|||
xcTypeOptions.find((item) => item.dictValue == scope.row.type) |
|||
.dictLabel || "" |
|||
}}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column align="center" label="巡查类别"> |
|||
<template slot-scope="scope"> |
|||
<span |
|||
v-if="xcCategoryOptions.length > 0 && scope.row.category !== null" |
|||
>{{ |
|||
xcCategoryOptions.find( |
|||
(item) => item.dictValue == scope.row.category |
|||
).dictLabel || "" |
|||
}}</span |
|||
> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="createName" |
|||
align="center" |
|||
sortable |
|||
label="创建人" |
|||
> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="createTime" |
|||
align="center" |
|||
sortable |
|||
label="创建时间" |
|||
> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="address" |
|||
align="center" |
|||
label="操作" |
|||
fixed="right" |
|||
width="200" |
|||
> |
|||
<template slot-scope="scope"> |
|||
<el-button |
|||
style="margin-right: 16px" |
|||
v-hasPermi="['df:run:patrol:list:item:getInvoices']" |
|||
type="text" |
|||
size="small" |
|||
@click="handleGetInvoices(scope.row)" |
|||
>领单</el-button |
|||
> |
|||
<el-button |
|||
style="margin-right: 16px" |
|||
@click="handleOperateTableItem(scope.row, 'view')" |
|||
v-hasPermi="['df:run:patrol:list:item:check']" |
|||
type="text" |
|||
size="small" |
|||
>查看</el-button |
|||
> |
|||
<el-button |
|||
style="margin-right: 16px" |
|||
@click="handleOperateTableItem(scope.row, 'edit')" |
|||
v-hasPermi="['df:run:patrol:list:item:edit']" |
|||
type="text" |
|||
size="small" |
|||
>编辑</el-button |
|||
> |
|||
<el-popconfirm |
|||
confirm-button-text="确定" |
|||
cancel-button-text="取消" |
|||
icon="el-icon-info" |
|||
icon-color="red" |
|||
title="确定删除吗？" |
|||
@confirm="deleteTableItem(scope.row)" |
|||
> |
|||
<el-button |
|||
style="color: red" |
|||
type="text" |
|||
size="small" |
|||
slot="reference" |
|||
v-hasPermi="['df:run:patrol:list:item:delete']" |
|||
>删除</el-button |
|||
> |
|||
</el-popconfirm> |
|||
</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" |
|||
@current-change="(e) => handleCurrentPageChange(e)" |
|||
@size-change="(e) => handlePageSizeChange(e)" |
|||
> |
|||
</el-pagination> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<style scoped lang="less"> |
|||
.top-title { |
|||
height: 50px; |
|||
background-color: white; |
|||
display: flex; |
|||
padding-left: 16px; |
|||
align-items: center; |
|||
font-weight: 600; |
|||
} |
|||
|
|||
.table-box { |
|||
width: 100%; |
|||
margin-top: 24px; |
|||
padding: 16px; |
|||
background-color: white; |
|||
|
|||
.top-search { |
|||
// display: flex; |
|||
align-items: center; |
|||
margin-bottom: 8px; |
|||
|
|||
.search-input { |
|||
width: 240px; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,744 @@ |
|||
<template> |
|||
<div class="overview-analysis-page slider-right"> |
|||
<TopBackTitle :showBackBtn="false"></TopBackTitle> |
|||
|
|||
<div class="slider-right-body"> |
|||
<div class="top-search"> |
|||
<span class="ml-10">巡查周期：</span> |
|||
<el-date-picker |
|||
v-model="paramsData.timeRange" |
|||
size="small" |
|||
type="daterange" |
|||
range-separator="至" |
|||
start-placeholder="开始日期" |
|||
end-placeholder="结束日期" |
|||
value-format="yyyy-MM-dd" |
|||
></el-date-picker> |
|||
<span class="ml-10">工程：</span> |
|||
<el-select |
|||
class="w-240" |
|||
size="small" |
|||
remote |
|||
filterable |
|||
reserve-keyword |
|||
:remote-method="handleGetRemoteDikeMethod" |
|||
@focus="handleGetRemoteDikeMethod('')" |
|||
@change="handleChangeDike" |
|||
v-model="paramsData.dikeCode" |
|||
placeholder="请选择堤防" |
|||
> |
|||
<el-option |
|||
v-for="item in dikeList" |
|||
:key="item.id" |
|||
:label="item.dikeName" |
|||
:value="item.dikeCode" |
|||
></el-option> |
|||
</el-select> |
|||
<el-button |
|||
class="search-btn !ml-16" |
|||
type="success" |
|||
size="small" |
|||
@click="handleSearch()" |
|||
>查询</el-button |
|||
> |
|||
<el-button @click="resetSearch()" size="small">重置</el-button> |
|||
</div> |
|||
|
|||
<div class="content-box"> |
|||
<div class="sum-box-list"> |
|||
<div class="list-item"> |
|||
<div class="item-title">巡查项目总数(个)</div> |
|||
<div class="item-value"> |
|||
{{ projectSum == null ? "-" : projectSum }} |
|||
</div> |
|||
</div> |
|||
<div class="list-item"> |
|||
<div class="item-title">巡查记录总数(个)</div> |
|||
<div class="item-value"> |
|||
{{ xcRecordsSum == null ? "-" : xcRecordsSum }} |
|||
</div> |
|||
</div> |
|||
<div class="list-item"> |
|||
<div class="item-title">巡查缺陷总数(个)</div> |
|||
<div class="item-value"> |
|||
{{ flawSum == null ? "-" : flawSum }} |
|||
</div> |
|||
</div> |
|||
<div class="list-item"> |
|||
<div class="item-title">缺陷养护总数(个)</div> |
|||
<div class="item-value"> |
|||
{{ yhSum == null ? "-" : yhSum }} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="echarts-box-list"> |
|||
<div class="title">巡查记录分析</div> |
|||
<div class="flex"> |
|||
<div |
|||
class="echarts-box echarts-box-left" |
|||
ref="patrolRecordRefPie" |
|||
></div> |
|||
<div |
|||
class="echarts-box echarts-box-right" |
|||
ref="patrolRecordRefBar" |
|||
></div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="echarts-box-list"> |
|||
<div class="title">巡查缺陷分析</div> |
|||
<div class="flex"> |
|||
<div |
|||
class="echarts-box echarts-box-left" |
|||
ref="patrolFlawRefPie" |
|||
></div> |
|||
<div |
|||
class="echarts-box echarts-box-right" |
|||
ref="patrolFlawRefBar" |
|||
></div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="echarts-box-list"> |
|||
<div class="title">缺陷问题等级分析</div> |
|||
<div class="flex"> |
|||
<div |
|||
class="echarts-box echarts-box-left" |
|||
ref="flawProblemRefPie" |
|||
></div> |
|||
<div |
|||
class="echarts-box echarts-box-right" |
|||
ref="flawProblemRefBar" |
|||
></div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="echarts-box-list"> |
|||
<div class="title">缺陷养护对比分析</div> |
|||
<div class="flex"> |
|||
<div |
|||
class="echarts-box echarts-box-left" |
|||
ref="yhCompareRefPie" |
|||
></div> |
|||
<div |
|||
class="echarts-box echarts-box-right" |
|||
ref="yhCompareRefBar" |
|||
></div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import * as echarts from "echarts"; |
|||
import TopBackTitle from "@/components/TopBackTitle/index.vue"; |
|||
import { cascaderLazyLoad } from "@/utils/elUtils"; |
|||
|
|||
import { getV2PatrolStatisticChart, getRunProjectList } from "@/api/dike"; |
|||
|
|||
import { |
|||
initCommonBarLineOptions, |
|||
initCommonPieRingOptions, |
|||
initCommonAngleAxisOptions, |
|||
} from "@/utils/echartsUtils"; |
|||
|
|||
export default { |
|||
components: { |
|||
TopBackTitle, |
|||
}, |
|||
data() { |
|||
return { |
|||
projectSum: null, |
|||
xcRecordsSum: null, |
|||
flawSum: null, |
|||
yhSum: null, |
|||
dikeList: [], |
|||
paramsData: { |
|||
dikeCode: null, |
|||
dikeName: null, |
|||
timeRange: [], |
|||
}, |
|||
areasOptionProps: { |
|||
emitPath: false, |
|||
checkStrictly: true, //选择任意一级 |
|||
expandTrigger: "hover", |
|||
lazy: true, |
|||
lazyLoad: cascaderLazyLoad, |
|||
}, |
|||
patrolRecordRefPieInstance: null, |
|||
patrolRecordRefBarInstance: null, |
|||
patrolFlawRefPieInstance: null, |
|||
patrolFlawRefBarInstance: null, |
|||
flawProblemRefPieInstance: null, |
|||
flawProblemRefBarInstance: null, |
|||
yhCompareRefPieInstance: null, |
|||
yhCompareRefBarInstance: null, |
|||
}; |
|||
}, |
|||
mounted() { |
|||
this.getTableData(); |
|||
window.addEventListener("resize", this.echartsResizeFunc); |
|||
}, |
|||
beforeMounted() { |
|||
window.removeEventListener("resize", this.echartsResizeFunc); |
|||
}, |
|||
methods: { |
|||
handleChangeDike() { |
|||
let res = this.dikeList.find( |
|||
(v) => v.dikeCode === this.paramsData.dikeCode |
|||
); |
|||
this.paramsData.dikeType = res.dikeType; |
|||
this.paramsData.dikeName = res.dikeName; |
|||
}, |
|||
handleGetRemoteDikeMethod(query) { |
|||
getRunProjectList({ |
|||
pageSize: 10, |
|||
pageNum: 1, |
|||
data: { |
|||
dikeName: query, |
|||
}, |
|||
}).then((res) => { |
|||
if (res) { |
|||
this.dikeList = res.records; |
|||
} |
|||
}); |
|||
}, |
|||
// 底层获取图表数据 |
|||
requestFunc({ group }) { |
|||
return getV2PatrolStatisticChart({ |
|||
group, |
|||
startTime: this.paramsData.timeRange[0] |
|||
? this.paramsData[0] + " 00:00:00" |
|||
: null, |
|||
endTime: this.paramsData.timeRange[1] |
|||
? this.paramsData[1] + " 23:59:59" |
|||
: null, |
|||
adcd: this.paramsData.adcd, |
|||
}); |
|||
}, |
|||
// 渲染echarts图表 |
|||
|
|||
renderEcharts({ |
|||
group, |
|||
echartsInstanceName, |
|||
echartsDomName, |
|||
echartsOptions, |
|||
}) { |
|||
return new Promise((r, j) => { |
|||
this.requestFunc({ |
|||
group, |
|||
}) |
|||
.then((res) => { |
|||
if (res.data) { |
|||
this.$nextTick(() => { |
|||
if (this[echartsInstanceName]) |
|||
this[echartsInstanceName].dispose(); |
|||
this[echartsInstanceName] = echarts.init( |
|||
this.$refs[echartsDomName] |
|||
); |
|||
this[echartsInstanceName].setOption( |
|||
initCommonBarLineOptions({ |
|||
...echartsOptions, |
|||
data: res.data || {}, |
|||
}) |
|||
); |
|||
}); |
|||
} |
|||
r(res); |
|||
}) |
|||
.catch((err) => { |
|||
j(err); |
|||
}); |
|||
}); |
|||
}, |
|||
echartsResizeFunc() { |
|||
if (this.patrolRecordRefPieInstance) |
|||
this.patrolRecordRefPieInstance.resize(); |
|||
if (this.patrolRecordRefBarInstance) |
|||
this.patrolRecordRefBarInstance.resize(); |
|||
if (this.patrolFlawRefPieInstance) this.patrolFlawRefPieInstance.resize(); |
|||
if (this.patrolFlawRefBarInstance) this.patrolFlawRefBarInstance.resize(); |
|||
if (this.flawProblemRefPieInstance) |
|||
this.flawProblemRefPieInstance.resize(); |
|||
if (this.flawProblemRefBarInstance) |
|||
this.flawProblemRefBarInstance.resize(); |
|||
if (this.yhCompareRefPieInstance) this.yhCompareRefPieInstance.resize(); |
|||
if (this.yhCompareRefBarInstance) this.yhCompareRefBarInstance.resize(); |
|||
}, |
|||
// 获取页面数据 |
|||
getTableData() { |
|||
// 巡查记录分析 |
|||
this.requestFunc({ group: "C_14" }).then((res) => { |
|||
if (res.data) { |
|||
// 渲染图表和统计总数 |
|||
if (res.data?.yaxis?.length) { |
|||
let newArr = res.data.yaxis.flatMap((v) => v.series); |
|||
this.xcRecordsSum = newArr |
|||
.map((v) => Number(v.sum ?? null)) |
|||
.reduce((acc, cur) => { |
|||
return acc + cur; |
|||
}, 0); |
|||
} |
|||
this.$nextTick(() => { |
|||
// 柱形图 |
|||
if (this.patrolRecordRefBarInstance) { |
|||
this.patrolRecordRefBarInstance.dispose(); |
|||
} |
|||
this.patrolRecordRefBarInstance = echarts.init( |
|||
this.$refs.patrolRecordRefBar |
|||
); |
|||
this.patrolRecordRefBarInstance.setOption( |
|||
initCommonBarLineOptions({ |
|||
data: res.data || {}, |
|||
type: "bar", |
|||
seriesOptions: { |
|||
stack: "one", |
|||
barWidth: 20, |
|||
}, |
|||
}) |
|||
); |
|||
// 饼状图 |
|||
if (this.patrolRecordRefPieInstance) { |
|||
this.patrolRecordRefPieInstance.dispose(); |
|||
} |
|||
this.patrolRecordRefPieInstance = echarts.init( |
|||
this.$refs.patrolRecordRefPie |
|||
); |
|||
this.patrolRecordRefPieInstance.setOption( |
|||
initCommonPieRingOptions({ |
|||
colors: [ |
|||
{ |
|||
type: "linear", |
|||
x: 0, |
|||
y: 0, |
|||
x2: 0, |
|||
y2: 1, |
|||
colorStops: [ |
|||
{ |
|||
offset: 0, |
|||
color: "rgba(54, 163, 217, 0.1)", // 0% 处的颜色 |
|||
}, |
|||
{ |
|||
offset: 1, |
|||
color: "rgba(54, 163, 217, 1)", // 100% 处的颜色 |
|||
}, |
|||
], |
|||
global: false, // 缺省为 false |
|||
}, |
|||
{ |
|||
type: "linear", |
|||
x: 0, |
|||
y: 0, |
|||
x2: 0, |
|||
y2: 1, |
|||
colorStops: [ |
|||
{ |
|||
offset: 0, |
|||
color: "rgba(54, 178, 158, 1)", // 0% 处的颜色 |
|||
}, |
|||
{ |
|||
offset: 1, |
|||
color: "rgba(54, 178, 158, 0.1)", // 100% 处的颜色 |
|||
}, |
|||
], |
|||
global: false, // 缺省为 false |
|||
}, |
|||
], |
|||
data: res.data || {}, |
|||
seriesOptions: {}, |
|||
}) |
|||
); |
|||
}); |
|||
} |
|||
}); |
|||
// 巡查缺陷分析 |
|||
this.requestFunc({ group: "C_15" }).then((res) => { |
|||
if (res.data) { |
|||
if (res.data?.yaxis?.length) { |
|||
this.flawSum = res.data.yaxis |
|||
.flatMap((v) => v.series) |
|||
.map((v) => Number(v.sum ?? null)) |
|||
.reduce((acc, cur) => acc + cur, 0); |
|||
} |
|||
this.$nextTick(() => { |
|||
// 柱形图 |
|||
if (this.patrolFlawRefBarInstance) { |
|||
this.patrolFlawRefBarInstance.dispose(); |
|||
} |
|||
this.patrolFlawRefBarInstance = echarts.init( |
|||
this.$refs.patrolFlawRefBar |
|||
); |
|||
this.patrolFlawRefBarInstance.setOption( |
|||
initCommonBarLineOptions({ |
|||
data: res.data || {}, |
|||
type: "bar", |
|||
colors: ["#29CCCC", "#0099DF"], |
|||
seriesOptions: { |
|||
barWidth: 20, |
|||
}, |
|||
}) |
|||
); |
|||
// 饼状图 |
|||
if (this.patrolFlawRefPieInstance) { |
|||
this.patrolFlawRefPieInstance.dispose(); |
|||
} |
|||
this.patrolFlawRefPieInstance = echarts.init( |
|||
this.$refs.patrolFlawRefPie |
|||
); |
|||
this.patrolFlawRefPieInstance.setOption( |
|||
initCommonPieRingOptions({ |
|||
colors: [ |
|||
{ |
|||
type: "linear", |
|||
x: 0, |
|||
y: 0, |
|||
x2: 0, |
|||
y2: 1, |
|||
colorStops: [ |
|||
{ |
|||
offset: 0, |
|||
color: "rgba(54, 163, 217, 0.1)", // 0% 处的颜色 |
|||
}, |
|||
{ |
|||
offset: 1, |
|||
color: "rgba(54, 163, 217, 1)", // 100% 处的颜色 |
|||
}, |
|||
], |
|||
global: false, // 缺省为 false |
|||
}, |
|||
{ |
|||
type: "linear", |
|||
x: 0, |
|||
y: 0, |
|||
x2: 0, |
|||
y2: 1, |
|||
colorStops: [ |
|||
{ |
|||
offset: 0, |
|||
color: "rgba(54, 178, 158, 1)", // 0% 处的颜色 |
|||
}, |
|||
{ |
|||
offset: 1, |
|||
color: "rgba(54, 178, 158, 0.1)", // 100% 处的颜色 |
|||
}, |
|||
], |
|||
global: false, // 缺省为 false |
|||
}, |
|||
], |
|||
data: res.data || {}, |
|||
seriesOptions: {}, |
|||
}) |
|||
); |
|||
}); |
|||
} |
|||
}); |
|||
// 缺陷问题等级分析 |
|||
this.requestFunc({ group: "C_16" }).then((res) => { |
|||
if (res.data) { |
|||
this.$nextTick(() => { |
|||
// 柱形图 |
|||
if (this.flawProblemRefBarInstance) { |
|||
this.flawProblemRefBarInstance.dispose(); |
|||
} |
|||
this.flawProblemRefBarInstance = echarts.init( |
|||
this.$refs.flawProblemRefBar |
|||
); |
|||
this.flawProblemRefBarInstance.setOption( |
|||
initCommonBarLineOptions({ |
|||
data: res.data || {}, |
|||
type: "line", |
|||
colors: ["#0099DF", "#36B29E", "#F29130", "#F45555"], |
|||
seriesOptions: { |
|||
barWidth: 20, |
|||
}, |
|||
}) |
|||
); |
|||
// 饼状图 |
|||
if (this.flawProblemRefPieInstance) { |
|||
this.flawProblemRefPieInstance.dispose(); |
|||
} |
|||
this.flawProblemRefPieInstance = echarts.init( |
|||
this.$refs.flawProblemRefPie |
|||
); |
|||
this.flawProblemRefPieInstance.setOption( |
|||
initCommonPieRingOptions({ |
|||
data: res.data || {}, |
|||
colors: [ |
|||
{ |
|||
type: "linear", |
|||
x: 0, |
|||
y: 0, |
|||
x2: 0, |
|||
y2: 1, |
|||
colorStops: [ |
|||
{ |
|||
offset: 0, |
|||
color: "rgba(54, 163, 217, 0.1)", // 0% 处的颜色 |
|||
}, |
|||
{ |
|||
offset: 1, |
|||
color: "rgba(54, 163, 217, 1)", // 100% 处的颜色 |
|||
}, |
|||
], |
|||
global: false, // 缺省为 false |
|||
}, |
|||
{ |
|||
type: "linear", |
|||
x: 0, |
|||
y: 0, |
|||
x2: 0, |
|||
y2: 1, |
|||
colorStops: [ |
|||
{ |
|||
offset: 0, |
|||
color: "rgba(54, 178, 158, 0.1)", // 0% 处的颜色 |
|||
}, |
|||
{ |
|||
offset: 1, |
|||
color: "rgba(54, 178, 158, 1)", // 100% 处的颜色 |
|||
}, |
|||
], |
|||
global: false, // 缺省为 false |
|||
}, |
|||
{ |
|||
type: "linear", |
|||
x: 0, |
|||
y: 0, |
|||
x2: 0, |
|||
y2: 1, |
|||
colorStops: [ |
|||
{ |
|||
offset: 0, |
|||
color: "rgba(242, 145, 48, 0.1)", // 0% 处的颜色 |
|||
}, |
|||
{ |
|||
offset: 1, |
|||
color: "rgba(242, 145, 48, 1)", // 100% 处的颜色 |
|||
}, |
|||
], |
|||
global: false, // 缺省为 false |
|||
}, |
|||
{ |
|||
type: "linear", |
|||
x: 0, |
|||
y: 0, |
|||
x2: 0, |
|||
y2: 1, |
|||
colorStops: [ |
|||
{ |
|||
offset: 0, |
|||
color: "rgba(244, 85, 85, 0.1)", // 0% 处的颜色 |
|||
}, |
|||
{ |
|||
offset: 1, |
|||
color: "rgba(244, 85, 85, 1)", // 100% 处的颜色 |
|||
}, |
|||
], |
|||
global: false, // 缺省为 false |
|||
}, |
|||
], |
|||
seriesOptions: {}, |
|||
}) |
|||
); |
|||
}); |
|||
} |
|||
}); |
|||
// 缺陷养护对比分析 |
|||
this.requestFunc({ group: "C_17" }).then((res) => { |
|||
if (res.data) { |
|||
if (res.data.yaxis?.length) { |
|||
this.yhSum = Number( |
|||
res.data.yaxis |
|||
.flatMap((v) => v.series) |
|||
?.find((v) => v.code === "DF_BD_YH_SUM")?.sum ?? null |
|||
); |
|||
} |
|||
this.$nextTick(() => { |
|||
// 柱形图 |
|||
if (this.yhCompareRefBarInstance) { |
|||
this.yhCompareRefBarInstance.dispose(); |
|||
} |
|||
this.yhCompareRefBarInstance = echarts.init( |
|||
this.$refs.yhCompareRefBar |
|||
); |
|||
this.yhCompareRefBarInstance.setOption( |
|||
initCommonBarLineOptions({ |
|||
data: res.data || {}, |
|||
type: "bar", |
|||
colors: ["#0099DF", "#81B84A"], |
|||
seriesOptions: { |
|||
barWidth: 20, |
|||
}, |
|||
}) |
|||
); |
|||
// 饼状图 |
|||
if (this.yhCompareRefPieInstance) { |
|||
this.yhCompareRefPieInstance.dispose(); |
|||
} |
|||
this.yhCompareRefPieInstance = echarts.init( |
|||
this.$refs.yhCompareRefPie |
|||
); |
|||
let options = initCommonAngleAxisOptions({ |
|||
data: res.data || {}, |
|||
colors: [ |
|||
{ |
|||
type: "linear", |
|||
x: 0, |
|||
y: 0, |
|||
x2: 0, |
|||
y2: 1, |
|||
colorStops: [ |
|||
{ |
|||
offset: 0, |
|||
color: "rgba(54, 163, 217, 1)", // 0% 处的颜色 |
|||
}, |
|||
{ |
|||
offset: 1, |
|||
color: "rgba(54, 163, 217, 0.1)", // 100% 处的颜色 |
|||
}, |
|||
], |
|||
global: false, // 缺省为 false |
|||
}, |
|||
{ |
|||
type: "linear", |
|||
x: 0, |
|||
y: 0, |
|||
x2: 0, |
|||
y2: 1, |
|||
colorStops: [ |
|||
{ |
|||
offset: 0, |
|||
color: "rgba(129, 184, 74, 1)", // 0% 处的颜色 |
|||
}, |
|||
{ |
|||
offset: 1, |
|||
color: "rgba(129, 184, 74, 0.1)", // 100% 处的颜色 |
|||
}, |
|||
], |
|||
global: false, // 缺省为 false |
|||
}, |
|||
], |
|||
seriesOptions: {}, |
|||
}); |
|||
console.log("options >>>>> ", options); |
|||
this.yhCompareRefPieInstance.setOption(options); |
|||
}); |
|||
} |
|||
}); |
|||
// 项目统计总数 |
|||
this.requestFunc({ group: "C_18" }).then((res) => { |
|||
if (res.data) { |
|||
if (res.data?.yaxis?.length) { |
|||
let newArr = res.data.yaxis.flatMap((v) => v.series); |
|||
this.projectSum = newArr |
|||
.map((v) => Number(v.sum ?? null)) |
|||
.reduce((acc, cur) => { |
|||
return acc + cur; |
|||
}, 0); |
|||
} |
|||
} |
|||
}); |
|||
}, |
|||
handleSearch() { |
|||
this.getTableData(); |
|||
}, |
|||
resetSearch() { |
|||
this.paramsData.timeRange = []; |
|||
this.paramsData.dikeCode = null; |
|||
this.getTableData(); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style scoped lang="scss"> |
|||
.overview-analysis-page { |
|||
.slider-right-body { |
|||
padding: 0; |
|||
.top-search { |
|||
padding: 24px; |
|||
border-bottom: 1px solid #ccc; |
|||
} |
|||
|
|||
.content-box { |
|||
padding: 24px; |
|||
.sum-box-list { |
|||
display: flex; |
|||
.list-item { |
|||
width: 25%; |
|||
height: 102px; |
|||
border: 1px solid #36b29e; |
|||
border-radius: 10px; |
|||
position: relative; |
|||
padding: 16px 24px; |
|||
margin-right: 16px; |
|||
margin-bottom: 12px; |
|||
background: linear-gradient( |
|||
180deg, |
|||
#eafffc 0%, |
|||
rgba(222, 255, 250, 0) 100% |
|||
), |
|||
#ffffff; |
|||
overflow: hidden; |
|||
&::after { |
|||
position: absolute; |
|||
content: ""; |
|||
background: url("../../../../../assets/image/icon-attr-bg.png") |
|||
no-repeat center center; |
|||
width: 64px; |
|||
height: 64px; |
|||
right: -12px; |
|||
bottom: -12px; |
|||
} |
|||
.item-title { |
|||
font-size: 14px; |
|||
} |
|||
.item-value { |
|||
margin-top: 12px; |
|||
font-size: 32px; |
|||
color: #36b29e; |
|||
font-weight: 500; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.echarts-box-list { |
|||
.title { |
|||
padding-left: 10px; |
|||
font-size: 14px; |
|||
font-weight: 500; |
|||
margin-top: 12px; |
|||
margin-bottom: 12px; |
|||
position: relative; |
|||
&::before { |
|||
content: " "; |
|||
width: 4px; |
|||
height: 4px; |
|||
background: #36b29e; |
|||
position: absolute; |
|||
left: 1px; |
|||
top: 50%; |
|||
margin-top: -2px; |
|||
transform: rotate(45deg); |
|||
} |
|||
} |
|||
|
|||
.echarts-box { |
|||
width: 100%; |
|||
height: 224px; |
|||
border: 1px solid #f0f0f0; |
|||
} |
|||
|
|||
.echarts-box-left { |
|||
flex-shrink: 0; |
|||
width: 224px; |
|||
} |
|||
.echarts-box-right { |
|||
margin-left: 16px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue