You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
bocai_supplyChain_pc/src/components/screen/largeScreen.vue

817 lines
30 KiB
Vue

2 years ago
<template>
<div class="mmtt111">
<!-- <span @click="aa1" style="font-size:36px;color:#fff;position:relative;cursor: pointer;">1111</span> -->
<div v-if="!isShow">
<a-form :selfUpdate="true" :form="formScreen" class="formDiv" @submit="handleSubmit">
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="口令">
<a-input type="password" id='inputId' v-focus="true" ref="id" v-decorator="['passowrd',{ rules: [{ required: true, message: '' }] }]" onfocus="this.removeAttribute('readonly');" onblur="this.setAttribute('readonly',true);" :readonly="true" autocomplete="new-password" autoComplete="new-password" placeholder="请输入口令" />
</a-form-item>
<a-form-item :label-col="formTailLayout.labelCol" :wrapper-col="formTailLayout.wrapperCol">
<a-button type="primary" html-type="submit">
确定
</a-button>
</a-form-item>
</a-form>
</div>
<div v-else>
<!-- <div> -->
<div class="static" v-if="!imgCarouselShow">
<div class="s_left">
<h4 class="f24 cf s_title fwb">交付中心实时数据
<!-- <span @click="aa1">1111</span> <span @click="aa2">2222</span> -->
<div class="f14 pr">
<!-- <span>昨日18:15-当日18:15</span> -->
<!-- <span class="right-h5">延误 {{delayNum.delay18}} 逾期 {{delayNum.delay36}}</span> -->
</div>
</h4>
<div class="tth" style="margin-top:48px;position:relative;">
<div style="display:table-row;font-weight:500">
<div class="ttd tc1 fwb" style="">排名</div>
<div class="ttd tc2 fwb" style="">姓名</div>
<!-- <div class="ttd tc7" style=""></div> -->
<!-- @click="ani" -->
<div class="ttd tc3 fwb" style="">简历数</div>
<!-- <div class="ttd">已处理</div> -->
<!-- <div class="ttd">约面数</div> -->
<div class="ttd tc4 fwb" style=""><span @click="playAudio1"></span><span @click="playAudio2"></span></div>
<!-- @click="playAudio1" -->
<!-- <div class="ttd" @click="playAudio2"></div> -->
<div class="ttd tc5 fwb" style="" @click="playAudio3"> </div>
<!-- @click="aaa" -->
<div class="ttd tc6 fwb">转化率丨漏斗</div>
<!-- @click="aaa" -->
</div>
</div>
<a-carousel effect="scrollx" ref="welcome" autoplay :autoplaySpeed="autoSpeed" :speed="1000" :pauseOnHover="false">
<div v-for="(item1, index1) in array" v-bind:key="index1">
<div v-for="(item, index) in item1" v-bind:key="index">
<div class="tth" style="margin-top:48px;position:relative;margin-top: 0 !important;">
<div style="display:table-row;font-weight:500">
<div class="ttd tc1" style="">{{index1 * pageSize + index + 1}}</div>
<div class="ttd tc2" :class="showUserName_curr == item.userName ?'numeAni' : ''" style="">{{item.aliasName}}</div>
<!-- <div class="ttd tc7"></div> -->
<div class="ttd tc3">{{item.resumeNum}}</div>
<div class="ttd tc4" style="">{{item.signUps}} | {{item.arrived}} | {{item.passed}}</span></div>
<div class="ttd tc5" style="">{{item.entry}}</span>
<!-- /{{parseFloat(item.entryMonthNum).toFixed(1).replace(/(.0)$/,'')}} -->
</div>
2 years ago
<div class="ttd tc6">
2 years ago
{{item.transferRatio}}<span style="display: inline-block;">{{item.funnel}}</span></div>
</div>
</div>
</div>
</div>
</a-carousel>
<!-- </div> -->
<!-- <div class="f14 cf tl" style="margin-left: 146px;margin-top: 10px;">
昨天 18:30 - 今天 18:30 招聘数据
</div> -->
</div>
<div class="clb"></div>
<div class=" fullPage" v-if="ifani">
<div class="bgppp">
</div>
<div class="animate__animated animate__zoomInDown animate_h animate__infinite animate__zoomOutUp">
2 years ago
<!-- {{showUserName}} -->
2 years ago
墨竹/王泽流
<!-- 12 -->
</div>
</div>
</div>
<!-- <div class="imgPlay" @click="hideImg" v-if="imgCarouselShow">
<a-carousel autoplay effect="fade" :autoplaySpeed="5000" :speed="1000" :dots="false" :pauseOnHover="false">
<div class="tcImg" v-for="(image, index) in slideImages">
<div class="pr">
<h3 class="imgText" v-text="image.aliasName">1</h3>
<img :src="image.url" class="mw100" alt="" />
</div>
</div>
</a-carousel>
</div> -->
</div>
</div>
</template>
<script>
import { axios, doAsyncHttpRequest } from '@/utils/request';
2 years ago
import { isNotEmptyCheck, timeagoOfDateStr } from '@/utils/commonUtil';
import {
screen
2 years ago
} from "../../api/screen";
// import { serverAddress, numFormat3 } from '@/utils/global';
// import store from '@/store';
const formItemLayout = {
labelCol: { span: 6 },
wrapperCol: { span: 16 },
};
const formTailLayout = {
labelCol: { span: 6 },
wrapperCol: { span: 8, offset: 6 },
};
2 years ago
var timeClear;
2 years ago
var timer //定时器
var flag = false;
var timeStamp = 0;
var tempJson = { "classify": 0, "message": [] }
export default {
directives: {
focus: {
inserted: function(el, { value }) {
console.log(el, { value })
if (value) {
el.focus();
}
}
}
},
data() {
return {
recordTodayList: [],
delayNum: { delay18: 0, delay36: 0 },
formLayout: 'horizontal',
formScreen: this.$form.createForm(this),
isShow: true,
formItemLayout,
formTailLayout,
passowrd: '',
// audioUrl1: 'http://matripeweb.oss-cn-hangzhou.aliyuncs.com/antd/money.wav', //声音文件
// audioUrl2: 'http://matripeweb.oss-cn-hangzhou.aliyuncs.com/antd/mario.wav', //声音文件
// audioUrl3: 'http://matripeweb.oss-cn-hangzhou.aliyuncs.com/antd/huanhu.wav', //声音文件
//websocket参数===================start
// wsUri: 'ws://127.0.0.1:9004/webSocket/' + this.$route.query.id,
// wsUri: 'ws://127.0.0.1:9004/webSocket/',
isWebSocket: false, //判断是否链接成功!
reconnect: 0,
ifani: false,
showUserName: '',
showUserName_curr: '专员B',
nameArray: [],
daomianStyle: '',
tongguoStyle: '',
ruzhiStyle: '',
array: [],
isAuto: true,
autoSpeed: 10000,
pageSize: 10,
// pageSize: 5,
imgCarouselShow: false,
// [{"allotNum":1,"disposeNum":0,"entryMonthNum":15,"entryNum":0,"funnelRate7":"2.03","interviewNum":0,"interviewPassNum":0,"interviewPassPercent":"3.23","interviewedNum":1,"showScreen":0,"userId":236530,"userName":"百合/刘月霞"}
//websocket参数===================end
//所有店铺信息
storeImages: [],
//轮播的店铺图片
slideImages: [],
slideImgNum: 10,
}
},
mounted() {
var that = this;
// document.getElementById('inputId').focus();
// this.$refs.id.focus();
2 years ago
// document.querySelector('html').setAttribute('style', 'background-image: url(http://matripeweb.oss-cn-hangzhou.aliyuncs.com/antd/screen_bg.png);background-size: 100% 100%;min-height:100vh;');
// // overflow:hidden;
// document.querySelector('body').setAttribute('style', 'background: none');
// that.initWebSocket();
// that.initClock();
// if (that.isShow) {
// setInterval(() => that.websocketHeartCheck(), 60000); //每隔1分钟刷新一次
// }
2 years ago
that.getData()
2 years ago
2 years ago
timer = setInterval(() => that.getData(), 60000*5); //每隔5分钟刷新一次
2 years ago
},
2 years ago
destroyed() {
// this.websock.close() //离开路由之后断开websocket连接
},
beforeDestroy() { //在组件生命周期结束的时候销毁。
2 years ago
var that = this;
if(timer){
clearInterval(timer);
2 years ago
}
document.querySelector('html').removeAttribute('style', '')
document.querySelector('body').removeAttribute('style', '')
},
2 years ago
methods: {
async getData(){
var that = this;
try {
const data = await screen();
console.log(data);
if (data.status === 200) {
that.array = [];
// this.array = data.data.data.list
for (var i = 0; i < data.data.data.list.length; i += that.pageSize) {
this.array.push(data.data.data.list.slice(i, i + that.pageSize));
}
} else {
console.log(1);
}
} catch (error) {
console.log(error);
this.$message.warning(error.message);
}
},
2 years ago
showTargetResume(item) {
/*if(item.targetResume - item.monthEntryNum <= 0) {
return "(★)";
}
return "" + new Number(item.targetResume - item.monthEntryNum).toFixed(1) + "";*/
return "" + item.monthEntryNum + "/" + item.targetResume + "";
},
ani() { //点击专员
var that = this;
console.log(that.nameArray);
return new Promise((resolve, reject) => {
// alert(that.showUserName);
if (that.showUserName != '' && flag) {
this.ifani = true;
that.playAudio3();
setTimeout(function() {
that.ifani = false;
flag = false;
resolve();
}, 15000)
}
})
},
func() {
var that = this;
// console.log(that.nameArray);
// console.log("==================");
//1.到面 2.通过 3.入职
clearTimeout(timeClear);
if (this.nameArray[0].type == '1') {
that.showUserName_curr = this.nameArray[0].name
that.daomianStyle = this.nameArray[0].name;
that.playAudio1();
let pageInt = parseInt(this.nameArray[0].indexA / that.pageSize)
console.log("到面===" + pageInt);
setTimeout(function() {
that.autoSpeed = 10000;
that.$refs.welcome.goTo(pageInt, true);
}, 0);
setTimeout(function() {
that.showUserName_curr = '';
that.daomianStyle = '';
// console.log(JSON.stringify(that.nameArray));
that.nameArray.shift();
if (that.nameArray.length > 0) {
that.func();
that.imgCarouselShow = false;
} else {
// that.imgCarouselShow = false;
// that.showPictures(90000);
that.autoSpeed = 10000;
}
}, 10000)
} else if (this.nameArray[0].type == '2') {
that.showUserName_curr = this.nameArray[0].name
that.tongguoStyle = this.nameArray[0].name;
that.playAudio2();
let pageInt = parseInt(this.nameArray[0].indexA / that.pageSize)
console.log("通过===" + pageInt);
console.log("序列===" + this.nameArray[0].indexA);
console.log("↑↑↑↑↑↑↑");
// that.$refs.welcome.goTo(pageInt, true)
setTimeout(function() {
that.autoSpeed = 10000;
that.$refs.welcome.goTo(pageInt, true)
}, 0);
setTimeout(function() {
that.showUserName_curr = '';
that.tongguoStyle = '';
// console.log(JSON.stringify(that.nameArray));
that.nameArray.shift();
if (that.nameArray.length > 0) {
that.func();
that.imgCarouselShow = false;
} else {
// debugger;
// that.showPictures(90000);
that.autoSpeed = 10000;
}
}, 10000)
} else if (this.nameArray[0].type == '3') {
that.showUserName = this.nameArray[0].name;
that.showUserName_curr = this.nameArray[0].name
that.ruzhiStyle = this.nameArray[0].name;
// if (that.showUserName != '') {
// that.playAudio3();
// that.ani();
let pageInt = parseInt(this.nameArray[0].indexA / that.pageSize)
console.log("入职===" + pageInt);
// that.$refs.welcome.goTo(pageInt, true)
setTimeout(function() {
that.autoSpeed = 30000;
that.$refs.welcome.goTo(pageInt, true)
}, 0);
flag = true;
// }
console.log("00=====================")
that.ani().then(() => {
setTimeout(function() {
flag = false;
console.log("11111=====================")
that.nameArray.shift();
that.showUserName_curr = '';
// that.showUserName = '';
that.ruzhiStyle = '';
// console.log(JSON.stringify(that.nameArray));
if (that.nameArray.length > 0) {
console.log("=====================")
console.log(new Date());
setTimeout(function() {
that.func();
}, 15000)
that.imgCarouselShow = false;
} else {
// debugger;
console.log("33333=====================")
// that.showPictures(90000);
that.autoSpeed = 10000;
}
}, 10000)
})
}
// }
},
aa1() {
var that = this;
console.log(tempJson)
var tempList = tempJson.message;
that.recordTodayList = JSON.parse(JSON.stringify(tempList));
tempJson.message[7].entryNum = tempJson.message[7].entryNum + 1;
tempJson.message[8].entryNum = tempJson.message[8].entryNum + 1;
tempJson.message[8].interviewPassNum = tempJson.message[8].interviewPassNum + 1;
console.log(that.recordTodayList);
console.log(tempList);
// debugger;
if (timeStamp == 0 || new Date().getTime() - timeStamp >= 180 ) {
console.log("ssssssssssssss");
timeStamp = new Date().getTime();
if (tempJson.classify == 0) {
// var tempList = JSON.parse(e.data);
if (that.recordTodayList != null && that.recordTodayList.length > 0) {
//到面
that.recordTodayList.forEach(item1 => {
tempList.forEach((item2, index) => {
if (item1.userId == item2.userId && item1.interviewedNum != item2.interviewedNum) {
this.nameArray.push({ type: '1', name: item1.userName, daomianStyle: item1.userName, indexA: index });
}
});
});
//面试通过
that.recordTodayList.forEach(item1 => {
tempList.forEach((item2, index) => {
if (item1.userId == item2.userId && item1.interviewPassNum != item2.interviewPassNum) {
this.nameArray.push({ type: '2', name: item1.userName, tongguoStyle: item1.userName, indexA: index });
}
});
});
//入职
that.recordTodayList.forEach(item1 => {
tempList.forEach((item2, index) => {
if (item1.userId == item2.userId && item1.entryNum != item2.entryNum) {
this.nameArray.push({ type: '3', name: item1.userName, ruzhiStyle: item1.userName, indexA: index });
}
});
});
console.log(this.nameArray);
if (this.nameArray.length >= 1) {
this.func();
that.imgCarouselShow = false;
}
}
}
} else if (tempJson.classify == 1) {
that.delayNum = tempJson.message;
}
},
websocketonmessage(e) { //数据接收
// const redata = JSON.parse(e.data);
var that = this;
console.log("接收消息", e.data)
console.log(new Date());
// 180000
if (isNotEmptyCheck(e.data) && (timeStamp == 0 || new Date().getTime() - timeStamp >= 180000 )) {
timeStamp = new Date().getTime();
var tempJson = JSON.parse(e.data);
if (tempJson.classify == 1) {
var tempList = tempJson.message.cols.concat(tempJson.message.pmls);
that.array = [];
for (var i = 0; i < tempList.length; i += that.pageSize) {
this.array.push(tempList.slice(i, i + that.pageSize));
2 years ago
}
for (var i = 0; i < this.array.length; i ++) {
i.disposeNum = 100
2 years ago
}
// console.log(that.recordTodayList);
// console.log(tempList);
// console.log(that.recordTodayList == tempList);
if (that.recordTodayList != null && that.recordTodayList.length > 0) {
//到面
that.recordTodayList.forEach(item1 => {
tempList.forEach((item2, index) => {
if (item1.userId == item2.userId && item1.interviewedNum != item2.interviewedNum && item2.interviewedNum > 0) {
// for (var i = 0; i <= Math.floor(item2.interviewedNum - item1.interviewedNum); i++) {
this.nameArray.push({ type: '1', name: item1.userName, daomianStyle: item1.userName, indexA: index });
// }
}
});
});
//面试通过
that.recordTodayList.forEach(item1 => {
tempList.forEach((item2, index) => {
if (item1.userId == item2.userId && item1.interviewPassNum != item2.interviewPassNum && item2.interviewPassNum > 0) {
// for (var i = 0; i <= Math.floor(item2.interviewPassNum - item1.interviewPassNum); i++) {
this.nameArray.push({ type: '2', name: item1.userName, tongguoStyle: item1.userName, indexA: index });
// }
}
});
});
//入职
that.recordTodayList.forEach(item1 => {
tempList.forEach((item2, index) => {
if (item1.userId == item2.userId && item1.entryNum != item2.entryNum && item2.entryNum > 0) {
this.nameArray.push({ type: '3', name: item1.userName, ruzhiStyle: item1.userName, indexA: index });
}
});
});
if (this.nameArray.length >= 1) {
this.func();
that.imgCarouselShow = false;
}
}
that.recordTodayList = tempList;
} else if (tempJson.classify == 0) {
that.delayNum = tempJson.message;
}
}
},
2 years ago
playAudio1() { //点击约面 到面
2 years ago
var that = this;
let audio1 = new Audio()
audio1.src = "http://matripeweb.oss-cn-hangzhou.aliyuncs.com/antd/money.wav"
2 years ago
audio1.play();
this.showUserName_curr = '木槿/韩丽蕊'
setTimeout(function() {
that.showUserName_curr = '';
2 years ago
}, 5000)
},
2 years ago
playAudio2() {
2 years ago
var that = this;
let audio2 = new Audio()
audio2.src = "http://matripeweb.oss-cn-hangzhou.aliyuncs.com/antd/mario.wav"
2 years ago
audio2.play();
this.showUserName_curr = '木槿/韩丽蕊'
setTimeout(function() {
that.showUserName_curr = '';
}, 5000)
2 years ago
},
2 years ago
playAudio3() {
2 years ago
var that = this;
2 years ago
let audio3 = new Audio()
this.ifani = true;
2 years ago
audio3.src = "http://matripeweb.oss-cn-hangzhou.aliyuncs.com/antd/huanhu.wav"
2 years ago
audio3.play();
setTimeout(function() {
that.ifani = false;
}, 15000)
2 years ago
},
playClockAudio(type) {
let clockAudio = new Audio()
var _src = "http://matripeweb.oss-cn-hangzhou.aliyuncs.com/antd/5416.wav";
if (type == 2) {
_src = "http://matripeweb.oss-cn-hangzhou.aliyuncs.com/antd/4031076792.mp3";
}
clockAudio.src = _src;
clockAudio.play();
},
initClock() { //初始化闹钟每天12001330执行
var that = this;
console.log('初始化闹钟')
setInterval(() => {
var d = new Date();
var hour = d.getHours();
var minues = d.getMinutes();
var seconds = d.getSeconds();
if (hour - 11 == 0 && minues - 59 == 0) { //1200
setTimeout(function() {
that.playClockAudio(1);
}, 1000 * (60 - seconds));
}
if (hour - 13 == 0 && minues - 29 == 0) { //1330
setTimeout(function() {
that.playClockAudio(2);
}, 1000 * (60 - seconds));
}
//that.playClockAudio();
//console.log(hour + ":" + minues);
}, 60000); //每隔1分钟刷新一次
},
initWebSocket() { //初始化weosocket
var wsUri = serverAddress + '/websocket/statisticsServer/' + this.reconnect;
wsUri = wsUri.replace("https", "ws").replace("http", "ws");
this.websock = new WebSocket(wsUri);
this.websock.onmessage = this.websocketonmessage;
this.websock.onopen = this.websocketonopen;
this.websock.onerror = this.websocketonerror;
},
websocketonopen() { //连接建立之后执行send方法发送数据
this.isWebSocket = true;
this.reconnect = 0;
console.log("链接成功!", this.isWebSocket)
// this.websocketsend(JSON.stringify(actions));
},
websocketonerror() { //连接建立失败重连
console.log("连接建立失败");
var that = this;
that.reconnect = 1;
setTimeout(function() {
that.initWebSocket();
}, 2000);
// this.$message.info("重新建立链接中");
// this.initWebSocket();
},
websocketsend(data) { //数据发送
let actions = {
"msg": data
};
console.log("您正在发送消息", actions);
if (this.isWebSocket) {
this.websock.send(JSON.stringify(actions));
} else {
console.log("请先建立链接");
// this.$message.error("请先建立链接")
}
},
websocketclose(e) { //关闭
console.log('断开连接', e);
this.isWebSocket = false;
this.websock.close();
this.initWebSocket();
},
websocketHeartCheck() {
console.log("readyState===", this.websock.readyState);
if (this.websock.readyState == 2 || this.websock.readyState == 3) {
this.reconnect = 1;
this.initWebSocket();
} else {
console.log('连接中...');
}
this.websocketsend("保持联系");
},
handleSubmit(e) {
var that = this;
e.preventDefault();
this.formScreen.validateFields((err, values) => {
if (!err) {
console.log('Received values of form: ', values);
that.passowrd = values.passowrd;
that.checkPagePassowrd();
}
});
},
checkPagePassowrd() {
var that = this;
axios({
url: '/admin/v3/user/allotOrder/checkPagePassowrd',
method: 'post',
data: {
passowrd: that.passowrd
},
}).then(response => {
console.log(response);
if (response.status == 200) {
// 测试的时候需要注释
that.initWebSocket();
that.initClock();
if (that.isShow) {
setInterval(() => that.websocketHeartCheck(), 60000); //每隔1分钟刷新一次
}
// 测试的时候需要注释
that.isShow = false;
} else {
that.isShow = true;
that.$message.error(response.msg);
}
})
},
timeagoOfDateStr(_time) {
return timeagoOfDateStr(_time);
},
},
}
</script>
<style scoped>
@import 'http://matripeweb.oss-cn-hangzhou.aliyuncs.com/antd/ant.css';
@import 'http://matripeweb.oss-cn-hangzhou.aliyuncs.com/antd/animate.min.css';
@import 'http://matripeweb.oss-cn-hangzhou.aliyuncs.com/antd/bigScreen1.css';
2 years ago
div{
color: #fff;
}
.mmtt111{
background-image: url('http://matripeweb.oss-cn-hangzhou.aliyuncs.com/antd/screen_bg.png');background-size: 100% 100%;
background-repeat: no-repeat;
min-height:100vh;
2 years ago
}
.imgPlay .ant-carousel .slick-slide img {
display: inline-block;
}
.imgPlay .slick-list {
display: flex;
align-items: center;
}
.imgPlay .ant-carousel {
background-color: rgba(0, 0, 0, 1);
}
.imgPlay .tcImg {
position: relative;
width: 100vw;
height: 100vh;
display: flex !important;
align-items: center;
justify-content: center;
}
.imgPlay .mw100 {
max-width: 100%;
max-height: 100vh;
}
.imgPlay .imgText {
position: absolute;
top: 0;
left: 0;
text-align: left;
font-size: 36px;
margin-left: 24px;
color: #FFF;
}
.imgPlay .slick-track {
display: flex;
align-items: center;
}
.ant-carousel>>>.slick-slide {
/*text-align: center;*/
/*height: 560px;
line-height: 160px;
background: #364d79;*/
color: #fff;
overflow: hidden;
}
.ant-carousel>>>.slick-slide h3 {
color: #fff
}
.tth {
width: 100%;
}
.tc1, .tc7 {
width: 4%;
min-width: 70px;
}
.tc2 {
width: 25%;
padding-left: 60px;
text-align: left;
}
.tc3 {
width: 10%;
}
.tc4 {
width: 25%;
}
.tc5 {
width: 14%;
}
@media screen and (max-width: 1400px) {
.s_left {
width: 96%;
}
.tc1 {
min-width: 50px;
}
}
</style>
<style>
::-webkit-scrollbar {
display: none;
}
</style>