joylink/rt-sim-training-client
6
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

iscs 代码调整

Browse Source
This commit is contained in:
joylink_cuiweidong 2021-04-12 15:43:39 +08:00
parent 467d3e48cd
commit a686b8939e
5 changed files with 402 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

103
src/iscs_new/core/form/elementConst.js
View File

@ -259,18 +259,18 @@ const elementConst = {
] ]
} }
}, },
[graphicType.Arrow]: { // [graphicType.Arrow]: {
type: graphicType.Arrow, // type: graphicType.Arrow,
name:'箭头', // name:'箭头',
formList: { // formList: {
style: [ // style: [
], // ],
shape: [ // shape: [
] // ]
} // }
}, // },
[graphicType.Polyline]: { [graphicType.Polyline]: {
type: graphicType.Polyline, type: graphicType.Polyline,
name:'多边形折线段', name:'多边形折线段',
@ -773,6 +773,87 @@ const elementConst = {
} }
] ]
} }
},
[graphicType.Star]: {
type: graphicType.Star,
name:'星形',
formList: {
style: [
...form2ShapeStyle,
{
prop: 'fill',
label: '填充样式',
type: types.Color,
rules:[
{ required: true, message:'请输入填充样式', trigger: 'blur' }
],
value: '#fff',
description: '填充样式。'
}
],
shape: [
{
prop: 'cx',
label: '圆心横坐标',
type: types.Number,
precision: 0,
step:1,
rules:[
{ required: true, message:'请输入圆心横坐标', trigger: 'blur' }
],
value: 0,
description: ''
},
{
prop: 'cy',
label: '圆心纵坐标',
type: types.Number,
precision: 0,
step:1,
rules:[
{ required: true, message:'请输入圆心纵坐标', trigger: 'blur' }
],
value: 0,
description: ''
},
{
prop: 'n',
label: '瓣数',
type: types.Number,
precision: 0,
step:1,
rules:[
{ required: true, message:'请输入瓣数', trigger: 'blur' }
],
value: 5,
description: '如瓣数等于 5 时，是我们熟悉的五角星。'
},
{
prop: 'r',
label: '半径',
type: types.Number,
precision: 0,
step:1,
rules:[
{ required: true, message:'请输入半径', trigger: 'blur' }
],
value: 10,
description: ''
},
{
prop: 'r0',
label: '内半径',
type: types.Number,
precision: 0,
step:1,
rules:[
{ required: true, message:'请输入内半径', trigger: 'blur' }
],
value: 5,
description: ''
}
]
}
} }
}; };
export default elementConst export default elementConst;

2
src/iscs_new/plugins/shapeBuilder/entry.vue
View File

@ -17,6 +17,7 @@ import shapeType from '@/iscs_new/constant/shapeType.js';
import orders from '@/iscs_new/utils/orders'; import orders from '@/iscs_new/utils/orders';
import elementConst from '@/iscs_new/core/form/elementConst'; import elementConst from '@/iscs_new/core/form/elementConst';
import formBuilder from '@/iscs_new/core/form/formBuilder'; import formBuilder from '@/iscs_new/core/form/formBuilder';
import { EventBus } from '@/scripts/event-bus';
export default { export default {
data () { data () {
@ -35,6 +36,7 @@ export default {
model.base.position = [300, 100]; model.base.position = [300, 100];
model.stateList = []; model.stateList = [];
this.$iscs && this.$iscs.render([{model, action: {shapeType: shapeType.Element, order: orders.Add}}]); this.$iscs && this.$iscs.render([{model, action: {shapeType: shapeType.Element, order: orders.Add}}]);
EventBus.$emit('getComposeElemList');
} }
} }
}; };

146
src/views/iscs_new/components/eachFormItem.vue Normal file
View File

