修改车间实时监控

朱桂飞

2025-01-11 909d20ae348ae18a07a54068c3517ce47a2bcfc7

修改车间实时监控

 src/assets/images/dry/bg/img_video.png

 src/views/dashboard/video/index.vue

@@ -1,272 +1,242 @@
<template>
  <div>
    <div class="app">
      <div class="video-box">
        <div class="video-item">
          <div class="item-title">
            æ™ºèƒ½ä¸­è‰è¯
          </div>
          <div id="video-container1" class="item-player">
          </div>

        </div>
        <div class="video-item">
          <div class="item-title">
            æ™ºèƒ½ä¸­è‰è¯
          </div>
          <div id="video-container2" class="item-player">

          </div>

        </div>
        <div class="video-item">
          <div class="item-title">
            æ™ºèƒ½ä¸­è‰è¯
          </div>
          <div id="video-container3" class="item-player">

          </div>

        </div>

        <div class="video-item">
          <div class="item-title">
            æ™ºèƒ½ä¸­è‰è¯
          </div>
          <div id="video-container4" class="item-player">

          </div>

        </div>
        <div class="video-item">
          <div class="item-title">
            æ™ºèƒ½ä¸­è‰è¯
          </div>
          <div id="video-container5" class="item-player">

          </div>

        </div>
        <div class="video-item">
          <div class="item-title">
            æ™ºèƒ½ä¸­è‰è¯
          </div>
          <div id="video-container5_2" class="item-player">

          </div>

        </div>

      </div>

    </div>
  </div>


    <div>
        <div class="app">
            <div class="video-box">
                <div :class="['video-item', { 'video-hover': !item.isplay }]" v-for="(item, index) in videoList" :key="index">
                    <div class="item-title">{{ item.name }}</div>
                    <div :id="item.id" class="item-player base_bg"></div>
                    <div class="video-control">
                        <div class="playBtn">
                            <CaretRightOutlined @click="playNext(item)" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref, onUnmounted } from "vue";
import EZUIKit from "ezuikit-js/ezuikit";
import axios from "axios";
    import { CaretRightOutlined } from '@ant-design/icons-vue'
    import { onMounted, ref, onUnmounted } from 'vue'
    import EZUIKit from 'ezuikit-js/ezuikit'
    import axios from 'axios'

    const playerWidth = 420
    const playerHeight = 270
    const templateCode = 'b45cd61a6e2b40389f1e914e08ab7160'

const playerWidth = 420;
const playerHeight = 270;
const templateCode = "bef3c43bae064cc78f60bc76709ef2f2";
    // TODO token获取逻辑放到服务端
    const accessToken = ref()
    const appKey = 'b1849dcfc58d4446b1d651856bc72edd'
    const appSecret = 'c82d202fdc9d6af53fc7719623526cc1'
    //直播地址  BB2645510-摄像机序列号  hd-高清（去掉则播放普通） 1-通道号
    const videoList = ref([
        {
            id: 'video_1',
            url: 'ezopen://open.ys7.com/BB2645510/1.live',
            name: '西南角',
            isplay: false,
        },
        {
            id: 'video_2',
            url: 'ezopen://open.ys7.com/BB2646044/1.live',
            name: '上料口',
            isplay: false,
        },
        {
            id: 'video_3',
            url: 'ezopen://open.ys7.com/BB2646084/1.live',
            name: '出料口',
            isplay: false,
        },
        {
            id: 'video_4',
            url: 'ezopen://open.ys7.com/BB2646113/1.live',
            name: '西北角',
            isplay: false,
        },
        {
            id: 'video_5',
            url: 'ezopen://open.ys7.com/BB5066611/1.live',
            name: '大门上-广角',
            isplay: false,
        },
        {
            id: 'video_6',
            url: 'ezopen://open.ys7.com/BB5066611/2.live',
            name: '大门上-主摄',
            isplay: false,
        },
    ])

