| | |
| | | <template> |
| | | <!--时间 天气--> |
| | | <common-weather></common-weather> |
| | | <div class="event-overview-detail-left"> |
| | | <!--返回--> |
| | | <div class="do-return" @click="goBack"> |
| | | <img src="@/assets/images/return.png" alt="" /> |
| | | </div> |
| | | <common-title title="事件数据分析" /> |
| | | <!--返回--> |
| | | <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 /> |
| | |
| | | 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 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() |
| | | |
| | |
| | | provide('eventOverviewParams', params) |
| | | |
| | | // 时间变化 |
| | | const timeChange = (value, date_enum) => { |
| | | 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> |
| | |
| | | .event-overview-detail-left { |
| | | position: absolute; |
| | | width: 390px; |
| | | height: 920px; |
| | | top: 120px; |
| | | height: 870px; |
| | | top: 166px; |
| | | margin-left: 29px; |
| | | background: linear-gradient( |
| | | 270deg, |
| | |
| | | align-items: center; |
| | | |
| | | .dateTime { |
| | | width: 400px; |
| | | width: 356px; |
| | | margin: 0 0 8px 0; |
| | | } |
| | | } |
| | | .do-return { |
| | | position: absolute; |
| | | top: 136px; |
| | | left: 430px; |
| | | cursor: pointer; |
| | | |
| | | .do-return { |
| | | position: absolute; |
| | | |
| | | right: -50px; |
| | | cursor: pointer; |
| | | |
| | | img { |
| | | width: 60px; |
| | | height: 33px; |
| | | } |
| | | img { |
| | | width: 60px; |
| | | height: 33px; |
| | | } |
| | | } |
| | | </style> |