Compare commits

..

2 Commits

Author SHA1 Message Date
时启龙 54ab4606c0 fix: m 2024-07-19 12:11:55 +08:00
时启龙 e638356856 fix: m 2024-07-19 12:08:15 +08:00
5 changed files with 41 additions and 32 deletions

View File

@ -5,7 +5,7 @@ body,
padding: 0; padding: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
font-size: 14px; font-size: 16px;
overflow: hidden !important; overflow: hidden !important;
font-family: Microsoft YaHei, Hiragino Sans GB; font-family: Microsoft YaHei, Hiragino Sans GB;
} }

View File

@ -20,7 +20,7 @@ export default {
this.getRealTimeUesdView() this.getRealTimeUesdView()
this.timer = setInterval(() => { this.timer = setInterval(() => {
this.getRealTimeData() this.getRealTimeData()
}, 1000) }, 10000)
}, },
unmounted() { unmounted() {
clearInterval(this.timer) clearInterval(this.timer)

View File

@ -31,10 +31,13 @@ export default {
scale: null scale: null
}) })
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(${state.scale})` transform: `scale(${innerWidth / 1920},${state.scale})`
} }
}) })
function getScale() { function getScale() {

View File

@ -48,10 +48,11 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.scroll-table { .scroll-table {
height: 100%; height: calc(100% - 20px);
color: #fff; color: #fff;
font-size: 14px; font-size: 14px;
padding: 0 10px; padding: 0 10px;
margin: 10px 0 10 0;
padding-left: 0px; padding-left: 0px;
text-align: center; text-align: center;
list-style: none; list-style: none;

View File

@ -53,17 +53,16 @@
中科院高性能数值模拟实验平台是低碳智能燃煤发电与超净排放全国重点实验室的核心实验平台之-以设计标准化部署模块化管理可视化运维智能化为依托打造满足中国机房设计标准美国机房设计标准和Uptime 中科院高性能数值模拟实验平台是低碳智能燃煤发电与超净排放全国重点实验室的核心实验平台之-以设计标准化部署模块化管理可视化运维智能化为依托打造满足中国机房设计标准美国机房设计标准和Uptime
Institue的创新性平台致力于拓展科研手段深化生产服务为火力发电新能源等领域的关键技术核心装备系统集成等相关科技研发提供有力支撑 Institue的创新性平台致力于拓展科研手段深化生产服务为火力发电新能源等领域的关键技术核心装备系统集成等相关科技研发提供有力支撑
</div> </div>
<br />
<div>平台建筑面积200余平方米硬件设施智能完善软件系统高效便捷主要开展火力发电固体燃料热解与燃烧气体燃料燃烧污染物生成与脱除物质流能量流全过程控制优化的数值模拟以及综合能源系统仿真研究等八大研究方向</div> <div>平台建筑面积200余平方米硬件设施智能完善软件系统高效便捷主要开展火力发电固体燃料热解与燃烧气体燃料燃烧污染物生成与脱除物质流能量流全过程控制优化的数值模拟以及综合能源系统仿真研究等八大研究方向</div>
</div> </div>
<el-row :gutter="32"> <el-row>
<el-col :span="6" v-for="(item, index) in introItems" :key="index"> <el-col :span="6" v-for="(item, index) in introItems" :key="index">
<div class="intro-item text-right m-r" :style="{ 'background-image': `url(${item.img})` }"> <div class="intro-item m-r" :style="{ 'background-image': `url(${item.img})` }">
<div> <div class="p-l-lg">
<span class="intro-item-value" :style="{ color: introColorMap[index] }">{{ item.value }}</span> <span class="intro-item-value" :style="{ color: introColorMap[index] }">{{ item.value }}</span>
<span>{{ item.unit }}</span> <span>{{ item.unit }}</span>
</div> </div>
<div>{{ item.text }}</div> <div class="p-l-lg">{{ item.text }}</div>
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
@ -147,7 +146,7 @@ export default {
setup() { setup() {
const state = reactive({ const state = reactive({
colorMap: ['red', '#ffc107', 'rgb(6,141,255)'], colorMap: ['red', '#ffc107', 'rgb(6,141,255)'],
introColorMap: ['#6be6f5', '#489ef1', '#6ce2bb', '#d09154'], introColorMap: ['rgb(23,230,255)', '#489ef1', '#6ce2bb', '#d09154'],
loading: false, loading: false,
departTrend: [], departTrend: [],
appTrend: [], appTrend: [],
@ -173,7 +172,7 @@ export default {
}, },
{ {
value: 0, value: 0,
unit: '小 时', unit: '小时',
text: '使用总时长', text: '使用总时长',
img: subIcon4 img: subIcon4
} }
@ -216,7 +215,7 @@ export default {
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
} }
@ -254,7 +253,7 @@ export default {
width: 100%; width: 100%;
height: 100%; height: 100%;
background: url('./images/bg.png') no-repeat; background: url('./images/bg.png') no-repeat;
padding: 90px 20px 20px 20px; padding: 73px 20px 0 20px;
box-sizing: border-box; box-sizing: border-box;
color: #fff; color: #fff;
} }
@ -271,37 +270,37 @@ export default {
height: 100%; height: 100%;
} }
.mini-card { .mini-card {
height: 280px !important; height: 285px !important;
} }
.card-border1 { .card-border1 {
background: url('./images/item-border1.png'); background: url('./images/item-border1.png');
background-size: 100% 85%; background-size: 100% 85%;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position-y: 43px; background-position-y: 40px;
} }
.card-border2 { .card-border2 {
background: url('./images/item-border2.png'); background: url('./images/item-border2.png');
background-size: 100% 85%; background-size: 100% 89%;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position-y: 43px; background-position-y: 40px;
} }
.card-border3 { .card-border3 {
background: url('./images/item-border3.png'); background: url('./images/item-border3.png');
background-size: 100% 85%; background-size: 100% 85%;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position-y: 43px; background-position-y: 40px;
} }
.card-border4 { .card-border4 {
background: url('./images/item-border4.png'); background: url('./images/item-border4.png');
background-size: 100% 92%; background-size: 100% 94%;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position-y: 43px; background-position-y: 40px;
} }
.card-border5 { .card-border5 {
background: url('./images/item-border5.png'); background: url('./images/item-border5.png');
background-size: 100% 85%; background-size: 100% 86%;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position-y: 43px; background-position-y: 40px;
} }
.card-title-border1 { .card-title-border1 {
background: url('./images/item-header1.png'); background: url('./images/item-header1.png');
@ -310,14 +309,18 @@ export default {
background: url('./images/item-header1.png'); background: url('./images/item-header1.png');
background-position-x: -33px !important; background-position-x: -33px !important;
} }
.p-l-lg {
padding-left: 55px;
}
.card { .card {
height: 350px; height: 385px;
padding: 15px; padding: 15px;
padding-top: 0; padding-top: 0;
padding-bottom: 0;
box-sizing: border-box; box-sizing: border-box;
&:not(:last-child) { &:not(:last-child) {
margin-bottom: 20px; margin-bottom: 13px;
} }
.card-title { .card-title {
font-size: 18px; font-size: 18px;
@ -334,8 +337,9 @@ export default {
} }
} }
.intro-card { .intro-card {
height: 650px; height: 680px;
.intro-img { .intro-img {
display: block;
width: 100%; width: 100%;
height: 280px; height: 280px;
border-radius: 10px; border-radius: 10px;
@ -350,18 +354,19 @@ export default {
width: 100%; width: 100%;
height: 120px; height: 120px;
background-position: center; background-position: center;
background-position-x: -10px;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: contain; background-size: contain;
padding-top: 15px; padding-top: 15px;
& > div {
padding-right: 20%;
}
.intro-item-value { .intro-item-value {
margin-right: 10px; margin-right: 5px;
font-size: 32px; font-size: 36px;
-webkit-text-stroke: 1px #fff;
text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff;
font-weight: bold; font-weight: bold;
text-shadow: 0px 0px 1px #fff;
text-stroke: 1px #ffffff;
line-height: 38px;
text-transform: none;
-webkit-text-stroke: 1px #fff;
} }
} }
} }