fuguobin
1 year ago
@ -0,0 +1,12 @@ |
|||||
|
@font-face { |
||||
|
font-family: 'YouSheBiaoTiHei'; |
||||
|
src: url('YouSheBiaoTiHei.ttf') format('truetype'); |
||||
|
} |
||||
|
@font-face { |
||||
|
font-family: 'AlibabaPuHuiTiRegular'; |
||||
|
src: url('AlibabaPuHuiTiRegular.ttf') format('truetype'); |
||||
|
} |
||||
|
@font-face { |
||||
|
font-family: 'AlibabaPuHuiTiBold'; |
||||
|
src: url('AlibabaPuHuiTiBold.ttf') format('truetype'); |
||||
|
} |
||||
|
After Width: | Height: | Size: 2.7 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 853 B |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 496 B |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 382 B |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 896 B |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 544 B |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 91 KiB |
|
Before Width: | Height: | Size: 177 KiB |
|
After Width: | Height: | Size: 929 KiB |
|
After Width: | Height: | Size: 356 B |
|
After Width: | Height: | Size: 89 KiB |
|
After Width: | Height: | Size: 30 KiB |
@ -0,0 +1,198 @@ |
|||||
|
<template> |
||||
|
<div class="title"> |
||||
|
<h3>{{ titleData }}</h3> |
||||
|
</div> |
||||
|
<div class="weather"> |
||||
|
<div class="time"> |
||||
|
{{ currentTime }} {{ lunarDay.ncWeek }} |
||||
|
</div> |
||||
|
<div class="line"></div> |
||||
|
<div class="forecast"> |
||||
|
<span>{{ weatherData.city }}：{{ weatherData.weather }} {{ weatherData.temperature }}℃</span> |
||||
|
<svg-icon class="weatherSvg" :icon-class="weatherData.weatherImg" /> |
||||
|
<!-- <img src="../../../assets/images/weather/duoyun.png" /> --> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="seeting"> |
||||
|
<n-tooltip trigger="hover" v-if="settingShow"> |
||||
|
<template #trigger> |
||||
|
<n-button class="tooltips" circle quaternary @click="showClick"> |
||||
|
<template #icon> |
||||
|
<n-icon> |
||||
|
<Settings /> |
||||
|
</n-icon> |
||||
|
</template> |
||||
|
</n-button> |
||||
|
</template> |
||||
|
显示项 |
||||
|
</n-tooltip> |
||||
|
<n-tooltip trigger="hover"> |
||||
|
<template #trigger> |
||||
|
<n-button class="tooltips" circle quaternary @click="returnBack"> |
||||
|
<template #icon> |
||||
|
<n-icon> |
||||
|
<Power /> |
||||
|
</n-icon> |
||||
|
</template> |
||||
|
</n-button> |
||||
|
</template> |
||||
|
返回首页 |
||||
|
</n-tooltip> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script lang="ts" setup> |
||||
|
import { getWeather } from '@/api/user/index'; |
||||
|
import { Filter, Maximize, Settings, Power } from '@vicons/tabler'; |
||||
|
import { useDateFormat, useNow } from '@vueuse/core'; |
||||
|
const currentTime = useDateFormat(useNow(), 'YYYY-MM-DD HH:mm:ss'); |
||||
|
import calendar from '@/utils/lunar'; |
||||
|
const emit = defineEmits(['showModalClick', 'returnClick']); |
||||
|
const timer = ref() |
||||
|
const isCurrentRoute = ref(true) |
||||
|
|
||||
|
const weatherData = ref( |
||||
|
{ city: "", weather: "", temperature: "", weatherImg: "" } |
||||
|
); |
||||
|
|
||||
|
const lunarDay: any = calendar.solarToLunar( |
||||
|
useNow().value.getUTCFullYear(), |
||||
|
useNow().value.getUTCMonth() + 1, |
||||
|
useNow().value.getUTCDate() |
||||
|
); |
||||
|
const props = defineProps({ |
||||
|
titleData: { |
||||
|
type: String, |
||||
|
default: '数据大屏', |
||||
|
}, |
||||
|
settingShow: { |
||||
|
type: Boolean, |
||||
|
default: false |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
onMounted(() => { |
||||
|
getWeatherData() |
||||
|
}); |
||||
|
|
||||
|
function showClick() { |
||||
|
//显示/隐藏表格配置栏 |
||||
|
emit('showModalClick', true); |
||||
|
// showModal.value = true; |
||||
|
} |
||||
|
function returnBack() { |
||||
|
//返回首页 |
||||
|
emit('returnClick', ''); |
||||
|
// router.replace("/dashboard") |
||||
|
} |
||||
|
|
||||
|
// function getWeatherData() { |
||||
|
// //获取天气 |
||||
|
// getWeather().then((res: any) => { |
||||
|
// if (res.code === 200) { |
||||
|
// weatherData.value = res.data; |
||||
|
// } |
||||
|
// }); |
||||
|
// } |
||||
|
|
||||
|
function getWeatherData() { |
||||
|
//获取天气 |
||||
|
getWeather().then((res: any) => { |
||||
|
if (res.code === 200) { |
||||
|
if (isCurrentRoute) { |
||||
|
timer.value = setTimeout(async () => { |
||||
|
await (timer.value && clearTimeout(timer.value)); |
||||
|
await getWeatherData(); |
||||
|
}, 600000) |
||||
|
} |
||||
|
weatherData.value = res.data; |
||||
|
} else { |
||||
|
clearTimeout(timer.value); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.header { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
// height: 5.7rem; |
||||
|
|
||||
|
.title { |
||||
|
width: 80%; |
||||
|
background: url(@/assets/images/title-bg.png); |
||||
|
background-size: 100%; |
||||
|
text-align: center; |
||||
|
padding-bottom: 38px; |
||||
|
margin: 0 auto; |
||||
|
|
||||
|
h3 { |
||||
|
font-size: 38px; |
||||
|
font-family: 'YouSheBiaoTiHei'; |
||||
|
font-weight: 400; |
||||
|
letter-spacing: 4px; |
||||
|
background: linear-gradient(180deg, #FEFDFF 0%, #95DAFF 97%); |
||||
|
background-clip: text; |
||||
|
-webkit-background-clip: text; |
||||
|
-webkit-text-fill-color: transparent; |
||||
|
margin: 0; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.weather { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
position: absolute; |
||||
|
top: 2.5rem; |
||||
|
left: 7rem; |
||||
|
color: #B2D4FF; |
||||
|
font-size: 1.8rem; |
||||
|
line-height: 2.2rem; |
||||
|
font-family: 'AlibabaPuHuiTiRegular'; |
||||
|
|
||||
|
.line { |
||||
|
width: 2px; |
||||
|
height: 2rem; |
||||
|
background: linear-gradient(to top, #000E38, #1EA8DD, #000E38); |
||||
|
margin: 0 1rem; |
||||
|
} |
||||
|
|
||||
|
.forecast { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
|
||||
|
.weatherSvg { |
||||
|
width: 1.5em !important; |
||||
|
height: 1.5em !important; |
||||
|
margin-left: 10px; |
||||
|
} |
||||
|
|
||||
|
// img { |
||||
|
// width: 25px; |
||||
|
// margin-left: 10px; |
||||
|
// } |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.seeting { |
||||
|
position: absolute; |
||||
|
top: 2.5rem; |
||||
|
right: 7rem; |
||||
|
|
||||
|
.tooltips { |
||||
|
width: 36px; |
||||
|
height: 36px; |
||||
|
background: linear-gradient(180deg, #003269 1%, rgba(3, 79, 163, 0.2314) 56%, #003269 100%); |
||||
|
border-radius: 0px 0px 0px 0px; |
||||
|
opacity: 1; |
||||
|
|
||||
|
:deep(span) { |
||||
|
color: #5beff9; |
||||
|
} |
||||
|
|
||||
|
margin-left: 10px; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,66 @@ |
|||||
|
<template> |
||||
|
<div class="infoPanel"> |
||||
|
<swiper class="swiper" :loop="true" |
||||
|
:autoplay="{ delay: 500000, pauseOnMouseEnter: true, disableOnInteraction: false }" :modules="modules" |
||||
|
:slides-per-view="4" :space-between="15" navigation :pagination="{ clickable: true }"> |
||||
|
<swiper-slide class="item" v-for="(item, index) in panelData" :key="index"> |
||||
|
<div class="content"> |
||||
|
<div class="icon"> |
||||
|
<img src="@/assets/images/menu_bg.png" /> |
||||
|
</div> |
||||
|
<div class="numValue"> |
||||
|
<span> |
||||
|
<countTo :start="1" :end="item.value" :duration="3000"></countTo> |
||||
|
</span> |
||||
|
<i>{{ item.ext }}</i> |
||||
|
<p>{{ item.title }}</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
</swiper-slide> |
||||
|
</swiper> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script lang="ts" setup> |
||||
|
import { Swiper, SwiperSlide } from 'swiper/vue'; |
||||
|
import { Navigation, Pagination, Autoplay } from 'swiper/modules'; |
||||
|
import { getTableFooter } from '@/api/table/list'; |
||||
|
import { PanelVo } from '@/api/table/types'; |
||||
|
import countTo from '@/utils/countTo'; |
||||
|
import 'swiper/css'; |
||||
|
|
||||
|
const modules = [Navigation, Pagination, Autoplay]; |
||||
|
const panelData = ref<PanelVo[]>(); |
||||
|
|
||||
|
interface CardData { |
||||
|
id: string; |
||||
|
title: string; |
||||
|
value: number; |
||||
|
ext: string, |
||||
|
time: number; |
||||
|
icon: string; |
||||
|
} |
||||
|
|
||||
|
const cardData: CardData[] = [ |
||||
|
{ |
||||
|
id: '1', |
||||
|
title: '设备在线率', |
||||
|
value: 95, |
||||
|
ext: '%', |
||||
|
time: 5000, |
||||
|
icon: '' |
||||
|
}, |
||||
|
]; |
||||
|
|
||||
|
onMounted(() => { |
||||
|
getPanel() |
||||
|
}); |
||||
|
|
||||
|
function getPanel() { |
||||
|
//获取表格数据 |
||||
|
getTableFooter().then((res: any) => { |
||||
|
if (res.code === 200) { |
||||
|
panelData.value = res.data; |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
</script> |
||||