|
@@ -64,27 +64,33 @@
|
|
>
|
|
>
|
|
<el-table-column
|
|
<el-table-column
|
|
label="位置"
|
|
label="位置"
|
|
- prop="name"
|
|
|
|
|
|
+ prop="formatted_address"
|
|
align="center"
|
|
align="center"
|
|
/>
|
|
/>
|
|
<el-table-column
|
|
<el-table-column
|
|
label="雨量"
|
|
label="雨量"
|
|
- prop="latitude"
|
|
|
|
|
|
+ prop="rainfall"
|
|
align="center"
|
|
align="center"
|
|
width="80px"
|
|
width="80px"
|
|
/>
|
|
/>
|
|
<el-table-column
|
|
<el-table-column
|
|
label="类型"
|
|
label="类型"
|
|
- prop="type"
|
|
|
|
|
|
+ prop="weather_warning_type"
|
|
align="center"
|
|
align="center"
|
|
- width="60px"
|
|
|
|
- />
|
|
|
|
|
|
+ width="70px"
|
|
|
|
+ >
|
|
|
|
+ <template #default="scope">
|
|
|
|
+ <div style="display: flex; justify-content: center">
|
|
|
|
+ <img :src="iconStatus(scope.row)" style="width: 40px" alt="" />
|
|
|
|
+ </div>
|
|
|
|
+ </template>
|
|
|
|
+ </el-table-column>
|
|
<el-table-column label="操作" align="center" width="50px">
|
|
<el-table-column label="操作" align="center" width="50px">
|
|
<template #default="scope">
|
|
<template #default="scope">
|
|
<div
|
|
<div
|
|
class="btn"
|
|
class="btn"
|
|
- @click="showDetails(scope.row)"
|
|
|
|
style="color: #1d92ff"
|
|
style="color: #1d92ff"
|
|
|
|
+ @click="showDetails(scope.row)"
|
|
>
|
|
>
|
|
查看
|
|
查看
|
|
</div>
|
|
</div>
|
|
@@ -100,10 +106,35 @@
|
|
import { reactive, ref } from "vue";
|
|
import { reactive, ref } from "vue";
|
|
import searchImg from "@/assets/images/search.png";
|
|
import searchImg from "@/assets/images/search.png";
|
|
import { ElTable, ElTableColumn } from "element-plus";
|
|
import { ElTable, ElTableColumn } from "element-plus";
|
|
-import { getPointInfo } from "@/api/disasterRiskMonitor/rainfall";
|
|
|
|
-import {useDict} from "@/utils/dict";
|
|
|
|
|
|
+import {
|
|
|
|
+ getChemicalcompany,
|
|
|
|
+ getPointInfo,
|
|
|
|
+ getRainhouseSites
|
|
|
|
+} from "@/api/disasterRiskMonitor/rainfall";
|
|
|
|
+import { useDict } from "@/utils/dict";
|
|
|
|
+import { deepClone } from "@/utils";
|
|
|
|
+import rainWhite from "@/assets/images/map/warningInfo/ic_rainstorm_white.png";
|
|
|
|
+import rainBlue from "@/assets/images/map/warningInfo/ic_rainstorm_blue.png";
|
|
|
|
+import rainYellow from "@/assets/images/map/warningInfo/ic_rainstorm_yellow.png";
|
|
|
|
+import rainOrange from "@/assets/images/map/warningInfo/ic_rainstorm_orange.png";
|
|
|
|
+import rainRed from "@/assets/images/map/warningInfo/ic_rainstorm_red.png";
|
|
|
|
+import tempWhite from "@/assets/images/map/warningInfo/ic_temperature_white.png";
|
|
|
|
+import tempBlue from "@/assets/images/map/warningInfo/ic_temperature_blue.png";
|
|
|
|
+import tempYellow from "@/assets/images/map/warningInfo/ic_temperature_yellow.png";
|
|
|
|
+import tempOrange from "@/assets/images/map/warningInfo/ic_temperature_orange.png";
|
|
|
|
+import tempRed from "@/assets/images/map/warningInfo/ic_temperature_red.png";
|
|
|
|
+import thunWhite from "@/assets/images/map/warningInfo/ic_thunderstorm_white.png";
|
|
|
|
+import thunBlue from "@/assets/images/map/warningInfo/ic_thunderstorm_blue.png";
|
|
|
|
+import thunYellow from "@/assets/images/map/warningInfo/ic_thunderstorm_yellow.png";
|
|
|
|
+import thunOrange from "@/assets/images/map/warningInfo/ic_thunderstorm_orange.png";
|
|
|
|
+import thunRed from "@/assets/images/map/warningInfo/ic_thunderstorm_red.png";
|
|
|
|
+import thphoonWhite from "@/assets/images/map/warningInfo/ic_typhoon_white.png";
|
|
|
|
+import thphoonBlue from "@/assets/images/map/warningInfo/ic_typhoon_blue.png";
|
|
|
|
+import thphoonYellow from "@/assets/images/map/warningInfo/ic_typhoon_yellow.png";
|
|
|
|
+import thphoonOrange from "@/assets/images/map/warningInfo/ic_typhoon_orange.png";
|
|
|
|
+import thphoonRed from "@/assets/images/map/warningInfo/ic_typhoon_red.png";
|
|
|
|
|
|
-const { district_type } = toRefs<any>(useDict('district_type'));
|
|
|
|
|
|
+const { district_type } = toRefs<any>(useDict("district_type"));
|
|
const router = useRouter();
|
|
const router = useRouter();
|
|
let detailsData = ref({
|
|
let detailsData = ref({
|
|
dataList: []
|
|
dataList: []
|
|
@@ -117,11 +148,12 @@ const option1 = reactive([
|
|
{ text: "24h", value: "24" }
|
|
{ text: "24h", value: "24" }
|
|
]);
|
|
]);
|
|
const queryParams = reactive({
|
|
const queryParams = reactive({
|
|
- value1: "1",
|
|
|
|
- value2: "24",
|
|
|
|
- type: "",
|
|
|
|
- level: "",
|
|
|
|
- area: ""
|
|
|
|
|
|
+ area_name: "",
|
|
|
|
+ history_time: "24",
|
|
|
|
+ future_time: "",
|
|
|
|
+ page: "",
|
|
|
|
+ pageSize: "",
|
|
|
|
+ keyword: ""
|
|
});
|
|
});
|
|
const handleClickMenu = (value1, value2) => {
|
|
const handleClickMenu = (value1, value2) => {
|
|
queryParams.value1 = value1;
|
|
queryParams.value1 = value1;
|
|
@@ -136,32 +168,69 @@ const showDetails = row => {
|
|
query: {
|
|
query: {
|
|
latitude: row.latitude,
|
|
latitude: row.latitude,
|
|
longitude: row.longitude,
|
|
longitude: row.longitude,
|
|
- name: encodeURIComponent(row.name)
|
|
|
|
|
|
+ name: row.company_name,
|
|
|
|
+ videoCode: row.video_unit_indexcode
|
|
}
|
|
}
|
|
});
|
|
});
|
|
};
|
|
};
|
|
const getData = () => {
|
|
const getData = () => {
|
|
- getPointInfo("11").then(res => {
|
|
|
|
- res.data.list.forEach(item => {
|
|
|
|
- detailsData.value.dataList.push(item);
|
|
|
|
- });
|
|
|
|
- });
|
|
|
|
- getPointInfo("12").then(res => {
|
|
|
|
- res.data.list.forEach(item => {
|
|
|
|
- detailsData.value.dataList.push(item);
|
|
|
|
- });
|
|
|
|
- });
|
|
|
|
- getPointInfo("13").then(res => {
|
|
|
|
- res.data.list.forEach(item => {
|
|
|
|
- detailsData.value.dataList.push(item);
|
|
|
|
- });
|
|
|
|
- });
|
|
|
|
- getPointInfo("14").then(res => {
|
|
|
|
- res.data.list.forEach(item => {
|
|
|
|
- detailsData.value.dataList.push(item);
|
|
|
|
- });
|
|
|
|
|
|
+ let temp = deepClone(queryParams);
|
|
|
|
+ temp.area_name = temp.area_name[0];
|
|
|
|
+ getChemicalcompany(temp).then(res => {
|
|
|
|
+ detailsData.value.dataList = res.data;
|
|
});
|
|
});
|
|
};
|
|
};
|
|
|
|
+const iconStatus = row => {
|
|
|
|
+ if (row.weather_warning_type === "暴雨预警") {
|
|
|
|
+ if (row.weather_warninglevel === "5") {
|
|
|
|
+ return rainWhite;
|
|
|
|
+ } else if (row.weather_warninglevel === "4") {
|
|
|
|
+ return rainBlue;
|
|
|
|
+ } else if (row.weather_warninglevel === "3") {
|
|
|
|
+ return rainYellow;
|
|
|
|
+ } else if (row.weather_warninglevel === "2") {
|
|
|
|
+ return rainOrange;
|
|
|
|
+ } else {
|
|
|
|
+ return rainRed;
|
|
|
|
+ }
|
|
|
|
+ } else if (row.weather_warning_type === "高温预警") {
|
|
|
|
+ if (row.weather_warninglevel === "5") {
|
|
|
|
+ return tempWhite;
|
|
|
|
+ } else if (row.weather_warninglevel === "4") {
|
|
|
|
+ return tempBlue;
|
|
|
|
+ } else if (row.weather_warninglevel === "3") {
|
|
|
|
+ return tempYellow;
|
|
|
|
+ } else if (row.weather_warninglevel === "2") {
|
|
|
|
+ return tempOrange;
|
|
|
|
+ } else {
|
|
|
|
+ return tempRed;
|
|
|
|
+ }
|
|
|
|
+ } else if (row.weather_warning_type === "雷雨大风") {
|
|
|
|
+ if (row.weather_warninglevel === "5") {
|
|
|
|
+ return thunWhite;
|
|
|
|
+ } else if (row.weather_warninglevel === "4") {
|
|
|
|
+ return thunBlue;
|
|
|
|
+ } else if (row.weather_warninglevel === "3") {
|
|
|
|
+ return thunYellow;
|
|
|
|
+ } else if (row.weather_warninglevel === "2") {
|
|
|
|
+ return thunOrange;
|
|
|
|
+ } else {
|
|
|
|
+ return thunRed;
|
|
|
|
+ }
|
|
|
|
+ } else {
|
|
|
|
+ if (row.weather_warninglevel === "5") {
|
|
|
|
+ return thphoonWhite;
|
|
|
|
+ } else if (row.weather_warninglevel === "4") {
|
|
|
|
+ return thphoonBlue;
|
|
|
|
+ } else if (row.weather_warninglevel === "3") {
|
|
|
|
+ return thphoonYellow;
|
|
|
|
+ } else if (row.weather_warninglevel === "2") {
|
|
|
|
+ return thphoonOrange;
|
|
|
|
+ } else {
|
|
|
|
+ return thphoonRed;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+};
|
|
getData();
|
|
getData();
|
|
</script>
|
|
</script>
|
|
|
|
|