<template> <div class="detail-real-box"> <div class="realbox-left"> <div class="left-item" v-for="(item,index) in allData.jsdList" :key="index"> <div class="item-name">{{item.name}}</div> <div class="item-value" v-if="item.type=='src'"> <el-image style=" height: 40px" :src="item.value" :zoom-rate="1.2" :preview-src-list="allData.srcList" :initial-index="0" fit="cover" /> </div> <div class="item-value" v-else :title="item.value"> <div> {{item.value}} </div> </div> </div> </div> <div class="realbox-right"> <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 class="timeSearch"> <span> 时间选择</span> <!-- <el-date-picker v-model="dateRange" value-format="YYYY-MM-DD HH:mm:ss" type="datetimerange" range-separator="至" start-placeholder="开始日期" @change="GetEchartlist" end-placeholder="结束日期" style="width: 150px"></el-date-picker> --> <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 clearttimesearch"> <span>累计降雨量</span> {{ allData.obj2.totalRainfall&&allData.obj2.totalRainfall.toFixed(3)||0 }}mm </div> <div class="echartitem"> <ylzecharts :data="allData.chartInfo" :refresh="allData.chartInfo.refresh"></ylzecharts> </div> </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 { rainAnalyse, Getlaststation } from "@/api/cockpit"; import ylzecharts from "@/components/Detailbox/ylzecharts.vue"; //雨量站echarts const weatherpop = ref(false) const props = defineProps({ pointfeature: { type: Object, default: {}, }, }); const undergoname = ref(1) //存在一起会改其它值,所以单独存储 const locationTime = ref(moment().format("YYYY-MM-DD HH:mm:ss")) // 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 ylzlist = ref([]) const ylzcode = ref('') const allData = reactive({ obj2: "", yuqingicon: getImageUrl('yujing_icon', 'cockpit'), jsdList: [ { name: '站点名称', value: 'XXX积水点', }, { name: '站点编号', value: '039600001', }, { name: '地址', value: '周口市川汇区XXX街道XXXXXXXXX', }, { name: ' 安 装 人', value: '张三 136****8659', }, { name: '日降雨量(8:00-次日7:59)', 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')], chartInfo: { loading: false, data: [ { value: '120', name: '医疗', }, { value: '150', name: '餐饮', }, { value: '50', name: '工业', }, { value: '65', name: '建筑', }, { value: '115', name: '其他', }, ], refresh: 1 }, listData: [], rainEchats: [], }) const GetObj = ref({}) function showpic () { }; function Getstation () { let fomrdata = new FormData() fomrdata.append('type', 1) fomrdata.append('stCode', GetObj.value.stCode) Getlaststation(fomrdata).then(res => { switch (Number(GetObj.value.pointType)) { // 雨量站 case 2: allData.jsdList = [ { name: '站点名称', value: GetObj.value.stName, }, { name: '站点编号', value: GetObj.value.stCode, }, { name: '地址', value: GetObj.value.address, }, { name: ' 安 装 人', value: GetObj.value.person, }, { name: '日 降 雨 量(8:00-次日7:59)', value: res.data.day + 'mm', }, { name: '累 计 降 雨 量(当月)', value: res.data.month + 'mm', }, { name: '累 计 降 雨 量(本年)', value: res.data.year + 'mm', }, { name: '累 计 降 雨 量(去年)', value: res.data.lastYear + 'mm', }, // { // name: '安装照片', // type: 'src', // value: getImageUrl('install', 'cockpit'), // }, ], onLoadData() break; } }) } //请求数据 function onLoadData () { let pamas = { locationTime: locationTime.value, //定位时间 minutRainParam: 5, //分钟级降雨量参数 undergoTime: undergoname.value //经历时间(小时) }; rainAnalyse(pamas).then(response => { allData.listData = response.data.rainTableInfos; allData.rainEchats = response.data.rainEchats; allData.listData.map(item => { item.areaName = item.areaName.substring(5) }) var obj = allData.rainEchats.filter(item => { return item.stCode == GetObj.value.stCode; }); allData.obj2 = response.data.rainTableInfos.filter(item => { return item.stCode == GetObj.value.stCode; })[0] console.log('obj2', allData.obj2); console.log('obj', obj); var x = obj[0].x; var y = obj[0].y; // var x = [1, 2, 3, 4, 5,]; // var y = [1, 3, 68, 34, 2]; if (x || y) { setTimeout(() => { allData.chartInfo.loading = false; allData.chartInfo.XAxis = x; allData.chartInfo.YAxis = y; allData.chartInfo.refresh = Math.random(); }, 500); } else { setTimeout(() => { allData.chartInfo.loading = false; allData.chartInfo.YAxis = []; allData.chartInfo.XAxis = []; allData.chartInfo.DataName = ''; allData.chartInfo.refresh = Math.random(); }, 500); } }).catch(() => { allData.loading = false; }) } onMounted(() => { console.log(props.pointfeature); }) GetObj.value = props.pointfeature Getstation() </script> <style lang="scss" scoped> @import "@/assets/styles/map-detail.scss"; .realbox-left { width: 328px !important; } .realbox-right { width: calc(100% - 328px) !important; .timeSearch { width: 100%; span { min-width: 80px; } } .clearttimesearch { background: transparent; border: none; } .echartitem { height: calc(100% - 126px); } } .item-name { // font-size: 12px; } </style>