all

css/common.css

@@ -0,0 +1,200 @@
+#app{
+    box-sizing: border-box;
+    padding: 12px;
+    width: 100%;
+    height: 100%;
+}
+.content{
+    background: #fff;
+    width: 100%;
+    height: 100%; 
+    display: flex;
+    border: 1px solid #e8e8e8;
+    border-radius: 4px;
+    position: relative;
+}
+.context-menu{
+position: absolute;
+z-index: 9;
+background: #fff;
+display: flex;
+flex-direction: column;
+padding: 4px 6px;
+border-radius: 2px;
+box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
+}
+.context-menu >div{
+    cursor: pointer;
+    font-size: 14px;
+    line-height: 22px;
+}
+.context-menu >div:hover{
+        background-color: #f5f5f5;
+}
+.tree-content{
+    padding: 12px 0;
+    width: 20%;
+    border-right: 1px solid #e8e8e8;
+    display: flex;
+    flex-direction: column;
+}
+.input-box{
+    padding: 0 8px;
+}
+.tree-box{
+    flex: 1;
+    min-height: 0;  
+    overflow-y: auto;
+}
+.ant-tree-child-tree li .ant-tree-switcher{
+    visibility: hidden;
+}
+.bottom-btns{
+    padding: 8px 8px  0 8px;
+    display: flex;
+    justify-content: center;
+}
+.right-content{
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+}
+.panel-views{
+    flex: 1;
+    min-height: 0;
+}
+.sub-content{
+    height: 100%;
+    width: 100%;
+}
+.history-trend{
+    display: flex;
+    flex-direction: column;
+}
+.top-selector{
+    border-bottom: 1px solid #e8e8e8;
+    padding: 0 24px 12px 0;
+    text-align: right;
+}
+.top-selector .custom-date-picker {
+    width: 360px !important; 
+}
+.trend-graph-container{
+   flex: 1;
+   min-height: 0;
+   overflow-y: auto;
+   overflow-x: hidden;
+}
+.trend-graph-container .trend-item{
+border-bottom: 1px dashed #e8e8e8;
+height: 240px;
+display: flex;
+flex-direction: column;
+}
+.trend-graph-container .trend-item .title{
+    padding: 12px 0 0 12px;
+    font-size: 14px;
+    font-weight: 700;
+}
+.trend-graph-container .trend-item .line-graph{
+    flex: 1;
+    min-height: 0;
+}
+.alarm-config .grid-content{
+    padding: 0 24px;
+}
+.alarm-config .search-bar{
+    padding: 0 24px 0 24px;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+}
+.alarm-config .search-bar .search-item{
+    margin-right: 24px;
+    margin-bottom: 12px;
+}
+.alarm-config .search-bar .break{
+    flex-basis: 100%;
+    height: 0; /* 避免影响垂直间距 */
+}
+
+.config-page{
+    padding: 0 24px;
+}
+.config-page .station-config{
+    padding-bottom: 12px;
+    border-bottom: 1px dashed #e8e8e8;
+}
+.config-page .station-config .title,.config-page .path-config .title{
+    font-size: 14px;
+    font-weight: 700;
+}
+.path-config{
+    margin-top: 12px;
+}
+.config-page .path-config .path-item{
+    margin-top: 12px;
+}
+.config-page .path-config .path-item .name{
+    font-size: 14px;
+}
+.config-page .path-config .path-item .row{
+    margin: 4px 0;
+}
+.config-page .station-config .station{
+    margin-top: 12px;
+}
+
+.config-page .delete-bar{
+    margin-top: 12px;
+}
+.config-page .delete-bar .delete-time{
+    margin-right: 12px;
+}
+.config-page .delete-bar .label{
+    margin-right: 8px;
+}
+.is-root  > .el-tree-node__content {
+    background-color: transparent!important;
+    color: inherit!important;
+  }
+.total-prpd,
+.prpd-and-prps{
+    display: flex;
+    flex-direction: column;
+}
+.total-prpd .trend-box,
+.prpd-and-prps .trend-box{
+height: 180px;
+border-bottom: 1px solid #e8e8e8;
+}
+.total-prpd .prpd-box,
+.prpd-and-prps .prpd-and-prps-box{
+   flex: 1;
+   min-height: 0;
+   display: grid;
+   grid-template-columns: repeat(3, 1fr); 
+   grid-template-rows: repeat(2, 1fr);     
+ }
+ .total-prpd .prpd-box .total-prpd-item,
+ .prpd-and-prps .prpd-and-prps-box .prpd-and-prps-item{
+border: 1px solid #e8e8e8;
+ }
+ .prps-and-prpd-container{
+    height: 100%;
+width: 100%;
+position: relative; 
+}
+.prps-and-prpd-container .switcher{
+    position: absolute;
+    bottom: 0;
+}
+.prps-and-prpd-container .switcher >span{
+    cursor: pointer;
+    font-size: 12px;
+    margin-left: 8px;
+}
+.prps-and-prpd-container .switcher .active-span{
+    color: #1890ff;
+}

