yuliang
/
yvan-rcs-web
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

左侧视图

master
修宁 7 months ago
parent
252ab8adf0
commit
9bddb8a194
4 changed files with 284 additions and 117 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 111
      src/designer/viewWidgets/modeltree/ModeltreeView.vue
  2. 111
      src/designer/viewWidgets/monitor/MonitorView.vue
  3. 159
      src/designer/viewWidgets/toolbox/ToolboxView.vue
  4. 16
      src/views/ModelMain.vue

111
src/designer/viewWidgets/modeltree/ModeltreeView.vue
View File

@ -1,42 +1,73 @@
<template>
ModeltreeView1<br />
ModeltreeView2<br />
ModeltreeView3<br />
ModeltreeView4<br />
ModeltreeView5<br />
ModeltreeView6<br />
ModeltreeView7<br />
ModeltreeView8<br />
ModeltreeView9<br />
ModeltreeView10<br />
ModeltreeView11<br />
ModeltreeView12<br />
ModeltreeView13<br />
ModeltreeView14<br />
ModeltreeView15<br />
ModeltreeView16<br />
ModeltreeView17<br />
ModeltreeView18<br />
ModeltreeView19<br />
ModeltreeView20<br />
ModeltreeView21<br />
ModeltreeView22<br />
ModeltreeView23<br />
ModeltreeView24<br />
ModeltreeView25<br />
ModeltreeView26<br />
ModeltreeView27<br />
ModeltreeView28<br />
ModeltreeView29<br />
ModeltreeView30<br />
ModeltreeView31<br />
ModeltreeView32<br />
ModeltreeView33<br />
ModeltreeView34<br />
ModeltreeView35<br />
ModeltreeView36<br />
ModeltreeView37<br />
ModeltreeView38<br />
ModeltreeView39<br />
ModeltreeView40<br />
<div class="title">
模型树
<el-input v-model="searchKeyword" size="small" style="width: 240px" placeholder="Search">
<template #prefix>
<component :is="renderIcon('element Search')"></component>
</template>
</el-input>
<span class="close" @click="closeMe('hideLeft')">
<component :is="renderIcon('element Close')" />
</span>
</div>
<div class="calc-left-panel">
ModeltreeView1<br />
ModeltreeView2<br />
ModeltreeView3<br />
ModeltreeView4<br />
ModeltreeView5<br />
ModeltreeView6<br />
ModeltreeView7<br />
ModeltreeView8<br />
ModeltreeView9<br />
ModeltreeView10<br />
ModeltreeView11<br />
ModeltreeView12<br />
ModeltreeView13<br />
ModeltreeView14<br />
ModeltreeView15<br />
ModeltreeView16<br />
ModeltreeView17<br />
ModeltreeView18<br />
ModeltreeView19<br />
ModeltreeView20<br />
ModeltreeView21<br />
ModeltreeView22<br />
ModeltreeView23<br />
ModeltreeView24<br />
ModeltreeView25<br />
ModeltreeView26<br />
ModeltreeView27<br />
ModeltreeView28<br />
ModeltreeView29<br />
ModeltreeView30<br />
ModeltreeView31<br />
ModeltreeView32<br />
ModeltreeView33<br />
ModeltreeView34<br />
ModeltreeView35<br />
ModeltreeView36<br />
ModeltreeView37<br />
ModeltreeView38<br />
ModeltreeView39<br />
ModeltreeView40<br />
</div>
</template>
<script>
import { renderIcon } from '@/utils/webutils.js'
export default {
name: 'ModeltreeView',
data() {
return {
searchKeyword: ''
}
},
methods: {
renderIcon,
closeMe(name) {
this.$emit('close', name)
}
}
}
</script>

111
src/designer/viewWidgets/monitor/MonitorView.vue
View File

