|
|
@@ -16,18 +16,23 @@ |
|
|
|
title="点击切换工厂" |
|
|
|
@mouseenter="factoryListOpen = true" |
|
|
|
@mouseleave="factoryListOpen = false"> |
|
|
|
{{ currentFactory || '工厂名称' }} |
|
|
|
{{ currentFactory?.label || '工厂名称' }} |
|
|
|
<div class="factory-list__wrapper" :class="{ open: factoryListOpen }"> |
|
|
|
<ul class="factory-list" v-if="factoryList.length" @click.prevent="factoryChangeHandler"> |
|
|
|
<ul |
|
|
|
class="factory-list" |
|
|
|
v-if="sidebarContent.length" |
|
|
|
@click.prevent="factoryChangeHandler"> |
|
|
|
<li |
|
|
|
v-for="fc in factoryList" |
|
|
|
v-for="fc in sidebarContent" |
|
|
|
:key="fc.id" |
|
|
|
:value="fc.value" |
|
|
|
:data-value="fc.id" |
|
|
|
class="factory-list__item"> |
|
|
|
{{ fc.name }} |
|
|
|
{{ fc.label }} |
|
|
|
</li> |
|
|
|
</ul> |
|
|
|
<div v-else style="color: #0008; width: 128px; text-align: center;">- 无 -</div> |
|
|
|
<div v-else style="color: #0008; width: 128px; text-align: center"> |
|
|
|
- 无 - |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- side bar --> |
|
|
@@ -35,7 +40,8 @@ |
|
|
|
class="side-bar__left" |
|
|
|
style="width: 240px; padding: 12px; height: 100%"> |
|
|
|
<el-tree |
|
|
|
:data="sidebarContent" |
|
|
|
v-if="currentFactory" |
|
|
|
:data="currentFactory?.children" |
|
|
|
:props="treeProps" |
|
|
|
@node-click="handleSidebarItemClick" /> |
|
|
|
</div> |
|
|
@@ -314,12 +320,15 @@ export default { |
|
|
|
}, |
|
|
|
|
|
|
|
factoryChangeHandler(event) { |
|
|
|
console.log('clicked factory change.......'); |
|
|
|
this.factoryListOpen = false; |
|
|
|
const fcId = event.target.dataset.value; |
|
|
|
console.log('fc id', fcId); |
|
|
|
this.handleSidebarItemClick({ id: fcId, type: '工厂' }); |
|
|
|
this.currentFactory = this.sidebarContent.find((item) => item.id == fcId); |
|
|
|
}, |
|
|
|
|
|
|
|
handleSidebarItemClick({ label, id, type }) { |
|
|
|
console.log('lable clicked!', label, id, type); |
|
|
|
console.log('label clicked!', label, id, type); |
|
|
|
switch (type) { |
|
|
|
case '设备': |
|
|
|
this.queryParams.equipmentId = id; |
|
|
@@ -424,10 +433,10 @@ export default { |
|
|
|
} |
|
|
|
|
|
|
|
.factory-list__selector::after { |
|
|
|
content: ''; |
|
|
|
/* content: ''; */ |
|
|
|
position: absolute; |
|
|
|
top: 16px; |
|
|
|
left: 100px; |
|
|
|
right: 12px; |
|
|
|
display: inline-block; |
|
|
|
width: 8px; |
|
|
|
height: 8px; |
|
|
@@ -482,7 +491,7 @@ li { |
|
|
|
border-radius: 4px; |
|
|
|
font-size: 16px; |
|
|
|
line-height: 1; |
|
|
|
padding: 8px 4px; |
|
|
|
padding: 8px 32px 8px 8px; |
|
|
|
min-width: 64px; |
|
|
|
} |
|
|
|
|
|
|
|