efc
/
scr-web
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: 修改

sqltest
时启龙 2024-07-24 14:25:25 +08:00
parent 54ab4606c0
commit 604549b6a5
14 changed files with 263 additions and 239 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@ -1,6 +1,6 @@
.DS_Store .DS_Store
node_modules node_modules
/screen-web /scr-web
# local env files # local env files

2
package.json
View File

@ -1,5 +1,5 @@
{ {
"name": "cmp-screen", "name": "scr-web",
"version": "5.6.0", "version": "5.6.0",
"private": true, "private": true,
"scripts": { "scripts": {

14
public/index.html
View File

@ -1,14 +1,11 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="icon" href="<%= BASE_URL %>static/img/shortcut.png"> <link rel="icon" href="<%= BASE_URL %>static/img/logo.png" />
<title> <title>高性能数值模拟实验平台</title>
<%= htmlWebpackPlugin.options.title %>
</title>
</head> </head>
<body> <body>
@ -18,5 +15,4 @@
<div id="app"></div> <div id="app"></div>
<!-- built files will be auto injected --> <!-- built files will be auto injected -->
</body> </body>
</html> </html>

BIN
public/static/img/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.3 KiB

BIN
public/static/img/shortcut.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 888 B

3
src/css/common.scss
View File

@ -13,3 +13,6 @@ body,
.iconfont { .iconfont {
font-size: 13px; font-size: 13px;
} }
a {
text-decoration: none;
}

9
src/css/layouts.scss
View File

@ -324,7 +324,6 @@
margin-bottom: -50px; margin-bottom: -50px;
} }
/*颜色共有样式*/ /*颜色共有样式*/
.btn-info { .btn-info {
@ -392,7 +391,7 @@
} }
.text-white { .text-white {
color: #FFF !important; color: #fff !important;
} }
.text-left { .text-left {
@ -407,7 +406,6 @@
text-align: right !important; text-align: right !important;
} }
/*宽度样式*/ /*宽度样式*/
.w-xxs { .w-xxs {
@ -457,3 +455,8 @@
.w-auto { .w-auto {
width: auto; width: auto;
} }
.tips {
font-size: 16px;
color: #d7d6d6;
cursor: pointer;
}

141
src/views/screen/UsedTrend.vue
View File

@ -13,17 +13,52 @@ export default {
timer: null, timer: null,
tableData7: [ tableData7: [
{ {
data: 50, data: 52,
name: 1621300392 name: 1680307200
}, },
{ {
data: 90, data: 60,
name: 1691300392 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, data: 70,
name: 1729300392 name: 1709251200
} }
] ]
} }
@ -42,7 +77,7 @@ export default {
async getQueryRangeData() { async getQueryRangeData() {
const res = await getAverageUtilizationTrend() const res = await getAverageUtilizationTrend()
if (res.status !== 'success') return if (res.status !== 'success') return
this.tableData7 = res.data?.result?.[0]?.values?.map(v => { this.tableData7 = res.data?.result?.[0]?.values?.map((v) => {
return { return {
name: v[0], name: v[0],
data: v[1] data: v[1]
@ -51,8 +86,8 @@ export default {
this.getQueryRangeView() this.getQueryRangeView()
}, },
getQueryRangeView() { getQueryRangeView() {
const ydata = this.tableData7.map(v => parseFloat(v.data).toFixed(2)) const ydata = this.tableData7.map((v) => parseFloat(v.data).toFixed(2))
const xdata = this.tableData7.map(v => { const xdata = this.tableData7.map((v) => {
const date = new Date(v.name * 1000) const date = new Date(v.name * 1000)
const year = date.getFullYear() const year = date.getFullYear()
const month = String(date.getMonth() + 1).padStart(2, '0') const month = String(date.getMonth() + 1).padStart(2, '0')
@ -60,13 +95,13 @@ export default {
const hours = String(date.getHours()).padStart(2, '0') const hours = String(date.getHours()).padStart(2, '0')
const minutes = String(date.getMinutes()).padStart(2, '0') const minutes = String(date.getMinutes()).padStart(2, '0')
const seconds = String(date.getSeconds()).padStart(2, '0') const seconds = String(date.getSeconds()).padStart(2, '0')
return `${year}-${month}-${day}` return `${year}.${month}`
}) })
const option = { const option = {
grid: { grid: {
left: '0%', // 将 left 设置为 0 确保左边没有留白 left: '0%', // 将 left 设置为 0 确保左边没有留白
right: '0%', right: '0%',
top: '20%', top: '10%',
bottom: '0%', bottom: '0%',
containLabel: true, // 确保标签不会被裁剪 containLabel: true, // 确保标签不会被裁剪
show: false show: false
@ -95,7 +130,7 @@ export default {
xAxis: { xAxis: {
type: 'category', type: 'category',
data: xdata, data: xdata,
boundaryGap: false, boundaryGap: true,
axisTick: { axisTick: {
show: false show: false
}, },
@ -110,18 +145,20 @@ export default {
lineStyle: { lineStyle: {
color: 'rgba(0,0,0,0.06)' 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: { yAxis: {
// name: '出勤人数',
nameTextStyle: { nameTextStyle: {
color: '#666' color: '#fff'
}, },
type: 'value', type: 'value',
min: 0, min: 0,
@ -131,11 +168,11 @@ export default {
show: true, show: true,
interval: 'auto', interval: 'auto',
lineStyle: { lineStyle: {
color: 'rgba(0,0,0,0.06)' color: '#0079B7'
} }
}, },
axisTick: { axisTick: {
show: false show: true
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
@ -143,9 +180,9 @@ export default {
} }
}, },
axisLabel: { axisLabel: {
margin: 1, margin: 10,
textStyle: { textStyle: {
fontSize: 10, fontSize: 14,
color: '#FFF' color: '#FFF'
} }
} }
@ -153,9 +190,8 @@ export default {
series: [ series: [
{ {
type: 'line', type: 'line',
showSymbol: false, symbolSize: 5,
symbol: 'emptyCircle', symbol: 'circle',
symbolSize: 2,
data: ydata, data: ydata,
areaStyle: { areaStyle: {
normal: { normal: {
@ -179,26 +215,9 @@ export default {
} }
}, },
itemStyle: { itemStyle: {
normal: { color: '#41FA80', // 使用纯绿色
borderWidth: 2, borderColor: '#41FA80', // 边框颜色与填充色相同
color: new echarts.graphic.LinearGradient( borderWidth: 1 // 设置较细的边框
0,
0,
0,
1,
[
{
offset: 0,
color: 'rgba(0, 82, 212,0.7)'
},
{
offset: 1,
color: 'rgba(0, 82, 212,0.4)'
}
],
false
)
}
}, },
lineStyle: { lineStyle: {
globalCoord: false, // 缺省为 false globalCoord: false, // 缺省为 false
@ -212,33 +231,11 @@ export default {
[ [
{ {
offset: 0, offset: 0,
color: 'rgba(0, 82, 212,0.7)' color: '#41FA80'
}, },
{ {
offset: 1, offset: 1,
color: 'rgba(0, 82, 212,0.4)' color: '#41FA80'
}
],
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)'
} }
], ],
false false
@ -259,6 +256,6 @@ export default {
</script> </script>
<style scoped> <style scoped>
#UsedTrend { #UsedTrend {
height: 100%; height: 90%;
} }
</style> </style>

15
src/views/screen/components/FullScreenContainer.vue
View File

@ -2,7 +2,7 @@
<div class="full-screen-container" :style="style"> <div class="full-screen-container" :style="style">
<slot></slot> <slot></slot>
<div class="loading" v-if="loading"> <div class="loading" v-if="loading">
<dv-decoration-9 style="width:300px;height:300px;">数据加载中</dv-decoration-9> <dv-decoration-9 style="width: 300px; height: 300px">数据加载中</dv-decoration-9>
</div> </div>
</div> </div>
</template> </template>
@ -28,24 +28,23 @@ export default {
}, },
setup(props, context) { setup(props, context) {
const state = reactive({ const state = reactive({
scale: null scale: {
wRatio: 1,
hRatio: 1
}
}) })
const style = computed(() => { const style = computed(() => {
// 标品: 始终保持1920*1080的宽高比
// 改动后: 始终保持占满屏幕, 最宽1920
const innerWidth = window.innerWidth > 1920 ? 1920 : window.innerWidth
return { return {
width: `${props.width}px`, width: `${props.width}px`,
height: `${props.height}px`, height: `${props.height}px`,
transform: `scale(${innerWidth / 1920},${state.scale})` transform: `scale(${state.scale.wRatio},${state.scale.hRatio})`
} }
}) })
function getScale() { function getScale() {
const { width, height } = props const { width, height } = props
const wRatio = window.innerWidth / width const wRatio = window.innerWidth / width
const hRatio = window.innerHeight / height const hRatio = window.innerHeight / height
// return 1; return { wRatio, hRatio }
return wRatio < hRatio ? wRatio : hRatio
} }
function setScale() { function setScale() {
state.scale = getScale() state.scale = getScale()

9
src/views/screen/components/Header.vue
View File

@ -11,8 +11,8 @@
{{ title }} {{ title }}
</span> </span>
<span class="pull-right"> <span class="pull-right">
<span class="m-r-lg tips">系统使用手册下载</span> <a class="m-r-lg tips" href="https://www.baidu.com/" target="_blank">系统使用手册下载</a>
<span class="btn m-r">登录入口</span> <a class="btn m-r" href="https://www.baidu.com/" target="_blank">登录入口</a>
</span> </span>
</div> </div>
</template> </template>
@ -86,11 +86,6 @@ export default {
text-transform: none; text-transform: none;
cursor: pointer; cursor: pointer;
} }
.tips {
font-size: 16px;
color: #b7b7b7;
cursor: pointer;
}
.btn { .btn {
padding: 5px; padding: 5px;
width: 30px; width: 30px;

2
src/views/screen/components/ScrollTable/index.vue
View File

@ -74,7 +74,7 @@ export default {
} }
.table-body { .table-body {
height: calc(100% - 50px); height: calc(100% - 50px);
overflow-y: auto; overflow-y: hidden;
.table-tr { .table-tr {
display: flex; display: flex;

BIN
src/views/screen/images/buttons.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 31 KiB

39
src/views/screen/index.vue
View File

@ -50,8 +50,8 @@
<img class="intro-img m-t" src="./images/plateform.png" /> <img class="intro-img m-t" src="./images/plateform.png" />
<div class="intro-text"> <div class="intro-text">
<div> <div>
中科院高性能数值模拟实验平台是低碳智能燃煤发电与超净排放全国重点实验室的核心实验平台之-，以设计标准化、部署模块化，管理可视化，运维智能化为依托，打造满足中国机房设计标准、美国机房设计标准和Uptime 电科院高性能数值模拟实验平台是低碳智能燃煤发电与超净排放全国重点实验室的核心实验平台之一，以设计标准化、部署模块化、管理可视化、运维智能化为依托，打造满足中国机房设计标准、美国机房设计标准和Uptime
Institue的创新性平台，致力于拓展科研手段、深化生产服务，为火力发电、新能源等领域的关键技术、核心装备、系统集成等相关科技研发提供有力支撑。 Institute的创新性平台，致力于拓展科研手段、深化生产服务，为火力发电、新能源等领域的关键技术、核心装备、系统集成等相关科技研发提供有力支撑。
</div> </div>
<div>平台建筑面积200余平方米，硬件设施智能完善、软件系统高效便捷，主要开展火力发电固体燃料热解与燃烧、气体燃料燃烧、污染物生成与脱除、物质流能量流、全过程控制优化的数值模拟，以及综合能源系统仿真研究等八大研究方向。</div> <div>平台建筑面积200余平方米，硬件设施智能完善、软件系统高效便捷，主要开展火力发电固体燃料热解与燃烧、气体燃料燃烧、污染物生成与脱除、物质流能量流、全过程控制优化的数值模拟，以及综合能源系统仿真研究等八大研究方向。</div>
</div> </div>
@ -107,7 +107,13 @@
</div> </div>
</div> </div>
<div class="card mini-card card-border3"> <div class="card mini-card card-border3">
<div class="card-title card-title-border1">应用软件集成需求</div> <div class="card-title card-title-border1">
应用软件集成需求
<div class="btn-group">
<a class="tips" href="https://www.baidu.com/" target="_blank">需求提交</a>
<a class="tips" href="https://www.baidu.com/" target="_blank">问题建议</a>
</div>
</div>
<div class="card-body"> <div class="card-body">
<ScrollTable :data="appDemandList" :column-width="['80px']" :columns="['排名', '软件名称', '需求频次']" :options="{ singleHeight: 32 }"> <ScrollTable :data="appDemandList" :column-width="['80px']" :columns="['排名', '软件名称', '需求频次']" :options="{ singleHeight: 32 }">
<template v-slot="scope"> <template v-slot="scope">
@ -185,12 +191,14 @@ export default {
state.departTrend = res.data.map((item, index) => { state.departTrend = res.data.map((item, index) => {
return { ...item, rank: index + 1 } return { ...item, rank: index + 1 }
}) })
if (state.departTrend.length > 7) state.departTrend.length = 7
} }
const getSoftwareDurationList = async () => { const getSoftwareDurationList = async () => {
const res = await getSoftwareDuration() const res = await getSoftwareDuration()
state.appTrend = res.data.map((item, index) => { state.appTrend = res.data.map((item, index) => {
return { ...item, rank: index + 1 } return { ...item, rank: index + 1 }
}) })
if (state.appTrend.length > 4) state.appTrend.length = 4
} }
const getInUseSoftwareList = async () => { const getInUseSoftwareList = async () => {
@ -205,17 +213,19 @@ export default {
state.userUseTrend = res.data.map((item, index) => { state.userUseTrend = res.data.map((item, index) => {
return { ...item, rank: index + 1 } return { ...item, rank: index + 1 }
}) })
if (state.userUseTrend.length > 7) state.userUseTrend.length = 7
} }
const getDemandList = async () => { const getDemandList = async () => {
const res = await getSoftwareIntegrate() const res = await getSoftwareIntegrate()
state.appDemandList = res.data.map((item, index) => { state.appDemandList = res.data.map((item, index) => {
return { ...item, rank: index + 1 } return { ...item, rank: index + 1 }
}) })
if (state.appTrend.length > 4) state.appTrend.length = 4
} }
const getPlateformSumList = async () => { const getPlateformSumList = async () => {
const res = await getPlateformSum() const res = await getPlateformSum()
res.data.map(item => { res.data.map((item) => {
if (item.keyName === 'userNum') { if (item.keyName === 'userNum') {
state.introItems[0].value = item.numValue state.introItems[0].value = item.numValue
} }
@ -308,6 +318,7 @@ export default {
.card-title-border2 { .card-title-border2 {
background: url('./images/item-header1.png'); background: url('./images/item-header1.png');
background-position-x: -33px !important; background-position-x: -33px !important;
padding-left: 80px !important;
} }
.p-l-lg { .p-l-lg {
padding-left: 55px; padding-left: 55px;
@ -323,6 +334,7 @@ export default {
margin-bottom: 13px; margin-bottom: 13px;
} }
.card-title { .card-title {
position: relative;
font-size: 18px; font-size: 18px;
font-weight: bold; font-weight: bold;
padding-left: 70px; padding-left: 70px;
@ -336,6 +348,25 @@ export default {
overflow: hidden; overflow: hidden;
} }
} }
.btn-group {
position: absolute;
right: 0;
top: 0;
a {
background-image: url('./images/buttons.png');
background-repeat: no-repeat;
width: 115px;
height: 35px;
line-height: 35px;
text-align: center;
display: inline-block;
background-size: 100% 220px;
background-position: 0px -110px;
margin-right: -5px;
font-weight: normal;
font-size: 14px;
}
}
.intro-card { .intro-card {
height: 680px; height: 680px;
.intro-img { .intro-img {

BIN
src/views/screen/screen.rar
View File

Binary file not shown.