Merge branch 'master-v32-xwx' into 'master'
license功能迁移 See merge request !966
Showing
9 changed files
with
736 additions
and
2 deletions
@@ -96,7 +96,10 @@ layui.define(['layer', 'laytpl', 'form'], function (exports) { | @@ -96,7 +96,10 @@ layui.define(['layer', 'laytpl', 'form'], function (exports) { | ||
96 | $(newContent).css('cursor','pointer').on(options.type,options.action); | 96 | $(newContent).css('cursor','pointer').on(options.type,options.action); |
97 | } | 97 | } |
98 | },1); | 98 | },1); |
99 | - $(options.dom).append(newContainer); | 99 | + //lsq 快照完成后提示框显示在最上面,需要把提示框添加到body下 20022-08-30 |
100 | + // $(options.dom).append(newContainer); | ||
101 | + $('body').append(newContainer); | ||
102 | + $('.ez_tips ').css('z-index','99999999'); | ||
100 | } else if(options.toastType=='faultinfo'||options.toastType=='faultprogress'||options.toastType=='faultover'){ | 103 | } else if(options.toastType=='faultinfo'||options.toastType=='faultprogress'||options.toastType=='faultover'){ |
101 | 104 | ||
102 | var container = "<div class='fault_ez_tips "+options.toastType+"' style="+firstDirection+":"+options.margin+"px;transform:translateX("+minus+"110%); ></div>" | 105 | var container = "<div class='fault_ez_tips "+options.toastType+"' style="+firstDirection+":"+options.margin+"px;transform:translateX("+minus+"110%); ></div>" |
1 | +<div> | ||
2 | + <!-- 表格--> | ||
3 | + <el-table :border="showBorder" :data="dataList" :default-expand-all="defaultExpand" :expand-row-keys="expands" | ||
4 | + :height="height" :row-key="getRowKeys" :size="size" @select="handleSelect" | ||
5 | + @select-all="handleSelectAll" | ||
6 | + @selection-change="handleSelectionChange" header-row-class-name="tbl-header-class" ref="multipleTable" | ||
7 | + stripe | ||
8 | + style="width: 100%;margin: 0px 0px; font-size:13.5px;" v-loading="loading" | ||
9 | + > | ||
10 | + | ||
11 | + <el-table-column type="expand" v-if="showExpand"> | ||
12 | + <template #default="scope"> | ||
13 | + <slot :scope="scope" name="expand"> | ||
14 | + | ||
15 | + </slot> | ||
16 | + </template> | ||
17 | + </el-table-column> | ||
18 | + <el-table-column align="center" type="selection" v-if="showSelection && columns.length > 0" width="55"/> | ||
19 | + <el-table-column :label="indexLabel" align="center" type="index" v-if="showIndex && columns.length > 0" | ||
20 | + width="50"/> | ||
21 | + | ||
22 | + <el-table-column :align="item.align == undefined ? 'center' : item.align " :label="item.label" :prop="item.prop" | ||
23 | + :sortable="item.sortable == undefined ? false : item.sortable" | ||
24 | + :width="getWidth(item.width)" | ||
25 | + v-for="item in columns"> | ||
26 | + <template v-if="!item.columns || item.columns.lendth==0" #default="scope"> | ||
27 | + <slot :column="item" :prop="item.prop" :row="scope.row"> | ||
28 | + <div v-if="typeof(item.click) == 'function' && typeof(item.render) == 'function'"> | ||
29 | + <span @click="item.click(scope.row)" style="cursor: pointer" | ||
30 | + v-html="item.render(scope.row)"></span> | ||
31 | + </div> | ||
32 | + <div v-else-if="typeof(item.click) == 'function'"> | ||
33 | + <span @click="item.click(scope.row)" style="cursor: pointer"> {{scope.row[item.prop]}}</span> | ||
34 | + </div> | ||
35 | + <div v-else-if="typeof(item.render) == 'function'"> | ||
36 | + <span v-html="item.render(scope.row)">{{scope.row[item.prop]}}</span> | ||
37 | + </div> | ||
38 | + | ||
39 | + <span v-else> | ||
40 | + <el-tooltip placement="top"> | ||
41 | + <template #content> | ||
42 | + <div v-html="getTextContent(scope.row[item.prop])"> | ||
43 | + </div> | ||
44 | + </template> | ||
45 | + <div style="overflow: hidden; text-overflow: ellipsis;display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;"> | ||
46 | + {{scope.row[item.prop]}} | ||
47 | + </div> | ||
48 | + </el-tooltip> | ||
49 | + </span> | ||
50 | + </slot> | ||
51 | + </template> | ||
52 | + <el-table-column v-else :align="columnItem.align == undefined ? 'center' : columnItem.align " :label="columnItem.label" :prop="columnItem.prop" | ||
53 | + :sortable="columnItem.sortable == undefined ? false : columnItem.sortable" | ||
54 | + :width="getWidth(columnItem.width)" | ||
55 | + v-for="columnItem in item.columns"> | ||
56 | + <template #default="scope"> | ||
57 | + <slot :column="columnItem" :prop="columnItem.prop" :row="scope.row"> | ||
58 | + <div v-if="typeof(columnItem.click) == 'function' && typeof(columnItem.render) == 'function'"> | ||
59 | + <span @click="columnItem.click(scope.row)" style="cursor: pointer" | ||
60 | + v-html="columnItem.render(scope.row)"></span> | ||
61 | + </div> | ||
62 | + <div v-else-if="typeof(columnItem.click) == 'function'"> | ||
63 | + <span @click="columnItem.click(scope.row)" style="cursor: pointer"> {{scope.row[columnItem.prop]}}</span> | ||
64 | + </div> | ||
65 | + <div v-else-if="typeof(columnItem.render) == 'function'"> | ||
66 | + <span v-html="columnItem.render(scope.row)">{{scope.row[columnItem.prop]}}</span> | ||
67 | + </div> | ||
68 | + | ||
69 | + <span v-else> | ||
70 | + <el-tooltip placement="top"> | ||
71 | + <template #content> | ||
72 | + <div v-html="getTextContent(scope.row[columnItem.prop])"> | ||
73 | + </div> | ||
74 | + </template> | ||
75 | + <div style="overflow: hidden; text-overflow: ellipsis;display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;"> | ||
76 | + {{scope.row[columnItem.prop]}} | ||
77 | + </div> | ||
78 | + </el-tooltip> | ||
79 | + </span> | ||
80 | + </slot> | ||
81 | + </template> | ||
82 | + </el-table-column> | ||
83 | + </el-table-column> | ||
84 | + | ||
85 | + <el-table-column align="center" label="操作" v-if="showTools && columns.length > 0" width="80"> | ||
86 | + <template #default="scope"> | ||
87 | + <slot :scope="scope" name="tools"></slot> | ||
88 | + </template> | ||
89 | + </el-table-column> | ||
90 | + </el-table> | ||
91 | + <!-- 分页 --> | ||
92 | + <div style='text-align: left;background-color: white' v-if="showPage"> | ||
93 | + <el-pagination | ||
94 | + :current-page="currentPage" | ||
95 | + :layout="layout" | ||
96 | + :page-size="pageSize" | ||
97 | + :page-sizes="pageSizes" | ||
98 | + :total="total" | ||
99 | + @current-change="handleCurrentChange" | ||
100 | + @next-click="nextPage" | ||
101 | + @prev-click="prePage" | ||
102 | + @size-change="handleSizeChange"> | ||
103 | + </el-pagination> | ||
104 | + </div> | ||
105 | +</div> | ||
106 | + |
hg-monitor-web-base/src/main/resources/static/vue3/src/components/common/table-page-column/index.js
0 → 100644
1 | +/** | ||
2 | + * 分页表格组件 | ||
3 | + */ | ||
4 | +export default { | ||
5 | + name: 'tablePageColumnIndex', | ||
6 | + template: '', | ||
7 | + components: {}, | ||
8 | + props: { | ||
9 | + // 展示分页 | ||
10 | + showPage: { | ||
11 | + type: Boolean, | ||
12 | + default: true | ||
13 | + }, | ||
14 | + showBorder: { | ||
15 | + type: Boolean, | ||
16 | + default: true | ||
17 | + }, | ||
18 | + // 高度 | ||
19 | + height: { | ||
20 | + type: Number, | ||
21 | + default: window.innerHeight | ||
22 | + }, | ||
23 | + // 展示下标 | ||
24 | + showIndex: { | ||
25 | + type: Boolean, | ||
26 | + default: true | ||
27 | + }, | ||
28 | + showSelection: { | ||
29 | + type: Boolean, | ||
30 | + default: false | ||
31 | + }, | ||
32 | + indexLabel: { | ||
33 | + type: String, | ||
34 | + default: '序号' | ||
35 | + }, | ||
36 | + // 分页页码设置 | ||
37 | + pageSizes: { | ||
38 | + type: Array, | ||
39 | + default: [10, 50, 100, 200, 300, 400] | ||
40 | + }, | ||
41 | + // 默认展示 | ||
42 | + pageSize: { | ||
43 | + type: Number, | ||
44 | + default: 10 | ||
45 | + }, | ||
46 | + // 总数 | ||
47 | + total: { | ||
48 | + type: Number, | ||
49 | + default: 0 | ||
50 | + }, | ||
51 | + // 展示组件 | ||
52 | + layout: { | ||
53 | + type: String, | ||
54 | + // Start Wang 2022/1/19 14:22 上一页和下一页切花不生效,暂无解决办法 | ||
55 | + //default: "total, prev,pager,next, sizes, jumper" | ||
56 | + default: "total, pager,sizes, jumper" | ||
57 | + // End Wang 2022/1/19 14:22 | ||
58 | + }, | ||
59 | + // 列 | ||
60 | + columns: { | ||
61 | + type: Array, | ||
62 | + default: [] | ||
63 | + }, | ||
64 | + // 数据 | ||
65 | + dataList: { | ||
66 | + type: Array, | ||
67 | + default: [] | ||
68 | + }, | ||
69 | + // 是否展示加载 | ||
70 | + loading: { | ||
71 | + type: Boolean, | ||
72 | + default: false | ||
73 | + }, | ||
74 | + maxWidth: { | ||
75 | + type: Number, | ||
76 | + default: window.innerWidth | ||
77 | + }, | ||
78 | + showTools: { | ||
79 | + type: Boolean, | ||
80 | + default: false | ||
81 | + }, | ||
82 | + // medium / small / mini | ||
83 | + size: { | ||
84 | + type: String, | ||
85 | + default: 'small' | ||
86 | + }, | ||
87 | + multipleSelection: { | ||
88 | + type: Array, | ||
89 | + default: [] | ||
90 | + }, | ||
91 | + //展开行 | ||
92 | + showExpand: { | ||
93 | + type: Boolean, | ||
94 | + default: false | ||
95 | + }, | ||
96 | + //行数据的key | ||
97 | + getRowKeys: { | ||
98 | + type: String, | ||
99 | + default: 'id' | ||
100 | + }, | ||
101 | + //默认展开哪行 | ||
102 | + expands: { | ||
103 | + type: Array, | ||
104 | + default: [] | ||
105 | + }, | ||
106 | + //是否默认展开所有行 | ||
107 | + defaultExpand: { | ||
108 | + type: Boolean, | ||
109 | + default: false | ||
110 | + } | ||
111 | + }, | ||
112 | + data() { | ||
113 | + return {} | ||
114 | + }, | ||
115 | + setup(props, {attrs, slots, emit}) { | ||
116 | + const {proxy} = Vue.getCurrentInstance(); | ||
117 | + let currentPage = Vue.ref(1); | ||
118 | + let pageSize = Vue.ref(props.pageSize); | ||
119 | + // let multipleSelection=Vue.ref([]); | ||
120 | + | ||
121 | + /** | ||
122 | + * 获取宽度 | ||
123 | + * <p> | ||
124 | + * 作者: Wang | ||
125 | + * 时间:2021/11/16 16:19 | ||
126 | + */ | ||
127 | + | ||
128 | + let getWidth = (width) => { | ||
129 | + let maxWidth = (function () { | ||
130 | + let cols = props.columns; | ||
131 | + if (cols && cols.length > 0) { | ||
132 | + // 求和 | ||
133 | + let w = 0; | ||
134 | + cols.forEach(function (v) { | ||
135 | + w += parseFloat(v.width); | ||
136 | + }) | ||
137 | + | ||
138 | + let max = props.maxWidth; | ||
139 | + if (props.showTools) { | ||
140 | + max -= 80; | ||
141 | + } | ||
142 | + | ||
143 | + if (w < max) { | ||
144 | + return max / w * width; | ||
145 | + } | ||
146 | + } | ||
147 | + return width; | ||
148 | + })(); | ||
149 | + | ||
150 | + return maxWidth; | ||
151 | + } | ||
152 | + | ||
153 | + | ||
154 | + let callback = () => { | ||
155 | + let params = { | ||
156 | + page: currentPage.value, limit: pageSize.value | ||
157 | + } | ||
158 | + proxy.$refs.multipleTable.clearSelection(); | ||
159 | + | ||
160 | + emit('loaddata', params) | ||
161 | + } | ||
162 | + | ||
163 | + // 每页展示多少条 | ||
164 | + let handleSizeChange = (val) => { | ||
165 | + // Start Wang 2021/12/15 23:46 切换页码重置初始页 | ||
166 | + currentPage.value = 1 | ||
167 | + // End Wang 2021/12/15 23:46 切换页码重置初始页 | ||
168 | + // console.log(`每页 ${val} 条`) | ||
169 | + //props.pageSize = val; | ||
170 | + pageSize.value = val; | ||
171 | + callback(); | ||
172 | + } | ||
173 | + | ||
174 | + // 切换页码 | ||
175 | + let handleCurrentChange = (val) => { | ||
176 | + // console.log(`当前页: ${val}`) | ||
177 | + //props.currentPage = val; | ||
178 | + currentPage.value = val; | ||
179 | + callback(); | ||
180 | + } | ||
181 | + | ||
182 | + // 切换页码 | ||
183 | + let prePage = (val) => { | ||
184 | + // console.log(`当前页: ${val}`) | ||
185 | + // props.currentPage = val - 1; | ||
186 | + currentPage.value = val - 1; | ||
187 | + callback(); | ||
188 | + } | ||
189 | + | ||
190 | + // 切换页码 | ||
191 | + let nextPage = (val) => { | ||
192 | + // console.log(`当前页: ${val}`) | ||
193 | + // props.currentPage = val + 1; | ||
194 | + currentPage.value = val + 1; | ||
195 | + callback(); | ||
196 | + } | ||
197 | + | ||
198 | + // 监听编辑状态 | ||
199 | + // Vue.watch(() => filterText.value, (newValue, oldVlaue) => { | ||
200 | + // proxy.$refs.tree.filter(newValue) | ||
201 | + // }); | ||
202 | + | ||
203 | + //全选事件 | ||
204 | + let handleSelectionChange = (val) => { | ||
205 | + // multipleSelection.value = val | ||
206 | + emit('selectionChange', val) | ||
207 | + | ||
208 | + } | ||
209 | + //设置默认选中 | ||
210 | + let toggleSelection = (rows) => { | ||
211 | + //console.log("rows",rows) | ||
212 | + proxy.$nextTick(function () { | ||
213 | + //console.log("set",props.dataList,props.multipleSelection) | ||
214 | + | ||
215 | + if (rows) { | ||
216 | + rows.forEach(row => { | ||
217 | + //设置该表格选框选中 | ||
218 | + proxy.$refs.multipleTable.toggleRowSelection(row); | ||
219 | + }); | ||
220 | + } else { | ||
221 | + proxy.$refs.multipleTable.clearSelection(); | ||
222 | + } | ||
223 | + }) | ||
224 | + } | ||
225 | + | ||
226 | + let getTextContent = (val) => { | ||
227 | + if (val && val != '' && val != null) { | ||
228 | + val = val + ''.replace(/[^\x00-\xff]/g, "$&\x01").replace(/.{50}\x01?/g, "$&<br/>").replace(/\x01/g, ""); | ||
229 | + } | ||
230 | + return val; | ||
231 | + | ||
232 | + } | ||
233 | + //设置父节点选中后children也选中 | ||
234 | + let setChecked = (row) => { | ||
235 | + let arr = []; | ||
236 | + if (row.children) { | ||
237 | + row.children.map(j => { | ||
238 | + arr.push(j) | ||
239 | + setChecked(j) | ||
240 | + }) | ||
241 | + } | ||
242 | + toggleSelection(arr) | ||
243 | + } | ||
244 | + //勾选数据行的Checkbox事件 | ||
245 | + let handleSelect = (selection, row) => { | ||
246 | + setChecked(row); | ||
247 | + | ||
248 | + emit('handleSelect', selection) | ||
249 | + } | ||
250 | + //勾选全选checkbox事件 | ||
251 | + let handleSelectAll = (selection) => { | ||
252 | + const isSelect = selection.some(el => { | ||
253 | + const tableDataIds = props.dataList.map(j => j[props.getRowKeys]) | ||
254 | + return tableDataIds.includes(el.id) | ||
255 | + }) | ||
256 | + const isCancel = !props.dataList.every(el => { | ||
257 | + const selectIds = selection.map(j => j[props.getRowKeys]) | ||
258 | + return selectIds.includes(el.id) | ||
259 | + }) | ||
260 | + if (isSelect) { | ||
261 | + setChecked(selection); | ||
262 | + } | ||
263 | + if (isCancel) { | ||
264 | + props.dataList.map(el => { | ||
265 | + setChecked(el); | ||
266 | + }) | ||
267 | + } | ||
268 | + | ||
269 | + emit('handleSelectAll', selection) | ||
270 | + } | ||
271 | + // 挂载完 | ||
272 | + Vue.onMounted(() => { | ||
273 | + //callback(); | ||
274 | + | ||
275 | + }) | ||
276 | + Vue.watch(() => props.dataList, (newValue, oldValue) => { | ||
277 | + setTimeout(function () { | ||
278 | + if (props.showSelection) { | ||
279 | + toggleSelection(props.multipleSelection) | ||
280 | + } | ||
281 | + }, 100) | ||
282 | + | ||
283 | + | ||
284 | + }) | ||
285 | + | ||
286 | + return { | ||
287 | + handleSelect, | ||
288 | + handleSelectAll, | ||
289 | + toggleSelection, | ||
290 | + handleSelectionChange, | ||
291 | + // multipleSelection, | ||
292 | + currentPage, | ||
293 | + pageSize, | ||
294 | + handleSizeChange, | ||
295 | + handleCurrentChange, | ||
296 | + prePage, | ||
297 | + nextPage, | ||
298 | + getWidth, | ||
299 | + getTextContent | ||
300 | + } | ||
301 | + } | ||
302 | +} |
@@ -31,6 +31,8 @@ Promise.all([ | @@ -31,6 +31,8 @@ Promise.all([ | ||
31 | .component('cm-res-type-tree-view', Vue.defineAsyncComponent(() => myImport('components/common/restypetree/index'))) | 31 | .component('cm-res-type-tree-view', Vue.defineAsyncComponent(() => myImport('components/common/restypetree/index'))) |
32 | // 资源类型树 | 32 | // 资源类型树 |
33 | .component('cm-table-page', Vue.defineAsyncComponent(() => myImport('components/common/table-page/index'))) | 33 | .component('cm-table-page', Vue.defineAsyncComponent(() => myImport('components/common/table-page/index'))) |
34 | + // 表格 | ||
35 | + .component('cm-table-page-column', Vue.defineAsyncComponent(() => myImport('components/common/table-page-column/index'))) | ||
34 | // 弹框 | 36 | // 弹框 |
35 | .component('cm-dialog', Vue.defineAsyncComponent(() => myImport('components/common/dialog/index'))) | 37 | .component('cm-dialog', Vue.defineAsyncComponent(() => myImport('components/common/dialog/index'))) |
36 | // 用户授权 | 38 | // 用户授权 |
@@ -93,6 +93,12 @@ const routes = [{ | @@ -93,6 +93,12 @@ const routes = [{ | ||
93 | name: 'busyConfig', | 93 | name: 'busyConfig', |
94 | component: () => myImport('views/busyConfig/index') | 94 | component: () => myImport('views/busyConfig/index') |
95 | }, | 95 | }, |
96 | + //license | ||
97 | + { | ||
98 | + path: '/vue3/license', | ||
99 | + name: 'license', | ||
100 | + component: () => myImport('views/license/index') | ||
101 | + }, | ||
96 | ]; | 102 | ]; |
97 | 103 | ||
98 | // hash模式: createWebHashHistory | 104 | // 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 | + :http-request="getFile" | ||
10 | + :multiple="false" | ||
11 | + :show-file-list="false" | ||
12 | + class="upload-demo-license"> | ||
13 | + <el-button size="mini" type="primary">导入</el-button> | ||
14 | + </el-upload> | ||
15 | + </el-form-item> | ||
16 | + </div> | ||
17 | + </div> | ||
18 | + <div class="search-table"> | ||
19 | + <el-row> | ||
20 | + <el-col :span="24" class="license-detail"> | ||
21 | + <el-descriptions title="license文件信息" :column="3" border> | ||
22 | + | ||
23 | + <el-descriptions-item label="授权状态" label-align="right" align="center"> | ||
24 | + {{tableData.authorizeStats}} | ||
25 | + </el-descriptions-item> | ||
26 | + <el-descriptions-item label="导入时间" label-align="right" align="center"> | ||
27 | + {{tableData.authorizeTime}} | ||
28 | + </el-descriptions-item> | ||
29 | + <el-descriptions-item label="剩余" label-align="right" align="center"> | ||
30 | + <el-tag size="small" v-if="tableData.timeLeft">{{tableData.timeLeft}}天</el-tag> | ||
31 | + </el-descriptions-item> | ||
32 | + </el-descriptions> | ||
33 | + </el-col> | ||
34 | + </el-row> | ||
35 | + <el-row> | ||
36 | + <el-col :span="24" style="text-align: left;padding: 10px 0;font-size: 16px;font-weight: bold;">授权详情</el-col> | ||
37 | + </el-row> | ||
38 | + <cm-table-page-column :columns="tableData.columns" :dataList="tableData.dataList" | ||
39 | + :height="300" | ||
40 | + :loading="false" | ||
41 | + :showBorder="true" | ||
42 | + :showIndex="false" | ||
43 | + :showPage="false" | ||
44 | + :showSelection="false" | ||
45 | + :showTools="false" | ||
46 | + > | ||
47 | + <template #default="{row,prop,column}"> | ||
48 | + <div v-if="row.usage == '已使用'"> | ||
49 | + <span v-if="tableData.dataList[1][prop]>tableData.dataList[0][prop]" :style="{'color':'red'}">{{row[prop]}}</span> | ||
50 | + <span v-else> | ||
51 | + {{row[prop]}} | ||
52 | + </span> | ||
53 | + <el-tooltip | ||
54 | + effect="dark" | ||
55 | + placement="bottom" | ||
56 | + v-if="tableData.dataList[1][prop]>tableData.dataList[0][prop]" | ||
57 | + > | ||
58 | + <template #content> | ||
59 | + <div> | ||
60 | + <span>已使用资源数量大于授权数量,请及时更新liscense</span> | ||
61 | + <span style="word-break: break-all;">{{splitDetail(prop)}}</span> | ||
62 | + </div> | ||
63 | + </template> | ||
64 | + <i v-if="row[prop] && prop !='usage'" style="margin-left:6px;" class="el-icon-info"></i> | ||
65 | + </el-tooltip> | ||
66 | + </div> | ||
67 | + <div v-else> | ||
68 | + <div v-if="row[prop] != null && row[prop] != ''"> | ||
69 | + <span> | ||
70 | + {{row[prop]}} | ||
71 | + </span> | ||
72 | + </div> | ||
73 | + <div v-else> | ||
74 | + <span> | ||
75 | + - | ||
76 | + </span> | ||
77 | + <el-tooltip | ||
78 | + effect="dark" | ||
79 | + placement="bottom" | ||
80 | + > | ||
81 | + <template #content> | ||
82 | + <span>当前协议可以无限绑定采集资源</span> | ||
83 | + </template> | ||
84 | + <i v-if="prop !='usage'" style="margin-left:6px;" class="el-icon-info"></i> | ||
85 | + </el-tooltip> | ||
86 | + </div> | ||
87 | + </div> | ||
88 | + </template> | ||
89 | + </cm-table-page-column> | ||
90 | + </div> | ||
91 | + </div> | ||
92 | +</div> | ||
93 | + |
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 | + authorizeStats: '', | ||
17 | + authorizeTime:'', | ||
18 | + timeLeft:'', | ||
19 | + columns: [ | ||
20 | + { | ||
21 | + prop: 'usage', | ||
22 | + label: '使用情况', | ||
23 | + sortable: true, | ||
24 | + align: 'center', | ||
25 | + width: '100' | ||
26 | + }, | ||
27 | + { | ||
28 | + prop: 'resNum', | ||
29 | + label: '资源数量', | ||
30 | + sortable: true, | ||
31 | + align: 'center', | ||
32 | + width: '100', | ||
33 | + }, | ||
34 | + { | ||
35 | + prop: 'protocolCate', | ||
36 | + label: '协议(只统计已挂载任务的资源)', | ||
37 | + align: 'center', | ||
38 | + columns:[] | ||
39 | + } | ||
40 | + ] | ||
41 | + }) | ||
42 | + | ||
43 | + // license分类详细协议 | ||
44 | + let licenseCateData=Vue.ref([ | ||
45 | + {license:'SSH',protocolCode:'SSH'}, | ||
46 | + {license:'SSH',protocolCode:'SSHPUBKEY'}, | ||
47 | + {license:'SSH',protocolCode:'SSHLocalShellPlugin'}, | ||
48 | + {license:'SSH',protocolCode:'LOCALSSH'}, | ||
49 | + {license:'SSH',protocolCode:'ShellCommandPlugin'}, | ||
50 | + {license:'SNMP',protocolCode:'SNMP'}, | ||
51 | + {license:'SNMP',protocolCode:'SNMP V3'}, | ||
52 | + {license:'SNMP',protocolCode:'SNMP TRAP'}, | ||
53 | + {license:'SDK',protocolCode:'SDK'}, | ||
54 | + {license:'SDK',protocolCode:'SDK'}, | ||
55 | + {license:'SDK',protocolCode:'SDK'}, | ||
56 | + {license:'DB',protocolCode:'JDBC'}, | ||
57 | + {license:'DB',protocolCode:'MONGODB'}, | ||
58 | + {license:'DB',protocolCode:'REDISX_CLI'}, | ||
59 | + {license:'JMX',protocolCode:'TOMCAT_JMX'}, | ||
60 | + {license:'JMX',protocolCode:'ZOOKEEPER_JMX'}, | ||
61 | + {license:'JMX',protocolCode:'KAFKA_JMX'}, | ||
62 | + {license:'SYSLOG',protocolCode:'SYSLOG'}, | ||
63 | + {license:'SYSLOG',protocolCode:'SYSLOGD'}, | ||
64 | + {license:'HTTP',protocolCode:'HTTP'}, | ||
65 | + {license:'HTTP',protocolCode:'HTTPS'}, | ||
66 | + {license:'HTTP',protocolCode:'HUAWEI_CLOUD'}, | ||
67 | + {license:'HTTP',protocolCode:'ALI_CLOUD'}, | ||
68 | + {license:'HTTP',protocolCode:'HTTP-电子税务局大屏'}, | ||
69 | + {license:'HTTP',protocolCode:'HTTP-阿里回迁云'}, | ||
70 | + {license:'HTTP',protocolCode:'tongwebHttp'}, | ||
71 | + {license:'HTTP',protocolCode:'QuantumPlugin'}, | ||
72 | + {license:'HTTP',protocolCode:'CollHuaweiE9000Plugin'}, | ||
73 | + {license:'HTTP',protocolCode:'CollHuaweiCloudStackPlugin'}, | ||
74 | + {license:'HTTP',protocolCode:'Coll360'}, | ||
75 | + {license:'HTTP',protocolCode:'Ezsonar'}, | ||
76 | + {license:'HTTP',protocolCode:'RongcuoLibraryPlugin'}, | ||
77 | + {license:'HTTP',protocolCode:'AnGuanPinTaiPlugin'}, | ||
78 | + {license:'HTTP',protocolCode:'nginxPlugin'}, | ||
79 | + {license:'IPMI',protocolCode:'IPMI'}, | ||
80 | + ]) | ||
81 | + | ||
82 | + //获取license分类下的字段 | ||
83 | + let cateColumn=Vue.ref([]); | ||
84 | + let getLicenseColumn=()=>{ | ||
85 | + cateColumn.value=[ | ||
86 | + { | ||
87 | + prop: 'ssh', | ||
88 | + label: 'SSH', | ||
89 | + sortable: true, | ||
90 | + align: 'center', | ||
91 | + }, | ||
92 | + { | ||
93 | + prop: 'snmp', | ||
94 | + label: 'SNMP', | ||
95 | + sortable: true, | ||
96 | + align: 'center', | ||
97 | + }, | ||
98 | + { | ||
99 | + prop: 'sdk', | ||
100 | + label: 'SDK', | ||
101 | + sortable: true, | ||
102 | + align: 'center', | ||
103 | + }, | ||
104 | + { | ||
105 | + prop: 'db', | ||
106 | + label: 'DB', | ||
107 | + sortable: true, | ||
108 | + align: 'center', | ||
109 | + }, | ||
110 | + { | ||
111 | + prop: 'jmx', | ||
112 | + label: 'JMX', | ||
113 | + sortable: true, | ||
114 | + align: 'center', | ||
115 | + }, | ||
116 | + { | ||
117 | + prop: 'syslog', | ||
118 | + label: 'SYSLOG', | ||
119 | + sortable: true, | ||
120 | + align: 'center', | ||
121 | + }, | ||
122 | + { | ||
123 | + prop: 'http', | ||
124 | + label: 'HTTP', | ||
125 | + sortable: true, | ||
126 | + align: 'center', | ||
127 | + }, | ||
128 | + { | ||
129 | + prop: 'ipmi', | ||
130 | + label: 'IPMI', | ||
131 | + sortable: true, | ||
132 | + align: 'center', | ||
133 | + } | ||
134 | + ] | ||
135 | + tableData.value.columns.map(item=>{ | ||
136 | + if(item.prop=='protocolCate'){ | ||
137 | + item.columns=cateColumn.value; | ||
138 | + } | ||
139 | + }) | ||
140 | + } | ||
141 | + // 获取列表 | ||
142 | + let getDataList = () => { | ||
143 | + proxy.$http.get(`/api-web/license/getList`, {}, function (res) { | ||
144 | + if (res && res.success) { | ||
145 | + let dataList = res.object; | ||
146 | + dataList.license.usage='已授权'; | ||
147 | + dataList.local.usage='已使用'; | ||
148 | + tableData.value.dataList[0] = dataList.license; | ||
149 | + tableData.value.dataList[1] = dataList.local; | ||
150 | + if (dataList.authorizeStats){ | ||
151 | + tableData.value.authorizeStats = '已授权'; | ||
152 | + }else { | ||
153 | + tableData.value.authorizeStats = '未授权'; | ||
154 | + } | ||
155 | + tableData.value.authorizeTime = dataList.authorizeTime; | ||
156 | + tableData.value.timeLeft = dataList.timeLeft; | ||
157 | + | ||
158 | + } else { | ||
159 | + tableData.value.dataList = []; | ||
160 | + } | ||
161 | + }); | ||
162 | + } | ||
163 | + | ||
164 | + //拆分详细协议数组 | ||
165 | + let splitDetail=(propkey)=>{ | ||
166 | + let arr=[]; | ||
167 | + licenseCateData.value.map(v=>{ | ||
168 | + if(propkey==v.license){ | ||
169 | + arr.push(v.protocolCode) | ||
170 | + } | ||
171 | + }) | ||
172 | + let str=''; | ||
173 | + if(arr && arr.length>0){ | ||
174 | + str=arr.join(',') | ||
175 | + } | ||
176 | + return str; | ||
177 | + } | ||
178 | + | ||
179 | + | ||
180 | + let getFile = (param) => { | ||
181 | + let fileObj = param.file | ||
182 | + let params = { | ||
183 | + file: fileObj, | ||
184 | + } | ||
185 | + // 上传文件 | ||
186 | + proxy.$http.uploadFile("/api-web/license/uploadZip", params, function (res) { | ||
187 | + if (res && res.success) { | ||
188 | + proxy.$global.showMsg("上传成功!"); | ||
189 | + getDataList(); | ||
190 | + } | ||
191 | + }) | ||
192 | + } | ||
193 | + | ||
194 | + // 挂载完 | ||
195 | + Vue.onMounted(() => { | ||
196 | + getLicenseColumn(); | ||
197 | + getDataList(); | ||
198 | + }) | ||
199 | + | ||
200 | + | ||
201 | + return { | ||
202 | + isExport, | ||
203 | + getFile, | ||
204 | + licenseCateData, | ||
205 | + getLicenseColumn, | ||
206 | + cateColumn, | ||
207 | + splitDetail, | ||
208 | + height, | ||
209 | + tableData, | ||
210 | + getDataList, | ||
211 | + } | ||
212 | + } | ||
213 | + | ||
214 | +} |
@@ -192,7 +192,13 @@ const routes = [{ | @@ -192,7 +192,13 @@ const routes = [{ | ||
192 | path: '/machineRoomRes', | 192 | path: '/machineRoomRes', |
193 | name: 'machineRoomRes', | 193 | name: 'machineRoomRes', |
194 | component: () => myImport('views/machineRoomRes/index') | 194 | component: () => myImport('views/machineRoomRes/index') |
195 | - } | 195 | + }, |
196 | + //license | ||
197 | + { | ||
198 | + path: '/vue3/license', | ||
199 | + name: 'license', | ||
200 | + component: () => myImport('views/license/index') | ||
201 | + }, | ||
196 | ]; | 202 | ]; |
197 | 203 | ||
198 | // hash模式: createWebHashHistory | 204 | // hash模式: createWebHashHistory |
-
Please register or login to post a comment