284 lines
9.6 KiB
Vue
284 lines
9.6 KiB
Vue
<template>
|
||
<view class="nav choose">
|
||
<view class="nav-menu" @click="selectEngineering" v-if="showQianTree"
|
||
>{{
|
||
select.engineeringName || select.projectName || select.deviceName || select.lineName
|
||
? [select.engineeringName, select.projectName, select.deviceName, select.lineName]
|
||
.filter((item) => item && item !== '')
|
||
.join('>')
|
||
: '全部工程'
|
||
}}
|
||
<uni-icons type="bottom" size="14"></uni-icons>
|
||
</view>
|
||
<!-- 弹框组件 -->
|
||
<Cn-qianTree
|
||
ref="qiantree"
|
||
:selectParent="true"
|
||
:multiple="false"
|
||
:range="list"
|
||
:foldAll="true"
|
||
:singleChoice="singleChoice"
|
||
@confirm="treeConfirm"
|
||
@cancel="treeCancel"
|
||
></Cn-qianTree>
|
||
<picker
|
||
mode="date"
|
||
:value="select.date"
|
||
:start="startDate"
|
||
fields="month"
|
||
:end="endDate"
|
||
@change="bindDateChange"
|
||
v-if="showDatetime"
|
||
>
|
||
<view class="nav-menu"
|
||
>{{ select.date }}
|
||
<uni-icons type="bottom" size="14"></uni-icons>
|
||
</view>
|
||
</picker>
|
||
<uni-datetime-picker v-if="!showDatetime" v-model="select.range" type="daterange" :end="endDate">
|
||
<view class="nav-menu"
|
||
>{{ select.range[0] + '至' + select.range[1] }}
|
||
<uni-icons type="bottom" size="14"></uni-icons>
|
||
</view>
|
||
</uni-datetime-picker>
|
||
<picker @change="bindReport" v-if="report" :value="select.report" :range="reportList">
|
||
<view class="nav-menu"
|
||
>{{ reportList[select.report] }}
|
||
<uni-icons type="bottom" size="14"></uni-icons>
|
||
</view>
|
||
</picker>
|
||
<slot />
|
||
</view>
|
||
</template>
|
||
<script>
|
||
import { lineTree } from '@/common/api/device'
|
||
export default {
|
||
components: {},
|
||
props: {
|
||
level: { type: Number, default: 3 },
|
||
showDatetime: { type: Boolean, default: true },
|
||
report: { type: Boolean, default: false },
|
||
singleChoice: { type: Boolean, default: false },
|
||
showQianTree: { type: Boolean, default: true },
|
||
},
|
||
data() {
|
||
const currentDate = this.getDate({
|
||
format: true,
|
||
})
|
||
return {
|
||
select: {
|
||
engineeringName: '',
|
||
engineeringId: '', //工程ID
|
||
projectName: '',
|
||
projectId: '', //項目ID
|
||
deviceName: '',
|
||
deviceId: '', //设备ID
|
||
lineName: '',
|
||
lineId: '', //测点ID
|
||
date: currentDate,
|
||
range: ['', ''],
|
||
report: 0,
|
||
},
|
||
list: [],
|
||
reportList: ['日报', '月报'],
|
||
}
|
||
},
|
||
created() {
|
||
if (!this.showDatetime) {
|
||
this.select.range = [this.endDate.slice(0, -3) + '-01', this.endDate]
|
||
}
|
||
},
|
||
onShow() {},
|
||
|
||
mounted() {},
|
||
|
||
methods: {
|
||
getTree() {
|
||
this.clear()
|
||
lineTree().then((res) => {
|
||
let list = {}
|
||
if (this.singleChoice) {
|
||
let result = this.findFirstLevel(res.data)
|
||
console.log('🚀 ~ result:', result)
|
||
this.select.engineeringName = result.parents[0].name
|
||
this.select.engineeringId = result.parents[0].id //工程ID
|
||
this.select.projectName = result.parents[1].name
|
||
this.select.projectId = result.parents[1].id //項目ID
|
||
this.select.deviceName = result.parents[2].name
|
||
this.select.deviceId = result.parents[2].id //设备ID
|
||
this.select.lineName = result.node.name
|
||
this.select.lineId = result.node.id //测点ID
|
||
} else {
|
||
list = {
|
||
id: '',
|
||
pid: '0',
|
||
pids: '0',
|
||
name: '全部工程',
|
||
path: null,
|
||
provinceId: null,
|
||
cityId: null,
|
||
area: null,
|
||
remark: null,
|
||
sort: 0,
|
||
level: 0,
|
||
comFlag: null,
|
||
type: null,
|
||
lineType: null,
|
||
conType: null,
|
||
process: null,
|
||
isTop: 0,
|
||
children: [],
|
||
ndid: null,
|
||
}
|
||
}
|
||
|
||
this.list = this.filterTreeByLevel(this.singleChoice ? res.data : [list, ...res.data])
|
||
// this.findFirstLevel( this.list)
|
||
})
|
||
},
|
||
// 递归过滤函数：去除level > 2的节点
|
||
filterTreeByLevel(tree) {
|
||
// 遍历每一个节点
|
||
return tree.map((node) => {
|
||
// 复制当前节点（避免修改原数据）
|
||
const newNode = { ...node }
|
||
|
||
// 如果当前节点有子节点，并且当前节点的level <= 2（因为level=2的节点的子节点是level=3，需要过滤）
|
||
if (newNode.children && newNode.children.length > 0) {
|
||
// 递归过滤子节点：只保留子节点中level <= 2的
|
||
newNode.children = this.filterTreeByLevel(
|
||
newNode.children.filter((child) => child.level <= this.level),
|
||
)
|
||
}
|
||
|
||
return newNode
|
||
})
|
||
},
|
||
getDate(type) {
|
||
const date = new Date()
|
||
let year = date.getFullYear()
|
||
let month = date.getMonth() + 1
|
||
let day = date.getDate()
|
||
if (type === 'start') {
|
||
year = year - 10
|
||
} else if (type === 'end') {
|
||
year = year
|
||
}
|
||
month = month > 9 ? month : '0' + month
|
||
day = day > 9 ? day : '0' + day
|
||
|
||
return this.showDatetime ? `${year}-${month}` : `${year}-${month}-${day}`
|
||
},
|
||
bindDateChange(e) {
|
||
this.select.date = e.detail.value
|
||
},
|
||
bindReport(e) {
|
||
this.select.report = e.detail.value
|
||
},
|
||
selectEngineering() {
|
||
this.$refs.qiantree._show()
|
||
},
|
||
|
||
// 确定回调事件
|
||
treeConfirm(e) {
|
||
this.clear()
|
||
|
||
this.setSelect(e[0].rank, e[0].name, e[0].id)
|
||
e[0].parents.forEach((item) => {
|
||
this.setSelect(item.rank, item.name, item.id)
|
||
})
|
||
},
|
||
// 清空
|
||
clear() {
|
||
this.select.engineeringName = ''
|
||
this.select.engineeringId = '' //工程ID
|
||
this.select.projectName = ''
|
||
this.select.projectId = '' //項目ID
|
||
this.select.deviceName = ''
|
||
this.select.deviceId = '' //设备ID
|
||
this.select.lineName = ''
|
||
this.select.lineId = '' //测点ID
|
||
},
|
||
setSelect(rank, name, id) {
|
||
switch (rank) {
|
||
case 0:
|
||
this.select.engineeringId = id
|
||
this.select.engineeringName = name
|
||
break
|
||
case 1:
|
||
this.select.projectId = id
|
||
this.select.projectName = name
|
||
break
|
||
case 2:
|
||
this.select.deviceId = id
|
||
this.select.deviceName = name
|
||
break
|
||
case 3:
|
||
this.select.lineId = id
|
||
this.select.lineName = name
|
||
break
|
||
}
|
||
},
|
||
external(name, id) {
|
||
this.getTree()
|
||
this.select.engineeringId = id
|
||
this.select.engineeringName = name
|
||
},
|
||
// 取消回调事件
|
||
treeCancel(e) {
|
||
console.log(e)
|
||
},
|
||
findFirstLevel(list, parents = []) {
|
||
for (const item of list) {
|
||
// 当前就是 level=3
|
||
if (item.level === 3) {
|
||
return {
|
||
node: item, // 第一个 level=3
|
||
parents: parents, // 它的所有上级
|
||
}
|
||
}
|
||
|
||
// 递归子节点
|
||
if (item.children && item.children.length) {
|
||
const res = this.findFirstLevel(item.children, [...parents, item])
|
||
if (res) return res // 找到直接返回，不再循环
|
||
}
|
||
}
|
||
return null
|
||
},
|
||
},
|
||
|
||
computed: {
|
||
startDate() {
|
||
return this.getDate('start')
|
||
},
|
||
endDate() {
|
||
return this.getDate('end')
|
||
},
|
||
},
|
||
|
||
watch: {
|
||
select: {
|
||
handler(val, oldVal) {
|
||
if (this.loading) return
|
||
this.$emit('select', val)
|
||
},
|
||
deep: true,
|
||
immediate: true,
|
||
},
|
||
level: {
|
||
handler(val, oldVal) {
|
||
this.getTree()
|
||
},
|
||
deep: true,
|
||
immediate: true,
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
/deep/ .uni-date-editor {
|
||
width: 360rpx;
|
||
}
|
||
</style>
|