496 lines
14 KiB
Vue
496 lines
14 KiB
Vue
<template>
|
||
<div>
|
||
<!-- 头部导航 start -->
|
||
<div class="header-box">
|
||
<!-- logo -->
|
||
<div class="logo-box">
|
||
<div class="logo">
|
||
<img v-if="logoImg!=''" :src="logoImg" style="object-fit: cover;">
|
||
<div style="display: flex;flex-direction: column;">
|
||
<span style="font-size: 33.8px;">都江堰市机关幼儿园</span>
|
||
<span style="font-size: 18.1px;">DU JANG YAN JI GUAN YOU ER YUAN</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 文本导航 -->
|
||
<div class="title-box">
|
||
<div class="title-item" :class="activeIndex==index?activeTitle:''" v-for="(item,index) in titleArr"
|
||
:key="index" @click="chooseTitle(index)">{{item}}</div>
|
||
</div>
|
||
<!-- 天气 -->
|
||
<div class="weather-box">
|
||
<img :src="weather || '../../static/weather/5.png'" style="margin-right: 10px;">
|
||
<div>
|
||
<div style="color: #FF9393;">{{date}}</div>
|
||
<div class="weather-three">
|
||
<div>{{temperature}}</div>
|
||
<div>{{time}}</div>
|
||
<div>{{week}}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 功能图标 -->
|
||
<div><img @click="clickFun" src="../../static/img/home/icon-set.png"></div>
|
||
</div>
|
||
<!-- 头部导航 end -->
|
||
|
||
|
||
|
||
|
||
<!-- 首页 -->
|
||
<homepage v-if="activeIndex==0"></homepage>
|
||
<!-- 幼儿园介绍 -->
|
||
<kindIntroduction v-if="activeIndex==1"></kindIntroduction>
|
||
<!-- 宝宝活动 -->
|
||
<babyActivity v-if="activeIndex==2"></babyActivity>
|
||
<!-- 出勤详情 -->
|
||
<attendanceDetail v-if="activeIndex==3"></attendanceDetail>
|
||
<!-- 宝宝相册 -->
|
||
<babyAlbum v-if="activeIndex==4"></babyAlbum>
|
||
<!-- 疫情管理 -->
|
||
<yiqingmanagement v-if="activeIndex==5"></yiqingmanagement>
|
||
|
||
|
||
<!-- 底部 -->
|
||
<div class="footer">
|
||
<img src="../../static/img/home/foot-icon.png">
|
||
<img v-if="activeIndex==1" src="../../static/img/kindergartenIntroduce/chahua-01.png">
|
||
<img v-if="activeIndex==2" src="../../static/img/home/baby-foot.png">
|
||
<img v-if="activeIndex==3" src="../../static/img/attendancedetail/chah.png">
|
||
<img v-if="activeIndex==4 || activeIndex==5" src="../../static/img/babyalbum/chah.png">
|
||
</div>
|
||
<!-- 网络弹框 -->
|
||
<div v-if="isNetwork" class="popu-box">
|
||
<div class="item-row">班排设备ID：{{classCardId}}</div>
|
||
<div class="item-row">网络链接状态：网络监测（{{onLine?'已连接':'已断开'}}）<img v-if="onLine"
|
||
src="../../static/img/home/icon-link.png" style="width: 20px;"></div>
|
||
<div class="item-row">
|
||
<span style="flex-shrink: 0;">班牌显示模式：</span>
|
||
<div class="mode-box">
|
||
<div :class="'new'+index" v-for="(item,index) in modeArr" :key="index" @click="chooseMode(index)">
|
||
<div class="radio-box">
|
||
<span v-if="item.isActive"></span>
|
||
</div>
|
||
{{item.title}}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="item-row">
|
||
控制操作：
|
||
<div class="refresh-btn" @click="refreshEv">刷新</div>
|
||
<div class="back-btn" @click="backHomeEv">返回首页</div>
|
||
</div>
|
||
</div>
|
||
<img v-if="wellcomeFlag" @click="closeWellcome" src="../../static/img/babyalbum/wellcome-baby.png"
|
||
class="wellcome-img">
|
||
<!-- <div style="position: fixed;background-color: rgba(0,0,0,.5);top: 120px;left: 0;right: 0;bottom: 0;z-index: 10000;">
|
||
<img style="width: 100px;height: 100px;object-fit: cover;" src="https://qqbaby-creating.oss-cn-beijing.aliyuncs.com/1.jpg" >
|
||
<img style="width: 100px;height: 100px;object-fit: cover;" src="https://qqbaby-creating.oss-cn-beijing.aliyuncs.com/2.jpg" >
|
||
<img style="width: 100px;height: 100px;object-fit: cover;" src="https://qqbaby-creating.oss-cn-beijing.aliyuncs.com/3.jpg" >
|
||
</div> -->
|
||
</div>
|
||
</template>
|
||
<script>
|
||
// 首页
|
||
import homepage from '@/components/homepage.vue';
|
||
// 幼儿园介绍
|
||
import kindIntroduction from '@/components/kindIntroduction.vue';
|
||
// 宝宝活动
|
||
import babyActivity from '@/components/babyActivity.vue';
|
||
// 出勤详情
|
||
import attendanceDetail from '@/components/attendanceDetail.vue';
|
||
// 宝宝相册
|
||
import babyAlbum from '@/components/babyAlbum.vue';
|
||
// 疫情管理
|
||
import yiqingmanagement from '@/components/yiqingmanagement.vue';
|
||
export default {
|
||
components: {
|
||
homepage,
|
||
kindIntroduction,
|
||
babyActivity,
|
||
attendanceDetail,
|
||
babyAlbum,
|
||
yiqingmanagement
|
||
},
|
||
name: 'v-header',
|
||
data() {
|
||
return {
|
||
titleArr: ['首页', '幼儿园介绍', '宝宝活动', '出勤详情', '宝宝相册', '疫情防控'],
|
||
activeIndex: 0,
|
||
cunIndex: 0,
|
||
modeArr: [{
|
||
isActive: false,
|
||
title: '欢迎模式'
|
||
},
|
||
{
|
||
isActive: true,
|
||
title: '班牌模式'
|
||
},
|
||
{
|
||
isActive: false,
|
||
title: '大数据模式'
|
||
},
|
||
],
|
||
modeIndex: '-1',
|
||
wellcomeFlag: false, //欢迎模式
|
||
onLine: navigator.onLine,
|
||
list: [],
|
||
city: '',
|
||
date: '', //2021-12-19
|
||
week: '', //星期几
|
||
temperature: '', //天气温度
|
||
time: '', //当前时间
|
||
timer: null,
|
||
currentTemper: 1, //
|
||
activeTitle: 'activeTitle',
|
||
isNetwork: false,
|
||
weather: '',
|
||
OrgGuid: '',
|
||
logoImg: '',
|
||
classCardId: '',
|
||
infoObj: '',
|
||
name: '',
|
||
ver: 0,
|
||
s: '',
|
||
newwidth:document.body.clientWidth,
|
||
newheight:document.body.clientHeight
|
||
}
|
||
},
|
||
// metaInfo: {
|
||
// title: "页面标题",
|
||
// meta: [
|
||
// { name: "keywords", content: "页面关键字" },
|
||
// { name: "description", content: "页面描述" },
|
||
// ],
|
||
// },
|
||
methods: {
|
||
// 关闭欢迎模式
|
||
closeWellcome() {
|
||
this.wellcomeFlag = false;
|
||
this.modeIndex = 2;
|
||
this.clearChoose();
|
||
},
|
||
// 选择班牌显示模式
|
||
chooseMode(e) {
|
||
if (this.onLine) {
|
||
this.modeArr.forEach(item => {
|
||
item.isActive = false
|
||
})
|
||
this.modeArr[e].isActive = true;
|
||
if (e == 0) {
|
||
this.modeIndex = 1;
|
||
this.wellcomeFlag = true;
|
||
}
|
||
if (e == 1) {
|
||
this.modeIndex = 2;
|
||
this.wellcomeFlag = false;
|
||
}
|
||
if (e == 2) {
|
||
this.modeIndex = 4;
|
||
this.wellcomeFlag = false;
|
||
window.open(`http://47.108.248.86:56688/`,'_blank');
|
||
}
|
||
this.isNetwork = false;
|
||
this.updatemodelapiEv();
|
||
var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
|
||
var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判断是否IE<11浏览器
|
||
var isEdge = userAgent.indexOf("Edge") > -1 && !isIE; //判断是否IE的Edge浏览器
|
||
var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1;
|
||
if (isIE) {
|
||
console.log(isIE);
|
||
var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
|
||
reIE.test(userAgent);
|
||
var fIEVersion = parseFloat(RegExp["$1"]);
|
||
if (fIEVersion == 7) {
|
||
return 7;
|
||
} else if (fIEVersion == 8) {
|
||
return 8;
|
||
} else if (fIEVersion == 9) {
|
||
return 9;
|
||
} else if (fIEVersion == 10) {
|
||
return 10;
|
||
} else {
|
||
return 6; //IE版本<=7
|
||
}
|
||
} else if (isEdge) {
|
||
return 'edge'; //edge
|
||
} else if (isIE11) {
|
||
return 11; //IE11
|
||
} else {
|
||
return -1; //不是ie浏览器
|
||
}
|
||
}
|
||
},
|
||
// 导航切换
|
||
chooseTitle(e) {
|
||
this.cunIndex = this.activeIndex = e;
|
||
e == 0 ? this.activeTitle = 'activeTitle' : this.activeTitle = 'activeTitle2';
|
||
},
|
||
// 网络状态
|
||
updateOnlineStatus(e) {
|
||
const {
|
||
type
|
||
} = e;
|
||
this.onLine = type === 'online';
|
||
if (this.onLine) {
|
||
this.refreshEv();
|
||
this.weatherEv();
|
||
this.isNetwork = false;
|
||
} else {
|
||
// this.isNetwork = true;
|
||
}
|
||
},
|
||
// 天气
|
||
async weatherEv() {
|
||
// 获取时间
|
||
this.dateEv();
|
||
this.timer = setInterval(() => {
|
||
this.dateEv();
|
||
}, 1000)
|
||
if (this.$storage.get('network')) {
|
||
let data = await this.$axios({
|
||
// 调用 serviceAPI
|
||
url: this.$https.weather,
|
||
methods: "get",
|
||
params: {
|
||
EquipmentID: this.$storage.get('EquipmentID'),
|
||
},
|
||
});
|
||
if (data.data.code == 200) {
|
||
// 星期几
|
||
this.week = data.data.data.week;
|
||
this.$storage.set('week', this.week);
|
||
let newtempera = data.data.data.weather.result.forecasts[0];
|
||
// 当天气温
|
||
this.temperature = `${newtempera.low}-${newtempera.high}°C`;
|
||
this.$storage.set('temperature', this.temperature);
|
||
this.weather = require(`../../static/img/weather/2.png`);
|
||
let weatherObj = '晴|多云|阴|阵雨|'
|
||
// let text = data.data.data.weather.result.now.text;
|
||
let text = newtempera.text_day;
|
||
if (
|
||
text == "阵雨" ||
|
||
text == "小雨" ||
|
||
text == "中雨" ||
|
||
text == "大雨" ||
|
||
text == "暴雨" ||
|
||
text == "大暴雨" ||
|
||
text == "特大暴雨" ||
|
||
text == "小雨转中雨" ||
|
||
text == "中雨转大雨" ||
|
||
text == "大雨转暴雨" ||
|
||
text == "暴雨转大暴雨" ||
|
||
text == "大暴雨转特大暴雨"
|
||
) {
|
||
this.weather = require(`../../static/img/weather/2.png`); //有雨
|
||
} else if (text == "阴") {
|
||
this.weather = require(`../../static/img/weather/1.png`); //阴天
|
||
} else if (text == "多云") {
|
||
this.weather = require(`../../static/img/weather/3.png`); //多云
|
||
} else if (text == "雷阵雨" || text == "雷阵雨伴有冰雹") {
|
||
this.weather = require(`../../static/img/weather/4.png`); //雷阵雨
|
||
} else if (text == "晴") {
|
||
this.weather = require(`../../static/img/weather/5.png`); //晴
|
||
} else if (
|
||
text == "雨夹雪" ||
|
||
text == "小雪" ||
|
||
text == "中雪" ||
|
||
text == "大雪" ||
|
||
text == "暴雪"
|
||
) {
|
||
this.weather = require(`../../static/img/weather/9.png`); //雨夹雪
|
||
} else {
|
||
this.weather = require(`../../static/img/weather/1.png`) //晴
|
||
}
|
||
this.$storage.set('weather', this.weather);
|
||
}
|
||
} else {
|
||
this.weather = this.$storage.get('weather');
|
||
this.week = this.$storage.get('week');
|
||
this.temperature = this.$storage.get('temperature');
|
||
this.time = this.$storage.get('time');
|
||
}
|
||
|
||
},
|
||
// 当前时间
|
||
dateEv() {
|
||
let date = new Date();
|
||
// 年
|
||
let year = date.getFullYear();
|
||
// 月
|
||
let month = date.getMonth() + 1;
|
||
// 日
|
||
let day = date.getDate();
|
||
this.date = `${year}-${month<10?'0'+ month: month}-${day<10?'0'+ day: day}`;
|
||
// 时
|
||
let hour = date.getHours();
|
||
// 分
|
||
let minute = date.getMinutes();
|
||
// 当前时间
|
||
this.time = `${hour < 10 ? '0'+hour : hour}:${minute < 10 ? '0'+minute : minute}`;
|
||
this.$storage.set('time', this.time);
|
||
},
|
||
// 右上角按钮点击
|
||
clickFun() {
|
||
this.isNetwork = !this.isNetwork;
|
||
this.clearChoose();
|
||
this.classcardByIdEv();
|
||
},
|
||
// 全部不选中
|
||
clearChoose() {
|
||
this.modeArr.forEach(item => {
|
||
item.isActive = false;
|
||
})
|
||
},
|
||
// 刷新
|
||
refreshEv() {
|
||
this.activeIndex = '-1';
|
||
if (this.onLine) {
|
||
setTimeout(() => {
|
||
this.isNetwork = false;
|
||
}, 100)
|
||
}
|
||
setTimeout(() => {
|
||
this.activeIndex = this.cunIndex;
|
||
}, 100)
|
||
this.clearChoose();
|
||
},
|
||
// 返回首页
|
||
backHomeEv() {
|
||
this.activeIndex = '-1';
|
||
if (this.onLine) {
|
||
this.isNetwork = false;
|
||
}
|
||
setTimeout(() => {
|
||
this.activeIndex = 0;
|
||
}, 100)
|
||
this.clearChoose();
|
||
},
|
||
// 获取班牌模式
|
||
async classcardByIdEv() {
|
||
if (this.$storage.get('network')) {
|
||
let data = await this.$axios({
|
||
// 调用 serviceAPI
|
||
url: this.$https.classcardById,
|
||
methods: "get",
|
||
params: {
|
||
EquipmentID: this.$storage.get('EquipmentID'),
|
||
},
|
||
});
|
||
let modeObj = data.data.data;
|
||
if (modeObj != null) {
|
||
this.clearChoose();
|
||
if (modeObj.Mode == 1) {
|
||
this.modeArr[0].isActive = true;
|
||
this.wellcomeFlag = true;
|
||
} else if (modeObj.Mode == 2 || modeObj.Mode == 0) {
|
||
this.modeArr[1].isActive = true;
|
||
this.wellcomeFlag = false;
|
||
} else if (modeObj.Mode == 4) {
|
||
this.modeArr[2].isActive = true;
|
||
this.wellcomeFlag = false;
|
||
window.location.href = `./averydaydata/wisdomMedic.html`;
|
||
}
|
||
this.$storage.set('wellcomeFlag', this.wellcomeFlag);
|
||
this.$storage.set('orgGuid', modeObj.OrgGuid);
|
||
} else {
|
||
this.modeArr[1].isActive = true;
|
||
}
|
||
} else {
|
||
this.modeArr[1].isActive = true;
|
||
if (this.$storage.get('wellcomeFlag') != undefined) {
|
||
this.wellcomeFlag = this.$storage.get('wellcomeFlag');
|
||
}
|
||
}
|
||
|
||
},
|
||
// 设置班牌模式
|
||
async updatemodelapiEv() {
|
||
if (this.$storage.get('network')) {
|
||
let data = await this.$axios({
|
||
// 调用 serviceAPI
|
||
url: this.$https.updatemodelapi,
|
||
methods: "get",
|
||
params: {
|
||
Mode: this.modeIndex,
|
||
OrgGuid: storage.get('orgGuid')
|
||
},
|
||
});
|
||
}
|
||
},
|
||
// 获取设备型号(设备id)
|
||
obtainEv() {
|
||
let Build = plus.android.importClass("android.os.Build");
|
||
let serial = Build.SERIAL;
|
||
this.$storage.set('EquipmentID',Build.SERIAL);
|
||
// this.$storage.set('EquipmentID','B520P2RXM0');
|
||
this.classCardId = this.$storage.get('EquipmentID');
|
||
this.weatherEv();
|
||
this.introduce();
|
||
this.classcardByIdEv();
|
||
setInterval(() => {
|
||
this.classcardByIdEv();
|
||
this.introduce();
|
||
}, 1000 * 60)
|
||
},
|
||
plusReady() {
|
||
var that = this;
|
||
// 手机有效
|
||
that.obtainEv();
|
||
if(plus.networkinfo.getCurrentType()!=1){
|
||
that.$storage.set('network', true);
|
||
that.onLine = true;
|
||
} else {
|
||
that.onLine = false;
|
||
}
|
||
//网络更改
|
||
document.addEventListener("netchange", function(res) {
|
||
var network = plus.networkinfo.getCurrentType();
|
||
if (network == 1) {
|
||
// that.isNetwork = true;
|
||
that.$storage.set('network', false);
|
||
that.onLine = false;
|
||
// plus.nativeUI.toast('您的网络已断开');
|
||
} else {
|
||
that.activeIndex = '-1';
|
||
setTimeout(() => {
|
||
that.activeIndex = that.cunIndex;
|
||
}, 100)
|
||
that.isNetwork = false;
|
||
that.$storage.set('network', true);
|
||
that.obtainEv();
|
||
that.onLine = true;
|
||
}
|
||
})
|
||
},
|
||
// logo图标
|
||
async introduce() {
|
||
if (this.$storage.get('network')) {
|
||
this.showError = false;
|
||
this.logoImg = this.$storage.get('logoImg');
|
||
let data = await this.$axios({
|
||
// 调用 serviceAPI
|
||
url: this.$https.mechanism,
|
||
methods: "get",
|
||
params: {
|
||
EquipmentID: this.$storage.get('EquipmentID'),
|
||
},
|
||
});
|
||
if (data.data.data != undefined) {
|
||
this.logoImg = data.data.data.Img_Url;
|
||
this.$storage.set('logoImg', this.logoImg);
|
||
}
|
||
} else {
|
||
this.logoImg = this.$storage.get('logoImg');
|
||
}
|
||
},
|
||
},
|
||
mounted() {
|
||
var that = this;
|
||
setTimeout(() => {
|
||
that.plusReady();
|
||
}, 500)
|
||
}
|
||
}
|
||
</script>
|