lb #14

Merged
gtz217 merged 20 commits from lb into master 2022-11-23 09:44:40 +08:00
3 changed files with 248 additions and 36 deletions
Showing only changes of commit 5e38ee38d6 - Show all commits

View File

@ -1,19 +1,47 @@
<template>
<div class="custom-container">
<el-row :gutter="20" style="height: calc(100vh - 150px)">
<el-row :gutter="8" style="height: calc(100vh - 150px)">
<el-col :span="4">
<aside class="custom-container__common left-side-container">
<section class="left-side-container__title">
<!-- <section class="left-side-container__title">
<span v-if="logoUrl" class="logo">
<img :src="logoUrl" alt="side container logo">
</span>
<span class="text-content">
{{ factoryName }}
</span>
</section> -->
<section class="title-area">
<span class="title-icon">
<svg
width="100%"
height="100%"
viewBox="0 0 24 24"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<title>工厂</title>
<g id="系统管理" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="质量追溯_设备参数追溯" transform="translate(-376.000000, -152.000000)" fill-rule="nonzero">
<g id="工厂" transform="translate(376.000000, 152.000000)">
<rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="24" height="24" />
<path
id="形状"
d="M12.25,6.75 L12.25,10.25 L20.75,10.25 L20.75,21.25 L3.25000001,21.25 L3.25000001,6.75 L12.25,6.75 L12.25,6.75 Z M10.75,8.25 L4.75000001,8.25 L4.75000001,19.75 L19.25,19.75 L19.25,11.75 L10.75,11.75 L10.75,8.25 Z M17.5,16.5 L17.5,18 L16,18 L16,16.5 L17.5,16.5 Z M14,16.5 L14,18 L12.5,18 L12.5,16.5 L14,16.5 Z M17.5,13.5 L17.5,15 L16,15 L16,13.5 L17.5,13.5 Z M14,13.5 L14,15 L12.5,15 L12.5,13.5 L14,13.5 Z M8.99999999,10.256 L8.99999999,11.756 L6.49999999,11.756 L6.49999999,10.256 L8.99999999,10.256 Z M9.4755,2.82499999 C10.4715,2.63649998 11.0695,2.739 12.1845,3.291 L12.581,3.49000001 L12.7945,3.58999999 C13.2545,3.79899998 13.532,3.85899998 13.887,3.82849999 L13.9855,3.81850001 L14.1545,3.79249999 L14.2455,3.77650001 C14.8380746,3.66404309 15.3698683,3.34077505 15.7425,2.8665 L15.8205,2.763 L17.0405,3.636 L16.9485,3.76000001 C16.3504031,4.53742507 15.4872916,5.06774928 14.5235,5.25 C13.5275,5.43799999 12.9285,5.3355 11.814,4.7835 L11.4175,4.58500001 C10.781,4.27450001 10.4765,4.20100001 10.024,4.25599999 L9.9315,4.26850001 L9.7545,4.299 C9.16166181,4.41148918 8.62956287,4.73472685 8.25649999,5.20900001 L8.17849999,5.31199999 L6.95899999,4.43800001 L7.0515,4.31449999 C7.64947141,3.53774907 8.51191259,3.00768671 9.47500001,2.82499999 L9.4755,2.82499999 Z"
fill="#0B58FF"
/>
</g>
</g>
</g>
</svg>
</span>
<span class="title-content">合肥新能源工厂</span>
</section>
<section class="left-side-container__content">
<!-- 导航栏 -->
<!-- <section class="left-side-container__content">
<el-tree
class="custom-tree"
:icon-class="'el-icon-document-copy'"
@ -21,6 +49,15 @@
:props="defaultProps"
@node-click="handleNodeClick"
/>
</section> -->
<section class="routes-area" v-if="showList">
<el-menu @select="handleSelect">
<!-- 此处假设了只有一个根节点 -->
<template v-for="(menuItem, index) in treeData">
<TestMenuItem :level="1" :key="index" :menuItem="menuItem" />
</template>
</el-menu>
</section>
</aside>
</el-col>
@ -53,12 +90,15 @@ import HeadForm from '@/components/basicData/HeadForm'
import testData from './parameter.test.data.js'
import moment from 'moment'
import writeXlsxFile from 'write-excel-file'
import TestMenuItem from './parameter/components/TestMenuItem.vue'
export default {
name: 'EquipmentRetrospectParameter',
components: { BaseTable, HeadForm },
components: { BaseTable, HeadForm, TestMenuItem },
data() {
return {
showList: false,
menuListTrue: [],
factoryName: 'xxx工厂',
logoUrl: require('../../../../assets/img/cnbm.png'),
treeData: null,
@ -117,26 +157,45 @@ export default {
}
},
created() {
this.showList = false
this.init()
this.fetchList('eq-tree').then(res => {
if (res.data) {
const eqTree = res.data[0] //
this.factoryName = eqTree.name
// tree
eqTree.pdlList.forEach(item => {
this.treeData = this.preHandleList(eqTree)
this.showList = true
}
})
this.fetchList('work-order').then(res => {
if (res.data.records) {
this.headFormConfig[0].selectOptions = res.data.records.map(item => ({ id: item.id, name: item.name }))
}
})
},
methods: {
preHandleList(list) {
let result = []
list.pdlList.forEach(item => {
const treeItem = {}
treeItem.label = item.name
treeItem.name = item.name
// 线
if (item.wsList.length) {
treeItem.children = []
item.wsList.forEach(workSection => {
const wsItem = {}
wsItem.label = workSection.name
wsItem.name = workSection.name
//
if (workSection.eqList.length) {
wsItem.children = []
workSection.eqList.forEach(eq => {
const eqItem = {}
eqItem.label = eq.eqName
eqItem.name = eq.eqName
eqItem.id = eq.eqId
wsItem.children.push(eqItem)
})
@ -144,19 +203,13 @@ export default {
treeItem.children.push(wsItem)
})
}
// 线
this.productLineList.push(treeItem)
})
this.treeData = this.productLineList
}
})
this.fetchList('work-order').then(res => {
if (res.data.records) {
this.headFormConfig[0].selectOptions = res.data.records.map(item => ({ id: item.id, name: item.name }))
}
result.push(treeItem)
})
return result
},
methods: {
init() {
this.productLineList.splice(0)
this.headFormConfig[0].selectOptions.splice(0)
@ -281,6 +334,10 @@ export default {
if (data.id) {
this.selectedEquipmentId = data.id
}
},
handleSelect(index, indexPath) {
const [id, name] = index.split('$--$')
this.selectedEquipmentId = id
}
}
}
@ -295,14 +352,13 @@ export default {
.custom-container__common {
background-color: #fff;
padding: 0;
border-radius: 4px;
box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2);
border-radius: 8px;
}
.left-side-container {
height: calc(100vh - 147px);
padding: 0;
background: #fafafa;
// background: #fafafa;
display: flex;
flex-direction: column;
@ -320,7 +376,7 @@ export default {
.left-side-container__content {
flex: 1 1;
overflow-y: scroll;
overflow-y: auto;
}
}
@ -356,4 +412,25 @@ export default {
.custom-tree >>> .is-current .el-tree-node__content {
background: #fafafa;
}
.title-area {
height: 72px;
display: flex;
align-items: center;
gap: 8px;
padding: 0 24px;
}
.routes-area {
flex: 1;
height: 1px;
background-color: #fff;
overflow: hidden;
overflow-y: auto;
}
.title-icon {
height: 24px;
width: 24px;
}
</style>

View File

@ -0,0 +1,135 @@
<template>
<el-submenu v-if="menuItem.children" :index="constructIndex(menuItem)">
<!-- 标题 -->
<template slot="title">
<!-- <i class="el-icon-menu"></i> -->
<i style="line-height: 1;">
<svg
width="16px"
height="16px"
viewBox="0 0 16 16"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<title>菜单</title>
<g id="系统管理" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="质量追溯_设备参数追溯" transform="translate(-376.000000, -202.000000)" fill-rule="nonzero">
<g id="编组-7" transform="translate(376.000000, 200.000000)">
<g id="菜单" transform="translate(0.000000, 2.000000)">
<rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="16" height="16"></rect>
<path
d="M3.00057813,4.49926562 L13.0025156,4.49926562 C13.2786563,4.49926562 13.5025156,4.27540625 13.5025156,3.99926563 C13.5025156,3.723125 13.2786563,3.49926563 13.0025156,3.49926563 L3.00057813,3.49926563 C2.7244375,3.49926563 2.50057813,3.723125 2.50057813,3.99926563 C2.50057813,4.27540625 2.7244375,4.49926562 3.00057813,4.49926562 Z M3.0004375,8.48703125 L12.9786875,8.48703125 C13.2548281,8.48703125 13.4786875,8.26317187 13.4786875,7.98703125 C13.4786875,7.71089062 13.2548281,7.48703125 12.9786875,7.48703125 L3.0004375,7.48703125 C2.72429687,7.48703125 2.5004375,7.71089062 2.5004375,7.98703125 C2.5004375,8.26317187 2.72429687,8.48703125 3.0004375,8.48703125 Z M13.0025156,11.4969063 L3.00057813,11.4969063 C2.7244375,11.4969063 2.50057813,11.7207656 2.50057813,11.9969063 C2.50057813,12.2730469 2.7244375,12.4969063 3.00057813,12.4969063 L13.0025156,12.4969063 C13.2786563,12.4969063 13.5025156,12.2730469 13.5025156,11.9969063 C13.5025156,11.7207656 13.2786563,11.4969063 13.0025156,11.4969063 L13.0025156,11.4969063 Z"
id="形状"
fill="currentColor"
></path>
</g>
</g>
</g>
</g>
</svg>
</i>
<span>{{ menuItem.name }}</span>
</template>
<!-- 主体 -->
<template v-for="(submenuItem, idx) in menuItem.children">
<TestMenuItem :menuItem="submenuItem" :level="level + 1" />
</template>
</el-submenu>
<!-- 一级菜单 -->
<el-menu-item v-else :index="constructIndex(menuItem)">
<!-- <i v-if="level !== 1" class="el-icon-aim"></i>
<i v-else class="el-icon-menu"></i> -->
<i style="line-height: 1px" v-if="level !== 1">
<svg
width="8px"
height="8px"
viewBox="0 0 8 8"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<title>椭圆形</title>
<g id="系统管理" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g
id="质量追溯_设备参数追溯"
transform="translate(-396.000000, -246.000000)"
fill="currentColor"
fill-rule="nonzero"
>
<g id="编组-3" transform="translate(396.000000, 240.000000)">
<path
d="M4,6 C6.209139,6 8,7.790861 8,10 C8,12.209139 6.209139,14 4,14 C1.790861,14 0,12.209139 0,10 C0,7.790861 1.790861,6 4,6 Z M4,7 C2.34314575,7 1,8.34314575 1,10 C1,11.6568542 2.34314575,13 4,13 C5.65685425,13 7,11.6568542 7,10 C7,8.34314575 5.65685425,7 4,7 Z"
id="椭圆形"
></path>
</g>
</g>
</g>
</svg>
</i>
<i style="line-height: 1;" v-else>
<svg
width="16px"
height="16px"
viewBox="0 0 16 16"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<title>菜单</title>
<g id="系统管理" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="质量追溯_设备参数追溯" transform="translate(-376.000000, -202.000000)" fill-rule="nonzero">
<g id="编组-7" transform="translate(376.000000, 200.000000)">
<g id="菜单" transform="translate(0.000000, 2.000000)">
<rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="16" height="16"></rect>
<path
d="M3.00057813,4.49926562 L13.0025156,4.49926562 C13.2786563,4.49926562 13.5025156,4.27540625 13.5025156,3.99926563 C13.5025156,3.723125 13.2786563,3.49926563 13.0025156,3.49926563 L3.00057813,3.49926563 C2.7244375,3.49926563 2.50057813,3.723125 2.50057813,3.99926563 C2.50057813,4.27540625 2.7244375,4.49926562 3.00057813,4.49926562 Z M3.0004375,8.48703125 L12.9786875,8.48703125 C13.2548281,8.48703125 13.4786875,8.26317187 13.4786875,7.98703125 C13.4786875,7.71089062 13.2548281,7.48703125 12.9786875,7.48703125 L3.0004375,7.48703125 C2.72429687,7.48703125 2.5004375,7.71089062 2.5004375,7.98703125 C2.5004375,8.26317187 2.72429687,8.48703125 3.0004375,8.48703125 Z M13.0025156,11.4969063 L3.00057813,11.4969063 C2.7244375,11.4969063 2.50057813,11.7207656 2.50057813,11.9969063 C2.50057813,12.2730469 2.7244375,12.4969063 3.00057813,12.4969063 L13.0025156,12.4969063 C13.2786563,12.4969063 13.5025156,12.2730469 13.5025156,11.9969063 C13.5025156,11.7207656 13.2786563,11.4969063 13.0025156,11.4969063 L13.0025156,11.4969063 Z"
id="形状"
fill="currentColor"
></path>
</g>
</g>
</g>
</g>
</svg>
</i>
<span slot="title">{{ menuItem.name }}</span>
</el-menu-item>
</template>
<script>
export default {
name: 'TestMenuItem',
props: {
level: {
type: Number,
default: 1
},
index: {
type: String,
default: ''
},
menuItem: {
default: () => ({})
},
defaultActive: {
type: Number,
default: 0
}
},
data() {
return {}
},
created() {},
mounted() {},
methods: {
constructIndex(menuItem) {
return menuItem.id + '$--$' + menuItem.name
}
}
}
</script>
<style scoped></style>

View File

@ -31,7 +31,7 @@
<el-menu @select="handleSelect">
<!-- 此处假设了只有一个根节点 -->
<template v-for="(menuItem, index) in menuListTrue[0].children" >
<TestMenuItem :level="1" :menuItem="menuItem" />
<TestMenuItem :level="1" :key="index" :menuItem="menuItem" />
</template>
</el-menu>
</section>