513 lines
192 KiB
HTML
513 lines
192 KiB
HTML
|
|
<!DOCTYPE html>
|
||
|
|
<html lang="zh-CN">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>一期管芯库看板</title>
|
||
|
|
<!-- 内嵌 Select2 CSS -->
|
||
|
|
<style>
|
||
|
|
/* 把 select2.min.css 的内容放在这里 */
|
||
|
|
.select2-container{box-sizing:border-box;display:inline-block;margin:0;position:relative;vertical-align:middle}.select2-container .select2-selection--single{box-sizing:border-box;cursor:pointer;display:block;height:28px;user-select:none;-webkit-user-select:none}.select2-container .select2-selection--single .select2-selection__rendered{display:block;padding-left:8px;padding-right:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.select2-container .select2-selection--single .select2-selection__clear{background-color:transparent;border:none;font-size:1em}.select2-container[dir="rtl"] .select2-selection--single .select2-selection__rendered{padding-right:8px;padding-left:20px}.select2-container .select2-selection--multiple{box-sizing:border-box;cursor:pointer;display:block;min-height:32px;user-select:none;-webkit-user-select:none}.select2-container .select2-selection--multiple .select2-selection__rendered{display:inline;list-style:none;padding:0}.select2-container .select2-selection--multiple .select2-selection__clear{background-color:transparent;border:none;font-size:1em}.select2-container .select2-search--inline .select2-search__field{box-sizing:border-box;border:none;font-size:100%;margin-top:5px;margin-left:5px;padding:0;max-width:100%;resize:none;height:18px;vertical-align:bottom;font-family:sans-serif;overflow:hidden;word-break:keep-all}.select2-container .select2-search--inline .select2-search__field::-webkit-search-cancel-button{-webkit-appearance:none}.select2-dropdown{background-color:white;border:1px solid #aaa;border-radius:4px;box-sizing:border-box;display:block;position:absolute;left:-100000px;width:100%;z-index:1051}.select2-results{display:block}.select2-results__options{list-style:none;margin:0;padding:0}.select2-results__option{padding:6px;user-select:none;-webkit-user-select:none}.select2-results__option--selectable{cursor:pointer}.select2-container--open .select2-dropdown{left:0}.select2-container--open .select2-dropdown--above{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0}.select2-container--open .select2-dropdown--below{border-top:none;border-top-left-radius:0;border-top-right-radius:0}.select2-search--dropdown{display:block;padding:4px}.select2-search--dropdown .select2-search__field{padding:4px;width:100%;box-sizing:border-box}.select2-search--dropdown .select2-search__field::-webkit-search-cancel-button{-webkit-appearance:none}.select2-search--dropdown.select2-search--hide{display:none}.select2-close-mask{border:0;margin:0;padding:0;display:block;position:fixed;left:0;top:0;min-height:100%;min-width:100%;height:auto;width:auto;opacity:0;z-index:99;background-color:#fff;filter:alpha(opacity=0)}.select2-hidden-accessible{border:0 !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important}.select2-container--default .select2-selection--single{background-color:#fff;border:1px solid #aaa;border-radius:4px}.select2-container--default .select2-selection--single .select2-selection__rendered{color:#444;line-height:28px}.select2-container--default .select2-selection--single .select2-selection__clear{cursor:pointer;float:right;font-weight:bold;height:26px;margin-right:20px;padding-right:0px}.select2-container--default .select2-selection--single .select2-selection__placeholder{color:#999}.select2-container--default .select2-selection--single .select2-selection__arrow{height:26px;position:absolute;top:1px;right:1px;width:20px}.select2-container--default .select2-selection--single .select2-selection__arrow b{border-color:#888 transparent transparent transparent;border-style:solid;border-width:5px 4px 0 4px;height:0;left:50%;margin-left:-4px;margin-top:-2px;position:absolute;top:50%;width:0}.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__clear{float:left}.select2-container--default[dir="rtl"] .select2-selection--single .select
|
||
|
|
</style>
|
||
|
|
<!-- 内嵌 jQuery -->
|
||
|
|
<script>
|
||
|
|
/* 把 jquery.min.js 的内容放在这里 */
|
||
|
|
/*! jQuery v3.6.0 | (c) OpenJS Foundation and other contributors | jquery.org/license */
|
||
|
|
!function(e,t){"use strict";"object"==typeof module&&"object"==typeof module.exports?module.exports=e.document?t(e,!0):function(e){if(!e.document)throw new Error("jQuery requires a window with a document");return t(e)}:t(e)}("undefined"!=typeof window?window:this,function(C,e){"use strict";var t=[],r=Object.getPrototypeOf,s=t.slice,g=t.flat?function(e){return t.flat.call(e)}:function(e){return t.concat.apply([],e)},u=t.push,i=t.indexOf,n={},o=n.toString,v=n.hasOwnProperty,a=v.toString,l=a.call(Object),y={},m=function(e){return"function"==typeof e&&"number"!=typeof e.nodeType&&"function"!=typeof e.item},x=function(e){return null!=e&&e===e.window},E=C.document,c={type:!0,src:!0,nonce:!0,noModule:!0};function b(e,t,n){var r,i,o=(n=n||E).createElement("script");if(o.text=e,t)for(r in c)(i=t[r]||t.getAttribute&&t.getAttribute(r))&&o.setAttribute(r,i);n.head.appendChild(o).parentNode.removeChild(o)}function w(e){return null==e?e+"":"object"==typeof e||"function"==typeof e?n[o.call(e)]||"object":typeof e}var f="3.6.0",S=function(e,t){return new S.fn.init(e,t)};function p(e){var t=!!e&&"length"in e&&e.length,n=w(e);return!m(e)&&!x(e)&&("array"===n||0===t||"number"==typeof t&&0<t&&t-1 in e)}S.fn=S.prototype={jquery:f,constructor:S,length:0,toArray:function(){return s.call(this)},get:function(e){return null==e?s.call(this):e<0?this[e+this.length]:this[e]},pushStack:function(e){var t=S.merge(this.constructor(),e);return t.prevObject=this,t},each:function(e){return S.each(this,e)},map:function(n){return this.pushStack(S.map(this,function(e,t){return n.call(e,t,e)}))},slice:function(){return this.pushStack(s.apply(this,arguments))},first:function(){return this.eq(0)},last:function(){return this.eq(-1)},even:function(){return this.pushStack(S.grep(this,function(e,t){return(t+1)%2}))},odd:function(){return this.pushStack(S.grep(this,function(e,t){return t%2}))},eq:function(e){var t=this.length,n=+e+(e<0?t:0);return this.pushStack(0<=n&&n<t?[this[n]]:[])},end:function(){return this.prevObject||this.constructor()},push:u,sort:t.sort,splice:t.splice},S.extend=S.fn.extend=function(){var e,t,n,r,i,o,a=arguments[0]||{},s=1,u=arguments.length,l=!1;for("boolean"==typeof a&&(l=a,a=arguments[s]||{},s++),"object"==typeof a||m(a)||(a={}),s===u&&(a=this,s--);s<u;s++)if(null!=(e=arguments[s]))for(t in e)r=e[t],"__proto__"!==t&&a!==r&&(l&&r&&(S.isPlainObject(r)||(i=Array.isArray(r)))?(n=a[t],o=i&&!Array.isArray(n)?[]:i||S.isPlainObject(n)?n:{},i=!1,a[t]=S.extend(l,o,r)):void 0!==r&&(a[t]=r));return a},S.extend({expando:"jQuery"+(f+Math.random()).replace(/\D/g,""),isReady:!0,error:function(e){throw new Error(e)},noop:function(){},isPlainObject:function(e){var t,n;return!(!e||"[object Object]"!==o.call(e))&&(!(t=r(e))||"function"==typeof(n=v.call(t,"constructor")&&t.constructor)&&a.call(n)===l)},isEmptyObject:function(e){var t;for(t in e)return!1;return!0},globalEval:function(e,t,n){b(e,{nonce:t&&t.nonce},n)},each:function(e,t){var n,r=0;if(p(e)){for(n=e.length;r<n;r++)if(!1===t.call(e[r],r,e[r]))break}else for(r in e)if(!1===t.call(e[r],r,e[r]))break;return e},makeArray:function(e,t){var n=t||[];return null!=e&&(p(Object(e))?S.merge(n,"string"==typeof e?[e]:e):u.call(n,e)),n},inArray:function(e,t,n){return null==t?-1:i.call(t,e,n)},merge:function(e,t){for(var n=+t.length,r=0,i=e.length;r<n;r++)e[i++]=t[r];return e.length=i,e},grep:function(e,t,n){for(var r=[],i=0,o=e.length,a=!n;i<o;i++)!t(e[i],i)!==a&&r.push(e[i]);return r},map:function(e,t,n){var r,i,o=0,a=[];if(p(e))for(r=e.length;o<r;o++)null!=(i=t(e[o],o,n))&&a.push(i);else for(o in e)null!=(i=t(e[o],o,n))&&a.push(i);return g(a)},guid:1,support:y}),"function"==typeof Symbol&&(S.fn[Symbol.iterator]=t[Symbol.iterator]),S.each("Boolean Number String Function Array Date RegExp Object Error Symbol".split(" "),function(e,t){n["[object "+t+"]"]=t.toLowerCase()});var d=function(n){var e,d,b,o,i,h,f,g,w,u,l,T,C,a,E,v,s,c,y,S="sizzle"+1*new Date,p=n.document,k=0,r=0,m=ue(),x=ue(),A=ue(),N=ue(),j=function(e,t){return e===t&&(l=!0),0},D={}.hasOwnProperty,t=[],q=t.pop,L=t.push,H=t.push,O=t.slice,P=function(e
|
||
|
|
</script>
|
||
|
|
<!-- 内嵌 Select2 JS -->
|
||
|
|
<script>
|
||
|
|
/* 把 select2.min.js 的内容放在这里 */
|
||
|
|
/*! Select2 4.1.0-rc.0 | https://github.com/select2/select2/blob/master/LICENSE.md */
|
||
|
|
!function(n){"function"==typeof define&&define.amd?define(["jquery"],n):"object"==typeof module&&module.exports?module.exports=function(e,t){return void 0===t&&(t="undefined"!=typeof window?require("jquery"):require("jquery")(e)),n(t),t}:n(jQuery)}(function(t){var e,n,s,p,r,o,h,f,g,m,y,v,i,a,_,s=((u=t&&t.fn&&t.fn.select2&&t.fn.select2.amd?t.fn.select2.amd:u)&&u.requirejs||(u?n=u:u={},g={},m={},y={},v={},i=Object.prototype.hasOwnProperty,a=[].slice,_=/\.js$/,h=function(e,t){var n,s,i=c(e),r=i[0],t=t[1];return e=i[1],r&&(n=x(r=l(r,t))),r?e=n&&n.normalize?n.normalize(e,(s=t,function(e){return l(e,s)})):l(e,t):(r=(i=c(e=l(e,t)))[0],e=i[1],r&&(n=x(r))),{f:r?r+"!"+e:e,n:e,pr:r,p:n}},f={require:function(e){return w(e)},exports:function(e){var t=g[e];return void 0!==t?t:g[e]={}},module:function(e){return{id:e,uri:"",exports:g[e],config:(t=e,function(){return y&&y.config&&y.config[t]||{}})};var t}},r=function(e,t,n,s){var i,r,o,a,l,c=[],u=typeof n,d=A(s=s||e);if("undefined"==u||"function"==u){for(t=!t.length&&n.length?["require","exports","module"]:t,a=0;a<t.length;a+=1)if("require"===(r=(o=h(t[a],d)).f))c[a]=f.require(e);else if("exports"===r)c[a]=f.exports(e),l=!0;else if("module"===r)i=c[a]=f.module(e);else if(b(g,r)||b(m,r)||b(v,r))c[a]=x(r);else{if(!o.p)throw new Error(e+" missing "+r);o.p.load(o.n,w(s,!0),function(t){return function(e){g[t]=e}}(r),{}),c[a]=g[r]}u=n?n.apply(g[e],c):void 0,e&&(i&&i.exports!==p&&i.exports!==g[e]?g[e]=i.exports:u===p&&l||(g[e]=u))}else e&&(g[e]=n)},e=n=o=function(e,t,n,s,i){if("string"==typeof e)return f[e]?f[e](t):x(h(e,A(t)).f);if(!e.splice){if((y=e).deps&&o(y.deps,y.callback),!t)return;t.splice?(e=t,t=n,n=null):e=p}return t=t||function(){},"function"==typeof n&&(n=s,s=i),s?r(p,e,t,n):setTimeout(function(){r(p,e,t,n)},4),o},o.config=function(e){return o(e)},e._defined=g,(s=function(e,t,n){if("string"!=typeof e)throw new Error("See almond README: incorrect module build, no module name");t.splice||(n=t,t=[]),b(g,e)||b(m,e)||(m[e]=[e,t,n])}).amd={jQuery:!0},u.requirejs=e,u.require=n,u.define=s),u.define("almond",function(){}),u.define("jquery",[],function(){var e=t||$;return null==e&&console&&console.error&&console.error("Select2: An instance of jQuery or a jQuery-compatible library was not found. Make sure that you are including jQuery before Select2 on your web page."),e}),u.define("select2/utils",["jquery"],function(r){var s={};function c(e){var t,n=e.prototype,s=[];for(t in n)"function"==typeof n[t]&&"constructor"!==t&&s.push(t);return s}s.Extend=function(e,t){var n,s={}.hasOwnProperty;function i(){this.constructor=e}for(n in t)s.call(t,n)&&(e[n]=t[n]);return i.prototype=t.prototype,e.prototype=new i,e.__super__=t.prototype,e},s.Decorate=function(s,i){var e=c(i),t=c(s);function r(){var e=Array.prototype.unshift,t=i.prototype.constructor.length,n=s.prototype.constructor;0<t&&(e.call(arguments,s.prototype.constructor),n=i.prototype.constructor),n.apply(this,arguments)}i.displayName=s.displayName,r.prototype=new function(){this.constructor=r};for(var n=0;n<t.length;n++){var o=t[n];r.prototype[o]=s.prototype[o]}for(var a=0;a<e.length;a++){var l=e[a];r.prototype[l]=function(e){var t=function(){};e in r.prototype&&(t=r.prototype[e]);var n=i.prototype[e];return function(){return Array.prototype.unshift.call(arguments,t),n.apply(this,arguments)}}(l)}return r};function e(){this.listeners={}}e.prototype.on=function(e,t){this.listeners=this.listeners||{},e in this.listeners?this.listeners[e].push(t):this.listeners[e]=[t]},e.prototype.trigger=function(e){var t=Array.prototype.slice,n=t.call(arguments,1);this.listeners=this.listeners||{},0===(n=null==n?[]:n).length&&n.push({}),(n[0]._type=e)in this.listeners&&this.invoke(this.listeners[e],t.call(arguments,1)),"*"in this.listeners&&this.invoke(this.listeners["*"],arguments)},e.prototype.invoke=function(e,t){for(var n=0,s=e.length;n<s;n++)e[n].apply(this,t)},s.Observable=e,s.generateChars=function(e){for(var t="",n=0;n<e;n++)t+=Math.floor(36*Math.random()).toString(36);return t},s.bind=function(e,t){return function(){e.apply(t,arguments)}},s._convertData=
|
||
|
|
</script>
|
||
|
|
<style>
|
||
|
|
body {
|
||
|
|
font-family: 'Arial', sans-serif;
|
||
|
|
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
|
||
|
|
color: #ffffff;
|
||
|
|
margin: 0;
|
||
|
|
min-height: 100vh;
|
||
|
|
padding: 20px;
|
||
|
|
overflow: hidden; /* 添加这一行来隐藏滚动条 */
|
||
|
|
}
|
||
|
|
|
||
|
|
.title {
|
||
|
|
text-align: center;
|
||
|
|
margin-bottom: 10px;
|
||
|
|
position: relative;
|
||
|
|
padding: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.title h1 {
|
||
|
|
font-size: 2.5em;
|
||
|
|
margin: 0;
|
||
|
|
background: linear-gradient(45deg, #00ffff, #4169E1);
|
||
|
|
-webkit-background-clip: text;
|
||
|
|
-webkit-text-fill-color: transparent;
|
||
|
|
text-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
|
||
|
|
}
|
||
|
|
|
||
|
|
.dashboard {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||
|
|
gap: 25px;
|
||
|
|
max-width: 1600px;
|
||
|
|
margin: 0 auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.device {
|
||
|
|
background: linear-gradient(145deg, #2a2a3a, #1a1a2e);
|
||
|
|
padding: 20px;
|
||
|
|
border-radius: 15px;
|
||
|
|
box-shadow: 0 0 20px rgba(0, 255, 255, 0.1);
|
||
|
|
border: 1px solid rgba(0, 255, 255, 0.1);
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
position: relative;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.device::before {
|
||
|
|
content: '';
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 2px;
|
||
|
|
background: linear-gradient(90deg, transparent, #00ffff, transparent);
|
||
|
|
animation: scanline 2s linear infinite;
|
||
|
|
}
|
||
|
|
|
||
|
|
.device:hover {
|
||
|
|
transform: translateY(-5px);
|
||
|
|
box-shadow: 0 5px 25px rgba(0, 255, 255, 0.2);
|
||
|
|
}
|
||
|
|
|
||
|
|
.device h3 {
|
||
|
|
margin: 0 0 15px;
|
||
|
|
font-size: 1.2em;
|
||
|
|
color: #00ffff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.device p {
|
||
|
|
margin: 8px 0;
|
||
|
|
color: #b8b8b8;
|
||
|
|
font-size: 0.95em;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes scanline {
|
||
|
|
0% { transform: translateX(-100%); }
|
||
|
|
100% { transform: translateX(100%); }
|
||
|
|
}
|
||
|
|
|
||
|
|
.workshop-buttons {
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
gap: 20px;
|
||
|
|
margin-bottom: 30px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.workshop-btn {
|
||
|
|
padding: 12px 30px;
|
||
|
|
border: none;
|
||
|
|
border-radius: 8px;
|
||
|
|
background: linear-gradient(145deg, #2a2a3a, #1a1a2e);
|
||
|
|
color: #00ffff;
|
||
|
|
font-size: 1.1em;
|
||
|
|
cursor: pointer;
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
border: 1px solid rgba(0, 255, 255, 0.2);
|
||
|
|
text-shadow: 0 0 5px rgba(0, 255, 255, 0.5);
|
||
|
|
position: relative;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.workshop-btn:hover {
|
||
|
|
transform: translateY(-2px);
|
||
|
|
box-shadow: 0 0 15px rgba(0, 255, 255, 0.3);
|
||
|
|
}
|
||
|
|
|
||
|
|
.workshop-btn.active {
|
||
|
|
background: linear-gradient(145deg, #00ffff, #4169E1);
|
||
|
|
color: #1a1a2e;
|
||
|
|
text-shadow: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.workshop-btn::before {
|
||
|
|
content: '';
|
||
|
|
position: absolute;
|
||
|
|
top: -2px;
|
||
|
|
left: -2px;
|
||
|
|
right: -2px;
|
||
|
|
bottom: -2px;
|
||
|
|
z-index: -1;
|
||
|
|
background: linear-gradient(45deg, #00ffff, #4169E1);
|
||
|
|
border-radius: 8px;
|
||
|
|
opacity: 0;
|
||
|
|
transition: opacity 0.3s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.workshop-btn:hover::before {
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 添加弹窗样式 */
|
||
|
|
.modal {
|
||
|
|
display: none;
|
||
|
|
position: fixed;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
background-color: rgba(0, 0, 0, 0.5);
|
||
|
|
z-index: 1000;
|
||
|
|
}
|
||
|
|
|
||
|
|
.modal-content {
|
||
|
|
position: absolute;
|
||
|
|
top: 50%;
|
||
|
|
left: 50%;
|
||
|
|
transform: translate(-50%, -50%);
|
||
|
|
background: linear-gradient(145deg, #2a2a3a, #1a1a2e);
|
||
|
|
padding: 20px;
|
||
|
|
border-radius: 15px;
|
||
|
|
min-width: 300px;
|
||
|
|
color: #ffffff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.modal select {
|
||
|
|
width: 100%;
|
||
|
|
padding: 10px;
|
||
|
|
margin: 10px 0;
|
||
|
|
background: #1a1a2e;
|
||
|
|
color: #ffffff;
|
||
|
|
border: 1px solid rgba(0, 255, 255, 0.2);
|
||
|
|
border-radius: 5px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.modal-buttons {
|
||
|
|
display: flex;
|
||
|
|
justify-content: flex-end;
|
||
|
|
gap: 10px;
|
||
|
|
margin-top: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.modal-btn {
|
||
|
|
padding: 8px 20px;
|
||
|
|
border: none;
|
||
|
|
border-radius: 5px;
|
||
|
|
cursor: pointer;
|
||
|
|
background: linear-gradient(145deg, #00ffff, #4169E1);
|
||
|
|
color: #1a1a2e;
|
||
|
|
}
|
||
|
|
|
||
|
|
.modal-btn.cancel {
|
||
|
|
background: linear-gradient(145deg, #2a2a3a, #1a1a2e);
|
||
|
|
color: #00ffff;
|
||
|
|
border: 1px solid rgba(0, 255, 255, 0.2);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Select2 自定义样式 */
|
||
|
|
.select2-container--default {
|
||
|
|
width: 100% !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.select2-container--default .select2-selection--single {
|
||
|
|
background: #1a1a2e;
|
||
|
|
border: 1px solid rgba(0, 255, 255, 0.2);
|
||
|
|
border-radius: 5px;
|
||
|
|
height: 38px;
|
||
|
|
color: #ffffff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.select2-container--default .select2-selection--single .select2-selection__rendered {
|
||
|
|
color: #ffffff;
|
||
|
|
line-height: 38px;
|
||
|
|
padding-left: 15px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.select2-container--default .select2-selection--single .select2-selection__arrow {
|
||
|
|
height: 36px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.select2-dropdown {
|
||
|
|
background: #1a1a2e;
|
||
|
|
border: 1px solid rgba(0, 255, 255, 0.2);
|
||
|
|
}
|
||
|
|
|
||
|
|
.select2-container--default .select2-search--dropdown .select2-search__field {
|
||
|
|
background: #2a2a3a;
|
||
|
|
border: 1px solid rgba(0, 255, 255, 0.2);
|
||
|
|
color: #ffffff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.select2-container--default .select2-results__option {
|
||
|
|
color: #ffffff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.select2-container--default .select2-results__option--highlighted[aria-selected] {
|
||
|
|
background: linear-gradient(145deg, #00ffff, #4169E1);
|
||
|
|
color: #1a1a2e;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="title">
|
||
|
|
<h1>一期管芯库设备监控系统</h1>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="workshop-buttons">
|
||
|
|
<button class="workshop-btn" data-workshop="A1">A1车间</button>
|
||
|
|
<button class="workshop-btn" data-workshop="A2">A2车间</button>
|
||
|
|
<button class="workshop-btn" data-workshop="A3">A3车间</button>
|
||
|
|
<button class="workshop-btn active" data-workshop="A4">A4车间</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="dashboard" id="dashboard">
|
||
|
|
<!-- 设备信息将动态插入到这里 -->
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 添加弹窗 -->
|
||
|
|
<div id="deviceModal" class="modal">
|
||
|
|
<div class="modal-content">
|
||
|
|
<h3>设置设备管芯</h3>
|
||
|
|
<select id="materialSelect"></select>
|
||
|
|
<div class="modal-buttons">
|
||
|
|
<button class="modal-btn cancel" onclick="closeModal()">取消</button>
|
||
|
|
<button class="modal-btn" onclick="confirmDeviceUpdate()">确认</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
let currentWorkshop = 'A4';
|
||
|
|
let materialMapping = {};
|
||
|
|
let materialData = []; // 添加这行来存储完整的材料数据
|
||
|
|
let currentDeviceCode = ''; // 添加这行来存储当前选中的设备编码
|
||
|
|
|
||
|
|
// 添加IP配置映射
|
||
|
|
const workshopConfig = {
|
||
|
|
'A1': 'http://10.1.3.93:8010',
|
||
|
|
'A2': 'http://10.1.3.93:8011',
|
||
|
|
'A3': 'http://10.1.3.94:8010',
|
||
|
|
'A4': 'http://10.1.3.94:8011'
|
||
|
|
};
|
||
|
|
|
||
|
|
// 获取管芯规格数据并存储到localStorage
|
||
|
|
// 修改 fetchMaterialData 函数
|
||
|
|
async function fetchMaterialData() {
|
||
|
|
const cachedData = localStorage.getItem('materialMapping');
|
||
|
|
if (cachedData) {
|
||
|
|
materialMapping = JSON.parse(cachedData);
|
||
|
|
materialData = JSON.parse(localStorage.getItem('materialData') || '[]');
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
try {
|
||
|
|
const response = await fetch('http://10.1.3.90:8020/api/pda/paper/queryPaperMaterial', {
|
||
|
|
method: 'POST',
|
||
|
|
headers: {
|
||
|
|
'Content-Type': 'application/json'
|
||
|
|
},
|
||
|
|
body: JSON.stringify({}) // 添加空的 JSON 对象作为请求体
|
||
|
|
});
|
||
|
|
const data = await response.json();
|
||
|
|
|
||
|
|
// 确保 data.rows 存在且是数组
|
||
|
|
if (data && Array.isArray(data.rows)) {
|
||
|
|
materialData = data.rows; // 保存完整数据
|
||
|
|
|
||
|
|
materialMapping = data.rows.reduce((acc, item) => {
|
||
|
|
acc[item.value] = item.text;
|
||
|
|
return acc;
|
||
|
|
}, {});
|
||
|
|
|
||
|
|
localStorage.setItem('materialMapping', JSON.stringify(materialMapping));
|
||
|
|
localStorage.setItem('materialData', JSON.stringify(materialData));
|
||
|
|
} else {
|
||
|
|
console.error('Material data format is incorrect:', data);
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
console.error('Failed to fetch material data:', error);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// 修改 displayDevices 函数
|
||
|
|
function displayDevices(devices) {
|
||
|
|
const dashboard = document.getElementById('dashboard');
|
||
|
|
devices.forEach(device => {
|
||
|
|
const deviceElement = document.createElement('div');
|
||
|
|
deviceElement.className = 'device';
|
||
|
|
deviceElement.innerHTML = `
|
||
|
|
<h3>设备编码: ${device.device_code}</h3>
|
||
|
|
<p>设备模式: ${modeMapping[device.mode] || device.mode}</p>
|
||
|
|
<p>管芯数量: ${device.qty}</p>
|
||
|
|
<p>管芯编码: ${device.material_code}</p>
|
||
|
|
<p>管芯规格: ${materialMapping[device.material_code] || '未知规格'}</p>
|
||
|
|
<p>错误代码: ${device.error}</p>
|
||
|
|
`;
|
||
|
|
deviceElement.addEventListener('click', () => openModal(device.device_code));
|
||
|
|
dashboard.appendChild(deviceElement);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
// 添加弹窗相关函数
|
||
|
|
function openModal(deviceCode) {
|
||
|
|
currentDeviceCode = deviceCode;
|
||
|
|
const modal = document.getElementById('deviceModal');
|
||
|
|
const select = document.getElementById('materialSelect');
|
||
|
|
|
||
|
|
// 清空并重新填充选项
|
||
|
|
select.innerHTML = '';
|
||
|
|
|
||
|
|
if (Array.isArray(materialData) && materialData.length > 0) {
|
||
|
|
materialData.forEach(item => {
|
||
|
|
const option = document.createElement('option');
|
||
|
|
option.value = item.value;
|
||
|
|
option.textContent = item.text;
|
||
|
|
select.appendChild(option);
|
||
|
|
});
|
||
|
|
|
||
|
|
// 初始化 Select2
|
||
|
|
$(select).select2({
|
||
|
|
dropdownParent: $('#deviceModal .modal-content'),
|
||
|
|
placeholder: '请输入关键字搜索',
|
||
|
|
language: {
|
||
|
|
noResults: function() {
|
||
|
|
return "没有找到匹配的结果";
|
||
|
|
},
|
||
|
|
searching: function() {
|
||
|
|
return "搜索中...";
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
console.error('No material data available');
|
||
|
|
const option = document.createElement('option');
|
||
|
|
option.textContent = '暂无可用数据';
|
||
|
|
select.appendChild(option);
|
||
|
|
}
|
||
|
|
|
||
|
|
modal.style.display = 'block';
|
||
|
|
}
|
||
|
|
|
||
|
|
// 修改 closeModal 函数
|
||
|
|
function closeModal() {
|
||
|
|
const select = document.getElementById('materialSelect');
|
||
|
|
if ($(select).data('select2')) {
|
||
|
|
$(select).select2('destroy');
|
||
|
|
}
|
||
|
|
document.getElementById('deviceModal').style.display = 'none';
|
||
|
|
}
|
||
|
|
|
||
|
|
async function confirmDeviceUpdate() {
|
||
|
|
const materialCode = document.getElementById('materialSelect').value;
|
||
|
|
|
||
|
|
try {
|
||
|
|
const response = await fetch('http://10.1.3.90:8020/api/pda/paper/PaperDeviceOperate', {
|
||
|
|
method: 'POST',
|
||
|
|
headers: {
|
||
|
|
'Content-Type': 'application/json'
|
||
|
|
},
|
||
|
|
body: JSON.stringify({
|
||
|
|
qty: 0,
|
||
|
|
material_code: materialCode,
|
||
|
|
device_code: currentDeviceCode,
|
||
|
|
option: "1"
|
||
|
|
})
|
||
|
|
});
|
||
|
|
|
||
|
|
const data = await response.json();
|
||
|
|
alert('设置结果: ' + data.message);
|
||
|
|
fetchDeviceData(); // 刷新设备数据
|
||
|
|
} catch (error) {
|
||
|
|
console.error('Failed to update device:', error);
|
||
|
|
alert('设置失败,请检查网络连接');
|
||
|
|
}
|
||
|
|
|
||
|
|
closeModal();
|
||
|
|
}
|
||
|
|
|
||
|
|
function generateDeviceCodes(workshop) {
|
||
|
|
return Array.from({length: 12}, (_, i) => ({
|
||
|
|
"device_code": `${workshop}_ZGK${String(i + 1).padStart(2, '0')}`
|
||
|
|
}));
|
||
|
|
}
|
||
|
|
|
||
|
|
async function fetchDeviceData() {
|
||
|
|
const dashboard = document.getElementById('dashboard');
|
||
|
|
dashboard.innerHTML = '';
|
||
|
|
|
||
|
|
const response = await fetch(`${workshopConfig[currentWorkshop]}/api/wms/querydevice`, {
|
||
|
|
method: 'POST',
|
||
|
|
headers: {
|
||
|
|
'Content-Type': 'application/json'
|
||
|
|
},
|
||
|
|
body: JSON.stringify(generateDeviceCodes(currentWorkshop))
|
||
|
|
});
|
||
|
|
|
||
|
|
const data = await response.json();
|
||
|
|
if (data.status === 200) {
|
||
|
|
displayDevices(data.data);
|
||
|
|
} else {
|
||
|
|
console.error('Failed to fetch device data:', data.message);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// 添加按钮点击事件处理
|
||
|
|
document.querySelectorAll('.workshop-btn').forEach(btn => {
|
||
|
|
btn.addEventListener('click', () => {
|
||
|
|
// 更新按钮状态
|
||
|
|
document.querySelectorAll('.workshop-btn').forEach(b => b.classList.remove('active'));
|
||
|
|
btn.classList.add('active');
|
||
|
|
|
||
|
|
// 更新当前车间并重新获取数据
|
||
|
|
currentWorkshop = btn.dataset.workshop;
|
||
|
|
fetchDeviceData();
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
// 添加设备模式映射
|
||
|
|
const modeMapping = {
|
||
|
|
0: '脱机',
|
||
|
|
2: '待机',
|
||
|
|
3: '运行中'
|
||
|
|
};
|
||
|
|
|
||
|
|
// 删除第二个 displayDevices 函数,只保留前面那个带点击事件的版本
|
||
|
|
function displayDevices(devices) {
|
||
|
|
const dashboard = document.getElementById('dashboard');
|
||
|
|
devices.forEach(device => {
|
||
|
|
const deviceElement = document.createElement('div');
|
||
|
|
deviceElement.className = 'device';
|
||
|
|
deviceElement.innerHTML = `
|
||
|
|
<h3>设备编码: ${device.device_code}</h3>
|
||
|
|
<p>设备模式: ${modeMapping[device.mode] || device.mode}</p>
|
||
|
|
<p>管芯数量: ${device.qty}</p>
|
||
|
|
<p>管芯编码: ${device.material_code}</p>
|
||
|
|
<p>管芯规格: ${materialMapping[device.material_code] || '未知规格'}</p>
|
||
|
|
<p>错误代码: ${device.error}</p>
|
||
|
|
`;
|
||
|
|
deviceElement.addEventListener('click', () => openModal(device.device_code));
|
||
|
|
dashboard.appendChild(deviceElement);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
// 添加点击模态框外部关闭的功能
|
||
|
|
window.onclick = function(event) {
|
||
|
|
const modal = document.getElementById('deviceModal');
|
||
|
|
if (event.target === modal) {
|
||
|
|
closeModal();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
// 初始化时先获取管芯规格数据,然后再获取设备数据
|
||
|
|
(async function initialize() {
|
||
|
|
await fetchMaterialData();
|
||
|
|
fetchDeviceData();
|
||
|
|
})();
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|