418 lines
10 KiB
Vue
418 lines
10 KiB
Vue
<template>
|
||
<div class="homePage">
|
||
<!-- <div class="homePage_title" @click="routerClick">
|
||
<div>智慧仓储管理平台</div>
|
||
</div> -->
|
||
<div class="container">
|
||
<!-- 左侧数据模块列表 -->
|
||
<div class="leftModuleBox">
|
||
<LeftOne></LeftOne>
|
||
<LeftTwo></LeftTwo>
|
||
<LeftThree></LeftThree>
|
||
</div>
|
||
|
||
<!-- 中间3D效果展示 -->
|
||
<div class="centerModuleBox">
|
||
<div class="homePage-fold">
|
||
<CenterFold></CenterFold>
|
||
</div>
|
||
<div class="center-top">
|
||
<CountryMap></CountryMap>
|
||
</div>
|
||
<div class="center-bottom">
|
||
<CenterBottom></CenterBottom>
|
||
</div>
|
||
<div class="buttom-box">
|
||
<div class="buttonTop">
|
||
<div
|
||
:class="maType == 1 ? 'on' : ''"
|
||
class="buttom1"
|
||
@click="getMapSelect(1)"
|
||
>
|
||
施工机具
|
||
</div>
|
||
<div
|
||
:class="maType == 2 ? 'on' : ''"
|
||
class="buttom1"
|
||
@click="getMapSelect(2)"
|
||
>
|
||
工器具
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 右侧数据模块列表 -->
|
||
<div class="rightModuleBox">
|
||
<RightOne></RightOne>
|
||
<rightTwo></rightTwo>
|
||
<rightThree></rightThree>
|
||
<RightFour></RightFour>
|
||
</div>
|
||
</div>
|
||
<!-- 获取天气 -->
|
||
<div class="weather">
|
||
<div class="weather_box">
|
||
<div><img alt="" src="../../assets/img/myImage//time.png" /></div>
|
||
<div class="dateTimeString">{{ dateTimeString }}</div>
|
||
<!-- <div class="weatherData">
|
||
<img class="weatherUrl" :src="weatherUrl" alt="" /><span
|
||
class="weather_title"
|
||
>{{ weatherData.weather }}</span
|
||
><span>{{ weatherData.temperature }}℃</span>
|
||
</div> -->
|
||
</div>
|
||
</div>
|
||
<div class="sound">
|
||
<img src="../../assets/img/myImage/sound.png" alt="" />
|
||
</div>
|
||
<div class="wrap">
|
||
<div id="inner">
|
||
<span id="first" v-for="(item, index) of transformList" :key="index">{{
|
||
'检修预警提示：' +
|
||
item.machineName +
|
||
'下次检修日期：' +
|
||
item.nextCheckTime +
|
||
'，请注意查收！'
|
||
}}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import LeftOne from '../../components/home/leftOne.vue'
|
||
import LeftTwo from '../../components/home/leftTwo.vue'
|
||
import LeftThree from '../../components/home/leftThree.vue'
|
||
import RightOne from '../../components/home/rightOne.vue'
|
||
import rightTwo from '../../components/home/rightTwo.vue'
|
||
import rightThree from '../../components/home/rightThree.vue'
|
||
import RightFour from '../../components/home/rightFour.vue'
|
||
import CenterBottom from '../../components/home/centerBottom.vue'
|
||
import CenterTop from '../../components/home/centerTop.vue'
|
||
import CountryMap from '../../components/home/countryMap.vue'
|
||
import CenterFold from '../../components/home/centerFold.vue'
|
||
import { getMaintenanceWarningApi } from "../../api/screen";
|
||
export default {
|
||
components: {
|
||
LeftOne,
|
||
LeftTwo,
|
||
LeftThree,
|
||
RightOne,
|
||
rightTwo,
|
||
rightThree,
|
||
RightFour,
|
||
CenterBottom,
|
||
CenterTop,
|
||
CountryMap,
|
||
CenterFold
|
||
},
|
||
name: 'Home',
|
||
data() {
|
||
return {
|
||
dateTimeString: '',
|
||
weatherData: {},
|
||
weatherUrl: '',
|
||
maType: 1,
|
||
// 您有一条检修预警提示，请注意查收！
|
||
transformList: []
|
||
}
|
||
},
|
||
created() {
|
||
// const map = new BMap.Map('map-container')
|
||
// this.map = map
|
||
},
|
||
|
||
mounted() {
|
||
this.getCurrentDateTime()
|
||
setInterval(this.getCurrentDateTime, 1000)
|
||
// let that = this
|
||
// AMap.plugin('AMap.CitySearch', function () {
|
||
// var citySearch = new AMap.CitySearch()
|
||
// citySearch.getLocalCity(function (status, result) {
|
||
// if (status === 'complete' && result.info === 'OK') {
|
||
// AMap.plugin('AMap.Weather', function () {
|
||
// var weather = new AMap.Weather();
|
||
// weather.getLive('宁夏回族自治区', function (err, data) {
|
||
// // console.log(err, data);
|
||
// that.weatherData = data
|
||
// that.weatherUrl = data.weather == '晴' ? ONE : data.weather == '多云' ? TWO : data.weather == '中雪' ? THREE : ''
|
||
// });
|
||
// })
|
||
// }
|
||
// })
|
||
// })
|
||
// this.getWeather()
|
||
this.getMapSelect(this.maType)
|
||
getMaintenanceWarningApi().then(res => {
|
||
this.transformList = res.data
|
||
})
|
||
|
||
},
|
||
methods: {
|
||
routerClick() {
|
||
this.$router.go()
|
||
},
|
||
getMapSelect(type) {
|
||
if (type == 1) {
|
||
this.maType = 1
|
||
this.$nextTick(() => {
|
||
this.$eventBus.$emit('maType', this.maType)
|
||
})
|
||
} else {
|
||
this.maType = 2
|
||
this.$nextTick(() => {
|
||
this.$eventBus.$emit('maType', this.maType)
|
||
})
|
||
}
|
||
},
|
||
async getWeather() {
|
||
try {
|
||
const res = await axios.get(
|
||
'https://api.map.baidu.com/weather/v1/?district_id=110000&data_type=all&ak=YOUR_AK'
|
||
)
|
||
// 处理返回结果
|
||
} catch (error) {
|
||
console.error(error)
|
||
}
|
||
},
|
||
getCurrentDateTime() {
|
||
const date = new Date()
|
||
const year = date.getFullYear()
|
||
const month = (date.getMonth() + 1).toString().padStart(2, '0')
|
||
const day = date.getDate().toString().padStart(2, '0')
|
||
const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
|
||
const weekday = weekdays[date.getDay()]
|
||
const hours = date.getHours().toString().padStart(2, '0')
|
||
const minutes = date.getMinutes().toString().padStart(2, '0')
|
||
const seconds = date.getSeconds().toString().padStart(2, '0')
|
||
const dateTimeString = `${year}/${month}/${day} ${weekday} ${hours}:${minutes}:${seconds}`
|
||
this.dateTimeString = dateTimeString
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang='less' scoped>
|
||
.homePage {
|
||
width: 1920px;
|
||
height: 1080px;
|
||
background: url(../../assets/img/myImage/screenBg.png) no-repeat center;
|
||
background-size: 100% 100%;
|
||
color: #fff;
|
||
position: relative;
|
||
// .homePage_title {
|
||
// position: absolute;
|
||
// left: 40.3%;
|
||
// // top: 27%;
|
||
// div {
|
||
// width: 410px;
|
||
// height: 55px;
|
||
// font-size: 40px;
|
||
// font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
|
||
// font-weight: 800;
|
||
// line-height: 60px;
|
||
// letter-spacing: 8px;
|
||
// text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.25);
|
||
// background-image: linear-gradient(
|
||
// to bottom,
|
||
// #f6fcff 50%,
|
||
// #a5deff 75%; #69c9ff 100%
|
||
// );
|
||
// color: transparent;
|
||
// background-clip: text;
|
||
// }
|
||
// }
|
||
|
||
.weather {
|
||
position: absolute;
|
||
left: 72%;
|
||
top: 5%;
|
||
|
||
.weather_box {
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-content: center;
|
||
flex-wrap: nowrap;
|
||
|
||
.dateTimeString {
|
||
font-size: 14px;
|
||
font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
line-height: 18px;
|
||
letter-spacing: 0.1em;
|
||
margin-left: 5px;
|
||
}
|
||
|
||
.weatherData {
|
||
line-height: 19px;
|
||
margin-left: 10px;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.weatherUrl {
|
||
width: 16px;
|
||
height: 16px;
|
||
}
|
||
|
||
.weather_title {
|
||
display: inline-block;
|
||
margin: 0 15px 0 10px;
|
||
font-size: 14px;
|
||
font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.sound {
|
||
position: absolute;
|
||
left: 2%;
|
||
top: 6%;
|
||
width: 32px;
|
||
height: 32px;
|
||
background: #183b79;
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
.wrap {
|
||
position: absolute;
|
||
left: 3.6%;
|
||
top: 6%;
|
||
width: 380px;
|
||
height: 32px;
|
||
white-space: nowrap;
|
||
background: linear-gradient(
|
||
to right,
|
||
#183b79 0%,
|
||
#669cd8 50%,
|
||
#183b79 100%
|
||
);
|
||
overflow: hidden;
|
||
|
||
#inner {
|
||
position: absolute;
|
||
left: 4%;
|
||
top: 6%;
|
||
padding-left: 40px;
|
||
animation: slide 15s linear infinite;
|
||
overflow: hidden;
|
||
}
|
||
|
||
#first {
|
||
display: inline-block;
|
||
padding-left: 40px;
|
||
font-size: 18px;
|
||
line-height: 28px;
|
||
letter-spacing: 2px;
|
||
font-family: Alibaba PuHuiTi, AlibabaPuHuiTi;
|
||
color: #f8503a;
|
||
}
|
||
|
||
@keyframes slide {
|
||
0% {
|
||
transform: translateX(0);
|
||
}
|
||
100% {
|
||
transform: translateX(-50%);
|
||
}
|
||
}
|
||
}
|
||
|
||
.container {
|
||
display: flex;
|
||
width: 100%;
|
||
min-height: calc(100vh - 85px);
|
||
margin-top: 104px;
|
||
|
||
.leftModuleBox {
|
||
flex: 1;
|
||
padding-left: 26px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.centerModuleBox {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
flex-wrap: wrap;
|
||
margin: 0 15px;
|
||
position: relative;
|
||
|
||
.homePage-fold {
|
||
position: absolute;
|
||
left: 45%;
|
||
top: -2%;
|
||
width: 949px;
|
||
z-index: 2000;
|
||
}
|
||
|
||
.buttom-box {
|
||
position: absolute;
|
||
left: 72%;
|
||
top: 59%;
|
||
|
||
.buttonTop {
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
:first-child {
|
||
margin-right: 10px;
|
||
}
|
||
}
|
||
|
||
.buttom1 {
|
||
width: 129px;
|
||
height: 56px;
|
||
background: url(../../assets/img/myImage/no_active.png) no-repeat
|
||
center;
|
||
background-size: 100% 100%;
|
||
text-align: center;
|
||
line-height: 56px;
|
||
border-radius: 4px;
|
||
font-size: 16px;
|
||
color: #979bb2;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.buttom1.on {
|
||
width: 129px;
|
||
height: 56px;
|
||
background: url(../../assets/img/myImage/active.png) no-repeat center;
|
||
background-size: 100% 100%;
|
||
text-align: center;
|
||
line-height: 56px;
|
||
border-radius: 4px;
|
||
font-size: 16px;
|
||
color: #fff;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
}
|
||
|
||
.center-top {
|
||
height: 655px;
|
||
}
|
||
|
||
.center-bottom {
|
||
min-height: calc(100vh - 85px - 655px);
|
||
}
|
||
|
||
.rightModuleBox {
|
||
display: flex;
|
||
flex-direction: column;
|
||
flex-wrap: wrap;
|
||
padding-right: 26px;
|
||
}
|
||
|
||
.item {
|
||
margin-bottom: 12px;
|
||
}
|
||
}
|
||
}
|
||
</style>
|