Commit 91ba20d9 authored by lei's avatar lei

add:首页数据显示、webgl点击显示监控摄像头视频弹窗

parent c8c20766
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unity WebGL Player | longxin</title>
<link rel="shortcut icon" href="TemplateData/favicon.ico">
<link rel="stylesheet" href="TemplateData/style.css">
<link rel="shortcut icon" href="TemplateData/favicon.ico" />
<link rel="stylesheet" href="TemplateData/style.css" />
</head>
<body>
<div id="unity-container" class="unity-desktop">
<body style="height: 80%; width: 80%">
<button id="button1">打开弹窗</button>
<script>
// 新增按钮点击事件
document.getElementById("button1").addEventListener("click", function () {
// 这里可以添加与父页面通信的逻辑
console.log("按钮被点击");
// 示例:向父页面发送消息
window.parent.postMessage(
{
type: "openPopup",
channel: "199",
},
"*"
);
});
</script>
<div
id="unity-container"
class="unity-desktop"
style="height: 80%; width: 80%; overflow: hidden"
>
<canvas id="unity-canvas"></canvas>
<div id="unity-loading-bar">
<div id="unity-logo"></div>
......@@ -16,6 +36,7 @@
<div id="unity-progress-bar-full"></div>
</div>
</div>
<div id="unity-mobile-warning">
WebGL builds are not supported on mobile devices.
</div>
......@@ -53,8 +74,8 @@
mobileWarning.style.display = "none";
}, 5000);
} else {
canvas.style.width = "960px";
canvas.style.height = "600px";
canvas.style.width = "100%";
canvas.style.height = "100%";
}
loadingBar.style.display = "block";
......@@ -63,14 +84,16 @@
script.onload = () => {
createUnityInstance(canvas, config, (progress) => {
progressBarFull.style.width = 100 * progress + "%";
}).then((unityInstance) => {
loadingBar.style.display = "none";
fullscreenButton.onclick = () => {
unityInstance.SetFullscreen(1);
};
}).catch((message) => {
alert(message);
});
})
.then((unityInstance) => {
loadingBar.style.display = "none";
fullscreenButton.onclick = () => {
unityInstance.SetFullscreen(1);
};
})
.catch((message) => {
alert(message);
});
};
document.body.appendChild(script);
</script>
......
This source diff could not be displayed because it is too large. You can view the blob instead.
function createUnityInstance(e,t,r){function n(e){var t="unhandledrejection"==e.type&&"object"==typeof e.reason?e.reason:"object"==typeof e.error?e.error:null,r=t?t.toString():"string"==typeof e.message?e.message:"string"==typeof e.reason?e.reason:"";if(t&&"string"==typeof t.stack&&(r+="\n"+t.stack.substring(t.stack.lastIndexOf(r,0)?0:r.length).replace(/(^\n*|\n*$)/g,"")),r&&l.stackTraceRegExp&&l.stackTraceRegExp.test(r)){var n=e instanceof ErrorEvent?e.filename:t&&"string"==typeof t.fileName?t.fileName:t&&"string"==typeof t.sourceURL?t.sourceURL:"",o=e instanceof ErrorEvent?e.lineno:t&&"number"==typeof t.lineNumber?t.lineNumber:t&&"number"==typeof t.line?t.line:0;a(r,n,o)}}function o(e){e.preventDefault()}function a(e,t,r){if(l.startupErrorHandler)return void l.startupErrorHandler(e,t,r);if(!(l.errorHandler&&l.errorHandler(e,t,r)||(console.log("Invoking error handler due to\n"+e),"function"==typeof dump&&dump("Invoking error handler due to\n"+e),e.indexOf("UnknownError")!=-1||e.indexOf("Program terminated with exit(0)")!=-1||a.didShowErrorMessage))){var e="An error occurred running the Unity content on this page. See your browser JavaScript console for more info. The error was:\n"+e;e.indexOf("DISABLE_EXCEPTION_CATCHING")!=-1?e="An exception has occurred, but exception handling has been disabled in this build. If you are the developer of this content, enable exceptions in your project WebGL player settings to be able to catch the exception or see the stack trace.":e.indexOf("Cannot enlarge memory arrays")!=-1?e="Out of memory. If you are the developer of this content, try allocating more memory to your WebGL build in the WebGL player settings.":e.indexOf("Invalid array buffer length")==-1&&e.indexOf("Invalid typed array length")==-1&&e.indexOf("out of memory")==-1&&e.indexOf("could not allocate memory")==-1||(e="The browser could not allocate enough memory for the WebGL content. If you are the developer of this content, try allocating less memory to your WebGL build in the WebGL player settings."),alert(e),a.didShowErrorMessage=!0}}function s(e,t){if("symbolsUrl"!=e){var n=l.downloadProgress[e];n||(n=l.downloadProgress[e]={started:!1,finished:!1,lengthComputable:!1,total:0,loaded:0}),"object"!=typeof t||"progress"!=t.type&&"load"!=t.type||(n.started||(n.started=!0,n.lengthComputable=t.lengthComputable,n.total=t.total),n.loaded=t.loaded,"load"==t.type&&(n.finished=!0));var o=0,a=0,s=0,i=0,d=0;for(var e in l.downloadProgress){var n=l.downloadProgress[e];if(!n.started)return 0;s++,n.lengthComputable?(o+=n.loaded,a+=n.total,i++):n.finished||d++}var u=s?(s-d-(a?i*(a-o)/a:0))/s:0;r(.9*u)}}function i(e){return new Promise(function(t,r){s(e);var n=l.companyName&&l.productName?new l.XMLHttpRequest({companyName:l.companyName,productName:l.productName,cacheControl:l.cacheControl(l[e])}):new XMLHttpRequest;n.open("GET",l[e]),n.responseType="arraybuffer",n.addEventListener("progress",function(t){s(e,t)}),n.addEventListener("load",function(r){s(e,r),t(new Uint8Array(n.response))}),n.send()})}function d(){return new Promise(function(e,t){var r=document.createElement("script");r.src=l.frameworkUrl,r.onload=function(){var t=unityFramework;unityFramework=null,r.onload=null,e(t)},document.body.appendChild(r),l.deinitializers.push(function(){document.body.removeChild(r)})})}function u(){d().then(function(e){e(l)});var e=i("dataUrl");l.preRun.push(function(){l.addRunDependency("dataUrl"),e.then(function(e){var t=new DataView(e.buffer,e.byteOffset,e.byteLength),r=0,n="UnityWebData1.0\0";if(!String.fromCharCode.apply(null,e.subarray(r,r+n.length))==n)throw"unknown data format";r+=n.length;var o=t.getUint32(r,!0);for(r+=4;r<o;){var a=t.getUint32(r,!0);r+=4;var s=t.getUint32(r,!0);r+=4;var i=t.getUint32(r,!0);r+=4;var d=String.fromCharCode.apply(null,e.subarray(r,r+i));r+=i;for(var u=0,c=d.indexOf("/",u)+1;c>0;u=c,c=d.indexOf("/",u)+1)l.FS_createPath(d.substring(0,u),d.substring(u,c-1),!0,!0);l.FS_createDataFile(d,null,e.subarray(a,a+s),!0,!0,!0)}l.removeRunDependency("dataUrl")})})}r=r||function(){};var l={canvas:e,webglContextAttributes:{preserveDrawingBuffer:!1},cacheControl:function(e){return e==l.dataUrl?"must-revalidate":"no-store"},streamingAssetsUrl:"StreamingAssets",downloadProgress:{},deinitializers:[],intervals:{},setInterval:function(e,t){var r=window.setInterval(e,t);return this.intervals[r]=!0,r},clearInterval:function(e){delete this.intervals[e],window.clearInterval(e)},preRun:[],postRun:[],print:function(e){console.log(e)},printErr:function(e){console.error(e)},locateFile:function(e){return"build.wasm"==e?this.codeUrl:e},disabledCanvasEvents:["contextmenu","dragstart"]};for(var c in t)l[c]=t[c];l.streamingAssetsUrl=new URL(l.streamingAssetsUrl,document.URL).href;var f=l.disabledCanvasEvents.slice();f.forEach(function(t){e.addEventListener(t,o)}),window.addEventListener("error",n),window.addEventListener("unhandledrejection",n);var p={Module:l,SetFullscreen:function(){return l.SetFullscreen?l.SetFullscreen.apply(l,arguments):void l.print("Failed to set Fullscreen mode: Player not loaded yet.")},SendMessage:function(){return l.SendMessage?l.SendMessage.apply(l,arguments):void l.print("Failed to execute SendMessage: Player not loaded yet.")},Quit:function(){return new Promise(function(t,r){l.shouldQuit=!0,l.onQuit=t,f.forEach(function(t){e.removeEventListener(t,o)}),window.removeEventListener("error",n),window.removeEventListener("unhandledrejection",n)})}};return l.SystemInfo=function(){function e(e,t,r){return e=RegExp(e,"i").exec(t),e&&e[r]}for(var t,r,n,o,a,s,i=navigator.userAgent+" ",d=[["Firefox","Firefox"],["OPR","Opera"],["Edg","Edge"],["SamsungBrowser","Samsung Browser"],["Trident","Internet Explorer"],["MSIE","Internet Explorer"],["Chrome","Chrome"],["Safari","Safari"]],u=0;u<d.length;++u)if(r=e(d[u][0]+"[/ ](.*?)[ \\)]",i,1)){t=d[u][1];break}"Safari"==t&&(r=e("Version/(.*?) ",i,1)),"Internet Explorer"==t&&(r=e("rv:(.*?)\\)? ",i,1)||r);for(var l=[["Windows (.*?)[;)]","Windows"],["Android ([0-9_.]+)","Android"],["iPhone OS ([0-9_.]+)","iPhoneOS"],["iPad.*? OS ([0-9_.]+)","iPadOS"],["FreeBSD( )","FreeBSD"],["OpenBSD( )","OpenBSD"],["Linux|X11()","Linux"],["Mac OS X ([0-9_.]+)","macOS"],["bot|google|baidu|bing|msn|teoma|slurp|yandex","Search Bot"]],c=0;c<l.length;++c)if(o=e(l[c][0],i,1)){n=l[c][1],o=o.replace(/_/g,".");break}var f={"NT 5.0":"2000","NT 5.1":"XP","NT 5.2":"Server 2003","NT 6.0":"Vista","NT 6.1":"7","NT 6.2":"8","NT 6.3":"8.1","NT 10.0":"10"};o=f[o]||o,a=document.createElement("canvas"),a&&(gl=a.getContext("webgl2"),glVersion=gl?2:0,gl||(gl=a&&a.getContext("webgl"))&&(glVersion=1),gl&&(s=gl.getExtension("WEBGL_debug_renderer_info")&&gl.getParameter(37446)||gl.getParameter(7937)));var p="undefined"!=typeof SharedArrayBuffer,h="object"==typeof WebAssembly&&"function"==typeof WebAssembly.compile;return{width:screen.width,height:screen.height,userAgent:i.trim(),browser:t,browserVersion:r,mobile:/Mobile|Android|iP(ad|hone)/.test(navigator.appVersion),os:n,osVersion:o,gpu:s,language:navigator.userLanguage||navigator.language,hasWebGL:glVersion,hasCursorLock:!!document.body.requestPointerLock,hasFullscreen:!!document.body.requestFullscreen,hasThreads:p,hasWasm:h,hasWasmThreads:function(){var e=h&&p&&new WebAssembly.Memory({initial:1,maximum:1,shared:!0});return e&&e.buffer instanceof SharedArrayBuffer}()}}(),l.abortHandler=function(e){return a(e,"",0),!0},Error.stackTraceLimit=Math.max(Error.stackTraceLimit||0,50),l.XMLHttpRequest=function(){function e(e){console.log("[UnityCache] "+e)}function t(e){return t.link=t.link||document.createElement("a"),t.link.href=e,t.link.href}function r(e){var t=window.location.href.match(/^[a-z]+:\/\/[^\/]+/);return!t||e.lastIndexOf(t[0],0)}function n(){function t(t){if("undefined"==typeof n.database)for(n.database=t,n.database||e("indexedDB database could not be opened");n.queue.length;){var r=n.queue.shift();n.database?n.execute.apply(n,r):"function"==typeof r.onerror&&r.onerror(new Error("operation cancelled"))}}function r(){var e=o.open(s.name,s.version);e.onupgradeneeded=function(e){var t=e.target.result;t.objectStoreNames.contains(d.name)||t.createObjectStore(d.name)},e.onsuccess=function(e){t(e.target.result)},e.onerror=function(){t(null)}}var n=this;n.queue=[];try{var o=window.indexedDB||window.mozIndexedDB||window.webkitIndexedDB||window.msIndexedDB,a=o.open(s.name);a.onupgradeneeded=function(e){var t=e.target.result.createObjectStore(i.name,{keyPath:"url"});["version","company","product","updated","revalidated","accessed"].forEach(function(e){t.createIndex(e,e)})},a.onsuccess=function(e){var n=e.target.result;n.version<s.version?(n.close(),r()):t(n)},a.onerror=function(){t(null)}}catch(e){t(null)}}function o(e,t,r,n,o){var a={url:e,version:i.version,company:t,product:r,updated:n,revalidated:n,accessed:n,responseHeaders:{},xhr:{}};return o&&(["Last-Modified","ETag"].forEach(function(e){a.responseHeaders[e]=o.getResponseHeader(e)}),["responseURL","status","statusText","response"].forEach(function(e){a.xhr[e]=o[e]})),a}function a(t){this.cache={enabled:!1},t&&(this.cache.control=t.cacheControl,this.cache.company=t.companyName,this.cache.product=t.productName),this.xhr=new XMLHttpRequest(t),this.xhr.addEventListener("load",function(){var t=this.xhr,r=this.cache;r.enabled&&!r.revalidated&&(304==t.status?(r.result.revalidated=r.result.accessed,r.revalidated=!0,u.execute(i.name,"put",[r.result]),e("'"+r.result.url+"' successfully revalidated and served from the indexedDB cache")):200==t.status?(r.result=o(r.result.url,r.company,r.product,r.result.accessed,t),r.revalidated=!0,u.execute(i.name,"put",[r.result],function(t){e("'"+r.result.url+"' successfully downloaded and stored in the indexedDB cache")},function(t){e("'"+r.result.url+"' successfully downloaded but not stored in the indexedDB cache due to the error: "+t)})):e("'"+r.result.url+"' request failed with status: "+t.status+" "+t.statusText))}.bind(this))}var s={name:"UnityCache",version:2},i={name:"XMLHttpRequest",version:1},d={name:"WebAssembly",version:1};n.prototype.execute=function(e,t,r,n,o){if(this.database)try{var a=this.database.transaction([e],["put","delete","clear"].indexOf(t)!=-1?"readwrite":"readonly").objectStore(e);"openKeyCursor"==t&&(a=a.index(r[0]),r=r.slice(1));var s=a[t].apply(a,r);"function"==typeof n&&(s.onsuccess=function(e){n(e.target.result)}),s.onerror=o}catch(e){"function"==typeof o&&o(e)}else"undefined"==typeof this.database?this.queue.push(arguments):"function"==typeof o&&o(new Error("indexedDB access denied"))};var u=new n;a.prototype.send=function(t){var n=this.xhr,o=this.cache,a=arguments;return o.enabled=o.enabled&&"arraybuffer"==n.responseType&&!t,o.enabled?void u.execute(i.name,"get",[o.result.url],function(t){if(!t||t.version!=i.version)return void n.send.apply(n,a);if(o.result=t,o.result.accessed=Date.now(),"immutable"==o.control)o.revalidated=!0,u.execute(i.name,"put",[o.result]),n.dispatchEvent(new Event("load")),e("'"+o.result.url+"' served from the indexedDB cache without revalidation");else if(r(o.result.url)&&(o.result.responseHeaders["Last-Modified"]||o.result.responseHeaders.ETag)){var s=new XMLHttpRequest;s.open("HEAD",o.result.url),s.onload=function(){o.revalidated=["Last-Modified","ETag"].every(function(e){return!o.result.responseHeaders[e]||o.result.responseHeaders[e]==s.getResponseHeader(e)}),o.revalidated?(o.result.revalidated=o.result.accessed,u.execute(i.name,"put",[o.result]),n.dispatchEvent(new Event("load")),e("'"+o.result.url+"' successfully revalidated and served from the indexedDB cache")):n.send.apply(n,a)},s.send()}else o.result.responseHeaders["Last-Modified"]?(n.setRequestHeader("If-Modified-Since",o.result.responseHeaders["Last-Modified"]),n.setRequestHeader("Cache-Control","no-cache")):o.result.responseHeaders.ETag&&(n.setRequestHeader("If-None-Match",o.result.responseHeaders.ETag),n.setRequestHeader("Cache-Control","no-cache")),n.send.apply(n,a)},function(e){n.send.apply(n,a)}):n.send.apply(n,a)},a.prototype.open=function(e,r,n,a,s){return this.cache.result=o(t(r),this.cache.company,this.cache.product,Date.now()),this.cache.enabled=["must-revalidate","immutable"].indexOf(this.cache.control)!=-1&&"GET"==e&&this.cache.result.url.match("^https?://")&&("undefined"==typeof n||n)&&"undefined"==typeof a&&"undefined"==typeof s,this.cache.revalidated=!1,this.xhr.open.apply(this.xhr,arguments)},a.prototype.setRequestHeader=function(e,t){return this.cache.enabled=!1,this.xhr.setRequestHeader.apply(this.xhr,arguments)};var l=new XMLHttpRequest;for(var c in l)a.prototype.hasOwnProperty(c)||!function(e){Object.defineProperty(a.prototype,e,"function"==typeof l[e]?{value:function(){return this.xhr[e].apply(this.xhr,arguments)}}:{get:function(){return this.cache.revalidated&&this.cache.result.xhr.hasOwnProperty(e)?this.cache.result.xhr[e]:this.xhr[e]},set:function(t){this.xhr[e]=t}})}(c);return a}(),new Promise(function(e,t){l.SystemInfo.hasWebGL?l.SystemInfo.hasWasm?(1==l.SystemInfo.hasWebGL&&l.print('Warning: Your browser does not support "WebGL 2.0" Graphics API, switching to "WebGL 1.0"'),l.startupErrorHandler=t,r(0),l.postRun.push(function(){r(1),delete l.startupErrorHandler,e(p)}),u()):t("Your browser does not support WebAssembly."):t("Your browser does not support WebGL.")})}
\ No newline at end of file
body { padding: 0; margin: 0 }
#unity-container { position: absolute }
#unity-container.unity-desktop { left: 50%; top: 50%; transform: translate(-50%, -50%) }
#unity-container.unity-mobile { width: 100%; height: 100% }
#unity-canvas { background: #231F20 }
.unity-mobile #unity-canvas { width: 100%; height: 100% }
#unity-loading-bar { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none }
#unity-logo { width: 154px; height: 130px; background: url('unity-logo-dark.png') no-repeat center }
#unity-progress-bar-empty { width: 141px; height: 18px; margin-top: 10px; background: url('progress-bar-empty-dark.png') no-repeat center }
#unity-progress-bar-full { width: 0%; height: 18px; margin-top: 10px; background: url('progress-bar-full-dark.png') no-repeat center }
#unity-footer { position: relative }
.unity-mobile #unity-footer { display: none }
#unity-webgl-logo { float:left; width: 204px; height: 38px; background: url('webgl-logo.png') no-repeat center }
#unity-build-title { float: right; margin-right: 10px; line-height: 38px; font-family: arial; font-size: 18px }
#unity-fullscreen-button { float: right; width: 38px; height: 38px; background: url('fullscreen-button.png') no-repeat center }
#unity-mobile-warning { position: absolute; left: 50%; top: 5%; transform: translate(-50%); background: white; padding: 10px; display: none }
<xml>
<machines>
<machine id="014801" name="-480m水泵房" layer="480" position="359.02,-482.42,417.56" pos="27.92,-708,-39.63"/>
<machine id="014802" name="-480m副井马头门" layer="480" position="355.66,-482.42,387.5" pos="28.23,-708,16.62"/>
<machine id="014803" name="-480m拐角" layer="480" position="271.6,-482.42,396.78" pos="203.88,-708,3.54"/>
<machine id="019601" name="-960m马头门100米" layer="960" position="364.52,-962.63,398.61" pos="50.36,-1188,2.91"/>
<machine id="019602" name="-960m休息硐室外" layer="960" position="243.11,-962.73,231.8" pos="266.78,-1188,300.09"/>
<machine id="019603" name="压风硐室下沿脉拐角处" layer="960" position="164.6,-962.73,173.6" pos="405.73,-1188,410.36"/>
<machine id="019604" name="-960m2-4沿脉拐角" layer="960" position="67.13,-962.73,230.64" pos="613.26,-1188,288.52"/>
<machine id="019605" name="-960m2穿南11采场岔口" layer="960" position="5.29,-962.73,121.7" pos="1097.43,-1188,718.48"/>
<machine id="019606" name="-960m1号采变电所" layer="960" position="-128.26,-962.73,44.63" pos="995.13,-1188,659.32"/>
<machine id="019607" name="-960m2穿北16采场岔口" layer="960" position="-233.7,-962.73,-15.9" pos="1195.85,-1188,775.4"/>
<machine id="019610" name="-960m措施井贯穿巷" layer="960" position="-8.7,-962.72,-33.43" pos="773.73,-1188,832.76"/>
<machine id="019611" name="-960m措施井马头门" layer="960" position="-30.92,-962.72,21.12" pos="803.04,-1188,720.36"/>
<machine id="019612" name="-960m0穿16采场岔口" layer="960" position="-198.2,-962.72,-141.23" pos="1113.2,-1188,1028.3"/>
<machine id="196013" name="-960m2采区变电所" layer="960" position="-371.04,-962.72,-364.34" pos="916.65,-1188,1007.16"/>
<machine id="019615" name="-960m8t爆破器材库配电" layer="960" position="-276.04,-962.72,-212.8" pos="1302.21,-1188,1183.42"/>
<machine id="019616" name="-960m回风井200m处" layer="960" position="-328.44,-962.72,-275.5" pos="1420.87,-1188,1341.01"/>
<machine id="010004" name="960-1020回风井斜坡道上拐角" layer="960" position="168.9,-962.73,212.95" pos="1515.89,-1246.77,1322.93"/>
<machine id="010005" name="960-1020回风井斜坡道中拐角" layer="960" position="232.14,-962.73,286.37" pos="1442.11,-1248,1159.43"/>
<machine id="010201" name="-1020m马头门" layer="1020" position="367.07,-1022.67,401.99" pos="21.95,-1248,-58.44"/>
<machine id="010202" name="-1020m值班硐室" layer="1020" position="337.44,-1022.67,384" pos="105.97,-1248,31.07"/>
<machine id="010203" name="-1020m无轨维修硐室" layer="1020" position="261.86,-1022.67,255.02" pos="234.12,-1248,234.21"/>
<machine id="010205" name="-1020石门巷与0穿沿脉拐角" layer="1020" position="247.54,-1022.67,139.67" pos="258.66,-1248,436.82"/>
<machine id="010206" name="-1020m石门巷与2穿沿脉弯处" layer="1020" position="176.47,-1022.67,169.19" pos="405.19,-1248,395.26"/>
<machine id="010207" name="-1020m2穿270m处" layer="1020" position="22.5,-1022.67,129" pos="719.74,-1248,483.58"/>
<machine id="010208" name="-1020m1号采区变电所" layer="1020" position="-130.1,-1022.67,40.4" pos="997.91,-1248,643.15"/>
<machine id="010209" name="-1020m2穿16采场岔口处" layer="1020" position="-222.63,-1022.67,-13.07" pos="1208.12,-1248,763.93"/>
<machine id="010210" name="-1020m1#风机洞室" layer="1020" position="-307.28,-1022.67,-99.66" pos="1386.09,-1248,907.99"/>
<machine id="010211" name="960-1020回风井斜坡道下拐角" layer="1020" position="-278.7,-1022.67,-193.15" pos="1310.99,-1248,1123.28"/>
<machine id="010214" name="-1020m0穿16#采场岔口" layer="1020" position="-171.6,-1022.67,-131.6" pos="1126.89,-1248,1018.25"/>
<machine id="010215" name="-1020m0穿250m处" layer="1020" position="147.38,-1022.67,51.05" pos="475.07,-1248,643.4"/>
<machine id="010216" name="-1020m措施井" layer="1020" position="-32.11,-1022.67,23.95" pos="842.89,-1248,641.9"/>
<machine id="010217" name="-1020m2穿4穿沿脉拐角处" layer="1020" position="89.1,-1022.67,214.84" pos="568.19,-1248,304.71"/>
<machine id="010218" name="-1020m0穿措施井岔口" layer="1020" position="-406.08,-1022.67,29.88" pos="761.07,-1248,807.31"/>
<machine id="010601" name="-1060m中央变电所" layer="1060" position="347.43,-1062.86,406.03" pos="89.99,-1288,-38.59"/>
<machine id="010602" name="-1060m石门100m" layer="1060" position="342.11,-1062.86,369.14" pos="77.63,-1288,7.86"/>
<machine id="010603" name="1060m0穿卸载站岔口" layer="1060" position="456.54,-1062.86,286.94" pos="-168.79,-1288,204.82"/>
<machine id="010604" name="-1060m卸载站1石门侧小弯处" layer="1060" position="341.9,-1062.86,349.55" pos="75.44,-1288,56.18"/>
<machine id="010605" name="-1060m卸载站1" layer="1060" position="443.56,-1062.86,314.59" pos="-132.28,-1288,129.24"/>
<machine id="010606" name="2#卸载站" layer="1060" position="449.2,-1062.86,327.58" pos="81.3,-1288,34.33"/>
<machine id="010607" name="2#卸载站" layer="1060" position="358.7,-1062.86,363.08" pos="-149.25,-1288,105"/>
<machine id="010609" name="-1060m牵引变电所" layer="1060" position="309.68,-1062.86,203.12" pos="160.11,-1288,379.62"/>
<machine id="010610" name="-1060m0穿牵引变岔口" layer="1060" position="309.68,-1062.86,168.08" pos="152.09,-1288,454.4"/>
<machine id="010611" name="-1060m0穿50m处" layer="1060" position="431.21,-1062.86,237.71" pos="-117.47,-1288,299.44"/>
<machine id="010612" name="-1060m0—1溜井处" layer="1060" position="200.3,-1062.86,103.7" pos="412.36,-1288,604.73"/>
<machine id="010613" name="-1060m0—3溜井处" layer="1060" position="41.7,-1062.86,10.26" pos="716.78,-1288,780.12"/>
<machine id="010614" name="-1060m措施井0穿侧" layer="1060" position="-29.31,-1062.86,-19.58" pos="788.63,-1288,802.25"/>
<machine id="010615" name="-1060m措施井巷道中部" layer="1060" position="-57.9,-1062.86,2.2" pos="866.75,-1288,733.65"/>
<machine id="010616" name="-1060m措施井巷道2穿侧" layer="1060" position="-87.8,-1062.86,54.4" pos="922.1,-1288,634.65"/>
<machine id="010617" name="-1060m2穿维修硐室岔口" layer="1060" position="-75.27,-1062.86,79.52" pos="381.71,-1288,285.14"/>
<machine id="010618" name="-1060m2-1溜井附近" layer="1060" position="81.96,-1062.86,173.46" pos="656.28,-1288,443.69"/>
<machine id="010619" name="-1060m牵引变电所" layer="1060" position="295.6,-1062.86,307.08" pos="880.28,-1288,573.86"/>
<machine id="010620" name="-1060m2穿2号环线岔口" layer="1060" position="-138.5,-1062.86,43.3" pos="1068.56,-1288,681.98"/>
<machine id="010621" name="-1060m2穿2号环线岔口" layer="1060" position="-220.27,-1062.86,-5.17" pos="1221.65,-1288,780.65"/>
<machine id="010622" name="-1060m2穿3号环线弯处" layer="1060" position="-295.99,-1062.86,-48.9" pos="1408.09,-1288,906.12"/>
<machine id="010623" name="-1060m3号环线2穿岔口" layer="1060" position="-307.21,-1062.86,-86.66" pos="1418.17,-1288,931.5"/>
<machine id="010624" name="-1060m3号环线0穿弯处" layer="1060" position="-245,-1062.86,-167.96" pos="1189.21,-1288,1143.45"/>
<machine id="010625" name="-1060m0穿三号环线弯处" layer="1060" position="-199.9,-1062.86,-170.64" pos="1190.77,-1288,1144.31"/>
<machine id="010626" name="-1060m0穿2号环线岔口" layer="1060" position="-130,-1062.86,-129.1" pos="1072.97,-1288,1077.11"/>
<machine id="010627" name="-1060m0-4溜井附近" layer="1060" position="-57.2,-1062.86,-87.4" pos="870.41,-1288,960.62"/>
<machine id="010630" name="-1060m0穿变宽弯处" layer="1060" position="-34.58,-1062.86,-33.95" pos="808.58,-1288,832.9"/>
<machine id="010631" name="-1060m2号环线0穿弯处" layer="1060" position="-159.7,-1062.86,-121.3" pos="832.93,-1288,867.45"/>
<machine id="010632" name="-1060m2号环线2穿弯处" layer="1060" position="-221.5,-1062.86,-48" pos="1223.05,-1288,856.7"/>
<machine id="011301" name="-11317旋回破碎硐室" layer="other" position="381.82,-1145.91,366.89" pos="-38.12,-1361.77,73.4"/>
<machine id="011302" name="-1130m破碎硐室配电室" layer="other" position="401.45,-1166.96,403.01" pos="-36.13,-1362.53,90.76"/>
<machine id="011303" name="-1130m破碎硐室外巷道口" layer="other" position="390.79,-1205.84,392.4" pos="-13.32,-1360,44.61"/>
<machine id="012001" name="1200皮带巷" layer="other" position="403.77,-1205.83,365.44" pos="-70.18,-1431.07,39.15"/>
<machine id="018701" name="187平硐马头门" layer="187" position="368.3,184.09,403.83" pos="9.9,-41,3.19"/>
<machine id="018702" name="187平硐等候硐室" layer="187" position="329.73,184.09,359.16" pos="20.3,-41,15.93"/>
<machine id="028704" name="唯一性入井闸机" layer="187" position="162.49,184.09,417.94" pos="123.86,-41,-18.25"/>
<machine id="038704" name="唯一性入井闸机" layer="187" position="162.66,184.09,418.47" pos="125.03,-41,-18.68"/>
<machine id="048704" name="唯一性入井闸机" layer="187" position="162.81,184.09,418.92" pos="126.76,-41,-19.31"/>
<machine id="058704" name="唯一性入井闸机" layer="187" position="162.94,184.09,419.34" pos="125.83,-41,-18.97"/>
<machine id="021501" name="副井井口" layer="other" position="372.1,215.51,406.35" pos="0.58,0,0"/>
</machines>
<co>
<coma id="101KG100414" name="-1020m0号穿脉口测无轨维修硐室口co" layer="960" position="-363,-962.7,-346"/>
<coma id="021502" name="-1020m0号穿脉口测无轨维修硐室口co" layer="960" position="65.04,-962.7,224.2"/>
<coma id="021503" name="-1020m0号穿脉口测无轨维修硐室口co" layer="1020" position="-179.6,-1022.7,11.9"/>
<coma id="021504" name="-1020m-1060m2回风井斜坡道口co" layer="1020" position="-123.3,-1022.7,43.3"/>
<coma id="021505" name="-1020m2穿北11采场co" layer="1020" position="-67.8,-1022.7,79.23"/>
<coma id="021506" name="-1020m2穿北7采场co" layer="1020" position="-386.6,-1022.4,-380.6"/>
<coma id="021507" name="-1020m0穿12采场co" layer="other" position="404.23,-1206.2,361.5"/>
</co>
<InterLink ip="10.10.22.21:12081/dev-api"></InterLink>
</xml>
\ No newline at end of file
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unity WebGL Player | longxin</title>
<link rel="shortcut icon" href="TemplateData/favicon.ico" />
<link rel="stylesheet" href="TemplateData/style.css" />
</head>
<body style="height: 100%; width: 100%">
<div
id="unity-container"
class="unity-desktop"
style="height: 100%; width: 100%; overflow: hidden"
>
<canvas id="unity-canvas"></canvas>
<div id="unity-loading-bar">
<div id="unity-logo"></div>
<div id="unity-progress-bar-empty">
<div id="unity-progress-bar-full"></div>
</div>
</div>
<div id="unity-mobile-warning">
WebGL builds are not supported on mobile devices.
</div>
<div id="unity-footer">
<div id="unity-webgl-logo"></div>
<div id="unity-fullscreen-button"></div>
<div id="unity-build-title">longxin</div>
</div>
</div>
<script>
var buildUrl = "Build";
var loaderUrl = buildUrl + "/lx.loader.js";
var config = {
dataUrl: buildUrl + "/lx.data",
frameworkUrl: buildUrl + "/lx.framework.js",
codeUrl: buildUrl + "/lx.wasm",
streamingAssetsUrl: "StreamingAssets",
companyName: "DefaultCompany",
productName: "longxin",
productVersion: "0.1",
};
var container = document.querySelector("#unity-container");
var canvas = document.querySelector("#unity-canvas");
var loadingBar = document.querySelector("#unity-loading-bar");
var progressBarFull = document.querySelector("#unity-progress-bar-full");
var fullscreenButton = document.querySelector("#unity-fullscreen-button");
var mobileWarning = document.querySelector("#unity-mobile-warning");
if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
container.className = "unity-mobile";
config.devicePixelRatio = 1;
mobileWarning.style.display = "block";
setTimeout(() => {
mobileWarning.style.display = "none";
}, 5000);
} else {
canvas.style.width = "100%";
canvas.style.height = "100%";
}
loadingBar.style.display = "block";
var script = document.createElement("script");
script.src = loaderUrl;
script.onload = () => {
createUnityInstance(canvas, config, (progress) => {
progressBarFull.style.width = 100 * progress + "%";
})
.then((unityInstance) => {
loadingBar.style.display = "none";
fullscreenButton.onclick = () => {
unityInstance.SetFullscreen(1);
};
})
.catch((message) => {
alert(message);
});
};
document.body.appendChild(script);
</script>
</body>
</html>
<template>
<div class="hangdao">
<div class="h-pic">
<!-- <div class="h-pic">
<div class="hd h960" v-show="picNum===1">
<div class="point" v-if="COdata&&COdata.length>0&&COdata[6].installationLocation" :title="`${COdata[6].installationLocation}:${COdata[6].measurePointValue}`"></div>
......@@ -27,162 +27,206 @@
<p :class="picNum===2?'h-active':''" @click="zdClick(2)"><span>-1020m中段</span></p>
<p :class="picNum===3?'h-active':''" @click="zdClick(3)"><span>-1130m中段</span></p>
</div>
-->
<iframe class="h-pic" src="/lx_screen/index.html" frameborder="0"></iframe>
<el-dialog title="监控视频" :visible.sync="videoDialog" width="660px">
<iframe
:src="`http://10.7.148.106:10800/play.html?channel=${channel}&iframe=yes&aspect=640x360`"
width="640"
height="360"
allowfullscreen
allow="autoplay; fullscreen"
></iframe>
</el-dialog>
</div>
</template>
<script>
import { mqttlist } from "@/api/avoidanceSys/bigscreen";
export default {
data() {
return {
picNum:1,
COdata:[],
}
picNum: 1,
COdata: [],
videoDialog: false,
channel: "",
};
},
mounted() {
this.getCO()
this.getCO();
window.addEventListener("message", this.handleWindowMessage);
},
methods: {
getCO(){
mqttlist().then(res=>{
console.log(res.rows,'res')
this.COdata = res.rows
})
handleWindowMessage(event) {
if (event.data.type === "openPopup") {
this.channel = event.data.channel;
this.videoDialog = true;
}
},
zdClick(num){
getCO() {
mqttlist().then((res) => {
console.log(res.rows, "res");
this.COdata = res.rows;
});
},
zdClick(num) {
this.picNum = num;
}
}
}
},
},
};
</script>
<style scoped lang="scss">
.hangdao{
.h-pic{
width: 1694px;
height: 1590px;
.hangdao {
.h-pic {
width: 2900px;
height: 1754px;
position: relative;
.hd{
overflow: hidden;
/**关闭Y轴滚动条 */
&::-webkit-scrollbar {
display: none;
}
.hd {
width: 100%;
height: 100%;
position: relative;
.point{
.point {
width: 80px;
height: 108px;
position: absolute;
background: no-repeat center center url("~@/assets/images/surescreen/co-def.png");
background: no-repeat center center
url("~@/assets/images/surescreen/co-def.png");
background-size: cover;
cursor: pointer;
&:hover{
background: no-repeat center center url("~@/assets/images/surescreen/co-act.png");
&:hover {
background: no-repeat center center
url("~@/assets/images/surescreen/co-act.png");
background-size: cover;
}
}
.point-act{
background: no-repeat center center url("~@/assets/images/surescreen/co-act.png");
.point-act {
background: no-repeat center center
url("~@/assets/images/surescreen/co-act.png");
background-size: cover;
}
}
}
.h960{
.h960 {
width: 100%;
height: 100%;
background: no-repeat center center url("~@/assets/images/surescreen/960.png");
background: no-repeat center center
url("~@/assets/images/surescreen/960.png");
background-size: cover;
.point{
&:nth-child(1){
.point {
&:nth-child(1) {
right: 36px;
top:50px;
top: 50px;
}
&:nth-child(2){
&:nth-child(2) {
left: 720px;
bottom: 370px;
}
}
}
.h1020{
.h1020 {
width: 100%;
height: 100%;
background: no-repeat center center url("~@/assets/images/surescreen/1020.png");
background: no-repeat center center
url("~@/assets/images/surescreen/1020.png");
background-size: cover;
.point{
&:nth-child(1){
.point {
&:nth-child(1) {
left: 934px;
bottom: 640px;
}
&:nth-child(2){
&:nth-child(2) {
left: 1020px;
bottom: 690px;
}
&:nth-child(3){
&:nth-child(3) {
left: 1120px;
bottom: 750px;
}
&:nth-child(4){
&:nth-child(4) {
right: 20px;
top: -50px;
}
}
}
.h1130{
.h1130 {
width: 100%;
height: 100%;
background: no-repeat center center url("~@/assets/images/surescreen/1130.png");
background: no-repeat center center
url("~@/assets/images/surescreen/1130.png");
background-size: cover;
.point{
&:nth-child(1){
.point {
&:nth-child(1) {
left: 587px;
bottom: 697px;
}
}
}
.h-btn{
.h-btn {
display: flex;
justify-content: space-between;
p{
p {
width: 463px;
height: 106px;
margin-top: 40px;
background: no-repeat center center url("~@/assets/images/surescreen/btn-def.png");
background: no-repeat center center
url("~@/assets/images/surescreen/btn-def.png");
background-size: cover;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
span{
background: linear-gradient(0deg, #CEA568 0%, #D7D7D7 0%, #68B0CE 0%, #FFFFFF 100%);
span {
background: linear-gradient(
0deg,
#cea568 0%,
#d7d7d7 0%,
#68b0ce 0%,
#ffffff 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: bold;
font-size: 40px;
display: block;
}
&:hover{
background: no-repeat center center url("~@/assets/images/surescreen/btn-act.png");
&:hover {
background: no-repeat center center
url("~@/assets/images/surescreen/btn-act.png");
background-size: cover;
span{
background: linear-gradient(0deg, #68B0CE 0%, #CEA568 0%, #21FCFF 0%, #FFFFFF 100%);
span {
background: linear-gradient(
0deg,
#68b0ce 0%,
#cea568 0%,
#21fcff 0%,
#ffffff 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
}
p.h-active{
background: no-repeat center center url("~@/assets/images/surescreen/btn-act.png");
p.h-active {
background: no-repeat center center
url("~@/assets/images/surescreen/btn-act.png");
background-size: cover;
span{
background: linear-gradient(0deg, #68B0CE 0%, #CEA568 0%, #21FCFF 0%, #FFFFFF 100%);
span {
background: linear-gradient(
0deg,
#68b0ce 0%,
#cea568 0%,
#21fcff 0%,
#ffffff 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
}
}
</style>
\ No newline at end of file
</style>
......@@ -13,7 +13,7 @@
</el-tree>
</div> -->
<!-- 弹窗 -->
<el-dialog title="监控视频" :visible.sync="videoDialog" width="60%">
<el-dialog title="监控视频" :visible.sync="videoDialog" width="660px">
<iframe
:src="`http://10.7.148.106:10800/play.html?channel=${channel}&iframe=yes&aspect=640x360`"
width="640"
......@@ -100,28 +100,15 @@ export default {
};
},
mounted() {
this.$nextTick(() => {
setTimeout(() => {
this.loading = false;
}, 300);
const that = this;
window.onresize = function temp() {
that.height = document.documentElement.clientHeight - 94.5 + "px;";
};
this.intervalId = setInterval(this.checkLocalStorage, 1000);
});
//从路由里面拿参数
this.channel = this.$route.query.channel;
if (this.channel) {
// 打开弹窗
this.videoDialog = true;
} else {
// 关闭弹窗
this.videoDialog = false;
}
window.addEventListener("message", this.handleWindowMessage);
},
methods: {
handleWindowMessage(event) {
if (event.data.type === "openPopup") {
this.channel = event.data.channel;
this.videoDialog = true;
}
},
nodeClick(obj) {
if (obj.val) {
this.sendTo3D(obj.val);
......
......@@ -4,13 +4,103 @@
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
<div class="card-panel" @click="getDialogList('待处理')">
<div class="card-panel-icon-wrapper icon1">
<img class="icon1" src="@/assets/images/icon1.png"/>
<img class="icon1" src="@/assets/images/icon1.png" />
</div>
<div class="card-panel-description">
<count-to :start-val="0" :end-val="voObj.pending" :duration="1000" class="card-panel-num" style="color:rgb(64, 158, 255);"/>
<div class="card-panel-text">
待处理
<count-to
:start-val="0"
:end-val="voObj.pending"
:duration="1000"
class="card-panel-num"
style="color: rgb(64, 158, 255)"
/>
<div class="card-panel-text">待处理</div>
</div>
</div>
</el-col>
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
<div class="card-panel">
<div class="card-panel-icon-wrapper icon5">
<img
class="icon5"
style="width: 64px; height: 64px"
src="@/assets/images/icon5.png"
/>
</div>
<div class="card-panel-description">
<count-to
:start-val="0"
:end-val="voObj.totalCount"
class="card-panel-num"
style="color: #34bfa3"
/>
<div class="card-panel-text">物资总数</div>
</div>
</div>
</el-col>
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
<div class="card-panel">
<div class="dynamic-type-container">
<div class="dynamic-title">物资类型分布</div>
<div class="dynamic-content">
<div class="list-wrap">
<div class="list-content">
<!-- 原始数据 -->
<div
v-for="(item, index) in typeRatio"
:key="index"
class="type-item"
:style="{ backgroundColor: colors[index % colors.length] }"
>
<div class="type-info">
<span class="type-name">{{ item.name }}</span>
<span class="type-percent">{{ item.value }}%</span>
</div>
<el-progress
:percentage="item.value"
:show-text="false"
:color="colors[(index + 1) % colors.length]"
/>
</div>
<!-- 克隆数据实现无缝滚动 -->
<div
v-for="(item, index) in typeRatio"
:key="index + '_clone'"
class="type-item"
:style="{ backgroundColor: colors[index % colors.length] }"
>
<div class="type-info">
<span class="type-name">{{ item.name }}</span>
<span class="type-percent">{{ item.value }}%</span>
</div>
<el-progress
:percentage="item.value"
:show-text="false"
:color="colors[(index + 1) % colors.length]"
/>
</div>
</div>
</div>
</div>
</div>
</div>
</el-col>
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
<div class="card-panel">
<div class="expire-ratio-container">
<div
v-for="(item, index) in expireRatio"
:key="index"
class="ratio-item"
:style="{
backgroundColor: item.name === '未过期' ? '#67C23A' : '#F56C6C',
}"
>
<div class="ratio-content">
<div class="ratio-value">{{ item.value }}%</div>
<div class="ratio-label">{{ item.name }}</div>
</div>
</div>
</div>
</div>
......@@ -63,221 +153,169 @@
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>应急预案更新提醒</span>
</div>
<div class="item">
<el-table
:data="PlansData"
height="300"
border
style="width: 100%">
<el-table-column
prop="planName"
label="应急预案名称"
>
<el-table :data="PlansData" height="300" border style="width: 100%">
<el-table-column prop="planName" label="应急预案名称">
</el-table-column>
<el-table-column
prop="versionNumber"
label="版本号"
>
<template slot-scope="scope">
<span>v{{ scope.row.versionNumber }}</span>
</template>
<el-table-column prop="versionNumber" label="版本号">
<template slot-scope="scope">
<span>v{{ scope.row.versionNumber }}</span>
</template>
</el-table-column>
<el-table-column
prop="createDate"
label="创建日期">
<el-table-column prop="createDate" label="创建日期">
</el-table-column>
<el-table-column
prop="versionStatus"
label="版本状态">
<el-table-column prop="versionStatus" label="版本状态">
<template slot-scope="scope">
<dict-tag :options="dict.type.version_status" :value="scope.row.versionStatus"/>
<dict-tag
:options="dict.type.version_status"
:value="scope.row.versionStatus"
/>
</template>
</el-table-column>
<el-table-column label="" align="center" class-name="small-padding fixed-width">
<el-table-column
label=""
align="center"
class-name="small-padding fixed-width"
>
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
>预案更新</el-button>
>预案更新</el-button
>
</template>
</el-table-column>
</el-table>
</div>
</el-card>
</el-col>
<el-col :xs="24" :sm="24" :lg="12" class="mb20" >
<el-col :xs="24" :sm="24" :lg="12" class="mb20">
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>应急演练到期提醒</span>
</div>
<div class="item">
<el-table
:data="DrillsData"
border
height="300"
style="width: 100%">
<el-table-column
prop="drillName"
label="应急演练名称"
>
style="width: 100%"
>
<el-table-column prop="drillName" label="应急演练名称">
</el-table-column>
<el-table-column
prop="drillDate"
label="计划日期"
>
<el-table-column prop="drillDate" label="计划日期">
</el-table-column>
<el-table-column
prop="responsiblePerson"
label="负责人">
<el-table-column prop="responsiblePerson" label="负责人">
</el-table-column>
<el-table-column
prop="planName"
label="演练应急预案">
<el-table-column prop="planName" label="演练应急预案">
</el-table-column>
</el-table>
</div>
</el-card>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :xs="24" :sm="24" :lg="12" class="mb20" >
<el-col :xs="24" :sm="24" :lg="12" class="mb20">
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>应急物资到期提醒</span>
</div>
<div class="item">
<el-table
:data="InforData"
border
height="300"
style="width: 100%">
<el-table-column
prop="materialName"
label="物资名称"
>
<el-table :data="InforData" border height="300" style="width: 100%">
<el-table-column prop="materialName" label="物资名称">
</el-table-column>
<el-table-column
prop="inNumber"
label="数量"
>
</el-table-column>
<el-table-column
prop="warehouseId"
label="所在仓库">
<el-table-column prop="inNumber" label="数量"> </el-table-column>
<el-table-column prop="warehouseId" label="所在仓库">
<template slot-scope="scope">
<span>{{ findLabelByValue(warehouseList,scope.row.warehouseId) }}</span>
<span>{{
findLabelByValue(warehouseList, scope.row.warehouseId)
}}</span>
</template>
</el-table-column>
<el-table-column
prop="effectiveDate"
label="到期日期">
<el-table-column prop="effectiveDate" label="到期日期">
</el-table-column>
</el-table>
</div>
</el-card>
</el-col>
<el-col :xs="24" :sm="24" :lg="12" class="mb20" >
<el-col :xs="24" :sm="24" :lg="12" class="mb20">
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>应急物资库存预警</span>
</div>
<div class="item">
<el-table
:data="InventoryData"
border
height="300"
style="width: 100%">
<el-table-column
prop="materialName"
label="物资名称"
>
style="width: 100%"
>
<el-table-column prop="materialName" label="物资名称">
</el-table-column>
<el-table-column
prop="specifications"
label="规格"
>
<el-table-column prop="specifications" label="规格">
</el-table-column>
<el-table-column
prop="inNumber"
label="数量">
</el-table-column>
<el-table-column
prop="warehouseId"
label="所在仓库">
<el-table-column prop="inNumber" label="数量"> </el-table-column>
<el-table-column prop="warehouseId" label="所在仓库">
<template slot-scope="scope">
<span>{{ findLabelByValue(warehouseList,scope.row.warehouseId) }}</span>
<span>{{
findLabelByValue(warehouseList, scope.row.warehouseId)
}}</span>
</template>
</el-table-column>
<el-table-column
prop="stockStatus"
label="库存预警" >
<el-table-column prop="stockStatus" label="库存预警">
<template slot-scope="scope">
<dict-tag :options="dict.type.inventory_alert" :value="scope.row.stockStatus"/>
<dict-tag
:options="dict.type.inventory_alert"
:value="scope.row.stockStatus"
/>
</template>
</el-table-column>
<el-table-column
prop="excessOrShortageAmount"
label="缺货/过剩数量">
label="缺货/过剩数量"
>
</el-table-column>
</el-table>
</div>
</el-card>
</el-col>
</el-row>
<el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body>
<el-table
:data="voListDet"
height="500"
border
style="width: 100%">
<el-table-column
prop="planName"
label="应急预案名称"
>
</el-table-column>
<el-table-column
prop="versionNumber"
label="版本号"
>
<el-dialog
:title="title"
:visible.sync="open"
width="1000px"
append-to-body
>
<el-table :data="voListDet" height="500" border style="width: 100%">
<el-table-column prop="planName" label="应急预案名称">
</el-table-column>
<el-table-column
prop="planType"
label="预案类型">
<el-table-column prop="versionNumber" label="版本号"> </el-table-column>
<el-table-column prop="planType" label="预案类型">
<template slot-scope="scope">
<dict-tag :options="dict.type.epm_status" :value="scope.row.planType"/>
<dict-tag
:options="dict.type.epm_status"
:value="scope.row.planType"
/>
</template>
</el-table-column>
<el-table-column
prop="createTime"
label="日期">
<el-table-column prop="createTime" label="日期">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
<span>{{ parseTime(scope.row.createTime, "{y}-{m}-{d}") }}</span>
</template>
</el-table-column>
<el-table-column
prop="auditStatus"
label="审批状态">
<el-table-column prop="auditStatus" label="审批状态">
<template slot-scope="scope">
<dict-tag :options="dict.type.approval_status" :value="scope.row.auditStatus"/>
<dict-tag
:options="dict.type.approval_status"
:value="scope.row.auditStatus"
/>
</template>
</el-table-column>
<el-table-column
class-name="small-padding fixed-width"
label="操作">
<el-table-column class-name="small-padding fixed-width" label="操作">
<template slot-scope="scope">
<el-button
size="mini"
......@@ -285,153 +323,285 @@
icon="el-icon-view"
@click="handleView(scope.row)"
v-if="title === '待处理'"
>查看审批</el-button>
>查看审批</el-button
>
<el-button
size="mini"
type="text"
icon="el-icon-view"
@click="handleView(scope.row)"
v-else
>查看</el-button>
>查看</el-button
>
</template>
</el-table-column>
</el-table>
</el-dialog>
</div>
</template>
<script>
import CountTo from 'vue-count-to'
import { listEmergencyPlans, getTabMergencyDrillsList, getTabMaterialInforList, getTabMaterialInventory,approvalVoList,pending,processed,initiated,received } from "@/api/avoidanceSys/home";
import CountTo from "vue-count-to";
import {
listEmergencyPlans,
getTabMergencyDrillsList,
getTabMaterialInforList,
getTabMaterialInventory,
approvalVoList,
pending,
processed,
initiated,
received,
} from "@/api/avoidanceSys/home";
import { listWarehouse } from "@/api/avoidanceSys/warehouse";
import { getAlarmCoMax } from "@/api/alarm";
export default {
dicts: ['version_status', 'sys_user_sex','epm_status','approval_status','inventory_alert'],
dicts: [
"version_status",
"sys_user_sex",
"epm_status",
"approval_status",
"inventory_alert",
],
/**模板 */
components: {
CountTo,
},
data(){
return{
open:false,
title:null,
tableData: [{
date: 'a',
name: 'cs',
address: 'emmmm'
}],
warehouseList:[],
PlansData:[],
DrillsData:[],
InforData:[],
InventoryData:[],
voObj:{pending:0,processed:0,initiated:0,received:0},
voListDet:[],
alarmInterval: null
}
data() {
return {
open: false,
title: null,
tableData: [
{
date: "a",
name: "cs",
address: "emmmm",
},
],
warehouseList: [],
PlansData: [],
DrillsData: [],
InforData: [],
InventoryData: [],
voObj: {
pending: 0,
processed: 0,
initiated: 0,
received: 0,
totalCount: 0, //物资总数
},
typeRatio: [],
expireRatio: [],
colors: ["#FF6B6B", "#FFD93D", "#6C5B7B"],
voListDet: [],
alarmInterval: null,
};
},
created() {
console.log(1)
this.getWarehouseList()
this.getList()
this.getAlarm()
console.log(1);
this.getWarehouseList();
this.getList();
this.getAlarm();
this.alarmInterval = setInterval(() => {
this.getAlarm();
}, 600000);
},
beforeDestroy() {
if (this.alarmInterval) {
clearInterval(this.alarmInterval);
}
},
mounted() {},
methods: {
getAlarm(){
getAlarmCoMax().then(res => {
if(res!='数据为空'){
this.$notify({
title: '警告',
message: res,
type: 'warning'
getAlarm() {
getAlarmCoMax().then((res) => {
console.log("res", res);
//res为数组,需要根据数组里面每一条进行弹窗显示
if (res && res.length > 0) {
let offset = 60;
res.forEach((item) => {
this.$notify({
title: "警告",
message: item,
type: "warning",
offset: offset,
onClose: () => (offset -= 60),
});
offset += 60;
});
}
})
});
},
getWarehouseList(){
listWarehouse().then(response => {
this.warehouseList = this.transformArray(response.rows,'id','warehouseName');
getWarehouseList() {
listWarehouse().then((response) => {
this.warehouseList = this.transformArray(
response.rows,
"id",
"warehouseName"
);
});
},
getList(){
approvalVoList().then(res=>{
this.voObj= res[0]
})
listEmergencyPlans().then(res=>{
this.PlansData= res.rows
})
getTabMergencyDrillsList().then(res=>{
this.DrillsData= res.rows
})
getTabMaterialInforList().then(res=>{
this.InforData= res.rows
})
getTabMaterialInventory().then(res=>{
this.InventoryData= res.rows
})
getList() {
approvalVoList().then((res) => {
this.voObj = res[0];
this.typeRatio = res[0].typeRatio;
this.expireRatio = res[0].expireRatio;
});
listEmergencyPlans().then((res) => {
this.PlansData = res.rows;
});
getTabMergencyDrillsList().then((res) => {
this.DrillsData = res.rows;
});
getTabMaterialInforList().then((res) => {
this.InforData = res.rows;
});
getTabMaterialInventory().then((res) => {
this.InventoryData = res.rows;
});
},
getDialogList(val){
getDialogList(val) {
this.voListDet = [];
if(val === '待处理'){
pending().then(res=>{
if(res&&res.rows&&res.code===200){
if (val === "待处理") {
pending().then((res) => {
if (res && res.rows && res.code === 200) {
this.title = val;
this.voListDet = res.rows;
this.open = true;
}
})
}else if(val === '已处理'){
processed().then(res=>{
if(res&&res.rows&&res.code===200){
});
} else if (val === "已处理") {
processed().then((res) => {
if (res && res.rows && res.code === 200) {
this.title = val;
this.voListDet = res.rows;
this.open = true;
}
})
}else if(val === '已发起'){
initiated().then(res=>{
if(res&&res.rows&&res.code===200){
});
} else if (val === "已发起") {
initiated().then((res) => {
if (res && res.rows && res.code === 200) {
this.title = val;
this.voListDet = res.rows;
this.open = true;
}
})
}else if(val === '我收到的'){
received().then(res=>{
if(res&&res.rows&&res.code===200){
});
} else if (val === "我收到的") {
received().then((res) => {
if (res && res.rows && res.code === 200) {
this.title = val;
this.voListDet = res.rows;
this.open = true;
}
})
});
}
},
handleView(row){
this.$router.push("/EmergencyPlanManagement/check?id=" + row.id+"&parentVersionId="+row.parentVersionId);
handleView(row) {
this.$router.push(
"/EmergencyPlanManagement/check?id=" +
row.id +
"&parentVersionId=" +
row.parentVersionId
);
},
handleUpdate(row) {
this.$router.push("/EmergencyPlanManagement/editEPM?id=" + row.id);
},
}
}
},
};
</script>
<style lang="scss" scoped>
.dynamic-type-container {
padding: 12px;
height: 100%;
.dynamic-title {
font-weight: 600;
color: #303133;
margin-bottom: 12px;
}
.dynamic-content {
height: calc(100% - 34px);
overflow: hidden;
.type-item {
margin-bottom: 8px;
padding: 8px;
border-radius: 4px;
.type-info {
display: flex;
justify-content: space-between;
margin-bottom: 4px;
.type-name {
font-size: 12px;
color: #fff;
}
.type-percent {
font-size: 14px;
font-weight: bold;
color: #fff;
}
}
}
.list-wrap {
height: 100%;
position: relative;
}
.list-content {
position: absolute;
width: 100%;
animation: scroll 20s linear infinite;
&:hover {
animation-play-state: paused;
}
}
}
}
@keyframes scroll {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-50%);
}
}
.expire-ratio-container {
display: flex;
height: 100%;
padding: 8px;
.ratio-item {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
margin: 0 4px;
.ratio-content {
text-align: center;
color: #fff;
.ratio-value {
font-size: 24px;
font-weight: bold;
line-height: 1.2;
}
.ratio-label {
font-size: 14px;
}
}
}
}
.panel-group {
margin-top: 18px;
......@@ -447,8 +617,8 @@ export default {
overflow: hidden;
color: #666;
background: #fff;
box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
border-color: rgba(0, 0, 0, .05);
box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
border-color: rgba(0, 0, 0, 0.05);
&:hover {
.card-panel-icon-wrapper {
......@@ -468,7 +638,7 @@ export default {
}
.icon-shopping {
background: #34bfa3
background: #34bfa3;
}
}
......@@ -485,7 +655,7 @@ export default {
}
.icon-shopping {
color: #34bfa3
color: #34bfa3;
}
.card-panel-icon-wrapper {
......@@ -511,7 +681,6 @@ export default {
line-height: 18px;
color: rgba(0, 0, 0, 0.45);
font-size: 16px;
}
.card-panel-num {
......@@ -523,7 +692,7 @@ export default {
}
}
@media (max-width:550px) {
@media (max-width: 550px) {
.card-panel-description {
display: none;
}
......@@ -541,7 +710,7 @@ export default {
}
}
}
.mb20{
.mb20 {
margin-bottom: 20px;
}
// .item{
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment