fix: 天气显示

罗广辉

2025-04-21 2800fa4f32f3900509cb4d6eefaf2bfaf54efdd7

 src/views/Home/EventOverviewDetail/EventOverviewDetailLeft/EventOverviewDetailLeft.vue

@@ -1,9 +1,12 @@
<template>
   <div class="left">
      <div class="do-return" @click="goBack">
         <img src="@/assets/images/signMachineNest/return.png" alt="" />
      </div>
      <common-title title="事件数据分析" />
   <!--时间 天气-->
   <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 />
@@ -11,6 +14,7 @@
   </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'
@@ -18,33 +22,54 @@
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 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: 'TODAY',
   date_enum: 'CURRENT_WEEK',
   end_date: undefined,
   start_date: undefined,
})
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>
<style scoped lang="scss">
.left {
.event-overview-detail-left {
   position: absolute;
   top: 88px;
   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;
@@ -54,17 +79,16 @@
      width: 356px;
      margin: 0 0 8px 0;
   }
}
.do-return {
   position: absolute;
   top: 136px;
   left: 430px;
   cursor: pointer;

   .do-return {
      position: absolute;
      top: 50px;
      right: -50px;
      cursor: pointer;

      img {
         width: 40px;
         height: 40px;
      }
   img {
      width: 60px;
      height: 33px;
   }
}
</style>