Authored by 鲁尚清

【无】 license导入页面

  1 +<title>license</title>
  2 +<iframe class="layadmin-iframe" src="/vue3/index.html#/vue3/license" style="height: 99.5%!important;"/>
@@ -167,6 +167,12 @@ const routes = [{ @@ -167,6 +167,12 @@ const routes = [{
167 name: 'snapshotOverview', 167 name: 'snapshotOverview',
168 component: () => myImport('views/snapshotOverview/index') 168 component: () => myImport('views/snapshotOverview/index')
169 }, 169 },
  170 + //license
  171 + {
  172 + path: '/vue3/license',
  173 + name: 'license',
  174 + component: () => myImport('views/license/index')
  175 + }
170 ]; 176 ];
171 177
172 // hash模式: createWebHashHistory 178 // hash模式: createWebHashHistory
  1 +<div :style="{'height':height+'px','max-height':height+'px','background-color':'#fff'}" class="container">
  2 + <div :style="{'min-height':height+'px','max-height':height+'px','height':'100%','padding-top':'3px'}"
  3 + class="cm-card">
  4 + <div class="search" >
  5 + <div class="condition" style="width: 100%;justify-content: flex-end;">
  6 + <el-form-item>
  7 + <el-upload
  8 + :auto-upload="true"
  9 + :before-upload="beforeAvatarUpload"
  10 + :http-request="getFile"
  11 + :multiple="false"
  12 + :show-file-list="false"
  13 + class="upload-demo-license">
  14 + <el-button size="mini" type="primary">导入</el-button>
  15 + </el-upload>
  16 + </el-form-item>
  17 + </div>
  18 + </div>
  19 + <div class="search-table">
  20 + <el-row>
  21 + <el-col :span="24" class="license-detail">
  22 + <el-descriptions title="license文件信息" :column="3" border>
  23 +
  24 + <el-descriptions-item label="授权状态" label-align="right" align="center">
  25 + 正常
  26 + </el-descriptions-item>
  27 + <el-descriptions-item label="授权时间" label-align="right" align="center">
  28 + 2022-08-23
  29 + </el-descriptions-item>
  30 + <el-descriptions-item label="剩余" label-align="right" align="center">
  31 + <el-tag size="small">2天</el-tag>
  32 + </el-descriptions-item>
  33 + </el-descriptions>
  34 + </el-col>
  35 + </el-row>
  36 + <el-row>
  37 + <el-col :span="24" style="text-align: left;padding: 10px 0;font-size: 16px;font-weight: bold;">授权详情</el-col>
  38 + </el-row>
  39 + <cm-table-page :columns="tableData.columns" :dataList="tableData.dataList"
  40 + :height="200"
  41 + :loading="false"
  42 + :showBorder="true"
  43 + :showIndex="false"
  44 + :showPage="false"
  45 + :showSelection="false"
  46 + :showTools="false"
  47 + >
  48 + <template #default="{row,prop,column}">
  49 + <div v-if="prop == 'resNum'">
  50 +<!-- <span class="" style="color:#1e9fff;text-decoration: underline;cursor: pointer;">{{row.resNum }}</span>-->
  51 + <span :style="{'color':row.resNum>=1000?'red':''}">{{row.resNum}}</span>
  52 + </div>
  53 + <div v-else>
  54 + {{row[prop]}}
  55 + <el-tooltip
  56 + effect="dark"
  57 + placement="bottom"
  58 + >
  59 + <template #content>
  60 + <div>
  61 + <span>该协议写包含</span>
  62 + <span style="word-break: break-all;">{{splitDetail(prop)}}</span>
  63 + </div>
  64 + </template>
  65 + <i v-if="row[prop] && prop !='usage'" style="margin-left:6px;" class="el-icon-info"></i>
  66 + </el-tooltip>
  67 + </div>
  68 + </template>
  69 + </cm-table-page>
  70 + </div>
  71 + </div>
  72 +</div>
  73 +
  1 +export default {
  2 + name: 'license',
  3 + template: '',
  4 + components: {
  5 + },
  6 + props: [],
  7 + setup(props, {attrs, slots, emit}) {
  8 + const {proxy} = Vue.getCurrentInstance();
  9 + let height = Vue.ref(window.innerHeight);
  10 + //导入或者详细信息
  11 + let isExport=Vue.ref(false);
  12 + //表格字段
  13 + let tableData = Vue.ref({
  14 + count: 0,
  15 + dataList: [],
  16 + columns: [
  17 + {
  18 + prop: 'usage',
  19 + label: '使用情况',
  20 + sortable: true,
  21 + align: 'center',
  22 + width: '100'
  23 + },
  24 + {
  25 + prop: 'resNum',
  26 + label: '资源数量',
  27 + sortable: true,
  28 + align: 'center',
  29 + width: '100',
  30 + },
  31 + {
  32 + prop: 'protocolCate',
  33 + label: '协议',
  34 + align: 'center',
  35 + columns:[]
  36 + }
  37 + ]
  38 + })
  39 +
  40 + // license分类详细协议
  41 + let licenseCateData=Vue.ref([
  42 + {license:'SSH',protocolCode:'SSH'},
  43 + {license:'SSH',protocolCode:'SSHPUBKEY'},
  44 + {license:'SSH',protocolCode:'SSHLocalShellPlugin'},
  45 + {license:'SSH',protocolCode:'LOCALSSH'},
  46 + {license:'SSH',protocolCode:'ShellCommandPlugin'},
  47 + {license:'SNMP',protocolCode:'SNMP'},
  48 + {license:'SNMP',protocolCode:'SNMP V3'},
  49 + {license:'SNMP',protocolCode:'SNMP TRAP'},
  50 + {license:'SDK',protocolCode:'SDK'},
  51 + {license:'SDK',protocolCode:'SDK'},
  52 + {license:'SDK',protocolCode:'SDK'},
  53 + {license:'DB',protocolCode:'JDBC'},
  54 + {license:'DB',protocolCode:'MONGODB'},
  55 + {license:'DB',protocolCode:'REDISX_CLI'},
  56 + {license:'JMX',protocolCode:'TOMCAT_JMX'},
  57 + {license:'JMX',protocolCode:'ZOOKEEPER_JMX'},
  58 + {license:'JMX',protocolCode:'KAFKA_JMX'},
  59 + {license:'SYSLOG',protocolCode:'SYSLOG'},
  60 + {license:'SYSLOG',protocolCode:'SYSLOGD'},
  61 + {license:'HTTP',protocolCode:'HTTP'},
  62 + {license:'HTTP',protocolCode:'HTTPS'},
  63 + {license:'HTTP',protocolCode:'HUAWEI_CLOUD'},
  64 + {license:'HTTP',protocolCode:'ALI_CLOUD'},
  65 + {license:'HTTP',protocolCode:'HTTP-电子税务局大屏'},
  66 + {license:'HTTP',protocolCode:'HTTP-阿里回迁云'},
  67 + {license:'HTTP',protocolCode:'tongwebHttp'},
  68 + {license:'HTTP',protocolCode:'QuantumPlugin'},
  69 + {license:'HTTP',protocolCode:'CollHuaweiE9000Plugin'},
  70 + {license:'HTTP',protocolCode:'CollHuaweiCloudStackPlugin'},
  71 + {license:'HTTP',protocolCode:'Coll360'},
  72 + {license:'HTTP',protocolCode:'Ezsonar'},
  73 + {license:'HTTP',protocolCode:'RongcuoLibraryPlugin'},
  74 + {license:'HTTP',protocolCode:'AnGuanPinTaiPlugin'},
  75 + {license:'HTTP',protocolCode:'nginxPlugin'},
  76 + {license:'IPMI',protocolCode:'IPMI'},
  77 + ])
  78 +
  79 + //获取license分类下的字段
  80 + let cateColumn=Vue.ref([]);
  81 + let getLicenseColumn=()=>{
  82 + cateColumn.value=[
  83 + {
  84 + prop: 'SSH',
  85 + label: 'SSH',
  86 + sortable: true,
  87 + align: 'center',
  88 + },
  89 + {
  90 + prop: 'SNMP',
  91 + label: 'SNMP',
  92 + sortable: true,
  93 + align: 'center',
  94 + },
  95 + {
  96 + prop: 'SDK',
  97 + label: 'SDK',
  98 + sortable: true,
  99 + align: 'center',
  100 + },
  101 + {
  102 + prop: 'DB',
  103 + label: 'DB',
  104 + sortable: true,
  105 + align: 'center',
  106 + },
  107 + {
  108 + prop: 'JMX',
  109 + label: 'JMX',
  110 + sortable: true,
  111 + align: 'center',
  112 + },
  113 + {
  114 + prop: 'SYSLOG',
  115 + label: 'SYSLOG',
  116 + sortable: true,
  117 + align: 'center',
  118 + },
  119 + {
  120 + prop: 'HTTP',
  121 + label: 'HTTP',
  122 + sortable: true,
  123 + align: 'center',
  124 + },
  125 + {
  126 + prop: 'IPMI',
  127 + label: 'IPMI',
  128 + sortable: true,
  129 + align: 'center',
  130 + }
  131 + ]
  132 + tableData.value.columns.map(item=>{
  133 + if(item.prop=='protocolCate'){
  134 + item.columns=cateColumn.value
  135 + }
  136 + })
  137 + }
  138 + //给列表数据追加相关的详细协议
  139 + // 获取列表
  140 + let getDataList = () => {
  141 + tableData.value.dataList = [
  142 + {usage:'授权数量',resNum:'2',SSH:'12'},
  143 + {usage:'剩余数量',resNum:'1000',SNMP:'1',HTTP:'23'},
  144 + ];
  145 +
  146 + return
  147 +
  148 + let params = {
  149 + page: search.value.page,
  150 + limit: search.value.limit,
  151 + }
  152 +
  153 + proxy.$http.list(`/license/list`, params, function (res) {
  154 + if (res && res.object) {
  155 + let dataList = res.object.content;
  156 + let arr = [];
  157 + dataList.map(item => {
  158 + arr.push(item[0])
  159 + })
  160 + tableData.value.dataList = arr;
  161 + tableData.value.count = parseInt(res.object.total);
  162 + } else {
  163 + tableData.value.dataList = [];
  164 + tableData.value.count = 0;
  165 + }
  166 + });
  167 + }
  168 +
  169 + //拆分详细协议数组
  170 + let splitDetail=(propkey)=>{
  171 + let arr=[];
  172 + licenseCateData.value.map(v=>{
  173 + if(propkey==v.license){
  174 + arr.push(v.protocolCode)
  175 + }
  176 + })
  177 + let str='';
  178 + if(arr && arr.length>0){
  179 + str=arr.join(',')
  180 + }
  181 + return str;
  182 + }
  183 +
  184 + // 下载license
  185 + let handleDownLoad=(row)=>{
  186 + proxy.$global.confirm("确定下载license?", function () {
  187 + proxy.$http.downloadFile("/api-web/export", row);
  188 +
  189 + })
  190 + }
  191 +
  192 + let beforeAvatarUpload = (file) => {
  193 + const isJPG = file.type.indexOf('image/') != -1
  194 + if (!isJPG) {
  195 + proxy.$global.showMsg('您上传的不是图片文件,请选择图片!', 'error');
  196 + }
  197 + return isJPG
  198 + }
  199 + let getFile = (param) => {
  200 + let fileObj = param.file
  201 + let params = {
  202 + file: fileObj,
  203 + code: param.data
  204 + }
  205 + // 上传文件
  206 + proxy.$http.uploadFile("/api-u/sysConf/uploadFile", params, function (res) {
  207 + if (res && res.success) {
  208 + proxy.$global.showMsg("上传成功!");
  209 + }
  210 + })
  211 + }
  212 + //获取license详情
  213 + let getLicenseDetail=()=>{
  214 + let params={}
  215 + proxy.$http.get(`/license/selectById`, params, function (res) {
  216 + if (res && res.object) {
  217 + let dataList = res.object.content;
  218 +
  219 + }
  220 + });
  221 + }
  222 +
  223 + // 挂载完
  224 + Vue.onMounted(() => {
  225 + getLicenseColumn();
  226 + getDataList();
  227 + })
  228 +
  229 +
  230 + return {
  231 + isExport,
  232 + beforeAvatarUpload,
  233 + getFile,
  234 + licenseCateData,
  235 + getLicenseColumn,
  236 + cateColumn,
  237 + splitDetail,
  238 + handleDownLoad,
  239 + height,
  240 + tableData,
  241 + getDataList,
  242 + }
  243 + }
  244 +
  245 +}
@@ -262,6 +262,12 @@ const routes = [{ @@ -262,6 +262,12 @@ const routes = [{
262 name: 'snapshotOverview', 262 name: 'snapshotOverview',
263 component: () => myImport('views/snapshotOverview/index') 263 component: () => myImport('views/snapshotOverview/index')
264 }, 264 },
  265 + //license
  266 + {
  267 + path: '/vue3/license',
  268 + name: 'license',
  269 + component: () => myImport('views/license/index')
  270 + }
265 ]; 271 ];
266 272
267 // hash模式: createWebHashHistory 273 // hash模式: createWebHashHistory