修改页面

src/assets/svg/fullScreen.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1682062504868" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2582" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M981.333333 682.666667c-25.6 0-42.666667 17.066667-42.666666 42.666666v192c0 12.8-8.533333 21.333333-21.333334 21.333334H725.333333c-25.6 0-42.666667 17.066667-42.666666 42.666666s17.066667 42.666667 42.666666 42.666667h192c59.733333 0 106.666667-46.933333 106.666667-106.666667V725.333333c0-25.6-17.066667-42.666667-42.666667-42.666666zM298.666667 938.666667H106.666667c-12.8 0-21.333333-8.533333-21.333334-21.333334V725.333333c0-25.6-17.066667-42.666667-42.666666-42.666666s-42.666667 17.066667-42.666667 42.666666v192C0 977.066667 46.933333 1024 106.666667 1024H298.666667c25.6 0 42.666667-17.066667 42.666666-42.666667s-17.066667-42.666667-42.666666-42.666666zM917.333333 0H725.333333c-25.6 0-42.666667 17.066667-42.666666 42.666667s17.066667 42.666667 42.666666 42.666666h192c12.8 0 21.333333 8.533333 21.333334 21.333334V298.666667c0 25.6 17.066667 42.666667 42.666666 42.666666s42.666667-17.066667 42.666667-42.666666V106.666667C1024 46.933333 977.066667 0 917.333333 0zM42.666667 341.333333c25.6 0 42.666667-17.066667 42.666666-42.666666V106.666667c0-12.8 8.533333-21.333333 21.333334-21.333334H298.666667c25.6 0 42.666667-17.066667 42.666666-42.666666s-17.066667-42.666667-42.666666-42.666667H106.666667C46.933333 0 0 46.933333 0 106.666667V298.666667c0 25.6 17.066667 42.666667 42.666667 42.666666z" p-id="2583"></path><path d="M183.466667 277.333333v469.333334c0 51.2 42.666667 98.133333 98.133333 98.133333h469.333333c51.2 0 98.133333-42.666667 98.133334-98.133333v-469.333334c0-51.2-42.666667-98.133333-98.133334-98.133333h-469.333333c-55.466667 4.266667-98.133333 46.933333-98.133333 98.133333z m597.333333 0v469.333334c0 17.066667-12.8 34.133333-34.133333 34.133333h-469.333334c-17.066667 0-34.133333-12.8-34.133333-34.133333v-469.333334c0-17.066667 12.8-34.133333 34.133333-34.133333h469.333334c17.066667 4.266667 34.133333 17.066667 34.133333 34.133333z" p-id="2584"></path></svg>

src/router/index.js

@@ -6,13 +6,13 @@ export const menu = [
 	{
 		path:"/",
 		name:"home",
-		redirect:"/company",
+		redirect:"/park",
 		component:()=>import('@/view/home.vue'),
 		meta:{ },
 		children:[
+			{path:"park",name:"park",meta:{title:"元谋县国家现代农业产业园"},component:()=>import('@/view/park/index.vue')},
 			{path:"company",name:"company",meta:{title:"企业专栏"},component:()=>import('@/view/company/index.vue')},
 			{path:"goods",name:"goods",meta:{title:"品种专栏"},component:()=>import('@/view/goods/index.vue')},
-			{path:"park",name:"park",meta:{title:"产业园区门户"},component:()=>import('@/view/park/index.vue')},
 		]
 	},
 ];

src/view/home.vue

@@ -40,6 +40,7 @@
 			top:10px;
 			left:10px;
 			cursor: pointer;
