01/11 canvas

src/main/vue/src/pages/DrugAreaCanvas.vue

@@ -37,6 +37,12 @@
           <el-form-item>
             <el-button @click="saveMapInfo" type="warning">保存</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>
       </el-row>
       <div class="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">
@@ -164,11 +170,38 @@ export default {
   },
   watch: {
     mapInfo() {
-    
+
       this.drawContent()
     }
   },
   methods: {
+    add() {
+      if (this.mapHeight <= (this.totalHeight - 100) * 3) {
+        this.mapHeight += (this.totalHeight - 100) / 5
+
+        setTimeout(() => {
+          this.mapWidth = this.$refs.bgImg.offsetWidth
+          this.$refs.canvas.width = this.mapWidth
+          this.$refs.canvas.height = this.mapHeight
+          this.drawContent()
+        }, 500)
+      }
+
+    },
+    subtraction() {
+      if (this.mapHeight > this.totalHeight - 100) {
+        this.mapHeight -= (this.totalHeight - 100) / 5
+        if (this.mapHeight < this.totalHeight - 100) {
+          this.mapHeight = this.totalHeight - 100
+        }
+        setTimeout(() => {
+          this.mapWidth = this.$refs.bgImg.offsetWidth
+          this.$refs.canvas.width = this.mapWidth
+          this.$refs.canvas.height = this.mapHeight
+          this.drawContent()
+        }, 500)
+      }
+    },
     bgMouseMove(e) {
       if (this.isDown) {
         if (this.bgMove) {
@@ -192,7 +225,7 @@ export default {
 
     },
     drawContent() {
-        
+
       var width = this.mapWidth / this.width
       var height = this.mapHeight / this.height
       var list = [...this.oldMapInfo]
@@ -255,6 +288,7 @@ export default {
       var height = this.mapHeight / this.height
       var x = parseInt(e.offsetX / width)
       var y = parseInt(e.offsetY / height)
+      console.log(y * this.width + x)
       this.addStart(y * this.width + x)
     },
     drawMove(e) {
@@ -265,11 +299,13 @@ export default {
       this.changeMap(y * this.width + x)
     },
     addStart(index) {
+      console.log(index)
       if (this.bgMove) {
         return
       }
       this.nowMapInfo = [...this.mapInfo]
       this.startMoveIndex = index
+      console.log(this.mapInfo.length)
       if (parseInt(this.nowAdd) != 0 && parseInt(this.mapInfo[index]) > 0) {
 
       }

src/main/vue/src/pages/DrugContentCanvas.vue

@@ -29,6 +29,12 @@
         <el-form-item>
           <el-button @click="saveMapInfo" type="warning">保存</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>
     </el-row>
     <div class="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">
@@ -55,6 +61,7 @@ export default {
         }
       }).then(res => {
         if (res.success) {
+          this.orginInfo = res.data
 
 
           this.width = res.data.mapWidth || 20;
@@ -74,6 +81,7 @@ export default {
   },
   data() {
     return {
+      orginInfo: {},
       isDown: false,
       bgMove: true,
       bgPosition: {
@@ -118,6 +126,33 @@ export default {
     }
   },
   methods: {
+    add() {
+      if (this.mapHeight <= (this.totalHeight - 100) * 3) {
+        this.mapHeight += (this.totalHeight - 100) / 5
+
+        setTimeout(() => {
+          this.mapWidth = this.$refs.bgImg.offsetWidth
+          this.$refs.canvas.width = this.mapWidth
+          this.$refs.canvas.height = this.mapHeight
+          this.drawContent()
+        }, 500)
+      }
+
+    },
+    subtraction() {
+      if (this.mapHeight > this.totalHeight - 100) {
+        this.mapHeight -= (this.totalHeight - 100) / 5
+        if (this.mapHeight < this.totalHeight - 100) {
+          this.mapHeight = this.totalHeight - 100
+        }
+        setTimeout(() => {
+          this.mapWidth = this.$refs.bgImg.offsetWidth
+          this.$refs.canvas.width = this.mapWidth
+          this.$refs.canvas.height = this.mapHeight
+          this.drawContent()
+        }, 500)
+      }
+    },
     bgMouseMove(e) {
       if (this.isDown) {
         if (this.bgMove) {
@@ -130,14 +165,24 @@ export default {
       }
     },
     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()
+      this.$confirm('重新生成网格会清空区域地图数据，确定生成吗?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        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()
+
+      }).catch(() => {
+
+      });
+
     },
     drawContent() {
       var width = this.mapWidth / this.width
@@ -244,8 +289,6 @@ export default {
     saveMapInfo() {
 
       if (this.$route.query.id) {
-
-
         var data = {
           id: this.$route.query.id,
           mapWidth: this.width,
@@ -254,6 +297,13 @@ export default {
           mapInfo: this.mapInfo.join(''),
         };
 
+        if (Number(this.orginInfo.mapWidth) != Number(this.width) || Number(this.orginInfo.mapHeight) != Number(this.height)) {
+          data.areaMapInfo = ''
+        }
+
+
+
+
         this.$http.post({
           url: '/landMark/update',
           data: data