505 lines
18 KiB
Vue
505 lines
18 KiB
Vue
<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-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>
|
||
</li>
|
||
<li>
|
||
<el-button size="mini">重置</el-button>
|
||
<el-button type="primary" size="mini">查询</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-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="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 === '济南超算'">
|
||
<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 === '京东云')">
|
||
<!-- <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> -->
|
||
<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-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> -->
|
||
<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>
|
||
</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="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="确定将该设备关机吗？">
|
||
<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 @click="rqyVisible = false">取 消</el-button>-->
|
||
<el-button type="primary" @click="rqyVisible = false">关 闭</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
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";
|
||
|
||
export default {
|
||
name: "userResource",
|
||
components: { SshTerminal },
|
||
data() {
|
||
return {
|
||
isShowPass: false,
|
||
cpccDetail: {},
|
||
rqyVisible: false,
|
||
deleteBtnLoading: false,
|
||
visible: false,
|
||
detailBtnLoading: false,
|
||
userid: sessionStorage.getItem("userId"),
|
||
tableData: [],
|
||
loading: false,
|
||
dialogTableVisible: false,
|
||
datailList: []
|
||
};
|
||
},
|
||
mounted() {
|
||
this.loading = true
|
||
this.getCustomerGoods()
|
||
console.log("用户资源的路由信息是", this.$route)
|
||
// this.initTerminal()
|
||
},
|
||
|
||
methods: {
|
||
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 $ ');
|
||
},
|
||
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
|
||
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')
|
||
},
|
||
//去jd产品
|
||
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 (rs.status == true) {
|
||
|
||
}
|
||
})
|
||
},
|
||
getCustomerGoods() {//获取用户资源
|
||
getCustomerGoodsAPI({}).then(res => {
|
||
this.loading = false
|
||
if (res.status == true) {
|
||
this.tableData = res.data
|
||
}
|
||
})
|
||
},
|
||
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 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 {
|
||
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;
|
||
}
|
||
.tableCard{
|
||
margin-top: 20px;
|
||
height: calc(100vh - 180px);
|
||
}
|
||
</style>
|