zhouyulong/electron-4
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

"态势接口部分"

Browse Source
This commit is contained in:
zyl
2025-11-03 12:39:21 +08:00
parent cb9d604abd
commit 3e5f5fbd65
1 changed files with 0 additions and 379 deletions
Download Patch File Download Diff File Expand all files Collapse all files

379
src/renderer/src/views/TS/index.vue
View File

@ -1,379 +0,0 @@
<template>
<div class="index">
<!--<span @click="back">态势</span>-->
<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.create_by"
style="width: 240px"
placeholder="请输入创建人姓名"
clearable
/></span>
<span
>创建时间
<el-date-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="x"
/></span>
<el-button @click="search">搜索</el-button>
<el-button @click="reset">重置</el-button>
</div>
<div class="option">
<el-button :icon="CirclePlus">新建推演</el-button>
<el-button :icon="Download">导入</el-button>
<el-button :icon="Upload">导出</el-button>
</div>
<div class="tableBox">
<el-table
:data="tableData"
:default-sort="{ prop: 'date', order: 'descending' }"
style="width: 100%"
>
<el-table-column align="center" prop="name" label="推演名称" />
<el-table-column align="center" prop="description" label="推演描述" />
<el-table-column align="center" prop="create_by" label="创建人" />
<el-table-column align="center" prop="date" label="创建日期" sortable />
<el-table-column align="center" label="操作">
<template #default="scope">
<el-button text size="small" type="primary" :icon="Edit" @click="toTSEdit"
>编辑</el-button
>
<el-button text size="small" type="primary" :icon="Delete">删除</el-button>
</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>
</div>
</template>
<script setup lang="ts">
//@ts-nocheck
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { Delete, Edit, CirclePlus, Download, Upload } from '@element-plus/icons-vue'
import { TableV2SortOrder } from 'element-plus'
import type { SortBy } from 'element-plus'
const { ipcRenderer } = require('electron')
const router = useRouter()
let searchParams = ref({
name: '',
create_by: '',
datetime: ''
})
let pageSize = ref(5)
let pageNum = ref(1)
let total = ref(0)
const back = () => {
ipcRenderer.send('toggle-fullscreen', false)
router.push({ path: '/home' })
}
const handleSizeChange = (val) => {
pageSize = val
getList()
}
const handleCurrentChange = (val) => {
pageNum = val
getList()
}
const getList = () => {
console.log(pageSize, pageNum)
}
const tableData: User[] = [
{
date: '2016-05-03',
name: '测试',
description: '这是一个方案描述',
create_by: 'admin'
},
{
date: '2016-05-02',
name: '协同方案',
description: '这是一个方案描述',
create_by: 'admin'
},
{
date: '2016-05-04',
name: '1990',
description: '这是一个方案描述',
create_by: 'admin'
},
{
date: '2016-05-01',
name: '2025',
description: '这是一个方案描述',
create_by: 'admin'
}
]
const search = () => {
console.log(searchParams)
}
const reset = () => {
searchParams.value = { name: '', create_by: '', datetime: '' }
}
const toTSEdit = () => {
router.push({ path: '/tsEdit' })
}
/*
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
}
*/
</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;
.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: 95px;
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 rgba(var(--color-base1), 1);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80vw;
height: 72vh;
display: flex;
flex-direction: column;
background:
linear-gradient(180deg, rgba(var(--color-base1), 0.2) 0%, rgba(var(--color-base1), 0) 100%),
rgba(0, 0, 0, 0.6);
border-image: linear-gradient(137.95deg, rgba(var(--color-base1), 1) 6.25%, var(--color-border1) 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(var(--color-base1), 0.2);
}
:deep(.el-button) {
color: #fff;
}
:deep(.el-button:not(.is-text)) {
border: 1px solid rgba(var(--color-base1), 1);
background: rgba(var(--color-base1), 0.2);
}
:deep(.el-button:hover) {
color: rgba(var(--color-base1), 1);
//background-color: transparent !important;
background: rgba(var(--color-base1), 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: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 .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(var(--color-base1), 0.2);
}*/
</style>