From 0acf868da4115aa4206ba37c4a10d02fd7861c89 Mon Sep 17 00:00:00 2001
From: duanliang <duanliang>
Date: Fri, 13 Dec 2024 10:46:59 +0800
Subject: [PATCH] feat 1

---
 package-lock.json                   |  47 ++++
 package.json                        |   1 +
 src/assets/images/t-ico-1.png       | Bin 0 -> 3748 bytes
 src/assets/images/t-title-bg.png    | Bin 0 -> 3994 bytes
 src/views/home/components/box-4.vue | 329 ++++++++++++++++++++++++++++
 src/views/home/index.vue            |   3 +-
 6 files changed, 379 insertions(+), 1 deletion(-)
 create mode 100644 src/assets/images/t-ico-1.png
 create mode 100644 src/assets/images/t-title-bg.png

diff --git a/package-lock.json b/package-lock.json
index dcef9b6..e79f5f0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
         "echarts": "^5.5.1",
         "pinia": "^2.2.6",
         "vue": "^3.5.13",
+        "vue-echarts": "^7.0.3",
         "vue-router": "^4.4.5"
       },
       "devDependencies": {
@@ -2313,6 +2314,7 @@
       "version": "5.5.1",
       "resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.5.1.tgz",
       "integrity": "sha512-Fce8upazaAXUVUVsjgV6mBnGuqgO+JNDlcgF79Dksy4+wgGpQB2lmYoO4TSweFg/mZITdpGHomw/cNBJZj1icA==",
+      "license": "Apache-2.0",
       "dependencies": {
         "tslib": "2.3.0",
         "zrender": "5.6.0"
@@ -4268,6 +4270,51 @@
         }
       }
     },
