|
|
@@ -0,0 +1,404 @@
|
|
|
+<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-popover placement="right" width="400" trigger="hover">
|
|
|
+ <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-button slot="reference" type="success" plain size="mini">区域表格</el-button>
|
|
|
+ </el-popover>
|
|
|
+ </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:mapHeight+'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>-->
|
|
|
+ <canvas ref="canvas" class="gridCanvas" @mousedown="drawStart" @mousemove="drawMove"></canvas>
|
|
|
+ </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 {
|
|
|
+ created() {
|
|
|
+
|
|
|
+ var data = {}
|
|
|
+ if (this.$route.query.column) {
|
|
|
+ var columnList = this.$route.query.column.split(';')
|
|
|
+ columnList.forEach(item => {
|
|
|
+ var tempColumn = item;
|
|
|
+ data[tempColumn.split(',')[1]] = tempColumn.split(',')[0];
|
|
|
+ })
|
|
|
+
|
|
|
+ }
|
|
|
+ this.landmarkId = data.landmarkId
|
|
|
+ this.mapHeight = this.totalHeight - 100
|
|
|
+ if (this.$route.query.column) {
|
|
|
+ this.$http.get({
|
|
|
+ url: '/landMark/getOne',
|
|
|
+ data: {
|
|
|
+ id: data.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');
|
|
|
+
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ this.$http.get({
|
|
|
+ url: '/areaInfo/all',
|
|
|
+ data: data
|
|
|
+ }).then(res => {
|
|
|
+ if (res.success) {
|
|
|
+ this.tableData = res.data
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ landmarkId: 0,
|
|
|
+ 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() {
|
|
|
+ if (!this.mapWidth) {
|
|
|
+ setTimeout(() => {
|
|
|
+ this.mapHeight = this.totalHeight - 100
|
|
|
+ }, 300)
|
|
|
+ setTimeout(() => {
|
|
|
+ this.mapWidth = this.$refs.bgImg.offsetWidth
|
|
|
+ this.$refs.canvas.width = this.mapWidth
|
|
|
+ this.$refs.canvas.height = this.mapHeight
|
|
|
+ this.drawContent()
|
|
|
+ }, 1000)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapState(['totalHeight']),
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ mapInfo() {
|
|
|
+
|
|
|
+ this.drawContent()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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 = this.mapWidth / this.width
|
|
|
+ var height = this.mapHeight / this.height
|
|
|
+ var list = [...this.oldMapInfo]
|
|
|
+ var ctx = this.$refs.canvas.getContext('2d')
|
|
|
+ ctx.clearRect(0, 0, this.mapWidth, this.mapHeight);
|
|
|
+ ctx.fillStyle = this.color[0];
|
|
|
+ ctx.fillRect(0, 0, this.mapWidth, this.mapHeight);
|
|
|
+ for (var i = 0; i < list.length; i++) {
|
|
|
+ if (list[i] > 0) {
|
|
|
+ ctx.clearRect(width * this.getX(i), height * this.getY(i), width, height);
|
|
|
+ ctx.fillStyle = this.color[list[i]];
|
|
|
+ ctx.fillRect(width * this.getX(i), height * this.getY(i), width, height);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ var lineWidth = 2
|
|
|
+ if (list.length > 1000) {
|
|
|
+ lineWidth = 1
|
|
|
+ }
|
|
|
+ else if (list.length > 10000) {
|
|
|
+ lineWidth = 0.5
|
|
|
+ }
|
|
|
+
|
|
|
+ for (var i = 0; i < this.width; i++) {
|
|
|
+ ctx.beginPath();
|
|
|
+ ctx.lineWidth = lineWidth;
|
|
|
+ ctx.moveTo(width * i, 0);
|
|
|
+ ctx.lineTo(width * i, this.mapHeight);
|
|
|
+ ctx.strokeStyle = 'rgb(255,255,255,255)';
|
|
|
+ ctx.stroke();
|
|
|
+ }
|
|
|
+
|
|
|
+ for (var i = 0; i < this.height; i++) {
|
|
|
+ ctx.beginPath();
|
|
|
+ ctx.lineWidth = lineWidth;
|
|
|
+ ctx.moveTo(0, height * i);
|
|
|
+ ctx.lineTo(this.mapWidth, height * i);
|
|
|
+ ctx.strokeStyle = 'rgb(255,255,255,255)';
|
|
|
+ ctx.stroke();
|
|
|
+ }
|
|
|
+ var idList = [...this.mapInfo]
|
|
|
+ var fontSize = 24
|
|
|
+ if (idList.length > 1000) {
|
|
|
+ fontSize = 12
|
|
|
+ }
|
|
|
+ if (idList.length > 10000) {
|
|
|
+ fontSize = 9
|
|
|
+ }
|
|
|
+ for (var i = 0; i < idList.length; i++) {
|
|
|
+ if (parseInt(idList[i]) > 0) {
|
|
|
+ ctx.fillStyle = '#fff';
|
|
|
+ ctx.font = "bold " + fontSize + "px '微软雅黑'";
|
|
|
+ ctx.textBaseline = 'middle';
|
|
|
+ ctx.fillText(idList[i], width * this.getX(i) + width / 2 - fontSize / 3, height * this.getY(i) + height / 2);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ drawStart(e) {
|
|
|
+ var width = this.mapWidth / this.width
|
|
|
+ var height = this.mapHeight / this.height
|
|
|
+ var x = parseInt(e.offsetX / width)
|
|
|
+ var y = parseInt(e.offsetY / height)
|
|
|
+ this.addStart(y * this.width + x)
|
|
|
+ },
|
|
|
+ drawMove(e) {
|
|
|
+ var width = this.mapWidth / this.width
|
|
|
+ var height = this.mapHeight / this.height
|
|
|
+ var x = parseInt(e.offsetX / width)
|
|
|
+ var y = parseInt(e.offsetY / height)
|
|
|
+ this.changeMap(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.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
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+</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>
|
