yanghongwei
/
lg_frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

1、新增两侧看板布局

This commit is contained in:
lankuixing 2024-02-19 22:00:33 +08:00
parent 55fe602e97
commit 91ad9927f2
11 changed files with 296 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/AirQuality.vue
View File

@ -22,5 +22,9 @@ export default {
.air-quality-content {
width: 100%;
height: 601px;
background-image: linear-gradient(62deg, rgba(8,31,55,0.10) 0%, rgba(18,50,81,0.10) 100%);
border: 1px solid transparent; /* 先将边框颜色设置为透明 */
border-image: linear-gradient(rgba(79,182,238,0), rgba(39,127,216,1)); /* 使用线性渐变作为边框图片 */
border-image-slice: 1; /* 指定切分边框图像的位置 */
}
</style>

49
components/CheckData.vue Normal file
View File

@ -0,0 +1,49 @@
<!--实时检查数据-->
<template>
<div class="check-data">
<secondary-title :title="title" longBg>
<template>
<div class="right-tip">
注释：表头为“污染物名称[污染物标准值]”
</div>
</template>
</secondary-title>
</div>
</template>
<script>
export default {
name: "CheckData",
data() {
return {
title: '实时检查数据'
}
}
}
</script>
<style scoped lang="less">
@import "assets/styles/mixin";
.check-data {
margin-top: 43px;
height: 984px;
width: 100%;
background-image: linear-gradient(62deg, rgba(8, 31, 55, 0.10) 0%, rgba(18, 50, 81, 0.10) 100%);
border: 1px solid transparent; /* 先将边框颜色设置为透明 */
border-image: linear-gradient(rgba(79, 182, 238, 0), rgba(39, 127, 216, 1)); /* 使用线性渐变作为边框图片 */
border-image-slice: 1; /* 指定切分边框图像的位置 */
.right-tip {
height: 100%;
font-family: MicrosoftYaHei;
font-size: 29.97px;
color: #6AC4FF;
letter-spacing: 1.97px;
text-align: right;
font-weight: 400;
padding-right: 10px;
.flex-row;
}
}
</style>

31
components/DeviceRun.vue Normal file
View File

@ -0,0 +1,31 @@
<!--设备运行情况-->
<template>
<div class="device-run">
<secondary-title :title="title" longBg></secondary-title>
</div>
</template>
<script>
export default {
name: "DeviceRun",
data() {
return {
title: '设备运行情况'
}
}
}
</script>
<style scoped lang="less">
@import "assets/styles/mixin";
.device-run {
margin-top: 43px;
height: 416px;
width: 100%;
background-image: linear-gradient(62deg, rgba(8, 31, 55, 0.10) 0%, rgba(18, 50, 81, 0.10) 100%);
border: 1px solid transparent; /* 先将边框颜色设置为透明 */
border-image: linear-gradient(rgba(79, 182, 238, 0), rgba(39, 127, 216, 1)); /* 使用线性渐变作为边框图片 */
border-image-slice: 1; /* 指定切分边框图像的位置 */
}
</style>

33
components/EnergyUse.vue Normal file
View File

@ -0,0 +1,33 @@
<!--能源使用情况-->
<template>
<div class="energy-use">
<secondary-title :title="title">
<template>
<div class="right-tip">
</div>
</template>
</secondary-title>
</div>
</template>
<script>
export default {
name: "EnergyUse",
data() {
return {
title: '能源使用情况'
}
}
}
</script>
<style scoped lang="less">
.energy-use {
height: 777px;
width: 100%;
background-image: linear-gradient(62deg, rgba(8, 31, 55, 0.10) 0%, rgba(18, 50, 81, 0.10) 100%);
border: 1px solid transparent; /* 先将边框颜色设置为透明 */
border-image: linear-gradient(rgba(79, 182, 238, 0), rgba(39, 127, 216, 1)); /* 使用线性渐变作为边框图片 */
border-image-slice: 1; /* 指定切分边框图像的位置 */
}
</style>

33
components/EnterpriseOperations.vue Normal file
View File

@ -0,0 +1,33 @@
<!--企业运营情况-->
<template>
<div class="enterprise-operations">
<secondary-title :title="title">
<template>
<div class="right-tip">
</div>
</template>
</secondary-title>
</div>
</template>
<script>
export default {
name: "EnterpriseOperations",
data() {
return {
title: '企业运营情况'
}
}
}
</script>
<style scoped lang="less">
.enterprise-operations {
height: 777px;
width: 100%;
background-image: linear-gradient(62deg, rgba(8, 31, 55, 0.10) 0%, rgba(18, 50, 81, 0.10) 100%);
border: 1px solid transparent; /* 先将边框颜色设置为透明 */
border-image: linear-gradient(rgba(79, 182, 238, 0), rgba(39, 127, 216, 1)); /* 使用线性渐变作为边框图片 */
border-image-slice: 1; /* 指定切分边框图像的位置 */
}
</style>

32
components/LatestWarning.vue Normal file
View File

@ -0,0 +1,32 @@
<!--最新预警-->
<template>
<div class="latest-warning">
<secondary-title :title="title"/>
</div>
</template>
<script>
export default {
name: "LatestWarning",
data() {
return {
title: '最新预警'
}
}
}
</script>
<style scoped lang="less">
@import "assets/styles/mixin";
.latest-warning {
margin-top: 43px;
height: 984px;
width: 100%;
background-image: linear-gradient(62deg, rgba(8, 31, 55, 0.10) 0%, rgba(18, 50, 81, 0.10) 100%);
border: 1px solid transparent; /* 先将边框颜色设置为透明 */
border-image: linear-gradient(rgba(79, 182, 238, 0), rgba(39, 127, 216, 1)); /* 使用线性渐变作为边框图片 */
border-image-slice: 1; /* 指定切分边框图像的位置 */
}
</style>

29
components/OverviewPollutants.vue Normal file
View File

@ -0,0 +1,29 @@
<!--污染物信息总览-->
<template>
<div class="overview-pollutants">
<secondary-title :title="title" longBg/>
</div>
</template>
<script>
export default {
name: "OverviewPollutants",
data() {
return {
title: '污染物信息总览'
}
}
}
</script>
<style scoped lang="less">
.overview-pollutants {
margin-top: 43px;
height: 601px;
width: 100%;
background-image: linear-gradient(62deg, rgba(8,31,55,0.10) 0%, rgba(18,50,81,0.10) 100%);
border: 1px solid transparent; /* 先将边框颜色设置为透明 */
border-image: linear-gradient(rgba(79,182,238,0), rgba(39,127,216,1)); /* 使用线性渐变作为边框图片 */
border-image-slice: 1; /* 指定切分边框图像的位置 */
}
</style>

13
components/PollutantTrends.vue
View File

@ -1,13 +1,18 @@
<!--首要污染物变化趋势-->
<template>
<div class="pollutant-trends">
<secondary-title :title="title"/>
</div>
</template>
<script>
export default {
name: "PollutantTrends"
name: "PollutantTrends",
data() {
return {
title: '首要污染物变化趋势'
}
}
}
</script>
@ -15,5 +20,9 @@ export default {
.pollutant-trends{
width: 100%;
height: 601px;
background-image: linear-gradient(62deg, rgba(8,31,55,0.10) 0%, rgba(18,50,81,0.10) 100%);
border: 1px solid transparent; /* 先将边框颜色设置为透明 */
border-image: linear-gradient(rgba(79,182,238,0), rgba(39,127,216,1)); /* 使用线性渐变作为边框图片 */
border-image-slice: 1; /* 指定切分边框图像的位置 */
}
</style>

10
components/SecondaryTitle.vue
View File

@ -33,26 +33,28 @@ export default {
background: url("assets/peakCoalImages/coommon/small-seconfary-title-bg.png") no-repeat;
background-size: 100% 100%;
.clear-fix;
&.longBg {
width: 100%;
height: 84px;
background: url("assets/peakCoalImages/coommon/long-seconfary-title-bg.png") no-repeat;
background-size: 100% 100%;
}
._title {
padding-left: 100px;
float: left;
font-family: AlimamaShuHeiTi-Bold;
font-size: 46.24px;
color: transparent;
color: #D8F0FF;
letter-spacing: 3.04px;
text-shadow: 0 0 25px rgba(0, 145, 255, 0.50);
font-weight: 700;
background-image: linear-gradient(rgba(0,145,255,1), rgba(0,145,255,0.5),rgba(216,240,255,1));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
._right {
float: right;
height: 100%;
}
}

32
components/WarningStatistics.vue Normal file
View File

@ -0,0 +1,32 @@
<!--智能预警统计-->
<template>
<div class="warning-statistics">
<secondary-title :title="title"/>
</div>
</template>
<script>
export default {
name: "WarningStatistics",
data() {
return {
title: '智能预警统计'
}
}
}
</script>
<style scoped lang="less">
@import "assets/styles/mixin";
.warning-statistics {
margin-top: 43px;
height: 984px;
width: 100%;
background-image: linear-gradient(62deg, rgba(8, 31, 55, 0.10) 0%, rgba(18, 50, 81, 0.10) 100%);
border: 1px solid transparent; /* 先将边框颜色设置为透明 */
border-image: linear-gradient(rgba(79, 182, 238, 0), rgba(39, 127, 216, 1)); /* 使用线性渐变作为边框图片 */
border-image-slice: 1; /* 指定切分边框图像的位置 */
}
</style>

38
pages/visual/PeakCoalView.vue
View File

@ -8,11 +8,19 @@
<!-- 左侧内容-->
<div class="left-content">
<div class="left-data-panel">
<a-row>
<a-row :gutter="24">
<a-col :span="12">
<air-quality/>
</a-col>
<a-col :span="12"></a-col>
<a-col :span="12">
<pollutant-trends/>
</a-col>
<a-col :span="24">
<overview-pollutants/>
</a-col>
<a-col :span="24">
<check-data/>
</a-col>
</a-row>
</div>
</div>
@ -24,7 +32,23 @@
<!-- 右侧内容-->
<div class="right-content">
<div class="right-data-panel">
<a-row :gutter="24">
<a-col :span="12">
<energy-use/>
</a-col>
<a-col :span="12">
<enterprise-operations/>
</a-col>
<a-col :span="24">
<device-run/>
</a-col>
<a-col :span="12">
<warning-statistics/>
</a-col>
<a-col :span="12">
<latest-warning/>
</a-col>
</a-row>
</div>
</div>
</div>
@ -136,12 +160,12 @@ body, html, #__nuxt, #__layout {
width: 2935px;
height: 2721px;
background: url("assets/peakCoalImages/left/left-content-bg.png") no-repeat center 60px;
padding: 206px 476px 100px 412px;
padding: 300px 476px 100px 412px;
.left-data-panel {
height: 100%;
width: 100%;
transform: rotate(2deg);
}
}
@ -152,8 +176,12 @@ body, html, #__nuxt, #__layout {
width: 2935px;
height: 2721px;
background: url("assets/peakCoalImages/right/right-content-bg.png") no-repeat center 60px;
padding: 300px 476px 100px 480px;
.right-data-panel {
height: 100%;
width: 100%;
transform: rotate(-2deg);
}
}