<template>
<!-- 物联感知详情 -->
<div class="homeTrendDetail animate__animated animate__bounce animate__fadeIn">
<div class="contents">
<div class="search">
<p class="date valuecurrent">{{ valuecurrent }}</p>
<div class="datecon">
<p class="date" @click="dateshow = true">{{ currentDate }}</p>
<div @click="getdays" class="datetimes" :class="timeactives == 1 ? 'actives' : ''">一天</div>
<div @click="getweeks" class="datetimes" :class="timeactives == 2 ? 'actives' : ''">一周</div>
</div>
<van-popup v-model:show="dateshow" position="bottom" :style="{ height: '90%' }">
<van-date-picker @confirm="onConfirm" @cancel="dateshow = false" v-model="datepickera" />
</van-popup>
<van-cell
class="fieldValues"
:value="fieldValue"
is-link
readonly
name="picker"
title="类型"
label="类型"
placeholder="点击选择类型"
@click="showPicker3 = true"
/>
<van-popup v-model:show="showPicker3" position="bottom" :style="{ height: '90%' }">
<van-picker :columns="Options" @confirm="onConfirm2" @cancel="showPicker3 = false" />
</van-popup>
<van-icon name="cross" class="close" size="25" @click="onClose" />
</div>
<div id="blackEchart" v-show="echartOption.xAxis.data.length > 0"></div>
<van-empty
v-show="echartOption.xAxis.data.length == 0"
description="暂无数据"
style="height: 100vw; width: 100vh"
/>
</div>
</div>
</template>
<script>
import * as echarts from 'echarts';
import { useRouter, useRoute } from 'vue-router';
import { monitorPropertyEchart } from '@/api/MonitoringInformation.js';
import { useStore } from '@/pinia/store.js';
export default {
name: 'homeTrendDetail',
setup() {
const pinias = useStore();
const router = useRouter();
const route = useRoute();
const allData = reactive({
datepickera: ['2024', '02', '20'],
selected: '',
timeactives: 1,
monitordata: '', //因子名称
monitorValueList: '', //所有因子
showPicker3: false,
xzvalue: '',
fieldValue: '', //因子
yzzvalue: '', //因子
Options: '',
Option1: [
{
value: 'z',
text: '水位',
},
{
value: 'va',
text: '流速',
},
{
value: 'turb',
text: '浊度',
},
],
Option2: [
{
value: 'pd',
text: '今日降雨量',
},
{
value: 'p1',
text: '一小时降雨量',
},
],
Option3: [
{
value: 'z',
text: '水位',
},
{
value: 'va',
text: '流速',
},
{
value: 'turb',
text: '浊度',
},
],
Option4: [
{
value: 'z',
text: '水位',
},
],
Option5: [
{
value: 'z',
text: '水位',
},
{
value: 'codmn',
text: 'COD',
},
{
value: 'cq1',
text: '累计流量',
},
],
Option6: [
{
value: 'z',
text: '水位',
},
],
dateshow: false,
currentDate: '',
currentDate2: '',
defaultDate: '',
minDate: new Date(2010, 0, 1),
maxDate: new Date(2010, 0, 31),
valuecurrent: '',
query: {
stCode: '',
// startTime: '',
// endTime: '',
},
keyId: '',
echartOption: {
color: ['#155bf7'],
grid: {
top: '15%',
right: '20px',
left: '50px',
bottom: '40px',
},
xAxis: {
type: 'category',
data: ['09-09', '09-10'],
boundaryGap: true,
},
yAxis: {
type: 'value',
},
legend: {
top: '30px',
right: '20px',
show: false,
},
tooltip: {
show: true,
trigger: 'axis',
confine: true,
},
series: [],
},
});
watch(
route,
(val) => {
if (!!!route.query.stCode) return;
allData.query.stCode = route.query.stCode;
allData.valuecurrent = route.query.stName;
if (route.query.active == 1) {
allData.Options = allData.Option1;
} else if (route.query.active == 2) {
allData.Options = allData.Option2;
} else if (route.query.active == 3) {
allData.Options = allData.Option3;
} else if (route.query.active == 4) {
allData.Options = allData.Option4;
} else if (route.query.active == 5) {
allData.Options = allData.Option5;
} else if (route.query.active == 6) {
allData.Options = allData.Option6;
}
allData.fieldValue = allData.Options[0].text;
allData.yzzvalue = allData.Options[0].value;
setTimeout(() => {
const now = new Date();
const year = now.getFullYear();
const month = (now.getMonth() + 1).toString().padStart(2, '0'); // 月份是从0开始的
const day = now.getDate().toString().padStart(2, '0');
allData.currentDate = `${year}-${month}-${day}`;
allData.datepickera = [year, month, day];
getdays();
}, 100);
},
{ immediate: true }
);
//选择因子
const onConfirm2 = (val) => {
allData.fieldValue = val.selectedOptions[0].text;
allData.yzzvalue = val.selectedOptions[0].value;
allData.showPicker3 = false;
geteachartsdata();
};
// 获取数据
const geteachartsdata = async () => {
let params = { ...allData.query };
params.startTime = allData.currentDate2 + ' 00:00:00';
params.endTime = allData.currentDate + ' 23:59:59';
params.monitorCodeList = allData.yzzvalue;
let res = await monitorPropertyEchart(params);
if (res?.code === 200) {
let chartDom = document.getElementById('blackEchart');
let myChart = echarts.init(chartDom);
allData.echartOption.xAxis.data = res.data.propertyMonitorXList;
if (Boolean(res.data.propertyMonitorList.length)) {
allData.echartOption.dataZoom = [
{
//默认控制x轴
type: 'slider', //图标下方的伸缩条
show: true, //是否显示
realtime: true,
start: 0, //伸缩条开始位置
end: 100, //伸缩条结束位置
},
];
allData.echartOption.series = [
{
data: res.data.propertyMonitorList[0].ylist,
name: res.data.propertyMonitorList[0].monitorPropertyName,
smooth: true,
type: 'bar',
},
];
allData.echartOption.yAxis = {
name: res.data.propertyMonitorList[0].propertyUnit,
type: 'value',
};
}
myChart.clear();
myChart.setOption(allData.echartOption);
}
};
// 获取数据 流量站-菜园坝有数据
const getData = async () => {
pinias.showLoading();
let chartDom = document.getElementById('blackEchart');
let myChart = echarts.init(chartDom);
let params = { ...allData.query };
let res = await waterRiverMassMonitorHistoryData(params);
if (res && res.code == 200) {
pinias.hideLoading();
let datas = res.data;
let timeArr = [],
valueArr = [];
datas.map((item) => {
timeArr.push(item.ttTime);
valueArr.push(item[allData.keyId]);
});
allData.echartOption.xAxis.data = timeArr;
allData.echartOption.series[0].data = valueArr;
myChart.clear();
myChart.setOption(allData.echartOption);
}
};
//日期选择
const onConfirm = ({ selectedValues }) => {
console.log(selectedValues, 888888);
allData.currentDate = selectedValues.join('-');
console.log(allData.currentDate, 99999999999);
if (allData.timeactives == 1) {
getdays();
} else {
getweeks();
}
allData.dateshow = false;
};
// 获取前一天日期
const getdays = () => {
allData.timeactives = 1;
const currentDate = new Date(allData.currentDate);
const yesterday = new Date(currentDate.setDate(currentDate.getDate() - 1));
const yearYesterday = yesterday.getFullYear();
const monthYesterday = (yesterday.getMonth() + 1).toString().padStart(2, '0');
const dayYesterday = yesterday.getDate().toString().padStart(2, '0');
allData.currentDate2 = `${yearYesterday}-${monthYesterday}-${dayYesterday}`;
geteachartsdata();
};
// 获取前一周日期
const getweeks = () => {
allData.timeactives = 2;
const currentDate = new Date(allData.currentDate);
const lastWeek = new Date(currentDate.setDate(currentDate.getDate() - 7));
const yearLastWeek = lastWeek.getFullYear();
const monthLastWeek = (lastWeek.getMonth() + 1).toString().padStart(2, '0');
const dayLastWeek = lastWeek.getDate().toString().padStart(2, '0');
allData.currentDate2 = `${yearLastWeek}-${monthLastWeek}-${dayLastWeek}`;
geteachartsdata();
};
// 返回上一级
function onClose() {
router.go(-1);
}
onMounted(() => {});
onBeforeMount(() => {});
return {
...toRefs(allData),
onClose,
onConfirm,
onConfirm2,
geteachartsdata,
getdays,
getweeks,
};
},
};
</script>
<style lang="less" scoped>
.homeTrendDetail {
background: rgba(255, 255, 255, 1);
height: 100vh;
.contents {
position: fixed;
top: 0;
left: 0;
z-index: 100;
transform-origin: left top;
transition: all 0.25s ease-in-out;
transform: scale(1) rotate(90deg) translateY(-100%);
.search {
background: #ffffff;
box-shadow: 0px 12px 31px 0px rgba(18, 69, 101, 0.2);
font-size: 26px;
width: 100vh;
height: 80px;
line-height: 80px;
position: absolute;
left: 0px;
z-index: 999;
display: flex;
align-items: center;
justify-content: space-around;
color: #585858;
.valuecurrent {
width: 420px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
.datecon {
width: 600px;
margin-left: 30px;
display: flex;
align-items: center;
}
.datetimes {
width: 60px;
padding: 0 15px;
height: 50px;
line-height: 50px;
border: 1px solid#f5f6f8;
margin-left: 10px;
}
.actives {
color: #ffffff;
background-color: #155bf7;
border-radius: 3px;
}
.date {
margin-left: 30px;
}
.van-icon {
margin-right: 30px;
font-size: 50px;
}
}
#blackEchart {
width: 100vh;
height: 100vw;
}
}
}
.fieldValues {
width: 300px !important;
height: 50px;
line-height: 50px;
margin-left: 30px;
padding: 0 !important;
color: #585858 !important;
}
.van-calendar {
height: 80%;
}
.van-picker {
margin-left: 300px;
width: 800px;
height: 600px;
}
</style>
