feat: 事件根据日期更新

chenyao

2025-04-15 828f2f412b36e03384d62874d3283f05afa7d4ea

feat: 事件根据日期更新

 src/components/CommonDateTime.vue

@@ -25,8 +25,10 @@

<script setup>
import dayjs from 'dayjs';
import { useStore } from 'vuex'
import { ref, defineEmits } from 'vue';

const store = useStore()
const emit = defineEmits(['change']);

const model = defineModel();
@@ -57,9 +59,22 @@

let timeClick = (item,index) => {
  checked.value = item;
  model.value = dateRanges[item];
  emit('change', dateRanges[item],timeListEnum[index]);
  const newDateRange = dateRanges[item];
  store.commit('setEventTimeType', [checked.value, timeListEnum[index]]);
  model.value = newDateRange;
  emit('change', newDateRange, timeListEnum[index]);
};
onMounted(() => {
  // 如果父组件传入了值，就使用父组件的值 by cpz
  if (model.value && model.value.length === 2) {
    // 根据传入的日期判断是哪个时间范围
    const startDate = model.value[0];
    const endDate = model.value[1];
    if (startDate !== endDate) {
      checked.value = 'week';
    }
  }
});
</script>

<style scoped lang="scss">

 src/hooks/useMapAggregation/useMapAggregation.js

@@ -13,6 +13,7 @@
import cesiumOperation from '@/utils/cesium-tsa'
import { getDeviceRegion, getDeviceRegionCount, getEventDetails, getMapEvents } from '@/api/home/aggregation'
import { PolyGradientMaterial } from '@/utils/cesium/Material'
import { start } from 'nprogress'
/**
 * 机巢聚合功能
 */
@@ -53,6 +54,8 @@
  const store = useStore()
  const userAreaCode = computed(() => store.state.user.userInfo.detail.areaCode)
  const selectedAreaCode = computed(() => store.state.user.selectedAreaCode)
  let saveAreaCode = null;
  let saveParams = { area_code: '',date_enum:'CURRENT_WEEK' };


  // 确定缩放比例
