数据分析-

js/pages/dataAnalysisOctober/engineeringSafetyAnalysis.js

@@ -1,5 +1,6 @@
 let table, layer, form, laydate;
-let myChart = null, myChart2 = null;
+let ballMachineData = [] // 存储球机列表数据
+let selectedBallName = "" // 当前选中的球机名称
 layui.use(['layer', 'table', 'form', 'laydate'], function () {
     layer = layui.layer;
     table = layui.table;
@@ -15,9 +16,6 @@ layui.use(['layer', 'table', 'form', 'laydate'], function () {
     initTable();
     // 工程安全分析-球机列表
     getBallSelect()
-
-    initTable2();
-
 });
 
 function initTable(startTime, endTime) {
@@ -71,10 +69,10 @@ function query() {
         endTime = "";
     }
     initTable(startTime, endTime);
+    initTable2(startTime, endTime,selectedBallName);
 }
 
 function getBallSelect() {
-
     const url = commonUrl + "screen/proSafety/selectBallSelect"
     ajaxRequestGet(
         url,
@@ -101,60 +99,51 @@ function getBallSelect() {
 
     /* 实时检测赋值 */
     function setData(data) {
-        if (data) {
+        if (data && data.length > 0) {
-            console.log(data)
+            ballMachineData = data
-            const dynamicList = document.getElementById('dynamic-list');
+
-            dynamicList.innerHTML = ''; // 清空现有内容
+            const dynamicList = document.getElementById("dynamic-list")
+            dynamicList.innerHTML = "" // 清空现有内容
 
             data.forEach((item, index) => {
-                const listItem = document.createElement('li');
+                const listItem = document.createElement("li")
-                listItem.className = index === 0 ? 'layout check' : 'layout nocheck';
+                listItem.className = index === 0 ? "layout check" : "layout nocheck"
-                listItem.textContent = item.ballName;
+                listItem.textContent = item.ballName
-                listItem.onclick = function() {
+                listItem.onclick = function () {
-                    changeDynamicData(this, index);
+                    changeDynamicData(this, index)
-                };
+                }
-                dynamicList.appendChild(listItem);
+                dynamicList.appendChild(listItem)
-            });
+            })
+
+            if (data.length > 0) {
+                selectedBallName = data[0].ballName
+                // 获取当前时间范围
+                const startTime = $("#ID-laydate-start-date-1").val() || ""
+                const endTime = $("#ID-laydate-end-date-1").val() || ""
+                // 加载第一个球机的视频数据
+                initTable2(startTime, endTime, selectedBallName)
+            }
         }
     }
 
-    function changeDynamicData(element, index){
+    function changeDynamicData(element, index) {
         // 移除所有选中状态
-        const dynamicItems = document.querySelectorAll('#dynamic-list .layout');
+        const dynamicItems = document.querySelectorAll("#dynamic-list .layout")
-        dynamicItems.forEach(item => {
+        dynamicItems.forEach((item) => {
-            item.className = 'layout nocheck';
+            item.className = "layout nocheck"
-        });
+        })
 
         // 设置当前选中项
-        element.className = 'layout check';
+        element.className = "layout check"
 
-        // 显示选中项信息
+        selectedBallName = ballMachineData[index].ballName
-        const selectedItem = responseData.data[index];
-        const display = document.getElementById('selected-data');
 
-        let displayHTML = `
+        // 获取当前时间范围
-                <div class="data-item"><strong>选中项:</strong> ${selectedItem.ballName}</div>
+        const startTime = $("#ID-laydate-start-date-1").val() || ""
-                <div class="data-item"><strong>索引:</strong> ${index}</div>
+        const endTime = $("#ID-laydate-end-date-1").val() || ""
-            `;
+        // 重新加载视频数据
-
+        initTable2(startTime, endTime, selectedBallName)
-        // 添加其他非空字段
-        Object.keys(selectedItem).forEach(key => {
-            if (selectedItem[key] !== null && key !== 'ballName') {
-                displayHTML += `<div class="data-item"><strong>${key}:</strong> ${selectedItem[key]}</div>`;
-            }
-        });
-        display.innerHTML = displayHTML;
     }
-    // 页面加载完成后初始化
-    window.onload = function() {
-        // 默认选中第一个动态项
-        const firstDynamicItem = document.querySelector('#dynamic-list .layout');
-        if (firstDynamicItem) {
-            changeDynamicData(firstDynamicItem, 0);
-        }
-    };
-
-
 }
 
 function initTable2(startTime, endTime,ballName) {
@@ -168,125 +157,152 @@ function initTable2(startTime, endTime,ballName) {
             "Authorization": token
         },
         data: {
-            startTime:'2025-10-12',
+            startTime:startTime,
-            endTime:'2025-10-17',
+            endTime:endTime,
-            ballName:'测试球机',
+            ballName:ballName,
             page: '1',
             limit: '10'
         },
-        success: function (data) {
+        success: (response) => {
-            const container = document.getElementById('demo2-container');
+            const container = document.getElementById("demo2-container")
-            container.innerHTML = ''; // 清空容器
+            container.innerHTML = "" // 清空容器
+
+            if (response.code === 0 && response.data && response.data.length > 0) {
+                response.data.forEach((item) => {
+                    const card = document.createElement("div")
+                    card.className = "card"
+                    card.style.cssText = `width: calc(20% - 10px);height: 150px;display: flex;flex-direction: column;overflow: hidden;cursor: pointer;`
 
-            if (data.data && data.data.length > 0) {
-                data.data.forEach(item => {
-                    const card = document.createElement('div');
-                    card.className = 'card';
-                    card.style.cssText = ` width: calc(20% - 10px);height: 150px;background-color: #1a3a4c;border: none;border-radius: 8px;display: flex;flex-direction: column;overflow: hidden;`;
                     // 创建图片区域
-                    const imgDiv = document.createElement('div');
+                    const imgDiv = document.createElement("div")
-                    imgDiv.style.cssText = ` flex: 1;background-color: #2a4a5c;display: flex;align-items: center;justify-content: center;color: #fff;font-size: 12px;`;
+                    imgDiv.style.cssText = `flex: 1;display: flex;align-items: center;justify-content: center;overflow: hidden;`
-                    imgDiv.textContent = data.name;
+
-                    card.appendChild(imgDiv);
+                    // 显示实际图片
+                    if (item.imagePath) {
+                        const img = document.createElement("img")
+                        img.src = commonUrl + item.imagePath // 拼接完整图片路径
+                        img.style.cssText = `width: 100%;height: 100%;object-fit: cover;`
+                        img.onerror = function () {
+                            // 图片加载失败时显示文字
+                            this.style.display = "none"
+                            imgDiv.innerHTML = `<span style="color: #fff;font-size: 12px;">${item.name || "图片加载失败"}</span>`
+                        }
+                        imgDiv.appendChild(img)
+                    } else {
+                        imgDiv.innerHTML = `<span style="color: #fff;font-size: 12px;">${item.name || "暂无图片"}</span>`
+                    }
+
+                    card.appendChild(imgDiv)
+
                     // 创建信息区域
-                    const infoDiv = document.createElement('div');
+                    const infoDiv = document.createElement("div")
-                    infoDiv.style.cssText = `padding: 5px;background-color: #1a3a4c;color: #fff;font-size: 12px;display: flex;justify-content: space-between;`;
+                    infoDiv.style.cssText = `padding: 5px;color: #fff;font-size: 12px;display: flex;justify-content: space-between;`
 
-                    const dateSpan = document.createElement('span');
+                    const dateSpan = document.createElement("span")
-                    dateSpan.textContent = item.createTime;
+                    dateSpan.textContent = item.createTime || "XXX-XX-XX"
 
-                    const statusSpan = document.createElement('span');
+                    const statusSpan = document.createElement("span")
-                    statusSpan.textContent = data.name;
+                    statusSpan.textContent = item.name || "未知"
 
-                    infoDiv.appendChild(dateSpan);
+                    infoDiv.appendChild(dateSpan)
-                    infoDiv.appendChild(statusSpan);
+                    infoDiv.appendChild(statusSpan)
-                    card.appendChild(infoDiv);
+                    card.appendChild(infoDiv)
 
-                    container.appendChild(card);
+                    container.appendChild(card)
-                });
+                })
 
                 // 添加 Layui 分页
-                layui.use('laypage', function () {
+                layui.use("laypage", () => {
-                    var laypage = layui.laypage;
+                    var laypage = layui.laypage
                     laypage.render({
-                        elem: 'demo2-pagination', // 分页容器ID
+                        elem: "demo2-pagination",
-                        count: data.data.length, // 总条数
+                        count: response.total || response.data.length, // 使用total字段
-                        limit: 10, // 每页显示条数
+                        limit: 10,
-                        curr: 1, // 当前页
+                        curr: 1,
-                        layout: ['prev', 'page', 'next', 'skip', 'count', 'limit'], // 布局
+                        layout: ["prev", "page", "next", "skip", "count", "limit"],
-                        prev: '<i class="layui-icon layui-icon-left"></i>', // 上一页图标
+                        prev: '<i class="layui-icon layui-icon-left"></i>',
-                        next: '<i class="layui-icon layui-icon-right"></i>',  // 下一页图标
+                        next: '<i class="layui-icon layui-icon-right"></i>',
-                        theme: '#3ACAB8', // 主题色
+                        theme: "#3ACAB8",
-                        jump: function (obj, first) {
+                        jump: (obj, first) => {
-                            if (!first) { // 非首次触发
+                            if (!first) {
-                                // 获取当前页码和每页条数
+                                const currentPage = obj.curr
-                                const currentPage = obj.curr;
+                                const pageSize = obj.limit
-                                const pageSize = obj.limit;
 
-                                // 计算起始索引和结束索引
+                                // 重新获取数据
-                                const startIndex = (currentPage - 1) * pageSize;
-                                const endIndex = startIndex + pageSize;
-
-                                // 重新获取数据（这里需要根据实际API调整）
                                 $.ajax({
-                                    url: commonUrl + "screen/proSafety/selectProSafetyVideo",
+                                    url: url,
                                     type: "get",
                                     headers: {
-                                        "decrypt": "decrypt",
+                                        decrypt: "decrypt",
-                                        "Authorization": token
+                                        Authorization: token,
                                     },
                                     data: {
-                                        startTime:startTime,
+                                        startTime: startTime,
-                                        endTime:endTime,
+                                        endTime: endTime,
-                                        ballName:ballName,
+                                        ballName: ballName,
                                         page: currentPage,
-                                        limit: pageSize
+                                        limit: pageSize,
                                     },
-                                    success: function (data) {
+                                    success: (pageResponse) => {
-                                        // 清空容器
+                                        const container = document.getElementById("demo2-container")
-                                        const container = document.getElementById('demo2-container');
+                                        container.innerHTML = ""
-                                        container.innerHTML = '';
 
-                                        // 渲染当前页的数据
+                                        if (pageResponse.code === 0 && pageResponse.data && pageResponse.data.length > 0) {
-                                        if (data.data && data.data.length > 0) {
+                                            pageResponse.data.forEach((item) => {
-                                            const pageData = data.data.slice(startIndex, endIndex);
+                                                const card = document.createElement("div")
+                                                card.className = "card"
+                                                card.style.cssText = `width: calc(20% - 10px);height: 150px;display: flex;flex-direction: column;overflow: hidden;cursor: pointer;`
 
-                                            pageData.forEach(item => {
+                                                const imgDiv = document.createElement("div")
-                                                const card = document.createElement('div');
+                                                imgDiv.style.cssText = `flex: 1;display: flex;align-items: center;justify-content: center;overflow: hidden;`
-                                                card.className = 'card';
-                                                card.style.cssText = ` width: calc(20% - 10px);height: 150px;background-color: #1a3a4c;border: none;border-radius: 8px;display: flex;flex-direction: column;overflow: hidden;`;
 
-                                                // 创建图片区域
+                                                if (item.imagePath) {
-                                                const imgDiv = document.createElement('div');
+                                                    const img = document.createElement("img")
-                                                imgDiv.style.cssText = ` flex: 1;background-color: #2a4a5c;display: flex;align-items: center;justify-content: center;color: #fff;font-size: 12px;`;
+                                                    img.src = commonUrl + item.imagePath
-                                                imgDiv.textContent = '未带安全帽';
+                                                    img.style.cssText = `width: 100%;height: 100%;object-fit: cover;`
-                                                card.appendChild(imgDiv);
+                                                    img.onerror = function () {
+                                                        this.style.display = "none"
+                                                        imgDiv.innerHTML = `<span style="color: #fff;font-size: 12px;">${item.name || "图片加载失败"}</span>`
+                                                    }
+                                                    imgDiv.appendChild(img)
+                                                } else {
+                                                    imgDiv.innerHTML = `<span style="color: #fff;font-size: 12px;">${item.name || "暂无图片"}</span>`
+                                                }
 
-                                                // 创建信息区域
+                                                card.appendChild(imgDiv)
-                                                const infoDiv = document.createElement('div');
-                                                infoDiv.style.cssText = ` padding: 5px;background-color: #1a3a4c;color: #fff;font-size: 12px;display: flex;justify-content: space-between;`;
 
-                                                const dateSpan = document.createElement('span');
+                                                const infoDiv = document.createElement("div")
-                                                dateSpan.textContent = item.date || 'XXX-XX-XX';
+                                                infoDiv.style.cssText = `padding: 5px;color: #fff;font-size: 12px;display: flex;justify-content: space-between;`
 
-                                                const statusSpan = document.createElement('span');
+                                                const dateSpan = document.createElement("span")
-                                                statusSpan.textContent = '未带安全帽';
+                                                dateSpan.textContent = item.createTime || "XXX-XX-XX"
 
-                                                infoDiv.appendChild(dateSpan);
+                                                const statusSpan = document.createElement("span")
-                                                infoDiv.appendChild(statusSpan);
+                                                statusSpan.textContent = item.name || "未知"
-                                                card.appendChild(infoDiv);
 
-                                                container.appendChild(card);
+                                                infoDiv.appendChild(dateSpan)
-                                            });
+                                                infoDiv.appendChild(statusSpan)
+                                                card.appendChild(infoDiv)
+
+                                                container.appendChild(card)
+                                            })
                                         }
-                                    }
+                                    },
-                                });
+                                })
                             }
-                        }
+                        },
-                    });
+                    })
-                });
+                })
+            } else {
+                // 没有数据时显示提示
+                container.innerHTML = '<div style="width: 100%;text-align: center;color: #fff;padding: 20px;">暂无数据</div>'
             }
-        }
+        },
+        error: (xhr, status, error) => {
+            console.error("视频数据加载失败:", error)
+            const container = document.getElementById("demo2-container")
+            container.innerHTML = '<div style="width: 100%;text-align: center;color: #fff;padding: 20px;">数据加载失败</div>'
+        },
     });
 }
 

js/pages/dataAnalysisOctober/environDetection.js

@@ -209,6 +209,31 @@ function initTemperatureHumidityChart(timeData, temperatureData, humidityData) {
                 },
             },
         ],
