Merge branch 'master' of http://139.196.74.78:10010/r/drone/command-center-...

chenyao

2025-04-18 dfac8531d4ed65183ebffcbc7f88aea16f6ac64b

 src/views/Home/HomeRight/EventOverview.vue

@@ -9,7 +9,10 @@
        </div>
        <div class="contentBox">
          <div class="overviewItem" v-for="item in eventTypeList" :key="item.name">
            <div class="itemName"><img :src="item.img" alt="" />{{ item.name }}</div>
                  <div class="itemName">
                     <img :src="item.img" alt="" />
                     {{ item.name }}
                  </div>
            <div class="itemValue" :style="{ color: item.color }">{{ item.value }}</div>
          </div>
        </div>
@@ -17,9 +20,10 @@
      <CommonDateTime class="dateTime" v-model="timeArr" @change="timeChange" />

      <el-select
        class="homeRightSelect"
            :teleported="false"
            class="homeRightSelect ztzf-select"
        v-model="params.device_sn"
        placeholder="请选择"
            placeholder="请选择机巢"
        size="large"
        filterable
        :remote-method="remoteMethod"
@@ -30,12 +34,7 @@
        v-select-load:uavHomePopper="scrollEvent"
        @change="selectChange"
      >
        <el-option
          v-for="item in deviceList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
            <el-option v-for="item in deviceList" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
      <div class="completion">
        <img class="completion-left-img" :src="completionLeft" alt="" />
@@ -49,20 +48,20 @@
  </div>
</template>
<script setup>
import CommonTitle from '@/components/CommonTitle.vue';
import overviewImg1 from '@/assets/images/home/homeRight/overview1.png';
import overviewImg2 from '@/assets/images/home/homeRight/overview2.png';
import overviewImg3 from '@/assets/images/home/homeRight/overview3.png';
import overviewImg4 from '@/assets/images/home/homeRight/overview4.png';
import overviewImg5 from '@/assets/images/home/homeRight/overview5.png';
import overviewImg6 from '@/assets/images/home/homeRight/overview6.png';
import completionLeft from '@/assets/images/home/homeRight/completionLeft.png';
import * as echarts from 'echarts';
import CommonDateTime from '@/components/CommonDateTime.vue';
import VSelectLoad from '@/directive/selectLoad';
import { getJobEventBrokerLine, getJobEventByStatus, getJobEventTotal } from '@/api/home';
import dayjs from 'dayjs';
import { selectDevicePage } from '@/api/home/machineNest';
import CommonTitle from '@/components/CommonTitle.vue'
import overviewImg1 from '@/assets/images/home/homeRight/overview1.png'
import overviewImg2 from '@/assets/images/home/homeRight/overview2.png'
import overviewImg3 from '@/assets/images/home/homeRight/overview3.png'
import overviewImg4 from '@/assets/images/home/homeRight/overview4.png'
import overviewImg5 from '@/assets/images/home/homeRight/overview5.png'
import overviewImg6 from '@/assets/images/home/homeRight/overview6.png'
import completionLeft from '@/assets/images/home/homeRight/completionLeft.png'
import * as echarts from 'echarts'
import CommonDateTime from '@/components/CommonDateTime.vue'
import VSelectLoad from '@/directive/selectLoad'
import { getJobEventBrokerLine, getJobEventByStatus, getJobEventTotal } from '@/api/home'
import dayjs from 'dayjs'
import { selectDevicePage } from '@/api/home/machineNest'
import { useStore } from 'vuex'
import useEchartsResize from '@/hooks/useEchartsResize'

@@ -116,7 +115,7 @@
    },
  ],
  series: [],
};
}

const eventTypeList = ref([
  { name: '待审核', value: 0, img: overviewImg1, color: '#8CFEA7', status: '2' },
@@ -125,8 +124,8 @@
  { name: '处理中', value: 0, img: overviewImg4, color: '#FFC398', status: '3' },
  { name: '已完成', value: 0, img: overviewImg5, color: '#AFD9FB', status: '4' },
  { name: '已完结', value: 0, img: overviewImg6, color: '#11C4FF', status: '5' },
]);
const seriesObj = {};
])
const seriesObj = {}
eventTypeList.value.forEach(item => {
  seriesObj[item.status] = {
    type: 'bar',
@@ -137,13 +136,13 @@
    name: item.name,
    itemStyle: { color: item.color },
    data: [],
  };
});
const echartsRef = ref(null);
   }
})
const echartsRef = ref(null)
let { chart } = useEchartsResize(echartsRef)
const deviceList = ref([]);
const today = dayjs().format('YYYY-MM-DD');
const timeArr = ref([today, today]);
const deviceList = ref([])
const today = dayjs().format('YYYY-MM-DD')
const timeArr = ref([today, today])
const completionRateSeries = {
  name: '完成率',
  type: 'line',
@@ -160,22 +159,22 @@
    focus: 'series',
  },
  data: [], // 示例数据，根据实际完成率计算
};
}

