|
@@ -4,9 +4,7 @@
|
|
|
<!-- 抽屉头部:标题 + 关闭按钮 -->
|
|
<!-- 抽屉头部:标题 + 关闭按钮 -->
|
|
|
<div class="custom-drawer-header">
|
|
<div class="custom-drawer-header">
|
|
|
<span class="custom-drawer-title">密闭管理</span>
|
|
<span class="custom-drawer-title">密闭管理</span>
|
|
|
- <div @click="handleClose" class="close-btn">
|
|
|
|
|
- X
|
|
|
|
|
- </div>
|
|
|
|
|
|
|
+ <div @click="handleClose" class="close-btn"> X </div>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<!-- 抽屉内容区 -->
|
|
<!-- 抽屉内容区 -->
|
|
@@ -32,11 +30,7 @@
|
|
|
</a-button>
|
|
</a-button>
|
|
|
</div> -->
|
|
</div> -->
|
|
|
<div class="search-section">
|
|
<div class="search-section">
|
|
|
- <a-input
|
|
|
|
|
- v-model:value="searchValue"
|
|
|
|
|
- placeholder="密闭位置"
|
|
|
|
|
- style="width: 60%; margin-right: 8px"
|
|
|
|
|
- />
|
|
|
|
|
|
|
+ <a-input v-model:value="searchValue" placeholder="密闭位置" style="width: 60%; margin-right: 8px" />
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<!-- 传感器数据表格 -->
|
|
<!-- 传感器数据表格 -->
|
|
@@ -53,21 +47,8 @@
|
|
|
<!-- 操作列自定义渲染 -->
|
|
<!-- 操作列自定义渲染 -->
|
|
|
<template #operation="{ record }">
|
|
<template #operation="{ record }">
|
|
|
<a-space>
|
|
<a-space>
|
|
|
- <a-button
|
|
|
|
|
- v-if="!record.isPlaced"
|
|
|
|
|
- size="small"
|
|
|
|
|
- @click="handleDeploy(record)"
|
|
|
|
|
- >
|
|
|
|
|
- 布点
|
|
|
|
|
- </a-button>
|
|
|
|
|
- <a-button
|
|
|
|
|
- v-else
|
|
|
|
|
- size="small"
|
|
|
|
|
- danger
|
|
|
|
|
- @click="handleRemove(record)"
|
|
|
|
|
- >
|
|
|
|
|
- 移除
|
|
|
|
|
- </a-button>
|
|
|
|
|
|
|
+ <a-button v-if="!record.isPlaced" size="small" @click="handleDeploy(record)"> 布点 </a-button>
|
|
|
|
|
+ <a-button v-else size="small" danger @click="handleRemove(record)"> 移除 </a-button>
|
|
|
</a-space>
|
|
</a-space>
|
|
|
</template>
|
|
</template>
|
|
|
</a-table>
|
|
</a-table>
|
|
@@ -78,304 +59,305 @@
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
<script lang="ts" setup>
|
|
<script lang="ts" setup>
|
|
|
-import { ref, computed, onMounted, watch } from "vue";
|
|
|
|
|
-import { message } from "ant-design-vue";
|
|
|
|
|
-import { bindPosition, removePosition, getMarkerStatusList, renderGoafMarkers } from "../app";
|
|
|
|
|
-import MineCascader from '@/components/Form/src/jeecg/components/MineCascader/MineCascader.vue';
|
|
|
|
|
-import { getGoafList } from '../cad.api';
|
|
|
|
|
-
|
|
|
|
|
-interface Props {
|
|
|
|
|
- visible: boolean;
|
|
|
|
|
- mineCode: string;
|
|
|
|
|
-}
|
|
|
|
|
-const props = defineProps<Props>();
|
|
|
|
|
-const emit = defineEmits<{
|
|
|
|
|
- (e: "update:visible", value: boolean): void;
|
|
|
|
|
-}>();
|
|
|
|
|
-
|
|
|
|
|
-// 响应式数据
|
|
|
|
|
-const searchValue = ref("");
|
|
|
|
|
-const pagination = ref({
|
|
|
|
|
- current: 1,
|
|
|
|
|
- pageSize: 10,
|
|
|
|
|
- total: 0 // 初始化为0,由接口数据决定
|
|
|
|
|
-});
|
|
|
|
|
-const selectedMineId = ref("");
|
|
|
|
|
-// 新增:存储接口返回的密闭数据
|
|
|
|
|
-const goafList = ref<any[]>([]);
|
|
|
|
|
-
|
|
|
|
|
-// 表格列配置 - 修复字段拼写错误(devicePos → devicePos)
|
|
|
|
|
-const columns = [
|
|
|
|
|
- {
|
|
|
|
|
- title: "操作",
|
|
|
|
|
- key: "operation",
|
|
|
|
|
- slots: { customRender: "operation" },
|
|
|
|
|
- width: 80,
|
|
|
|
|
- fixed: 'left'
|
|
|
|
|
- },
|
|
|
|
|
- {
|
|
|
|
|
- title: "密闭位置",
|
|
|
|
|
- dataIndex: "devicePos", // 修正拼写错误
|
|
|
|
|
- key: "devicePos",
|
|
|
|
|
- ellipsis: true,
|
|
|
|
|
- tooltip: true
|
|
|
|
|
- },
|
|
|
|
|
-];
|
|
|
|
|
-
|
|
|
|
|
-// 表格数据过滤逻辑 - 核心修改:基于接口坐标判断isPlaced
|
|
|
|
|
-const filteredDataWithStatus = computed(() => {
|
|
|
|
|
- // 从接口返回的goafList过滤
|
|
|
|
|
- let filteredData = goafList.value.filter(item => {
|
|
|
|
|
- // 密闭位置搜索匹配(兼容空值)
|
|
|
|
|
- const isSearchMatch = searchValue.value
|
|
|
|
|
- ? (item.devicePos || '').includes(searchValue.value)
|
|
|
|
|
- : true;
|
|
|
|
|
- return isSearchMatch;
|
|
|
|
|
|
|
+ import { ref, computed, onMounted, watch } from 'vue';
|
|
|
|
|
+ import { message } from 'ant-design-vue';
|
|
|
|
|
+ import { bindPosition, removePosition, getMarkerStatusList, renderGoafMarkers } from '../app';
|
|
|
|
|
+ import { getGoafList } from '../cad.api';
|
|
|
|
|
+
|
|
|
|
|
+ interface Props {
|
|
|
|
|
+ visible: boolean;
|
|
|
|
|
+ mineCode: string;
|
|
|
|
|
+ }
|
|
|
|
|
+ const props = defineProps<Props>();
|
|
|
|
|
+ const emit = defineEmits<{
|
|
|
|
|
+ (e: 'update:visible', value: boolean): void;
|
|
|
|
|
+ }>();
|
|
|
|
|
+
|
|
|
|
|
+ // 响应式数据
|
|
|
|
|
+ const searchValue = ref('');
|
|
|
|
|
+ const pagination = ref({
|
|
|
|
|
+ current: 1,
|
|
|
|
|
+ pageSize: 10,
|
|
|
|
|
+ total: 0, // 初始化为0,由接口数据决定
|
|
|
});
|
|
});
|
|
|
|
|
+ const selectedMineId = ref('');
|
|
|
|
|
+ // 新增:存储接口返回的密闭数据
|
|
|
|
|
+ const goafList = ref<any[]>([]);
|
|
|
|
|
+
|
|
|
|
|
+ // 表格列配置 - 修复字段拼写错误(devicePos → devicePos)
|
|
|
|
|
+ const columns = [
|
|
|
|
|
+ {
|
|
|
|
|
+ title: '操作',
|
|
|
|
|
+ key: 'operation',
|
|
|
|
|
+ slots: { customRender: 'operation' },
|
|
|
|
|
+ width: 80,
|
|
|
|
|
+ fixed: 'left',
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ title: '密闭位置',
|
|
|
|
|
+ dataIndex: 'devicePos', // 修正拼写错误
|
|
|
|
|
+ key: 'devicePos',
|
|
|
|
|
+ ellipsis: true,
|
|
|
|
|
+ tooltip: true,
|
|
|
|
|
+ },
|
|
|
|
|
+ ];
|
|
|
|
|
+
|
|
|
|
|
+ // 表格数据过滤逻辑 - 核心修改:基于接口坐标判断isPlaced
|
|
|
|
|
+ const filteredDataWithStatus = computed(() => {
|
|
|
|
|
+ // 从接口返回的goafList过滤
|
|
|
|
|
+ let filteredData = goafList.value.filter((item) => {
|
|
|
|
|
+ // 密闭位置搜索匹配(兼容空值)
|
|
|
|
|
+ const isSearchMatch = searchValue.value ? (item.devicePos || '').includes(searchValue.value) : true;
|
|
|
|
|
+ return isSearchMatch;
|
|
|
|
|
+ });
|
|
|
|
|
+
|
|
|
|
|
+ // 关联标记状态 + 核心:优先判断接口返回的坐标
|
|
|
|
|
+ const placedMarkers = getMarkerStatusList() || [];
|
|
|
|
|
+ const dataWithStatus = filteredData.map((item) => {
|
|
|
|
|
+ // 判断接口坐标是否有效(非null/""且为数字)
|
|
|
|
|
+ const hasValidX = item.xcoordinate && !isNaN(Number(item.xcoordinate));
|
|
|
|
|
+ const hasValidY = item.ycoordinate && !isNaN(Number(item.ycoordinate));
|
|
|
|
|
+ // 兜底:本地标记是否存在(防止接口未同步的临时状态)
|
|
|
|
|
+ const matchedMarker = placedMarkers.find((marker) => marker.data?.id === item.id);
|
|
|
|
|
+
|
|
|
|
|
+ return {
|
|
|
|
|
+ ...item,
|
|
|
|
|
+ // 优先用接口坐标判断,无接口坐标时用本地标记
|
|
|
|
|
+ isPlaced: hasValidX && hasValidY,
|
|
|
|
|
+ sensorId: matchedMarker?.sensorId || item.id,
|
|
|
|
|
+ };
|
|
|
|
|
+ });
|
|
|
|
|
|
|
|
- // 关联标记状态 + 核心:优先判断接口返回的坐标
|
|
|
|
|
- const placedMarkers = getMarkerStatusList() || [];
|
|
|
|
|
- const dataWithStatus = filteredData.map(item => {
|
|
|
|
|
- // 判断接口坐标是否有效(非null/""且为数字)
|
|
|
|
|
- const hasValidX = item.xcoordinate && !isNaN(Number(item.xcoordinate));
|
|
|
|
|
- const hasValidY = item.ycoordinate && !isNaN(Number(item.ycoordinate));
|
|
|
|
|
- // 兜底:本地标记是否存在(防止接口未同步的临时状态)
|
|
|
|
|
- const matchedMarker = placedMarkers.find(marker => marker.data?.id === item.id);
|
|
|
|
|
-
|
|
|
|
|
- return {
|
|
|
|
|
- ...item,
|
|
|
|
|
- // 优先用接口坐标判断,无接口坐标时用本地标记
|
|
|
|
|
- isPlaced: hasValidX && hasValidY,
|
|
|
|
|
- sensorId: matchedMarker?.sensorId || item.id,
|
|
|
|
|
- };
|
|
|
|
|
|
|
+ // 分页逻辑
|
|
|
|
|
+ const start = (pagination.value.current - 1) * pagination.value.pageSize;
|
|
|
|
|
+ const end = start + pagination.value.pageSize;
|
|
|
|
|
+ pagination.value.total = filteredData.length;
|
|
|
|
|
+ return dataWithStatus.slice(start, end);
|
|
|
});
|
|
});
|
|
|
|
|
|
|
|
- // 分页逻辑
|
|
|
|
|
- const start = (pagination.value.current - 1) * pagination.value.pageSize;
|
|
|
|
|
- const end = start + pagination.value.pageSize;
|
|
|
|
|
- pagination.value.total = filteredData.length;
|
|
|
|
|
- return dataWithStatus.slice(start, end);
|
|
|
|
|
-});
|
|
|
|
|
-
|
|
|
|
|
-// 关闭抽屉
|
|
|
|
|
-const handleClose = () => emit("update:visible", false);
|
|
|
|
|
-
|
|
|
|
|
-// 搜索方法
|
|
|
|
|
-const handleGoafSearch = async () => {
|
|
|
|
|
- // 校验:必须选择煤矿
|
|
|
|
|
- if (!selectedMineId.value) {
|
|
|
|
|
- message.warning("请先选择煤矿!");
|
|
|
|
|
- return;
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ // 关闭抽屉
|
|
|
|
|
+ const handleClose = () => emit('update:visible', false);
|
|
|
|
|
|
|
|
- try {
|
|
|
|
|
- // 调用接口
|
|
|
|
|
- const res = await getGoafList({
|
|
|
|
|
- order: "desc",
|
|
|
|
|
- mineCode: selectedMineId.value,
|
|
|
|
|
- });
|
|
|
|
|
- goafList.value = res || [];
|
|
|
|
|
- pagination.value.current = 1; // 搜索后重置页码到第一页
|
|
|
|
|
- await renderGoafMarkers(goafList.value); // 渲染标记
|
|
|
|
|
-
|
|
|
|
|
- } catch (error) {
|
|
|
|
|
- goafList.value = [];
|
|
|
|
|
- message.error(`查询失败:${(error as Error).message}`);
|
|
|
|
|
- console.error("接口请求失败:", error);
|
|
|
|
|
- }
|
|
|
|
|
-};
|
|
|
|
|
-
|
|
|
|
|
-// 刷新方法 - 优化:强制重新请求接口
|
|
|
|
|
-const handleRefresh = async () => {
|
|
|
|
|
- searchValue.value = "";
|
|
|
|
|
- pagination.value.current = 1;
|
|
|
|
|
- pagination.value = { ...pagination.value }; // 触发响应式更新
|
|
|
|
|
-
|
|
|
|
|
- // 如果已选择煤矿,刷新时重新请求接口(保证数据最新)
|
|
|
|
|
- if (selectedMineId.value) {
|
|
|
|
|
- await handleGoafSearch();
|
|
|
|
|
- } else {
|
|
|
|
|
- goafList.value = []; // 未选煤矿则清空表格
|
|
|
|
|
- }
|
|
|
|
|
-};
|
|
|
|
|
-
|
|
|
|
|
-// 表格分页变化
|
|
|
|
|
-const handleTableChange = (pag: any) => {
|
|
|
|
|
- pagination.value = { ...pagination.value, ...pag };
|
|
|
|
|
-};
|
|
|
|
|
-
|
|
|
|
|
-// 布点方法 - 优化:布点后主动刷新接口数据
|
|
|
|
|
-const handleDeploy = async (record: any) => {
|
|
|
|
|
- try {
|
|
|
|
|
- const marker = await bindPosition({
|
|
|
|
|
- id: record.id,
|
|
|
|
|
- devicePos: record.devicePos
|
|
|
|
|
- });
|
|
|
|
|
- if (!marker) {
|
|
|
|
|
- message.warning("布点操作已取消");
|
|
|
|
|
|
|
+ // 搜索方法
|
|
|
|
|
+ const handleGoafSearch = async () => {
|
|
|
|
|
+ // 校验:必须选择煤矿
|
|
|
|
|
+ if (!selectedMineId.value) {
|
|
|
|
|
+ message.warning('请先选择煤矿!');
|
|
|
return;
|
|
return;
|
|
|
}
|
|
}
|
|
|
- // 布点成功后刷新接口数据,保证按钮状态同步
|
|
|
|
|
- await handleRefresh();
|
|
|
|
|
- } catch (error) {
|
|
|
|
|
- message.error(`布点失败:${(error as Error).message}`);
|
|
|
|
|
- console.error("布点失败:", error);
|
|
|
|
|
- }
|
|
|
|
|
-};
|
|
|
|
|
-
|
|
|
|
|
-// 移除后主动刷新接口数据
|
|
|
|
|
-const handleRemove = async (record: any) => {
|
|
|
|
|
- try {
|
|
|
|
|
- const isSuccess = await removePosition(record.sensorId, record.id);
|
|
|
|
|
- if (isSuccess) {
|
|
|
|
|
- // 移除成功后刷新接口数据,保证按钮状态同步
|
|
|
|
|
|
|
+
|
|
|
|
|
+ try {
|
|
|
|
|
+ // 调用接口
|
|
|
|
|
+ const res = await getGoafList({
|
|
|
|
|
+ order: 'desc',
|
|
|
|
|
+ mineCode: selectedMineId.value,
|
|
|
|
|
+ });
|
|
|
|
|
+ goafList.value = res || [];
|
|
|
|
|
+ pagination.value.current = 1; // 搜索后重置页码到第一页
|
|
|
|
|
+ await renderGoafMarkers(goafList.value); // 渲染标记
|
|
|
|
|
+ } catch (error) {
|
|
|
|
|
+ goafList.value = [];
|
|
|
|
|
+ message.error(`查询失败:${(error as Error).message}`);
|
|
|
|
|
+ console.error('接口请求失败:', error);
|
|
|
|
|
+ }
|
|
|
|
|
+ };
|
|
|
|
|
+
|
|
|
|
|
+ // 刷新方法 - 优化:强制重新请求接口
|
|
|
|
|
+ const handleRefresh = async () => {
|
|
|
|
|
+ searchValue.value = '';
|
|
|
|
|
+ pagination.value.current = 1;
|
|
|
|
|
+ pagination.value = { ...pagination.value }; // 触发响应式更新
|
|
|
|
|
+
|
|
|
|
|
+ // 如果已选择煤矿,刷新时重新请求接口(保证数据最新)
|
|
|
|
|
+ if (selectedMineId.value) {
|
|
|
|
|
+ await handleGoafSearch();
|
|
|
|
|
+ } else {
|
|
|
|
|
+ goafList.value = []; // 未选煤矿则清空表格
|
|
|
|
|
+ }
|
|
|
|
|
+ };
|
|
|
|
|
+
|
|
|
|
|
+ // 表格分页变化
|
|
|
|
|
+ const handleTableChange = (pag: any) => {
|
|
|
|
|
+ pagination.value = { ...pagination.value, ...pag };
|
|
|
|
|
+ };
|
|
|
|
|
+
|
|
|
|
|
+ // 布点方法 - 优化:布点后主动刷新接口数据
|
|
|
|
|
+ const handleDeploy = async (record: any) => {
|
|
|
|
|
+ try {
|
|
|
|
|
+ const marker = await bindPosition({
|
|
|
|
|
+ id: record.id,
|
|
|
|
|
+ devicePos: record.devicePos,
|
|
|
|
|
+ });
|
|
|
|
|
+ if (!marker) {
|
|
|
|
|
+ message.warning('布点操作已取消');
|
|
|
|
|
+ return;
|
|
|
|
|
+ }
|
|
|
|
|
+ // 布点成功后刷新接口数据,保证按钮状态同步
|
|
|
await handleRefresh();
|
|
await handleRefresh();
|
|
|
|
|
+ } catch (error) {
|
|
|
|
|
+ message.error(`布点失败:${(error as Error).message}`);
|
|
|
|
|
+ console.error('布点失败:', error);
|
|
|
}
|
|
}
|
|
|
- } catch (error) {
|
|
|
|
|
- message.error(`移除失败:${(error as Error).message}`);
|
|
|
|
|
- console.error("移除失败:", error);
|
|
|
|
|
- }
|
|
|
|
|
-};
|
|
|
|
|
-
|
|
|
|
|
-// 煤矿选择变化
|
|
|
|
|
-const handleMineChange = (mineId: string) => {
|
|
|
|
|
- selectedMineId.value = mineId;
|
|
|
|
|
-};
|
|
|
|
|
|
|
+ };
|
|
|
|
|
+
|
|
|
|
|
+ // 移除后主动刷新接口数据
|
|
|
|
|
+ const handleRemove = async (record: any) => {
|
|
|
|
|
+ try {
|
|
|
|
|
+ const isSuccess = await removePosition(record.sensorId, record.id);
|
|
|
|
|
+ if (isSuccess) {
|
|
|
|
|
+ // 移除成功后刷新接口数据,保证按钮状态同步
|
|
|
|
|
+ await handleRefresh();
|
|
|
|
|
+ }
|
|
|
|
|
+ } catch (error) {
|
|
|
|
|
+ message.error(`移除失败:${(error as Error).message}`);
|
|
|
|
|
+ console.error('移除失败:', error);
|
|
|
|
|
+ }
|
|
|
|
|
+ };
|
|
|
|
|
+
|
|
|
|
|
+ // 煤矿选择变化
|
|
|
|
|
+ const handleMineChange = (mineId: string) => {
|
|
|
|
|
+ selectedMineId.value = mineId;
|
|
|
|
|
+ };
|
|
|
|
|
+
|
|
|
|
|
+ watch(
|
|
|
|
|
+ () => props.mineCode,
|
|
|
|
|
+ (newVal) => {
|
|
|
|
|
+ if (newVal) {
|
|
|
|
|
+ selectedMineId.value = newVal;
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ { immediate: true }
|
|
|
|
|
+ );
|
|
|
|
|
+
|
|
|
|
|
+ // 监听抽屉显隐:打开时刷新数据
|
|
|
|
|
+ watch(
|
|
|
|
|
+ () => props.visible,
|
|
|
|
|
+ async (isVisible) => {
|
|
|
|
|
+ if (isVisible) await handleRefresh(); // 异步数据加载
|
|
|
|
|
+ },
|
|
|
|
|
+ { immediate: true }
|
|
|
|
|
+ );
|
|
|
|
|
+
|
|
|
|
|
+ // 初始化:分页总数同步为接口数据量
|
|
|
|
|
+ onMounted(() => {
|
|
|
|
|
+ pagination.value.total = goafList.value.length;
|
|
|
|
|
+ });
|
|
|
|
|
+</script>
|
|
|
|
|
|
|
|
-watch(() => props.mineCode, (newVal) => {
|
|
|
|
|
- if (newVal) {
|
|
|
|
|
- selectedMineId.value = newVal;
|
|
|
|
|
|
|
+<style scoped>
|
|
|
|
|
+ /* 自定义抽屉核心容器 */
|
|
|
|
|
+ .custom-drawer {
|
|
|
|
|
+ position: fixed;
|
|
|
|
|
+ top: 50px;
|
|
|
|
|
+ left: 0;
|
|
|
|
|
+ z-index: 999;
|
|
|
|
|
+ width: 450px;
|
|
|
|
|
+ height: calc(100vh - 50px);
|
|
|
|
|
+ background: #ffffff;
|
|
|
|
|
+ box-shadow: 2px 0 12px rgba(0, 0, 0, 0.1);
|
|
|
|
|
+ transform: translateX(-100%);
|
|
|
|
|
+ transition: transform 0.3s cubic-bezier(0.2, 0, 0, 1);
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ overflow: hidden;
|
|
|
}
|
|
}
|
|
|
-}, { immediate: true });
|
|
|
|
|
|
|
|
|
|
|
|
+ /* 抽屉打开状态 - 滑入动画 */
|
|
|
|
|
+ .custom-drawer-open {
|
|
|
|
|
+ transform: translateX(0);
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
-// 监听抽屉显隐:打开时刷新数据
|
|
|
|
|
-watch(() => props.visible, async (isVisible) => {
|
|
|
|
|
- if (isVisible) await handleRefresh(); // 异步数据加载
|
|
|
|
|
-}, { immediate: true });
|
|
|
|
|
|
|
+ /* 抽屉头部 */
|
|
|
|
|
+ .custom-drawer-header {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: space-between;
|
|
|
|
|
+ color: #ffffff;
|
|
|
|
|
+ background-color: #2d4f82;
|
|
|
|
|
+ padding: 14px 20px;
|
|
|
|
|
+ flex-shrink: 0;
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
-// 初始化:分页总数同步为接口数据量
|
|
|
|
|
-onMounted(() => {
|
|
|
|
|
- pagination.value.total = goafList.value.length;
|
|
|
|
|
-});
|
|
|
|
|
-</script>
|
|
|
|
|
|
|
+ .custom-drawer-title {
|
|
|
|
|
+ font-size: 16px;
|
|
|
|
|
+ font-weight: 600;
|
|
|
|
|
+ color: #ffffff;
|
|
|
|
|
+ line-height: 1.5;
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
-<style scoped>
|
|
|
|
|
-/* 自定义抽屉核心容器 */
|
|
|
|
|
-.custom-drawer {
|
|
|
|
|
- position: fixed;
|
|
|
|
|
- top: 50px;
|
|
|
|
|
- left: 0;
|
|
|
|
|
- z-index: 999;
|
|
|
|
|
- width: 450px;
|
|
|
|
|
- height: calc(100vh - 50px);
|
|
|
|
|
- background: #ffffff;
|
|
|
|
|
- box-shadow: 2px 0 12px rgba(0, 0, 0, 0.1);
|
|
|
|
|
- transform: translateX(-100%);
|
|
|
|
|
- transition: transform 0.3s cubic-bezier(0.2, 0, 0, 1);
|
|
|
|
|
- display: flex;
|
|
|
|
|
- flex-direction: column;
|
|
|
|
|
- overflow: hidden;
|
|
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
-/* 抽屉打开状态 - 滑入动画 */
|
|
|
|
|
-.custom-drawer-open {
|
|
|
|
|
- transform: translateX(0);
|
|
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
-/* 抽屉头部 */
|
|
|
|
|
-.custom-drawer-header {
|
|
|
|
|
- display: flex;
|
|
|
|
|
- align-items: center;
|
|
|
|
|
- justify-content: space-between;
|
|
|
|
|
- color: #ffffff;
|
|
|
|
|
- background-color: #2d4f82;
|
|
|
|
|
- padding: 14px 20px;
|
|
|
|
|
- flex-shrink: 0;
|
|
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
-.custom-drawer-title {
|
|
|
|
|
- font-size: 16px;
|
|
|
|
|
- font-weight: 600;
|
|
|
|
|
- color: #ffffff;
|
|
|
|
|
- line-height: 1.5;
|
|
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
-.close-btn {
|
|
|
|
|
|
|
+ .close-btn {
|
|
|
font-size: 20px;
|
|
font-size: 20px;
|
|
|
padding: 0;
|
|
padding: 0;
|
|
|
height: 20px;
|
|
height: 20px;
|
|
|
width: 20px;
|
|
width: 20px;
|
|
|
margin-top: -10px;
|
|
margin-top: -10px;
|
|
|
cursor: pointer;
|
|
cursor: pointer;
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
-
|
|
|
|
|
-/* 抽屉内容区 */
|
|
|
|
|
-.custom-drawer-body {
|
|
|
|
|
- flex: 1;
|
|
|
|
|
- overflow-y: auto;
|
|
|
|
|
- padding: 0;
|
|
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
-.drawer-content {
|
|
|
|
|
- padding: 16px 20px;
|
|
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
-/* 搜索区域布局 */
|
|
|
|
|
-.search-section {
|
|
|
|
|
- display: flex;
|
|
|
|
|
- align-items: center;
|
|
|
|
|
- margin-bottom: 16px;
|
|
|
|
|
- width: 100%;
|
|
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
-/* 下拉选择区域间距 */
|
|
|
|
|
-.select-section {
|
|
|
|
|
- margin-bottom: 16px;
|
|
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
-/* 表格区域宽度适配 */
|
|
|
|
|
-.table-section {
|
|
|
|
|
- width: 100%;
|
|
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
-/* 表格样式 */
|
|
|
|
|
-:deep(.ant-table) {
|
|
|
|
|
- font-size: 14px;
|
|
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
-:deep(.ant-table-thead > tr > th) {
|
|
|
|
|
- background: #fafafa;
|
|
|
|
|
- font-weight: 600;
|
|
|
|
|
- color: #000;
|
|
|
|
|
- padding: 10px 12px;
|
|
|
|
|
- border-bottom: 1px solid #f0f0f0;
|
|
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
-:deep(.ant-table-tbody > tr > td) {
|
|
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ /* 抽屉内容区 */
|
|
|
|
|
+ .custom-drawer-body {
|
|
|
|
|
+ flex: 1;
|
|
|
|
|
+ overflow-y: auto;
|
|
|
|
|
+ padding: 0;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .drawer-content {
|
|
|
|
|
+ padding: 16px 20px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ /* 搜索区域布局 */
|
|
|
|
|
+ .search-section {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ margin-bottom: 16px;
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ /* 下拉选择区域间距 */
|
|
|
|
|
+ .select-section {
|
|
|
|
|
+ margin-bottom: 16px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ /* 表格区域宽度适配 */
|
|
|
|
|
+ .table-section {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ /* 表格样式 */
|
|
|
|
|
+ :deep(.ant-table) {
|
|
|
|
|
+ font-size: 14px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ :deep(.ant-table-thead > tr > th) {
|
|
|
|
|
+ background: #fafafa;
|
|
|
|
|
+ font-weight: 600;
|
|
|
|
|
+ color: #000;
|
|
|
|
|
+ padding: 10px 12px;
|
|
|
|
|
+ border-bottom: 1px solid #f0f0f0;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ :deep(.ant-table-tbody > tr > td) {
|
|
|
color: #000 !important;
|
|
color: #000 !important;
|
|
|
font-family: Source Han Sans SC !important;
|
|
font-family: Source Han Sans SC !important;
|
|
|
font-size: 16px !important;
|
|
font-size: 16px !important;
|
|
|
font-weight: 400 !important;
|
|
font-weight: 400 !important;
|
|
|
letter-spacing: 0 !important;
|
|
letter-spacing: 0 !important;
|
|
|
-}
|
|
|
|
|
-:deep(.ant-table-tbody > .ant-table-row) {
|
|
|
|
|
- &:hover {
|
|
|
|
|
- background-color: #a4d3ee !important;
|
|
|
|
|
}
|
|
}
|
|
|
-}
|
|
|
|
|
-:deep(.ant-table-tbody > .ant-table-row > td) {
|
|
|
|
|
- background-color: unset !important;
|
|
|
|
|
- &:hover {
|
|
|
|
|
|
|
+ :deep(.ant-table-tbody > .ant-table-row) {
|
|
|
|
|
+ &:hover {
|
|
|
|
|
+ background-color: #a4d3ee !important;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ :deep(.ant-table-tbody > .ant-table-row > td) {
|
|
|
background-color: unset !important;
|
|
background-color: unset !important;
|
|
|
|
|
+ &:hover {
|
|
|
|
|
+ background-color: unset !important;
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
|
|
|
|
|
-/* 分页样式 */
|
|
|
|
|
-:deep(.ant-pagination) {
|
|
|
|
|
- margin: 16px 0 0 0;
|
|
|
|
|
- text-align: right;
|
|
|
|
|
-}
|
|
|
|
|
-</style>
|
|
|
|
|
|
|
+ /* 分页样式 */
|
|
|
|
|
+ :deep(.ant-pagination) {
|
|
|
|
|
+ margin: 16px 0 0 0;
|
|
|
|
|
+ text-align: right;
|
|
|
|
|
+ }
|
|
|
|
|
+</style>
|