bjquanjiang
/
pinganxiaoyuan
1
0
Rozštěpit 0
Zdrojový kód Úkoly 0 Požadavky na natažení 0 Vydání 0 Wiki Aktivita
Procházet zdrojové kódy

视频插件

master
wwp před 2 měsíci
rodič
3d6673b6b3
revize
b65aa1f419
15 změnil soubory, kde provedl 6384 přidání a 119 odebrání
Rozdělené zobrazení
Diff Options
Zobrazit statistiky Stáhněte soubor opravy Stáhněte rozdílový soubor
  1. +2
    -2
      monitorMobile/components/tki-tree/style.css
  2. +2
    -0
      monitorMobile/hybrid/html/ali.js
  3. +61
    -0
      monitorMobile/hybrid/html/artcvideo.html
  4. +71
    -0
      monitorMobile/hybrid/html/players.html
  5. +29
    -20
      monitorMobile/pages/earlyWarning/components/warningInfo.vue
  6. +1
    -1
      monitorMobile/pages/earlyWarning/detail.vue
  7. +30
    -1
      monitorMobile/pages/earlyWarning/index.vue
  8. +171
    -75
      monitorMobile/pages/monitor/index.vue
  9. +2
    -0
      monitorMobile/pages/monitor/static/aliVideo.js
  10. +5932
    -0
      monitorMobile/pages/monitor/static/aliplayercomponents-1.0.9.min.js
  11. binární
      monitorMobile/static/image/earlyWarning/back2.png
  12. +22
    -10
      monitorMobile/uni_modules/uni-datetime-picker/components/uni-datetime-picker/calendar-item.vue
  13. +54
    -9
      monitorMobile/uni_modules/uni-datetime-picker/components/uni-datetime-picker/calendar.vue
  14. +2
    -0
      monitorMobile/uni_modules/uni-datetime-picker/components/uni-datetime-picker/i18n/zh-Hans.json
  15. +5
    -1
      monitorMobile/uni_modules/uni-datetime-picker/components/uni-datetime-picker/time-picker.vue

+ 2
- 2
monitorMobile/components/tki-tree/style.css Zobrazit soubor

@@ -30,7 +30,7 @@
}
.tki-tree-bar {
background-color: #fff;
height: 72rpx;
height: 120rpx;
padding-left: 20rpx;
padding-right: 20rpx;
display: flex;
@@ -53,7 +53,7 @@
right: 0rpx;
bottom: 0rpx;
left: 0rpx;
top: 72rpx;
top: 120rpx;
background-color: #fff;
padding-top: 20rpx;
padding-right: 20rpx;


+ 2
- 0
monitorMobile/hybrid/html/ali.js
Diff nebyl zobrazen, protože je příliš veliký
Zobrazit soubor


+ 61
- 0
monitorMobile/hybrid/html/artcvideo.html Zobrazit soubor

@@ -0,0 +1,61 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://unpkg.com/aliyun-rts-sdk@1.2.1/dist/aliyun-rts-sdk.js"></script>
<style>
#video {
width: 100%;
height: 100%;
}
</style>
</head>

<body>
<video id="video" controls muted="false"></video>
</body>

</html>
<script>
// // var socket = io.connect('http://localhost:3000');
// var socket = io.connect('http://47.98.202.174');
// socket.emit('commit', { message: 'hello world' });
// socket.on('message', function (data) {
// console.log('client message', data);
// });
var aliRts = new AliRTS()
// aliRts.isSupport(supportInfo).then(re=> {
// // 可用
// }).catch(err=> {
// // 不可用
// console.log(`not support errorCode: ${err.errorCode}`);
// console.log(`not support message: ${err.message}`);
// });
const pullStreamUrl = 'artc://rts-pull-live.deepeleph.com/quanjiang_DEMO00001/SXT003-0?auth_key=1724921782-0-0-d7ac627dd65378c195ced9de16c63bc4&aliyun_uuid=edbaf313fe5a4102bfcf4951f38ebbf8';
const mediaEle = document.querySelector('video');
aliRts.on("onError", (err) => {
console.log(`errorCode: ${err.errorCode}`);
console.log(`message: ${err.message}`);
})

const PLAY_EVENT = {
CANPLAY: "canplay",
WAITING: "waiting",
PLAYING: "playing"
}

