拖拽功能

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

@@ -0,0 +1,174 @@
+<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="rate" 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 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="../assets/demo_picture.jpg" 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+'%',height:100/height+'%',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() {
+
+    },
+    data() {
+        return {
+            isDown: false,
+            bgMove: true,
+            bgPosition: {
+                left: 0,
+                top: 60
+            },
+            width: 32,
+            height: 22,
+            rate: 1,
+            mapInfo: [],
+            color: ['rgba(111, 189, 39,0.1)', 'rgba(227,98,100,0.2)', 'rgba(83,147,255,0.2)'],
+            nowAdd: 0,
+            startMoveIndex: 0,
+            nowMoveIndex: 0,
+            nowMapInfo: []
+        }
+    },
+    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
+        },
+        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
+        }
+    }
+}
+
+
+
+</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);
+        }
+    }
+}
+.bgImg {
+    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: '/drugContent',
+                    name: 'drugContent',
+                    component: () =>
+                        import ('../pages/DrugContent')
+                },
                 {
                     path: '/arContentTemplate',
                     name: 'arContentTemplate',