add-or-update.vue

<template lang="pug">
    el-dialog(width="60%" :visible.sync='visible' :append-to-body='true' :before-close="handleClose")
        div(slot='title')
            span.title-bold 修改资源点
        el-form(:model='dataForm' :rules='dataRule' ref='dataForm'  label-width='100px')
            el-row()
                el-col(:span="12" class='info-block')
                    div(class='info-title') 基本信息
                    div(class='info-form')
                        el-form-item(label='资源点名称:' prop='name')
                            el-input(v-model='dataForm.name' placeholder='请填写资源点名称')
                        el-form-item(label='资源点编码:' prop='code')
                            //- el-input(v-model='dataForm.code' placeholder='保存后系统自动生成' readonly)
                            el-input(v-model='dataForm.code' placeholder='请填写资源点编码' )
                        el-form-item(label='资源点类型:' prop='type' )
                            el-select( v-model="dataForm.type" placeholder="请选择资源点类型" disabled)
                                el-option(v-for="(item,index) in typeList" :key="index" :label="item.name" :value="item.id")
                        el-form-item(label='品牌:' prop='brand')
                            el-select(v-model="dataForm.brand" placeholder="请选择品牌" )
                                el-option(v-for="(item,index) in brandList" :key="index" :label="item.name" :value="item.id" :code="item.id")
                        el-form-item(label='型号:' prop='equipmentModel')
                            el-input(v-model='dataForm.equipmentModel' placeholder='请填写型号')
                        el-form-item(label='最大功率:' prop='maxPower')
                            el-input(v-model='dataForm.maxPower' placeholder='请填写最大功率')
                        el-form-item(label="安装日期:", prop="installDate")
                            el-date-picker.mywidth(v-model="dataForm.installDate", value-format="yyyy-MM-dd", type="date", placeholder="请选择安装日期", clearable)
                        el-form-item(label="维保日期:", prop="maintenanceDate")
                            el-date-picker.mywidth(v-model="dataForm.maintenanceDate", value-format="yyyy-MM-dd", type="date", placeholder="请选择维保日期", clearable)
                        el-form-item(label='地址码:' prop='addressCode')
                            el-input(v-model='dataForm.addressCode' placeholder='请填写地址码')
                        el-form-item(label='端口号:' prop='port')
                            el-input(v-model='dataForm.port' placeholder='请填写端口号')
                        el-form-item(label='用户名:' prop='username')
                            el-input(v-model='dataForm.username' placeholder='请填写用户名')
                        el-form-item(label='密码:' prop='password')
                            el-input(v-model='dataForm.password' placeholder='请填写密码')
                el-col(:span="11" style="margin-left: 30px;")
                    el-row( class='info-block')
                        div(class='info-title') 位置信息
                        div(class='info-form')
                            el-form-item(label='X坐标:' prop='xlongit')
                                el-input(v-model='dataForm.xlongit' placeholder='请填写X坐标' readonly)
                            el-form-item(label='Y坐标:' prop='ylat')
                                el-input(v-model='dataForm.ylat' placeholder='请填写Y坐标' readonly)
                            el-form-item(label='地图层级:' prop='tierId')
                                el-select(v-model="dataForm.tierId" placeholder="请选择地图层级" @change="tierChange" disabled)
                                    el-option(v-for="(item,index) in tierList" :key="index" :label="item.name" :value="item.id" :code="item.id")
                            el-form-item(label='所属区域:' prop='region')
                                el-select(v-model="dataForm.region" placeholder="请选择所属区域" )
                                    el-option(v-for="(item,index) in regionList" :key="index" :label="item.name" :value="item.id" :code="item.id")
                            el-form-item(label='部署位置:' prop='deployLocation')
                                el-input(v-model='dataForm.deployLocation' placeholder='请填写部署位置')
                    el-row( class='info-block' style="margin-top: 20px;")
                        div(class='info-title') 附属信息
                        div(class='info-form')
                            el-form-item(label='当前操作员:' prop='operatorName')
                                el-input(v-model='dataForm.operatorName' placeholder='请填写当前操作员' disabled)
                            el-form-item(label='附属信息:' prop='attachedInfo')
                                el-input.mywidth(type="textarea" :rows=5 resize="none" v-model="dataForm.attachedInfo"  placeholder='请填写附属信息')
                            el-form-item(label='备注:' prop='remark')
                                el-input.mywidth(type="textarea" :rows=5 resize="none" v-model="dataForm.remark"  placeholder='请填写备注')
        span.dialog-footer(slot='footer')
            el-button(@click='cancel' type='primary' size='medium') 取消
            el-button(type='primary' size='medium' @click='dataFormSubmit()' v-prevent-re-click) 保存
