<template> <div class="detail-real-box"> <div class="realbox-top"> <div class="tiemflex"> <div class="timeSearch"> <span> 时间选择</span> <el-date-picker clearable v-model="locationTime" type="datetime" @change="onLoadData" value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择时间"> </el-date-picker> </div> <div class="timeSearch"> <span> 时间类型</span> <el-radio-group v-model="undergoname" @change="onLoadData"> <el-radio-button v-for="item in timelist" :key="item.id" :label="item.id">{{ item.name }}</el-radio-button> </el-radio-group> </div> </div> <div id="yqfxmap"> <img class="center" :src="image.src"> <img class="center" src="/img/boundary.png"> <!-- <jyfxmap></jyfxmap> --> </div> </div> <div class="realbox-bottom"> <el-table v-loading="loading" height='100%' :data="allData.listData" @row-click="handleSelectionChange" :row-class-name="clickRowclassName"> <el-table-column label="开始时间" align="center" prop="startTime" /> <el-table-column label="雨量站名称" align="center" prop="areaName" /> <el-table-column label="最强一小时降雨(mm)" align="center" prop="maxOneHour" /> <el-table-column label="累计降雨(mm)" align="center" prop="totalRainfall" /> <el-table-column label="统计时间(小时)" align="center" prop="undergoTime" /> </el-table> </div> </div> </template> <script setup> import { getImageUrl, } from "@/utils/ruoyi"; import { useRouter } from "vue-router"; const router = useRouter(); const { proxy } = getCurrentInstance(); import moment from "moment" import useUserStore from '@/store/modules/user' const appStore = useUserStore() import jyfxmap from "@/components/Detailbox/jyfxmap.vue"; import { rainAnalyse, } from "@/api/cockpit"; const weatherpop = ref(false) const props = defineProps({ pointfeature: { type: Object, default: {}, }, }); const image = ref({}); const vehicleTrajectoryList = ref([]); const loading = ref(false); const locationTime = ref(moment().format("YYYY-MM-DD HH:mm:ss")) // const undergoname = ref(1) //存在一起会改其它值,所以单独存储 const timelist = ref([ { id: 1, name: "1小时", }, { id: 2, name: "2小时", }, { id: 3, name: "3小时" }, { id: 6, name: "6小时" }, { id: 12, name: "12小时" }, { id: 24, name: "24小时" }, ]) const dateRange = ref([ moment().format("YYYY-MM-DD 00:00:00"), moment().format("YYYY-MM-DD HH:mm:ss") ]) const recordTime = ref('') const ylzlist = ref([]) const ylzcode = ref('') const allData = reactive({ yuqingicon: getImageUrl('yujing_icon', 'cockpit'), jsdList: [ { name: '站点名称', value: 'XXX积水点', }, { name: '站点编号', value: '039600001', }, { name: '地址', value: '周口市川汇区XXX街道', }, { name: ' 安 装 人', value: '张三 136****8659', }, { name: '当前降雨量', value: '0.18m', }, { name: '当月累计降雨量', value: '0.18m', }, { name: '本年累计降雨量', value: '0.18m', }, { name: '去年累计降雨量', value: '0.18m', }, // { // name: '安装照片', // type: 'src', // value: getImageUrl('install', 'cockpit'), // }, ], url: getImageUrl('install', 'cockpit'), srcList: [getImageUrl('install', 'cockpit')], chartData: { data: [ { value: '120', name: '医疗', }, { value: '150', name: '餐饮', }, { value: '50', name: '工业', }, { value: '65', name: '建筑', }, { value: '115', name: '其他', }, ], refresh: 1 }, listData: [], }) const GetObj = ref({}) const clickrowindex = ref('') function showpic () { }; function fuzhiobj () { GetObj.value = props.pointfeature switch (Number(GetObj.value.pointType)) { // 雨量站 case 2: // allData.jsdList = [ // { // name: '站点名称', // value: GetObj.value.stName, // }, // { // name: '站点编号', // value: GetObj.value.stCode, // }, // { // name: '地址', // value: , // }, // { // name: ' 安 装 人', // value: GetObj.value.person, // }, // { // name: '当前降雨量', // value: GetObj.value.geneValue + GetObj.value.geneUnit, // }, // { // name: '累计降雨量(当月)', // value: '', // }, // { // name: '累计降雨量(本年)', // value: '', // }, // { // name: '累计降雨量(去年)', // value: '', // }, // // { // // name: '安装照片', // // type: 'src', // // value: getImageUrl('install', 'cockpit'), // // }, // ], onLoadData() break; } } function clickRowclassName ({ row, rowindex }) { console.log(row, rowindex); if (row.stCode == clickrowindex.value) { return 'table-click-row' } } // 多选框选中数据 function handleSelectionChange (selection) { console.log(selection); clickrowindex.value = selection.stCode } //请求数据 function onLoadData () { let pamas = { locationTime: locationTime.value, //定位时间 minutRainParam: 5, //分钟级降雨量参数 undergoTime: undergoname.value //经历时间(小时) }; rainAnalyse(pamas).then(response => { allData.listData = response.data.rainTableInfos; image.value = window.newfiberMapUtils.krigingImages(allData.listData.map(i => ({ lon: i.x, lat: i.y, geneValue: Number(i.totalRainfall) }))); allData.listData.map(item => { item.areaName = item.areaName.substring(5) item.maxOneHour = item.maxOneHour.toFixed(2) item.totalRainfall = item.totalRainfall.toFixed(2) }) }).catch(() => { allData.loading = false; }) } // onMounted(() => { // console.log(props.pointfeature); // }) fuzhiobj() </script> <style lang="scss" scoped> @import "@/assets/styles/map-detail.scss"; .detail-real-box { display: block; } .realbox-top { height: 268px; #yqfxmap { width: 100%; height: calc(100% - 42px); display: flex; justify-content: center; align-items: center; position: relative; img { height: 100%; max-width: 100%; } } } .center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .realbox-bottom { height: calc(100% - 268px); } .tiemflex { display: flex; justify-content: space-between; .timeSearch { width: auto; span { min-width: 60px; } } } ::v-deep .el-table .table-click-row { background: rgba(33, 85, 109) !important; } </style>