// TODO token获取逻辑放到服务端
const accessToken = ref();
const appKey = "bcd4b89660734f48b595cfcd80ab4ee4";
const appSecret = "8701a6ce59ddfc0e5335f89832bab23c";
    let peviewPlayer = ref()

//直播地址  BB2645510-摄像机序列号  hd-高清（去掉则播放普通） 1-通道号
const url1 = "ezopen://open.ys7.com/BB2645510/1.hd.live";
const url2 = "ezopen://open.ys7.com/BB2646044/1.hd.live";
const url3 = "ezopen://open.ys7.com/BB2646084/1.hd.live";
const url4 = "ezopen://open.ys7.com/BB2646113/1.hd.live";
const url5 = "ezopen://open.ys7.com/BB5066611/1.hd.live";
const url5_2 = "ezopen://open.ys7.com/BB5066611/2.hd.live";
    function initVideo(item) {
        //设置当前播放器为播放状态
        item.isplay = true
        peviewPlayer.value = new EZUIKit.EZUIKitPlayer({
            id: item.id, // è§†é¢‘容器ID
            accessToken: accessToken.value,
            url: item.url,
            template: templateCode,
            plugin: ['talk'], // åŠ è½½æ’件，talk-对讲
            width: playerWidth,
            height: playerHeight,
            handleSuccess: (res) => {},
            handleError: (res) => {
                if (res.retcode == '10002') {
                    console.info('初始化失败，token过期')
                }
            },
        })
        setTimeout(() => {
            console.info('初始化完成，开始自动播放')
            peviewPlayer.value.play()
        }, 1000)
    }

    function initPlayer() {
        playNext(videoList.value[0])
    }

let player1 = ref();
    function playNext(item) {
        setPlayNone()
        if (!peviewPlayer.value) {
            initVideo(item)
        } else {
            peviewPlayer.value.stop().then(() => {
                initVideo(item)
                peviewPlayer.value.play()
            })
        }
    }

    /**
     * è®¾ç½®æ‰€æœ‰æ’­æ”¾å™¨çŠ¶æ€ä¸ºæœªæ’­æ”¾
     */
    function setPlayNone() {
        videoList.value.forEach((item) => {
            if (item.isplay) {
                item.isplay = false
            }
        })
    }

function initPlayer1() {
  player1 = new EZUIKit.EZUIKitPlayer({
    id: "video-container1", // è§†é¢‘容器ID
    accessToken: accessToken.value,
    url: url1,
    template: templateCode,
    plugin: ["talk"], // åŠ è½½æ’件，talk-对讲
    width: playerWidth,
    height: playerHeight,
    handleSuccess: (res => {
        console.info(res);
        console.info("初始化成功");
      }
    ),
    handleError: (res => {
        console.info(res);
        if (res.retcode == "10002") {
          console.info("初始化失败，token过期");
        }
      }
    )
  });
  setTimeout(() => {
    console.info("开始自动播放1号")
    player1.play();
  }, 1000);
}
    function checkAccessToken() {
        const ez_expireTime = localStorage.getItem('ez_expireTime')
        const ez_accessToken = localStorage.getItem('ez_accessToken')
        const now = new Date().getTime()
        const time = ez_expireTime - now //判断token是否过期

function initPlayer2() {
  new EZUIKit.EZUIKitPlayer({
    id: "video-container2", // è§†é¢‘容器ID
    accessToken: accessToken.value,
    url: url2,
    template: templateCode,
    plugin: ["talk"], // åŠ è½½æ’件，talk-对讲
    header: ["zoom"],
    width: playerWidth,
    height: playerHeight
  });
}
        accessToken.value = ez_accessToken
        if (ez_accessToken && time > 1000 * 60) {
            initPlayer()
        } else {
            getAccessToken()
        }
    }