</template>

<script>
import Vue from 'vue'
import { mapState } from 'vuex'
// openlayer
import 'ol/ol.css'
import { Map, View } from 'ol'
import { Projection } from 'ol/proj'
import { getCenter } from 'ol/extent'
import ImageLayer from 'ol/layer/Image'
import ImageStatic from 'ol/source/ImageStatic'
import Zoom from 'ol/control/Zoom'

// 图上图标相关
import OlFeature from 'ol/Feature'
import OlGeomPoint from 'ol/geom/Point'
import OlLayerVector from 'ol/layer/Vector'
import OlSourceVector from 'ol/source/Vector'
import OlStyleStyle from 'ol/style/Style'
import OlStyleIcon from 'ol/style/Icon'

// 用来添加相关文字描述的
import Text from 'ol/style/Text'
import Fill from 'ol/style/Fill'
let that
export default {
  computed: {
    ...mapState('d2admin/user', ['info'])
  },
  props: ['pList'],
  data() {
    return {
      mapDialog: null,
      imgLayer: null,
      vectorLayer: null,
      projection: null,
      urlPath: window.CONFIG.urlPath,
      extent: [-1100, 110, 1460, 820],
      visible: false,
      regionList: [
        { id: 1, name: '候车大厅' },
        { id: 2, name: '办公区域' },
        { id: 3, name: '屋顶' }
      ],
      icon: {},
      list: [],
      typeList: [],
      tierList: [],
      tierMap: {},
      tier: {},
      brandList: [],
      dataForm: {
        id: '',
        name: '',
        code: '',
        type: '',
        equipmentModel: '',
        maxPower: '',
        installDate: null,
        maintenanceDate: null,
        region: '',
        stationId: localStorage.getItem('stationId'),
        stationName: '',
        tierId: '',
        addressCode: '',
        port: '',
        username: '',
        password: '',
        remark: '',
        status: 1
      },
      dataRule: {
        name: [
          { required: true, message: '资源点名称不能为空', trigger: 'blur' },
          { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '资源点编码不能为空', trigger: 'blur' },
          { min: 1, max: 30, message: '长度在 1 到 30 个字符', trigger: 'blur' }
        ],
        equipmentModel: [
          { required: true, message: '型号不能为空', trigger: 'blur' }
        ],
        maxPower: [
          { required: true, message: '最大功率不能为空', trigger: 'blur' }
        ],
        type: [
          { required: true, message: '资源点类型不能为空', trigger: 'blur' }
        ],
        region: [
          {
            required: true,
            message: '所属区域不能为空',
            trigger: ['blur', 'change']
          }
        ],
        installDate: [
          {
            required: true,
            message: '安装日期不能为空',
            trigger: ['blur', 'change']
          }
        ],
        maintenanceDate: [
          {
            required: true,
            message: '维保日期不能为空',
            trigger: ['blur', 'change']
          }
        ],
        addressCode: [
          { min: 1, max: 64, message: '长度在 1 到 64 个字符', trigger: 'blur' }
        ],
        port: [
          { message: '请输入端口号', trigger: 'change' },
          {
            validator(rule, value, callback) {
              if (value) {
                if (
                  Number.isInteger(Number(value)) &&
                  Number(value) < 65536 &&
                  Number(value) > 0
                ) {
                  callback()
                } else {
                  callback(new Error('请输入1到65535之间的正整数'))
                }
              } else {
                callback()
              }
            },
            trigger: 'blur'
          }
        ],
        username: [
          { min: 1, max: 64, message: '长度在 1 到 64 个字符', trigger: 'blur' }
        ],
        password: [
          { min: 1, max: 64, message: '长度在 1 到 64 个字符', trigger: 'blur' }
        ],
        xlongit: [
          { required: true, message: 'X1坐标不能为空', trigger: 'blur' },
          { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
        ],
        ylat: [
          { required: true, message: 'Y1坐标不能为空', trigger: 'blur' },
          { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
        ],

        tierId: [
          { required: true, message: '地图层级不能为空', trigger: 'blur' }
        ],
        deployLocation: [
          { required: true, message: '部署位置不能为空', trigger: 'blur' },
          { min: 1, max: 64, message: '长度在 1 到 64 个字符', trigger: 'blur' }
        ],
        operatorName: [
          { required: true, message: '当前操作员不能为空', trigger: 'blur' }
        ],
        brand: [
          {
            required: true,
            message: '品牌不能为空',
            trigger: ['blur', 'change']
          }
        ],
        icon: [
          { required: true, message: '资源点图标不能为空', trigger: 'blur' }
        ],
        attachedInfo: [
          {
            min: 1,
            max: 500,
            message: '长度在 1 到 500 个字符',
            trigger: 'blur'
          }
        ],
        remark: [
          {
            min: 1,
            max: 500,
            message: '长度在 1 到 500 个字符',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  created() {
    that = this
  },
  methods: {
    initMap(bean) {
      if (this.mapDialog) {
        this.mapDialog.removeLayer(this.imgLayer)
        this.mapDialog.removeLayer(this.vectorLayer)
      }
      let zoomControl = new Zoom({
        delta: 0.2,
        zoomInTipLabel: '',
        zoomOutTipLabel: ''
      })
      this.projection = new Projection({
        // 投影
        code: 'xkcd-image',
        units: 'pixels',
        extent: this.extent
      })

      this.imgLayer = new ImageLayer({
        id: bean.id,
        source: new ImageStatic({
          url: bean.readPath, //这里添加静态图片的地址
          projection: this.projection,
          imageExtent: this.extent
        }),
        visible: true
      })

      this.mapDialog = new Map({
        target: 'mapDialog',
        layers: [this.imgLayer],
        controls: [zoomControl],
        view: new View({
          projection: this.projection,
          center: getCenter([0, 0, 418, 600]), // 获取范围的中心坐标。
          zoom: 2.5,
          maxZoom: 5,
          minZoom: 1.5,
          extent: [-1100, -100, 2000, 1000]
        })
      })
      //点击事件
      this.mapDialog.on('click', function(evt) {
        let feature = evt.map.forEachFeatureAtPixel(evt.pixel, function(
          feature
        ) {
          return feature
        })
        if (feature) {
          for (let i in that.list) {
            if (feature.getId() === that.list[i].id) {
              that.list[i].active = !that.list[i].active
              let style = null
              if (that.list[i].active) {
                style = that.getPointStyle(
                  that.list[i].imageSrc + '2.png',
                  that.list[i].name,
                  0.3
                )
              } else {
                style = that.getPointStyle(
                  that.list[i].imageSrc + '.png',
                  that.list[i].name
                )
              }
              feature.setStyle(style)
            }
          }
        }
      })
    },
    init(bean) {
      console.log('bean:', bean)
      this.dataForm = {}
      this.visible = true
      if (bean) {
        this.dataForm = JSON.parse(JSON.stringify(bean))
      }

      this.dataForm.operatorName = this.info.name
      this.initResourceTypeDicList()
      this.initBrandDicList()
      this.initStationMapList()
    },
    initStationMapList() {
      this.$http({
        url: this.$http.adornUrl(`/liStation/getId/${this.dataForm.stationId}`),
        method: 'get',
        params: this.$http.adornParams()
      }).then((data) => {
        if (data && data.code === 0) {
          this.tierList = data.bean.mapList
        }
      })
    },
    initResourceTypeDicList() {
      this.$http({
        url: this.$http.adornUrl('/sysDictionary/getResourceTypeDicList'),
        method: 'get',
        params: this.$http.adornParams({
          stationId: localStorage.getItem('stationId')
        })
      }).then((data) => {
        if (data && data.code === 0) {
          this.typeList = data.list
          this.typeList.forEach((e) => {
            if (e.id === this.dataForm.type) {
              this.dataForm.dicTypeName = e.name
            }
          })
        }
      })
    },
    initBrandDicList() {
      this.brandList = []
      this.$http({
        url: this.$http.adornUrl('/sysDictionary/getBrandDicList'),
        method: 'get',
        params: this.$http.adornParams({
          stationId: localStorage.getItem('stationId')
        })
      }).then((data) => {
        if (data && data.code === 0) {
          this.brandList = data.list
        }
      })
    },
    tierChange(e) {
      this.tierList.forEach((a) => {
        if (a.name === e) {
          this.dataForm.tierId = a.id
          this.dataForm.tierName = a.name
          this.tier = a
        }
      })
    },
    addTips(tips, base, resource) {
      switch (base.type) {
        //枪机 球机 安检机
        case 'b6af764f2a6e454490a6b1b3c9057e57':
        case 'ece0b8b2db27411886254e81134988a3':
        case '303310efddb34a2e9bf269bdff8a7dc5':
          if (
            !base.addressCode ||
            !base.port ||
            !base.byx1 ||
            base.deleted === 1
          ) {
            break
          }
          if (
            base.addressCode === resource.addressCode &&
            base.port === resource.port &&
            base.byx1 === resource.byx1
          ) {
            //添加到重复提示
            let tip =
              '地址码:' +
              base.addressCode +
              ' 端口:' +
              base.port +
              ' 通道号:' +
              base.byx1
            if (tips && !tips.includes(tip)) {
              tips.push(tip)
            }
          }
          break
        default:
          if (!base.addressCode || !base.port || base.deleted === 1) {
            break
          }
          if (
            base.addressCode === resource.addressCode &&
            base.port === resource.port
          ) {
            //添加到重复提示
            let tip = '地址码:' + base.addressCode + ' 端口:' + base.port
            if (tips && !tips.includes(tip)) {
              tips.push(tip)
            }
          }
      }
    },
    // 表单提交
    dataFormSubmit(id) {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          //校验数据重复
          //后台返回的本地是否重复
          let list = this.pList
          let size = list.length
          let tips = []
          //添加或修改的数据跟本地比较是否重复
          for (let h = 0; h < size; h++) {
            const resource = list[h]
            if (resource.id === this.dataForm.id) {
              continue
            }
            this.addTips(tips, resource, this.dataForm)
          }
          //添加或修改的数据跟数据库是否重复
          this.$http({
            url: this.$http.adornUrl('/liResource/list'),
            method: 'post',
            data: {
              stationId: localStorage.getItem('stationId')
            }
          }).then((data) => {
            if (data && data.code === 0) {
              let list = data.page.rows
              for (let index = 0; index < list.length; index++) {
                const resource = list[index]
                if (resource.id === this.dataForm.id) {
                  continue
                }
                this.addTips(tips, resource, this.dataForm)
              }
            }
          })
          // console.log('tips', tips)
          if (tips.length > 0) {
            let message = ''
            tips.map((item) => {
              message += item + '<br>'
            })
            // console.log(message)
            this.$emit('addNotify', message)
            return
          }
          setTimeout(() => {
            this.$emit('refreshBean', this.dataForm)
            this.$emit('refreshdatalist', this.dataForm)
          }, 100)
          this.visible = false
        }
      })
      // this.$refs['dataForm'].validate(valid => {
      //   if (valid) {
      //     this.dataForm.stationId = localStorage.getItem('stationId')
      //     this.$http({
      //       url: this.$http.adornUrl(
      //         `/liResource/${!this.dataForm.id ? 'save' : 'update'}`
      //       ),
      //       method: 'post',
      //       data: this.dataForm
      //     }).then(data => {
      //       if (data && data.code === 0) {
      //         this.$message({
      //           message: '操作成功',
      //           type: 'success',
      //           duration: 1500,
      //           onClose: () => {
      //             this.visible = false
      //             this.checkCameraList = []
      //             this.$emit('refreshdatalist', data.bean)
      //           }
      //         })
      //       } else {
      //         this.$message.error(data.msg)
      //       }
      //     })
      //   }
      // })
    },
    //关闭前
    handleClose() {
      this.visible = false
      //this.$emit('refreshBean', this.dataForm)
      this.$refs.dataForm.resetFields()
    },
    //取消
    cancel() {
      this.$confirm('确认取消?', '修改资源点', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.handleClose()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消退出'
          })
        })
    },
    changeImageLayer(bean) {
      if (bean === null) return
      if (this.mapDialog) {
        this.mapDialog.removeLayer(this.imgLayer)
      } else {
        return
      }
      this.imgLayer = new ImageLayer({
        id: bean.id,
        source: new ImageStatic({
          url: bean.readPath, //这里添加静态图片的地址
          projection: this.projection,
          imageExtent: this.extent
        }),
        visible: true
      })
      this.mapDialog.addLayer(this.imgLayer)
    },
    changeVectorLayer(list) {
      if (!list) return
      if (this.mapDialog) {
        this.mapDialog.removeLayer(this.vectorLayer)
      } else {
        return
      }

      let featuresArr = []
      for (let i in list) {
        if (list[i].imageSrc) {
          featuresArr.push(this.getFeature(list[i].xlongit, list[i].ylat))
          let style = null
          if (list[i].active) {
            style = this.getPointStyle(
              list[i].imageSrc + '2.png',
              this.list[i].name,
              0.3
            )
          } else {
            style = this.getPointStyle(
              list[i].imageSrc + '.png',
              this.list[i].name
            )
          }
          featuresArr[i].setStyle(style)
          featuresArr[i].setId(list[i].id)
        }
      }
      this.vectorLayer = new OlLayerVector({
        source: new OlSourceVector({
          features: featuresArr
        })
      })
      this.mapDialog.addLayer(this.vectorLayer)
    },
    getFeature(x, y) {
      return new OlFeature({
        type: 'icon',
        geometry: new OlGeomPoint([x, y])
      })
    },
    getPointStyle(src, name, zoom) {
      let style = new OlStyleStyle({
        image: new OlStyleIcon({
          anchor: [0.5, 0.5],
          scale: zoom || 0.4,
          //rotation:0 旋转度
          src: require('@/assets/images/' + src)
        }),
        text: new Text({
          text: name, // 添加文字描述
          font: '14px font-size', // 设置字体大小
          fill: new Fill({
            // 设置字体颜色
            color: 'black'
          }),
          offsetY: 30 // 设置文字偏移量
        })
      })
      return style
    }
  }
}
</script>
<style lang="scss" scoped>
.el-icon-qiangji5 {
  width: 31px;
  height: 34px;
  background-size: 182%;
}

.el-icon-qiuji5 {
  width: 31px;
  height: 34px;
  background-size: 182%;
}

.el-icon-quanjing5 {
  width: 31px;
  height: 34px;
  background-size: 182%;
}

.el-icon-fangqu5 {
  width: 31px;
  height: 34px;
  background-size: 182%;
}

.el-icon-hongwai5 {
  width: 31px;
  height: 34px;
  background-size: 182%;
}

.el-icon-yeti5 {
  width: 31px;
  height: 34px;
  background-size: 182%;
}

.el-icon-zhaoming5 {
  width: 31px;
  height: 34px;
  background-size: 182%;
}

.el-icon-ruqin5 {
  width: 31px;
  height: 34px;
  background-size: 182%;
}

.el-icon-anjian5 {
  width: 31px;
  height: 34px;
  background-size: 182%;
}

.el-icon-zhayao5 {
  width: 31px;
  height: 34px;
  background-size: 182%;
}

.el-icon-anjianmen5 {
  width: 31px;
  height: 34px;
  background-size: 182%;
}

.el-icon-baojing5 {
  width: 31px;
  height: 34px;
  background-size: 182%;
}

.el-icon-menjin5 {
  width: 31px;
  height: 34px;
  background-size: 182%;
}

.el-icon-shuangjian5 {
  width: 31px;
  height: 34px;
  background-size: 182%;
}

.el-table__header {
  width: 100% !important;
}

.el-table__body {
  width: 100% !important;
}

.info-title {
  line-height: 50px;
  font-size: 18px;
  height: 50px;
  padding: 0 20px;
  background-color: #dfeaf7;
  border-bottom: 1px solid #cccccc;
}

.info-form {
  padding: 10px;
}

.info-block {
  border: 1px solid #cccccc;
}

.el-select {
  width: 100%;
}

.resource-container {
  width: 100%;
  height: 100%;
  position: relative;
  border: 0px solid black;
  overflow: auto;

  .span-box {
    height: 30px;
    width: 30px;
    // background-color: #0097ff;
    font-size: 12px;
    border-radius: 5px;
    /* border: 1px solid red; */
    position: absolute;
    // left: 0;
    // top: 0;
    .span-img {
      width: 100%;
      height: 100%;
      border-radius: 5px;
    }
  }

  .isActive {
    background-color: #fd949d;
    width: 40px;
    height: 40px;

    .el-icon-qiangji5 {
      width: 40px;
      height: 46px;
      background-size: 182%;
    }

    .el-icon-qiuji5 {
      width: 40px;
      height: 46px;
      background-size: 182%;
    }
  }
}

.mod-menu {
  .icon-list__input {
    > .el-input__inner {
      cursor: pointer;
    }
  }

  &__icon-popover {
    max-width: 370px;
  }

  &__icon-list {
    max-height: 180px;
    padding: 0;
    margin: -8px 0 0 -8px;

    > .el-button {
      padding: 8px;
      margin: 8px 0 0 8px;

      > span {
        display: inline-block;
        vertical-align: middle;
        width: 18px;
        height: 18px;
        font-size: 18px;
      }
    }
  }

  .icon-list__tips {
    font-size: 18px;
    text-align: center;
    color: #e6a23c;
    cursor: pointer;
  }
}
.map-dialog {
  /deep/ .el-dialog__body {
    padding: 0;
  }
}
</style>