293 lines
7.5 KiB
Vue
293 lines
7.5 KiB
Vue
<template>
|
||
<div class="h100vh w100vw">
|
||
<div class="header flex items-center justify-between">
|
||
<div class="productionday flex items-center">
|
||
<img src="@/assets/images/projectLogo.png" alt="" />
|
||
<div class="flex items-center">
|
||
<!-- <img src="@/assets/images/projectday.png" alt="" /> -->
|
||
<div class="days">安全生产天数：</div>
|
||
<div class="num">{{ safetyDay }}</div>
|
||
<div class="unit">天</div>
|
||
<!-- <img src="@/assets/images/days.png" alt="" /> -->
|
||
</div>
|
||
</div>
|
||
<div class="title">XXX智慧工地管理平台</div>
|
||
<div class="calendar flex items-center">
|
||
<WeatherListScroll :items="weatherData" class="weatherList" :interval="3500" v-if="weatherData.length">
|
||
<template #default="{ item, index }">
|
||
<div class="flex items-center">
|
||
<div class="Weather text-white flex items-center">
|
||
<img :src="`../../../src/assets/images/${weatherimgUrl(item)}.png`" alt="" />
|
||
<div>
|
||
<div class="textBlack">{{ item.dayStatus + ' ' }} </div>
|
||
<div class="robotocondensed">{{ item.tempMin }}°/{{ item.tempMax }}°</div>
|
||
</div>
|
||
</div>
|
||
<div class="weeks">
|
||
<span class="textBlack">{{ item.week }} (</span>
|
||
<span class="robotocondensed">{{ item.date }}</span>
|
||
<span class="textBlack">)</span>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</WeatherListScroll>
|
||
<div class="Segmentation">
|
||
<div class="bg-#43E2CB"></div>
|
||
<div class="bg-#43E2CB"></div>
|
||
</div>
|
||
<div class="goHome flex items-center cursor-pointer" @click="goHome">
|
||
<img src="@/assets/images/setting.png" alt="" />
|
||
<div>管理系统</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="content">
|
||
<Map></Map>
|
||
<leftMain></leftMain>
|
||
<RightMain></RightMain>
|
||
<Carousel></Carousel>
|
||
<div class="topShaow"></div>
|
||
<div class="bottomShaow"></div>
|
||
<div class="leftShaow"></div>
|
||
<div class="rightShaow"></div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import router from '@/router';
|
||
//底部轮播
|
||
import Carousel from './component/carousel.vue';
|
||
//左侧
|
||
import LeftMain from './component/leftMain.vue';
|
||
//地图
|
||
import Map from './component/map.vue';
|
||
//右侧
|
||
import RightMain from './component/rightMain.vue';
|
||
//天气
|
||
import WeatherListScroll from './component/weatherListScroll.vue';
|
||
import { getSafetyDay, getweatherList } from '@/api/gis';
|
||
import { useUserStoreHook } from '@/store/modules/user';
|
||
const userStore = useUserStoreHook();
|
||
const currentProject = computed(() => userStore.selectedProject);
|
||
const weatherData = ref([]);
|
||
const safetyDay = ref(null);
|
||
const goHome = () => {
|
||
let routeUrl = router.resolve({
|
||
path: '/index'
|
||
});
|
||
window.open(routeUrl.href, 'index');
|
||
};
|
||
//获取天气
|
||
const getweatherData = async () => {
|
||
const res = await getweatherList(currentProject.value?.id);
|
||
weatherData.value = res.data;
|
||
};
|
||
//获取生产天数
|
||
const getProductionDays = async () => {
|
||
const res = await getSafetyDay(currentProject.value?.id);
|
||
safetyDay.value = res.data.safetyDay.toLocaleString();
|
||
};
|
||
//获取白天或夜晚
|
||
const weatherimgUrl = computed(() => (item) => {
|
||
let startTime = item.sunRise; // 开始时间
|
||
let endTime = item.sunSet; // 结束时间
|
||
// 获取当前时间
|
||
const now = new Date();
|
||
|
||
// 解析开始时间和结束时间（格式：HH:MM）
|
||
const [startHours, startMinutes] = startTime.split(':').map(Number);
|
||
const [endHours, endMinutes] = endTime.split(':').map(Number);
|
||
|
||
// 创建今天的开始时间和结束时间对象
|
||
const start = new Date(now.getFullYear(), now.getMonth(), now.getDate(), startHours, startMinutes);
|
||
const end = new Date(now.getFullYear(), now.getMonth(), now.getDate(), endHours, endMinutes);
|
||
|
||
// 如果结束时间早于开始时间，将结束时间设为明天
|
||
if (end <= start) {
|
||
end.setDate(end.getDate() + 1);
|
||
}
|
||
|
||
// 判断当前时间是否在区间内
|
||
if (now >= start && now <= end) {
|
||
return item.dayIcon;
|
||
} else {
|
||
return item.nightIcon;
|
||
}
|
||
});
|
||
|
||
onMounted(() => {
|
||
getweatherData();
|
||
getProductionDays();
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
@import './css/gis.scss';
|
||
|
||
.header {
|
||
background-image: url('@/assets/images/header.png');
|
||
height: vh(92.58);
|
||
padding: 0 vw(20);
|
||
width: vw(1920);
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 100%;
|
||
position: relative;
|
||
z-index: 2;
|
||
}
|
||
.leftShaow {
|
||
position: absolute;
|
||
left: 0px;
|
||
top: 0;
|
||
width: vw(548);
|
||
height: 100vh;
|
||
opacity: 1;
|
||
background: linear-gradient(90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.39) 77.51%, rgba(0, 0, 0, 0.2) 92.05%, rgba(0, 0, 0, 0) 100%);
|
||
}
|
||
.bottomShaow {
|
||
position: absolute;
|
||
right: 0px;
|
||
bottom: 0;
|
||
height: vh(158);
|
||
width: 100vw;
|
||
opacity: 1;
|
||
background: linear-gradient(0deg, rgba(8, 14, 15, 1) 0%, rgba(8, 14, 15, 0.4) 60.42%, rgba(8, 14, 15, 0) 100%);
|
||
}
|
||
|
||
.rightShaow {
|
||
position: absolute;
|
||
right: 0px;
|
||
top: 0;
|
||
width: vw(515);
|
||
height: 100vh;
|
||
opacity: 1;
|
||
background: linear-gradient(270deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.39) 77.51%, rgba(0, 0, 0, 0.2) 92.05%, rgba(0, 0, 0, 0) 100%);
|
||
}
|
||
|
||
.topShaow {
|
||
position: absolute;
|
||
left: 0px;
|
||
top: 0;
|
||
width: 100vw;
|
||
height: vh(131);
|
||
opacity: 1;
|
||
background: linear-gradient(180deg, rgba(0, 0, 0, 0.8) 0%, rgba(1, 26, 33, 0) 100%);
|
||
}
|
||
.calendar {
|
||
padding-top: vh(14);
|
||
font-size: vw(16);
|
||
.Weather {
|
||
margin-right: vw(20);
|
||
> div {
|
||
min-width: vw(88);
|
||
display: flex;
|
||
align-items: center;
|
||
flex-wrap: nowrap;
|
||
max-width: vw(174);
|
||
}
|
||
img {
|
||
width: vw(50);
|
||
}
|
||
}
|
||
.Segmentation {
|
||
margin: 0 vw(20);
|
||
> div {
|
||
width: vw(3);
|
||
height: vh(10);
|
||
&:first-child {
|
||
margin-bottom: vw(4);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.title {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
margin: auto;
|
||
width: vw(579);
|
||
height: vh(92.58);
|
||
line-height: vh(92.58);
|
||
text-align: center;
|
||
font-family: 'DOUYUFont';
|
||
color: rgba(255, 255, 255, 1);
|
||
font-size: vw(32);
|
||
}
|
||
|
||
.productionday {
|
||
height: vh(48);
|
||
img:first-child {
|
||
margin-right: vw(8);
|
||
}
|
||
> div {
|
||
height: vh(39);
|
||
div {
|
||
height: 100%;
|
||
line-height: vh(48);
|
||
vertical-align: bottom;
|
||
}
|
||
.unit {
|
||
font-family: '思源黑体';
|
||
text-shadow: 0px 1.24px 6.21px rgba(25, 179, 250, 1);
|
||
font-size: vw(14);
|
||
color: rgba(255, 255, 255, 1);
|
||
}
|
||
.num {
|
||
font-family: 'Roboto';
|
||
font-size: vw(28);
|
||
font-weight: 700;
|
||
max-width: vw(73);
|
||
color: rgba(255, 255, 255, 1);
|
||
text-shadow: 0px 1.24px 6.21px rgba(25, 179, 250, 1);
|
||
padding-bottom: vh(40);
|
||
margin-right: vw(5);
|
||
}
|
||
.days {
|
||
font-family: '思源黑体';
|
||
font-size: vw(16);
|
||
color: rgba(255, 255, 255, 1);
|
||
}
|
||
}
|
||
}
|
||
|
||
.goHome {
|
||
height: vh(23);
|
||
width: vw(112);
|
||
color: rgba(217, 231, 255, 1);
|
||
font-family: 'DOUYUFont';
|
||
font-size: vw(16);
|
||
img {
|
||
width: vw(20);
|
||
margin-right: vw(8);
|
||
}
|
||
div {
|
||
line-height: vh(23);
|
||
padding-top: vh(7);
|
||
}
|
||
}
|
||
|
||
.content {
|
||
}
|
||
|
||
.robotocondensed {
|
||
font-weight: 700;
|
||
letter-spacing: 0;
|
||
color: rgba(230, 247, 255, 1);
|
||
text-align: right;
|
||
font-family: 'Roboto Condensed';
|
||
}
|
||
|
||
.textBlack {
|
||
letter-spacing: 0;
|
||
line-height: vw(23.17);
|
||
color: rgba(230, 247, 255, 1);
|
||
font-family: '思源黑体';
|
||
width: auto;
|
||
max-width: vw(174);
|
||
white-space: nowrap;
|
||
}
|
||
</style>
|