function initPlayer3() {
  new EZUIKit.EZUIKitPlayer({
    id: "video-container3", // è§†é¢‘容器ID
    accessToken: accessToken.value,
    url: url3,
    template: templateCode,
    plugin: ["talk"], // åŠ è½½æ’件，talk-对讲
    width: playerWidth,
    height: playerHeight
  });
}
    async function getAccessToken() {
        const api = axios.create({
            baseURL: 'https://open.ys7.com', // è®¾ç½®ä¸ºç©ºå­—符串，或者设置为第三方接口的基本URL
        })
        try {
            const response = await api.post('/api/lapp/token/get?appKey=' + appKey + '&appSecret=' + appSecret) // è¿™é‡Œçš„路径为相对路径，不包含前缀
            if (response && response.data && response.data.code == 200) {
                localStorage.setItem('ez_accessToken', response.data.data.accessToken)
                localStorage.setItem('ez_expireTime', response.data.data.expireTime)
                accessToken.value = response.data.data.accessToken
                initPlayer()
            }
            console.log(response)
            // å¤„理成功响应数据
        } catch (error) {
            console.error(error)
            // å¤„理错误
        }
    }

function initPlayer4() {
  new EZUIKit.EZUIKitPlayer({
    id: "video-container4", // è§†é¢‘容器ID
    accessToken: accessToken.value,
    url: url4,
    template: templateCode,
    plugin: ["talk"], // åŠ è½½æ’件，talk-对讲
    width: playerWidth,
    height: playerHeight
  });
}
    // DOM挂载完成后渲染图表
    onMounted(() => {
        checkAccessToken()
    })

function initPlayer5() {
  new EZUIKit.EZUIKitPlayer({
    id: "video-container5", // è§†é¢‘容器ID
    accessToken: accessToken.value,
    url: url5,
    template: templateCode,
    plugin: ["talk"], // åŠ è½½æ’件，talk-对讲
    width: playerWidth,
    height: playerHeight
  });
}
    onUnmounted(() => {

function initPlayer5_2() {
  new EZUIKit.EZUIKitPlayer({
    id: "video-container5_2", // è§†é¢‘容器ID
    accessToken: accessToken.value,
    url: url5_2,
    template: templateCode,
    plugin: ["talk"], // åŠ è½½æ’件，talk-对讲
    width: playerWidth,
    height: playerHeight
  });
}

function initPlayer() {
  initPlayer1();
  initPlayer2();
  initPlayer3();
  initPlayer4();
  initPlayer5();
  initPlayer5_2();
}

function checkAccessToken() {
  const ez_expireTime = localStorage.getItem("ez_expireTime");
  const ez_accessToken = localStorage.getItem("ez_accessToken");
  const now = new Date().getTime();
  const time = ez_expireTime - now; //判断token是否过期

  accessToken.value = ez_accessToken;
  if (ez_accessToken && (time > 1000 * 60)) {
    initPlayer();
  } else {
    getAccessToken();
  }


}

async function getAccessToken() {
  const api = axios.create({
    baseURL: "https://open.ys7.com" // è®¾ç½®ä¸ºç©ºå­—符串，或者设置为第三方接口的基本URL
  });
  try {
    const response = await api.post("/api/lapp/token/get?appKey=" + appKey + "&appSecret=" + appSecret); // è¿™é‡Œçš„路径为相对路径，不包含前缀
    if (response && response.data && response.data.code == 200) {
      localStorage.setItem("ez_accessToken", response.data.data.accessToken);
      localStorage.setItem("ez_expireTime", response.data.data.expireTime);
      accessToken.value = response.data.data.accessToken;
      initPlayer();
    }
    console.log(response);
    // å¤„理成功响应数据
  } catch (error) {
    console.error(error);
    // å¤„理错误
  }
}


// DOM挂载完成后渲染图表
onMounted(() => {
  checkAccessToken();

});

onUnmounted(() => {

});
    })
</script>

<style lang="less" scoped>
.app {
  width: 100%;
  display: flex;
}
    .app {
        width: 100%;
        display: flex;
    }

.video-box {
  width: 100%;
  margin: 10px;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  background-color: white;
}
    .video-box {
        width: 100%;
        margin: 10px;
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        background-color: white;
    }

