<!--
|
* @Author: shuishen 1109946754@qq.com
|
* @Date: 2022-08-18 16:18:24
|
* @LastEditors: shuishen 1109946754@qq.com
|
* @LastEditTime: 2023-04-21 15:26:17
|
* @FilePath: \web\bigScreen\src\views\layout\index.vue
|
* @Description:
|
*
|
* Copyright (c) 2022 by shuishen 1109946754@qq.com, All Rights Reserved.
|
-->
|
<template>
|
<div class="wrapper">
|
<div class="logout-btn" @click="handleLogout">
|
<i class="el-icon-logout"></i>
|
<span>退出登录</span>
|
</div>
|
<map-box ref="modalForm" :curMap="curMap" @getsearchSKValList="getsearchSKValList($event)">
|
<!-- 主体内容区域 -->
|
<div slot="mainContent" class="main-content" id="MainContent">
|
<div class="main-header">
|
<div class="exam-choose">
|
<div>
|
<el-date-picker size="small" v-model="eldatepicker" type="date" placeholder="请选择要展示的日期时间"
|
@change="handleDateChange" format="yyyy-MM-dd" value-format="yyyy-MM-dd" />
|
</div>
|
<div class="exam-choose-box">
|
<el-select v-model="examValue" placeholder="请选择" @change="changeDate" clearable>
|
<el-option v-for="item in examOptions" :key="item.value" :label="item.label"
|
:value="item.value">
|
</el-option>
|
</el-select>
|
</div>
|
</div>
|
<div class="title">保安员考试大屏</div>
|
</div>
|
|
<div class="main-container" ref="myDiv" id="main-containers">
|
<!-- 地图区域 -->
|
<router-view ref="target-name"></router-view>
|
</div>
|
</div>
|
</map-box>
|
<!-- <div class="page-logout" @click="goOperationPlatform"></div> -->
|
<div class="page-search" v-if="!showBack">
|
<div class="ceshi" :style="dynamicStyle">
|
<div v-for="(item, index) in signInList" :key="index" class="demo">
|
<el-tooltip placement="right-start" popper-class="atooltip">
|
<div slot="content">
|
<div class="showdetails">
|
<div class="showdetails_in">
|
<img :src="item.avatar" />
|
<div class="info">
|
<div>
|
<p>
|
<span class="left">姓名：</span>
|
{{ item.realName }}
|
</p>
|
<p>
|
<span class="left">性别：</span>{{ item.sex == 1 ? '男' : '女' }}
|
</p>
|
<!-- <span class="id">{{ index }}</span> -->
|
</div>
|
|
<p>
|
<span class="left">准考证号：</span>{{ item.candidateNo }}
|
</p>
|
<p>
|
<span class="left">身份证号：</span>{{ item.cardId }}
|
</p>
|
<p>
|
<span class="left">状态：</span>{{ item.state }}
|
</p>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="demoin">
|
<img class="img" :src="item.avatar" />
|
<div class="info">
|
<p class="id">
|
{{ item.candidateNo }}
|
<img class="img" src="@/assets/images/Submit.png" v-show="item.state == '已签到'" />
|
<img class="img" src="@/assets/images/progress.png" v-show="item.state == '未签到'" />
|
</p>
|
<p class="name">{{ item.realName }}</p>
|
</div>
|
</div>
|
</el-tooltip>
|
</div>
|
</div>
|
|
</div>
|
|
<el-dialog title="考试动态" :visible.sync="dialogVisible" width="50%" top="1%" center :before-close="handleClose"
|
custom-class="exam-list-dialog" :modal-append-to-body="false">
|
<div class="table" :style="boxnamicStyle" v-loading="examLoading"
|
element-loading-background="rgba(0, 0, 0, 0.8)">
|
<div class="exam-search-box">
|
<div>
|
<span>姓名：</span>
|
<el-input v-model="examineeName" placeholder="请输入姓名" clearable></el-input>
|
</div>
|
<div>
|
<span>公司名称：</span>
|
<el-input v-model="examineeCompany" placeholder="请输入公司名称" clearable
|
:disabled="isCNDisabled"></el-input>
|
</div>
|
<div>
|
<el-button type="primary" icon="el-icon-search" class="exam-dialog-btn"
|
@click="searchExam">搜索</el-button>
|
<el-button type="primary" icon="el-icon-refresh" class="exam-dialog-btn"
|
@click="resetExam">重置</el-button>
|
</div>
|
</div>
|
<el-table :data="examListData" style="width: 100%" :header-cell-style="{ 'text-align': 'center' }"
|
:cell-style="{ 'text-align': 'center' }">
|
<el-table-column prop="index" label="序号"></el-table-column>
|
<el-table-column prop="securityName" label="姓名"></el-table-column>
|
<el-table-column prop="companyName" label="所属公司"></el-table-column>
|
<el-table-column prop="examTime" label="开始时间"></el-table-column>
|
<el-table-column prop="examEndTime" label="提交时间"></el-table-column>
|
<el-table-column prop="theoryGrade" label="理论成绩"></el-table-column>
|
<el-table-column prop="state" label="签到状态"></el-table-column>
|
</el-table>
|
</div>
|
</el-dialog>
|
|
<el-dialog title="监控视频" :visible.sync="monitorDialogVisible" width="50%" top="1%" center
|
:before-close="handleVideoClose" custom-class="monitor-player-dialog" :modal-append-to-body="false">
|
<div class="video-box">
|
<Video id="myVideo" class="自定义" controls autoplay="true" loop poster="../assets/img/E0531.jpg">
|
<!-- <source src="../../../public/videos/monitor-test.mp4" type="video/mp4"> -->
|
</Video>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import { getSignSituationList, getExamScoreList, getExamList, getLatestExam } from "@/api/home/index"
|
import { logout } from "@/api/user"
|
|
import { EventBus } from "@/utils/EventBus"
|
|
export default {
|
data () {
|
return {
|
signInList: [],
|
dialogVisible: false,
|
isShowSearchSKValBox: false,
|
fullscreen: false, //是否全屏
|
searchVal: "", //搜索值
|
modeActive: 0, //底部切换
|
showBack: false, //是否显示返回
|
examListData: [],
|
curMap: "矢量",
|
mapListShow: false,
|
currentClickName: "",
|
searchSKValList: [],
|
centermainheight: "",
|
examLoading: false,
|
examOptions: [],
|
examValue: '',
|
//选择日期
|
eldatepicker: '',
|
examineeName: '',
|
examineeCompany: '',
|
examDialogProp: {},
|
isCNDisabled: false,
|
monitorDialogVisible: false
|
}
|
},
|
watch: {
|
$route: {
|
handler (val) {
|
if (val.path == "/layout/home3") {
|
this.showBack = true
|
} else {
|
this.showBack = false
|
|
if (val.path == "/layout/home") {
|
this.modeActive = 0
|
} else {
|
this.modeActive = 1
|
}
|
}
|
},
|
|
immediate: true
|
},
|
|
"$store.getters.examId": {
|
handler: function (newVal, oldVal) {
|
// 签到列表
|
this.getSignSituationList()
|
}
|
},
|
|
"$store.getters.isShowVideoDialog": {
|
handler: function (newVal, oldVal) {
|
// 签到列表
|
this.monitorDialogVisible = newVal
|
console.log('$store.getters.isShowVideoDialog', this.monitorDialogVisible)
|
}
|
}
|
},
|
|
computed: {
|
currentMap () {
|
return item => {
|
return this.curMap == item.name
|
}
|
},
|
dynamicStyle () {
|
return {
|
height: this.centermainheight - 10 + "px"
|
}
|
},
|
boxnamicStyle () {
|
return {
|
height: this.centermainheight - 80 + "px"
|
}
|
}
|
},
|
|
created () {
|
if (this.$route.path == "/layout/home3") {
|
this.showBack = true
|
}
|
this.$EventBus.$on("setCurrentClickName", e => this.setCurrentClickName(e))
|
// 签到列表
|
this.getSignSituationList()
|
// 获取最近一次考试日期
|
this.getLatestExam()
|
},
|
|
mounted () {
|
this.centermainheight = this.$refs.myDiv.clientHeight
|
EventBus.$on("customEvent", this.handleCustomEvent)
|
},
|
|
methods: {
|
// 获取最近一次考试日期
|
getLatestExam () {
|
getLatestExam().then(res => {
|
console.log('获取最近一次考试日期getLatestExam', res.data.data.startTime.slice(0, 10))
|
const latestExamTime = res.data.data.startTime.slice(0, 10)
|
this.eldatepicker = latestExamTime
|
this.handleDateChange(latestExamTime, 'isInit')
|
})
|
},
|
|
// 选择考试
|
changeDate (value) {
|
this.$store.commit("SET_EXAMID", value)
|
// this.init()
|
},
|
|
// 选择日期
|
handleDateChange (value, isInit) {
|
this.getExamList(value, isInit)
|
},
|
|
// 考试列表
|
getExamList (examTime, isInit) {
|
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
|
})
|
})
|
// 首次获取数据使用最后一条，切换时间获取第一条
|
if (isInit == 'isInit') {
|
this.examValue = this.examOptions.length > 0 ? this.examOptions[this.examOptions.length - 1].value : ''
|
this.changeDate(this.examOptions.length > 0 ? this.examOptions[this.examOptions.length - 1].value : '')
|
} else {
|
this.examValue = this.examOptions[0] ? this.examOptions[0].value : ''
|
this.changeDate(this.examOptions[0] ? this.examOptions[0].value : '')
|
}
|
|
})
|
},
|
|
// 考试动态
|
getExamScoreList () {
|
getExamScoreList({ examId: this.$store.getters.examId, ...this.examDialogProp, securityName: this.examineeName, unitName: this.examineeCompany }).then(res => {
|
res.data.data.forEach((item, index) => {
|
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 : ''
|
item.index = index + 1
|
})
|
this.examListData = res.data.data
|
setTimeout(() => {
|
this.examLoading = false
|
}, 200)
|
})
|
},
|
|
// 签到列表
|
getSignSituationList () {
|
getSignSituationList({ examId: this.$store.getters.examId }).then(res => {
|
this.signInList = res.data.data
|
})
|
},
|
|
handleCustomEvent (data, type) {
|
this.dialogVisible = true
|
this.examLoading = true
|
|
let params = {}
|
if (type == '签到情况') {
|
params = {
|
state: data.name
|
}
|
this.isCNDisabled = false
|
this.examineeCompany = ''
|
} else {
|
params = {
|
state: data.type == '实到' ? '已签到' : '',
|
deptId: data.deptId
|
}
|
this.isCNDisabled = true
|
this.examineeCompany = data.companyName
|
}
|
|
this.examDialogProp = params
|
|
this.getExamScoreList()
|
},
|
provinceFn (id) {
|
let data = {
|
up_id: id
|
}
|
// return postRequest(url.getlowerlevelarea, data)
|
},
|
|
setCurrentClickName (name) {
|
this.currentClickName = name
|
},
|
|
onSearch () {
|
this.$refs.modalForm.searchSK(this.searchVal)
|
if (this.searchVal == "") {
|
this.isShowSearchSKValBox = false
|
} else {
|
this.isShowSearchSKValBox = true
|
}
|
},
|
|
onFocus () {
|
this.onSearch()
|
},
|
|
selectChange (val) {
|
this.$refs.cascaderHandle.dropDownVisible = false
|
},
|
|
changeFullscreen () {
|
if (this.fullscreen) {
|
this.exitFullScreen()
|
return
|
}
|
this.requestFullscreen()
|
},
|
modeChange (idx, path) {
|
if (this.modeActive == idx) return
|
this.modeActive = idx
|
this.$router.push({
|
path: "/layout/" + path
|
})
|
},
|
requestFullscreen () {
|
const docElm = document.documentElement
|
if (docElm.requestFullscreen) {
|
docElm.requestFullscreen()
|
} else if (docElm.msRequestFullscreen) {
|
docElm.msRequestFullscreen()
|
} else if (docElm.mozRequestFullScreen) {
|
docElm.mozRequestFullScreen()
|
} else if (docElm.webkitRequestFullScreen) {
|
docElm.webkitRequestFullScreen()
|
}
|
this.fullscreen = true
|
},
|
exitFullScreen () {
|
if (document.exitFullscreen) {
|
document.exitFullscreen()
|
} else if (document.msExitFullscreen) {
|
document.msExitFullscreen()
|
} else if (document.mozCancelFullScreen) {
|
document.mozCancelFullScreen()
|
} else if (document.webkitCancelFullScreen) {
|
document.webkitCancelFullScreen()
|
}
|
this.fullscreen = false
|
},
|
|
pageMapClick (item) {
|
if (this.curMap == item.name) return
|
this.curMap = item.name
|
},
|
|
goOperationPlatform () {
|
window.open("https://sk.hubeishuiyi.cn/business/#/overview/index")
|
},
|
|
handleCheckAllChange (val, item) {
|
item.checkedCities = val ? item.children.map(item => item.title) : []
|
item.isIndeterminate = false
|
|
// 选中
|
if (val == true) {
|
this.$refs.modalForm.addSiteAllLayer(item)
|
} else {
|
this.$refs.modalForm.removeSiteAllLayer(item)
|
}
|
},
|
|
handleCheckedCitiesChange (value, item) {
|
// 选中
|
if (value) {
|
this.$refs.modalForm.addSiteLayer(item)
|
} else {
|
this.$refs.modalForm.removeSiteLayer(item)
|
}
|
},
|
|
goToHome () {
|
this.$router.push({ path: "/layout/home" })
|
},
|
|
getsearchSKValList (list) {
|
this.searchSKValList = list
|
},
|
|
sKValItemClick (item) {
|
this.isShowSearchSKValBox = false
|
this.$refs.modalForm.sKValItemClick(item)
|
},
|
|
// 搜索考试
|
searchExam () {
|
this.getExamScoreList()
|
},
|
|
// 重置考试
|
resetExam () {
|
this.examineeName = ''
|
if (!this.isCNDisabled) {
|
this.examineeCompany = ''
|
}
|
this.getExamScoreList()
|
},
|
|
handleVideoClose () {
|
this.$store.commit("SET_ISSHOWVIDEODIALOG", false)
|
},
|
|
handleLogout () {
|
this.$confirm('确定要退出登录吗？', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
logout().then(() => {
|
this.$store.commit('SET_TOKEN', '')
|
this.$store.commit('SET_USER_INFO', {})
|
localStorage.removeItem('token')
|
localStorage.removeItem('userInfo')
|
this.$router.push({ path: '/login' })
|
}).catch(() => {
|
this.$store.commit('SET_TOKEN', '')
|
this.$store.commit('SET_USER_INFO', {})
|
localStorage.removeItem('token')
|
localStorage.removeItem('userInfo')
|
this.$router.push({ path: '/login' })
|
})
|
}).catch(() => {})
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.wrapper {
|
position: relative;
|
width: 100vw;
|
height: 100vh;
|
|
.logout-btn {
|
position: fixed;
|
top: 20px;
|
right: 20px;
|
z-index: 9999;
|
display: flex;
|
align-items: center;
|
gap: 8px;
|
padding: 10px 20px;
|
background: rgba(255, 255, 255, 0.15);
|
border: 1px solid rgba(255, 255, 255, 0.3);
|
border-radius: 25px;
|
color: #fff;
|
font-size: 14px;
|
cursor: pointer;
|
transition: all 0.3s ease;
|
|
&:hover {
|
background: rgba(255, 255, 255, 0.25);
|
border-color: rgba(255, 255, 255, 0.5);
|
transform: translateY(-2px);
|
}
|
|
&:active {
|
transform: translateY(0);
|
}
|
|
i {
|
font-size: 16px;
|
}
|
}
|
|
#MainContent {
|
position: absolute;
|
top: 0;
|
left: 0;
|
width: 100%;
|
height: 100%;
|
z-index: 98;
|
}
|
|
.main-content {
|
height: 1080px;
|
background: url(/bigScreen/images/header.png) no-repeat center / 100% 100%,
|
url(/bigScreen/images/pro-bg.png) no-repeat center / 100% 100%;
|
|
pointer-events: none;
|
|
.main-header {
|
position: absolute;
|
top: 0;
|
left: 0;
|
width: 100%;
|
height: 68px;
|
pointer-events: auto;
|
|
.exam-choose {
|
display: flex;
|
flex-direction: row;
|
width: 100%;
|
position: absolute;
|
left: 50px;
|
bottom: 2px;
|
|
&>div:first-child {
|
margin-right: 4px;
|
}
|
|
:deep(.el-date-editor.el-input,
|
.el-date-editor.el-input__inner) {
|
width: 140px;
|
}
|
|
:deep(.el-input--suffix .el-input__inner) {
|
padding-right: 20px;
|
background: $bg-color-jc-hover;
|
border: 0;
|
}
|
|
.exam-choose-box {
|
:deep(.el-input--suffix .el-input__inner) {
|
width: 246px;
|
}
|
}
|
|
:deep(.el-input__inner) {
|
height: 28px;
|
line-height: 28px;
|
}
|
|
:deep(.el-input__icon) {
|
line-height: 28px;
|
}
|
}
|
|
.title {
|
position: absolute;
|
top: 0;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
margin: auto;
|
width: 456px;
|
height: 68px;
|
margin-top: 8px;
|
font-size: 28px;
|
font-family: YouSheBiaoTiHei;
|
font-weight: 400;
|
color: #eff8fc;
|
line-height: 35px;
|
text-align: center;
|
letter-spacing: 8px;
|
font-weight: bolder;
|
background: linear-gradient(to bottom, #e2eaf0 0%, #aed1f1 100%);
|
-webkit-background-clip: text;
|
-webkit-text-fill-color: transparent;
|
}
|
}
|
|
.main-container {
|
position: absolute;
|
top: 68px;
|
left: 50px;
|
right: 50px;
|
bottom: 40px;
|
overflow: auto;
|
}
|
}
|
}
|
|
.ceshi {
|
width: calc(100vw - 760px);
|
z-index: 999;
|
display: flex;
|
flex-wrap: wrap;
|
/* 允许内容换行 */
|
justify-content: flex-start;
|
/* 项目会平均分布在行里 */
|
overflow: auto;
|
|
.demo {
|
flex: 0 0 calc(25% - 10px);
|
height: 70px;
|
background: #103056;
|
padding: 5px;
|
margin: 5px;
|
display: flex;
|
flex: 1;
|
min-width: 240px;
|
|
.demoin {
|
width: 100%;
|
display: flex;
|
|
.img {
|
width: 50px;
|
height: 60px;
|
}
|
|
.info {
|
font-size: 16px;
|
color: white;
|
margin-left: 10px;
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
|
.id {
|
display: flex;
|
}
|
|
.img {
|
width: 20px;
|
height: 20px;
|
margin-left: auto;
|
}
|
|
.name {
|
color: #5b9ccb;
|
margin-top: 10px;
|
}
|
}
|
}
|
}
|
}
|
|
.showdetails {
|
width: 340px;
|
height: 120px;
|
background: #03091c;
|
border: 1px solid #2d8ed5;
|
|
.showdetails_in {
|
display: flex;
|
padding: 10px;
|
|
img {
|
width: 80px;
|
height: 100px;
|
}
|
|
.info {
|
font-size: 14px;
|
color: white;
|
margin-left: 5px;
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
|
p {
|
line-height: 20px;
|
}
|
|
div {
|
position: relative;
|
|
.id {
|
position: absolute;
|
right: 0;
|
top: 0;
|
font-size: 30px;
|
font-weight: bold;
|
color: red;
|
}
|
}
|
|
.left {
|
color: #5b9ccb;
|
}
|
}
|
}
|
}
|
|
.el-dialog__header {
|
background: #002a52;
|
text-align: center;
|
}
|
|
.el-dialog__title {
|
color: aliceblue;
|
}
|
|
.el-dialog {
|
.table {
|
width: 100%;
|
}
|
}
|
</style>
|
<style>
|
.atooltip.el-tooltip__popper[x-placement^="right-start"] .popper__arrow {
|
display: none;
|
}
|
|
.atooltip {
|
background: #03091c !important;
|
padding: 0px;
|
top: 110px;
|
left: 770px;
|
}
|
|
.el-dialog__header {
|
text-align: center;
|
margin-top: 10px;
|
}
|
|
.el-dialog__title {
|
color: red;
|
font-size: 18px;
|
}
|
|
.main-container::-webkit-scrollbar {
|
display: none;
|
}
|
</style>
|
