372 lines
9.0 KiB
Vue
372 lines
9.0 KiB
Vue
<!-- 晴雨台 -->
|
||
<template>
|
||
<div class="side-bg">
|
||
<div>
|
||
<TitleC title="晴雨台"></TitleC>
|
||
<div class="weather_data">
|
||
<div>
|
||
<TitleD width="100">
|
||
<div class="weather_data_title">气象实时数据</div>
|
||
</TitleD>
|
||
<div class="weather_data_left">
|
||
<div>
|
||
<div>
|
||
<img
|
||
src="../../../../assets/images/home-page/left/lightRain.png"
|
||
alt=""
|
||
/>
|
||
<span>15°</span>
|
||
</div>
|
||
<div>
|
||
<div>雨 东南风：＜3级</div>
|
||
<div>10~17℃</div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div>
|
||
<div>PM2.5：48.0%</div>
|
||
<div>PM10：240mm</div>
|
||
</div>
|
||
<div>
|
||
<div>O3：48.0%</div>
|
||
<div>空气质量：良</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<TitleD width="100">
|
||
<div class="weather_data_div">
|
||
<div class="weather_data_title">24小时天气象数据</div>
|
||
<div class="weather_data_button">
|
||
<div
|
||
v-for="(item, index) in label"
|
||
:key="index"
|
||
@click="clickMenuOption(item.id)"
|
||
:class="
|
||
item.check == true
|
||
? 'module_menu_selected'
|
||
: 'module_menu_notSelected'
|
||
"
|
||
>
|
||
{{ item.title }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</TitleD>
|
||
<div class="weather_data_right conBox chart-wrapper">
|
||
<div ref="tenementRef" class="container"></div>
|
||
<div>
|
||
<img
|
||
src="../../../../assets/images/home-page/left/leftArrow.png"
|
||
alt=""
|
||
/>
|
||
</div>
|
||
<div>
|
||
<img
|
||
src="../../../../assets/images/home-page/left/rightArrow.png"
|
||
alt=""
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<TitleD width="100">
|
||
<div class="weather_data_title">气象预警信息</div>
|
||
</TitleD>
|
||
<el-table :data="tableData" height="180" style="width: 100%">
|
||
<el-table-column type="index" label="序号" align="center" width="60" />
|
||
<el-table-column
|
||
prop="type"
|
||
label="预警类型"
|
||
align="center"
|
||
width="120"
|
||
/>
|
||
<el-table-column prop="info" label="预警信息" align="center">
|
||
<template #default="scope">
|
||
<el-tooltip
|
||
class="box-item"
|
||
effect="dark"
|
||
:content="scope.row.info"
|
||
placement="top-start"
|
||
popper-class="weather_tip"
|
||
>
|
||
<span>{{ scope.row.info }}</span>
|
||
</el-tooltip>
|
||
</template>
|
||
</el-table-column>
|
||
<!-- show-overflow-tooltip -->
|
||
<el-table-column
|
||
prop="time"
|
||
label="预警时间"
|
||
align="center"
|
||
width="140"
|
||
>
|
||
<template #default="scope">
|
||
<span class="time">{{ scope.row.time }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="操作" align="center" width="60">
|
||
<template #default="scope">
|
||
<span @click="clickDetails">
|
||
<span class="pointer details">详情</span>
|
||
</span>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts">
|
||
import * as echarts from "echarts";
|
||
import { defineComponent, onMounted, ref, watchEffect } from "vue";
|
||
export default defineComponent({
|
||
name: "weather",
|
||
});
|
||
</script>
|
||
<script setup lang='ts'>
|
||
const visible = ref(false);
|
||
const tableData = [
|
||
{
|
||
type: "暴雨黄色预警",
|
||
info: "xxxx气象台发布暴雨黄色预警信号：xx区xx街道、xx街道、xx镇未来连续三天降雨量将达到150ml以上，请注意防范。",
|
||
time: "2024/1/22 12:20:13",
|
||
},
|
||
{
|
||
type: "暴雨黄色预警",
|
||
info: "xxxx气象台发布暴雨黄色预警信号：xx区xx街道、xx街道、xx镇未来连续三天降雨量将达到150ml以上，请注意防范。",
|
||
time: "2024/1/22 12:20:13",
|
||
},
|
||
{
|
||
type: "暴雨黄色预警",
|
||
info: "xxxx气象台发布暴雨黄色预警信号：xx区xx街道、xx街道、xx镇未来连续三天降雨量将达到150ml以上，请注意防范。",
|
||
time: "2024/1/22 12:20:13",
|
||
},
|
||
{
|
||
type: "暴雨黄色预警",
|
||
info: "xxxx气象台发布暴雨黄色预警信号：xx区xx街道、xx街道、xx镇未来连续三天降雨量将达到150ml以上，请注意防范。",
|
||
time: "2024/1/22 12:20:13",
|
||
},
|
||
];
|
||
const clickDetails = () => {};
|
||
//未来七天气象数据选择
|
||
const label = ref([
|
||
{ title: "24小时", check: true, id: 0 },
|
||
{ title: "未来七天", check: false, id: 1 },
|
||
]);
|
||
const clickMenuOption = (id: any) => {
|
||
label.value.forEach((item) => {
|
||
item.check = false;
|
||
});
|
||
label.value[id].check = true;
|
||
};
|
||
|
||
const tenementRef = ref();
|
||
let option = {
|
||
color: ["#66E1DF"],
|
||
tooltip: {
|
||
show: false,
|
||
trigger: "axis",
|
||
axisPointer: {
|
||
// 坐标轴指示器，坐标轴触发有效
|
||
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
|
||
},
|
||
},
|
||
grid: {
|
||
left: "0%",
|
||
right: "5%",
|
||
bottom: "0%",
|
||
containLabel: true,
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: "category",
|
||
data: ["现在", "15:00", "16:00", "17:00", "18:00", "19:00", "20:00"],
|
||
boundaryGap: false,
|
||
axisTick: {
|
||
show: false, // 不显示坐标轴刻度线
|
||
},
|
||
splitLine: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
interval: 0,
|
||
color: "#D0DEEE",
|
||
fontSize: 12,
|
||
},
|
||
},
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: "value",
|
||
splitLine: {
|
||
// 网格线
|
||
show: true,
|
||
lineStyle: {
|
||
//分割线
|
||
color: "#99999955",
|
||
width: 1,
|
||
type: "dashed", //dotted：虚线 solid:实线
|
||
},
|
||
},
|
||
axisLabel: {
|
||
formatter: "{value} °C",
|
||
},
|
||
},
|
||
],
|
||
series: [
|
||
{
|
||
name: "",
|
||
type: "line",
|
||
smooth: true,
|
||
symbol: "none", // 不显示连接点
|
||
tooltip: {
|
||
trigger: "axis",
|
||
},
|
||
lineStyle: {
|
||
width: 2,
|
||
shadowColor: "#165DFF",
|
||
shadowBlur: 20,
|
||
},
|
||
areaStyle: {
|
||
opacity: 0.8,
|
||
color: {
|
||
x: 0,
|
||
y: 0,
|
||
x2: 0,
|
||
y2: 1,
|
||
colorStops: [
|
||
{
|
||
offset: 0,
|
||
color: "#0F476B",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "#002A56",
|
||
},
|
||
],
|
||
},
|
||
},
|
||
data: [2, 4, 9, 12, 15, 48, 2],
|
||
},
|
||
],
|
||
};
|
||
const getData = () => {
|
||
const airTenementChart = echarts.init(tenementRef.value);
|
||
airTenementChart.setOption(option);
|
||
};
|
||
onMounted(() => {
|
||
getData();
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.side-bg {
|
||
// height: 45%;
|
||
}
|
||
.weather_data {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
> div:nth-child(1) {
|
||
width: 40%;
|
||
}
|
||
> div:nth-child(2) {
|
||
width: 59%;
|
||
}
|
||
}
|
||
|
||
.weather_data_left {
|
||
width: 100%;
|
||
height: 120px;
|
||
background-image: url("../../../../assets/images/home-page/left/barometer.png");
|
||
background-size: 100% 100%;
|
||
background-repeat: no-repeat;
|
||
padding: 12px;
|
||
> div:nth-child(1) {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
> div:nth-child(1) {
|
||
font-size: 27px;
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: bold;
|
||
display: flex;
|
||
align-items: center;
|
||
color: #ffffff;
|
||
> img {
|
||
width: 24px;
|
||
height: 24px;
|
||
}
|
||
}
|
||
> div:nth-child(2) {
|
||
font-size: 14px;
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 500;
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
> div:nth-child(2) {
|
||
> div {
|
||
font-size: 13px;
|
||
font-family: Source Han Sans SC, Source Han Sans SC;
|
||
font-weight: 400;
|
||
color: #d0deee;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-top: 10px;
|
||
margin-bottom: 5px;
|
||
> div {
|
||
width: 100%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.weather_data_right {
|
||
width: 100%;
|
||
> div:nth-child(2) {
|
||
margin-top: -17px;
|
||
margin-left: 10px;
|
||
text-align: left;
|
||
img {
|
||
width: 15px;
|
||
height: 15px;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
> div:nth-child(3) {
|
||
margin-top: -23px;
|
||
text-align: right;
|
||
margin-right: 10px;
|
||
img {
|
||
cursor: pointer;
|
||
width: 15px;
|
||
height: 15px;
|
||
}
|
||
}
|
||
}
|
||
.time {
|
||
font-size: 12px;
|
||
font-family: Source Han Sans SC, Source Han Sans SC;
|
||
font-weight: 400;
|
||
color: #159aff;
|
||
}
|
||
.chart-wrapper {
|
||
height: 120px;
|
||
position: relative;
|
||
overflow: hidden;
|
||
.container {
|
||
width: 86%;
|
||
height: 160px;
|
||
margin-top: -45px;
|
||
margin-left: 20px;
|
||
}
|
||
}
|
||
</style>
|
||
<style>
|
||
.weather_tip {
|
||
max-width: 200px !important;
|
||
}
|
||
</style> |