.video-item {
  height: 300px;
  margin: 10px;
  width: 420px;
  display: flex;
  flex-direction: column;
    .video-item {
        position: relative;
        width: 420px;
        height: 300px;
        margin: 10px;
        display: flex;
        flex-direction: column;

  .item-title {
    width: 100%;
    height: 30px;
    font-weight: bold;
  }
        .item-title {
            width: 100%;
            height: 30px;
            font-weight: bold;
        }

}
        .base_bg {
            height: 100%;
        }

        .base_bg::before {
            content: '';
            display: block;
            background-image: url(/src/assets/images/dry/bg/img_video.png);
            background-size: 100% 100%;
            background-position: center;
            background-repeat: no-repeat;
            position: absolute;
            top: 30px;
            left: 0;
            right: 0;
            bottom: 0;
        }

        .video-control {
            position: absolute;
            top: 30px;
            width: 100%;
            height: 270px;
            display: none; /* é»˜è®¤éšè— */
            background-color: rgba(0, 0, 0, 0.3);

            .playBtn {
                position: absolute;
                top: 50%;
                left: 50%;
                color: white;
                font-size: 40px;
                transform: translate(-50%, -50%);
            }
        }
    }

    .video-hover {
    }

    .video-hover:hover .video-control {
        display: block;
    }
</style>

 src/views/dashboard/videoFit/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,254 @@
