From e45d0852eff0e494e232ffcc60e0c190acb28801 Mon Sep 17 00:00:00 2001
From: 严智鑫 <test>
Date: 星期二, 22 四月 2025 08:47:37 +0800
Subject: [PATCH] Merge branch 'master' of http://159.223.171.199:10439/r/Haier_MES_II
---
gmms/WebContent/bigScreen/twoglassCut.jsp | 558 +++++++++++++++++++++++++++----------------------------
1 files changed, 276 insertions(+), 282 deletions(-)
diff --git a/gmms/WebContent/bigScreen/twoglassCut.jsp b/gmms/WebContent/bigScreen/twoglassCut.jsp
index 52182af..79400e5 100644
--- a/gmms/WebContent/bigScreen/twoglassCut.jsp
+++ b/gmms/WebContent/bigScreen/twoglassCut.jsp
@@ -5,7 +5,9 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>鏅鸿兘鍒堕�犲彲瑙嗗寲</title>
- <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+<%-- <script src="https://csdn.jsdelivr.net/npm/chart.js"></script>--%>
+
+
<style>
body {
font-family: Arial, sans-serif;
@@ -140,13 +142,13 @@
</style>
</head>
<body>
-<div class="container">
+<div id="app" class="container">
<!-- Header Section -->
<div class="header">
<h1>鍖楃幓鏅鸿兘鍙鍖�</h1>
- <div class="date-time">
- <span>鏁版嵁鏇存柊鏃堕棿: 2025-03-31 12:50:52</span>
- </div>
+<%-- <div class="date-time">--%>
+<%-- <span>鏁版嵁鏇存柊鏃堕棿: 2025-04-31 12:50:52</span>--%>
+<%-- </div>--%>
<!-- 鎼滅储鏍� -->
<div class="search-bar">
<!-- 浜т笟涓嬫媺妗� -->
@@ -190,7 +192,7 @@
<div class="top-blocks">
<div class="top-block">
<div class="title">璁″垝瀹屾垚鐜�</div>
- <div class="value">111.26%</div>
+ <div class="value">76.00%</div>
</div>
<div class="top-block">
<div class="title">宸ョ▼涓嶈壇鐜�</div>
@@ -208,82 +210,46 @@
<!-- Chart Section -->
<div class="chart-container">
- <!-- 绗竴涓秼鍔垮浘 (鏌辩姸鍥� - 璁㈠崟璁″垝鍜岃鍗曞畬鎴�) -->
- <div class="chart">
- <canvas id="trendChart1"></canvas>
- </div>
- <!-- 绗簩涓秼鍔垮浘 (鏌辩姸鍥� - 宸ョ▼涓嶈壇鍙版暟鍜屽伐绋嬩笉鑹巼) -->
- <div class="chart">
- <canvas id="trendChart2"></canvas>
- </div>
- <!-- 绗笁涓秼鍔垮浘 (鏌辩姸鍥� - 鍋滄満鏃堕暱鍜屽仠鏈烘椂鐜�) -->
- <div class="chart">
- <canvas id="trendChart3"></canvas>
- </div>
+ <div id="trendChart1" class="chart"></div>
+ <div id="trendChart2" class="chart"></div>
+ <div id="trendChart3" class="chart"></div>
+
</div>
<!-- Table Section -->
<div class="side-visual">
- <table class="data-table">
- <thead>
- <tr>
- <th>鏃ユ湡</th>
- <th>浜у搧鍚嶇О</th>
- <th>宸ュ巶鍚嶇О</th>
- <th>绾夸綋</th>
- <th>璁㈠崟璁″垝</th>
- <th>璁㈠崟瀹屾垚</th>
- <th>宸紓</th>
- <th>璁″垝瀹屾垚鐜�</th>
- </tr>
- </thead>
- <tbody id="table-body">
- <tr>
- <td>2025-03-30</td>
- <td>鏅鸿兘瀹剁數</td>
- <td>鑿滈槼鍘熺數</td>
- <td>鍘ㄧ數浜屾湡</td>
- <td>7,098</td>
- <td>7,897</td>
- <td>799</td>
- <td>111.26%</td>
- </tr>
- <tr>
- <td>2025-03-31</td>
- <td>鍘ㄦ埧鐢�</td>
- <td>鑿滈槼鍘熺數</td>
- <td>鍘ㄧ數浜屾湡</td>
- <td>1,898</td>
- <td>2,478</td>
- <td>580</td>
- <td>130.56%</td>
- </tr>
- <tr>
- <td>2025-04-1</td>
- <td>鍘ㄦ埧鐢�</td>
- <td>鑿滈槼鍘熺數</td>
- <td>鍘ㄧ數浜屾湡</td>
- <td>2,300</td>
- <td>2,300</td>
- <td>0</td>
- <td>100.00%</td>
- </tr>
- <tr>
- <td>2025-04-2</td>
- <td>鍘ㄦ埧鐢�</td>
- <td>鑿滈槼鍘熺數</td>
- <td>鍘ㄧ數浜屾湡</td>
- <td>2,300</td>
- <td>2,300</td>
- <td>0</td>
- <td>100.00%</td>
- </tr>
- </tbody>
- </table>
+ <table class="table table-striped table-hover data-table" style="overflow-x: auto;font-size: 12px;">
+ <thead>
+ <tr>
+ <th>鏃ユ湡</th>
+ <th>浜у搧鍚嶇О</th>
+ <th>宸ュ巶鍚嶇О</th>
+ <th>绾夸綋</th>
+ <th>璁㈠崟璁″垝</th>
+ <th>璁㈠崟瀹屾垚</th>
+ <th>宸紓</th>
+ <th>璁″垝瀹屾垚鐜�</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr v-for="(item, index) in shuzu" :key="index">
+ <td>{{ item['0_createtime'] || '鏆傛棤鏁版嵁' }}</td>
+ <td>{{ item['1_type'] || '鏆傛棤鏁版嵁' }}</td>
+ <td>{{ item['2_factory'] || '鏆傛棤鏁版嵁' }}</td>
+ <td>{{ item['3_line'] || '鏆傛棤鏁版嵁' }}</td>
+ <td>{{ item['4_plan'] || 0 }}</td>
+ <td>{{ item['5_overnum'] || 0 }}</td>
+ <td>{{ item['6_difference'] || '鏆傛棤鏁版嵁' }}</td>
+ <td>{{ item['7_plan_completion_rate'] || '鏆傛棤鏁版嵁' }}%</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+
</div>
</div>
</div>
-</div>
+
<!-- Chart.js Script -->
<script src="../js/jquery-3.4.1.min.js"></script>
@@ -302,103 +268,28 @@
shuzu:[{}],
shuzu1:[{}],
shuzu2:[{}],
+ yield:[{}],
machineElectric:[{}],
machineWater:[{}],
-
-
-
-
-
val1: {
- borderColor:'#082352',
- title: {
- // text: '鎴愬搧搴撳瓨',
- // left: '290px',
- // top: '0px'
- text:'鍚堟牸鐜�',//涓绘爣棰樻枃鏈�
- left:'center',
- top:'45%',
- left:'50%',
- textStyle:{
- color:'#454c5c',
- align:'center'
- },
- subtextStyle:{
- fontFamily : "寰蒋闆呴粦",
- color:'#6c7a89',
- }
-
- },
-
- tooltip: {
- trigger: 'item',
- textStyle:{
- }
- },
- legend: {
- // orient: 'vertical',
- left: 'left',
- textStyle:{
-
- }
- },
- textStyle:{
-
- },
- series: [
- {
-
- type: 'pie',
- radius : ['40%','70%'],
- center: ['50%', '50%'],
- minAngle:'15',
- label: {
- // position: 'inside',
- show: true,
- formatter(param) {
- // correct the percentage
- return param.name + ' (' + param.percent + '%)';
- }
- },
- data: [
- { value: 300, name: '鎴愬搧',itemStyle:{color:'#53a2ff'} },
- { value: 700, name: '娆″搧',itemStyle:{color:'darkseagreen'} }
- ],
- itemStyle: {
- normal:{
- label:{
- show:true,
- //formatter: "{b} :\n {c} \n ({d}%)",
- formatter: "{b} :\n ({d}%)",
- position:"inner"
- }
- }
- }
-
- }
- ]
},
},
methods:{
-
dingdanxiangqing(){
let HisArr="";
// HisArr = this.$echarts.init(document.getElementById('main2'));
let a = {
value: this.shuzu1[0]['6_qualified'],
-
name: "鎴愬搧",
itemStyle: { color: '#53a2ff' },
label:{fontSize:30}
-
}
let b = {
value: this.shuzu1[0]['7_qualified_not'],
name: "娆″搧",
itemStyle: { color: 'darkseagreen' },
label:{fontSize:30}
-
}
this.val1.title.text="鍚堟牸鐜�"
this.val1.title.top="45%"
@@ -406,10 +297,7 @@
this.val1.title.textStyle.fontSize=30
this.val1.series[0].data[0]=a
this.val1.series[0].data[1]=b
-
-
HisArr.setOption(this.val1);
- this.loading=false
},
dingdanxiangqing1(){
let HisArr="";
@@ -420,8 +308,6 @@
name: "宸插畬鎴�",
itemStyle: { color: '#53a2ff' },
label:{fontSize:30}
-
-
}
let b = {
value: this.shuzu1[0]['3_smallglass_processing'],
@@ -437,116 +323,247 @@
this.val1.series[0].data[0]=a
this.val1.series[0].data[1]=b
HisArr.setOption(this.val1);
- this.loading=false
},
+ echarsInit() {
+ let datashijian = [];
+ let plans = [];
+ let overnums = [];
+ // 閬嶅巻 shuzu 鏁扮粍鎻愬彇鏃ユ湡銆佽鍒掓暟鍜屽畬鎴愭暟
+ for (let i in this.shuzu) {
+ // 杩欓噷灏� createtime 杞崲鎴� "MM/DD" 鏍煎紡鐨勬棩鏈�
+ let date = this.shuzu[i]["0_createtime"];
+ let day = new Date(date);
+ let formattedDate = (day.getMonth() + 1) + "/" + day.getDate(); // 鏍煎紡鍖栨棩鏈�
+ datashijian.push(formattedDate);
+
+ plans.push(this.shuzu[i]["4_plan"]); // 鎻愬彇璁″垝鏁�
+ overnums.push(this.shuzu[i]["5_overnum"]); // 鎻愬彇瀹屾垚鏁�
+ }
+
+ // 閫夋嫨鍥捐〃瀹瑰櫒
+ let HisArr = this.$echarts.init(document.getElementById('trendChart1'));
+
+ // 璁剧疆 ECharts 閰嶇疆
+ let option = {
+ tooltip: { trigger: 'axis' },
+ legend: { data: ['璁㈠崟璁″垝', '璁㈠崟瀹屾垚'] },
+ xAxis: {
+ type: 'category',
+ data: datashijian
+ },
+ yAxis: { type: 'value' },
+ series: [
+ {
+ name: '璁㈠崟璁″垝',
+ type: 'bar',
+ data: plans, // 浣跨敤鎻愬彇鐨勮鍒掓暟鏁版嵁
+ itemStyle: { color: 'rgba(54, 162, 235, 1)' }, // 璁剧疆棰滆壊
+ barWidth: '40%' // 璁剧疆鏌辩姸鍥惧搴�
+ },
+ {
+ name: '璁㈠崟瀹屾垚',
+ type: 'bar',
+ data: overnums, // 浣跨敤鎻愬彇鐨勫畬鎴愭暟鏁版嵁
+ itemStyle: { color: 'rgba(75, 192, 192, 1)' }, // 璁剧疆棰滆壊
+ barWidth: '40%' // 璁剧疆鏌辩姸鍥惧搴�
+ }
+ ]
+ };
+
+ // 璁剧疆鍥捐〃
+ HisArr.setOption(option);
+ this.loading = false; // 缁撴潫鍔犺浇鐘舵��
+ },
+ echarsInit3() {
+ let datashijian = [];
+ let shutdownTimes = [];
+
+ // 妫�鏌ユ暟鎹槸鍚﹀瓨鍦�
+ // if (this.shuzu && this.shuzu.length > 0) {
+ // 閬嶅巻 shuzu 鏁版嵁鎻愬彇鍋滄満鏃堕暱鏁版嵁
+ for (let i in this.shuzu) {
+ let date = this.shuzu[i]["0_createtime"];
+ let shutdownNum = this.shuzu[i]["8_shutdownNum"];
+
+ // 鏍煎紡鍖栨棩鏈�
+ let day = new Date(date);
+ let formattedDate = (day.getMonth() + 1) + "/" + day.getDate();
+ datashijian.push(formattedDate);
+
+ // 鍋滄満鏃堕暱
+ shutdownTimes.push(shutdownNum);
+ }
+
+ console.log('鏃ユ湡:', datashijian);
+ console.log('鍋滄満鏃堕暱:', shutdownTimes);
+
+ // 鍒濆鍖栧浘琛�
+ let HisArr = this.$echarts.init(document.getElementById('trendChart3'));
+
+ let option = {
+ tooltip: { trigger: 'axis' },
+ legend: { data: ['鍋滄満鏃堕暱(鍒�)'] },
+
+ xAxis: {
+ type: 'category',
+ data: datashijian
+ },
+ yAxis: { type: 'value' },
+ series: [
+ {
+ name: '鍋滄満鏃堕暱(鍒�)',
+ type: 'bar',
+ data: shutdownTimes,
+ itemStyle: { color: 'rgba(255, 99, 132, 1)' }, // 鍙牴鎹渶瑕佽皟鏁撮鑹�
+ barWidth: '40%' // 璋冩暣鏌卞
+ }
+ ]
+ };
+
+ HisArr.setOption(option);
+ // } else {
+ // console.error('shuzu 鏁版嵁涓虹┖鎴栨湭鍔犺浇');
+ // console.log(this.shuzu);
+ // }
+ this.loading = false;
+ },
},
watch:{
- shuzu1(){
- // this.dingdanxiangqing(),
- // this.dingdanxiangqing1()
- }
-
+ shuzu(){
+ this.echarsInit();
+ this.echarsInit3();
+ },
},
- async mounted(){
+ mounted: function() {
- let sql=""
- let flag=2
- sql="{call AXJ_dapingxianshi_dingdanshuju2('涓嬬墖')}"
- this.loadAjxss('澶у睆鎬昏鍗曟暟鎹�',sql,flag,"shuzu1")
-
- await setInterval(()=>{
-
- sql="{call AXJ_dapingxianshi_dingdanshuju2('涓嬬墖')}"
- this.interValLoadAjxs('澶у睆鎬昏鍗曟暟鎹�',sql,flag,"shuzu1")
- },5000)
-
-
-
+ this.shuzu = [];
+ let sql="{call machine_bigScreen(5,'','','')}";
+ let flag = 2;
+ this.loadAjxss('浠诲姟鏌ヨ鎴愬姛',sql,flag,"shuzu");
}
})
- // 鍒濆鍖栨暟鎹�
- const initialData = {
- labels: ['2025-03-30', '2025-03-31', '2025-04-01'],
- datasets: [{
- label: '璁㈠崟璁″垝',
- data: [7098, 8000, 8500],
- backgroundColor: 'rgba(54, 162, 235, 0.2)',
- borderColor: 'rgba(54, 162, 235, 1)',
- borderWidth: 1
- }, {
- label: '璁㈠崟瀹屾垚',
- data: [7897, 8200, 8700],
- backgroundColor: 'rgba(75, 192, 192, 0.2)',
- borderColor: 'rgba(75, 192, 192, 1)',
- borderWidth: 1
- }]
- };
+ // 鍒濆鍖� ECharts 鍥捐〃
+ const trendChart1 = echarts.init(document.getElementById('trendChart1'));
+ const trendChart2 = echarts.init(document.getElementById('trendChart2'));
+ const trendChart3 = echarts.init(document.getElementById('trendChart3'));
- const ctx1 = document.getElementById('trendChart1').getContext('2d');
- const trendChart1 = new Chart(ctx1, {
- type: 'bar',
- data: initialData
- });
- const ctx2 = document.getElementById('trendChart2').getContext('2d');
- const trendChart2 = new Chart(ctx2, {
- type: 'bar',
- data: {
- labels: ['2025-03-30', '2025-03-31', '2025-04-01'],
- datasets: [{
- label: '宸ョ▼涓嶈壇鍙版暟',
- data: [5, 3, 2],
- backgroundColor: 'rgba(75, 192, 192, 0.2)',
- borderColor: 'rgba(75, 192, 192, 1)',
- borderWidth: 1
- }, {
- label: '宸ョ▼涓嶈壇鐜�',
+
+ // 閰嶇疆绗竴涓浘琛� (鏌辩姸鍥� - 璁㈠崟璁″垝鍜岃鍗曞畬鎴�)
+ // const option1 = {
+ // tooltip: {
+ // trigger: 'axis'
+ // },
+ // legend: {
+ // data: ['璁㈠崟璁″垝', '璁㈠崟瀹屾垚']
+ // },
+ // xAxis: {
+ // type: 'category',
+ // data: dates
+ // },
+ // yAxis: {
+ // type: 'value'
+ // },
+ // series: [{
+ // name: '璁㈠崟璁″垝',
+ // type: 'bar',
+ // data: plans,
+ // itemStyle: {
+ // color: 'rgba(54, 162, 235, 1)'
+ // }
+ // },
+ // {
+ // name: '璁㈠崟瀹屾垚',
+ // type: 'bar',
+ // data: overnums,
+ // itemStyle: {
+ // color: 'rgba(75, 192, 192, 1)'
+ // }
+ // }
+ // ]
+ // };
+ // trendChart1.setOption(option1);
+
+ // 閰嶇疆绗簩涓浘琛� (鏌辩姸鍥� - 宸ョ▼涓嶈壇鍙版暟鍜屽伐绋嬩笉鑹巼)
+ const option2 = {
+ tooltip: {
+ trigger: 'axis'
+ },
+ legend: {
+ data: ['宸ョ▼涓嶈壇鍙版暟', '宸ョ▼涓嶈壇鐜�']
+ },
+ xAxis: {
+ type: 'category',
+ data: ['2025-03-30', '2025-03-31', '2025-04-01']
+ },
+ yAxis: {
+ type: 'value'
+ },
+ series: [{
+ name: '宸ョ▼涓嶈壇鍙版暟',
+ type: 'bar',
+ data: [5, 3, 2],
+ itemStyle: {
+ color: 'rgba(75, 192, 192, 1)'
+ }
+ },
+ {
+ name: '宸ョ▼涓嶈壇鐜�',
+ type: 'bar',
data: [0.01, 0.02, 0.03],
- backgroundColor: 'rgba(255, 99, 132, 0.2)',
- borderColor: 'rgba(255, 99, 132, 1)',
- borderWidth: 1
- }]
- }
- });
+ itemStyle: {
+ color: 'rgba(255, 99, 132, 1)'
+ }
+ }
+ ]
+ };
+ trendChart2.setOption(option2);
- const ctx3 = document.getElementById('trendChart3').getContext('2d');
- const trendChart3 = new Chart(ctx3, {
- type: 'bar',
- data: {
- labels: ['2025-03-30', '2025-03-31', '2025-04-01'],
- datasets: [{
- label: '鍋滄満鏃堕暱',
- data: [1, 2, 3],
- backgroundColor: 'rgba(255, 159, 64, 0.2)',
- borderColor: 'rgba(255, 159, 64, 1)',
- borderWidth: 1
- }, {
- label: '鍋滄満鏃剁巼',
- data: [0.02, 0.03, 0.04],
- backgroundColor: 'rgba(153, 102, 255, 0.2)',
- borderColor: 'rgba(153, 102, 255, 1)',
- borderWidth: 1
- }]
- }
- });
+ // 閰嶇疆绗笁涓浘琛� (鏌辩姸鍥� - 鍋滄満鏃堕暱鍜屽仠鏈烘椂鐜�)
+ // const option3 = {
+ // tooltip: {
+ // trigger: 'axis'
+ // },
+ // legend: {
+ // data: ['鍋滄満鏃堕暱', '鍋滄満鏃剁巼']
+ // },
+ // xAxis: {
+ // type: 'category',
+ // data: ['2025-03-30', '2025-03-31', '2025-04-01']
+ // },
+ // yAxis: {
+ // type: 'value'
+ // },
+ // series: [{
+ // name: '鍋滄満鏃堕暱',
+ // type: 'bar',
+ // data: [1, 2, 3],
+ // itemStyle: {
+ // color: 'rgba(255, 159, 64, 1)'
+ // }
+ // },
+ // {
+ // name: '鍋滄満鏃剁巼',
+ // type: 'bar',
+ // data: [0.02, 0.03, 0.04],
+ // itemStyle: {
+ // color: 'rgba(153, 102, 255, 1)'
+ // }
+ // }
+ // ]
+ // };
+ // trendChart3.setOption(option3);
- //鏍规嵁鏃ユ湡鑼冨洿杩囨护鏁版嵁
+ // 鏍规嵁鏃ユ湡鑼冨洿杩囨护鏁版嵁
function filterData() {
const startDate = document.getElementById('start-date').value;
const endDate = document.getElementById('end-date').value;
- // 鏋勫缓璇锋眰鐨勫弬鏁�
- const params = {
- startDate: startDate,
- endDate: endDate,
- };
-
- // 绀轰緥锛氬亣璁炬偍宸茬粡閫氳繃鏌ヨ绛涢�変簡鏁版嵁锛屼笅闈㈡ā鎷熸洿鏂板浘琛ㄦ暟鎹�
- // 鏇存柊绗竴涓秼鍔垮浘
- trendChart1.data = {
+ // 妯℃嫙鏂扮殑鏁版嵁
+ const newData1 = {
labels: ['2025-03-30', '2025-03-31'],
datasets: [{
label: '璁㈠崟璁″垝',
@@ -562,41 +579,18 @@
borderWidth: 1
}]
};
- trendChart2.data = {
- labels: ['2025-03-30', '2025-03-31'],
- datasets: [{
- label: '宸ョ▼涓嶈壇鍙版暟',
- data: [5, 3,],
- backgroundColor: 'rgba(75, 192, 192, 0.2)',
- borderColor: 'rgba(75, 192, 192, 1)',
- borderWidth: 1
- }, {
- label: '宸ョ▼涓嶈壇鐜�',
- data: [0.01, 0.02],
- backgroundColor: 'rgba(255, 99, 132, 0.2)',
- borderColor: 'rgba(255, 99, 132, 1)',
- borderWidth: 1
- }]
- };
- trendChart3.data = {
- labels: ['2025-03-30', '2025-03-31'],
- datasets: [{
- label: '鍋滄満鏃堕暱',
- data: [1, 2],
- backgroundColor: 'rgba(255, 159, 64, 0.2)',
- borderColor: 'rgba(255, 159, 64, 1)',
- borderWidth: 1
- }, {
- label: '鍋滄満鏃剁巼',
- data: [0.02, 0.03],
- backgroundColor: 'rgba(153, 102, 255, 0.2)',
- borderColor: 'rgba(153, 102, 255, 1)',
- borderWidth: 1
- }]
- };
- trendChart1.update();
- trendChart2.update();
- trendChart3.update();
+ trendChart1.setOption({
+ xAxis: {
+ data: newData1.labels
+ },
+ series: [{
+ data: newData1.datasets[0].data
+ },
+ {
+ data: newData1.datasets[1].data
+ }
+ ]
+ });
}
// 閲嶇疆鎼滅储鏍�
--
Gitblit v1.8.0