@ -0,0 +1,146 @@
<template>
<el-form-item :label="item.label" class="formName" :rules="item.rules?item.rules:[]" :prop="parentProp+'.'+item.prop">
<!-- :prop="styleGroup.type+'.'+item.prop" -->
<template v-if="checkFieldType(item, 'Number')">
<el-input-number
v-if="item.precision!=undefined"
v-model="data[item.prop]"
size="small"
:min="isNaN(item.min) ? -Infinity : item.min"
:max="isNaN(item.max)? Infinity : item.max"
:step="isNaN(item.step) ? -Infinity : item.step"
:precision="item.precision"
/>
<el-input-number
v-else
v-model="data[item.prop]"
size="small"
:min="isNaN(item.min) ? -Infinity : item.min"
:max="isNaN(item.max)? Infinity : item.max"
:step="isNaN(item.step) ? -Infinity : item.step"
/>
</template>
<template v-else-if="checkFieldType(item, 'Boolean')">
<el-switch
v-model="data[item.prop]"
style="vertical-align: top;"
size="small"
:active-color="item.activeColor || '#409eff'"
:inactive-color="item.inactiveColor || '#dcdfe6'"
/>
</template>
<template v-else-if="checkFieldType(item, 'Color')">
<el-color-picker
v-model="data[item.prop]"
show-alpha
size="small"
/>
</template>
<template v-else-if="checkFieldType(item, 'NumberArray')">
<el-input-number
v-for="count in item.length"
:key="count"
v-model="data[item.prop][count-1]"
style="margin:6px 0px 0px 5px"
size="small"
:min="isNaN(item.min) ? -Infinity : item.min"
:max="isNaN(item.max)? Infinity : item.max"
:step="isNaN(item.step) ? -Infinity : item.step"
:precision="item.precision"
/>
</template>
<!-- <template v-else-if="checkFieldType(item, 'Points')">
<div class="point-section">
<template v-for="(point, j) in formModel[styleGroup.type][item.prop]">
<div :key="j" style="overflow: hidden;">
<el-input-number v-model="point[0]" size="mini" @blur="changeNumber(0,j,formModel[styleGroup.type],item.prop)" />
<span class="pointSplice">, </span>
<el-input-number v-model="point[1]" size="mini" @blur="changeNumber(1,j,formModel[styleGroup.type],item.prop)" />
<el-button
icon="el-icon-plus"
circle
class="point-button"
@click="addPoint(j,formModel[styleGroup.type],item.prop)"
/>
<el-button
icon="el-icon-minus"
:disabled="j <3"
circle
class="point-button"
style="margin-left: 4px;"
@click="delPoint(j,formModel[styleGroup.type],item.prop)"
/>
</div>
</template>
</div>
</template> -->
<template v-else-if="checkFieldType(item, 'Select')">
<el-select
:ref="'select_'+item.prop"
v-model="data[item.prop]"
size="small"
>
<el-option
v-for="option in item.optionList"
:key="option['value']"
:label="option['label']"
:value="option['value']"
/>
</el-select>
</template>
<template v-else-if="checkFieldType(item, 'String')">
<el-input
v-model="data[item.prop]"
size="small"
type="text"
style="width:200px"
:maxlength="item.maxlength"
/>
</template>
</el-form-item>
</template>
<script>
import elementConst from '@/iscs_new/core/form/elementConst';
export default {
name:'EachFormItem',
props: {
prop: {
type: String,
required: true
},
data: {
type: Object,
required: true
},
type:{
type: String,
required: true
},
styleType: {
type: String,
required: true
},
parentProp:{
type: String,
required: true
}
},
data() {
return {
item:{label:'', type:'' }
};
},
mounted() {
const list = elementConst[this.type]['formList'][this.styleType];
const data = list.find(each=>{ return each.prop == this.prop; });
if (data) {
this.item = data;
}
},
methods:{
checkFieldType(field, type) {
return field.type === type;
}
}
};
</script>

139
src/views/iscs_new/components/tableForm.vue
View File

