<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>
