<template>
|
<!--时间 天气-->
|
<common-weather></common-weather>
|
<!--返回-->
|
<div class="do-return" :style="{left:isHideBottomIcon?pxToRem(430):pxToRem(46)}" @click="goBack">
|
<img src="@/assets/images/return.png" alt="" />
|
</div>
|
<common-title v-show="isHideBottomIcon" :style="{left:pxToRem(14)}" title="事件数据分析" />
|
<div v-show="isHideBottomIcon" class="event-overview-detail-left">
|
<CommonDateTime class="dateTime" v-model="timeArr" @change="timeChange" />
|
<EventDataAnalysis />
|
<EventTrendAnalysis />
|
<EventTop5 />
|
</div>
|
</template>
|
<script setup>
|
import CommonWeather from '@/components/CommonWeather.vue';
|
import EventDataAnalysis from './EventDataAnalysis.vue'
|
import CommonTitle from '@/components/CommonTitle.vue'
|
import CommonDateTime from '@/components/CommonDateTime.vue'
|
import dayjs from 'dayjs'
|
import { useStore } from 'vuex'
|
import EventTrendAnalysis from '@/views/Home/EventOverviewDetail/EventOverviewDetailLeft/EventTrendAnalysis.vue'
|
import EventTop5 from '@/views/Home/EventOverviewDetail/EventOverviewDetailLeft/EventTop5.vue'
|
import { pxToRem } from '@/utils/rem'
|
|
// 选中机巢默认日
|
// const today = dayjs().format('YYYY-MM-DD')
|
// const timeArr = ref([today, today])
|
// 选中事件默认为周
|
const startOfWeek = dayjs().startOf('week').add(1, 'day').format('YYYY-MM-DD')
|
const endOfWeek = dayjs().endOf('week').add(1, 'day').format('YYYY-MM-DD')
|
const timeArr = ref([startOfWeek, endOfWeek])
|
|
const isHideBottomIcon = computed(() => store.state.common.isHideBottomIcon)
|
|
const store = useStore()
|
|
const params = ref({
|
date_enum: 'CURRENT_WEEK',
|
end_date: undefined,
|
start_date: undefined,
|
})
|
provide('eventOverviewParams', params)
|
|
// 时间变化
|
const timeChange = (value, date_enum, type) => {
|
params.value = {
|
...params.value,
|
date_enum,
|
}
|
store.commit('setEventTimeType', [type, date_enum]);
|
}
|
const goBack = () => {
|
store.commit('setHideBottomIcon', true)
|
store.commit('setIsEventOverviewDetail', false)
|
}
|
</script>
|
<style scoped lang="scss">
|
.event-overview-detail-left {
|
position: absolute;
|
width: 390px;
|
height: 870px;
|
top: 166px;
|
margin-left: 29px;
|
background: linear-gradient(
|
270deg,
|
rgba(31, 62, 122, 0) 0%,
|
rgba(31, 62, 122, 0.35) 21%,
|
#1f3e7a 100%
|
);
|
border-radius: 0px 0px 0px 0px;
|
color: #e7f5ff;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
|
.dateTime {
|
width: 356px;
|
margin: 0 0 8px 0;
|
}
|
}
|
.do-return {
|
position: absolute;
|
top: 136px;
|
left: 430px;
|
cursor: pointer;
|
|
img {
|
width: 60px;
|
height: 33px;
|
}
|
}
|
</style>
|