@@ -105,6 +108,7 @@
  // 事件散点
  let eventList = []
  function processChildren (childrens) {
    // console.log(childrens, '事件点')
    return (childrens || []).map(item => {
      const arr = processChildren(item.childrens)
      if (item.data) {
@@ -118,13 +122,15 @@
      if (arr.length !== 0) {
        returnObj.childrens = arr
      }
      console.log(returnObj, '111111')
      return returnObj
    })
  }

  // 获取事件聚合
  function getMapEventCount (area_code) {
    return getMapEvents({ area_code,date_enum:'CURRENT_WEEK' }).then(res => {
  function getMapEventCount (params) {
    console.log(5555555)
    return getMapEvents(params).then(res => {
      const resData = res?.data?.data
      if (resData?.data) {
        eventList = resData?.data
@@ -163,7 +169,10 @@
  const initMapData = async areaCode => {
    eventList = []
    if (!areaCode) return
    const list = type === 'device' ? await getDeviceCount(areaCode) : await getMapEventCount(areaCode)
    saveAreaCode = areaCode;
    saveParams.area_code = areaCode;
    console.log(type, '444')
    const list = type === 'device' ? await getDeviceCount(areaCode) : await getMapEventCount(saveParams)
    const splashedList = type === 'device'
      ? await getDeviceList(areaCode)
      : eventList.map(i => ({ eventId: i.id, latitude: Number(i.latitude), longitude: Number(i.longitude), type: 'event' }))
@@ -235,6 +244,23 @@
    { deep: true }
  )

  // 监听 日 周 月 年
  watch(() => store.state.home.eventTimeType, (newVal) => {
    if (!saveAreaCode) return
    if (newVal) {
      saveParams = { area_code:saveAreaCode,date_enum: store.state.home.eventTimeParams }
      initMapData(saveAreaCode);
    }
  });
  // 监听事件右侧日期范围
  watch(() => store.state.home.eventTimeRang, (newVal) => {
    if (!saveAreaCode) return
    if (newVal) {
      saveParams = { area_code:saveAreaCode,start_date: newVal[0], end_date: newVal[1]}
      initMapData(saveAreaCode);
    }
  });

  //散点机巢
  function splashed (row) {
    row.splashedList.forEach((item, index) => {

 src/store/modules/home.js

@@ -14,6 +14,10 @@
    singleTotal: {}, // 统计单个机巢数据
    // 项目id
    selectedWorkSpaceId: window.localStorage.getItem('bs_workspace_id'),
    // 事件 日 周 月 年
    eventTimeType: 'day',
    eventTimeParams: 'CURRENT_WEEK',
    eventTimeRang: '',
    wsMessage: {},
    deviceState: {
      gatewayInfo: {},
@@ -113,6 +117,14 @@
                dock.work_osd = info.host
            }
        },
    setEventTimeType : (state, data) => {
      console.log('33333')
      state.eventTimeType = data[0]
      state.eventTimeParams = data[1]
    },
    setEventTimeRang : (state, time) => {
      state.eventTimeRang = time
    },
    },
    getters: {
        test(state) {

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

@@ -23,12 +23,18 @@
import EventTrendAnalysis from '@/views/Home/EventOverviewDetail/EventOverviewDetailLeft/EventTrendAnalysis.vue'
import EventTop5 from '@/views/Home/EventOverviewDetail/EventOverviewDetailLeft/EventTop5.vue'

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 store = useStore()

const params = ref({
    date_enum: 'TODAY',
    date_enum: 'CURRENT_WEEK',
    end_date: undefined,
    start_date: undefined,
})
@@ -65,7 +71,7 @@
    align-items: center;

    .dateTime {
        width: 356px;
        width: 400px;
        margin: 0 0 8px 0;
    }


 src/views/Home/EventOverviewDetail/EventOverviewDetailRight.vue

@@ -114,11 +114,17 @@
import cesiumOperation from '@/utils/cesium-tsa'
import CommonTitle from '@/components/CommonTitle.vue'
import { pxToRem } from '@/utils/rem'
import { useStore } from 'vuex'

const store = useStore()
// const eventTimeRange = computed(() => store.state.home.eventTimeRange)
const timeFormat = 'YYYY-MM-DD HH:mm:ss'
const today = dayjs().format(timeFormat)
const oneWeekAgo = dayjs().subtract(7, 'day').format(timeFormat)
const timeArr = ref([oneWeekAgo, today])
// const oneWeekAgo = dayjs().subtract(7, 'day').format(timeFormat)
// const timeArr = ref([oneWeekAgo, today])
const startOfWeek = dayjs().startOf('week').add(1, 'day').format(timeFormat)
const endOfWeek = dayjs().endOf('week').add(1, 'day').format(timeFormat)
const timeArr = ref([startOfWeek, endOfWeek])
const deviceList = ref([])

const total = ref(0)
@@ -211,6 +217,8 @@
    const [start_date, end_date] = timeArr.value
    params.value.start_date = start_date
    params.value.end_date = end_date
    // 提交数据，更新聚合
    store.commit('setEventTimeRang', timeArr.value);
    // 重置
    getEventStatusNumFun()
    getEventList()
@@ -237,6 +245,24 @@
    })
}

const getDateRange = unit => {
  if (unit === 'today') {
    return [dayjs().format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')];
  }
  return [dayjs().startOf(unit).format('YYYY-MM-DD HH:mm:ss'), dayjs().endOf(unit).format('YYYY-MM-DD HH:mm:ss')];
};

// 监听事件时间范围变化
watch(() => store.state.home.eventTimeType, (newVal) => {
    timeArr.value = getDateRange(newVal);
    const [start_date, end_date] = getDateRange(newVal);
    params.value.start_date = start_date
    params.value.end_date = end_date
    getEventStatusNumFun()
    getEventList()
    getList()
}, { immediate: false,deep: true })

onMounted(() => {
    getDeviceList()
    getDictList()

 src/views/SignMachineNest/MachineLeft/InspectionRaskDetails.vue

@@ -1,6 +1,6 @@
<!-- 巡检任务数据 -->
<!-- 任务事件概况 -->
<template>
    <common-title title="巡检任务详情" :style="{ marginLeft: pxToRem(14) }"></common-title>
    <common-title title="任务事件概况" :style="{ marginLeft: pxToRem(14) }"></common-title>
    <div class="inspection-rask-details">
        <CommonDateTime :style="{ top: pxToRem(14),marginLeft: pxToRem(10) }" v-model="newTime" @change="getData"></CommonDateTime>
        <div class="chart-container" ref="chartRef"></div>