"态势接口部分"
This commit is contained in:
@ -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>
|
|
||||||
Reference in New Issue
Block a user