From 75a3365af2e78f89c464c9cdf87a91ab5b577e77 Mon Sep 17 00:00:00 2001
From: zrg <z1873@LAPTOP-EAVL132E>
Date: 星期一, 20 四月 2026 09:53:40 +0800
Subject: [PATCH] 1
---
WebTM/views/数采管理/DAQ_EquipRunningSlice.html | 324 +++++++++++++++++++++++++++++++++++++++++------------
1 files changed, 249 insertions(+), 75 deletions(-)
diff --git "a/WebTM/views/\346\225\260\351\207\207\347\256\241\347\220\206/DAQ_EquipRunningSlice.html" "b/WebTM/views/\346\225\260\351\207\207\347\256\241\347\220\206/DAQ_EquipRunningSlice.html"
index b68cce4..8c1cb4a 100644
--- "a/WebTM/views/\346\225\260\351\207\207\347\256\241\347\220\206/DAQ_EquipRunningSlice.html"
+++ "b/WebTM/views/\346\225\260\351\207\207\347\256\241\347\220\206/DAQ_EquipRunningSlice.html"
@@ -12,6 +12,7 @@
<script src="../../layuiadmin/Scripts/jquery-1.4.1.js"></script>
<script src="../../layuiadmin/layui/layui1.js"></script>
<script src="../../layuiadmin/echarts.min.js"></script>
+ <script src="../../layuiadmin/dayjs.min.js"></script>
<link href="../../layuiadmin/layui/css/ReportPlatform.css" rel="stylesheet" />
<script src="../../layuiadmin/Scripts/webConfig.js"></script>
<style>
@@ -266,6 +267,8 @@
var HEquipName = "";//璁惧鍚嶇О
var HSourceID = "";//浜х嚎id
var HDeptID = "";
+ var pieData = []; // 楗煎浘鏁版嵁闆嗗悎
+ var timelineData = []; //鏃跺簭鍥炬暟鎹泦鍚�
layui.config({
base: '../../layuiadmin/' //闈欐�佽祫婧愭墍鍦ㄨ矾寰�
}).extend({
@@ -345,90 +348,39 @@
$.ajax({
url: GetWEBURL() + '/DAQ_EquipRunningSlice/GetHEquipStatusReportList_DAQ',
type: "GET",
+ async: false,
data: { "HDeptID": HDeptID, "HEquipID": HEquipID, HBeginDate: HBeginDate, HEndDate: HEndDate, "user": sessionStorage["HUserName"] },
dataType: "json",//鏁版嵁绫诲瀷鍙互涓� text xml json script jsonp
success: function (res) {
data = res.data
- debugger
+
if (data.length < 1) {
return
}
- var $container = $("#chartContainer");
- $container.empty();
-
- for (var i = 0; i < data.length; i++) {
- var hmainid = data[i].hmainid;
- var equipName = data[i].璁惧鍚嶇О;
- var dateStr = data[i].鎵�灞炴棩鏈�.split('T')[0];
-
- // 鏃堕棿瀛楁
- var runTime = data[i].杩愯鏃堕棿; // 杩愯
- var stopTime = data[i].鏈烘椂闂�; // 鍋滄満
- var alarmTime = data[i].鍛婅鏃堕棿; // 鍛婅
- var offTime = data[i].鍏虫満鏃堕棿; // 鍏虫満
- var total = runTime + stopTime + alarmTime + offTime;
-
- // ==============================================
- // 1. 鍒涘缓姣忎釜璁惧鐨勫浘琛ㄥ澹筹紙宸﹀彸甯冨眬锛氶ゼ鍥� + 鏃跺簭鍥撅級
- // ==============================================
- var itemHtml = `
- <div style="width:100%; height:420px; display:flex; gap:20px; margin-bottom:30px; border:1px solid #eee; padding:15px; border-radius:8px;">
- <div id="chart_pie_${hmainid}" style="width:38%; height:100%;"></div>
- <div id="chart_time_${hmainid}" style="width:62%; height:100%;"></div>
- </div>`;
- $container.append(itemHtml);
-
- // ==============================================
- // 2. 宸︿晶鐜舰楗煎浘锛堣繍琛�/鍋滄満/鍛婅/鍏虫満 鍗犳瘮锛�
- // ==============================================
- var pieChart = echarts.init(document.getElementById(`chart_pie_${hmainid}`));
- pieChart.setOption({
- title: { text: `${dateStr} ${equipName}`, left: 'center', textStyle: { fontSize: 16 } },
- tooltip: { trigger: 'item', formatter: '{b}: {c}H ({d}%)' },
- legend: { orient: 'vertical', right: '2%', top: 'middle', textStyle: { fontSize: 13 } },
- series: [{
- type: 'pie',
- radius: ['42%', '70%'],
- center: ['45%', '55%'],
- itemStyle: { borderRadius: 4, borderColor: '#fff', borderWidth: 2 },
- label: { show: false },
- data: [
- { value: runTime, name: '杩愯', itemStyle: { color: '#4CAF50' } },
- { value: stopTime, name: '鍋滄満', itemStyle: { color: '#FF9800' } },
- { value: alarmTime, name: '鍛婅', itemStyle: { color: '#F44336' } },
- { value: offTime, name: '鍏虫満', itemStyle: { color: '#9E9E9E' } }
- ]
- }]
- });
-
- // ==============================================
- // 3. 鍙充晶 24灏忔椂 璁惧杩愯鏃跺簭鍥撅紙鍜屾晥鏋滃浘瀹屽叏涓�鑷达級
- // ==============================================
- var timeChart = echarts.init(document.getElementById(`chart_time_${hmainid}`));
- timeChart.setOption({
- title: {
- text: `杩愯:${runTime.toFixed(1)}H | 鍋滄満:${stopTime.toFixed(1)}H | 鍛婅:${alarmTime.toFixed(1)}H | 鍏虫満:${offTime.toFixed(1)}H`,
- left: 'center',
- textStyle: { fontSize: 14 }
- },
- grid: { left: '3%', right: '3%', top: '20%', bottom: '10%', containLabel: true },
- xAxis: {
- type: 'category',
- data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00']
- },
- yAxis: { type: 'value', max: 1, show: false },
- series: [
- { type: 'bar', stack: 'total', barWidth: '80%', itemStyle: { color: '#9E9E9E' }, data: [offTime / 24, 0, 0, 0, 0, 0, 0] },
- { type: 'bar', stack: 'total', barWidth: '80%', itemStyle: { color: '#FF9800' }, data: [stopTime / 24, 0, 0, 0, 0, 0, 0] },
- { type: 'bar', stack: 'total', barWidth: '80%', itemStyle: { color: '#F44336' }, data: [alarmTime / 24, 0, 0, 0, 0, 0, 0] },
- { type: 'bar', stack: 'total', barWidth: '80%', itemStyle: { color: '#4CAF50' }, data: [runTime / 24, 0, 0, 0, 0, 0, 0] }
- ]
- });
- }
-
+ pieData = data
}
})
+
+ $.ajax({
+ url: GetWEBURL() + '/DAQ_EquipRunningSlice/GetHEquipStatusReportList2_DAQ',
+ type: "GET",
+ async: false,
+ data: { "HDeptID": HDeptID, "HEquipID": HEquipID, HBeginDate: HBeginDate, HEndDate: HEndDate, "user": sessionStorage["HUserName"] },
+ dataType: "json",//鏁版嵁绫诲瀷鍙互涓� text xml json script jsonp
+ success: function (res) {
+ data = res.data
+
+ if (data.length < 1) {
+ return
+ }
+ console.log(timelineData)
+ timelineData = data
+ }
+ })
+
+ drawCharts()
+
//wktag = 0;
//$("#btomleft").html("");
@@ -500,6 +452,201 @@
}
+ //#region 缁樺埗鍥捐〃
+ function drawCharts() {
+ var $container = $("#chartContainer");
+ $container.empty();
+
+ var data = pieData
+ console.log(pieChart)
+ var data1 = timelineData
+
+ for (var i = 0; i < data.length; i++) {
+ var hmainid = data[i].hmainid;
+ var equipName = data[i].璁惧鍚嶇О;
+ var dateStr = data[i].鎵�灞炴棩鏈�.split('T')[0];
+
+ // 鏃堕棿瀛楁
+ var runTime = data[i].杩愯鏃堕棿 || 0; // 杩愯
+ var stopTime = data[i].鍋滄満鏃堕棿 || 0; // 鍋滄満
+ var alarmTime = data[i].鍛婅鏃堕棿 || 0; // 鍛婅
+ var offTime = data[i].鍏虫満鏃堕棿 || 0; // 鍏虫満
+ var total = runTime + stopTime + alarmTime + offTime;
+
+ // ==============================================
+ // 1. 鍒涘缓姣忎釜璁惧鐨勫浘琛ㄥ澹筹紙宸﹀彸甯冨眬锛氶ゼ鍥� + 鏃跺簭鍥撅級
+ // ==============================================
+ var itemHtml = `
+ <div style="width:100%; height:200px; margin-bottom:20px; border:1px solid #eee; padding:15px; border-radius:8px;">
+ <div style="display: inline-block; height:20%; display:flex; gap:20px;">
+ <div style="width:40%;">${dateStr} ${equipName}</div>
+ <div style="width:60%; display: flex; justify-content: right; align-items: center; gap: 8px;">
+ <div style="width: 18px; height: 18px; background-color: #73cc3f; display: inline-block"></div>
+ <div style="padding-left: 4px ;display: inline-block">杩愯(${runTime}H)</div>
+ <div style="width: 18px; height: 18px; background-color: #f2a439; display: inline-block"></div>
+ <div style="padding-left: 4px ;display: inline-block">鍋滄満(${stopTime}H)</div>
+ <div style="width: 18px; height: 18px; background-color: #ff796a; display: inline-block"></div>
+ <div style="padding-left: 4px ;display: inline-block">鍛婅(${alarmTime}H)</div>
+ <div style="width: 18px; height: 18px; background-color: #9b9a9b; display: inline-block"></div>
+ <div style="padding-left: 4px ;display: inline-block">鍏虫満(${offTime}H)</div>
+ </div>
+ </div>
+ <div style="display: inline-block; height:80%; display:flex; gap:20px;">
+ <div id="chart_pie_${hmainid}_${i}" style="width:25%; height:100%;"></div>
+ <div id="chart_time_${hmainid}_${i}" style="width:70%; height:100%;"></div>
+ </div>
+ </div>`;
+ $container.append(itemHtml);
+
+
+ // ==============================================
+ // 2. 宸︿晶鐜舰楗煎浘锛堣繍琛�/鍋滄満/鍛婅/鍏虫満 鍗犳瘮锛�
+ // ==============================================
+ var pieChart = echarts.init(document.getElementById(`chart_pie_${hmainid}_${i}`));
+ pieChart.setOption({
+ // title: { text: `${dateStr} ${equipName}`, left: 'center', textStyle: { fontSize: 16 } },
+ tooltip: {
+ trigger: 'item', formatter: '{b}: {c}H ({d}%)', textStyle: {
+ lineHeight: 22 // 鏂囧瓧闂磋窛鏇村ぇ
+ },
+ },
+ legend: {
+ orient: 'vertical', right: '2%', top: 'middle', textStyle: { fontSize: 13 }
+ , formatter: function (name, value) {
+ var getRate = function () {
+ if (name == '杩愯') {
+ return (runTime / total * 100.0).toFixed(2)
+ }
+ if (name == '鍋滄満') {
+ return (stopTime / total * 100.0).toFixed(2)
+ }
+ if (name == '鍛婅') {
+ return (alarmTime / total * 100.0).toFixed(2)
+ }
+ if (name == '鍏虫満') {
+ return (offTime / total * 100.0).toFixed(2)
+ }
+ }()
+ return name + '鐜�(' + getRate
+ + '%)'
+ }
+ },
+ series: [{
+ type: 'pie',
+ radius: ['42%', '70%'],
+ center: ['25%', '50%'],
+ itemStyle: { borderRadius: 4, borderColor: '#fff', borderWidth: 2 },
+ label: { show: false },
+ data: [
+ { value: runTime, name: '杩愯', itemStyle: { color: '#73cc3f' } },
+ { value: stopTime, name: '鍋滄満', itemStyle: { color: '#f2a439' } },
+ { value: alarmTime, name: '鍛婅', itemStyle: { color: '#ff796a' } },
+ { value: offTime, name: '鍏虫満', itemStyle: { color: '#9b9a9b' } }
+ ]
+ }]
+ });
+
+ // ==============================================
+ // 3. 鍙充晶 24灏忔椂 璁惧杩愯鏃跺簭鍥�
+ // ==============================================
+ // data鐨勬椂闂村拰璁惧id浠モ�榑鈥欒繘琛屾嫾鎺ュ彲寰楀嚭data1瀵硅薄鐨刱ey锛岀畝鍖栨搷浣�
+
+ var key = dateStr + "_" + hmainid
+
+ var timeChart = echarts.init(document.getElementById(`chart_time_${hmainid}_${i}`));
+ // 浣犵殑鍘熷鏁版嵁
+ var data1Instance = data1[key]
+ if(!data1Instance){
+ continue
+ }
+ var startTime = dayjs(dateStr + " 00:00:00").valueOf();
+ var endTime = dayjs(dateStr + " 23:59:59").valueOf();
+ var categories = [data1Instance[0]["鐢熶骇璧勬簮"]];
+ var types = [
+ { name: '姝ｅ父杩愯', color: '#73cc3f' },
+ { name: '绂荤嚎', color: '#9b9a9b' },
+ { name: '寰呮満', color: '#f2a439' },
+ ];
+
+ var getColor = function (name) {
+ for (var i = 0; i < types.length; i++) {
+ if (name == types[i].name) {
+ return types[i].color
+ }
+ }
+ }
+
+ chartDataTimeline = []
+ for (var cursor = 0; cursor < data1Instance.length; cursor++) {
+ chartDataTimeline.push({
+ "name": data1Instance[cursor]["HResult"],
+ "value": [
+ 0,
+ dayjs(data1Instance[cursor]["鏃堕棿"]).valueOf(),
+ dayjs(data1Instance[cursor]["鏃堕棿"]).add(5, 'm').valueOf(),
+ 300000
+ ],
+ "itemStyle": {
+ "normal": {
+ "color": getColor(data1Instance[cursor]["HResult"])
+ }
+ }
+ })
+ }
+ timeChart.setOption({
+ tooltip: {
+ formatter: function (params) {
+ return params.marker + params.name;
+ }
+ },
+ grid: {
+ top: 0,
+ bottom: 0,
+ left: 20, // 缁橸杞存枃瀛楃暀涓�鐐逛綅缃�
+ right: 20,
+ containLabel: true
+ },
+ xAxis: {
+ type: 'time',
+ min: startTime, // 寮�濮嬫椂闂存埑
+ max: endTime, // 缁撴潫鏃堕棿鎴�
+ minInterval: 7200000, // 闂撮殧涓ゅ皬鏃�
+ scale: true,
+ axisLabel: {
+ formatter: function (val) {
+ return echarts.format.formatTime('hh:mm', val);
+ }
+ },
+ axisLine: {
+ show: false // 闅愯棌 x 杞磋酱绾�
+ }
+ },
+ yAxis: {
+ data: categories,
+ axisLine: {
+ show: false // 闅愯棌 y 杞磋酱绾�
+ },
+ name: "",
+ axisLabel: { show: false }, // 闅愯棌Y杞存爣绛�
+ },
+ series: [
+ {
+ type: 'custom',
+ renderItem: renderItem,
+ itemStyle: {
+ opacity: 0.8
+ },
+ encode: {
+ x: [1, 2],
+ y: 0
+ },
+ data: chartDataTimeline
+ }
+ ]
+ })
+ }
+ }
+ //#endregion
// 鏍戠姸鍥炬煡璇�
function get_Display_Tree() {
@@ -1302,7 +1449,34 @@
});
}
-
+ function renderItem(params, api) {
+ var categoryIndex = api.value(0);
+ var start = api.coord([api.value(1), categoryIndex]);
+ var end = api.coord([api.value(2), categoryIndex]);
+ var height = api.size([0, 1])[1] * 0.6;
+ var rectShape = echarts.graphic.clipRectByRect(
+ {
+ x: start[0],
+ y: start[1] - height / 2,
+ width: end[0] - start[0],
+ height: height
+ },
+ {
+ x: params.coordSys.x,
+ y: params.coordSys.y,
+ width: params.coordSys.width,
+ height: params.coordSys.height
+ }
+ );
+ return (
+ rectShape && {
+ type: 'rect',
+ transition: ['shape'],
+ shape: rectShape,
+ style: api.style()
+ }
+ );
+ }
//#endregion
</script>
--
Gitblit v1.9.1