地图绘制

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

@@ -27,15 +27,15 @@
                     <el-button type="primary" @click="nowAdd=2,bgMove=false">添加主干道</el-button>
                 </el-form-item>
                 <el-form-item>
-                    <!-- <el-button type="warning">保存</el-button> -->
+                    <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="../assets/demo_picture.jpg" class="bgImg" :style="{height:totalHeight-100+'px'}" alt="">
+            <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+'%',height:100/height+'%',backgroundColor:color[item]}"></div>
+                <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>
@@ -47,6 +47,31 @@ import zh from 'date-fns/locale/zh_cn'
 export default {
     created() {
 
+        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.rate = res.data.mapRate || 1;
+                    if (res.data.mapInfo) {
+                        this.mapInfo = res.data.mapInfo.split('');
+                    }
+
+                    this.mapImage = res.data.mapSprite || require('../assets/demo_picture.jpg');
+
+
+                }
+            })
+        }
+
+
     },
     data() {
         return {
@@ -64,7 +89,8 @@ export default {
             nowAdd: 0,
             startMoveIndex: 0,
             nowMoveIndex: 0,
-            nowMapInfo: []
+            nowMapInfo: [],
+            mapImage: '',
         }
     },
     mounted() {
@@ -86,7 +112,7 @@ export default {
             }
         },
         createMap() {
-            var sum = this.width / this.rate * this.height / this.rate
+            var sum = this.width * this.rate * this.height * this.rate
             var list = []
             for (var i = 0; i < sum; i++) {
                 list.push(0)
@@ -111,10 +137,10 @@ export default {
 
         },
         getX(index) {
-            return index % (this.width / this.rate)
+            return index % (this.width * this.rate)
         },
         getY(index) {
-            return parseInt(index / (this.width / this.rate))
+            return parseInt(index / (this.width * this.rate))
         },
         getChangeList(index1, index2) {
             var list = []
@@ -130,8 +156,36 @@ export default {
             return list
         },
         getIndex(x, y) {
-            return y * (this.width / this.rate) + x
-        }
+            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('失败')
+                    }
+                });
+
+            }
+        },
+
+
     }
 }
 

src/main/vue/src/pages/LandMarks.vue

@@ -103,7 +103,7 @@
 
             <el-table-column v-if="isColumnShow('frontLevelId')" prop="frontLevelId" label="上级地标ID" min-width="100">
             </el-table-column>
-            <el-table-column label="操作" align="center" fixed="right" min-width="150">
+            <el-table-column label="操作" align="center" fixed="right" min-width="220">
                 <template slot-scope="scope">
                     <!-- <el-button @click="$router.push({path:'/VuforiaImageInfos',query:{column:scope.row.id+',landMarkId'}})" type="primary" size="small" plain>识别图
             </el-button>
@@ -112,6 +112,7 @@
                     <el-button @click="$router.push({path:'/AimPlacePositions',query:{column:scope.row.id+',ownedLandMarkId'}})" type="primary" size="small" plain>目标点位置
             </el-button> -->
                     <el-button @click="editRow(scope.row)" type="primary" size="mini" plain>编辑</el-button>
+                    <el-button @click="drawMapInfo(scope.row)" type="primary" size="mini" plain>地图</el-button>
                     <el-button @click="deleteRow(scope.row)" type="danger" size="mini" plain>删除</el-button>
                 </template>
             </el-table-column>
@@ -293,7 +294,7 @@ export default {
                 {
                     label: '地图信息',
                     value: 'mapInfo',
-                    show: true
+                    show: false
                 },
                 {
                     label: '地图宽',
@@ -508,6 +509,14 @@ export default {
                 }
             })
         },
