|
@@ -7,15 +7,19 @@
|
|
|
</div>
|
|
|
<div class="card-content">
|
|
|
<div class="flex-end">
|
|
|
- <el-select
|
|
|
- v-model="tabActive"
|
|
|
- :teleported="false"
|
|
|
- cl
|
|
|
- >
|
|
|
- <el-option v-for="item in tabs" :key="item.value" :label="item.name" :value="item.value" />
|
|
|
+ <el-select v-model="tabActive" :teleported="false" cl>
|
|
|
+ <el-option
|
|
|
+ v-for="item in tabs"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.value"
|
|
|
+ />
|
|
|
</el-select>
|
|
|
</div>
|
|
|
- <img class="img-box" :src="liveMapState.data[0] ? liveMapState.data[0].pic_url : ''" />
|
|
|
+ <img
|
|
|
+ class="img-box"
|
|
|
+ :src="liveMapState.data[0] ? liveMapState.data[0].pic_url : ''"
|
|
|
+ />
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="card">
|
|
@@ -33,7 +37,7 @@
|
|
|
<div class="text">逐小时预报</div>
|
|
|
</div>
|
|
|
<div class="card-content">
|
|
|
- <Chart :option="option1" style="height:240px" />
|
|
|
+ <Chart :option="option1" style="height: 240px" />
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="card">
|
|
@@ -47,7 +51,8 @@
|
|
|
<div class="flex">
|
|
|
<div class="text1">漫坝</div>
|
|
|
<div class="text2 text-red">
|
|
|
- 81 <div class="text3">个</div>
|
|
|
+ 11
|
|
|
+ <div class="text3">个</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -56,7 +61,8 @@
|
|
|
<div class="flex">
|
|
|
<div class="text1">超保证</div>
|
|
|
<div class="text2 text-orange">
|
|
|
- 81 <div class="text3">个</div>
|
|
|
+ 40
|
|
|
+ <div class="text3">个</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -65,7 +71,8 @@
|
|
|
<div class="flex">
|
|
|
<div class="text1">超警戒</div>
|
|
|
<div class="text2 text-blue">
|
|
|
- 81 <div class="text3">个</div>
|
|
|
+ 37
|
|
|
+ <div class="text3">个</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -82,7 +89,8 @@
|
|
|
<div class="flex">
|
|
|
<div class="text1">漫坝</div>
|
|
|
<div class="text2 text-red">
|
|
|
- 81 <div class="text3">个</div>
|
|
|
+ 30
|
|
|
+ <div class="text3">个</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -91,7 +99,8 @@
|
|
|
<div class="flex">
|
|
|
<div class="text1">超保证</div>
|
|
|
<div class="text2 text-orange">
|
|
|
- 81 <div class="text3">个</div>
|
|
|
+ 69
|
|
|
+ <div class="text3">个</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -100,7 +109,8 @@
|
|
|
<div class="flex">
|
|
|
<div class="text1">超警戒</div>
|
|
|
<div class="text2 text-blue">
|
|
|
- 81 <div class="text3">个</div>
|
|
|
+ 41
|
|
|
+ <div class="text3">个</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -112,17 +122,23 @@
|
|
|
<div class="text">易涝点</div>
|
|
|
</div>
|
|
|
<div class="card-content2">
|
|
|
- <el-table :data="detailsData.dataList" header-cell-class-name="common-table-header" :row-class-name="getTableRowClass" table-layout='auto' class="common-table">
|
|
|
+ <el-table
|
|
|
+ :data="detailsData.dataList"
|
|
|
+ header-cell-class-name="common-table-header"
|
|
|
+ :row-class-name="getTableRowClass"
|
|
|
+ table-layout="auto"
|
|
|
+ class="common-table"
|
|
|
+ >
|
|
|
<el-table-column prop="area" align="center">
|
|
|
<template #header>
|
|
|
<div class="table-line" @click="showPicker = true">
|
|
|
- <div>{{ !!labelData ? labelData : '所有区县' }}</div>
|
|
|
+ <div>{{ !!labelData ? labelData : "所有区县" }}</div>
|
|
|
<i class="icon-down" />
|
|
|
</div>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column label="易涝点名称" prop="name" align="center" />
|
|
|
- <el-table-column label="提供单位" prop="area" align="center" />
|
|
|
+ <el-table-column label="提供单位" prop="data1" align="center" />
|
|
|
<el-table-column label="视频" prop="publicTime" align="center">
|
|
|
<template #default="scope">
|
|
|
<div class="btn" @click="handlePlay">播放</div>
|
|
@@ -133,30 +149,30 @@
|
|
|
</div>
|
|
|
<van-popup v-model:show="showPicker" round position="bottom">
|
|
|
<van-picker
|
|
|
- :columns="columns"
|
|
|
- @cancel="showPicker = false"
|
|
|
- @confirm="onSelectTypeConfirm"
|
|
|
+ :columns="columns"
|
|
|
+ @cancel="showPicker = false"
|
|
|
+ @confirm="onSelectTypeConfirm"
|
|
|
/>
|
|
|
</van-popup>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
-import {ElSelect, ElOption, ElTable, ElTableColumn} from "element-plus";
|
|
|
-import {onMounted, reactive, ref, watch} from "vue";
|
|
|
-import {getTemperature} from "@/api/disasterRiskMonitor/windAndFloodPrevention";
|
|
|
-import temp1 from '@/assets/temp1.jfif';
|
|
|
+import { ElSelect, ElOption, ElTable, ElTableColumn } from "element-plus";
|
|
|
+import { onMounted, reactive, ref, watch } from "vue";
|
|
|
+import { getTemperature } from "@/api/disasterRiskMonitor/windAndFloodPrevention";
|
|
|
+import temp1 from "@/assets/temp1.jfif";
|
|
|
import { chartOption2 } from "./chartOptions";
|
|
|
|
|
|
let tabs = reactive([
|
|
|
- { name: '6h降水', value: '6h_precipitation' },
|
|
|
- { name: '24h降水', value: '24h_precipitation' },
|
|
|
- { name: '整点气温', value: 'hourly_temperature' },
|
|
|
- { name: '24h最高温', value: '24h_max_temperature' },
|
|
|
- { name: '24h最低温', value: '24h_min_temperature' },
|
|
|
- { name: '24小时变温', value: '24h_variable_temperature' }
|
|
|
+ { name: "6h降水", value: "6h_precipitation" },
|
|
|
+ { name: "24h降水", value: "24h_precipitation" },
|
|
|
+ { name: "整点气温", value: "hourly_temperature" },
|
|
|
+ { name: "24h最高温", value: "24h_max_temperature" },
|
|
|
+ { name: "24h最低温", value: "24h_min_temperature" },
|
|
|
+ { name: "24小时变温", value: "24h_variable_temperature" }
|
|
|
]);
|
|
|
-let tabActive = ref('hourly_temperature');
|
|
|
+let tabActive = ref("hourly_temperature");
|
|
|
|
|
|
const liveMapState = reactive({
|
|
|
show: false,
|
|
@@ -169,29 +185,29 @@ let detailsData = ref({
|
|
|
dataList: []
|
|
|
});
|
|
|
let showPicker = ref(false);
|
|
|
-let labelData = ref('');
|
|
|
+let labelData = ref("");
|
|
|
const columns = ref([
|
|
|
- { text: '所有区县', value: '' },
|
|
|
- { text: '茂南区', value: '1' },
|
|
|
- { text: '信宜市', value: '2' }
|
|
|
-])
|
|
|
+ { text: "所有区县", value: "" },
|
|
|
+ { text: "茂南区", value: "1" },
|
|
|
+ { text: "信宜市", value: "2" }
|
|
|
+]);
|
|
|
let queryParams = reactive({
|
|
|
- area: ''
|
|
|
+ area: ""
|
|
|
});
|
|
|
const option1 = ref(chartOption2);
|
|
|
watch(
|
|
|
- () => liveMapState.show,
|
|
|
- () => {
|
|
|
- if (!liveMapState.show) {
|
|
|
- liveMapState.playing = false;
|
|
|
- liveMapState.activeIndex = 0;
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- immediate: true
|
|
|
+ () => liveMapState.show,
|
|
|
+ () => {
|
|
|
+ if (!liveMapState.show) {
|
|
|
+ liveMapState.playing = false;
|
|
|
+ liveMapState.activeIndex = 0;
|
|
|
}
|
|
|
+ },
|
|
|
+ {
|
|
|
+ immediate: true
|
|
|
+ }
|
|
|
);
|
|
|
-const onSelectTypeConfirm = ({selectedOptions}) => {
|
|
|
+const onSelectTypeConfirm = ({ selectedOptions }) => {
|
|
|
showPicker.value = false;
|
|
|
labelData.value = selectedOptions[0].text;
|
|
|
queryParams.area = selectedOptions[0].value;
|
|
@@ -199,27 +215,104 @@ const onSelectTypeConfirm = ({selectedOptions}) => {
|
|
|
};
|
|
|
|
|
|
const initData = () => {
|
|
|
- getTemperature({ args: tabActive.value }).then((res) => {
|
|
|
+ getTemperature({ args: tabActive.value }).then(res => {
|
|
|
liveMapState.data = res.data.max_level;
|
|
|
});
|
|
|
detailsData.value.dataList = [
|
|
|
- { area: '高州市', name: '大坡镇', data1: '' },
|
|
|
- { area: '高州市1', name: '大坡镇3', data1: '' },
|
|
|
- { area: '高州市2', name: '大坡镇4', data1: '' }
|
|
|
+ { area: "茂南区", name: "高山铁路桥底", data1: "城市管理和综合执法局" },
|
|
|
+ { area: "茂南区", name: "油城二路桥底", data1: "城市管理和综合执法局" },
|
|
|
+ { area: "茂南区", name: "榕园东北侧", data1: "城市管理和综合执法局" },
|
|
|
+ { area: "茂南区", name: "人民中路", data1: "城市管理和综合执法局" },
|
|
|
+ { area: "化州市", name: "橘城南路", data1: "城市管理和综合执法局" },
|
|
|
+ { area: "化州市", name: "下郭大道", data1: "城市管理和综合执法局" },
|
|
|
+ { area: "化州市", name: "河西沙埚村", data1: "城市管理和综合执法局" }
|
|
|
+ ];
|
|
|
+ option1.value.xAxis.data = [
|
|
|
+ "19时",
|
|
|
+ "20时",
|
|
|
+ "21时",
|
|
|
+ "22时",
|
|
|
+ "23时",
|
|
|
+ "24时",
|
|
|
+ "1时",
|
|
|
+ "2时",
|
|
|
+ "3时",
|
|
|
+ "40时",
|
|
|
+ "5时",
|
|
|
+ "6时",
|
|
|
+ "7时",
|
|
|
+ "8时",
|
|
|
+ "9时",
|
|
|
+ "10时",
|
|
|
+ "11时",
|
|
|
+ "12时",
|
|
|
+ "13时",
|
|
|
+ "14时",
|
|
|
+ "15时",
|
|
|
+ "16时",
|
|
|
+ "17时",
|
|
|
+ "18时"
|
|
|
+ ];
|
|
|
+ option1.value.series[0].data = [
|
|
|
+ "22",
|
|
|
+ "22",
|
|
|
+ "21",
|
|
|
+ "21",
|
|
|
+ "20",
|
|
|
+ "20",
|
|
|
+ "19",
|
|
|
+ "19",
|
|
|
+ "19",
|
|
|
+ "20",
|
|
|
+ "21",
|
|
|
+ "22",
|
|
|
+ "22",
|
|
|
+ "23",
|
|
|
+ "24",
|
|
|
+ "25",
|
|
|
+ "25",
|
|
|
+ "25",
|
|
|
+ "24",
|
|
|
+ "23",
|
|
|
+ "24",
|
|
|
+ "23",
|
|
|
+ "22",
|
|
|
+ "22"
|
|
|
+ ];
|
|
|
+ option1.value.series[1].data = [
|
|
|
+ "0.0",
|
|
|
+ "0.0",
|
|
|
+ "0.0",
|
|
|
+ "0.0",
|
|
|
+ "0.0",
|
|
|
+ "0.0",
|
|
|
+ "0.0",
|
|
|
+ "0.0",
|
|
|
+ "0.0",
|
|
|
+ "0.0",
|
|
|
+ "0.0",
|
|
|
+ "0.0",
|
|
|
+ "0.0",
|
|
|
+ "0.0",
|
|
|
+ "11.0",
|
|
|
+ "13.0",
|
|
|
+ "10.0",
|
|
|
+ "9.0",
|
|
|
+ "0.0",
|
|
|
+ "0.0",
|
|
|
+ "0.0",
|
|
|
+ "0.0",
|
|
|
+ "0.0",
|
|
|
+ "0.0"
|
|
|
];
|
|
|
- option1.value.xAxis.data = ['19时', '20时', '21时', '22时', '23时', '24时', '1时', '2时', '3时', '40时', '5时', '6时', '7时', '8时', '9时', '10时', '11时', '12时', '13时', '14时', '15时', '16时', '17时', '18时']
|
|
|
- option1.value.series[0].data = ['22', '22', '22', '22', '22', '22', '21', '22', '22', '23', '22', '24', '25', '26', '26.5', '27', '22', '23', '22', '22', '22', '23', '22', '22']
|
|
|
- option1.value.series[1].data = ['0.0', '0.0', '0.0', '0.0', '0.0', '0.0', '0.0', '0.0', '0.0', '0.0', '0.0', '0.0', '0.0', '0.0', '0.0', '0.0', '0.0', '0.0', '0.0', '0.0', '0.0', '0.0', '0.0', '0.0']
|
|
|
};
|
|
|
|
|
|
// table样式
|
|
|
-const getTableRowClass = ({rowIndex}) => {
|
|
|
- return rowIndex % 2 === 0 ? '' : 'common-table-tr';
|
|
|
-}
|
|
|
-
|
|
|
-const handlePlay = (id) => {
|
|
|
+const getTableRowClass = ({ rowIndex }) => {
|
|
|
+ return rowIndex % 2 === 0 ? "" : "common-table-tr";
|
|
|
+};
|
|
|
|
|
|
-}
|
|
|
+const handlePlay = id => {};
|
|
|
onMounted(() => {
|
|
|
initData();
|
|
|
});
|
|
@@ -231,17 +324,24 @@ onMounted(() => {
|
|
|
padding: 16px;
|
|
|
.card {
|
|
|
background-color: #ffffff;
|
|
|
- border: 1px solid #EAEDF7;
|
|
|
+ border: 1px solid #eaedf7;
|
|
|
box-shadow: 0 0 4px 0 #4554661a;
|
|
|
border-radius: 4px;
|
|
|
- background-image: linear-gradient(to bottom, #f3f7fd 0%, #f7fafe 20px, #fcfdff 50px, #ffffff 50px, #ffffff 100%);
|
|
|
+ background-image: linear-gradient(
|
|
|
+ to bottom,
|
|
|
+ #f3f7fd 0%,
|
|
|
+ #f7fafe 20px,
|
|
|
+ #fcfdff 50px,
|
|
|
+ #ffffff 50px,
|
|
|
+ #ffffff 100%
|
|
|
+ );
|
|
|
margin-top: 16px;
|
|
|
&:first-child {
|
|
|
margin-top: 0;
|
|
|
}
|
|
|
.card-header {
|
|
|
font-size: 16px;
|
|
|
- color: #414F64;
|
|
|
+ color: #414f64;
|
|
|
font-weight: bold;
|
|
|
line-height: 26px;
|
|
|
padding: 11px 10px;
|
|
@@ -251,7 +351,7 @@ onMounted(() => {
|
|
|
display: inline-block;
|
|
|
width: 6px;
|
|
|
height: 16px;
|
|
|
- background: url('@/assets/images/line.jpg') no-repeat;
|
|
|
+ background: url("@/assets/images/line.jpg") no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
margin-right: 3px;
|
|
|
}
|
|
@@ -268,7 +368,7 @@ onMounted(() => {
|
|
|
}
|
|
|
.img-box {
|
|
|
cursor: pointer;
|
|
|
- margin-top: 13px;
|
|
|
+ margin-top: 13px;
|
|
|
}
|
|
|
}
|
|
|
.card-content2 {
|
|
@@ -278,7 +378,8 @@ onMounted(() => {
|
|
|
.card-item {
|
|
|
width: 106px;
|
|
|
height: 71px;
|
|
|
- background: url('@/assets/images/disasterRiskMonitor/windAndFloodPrevention/box1.png') no-repeat;
|
|
|
+ background: url("@/assets/images/disasterRiskMonitor/windAndFloodPrevention/box1.png")
|
|
|
+ no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
@@ -287,7 +388,8 @@ onMounted(() => {
|
|
|
display: inline-block;
|
|
|
width: 18px;
|
|
|
height: 18px;
|
|
|
- background: url('@/assets/images/disasterRiskMonitor/windAndFloodPrevention/icon1.png') no-repeat;
|
|
|
+ background: url("@/assets/images/disasterRiskMonitor/windAndFloodPrevention/icon1.png")
|
|
|
+ no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
}
|
|
|
.flex {
|
|
@@ -306,16 +408,16 @@ onMounted(() => {
|
|
|
.text3 {
|
|
|
font-size: 12px;
|
|
|
font-weight: normal;
|
|
|
- color: #414F64;
|
|
|
+ color: #414f64;
|
|
|
}
|
|
|
.text-red {
|
|
|
- color: #FF2F3C;
|
|
|
+ color: #ff2f3c;
|
|
|
}
|
|
|
.text-orange {
|
|
|
- color: #FFAF00;
|
|
|
+ color: #ffaf00;
|
|
|
}
|
|
|
.text-blue {
|
|
|
- color: #2C81FF;
|
|
|
+ color: #2c81ff;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
@@ -323,7 +425,7 @@ onMounted(() => {
|
|
|
}
|
|
|
.btn {
|
|
|
font-size: 14px;
|
|
|
- color: #2C81FF;
|
|
|
+ color: #2c81ff;
|
|
|
}
|
|
|
}
|
|
|
</style>
|