Skip to content

N
nse-ui
Commit f45302ab by wanglizhen
Options

License管理

parent 43ad4e84
正在显示 包含 154 行增加 和 109 行删除
src/views/systemConfig/License/index.vue
...@@ -50,48 +50,56 @@ onMounted(() => { ...@@ -50,48 +50,56 @@ onMounted(() => {
<template> <template>
<div class="app-container scroller"> <div class="app-container scroller">
<PageTitle>
<template #title>License管理</template>
</PageTitle>
<div class="app-container__body"> <div class="app-container__body">
<div class="infoContainer"> <div class="pageTitle">
<div class="document"> <img class="icon" src="@/assets/images/systemConfig/systemParamPage.png" alt="">
<div class="document-left"> <span>License管理</span>
<img class="licenseBg" src="@/assets/images/systemConfig/Lisencebg.png" alt="license" /> </div>
<img class="mask" v-if="infoData.status === '3'" src="@/assets/images/systemConfig/rightMask.png" alt="mask" /> <div class="box">
</div> <div class="line"></div>
<div class="document-right"> <div class="content">
<div class="title-header">{{ getHeaderName() }}</div> <DividerTitle :title-name="getHeaderName()" />
<div class="title-item">有效期： <div class="infoContainer">
{{ ( infoData.startDatelicensekey && infoData.endDatelicensekey ) ? `${ infoData.startDatelicensekey } 至 ${ infoData.endDatelicensekey }` : '--' }} <div class="itemLi">
</div> <div class="name">有效期：</div>
<div class="title-item">名称：{{ infoData.licname ? infoData.licname : '--' }}</div> <div class="value">
<div class="title-item">硬盘号：{{ infoData.licInfoIp ? infoData.licInfoIp : '--' }}</div> {{ (infoData.startDatelicensekey && infoData.endDatelicensekey) ? `${infoData.startDatelicensekey}
<div class="title-item">MAC地址：{{ infoData.licInfoMac ? infoData.licInfoMac : '--' }}</div> 至 ${infoData.endDatelicensekey}` : '--' }}
<div class="but">
<el-button :icon="(infoData.status === '2' || infoData.status === '3') ? 'Refresh' : 'Upload'"
:loading="uploadLoading"
type="primary">{{ (infoData.status === '2' || infoData.status === '3') ? '更新授权文件' : '上传授权文件' }}</el-button>
<div class="upload">
<CustomUpload v-if="!uploadLoading" @file-change="handleFileChange" />
</div> </div>
</div> </div>
<div class="itemLi">
<div class="name">名称：</div>
<div class="value">{{ infoData.licname ? infoData.licname : '--' }}</div>
</div>
<div class="itemLi">
<div class="name">硬盘号：</div>
<div class="value">{{ infoData.licInfoIp ? infoData.licInfoIp : '--' }}</div>
</div>
<div class="itemLi">
<div class="name">MAC地址：</div>
<div class="value">{{ infoData.licInfoMac ? infoData.licInfoMac : '--' }}</div>
</div>
</div> </div>
</div> <div class="but">
<div class="ipMacContent" v-if="infoData && infoData.ipMacList && infoData.ipMacList.length > 0"> <el-button :icon="(infoData.status === '2' || infoData.status === '3') ? 'Refresh' : 'Upload'"
<div class="title">申请License所需信息</div> :loading="uploadLoading" type="primary" style="height: 40px;">{{ (infoData.status === '2' ||
<div class="tips">您需要提供应用所在服务器的硬盘号和MAC地址，我们再向您提供License</div> infoData.status === '3') ? '更新授权文件'
<div class="point_content"> : '上传授权文件' }}</el-button>
<el-row class="title_row"> <div class="upload">
<el-col :span="6">序号</el-col> <CustomUpload v-if="!uploadLoading" @file-change="handleFileChange" />
<el-col :span="10">当前服务器IP地址</el-col> </div>
<el-col :span="8">当前服务器MAC地址</el-col> </div>
</el-row> <div class="ipMacContent" v-if="infoData && infoData.ipMacList && infoData.ipMacList.length > 0">
<el-row class="content_row" v-for="(item,index) in infoData.ipMacList" :key="index"> <DividerTitle title-name="申请License所需信息" :leftBox="true">
<el-col :span="6">{{ index + 1 }}</el-col> <template v-slot:leftBox>
<el-col :span="10">{{ item.ip }}</el-col> <div class="tips">您需要提供应用所在服务器的硬盘号和MAC地址，我们再向您提供License</div>
<el-col :span="8">{{ item.mac }}</el-col> </template>
</el-row> </DividerTitle>
<el-table ref="table" class="table" :data="infoData.ipMacList" stripe>
<el-table-column type="index" label="序号" width="100" align="center"></el-table-column>
<el-table-column property="ip" label="当前服务器IP地址" align="center"></el-table-column>
<el-table-column property="mac" label="当前服务器MAC地址" align="center"></el-table-column>
</el-table>
</div> </div>
</div> </div>
</div> </div>
...@@ -101,85 +109,122 @@ onMounted(() => { ...@@ -101,85 +109,122 @@ onMounted(() => {
<style lang="scss" scoped> <style lang="scss" scoped>
.app-container__body { .app-container__body {
align-items: center;
justify-content: center; // align-items: center;
.infoContainer { // justify-content: center;
margin-top: -8%; .pageTitle {
min-width: 668px; margin-bottom: 20px;
.document { display: flex;
align-items: center;
font-size: 16px;
font-weight: 500;
letter-spacing: 0px;
line-height: 22px;
color: rgba(53, 64, 79, 1);
.icon {
margin-right: 6px;
width: 16px;
height: 16px;
}
}
.box {
display: flex;
flex-direction: column;
flex: 1;
overflow: hidden;
background: #fff;
.line {
width: 100%; width: 100%;
height: 2px;
border-radius: 5px 5px 0px 0px;
background: linear-gradient(90deg,
rgba(33, 103, 217, 1) 0%,
rgba(17, 200, 250, 1) 34.03%,
rgba(33, 103, 217, 1) 64.58%,
rgba(48, 128, 255, 1) 100%);
}
.content {
padding: 28px 30px;
flex: 1;
overflow: hidden;
display: flex; display: flex;
&-left { flex-direction: column;
margin-right: 84px;
position: relative; .infoContainer {
height: 310px; width: 100%;
.licenseBg { border-radius: 5px;
height: 100%; background: rgba(245, 252, 255, 1);
} border: 1px solid rgba(29, 178, 245, 1);
.mask { overflow: hidden;
position: absolute; background: rgba(235, 235, 235, 1);
bottom: 6px;
right: 6px; .itemLi {
width: 70px; margin-bottom: 1px;
height: 70px; display: flex;
height: 40px;
.name {
margin-right: 1px;
width: 111px;
background: rgba(245, 252, 255, 1);
font-size: 12px;
line-height: 40px;
color: rgba(148, 148, 148, 1);
text-align: right;
}
.value {
flex: 1;
padding-left: 20px;
background: rgba(245, 252, 255, 1);
font-size: 12px;
line-height: 40px;
color: rgba(53, 64, 79, 1);
}
} }
} }
&-right {
padding-top: 50px; .but {
.title-header { position: relative;
font-weight: 700; margin-top: 40px;
font-size: 18px; margin-bottom: 100px;
color: #333; position: relative;
position: relative; overflow: hidden;
margin-bottom: 20px; display: flex;
} align-items: center;
.title-item { justify-content: center;
color: #333;
margin-bottom: 10px; .upload {
} position: absolute;
.but { top: 0;
position: relative; left: 0;
margin-top: 20px; width: 100%;
position: relative; height: 100%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden; overflow: hidden;
.upload { opacity: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
opacity: 0;
}
} }
} }
}
.ipMacContent { .ipMacContent {
margin-top: 100px; flex: 1;
.title { overflow: hidden;
font-size: 16px; display: flex;
color: #333; flex-direction: column;
margin-bottom: 4px;
} .tips {
.tips { font-size: 14px;
color: #858f9e; color: rgba(253, 84, 81, 1);
margin-bottom: 11px;
}
.point_content {
border: 1px solid #d8d8d8;
border-radius: 4px;
background: hsla(0, 0%, 100%, 0.6);
padding: 10px 30px 2px;
.title_row {
color: #333;
margin-bottom: 10px;
} }
.content_row {
color: #858f9e; .table {
margin-bottom: 8px; flex: 1;
} }
} }
} }
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论