+        drawMapInfo(row) {
+            this.$router.push({
+                path: '/drugContent',
+                query: {
+                    id: row.id,
+                }
+            })
+        },
         operation1() {
             this.$notify({
                 title: '提示',

src/main/webapp/WEB-INF/html/admin.html

@@ -1 +1 @@
-<!DOCTYPE html><html><head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><meta name=referrer content=origin><title>管理后台</title><link rel=icon href=/static/favicon.ico><script src=/static/polyfill.min.js></script><script src=/static/fontawesome-v5.2.0.js></script><link href=/static/css/admin.c14e12d11a837e928825ffcf333bfd15.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=/static/js/manifest.b0ca432bd7a3678a4eab.js></script><script type=text/javascript src=/static/js/vendor.87388ab3d5eb77ae8453.js></script><script type=text/javascript src=/static/js/admin.9f15d04a4f46e56ce472.js></script></body></html>
+<!DOCTYPE html><html><head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><meta name=referrer content=origin><title>管理后台</title><link rel=icon href=/static/favicon.ico><script src=/static/polyfill.min.js></script><script src=/static/fontawesome-v5.2.0.js></script><link href=/static/css/admin.f89861d86b9595166f7ca0175db9c77b.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=/static/js/manifest.a597396432a08e028440.js></script><script type=text/javascript src=/static/js/vendor.5100559a821335090ef4.js></script><script type=text/javascript src=/static/js/admin.f5dc98b86a84993fc744.js></script></body></html>

src/main/webapp/WEB-INF/html/loginAdmin.html

@@ -1 +1 @@
-<!DOCTYPE html><html><head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><meta name=referrer content=origin><title>管理后台</title><link rel=icon href=/static/favicon.ico><script src=/static/polyfill.min.js></script><link href=/static/css/loginAdmin.9647b664948af8f1752259b9d1c6528e.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=/static/js/manifest.b0ca432bd7a3678a4eab.js></script><script type=text/javascript src=/static/js/vendor.87388ab3d5eb77ae8453.js></script><script type=text/javascript src=/static/js/loginAdmin.ff5a92fe0fb6a486056d.js></script></body></html>
+<!DOCTYPE html><html><head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><meta name=referrer content=origin><title>管理后台</title><link rel=icon href=/static/favicon.ico><script src=/static/polyfill.min.js></script><link href=/static/css/loginAdmin.9647b664948af8f1752259b9d1c6528e.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=/static/js/manifest.a597396432a08e028440.js></script><script type=text/javascript src=/static/js/vendor.5100559a821335090ef4.js></script><script type=text/javascript src=/static/js/loginAdmin.2af66e4cf673b4ccb2e2.js></script></body></html>

src/main/webapp/static/js/59.a0783c67e57349c11484.js → src/main/webapp/static/js/60.5d64b974cfb3c605fd85.js

@@ -1 +1 @@
-webpackJsonp([59],{"5LNU":function(e,t){},Wh3M:function(e,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r={render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-form",{ref:"form",staticStyle:{"max-width":"500px"},attrs:{model:e.formData,rules:e.rules,"label-width":"80px","label-position":"right",size:"small"}},[a("el-form-item",{attrs:{prop:"dataruleName",label:"权限名称"}},[a("el-input",{model:{value:e.formData.dataruleName,callback:function(t){e.$set(e.formData,"dataruleName",t)},expression:"formData.dataruleName"}})],1),e._v(" "),a("el-form-item",{attrs:{prop:"permission",label:"权限标识"}},[a("el-input",{model:{value:e.formData.permission,callback:function(t){e.$set(e.formData,"permission",t)},expression:"formData.permission"}})],1),e._v(" "),a("el-form-item",[a("el-button",{attrs:{loading:e.$store.state.fetchingData,type:"primary"},on:{click:e.onSave}},[e._v("保存")]),e._v(" "),a("el-button",{on:{click:function(t){e.$router.go(-1)}}},[e._v("取消")])],1)],1)],1)},staticRenderFns:[]};var s=a("VU/8")({created:function(){var e=this;this.$route.query.id&&this.$http.get({url:"/sysDatarule/getOne",data:{id:this.$route.query.id}}).then(function(t){t.success&&(e.formData=t.data)})},data:function(){return{saving:!1,formData:{},rules:{dataruleName:[{required:!0,message:"请填写权限名称",trigger:"blur"}],permission:[{required:!0,message:"请填写权限标识",trigger:"blur"}]},menus:[]}},methods:{onSave:function(){var e=this;this.$refs.form.validate(function(t){if(!t)return!1;e.submit()})},submit:function(){var e=this;this.$http.post({url:this.formData.id?"/sysDatarule/update":"/sysDatarule/save",data:this.formData}).then(function(t){t.success?(e.$message.success("成功"),e.$router.go(-1)):e.$message.warning("失败")})}}},r,!1,function(e){a("5LNU")},"data-v-3122cd72",null);t.default=s.exports}});
+webpackJsonp([60],{"5LNU":function(e,t){},Wh3M:function(e,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r={render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-form",{ref:"form",staticStyle:{"max-width":"500px"},attrs:{model:e.formData,rules:e.rules,"label-width":"80px","label-position":"right",size:"small"}},[a("el-form-item",{attrs:{prop:"dataruleName",label:"权限名称"}},[a("el-input",{model:{value:e.formData.dataruleName,callback:function(t){e.$set(e.formData,"dataruleName",t)},expression:"formData.dataruleName"}})],1),e._v(" "),a("el-form-item",{attrs:{prop:"permission",label:"权限标识"}},[a("el-input",{model:{value:e.formData.permission,callback:function(t){e.$set(e.formData,"permission",t)},expression:"formData.permission"}})],1),e._v(" "),a("el-form-item",[a("el-button",{attrs:{loading:e.$store.state.fetchingData,type:"primary"},on:{click:e.onSave}},[e._v("保存")]),e._v(" "),a("el-button",{on:{click:function(t){e.$router.go(-1)}}},[e._v("取消")])],1)],1)],1)},staticRenderFns:[]};var s=a("VU/8")({created:function(){var e=this;this.$route.query.id&&this.$http.get({url:"/sysDatarule/getOne",data:{id:this.$route.query.id}}).then(function(t){t.success&&(e.formData=t.data)})},data:function(){return{saving:!1,formData:{},rules:{dataruleName:[{required:!0,message:"请填写权限名称",trigger:"blur"}],permission:[{required:!0,message:"请填写权限标识",trigger:"blur"}]},menus:[]}},methods:{onSave:function(){var e=this;this.$refs.form.validate(function(t){if(!t)return!1;e.submit()})},submit:function(){var e=this;this.$http.post({url:this.formData.id?"/sysDatarule/update":"/sysDatarule/save",data:this.formData}).then(function(t){t.success?(e.$message.success("成功"),e.$router.go(-1)):e.$message.warning("失败")})}}},r,!1,function(e){a("5LNU")},"data-v-3122cd72",null);t.default=s.exports}});

src/main/webapp/static/js/68.4fd31c8d56549137d57b.js → src/main/webapp/static/js/69.2703b4c548ee3ef7de8d.js

@@ -1 +1 @@
-webpackJsonp([68],{izdZ:function(t,e,r){"use strict";Object.defineProperty(e,"__esModule",{value:!0});r("NYxO");var i={created:function(){this.getIframeSrc()},data:function(){return{iframeSrc:"/404"}},computed:{height:function(){return window.innerHeight-104+"px"}},methods:{getIframeSrc:function(){this.iframeSrc=this.$route.query.code}},watch:{$route:function(){this.getIframeSrc()}}},n={render:function(){var t=this.$createElement;return(this._self._c||t)("iframe",{staticClass:"iframe",attrs:{src:this.iframeSrc,height:this.height,width:"100%"}})},staticRenderFns:[]};var c=r("VU/8")(i,n,!1,function(t){r("xnY9")},"data-v-04168182",null);e.default=c.exports},xnY9:function(t,e){}});
+webpackJsonp([69],{izdZ:function(t,e,r){"use strict";Object.defineProperty(e,"__esModule",{value:!0});r("NYxO");var i={created:function(){this.getIframeSrc()},data:function(){return{iframeSrc:"/404"}},computed:{height:function(){return window.innerHeight-104+"px"}},methods:{getIframeSrc:function(){this.iframeSrc=this.$route.query.code}},watch:{$route:function(){this.getIframeSrc()}}},n={render:function(){var t=this.$createElement;return(this._self._c||t)("iframe",{staticClass:"iframe",attrs:{src:this.iframeSrc,height:this.height,width:"100%"}})},staticRenderFns:[]};var c=r("VU/8")(i,n,!1,function(t){r("xnY9")},"data-v-04168182",null);e.default=c.exports},xnY9:function(t,e){}});