省侧大屏
This commit is contained in:
parent
b598677b8c
commit
9e6261a8aa
|
|
@ -8,6 +8,14 @@ body {
|
|||
font-family: 'Alibaba PuHuiTi R';
|
||||
}
|
||||
|
||||
.text-left {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.text-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
#main-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
@ -84,6 +92,43 @@ body {
|
|||
height: 100%;
|
||||
background: url("../image/Group497.png") no-repeat 0 0 / 100% 100%;
|
||||
background-position: center center !important;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.engineering-statistic-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 33.33%;
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.engineering-statistic-item:first-of-type> div, .engineering-statistic-item:last-of-type> div {
|
||||
display: flex;
|
||||
height: 50%;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.engineering-statistic-item>div>div {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.engineering-statistic-item__left > p:first-of-type, .engineering-statistic-item__right > p:first-of-type {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.engineering-statistic-item__left > p:last-of-type, .engineering-statistic-item__right > p:last-of-type {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.engineering-statistic-item__left {
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
.engineering-statistic-item__right {
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
#quality-ranking {
|
||||
|
|
@ -110,6 +155,30 @@ body {
|
|||
.environment-analysis-item {
|
||||
width: 33.33%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.environment-analysis-item > div:last-of-type {
|
||||
width: 25px;
|
||||
height: inherit;
|
||||
writing-mode: vertical-rl;
|
||||
text-orientation: mixed;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.environment-analysis-item > div:first-of-type {
|
||||
flex: 1;
|
||||
height: inherit;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.environment-analysis-item > div:first-of-type > p {
|
||||
line-height: 25px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
#environment-analysis-1 {
|
||||
|
|
@ -167,7 +236,8 @@ body {
|
|||
.resource-rate-item {
|
||||
width: 33.33%;
|
||||
height: 100%;
|
||||
padding-top: 5%;
|
||||
/*padding-top: 8%;*/
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#alarm-reminder {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,60 @@
|
|||
.transparentDataTable .layui-table{
|
||||
background-color: transparent !important;
|
||||
}
|
||||
.transparentDataTable .layui-table-view{
|
||||
background-color: rgba(0, 0, 0, 0) !important;
|
||||
border: none;
|
||||
}
|
||||
.transparentDataTable .layui-table-tool {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.transparentDataTable .layui-table-tool .layui-icon {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.transparentDataTable .layui-table-header, .transparentDataTable .layui-table-cell, .layui-table-header thead tr {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.transparentDataTable .layui-table-header thead th, .transparentDataTable .layui-none {
|
||||
/*border: 1px solid #FFFFFF;*/
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.transparentDataTable .layui-table tbody tr {
|
||||
border: 1px solid #FFFFFF;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.transparentDataTable .layui-table-init, .transparentDataTable .layui-laypage-limits select, .transparentDataTable .layui-laypage-btn, .transparentDataTable .layui-laypage-skip input {
|
||||
background-color: transparent !important;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.transparentDataTable .layui-table-page a, .transparentDataTable .layui-table-page span {
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
|
||||
.transparentDataTable .layui-laypage-limits select, .transparentDataTable .layui-laypage-limits option {
|
||||
-webkit-appearance: none; /* google */
|
||||
-moz-appearance: none; /* firefox */
|
||||
appearance: none; /* IE */
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* 点击去除高亮的颜色*/
|
||||
background-color: rgba(0, 0, 0, 0.5) !important;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.transparentDataTable .layui-table[lay-even] tr:nth-child(even){
|
||||
background-color: rgba(180, 238, 180, 0.5) !important;
|
||||
}
|
||||
|
||||
|
||||
/*静态表格透明*/
|
||||
.transparentStaticTable .layui-table{
|
||||
background-color: rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
.transparentStaticTable .layui-table tbody tr:hover, .statistics_branch_one .layui-table tbody tr:hover {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
|
@ -1,7 +1,36 @@
|
|||
let element, layer;
|
||||
layui.use(['layer', 'element'], function () {
|
||||
layui.use(['layer', 'element', 'table'], function () {
|
||||
element = layui.element;
|
||||
layer = layui.layer;
|
||||
var table = layui.table;
|
||||
var data = [
|
||||
{id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
|
||||
{id: 2, proName: '李四', teamName: '666', teamLeader: '女', quality: 1, content: '起飞'}
|
||||
];
|
||||
table.render({
|
||||
elem: '#demo',
|
||||
data: data,
|
||||
skin: 'line',
|
||||
page: false,
|
||||
cols: [[
|
||||
{field: 'id', title: '排名'},
|
||||
{field: 'proName', title: '工程名称'},
|
||||
{field: 'teamName', title: '班组名称'},
|
||||
{field: 'teamLeader', title: '班组长'},
|
||||
{field: 'quality', title: '施工质量'},
|
||||
]]
|
||||
})
|
||||
|
||||
table.render({
|
||||
elem: '#demo2',
|
||||
data: data,
|
||||
skin: 'line',
|
||||
page: false,
|
||||
cols: [[
|
||||
{field: 'proName', title: '工程名称'},
|
||||
{field: 'content', title: '告警内容'},
|
||||
]]
|
||||
})
|
||||
|
||||
initMainMap()
|
||||
|
||||
|
|
@ -775,6 +804,8 @@ function initResourceRate() {
|
|||
min: 0,
|
||||
max: 100,
|
||||
splitNumber: 10,
|
||||
radius: '80%', // 仪表盘大小
|
||||
center: ['50%', '75%'],
|
||||
itemStyle: {
|
||||
color: 'green',
|
||||
shadowColor: 'rgba(0,138,255,0.45)',
|
||||
|
|
@ -805,7 +836,8 @@ function initResourceRate() {
|
|||
show: false,
|
||||
},
|
||||
title: {
|
||||
show: false
|
||||
show: true,
|
||||
color: '#fff'
|
||||
},
|
||||
detail: {
|
||||
borderColor: '#999',
|
||||
|
|
@ -826,14 +858,15 @@ function initResourceRate() {
|
|||
color: '#fff'
|
||||
},
|
||||
unit: {
|
||||
fontSize: 20,
|
||||
fontSize: 15,
|
||||
color: '#fff',
|
||||
}
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: 50
|
||||
value: 50,
|
||||
name: '利用率'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@
|
|||
<link rel="stylesheet" href="../../../css/font.css">
|
||||
<link rel="stylesheet" href="../../../plugin/layui-v2.9.7/layui/css/layui.css">
|
||||
<link rel="stylesheet" href="../css/main.css">
|
||||
<link rel="stylesheet" href="../css/table.css">
|
||||
<script src="../../../js/publics/jquery-3.6.0.min.js" type="text/javascript"></script>
|
||||
<script src="../../../js/publics/public.js"></script>
|
||||
<script src="../../../plugin/scroll/jquery.nicescroll.min.js"></script>
|
||||
|
|
@ -15,6 +16,12 @@
|
|||
<script src="../../../js/publics/aes.js"></script>
|
||||
<script src="../../../js/publics/sm3.js"></script>
|
||||
<title>首页</title>
|
||||
|
||||
<style>
|
||||
.layui-table-body {
|
||||
background-color: transparent !important; /* 设置表格主体背景为透明 */
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
|
@ -22,13 +29,63 @@
|
|||
|
||||
<div id="left-box">
|
||||
<div id="engineering-statistic">
|
||||
<div id="engineering-statistic-bg"></div>
|
||||
<div id="engineering-statistic-bg">
|
||||
<div class="engineering-statistic-item">
|
||||
<div>
|
||||
<div class="text-left engineering-statistic-item__left">
|
||||
<p>待建</p>
|
||||
<p>300</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-left engineering-statistic-item__left">
|
||||
<p>在建</p>
|
||||
<p>300</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="engineering-statistic-item" style="font-size: 30px">100</div>
|
||||
<div class="engineering-statistic-item">
|
||||
<div>
|
||||
<div class="text-right engineering-statistic-item__right">
|
||||
<p>投产</p>
|
||||
<p>300</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-right engineering-statistic-item__right">
|
||||
<p>停工</p>
|
||||
<p>300</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="quality-ranking" class="transparentDataTable" style="padding: 10% 3% 2% 3%">
|
||||
<table id="demo" lay-filter="test"></table>
|
||||
</div>
|
||||
<div id="quality-ranking"></div>
|
||||
<div id="environment-analysis">
|
||||
<div id="environment-analysis-1" class="environment-analysis-item"></div>
|
||||
<div id="environment-analysis-2" class="environment-analysis-item"></div>
|
||||
<div id="environment-analysis-3" class="environment-analysis-item"></div>
|
||||
<div id="environment-analysis-1" class="environment-analysis-item">
|
||||
<div>
|
||||
<p>正常999</p>
|
||||
<p>异常999</p>
|
||||
</div>
|
||||
<div>空气质量</div>
|
||||
</div>
|
||||
<div id="environment-analysis-2" class="environment-analysis-item">
|
||||
<div>
|
||||
<p>正常999</p>
|
||||
<p>异常999</p>
|
||||
</div>
|
||||
<div>噪声水平</div>
|
||||
</div>
|
||||
<div id="environment-analysis-3" class="environment-analysis-item">
|
||||
<div>
|
||||
<p>正常999</p>
|
||||
<p>异常999</p>
|
||||
</div>
|
||||
<div>灰尘浓度</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="device-status">
|
||||
<div>
|
||||
|
|
@ -63,11 +120,13 @@
|
|||
<div id="safety-analysis"></div>
|
||||
<div id="efficiency-analysis"></div>
|
||||
<div id="resource-rate">
|
||||
<div class="resource-rate-item"></div>
|
||||
<div class="resource-rate-item"></div>
|
||||
<div class="resource-rate-item"></div>
|
||||
<div class="resource-rate-item">人员利用率</div>
|
||||
<div class="resource-rate-item">设备利用率</div>
|
||||
<div class="resource-rate-item">能源利用率</div>
|
||||
</div>
|
||||
<div id="alarm-reminder" class="transparentDataTable" style="padding: 10% 3% 2% 3%">
|
||||
<table id="demo2" lay-filter="test2"></table>
|
||||
</div>
|
||||
<div id="alarm-reminder"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
|
|||
Loading…
Reference in New Issue