From d34bc593a20a3b7fce3f130e8e2d8139b00787bc Mon Sep 17 00:00:00 2001
From: zk <k12019@aliyun.com>
Date: Fri, 24 Nov 2023 13:37:22 +0800
Subject: [PATCH] update

---
 src/components/chinaMap/chinaMap.vue | 438 ++++++++++++++++++++++++++-
 1 file changed, 432 insertions(+), 6 deletions(-)

diff --git a/src/components/chinaMap/chinaMap.vue b/src/components/chinaMap/chinaMap.vue
index 56011d8..7345f02 100644
--- a/src/components/chinaMap/chinaMap.vue
+++ b/src/components/chinaMap/chinaMap.vue
@@ -1,27 +1,453 @@
 <template>
 	<div class="center-map">
 		<div class="china-map-box">
-			<div class="tab-list"></div>
-			<div class="route-navigation"></div>
+			<div class="tab-list">
+				<div v-for="(item,i) in list" :class="[item.isChecked?'active':'']" class="tab" @click="changeTab(i)">
+					{{ item.name }}
+				</div>
+			</div>
+			<div v-show="currentIndex==list.length-1" class="route-navigation">
+				<a-form
+					:model="formState"
+					layout="inline"
+				>
+					<a-form-item class="form-item-self" name="user" label="起点">
+						<a-input v-model:value="formState.user">
+						</a-input>
+					</a-form-item>
+					<a-form-item class="form-item-self" name="user" label="终点">
+						<a-input v-model:value="formState.user">
+						</a-input>
+					</a-form-item>
+					<a-form-item>
+						<a-button class="reset-btn">清空</a-button>
+						<a-button class="search-btn">路线规划</a-button>
+					</a-form-item>
+				</a-form>
+				<div class="line-container">
+					<div class="has-data">
+						<div class="line-title">
+							全程2小时37分钟(172.15公里)
+						</div>
+						<div class="line-content">
+							<div class="start">起点</div>
+							<div class="line-body">
+								<div class="line"></div>
+								<div class="line-desc">
+									<!--									<p>向东行驶124米左转</p>-->
+									<!--									<p>向西北行驶92米左转</p>-->
+									<!--									<p>向西南行驶45米右转</p>-->
+									<!--									<p>向西北行驶50米右转</p>-->
+									<!--									<p>沿燕庆街向东北行驶157米左转</p>-->
+									<!--									<p>向西北行驶47米左转</p>-->
+									<!--									<p>向西行驶97米右转进入主路</p>-->
+									<!--									<p>沿新华东路向西行驶1.1千米右转进入主路</p>-->
+									<!--									<p>沿友爱街向北行驶5.9千米右转</p>-->
+									<!--									<p>沿417乡道向东北行驶49米右转</p>-->
+									<!--									<p>沿417乡道向东行驶1.1千米左转</p>-->
+									<!--									<p>沿417乡道向北行驶8.3千米左转</p>-->
+									<!--									<p>向西北行驶47米左转</p>-->
+									<!--									<p>向西行驶97米右转进入主路</p>-->
+									<!--									<p>沿新华东路向西行驶1.1千米右转进入主路</p>-->
+									<!--									<p>沿友爱街向北行驶5.9千米右转</p>-->
+									<!--									<p>沿417乡道向东北行驶49米右转</p>-->
+									<p>沿417乡道向东行驶1.1千米左转</p>
+									<p>沿417乡道向北行驶8.3千米左转</p>
+									<p>向西北行驶4.9千米到达目的地</p>
+								</div>
+							</div>
+							<div class="end">终点</div>
+						</div>
+					</div>
+					<div v-show="false" class="empty-data">
+						暂无数据
+					</div>
+				</div>
+			</div>
 			<div class="china-map-container"></div>
 		</div>
 		<div class="center-footer">
-			<div class="count-num"></div>
+			<div class="count-item">
+				<div class="num">1054</div>
+				<div class="text">累计受理</div>
+			</div>
+			<div class="count-item">
+				<div class="num">1054</div>
+				<div class="text">累计处置</div>
+			</div>
 		</div>
 	</div>
 </template>
 <script lang="ts" setup>
