975 lines
35 KiB
Vue
975 lines
35 KiB
Vue
<template>
|
|
<div class="project-labor main-page">
|
|
<el-col :span="6" class="h100">
|
|
<module-one-1-1 label="劳务人员概况" class="labor-base">
|
|
<div class="attendance-info warning-info">
|
|
<div class="attendance-info-title warning-info-title">
|
|
<div :class="attendanceNav == 0 ? 'active' : ''" @click="doAttendanceNav(0, '在岗人员')">在岗人员</div>
|
|
<div :class="attendanceNav == 1 ? 'active' : ''" @click="doAttendanceNav(1, '今日出勤')">今日出勤</div>
|
|
</div>
|
|
<el-row>
|
|
<el-col :span="8" class="attendance-tag">
|
|
<div class="survey_content">
|
|
<div class="survey_content_img">
|
|
<img
|
|
:src="
|
|
attendanceNav == 0
|
|
? 'images/survey_icon_4.png'
|
|
: 'images/survey_icon_5.png'
|
|
"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="survey_content_number labour-survey_content_number">
|
|
<div class="survey_content_value">
|
|
<span>{{ attendanceTotal }}</span> 人
|
|
</div>
|
|
<p>{{ attendanceNav == 0 ? "在岗人员" : "今日出勤" }}</p>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="16">
|
|
<staffSurveyChart :key="chartKey" :height="$dpi() == '1K' ? '220px' : $dpi() == '2K' ? '330px' : '550px'" :data="attendanceData" :width="140"></staffSurveyChart>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</module-one-1-1>
|
|
<module-one-1-1 label="劳务人员七天出勤趋势" class="labor-week-att">
|
|
<my-chart :key="chartKey" id="prj_labor_chart2" width="100%" height="calc(100% - 40px)" :render="renderChart2"></my-chart>
|
|
</module-one-1-1>
|
|
<module-one-1-1 label="劳务人员年龄分布">
|
|
<my-chart :key="chartKey" id="prj_labor_chart3" width="100%" height="calc(100% - 0px)" :render="renderChart3"></my-chart>
|
|
</module-one-1-1>
|
|
</el-col>
|
|
<el-col :span="12" class="h100">
|
|
<module-one-2-2 label class="no-title no-border">
|
|
<my-chart :key="chartKey" id="prj-labor-map" width="100%" height="100%" :render="renderMap"></my-chart>
|
|
</module-one-2-2>
|
|
<module-one-1-2 label="实时进出" class="prj-labor-real">
|
|
<div class="real-item" v-for="(item, index) in realList" :key="index">
|
|
<div class="real-item-type" :class="'is-'+item.inOutType">{{ item.inOutType==='out'?'出':'进' }}</div>
|
|
<el-image class="real-item-img" fit="cover" :src="item.img" :preview-src-list="[item.img]"></el-image>
|
|
<div class="real-item-name">{{ item.name }}</div>
|
|
<div class="real-item-work-type">
|
|
<span>{{ item.workType }}</span>
|
|
</div>
|
|
<div class="real-item-time">
|
|
<span>{{item.inOutType==='in'?'进场时间：':'出场时间：'}} {{ item.inoutDate }}</span>
|
|
</div>
|
|
</div>
|
|
</module-one-1-2>
|
|
</el-col>
|
|
<el-col :span="6" class="h100">
|
|
<module-one-1-1 label="工种占比分布" class="chart-module4" :key="chartKey">
|
|
<project-overview-chart
|
|
:htmlShow="true"
|
|
:key="'ai4' +chartKey"
|
|
:sp="''"
|
|
:fn="changeChart4"
|
|
:maintitle="workerTotal"
|
|
:legend-opt="legendOpt"
|
|
:typedata="workerGroupList"
|
|
:text="'总人数'"
|
|
:height="chart4Height"
|
|
></project-overview-chart>
|
|
</module-one-1-1>
|
|
<module-one-1-1 label="人员地区分布">
|
|
<my-chart :key="chartKey" id="prj_labor_chart5" width="100%" height="100%" :render="renderChart5"></my-chart>
|
|
</module-one-1-1>
|
|
<module-one-1-1 label="人员预警" class="prj-labor-alert">
|
|
<div class="alert-list scroll">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>姓名</th>
|
|
<th>单位</th>
|
|
<th>缺勤天数</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="(item, index) in alertList" :key="index">
|
|
<td>{{ item.name }}</td>
|
|
<td>{{ item.companyName }}</td>
|
|
<td>{{ item.id }}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</module-one-1-1>
|
|
</el-col>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import debounce from 'lodash.debounce'
|
|
import staffSurveyChart from '@/components/staffSurveyChart.vue'
|
|
export default {
|
|
components: { staffSurveyChart },
|
|
data() {
|
|
return {
|
|
dpi: '',
|
|
chartKey: 0,
|
|
chart4Height: 230,
|
|
chart2Height: 230,
|
|
selProject: null,
|
|
attendanceNav: 0,
|
|
attendanceTotal: 0,
|
|
attendanceData: [
|
|
{ text: '普通工种', value: 0, id: 0 },
|
|
{ text: '特殊工种', value: 0, id: 0 },
|
|
{ text: '管理人员', value: 0, id: 0 },
|
|
],
|
|
legendOpt: {},
|
|
overviewDatas: [],
|
|
nativeList: [],
|
|
ageList: [],
|
|
weekData: [],
|
|
workerTotal: 0,
|
|
workerGroupList: [],
|
|
realList: [],
|
|
alertList: [],
|
|
}
|
|
},
|
|
methods: {
|
|
changeChart4(opt) {
|
|
if (this.$dpi() == '1K') {
|
|
opt.legend[0].left = 200
|
|
return opt
|
|
} else if (this.$dpi() == '2K') {
|
|
opt.legend[0].left = 290
|
|
return opt
|
|
} else {
|
|
opt.legend[0].left = 500
|
|
return opt
|
|
}
|
|
},
|
|
setOpts() {
|
|
let is1K = this.$dpi() == '1K'
|
|
let is2K = this.$dpi() == '2K'
|
|
this.legendOpt = {
|
|
icon: 'rect',
|
|
orient: 'vertical',
|
|
itemWidth: '50%',
|
|
left: 240,
|
|
right: '10%',
|
|
itemWidth: 20,
|
|
itemGap: 20,
|
|
itemHeight: 20,
|
|
type: 'scroll',
|
|
pageTextStyle: {
|
|
color: '#c3dbfd',
|
|
fontSize: is1K ? 12 : is2K ? 16 : 20,
|
|
},
|
|
scroll: {
|
|
y: is1K ? 300 : is2K ? 500 : 600,
|
|
bar: {
|
|
show: true,
|
|
width: 5,
|
|
height: 10,
|
|
},
|
|
},
|
|
textStyle: {
|
|
padding: [0, 0, 0, 0],
|
|
fontSize: is1K ? 12 : is2K ? 14 : 20,
|
|
color: '#c3dbfd',
|
|
align: 'center',
|
|
rich: {
|
|
name: {
|
|
fontSize: is1K ? 12 : is2K ? 14 : 20,
|
|
color: '#c3dbfd',
|
|
padding: [5, 2, 5, 2],
|
|
},
|
|
percent: {
|
|
fontSize: is1K ? 12 : is2K ? 14 : 20,
|
|
color: '#4676FD',
|
|
padding: [0, 2, 0, 2],
|
|
},
|
|
},
|
|
},
|
|
}
|
|
},
|
|
init() {
|
|
if (!this.selProject) {
|
|
return
|
|
}
|
|
this.loadAttendanceData()
|
|
this.getGroupByWorker()
|
|
this.groupAttendanceLastWeek()
|
|
this.getWorkerCountGroupByType()
|
|
this.getRealAttendance()
|
|
this.getAttendanceAlert()
|
|
setTimeout(this.init,3*60*1000);
|
|
},
|
|
resize() {
|
|
let is1K = this.$dpi() == '1K'
|
|
let is2K = this.$dpi() == '2K'
|
|
this.chart4Height = is1K ? 230 : is2K ? 360 : 595
|
|
this.chart2Height = is1K ? 567 : is2K ? 800 : 1250
|
|
this.chartKey++
|
|
},
|
|
getAttendanceAlert() {
|
|
this.$api.labor.getAttendanceAlert(this.selProject.vendorsCode, this.selProject.id).then((d) => {
|
|
this.alertList = d.data.map((it) => {
|
|
return it
|
|
})
|
|
})
|
|
},
|
|
getRealAttendance() {
|
|
this.$api.labor.getRealAttendance(this.selProject.vendorsCode, this.selProject.id).then((d) => {
|
|
this.realList = d.data.map((it) => {
|
|
it.name = it.workerName||it.userName;
|
|
it.workType = it.workTypeName||it.subDeptGroupName
|
|
it.img = it.scanPhoto||it.inPhoto||it.outPhoto
|
|
if(it.outTime){
|
|
it.inOutType = 'out'
|
|
it.inoutDate = it.outTime
|
|
}else if(it.inTime){
|
|
it.inOutType = 'in'
|
|
it.inoutDate = it.inTime
|
|
}else if (it.attendanceOutTime) {
|
|
it.inOutType = 'out'
|
|
it.inoutDate = it.attendanceInTime
|
|
} else {
|
|
it.inOutType = 'in'
|
|
it.inoutDate = it.attendanceTime
|
|
}
|
|
return it
|
|
})
|
|
})
|
|
},
|
|
getWorkerCountGroupByType() {
|
|
this.$api.labor.getWorkerCountGroupByType(this.selProject.vendorsCode, this.selProject.id).then((d) => {
|
|
let sum = 0
|
|
d.data.forEach((item) => {
|
|
item.id = item.id || item.comId
|
|
sum += item.id ? item.id : 0
|
|
})
|
|
this.workerTotal = sum
|
|
this.workerGroupList = d.data.map((item) => {
|
|
return {
|
|
name: item.workTypeName || item.craftPostName,
|
|
value: item.id ? item.id : 0,
|
|
}
|
|
})
|
|
this.chartKey++
|
|
})
|
|
},
|
|
groupAttendanceLastWeek() {
|
|
this.$api.labor.groupAttendanceLastWeek(this.selProject.vendorsCode, this.selProject.id).then((d) => {
|
|
this.weekData = d.data.map((it) => {
|
|
return {
|
|
name: it.dt.substring(5).replace('-', '.'),
|
|
value: it.cnt,
|
|
|
|
}
|
|
})
|
|
this.chartKey++
|
|
})
|
|
},
|
|
getGroupByWorker() {
|
|
this.$api.labor.groupByWorker(this.selProject.vendorsCode, this.selProject.id).then((d) => {
|
|
this.nativeList = (d.data.native || []).map((it) => {
|
|
it.name = it.nativePlace
|
|
it.value = it.count
|
|
return it
|
|
})
|
|
this.ageList = (d.data.age || []).map((it) => {
|
|
it.name = ['', '18~30', '30~40', '40~55', '55岁以上'][it.age]
|
|
it.value = it.count
|
|
return it
|
|
})
|
|
this.chartKey++
|
|
})
|
|
},
|
|
renderChart2(opt) {
|
|
let is1K = this.$dpi() == '1K'
|
|
let is2K = this.$dpi() == '2K'
|
|
const areaOption = {
|
|
grid: {
|
|
left: '5%',
|
|
right: '5%',
|
|
bottom: '0%',
|
|
top: '15%',
|
|
containLabel: true,
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow',
|
|
label: {
|
|
backgroundColor: '#6a7985',
|
|
textStyle: {
|
|
fontSize: is1K ? 12 : is2K ? 16 : 20,
|
|
},
|
|
},
|
|
},
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: this.weekData.map((item) => item.name),
|
|
axisLabel: {
|
|
textStyle: {
|
|
color: '#0df2c8',
|
|
fontSize: is1K ? 12 : is2K ? 16 : 20,
|
|
},
|
|
},
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
minInterval: 1,
|
|
axisLabel: {
|
|
textStyle: {
|
|
color: '#0df2c8',
|
|
fontSize: is1K ? 12 : is2K ? 16 : 20,
|
|
},
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
name: '出勤人数',
|
|
type: 'line',
|
|
areaStyle: {
|
|
color: 'rgba(13, 204, 242,0.5)', // 设置面积背景颜色为红色
|
|
},
|
|
label: {
|
|
show: true,
|
|
position: 'top', // 值标签显示在折线点上方
|
|
textStyle: {
|
|
color: '#0df2c8', // 设置标签文字颜色为红色
|
|
fontSize: is1K ? 12 : is2K ? 16 : 20,
|
|
},
|
|
},
|
|
data: this.weekData.map((item) => item.value),
|
|
},
|
|
],
|
|
}
|
|
return areaOption
|
|
},
|
|
renderChart3(opt) {
|
|
let is1K = this.$dpi() == '1K'
|
|
let is2K = this.$dpi() == '2K'
|
|
let pieOption = {
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: '{b} 岁 <br/> {c} 人 ({d}%)',
|
|
textStyle: {
|
|
fontSize: is1K ? 12 : is2K ? 16 : 20,
|
|
},
|
|
},
|
|
legend: {
|
|
orient: 'vertical',
|
|
left: 'left',
|
|
top: 'center',
|
|
data: this.ageList.map((it) => it.name),
|
|
textStyle: {
|
|
color: '#19c0e6',
|
|
fontSize: is1K ? 12 : is2K ? 16 : 20,
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
type: 'pie',
|
|
radius: '55%',
|
|
center: ['50%', '60%'],
|
|
data: this.ageList,
|
|
label: {
|
|
normal: {
|
|
formatter: '{b}\n{c}',
|
|
textStyle: {
|
|
color: '#0df2c8',
|
|
fontSize: is1K ? 12 : is2K ? 16 : 20,
|
|
},
|
|
},
|
|
emphasis: {
|
|
formatter: '{b}\n{c}',
|
|
textStyle: {
|
|
color: '#0df2c8',
|
|
fontSize: is1K ? 12 : is2K ? 16 : 20,
|
|
},
|
|
},
|
|
},
|
|
emphasis: {
|
|
itemStyle: {
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 0,
|
|
},
|
|
},
|
|
},
|
|
],
|
|
}
|
|
return pieOption
|
|
},
|
|
renderChart5(opt) {
|
|
let is1K = this.$dpi() == '1K'
|
|
let is2K = this.$dpi() == '2K'
|
|
const pieOption = {
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: '{b}: {c} ({d}%)',
|
|
textStyle: {
|
|
fontSize: is1K ? 12 : is2K ? 16 : 20,
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
type: 'pie',
|
|
radius: ['50%', '70%'], // 设置为圆环图
|
|
avoidLabelOverlap: false,
|
|
label: {
|
|
normal: {
|
|
formatter: '{b}\n{c}',
|
|
textStyle: {
|
|
color: '#0df2c8',
|
|
fontSize: is1K ? 12 : is2K ? 16 : 20,
|
|
},
|
|
},
|
|
emphasis: {
|
|
formatter: '{b}\n{c}',
|
|
textStyle: {
|
|
color: '#0df2c8',
|
|
fontSize: is1K ? 12 : is2K ? 16 : 20,
|
|
},
|
|
},
|
|
},
|
|
emphasis: {
|
|
label: {
|
|
show: true,
|
|
fontSize: is1K ? 12 : is2K ? 16 : 20,
|
|
fontWeight: 'bold',
|
|
},
|
|
},
|
|
|
|
data: this.nativeList,
|
|
},
|
|
],
|
|
}
|
|
return pieOption
|
|
},
|
|
doAttendanceNav(n) {
|
|
this.attendanceNav = n
|
|
this.loadAttendanceData()
|
|
},
|
|
loadJhAttendanceData() {
|
|
let data = {
|
|
id: this.attendanceNav,
|
|
projectId: this.selProject.id,
|
|
attendanceTime: this.$dt(new Date()).format('YYYY-MM-DD'),
|
|
}
|
|
let ajax = this.$api.detail.groupByComany
|
|
if (this.attendanceNav != 1) {
|
|
ajax = this.$api.detail.groupAllByComany
|
|
}
|
|
ajax(data).then((d) => {
|
|
let tmps = d.data || []
|
|
const func = (ids) => {
|
|
let sum = 0
|
|
tmps.filter((it) => ids.includes(it.companyTypeId))
|
|
.map((it) => it.id)
|
|
.forEach((it) => {
|
|
sum += it * 1
|
|
})
|
|
return sum
|
|
}
|
|
|
|
this.attendanceTotal = 0
|
|
this.attendanceData = [
|
|
{ text: '劳务人员', value: func(['0', '2', '3', '4', '5']) },
|
|
{ text: '监理人员', value: func(['8']) },
|
|
{ text: '总包人员', value: func(['1', '6']) },
|
|
]
|
|
this.attendanceData.forEach((it) => {
|
|
this.attendanceTotal += it.value
|
|
})
|
|
})
|
|
},
|
|
loadUniAttendanceData() {
|
|
let ajax = this.$api.detail.groupByCraftType
|
|
let posData = {
|
|
comId: this.selProject.comId,
|
|
projectId: this.selProject.id,
|
|
}
|
|
if (this.attendanceNav == 1) {
|
|
ajax = this.$api.detail.groupByCraftTypeByAttendance
|
|
posData.createTime = this.$dt(new Date()).format('YYYY-MM-DD')
|
|
//posData.createTime = '2024-10-13'
|
|
}
|
|
ajax(posData).then((d) => {
|
|
this.attendanceData = (d.data || []).map((it) => {
|
|
return {
|
|
text: it.createBy,
|
|
value: it.id || 0,
|
|
id: it.craftType,
|
|
}
|
|
})
|
|
let count = 0
|
|
this.attendanceData.forEach((it) => {
|
|
count += it.value
|
|
})
|
|
this.attendanceTotal = count
|
|
})
|
|
},
|
|
renderMap(opt, myChart) {
|
|
let mapName = 'china'
|
|
let data = this.nativeList
|
|
let geoCoordMap = {}
|
|
|
|
/*获取地图数据*/
|
|
|
|
let mapFeatures = echarts.getMap(mapName).geoJson.features
|
|
let allData = []
|
|
mapFeatures.forEach(function (v) {
|
|
// 地区名称
|
|
var name = v.properties.name
|
|
// 地区经纬度
|
|
geoCoordMap[name] = v.properties.cp
|
|
allData.push({
|
|
name: name,
|
|
value: 0,
|
|
})
|
|
})
|
|
|
|
let max = 880,
|
|
min = 3 // todo
|
|
let maxSize4Pin = 80,
|
|
minSize4Pin = 20
|
|
|
|
let convertData = function (data, lbl) {
|
|
let res = []
|
|
if (lbl == 1) {
|
|
data = allData
|
|
}
|
|
for (let i = 0; i < data.length; i++) {
|
|
let geoCoord = geoCoordMap[data[i].name]
|
|
if (geoCoord) {
|
|
res.push({
|
|
name: data[i].name,
|
|
value: geoCoord.concat(data[i].value),
|
|
})
|
|
}
|
|
}
|
|
if (lbl == 1) {
|
|
return res
|
|
}
|
|
return res.filter((d) => d.value[2] > 0)
|
|
}
|
|
let option = {
|
|
visualMap: {
|
|
show: false,
|
|
min: 0,
|
|
max: 200,
|
|
left: 'left',
|
|
top: 'bottom',
|
|
text: ['高', '低'], // 文本，默认为数值文本
|
|
calculable: true,
|
|
seriesIndex: [1],
|
|
inRange: {
|
|
color: ['#00e1ff00', '#3da2ffFF'],
|
|
//color: ['#3B5077', '#031525'], // 蓝黑
|
|
// color: ['#ffc0cb', '#800080'] // 红紫
|
|
// color: ['#3C3B3F', '#605C3C'] // 黑绿
|
|
// color: ['#0f0c29', '#302b63', '#24243e'] // 黑紫黑
|
|
// color: ['#23074d', '#cc5333'] // 紫红
|
|
//color: ['#00467F', '#A5CC82'], // 蓝绿
|
|
// color: ['#1488CC', '#2B32B2'] // 浅蓝
|
|
// color: ['#00467F', '#A5CC82'] // 蓝绿
|
|
// color: ['#00467F', '#A5CC82'] // 蓝绿
|
|
// color: ['#00467F', '#A5CC82'] // 蓝绿
|
|
// color: ['#00467F', '#A5CC82'] // 蓝绿
|
|
},
|
|
},
|
|
geo: {
|
|
show: true,
|
|
map: mapName,
|
|
label: {
|
|
normal: {
|
|
show: false,
|
|
},
|
|
emphasis: {
|
|
show: false,
|
|
},
|
|
},
|
|
roam: true,
|
|
itemStyle: {
|
|
normal: {
|
|
areaColor: '#031525',
|
|
borderColor: '#3B5077',
|
|
},
|
|
emphasis: {
|
|
areaColor: '#2B91B7',
|
|
},
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
name: '散点',
|
|
type: 'scatter',
|
|
coordinateSystem: 'geo',
|
|
data: convertData(data, 1),
|
|
symbolSize: function (val) {
|
|
return val[2] / 10
|
|
},
|
|
label: {
|
|
normal: {
|
|
formatter: '{b}',
|
|
position: 'right',
|
|
show: true,
|
|
},
|
|
emphasis: {
|
|
show: true,
|
|
},
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#05C3F9',
|
|
},
|
|
},
|
|
},
|
|
{
|
|
type: 'map',
|
|
map: mapName,
|
|
geoIndex: 0,
|
|
aspectScale: 0.75, //长宽比
|
|
showLegendSymbol: false, // 存在legend时显示
|
|
select: {
|
|
disabled: true,
|
|
label: {
|
|
show: false,
|
|
},
|
|
},
|
|
data: data,
|
|
},
|
|
{
|
|
name: '点',
|
|
type: 'scatter',
|
|
coordinateSystem: 'geo',
|
|
symbol: 'pin', //气泡
|
|
symbolSize: function (val) {
|
|
var a = (maxSize4Pin - minSize4Pin) / (max - min)
|
|
var b = minSize4Pin - a * min
|
|
b = maxSize4Pin - a * max
|
|
return a * val[2] + b
|
|
},
|
|
label: {
|
|
normal: {
|
|
formatter: (a) => {
|
|
return a.value[2]
|
|
},
|
|
show: true,
|
|
textStyle: {
|
|
color: '#fff',
|
|
fontSize: 9,
|
|
},
|
|
},
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#F62157', //标志颜色
|
|
},
|
|
},
|
|
zlevel: 6,
|
|
data: convertData(data, 2),
|
|
},
|
|
],
|
|
}
|
|
return option
|
|
},
|
|
loadAttendanceData() {
|
|
if (this.selProject.vendorsCode != 'uni') {
|
|
this.loadJhAttendanceData()
|
|
} else {
|
|
this.loadUniAttendanceData()
|
|
}
|
|
},
|
|
},
|
|
mounted() {
|
|
window.plApp = this
|
|
this.$store.dispatch('ChangeNav', 102)
|
|
this.$bus.$on(
|
|
'projectChange',
|
|
debounce((prj) => {
|
|
this.selProject = prj
|
|
this.init()
|
|
})
|
|
)
|
|
this.selProject = this.$store.getters.selProject
|
|
this.init()
|
|
this.dpi = this.$dpi()
|
|
window.addEventListener('resize', () => {
|
|
if (this.dpi != this.$dpi()) {
|
|
this.dpi = this.$dpi()
|
|
this.resize()
|
|
}
|
|
})
|
|
this.setOpts()
|
|
this.resize()
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="less">
|
|
.project-labor {
|
|
.chart-module4 {
|
|
.chart-gif {
|
|
left: 50px;
|
|
}
|
|
.chart-text {
|
|
top: 63px;
|
|
left: 50px;
|
|
}
|
|
}
|
|
.prj-labor-real {
|
|
.module-ctx {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-wrap: wrap;
|
|
font-size: 12px;
|
|
.real-item {
|
|
height: 100%;
|
|
width: 25%;
|
|
position: relative;
|
|
overflow: hidden;
|
|
.real-item-type {
|
|
position: absolute;
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
z-index: 10;
|
|
&.is-in {
|
|
color: #00ffd0;
|
|
}
|
|
&.is-out {
|
|
color: #cc6933;
|
|
}
|
|
}
|
|
.real-item-img {
|
|
height: calc(100% - 60px);
|
|
padding: 0px 40px;
|
|
.el-image__inner {
|
|
width: unset;
|
|
}
|
|
}
|
|
.real-item-name {
|
|
text-align: center;
|
|
}
|
|
.real-item-work-type {
|
|
text-align: center;
|
|
line-height: 30px;
|
|
span {
|
|
color: #33b7bd;
|
|
border: solid 1px #33b7bd;
|
|
border-radius: 5px;
|
|
padding: 0 10px;
|
|
}
|
|
}
|
|
.real-item-time {
|
|
font-size: 10px;
|
|
text-align: center;
|
|
color: #33b7bd;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.prj-labor-alert {
|
|
.module-ctx {
|
|
height: calc(100% - 40px);
|
|
line-height: 30px;
|
|
.alert-list {
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
th {
|
|
color: #00ffd0;
|
|
}
|
|
td {
|
|
font-size: 12px;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
// 添加媒体查询支持 1920 - 2560 分辨率
|
|
@media (min-width: 1921px) and (max-width: 2560px) {
|
|
.labor-base {
|
|
.attendance-info-title {
|
|
font-size: 24px; // 增大字体;
|
|
}
|
|
.attendance-tag {
|
|
.survey_content {
|
|
margin-top: 40px;
|
|
.survey_content_img {
|
|
width: 120px;
|
|
height: 120px;
|
|
line-height: 120px;
|
|
background-size: 150px 100px;
|
|
img {
|
|
width: 50px;
|
|
height: 50px;
|
|
}
|
|
}
|
|
}
|
|
.labour-survey_content_number {
|
|
font-size: 20px;
|
|
.survey_content_value {
|
|
span {
|
|
font-size: 24px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.chart-module4 {
|
|
.chart-gif {
|
|
left: 60px;
|
|
width: 170px;
|
|
height: 170px;
|
|
top: 96px !important;
|
|
}
|
|
.chart-text {
|
|
left: 60px;
|
|
width: 170px;
|
|
height: 170px;
|
|
top: 96px !important;
|
|
.chart-text-title {
|
|
font-size: 28px;
|
|
}
|
|
.chart-text-sub-title {
|
|
font-size: 18px;
|
|
}
|
|
}
|
|
}
|
|
.prj-labor-real {
|
|
.module-ctx {
|
|
font-size: 16px; // 增大字体
|
|
|
|
.real-item {
|
|
.real-item-type {
|
|
font-size: 28px; // 增大字体
|
|
}
|
|
.real-item-img {
|
|
padding: 0px 60px; // 调整内边距
|
|
}
|
|
.real-item-work-type {
|
|
line-height: 40px; // 调整行高
|
|
span {
|
|
padding: 0 15px; // 调整内边距
|
|
}
|
|
}
|
|
.real-item-time {
|
|
font-size: 14px; // 增大字体
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.prj-labor-alert {
|
|
.module-ctx {
|
|
height: calc(100% - 60px);
|
|
line-height: 40px; // 调整行高
|
|
|
|
.alert-list {
|
|
th {
|
|
font-size: 20px; // 增大字体;
|
|
}
|
|
td {
|
|
font-size: 16px; // 增大字体
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@media (min-width: 2561px) {
|
|
.labor-base {
|
|
.attendance-info-title {
|
|
font-size: 40px; // 增大字体;
|
|
}
|
|
.attendance-tag {
|
|
.survey_content {
|
|
margin-top: 80px;
|
|
.survey_content_img {
|
|
width: 200px;
|
|
height: 200px;
|
|
line-height: 200px;
|
|
background-size: 180px 120px;
|
|
img {
|
|
width: 80px;
|
|
height: 80px;
|
|
}
|
|
}
|
|
}
|
|
.labour-survey_content_number {
|
|
font-size: 32px;
|
|
.survey_content_value {
|
|
span {
|
|
font-size: 40px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.labor-week-att {
|
|
.module-title {
|
|
span {
|
|
position: relative;
|
|
top: -8px;
|
|
}
|
|
}
|
|
}
|
|
.chart-module4 {
|
|
.chart-gif {
|
|
left: 82px;
|
|
width: 280px;
|
|
height: 280px;
|
|
top: 160px !important;
|
|
}
|
|
.chart-text {
|
|
left: 82px;
|
|
width: 280px;
|
|
height: 280px;
|
|
top: 160px !important;
|
|
.chart-text-title {
|
|
font-size: 40px;
|
|
}
|
|
.chart-text-sub-title {
|
|
font-size: 32px;
|
|
}
|
|
}
|
|
}
|
|
.prj-labor-real {
|
|
.module-ctx {
|
|
font-size: 24px; // 增大字体
|
|
|
|
.real-item {
|
|
.real-item-type {
|
|
font-size: 40px; // 增大字体
|
|
}
|
|
.real-item-img {
|
|
height: calc(100% - 140px);
|
|
padding: 0px 80px; // 调整内边距
|
|
}
|
|
.real-item-work-type {
|
|
line-height: 60px; // 调整行高
|
|
span {
|
|
padding: 0 20px; // 调整内边距
|
|
}
|
|
}
|
|
.real-item-time {
|
|
font-size: 20px; // 增大字体
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.prj-labor-alert {
|
|
.module-ctx {
|
|
height: calc(100% - 60px);
|
|
line-height: 60px; // 调整行高
|
|
|
|
.alert-list {
|
|
th {
|
|
font-size: 28px; // 增大字体;
|
|
}
|
|
td {
|
|
font-size: 24px; // 增大字体
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |