|
|
@@ -1,98 +1,133 @@
|
|
|
<template>
|
|
|
- <div class="ship-info-form">
|
|
|
- <el-collapse class="el-collapse" v-model="activeNames">
|
|
|
- <el-collapse-item name="1">
|
|
|
- <template #title="{ isActive }">
|
|
|
- <div class="collapse-title">操作记录</div>
|
|
|
- </template>
|
|
|
- <el-table :data="tableData" style="width: 100%" :span-method="objectSpanMethod" border>
|
|
|
- <el-table-column fixed type="index" label="序号" width="80" />
|
|
|
- <el-table-column prop="receiver" label="接收单位" width="200" />
|
|
|
- <el-table-column prop="date" label="操作时间" width="200" />
|
|
|
- <el-table-column prop="step" label="通报环节" width="200" />
|
|
|
- <el-table-column prop="unit" label="发布/接收单位" width="200" />
|
|
|
- <el-table-column prop="action" label="操作记录" width="200" />
|
|
|
- <el-table-column prop="status" label="状态" width="200" />
|
|
|
- <el-table-column prop="measureType" label="处置措施类型" width="200" />
|
|
|
- <el-table-column prop="measure" label="采取措施" width="200" />
|
|
|
- <el-table-column prop="remark" label="其他措施说明" width="200" />
|
|
|
- <el-table-column prop="operator" label="发布/接收人员" width="200" />
|
|
|
- <el-table-column prop="opinion" label="处置意见" width="200" />
|
|
|
- <el-table-column fixed="right" label="附件查看" width="200">
|
|
|
- <template #default="scope">
|
|
|
- <el-button link type="primary" @click="viewAttachment(scope.row)">查看</el-button>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
- </el-collapse-item>
|
|
|
- </el-collapse>
|
|
|
- </div>
|
|
|
+ <div class="ship-info-form">
|
|
|
+ <el-collapse class="el-collapse" v-model="activeNames">
|
|
|
+ <el-collapse-item name="1">
|
|
|
+ <template #title="{ isActive }">
|
|
|
+ <div class="collapse-title">
|
|
|
+ 操作记录
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <el-table
|
|
|
+ :data="tableData"
|
|
|
+ style="width: 100%"
|
|
|
+ :span-method="objectSpanMethod"
|
|
|
+ border
|
|
|
+ >
|
|
|
+ <el-table-column fixed type="index" label="序号" width="80" />
|
|
|
+ <el-table-column prop="receivingUnit" label="接收单位" width="200" />
|
|
|
+ <el-table-column prop="operationTime" label="操作时间" width="200" />
|
|
|
+ <el-table-column prop="notificationLink" label="通报环节" width="200">
|
|
|
+ <template #default="scope">
|
|
|
+ {{ getStatusLabel(notificationLink, scope.row.notificationLink) }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="par" label="发布/接收单位" width="200" />
|
|
|
+ <el-table-column prop="operationRecord" label="操作记录" width="200">
|
|
|
+ <template #default="scope">
|
|
|
+ {{ getStatusLabel(operationRecord, scope.row.operationRecord) }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="notificationStatus" label="状态" width="200">
|
|
|
+ <template #default="scope">
|
|
|
+ {{ getStatusLabel(notificationStatus, scope.row.notificationStatus) }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="todm" label="处置措施类型" width="200">
|
|
|
+ <template #default="scope">
|
|
|
+ {{ getStatusLabel(todm, scope.row.todm) }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="takeMeasures" label="采取措施" width="200" />
|
|
|
+ <el-table-column prop="doom" label="其他措施说明" width="200" />
|
|
|
+ <el-table-column prop="rarp" label="发布/接收人员" width="200" />
|
|
|
+ <el-table-column prop="opinions" label="处置意见" width="200" />
|
|
|
+ <el-table-column fixed="right" label="附件查看" width="200">
|
|
|
+ <template #default="scope">
|
|
|
+ <el-button link type="primary" @click="viewAttachment(scope.row)">查看</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </el-collapse-item>
|
|
|
+ </el-collapse>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
-import { ref, onMounted } from 'vue';
|
|
|
+import { ref, onMounted } from 'vue'
|
|
|
+import { useRoute } from 'vue-router'
|
|
|
+import { outTypeList, getStatusLabel } from '@/libs/commonMeth';
|
|
|
|
|
|
-const activeNames = ref(['1']);
|
|
|
+// 通报环节
|
|
|
+const notificationLink = outTypeList('bj_notification_link');
|
|
|
+// 通报状态
|
|
|
+const notificationStatus = outTypeList('bj_notification_status');
|
|
|
+// 操作记录
|
|
|
+const operationRecord = outTypeList('bj_operation_record');
|
|
|
+// 处置措施类型
|
|
|
+const todm = outTypeList('bj_todm');
|
|
|
+
|
|
|
+const route = useRoute()
|
|
|
+const activeNames = ref(['1'])
|
|
|
|
|
|
// 模拟数据(相同接收单位的数据连续排列)
|
|
|
const tableData = ref([
|
|
|
- {
|
|
|
- id: 1,
|
|
|
- receiver: '韶关海事局',
|
|
|
- date: '2023-06-01 09:00',
|
|
|
- step: '接收',
|
|
|
- unit: '广东省应急厅',
|
|
|
- action: '接收通报',
|
|
|
- status: '已接收',
|
|
|
- measureType: '初步处置',
|
|
|
- measure: '启动应急预案',
|
|
|
- remark: '',
|
|
|
- operator: '张三',
|
|
|
- opinion: '需进一步核查',
|
|
|
- },
|
|
|
- {
|
|
|
- id: 2,
|
|
|
- receiver: '韶关海事局',
|
|
|
- date: '2023-06-01 10:30',
|
|
|
- step: '处置',
|
|
|
- unit: '韶关海事局',
|
|
|
- action: '现场核查',
|
|
|
- status: '处置中',
|
|
|
- measureType: '现场处置',
|
|
|
- measure: '派员现场检查',
|
|
|
- remark: '发现违规行为',
|
|
|
- operator: '李四',
|
|
|
- opinion: '需行政处罚',
|
|
|
- },
|
|
|
- {
|
|
|
- id: 3,
|
|
|
- receiver: '广州海事局',
|
|
|
- date: '2023-06-02 08:00',
|
|
|
- step: '接收',
|
|
|
- unit: '广东省应急厅',
|
|
|
- action: '接收通报',
|
|
|
- status: '已接收',
|
|
|
- measureType: '初步处置',
|
|
|
- measure: '启动应急预案',
|
|
|
- remark: '',
|
|
|
- operator: '王五',
|
|
|
- opinion: '需进一步核查',
|
|
|
- },
|
|
|
- {
|
|
|
- id: 4,
|
|
|
- receiver: '深圳海事局',
|
|
|
- date: '2023-06-02 09:00',
|
|
|
- step: '接收',
|
|
|
- unit: '广东省应急厅',
|
|
|
- action: '接收通报',
|
|
|
- status: '已接收',
|
|
|
- measureType: '初步处置',
|
|
|
- measure: '启动应急预案',
|
|
|
- remark: '',
|
|
|
- operator: '赵六',
|
|
|
- opinion: '需进一步核查',
|
|
|
- },
|
|
|
-]);
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ receivingUnit: '韶关海事局',
|
|
|
+ operationTime: '2023-06-01 09:00',
|
|
|
+ notificationLink: '接收',
|
|
|
+ par: '广东省应急厅',
|
|
|
+ operationRecord: '接收通报',
|
|
|
+ notificationStatus: '已接收',
|
|
|
+ todm: '初步处置',
|
|
|
+ takeMeasures: '启动应急预案',
|
|
|
+ doom: '',
|
|
|
+ rarp: '张三',
|
|
|
+ opinions: '需进一步核查'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2,
|
|
|
+ receivingUnit: '韶关海事局',
|
|
|
+ operationTime: '2023-06-01 10:30',
|
|
|
+ notificationLink: '处置',
|
|
|
+ par: '韶关海事局',
|
|
|
+ operationRecord: '现场核查',
|
|
|
+ notificationStatus: '处置中',
|
|
|
+ todm: '现场处置',
|
|
|
+ takeMeasures: '派员现场检查',
|
|
|
+ doom: '发现违规行为',
|
|
|
+ rarp: '李四',
|
|
|
+ opinions: '需行政处罚'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 3,
|
|
|
+ receivingUnit: '广州海事局',
|
|
|
+ operationTime: '2023-06-02 08:00',
|
|
|
+ notificationLink: '接收',
|
|
|
+ par: '广东省应急厅',
|
|
|
+ operationRecord: '接收通报',
|
|
|
+ notificationStatus: '已接收',
|
|
|
+ todm: '初步处置',
|
|
|
+ takeMeasures: '启动应急预案',
|
|
|
+ doom: '',
|
|
|
+ rarp: '王五',
|
|
|
+ opinions: '需进一步核查'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 4,
|
|
|
+ receivingUnit: '深圳海事局',
|
|
|
+ operationTime: '2023-06-02 09:00',
|
|
|
+ notificationLink: '接收',
|
|
|
+ par: '广东省应急厅',
|
|
|
+ operationRecord: '接收通报',
|
|
|
+ notificationStatus: '已接收',
|
|
|
+ todm: '初步处置',
|
|
|
+ takeMeasures: '启动应急预案',
|
|
|
+ doom: '',
|
|
|
+ rarp: '赵六',
|
|
|
+ opinions: '需进一步核查'
|
|
|
+ }
|
|
|
+])
|
|
|
|
|
|
// 存储合并配置
|
|
|
const spanArr = ref<number[]>([]);
|
|
|
@@ -100,24 +135,33 @@ const position = ref(0);
|
|
|
|
|
|
// 计算合并规则
|
|
|
const computeSpan = () => {
|
|
|
- spanArr.value = [];
|
|
|
- position.value = 0;
|
|
|
-
|
|
|
- // 按接收单位分组计算
|
|
|
- tableData.value.forEach((item, index) => {
|
|
|
- if (index === 0) {
|
|
|
- spanArr.value.push(1);
|
|
|
- position.value = 0;
|
|
|
- } else {
|
|
|
- if (item.receiver === tableData.value[index - 1].receiver) {
|
|
|
- spanArr.value[position.value] += 1;
|
|
|
- spanArr.value.push(0);
|
|
|
- } else {
|
|
|
- spanArr.value.push(1);
|
|
|
- position.value = index;
|
|
|
- }
|
|
|
- }
|
|
|
- });
|
|
|
+ spanArr.value = []
|
|
|
+ position.value = 0
|
|
|
+
|
|
|
+ // 按接收单位分组计算
|
|
|
+ tableData.value.forEach((item, index) => {
|
|
|
+ if (index === 0) {
|
|
|
+ spanArr.value.push(1)
|
|
|
+ position.value = 0
|
|
|
+ } else {
|
|
|
+ if (item.receivingUnit === tableData.value[index - 1].receivingUnit) {
|
|
|
+ spanArr.value[position.value] += 1
|
|
|
+ spanArr.value.push(0)
|
|
|
+ } else {
|
|
|
+ spanArr.value.push(1)
|
|
|
+ position.value = index
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+const fetchNoticeData = () => {
|
|
|
+ // 获取数据
|
|
|
+ if (typeof route.query.info === 'string') {
|
|
|
+ tableData.value = JSON.parse(route.query.info).middleLogList;
|
|
|
+ }
|
|
|
+ computeSpan()
|
|
|
+
|
|
|
};
|
|
|
|
|
|
// 合并单元格方法
|
|
|
@@ -141,8 +185,8 @@ const viewAttachment = row => {
|
|
|
|
|
|
// 初始化时计算合并规则
|
|
|
onMounted(() => {
|
|
|
- computeSpan();
|
|
|
-});
|
|
|
+ fetchNoticeData()
|
|
|
+})
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
@@ -152,15 +196,13 @@ onMounted(() => {
|
|
|
padding: 20px;
|
|
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
|
|
|
}
|
|
|
-
|
|
|
:deep .el-collapse-item__header {
|
|
|
- color: #5070ae;
|
|
|
- font-size: 16px;
|
|
|
- background: linear-gradient(135deg, #d2e8ff, #fcfeff);
|
|
|
+ color: #5070ae;
|
|
|
+ size: 24px;
|
|
|
+ background: linear-gradient(135deg, #d2e8ff, #fcfeff);
|
|
|
box-shadow: 0 8px 20px #fcfeff;
|
|
|
- text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
|
- padding-left: 20px;
|
|
|
- height: 50px;
|
|
|
+ text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
|
|
|
+ padding-left: 20px;
|
|
|
}
|
|
|
|
|
|
:deep .el-collapse-item__wrap {
|