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