549 lines
14 KiB
Vue
549 lines
14 KiB
Vue
<template>
|
|
<div class="index">
|
|
<!--<span @click="back">态势</span>-->
|
|
<div class="dateTime">
|
|
<span>{{ date.hms }}</span>
|
|
<div class="ymd_week">
|
|
<span>{{ date.ymd }}</span>
|
|
<span>星期{{ date.week }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="titles">实景三维态势推演系统</div>
|
|
<svg class="icon icon-top" aria-hidden="true">
|
|
<use xlink:href="#icon-top"></use>
|
|
</svg>
|
|
<svg class="icon icon-tuichudenglu" @click="back" aria-hidden="true">
|
|
<use xlink:href="#icon-tuichudenglu"></use>
|
|
</svg>
|
|
<div class="list-container">
|
|
<div class="sub-title">
|
|
<span>历史推演</span>
|
|
<svg class="icon icon-title" aria-hidden="true">
|
|
<use xlink:href="#icon-title"></use>
|
|
</svg>
|
|
</div>
|
|
<div class="search">
|
|
<span>推演名称 <el-input
|
|
v-model="searchParams.name"
|
|
style="width: 240px"
|
|
placeholder="请输入推演名称"
|
|
clearable
|
|
/></span>
|
|
<span>创建人 <el-input
|
|
v-model="searchParams.createdBy"
|
|
style="width: 240px"
|
|
placeholder="请输入创建人姓名"
|
|
clearable
|
|
/></span>
|
|
<span>创建时间 <el-date-picker
|
|
:teleported="false"
|
|
class="dark-time-picker"
|
|
v-model="searchParams.datetime"
|
|
type="datetimerange"
|
|
start-placeholder="开始日期"
|
|
end-placeholder="结束日期"
|
|
format="YYYY-MM-DD HH:mm:ss"
|
|
date-format="YYYY-MM-DD ddd"
|
|
time-format="A hh:mm:ss"
|
|
value-format="YYYY-MM-DD HH:mm:ss"
|
|
/></span>
|
|
<el-button @click="search">搜索</el-button>
|
|
<el-button @click="reset">重置</el-button>
|
|
</div>
|
|
<div class="option">
|
|
<el-button :icon="CirclePlus" @click="addPlan">新建推演</el-button>
|
|
<el-button :icon="Download">导入</el-button>
|
|
<el-button :icon="Upload">导出</el-button>
|
|
</div>
|
|
<div class="tableBox">
|
|
<el-table
|
|
:data="tableData"
|
|
|
|
style="width: 100%"
|
|
>
|
|
<el-table-column align="center" prop="name" label="推演名称"/>
|
|
<el-table-column align="center" label="推演描述" :class-name="'ellipsis-column'">
|
|
<template #default="scope">
|
|
{{ scope.row.desc }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column align="center" prop="createdBy" label="创建人" sortable/>
|
|
<el-table-column align="center" prop="createdAt" label="创建日期" sortable/>
|
|
<el-table-column align="center" label="操作">
|
|
<template #default="scope">
|
|
|
|
<!--<el-button text size="small" type="primary" :icon="Edit" @click="toTSEdit(scope.row)">编辑</el-button>-->
|
|
<!-- <el-popconfirm
|
|
confirm-button-text="确定"
|
|
cancel-button-text="取消"
|
|
icon-color="#626AEF"
|
|
title="确定删除吗?"
|
|
@confirm="delPlan(scope.row.id)"
|
|
>
|
|
<template #reference>
|
|
<el-button text size="small" type="primary" :icon="Delete">删除
|
|
</el-button>
|
|
|
|
<!–<el-button>Delete</el-button>–>
|
|
</template>
|
|
</el-popconfirm>-->
|
|
|
|
<div>
|
|
<Edit style="width: 16px; height: 16px; " @click="toTSEdit(scope.row)"></Edit>
|
|
<Delete style="width: 16px; height: 16px;" @click="delPlanBtn(scope.row.id)"/>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<!-- <el-auto-resizer>
|
|
<template #default="{ height, width }">
|
|
<el-table-v2
|
|
:sort-by="sortState"
|
|
:columns="columns"
|
|
:data="data"
|
|
:width="width"
|
|
:height="height"
|
|
fixed
|
|
@column-sort="onSort"
|
|
/>
|
|
</template>
|
|
</el-auto-resizer>-->
|
|
</div>
|
|
<div class="pageBox">
|
|
|
|
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
|
|
:page-sizes="[5, 10, 50, 100]" :page-size="pageSize"
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
:total="total">
|
|
</el-pagination>
|
|
</div>
|
|
</div>
|
|
<NewPlan @addCallback="getList(searchParams.value)"></NewPlan>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import {ref, onUnmounted} from "vue";
|
|
import {useRouter} from "vue-router";
|
|
import {Delete, Edit, CirclePlus, Download, Upload} from '@element-plus/icons-vue'
|
|
import {ElMessage, ElMessageBox, TableV2SortOrder} from 'element-plus'
|
|
import type {SortBy} from 'element-plus'
|
|
import {TsApi} from "../../api/ts";
|
|
import NewPlan from "./newPlan.vue"
|
|
|
|
const date = ref({
|
|
ymd: '',
|
|
hms: '',
|
|
week: ""
|
|
})
|
|
const eventBus: any = inject('bus')
|
|
const {ipcRenderer} = require('electron')
|
|
const router = useRouter()
|
|
let searchParams: any = ref({
|
|
name: "",
|
|
createdBy: "",
|
|
datetime: "",
|
|
})
|
|
|
|
let pageSize: any = ref(10)
|
|
let pageNum: any = ref(1)
|
|
let total: any = ref(0)
|
|
const back = () => {
|
|
// ipcRenderer.send('toggle-fullscreen', false)
|
|
router.push({path: '/home'})
|
|
}
|
|
const handleSizeChange = (val) => {
|
|
pageSize.value = val
|
|
getList();
|
|
}
|
|
const handleCurrentChange = (val) => {
|
|
pageNum.value = val
|
|
getList();
|
|
}
|
|
const getList = (params: any = null) => {
|
|
console.log(params)
|
|
let formData = new FormData()
|
|
formData.append('pageSize', pageSize.value)
|
|
formData.append('pageNum', pageNum.value)
|
|
if (params) {
|
|
for (const paramsKey in params) {
|
|
if (params[paramsKey]) {
|
|
if (paramsKey == 'datetime') {
|
|
formData.append('startTime', params[paramsKey][0])
|
|
formData.append('endTime', params[paramsKey][1])
|
|
} else {
|
|
formData.append(paramsKey, params[paramsKey])
|
|
}
|
|
}
|
|
|
|
}
|
|
formData.append('username', params["createdBy"])
|
|
|
|
}
|
|
TsApi.planList(formData).then(res => {
|
|
console.log(res)
|
|
if (res.code == 200) {
|
|
tableData.value = res.data.records
|
|
total.value = res.data.total
|
|
}
|
|
})
|
|
}
|
|
getList()
|
|
const tableData = ref([])
|
|
const search = () => {
|
|
console.log(searchParams)
|
|
getList(searchParams.value)
|
|
}
|
|
const reset = () => {
|
|
searchParams.value = {name: "", createdBy: "", datetime: ""}
|
|
getList(searchParams.value)
|
|
}
|
|
const toTSEdit = (row) => {
|
|
// router.push({path: '/tsEdit'})
|
|
console.log("当前推演方案", row)
|
|
router.push({
|
|
name: 'tsEdit', // 必须用 name 匹配路由，不能用 path
|
|
query: {id: row.id, name: row.name, desc: row.desc, start_time: new Date(row.simulationStartTime).getTime(),}
|
|
})
|
|
}
|
|
const delPlanBtn = (id) => {
|
|
ElMessageBox.confirm('确定要永久删除此推演方案吗？此操作不可撤销', {
|
|
type: 'warning',
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消'
|
|
}).then(() => {
|
|
delPlan(id)
|
|
}).catch(() => {
|
|
})
|
|
}
|
|
const delPlan = (id) => {
|
|
|
|
let formData = new FormData()
|
|
formData.append('id', id)
|
|
TsApi.delPlan(formData).then(res => {
|
|
if (res.code == 200) {
|
|
ElMessage({
|
|
message: '操作成功！',
|
|
type: 'success'
|
|
})
|
|
getList(searchParams.value)
|
|
}
|
|
})
|
|
}
|
|
const addPlan = () => {
|
|
// $(".newPlan")[0].style.display = 'block'
|
|
// $(".el-overlay")[0].style.display = 'block'
|
|
eventBus.emit('openAddPlan', true)
|
|
}
|
|
/*
|
|
const generateData = (
|
|
columns: ReturnType<typeof generateColumns>,
|
|
length = 200,
|
|
prefix = 'row-'
|
|
) =>
|
|
Array.from({length}).map((_, rowIndex) => {
|
|
return columns.reduce(
|
|
(rowData, column, columnIndex) => {
|
|
rowData[column.dataKey] = `Row ${rowIndex} - Col ${columnIndex}`
|
|
return rowData
|
|
},
|
|
{
|
|
id: `${prefix}${rowIndex}`,
|
|
parentId: null,
|
|
}
|
|
)
|
|
})
|
|
const generateColumns = (length = 10, prefix = 'column-', props?: any) =>
|
|
Array.from({length}).map((_, columnIndex) => ({
|
|
...props,
|
|
key: `${prefix}${columnIndex}`,
|
|
dataKey: `${prefix}${columnIndex}`,
|
|
title: `Column ${columnIndex}`,
|
|
width: 150,
|
|
}))
|
|
const columns = generateColumns(3)
|
|
const sortState = ref<SortBy>({
|
|
key: 'column-0',
|
|
order: TableV2SortOrder.ASC,
|
|
})
|
|
|
|
let data = generateData(columns, 10)
|
|
console.log(data)
|
|
console.log(columns)
|
|
columns[0].sortable = true
|
|
const onSort = (sortBy: SortBy) => {
|
|
console.log(sortBy)
|
|
data = data.reverse()
|
|
sortState.value = sortBy
|
|
}
|
|
*/
|
|
const setTime = () => {
|
|
let date1 = new Date()
|
|
let year: any = date1.getFullYear()
|
|
let month: any = date1.getMonth() + 1
|
|
let day: any = date1.getDate()
|
|
let hours: any = date1.getHours()
|
|
if (hours < 10) {
|
|
hours = '0' + hours
|
|
}
|
|
let minutes: any = date1.getMinutes()
|
|
if (minutes < 10) {
|
|
minutes = '0' + minutes
|
|
}
|
|
let seconds: any = date1.getSeconds()
|
|
if (seconds < 10) {
|
|
seconds = '0' + seconds
|
|
}
|
|
date.value.ymd = year + '-' + month + '-' + day
|
|
date.value.hms = hours + ':' + minutes + ':' + seconds
|
|
|
|
date.value.week = ["天", "一", "二", "三", "四", "五", "六"][date1.getDay()]
|
|
}
|
|
// 添加定时器，每秒更新一次时间
|
|
const timer = setInterval(setTime, 1000)
|
|
onUnmounted(() => {
|
|
clearInterval(timer)
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
|
.index {
|
|
background: url("../../assets/img/bkgif@3x.gif") no-repeat;
|
|
background-size: 100% 100%;
|
|
width: 100vw;
|
|
height: 100vh !important;
|
|
position: relative;
|
|
|
|
.dateTime {
|
|
position: absolute;
|
|
z-index: 999;
|
|
left: 20px;
|
|
//top: 15px;
|
|
top: 0.55vw;
|
|
height: 50px;
|
|
//border: 1px solid red;
|
|
//width: 200px;
|
|
// color: var(--svg-headColor3);
|
|
color: #fff;
|
|
font-weight: bold;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-family: 'alimamashuheiti';
|
|
|
|
& > span:first-child {
|
|
letter-spacing: 1px;
|
|
font-size: 2rem;
|
|
font-family: 'alimamashuheiti';
|
|
margin-right: 10px;
|
|
width: 140px;
|
|
}
|
|
|
|
.ymd_week {
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
& > span:first-child {
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
& > span:last-child {
|
|
font-size: 0.8rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.titles {
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
font-size: 40px;
|
|
top: 19px;
|
|
line-height: 50px;
|
|
font-family: "alimamashuheiti";
|
|
z-index: 999;
|
|
position: absolute;
|
|
color: #fff;
|
|
}
|
|
|
|
.icon-top {
|
|
width: 100%;
|
|
height: 96px;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 99;
|
|
position: absolute;
|
|
}
|
|
|
|
.icon-tuichudenglu {
|
|
cursor: pointer;
|
|
position: absolute;
|
|
z-index: 999;
|
|
width: 26px;
|
|
height: 26px;
|
|
right: 8px;
|
|
top: 8px;
|
|
}
|
|
|
|
.list-container {
|
|
border: 1px solid #0ff;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 80vw;
|
|
height: 72vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: linear-gradient(180deg, rgba(0, 255, 255, 0.2) 0%, rgba(0, 255, 255, 0) 100%), rgba(0, 0, 0, 0.6);
|
|
border-image: linear-gradient(137.95deg, rgba(0, 255, 255, 1) 6.25%, rgba(0, 200, 255, 1) 100%) 2;
|
|
backdrop-filter: blur(2px);
|
|
|
|
& > div {
|
|
padding: 10px 0;
|
|
margin: 0 auto;
|
|
width: 95%;
|
|
//border: 1px solid;
|
|
box-sizing: content-box;
|
|
}
|
|
|
|
.sub-title {
|
|
font-size: 32px;
|
|
width: 15.4350566864vw;
|
|
height: 4.0740740741vh;
|
|
//padding: vh(20);
|
|
position: relative;
|
|
|
|
span {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
//font-family: W7;
|
|
user-select: none;
|
|
}
|
|
|
|
.icon-title {
|
|
width: 15.4350566864vw;
|
|
height: 4.0740740741vh;
|
|
}
|
|
}
|
|
|
|
.search {
|
|
span {
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
|
|
.tableBox {
|
|
flex: auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
//将表格所有的背景色都改为透明色，字体改为白色
|
|
:deep(.el-table), :deep(.el-table tr), :deep(.el-table .el-table__cell) {
|
|
background-color: transparent;
|
|
color: #fff;
|
|
|
|
}
|
|
|
|
//表格行hover和表头的背景色
|
|
:deep(.el-table__header-wrapper),
|
|
:deep(.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell ) {
|
|
background-color: rgba(0, 255, 255, 0.2);
|
|
}
|
|
|
|
:deep(.el-button) {
|
|
color: #fff;
|
|
}
|
|
|
|
:deep(.el-button:not(.is-text)) {
|
|
border: 1px solid #0ff;
|
|
background: rgba(0, 255, 255, 0.2);
|
|
}
|
|
|
|
:deep(.el-button:hover) {
|
|
color: #0ff;
|
|
//background-color: transparent !important;
|
|
background: rgba(0, 255, 255, 0.2) !important;
|
|
}
|
|
|
|
:deep(.el-input__wrapper), :deep(.el-range-input), :deep(.el-range-separator) {
|
|
background: transparent;
|
|
--el-input-placeholder-color: #fff;
|
|
--el-text-color-placeholder: #fff;
|
|
color: #fff;
|
|
}
|
|
|
|
:deep(.el-input__inner) {
|
|
color: #fff;
|
|
}
|
|
|
|
:deep(.el-input__inner:focus) {
|
|
border-color: #f00;
|
|
}
|
|
|
|
:deep(.el-table__inner-wrapper:before) {
|
|
background: transparent;
|
|
}
|
|
|
|
:deep(.el-table__header-wrapper .el-table__cell) {
|
|
border-bottom: none !important;
|
|
}
|
|
|
|
:deep(.el-table__row .ellipsis-column .cell) {
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
:deep(.el-table__row .el-table__cell) {
|
|
border-bottom: 1px solid rgba(152, 152, 152, 0.5);
|
|
}
|
|
|
|
/*
|
|
表格V2
|
|
:deep(.el-table-v2__main) {
|
|
background-color: transparent;
|
|
}
|
|
|
|
:deep(.el-table-v2__header-cell) {
|
|
background-color: transparent;
|
|
color: #fff;
|
|
}
|
|
|
|
:deep(.el-table-v2__header-wrapper) {
|
|
background-color: rgba(0, 255, 255, 0.2);
|
|
}*/
|
|
|
|
</style>
|
|
<style scoped>
|
|
:deep(.el-picker-panel) {
|
|
color: var(--el-text-color-regular);
|
|
background: var(--el-bg-color-overlay);
|
|
border-radius: var(--el-popper-border-radius, var(--el-border-radius-base));
|
|
line-height: 30px;
|
|
}
|
|
|
|
:deep(.el-date-range-picker) {
|
|
color-scheme: dark;
|
|
|
|
--el-bg-color-page: #0a0a0a;
|
|
--el-bg-color: #141414;
|
|
--el-bg-color-overlay: #1d1e1f;
|
|
--el-text-color-primary: #E5EAF3;
|
|
--el-text-color-regular: #CFD3DC;
|
|
--el-text-color-secondary: #A3A6AD;
|
|
--el-text-color-placeholder: #8D9095;
|
|
--el-text-color-disabled: #6C6E72;
|
|
--el-border-color-darker: #636466;
|
|
--el-border-color-dark: #58585B;
|
|
--el-border-color: #4C4D4F;
|
|
--el-border-color-light: #414243;
|
|
--el-border-color-lighter: #363637;
|
|
--el-border-color-extra-light: #2B2B2C;
|
|
|
|
}
|
|
</style>
|