卫星通信服务平台
This commit is contained in:
458
src/components/features/historyMsg.vue
Normal file
458
src/components/features/historyMsg.vue
Normal file
@@ -0,0 +1,458 @@
|
||||
<template>
|
||||
<!-- 表格 -->
|
||||
<el-card>
|
||||
<div class="flex justify-center flex-wrap">
|
||||
<TabelTools @showTools="showTools" :dialogObj="historyMsgActive" />
|
||||
<el-table
|
||||
ref="userTableRef"
|
||||
:data="tableData"
|
||||
style="width: 100%"
|
||||
max-height="32rem"
|
||||
table-layout="auto"
|
||||
scrollbar-always-on
|
||||
@selection-change="handleSelectionChange"
|
||||
>
|
||||
<el-table-column
|
||||
v-if="dialogOperationVisible"
|
||||
fixed="left"
|
||||
type="selection"
|
||||
width="40"
|
||||
column-key="selection"
|
||||
/>
|
||||
<TabelSelect
|
||||
v-if="dialogOperationVisible"
|
||||
ref="DelSelectRef"
|
||||
:holderText="delSelectHold"
|
||||
singleColor="danger"
|
||||
multipleColor="warning"
|
||||
allColor="danger"
|
||||
singleSize="small"
|
||||
multipleSize="small"
|
||||
allSize="small"
|
||||
:singlePlain="true"
|
||||
:multiplePlain="false"
|
||||
:allPlain="false"
|
||||
operateType="del"
|
||||
@showComfirmDialog="showComfirmDialog"
|
||||
/>
|
||||
<el-table-column min-width="100" column-key="sn_number">
|
||||
<template #header>
|
||||
<div>
|
||||
<SearchKey
|
||||
v-if="dialogSearchVisible"
|
||||
ref="SearchCardIdKeyRef"
|
||||
holderText="输入SN号以搜索相关数据"
|
||||
@search="historyMsg"
|
||||
/>
|
||||
<div>
|
||||
<el-text class="mx-1"> SN号 </el-text>
|
||||
<SortSearch
|
||||
v-if="dialogSortVisible"
|
||||
ref="SortCardIdRef"
|
||||
activeText="顺序"
|
||||
inactiveText="倒序"
|
||||
@search="historyMsg"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #default="scope">
|
||||
<div
|
||||
style="color: rgb(56, 188, 248);"
|
||||
class="flex justify-start items-center text-base"
|
||||
>
|
||||
{{ scope.row.sn_number }}
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column min-width="200" width="720" column-key="original_msg">
|
||||
<template #header>
|
||||
<SearchKey
|
||||
v-if="dialogSearchVisible"
|
||||
ref="SearchOriginalKeyRef"
|
||||
holderText="输入关键字以搜索相关数据"
|
||||
@search="historyMsg"
|
||||
/>
|
||||
<div>
|
||||
<el-text class="mx-1"> 原始数据 </el-text>
|
||||
</div>
|
||||
</template>
|
||||
<template #default="scope">
|
||||
<div class="flex justify-between items-center text-base">
|
||||
<el-button
|
||||
style="font-size: 1rem; font-weight: bold; margin-right: 1rem;"
|
||||
size="small"
|
||||
type="primary"
|
||||
plain
|
||||
disabled
|
||||
>
|
||||
{{ scope.row.original_msg.length/2 }}个字节
|
||||
</el-button>
|
||||
<el-text
|
||||
truncated
|
||||
:style="
|
||||
scope.row.original_msg
|
||||
? 'color: rgb(56, 188, 248);'
|
||||
: 'color: rgb(240 70 70);'
|
||||
"
|
||||
style="font-size: 1rem"
|
||||
>
|
||||
{{ scope.row.original_msg ? scope.row.original_msg : "解析错误" }}
|
||||
</el-text>
|
||||
<el-button
|
||||
style="font-size: 1rem; font-weight: bold"
|
||||
size="small"
|
||||
type="primary"
|
||||
plain
|
||||
@click="showAll(scope.row.original_msg)"
|
||||
>
|
||||
展示全部内容
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column min-width="200" width="720" column-key="msg_data">
|
||||
<template #header>
|
||||
<SearchKey
|
||||
v-if="dialogSearchVisible"
|
||||
ref="SearchDataKeyRef"
|
||||
holderText="输入关键字以搜索相关数据"
|
||||
@search="historyMsg"
|
||||
/>
|
||||
<div>
|
||||
<el-text class="mx-1"> 接收内容 </el-text>
|
||||
</div>
|
||||
</template>
|
||||
<template #default="scope">
|
||||
<div class="flex justify-between items-center text-base">
|
||||
<el-text
|
||||
truncated
|
||||
:style="
|
||||
scope.row.msg_data
|
||||
? 'color: rgb(56, 188, 248);'
|
||||
: 'color: rgb(240 70 70);'
|
||||
"
|
||||
style="font-size: 1rem"
|
||||
>
|
||||
{{ scope.row.msg_data ? scope.row.msg_data : "解析错误" }}
|
||||
</el-text>
|
||||
<el-button
|
||||
style="font-size: 1rem; font-weight: bold"
|
||||
size="small"
|
||||
type="primary"
|
||||
plain
|
||||
@click="showAll(scope.row.msg_data)"
|
||||
>
|
||||
展示全部内容
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column min-width="170" column-key="created_at">
|
||||
<template #header>
|
||||
<DateTimePicker
|
||||
v-if="dialogSearchVisible"
|
||||
ref="DateTimePickerRef"
|
||||
DateTimePicker="historyMsgDateTimePicker"
|
||||
@search="historyMsg"
|
||||
/>
|
||||
<div>
|
||||
<el-text class="mx-1"> 接收时间 </el-text>
|
||||
<SortSearch
|
||||
v-if="dialogSortVisible"
|
||||
ref="SortDateTimeRef"
|
||||
activeText="顺序"
|
||||
inactiveText="倒序"
|
||||
@search="historyMsg"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<template #default="scope">
|
||||
<div
|
||||
style="color: rgb(56, 188, 248);"
|
||||
class="flex justify-start items-center text-base"
|
||||
>
|
||||
{{ scope.row.created_at }}
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 表格 -->
|
||||
<Pagination
|
||||
ref="PaginationRef"
|
||||
:active="historyMsgActive"
|
||||
@sizeChangeBack="changePage"
|
||||
@search="historyMsg"
|
||||
/>
|
||||
</div>
|
||||
</el-card>
|
||||
<DataShow ref="DataShowRef" />
|
||||
<PasswordOauth
|
||||
ref="PasswordOauthRef"
|
||||
operateLabel="删除历史消息"
|
||||
@requestOperate="requestOperate"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, watch, onMounted, nextTick } from "vue";
|
||||
import { ElMessage } from "element-plus";
|
||||
|
||||
import TabelTools from "../operate/tabelTools.vue";
|
||||
import TabelSelect from "../operate/tabelSelect.vue";
|
||||
import SearchKey from "../search/searchKey.vue";
|
||||
import SortSearch from "../search/sortSearch.vue";
|
||||
import SelectSearch from "../search/selectSearch.vue";
|
||||
import DateTimePicker from "../search/dateTimePicker.vue";
|
||||
import Pagination from "../search/pagination.vue";
|
||||
import PasswordOauth from "../operate/passwordOauth.vue";
|
||||
import DataShow from "../operate/dataShow.vue";
|
||||
|
||||
import historyMsgActiveStore from "../../stores/historyMsg";
|
||||
|
||||
import moment from "moment";
|
||||
|
||||
import $http from "../../api/index";
|
||||
import $url from "../../api/url";
|
||||
|
||||
import { encrypt } from "../../utils/aes";
|
||||
import { judgment } from "../../utils/judgment.js";
|
||||
import { hasNullOrEmptyPropertyWithTypeof } from "../../utils/hasNullOrEmptyPropertyWithTypeof.js";
|
||||
|
||||
const historyMsgActive = historyMsgActiveStore();
|
||||
|
||||
const delSelectHold = {
|
||||
single: "删除",
|
||||
multiple: "删除选中",
|
||||
all: "删除所有",
|
||||
label: "删除历史消息",
|
||||
};
|
||||
const DelSelectRef = ref(null);
|
||||
const SearchCardIdKeyRef = ref(null);
|
||||
const SortCardIdRef = ref(null);
|
||||
const SortDateTimeRef = ref(null);
|
||||
const SelectSearchRef = ref(null);
|
||||
const SearchOriginalKeyRef = ref(null);
|
||||
const SearchDataKeyRef = ref(null);
|
||||
const DateTimePickerRef = ref(null);
|
||||
const PaginationRef = ref(null);
|
||||
const PasswordOauthRef = ref(null);
|
||||
const DataShowRef = ref(null);
|
||||
const dialogSearchVisible = ref(false);
|
||||
const dialogSortVisible = ref(false);
|
||||
const dialogOperationVisible = ref(false);
|
||||
const userTableRef = ref();
|
||||
const offsetOff = ref(true);
|
||||
const pageCount = ref(0);
|
||||
const searchOptions = reactive({
|
||||
sn_number: "",
|
||||
original_msg: "",
|
||||
msg_data: "",
|
||||
created_at: "",
|
||||
});
|
||||
const sortOptions = reactive({
|
||||
sn_number: false,
|
||||
created_at: false,
|
||||
});
|
||||
const tableData = ref([]);
|
||||
let singleData = reactive({});
|
||||
let delData = reactive({});
|
||||
let delDataClone = reactive({});
|
||||
|
||||
const showAll = (msg) => {
|
||||
DataShowRef.value.dialogMsg = msg;
|
||||
DataShowRef.value.dialogVisible = true;
|
||||
};
|
||||
|
||||
const showTools = (operateType) => {
|
||||
switch (operateType) {
|
||||
case "search":
|
||||
dialogSearchVisible.value = !dialogSearchVisible.value;
|
||||
historyMsgActive.dialogSearchVisible = dialogSearchVisible.value;
|
||||
break;
|
||||
case "sort":
|
||||
dialogSortVisible.value = !dialogSortVisible.value;
|
||||
historyMsgActive.dialogSortVisible = dialogSortVisible.value;
|
||||
break;
|
||||
case "operation":
|
||||
dialogOperationVisible.value = !dialogOperationVisible.value;
|
||||
historyMsgActive.dialogOperationVisible = dialogOperationVisible.value;
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const historyMsg = () => {
|
||||
judgment(searchOptions, "sn_number", SearchCardIdKeyRef.value, "searchMsg");
|
||||
judgment(searchOptions, "original_msg", SearchOriginalKeyRef.value, "searchMsg");
|
||||
judgment(searchOptions, "msg_data", SearchDataKeyRef.value, "searchMsg");
|
||||
judgment(searchOptions, "created_at", DateTimePickerRef.value, "searchMsg");
|
||||
judgment(sortOptions, "sn_number", SortCardIdRef.value, "searchMsg");
|
||||
judgment(sortOptions, "created_at", SortDateTimeRef.value, "searchMsg");
|
||||
if (hasNullOrEmptyPropertyWithTypeof(searchOptions)) {
|
||||
if (PaginationRef.value.offset !== 1 && offsetOff.value) {
|
||||
PaginationRef.value.handleCurrentChange(1);
|
||||
offsetOff.value = false;
|
||||
}
|
||||
} else {
|
||||
offsetOff.value = true;
|
||||
}
|
||||
const data = {
|
||||
uid: localStorage.data,
|
||||
offset: PaginationRef.value.offset,
|
||||
limit: PaginationRef.value.limit,
|
||||
searchOptions: searchOptions,
|
||||
sortOptions: sortOptions,
|
||||
};
|
||||
$http.post($url.getHistoryMsg, data).then((res) => {
|
||||
if (res.data.code === 200) {
|
||||
tableData.value = res.data.historyMsg;
|
||||
tableData.value.forEach((item) => {
|
||||
item.origin_time = item.created_at;
|
||||
item.created_at = moment
|
||||
.utc(item.created_at)
|
||||
.add(8, "hours")
|
||||
.format("YYYY-MM-DD-HH:mm:ss");
|
||||
});
|
||||
PaginationRef.value.dataCount = res.data.count;
|
||||
historyMsgActive.dataCount = PaginationRef.value.dataCount;
|
||||
pageCount.value = Math.ceil(
|
||||
PaginationRef.value.dataCount / PaginationRef.value.limit
|
||||
);
|
||||
historyMsgActive.pageCount = pageCount.value;
|
||||
if (!delData[PaginationRef.value.offset]) return;
|
||||
delData[PaginationRef.value.offset].forEach((element) => {
|
||||
tableData.value.forEach((item) => {
|
||||
if (item.created_at == element.created_at) {
|
||||
nextTick(() => {
|
||||
userTableRef.value.toggleRowSelection(item, true);
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
} else {
|
||||
tableData.value = [];
|
||||
// ElMessage.error("未查找到相关数据！");
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const changePage = (val) => {
|
||||
pageCount.value = Math.ceil(PaginationRef.value.dataCount / val);
|
||||
delData = {};
|
||||
for (let i = 0; i < pageCount.value; i++) {
|
||||
delData[i + 1] = [];
|
||||
for (const key in delDataClone) {
|
||||
delDataClone[key].forEach((element) => {
|
||||
// 判断数据在第几页
|
||||
if (Math.ceil(element.location / PaginationRef.value.limit) == i + 1) {
|
||||
delData[i + 1].push(element);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleSelectionChange = (val) => {
|
||||
delData[PaginationRef.value.offset] = val;
|
||||
tableData.value.forEach((item, index) => {
|
||||
delData[PaginationRef.value.offset].forEach((element) => {
|
||||
if (item.created_at == element.created_at) {
|
||||
// 数据在表格中的位置
|
||||
element.location =
|
||||
(PaginationRef.value.offset - 1) * PaginationRef.value.limit + (index + 1);
|
||||
}
|
||||
});
|
||||
});
|
||||
delDataClone = JSON.parse(JSON.stringify(delData));
|
||||
};
|
||||
|
||||
const showComfirmDialog = (singleMsg) => {
|
||||
singleData = singleMsg.data;
|
||||
PasswordOauthRef.value.operateDialogVisible = true;
|
||||
};
|
||||
|
||||
const requestOperate = () => {
|
||||
const data = {
|
||||
uid: localStorage.data,
|
||||
model: encrypt(DelSelectRef.value.model),
|
||||
password: encrypt(PasswordOauthRef.value.ruleForm.password),
|
||||
userMsg:
|
||||
DelSelectRef.value.model == "single"
|
||||
? singleData
|
||||
: DelSelectRef.value.model == "multiple"
|
||||
? delDataClone
|
||||
: "",
|
||||
};
|
||||
$http.post($url.delHistoryMsg, data).then((res) => {
|
||||
if (res.data.code === 200) {
|
||||
userTableRef.value.clearSelection();
|
||||
delData = {};
|
||||
delDataClone = {};
|
||||
ElMessage({
|
||||
message: "操作成功！",
|
||||
type: "success",
|
||||
});
|
||||
historyMsg();
|
||||
} else {
|
||||
ElMessage.error("操作失败！");
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
defineExpose({ historyMsg });
|
||||
|
||||
watch(searchOptions, (value) => {
|
||||
historyMsgActive.searchOptions = value;
|
||||
});
|
||||
|
||||
watch(sortOptions, (value) => {
|
||||
historyMsgActive.sortOptions = value;
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
pageCount.value = historyMsgActive.pageCount;
|
||||
dialogSearchVisible.value = historyMsgActive.dialogSearchVisible;
|
||||
dialogSortVisible.value = historyMsgActive.dialogSortVisible;
|
||||
dialogOperationVisible.value = historyMsgActive.dialogOperationVisible;
|
||||
|
||||
if (dialogSearchVisible.value) {
|
||||
searchOptions.sn_number = historyMsgActive.searchOptions.sn_number;
|
||||
searchOptions.original_msg = historyMsgActive.searchOptions.original_msg;
|
||||
searchOptions.msg_data = historyMsgActive.searchOptions.msg_data;
|
||||
searchOptions.created_at = historyMsgActive.searchOptions.created_at;
|
||||
}
|
||||
|
||||
if (dialogSortVisible.value) {
|
||||
sortOptions.sn_number = historyMsgActive.sortOptions.sn_number;
|
||||
sortOptions.created_at = historyMsgActive.sortOptions.created_at;
|
||||
}
|
||||
|
||||
if (dialogOperationVisible.value) {
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
historyMsg();
|
||||
}, 200);
|
||||
|
||||
setTimeout(() => {
|
||||
if (dialogSearchVisible.value) {
|
||||
SearchCardIdKeyRef.value.searchMsg = historyMsgActive.searchOptions.sn_number;
|
||||
SearchOriginalKeyRef.value.searchMsg = historyMsgActive.searchOptions.original_msg;
|
||||
SearchDataKeyRef.value.searchMsg = historyMsgActive.searchOptions.msg_data;
|
||||
DateTimePickerRef.value.created_at = historyMsgActive.searchOptions.created_at;
|
||||
}
|
||||
|
||||
if (dialogSortVisible.value) {
|
||||
SortCardIdRef.value.searchMsg = historyMsgActive.sortOptions.sn_number;
|
||||
SortDateTimeRef.value.searchMsg = historyMsgActive.sortOptions.created_at;
|
||||
}
|
||||
|
||||
if (dialogOperationVisible.value) {
|
||||
}
|
||||
}, 0);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
Reference in New Issue
Block a user