diff --git a/.gitignore b/.gitignore index 4e74e95..ef594b3 100644 --- a/.gitignore +++ b/.gitignore @@ -1,6 +1,6 @@ .DS_Store node_modules -/screen-web +/scr-web # local env files diff --git a/package.json b/package.json index fe6e4e5..ecbce01 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "cmp-screen", + "name": "scr-web", "version": "5.6.0", "private": true, "scripts": { diff --git a/public/index.html b/public/index.html index b14538e..b18b558 100644 --- a/public/index.html +++ b/public/index.html @@ -1,22 +1,18 @@ + + + + + + 高性能数值模拟实验平台 + - - - - - - - <%= htmlWebpackPlugin.options.title %> - - - - +
- - - \ No newline at end of file + + diff --git a/public/static/img/logo.png b/public/static/img/logo.png new file mode 100644 index 0000000..40f2b5e Binary files /dev/null and b/public/static/img/logo.png differ diff --git a/public/static/img/shortcut.png b/public/static/img/shortcut.png deleted file mode 100644 index b540384..0000000 Binary files a/public/static/img/shortcut.png and /dev/null differ diff --git a/src/css/common.scss b/src/css/common.scss index 85a1136..de68ec9 100644 --- a/src/css/common.scss +++ b/src/css/common.scss @@ -1,15 +1,18 @@ html, body, #app { - margin: 0; - padding: 0; - width: 100%; - height: 100%; - font-size: 16px; - overflow: hidden !important; - font-family: Microsoft YaHei, Hiragino Sans GB; + margin: 0; + padding: 0; + width: 100%; + height: 100%; + font-size: 16px; + overflow: hidden !important; + font-family: Microsoft YaHei, Hiragino Sans GB; } .iconfont { - font-size: 13px; -} \ No newline at end of file + font-size: 13px; +} +a { + text-decoration: none; +} diff --git a/src/css/layouts.scss b/src/css/layouts.scss index 021d7b2..b109509 100644 --- a/src/css/layouts.scss +++ b/src/css/layouts.scss @@ -1,336 +1,335 @@ /*边距共有样式*/ .text-center { - text-align: center; + text-align: center; } .pull-right { - float: right; + float: right; } .pull-left { - float: left; + float: left; } .p-none { - padding: 0 !important; + padding: 0 !important; } .m-xxs { - margin: 2px 4px; + margin: 2px 4px; } .m-xs { - margin: 5px; + margin: 5px; } .m-sm { - margin: 10px; + margin: 10px; } .m { - margin: 15px; + margin: 15px; } .m-md { - margin: 20px; + margin: 20px; } .m-lg { - margin: 30px; + margin: 30px; } .m-xl { - margin: 50px; + margin: 50px; } .m-n { - margin: 0 !important; + margin: 0 !important; } .m-l-none { - margin-left: 0 !important; + margin-left: 0 !important; } .m-l-xs { - margin-left: 5px; + margin-left: 5px; } .m-l-sm { - margin-left: 10px; + margin-left: 10px; } .m-l { - margin-left: 15px; + margin-left: 15px; } .m-l-md { - margin-left: 20px; + margin-left: 20px; } .m-l-lg { - margin-left: 30px; + margin-left: 30px; } .m-l-xl { - margin-left: 40px; + margin-left: 40px; } .m-l-xxl { - margin-left: 50px; + margin-left: 50px; } .m-l-n-xxs { - margin-left: -1px; + margin-left: -1px; } .m-l-n-xs { - margin-left: -5px; + margin-left: -5px; } .m-l-n-sm { - margin-left: -10px; + margin-left: -10px; } .m-l-n { - margin-left: -15px; + margin-left: -15px; } .m-l-n-md { - margin-left: -20px; + margin-left: -20px; } .m-l-n-lg { - margin-left: -30px; + margin-left: -30px; } .m-l-n-xl { - margin-left: -40px; + margin-left: -40px; } .m-l-n-xxl { - margin-left: -50px; + margin-left: -50px; } .m-t-none { - margin-top: 0 !important; + margin-top: 0 !important; } .m-t-xxs { - margin-top: 1px; + margin-top: 1px; } .m-t-xs { - margin-top: 5px !important; + margin-top: 5px !important; } .m-t-sm { - margin-top: 10px !important; + margin-top: 10px !important; } .m-t { - margin-top: 15px; + margin-top: 15px; } .m-t-md { - margin-top: 20px; + margin-top: 20px; } .m-t-lg { - margin-top: 30px; + margin-top: 30px; } .m-t-xl { - margin-top: 40px; + margin-top: 40px; } .m-t-xxl { - margin-top: 50px; + margin-top: 50px; } .m-t-n-xxs { - margin-top: -1px; + margin-top: -1px; } .m-t-n-xs { - margin-top: -5px; + margin-top: -5px; } .m-t-n-7 { - margin-top: -7px; + margin-top: -7px; } .m-t-n-sm { - margin-top: -10px; + margin-top: -10px; } .m-t-n { - margin-top: -15px; + margin-top: -15px; } .m-t-n-md { - margin-top: -20px; + margin-top: -20px; } .m-t-n-lg { - margin-top: -30px; + margin-top: -30px; } .m-t-n-xl { - margin-top: -40px; + margin-top: -40px; } .m-t-n-xxl { - margin-top: -50px; + margin-top: -50px; } .m-t-n-xxxl { - margin-top: -60px; + margin-top: -60px; } .m-r-none { - margin-right: 0 !important; + margin-right: 0 !important; } .m-r-xxs { - margin-right: 1px; + margin-right: 1px; } .m-r-xs { - margin-right: 5px; + margin-right: 5px; } .m-r-sm { - margin-right: 10px; + margin-right: 10px; } .m-r { - margin-right: 15px !important; + margin-right: 15px !important; } .m-r-md { - margin-right: 20px; + margin-right: 20px; } .m-r-lg { - margin-right: 30px; + margin-right: 30px; } .m-r-xl { - margin-right: 40px; + margin-right: 40px; } .m-r-xxl { - margin-right: 50px; + margin-right: 50px; } .m-r-n-xxs { - margin-right: -1px; + margin-right: -1px; } .m-r-n-xs { - margin-right: -5px; + margin-right: -5px; } .m-r-n-sm { - margin-right: -10px; + margin-right: -10px; } .m-r-n { - margin-right: -15px; + margin-right: -15px; } .m-r-n-md { - margin-right: -20px; + margin-right: -20px; } .m-r-n-lg { - margin-right: -30px; + margin-right: -30px; } .m-r-n-xl { - margin-right: -40px; + margin-right: -40px; } .m-r-n-xxl { - margin-right: -50px; + margin-right: -50px; } .m-b-none { - margin-bottom: 0 !important; + margin-bottom: 0 !important; } .m-b-xxs { - margin-bottom: 1px; + margin-bottom: 1px; } .m-b-xs { - margin-bottom: 5px; + margin-bottom: 5px; } .m-b-sm { - margin-bottom: 10px !important; + margin-bottom: 10px !important; } .m-b { - margin-bottom: 15px !important; + margin-bottom: 15px !important; } .m-b-md { - margin-bottom: 20px; + margin-bottom: 20px; } .m-b-lg { - margin-bottom: 30px; + margin-bottom: 30px; } .m-b-xl { - margin-bottom: 40px; + margin-bottom: 40px; } .m-b-xxl { - margin-bottom: 50px; + margin-bottom: 50px; } .m-b-n-xxs { - margin-bottom: -1px; + margin-bottom: -1px; } .m-b-n-xs { - margin-bottom: -5px; + margin-bottom: -5px; } .m-b-n-sm { - margin-bottom: -10px; + margin-bottom: -10px; } .m-b-n { - margin-bottom: -15px; + margin-bottom: -15px; } .m-b-n-md { - margin-bottom: -20px; + margin-bottom: -20px; } .m-b-n-lg { - margin-bottom: -30px; + margin-bottom: -30px; } .m-b-n-xl { - margin-bottom: -40px; + margin-bottom: -40px; } .m-b-n-xxl { - margin-bottom: -50px; + margin-bottom: -50px; } - /*颜色共有样式*/ .btn-info { - color: #ffffff !important; - background-color: #497edf; - border-color: #497edf; + color: #ffffff !important; + background-color: #497edf; + border-color: #497edf; } .btn-info:hover, @@ -338,15 +337,15 @@ .btn-info:active, .btn-info.active, .open .dropdown-toggle.btn-info { - color: #ffffff !important; - background-color: #2059c1; - border-color: #2059c1; + color: #ffffff !important; + background-color: #2059c1; + border-color: #2059c1; } .btn-success { - color: #ffffff !important; - background-color: #27c24c; - border-color: #27c24c; + color: #ffffff !important; + background-color: #27c24c; + border-color: #27c24c; } .btn-success:hover, @@ -354,15 +353,15 @@ .btn-success:active, .btn-success.active, .open .dropdown-toggle.btn-success { - color: #ffffff !important; - background-color: #23ad44; - border-color: #20a03f; + color: #ffffff !important; + background-color: #23ad44; + border-color: #20a03f; } .btn-danger { - color: #ffffff !important; - background-color: #f05050; - border-color: #f05050; + color: #ffffff !important; + background-color: #f05050; + border-color: #f05050; } .btn-danger:hover, @@ -370,90 +369,94 @@ .btn-danger:active, .btn-danger.active, .open .dropdown-toggle.btn-danger { - color: #ffffff !important; - background-color: #ee3939; - border-color: #ed2a2a; + color: #ffffff !important; + background-color: #ee3939; + border-color: #ed2a2a; } .text-info { - color: #00aeef !important; + color: #00aeef !important; } .text-success { - color: #27c24c !important; + color: #27c24c !important; } .text-warning { - color: #fad733 !important; + color: #fad733 !important; } .text-danger { - color: #f05050; + color: #f05050; } .text-white { - color: #FFF !important; + color: #fff !important; } .text-left { - text-align: left !important; + text-align: left !important; } .text-center { - text-align: center !important; + text-align: center !important; } .text-right { - text-align: right !important; + text-align: right !important; } - /*宽度样式*/ .w-xxs { - width: 60px; + width: 60px; } .w-xs { - width: 90px; + width: 90px; } .w-110 { - width: 110px; + width: 110px; } .w-ss { - width: 120px; + width: 120px; } .w-sm { - width: 150px; + width: 150px; } .w { - width: 200px; + width: 200px; } .w-md { - width: 240px; + width: 240px; } .w-lg { - width: 280px; + width: 280px; } .w-xl { - width: 320px; + width: 320px; } .w-xxl { - width: 360px; + width: 360px; } .w-full { - width: 100% !important; + width: 100% !important; } .w-auto { - width: auto; -} \ No newline at end of file + width: auto; +} +.tips { + font-size: 16px; + color: #d7d6d6; + cursor: pointer; +} diff --git a/src/views/screen/UsedTrend.vue b/src/views/screen/UsedTrend.vue index 40d83de..545ebee 100644 --- a/src/views/screen/UsedTrend.vue +++ b/src/views/screen/UsedTrend.vue @@ -13,17 +13,52 @@ export default { timer: null, tableData7: [ { - data: 50, - name: 1621300392 + data: 52, + name: 1680307200 }, - { - data: 90, - name: 1691300392 + data: 60, + name: 1682899200 + }, + { + data: 58, + name: 1685577600 + }, + { + data: 59, + name: 1688169600 + }, + { + data: 75, + name: 1690848000 + }, + { + data: 59, + name: 1693526400 + }, + { + data: 57, + name: 1696118400 + }, + { + data: 63, + name: 1698796800 + }, + { + data: 71, + name: 1701388800 + }, + { + data: 82, + name: 1704067200 + }, + { + data: 78, + name: 1706745600 }, { data: 70, - name: 1729300392 + name: 1709251200 } ] } @@ -42,7 +77,7 @@ export default { async getQueryRangeData() { const res = await getAverageUtilizationTrend() if (res.status !== 'success') return - this.tableData7 = res.data?.result?.[0]?.values?.map(v => { + this.tableData7 = res.data?.result?.[0]?.values?.map((v) => { return { name: v[0], data: v[1] @@ -51,8 +86,8 @@ export default { this.getQueryRangeView() }, getQueryRangeView() { - const ydata = this.tableData7.map(v => parseFloat(v.data).toFixed(2)) - const xdata = this.tableData7.map(v => { + const ydata = this.tableData7.map((v) => parseFloat(v.data).toFixed(2)) + const xdata = this.tableData7.map((v) => { const date = new Date(v.name * 1000) const year = date.getFullYear() const month = String(date.getMonth() + 1).padStart(2, '0') @@ -60,13 +95,13 @@ export default { const hours = String(date.getHours()).padStart(2, '0') const minutes = String(date.getMinutes()).padStart(2, '0') const seconds = String(date.getSeconds()).padStart(2, '0') - return `${year}-${month}-${day}` + return `${year}.${month}` }) const option = { grid: { left: '0%', // 将 left 设置为 0 确保左边没有留白 right: '0%', - top: '20%', + top: '10%', bottom: '0%', containLabel: true, // 确保标签不会被裁剪 show: false @@ -95,7 +130,7 @@ export default { xAxis: { type: 'category', data: xdata, - boundaryGap: false, + boundaryGap: true, axisTick: { show: false }, @@ -110,18 +145,20 @@ export default { lineStyle: { color: 'rgba(0,0,0,0.06)' } + }, + axisLabel: { + padding: [10, 0, 0, 0], // 左、上、右、下的内边距，这里设置左内边距为10 + rotate: 45, + interval: 0, // 强制显示所有标签 + textStyle: { + fontSize: 12, + color: '#fff' + } } - // axisLabel: { - // rotate: 45, - // textStyle: { - // color: '#fff' - // } - // } }, yAxis: { - // name: '出勤人数', nameTextStyle: { - color: '#666' + color: '#fff' }, type: 'value', min: 0, @@ -131,11 +168,11 @@ export default { show: true, interval: 'auto', lineStyle: { - color: 'rgba(0,0,0,0.06)' + color: '#0079B7' } }, axisTick: { - show: false + show: true }, axisLine: { lineStyle: { @@ -143,9 +180,9 @@ export default { } }, axisLabel: { - margin: 1, + margin: 10, textStyle: { - fontSize: 10, + fontSize: 14, color: '#FFF' } } @@ -153,9 +190,8 @@ export default { series: [ { type: 'line', - showSymbol: false, - symbol: 'emptyCircle', - symbolSize: 2, + symbolSize: 5, + symbol: 'circle', data: ydata, areaStyle: { normal: { @@ -179,26 +215,9 @@ export default { } }, itemStyle: { - normal: { - borderWidth: 2, - color: new echarts.graphic.LinearGradient( - 0, - 0, - 0, - 1, - [ - { - offset: 0, - color: 'rgba(0, 82, 212,0.7)' - }, - { - offset: 1, - color: 'rgba(0, 82, 212,0.4)' - } - ], - false - ) - } + color: '#41FA80', // 使用纯绿色 + borderColor: '#41FA80', // 边框颜色与填充色相同 + borderWidth: 1 // 设置较细的边框 }, lineStyle: { globalCoord: false, // 缺省为 false @@ -212,33 +231,11 @@ export default { [ { offset: 0, - color: 'rgba(0, 82, 212,0.7)' + color: '#41FA80' }, { offset: 1, - color: 'rgba(0, 82, 212,0.4)' - } - ], - false - ) - } - }, - emphasis: { - itemStyle: { - borderWidth: 2, - borderColor: new echarts.graphic.LinearGradient( - 0, - 0, - 0, - 1, - [ - { - offset: 0, - color: 'rgba(245,166,35,1)' - }, - { - offset: 1, - color: 'rgba(245,166,35,0.8)' + color: '#41FA80' } ], false @@ -259,6 +256,6 @@ export default { diff --git a/src/views/screen/components/FullScreenContainer.vue b/src/views/screen/components/FullScreenContainer.vue index a9f14f7..7b43b71 100644 --- a/src/views/screen/components/FullScreenContainer.vue +++ b/src/views/screen/components/FullScreenContainer.vue @@ -2,7 +2,7 @@
- 数据加载中 + 数据加载中
@@ -28,24 +28,23 @@ export default { }, setup(props, context) { const state = reactive({ - scale: null + scale: { + wRatio: 1, + hRatio: 1 + } }) const style = computed(() => { - // 标品: 始终保持1920*1080的宽高比 - // 改动后: 始终保持占满屏幕, 最宽1920 - const innerWidth = window.innerWidth > 1920 ? 1920 : window.innerWidth return { width: `${props.width}px`, height: `${props.height}px`, - transform: `scale(${innerWidth / 1920},${state.scale})` + transform: `scale(${state.scale.wRatio},${state.scale.hRatio})` } }) function getScale() { const { width, height } = props const wRatio = window.innerWidth / width const hRatio = window.innerHeight / height - // return 1; - return wRatio < hRatio ? wRatio : hRatio + return { wRatio, hRatio } } function setScale() { state.scale = getScale() diff --git a/src/views/screen/components/Header.vue b/src/views/screen/components/Header.vue index 12264c2..81c3c8d 100644 --- a/src/views/screen/components/Header.vue +++ b/src/views/screen/components/Header.vue @@ -11,8 +11,8 @@ {{ title }} - 系统使用手册下载 - 登录入口 + 系统使用手册下载 + 登录入口 @@ -86,11 +86,6 @@ export default { text-transform: none; cursor: pointer; } - .tips { - font-size: 16px; - color: #b7b7b7; - cursor: pointer; - } .btn { padding: 5px; width: 30px; diff --git a/src/views/screen/components/ScrollTable/index.vue b/src/views/screen/components/ScrollTable/index.vue index 0e9e51a..ac4ebe1 100644 --- a/src/views/screen/components/ScrollTable/index.vue +++ b/src/views/screen/components/ScrollTable/index.vue @@ -74,7 +74,7 @@ export default { } .table-body { height: calc(100% - 50px); - overflow-y: auto; + overflow-y: hidden; .table-tr { display: flex; diff --git a/src/views/screen/images/buttons.png b/src/views/screen/images/buttons.png new file mode 100644 index 0000000..0605c71 Binary files /dev/null and b/src/views/screen/images/buttons.png differ diff --git a/src/views/screen/index.vue b/src/views/screen/index.vue index 9fbb414..0cde270 100644 --- a/src/views/screen/index.vue +++ b/src/views/screen/index.vue @@ -50,8 +50,8 @@
- 中科院高性能数值模拟实验平台是低碳智能燃煤发电与超净排放全国重点实验室的核心实验平台之-，以设计标准化、部署模块化，管理可视化，运维智能化为依托，打造满足中国机房设计标准、美国机房设计标准和Uptime - Institue的创新性平台，致力于拓展科研手段、深化生产服务，为火力发电、新能源等领域的关键技术、核心装备、系统集成等相关科技研发提供有力支撑。 + 电科院高性能数值模拟实验平台是低碳智能燃煤发电与超净排放全国重点实验室的核心实验平台之一，以设计标准化、部署模块化、管理可视化、运维智能化为依托，打造满足中国机房设计标准、美国机房设计标准和Uptime + Institute的创新性平台，致力于拓展科研手段、深化生产服务，为火力发电、新能源等领域的关键技术、核心装备、系统集成等相关科技研发提供有力支撑。
平台建筑面积200余平方米，硬件设施智能完善、软件系统高效便捷，主要开展火力发电固体燃料热解与燃烧、气体燃料燃烧、污染物生成与脱除、物质流能量流、全过程控制优化的数值模拟，以及综合能源系统仿真研究等八大研究方向。
@@ -107,7 +107,13 @@
-
应用软件集成需求
+
+ 应用软件集成需求 +
+ 需求提交 + 问题建议 +
+