Compare commits
2 Commits
9d190037b7
...
4ffad6521b
| Author | SHA1 | Date | |
|---|---|---|---|
| 4ffad6521b | |||
| 9725528c8b |
@ -1,101 +1,545 @@
|
||||
<template>
|
||||
<div :class="{'hidden':hidden}" class="pagination-container">
|
||||
<el-pagination
|
||||
:background="background"
|
||||
:current-page.sync="currentPage"
|
||||
:page-size.sync="pageSize"
|
||||
:layout="layout"
|
||||
:page-sizes="pageSizes"
|
||||
:total="total"
|
||||
v-bind="$attrs"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
/>
|
||||
<div v-loading="loading" class="customerGood">
|
||||
<!-- 搜索部分 -->
|
||||
<div>
|
||||
<ul class="search-box">
|
||||
<li>
|
||||
<el-input-group class="search-input">
|
||||
<el-input
|
||||
size="mini"
|
||||
placeholder="请输入关键词"
|
||||
v-model="queryParams.productname"
|
||||
clearable
|
||||
@keyup.enter.native="handleSearch"
|
||||
></el-input>
|
||||
<el-button
|
||||
slot="append"
|
||||
icon="el-icon-search"
|
||||
size="mini"
|
||||
@click="handleSearch"
|
||||
></el-button>
|
||||
</el-input-group>
|
||||
</li>
|
||||
<li>
|
||||
<span class="search-label">创建日期:</span>
|
||||
<el-date-picker
|
||||
size="mini"
|
||||
style="width: 220px;"
|
||||
type="datetimerange"
|
||||
align="right"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
:default-time="['00:00:00', '23:59:59']"
|
||||
format="yyyy-MM-dd"
|
||||
value-format="yyyy-MM-dd"
|
||||
v-model="dateRange"
|
||||
@change="handleDateChange"
|
||||
></el-date-picker>
|
||||
</li>
|
||||
<li>
|
||||
<el-button size="mini" @click="handleReset">重置</el-button>
|
||||
<el-button type="primary" size="mini" @click="handleSearch">查询</el-button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- 表格部分 -->
|
||||
<el-card class="tableCard">
|
||||
<el-table
|
||||
:data="tableData"
|
||||
style="width: 100%;font-size: 12px"
|
||||
height="calc(100vh - 230px)"
|
||||
border
|
||||
v-loading="loading"
|
||||
>
|
||||
<el-table-column min-width="90px" align="center" prop="productname" label="产品名称"></el-table-column>
|
||||
<el-table-column min-width="150px" align="center" prop="productdesc" label="产品描述" :show-overflow-tooltip="true">
|
||||
<template slot-scope="{row}">
|
||||
{{ row.productdesc ? row.productdesc : '-' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column min-width="150px" align="center" prop="orderid" label="订单号" :show-overflow-tooltip="true"></el-table-column>
|
||||
<el-table-column min-width="60px" align="center" prop="start_date" label="购买日期"></el-table-column>
|
||||
<el-table-column prop="expire_date" label="到期日期">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.expire_date == null ? '-' : scope.row.expire_date }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="" label="操作" align="center" width="120px">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="primary" size="mini" @click="goJiNanChaoSuan()" v-if="scope.row.providername === '济南超算'">
|
||||
<div style="display: flex;justify-content: center;align-items: center">
|
||||
<img style="width: 12px;margin-right: 5px;height: 12px;" src="./svg/跳转.svg" alt="">超算产品
|
||||
</div>
|
||||
</el-button>
|
||||
<el-button type="primary" size="mini" @click="goBaiDu(scope.row.product_url)" v-else-if="(scope.row.providername === '百度智能云')">
|
||||
<div style="display: flex;justify-content: center;align-items: center">
|
||||
<img style="width: 12px;margin-right: 5px;height: 12px;" src="./svg/跳转.svg" alt="">实例使用
|
||||
</div>
|
||||
</el-button>
|
||||
<el-button type="primary" size="mini" @click="goJd" v-else-if="(scope.row.providername === '京东云')">
|
||||
<div style="display: flex;justify-content: center;align-items: center">
|
||||
<img style="width: 12px;margin-right: 5px;height: 12px;" src="./svg/跳转.svg" alt="">京东产品
|
||||
</div>
|
||||
</el-button>
|
||||
<el-button type="primary" size="mini" @click="goUcloud(scope.row.region)" v-else-if="(scope.row.providername === '优刻得科技股份有限公司')">
|
||||
<div style="display: flex;justify-content: center;align-items: center">
|
||||
<img style="width: 12px;margin-right: 5px;height: 12px;" src="./svg/跳转.svg" alt="">集群二
|
||||
</div>
|
||||
</el-button>
|
||||
<el-button size="mini" @click="nodeThree(scope.row)" v-else-if="(scope.row.classify === 'E')">
|
||||
详情
|
||||
</el-button>
|
||||
<div v-else-if="scope.row.classify === 'CPCC'">
|
||||
<el-button size="mini" type="primary" @click="openCpccDetail(scope.row)">
|
||||
容器化详情
|
||||
</el-button>
|
||||
<el-button size="mini" type="primary" @click="$router.push('/customer/SshTerminal')">
|
||||
登录
|
||||
</el-button>
|
||||
</div>
|
||||
<el-button type="primary" size="mini" @click="goCaption()" v-else-if="(scope.row.providername === '北京首都在线科技股份有限公司')">
|
||||
<div style="display: flex;justify-content: center;align-items: center">
|
||||
<img style="width: 12px;margin-right: 5px;height: 12px;" src="./svg/跳转.svg" alt="">集群一
|
||||
</div>
|
||||
</el-button>
|
||||
<span v-else>-</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页组件 -->
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.page"
|
||||
:limit.sync="queryParams.page_size"
|
||||
@pagination="handlePagination"
|
||||
/>
|
||||
</el-card>
|
||||
|
||||
<!-- 详情对话框 -->
|
||||
<el-dialog title="详情" :visible.sync="dialogTableVisible">
|
||||
<el-table :data="datailList">
|
||||
<el-table-column min-width="200px" property="date" label="实例编号/名称">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.id }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column min-width="200px" property="name" label="状态">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.status === "1" ? '运行中' : '已关机' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column min-width="200px" property="address" label="规格详情">
|
||||
<template slot-scope="scope">
|
||||
<div class="guige">
|
||||
<span>{{ scope.row.productname }}* {{ scope.row.gpu }}卡</span>
|
||||
<el-popover placement="top" title="" width="200" trigger="hover">
|
||||
<span class="tipStyle" slot="reference">查看详情</span>
|
||||
<div>
|
||||
<p>存储: {{ scope.row.storage }} G</p>
|
||||
<p>CPU: {{ scope.row.cpu }} 核</p>
|
||||
<p>内存: {{ scope.row.memory }} G</p>
|
||||
<p>GPU: {{ scope.row.gpu }} 卡</p>
|
||||
<p>显存: {{ scope.row.gpumem }} G</p>
|
||||
</div>
|
||||
</el-popover>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column min-width="120px" property="address" label="健康状态">
|
||||
<template slot-scope="scope">
|
||||
正常
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column min-width="100px" property="address" label="付费方式">
|
||||
<template slot-scope="scope">
|
||||
核时
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column min-width="100px" property="address" label="登录指令">
|
||||
<template slot-scope="scope">
|
||||
<div class="itemOut">
|
||||
<div>登录指令</div>
|
||||
<div>ssh ****** <span class="copyBtn">
|
||||
<i @click="copyText('ssh -p ' + scope.row.port + ' ' + scope.row.loginname + '@' + scope.row.ip_region)" class="el-icon-copy-document"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="itemOut">
|
||||
<div>密码</div>
|
||||
<div>****** <span class="copyBtn"> <i @click="copyText(scope.row.loginpwd)" class="el-icon-copy-document"></i> </span></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column min-width="150px" fixed="right" property="address" label="操作">
|
||||
<template slot-scope="scope">
|
||||
<el-popconfirm @confirm="shutDownThree(scope.row)" title="确定将该设备关机吗？">
|
||||
<el-button slot="reference" :loading="deleteBtnLoading" type="danger" size="mini">
|
||||
关机
|
||||
</el-button>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 登录信息对话框 -->
|
||||
<el-dialog title="登录信息" :visible.sync="rqyVisible" width="800">
|
||||
<el-descriptions title="" direction="vertical" :column="4" border>
|
||||
<el-descriptions-item label="实例id">{{ cpccDetail.id }}</el-descriptions-item>
|
||||
<el-descriptions-item label="实例名称">{{ cpccDetail.source_name }}</el-descriptions-item>
|
||||
<el-descriptions-item label="状态">进行中</el-descriptions-item>
|
||||
<el-descriptions-item label="健康状态">
|
||||
<el-tag type="success" effect="dark">
|
||||
正常
|
||||
</el-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="登录账号">{{ cpccDetail.source_authuser }}</el-descriptions-item>
|
||||
<el-descriptions-item label="密码">
|
||||
<div class="pasStyle">
|
||||
<span v-if="!isShowPass"> **** </span>
|
||||
<span v-if="isShowPass"> {{ cpccDetail.source_authpasswd }}</span>
|
||||
<img @click="isShowPass = !isShowPass" v-if="!isShowPass" src="./svg/showEye.svg" alt="">
|
||||
<img @click="isShowPass = !isShowPass" v-if="isShowPass" src="./svg/hidenEye.svg" alt="">
|
||||
</div>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="IP">{{ cpccDetail.source_externalip }}</el-descriptions-item>
|
||||
<el-descriptions-item label="端口号">{{ cpccDetail.source_outsideport }}</el-descriptions-item>
|
||||
<el-descriptions-item label="内存量">{{ cpccDetail.source_memrate }}</el-descriptions-item>
|
||||
<el-descriptions-item label="核心数">{{ cpccDetail.source_cpurate }}</el-descriptions-item>
|
||||
<el-descriptions-item label="数据盘">{{ cpccDetail.source_storagelimits }}</el-descriptions-item>
|
||||
<el-descriptions-item label="系统盘">{{ cpccDetail.disk_sys_limit }}</el-descriptions-item>
|
||||
<el-descriptions-item v-if="cpccDetail.source_gpu !== '0'" label="卡数">{{ cpccDetail.source_gpu }}
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="rqyVisible = false">关 闭</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { scrollTo } from '@/utils/scroll-to'
|
||||
import { getCustomerGoodsAPI, HpcAccessTimeAPI } from '@/api/customer/userResource'
|
||||
import { getJinanchaosuanSign } from '@/api/JiNanChaoSuan/jiNanChaoSuanUserList'
|
||||
import { goJdUrl } from "@/api/product/jdApi";
|
||||
import { reqDeleteK8sCloud, reqGetInstance } from "@/api/k8s";
|
||||
import { Terminal } from "xterm";
|
||||
import SshTerminal from "@/views/customer/userResource/SshTerminal.vue";
|
||||
import Pagination from '../../components/Pagination/index.vue';
|
||||
|
||||
export default {
|
||||
name: 'Pagination',
|
||||
props: {
|
||||
total: {
|
||||
required: true,
|
||||
type: Number
|
||||
},
|
||||
page: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
limit: {
|
||||
type: Number,
|
||||
default: 20
|
||||
},
|
||||
pageSizes: {
|
||||
type: Array,
|
||||
default() {
|
||||
return [10, 20, 30, 50]
|
||||
}
|
||||
},
|
||||
layout: {
|
||||
type: String,
|
||||
default: 'total, sizes, prev, pager, next, jumper'
|
||||
},
|
||||
background: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
autoScroll: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
hidden: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
name: "userResource",
|
||||
components: {
|
||||
SshTerminal,
|
||||
Pagination
|
||||
},
|
||||
computed: {
|
||||
currentPage: {
|
||||
get() {
|
||||
return this.page
|
||||
},
|
||||
set(val) {
|
||||
this.$emit('update:page', val)
|
||||
data() {
|
||||
return {
|
||||
isShowPass: false,
|
||||
cpccDetail: {},
|
||||
rqyVisible: false,
|
||||
deleteBtnLoading: false,
|
||||
visible: false,
|
||||
detailBtnLoading: false,
|
||||
userid: sessionStorage.getItem("userId"),
|
||||
tableData: [],
|
||||
loading: false,
|
||||
dialogTableVisible: false,
|
||||
datailList: [],
|
||||
total: 0,
|
||||
dateRange: [],
|
||||
queryParams: {
|
||||
productname: '', // 搜索关键词
|
||||
start_date: '', // 开始时间
|
||||
end_date: '', // 结束时间
|
||||
page: 1, // 页码
|
||||
page_size: 10, // 每页数量
|
||||
}
|
||||
},
|
||||
pageSize: {
|
||||
get() {
|
||||
return this.limit
|
||||
},
|
||||
set(val) {
|
||||
this.$emit('update:limit', val)
|
||||
}
|
||||
}
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.loading = true;
|
||||
this.getCustomerGoods();
|
||||
console.log("用户资源的路由信息是", this.$route);
|
||||
},
|
||||
methods: {
|
||||
handleSizeChange(val) {
|
||||
this.$emit('pagination', { page: this.currentPage, limit: val })
|
||||
if (this.autoScroll) {
|
||||
scrollTo(0, 800)
|
||||
// 搜索处理
|
||||
handleSearch() {
|
||||
this.queryParams.page = 1; // 搜索时重置到第一页
|
||||
this.getCustomerGoods();
|
||||
},
|
||||
|
||||
// 重置搜索
|
||||
handleReset() {
|
||||
this.queryParams = {
|
||||
productname: '',
|
||||
start_date: '',
|
||||
end_date: '',
|
||||
page: 1,
|
||||
page_size: 10,
|
||||
};
|
||||
this.dateRange = [];
|
||||
this.getCustomerGoods();
|
||||
},
|
||||
|
||||
// 日期选择处理
|
||||
handleDateChange(value) {
|
||||
if (value && value.length === 2) {
|
||||
this.queryParams.start_date = value[0];
|
||||
this.queryParams.end_date = value[1];
|
||||
} else {
|
||||
this.queryParams.start_date = '';
|
||||
this.queryParams.end_date = '';
|
||||
}
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
this.$emit('pagination', { page: val, limit: this.pageSize })
|
||||
if (this.autoScroll) {
|
||||
scrollTo(0, 800)
|
||||
|
||||
// 分页处理
|
||||
handlePagination(pagination) {
|
||||
this.queryParams.page = pagination.page;
|
||||
this.queryParams.page_size = pagination.limit;
|
||||
this.getCustomerGoods();
|
||||
},
|
||||
|
||||
// 获取用户资源列表
|
||||
async getCustomerGoods() {
|
||||
this.loading = true;
|
||||
try {
|
||||
const res = await getCustomerGoodsAPI(this.queryParams);
|
||||
if (res.status === true) {
|
||||
this.tableData = res.data;
|
||||
this.total = res.pagination.total;
|
||||
} else {
|
||||
this.$message.error('获取数据失败');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取用户资源失败:', error);
|
||||
this.$message.error('获取数据失败');
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
openCpccDetail(row) {
|
||||
this.rqyVisible = true;
|
||||
this.cpccDetail = row.instance_info;
|
||||
},
|
||||
|
||||
copyText(value) {
|
||||
const textarea = document.createElement('textarea');
|
||||
textarea.value = value;
|
||||
document.body.appendChild(textarea);
|
||||
textarea.select();
|
||||
document.execCommand('copy');
|
||||
document.body.removeChild(textarea);
|
||||
this.$message.success('已复制到剪贴板');
|
||||
},
|
||||
|
||||
shutDownThree(item) {
|
||||
this.deleteBtnLoading = true;
|
||||
let ploay = {
|
||||
id: item.id,
|
||||
podname: item.podname,
|
||||
pvcname: item.pvcname,
|
||||
customer_goods_id: item.customer_goods_id
|
||||
};
|
||||
reqDeleteK8sCloud(ploay).then(res => {
|
||||
this.deleteBtnLoading = false;
|
||||
if (res.status) {
|
||||
this.$message.success("删除成功~");
|
||||
reqGetInstance({ customer_goods_id: item.id, orgid: sessionStorage.getItem('orgid') }).then(res => {
|
||||
if (res.status) {
|
||||
this.datailList = res.data;
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.$message.warning("删除失败~");
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
nodeThree(row) {
|
||||
this.detailBtnLoading = true;
|
||||
reqGetInstance({ customer_goods_id: row.id, orgid: sessionStorage.getItem('orgid') }).then(res => {
|
||||
this.detailBtnLoading = false;
|
||||
if (res.status) {
|
||||
this.dialogTableVisible = true;
|
||||
this.datailList = res.data;
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
goCaption() {
|
||||
this.$router.push('/product/gpu/showGpu');
|
||||
},
|
||||
|
||||
goUcloud(region) {
|
||||
sessionStorage.setItem('region', region);
|
||||
this.$router.push('/product/ucloudProduct/showCloudHost');
|
||||
},
|
||||
|
||||
goJd() {
|
||||
this.loading = true;
|
||||
goJdUrl(this.userid).then(res => {
|
||||
this.loading = false;
|
||||
if (res.status) {
|
||||
window.open(res.data);
|
||||
} else {
|
||||
this.$message.error('跳转京东界面失败');
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
goBaiDu(listUrl) {
|
||||
this.$store.commit('setRedirectUrl', listUrl);
|
||||
localStorage.setItem('redirectUrl', listUrl);
|
||||
this.$router.push({
|
||||
name: 'baiduProductShow',
|
||||
params: {
|
||||
listUrl: listUrl,
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
HpcAccessTime() {
|
||||
HpcAccessTimeAPI({ orgid: sessionStorage.getItem("orgid") }).then(res => {
|
||||
if (res.status == true) {
|
||||
// 处理访问时间
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
goJiNanChaoSuan() {
|
||||
this.HpcAccessTime();
|
||||
var orgid = sessionStorage.getItem("orgid");
|
||||
var username = sessionStorage.getItem("user");
|
||||
let ploay = {
|
||||
username: username
|
||||
};
|
||||
getJinanchaosuanSign(ploay).then(res => {
|
||||
if (res.status && res.warn_msg == null) {
|
||||
window.open(
|
||||
'https://hpc.kaiyuancloud.cn/kyy_test/?key=' + res.data,
|
||||
"_blank"
|
||||
);
|
||||
} else if (res.warn_msg != null) {
|
||||
this.$message({
|
||||
duration: 0,
|
||||
showClose: true,
|
||||
message: res.warn_msg,
|
||||
type: 'warning'
|
||||
});
|
||||
window.open(
|
||||
'https://hpc.kaiyuancloud.cn/kyy_test/?key=' + res.data,
|
||||
"_blank"
|
||||
);
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.pagination-container {
|
||||
<style lang="less" scoped>
|
||||
.tip {
|
||||
color: #ff9120;
|
||||
height: 35px;
|
||||
img {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
padding-left: 2px;
|
||||
background: #fff;
|
||||
padding: 32px 16px;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
.pagination-container.hidden {
|
||||
display: none;
|
||||
|
||||
.guige {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.tipStyle {
|
||||
transition: all .3s ease-in-out;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
transition: all .3s ease-in-out;
|
||||
color: #0a04e1;
|
||||
}
|
||||
}
|
||||
|
||||
.itemOut {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.copyBtn {
|
||||
transition: all .3s ease-in-out;
|
||||
i {
|
||||
color: blue;
|
||||
}
|
||||
&:hover {
|
||||
transition: all .3s ease-in-out;
|
||||
cursor: pointer;
|
||||
color: #a3b3e8;
|
||||
}
|
||||
}
|
||||
|
||||
.pasStyle {
|
||||
img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
cursor: pointer;
|
||||
margin-left: 8px;
|
||||
&:hover {
|
||||
fill: blue;
|
||||
}
|
||||
}
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
background-color: white;
|
||||
padding: 10px;
|
||||
margin-bottom: 10px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.search-box li {
|
||||
margin-right: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.search-label {
|
||||
margin-right: 8px;
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.tableCard {
|
||||
margin-top: 20px;
|
||||
height: calc(100vh - 180px);
|
||||
}
|
||||
|
||||
.pagination-container {
|
||||
margin-top: 20px;
|
||||
text-align: right;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,49 +1,70 @@
|
||||
<template>
|
||||
<div v-loading="loading" class="customerGood">
|
||||
<!-- <div class="tip"><img src="./svg/tip.svg" alt="">资源列表只展示未到期产品。</div>-->
|
||||
<!-- <SshTerminal></SshTerminal>-->
|
||||
<!-- 搜索部分 -->
|
||||
<div>
|
||||
<ul class="search-box">
|
||||
<li>
|
||||
<el-input-group class="search-input">
|
||||
<el-input size="mini" placeholder="请输入关键词" clearable></el-input>
|
||||
<el-button slot="append" icon="el-icon-search" size="mini"></el-button>
|
||||
<el-input
|
||||
size="mini"
|
||||
placeholder="请输入关键词"
|
||||
v-model="queryParams.productname"
|
||||
clearable
|
||||
@keyup.enter.native="handleSearch"
|
||||
></el-input>
|
||||
<el-button
|
||||
slot="append"
|
||||
icon="el-icon-search"
|
||||
size="mini"
|
||||
@click="handleSearch"
|
||||
></el-button>
|
||||
</el-input-group>
|
||||
</li>
|
||||
<li>
|
||||
<span class="search-label">创建日期:</span>
|
||||
<el-date-picker size="mini" style="width: 220px;" type="datetimerange" align="right" start-placeholder="开始日期"
|
||||
end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" format="yyyy-MM-dd"
|
||||
value-format="yyyy-MM-dd"></el-date-picker>
|
||||
<el-date-picker
|
||||
size="mini"
|
||||
style="width: 220px;"
|
||||
type="datetimerange"
|
||||
align="right"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
:default-time="['00:00:00', '23:59:59']"
|
||||
format="yyyy-MM-dd"
|
||||
value-format="yyyy-MM-dd"
|
||||
v-model="dateRange"
|
||||
@change="handleDateChange"
|
||||
></el-date-picker>
|
||||
</li>
|
||||
<li>
|
||||
<el-button size="mini">重置</el-button>
|
||||
<el-button type="primary" size="mini">查询</el-button>
|
||||
<el-button size="mini" @click="handleReset">重置</el-button>
|
||||
<el-button type="primary" size="mini" @click="handleSearch">查询</el-button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- 表格部分 -->
|
||||
<el-card class="tableCard">
|
||||
<el-table :data="tableData" style="width: 100%;font-size: 12px" height="calc(100vh - 130px)" border>
|
||||
<el-table
|
||||
:data="tableData"
|
||||
style="width: 100%;font-size: 12px"
|
||||
height="calc(100vh - 280px)"
|
||||
border
|
||||
v-loading="loading"
|
||||
>
|
||||
<el-table-column min-width="90px" align="center" prop="productname" label="产品名称"></el-table-column>
|
||||
<el-table-column min-width="150px" align="center" prop="productdesc" label="产品描述" :show-overflow-tooltip="true">
|
||||
<template slot-scope="{row}">
|
||||
{{ row.productdesc ? row.productdesc : '-' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column min-width="150px" align="center" prop="orderid" label="订单号"
|
||||
:show-overflow-tooltip="true"></el-table-column>
|
||||
<el-table-column min-width="150px" align="center" prop="orderid" label="订单号" :show-overflow-tooltip="true"></el-table-column>
|
||||
<el-table-column min-width="60px" align="center" prop="start_date" label="购买日期"></el-table-column>
|
||||
<el-table-column prop="expire_date" label="到期日期">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.expire_date == null ? '-' : scope.row.expire_date }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!--
|
||||
<el-table-column prop="total_quantity" label="总量">
|
||||
<el-table-column prop="used_quantity" label="已用量">
|
||||
</el-table-column>
|
||||
<el-table-column prop="rest_quantity" label="剩余量">
|
||||
</el-table-column> -->
|
||||
<el-table-column prop="" label="操作" align="center" width="120px">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="primary" size="mini" @click="goJiNanChaoSuan()" v-if="scope.row.providername === '济南超算'">
|
||||
@ -51,21 +72,17 @@
|
||||
<img style="width: 12px;margin-right: 5px;height: 12px;" src="./svg/跳转.svg" alt="">超算产品
|
||||
</div>
|
||||
</el-button>
|
||||
<el-button type="primary" size="mini" @click="goBaiDu(scope.row.product_url)"
|
||||
v-else-if="(scope.row.providername === '百度智能云')">
|
||||
<el-button type="primary" size="mini" @click="goBaiDu(scope.row.product_url)" v-else-if="(scope.row.providername === '百度智能云')">
|
||||
<div style="display: flex;justify-content: center;align-items: center">
|
||||
<img style="width: 12px;margin-right: 5px;height: 12px;" src="./svg/跳转.svg" alt="">实例使用
|
||||
</div>
|
||||
</el-button>
|
||||
<el-button type="primary" size="mini" @click="goJd" v-else-if="(scope.row.providername === '京东云')">
|
||||
<!-- <i class="el-icon-edit-outline"></i> -->
|
||||
<div style="display: flex;justify-content: center;align-items: center">
|
||||
<img style="width: 12px;margin-right: 5px;height: 12px;" src="./svg/跳转.svg" alt="">京东产品
|
||||
</div>
|
||||
</el-button>
|
||||
<el-button type="primary" size="mini" @click="goUcloud(scope.row.region)"
|
||||
v-else-if="(scope.row.providername === '优刻得科技股份有限公司')">
|
||||
<!-- <i class="el-icon-edit-outline"></i> -->
|
||||
<el-button type="primary" size="mini" @click="goUcloud(scope.row.region)" v-else-if="(scope.row.providername === '优刻得科技股份有限公司')">
|
||||
<div style="display: flex;justify-content: center;align-items: center">
|
||||
<img style="width: 12px;margin-right: 5px;height: 12px;" src="./svg/跳转.svg" alt="">集群二
|
||||
</div>
|
||||
@ -81,20 +98,7 @@
|
||||
登录
|
||||
</el-button>
|
||||
</div>
|
||||
<!-- <el-dropdown @command="handleCommand(scope.row, $event)" v-else-if="(scope.row.classify === 'E')"-->
|
||||
<!-- trigger="click">-->
|
||||
<!-- <span style="cursor: pointer" class="el-dropdown-link">-->
|
||||
<!-- 集群三<i class="el-icon-arrow-down el-icon--right"></i>-->
|
||||
<!-- </span>-->
|
||||
<!-- <el-dropdown-menu slot="dropdown">-->
|
||||
<!-- <el-dropdown-item command="detail" icon="el-icon-warning-outline">详情</el-dropdown-item>-->
|
||||
<!-- <el-dropdown-item command="shutDown" icon="el-icon-switch-button">关机</el-dropdown-item>-->
|
||||
<!-- </el-dropdown-menu>-->
|
||||
<!-- </el-dropdown>-->
|
||||
|
||||
<el-button type="primary" size="mini" @click="goCaption()"
|
||||
v-else-if="(scope.row.providername === '北京首都在线科技股份有限公司')">
|
||||
<!-- <i class="el-icon-edit-outline"></i> -->
|
||||
<el-button type="primary" size="mini" @click="goCaption()" v-else-if="(scope.row.providername === '北京首都在线科技股份有限公司')">
|
||||
<div style="display: flex;justify-content: center;align-items: center">
|
||||
<img style="width: 12px;margin-right: 5px;height: 12px;" src="./svg/跳转.svg" alt="">集群一
|
||||
</div>
|
||||
@ -103,9 +107,23 @@
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- Element UI 分页组件 -->
|
||||
<div class="pagination-container">
|
||||
<el-pagination
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="queryParams.page"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:page-size="queryParams.page_size"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
|
||||
<!-- 详情对话框 -->
|
||||
<el-dialog title="详情" :visible.sync="dialogTableVisible">
|
||||
<el-table :data="datailList">
|
||||
<el-table-column min-width="200px" property="date" label="实例编号/名称">
|
||||
@ -122,10 +140,8 @@
|
||||
<template slot-scope="scope">
|
||||
<div class="guige">
|
||||
<span>{{ scope.row.productname }}* {{ scope.row.gpu }}卡</span>
|
||||
|
||||
<el-popover placement="top" title="" width="200" trigger="hover">
|
||||
<span class="tipStyle" slot="reference">查看详情</span>
|
||||
|
||||
<div>
|
||||
<p>存储: {{ scope.row.storage }} G</p>
|
||||
<p>CPU: {{ scope.row.cpu }} 核</p>
|
||||
@ -137,7 +153,6 @@
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column min-width="120px" property="address" label="健康状态">
|
||||
<template slot-scope="scope">
|
||||
正常
|
||||
@ -153,23 +168,16 @@
|
||||
<div class="itemOut">
|
||||
<div>登录指令</div>
|
||||
<div>ssh ****** <span class="copyBtn">
|
||||
<i @click="copyText('ssh -p ' + scope.row.port + ' ' + scope.row.loginname + '@' + scope.row.ip_region)"
|
||||
class="el-icon-copy-document"></i>
|
||||
<i @click="copyText('ssh -p ' + scope.row.port + ' ' + scope.row.loginname + '@' + scope.row.ip_region)" class="el-icon-copy-document"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="itemOut">
|
||||
<div>密码</div>
|
||||
<div>****** <span class="copyBtn"> <i @click="copyText(scope.row.loginpwd)"
|
||||
class="el-icon-copy-document"></i> </span></div>
|
||||
<div>****** <span class="copyBtn"> <i @click="copyText(scope.row.loginpwd)" class="el-icon-copy-document"></i> </span></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column min-width="200px" property="address" label="创建时间/到期时间">-->
|
||||
<!-- <template slot-scope="scope">-->
|
||||
<!-- {{ scope.row.id }}-->
|
||||
<!-- </template>-->
|
||||
<!-- </el-table-column>-->
|
||||
<el-table-column min-width="150px" fixed="right" property="address" label="操作">
|
||||
<template slot-scope="scope">
|
||||
<el-popconfirm @confirm="shutDownThree(scope.row)" title="确定将该设备关机吗？">
|
||||
@ -177,52 +185,41 @@
|
||||
关机
|
||||
</el-button>
|
||||
</el-popconfirm>
|
||||
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 登录信息对话框 -->
|
||||
<el-dialog title="登录信息" :visible.sync="rqyVisible" width="800">
|
||||
<el-descriptions title="" direction="vertical" :column="4" border>
|
||||
<el-descriptions-item label="实例id">{{ cpccDetail.id }}</el-descriptions-item>
|
||||
<el-descriptions-item label="实例名称">{{ cpccDetail.source_name }}</el-descriptions-item>
|
||||
<el-descriptions-item label="状态">进行中</el-descriptions-item>
|
||||
<el-descriptions-item label="健康状态">
|
||||
|
||||
<el-tag type="success" effect="dark">
|
||||
正常
|
||||
</el-tag>
|
||||
</el-descriptions-item>
|
||||
|
||||
<el-descriptions-item label="登录账号">{{ cpccDetail.source_authuser }}</el-descriptions-item>
|
||||
<el-descriptions-item label="密码">
|
||||
<div class="pasStyle">
|
||||
<span v-if="!isShowPass"> **** </span>
|
||||
|
||||
<span v-if="isShowPass"> {{ cpccDetail.source_authpasswd }}</span>
|
||||
|
||||
|
||||
<img @click="isShowPass = !isShowPass" v-if="!isShowPass" src="./svg/showEye.svg" alt="">
|
||||
<img @click="isShowPass = !isShowPass" v-if="isShowPass" src="./svg/hidenEye.svg" alt="">
|
||||
</div>
|
||||
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="IP">{{ cpccDetail.source_externalip }}</el-descriptions-item>
|
||||
<el-descriptions-item label="端口号">{{ cpccDetail.source_outsideport }}</el-descriptions-item>
|
||||
|
||||
<el-descriptions-item label="内存量">{{ cpccDetail.source_memrate }}</el-descriptions-item>
|
||||
<el-descriptions-item label="核心数">{{ cpccDetail.source_cpurate }}</el-descriptions-item>
|
||||
<el-descriptions-item label="数据盘">{{ cpccDetail.source_storagelimits }}</el-descriptions-item>
|
||||
<el-descriptions-item label="系统盘">{{ cpccDetail.disk_sys_limit }}</el-descriptions-item>
|
||||
<el-descriptions-item v-if="cpccDetail.source_gpu !== '0'" label="卡数">{{
|
||||
cpccDetail.source_gpu
|
||||
}}
|
||||
<el-descriptions-item v-if="cpccDetail.source_gpu !== '0'" label="卡数">{{ cpccDetail.source_gpu }}
|
||||
</el-descriptions-item>
|
||||
|
||||
</el-descriptions>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<!-- <el-button @click="rqyVisible = false">取 消</el-button>-->
|
||||
<el-button type="primary" @click="rqyVisible = false">关 闭</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
@ -239,7 +236,9 @@ import SshTerminal from "@/views/customer/userResource/SshTerminal.vue";
|
||||
|
||||
export default {
|
||||
name: "userResource",
|
||||
components: { SshTerminal },
|
||||
components: {
|
||||
SshTerminal
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isShowPass: false,
|
||||
@ -252,132 +251,181 @@ export default {
|
||||
tableData: [],
|
||||
loading: false,
|
||||
dialogTableVisible: false,
|
||||
datailList: []
|
||||
datailList: [],
|
||||
total: 0,
|
||||
dateRange: [],
|
||||
queryParams: {
|
||||
productname: '', // 搜索关键词
|
||||
start_date: '', // 开始时间
|
||||
end_date: '', // 结束时间
|
||||
page: 1, // 页码
|
||||
page_size: 10, // 每页数量
|
||||
}
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.loading = true
|
||||
this.getCustomerGoods()
|
||||
console.log("用户资源的路由信息是", this.$route)
|
||||
// this.initTerminal()
|
||||
this.loading = true;
|
||||
this.getCustomerGoods();
|
||||
console.log("用户资源的路由信息是", this.$route);
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 搜索处理
|
||||
handleSearch() {
|
||||
this.queryParams.page = 1; // 搜索时重置到第一页
|
||||
this.getCustomerGoods();
|
||||
},
|
||||
|
||||
// 重置搜索
|
||||
handleReset() {
|
||||
this.queryParams = {
|
||||
productname: '',
|
||||
start_date: '',
|
||||
end_date: '',
|
||||
page: 1,
|
||||
page_size: 10,
|
||||
};
|
||||
this.dateRange = [];
|
||||
this.getCustomerGoods();
|
||||
},
|
||||
|
||||
// 日期选择处理
|
||||
handleDateChange(value) {
|
||||
if (value && value.length === 2) {
|
||||
this.queryParams.start_date = value[0];
|
||||
this.queryParams.end_date = value[1];
|
||||
} else {
|
||||
this.queryParams.start_date = '';
|
||||
this.queryParams.end_date = '';
|
||||
}
|
||||
},
|
||||
|
||||
// 每页数量变化
|
||||
handleSizeChange(val) {
|
||||
this.queryParams.page_size = val;
|
||||
this.getCustomerGoods();
|
||||
},
|
||||
|
||||
// 当前页码变化
|
||||
handleCurrentChange(val) {
|
||||
this.queryParams.page = val;
|
||||
this.getCustomerGoods();
|
||||
},
|
||||
|
||||
// 获取用户资源列表
|
||||
async getCustomerGoods() {
|
||||
this.loading = true;
|
||||
try {
|
||||
const res = await getCustomerGoodsAPI(this.queryParams);
|
||||
if (res.status === true) {
|
||||
this.tableData = res.data;
|
||||
this.total = res.pagination.total;
|
||||
} else {
|
||||
this.$message.error('获取数据失败');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取用户资源失败:', error);
|
||||
this.$message.error('获取数据失败');
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
|
||||
openCpccDetail(row) {
|
||||
|
||||
this.rqyVisible = true
|
||||
|
||||
this.cpccDetail = row.instance_info
|
||||
},
|
||||
initTerminal() {
|
||||
let term = new Terminal();
|
||||
term.open(document.getElementById('terminal'));
|
||||
term.write('Hello from \x1B[1;3;31mxterm.js\x1B[0m $ ');
|
||||
this.rqyVisible = true;
|
||||
this.cpccDetail = row.instance_info;
|
||||
},
|
||||
|
||||
copyText(value) {
|
||||
// 创建一个临时的textarea元素，用来执行复制操作
|
||||
const textarea = document.createElement('textarea');
|
||||
textarea.value = value;
|
||||
document.body.appendChild(textarea);
|
||||
|
||||
// 选中内容并执行复制
|
||||
textarea.select();
|
||||
document.execCommand('copy');
|
||||
|
||||
// 移除临时的textarea元素
|
||||
document.body.removeChild(textarea);
|
||||
|
||||
// 可以添加一个提示给用户，表示已经复制成功
|
||||
this.$message.success('已复制到剪贴板');
|
||||
},
|
||||
|
||||
shutDownThree(item) {
|
||||
this.deleteBtnLoading = true
|
||||
this.deleteBtnLoading = true;
|
||||
let ploay = {
|
||||
id: item.id,
|
||||
podname: item.podname,
|
||||
pvcname: item.pvcname,
|
||||
customer_goods_id: item.customer_goods_id
|
||||
}
|
||||
};
|
||||
reqDeleteK8sCloud(ploay).then(res => {
|
||||
this.deleteBtnLoading = false
|
||||
this.deleteBtnLoading = false;
|
||||
if (res.status) {
|
||||
this.$message.success("删除成功~")
|
||||
this.$message.success("删除成功~");
|
||||
reqGetInstance({ customer_goods_id: item.id, orgid: sessionStorage.getItem('orgid') }).then(res => {
|
||||
if (res.status) {
|
||||
this.datailList = res.data
|
||||
this.datailList = res.data;
|
||||
}
|
||||
})
|
||||
});
|
||||
} else {
|
||||
this.$message.warning("删除失败~")
|
||||
this.$message.warning("删除失败~");
|
||||
}
|
||||
})
|
||||
});
|
||||
},
|
||||
|
||||
nodeThree(row) {
|
||||
this.detailBtnLoading = true
|
||||
this.detailBtnLoading = true;
|
||||
reqGetInstance({ customer_goods_id: row.id, orgid: sessionStorage.getItem('orgid') }).then(res => {
|
||||
this.detailBtnLoading = false
|
||||
this.detailBtnLoading = false;
|
||||
if (res.status) {
|
||||
this.dialogTableVisible = true
|
||||
this.datailList = res.data
|
||||
this.dialogTableVisible = true;
|
||||
this.datailList = res.data;
|
||||
}
|
||||
})
|
||||
});
|
||||
},
|
||||
|
||||
goCaption() {
|
||||
this.$router.push('/product/gpu/showGpu')
|
||||
this.$router.push('/product/gpu/showGpu');
|
||||
},
|
||||
//去优客得
|
||||
|
||||
goUcloud(region) {
|
||||
sessionStorage.setItem('region', region)
|
||||
this.$router.push('/product/ucloudProduct/showCloudHost')
|
||||
sessionStorage.setItem('region', region);
|
||||
this.$router.push('/product/ucloudProduct/showCloudHost');
|
||||
},
|
||||
//去jd产品
|
||||
|
||||
goJd() {
|
||||
this.loading = true
|
||||
//直接跳转到京东页面
|
||||
this.loading = true;
|
||||
goJdUrl(this.userid).then(res => {
|
||||
this.loading = false
|
||||
this.loading = false;
|
||||
if (res.status) {
|
||||
window.open(res.data)
|
||||
window.open(res.data);
|
||||
} else {
|
||||
this.$message.error('跳转京东界面失败')
|
||||
this.$message.error('跳转京东界面失败');
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
});
|
||||
},
|
||||
//去百度产品
|
||||
|
||||
goBaiDu(listUrl) {
|
||||
this.$store.commit('setRedirectUrl', listUrl)
|
||||
localStorage.setItem('redirectUrl', listUrl)
|
||||
this.$store.commit('setRedirectUrl', listUrl);
|
||||
localStorage.setItem('redirectUrl', listUrl);
|
||||
this.$router.push({
|
||||
name: 'baiduProductShow',
|
||||
params: {
|
||||
listUrl: listUrl,
|
||||
}
|
||||
})
|
||||
});
|
||||
},
|
||||
|
||||
HpcAccessTime() {
|
||||
HpcAccessTimeAPI({ orgid: sessionStorage.getItem("orgid") }).then(res => {
|
||||
if (rs.status == true) {
|
||||
|
||||
}
|
||||
})
|
||||
},
|
||||
getCustomerGoods() {//获取用户资源
|
||||
getCustomerGoodsAPI({}).then(res => {
|
||||
this.loading = false
|
||||
if (res.status == true) {
|
||||
this.tableData = res.data
|
||||
// 处理访问时间
|
||||
}
|
||||
})
|
||||
});
|
||||
},
|
||||
goJiNanChaoSuan() {//跳转济南超算平台
|
||||
this.HpcAccessTime()
|
||||
|
||||
goJiNanChaoSuan() {
|
||||
this.HpcAccessTime();
|
||||
var orgid = sessionStorage.getItem("orgid");
|
||||
var username = sessionStorage.getItem("user");
|
||||
let ploay = {
|
||||
username: username
|
||||
}
|
||||
};
|
||||
getJinanchaosuanSign(ploay).then(res => {
|
||||
if (res.status && res.warn_msg == null) {
|
||||
window.open(
|
||||
@ -396,33 +444,27 @@ export default {
|
||||
"_blank"
|
||||
);
|
||||
}
|
||||
})
|
||||
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped >
|
||||
|
||||
<style lang="less" scoped>
|
||||
.tip {
|
||||
color: #ff9120;
|
||||
height: 35px;
|
||||
|
||||
img {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
padding-left: 2px;
|
||||
background: #fff;
|
||||
font-size: 14px;
|
||||
//border: 1px solid red;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
|
||||
.guige {
|
||||
@ -433,7 +475,6 @@ export default {
|
||||
.tipStyle {
|
||||
transition: all .3s ease-in-out;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
transition: all .3s ease-in-out;
|
||||
color: #0a04e1;
|
||||
@ -448,11 +489,9 @@ export default {
|
||||
|
||||
.copyBtn {
|
||||
transition: all .3s ease-in-out;
|
||||
|
||||
i {
|
||||
color: blue;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transition: all .3s ease-in-out;
|
||||
cursor: pointer;
|
||||
@ -466,12 +505,10 @@ export default {
|
||||
height: 20px;
|
||||
cursor: pointer;
|
||||
margin-left: 8px;
|
||||
|
||||
&:hover {
|
||||
fill: blue;
|
||||
}
|
||||
}
|
||||
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
@ -497,8 +534,24 @@ export default {
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.tableCard{
|
||||
|
||||
.search-label {
|
||||
margin-right: 8px;
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.tableCard {
|
||||
margin-top: 20px;
|
||||
height: calc(100vh - 180px);
|
||||
}
|
||||
|
||||
.pagination-container {
|
||||
margin-top: 20px;
|
||||
text-align: center;
|
||||
padding: 10px 0;
|
||||
}
|
||||
.el-table{
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user