编辑页面

2 years ago · a832b12017
10 changed files with 164 additions and 23 deletions
--- a/src/assets/img/head_title_bg.png
+++ b/src/assets/img/head_title_bg.png
--- a/src/assets/img/park-map-bg1.png
+++ b/src/assets/img/park-map-bg1.png
--- a/src/assets/img/park-map-bg2.png
+++ b/src/assets/img/park-map-bg2.png
--- a/src/view/home.vue
+++ b/src/view/home.vue
@ -27,6 +27,7 @@
 		position:absolute;
 		top:0;
 		left:0;
+		z-index: 20;
 		width:100%;
 		height:99px;
 		background-color:rgb(var(--bg));
@ -44,6 +45,38 @@
 				opacity: 0.7;
 			}
 		}
+		.btns{
+			position:absolute;
+			top: 11px;
+			left: 22px;
+			display: flex;
+			align-items: center;
+			pointer-events: all;
+			span{
+				width:112px;
+				height:41px;
+				background-image:url(@/assets/img/head_title_bg.png);
+				display:flex;
+				justify-content: center;
+				align-items: center;
+				cursor: pointer;
+				transition: all 0.3s;
+				&:hover{
+					opacity: 0.7;
+				}
+				&:before{
+					content:attr(data-title);
+					font-size:18px;
+					background-image:-webkit-linear-gradient(top, #fff,#429EFA);
+					-webkit-background-clip:text;
+					-webkit-text-fill-color:transparent;
+				}
+				&+span{
+					margin-left:10px;
+				}
+
+			}
+		}
 		.title{
 			position:absolute;
 			font-weight: bold;
@ -111,11 +144,16 @@
 </style>
 <template>
 	<div id="map" ref="mapEl"/>
-	<container :bg="!isMap?require('@/assets/img/park-bg.png'):''" :style="{'pointer-events': $route.path=='/park'?'all':'none'}">
+	<container :bg="!isMap?require('@/assets/img/park-bg.png'):''" :style="{'pointer-events': $route.path=='/park'?'none':'none'}">
 		<template #ready>
 			<mapPopover ref="popver" @click="showPopover=true"/>
 			<div class="head">
-				<svg-icon name="home" class="home"/>
+				<!-- <svg-icon name="home" class="home"/> -->
+				<div class="btns">
+					<span data-title="企业专栏" v-if="!/company$/.test($route.path)" @click="$router.push({path:'/company'})"/>
+					<span data-title="品种专栏" v-if="!/goods$/.test($route.path)" @click="$router.push({path:'/goods'})"/>
+					<span data-title="产业园区" v-if="!/park$/.test($route.path)" @click="$router.push({path:'/park'})"/>
+				</div>
 				<span class="title">{{$route.meta.title}}</span>
 			</div>
 			<el-select
@ -130,7 +168,6 @@
 				<el-option v-for="(v,k) in baseList" :key="k" :label="v.name" :value="v.id"/>
 				<template #prefix> <svg-icon name="search"/> </template>
 			</el-select>
-			<span ref='demo' style="height: 10px;width: 10px;position: absolute;top:40px;left:50px;"></span>
 			<div class="content">
 				<router-view/>
 			</div>
--- a/src/view/park/center.vue
+++ b/src/view/park/center.vue
@ -9,6 +9,8 @@
 			align-items: center;
 			justify-content: space-around;
 			margin-top:30px;
+			position:relative;
+			z-index: 20;
 			&>div{
 				background-image:url(@/assets/img/park-center-bg.png);
 				width:197px;
@ -52,7 +54,16 @@
 			}
 		}
 		&>canvas{
-			flex-grow: 1;
+			position:fixed;
+			pointer-events: all;
+			z-index: -10;
+			top:0;
+			left:0;
+			width:100%;
+			height:100%;
+		}
+		svg{
+			opacity: 0;
 		}
 	}
 </style>
@ -75,17 +86,37 @@
 			</div>
 		</div>
 		<canvas ref="map"/>
+		<svg ref="svg">
+			<text fill="#fff" dominant-baseline="text-before-edge" font-size="30">{{labelName}}</text>
+		</svg>
 	</div>
 </template>
 <script setup>
 import * as THREE from 'three'
 import { MapControls } from 'three/examples/jsm/controls/MapControls'