aliRts.on('onPlayEvent', (play) => {
console.log(">>play.event:" + play.event);
if (play.event === PLAY_EVENT.CANPLAY) {
// 拉流可以播放
} else if (play.event === PLAY_EVENT.WAITING) {
// 拉流卡顿等待缓冲中 （仅Chrome）
} else if (play.event === PLAY_EVENT.PLAYING) {
// 拉流卡顿结束恢复播放 （仅Chrome）
}
});
aliRts.startLiveStream(pullStreamUrl, mediaEle);

</script>

+ 71
- 0
monitorMobile/hybrid/html/players.html Zobrazit soubor

@@ -0,0 +1,71 @@
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
<title>Aliplayer Rts Demo</title>
<link rel="stylesheet"
href="https://g.alicdn.com/apsara-media-box/imp-web-player/2.16.3/skins/default/aliplayer-min.css" />
<script type="text/javascript" charset="utf-8"
src="./ali.js"></script>
</head>

<body>
<div class="prism-player" id="player-con"></div>
<script>

/**
* 播放器默认播放 source 提供的 rts 拉流地址，如果失败，则会自动降级至 rtsFallbackSource 提供的拉流地址（如 HLS 地址）。
* 可能的降级场景包括：
* 1. 浏览器不支持 RTS，直接降级
* 2. RTS 信令请求失败（拉流地址无效、https配置无效、RTS配置无效等），直接降级
* 3. RTS 起播超时或中途断流，按自定义策略重试失败后降级
**/

// 更多播放器配置请参考 https://player.alicdn.com/aliplayer/index.html
var options = {
"id": "player-con",
"source": "artc://rts-pull-live.deepeleph.com/quanjiang_DEMO00001/SXT003-0?auth_key=1724921782-0-0-d7ac627dd65378c195ced9de16c63bc4&aliyun_uuid=edbaf313fe5a4102bfcf4951f38ebbf8",
"rtsFallbackSource": "降级地址，如HLS",
"width": "100%",
"height": "400px",
"autoplay": true,
"isLive": true,
"playsinline": true,
"skipRtsSupportCheck": false, // 对于不在 https://help.aliyun.com/document_detail/397569.html 中的浏览器，可以传 true 跳过检查，强制使用 RTS（有风险，需要自测保证）

/**
* RTS 拉流超时会默认重试
* 以下两个参数用来控制降级之前的重试策略，比如 3000 毫秒超时，重试一次，如果再拉不到流就降级，那么总共等待 6000 毫秒降级
**/
// RTS 多久拉不到流会重试，默认 3000 ms
// rtsLoadDataTimeout: 2000,

// RTS 拉不到流重试的次数，默认 5，此参数建议设为 1，即重试 1 次后降级，可以减少降级等待时间
liveRetry: 1,
};

var player = new Aliplayer(options, function () {/* player ready */ });

// 降级时会触发此事件
player.on('rtsFallback', function (event) {
console.log('[EVENT]rtsFallback', event.paramData);
// event.paramData.reason 降级的原因
// event.paramData.fallbackUrl 降级到的地址
})

player.on('error', function (event) {
console.log('[EVENT]error', event.paramData);
})

// 当RTS拉流成功时触发，通过订阅该事件，可以获取到RTS TraceId
player.on('rtsTraceId', function (data) {
console.log('[EVENT]rtsTraceId', data.paramData);
// event.paramData.traceId 拉流的TraceId
// event.paramData.source 当前RTS流的播放地址
})
</script>
</body>

+ 29
- 20
monitorMobile/pages/earlyWarning/components/warningInfo.vue Zobrazit soubor

