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

属性面板样式调整

master
liupeng 7 months ago
parent
ce87100e28
commit
b3029a9a6f
5 changed files with 116 additions and 94 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. BIN
      src/assets/images/conveyor/shapes/Rack.png
  2. 4
      src/designer/metaComponents/TextInput.vue
  3. 138
      src/designer/metaComponents/Transform.vue
  4. 64
      src/designer/viewWidgets/property/PropertyView.vue
  5. 2
      src/model/itemType/ItemTypeDefine.ts

BIN
src/assets/images/conveyor/shapes/Rack.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 95 KiB

4
src/designer/metaComponents/TextInput.vue
View File

@ -1,7 +1,7 @@
<template>
<el-form-item>
<el-form-item :label-width="prop.labelWidth">
<template #label>
<div :title="prop.label + ' - ' + prop.field">
<div :title="prop.label + ' - ' + prop.field" >
{{ prop.label }}
</div>
</template>

138
src/designer/metaComponents/Transform.vue
View File

@ -1,57 +1,59 @@
<template>
<div class="gui-row">
<div class="gui-item-name"></div>
<div class="gui-item">X</div>
<div class="gui-item">Y</div>
<div class="gui-item">Z</div>
</div>
<div class="gui-row">
<div class="gui-item-name">
<component :is="renderIcon('element Rank')"></component>
<div class="gui-toolbar">
<div class="gui-row">
<div class="gui-item-name"></div>
<div class="gui-item">X</div>
<div class="gui-item">Y</div>
<div class="gui-item">Z</div>
</div>
<template v-if="!object3DIsNull">
<div class="gui-item">
<el-input-number v-model="position.x" size="small" :precision="3" :controls="false" />
</div>
<div class="gui-item">
<el-input-number v-model="position.y" size="small" :precision="3" :controls="false" />
<div class="gui-row">
<div class="gui-item-name">
<component :is="renderIcon('element Rank')"></component>
</div>
<div class="gui-item">
<el-input-number v-model="position.z" size="small" :precision="3" :controls="false" />
</div>
</template>
</div>
<div class="gui-row">
<div class="gui-item-name">
<component :is="renderIcon('element RefreshLeft')"></component>
<template v-if="!object3DIsNull">
<div class="gui-item">
<el-input-number v-model="position.x" size="small" :precision="3" :controls="false" />
</div>
<div class="gui-item">
<el-input-number v-model="position.y" size="small" :precision="3" :controls="false" />
</div>
<div class="gui-item">
<el-input-number v-model="position.z" size="small" :precision="3" :controls="false" />
</div>
</template>
</div>
<template v-if="!object3DIsNull">
<div class="gui-item">
<el-input-number v-model="radianX" size="small" :precision="3" :controls="false" />
<div class="gui-row">
<div class="gui-item-name">
<component :is="renderIcon('element RefreshLeft')"></component>
</div>
<div class="gui-item">
<el-input-number v-model="radianY" size="small" :precision="3" :controls="false" />
</div>
<div class="gui-item">
<el-input-number v-model="radianZ" size="small" :precision="3" :controls="false" />
</div>
</template>
</div>
<div class="gui-row">
<div class="gui-item-name">
<component :is="renderIcon('element ScaleToOriginal')"></component>
<template v-if="!object3DIsNull">
<div class="gui-item">
<el-input-number v-model="radianX" size="small" :precision="3" :controls="false" />
</div>
<div class="gui-item">
<el-input-number v-model="radianY" size="small" :precision="3" :controls="false" />
</div>
<div class="gui-item">
<el-input-number v-model="radianZ" size="small" :precision="3" :controls="false" />
</div>
</template>
</div>
<template v-if="!object3DIsNull">
<div class="gui-item">
<el-input-number v-model="scale.x" size="small" :precision="3" :controls="false" />
<div class="gui-row">
<div class="gui-item-name">
<component :is="renderIcon('element ScaleToOriginal')"></component>
</div>
<div class="gui-item">
<el-input-number v-model="scale.y" size="small" :precision="3" :controls="false" />
</div>
<div class="gui-item">
<el-input-number v-model="scale.z" size="small" :precision="3" :controls="false" />
</div>
</template>
<template v-if="!object3DIsNull">
<div class="gui-item">
<el-input-number v-model="scale.x" size="small" :precision="3" :controls="false" />
</div>
<div class="gui-item">
<el-input-number v-model="scale.y" size="small" :precision="3" :controls="false" />
</div>
<div class="gui-item">
<el-input-number v-model="scale.z" size="small" :precision="3" :controls="false" />
</div>
</template>
</div>
</div>
</template>
<script>
@ -165,46 +167,4 @@ export default {
</script>
<style lang="less">
.gui-toolbar {
color: #fff;
.el-input-number.is-without-controls .el-input__wrapper {
padding-left: 2px;
padding-right: 2px;
}
.gui-row {
display: flex;
flex-direction: row;
gap: 3px;
padding: 3px 0;
.gui-item-name {
width: 26px;
align-self: stretch;
display: flex;
align-items: center;
justify-content: center;
.el-icon {
font-size: 16px;
}
}
.gui-item {
flex: 1;
text-align: center;
font-size: 12px;
.el-input-number {
width: 100%;
.el-input__wrapper {
background-color: #424242;
box-shadow: none
}
}
}
}
}
</style>

64
src/designer/viewWidgets/property/PropertyView.vue
View File

@ -11,7 +11,7 @@
</span>
</div>
<div class="calc-right-panel">
<el-form label-position="right" class="property-panel-form" size="default" @submit.native.prevent>
<el-form label-position="right" label-width="60" class="property-panel-form" size="default" @submit.native.prevent>
<template v-for="(itemMeta, idx) in selectedObjectMeta">
<el-divider v-if="itemMeta.editor === '-'" />
@ -79,3 +79,65 @@ export default {
}
}
</script>
<style lang="less">
.property-panel-form{
margin: 0;
font-size: 14px;
color:#606266;
.el-form-item--default{
margin:5px 3px 0 0;
.el-form-item__label{
height: 20px;
line-height: 22px;
}
}
.gui-toolbar {
color: #333;
background: #ffffff;
border-top: 1px solid #dcdcdc;
margin-top: 5px;
.el-input-number.is-without-controls .el-input__wrapper {
padding-left: 2px;
padding-right: 2px;
}
.gui-row {
display: flex;
flex-direction: row;
gap: 3px;
padding: 3px 3px 3px 0;
.gui-item-name {
width: 26px;
align-self: stretch;
display: flex;
align-items: center;
justify-content: center;
.el-icon {
font-size: 16px;
}
}
.gui-item {
flex: 1;
text-align: center;
font-size: 12px;
.el-input-number {
width: 100%;
.el-input__wrapper {
background-color: #efefef;
box-shadow: none
}
}
}
}
}
.el-divider{
margin: 5px 0;
}
}
</style>

2
src/model/itemType/ItemTypeDefine.ts
View File

@ -34,7 +34,7 @@ export function getAllItemTypes(): ItemTypeDefineOption[] {
*/
export const BASIC_META_OF_POINT: ItemTypeMeta = [
{ field: 'uuid', editor: 'UUID', label: 'uuid' },
{ field: 'name', editor: 'TextInput', label: '名称' },
{ field: 'name', editor: 'TextInput', label: '名称'},
{ editor: 'Transform' },
{ field: 'color', editor: 'Color', label: '颜色' },
{ editor: '-' },

Write Preview
Loading…
Cancel
Save