页面新增modal

ebc-middle-platform/src/modules/authorization/menu-authorization.vue

@@ -31,14 +31,14 @@
          <t-tree ref="leftTree" :multiple="true"
                  :with-ancestors="true"
                  :with-descendants="true"
                  :node-data="tableLeft.data" @select="changeTree"
                  :node-data="tableLeft.data" @select="changeLeftTree"
          ></t-tree>
        </div>
        <div slot="listBodyRight" slot-scope="tableRight">
          <t-tree :multiple="true"
                  :with-ancestors="true"
                  :with-descendants="true"
                  :node-data="tableRight.data" @select="changeTree"
                  :node-data="tableRight.data" @select="changeRightTree"
          ></t-tree>
        </div>
      </t-transfer>
@@ -158,7 +158,7 @@ export default {
      }
      console.log(this.dataTable)
    },
    changeTree(ids) {
    changeLeftTree(ids) {
      console.log(ids)
      var transferId = []
      ids.forEach(id => {
@@ -210,7 +210,7 @@ export default {
              })
            }
          } else {
            if (!includeFlag) {
            if (includeFlag) {
              var includeIndex = 0
              this.dataTable.forEach((e, index) => {
                if (e.id === id) {
@@ -239,6 +239,9 @@ export default {
      console.log(transferId)
      this.targetKeysTable = transferId
    },
    changeRightTree(ids) {
      console.log(ids)
    },
    onPagerChange(page) {
    },

ebc-middle-platform/src/modules/system-management/equipment-management.scss

@@ -39,4 +39,8 @@
  .table-pager{
    margin: 20px auto;
  }
}
.submit-button{
  background-color: #147BD1;
  color: #ffffff;
}

ebc-middle-platform/src/modules/system-management/equipment-management.vue

@@ -40,7 +40,7 @@
        <div class="btns">
          <t-button color="success" icon="upload-outline" @click="onReset">导入</t-button>
          <t-button color="success" icon="download-outline" @click="onReset">下载模板</t-button>
          <t-button color="success" icon="plus-outline" @click="toExport">新增</t-button>
          <t-button color="success" icon="plus-outline" @click="addEquipment">新增</t-button>
        </div>
      </div>
    </div>
@@ -72,6 +72,33 @@
               @on-change="onPagerChange">
      </t-pager>
    </div>
    <t-modal :visibled.sync="modal" title="新增设备" >
      <t-form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80" label-position="left">
        <t-form-item label="设备类型" prop="type">
          <t-select v-model="formValidate.type" label-in-value placeholder="请选择设备类型">
            <t-option value="1">风机</t-option>
            <t-option value="2">升压站</t-option>
            <t-option value="3">测风塔</t-option>
          </t-select>
        </t-form-item>
        <t-form-item label="设备名称" prop="name">
          <t-input v-model="formValidate.name" placeholder="请输入风机名称"></t-input>
        </t-form-item>
        <t-form-item label="设备编号" prop="number">
          <t-input v-model="formValidate.number" placeholder="请输入字母、数字、中划线、下划线、#"></t-input>
        </t-form-item>
        <t-form-item label="经度" prop="lng">
          <t-input v-model="formValidate.lng" placeholder="请输入数字"></t-input>
        </t-form-item>
        <t-form-item label="纬度" prop="lat">
          <t-input v-model="formValidate.lat" placeholder="请输入数字"></t-input>
        </t-form-item>
      </t-form>
      <div slot="footer">
        <t-button @click="cancel">取消</t-button>
        <t-button class="submit-button" @click="submit">保存</t-button>
      </div>
    </t-modal>
  </div>
</template>
<script>
@@ -113,7 +140,93 @@ export default {
        type: '',
        alarmPerson: ''
      },
      rangeDate: ''
      rangeDate: '',
      modal: false,
      formValidate: {
        type: '',
        name: '',
        number: '',
        lng: '',
        lat: ''
      },
      ruleValidate: {
        type: [{
          required: true,
          message: '设备类型不能为空',
          trigger: 'blur'
        }],
        name: [
          {
            required: true,
            message: '设备名称不能为空',
            trigger: 'blur'
          },
          {
            message: '设备名称重复',
            trigger: 'blur',
            validator: function(rule, value, callback) {
              // TODO 判断编号重复
              if (false) {
                callback(rule.message)
              }
            }
          }
        ],
        number: [
          {
            required: true,
            message: '编号不能为空',
            trigger: 'blur'
          },
          {
            message: '请输入字母、数字、中划线、下划线、#',
            trigger: 'blur',
            validator: function(rule, value, callback) {
              if (!/^[a-zA-Z0-9-_#]+$/.test(value)) {
                callback(rule.message)
              } else {
                // TODO 判断编号重复
                if (false) {
                  rule.message = '编号重复'
                  callback(rule.message)
                }
              }
            }
          }
        ],
        lng: [
          {
            required: true,
            message: '经度不能为空',
            trigger: 'blur'
          },
          {
            message: '请输入数字',
            trigger: 'blur',
            validator: function(rule, value, callback) {
              if (isNaN(value)) {
                callback(rule.message)
              }
            }
          }
        ],
        lat: [
          {
            required: true,
            message: '经度不能为空',
            trigger: 'blur'
          },
          {
            message: '请输入数字',
            trigger: 'blur',
            validator: function(rule, value, callback) {
              if (isNaN(value)) {
                callback(rule.message)
              }
            }
          }
        ]
      }
    }
  },
  mounted() {
@@ -138,6 +251,21 @@ export default {
    },
    onSizeChange(number) {
    },
    cancel() {
      this.modal = false
    },
    submit() {
      this.$refs.formValidate.validate(valid => {
        if (valid) {
          this.$Message.success('提交成功!')
        } else {
          this.$Message.danger('表单验证失败!')
        }
      })
    },
    addEquipment() {
      this.modal = true
    }
  }
}

ebc-middle-platform/src/modules/system-management/map-mark.scss

@@ -39,4 +39,56 @@
  .table-pager{
    margin: 20px auto;
  }
}
.modal{
  .top{
    display: flex;
    >div{
      display: flex; 
      margin: 0 20px 16px 0;    
      line-height: 2;
      .label-content{
        display: flex; 
        margin: 0 20px 16px 0;    
        line-height: 2;
      }
      .input-rule{
        flex: 1;
        margin:0 0 0 20px;
        .dropdown{
          width: 100%
        }
      }
    }
  }
  .content{
    display: flex;
    .left{
      width: 430px;
      .header{
        display: flex;
        justify-content: space-between;
        padding-right: 10px;
        .import-down{
          display: flex;
        }
      }
      th{
        padding: 0;
      }
      .explain{
        margin-top: 20px;
        font-size: 10px;
        color: #000000;
        padding-right: 10px;
        .title{
          color: #4C8DDA;
        }
      }
    }
    .right{
      width: 1200px;
      height: 700px;
    }
  }
}

ebc-middle-platform/src/modules/system-management/map-mark.vue

@@ -16,10 +16,10 @@
          </div>
        </div>
        <div class="btns">
          <t-button color="success" icon="plus-outline" @click="onReset">考勤区域</t-button>
          <t-button color="success" icon="plus-outline" @click="onReset">作业区域</t-button>
          <t-button color="success" icon="plus-outline" @click="onSearch">电子围栏</t-button>
          <t-button color="success" icon="plus-outline" @click="toExport">定点</t-button>
          <t-button color="success" icon="plus-outline" @click="markModal(1)">考勤区域</t-button>
          <t-button color="success" icon="plus-outline" @click="markModal(2)">作业区域</t-button>
          <t-button color="success" icon="plus-outline" @click="markModal(3)">电子围栏</t-button>
          <t-button color="success" icon="plus-outline" @click="markModal(4)">定点</t-button>
        </div>
      </div>
    </div>
@@ -49,6 +49,57 @@
               @on-change="onPagerChange">
      </t-pager>
    </div>
    <t-modal :visibled.sync="addMark" :ok="submitMark" :cancel="cancel" class="modal" title="新增标记" ok-text="保存" width="1500px" >
      <div class="top">
        <div>
          <div class="label">标记类型:</div>
          <div class="input-rule">
            <t-select v-model="markType" width="200" placeholder="请输入...">
              <t-option v-for="item in markTypes" :key="item.id" :value="item.id">{{ item.type }}</t-option>
            </t-select>
          </div>
        </div>
        <div>
          <div class="label">标记名称:</div>
          <div class="input-rule">
            <t-input v-model="markName" placeholder="请输入..." style="width: 200px"></t-input>
          </div>
        </div>
      </div>
      <div class="content">
        <div class="left">
          <div class="header">
            <div>坐标列表</div>
            <div class="import-down">
              <a href="javascript:void(0)" size="sm" @click="handleClick(scope.row)">导入kml</a>
              <span class="mod-line">|</span>
              <a href="javascript:void(0)" size="sm" @click="handleClick(scope.row)">下载模板</a>
            </div>
          </div>
          <div>
            <t-table :data="modalData" size="sm" height="500">
              <t-table-column align="center" type="index" label="坐标名称"></t-table-column>
              <t-table-column align="center" prop="lng" label="经度"></t-table-column>
              <t-table-column align="center" prop="lat" label="纬度"></t-table-column>
            </t-table>
          </div>
          <div class="explain">
            <div class="title">说明</div>
            <div>
              1、可在地图中点击绘制对应区域
            </div>
            <div>
              2、可编辑坐标列表中的经纬度值调整对应点坐标，对应点在地图中处于选中态
            </div>
            <div>
              3、kml导入将清空已绘制信息
            </div>
          </div>
        </div>
        <div id="modalMap" class="right">
        </div>
      </div>
    </t-modal>
  </div>
</template>
<script>
@@ -84,10 +135,57 @@ export default {
        type: '',
        alarmPerson: ''
      },
      rangeDate: ''
      rangeDate: '',
      addMark: false,
      markName: '',
      markType: 1,
      markTypes: [
        {
          id: 1,
          type: '考勤区域'
        },
        {
          id: 2,
          type: '作业区域'
        },
        {
          id: 3,
          type: '电子围栏'
        },
        {
          id: 4,
          type: '定点'
        }
      ],
      modalData: [],
      map: null,
      polygonDrawer: null
    }
  },
  mounted() {
    this.map = new Ai.Map('modalMap', {
      ak: 'MTYwMDkMTAwMU1UWXdNRGt4T0RnNU5UVXlNaU14TnpRdw__',
      center: [39.915599, 116.406568],
      zoom: 5
    })
    var maplayer = null
    maplayer = Ai.TileLayer('http://192.168.74.189:9999/tdtvector')
    this.map.addLayer(maplayer)
    var options = {
      guideLayers: []// 导向（吸附）图层对象，当距离相隔很近的时候会与导向对象重合
    }
    this.polygonDrawer = Ai.DrawPolygon(this.map, options)// 初始化多边形绘制工具
    this.polygonDrawer.enable()// 激活多边形绘制工具
    this.map.on(AiDrawEvent.CREATED, (e) => {
      console.log(1)
      this.layer = this.polygonDrawer.polygon(e)// 获取多边形信息
      // console.log(this.polygonDrawer.getPoints())
      this.modalData = this.layer._latlngs[0]
      this.polygonDrawer.editing(this.layer)
      this.polygonDrawer.disable()
      this.map.addLayer(this.layer)
    })
  },
  methods: {
    onChange(value) {
@@ -102,6 +200,23 @@ export default {
    toExport() {
    },
    markModal(typeId) {
      this.markType = typeId
      this.addMark = true
      this.polygonDrawer.enable()
    },
    submitMark() {
      console.log(this.layer._latlngs[0])
      this.map.removeLayer(this.layer)
      this.polygonDrawer.disable()
      this.modalData = []
    },
    cancel() {
      console.log(this.layer)
      this.map.removeLayer(this.layer)
      this.polygonDrawer.disable()
      this.modalData = []
    },
    onPagerChange(page) {
    },

ebc-middle-platform/src/modules/system-management/terminal-management.scss

@@ -83,4 +83,8 @@
    border-radius: 5px;
    background-color: #E8F8E8;
  }
}
.submit-button{
  background-color: #147BD1;
  color: #ffffff;
}

ebc-middle-platform/src/modules/system-management/terminal-management.vue

@@ -27,6 +27,11 @@
          <t-button color="secondary" icon="unlock-outline" @click="toExport">解绑用户</t-button>
          <t-button color="secondary" icon="delete-outline" @click="toExport">删除</t-button>
        </div>
        <div class="btns">
          <t-button color="success" icon="upload-outline" @click="onReset">导入</t-button>
          <t-button color="success" icon="download-outline" @click="onReset">下载模板</t-button>
          <t-button color="success" icon="plus-outline" @click="addTerminal">新增</t-button>
        </div>
      </div>
    </div>
    <div>
@@ -71,6 +76,25 @@
               @on-change="onPagerChange">
      </t-pager>
    </div>
    <t-modal :visibled.sync="modal" title="新增终端" >
      <t-form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80" label-position="left">
        <t-form-item label="终端编号" prop="number">
          <t-input v-model="formValidate.number" placeholder="请输入字母、数字、中划线、下划线、#"></t-input>
        </t-form-item>
        <t-form-item label="备注" prop="desc">
          <t-input
            v-model="formValidate.desc"
            :autosize="{minRows: 2,maxRows: 5}"
            type="textarea"
            placeholder="请输入..."
          ></t-input>
        </t-form-item>
      </t-form>
      <div slot="footer">
        <t-button @click="cancel">取消</t-button>
        <t-button class="submit-button" @click="submit">保存</t-button>
      </div>
    </t-modal>
  </div>
</template>
<script>
@@ -117,7 +141,36 @@ export default {
        type: '',
        alarmPerson: ''
      },
      rangeDate: ''
      rangeDate: '',
      modal: false,
      formValidate: {
        number: '',
        desc: ''
      },
      ruleValidate: {
        number: [
          {
            required: true,
            message: '编号不能为空',
            trigger: 'blur'
          },
          {
            message: '请输入字母、数字、中划线、下划线、#',
            trigger: 'blur',
            validator: function(rule, value, callback) {
              if (!/^[a-zA-Z0-9-_#]+$/.test(value)) {
                callback(rule.message)
              } else {
                // TODO 判断编号重复
                if (true) {
                  rule.message = '编号重复'
                  callback(rule.message)
                }
              }
            }
          }
        ]
      }
    }
  },
  mounted() {
@@ -147,6 +200,21 @@ export default {
    },
    onSizeChange(number) {
    },
    addTerminal() {
      this.modal = true
    },
    cancel() {
      this.modal = false
    },
    submit() {
      this.$refs.formValidate.validate(valid => {
        if (valid) {
          this.$Message.success('提交成功!')
        } else {
          this.$Message.danger('表单验证失败!')
        }
      })
    }
  }
}

