新绘图调整
This commit is contained in:
fan
parent
066896bd4f
commit
e88db236d5
@ -18,7 +18,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^0.21.1",
|
||||
"bjjl-engine-2d": "^1.0.18",
|
||||
"bjjl-engine-2d": "^1.0.19",
|
||||
"echarts": "^4.7.0",
|
||||
"element-ui": "^2.12.0",
|
||||
"file-saver": "^1.3.3",
|
||||
|
||||
110
src/views/newDraw/drawForm.vue
Normal file
110
src/views/newDraw/drawForm.vue
Normal file
@ -0,0 +1,110 @@
|
||||
<template>
|
||||
<div style="background: #fff;">
|
||||
<div style="text-align: right;">
|
||||
<el-button type="text" @click="save">保存</el-button>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'DrawForm',
|
||||
props: {
|
||||
model: {
|
||||
type: Array,
|
||||
default() {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
code: '',
|
||||
type: '',
|
||||
name: '',
|
||||
position: [0, 0],
|
||||
rotation: 0,
|
||||
scale: [1, 1]
|
||||
}
|
||||
};
|
||||
},
|
||||
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;
|
||||
},
|
||||
modelChange(code) {
|
||||
const compose = this.model.find(item => item.code === code);
|
||||
this.selectChange(compose);
|
||||
},
|
||||
updateCompose() {
|
||||
this.$emit('updateCompose', this.form);
|
||||
},
|
||||
deleteCompose() {
|
||||
this.$emit('deleteCompose', this.form);
|
||||
this.form = {
|
||||
code: '',
|
||||
type: '',
|
||||
name: '',
|
||||
position: [0, 0],
|
||||
rotation: 0,
|
||||
scale: [1, 1]
|
||||
};
|
||||
},
|
||||
save() {
|
||||
|
||||
},
|
||||
back() {
|
||||
this.$router.go(-1);
|
||||
}
|
||||
}
|
||||
};
|
||||
</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;}
|
||||
/deep/ .el-form-item__content{
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
@ -1,20 +1,30 @@
|
||||
<template>
|
||||
<div style="width: 100%;height: 100%;">
|
||||
<jl-picture-builder ref="jlPictureBuilder" :model="model" :compose-map="composeMap" />
|
||||
<div style="height: 300px;background: #fff;z-index: 999;position: absolute;top: 70px;padding: 5px;left: 5px;">
|
||||
<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;">
|
||||
<template v-for="item in modelList">
|
||||
<el-button :key="item.code" size="mini" @click="addModel(item)">{{ item.name }}</el-button>
|
||||
<el-button :key="item.code" size="mini" style="margin: 5px" @click="addModel(item)">{{ item.name }}</el-button>
|
||||
</template>
|
||||
</div>
|
||||
<draw-form
|
||||
ref="drawForm"
|
||||
:model="model"
|
||||
style="position: absolute;right: 0;top: 60px;height: calc(100% - 60px);"
|
||||
@updateCompose="updateCompose"
|
||||
@deleteCompose="deleteCompose"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DrawForm from './drawForm';
|
||||
import { getModelList } from '@/api/management/model';
|
||||
import { deepAssign } from '@/utils/index';
|
||||
|
||||
export default {
|
||||
name: 'Edit',
|
||||
components: {
|
||||
DrawForm
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
composeMap: {},
|
||||
@ -25,12 +35,15 @@ export default {
|
||||
mounted() {
|
||||
getModelList().then(res=>{
|
||||
this.modelList = res.data;
|
||||
// this.modelList.forEach(item => {
|
||||
// this.composeMap[item.code] = item;
|
||||
// });
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
test() {
|
||||
this.$refs.jlPictureBuilder.update([]);
|
||||
},
|
||||
save(model) {
|
||||
console.log(JSON.stringify(model));
|
||||
},
|
||||
addModel(model) {
|
||||
if (!this.composeMap[model.code]) {
|
||||
this.composeMap[model.code] = JSON.parse(model.jsonData);
|
||||
@ -39,19 +52,49 @@ export default {
|
||||
code: this.getUID(model.code),
|
||||
position: [100, 100],
|
||||
type: model.code,
|
||||
name: model.name,
|
||||
rotation: 0,
|
||||
scale: [1, 1]
|
||||
scale: [1, 1],
|
||||
shapeList: this.composeMap[model.code].shapeList
|
||||
};
|
||||
this.model.push(addModel);
|
||||
this.$refs.jlPictureBuilder.update([{model: addModel, action:{order:'&Add', shapeType: 'Compose'}}]);
|
||||
},
|
||||
updateCompose(model) {
|
||||
const updateModel = {
|
||||
code: model.code,
|
||||
position: model.position,
|
||||
type: model.type,
|
||||
name: model.name,
|
||||
rotation: model.rotation,
|
||||
scale: model.scale,
|
||||
shapeList: this.composeMap[model.type].shapeList
|
||||
};
|
||||
const index = this.model.findIndex(item => item.code === model.code);
|
||||
this.model.splice(index, 1, updateModel);
|
||||
this.$refs.jlPictureBuilder.update([{model: updateModel, action:{order:'&UPT', shapeType: 'Compose'}}]);
|
||||
},
|
||||
deleteCompose(model) {
|
||||
const index = this.model.findIndex(item => item.code === model.code);
|
||||
this.model.splice(index, 1);
|
||||
this.$refs.jlPictureBuilder.update([{model: model, action:{order:'&DEL', shapeType: 'Compose'}}]);
|
||||
},
|
||||
getUID (type, base = 0) {
|
||||
return [(type || ''), base++, Math.random().toFixed(5)].join('_');
|
||||
},
|
||||
selectChange(compose) {
|
||||
this.$refs.drawForm.selectChange(compose);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
<style>
|
||||
#app {
|
||||
font-family: "Avenir", Helvetica, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-align: center;
|
||||
color: #2c3e50;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user