const eventTotal = ref(0);
let deviceTotal = 0;
const eventTotal = ref(0)
let deviceTotal = 0
const devicePageParams = ref({
  current: 1,
  size: 10,
  total: 0,
  nickname: '',
});
})
const params = ref({
  date_enum: 'TODAY',
  device_sn: '',
  end_date: undefined,
  start_date: undefined,
});
})

const store = useStore()
const details = () =>{
@@ -185,95 +184,96 @@

// 远程查询
const remoteMethod = nickname => {
  devicePageParams.value.nickname = nickname;
  devicePageParams.value.current = 1;
  devicePageParams.value.size = 10;
  deviceList.value = [];
  getTableList();
};
   devicePageParams.value.nickname = nickname
   devicePageParams.value.current = 1
   devicePageParams.value.size = 10
   deviceList.value = []
   getTableList()
}
// 滚动查询
const scrollEvent = () => {
  const { current, size } = devicePageParams.value;
   const { current, size } = devicePageParams.value
  if (current * size < deviceTotal) {
    devicePageParams.value.current = current + 1;
    getTableList();
      devicePageParams.value.current = current + 1
      getTableList()
  }
};
}
// 机巢列表数据
const getTableList = async () => {
  const res = await selectDevicePage({ ...devicePageParams.value, type: 1 });
  const arr = res?.data?.data?.records || [];
   const res = await selectDevicePage({ ...devicePageParams.value, type: 1 })
   const arr = res?.data?.data?.records || []
  deviceList.value = deviceList.value.concat(
    arr.map(item => ({
      value: item.device_sn,
      label: item.nickname,
    }))
  );
  deviceTotal = res?.data?.data?.total || 0;
};
   )
   deviceTotal = res?.data?.data?.total || 0
}
// 下拉变化
const selectChange = val => {
  getData();
};
   getData()
}

// 时间变化
const timeChange = (value, date_enum) => {
  params.value = {
    ...params.value,
    date_enum,
  };
  getData();
};
   }
   getData()
}

// 获取柱状图数据
const getBarChartData = () => {
  getJobEventBrokerLine(params.value).then(res => {
    const list = res?.data?.data || [];
    echartsOption.xAxis.data = list.map(item => item.name);
      const list = res?.data?.data || []
      echartsOption.xAxis.data = list.map(item => item.name)
      // 赋值前清空数据
      Object.keys(seriesObj).forEach(key => {seriesObj[key].data = []})
      Object.keys(seriesObj).forEach(key => {
         seriesObj[key].data = []
      })
    list.forEach(item => {
      item.data.forEach((item1, index) => {
            if (!seriesObj?.[item1.status]) return
        seriesObj[item1.status].data.push(item1.value);
      });
    });
    completionRateSeries.data = list.map(item => item.rate);
    echartsOption.series = Object.values(seriesObj);
    echartsOption.series.push(completionRateSeries);
    chart.value.setOption(echartsOption);
  });
};
            seriesObj[item1.status].data.push(item1.value)
         })
      })
      completionRateSeries.data = list.map(item => item.rate)
      echartsOption.series = Object.values(seriesObj)
      echartsOption.series.push(completionRateSeries)
      chart.value.setOption(echartsOption)
   })
}

//  事件类型数据
const getTypeData = () => {
  getJobEventByStatus(params.value).then(res => {
    const resList = res?.data?.data || [];
      const resList = res?.data?.data || []
    resList.forEach(item => {
      eventTypeList.value.forEach(item1 => {
        if (item1.name === item.name) {
          item1.value = item.num;
               item1.value = item.num
        }
      });
    });
  });
};
         })
      })
   })
}

// 获取事件概括数据
const getData = () => {
  getTypeData();
  getBarChartData();
};
   getTypeData()
   getBarChartData()
}

onMounted(() => {
  getJobEventTotal().then(res => {
    eventTotal.value = res?.data?.data || 0;
  });
  getData();
  getTableList();
});
      eventTotal.value = res?.data?.data || 0
   })
   getData()
   getTableList()
})
</script>

<style scoped lang="scss">
.homeRightSelect {
  width: 356px;
@@ -298,12 +298,7 @@
.eventOverview {
  width: 390px;
  height: 445px;
  background: linear-gradient(
    270deg,
    #1f3e7a 0%,
    rgba(31, 62, 122, 0.35) 79%,
    rgba(31, 62, 122, 0) 100%
  );
   background: linear-gradient(270deg, #1f3e7a 0%, rgba(31, 62, 122, 0.35) 79%, rgba(31, 62, 122, 0) 100%);
  border-radius: 0px 0px 0px 0px;
  opacity: 0.85;
  margin: 3px 0 0 0;