+import {ref,onMounted} from 'vue'
+import * as echarts from 'echarts';
+import mapJson from '/@/components/chinaMap/json/new'
+const formState = ref({
+	user: '',
+	password: '',
+});
+const list = ref([
+	{
+		name: '所有资源',
+		isChecked: true
+	},
+	{
+		name: '油田医院',
+		isChecked: false
+	},
+	{
+		name: '医疗点',
+		isChecked: false
+	},
+	{
+		name: '救护车',
+		isChecked: false
+	},
+	{
+		name: '合作医院',
+		isChecked: false
+	},
+	{
+		name: '地方医院',
+		isChecked: false
+	},
+	{
+		name: '直升机',
+		isChecked: false
+	},
+	{
+		name: '急救路线',
+		isChecked: false
+	}
+])
+const currentIndex = ref(7);
 
+function changeTab(i) {
+	list.value = list.value.map(item => {
+		item.isChecked = false
+		return item
+	})
+	currentIndex.value = i
+	list.value[i].isChecked = true
+}
+onMounted(()=>{
+	// initMap();
+})
+function initMap(){
+	const bgImg='https://img1.baidu.com/it/u=514808758,3636401112&fm=253&fmt=auto&app=120&f=JPEG?w=1139&h=751'
+	let myChart = echarts.init(document.querySelector('.china-map-container'));
+	echarts.registerMap('china', mapJson);
+	let option = {
+		tooltip: {
+			show: false,
+			formatter: "{b0}: {c0}"
+		},
+		grid: {
+			left: 20,
+			right: 20,
+			top: 20,
+			bottom: 20
+		},
+		geo: [
+			{
+				map:'china',
+				zlevel:3,
+				aspectScale: .8, //长宽比
+				zoom: 1.1,
+				roam: false,
+				top:'80',
+				left:'center',
+				itemStyle: {
+					areaColor: "#173a58",
+					shadowColor: "#173a58",
+					shadowOffsetX: 0,
+					shadowOffsetY: 5,
+					borderWidth: 4,//外部边框
+					borderColor: "#64cafc",
+				}
+			},
+			{
+				map:'china',
+				zlevel:2,
+				aspectScale: .8, //长宽比
+				zoom: 1.1,
+				roam: false,
+				top:'80',
+				left:'center',
+				itemStyle: {
+					areaColor: "#1e2c38",
+					shadowColor: "#1e2c38",
+					shadowOffsetX: 0,
+					shadowOffsetY: 10,
+					borderWidth: 4,//外部边框
+					borderColor: "#384d61",
+				}
+			},
+		],
+		series: [
+			{
+				map: 'china',// 这个是上面注册时的名字哦，registerMap（'这个名字保持一致'）
+				name: '中国地图',
+				type: 'map',
+				zlevel:9,
+				zoom: 1.1,
+				aspectScale: .8, //长宽比
+				hoverAnimation: false,
+				silent: false,
+				top:'80',
+				left:'center',
+				label: {
+					show: true,
+					padding: [0, 10],
+					height: 31,
+					lineHeight: 31,
+					textStyle: {
+						color: "#ddd",
+						fontSize: 13,
+						fontStyle: "italic",
+						fontWeight: "bold",
+						marginLeft: 5
+					},
+					emphasis:{
+						// areaColor: '#2074ed',//鼠标悬浮色
+						areaColor: {
+							type: 'pattern',
+							image: bgImg,
+							repeat: 'no-repeat'
+						},
+						borderWidth: 0,
+					},
+				},
+				itemStyle: {
+					// 给地图添加背景图片
+					areaColor: {
+						type: 'pattern',
+						image: bgImg,
+						repeat: 'no-repeat'
+					},
+					borderColor: "#64cafc",
+					borderWidth: 1,//内部边框
+				},
+			},
+			{
+				type: "scatter",
+				zlevel:100,
+				coordinateSystem: "geo",
+				//自定义图片的 位置（lng, lat）
+				data: [{ name: '西安', value:['108.88','34.40'],id:'xian'}],
+				//自定义图片的 大小
+				symbolSize:[50, 50],
+				//自定义图片的 路径
+				// symbol: 'image://http://192.168.1.7:9200/src/assets/img/tree.png',  // 图片 URL
+				symbol: 'image://https://img2.baidu.com/it/u=1568770988,2090980470&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=567',  // 图片 URL
+			},
+			{
+				type: "scatter",
+				zlevel:100,
+				coordinateSystem: "geo",
+				//自定义图片的 位置（lng, lat）
+				data: [{ name: '太原', value:[112.55,37.98],id:'taiyuan'}],
+				//自定义图片的 大小
+				symbolSize:[50, 50],
+				//自定义图片的 路径
+				// symbol: 'image://http://192.168.1.7:9200/src/assets/img/tree.png',  // 图片 URL
+				symbol: 'image://https://img2.baidu.com/it/u=1568770988,2090980470&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=567',  // 图片 URL
+			}
+		],
+
+	};
+	myChart.setOption(option);
+}
 </script>
 <style lang="less" scoped>
 .center-map {
+	flex: 1;
 	color: #fff;
 	display: flex;
 	flex-direction: column;
 	align-content: space-between;
-	.center-footer{
-		height: 60px;
-		border: 1px solid red;
+
+	.china-map-box {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+	}
+
+	.tab-list {
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: space-between;
+
+		.tab {
+			width: calc(100% / 8);
+			height: 38px;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			color: #29F1FA;
+			background: url("/@/assets/img/tab-default.png") no-repeat;
+			background-size: 100%;
+			cursor: pointer;
+			transition: all 0.3s;
+			//background-position: -5px -10px;
+			&.active {
+				color: #fff;
+				background: url("/@/assets/img/tab-active.png") no-repeat;
+				background-size: 100%;
+			}
+		}
+	}
+
+	.route-navigation {
+		margin: 12px 0;
+		//height: 46px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		background: #002E64;
+		border-radius: 6px;
+		position: relative;
+		transition: all 0.3s;
+		:deep(.form-item-self) {
+			label {
+				color: #29F1FA;
+			}
+
+			.ant-input {
+				width: 280px;
+				color: #d6d9e0;
+				background: #2A4164;
+				border-radius: 2px 2px 2px 2px;
+				border: 1px solid #1B7EF2;
+			}
+		}
+
+		.reset-btn {
+			width: 64px;
+			height: 32px;
+			border-radius: 5px;
+			color: #45A2FF;
+			background: #002E64;
+			border: 1px solid #45A2FF;
+		}
+
+		.search-btn {
+			margin-left: 10px;
+			width: 88px;
+			height: 32px;
+			color: #EFEFEF;
+			background: #45A2FF;
+			border-radius: 5px;
+			border-color: #45A2FF;
+		}
+
+		.line-container {
+			position: absolute;
+			right: 0;
+			top: 54px;
+			width: 288px;
+			padding: 9px 18px;
+			min-height: 200px;
+			max-height: 473px;
+			overflow: auto;
+			background: #2A4164;
+			border-radius: 2px;
+			border: 1px solid #1B7EF2;
+
+			.line-title {
+				margin-bottom: 9px;
+				font-size: 14px;
+				font-weight: 700;
+				color: rgba(255, 255, 255, 0.8);
+			}
+
+			.line-content {
+				font-size: 12px;
+
+				.start {
+					display: flex;
+					align-items: center;
+
+					&::before {
+						content: '起';
+						color: #fff;
+						width: 20px;
+						height: 20px;
+						margin-right: 7px;
+						display: flex;
+						align-items: center;
+						justify-content: center;
+						border-radius: 50%;
+						background: #1478F5;
+					}
+				}
+
+				.end {
+					display: flex;
+					align-items: center;
+					&::before {
+						content: '终';
+						color: #fff;
+						width: 20px;
+						height: 20px;
+						margin-right: 7px;
+						display: flex;
+						align-items: center;
+						justify-content: center;
+						border-radius: 50%;
+						background: #1478F5;
+					}
+				}
+
+				.line-body {
+					display: flex;
+					//max-height: 370px;
+				}
+
+				.line {
+					width: 1px;
+					//max-height: 370px;
+					background-color: #1478f5;
+					margin: 5px 19px 5px 8px;
+				}
+
+				.line-sesc {
+					flex: 1;
+				}
+			}
+
+		}
+
+	}
+	.china-map-container{
+		flex: 1;
+		//border: 1px solid red;
+	}
+	.center-footer {
+		display: flex;
+		justify-content: center;
+		margin-bottom: 10px;
+		gap: 20px;
+		.count-item{
+			width: 340px;
+			height: 80px;
+			display: flex;
+			color: #FFFFFF;
+			flex-direction: column;
+			align-items: center;
+			justify-content: center;
+			background: #00071B;
+			box-shadow: inset 0 0 40px 0 #1B7EF2;
+			border-radius: 4px ;
+			.num{
+				font-size: 24px;
+				font-weight: 700;
+			}
+			.text{
+				font-size: 16px;
+				font-weight: 400;
+			}
+		}
 	}
 }
 </style>
\ No newline at end of file