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

chenyao

2025-04-12 80790ccc8b8ee6ac8db201f0f6c2d136fefd5a69

 src/views/Home/EventOverviewDetail/EventOverviewDetailRight.vue

@@ -1,60 +1,76 @@
<template>
   <div class="right">
   <UserOperate/>
   <div class="event-overviewdetail-right">
      <div>工单列表</div>

      <div>
         <el-date-picker
            style="width: 100%"
            v-model="timeArr"
            type="daterange"
            value-format="YYYY-MM-DD"
            :value-format="timeFormat"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="change"
            disabled
            @change="timeChange"
         />
         <el-select v-model="params.device_sn" placeholder="请选择" size="large" filterable clearable>
            <el-option
               v-for="item in deviceList"
               :label="item.nickname"
               :value="item.device_sn"
               :key="item.device_sn"
            />
         </el-select>
      </div>

         <el-select
            v-model="params.word_order_type"
            placeholder="请选择"
            size="large"
            filterable
            clearable
         >
            <el-option
               v-for="item in workOrderType"
               :label="item.dictValue"
               :value="item.dictKey"
               :key="item.dictKey"
            />
         </el-select>
         <div>
            <div v-for="item in statusList">
               <div>{{ item.name }}</div>
               <div>{{ item.num || 0 }}</div>
      <el-select style="width: 100%" v-model="params.device_sn" placeholder="机巢" filterable clearable @change="getList">
         <el-option v-for="item in deviceList" :label="item.nickname" :value="item.device_sn" :key="item.device_sn" />
      </el-select>
      <el-select v-model="params.word_order_type" placeholder="工单类型" filterable clearable @change="getList">
         <el-option v-for="item in workOrderType" :label="item.dictValue" :value="item.dictKey" :key="item.dictKey" />
      </el-select>
      <div class="statusList">
         <div v-for="item in statusList" @click="statusClick(item)" :class="{ active: item.active }">
            <div>{{ item.name }}</div>
            <div>{{ item.num || 0 }}</div>
         </div>
      </div>

      <el-checkbox-group v-model="params.eventKeys" @change="getList">
         <el-checkbox
            v-for="item in eventList"
            :label="item.name + ' ' + item.value"
            :value="item.status"
            :key="item.dictKey"
         />
      </el-checkbox-group>

      <div class="eventList">
         <div class="eventListItem" v-for="item in list">
            <img class="eventListItemImg" 
         :src="item.photo_url ? 
        item.photo_url.substring(0, item.photo_url.lastIndexOf('.')) + '_small' + 
        item.photo_url.substring(item.photo_url.lastIndexOf('.')) 
        : ''" 
      alt="" 
    />
            <div class="eventListItemText">
               <div class="eventListItemName">{{ item.event_name }}</div>
               <div @click="positioning(item)">定位</div>
               <div class="eventListItemTime">{{ item.create_time }}</div>
            </div>
         </div>

         <el-checkbox-group v-model="params.SFType">
            <el-checkbox v-for="item in SFDictList" :label="item.dictValue":value="item.dictKey"  :key="item.dictKey"/>
         </el-checkbox-group>

      </div>

      <el-pagination
         background
         v-model:current-page="params.current"
         v-model:page-size="params.size"
         layout="total,  prev, pager, next"
         :total="total"
         @change="pageChange"
      />
   </div>
</template>
<script setup>
import UserOperate from '@/components/UserOperate.vue';
import dayjs from 'dayjs'
import { selectDevicePage } from '@/api/home/machineNest'
import { getMultipleDictionary } from '@/api/system/dictbiz'
import { getEventStatusNum } from '@/api/home/event'
import { getEvenNum, getEventPage, getEventStatusNum, getEventTrend } from '@/api/home/event'
import cesiumOperation from '@/utils/cesium-tsa'

const timeFormat = 'YYYY-MM-DD HH:mm:ss'
const today = dayjs().format(timeFormat)
@@ -62,53 +78,138 @@
const timeArr = ref([oneWeekAgo, today])
const deviceList = ref([])

const total = ref(0)
const params = ref({
   device_sn: '',
   word_order_type: '',
   SFType:[]
   start_date: timeArr.value[0],
   end_date: timeArr.value[1],
   device_sn: undefined,
   word_order_type: undefined,
   status: undefined,
   eventKeys: [],
   current: 1,
   size: 10,
})

const statusClick = row => {
   params.value.status = row.id || undefined
   statusList.value = statusList.value.map(item => ({
      ...item,
      active: item.name === row.name,
   }))
   getList()
}

const getDeviceList = async () => {
   const res = await selectDevicePage({ current: 1, size: 99999, type: 1 })
   deviceList.value = res.data?.data?.records || []
}

// 工单类型
const workOrderType = ref([])
const SFDictList = ref([])
const getDictList = () => {
   getMultipleDictionary('WORK_ORDER_TYPE,SF').then(res => {
      workOrderType.value = res.data.data?.['WORK_ORDER_TYPE'] || []
      SFDictList.value = res.data.data?.['SF'] || []
   })
}
const { flyTo } = cesiumOperation();
const positioning = (row) =>{
   const longitude = Number(row.longitude)
   const latitude = Number(row.latitude)
   flyTo({ longitude, latitude }, 1, 1000);
}

// 事件状态+数量
const statusList = ref([])
const getEventStatusNumFun = () => {
   const [start_date, end_date] = timeArr.value
   getEventStatusNum({ start_date, end_date }).then(res => {
      statusList.value = res.data?.data || []
      statusList.value = (res.data?.data || []).map(i => ({ ...i, active: false }))
      statusList.value[0].active = true
   })
}

const change = value => {}
// 事件+数量
const eventList = ref([])
const getEventList = () => {
   const [start_date, end_date] = timeArr.value
   getEvenNum({ start_date, end_date }).then(res => {
      eventList.value = res.data.data
   })
}

const timeChange = value => {
   const [start_date, end_date] = timeArr.value
   params.value.start_date = start_date
   params.value.end_date = end_date
   // 重置
   getEventStatusNumFun()
   getEventList()
   params.value.status = undefined
   params.value.eventKeys = undefined
   getList()
}

const pageChange = val => {
   params.value.current = val
   getList()
}

const list = ref([])
const getList = () => {
   getEventPage(params.value).then(res => {
      const resData = res.data.data
      list.value = resData?.records || []
      total.value = resData.total
   })
}

onMounted(() => {
   getDeviceList()
   getDictList()
   getEventStatusNumFun()
   getEventList()
   getList()
})
</script>
<style scoped lang="scss">
.right {
.event-overviewdetail-right {
   position: absolute;
   right: 0;
   top: 88px;
   color: black;
   right: 29px;
   top: 122px;
   // color: black;
   display: flex;
   flex-direction: column;
   align-items: center;
   height: 900px;
   width: 400px;
   background: white;
   font-size: 18px;

   .statusList {
      display: flex;
      flex-wrap: wrap;

      .active {
         background: #19ad8d;
      }
   }

   .eventList {
      display: flex;
      flex-wrap: wrap;

      .eventListItem {
         .eventListItemImg {
            width: 120px;
            height: 100px;
         }

         .eventListItemText {
            display: flex;
            justify-content: space-between;
            font-size: 16px;
         }
      }
   }
}
</style>