530 lines
14 KiB
Vue
530 lines
14 KiB
Vue
|
<!--峰煤监控系统-->
|
|||
|
|
<template>
|
|||
|
|
<new-bg>
|
|||
|
|
<div class="center-panel">
|
|||
|
|
<Map type="middle" @pointClick="pointClick" />
|
|||
|
|
</div>
|
|||
|
|
<flex-col class="main">
|
|||
|
|
<system-title/>
|
|||
|
|
<ModuleContent none-event padding="0px 20px 20px">
|
|||
|
|
<BFC>
|
|||
|
|
<flex-col slot="left" width="412">
|
|||
|
|
<ModuleContent2 bg bg-color padding="20px">
|
|||
|
|
<flex-col>
|
|||
|
|
<web3-title>本市空气质量</web3-title>
|
|||
|
|
<ModuleContent padding="0" height="210">
|
|||
|
|
<pollution-information/>
|
|||
|
|
</ModuleContent>
|
|||
|
|
<web3-title>治理设备在线率</web3-title>
|
|||
|
|
<ModuleContent padding="20px 0" height="180">
|
|||
|
|
<ProgressDesc></ProgressDesc>
|
|||
|
|
</ModuleContent>
|
|||
|
|
<web3-title>厂区环境趋势</web3-title>
|
|||
|
|
<ModuleContent padding="0" height="180">
|
|||
|
|
<air-quality-trend-charts :data-source="airQualityTrendDataSource"/>
|
|||
|
|
</ModuleContent>
|
|||
|
|
<web3-title>设备报警信息汇总</web3-title>
|
|||
|
|
<ModuleContent padding="0">
|
|||
|
|
<peak-custom-table :table-title="columnsForTable" :data-source="dataSource" :limit-move-num="3"/>
|
|||
|
|
</ModuleContent>
|
|||
|
|
</flex-col>
|
|||
|
|
</ModuleContent2>
|
|||
|
|
</flex-col>
|
|||
|
|
<flex-col slot="right" width="412">
|
|||
|
|
<ModuleContent2 bg bg-color padding="20px">
|
|||
|
|
<flex-col>
|
|||
|
|
<web3-title>
|
|||
|
|
清洁运输比例
|
|||
|
|
<template slot="action">
|
|||
|
|
<butgroup2 style="height: 20px;line-height: 20px;">
|
|||
|
|
<cus-button4 @click="active = 'Yesterday'" :selected="active === 'Yesterday'">昨日</cus-button4>
|
|||
|
|
<cus-button4 @click="active = 'LastWeek'" :selected="active === 'LastWeek'">上周</cus-button4>
|
|||
|
|
</butgroup2>
|
|||
|
|
</template>
|
|||
|
|
</web3-title>
|
|||
|
|
<ModuleContent padding="0">
|
|||
|
|
<PeakWarningTypeChart2 :color="['rgb(0 255, 255)', 'transparent']" :data-source="pieData"></PeakWarningTypeChart2>
|
|||
|
|
<div class="c-title">
|
|||
|
|
<div class="t">{{ Math.round(pieData[0].value * 100) }}%</div>
|
|||
|
|
<div class="t2">运输比例</div>
|
|||
|
|
</div>
|
|||
|
|
</ModuleContent>
|
|||
|
|
<web4-title>日排放量</web4-title>
|
|||
|
|
<ModuleContent padding="20px 0 0" height="140">
|
|||
|
|
<div class="pf">
|
|||
|
|
<div class="t">当前VOC的日排放量</div>
|
|||
|
|
<div class="v">{{ todaypf.voc || 0 }}mg/m3</div>
|
|||
|
|
</div><div class="pf">
|
|||
|
|
<div class="t">当前CEMS的日排放量</div>
|
|||
|
|
<div class="v">{{ todaypf.cems || 0 }}mg/m3</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</ModuleContent>
|
|||
|
|
<web4-title>周排放量</web4-title>
|
|||
|
|
<ModuleContent padding="0 ">
|
|||
|
|
<peak-custom-table :table-title="columns2ForTable" :data-source="weekData" :limit-move-num="3"/>
|
|||
|
|
</ModuleContent>
|
|||
|
|
<web3-title>设备超标报警</web3-title>
|
|||
|
|
<ModuleContent padding="0 20px 20px">
|
|||
|
|
</ModuleContent>
|
|||
|
|
</flex-col>
|
|||
|
|
|
|||
|
|
</ModuleContent2>
|
|||
|
|
|
|||
|
|
</flex-col>
|
|||
|
|
<div class="center" slot="center">
|
|||
|
|
<butgroup :bg="false">
|
|||
|
|
<cus-button small :selected="mapTab==='rl'" @click="mapTab = 'rl'">热力地图</cus-button>
|
|||
|
|
<cus-button small :selected="mapTab==='wx'" @click="mapTab = 'wx'">卫星地图</cus-button>
|
|||
|
|
</butgroup>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<butgroup class="real-data">
|
|||
|
|
<cus-button>有组织</cus-button>
|
|||
|
|
<cus-button>无组织</cus-button>
|
|||
|
|
<cus-button>清洁运输</cus-button>
|
|||
|
|
<cus-button>视频广场</cus-button>
|
|||
|
|
</butgroup>
|
|||
|
|
</div>
|
|||
|
|
</BFC>
|
|||
|
|
</ModuleContent>
|
|||
|
|
</flex-col>
|
|||
|
|
</new-bg>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import AtmosphericModule from "@/components/peak-coal-monitoring/AtmosphericModule";
|
|||
|
|
import PollutionInformation from "@/components/peak-coal-monitoring/PollutionInformation2";
|
|||
|
|
import MonitorData from "@/components/peak-coal-monitoring/MonitorData";
|
|||
|
|
import MonitorData2 from "@/components/peak-coal-monitoring/MonitorData2";
|
|||
|
|
import EnergyProfile from "@/components/peak-coal-monitoring/EnergyProfile";
|
|||
|
|
import DeviceOverview from "@/components/peak-coal-monitoring/DeviceOverview";
|
|||
|
|
import AlarmOverview from "@/components/peak-coal-monitoring/AlarmOverview";
|
|||
|
|
import WZDialog from "@/components/WZDialog";
|
|||
|
|
import SDJCYDialog from "@/components/SDJCYDialog";
|
|||
|
|
import ZKZDialog from "@/components/ZKZDialog";
|
|||
|
|
import GBZDialog from "@/components/GBZDialog";
|
|||
|
|
import CEMSDialog from "@/components/CEMSDialog";
|
|||
|
|
import pointDialog from '@/components/PointDialog'
|
|||
|
|
import {mapState} from "vuex";
|
|||
|
|
import NewBg from "../../components/NewBg.vue";
|
|||
|
|
import BFC from "../../components/BFC.vue";
|
|||
|
|
import CusButton3 from "../../components/smallCommon/CusButton3.vue";
|
|||
|
|
import Butgroup from "../../components/smallCommon/butgroup.vue";
|
|||
|
|
import ModuleContent2 from "../../components/smallCommon/ModuleContent2.vue";
|
|||
|
|
import SystemTitle from "../../components/smallCommon/SystemTitle.vue";
|
|||
|
|
import ModuleContent from "../../components/ModuleContent.vue";
|
|||
|
|
import Split from "../../components/smallCommon/Split.vue";
|
|||
|
|
import FlexCol from "../../components/FlexCol.vue";
|
|||
|
|
import Web2Title from "../../components/smallCommon/Web2Title.vue";
|
|||
|
|
import Web3Title from "../../components/smallCommon/Web3Title.vue";
|
|||
|
|
import ProgressDesc from "../../components/smallCommon/ProgressDesc.vue";
|
|||
|
|
import Web4Title from "../../components/smallCommon/Web4Title.vue";
|
|||
|
|
import CusButton from "../../components/smallCommon/CusButton.vue";
|
|||
|
|
import AirQualityTrendCharts from "../../components/charts/AirQualityTrendCharts.vue";
|
|||
|
|
import PeakCustomTable from "../../components/peak-coal-monitoring/PeakCustomTable2.vue";
|
|||
|
|
import PeakWarningTypeChart2 from "../../components/charts/PeakWarningTypeChart2.vue";
|
|||
|
|
import CusButton4 from "../../components/smallCommon/CusButton4.vue";
|
|||
|
|
import Butgroup2 from "../../components/smallCommon/butgroup2.vue";
|
|||
|
|
export default {
|
|||
|
|
name: "PeakCoalMonitoring",
|
|||
|
|
components: {
|
|||
|
|
Butgroup2,
|
|||
|
|
CusButton4,
|
|||
|
|
PeakWarningTypeChart2,
|
|||
|
|
PeakCustomTable,
|
|||
|
|
AirQualityTrendCharts,
|
|||
|
|
CusButton,
|
|||
|
|
Web4Title,
|
|||
|
|
ProgressDesc,
|
|||
|
|
Web3Title,
|
|||
|
|
Web2Title,
|
|||
|
|
FlexCol,
|
|||
|
|
Split,
|
|||
|
|
ModuleContent,
|
|||
|
|
SystemTitle,
|
|||
|
|
ModuleContent2,
|
|||
|
|
Butgroup,
|
|||
|
|
CusButton3,
|
|||
|
|
BFC,
|
|||
|
|
NewBg,
|
|||
|
|
AlarmOverview, DeviceOverview, EnergyProfile, MonitorData, PollutionInformation, AtmosphericModule, MonitorData2},
|
|||
|
|
computed: {
|
|||
|
|
...mapState({
|
|||
|
|
title: state => state.system.title,
|
|||
|
|
info: state => state.system.info || {},
|
|||
|
|
airQualityTrendDataSource: state => (state.system.info?.trend || []).map(item => {
|
|||
|
|
const { date, ...attr } = item
|
|||
|
|
const result = []
|
|||
|
|
for (const attrKey in attr) {
|
|||
|
|
const obj = { name: date }
|
|||
|
|
obj.attr = attrKey
|
|||
|
|
obj.value = attr[attrKey]
|
|||
|
|
result.push(obj)
|
|||
|
|
}
|
|||
|
|
console.log(result)
|
|||
|
|
return result
|
|||
|
|
}).flat(Infinity),
|
|||
|
|
dataSource: state => state.system.info?.alerts || []
|
|||
|
|
}),
|
|||
|
|
pieData () {
|
|||
|
|
if (this.info.cleanData && this.info.cleanData[this.active]) {
|
|||
|
|
return [
|
|||
|
|
{
|
|||
|
|
attr: '清运',
|
|||
|
|
name: '清洁',
|
|||
|
|
value: this.info.cleanData[this.active]
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
attr: '清运',
|
|||
|
|
name: '剩余',
|
|||
|
|
value: 1 - this.info.cleanData[this.active]
|
|||
|
|
},
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
return [
|
|||
|
|
{
|
|||
|
|
attr: '清运',
|
|||
|
|
name: '清洁',
|
|||
|
|
value: 0
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
attr: '清运',
|
|||
|
|
name: '剩余',
|
|||
|
|
value: 0
|
|||
|
|
},
|
|||
|
|
]
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
todaypf () {
|
|||
|
|
return this.info.today || {}
|
|||
|
|
},
|
|||
|
|
columns2ForTable () {
|
|||
|
|
const week = this.todaypf.week || {}
|
|||
|
|
const columns = [
|
|||
|
|
{
|
|||
|
|
title: '类型',
|
|||
|
|
dataIndex: 'deviceName',
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
for (const weekKey in week) {
|
|||
|
|
if (week[weekKey] && week[weekKey].length > 0) {
|
|||
|
|
const data = week[weekKey]
|
|||
|
|
columns.push.apply(columns, data.map(item => ({
|
|||
|
|
title: item.Key,
|
|||
|
|
dataIndex: item.Key
|
|||
|
|
})))
|
|||
|
|
break
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
const len = columns.length
|
|||
|
|
const per = 100 / len + '%'
|
|||
|
|
return columns.map((item, index) => {
|
|||
|
|
if (item === 0) return item
|
|||
|
|
return {
|
|||
|
|
...item,
|
|||
|
|
width: per
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
weekData () {
|
|||
|
|
const week = this.todaypf.week || {}
|
|||
|
|
const results = []
|
|||
|
|
for (const weekKey in week) {
|
|||
|
|
const row = {
|
|||
|
|
deviceName:weekKey,
|
|||
|
|
}
|
|||
|
|
if (!week[weekKey].length) continue
|
|||
|
|
|
|||
|
|
for (const weekElement of week[weekKey]) {
|
|||
|
|
console.log(weekElement)
|
|||
|
|
row[weekElement.Key] = weekElement.value
|
|||
|
|
}
|
|||
|
|
results.push(row)
|
|||
|
|
}
|
|||
|
|
return results
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
data () {
|
|||
|
|
return {
|
|||
|
|
mapTab: 'rl',
|
|||
|
|
active: 'Yesterday',
|
|||
|
|
|
|||
|
|
columnsForTable: [
|
|||
|
|
{
|
|||
|
|
title: '设备名称',
|
|||
|
|
dataIndex: 'deviceName',
|
|||
|
|
width: '33.333%'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '报警时间',
|
|||
|
|
dataIndex: 'CreateDateTime',
|
|||
|
|
width: '33.333%'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '报警内容',
|
|||
|
|
dataIndex: 'AlertContent',
|
|||
|
|
width: '33.333%'
|
|||
|
|
},
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
/**
|
|||
|
|
* 图层构造器
|
|||
|
|
* @param { object } props
|
|||
|
|
* @param { 'cems' | 'sdjcy' | 'zkz' | 'gbz' | 'ssc' | 'shisc' | 'wz' | 'jkd' } props.layerType 图层类型 jkd(监控点) wz(微站) sdjcy(深度检测仪) zkz（质控站） gbz(国标站) ssc(洒水车) shisc(湿扫车) cems（CEMS）
|
|||
|
|
* @param { object } props.data 图层类型
|
|||
|
|
*/
|
|||
|
|
pointClick ({layerType, data}) {
|
|||
|
|
// todo
|
|||
|
|
if(layerType == 'wz'){
|
|||
|
|
this.$open(WZDialog, {
|
|||
|
|
type: 'middle'
|
|||
|
|
}, {
|
|||
|
|
screenType: 'middle',
|
|||
|
|
title: '微站',
|
|||
|
|
width: 1100,
|
|||
|
|
onClose () {
|
|||
|
|
console.log(1);
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
} else if(layerType === 'sdjcy'){
|
|||
|
|
this.$open(SDJCYDialog, {
|
|||
|
|
type: 'middle'
|
|||
|
|
}, {
|
|||
|
|
screenType: 'custommiddle',
|
|||
|
|
title: '深度检测仪',
|
|||
|
|
width: 1100,
|
|||
|
|
onClose () {
|
|||
|
|
console.log(1);
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}else if(layerType === 'zkz'){
|
|||
|
|
this.$open(ZKZDialog, {
|
|||
|
|
type: 'middle'
|
|||
|
|
}, {
|
|||
|
|
screenType: 'custommiddle',
|
|||
|
|
title: '质控站',
|
|||
|
|
width: 1100,
|
|||
|
|
onClose () {
|
|||
|
|
console.log(1);
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
} else if(layerType === 'gbz'){
|
|||
|
|
this.$open(GBZDialog, {
|
|||
|
|
type: 'middle'
|
|||
|
|
}, {
|
|||
|
|
screenType: 'custommiddle',
|
|||
|
|
title: '国标站',
|
|||
|
|
width: 1100,
|
|||
|
|
onClose () {
|
|||
|
|
console.log(1);
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
} else if(layerType === 'cems'){
|
|||
|
|
this.$open(CEMSDialog, {
|
|||
|
|
type: 'middle'
|
|||
|
|
}, {
|
|||
|
|
screenType: 'custommiddle',
|
|||
|
|
title: 'CEMS',
|
|||
|
|
width: 1100,
|
|||
|
|
onClose () {
|
|||
|
|
console.log(1);
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
} else if (layerType === 'jkd'){
|
|||
|
|
this.$open(pointDialog, {
|
|||
|
|
type: 'middle'
|
|||
|
|
}, {
|
|||
|
|
screenType: 'custommiddle',
|
|||
|
|
title: '监控点',
|
|||
|
|
width: 1100,
|
|||
|
|
onClose () {
|
|||
|
|
console.log(1);
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style>
|
|||
|
|
body, html, #__nuxt, #__layout {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
overflow: hidden;
|
|||
|
|
background: #09151F;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.list-enter-active, .list-leave-active {
|
|||
|
|
transition: all 0.5s;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.list-enter, .list-leave-to
|
|||
|
|
/* .list-leave-active for below version 2.1.8 */
|
|||
|
|
{
|
|||
|
|
opacity: 0;
|
|||
|
|
transform: translateY(30px);
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
<style scoped lang="less">
|
|||
|
|
@import "../../assets/styles/mixin";
|
|||
|
|
.pf {
|
|||
|
|
background: rgba(0, 186, 186, 0.08);
|
|||
|
|
padding: 15px 17px;
|
|||
|
|
border: 0.6px solid rgba(0, 186, 186, 1);
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
&:last-child {
|
|||
|
|
margin-top: 20px;
|
|||
|
|
}
|
|||
|
|
.t {
|
|||
|
|
/** 文本1 */
|
|||
|
|
font-size: 16px;
|
|||
|
|
font-weight: 400;
|
|||
|
|
letter-spacing: 0px;
|
|||
|
|
line-height: 16.46px;
|
|||
|
|
color: rgba(219, 234, 234, 1);
|
|||
|
|
text-align: left;
|
|||
|
|
vertical-align: top;
|
|||
|
|
}
|
|||
|
|
.v {
|
|||
|
|
/** 文本1 */
|
|||
|
|
font-size: 16px;
|
|||
|
|
font-weight: 400;
|
|||
|
|
letter-spacing: 0px;
|
|||
|
|
line-height: 16.46px;
|
|||
|
|
color: rgba(8, 255, 255, 1);
|
|||
|
|
text-align: right;
|
|||
|
|
vertical-align: top;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.c-title {
|
|||
|
|
position: absolute;
|
|||
|
|
left: 50%;
|
|||
|
|
top: 45%;
|
|||
|
|
transform: translate(-50%, -50%);
|
|||
|
|
.t {
|
|||
|
|
/** 文本1 */
|
|||
|
|
font-size: 35.84px;
|
|||
|
|
font-weight: 400;
|
|||
|
|
letter-spacing: 0px;
|
|||
|
|
line-height: 51.9px;
|
|||
|
|
color: rgba(55, 254, 247, 1);
|
|||
|
|
text-align: left;
|
|||
|
|
vertical-align: top;
|
|||
|
|
}
|
|||
|
|
.t2 {
|
|||
|
|
/** 文本1 */
|
|||
|
|
font-size: 14px;
|
|||
|
|
font-weight: 400;
|
|||
|
|
letter-spacing: 0px;
|
|||
|
|
line-height: 20.27px;
|
|||
|
|
color: rgba(243, 255, 255, 1);
|
|||
|
|
text-align: center;
|
|||
|
|
vertical-align: top;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.center {
|
|||
|
|
padding: 0 20px;
|
|||
|
|
position: relative;
|
|||
|
|
height: 100%;
|
|||
|
|
pointer-events: none;
|
|||
|
|
.real-data {
|
|||
|
|
pointer-events: auto;
|
|||
|
|
position: absolute;
|
|||
|
|
bottom: 0;
|
|||
|
|
width: calc(100% - 40px);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.center-panel{
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
position: absolute;
|
|||
|
|
left: 0;
|
|||
|
|
}
|
|||
|
|
.main {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
position: absolute;
|
|||
|
|
left: 0;
|
|||
|
|
z-index: 2;
|
|||
|
|
pointer-events: none;
|
|||
|
|
}
|
|||
|
|
.sou-suo-kuang {
|
|||
|
|
height: 100%;
|
|||
|
|
width: 580px;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
padding: 0 32px 0;
|
|||
|
|
|
|||
|
|
|
|||
|
|
.search {
|
|||
|
|
/deep/ .ant-input {
|
|||
|
|
color: #fff;
|
|||
|
|
background: rgba(5, 38, 93, 1);
|
|||
|
|
border: 1.28px solid rgba(35, 209, 232, 1);
|
|||
|
|
&:hover {
|
|||
|
|
color: #fff;
|
|||
|
|
background: rgba(5, 38, 93, 1);
|
|||
|
|
border: 1.28px solid rgba(35, 209, 232, 1);
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
width: 100%;
|
|||
|
|
height: 90px;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
padding: 28px 16px;
|
|||
|
|
|
|||
|
|
background: rgba(24, 131, 201, 0.2);
|
|||
|
|
|
|||
|
|
|
|||
|
|
/** 文本1 */
|
|||
|
|
font-size: 16px;
|
|||
|
|
font-weight: 400;
|
|||
|
|
letter-spacing: 0px;
|
|||
|
|
line-height: 23.17px;
|
|||
|
|
color: rgba(255, 255, 255, 1);
|
|||
|
|
text-align: left;
|
|||
|
|
vertical-align: top;
|
|||
|
|
line-height: 32px;
|
|||
|
|
|
|||
|
|
.input {
|
|||
|
|
margin-left: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.liebiao {
|
|||
|
|
height: 100%;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.car-preview {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 260px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.desc {
|
|||
|
|
background: rgba(24, 131, 201, 0.2);
|
|||
|
|
border: 1px solid rgba(15, 81, 122, 1);
|
|||
|
|
}
|
|||
|
|
.table-content{
|
|||
|
|
padding-top: 20px;
|
|||
|
|
flex: 1;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.video {
|
|||
|
|
height: 178px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
</style>
|
|||
|
|
|