cwchen
/
ah_jjzhgd_webscreen
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

作业环境提交

This commit is contained in:
jjLv 2024-03-27 14:57:16 +08:00
parent 7216dc8927
commit 790f69bfa0
16 changed files with 658 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

245
css/consQuality/consQuality.css Normal file
View File

@ -0,0 +1,245 @@
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
color: #fff;
font-family: 'Alibaba PuHuiTi R', serif;
}
::-webkit-scrollbar
{
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track-piece
{
background-color: #0d2225;
-webkit-border-radius: 6px;
}
::-webkit-scrollbar-thumb:vertical
{
height: 5px;
background-color: #0d2225;
-webkit-border-radius: 6px;
}
::-webkit-scrollbar-thumb:horizontal
{
width: 5px;
background-color: #0d2225;
-webkit-border-radius: 6px;
}
.layui-table td, .layui-table th, .layui-table-col-set, .layui-table-fixed-r, .layui-table-grid-down, .layui-table-header, .layui-table-mend, .layui-table-page, .layui-table-tips-main, .layui-table-tool, .layui-table-total, .layui-table-view, .layui-table[lay-skin=line], .layui-table[lay-skin=row] {
border-width: 1px;
border-style: solid;
border-color: transparent;
}
.layui-table {
width: 100%;
margin: 10px 0;
background-color: transparent;
color: white;
}
/* 表格头部背景色 */
th {
background-color: #184B49; /* MediumSeaGreen */
color: #fff;
font-weight: bold
}
/*鼠标指向表格时,奇数行背景颜色*/
.layui-table tbody tr:hover, .layui-table-hover {
background-color: #19b0b9;
}
.layui-laypage .layui-laypage-curr .layui-laypage-em {
background-color: #184B49;
}
.layui-laypage a:hover {
color: #184B49;
}
.layui-laypage .layui-laypage-skip {
color: #16534c;
}
.layui-laypage-count{
color:#184B49;
}
.layui-laypage button, .layui-laypage input {
background-color: transparent;
border: #184B49 1px solid;
color: #184B49;
}
.layui-table-view select[lay-ignore] {
background-color: transparent;
border: #184B49 1px solid;
color: #184B49;
}
.layui-table-page .layui-laypage span {
color: #184B49;
}
.layui-table-page .layui-laypage a, .layui-table-page .layui-laypage span.layui-laypage-curr {
color: #184B49;
}
/**公共类**/
.layout{
display: flex;
align-items: center;
justify-content: space-between;
}
.layout-vertical{
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
.background-img{
width: 100%;
height: 100%;
padding: 9% 2% 2% 2%;
box-sizing: border-box;
background-position: center center !important;
flex-direction: column;
justify-content: space-between;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.right .background-img:nth-child(1){
padding: 2.5% 1% 1% 1%;
}
.right .background-img:nth-child(2){
padding: 3% 1% 1% 1%;
}
.Weather-img{
width: 100%;
height: 100%;
box-sizing: border-box;
background-position: center center !important;
flex-direction: column;
justify-content: space-between;
background-repeat: no-repeat;
background-size: 100% 100%;
}
/**主体部分**/
.large-frame{
width: 100%;
height: 100%;
justify-content: space-evenly;
}
.left{
width: 22%;
height: 99%;
}
.right{
width: 75%;
height: 99%;
flex-direction: column;
justify-content: space-between;
}
.left-down{
width: 100%;
height: 50%;
}
.right-down{
width: 100%;
height: 50%;
}
.left-under{
width: 100%;
height: 48%;
}
.button-style{
color: #298B83;
border: #184B49 1px solid;
padding: 4px 9px;
margin-left: 10px;
}
.left-under .layout:nth-child(1){
justify-content: flex-start;
}
.state-box{
width: 100%;
height: 20%;
display: flex;
align-items: center;
justify-content: flex-end;
}
.state{
display: flex;
width: 4.5%;
height: 25%;
align-items: center;
margin-left: 3%;
background-position: center center !important;
flex-direction: column;
justify-content: space-between;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.state-box .state:nth-child(1) {
background-image: url("../../img/consQuality/质量检测设备-告警2.png");
}
.state-box .state:nth-child(3) {
background-image: url("../../img/consQuality/质量检测设备-正常2.png");
}
.state-box .state:nth-child(5) {
background-image: url("../../img/consQuality/质量检测设备-掉线3.png");
}
.state-box .state:nth-child(2) {
border: #e24e3b 1px solid;
color: #e24e3b;
}
.monitor-data {
width: 28%;
height: 83%;
flex-direction: column;
justify-content: space-around;
}
.monitor-icon {
width: 100%;
height: 60%;
background: url("../../img/consQuality/质量检测设备-正常.png") no-repeat 0 0 / 100% 100%;
background-position: center center !important;
background-size: initial;
}
.environment{
overflow: auto;
width: 100%;
height: 80%;
}

29
css/operEnvironment/operEnvironment.css
View File

@ -230,6 +230,35 @@ th {
padding-left: 7%;
}
.substance3{
display: flex;
width: 100%;
height: 100%;
/* padding-top: 8%; */
justify-content: center;
flex-direction: row;
align-items: center;
}
.substance4{
width: 17%;
height: 48%;
box-sizing: border-box;
background-position: center center !important;
flex-direction: column;
justify-content: space-between;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.substance5{
display: flex;
flex-direction: column;
padding-left: 7%;
}
.weather-down-right{
display: flex;
width: 45%;

BIN
img/consQuality/告警内容.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 30 KiB

BIN
img/consQuality/施工质量列表.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 37 KiB

BIN
img/consQuality/检测记录对比.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 38 KiB

BIN
img/consQuality/质量检测设备-告警.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
img/consQuality/质量检测设备-告警2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 798 B

BIN
img/consQuality/质量检测设备-掉线.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.8 KiB

BIN
img/consQuality/质量检测设备-掉线3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 765 B

BIN
img/consQuality/质量检测设备-正常.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
img/consQuality/质量检测设备-正常2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 795 B

BIN
img/consQuality/质量检测设备.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 32 KiB

180
js/consQuality/consQuality.js Normal file
View File

@ -0,0 +1,180 @@
let element, layer, laydate;
layui.use(['layer', 'element', 'table'], function () {
element = layui.element;
layer = layui.layer;
laydate = layui.laydate;
var table = layui.table;
var data = [
{id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
{id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
{id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
{id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
{id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
{id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
{id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
{id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
{id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
{id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
{id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
{id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
{id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
{id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
{id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
{id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
{id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
{id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
{id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
{id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
{id: 2, proName: '李四', teamName: '666', teamLeader: '女', quality: 1, content: '起飞'}
];
table.render({
elem: '#alarm',
data: data,
skin: 'line',
page: false,
cols: [[
{field: 'number', width:80,title: '序号', align: 'center', type: 'numbers'},
{field: 'content', align: 'center', title: '告警内容'},
]]
})
table.render({
elem: '#demo',
data: data,
skin: 'line',
cols: [[
{field: 'number', width:80,title: '序号', align: 'center', type: 'numbers', fixed: 'left'},
{field: 'content', align: 'center', title: '区域'},
{field: 'content', align: 'center', title: '设备名称'},
{field: 'content', align: 'center', title: '施工工艺'},
{field: 'content', align: 'center', title: '标准值'},
{field: 'content', align: 'center', title: '检测值'},
{field: 'content', align: 'center', title: '检测时间'},
{field: 'content', align: 'center', title: '状态'},
]],
page: true, //开启分页
loading: true, //数据加载中。。。
limits: [5, 10, 20, 100],
limit: 7
})
//检测记录对比echarts图表
detectionRecord();
laydate.render({
elem: '#ID-laydate-type-datetime',
type: 'datetime'
});
});
//检测记录对比echarts图表
function detectionRecord(){
var myChart = echarts.init(document.getElementById('dome'));
option = {
backgroundColor: "transparent",
legend: {
data: ['检测次数','合格次数'],
icon:'circle',
right: "3%",
textStyle: {
color: "white",
fontSize: 12
},
itemWidth: 12, // 设置宽度
itemHeight:16, // 设置高度
itemGap: 12 // 设置间距
},
grid: {
left: '30',
right: '0',
top: '40',
bottom: '20'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: "item",
crossStyle: {
color: '#999'
}
},
confine: true,
formatter:function(params){
console.log(params)
var html = params[0].name+'月';
for(var i=0;i<params.length;i++){
html+='<br />'+params[i].marker+params[i].seriesName+'：'+params[i].value;
}
return html;
}
},
xAxis: [{
type: 'category',
name:'月',
data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
axisPointer: {
type: 'shadow'
},
axisLine: {
show: true,
lineStyle: {
color: '#333'
}
},
axisLabel: {
formatter: '{value}月',
show: true,
color: '#eee'
},
axisTick: {
show: false
}
}],
yAxis: [{
type: 'value',
splitNumber:5,
splitLine: {
show: true,
lineStyle: {
color: '#333'
}
},
axisLine: {
show: false
},
axisTick: {
show: false
}
}],
series: [
{
name: '检测次数',
type: 'bar',
symbol: 'bar',
barWidth: 20,
itemStyle: {
normal: {
color: '#51AAD1'
}
},
data: [3, 34, 47, 10, 20, 53, 65, 77, 40, 20, 73, 45]
},
{
name: '合格次数',
type: 'bar',
symbol: 'circle',
barWidth: 20,
itemStyle: {
normal: {
color: '#70D6B5'
}
},
data: [3, 34, 47, 10, 20, 53, 65, 77, 40, 20, 73, 45]
}
]
};
myChart.setOption(option);
}

39
js/operEnvironment/operEnvironment.js
View File

@ -37,11 +37,50 @@ layui.use(['layer', 'element', 'table'], function () {
]]
})
//天气echarts图表
connect2();
//和风天气API调用
zephyrineWeather();
});
//和风天气API调用
function zephyrineWeather() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
let latitude = position.coords.latitude;
let longitude = position.coords.longitude;
console.log("经度：" + longitude + ", 纬度：" + latitude);
let latLon = longitude + ',' + latitude;
const apiUrl = `https://devapi.qweather.com/v7/weather/3d?location=${latLon}&key=b353808cee6649dba8ea4c6838319ea4`;
console.log(apiUrl)
fetch(apiUrl)
.then(response => response.json())
.then(data => {
const dailyWeather = data.daily;
console.log(dailyWeather)
if (dailyWeather && Array.isArray(dailyWeather)) {
dailyWeather.forEach(day => {
console.log(`日期：${day.fxDate}，天气：${day.textDay}，最高温度：${day.tempMax}℃，最低温度：${day.tempMin}℃`);
});
} else {
console.log('未能获取有效的天气数据');
}
})
.catch(error => {
console.error('Error fetching weather data:', error);
});
});
} else {
console.log("浏览器不支持 Geolocation API");
}
}
//天气echarts图表
function connect2(){
var myChart = echarts.init(document.getElementById('weather_time'));

139
pages/consQuality/consQuality.html
View File

@ -3,9 +3,146 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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/consQuality/consQuality.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>
<script src="../../js/publics/echarts.js"></script>
<script src="../../plugin/layui-v2.9.7/layui/layui.js"></script>
<script src="../../js/consQuality/consQuality.js"></script>
<title>施工质量</title>
</head>
<body>
施工质量
<div class="large-frame layout">
<div class="left layout-vertical">
<div class="left-down">
<div class="background-img" style="background-image: url('../../img/consQuality/质量检测设备.png');">
<div style="display: flex;width: 100%;height: 100%;flex-direction: column;">
<div class="state-box">
<div class="state"></div>
<p>告警</p>
<div class="state"></div>
<p>正常</p>
<div class="state"></div>
<p>离线</p>
</div>
<div class="environment">
<div class="layout" style="width: 100%;height: 50%;">
<div class="layout monitor-data">
<div class="monitor-icon"></div>
<p>设备一</p>
</div>
<div class="layout monitor-data">
<div class="monitor-icon"></div>
<p>设备二</p>
</div>
<div class="layout monitor-data">
<div class="monitor-icon"></div>
<p>设备三</p>
</div>
</div>
<div class="layout" style="width: 100%;height: 50%;">
<div class="layout monitor-data">
<div class="monitor-icon"></div>
<p>设备一</p>
</div>
<div class="layout monitor-data">
<div class="monitor-icon"></div>
<p>设备二</p>
</div>
<div class="layout monitor-data">
<div class="monitor-icon"></div>
<p>设备三</p>
</div>
</div>
<div class="layout" style="width: 100%;height: 50%;">
<div class="layout monitor-data">
<div class="monitor-icon"></div>
<p>设备一</p>
</div>
<div class="layout monitor-data">
<div class="monitor-icon"></div>
<p>设备二</p>
</div>
<div class="layout monitor-data">
<div class="monitor-icon"></div>
<p>设备三</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="left-under">
<div class="background-img" style="background-image: url('../../img/consQuality/告警内容.png');">
<div style="height: 100%;width: 100%;overflow: auto;">
<table id="alarm" lay-filter="test"></table>
</div>
</div>
</div>
</div>
<div class="right layout-vertical">
<div class="right-down">
<div class="background-img layout-vertical" style="background-image: url('../../img/consQuality/施工质量列表.png');">
<div style="width: 100%;height: 100%;">
<form class="layui-form ">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">时间：</label>
<div class="layui-input-inline">
<input type="text" class="layui-input" id="ID-laydate-type-datetime" placeholder="HH:mm:ss">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">施工工艺：</label>
<div class="layui-input-inline">
<select>
<option value="">请选择</option>
<option value="AAA">选项 A</option>
<option value="BBB">选项 B</option>
<option value="CCC">选项 C</option>
</select>
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">区域：</label>
<div class="layui-input-inline">
<select>
<option value="">请选择</option>
<option value="AAA">选项 A</option>
<option value="BBB">选项 B</option>
<option value="CCC">选项 C</option>
</select>
</div>
</div>
<div class="layui-inline">
<div class="layui-col-xs12">
<button class="layui-btn" lay-submit lay-filter="demo-table-search">查询</button>
</div>
</div>
</div>
</form>
<div style="width: 100%;height: 85%;overflow: auto;">
<table class="layui-hide" id="demo" lay-filter="test"></table>
</div>
</div>
</div>
</div>
<div class="left-under layout">
<div class="background-img" style="background-image: url('../../img/consQuality/检测记录对比.png');">
<div class="layout" style="width: 100%;height: 10%">
<div class="button-style">桩基成孔</div>
<div class="button-style">地面压实</div>
<div class="button-style">大面积混凝土浇筑</div>
</div>
<div id="dome" style="height: 90%;width: 100%;"></div>
</div>
</div>
</div>
</div>
</body>
</html>

30
pages/operEnvironment/operEnvironment.html
View File

@ -32,9 +32,33 @@
</div>
</div>
<div class="weather-down-right">
<div class="weather-box"></div>
<div class="weather-box"></div>
<div class="weather-box"></div>
<div class="weather-box">
<div class="substance3">
<div class="substance4" style="background-image: url('../../img/operEnvironment/晴2.png');"></div>
<div class="substance5">
<div style="font-size: 14px;">今天 <span style="font-size: 13px;color: #8A9394;margin-left: 5px;">3月13</span></div>
<div style="font-size: 13px;">15~3 <span style="font-size: 13px;color: #64D4D5;margin-left: 5px;">优</span></div>
</div>
</div>
</div>
<div class="weather-box">
<div class="substance3">
<div class="substance4" style="background-image: url('../../img/operEnvironment/晴2.png');"></div>
<div class="substance5">
<div style="font-size: 14px;">今天 <span style="font-size: 13px;color: #8A9394;margin-left: 5px;">3月13</span></div>
<div style="font-size: 13px;">15~3 <span style="font-size: 13px;color: #64D4D5;margin-left: 5px;">优</span></div>
</div>
</div>
</div>
<div class="weather-box">
<div class="substance3">
<div class="substance4" style="background-image: url('../../img/operEnvironment/晴2.png');"></div>
<div class="substance5">
<div style="font-size: 14px;">今天 <span style="font-size: 13px;color: #8A9394;margin-left: 5px;">3月13</span></div>
<div style="font-size: 13px;">15~3 <span style="font-size: 13px;color: #64D4D5;margin-left: 5px;">优</span></div>
</div>
</div>
</div>
</div>
</div>
<div id="weather_time" class="Weather-under"></div>