4 changed files with 284 additions and 117 deletions
@ -1,22 +1,141 @@ |
|||||
<template> |
<template> |
||||
ToolboxView1<br /> |
<div class="title"> |
||||
ToolboxView2<br /> |
工具箱 |
||||
ToolboxView3<br /> |
<el-input v-model="searchKeyword" size="small" style="width: 240px" placeholder="Search"> |
||||
ToolboxView4<br /> |
<template #prefix> |
||||
ToolboxView5<br /> |
<component :is="renderIcon('element Search')"></component> |
||||
ToolboxView6<br /> |
|
||||
ToolboxView7<br /> |
|
||||
ToolboxView8<br /> |
|
||||
ToolboxView9<br /> |
|
||||
ToolboxView10<br /> |
|
||||
ToolboxView11<br /> |
|
||||
ToolboxView12<br /> |
|
||||
ToolboxView13<br /> |
|
||||
ToolboxView14<br /> |
|
||||
ToolboxView15<br /> |
|
||||
ToolboxView16<br /> |
|
||||
ToolboxView17<br /> |
|
||||
ToolboxView18<br /> |
|
||||
ToolboxView19<br /> |
|
||||
ToolboxView20<br /> |
|
||||
</template> |
</template> |
||||
|
</el-input> |
||||
|
<span class="close" @click="closeMe('hideLeft')"> |
||||
|
<component :is="renderIcon('element Close')" /> |
||||
|
</span> |
||||
|
</div> |
||||
|
<div class="calc-left-panel toolbox-view"> |
||||
|
<el-menu class="el-menu-vertical-demo" |
||||
|
@open="handleOpen" |
||||
|
@close="handleClose"> |
||||
|
<el-sub-menu v-for="itemType in itemTypes" :title="itemType.label" :index="itemType.name"> |
||||
|
<template #title> |
||||
|
<component :is="renderIcon(itemType.icon)" /> |
||||
|
<span>{{ itemType.label }}</span> |
||||
|
<span class="subtitle">{{ itemType.name }}</span> |
||||
|
</template> |
||||
|
<el-menu-item v-for="item in itemType.children" :index="item.name"> |
||||
|
<component :is="renderIcon(item.icon)" /> |
||||
|
<span>{{ item.label }}</span> |
||||
|
<span>{{ itemType.name }}</span> |
||||
|
</el-menu-item> |
||||
|
</el-sub-menu> |
||||
|
</el-menu> |
||||
|
</div> |
||||
|
|
||||
|
</template> |
||||
|
<script> |
||||
|
import { renderIcon } from '@/utils/webutils.js' |
||||
|
|
||||
|
export default { |
||||
|
name: 'ToolboxView', |
||||
|
data() { |
||||
|
return { |
||||
|
searchKeyword: '', |
||||
|
itemTypes: [ |
||||
|
{ |
||||
|
name: 'point', icon: 'antd AimOutlined', label: '点', |
||||
|
children: [ |
||||
|
{ name: 'point', icon: 'antd AimOutlined', label: '辅助点位' }, |
||||
|
{ name: 'decision_point', icon: 'antd BorderOuterOutlined', label: '决策点' }, |
||||
|
{ name: 'bcr', icon: 'antd BorderVerticleOutlined', label: '扫码器' }, |
||||
|
{ name: 'station_point', icon: 'antd BorderOutlined', label: '站点' } |
||||
|
] |
||||
|
}, |
||||
|
{ |
||||
|
name: 'line', icon: 'antd LineOutlined', label: '线', |
||||
|
children: [ |
||||
|
{ name: 'line', icon: 'antd SmallDashOutlined', label: '辅助线' }, |
||||
|
{ name: 'conveyor', icon: 'antd FontSizeOutlined', label: '输送线' }, |
||||
|
{ name: 'moveline', icon: 'antd SwapRightOutlined', label: '行走路径' } |
||||
|
] |
||||
|
}, |
||||
|
{ |
||||
|
name: 'store', icon: 'fa BuildingRegular', label: '存储', |
||||
|
children: [ |
||||
|
{ name: 'queue', icon: 'element Queue', label: '暂存区' }, |
||||
|
{ name: 'ground_rack', icon: 'element GroundRack', label: '地堆区' }, |
||||
|
{ name: 'rack', icon: 'element Rack', label: '常规货架' }, |
||||
|
{ name: 'asrs_rack', icon: 'element AsrsRack', label: '立库货架' }, |
||||
|
{ name: 'flash_rack', icon: 'element FlashRack', label: '密集库货架' }, |
||||
|
{ name: 'shuttle_rack', icon: 'element ShuttleRack', label: '多穿库货架' }, |
||||
|
{ name: 'pd', icon: 'element Pd', label: '层间线' } |
||||
|
] |
||||
|
}, |
||||
|
{ |
||||
|
name: 'executer', icon: 'antd CarOutlined', label: '任务执行器', |
||||
|
children: [ |
||||
|
{ name: 'stacker', icon: 'element Stacker', label: '堆垛机' }, |
||||
|
{ name: 'laser', icon: 'element Laser', label: '两向穿梭车' }, |
||||
|
{ name: 'flash', icon: 'element Flash', label: '四向穿梭车' }, |
||||
|
{ name: 'flash_tp', icon: '', label: '穿梭板' }, |
||||
|
{ name: 'life', label: '货物提升机' }, |
||||
|
{ name: 'flash_life', label: '车提升机' }, |
||||
|
{ name: 'forklift', label: '叉车' }, |
||||
|
{ name: 'ptr', label: '侧叉' }, |
||||
|
{ name: 'agv', label: '潜伏式AGV' }, |
||||
|
{ name: 'people', label: '人工' }, |
||||
|
{ name: 'robotic_arm', label: '机械手' }, |
||||
|
{ name: 'stacking', label: '碟盘机' }, |
||||
|
{ name: 'station', label: '加工台' }, |
||||
|
{ name: 'tag', label: '电子标签' } |
||||
|
] |
||||
|
}, |
||||
|
{ |
||||
|
name: 'flow_item', icon: 'antd CodeSandboxOutlined', label: '流动单元', |
||||
|
children: [ |
||||
|
{ name: 'box', label: '箱' }, |
||||
|
{ name: 'tote', label: '托盘' }, |
||||
|
{ name: 'pallet', label: '托盘' } |
||||
|
] |
||||
|
}, |
||||
|
{ |
||||
|
name: 'other', icon: 'antd CiOutlined', label: '辅助', |
||||
|
children: [ |
||||
|
{ name: 'source', label: '发生器' }, |
||||
|
{ name: 'sink', label: '消失器' }, |
||||
|
{ name: 'dispatcher', label: '任务分配器' }, |
||||
|
{ name: 'text', label: '文本' }, |
||||
|
{ name: 'image', label: '图片' }, |
||||
|
{ name: 'plane', label: '区域' } |
||||
|
] |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
renderIcon, |
||||
|
closeMe() { |
||||
|
this.$emit('close') |
||||
|
}, |
||||
|
handleOpen(key, keyPath) { |
||||
|
console.log(key, keyPath) |
||||
|
}, |
||||
|
handleClose(key, keyPath) { |
||||
|
console.log(key, keyPath) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style lang="less"> |
||||
|
.toolbox-view { |
||||
|
.subtitle { |
||||
|
margin-left: 5px; |
||||
|
color: var(--el-color-info-light-5); |
||||
|
} |
||||
|
|
||||
|
.el-sub-menu__title { |
||||
|
height: 35px; |
||||
|
} |
||||
|
|
||||
|
.el-menu-item { |
||||
|
height: 35px; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue