+加入视频元素

liuyg

2021-12-24 c66854b7d1ad469d5866f696998ebb0ae0557f32

+加入视频元素

 src/api/mobile/monitor/index.js

New file
@@ -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
    })
}

 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,
              };
              // 定制化窗体

 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 == "文化风景"

 src/components/mobilePopupOurOnce/index.vue

@@ -138,6 +138,7 @@
          telePhone: result.telephone,
          address: result.address,
          introduce: result.introduce,
          video: result.videourl,
        };
        this.ourData = d;
      });

 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() {

 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;
    }
}
}