一、先上图
二、码农的代码吐槽下
<template>
<div class=”app-container home”>
<div class=”header”>
<div>
<div>今日在校：{
{ SchoolCountdata.allInSchoolCount }}人</div>
<div>教职工：{
{ SchoolCountdata.teacherInSchoolCount }}人</div>
<div>学生：{
{ SchoolCountdata.studentInSchoolCount }}人</div>
</div>
<div>智慧校园</div>
<div>
<div v-html=”yeartxt”></div>
<div v-html=”daytxt”></div>
<!– <div>{
{$moment().format(‘YYYY年MM年DD HH:mm’)}}</div> –>
<div @click=”goTarget”>退出大屏</div>
</div>
</div>
<div class=”main”>
<div class=”left”>
<!– style=”width:446px; padding:40px 20px 0px; overflow: hidden;” –>
<div>
<div style=”overflow: hidden; width: 415px; margin-left: 10px”>
<vue-seamless-scroll
class=”seamless-scroll”
:data=”lastWeekRankdata”
:class-option=”classOption2″
>
<ul style=”width: 1000px; padding-top: 30px”>
<li v-for=”(v, i) in lastWeekRankdata” :key=”i”>
<div>{
{ i + 1 }}</div>
<div v-if=”i + 1 == 1″>
<img src=”@/assets/images/2@2x.png” alt=”” width=”45″ />
</div>
<div v-if=”i + 1 == 2″>
<img src=”@/assets/images/3@2x.png” alt=”” width=”45″ />
</div>
<div v-if=”i + 1 == 3″>
<img src=”@/assets/images/1@2x.png” alt=”” width=”45″ />
</div>
<div v-if=”i + 1 > 3″>
<div></div>
</div>
<div>
<img
:src=”baseUrl_src(v.image)”
alt=””
width=”72″
height=”72″
/>
</div>
<span>{
{ v.attendanceRatio }}</span>
<div>{
{ v.teacherName }}</div>
</li>
</ul>
</vue-seamless-scroll>
</div>
</div>
<div>
<!– {
{attendancedata}} === –>
<div>
实到人数<span> {
{ attendancedata.realNumber }}</span
>人
</div>
<div>
较昨日 <img src=”@/assets/images/up.png” v-if=”Accounted” />
<img src=”@/assets/images/down.png” v-else />
<span>{
{ attendancedata.realRatio }} </span>
</div>
<div>
<div ref=”commandstats” style=”height: 200px; width: 180px” />
<ul>
<li>
<div></div>
<div>正常</div>
<div>{
{ attendancedata.normalNumber }}</div>
</li>
<li>
<div style=”background: #fde64e”></div>
<div style=”color: #fde64e”>迟到</div>
<div>{
{ attendancedata.lateNumber }}</div>
</li>
<li>
<div style=”background: #fd6767″></div>
<div style=”color: #fd6767″>早退</div>
<div>{
{ attendancedata.leaveEarlyNumber }}</div>
</li>
<li>
<div style=”background: #a1e6ce”></div>
<div style=”color: #a1e6ce”>不在岗</div>
<div>{
{ attendancedata.notOnDutyNumber }}</div>
</li>
</ul>
</div>
</div>
</div>
<div class=”center”>
<div class=”bannerBox”>
<div
id=”player”
v-loading=”loading”
style=”width: 100%; height: 100%”
></div>
<!– <div class=”swiper-container gallery-top”>
<div class=”swiper-wrapper”>
<div class=”swiper-slide” v-for=”(item,index) of bigImg” :key=”index”>
<img class=”img” :src=”item”>
</div>
</div>
</div>
<div class=”swiper-container gallery-thumbs”>
<div class=”swiper-wrapper”>
<div class=”swiper-slide swiper-bottom” v-for=”(item,index) of bigImg” :key=”index”>
<img class=”img” :src=”item”>
</div>
</div>
</div> –>
</div>
</div>
<!– 学生当日考勤 –>
<div class=”right”>
<div class=”race-lamp-card”>
<ul class=”horseLamp_list” style=”height: 30px”>
<li>
<div>序号</div>
<div>班级</div>
<div>出勤率(%)</div>
</li>
</ul>
<ul class=”horseLamp_list”>
<vue-seamless-scroll
class=”seamless-scroll”
:data=”classattendancedata”
:class-option=”classOption”
>
<li v-for=”(item, index) in classattendancedata” :key=”index”>
<div>{
{ index + 1 }}</div>
<div>{
{ item.organizedName }}</div>
<div>
{
{ item.attendanceRatio
}}{
{ item.attendanceRatio ? “%” : “%” }}
</div>
</li>
<li class=”bottom_fade”></li>
</vue-seamless-scroll>
</ul>
</div>
<!– 学生考勤排行 –>
<div class=”race-lamp-card”>
<ul class=”horseLamp_list” style=”height: 30px”>
<li>
<div>班级</div>
<div></div>
<div>出勤率(%)</div>
</li>
</ul>
<ul class=”horseLamp_list”>
<vue-seamless-scroll
class=”seamless-scroll”
:data=”WeekAttendancedata”
:class-option=”classOption”
>
<li v-for=”(item, index) in WeekAttendancedata” :key=”index”>
<div>{
{ item.organizedName }}</div>
<div>
<el-progress
color=”#81FF00″
:show-text=”false”
:percentage=”item.attendanceRatio”
>
</el-progress>
</div>
<div>{
{ item.attendanceRatio }}%</div>
</li>
<li class=”bottom_fade”></li>
</vue-seamless-scroll>
</ul>
</div>
</div>
</div>
<!– 教师出勤率 –>
<div class=”bottom”>
<!– {
{attendanceRatiodata}} –>
<div class=”commandstatsPie”>
<div ref=”commandstatsPie” style=”width: 420px; height: 160px”></div>
<div class=”teacherbg”>
<div style=”color: rgb(109, 86, 249)”>
<!– <img src=”@/assets/images/e38378266ec5cc32918654fa1388384.png” alt=””> –>
{
{ this.attendanceRatiodata.nowRatio }}
</div>
<div style=”color: #00e1fe”>
{
{ this.attendanceRatiodata.weekRatio }}
<!– <img src=”@/assets/images/ae447071c20f3fcab87839017414677.png” alt=””> –>
</div>
<div style=”color: gold”>
{
{ this.attendanceRatiodata.monthRatio }}
<!– <img src=”@/assets/images/761bf03b9b5943d164b93e5b58c5422.png” alt=””> –>
</div>
</div>
<div>
<div>当日</div>
<div>当周</div>
<div>当月</div>
</div>
</div>
<!– 学生作品 –>
<div class=”race-lamp-card” v-if=”progresList.length > 0″>
<ul class=”horseLamp_list” :class=”{ horseLamp_top: animate }”>
<li>
<div>序号</div>
<div>作品名称</div>
<div>作者</div>
<div>班级</div>
</li>
<li v-for=”(item, index) in broadcastdata” v-bind:key=”index”>
<div>{
{ item.areaId }}</div>
<div>{
{ item.broadcastName }}</div>
<div>{
{ item.broadcastName }}</div>
<div>{
{ item.groupName }}</div>
</li>
<li class=”bottom_fade”></li>
</ul>
</div>
<!– 广播节目 –>
<div class=”race-lamp-card” v-if=”broadcastdata.length > 0″>
<ul class=”horseLamp_list reshorseLamp_list” style=”height: 30px”>
<li>
<div>序号</div>
<div>节目播放设备</div>
<div>时间</div>
</li>
</ul>
<ul class=”horseLamp_list reshorseLamp_list”>
<vue-seamless-scroll
class=”seamless-scroll”
:data=”broadcastdata”
:class-option=”broadcastscroll”
>
<li v-for=”(item, index) in broadcastdata” v-bind:key=”index”>
<div>{
{ index + 1 }}</div>
<div>{
{ item.broadcastName }}</div>
<!– <div title=”item.program”>{
{programsplice(item.program)}}</div> –>
<div>{
{ item.playTime }}</div>
<!– <div>{
{item.createTime.substring(11,item.createTime.length)}}</div> –>
</li>
<li class=”bottom_fade”></li>
</vue-seamless-scroll>
</ul>
</div>
</div>
</div>
</template>
<script>
import {
arearoot,
areasubArea,
apicameralist,
camerapreview,
} from “@/api/HKcamera/index”;
import Swiper from “swiper”;
import echarts from “echarts”;
import “moment/locale/zh-cn”;
import { mapGetters } from “vuex”;
let moment = require(“moment”);
const IS_MOVE_DEVICE = document.body.clientWidth < 992; // 是否移动设备
const MSE_IS_SUPPORT = !!window.MediaSource; // 是否支持mse
//公共广播
import {
inSchoolCount,
lastWeekRank,
attendance,
attendanceRatio,
broadcast,
lastWeekAttendance,
classattendance,
} from “@/api/home”;
import vueSeamlessScroll from “vue-seamless-scroll”;
export default {
name: “Index”,
components: {
vueSeamlessScroll,
},
data() {
return {
yeartxt: “”,
daytxt: “”,
//在校人数
SchoolCountdata: {
studentInSchoolCount: null,
teacherInSchoolCount: null,
allInSchoolCount: null,
},
baseUrl: process.env.VUE_APP_BASE_API,
//教师考勤排行
lastWeekRankdata: [],
//教师出勤数
attendancedata: {
abnormalNumber: 6,
lateNumber: 4,
leaveEarlyNumber: 1,
missingCardNumber: 3,
normalNumber: 4,
notOnDutyNumber: 0,
realNumber: 4,
realRatio: “0%”,
},
//教师出勤率
attendanceRatiodata: {
monthRatio: “83.95%”,
nowRatio: “90%”,
weekRatio: “90%”,
},
//广播节目
broadcastdata: [],
//学生考勤排行
WeekAttendancedata: [],
//学生考勤
classattendancedata: [],
// bigImg: [
// “https://t7.baidu.com/it/u=3165657288,4248157545&fm=193&f=GIF”,
// “https://t7.baidu.com/it/u=2942499027,2479446682&fm=193&f=GIF”,
// “https://t7.baidu.com/it/u=2610975262,3538281461&fm=193&f=GIF”,
// “https://t7.baidu.com/it/u=4138158235,3956816634&fm=193&f=GIF”,
// ],
animate: false,
progresList: [],
//视频播放
// 摄像头个数列表
videoList: 2,
loading: true,
zh_CN: “”,
isMoveDevice: IS_MOVE_DEVICE,
player: null,
splitNum: IS_MOVE_DEVICE ? 1 : 2,
mseSupport: MSE_IS_SUPPORT,
tabActive: MSE_IS_SUPPORT ? “mse” : “decoder”,
labelCol: { span: 5 },
wrapperCol: { span: 18 },
urls: {
realplay: “ws://172.16.7.250:559/openUrl/Isj35ug”,
talk: “ws://172.16.7.250:559/openUrl/Isj35ug”,
playback: “ws://172.16.7.250:559/openUrl/Isj35ug”,
},
playback: {
startTime: “2022-01-26T00:00:00”,
endTime: “2022-01-26T23:59:59”,
valueFormat: moment.HTML5_FMT.DATETIME_LOCAL_SECONDS,
seekStart: “2022-01-26T12:00:00”,
rate: “”,
},
muted: true,
volume: 50,
timerTwo: null,
//倒计时 两分钟
maxtime: 10,
//视频长度轮询对比
cameraIndexCodelength: 0,
cameraIndexCodecir: “”,
//本地视频
getitemindexCode: “”,
//两分钟去取视频
videIndex: 0,
//转成二维数组
videUrl: [],
//两分钟下一组视频
videTimeUrl: [],
//摄像头播放
deptOptions: [],
};
},
created() {
window.setInterval(this.showTime, 1000);
this.funinSchoolCount();
this.funlastWeekRank();
this.funattendance();
this.funattendanceRatio();
this.funlastWeekAttendance();
this.funclassattendance();
this.funbroadcast();
let _this = this;
this.$nextTick(function () {
this.galleryThumbsLunbo();
this.galleryTopLunbo();
});
setInterval(function () {
_this.showhorseLamp();
}, 2500);
//轮询视频即时
this.timerTwo = setInterval(function () {
_this.CountDown();
}, 1000);
},
mounted() {
//获取摄像头
this.init();
//获取视频
this.getTreeselect();
this.$el.style.setProperty(“display”, “block”);
//暂无用处
this.drawPieTwo();
//!window.JSPlugin
if (!window.JSPlugin) {
this.loadScript(“/demo/h5player.min.js”).then(() => {
this.createPlayerIns();
});
console.log(“ABC=!window.JSPlugin”);
} else {
console.log(“!window.JSPlugin=>>>>>>>>>>>>>>>>>>>>ELSE”);
}
},
methods: {
getTreeselect() {
arearoot({}).then((e) => {
if (e && e.code === 200) {
if (e.data) {
apicameralist(e.data.indexCode).then((readList) => {
let indexCode = readList.data.map((item) => item.cameraIndexCode);
localStorage.setItem(“indexCode”, JSON.stringify(indexCode));
this.getitemindexCode = JSON.parse(
localStorage.getItem(“indexCode”)
);
this.cameraIndexCodelength = this.getitemindexCode.length / 4;
this.cameraIndexCodecir = this.cameraIndexCodelength + “”;
this.videUrl = this.listToMatrix(this.getitemindexCode, 4);
//视频配置&事件回调绑定
this.createPlayer();
//初始化视频播放
this.setTimecode(this.videUrl[0]);
});
}
}
});
},
init() {
// 设置播放容器的宽高并监听窗口大小变化
window.addEventListener(“resize”, () => {
this.player.JS_Resize();
});
},
createPlayer() {
let szBasePath = “”;
//因为项目配置在二级域名，所以文件需改变路径
// if (process.env.NODE_ENV == “production”) {
// szBasePath = “/bzsv/js/”;
// } else {
// szBasePath = “/js/”;
// }
console.log(`szBasePath======》》》`, szBasePath, process.env.NODE_ENV);
this.player = new window.JSPlugin({
szId: “player”,
szBasePath: “/demo/”,
iMaxSplit: 4,
iCurrentSplit: IS_MOVE_DEVICE ? 1 : 2,
//分屏播放
openDebug: true,
oStyle: {
// borderSelect: IS_MOVE_DEVICE ? “#000” : “#FFCC00”,
},
});
// 事件回调绑定
this.player.JS_SetWindowControlCallback({
windowEventSelect: function (iWndIndex) {
//插件选中窗口回调
console.log(
“windowSelect callbac====================>>>>: “,
iWndIndex
);
},
pluginErrorHandler: function (iWndIndex, iErrorCode, oError) {
//插件错误回调
console.log(“pluginError callback: “, iWndIndex, iErrorCode, oError);
},
windowEventOver: function (iWndIndex) {
//鼠标移过回调
//console.log(iWndIndex);
},
windowEventOut: function (iWndIndex) {
//鼠标移出回调
//console.log(iWndIndex);
},
windowEventUp: function (iWndIndex) {
//鼠标mouseup事件回调
//console.log(iWndIndex);
},
windowFullCcreenChange: function (bFull) {
//全屏切换回调
console.log(“fullScreen callback: “, bFull);
},
firstFrameDisplay: function (iWndIndex, iWidth, iHeight) {
//首帧显示回调
console.log(
“firstFrame loaded callback: “,
iWndIndex,
iWidth,
iHeight
);
},
performanceLack: function () {
//性能不足回调
console.log(“performanceLack callback: “);
},
});
},
listToMatrix(list, elementsPerSubArray) {
var matrix = [],
i,
k;
for (i = 0, k = -1; i < list.length; i++) {
if (i % elementsPerSubArray === 0) {
k++;
matrix[k] = [];
}
matrix[k].push(list[i]);
}
return matrix;
},
//轮询倒计时两分钟
CountDown() {
if (this.cameraIndexCodelength <= 0) {
//回归以前视频长度
this.cameraIndexCodelength = parseInt(this.cameraIndexCodecir);
} else {
if (this.maxtime <= 0) {
//时间
this.maxtime = 10;
//视频长度
this.cameraIndexCodelength -= 1;
//下一条视频
this.videIndex += 1;
} else {
this.maxtime -= 1;
// clearInterval(this.timerTwo);
// alert(“时间到，结束!”);
}
}
// console.log(this.cameraIndexCodelength, “=====================8888”);
// console.log(this.maxtime, “=============>>”);
},
//视频播放
setTimecode(item) {
let { player, mode, videUrl, videTimeUrl, videIndex } = this;
for (let i = 0; i <= 3; i++) {
camerapreview(item[i]).then((item) => {
console.log(item, “item 视频请求地址======”);
let url = item.data;
player.JS_Play(
url,
{
playURL: url,
mode: mode,
},
i
//回放参数
// startTime,
// endTime
);
});
}
},
arrangeWindow() {
let splitNum = this.splitNum;
this.player.JS_ArrangeWindow(splitNum).then(
() => {
console.log(`arrangeWindow to ${splitNum}x${splitNum} success`);
},
(e) => {
console.error(e);
}
);
},
wholeFullScreen() {
this.player.JS_FullScreenDisplay(true).then(
() => {
console.log(`wholeFullScreen success`);
},
(e) => {
console.error(e);
}
);
},
/* 预览&对讲 */
realplay() {
let { player, mode, urls } = this,
index = player.currentWindowIndex,
playURL = urls.realplay;
// player.currentWindowIndex += 1;
player.JS_Play(playURL, { playURL, mode }, index).then(
() => {
console.log(“realplay success”);
},
(e) => {
console.error(e);
}
);
},
stopPlay() {
this.player.JS_Stop().then(
() => {
this.playback.rate = 0;
console.log(“stop realplay success”);
},
(e) => {
console.error(e);
}
);
},
talkStart() {
let url = this.urls.talk;
this.player.JS_StartTalk(url).then(
() => {
console.log(“talkStart success”);
},
(e) => {
console.error(e);
}
);
},
talkStop() {
this.player.JS_StopTalk().then(
() => {
console.log(“talkStop success”);
},
(e) => {
console.error(e);
}
);
},
stopAllPlay() {
this.player.JS_StopRealPlayAll().then(
() => {
this.playback.rate = 0;
console.log(“stopAllPlay success”);
},
(e) => {
console.error(e);
}
);
},
/* 回放 */
playbackStart() {
let { player, mode, urls, playback } = this,
index = player.currentWindowIndex,
playURL = urls.playback,
{ startTime, endTime } = playback;
startTime += “Z”;
endTime += “Z”;
player
.JS_Play(playURL, { playURL, mode }, index, startTime, endTime)
.then(
() => {
console.log(“playbackStart success”);
this.playback.rate = 1;
},
(e) => {
console.error(e);
}
);
},
playbackPause() {
this.player.JS_Pause().then(
() => {
console.log(“playbackPause success”);
},
(e) => {
console.error(e);
}
);
},
playbackResume() {
this.player.JS_Resume().then(
() => {
console.log(“playbackResume success”);
},
(e) => {
console.error(e);
}
);
},
seekTo() {
let { seekStart, endTime } = this.playback;
seekStart += “Z”;
endTime += “Z”;
this.player
.JS_Seek(this.player.currentWindowIndex, seekStart, endTime)
.then(
() => {
console.log(“seekTo success”);
},
(e) => {
console.error(e);
}
);
},
playbackSlow() {
this.player.JS_Slow().then(
(rate) => {
this.playback.rate = rate;
},
(e) => {
console.error(e);
}
);
},
playbackFast() {
this.player.JS_Fast().then(
(rate) => {
this.playback.rate = rate;
},
(e) => {
console.error(e);
}
);
},
frameForward() {
this.player.JS_FrameForward(this.player.currentWindowIndex).then(
() => {
this.playback.rate = 1;
console.log(“frameForward success”);
},
(e) => {
console.error(e);
}
);
},
/* 声音、抓图、录像 */
openSound() {
this.player.JS_OpenSound().then(
() => {
console.log(“openSound success”);
this.muted = false;
},
(e) => {
console.error(e);
}
);
},
closeSound() {
this.player.JS_CloseSound().then(
() => {
console.log(“closeSound success”);
this.muted = true;
},
(e) => {
console.error(e);
}
);
},
setVolume(value) {
let player = this.player,
index = player.currentWindowIndex;
this.player.JS_SetVolume(index, value).then(
() => {
console.log(“setVolume success”, value);
},
(e) => {
console.error(e);
}
);
},
capture(imageType) {
let player = this.player,
index = player.currentWindowIndex;
player.JS_CapturePicture(index, “img”, imageType).then(
() => {
console.log(“capture success”, imageType);
},
(e) => {
console.error(e);
}
);
},
recordStart(type) {
const codeMap = { MP4: 5, PS: 2 };
let player = this.player,
index = player.currentWindowIndex,
fileName = `${moment().format(“YYYYMMDDHHmm”)}.mp4`;
typeCode = codeMap[type];
player.JS_StartSaveEx(index, fileName, typeCode).then(
() => {
console.log(“record start …”);
},
(e) => {
console.error(e);
}
);
},
recordStop() {
let player = this.player;
index = player.currentWindowIndex;
player.JS_StopSave(index).then(
() => {
console.log(“record stoped, saving …”);
},
(e) => {
console.error(e);
}
);
},
/* 电子放大、智能信息 */
enlarge() {
let player = this.player,
index = player.currentWindowIndex;
player.JS_EnableZoom(index).then(
() => {
console.log(“enlarge start…, select range…”);
},
(e) => {
console.error(e);
}
);
},
enlargeClose() {
let player = this.player,
index = player.currentWindowIndex;
player.JS_DisableZoom(index).then(
() => {
console.log(“enlargeClose success”);
},
(e) => {
console.error(e);
}
);
},
intellectTrigger(openFlag) {
let player = this.player,
index = player.currentWindowIndex;
let result = player.JS_RenderALLPrivateData(index, openFlag);
console.log(
`${openFlag ? “open” : “close”} intellect ${
result === 1 ? “success” : “failed”
}`
);
},
getvideoInfo() {
let player = this.player,
index = player.currentWindowIndex;
player.JS_GetVideoInfo(index).then(function (videoInfo) {
console.log(“videoInfo:”, videoInfo);
});
},
getOSDTime() {
let player = this.player,
index = player.currentWindowIndex;
player.JS_GetOSDTime(index).then(function (time) {
console.log(“osdTime:”, new Date(time));
});
},
//摄像头 end
//学生考勤
funclassattendance() {
classattendance()
.then((e) => {
if (e.code == 200) {
if (e.data.length > 0) {
this.classattendancedata = e.data;
}
}
})
.catch((err) => {
console.log(err, `学生考勤`);
});
},
//上周班级考勤率
funlastWeekAttendance() {
lastWeekAttendance()
.then((e) => {
// console.log(`上周班级考勤率`, e);
if (e.code == 200) {
if (e.data.length > 0) {
this.WeekAttendancedata = e.data;
}
}
})
.catch((Error) => {
// console.log(Error, “上周班级考勤率”);
});
},
// moment库实现的倒计时
showTime() {
var time = this.$moment(new Date(), “YYYY-MM-DD HH:mm:ss”).add(1, “s”),
o;
o = time.add(1, “s”).format(“yyyy年MM月DD日-dddd HH:mm:ss”).split(“-“);
this.yeartxt = o[0];
this.daytxt = o[1];
},
//广播节目
funbroadcast() {
broadcast({})
.then((e) => {
if (e.code == 200) {
if (e.data.length > 0) {
this.broadcastdata = e.data;
this.progresList = e.data;
//console.log(“广播节目”, e.data);
}
}
})
.catch((err) => {
// console.log(“广播节目”, err);
});
},
//教师出勤率
funattendanceRatio() {
attendanceRatio()
.then((e) => {
if (e.code == 200) {
//console.log(“教师出勤率”, e.data);
this.attendanceRatiodata = e.data;
}
})
.catch((err) => {
//console.log(“教师出勤数”, err);
});
},
//教师当日出勤数
funattendance() {
attendance()
.then((e) => {
if (e.code == 200) {
this.attendancedata = e.data;
//教师数据图表
this.drawPie();
// console.log(“教师出勤数”, this.attendancedata);
}
})
.catch((err) => {
//console.log(“教师出勤数”, err);
});
},
//上周教师考勤排行
funlastWeekRank() {
lastWeekRank()
.then((e) => {
if (e.code == 200) {
if (e.data.length > 0) {
this.lastWeekRankdata = e.data;
// console.log(this.lastWeekRankdata.length, “长度是多少==========>>>”)
}
}
})
.catch((err) => {
// console.log(‘上周教师考勤排行’, err);
});
},
//在校人数
funinSchoolCount() {
inSchoolCount()
.then((e) => {
if (e.code == 200) {
let {
allInSchoolCount,
studentInSchoolCount,
teacherInSchoolCount,
} = {
…e.data,
};
//console.log(‘//在校人数’, e);
this.SchoolCountdata.allInSchoolCount = allInSchoolCount;
this.SchoolCountdata.studentInSchoolCount = studentInSchoolCount;
this.SchoolCountdata.teacherInSchoolCount = teacherInSchoolCount;
}
})
.catch((err) => {
//console.log(err, “=========>>”)
});
},
goTarget() {
// alert(11);
this.$router.push({
// path:’/control/control’
path: “/student/student”,
});
// window.open(val, ‘_blank’);
},
//滚屏方法取消
showhorseLamp() {
// this.animate = true;
// setTimeout(() => {
// this.horseLampList.push(this.horseLampList[0]);
// this.horseLampList.shift();
// this.progresList.push(this.progresList[0]);
// this.progresList.shift();
// this.animate = false;
// }, 300);
},
galleryTopLunbo() {
this.galleryTop = new Swiper(“.gallery-top”, {
spaceBetween: 0,
loop: true,
loopedSlides: 4,
// 左右按钮
navigation: {
nextEl: “.swiper-button-next”,
prevEl: “.swiper-button-prev”,
},
thumbs: {
//thumbs组件专门用于制作带缩略图的swiper
swiper: this.galleryThumbs,
slideThumbActiveClass: “swiper-slide-thumb-active”,
},
// autoplay: {
// “delay”: 2500,
// “disableOnInteraction”: false
// }
});
},
galleryThumbsLunbo() {
this.galleryThumbs = new Swiper(“.gallery-thumbs”, {
spaceBetween: 15, //在slide之间设置距离（单位px）
slidesPerView: 3, //设置slider容器能够同时显示的slides数量
loop: true, //设置为true 则开启loop模式
freeMode: true, //默认为false，普通模式：slide滑动时只滑动一格
loopedSlides: 3, //一般设置大于可视slide个数2个即可
watchSlidesVisibility: true, //开启watchSlidesVisibility选项前需要先开启watchSlidesProgress
watchSlidesProgress: true, //开启这个参数来计算每个slide的progress(进度、进程)
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
});
},
drawPie() {
// 基于准备好的dom，初始化echarts实例，所以只能在mounted中调用
let myChart = echarts.init(this.$refs.commandstats);
// console.log(this.attendancedata, “==========”);
// 绘制图表
myChart.setOption({
color: [“#81FF00”, “#FDE64E”, “#FD6767”, “#A1E6CE”],
series: [
{
type: “pie”,
radius: [30, 60],
center: [“37%”, “42%”],
roseType: “radius”,
label: {
show: false,
},
emphasis: {
label: {
show: false,
},
},
data: [
{
value: this.attendancedata.normalNumber,
},
{
value: this.attendancedata.lateNumber,
},
{
value: this.attendancedata.leaveEarlyNumber,
},
{
value: this.attendancedata.notOnDutyNumber,
},
],
},
],
});
},
//取消此方法
drawPieTwo() {
// 基于准备好的dom，初始化echarts实例，所以只能在mounted中调用
let myChart = echarts.init(this.$refs.commandstatsPie);
},
event() {
const self = this;
return {};
},
network() {
const self = this;
return {};
},
},
computed: {
mode: function () {
return this.tabActive === “mse” ? 0 : 1;
},
…mapGetters([“avatar”]),
Accounted() {
let len = this.attendancedata.realRatio.length;
let tex = Number(this.attendancedata.realRatio.substring(0, len – 1));
if (tex > 1) {
return true;
} else {
return false;
}
},
classOption() {
return {
step: 0.1, // 数值越大速度滚动越快
limitMoveNum: this.classattendancedata.length, // 开始无缝滚动的数据量 this.poleAlarmList.length
hoverStop: true, // 是否开启鼠标悬停stop
direction: 1, // 0向下 1向上 2向左 3向右
openWatch: true, // 开启数据实时监控刷新dom
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
waitTime: 100, // 单步运动停止的时间(默认值1000ms)
};
},
classOption2() {
return {
step: 0.8, // 数值越大速度滚动越快
limitMoveNum: 10, // 开始无缝滚动的数据量 this.poleAlarmList.length
hoverStop: true, // 是否开启鼠标悬停stop
direction: 2, // 0向下 1向上 2向左 3向右
openWatch: true, // 开启数据实时监控刷新dom
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
waitTime: 100, // 单步运动停止的时间(默认值1000ms)
};
},
//广播节目
broadcastscroll() {
return {
step: 0.2, // 数值越大速度滚动越快
limitMoveNum: this.broadcastdata.length, // 开始无缝滚动的数据量 this.poleAlarmList.length
hoverStop: true, // 是否开启鼠标悬停stop
direction: 1, // 0向下 1向上 2向左 3向右
openWatch: true, // 开启数据实时监控刷新dom
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
waitTime: 100, // 单步运动停止的时间(默认值1000ms)
};
},
programsplice() {
return (val) => {
let T;
// if (val) {
// if (val.length > 5) {
// T = val.substr(0, 6) + “…”
// }
// }
return T;
};
},
//图片路径拼接
baseUrl_src() {
return function (item) {
let url = this.avatar;
var quote = item;
var part = “”;
if (quote != null || quote) {
part = quote.slice(1, quote.length);
// part = quote.slice(0, quote.length);
}
// console.log(this.baseUrl, part, “图片路径===========>>>”);
if (item) {
url = this.baseUrl + part;
}
// console.log(url, “========cccc”);
return url;
};
},
},
watch: {
videIndex: {
handler(n, v) {
this.videTimeUrl = this.videUrl[n];
this.setTimecode(this.videTimeUrl);
console.log(this.videTimeUrl, n, “=============nnnn>>”);
},
deep: true,
immediate: true,
},
},
};
</script>
<style scoped lang=”scss”>
.teacherbg {
background: url(../assets/images/teacherbg.png) no-repeat;
width: 372px;
height: 148px;
}
.home {
background-image: url(“../assets/images/20211221094951.png”);
padding: 0;
width: 1910px;
height: 1080px;
.header {
display: flex;
align-items: center;
height: 128px;
padding: 0 39px;
> div {
display: flex;
align-items: center;
font-size: 25px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #6cdbde;
> div {
margin-right: 36px;
}
&:nth-child(2) {
font-size: 48px;
font-family: AlibabaPuHuiTiM;
color: #42e2d0;
line-height: 65px;
letter-spacing: 1px;
width: 594px;
justify-content: center;
}
&:last-child {
flex: 1;
justify-content: flex-end;
> div:last-child {
margin: 0;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #42e2d0;
cursor: pointer;
}
}
}
}
.main {
padding: 20px 97px 0;
display: flex;
align-content: center;
.left {
> div {
&:first-child,
&:last-child {
background: url(“../assets/images/33@2x.png”) no-repeat;
// width: 444px;
height: 277px;
overflow: hidden;
margin: 0 35px 23px 0;
}
&:first-child {
ul {
// width: 390px;
// height: 247px;
height: 251px;
overflow: hidden;
li {
text-align: center;
margin-right: 10px;
display: inline-block;
float: left;
width: 88px;
font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #fde64e;
span {
font-size: 16px;
display: block;
}
&:last-child {
margin: 0;
}
&:nth-child(2) {
color: #259cfe;
}
&:nth-child(3) {
color: #ffa55c;
}
&:nth-child(4) {
color: #6cdbde;
}
> div {
&:nth-child(2) {
height: 42px;
position: relative;
z-index: 100;
}
&:nth-child(3) {
width: 72px;
height: 72px;
border-radius: 100%;
overflow: hidden;
position: relative;
top: -12px;
left: 10px;
}
&:last-child {
font-size: 16px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #6cdbde;
height: 45px;
overflow: hidden;
}
}
}
}
}
&:last-child {
background-image: url(“../assets/images/37@2x.png”);
background-size: cover;
width: 444px;
height: 277px;
padding: 51px 39px 49px;
font-size: 18px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #6cdbde;
> div {
&:nth-child(2) {
font-size: 14px;
margin-top: 5px;
}
&:last-child {
display: flex;
ul {
li {
display: flex;
align-items: center;
> div {
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #81ff00;
margin-bottom: 13px;
&:first-child {
width: 44px;
height: 6px;
background: #81ff00;
border-radius: 3px;
}
&:nth-child(2) {
margin-left: 20px;
width: 60px;
}
&:nth-child(3) {
color: #ffffff;
}
}
}
}
}
}
}
}
}
.center {
width: 766px;
height: 578px;
background: url(“../assets/images/9de015532a42acddb5fe567913aed9d.png”)
no-repeat;
background-size: contain;
.bannerBox {
width: 716px;
height: 480px;
margin: 74px auto;
overflow: hidden;
border-radius: 2px;
border: 2px solid rgba(62, 208, 198, 0.4);
.img {
width: 100%;
height: 100%;
}
.gallery-top {
width: 100%;
height: 311px;
border-bottom: 2px solid rgba(62, 208, 198, 0.4);
}
.gallery-thumbs {
width: 100%;
height: 165px;
.swiper-slide {
width: 33.3333% !important;
margin-right: 0 !important;
border: 2px solid rgba(62, 208, 198, 0.4);
}
}
}
}
.right {
> div {
&:first-child,
&:last-child {
background: url(“../assets/images/41@2x.png”) no-repeat;
background-size: cover;
width: 444px;
height: 277px;
margin: 0 0 23px 35px;
}
&:first-child {
padding: 52px 56px 0;
}
&:last-child {
background: url(“../assets/images/6@2x.png”) no-repeat;
background-size: cover;
width: 444px;
height: 277px;
padding: 52px 10px 0;
li {
> div {
flex: 1;
}
}
}
}
}
}
.horseLamp_list {
height: 175px;
overflow: hidden;
mask-image: linear-gradient(
#121212 calc(100% – 45px),
transparent calc(100% – 0px)
);
li {
margin-bottom: 12px;
display: flex;
align-content: center;
font-size: 18px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #6cdbde;
&:first-child {
// font-size: 16px;
font-family: PingFangSC-Regular, PingFang SC;
// color: #fbfbfb;
}
> div {
width: 80px;
text-align: center;
.el-progress {
margin-top: 9px;
}
&:nth-child(2) {
width: 140px;
flex: 1;
}
&:nth-child(3) {
width: 120px;
}
}
}
}
ul.reshorseLamp_list {
li {
div {
// overflow: hidden;
height: 24px;
}
div:first-child {
width: 40px !important;
}
div:nth-child(2) {
width: 120px;
overflow: hidden;
}
div:nth-child(3) {
width: 180px;
font-size: 15px;
overflow: hidden;
}
// div:nth-child(4) {
// width: 150px;
// overflow: hidden;
// // font-size: 12px;
// }
}
}
.bottom {
padding: 0 97px 0;
display: flex;
align-content: center;
> div {
background: url(“../assets/images/8@2x.png”) no-repeat;
background-size: cover;
width: 444px;
height: 277px;
&:first-child {
padding: 60px 10px 0;
position: relative;
> div {
&:nth-child(2) {
position: absolute;
top: 70px;
left: 29px;
display: flex;
width: 420px;
> div {
width: 30%;
font-size: 18px;
height: 130px;
font-weight: 600;
line-height: 150px;
color: #fff;
text-align: center;
}
}
&:last-child {
position: absolute;
bottom: 40px;
display: flex;
width: 420px;
> div {
width: 29%;
margin-left: 10px;
text-align: center;
font-size: 16px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #00e1fe;
}
}
}
}
&:nth-child(2) {
background: url(“../assets/images/7ba22f92fca396ba3b4885002d8df65.png”)
no-repeat;
background-size: contain;
width: 766px;
height: 278px;
margin: 0 35px;
padding: 70px 40px 0;
font-size: 16px;
li {
> div:nth-child(3) {
width: 200px;
}
}
}
&:nth-child(3) {
background: url(“../assets/images/16@2x.png”) no-repeat;
background-size: cover;
padding: 52px 19px 0 14px;
}
}
}
h4 {
margin-top: 0px;
}
h2 {
margin-top: 10px;
font-size: 26px;
font-weight: 100;
}
p {
margin-top: 10px;
b {
font-weight: 700;
}
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
}
</style>