SH-Arbitrate/Arbitrate-FrontendH5
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

H5视频代码

Browse Source
This commit is contained in:
fz
2023-11-10 18:57:18 +08:00
parent 8452da4adc
commit d7f5ce05ea
267 changed files with 27851 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/home.vue
+437
View File
@@ -0,0 +1,437 @@
<template>
<div class="page">
<div class="pcHome" v-if="viewFlag">
<div class="imgBg"></div>
<div class="enterRoom">
<div class="title">智慧仲裁多人会议</div>
<div class="enterRoomBtn">
<el-form :model="roomidForm" :rules="rules" ref="ruleForm" v-if="roomViewFlag">
<el-form-item prop="roomId">
<el-input placeholder="请输入房间号" v-model="roomidForm.roomId">
<template slot="append">
<el-button type="primary" icon="el-icon-circle-plus-outline"
@click="addRoom">新建会议</el-button>
</template>
</el-input>
</el-form-item>
</el-form>
</div>
<div class="enterRoomBtn">
<el-form :model="roomidForm1" :rules="rules1" ref="ruleForm1">
<el-form-item prop="roomId1">
<el-input placeholder="请输入房间号" v-model="roomidForm1.roomId1">
<template slot="append"><el-button type="primary" icon="el-icon-circle-plus-outline"
@click="enterRoom">进入房间</el-button></template>
</el-input>
</el-form-item>
</el-form>
</div>
</div>
<div class="enterRoom" v-if="roomViewFlag">
<div class="title">预约会议</div>
<div style="color: red;margin-bottom: 15px;">注意：预约会议起始时间间隔至少20分钟</div>
<el-button class="btn" style="margin-bottom: 20px;" type="primary" icon="el-icon-circle-plus-outline"
@click="reservation">预约会议</el-button>
<el-form :model="roomidForm2" :rules="rules2" ref="ruleForm2">
<el-form-item prop="roomId2">
<el-input class="btn" v-if="clickFlag" v-model="roomidForm2.roomId2"
placeholder="请输入房间号"></el-input>
</el-form-item>
<el-form-item prop="timer">
<el-date-picker class="btn1" v-if="clickFlag" v-model="roomidForm2.timer" type="datetimerange"
range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
</el-date-picker>
</el-form-item>
</el-form>
<el-button class="btn" v-if="clickFlag" style="margin-top: 20px;" type="primary"
@click="submitRoom">确认创建</el-button>
</div>
<div class="reservationMeet" v-if="roomViewFlag">
<div class="title">预约会议列表</div>
<div class="meetTable">
<el-table :data="tableData" style="width: 100%" :header-cell-style="getRowClass">
<el-table-column prop="roomId" align="center" label="房间号">
</el-table-column>
<el-table-column prop="scheduleStartTime" align="center" :show-overflow-tooltip="true" label="预约时间">
</el-table-column>
<el-table-column label="操作" align="center" prop="caseStatusName">
<template slot-scope="scope">
<el-button size="mini" type="text" @click="clickRoom(scope.row)"
icon="el-icon-video-camera">入会</el-button>
</template>
</el-table-column>
</el-table>
</div>
</div>
</div>
<div class="phoneHome" v-if="!viewFlag">
<div class="enterRoomPhone">
<div class="title">智慧仲裁多人会议</div>
<el-form :model="roomidForm1" :rules="rules1" ref="ruleForm1">
<el-form-item prop="roomId1">
<el-input placeholder="请输入房间号" v-model="roomidForm1.roomId1">
<template slot="append"><el-button type="primary" icon="el-icon-circle-plus-outline"
@click="enterRoom">进入房间</el-button></template>
</el-input>
</el-form-item>
</el-form>
</div>
</div>
</div>
</template>
<script>
import moment from "moment";
import axios from 'axios'
export default {
name: "homeKit",
data() {
return {
tableData: [],
viewFlag: true,
roomidForm: {},
roomidForm1: {},
roomidForm2: {},
clickFlag: false,
roomViewFlag: false,
rules: {
roomId: [
{ required: true, message: '请输入房间号', trigger: 'blur' },
{ min: 6, max: 6, message: '长度在6个字符', trigger: 'blur' },
{ pattern: /^[0-9]+$/, message: '只能输入数字', trigger: 'blur' }
]
},
rules1: {
roomId1: [
{ required: true, message: '请输入房间号', trigger: 'blur' },
{ min: 6, max: 10, message: '长度在6-10个字符', trigger: 'blur' },
{ pattern: /^[0-9]+$/, message: '只能输入数字', trigger: 'blur' }
]
},
rules2: {
roomId2: [
{ required: true, message: '请输入房间号', trigger: 'blur' },
{ min: 6, max: 6, message: '长度在6-10个字符', trigger: 'blur' },
{ pattern: /^[0-9]+$/, message: '只能输入数字', trigger: 'blur' }
],
timer: [
{ required: true, message: '请输入起始时间', trigger: 'blur' },
]
},
userId: 1,
userName: '',
caseId: ""
};
},
created() {
var sUserAgent = navigator.userAgent.toLowerCase();
var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
var bIsMidp = sUserAgent.match(/midp/i) == "midp";
var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
var bIsAndroid = sUserAgent.match(/android/i) == "android";
var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
this.viewFlag = false;
} else {
this.viewFlag = true;
}
let caseId = this.$route.query.id;
this.caseId = caseId;
let userId = this.$route.query.userId;
let userName = this.$route.query.name;
if (caseId) {
this.userId = userId;
this.userName = userName;
this.roomViewFlag = true;
axios({
method: "get",
url: `https://api.xayunmei.com/zhongcaiapi/caseApplication/reserveConferenceList?caseId=${caseId}`,
}).then(res => {
// this.userName = res.data.data.userName;
console.log(res, "tabletabletabletabletabletabletabletabletabletabletabletabletabletable");
this.tableData = res.data.data;
})
}
},
methods: {
// 新建房间
addRoom() {
axios({
method: "post",
url: "https://api.xayunmei.com/zhongcaiapi/caseApplication/sendRoomNoMessage",
data: {
id: this.caseId,
roomNo: this.roomidForm.roomId
}
}).then(res => {
console.log(res);
// this.data = res.data /* 将拿到的值，赋值给data */
})
this.$refs["ruleForm"].validate((valid) => {
if (valid) {
this.$router.push({
name: 'Room',
query: {
roomId: this.roomidForm.roomId,
userId: this.userId,
userName: this.userName
}
})
}
});
},
// 获取用户名
async getuserName(params) {
await axios({
method: "get",
url: `https://api.xayunmei.com/zhongcaiapi/system/user/selectUserById?userId=${params}`,
}).then(res => {
this.userName = res.data.data.userName;
})
},
// 进入会议
async enterRoom() {
let roomAnduser = this.roomidForm1.roomId1;
let idArr = [roomAnduser.slice(0, 6), roomAnduser.slice(6)];
this.roomidForm1.roomId1 = this.roomidForm1.roomId1.substr(0, 6);
if (idArr[1]) {
await this.getuserName(idArr[1]);
}
this.$refs["ruleForm1"].validate((valid) => {
if (valid) {
this.$router.push({
name: 'Room',
query: {
roomId1: idArr[0],
userId: idArr[1] || this.userId,
userName: this.userName
}
})
}
});
},
// 预约会议
reservation() {
this.clickFlag = !this.clickFlag;
},
getRowClass() {
return 'background:rgb(55, 55, 53)'
},
// 预约会议进入按钮操作
clickRoom(row) {
axios({
method: "get",
url: `https://api.xayunmei.com/zhongcaiapi/system/user/selectUserById?userId=${this.$route.query.userId}`,
}).then(res => {
this.userName = res.data.data.userName;
this.$router.push({
name: 'Room',
query: {
roomId1: row.roomId,
userId: this.$route.query.userId,
userName: this.userName
}
})
})
},
// 确认创建预约
submitRoom() {
this.$refs["ruleForm2"].validate((valid) => {
if (valid) {
this.roomidForm2.timer[0] = moment(
this.roomidForm2.timer[0]
).format("YYYY-MM-DD HH:mm:ss");
this.roomidForm2.timer[1] = moment(
this.roomidForm2.timer[1]
).format("YYYY-MM-DD HH:mm:ss");
axios({
method: "post",
url: `https://api.xayunmei.com/zhongcaiapi/caseApplication/reservedConference`,
data: {
caseId: this.$route.query.id,
ownerId: this.userId,
roomId: this.roomidForm2.roomId2,
scheduleStartTime: this.roomidForm2.timer[0],
scheduleEndTime: this.roomidForm2.timer[1]
}
}).then(res => {
if (res.data.code == 200) {
this.$message({
message: '预约成功',
type: 'success'
});
axios({
method: "post",
url: "https://api.xayunmei.com/zhongcaiapi/caseApplication/sendRoomNoMessage",
data: {
id: this.caseId,
roomNo: this.roomidForm2.roomId2,
scheduleStartTime: this.roomidForm2.timer[0],
scheduleEndTime: this.roomidForm2.timer[1]
}
}).then(res => {
console.log(res);
// this.data = res.data /* 将拿到的值，赋值给data */
})
axios({
method: "get",
url: `https://api.xayunmei.com/zhongcaiapi/caseApplication/reserveConferenceList?caseId=${this.$route.query.id}`,
}).then(res => {
// this.userName = res.data.data.userName;
console.log(res, "tabletabletabletabletabletabletabletabletabletabletabletabletabletable");
this.tableData = res.data.data;
})
} else {
this.$message({
message: res.msg,
type: 'error'
});
}
})
}
});
}
},
};
</script>
<style lang="scss" scoped>
.pcHome {
width: 100%;
height: 100vh;
background-color: #1c1919;
display: flex;
justify-content: space-around;
align-items: center;
// background: no-repeat;
.imgBg {
width: 30%;
height: 50%;
background-color: rgb(55, 55, 53);
background-image: url("@/assets/zhongcai.jpg");
background-size: cover;
}
.reservationMeet {
width: 20%;
height: 50%;
background-color: rgb(58, 55, 55);
.title {
text-align: center;
background-image: -webkit-linear-gradient(left, rgb(54, 185, 218), #477bdc, rgb(50, 37, 198));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-family: fangsong;
font-weight: 600;
font-size: 30px;
line-height: 70px;
}
.meetTable {
width: 100%;
height: 80%;
}
}
.enterRoom {
width: 20%;
height: 50%;
background-color: rgb(58, 55, 55);
display: flex;
flex-direction: column;
flex-wrap: wrap;
// justify-content: center;
align-content: center;
justify-content: flex-start;
align-items: center;
.title {
background-image: -webkit-linear-gradient(left, rgb(54, 185, 218), #477bdc, rgb(50, 37, 198));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-family: fangsong;
font-weight: 600;
font-size: 30px;
line-height: 70px;
}
.btn {
width: 80%;
height: 60px;
}
.btn1 {
width: 80%;
// height: 60px;
}
.enterRoomBtn {
width: 80%;
height: 60px;
}
}
.reservation {
width: 20%;
height: 50%;
background-color: rgb(58, 55, 55);
display: flex;
flex-direction: column;
flex-wrap: wrap;
// justify-content: center;
align-content: center;
justify-content: flex-start;
}
}
::v-deep .el-input-group__append {
background-color: #409EFF !important;
color: #ffffff !important;
}
::v-deep .el-form-item__content {
display: flex;
flex-direction: column;
align-items: center;
}
::v-deep .el-form-item__error {
top: 90%;
left: 10%;
}
::v-deep .el-table {
background-color: rgb(58, 55, 55);
}
::v-deep .el-table tbody tr>td {
background-color: rgb(58, 55, 55);
color: #ffffff;
}
::v-deep .el-table tbody tr:hover>td {
background-color: #82827c !important;
}
.enterRoomPhone {
.title {
background-image: -webkit-linear-gradient(left, rgb(54, 185, 218), #477bdc, rgb(50, 37, 198));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-family: fangsong;
font-weight: 600;
font-size: 30px;
line-height: 70px;
margin-bottom: 30px;
}
}
</style>