546 lines
13 KiB
Vue
546 lines
13 KiB
Vue
|
<template>
|
|||
|
|
<view class="fullHeight bgLightBlue">
|
|||
|
|
<scroll-view scroll-y="true" class="pageContent">
|
|||
|
|
<headers :showBack="parentSn">
|
|||
|
|
<view class="headerName">
|
|||
|
|
{{currentCompany.companyName}}
|
|||
|
|
</view>
|
|||
|
|
</headers>
|
|||
|
|
<scroll-view v-if="userInfo.accountType!=5&&userInfo.accountType!=6" class="scroll-view_H" scroll-x="true">
|
|||
|
|
<view class="scroll-view-item_H" :class="activeTabIndex==-1?'active':''" @click="changeLevel(-1)">
|
|||
|
|
<text class="name">{{currentCompany.companyName=='集团'?currentCompany.companyName:'全部'}}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="scroll-view-item_H" :class="activeTabIndex==index?'active':''" v-for="(item,index) in mapData" :key="index"
|
|||
|
|
@click="changeLevel(index)">
|
|||
|
|
<text class="name">{{item.name}}</text>
|
|||
|
|
</view>
|
|||
|
|
</scroll-view>
|
|||
|
|
<view class="blockBox">
|
|||
|
|
<view class="blockContent">
|
|||
|
|
<u-charts class="labourCanvas" :cWidth="355" :cHeight="120" canvas-id="labourCanvas" chartType="arcbar" :opts="personnelsChartData"
|
|||
|
|
ref="labourCanvas" />
|
|||
|
|
<uni-icons2 @click="forwardFn" v-show="activeTabIndex!=-1&&!mapData[activeTabIndex].projectSn" class="forwardImg" style="color: #007AFF;" type="arrowright" size="30"></uni-icons2>
|
|||
|
|
<view class="dataBox">
|
|||
|
|
<view class="dataItem">
|
|||
|
|
<view class="text">
|
|||
|
|
在场
|
|||
|
|
</view>
|
|||
|
|
<view class="num primaryText" style="color: #FFB512;">
|
|||
|
|
{{listData.presencecount?listData.presencecount.totalPerson:0}}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="dataItem">
|
|||
|
|
<view class="text">
|
|||
|
|
实名制
|
|||
|
|
</view>
|
|||
|
|
<view class="num primaryText" style="color: #0CCD90;">
|
|||
|
|
{{listData.workercount?listData.workercount.totalPerson:0}}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="dataItem">
|
|||
|
|
<view class="text">
|
|||
|
|
在职
|
|||
|
|
</view>
|
|||
|
|
<view class="num primaryText" style="color: #0F7FE7;">
|
|||
|
|
{{listData.workercount?listData.workercount.totalPerson:0}}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="blockBox">
|
|||
|
|
<view class="blockTitle flex">
|
|||
|
|
<view class="titleName">
|
|||
|
|
现场人员分析
|
|||
|
|
</view>
|
|||
|
|
<uni-icons2 type="arrowright" color="#007aff" @click="goAnalyse" style="font-weight: 700;font-size: 40rpx;" />
|
|||
|
|
</view>
|
|||
|
|
<view class="blockContent">
|
|||
|
|
|
|||
|
|
<view class="dataBox">
|
|||
|
|
<view class="dataItem">
|
|||
|
|
<view class="num primaryText">
|
|||
|
|
{{listData.presencecount?listData.presencecount.lwPersonTotal:0}}
|
|||
|
|
</view>
|
|||
|
|
<view class="text">
|
|||
|
|
在场施工人员
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="dataItem">
|
|||
|
|
<view class="num primaryText">
|
|||
|
|
{{listData.presencecount?listData.presencecount.glPersonTotal:0}}
|
|||
|
|
</view>
|
|||
|
|
<view class="text">
|
|||
|
|
在场管理人员
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="blockBox">
|
|||
|
|
<view class="blockTitle flex">
|
|||
|
|
<view class="titleName">
|
|||
|
|
工种情况
|
|||
|
|
</view>
|
|||
|
|
<view style="font-size: 24rpx; color: #262D47; opacity: 0.8;">左右滑动查看更多</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="blockContent">
|
|||
|
|
<u-charts class="ucharts" :cWidth="355" :cHeight="160" canvas-id="chartPeopleWork" chartType="column" :opts="workTypeChartData"
|
|||
|
|
ref="chartPeopleWork" />
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="blockBox">
|
|||
|
|
<view class="blockTitle flex">
|
|||
|
|
<view class="titleName">
|
|||
|
|
工人年龄统计
|
|||
|
|
</view>
|
|||
|
|
<view style="font-size: 24rpx; opacity: 0.8;" class="flex">
|
|||
|
|
<view style="width:20rpx;height:20rpx; background-color:#2A8BE7; margin-right: 10rpx;"></view>在场人数
|
|||
|
|
<view style="width:20rpx;height:20rpx; background-color:#80D5FF; margin:0 10rpx 0 20rpx;"></view> 在职人数
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="blockContent">
|
|||
|
|
<u-charts class="ucharts" :cWidth="355" :cHeight="160" canvas-id="chartProjectAge" chartType="column" :opts="ageChartData"
|
|||
|
|
ref="chartProjectAge" />
|
|||
|
|
</view>
|
|||
|
|
<view class="flex" style="margin: 10rpx; font-size: 28rpx;">
|
|||
|
|
<text>平均年龄</text>
|
|||
|
|
<view>
|
|||
|
|
<text style="margin-right: 26rpx;color: #2A8BE7;">在场：{{listData.presencecount?listData.presencecount.avgage.toFixed(0):0}}岁</text>
|
|||
|
|
<text style="color: #80D5FF">在职：{{listData.workercount?listData.workercount.avgage.toFixed(0):0}}岁</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="blockBox">
|
|||
|
|
<view class="blockTitle">
|
|||
|
|
<view class="titleName">
|
|||
|
|
入场培训教育交底
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="blockContent">
|
|||
|
|
<u-charts class="ucharts" :cWidth="355" :cHeight="130" canvas-id="integritySafety2" chartType="ring" :opts="infoSafetyChartData"
|
|||
|
|
ref="integritySafety2" />
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view style="width: 100%; height: 1px;"></view>
|
|||
|
|
|
|||
|
|
</scroll-view>
|
|||
|
|
<footers :activeTab="'personManage'"></footers>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import headers from '../../components/headers/headers.vue'
|
|||
|
|
import footers from '../../components/footers/footers.vue'
|
|||
|
|
import uCharts from '@/components/u-charts/component.vue';
|
|||
|
|
import uniIcons from "@/components/uni-icons/uni-icons.vue"
|
|||
|
|
export default {
|
|||
|
|
components: {
|
|||
|
|
headers,
|
|||
|
|
footers,
|
|||
|
|
uCharts,
|
|||
|
|
uniIcons
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
userInfo: null,
|
|||
|
|
listData: {}, // 页面数据集
|
|||
|
|
// showMapBack:false,
|
|||
|
|
backArr: [],
|
|||
|
|
searchsn: '',
|
|||
|
|
mapData: [],
|
|||
|
|
activeTabIndex: -1,
|
|||
|
|
parentSn: '',
|
|||
|
|
currentCompany: {
|
|||
|
|
companyName: '集团',
|
|||
|
|
},
|
|||
|
|
//头部半环数据
|
|||
|
|
personnelsChartData: {
|
|||
|
|
series: [{
|
|||
|
|
name: '劳务',
|
|||
|
|
data: 0,
|
|||
|
|
color: '#FFB512',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '',
|
|||
|
|
data: 0,
|
|||
|
|
color: '#0CCD90',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '',
|
|||
|
|
data: 0,
|
|||
|
|
color: '#0F7FE7',
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
workTypeChartData: {
|
|||
|
|
categories: [],
|
|||
|
|
series: []
|
|||
|
|
},
|
|||
|
|
ageChartData: {
|
|||
|
|
categories: [
|
|||
|
|
"18及以下",
|
|||
|
|
"18-25岁",
|
|||
|
|
"25-35岁",
|
|||
|
|
"35-45岁",
|
|||
|
|
"45-59岁",
|
|||
|
|
"60及以上",
|
|||
|
|
],
|
|||
|
|
series: [{
|
|||
|
|
data: [],
|
|||
|
|
color: '#2A8BE7'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
data: [],
|
|||
|
|
color: '#80D5FF'
|
|||
|
|
},
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
infoSafetyChartData: {
|
|||
|
|
title: {
|
|||
|
|
name: "",
|
|||
|
|
color: '#7cb5ec',
|
|||
|
|
fontSize: 25,
|
|||
|
|
offsetY: 0,
|
|||
|
|
},
|
|||
|
|
series: [{
|
|||
|
|
"data": 0,
|
|||
|
|
color: '#1890FF'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"data": 0,
|
|||
|
|
color: '#E7EDF3'
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
onLoad(options) {
|
|||
|
|
this.userInfo = JSON.parse(uni.getStorageSync('userInfo'));
|
|||
|
|
this.getAreaList(true);
|
|||
|
|
},
|
|||
|
|
onShow() {
|
|||
|
|
|
|||
|
|
// console.log('onShow')
|
|||
|
|
let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
|
|||
|
|
let curRoute = routes[routes.length - 1].route //获取当前页面路由
|
|||
|
|
let curParam = routes[routes.length - 1].options; //获取路由参数
|
|||
|
|
if (curParam.sn) {
|
|||
|
|
this.parentSn = curParam.sn
|
|||
|
|
this.searchsn = curParam.sn
|
|||
|
|
}
|
|||
|
|
this.activeTabIndex = -1;
|
|||
|
|
if (this.parentSn) {
|
|||
|
|
this.getAreaList(false);
|
|||
|
|
this.loadStatictisData()
|
|||
|
|
} else {
|
|||
|
|
this.initData();
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
// console.log('mounted')
|
|||
|
|
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
//权限判断
|
|||
|
|
initData(type) {
|
|||
|
|
var that = this
|
|||
|
|
switch (that.userInfo.accountType) {
|
|||
|
|
case 2:
|
|||
|
|
this.searchsn = that.userInfo.headquartersSn
|
|||
|
|
break;
|
|||
|
|
case 3:
|
|||
|
|
this.searchsn = that.userInfo.sn
|
|||
|
|
break;
|
|||
|
|
case 4:
|
|||
|
|
this.searchsn = that.userInfo.sn
|
|||
|
|
break;
|
|||
|
|
case 5:
|
|||
|
|
this.searchsn = that.userInfo.sn
|
|||
|
|
break;
|
|||
|
|
case 6:
|
|||
|
|
this.searchsn = that.userInfo.sn
|
|||
|
|
break;
|
|||
|
|
case 7:
|
|||
|
|
this.searchsn = that.userInfo.sn
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (that.userInfo.accountType == 5 || that.userInfo.accountType == 6 || that.userInfo.accountType == 10) {
|
|||
|
|
// this.getProjectDetail()
|
|||
|
|
} else {
|
|||
|
|
this.getAreaList(type);
|
|||
|
|
}
|
|||
|
|
this.loadStatictisData()
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
//获取区域
|
|||
|
|
getAreaList() {
|
|||
|
|
let that = this;
|
|||
|
|
this.sendRequest({
|
|||
|
|
url: "xmgl/company/getComapnyStatisticsList",
|
|||
|
|
method: 'POST',
|
|||
|
|
data: {
|
|||
|
|
sn: this.searchsn,
|
|||
|
|
},
|
|||
|
|
success(res) {
|
|||
|
|
that.mapData = res.result.companyList ? res.result.companyList : res.result.projectList
|
|||
|
|
if (res.result.companyInfo) {
|
|||
|
|
that.currentCompany = res.result.companyInfo
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
//切换企业地区
|
|||
|
|
changeLevel(index) {
|
|||
|
|
this.activeTabIndex = index;
|
|||
|
|
// console.log('changeLevel', index)
|
|||
|
|
if (this.activeTabIndex != -1) {
|
|||
|
|
this.searchsn = this.mapData[index].projectSn ? this.mapData[index].projectSn : this.mapData[index].companySn
|
|||
|
|
// this.loadData(false);
|
|||
|
|
this.loadStatictisData()
|
|||
|
|
if (this.mapData[index].projectSn) {
|
|||
|
|
// this.getProjectDetail()
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
if (this.parentSn) {
|
|||
|
|
this.searchsn = this.parentSn
|
|||
|
|
// this.loadData(false);
|
|||
|
|
this.loadStatictisData()
|
|||
|
|
} else {
|
|||
|
|
this.initData(true)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
//获取区域下的数据
|
|||
|
|
loadStatictisData() {
|
|||
|
|
let that = this;
|
|||
|
|
this.sendRequest({
|
|||
|
|
url: 'xmgl/workerInfo/selectWorkerManageStatistics',
|
|||
|
|
data: {
|
|||
|
|
sn: that.searchsn,
|
|||
|
|
},
|
|||
|
|
method: 'post',
|
|||
|
|
success(res) {
|
|||
|
|
let data = res.result;
|
|||
|
|
that.listData = data;
|
|||
|
|
//头部半圆数据
|
|||
|
|
let count = (data.presencecount.totalPerson + data.workercount.totalPerson * 2) / 100;
|
|||
|
|
that.personnelsChartData = {
|
|||
|
|
series: [{
|
|||
|
|
name: '劳务',
|
|||
|
|
data: (data.presencecount.totalPerson / count) / 100,
|
|||
|
|
color: '#FFB512',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '',
|
|||
|
|
data: (data.workercount.totalPerson / count) / 100,
|
|||
|
|
color: '#0CCD90',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '',
|
|||
|
|
data: (data.workercount.totalPerson / count) / 100,
|
|||
|
|
color: '#0F7FE7',
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
]
|
|||
|
|
};
|
|||
|
|
that.$refs.labourCanvas.changeData('labourCanvas', that.personnelsChartData);
|
|||
|
|
//获取工种信息
|
|||
|
|
let obj = {
|
|||
|
|
data: [],
|
|||
|
|
color: '#0F7FE7',
|
|||
|
|
name:'',
|
|||
|
|
};
|
|||
|
|
let titleArr = [];
|
|||
|
|
data.workerTypeList.forEach(item => {
|
|||
|
|
titleArr.push(item.typeName);
|
|||
|
|
obj.data.push(item.personNum)
|
|||
|
|
})
|
|||
|
|
that.workTypeChartData.categories = titleArr;
|
|||
|
|
that.workTypeChartData.series = [obj];
|
|||
|
|
that.$refs.chartPeopleWork.changeData('chartPeopleWork', that.workTypeChartData);
|
|||
|
|
//获取工人年龄统计
|
|||
|
|
that.ageChartData.series = [{
|
|||
|
|
data: [data.presencecount.age18, data.presencecount.age18to25, data.presencecount.age25to35,
|
|||
|
|
data.presencecount.age35to45, data.presencecount.age45to60, data.presencecount.age60
|
|||
|
|
],
|
|||
|
|
color: '#2A8BE7',
|
|||
|
|
name:'在场人数',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
data: [data.workercount.age18, data.workercount.age18to25, data.workercount.age25to35,
|
|||
|
|
data.workercount.age35to45, data.workercount.age45to60, data.workercount.age60
|
|||
|
|
],
|
|||
|
|
color: '#80D5FF',
|
|||
|
|
name:'在职人数',
|
|||
|
|
},
|
|||
|
|
];
|
|||
|
|
that.$refs.chartProjectAge.changeData('chartProjectAge', that.ageChartData);
|
|||
|
|
|
|||
|
|
//获取培训数据
|
|||
|
|
let trainingNum = (data.workercount.eduPersonTotal / data.workercount.totalPerson) * 100;
|
|||
|
|
|
|||
|
|
that.infoSafetyChartData.title = {
|
|||
|
|
name: Number.isNaN(trainingNum) ? '0%' : Number(trainingNum.toFixed(2)) + "%",
|
|||
|
|
color: '#7cb5ec',
|
|||
|
|
fontSize: 25,
|
|||
|
|
offsetY: 0,
|
|||
|
|
};
|
|||
|
|
that.infoSafetyChartData.series = [{
|
|||
|
|
"data": Number.isNaN(trainingNum) ? 0 : Number(trainingNum.toFixed(2)),
|
|||
|
|
color: '#1890FF'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"data": Number.isNaN(trainingNum) ? 0 : Number((100 - trainingNum).toFixed(2)),
|
|||
|
|
color: '#E7EDF3'
|
|||
|
|
}
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
that.$refs.integritySafety2.changeData('integritySafety2', that.infoSafetyChartData);
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
forwardFn() {
|
|||
|
|
var type = 'area'
|
|||
|
|
if (this.mapData[this.activeTabIndex].projectSn) {
|
|||
|
|
type = 'project'
|
|||
|
|
}
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: './personManage?sn=' + this.searchsn + '&type=' + type
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
|
|||
|
|
//现场人员分析
|
|||
|
|
goAnalyse() {
|
|||
|
|
let title = this.activeTabIndex == -1 ? '集团' : this.mapData[this.activeTabIndex].name;
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: './peopleAnalyze?sn=' + this.searchsn + '&title=' + title,
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss">
|
|||
|
|
.flex {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.blockBox {
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.blockBox .blockTitle .titleName::before {
|
|||
|
|
height: 75%;
|
|||
|
|
top: 16%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.labourCanvas {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 240rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.blockContent {
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.ucharts {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 175px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.forwardImg {
|
|||
|
|
position: absolute;
|
|||
|
|
right: 20rpx;
|
|||
|
|
top: 50%;
|
|||
|
|
margin-top: -30rpx;
|
|||
|
|
opacity: 0.9;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.statusTips {
|
|||
|
|
position: absolute;
|
|||
|
|
right: 0px;
|
|||
|
|
top: 4rpx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
|
|||
|
|
.kuai {
|
|||
|
|
width: 24rpx;
|
|||
|
|
height: 24rpx;
|
|||
|
|
margin-left: 16rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.text {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: $uni-text-color;
|
|||
|
|
opacity: 0.9;
|
|||
|
|
margin-left: 6rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.kuai1 {
|
|||
|
|
background-color: $uni-color-primary;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.kuai2 {
|
|||
|
|
background-color: $--color-primary2;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.kuai3 {
|
|||
|
|
background-color: $--color-primary6;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.kuai4 {
|
|||
|
|
background-color: $--color-primary3;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.kuaiBox {
|
|||
|
|
display: inline-flex;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-bottom: 6rpx;
|
|||
|
|
|
|||
|
|
.kuai {
|
|||
|
|
min-width: 40rpx;
|
|||
|
|
height: 40rpx;
|
|||
|
|
line-height: 40rpx;
|
|||
|
|
color: white;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.avgageBox {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
margin-top: 20rpx;
|
|||
|
|
color: $uni-text-color;
|
|||
|
|
|
|||
|
|
.primaryText {
|
|||
|
|
margin-right: 20rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|