|
@@ -366,7 +366,7 @@
|
|
|
<!-- 添加或修改岗位对话框 -->
|
|
|
<el-dialog :title="dialog.title" v-model="dialog.visible" width="1200px" append-to-body>
|
|
|
<div style="height: 500px;display: flex">
|
|
|
- <el-tabs tab-position="left" class="demo-tabs" style="height: 100%">
|
|
|
+ <el-tabs tab-position="left" class="demo-tabs" style="height: 100%;flex-grow: 1">
|
|
|
<el-tab-pane label="风">
|
|
|
<div class="container-tag">
|
|
|
<template v-for="item in elementList" :key="item.id">
|
|
@@ -1040,9 +1040,9 @@ function findLabelByValue(noticeTypeList, value) {
|
|
|
return item ? item.label : null;
|
|
|
}
|
|
|
|
|
|
-// 判断风级的方法
|
|
|
+// 判断风级的方法
|
|
|
function getWindLevel(windSpeed) {
|
|
|
- // 定义风级表
|
|
|
+ // 定义风级表
|
|
|
const windScale = [
|
|
|
{ start: 0.0, end: 0.2, level: 0 },
|
|
|
{ start: 0.3, end: 1.5, level: 1 },
|
|
@@ -1061,7 +1061,7 @@ function getWindLevel(windSpeed) {
|
|
|
{ start: 41.5, end: 46.1, level: 14 },
|
|
|
{ start: 46.2, end: 50.9, level: 15 },
|
|
|
{ start: 51.0, end: 56.0, level: 16 },
|
|
|
- // 对于最后一个范围,我们可以使用Number.MAX_SAFE_INTEGER来表示DBL_MAX
|
|
|
+ // 对于最后一个范围,我们可以使用Number.MAX_SAFE_INTEGER来表示DBL_MAX
|
|
|
{ start: 56.1, end: Number.MAX_SAFE_INTEGER, level: 17 }
|
|
|
];
|
|
|
for (let i = 0; i < windScale.length; i++) {
|
|
@@ -1069,7 +1069,7 @@ function getWindLevel(windSpeed) {
|
|
|
return windScale[i].level;
|
|
|
}
|
|
|
}
|
|
|
- // 如果没有匹配到任何风级(理论上不应该发生),返回-1或其他错误码
|
|
|
+ // 如果没有匹配到任何风级(理论上不应该发生),返回-1或其他错误码
|
|
|
return '--';
|
|
|
}
|
|
|
// const updateColumns = () => {
|
|
@@ -1125,11 +1125,11 @@ function formatDate(timestamp, type) {
|
|
|
|
|
|
// 获取天气现象
|
|
|
function getYenSymbolLaterCharacters(inputString) {
|
|
|
- // 使用正则表达式匹配¥符号及其后面的字符
|
|
|
+ // 使用正则表达式匹配¥符号及其后面的字符
|
|
|
const regex = /#([\s\S]*)/;
|
|
|
const match = inputString.match(regex);
|
|
|
|
|
|
- // 如果匹配成功,则返回¥后面的字符,否则返回null
|
|
|
+ // 如果匹配成功,则返回¥后面的字符,否则返回null
|
|
|
if (match && match.length > 1) {
|
|
|
return match[1];
|
|
|
} else {
|
|
@@ -1145,26 +1145,26 @@ function getTimeStamp(type, timestamp) {
|
|
|
|
|
|
switch (type) {
|
|
|
case 0:
|
|
|
- // 获取当前时间的时间戳
|
|
|
+ // 获取当前时间的时间戳
|
|
|
timestampResult = Math.floor(now.getTime() / 1000);
|
|
|
break;
|
|
|
case 1:
|
|
|
- // 获取30分钟之前的时间戳
|
|
|
+ // 获取30分钟之前的时间戳
|
|
|
now.setMinutes(now.getMinutes() - 30);
|
|
|
timestampResult = Math.floor(now.getTime() / 1000);
|
|
|
break;
|
|
|
case 2:
|
|
|
- // 获取24小时之前的整点时间戳
|
|
|
+ // 获取24小时之前的整点时间戳
|
|
|
now.setHours(now.getHours() - 24, 0, 0, 0);
|
|
|
timestampResult = Math.floor(now.getTime() / 1000);
|
|
|
break;
|
|
|
case 3:
|
|
|
- // 获取48小时之前的整点时间戳
|
|
|
+ // 获取48小时之前的整点时间戳
|
|
|
now.setHours(now.getHours() - 48, 0, 0, 0);
|
|
|
timestampResult = Math.floor(now.getTime() / 1000);
|
|
|
break;
|
|
|
case 4:
|
|
|
- // 获取现在的整点时间戳
|
|
|
+ // 获取现在的整点时间戳
|
|
|
now.setMinutes(0, 0, 0);
|
|
|
timestampResult = Math.floor(now.getTime() / 1000);
|
|
|
break;
|
|
@@ -1353,43 +1353,43 @@ const mincurrentValue = ref<any>(0)
|
|
|
const gradientStyle = computed(() => {
|
|
|
return {
|
|
|
height: '180px',
|
|
|
- background: 'linear-gradient(to top, #D9FDD5, #CCFB99,#FDFFAC,#FCF4C6,#F7D2A6,#EB9C8B,#E46528,#D32E22,#C71D11,#BC1408,#B41408,#9A0D03)', // 从下到上,从红色到白色
|
|
|
- width: '40px', // 盒子的宽度
|
|
|
+ background: 'linear-gradient(to top, #D9FDD5, #CCFB99,#FDFFAC,#FCF4C6,#F7D2A6,#EB9C8B,#E46528,#D32E22,#C71D11,#BC1408,#B41408,#9A0D03)', // 从下到上,从红色到白色
|
|
|
+ width: '40px', // 盒子的宽度
|
|
|
};
|
|
|
});
|
|
|
|
|
|
const minStyle = computed(() => {
|
|
|
return {
|
|
|
height: '180px',
|
|
|
- background: 'linear-gradient(to top, #D9FDD5, #CCFB99,#FDFFAC,#FCF4C6,#F7D2A6,#EB9C8B,#E46528,#D32E22)', // 从下到上,从红色到白色
|
|
|
- width: '40px', // 盒子的宽度
|
|
|
+ background: 'linear-gradient(to top, #D9FDD5, #CCFB99,#FDFFAC,#FCF4C6,#F7D2A6,#EB9C8B,#E46528,#D32E22)', // 从下到上,从红色到白色
|
|
|
+ width: '40px', // 盒子的宽度
|
|
|
};
|
|
|
});
|
|
|
const arrowStyle = computed(() => {
|
|
|
- // 计算箭头顶部位置,使其指向盒子内的相应位置
|
|
|
- // 由于盒子高度是150px,而值域是0-100,因此需要进行缩放
|
|
|
- const maxTop = '0px'; // 表示100的位置
|
|
|
- const scaleFactor = 180 / 40; // 缩放因子
|
|
|
- // const top = `${(180 - (currentValue.value / 40) * 180)}px`; // 从底部开始计算
|
|
|
+ // 计算箭头顶部位置,使其指向盒子内的相应位置
|
|
|
+ // 由于盒子高度是150px,而值域是0-100,因此需要进行缩放
|
|
|
+ const maxTop = '0px'; // 表示100的位置
|
|
|
+ const scaleFactor = 180 / 40; // 缩放因子
|
|
|
+ // const top = `${(180 - (currentValue.value / 40) * 180)}px`; // 从底部开始计算
|
|
|
const calculatedTop = `${(180 - (Math.min(currentValue.value=='--'?0:currentValue.value, 40) / 40) * 180)}px`;
|
|
|
const top = (currentValue.value=='--'?0:currentValue.value) > 40 ? maxTop : calculatedTop;
|
|
|
return {
|
|
|
top,
|
|
|
position: 'absolute',
|
|
|
- // right: '10', // 箭头紧贴盒子右侧
|
|
|
- transform: 'translateY(-50%) translateX(50%)', // 旋转并尝试垂直居中(但这里的-50%是相对于箭头自身的)
|
|
|
+ // right: '10', // 箭头紧贴盒子右侧
|
|
|
+ transform: 'translateY(-50%) translateX(50%)', // 旋转并尝试垂直居中(但这里的-50%是相对于箭头自身的)
|
|
|
};
|
|
|
});
|
|
|
const minarrowStyle = computed(() => {
|
|
|
- // 计算箭头顶部位置,使其指向盒子内的相应位置
|
|
|
- // 由于盒子高度是150px,而值域是0-100,因此需要进行缩放
|
|
|
- const scaleFactor = 180 / 4; // 缩放因子
|
|
|
- const top = `${(180 - (mincurrentValue.value==='--'?0:mincurrentValue.value / 4) * 180)}px`; // 从底部开始计算
|
|
|
+ // 计算箭头顶部位置,使其指向盒子内的相应位置
|
|
|
+ // 由于盒子高度是150px,而值域是0-100,因此需要进行缩放
|
|
|
+ const scaleFactor = 180 / 4; // 缩放因子
|
|
|
+ const top = `${(180 - (mincurrentValue.value==='--'?0:mincurrentValue.value / 4) * 180)}px`; // 从底部开始计算
|
|
|
return {
|
|
|
top,
|
|
|
position: 'absolute',
|
|
|
- // right: '10', // 箭头紧贴盒子右侧
|
|
|
- transform: 'translateY(-50%) translateX(50%)', // 旋转并尝试垂直居中(但这里的-50%是相对于箭头自身的)
|
|
|
+ // right: '10', // 箭头紧贴盒子右侧
|
|
|
+ transform: 'translateY(-50%) translateX(50%)', // 旋转并尝试垂直居中(但这里的-50%是相对于箭头自身的)
|
|
|
};
|
|
|
});
|
|
|
|
|
@@ -1706,7 +1706,7 @@ const showWindSpeed = () => {
|
|
|
},
|
|
|
// detail: {
|
|
|
// formatter: function (params) {
|
|
|
- // // 返回数据项的 name 属性
|
|
|
+ // // 返回数据项的 name 属性
|
|
|
// return params.name;
|
|
|
// }
|
|
|
// },
|
|
@@ -2474,7 +2474,7 @@ onDeactivated(() => {
|
|
|
}
|
|
|
|
|
|
.gradient-container {
|
|
|
- // position: relative;
|
|
|
+ // position: relative;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
height: 200px;
|
|
@@ -2503,4 +2503,4 @@ onDeactivated(() => {
|
|
|
}
|
|
|
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|