| New file |
| | |
| | | <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> |