何俊杰
1 year ago
18 changed files with 2071 additions and 1591 deletions
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1,131 +0,0 @@ |
|||
import axios from 'axios'; |
|||
|
|||
class SuperMapImageryLayer { |
|||
constructor(url, options) { |
|||
this.viewer = options.viewer; |
|||
this.options = options || {}; |
|||
this.layerUrl = url; |
|||
this.layerName = ''; |
|||
this.layerInfo = null; |
|||
this.layerProvider = null; |
|||
this.scales84 = []; |
|||
this.scalesweb = []; |
|||
this._delegate = null; |
|||
this.loadData(); |
|||
} |
|||
loadData() { |
|||
this.scales84 = [ |
|||
3.38032714321e-9, 6.76065428641e-9, 1.352130857282e-8, 2.704261714564e-8, 5.408523429128e-8, 1.0817046858257e-7, |
|||
2.1634093716514e-7, 4.3268187433028e-7, 8.6536374866056e-7, 1.73072749732112e-6, 3.46145499464224e-6, |
|||
6.92290998928448e-6, 1.3845819978568952e-5, 2.7691639957137904e-5, 5.538327991427581e-5, 1.1076655982855162e-4, |
|||
2.2153311965710323e-4, 4.4306623931420646e-4, 8.861324786284129e-4, 0.0017722649572568258, 0.0035445299145136517, |
|||
0.007089059829027303 |
|||
]; |
|||
|
|||
this.scalesweb = [ |
|||
1.6901635716e-9, 3.38032714321e-9, 6.76065428641e-9, 1.352130857282e-8, 2.704261714564e-8, 5.408523429128e-8, |
|||
1.0817046858257e-7, 2.1634093716514e-7, 4.3268187433028e-7, 8.6536374866056e-7, 1.73072749732112e-6, |
|||
3.46145499464224e-6, 6.92290998928448e-6, 1.3845819978568952e-5, 2.7691639957137904e-5, 5.538327991427581e-5, |
|||
1.1076655982855162e-4, 2.2153311965710323e-4, 4.4306623931420646e-4, 8.861324786284129e-4, 0.0017722649572568258, |
|||
0.0035445299145136517, 0.007089059829027303 |
|||
]; |
|||
axios |
|||
.get(`${this.layerUrl}.json`) |
|||
.then((res) => { |
|||
if (res.status !== 200) return; |
|||
const result = res.data; |
|||
this.layerName = this.options.name || result.name; |
|||
this.layerInfo = result; |
|||
const rectangle = sycim.Rectangle.fromDegrees(-180, -90, 180, 90); |
|||
const epsgcode = result.prjCoordSys.epsgCode; |
|||
let tilingScheme = ''; |
|||
let minlevel = 0; |
|||
let maxlevel = 22; |
|||
let originx = 0; |
|||
let originy = 0; |
|||
|
|||
if (epsgcode === 4326) { |
|||
tilingScheme = new sycim.GeographicTilingScheme({ |
|||
numberOfLevelZeroTilesX: 2, |
|||
numberOfLevelZeroTilesY: 1 |
|||
}); |
|||
originx = -180; |
|||
originy = 90; |
|||
if (this.options.minimumLevel !== undefined) { |
|||
minlevel = this.options.minimumLevel; |
|||
} else { |
|||
minlevel = 0; |
|||
} |
|||
if (this.options.maximumLevel !== undefined) { |
|||
maxlevel = this.options.maximumLevel; |
|||
} else { |
|||
maxlevel = 22; |
|||
} |
|||
} |
|||
if (epsgcode === 3857) { |
|||
tilingScheme = new sycim.WebMercatorTilingScheme(); |
|||
originx = -20037508.34; |
|||
originy = 20037508.34; |
|||
if (this.options.minimumLevel !== undefined) { |
|||
console.log('not undefined'); |
|||
minlevel = this.options.minimumLevel; |
|||
} else { |
|||
minlevel = 0; |
|||
} |
|||
if (this.options.maximumLevel !== undefined) { |
|||
maxlevel = this.options.maximumLevel; |
|||
} else { |
|||
maxlevel = 22; |
|||
} |
|||
} |
|||
|
|||
this.layerProvider = new sycim.Cesium.UrlTemplateImageryProvider({ |
|||
url: |
|||
this.layerUrl + |
|||
"/tileImage.png?transparent=true&cacheEnabled=true&width=256&height=256&x={x}&y={y}&scale={scale}&redirect=false&overlapDisplayed=false&origin={'x':" + |
|||
originx + |
|||
",'y':" + |
|||
originy + |
|||
'}', |
|||
rectangle: rectangle, |
|||
minimumLevel: minlevel || 0, |
|||
maximumLevel: maxlevel || 22, |
|||
tilingScheme: tilingScheme, |
|||
customTags: { |
|||
scale: function (imageryProvider, x, y, level) { |
|||
if (epsgcode === 4326) { |
|||
return this.scales84[level]; |
|||
} |
|||
if (epsgcode === 3857) { |
|||
return this.scalesweb[level]; |
|||
} |
|||
}, |
|||
scales84: this.scales84, |
|||
scalesweb: this.scalesweb // Add the missing property "scalesweb"
|
|||
} |
|||
}); |
|||
|
|||
this._delegate = viewer.imageryLayers.addImageryProvider(this.layerProvider); |
|||
}) |
|||
.catch((err) => { |
|||
console.log(err); |
|||
}); |
|||
} |
|||
zoomToLayer() { |
|||
if (!this._delegate) return; |
|||
const { left, bottom, right, top } = this.layerInfo.bounds; |
|||
this.viewer.camera.flyTo({ |
|||
destination: sycim.Rectangle.fromDegrees(left, bottom, right, top) |
|||
}); |
|||
} |
|||
show() { |
|||
if (!this._delegate) return; |
|||
this._delegate.show = true; |
|||
} |
|||
hide() { |
|||
if (!this._delegate) return; |
|||
this._delegate.show = false; |
|||
} |
|||
} |
|||
|
|||
export default SuperMapImageryLayer; |
|||
@ -0,0 +1,396 @@ |
|||
<template> |
|||
<div class="slider-right"> |
|||
<div class="top-title">基础信息管理</div> |
|||
<div class="table-box"> |
|||
<div class="top-box"> |
|||
<span>巡视检查名称：</span> |
|||
<el-input |
|||
v-model="formData.name" |
|||
size="small" |
|||
class="search-input" |
|||
placeholder="请输入巡视检查名称" |
|||
></el-input> |
|||
<span>巡检类型：</span> |
|||
<el-select v-model="formData.type" placeholder="请选择"> |
|||
<el-option |
|||
v-for="item in xcTypeOptions" |
|||
:key="item.dictValue" |
|||
:label="item.dictLabel" |
|||
:value="item.dictValue" |
|||
> |
|||
</el-option> |
|||
</el-select> |
|||
</div> |
|||
|
|||
<div class="xc-form-table"> |
|||
<el-row class="flex l-t-border"> |
|||
<div |
|||
class="w-240 flex-shrink-0 flex justify-center items-center r-b-border p-4" |
|||
> |
|||
<div>工程部位</div> |
|||
</div> |
|||
<div class="flex flex-1 w-full"> |
|||
<div class="flex-1 flex justify-center items-center r-b-border"> |
|||
<div>检查内容</div> |
|||
</div> |
|||
<div class="w-120 flex justify-center items-center r-b-border"> |
|||
<div>是否检查项</div> |
|||
</div> |
|||
</div> |
|||
</el-row> |
|||
<el-row |
|||
v-for="(item, index) in xcTreeData" |
|||
:key="item.key" |
|||
class="flex font-12" |
|||
> |
|||
<el-col> |
|||
<div class="flex w-full l-t-border"> |
|||
<div |
|||
class="flex items-center p-4 r-b-border" |
|||
:class="{ |
|||
'w-240 flex-shrink-0': !item.children.length, |
|||
'w-80 flex-shrink-0': item.children.length, |
|||
}" |
|||
> |
|||
{{ index + 1 }},{{ item.value }} |
|||
</div> |
|||
<div v-if="item.children.length" class="flex flex-1 flex-col"> |
|||
<div |
|||
class="flex flex-1" |
|||
v-for="item2 in item.children" |
|||
:key="item2.key" |
|||
> |
|||
<div |
|||
class="flex items-center p-4 r-b-border" |
|||
:class="{ |
|||
'w-80 flex-shrink-0': item2.children.length, |
|||
'w-160 flex-shrink-0': !item2.children.length, |
|||
}" |
|||
> |
|||
{{ item2.value }} |
|||
</div> |
|||
<div |
|||
v-if="item2.children.length" |
|||
class="flex flex-1 flex-col" |
|||
> |
|||
<div |
|||
class="flex" |
|||
v-for="item3 in item2.children" |
|||
:key="item3.key" |
|||
> |
|||
<div |
|||
class="flex items-center p-4 r-b-border w-80 flex-shrink-0" |
|||
> |
|||
{{ item3.value }} |
|||
</div> |
|||
<!-- 三级项目的问题 --> |
|||
<div class="flex flex-1 items-center"> |
|||
<div |
|||
class="flex flex-1 items-center p-4 r-b-border h-full" |
|||
> |
|||
<el-input |
|||
:disabled="!item3.check" |
|||
v-model="item3.content" |
|||
type="textarea" |
|||
:rows="1" |
|||
:maxlength="500" |
|||
placeholder="请输入检查内容" |
|||
></el-input> |
|||
</div> |
|||
<div |
|||
class="w-120 flex justify-center items-center p-4 r-b-border h-full" |
|||
> |
|||
<el-radio-group |
|||
class="inspection-radio-group" |
|||
v-model="item3.check" |
|||
> |
|||
<el-radio :label="true">是</el-radio> |
|||
<el-radio :label="false">否</el-radio> |
|||
</el-radio-group> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!-- 两级项目的问题 --> |
|||
<div v-else class="flex flex-1 items-center"> |
|||
<div class="flex-1 flex items-center p-4 r-b-border h-full"> |
|||
<el-input |
|||
:disabled="!item2.check" |
|||
v-model="item2.content" |
|||
type="textarea" |
|||
:rows="1" |
|||
:maxlength="500" |
|||
placeholder="请输入检查内容" |
|||
></el-input> |
|||
</div> |
|||
<div |
|||
class="w-120 flex justify-center items-center p-4 r-b-border h-full" |
|||
> |
|||
<el-radio-group |
|||
class="inspection-radio-group" |
|||
v-model="item2.check" |
|||
> |
|||
<el-radio :label="true">是</el-radio> |
|||
<el-radio :label="false">否</el-radio> |
|||
</el-radio-group> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!-- 只有一级项目的问题 --> |
|||
<div v-else class="flex flex-1 items-center"> |
|||
<div class="flex-1 flex items-center p-4 r-b-border h-full"> |
|||
<el-input |
|||
:disabled="!item.check" |
|||
v-model="item.content" |
|||
type="textarea" |
|||
:rows="1" |
|||
:maxlength="500" |
|||
placeholder="请输入检查内容" |
|||
></el-input> |
|||
</div> |
|||
<div |
|||
class="w-120 flex justify-center items-center p-4 r-b-border h-full" |
|||
> |
|||
<el-radio-group |
|||
class="inspection-radio-group" |
|||
v-model="item.check" |
|||
> |
|||
<el-radio :label="true">是</el-radio> |
|||
<el-radio :label="false">否</el-radio> |
|||
</el-radio-group> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
</el-row> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="bottom-btns"> |
|||
<el-button type="primary" @click="handleSave">保存</el-button> |
|||
<el-button @click="$router.go(-1)">返回</el-button> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import { intersection } from "lodash"; |
|||
import { |
|||
putInspectionProjectData, |
|||
getCheckingDictTree, |
|||
getInspectionProjectDetails, |
|||
} from "@/api/dike"; |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
xcTreeData: [], |
|||
xcTypeOptions: [], |
|||
formData: { |
|||
id: null, |
|||
name: "", |
|||
type: "", |
|||
items: [], |
|||
}, |
|||
}; |
|||
}, |
|||
created() { |
|||
// 获取巡查类型 |
|||
this.getDicts("xs_classfy").then((res) => { |
|||
if (res.data && Array.isArray(res.data)) { |
|||
this.xcTypeOptions = res.data; |
|||
} |
|||
}); |
|||
}, |
|||
methods: { |
|||
// 获取详情信息 |
|||
async getDetailsData() { |
|||
const dictData = await getCheckingDictTree("df_xs_c_classfy"); |
|||
let _xcTreeData = this.transformArr(dictData?.data); |
|||
|
|||
const detailData = await getInspectionProjectDetails( |
|||
this.$route.query.id |
|||
); |
|||
if (detailData?.data?.items) { |
|||
// 匹配xcTreeData |
|||
this.formData.name = detailData.data.name; |
|||
this.formData.type = detailData.data.type; |
|||
this.matchXcTreeData(_xcTreeData, detailData.data.items); |
|||
} |
|||
this.xcTreeData = _xcTreeData; |
|||
}, |
|||
// 树转换 |
|||
transformArr(treeList) { |
|||
// 递归设置路径 |
|||
function deepCalc(item, part = []) { |
|||
item.parts = [...part, item.key]; |
|||
if (item.children?.length) { |
|||
item.children.forEach((v) => { |
|||
if (!v.children || v.children.length === 0) { |
|||
v.parts = [...item.parts, v.key]; |
|||
} else { |
|||
deepCalc(v, item.parts); |
|||
} |
|||
}); |
|||
} |
|||
} |
|||
|
|||
treeList.forEach((item) => { |
|||
deepCalc(item); |
|||
}); |
|||
return treeList; |
|||
}, |
|||
// 匹配xcTreeData |
|||
matchXcTreeData(treeData, dataList) { |
|||
treeData.forEach((v) => { |
|||
if (!v.children?.length) { |
|||
for (let i = 0; i < dataList.length; i++) { |
|||
const item = dataList[i]; |
|||
v.id = item.id; |
|||
if (intersection(v.parts, item.parts).length === v.parts.length) { |
|||
// 证明匹配成功 |
|||
v.content = item.content || ""; |
|||
v.check = true; |
|||
break; |
|||
} |
|||
} |
|||
} else { |
|||
this.matchXcTreeData(v.children, dataList); |
|||
} |
|||
}); |
|||
}, |
|||
|
|||
// 获取xcTreeData中的check为true的数据 |
|||
getCheckData(treeData) { |
|||
let res = []; |
|||
treeData.forEach((v) => { |
|||
if (v.check) { |
|||
res.push({ |
|||
parts: v.parts, |
|||
id: v.id || null, |
|||
content: v.content, |
|||
}); |
|||
} |
|||
if (v.children?.length) { |
|||
res = res.concat(this.getCheckData(v.children)); |
|||
} |
|||
}); |
|||
return res; |
|||
}, |
|||
|
|||
// 保存 |
|||
handleSave() { |
|||
if (!this.formData.name) { |
|||
this.$message.error("请输入巡视检查名称"); |
|||
return; |
|||
} |
|||
if (!this.formData.type) { |
|||
this.$message.error("请选择巡检类型"); |
|||
return; |
|||
} |
|||
if (this.$route.query.id) { |
|||
this.formData.id = this.$route.query.id; |
|||
} |
|||
this.formData.items = this.getCheckData(this.xcTreeData); |
|||
putInspectionProjectData(this.formData).then(() => { |
|||
this.$message.success("保存成功"); |
|||
// this.$router.go(-1); |
|||
}); |
|||
}, |
|||
}, |
|||
mounted() { |
|||
this.getDetailsData(); |
|||
}, |
|||
}; |
|||
</script> |
|||
<style scoped lang="scss"> |
|||
.top-title { |
|||
height: 50px; |
|||
background-color: white; |
|||
display: flex; |
|||
padding-left: 16px; |
|||
align-items: center; |
|||
font-weight: 600; |
|||
} |
|||
|
|||
.table-box { |
|||
width: 100%; |
|||
height: calc(100% - 50px - 24px); |
|||
margin-top: 24px; |
|||
padding: 16px; |
|||
background-color: white; |
|||
overflow: auto; |
|||
|
|||
.top-box { |
|||
display: flex; |
|||
align-items: center; |
|||
margin-bottom: 8px; |
|||
|
|||
.search-input { |
|||
width: 300px; |
|||
margin-right: 10px; |
|||
} |
|||
} |
|||
|
|||
.search-btn { |
|||
margin-left: 10px; |
|||
background-color: #37b29e; |
|||
border: none; |
|||
|
|||
&:hover { |
|||
background-color: #5ac6b9; |
|||
} |
|||
|
|||
&:active { |
|||
background-color: #2b8070; |
|||
} |
|||
} |
|||
} |
|||
.xc-form-table { |
|||
} |
|||
.l-t-border { |
|||
border-left: 1px solid #eee; |
|||
border-top: 1px solid #eee; |
|||
} |
|||
.r-b-border { |
|||
border-right: 1px solid #eee; |
|||
border-bottom: 1px solid #eee; |
|||
} |
|||
|
|||
.w-p-20 { |
|||
width: 20%; |
|||
} |
|||
.w-p-80 { |
|||
width: 80%; |
|||
} |
|||
|
|||
.w-p-50 { |
|||
width: 50%; |
|||
} |
|||
|
|||
.w-80 { |
|||
width: 80px !important; |
|||
} |
|||
.w-120 { |
|||
width: 120px !important; |
|||
} |
|||
.w-160 { |
|||
width: 160px !important; |
|||
} |
|||
.w-240 { |
|||
width: 240px !important; |
|||
} |
|||
</style> |
|||
<style lang="scss"> |
|||
.inspection-radio-group { |
|||
.el-radio { |
|||
margin-right: 10px; |
|||
.el-radio__label { |
|||
padding-left: 4px; |
|||
} |
|||
&:last-child { |
|||
margin-right: 0; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,398 @@ |
|||
<template> |
|||
<div class="slider-right"> |
|||
<div class="top-title">基础信息管理</div> |
|||
<div class="table-box"> |
|||
<div class="top-box"> |
|||
<span>巡视检查名称：</span> |
|||
<el-input |
|||
v-model="formData.name" |
|||
size="small" |
|||
class="search-input" |
|||
placeholder="请输入巡视检查名称" |
|||
></el-input> |
|||
<span>巡检类型：</span> |
|||
<el-select v-model="formData.type" placeholder="请选择"> |
|||
<el-option |
|||
v-for="item in xcTypeOptions" |
|||
:key="item.dictValue" |
|||
:label="item.dictLabel" |
|||
:value="item.dictValue" |
|||
> |
|||
</el-option> |
|||
</el-select> |
|||
</div> |
|||
|
|||
<div class="xc-form-table"> |
|||
<el-row class="flex l-t-border"> |
|||
<div |
|||
class="w-240 flex-shrink-0 flex justify-center items-center r-b-border p-4" |
|||
> |
|||
<div>工程部位</div> |
|||
</div> |
|||
<div class="flex flex-1 w-full"> |
|||
<div class="flex-1 flex justify-center items-center r-b-border"> |
|||
<div>检查内容</div> |
|||
</div> |
|||
<div class="w-120 flex justify-center items-center r-b-border"> |
|||
<div>是否检查项</div> |
|||
</div> |
|||
</div> |
|||
</el-row> |
|||
<el-row |
|||
v-for="(item, index) in xcTreeData" |
|||
:key="item.key" |
|||
class="flex font-12" |
|||
> |
|||
<el-col> |
|||
<div class="flex w-full l-t-border"> |
|||
<div |
|||
class="flex items-center p-4 r-b-border" |
|||
:class="{ |
|||
'w-240 flex-shrink-0': !item.children.length, |
|||
'w-80 flex-shrink-0': item.children.length, |
|||
}" |
|||
> |
|||
{{ index + 1 }},{{ item.value }} |
|||
</div> |
|||
<div v-if="item.children.length" class="flex flex-1 flex-col"> |
|||
<div |
|||
class="flex flex-1" |
|||
v-for="item2 in item.children" |
|||
:key="item2.key" |
|||
> |
|||
<div |
|||
class="flex items-center p-4 r-b-border" |
|||
:class="{ |
|||
'w-80 flex-shrink-0': item2.children.length, |
|||
'w-160 flex-shrink-0': !item2.children.length, |
|||
}" |
|||
> |
|||
{{ item2.value }} |
|||
</div> |
|||
<div |
|||
v-if="item2.children.length" |
|||
class="flex flex-1 flex-col" |
|||
> |
|||
<div |
|||
class="flex" |
|||
v-for="item3 in item2.children" |
|||
:key="item3.key" |
|||
> |
|||
<div |
|||
class="flex items-center p-4 r-b-border w-80 flex-shrink-0" |
|||
> |
|||
{{ item3.value }} |
|||
</div> |
|||
<!-- 三级项目的问题 --> |
|||
<div class="flex flex-1 items-center"> |
|||
<div |
|||
class="flex flex-1 items-center p-4 r-b-border h-full" |
|||
> |
|||
<el-input |
|||
:disabled="!item3.check" |
|||
v-model="item3.content" |
|||
type="textarea" |
|||
:rows="1" |
|||
:maxlength="500" |
|||
placeholder="请输入检查内容" |
|||
></el-input> |
|||
</div> |
|||
<div |
|||
class="w-120 flex justify-center items-center p-4 r-b-border h-full" |
|||
> |
|||
<el-radio-group |
|||
class="inspection-radio-group" |
|||
v-model="item3.check" |
|||
> |
|||
<el-radio :label="true">是</el-radio> |
|||
<el-radio :label="false">否</el-radio> |
|||
</el-radio-group> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!-- 两级项目的问题 --> |
|||
<div v-else class="flex flex-1 items-center"> |
|||
<div class="flex-1 flex items-center p-4 r-b-border h-full"> |
|||
<el-input |
|||
:disabled="!item2.check" |
|||
v-model="item2.content" |
|||
type="textarea" |
|||
:rows="1" |
|||
:maxlength="500" |
|||
placeholder="请输入检查内容" |
|||
></el-input> |
|||
</div> |
|||
<div |
|||
class="w-120 flex justify-center items-center p-4 r-b-border h-full" |
|||
> |
|||
<el-radio-group |
|||
class="inspection-radio-group" |
|||
v-model="item2.check" |
|||
> |
|||
<el-radio :label="true">是</el-radio> |
|||
<el-radio :label="false">否</el-radio> |
|||
</el-radio-group> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!-- 只有一级项目的问题 --> |
|||
<div v-else class="flex flex-1 items-center"> |
|||
<div class="flex-1 flex items-center p-4 r-b-border h-full"> |
|||
<el-input |
|||
:disabled="!item.check" |
|||
v-model="item.content" |
|||
type="textarea" |
|||
:rows="1" |
|||
:maxlength="500" |
|||
placeholder="请输入检查内容" |
|||
></el-input> |
|||
</div> |
|||
<div |
|||
class="w-120 flex justify-center items-center p-4 r-b-border h-full" |
|||
> |
|||
<el-radio-group |
|||
class="inspection-radio-group" |
|||
v-model="item.check" |
|||
> |
|||
<el-radio :label="true">是</el-radio> |
|||
<el-radio :label="false">否</el-radio> |
|||
</el-radio-group> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
</el-row> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="bottom-btns"> |
|||
<el-button type="primary" @click="handleSave">保存</el-button> |
|||
<el-button @click="$router.go(-1)">返回</el-button> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import { intersection } from "lodash"; |
|||
import { |
|||
putInspectionProjectData, |
|||
getCheckingDictTree, |
|||
getInspectionProjectDetails, |
|||
} from "@/api/sluice"; |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
xcTreeData: [], |
|||
xcTypeOptions: [], |
|||
formData: { |
|||
id: null, |
|||
name: "", |
|||
type: "", |
|||
items: [], |
|||
}, |
|||
}; |
|||
}, |
|||
created() { |
|||
// 获取巡查类型 |
|||
this.getDicts("xs_classfy").then((res) => { |
|||
if (res.data && Array.isArray(res.data)) { |
|||
this.xcTypeOptions = res.data; |
|||
} |
|||
}); |
|||
}, |
|||
methods: { |
|||
// 获取详情信息 |
|||
async getDetailsData() { |
|||
const dictData = await getCheckingDictTree("sz_xs_c_classfy"); |
|||
let _xcTreeData = this.transformArr(dictData?.data); |
|||
|
|||
if (this.$route.query.id) { |
|||
const detailData = await getInspectionProjectDetails( |
|||
this.$route.query.id |
|||
); |
|||
if (detailData?.data?.items) { |
|||
// 匹配xcTreeData |
|||
this.formData.name = detailData.data.name; |
|||
this.formData.type = detailData.data.type; |
|||
this.matchXcTreeData(_xcTreeData, detailData.data.items); |
|||
} |
|||
} |
|||
this.xcTreeData = _xcTreeData; |
|||
}, |
|||
// 树转换 |
|||
transformArr(treeList) { |
|||
// 递归设置路径 |
|||
function deepCalc(item, part = []) { |
|||
item.parts = [...part, item.key]; |
|||
if (item.children?.length) { |
|||
item.children.forEach((v) => { |
|||
if (!v.children || v.children.length === 0) { |
|||
v.parts = [...item.parts, v.key]; |
|||
} else { |
|||
deepCalc(v, item.parts); |
|||
} |
|||
}); |
|||
} |
|||
} |
|||
|
|||
treeList.forEach((item) => { |
|||
deepCalc(item); |
|||
}); |
|||
return treeList; |
|||
}, |
|||
// 匹配xcTreeData |
|||
matchXcTreeData(treeData, dataList) { |
|||
treeData.forEach((v) => { |
|||
if (!v.children?.length) { |
|||
for (let i = 0; i < dataList.length; i++) { |
|||
const item = dataList[i]; |
|||
v.id = item.id; |
|||
if (intersection(v.parts, item.parts).length === v.parts.length) { |
|||
// 证明匹配成功 |
|||
v.content = item.content || ""; |
|||
v.check = true; |
|||
break; |
|||
} |
|||
} |
|||
} else { |
|||
this.matchXcTreeData(v.children, dataList); |
|||
} |
|||
}); |
|||
}, |
|||
|
|||
// 获取xcTreeData中的check为true的数据 |
|||
getCheckData(treeData) { |
|||
let res = []; |
|||
treeData.forEach((v) => { |
|||
if (v.check) { |
|||
res.push({ |
|||
parts: v.parts, |
|||
id: v.id || null, |
|||
content: v.content, |
|||
}); |
|||
} |
|||
if (v.children?.length) { |
|||
res = res.concat(this.getCheckData(v.children)); |
|||
} |
|||
}); |
|||
return res; |
|||
}, |
|||
|
|||
// 保存 |
|||
handleSave() { |
|||
if (!this.formData.name) { |
|||
this.$message.error("请输入巡视检查名称"); |
|||
return; |
|||
} |
|||
if (!this.formData.type) { |
|||
this.$message.error("请选择巡检类型"); |
|||
return; |
|||
} |
|||
if (this.$route.query.id) { |
|||
this.formData.id = this.$route.query.id; |
|||
} |
|||
this.formData.items = this.getCheckData(this.xcTreeData); |
|||
putInspectionProjectData(this.formData).then(() => { |
|||
this.$message.success("保存成功"); |
|||
// this.$router.go(-1); |
|||
}); |
|||
}, |
|||
}, |
|||
mounted() { |
|||
this.getDetailsData(); |
|||
}, |
|||
}; |
|||
</script> |
|||
<style scoped lang="scss"> |
|||
.top-title { |
|||
height: 50px; |
|||
background-color: white; |
|||
display: flex; |
|||
padding-left: 16px; |
|||
align-items: center; |
|||
font-weight: 600; |
|||
} |
|||
|
|||
.table-box { |
|||
width: 100%; |
|||
height: calc(100% - 50px - 24px); |
|||
margin-top: 24px; |
|||
padding: 16px; |
|||
background-color: white; |
|||
overflow: auto; |
|||
|
|||
.top-box { |
|||
display: flex; |
|||
align-items: center; |
|||
margin-bottom: 8px; |
|||
|
|||
.search-input { |
|||
width: 300px; |
|||
margin-right: 10px; |
|||
} |
|||
} |
|||
|
|||
.search-btn { |
|||
margin-left: 10px; |
|||
background-color: #37b29e; |
|||
border: none; |
|||
|
|||
&:hover { |
|||
background-color: #5ac6b9; |
|||
} |
|||
|
|||
&:active { |
|||
background-color: #2b8070; |
|||
} |
|||
} |
|||
} |
|||
.xc-form-table { |
|||
} |
|||
.l-t-border { |
|||
border-left: 1px solid #eee; |
|||
border-top: 1px solid #eee; |
|||
} |
|||
.r-b-border { |
|||
border-right: 1px solid #eee; |
|||
border-bottom: 1px solid #eee; |
|||
} |
|||
|
|||
.w-p-20 { |
|||
width: 20%; |
|||
} |
|||
.w-p-80 { |
|||
width: 80%; |
|||
} |
|||
|
|||
.w-p-50 { |
|||
width: 50%; |
|||
} |
|||
|
|||
.w-80 { |
|||
width: 80px !important; |
|||
} |
|||
.w-120 { |
|||
width: 120px !important; |
|||
} |
|||
.w-160 { |
|||
width: 160px !important; |
|||
} |
|||
.w-240 { |
|||
width: 240px !important; |
|||
} |
|||
</style> |
|||
<style lang="scss"> |
|||
.inspection-radio-group { |
|||
.el-radio { |
|||
margin-right: 10px; |
|||
.el-radio__label { |
|||
padding-left: 4px; |
|||
} |
|||
&:last-child { |
|||
margin-right: 0; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue