|
@@ -26,7 +26,7 @@
|
|
|
}}</div>
|
|
|
<div class="top_item">经度:{{ selectPlatform?.as_lon }}</div>
|
|
|
<div class="top_item">纬度:{{ selectPlatform?.as_lat }}</div>
|
|
|
- <div class="top_item">观测时间:{{ formatDate(dataItemInfo?.data_time_i, 2) }}</div>
|
|
|
+ <div class="top_item">观测时间:{{dataItemInfo&&dataItemInfo.data_time_i? formatDate(dataItemInfo?.data_time_i, 2):'--' }}</div>
|
|
|
</div>
|
|
|
<div class="header-button-ri">
|
|
|
<slot name="toolButton">
|
|
@@ -90,10 +90,10 @@
|
|
|
<div style="font-weight: bold;">瞬时风 ( m/s )</div>
|
|
|
<div class="mt15 box1">
|
|
|
<div ref="windSpeed" class="ve-ring" style="height: 200px"></div>
|
|
|
- <div class="icon icon1" v-if="dataItemInfo && dataItemInfo[9]">{{ dataItemInfo[9] }}
|
|
|
+ <div class="icon icon1">{{ dataItemInfo&&dataItemInfo[9]?dataItemInfo[9]:'--' }}
|
|
|
<span>°</span>
|
|
|
</div>
|
|
|
- <div class="icon icon2" v-if="dataItemInfo && dataItemInfo[8]">{{ dataItemInfo[8] }}
|
|
|
+ <div class="icon icon2" >{{ dataItemInfo&&dataItemInfo[8]?dataItemInfo[8]:'--' }}
|
|
|
<span>m/s</span>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -176,12 +176,12 @@
|
|
|
</el-row>
|
|
|
|
|
|
<el-row :gutter="15">
|
|
|
- <el-col :xs="12" :sm="8" :md="8" :lg="4" :xl="4" v-for="item in selectElement" :key="item.data_id">
|
|
|
+ <el-col :xs="12" :sm="8" :md="8" :lg="4" :xl="4" v-for="item in selectElement.length>0?selectElement:customizeColumns" :key="item.data_id">
|
|
|
<div class="chart_item info_box zhuti">
|
|
|
<div class="info_title">{{ item.data_name }} ( {{ item.data_unit }} )</div>
|
|
|
<div class="mt15 ">
|
|
|
<div class="info_content">
|
|
|
- {{ item.data_value }}
|
|
|
+ {{ item.data_value?item.data_value: '--' }}
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -320,9 +320,10 @@
|
|
|
</el-option>
|
|
|
</el-select>
|
|
|
</div>
|
|
|
- <div class="mt15">
|
|
|
- <div ref="wind" class="ve-ring" style="height: 200px"></div>
|
|
|
+ <div class="mt15" >
|
|
|
+ <div ref="wind" class="ve-ring" style="height: 200px" ></div>
|
|
|
</div>
|
|
|
+
|
|
|
</div>
|
|
|
</el-col>
|
|
|
<el-col :xs="12" :sm="8" :md="8" :lg="8">
|
|
@@ -336,8 +337,8 @@
|
|
|
</el-option>
|
|
|
</el-select>
|
|
|
</div>
|
|
|
- <div class="mt15">
|
|
|
- <div ref="tempLine" class="ve-ring" style="height: 200px"></div>
|
|
|
+ <div class="mt15" >
|
|
|
+ <div ref="tempLine" class="ve-ring" style="height: 200px" ></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-col>
|
|
@@ -517,7 +518,30 @@ import { ref, computed, onMounted, reactive, watch, onDeactivated, onActivated }
|
|
|
import { useGlobalStore } from "@/stores/modules/global";
|
|
|
import { getDataItemList, getPlatformList, getRgDataList, getTacRecordList } from "@/api/modules/allData";
|
|
|
import { Platform } from "@/api/interface";
|
|
|
-import { get } from 'sortablejs';
|
|
|
+
|
|
|
+import { ElLoading } from "element-plus";
|
|
|
+
|
|
|
+/* 全局请求 loading */
|
|
|
+const loading=ref()
|
|
|
+
|
|
|
+/**
|
|
|
+ * @description 开启 Loading
|
|
|
+ * */
|
|
|
+const startFullLoading = () => {
|
|
|
+ loading.value = ElLoading.service({
|
|
|
+ fullscreen: true,
|
|
|
+ lock: true,
|
|
|
+ text: "Loading",
|
|
|
+ background: "rgba(0, 0, 0, 0.7)"
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+/**
|
|
|
+ * @description 结束 Loading
|
|
|
+ * */
|
|
|
+const endFullLoading = () => {
|
|
|
+ loading.value.close();
|
|
|
+};
|
|
|
const timeValue = ref(1);
|
|
|
|
|
|
const queryInfo = ref(0)
|
|
@@ -987,7 +1011,7 @@ function getWindLevel(windSpeed) {
|
|
|
}
|
|
|
}
|
|
|
// 如果没有匹配到任何风级(理论上不应该发生),返回-1或其他错误码
|
|
|
- return -1;
|
|
|
+ return '--';
|
|
|
}
|
|
|
// const updateColumns = () => {
|
|
|
// pageable.value.data_items = [...customizeColumns.value,...defaultColumns];
|
|
@@ -1007,13 +1031,18 @@ const platformList = ref<any>([])
|
|
|
const selectPlatform = ref()
|
|
|
|
|
|
const getPlatforms = async () => {
|
|
|
+ startFullLoading()
|
|
|
+
|
|
|
const { data } = await getPlatformList(queryas.value);
|
|
|
+
|
|
|
platformList.value = data.list
|
|
|
pageable.value.as_code = data.list[0].as_code
|
|
|
selectPlatform.value = data.list[0]
|
|
|
getList()
|
|
|
// getHistoryList()
|
|
|
weatherInfo()
|
|
|
+ endFullLoading()
|
|
|
+
|
|
|
|
|
|
};
|
|
|
|
|
@@ -1106,7 +1135,7 @@ const getAllRgDataList = async () => {
|
|
|
const { data } = await getRgDataList();
|
|
|
elementList.value = data.list
|
|
|
};
|
|
|
-const dataItemInfo = ref()
|
|
|
+const dataItemInfo = ref<any>({})
|
|
|
const selectElement = ref()
|
|
|
const dangerWeather = ref()
|
|
|
const getList = async () => {
|
|
@@ -1116,10 +1145,12 @@ const getList = async () => {
|
|
|
}
|
|
|
return acc;
|
|
|
}, []);
|
|
|
- const { data } = await getDataItemList({ ...pageable.value, as_code_list: [pageable.value.as_code], data_items: arr });
|
|
|
- console.log(data, 555);
|
|
|
+ const res = await getDataItemList({ ...pageable.value, as_code_list: [pageable.value.as_code], data_items: arr });
|
|
|
+
|
|
|
+
|
|
|
|
|
|
- dataItemInfo.value = data.list[0]
|
|
|
+ dataItemInfo.value = res.data.list ? (res.data.list.length === 0 ? {} : res.data.list[0]) : {};
|
|
|
+ console.log(dataItemInfo.value, 555);
|
|
|
|
|
|
showTemp()
|
|
|
showHumidity()
|
|
@@ -1127,11 +1158,11 @@ const getList = async () => {
|
|
|
showWindSpeed()
|
|
|
currentValue.value = dataItemInfo.value[312] && dataItemInfo.value[312] != 0 && dataItemInfo.value[312] != '--' ? dataItemInfo.value[302] : dataItemInfo.value[302] && dataItemInfo.value[302] != 0 ? dataItemInfo.value[302] : 0
|
|
|
mincurrentValue.value = dataItemInfo.value[311] && dataItemInfo.value[311] != 0 && dataItemInfo.value[311] != '--' ? dataItemInfo.value[301] : dataItemInfo.value[301] && dataItemInfo.value[301] != 0 ? dataItemInfo.value[302] : 0
|
|
|
- selectElement.value = dataItemInfo.value.data_list.filter(itemB => customizeColumns.value.some(itemA => itemA.data_id === itemB.data_id));
|
|
|
+ selectElement.value = res.data.list?dataItemInfo.value?.data_list.filter(itemB => customizeColumns.value.some(itemA => itemA.data_id === itemB.data_id)):[];
|
|
|
const ids = [601, 602, 603, 604, 605]
|
|
|
- dangerWeather.value = dataItemInfo.value.data_list
|
|
|
+ dangerWeather.value = res.data.list?dataItemInfo.value.data_list
|
|
|
.filter(item => ids.includes(item.data_id) && item.data_value !== '--')
|
|
|
- .map(item => item);
|
|
|
+ .map(item => item):[]
|
|
|
|
|
|
// .filter(item => ids.includes(item.data_id) && getYenSymbolLaterCharacters(item.remark) !== '无明显天气现象')
|
|
|
getHistoryList()
|
|
@@ -1146,12 +1177,15 @@ function adjustValue(value) {
|
|
|
return 360 - value;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+const showChart=ref(false)
|
|
|
const timeArr = ref()
|
|
|
const tempLineArr = ref()
|
|
|
const humidityLineArr = ref()
|
|
|
const pressureLineArr = ref()
|
|
|
const windLineArr = ref()
|
|
|
const getHistoryList = async () => {
|
|
|
+ showChart.value=false
|
|
|
const arr = [...customizeColumns.value, ...defaultColumns].reduce((acc, item) => {
|
|
|
if (!acc.some(existingItem => existingItem.data_id === item.data_id)) {
|
|
|
acc.push(item);
|
|
@@ -1179,10 +1213,11 @@ const getHistoryList = async () => {
|
|
|
}
|
|
|
})
|
|
|
|
|
|
-
|
|
|
showTempLine()
|
|
|
showPressureLine()
|
|
|
showWind()
|
|
|
+ showChart.value=true
|
|
|
+
|
|
|
|
|
|
};
|
|
|
|
|
@@ -1416,7 +1451,7 @@ const showPressure = () => {
|
|
|
},
|
|
|
data: [
|
|
|
{
|
|
|
- value: dataItemInfo.value[202]
|
|
|
+ value: dataItemInfo.value&&dataItemInfo.value[202]?dataItemInfo.value[202]:'--'
|
|
|
}
|
|
|
]
|
|
|
}
|
|
@@ -1555,7 +1590,7 @@ const showHumidity = () => {
|
|
|
},
|
|
|
data: [
|
|
|
{
|
|
|
- value: dataItemInfo.value[106]
|
|
|
+ value: dataItemInfo.value&&dataItemInfo.value[106]?dataItemInfo.value[106]:'--'
|
|
|
}
|
|
|
]
|
|
|
}
|
|
@@ -1700,7 +1735,7 @@ const showWindSpeed = () => {
|
|
|
detail: {
|
|
|
offsetCenter: [-12, 5],
|
|
|
valueAnimation: true,
|
|
|
- formatter: getWindLevel(dataItemInfo.value[8]).toString(),
|
|
|
+ formatter: getWindLevel(dataItemInfo.value&&dataItemInfo.value[8]?dataItemInfo.value[8]:-1).toString(),
|
|
|
// formatter:'2' ,
|
|
|
color: isDark.value ? '#fff' : "#000",
|
|
|
// fontSize: 10,
|
|
@@ -1708,7 +1743,7 @@ const showWindSpeed = () => {
|
|
|
data: [
|
|
|
{
|
|
|
// value:270,
|
|
|
- value: dataItemInfo.value[9] == 'C' ? 0 : Number(dataItemInfo.value[9]),
|
|
|
+ value: dataItemInfo.value&&dataItemInfo.value[9] == 'C' ? 0 : Number(dataItemInfo.value[9]),
|
|
|
name: '级',
|
|
|
detail: {
|
|
|
fontSize: 40,
|
|
@@ -1847,6 +1882,16 @@ const showWind = () => {
|
|
|
},]
|
|
|
let mychart = echarts.init(wind.value);
|
|
|
let option = {
|
|
|
+ title: {
|
|
|
+ text: '暂无数据',
|
|
|
+ show:!timeArr.value?true:false,
|
|
|
+ x: 'center',
|
|
|
+ y: 'center',
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 14,
|
|
|
+ fontWeight: 'normal',
|
|
|
+ }
|
|
|
+ },
|
|
|
|
|
|
grid: {
|
|
|
left: '10',
|
|
@@ -1908,7 +1953,6 @@ const showWind = () => {
|
|
|
data: windLineArr.value,
|
|
|
type: 'line',
|
|
|
smooth: true, //这句就是让曲线变平滑的
|
|
|
- // symbol: "image://" + require("../../../assets/img/weather/wind.png"),
|
|
|
symbol: 'path://M4.866,0,0,15.193l4.866-4.449L9.738,15.2Z',
|
|
|
symbolSize: 11,
|
|
|
//折线样式
|
|
@@ -2054,7 +2098,7 @@ const showTemp = () => {
|
|
|
|
|
|
data: [
|
|
|
{
|
|
|
- value: dataItemInfo.value[101]
|
|
|
+ value: dataItemInfo.value&&dataItemInfo.value[101]?dataItemInfo.value[101]:0,
|
|
|
}
|
|
|
]
|
|
|
}
|
|
@@ -2089,6 +2133,16 @@ const showTempLine = () => {
|
|
|
|
|
|
let mychart = echarts.init(tempLine.value);
|
|
|
let option = {
|
|
|
+ title: {
|
|
|
+ text: '暂无数据',
|
|
|
+ show:!timeArr.value?true:false,
|
|
|
+ x: 'center',
|
|
|
+ y: 'center',
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 14,
|
|
|
+ fontWeight: 'normal',
|
|
|
+ }
|
|
|
+ },
|
|
|
// 直角坐标系内绘图网格
|
|
|
// grid: {
|
|
|
// show: true,
|
|
@@ -2230,6 +2284,16 @@ const showPressureLine = () => {
|
|
|
|
|
|
let mychart = echarts.init(pressureLine.value);
|
|
|
let option = {
|
|
|
+ title: {
|
|
|
+ text: '暂无数据',
|
|
|
+ show:!timeArr.value?true:false,
|
|
|
+ x: 'center',
|
|
|
+ y: 'center',
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 14,
|
|
|
+ fontWeight: 'normal',
|
|
|
+ }
|
|
|
+ },
|
|
|
|
|
|
grid: {
|
|
|
left: '10',
|
|
@@ -2321,11 +2385,11 @@ onMounted(() => {
|
|
|
getAllRgDataList()
|
|
|
|
|
|
|
|
|
- // showTemp()
|
|
|
+ showTemp()
|
|
|
// showWind()
|
|
|
showWindSpeed()
|
|
|
- // showHumidity()
|
|
|
- // showPressure()
|
|
|
+ showHumidity()
|
|
|
+ showPressure()
|
|
|
// showTempLine()
|
|
|
// showPressureLine()
|
|
|
})
|
|
@@ -2351,7 +2415,7 @@ onActivated(() => {
|
|
|
getList();
|
|
|
weatherInfo()
|
|
|
// getHistoryList()
|
|
|
- }, 60 * 1000);
|
|
|
+ }, 600 * 1000);
|
|
|
});
|
|
|
|
|
|
onDeactivated(() => {
|