From 90a2c33d3153d7a8f5298f3f927b4561f8759e7e Mon Sep 17 00:00:00 2001
From: wu <731351411@qq.com>
Date: 星期三, 26 七月 2023 15:56:50 +0800
Subject: [PATCH] Merge branch 'master' of http://10.153.19.150:10101/r/Haier_MES
---
gmms/WebContent/mysqlInsert/toPlc.jsp | 6
gmms/.settings/org.eclipse.core.resources.prefs | 1
gmms/WebContent/WEB-INF/lib/nglib.jar | 0
gmms/WebContent/ganhuaxiapian/ganghuaxiapian.jsp | 968 ++++++++++++------------
gmms/WebContent/tiemotaizu/tiemotaizu.jsp | 1034 +++++++++++++-------------
gmms/WebContent/dapingxianshi/dakongdaping.jsp | 253 ++++++
6 files changed, 1,261 insertions(+), 1,001 deletions(-)
diff --git a/gmms/.settings/org.eclipse.core.resources.prefs b/gmms/.settings/org.eclipse.core.resources.prefs
index 5824ff9..f833d73 100644
--- a/gmms/.settings/org.eclipse.core.resources.prefs
+++ b/gmms/.settings/org.eclipse.core.resources.prefs
@@ -1,2 +1,3 @@
eclipse.preferences.version=1
+encoding//WebContent/dapingxianshi/dakongdaping.jsp=UTF-8
encoding//WebContent/login/machinelistcontent.jsp=UTF-8
diff --git a/gmms/WebContent/WEB-INF/lib/nglib.jar b/gmms/WebContent/WEB-INF/lib/nglib.jar
index 4d6ba86..bc242b8 100644
--- a/gmms/WebContent/WEB-INF/lib/nglib.jar
+++ b/gmms/WebContent/WEB-INF/lib/nglib.jar
Binary files differ
diff --git a/gmms/WebContent/dapingxianshi/dakongdaping.jsp b/gmms/WebContent/dapingxianshi/dakongdaping.jsp
new file mode 100644
index 0000000..8ac49b6
--- /dev/null
+++ b/gmms/WebContent/dapingxianshi/dakongdaping.jsp
@@ -0,0 +1,253 @@
+<%@page import="ng.db.DBHelper"%>
+<%@ page contentType="text/html;charset=UTF-8"%>
+<%-- <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> --%>
+<c:set var="ctx" value="${pageContext.request.contextPath}" />
+<html>
+<head>
+<title>鎵撳瓟澶у睆</title>
+
+<!-- Font Awesome -->
+<link rel="stylesheet" href="../static/AdminLTE/bower_components/font-awesome/css/font-awesome.min.css">
+<!-- Ionicons -->
+<link rel="stylesheet" href="../static/AdminLTE/bower_components/Ionicons/css/ionicons.min.css">
+<!-- Theme style -->
+<link rel="stylesheet" href="../static/AdminLTE/dist/css/AdminLTE.min.css">
+<link rel="stylesheet" href="../static/AdminLTE/dist/css/skins/skin-blue.min.css">
+<link rel="stylesheet" href="..//static/AdminLTE/bower_components/bootstrap/dist/css/bootstrap.min.css">
+<style type="text/css">
+@IMPORT url("../static/global/showtask/showtask.css");
+</style>
+
+<script>
+ var contextPath = "${pageContext.request.contextPath}";
+</script>
+
+<link type="text/css" rel="stylesheet"
+ href="../static/css/dataTables.bootstrap.css" />
+<link type="text/css" rel="stylesheet"
+ href="../static/css/dataTables.tableTools.css" />
+
+<script src="../js/jquery-3.4.1.min.js"></script>
+<script src="../js/echarts.min.js"></script>
+<link rel="stylesheet" href="../js/static/css/element.css">
+<!-- <link rel="stylesheet" href="../js/static/css/style.css"> -->
+<script src="../js/static/js/vue.js"></script>
+<script src="../js/mixins.js"></script>
+<!-- import JavaScript -->
+
+<script src="../js/static/js/element.js"></script>
+<script src="../js/static/js/echarts.min.js"></script>
+<script type="text/javascript" src="../static/js/jquery.dataTables.min.js"></script>
+<script type="text/javascript" src="../static/js/dataTables.bootstrap.js"></script>
+<script type="text/javascript" src="../static/js/dataTables.tableTools.js"></script>
+<script type="text/javascript" src="../static/js/moment.js"></script>
+<script type="text/javascript" src="../static/js/sucaijiayuan.js"></script>
+<script type="text/javascript" src="../static/laydate/laydate.js"></script>
+<script type="text/javascript" src="../static/util/utilAlert.js"></script>
+<script type="text/javascript" src="../static/bootstrap/3.3.7/js/bootstrap.min.js"></script>
+
+<style>
+ *{
+ margin:0;
+ padding:0;
+ }
+ #top{
+ height:25%;
+ display:flex;
+ }
+ #center{
+ height:50%;
+ display:flex;
+ }
+ #bottom{
+ height:25%;
+ display:flex;
+ }
+ .top_div{
+ width:25%;
+ htight:100%;
+ }
+ .center_div{
+ width:28%;
+ htight:100%;
+ display:flex;
+ flex-wrap: wrap;
+ }
+ .center_divs{
+ width:46%;
+ htight:100%;
+ }
+ .center_div_details{
+ height:50%;
+ width:100%;
+ }
+ .bottom_div{
+ width:25%;
+ htight:100%;
+ }
+</style>
+
+</head>
+<body>
+ <div id='app' style='background-color:#D5EAFF;width:100%;height: 100%;'>
+ <div id="top">
+ <div class="top_div">鎵撳瓟鏈�1浜у搧鍥�</div>
+ <div class="top_div" id="Histogram1">鎵撳瓟鏈�1鐢佃��</div>
+ <div class="top_div" id="Histogram2">鎵撳瓟鏈�2鐢佃��</div>
+ <div class="top_div">鎵撳瓟鏈�2浜у搧鍥�</div>
+ </div>
+ <div id="center">
+ <div class="center_div">
+ <div class="center_div_details" id="Histogram5">鎵撳瓟鏈�1鐢ㄦ按</div>
+ <div class="center_div_details" id="Histogram6">鎵撳瓟鏈�3鐢ㄦ按</div>
+ </div>
+ <div id="app" style="display:width:100%" class="center_divs">
+ <el-table border
+ :data="machine"
+ height='100%'
+ style="width: 100%;"
+ :cell-class-name="tableRowClassName"
+ >
+ <el-table-column
+ prop="name"
+ label="璁惧">
+ </el-table-column>
+ <el-table-column
+ prop="ip"
+ label="璁㈠崟鍙�">
+ </el-table-column>
+ <el-table-column
+ prop="port"
+ label="宸插姞宸ユ暟閲�">
+ </el-table-column>
+ <el-table-column
+ prop="st"
+ label="寰呭姞宸ユ暟閲�">
+ </el-table-column>
+ <el-table-column
+ prop="count"
+ label="鐮存崯鏁伴噺">
+ </el-table-column>
+ <el-table-column
+ prop="count"
+ label="鏇存崲鍛ㄦ湡">
+ </el-table-column>
+ <el-table-column
+ prop="count"
+ label="鏇存崲鍊掕鏃�">
+ </el-table-column>
+ </el-table>
+ </div>
+ <div class="center_div">
+ <div class="center_div_details" id="Histogram7">鎵撳瓟鏈�2鐢ㄦ按</div>
+ <div class="center_div_details" id="Histogram8">鎵撳瓟鏈�4鐢ㄦ按</div>
+ </div>
+ </div>
+ <div id="bottom">
+ <div class="bottom_div">鎵撳瓟鏈�1浜у搧鍥�</div>
+ <div class="bottom_div" id="Histogram3">鎵撳瓟鏈�1鐢佃��</div>
+ <div class="bottom_div" id="Histogram4">鎵撳瓟鏈�2鐢佃��</div>
+ <div class="bottom_div">鎵撳瓟鏈�2浜у搧鍥�</div>
+ </div>
+ </div>
+ <script>
+ Vue.prototype.$echarts = echarts
+ let app =new Vue({
+ el: '#app',
+ mixins:[mixin],
+ data:{
+ machine:"",
+ },
+ methods:{
+ tableRowClassName({row,column,rowIndex,columnIndex}) {
+
+ if (row['st'] == '鏈繛鎺�' && columnIndex==3 ) {
+ return 'success-row';
+ }else{
+ return '';
+ }
+
+ }
+ }
+ })
+ window.onload=function(){
+ zhutu("Histogram1",[10, 52, 200, 334, 390, 330, 220],"鐢佃��");
+ zhutu("Histogram2",[10, 52, 200, 334, 390, 330, 220],"鐢佃��");
+ zhutu("Histogram3",[10, 52, 200, 334, 390, 330, 220],"鐢佃��");
+ zhutu("Histogram4",[10, 52, 200, 334, 390, 330, 220],"鐢佃��");
+ zhutu("Histogram5",[10, 52, 200, 334, 390, 330, 220],"姘磋��");
+ zhutu("Histogram6",[10, 52, 200, 334, 390, 330, 220],"姘磋��");
+ zhutu("Histogram7",[10, 52, 200, 334, 390, 330, 220],"姘磋��");
+ zhutu("Histogram8",[10, 52, 200, 334, 390, 330, 220],"姘磋��");
+ }
+ function zhutu (Cname,datas,Tname) {
+
+ 聽 聽 var chartDom = document.getElementById(Cname);
+ 聽 聽 var myChart = echarts.init(chartDom);
+ 聽 聽 var option;
+
+ 聽 聽 option = {
+ 聽 聽 聽 tooltip: {
+ 聽 聽 聽 聽 trigger: 'axis',
+ 聽 聽 聽 聽 axisPointer: {
+ 聽 聽 聽 聽 聽 type: 'shadow'
+ 聽 聽 聽 聽 }
+ 聽 聽 聽 },
+ 聽 聽 聽 grid: {
+ 聽 聽 聽 聽 left: '3%',
+ 聽 聽 聽 聽 right: '4%',
+ 聽 聽 聽 聽 bottom: '3%',
+ 聽 聽 聽 聽 containLabel: true
+ 聽 聽 聽 },
+ 聽 聽 聽 xAxis: [
+ 聽 聽 聽 聽 {
+ 聽 聽 聽 聽 聽 type: 'category',
+ 聽 聽 聽 聽 聽 data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+ 聽 聽 聽 聽 聽 axisLine: { lineStyle: { color: 'rgb(30, 144, 255)' } },
+ 聽 聽 聽 聽 聽 axisLabel: { color: 'rgb(30, 144, 255)' },
+ 聽 聽 聽 聽 聽 splitLine: { lineStyle: { color: 'rgb(30, 144, 255)', type: 'dashed' } }
+ 聽 聽 聽 聽 }
+ 聽 聽 聽 ],
+ 聽 聽 聽 yAxis: [
+ 聽 聽 聽 聽 {
+ 聽 聽 聽 聽 聽 type: "value",
+ 聽 聽 聽 聽 聽 name: Tname,
+ 聽 聽 聽 聽 聽 nameTextStyle: {
+ 聽 聽 聽 聽 聽 聽 color: "rgb(30, 144, 255)",
+ 聽 聽 聽 聽 聽 聽 fontSize: 12,
+ 聽 聽 聽 聽 聽 聽 padding: [0, 0, 0, -30], //name鏂囧瓧浣嶇疆 瀵瑰簲 涓婂彸涓嬪乏
+ 聽 聽 聽 聽 聽 },
+ 聽 聽 聽 聽 聽 splitLine: {
+ 聽 聽 聽 聽 聽 聽 // 缃戞牸绾�
+ 聽 聽 聽 聽 聽 聽 show: true,
+ 聽 聽 聽 聽 聽 聽 lineStyle: { //鍒嗗壊绾�
+ 聽 聽 聽 聽 聽 聽 聽 color: "rgb(30, 144, 255)",
+ 聽 聽 聽 聽 聽 聽 聽 width: 1,
+ 聽 聽 聽 聽 聽 聽 聽 type: "dashed" //dotted锛氳櫄绾� solid:瀹炵嚎
+ 聽 聽 聽 聽 聽 聽 }
+ 聽 聽 聽 聽 聽 },
+ 聽 聽 聽 聽 聽 axisLabel: {
+ 聽 聽 聽 聽 聽 聽 // 杞存枃瀛�
+ 聽 聽 聽 聽 聽 聽 color: "rgb(30, 144, 255)",
+ 聽 聽 聽 聽 聽 聽 fontSize: 12,
+ 聽 聽 聽 聽 聽 },
+ 聽 聽 聽 聽 },
+
+ 聽 聽 聽 ],
+ 聽 聽 聽 series: [
+ 聽 聽 聽 聽 {
+ 聽 聽 聽 聽 聽 name: '鐢佃��',
+ 聽 聽 聽 聽 聽 type: 'bar',
+ 聽 聽 聽 聽 聽 barWidth: '80%',
+ 聽 聽 聽 聽 聽 data: datas,
+ 聽 聽 聽 聽 聽 itemStyle: { color: 'rgb(30, 144, 255)' }
+ 聽 聽 聽 聽 },
+
+ 聽 聽 聽 ]
+ 聽 聽 };
+
+ 聽 聽 option && myChart.setOption(option);
+ 聽 }
+ </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/gmms/WebContent/ganhuaxiapian/ganghuaxiapian.jsp b/gmms/WebContent/ganhuaxiapian/ganghuaxiapian.jsp
index fdba266..99dc288 100644
--- a/gmms/WebContent/ganhuaxiapian/ganghuaxiapian.jsp
+++ b/gmms/WebContent/ganhuaxiapian/ganghuaxiapian.jsp
@@ -1,485 +1,485 @@
-<%@ page contentType="text/html;charset=UTF-8"%>
-<!DOCTYPE html>
-<html>
-<head>
-<meta charset="utf-8">
-<title>閽㈠寲涓嬬墖</title>
-
-<link rel="stylesheet" href="../js/bootstrap.min.css">
-<script src="../js/jquery-3.4.1.min.js"></script>
-<script src="../js/popper.min.js"></script>
-<script src="../js/bootstrap.min.js"></script>
-<script src="../js/echarts.min.js"></script>
-<script src="../js/static/js/vue.js"></script>
-<script src="../js/axios.min.js"></script>
-<script src="../js/mixins.js"></script>
-
-
-
-
-<style>
-html, body {
- height: 100%;
- width: 100%;
-}
-
-.table td, .table th {
- font-size: 14px;
- vertical-align: middle;
-}
-
-body {
- background-color: #D5EAFF;
- overflow-x: hidden;
- overflow-y: hidden;
-}
-
-.table {
- margin: 0 auto;
-}
-
-.container-fluid {
- min-height: 100%;
-}
-
-td img {
- transition: all .2s ease-in-out; /* 娣诲姞娓愬彉鏁堟灉 */
-}
-
-td.zoom {
- z-index: 1; /* 瀹氫箟鍙犳斁椤哄簭 */
- position: relative; /* 瀹氫綅鏂瑰紡 */
-}
-
-td.zoom img:hover {
- transform: scale(2.8); /* 鏀惧ぇ鍥剧墖 */
-}
-
-.row {
- margin-top: 20px;
-}
-
-#container, #container2 {
- height: 400px;
- width: 50%;
- margin-top: 20px;
-}
-</style>
-</head>
-<body>
- <div="container-fluid">
-
-
- <div id="app2">
- <div class="row">
- <div class="col-lg-12">
- <table class="table table-striped table-bordered">
- <thead>
- <tr>
- <th>璁㈠崟鍙�</th>
- <th>浜у搧鏁版嵁鍥剧墖</th>
- <th>鍔犲伐杩涘害</th>
- <th>宸插姞宸ユ暟閲�</th>
- <th>寰呭姞宸ユ暟閲�</th>
- <th>鐮存崯鏁伴噺</th>
- <th>鐩撮�氱巼</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>{{ order.orderId }}</td>
- <td>
- <img :src="order.imageSrc" alt="Image" @mouseover="zoomIn($event)"
- @mouseout="zoomOut($event)" style="width: 60%; height: 100px; background-position: 50%;">
- </td>
- <td>
- <div class="progress">
- <div class="progress-bar" role="progressbar"
- :style="{ width: order.progress + '%' }"
- :aria-valuenow="order.progress" aria-valuemin="0" aria-valuemax="100">{{ order.progress }}%
- </div>
- </div>
- </td>
- <td>{{ order.processed }}</td>
- <td>{{ order.pending }}</td>
- <td>{{ order.damaged }}</td>
- <td>{{ order.passRate }}</td>
- </tr>
- </tbody>
- </table>
- </div>
- </div>
-
- <div class="row">
- <div class="col-lg-6" style="height: 100%;">
- <table class="table table-striped table-bordered">
- <thead>
- <tr>
- <th>璁㈠崟鍙�</th>
- <th>鍔犲伐鐘舵��</th>
- <th>鍔犲伐杩涘害</th>
- <th>浜у搧鍥剧墖</th>
- <th>寤虹珛鏃堕棿</th>
-
- </tr>
- </thead>
- <tbody>
- <tr v-for="item in orders" :key="item.orderId">
- <td>{{ item.orderId }}</td>
- <td>{{ item.processStatus }}</td>
- <td>
- <div class="progress">
- <div class="progress-bar" role="progressbar"
- :style="{ width: item.progress + '%' }"
- :aria-valuenow="item.progress" aria-valuemin="0"
- aria-valuemax="100">{{ item.progress }}%</div>
- </div>
- </td>
- <td><img
- style="width: 80%; height: 30px; background-position: 50%;"
- :src="item.deviceImage" alt="Image" @mouseover="zoomIn2($event)"
- @mouseout="zoomOut2($event)" /></td>
- <td>{{ item.jianlitime }}</td>
- </tr>
- </tbody>
- </table>
- </div>
-
- <div class="col-lg-6" style="height: 100%;">
- <div class="col-lg-24" >
- <div class="row">
- <div class="col-md-4">
- <label for="start-date" style="font-size: 16px;">璧峰鏃ユ湡</label> <input
- type="date" class="form-control" id="start-date">
- </div>
- <div class="col-md-4">
- <label for="end-date" style="font-size: 16px;">鎴鏃ユ湡</label> <input
- type="date" class="form-control" id="end-date">
- </div>
- <div class="col-md-4">
- <br>
- <button class="btn btn-primary" id="filter-btn"
- style="font-size: 12px;">绛涢��</button>
- </div>
- </div>
- </div>
- <div id="container" style="height: 200%; width: 100%;"></div>
- <div id="container2"
- style="height: 200%; width: 100%; margin-top: 1%;"></div>
- </div>
- </div>
- </div>
-
-
- </div>
-
-
-
-
- <script>
-
-
-let app2 = new Vue({
- el: '#app2',
- data() {
- return {
- order: {
- orderId: 'NG2302020101',
- imageSrc: '鏁版嵁鍥�.png',
- progress: 100,
- processed: 10,
- pending: 5,
- damaged: 1,
- passRate: '100%',
- },
- orders: [
-{
- orderId: 'NG2302020201',
- processStatus: '杩涜涓�',
- progress: 70,
- deviceImage: '鏁版嵁鍥�.png',
- jianlitime:"2023-07-01",
- },
- {
- orderId: 'NG2302020202',
- processStatus: '宸插畬鎴�',
- progress: 100,
- deviceImage: '鏁版嵁鍥�.png',
- jianlitime:"2023-07-01",
- },
- {
- orderId: 'NG2302020203',
- processStatus: '鏈紑濮�',
- progress: 0,
- deviceImage: '鏁版嵁鍥�.png',
- jianlitime:"2023-07-01",
- },
- {
- orderId: 'NG2302020204',
- processStatus: '鏈紑濮�',
- progress: 0,
- deviceImage: '鏁版嵁鍥�.png',
- jianlitime:"2023-07-01",
- },
- {
- orderId: 'NG2302020205',
- processStatus: '鏈紑濮�',
- progress: 0,
- deviceImage: '鏁版嵁鍥�.png',
- jianlitime:"2023-07-01",
- },
- {
- orderId: 'NG2302020206',
- processStatus: '鏈紑濮�',
- progress: 0,
- deviceImage: '鏁版嵁鍥�.png',
- jianlitime:"2023-07-01",
- },
- ],
- };
- },
- methods: {
- zoomIn(event) {
- event.target.style.transform = 'scale(2.2)';
- },
- zoomOut(event) {
- event.target.style.transform = 'scale(1)';
- },
- zoomIn2(event) {
- event.target.style.transform = 'scale(6.2)';
- },
- zoomOut2(event) {
- event.target.style.transform = 'scale(1)';
- },
- }
- });
-
-/* function zoomIn(element) {
- element.classList.add("zoom");
- }
-
- function zoomOut(element) {
- element.classList.remove("zoom");
- } */
-
- var dom = document.getElementById('container');
- var myChart = echarts.init(dom, null, {
- renderer: 'canvas',
- useDirtyRect: false
- });
-
- var dom2 = document.getElementById('container2');
- var myChart2 = echarts.init(dom2, null, {
- renderer: 'canvas',
- useDirtyRect: false
- });
-
-
-
- var data = [{
- date: '2023-07-20',
- waterUsage: 10,
- electricityUsage: 5
- },
- {
- date: '2023-07-21',
- waterUsage: 52,
- electricityUsage: 26
- },
- {
- date: '2023-07-22',
- waterUsage: 200,
- electricityUsage: 100
- },
- {
- date: '2023-07-23',
- waterUsage: 334,
- electricityUsage: 167
- },
- {
- date: '2023-07-24',
- waterUsage: 390,
- electricityUsage: 195
- },
- {
- date: '2023-07-25',
- waterUsage: 330,
- electricityUsage: 165
- },
- {
- date: '2023-07-26',
- waterUsage: 390,
- electricityUsage: 195
- },
- {
- date: '2023-07-27',
- waterUsage: 330,
- electricityUsage: 165
- }
- ];
-
- var startInput = document.getElementById('start-date');
- var endInput = document.getElementById('end-date');
- var filterBtn = document.getElementById('filter-btn');
-
- function filterData() {
- var filteredData = [];
- var startDate = new Date(startInput.value);
- var endDate = new Date(endInput.value);
-
- data.forEach(function (item) {
- var itemDate = new Date(item.date);
- if (itemDate >= startDate && itemDate <= endDate) {
- filteredData.push(item);
- }
- });
-
- renderChart(filteredData);
- }
-
- filterBtn.addEventListener('click', filterData);
-
- function renderChart(data) {
- var option;
-
- // 绗竴涓煴褰㈠浘锛堟按鑰楋級
- option = {
- title: {
- text: '閽㈠寲涓嬬墖姘磋��',
- left: 'center',
- subtext: ''
- },
- toolbox: {
- show: true,
- feature: {
- dataView: {
- show: true,
- readOnly: true
- },
- saveAsImage: {
- show: true
- }
- }
- },
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: ''
- },
- formatter: function (params) {
- var date = params[0].name;
- var waterUsage = params[0].value;
- return date + '<br/>' + '姘磋��: ' + waterUsage + ' m鲁';
- }
- },
- grid: {
- left: '3%',
- right: '4%',
- bottom: '3%',
- containLabel: true
- },
- xAxis: [{
- type: 'category',
- data: data.map(function (item) {
- return item.date;
- }),
- axisTick: {
- alignWithLabel: true
- },
- axisLabel: {
- fontSize: 12
- }
- }],
- yAxis: [{
- type: 'value',
- name: '姘磋��(m鲁)'
- }],
- series: [{
- name: '姘磋��',
- type: 'bar',
- data: data.map(function (item) {
- return item.waterUsage;
- }),
- itemStyle: {
- color: '#00ff00' // 璁剧疆鏌卞舰鍥剧殑棰滆壊涓虹豢鑹�
- }
-
-
- }]
- };
-
- // 绗簩涓煴褰㈠浘锛堢數鑰楋級
- var option2 = {
- title: {
- text: '閽㈠寲涓嬬墖鐢佃��',
- left: 'center',
- subtext: ''
- },
- toolbox: {
- show: true,
- feature: {
- dataView: {
- show: true,
- readOnly: true
-
- },
- saveAsImage: {
- show: true
- }
- }
- },
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: ''
- },
- formatter: function (params) {
- var date = params[0].name;
- var electricityUsage = params[0].value;
- return date + '<br/>' + '鐢佃��: ' + electricityUsage + ' kWh';
- }
- },
- grid: {
- left: '3%',
- right: '4%',
- bottom: '3%',
- containLabel: true
- },
- xAxis: [{
- type: 'category',
- data: data.map(function (item) {
- return item.date;
- }),
- axisTick: {
- alignWithLabel: true
- },
- axisLabel: {
- fontSize: 12
- }
- }],
- yAxis: [{
- type: 'value',
- name: '鐢佃��(kWh)'
- }],
- series: [{
- name: '鐢佃��',
- type: 'bar',
- data: data.map(function (item) {
- return item.electricityUsage;
- })
- }]
- };
-
- myChart.setOption(option);
- myChart2.setOption(option2);
- }
- startInput.value = data[0].date;
- endInput.value = data[data.length - 1].date;
- renderChart(data);
-
-
-
-
- </script>
-</body>
+<%@ page contentType="text/html;charset=UTF-8"%>
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>閽㈠寲涓嬬墖</title>
+
+<link rel="stylesheet" href="../js/bootstrap.min.css">
+<script src="../js/jquery-3.4.1.min.js"></script>
+<script src="../js/popper.min.js"></script>
+<script src="../js/bootstrap.min.js"></script>
+<script src="../js/echarts.min.js"></script>
+<script src="../js/static/js/vue.js"></script>
+<script src="../js/axios.min.js"></script>
+<script src="../js/mixins.js"></script>
+
+
+
+
+<style>
+html, body {
+ height: 100%;
+ width: 100%;
+}
+
+.table td, .table th {
+ font-size: 14px;
+ vertical-align: middle;
+}
+
+body {
+ background-color: #D5EAFF;
+ overflow-x: hidden;
+ overflow-y: hidden;
+}
+
+.table {
+ margin: 0 auto;
+}
+
+.container-fluid {
+ min-height: 100%;
+}
+
+td img {
+ transition: all .2s ease-in-out; /* 娣诲姞娓愬彉鏁堟灉 */
+}
+
+td.zoom {
+ z-index: 1; /* 瀹氫箟鍙犳斁椤哄簭 */
+ position: relative; /* 瀹氫綅鏂瑰紡 */
+}
+
+td.zoom img:hover {
+ transform: scale(2.8); /* 鏀惧ぇ鍥剧墖 */
+}
+
+.row {
+ margin-top: 20px;
+}
+
+#container, #container2 {
+ height: 400px;
+ width: 50%;
+ margin-top: 20px;
+}
+</style>
+</head>
+<body>
+ <div="container-fluid">
+
+
+ <div id="app2">
+ <div class="row">
+ <div class="col-lg-12">
+ <table class="table table-striped table-bordered">
+ <thead>
+ <tr>
+ <th>璁㈠崟鍙�</th>
+ <th>浜у搧鏁版嵁鍥剧墖</th>
+ <th>鍔犲伐杩涘害</th>
+ <th>宸插姞宸ユ暟閲�</th>
+ <th>寰呭姞宸ユ暟閲�</th>
+ <th>鐮存崯鏁伴噺</th>
+ <th>鐩撮�氱巼</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>{{ order.orderId }}</td>
+ <td>
+ <img :src="order.imageSrc" alt="Image" @mouseover="zoomIn($event)"
+ @mouseout="zoomOut($event)" style="width: 60%; height: 100px; background-position: 50%;">
+ </td>
+ <td>
+ <div class="progress">
+ <div class="progress-bar" role="progressbar"
+ :style="{ width: order.progress + '%' }"
+ :aria-valuenow="order.progress" aria-valuemin="0" aria-valuemax="100">{{ order.progress }}%
+ </div>
+ </div>
+ </td>
+ <td>{{ order.processed }}</td>
+ <td>{{ order.pending }}</td>
+ <td>{{ order.damaged }}</td>
+ <td>{{ order.passRate }}</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+
+ <div class="row">
+ <div class="col-lg-6" style="height: 100%;">
+ <table class="table table-striped table-bordered">
+ <thead>
+ <tr>
+ <th>璁㈠崟鍙�</th>
+ <th>鍔犲伐鐘舵��</th>
+ <th>鍔犲伐杩涘害</th>
+ <th>浜у搧鍥剧墖</th>
+ <th>寤虹珛鏃堕棿</th>
+
+ </tr>
+ </thead>
+ <tbody>
+ <tr v-for="item in orders" :key="item.orderId">
+ <td>{{ item.orderId }}</td>
+ <td>{{ item.processStatus }}</td>
+ <td>
+ <div class="progress">
+ <div class="progress-bar" role="progressbar"
+ :style="{ width: item.progress + '%' }"
+ :aria-valuenow="item.progress" aria-valuemin="0"
+ aria-valuemax="100">{{ item.progress }}%</div>
+ </div>
+ </td>
+ <td><img
+ style="width: 80%; height: 30px; background-position: 50%;"
+ :src="item.deviceImage" alt="Image" @mouseover="zoomIn2($event)"
+ @mouseout="zoomOut2($event)" /></td>
+ <td>{{ item.jianlitime }}</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+
+ <div class="col-lg-6" style="height: 100%;">
+ <div class="col-lg-24" >
+ <div class="row">
+ <div class="col-md-4">
+ <label for="start-date" style="font-size: 16px;">璧峰鏃ユ湡</label> <input
+ type="date" class="form-control" id="start-date">
+ </div>
+ <div class="col-md-4">
+ <label for="end-date" style="font-size: 16px;">鎴鏃ユ湡</label> <input
+ type="date" class="form-control" id="end-date">
+ </div>
+ <div class="col-md-4">
+ <br>
+ <button class="btn btn-primary" id="filter-btn"
+ style="font-size: 12px;">绛涢��</button>
+ </div>
+ </div>
+ </div>
+ <div id="container" style="height: 200%; width: 100%;"></div>
+ <div id="container2"
+ style="height: 200%; width: 100%; margin-top: 1%;"></div>
+ </div>
+ </div>
+ </div>
+
+
+ </div>
+
+
+
+
+ <script>
+
+
+let app2 = new Vue({
+ el: '#app2',
+ data() {
+ return {
+ order: {
+ orderId: 'NG2302020101',
+ imageSrc: '鏁版嵁鍥�.png',
+ progress: 100,
+ processed: 10,
+ pending: 5,
+ damaged: 1,
+ passRate: '100%',
+ },
+ orders: [
+{
+ orderId: 'NG2302020201',
+ processStatus: '杩涜涓�',
+ progress: 70,
+ deviceImage: '鏁版嵁鍥�.png',
+ jianlitime:"2023-07-01",
+ },
+ {
+ orderId: 'NG2302020202',
+ processStatus: '宸插畬鎴�',
+ progress: 100,
+ deviceImage: '鏁版嵁鍥�.png',
+ jianlitime:"2023-07-01",
+ },
+ {
+ orderId: 'NG2302020203',
+ processStatus: '鏈紑濮�',
+ progress: 0,
+ deviceImage: '鏁版嵁鍥�.png',
+ jianlitime:"2023-07-01",
+ },
+ {
+ orderId: 'NG2302020204',
+ processStatus: '鏈紑濮�',
+ progress: 0,
+ deviceImage: '鏁版嵁鍥�.png',
+ jianlitime:"2023-07-01",
+ },
+ {
+ orderId: 'NG2302020205',
+ processStatus: '鏈紑濮�',
+ progress: 0,
+ deviceImage: '鏁版嵁鍥�.png',
+ jianlitime:"2023-07-01",
+ },
+ {
+ orderId: 'NG2302020206',
+ processStatus: '鏈紑濮�',
+ progress: 0,
+ deviceImage: '鏁版嵁鍥�.png',
+ jianlitime:"2023-07-01",
+ },
+ ],
+ };
+ },
+ methods: {
+ zoomIn(event) {
+ event.target.style.transform = 'scale(2.2)';
+ },
+ zoomOut(event) {
+ event.target.style.transform = 'scale(1)';
+ },
+ zoomIn2(event) {
+ event.target.style.transform = 'scale(6.2)';
+ },
+ zoomOut2(event) {
+ event.target.style.transform = 'scale(1)';
+ },
+ }
+ });
+
+/* function zoomIn(element) {
+ element.classList.add("zoom");
+ }
+
+ function zoomOut(element) {
+ element.classList.remove("zoom");
+ } */
+
+ var dom = document.getElementById('container');
+ var myChart = echarts.init(dom, null, {
+ renderer: 'canvas',
+ useDirtyRect: false
+ });
+
+ var dom2 = document.getElementById('container2');
+ var myChart2 = echarts.init(dom2, null, {
+ renderer: 'canvas',
+ useDirtyRect: false
+ });
+
+
+
+ var data = [{
+ date: '2023-07-20',
+ waterUsage: 10,
+ electricityUsage: 5
+ },
+ {
+ date: '2023-07-21',
+ waterUsage: 52,
+ electricityUsage: 26
+ },
+ {
+ date: '2023-07-22',
+ waterUsage: 200,
+ electricityUsage: 100
+ },
+ {
+ date: '2023-07-23',
+ waterUsage: 334,
+ electricityUsage: 167
+ },
+ {
+ date: '2023-07-24',
+ waterUsage: 390,
+ electricityUsage: 195
+ },
+ {
+ date: '2023-07-25',
+ waterUsage: 330,
+ electricityUsage: 165
+ },
+ {
+ date: '2023-07-26',
+ waterUsage: 390,
+ electricityUsage: 195
+ },
+ {
+ date: '2023-07-27',
+ waterUsage: 330,
+ electricityUsage: 165
+ }
+ ];
+
+ var startInput = document.getElementById('start-date');
+ var endInput = document.getElementById('end-date');
+ var filterBtn = document.getElementById('filter-btn');
+
+ function filterData() {
+ var filteredData = [];
+ var startDate = new Date(startInput.value);
+ var endDate = new Date(endInput.value);
+
+ data.forEach(function (item) {
+ var itemDate = new Date(item.date);
+ if (itemDate >= startDate && itemDate <= endDate) {
+ filteredData.push(item);
+ }
+ });
+
+ renderChart(filteredData);
+ }
+
+ filterBtn.addEventListener('click', filterData);
+
+ function renderChart(data) {
+ var option;
+
+ // 绗竴涓煴褰㈠浘锛堟按鑰楋級
+ option = {
+ title: {
+ text: '閽㈠寲涓嬬墖姘磋��',
+ left: 'center',
+ subtext: ''
+ },
+ toolbox: {
+ show: true,
+ feature: {
+ dataView: {
+ show: true,
+ readOnly: true
+ },
+ saveAsImage: {
+ show: true
+ }
+ }
+ },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: ''
+ },
+ formatter: function (params) {
+ var date = params[0].name;
+ var waterUsage = params[0].value;
+ return date + '<br/>' + '姘磋��: ' + waterUsage + ' m鲁';
+ }
+ },
+ grid: {
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
+ containLabel: true
+ },
+ xAxis: [{
+ type: 'category',
+ data: data.map(function (item) {
+ return item.date;
+ }),
+ axisTick: {
+ alignWithLabel: true
+ },
+ axisLabel: {
+ fontSize: 12
+ }
+ }],
+ yAxis: [{
+ type: 'value',
+ name: '姘磋��(m鲁)'
+ }],
+ series: [{
+ name: '姘磋��',
+ type: 'bar',
+ data: data.map(function (item) {
+ return item.waterUsage;
+ }),
+ itemStyle: {
+ color: '#00ff00' // 璁剧疆鏌卞舰鍥剧殑棰滆壊涓虹豢鑹�
+ }
+
+
+ }]
+ };
+
+ // 绗簩涓煴褰㈠浘锛堢數鑰楋級
+ var option2 = {
+ title: {
+ text: '閽㈠寲涓嬬墖鐢佃��',
+ left: 'center',
+ subtext: ''
+ },
+ toolbox: {
+ show: true,
+ feature: {
+ dataView: {
+ show: true,
+ readOnly: true
+
+ },
+ saveAsImage: {
+ show: true
+ }
+ }
+ },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: ''
+ },
+ formatter: function (params) {
+ var date = params[0].name;
+ var electricityUsage = params[0].value;
+ return date + '<br/>' + '鐢佃��: ' + electricityUsage + ' kWh';
+ }
+ },
+ grid: {
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
+ containLabel: true
+ },
+ xAxis: [{
+ type: 'category',
+ data: data.map(function (item) {
+ return item.date;
+ }),
+ axisTick: {
+ alignWithLabel: true
+ },
+ axisLabel: {
+ fontSize: 12
+ }
+ }],
+ yAxis: [{
+ type: 'value',
+ name: '鐢佃��(kWh)'
+ }],
+ series: [{
+ name: '鐢佃��',
+ type: 'bar',
+ data: data.map(function (item) {
+ return item.electricityUsage;
+ })
+ }]
+ };
+
+ myChart.setOption(option);
+ myChart2.setOption(option2);
+ }
+ startInput.value = data[0].date;
+ endInput.value = data[data.length - 1].date;
+ renderChart(data);
+
+
+
+
+ </script>
+</body>
</html>
\ No newline at end of file
diff --git a/gmms/WebContent/mysqlInsert/toPlc.jsp b/gmms/WebContent/mysqlInsert/toPlc.jsp
index b091225..eea7076 100644
--- a/gmms/WebContent/mysqlInsert/toPlc.jsp
+++ b/gmms/WebContent/mysqlInsert/toPlc.jsp
@@ -1,6 +1,11 @@
<%@page import="builder.Manager"%>
<%
+<<<<<<< HEAD
+
+Manager.sendtoPLC(76,20,4,new byte[]{0,1,0,1},0);
+Manager.sendtoPLC(77,20,4,new byte[]{0,1,0,1},0);
+=======
String zt=request.getParameter("zt");
String peifanhao=request.getParameter("peifanhao");
@@ -14,5 +19,6 @@
}else if(zts==3){
Manager.sendtoPLC(76,20,4,new byte[]{0,0,0,0},0);
}
+>>>>>>> 09a05342f4c60c834c3ee17a13529cd91c624f34
%>
\ No newline at end of file
diff --git a/gmms/WebContent/tiemotaizu/tiemotaizu.jsp b/gmms/WebContent/tiemotaizu/tiemotaizu.jsp
index 00e8fca..e0a1608 100644
--- a/gmms/WebContent/tiemotaizu/tiemotaizu.jsp
+++ b/gmms/WebContent/tiemotaizu/tiemotaizu.jsp
@@ -1,518 +1,518 @@
-<%@page import="ng.db.DBHelper"%>
-<%@ page language="java" contentType="text/html; charset=utf-8"
- pageEncoding="utf-8"%>
-<c:set var="ctx" value="${pageContext.request.contextPath}" />
-<title>璐磋啘鍙扮粍</title>
-
-<link rel="stylesheet" href="../js/bootstrap.min.css">
-<script src="../js/jquery-3.4.1.min.js"></script>
-<script src="../js/popper.min.js"></script>
-<script src="../js/bootstrap.min.js"></script>
-<script src="../js/echarts.min.js"></script>
-
-
-
- <script src="../js/static/js/vue.js"></script>
- <script src="../js/axios.min.js"></script>
- <script src="../js/mixins.js"></script>
-
-
-
-
-<style>
-html, body {
- height: 100%;
- width: 100%;
-}
-
-.table td, .table th {
- font-size: 14px;
- vertical-align: middle;
-}
-
-body {
- background-color: #D5EAFF;
- overflow-x: hidden;
- overflow-y: hidden;
-}
-
-.table {
- margin: 0 auto;
-}
-
-.container-fluid {
- min-height: 100%;
-}
-
-td img {
- transition: all .2s ease-in-out; /* 娣诲姞娓愬彉鏁堟灉 */
-}
-
-td.zoom {
- z-index: 1; /* 瀹氫箟鍙犳斁椤哄簭 */
- position: relative; /* 瀹氫綅鏂瑰紡 */
-}
-
-td.zoom img:hover {
- transform: scale(2.8); /* 鏀惧ぇ鍥剧墖 */
-}
-
-.row {
- margin-top: 20px;
-}
-
-
-</style>
-</head>
-<body>
- <div="container-fluid">
-
-
- <div id="app2">
- <div class="row">
- <div class="col-lg-12">
- <table class="table table-striped table-bordered">
- <thead>
- <tr>
- <th>璁㈠崟鍙�</th>
- <th>浜у搧鏁版嵁鍥剧墖</th>
- <th>宸插姞宸ユ暟閲�</th>
- <th>寰呭姞宸ユ暟閲�</th>
- <th>鐮存崯鏁伴噺</th>
- <th>鐩撮�氱巼</th>
- <th style='width:140px;'>鑰楁潗鏈鏇存柊鏃堕棿</th>
- <th style='width:120px;'>鏇存柊鍛ㄦ湡鏃堕棿</th>
- <th style='width:180px;'>鑰楁潗鏇存崲鍊掕鏃堕棿</th>
- <th>鏇存柊</th>
- </tr>
- </thead>
- <tbody>
- <tr v-for="order in orders" :key="order.orderNo">
- <td>{{ order.orderNo }}</td>
- <td>
- <img :src="order.imageSrc" alt="Image" @mouseover="zoomIn($event)"
- @mouseout="zoomOut($event)" style="width: 60%; height: 100px; background-position: 50%;">
- </td>
- <td>{{ order.processedQty }}</td>
- <td>{{ order.pendingQty }}</td>
- <td>{{ order.damagedQty }}</td>
- <td>{{ order.passRate }}</td>
- <td>{{ order.updateTime }}</td>
- <td>{{ order.updateCycle }}</td>
- <td>{{ order.countdown }}</td>
- <td>
- <button class="btn btn-primary" @click="showModal()">鏇存柊</button>
- </td>
- </tr>
- </tbody>
- </table>
- </div>
-</div>
-
-
-
- <div class="row">
- <div class="col-lg-6" style="height: 100%;">
- <table class="table table-striped table-bordered">
- <thead>
- <tr>
- <th>璁㈠崟鍙�</th>
- <th>鍔犲伐鐘舵��</th>
- <th>鍔犲伐杩涘害</th>
- <th>浜у搧鍥剧墖</th>
- <th>寤虹珛鏃ユ湡</th>
- </tr>
- </thead>
- <tbody>
- <tr v-for="item in orders2" :key="item.orderId">
- <td>{{ item.orderId }}</td>
- <td>{{ item.processStatus }}</td>
- <td>
- <div class="progress">
- <div class="progress-bar" role="progressbar"
- :style="{ width: item.progress + '%' }"
- :aria-valuenow="item.progress" aria-valuemin="0"
- aria-valuemax="100">{{ item.progress }}%</div>
- </div>
- </td>
- <td><img
- style="width: 80%; height: 30px; background-position: 50%;"
- :src="item.deviceImage" alt="Image" @mouseover="zoomIn2($event)"
- @mouseout="zoomOut($event)" /></td>
- <td>{{ item.jianlitime }}</td>
- </tr>
- </tbody>
- </table>
- </div>
-
- <div class="col-lg-6" style="height: 100%;">
- <div class="col-lg-24" >
- <div class="row">
- <div class="col-md-4">
- <label for="start-date" style="font-size: 16px;">璧峰鏃ユ湡</label> <input
- type="date" class="form-control" id="start-date">
- </div>
- <div class="col-md-4">
- <label for="end-date" style="font-size: 16px;">鎴鏃ユ湡</label> <input
- type="date" class="form-control" id="end-date">
- </div>
- <div class="col-md-4">
- <br>
- <button class="btn btn-primary" id="filter-btn"
- style="font-size: 12px;">绛涢��</button>
- </div>
- </div>
- </div>
- <div id="container" style="height: 200%; width: 100%;"></div>
- <div id="container2"
- style="height: 200%; width: 100%; margin-top: 1%;"></div>
- </div>
- </div>
- </div>
-
-
- <!-- <div id="container" ></div> -->
-
-
- </div>
-
-
-
-
- <script>
- Vue.prototype.$http= axios
-
-
-let app2 = new Vue({
- el: '#app2',
- mixins:[mixin],
- data() {
- return {
- orders2: [
-{
- orderId: 'NG2302020201',
- processStatus: '杩涜涓�',
- progress: 70,
- deviceImage: '鏁版嵁鍥�.png',
- jianlitime:"2023-07-01",
- },
- {
- orderId: 'NG2302020202',
- processStatus: '宸插畬鎴�',
- progress: 100,
- deviceImage: '鏁版嵁鍥�.png',
- jianlitime:"2023-07-01",
- },
- {
- orderId: 'NG2302020203',
- processStatus: '鏈紑濮�',
- progress: 0,
- deviceImage: '鏁版嵁鍥�.png',
- jianlitime:"2023-07-01",
- },
- {
- orderId: 'NG2302020204',
- processStatus: '鏈紑濮�',
- progress: 0,
- deviceImage: '鏁版嵁鍥�.png',
- jianlitime:"2023-07-01",
- },
- {
- orderId: 'NG2302020205',
- processStatus: '鏈紑濮�',
- progress: 0,
- deviceImage: '鏁版嵁鍥�.png',
- jianlitime:"2023-07-01",
- },
- {
- orderId: 'NG2302020206',
- processStatus: '鏈紑濮�',
- progress: 0,
- deviceImage: '鏁版嵁鍥�.png',
- jianlitime:"2023-07-01",
- },
- ],
-
- orders: [
- {
- orderNo: 'NG2302020101',
- imageSrc: '鏁版嵁鍥�.png',
- processedQty: 10,
- pendingQty: 5,
- damagedQty: 1,
- passRate: '100%',
- updateTime: '23:44',
- updateCycle: '5',
- countdown: ''
- }
- ]
- };
-
- },
-
-
-
- methods: {
-
- zoomIn(event) {
- event.target.style.transform = 'scale(2.2)';
- },
- zoomOut(event) {
- event.target.style.transform = 'scale(1)';
- },
- zoomIn2(event) {
- event.target.style.transform = 'scale(6.2)';
- },
-
-
-
- startCountdown() {
- setInterval(() => {
- this.orders2.forEach(order => {
- if (order.countdown > 0) {
- order.countdown--;
- } else {
- order.countdown = order.updateCycle * 60;
- }
- });
- }, 1000);
- }
- },
- mounted() {
- this.startCountdown();
-
- let sql="{call AXJ_dapingtiemodingdanchaxun()}"
- let flag=2;
-
- this.loadAjxs('璐磋啘璁㈠崟鍒濆鏌ヨ',sql,flag,"orders")
-
- }
- });
-
-
-
-/* function zoomIn(element) {
- element.classList.add("zoom");
- }
-
- function zoomOut(element) {
- element.classList.remove("zoom");
- } */
-
- var dom = document.getElementById('container');
- var myChart = echarts.init(dom, null, {
- renderer: 'canvas',
- useDirtyRect: false
- });
-
- var dom2 = document.getElementById('container2');
- var myChart2 = echarts.init(dom2, null, {
- renderer: 'canvas',
- useDirtyRect: false
- });
-
-
-
- var data = [{
- date: '2023-07-20',
- waterUsage: 10,
- electricityUsage: 5
- },
- {
- date: '2023-07-21',
- waterUsage: 52,
- electricityUsage: 26
- },
- {
- date: '2023-07-22',
- waterUsage: 200,
- electricityUsage: 100
- },
- {
- date: '2023-07-23',
- waterUsage: 334,
- electricityUsage: 167
- },
- {
- date: '2023-07-24',
- waterUsage: 390,
- electricityUsage: 195
- },
- {
- date: '2023-07-25',
- waterUsage: 330,
- electricityUsage: 165
- },
- {
- date: '2023-07-26',
- waterUsage: 390,
- electricityUsage: 195
- }
-
- ];
-
- var startInput = document.getElementById('start-date');
- var endInput = document.getElementById('end-date');
- var filterBtn = document.getElementById('filter-btn');
-
- function filterData() {
- var filteredData = [];
- var startDate = new Date(startInput.value);
- var endDate = new Date(endInput.value);
-
- data.forEach(function (item) {
- var itemDate = new Date(item.date);
- if (itemDate >= startDate && itemDate <= endDate) {
- filteredData.push(item);
- }
- });
-
- renderChart(filteredData);
- }
-
- filterBtn.addEventListener('click', filterData);
-
- function renderChart(data) {
- var option;
-
- // 绗竴涓煴褰㈠浘锛堟按鑰楋級
- option = {
- title: {
- text: '璐磋啘鍙扮粍姘磋��',
- left: 'center',
- subtext: ''
- },
- toolbox: {
- show: true,
- feature: {
- dataView: {
- show: true,
- readOnly: true
- },
- saveAsImage: {
- show: true
- }
- }
- },
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: ''
- },
- formatter: function (params) {
- var date = params[0].name;
- var waterUsage = params[0].value;
- return date + '<br/>' + '姘磋��: ' + waterUsage + ' m鲁';
- }
- },
- grid: {
- left: '3%',
- right: '4%',
- bottom: '3%',
- containLabel: true
- },
- xAxis: [{
- type: 'category',
- data: data.map(function (item) {
- return item.date;
- }),
- axisTick: {
- alignWithLabel: true
- },
- axisLabel: {
- fontSize: 12
- }
- }],
- yAxis: [{
- type: 'value',
- name: '姘磋��(m鲁)'
- }],
- series: [{
- name: '姘磋��',
- type: 'bar',
- data: data.map(function (item) {
- return item.waterUsage;
- }),
- itemStyle: {
- color: '#00ff00' // 璁剧疆鏌卞舰鍥剧殑棰滆壊涓虹豢鑹�
- }
-
-
- }]
- };
-
- // 绗簩涓煴褰㈠浘锛堢數鑰楋級
- var option2 = {
- title: {
- text: '璐磋啘鍙扮粍鐢佃��',
- left: 'center',
- subtext: ''
- },
- toolbox: {
- show: true,
- feature: {
- dataView: {
- show: true,
- readOnly: true
-
- },
- saveAsImage: {
- show: true
- }
- }
- },
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: ''
- },
- formatter: function (params) {
- var date = params[0].name;
- var electricityUsage = params[0].value;
- return date + '<br/>' + '鐢佃��: ' + electricityUsage + ' kWh';
- }
- },
- grid: {
- left: '3%',
- right: '4%',
- bottom: '3%',
- containLabel: true
- },
- xAxis: [{
- type: 'category',
- data: data.map(function (item) {
- return item.date;
- }),
- axisTick: {
- alignWithLabel: true
- },
- axisLabel: {
- fontSize: 12
- }
- }],
- yAxis: [{
- type: 'value',
- name: '鐢佃��(kWh)'
- }],
- series: [{
- name: '鐢佃��',
- type: 'bar',
- data: data.map(function (item) {
- return item.electricityUsage;
- })
- }]
- };
-
- myChart.setOption(option);
- myChart2.setOption(option2);
- }
- startInput.value = data[0].date;
- endInput.value = data[data.length - 1].date;
- renderChart(data);
-
-
-
-
- </script>
-</body>
+<%@page import="ng.db.DBHelper"%>
+<%@ page language="java" contentType="text/html; charset=utf-8"
+ pageEncoding="utf-8"%>
+<c:set var="ctx" value="${pageContext.request.contextPath}" />
+<title>璐磋啘鍙扮粍</title>
+
+<link rel="stylesheet" href="../js/bootstrap.min.css">
+<script src="../js/jquery-3.4.1.min.js"></script>
+<script src="../js/popper.min.js"></script>
+<script src="../js/bootstrap.min.js"></script>
+<script src="../js/echarts.min.js"></script>
+
+
+
+ <script src="../js/static/js/vue.js"></script>
+ <script src="../js/axios.min.js"></script>
+ <script src="../js/mixins.js"></script>
+
+
+
+
+<style>
+html, body {
+ height: 100%;
+ width: 100%;
+}
+
+.table td, .table th {
+ font-size: 14px;
+ vertical-align: middle;
+}
+
+body {
+ background-color: #D5EAFF;
+ overflow-x: hidden;
+ overflow-y: hidden;
+}
+
+.table {
+ margin: 0 auto;
+}
+
+.container-fluid {
+ min-height: 100%;
+}
+
+td img {
+ transition: all .2s ease-in-out; /* 娣诲姞娓愬彉鏁堟灉 */
+}
+
+td.zoom {
+ z-index: 1; /* 瀹氫箟鍙犳斁椤哄簭 */
+ position: relative; /* 瀹氫綅鏂瑰紡 */
+}
+
+td.zoom img:hover {
+ transform: scale(2.8); /* 鏀惧ぇ鍥剧墖 */
+}
+
+.row {
+ margin-top: 20px;
+}
+
+
+</style>
+</head>
+<body>
+ <div="container-fluid">
+
+
+ <div id="app2">
+ <div class="row">
+ <div class="col-lg-12">
+ <table class="table table-striped table-bordered">
+ <thead>
+ <tr>
+ <th>璁㈠崟鍙�</th>
+ <th>浜у搧鏁版嵁鍥剧墖</th>
+ <th>宸插姞宸ユ暟閲�</th>
+ <th>寰呭姞宸ユ暟閲�</th>
+ <th>鐮存崯鏁伴噺</th>
+ <th>鐩撮�氱巼</th>
+ <th style='width:140px;'>鑰楁潗鏈鏇存柊鏃堕棿</th>
+ <th style='width:120px;'>鏇存柊鍛ㄦ湡鏃堕棿</th>
+ <th style='width:180px;'>鑰楁潗鏇存崲鍊掕鏃堕棿</th>
+ <th>鏇存柊</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr v-for="order in orders" :key="order.orderNo">
+ <td>{{ order.orderNo }}</td>
+ <td>
+ <img :src="order.imageSrc" alt="Image" @mouseover="zoomIn($event)"
+ @mouseout="zoomOut($event)" style="width: 60%; height: 100px; background-position: 50%;">
+ </td>
+ <td>{{ order.processedQty }}</td>
+ <td>{{ order.pendingQty }}</td>
+ <td>{{ order.damagedQty }}</td>
+ <td>{{ order.passRate }}</td>
+ <td>{{ order.updateTime }}</td>
+ <td>{{ order.updateCycle }}</td>
+ <td>{{ order.countdown }}</td>
+ <td>
+ <button class="btn btn-primary" @click="showModal()">鏇存柊</button>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+</div>
+
+
+
+ <div class="row">
+ <div class="col-lg-6" style="height: 100%;">
+ <table class="table table-striped table-bordered">
+ <thead>
+ <tr>
+ <th>璁㈠崟鍙�</th>
+ <th>鍔犲伐鐘舵��</th>
+ <th>鍔犲伐杩涘害</th>
+ <th>浜у搧鍥剧墖</th>
+ <th>寤虹珛鏃ユ湡</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr v-for="item in orders2" :key="item.orderId">
+ <td>{{ item.orderId }}</td>
+ <td>{{ item.processStatus }}</td>
+ <td>
+ <div class="progress">
+ <div class="progress-bar" role="progressbar"
+ :style="{ width: item.progress + '%' }"
+ :aria-valuenow="item.progress" aria-valuemin="0"
+ aria-valuemax="100">{{ item.progress }}%</div>
+ </div>
+ </td>
+ <td><img
+ style="width: 80%; height: 30px; background-position: 50%;"
+ :src="item.deviceImage" alt="Image" @mouseover="zoomIn2($event)"
+ @mouseout="zoomOut($event)" /></td>
+ <td>{{ item.jianlitime }}</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+
+ <div class="col-lg-6" style="height: 100%;">
+ <div class="col-lg-24" >
+ <div class="row">
+ <div class="col-md-4">
+ <label for="start-date" style="font-size: 16px;">璧峰鏃ユ湡</label> <input
+ type="date" class="form-control" id="start-date">
+ </div>
+ <div class="col-md-4">
+ <label for="end-date" style="font-size: 16px;">鎴鏃ユ湡</label> <input
+ type="date" class="form-control" id="end-date">
+ </div>
+ <div class="col-md-4">
+ <br>
+ <button class="btn btn-primary" id="filter-btn"
+ style="font-size: 12px;">绛涢��</button>
+ </div>
+ </div>
+ </div>
+ <div id="container" style="height: 200%; width: 100%;"></div>
+ <div id="container2"
+ style="height: 200%; width: 100%; margin-top: 1%;"></div>
+ </div>
+ </div>
+ </div>
+
+
+ <!-- <div id="container" ></div> -->
+
+
+ </div>
+
+
+
+
+ <script>
+ Vue.prototype.$http= axios
+
+
+let app2 = new Vue({
+ el: '#app2',
+ mixins:[mixin],
+ data() {
+ return {
+ orders2: [
+{
+ orderId: 'NG2302020201',
+ processStatus: '杩涜涓�',
+ progress: 70,
+ deviceImage: '鏁版嵁鍥�.png',
+ jianlitime:"2023-07-01",
+ },
+ {
+ orderId: 'NG2302020202',
+ processStatus: '宸插畬鎴�',
+ progress: 100,
+ deviceImage: '鏁版嵁鍥�.png',
+ jianlitime:"2023-07-01",
+ },
+ {
+ orderId: 'NG2302020203',
+ processStatus: '鏈紑濮�',
+ progress: 0,
+ deviceImage: '鏁版嵁鍥�.png',
+ jianlitime:"2023-07-01",
+ },
+ {
+ orderId: 'NG2302020204',
+ processStatus: '鏈紑濮�',
+ progress: 0,
+ deviceImage: '鏁版嵁鍥�.png',
+ jianlitime:"2023-07-01",
+ },
+ {
+ orderId: 'NG2302020205',
+ processStatus: '鏈紑濮�',
+ progress: 0,
+ deviceImage: '鏁版嵁鍥�.png',
+ jianlitime:"2023-07-01",
+ },
+ {
+ orderId: 'NG2302020206',
+ processStatus: '鏈紑濮�',
+ progress: 0,
+ deviceImage: '鏁版嵁鍥�.png',
+ jianlitime:"2023-07-01",
+ },
+ ],
+
+ orders: [
+ {
+ orderNo: 'NG2302020101',
+ imageSrc: '鏁版嵁鍥�.png',
+ processedQty: 10,
+ pendingQty: 5,
+ damagedQty: 1,
+ passRate: '100%',
+ updateTime: '23:44',
+ updateCycle: '5',
+ countdown: ''
+ }
+ ]
+ };
+
+ },
+
+
+
+ methods: {
+
+ zoomIn(event) {
+ event.target.style.transform = 'scale(2.2)';
+ },
+ zoomOut(event) {
+ event.target.style.transform = 'scale(1)';
+ },
+ zoomIn2(event) {
+ event.target.style.transform = 'scale(6.2)';
+ },
+
+
+
+ startCountdown() {
+ setInterval(() => {
+ this.orders2.forEach(order => {
+ if (order.countdown > 0) {
+ order.countdown--;
+ } else {
+ order.countdown = order.updateCycle * 60;
+ }
+ });
+ }, 1000);
+ }
+ },
+ mounted() {
+ this.startCountdown();
+
+ let sql="{call AXJ_dapingtiemodingdanchaxun()}"
+ let flag=2;
+
+ this.loadAjxs('璐磋啘璁㈠崟鍒濆鏌ヨ',sql,flag,"orders")
+
+ }
+ });
+
+
+
+/* function zoomIn(element) {
+ element.classList.add("zoom");
+ }
+
+ function zoomOut(element) {
+ element.classList.remove("zoom");
+ } */
+
+ var dom = document.getElementById('container');
+ var myChart = echarts.init(dom, null, {
+ renderer: 'canvas',
+ useDirtyRect: false
+ });
+
+ var dom2 = document.getElementById('container2');
+ var myChart2 = echarts.init(dom2, null, {
+ renderer: 'canvas',
+ useDirtyRect: false
+ });
+
+
+
+ var data = [{
+ date: '2023-07-20',
+ waterUsage: 10,
+ electricityUsage: 5
+ },
+ {
+ date: '2023-07-21',
+ waterUsage: 52,
+ electricityUsage: 26
+ },
+ {
+ date: '2023-07-22',
+ waterUsage: 200,
+ electricityUsage: 100
+ },
+ {
+ date: '2023-07-23',
+ waterUsage: 334,
+ electricityUsage: 167
+ },
+ {
+ date: '2023-07-24',
+ waterUsage: 390,
+ electricityUsage: 195
+ },
+ {
+ date: '2023-07-25',
+ waterUsage: 330,
+ electricityUsage: 165
+ },
+ {
+ date: '2023-07-26',
+ waterUsage: 390,
+ electricityUsage: 195
+ }
+
+ ];
+
+ var startInput = document.getElementById('start-date');
+ var endInput = document.getElementById('end-date');
+ var filterBtn = document.getElementById('filter-btn');
+
+ function filterData() {
+ var filteredData = [];
+ var startDate = new Date(startInput.value);
+ var endDate = new Date(endInput.value);
+
+ data.forEach(function (item) {
+ var itemDate = new Date(item.date);
+ if (itemDate >= startDate && itemDate <= endDate) {
+ filteredData.push(item);
+ }
+ });
+
+ renderChart(filteredData);
+ }
+
+ filterBtn.addEventListener('click', filterData);
+
+ function renderChart(data) {
+ var option;
+
+ // 绗竴涓煴褰㈠浘锛堟按鑰楋級
+ option = {
+ title: {
+ text: '璐磋啘鍙扮粍姘磋��',
+ left: 'center',
+ subtext: ''
+ },
+ toolbox: {
+ show: true,
+ feature: {
+ dataView: {
+ show: true,
+ readOnly: true
+ },
+ saveAsImage: {
+ show: true
+ }
+ }
+ },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: ''
+ },
+ formatter: function (params) {
+ var date = params[0].name;
+ var waterUsage = params[0].value;
+ return date + '<br/>' + '姘磋��: ' + waterUsage + ' m鲁';
+ }
+ },
+ grid: {
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
+ containLabel: true
+ },
+ xAxis: [{
+ type: 'category',
+ data: data.map(function (item) {
+ return item.date;
+ }),
+ axisTick: {
+ alignWithLabel: true
+ },
+ axisLabel: {
+ fontSize: 12
+ }
+ }],
+ yAxis: [{
+ type: 'value',
+ name: '姘磋��(m鲁)'
+ }],
+ series: [{
+ name: '姘磋��',
+ type: 'bar',
+ data: data.map(function (item) {
+ return item.waterUsage;
+ }),
+ itemStyle: {
+ color: '#00ff00' // 璁剧疆鏌卞舰鍥剧殑棰滆壊涓虹豢鑹�
+ }
+
+
+ }]
+ };
+
+ // 绗簩涓煴褰㈠浘锛堢數鑰楋級
+ var option2 = {
+ title: {
+ text: '璐磋啘鍙扮粍鐢佃��',
+ left: 'center',
+ subtext: ''
+ },
+ toolbox: {
+ show: true,
+ feature: {
+ dataView: {
+ show: true,
+ readOnly: true
+
+ },
+ saveAsImage: {
+ show: true
+ }
+ }
+ },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: ''
+ },
+ formatter: function (params) {
+ var date = params[0].name;
+ var electricityUsage = params[0].value;
+ return date + '<br/>' + '鐢佃��: ' + electricityUsage + ' kWh';
+ }
+ },
+ grid: {
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
+ containLabel: true
+ },
+ xAxis: [{
+ type: 'category',
+ data: data.map(function (item) {
+ return item.date;
+ }),
+ axisTick: {
+ alignWithLabel: true
+ },
+ axisLabel: {
+ fontSize: 12
+ }
+ }],
+ yAxis: [{
+ type: 'value',
+ name: '鐢佃��(kWh)'
+ }],
+ series: [{
+ name: '鐢佃��',
+ type: 'bar',
+ data: data.map(function (item) {
+ return item.electricityUsage;
+ })
+ }]
+ };
+
+ myChart.setOption(option);
+ myChart2.setOption(option2);
+ }
+ startInput.value = data[0].date;
+ endInput.value = data[data.length - 1].date;
+ renderChart(data);
+
+
+
+
+ </script>
+</body>
</html>
\ No newline at end of file
--
Gitblit v1.8.0