forked from drone/command-center-dashboard
src/views/SignMachineNest/MachineRight/MachineStatus/MachineTableDetails/DeviceEvent.vue
@@ -1,47 +1,60 @@ <template> <el-divider content-position="left">相关事件 {{total}}次</el-divider> <el-table :data="list" style="width: 100%"> <el-table-column prop="id" label="id" /> <el-table-column prop="event_name" label="名称" /> <el-table-column prop="media_type" label="类型" /> <el-table-column prop="ai_types" label="关联算法" /> <el-table-column prop="photo_url" label="图片url" /> <el-table-column prop="video_url" label="视频url" /> <el-table-column prop="status" label="状态"> <template #default="scope"> <el-tag v-if="scope.row.status === 0" type="info">待处理</el-tag> <el-tag v-if="scope.row.status === 1" type="success">待分拨</el-tag> <el-tag v-if="scope.row.status === 2" type="warning">待处理</el-tag> <el-tag v-if="scope.row.status === 3" type="success">处理中</el-tag> <el-tag v-if="scope.row.status === 4" type="success">已完成</el-tag> <el-tag v-if="scope.row.status === 5" type="success">已完结</el-tag> </template> </el-table-column> <el-table-column prop="event_dict_key" label="event_dict_key" /> <el-table-column prop="create_time" label="创建时间" /> <div class="deviceevent-container"> <div class="machineTableDetailsTitle"> <p> 相关事件 <span>{{ total }}</span >件 </p> </div> <div class="deviceevent-table"> <el-table :data="list" :row-class-name="tableRowClassName" style="width: 100%;" :row-style="{ height: '48px', fontSize: '14px', 'text-align': 'center' }" :header-cell-style="{ 'text-align': 'center', height: '36px', fontSize: '14px' }"> <el-table-column label="序号" type="index" width="60"> <template #default="{ $index }"> {{ ($index + 1).toString().padStart(2, '0') }} </template> </el-table-column> <el-table-column prop="id" label="事件编号" /> <el-table-column prop="event_name" label="事件名称" /> <el-table-column prop="event_name" label="所属单位 " /> <el-table-column prop="media_type" label="事件内容" /> <el-table-column prop="ai_types" label="关联算法" /> <el-table-column prop="status" label="事件状态"> <template #default="scope"> <el-tag v-if="scope.row.status === 0" type="info">待处理</el-tag> <el-tag v-if="scope.row.status === 1" type="success">待分拨</el-tag> <el-tag v-if="scope.row.status === 2" type="warning">待处理</el-tag> <el-tag v-if="scope.row.status === 3" type="success">处理中</el-tag> <el-tag v-if="scope.row.status === 4" type="success">已完成</el-tag> <el-tag v-if="scope.row.status === 5" type="success">已完结</el-tag> </template> </el-table-column> <el-table-column label="操作" > <template #default="scope"> <el-button type="primary" link @click="examine(scope.row)">审核</el-button> <el-button type="primary" link @click="distribution(scope.row)">分拨</el-button> </template> </el-table-column> </el-table> <el-pagination background :page-sizes="[10, 20, 30, 50]" v-model:current-page="sizeParams.current" v-model:page-size="sizeParams.size" layout="total, sizes, prev, pager, next, jumper" :total="total" @change="pageChange" /> <el-table-column label="操作"> <template #default="scope"> <el-button type="primary" link @click="examine(scope.row)">审核</el-button> <el-button type="primary" link @click="distribution(scope.row)">分拨</el-button> </template> </el-table-column> </el-table> </div> <el-pagination background :page-sizes="[10, 20, 30, 50]" v-model:current-page="sizeParams.current" v-model:page-size="sizeParams.size" layout="prev, pager, next, jumper" :total="total" @change="pageChange" /> </div> </template> <script setup> import { useStore } from 'vuex' import { getDeviceEventList } from '@/api/home/machineNest' import { ElMessage } from 'element-plus'; import { ElMessage } from 'element-plus' const list = ref([]) const params = ref({ @@ -49,7 +62,7 @@ }) const sizeParams = ref({ current: 1, size: 10, size: 5, }) const store = useStore() const device_sn = computed(() => store.state.home.singleUavHome.device_sn) @@ -59,7 +72,7 @@ ElMessage.warning('正在加急开发中...') } const examine = row => { ElMessage.warning('正在加急开发中...') ElMessage.warning('正在加急开发中...') } const getList = () => { @@ -74,9 +87,168 @@ sizeParams.value.current = val getList() } // 表格隔行变色 const tableRowClassName = ({ row, rowIndex }) => { if (rowIndex % 2 === 1) { return 'warning-row' } else { return 'success-row' } } onMounted(() => { getList() }) </script> <style scoped lang="scss"></style> <style lang="scss"> .deviceevent-container { // 表格 .el-table__inner-wrapper:before { height: 0 !important; } .el-table .warning-row { --el-table-tr-bg-color: rgba(22, 43, 74, 0.79); } .el-table .warning-row::after { position: absolute; content: ''; left: 0; width: 100%; border-bottom: 1px solid; border-image: linear-gradient( 90deg, rgba(25, 162, 255, 0) 10%, rgba(20, 125, 202, 1) 50%, rgba(25, 162, 255, 0) 90% ) 2 2 2 2; } .el-table .success-row { --el-table-tr-bg-color: #0b1d38; } .el-table .success-row::after { position: absolute; content: ''; left: 0; width: 100%; border-bottom: 1px solid; border-image: linear-gradient( 90deg, rgba(25, 162, 255, 0) 10%, rgba(20, 125, 202, 1) 79%, rgba(25, 162, 255, 0) 90% ) 2 2 2 2; } } </style> <style scoped lang="scss"> .deviceevent-container { margin-top: 50px; } // 标题 .machineTableDetailsTitle { margin: 0 24px; margin-bottom: 16px; background: url('/src/assets/images/signMachineNest/machineRight/detailtitle.png') no-repeat center; background-size: 100% 100%; p { display: inline-block; margin-left: 30px; font-size: 16px; color: #ddf0ff; line-height: 20px; text-align: left; margin-bottom: 8px; span { font-size: 26px; color: #0282ff; font-weight: bold; } } } // 表格 .deviceevent-table { padding: 0 17px; } .el-table { color: #fff; --el-table-border-color: var(--el-border-color-lighter); --el-table-border: none !important; --el-table-text-color: #fff !important; --el-table-header-text-color: #fff !important; --el-table-row-hover-bg-color: none !important; --el-table-current-row-bg-color: none !important; --el-table-header-bg-color: none !important; --el-table-fixed-box-shadow: none !important; --el-table-bg-color: none !important; --el-table-tr-bg-color: none !important; --el-table-expanded-cell-bg-color: none !important; --el-table-fixed-left-column: inset 10px 0 10px -10px rgba(0, 0, 0, 0.15); --el-table-fixed-right-column: inset -10px 0 10px -10px rgba(0, 0, 0, 0.15); } .el-table__header { width: 0 !important; } .el-table__body { border-collapse: collapse; } :deep(.el-table .el-table__cell) { padding: 0 !important; text-align: center !important; } :deep(.el-table .el-table__cell) { padding: 0 !important; } :deep(.el-table thead) { border-bottom: 1px solid; border: 1px solid; border-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) 1 1; color: var(--el-table-header-text-color); background: #102441; } // 分页 :deep(.el-pagination) { position: absolute; left: 50%; transform: translateX(-50%); border-radius: 4px; margin-top: 15px; } :deep(.el-pagination button) { background: center center no-repeat none !important; color: #8eb8ea !important; } :deep(.el-pager li) { background: none !important; color: #8eb8ea !important; } :deep(.el-pager li.is-active) { background: #021022 !important; border-radius: 0px 0px 0px 0px; border: 1px solid #1479ef; color: #c7e1ff !important; } :deep(.el-pagination__goto) { color: #c7e1ff !important; } :deep(.el-pagination__classifier) { color: #c7e1ff !important; } :deep(.el-pager .el-input__wrapper) { background: #021022 !important; color: #c7e1ff !important; border: 1px solid #1479ef !important; z-index: 1; } :deep(.el-input__wrapper) { background: #021022 !important; box-shadow: none !important; border: 1px solid #178bff; color: #fff !important; } :deep(.el-input__inner) { color: #fff !important; } </style>