js/zh-cn.min.js

@@ -0,0 +1,2 @@
+/*! Element Plus v2.10.2 */(function(u,e){typeof exports=="object"&&typeof module!="undefined"?module.exports=e():typeof define=="function"&&define.amd?define(e):(u=typeof globalThis!="undefined"?globalThis:u||self,u.ElementPlusLocaleZhCn=e())})(this,function(){"use strict";var u={name:"zh-cn",el:{breadcrumb:{label:"\u9762\u5305\u5C51"},colorpicker:{confirm:"\u786E\u5B9A",clear:"\u6E05\u7A7A",defaultLabel:"\u989C\u8272\u9009\u62E9\u5668",description:"\u5F53\u524D\u989C\u8272 {color}\uFF0C\u6309 Enter \u952E\u9009\u62E9\u65B0\u989C\u8272",alphaLabel:"\u9009\u62E9\u900F\u660E\u5EA6\u7684\u503C"},datepicker:{now:"\u6B64\u523B",today:"\u4ECA\u5929",cancel:"\u53D6\u6D88",clear:"\u6E05\u7A7A",confirm:"\u786E\u5B9A",dateTablePrompt:"\u4F7F\u7528\u65B9\u5411\u952E\u4E0E Enter \u952E\u53EF\u9009\u62E9\u65E5\u671F",monthTablePrompt:"\u4F7F\u7528\u65B9\u5411\u952E\u4E0E Enter \u952E\u53EF\u9009\u62E9\u6708\u4EFD",yearTablePrompt:"\u4F7F\u7528\u65B9\u5411\u952E\u4E0E Enter \u952E\u53EF\u9009\u62E9\u5E74\u4EFD",selectedDate:"\u5DF2\u9009\u65E5\u671F",selectDate:"\u9009\u62E9\u65E5\u671F",selectTime:"\u9009\u62E9\u65F6\u95F4",startDate:"\u5F00\u59CB\u65E5\u671F",startTime:"\u5F00\u59CB\u65F6\u95F4",endDate:"\u7ED3\u675F\u65E5\u671F",endTime:"\u7ED3\u675F\u65F6\u95F4",prevYear:"\u524D\u4E00\u5E74",nextYear:"\u540E\u4E00\u5E74",prevMonth:"\u4E0A\u4E2A\u6708",nextMonth:"\u4E0B\u4E2A\u6708",year:"\u5E74",month1:"1 \u6708",month2:"2 \u6708",month3:"3 \u6708",month4:"4 \u6708",month5:"5 \u6708",month6:"6 \u6708",month7:"7 \u6708",month8:"8 \u6708",month9:"9 \u6708",month10:"10 \u6708",month11:"11 \u6708",month12:"12 \u6708",weeks:{sun:"\u65E5",mon:"\u4E00",tue:"\u4E8C",wed:"\u4E09",thu:"\u56DB",fri:"\u4E94",sat:"\u516D"},weeksFull:{sun:"\u661F\u671F\u65E5",mon:"\u661F\u671F\u4E00",tue:"\u661F\u671F\u4E8C",wed:"\u661F\u671F\u4E09",thu:"\u661F\u671F\u56DB",fri:"\u661F\u671F\u4E94",sat:"\u661F\u671F\u516D"},months:{jan:"\u4E00\u6708",feb:"\u4E8C\u6708",mar:"\u4E09\u6708",apr:"\u56DB\u6708",may:"\u4E94\u6708",jun:"\u516D\u6708",jul:"\u4E03\u6708",aug:"\u516B\u6708",sep:"\u4E5D\u6708",oct:"\u5341\u6708",nov:"\u5341\u4E00\u6708",dec:"\u5341\u4E8C\u6708"}},inputNumber:{decrease:"\u51CF\u5C11\u6570\u503C",increase:"\u589E\u52A0\u6570\u503C"},select:{loading:"\u52A0\u8F7D\u4E2D",noMatch:"\u65E0\u5339\u914D\u6570\u636E",noData:"\u65E0\u6570\u636E",placeholder:"\u8BF7\u9009\u62E9"},dropdown:{toggleDropdown:"\u5207\u6362\u4E0B\u62C9\u9009\u9879"},mention:{loading:"\u52A0\u8F7D\u4E2D"},cascader:{noMatch:"\u65E0\u5339\u914D\u6570\u636E",loading:"\u52A0\u8F7D\u4E2D",placeholder:"\u8BF7\u9009\u62E9",noData:"\u6682\u65E0\u6570\u636E"},pagination:{goto:"\u524D\u5F80",pagesize:"\u6761/\u9875",total:"\u5171 {total} \u6761",pageClassifier:"\u9875",page:"\u9875",prev:"\u4E0A\u4E00\u9875",next:"\u4E0B\u4E00\u9875",currentPage:"\u7B2C {pager} \u9875",prevPages:"\u5411\u524D {pager} \u9875",nextPages:"\u5411\u540E {pager} \u9875",deprecationWarning:"\u4F60\u4F7F\u7528\u4E86\u4E00\u4E9B\u5DF2\u88AB\u5E9F\u5F03\u7684\u7528\u6CD5\uFF0C\u8BF7\u53C2\u8003 el-pagination \u7684\u5B98\u65B9\u6587\u6863"},dialog:{close:"\u5173\u95ED\u6B64\u5BF9\u8BDD\u6846"},drawer:{close:"\u5173\u95ED\u6B64\u5BF9\u8BDD\u6846"},messagebox:{title:"\u63D0\u793A",confirm:"\u786E\u5B9A",cancel:"\u53D6\u6D88",error:"\u8F93\u5165\u7684\u6570\u636E\u4E0D\u5408\u6CD5!",close:"\u5173\u95ED\u6B64\u5BF9\u8BDD\u6846"},upload:{deleteTip:"\u6309 Delete \u952E\u53EF\u5220\u9664",delete:"\u5220\u9664",preview:"\u67E5\u770B\u56FE\u7247",continue:"\u7EE7\u7EED\u4E0A\u4F20"},slider:{defaultLabel:"\u6ED1\u5757\u4ECB\u4E8E {min} \u81F3 {max}",defaultRangeStartLabel:"\u9009\u62E9\u8D77\u59CB\u503C",defaultRangeEndLabel:"\u9009\u62E9\u7ED3\u675F\u503C"},table:{emptyText:"\u6682\u65E0\u6570\u636E",confirmFilter:"\u7B5B\u9009",resetFilter:"\u91CD\u7F6E",clearFilter:"\u5168\u90E8",sumText:"\u5408\u8BA1"},tour:{next:"\u4E0B\u4E00\u6B65",previous:"\u4E0A\u4E00\u6B65",finish:"\u7ED3\u675F\u5BFC\u89C8"},tree:{emptyText:"\u6682\u65E0\u6570\u636E"},transfer:{noMatch:"\u65E0\u5339\u914D\u6570\u636E",noData:"\u65E0\u6570\u636E",titles:["\u5217\u8868 1","\u5217\u8868 2"],filterPlaceholder:"\u8BF7\u8F93\u5165\u641C\u7D22\u5185\u5BB9",noCheckedFormat:"\u5171 {total} \u9879",hasCheckedFormat:"\u5DF2\u9009 {checked}/{total} \u9879"},image:{error:"\u52A0\u8F7D\u5931\u8D25"},pageHeader:{title:"\u8FD4\u56DE"},popconfirm:{confirmButtonText:"\u786E\u5B9A",cancelButtonText:"\u53D6\u6D88"},carousel:{leftArrow:"\u4E0A\u4E00\u5F20\u5E7B\u706F\u7247",rightArrow:"\u4E0B\u4E00\u5F20\u5E7B\u706F\u7247",indicator:"\u5E7B\u706F\u7247\u5207\u6362\u81F3\u7D22\u5F15 {index}"}}};return u});
+//# sourceMappingURL=zh-cn.min.js.map

