菜单配置

cyl/dev
张少康 2 years ago
parent 21aca05df3
commit 3ec0b8f14b

@ -0,0 +1,880 @@
<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">交付中心实时数据
<!-- <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" style="">排名</div>
<div class="ttd tc2" style="">姓名</div>
<!-- <div class="ttd tc7" style=""></div> -->
<!-- @click="ani" -->
<div class="ttd tc3" style="">简历数</div>
<!-- <div class="ttd">已处理</div> -->
<!-- <div class="ttd">约面数</div> -->
<div class="ttd tc4" style=""><span @click="playAudio1"></span><span @click="playAudio2"></span></div>
<!-- @click="playAudio1" -->
<!-- <div class="ttd" @click="playAudio2"></div> -->
<div class="ttd tc5" style="" @click="playAudio3"> </div>
<!-- @click="aaa" -->
<div class="ttd tc6">转化率丨漏斗</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.userName}}</div>
<!-- <div class="ttd tc7"></div> -->
<div class="ttd tc3">{{index+1}}/{{index+15}}</div>
<div class="ttd tc4" style="">{{index+1}}<span :class="daomianStyle == item.userName ?'bulingbuling' : ''">{{index1+2}}</span><span :class="tongguoStyle == item.userName ?'bulingbuling' : ''">{{index+1}}</span></div>
<div class="ttd tc5" style=""><span :class="ruzhiStyle == item.userName ?'bulingbuling' : ''">{{index+1}}</span>
<!-- /{{parseFloat(item.entryMonthNum).toFixed(1).replace(/(.0)$/,'')}} -->
</div>
<div class="ttd tc6">
{{index1+1}}
<!-- {{parseFloat(item.entryConversionPercent * 100).toFixed(2)}} -->
{{index+1}}</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">
<!-- {{showUserName}} -->
墨竹/王泽流
<!-- 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';
import { isNotEmptyCheck, timeagoOfDateStr } from '@/utils/commonUtil';
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 },
};
var timeClear;
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: 13,
// 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();
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.passowrd = '111606111';
// that.checkPagePassowrd();
this.storeImages2();
that.initWebSocket();
that.initClock();
if (that.isShow) {
setInterval(() => that.websocketHeartCheck(), 60000); //1
}
//
// that.isShow = false;
//doAsyncHttpRequest()
doAsyncHttpRequest('/admin/v3/store/storeImages', 'get').then(res => {
that.storeImages = res.data.storeImages;
}).then(() => {
that.showPictures();
});
//
// that.formScreen.setFieldsValue({ "passowrd": 111606111 }); //
// var tempList = tempJson.message;
// this.array = [];
// for (var i = 0; i < tempList.length; i += that.pageSize) {
// this.array.push(tempList.slice(i, i + that.pageSize));
// }
//
},
destroyed() {
this.websock.close() //websocket
},
beforeDestroy() { //
var that = this;
document.querySelector('html').removeAttribute('style', '')
document.querySelector('body').removeAttribute('style', '')
},
methods: {
showTargetResume(item) {
/*if(item.targetResume - item.monthEntryNum <= 0) {
return "(★)";
}
return "" + new Number(item.targetResume - item.monthEntryNum).toFixed(1) + "";*/
return "" + item.monthEntryNum + "/" + item.targetResume + "";
},
storeImages2() {
var that = this;
axios({
url: '/admin/v3/store/storeImages',
method: 'get',
data: {},
}).then(response => {
console.log(response);
if (response.status == 200) {
that.storeImages = response.data.storeImages;
//that.imagesToSlideImages();
} else {
that.$message.error(response.msg);
}
that.loading = false;
})
},
imagesToSlideImages() {
var that = this;
if (isNotEmptyCheck(that.storeImages)) {
that.slideImages = [];
var len = that.storeImages.length;
if (len <= this.slideImgNum) {
that.slideImages = that.storeImages;
} else { //10
var arr = [];
var imgs = [];
for (var i = 0; i != len; ++i) {
arr.push(i);
}
var imgIdx = arr.sort(() => Math.random() - 0.5).slice(0, this.slideImgNum);
// debugger;
// imgIdx.each(function(item, index) {
// imgs.push(that.storeImages[item]);
// });
imgIdx.forEach(item => {
imgs.push(that.storeImages[item]);
})
that.slideImages = imgs;
}
}
},
hideImg() {
console.log("hideImg+===============")
this.imgCarouselShow = false;
this.showPictures();
},
showPictures(currTime) {
if (!isNotEmptyCheck(currTime)) {
currTime = 60000;
}
var that = this;
// debugger;
if (new Date().getHours() >= 9 && new Date().getHours() < 18) {
timeClear = setTimeout(function() {
that.imagesToSlideImages();
that.imgCarouselShow = false;
}, currTime);
}
},
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));
}
for (var i = 0; i < this.array.length; i ++) {
i.disposeNum = 100
}
// 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;
}
}
},
playAudio1() { //
var that = this;
let audio1 = new Audio()
audio1.src = "http://matripeweb.oss-cn-hangzhou.aliyuncs.com/antd/money.wav"
audio1.play();
this.showUserName_curr = '木槿/韩丽蕊'
setTimeout(function() {
that.showUserName_curr = '';
}, 5000)
},
playAudio2() {
var that = this;
let audio2 = new Audio()
audio2.src = "http://matripeweb.oss-cn-hangzhou.aliyuncs.com/antd/mario.wav"
audio2.play();
this.showUserName_curr = '木槿/韩丽蕊'
setTimeout(function() {
that.showUserName_curr = '';
}, 5000)
},
playAudio3() {
var that = this;
let audio3 = new Audio()
this.ifani = true;
audio3.src = "http://matripeweb.oss-cn-hangzhou.aliyuncs.com/antd/huanhu.wav"
audio3.play();
setTimeout(function() {
that.ifani = false;
}, 15000)
},
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;
//doAsyncHttpRequest()
doAsyncHttpRequest('/admin/v3/store/storeImages', 'get').then(res => {
that.storeImages = res.data.storeImages;
}).then(() => {
that.showPictures();
});
} 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';
.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>

File diff suppressed because one or more lines are too long
Loading…
Cancel
Save