-import { onMounted, ref } from 'vue';
+import { nextTick, onMounted, reactive, ref } from 'vue';
 import yuanmou from '@/assets/map/yuanmou.json'
+import {SVGToBase64} from 'black-knight/lib/config/tools'
+
+	var svg=ref()
+	var labelName=ref('asdf')

 	var map=ref();
 	var scene,renderer,camera;
+	var group=new THREE.Group()

+	var region=reactive([
+		{name:"姜驿乡",lan:101.9611474,lng:26.0824059},
+		{name:"江边乡",lan:101.9111474,lng:25.9554059},
+		{name:"黄瓜园镇",lan:101.8931474,lng:25.8484059},
+		{name:"物茂乡",lan:101.7527297,lng:25.8148077},
+		{name:"新华乡",lan:101.6810768,lng:25.7208770},
+		{name:"平甸乡",lan:101.7810768,lng:25.6308770},
+		{name:"凉山乡",lan:101.978559,lng:25.83327},
+		{name:"元谋镇",lan:101.8753983,lng:25.7285168},
+		{name:"老城乡",lan:101.9035691,lng:25.581815},
+		{name:"羊街乡",lan:101.9960739,lng:25.500477},
+	])
 	function init(){
 		scene = new THREE.Scene()

@ -95,14 +126,21 @@ import yuanmou from '@/assets/map/yuanmou.json'
 		
 		camera = new THREE.PerspectiveCamera(40, map.value.clientWidth / map.value.clientHeight, 10, 1000)
 		camera.position.set(0, 100, 90)
-
+		
 		var directionalLight = new THREE.DirectionalLight(0xffffff, 0.6);
 		directionalLight.position.set(0, 0, 10).normalize();
 		scene.add(directionalLight);
 		var ambientLight = new THREE.AmbientLight(0xcccccc, 0.9);
 		scene.add(ambientLight);

+		scene.add(group)
+		group.scale.set(115,115,1)
+		group.rotation.x=-Math.PI/2
+
 		var controls = new MapControls(camera, map.value)
+		controls.enableRotate=false
+		// controls.maxPolarAngle=Math.PI/3
+		// controls.minPolarAngle=Math.PI/6
 	}
 	function addMap(){
 		var shape = new THREE.Shape()
@ -115,14 +153,12 @@ import yuanmou from '@/assets/map/yuanmou.json'
 			depth: 0, //二维面厚度
 			bevelEnabled: false,
 		} );
-		geometry.translate(-101.863986,-25.776215+0.1,0)
-		geometry.scale(140,140,1)
-		geometry.rotateX(-Math.PI/2)
+		geometry.translate(-101.863986,-25.776215,0.01)
 		var texture = new THREE.TextureLoader().load(require('@/assets/img/yuanmou_line.png'))
 		texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
 		texture.repeat.set(2.15, 1.38)
 		texture.offset.set(-0.53,-0.06)