three/Lut.js

@@ -0,0 +1,200 @@
+(function(){
+	class Lut {
+
+		constructor( colormap, count = 32 ) {
+   
+		   this.isLut = true;
+   
+		   this.lut = [];
+		   this.map = [];
+		   this.n = 0;
+		   this.minV = 0;
+		   this.maxV = 1;
+   
+		   this.setColorMap( colormap, count );
+   
+	   }
+   
+	   set( value ) {
+   
+		   if ( value.isLut === true ) {
+   
+			   this.copy( value );
+   
+		   }
+   
+		   return this;
+   
+	   }
+   
+	   setMin( min ) {
+   
+		   this.minV = min;
+   
+		   return this;
+   
+	   }
+   
+	   setMax( max ) {
+   
+		   this.maxV = max;
+   
+		   return this;
+   
+	   }
+   
+	   setColorMap( colormap, count = 32 ) {
+   
+		   this.map = ColorMapKeywords[ colormap ] || ColorMapKeywords.rainbow;
+		   this.n = count;
+   
+		   const step = 1.0 / this.n;
+		   const minColor = new THREE.Color();
+		   const maxColor = new THREE.Color();
+   
+		   this.lut.length = 0;
+   
+		   // sample at 0
+   
+		   this.lut.push( new THREE.Color( this.map[ 0 ][ 1 ] ) );
+   
+		   // sample at 1/n, ..., (n-1)/n
+   
+		   for ( let i = 1; i < count; i ++ ) {
+   
+			   const alpha = i * step;
+   
+			   for ( let j = 0; j < this.map.length - 1; j ++ ) {
+   
+				   if ( alpha > this.map[ j ][ 0 ] && alpha <= this.map[ j + 1 ][ 0 ] ) {
+   
+					   const min = this.map[ j ][ 0 ];
+					   const max = this.map[ j + 1 ][ 0 ];
+   
+					   minColor.setHex( this.map[ j ][ 1 ],  THREE.LinearSRGBColorSpace );
+					   maxColor.setHex( this.map[ j + 1 ][ 1 ],  THREE.LinearSRGBColorSpace );
+   
+					   const color = new THREE.Color().lerpColors( minColor, maxColor, ( alpha - min ) / ( max - min ) );
+   
+					   this.lut.push( color );
+   
+				   }
+   
+			   }
+   
+		   }
+   
+		   // sample at 1
+   
+		   this.lut.push( new THREE.Color( this.map[ this.map.length - 1 ][ 1 ] ) );
+   
+		   return this;
+   
+	   }
+   
+	   copy( lut ) {
+   
+		   this.lut = lut.lut;
+		   this.map = lut.map;
+		   this.n = lut.n;
+		   this.minV = lut.minV;
+		   this.maxV = lut.maxV;
+   
+		   return this;
+   
+	   }
+   
+	   getColor( alpha ) {
+   
+		   alpha =  THREE.MathUtils.clamp( alpha, this.minV, this.maxV );
+   
+		   alpha = ( alpha - this.minV ) / ( this.maxV - this.minV );
+   
+		   const colorPosition = Math.round( alpha * this.n );
+   
+		   return this.lut[ colorPosition ];
+   
+	   }
+   
+	   addColorMap( name, arrayOfColors ) {
+   
+		   ColorMapKeywords[ name ] = arrayOfColors;
+   
+		   return this;
+   
+	   }
+   
+	   createCanvas() {
+   
+		   const canvas = document.createElement( 'canvas' );
+		   canvas.width = 1;
+		   canvas.height = this.n;
+   
+		   this.updateCanvas( canvas );
+   
+		   return canvas;
+   
+	   }
+   
+	   updateCanvas( canvas ) {
+   
+		   const ctx = canvas.getContext( '2d', { alpha: false } );
+   
+		   const imageData = ctx.getImageData( 0, 0, 1, this.n );
+   
+		   const data = imageData.data;
+   
+		   let k = 0;
+   
+		   const step = 1.0 / this.n;
+   
+		   const minColor = new THREE.Color();
+		   const maxColor = new THREE.Color();
+		   const finalColor = new THREE.Color();
+   
+		   for ( let i = 1; i >= 0; i -= step ) {
+   
+			   for ( let j = this.map.length - 1; j >= 0; j -- ) {
+   
+				   if ( i < this.map[ j ][ 0 ] && i >= this.map[ j - 1 ][ 0 ] ) {
+   
+					   const min = this.map[ j - 1 ][ 0 ];
+					   const max = this.map[ j ][ 0 ];
+   
+					   minColor.setHex( this.map[ j - 1 ][ 1 ],  THREE.LinearSRGBColorSpace );
+					   maxColor.setHex( this.map[ j ][ 1 ],  THREE.LinearSRGBColorSpace );
+   
+					   finalColor.lerpColors( minColor, maxColor, ( i - min ) / ( max - min ) );
+   
+					   data[ k * 4 ] = Math.round( finalColor.r * 255 );
+					   data[ k * 4 + 1 ] = Math.round( finalColor.g * 255 );
+					   data[ k * 4 + 2 ] = Math.round( finalColor.b * 255 );
+					   data[ k * 4 + 3 ] = 255;
+   
+					   k += 1;
+   
+				   }
+   
+			   }
+   
+		   }
+   
+		   ctx.putImageData( imageData, 0, 0 );
+   
+		   return canvas;
+   
+	   }
+   
+   }
+   
+   const ColorMapKeywords = {
+   
+	   'rainbow': [[ 0.0, 0x0000FF ], [ 0.2, 0x00FFFF ], [ 0.5, 0x00FF00 ], [ 0.8, 0xFFFF00 ], [ 1.0, 0xFF0000 ]],
+	   'cooltowarm': [[ 0.0, 0x3C4EC2 ], [ 0.2, 0x9BBCFF ], [ 0.5, 0xDCDCDC ], [ 0.8, 0xF6A385 ], [ 1.0, 0xB40426 ]],
+	   'blackbody': [[ 0.0, 0x000000 ], [ 0.2, 0x780000 ], [ 0.5, 0xE63200 ], [ 0.8, 0xFFFF00 ], [ 1.0, 0xFFFFFF ]],
+	   'grayscale': [[ 0.0, 0x000000 ], [ 0.2, 0x404040 ], [ 0.5, 0x7F7F80 ], [ 0.8, 0xBFBFBF ], [ 1.0, 0xFFFFFF ]]
+   
+	};
+	THREE.Lut = Lut;
+})()
+

