1、增加公共table
This commit is contained in:
lankuixing
parent
c754a53302
commit
c895d830b0
|
|
@ -0,0 +1,193 @@
|
|||
<!--自定义table-->
|
||||
<template>
|
||||
<div class="custom-table">
|
||||
<div class="check-data-info">
|
||||
<div class="table-info">
|
||||
<div class="table-header">
|
||||
<span class="table-header-item" v-for="(item,index) of tableTitle"
|
||||
:style="`width:${item.width};`">
|
||||
{{ item.title }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="table-body">
|
||||
<div class="table-item-body" v-for="item of dataSource">
|
||||
<span class="data-content" v-for="dataIndex of tableTitle" :style="`width:${dataIndex.width};`">
|
||||
<div class="_content">
|
||||
<div class="point-name">
|
||||
{{ item[dataIndex.dataIndex] }}
|
||||
</div>
|
||||
|
||||
<div class="_icon" :class="getOddsRatioIcon(item[dataIndex.dataIndex],dataIndex.dataIndex)">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "CustomTable",
|
||||
props: {
|
||||
tableTitle: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
standardValue: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
}
|
||||
},
|
||||
dataSource: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
methods: {
|
||||
//判断数值是上升还是下降
|
||||
getOddsRatioIcon(val, valType) {
|
||||
if (this.standardValue != null && this.standardValue[valType]) {
|
||||
if (val > this.standardValue[valType]) {
|
||||
return 'odds-ratio-up-icon'
|
||||
} else if (val < this.standardValue[valType]) {
|
||||
return 'odds-ratio-reduction-icon'
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import "assets/styles/mixin";
|
||||
|
||||
.custom-table {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
|
||||
.check-data-info {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: 30px 20px 0 20px;
|
||||
|
||||
.table-info {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
|
||||
.table-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
height: 77px;
|
||||
white-space: nowrap;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
.table-header-item {
|
||||
background-color: rgba(35, 140, 255, 0.2);
|
||||
display: inline-block;
|
||||
font-family: MicrosoftYaHei-Bold;
|
||||
font-size: 29.97px;
|
||||
color: #37EAFF;
|
||||
letter-spacing: 0;
|
||||
text-align: center;
|
||||
line-height: 77px;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
.table-body {
|
||||
height: calc(100% - 77px);
|
||||
|
||||
.table-item-body {
|
||||
height: 77px;
|
||||
margin-top: 20px;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
|
||||
.data-content {
|
||||
display: inline-block;
|
||||
height: 77px;
|
||||
background: rgba(21, 77, 160, 0.20);
|
||||
|
||||
._content {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
.flex-row;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.point-name {
|
||||
font-family: MicrosoftYaHei-Bold;
|
||||
font-size: 29.97px;
|
||||
color: #FFFFFF;
|
||||
letter-spacing: 0;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
.text-ellipsis;
|
||||
}
|
||||
|
||||
._icon {
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
::-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>
|
||||
|
|
@ -470,6 +470,7 @@ body, html, #__nuxt, #__layout {
|
|||
|
||||
|
||||
.left-icon {
|
||||
z-index: 2;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
width: 531px;
|
||||
|
|
@ -478,6 +479,7 @@ body, html, #__nuxt, #__layout {
|
|||
}
|
||||
|
||||
.right-icon {
|
||||
z-index: 2;
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
width: 531px;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,229 @@
|
|||
<template>
|
||||
<div class="table-content">
|
||||
<custom-table :table-title="tableTitle" :standard-value="standardValue" :data-source="dataSource"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "index",
|
||||
data(){
|
||||
return{
|
||||
tableTitle: [
|
||||
{
|
||||
title: '监测设备',
|
||||
dataIndex: 'pointName',
|
||||
width: '160px'
|
||||
},
|
||||
{
|
||||
title: '一氧化碳[0.5%VOL]',
|
||||
dataIndex: 'COValue',
|
||||
width: '160px'
|
||||
},
|
||||
{
|
||||
title: '二氧化硫[30mg/m³]',
|
||||
dataIndex: 'SO2Value',
|
||||
width: '160px'
|
||||
},
|
||||
{
|
||||
title: '氮氧化物[10mg/L]',
|
||||
dataIndex: 'NOValue',
|
||||
width: '160px'
|
||||
},
|
||||
{
|
||||
title: '臭氧[80⏜ppm]',
|
||||
dataIndex: 'O3Value',
|
||||
width: '160px'
|
||||
},
|
||||
{
|
||||
title: 'PM10[50μg/m³]',
|
||||
dataIndex: 'PM10Value',
|
||||
width: '160px'
|
||||
}
|
||||
],
|
||||
standardValue: {
|
||||
COValue: 0.5,
|
||||
SO2Value: 30,
|
||||
NOValue: 10,
|
||||
O3Value: 80,
|
||||
PM10Value: 50
|
||||
},
|
||||
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³'
|
||||
}
|
||||
]
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.table-content {
|
||||
height: 800px;
|
||||
width: 1000px;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue