ry-vue-map 0.2.1 → 0.2.3

package/src/views/pdf/index.vue

@@ -0,0 +1,24 @@
+<template>
+  <vue-office-pdf :src="pdf" @rendered="rendered"/>
+</template>
+
+<script>
+//引入VueOfficePdf组件
+import VueOfficePdf from '@vue-office/pdf'
+
+export default {
+  components:{
+    VueOfficePdf
+  },
+  data(){
+    return {
+      pdf: 'http://static.shanhuxueyuan.com/test.pdf' //设置文档地址
+    }
+  },
+  methods:{
+    rendered(){
+      console.log("渲染完成")
+    }
+  }
+}
+</script>

package/src/views/staticMap/index.vue

@@ -0,0 +1,91 @@
+<template>
+	<div class="map-panel">
+		<RyStaticMap 
+		  :url="url" 
+		  :isRyMapTool="true" 
+		  :zoom="16" 
+		  :minZoom="14" 
+		  :isCrossHair="true" 
+		  :isShowDrawTool="true" 
+		  :isDrag="true" 
+		  :bindMapClick="true"  
+		   class="map-style" 
+		  :isHideAreaAndKM="true"
+		  :isShowRangingTool="false"
+		  @drawSuccess="drawSuccess"
+		  @drawError="drawError"
+		  @load="load" 
+		  @initLayersEvent="initLayersEvent" 
+		  @mapClick="mapClick">
+		  <template #polygon="{mapDto}">
+                <ry-polygon  :map="mapDto.map" :isShow="true"  :isFit="false" :model="polygonModel"  ></ry-polygon> 
+		  </template>
+		  </RyStaticMap>
+	</div>
+</template>
+
+<script>
+	import RyStaticMap from '@/components/maps/ryStaticMap/src/index.vue';
+
+	export default {
+		components: {
+			RyStaticMap,
+		},
+		data() {
+			return {
+				map: null,
+                url:require('@/assets/map.png'),
+				polygonModel:null,
+			};
+		},
+		created() {
+       
+        },
+		mounted() {},
+		methods: {
+			load(obj) {
+			},
+			initLayersEvent(obj) {
+				// console.log(obj);
+			},
+			mapClick(e) {
+				console.log(e);
+			},
+			drawSuccess({
+             delete: del,
+             geoJson
+          }) {
+				this.polygonModel = {
+					fillColor: 'rgba(244,20,20,0.4)',
+					stroke: 'rgba(244,20,20,0.4)',
+					width: 4,
+					text: '',
+					geo: geoJson,
+					id: 'ceshi',
+				};
+				del();
+				console.log(this.polygonModel);
+			},
+			drawError(obj) {
+				console.log(obj);
+			},
+
+		},
+	}
+</script>
+
+<style scoped>
+	* {
+		padding: 0;
+		margin: 0;
+		box-sizing: border-box;
+	}
+
+	.map-panel {
+		height: 100vh;
+	}
+
+	.map-style {
+		height: 100%;
+	}
+</style>

package/src/views/tree/index.vue