ebc-middle-platform/src/modules/system-management/user-management.scss

@@ -39,4 +39,8 @@
  .table-pager{
    margin: 20px auto;
  }
}
.submit-button{
  background-color: #147BD1;
  color: #ffffff;
}

ebc-middle-platform/src/modules/system-management/user-management.vue

@@ -40,7 +40,7 @@
        <div class="btns">
          <t-button color="success" icon="upload-outline" @click="onReset">导入</t-button>
          <t-button color="success" icon="download-outline" @click="onReset">下载模板</t-button>
          <t-button color="success" icon="plus-outline" @click="toExport">新增</t-button>
          <t-button color="success" icon="plus-outline" @click="addUser">新增</t-button>
        </div>
      </div>
    </div>
@@ -78,6 +78,40 @@
               @on-change="onPagerChange">
      </t-pager>
    </div>
    <t-modal :visibled.sync="modal" title="新增设备" >
      <t-form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80" label-position="left">
        <t-form-item label="姓名" prop="name">
          <t-input v-model="formValidate.name" placeholder="请输入风机名称"></t-input>
        </t-form-item>
        <t-form-item label="员工编号" prop="number">
          <t-input v-model="formValidate.number" placeholder="请输入字母、数字、中划线、下划线、#"></t-input>
        </t-form-item>
        <t-form-item label="部门" prop="department">
          <t-select v-model="formValidate.department" label-in-value placeholder="请选择设备类型">
            <t-option value="1">部门1</t-option>
            <t-option value="2">部门2</t-option>
            <t-option value="3">部门3</t-option>
          </t-select>
        </t-form-item>
        <t-form-item label="职务" prop="job">
          <t-select v-model="formValidate.job" label-in-value placeholder="请选择设备类型">
            <t-option value="1">职务1</t-option>
            <t-option value="2">职务2</t-option>
            <t-option value="3">职务3</t-option>
          </t-select>
        </t-form-item>
        <t-form-item label="年龄" prop="age">
          <t-input v-model="formValidate.age" placeholder="请输入数字"></t-input>
        </t-form-item>
        <t-form-item label="手机" prop="phone">
          <t-input v-model="formValidate.phone" placeholder="请输入数字"></t-input>
        </t-form-item>
      </t-form>
      <div slot="footer">
        <t-button @click="cancel">取消</t-button>
        <t-button class="submit-button" @click="submit">保存</t-button>
      </div>
    </t-modal>
  </div>
