|
|
@@ -1,99 +1,34 @@
|
|
|
<template>
|
|
|
<div class="deviceList">
|
|
|
- <Search :selectedRowKeys="state.selectedRowKeys" :onClickDelete="onClickBatchDelete" :onClickSearch="onClickSearch"
|
|
|
- :onClickReset="onClickReset" />
|
|
|
+ <Search :onClickSearch="onClickSearch" :onClickReset="onClickReset" />
|
|
|
<div class="deviceList-table">
|
|
|
- <a-table :scroll="{ x: '100%', y: 500 }" childrenColumnName="null" rowKey="device_sn"
|
|
|
- :loading="state.listLoading" :columns="columns" :dataSource="state.list" @change="refreshData"
|
|
|
- :rowClassName="rowClassName" :pagination="paginationConfig" :rowSelection="rowSelection">
|
|
|
- <!-- 设备型号 -->
|
|
|
- <template #device_name="{ record }">
|
|
|
- <CustomCell :record="record" fieldName="device_name" :showIcon="true" />
|
|
|
- </template>
|
|
|
- <!-- 设备SN -->
|
|
|
- <template #device_sn="{ record }">
|
|
|
- <CustomCell :record="record" fieldName="device_sn" />
|
|
|
- </template>
|
|
|
- <!-- 设备名称 -->
|
|
|
- <template #nickname="{ record }">
|
|
|
- <CustomCell :record="record" fieldName="nickname" :isEdit="!!state.editableData[record.device_sn]" />
|
|
|
- </template>
|
|
|
- <!-- 固件版本 -->
|
|
|
- <template #firmware_version="{ record }">
|
|
|
- <CustomCell :record="record" fieldName="firmware_version" />
|
|
|
- </template>
|
|
|
- <!-- 固件升级 -->
|
|
|
- <template #firmware_status="{ record }">
|
|
|
- <DeviceFirmwareUpgrade :device="record" />
|
|
|
- </template>
|
|
|
- <!-- 当前状态 -->
|
|
|
- <template #status="{ record }">
|
|
|
- <CustomCell :record="record" fieldName="status_text" />
|
|
|
- </template>
|
|
|
- <!-- 加入项目时间 -->
|
|
|
- <template #bound_time="{ record }">
|
|
|
- <CustomCell :record="record" fieldName="bound_time" />
|
|
|
- </template>
|
|
|
- <!-- 最后在线时间 -->
|
|
|
- <template #login_time="{ record }">
|
|
|
- <CustomCell :record="record" fieldName="login_time" />
|
|
|
- </template>
|
|
|
+ <a-table :scroll="{ x: '100%', y: 500 }" childrenColumnName="null" rowKey="device_sn" :loading="state.listLoading"
|
|
|
+ :columns="columns" :dataSource="state.list" @change="refreshData" :rowClassName="rowClassName"
|
|
|
+ :pagination="paginationConfig" :rowSelection="rowSelection">
|
|
|
<!-- 操作 -->
|
|
|
<template #action="{ record }">
|
|
|
- <!-- 编辑态操作 -->
|
|
|
- <div v-if="state.editableData[record.device_sn]">
|
|
|
- <a-tooltip title="确定">
|
|
|
- <CheckOutlined style="color: #28d445;margin-right: 10px;" @click="onClickSave(record)" />
|
|
|
- </a-tooltip>
|
|
|
- <a-tooltip title="取消">
|
|
|
- <CloseOutlined style="color: #e70102;" @click="() => delete state.editableData[record.device_sn]" />
|
|
|
+ <div class="flex-align-center flex-row" style="color: #2d8cf0">
|
|
|
+ <a-tooltip title="复制任务">
|
|
|
+ <CopyOutlined style="margin-right: 10px;" />
|
|
|
</a-tooltip>
|
|
|
- </div>
|
|
|
- <!-- 非编辑态操作 -->
|
|
|
- <div v-else class="flex-align-center flex-row" style="color: #2d8cf0">
|
|
|
- <a-tooltip title="编辑">
|
|
|
- <EditOutlined style="margin-right: 10px;" @click="onClickEdit(record)" />
|
|
|
+ <a-tooltip title="查看轨迹">
|
|
|
+ <GatewayOutlined style="margin-right: 10px;" />
|
|
|
</a-tooltip>
|
|
|
<a-tooltip title="删除">
|
|
|
- <DeleteOutlined @click="onClickDelete(record)" />
|
|
|
+ <DeleteOutlined />
|
|
|
</a-tooltip>
|
|
|
- <a-dropdown v-if="record.domain === 3">
|
|
|
- <EllipsisOutlined style="font-size: 20px;margin-left: 10px;" />
|
|
|
- <template #overlay>
|
|
|
- <a-menu>
|
|
|
- <a-menu-item @click="onClickFeedback(record)">
|
|
|
- 异常反馈
|
|
|
- </a-menu-item>
|
|
|
- <a-menu-item @click="onClickDeviceHms(record)">
|
|
|
- 告警信息
|
|
|
- </a-menu-item>
|
|
|
- <!-- <a-menu-item>
|
|
|
- 设备运维
|
|
|
- </a-menu-item> -->
|
|
|
- </a-menu>
|
|
|
- </template>
|
|
|
- </a-dropdown>
|
|
|
</div>
|
|
|
</template>
|
|
|
</a-table>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <!-- 异常反馈 -->
|
|
|
- <FeedbackDrawer :visible="state.feedbackDrawerVisible" :device="state.currentDevice"
|
|
|
- :onClose="() => state.feedbackDrawerVisible = false" v-if="state.feedbackDrawerVisible" />
|
|
|
- <!-- 告警信息 -->
|
|
|
- <DeviceHmsDrawer v-model:visible="state.deviceHmsDrawerVisible" :device="state.currentDevice" />
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
-import { reactive, onMounted, onUnmounted } from 'vue';
|
|
|
+import { reactive, onMounted } from 'vue';
|
|
|
import { Modal } from 'ant-design-vue';
|
|
|
-import { EditOutlined, CheckOutlined, CloseOutlined, DeleteOutlined, EllipsisOutlined } from '@ant-design/icons-vue';
|
|
|
+import { CopyOutlined, GatewayOutlined, DeleteOutlined } from '@ant-design/icons-vue';
|
|
|
import Search from './components/Search.vue';
|
|
|
-import CustomCell from './components/CustomCell.vue';
|
|
|
-import DeviceFirmwareUpgrade from '/@/components/devices/device-upgrade/DeviceFirmwareUpgrade.vue';
|
|
|
-import FeedbackDrawer from './components/FeedbackDrawer.vue';
|
|
|
-import DeviceHmsDrawer from '/@/components/devices/device-hms/DeviceHmsDrawer.vue';
|
|
|
import { getBindingDevices, updateDevice, unbindDevice } from '/@/api/manage';
|
|
|
import { apis } from '/@/api/custom';
|
|
|
import { getWorkspaceId } from '/@/utils/index';
|
|
|
@@ -147,7 +82,6 @@ const fetchList = async () => {
|
|
|
paginationConfig.total = res.data.pagination.total;
|
|
|
paginationConfig.current = res.data.pagination.page;
|
|
|
paginationConfig.pageSize = res.data.pagination.page_size;
|
|
|
- await autoUpdateDeviceStatus()
|
|
|
} catch (e) {
|
|
|
console.error(e);
|
|
|
} finally {
|
|
|
@@ -155,59 +89,13 @@ const fetchList = async () => {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-// 自动更新设备状态
|
|
|
-const autoUpdateDeviceStatus = async () => {
|
|
|
- if (state.list.length === 0) {
|
|
|
- return;
|
|
|
- }
|
|
|
- const snList: string[] = [];
|
|
|
- state.list.forEach(item => {
|
|
|
- if (item.children) {
|
|
|
- snList.push(item.children.device_sn);
|
|
|
- }
|
|
|
- snList.push(item.device_sn);
|
|
|
- })
|
|
|
- const data = {
|
|
|
- snList: snList.join(','),
|
|
|
- }
|
|
|
- const res = await apis.fetchDeviceStatus(data);
|
|
|
- const deviceStatusMap = new Map();
|
|
|
- res.data.forEach((item: any) => {
|
|
|
- deviceStatusMap.set(item.device_sn, item.status_text);
|
|
|
- });
|
|
|
- state.list.forEach(item => {
|
|
|
- if (item.children) {
|
|
|
- item.children.status_text = deviceStatusMap.get(item.children.device_sn);
|
|
|
- }
|
|
|
- item.status_text = deviceStatusMap.get(item.device_sn);
|
|
|
- })
|
|
|
-}
|
|
|
-
|
|
|
-// 开始定时器
|
|
|
-const startAutoUpdate = () => {
|
|
|
- state.interval = window.setInterval(autoUpdateDeviceStatus, 10000);
|
|
|
-};
|
|
|
-
|
|
|
-// 清除定时器
|
|
|
-const clearAutoUpdate = () => {
|
|
|
- if (state.interval !== null) {
|
|
|
- clearInterval(state.interval);
|
|
|
- state.interval = null;
|
|
|
- }
|
|
|
-};
|
|
|
-
|
|
|
onMounted(async () => {
|
|
|
await fetchList();
|
|
|
- startAutoUpdate(); // 页面加载完成后启动定时器
|
|
|
-});
|
|
|
-
|
|
|
-onUnmounted(() => {
|
|
|
- clearAutoUpdate(); // 页面卸载前清除定时器
|
|
|
});
|
|
|
|
|
|
const columns = [
|
|
|
{
|
|
|
- title: '设备型号',
|
|
|
+ title: '计划|实际时间',
|
|
|
dataIndex: 'device_name',
|
|
|
width: 150,
|
|
|
ellipsis: true,
|
|
|
@@ -215,14 +103,14 @@ const columns = [
|
|
|
slots: { customRender: 'device_name' }
|
|
|
},
|
|
|
{
|
|
|
- title: '设备SN',
|
|
|
+ title: '执行状态',
|
|
|
dataIndex: 'device_sn',
|
|
|
width: 250,
|
|
|
ellipsis: true,
|
|
|
slots: { customRender: 'device_sn' }
|
|
|
},
|
|
|
{
|
|
|
- title: '设备名称',
|
|
|
+ title: '类型',
|
|
|
dataIndex: 'nickname',
|
|
|
width: 150,
|
|
|
ellipsis: true,
|
|
|
@@ -230,35 +118,35 @@ const columns = [
|
|
|
slots: { customRender: 'nickname' }
|
|
|
},
|
|
|
{
|
|
|
- title: '固件版本',
|
|
|
+ title: '计划名称',
|
|
|
dataIndex: 'firmware_version',
|
|
|
width: 150,
|
|
|
ellipsis: true,
|
|
|
slots: { customRender: 'firmware_version' },
|
|
|
},
|
|
|
{
|
|
|
- title: '固件升级',
|
|
|
+ title: '航线名称',
|
|
|
dataIndex: 'firmware_status',
|
|
|
width: 150,
|
|
|
ellipsis: true,
|
|
|
slots: { customRender: 'firmware_status' },
|
|
|
},
|
|
|
{
|
|
|
- title: '当前状态',
|
|
|
+ title: '设备名称',
|
|
|
dataIndex: 'status',
|
|
|
width: 100,
|
|
|
ellipsis: true,
|
|
|
slots: { customRender: 'status' }
|
|
|
},
|
|
|
{
|
|
|
- title: '加入项目时间',
|
|
|
+ title: '创建人',
|
|
|
dataIndex: 'bound_time',
|
|
|
width: 200,
|
|
|
sorter: (a: any, b: any) => a.bound_time.localeCompare(b.bound_time),
|
|
|
slots: { customRender: 'bound_time' },
|
|
|
},
|
|
|
{
|
|
|
- title: '最后在线时间',
|
|
|
+ title: '媒体上传',
|
|
|
dataIndex: 'login_time',
|
|
|
width: 200,
|
|
|
sorter: (a: any, b: any) => a.login_time.localeCompare(b.login_time),
|
|
|
@@ -293,11 +181,6 @@ const rowSelection = {
|
|
|
},
|
|
|
}
|
|
|
|
|
|
-// 点击批量删除
|
|
|
-const onClickBatchDelete = async () => {
|
|
|
- console.log(state.selectedRowKeys, '点击批量删除');
|
|
|
-}
|
|
|
-
|
|
|
// 点击搜索
|
|
|
const onClickSearch = async (query: any) => {
|
|
|
state.query = query;
|
|
|
@@ -310,32 +193,6 @@ const onClickReset = async (query: any) => {
|
|
|
await fetchList();
|
|
|
}
|
|
|
|
|
|
-// 点击异常反馈
|
|
|
-const onClickFeedback = (record: any) => {
|
|
|
- state.feedbackDrawerVisible = true;
|
|
|
- state.currentDevice = record;
|
|
|
-}
|
|
|
-
|
|
|
-// 点击告警信息
|
|
|
-const onClickDeviceHms = (record: any) => {
|
|
|
- state.deviceHmsDrawerVisible = true;
|
|
|
- state.currentDevice = record;
|
|
|
-}
|
|
|
-
|
|
|
-// 点击编辑
|
|
|
-const onClickEdit = (record: any) => {
|
|
|
- state.editableData[record.device_sn] = record;
|
|
|
-}
|
|
|
-
|
|
|
-// 点击保存
|
|
|
-const onClickSave = async (record: any) => {
|
|
|
- delete state.editableData[record.device_sn];
|
|
|
- await updateDevice({ nickname: record.nickname }, state.workspaceId, record.device_sn)
|
|
|
- if (record.children) {
|
|
|
- await updateDevice({ nickname: record.children.nickname }, state.workspaceId, record.children.device_sn)
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
// 点击删除
|
|
|
const onClickDelete = (record: any) => {
|
|
|
Modal.confirm({
|