@@ -0,0 +1,193 @@
+
+<template>
+  <div class="tree-style">
+      <el-tree
+        :data="data"
+        show-checkbox
+        default-expand-all
+        node-key="id"
+        ref="tree"
+        highlight-current
+        :props="defaultProps"
+		@check="onCheck"
+		check-strictly
+		>
+      </el-tree>
+	  
+	  <div class="buttons">
+	    <el-button @click="getCheckedNodes">通过 node 获取</el-button>
+	    <el-button @click="getCheckedKeys">通过 key 获取</el-button>
+	    <el-button @click="setCheckedNodes">通过 node 设置</el-button>
+	    <el-button @click="setCheckedKeys">通过 key 设置</el-button>
+	    <el-button @click="resetChecked">清空</el-button>
+	  </div>
+
+	  
+  </div>
+</template>
+
+
+<script>
+  export default {
+    methods: {
+		searchParent (map, id) {
+		    let t = []
+		    for (let i = 0; i < map.length; i++) {
+		        const e = map[i]
+		        if (e.id == id) {
+		            //若查询到对应的节点，则直接返回
+		            t.push(e)
+		            break
+		        } else if (e.children && e.children.length != 0) {
+		            //判断是否还有子节点，若有对子节点进行循环调用
+		            let p = this.searchParent(e.children, id)
+		            //若p的长度不为0，则说明子节点在该节点的children内，记录此节点，并终止循环
+		            if (p.length !== 0) {
+		                p.unshift(e)
+		                t = p
+		                break
+		            }
+		        }
+		    }
+		    return t;
+		},
+		
+		 treeToArray(tree) {
+		    if (!Array.isArray(tree) || !tree.length) return [];
+		    let res = []
+		    tree.forEach(v => {
+		        res.push(v)
+		        if (v.children) {
+		            res.push(...this.treeToArray(v.children))
+		        }
+		    })
+		    return res;
+		},
+		
+		convertTreeToArray(arr, parentId = null){
+		    const res = [];
+			let i=1;
+			
+		    arr.forEach(item => {
+		        if (item.parentId === parentId) {
+		            const children = this.convertTreeToArray(arr.filter(v => v.parentId !== parentId), item.id);
+		            const {id,label,parentId} = item;
+				    res.push({ id,label,parentId,l:i});
+		        }
+		    });
+			console.log('执行了')
+		    i++;
+			return res;
+		},
+	
+      getCheckedNodes() {
+        console.log(this.$refs.tree.getCheckedNodes());
+      },
+      getCheckedKeys() {
+        console.log(this.$refs.tree.getCheckedKeys());
+      },
+      setCheckedNodes() {
+        this.$refs.tree.setCheckedNodes([{
+          id: 5,
+          label: '二级 2-1'
+        }, {
+          id: 9,
+          label: '三级 1-1-1'
+        },
+		{
+			id: 3,
+			label: '一级 3',
+		}
+		]);
+      },
+      setCheckedKeys() {
+        this.$refs.tree.setCheckedKeys([3]);
+      },
+      resetChecked() {
+        this.$refs.tree.setCheckedKeys([]);
+      },
+	  onCheck(node,checkedKeys){
+		  // console.log(node);
+		  	console.log(this.searchParent(this.data,node.id));
+			const arr= this.searchParent(this.data,node.id);
+			if(arr.length){
+			   this.$refs.tree.setCheckedKeys(arr.map(r=> r.id)); 
+			}
+		 //  if(checkedNodes.children && checkedNodes.children.length){
+			// const ids =   checkedNodes.children.map(r=> r.id);
+			// console.log(checkedNodes);
+		 //  }
+	  }
+    },
+
+    data() {
+      return {
+        data: [{
+          id: 1,
+          label: '一级 1',
+		  parentId:0,
+          children: [{
+            id: 4,
+            label: '二级 1-1',
+	        parentId:1,
+            children: [{
+              id: 9,
+		      parentId:4,
+              label: '三级 1-1-1'
+            }, {
+              id: 10,
+	            parentId:4,
+              label: '三级 1-1-2'
+            }]
+          }]
+        }, {
+          id: 2,
+          label: '一级 2',
+		 parentId:0,
+          children: [{
+            id: 5,
+            label: '二级 2-1',
+	        parentId:2,
+          }, {
+            id: 6,
+            label: '二级 2-2',
+		    parentId:2,
+          }]
+        }, {
+          id: 3,
+          label: '一级 3',
+		  parentId:0,
+          children: [{
+            id: 7,
+            label: '二级 3-1',
+		    parentId:3,
+          }, {
+            id: 8,
+            label: '二级 3-2',
+			parentId:3,
+          }]
+        }],
+        defaultProps: {
+          children: 'children',
+          label: 'label'
+        },
+		arr:[],
+      };
+    },
+	created(){
+		// this.setArr(this.data);
+	
+	    this.arr= this.treeToArray(this.data)?.map(r=> {return{
+			id:r.id,
+			label:r.label,
+			parentId:r.parentId,
+		}});
+	
+		console.log(this.searchParent(this.data,10));
+		console.log(this.arr);	
+		  
+	
+	}
+  };
+</script>
+

package/src/views/vectorMap/index.vue

@@ -1,6 +1,16 @@
 <template>
 	<div class="map-panel" >
-		<RyVectorMap :isDrag="true" :bindMapClick="true" :modelArr="modelArr" class="map-style" @load="load" @initLayersEvent="initLayersEvent" @mapClick="mapClick"></RyVectorMap>
+		<RyVectorMap 
+		:isDrag="true" 
+		:bindMapClick="true" 
+		:modelArr="modelArr" 
+		class="map-style" 
+		@load="load" 
+		@initLayersEvent="initLayersEvent"
+		@mapClick="mapClick"
+		@drawSuccess="drawSuccess($event)"
+		@drawError="drawError($event)"
+		></RyVectorMap>
 	</div>
 </template>
 
@@ -21,7 +31,7 @@
 				map: null,
 				vmap: null,
 				modelArr:[],
-				
+				polygonModel:null,
 			};
 		},
 		created() {
@@ -29,7 +39,6 @@
 		mounted(){},
 		methods: {
 			load(obj) {
-				console.log(obj.map,obj.vmap);
 				this.initData();
 			},
 			initData(){
@@ -58,7 +67,19 @@
 			},
 			mapClick(e){
 				console.log(e);
-			}
+			},
+					drawSuccess(obj) {
+				this.polygonModel = {
+					fillColor: '#000',
+					stroke: '#fff',
+					width: 4,
+					text: '',
+					geo: obj.geoJson,
+					id: 'ceshi',
+				};
+				console.log(this.polygonModel);
+			},
+			drawError(obj) {},
 		
 		},
 	}
@@ -78,4 +99,4 @@
 	.map-style{
 		 height: 100%;
 	}
-</style>
+</style>