区域

src/main/vue/src/components/DrugArea.vue

@@ -0,0 +1,403 @@
+<template>
+  <el-container class="content">
+    <el-main>
+      <el-row style="z-index:3">
+        <el-form :inline="true" class="demo-form-inline" size="mini">
+          <el-form-item>
+            <el-button @click="bgMove=!bgMove">{{bgMove?'固定':'拖拽'}}底图</el-button>
+          </el-form-item>
+          <!-- <el-form-item label="宽">
+          <el-input-number v-model="width" :min="1" label="描述文字"></el-input-number>
+        </el-form-item>
+        <el-form-item label="高">
+          <el-input-number v-model="height" :min="1" label="描述文字"></el-input-number>
+        </el-form-item>
+        <el-form-item label="比率">
+          <el-input-number v-model="mapRate" label="描述文字"></el-input-number>
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="createMap">生成网格</el-button>
+          </el-form-item>-->
+          <!-- <el-form-item>
+            <el-button type="primary" @click="">添加点标</el-button>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="danger" @click="bgMove=true">取消添加</el-button>
+          </el-form-item>-->
+          <el-form-item>
+            <el-button type="primary" @click="add" icon="el-icon-plus" circle></el-button>
+          </el-form-item>
+
+          <el-form-item>
+            <el-button type="danger" @click="subtraction" icon="el-icon-minus" circle></el-button>
+          </el-form-item>
+
+          <!-- <el-form-item>
+            <el-button @click="saveMapInfo" type="warning">保存</el-button>
+          </el-form-item>-->
+        </el-form>
+      </el-row>
+      <div class="dragContent" ref="dragContent" :style="{cursor:isDown&&bgMove?'move':(bgMove?'default':'crosshair'),top:bgPosition.top+'px',left:bgPosition.left+'px'}" @mousedown="isDown=true" @mousemove="bgMouseMove" @mouseup="isDown=false">
+        <img :src="mapImage+'?x-oss-process=image/resize,m_lfit,h_'+areaHeight+',w_'+areaWidth" ref="bgImg" class="bgImg" alt>
+        <div class="gridInfo" style="z-index:2">
+          <div class="grid-item" v-for="(item,index) in oldMapInfo" :style="{width:100/width/rate+'%',height:100/height/rate+'%',backgroundColor:color[item]}"></div>
+        </div>
+        <div class="gridInfo">
+          <div class="grid-item" v-for="(item,index) in mapInfo" @click="choosePoint(index)" :style="{width:100/width/rate+'%',height:100/height/rate+'%',backgroundColor:colorArea[canAdd(item)?0:(parseInt(item)!=0?2:1)],color:canAdd(item)?'#fff':'#666'}">
+            <template v-if="chooseIdex===index">
+              <!-- <span>{{index}}</span> -->
+              <img src="../assets/location.png" v-if="!isAreaShowPoint" alt>
+              <img src="../assets/door.png" v-else-if='doorFlag' alt="">
+              <img src="../assets/location2.png" v-else alt="">
+            </template>
+          </div>
+        </div>
+      </div>
+    </el-main>
+  </el-container>
+</template>
+<script>
+import { mapState } from 'vuex'
+import { format } from 'date-fns'
+import zh from 'date-fns/locale/zh_cn'
+export default {
+  name: 'drugArea',
+  props: {
+    areaWidth: {
+      type: Number,
+      default: 100
+    },
+    areaHeight: {
+      type: Number,
+      default: 100
+    },
+    landmarkId: {
+      type: Number,
+      default: 0
+    },
+    areaId: {
+      type: Number,
+      default: 0
+    },
+    mapPointInfo: {
+      type: Object,
+      default: () => {
+        return {
+          x: '',
+          y: '',
+          index: ''
+        }
+      }
+    },
+    doorFlag:{
+      type:Boolean,
+      default:false
+    },
+    isAreaShowPoint:{
+      type:Boolean,
+      default:false
+    }
+  },
+  created() {
+    if (this.landmarkId) {
+      this.getInfo()
+    }
+  },
+  data() {
+    return {
+      isDown: false,
+      bgMove: false,
+      bgPosition: {
+        left: 0,
+        top: 60
+      },
+      width: 32,
+      height: 22,
+      rate: 1,
+      mapRate: 1,
+      mapInfo: [],
+      color: ['rgba(111, 189, 39,0.5)', 'rgba(227,98,100,0.4)', 'rgba(83,147,255,0.4)'],
+      colorArea: ['rgba(255,255,255,0)', 'rgba(0,0,0,0.6)', 'rgba(103,46,26,0.6)'],
+      nowAdd: 0,
+      startMoveIndex: 0,
+      nowMoveIndex: 0,
+      nowMapInfo: [],
+      mapImage: '',
+      mapWidth: '',
+      mapHeight: '',
+      oldMapInfo: [],
+      tableData: [],
+    }
+  },
+  watch: {
+    landmarkId() {
+      this.getInfo()
+    }
+  },
+  computed: {
+    ...mapState(['totalHeight']),
+    chooseIdex() {
+      if (this.mapPointInfo.index) {
+        return parseInt(this.mapPointInfo.index)
+      }
+      else {
+        return ''
+      }
+
+    }
+
+  },
+  methods: {
+    choosePoint(index) {
+      if (this.bgMove) {
+        return
+      }
+      if (this.canAdd(this.mapInfo[index])) {
+        this.$emit('choosePoint', {
+          x: this.getX(index),
+          y: this.getY(index),
+          index: index
+        })
+      }
+      else {
+        this.$alert('只能在区域内添加', '提示', {
+          confirmButtonText: '确定',
+          callback: action => {
+
+          }
+        });
+      }
+
+    },
+    canAdd(id) {
+      if (this.areaId) {
+        if (this.areaId == parseInt(id)) {
+          return true
+        }
+        else {
+          return false
+        }
+      }
+      else {
+        return true
+      }
+    },
+    add() {
+      this.$emit('mapAddition')
+    },
+    subtraction() {
+      this.$emit('subtraction')
+    },
+    bgMouseMove(e) {
+      if (this.isDown) {
+        if (this.bgMove) {
+          var width = this.$refs.dragContent.offsetWidth
+          var height = this.$refs.dragContent.offsetHeight
+          var left = this.bgPosition.left + e.movementX
+          var top = this.bgPosition.top + e.movementY
+          if (left > 0) {
+            left = 0
+          }
+          if (left < 0 - width + 600) {
+            left = this.bgPosition.left
+          }
+
+          if (top > 60) {
+            top = 60
+          }
+          if (top < 0 - height + 600) {
+            top = this.bgPosition.top
+          }
+          this.bgPosition = {
+            left: left,
+            top: top
+          }
+        }
+
+      }
+    },
+    createMap() {
+      var sum = this.width * this.rate * this.height * this.rate
+      var list = []
+      for (var i = 0; i < sum; i++) {
+        list.push(0)
+      }
+      this.mapInfo = list
+      this.nowAdd = 0
+      //   this.drawContent()
+
+    },
+
+    addStart(index) {
+      if (this.bgMove) {
+        return
+      }
+      this.nowMapInfo = [...this.mapInfo]
+      this.startMoveIndex = index
+      if (parseInt(this.nowAdd) != 0 && parseInt(this.mapInfo[index]) > 0) {
+
+      }
+      else {
+        this.mapInfo.splice(index, 1, this.nowAdd)
+      }
+
+    },
+    changeMap(index) {
+      if (this.bgMove) {
+        return
+      }
+      if (this.isDown) {
+        this.nowMoveIndex = index
+        this.mapInfo = [...this.nowMapInfo]
+        this.getChangeList(this.startMoveIndex, index).forEach(item => {
+          if (parseInt(this.nowAdd) != 0 && parseInt(this.mapInfo[item]) > 0) {
+          }
+          else {
+            this.mapInfo.splice(item, 1, this.nowAdd)
+          }
+        })
+      }
+
+    },
+    getX(index) {
+      return index % (this.width * this.rate)
+    },
+    getY(index) {
+      return parseInt(index / (this.width * this.rate))
+    },
+    getChangeList(index1, index2) {
+      var list = []
+      var list1 = [this.getX(index1), this.getX(index2)].sort((a, b) => { return a - b })
+      var list2 = [this.getY(index1), this.getY(index2)].sort((a, b) => { return a - b })
+      for (var i = list1[0]; i <= list1[1]; i++) {
+        for (var j = list2[0]; j <= list2[1]; j++) {
+          if (list.indexOf(this.getIndex(i, j)) == -1) {
+            list.push(this.getIndex(i, j))
+          }
+        }
+      }
+      return list
+    },
+    getIndex(x, y) {
+      return y * (this.width * this.rate) + x
+    },
+    saveMapInfo() {
+
+      if (this.landmarkId) {
+
+
+        var data = {
+          id: this.landmarkId,
+          mapWidth: this.width,
+          mapHeight: this.height,
+          rate: this.rate,
+          areaMapInfo: this.mapInfo.join(','),
+        };
+
+        this.$http.post({
+          url: '/landMark/update',
+          data: data
+        }).then(res => {
+          if (res.success) {
+            this.$message.success('成功');
+          } else {
+            this.$message.warning('失败')
+          }
+        });
+
+      }
+    },
+    rowClick(row, event, column) {
+      this.nowAdd = row.id
+      this.bgMove = false
+    },
+    getInfo() {
+      this.$http.get({
+        url: '/landMark/getOne',
+        data: {
+          id: this.landmarkId
+        }
+      }).then(res => {
+        if (res.success) {
+
+
+          this.width = res.data.mapWidth || 20;
+          this.height = res.data.mapHeight || 20;
+          this.mapRate = res.data.mapRate || 1;
+          if (res.data.mapInfo) {
+            this.oldMapInfo = res.data.mapInfo.split('');
+          }
+
+          if (res.data.areaMapInfo) {
+            this.mapInfo = res.data.areaMapInfo.split(',')
+          }
+          else {
+            var list = []
+            this.oldMapInfo.forEach(item => {
+              list.push(0)
+            })
+            this.mapInfo = list
+          }
+
+          this.mapImage = res.data.mapSprite || require('../assets/demo_picture.jpg');
+
+        }
+      })
+    }
+  }
+}
+
+
+
+</script>
+<style lang="less" scoped>
+.content {
+  position: relative;
+}
+.dragContent {
+  position: absolute;
+  top: 60px;
+  left: 0;
+  border: 2px dashed #ccc;
+  // cursor: move;
+  z-index: 1;
+  .gridInfo {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 3;
+    display: flex;
+    flex-wrap: wrap;
+
+    .grid-item {
+      background-color: rgba(0, 0, 0, 0.3);
+      box-sizing: border-box;
+      border: 1px solid rgba(255, 255, 255, 1);
+      text-align: center;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #fff;
+      font-weight: bold;
+      font-size: 18px;
+      img {
+        width: 50%;
+      }
+    }
+  }
+
+  .gridCanvas {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 3;
+  }
+}
+.bgImg {
+  position: relative;
+  width: auto;
+  z-index: 2;
+}
+</style>