fix: 修改
时启龙
parent
54ab4606c0
commit
604549b6a5
|
|
@ -1,6 +1,6 @@
|
|||
.DS_Store
|
||||
node_modules
|
||||
/screen-web
|
||||
/scr-web
|
||||
|
||||
|
||||
# local env files
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"name": "cmp-screen",
|
||||
"name": "scr-web",
|
||||
"version": "5.6.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
|
|
|
|||
|
|
@ -1,14 +1,11 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<link rel="icon" href="<%= BASE_URL %>static/img/shortcut.png">
|
||||
<title>
|
||||
<%= htmlWebpackPlugin.options.title %>
|
||||
</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
||||
<link rel="icon" href="<%= BASE_URL %>static/img/logo.png" />
|
||||
<title>高性能数值模拟实验平台</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
|
@ -18,5 +15,4 @@
|
|||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 888 B |
|
|
@ -13,3 +13,6 @@ body,
|
|||
.iconfont {
|
||||
font-size: 13px;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -324,7 +324,6 @@
|
|||
margin-bottom: -50px;
|
||||
}
|
||||
|
||||
|
||||
/*颜色共有样式*/
|
||||
|
||||
.btn-info {
|
||||
|
|
@ -392,7 +391,7 @@
|
|||
}
|
||||
|
||||
.text-white {
|
||||
color: #FFF !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.text-left {
|
||||
|
|
@ -407,7 +406,6 @@
|
|||
text-align: right !important;
|
||||
}
|
||||
|
||||
|
||||
/*宽度样式*/
|
||||
|
||||
.w-xxs {
|
||||
|
|
@ -457,3 +455,8 @@
|
|||
.w-auto {
|
||||
width: auto;
|
||||
}
|
||||
.tips {
|
||||
font-size: 16px;
|
||||
color: #d7d6d6;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
|||
</script>
|
||||
<style scoped>
|
||||
#UsedTrend {
|
||||
height: 100%;
|
||||
height: 90%;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<div class="full-screen-container" :style="style">
|
||||
<slot></slot>
|
||||
<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>
|
||||
</template>
|
||||
|
|
@ -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()
|
||||
|
|
|
|||
|
|
@ -11,8 +11,8 @@
|
|||
{{ title }}
|
||||
</span>
|
||||
<span class="pull-right">
|
||||
<span class="m-r-lg tips">系统使用手册下载</span>
|
||||
<span class="btn m-r">登录入口</span>
|
||||
<a class="m-r-lg tips" href="https://www.baidu.com/" target="_blank">系统使用手册下载</a>
|
||||
<a class="btn m-r" href="https://www.baidu.com/" target="_blank">登录入口</a>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -86,11 +86,6 @@ export default {
|
|||
text-transform: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
.tips {
|
||||
font-size: 16px;
|
||||
color: #b7b7b7;
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn {
|
||||
padding: 5px;
|
||||
width: 30px;
|
||||
|
|
|
|||
|
|
@ -74,7 +74,7 @@ export default {
|
|||
}
|
||||
.table-body {
|
||||
height: calc(100% - 50px);
|
||||
overflow-y: auto;
|
||||
overflow-y: hidden;
|
||||
|
||||
.table-tr {
|
||||
display: flex;
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
|
|
@ -50,8 +50,8 @@
|
|||
<img class="intro-img m-t" src="./images/plateform.png" />
|
||||
<div class="intro-text">
|
||||
<div>
|
||||
中科院高性能数值模拟实验平台是低碳智能燃煤发电与超净排放全国重点实验室的核心实验平台之-，以设计标准化、部署模块化，管理可视化，运维智能化为依托，打造满足中国机房设计标准、美国机房设计标准和Uptime
|
||||
Institue的创新性平台，致力于拓展科研手段、深化生产服务，为火力发电、新能源等领域的关键技术、核心装备、系统集成等相关科技研发提供有力支撑。
|
||||
电科院高性能数值模拟实验平台是低碳智能燃煤发电与超净排放全国重点实验室的核心实验平台之一，以设计标准化、部署模块化、管理可视化、运维智能化为依托，打造满足中国机房设计标准、美国机房设计标准和Uptime
|
||||
Institute的创新性平台，致力于拓展科研手段、深化生产服务，为火力发电、新能源等领域的关键技术、核心装备、系统集成等相关科技研发提供有力支撑。
|
||||
</div>
|
||||
<div>平台建筑面积200余平方米，硬件设施智能完善、软件系统高效便捷，主要开展火力发电固体燃料热解与燃烧、气体燃料燃烧、污染物生成与脱除、物质流能量流、全过程控制优化的数值模拟，以及综合能源系统仿真研究等八大研究方向。</div>
|
||||
</div>
|
||||
|
|
@ -107,7 +107,13 @@
|
|||
</div>
|
||||
</div>
|
||||
<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">
|
||||
<ScrollTable :data="appDemandList" :column-width="['80px']" :columns="['排名', '软件名称', '需求频次']" :options="{ singleHeight: 32 }">
|
||||
<template v-slot="scope">
|
||||
|
|
@ -185,12 +191,14 @@ export default {
|
|||
state.departTrend = res.data.map((item, index) => {
|
||||
return { ...item, rank: index + 1 }
|
||||
})
|
||||
if (state.departTrend.length > 7) state.departTrend.length = 7
|
||||
}
|
||||
const getSoftwareDurationList = async () => {
|
||||
const res = await getSoftwareDuration()
|
||||
state.appTrend = res.data.map((item, index) => {
|
||||
return { ...item, rank: index + 1 }
|
||||
})
|
||||
if (state.appTrend.length > 4) state.appTrend.length = 4
|
||||
}
|
||||
|
||||
const getInUseSoftwareList = async () => {
|
||||
|
|
@ -205,17 +213,19 @@ export default {
|
|||
state.userUseTrend = res.data.map((item, index) => {
|
||||
return { ...item, rank: index + 1 }
|
||||
})
|
||||
if (state.userUseTrend.length > 7) state.userUseTrend.length = 7
|
||||
}
|
||||
const getDemandList = async () => {
|
||||
const res = await getSoftwareIntegrate()
|
||||
state.appDemandList = res.data.map((item, index) => {
|
||||
return { ...item, rank: index + 1 }
|
||||
})
|
||||
if (state.appTrend.length > 4) state.appTrend.length = 4
|
||||
}
|
||||
const getPlateformSumList = async () => {
|
||||
const res = await getPlateformSum()
|
||||
|
||||
res.data.map(item => {
|
||||
res.data.map((item) => {
|
||||
if (item.keyName === 'userNum') {
|
||||
state.introItems[0].value = item.numValue
|
||||
}
|
||||
|
|
@ -308,6 +318,7 @@ export default {
|
|||
.card-title-border2 {
|
||||
background: url('./images/item-header1.png');
|
||||
background-position-x: -33px !important;
|
||||
padding-left: 80px !important;
|
||||
}
|
||||
.p-l-lg {
|
||||
padding-left: 55px;
|
||||
|
|
@ -323,6 +334,7 @@ export default {
|
|||
margin-bottom: 13px;
|
||||
}
|
||||
.card-title {
|
||||
position: relative;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
padding-left: 70px;
|
||||
|
|
@ -336,6 +348,25 @@ export default {
|
|||
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 {
|
||||
height: 680px;
|
||||
.intro-img {
|
||||
|
|
|
|||
Binary file not shown.
Loading…
Reference in New Issue