@ -3,12 +3,45 @@
<el-button type="primary" size="small" class="addStatus" @click="addStatus">添加</el-button> <el-button type="primary" size="small" class="addStatus" @click="addStatus">添加</el-button>
<el-form ref="form" class="tableForm" :model="formModel"> <el-form ref="form" class="tableForm" :model="formModel">
<!-- label-width="110px" --> <!-- label-width="110px" -->
<el-table :data="formModel.stateList" stripe class="eachStatusTable" size="mini"> <el-table
:data="formModel.stateList"
stripe
class="eachStatusTable"
size="mini"
row-key="id"
:expand-row-keys="expandKeys"
@expand-change="expandChange"
>
<el-table-column type="expand"> <el-table-column type="expand">
<template slot-scope="props"> <template slot-scope="props">
<el-form label-position="left" inline class="demo-table-expand"> <div class="styleList">
{{ 111 }} <div class="styleListName">样式</div>
</el-form> <div class="addStyleForm">
<el-select v-model="props.row.defaultStyleSelect" size="mini">
<el-option v-for="(eachStyle) in styleSelectList" :key="eachStyle.value" :label="eachStyle.label" :value="eachStyle.value" />
</el-select>
<el-button type="primary" size="mini" class="addStyle" @click="addStyle(props.$index)">添加</el-button>
</div>
<div v-if="props.row.style" class="styleInList">
<div v-for="(eachStyleInfo,index) in Object.keys(props.row.style)" :key="index" class="eachStyleInfo">
<each-form-item :prop="eachStyleInfo" :data="props.row.style" :type="formModel.type" style-type="style" :parent-prop="'stateList.'+props.$index+'.style'" />
</div>
</div>
</div>
<div class="shapeList">
<div class="shapeListName">绘图</div>
<div class="addStyleForm">
<el-select v-model="defaultShapeSelect" size="mini">
<el-option v-for="(eachShape) in shapeSelectList" :key="eachShape.value" :label="eachShape.label" :value="eachShape.value" />
</el-select>
<el-button type="primary" size="mini" class="addStyle" @click="addShape(props.$index)">添加</el-button>
</div>
<div v-if="props.row.Shape" class="styleInList">
<div v-for="(eachShapeInfo,index) in Object.keys(props.row.Shape)" :key="index" class="eachStyleInfo">
<each-form-item :prop="eachShapeInfo" :data="props.row.Shape" :type="formModel.type" style-type="shape" :parent-prop="'stateList.'+props.$index+'.shape'" />
</div>
</div>
</div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="状态" width="168"> <el-table-column label="状态" width="168">
@ -35,6 +68,7 @@
<el-table-column label="操作" width="100"> <el-table-column label="操作" width="100">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button type="danger" size="mini" @click="deleteStatus(scope.$index,scope.row)">删除</el-button> <el-button type="danger" size="mini" @click="deleteStatus(scope.$index,scope.row)">删除</el-button>
<!-- <el-button type="danger" size="mini" @click="deleteStatus(scope.$index,scope.row)">预览</el-button> -->
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
@ -43,28 +77,83 @@
</div> </div>
</template> </template>
<script> <script>
import elementConst from '@/iscs_new/core/form/elementConst';
import EachFormItem from './eachFormItem';
export default { export default {
name:'TableForm', name:'TableForm',
components:{
EachFormItem
},
props: { props: {
stateList: { composeElem: {
type: Array, type: Object,
required: true required: true
} }
}, },
data() { data() {
return { return {
formModel:{stateList:this.stateList} formModel:{stateList:this.composeElem.stateList, style:this.composeElem.style, type:this.composeElem.type, shape:this.composeElem.shape},
styleSelectList:[],
shapeSelectList:[],
// defaultStyleSelect:'',
defaultShapeSelect:'',
expandKeys:[]
}; };
}, },
mounted() { mounted() {
const styleNameList = Object.keys(this.formModel.style);
const style = elementConst[this.formModel.type]['formList']['style'];
styleNameList.forEach(eachStyleName=>{
const eachStyle = style.find(each=>{ return each.prop == eachStyleName; });
this.styleSelectList.push({value:eachStyleName, label:eachStyle.label});
});
// this.defaultStyleSelect = this.styleSelectList[0].value;
const shapeNameList = Object.keys(this.formModel.shape);
const shape = elementConst[this.formModel.type]['formList']['shape'];
shapeNameList.forEach(eachShapeName=>{
const eachShape = shape.find(each=>{ return each.prop == eachShapeName; });
this.shapeSelectList.push({value:eachShapeName, label:eachShape.label});
});
this.defaultShapeSelect = this.shapeSelectList[0].value;
}, },
methods:{ methods:{
addStatus() { addStatus() {
this.formModel.stateList.push({status:'', description:''}); const length = this.formModel.stateList.length;
this.formModel.stateList.push({id:length + 1, status:'', description:'', defaultStyleSelect:this.styleSelectList[0].value});
this.expandKeys.push(length + 1);
}, },
deleteStatus(index, row) { deleteStatus(index, row) {
this.formModel.stateList.splice(index, 1); this.formModel.stateList.splice(index, 1);
const key = this.expandKeys.findIndex(each=>{ return each == row.id; });
if (key > 0) { this.expandKeys.splice(key, 1); }
},
addStyle(index) {
const style = this.formModel.stateList[index].style;
if (!style) {
this.$set(this.formModel.stateList[index], 'style', {});
}
const data = this.formModel.stateList[index];
if (!data.style[data.defaultStyleSelect]) {
this.$set(this.formModel.stateList[index].style, data.defaultStyleSelect, this.formModel.style[data.defaultStyleSelect]);
}
},
addShape(index) {
const shape = this.formModel.stateList[index].shape;
if (!shape) {
this.$set(this.formModel.stateList[index], 'shape', {});
}
const data = this.formModel.stateList[index];
if (!data.shape[data.defaultStyleSelect]) {
this.$set(this.formModel.stateList[index].style, data.defaultStyleSelect, this.formModel.shape[data.defaultStyleSelect]);
}
},
expandChange(row, expandedRows) {
this.expandKeys = [];
expandedRows.forEach(each=>{
this.expandKeys.push(each.id);
});
} }
} }
}; };
@ -82,16 +171,32 @@ export default {
margin-bottom: 10px; margin-bottom: 10px;
margin-right: 10px; margin-right: 10px;
} }
.demo-table-expand { .styleList,.shapeList{
// font-size: 0; padding: 15px 10px;
border: 1px #ccc solid;
position: relative;
margin-bottom:20px;
display: inline-block;
width: 100%;
} }
.demo-table-expand label { .styleListName,.shapeListName{
width: 90px; font-size: 14px;
color: #99a9bf; position: absolute;
left: 6px;
top: -8px;
width: 40px;
background: #fff;
text-align: center;
} }
.demo-table-expand .el-form-item { .addStyle,.addShape{
margin-right: 0; float: right;
margin-bottom: 0; display: inline-block;
width: 50%; }
.styleInList{
margin-top: 15px;
padding-left: 30px;
} }
</style> </style>
<style lang="sass">
.eachStatusTable .el-table__expanded-cell{padding: 20px;}
</style>

