From 59077bd254e68d1ddfa2d93ff222e6324df2e93e Mon Sep 17 00:00:00 2001
From: suerprisePlus <15810472099@163.com>
Date: 星期二, 19 十一月 2024 14:57:55 +0800
Subject: [PATCH] 图层控制增加全部关闭按钮，图层双击自动定位到对应位置，信令数据的时间条美化下，对接UE视频流，数字人功能开启，逻辑单体化数据体现
---
src/components/menu/signalling.vue | 125 +++++++++++++++++++++++++++++++++++++----
1 files changed, 113 insertions(+), 12 deletions(-)
diff --git a/src/components/menu/signalling.vue b/src/components/menu/signalling.vue
index 7dc0cb7..5b1b699 100644
--- a/src/components/menu/signalling.vue
+++ b/src/components/menu/signalling.vue
@@ -1,6 +1,31 @@
<template>
<div class="signalling">
- <div class="signalling_describe">鍗曚綅锛氫竾浜�</div>
+ <div class="signaHeader">
+ <div>
+ <el-radio-group v-model="type" @change="changeType">
+ <el-radio-button label="鐑姏"></el-radio-button>
+ <el-radio-button label="鏌辩姸"></el-radio-button>
+ <el-radio-button label="缃戞牸"></el-radio-button>
+ </el-radio-group>
+ </div>
+
+ <div>
+ <label>{{ sliderLabel }}</label>
+ <label>鍗曚綅锛氫竾浜�</label>
+ </div>
+ </div>
+ <div class="signaSlider">
+
+ <el-slider v-model="sliderValue" @change="handleSliderChange" :format-tooltip="formatTooltip"
+ :marks="silderMark" :step="1" :min="0" :max="47" show-stops>
+ </el-slider>
+ </div>
+ <div class="signaButton">
+ <div class="signalling_play" @click="signallingPlay()">
+ <img src="~@/assets/img/new/rightArrow.png" />
+ </div>
+ </div>
+ <!-- <div class="signalling_describe">鍗曚綅锛氫竾浜�</div>
<div>
<ul class="signalling_ul">
<li class="signalling_node" :class="{ signalling_active: i == selectIndex }" v-for="(item, i) in time"
@@ -11,16 +36,14 @@
</li>
</ul>
</div>
- <div class="signalling_play" @click="signallingPlay()">
- <img src="~@/assets/img/new/rightArrow.png" />
- </div>
+
<div class="signalling_type">
<el-radio-group v-model="type" @change="changeType">
<el-radio-button label="鐑姏"></el-radio-button>
<el-radio-button label="鏌辩姸"></el-radio-button>
<el-radio-button label="缃戞牸"></el-radio-button>
</el-radio-group>
- </div>
+ </div> -->
</div>
</template>
<style>
@@ -51,13 +74,36 @@
.signalling {
position: absolute;
left: 50%;
- margin-left: -650px;
+ transform: translateX(-50%);
bottom: 230px;
color: white;
width: 1300px;
z-index: 9999999;
pointer-events: all;
+ background-image: url("~@/assets/img/new/listbg.png");
+ background-size: 100% 100%;
+ padding: 20px 10px;
+ border-radius: 10px;
}
+
+.signaHeader {
+ display: flex;
+
+ justify-content: space-between;
+ align-items: center;
+ /* color: #409EFF; */
+}
+
+.signaSlider {
+ margin: 20px 20px;
+}
+
+.signaButton {
+ width: 100%;
+ display: flex;
+ justify-content: center;
+}
+
.signalling_type {
@@ -73,19 +119,22 @@
}
.signalling_play {
- position: absolute;
+ /* position: absolute;
left: 0px;
- top: 110px;
- width: 48px;
- height: 48px;
+ top: 110px; */
+ width: 24px;
+ height: 24px;
cursor: pointer;
border-radius: 32px;
border: 1px solid #fff;
+ display: flex;
+ justify-content: center;
+ align-items: center;
}
.signalling_play img {
- width: 32px;
- height: 32px;
+ width: 16px;
+ height: 16px;
margin: 8px 6px 8px 10px;
}
@@ -140,6 +189,11 @@
},
data() {
return {
+ sliderLabel: '',
+ silderMark: {},
+ sliderFLag: false,
+ sliderMax: 0,
+ sliderValue: 0,
type: "鐑姏",
play: false,
selectIndex: 0,
@@ -151,6 +205,7 @@
removeDataRender();
removeGrid();
},
+
mounted() {
let that = this;
const loading = this.$loading({
@@ -162,9 +217,52 @@
window.requestData(function () {
that.value = signallingData.count;
loading.close();
+ that.getMarks();
+
});
+
+
},
methods: {
+ formatTooltip(res) {
+ var val = this.value[res] / 10000;
+ return this.time[res] + " : " + Math.round(parseFloat(val));
+
+ },
+ getForMate(res) {
+ var val = this.value[res] / 10000;
+ return "鏃堕棿锛� " + this.time[res] + " " + " 鍊硷細" + Math.round(parseFloat(val));
+ },
+ getMarks() {
+ this.sliderLabel = this.getForMate(0)
+ for (var i = 0; i < this.time.length; i++) {
+ if (i % 2 == 0) {
+ const key = i;
+ const value = this.time[i];
+ this.$set(this.silderMark, key, {
+ style: {
+ color: '#FFFFFF'
+ },
+ label: value
+ }); // 浣跨敤 Vue.set 瑙﹀彂瑙嗗浘鏇存柊
+ }
+
+ }
+
+
+ this.sliderFLag = true
+
+ },
+ handleSliderChange(val) {
+ this.play = false;
+
+
+ this.$nextTick(() => {
+ this.changeTime(val)
+ })
+
+ },
+
changeType(val) {
const loading = this.$loading({
lock: true,
@@ -172,6 +270,8 @@
spinner: "el-icon-loading",
background: "rgba(0, 0, 0, 0.7)",
});
+ this.sliderLabel = this.getForMate(0)
+ this.sliderValue = 0;
this.play = false;
if (val == "鐑姏") {
removeGrid();
@@ -220,6 +320,7 @@
} else {
signallingData.selectid++;
}
+ this.sliderValue = this.selectIndex;
this.selectIndex = signallingData.selectid;
setTimeout(() => {
if (this.play) {
--
Gitblit v1.9.3