1、新增两侧看板布局
This commit is contained in:
lankuixing
parent
667e274b3f
commit
7285b415f0
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -0,0 +1,19 @@
|
|||
@font-face {
|
||||
font-family: AlimamaShuHeiTi-Bold;
|
||||
src: url("./Alimama_ShuHeiTi_Bold.ttf") format("truetype");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: YouSheBiaoTiHei;
|
||||
src: url("./优设标题黑.ttf") format("truetype");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: MicrosoftYaHei;
|
||||
src: url("./Microsoft-YaHei-Bold.ttf") format("truetype");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: MicrosoftYaHei-Bold;
|
||||
src: url("./Microsoft-YaHei-Bold.ttf") format("truetype");
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 72 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 984 B |
Binary file not shown.
|
After Width: | Height: | Size: 908 B |
Binary file not shown.
|
After Width: | Height: | Size: 5.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 256 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
|
|
@ -1,3 +1,4 @@
|
|||
@import "@/assets/fonts/fonts.less";
|
||||
//表单元素垂直居中对齐（也可设置顶对齐，底对齐）
|
||||
.form-element-v-align(@alignment: middle){
|
||||
display: inline-block;
|
||||
|
|
@ -82,3 +83,13 @@
|
|||
flex-flow: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.flex-column{
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
}
|
||||
.text-ellipsis{
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,6 +2,16 @@
|
|||
<template>
|
||||
<div class="air-quality-content">
|
||||
<secondary-title :title="title"/>
|
||||
<div class="air-data">
|
||||
<div class="excellent-rate">
|
||||
<div class="_title">空气质量</div>
|
||||
<div class="_title">优良率</div>
|
||||
<div class="num-bg">
|
||||
90%
|
||||
</div>
|
||||
</div>
|
||||
<div class="air-quality-trend"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -22,9 +32,50 @@ 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; /* 指定切分边框图像的位置 */
|
||||
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; !* 指定切分边框图像的位置 *!*/
|
||||
.flex-column;
|
||||
|
||||
.air-data {
|
||||
flex: 1;
|
||||
.flex-row;
|
||||
|
||||
.excellent-rate {
|
||||
width: 346px;
|
||||
height: 100%;
|
||||
.flex-column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
._title {
|
||||
font-family: MicrosoftYaHei;
|
||||
font-size: 34.25px;
|
||||
color: #6AC4FF;
|
||||
letter-spacing: 2.25px;
|
||||
text-align: center;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.num-bg {
|
||||
width: 239px;
|
||||
height: 270px;
|
||||
background: url("assets/peakCoalImages/left/air-excellent-rate-bg.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
font-family: YouSheBiaoTiHei;
|
||||
font-size: 85.62px;
|
||||
color: #FFFFFF;
|
||||
letter-spacing: 5.63px;
|
||||
font-weight: 700;
|
||||
line-height: 200px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.air-quality-trend {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -8,6 +8,72 @@
|
|||
</div>
|
||||
</template>
|
||||
</secondary-title>
|
||||
<div class="check-data-info">
|
||||
<div class="table-info">
|
||||
<div class="table-header">
|
||||
<div class="table-header-item" v-for="(item,index) of tableHeaderData"
|
||||
:style="`width:${tableItemWidthList[index]}%`">
|
||||
{{ item }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-body">
|
||||
<div class="table-item-body" v-for="item of dataSource">
|
||||
<div class="point-name" :style="`width:${tableItemWidthList[0]}%`" :title="item.pointName">{{
|
||||
item.pointName
|
||||
}}
|
||||
</div>
|
||||
<div class="data-value" :style="`width:${tableItemWidthList[1]}%`">
|
||||
<div class="_value">
|
||||
{{ `${item.COValue}${item.COUnit}` }}
|
||||
</div>
|
||||
<div :class="getOddsRatioIcon(item.COValue,'COStandardValue')">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-value" :style="`width:${tableItemWidthList[2]}%`">
|
||||
<div class="_value">
|
||||
{{ `${item.SO2Value}${item.SO2Unit}` }}
|
||||
</div>
|
||||
<div :class="getOddsRatioIcon(item.SO2Value,'SO2StandardValue')">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-value" :style="`width:${tableItemWidthList[3]}%`">
|
||||
<div class="_value">
|
||||
{{ `${item.NOValue}${item.NOUnit}` }}
|
||||
</div>
|
||||
<div :class="getOddsRatioIcon(item.NOValue,'NOStandardValue')">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-value" :style="`width:${tableItemWidthList[4]}%`">
|
||||
<div class="_value">
|
||||
{{ `${item.O3Value}${item.O3Unit}` }}
|
||||
</div>
|
||||
<div :class="getOddsRatioIcon(item.O3Value,'O3StandardValue')">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-value" :style="`width:${tableItemWidthList[5]}%`">
|
||||
<div class="_value">
|
||||
{{ `${item.PM10Value}${item.PM10Unit}` }}
|
||||
</div>
|
||||
<div :class="getOddsRatioIcon(item.PM10Value,'PM10StandardValue')">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-value" :style="`width:${tableItemWidthList[6]}%`">
|
||||
<div class="_value">
|
||||
{{ `${item.PM25Value}${item.PM25Unit}` }}
|
||||
</div>
|
||||
<div :class="getOddsRatioIcon(item.PM25Value,'PM25StandardValue')">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -16,7 +82,194 @@ export default {
|
|||
name: "CheckData",
|
||||
data() {
|
||||
return {
|
||||
title: '实时检查数据'
|
||||
title: '实时检查数据',
|
||||
tableItemWidthList: [12, 16, 16, 16, 13, 14, 13],
|
||||
standardValue: {
|
||||
COStandardValue: 0.5,
|
||||
SO2StandardValue: 30,
|
||||
NOStandardValue: 10,
|
||||
O3StandardValue: 80,
|
||||
PM10StandardValue: 50,
|
||||
PM25StandardValue: 40
|
||||
},
|
||||
tableHeaderData: ['监测设备', '一氧化碳[0.5%VOL]', '二氧化硫[30mg/m³]', '氮氧化物[10mg/L]', '臭氧[80⏜ppm]', 'PM10[50μg/m³]', 'PM2.5[40μg/m³]'],
|
||||
dataSource: [
|
||||
{
|
||||
pointName: '监测设备名称',
|
||||
COValue: 2,
|
||||
COUnit: '%VOL',
|
||||
SO2Value: 30,
|
||||
SO2Unit: 'mg/m³',
|
||||
NOValue: 20,
|
||||
NOUnit: 'mg/L',
|
||||
O3Value: 10,
|
||||
O3Unit: 'ppm',
|
||||
PM10Value: 10,
|
||||
PM10Unit: 'μg/m³',
|
||||
PM25Value: 30,
|
||||
PM25Unit: 'μg/m³'
|
||||
},
|
||||
{
|
||||
pointName: '监测设备名称',
|
||||
COValue: 2,
|
||||
COUnit: '%VOL',
|
||||
SO2Value: 30,
|
||||
SO2Unit: 'mg/m³',
|
||||
NOValue: 20,
|
||||
NOUnit: 'mg/L',
|
||||
O3Value: 10,
|
||||
O3Unit: 'ppm',
|
||||
PM10Value: 10,
|
||||
PM10Unit: 'μg/m³',
|
||||
PM25Value: 30,
|
||||
PM25Unit: 'μg/m³'
|
||||
},
|
||||
{
|
||||
pointName: '监测设备名称',
|
||||
COValue: 2,
|
||||
COUnit: '%VOL',
|
||||
SO2Value: 30,
|
||||
SO2Unit: 'mg/m³',
|
||||
NOValue: 20,
|
||||
NOUnit: 'mg/L',
|
||||
O3Value: 10,
|
||||
O3Unit: 'ppm',
|
||||
PM10Value: 10,
|
||||
PM10Unit: 'μg/m³',
|
||||
PM25Value: 30,
|
||||
PM25Unit: 'μg/m³'
|
||||
},
|
||||
{
|
||||
pointName: '监测设备名称',
|
||||
COValue: 2,
|
||||
COUnit: '%VOL',
|
||||
SO2Value: 30,
|
||||
SO2Unit: 'mg/m³',
|
||||
NOValue: 20,
|
||||
NOUnit: 'mg/L',
|
||||
O3Value: 10,
|
||||
O3Unit: 'ppm',
|
||||
PM10Value: 10,
|
||||
PM10Unit: 'μg/m³',
|
||||
PM25Value: 30,
|
||||
PM25Unit: 'μg/m³'
|
||||
},
|
||||
{
|
||||
pointName: '监测设备名称',
|
||||
COValue: 2,
|
||||
COUnit: '%VOL',
|
||||
SO2Value: 30,
|
||||
SO2Unit: 'mg/m³',
|
||||
NOValue: 20,
|
||||
NOUnit: 'mg/L',
|
||||
O3Value: 10,
|
||||
O3Unit: 'ppm',
|
||||
PM10Value: 10,
|
||||
PM10Unit: 'μg/m³',
|
||||
PM25Value: 30,
|
||||
PM25Unit: 'μg/m³'
|
||||
},
|
||||
{
|
||||
pointName: '监测设备名称',
|
||||
COValue: 2,
|
||||
COUnit: '%VOL',
|
||||
SO2Value: 30,
|
||||
SO2Unit: 'mg/m³',
|
||||
NOValue: 20,
|
||||
NOUnit: 'mg/L',
|
||||
O3Value: 10,
|
||||
O3Unit: 'ppm',
|
||||
PM10Value: 10,
|
||||
PM10Unit: 'μg/m³',
|
||||
PM25Value: 30,
|
||||
PM25Unit: 'μg/m³'
|
||||
},
|
||||
{
|
||||
pointName: '监测设备名称',
|
||||
COValue: 2,
|
||||
COUnit: '%VOL',
|
||||
SO2Value: 30,
|
||||
SO2Unit: 'mg/m³',
|
||||
NOValue: 20,
|
||||
NOUnit: 'mg/L',
|
||||
O3Value: 10,
|
||||
O3Unit: 'ppm',
|
||||
PM10Value: 10,
|
||||
PM10Unit: 'μg/m³',
|
||||
PM25Value: 30,
|
||||
PM25Unit: 'μg/m³'
|
||||
},
|
||||
{
|
||||
pointName: '监测设备名称',
|
||||
COValue: 2,
|
||||
COUnit: '%VOL',
|
||||
SO2Value: 30,
|
||||
SO2Unit: 'mg/m³',
|
||||
NOValue: 20,
|
||||
NOUnit: 'mg/L',
|
||||
O3Value: 10,
|
||||
O3Unit: 'ppm',
|
||||
PM10Value: 10,
|
||||
PM10Unit: 'μg/m³',
|
||||
PM25Value: 30,
|
||||
PM25Unit: 'μg/m³'
|
||||
},
|
||||
{
|
||||
pointName: '监测设备名称',
|
||||
COValue: 2,
|
||||
COUnit: '%VOL',
|
||||
SO2Value: 30,
|
||||
SO2Unit: 'mg/m³',
|
||||
NOValue: 20,
|
||||
NOUnit: 'mg/L',
|
||||
O3Value: 10,
|
||||
O3Unit: 'ppm',
|
||||
PM10Value: 10,
|
||||
PM10Unit: 'μg/m³',
|
||||
PM25Value: 30,
|
||||
PM25Unit: 'μg/m³'
|
||||
},
|
||||
{
|
||||
pointName: '监测设备名称',
|
||||
COValue: 2,
|
||||
COUnit: '%VOL',
|
||||
SO2Value: 30,
|
||||
SO2Unit: 'mg/m³',
|
||||
NOValue: 20,
|
||||
NOUnit: 'mg/L',
|
||||
O3Value: 10,
|
||||
O3Unit: 'ppm',
|
||||
PM10Value: 10,
|
||||
PM10Unit: 'μg/m³',
|
||||
PM25Value: 30,
|
||||
PM25Unit: 'μg/m³'
|
||||
},
|
||||
{
|
||||
pointName: '监测设备名称',
|
||||
COValue: 2,
|
||||
COUnit: '%VOL',
|
||||
SO2Value: 30,
|
||||
SO2Unit: 'mg/m³',
|
||||
NOValue: 20,
|
||||
NOUnit: 'mg/L',
|
||||
O3Value: 10,
|
||||
O3Unit: 'ppm',
|
||||
PM10Value: 10,
|
||||
PM10Unit: 'μg/m³',
|
||||
PM25Value: 30,
|
||||
PM25Unit: 'μg/m³'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
//判断数值是上升还是下降
|
||||
getOddsRatioIcon(val, valType) {
|
||||
if (val > this.standardValue[valType]) {
|
||||
return 'odds-ratio-up-icon'
|
||||
} else if (val < this.standardValue[valType]) {
|
||||
return 'odds-ratio-reduction-icon'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -27,12 +280,14 @@ export default {
|
|||
|
||||
.check-data {
|
||||
margin-top: 43px;
|
||||
height: 984px;
|
||||
height: 1100px;
|
||||
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; /* 指定切分边框图像的位置 */
|
||||
/* border: 1px inset transparent; !* 先将边框颜色设置为透明 *!
|
||||
border-image: linear-gradient(rgba(79, 182, 238, 0), rgba(39, 127, 216, 1)); !* 使用线性渐变作为边框图片 *!
|
||||
border-image-slice: 1; !* 指定切分边框图像的位置 *!*/
|
||||
.flex-column;
|
||||
overflow: hidden;
|
||||
|
||||
.right-tip {
|
||||
height: 100%;
|
||||
|
|
@ -45,5 +300,100 @@ export default {
|
|||
padding-right: 10px;
|
||||
.flex-row;
|
||||
}
|
||||
|
||||
.check-data-info {
|
||||
flex: 1;
|
||||
padding: 30px 20px 0 20px;
|
||||
height: 0;
|
||||
.table-info {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.flex-column;
|
||||
|
||||
.table-header {
|
||||
height: 77px;
|
||||
background-color: rgba(35, 140, 255, 0.2);
|
||||
padding: 0 20px;
|
||||
.flex-row;
|
||||
|
||||
.table-header-item {
|
||||
font-family: MicrosoftYaHei-Bold;
|
||||
font-size: 29.97px;
|
||||
color: #37EAFF;
|
||||
letter-spacing: 0;
|
||||
text-align: left;
|
||||
line-height: 34.25px;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
.table-body {
|
||||
height: calc(100% - 77px);
|
||||
overflow-y: auto;
|
||||
|
||||
.table-item-body {
|
||||
height: 77px;
|
||||
background: rgba(21, 77, 160, 0.20);
|
||||
margin-top: 20px;
|
||||
.flex-row;
|
||||
|
||||
.point-name {
|
||||
font-family: MicrosoftYaHei-Bold;
|
||||
font-size: 29.97px;
|
||||
color: #FFFFFF;
|
||||
letter-spacing: 0;
|
||||
line-height: 34.25px;
|
||||
font-weight: 700;
|
||||
text-align: left;
|
||||
.text-ellipsis;
|
||||
}
|
||||
|
||||
.data-value {
|
||||
.flex-row;
|
||||
justify-content: center;
|
||||
|
||||
._value {
|
||||
font-family: MicrosoftYaHei-Bold;
|
||||
font-size: 29.97px;
|
||||
color: #FFFFFF;
|
||||
letter-spacing: 0;
|
||||
text-align: center;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.odds-ratio-up-icon {
|
||||
width: 23px;
|
||||
height: 25px;
|
||||
background: url("assets/peakCoalImages/left/odds-ratio-up-icon.png") no-repeat;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.odds-ratio-reduction-icon {
|
||||
width: 22px;
|
||||
height: 26px;
|
||||
background: url("assets/peakCoalImages/left/odds-ratio-reduction-icon.png") no-repeat;
|
||||
padding-left: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
border-radius: 5px;
|
||||
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
|
||||
background-color: rgba(21, 77, 160, 0.20);;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
|
||||
border-radius: 5px;
|
||||
background-color: #d3dce6;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -2,6 +2,67 @@
|
|||
<template>
|
||||
<div class="device-run">
|
||||
<secondary-title :title="title" longBg></secondary-title>
|
||||
<div class="device-run-info">
|
||||
<div class="device-run-item-info">
|
||||
<div class="monitor-point-icon"></div>
|
||||
<div class="data-value-info">
|
||||
<div class="monitor-point-total">
|
||||
<div class="_title">监控点</div>
|
||||
<div class="value-content">
|
||||
<div class="text-bg"></div>
|
||||
<div class="_value">287</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="monitor-point-total">
|
||||
<div class="_title">在线率</div>
|
||||
<div class="value-content">
|
||||
<div class="text-bg"></div>
|
||||
<div class="_value">98%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="device-run-item-info">
|
||||
<div class="microsite-icon"></div>
|
||||
<div class="data-value-info">
|
||||
<div class="monitor-point-total">
|
||||
<div class="_title">微站</div>
|
||||
<div class="value-content">
|
||||
<div class="text-bg"></div>
|
||||
<div class="_value">287</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="monitor-point-total">
|
||||
<div class="_title">在线率</div>
|
||||
<div class="value-content">
|
||||
<div class="text-bg"></div>
|
||||
<div class="_value">98%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="device-run-item-info">
|
||||
<div class="tester-icon"></div>
|
||||
<div class="data-value-info">
|
||||
<div class="monitor-point-total">
|
||||
<div class="_title">深度检测仪</div>
|
||||
<div class="value-content">
|
||||
<div class="text-bg"></div>
|
||||
<div class="_value">287</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="monitor-point-total">
|
||||
<div class="_title">在线率</div>
|
||||
<div class="value-content">
|
||||
<div class="text-bg"></div>
|
||||
<div class="_value">98%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -24,8 +85,81 @@ export default {
|
|||
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; /* 指定切分边框图像的位置 */
|
||||
/* border: 1px solid transparent; !* 先将边框颜色设置为透明 *!
|
||||
border-image: linear-gradient(rgba(79, 182, 238, 0), rgba(39, 127, 216, 1)); !* 使用线性渐变作为边框图片 *!
|
||||
border-image-slice: 1; !* 指定切分边框图像的位置 *!*/
|
||||
.flex-column;
|
||||
|
||||
.device-run-info {
|
||||
flex: 1;
|
||||
height: 0;
|
||||
padding: 0 50px;
|
||||
.flex-row;
|
||||
justify-content: space-between;
|
||||
|
||||
.device-run-item-info {
|
||||
.flex-row;
|
||||
|
||||
.monitor-point-icon {
|
||||
width: 173px;
|
||||
height: 172px;
|
||||
background: url("assets/peakCoalImages/right/monitor-point-icon.png") no-repeat;
|
||||
}
|
||||
|
||||
.microsite-icon {
|
||||
width: 172px;
|
||||
height: 173px;
|
||||
background: url("assets/peakCoalImages/right/microsite-icon.png") no-repeat;
|
||||
}
|
||||
|
||||
.tester-icon {
|
||||
width: 173px;
|
||||
height: 173px;
|
||||
background: url("assets/peakCoalImages/right/tester-icon.png") no-repeat;
|
||||
}
|
||||
|
||||
.data-value-info {
|
||||
padding-left: 20px;
|
||||
|
||||
.monitor-point-total {
|
||||
.flex-row;
|
||||
height: 112px;
|
||||
|
||||
._title {
|
||||
width: 200px;
|
||||
font-family: MicrosoftYaHei;
|
||||
font-size: 34.3px;
|
||||
color: #6AC4FF;
|
||||
letter-spacing: 2.26px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.value-content {
|
||||
position: relative;
|
||||
height: 112px;
|
||||
width: 250px;
|
||||
.text-bg {
|
||||
width: 250px;
|
||||
height: 47px;
|
||||
position: absolute;
|
||||
bottom: 30px;
|
||||
background-image: linear-gradient(270deg, rgba(0, 122, 255, 0.00) 0%, rgba(0, 205, 255, 0.47) 100%);
|
||||
}
|
||||
|
||||
._value {
|
||||
padding-left: 20px;
|
||||
position: absolute;
|
||||
font-family: YouSheBiaoTiHei;
|
||||
font-size: 85.76px;
|
||||
color: #FFFFFF;
|
||||
letter-spacing: 5.64px;
|
||||
font-weight: 400;
|
||||
line-height: 60px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -7,6 +7,24 @@
|
|||
</div>
|
||||
</template>
|
||||
</secondary-title>
|
||||
<div class="energy-use-info">
|
||||
<div class="electricity-water-usage">
|
||||
<div class="electricity-usage">
|
||||
<div class="electricity-icon"></div>
|
||||
<div class="electricity-info">
|
||||
<div class="_title">今日用电[kwh]</div>
|
||||
<div class="_value">1244</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="water-usage">
|
||||
<div class="water-icon"></div>
|
||||
<div class="water-info">
|
||||
<div class="_title">今日用水[m³]</div>
|
||||
<div class="_value">185</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -22,12 +40,69 @@ export default {
|
|||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import "assets/styles/mixin";
|
||||
|
||||
.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; /* 指定切分边框图像的位置 */
|
||||
/* border: 1px solid transparent; !* 先将边框颜色设置为透明 *!
|
||||
border-image: linear-gradient(rgba(79, 182, 238, 0), rgba(39, 127, 216, 1)); !* 使用线性渐变作为边框图片 *!
|
||||
border-image-slice: 1; !* 指定切分边框图像的位置 *!*/
|
||||
.flex-column;
|
||||
|
||||
.energy-use-info {
|
||||
flex: 1;
|
||||
height: 0;
|
||||
padding: 0 50px;
|
||||
|
||||
.electricity-water-usage {
|
||||
height: 247px;
|
||||
.flex-row;
|
||||
justify-content: space-between;
|
||||
|
||||
.electricity-usage {
|
||||
.flex-row;
|
||||
|
||||
.electricity-icon {
|
||||
width: 132px;
|
||||
height: 159px;
|
||||
background: url("assets/peakCoalImages/right/electricity-icon.png") no-repeat;
|
||||
}
|
||||
.electricity-info{
|
||||
padding-left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.water-usage{
|
||||
.flex-row;
|
||||
|
||||
.water-icon {
|
||||
width: 132px;
|
||||
height: 159px;
|
||||
background: url("assets/peakCoalImages/right/water-icon.png") no-repeat;
|
||||
}
|
||||
.water-info{
|
||||
padding-left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
._title {
|
||||
font-family: MicrosoftYaHei;
|
||||
font-size: 34.3px;
|
||||
color: #6AC4FF;
|
||||
letter-spacing: 2.26px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
._value {
|
||||
font-family: YouSheBiaoTiHei;
|
||||
font-size: 85.76px;
|
||||
color: #FFFFFF;
|
||||
letter-spacing: 5.64px;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -7,6 +7,25 @@
|
|||
</div>
|
||||
</template>
|
||||
</secondary-title>
|
||||
<div class="enterprise-operations-info">
|
||||
<div class="operational-value-info">
|
||||
<div class="operational-value-item-info">
|
||||
<div class="_title">氮气外供[m³]</div>
|
||||
<div class="_value">124</div>
|
||||
<div class="_icon"></div>
|
||||
</div>
|
||||
<div class="operational-value-item-info">
|
||||
<div class="_title">液化石油气[t]</div>
|
||||
<div class="_value">1123</div>
|
||||
<div class="_icon"></div>
|
||||
</div>
|
||||
<div class="operational-value-item-info">
|
||||
<div class="_title">氧气外供[m³]</div>
|
||||
<div class="_value">185</div>
|
||||
<div class="_icon"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -22,12 +41,57 @@ export default {
|
|||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import "assets/styles/mixin";
|
||||
|
||||
.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; /* 指定切分边框图像的位置 */
|
||||
/* border: 1px solid transparent; !* 先将边框颜色设置为透明 *!
|
||||
border-image: linear-gradient(rgba(79, 182, 238, 0), rgba(39, 127, 216, 1)); !* 使用线性渐变作为边框图片 *!
|
||||
border-image-slice: 1; !* 指定切分边框图像的位置 *!*/
|
||||
.flex-column;
|
||||
|
||||
.enterprise-operations-info {
|
||||
flex: 1;
|
||||
height: 0;
|
||||
padding: 0 50px;
|
||||
|
||||
.operational-value-info {
|
||||
height: 247px;
|
||||
.flex-row;
|
||||
justify-content: space-between;
|
||||
|
||||
.operational-value-item-info {
|
||||
position: relative;
|
||||
|
||||
._title {
|
||||
font-family: MicrosoftYaHei;
|
||||
font-size: 34.3px;
|
||||
color: #6AC4FF;
|
||||
letter-spacing: 2.26px;
|
||||
font-weight: 400;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
._value {
|
||||
font-family: YouSheBiaoTiHei;
|
||||
font-size: 85.76px;
|
||||
color: #FFFFFF;
|
||||
letter-spacing: 5.64px;
|
||||
font-weight: 400;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
._icon {
|
||||
position: absolute;
|
||||
bottom: -20px;
|
||||
width: 252px;
|
||||
height: 67px;
|
||||
background: url("assets/peakCoalImages/right/operational-icon.png") no-repeat;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -2,18 +2,83 @@
|
|||
<template>
|
||||
<div class="latest-warning">
|
||||
<secondary-title :title="title"/>
|
||||
|
||||
<div class="latest-warning-info">
|
||||
<div class="warning-data-list">
|
||||
<vue-seamless-scroll
|
||||
v-if="warningDataList.length"
|
||||
ref="vueSeamless"
|
||||
:data="warningDataList"
|
||||
class="seamless-scroll"
|
||||
:class-option="defaultOption"
|
||||
>
|
||||
<div v-for="item of warningDataList" :key="item.indexCode" class="event-item">
|
||||
<warning-info-item :data-item="item"/>
|
||||
</div>
|
||||
</vue-seamless-scroll>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import vueSeamlessScroll from 'vue-seamless-scroll'
|
||||
|
||||
export default {
|
||||
name: "LatestWarning",
|
||||
components: {vueSeamlessScroll},
|
||||
data() {
|
||||
return {
|
||||
title: '最新预警'
|
||||
title: '最新预警',
|
||||
warningDataList: [
|
||||
{
|
||||
indexCode: '001',
|
||||
snapImgUrl: 'https://img1.baidu.com/it/u=1579566612,4009913306&fm=253&fmt=auto&app=138&f=JPEG?w=693&h=417',
|
||||
warningName: '区域入侵',
|
||||
site: 'xxx地区西门',
|
||||
warningTime: '2023-12-12 12:32:45',
|
||||
state: 1
|
||||
},
|
||||
{
|
||||
indexCode: '002',
|
||||
snapImgUrl: 'https://img1.baidu.com/it/u=1579566612,4009913306&fm=253&fmt=auto&app=138&f=JPEG?w=693&h=417',
|
||||
warningName: '区域入侵',
|
||||
site: 'xxx地区西门',
|
||||
warningTime: '2023-12-12 12:32:45',
|
||||
state: 0
|
||||
},
|
||||
{
|
||||
indexCode: '003',
|
||||
snapImgUrl: 'https://img1.baidu.com/it/u=1579566612,4009913306&fm=253&fmt=auto&app=138&f=JPEG?w=693&h=417',
|
||||
warningName: '区域入侵',
|
||||
site: 'xxx地区西门',
|
||||
warningTime: '2023-12-12 12:32:45',
|
||||
state: 1
|
||||
},
|
||||
{
|
||||
indexCode: '004',
|
||||
snapImgUrl: 'https://img1.baidu.com/it/u=1579566612,4009913306&fm=253&fmt=auto&app=138&f=JPEG?w=693&h=417',
|
||||
warningName: '区域入侵',
|
||||
site: 'xxx地区西门',
|
||||
warningTime: '2023-12-12 12:32:45',
|
||||
state: 1
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
defaultOption() {
|
||||
return {
|
||||
step: 0.3, // 数值越大速度滚动越快
|
||||
limitMoveNum: 4, // 开始无缝滚动的数据量 this.dataList.length
|
||||
hoverStop: true, // 是否开启鼠标悬停stop
|
||||
direction: 1, // 0向下 1向上 2向左 3向右
|
||||
openWatch: true, // 开启数据实时监控刷新dom
|
||||
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
|
||||
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
|
||||
waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -25,8 +90,28 @@ export default {
|
|||
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; /* 指定切分边框图像的位置 */
|
||||
/* border: 1px solid transparent; !* 先将边框颜色设置为透明 *!
|
||||
border-image: linear-gradient(rgba(79, 182, 238, 0), rgba(39, 127, 216, 1)); !* 使用线性渐变作为边框图片 *!
|
||||
border-image-slice: 1; !* 指定切分边框图像的位置 *!*/
|
||||
.flex-column;
|
||||
|
||||
.latest-warning-info {
|
||||
flex: 1;
|
||||
height: 0;
|
||||
padding: 0 50px;
|
||||
|
||||
.warning-data-list {
|
||||
height: 100%;
|
||||
padding-top: 20px;
|
||||
.seamless-scroll {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
.event-item {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -2,6 +2,21 @@
|
|||
<template>
|
||||
<div class="overview-pollutants">
|
||||
<secondary-title :title="title" longBg/>
|
||||
<div class="pollutants-data">
|
||||
<div class="pollutant-values-list">
|
||||
<div class="pollutant-values" v-for="(item,index) of pollutantValuesDataList">
|
||||
<div class="pollutant-statue" :class="getPollutantStatueIcon(item.standardValue,item.actualValue)"></div>
|
||||
<div class="pollutant-other-info">
|
||||
<div class="_name">{{ item.pollutantName }}</div>
|
||||
<div class="standard-value">标准：{{ item.standardValue }}</div>
|
||||
</div>
|
||||
<div class="pollutant-value-info">
|
||||
<div class="_value">{{ item.actualValue }}</div>
|
||||
<div class="_unit">{{ item.unit }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -10,20 +25,160 @@ export default {
|
|||
name: "OverviewPollutants",
|
||||
data() {
|
||||
return {
|
||||
title: '污染物信息总览'
|
||||
title: '污染物信息总览',
|
||||
pollutantValuesDataList: [
|
||||
{
|
||||
pollutantName: '一氧化碳',
|
||||
standardValue: 60,
|
||||
actualValue: '9.0',
|
||||
unit: 'ug/m³'
|
||||
},
|
||||
{
|
||||
pollutantName: 'NO2',
|
||||
standardValue: 60,
|
||||
actualValue: '60',
|
||||
unit: 'ug/m³'
|
||||
},
|
||||
{
|
||||
pollutantName: 'PM10',
|
||||
standardValue: 60,
|
||||
actualValue: '60',
|
||||
unit: 'ug/m³'
|
||||
},
|
||||
{
|
||||
pollutantName: 'CO',
|
||||
standardValue: 60,
|
||||
actualValue: '70',
|
||||
unit: 'ug/m³'
|
||||
},
|
||||
{
|
||||
pollutantName: 'O3',
|
||||
standardValue: 60,
|
||||
actualValue: '60',
|
||||
unit: 'ug/m³'
|
||||
},
|
||||
{
|
||||
pollutantName: 'PM2.5',
|
||||
standardValue: 60,
|
||||
actualValue: '9.0',
|
||||
unit: 'ug/m³'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getPollutantStatueIcon(standardValue, actualValue) {
|
||||
let value = parseFloat(actualValue)
|
||||
if (value === standardValue) {
|
||||
return 'pollutant-level-icon'
|
||||
} else if (value < standardValue) {
|
||||
return 'pollutant-reduction-icon'
|
||||
} else if (value > standardValue) {
|
||||
return 'pollutant-up-icon'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import "assets/styles/mixin";
|
||||
|
||||
.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; /* 指定切分边框图像的位置 */
|
||||
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; !* 指定切分边框图像的位置 *!*/
|
||||
.flex-column;
|
||||
|
||||
.pollutants-data {
|
||||
flex: 1;
|
||||
.flex-row;
|
||||
|
||||
.pollutant-values-list {
|
||||
height: 100%;
|
||||
width: 50%;
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
justify-content: flex-start;
|
||||
flex-wrap: wrap;
|
||||
padding-top: 30px;
|
||||
padding-left: 20px;
|
||||
|
||||
.pollutant-values {
|
||||
width: 463px;
|
||||
height: 133px;
|
||||
background: url("assets/peakCoalImages/left/pollutant-values-bg.png") no-repeat;
|
||||
.flex-row;
|
||||
padding: 0 27px;
|
||||
|
||||
.pollutant-statue {
|
||||
width: 86px;
|
||||
height: 87px;
|
||||
}
|
||||
|
||||
.pollutant-level-icon {
|
||||
background: url("assets/peakCoalImages/left/pollutant-level-icon.png") no-repeat;
|
||||
}
|
||||
|
||||
.pollutant-reduction-icon {
|
||||
background: url("assets/peakCoalImages/left/pollutant-reduction-icon.png") no-repeat;
|
||||
}
|
||||
|
||||
.pollutant-up-icon {
|
||||
background: url("assets/peakCoalImages/left/pollutant-up-icon.png") no-repeat;
|
||||
}
|
||||
|
||||
.pollutant-other-info {
|
||||
padding-left: 20px;
|
||||
|
||||
._name {
|
||||
font-family: MicrosoftYaHei-Bold;
|
||||
font-size: 29.97px;
|
||||
color: #37EAFF;
|
||||
letter-spacing: 0;
|
||||
line-height: 34.25px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.standard-value {
|
||||
padding-top: 10px;
|
||||
font-family: MicrosoftYaHei;
|
||||
font-size: 29.97px;
|
||||
color: #6AC4FF;
|
||||
letter-spacing: 1.97px;
|
||||
text-align: left;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
.pollutant-value-info {
|
||||
flex: 1;
|
||||
.flex-column;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
|
||||
._value {
|
||||
font-family: YouSheBiaoTiHei;
|
||||
font-size: 41px;
|
||||
color: #FFFFFF;
|
||||
letter-spacing: 0;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
._unit {
|
||||
font-family: MicrosoftYaHei-Bold;
|
||||
font-size: 25.69px;
|
||||
color: #FFFFFF;
|
||||
letter-spacing: 0;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -21,8 +21,8 @@ export default {
|
|||
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; /* 指定切分边框图像的位置 */
|
||||
/* border: 1px solid transparent; !* 先将边框颜色设置为透明 *!
|
||||
border-image: linear-gradient(rgba(79,182,238,0), rgba(39,127,216,1)); !* 使用线性渐变作为边框图片 *!
|
||||
border-image-slice: 1; !* 指定切分边框图像的位置 *!*/
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -42,6 +42,8 @@ export default {
|
|||
}
|
||||
|
||||
._title {
|
||||
height: 100%;
|
||||
line-height: 84px;
|
||||
padding-left: 100px;
|
||||
float: left;
|
||||
font-family: AlimamaShuHeiTi-Bold;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,152 @@
|
|||
<!--预警数据卡片-->
|
||||
<template>
|
||||
<div class="warning-data-card">
|
||||
<div class="warning-state" :class="warningStateBg">
|
||||
{{ warningStateValue }}
|
||||
</div>
|
||||
<div class="snap-img">
|
||||
<img :src="dataItem.snapImgUrl" v-if="dataItem.snapImgUrl">
|
||||
<img :src="noData" v-else>
|
||||
</div>
|
||||
<div class="warning-data-info">
|
||||
<div class="warning-name" :title="dataItem.warningName">{{ dataItem.warningName }}</div>
|
||||
<div class="warning-site-time">
|
||||
<div class="site-icon"></div>
|
||||
<div class="_value" :title="dataItem.site">{{ dataItem.site }}</div>
|
||||
</div>
|
||||
<div class="warning-site-time">
|
||||
<div class="warning-time-icon"></div>
|
||||
<div class="_value" :title="dataItem.warningTime">{{ dataItem.warningTime }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import noData from 'assets/peakCoalImages/coommon/no-data.png'
|
||||
|
||||
export default {
|
||||
name: "WarningInfoItem",
|
||||
props: {
|
||||
dataItem: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
noData
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
warningStateBg() {
|
||||
if (this.dataItem.state === 1) {
|
||||
return 'discuss-decide-bg'
|
||||
} else if (this.dataItem.state === 0) {
|
||||
return 'pending-approval-bg'
|
||||
}
|
||||
},
|
||||
warningStateValue() {
|
||||
if (this.dataItem.state === 1) {
|
||||
return '代研判'
|
||||
} else if (this.dataItem.state === 0) {
|
||||
return '待审批'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import "assets/styles/mixin";
|
||||
|
||||
.warning-data-card {
|
||||
height: 202px;
|
||||
width: 891px;
|
||||
background: url("assets/peakCoalImages/right/warning-card-bg.png") no-repeat;
|
||||
padding-left: 28px;
|
||||
position: relative;
|
||||
.flex-row;
|
||||
|
||||
.snap-img {
|
||||
width: 244px;
|
||||
height: 165px;
|
||||
|
||||
img {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.warning-data-info {
|
||||
height: 165px;
|
||||
width: 0;
|
||||
flex: 1;
|
||||
padding-left: 20px;
|
||||
.flex-column;
|
||||
justify-content: space-between;
|
||||
|
||||
.warning-name {
|
||||
width: 100%;
|
||||
font-family: MicrosoftYaHei-Bold;
|
||||
font-size: 32.4px;
|
||||
color: #F6B545;
|
||||
letter-spacing: 0;
|
||||
font-weight: 700;
|
||||
.text-ellipsis;
|
||||
}
|
||||
|
||||
.warning-site-time {
|
||||
width: 100%;
|
||||
.flex-row;
|
||||
|
||||
.site-icon {
|
||||
width: 26px;
|
||||
height: 34px;
|
||||
background: url("assets/peakCoalImages/right/warning-site-icon.png") no-repeat;
|
||||
}
|
||||
|
||||
.warning-time-icon {
|
||||
width: 33px;
|
||||
height: 33px;
|
||||
background: url("assets/peakCoalImages/right/warning-time-icon.png") no-repeat;
|
||||
|
||||
}
|
||||
|
||||
._value {
|
||||
width: calc(100% - 26px);
|
||||
padding-left: 20px;
|
||||
font-family: MicrosoftYaHei;
|
||||
font-size: 32.4px;
|
||||
color: rgba(202, 244, 255, 0.9);
|
||||
font-weight: 400;
|
||||
.text-ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.warning-state {
|
||||
width: 214px;
|
||||
height: 46px;
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: 20px;
|
||||
font-family: PingFangSC-Semibold;
|
||||
font-size: 32.4px;
|
||||
color: #FFFFFF;
|
||||
letter-spacing: 0;
|
||||
text-align: center;
|
||||
line-height: 46px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.discuss-decide-bg {
|
||||
background: url("assets/peakCoalImages/right/discuss-decide-bg.png") no-repeat;
|
||||
}
|
||||
|
||||
.pending-approval-bg {
|
||||
background: url("assets/peakCoalImages/right/pending-approval-bg.png") no-repeat;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -2,7 +2,15 @@
|
|||
<template>
|
||||
<div class="warning-statistics">
|
||||
<secondary-title :title="title"/>
|
||||
|
||||
<div class="warning-statistics-info">
|
||||
<div class="warning-total-info">
|
||||
<div class="warning-data">
|
||||
<div class="warning-icon"></div>
|
||||
<div class="_title">报警总数</div>
|
||||
<div class="_value">234</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -25,8 +33,49 @@ export default {
|
|||
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; /* 指定切分边框图像的位置 */
|
||||
/* border: 1px solid transparent; !* 先将边框颜色设置为透明 *!
|
||||
border-image: linear-gradient(rgba(79, 182, 238, 0), rgba(39, 127, 216, 1)); !* 使用线性渐变作为边框图片 *!
|
||||
border-image-slice: 1; !* 指定切分边框图像的位置 *!*/
|
||||
.flex-column;
|
||||
|
||||
.warning-statistics-info {
|
||||
flex: 1;
|
||||
height: 0;
|
||||
padding: 0 50px;
|
||||
|
||||
.warning-total-info {
|
||||
height: 238px;
|
||||
.flex-row;
|
||||
|
||||
.warning-data {
|
||||
width: 100%;
|
||||
height: 152px;
|
||||
background: rgba(1, 120, 198, 0.30);
|
||||
.flex-row;
|
||||
justify-content: space-around;
|
||||
.warning-icon {
|
||||
width: 194px;
|
||||
height: 114px;
|
||||
background: url("assets/peakCoalImages/right/warning-icon.png") no-repeat;
|
||||
}
|
||||
|
||||
._title {
|
||||
font-family: MicrosoftYaHei;
|
||||
font-size: 34.3px;
|
||||
color: #6AC4FF;
|
||||
letter-spacing: 2.26px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
._value {
|
||||
font-family: YouSheBiaoTiHei;
|
||||
font-size: 85.76px;
|
||||
color: #FFFFFF;
|
||||
letter-spacing: 5.64px;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -26,7 +26,8 @@ export default {
|
|||
css: [
|
||||
'ant-design-vue/dist/antd.css',
|
||||
|
||||
'@/assets/styles/mixin.less'
|
||||
'@/assets/styles/mixin.less',
|
||||
|
||||
],
|
||||
|
||||
// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
|
||||
|
|
|
|||
|
|
@ -167,11 +167,10 @@ body, html, #__nuxt, #__layout {
|
|||
background: url("assets/peakCoalImages/left/left-content-bg.png") no-repeat center 60px;
|
||||
padding: 300px 476px 100px 412px;
|
||||
perspective: 500px;
|
||||
|
||||
.left-data-panel {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
transform: rotateY(2deg);
|
||||
transform: rotateY(2deg) ;
|
||||
transform-origin: left center;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue