feat：完善景区页面

2024-12-18 11:08:59 +08:00
parent 44c87aa7ff 4a12039789
commit a2386b2789
23 changed files with 1989 additions and 200 deletions
--- a/src/views/monitor/components/box-2.vue
+++ b/src/views/monitor/components/box-2.vue
@@ -61,7 +61,6 @@
      <div class="box">
        <div class="title-3"><span>异常告警</span></div>
        <div class="pt-20">
-          <!-- <Line :width="370" :height="180" id="line" /> -->
 		  <v-chart class="line-chart" :option="optionLine" autoresize />
        </div>
      </div>
@@ -151,14 +150,14 @@
 </template>

 <script setup>
-  import * as echarts from 'echarts/core';
+  import * as echarts from 'echarts'
  import countup from 'vue-countup-v3'
-  import gauge from './gauge.vue'
  import { use } from 'echarts/core';
  import { CanvasRenderer } from 'echarts/renderers';
  import { GaugeChart } from 'echarts/charts';
  import { PieChart } from 'echarts/charts';
  import { LineChart } from 'echarts/charts';
+  import { fitChartSize } from '@/utils/dataUtil'
  import {
    TitleComponent,
    TooltipComponent,
@@ -186,20 +185,23 @@
 	  legend: {
 		type: 'scroll',
 		orient: 'vertical',
-		right: 0,
+		right: -10,
 		top: 0,
 		bottom: 20,
 		itemWidth:5,
 		itemHeight:5,
+		textStyle:{
+			fontSize:fitChartSize(12),
+		}
 	  },
  	  series: [
  	    {
  	      name: 'Access From',
  		  type: 'pie',
-  		  left:-70,
-  		  top:-30,
-		  // width:200,
-		  // height:200,
+  		  left:-25,
+  		  top:-20,
+		  width:fitChartSize(230),
+		  height:fitChartSize(230),
  		  radius: ['40%', '50%'],
  		  avoidLabelOverlap: false,
  		  padAngle: 5,
@@ -213,7 +215,7 @@
 		  emphasis: {
 			label: {
 				show: true,
-				fontSize: 10,
+				fontSize: fitChartSize(10),
 				fontWeight: 'bold',
 				color:'#fff'
 			  }
@@ -242,38 +244,38 @@
 		left:'4%',
 		containLabel: true,
 	  },
-	    xAxis: {
-		  nameLocation: 'middle',
-	      type: 'category',
-		  boundaryGap: false,
-		  axisLabel: {
-			  fontSize:10,
-			  interval: 0, // 显示所有标签
-			  rotate: 0, // 旋转标签45度
-		  },
-	      data: ['10:00', '10:00', '10:00', '10:00', '10:00', '10:00', '10:00', '10:00'],
-		  axisTisk:{
-			show: true,
-			// 设置刻度长度
-			length: 1,
-			lineStyle: {
-				type: 'dashed' ,// 设置为虚线
-				width:0,
-			} 
-		  },
-		  axisLine: {
-			lineStyle: {
-				color: '#0096FF' // 设置横线颜色
-			}
-		  }
-	    },
+	xAxis: {
+	  nameLocation: 'middle',
+	  type: 'category',
+	  boundaryGap: false,
+	  axisLabel: {
+		  fontSize:fitChartSize(10),
+		  interval: 0, // 显示所有标签
+		  rotate: 0, // 旋转标签45度
+	  },
+	  data: ['10:00', '10:00', '10:00', '10:00', '10:00', '10:00', '10:00', '10:00'],
+	  axisTisk:{
+		show: true,
+		// 设置刻度长度
+		length: 1,
+		lineStyle: {
+			type: 'dashed' ,// 设置为虚线
+			width:0,
+		} 
+	  },
+	  axisLine: {
+		lineStyle: {
+			color: '#0096FF' // 设置横线颜色
+		}
+	  }
+	},
 	    yAxis: {
 	      type: 'value',
 		  min:0,
 		  max:45,
 		  interval:15,
 		   axisLabel: {
-			  fontSize: 12 ,// 设置Y轴刻度字体大小
+			  fontSize: fitChartSize(12) ,// 设置Y轴刻度字体大小
 			  color: 'rgba(255,255,255,0.9)',
 		   },
 		   splitLine:{
@@ -448,6 +450,7 @@
 		}
 		.item1,.item2{
 			background-image: url('/src/assets/images/four-t-1.png');
+			background-size: 100% 100%;
 		}
 		.item3{
 			background-image: url('/src/assets/images/four-t-2.png');
@@ -528,15 +531,15 @@
    }
    .core {
      background-image: url('@/assets/images/m-t-1.png');
-	  background-size: contain;
+	  background-size: 100% 100%;
    }
    .queue {
      background-image: url('@/assets/images/m-t-2.png');
-	  background-size: contain;
+	  background-size: 100% 100%;
    }
    .congestion {
      background-image: url('@/assets/images/m-t-2.png');
-	  background-size: contain;
+	  background-size: 100% 100%;
    }
    .box {
      width: vw(384);
--- a/src/views/monitor/components/box-3.vue
+++ b/src/views/monitor/components/box-3.vue
@@ -21,18 +21,74 @@
 		</div>
 		<!-- 视频 -->
 		<div class="video-box">
-			<div class="v-item" v-for="item in 15"></div>
+			<div v-if="videoLog == 1" class="v-item " :class="index==0?'v-error-bg':''" v-for="(item,index) in 15">
+				  <block  @click="handleItemVideo">
+					  <vue3VideoPlay  v-bind="options"/>
+				  </block>
+					
+			</div>
+			
+			<div class="video-live flex" v-if="videoLog==2">
+				<div class="video-lt">
+					<vue3VideoPlay  v-bind="options"/>
+				</div>
+				<div class="video-rt">
+					<div class="title">
+						<span>最近联系</span>
+					</div>
+					<div class="rt-v-box">
+						<div class="rt-video v-error-bg" v-for="item in 8">
+							<vue3VideoPlay  v-bind="options"/>
+						</div>
+						
+					</div>
+					
+				</div>
+			</div>
 		</div>
 	</div>
 </template>

 <script setup>
+	import { fitChartSize } from '@/utils/dataUtil'
+	const options = reactive({
+	    src: "http://192.168.1.60:8080/live/340200000013200000011_34020000001320000001/hls.m3u8", //视频源
+	    type: 'm3u8', //视频类型
+		width:"100%",
+		height:"100%",
+		color: "#409eff", //主题色
+		title: "", //视频名称
+		muted: false, //静音
+		webFullScreen: false,
+		speedRate: ["0.75", "1.0", "1.25", "1.5", "2.0"], //播放倍速
+		autoPlay: true, //自动播放
+		loop: false, //循环播放
+		mirror: false, //镜像画面
+		ligthOff: false, //关灯模式
+		volume: 0.3, //默认音量大小
+		control: true, //是否显示控制
+		controlBtns: [
+		    // "audioTrack",
+		    // "quality",
+		    // "speedRate",
+		    // "volume",
+		    "setting",
+		    "pip",
+		    "pageFullScreen",
+		    "fullScreen",
+		], //显示所有按钮,
+	});
+	const videoLog = ref(1)
+	const handleItemVideo = ()=>{
+		console.log('单击视频')
+		videoLog.value = 2
+	}
 	
 </script>
 <style lang="scss" scoped>
 	.box-3-content{
-		width:vw(2353);
-		height:vh(964);
+		width:vw(2410);
+		height:vh(965);
 		// background-image: url('/src/assets/images/monotir-bg-1.png');
 		background-size: 100% 100%;
 		margin-top: vh(120);
@@ -44,8 +100,68 @@
 			flex-wrap: wrap;
 			padding-top:0;
 			margin-left:vw(20);
+			.video-live{
+				justify-content: space-between;
+				.video-lt{
+					width:vw(1700);
+					height:vh(950);
+					background-image: url('/src/assets/images/one-video-bg.png');
+					background-size: 100% 100%;
+				}
+				.video-rt{
+					width:vw(400);
+					height:vh(950);
+					background: radial-gradient( to bottom 70% at 99% 50%, #0A4190 0%, rgba(0,77,136,0.6) 100%);
+					border-radius: 0px 0px 0px 0px;
+					border: 1px solid;
+					opacity: 0.4;
+					border-image: linear-gradient(180deg, rgba(0, 150, 255, 1), rgba(0, 90, 153, 0)) 1 1;
+					margin-left:vw(10);
+					padding:vw(20);
+					.rt-v-box{
+						overflow-y: auto;
+						height:100%;
+					}
+					.title{
+						background-image: url('/src/assets/images/nav-l-t-bg.png');
+						background-size: 100% 100%;
+						margin-bottom:vh(10);
+						position:relative;
+						left:vw(-20);
+						span{
+							margin-left:vw(30);
+							font-weight: 800;
+							font-size: vw(15);
+							line-height: vh(26);
+							text-align: center;
+							font-style: normal;
+							text-transform: none;
+							
+							background: linear-gradient(90deg, #FFFFFF 0%, #5CB5FF 100%);
+							-webkit-background-clip: text;
+							background-clip: text;
+							-webkit-text-fill-color: transparent;
+							color: transparent;
+						}
+						
+					}
+					.rt-video{
+						width:100%;
+						height:vh(300);
+						background-image: url('/src/assets/images/v-item-bg.png');
+						background-size: 100% 100%;
+						padding:vw(20);
+						box-sizing: border-box;
+						margin-bottom:vh(2);
+					}
+					.v-error-bg{
+						background-image: url('/src/assets/images/v-item-bg-1.png');
+						background-size: 100% 100%;
+					}
+				}
+			}
 			.v-item{
-				width:vw(400);
+				width:vw(420);
 				height:vh(300);
 				background-image: url('/src/assets/images/v-item-bg.png');
 				background-size: 100% 100%;
@@ -53,9 +169,13 @@
 				margin-right:vw(4);
 				margin-bottom:vh(4);
 			}
+			.v-error-bg{
+				background-image: url('/src/assets/images/v-item-bg-1.png');
+				background-size: 100% 100%;
+			}
 		}
 		.left-nav{
-			margin-left:vw(20);
+			margin-left:vw(10);
 			// margin-top:vh(35);
 			width:vw(250);
 			.bom-box{
--- a/src/views/monitor/components/box-4.vue
+++ b/src/views/monitor/components/box-4.vue
@@ -146,11 +146,14 @@
 				text-transform: none;
 				flex-wrap: wrap;
 				.icon{
-					
 					display: block;
 					margin:vh(20) auto;
 					width:vw(86);
 					height:vh(104);
+					img{
+						width:vw(86);
+						height:vh(104);
+					}
 				}
 			}
 			.title{
--- a/src/views/monitor/components/box-5.vue
+++ b/src/views/monitor/components/box-5.vue
@@ -65,13 +65,14 @@
 <script setup>
  import * as echarts from 'echarts/core';
  import countup from 'vue-countup-v3'
-  import gauge from './gauge.vue'
+
  import { use } from 'echarts/core';
  import { CanvasRenderer } from 'echarts/renderers';
  import { GaugeChart } from 'echarts/charts';
  import { PieChart } from 'echarts/charts';
  import { LineChart } from 'echarts/charts';
  import { BarChart } from 'echarts/charts';
+  import { fitChartSize } from '@/utils/dataUtil'
  import {
    TitleComponent,
    TooltipComponent,
@@ -127,7 +128,7 @@
 		  emphasis: {
 			label: {
 				show: true,
-				fontSize: 10,
+				fontSize: fitChartSize(10),
 				fontWeight: 'bold',
 				color:'#fff'
 			  }
@@ -187,7 +188,7 @@
 		  max:45,
 		  interval:15,
 		   axisLabel: {
-			  fontSize: 12 ,// 设置Y轴刻度字体大小
+			  fontSize: fitChartSize(12) ,// 设置Y轴刻度字体大小
 			  color: 'rgba(255,255,255,0.9)',
 		   },
 		   splitLine:{
@@ -266,7 +267,7 @@
 	        type: 'category',
 	        boundaryGap: true,
 	        axisLabel: {
-			  fontSize:10,
+			  fontSize:fitChartSize(10),
 			  interval: 0, // 显示所有标签
 			  rotate: 0, // 旋转标签45度
 	        },
@@ -295,7 +296,7 @@
 	        interval:15,
 			
 	         axisLabel: {
-			  fontSize: 12 ,// 设置Y轴刻度字体大小
+			  fontSize: fitChartSize(12) ,// 设置Y轴刻度字体大小
 			  color: 'rgba(255,255,255,0.9)',
 			  offset:10,
 	         },
--- a/src/views/monitor/components/gauge.vue
+++ b/src/views/monitor/components/gauge.vue
@@ -1,109 +0,0 @@
-<template>
-  <div class="gauge" :id="id" />
-</template>
-
-<script setup>
-  import * as echarts from 'echarts'
-  import { fitChartSize } from '@/utils/dataUtil'
-
-  const props = defineProps({
-    id: {
-      type: String,
-      default: () => ''
-    }
-  })
-
-  let gaugeChart = null
-
-  onMounted(() => {
-    init()
-  })
-  const init = () => {
-    // 基于准备好的dom，初始化echarts实例
-    gaugeChart = echarts.init(document.getElementById(props.id))
-    gaugeChart.setOption({
-      series: [
-        {
-          type: 'gauge',
-          startAngle: 180,
-          endAngle: 0,
-          min: 0,
-          max: 100,
-          radius: '100%',
-          splitNumber: 10,
-          center: ['50%', '60%'],
-          itemStyle: {
-            color: '#58D9F9',
-            shadowColor: 'rgba(0,138,255,0.45)',
-            shadowBlur: 10,
-            shadowOffsetX: 2,
-            shadowOffsetY: 2
-          },
-          progress: {
-            show: true,
-            roundCap: true,
-            width: fitChartSize(6)
-          },
-          pointer: {
-            show: false
-          },
-          axisLine: {
-            roundCap: true,
-            lineStyle: {
-              width: fitChartSize(6)
-            }
-          },
-          axisTick: {
-            show: false
-          },
-          splitLine: {
-            show: false
-          },
-          axisLabel: {
-            show: false
-          },
-          detail: {
-            width: '100%',
-            lineHeight: 20,
-            height: 20,
-            offsetCenter: [0, '20%'],
-            valueAnimation: true,
-            formatter: function (value) {
-              return '{value|' + value.toFixed(0) + '}{unit|%}'
-            },
-            rich: {
-              value: {
-                fontSize: fitChartSize(12),
-                fontWeight: 'bolder',
-                color: '#02F9FA'
-              },
-              unit: {
-                fontSize: fitChartSize(12),
-                color: '#02F9FA'
-              }
-            }
-          },
-          data: [
-            {
-              value: 80
-            }
-          ]
-        }
-      ]
-    })
-    window.addEventListener('resize', resize)
-  }
-  const resize = () => {
-    if (gaugeChart) {
-      gaugeChart.dispose()
-      init()
-    }
-  }
-</script>
-
-<style lang="scss" scoped>
-  .gauge {
-    width: vw(70);
-    height: vh(50);
-  }
-</style>
--- a/src/views/monitor/index.vue
+++ b/src/views/monitor/index.vue
@@ -1,35 +1,19 @@
 <template>
  <main class="wrapper">
-    <box1 />
-	<box5/>
-	<!-- <box2 /> -->
+    <CoreVideo />
+	<box2 />
 	<box3 />
-    <div class="header">
-      <ul class="nav-left">
-        <li class="nav-left-item">奉节县</li>
-        <li class="nav-left-item">三峡之巅</li>
-        <li class="nav-left-item">白帝城</li>
-		<li class="nav-left-item">龙河桥</li>
-      </ul>
-      <div class="title">监控大屏</div>
-      <ul class="nav-right">
-        <li class="nav-right-item">停车</li>
-        <li class="nav-right-item">工单</li>
-        <li class="nav-right-item">舆情</li>
-        <li class="nav-right-item">酒店</li>
-      </ul>
-    </div>
-    <box4 />
+	<Header title="监控大屏" is-skip :nav-left="navLeft" :nav-right="navRight" />
+    <Correspondence />
  </main>
 </template>

 <script setup>
-  import box1 from './components/box-1.vue'
-  import box4 from './components/box-4.vue'
  import box3 from './components/box-3.vue'
  import box2 from './components/box-2.vue'
  import box5 from './components/box-5.vue'
-
+  const navLeft = [{ name: '奉节县' }, { name: '三峡之巅', path: '/scenic' }, { name: '白帝城' },{ name: '龙河桥' }]
+  const navRight = [{ name: '路段' }, { name: '路段' }, { name: '路段' }, { name: '路段' }]
  onMounted(() => {})
 </script>