区域

src/main/vue/src/pages/DrugArea.vue

@@ -0,0 +1,328 @@
+<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="nowAdd=0,bgMove=false">删除区域</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 @click="saveMapInfo" type="warning">保存</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">
+        <img :src="mapImage" ref="bgImg" class="bgImg" :style="{height:totalHeight - 100+'px'}" 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" @mousedown="addStart(index)" @mouseover="changeMap(index)" v-for="(item,index) in mapInfo" :style="{width:100/width/rate+'%',height:100/height/rate+'%',backgroundColor:colorArea[0]}">{{item&&item!='0'?item:''}}</div>
+        </div>
+      </div>
+    </el-main>
+
+    <el-aside width="400px" style="margin-top:50px">
+      <el-card class="box-card" shadow="always">
+        <el-table :data="tableData" style="width: 100%" @row-click="rowClick">
+          <el-table-column prop="id" label="区域id"></el-table-column>
+          <el-table-column prop="cityId" label="城市ID"></el-table-column>
+          <el-table-column prop="areaName" label="区域名称"></el-table-column>
+        </el-table>
+      </el-card>
+    </el-aside>
+  </el-container>
+</template>
+<script>
+import { mapState } from 'vuex'
+import { format } from 'date-fns'
+import zh from 'date-fns/locale/zh_cn'
+export default {
+  created() {
+    this.mapHeight = this.totalHeight - 100
+    if (this.$route.query.id) {
+      this.$http.get({
+        url: '/landMark/getOne',
+        data: {
+          id: this.$route.query.id
+        }
+      }).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');
+
+        }
+      })
+
+      this.$http.get({
+        url: '/areaInfo/all',
+        data: {
+          // id: this.$route.query.id
+        }
+      }).then(res => {
+        if (res.success) {
+          this.tableData = res.data
+
+
+        }
+      })
+    }
+
+
+  },
+  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)'],
+      nowAdd: 0,
+      startMoveIndex: 0,
+      nowMoveIndex: 0,
+      nowMapInfo: [],
+      mapImage: '',
+      mapWidth: '',
+      mapHeight: '',
+      oldMapInfo: [],
+      tableData: []
+    }
+  },
+  mounted() {
+
+  },
+  computed: {
+    ...mapState(['totalHeight']),
+  },
+  methods: {
+    bgMouseMove(e) {
+      if (this.isDown) {
+        if (this.bgMove) {
+          this.bgPosition = {
+            left: this.bgPosition.left + e.movementX,
+            top: this.bgPosition.top + e.movementY
+          }
+        }
+
+      }
+    },
+    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()
+
+    },
+    drawContent() {
+      var width = document.getElementById("gridInfo").offsetWidth
+      var height = document.getElementById('gridInfo').offsetHeight
+      var gridWidth = width / this.width
+      var gridHeight = height / this.height
+      var canvas = document.getElementById("gridInfo");
+      var ctx = canvas.getContext("2d");
+      ctx.clearRect(0, 0, width, height);
+      for (var i = 0; i < this.mapInfo.length; i++) {
+        ctx.fillStyle = this.color[this.mapInfo[i]];
+        ctx.fillRect(this.getX(i) * gridWidth, this.getY(i) * gridHeight, gridWidth, gridHeight);
+        ctx.rect(this.getX(i) * gridWidth, this.getY(i) * gridHeight, gridWidth, gridHeight)
+        ctx.lineWidth = 3;
+        ctx.strokeStyle = 'rgba(255,255,255.5)'
+        ctx.stroke();//绘制边框
+      }
+    },
+    drawStart(e) {
+
+      var width = document.getElementById("gridInfo").offsetWidth
+      var height = document.getElementById('gridInfo').offsetHeight
+      var perX = width / this.width
+      var perY = height / this.height
+      var x = parseInt(e.offsetX / perX)
+      var y = parseInt(e.offsetY / perY)
+
+      this.addStart(y * this.width + x)
+    },
+    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.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.$route.query.id) {
+
+
+        var data = {
+          id: this.$route.query.id,
+          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
+    }
+
+  }
+}
+
+
+
+</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: 24px;
+    }
+  }
+
+  .gridCanvas {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 3;
+  }
+}
+.bgImg {
+  position: relative;
+  width: auto;
+  z-index: 2;
+}
+</style>

src/main/vue/src/pages/DrugContent.vue

@@ -1,193 +1,224 @@
 <template>