-		var material = new THREE.MeshLambertMaterial({
+		var material = new THREE.MeshBasicMaterial({
 			transparent:true,
 			map:texture,
 			opacity:0.8,
@ -138,28 +174,92 @@ import yuanmou from '@/assets/map/yuanmou.json'
 			depth: 3, //二维面厚度
 			bevelEnabled: false,
 		} );
-		bottomGeometry.translate(-101.863986,-25.776215+0.1,-3)
-		bottomGeometry.scale(140,140,1)
-		bottomGeometry.rotateX(-Math.PI/2)
-		var materialUp=new THREE.MeshLambertMaterial({
+		bottomGeometry.translate(-101.863986,-25.776215,-3)
+		var materialUp=new THREE.MeshBasicMaterial({
+			// transparent:true,
 			color:0x000000,
 		})
 		
-		var materialSide=new THREE.MeshLambertMaterial({
+		var side = new THREE.TextureLoader().load("data:image/svg+xml,%3Csvg width='44.000000' height='24.000000' viewBox='0 0 44 24' fill='none' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3Crect id='矩形 1' y='3.000000' width='44.000000' height='3.000000' fill='%231EB5FC'/%3E %3Crect id='矩形 1' y='9.000000' width='44.000000' height='3.000000' fill='%231EB5FC'/%3E %3Crect id='矩形 1' y='15.000000' width='44.000000' height='3.000000' fill='%231EB5FC'/%3E %3Crect id='矩形 1' y='21.000000' width='44.000000' height='3.000000' fill='%231EB5FC'/%3E %3C/svg%3E")
+		side.wrapS = side.wrapT = THREE.RepeatWrapping;
+		side.repeat.set(0.1, 0.25)
+		var materialSide=new THREE.MeshBasicMaterial({
+			transparent:true,
+			map:side,
+			opacity:0.8,
+			color:0x0C89FE,
+		})
+		var mesh1=new THREE.Mesh(bottomGeometry,[materialUp,materialSide])
+		
+		group.add(mesh)
+		group.add(mesh1)
+	}
+	async function addLabel(){
+		for(var v of region){
+			//定位
+			var geometry=new THREE.PlaneGeometry(3,3)
+			var material=new THREE.MeshBasicMaterial({
+				transparent:true,
+				side:THREE.DoubleSide,
+				map:new THREE.TextureLoader().load("data:image/svg+xml,%3Csvg width='32.000000' height='37.000000' viewBox='0 0 32 37' fill='none' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3Cellipse id='椭圆 1' cx='15.500000' cy='26.000000' rx='4.500000' ry='3.000000' filter='url(%23filter_38_6_dd)' fill='%23FED44C'/%3E %3Cellipse id='椭圆 1' cx='15.500000' cy='26.500000' rx='10.000000' ry='6.000000' stroke='%23FED44C'/%3E %3Cellipse id='椭圆 1' cx='16.000000' cy='27.000000' rx='14.500000' ry='9.500000' stroke='%23FED44C'/%3E %3Cpath id='path' d='M7.32259 17.6772C7.05646 17.4381 6.80397 17.1877 6.56514 16.926C6.32631 16.6644 6.10229 16.3927 5.89308 16.111C5.68388 15.8292 5.49051 15.5389 5.31296 15.2399C5.13542 14.9409 4.97458 14.6347 4.83041 14.3213C4.68626 14.0079 4.55951 13.6888 4.45015 13.3641C4.34079 13.0393 4.24936 12.7105 4.17586 12.3776C4.10236 12.0447 4.04713 11.7093 4.01021 11.3714C3.97327 11.0336 3.9548 10.6949 3.9548 10.3554C3.9548 10.0159 3.97327 9.67717 4.01021 9.33931C4.04713 9.00145 4.10236 8.66606 4.17586 8.33315C4.24936 8.00023 4.34079 7.6714 4.45015 7.34666C4.55951 7.02192 4.68626 6.70286 4.83041 6.38946C4.97458 6.07606 5.13542 5.76985 5.31296 5.47084C5.49051 5.17183 5.68388 4.88147 5.89308 4.59976C6.10229 4.31805 6.32631 4.04636 6.56514 3.7847C6.80397 3.52303 7.05646 3.27264 7.32259 3.03357C11.8135 -1.01118 19.0955 -1.01118 23.5864 3.03357C23.8526 3.27264 24.1051 3.52304 24.344 3.78471C24.5829 4.04639 24.8069 4.3181 25.0162 4.59982C25.2254 4.88155 25.4188 5.17193 25.5964 5.47095C25.774 5.76999 25.9349 6.07622 26.079 6.38963C26.2232 6.70306 26.35 7.02216 26.4594 7.34692C26.5687 7.67168 26.6602 8.00054 26.7337 8.33349C26.8072 8.66644 26.8625 9.00185 26.8994 9.33974C26.9363 9.67763 26.9548 10.0163 26.9548 10.3559C26.9548 10.6954 26.9363 11.0341 26.8994 11.372C26.8625 11.7099 26.8072 12.0453 26.7337 12.3783C26.6602 12.7112 26.5687 13.0401 26.4594 13.3648C26.35 13.6896 26.2232 14.0087 26.079 14.3221C25.9349 14.6356 25.774 14.9418 25.5964 15.2408C25.4188 15.5398 25.2254 15.8302 25.0162 16.1119C24.8069 16.3937 24.5829 16.6654 24.344 16.927C24.1051 17.1887 23.8526 17.4391 23.5864 17.6782L15.4545 25L7.32259 17.6772ZM15.4545 13.5418C15.6811 13.5419 15.9056 13.522 16.1278 13.482C16.3501 13.442 16.5659 13.3828 16.7753 13.3044C16.9847 13.2259 17.1836 13.1296 17.3721 13.0157C17.5606 12.9017 17.7349 12.7721 17.8952 12.627C18.0555 12.4819 18.1986 12.3241 18.3245 12.1534C18.4504 11.9828 18.5568 11.8027 18.6435 11.613C18.7303 11.4234 18.7958 11.228 18.84 11.0267C18.8842 10.8253 18.9063 10.6221 18.9063 10.4168C18.9063 10.2116 18.8842 10.0083 18.84 9.80698C18.7958 9.60567 18.7303 9.41021 18.6435 9.2206C18.5568 9.03098 18.4504 8.85085 18.3245 8.68021C18.1986 8.50957 18.0555 8.35169 17.8952 8.2066C17.7349 8.06149 17.5606 7.93195 17.3721 7.81797C17.1836 7.70399 16.9847 7.60777 16.7753 7.52929C16.5659 7.45081 16.3501 7.39159 16.1278 7.35164C15.9056 7.31168 15.6811 7.29175 15.4545 7.29185C15.228 7.29195 15.0038 7.31206 14.7817 7.35216C14.5596 7.39226 14.3439 7.4516 14.1347 7.53017C13.9255 7.60873 13.7268 7.70502 13.5385 7.81903C13.3503 7.93304 13.1761 8.06259 13.016 8.20767C12.8559 8.35275 12.713 8.51058 12.5872 8.68115C12.4614 8.85173 12.3552 9.03178 12.2685 9.2213C12.1819 9.41082 12.1165 9.60617 12.0723 9.80736C12.0282 10.0085 12.0061 10.2117 12.0061 10.4168C12.0061 10.6219 12.0282 10.8251 12.0723 11.0263C12.1165 11.2275 12.1819 11.4228 12.2685 11.6123C12.3552 11.8019 12.4614 11.9819 12.5872 12.1525C12.713 12.3231 12.8559 12.4809 13.016 12.626C13.1761 12.771 13.3503 12.9006 13.5385 13.0146C13.7268 13.1286 13.9255 13.2249 14.1347 13.3035C14.3439 13.382 14.5596 13.4414 14.7817 13.4815C15.0038 13.5216 15.228 13.5417 15.4545 13.5418Z' fill-rule='nonzero' fill='url(%23paint_linear_38_5_0)'/%3E %3Cdefs%3E %3Cfilter id='filter_38_6_dd' x='5.000000' y='17.000000' width='21.000000' height='18.000000' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E %3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E %3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E %3CfeMorphology radius='2' in='' result='BackgroundImageFix'/%3E %3CfeOffset dx='0' dy='0'/%3E %3CfeGaussianBlur stdDeviation='1.33333'/%3E %3CfeColorMatrix type='matrix' values='0 0 0 0 0.99608 0 0 0 0 0.83137 0 0 0 0 0.29804 0 0 0 0.25 0'/%3E %3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect_dropShadow_1'/%3E %3CfeBlend mode='normal' in='SourceGraphic' in2='effect_dropShadow_1' result='shape'/%3E %3C/filter%3E %3CclipPath id='clip38_2'%3E %3Crect id='画板 1' width='32.000000' height='37.000000' fill='white'/%3E %3C/clipPath%3E %3ClinearGradient id='paint_linear_38_5_0' x1='15.500000' y1='0.000000' x2='15.500000' y2='25.000000' gradientUnits='userSpaceOnUse'%3E %3Cstop stop-color='%23FB7694'/%3E %3Cstop offset='1.000000' stop-color='%23FED44C'/%3E %3C/linearGradient%3E %3C/defs%3E %3C/svg%3E"),
+			})
+			var mesh=new THREE.Mesh(geometry,material)
+			mesh.renderOrder=1
+			mesh.position.set(115*(-101.863986+v.lan),1.2,115*(-25.776215+v.lng))
+			mesh.rotation.x=-Math.PI/8
+			//地名
+			labelName.value=v.name;
+			await new Promise(result=>{
+				nextTick(()=>{
+					var box=svg.value.children[0].getBBox()
+					var adsGeometry=new THREE.PlaneGeometry(box.width/14,box.height/14)
+					var adsMaterial=new THREE.MeshBasicMaterial({
+						transparent:true,
+						side:THREE.DoubleSide,
+						map:new THREE.TextureLoader().load(SVGToBase64(`<svg height="${box.height}" width="${box.width}">${svg.value.innerHTML}</svg>`))
+					})
+					var adsMesh=new THREE.Mesh(adsGeometry,adsMaterial)
+					adsMesh.renderOrder=1
+					adsMesh.position.set(115*(-101.863986+v.lan),1.2,115*(-25.776215+v.lng +0.03))
+					adsMesh.rotation.x=-Math.PI/8
+					scene.add(adsMesh)
+					result()
+				})
+			})

+			scene.add(mesh)
+		}
+	}
+	function addBG1(){
+		var bgGeometry=new THREE.PlaneGeometry(387/9.2,758/9.2)
+		var bgMaterial=new THREE.MeshBasicMaterial({
+			transparent:true,
+			depthWrite:false,
+			side:THREE.DoubleSide,
+			map:new THREE.TextureLoader().load(require('@/assets/img/park-map-bg1.png'))
 		})
-		var mesh1=new THREE.Mesh(bottomGeometry,materialUp)
+		var bgMesh=new THREE.Mesh(bgGeometry,bgMaterial)
+		bgMesh.position.set(-0.6,0.1,6.4)
+		bgMesh.rotation.x=-Math.PI/2
+		scene.add(bgMesh)
+	}
+	function addBG2(){
 		
-		scene.add(mesh)
-		scene.add(mesh1)
 	}
 	function render(){
 		renderer.render(scene, camera);
 		requestAnimationFrame(render)
 	}
 	onMounted(()=>{
-		init()
-		addMap()
-		render()
+		nextTick(async()=>{
+			init()
+			addMap()
+			addLabel()
+			render()
+			// setTimeout(()=>{
+				addBG1()
+				addBG2()
+			// },3000)
+		})
 	})
 </script>
--- a/src/view/park/index.vue
+++ b/src/view/park/index.vue
@ -4,6 +4,8 @@
 		display:flex;
 		flex-direction: column;
 		justify-content: space-evenly;
+		position:relative;
+		z-index: 20;
 	}
 	.left{
 		flex-shrink: 0;
--- a/src/view/park/left_2.vue
+++ b/src/view/park/left_2.vue
@ -8,6 +8,7 @@
 				width:140px;
 				height:129px+28;
 				position:relative;
+				pointer-events:all;
 				&:before{
 					content:"";
 					position:absolute;
--- a/src/view/park/left_3.vue
+++ b/src/view/park/left_3.vue
@ -1,6 +1,7 @@
 <style lang="less" scoped>
 	.left_3{
 		.dv-scroll-board{
+			pointer-events:all;
 			&:deep>.header{
 				background:rgba(12, 44, 78, 0.7)!important;
 				box-shadow: inset 0 0 10px 2px rgba(12, 137, 254, 0.5);
--- a/src/view/park/right_2.vue
+++ b/src/view/park/right_2.vue
@ -76,7 +76,7 @@
 <template>
 	<div class="right_2">
 		<dTitle title="产能预估" icon="5"/>
-		<v-echarts :option="opt" style="height:194px;"/>
+		<v-echarts :option="opt" style="height:194px;pointer-events:all;"/>
 		<div class="number">
 			<span class="vegetable"><span>四季豆</span></span>
 			<table>
--- a/src/view/park/right_3.vue
+++ b/src/view/park/right_3.vue
@ -32,7 +32,7 @@
 			<span style="--c:#10CC40;">2022</span>
 			<span style="--c:#00E4FF;">2023</span>
 		</dTitle>
-		<v-echarts :option="opt" autoresize style="height:238px"/>
+		<v-echarts :option="opt" autoresize style="height:238px;pointer-events:all;"/>
 	</div>
 </template>
 <script setup>