From c66854b7d1ad469d5866f696998ebb0ae0557f32 Mon Sep 17 00:00:00 2001
From: liuyg <376836862@qq.com>
Date: Fri, 24 Dec 2021 15:34:11 +0800
Subject: [PATCH] +加入视频元素
---
src/components/mobileWindow/index.vue | 26 +++++++++++--
src/api/mobile/monitor/index.js | 16 ++++++++
src/styles/mobile/popup.scss | 28 ++++++++-----
src/components/mobileLeftNav/index.vue | 36 +++++++++++++++++
src/components/mobilePopupOur/index.vue | 2 +
src/components/mobilePopupOurOnce/index.vue | 1
6 files changed, 93 insertions(+), 16 deletions(-)
diff --git a/src/api/mobile/monitor/index.js b/src/api/mobile/monitor/index.js
new file mode 100644
index 0000000..0a1635f
--- /dev/null
+++ b/src/api/mobile/monitor/index.js
@@ -0,0 +1,16 @@
+/*
+ * @Author: Morpheus
+ * @Date: 2021-05-09 15:17:44
+ * @Last Modified by: liu
+ * @Last Modified time: 2021-12-24 14:39:49
+ */
+// 监控
+import request from '@/router/axios'
+
+export const getListVideo = (params) => {
+ return request({
+ url: 'blade-architecture/architecture/selectVideo',
+ method: 'get',
+ params: params
+ })
+}
diff --git a/src/components/mobileLeftNav/index.vue b/src/components/mobileLeftNav/index.vue
index b2bfae4..2515e3e 100644
--- a/src/components/mobileLeftNav/index.vue
+++ b/src/components/mobileLeftNav/index.vue
@@ -28,6 +28,7 @@
getListroad, //道路
getListcat, //出入-AED-停车场
} from "@/api/mobile/piont/index";
+import { getListVideo } from "@/api/mobile/monitor/index";
export default {
name: "mobileLeftNav",
watch: {
@@ -102,6 +103,17 @@
imgSrc: "img/leftnav/map-panorama.png",
// imgSrc: "img/mobile/blue.png",
},
+ {
+ flag: false,
+ label: "监控",
+ img: "/img/leftnav/scene.png",
+ normal: "/img/leftnav/scene.png",
+ checked: "/img/leftnav/scene-checked.png",
+ layer: "videoLayer",
+ methods: getListVideo,
+ imgSrc: "img/leftnav/map-panorama.png",
+ // imgSrc: "img/mobile/blue.png",
+ },
// {
// flag: false,
// label: "活动",
@@ -154,6 +166,7 @@
tagLayer: null,
wayLayer: null,
sceneLayer: null,
+ videoLayer: null,
activityLayer: null,
aedLayer: null,
parkLayer: null,
@@ -234,6 +247,9 @@
// this.sceneLayer = new this.DC.VectorLayer("sceneLayer");
this.sceneLayer = new this.DC.HtmlLayer("sceneLayer");
viewer.addLayer(this.sceneLayer);
+
+ this.videoLayer = new this.DC.HtmlLayer("videoLayer");
+ viewer.addLayer(this.videoLayer);
// this.activityLayer = new this.DC.VectorLayer("activityLayer");
this.activityLayer = new this.DC.HtmlLayer("activityLayer");
@@ -530,14 +546,32 @@
</div>
</div>
`;
+ } else if (ourD.label == "监控") {
+ dom = `
+ <div class="mobiletag-entitys-box-pink">
+ <div class="tag-content">
+ 监控
+ </div>
+ <div class="tag-angle-content">
+ <img src="${ourD.imgSrc}">
+ </div>
+ </div>
+ `;
}
const divIcon = new that.DC.DivIcon(position[k], dom);
//订阅事件
divIcon.on(DC.MouseEventType.CLICK, (e) => {
// console.log(data[k]);
let d = {
- name: data[k].mechanismname || data[k].roadname,
+ name:
+ data[k].mechanismname ||
+ data[k].roadname ||
+ ourD.label == "监控"
+ ? "监控"
+ : "无显示名字",
bgImg: data[k].tpurl,
+ video: data[k].videourl || "",
+ from: "labels",
introduce: data[k].introduce,
};
// 定制化窗体
diff --git a/src/components/mobilePopupOur/index.vue b/src/components/mobilePopupOur/index.vue
index 87571b6..deb1d58 100644
--- a/src/components/mobilePopupOur/index.vue
+++ b/src/components/mobilePopupOur/index.vue
@@ -201,6 +201,7 @@
icon: icon,
icons: icon + item.mechanismname, //图片响应改变
from: this.choiceMain,
+ video: item.videourl,
buts:
this.mBigPopup.name == "校园建筑" ||
this.mBigPopup.name == "文化风景"
@@ -228,6 +229,7 @@
telePhone: item.telephone,
address: item.address,
introduce: item.introduce,
+ video: item.videourl,
buts:
that.mBigPopup.name == "校园建筑" ||
that.mBigPopup.name == "文化风景"
diff --git a/src/components/mobilePopupOurOnce/index.vue b/src/components/mobilePopupOurOnce/index.vue
index 39759a2..03671b4 100644
--- a/src/components/mobilePopupOurOnce/index.vue
+++ b/src/components/mobilePopupOurOnce/index.vue
@@ -138,6 +138,7 @@
telePhone: result.telephone,
address: result.address,
introduce: result.introduce,
+ video: result.videourl,
};
this.ourData = d;
});
diff --git a/src/components/mobileWindow/index.vue b/src/components/mobileWindow/index.vue
index e7ae014..9306f2d 100644
--- a/src/components/mobileWindow/index.vue
+++ b/src/components/mobileWindow/index.vue
@@ -10,7 +10,8 @@
<div class="mobile-popup-imgs-h-close">
<i class="el-icon-close icon" @click="closeWindow"></i>
</div>
- <img :src="url" alt="" />
+ <video :src="video" controls="controls" autoplay v-if="video"></video>
+ <img :src="url" alt="" v-show="url && !video" />
<el-image
style="width: 100px; height: 100px"
:src="url"
@@ -20,7 +21,7 @@
>
</el-image>
<!-- <div>{{ query.query }}</div> -->
- <div class="mobileBig-center-our">
+ <div class="mobileBig-center-our" v-show="!video">
<div
v-for="(item, index) in center"
:key="index"
@@ -47,6 +48,8 @@
? 'el-icon-data-board'
: item.name == '去这'
? 'el-icon-finished'
+ : item.name == '视频'
+ ? 'el-icon-video-camera-solid'
: ''
"
class="mobilePopupOurOnce_r_d_in"
@@ -76,7 +79,7 @@
//数据更改
// this.fullscreenLoading = true;
if (!this.MobileWindowsHide) {
- // console.log("地图点击弹窗数据请求参数", this.query);
+ this.video = ""; //清除视频
let queryData = this.query.query;
// console.log(queryData);
this.title = queryData.name;
@@ -106,6 +109,14 @@
name: "去这",
},
];
+ }
+ if (queryData.video) {
+ if (queryData.from == "labels") {
+ this.seebut = [];
+ this.video = queryData.video;
+ } else {
+ this.seebut.push({ name: "视频" });
+ }
}
this.center = [];
for (let k in queryData) {
@@ -147,7 +158,8 @@
introduce: "暂无详情数据",
title: "",
fullscreenLoading: false,
- url: "/img/job/one.jpg",
+ url: "",
+ video: "",
positions: "",
srcList: [],
seebut: [],
@@ -168,6 +180,12 @@
} else if (val == "图集") {
let imgsDom = document.getElementById("mobileBigImgs");
imgsDom.click();
+ } else if (val == "视频") {
+ this.seebut[this.seebut.length - 1].name = "返回";
+ this.video = this.query.query.video;
+ } else if (val == "返回") {
+ this.seebut[this.seebut.length - 1].name = "视频";
+ this.video = "";
}
},
closeWindow() {
diff --git a/src/styles/mobile/popup.scss b/src/styles/mobile/popup.scss
index 616965e..f751720 100644
--- a/src/styles/mobile/popup.scss
+++ b/src/styles/mobile/popup.scss
@@ -19,20 +19,24 @@
position: absolute;
height: auto;
// background-color: #fff;
- background-image: linear-gradient( // 135deg,
+ background-image: linear-gradient(
+ // 135deg,
// rgba(40,187,240, 0.5) 50%,
// transparent 50%
rgba(40, 187, 240, 0.5) 35px,
rgba(40, 187, 240, 0.5) 35px,
rgba(40, 187, 240, 0.5) calc(100% - 34px),
- transparent calc(100% - 34px)),
- linear-gradient( // -45deg,
+ transparent calc(100% - 34px)
+ ),
+ linear-gradient(
+ // -45deg,
// rgba(40,187,240, 0.5) 50.1%,
// transparent 50%
transparent 35px,
rgba(40, 187, 240, 0.5) 35px,
rgba(40, 187, 240, 0.5) calc(100% - 0px),
- transparent calc(100% - 0px));
+ transparent calc(100% - 0px)
+ );
// background-image: linear-gradient(135deg, transparent 30px, rgba(40,187,240, 0.5) 30px, rgba(40,187,240, 0.5) 50%, transparent 50%),
// linear-gradient(-45deg, transparent 30px, rgba(40,187,240, 0.5) 30px, rgba(40,187,240, 0.5) 50.1%, transparent 50%);
border-radius: 10px;
@@ -44,7 +48,7 @@
width: 100%;
height: 35px;
// background-image: linear-gradient(135deg, transparent 25px, #29baf1 25px);
- background-image: linear-gradient(rgba(41,186,241, 0.5), rgba(41,186,241, 0.5));
+ background-image: linear-gradient(rgba(41, 186, 241, 0.5), rgba(41, 186, 241, 0.5));
// background-image: linear-gradient(#29baf1, #28bbf0);
// background-color: #f7f7f7;
@@ -90,7 +94,10 @@
text-align: justify;
letter-spacing: 1px;
box-sizing: border-box;
-
+ video {
+ width: 100%;
+ height: 100%;
+ }
img {
margin-left: calc(50% - 35px);
width: 70px;
@@ -144,7 +151,7 @@
border-radius: 0 0 10px 10px;
display: flex;
align-items: center;
- background-image: linear-gradient(rgba(41,186,241, 0.5), rgba(41,186,241, 0.5));
+ background-image: linear-gradient(rgba(41, 186, 241, 0.5), rgba(41, 186, 241, 0.5));
// background-image: linear-gradient(#29baf1, #28bbf0);
justify-content: center;
position: relative;
@@ -155,9 +162,9 @@
height: 0px;
// background-image: linear-gradient(rgba(41,186,241, 0.5), rgba(41,186,241, 0.5));
border-top: 8px solid transparent;
- border-bottom: 8px solid rgba(25,179,240, 0.5);
+ border-bottom: 8px solid rgba(25, 179, 240, 0.5);
border-left: 8px solid transparent;
- border-right: 8px solid rgba(25,179,240, 0.5);
+ border-right: 8px solid rgba(25, 179, 240, 0.5);
position: absolute;
bottom: -8px;
left: calc(50% - 8px);
@@ -176,7 +183,6 @@
$controllerw: 35px !important;
#mobile-viewer-container {
-
// 继承类
.flexCenter {
display: flex !important;
@@ -478,4 +484,4 @@
width: $size;
height: $size;
}
-}
\ No newline at end of file
+}
--
Gitblit v1.9.3