提交更改
This commit is contained in:
zhujiyan
@@ -1,14 +1,11 @@
|
||||
<template>
|
||||
<div class="chart">
|
||||
<el-button v-if="isExport" type="primary" size="small" icon="el-icon-Download" @click="handleExport">
|
||||
导出
|
||||
</el-button>
|
||||
<div ref="chartRef" class="my-chart" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onBeforeUnmount, onMounted, ref, defineExpose, watch } from 'vue'
|
||||
import { onBeforeUnmount, onMounted, ref, defineExpose, watch, nextTick } from 'vue'
|
||||
// import echarts from './echarts'
|
||||
import * as echarts from 'echarts' // 全引入
|
||||
import 'echarts-gl'
|
||||
@@ -16,6 +13,8 @@ import 'echarts-liquidfill'
|
||||
import 'echarts/lib/component/dataZoom'
|
||||
import { color, gradeColor3 } from './color'
|
||||
import { useConfig } from '@/stores/config'
|
||||
import { saveAs } from 'file-saver'
|
||||
// import { nextTick } from 'process'
|
||||
|
||||
const config = useConfig()
|
||||
color[0] = config.layout.elementUiPrimary[0]
|
||||
@@ -227,20 +226,49 @@ const resizeObserver = new ResizeObserver(entries => {
|
||||
}
|
||||
})
|
||||
const ExportChart: any = ref(null)
|
||||
const handleExport = () => {
|
||||
const handleExport = (arr: any) => {
|
||||
// 使用ECharts的getOption方法获取当前图表的配置
|
||||
const option = ExportOptions.value
|
||||
console.log(option, '00000000000')
|
||||
const seriesData = option?.series // 假设我们只导出第一个系列的数据
|
||||
const seriesData = option?.series
|
||||
const xAxisList = option?.xAxis[0].data
|
||||
if (seriesData && seriesData.length != 0) {
|
||||
// 转换为CSV格式
|
||||
let csvContent = 'data1,data2\n'
|
||||
seriesData.forEach((item: any) => {
|
||||
item.data.map((vv: any) => {
|
||||
csvContent += `${vv.name},${vv.value}\n`
|
||||
})
|
||||
let csvContent = '时间,'
|
||||
const legendData = ExportOptions.value.legend.data
|
||||
legendData.map((item: any, index: any) => {
|
||||
index != legendData.length - 1 ? (csvContent += item.name + ',') : (csvContent += item.name + '\n')
|
||||
})
|
||||
let cellValue = ''
|
||||
let list = []
|
||||
legendData.map((item: any, index: any) => {
|
||||
list.push('${seriesData[' + index + '].data[indexs]}')
|
||||
})
|
||||
console.log(seriesData[0].data.length)
|
||||
|
||||
seriesData.forEach((item: any, index: any) => {
|
||||
item.data.map((vv: any, indexs: any) => {
|
||||
cellValue += `${xAxisList[indexs]},`
|
||||
|
||||
// csvContent += `${item.name},${xAxisList[index]},${vv}\n`
|
||||
// legendData.map((kk: any, indexss: any) => {
|
||||
|
||||
// indexs == legendData.length - 1 ? (cellValue += `${vv}\n`) : (cellValue += `${vv},`)
|
||||
cellValue += `${seriesData[0].data[indexs]},${seriesData[1].data[indexs]},${seriesData[2].data[indexs]}s\n`
|
||||
// })
|
||||
// cellValue +=list.join(',')+'\n'
|
||||
})
|
||||
// csvContent += cellValue + `${xAxisList[index]}` + '\n'
|
||||
})
|
||||
let arrs = []
|
||||
arrs = JSON.parse(JSON.stringify(new Set(cellValue.split('s'))))
|
||||
console.log(arrs, '0000000000')
|
||||
Array.from(arrs).map((item:any)=>{
|
||||
cellValue +=item+'\n'.replace('s','')
|
||||
})
|
||||
console.log(cellValue, '去重后的数据')
|
||||
return
|
||||
csvContent += cellValue
|
||||
// return
|
||||
// 创建Blob对象，并使用a标签下载
|
||||
const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' })
|
||||
const link = document.createElement('a')
|
||||
@@ -248,7 +276,7 @@ const handleExport = () => {
|
||||
// 支持下载属性
|
||||
const url = URL.createObjectURL(blob)
|
||||
link.setAttribute('href', url)
|
||||
link.setAttribute('download', 'data.csv')
|
||||
link.setAttribute('download', '历史趋势.csv')
|
||||
link.style.visibility = 'hidden'
|
||||
document.body.appendChild(link)
|
||||
link.click()
|
||||
@@ -258,11 +286,10 @@ const handleExport = () => {
|
||||
}
|
||||
onMounted(() => {
|
||||
initChart()
|
||||
|
||||
ExportChart.value = echarts.init(chartRef.value)
|
||||
resizeObserver.observe(chartRef.value!)
|
||||
})
|
||||
defineExpose({ initChart })
|
||||
defineExpose({ initChart, handleExport })
|
||||
onBeforeUnmount(() => {
|
||||
resizeObserver.unobserve(chartRef.value!)
|
||||
chart?.dispose()
|
||||
|
||||
224
src/components/tree/device.vue
Normal file
224
src/components/tree/device.vue
Normal file
@@ -0,0 +1,224 @@
|
||||
<!-- 设备管理使用折叠面板渲染多个tree -->
|
||||
<template>
|
||||
<div
|
||||
:style="{ width: menuCollapse ? '40px' : props.width }"
|
||||
style="display: flex; transition: all 0.3s; overflow: hidden"
|
||||
>
|
||||
<Icon
|
||||
v-show="menuCollapse"
|
||||
@click="onMenuCollapse"
|
||||
:name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
|
||||
:class="menuCollapse ? 'unfold' : ''"
|
||||
size="18"
|
||||
class="fold ml10 mt20 menu-collapse"
|
||||
style="cursor: pointer"
|
||||
/>
|
||||
<div class="cn-tree" :style="{ opacity: menuCollapse ? 0 : 1 }">
|
||||
<div style="display: flex; align-items: center" class="mb10">
|
||||
<el-input v-model="filterText" placeholder="请输入内容" clearable>
|
||||
<template #prefix>
|
||||
<Icon name="el-icon-Search" style="font-size: 16px" />
|
||||
</template>
|
||||
</el-input>
|
||||
<Icon
|
||||
@click="onMenuCollapse"
|
||||
:name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
|
||||
:class="menuCollapse ? 'unfold' : ''"
|
||||
size="18"
|
||||
class="fold ml10 menu-collapse"
|
||||
style="cursor: pointer"
|
||||
v-if="props.canExpand"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<el-collapse accordion v-model="activeName" style="flex: 1; overflow: auto" @change="changeDevice">
|
||||
<el-collapse-item title="治理设备" :name="0">
|
||||
<el-tree
|
||||
ref="treeRef1"
|
||||
style="height: calc(100vh - 340px)"
|
||||
:props="defaultProps"
|
||||
highlight-current
|
||||
:filter-node-method="filterNode"
|
||||
node-key="id"
|
||||
default-expand-all
|
||||
v-bind="$attrs"
|
||||
:data="zlDeviceData"
|
||||
>
|
||||
<template #default="{ node, data }">
|
||||
<span class="custom-tree-node">
|
||||
<Icon
|
||||
:name="data.icon"
|
||||
style="font-size: 16px"
|
||||
:style="{ color: data.color }"
|
||||
v-if="data.icon"
|
||||
/>
|
||||
<span style="margin-left: 4px">{{ node.label }}</span>
|
||||
</span>
|
||||
</template>
|
||||
</el-tree>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="便携式设备" :name="1">
|
||||
<el-tree
|
||||
style="height: calc(100vh - 340px)"
|
||||
ref="treeRef2"
|
||||
:props="defaultProps"
|
||||
highlight-current
|
||||
default-expand-all
|
||||
:filter-node-method="filterNode"
|
||||
node-key="id"
|
||||
:data="bxsDeviceData"
|
||||
v-bind="$attrs"
|
||||
>
|
||||
<template #default="{ node, data }">
|
||||
<span class="custom-tree-node">
|
||||
<Icon
|
||||
:name="data.icon"
|
||||
style="font-size: 16px"
|
||||
:style="{ color: data.color }"
|
||||
v-if="data.icon"
|
||||
/>
|
||||
<span style="margin-left: 4px">{{ node.label }}</span>
|
||||
</span>
|
||||
</template>
|
||||
</el-tree>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import useCurrentInstance from '@/utils/useCurrentInstance'
|
||||
import { ElTree } from 'element-plus'
|
||||
import { ref, watch } from 'vue'
|
||||
|
||||
defineOptions({
|
||||
name: 'govern/tree'
|
||||
})
|
||||
|
||||
interface Props {
|
||||
width?: string
|
||||
canExpand?: boolean
|
||||
type?: string
|
||||
data?: any
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
width: '280px',
|
||||
canExpand: true,
|
||||
type: '',
|
||||
data: []
|
||||
})
|
||||
const { proxy } = useCurrentInstance()
|
||||
const menuCollapse = ref(false)
|
||||
const activeName = ref(0)
|
||||
const filterText = ref('')
|
||||
const defaultProps = {
|
||||
label: 'name',
|
||||
value: 'id'
|
||||
}
|
||||
//治理设备数据
|
||||
const zlDeviceData = ref([])
|
||||
//便携式设备数据
|
||||
const bxsDeviceData = ref([])
|
||||
watch(
|
||||
() => props.data,
|
||||
(val, oldVal) => {
|
||||
if (val && val.length != 0) {
|
||||
val.map((item: any) => {
|
||||
if (item.name == '治理设备') {
|
||||
item.children.map((vv: any) => {
|
||||
zlDeviceData.value.push(vv)
|
||||
})
|
||||
} else if (item.name == '便携式设备') {
|
||||
item.children.map((vv: any) => {
|
||||
bxsDeviceData.value.push(vv)
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
deep: true
|
||||
}
|
||||
)
|
||||
|
||||
watch(filterText, val => {
|
||||
if (activeName.value == 0) {
|
||||
treeRef1.value!.filter(val)
|
||||
} else {
|
||||
treeRef2.value!.filter(val)
|
||||
}
|
||||
})
|
||||
const onMenuCollapse = () => {
|
||||
menuCollapse.value = !menuCollapse.value
|
||||
proxy.eventBus.emit('cnTreeCollapse', menuCollapse)
|
||||
}
|
||||
const filterNode = (value: string, data: any) => {
|
||||
if (!value) return true
|
||||
return data.name.includes(value)
|
||||
}
|
||||
|
||||
const changeDevice = (val: any) => {
|
||||
let arr1: any = []
|
||||
zlDeviceData.value.forEach((item: any) => {
|
||||
item.children.forEach((item2: any) => {
|
||||
item2.children.forEach((item3: any) => {
|
||||
arr1.push(item3)
|
||||
})
|
||||
})
|
||||
})
|
||||
let arr2: any = []
|
||||
bxsDeviceData.value.forEach((item: any) => {
|
||||
// item.children.forEach((item2: any) => {
|
||||
arr2.push(item)
|
||||
// })
|
||||
})
|
||||
if (val == 0) {
|
||||
arr2.map(item => {
|
||||
item.checked = false
|
||||
})
|
||||
treeRef1.value.setCurrentKey(arr1[0].id)
|
||||
} else {
|
||||
arr1.map(item => {
|
||||
item.checked = false
|
||||
})
|
||||
treeRef2.value.setCurrentKey(arr2[0].id)
|
||||
}
|
||||
}
|
||||
//治理
|
||||
const treeRef1 = ref<InstanceType<typeof ElTree>>()
|
||||
//便携式
|
||||
const treeRef2 = ref<InstanceType<typeof ElTree>>()
|
||||
defineExpose({ treeRef1, treeRef2 })
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.cn-tree {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
padding: 10px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
:deep(.el-tree) {
|
||||
border: 1px solid var(--el-border-color);
|
||||
}
|
||||
|
||||
:deep(.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content) {
|
||||
background-color: var(--el-color-primary-light-7);
|
||||
}
|
||||
|
||||
.menu-collapse {
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.custom-tree-node {
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
}
|
||||
</style>
|
||||
@@ -10,7 +10,7 @@
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, nextTick } from 'vue'
|
||||
import Tree from '../index.vue'
|
||||
import Tree from '../device.vue'
|
||||
import { getDeviceTree } from '@/api/cs-device-boot/csLedger'
|
||||
import { useConfig } from '@/stores/config'
|
||||
defineOptions({
|
||||
@@ -32,27 +32,52 @@ const config = useConfig()
|
||||
const tree = ref()
|
||||
const treRef = ref()
|
||||
getDeviceTree().then(res => {
|
||||
console.log(res, '000000')
|
||||
let arr: any[] = []
|
||||
res.data.forEach((item: any) => {
|
||||
item.icon = 'el-icon-HomeFilled'
|
||||
item.color = config.getColorVal('elementUiPrimary')
|
||||
item.children.forEach((item2: any) => {
|
||||
item2.icon = 'el-icon-List'
|
||||
item2.color = config.getColorVal('elementUiPrimary')
|
||||
item2.children.forEach((item3: any) => {
|
||||
item3.icon = 'el-icon-Platform'
|
||||
item3.color = config.getColorVal('elementUiPrimary')
|
||||
if (item3.comFlag === 1) {
|
||||
item3.color = '#e26257 !important'
|
||||
}
|
||||
arr.push(item3)
|
||||
//治理设备
|
||||
res.data.map((item: any) => {
|
||||
if (item.name == '治理设备') {
|
||||
item.children.forEach((item: any) => {
|
||||
item.icon = 'el-icon-HomeFilled'
|
||||
item.color = config.getColorVal('elementUiPrimary')
|
||||
item.children.forEach((item2: any) => {
|
||||
item2.icon = 'el-icon-List'
|
||||
item2.color = config.getColorVal('elementUiPrimary')
|
||||
item2.children.forEach((item3: any) => {
|
||||
item3.icon = 'el-icon-Platform'
|
||||
item3.color = config.getColorVal('elementUiPrimary')
|
||||
if (item3.comFlag === 1) {
|
||||
item3.color = '#e26257 !important'
|
||||
}
|
||||
arr.push(item3)
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
} else if (item.name == '便携式设备') {
|
||||
item.children.forEach((item: any) => {
|
||||
item.icon = 'el-icon-Platform'
|
||||
item.color = config.getColorVal('elementUiPrimary')
|
||||
item.color = '#e26257 !important'
|
||||
item.children.forEach((item2: any) => {
|
||||
item2.icon = 'el-icon-Platform'
|
||||
item2.color = config.getColorVal('elementUiPrimary')
|
||||
// item2.children.forEach((item3: any) => {
|
||||
// item3.icon = 'el-icon-Platform'
|
||||
// item3.color = config.getColorVal('elementUiPrimary')
|
||||
// if (item3.comFlag === 1) {
|
||||
// item3.color = '#e26257 !important'
|
||||
// }
|
||||
// arr.push(item3)
|
||||
// })
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
tree.value = res.data
|
||||
nextTick(() => {
|
||||
if (arr.length) {
|
||||
treRef.value.treeRef.setCurrentKey(arr[0].id)
|
||||
console.log(treRef.value.treeRef1,"99999999");
|
||||
treRef.value.treeRef1.setCurrentKey(arr[0].id)
|
||||
// 注册父组件事件
|
||||
emit('init', {
|
||||
level: 2,
|
||||
|
||||
@@ -4,47 +4,75 @@
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, nextTick } from 'vue'
|
||||
import Tree from '../index.vue'
|
||||
import Tree from '../point.vue'
|
||||
import { getLineTree } from '@/api/cs-device-boot/csLedger'
|
||||
import { useConfig } from '@/stores/config'
|
||||
defineOptions({
|
||||
name: 'govern/deviceTree'
|
||||
})
|
||||
const emit = defineEmits(['init'])
|
||||
const emit = defineEmits(['init', 'checkChange'])
|
||||
const config = useConfig()
|
||||
const tree = ref()
|
||||
const treRef = ref()
|
||||
getLineTree().then(res => {
|
||||
let arr: any[] = []
|
||||
res.data.forEach((item: any) => {
|
||||
item.icon = 'el-icon-HomeFilled'
|
||||
item.color = config.getColorVal('elementUiPrimary')
|
||||
item.children.forEach((item2: any) => {
|
||||
item2.icon = 'el-icon-List'
|
||||
item.color = config.getColorVal('elementUiPrimary')
|
||||
item2.children.forEach((item3: any) => {
|
||||
item3.icon = 'el-icon-Platform'
|
||||
item3.color = config.getColorVal('elementUiPrimary')
|
||||
if (item3.comFlag === 1) {
|
||||
item3.color = '#e26257 !important'
|
||||
}
|
||||
item3.children.forEach((item4: any) => {
|
||||
item4.icon = 'el-icon-LocationFilled'
|
||||
arr.push(item4)
|
||||
console.log(res.data, '设备监控666')
|
||||
let arr1: any[] = []
|
||||
let arr2: any[] = []
|
||||
//治理设备
|
||||
res.data.map((item: any) => {
|
||||
if (item.name == '治理设备') {
|
||||
item.children.forEach((item: any) => {
|
||||
item.icon = 'el-icon-HomeFilled'
|
||||
item.color = config.getColorVal('elementUiPrimary')
|
||||
item.children.forEach((item2: any) => {
|
||||
item2.icon = 'el-icon-List'
|
||||
item2.color = config.getColorVal('elementUiPrimary')
|
||||
item2.children.forEach((item3: any) => {
|
||||
item3.icon = 'el-icon-Platform'
|
||||
item3.color = config.getColorVal('elementUiPrimary')
|
||||
item3.children.forEach((item4: any) => {
|
||||
item4.icon = 'el-icon-Platform'
|
||||
item4.color = config.getColorVal('elementUiPrimary')
|
||||
item4.color = '#e26257 !important'
|
||||
arr1.push(item4)
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
} else if (item.name == '便携式设备') {
|
||||
item.children.forEach((item: any) => {
|
||||
item.icon = 'el-icon-Platform'
|
||||
item.color = config.getColorVal('elementUiPrimary')
|
||||
item.children.forEach((item2: any) => {
|
||||
item2.icon = 'el-icon-Platform'
|
||||
item2.color = config.getColorVal('elementUiPrimary')
|
||||
item2.color = '#e26257 !important'
|
||||
arr2.push(item2)
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
tree.value = res.data
|
||||
nextTick(() => {
|
||||
if (arr.length) {
|
||||
treRef.value.treeRef.setCurrentKey(arr[0].id)
|
||||
if (arr1.length) {
|
||||
//初始化选中
|
||||
treRef.value.treeRef1.setCurrentKey(arr1[0].id)
|
||||
// 注册父组件事件
|
||||
emit('init', {
|
||||
level: 2,
|
||||
...arr[0]
|
||||
...arr1[0]
|
||||
})
|
||||
} else {
|
||||
}
|
||||
// if (arr2.length) {
|
||||
// //初始化选中
|
||||
// treRef.value.treeRef2.setCurrentKey(arr2[0].id)
|
||||
// // 注册父组件事件
|
||||
// emit('init', {
|
||||
// level: 2,
|
||||
// ...arr2[0]
|
||||
// })
|
||||
// }
|
||||
else {
|
||||
emit('init')
|
||||
}
|
||||
})
|
||||
|
||||
225
src/components/tree/point.vue
Normal file
225
src/components/tree/point.vue
Normal file
@@ -0,0 +1,225 @@
|
||||
<!-- 设备监控使用折叠面板渲染多个tree -->
|
||||
<template>
|
||||
<div
|
||||
:style="{ width: menuCollapse ? '40px' : props.width }"
|
||||
style="display: flex; transition: all 0.3s; overflow: hidden"
|
||||
>
|
||||
<Icon
|
||||
v-show="menuCollapse"
|
||||
@click="onMenuCollapse"
|
||||
:name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
|
||||
:class="menuCollapse ? 'unfold' : ''"
|
||||
size="18"
|
||||
class="fold ml10 mt20 menu-collapse"
|
||||
style="cursor: pointer"
|
||||
/>
|
||||
<div class="cn-tree" :style="{ opacity: menuCollapse ? 0 : 1 }">
|
||||
<div style="display: flex; align-items: center" class="mb10">
|
||||
<el-input v-model="filterText" placeholder="请输入内容" clearable>
|
||||
<template #prefix>
|
||||
<Icon name="el-icon-Search" style="font-size: 16px" />
|
||||
</template>
|
||||
</el-input>
|
||||
<Icon
|
||||
@click="onMenuCollapse"
|
||||
:name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
|
||||
:class="menuCollapse ? 'unfold' : ''"
|
||||
size="18"
|
||||
class="fold ml10 menu-collapse"
|
||||
style="cursor: pointer"
|
||||
v-if="props.canExpand"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<el-collapse accordion v-model="activeName" style="flex: 1; overflow: auto" @change="changeDevice">
|
||||
<el-collapse-item title="治理设备" :name="0">
|
||||
<el-tree
|
||||
ref="treeRef1"
|
||||
style="height: calc(100vh - 340px)"
|
||||
:props="defaultProps"
|
||||
highlight-current
|
||||
:filter-node-method="filterNode"
|
||||
node-key="id"
|
||||
default-expand-all
|
||||
v-bind="$attrs"
|
||||
:data="zlDeviceData"
|
||||
>
|
||||
<template #default="{ node, data }">
|
||||
<span class="custom-tree-node">
|
||||
<Icon
|
||||
:name="data.icon"
|
||||
style="font-size: 16px"
|
||||
:style="{ color: data.color }"
|
||||
v-if="data.icon"
|
||||
/>
|
||||
<span style="margin-left: 4px">{{ node.label }}</span>
|
||||
</span>
|
||||
</template>
|
||||
</el-tree>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="便携式设备" :name="1">
|
||||
<el-tree
|
||||
style="height: calc(100vh - 340px)"
|
||||
ref="treeRef2"
|
||||
:props="defaultProps"
|
||||
highlight-current
|
||||
default-expand-all
|
||||
:filter-node-method="filterNode"
|
||||
node-key="id"
|
||||
:data="bxsDeviceData"
|
||||
v-bind="$attrs"
|
||||
>
|
||||
<template #default="{ node, data }">
|
||||
<span class="custom-tree-node">
|
||||
<Icon
|
||||
:name="data.icon"
|
||||
style="font-size: 16px"
|
||||
:style="{ color: data.color }"
|
||||
v-if="data.icon"
|
||||
/>
|
||||
<span style="margin-left: 4px">{{ node.label }}</span>
|
||||
</span>
|
||||
</template>
|
||||
</el-tree>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import useCurrentInstance from '@/utils/useCurrentInstance'
|
||||
import { ElTree } from 'element-plus'
|
||||
import { ref, watch } from 'vue'
|
||||
|
||||
defineOptions({
|
||||
name: 'govern/tree'
|
||||
})
|
||||
|
||||
interface Props {
|
||||
width?: string
|
||||
canExpand?: boolean
|
||||
type?: string
|
||||
data?: any
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
width: '280px',
|
||||
canExpand: true,
|
||||
type: '',
|
||||
data: []
|
||||
})
|
||||
const { proxy } = useCurrentInstance()
|
||||
const menuCollapse = ref(false)
|
||||
const activeName = ref(0)
|
||||
const filterText = ref('')
|
||||
const defaultProps = {
|
||||
label: 'name',
|
||||
value: 'id'
|
||||
}
|
||||
//治理设备数据
|
||||
const zlDeviceData = ref([])
|
||||
//便携式设备数据
|
||||
const bxsDeviceData = ref([])
|
||||
watch(
|
||||
() => props.data,
|
||||
(val, oldVal) => {
|
||||
if (val && val.length != 0) {
|
||||
val.map((item: any) => {
|
||||
if (item.name == '治理设备') {
|
||||
item.children.map((vv: any) => {
|
||||
zlDeviceData.value.push(vv)
|
||||
})
|
||||
} else if (item.name == '便携式设备') {
|
||||
item.children.map((vv: any) => {
|
||||
bxsDeviceData.value.push(vv)
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
deep: true
|
||||
}
|
||||
)
|
||||
|
||||
watch(filterText, val => {
|
||||
if (activeName.value == 0) {
|
||||
treeRef1.value!.filter(val)
|
||||
} else {
|
||||
treeRef2.value!.filter(val)
|
||||
}
|
||||
})
|
||||
const changeDevice = (val: any) => {
|
||||
let arr1: any = []
|
||||
zlDeviceData.value.forEach((item: any) => {
|
||||
item.children.forEach((item2: any) => {
|
||||
item2.children.forEach((item3: any) => {
|
||||
item3.children.forEach((item4: any) => {
|
||||
arr1.push(item4)
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
let arr2: any = []
|
||||
bxsDeviceData.value.forEach((item: any) => {
|
||||
item.children.forEach((item2: any) => {
|
||||
arr2.push(item2)
|
||||
})
|
||||
})
|
||||
if (val == 0) {
|
||||
arr2.map(item => {
|
||||
item.checked = false
|
||||
})
|
||||
treeRef1.value.setCurrentKey(arr1[0].id)
|
||||
} else {
|
||||
arr1.map(item => {
|
||||
item.checked = false
|
||||
})
|
||||
treeRef2.value.setCurrentKey(arr2[0].id)
|
||||
}
|
||||
}
|
||||
const onMenuCollapse = () => {
|
||||
menuCollapse.value = !menuCollapse.value
|
||||
proxy.eventBus.emit('cnTreeCollapse', menuCollapse)
|
||||
}
|
||||
const filterNode = (value: string, data: any) => {
|
||||
if (!value) return true
|
||||
return data.name.includes(value)
|
||||
}
|
||||
//治理
|
||||
const treeRef1 = ref<InstanceType<typeof ElTree>>()
|
||||
//便携式
|
||||
const treeRef2 = ref<InstanceType<typeof ElTree>>()
|
||||
defineExpose({ treeRef1, treeRef2 })
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.cn-tree {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
padding: 10px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
:deep(.el-tree) {
|
||||
border: 1px solid var(--el-border-color);
|
||||
}
|
||||
|
||||
:deep(.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content) {
|
||||
background-color: var(--el-color-primary-light-7);
|
||||
}
|
||||
|
||||
.menu-collapse {
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.custom-tree-node {
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user