diff --git a/nezha-fronted/src/components/charts/chart-asset-info.scss b/nezha-fronted/src/components/charts/chart-asset-info.scss new file mode 100644 index 000000000..849eb50ae --- /dev/null +++ b/nezha-fronted/src/components/charts/chart-asset-info.scss @@ -0,0 +1,225 @@ +/* ---------edit-chart-move--------- */ +.clearfix:after{ + display: block; + content: ""; + clear: both; +} +.clearfix{ + margin-bottom: 10px; +} +.loading-font{ + color:#232f3e !important; +} +.dialog-tool { + margin-right: 40px; +} +.hidden{ + visibility: hidden; +} +.visible{ + visibility: visible; +} + +.chart-asset-info { + width: 100%; + height: 100%;//calc(100% - 40px); + position: relative; + background: #FFF; + border: 1px solid #d8dce1; + padding: 0px 0px; + margin-bottom: 10px; + padding-bottom: 3px; + .chart-info-container{ + padding-left: 8px; + padding-right: 8px; + display:table; + text-align:center; + width:calc(100% - 16px); + .single-stat-content{ + text-align:center; + vertical-align: middle; + display:table-cell; + font-size:30px; + } + } + .vue-resizable-handle { + position: absolute; + width: 20px; + height: 20px; + bottom: 0; + right: 0; + cursor: se-resize; + box-sizing: border-box; + } + .vue-resizable-handle:after { + border-right: 2px solid #555; + border-bottom: 2px solid #555; + content: ""; + position: absolute; + right: 3px; + bottom: 3px; + width: 5px; + height: 5px; + box-sizing: inherit; + } + .chartTitle:hover { + background-color:#d8dce1; + } + .dragTitle{ + background-color:#d8dce1; + } + .chartTitle { + text-align: center; + width: 100%; + line-height: 28px; + .nz-chart-top{ + width:100%; + } + .el-dropdown-link { + cursor: move; + } + .el-icon-arrow-down { + font-size: 12px; + } + .chart-title { + font-weight: bold; + font-size: 18px; + line-height: 26px; + color: #333; + margin: -3px 0 3px 3px; + display:flex; + justify-content:center; + align-items:center; + .chart-title-text{ + max-width:calc(100% - 20px); + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + cursor: pointer; + } + .chart-title-icon{ + display: inline-block; + cursor: pointer; + } + } + } + .edit:after{ + display: block; + content: ""; + clear: both; + } + + .button-panel-height{ + height:26px; + } + .button-panel-height button{ + height:26px; + } + .edit { + position: absolute; + right: 20px; + top: 17px; + z-index: 10; + + } + .chart-select { + position: absolute; + left: 40px; + top: 25px; + z-index: 10; + font-size: 14px; + .chart-select-btn { + margin-right: 10px; + cursor: pointer; + &.active { + color: #5aacff; + } + } + } + /*没有数据显示*/ + .null { + position: absolute; + top: 50%; + width: 100%; + text-align: center; + font-size: 24px; + font-weight: 600; + } + .element-bottom-border { + border-bottom: 1px solid #dfe7f2; + margin-bottom:-20px; + } + .element-top-border { + padding-top: 10px; + border-top: 1px solid #dfe7f2; + margin-top:-25px; + } +} + +.asset-info-content{ + width: 100%; + height: 100%; + .basic-container,.feature-container{ + width: 100%; + //height: calc(50% - 4px); + box-sizing: border-box; + } + .basic-container .basic-title,.feature-container .feature-title{ + height: 20px; + width: 100%; + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap:nowrap; + padding: 0 5px 0 5px; + box-sizing: border-box; + } + .basic-container .basic-title:hover,.feature-container .feature-title:hover{ + border: 1px solid #C0C4CC; + } + + .basic-container .basic-content,.feature-container .feature-content{ + height: calc(100% - 22px); + transition: all 2s; + } + .shrink{ + height: 0px; + display: none; + } + .basic-container{ + margin-bottom: 10px; + } + .feature-container{ + + } + .content-item{ + width: 100%; + white-space:nowrap; + overflow:hidden; + text-overflow:ellipsis; + position: relative; + .content-item-key{ + display: inline-block; + //height: 25px; + //line-height: 25px; + position: absolute; + top: calc(50% - 12px); + z-index: 2001; + left: 0; + width: 30%; + text-align: right; + } + .content-item-value{ + display: inline-block; + //height: 25px; + //line-height: 25px; + float: right; + width: 68%; + text-align: center; + } + + } + .content-item:hover{ + background-color: #F2F2F2; + } +} diff --git a/nezha-fronted/src/components/charts/chart-asset-info.vue b/nezha-fronted/src/components/charts/chart-asset-info.vue new file mode 100644 index 000000000..146ba6962 --- /dev/null +++ b/nezha-fronted/src/components/charts/chart-asset-info.vue @@ -0,0 +1,428 @@ + + + + + + {{errorContent}} + + + + + + + {{data.title}} + + + + + + + + + {{$t('asset.basicTitle')}} + + + + + + {{replaceSplit(key)}} + {{value}} + + + + + + + {{$t('asset.featureTitle')}} + + + + + {{replaceSplit(key)}} + + {{value}} + + + + {{item}} + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/nezha-fronted/src/components/charts/chart-list.vue b/nezha-fronted/src/components/charts/chart-list.vue index c5c9d720a..8680c3c12 100644 --- a/nezha-fronted/src/components/charts/chart-list.vue +++ b/nezha-fronted/src/components/charts/chart-list.vue @@ -128,6 +128,13 @@ :panel-id="filter.panelId" :chart-index="index" :editChartId="'editChartId' + item.id"> + + @@ -140,14 +147,17 @@ import lineChartBlock from './line-chart-block'; import chartTable from './chart-table'; import chartUrl from './chart-url'; import chartSingleStat from './chart-single-stat'; +import chartAssetInfo from './chart-asset-info' import draggable from 'vuedraggable' export default { name: 'chartList', props: { - isModel: {type: Boolean, default: false} + isModel: {type: Boolean, default: false}, + additionalInfo:{} }, components: { + chartAssetInfo, lineChartBlock, chartTable, chartUrl, @@ -816,9 +826,13 @@ export default { getChartData(chartInfo, pos, filterType) { const chartItem = chartInfo; const index = pos; // 指标 - const len = chartItem.elements.length; this.setSize(chartItem.span, index); // 设置该图表宽度 + if(chartItem.type === 'assetInfo'){ + this.getAssetInfoChartData(chartItem); + return; + } // 没有数据的设置提示信息暂无数据-针对每一个图 + const len = chartItem.elements.length; if (len === 0) { this.$nextTick(() => { if(this.$refs['editChart'+chartItem.id] && this.$refs['editChart'+chartItem.id].length>0){ @@ -1088,6 +1102,53 @@ export default { }); } }, + getAssetInfoChartData(chartInfo){ + this.$refs['editChart'+chartInfo.id][0].showLoad(chartInfo); + setTimeout(()=>{ + if(this.additionalInfo){ + let data={ + Basic:{ + sn:'assetInfo Test', + host:'192.168.40.42', + host1:'192.168.40.42', + host2:'192.168.40.42', + host3:'192.168.40.42', + host4:'192.168.40.42', + host5:'192.168.40.42', + host6:'192.168.40.42', + host7:'192.168.40.42', + host8:'192.168.40.42', + host9:'192.168.40.42', + host10:'192.168.40.42', + cpuNum:'8', + memery:'12GB', + memery$_$free:'3GB' + }, + Feature:{ + CPU:"Intel E500", + Memory:"256GB", + NetworkInterface:["eth0","eth1"], + Disk:[{ + mount:"/", + total:"256GB", + free:"128GB", + usageRate:"50%" + }] + } + } + this.$refs['editChart'+chartInfo.id][0].setData(chartInfo, data, this.filter.panelId, this.filter); + } + },1000) + + // this.$get('/asset/info?id='+this.additionalInfo.id).then(response=>{ + // if(response.code == 200){ + // let data=response.data; + // this.$refs['editChart'+chartInfo.id][0].setData(chartInfo, data, this.filter.panelId, this.filter); + // }else{ + // this.$refs['editChart'+chartInfo.id][0].setData(chartInfo, {}, this.filter.panelId, this.filter,reponse.msg); + // } + // }) + }, // 设置图表的宽度 setSize(size, index) { this.$nextTick(() => { diff --git a/nezha-fronted/src/components/charts/chart-single-stat.vue b/nezha-fronted/src/components/charts/chart-single-stat.vue index a134b74ba..5891aa747 100644 --- a/nezha-fronted/src/components/charts/chart-single-stat.vue +++ b/nezha-fronted/src/components/charts/chart-single-stat.vue @@ -369,17 +369,6 @@ export default { } }); }, - // 全屏查看 - showAllScreen() { - this.dropdownMenuShow=false; - this.searchTime = []; - this.$set(this.searchTime, 0, this.oldSearchTime[0]); - this.$set(this.searchTime, 1, this.oldSearchTime[1]); - this.$refs.calendarPanel.setCustomTime(this.searchTime); - - this.seriesItemScreen = this.seriesItem; - this.screenModal = true; - }, // 设置数据, filter区分 setData(chartItem, seriesItem, panelId, filter,area,errorMsg) { if(errorMsg && errorMsg!==''){ diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/panelTab.vue b/nezha-fronted/src/components/common/bottomBox/tabs/panelTab.vue index f875657fa..0faaeb6ae 100644 --- a/nezha-fronted/src/components/common/bottomBox/tabs/panelTab.vue +++ b/nezha-fronted/src/components/common/bottomBox/tabs/panelTab.vue @@ -91,7 +91,7 @@ + ref="chartList" :is-model="from == 'model'" :additional-info="obj"> diff --git a/nezha-fronted/src/components/common/language/cn.js b/nezha-fronted/src/components/common/language/cn.js index f1f4b57cc..88224cf19 100644 --- a/nezha-fronted/src/components/common/language/cn.js +++ b/nezha-fronted/src/components/common/language/cn.js @@ -421,7 +421,9 @@ const cn = { reloginPasswordTip: "RELOGIN提示", userPwdIntroduce: "请指定用户名和密码提示以便TELNET登录过程可自动运行", reLoginPwdIntroduce: "请指定密码提示以便RELOGIN登录过程可自动运行", - exporter: "Exporter" + exporter: "Exporter", + basicTitle:'基础信息', + featureTitle:'特征' }, editAssetTab: { title: "新增资产", diff --git a/nezha-fronted/src/components/common/language/en.js b/nezha-fronted/src/components/common/language/en.js index 9b5e78c75..56886225e 100644 --- a/nezha-fronted/src/components/common/language/en.js +++ b/nezha-fronted/src/components/common/language/en.js @@ -445,6 +445,8 @@ const en = { clickToCover:'Cover',//'覆盖' sshKeyWasConfig:'SSH-KEY configured',//'SSH-KEY已配置' exporter:'Exporter', + basicTitle:'Basic info', + featureTitle:'Feature' }, editAssetTab:{ title:'New asset',//'新增资产' diff --git a/nezha-fronted/src/components/common/searchInput.vue b/nezha-fronted/src/components/common/searchInput.vue index acc48b903..29ae3e281 100644 --- a/nezha-fronted/src/components/common/searchInput.vue +++ b/nezha-fronted/src/components/common/searchInput.vue @@ -1081,7 +1081,6 @@ }, //点击遮罩层 zhezhao_click() { - console.log(111) if(this.input_sreach!=''){ if(!this.searchMsg.zheze_none){ if (this.input_sreach!='') {