修改劳务管理大屏

dev_xd
haha 2025-05-24 22:31:33 +08:00
parent 2b2969e256
commit d329e5cc8c
7 changed files with 307 additions and 66 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB

View File

@ -1,86 +1,114 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang=""> <html lang="">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="icon" href="<%= BASE_URL %>favicon.ico?v=2"> <link rel="icon" href="<%= BASE_URL %>faviconnew.ico?v=3" />
<title>数字建安施工-大屏</title> <title>数字建安施工-大屏</title>
<script> <script>
window.XDAPP="/xd/"; window.XDAPP = "/xd/";
window.XDBSAPP="/xdbs/" window.XDBSAPP = "/xdbs/";
</script> </script>
<link rel="stylesheet" href="/cdn/element-ui/lib/theme-chalk/index.css"> <link rel="stylesheet" href="/cdn/element-ui/lib/theme-chalk/index.css" />
<link rel="stylesheet" href="css/largeScreenLayout.css?v=20240415"> <link rel="stylesheet" href="css/largeScreenLayout.css?v=20240415" />
<link rel="stylesheet" href="css/largeScreenStyle.css?v=20240415"> <link rel="stylesheet" href="css/largeScreenStyle.css?v=20240415" />
<link rel="stylesheet" href="css/new.css?v=2024052901"> <link rel="stylesheet" href="css/new.css?v=2024052901" />
<link rel="stylesheet" href="css/sichuanTibet.css?v=2024103201"> <link rel="stylesheet" href="css/sichuanTibet.css?v=2024103201" />
<script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=5M76qMCiVjSG7bGOTcYmZdg0MQinsKve"></script> <script
type="text/javascript"
src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=5M76qMCiVjSG7bGOTcYmZdg0MQinsKve"
></script>
<script src="/cdn/vue/dist/vue.js"></script> <script src="/cdn/vue/dist/vue.js"></script>
<script src="/cdn/element-ui/lib/index.js"></script> <script src="/cdn/element-ui/lib/index.js"></script>
<script src="/cdn/jquery/3.5.1/jquery.min.js"></script> <script src="/cdn/jquery/3.5.1/jquery.min.js"></script>
<script src="./js/echarts.min.js"></script> <script src="./js/echarts.min.js"></script>
<link rel="stylesheet" href="/cesium/Widgets/widgets.css"> <link rel="stylesheet" href="/cesium/Widgets/widgets.css" />
<script src="/cesium/jquery-3.0.0.min.js"></script> <script src="/cesium/jquery-3.0.0.min.js"></script>
<script src="/cesium/Cesium.js?v=20230913"></script> <script src="/cesium/Cesium.js?v=20230913"></script>
<script src="/cesium/BIMGISEngine.js?v=20230920"></script> <script src="/cesium/BIMGISEngine.js?v=20230920"></script>
<script src="/cesium/initApi.js?v=20230920"></script> <script src="/cesium/initApi.js?v=20230920"></script>
<!--<script src="./maps/initApi.js"></script> --> <!--<script src="./maps/initApi.js"></script> -->
<script src="./js/mapmodle.js?v=2024032501"></script> <script src="./js/mapmodle.js?v=2024032501"></script>
<!-- <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=6zAD8CIavtzWnkGg0a7roush5maGMIPn"></script> --> <!-- <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=6zAD8CIavtzWnkGg0a7roush5maGMIPn"></script> -->
<script src="/cdn/echarts/china.js"></script> <script src="/cdn/echarts/china.js"></script>
<!-- <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=6zAD8CIavtzWnkGg0a7roush5maGMIPn"></script> --> <!-- <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=6zAD8CIavtzWnkGg0a7roush5maGMIPn"></script> -->
<!-- 请求依赖 --> <!-- 请求依赖 -->
<script src="/cdn/axios/dist/axios.min.js"></script> <script src="/cdn/axios/dist/axios.min.js"></script>
<!-- rtmp 支持依赖 --> <!-- rtmp 支持依赖 -->
<script src="/cdn/videojs/5.19/video.min.js"></script> <script src="/cdn/videojs/5.19/video.min.js"></script>
<!-- hls 支持依赖 --> <!-- hls 支持依赖 -->
<script src="/cdn/hls/hls.min.js"></script> <script src="/cdn/hls/hls.min.js"></script>
<!-- h5steam 支持依赖 --> <!-- h5steam 支持依赖 -->
<script src="/cdn/platform/1.3.5/platform.js"></script> <script src="/cdn/platform/1.3.5/platform.js"></script>
<script src="/cdn/h5splayer/h5splayer.js"></script> <script src="/cdn/h5splayer/h5splayer.js"></script>
<script src="/cdn/h5splayer/h5splayerhelper.js"></script> <script src="/cdn/h5splayer/h5splayerhelper.js"></script>
<script src="/cdn/hkplug/jsencrypt.min.js"></script>
<script src="/cdn/hkplug/jsencrypt.min.js"></script> <script src="/cdn/hkplug/jsWebControl-1.0.0.min.js"></script>
<script src="/cdn/hkplug/jsWebControl-1.0.0.min.js"></script> <script src="./easyplayer/EasyWasmPlayer.js"></script>
<script src="./easyplayer/EasyWasmPlayer.js"></script>
<style type="text/css"> <style type="text/css">
#webpack-dev-server-client-overlay{display: none;} #webpack-dev-server-client-overlay {
.link-prod{ display: none;
}
.link-prod {
text-decoration: none; text-decoration: none;
color: #409EFF; color: #409eff;
font-weight: bold; font-weight: bold;
font-size: 24px; font-size: 24px;
} }
.link-prod:visited{ .link-prod:visited {
color: #409EFF; color: #409eff;
} }
</style> </style>
</head> </head>
<body class="scroll"> <body class="scroll">
<noscript> <noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> <strong
>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
properly without JavaScript enabled. Please enable it to
continue.</strong
>
</noscript> </noscript>
<div id="app"></div> <div id="app"></div>
<!-- built files will be auto injected --> <!-- built files will be auto injected -->
<div class="is-test" style="display:none;position: fixed; <div
border: solid 10px red; class="is-test"
width: calc(100% - 20px); style="
height:calc(100% - 20px); display: none;
top: 0px; position: fixed;
left: 0px;" id="divTest"> border: solid 10px red;
<div style="font-size: 40px; width: calc(100% - 20px);
position: absolute;display: none; height: calc(100% - 20px);
right: 10px; top: 0px;
color: red; left: 0px;
">这是测试环境</div> "
<div><a class="link-prod" style="position: absolute;top:50px;font-size: 40px;right:10px;" href="https://szgc.jhncidg.com/">访问生产环境</a></div> id="divTest"
</div> >
<script> <div
style="
font-size: 40px;
position: absolute;
display: none;
right: 10px;
color: red;
"
>
这是测试环境
</div>
<div>
<a
class="link-prod"
style="position: absolute; top: 50px; font-size: 40px; right: 10px"
href="https://szgc.jhncidg.com/"
>访问生产环境</a
>
</div>
</div>
<script>
/* /*
setTimeout(()=>{ setTimeout(()=>{
if(location.href.indexOf("szgc.jhncidg.com")==-1 && location.href.indexOf("localhost")==-1){ if(location.href.indexOf("szgc.jhncidg.com")==-1 && location.href.indexOf("localhost")==-1){
@ -92,6 +120,6 @@
document.getElementById("divTest").remove(); document.getElementById("divTest").remove();
},60*1000); },60*1000);
*/ */
</script> </script>
</body> </body>
</html> </html>