@@ -28,7 +28,7 @@
<text class="labels">筛选</text>
<view class="values">周界入侵，未处理，2024-8-24 18:06:12 - 2024-8-24 18:06:12</view>
</view>
<view class="arrow">
<image v-show="isShowSearch==false" src="@/static/image/earlyWarning/arrow1.png" mode="">
</image>
@@ -368,18 +368,18 @@
box-sizing: border-box;
background: #fff;
font-size: 28rpx;
.searchLabels {
display: flex;
align-items: center;
width: calc(100% - 34rpx);
image {
width: 40rpx;
height: 40rpx;
flex-shrink: 1;
}
.labels {
width: 70rpx;
display: block;
@@ -387,7 +387,7 @@
margin-left: 10rpx;
flex-shrink: 1;
}
.values {
width: calc(100% - 40rpx - 50rpx);
color: #2388FF;
@@ -401,29 +401,29 @@
-webkit-line-clamp: 1;
}
}
.arrow {
// text-align: right;
// flex-shrink: 1;
image {
width: 34rpx;
height: 34rpx;
}
}
.leftSearchBox {
display: flex;
align-items: center;
width: calc(100% - 40px);
.searchLabel {
flex-shrink: 1;
color: #333333;
width: 80px;
}
.searchValue {
width: calc(100% - 60px);
margin-left: 10px;
@@ -446,6 +446,7 @@
height: calc(100vh - 375rpx - 60rpx);
font-size: 26rpx;
background: rgba(0, 0, 0, 0.2);

.content {
background: #FFFFFF;
padding: 15px;
@@ -493,7 +494,7 @@
width: 50%;
height: 74rpx;
line-height: 74rpx;
border: 1px solid #BABABA;
border: 1px solid #ccc;
border-radius: 12rpx;
color: #333333;
text-align: center;
@@ -517,7 +518,7 @@

.tableBox {
height: 100%;
padding: 10px;
padding: 30rpx;
box-sizing: border-box;
// height: 600px;
padding-bottom: 30px;
@@ -525,10 +526,11 @@

.liBox {
background: #fff;
padding: 0 26rpx;
padding: 0 30rpx;
box-sizing: border-box;
border-radius: 20rpx;
margin-bottom: 10px;
margin-bottom: 30rpx;
font-family: 'PingFang SC';

.headerCard {
display: flex;
@@ -539,6 +541,7 @@
.schoolName {
font-size: 32rpx;
font-weight: 700;
font-family: 'PingFang SC';
color: #333333;
overflow: hidden;
word-wrap: break-word;
@@ -553,11 +556,11 @@
width: 100rpx;
flex-shrink: 1;
text-align: center;
height: 50rpx;
line-height: 50rpx;
font-size: 26rpx;
font-size: 24rpx;
border-radius: 8rpx;
color: #fff;
padding: 8rpx 12rpx;
font-family: 'PingFang SC';
}

.handle {
@@ -578,6 +581,8 @@
padding: 20rpx 0;

.pic {
width: 120rpx;
height: 120rpx;

image {
width: 120rpx;
@@ -588,13 +593,14 @@

.rightCard {
margin-left: 20rpx;
font-size: 28rpx;
font-size: 26rpx;
font-family: 'PingFang SC';
width: calc(100% - 140rpx);
}
}

.midCard {
font-size: 28rpx;
font-size: 26rpx;

.secondCard,
.thirdCard {
@@ -604,6 +610,7 @@

.txt {
font-size: 26rpx;
font-family: 'PingFang SC';
margin-left: 10rpx;
color: #333333;
}
@@ -622,12 +629,14 @@
justify-content: space-between;
align-items: center;
font-size: 26rpx;
font-family: 'PingFang SC';

.rightBox {
.txt {
width: 120rpx;
height: 60rpx;
line-height: 60rpx;
font-family: 'PingFang SC';
text-align: center;
background: #2388FF;
color: #fff;


+ 1
- 1
monitorMobile/pages/earlyWarning/detail.vue Zobrazit soubor

@@ -3,7 +3,7 @@
<view class="title cli">
周界入侵-2024-08-20 18:01:41
</view>
<image style="width: 100%;" src="../../static/image/add.png" mode="widthFix"></image>
<image style="width: 100%;height:176rpx;" src="../../static/image/add.png" mode="aspectFit"></image>
<view class="cli">
<view class="labelBox">
所属学校：


+ 30
- 1
monitorMobile/pages/earlyWarning/index.vue Zobrazit soubor

@@ -7,7 +7,12 @@
</view> -->

<view class="logo">
<!-- #ifdef H5 -->
<image src="@/static/image/earlyWarning/logo.png" mode="heightFix"></image>
<!-- #endif -->
<!-- #ifdef APP-PLUS || MP-ALIPAY || MP-WEIXIN -->

<!-- #endif -->
</view>
<!-- <view class="selectModel" @click="showSelectModel = true">
<view class="modelName">
@@ -100,9 +105,15 @@
height: 100%;

.headerBox {
/*#ifdef H5*/
height: 272rpx;
background: url("@/static/image/earlyWarning/back2.png") no-repeat center center / cover;
/*#endif*/
/*#ifdef APP-PLUS || MP-ALIPAY || MP-WEIXIN*/
height: 340rpx;
background: url("@/static/image/earlyWarning/back.png") no-repeat center center / cover;

/*#endif*/
position: relative;

image {
@@ -112,18 +123,36 @@
}

.logo {


image {
height: 46rpx;
}



image {
height: 46rpx;
}

position: absolute;
left: 36rpx;
/*#ifdef H5*/
top: 50rpx;
/*#endif*/
/*#ifdef APP-PLUS || MP-ALIPAY || MP-WEIXIN*/
top: 110rpx;
/*#endif*/
}
}

.contentBox {
/*#ifdef H5*/
height: calc(100% - 303rpx);
/*#endif*/
/*#ifdef APP-PLUS || MP-ALIPAY || MP-WEIXIN*/
height: calc(100% - 375rpx);
/*#endif*/
}
}
</style>

+ 171
- 75
monitorMobile/pages/monitor/index.vue Zobrazit soubor

@@ -1,5 +1,15 @@
<template>
<view class="inspectionCenter">
<view @touchmove.stop@touch.stop class="inspectionCenter">
<!-- <web-view v-if="showVideo" :webview-styles="styles" src="/hybrid/html/players.html"></web-view> -->
<view v-show="showVideo" class="poupBox">
<view class="contentBox">
<!-- <web-view :webview-styles="styles" src="/hybrid/html/players.html"></web-view> -->
<view id="url-player-test"></view>
</view>
<view class="bottom-content" @click="closeDialog">

</view>
</view>
<view class="searchBox">
<view class="searchLine" @click="showTree">
<!-- <view class="searchShow"> -->
@@ -120,7 +130,7 @@
所属学校：演示学校
</view>
</view>
<view class="rightBox btoBox" @click="deleteClick">
<view class="rightBox btoBox" @click="deleteClick(item)">
<view class="txt">
播放
</view>
@@ -131,36 +141,38 @@
<u-loadmore :status="status" />
</u-list>
</view>
<u-modal :show="showDelete" :title="deleteTitle" :showCancelButton="true" @confirm="confirmDelete"
@cancel="cancelDelete">

<!-- <web-view :webview-styles="styles" src="/hybrid/html/players.html"></web-view> -->
<!-- <u-modal :show="showVideo" :title="videoTitle" :closeOnClickOverlay="false" :showCancelButton="true"
@confirm="confirmVideo" @cancel="cancelVideo">
<view class="slot-content">
<text style="text-align: center;">是否确定删除该预警吗?</text>
<cover-view style="width: 100%;height:500px">

</cover-view>

</view>
</u-modal>
<selectSearch ref="selectSearchBox" :cellVisible="false" :value.sync="searchForm.alarmType"
:options="[{value:1,label:'qinshi1'},{value:2,label:'qinshi2'}]" title="预警类型" search-place-holder="预警类型" />
<selectRadio ref="selectRadioBox" :cellVisible="false" :value.sync="searchForm.warnHand"
:options="[{value:1,label:'loudong1'},{value:2,label:'loudong2'}]" title="楼栋" />
</u-modal> -->
<tki-tree ref="tkitree" :selectParent="selectParent" :multiple="multiple" :range="treelist" :foldAll="flod"
rangeKey="name" @confirm="treeConfirm" @cancel="treeCancel"></tki-tree>
</view>
</template>

<script>
import selectRadio from "@/components/selectRadio.vue"
import selectSearch from "@/components/selectSearch.vue"
import tkiTree from '@/components/tki-tree/tki-tree.vue';
export default {
components: {
selectRadio,
selectSearch,
tkiTree
},
data() {
return {
showDelete: false,
deleteTitle: '提示',
deleteContent: '是否确定删除该预警吗?',
styles: {
width: '100%',
height: '100%',
zIndex: '999999999999999999999999999'
// bottom: '56px'
},
showVideo: false,
videoTitle: '',
isShowSearch: false,
searchForm: {
alarmType: '警告类型',
@@ -234,21 +246,18 @@
name: '你好'
}
],
treelist: [
{
treelist: [{
name: '111',
value: '1',
children: [{
name: '111',
value:'1',
children: [
{
name: '111',
value:'2',
}
]
}
],
value: '2',
}]
}],
multiple: false, //是否多选
selectParent: true, //父级可选择
flod: false, //折叠
player: null
}
},
watch: {
@@ -262,28 +271,84 @@

},
},
filters: {
// statusChange(val) {
// switch (val) {
// case 'todo':
// return '我的待办'
// break;
// case 'send':
// return '由我发起'
// break;
// case 'done':
// return '我的已办'
// break;
// default:

// }
// },
mounted() {

},
onLoad() {
// 隐藏导航栏
this.loadmore()
},
methods: {
setVideo() {
this.loadWebPlayerSDK().then(() => {
// 如果需要使用自定义组件，打开以下注释
// this.loadComponent().then(() => {
this.player = new Aliplayer({
id: "url-player-test",
source: "artc://rts-pull-live.deepeleph.com/quanjiang_DEMO00001/SXT003-0?auth_key=1724987674-0-0-df36ae3670785249c50e05cdb93e28ea&aliyun_uuid=286f58e41cc04c0393434b6856f29d07",
width: "100%",
height: "100%",
isLive: true,
rtsFallback: true,
rtsFallbackType: 'HLS',
}, function(player) {
player.mute()
});

this.player.one('canplay', function() {
// console.log('canplay', this.player.tag);
this.player.tag.play();
});



// }).catch((e) => { console.log("加载组件失败", e) })
}).catch((e) => {
console.log("加载播放器SDK失败", e);
});
},
closeDialog() {
this.player.dispose();
this.showVideo = false;
},
loadWebPlayerSDK() {
return new Promise((resolve, reject) => {
const s_tag = document.createElement('script'); // 引入播放器js
s_tag.type = 'text/javascript';
s_tag.src = 'https://g.alicdn.com/apsara-media-box/imp-web-player/2.25.1/aliplayer-min.js'

// s_tag.src = 'https://g.alicdn.com/apsara-media-box/imp-web-player/2.20.3/aliplayer-min.js';
s_tag.charset = 'utf-8';
s_tag.onload = () => {
resolve();
}
document.body.appendChild(s_tag);
const l_tag = document.createElement('link'); // 引入播放器css
l_tag.rel = 'stylesheet';
l_tag.href =
'https://g.alicdn.com/apsara-media-box/imp-web-player/2.25.1/skins/default/aliplayer-min.css'
// 'https://g.alicdn.com/apsara-media-box/imp-web-player/2.20.3/skins/default/aliplayer-min.css';
document.body.appendChild(l_tag);
});
},
loadComponent() {
return new Promise((resolve, reject) => {
const s_tag = document.createElement('script');
s_tag.type = 'text/javascript';
// 需要先下载组件 js 文件，放到项目 /static/ 目录下
// 下载地址：https://github.com/aliyunvideo/AliyunPlayer_Web/blob/master/customComponents/dist/aliplayer-components/aliplayercomponents-1.0.9.min.js
s_tag.src = './static/aliplayercomponents-1.0.9.min.js';
s_tag.charset = 'utf-8';
s_tag.onload = () => {
resolve();
}
document.body.appendChild(s_tag);
});
},




addAttribute(data) { // tree结构递归添加属性
for (var i = 0; i < data.length; i++) {
data[i].isShow = false
@@ -307,14 +372,16 @@
showTree() {
this.$refs.tkitree._show();
},
cancelDelete() {
this.showDelete = false;
cancelVideo() {
console.log(11111)
this.showVideo = false;
},
deleteClick() {
this.showDelete = true;
this.showVideo = true;
this.setVideo()
},
confirmDelete() {
this.showDelete = false;
confirmVideo() {
this.showVideo = false;
},
// 跳转处理页面
toHandle(row) {
@@ -369,21 +436,54 @@
</script>

<style lang="scss" scoped>
.container {
padding: 20px;
font-size: 14px;
height: 800px;
}



// .contentBox {
// height: calc(100% - 375rpx);
.inspectionCenter {
width: 100%;
height: 100%;
position: relative;

.u-modal__title {
color: #000000;
}

.poupBox {
height: 100vh;
position: absolute;
left: 0;
top: 0;
width: 100%;
z-index: 100000000000000;
// background: red;
background: rgba(0, 0, 0, 0.2);

.contentBox {
// z-index: 1000000;
width: 100%;
height: 500rpx;
// margin: 50rpx auto;
}

.bottom-content {
height: calc(100% - 500rpx);
}
}
}

.searchBox {
// height: calc(100% - 360rpx);
position: relative;



.searchLine {
height: 88rpx;
display: flex;
@@ -543,28 +643,27 @@

.tableBox {
height: 100%;
padding: 10px;
padding: 0 30rpx;
box-sizing: border-box;
// height: 600px;
padding-bottom: 30px;


.liBox {
background: #fff;
padding: 20px 15px;
padding: 24rpx 30rpx;
box-sizing: border-box;
border-radius: 20px;
margin-bottom: 10px;
border-radius: 20rpx;
margin-top: 30rpx;

.topCard {
display: flex;
align-items: center;

.pic {
position: relative;
width: 268rpx;
height: 201rpx;

image {
width: 300rpx;
height: 220rpx;
width: 268rpx;
height: 201rpx;
border-radius: 4px;
}

@@ -578,12 +677,12 @@
box-sizing: border-box;
font-size: 20rpx;
border-radius: 4rpx;
font-family: 'PingFang SC';
}
}

.rightCard {
margin-left: 20rpx;
margin-top: 15rpx;

.firstCard {
display: flex;
@@ -593,6 +692,7 @@

.schoolName {
font-size: 32rpx;
font-family: 'PingFang SC';
font-weight: 700;
color: #333333;
overflow: hidden;
@@ -609,28 +709,21 @@
.thirdCard {
display: flex;
align-items: center;
margin-top: 18rpx;
margin-top: 16rpx;

.txt {
font-size: 26rpx;
font-family: 'PingFang SC';
color: #333333;
}
}
}
}

.midCard {
font-size: 28rpx;

.midContent {
margin-top: 18rpx;
}
}

.btoCard {
border-top: 1px solid rgba(0, 0, 0, 0.1);
margin-top: 30rpx;
padding: 18px 0 0 0;
margin-top: 24rpx;
padding: 24rpx 0 0 0;
display: flex;
justify-content: space-between;
align-items: center;
@@ -641,17 +734,20 @@
justify-content: center;
align-items: center;
position: relative;
font-size: 26rpx;
color: #333;
font-family: 'PingFang SC';

image {
width: 40rpx;
height: 40rpx;
width: 36rpx;
height: 36rpx;
margin-right: 15rpx;
}
}

.rightBox {
width: 180rpx;
height: 74rpx;
width: 120rpx;
height: 60rpx;
background: #2388FF;
color: #fff;
border-radius: 80rpx;


+ 2
- 0
monitorMobile/pages/monitor/static/aliVideo.js
Diff nebyl zobrazen, protože je příliš veliký
Zobrazit soubor


+ 5932
- 0
monitorMobile/pages/monitor/static/aliplayercomponents-1.0.9.min.js
Diff nebyl zobrazen, protože je příliš veliký
Zobrazit soubor


binární
monitorMobile/static/image/earlyWarning/back2.png Zobrazit soubor

Před Za
Šířka: 750  |  Výška: 272  |  Velikost: 169 KiB

+ 22
- 10
monitorMobile/uni_modules/uni-datetime-picker/components/uni-datetime-picker/calendar-item.vue Zobrazit soubor

@@ -14,7 +14,12 @@
'uni-calendar-item--disable':weeks.disable,
}">
<text v-if="selected && weeks.extraInfo" class="uni-calendar-item__weeks-box-circle"></text>
<text class="uni-calendar-item__weeks-box-text uni-calendar-item__weeks-box-text-disable uni-calendar-item--checked-text">{{weeks.date}}</text>
<text v-if="!weeks.multiple || weeks.beforeMultiple || weeks.afterMultiple" class="uni-calendar-item__weeks-box-text uni-calendar-item__weeks-box-text-disable uni-calendar-item--checked-text">{{weeks.date}}</text>
<text v-if="weeks.multiple && !weeks.beforeMultiple && !weeks.afterMultiple " style="font-weight: 700;color: #2388FF;" class="uni-calendar-item__weeks-box-text-disable uni-calendar-item--checked-text">{{weeks.date}}</text>
<!-- <text v-if="weeks.multiple && !weeks.beforeMultiple && !weeks.afterMultiple && !selected" style="color: red;" class="uni-calendar-item__weeks-box-text-disable uni-calendar-item--checked-text">{{weeks.date}}</text> -->
<text></text>
<text v-if="weeks.beforeMultiple" style="color: #FFF;text-align: center;font-size: 18rpx;font-style: normal;font-weight: 400;line-height: normal;">开始</text>
<text v-if="weeks.afterMultiple" style="color: #FFF;text-align: center;font-size: 18rpx;font-style: normal;font-weight: 400;line-height: normal;">结束</text>
</view>
<view :class="{'uni-calendar-item--today': weeks.isToday}"></view>
</view>
@@ -85,10 +90,12 @@
display: flex;
/* #endif */
flex-direction: column;
justify-content: center;
// justify-content: center;
align-items: center;
width: 40px;
height: 40px;
padding: 5px;
box-sizing: border-box;
/* #ifdef H5 */
cursor: pointer;
/* #endif */
@@ -131,9 +138,10 @@

.uni-calendar-item__weeks-box .uni-calendar-item--checked {
background-color: $uni-primary;
border-radius: 50%;
// border-radius: 50%;
box-sizing: border-box;
border: 3px solid #fff;
// border: 3px solid #fff;
border-radius: 4px;
}

.uni-calendar-item--checked .uni-calendar-item--checked-text {
@@ -152,9 +160,10 @@
.uni-calendar-item--multiple .uni-calendar-item--before-checked,
.uni-calendar-item--multiple .uni-calendar-item--after-checked {
background-color: $uni-primary;
border-radius: 50%;
// border-radius: 50%;
box-sizing: border-box;
border: 3px solid #F6F7FC;
// border: 3px solid #F6F7FC;
border-radius: 4px;
}

.uni-calendar-item--before-checked .uni-calendar-item--checked-text,
@@ -163,15 +172,18 @@
}

.uni-calendar-item--before-checked-x {
border-top-left-radius: 50px;
border-bottom-left-radius: 50px;
// border-top-left-radius: 50px;
// border-bottom-left-radius: 50px;
border-bottom-left-radius: 4px;
box-sizing: border-box;
background-color: #F6F7FC;
// color: #2388FF;
}

.uni-calendar-item--after-checked-x {
border-top-right-radius: 50px;
border-bottom-right-radius: 50px;
// border-top-right-radius: 50px;
// border-bottom-right-radius: 50px;
border-bottom-right-radius: 4px;
background-color: #F6F7FC;
}
</style>

+ 54
- 9
monitorMobile/uni_modules/uni-datetime-picker/components/uni-datetime-picker/calendar.vue Zobrazit soubor

@@ -6,6 +6,9 @@

<view v-if="insert || show" class="uni-calendar__content"
:class="{'uni-calendar--fixed':!insert,'uni-calendar--ani-show':aniMaskShow, 'uni-calendar__content-mobile': aniMaskShow}">
<!-- <view style="height: 66px;line-height: 66px;text-align: center;font-size: 17px;">
时间段选择
</view> -->
<view class="uni-calendar__header" :class="{'uni-calendar__header-mobile' :!insert}">

<view class="uni-calendar__header-btn-box" @click.stop="changeMonth('pre')">
@@ -58,8 +61,8 @@

<view class="uni-calendar__weeks" v-for="(item,weekIndex) in weeks" :key="weekIndex">
<view class="uni-calendar__weeks-item" v-for="(weeks,weeksIndex) in item" :key="weeksIndex">
<calendar-item class="uni-calendar-item--hook" :weeks="weeks" :calendar="calendar" :selected="selected"
:checkHover="range" @change="choiceDate" @handleMouse="handleMouse">
<calendar-item class="uni-calendar-item--hook" :weeks="weeks" :calendar="calendar"
:selected="selected" :checkHover="range" @change="choiceDate" @handleMouse="handleMouse">
</calendar-item>
</view>
</view>
@@ -72,8 +75,51 @@
:disabled="!tempSingleDate" :border="false" :hide-second="hideSecond" class="time-picker-style">
</time-picker>
</view>
<!-- 日期 -->
<view v-if="!insert && range && hasTime" class="uni-date-changed uni-calendar--fixed-top">
<view class="uni-date-changed--time-start">
<view style="color: #777;">
当前选择日期：
</view>
<view class="uni-date-changed--time-date">{{tempRange.before ? tempRange.before : startDateText}}
</view>
<view style="line-height: 50px;color: #777;margin-right: 10rpx;">
-
</view>
<view class="uni-date-changed--time-date">{{tempRange.after ? tempRange.after : endDateText}}</view>
<!-- <time-picker type="time" :start="timepickerStartTime" v-model="timeRange.startTime" :border="false"
:hide-second="hideSecond" :disabled="!tempRange.before" class="time-picker-style">
</time-picker> -->
</view>

<view class="uni-date-changed--time-end">

<!-- <time-picker type="time" :end="timepickerEndTime" v-model="timeRange.endTime" :border="false"
:hide-second="hideSecond" :disabled="!tempRange.after" class="time-picker-style">
</time-picker> -->
</view>
</view>
<!-- uni-calendar--fixed-top -->
<view v-if="!insert && range && hasTime" class="uni-date-changed uni-calendar--fixed-top">
<view class="uni-date-changed--time-start" style="width:40%;">
<!-- <view class="uni-date-changed--time-date">{{tempRange.before ? tempRange.before : startDateText}}
</view> -->
<time-picker type="time" :start="timepickerStartTime" rangeName="开始时间" v-model="timeRange.startTime" :border="false"
:hide-second="hideSecond" :disabled="!tempRange.before" class="time-picker-style">
</time-picker>
</view>
<view style="line-height: 50px;color: #777;">
-
</view>
<view class="uni-date-changed--time-end" style="width:40%;">
<!-- <view class="uni-date-changed--time-date">{{tempRange.after ? tempRange.after : endDateText}}</view> -->
<time-picker type="time" :end="timepickerEndTime" rangeName="结束时间" v-model="timeRange.endTime" :border="false"
:hide-second="hideSecond" :disabled="!tempRange.after" class="time-picker-style">
</time-picker>
</view>
</view>

<!-- <view v-if="!insert && range && hasTime" class="uni-date-changed uni-calendar--fixed-top">
<view class="uni-date-changed--time-start">
<view class="uni-date-changed--time-date">{{tempRange.before ? tempRange.before : startDateText}}
</view>
@@ -81,8 +127,8 @@
:hide-second="hideSecond" :disabled="!tempRange.before" class="time-picker-style">
</time-picker>
</view>
<view style="line-height: 50px;">
<uni-icons type="arrowthinright" color="#999"></uni-icons>
<view style="line-height: 50px;color: #777;">
-
</view>
<view class="uni-date-changed--time-end">
<view class="uni-date-changed--time-date">{{tempRange.after ? tempRange.after : endDateText}}</view>
@@ -90,8 +136,7 @@
:hide-second="hideSecond" :disabled="!tempRange.after" class="time-picker-style">
</time-picker>
</view>
</view>

</view> -->
<view v-if="!insert" class="uni-date-changed uni-date-btn--ok">
<view class="uni-datetime-picker--btn" @click="confirm">{{confirmText}}</view>
</view>
@@ -714,7 +759,7 @@
display: flex;
/* #endif */
flex-direction: row;
justify-content: space-between;
// justify-content: space-between;
border-top-color: rgba(0, 0, 0, 0.4);
border-top-style: solid;
border-top-width: 1px;
@@ -853,7 +898,7 @@
// line-height: 50px;
text-align: center;
color: #333;
border-top-color: #DCDCDC;
border-top-color: rgba(0, 0, 0, 0.04);
;
border-top-style: solid;
border-top-width: 1px;
@@ -944,4 +989,4 @@
}

/* #endif */
</style>
</style>

+ 2
- 0
monitorMobile/uni_modules/uni-datetime-picker/components/uni-datetime-picker/i18n/zh-Hans.json Zobrazit soubor

@@ -1,6 +1,8 @@
{
"uni-datetime-picker.selectDate": "选择日期",
"uni-datetime-picker.selectTime": "选择时间",
"uni-datetime-picker.startTime": "选择时间",
"uni-datetime-picker.endTime": "结束时间",
"uni-datetime-picker.selectDateTime": "选择日期时间",
"uni-datetime-picker.startDate": "开始日期",
"uni-datetime-picker.endDate": "结束日期",


+ 5
- 1
monitorMobile/uni_modules/uni-datetime-picker/components/uni-datetime-picker/time-picker.vue Zobrazit soubor

@@ -6,7 +6,7 @@
:class="{'uni-datetime-picker-disabled': disabled, 'uni-datetime-picker-timebox': border}">
<text class="uni-datetime-picker-text">{{time}}</text>
<view v-if="!time" class="uni-datetime-picker-time">
<text class="uni-datetime-picker-text">{{selectTimeText}}</text>
<text class="uni-datetime-picker-text">{{rangeName}}</text>
</view>
</view>
</slot>
@@ -184,6 +184,10 @@
hideSecond: {
type: [Boolean, String],
default: false
},
rangeName: {
type: String,
default: '选择时间'
}
},
watch: {


Zapsat Náhled
Načítá se…
Zrušit
Uložit