antis-ncc-admin/src/views/uavDeviceCell/index.vue

<template>
    <div class="NCC-common-layout">
        <div class="NCC-common-layout-center">
            <el-row class="NCC-common-search-box" :gutter="16">
                <el-form @submit.native.prevent>
                    <el-col :span="6">
                        <el-form-item label="所属设备ID">
                            <el-select v-model="query.deviceId" placeholder="所属设备ID" clearable>
                                <el-option v-for="(item, index) in deviceIdOptions" :key="index"
                                    :label="item.F_DeviceName" :value="item.F_Id" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="格子编号">
                            <el-input v-model="query.cellCode" placeholder="格子编号" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item>
                            <el-button type="primary" icon="el-icon-search" @click="search()">查询</el-button>
                            <el-button icon="el-icon-refresh-right" @click="reset()">重置</el-button>
                        </el-form-item>
                    </el-col>
                </el-form>
            </el-row>
            <div class="NCC-common-layout-main NCC-flex-main">
                <div class="NCC-common-head">
                    <div>
                        <!-- <el-button type="primary" icon="el-icon-plus" @click="addOrUpdateHandle()">新增</el-button> -->
                    </div>
                    <div class="NCC-common-head-right">
                        <el-tooltip effect="dark" content="刷新" placement="top">
                            <el-link icon="icon-ym icon-ym-Refresh NCC-common-head-icon" :underline="false"
                                @click="reset()" />
                        </el-tooltip>
                        <screenfull isContainer />
                    </div>
                </div>
                <NCC-table v-loading="listLoading" :data="list">
                    <el-table-column label="所属设备" prop="deviceName" align="left" />
                    <el-table-column label="所属设备ID" prop="deviceId" align="left">
                        <template slot-scope="scope">{{ scope.row.deviceId | dynamicText(deviceIdOptions) }}</template>
                    </el-table-column>
                    <el-table-column prop="cellCode" label="格子编号" align="left" />
                    <el-table-column prop="uavCode" label="无人机编码" align="left" />
                    <el-table-column prop="rfid1" label="电池1" align="left" />
                    <el-table-column prop="rfid2" label="电池2" align="left" />
                    <el-table-column label="状态" prop="status" align="left">
                        <template slot-scope="scope">
                            <el-tag :type="getStatusColor(scope.row.status)">{{ scope.row.statusName }}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="修改时间" prop="updateTime" align="left" width="180">
                        <template slot-scope="scope">
                            <span>{{ formatDateTime(scope.row.updateTime) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" fixed="right" width="180">
                        <template slot-scope="scope">
                            <el-button type="text" @click="addOrUpdateHandle(scope.row.id)">调整状态</el-button>
                            <el-button type="text" @click="openAdjustTimeDialog(scope.row)" style="color: #E6A23C;">调整时间</el-button>
                        </template>
                    </el-table-column>
                </NCC-table>
                <pagination :total="total" :page.sync="listQuery.currentPage" :limit.sync="listQuery.pageSize"
                    @pagination="initData" />
            </div>
        </div>
        <NCC-Form v-if="formVisible" ref="NCCForm" @refresh="refresh" />
        <ExportBox v-if="exportBoxVisible" ref="ExportBox" @download="download" />
        
        <!-- 调整时间对话框 -->
        <AdjustTimeDialog ref="adjustTimeDialog" @success="refresh" />
    </div>
</template>
<script>
import request from '@/utils/request'
import { getDictionaryDataSelector } from '@/api/systemData/dictionary'
import NCCForm from './Form'
import ExportBox from './ExportBox'
import AdjustTimeDialog from './AdjustTimeDialog'
import { previewDataInterface } from '@/api/systemData/dataInterface'
export default {
    components: { NCCForm, ExportBox, AdjustTimeDialog },
    data() {
        return {
            query: {
                deviceId: undefined,
                cellCode: undefined,
            },
            list: [],
            listLoading: true,
            multipleSelection: [], total: 0,
            listQuery: {
                currentPage: 1,
                pageSize: 20,
                sort: "desc",
                sidx: "",
            },
            formVisible: false,
            exportBoxVisible: false,
            columnList: [
                { prop: 'deviceId', label: '所属设备ID' },
                { prop: 'cellCode', label: '格子编号' },
                { prop: 'status', label: '状态' },
            ],
            deviceIdOptions: [],
            statusOptions: [{ "fullName": "空闲", "id": "空闲" }, { "fullName": "充电", "id": "充电" }, { "fullName": "故障", "id": "故障" }],
        }
    },
    computed: {},
    filters: {
        dynamicText(value, options) {
            if (!value || !options) return value;
            const option = options.find(item => item.F_Id === value);
            return option ? option.F_DeviceName : value;
        }
    },
    created() {
        this.initData()
        this.getdeviceIdOptions();
    },
    methods: {
        getStatusColor(status) {
            const colorMap = {
                1: 'success', // 空闲 - 绿色
                2: 'info',    // 停用 - 灰色  
                3: 'warning', // 充电 - 橙色
                4: 'danger',  // 损坏 - 红色
                5: 'primary', // 已租接 - 蓝色
                6: 'success'  // 充电完成 - 绿色
            }
            return colorMap[status] || 'success'
        },
        
        // 格式化日期时间
        formatDateTime(dateTime) {
            if (!dateTime) {
                return '--';
            }
            
            // 如果是字符串，转换为Date对象
            const date = new Date(dateTime);
            
            // 检查日期是否有效
            if (isNaN(date.getTime())) {
                return '--';
            }
            
            // 格式化为 YYYY-MM-DD HH:mm:ss
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0');
            const day = String(date.getDate()).padStart(2, '0');
            const hours = String(date.getHours()).padStart(2, '0');
            const minutes = String(date.getMinutes()).padStart(2, '0');
            const seconds = String(date.getSeconds()).padStart(2, '0');
            
            return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
        },
        
        getdeviceIdOptions() {
            previewDataInterface('702759008724845829').then(res => {
                this.deviceIdOptions = res.data
            });
        },
        initData() {
            this.listLoading = true;
            let _query = {
                ...this.listQuery,
                ...this.query
            };
            let query = {}
            for (let key in _query) {
                if (Array.isArray(_query[key])) {
                    query[key] = _query[key].join()
                } else {
                    query[key] = _query[key]
                }
            }
            request({
                url: `/api/Extend/UavDeviceCell`,
                method: 'GET',
                data: query
            }).then(res => {
                this.list = res.data.list
                this.total = res.data.pagination.total
                this.listLoading = false
            })
        },
        search() {
            this.listQuery = {
                currentPage: 1,
                pageSize: 20,
                sort: "desc",
                sidx: "",
            }
            this.initData()
        },
        refresh(isrRefresh) {
            this.formVisible = false
            if (isrRefresh) this.reset()
            this.initData() // 刷新列表数据
        },
        reset() {
            for (let key in this.query) {
                this.query[key] = undefined
            }
            this.listQuery = {
                currentPage: 1,
                pageSize: 20,
                sort: "desc",
                sidx: "",
            }
            this.initData()
        },
        addOrUpdateHandle(id, isDetail) {
            this.formVisible = true
            this.$nextTick(() => {
                this.$refs.NCCForm.init(id, isDetail)
            })
        },
        
        // 打开调整时间对话框
        openAdjustTimeDialog(cell) {
            this.$refs.adjustTimeDialog.open(cell);
        },
    }
}
</script>
<style lang="scss" scoped>
/* 页面样式 */
</style>