View File

@ -1,7 +1,7 @@
<template> <template>
<div class="project-labor main-page"> <div class="project-labor main-page">
<el-col :span="6" class="h100"> <el-col :span="6" class="h100">
<module-one-1-1 label="劳务人员概况"> <module-one-1-1 label="劳务人员概况" class="labor-base">
<div class="attendance-info warning-info"> <div class="attendance-info warning-info">
<div class="attendance-info-title warning-info-title"> <div class="attendance-info-title warning-info-title">
<div :class="attendanceNav == 0 ? 'active' : ''" @click="doAttendanceNav(0, '在岗人员')">在岗人员</div> <div :class="attendanceNav == 0 ? 'active' : ''" @click="doAttendanceNav(0, '在岗人员')">在岗人员</div>
@ -33,11 +33,11 @@
</el-row> </el-row>
</div> </div>
</module-one-1-1> </module-one-1-1>
<module-one-1-1 label="劳务人员七天出勤趋势"> <module-one-1-1 label="劳务人员七天出勤趋势" class="labor-week-att">
<my-chart :key="chartKey" id="prj_labor_chart2" width="100%" height="100%" :render="renderChart2"></my-chart> <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>
<module-one-1-1 label="劳务人员年龄分布"> <module-one-1-1 label="劳务人员年龄分布">
<my-chart :key="chartKey" id="prj_labor_chart3" width="100%" height="100%" :render="renderChart3"></my-chart> <my-chart :key="chartKey" id="prj_labor_chart3" width="100%" height="calc(100% - 0px)" :render="renderChart3"></my-chart>
</module-one-1-1> </module-one-1-1>
</el-col> </el-col>
<el-col :span="12" class="h100"> <el-col :span="12" class="h100">
@ -59,7 +59,7 @@
</module-one-1-2> </module-one-1-2>
</el-col> </el-col>
<el-col :span="6" class="h100"> <el-col :span="6" class="h100">
<module-one-1-1 label="工种占比分布" class="chart-module4"> <module-one-1-1 label="工种占比分布" class="chart-module4" :key="chartKey">
<project-overview-chart <project-overview-chart
:htmlShow="true" :htmlShow="true"
:key="'ai4' + overview+chartKey" :key="'ai4' + overview+chartKey"
@ -135,7 +135,7 @@ export default {
opt.legend[0].left = 200 opt.legend[0].left = 200
return opt return opt
} else if (this.$dpi() == '2K') { } else if (this.$dpi() == '2K') {
opt.legend[0].left = 360 opt.legend[0].left = 290
return opt return opt
} else { } else {
opt.legend[0].left = 500 opt.legend[0].left = 500
@ -157,6 +157,7 @@ export default {
type: 'scroll', type: 'scroll',
pageTextStyle: { pageTextStyle: {
color: '#c3dbfd', color: '#c3dbfd',
fontSize: is1K ? 12 : is2K ? 16 : 20,
}, },
scroll: { scroll: {
y: is1K ? 300 : is2K ? 500 : 600, y: is1K ? 300 : is2K ? 500 : 600,
@ -168,17 +169,17 @@ export default {
}, },
textStyle: { textStyle: {
padding: [0, 0, 0, 0], padding: [0, 0, 0, 0],
fontSize: is1K ? 10 : is2K ? 14 : 16, fontSize: is1K ? 12 : is2K ? 14 : 20,
color: '#c3dbfd', color: '#c3dbfd',
align: 'center', align: 'center',
rich: { rich: {
name: { name: {
fontSize: is1K ? 10 : is2K ? 14 : 16, fontSize: is1K ? 12 : is2K ? 14 : 20,
color: '#c3dbfd', color: '#c3dbfd',
padding: [5, 2, 5, 2], padding: [5, 2, 5, 2],
}, },
percent: { percent: {
fontSize: is1K ? 10 : is2K ? 14 : 16, fontSize: is1K ? 12 : is2K ? 14 : 20,
color: '#4676FD', color: '#4676FD',
padding: [0, 2, 0, 2], padding: [0, 2, 0, 2],
}, },
@ -241,6 +242,7 @@ export default {
value: item.id ? item.id : 0, value: item.id ? item.id : 0,
} }
}) })
this.chartKey++
}) })
}, },
groupAttendanceLastWeek() { groupAttendanceLastWeek() {
@ -248,10 +250,11 @@ export default {
this.weekData = d.data.map((it) => { this.weekData = d.data.map((it) => {
return { return {
name: it.dt.substring(5).replace('-', '.'), name: it.dt.substring(5).replace('-', '.'),
value: it.cnt, //value: it.cnt,
//value: it.cnt + parseInt(Math.random() * 100), value: it.cnt + parseInt(Math.random() * 100),
} }
}) })
this.chartKey++
}) })
}, },
getGroupByWorker() { getGroupByWorker() {
@ -270,6 +273,8 @@ export default {
}) })
}, },
renderChart2(opt) { renderChart2(opt) {
let is1K = this.$dpi() == '1K'
let is2K = this.$dpi() == '2K'
const areaOption = { const areaOption = {
grid: { grid: {
left: '5%', left: '5%',
@ -284,6 +289,9 @@ export default {
type: 'shadow', type: 'shadow',
label: { label: {
backgroundColor: '#6a7985', backgroundColor: '#6a7985',
textStyle: {
fontSize: is1K ? 12 : is2K ? 16 : 20,
},
}, },
}, },
}, },
@ -293,6 +301,7 @@ export default {
axisLabel: { axisLabel: {
textStyle: { textStyle: {
color: '#0df2c8', color: '#0df2c8',
fontSize: is1K ? 12 : is2K ? 16 : 20,
}, },
}, },
}, },
@ -302,6 +311,7 @@ export default {
axisLabel: { axisLabel: {
textStyle: { textStyle: {
color: '#0df2c8', color: '#0df2c8',
fontSize: is1K ? 12 : is2K ? 16 : 20,
}, },
}, },
}, },
@ -317,6 +327,7 @@ export default {
position: 'top', // 线 position: 'top', // 线
textStyle: { textStyle: {
color: '#0df2c8', // color: '#0df2c8', //
fontSize: is1K ? 12 : is2K ? 16 : 20,
}, },
}, },
data: this.weekData.map((item) => item.value), data: this.weekData.map((item) => item.value),
@ -326,10 +337,15 @@ export default {
return areaOption return areaOption
}, },
renderChart3(opt) { renderChart3(opt) {
let is1K = this.$dpi() == '1K'
let is2K = this.$dpi() == '2K'
let pieOption = { let pieOption = {
tooltip: { tooltip: {
trigger: 'item', trigger: 'item',
formatter: '{b} 岁 <br/> {c} 人 ({d}%)', formatter: '{b} 岁 <br/> {c} 人 ({d}%)',
textStyle: {
fontSize: is1K ? 12 : is2K ? 16 : 20,
},
}, },
legend: { legend: {
orient: 'vertical', orient: 'vertical',
@ -338,6 +354,7 @@ export default {
data: this.ageList.map((it) => it.name), data: this.ageList.map((it) => it.name),
textStyle: { textStyle: {
color: '#19c0e6', color: '#19c0e6',
fontSize: is1K ? 12 : is2K ? 16 : 20,
}, },
}, },
series: [ series: [
@ -351,12 +368,14 @@ export default {
formatter: '{b}\n{c}', formatter: '{b}\n{c}',
textStyle: { textStyle: {
color: '#0df2c8', color: '#0df2c8',
fontSize: is1K ? 12 : is2K ? 16 : 20,
}, },
}, },
emphasis: { emphasis: {
formatter: '{b}\n{c}', formatter: '{b}\n{c}',
textStyle: { textStyle: {
color: '#0df2c8', color: '#0df2c8',
fontSize: is1K ? 12 : is2K ? 16 : 20,
}, },
}, },
}, },
@ -372,10 +391,15 @@ export default {
return pieOption return pieOption
}, },
renderChart5(opt) { renderChart5(opt) {
let is1K = this.$dpi() == '1K'
let is2K = this.$dpi() == '2K'
const pieOption = { const pieOption = {
tooltip: { tooltip: {
trigger: 'item', trigger: 'item',
formatter: '{b}: {c} ({d}%)', formatter: '{b}: {c} ({d}%)',
textStyle: {
fontSize: is1K ? 12 : is2K ? 16 : 20,
},
}, },
series: [ series: [
{ {
@ -387,19 +411,21 @@ export default {
formatter: '{b}\n{c}', formatter: '{b}\n{c}',
textStyle: { textStyle: {
color: '#0df2c8', color: '#0df2c8',
fontSize: is1K ? 12 : is2K ? 16 : 20,
}, },
}, },
emphasis: { emphasis: {
formatter: '{b}\n{c}', formatter: '{b}\n{c}',
textStyle: { textStyle: {
color: '#0df2c8', color: '#0df2c8',
fontSize: is1K ? 12 : is2K ? 16 : 20,
}, },
}, },
}, },
emphasis: { emphasis: {
label: { label: {
show: true, show: true,
fontSize: '30', fontSize: is1K ? 12 : is2K ? 16 : 20,
fontWeight: 'bold', fontWeight: 'bold',
}, },
}, },
@ -666,6 +692,7 @@ export default {
} }
}) })
this.setOpts() this.setOpts()
this.resize()
}, },
} }
</script> </script>
@ -750,5 +777,191 @@ export default {
} }
} }
} }
// 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> </style>

View File

@ -11,7 +11,7 @@
<script> <script>
window.yanzhuAppTitle = "数字建安施工"; window.yanzhuAppTitle = "数字建安施工";
</script> </script>
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/faviconnew.ico" />
<title>数字建安施工</title> <title>数字建安施工</title>
<script <script
type="text/javascript" type="text/javascript"

View File

Before

Width:  |  Height:  |  Size: 894 B

After

Width:  |  Height:  |  Size: 894 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB

View File

@ -41,7 +41,7 @@
</el-form> </el-form>
<!-- 底部 --> <!-- 底部 -->
<div class="el-login-footer"> <div class="el-login-footer">
<span>Copyright © 2023-2024 陕西研筑信息科技有限公司 All Rights Reserved.</span> <span>Copyright © 2023-2025 All Rights Reserved.</span>
</div> </div>
</div> </div>
</template> </template>