<!--
|
* @Author: shuishen 1109946754@qq.com
|
* @Date: 2022-08-18 16:18:17
|
* @LastEditors: shuishen 1109946754@qq.com
|
* @LastEditTime: 2023-04-27 18:07:37
|
* @FilePath: \web\bigScreen\src\views\home\index.vue
|
* @Description: 小区-栋-层-房屋
|
*
|
* Copyright (c) 2022 by shuishen 1109946754@qq.com, All Rights Reserved.
|
-->
|
|
<template>
|
<div class="pageContainer">
|
<div class="left-container">
|
<div class="one">
|
<div class="title-box">
|
<div class="title">考试须知</div>
|
</div>
|
<div class="content-box all-text-box" style>
|
<div class="all-text common-text">
|
<!-- <p>考试内容涵盖了保安工作的基本法律法规、职责和任务、紧急情况处理等方面的知识。考试形式为选择题和简答题。考生需要在规定的时间内完成考试，并按照要求填写答题卡。</p>
|
<p>考试时长：90分钟，监考人：张三</p>yesnotshow -->
|
<div class="text-content" v-html="examInstructions"></div>
|
</div>
|
</div>
|
</div>
|
|
<div class="two">
|
<div class="title-box">
|
<div class="title">考试动态</div>
|
</div>
|
<div class="content-box chart-box">
|
<div class="yesnotshow">
|
<p class="title">
|
理论成绩:
|
<el-radio v-model="achievement" label="1">显示</el-radio>
|
<el-radio v-model="achievement" label="2">隐藏</el-radio>
|
</p>
|
</div>
|
<div class="scroll-table">
|
<div class="scroll-table-head flex">
|
<div>序号</div>
|
<div>姓名</div>
|
<div>开始时间</div>
|
<div>提交时间</div>
|
<div v-show="achievement == '1'">理论成绩</div>
|
</div>
|
<div class="newtablestyle" ref="myDiv">
|
<vue-seamless-scroll :class-option="classOption" :data="examListData" class="scroll-table-body"
|
:style="dynamicStyle">
|
<ul class="item">
|
<li class="scroll-item flex" v-for="(item, index) in examListData" :key="index">
|
<div class>{{ index + 1 }}</div>
|
<div class>{{ item.securityName }}</div>
|
<div class>{{ item.examTime }}</div>
|
<div class="flex justify-center">
|
<span>{{ item.examEndTime }}</span>
|
</div>
|
<div v-show="achievement == '1'">{{ item.theoryGrade }}</div>
|
</li>
|
</ul>
|
</vue-seamless-scroll>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
</div>
|
<div class="right-container">
|
<div class="one">
|
<div class="title-box">
|
<div class="title">签到情况</div>
|
</div>
|
<div class="content-box">
|
<reservoir-count-bar ref="ReservoirCountBar" @childEvent="handleChildData"></reservoir-count-bar>
|
</div>
|
</div>
|
|
<div class="two">
|
<div class="title-box">
|
<div class="title">实时监控数据</div>
|
</div>
|
<div class="content-box">
|
<div class="pickerright">
|
</div>
|
<reservoir-size-bar ref="ReservoirSizeBar" @childEvent_zhu="handleChildData"></reservoir-size-bar>
|
</div>
|
</div>
|
|
<div class="three">
|
<div class="title-box">
|
<div class="title">监控视频</div>
|
</div>
|
<div class="content-box flex" @click="openVideoPlayer">
|
<img src="https://edu.cnr.cn/pdtj/yw/201406/W020140608306255627507.jpg" class="monitor" />
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import reservoirCountBar from "./components/reservoirCountBar.vue"
|
import reservoirSizeBar from "./components/reservoirSizeBar.vue"
|
import vueSeamlessScroll from "vue-seamless-scroll"
|
import { getExamList, getDpDetail, getSignSituationPie, getSignSituationBar, getExamScoreList, getLatestExam } from "@/api/home/index"
|
import { EventBus } from "@/utils/EventBus"
|
import Video from 'video.js'
|
import 'video.js/dist/video-js.css'
|
export default {
|
components: {
|
vueSeamlessScroll,
|
reservoirCountBar,
|
reservoirSizeBar
|
},
|
|
data () {
|
return {
|
achievement: "2",
|
examListData: [],
|
classOption: {
|
step: 0.2,
|
limitMoveNum: 4
|
},
|
centermainheight: "",
|
examInstructions: '',
|
}
|
},
|
|
created () {
|
// 考试须知
|
this.getDpDetail()
|
},
|
|
computed: {
|
dynamicStyle () {
|
var minheight =
|
this.centermainheight - 10 < 470 ? 470 : this.centermainheight - 10
|
return {
|
height: minheight + "px"
|
}
|
}
|
},
|
|
mounted () {
|
this.centermainheight = this.$refs.myDiv.clientHeight
|
},
|
|
methods: {
|
// 获取页面数据
|
init () {
|
// 签到情况
|
this.getSignSituationPie()
|
// 实时监控数据
|
this.getSignSituationBar()
|
// 考试动态
|
this.getExamScoreList()
|
},
|
|
// 实时监控数据
|
getSignSituationBar () {
|
getSignSituationBar({ examId: this.$store.getters.examId }).then(res => {
|
// console.log('实时监控数据getSignSituationBar', res.data.data)
|
this.$nextTick(() => {
|
if (this.examValue == '') {
|
res.data.data = []
|
}
|
this.$refs.ReservoirSizeBar.createBarChart(res.data.data)
|
})
|
})
|
},
|
|
// 签到情况
|
getSignSituationPie () {
|
getSignSituationPie({ examId: this.$store.getters.examId }).then(res => {
|
// console.log('签到情况getSignSituationPie', res.data.data)
|
this.$nextTick(() => {
|
if (this.examValue == '') {
|
res.data.data = []
|
}
|
this.$refs.ReservoirCountBar.createBarChart(res.data.data)
|
})
|
})
|
},
|
|
// 考试列表
|
getExamList (examTime) {
|
getExamList({ examTime }).then(res => {
|
// console.log('考试列表getExamList', res.data.data)
|
this.examOptions = []
|
res.data.data.forEach(item => {
|
this.examOptions.push({
|
value: item.id,
|
label: item.examName
|
})
|
})
|
// 获取考试列表后默认选中第一条数据
|
this.examValue = this.examOptions[0] ? this.examOptions[0].value : ''
|
this.changeDate(this.examOptions[0] ? this.examOptions[0].value : '')
|
})
|
},
|
|
// 考试须知
|
getDpDetail () {
|
getDpDetail().then(res => {
|
// console.log('考试须知getDpDetail', res.data.data.content)
|
this.examInstructions = this.replaceWrongHtml(res.data.data.content)
|
})
|
},
|
|
// 考试动态
|
getExamScoreList () {
|
getExamScoreList({ examId: this.$store.getters.examId }).then(res => {
|
// console.log('考试动态getExamScoreList', res.data.data)
|
res.data.data.forEach(item => {
|
item.examTime = item.examTime ? item.examTime.slice(11, 16) : ''
|
item.examEndTime = item.examEndTime ? item.examEndTime.slice(11, 16) : ''
|
item.theoryGrade = item.theoryGrade != -1 ? item.theoryGrade : ''
|
})
|
this.examListData = res.data.data
|
})
|
},
|
|
handleChildData (data, type) {
|
EventBus.$emit("customEvent", data.data, type)
|
},
|
|
// 富文本替换spanyes
|
replaceWrongHtml (content) {
|
const rightContent = content.replaceAll("<spanyes';", "<span style=\"")
|
.replaceAll("</spanyes([^>]*)>", "</span>")
|
.replaceAll("=\"\"", "")
|
return rightContent
|
},
|
|
// 点击播放视频
|
openVideoPlayer () {
|
// this.$store.commit("SET_ISSHOWVIDEODIALOG", true)
|
},
|
},
|
|
watch: {
|
"$store.getters.examId": {
|
handler: function (newVal, oldVal) {
|
this.init()
|
}
|
}
|
}
|
}
|
</script>
|
|
<style >
|
.pickerright {
|
text-align: right;
|
margin: 10px 10px 0px 10px;
|
|
.el-input__suffix {
|
display: none;
|
}
|
|
.el-input--suffix .el-input__inner {
|
padding: 0px 0px 0px 30px;
|
}
|
|
.el-date-editor.el-input {
|
width: 110px;
|
}
|
}
|
|
.monitor {
|
width: 100%;
|
}
|
|
.center-container {
|
width: calc(100% - 650px);
|
height: 700px;
|
margin: 0 auto;
|
box-sizing: border-box;
|
flex-wrap: wrap;
|
background: #030816;
|
display: flex;
|
overflow: auto;
|
position: relative;
|
z-index: 50;
|
|
.demo {
|
width: 130px;
|
height: 70px;
|
background: #103056;
|
padding: 5px;
|
margin: 5px;
|
display: flex;
|
|
.img {
|
width: 50px;
|
height: 60px;
|
}
|
|
.info {
|
font-size: 16px;
|
color: white;
|
margin-left: 10px;
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
font-weight: bold;
|
|
.name {
|
color: #5b9ccb;
|
margin-top: 10px;
|
}
|
}
|
}
|
}
|
|
.left-container {
|
.two {
|
.content-box {
|
display: flex;
|
flex-direction: column;
|
|
.scroll-table {
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
|
.newtablestyle {
|
flex: 1;
|
}
|
}
|
}
|
}
|
}
|
|
.yesnotshow {
|
.title {
|
font-size: 14px;
|
text-align: right;
|
|
.el-radio {
|
margin-right: 5px;
|
|
.el-radio__label {
|
padding: 0px;
|
}
|
}
|
}
|
}
|
</style>
|