@ -1,44 +1,73 @@
<template>
MonitorView1<br />
MonitorView2<br />
MonitorView3<br />
MonitorView4<br />
MonitorView5<br />
MonitorView6<br />
MonitorView7<br />
MonitorView8<br />
MonitorView9<br />
MonitorView10<br />
MonitorView11<br />
MonitorView12<br />
MonitorView13<br />
MonitorView14<br />
MonitorView15<br />
MonitorView16<br />
MonitorView17<br />
MonitorView18<br />
MonitorView19<br />
MonitorView20<br />
MonitorView21<br />
MonitorView22<br />
MonitorView23<br />
MonitorView24<br />
MonitorView25<br />
MonitorView26<br />
MonitorView27<br />
MonitorView28<br />
MonitorView29<br />
MonitorView30<br />
MonitorView31<br />
MonitorView32<br />
MonitorView33<br />
MonitorView34<br />
MonitorView35<br />
MonitorView36<br />
MonitorView37<br />
MonitorView38<br />
MonitorView39<br />
MonitorView40<br />
<div class="title">
监控
<el-input v-model="searchKeyword" size="small" style="width: 240px" placeholder="Search">
<template #prefix>
<component :is="renderIcon('element Search')"></component>
</template>
</el-input>
<span class="close" @click="closeMe('hideLeft')">
<component :is="renderIcon('element Close')" />
</span>
</div>
<div class="calc-left-panel">
MonitorView1<br />
MonitorView2<br />
MonitorView3<br />
MonitorView4<br />
MonitorView5<br />
MonitorView6<br />
MonitorView7<br />
MonitorView8<br />
MonitorView9<br />
MonitorView10<br />
MonitorView11<br />
MonitorView12<br />
MonitorView13<br />
MonitorView14<br />
MonitorView15<br />
MonitorView16<br />
MonitorView17<br />
MonitorView18<br />
MonitorView19<br />
MonitorView20<br />
MonitorView21<br />
MonitorView22<br />
MonitorView23<br />
MonitorView24<br />
MonitorView25<br />
MonitorView26<br />
MonitorView27<br />
MonitorView28<br />
MonitorView29<br />
MonitorView30<br />
MonitorView31<br />
MonitorView32<br />
MonitorView33<br />
MonitorView34<br />
MonitorView35<br />
MonitorView36<br />
MonitorView37<br />
MonitorView38<br />
MonitorView39<br />
MonitorView40<br />
</div>
</template>
<script setup lang="ts">
<script>
import { renderIcon } from '@/utils/webutils.js'
export default {
name: 'MonitorView',
data() {
return {
searchKeyword: ''
}
},
methods: {
renderIcon,
closeMe(name) {
this.$emit('close', name)
}
}
}
</script>

159
src/designer/viewWidgets/toolbox/ToolboxView.vue
View File

@ -1,22 +1,141 @@
<template>
ToolboxView1<br />
ToolboxView2<br />
ToolboxView3<br />
ToolboxView4<br />
ToolboxView5<br />
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 />
<div class="title">
工具箱
<el-input v-model="searchKeyword" size="small" style="width: 240px" placeholder="Search">
<template #prefix>
<component :is="renderIcon('element Search')"></component>
</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>

16
src/views/ModelMain.vue
View File

@ -43,20 +43,8 @@
<SplitArea v-show="!hideLeft" class="section-left" :class="{'hidden-split':hideLeft}"
:size="hideLeft ? 0 : sectionLeftSize">
<div class="section-item-wrap">
<div class="title">
<component :is="calcLeftPanel?.icon" />
{{ calcLeftPanel?.title }}
<el-input v-model="sectionLeftSearch" size="small" style="width: 240px" placeholder="Search">
<template #prefix>
<component :is="renderIcon('element Search')"></component>
</template>
</el-input>
<span class="close" @click="closeMe('hideLeft')"><component
:is="renderIcon('element Close')"></component></span>
</div>
<div class="calc-left-panel">
<component v-if="calcLeftPanel?.component" :is="calcLeftPanel.component" />
</div>
<component v-if="calcLeftPanel?.component" :is="calcLeftPanel.component"
@close="closeMe('hideLeft')" />
</div>
</SplitArea>
<SplitArea class="section-center" :class="{'hidden-split':hideRight}" :size="calcCenterSize">

Write Preview
Loading…
Cancel
Save