diff --git a/package.json b/package.json index f5fa2a2c..03664fb9 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,7 @@ "lodash": "^4.17.21", "moment-timezone": "^0.5.33", "node-sass": "^4.14.1", + "postcss-plugin-px2rem": "^0.8.1", "postcss-px2rem-exclude": "0.0.6", "sass-loader": "^8.0.2", "sass-resources-loader": "^2.2.1", diff --git a/postcss.config.js b/postcss.config.js index f2c5dd71..dc245384 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -1,9 +1,11 @@ module.exports = { plugins: { - autoprefixer: {} - /* 'postcss-px2rem-exclude': { - remUnit: 16, - exclude: /node_modules/i - } */ + autoprefixer: {}, + 'postcss-plugin-px2rem': { + rootValue: 16, + exclude: /node_modules/i, + minPixelValue: 3, + selectorBlackList: ['.html', 'iconfont', '.ttf', '.css'] + } } } diff --git a/public/index.html b/public/index.html index 00e4bce2..8032a72d 100644 --- a/public/index.html +++ b/public/index.html @@ -14,15 +14,39 @@
diff --git a/src/assets/css/components/views/charts/ChartOneSituationStatistics.scss b/src/assets/css/components/views/charts/ChartOneSituationStatistics.scss index 427fe2c7..a5c7ca7f 100644 --- a/src/assets/css/components/views/charts/ChartOneSituationStatistics.scss +++ b/src/assets/css/components/views/charts/ChartOneSituationStatistics.scss @@ -5,10 +5,12 @@ align-items: center; margin-left: 33px; height: 100%; - .box__progress{ + .box__progress { display: block; - width: 76px; - height: 76px; + .el-progress-circle { + height: 80px !important; + width: 80px !important; + } .el-progress__text span{ font-size: 16px; } @@ -26,4 +28,4 @@ } } } -} \ No newline at end of file +} diff --git a/src/assets/css/components/views/charts/chartEchartWithTable.scss b/src/assets/css/components/views/charts/chartEchartWithTable.scss index 49fca417..c9c1cd5a 100644 --- a/src/assets/css/components/views/charts/chartEchartWithTable.scss +++ b/src/assets/css/components/views/charts/chartEchartWithTable.scss @@ -10,7 +10,6 @@ .cn-chart__body { flex: auto; display: flex; - overflow: hidden auto; .el-table { padding: 0 10px; @@ -37,16 +36,19 @@ height: calc(100% - 36px) !important; }*/ } - .cn-chart__body.pie-with-table { - flex-basis: 40%; - } + //.cn-chart__body.pie-with-table { + // flex-basis: 60%; + //} .cn-chart__footer.pie-with-table { - flex-basis: 60%; padding: 10px 30px 30px; + overflow: auto; + .pie-table .el-table__body-wrapper { + height: calc(100% - 40px) !important; + } } } .pie-table { - font-size: 14px; + font-size: 12px; color: #333333; font-weight: 500; diff --git a/src/assets/css/components/views/charts/chartSingleValue.scss b/src/assets/css/components/views/charts/chartSingleValue.scss index 6c2bf3e3..81cfe314 100644 --- a/src/assets/css/components/views/charts/chartSingleValue.scss +++ b/src/assets/css/components/views/charts/chartSingleValue.scss @@ -44,14 +44,14 @@ display: flex; align-items: center; justify-content: center; - flex: 0 0 40%; + flex: 0 0 100px; } .single-value__icon { display: flex; justify-content: center; - width: 72px; - height: 72px; + width: 56px; + height: 56px; background-color: $--chart-single-value-icon-background-color; border-radius: 50%; @@ -66,12 +66,12 @@ .single-value__content { display: flex; flex-direction: column; - max-width: 60%; + width: 200px; padding-right: 10px; .content__data { - padding-bottom: 7%; - font-size: 20px; + padding-bottom: 10px; + font-size: 18px; color: #333333; font-weight: bold; } @@ -80,7 +80,7 @@ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; - font-size: 16px; + font-size: 14px; color: #666666; } @@ -105,10 +105,11 @@ justify-content: space-around; align-items: center; height: 100%; - width: 100%; + width: 90%; + margin: auto; .single-value-icon__box { - flex: 0 0 80px; + flex: 0 0 74px; } .single-value__icon { @@ -249,7 +250,7 @@ display: flex; align-items: center; height: 25%; - font-size: 24px; + font-size: 18px; color: #333333; font-weight: bold; } @@ -572,16 +573,15 @@ display: flex; align-items: flex-start; justify-content: right; - margin-right:25px; + margin: 0 22px 22px 0; flex: 0 0 80; - margin-bottom: 25px; } .single-value__icon { display: flex; justify-content: center; - width: 70px; - height: 70px; + width: 60px; + height: 60px; background-color: $--chart-single-value-icon-background-color; border-radius: 50%; @@ -601,7 +601,7 @@ margin-left:25px; .content__data { - margin-bottom: 7%; + margin-bottom: 5%; font-size: 22px; color: #333333; font-weight: bold; diff --git a/src/assets/css/components/views/charts/chartTable.scss b/src/assets/css/components/views/charts/chartTable.scss index 583e9159..62591375 100644 --- a/src/assets/css/components/views/charts/chartTable.scss +++ b/src/assets/css/components/views/charts/chartTable.scss @@ -13,6 +13,7 @@ .el-table { padding: 0 10px; + font-size: 14px; .el-table__body-wrapper.is-scrolling-none { height: 100%; overflow-y: auto; diff --git a/src/assets/css/components/views/charts/panel.scss b/src/assets/css/components/views/charts/panel.scss index 1d1f4802..1b8ea2b5 100644 --- a/src/assets/css/components/views/charts/panel.scss +++ b/src/assets/css/components/views/charts/panel.scss @@ -29,9 +29,8 @@ display: flex; justify-content:space-between; align-items:center; - padding: 10px 20px 10px 18px; + padding: 0 18px; flex: 0 0 40px; - font-size: 16px; color: $--color-text-primary; transition: all 0.2s; @@ -170,7 +169,8 @@ } .option__select { .el-input__inner { - width: 80px; + width: 92px; + text-align: center; padding-right: 20px; border: none; height: 100%; @@ -335,6 +335,18 @@ &>.el-tabs__header { margin-bottom: 10px; } + .el-tabs__nav.is-top { + .el-tabs__active-bar { + display: none; + } + .el-tabs__item.is-top { + padding: 0; + margin: 0 13px; + } + .el-tabs__item.is-top.is-active { + border-bottom: 2px solid #0091ff; + } + } &>.el-tabs__content { height: calc(100% - 40px); .el-tab-pane { diff --git a/src/assets/css/components/views/entityExplorer/entity-explorer.scss b/src/assets/css/components/views/entityExplorer/entity-explorer.scss index d5819f4b..9aabcd47 100644 --- a/src/assets/css/components/views/entityExplorer/entity-explorer.scss +++ b/src/assets/css/components/views/entityExplorer/entity-explorer.scss @@ -48,7 +48,7 @@ } .explorer-container { display: flex; - overflow: hidden auto; + overflow: hidden; height: calc(100% - 120px); position: relative; } diff --git a/src/components/table/settings/ChartTable.vue b/src/components/table/settings/ChartTable.vue index a528cc08..ccfc3974 100644 --- a/src/components/table/settings/ChartTable.vue +++ b/src/components/table/settings/ChartTable.vue @@ -124,7 +124,7 @@ export default { label: 'ID', prop: 'id', show: true, - width: 80, + width: 110, sortable: 'custom' }, { label: this.$t('config.chart.name'), diff --git a/src/components/table/settings/GalaxyProxyTable.vue b/src/components/table/settings/GalaxyProxyTable.vue index d8c1ce5b..508a9306 100644 --- a/src/components/table/settings/GalaxyProxyTable.vue +++ b/src/components/table/settings/GalaxyProxyTable.vue @@ -124,7 +124,7 @@ export default { label: 'ID', prop: 'id', show: true, - width: 80, + width: 100, sortable: 'custom' }, { label: this.$t('overall.name'), diff --git a/src/components/table/settings/I18nTable.vue b/src/components/table/settings/I18nTable.vue index a4d6377b..2faee604 100644 --- a/src/components/table/settings/I18nTable.vue +++ b/src/components/table/settings/I18nTable.vue @@ -76,7 +76,7 @@ export default { label: 'ID', prop: 'id', show: true, - width: 80, + width: 100, sortable: 'custom' }, { diff --git a/src/components/table/settings/OperationLogTable.vue b/src/components/table/settings/OperationLogTable.vue index ced83c1e..f16b07b1 100644 --- a/src/components/table/settings/OperationLogTable.vue +++ b/src/components/table/settings/OperationLogTable.vue @@ -75,7 +75,7 @@ export default { label: this.$t('config.operationlog.id'), prop: 'id', show: true, - width: 80 + width: 100 }, { label: this.$t('config.operationlog.username'), prop: 'username', diff --git a/src/components/table/settings/RoleTable.vue b/src/components/table/settings/RoleTable.vue index ccde20b2..27cd5c95 100644 --- a/src/components/table/settings/RoleTable.vue +++ b/src/components/table/settings/RoleTable.vue @@ -85,7 +85,7 @@ export default { label: 'ID', prop: 'id', show: true, - width: 80, + width: 100, sortable: 'custom' }, { label: this.$t('config.roles.name'), diff --git a/src/components/table/settings/UserTable.vue b/src/components/table/settings/UserTable.vue index 5cd82599..960fcdcf 100644 --- a/src/components/table/settings/UserTable.vue +++ b/src/components/table/settings/UserTable.vue @@ -103,7 +103,7 @@ export default { label: 'ID', prop: 'id', show: true, - width: 80, + width: 100, sortable: 'custom' }, { label: this.$t('config.user.name'), diff --git a/src/main.js b/src/main.js index d519ede5..e7fe88c2 100644 --- a/src/main.js +++ b/src/main.js @@ -26,6 +26,8 @@ import TimeRefresh from '@/components/common/TimeRange/TimeRefresh' import PanelChartList from '@/views/charts/PanelChartList' const emitter = new bus() +import 'lib-flexible' + const _ = require('lodash') // lodash工具 /* dayjs.extend(utc) diff --git a/src/views/charts/PanelChartList.vue b/src/views/charts/PanelChartList.vue index 5d110976..919a7b7d 100644 --- a/src/views/charts/PanelChartList.vue +++ b/src/views/charts/PanelChartList.vue @@ -81,6 +81,7 @@ import _ from 'lodash' import { useRouter } from 'vue-router' import DnsScreen from '@/views/charts/wholeScreenScroll/DnsScreen' import { wholeScreenRouterMapping } from '@/utils/constants' +import { ref } from 'vue' export default { name: 'PanelChartList', @@ -102,7 +103,6 @@ export default { return { gridLayoutLoading: false, gridLayoutShow: false, - rowHeight: 40, copyDataList: [], // 所有的图表 normalCopyDataList: [], // 非整屏滚动的图表 noData: false, // no data @@ -183,9 +183,29 @@ export default { return item.y >= -1 }) }, 100) + }, + chartHeightData (e) { + if (e.currentTarget.innerWidth < 1280) { + this.rowHeight = 25 + } else if (e.currentTarget.innerWidth >= 1280 && e.currentTarget.innerWidth <= 1440) { + this.rowHeight = 25 + } else if (e.currentTarget.innerWidth >= 1440 && e.currentTarget.innerWidth < 1920) { + this.rowHeight = 32.5 + } else if (e.currentTarget.innerWidth >= 1920 && e.currentTarget.innerWidth <= 2048) { + this.rowHeight = 40 + } else if (e.currentTarget.innerWidth >= 2048 && e.currentTarget.innerWidth <= 2560) { + this.rowHeight = 55 + } else if (e.currentTarget.innerWidth > 2560) { + this.rowHeight = 55 + } } }, - + mounted () { + window.addEventListener('resize', this.$_.debounce(this.chartHeightData, 100)) + }, + beforeUnmount () { + window.removeEventListener('resize', this.chartHeightData) + }, computed: { anchorPoint () { return function (chart) { @@ -199,7 +219,23 @@ export default { }, setup (props) { const { currentRoute } = useRouter() + const htmlHeight = document.getElementsByTagName('html')[0].clientWidth + const rowHeight = ref(0) + if (htmlHeight < 1280) { + rowHeight.value = 25 + } else if (htmlHeight >= 1280 && htmlHeight <= 1440) { + rowHeight.value = 25 + } else if (htmlHeight >= 1440 && htmlHeight < 1920) { + rowHeight.value = 32.5 + } else if (htmlHeight >= 1920 && htmlHeight <= 2048) { + rowHeight.value = 40 + } else if (htmlHeight >= 2048 && htmlHeight <= 2560) { + rowHeight.value = 55 + } else if (htmlHeight > 2560) { + rowHeight.value = 55 + } return { + rowHeight, currentPath: currentRoute.value.path } }, diff --git a/src/views/charts/charts/ChartEchartWithStatistics.vue b/src/views/charts/charts/ChartEchartWithStatistics.vue index d064f9be..2648085e 100644 --- a/src/views/charts/charts/ChartEchartWithStatistics.vue +++ b/src/views/charts/charts/ChartEchartWithStatistics.vue @@ -1,5 +1,5 @@ diff --git a/src/views/entityExplorer/entityList/detailOverview/entityDetailMixin.js b/src/views/entityExplorer/entityList/detailOverview/entityDetailMixin.js index c270923c..231e7318 100644 --- a/src/views/entityExplorer/entityList/detailOverview/entityDetailMixin.js +++ b/src/views/entityExplorer/entityList/detailOverview/entityDetailMixin.js @@ -4,6 +4,7 @@ import * as echarts from 'echarts' import { entityListLineOption } from '@/views/charts/charts/chart-options' import { riskLevelMapping, unitTypes } from '@/utils/constants' import unitConvert from '@/utils/unit-convert' +import { shallowRef } from 'vue' export default { props: { @@ -26,7 +27,8 @@ export default { receivedChart: null }, chartOption: null, - queryParams: {} + queryParams: {}, + echartsArray: [] } }, computed: { @@ -121,6 +123,7 @@ export default { } } }) + this.echartsArray.push(shallowRef(this.sentChart), shallowRef(this.receivedChart)) this.sentChart.setOption(this.chartOptionSent) this.receivedChart.setOption(this.chartOptionReceived) } @@ -312,6 +315,7 @@ export default { ] } }) + this.echartsArray.push(shallowRef(this.detectionChart)) this.detectionChart.setOption(this.chartDetectionQueryRate) } }) @@ -333,6 +337,10 @@ export default { }, 200) }) } + }, + + resize () { + this.echartsArray.forEach(item => { item.value.resize() }) } }, setup () { @@ -342,7 +350,11 @@ export default { } }, mounted () { + window.addEventListener('resize', this.$_.debounce(this.resize, 200)) this.chartOption = _.cloneDeep(entityListLineOption) setTimeout(() => { this.queryEntityDetail() }) + }, + beforeUnmount () { + window.removeEventListener('resize', this.resize) } } diff --git a/src/views/entityExplorer/entityList/entityListMixin.js b/src/views/entityExplorer/entityList/entityListMixin.js index 6e3798d7..3deb6235 100644 --- a/src/views/entityExplorer/entityList/entityListMixin.js +++ b/src/views/entityExplorer/entityList/entityListMixin.js @@ -6,6 +6,7 @@ import { entityListLineOption } from '@/views/charts/charts/chart-options' import { riskLevelMapping, unitTypes } from '@/utils/constants' import { getSecond } from '@/utils/date-util' import unitConvert from '@/utils/unit-convert' +import { shallowRef } from 'vue' export default { props: { @@ -19,7 +20,8 @@ export default { trafficUrl: '', chartOption: null, unitTypes, - unitConvert + unitConvert, + echartsArray: [] } }, computed: { @@ -251,6 +253,7 @@ export default { }) if (this.listMode === 'block') { const chart = echarts.init(document.getElementById(`entityListChart${this.entityName}${this.listMode}`)) + this.echartsArray.push(shallowRef(chart)) chart.setOption({ ...this.chartOption, series: [sentSeries, receivedSeries] @@ -258,6 +261,7 @@ export default { } else if (this.listMode === 'list') { const sentChart = echarts.init(document.getElementById(`entityDetailSend${this.entityName}${this.listMode}`)) const receivedChart = echarts.init(document.getElementById(`entityDetailReceived${this.entityName}${this.listMode}`)) + this.echartsArray.push(shallowRef(sentChart), shallowRef(receivedChart)) sentChart.setOption({ ...this.chartOption, series: [sentSeries] @@ -278,6 +282,9 @@ export default { } catch (e) {} }, 250) }) + }, + resize () { + this.echartsArray.forEach(item => { item.value.resize() }) } }, watch: { @@ -306,6 +313,7 @@ export default { } }, mounted () { + window.addEventListener('resize', this.$_.debounce(this.resize, 200)) this.chartOption = _.cloneDeep(entityListLineOption) this.entityData = _.cloneDeep(this.entity) setTimeout(() => { @@ -313,5 +321,8 @@ export default { this.queryEntityDetailTraffic() this.queryPerformance() }) + }, + beforeUnmount () { + window.removeEventListener('resize', this.resize) } }