+        "dataZoom": [{
+            "show": true,
+            "height": 12,
+            "xAxisIndex": [
+                0
+            ],
+            bottom:'8%',
+            "start": 10,
+            "end": 90,
+            handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
+            handleSize: '110%',
+            handleStyle:{
+                color:"#d3dee5",
+
+            },
+            textStyle:{
+                color:"#fff"},
+            borderColor:"#90979c"
+        }, {
+            "type": "inside",
+            "show": true,
+            "height": 15,
+            "start": 1,
+            "end": 35
+        }],
         series: [
             {
                 name: "温度",
@@ -312,6 +337,31 @@ function initNoiseChart(timeData, noiseData) {
                 }
             }
         },
+        "dataZoom": [{
+            "show": true,
+            "height": 12,
+            "xAxisIndex": [
+                0
+            ],
+            bottom:'8%',
+            "start": 10,
+            "end": 90,
+            handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
+            handleSize: '110%',
+            handleStyle:{
+                color:"#d3dee5",
+
+            },
+            textStyle:{
+                color:"#fff"},
+            borderColor:"#90979c"
+        }, {
+            "type": "inside",
+            "show": true,
+            "height": 15,
+            "start": 1,
+            "end": 35
+        }],
         series: [
             {
                 name: '噪声',
@@ -403,6 +453,31 @@ function initWindSpeedChart(timeData, noiseData) {
                 }
             }
         },