64
src/views/iscs_new/iscsDraw/index.vue
View File

@ -30,9 +30,12 @@
<el-tab-pane label="状态编辑" name="second"> <el-tab-pane label="状态编辑" name="second">
<el-tabs v-model="statusTab" class="card" type="card" @tab-click="onSelectTab"> <el-tabs v-model="statusTab" class="card" type="card" @tab-click="onSelectTab">
<el-tab-pane v-for="(composeElem,index) in composeElemList" :key="index" :label="composeElem.name" :name="composeElem.code" :lazy="true"> <el-tab-pane v-for="(composeElem,index) in composeElemList" :key="index" :label="composeElem.name" :name="composeElem.code" :lazy="true">
<table-form :ref="'tableform'+composeElem.code" :state-list="composeElem.stateList" /> <table-form :ref="'tableform'+composeElem.code" :compose-elem="composeElem" />
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
<div class="bottomBtnGroup">
<el-button type="primary" size="small" @click="onSaveStatus">保存</el-button>
</div>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
</el-card> </el-card>
@ -50,6 +53,7 @@ import orders from '@/iscs_new/utils/orders';
import * as utils from '@/iscs_new/utils/utils'; import * as utils from '@/iscs_new/utils/utils';
import Idb from '../utils/indexedDb.js'; import Idb from '../utils/indexedDb.js';
import shapeType from '@/iscs_new/constant/shapeType.js'; import shapeType from '@/iscs_new/constant/shapeType.js';
import { EventBus } from '@/scripts/event-bus';
export default { export default {
name: 'IscsView', name: 'IscsView',
@ -90,6 +94,9 @@ export default {
this.elementList = formBuilder.buildFormList(); this.elementList = formBuilder.buildFormList();
this.enabledTab = this.elementList[0].type; this.enabledTab = this.elementList[0].type;
this.getComposeElemList(); this.getComposeElemList();
EventBus.$on('getComposeElemList', () => {
this.getComposeElemList();
});
}, },
methods: { methods: {
onIscsChange(mode, system, part) { onIscsChange(mode, system, part) {
@ -98,28 +105,28 @@ export default {
}, },
onSave() { onSave() {
const id = this.$route.query.id; const id = this.$route.query.id;
const name = this.$route.query.name||"<模型名称>"; const name = this.$route.query.name || '<模型名称>';
const type = this.$route.query.type||"<模型类型>"; const type = this.$route.query.type || '<模型类型>';
const source = this.$iscs.getSource(); const source = this.$iscs.getSource();
if (id && source) { if (id && source) {
const elementList = source.elementList.map(el => { const elementList = source.elementList.map(el => {
return this.$iscs.getShapeByCode(el.code).model; return this.$iscs.getShapeByCode(el.code).model;
}); });
const composeList = source.composeList.map(el => { const composeList = source.composeList.map(el => {
return this.$iscs.getShapeByCode(el.code).model; return this.$iscs.getShapeByCode(el.code).model;
}); });
const rect = elementList.reduce((temp,el) => { const rect = elementList.reduce((temp, el) => {
const shape = this.$iscs.getShapeByCode(el.code); const shape = this.$iscs.getShapeByCode(el.code);
return shape&&temp? temp.union(shape.getBoundingRect().clone()): shape.getBoundingRect() return shape && temp ? temp.union(shape.getBoundingRect().clone()) : shape.getBoundingRect();
}, null); }, null);
const position = rect? [(rect.x + rect.width)/2, (rect.y + rect.height)/2]: [0,0]; const position = rect ? [(rect.x + rect.width) / 2, (rect.y + rect.height) / 2] : [0, 0];
const model = { id, name, type, elementList, composeList, position }; const model = { id, name, type, elementList, composeList, position };
Idb.delete('composeList', model.id); Idb.delete('composeList', model.id);
Idb.write('composeList', model); Idb.write('composeList', model);
Idb.list('composeList').then(list => { Idb.list('composeList').then(list => {
console.log(list) console.log(list);
}) });
} }
}, },
onSelectTab() { onSelectTab() {
this.selected = null; this.selected = null;
@ -190,7 +197,15 @@ export default {
this.composeElemList = source.elementList; this.composeElemList = source.elementList;
this.statusTab = this.composeElemList[0].code; this.statusTab = this.composeElemList[0].code;
} }
},
onSaveStatus() {
this.$refs['tableform' + this.statusTab][0].$refs['form'].validate((valid) => {
if (valid) {
const formModel = this.$refs['tableform' + this.statusTab][0].formModel;
formModel.stateList.map(state=>{ delete state.defaultStyleSelect; });
this.onSave();
}
});
} }
} }
}; };
@ -315,5 +330,6 @@ export default {
} }
#cardTab .el-tabs__content{ #cardTab .el-tabs__content{
padding:0px; padding:0px;
height: 100%;
} }
</style> </style>