<template>
    <div>
        <div class="app">
            <div class="video-box">
                <div :class="['video-item', { 'video-hover': !item.isplay }]" v-for="(item, index) in videoList" :key="index">
                    <div class="item-title">{{ item.name }}</div>
                    <div :id="item.id" class="item-player base_bg"></div>
                    <div class="video-control">
                        <div class="playBtn">
                            <CaretRightOutlined @click="playNext(item)" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
    import { CaretRightOutlined } from '@ant-design/icons-vue'
    import { onMounted, ref, onUnmounted } from 'vue'
    import EZUIKit from 'ezuikit-js/ezuikit'
    import axios from 'axios'

    const playerWidth = 420
    const playerHeight = 270
    const templateCode = 'b45cd61a6e2b40389f1e914e08ab7160'

    // TODO token获取逻辑放到服务端
    const accessToken = ref()
    const appKey = 'b1849dcfc58d4446b1d651856bc72edd'
    const appSecret = 'c82d202fdc9d6af53fc7719623526cc1'
    //直播地址  BB2645510-摄像机序列号  hd-高清（去掉则播放普通） 1-通道号
    const videoList = ref([
        {
            id: 'video_1',
            url: 'ezopen://open.ys7.com/FR0817313/1.live',
            name: '进门左手边-主摄',
            isplay: false,
        },
        {
            id: 'video_2',
            url: 'ezopen://open.ys7.com/FR0817313/2.live',
            name: '进门左手边-广角',
            isplay: false,
        },
        {
            id: 'video_3',
            url: 'ezopen://open.ys7.com/FR0817368/1.live',
            name: '进门右手边-主摄',
            isplay: false,
        },
        {
            id: 'video_4',
            url: 'ezopen://open.ys7.com/FR0817368/2.live',
            name: '进门右手边-广角',
            isplay: false,
        },
        {
            id: 'video_5',
            url: 'ezopen://open.ys7.com/FR0817377/1.live',
            name: '左墙靠门-主摄',
            isplay: false,
        },
        {
            id: 'video_6',
            url: 'ezopen://open.ys7.com/FR0817377/2.live',
            name: '左墙靠门-广角',
            isplay: false,
        },
        {
            id: 'video_7',
            url: 'ezopen://open.ys7.com/FR0817358/1.live',
            name: '左墙靠办公室-主摄',
            isplay: false,
        },
        {
            id: 'video_8',
            url: 'ezopen://open.ys7.com/FR0817358/2.live',
            name: '左墙靠办公室-广角',
            isplay: false,
        },
    ])

    let peviewPlayer = ref()

    function initVideo(item) {
        //设置当前播放器为播放状态
        item.isplay = true
        peviewPlayer.value = new EZUIKit.EZUIKitPlayer({
            id: item.id, // è§†é¢‘容器ID
            accessToken: accessToken.value,
            url: item.url,
            template: templateCode,
            plugin: ['talk'], // åŠ è½½æ’件，talk-对讲
            width: playerWidth,
            height: playerHeight,
            handleSuccess: (res) => {},
            handleError: (res) => {
                if (res.retcode == '10002') {
                    console.info('初始化失败，token过期')
                }
            },
        })
        setTimeout(() => {
            console.info('初始化完成，开始自动播放')
            peviewPlayer.value.play()
        }, 1000)
    }

    function initPlayer() {
        playNext(videoList.value[0])
    }

    function playNext(item) {
        setPlayNone()
        if (!peviewPlayer.value) {
            initVideo(item)
        } else {
            peviewPlayer.value.stop().then(() => {
                initVideo(item)
                peviewPlayer.value.play()
            })
        }
    }

    /**
     * è®¾ç½®æ‰€æœ‰æ’­æ”¾å™¨çŠ¶æ€ä¸ºæœªæ’­æ”¾
     */
    function setPlayNone() {
        videoList.value.forEach((item) => {
            if (item.isplay) {
                item.isplay = false
            }
        })
    }

    function checkAccessToken() {
        const ez_expireTime = localStorage.getItem('ez_expireTime')
        const ez_accessToken = localStorage.getItem('ez_accessToken')
        const now = new Date().getTime()
        const time = ez_expireTime - now //判断token是否过期

        accessToken.value = ez_accessToken
        if (ez_accessToken && time > 1000 * 60) {
            initPlayer()
        } else {
            getAccessToken()
        }
    }

    async function getAccessToken() {
        const api = axios.create({
            baseURL: 'https://open.ys7.com', // è®¾ç½®ä¸ºç©ºå­—符串，或者设置为第三方接口的基本URL
        })
        try {
            const response = await api.post('/api/lapp/token/get?appKey=' + appKey + '&appSecret=' + appSecret) // è¿™é‡Œçš„路径为相对路径，不包含前缀
            if (response && response.data && response.data.code == 200) {
                localStorage.setItem('ez_accessToken', response.data.data.accessToken)
                localStorage.setItem('ez_expireTime', response.data.data.expireTime)
                accessToken.value = response.data.data.accessToken
                initPlayer()
            }
            console.log(response)
            // å¤„理成功响应数据
        } catch (error) {
            console.error(error)
            // å¤„理错误
        }
    }

    // DOM挂载完成后渲染图表
    onMounted(() => {
        checkAccessToken()
    })

    onUnmounted(() => {

    })
</script>

<style lang="less" scoped>
    .app {
        width: 100%;
        display: flex;
    }

    .video-box {
        width: 100%;
        margin: 10px;
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        background-color: white;
    }

    .video-item {
        position: relative;
        width: 420px;
        height: 300px;
        margin: 10px;
        display: flex;
        flex-direction: column;

        .item-title {
            width: 100%;
            height: 30px;
            font-weight: bold;
        }

        .base_bg {
            height: 100%;
        }

        .base_bg::before {
            content: '';
            display: block;
            background-image: url(/src/assets/images/dry/bg/img_video.png);
            background-size: 100% 100%;
            background-position: center;
            background-repeat: no-repeat;
            position: absolute;
            top: 30px;
            left: 0;
            right: 0;
            bottom: 0;
        }

        .video-control {
            position: absolute;
            top: 30px;
            width: 100%;
            height: 270px;
            display: none; /* é»˜è®¤éšè— */
            background-color: rgba(0, 0, 0, 0.3);

            .playBtn {
                position: absolute;
                top: 50%;
                left: 50%;
                color: white;
                font-size: 40px;
                transform: translate(-50%, -50%);
            }
        }
    }

    .video-hover {
    }

    .video-hover:hover .video-control {
        display: block;
    }
</style>