+        "dataZoom": [{
+            "show": true,
+            "height": 12,
+            "xAxisIndex": [
+                0
+            ],
+            bottom:'8%',
+            "start": 10,
+            "end": 90,
+            handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
+            handleSize: '110%',
+            handleStyle:{
+                color:"#d3dee5",
+
+            },
+            textStyle:{
+                color:"#fff"},
+            borderColor:"#90979c"
+        }, {
+            "type": "inside",
+            "show": true,
+            "height": 15,
+            "start": 1,
+            "end": 35
+        }],
         series: [
             {
                 name: '噪声',
@@ -523,6 +598,31 @@ function initAirQualityChart(timeData, pm25Data, pm10Data) {
                 }
             }
         },
+        "dataZoom": [{
+            "show": true,
+            "height": 12,
+            "xAxisIndex": [
+                0
+            ],
+            bottom:'8%',
+            "start": 10,
+            "end": 90,
+            handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
+            handleSize: '110%',
+            handleStyle:{
+                color:"#d3dee5",
+
+            },
+            textStyle:{
+                color:"#fff"},
+            borderColor:"#90979c"
+        }, {
+            "type": "inside",
+            "show": true,
+            "height": 15,
+            "start": 1,
+            "end": 35
+        }],
         series: [
             {
                 name: 'PM2.5',

js/pages/dataAnalysisOctober/proQualityAnalysis.js

@@ -270,6 +270,31 @@ function initCivilEngineering(acceptItem, notAcceptItem,nameTitle) {
                 color: '#BDC2C2',
             },
         },
+        "dataZoom": [{
+            "show": true,
+            "height": 12,
+            "xAxisIndex": [
+                0
+            ],
+            bottom:'8%',
+            "start": 10,
+            "end": 90,
+            handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
+            handleSize: '110%',
+            handleStyle:{
+                color:"#d3dee5",
+
+            },
+            textStyle:{
+                color:"#fff"},
+            borderColor:"#90979c"
+        }, {
+            "type": "inside",
+            "show": true,
+            "height": 15,
+            "start": 1,
+            "end": 35
+        }],
         series: [
             {
                 type: 'custom',
@@ -617,6 +642,31 @@ function initElectrical(acceptItem, notAcceptItem,nameTitle) {
                 color: '#BDC2C2',
             },
         },
+        "dataZoom": [{
+            "show": true,
+            "height": 12,
+            "xAxisIndex": [
+                0
+            ],
+            bottom:'8%',
+            "start": 10,
+            "end": 90,
+            handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
+            handleSize: '110%',
+            handleStyle:{
+                color:"#d3dee5",
+
+            },
+            textStyle:{
+                color:"#fff"},
+            borderColor:"#90979c"
+        }, {
+            "type": "inside",
+            "show": true,
+            "height": 15,
+            "start": 1,
+            "end": 35
+        }],
         series: [
             {
                 type: 'custom',

js/pages/dataAnalysisOctober/projectProgress.js

@@ -76,7 +76,6 @@ function getProProgress(startTime, endTime) {
                 var civilEngineeringEchartsData = civilEngineeringData["echarts"];
                 getCivilEngineering(civilEngineeringEchartsData)
                 var civilEngineeringPercentData = civilEngineeringData["percent"];
-
                 initCivilEngineeringPercent(civilEngineeringPercentData)
             }
 
@@ -216,6 +215,31 @@ function initCivilEngineering(date, plannedCount, actualCount) {
                 show: false,
             },
         }],
+        "dataZoom": [{
+            "show": true,
+            "height": 12,
+            "xAxisIndex": [
+                0
+            ],
+            bottom:'8%',
+            "start": 10,
+            "end": 90,
+            handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
+            handleSize: '110%',
+            handleStyle:{
+                color:"#d3dee5",
+
+            },
+            textStyle:{
+                color:"#fff"},
+            borderColor:"#90979c"
+        }, {
+            "type": "inside",
+            "show": true,
+            "height": 15,
+            "start": 1,
+            "end": 35
+        }],
         series: [{
             name: '计划',
             type: 'line',
@@ -392,6 +416,31 @@ function initElectrical(date, plannedCount, actualCount) {
                 show: false,
             },
         }],
+        "dataZoom": [{
+            "show": true,
+            "height": 12,
+            "xAxisIndex": [
+                0
+            ],
+            bottom:'8%',
+            "start": 10,
+            "end": 90,
+            handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
+            handleSize: '110%',
+            handleStyle:{
+                color:"#d3dee5",
+
+            },
+            textStyle:{
+                color:"#fff"},
+            borderColor:"#90979c"
+        }, {
+            "type": "inside",
+            "show": true,
+            "height": 15,
+            "start": 1,
+            "end": 35
+        }],
         series: [{
             name: '计划',
             type: 'line',

js/pages/dataAnalysisOctober/resourceRateAnalysis.js

@@ -46,6 +46,7 @@ function getDeviceEcharts(){
             console.log( data['deviceEcharts'])
             let deviceEchartsList = data['deviceEcharts']; //设备情况的echarts
             let deviceUtilization = data.deviceUtilization; //设备利用率
+            document.getElementById("deviceUtilization").innerHTML = deviceUtilization +'<span>%</span>';
             let efficiency = data['efficiency']; // 效率分析
             getEfficiencyTable(efficiency)
             let todayDutyRate = data.todayDutyRate;  //今日到岗率
@@ -53,6 +54,7 @@ function getDeviceEcharts(){
             let workerEcharts = data['workerEcharts']; //一周到岗人数趋势
             getTrend(workerEcharts)
             let workerUtilization = data.workerUtilization; //人员利用率
+            document.getElementById("workerUtilization").innerHTML = workerUtilization +'<span>%</span>';
             let yesterdayDutyRate = data.yesterdayDutyRate; //昨日到岗率
             document.getElementById("yesterdayDutyRate").innerHTML = yesterdayDutyRate +'<span>%</span>';
         }
@@ -176,6 +178,31 @@ function initTrend(date,actualCount,shouldCount) {
                 show: false,
             },
         }],
+        "dataZoom": [{
+            "show": true,
+            "height": 12,
+            "xAxisIndex": [
+                0
+            ],
+            bottom:'8%',
+            "start": 10,
+            "end": 90,
+            handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
+            handleSize: '110%',
+            handleStyle:{
+                color:"#d3dee5",
+
+            },
+            textStyle:{
+                color:"#fff"},
+            borderColor:"#90979c"
+        }, {
+            "type": "inside",
+            "show": true,
+            "height": 15,
+            "start": 1,
+            "end": 35
+        }],
         series: [{
             name: '实到',
             type: 'line',

pages/dataAnalysisOctober/engineeringSafetyAnalysis.html

@@ -96,9 +96,9 @@
         .card {
             width: calc(20% - 10px); /* 每行五个，减去间距 */
             height: 150px;
-            background-color: #1a3a4c;
+            /*background-color: #1a3a4c;*/
             border: none;
-            border-radius: 8px;
+            /*border-radius: 8px;*/
             display: flex;
             flex-direction: column;
             overflow: hidden;

pages/dataAnalysisOctober/resourceRateAnalysis.html

@@ -26,14 +26,13 @@
         width: 100%;
         height: 100%;
         display: flex;
-        flex-direction: row;
+        flex-direction: column;
     }
 
     .left-box {
         width: 49.5%;
         hegiht: 100%;
         display: flex;
-        flex-direction: column;
     }
 
     .right-box {
@@ -41,12 +40,11 @@
         width: 49.5%;
         hegiht: 100%;
         display: flex;
-        flex-direction: column;
     }
 
     .box-one {
         width: 100%;
-        height: 33%;
+        height: 100%;
     }
 
     .box-two {
@@ -265,7 +263,7 @@
     .personnelStatus-top-box {
         box-shadow: 0px 0px 4px 0px rgba(8, 220, 224, 0.8);
         border-radius: 2px 2px 2px 2px;
-        height: 100%;
+        height: 50%;
         width: 32%;
         display: flex;
         flex-direction: column;
@@ -281,9 +279,9 @@
     }
 
     .personnel-card-title {
-        font-size: 14px;
+        font-size: 18px;
-        margin: 15px 0 10px 0;
+        margin: 50px 0 10px 20px;
-        text-align: center;
+        text-align: left;
     }
 
     .personnel-stat-row {
@@ -468,61 +466,65 @@
 
 <body>
 <div id="proQuality">
-    <div class="left-box">
+
-        <div class="box-one overallSituation ">
+    <div style="height: 30%;width: 100%; display: flex;flex-direction: row">
-            <div class="layout monitor-data">
+        <div class="left-box">
-                <p><span id="wd">75%</span></p>
+            <div class="box-one overallSituation ">
-                <p>人员利用率</p>
+                <div class="layout monitor-data">
-                <div class="monitor-icon"></div>
+                    <p><span id="workerUtilization">0%</span></p>
+                    <p>人员利用率</p>
+                    <div class="monitor-icon"></div>
+                </div>
+                <div class="layout monitor-data">
+                    <p><span id="deviceUtilization">0%</span></p>
+                    <p>设备利用率</p>
+                    <div class="monitor-icon"></div>
+                </div>
+<!--                <div class="layout monitor-data">-->
+<!--                    <p><span id="zs">90%</span></p>-->
+<!--                    <p>材料利用率</p>-->
+<!--                    <div class="monitor-icon"></div>-->
+<!--                </div>-->
+
             </div>
-            <div class="layout monitor-data">
+        </div>
-                <p><span id="sd">80%</span></p>
+        <div class="right-box">
-                <p>设备利用率</p>
+            <div class="box-one efficiencyAnalysis">
-                <div class="monitor-icon"></div>
+                <div style="height: 70%;width: 96%;overflow: auto;margin-top: 6%;margin-left: 2%;">
+                    <table id="dome1" lay-filter="test"></table>
+                </div>
             </div>
-            <div class="layout monitor-data">
+        </div>
-                <p><span id="zs">90%</span></p>
+    </div>
-                <p>材料利用率</p>
+    <div style="height: 35%;width: 100%; display: flex;margin-top: 1%; " class="personnelStatus">
-                <div class="monitor-icon"></div>
+        <div style="height: 100%;width: 30%;">
+            <div class="personnel-card-title">到岗情况</div>
+            <div class="personnelStatus-top-box" style="margin-left: 5%;float: left;margin-right: 10%;">
+                <div class="personnel-stat-value" id="todayDutyRate" style="text-align: center;margin-top: 20%;"></div>
+                <div class="personnel-stat-label" style="margin-top: 20%;" >
+                    <div class="now"></div>
+                    <span>今日到岗率</span>
+                </div>
             </div>
 
-        </div>
+            <div class="personnelStatus-top-box" >
-        <div class="box-two equipmentStatus">
+                <div class="personnel-stat-value" id="yesterdayDutyRate" style="text-align: center;margin-top: 20%;"></div>
-            <div class="equipmentStatus-box">
+                <div class="personnel-stat-label" style="margin-top: 20%;" >
-                <div class="equipment-card">
+                    <div class="yesterday"></div>
-                    <div class="equipment-card-icon"></div>
+                    <span>昨日到岗率</span>
-                    <div class="equipment-card-content">
-                        <div class="equipment-card-label">设备总数</div>
-                        <div class="equipment-card-value">18<span style="font-size: 12px; margin-left: 2px;">台</span>
-                        </div>
-                    </div>
-                </div>
-                <div class="equipment-card">
-                    <div class="equipment-card-icon"></div>
-                    <div class="equipment-card-content">
-                        <div class="equipment-card-label">在运设备总数</div>
-                        <div class="equipment-card-value">15<span style="font-size: 12px; margin-left: 2px;">台</span>
-                        </div>
-                    </div>
-                </div>
-                <div class="equipment-card">
-                    <div class="equipment-card-icon" style="height: 44px;width: 44px;"></div>
-                    <div class="equipment-card-content" style="margin-left: 10px;">
-                        <div class="equipment-card-label">本月使用率</div>
-                        <div class="equipment-card-value">80<span style="font-size: 12px; margin-left: 2px;">%</span>
-                        </div>
-                    </div>
-                </div>
-                <div class="equipment-card">
-                    <div class="equipment-card-icon"></div>
-                    <div class="equipment-card-content">
-                        <div class="equipment-card-label">同比</div>
-                        <div class="equipment-card-value">+3<span style="font-size: 12px; margin-left: 2px;">%</span>
-                        </div>
-                    </div>
                 </div>
             </div>
         </div>
+        <div style="height: 100%;width: 70%;">
+            <div style="height: 95%;width: 100%;margin-top: 2%;" id="trend"></div>
+        </div>
+    </div>
+    <div style="height: 33%;width: 100%; display: flex;margin-top: 1%;" class="equipmentStatus"></div>
+
+
+   <!-- <div class="left-box">
+
+
         <div class="box-three personnelStatus" style="display: flex;flex-direction: column ;">
             <div class="personnelStatus-top">
                 <div class="personnelStatus-top-box">
@@ -561,73 +563,17 @@
                     </div>
 
                 </div>
-                <div class="personnelStatus-top-box" style="margin-left: 2%;">
-                    <div class="personnel-card-title">到岗情况</div>
-                    <div class="personnel-stat-row">
-                        <div class="personnel-stat-label">
-                            <div class="now"></div>
-                            <span>今日到岗率</span>
-                        </div>
-                        <div class="personnel-stat-value" id="todayDutyRate"></div>
-                    </div>
-                    <div class="personnel-stat-row">
-                        <div class="personnel-stat-label">
-                            <div class="yesterday"></div>
-                            <span>昨日到岗率</span>
-                        </div>
-                        <div class="personnel-stat-value" id="yesterdayDutyRate"><span>%</span></div>
-                    </div>
 
-                </div>
             </div>
             <div class="personnelStatus-bottom">
                 <div style="height: 100%;width: 100%;" id="trend"></div>
             </div>
         </div>
     </div>
-    <div class="right-box">
-        <div class="box-one efficiencyAnalysis">
-            <div style="height: 70%;width: 96%;overflow: auto;margin-top: 6%;margin-left: 2%;">
-                <table id="dome1" lay-filter="test"></table>
-            </div>
-        </div>
-        <div class="box-two materialSituation">
-            <div class="equipmentStatus-box">
-                <div class="equipment-card">
-                    <div class="material-icon"></div>
-                    <div class="equipment-card-content">
-                        <div class="equipment-card-label">材料总数</div>
-                        <div class="equipment-card-value">18<span style="font-size: 12px; margin-left: 2px;">台</span>
-                        </div>
-                    </div>
-                </div>
-                <div class="equipment-card">
-                    <div class="inventory-icon"></div>
-                    <div class="equipment-card-content">
-                        <div class="equipment-card-label">库存状态超过<br>一个月的材料总数</div>
-                        <div class="equipment-card-value">15<span style="font-size: 12px; margin-left: 2px;">台</span>
-                        </div>
-                    </div>
-                </div>
-                <div class="equipment-card">
-                    <div class="equipment-card-icon" style="height: 44px;width: 44px;"></div>
-                    <div class="equipment-card-content" style="margin-left: 10px;">
-                        <div class="equipment-card-label">本月使用率</div>
-                        <div class="equipment-card-value">80<span style="font-size: 12px; margin-left: 2px;">%</span>
-                        </div>
-                    </div>
-                </div>
-                <div class="equipment-card">
-                    <div class="decline-icon"></div>
-                    <div class="equipment-card-content">
-                        <div class="equipment-card-label">同比</div>
-                        <div class="equipment-card-value">+3<span style="font-size: 12px; margin-left: 2px;">%</span>
-                        </div>
-                    </div>
-                </div>
-            </div>
 
-        </div>
+    <div class="right-box">
+
+
         <div class="box-three optimizationReminder">
             <div style="width: 96%;height: 85%;margin-top: 6%;margin-left: 2%;">
                 <div class="optimization-card">
@@ -663,7 +609,7 @@
 
 
         </div>
-    </div>
+    </div>-->
 </div>
 </body>
 <script src="../../js/pages/dataAnalysisOctober/resourceRateAnalysis.js" type="text/javascript"></script>

pages/dataAnalysisOctober/workerEfficiencyAnalysis.html

@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<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/dataAnalysis/commonStyle.css">
+    <link rel="stylesheet" href="../../css/shuiYin/shuiYin.css">
+    <link rel="stylesheet" href="../../css/coreTable.css"/>
+    <script src="../../js/publics/sm4.js" type="text/javascript"></script>
+    <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/publics/aescbc.js"></script>
+    <script src="../../js/publics/sm3.js"></script>
+    <script src="../../api/commonRequest.js"></script>
+    <script src="../../plugin/watermark.js"></script>
+    <title>工人效率分析</title>
+</head>
+<body>
+    <div id="main-box" class="layout">
+        <div id="left-box">
+            <div class="basic-search-box layout">
+                <form class="layui-form basic-form layout" onclick="return false;" onsubmit="return false;">
+                    <div class="layui-form-item">
+                        <div class="layui-inline">
+                            <label class="layui-form-label" style="width: 80px;">班组长:</label>
+                            <div class="layui-input-inline">
+                                <input type="text" id="userName" class="layui-input" autocomplete="off">
+                            </div>
+                        </div>
+                        <div class="layui-inline">
+                            <label class="layui-form-label" style="width: 80px;">班组:</label>
+                            <div class="layui-input-inline">
+                                <input type="text" id="teamName" class="layui-input" autocomplete="off">
+                            </div>
+                        </div>
+                        <button type="button" class="layui-btn layui-btn-normal" onclick="query(1)">
+                            <i class="layui-icon layui-icon-query"></i>查询
+                        </button>
+                    </div>
+                </form>
+            </div>
+            <table id="demo2" lay-filter="demo2"></table>
+        </div>
+        <div id="right-box" class="layout">
+            <div id="oneEcharts">
+
+            </div>
+            <div id="twoEcharts">
+
+            </div>
+            <div id="suggestion" class="layout">
+
+            </div>
+
+        </div>
+    </div>
+</body>
+<style>
+    .layui-table-init {
+        background-color: transparent !important;
+    }
+</style>
+<script src="../../js/pages/newDataAnalysis/workerEfficiencyAnalysis.js" type="text/javascript"></script>
+
+</html>