forked from drone/command-center-dashboard

shuishen
2025-04-08 30d31694407fd089a3df140e141c9520e7fe811c
Merge branch 'master' of http://139.196.74.78:10010/r/drone/command-center-dashboard
7 files modified
1 files added
248 ■■■■■ changed files
.prettierrc.json 4 ●●●● patch | view | raw | blame | history
src/api/home/common.js 8 ●●●●● patch | view | raw | blame | history
src/api/home/event.js 19 ●●●●● patch | view | raw | blame | history
src/api/system/dictbiz.js 7 ●●●●● patch | view | raw | blame | history
src/components/CommonDateTime.vue 2 ●●● patch | view | raw | blame | history
src/views/Home/EventOverviewDetail/EventOverviewDetail.vue 2 ●●●●● patch | view | raw | blame | history
src/views/Home/EventOverviewDetail/EventOverviewDetailRight.vue 199 ●●●●● patch | view | raw | blame | history
src/views/TaskManage/components/TaskAlgorithmBusiness.vue 7 ●●●●● patch | view | raw | blame | history
.prettierrc.json
@@ -1,5 +1,5 @@
{
  "printWidth": 100,
  "printWidth": 120,
  "tabWidth": 2,
  "semi": false,
  "singleAttributePerLine": false,
@@ -21,4 +21,4 @@
      }
    }
  ]
}
}
src/api/home/common.js
@@ -1,13 +1,5 @@
import request from '@/axios'
// 字典查询 行业 算法 工单类型
export const getDictionary = params => {
    return request({
        url: `/blade-system/dict-biz/listByCodes?codes=${params}`,
        method: 'get',
    })
}
// 区域
export const deptsByAreaCode = params => {
    return request({
src/api/home/event.js
@@ -35,3 +35,22 @@
        data,
    })
}
// 大屏首页=>事件状态数量
export const getEventStatusNum = data => {
    return request({
        url: '/drone-device-core/jobEvent/eventStatusNum',
        method: 'post',
        data,
    })
}
// 工单列表=>事件数量(所有)
export const getEvenNum = data => {
    return request({
        url: '/drone-device-core/jobEvent/evenNum',
        method: 'post',
        data,
    })
}
src/api/system/dictbiz.js
@@ -86,3 +86,10 @@
        params,
    })
}
// 多个字典查询
export const getMultipleDictionary = params => {
    return request({
        url: `/blade-system/dict-biz/listByCodes?codes=${params}`,
        method: 'get',
    })
}
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,199 @@
<template>
    <div class="right">
        <div>工单列表</div>
        <div>
            <el-date-picker
                style="width: 100%"
                v-model="timeArr"
                type="daterange"
                :value-format="timeFormat"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="timeChange"
            />
        </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" alt="" />
                <div class="eventListItemText">
                    <div class="eventListItemName">{{ item.event_name }}</div>
                    <div class="eventListItemTime">{{ item.create_time }}</div>
                </div>
            </div>
        </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 dayjs from 'dayjs'
import { selectDevicePage } from '@/api/home/machineNest'
import { getMultipleDictionary } from '@/api/system/dictbiz'
import { getEvenNum, getEventPage, getEventStatusNum, getEventTrend } 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 total = ref(0)
const params = ref({
    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 getDictList = () => {
    getMultipleDictionary('WORK_ORDER_TYPE,SF').then(res => {
        workOrderType.value = res.data.data?.['WORK_ORDER_TYPE'] || []
    })
}
// 事件状态+数量
const statusList = ref([])
const getEventStatusNumFun = () => {
    const [start_date, end_date] = timeArr.value
    getEventStatusNum({ start_date, end_date }).then(res => {
        statusList.value = (res.data?.data || []).map(i => ({ ...i, active: false }))
        statusList.value[0].active = true
    })
}
// 事件+数量
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 {
    position: absolute;
    right: 0;
    top: 88px;
    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>
src/views/TaskManage/components/TaskAlgorithmBusiness.vue
@@ -13,7 +13,8 @@
</template>
<script setup>
import { getDictionary } from '@/api/home/common';
import { getMultipleDictionary } from '@/api/system/dictbiz'
// 接收父组件传参
const props = defineProps({
@@ -36,7 +37,7 @@
// 请求字典字段
const requestDictionary = () => {
  getDictionary('SF,HYLB').then((res) => {
  getMultipleDictionary('SF,HYLB').then((res) => {
    if (res.code !== 0) {
      // 处理数据
      taskAlgorithm.value = res.data.data['SF'];
@@ -57,4 +58,4 @@
onMounted(() => {
  requestDictionary();
});
</script>
</script>