+			pointer-events: all;
 			transition: all 0.3s;
 			&:hover{
 				opacity: 0.7;
@@ -78,15 +79,30 @@
 			}
 		}
 		.title{
+			letter-spacing: 5px;
 			position:absolute;
 			font-weight: bold;
-			font-size:52px;
+			font-size:48px;
 			background-image:-webkit-linear-gradient(top, #fff,#429EFA);
 			-webkit-background-clip:text;
 			-webkit-text-fill-color:transparent;
 			left:50%;
 			transform: translate(-50%,10px);
 		}
+		.time{
+			position:absolute;
+			right: 68px;
+			top: 24px;
+			color:#1587FC;
+			font-size:18px;
+		}
+		.fullScreen{
+			position:absolute;
+			right:20px;
+			top:24px;
+			color:#1587FC;
+			font-size:30px;
+		}
 	}
 	&>.el-select{
 		pointer-events: all;
@@ -148,13 +164,14 @@
 		<template #ready>
 			<mapPopover ref="popver" @click="showPopover=true"/>
 			<div class="head">
-				<!-- <svg-icon name="home" class="home"/> -->
-				<div class="btns">
+				<div class="btns" v-if="/park$/.test($route.path)">
 					<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>
+				<svg-icon name="home" class="home" v-else @click="$router.push({path:'/park'})"/>
 				<span class="title">{{$route.meta.title}}</span>
+				<span class="time">{{time}}11</span>
+				<svg-icon class="fullScreen" name="fullScreen"/>
 			</div>
 			<el-select
 				v-if="isMap"
@@ -188,6 +205,8 @@ import mapPopover from './mapPopover.vue'
 	var baseList=shallowRef([{name:"1",value:'1'}])
 	var loading=ref(false)
 	var base=ref('')
+	var time=ref(new Date().format('yyyy-MM-dd hh:mm'))
+	var timeOut=null
 
 	var region=[
 		{
@@ -247,7 +266,15 @@ import mapPopover from './mapPopover.vue'
 
 		console.log(e,'----eeee------')
 	}
+	function refreshTime(){
+		clearTimeout(timeOut)
+		timeOut=setTimeout(()=>{
+			time.value=new Date().format('yyyy-MM-dd hh:mm')
+		},1000*60)
+	}
 	onMounted(()=>{
+		refreshTime()
+
 		AMAPLoader.load({
 			key:"3b999eeef15d7b6ca6a3fd0c9531160d",
 			version:"2.0",
@@ -320,5 +347,6 @@ import mapPopover from './mapPopover.vue'
 	})
 	onUnmounted(()=>{
 		window.removeEventListener('click')
+		clearTimeout(refreshTime)
 	})
 </script>

src/view/park/center.vue

@@ -85,7 +85,7 @@
 				</div>
 			</div>
 		</div>
-		<canvas ref="map"/>
+		<canvas ref="map" @click="tap"/>
 		<svg ref="svg">
 			<text :fill="labelName.color" dominant-baseline="text-before-edge" font-size="30" font-weight="900" v-html="labelName.text"></text>
 		</svg>
@@ -104,7 +104,7 @@ import {SVGToBase64} from 'black-knight/lib/config/tools'
 		color:"#fff"
 	})
 
-	var offset=reactive({x:0,y:0,z:0})
+	var offset=reactive({x:0,y:0,z:0,w:0,h:0})
 
 	var map=ref();
 	var scene,renderer,camera;
@@ -133,6 +133,7 @@ import {SVGToBase64} from 'black-knight/lib/config/tools'
 		
 		camera = new THREE.PerspectiveCamera(40, map.value.clientWidth / map.value.clientHeight, 10, 1000)
 		camera.position.set(0, 100, 90)
+		window.c=camera
 		
 		var directionalLight = new THREE.DirectionalLight(0xffffff, 0.6);
 		directionalLight.position.set(0, 0, 10).normalize();
@@ -146,8 +147,9 @@ import {SVGToBase64} from 'black-knight/lib/config/tools'
 
 		var controls = new MapControls(camera, map.value)
 		// controls.enableRotate=false
-		controls.maxPolarAngle=Math.PI/2.7
-		controls.minPolarAngle=Math.PI/8
+		controls.maxPolarAngle=Math.PI/2
+		controls.minPolarAngle=0
+		controls.maxZoom=1.3
 	}
 	function addMap(){
 		var shape = new THREE.Shape()
@@ -155,27 +157,6 @@ import {SVGToBase64} from 'black-knight/lib/config/tools'
 		for (var i of yuanmou.slice(1)){
 			shape.lineTo(...i)
 		}
-		
-		var geometry = new THREE.ExtrudeBufferGeometry( shape, {
-			depth: 0, //二维面厚度
-			bevelEnabled: false,
-		} );
-		geometry.translate(-center[0],-center[1],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.MeshBasicMaterial({
-			transparent:true,
-			map:texture,
-			opacity:0.8,
-			color:0x0C89FE,
-		})
-		var mesh = new THREE.Mesh( geometry, material );
-		//添加边线
-		var line = new THREE.LineBasicMaterial({ color: 0x0C89FE })
-		var side = new THREE.LineSegments( new THREE.EdgesGeometry(geometry,1), line)
-		mesh.add(side)
 		//底边
 		var bottomGeometry=new THREE.ExtrudeBufferGeometry( shape, {
 			depth: 5, //二维面厚度
@@ -184,8 +165,8 @@ import {SVGToBase64} from 'black-knight/lib/config/tools'
 		bottomGeometry.translate(-center[0],-center[1],-5)
 		var mian = new THREE.TextureLoader().load(require('@/assets/img/map_bg.png'))
 		mian.wrapS = mian.wrapT = THREE.RepeatWrapping;
-		mian.repeat.set(1.87, 1.28)
-		mian.offset.set(0.04,0.56)
+		mian.repeat.set(1.964, 1.346)
+		mian.offset.set(0.465,-0.141)
 		var materialUp=new THREE.MeshBasicMaterial({
 			// transparent:true,
 			map: mian,
@@ -202,8 +183,6 @@ import {SVGToBase64} from 'black-knight/lib/config/tools'
 			color:0x0C89FE,
 		})
 		var mesh1=new THREE.Mesh(bottomGeometry,[materialUp,materialSide])
-		
-		group.add(mesh)
 		group.add(mesh1)
 	}
 	async function addLabel(){
@@ -226,7 +205,7 @@ import {SVGToBase64} from 'black-knight/lib/config/tools'
 			await new Promise(result=>{
 				nextTick(()=>{
 					var box=svg.value.children[0].getBBox()
-					var adsGeometry=new THREE.PlaneGeometry(box.width/14,box.height/14)
+					var adsGeometry=new THREE.PlaneGeometry(box.width/16,box.height/16)
 					var adsMaterial=new THREE.MeshBasicMaterial({
 						transparent:true,
 						side:THREE.DoubleSide,
@@ -246,7 +225,7 @@ import {SVGToBase64} from 'black-knight/lib/config/tools'
 		}
 	}
 	function addBG1(){
-		var bgGeometry=new THREE.PlaneGeometry(387/9.2,758/9.2)
+		var bgGeometry=new THREE.PlaneGeometry(253/6,464/5.9)
 		var bgMaterial=new THREE.MeshBasicMaterial({
 			transparent:true,
 			depthWrite:false,
@@ -254,7 +233,7 @@ import {SVGToBase64} from 'black-knight/lib/config/tools'
 			map:new THREE.TextureLoader().load(require('@/assets/img/park-map-bg1.png'))
 		})
 		var bgMesh=new THREE.Mesh(bgGeometry,bgMaterial)
-		bgMesh.position.set(115*(-center[0]+101.856473),0.1,115*(-center[1]+25.815215))
+		bgMesh.position.set(115*(-center[0]+101.859473),0.1,115*(-center[1]+25.825215))
 		bgMesh.rotation.x=-Math.PI/2
 		bgMesh.renderOrder=1
 		scene.add(bgMesh)
@@ -267,14 +246,14 @@ import {SVGToBase64} from 'black-knight/lib/config/tools'
 			map:new THREE.TextureLoader().load(require('@/assets/img/park-map-bg2.png'))
 		})
 		var bgMesh=new THREE.Mesh(bgGeometry,bgMaterial)
-		bgMesh.position.set(115*(-center[0]+101.856473),0.2,115*(-center[1]+25.820215))
+		bgMesh.position.set(115*(-center[0]+101.855473),0.2,115*(-center[1]+25.827215))
 		bgMesh.rotation.x=-Math.PI/2
 		bgMesh.renderOrder=2
 		scene.add(bgMesh)
 		//标记
 		await setLine(
 			[101.800373,0.21,25.565215],
-			{text:"现代种业联农带农业示范区",color:"#10CC40"},
+			{text:"现代种业联农带农业示范区",color:"#10CC40",order:2},
 			[
 				0.02, 2, 0,
 				0.2, 2, 0
@@ -282,7 +261,7 @@ import {SVGToBase64} from 'black-knight/lib/config/tools'
 		)
 		await setLine(
 			[101.750373,0.21,25.725215],
-			{text:"<tspan>现代冬早蔬菜联农</tspan><tspan x='0' y='33'>带农业产业示范区</tspan>",color:"#10CC40"},
+			{text:"<tspan>现代冬早蔬菜联农</tspan><tspan x='0' y='36'>带农业产业示范区</tspan>",color:"#10CC40",order:2},
 			[
 				-0.02, 2, 0,
 				-0.16, 2, 0
@@ -290,7 +269,7 @@ import {SVGToBase64} from 'black-knight/lib/config/tools'
 		)
 		await setLine(
 			[101.900373,0.21,26.065215],
-			{text:"<tspan>种业和蔬菜融合联农</tspan><tspan x='0' y='33'>带农业示范区</tspan>",color:"#10CC40"},
+			{text:"<tspan>种业和蔬菜融合联农</tspan><tspan x='0' y='36'>带农业示范区</tspan>",color:"#10CC40",order:2},
 			[
 				-0.02, 2, 0,
 				-0.16, 2, 0
@@ -311,7 +290,7 @@ import {SVGToBase64} from 'black-knight/lib/config/tools'
 		scene.add(bgMesh)
 		await setLine(
 			[101.820373,0.31,25.695215],
-			{text:"三产融合发展产业带",color:"#FFF100"},
+			{text:"三产融合发展产业带",color:"#FFF100",order:3},
 			[
 				-0.02, 5, 0,
 				-0.16, 5, 0
@@ -332,7 +311,7 @@ import {SVGToBase64} from 'black-knight/lib/config/tools'
 		scene.add(bgMesh)
 		await setLine(
 			[101.740373,0.41,25.905215],
-			{text:"<tspan>左廊-要素聚集特</tspan><tspan x='0' y='33'>色产业发展廊道</tspan>",color:"#F19149"},
+			{text:"<tspan>左廊-要素聚集特</tspan><tspan x='0' y='36'>色产业发展廊道</tspan>",color:"#F19149",order:4},
 			[
 				-0.02, 5, 0,
 				-0.16, 5, 0
@@ -353,26 +332,24 @@ import {SVGToBase64} from 'black-knight/lib/config/tools'
 		scene.add(bgMesh)
 		await setLine(
 			[101.740373+0.13,0.51,25.905215-0.08],
-			{text:"科技引领示范和核心地",color:"#E60012"},
+			{text:"科技引领示范和核心地",color:"#E60012",order:5},
 			[
 				0.02, 3, 0,
 				0.16, 3, 0
 			]
 		)
 	}
-	async function setLine(label,{text,color},points){
+	async function setLine(label,{text,color,order},points){
 
 		var point=new THREE.PlaneGeometry(1.2,1.2)
 		var pointMaterial=new THREE.MeshBasicMaterial({
-			map:new THREE.TextureLoader().load("data:image/svg+xml,%3Csvg width='12.000000' height='12.000000' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3Cdesc%3E Created with Pixso. %3C/desc%3E %3Cpath id='矢量 1' d='M11.5 0.5L11.5 11.5L0.5 11.5L0.5 0.5L11.5 0.5Z' stroke='%23C0DBF7'/%3E %3Crect id='矩形 1' x='2.000000' y='2.000000' width='8.000000' height='8.000000' fill='%23C0DBF7'/%3E %3Cdefs/%3E %3C/svg%3E"),
+			map:new THREE.TextureLoader().load("data:image/svg+xml,%3Csvg width='100.000000' height='100.000000' viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3Crect id='矩形 1' x='4.000000' y='4.000000' width='92.000000' height='92.000000' stroke='%23FFFFFF' stroke-width='8.000000'/%3E %3Crect id='矩形 2' x='20.000000' y='21.000000' width='60.000000' height='60.000000' fill='%23FFFFFF'/%3E %3C/svg%3E"),
 			transparent:true,
 		})
 		var pointMesh=new THREE.Mesh(point,pointMaterial)
 		pointMesh.position.set(115*(-center[0]+label[0]),label[1],115*(-center[1]+label[2]))
-		watch(offset,n=>{
-			pointMesh.position.set(115*(-center[0]+label[0]+n.x/100),label[1],115*(-center[1]+label[2]+n.y/100))
-		})
 		pointMesh.rotation.x=-Math.PI/2
+		pointMesh.renderOrder=order+0.1
 		scene.add(pointMesh)
 
 		var lineGeometry=new THREE.BufferGeometry()
@@ -391,8 +368,9 @@ import {SVGToBase64} from 'black-knight/lib/config/tools'
 		await new Promise(resolve=>{
 			nextTick(()=>{
 					var box=svg.value.children[0].getBBox()
-					var adsGeometry=new THREE.PlaneGeometry(box.width/14,box.height/14)
-					adsGeometry.translate(0,box.height/14/2,0)
+					var times=17
+					var adsGeometry=new THREE.PlaneGeometry(box.width/times,box.height/times)
+					adsGeometry.translate(0,box.height/times/2,0)
 					var adsMaterial=new THREE.MeshBasicMaterial({
 						transparent:true,
 						side:THREE.DoubleSide,
@@ -402,7 +380,6 @@ import {SVGToBase64} from 'black-knight/lib/config/tools'
 					names.push(adsMesh)
 					adsMesh.renderOrder=7
 					adsMesh.position.set(115*(-center[0]+label[0]+points[3]), label[1]+points[4], 115*(-center[1]+label[2]+points[5]))
-					adsMesh.rotation.x=-Math.tan(90/100)
 					scene.add(adsMesh)
 					resolve()
 			})
@@ -411,9 +388,16 @@ import {SVGToBase64} from 'black-knight/lib/config/tools'
 	function render(){
 		renderer.render(scene, camera);
 		requestAnimationFrame(render)
+
+		var z=Math.sqrt(Math.pow(camera.position.x,2)+Math.pow(camera.position.z,2))
+		// var h=Math.tan(camera.position.z/camera.position.x)
+		var ver=-Math.tan(z/camera.position.y)
 		names.forEach(v=>{
+			// v.rotation.x=ver
+			// v.rotation.y=h
+			// v.rotation.z=camera.rotation.z
 			v.rotation.x=camera.rotation.x
-			// v.rotation.y=camera.rotation.y
+			v.rotation.y=camera.rotation.y
 			v.rotation.z=camera.rotation.z
 		})
 		labels.forEach(v=>{
@@ -422,6 +406,12 @@ import {SVGToBase64} from 'black-knight/lib/config/tools'
 			v.rotation.z=camera.rotation.z
 		})
 	}
+	function tap(){
+		var z=Math.sqrt(Math.pow(camera.position.x,2)+Math.pow(camera.position.z,2))
+		console.log("z:", z)
+		console.log("y:",camera.position.y)
+		console.log('角度',180/Math.PI*-Math.tan(z/camera.position.y))
+	}
 	onMounted(()=>{
 		nextTick(async()=>{
 			init()

src/view/park/left_1.vue

@@ -19,6 +19,7 @@
 					height:43px;
 					object-fit: contain;
 					margin:auto 63px;
+					animation:upDown 3s ease-in infinite;
 				}
 				&>.info{
 					flex-shrink: 0;
@@ -149,6 +150,17 @@
 			opacity: 0;
 		}
 	}
+	@keyframes upDown {
+		0%{
+			transform: translateY(0);
+		}
+		50%{
+			transform: translateY(-7px);
+		}
+		100%{
+			transform: translateY(0);
+		}
+	}
 </style>
 <template>
 	<div class="left_1">

src/view/park/right_1.vue

@@ -41,7 +41,7 @@
 		<dTitle title="价格行情" icon="10">
 			<span style="color:#00E4FF;font-size:18px;">单位统一为： 10元/kg</span>
 		</dTitle>
-		<swiper-btn :list="btns" color/>
+		<swiper-btn :list="btns"/>
 		<dvScrollBoard ref="scrollBoard" :config="config" style="height:150px;"/>
 	</div>
 </template>