1534 lines
44 KiB
Vue
1534 lines
44 KiB
Vue
<template>
|
||
<div class="fullHeight dataBoardIndex">
|
||
<div class="fullHeight aside">
|
||
<div class="blockBox" style="height: calc(34.33% + 25px)">
|
||
<div class="blockTitle">
|
||
<!-- 在场统计 -->
|
||
{{ $t('message.dataBoard.presenceOfStatistical') }}
|
||
</div>
|
||
<div class="blockContent dataBoxContent inSenceBox">
|
||
<!-- v-if="COMPANY == 'longguang'"-->
|
||
<div>
|
||
<div class="statisticsHead">
|
||
<div class="statisticsHead_item">
|
||
<span style="color: #5181f6">{{
|
||
statisticsCount.workercount.totalPerson
|
||
}}</span>
|
||
<p>
|
||
<!-- 在册人数 -->
|
||
{{ $t('message.dataBoard.numberOfPresent') }}
|
||
</p>
|
||
</div>
|
||
<div class="statisticsHead_item">
|
||
<span style="color: #f67f51">{{
|
||
statisticsCount.workercount.totalPerson
|
||
}}</span>
|
||
<p>
|
||
<!-- 实名制人数 -->
|
||
{{ $t('message.dataBoard.realnameSystem') }}
|
||
</p>
|
||
</div>
|
||
<div class="statisticsHead_item">
|
||
<span style="color: #5ce2f6">{{
|
||
statisticsCount.presencecount.lsPersonTotal
|
||
}}</span>
|
||
<span>/</span>
|
||
<span>{{ statisticsCount.workercount.lsPersonTotal }}</span>
|
||
<p>
|
||
<!-- 临时工人数 -->
|
||
{{ $t('message.dataBoard.numberOfTemporaryWorkers') }}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<!-- 在册甲方管理人员数 -->
|
||
<div>
|
||
<div class="countBox" style="display: flex">
|
||
<div class="countBoxItem">
|
||
<span>{{ statisticsCount.workercount.jfGlPersonTotal }}</span>
|
||
<p>在册甲方管理人员数</p>
|
||
</div>
|
||
<div class="countBoxItem">
|
||
<span>{{
|
||
statisticsCount.presencecount.jfGlPersonTotal
|
||
}}</span>
|
||
<p>在场甲方管理人员数</p>
|
||
</div>
|
||
</div>
|
||
<div class="countBox" style="display: flex">
|
||
<div class="countBoxItem">
|
||
<span>{{ statisticsCount.workercount.lwPersonTotal }}</span>
|
||
<p>在册劳务人员数</p>
|
||
</div>
|
||
<div class="countBoxItem">
|
||
<span>{{ statisticsCount.presencecount.lwPersonTotal }}</span>
|
||
<p>在场劳务人员数</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 管理人员统计 -->
|
||
<div
|
||
class="blockTitle blockTitle2"
|
||
style="
|
||
margin-bottom: 20px;
|
||
font-size: 14px;
|
||
font-weight: 100;
|
||
color: #ffffff;
|
||
"
|
||
>
|
||
<i></i>{{ $t('message.dataBoard.managementPersonnelStatistics') }}
|
||
</div>
|
||
<div class="management">
|
||
<div class="management_item">
|
||
<div class="item_content">
|
||
<span style="color: #5ce2f6">{{
|
||
statisticsCount.presencecount.jlGlPersonTotal
|
||
}}</span>
|
||
<span>/</span>
|
||
<span>{{ statisticsCount.workercount.jlGlPersonTotal }}</span>
|
||
<p>
|
||
<!-- 监理人员 -->
|
||
{{ $t('message.dataBoard.supervisoryStaff') }}
|
||
</p>
|
||
</div>
|
||
<div class="itemImgBox" style="border: 1px solid #f67f51">
|
||
<img src="@/assets/images/dataBoard/jl.png" alt="" />
|
||
</div>
|
||
</div>
|
||
<div class="management_item">
|
||
<div class="item_content">
|
||
<span style="color: #5ce2f6">{{
|
||
statisticsCount.presencecount.jfGlPersonTotal
|
||
}}</span>
|
||
<span>/</span>
|
||
<span>{{ statisticsCount.workercount.jfGlPersonTotal }}</span>
|
||
<p>
|
||
<!-- 甲方人员 -->
|
||
{{ $t('message.dataBoard.PartyAPersonnel') }}
|
||
</p>
|
||
</div>
|
||
<div class="itemImgBox" style="border: 1px solid #5181f6">
|
||
<img src="@/assets/images/dataBoard/jf.png" alt="" />
|
||
</div>
|
||
</div>
|
||
<div class="management_item">
|
||
<div class="item_content">
|
||
<span style="color: #5ce2f6">{{
|
||
statisticsCount.presencecount.yfGlPersonTotal
|
||
}}</span>
|
||
<span>/</span>
|
||
<span>{{ statisticsCount.workercount.yfGlPersonTotal }}</span>
|
||
<p>
|
||
<!-- 乙方人员 -->
|
||
{{ $t('message.dataBoard.PartyBPersonnel') }}
|
||
</p>
|
||
</div>
|
||
<div class="itemImgBox" style="border: 1px solid #7851f6">
|
||
<img src="@/assets/images/dataBoard/yf.png" alt="" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- <div v-else style="width: 100%;height: 100%">-->
|
||
<!-- <div class="dataBox">-->
|
||
<!-- <img-->
|
||
<!-- src="@//assets/images/dataBoard/numImg_green2.png"-->
|
||
<!-- alt=""-->
|
||
<!-- srcset=""-->
|
||
<!-- />-->
|
||
<!-- <div>-->
|
||
<!-- <p class="num primaryText3">-->
|
||
<!-- {{ statisticsCount.presencecount.totalPerson}}/{{statisticsCount.workercount.totalPerson}}-->
|
||
<!-- </p>-->
|
||
<!-- <p>在场总人数</p>-->
|
||
<!-- </div>-->
|
||
<!-- </div>-->
|
||
<!-- <div class="dataBox">-->
|
||
<!-- <img-->
|
||
<!-- src="@//assets/images/dataBoard/numImg_yellow.png"-->
|
||
<!-- alt=""-->
|
||
<!-- srcset=""-->
|
||
<!-- />-->
|
||
<!-- <div>-->
|
||
<!-- <p class="num yellow">-->
|
||
<!-- {{ statisticsCount.presencecount.lwPersonTotal }}-->
|
||
<!-- </p>-->
|
||
<!-- <p>在场劳务人数</p>-->
|
||
<!-- </div>-->
|
||
<!-- </div>-->
|
||
<!-- <div class="timeInner">-->
|
||
<!-- <p>管理人员</p>-->
|
||
<!-- <div class="bg1 small">-->
|
||
<!-- <span class="num">{{-->
|
||
<!-- statisticsCount.presencecount.glPersonTotal-->
|
||
<!-- }}</span>-->
|
||
<!-- </div>-->
|
||
<!-- </div>-->
|
||
<!-- <!– <div class="timeInner">-->
|
||
<!-- <p>劳务人员</p>-->
|
||
<!-- <div class="bg1 small"><span class="num">{{ statisticsCount.presencecount.lwPersonTotal }}</span></div>-->
|
||
<!-- </div> –>-->
|
||
<!-- <div class="timeInner">-->
|
||
<!-- <p>甲方人员</p>-->
|
||
<!-- <div class="bg1 small">-->
|
||
<!-- <span class="num">{{-->
|
||
<!-- statisticsCount.presencecount.jfGlPersonTotal-->
|
||
<!-- }}</span>-->
|
||
<!-- </div>-->
|
||
<!-- </div>-->
|
||
<!-- <div class="timeInner">-->
|
||
<!-- <p>监理人员</p>-->
|
||
<!-- <div class="bg1 small">-->
|
||
<!-- <span class="num">{{-->
|
||
<!-- statisticsCount.presencecount.jlGlPersonTotal-->
|
||
<!-- }}</span>-->
|
||
<!-- </div>-->
|
||
<!-- </div>-->
|
||
<!-- <div class="timeInner">-->
|
||
<!-- <p>乙方人员</p>-->
|
||
<!-- <div class="bg1 small">-->
|
||
<!-- <span class="num">{{-->
|
||
<!-- statisticsCount.presencecount.yfGlPersonTotal-->
|
||
<!-- }}</span>-->
|
||
<!-- </div>-->
|
||
<!-- </div>-->
|
||
<!-- <div class="timeInner">-->
|
||
<!-- <p>临时人员</p>-->
|
||
<!-- <div class="bg1 small">-->
|
||
<!-- <span class="num">{{-->
|
||
<!-- statisticsCount.presencecount.lsPersonTotal-->
|
||
<!-- }}</span>-->
|
||
<!-- </div>-->
|
||
<!-- </div>-->
|
||
<!-- </div>-->
|
||
</div>
|
||
</div>
|
||
<div class="blockBox" style="height: 23.33%">
|
||
<div class="blockTitle">
|
||
<!-- 人员概况 -->
|
||
{{ $t('message.dataBoard.personnelSituation') }}
|
||
</div>
|
||
<div class="blockContent dataBoxContent">
|
||
<!-- 实名制人数 -->
|
||
<!-- <div class="dataBox">
|
||
<img
|
||
src="@//assets/images/dataBoard/numImg_blue.png"
|
||
alt=""
|
||
srcset=""
|
||
/>
|
||
<div>
|
||
<p class="num primaryText">
|
||
{{ statisticsCount.workercount.totalPerson }}
|
||
</p>
|
||
<p>
|
||
{{$t('message.dataBoard.realnameSystem')}}
|
||
</p>
|
||
</div>
|
||
</div> -->
|
||
<div class="dataBox">
|
||
<img
|
||
src="@//assets/images/dataBoard/training.png"
|
||
alt=""
|
||
srcset=""
|
||
/>
|
||
<div>
|
||
<p class="num primaryText4" style="color: #44d7b6">
|
||
{{ statisticsCount.educationPersonNum }}
|
||
</p>
|
||
<p>
|
||
<!-- 已培训人数 -->
|
||
{{ $t('message.dataBoard.alreadyTrainingPeopleNum') }}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<!-- 在职男女比例 -->
|
||
<!-- <div class="dataBox">
|
||
<img
|
||
src="@//assets/images/dataBoard/numImg_green.png"
|
||
alt=""
|
||
srcset=""
|
||
/>
|
||
<div>
|
||
<p class="num primaryText3">
|
||
{{
|
||
(
|
||
(isNaN(
|
||
statisticsCount.workercount.manPersonTotal /
|
||
(statisticsCount.workercount.womanPersonTotal +
|
||
statisticsCount.workercount.manPersonTotal)
|
||
)
|
||
? 0
|
||
: statisticsCount.workercount.manPersonTotal /
|
||
(statisticsCount.workercount.womanPersonTotal +
|
||
statisticsCount.workercount.manPersonTotal)) * 100
|
||
).toFixed(2)
|
||
}}%
|
||
</p>
|
||
<p>
|
||
{{$t('message.dataBoard.genderRate')}}
|
||
</p>
|
||
</div>
|
||
</div> -->
|
||
<div class="dataBox">
|
||
<img
|
||
src="@//assets/images/dataBoard/training2.png"
|
||
alt=""
|
||
srcset=""
|
||
/>
|
||
<div>
|
||
<p class="num primaryText5" style="color: #f67f51">
|
||
{{
|
||
statisticsCount.workercount.totalPerson -
|
||
statisticsCount.educationPersonNum
|
||
}}
|
||
</p>
|
||
<p>
|
||
<!-- 未培训人数 -->
|
||
{{ $t('message.dataBoard.notTrainingPeopleNum') }}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="blockBox">
|
||
<div class="blockTitle">
|
||
<!-- 年龄结构 -->
|
||
{{ $t('message.dataBoard.ageConstruction') }}
|
||
</div>
|
||
<div class="blockContent">
|
||
<div class="avgageAgeBox">
|
||
<p>
|
||
<!-- 在职平均年龄： -->
|
||
{{ $t('message.dataBoard.averageAgeAtWork') + ':'
|
||
}}<span class="primaryText">{{
|
||
statisticsCount.workercount.avgage.toFixed(0)
|
||
}}</span>
|
||
</p>
|
||
<p>
|
||
<!-- 在场平均年龄： -->
|
||
{{ $t('message.dataBoard.averageAgeInTheField') + ':' }}
|
||
<span class="primaryText3">{{
|
||
statisticsCount.presencecount.avgage.toFixed(0)
|
||
}}</span>
|
||
</p>
|
||
</div>
|
||
<div class="chart" ref="ageChart"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="center fullHeight">
|
||
<div class="top">
|
||
<div class="blockTitle blockTitle3">
|
||
<!-- 出勤统计 -->
|
||
{{ $t('message.dataBoard.attendanceStatistics') }}
|
||
</div>
|
||
<div class="topInner">
|
||
<div class="topDataBox">
|
||
<div class="blockTitle blockTitle2" style="margin-bottom: 10px">
|
||
统计信息：出勤人数/工种总人数
|
||
<!-- <i></i>工种出勤统计{{$t('message.dataBoard.workTypeAttendanceStatistics')}} -->
|
||
</div>
|
||
<div style="height: calc(100% - 40px)">
|
||
<vue-scroll>
|
||
<!-- v-if="COMPANY == 'longguang'"-->
|
||
<div class="attendanceBox">
|
||
<div
|
||
class="attendance"
|
||
v-for="(item, index) in workerTypeList"
|
||
:key="index"
|
||
>
|
||
<span style="color: #5ce2f6">{{
|
||
item.totalPersonNum
|
||
}}</span>
|
||
<span>/</span>
|
||
<span>{{ item.workerNum }}</span>
|
||
<p>{{ item.typeName }}</p>
|
||
</div>
|
||
</div>
|
||
<!-- <div v-else>-->
|
||
<!-- <div-->
|
||
<!-- class="timeInner"-->
|
||
<!-- v-for="(item, index) in workerTypeList"-->
|
||
<!-- :key="index"-->
|
||
<!-- >-->
|
||
<!-- <p :title="item.typeName">{{ item.typeName }}</p>-->
|
||
<!-- <div class="bg1 medium">-->
|
||
<!-- <span class="num">{{ item.totalPersonNum }}</span>-->
|
||
<!-- </div>-->
|
||
<!-- </div>-->
|
||
<!-- </div>-->
|
||
</vue-scroll>
|
||
</div>
|
||
</div>
|
||
<!-- 企业出勤排名 -->
|
||
<!-- <div class="topDataBox">
|
||
<div class="blockTitle blockTitle2"><i></i>{{$t('message.dataBoard.companyAttendanceRanking')}}</div>
|
||
<div class="companyChart" ref="companyChart"></div>
|
||
</div> -->
|
||
</div>
|
||
</div>
|
||
<div class="bottom">
|
||
<div class="bottomInner">
|
||
<div class="blockTitle blockTitle3">
|
||
<i></i>
|
||
<!-- 在场人员 -->
|
||
{{ $t('message.dataBoard.presenceOfPersonnel') }}
|
||
</div>
|
||
<div class="personContent">
|
||
<vue-scroll>
|
||
<div
|
||
class="personBox"
|
||
v-for="(item, index) in inSecenList"
|
||
:key="index"
|
||
>
|
||
<img
|
||
:preview="fileUrl + item.fieldAcquisitionUrl"
|
||
:src="fileUrl + item.fieldAcquisitionUrl"
|
||
alt=""
|
||
srcset=""
|
||
/>
|
||
<div class="carDetail">
|
||
<p class="carNum">{{ item.workerName }}</p>
|
||
<p v-if="item.personType == 2">
|
||
<!-- 管理人员 -->
|
||
{{ $t('message.dataBoard.managePeople') }}
|
||
</p>
|
||
<p v-else>{{ item.teamName }}</p>
|
||
<p class="time">{{ item.passTime }}</p>
|
||
</div>
|
||
</div>
|
||
</vue-scroll>
|
||
</div>
|
||
<div
|
||
class="placeholderBox placeholderBox2"
|
||
v-if="inSecenList.length == 0"
|
||
>
|
||
<img src="@/assets/images/noData3.png" alt="" srcset="" />
|
||
<p>
|
||
<!-- 暂无人员 -->
|
||
{{ $t('message.dataBoard.noPersonnel') }}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="fullHeight aside">
|
||
<div class="blockBox">
|
||
<div class="blockTitle">
|
||
<!-- 出勤人员统计 -->
|
||
{{ $t('message.dataBoard.attendanceStatistics') }}
|
||
</div>
|
||
<div class="blockContent">
|
||
<div
|
||
style="height: 250px; width: 100%"
|
||
class="chart"
|
||
ref="personTypeChart"
|
||
></div>
|
||
</div>
|
||
</div>
|
||
<div class="blockBox">
|
||
<div
|
||
class="blockTitle"
|
||
style="word-wrap: wrap; width: 80px; left: 40%; top: -14px"
|
||
>
|
||
<!-- 管理人员出勤统计 -->
|
||
{{ $t('message.dataBoard.managePeopleStatistics') }}
|
||
</div>
|
||
<div class="blockContent">
|
||
<!-- <div class="safeTrainChart" ref="safeTrainChart"></div> -->
|
||
<div
|
||
style="height: 100%; width: 100%"
|
||
class="administrationPerson"
|
||
ref="administrationPerson"
|
||
></div>
|
||
<!-- <div class="descBox fullHeight">
|
||
<div>
|
||
<div class="descItem descItem1">
|
||
<p class="text"><i class="dot purple"></i>
|
||
已培训人数
|
||
{{$t('message.dataBoard.alreadyTrainingPeopleNum')}}
|
||
</p>
|
||
<p class="num">{{ statisticsCount.educationPersonNum }}</p>
|
||
</div>
|
||
<div class="descItem">
|
||
<p class="text"><i class="dot red"></i>
|
||
未培训人数
|
||
{{$t('message.dataBoard.notTrainingPeopleNum')}}
|
||
</p>
|
||
<p class="num">
|
||
{{
|
||
statisticsCount.workercount.totalPerson -
|
||
statisticsCount.educationPersonNum
|
||
}}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div> -->
|
||
</div>
|
||
</div>
|
||
<div class="blockBox">
|
||
<div class="blockTitle">
|
||
<!-- 班组统计 -->
|
||
{{ $t('message.dataBoard.teamStatistics') }}
|
||
</div>
|
||
<vue-scroll style="height: 90%">
|
||
<div class="blockContent" style="height: 100%">
|
||
<div
|
||
style="width: 380px; height: 140%"
|
||
class="chart"
|
||
ref="groupChart"
|
||
></div>
|
||
</div>
|
||
</vue-scroll>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import {
|
||
selectProjectWorkerTypeTotalListApi,
|
||
selectProjectPresentWorkerListApi,
|
||
selectProjectWorkerStatisticsApi,
|
||
selectProjectComapnyWorkTotalListApi,
|
||
selectProjectTeamWorkTotalListApi,
|
||
selectTenDaysWorkerAttendanceCountList
|
||
} from '@/assets/js/api/dataBoard.js'
|
||
import echarts from 'echarts4'
|
||
export default {
|
||
data() {
|
||
return {
|
||
statisticsCount: {
|
||
attendancePersonNum: 0,
|
||
educationPersonNum: 0,
|
||
workercount: {
|
||
lwPersonYesterdayAdd: 0,
|
||
eduPersonTotal: 0,
|
||
jfGlPersonTotal: 0,
|
||
age18: 0,
|
||
age18to25: 0,
|
||
womanPersonTotal: 0,
|
||
lsPersonTotal: 0,
|
||
jlGlPersonTotal: 0,
|
||
age45to60: 0,
|
||
lwPersonTotal: 0,
|
||
manPersonTotal: 0,
|
||
totalPerson: 0,
|
||
age25to35: 0,
|
||
glPersonTotal: 0,
|
||
yfGlPersonTotal: 0,
|
||
avgage: 0,
|
||
age35to45: 0,
|
||
glPersonYesterdayAdd: 0,
|
||
age60: 0
|
||
},
|
||
devcount: { ufaceDevNum: 0, videoNum: 0, environmentDevNum: 0 },
|
||
presencecount: {
|
||
jfGlPersonTotal: 0,
|
||
age18: 0,
|
||
age18to25: 0,
|
||
womanPersonTotal: 0,
|
||
lsPersonTotal: 0,
|
||
jlGlPersonTotal: 0,
|
||
age45to60: 0,
|
||
lwPersonTotal: 0,
|
||
manPersonTotal: 0,
|
||
totalPerson: 0,
|
||
age25to35: 0,
|
||
glPersonTotal: 0,
|
||
yfGlPersonTotal: 0,
|
||
avgage: 0,
|
||
age35to45: 0,
|
||
age60: 0
|
||
}
|
||
},
|
||
inSecenList: [],
|
||
workerTypeList: [],
|
||
timer: null,
|
||
interval1: null, //计时器
|
||
fileUrl: '',
|
||
COMPANY: ''
|
||
}
|
||
},
|
||
created() {
|
||
this.COMPANY = COMPANY
|
||
console.log(this.COMPANY)
|
||
},
|
||
mounted() {
|
||
console.log(window.location.protocol)
|
||
this.fileUrl =
|
||
window.location.protocol + '//' + this.$store.state.FILEURL.split('//')[1]
|
||
this.initData()
|
||
},
|
||
beforeDestroy() {
|
||
console.log('清除计时器')
|
||
window.clearTimeout(this.timer)
|
||
clearTimeout(this.interval1)
|
||
},
|
||
methods: {
|
||
initData() {
|
||
this.selectProjectWorkerStatistics()
|
||
this.selectProjectWorkerTypeTotalList()
|
||
this.selectProjectPresentWorkerList()
|
||
this.selectProjectComapnyWorkTotalList()
|
||
this.selectProjectTeamWorkTotalList()
|
||
this.getAttendance()
|
||
},
|
||
//获取工种出勤统计
|
||
selectProjectWorkerTypeTotalList() {
|
||
selectProjectWorkerTypeTotalListApi({
|
||
projectSn: this.$store.state.projectSn
|
||
}).then((res) => {
|
||
console.log(res)
|
||
this.workerTypeList = res.result
|
||
clearTimeout(this.interval1)
|
||
this.interval1 = setTimeout(() => {
|
||
// this.selectProjectWorkerTypeTotalList()
|
||
this.selectProjectWorkerStatistics()
|
||
}, 5000)
|
||
})
|
||
},
|
||
//查询在场人员信息
|
||
selectProjectPresentWorkerList() {
|
||
selectProjectPresentWorkerListApi({
|
||
projectSn: this.$store.state.projectSn
|
||
}).then((res) => {
|
||
console.log('在场人员', res)
|
||
this.inSecenList = res.result
|
||
// this.timer = window.setTimeout(() => {
|
||
// this.selectProjectPresentWorkerList()
|
||
// }, 5000)
|
||
})
|
||
},
|
||
//项目人员统计
|
||
selectProjectWorkerStatistics() {
|
||
selectProjectWorkerStatisticsApi({
|
||
sn: this.$store.state.projectSn
|
||
}).then((res) => {
|
||
console.log("项目人员统计",res.result)
|
||
this.statisticsCount = res.result
|
||
|
||
let json1 = this.statisticsCount.presencecount
|
||
let json2 = this.statisticsCount.workercount
|
||
let yData1 = [
|
||
json1.age18,
|
||
json1.age18to25 - 0 + json1.age25to35 + json1.age35to45,
|
||
// json1.age25to35,
|
||
// json1.age35to45,
|
||
json1.age45to60,
|
||
json1.age60
|
||
]
|
||
let yData2 = [
|
||
json2.age18,
|
||
json2.age18to25 - 0 + json2.age25to35 + json2.age35to45,
|
||
// json2.age25to35,
|
||
// json2.age35to45,
|
||
json2.age45to60,
|
||
json2.age60
|
||
]
|
||
console.log("项目人员统计y轴数据",yData1,yData2)
|
||
// ["18及以下", "18-25岁", "25-35岁", "35-45岁", "45-59岁", "60及以上"]
|
||
this.createdBarCharts(
|
||
this.$t('message.dataBoard.ageTypeList'),
|
||
yData1,
|
||
yData2,
|
||
this.$refs.ageChart,
|
||
this.$t('message.dataBoard.peopleStatus')
|
||
/* ["在场", "在职"] */
|
||
)
|
||
this.createPieChart(
|
||
[
|
||
{ value: this.statisticsCount.educationPersonNum, name: '' },
|
||
{
|
||
value:
|
||
this.statisticsCount.workercount.totalPerson -
|
||
this.statisticsCount.educationPersonNum,
|
||
name: ''
|
||
}
|
||
],
|
||
this.$refs.safeTrainChart,
|
||
['rgba(120, 111, 240, 1)', 'rgba(254, 108, 127, 1)'],
|
||
/* "总人数" */ this.$t('message.dataBoard.attendanceOrTotal')[1]
|
||
)
|
||
})
|
||
},
|
||
// 获取出勤人数
|
||
async getAttendance() {
|
||
let xdata = []
|
||
let ydata = []
|
||
let ydata2 = []
|
||
let dateList = []
|
||
// 24*60*60*1000
|
||
let oneDayTime = 24 * 60 * 60 * 1000
|
||
let date = new Date()
|
||
let todayTime = date.getTime()
|
||
for (let i = 9; i >= 0; i--) {
|
||
let everyDayTime = todayTime - oneDayTime * i
|
||
let everyDay = new Date(everyDayTime).getDate()
|
||
xdata.push(everyDay)
|
||
}
|
||
let res = await selectTenDaysWorkerAttendanceCountList({
|
||
project: this.$store.state.projectSn
|
||
})
|
||
if (res.code == 200) {
|
||
let { result } = res
|
||
result.forEach((item, index) => {
|
||
if (index > 0) {
|
||
ydata.push(item.totalNum)
|
||
ydata2.push(item.glPersonNum)
|
||
dateList.push(item.dayTitle)
|
||
}
|
||
})
|
||
}
|
||
this.createPersonTypeChart(xdata, ydata, dateList)
|
||
this.createAdministrationPerson(xdata, ydata2, dateList)
|
||
},
|
||
//获取企业列表
|
||
selectProjectComapnyWorkTotalList() {
|
||
selectProjectComapnyWorkTotalListApi({
|
||
projectSn: this.$store.state.projectSn,
|
||
type: 1
|
||
}).then((res) => {
|
||
let Data = res.result
|
||
let xData = [],
|
||
yData1 = [],
|
||
yData2 = []
|
||
Data.forEach((element) => {
|
||
xData.push(element.enterpriseName)
|
||
yData1.push(element.attendancePersonNum)
|
||
yData2.push(element.totalPersonNum)
|
||
})
|
||
this.createdBarCharts(
|
||
xData,
|
||
yData1,
|
||
yData2,
|
||
this.$refs.companyChart,
|
||
this.$t(
|
||
'message.dataBoard.attendanceOrTotal'
|
||
) /* ["出勤人数","总人数"] */
|
||
)
|
||
})
|
||
},
|
||
//
|
||
selectProjectTeamWorkTotalList() {
|
||
selectProjectTeamWorkTotalListApi({
|
||
projectSn: this.$store.state.projectSn
|
||
}).then((res) => {
|
||
let Data = res.result
|
||
console.log(Data)
|
||
let xData = [],
|
||
yData1 = [],
|
||
yData2 = []
|
||
Data.forEach((element) => {
|
||
xData.push(element.teamName)
|
||
yData1.push(element.attendancePersonNum)
|
||
yData2.push(element.totalPersonNum)
|
||
})
|
||
this.createGroupChart(
|
||
xData,
|
||
yData1,
|
||
yData2,
|
||
this.$refs.groupChart,
|
||
this.$t(
|
||
'message.dataBoard.attendanceOrTotal'
|
||
) /* ["出勤人数","总人数"] */
|
||
)
|
||
})
|
||
},
|
||
//年龄结构---图表
|
||
createdBarCharts(xData, yData1, yData2, el, legendData) {
|
||
let that = this
|
||
let ageChart = echarts.init(el)
|
||
// ageChart.clear();
|
||
let option = {
|
||
grid: {
|
||
top: 40,
|
||
left: 0,
|
||
bottom: 5,
|
||
right: 20,
|
||
containLabel: true
|
||
},
|
||
color: ['#5CE2F6', '#5181F6'],
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'shadow'
|
||
}
|
||
},
|
||
legend: {
|
||
show: true,
|
||
align: 'left',
|
||
top: 5,
|
||
left: 0,
|
||
itemWidth: 13,
|
||
itemHeight: 5,
|
||
textStyle: {
|
||
color: '#9fa2ad'
|
||
}
|
||
},
|
||
|
||
xAxis: [
|
||
{
|
||
type: 'category',
|
||
data: xData,
|
||
boundaryGap: true,
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLine: {
|
||
show: false
|
||
},
|
||
axisLabel: {
|
||
color: '#9fa2ad',
|
||
fontSize: 12
|
||
}
|
||
}
|
||
],
|
||
|
||
yAxis: {
|
||
type: 'value',
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLine: {
|
||
show: false
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
type: 'dashed',
|
||
color: 'rgba(231, 233, 243, 0.2)'
|
||
}
|
||
},
|
||
axisLabel: {
|
||
color: '#9fa2ad'
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
name: legendData[0],
|
||
type: 'bar',
|
||
data: yData1,
|
||
barWidth: 14
|
||
},
|
||
{
|
||
name: legendData[1],
|
||
type: 'bar',
|
||
data: yData2,
|
||
barWidth: 14,
|
||
barGap: 0.1
|
||
}
|
||
]
|
||
}
|
||
|
||
ageChart.setOption(option)
|
||
},
|
||
createPieChart(data, div, color, title) {
|
||
let that = this
|
||
let monitor = echarts.init(div)
|
||
// monitor.clear();
|
||
let option = {
|
||
color: color ? color : ['#5181F6', '#61D2B9', '#F67F51', '#7851F6'],
|
||
title: {
|
||
show: true,
|
||
text: data[0].value + data[1].value,
|
||
x: '48%',
|
||
y: '36%',
|
||
z: 5,
|
||
textAlign: 'center',
|
||
textStyle: {
|
||
color: 'rgba(255, 255, 255, 1)',
|
||
fontSize: 20
|
||
},
|
||
subtext: title,
|
||
subtextStyle: {
|
||
color: 'rgba(255, 255, 255, 0.8)',
|
||
fontSize: 13
|
||
}
|
||
},
|
||
grid: {
|
||
right: 0
|
||
},
|
||
legend: {
|
||
show: false
|
||
},
|
||
// tooltip: {
|
||
// // data: ['在线', '离线'],
|
||
// trigger: "item",
|
||
// formatter: "{a} <br/>{b}: {c} ({d}%)",
|
||
// },
|
||
series: [
|
||
{
|
||
name: '',
|
||
type: 'pie',
|
||
radius: ['50%', '70%'],
|
||
avoidLabelOverlap: false,
|
||
label: {
|
||
show: false,
|
||
position: 'center'
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
},
|
||
data: data
|
||
}
|
||
]
|
||
}
|
||
// if(color){
|
||
// option.series[0].radius=["75%", "85%"]
|
||
// option.title.x="45%"
|
||
// option.legend.show=false
|
||
// }
|
||
monitor.setOption(option)
|
||
},
|
||
//班组图表
|
||
createGroupChart(xData, yData1, yData2, el, legendData) {
|
||
console.log(yData2)
|
||
let monitor = echarts.init(el)
|
||
// let data = [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149, 210, 122, 133, 334, 198, 123, 125, 220];
|
||
// let yMax = 500;
|
||
// let dataShadow = [];
|
||
|
||
// for (let i = 0; i < data.length; i++) {
|
||
// dataShadow.push(yMax);
|
||
// }
|
||
let option = {
|
||
legend: {
|
||
show: true,
|
||
align: 'left',
|
||
top: 5,
|
||
left: 0,
|
||
// itemWidth: 13,
|
||
// itemHeight: 5,
|
||
textStyle: {
|
||
color: '#9fa2ad'
|
||
}
|
||
},
|
||
grid: {
|
||
left: '10',
|
||
right: '40',
|
||
bottom: '120',
|
||
top: '50',
|
||
containLabel: true
|
||
},
|
||
xAxis: {
|
||
type: 'value',
|
||
axisLabel: {
|
||
textStyle: {
|
||
color: '#fff'
|
||
},
|
||
formatter: function () {
|
||
return ''
|
||
}
|
||
},
|
||
splitLine: {
|
||
show: false
|
||
},
|
||
axisLine: {
|
||
show: false
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
}
|
||
},
|
||
yAxis: {
|
||
type: 'category',
|
||
axisLine: {
|
||
show: false
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
data: xData,
|
||
axisLabel: {
|
||
textStyle: {
|
||
// fontSize: 14,
|
||
color: 'white'
|
||
}
|
||
}
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis'
|
||
},
|
||
series: [
|
||
{
|
||
name: '出勤人数',
|
||
type: 'bar',
|
||
barWidth: 20,
|
||
data: yData1,
|
||
barGap: '-100%',
|
||
itemStyle: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||
{ offset: 1, color: '#4ADEE2' }
|
||
])
|
||
// barBorderRadius: 3,
|
||
}
|
||
// label: {
|
||
// show: true,
|
||
// position: "right",
|
||
// color: "white",
|
||
// textStyle: {
|
||
// fontSize: 15,
|
||
// },
|
||
// },
|
||
},
|
||
{
|
||
// For shadow
|
||
name: '总人数',
|
||
type: 'bar',
|
||
z: '-1',
|
||
itemStyle: {
|
||
// color: ["#5CE2F6", "#5181F6"],
|
||
color: '#5181F6'
|
||
// barBorderRadius: 3,
|
||
},
|
||
barCategoryGap: '40%',
|
||
data: yData2,
|
||
animation: false,
|
||
barWidth: 20,
|
||
label: {
|
||
show: true,
|
||
position: 'right',
|
||
color: 'white',
|
||
formatter: function (params) {
|
||
//标签内容
|
||
console.log(params)
|
||
for (let i = 0; i < yData1.length; i++) {
|
||
if (params.data == yData2[i]) {
|
||
return (
|
||
'{color1|' + yData1[i] + '}/{color2|' + yData2[i] + '}'
|
||
)
|
||
}
|
||
}
|
||
},
|
||
rich: {
|
||
color1: {
|
||
color: '#4ADEE2',
|
||
fontSize: 16
|
||
},
|
||
color2: {
|
||
color: '#FFFFFF',
|
||
fontSize: 16
|
||
}
|
||
},
|
||
textStyle: {
|
||
fontSize: 16
|
||
}
|
||
}
|
||
}
|
||
]
|
||
}
|
||
monitor.setOption(option)
|
||
},
|
||
//出勤人员统计
|
||
createPersonTypeChart(xdata, ydata, dateList) {
|
||
let monitor = echarts.init(this.$refs.personTypeChart)
|
||
let option = {
|
||
color: ['#5CE2F6', '#557DED', '#FE6C7F'],
|
||
tooltip: {
|
||
trigger: 'item',
|
||
formatter: '{a} <br/>{b} : {c} ({d}%)'
|
||
},
|
||
|
||
// .sort(function (a, b) { return a.value - b.value; })
|
||
series: [
|
||
{
|
||
name: /* "在职人员类型统计", */ this.$t(
|
||
'message.dataBoard.typeOfonjobPersonnelStatistics'
|
||
),
|
||
type: 'pie',
|
||
// radius: ["50%", "70%"],
|
||
// center: ["50%", "50%"],
|
||
data: [
|
||
{
|
||
value: this.statisticsCount.workercount.glPersonTotal,
|
||
name: /* "管理人员", */ this.$t(
|
||
'message.dataBoard.managePeople'
|
||
)
|
||
},
|
||
{
|
||
value: this.statisticsCount.workercount.lwPersonTotal,
|
||
name: /* "劳务人员", */ this.$t(
|
||
'message.dataBoard.contractWorkers'
|
||
)
|
||
},
|
||
{
|
||
value: this.statisticsCount.workercount.lsPersonTotal,
|
||
name: /* "临时人员", */ this.$t(
|
||
'message.dataBoard.temporaryWorkers'
|
||
)
|
||
}
|
||
],
|
||
// roseType: "radius",
|
||
label: {
|
||
color: 'rgba(255, 255, 255, 0.8)',
|
||
formatter: '{b}\n{c} ({d}%)'
|
||
},
|
||
labelLine: {
|
||
smooth: 0.2,
|
||
length: 3,
|
||
length2: 3
|
||
},
|
||
animationType: 'scale',
|
||
animationEasing: 'elasticOut',
|
||
animationDelay: function (idx) {
|
||
return Math.random() * 200
|
||
}
|
||
// minAngle: 10
|
||
}
|
||
]
|
||
}
|
||
let option2 = {
|
||
title: {
|
||
text: '注：最近10日统计',
|
||
left: 'right',
|
||
top: 'top',
|
||
textStyle: {
|
||
color: 'rgba(255,255,255,0.5)',
|
||
fontSize: '14',
|
||
fontWeight: 'normal'
|
||
}
|
||
},
|
||
color: 'rgba(81, 129, 246, 1)',
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'shadow'
|
||
},
|
||
backgroundColor: '#10152E',
|
||
padding: 15,
|
||
textStyle: {
|
||
fontSize: 15
|
||
},
|
||
formatter: function (params) {
|
||
console.log(params) // 当我们想要自定义提示框内容时，可以先将鼠标悬浮的数据打印出来，然后根据需求提取出来即可
|
||
let index = params[0].dataIndex
|
||
return (
|
||
dateList[index] +
|
||
'<br>' +
|
||
params[0].seriesName +
|
||
'：' +
|
||
params[0].value
|
||
)
|
||
}
|
||
},
|
||
legend: [
|
||
{
|
||
data: ['人次'],
|
||
orient: 'horizontal',
|
||
x: '0',
|
||
y: '5%',
|
||
itemWidth: 14,
|
||
itemHeight: 4,
|
||
textStyle: {
|
||
color: ['rgba(255,255,255,1)'],
|
||
fontSize: 12
|
||
}
|
||
}
|
||
],
|
||
xAxis: {
|
||
type: 'category',
|
||
data: xdata,
|
||
axisLabel: {
|
||
interval: 0,
|
||
textStyle: {
|
||
fontSize: 14,
|
||
color: 'rgba(255,255,255,1)'
|
||
}
|
||
},
|
||
axisLine: {
|
||
show: false
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
splitLine: {
|
||
show: false
|
||
}
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
spltNumber: 5,
|
||
axisLabel: {
|
||
interval: 0,
|
||
textStyle: {
|
||
fontSize: 14,
|
||
color: 'rgba(255,255,255,1)'
|
||
}
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
type: 'dash',
|
||
color: 'rgba(255, 255, 254, 0.2)'
|
||
}
|
||
},
|
||
axisLine: {
|
||
show: false
|
||
},
|
||
min: 0,
|
||
max: 250
|
||
},
|
||
series: [
|
||
{
|
||
name: '人次',
|
||
data: ydata,
|
||
type: 'bar',
|
||
barWidth: 15
|
||
}
|
||
]
|
||
}
|
||
monitor.setOption(option2)
|
||
},
|
||
// 管理人员出勤图表
|
||
createAdministrationPerson(xdata, ydata, dateList) {
|
||
let monitor = echarts.init(this.$refs.administrationPerson)
|
||
let option = {
|
||
title: {
|
||
text: '注：最近10日统计',
|
||
left: 'right',
|
||
top: 'top',
|
||
textStyle: {
|
||
color: 'rgba(255,255,255,0.5)',
|
||
fontSize: '14',
|
||
fontWeight: 'normal'
|
||
}
|
||
},
|
||
color: 'rgba(81, 129, 246, 1)',
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'shadow'
|
||
},
|
||
backgroundColor: '#10152E',
|
||
padding: 15,
|
||
textStyle: {
|
||
fontSize: 15
|
||
},
|
||
showContent: true,
|
||
formatter: function (params) {
|
||
console.log(params) // 当我们想要自定义提示框内容时，可以先将鼠标悬浮的数据打印出来，然后根据需求提取出来即可
|
||
let index = params[0].dataIndex
|
||
return (
|
||
dateList[index] +
|
||
'<br>' +
|
||
params[0].seriesName +
|
||
'：' +
|
||
params[0].value
|
||
)
|
||
}
|
||
},
|
||
legend: [
|
||
{
|
||
data: ['人次'],
|
||
orient: 'horizontal',
|
||
x: '0',
|
||
y: '5%',
|
||
itemWidth: 14,
|
||
itemHeight: 4,
|
||
textStyle: {
|
||
color: ['rgba(255,255,255,1)'],
|
||
fontSize: 12
|
||
}
|
||
}
|
||
],
|
||
xAxis: {
|
||
type: 'category',
|
||
data: xdata,
|
||
axisLabel: {
|
||
interval: 0,
|
||
textStyle: {
|
||
fontSize: 14,
|
||
color: 'rgba(255,255,255,1)'
|
||
}
|
||
},
|
||
axisLine: {
|
||
show: false
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
splitLine: {
|
||
show: false
|
||
}
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
show: true,
|
||
spltNumber: 5,
|
||
barWidth: 57,
|
||
axisLabel: {
|
||
interval: 0,
|
||
textStyle: {
|
||
fontSize: 14,
|
||
color: 'rgba(255,255,255,1)'
|
||
}
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
type: 'dash',
|
||
color: 'rgba(255, 255, 254, 0.2)'
|
||
}
|
||
},
|
||
axisLine: {
|
||
show: false
|
||
},
|
||
min: 0,
|
||
max: 100
|
||
},
|
||
series: [
|
||
{
|
||
name: '人次',
|
||
data: ydata,
|
||
type: 'bar',
|
||
barWidth: 15
|
||
}
|
||
]
|
||
}
|
||
monitor.setOption(option)
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style lang="less" scoped>
|
||
/deep/ .blockBox .blockContent {
|
||
padding: 10px 10px;
|
||
}
|
||
.attendanceBox {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
margin-top: 50px;
|
||
.attendance {
|
||
padding-top: 10px;
|
||
margin-bottom: 25px;
|
||
margin-left: 10px;
|
||
margin-right: 10px;
|
||
box-sizing: border-box;
|
||
width: 143px;
|
||
height: 63px;
|
||
text-align: center;
|
||
font-size: 16px;
|
||
border: 1px solid #235a66;
|
||
}
|
||
}
|
||
.statisticsHead {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
background-image: linear-gradient(
|
||
to right,
|
||
rgba(92, 226, 246, 0),
|
||
rgba(92, 226, 246, 0.2),
|
||
rgba(92, 226, 246, 0)
|
||
);
|
||
.statisticsHead_item {
|
||
box-sizing: border-box;
|
||
width: 113px;
|
||
height: 50px;
|
||
font-size: 16px;
|
||
text-align: center;
|
||
padding-top: 5px;
|
||
span {
|
||
font-size: 20px;
|
||
}
|
||
}
|
||
}
|
||
.dataBoxContent {
|
||
.dataBox {
|
||
margin-top: 10%;
|
||
}
|
||
}
|
||
.management {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
position: absolute;
|
||
top: 78%;
|
||
left: 4%;
|
||
.management_item {
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
width: 120px;
|
||
text-align: start;
|
||
margin-right: 15px;
|
||
.item_content {
|
||
position: absolute;
|
||
left: 50px;
|
||
}
|
||
.itemImgBox {
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 50%;
|
||
img {
|
||
margin-top: 8px;
|
||
margin-left: 8px;
|
||
width: 23px;
|
||
height: 23px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.bottom {
|
||
align-items: flex-start !important;
|
||
// background-size: 100% auto;
|
||
position: relative;
|
||
.blockTitle {
|
||
top: -110px;
|
||
}
|
||
.bottomInner {
|
||
height: calc(100% - 24px);
|
||
}
|
||
}
|
||
.inSenceBox {
|
||
.dataBox {
|
||
height: 28%;
|
||
}
|
||
.timeInner {
|
||
height: 24%;
|
||
float: left;
|
||
width: 50%;
|
||
margin-right: 0;
|
||
}
|
||
.blockTitle2 {
|
||
position: absolute;
|
||
top: 68%;
|
||
}
|
||
.countBox {
|
||
height: 50px;
|
||
margin: 15px 25px;
|
||
margin-left: 30px;
|
||
justify-content: space-between;
|
||
.countBoxItem {
|
||
font-size: 15px;
|
||
width: 150px;
|
||
span {
|
||
font-size: 20px;
|
||
margin: 0 5px;
|
||
}
|
||
p {
|
||
padding-top: 5px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.safeTrainChart {
|
||
width: 50%;
|
||
height: 100%;
|
||
float: left;
|
||
}
|
||
.administrationPerson {
|
||
width: 200px;
|
||
height: 300px;
|
||
}
|
||
.chart {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.companyChart {
|
||
width: 100%;
|
||
height: calc(100% - 20px);
|
||
}
|
||
.top {
|
||
.timeInner {
|
||
float: left;
|
||
margin-bottom: 20px;
|
||
width: 33.33%;
|
||
text-align: center;
|
||
margin-right: 0;
|
||
justify-content: center;
|
||
p {
|
||
font-size: 17px;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
width: 51px;
|
||
}
|
||
}
|
||
}
|
||
.topDataBox {
|
||
height: 100%;
|
||
overflow: hidden;
|
||
.blockTitle2 {
|
||
font-size: 14px !important;
|
||
font-weight: normal;
|
||
text-align: center;
|
||
position: absolute;
|
||
right: 20%;
|
||
top: 6%;
|
||
color: rgba(255, 255, 255, 0.8);
|
||
}
|
||
.blockTitle {
|
||
font-size: 15px;
|
||
}
|
||
}
|
||
.avgageAgeBox {
|
||
position: absolute;
|
||
right: 15px;
|
||
top: -10px;
|
||
font-size: 12px;
|
||
color: rgba(255, 255, 255, 0.8);
|
||
span {
|
||
font-size: 17px;
|
||
vertical-align: middle;
|
||
}
|
||
p:first-child {
|
||
margin-bottom: 5px;
|
||
}
|
||
}
|
||
.dataBoardContent {
|
||
.personContent {
|
||
margin-top: -90px;
|
||
height: calc(100% - 55px);
|
||
overflow: hidden;
|
||
}
|
||
.personBox {
|
||
display: flex;
|
||
align-items: center;
|
||
width: calc(22% - 20px);
|
||
margin: 0 1.5% 15px;
|
||
padding: 12px 10px 8px;
|
||
background-image: linear-gradient(
|
||
rgba(21, 25, 33, 0.2),
|
||
rgba(92, 226, 246, 0.2)
|
||
);
|
||
float: left;
|
||
|
||
img {
|
||
width: 45px;
|
||
height: 58px;
|
||
}
|
||
.carDetail {
|
||
color: rgba(255, 255, 255, 0.8);
|
||
font-size: 13px;
|
||
margin-left: 10px;
|
||
.carNum {
|
||
font-size: 15px;
|
||
color: #5ce2f6;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
// 蓝色
|
||
.dataBoardPage_blue {
|
||
.personContent {
|
||
background-color: rgba(38, 104, 209, 0.1);
|
||
}
|
||
.topInner {
|
||
.timeInner {
|
||
width: 25%;
|
||
}
|
||
}
|
||
}
|
||
// 湛蓝
|
||
.dataBoardPage_blue2 {
|
||
.personContent {
|
||
background-color: rgba(2, 99, 152, 0.2);
|
||
}
|
||
.topInner {
|
||
.timeInner {
|
||
width: 25%;
|
||
}
|
||
}
|
||
}
|
||
</style>
|