diff --git a/src/assets/css/common/table-common.scss b/src/assets/css/common/table-common.scss index ed0e4edf..027d7fd1 100644 --- a/src/assets/css/common/table-common.scss +++ b/src/assets/css/common/table-common.scss @@ -46,7 +46,7 @@ border: 1px solid #E6EAED; } - .top-tool-search.margin-r-20 { + .top-tool-search { .top-tool-btn { border-left: none; } @@ -178,6 +178,9 @@ .table-operation-items { display: flex; justify-content: center; + .table-operation-item--down { + margin-right: 16px; + } .table-operation-item { display: flex; height: 22px; diff --git a/src/assets/css/components/index.scss b/src/assets/css/components/index.scss index 0b02e46d..416dcbd8 100644 --- a/src/assets/css/components/index.scss +++ b/src/assets/css/components/index.scss @@ -41,6 +41,7 @@ @import './views/charts/chartAlarmInfo'; @import './views/chartHeader'; @import './views/charts/chartMap'; +@import './views/report/builtinReport'; //@import '../chart'; diff --git a/src/assets/css/components/views/report/builtinReport.scss b/src/assets/css/components/views/report/builtinReport.scss new file mode 100644 index 00000000..b33b9e74 --- /dev/null +++ b/src/assets/css/components/views/report/builtinReport.scss @@ -0,0 +1,92 @@ +.cn-builtin { + background: #fff; + margin: 10px; + height: calc(100% - 20px) !important; + display: flex; + flex-direction: row; + .cn-builtin-left { + width: 288px; + height: 100%; + border-right: 1px solid #E7EAED; + .cn-builtin-left-title { + padding: 28px 0 26px 13px; + font-size: 16px; + color: #333333; + letter-spacing: 0; + } + .cn-builtin-left-menu { + width: 250px; + height: 46px; + margin: auto; + font-size: 14px; + color: #333333; + letter-spacing: 0; + line-height: 46px; + padding-left: 15px; + cursor: pointer; + } + .cn-builtin-left-menu.cn-active { + background: #F4FAFF; + border-radius: 2px; + color: #0091FF; + } + } + .cn-builtin-right { + flex: 1; + .el-table__header th:first-of-type .el-checkbox:last-of-type { + border-left: none; + display: none; + } + .table-operation-all { + width: 300px; + position: absolute; + bottom: 17px; + z-index: 2; + left: 20px; + height: 22px; + display: flex; + .el-checkbox { + width: 14px; + height: 14px; + padding: 0; + .el-checkbox__input,.el-checkbox__inner { + width: 100%; + height: 100%; + min-width: unset; + } + } + .table-operation-all-span { + span:nth-of-type(1) { + margin: 0 10px; + font-size: 14px; + color: #666666; + letter-spacing: 0; + font-weight: 400; + } + span:nth-of-type(2) { + font-size: 12px; + color: #FFFFFF; + font-weight: 500; + height: 24px; + background: #D7D7D7; + border-radius: 2px; + padding: 3px 8px; + line-height: 16px; + cursor: pointer; + margin-top: 2px; + } + span:nth-of-type(2).table-operation-all-checkbox { + background: #0091ff; + } + } + } + .table-operation-items { + .table-operation-item--down { + cursor: pointer; + } + .table-operation-item--preview { + cursor: pointer; + } + } + } +} diff --git a/src/assets/css/font/iconfont.css b/src/assets/css/font/iconfont.css index f8a3d566..be29b1c9 100644 --- a/src/assets/css/font/iconfont.css +++ b/src/assets/css/font/iconfont.css @@ -1,8 +1,8 @@ @font-face { font-family: "cn-icon"; /* Project id 2614877 */ - src: url('iconfont.woff2?t=1648624431165') format('woff2'), - url('iconfont.woff?t=1648624431165') format('woff'), - url('iconfont.ttf?t=1648624431165') format('truetype'); + src: url('iconfont.woff2?t=1649728125883') format('woff2'), + url('iconfont.woff?t=1649728125883') format('woff'), + url('iconfont.ttf?t=1649728125883') format('truetype'); } .cn-icon { @@ -13,6 +13,22 @@ -moz-osx-font-smoothing: grayscale; } +.cn-icon-report:before { + content: "\e76f"; +} + +.cn-icon-shezhi:before { + content: "\e76c"; +} + +.cn-icon-preview:before { + content: "\e76d"; +} + +.cn-icon-download2:before { + content: "\e76e"; +} + .cn-icon-requests:before { content: "\e76a"; } diff --git a/src/assets/css/font/iconfont.js b/src/assets/css/font/iconfont.js index 2dd2a9e1..36218dae 100644 --- a/src/assets/css/font/iconfont.js +++ b/src/assets/css/font/iconfont.js @@ -1 +1 @@ -!(function (c) { let a; let l; let h; let o; let i; let m = ''; var v = (v = document.getElementsByTagName('script'))[v.length - 1].getAttribute('data-injectcss'); const z = function (c, a) { a.parentNode.insertBefore(c, a) }; if (v && !c.__iconfont__svg__cssinject__) { c.__iconfont__svg__cssinject__ = !0; try { document.write('') } catch (c) { console && console.log(c) } } function t () { i || (i = !0, h()) } function n () { try { o.documentElement.doScroll('left') } catch (c) { return void setTimeout(n, 50) }t() }a = function () { let c; let a = document.createElement('div'); a.innerHTML = m, m = null, (a = a.getElementsByTagName('svg')[0]) && (a.setAttribute('aria-hidden', 'true'), a.style.position = 'absolute', a.style.width = 0, a.style.height = 0, a.style.overflow = 'hidden', a = a, (c = document.body).firstChild ? z(a, c.firstChild) : c.appendChild(a)) }, document.addEventListener ? ~['complete', 'loaded', 'interactive'].indexOf(document.readyState) ? setTimeout(a, 0) : (l = function () { document.removeEventListener('DOMContentLoaded', l, !1), a() }, document.addEventListener('DOMContentLoaded', l, !1)) : document.attachEvent && (h = a, o = c.document, i = !1, n(), o.onreadystatechange = function () { o.readyState == 'complete' && (o.onreadystatechange = null, t()) }) }(window)) +!function(c){var a,l,h,o,i,m='',z=(z=document.getElementsByTagName("script"))[z.length-1].getAttribute("data-injectcss"),v=function(c,a){a.parentNode.insertBefore(c,a)};if(z&&!c.__iconfont__svg__cssinject__){c.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(c){console&&console.log(c)}}function t(){i||(i=!0,h())}function n(){try{o.documentElement.doScroll("left")}catch(c){return void setTimeout(n,50)}t()}a=function(){var c,a=document.createElement("div");a.innerHTML=m,m=null,(a=a.getElementsByTagName("svg")[0])&&(a.setAttribute("aria-hidden","true"),a.style.position="absolute",a.style.width=0,a.style.height=0,a.style.overflow="hidden",a=a,(c=document.body).firstChild?v(a,c.firstChild):c.appendChild(a))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(a,0):(l=function(){document.removeEventListener("DOMContentLoaded",l,!1),a()},document.addEventListener("DOMContentLoaded",l,!1)):document.attachEvent&&(h=a,o=c.document,i=!1,n(),o.onreadystatechange=function(){"complete"==o.readyState&&(o.onreadystatechange=null,t())})}(window); \ No newline at end of file diff --git a/src/assets/css/font/iconfont.woff b/src/assets/css/font/iconfont.woff index 43416827..781f8eab 100644 Binary files a/src/assets/css/font/iconfont.woff and b/src/assets/css/font/iconfont.woff differ diff --git a/src/assets/css/font/iconfont.woff2 b/src/assets/css/font/iconfont.woff2 index 07b5446e..2bd641ea 100644 Binary files a/src/assets/css/font/iconfont.woff2 and b/src/assets/css/font/iconfont.woff2 differ diff --git a/src/components/common/Pagination.vue b/src/components/common/Pagination.vue index 99b0ec7e..3451192b 100644 --- a/src/components/common/Pagination.vue +++ b/src/components/common/Pagination.vue @@ -156,6 +156,15 @@ export default { deep: true, handler (n, o) { } + }, + tableData: { + immediate: true, + deep: true, + handler (n, o) { + if (n) { + this.checkbox = n + } + } } } } diff --git a/src/components/table/CnDataList.vue b/src/components/table/CnDataList.vue index db4ece5c..2d8ee620 100644 --- a/src/components/table/CnDataList.vue +++ b/src/components/table/CnDataList.vue @@ -11,7 +11,7 @@
-
+
@@ -69,6 +69,9 @@ export default { tableId: { type: String }, + builtinId: { + type: Number + }, tableTitle: { type: Array }, @@ -95,7 +98,11 @@ export default { this.$emit('update:customTableTitle', custom) }, onsearch () { - this.$emit('search', this.keyWord) + const params = { + q: this.keyWord, + id: this.builtinId + } + this.$emit('search', params) } }, watch: { diff --git a/src/components/table/report/builtinReportTable.vue b/src/components/table/report/builtinReportTable.vue new file mode 100644 index 00000000..c4a5134b --- /dev/null +++ b/src/components/table/report/builtinReportTable.vue @@ -0,0 +1,155 @@ + + + diff --git a/src/mixins/data-list.js b/src/mixins/data-list.js index 079e1288..2ba03260 100644 --- a/src/mixins/data-list.js +++ b/src/mixins/data-list.js @@ -55,6 +55,14 @@ export default { this.copy(row) break } + case 'download': { + this.download(row) + break + } + case 'preview': { + this.preview(row) + break + } default: break } @@ -137,6 +145,40 @@ export default { this.object = { ...u, name: 'Copy from ' + u.name, id: '' } this.rightBox.show = true }, + download (u) { + get('/report/job/downloadPdf', { id: u.id }).then(data => { + this.downloadAgentFlag = false + let fileName = 'confBuiltin' + const disposition = data.headers['content-disposition'] + if (disposition) { + fileName = disposition.split(';')[1].split('filename=')[1] + } + // 由于ie不支持download属性，故需要做兼容判断 + if (navigator.appVersion.toString().indexOf('.NET') > 0) { + // ie独有的msSaveBlob属性，data.data为Blob文件流 + window.navigator.msSaveBlob(data.data, fileName) + } else { + // 以下流程即为文章开始的下载流程 + const url = window.URL.createObjectURL(data.data) + const link = document.createElement('a') + link.style.display = 'none' + link.href = url + link.download = fileName + document.body.appendChild(link) + link.click() + window.URL.revokeObjectURL(link.href) + } + }).catch(() => { + this.downloadAgentFlag = false + }) + }, + preview (u) { + get('/report/job/view', { id: u.id }).then(res => { + if (res.code === 200) { + console.log(res) + } + }) + }, esc () { this.rightBox.show = false }, @@ -151,7 +193,7 @@ export default { }, search (params) { this.pageObj.pageNo = 1 - this.getTableData({ q: params }) + this.getTableData(params) } }, watch: { diff --git a/src/router/index.js b/src/router/index.js index b385c302..9a6bdb72 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -30,6 +30,10 @@ const routes = [ path: '/i18n', component: () => import('@/views/settings/I18n') }, + { + path: '/report/builtIn', + component: () => import('@/views/report/builtinReport') + }, { path: '/operationLog', component: () => import('@/views/settings/OperationLog') diff --git a/src/utils/api.js b/src/utils/api.js index 41c797c5..92fe9a68 100644 --- a/src/utils/api.js +++ b/src/utils/api.js @@ -18,6 +18,8 @@ export const api = { galaxyProxy: '/galaxy/setting', operationLog: '/sys/log', chartList: '/visual/chart/list', + // 报告相关 + builtinReport: '/report/job', // 业务 panel: '/visual/panel', chart: '/visual/chart', diff --git a/src/utils/constants.js b/src/utils/constants.js index d118344c..5cd6ab72 100644 --- a/src/utils/constants.js +++ b/src/utils/constants.js @@ -30,7 +30,8 @@ export const fromRoute = { user: 'user', galaxyProxy: 'galaxyProxy', chart: 'chart', - cryptocurrency: 'cryptocurrency' + cryptocurrency: 'cryptocurrency', + builtinReport: 'builtinReport' } /* panel类别和名称之间的映射 */ diff --git a/src/views/report/builtinReport.vue b/src/views/report/builtinReport.vue new file mode 100644 index 00000000..edb0a1ef --- /dev/null +++ b/src/views/report/builtinReport.vue @@ -0,0 +1,97 @@ + + +