|
|
@@ -1,211 +0,0 @@
|
|
|
-<template>
|
|
|
- <div class="container">
|
|
|
- <!-- <el-table v-loading="loading" border stripe :data="data" style="width: 100%">
|
|
|
- <el-table-column align="center" prop="id" label="ID"/>
|
|
|
- <el-table-column align="center" prop="server" label="服务器"/>
|
|
|
- <el-table-column align="center" prop="name" label="名称"/>
|
|
|
- <el-table-column align="center" prop="types" label="类型"/>
|
|
|
- <el-table-column align="center" prop="addr" label="地址"/>
|
|
|
- <el-table-column show-overflow-tooltip align="center" prop="createdAt" label="创建时间"/>
|
|
|
- <el-table-column align="center" prop="last" label="最近上线"/>
|
|
|
- <el-table-column align="center" prop="types" label="状态">
|
|
|
- <template #default="scope">
|
|
|
- <el-tag v-if="!scope.row.status" class="ml-2" type="danger">离线</el-tag>
|
|
|
- <el-tag v-else class="ml-2" type="success">在线</el-tag>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column align="center" label="操作" width="200">
|
|
|
- <template #default="scope">
|
|
|
- <el-button size="small" type="text" @click="onRowDel(scope.row)">详情</el-button>
|
|
|
-
|
|
|
- <el-button size="small" type="text" @click="onOpenEditSign(scope.row)">编辑</el-button>
|
|
|
- <el-button size="small" type="text" @click="onRowDetail(scope.row)">更多</el-button>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- </el-table> -->
|
|
|
- <div class="content">
|
|
|
- <!-- <section v-for="(item, index) in data" :key="index"> -->
|
|
|
- <el-card class="item" @click="toDetail(item.id)" shadow="hover" v-for="(item, index) in data" :key="index">
|
|
|
- <div class="top-inner-wrap">
|
|
|
- <span>通道：{{item.id}}</span>
|
|
|
- <span class="more">更多
|
|
|
- <i class="fa fa-angle-down"></i>
|
|
|
- <!-- <ele-ArrowDown /> -->
|
|
|
- </span>
|
|
|
- </div>
|
|
|
- <div class="content-wrap">
|
|
|
- <div class="name-and-status">
|
|
|
- <span>{{item.name}}</span>
|
|
|
- [
|
|
|
- <span>{{item.status?'启动':'未启动'}}</span>
|
|
|
- ]
|
|
|
- </div>
|
|
|
- <div class="">
|
|
|
- <span>{{item.types}}</span>
|
|
|
- <span style="margin-left: 6px;">{{item.name}}</span>
|
|
|
- </div>
|
|
|
-
|
|
|
- </div>
|
|
|
- </el-card>
|
|
|
- </div>
|
|
|
- <el-pagination
|
|
|
- @size-change="onHandleSizeChange"
|
|
|
- @current-change="onHandleCurrentChange"
|
|
|
- class="mt15"
|
|
|
- :pager-count="5"
|
|
|
- :page-sizes="[10, 20, 30]"
|
|
|
- v-model:current-page="param.page"
|
|
|
- background
|
|
|
- v-model:page-size="param.pageSize"
|
|
|
- layout="total, sizes, prev, pager, next, jumper"
|
|
|
- :total="total"
|
|
|
- >
|
|
|
- </el-pagination>
|
|
|
- </div>
|
|
|
-
|
|
|
-</template>
|
|
|
-
|
|
|
-<script lang="ts">
|
|
|
-import { ref, toRefs, reactive, onMounted, nextTick, computed, watch, defineComponent } from 'vue';
|
|
|
-import { useRouter } from 'vue-router';
|
|
|
-import api from '/@/api/network';
|
|
|
-
|
|
|
-// 定义接口来定义对象的类型
|
|
|
-interface TableDataForm {
|
|
|
- id: number;
|
|
|
- server: string;
|
|
|
- name: string;
|
|
|
-
|
|
|
-}
|
|
|
-interface TableData {
|
|
|
- data: Array<TableDataForm>;
|
|
|
- total: number;
|
|
|
- loading: boolean;
|
|
|
- param: {
|
|
|
- page: number;
|
|
|
- pageSize: number;
|
|
|
- };
|
|
|
-}
|
|
|
-
|
|
|
-export default defineComponent({
|
|
|
- name: 'tunnelTable',
|
|
|
- props: {
|
|
|
- // 输入框前置内容
|
|
|
- queryForm: {
|
|
|
- type: Object,
|
|
|
- default: () => {},
|
|
|
- },
|
|
|
- },
|
|
|
- setup(props, { emit }) {
|
|
|
- const router = useRouter();
|
|
|
- const state = reactive<TableData>({
|
|
|
- data: [],
|
|
|
- total: 0,
|
|
|
- loading: false,
|
|
|
- param: {
|
|
|
- page: 1,
|
|
|
- pageSize: 10,
|
|
|
- },
|
|
|
-
|
|
|
-
|
|
|
- });
|
|
|
- // 分页改变
|
|
|
- const onHandleSizeChange = (val: number) => {
|
|
|
- state.param.pageSize = val;
|
|
|
- fetchList()
|
|
|
- };
|
|
|
- // 分页改变
|
|
|
- const onHandleCurrentChange = (val: number) => {
|
|
|
- state.param.page = val;
|
|
|
- fetchList()
|
|
|
- };
|
|
|
- // 初始化表格数据
|
|
|
- const initTableData = () => {
|
|
|
- fetchList()
|
|
|
-
|
|
|
-
|
|
|
- };
|
|
|
- // 获取数据
|
|
|
- const fetchList = () => {
|
|
|
- console.log(props.queryForm.title)
|
|
|
- let params = {
|
|
|
- keyWord: props.queryForm.title,
|
|
|
- pageNum: state.param.page,
|
|
|
- PageSize: state.param.pageSize
|
|
|
- }
|
|
|
- api.server.getList(params).then((res: any) => {
|
|
|
- console.log(res);
|
|
|
- const { list, total, page } = res
|
|
|
- state.data = list
|
|
|
- state.total = total
|
|
|
- state.param.page = page
|
|
|
- });
|
|
|
-
|
|
|
-
|
|
|
- };
|
|
|
- const toDetail = (id: number) => {
|
|
|
- router.push(`/network/server/detail/${id}`)
|
|
|
- };
|
|
|
- // 监听双向绑定 queryForm 的变化
|
|
|
- watch(
|
|
|
- () => props.queryForm,
|
|
|
- // 新数据
|
|
|
- () => {
|
|
|
- fetchList()
|
|
|
- },
|
|
|
- { deep: true,
|
|
|
- immediate: true
|
|
|
- },
|
|
|
- );
|
|
|
- // 页面加载时
|
|
|
- onMounted(() => {
|
|
|
- initTableData();
|
|
|
- });
|
|
|
- return {
|
|
|
- fetchList,
|
|
|
- toDetail,
|
|
|
- onHandleSizeChange,
|
|
|
- onHandleCurrentChange,
|
|
|
- ...toRefs(state),
|
|
|
- };
|
|
|
- }
|
|
|
-});
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss" scoped>
|
|
|
-.container {
|
|
|
- width: 100%;
|
|
|
- .content {
|
|
|
- display: flex;
|
|
|
- flex-flow: row wrap;
|
|
|
- width: 100%;
|
|
|
- .item {
|
|
|
- width: calc((100% - 40px)/3);
|
|
|
- cursor: pointer;
|
|
|
- border-radius: 6px;
|
|
|
- .top-inner-wrap {
|
|
|
- font-size: 15px;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- background: transparent;
|
|
|
- border-bottom: 1px solid var(--el-card-border-color);
|
|
|
- // border: 1px solid var(--el-card-border-color);
|
|
|
- .more {
|
|
|
- color: var(--el-color-primary);
|
|
|
- }
|
|
|
- }
|
|
|
- .content-wrap {
|
|
|
- .name-and-status {
|
|
|
- margin: 12px 0 8px 0;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .item:not(:nth-child(3n+1)) {
|
|
|
- margin-left: 20px;
|
|
|
- }
|
|
|
- .item:nth-of-type(n+4) {
|
|
|
- margin-top: 20px;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-</style>
|