three/stats.module.js

@@ -0,0 +1,167 @@
+var Stats = function () {
+
+	var mode = 0;
+
+	var container = document.createElement( 'div' );
+	container.style.cssText = 'position:fixed;top:0;left:0;cursor:pointer;opacity:0.9;z-index:10000';
+	container.addEventListener( 'click', function ( event ) {
+
+		event.preventDefault();
+		showPanel( ++ mode % container.children.length );
+
+	}, false );
+
+	//
+
+	function addPanel( panel ) {
+
+		container.appendChild( panel.dom );
+		return panel;
+
+	}
+
+	function showPanel( id ) {
+
+		for ( var i = 0; i < container.children.length; i ++ ) {
+
+			container.children[ i ].style.display = i === id ? 'block' : 'none';
+
+		}
+
+		mode = id;
+
+	}
+
+	//
+
+	var beginTime = ( performance || Date ).now(), prevTime = beginTime, frames = 0;
+
+	var fpsPanel = addPanel( new Stats.Panel( 'FPS', '#0ff', '#002' ) );
+	var msPanel = addPanel( new Stats.Panel( 'MS', '#0f0', '#020' ) );
+
+	if ( self.performance && self.performance.memory ) {
+
+		var memPanel = addPanel( new Stats.Panel( 'MB', '#f08', '#201' ) );
+
+	}
+
+	showPanel( 0 );
+
+	return {
+
+		REVISION: 16,
+
+		dom: container,
+
+		addPanel: addPanel,
+		showPanel: showPanel,
+
+		begin: function () {
+
+			beginTime = ( performance || Date ).now();
+
+		},
+
+		end: function () {
+
+			frames ++;
+
+			var time = ( performance || Date ).now();
+
+			msPanel.update( time - beginTime, 200 );
+
+			if ( time >= prevTime + 1000 ) {
+
+				fpsPanel.update( ( frames * 1000 ) / ( time - prevTime ), 100 );
+
+				prevTime = time;
+				frames = 0;
+
+				if ( memPanel ) {
+
+					var memory = performance.memory;
+					memPanel.update( memory.usedJSHeapSize / 1048576, memory.jsHeapSizeLimit / 1048576 );
+
+				}
+
+			}
+
+			return time;
+
+		},
+
+		update: function () {
+
+			beginTime = this.end();
+
+		},
+
+		// Backwards Compatibility
+
+		domElement: container,
+		setMode: showPanel
+
+	};
+
+};
+
+Stats.Panel = function ( name, fg, bg ) {
+
+	var min = Infinity, max = 0, round = Math.round;
+	var PR = round( window.devicePixelRatio || 1 );
+
+	var WIDTH = 80 * PR, HEIGHT = 48 * PR,
+		TEXT_X = 3 * PR, TEXT_Y = 2 * PR,
+		GRAPH_X = 3 * PR, GRAPH_Y = 15 * PR,
+		GRAPH_WIDTH = 74 * PR, GRAPH_HEIGHT = 30 * PR;
+
+	var canvas = document.createElement( 'canvas' );
+	canvas.width = WIDTH;
+	canvas.height = HEIGHT;
+	canvas.style.cssText = 'width:80px;height:48px';
+
+	var context = canvas.getContext( '2d' );
+	context.font = 'bold ' + ( 9 * PR ) + 'px Helvetica,Arial,sans-serif';
+	context.textBaseline = 'top';
+
+	context.fillStyle = bg;
+	context.fillRect( 0, 0, WIDTH, HEIGHT );
+
+	context.fillStyle = fg;
+	context.fillText( name, TEXT_X, TEXT_Y );
+	context.fillRect( GRAPH_X, GRAPH_Y, GRAPH_WIDTH, GRAPH_HEIGHT );
+
+	context.fillStyle = bg;
+	context.globalAlpha = 0.9;
+	context.fillRect( GRAPH_X, GRAPH_Y, GRAPH_WIDTH, GRAPH_HEIGHT );
+
+	return {
+
+		dom: canvas,
+
+		update: function ( value, maxValue ) {
+
+			min = Math.min( min, value );
+			max = Math.max( max, value );
+
+			context.fillStyle = bg;
+			context.globalAlpha = 1;
+			context.fillRect( 0, 0, WIDTH, GRAPH_Y );
+			context.fillStyle = fg;
+			context.fillText( round( value ) + ' ' + name + ' (' + round( min ) + '-' + round( max ) + ')', TEXT_X, TEXT_Y );
+
+			context.drawImage( canvas, GRAPH_X + PR, GRAPH_Y, GRAPH_WIDTH - PR, GRAPH_HEIGHT, GRAPH_X, GRAPH_Y, GRAPH_WIDTH - PR, GRAPH_HEIGHT );
+
+			context.fillRect( GRAPH_X + GRAPH_WIDTH - PR, GRAPH_Y, PR, GRAPH_HEIGHT );
+
+			context.fillStyle = bg;
+			context.globalAlpha = 0.9;
+			context.fillRect( GRAPH_X + GRAPH_WIDTH - PR, GRAPH_Y, PR, round( ( 1 - ( value / maxValue ) ) * GRAPH_HEIGHT ) );
+
+		}
+
+	};
+
+};
+
+export default Stats;