feat: 分页列表60%

罗广辉

2025-04-08 d86e9475f004f687cd13d5563c8c6fd933e92cfa

feat: 分页列表60%

 src/api/home/event.js

@@ -35,3 +35,13 @@
        data,
    })
}


// 大屏首页=>事件状态数量
export const getEventStatusNum = data => {
    return request({
        url: '/drone-device-core/jobEvent/eventStatusNum',
        method: 'post',
        data,
    })
}

 src/components/CommonDateTime.vue

@@ -51,7 +51,7 @@
};

const change = value => {
  // todo 我对接
  // todo 待对接
  // emit('change', value);
};


 src/views/Home/EventOverviewDetail/EventOverviewDetail.vue

@@ -1,7 +1,9 @@
<template>
    <EventOverviewDetailLeft />
    <EventOverviewDetailRight/>
</template>
<script setup>
import EventOverviewDetailLeft from './EventOverviewDetailLeft/EventOverviewDetailLeft.vue'
import EventOverviewDetailRight from '@/views/Home/EventOverviewDetail/EventOverviewDetailRight.vue'
</script>
<style scoped lang="scss"></style>

 src/views/Home/EventOverviewDetail/EventOverviewDetailRight.vue

New file
@@ -0,0 +1,114 @@
<template>
    <div class="right">
        <div>工单列表</div>

        <div>
            <el-date-picker
                v-model="timeArr"
                type="daterange"
                value-format="YYYY-MM-DD"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="change"
                disabled
            />
            <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>

            <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>
                </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>
    </div>
</template>
<script setup>
import dayjs from 'dayjs'
import { selectDevicePage } from '@/api/home/machineNest'
import { getMultipleDictionary } from '@/api/system/dictbiz'
import { getEventStatusNum } from '@/api/home/event'

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 deviceList = ref([])

const params = ref({
    device_sn: '',
    word_order_type: '',
    SFType:[]
})

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 statusList = ref([])
const getEventStatusNumFun = () => {
    const [start_date, end_date] = timeArr.value
    getEventStatusNum({ start_date, end_date }).then(res => {
        statusList.value = res.data?.data || []
    })
}

const change = value => {}

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