-    <div class="content">
-        <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="success" @click="nowAdd=0,bgMove=false">添加可行走</el-button>
-                </el-form-item>
-                <el-form-item>
-                    <el-button type="danger" @click="nowAdd=1,bgMove=false">添加不可行走</el-button>
-                </el-form-item>
-                <el-form-item>
-                    <el-button type="primary" @click="nowAdd=2,bgMove=false">添加主干道</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" :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" class="bgImg" :style="{height:totalHeight-100+'px'}" alt="">
-            <div class="gridInfo">
-                <div class="grid-item" @mousedown="addStart(index)" @mouseover="changeMap(index)" v-for="(item,index) in mapInfo" :style="{width:100/width/rate+'%',height:100/height/rate+'%',backgroundColor:color[item]}"></div>
-            </div>
-        </div>
+  <div class="content">
+    <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="success" @click="nowAdd=0,bgMove=false">添加可行走</el-button>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="danger" @click="nowAdd=1,bgMove=false">添加不可行走</el-button>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="nowAdd=2,bgMove=false">添加主干道</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" :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" ref="bgImg" class="bgImg" :style="{height:totalHeight - 100+'px'}" alt>
+      <div class="gridInfo">
+        <div class="grid-item" @mousedown="addStart(index)" @mouseover="changeMap(index)" v-for="(item,index) in mapInfo" :style="{width:100/width/rate+'%',height:100/height/rate+'%',backgroundColor:color[item]}"></div>
+      </div>
     </div>
+  </div>
 </template>
 <script>
 import { mapState } from 'vuex'
 import { format } from 'date-fns'
 import zh from 'date-fns/locale/zh_cn'
 export default {
-    created() {
+  created() {
+    this.mapHeight = this.totalHeight - 100
+    if (this.$route.query.id) {
+      this.$http.get({
+        url: '/landMark/getOne',
+        data: {
+          id: this.$route.query.id
+        }
+      }).then(res => {
+        if (res.success) {
 
-        if (this.$route.query.id) {
-            this.$http.get({
-                url: '/landMark/getOne',
-                data: {
-                    id: this.$route.query.id
-                }
-            }).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.mapInfo = res.data.mapInfo.split('');
+          }
 
-                    this.width = res.data.mapWidth || 20;
-                    this.height = res.data.mapHeight || 20;
-                    this.mapRate = res.data.mapRate || 1;
-                    if (res.data.mapInfo) {
-                        this.mapInfo = res.data.mapInfo.split('');
-                    }
+          this.mapImage = res.data.mapSprite || require('../assets/demo_picture.jpg');
 
-                    this.mapImage = res.data.mapSprite || require('../assets/demo_picture.jpg');
+        }
+      })
+    }
 
 
-                }
-            })
+  },
+  data() {
+    return {
+      isDown: false,
+      bgMove: true,
+      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)'],
+      nowAdd: 0,
+      startMoveIndex: 0,
+      nowMoveIndex: 0,
+      nowMapInfo: [],
+      mapImage: '',
+      mapWidth: '',
+      mapHeight: '',
+    }
+  },
+  mounted() {
+
+  },
+  computed: {
+    ...mapState(['totalHeight']),
+  },
+  methods: {
+    bgMouseMove(e) {
+      if (this.isDown) {
+        if (this.bgMove) {
+          this.bgPosition = {
+            left: this.bgPosition.left + e.movementX,
+            top: this.bgPosition.top + e.movementY
+          }
         }
 
+      }
+    },
+    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()
 
     },
-    data() {
-        return {
-            isDown: false,
-            bgMove: true,
-            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)'],
-            nowAdd: 0,
-            startMoveIndex: 0,
-            nowMoveIndex: 0,
-            nowMapInfo: [],
-            mapImage: '',
-        }
+    drawContent() {
+      var width = document.getElementById("gridInfo").offsetWidth
+      var height = document.getElementById('gridInfo').offsetHeight
+      var gridWidth = width / this.width
+      var gridHeight = height / this.height
+      var canvas = document.getElementById("gridInfo");
+      var ctx = canvas.getContext("2d");
+      ctx.clearRect(0, 0, width, height);
+      for (var i = 0; i < this.mapInfo.length; i++) {
+        ctx.fillStyle = this.color[this.mapInfo[i]];
+        ctx.fillRect(this.getX(i) * gridWidth, this.getY(i) * gridHeight, gridWidth, gridHeight);
+        ctx.rect(this.getX(i) * gridWidth, this.getY(i) * gridHeight, gridWidth, gridHeight)
+        ctx.lineWidth = 3;
+        ctx.strokeStyle = 'rgba(255,255,255.5)'
+        ctx.stroke();//绘制边框
+      }
     },
