代码调整
This commit is contained in:
joylink_cuiweidong
parent
1d72d29dff
commit
2cb2247d7e
@ -5,36 +5,48 @@
|
||||
<el-button type="text" style="margin-right: 10px" @click="back">返回</el-button>
|
||||
</div>
|
||||
<div class="styleGroup">
|
||||
<div class="styleGroupName">
|
||||
绘图配置
|
||||
</div>
|
||||
<el-form ref="form" :model="form" label-width="80px">
|
||||
<el-form-item label="模型:">
|
||||
<el-select v-model="form.code" size="mini" placeholder="请选择" @change="modelChange">
|
||||
<el-option
|
||||
v-for="item in model"
|
||||
:key="item.code"
|
||||
:label="item.name + '(' + item.code + ')'"
|
||||
:value="item.code"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="位置:">
|
||||
<el-input-number v-model="form.position[0]" size="mini" />
|
||||
<el-input-number v-model="form.position[1]" size="mini" />
|
||||
</el-form-item>
|
||||
<el-form-item label="旋转:">
|
||||
<el-input-number v-model="form.rotation" size="mini" :min="-360" :max="360" />
|
||||
</el-form-item>
|
||||
<el-form-item label="缩放:">
|
||||
<el-input-number v-model="form.scale[0]" :precision="2" :step="0.1" size="mini" :min="0.1" />
|
||||
<el-input-number v-model="form.scale[1]" :precision="2" :step="0.1" size="mini" :min="0.1" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div style="text-align: right;">
|
||||
<el-button :disabled="!form.code" type="warning" size="mini" @click="updateCompose">修改</el-button>
|
||||
<el-button :disabled="!form.code" type="danger" size="mini" @click="deleteCompose">删除</el-button>
|
||||
</div>
|
||||
<el-card type="border-card" class="elementCard">
|
||||
<el-tabs v-model="enabledTab" class="eachElementPane" type="card">
|
||||
<el-tab-pane id="drawSettingPane" label="绘图配置" name="drawSetting">
|
||||
<el-form ref="form" :model="form" label-width="80px">
|
||||
<el-form-item label="模型:">
|
||||
<el-select v-model="form.code" size="mini" placeholder="请选择" @change="modelChange">
|
||||
<el-option
|
||||
v-for="item in model"
|
||||
:key="item.code"
|
||||
:label="item.name + '(' + item.code + ')'"
|
||||
:value="item.code"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="位置:">
|
||||
<el-input-number v-model="form.position[0]" size="mini" />
|
||||
<el-input-number v-model="form.position[1]" size="mini" />
|
||||
</el-form-item>
|
||||
<el-form-item label="旋转:">
|
||||
<el-input-number v-model="form.rotation" size="mini" :min="-360" :max="360" />
|
||||
</el-form-item>
|
||||
<el-form-item label="缩放:">
|
||||
<el-input-number v-model="form.scale[0]" :precision="2" :step="0.1" size="mini" :min="0.1" />
|
||||
<el-input-number v-model="form.scale[1]" :precision="2" :step="0.1" size="mini" :min="0.1" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div style="text-align: center;">
|
||||
<el-button :disabled="!form.code" type="warning" size="mini" @click="updateCompose">修改</el-button>
|
||||
<el-button :disabled="!form.code" type="danger" size="mini" @click="deleteCompose">删除</el-button>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane v-if="allowModifyList.length>0" id="modelModifyPane" label="模型修改" name="modelModify">
|
||||
<el-tabs v-model="modifyElementTab" class="eachElementPane">
|
||||
<el-tab-pane v-for="(allowModify,index) in allowModifyList" :key="index" :label="allowModify.name" :name="allowModify.code">
|
||||
<!-- {{ allowModify.name }} -->
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<!-- {{}} -->
|
||||
<!-- allowModifyList -->
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -53,6 +65,8 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
enabledTab:'drawSetting',
|
||||
modifyElementTab:'',
|
||||
form: {
|
||||
code: '',
|
||||
type: '',
|
||||
@ -60,18 +74,35 @@ export default {
|
||||
position: [0, 0],
|
||||
rotation: 0,
|
||||
scale: [1, 1]
|
||||
},
|
||||
allowModifyList:[],
|
||||
modifyElementForm:{
|
||||
shape:{},
|
||||
style:{}
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
selectChange(compose) {
|
||||
// this.form.code = compose.code;
|
||||
// this.form.type = compose.type;
|
||||
// this.form.name = compose.name;
|
||||
// this.form.position = compose.position;
|
||||
// this.form.rotation = compose.rotation;
|
||||
// this.form.scale = compose.scale;
|
||||
this.form = compose;
|
||||
selectChange({code, type, name, position, rotation, scale, shapeList}) {
|
||||
this.form = {code, type, name, position, rotation, scale};
|
||||
this.allowModifyList = [];
|
||||
shapeList.forEach(shape=>{
|
||||
if (shape.editAttrList && shape.editAttrList.length > 0) {
|
||||
this.allowModifyList.push({code:shape.code, editAttrList:shape.editAttrList, name:shape.name});
|
||||
// style
|
||||
// shape
|
||||
// code: (...)
|
||||
// editAttrList: (...)
|
||||
// name: "Polyline_0_0.78816"
|
||||
}
|
||||
});
|
||||
if (this.allowModifyList.length > 0) {
|
||||
const currentModify = this.allowModifyList[0];
|
||||
this.modifyElementTab = currentModify.code;
|
||||
// currentModify.editAttrList.forEach(each=>{
|
||||
// this.modifyElementForm[each.attrType][each.attrName] = '';
|
||||
// });
|
||||
}
|
||||
},
|
||||
modelChange(code) {
|
||||
const compose = this.model.find(item => item.code === code);
|
||||
@ -102,9 +133,20 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.styleGroup{border: 1px #ccc solid;padding:25px 20px 20px 20px;position: relative;margin: 30px 15px;}
|
||||
.styleGroupName{font-size: 14px;position: absolute;max-width: 100px;height: 20px;background: #fff;left: 10px;top: -9px;text-align: center;padding: 0px 10px;}
|
||||
.styleGroup{height:100%}
|
||||
.styleGroup .elementCard {
|
||||
height:100%;
|
||||
width:400px;
|
||||
}
|
||||
#drawSettingPane,#modelModifyPane{height:100%;display: flex;flex-direction:column;}
|
||||
/deep/ .el-form-item__content{
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
#modelModifyPane .eachElementPane .el-tabs__nav .el-tabs__item.is-top.is-active{
|
||||
padding: 0px 10px;
|
||||
border-bottom: 2px solid !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<div id="app" style="width: 100%;height: 100%;">
|
||||
<!--<jl-model-builder type="测试类型" composeName="测试名称" :model="model" @save="save"></jl-model-builder>-->
|
||||
<jl-picture-builder ref="jlPictureBuilder" :model="model" :compose-map="composeMap" @selectChange="selectChange" />
|
||||
<div style="height: 300px;background: #fff;z-index: 999;position: absolute;top: 70px;left: 0;">
|
||||
<div style="height: 300px;background: #fff;z-index: 999;position: absolute;top: 70px;left: 0;overflow:auto">
|
||||
<div v-for="item in modelList" :key="item.code">
|
||||
<el-button size="mini" style="margin: 5px" @click="addModel(item)">{{ item.name }}</el-button>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user