123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229 |
- <template>
- <div class='edit-box'>
- <el-form v-if='form.devArr.length' class='form' ref='form' :model='form' label-width='140px'>
- <div class='dev-know' v-for='(item,index) in form.devArr' :key='index'>
- <el-form-item
- v-if='devFlag'
- label='设备标识'
- :prop='"devArr." + index + ".EquipmentMark"'
- :rules='{
- required: true, message: "设备标识不能为空", trigger: "blur"
- }'
- >
- <el-input v-model='item.EquipmentMark'></el-input>
- </el-form-item>
- <p class='strsub'>
- 截取 第
- <el-input-number v-model='item.SplitStart' :min='1' :max='10' label='描述文字'></el-input-number>位 - 第
- <el-input-number v-model='item.SplitEnd' :min='1' :max='10' label='描述文字'></el-input-number>位(从1开始)
- </p>
- <i v-if='index > 0' class='el-icon-minus del-sub-icon' @click='delDev(index)'></i>
- </div>
- <div class='add-btn-box'>
- <el-button type='primary' @click='addDevs'>+添加设备标识</el-button>
- </div>
- <p class='tranf-box'>
- 需要将截取值转换为标准值
- <el-switch v-model='tranfVal' style='margin-left:12px' active-color='#13ce66' inactive-color='#ff4949'></el-switch>
- </p>
- <ul class='point-box'>
- <span class='left'>如果</span>
- <span class='right'>那么</span>
- <li v-for='(item,index) in form.pointArr' :key='index'>
- <p>
- <el-form-item
- label='原始点位值'
- :prop='"pointArr." + index + ".from"'
- :rules='{
- required: tranfVal?true: false, message: "不能为空", trigger: "blur"
- }'
- >
- <el-input v-model='item.from' :disabled='!tranfVal'></el-input>
- </el-form-item>
- </p>
- <p>
- <el-form-item
- label='转换为标准值'
- :prop='"pointArr." + index + ".to"'
- :rules='{
- required: tranfVal?true: false, message: "不能为空", trigger: "blur"
- }'
- >
- <el-input v-model='item.to' :disabled='!tranfVal'></el-input>
- </el-form-item>
- <i v-if='index > 0' class='el-icon-delete delete' @click='deleteRow(index)'></i>
- </p>
- </li>
- </ul>
- </el-form>
- <div class='add-btn-box'>
- <el-button type='primary' @click='addRules' :disabled='!tranfVal'>+添加新转换规则</el-button>
- </div>
- </div>
- </template>
- <script>
- export default {
- name: 'step3_auto-handle',
- data() {
- return {
- form: {
- devArr: [
- {
- EquipmentMark: '',
- SplitStart: 1,
- SplitEnd: 1
- }
- ],
- pointArr: []
- },
- tranfVal: false
- }
- },
- props: {
- devFlag: {
- default: true,
- type: Boolean
- },
- splitHandleShow: {}
- },
- methods: {
- getForm(cb) {
- this.$refs['form'].validate(valid => {
- if (valid) {
- this.form.tranfVal = this.tranfVal
- cb(this.form)
- } else {
- cb(false)
- }
- })
- },
- addDevs() {
- this.form.devArr.push(this.newDevs())
- },
- newDevs() {
- return {
- EquipmentMark: '',
- SplitStart: 1,
- SplitEnd: 1
- }
- },
- delDev(index) {
- this.form.devArr.splice(index, 1)
- },
- addRules() {
- this.form.pointArr.push(this.newRules())
- },
- newRules() {
- return {
- from: '',
- to: ''
- }
- },
- deleteRow(index) {
- if (!this.tranfVal) {
- return false
- }
- this.form.pointArr.splice(index, 1)
- },
- init() {
- this.form.pointArr = [
- {
- from: '',
- to: ''
- }
- ]
- }
- },
- watch: {
- splitHandleShow: {
- immediate: true,
- deep: true,
- handler(val) {
- if (val) {
- this.form = val
- // console.log(this.form)
- } else {
- this.init()
- }
- }
- }
- }
- }
- </script>
- <style scoped lang='scss'>
- .edit-box {
- .form {
- .dev-know {
- margin-top: 5px;
- background: #e6e6e6;
- padding: 5px 50px 5px 0;
- width: 470px;
- position: relative;
- .del-sub-icon {
- position: absolute;
- right: 15px;
- top: 50px;
- cursor: pointer;
- }
- .strsub {
- padding-left: 20px;
- }
- }
- }
- .tranf-box {
- height: 50px;
- line-height: 80px;
- }
- .point-box {
- margin-top: 45px;
- position: relative;
- width: 500px;
- .left,
- .right {
- font-size: 20px;
- background: #fff;
- }
- .left {
- position: absolute;
- top: -35px;
- left: 23px;
- }
- .right {
- position: absolute;
- top: -35px;
- left: 260px;
- margin: 0;
- padding: 0;
- }
- li {
- display: flex;
- justify-content: space-between;
- margin-top: 5px;
- position: relative;
- p {
- .name {
- padding-left: 40px;
- }
- .value {
- margin-left: 10px;
- display: inline-block;
- width: 80px;
- }
- }
- .delete {
- top: 5px;
- right: -20px;
- cursor: pointer;
- position: absolute;
- z-index: 99999;
- }
- }
- }
- .add-btn-box {
- margin-top: 20px;
- text-align: center;
- }
- }
- </style>
|