+    "node_modules/vue-demi": {
+      "version": "0.13.11",
+      "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.13.11.tgz",
+      "integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vue-echarts": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmmirror.com/vue-echarts/-/vue-echarts-7.0.3.tgz",
+      "integrity": "sha512-/jSxNwOsw5+dYAUcwSfkLwKPuzTQ0Cepz1LxCOpj2QcHrrmUa/Ql0eQqMmc1rTPQVrh2JQ29n2dhq75ZcHvRDw==",
+      "license": "MIT",
+      "dependencies": {
+        "vue-demi": "^0.13.11"
+      },
+      "peerDependencies": {
+        "@vue/runtime-core": "^3.0.0",
+        "echarts": "^5.5.1",
+        "vue": "^2.7.0 || ^3.1.1"
+      },
+      "peerDependenciesMeta": {
+        "@vue/runtime-core": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/vue-router": {
       "version": "4.5.0",
       "resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-4.5.0.tgz",
diff --git a/package.json b/package.json
index c57343a..f7be502 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "echarts": "^5.5.1",
     "pinia": "^2.2.6",
     "vue": "^3.5.13",
+    "vue-echarts": "^7.0.3",
     "vue-router": "^4.4.5"
   },
   "devDependencies": {
diff --git a/src/assets/images/t-ico-1.png b/src/assets/images/t-ico-1.png
new file mode 100644
index 0000000000000000000000000000000000000000..f01895304f965d5a8668fb107929b71c7854e8af
GIT binary patch
literal 3748
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
O0000<MNUMnLSTZWt0FW2

literal 0
HcmV?d00001

diff --git a/src/assets/images/t-title-bg.png b/src/assets/images/t-title-bg.png
new file mode 100644
index 0000000000000000000000000000000000000000..0767e90f482bae212cd070b33083e3aa35db3c10
GIT binary patch
literal 3994
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
ABme*a

literal 0
HcmV?d00001

diff --git a/src/views/home/components/box-4.vue b/src/views/home/components/box-4.vue
index e69de29..912472d 100644
--- a/src/views/home/components/box-4.vue
+++ b/src/views/home/components/box-4.vue
@@ -0,0 +1,329 @@
+<template>
+	<div class="box-4-content">
+		<div class="content-1 content">
+			<!-- 1 -->
+			<div class="title">
+				游客画像
+			</div>
+			<!-- 2 -->
+			<div class="all-man">
+				
+			</div>
+			<ul class="ul-1">
+				<li class="li ">
+					<div class="li-title">
+						<span>年龄性别占比</span>
+					</div>
+					<div class="chart-1">
+						<v-chart class="chart" :option="option1" autoresize />
+						<span class="sky-1"></span>
+					</div>
+					<div class="li-man">总人数：123456</div>
+				</li>
+				<li class="li">
+					<div class="li-title">
+						<span>客源分析TOP5</span>
+					</div>
+					<div class="press-box" v-for="item in 5" :key="i">
+						<div class="press-title">
+							<span>河北</span>
+							<span>55%</span>
+						</div>
+						
+						<div class="bg-box">
+							<div class="bg-width"></div>
+						</div>
+					</div>
+				</li>
+				<li class="li">
+					<div class="li-title">
+						<span>购票来源</span>
+					</div>
+					<div class="round-press">
+						<div class="round-1">
+							<div class="round-width"></div>
+						</div>
+					</div>
+					<v-chart class="chart" :option="option2" autoresize />
+				</li>
+			</ul>
+		</div>
+		<div class="content-2 content">
+			<!-- 1 -->
+			<div class="title">
+				停车信息
+			</div>
+			
+			<ul class="ul-1">
+				<li class="li">
+					<div class="li-title">
+						<span>年龄性别占比</span>
+					</div>
+					<v-chart class="chart" :option="option1" autoresize />
+					<div class="li-man">总人数：123456</div>
+				</li>
+				<li class="li">
+					<div class="li-title">
+						<span>客源分析TOP5</span>
+					</div>
+					<div class="press-box" v-for="item in 5" :key="i">
+						<div class="press-title">
+							<span>河北</span>
+							<span>55%</span>
+						</div>
+						
+						<div class="bg-box">
+							<div class="bg-width"></div>
+						</div>
+					</div>
+				</li>
+				<li class="li">
+					<div class="li-title">
+						<span>购票来源</span>
+					</div>
+					<div class="round-press">
+						<div class="round-1">
+							<div class="round-width"></div>
+						</div>
+					</div>
+					<v-chart class="chart" :option="option2" autoresize />
+				</li>
+			</ul>
+		</div>
+	</div>
+</template>
+
+<script setup>
+import { use } from 'echarts/core';
+import { CanvasRenderer } from 'echarts/renderers';
+import { GaugeChart } from 'echarts/charts';
+import { PieChart } from 'echarts/charts';
+import {
+  TitleComponent,
+  TooltipComponent,
+  LegendComponent,
+} from 'echarts/components';
+import VChart, { THEME_KEY } from 'vue-echarts';
+import { ref, provide } from 'vue';
+
+use([
+  GaugeChart,
+  CanvasRenderer,
+  PieChart,
+  TitleComponent,
+  TooltipComponent,
+  LegendComponent,
+]);
+
+provide(THEME_KEY, 'dark');
+
+const option1 = ref({
+	backgroundColor:'transparent',
+	  series: [
+	    {
+	      name: 'Access From',
+		  width:300,
+		  height:100,
+		  type: 'pie',
+		  left:-50,
+		  top:10,
+		  radius: ['40%', '50%'],
+		  avoidLabelOverlap: true,
+		  padAngle: 5,
+		  itemStyle: {
+			borderRadius: 2
+		  },
+	      data: [
+	        { value: 200, name: '30-40%' },
+	        { value: 500, name: '19岁以下' },
+	        { value: 234, name: '18-30岁' },
+	        { value: 135, name: '60岁以上' },
+	        { value: 100, name: '30-40岁' },
+	      ],
+		  labelLine: {
+			show: true
+		  },
+	      emphasis: {
+	        itemStyle: {
+	          shadowBlur: 10,
+	          shadowOffsetX: 0,
+	          shadowColor: 'rgba(0, 0, 0, 0.5)',
+	        },
+	      },
+	    },
+	  ],
+});
+const option2 = ref({
+	backgroundColor:'transparent',
+	
+});
+
+</script>
+
+<style lang="scss" scoped>
+	.box-4-content{
+		width:vw(792);
+		height:vh(976);
+		background: linear-gradient( 180deg, rgba(10,37,75,0) 0%, rgba(10,37,75,0.87) 30%, #0A254B 50%, #0A254B 100%);
+		// background: green;
+		border-radius: 0px 0px 0px 0px;
+		.content-2{
+			.all-2-infor{
+			
+				.box-1{
+					display: flex;
+					width:vw(384);
+					height: vh(70);
+					background: linear-gradient( 90deg, #0A4190 0%, #0096FF 47%, #004D88 100%);
+					border-radius: 0px 0px 0px 0px;
+					border: 1px solid;
+					border-image: linear-gradient(180deg, rgba(0, 150, 255, 1), rgba(0, 90, 153, 0)) 1 1;
+					.info1{
+						text-align: center;
+						
+					}
+					.t-ico-1{
+						justify-content: center;
+						align-items: center;
+						.t-ico-1{
+							width:vw(45);
+							height:vh(47);
+							
+						}
+					}
+				}
+			}
+		}
+		.content{
+			.title{
+				width: vw(220);
+				height: vh(32);
+				line-height: vh(32);
+				background: linear-gradient( 180deg, #02A8F7 0%, #05AEFF 49%, #0184E1 51%, #0572C1 77%, #0085E2 100%);
+				font-size:vw(16);
+				text-align: center;
+				margin: vh(20) auto;
+			}
+			.ul-1{
+				display:flex;
+				.chart-1{
+					width:vw(253);
+					height:vh(150);
+					position: relative;
+					.sky-1{
+						position: absolute;
+						top:vw(60);
+						left:50%;
+						width:vw(30);
+						height:vw(30);
+						transform: translate(-50%);
+						background-color: #00B1FF;
+						border-radius: 50%;
+					}
+				}
+				
+				.li{
+					width:vw(253);
+					height:vh(225);
+					margin-right:vw(10);
+					background: radial-gradient( 0% 70% at 99% 50%, #0A4190 0%, rgba(0,77,136,0.6) 100%);
+					border-image: linear-gradient(180deg, rgba(0, 150, 255, 1), rgba(0, 90, 153, 0)) 1 1;
+					.li-man{
+						font-size:vw(14);
+						color:#fff;
+						margin:0 auto;
+						text-align: center;
+					}
+					.round-press{
+						
+					}
+					.press-box{
+						padding:vw(5) vw(10);
+						// margin-bottom:vh(10);
+						.press-title{
+							display: flex;
+							justify-content: space-between;
+							color:rgba(255,255,255,0.9);
+							font-size:vw(12);
+							margin-bottom:vh(10)
+						}
+						.bg-box{
+							width: 100%;
+							height: vw(10);
+							background: rgba(0,150,255,0.15);
+							border-radius: vw(5);
+						}
+						.bg-width{
+							background: linear-gradient( to left, #FF7021 0%, rgba(255,112,33,0) 100%);
+							border-radius: vw(5);
+							border-top-right-radius: 0;
+							border-bottom-right-radius: 0;
+							width:50%;
+							height:100%;
+							position: relative;
+						}
+						.bg-width::before{
+							display: block;
+							content: '';
+							width:vw(10);
+							height:vw(10);
+							// border-radius: 50%;
+							position: absolute;
+							right:0;
+							top:0;
+							width: 0;
+							height: 0;
+							border-left: vw(10) solid red;
+							// border-right-width: vw(10);
+							// border-bottom-width: vw(10);
+							// border-left-width: vw(10);
+							
+							
+						}
+					}
+					.li-title{
+						background: url(/src/assets/images/t-title-bg.png) no-repeat 100%;
+						span{
+							background: linear-gradient(90deg, #FFFFFF 0%, #0096FF 100%);
+							font-family: Microsoft YaHei, Microsoft YaHei;
+							font-weight: bold;
+							font-size: vw(15);
+							line-height: vh(18);
+							text-align: left;
+							font-style: normal;
+							text-transform: none;
+							display: inline-block;
+							margin-left:vw(20);
+							margin-bottom:vh(10);
+							
+						}
+						
+						.li-1-echat{
+							position: relative;
+							.sty-1{
+								position: absolute;
+								top:50%;
+								left:50%;
+								transform: translate(-50%,-50%);
+								width:50rpx;
+								height:50rpx;
+								
+								
+							}
+							// width: 100%;
+							// height: 300px;
+							.chart {
+							
+							}
+						}
+					}
+				}
+			}
+		}
+		.chart {
+			width: vw(253);
+			height: vh(120);
+		}
+	}
+
+</style>
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 8ba72eb..49d9f6c 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -8,13 +8,14 @@
         <li></li>
         <li></li>
       </ul>
+	  <box4 />
     </div>
   </main>
 </template>
 
 <script setup>
   import box1 from './components/box-1.vue'
-
+  import box4 from './components/box-4.vue'
   onMounted(() => {})
 </script>