<template>
|
<UserOperate/>
|
<div class="event-overviewdetail-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 ?
|
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>
|
</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 { 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)
|
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 { 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 || []).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">
|
.event-overviewdetail-right {
|
position: absolute;
|
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>
|
