- <template>
- <div id="yuliangjiance">
- <div class="topdate">
- <!-- 日期和时间选择: -->
- <DateSelect
- style="width: 320px"
- v-model:dateTime="dateTimearr"
- :format="'YYYY-MM-DD HH:mm'"
- :valueFormat="'YYYY-MM-DD HH:mm'"
- @change="changeTime"
- />
- </div>
- <div class="toptable">
- <div class="nametitle">降雨统计信息</div>
- <div style="display: flex; flex-wrap: wrap">
- <div class="tablebox">
- <div class="label">降雨开始时间到结束时间</div>
- <div class="value">
- {{ parseTime(dateTimearr[0], '{y}-{m}-{d} {h}:{i}') }}
- 至
- {{ parseTime(dateTimearr[1], '{y}-{m}-{d} {h}:{i}') }}
- </div>
- </div>
- <div class="tablebox two">
- <div class="labeltwo">累计降雨量</div>
- <div class="valuetwo">{{ getDetail.rainTotal }}</div>
- </div>
- <div class="tablebox two">
- <div class="labeltwo">降雨时长</div>
- <div class="valuetwo">{{ getDetail.rainHour }}</div>
- </div>
- <div class="tablebox two">
- <div class="labeltwo">最大小时雨强</div>
- <div class="valuetwo">{{ getDetail.maxRain }}</div>
- </div>
- <div class="tablebox two">
- <div class="labeltwo">最大小时雨强时间</div>
- <div class="valuetwo">{{ getDetail.maxRainTime }}</div>
- </div>
- </div>
- </div>
- <el-divider />
- <div class="bottomecharts">
- <div class="nametitle">降雨过程线</div>
- <!-- <div class="posiechart">
- <span v-if="dateTimearr">
- {{ parseTime(dateTimearr[0], '{y}-{m}-{d} {h}:{i}') }}
- 至
- {{ parseTime(dateTimearr[1], '{y}-{m}-{d} {h}:{i}') }}
- </span>
- {{ echartstitle }} 雨量
- </div> -->
- <div class="echartbody" v-if="showecharts">
- <RainfallEcharts :data="chartData2" :refresh="chartData2.refresh"></RainfallEcharts>
- </div>
- </div>
- </div>
- </template>
-
- <script setup name="yuliangjiance">
- import RainfallEcharts from '@/views/pictureOnMap/page/components/DialogTabs/component/RainfallEcharts.vue';
- const { proxy } = getCurrentInstance();
-
- import { GettHourDataechart, getRainDetail } from '@/api/MonitorAssetsOnMap';
-
- const props = defineProps({
- // 数据id
- dataID: {
- type: String,
- },
- dataCode: {
- type: String,
- },
- // 默认打开tabs的key
- RefreshName: {
- type: String,
- },
- tabsType: {
- type: String,
- },
- typeName: {
- type: String,
- },
- });
-
- const echartstitle = ref('');
- const getDetail = ref({});
- const showecharts = ref(false);
- const dateTimearr = ref([proxy.moment().format('YYYY-MM-DD 00:00'), proxy.moment().format('YYYY-MM-DD HH:mm')]);
- const chartData2 = ref({
- // xAxis: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
- // yAxis: [28.5, 43.8, 68.3, 78.5, 116.6, 149.6, 188.8, 171.2, 90.3, 61, 47.7, 22.7],
- // yAxis2: [7, 9, 10, 9, 11, 10, 12, 12, 10, 9, 8, 6],
- xAxis: [],
- yAxis: [],
- yAxis2: [],
- refresh: 1,
- });
-
- // 获得头部详情
- function getList() {
- let data = {
- stCode: props.dataID,
- };
- if (dateTimearr.value) {
- data.start = dateTimearr.value[0];
- data.end = dateTimearr.value[1];
- } else {
- data.start = null;
- data.end = null;
- }
-
- getRainDetail(data).then(response => {
- getDetail.value = response.data;
- });
- }
-
- function changeTime() {
- getList();
- Getecharts();
- }
-
- // 获取降雨过程线echart
- function Getecharts() {
- chartData2.value = {
- xAxis: [],
- yAxis: [],
- yAxis2: [],
- };
- chartData2.value.refresh = Math.random();
-
- let data = {
- stCode: props.dataID,
- };
- if (dateTimearr.value) {
- data.start = dateTimearr.value[0];
- data.end = dateTimearr.value[1];
- } else {
- data.start = null;
- data.end = null;
- }
-
- GettHourDataechart(data).then(res => {
- console.log(res);
-
- chartData2.value = {
- xAxis: res.data.date,
- yAxis: res.data.rainData,
- yAxis2: res.data.totalRainData,
- };
-
- chartData2.value.refresh = Math.random();
- });
- }
-
- onMounted(() => {
- changeTime();
- console.log('chartInfo2', props, chartData2.value);
- setTimeout(() => {
- showecharts.value = true;
- chartData2.value.refresh = Math.random();
- }, 100);
- });
- </script>
-
- <style lang="scss" scoped>
- @import '@/assets/styles/mapcss.scss';
-
- #yuliangjiance {
- width: 100%;
- height: 100%;
- color: #ccefff;
-
- .topdate {
- height: 32px;
- padding: 0 10px;
- text-align: right;
- }
-
- .toptable {
- height: 100px;
- padding: 0 30px;
- color: #fff;
-
- .tablebox {
- width: 100%;
- display: flex;
- margin-bottom: 4px;
- // justify-content: space-between;
-
- .label,
- .value {
- width: 50%;
- text-align: left;
- }
-
- .labeltwo {
- width: 40%;
- }
- .valuetwo {
- width: 60%;
- }
- }
-
- .two {
- width: 50%;
- }
- }
-
- .nametitle {
- height: 30px;
- text-align: center;
- font-weight: bold;
- font-size: 16px;
- padding: 0 10px;
- color: #fff;
- }
-
- .bottomecharts {
- position: relative;
- height: calc(100% - 182px);
-
- .posiechart {
- position: absolute;
- left: 50px;
- width: 100%;
- }
-
- .echartbody {
- width: 100%;
- height: calc(100% - 30px);
- }
- }
- }
- </style>