-    mounted() {
+    drawStart(e) {
 
+      var width = document.getElementById("gridInfo").offsetWidth
+      var height = document.getElementById('gridInfo').offsetHeight
+      var perX = width / this.width
+      var perY = height / this.height
+      var x = parseInt(e.offsetX / perX)
+      var y = parseInt(e.offsetY / perY)
+
+      this.addStart(y * this.width + x)
     },
-    computed: {
-        ...mapState(['totalHeight']),
+    addStart(index) {
+      console.log(index)
+      this.nowMapInfo = [...this.mapInfo]
+      this.startMoveIndex = index
+      this.mapInfo.splice(index, 1, this.nowAdd)
     },
-    methods: {
-        bgMouseMove(e) {
-            if (this.isDown) {
-                if (this.bgMove) {
-                    this.bgPosition = {
-                        left: this.bgPosition.left + e.movementX,
-                        top: this.bgPosition.top + e.movementY
-                    }
-                }
-
-            }
-        },
-        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
-        },
-        addStart(index) {
-            this.nowMapInfo = [...this.mapInfo]
-            this.startMoveIndex = index
-            this.mapInfo.splice(index, 1, this.nowAdd)
-        },
-        changeMap(index) {
-            if (this.isDown) {
-                this.nowMoveIndex = index
-                console.log(this.getChangeList(this.startMoveIndex, index))
-                this.mapInfo = [...this.nowMapInfo]
-                this.getChangeList(this.startMoveIndex, index).forEach(item => {
-                    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.$route.query.id) {
-
-
-                var data = {
-                    id: this.$route.query.id,
-                    mapWidth: this.width,
-                    mapHeight: this.height,
-                    rate: this.rate,
-                    mapInfo: this.mapInfo.join(''),
-                };
-
-                this.$http.post({
-                    url: '/landMark/update',
-                    data: data
-                }).then(res => {
-                    if (res.success) {
-                        this.$message.success('成功');
-                    } else {
-                        this.$message.warning('失败')
-                    }
-                });
-
-            }
-        },
+    changeMap(index) {
+      if (this.isDown) {
+        this.nowMoveIndex = index
+        console.log(this.getChangeList(this.startMoveIndex, index))
+        this.mapInfo = [...this.nowMapInfo]
+        this.getChangeList(this.startMoveIndex, index).forEach(item => {
+          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.$route.query.id) {
+
+
+        var data = {
+          id: this.$route.query.id,
+          mapWidth: this.width,
+          mapHeight: this.height,
+          rate: this.rate,
+          mapInfo: this.mapInfo.join(''),
+        };
+
+        this.$http.post({
+          url: '/landMark/update',
+          data: data
+        }).then(res => {
+          if (res.success) {
+            this.$message.success('成功');
+          } else {
+            this.$message.warning('失败')
+          }
+        });
+
+      }
+    },
+
+
+  }
 }
 
 
@@ -195,35 +226,42 @@ export default {
 </script>
 <style lang="less" scoped>
 .content {
-    position: relative;
+  position: relative;
 }
 .dragContent {
+  position: absolute;
+  top: 60px;
+  left: 0;
+  border: 2px dashed #ccc;
+  // cursor: move;
+  z-index: 1;
+  .gridInfo {
     position: absolute;
-    top: 60px;
+    top: 0;
     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);
-        }
+    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);
     }
+  }
+
+  .gridCanvas {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 3;
+  }
 }
 .bgImg {
-    position: relative;
-    width: auto;
-    z-index: 2;
+  position: relative;
+  width: auto;
+  z-index: 2;
 }
 </style>

src/main/vue/src/router/index.js

@@ -212,6 +212,12 @@ const router = new Router({
                     component: () =>
                         import ('../pages/MyCanvas')
                 },
+                {
+                    path: '/drugArea',
+                    name: 'drugArea',
+                    component: () =>
+                        import ('../pages/DrugArea')
+                },
                 {
                     path: '/drugContent',
                     name: 'drugContent',
@@ -513,16 +519,6 @@ const router = new Router({
                     path: '/areaShowPoints',
                     name: 'AreaShowPoints',
                     component: () => import('../pages/AreaShowPoints')
-                },
-                {
-                    path: '/aimPlaceInfo',
-                    name: 'AimPlaceInfo',
-                    component: () => import('../pages/AimPlaceInfo')
-                },
-                {
-                    path: '/aimPlaceInfos',
-                    name: 'AimPlaceInfos',
-                    component: () => import('../pages/AimPlaceInfos')
                 }
                 /**INSERT_LOCATION**/
             ]
@@ -577,4 +573,4 @@ router.afterEach((to, from) => {
     window.onresize();
 });
 
-export default router;
+export default router;