743 lines
25 KiB
Vue
743 lines
25 KiB
Vue
<template>
|
||
<div class="default-main lineInfo" :style="height">
|
||
<DatePicker ref="datePickerRef" style="display: none" theCurrentTime />
|
||
<el-page-header :icon="ArrowLeft" @back="emit('back')">
|
||
<template #content>
|
||
<span style="font-size: 16px">{{ dropList.lineName }}详情 </span>
|
||
<span style="font-weight: 500">最新数据时间：</span>
|
||
<span style="color: var(--color-primary-default)">{{ dropList.updateTime }}</span>
|
||
</template>
|
||
</el-page-header>
|
||
<el-row :gutter="20" class="mt10" :style="`height:${rowHeight}`">
|
||
<el-col :span="8">
|
||
<h3 class="mb10 iconBox">
|
||
<span></span>
|
||
台账信息
|
||
</h3>
|
||
<el-descriptions title="" border :column="2">
|
||
<el-descriptions-item label="监测点名称" width="140px">
|
||
{{ dropList.lineName }}
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="所属厂家">{{ dropList.manufacturer }}</el-descriptions-item>
|
||
<el-descriptions-item label="电压等级">{{ dropList.scale }}</el-descriptions-item>
|
||
<el-descriptions-item label="投运日期">{{ dropList.loginTime }}</el-descriptions-item>
|
||
<el-descriptions-item label="PT">{{ dropList.pt }}</el-descriptions-item>
|
||
<el-descriptions-item label="CT">{{ dropList.ct }}</el-descriptions-item>
|
||
<el-descriptions-item label="干扰源类型">{{ dropList.loadType }}</el-descriptions-item>
|
||
<el-descriptions-item label="通讯状态" width="140px">
|
||
<el-tag size="small" :type="dropList.comFlag == '正常' ? 'success' : 'danger'" effect="dark">
|
||
{{ dropList.comFlag }}
|
||
</el-tag>
|
||
</el-descriptions-item>
|
||
</el-descriptions>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<h3 class="mb10 iconBox">
|
||
<span></span>
|
||
告警明细 (天)
|
||
</h3>
|
||
<el-descriptions title="" border :column="2" size="small">
|
||
<el-descriptions-item width="140px" label="告警原因">
|
||
<span style="font-weight: 550"
|
||
:style="TargetData.info == 0 ? 'color: #0e8780;' : TargetData.info == 3 ? 'color: #000' : 'color: #ff0000;'">
|
||
{{
|
||
TargetData.info == 1
|
||
? '超标告警'
|
||
: TargetData.info == 2
|
||
? '完整性告警'
|
||
: TargetData.info == 0
|
||
? '无告警'
|
||
: '暂无数据'
|
||
}}
|
||
</span>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="频率偏差">{{ TargetData.freqDevOvertime }}</el-descriptions-item>
|
||
<el-descriptions-item label="电压偏差">{{ TargetData.voltageDevOvertime }}</el-descriptions-item>
|
||
<el-descriptions-item label="谐波电流">{{ TargetData.iharmOvertime }}</el-descriptions-item>
|
||
<el-descriptions-item label="负序电流">{{ TargetData.inegOvertime }}</el-descriptions-item>
|
||
<el-descriptions-item label="间谐波电压">{{ TargetData.inuharmOvertime }}</el-descriptions-item>
|
||
<el-descriptions-item label="电压总谐波畸变率">
|
||
{{ TargetData.uaberranceOvertime }}
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="闪变">{{ TargetData.flickerOvertime }}</el-descriptions-item>
|
||
<el-descriptions-item label="谐波电压">{{ TargetData.uharmOvertime }}</el-descriptions-item>
|
||
<el-descriptions-item width="140px" label="三相电压不平衡度">
|
||
{{ TargetData.ubalanceOvertime }}
|
||
</el-descriptions-item>
|
||
</el-descriptions>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<h3 class="mb10 iconBox">
|
||
<span></span>
|
||
数据质量
|
||
</h3>
|
||
<div style="display: flex">
|
||
<MyEChart :style="`height: calc(${rowHeight} - 31px)`" :options="ComCharts" @click="Integrity" />
|
||
<MyEChart :style="`height: calc(${rowHeight} - 31px)`" :options="onLineCharts"
|
||
@click="OnlineRate" />
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="20" class="mt10" :style="`height:${rowHeight}`">
|
||
<el-col :span="8">
|
||
<h3 class="mb10 iconBox">
|
||
<span></span>
|
||
监测点总体评价结论
|
||
</h3>
|
||
|
||
<div class="evaluationData">
|
||
<el-row style="width: 96%" class="row pb5">
|
||
<el-col :span="12" style="display: flex">
|
||
<span>{{ dropList.lineName }}</span>
|
||
</el-col>
|
||
<el-col :span="12" style="display: flex">
|
||
<div>
|
||
综合评估得分:
|
||
<span class="conclusion" :class="dropList.assessData == '特质'
|
||
? 'background1'
|
||
: dropList.assessData == '较差'
|
||
? 'background2'
|
||
: dropList.assessData == '极差'
|
||
? 'background3'
|
||
: ''
|
||
">
|
||
{{ dropList.assessData }}
|
||
</span>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row style="width: 96%" v-for="(item, i) in evaluationData" class="row pb4 pt3">
|
||
<el-col :span="14" style="display: flex; align-items: center">
|
||
<img :src="url[i]" />
|
||
<span style="line-height: 20px">{{ item.targetName }}</span>
|
||
</el-col>
|
||
<el-col :span="10" style="display: flex; align-items: center">
|
||
<div style="width: 100%">
|
||
评估得分：
|
||
<span class="conclusion" :class="item.avg == '特质'
|
||
? 'background1'
|
||
: item.avg == '较差'
|
||
? 'background2'
|
||
: item.avg == '极差'
|
||
? 'background3'
|
||
: ''
|
||
">
|
||
{{ item.avg }}
|
||
</span>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<h3 class="mb10 iconBox">
|
||
<span></span>
|
||
稳态指标合格率
|
||
</h3>
|
||
<div :style="`height: calc(${rowHeight} - 31px)`" ref="chartRef"></div>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<h3 class="mb10 iconBox">
|
||
<span></span>
|
||
暂态事件统计
|
||
</h3>
|
||
|
||
<MyEChart :style="`height: calc(${rowHeight} - 31px)`" :options="incidentCharts" />
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="20" class="mt10" :style="`height:${rowHeight}`">
|
||
<el-col :span="24">
|
||
<h3 class="mb10 iconBox">
|
||
<span></span>
|
||
历史趋势图
|
||
</h3>
|
||
<history :lineId="lineId" ref="historyRef" />
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { onMounted, reactive, ref, provide } from 'vue'
|
||
import { ArrowLeft } from '@element-plus/icons-vue'
|
||
import { mainHeight } from '@/utils/layout'
|
||
import history from './history.vue'
|
||
import { color } from '@/components/echarts/color'
|
||
import DatePicker from '@/components/form/datePicker/index.vue'
|
||
import MyEChart from '@/components/echarts/MyEchart.vue'
|
||
import echarts from '@/components/echarts/echarts'
|
||
import { useRouter } from 'vue-router'
|
||
const router = useRouter()
|
||
import { getLineDetailData } from '@/api/advance-boot/bearingCapacity'
|
||
import {
|
||
getTotalIntegrityByLineIds,
|
||
getTotalOnlineRates,
|
||
lineQualifiedDetail,
|
||
getLineAssess,
|
||
getEventDetailByLineId,
|
||
getGridDiagramTargetData
|
||
} from '@/api/device-boot/panorama'
|
||
import { formatter } from 'element-plus'
|
||
|
||
const emit = defineEmits(['back'])
|
||
const dropList: any = ref({})
|
||
const TargetData: any = ref({})
|
||
const evaluationData: any = ref([])
|
||
const incidentCharts: any = ref({})
|
||
const ComCharts: any = ref({})
|
||
const onLineCharts: any = ref({})
|
||
const datePickerRef = ref()
|
||
const chartRef = ref<HTMLDivElement>()
|
||
const historyRef = ref()
|
||
const IntegrityNum = ref(0)
|
||
const url: any = [
|
||
new URL(`@/assets/img/PLPC.png`, import.meta.url),
|
||
new URL(`@/assets/img/DYPC.png`, import.meta.url),
|
||
new URL(`@/assets/img/JBL.png`, import.meta.url),
|
||
new URL(`@/assets/img/SXDY.png`, import.meta.url),
|
||
new URL(`@/assets/img/SB.png`, import.meta.url)
|
||
]
|
||
const lineId: any = ref('')
|
||
const height = mainHeight(20)
|
||
const rowHeight = mainHeight(190, 3).height
|
||
|
||
// 查询
|
||
const open = async (id: string) => {
|
||
let form = {
|
||
comFlag: 1,
|
||
endTime: datePickerRef.value.timeValue[1],
|
||
lineIds: [id],
|
||
|
||
ids: [id],
|
||
searchValue: '',
|
||
startTime: datePickerRef.value.timeValue[0]
|
||
}
|
||
lineId.value = id
|
||
const { data } = await getLineDetailData({ id: id })
|
||
dropList.value = data
|
||
// 运行状态
|
||
|
||
// 完整性
|
||
getTotalIntegrityByLineIds(form).then((res: any) => {
|
||
let num = (res.data || 0) / 100
|
||
IntegrityNum.value = res.data
|
||
ComCharts.value = {
|
||
title: {
|
||
text: '完整性',
|
||
bottom: '10%',
|
||
left: 'center',
|
||
textStyle: {
|
||
fontSize: 16
|
||
}
|
||
},
|
||
xAxis: {
|
||
show: false
|
||
},
|
||
yAxis: {
|
||
show: false
|
||
},
|
||
|
||
options: {
|
||
dataZoom: null,
|
||
series: [
|
||
{
|
||
//第二个球的填充
|
||
type: 'liquidFill',
|
||
radius: '65%',
|
||
center: ['50%', '40%'], //中心点
|
||
color: [
|
||
{
|
||
type: 'linear',
|
||
x: 0,
|
||
y: 0,
|
||
x2: 0,
|
||
y2: 1,
|
||
colorStops: [
|
||
{
|
||
offset: 1,
|
||
color: '#2aa1e3'
|
||
}
|
||
],
|
||
globalCoord: false
|
||
}
|
||
],
|
||
data: [num, num], // data个数代表波浪数
|
||
backgroundStyle: {
|
||
borderWidth: 1,
|
||
color: '#f7f8fc'
|
||
},
|
||
label: {
|
||
normal: {
|
||
formatter: () => {
|
||
return (num * 100).toFixed(2) + '%'
|
||
},
|
||
textStyle: {
|
||
fontSize: 20,
|
||
color: '#000'
|
||
}
|
||
}
|
||
},
|
||
outline: {
|
||
// show: false
|
||
borderDistance: 0,
|
||
itemStyle: {
|
||
borderWidth: 2,
|
||
borderColor: '#fff'
|
||
}
|
||
}
|
||
}
|
||
]
|
||
}
|
||
}
|
||
// 稳态指标合格率
|
||
})
|
||
// 在线率
|
||
getTotalOnlineRates({ ...form, id: dropList.value.devId, ids: [dropList.value.devId] }).then((res: any) => {
|
||
let num = (res.data || 0) / 100
|
||
onLineCharts.value = {
|
||
title: {
|
||
text: '在线率',
|
||
bottom: '10%',
|
||
left: 'center',
|
||
textStyle: {
|
||
fontSize: 16
|
||
}
|
||
},
|
||
xAxis: {
|
||
show: false
|
||
},
|
||
yAxis: {
|
||
show: false
|
||
},
|
||
|
||
options: {
|
||
dataZoom: null,
|
||
series: [
|
||
{
|
||
//第二个球的填充
|
||
type: 'liquidFill',
|
||
radius: '65%',
|
||
center: ['50%', '40%'], //中心点
|
||
color: [
|
||
{
|
||
type: 'linear',
|
||
x: 0,
|
||
y: 0,
|
||
x2: 0,
|
||
y2: 1,
|
||
colorStops: [
|
||
{
|
||
offset: 1,
|
||
color: '#67c23a'
|
||
}
|
||
],
|
||
globalCoord: false
|
||
}
|
||
],
|
||
data: [num, num], // data个数代表波浪数
|
||
backgroundStyle: {
|
||
color: '#f7f8fc'
|
||
},
|
||
label: {
|
||
normal: {
|
||
formatter: () => {
|
||
return (num * 100).toFixed(2) + '%'
|
||
},
|
||
textStyle: {
|
||
fontSize: 20,
|
||
color: '#000'
|
||
}
|
||
}
|
||
},
|
||
outline: {
|
||
// show: false
|
||
borderDistance: 0,
|
||
itemStyle: {
|
||
borderWidth: 2,
|
||
borderColor: '#fff'
|
||
}
|
||
}
|
||
}
|
||
]
|
||
}
|
||
}
|
||
})
|
||
|
||
// 监测点总体评价结论
|
||
getLineAssess({
|
||
lineId: id,
|
||
startTime: datePickerRef.value.timeValue[0],
|
||
endTime: datePickerRef.value.timeValue[1]
|
||
}).then((res: any) => {
|
||
dropList.value.assessData = res.data.assessLevel
|
||
evaluationData.value = [
|
||
{
|
||
targetName: '频率偏差(Hz)',
|
||
avg: res.data.freqAssessLevel,
|
||
sd: res.data.freqQualifyData
|
||
},
|
||
{
|
||
targetName: '电压偏差(%)',
|
||
avg: res.data.vdevAssessLevel,
|
||
sd: res.data.vdevQualifyData
|
||
},
|
||
{
|
||
targetName: '电压总谐波畸变率(%)',
|
||
avg: res.data.harmAssessLevel,
|
||
sd: res.data.harmQualifyData
|
||
},
|
||
{
|
||
targetName: '三相电压不平衡度(%)',
|
||
avg: res.data.unbalanceAssessLevel,
|
||
sd: res.data.unbalanceQualifyData
|
||
},
|
||
{
|
||
targetName: '闪变',
|
||
avg: res.data.flickerAssessLevel,
|
||
sd: res.data.flickerQualifyData
|
||
}
|
||
]
|
||
})
|
||
// 稳态指标合格率
|
||
|
||
lineQualifiedDetail({
|
||
lineId: id,
|
||
startTime: datePickerRef.value.timeValue[0],
|
||
endTime: datePickerRef.value.timeValue[1]
|
||
}).then(res => {
|
||
echart([
|
||
{
|
||
time: datePickerRef.value.timeValue[0].substring(0, 7),
|
||
targetList: [
|
||
'频率偏差(Hz)',
|
||
'电压偏差(%)',
|
||
'电压总谐波畸变率(%)',
|
||
'三相电压不平衡度(%)',
|
||
'闪变',
|
||
'谐波电压(%)',
|
||
'谐波电流(%)',
|
||
'间谐波电压(%)',
|
||
'负序电流(A)'
|
||
],
|
||
ratioList: [
|
||
res.data.freqDev == 3.14159 ? null : res.data.freqDev,
|
||
res.data.vdev == 3.14159 ? null : res.data.vdev,
|
||
res.data.vthd == 3.14159 ? null : res.data.vthd,
|
||
res.data.ubalance == 3.14159 ? null : res.data.ubalance,
|
||
res.data.plt == 3.14159 ? null : res.data.plt,
|
||
|
||
res.data.uharm == 3.14159 ? null : res.data.uharm,
|
||
res.data.iharm == 3.14159 ? null : res.data.iharm,
|
||
res.data.inuHarm == 3.14159 ? null : res.data.inuHarm,
|
||
res.data.ineg == 3.14159 ? null : res.data.ineg
|
||
]
|
||
}
|
||
])
|
||
})
|
||
|
||
// 暂态事件统计
|
||
getEventDetailByLineId({
|
||
id: id,
|
||
startTime: datePickerRef.value.timeValue[0],
|
||
endTime: datePickerRef.value.timeValue[1],
|
||
type: datePickerRef.value.interval
|
||
}).then((res: any) => {
|
||
let data = [
|
||
{
|
||
name: '电压暂升',
|
||
value: res.data?.swellTimes || 0
|
||
},
|
||
{
|
||
name: '电压暂降',
|
||
value: res.data?.sagTimes || 0
|
||
},
|
||
{
|
||
name: '电压中断',
|
||
value: res.data?.interruptTimes || 0
|
||
}
|
||
]
|
||
incidentCharts.value = {
|
||
title: {
|
||
text: '总数：' + (data[0].value + data[1].value + data[2].value),
|
||
left: '40%',
|
||
top: '45%',
|
||
textStyle: {
|
||
// fontWeight: 600,
|
||
fontSize: 12
|
||
}
|
||
// subtext: '总数',
|
||
// subtextStyle: {
|
||
// fontWeight: 550,
|
||
// fontSize: 14
|
||
// }
|
||
},
|
||
|
||
tooltip: {
|
||
trigger: 'item'
|
||
},
|
||
legend: {
|
||
orient: 'vertical',
|
||
top: 'center',
|
||
right: '10%',
|
||
formatter: function (e: any) {
|
||
return e + ' ' + data.filter(item => item.name == e)[0].value + '条'
|
||
}
|
||
},
|
||
xAxis: {
|
||
show: false
|
||
},
|
||
yAxis: {
|
||
show: false
|
||
},
|
||
options: {
|
||
dataZoom: null,
|
||
series: [
|
||
{
|
||
type: 'pie',
|
||
center: ['45%', '50%'],
|
||
radius: ['60%', '80%'],
|
||
label: {
|
||
show: false,
|
||
position: 'outside',
|
||
textStyle: {
|
||
//数值样式
|
||
}
|
||
},
|
||
|
||
data: data
|
||
}
|
||
]
|
||
}
|
||
}
|
||
})
|
||
|
||
// 告警明细
|
||
getGridDiagramTargetData({ ...form, id: id, type: 3 }).then(res => {
|
||
TargetData.value = res.data
|
||
let num = 0
|
||
let flag = 0
|
||
let judgment = true
|
||
for (let k in res.data) {
|
||
if (k != 'lineId') {
|
||
if (res.data[k] != '/') {
|
||
judgment = false
|
||
}
|
||
flag += (res.data[k] == '/' ? 0 : res.data[k])
|
||
}
|
||
}
|
||
|
||
if (IntegrityNum.value == 0) {
|
||
num = 2 //完整性告警
|
||
} else {
|
||
if (flag > 0) {
|
||
num = 1 //超标告警
|
||
} else {
|
||
num = 0 //无告警
|
||
}
|
||
if (judgment) {
|
||
num = 3
|
||
}
|
||
}
|
||
|
||
TargetData.value.info = num
|
||
})
|
||
}
|
||
const echart = (row: any) => {
|
||
let chart = echarts.init(chartRef.value as HTMLDivElement)
|
||
|
||
let dataname = [
|
||
'频率偏差(Hz)',
|
||
'电压偏差(%)',
|
||
'电压总谐波畸变率(%)',
|
||
'三相电压不平衡度(%)',
|
||
'闪变',
|
||
'谐波电压(%)',
|
||
'谐波电流(%)',
|
||
'间谐波电压(%)',
|
||
'负序电流(A)'
|
||
]
|
||
let datamax = [100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100]
|
||
let indicator = []
|
||
for (let i = 0; i < dataname.length; i++) {
|
||
indicator.push({
|
||
name: dataname[i],
|
||
max: datamax[i]
|
||
})
|
||
}
|
||
|
||
let option: any = {
|
||
tooltip: {
|
||
trigger: 'item',
|
||
axisPointer: {
|
||
type: 'shadow',
|
||
label: {
|
||
color: '#fff',
|
||
fontSize: 16
|
||
}
|
||
},
|
||
textStyle: {
|
||
color: '#fff',
|
||
fontStyle: 'normal',
|
||
opacity: 0.35,
|
||
fontSize: 14
|
||
},
|
||
backgroundColor: 'rgba(0,0,0,0.55)',
|
||
borderWidth: 0
|
||
},
|
||
legend: {
|
||
data: row.map((item: any) => item.time),
|
||
type: 'scroll',
|
||
orient: 'vertical',
|
||
icon: 'roundRect',
|
||
right: '20',
|
||
|
||
itemGap: 10,
|
||
itemWidth: 16,
|
||
itemHeight: 16,
|
||
textStyle: {
|
||
fontSize: '15',
|
||
color: '#656565'
|
||
}
|
||
},
|
||
radar: {
|
||
center: ['50%', '50%'],
|
||
radius: '65%',
|
||
startAngle: 90,
|
||
splitNumber: 5,
|
||
splitArea: {
|
||
areaStyle: {
|
||
color: ['#FFFFFF', '#F5F9FF'].reverse()
|
||
}
|
||
},
|
||
axisLabel: {
|
||
show: false
|
||
},
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: '#D2E4F8'
|
||
}
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: '#D2E4F8'
|
||
}
|
||
},
|
||
name: {
|
||
formatter: '{value}',
|
||
textStyle: {
|
||
color: '#656565',
|
||
fontSize: 15
|
||
}
|
||
},
|
||
indicator: indicator
|
||
},
|
||
|
||
series: []
|
||
}
|
||
|
||
row.forEach((item: any, i: any) => {
|
||
option.series.push({
|
||
name: item.time,
|
||
type: 'radar',
|
||
symbol: 'none',
|
||
areaStyle: {
|
||
normal: {
|
||
color: '#2a9fe069'
|
||
}
|
||
},
|
||
itemStyle: {
|
||
color: '#2a9fe0'
|
||
},
|
||
data: [item.ratioList]
|
||
})
|
||
})
|
||
|
||
chart.setOption(option)
|
||
}
|
||
// 跳转
|
||
const Integrity = () => {
|
||
router.push({
|
||
name: 'harmonic-boot/harmonic/getIntegrityData'
|
||
})
|
||
}
|
||
const OnlineRate = () => {
|
||
router.push({
|
||
name: 'harmonic-boot/area/OnlineRate'
|
||
})
|
||
}
|
||
|
||
onMounted(() => {
|
||
// open('4c87b7dff2281254fc55c25a4da31506')
|
||
})
|
||
defineExpose({ open })
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.lineInfo {
|
||
padding: 0 10px 10px 10px;
|
||
}
|
||
|
||
:deep(.el-page-header__header) {
|
||
height: 45px;
|
||
border-bottom: 1px solid #f1eded;
|
||
}
|
||
|
||
:deep(.el-descriptions__header) {
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.evaluationData {
|
||
display: grid;
|
||
grid-template-rows: repeat(5, auto);
|
||
height: 87%;
|
||
|
||
.row {
|
||
margin: 4px 2% 0;
|
||
width: 100%;
|
||
box-shadow: 1px 1px 1px 1px #e8e3e3;
|
||
}
|
||
|
||
img {
|
||
width: 6%;
|
||
margin: 0px 15px;
|
||
}
|
||
}
|
||
|
||
.iconBox {
|
||
display: flex;
|
||
|
||
span {
|
||
display: inline-block;
|
||
width: 3px;
|
||
height: 18px;
|
||
background: var(--el-color-primary);
|
||
margin-right: 5px;
|
||
margin-left: 3px;
|
||
}
|
||
}
|
||
|
||
.conclusion {
|
||
display: inline-block;
|
||
padding: 2px 5px;
|
||
height: 20px;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.background1 {
|
||
background-color: #339966;
|
||
color: #fff;
|
||
}
|
||
|
||
.background2 {
|
||
background-color: #97017e;
|
||
color: #fff;
|
||
}
|
||
|
||
.background3 {
|
||
background-color: #A52a2a;
|
||
color: #fff;
|
||
}
|
||
</style>
|