laozt
1 year ago
parent
433d322e29
commit
c2434a4e9b
@ -1,298 +0,0 @@
|
|||||||
<!--
|
|
||||||
* @Author: 张涛
|
|
||||||
* @Date: 2023-11-06 14:18:06
|
|
||||||
* @LastEditors: 张涛
|
|
||||||
* @LastEditTime: 2023-11-10 13:14:51
|
|
||||||
* @FilePath: \JiangNingUmale-App\subcontract\work\videocenter\index.vue
|
|
||||||
-->
|
|
||||||
<template>
|
|
||||||
<view class="page">
|
|
||||||
<u-navbar
|
|
||||||
title="视频中心"
|
|
||||||
back-icon-color="#FFFFFF"
|
|
||||||
title-color="#FFFFFF"
|
|
||||||
leftText="返回"
|
|
||||||
:autoBack="true"
|
|
||||||
:placeholder="true"
|
|
||||||
/>
|
|
||||||
<view class="view-segmented">
|
|
||||||
<uni-segmented-control
|
|
||||||
:current="current"
|
|
||||||
:values="items"
|
|
||||||
@clickItem="onClickItem"
|
|
||||||
styleType="button"
|
|
||||||
activeColor="#007aff"
|
|
||||||
bgColor="#FFFFFF"
|
|
||||||
fontColor="#34373B"
|
|
||||||
tabHeight="88rpx"
|
|
||||||
tabFontsize="32rpx"
|
|
||||||
tabBoxShadow="1rpx 1rpx 10rpx rgba(0,0,0,0.1)"
|
|
||||||
tabBorderRadius="16rpx"
|
|
||||||
class="segmented-controls"
|
|
||||||
></uni-segmented-control>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<view class="main-content">
|
|
||||||
<view v-show="current === 0">
|
|
||||||
<view class="work-center">
|
|
||||||
<view
|
|
||||||
v-for="(item, index) in grids"
|
|
||||||
:key="index"
|
|
||||||
@click="goPath(item)"
|
|
||||||
style="position: relative"
|
|
||||||
>
|
|
||||||
<!-- <image src="/static/images/umale/video.png" class="grid-img" />
|
|
||||||
<view class="grid-img-play">
|
|
||||||
<image src="/static/images/umale/play.png" />
|
|
||||||
</view> -->
|
|
||||||
<view class="videoMain">
|
|
||||||
<video-main :src="videoSrc" :id="index"></video-main>
|
|
||||||
</view>
|
|
||||||
<view class="grid-name">
|
|
||||||
<text>{{ item.name }} </text>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view v-show="current === 1">
|
|
||||||
<view class="work-center">
|
|
||||||
<view
|
|
||||||
v-for="(item, index) in grids"
|
|
||||||
:key="index"
|
|
||||||
@click="goPath(item)"
|
|
||||||
style="position: relative"
|
|
||||||
>
|
|
||||||
<image src="/static/images/umale/video.png" class="grid-img" />
|
|
||||||
<view class="grid-img-play">
|
|
||||||
<image src="/static/images/umale/play.png" />
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<view class="grid-name">
|
|
||||||
<text>{{ item.name }} </text>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import videoMain from "./video.vue"
|
|
||||||
export default {
|
|
||||||
components:{
|
|
||||||
videoMain
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
items: ["车载监控视频", "固定监控视频"],
|
|
||||||
current: 0,
|
|
||||||
videoSrc:"https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8",
|
|
||||||
grids: [
|
|
||||||
{
|
|
||||||
name: "秦淮河1号监控",
|
|
||||||
gridImg: "",
|
|
||||||
color: "#0D306B",
|
|
||||||
subcolor: "#BE9085",
|
|
||||||
disable: false,
|
|
||||||
toPage: "/subcontract/work/videocenter/play",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "秦淮河2号监控",
|
|
||||||
gridImg: "",
|
|
||||||
color: "#0D516B",
|
|
||||||
subcolor: "",
|
|
||||||
disable: false,
|
|
||||||
toPage: "/subcontract/mine/event/index",
|
|
||||||
},
|
|
||||||
// {
|
|
||||||
// name: "秦淮河3号监控",
|
|
||||||
// gridImg: "",
|
|
||||||
// color: "#6B480D",
|
|
||||||
// subcolor: "",
|
|
||||||
// disable: false,
|
|
||||||
// toPage: "/subcontract/mine/event/index",
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// name: "秦淮河4号监控",
|
|
||||||
// gridImg: "",
|
|
||||||
// color: "#154F06",
|
|
||||||
// subcolor: "#C5A071",
|
|
||||||
// disable: false,
|
|
||||||
// toPage: "/subcontract/mine/event/index",
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// name: "秦淮河5号监控",
|
|
||||||
// gridImg: "",
|
|
||||||
// color: "#0D516B",
|
|
||||||
// subcolor: "#6E89B1",
|
|
||||||
// disable: false,
|
|
||||||
// toPage: "/subcontract/mine/event/index",
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// name: "秦淮河6号监控",
|
|
||||||
// gridImg: "",
|
|
||||||
// color: "#6B0D0D",
|
|
||||||
// subcolor: "",
|
|
||||||
// disable: false,
|
|
||||||
// toPage: "/subcontract/mine/event/index",
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// name: "秦淮河7号监控",
|
|
||||||
// gridImg: "",
|
|
||||||
// color: "#025629",
|
|
||||||
// subcolor: "",
|
|
||||||
// disable: false,
|
|
||||||
// toPage: "/subcontract/mine/event/index",
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// name: "秦淮河8号监控",
|
|
||||||
// gridImg: "",
|
|
||||||
// color: "#0D306B",
|
|
||||||
// subcolor: "",
|
|
||||||
// disable: false,
|
|
||||||
// toPage: "/subcontract/mine/event/index",
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// name: "秦淮河6号监控",
|
|
||||||
// gridImg: "",
|
|
||||||
// color: "#6B0D0D",
|
|
||||||
// subcolor: "",
|
|
||||||
// disable: false,
|
|
||||||
// toPage: "/subcontract/mine/event/index",
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// name: "秦淮河7号监控",
|
|
||||||
// gridImg: "",
|
|
||||||
// color: "#025629",
|
|
||||||
// subcolor: "",
|
|
||||||
// disable: false,
|
|
||||||
// toPage: "/subcontract/mine/event/index",
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// name: "秦淮河8号监控",
|
|
||||||
// gridImg: "",
|
|
||||||
// color: "#0D306B",
|
|
||||||
// subcolor: "",
|
|
||||||
// disable: false,
|
|
||||||
// toPage: "/subcontract/mine/event/index",
|
|
||||||
// },
|
|
||||||
],
|
|
||||||
};
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
onClickItem(e) {
|
|
||||||
if (this.current != e.currentIndex) {
|
|
||||||
this.current = e.currentIndex;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
goPath(item) {
|
|
||||||
this.$tab.navigateTo(item.toPage);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
console.log("当前页面",this.$route.path);
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.page {
|
|
||||||
background-color: #f6f7f8;
|
|
||||||
|
|
||||||
.view-segmented {
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
background-color: #f6f7f8;
|
|
||||||
position: fixed;
|
|
||||||
top: calc(var(--status-bar-height) + 44px);
|
|
||||||
z-index: 99;
|
|
||||||
padding-top: 30rpx;
|
|
||||||
padding-bottom: 30rpx;
|
|
||||||
.segmented-controls {
|
|
||||||
width: 688rpx;
|
|
||||||
font-size: 32rpx;
|
|
||||||
font-family: PingFang SC;
|
|
||||||
font-weight: bold;
|
|
||||||
|
|
||||||
/deep/.segmented-control--button {
|
|
||||||
/deep/.segmented-control__item--button {
|
|
||||||
/deep/.segmented-control__text {
|
|
||||||
color: #34373b;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.main-content {
|
|
||||||
position: relative;
|
|
||||||
margin-top: calc(var(--status-bar-height) + 84px);
|
|
||||||
margin-left: 33rpx;
|
|
||||||
margin-right: 33rpx;
|
|
||||||
|
|
||||||
.work-center {
|
|
||||||
position: absolute;
|
|
||||||
top: 10rpx;
|
|
||||||
width: 100%;
|
|
||||||
box-sizing: border-box;
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
padding-bottom: 140rpx;
|
|
||||||
|
|
||||||
& > view {
|
|
||||||
width: 48%;
|
|
||||||
height: 290rpx;
|
|
||||||
margin-bottom: 22rpx;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
.grid-img {
|
|
||||||
width: 100%;
|
|
||||||
height: 80%;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
.videoMain {
|
|
||||||
width: 100%;
|
|
||||||
height: 80%;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.grid-img-play {
|
|
||||||
width: 100%;
|
|
||||||
height: 80%;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
z-index: 1;
|
|
||||||
image {
|
|
||||||
width: 81rpx;
|
|
||||||
height: 81rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.grid-name {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0rpx;
|
|
||||||
text-align: center;
|
|
||||||
width: 100%;
|
|
||||||
font-size: 32rpx;
|
|
||||||
font-family: PingFang SC;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #292f38;
|
|
||||||
}
|
|
||||||
.grid-img-play {
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
& > view:nth-child(odd) {
|
|
||||||
margin-right: 4%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,62 +0,0 @@
|
|||||||
<!--
|
|
||||||
* @Author: 张涛
|
|
||||||
* @Date: 2023-11-07 13:43:46
|
|
||||||
* @LastEditors: 张涛
|
|
||||||
* @LastEditTime: 2023-11-07 13:58:16
|
|
||||||
* @FilePath: \JiangNingUmale-App\subcontract\work\videocenter\play.vue
|
|
||||||
-->
|
|
||||||
<template>
|
|
||||||
<view class="uni-flex-item">
|
|
||||||
<video
|
|
||||||
class="video"
|
|
||||||
ref="video"
|
|
||||||
id="video"
|
|
||||||
:src="src"
|
|
||||||
:autoplay="autoplay"
|
|
||||||
@play="playVideo()"
|
|
||||||
@fullscreenchange="screenchange"
|
|
||||||
></video>
|
|
||||||
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="uts">
|
|
||||||
export default {
|
|
||||||
onReady() {
|
|
||||||
this.videoContext = uni.createVideoContext('video', this);
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
videoContext: null,
|
|
||||||
// 属性
|
|
||||||
src: "http://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20181126-lite.m4v",
|
|
||||||
_src: "http://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni-app-video-courses.mp4",
|
|
||||||
autoplay: true,
|
|
||||||
poster: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni-android.png",
|
|
||||||
_poster: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni-ios.png",
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
statechange(e) {
|
|
||||||
console.log('live-player code:', e.detail.code)
|
|
||||||
},
|
|
||||||
error(e) {
|
|
||||||
console.error('live-player error:', e.detail.errMsg)
|
|
||||||
},
|
|
||||||
playVideo() {
|
|
||||||
uni.createVideoContext('video', this).requestFullScreen();
|
|
||||||
screen.orientation.lock('landscape');
|
|
||||||
},
|
|
||||||
screenchange() {
|
|
||||||
screen.orientation.lock('landscape');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.video {
|
|
||||||
width: 750rpx;
|
|
||||||
height: 400rpx;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
Loading…
Reference in new issue