From c9b5c908a0864cd7307fe4ddc73253bdef5591ec Mon Sep 17 00:00:00 2001 From: joylink_cuiweidong <364937672@qq.com> Date: Thu, 8 Apr 2021 11:15:39 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BB=A3=E7=A0=81=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/iscs_new/core/form/elementConst.js | 620 +++++++++++---------- src/iscs_new/core/form/types.js | 18 +- src/views/iscs_new/components/dataForm.vue | 56 +- src/views/iscs_new/iscsDraw/index.vue | 66 +-- 4 files changed, 425 insertions(+), 335 deletions(-) diff --git a/src/iscs_new/core/form/elementConst.js b/src/iscs_new/core/form/elementConst.js index 372c3c59c..33a9ad4a0 100644 --- a/src/iscs_new/core/form/elementConst.js +++ b/src/iscs_new/core/form/elementConst.js @@ -14,47 +14,47 @@ export const elementConst = { ], shape: [ { - prop: 'x1', - label: '起始点横坐标', - type: types.Number, - precision: 0, - step:1, + prop: 'x1', + label: '起始点横坐标', + type: types.Number, + precision: 0, + step:1, rules:[ { required: true, message:'请输入起始点横坐标', trigger: 'blur' } ], value: 0, description: '起始点横坐标' - }, - { - prop: 'y1', - label: '起始点纵坐标', - type: types.Number, - precision: 0, - step:1, + }, + { + prop: 'y1', + label: '起始点纵坐标', + type: types.Number, + precision: 0, + step:1, rules:[ { required: true, message:'请输入起始点纵坐标', trigger: 'blur' } ], value: 100, description: '起始点纵坐标' - }, - { - prop: 'x2', - label: '终止点横坐标', - type: types.Number, - precision: 0, - step:1, + }, + { + prop: 'x2', + label: '终止点横坐标', + type: types.Number, + precision: 0, + step:1, rules:[ { required: true, message:'请输入终止点横坐标', trigger: 'blur' } ], value: 100, description: '终止点横坐标' - }, - { - prop: 'y2', - label: '终止点纵坐标', - type: types.Number, - precision: 0, - step:1, + }, + { + prop: 'y2', + label: '终止点纵坐标', + type: types.Number, + precision: 0, + step:1, rules:[ { required: true, message:'请输入终止点纵坐标', trigger: 'blur' } ], @@ -81,8 +81,8 @@ export const elementConst = { name:'矩形', formList: { style: [ - ...form2ShapeStyle, - { + ...form2ShapeStyle, + { prop: 'fill', label: '填充样式', type: types.Color, @@ -95,60 +95,60 @@ export const elementConst = { ], shape: [ { - prop: 'x', - label: '左上角横坐标', - type: types.Number, - precision: 0, - step:1, + prop: 'x', + label: '左上角横坐标', + type: types.Number, + precision: 0, + step:1, rules:[ { required: true, message:'请输入左上角横坐标', trigger: 'blur' } ], value: 0, description: '左上角横坐标' - }, - { - prop: 'y', - label: '左上角纵坐标', - type: types.Number, - precision: 0, - step:1, + }, + { + prop: 'y', + label: '左上角纵坐标', + type: types.Number, + precision: 0, + step:1, rules:[ { required: true, message:'请输入左上角纵坐标', trigger: 'blur' } ], value: 0, description: '左上角纵坐标' - }, - { - prop: 'width', - label: '宽度', - type: types.Number, - precision: 0, - step:1, + }, + { + prop: 'width', + label: '宽度', + type: types.Number, + precision: 0, + step:1, rules:[ { required: true, message:'请输入宽度', trigger: 'blur' } ], value: 50, description: '宽度' - }, - { - prop: 'height', - label: '高度', - type: types.Number, - precision: 0, - step:1, + }, + { + prop: 'height', + label: '高度', + type: types.Number, + precision: 0, + step:1, rules:[ { required: true, message:'请输入高度', trigger: 'blur' } ], value: 50, description: '高度' - }, - { - prop: 'r', - label: '圆角矩形半径', - type: types.NumberArray, - precision: 0, - step:1, - length:4, + }, + { + prop: 'r', + label: '圆角矩形半径', + type: types.NumberArray, + precision: 0, + step:1, + length:4, rules:[ { required: true, message:'请输入圆角矩形半径', trigger: 'blur' } ], @@ -162,8 +162,8 @@ export const elementConst = { name:'圆形', formList:{ style: [ - ...form2ShapeStyle, - { + ...form2ShapeStyle, + { prop: 'fill', label: '填充样式', type: types.Color, @@ -176,40 +176,40 @@ export const elementConst = { ], shape: [ { - prop: 'cx', - label: '圆心横坐标', - type: types.Number, - precision: 0, - step:1, + 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, + prop: 'cy', + label: '圆心纵坐标', + type: types.Number, + precision: 0, + step:1, rules:[ { required: true, message:'请输入圆心纵坐标', trigger: 'blur' } ], value: 0, description: '圆心纵坐标' - }, - { - prop: 'r', - label: '半径', - type: types.Number, - precision: 0, - step:1, + }, + { + prop: 'r', + label: '半径', + type: types.Number, + precision: 0, + step:1, rules:[ { required: true, message:'请输入半径', trigger: 'blur' } ], value: 50, description: '半径' - } + } ] } }, @@ -218,8 +218,8 @@ export const elementConst = { name:'多边形', formList: { style: [ - ...form2ShapeStyle, - { + ...form2ShapeStyle, + { prop: 'fill', label: '填充样式', type: types.Color, @@ -231,7 +231,31 @@ export const elementConst = { } ], shape: [ - + { + prop: 'points', + label: '坐标集合', + type: types.Points, + precision: 0, step:1, + rules:[ + { required: true, message:'请输入坐标集合', trigger: 'blur' } + ], + value: [[0, 0], [100, 100], [100, 200]], + description: '每个元素是一个横纵坐标的数组' + }, + { + prop: 'smooth', + label: '圆滑程度', + type: types.Number, + min: 0, + max: 1, + step: 0.05, + precision: 2, + rules:[ + { required: true, message:'请输入坐标集合', trigger: 'blur' } + ], + value: 10, + description: '取值范围为 0 到 1 之间的数字，0 表示不圆滑' + } ] } }, @@ -255,7 +279,31 @@ export const elementConst = { ...form2ShapeStyle ], shape: [ - + { + prop: 'points', + label: '坐标集合', + type: types.Points, + precision: 0, step:1, + rules:[ + { required: true, message:'请输入坐标集合', trigger: 'blur' } + ], + value: [[0, 0], [100, 100], [100, 200]], + description: '每个元素是一个横纵坐标的数组' + }, + { + prop: 'smooth', + label: '圆滑程度', + type: types.Number, + min: 0, + max: 1, + step: 0.05, + precision: 2, + rules:[ + { required: true, message:'请输入坐标集合', trigger: 'blur' } + ], + value: 10, + description: '取值范围为 0 到 1 之间的数字，0 表示不圆滑' + } ] } }, @@ -264,8 +312,8 @@ export const elementConst = { name:'正多边形', formList: { style: [ - ...form2ShapeStyle, - { + ...form2ShapeStyle, + { prop: 'fill', label: '填充样式', type: types.Color, @@ -278,53 +326,53 @@ export const elementConst = { ], shape:[ { - prop: 'x', - label: '圆心横坐标', - type: types.Number, - precision: 0, - step:1, + prop: 'x', + label: '圆心横坐标', + type: types.Number, + precision: 0, + step:1, rules:[ { required: true, message:'请输入圆心横坐标', trigger: 'blur' } ], value: 0, description: '圆心横坐标' - }, - { - prop: 'y', - label: '圆心纵坐标', - type: types.Number, - precision: 0, - step:1, + }, + { + prop: 'y', + label: '圆心纵坐标', + type: types.Number, + precision: 0, + step:1, rules:[ { required: true, message:'请输入圆心纵坐标', trigger: 'blur' } ], value: 0, description: '圆心纵坐标' - }, - { - prop: 'r', - label: '半径', - type: types.Number, - precision: 0, - step:1, + }, + { + prop: 'r', + label: '半径', + type: types.Number, + precision: 0, + step:1, rules:[ { required: true, message:'请输入半径', trigger: 'blur' } ], value: 40, description: '半径' - }, - { - prop: 'n', - label: '边数', - type: types.Number, - precision: 0, - step:1, + }, + { + prop: 'n', + label: '边数', + type: types.Number, + precision: 0, + step:1, rules:[ { required: true, message:'请输入边数', trigger: 'blur' } ], value: 5, description: '边数' - } + } ] } }, @@ -333,8 +381,8 @@ export const elementConst = { name:'椭圆', formList: { style: [ - ...form2ShapeStyle, - { + ...form2ShapeStyle, + { prop: 'fill', label: '填充样式', type: types.Color, @@ -347,53 +395,53 @@ export const elementConst = { ], shape:[ { - prop: 'cx', - label: '圆心横坐标', - type: types.Number, - precision: 0, - step:1, + 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, + }, + { + prop: 'cy', + label: '圆心纵坐标', + type: types.Number, + precision: 0, + step:1, rules:[ { required: true, message:'请输入圆心纵坐标', trigger: 'blur' } ], value: 0, description: '圆心纵坐标' - }, - { - prop: 'rx', - label: '横向半径', - type: types.Number, - precision: 0, - step:1, + }, + { + prop: 'rx', + label: '横向半径', + type: types.Number, + precision: 0, + step:1, rules:[ { required: true, message:'请输入横向半径', trigger: 'blur' } ], value: 50, description: '横向半径' - }, - { - prop: 'ry', - label: '纵向半径', - type: types.Number, - precision: 0, - step:1, + }, + { + prop: 'ry', + label: '纵向半径', + type: types.Number, + precision: 0, + step:1, rules:[ { required: true, message:'请输入纵向半径', trigger: 'blur' } ], value: 30, description: '纵向半径' - } + } ] } }, @@ -406,70 +454,70 @@ export const elementConst = { ], shape: [ { - prop: 'cx', - label: '圆心横坐标', - type: types.Number, - precision: 0, - step:1, + 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, + }, + { + prop: 'cy', + label: '圆心纵坐标', + type: types.Number, + precision: 0, + step:1, rules:[ { required: true, message:'请输入圆心纵坐标', trigger: 'blur' } ], value: 0, description: '圆心纵坐标' - }, - { - prop: 'r', - label: '半径', - type: types.Number, - precision: 0, - step:1, + }, + { + prop: 'r', + label: '半径', + type: types.Number, + precision: 0, + step:1, rules:[ { required: true, message:'请输入半径', trigger: 'blur' } ], value: 50, description: '半径' - }, - { - prop: 'startAngle', - label: '起始弧度', - type: types.Number, - precision: 0, - step:1, - min: 0, - max: Math.PI*2, + }, + { + prop: 'startAngle', + label: '起始弧度', + type: types.Number, + precision: 0, + step:1, + min: 0, + max: Math.PI * 2, rules:[ { required: true, message:'请输入起始弧度', trigger: 'blur' } ], value: 0, description: '起始弧度' - }, - { - prop: 'endAngle', - label: '终止弧度', - type: types.Number, - precision: 0, - step:1, - min: 0, - max: Math.PI*2, + }, + { + prop: 'endAngle', + label: '终止弧度', + type: types.Number, + precision: 0, + step:1, + min: 0, + max: Math.PI * 2, rules:[ { required: true, message:'请输入终止弧度', trigger: 'blur' } ], value: Math.PI, description: '终止弧度' - }, - { + }, + { prop: 'clockwise', label: '顺时针方向', type: types.Boolean, @@ -488,7 +536,7 @@ export const elementConst = { formList: { style: [ ...form2ShapeStyle, - { + { prop: 'fill', label: '填充样式', type: types.Color, @@ -501,82 +549,82 @@ export const elementConst = { ], shape: [ { - prop: 'cx', - label: '圆心横坐标', - type: types.Number, - precision: 0, - step:1, + 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, + }, + { + prop: 'cy', + label: '圆心纵坐标', + type: types.Number, + precision: 0, + step:1, rules:[ { required: true, message:'请输入圆心纵坐标', trigger: 'blur' } ], value: 0, description: '圆心纵坐标' - }, - { - prop: 'r', - label: '半径', - type: types.Number, - precision: 0, - step:1, + }, + { + prop: 'r', + label: '半径', + type: types.Number, + precision: 0, + step:1, rules:[ { required: true, message:'请输入半径', trigger: 'blur' } ], value: 50, description: '半径' - }, - { - prop: 'r0', - label: '内半径', - type: types.Number, - precision: 0, - step:1, + }, + { + prop: 'r0', + label: '内半径', + type: types.Number, + precision: 0, + step:1, rules:[ { required: true, message:'请输入内半径', trigger: 'blur' } ], value: 30, description: '内半径' - }, - { - prop: 'startAngle', - label: '起始弧度', - type: types.Number, - precision: 0, - step:1, - min: 0, - max: Math.PI*2, + }, + { + prop: 'startAngle', + label: '起始弧度', + type: types.Number, + precision: 0, + step:1, + min: 0, + max: Math.PI * 2, rules:[ { required: true, message:'请输入起始弧度', trigger: 'blur' } ], value: 0, description: '起始弧度' - }, - { - prop: 'endAngle', - label: '终止弧度', - type: types.Number, - precision: 0, - step:1, - min: 0, - max: Math.PI*2, + }, + { + prop: 'endAngle', + label: '终止弧度', + type: types.Number, + precision: 0, + step:1, + min: 0, + max: Math.PI * 2, rules:[ { required: true, message:'请输入终止弧度', trigger: 'blur' } ], value: Math.PI, description: '终止弧度' - }, - { + }, + { prop: 'clockwise', label: '顺时针方向', type: types.Boolean, @@ -594,8 +642,8 @@ export const elementConst = { name:'心形', formList: { style: [ - ...form2ShapeStyle, - { + ...form2ShapeStyle, + { prop: 'fill', label: '填充样式', type: types.Color, @@ -608,53 +656,53 @@ export const elementConst = { ], shape: [ { - prop: 'cx', - label: '圆心横坐标', - type: types.Number, - precision: 0, - step:1, + 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, + }, + { + prop: 'cy', + label: '圆心纵坐标', + type: types.Number, + precision: 0, + step:1, rules:[ { required: true, message:'请输入圆心纵坐标', trigger: 'blur' } ], value: 0, description: '圆心纵坐标' - }, - { - prop: 'width', - label: '宽度', - type: types.Number, - precision: 0, - step:1, + }, + { + prop: 'width', + label: '宽度', + type: types.Number, + precision: 0, + step:1, rules:[ { required: true, message:'请输入宽度', trigger: 'blur' } ], value: 50, description: '宽度' - }, - { - prop: 'height', - label: '高度', - type: types.Number, - precision: 0, - step:1, + }, + { + prop: 'height', + label: '高度', + type: types.Number, + precision: 0, + step:1, rules:[ { required: true, message:'请输入高度', trigger: 'blur' } ], value: 50, description: '高度' - } + } ] } }, @@ -663,8 +711,8 @@ export const elementConst = { name:'水滴', formList: { style: [ - ...form2ShapeStyle, - { + ...form2ShapeStyle, + { prop: 'fill', label: '填充样式', type: types.Color, @@ -677,52 +725,52 @@ export const elementConst = { ], shape: [ { - prop: 'cx', - label: '圆心横坐标', - type: types.Number, - precision: 0, - step:1, + 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, + prop: 'cy', + label: '圆心纵坐标', + type: types.Number, + precision: 0, + step:1, rules:[ { required: true, message:'请输入圆心纵坐标', trigger: 'blur' } ], value: 0, description: '圆心纵坐标' - }, - { - prop: 'width', - label: '宽度', - type: types.Number, - precision: 0, - step:1, + }, + { + prop: 'width', + label: '宽度', + type: types.Number, + precision: 0, + step:1, rules:[ { required: true, message:'请输入宽度', trigger: 'blur' } ], value: 50, description: '宽度' - }, - { - prop: 'height', - label: '高度', - type: types.Number, - precision: 0, - step:1, + }, + { + prop: 'height', + label: '高度', + type: types.Number, + precision: 0, + step:1, rules:[ { required: true, message:'请输入高度', trigger: 'blur' } ], value: 50, description: '高度' - } + } ] } } diff --git a/src/iscs_new/core/form/types.js b/src/iscs_new/core/form/types.js index 2e8e91d3c..6a8fd3fdb 100644 --- a/src/iscs_new/core/form/types.js +++ b/src/iscs_new/core/form/types.js @@ -1,10 +1,10 @@ export default { - String: 'String', - Number: 'Number', - Select: 'Select', - Boolean: 'Boolean', - Color: 'Color', - Point: 'Point', - Points: 'Points', - NumberArray: 'NumberArray' -} + String: 'String', + Number: 'Number', + Select: 'Select', + Boolean: 'Boolean', + Color: 'Color', + Point: 'Point', + Points: 'Points', + NumberArray: 'NumberArray' +}; diff --git a/src/views/iscs_new/components/dataForm.vue b/src/views/iscs_new/components/dataForm.vue index c04397a85..f5d0d639d 100644 --- a/src/views/iscs_new/components/dataForm.vue +++ b/src/views/iscs_new/components/dataForm.vue @@ -1,5 +1,5 @@ - + @@ -92,6 +112,20 @@ export default { methods: { checkFieldType(field, type) { return field.type === type; + }, + changeNumber(type, index, form, prop) { + if (form[prop][index][type] == undefined || parseFloat(form[prop][index][type])) { + const newForm = Object.assign([], form[prop]); + newForm[index][type] = parseFloat(form[prop][index][type]) || 0; + this.$set(form, prop, newForm); + } + }, + addPoint(index, form, prop) { + const data = [0, 0]; + form[prop].splice(index + 1, 0, data); + }, + delPoint(index, form, prop) { + form[prop].splice(index, 1); } } }; @@ -101,5 +135,13 @@ export default { .styleGroup{border: 1px #ccc solid;padding:25px 20px 20px 20px;position: relative;margin-bottom: 30px;} .formName .el-form-item__label {font-size:14px;} .formName.el-form-item {margin-bottom:25px} + .point-section {float:left;display: inline-block;} + .pointSplice{display: inline-block;margin-left: 4px;margin-right:4px;line-height: 28px;font-size:14px} .styleGroupName{font-size: 14px;position: absolute;max-width: 100px;height: 20px;background: #fff;left: 10px;top: -9px;text-align: center;padding: 0px 10px;} + .point-button {width:28px;height:28px;display:inline-block;margin-left:5px;text-align:center;padding:0px;} + // align-items: center;justify-content: center; + + diff --git a/src/views/iscs_new/iscsDraw/index.vue b/src/views/iscs_new/iscsDraw/index.vue index e8e94ad8c..be0a60f57 100644 --- a/src/views/iscs_new/iscsDraw/index.vue +++ b/src/views/iscs_new/iscsDraw/index.vue @@ -22,7 +22,7 @@
添加 - 修改 + 修改 删除 取消
@@ -116,43 +116,43 @@ export default { handleTabClick() { }, - onSubmit(){ - let that=this; - that.$refs['dataform'+that.enabledTab][0].$refs['form'].validate((valid) => { + onSubmit() { + const that = this; + that.$refs['dataform' + that.enabledTab][0].$refs['form'].validate((valid) => { if (valid) { - let formModel=that.$refs['dataform'+that.enabledTab][0].formModel; - let newModel=Object.assign({},formModel.base); - newModel.type = that.enabledTab; - newModel.code = utils.getUID() - newModel.position = [0, 0]; - newModel.scale = [1, 1]; - newModel.style=Object.assign({},formModel.style); - newModel.shape=Object.assign({},formModel.shape); - this.$refs.iscsCanvas.doAction([{model: newModel, action: {shapeType: shapeType.Element, order: orders.ADD}}]); + const formModel = that.$refs['dataform' + that.enabledTab][0].formModel; + const newModel = Object.assign({}, formModel.base); + newModel.type = that.enabledTab; + newModel.code = utils.getUID(); + newModel.position = [0, 0]; + newModel.scale = [1, 1]; + newModel.style = Object.assign({}, formModel.style); + newModel.shape = Object.assign({}, formModel.shape); + this.$refs.iscsCanvas.doAction([{model: newModel, action: {shapeType: shapeType.Element, order: orders.ADD}}]); } - }); + }); }, - onModify() { - let that=this; - that.$refs['dataform'+that.enabledTab][0].$refs['form'].validate((valid) => { + onModify() { + const that = this; + that.$refs['dataform' + that.enabledTab][0].$refs['form'].validate((valid) => { if (valid) { - let model = that.$refs['dataform'+that.enabledTab][0].formModel; - this.$refs.iscsCanvas.doAction([{model, action: {shapeType: shapeType.Element, order: orders.UPDATE}}]); + const model = that.$refs['dataform' + that.enabledTab][0].formModel; + this.$refs.iscsCanvas.doAction([{model, action: {shapeType: shapeType.Element, order: orders.UPDATE}}]); } - }); - }, - onDelete(){ - let that=this; - that.$refs['dataform'+that.enabledTab][0].$refs['form'].validate((valid) => { - if (valid) { - let model = that.$refs['dataform'+that.enabledTab][0].formModel; - this.$refs.iscsCanvas.doAction([{model, action: {shapeType: shapeType.Element, order: orders.DELETE}}]); - } - }); + }); }, - initPage(){ + onDelete() { + const that = this; + that.$refs['dataform' + that.enabledTab][0].$refs['form'].validate((valid) => { + if (valid) { + const model = that.$refs['dataform' + that.enabledTab][0].formModel; + this.$refs.iscsCanvas.doAction([{model, action: {shapeType: shapeType.Element, order: orders.DELETE}}]); + } + }); + }, + initPage() { - }, + } } }; @@ -182,11 +182,11 @@ export default { } .right-card{ - width: 470px; + width: 550px; height: 100%; position: absolute; right: 0; - transform: translateX(470px); + transform: translateX(550px); transition: all 0.5s; background: #fff; z-index: 9;