</template>
<script>
@@ -125,7 +159,90 @@ export default {
        type: '',
        alarmPerson: ''
      },
      rangeDate: ''
      rangeDate: '',
      modal: false,
      formValidate: {
        name: '',
        number: '',
        department: '',
        job: '',
        age: '',
        phone: ''
      },
      ruleValidate: {
        name: [
          {
            required: true,
            message: '姓名不能为空',
            trigger: 'blur'
          }
        ],
        number: [
          {
            required: true,
            message: '员工编号不能为空',
            trigger: 'blur'
          },
          {
            message: '员工编号重复',
            trigger: 'blur',
            validator: function(rule, value, callback) {
              // TODO 判断编号重复
              if (false) {
                callback(rule.message)
              }
            }
          }
        ],
        department: [
          {
            required: true,
            message: '部门不能为空',
            trigger: 'blur'
          }
        ],
        job: [
          {
            required: true,
            message: '职务不能为空',
            trigger: 'blur'
          }
        ],
        age: [
          {
            required: true,
            message: '年龄不能为空',
            trigger: 'blur'
          },
          {
            message: '年龄不正确',
            trigger: 'blur',
            validator: function(rule, value, callback) {
              let pattern = /^(([0-9]|[1-9][1-9]|1[0-7][0-9])(\\.[0-9]+)?|180)$/
              if (!pattern.test(value)) {
                callback(rule.message)
              }
            }
          }
        ],
        phone: [
          {
            required: true,
            message: '手机不能为空',
            trigger: 'blur'
          },
          {
            message: '手机不正确',
            trigger: 'blur',
            validator: function(rule, value, callback) {
              let pattern = /^1[3456789]\d{9}$/
              if (!pattern.test(value)) {
                callback(rule.message)
              }
            }
          }
        ]
      }
    }
  },
  mounted() {
@@ -150,6 +267,21 @@ export default {
    },
    onSizeChange(number) {
    },
    cancel() {
      this.modal = false
    },
    submit() {
      this.$refs.formValidate.validate(valid => {
        if (valid) {
          this.$Message.success('提交成功!')
        } else {
          this.$Message.danger('表单验证失败!')
        }
      })
    },
    addUser() {
      this.modal = true
    }
  }
}