|
|
@@ -0,0 +1,234 @@
|
|
|
+<template>
|
|
|
+ <div class="push-page">
|
|
|
+ <el-card :bordered="false" class="proCard" style="position: relative">
|
|
|
+ <BasicTable
|
|
|
+ :columns="getColumns(flattendWorkspaces)"
|
|
|
+ :data-source="robotPushList"
|
|
|
+ :row-key="(row) => row.id"
|
|
|
+ :action-column="actionColumn"
|
|
|
+ :loading="loading"
|
|
|
+ :pagination="{ total: total, pageSize: size, hideOnSinglePage: !robotPushList.length }"
|
|
|
+ :tableSetting="{
|
|
|
+ size: false,
|
|
|
+ redo: false,
|
|
|
+ fullscreen: false,
|
|
|
+ striped: false,
|
|
|
+ setting: false,
|
|
|
+ }"
|
|
|
+ :striped="true"
|
|
|
+ ref="tableRef"
|
|
|
+ @order-change="orderByItem"
|
|
|
+ @page-num-change="handlePageNumChange"
|
|
|
+ @page-size-change="handlePageSizeChange"
|
|
|
+ >
|
|
|
+ <template #tableTitle>
|
|
|
+ <el-button type="primary" :icon="Plus" @click="addDrawer">添加</el-button>
|
|
|
+ </template>
|
|
|
+ </BasicTable>
|
|
|
+ </el-card>
|
|
|
+ <AddRobot
|
|
|
+ v-if="showDrawer"
|
|
|
+ :robot-list="robotList"
|
|
|
+ @on-close="closeDrawer"
|
|
|
+ @sub-add="addSubRobot"
|
|
|
+ @sub-edit="editSubRobot"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <!-- <AddCamera class="add-popover" v-model="showAddPopover" />
|
|
|
+ <EditCamera class="add-popover" v-model="showEditPopover" :edit-data="editCameraData" />
|
|
|
+ <ShareCamera class="add-popover" v-model="addSharedPopover" :share-data="shareCameraData" />
|
|
|
+ <EditSharedCamera
|
|
|
+ class="add-popover"
|
|
|
+ v-model="showSharedPopover"
|
|
|
+ @update-unadd="updateUnaddAmount"
|
|
|
+ /> -->
|
|
|
+ <!-- </div> -->
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="ts">
|
|
|
+ import { h, onBeforeMount, onBeforeUnmount, onMounted, reactive, ref } from 'vue';
|
|
|
+ import { BasicTable, TableActionIcons } from '@/components/Table';
|
|
|
+ import { BasicColumn } from '@/components/Table';
|
|
|
+ import { getColumns } from './constant';
|
|
|
+ // import { columns } from './overviewColumns';
|
|
|
+ import { Plus } from '@element-plus/icons-vue';
|
|
|
+ import editIcon from '@/assets/images/table/table-edit.png';
|
|
|
+ import deleteIcon from '@/assets/images/table/table-delete.png';
|
|
|
+ import { deleteCameraItem } from '@/api/camera/camera-overview';
|
|
|
+ import AddRobot from './component/AddRobot.vue';
|
|
|
+ import { ElMessage, ElMessageBox } from 'element-plus';
|
|
|
+ import { RobotType } from '@/api/push/push';
|
|
|
+ import usePush from './usePush';
|
|
|
+ import useSceneInfos from '@/hooks/useSceneInfos';
|
|
|
+
|
|
|
+ const usePushRobot = usePush();
|
|
|
+ const {
|
|
|
+ robotPushList,
|
|
|
+ total,
|
|
|
+ page,
|
|
|
+ size,
|
|
|
+ loading,
|
|
|
+ robotSearch,
|
|
|
+ getRobotList,
|
|
|
+ robotAdd,
|
|
|
+ robotDel,
|
|
|
+ robotEdit,
|
|
|
+ } = usePushRobot;
|
|
|
+
|
|
|
+ const sceneInfos = useSceneInfos();
|
|
|
+ const { flattendWorkspaces, getScenesTree } = sceneInfos;
|
|
|
+
|
|
|
+ onMounted(() => {
|
|
|
+ getRobotList();
|
|
|
+ });
|
|
|
+
|
|
|
+ // 添加弹窗相关
|
|
|
+ const showDrawer = ref(false);
|
|
|
+ const robotList = ref<RobotType | null>({});
|
|
|
+
|
|
|
+ //关闭drawer
|
|
|
+ const closeDrawer = () => {
|
|
|
+ showDrawer.value = false;
|
|
|
+ };
|
|
|
+
|
|
|
+ const addDrawer = () => {
|
|
|
+ robotList.value = null;
|
|
|
+ showDrawer.value = true;
|
|
|
+ };
|
|
|
+
|
|
|
+ const addSubRobot = (data) => {
|
|
|
+ robotAdd(data).then(() => {
|
|
|
+ ElMessage.success('添加成功');
|
|
|
+ });
|
|
|
+ showDrawer.value = false;
|
|
|
+ };
|
|
|
+
|
|
|
+ const editSubRobot = (data) => {
|
|
|
+ robotEdit(data).then(() => {
|
|
|
+ ElMessage.success('编辑成功');
|
|
|
+ });
|
|
|
+ showDrawer.value = false;
|
|
|
+ };
|
|
|
+
|
|
|
+ //操作列
|
|
|
+ const actionColumn: BasicColumn = reactive({
|
|
|
+ width: 200,
|
|
|
+ title: '操作',
|
|
|
+ prop: 'action',
|
|
|
+ key: 'action',
|
|
|
+ fixed: 'right',
|
|
|
+ render(record) {
|
|
|
+ return h(TableActionIcons as any, {
|
|
|
+ space: 20,
|
|
|
+ color: '#629bf9',
|
|
|
+ style: 'img',
|
|
|
+ size: 16,
|
|
|
+ actionIcons: [
|
|
|
+ {
|
|
|
+ label: '编辑',
|
|
|
+ icon: editIcon,
|
|
|
+ onClick: handleEdit.bind(null, record.row),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '删除',
|
|
|
+ icon: deleteIcon,
|
|
|
+ onClick: handleDelete.bind(null, record.row),
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ });
|
|
|
+ },
|
|
|
+ });
|
|
|
+
|
|
|
+ // 列排序操作
|
|
|
+ const orderByItem = () => {};
|
|
|
+
|
|
|
+ const handlePageNumChange = (pageNum) => {
|
|
|
+ page.value = pageNum;
|
|
|
+ getRobotList();
|
|
|
+ };
|
|
|
+
|
|
|
+ const handlePageSizeChange = (pageSize) => {
|
|
|
+ size.value = pageSize;
|
|
|
+ getRobotList();
|
|
|
+ };
|
|
|
+
|
|
|
+ const handleDelete = (row) => {
|
|
|
+ ElMessageBox.confirm(`您想删除机器人${row.robotName}`, '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning',
|
|
|
+ draggable: true,
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ robotDel(row.id).then(() => {
|
|
|
+ ElMessage.success('删除成功');
|
|
|
+ });
|
|
|
+ })
|
|
|
+ .catch(() => {});
|
|
|
+ };
|
|
|
+
|
|
|
+ //编辑
|
|
|
+ const handleEdit = (row) => {
|
|
|
+ robotList.value = row;
|
|
|
+ console.log('row', row);
|
|
|
+
|
|
|
+ showDrawer.value = true;
|
|
|
+ // showEditPopover.value = true;
|
|
|
+ // editCameraData.value = row;
|
|
|
+ };
|
|
|
+
|
|
|
+ onBeforeMount(() => {
|
|
|
+ getScenesTree({ level: 3, valueKey: 'code', labelKey: 'name', disabled: true });
|
|
|
+ });
|
|
|
+
|
|
|
+ onBeforeUnmount(() => {});
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+ .push-page {
|
|
|
+ position: relative;
|
|
|
+ height: calc(100vh - 64px - 12px);
|
|
|
+ background-color: #ffffff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .camera-list {
|
|
|
+ padding: 0 21px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .empty-content {
|
|
|
+ margin: auto;
|
|
|
+ padding: 125px 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .empty-img {
|
|
|
+ width: 396px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .empty-text {
|
|
|
+ font-size: 22px;
|
|
|
+ color: #8e8e8e;
|
|
|
+ line-height: 30px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .add-tip {
|
|
|
+ position: absolute;
|
|
|
+ left: 187px;
|
|
|
+ top: 64px;
|
|
|
+ font-size: 16px;
|
|
|
+ color: red;
|
|
|
+ }
|
|
|
+ .add-popover {
|
|
|
+ position: absolute;
|
|
|
+ width: calc(100% - 21px);
|
|
|
+ height: 622px;
|
|
|
+ top: 0;
|
|
|
+ bottom: 0;
|
|
|
+ margin: auto;
|
|
|
+ z-index: 99;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item {
|
|
|
+ margin: 0px 40px 0px 15px;
|
|
|
+ }
|
|
|
+</style>
|