zy-wcs.git - Gitblit

			@@ -18,11 +18,13 @@
			<style>
			.crn-speed {
			width: 100%;
			height: 35%;
			height: 75%;
			position: absolute;
			text-align: center;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			top: -15%;
			/border-bottom: 1px solid rgba(0, 0, 0, 0.3);/
			}

			@@ -33,13 +35,20 @@
			font-family:'Pacifico',serif
			}
			.speed-content {
			display: inline-block;
			height: 100%;
			}
			.speed-chart {
			float: left;
			width: 100%;
			height: 100%;
			}


			.scroll-pane {
			position: absolute;
			top: 42%;
			width: 100%;
			height: 65%;
			height: 58%;
			}
			.scroll-bar {
			float: left;
			@@ -184,17 +193,19 @@
			<!-- 中上 -->
			<div class="crn-speed">
			<div class="speed-content">
			<div>
			<span>堆垛机走行速度：</span><span id="xSpeed" class="counter">5.00</span><span>米/秒</span>
			<div id="crn-chart" class="speed-chart">
			</div>
			<div>
			<span>堆垛机升降速度：</span><span id="ySpeed" class="counter">5.00</span><span>米/秒</span>
			</div>
			<!-- <div id="xSpeed-chart" class="speed-chart">-->
			<!--<!– <span>堆垛机走行速度：</span><span id="xSpeed" class="counter">5.00</span><span>米/秒</span>–>-->
			<!-- </div>-->
			<!-- <div id="ySpeed-chart" class="speed-chart">-->
			<!--<!– <span>堆垛机升降速度：</span><span id="ySpeed" class="counter">5.00</span><span>米/秒</span>–>-->
			<!-- </div>-->
			</div>
			</div>

			<!-- 中下 -->
			<div class="scroll-pane">

			<div class="layui-carousel" id="test1">
			<div carousel-item>
			<div class="item-img" id="img-1" style="background-color: red"></div>
			@@ -368,10 +379,284 @@
			/********************************** 堆垛机速度 ***********************************/
			/***********************************************************************************/





			var crnChart = echarts.init(document.getElementById('crn-chart'));
			crnChartOption = {
			// backgroundColor: '#1b1b1b',
			tooltip: {
			formatter: '{a} <br/>{c} {b}'
			},
			toolbox: {
			show: true,
			feature: {
			mark: {show: true},
			restore: {show: true},
			saveAsImage: {show: true}
			}
			},
			series: [
			{
			name: '速度',
			type: 'gauge',
			min: 0,
			max: 220,
			splitNumber: 11,
			radius: '50%',
			axisLine: { // 坐标轴线
			lineStyle: { // 属性lineStyle控制线条样式
			color: [[0.09, 'lime'], [0.82, '#1e90ff'], [1, '#ff4500']],
			width: 3,
			shadowColor: '#fff', //默认透明
			shadowBlur: 10
			}
			},
			axisLabel: { // 坐标轴小标记
			fontWeight: 'bolder',
			color: '#fff',
			shadowColor: '#fff', //默认透明
			shadowBlur: 10
			},
			axisTick: { // 坐标轴小标记
			length: 15, // 属性length控制线长
			lineStyle: { // 属性lineStyle控制线条样式
			color: 'auto',
			shadowColor: '#fff', //默认透明
			shadowBlur: 10
			}
			},
			splitLine: { // 分隔线
			length: 25, // 属性length控制线长
			lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
			width: 3,
			color: '#fff',
			shadowColor: '#fff', //默认透明
			shadowBlur: 10
			}
			},
			pointer: { // 分隔线
			shadowColor: '#fff', //默认透明
			shadowBlur: 5
			},
			title: {
			textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
			fontWeight: 'bolder',
			fontSize: 20,
			fontStyle: 'italic',
			color: '#fff',
			shadowColor: '#fff', //默认透明
			shadowBlur: 10
			}
			},
			detail: {
			backgroundColor: 'rgba(30,144,255,0.8)',
			borderWidth: 1,
			borderColor: '#fff',
			shadowColor: '#fff', //默认透明
			shadowBlur: 5,
			offsetCenter: [0, '50%'], // x, y，单位px
			textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
			fontWeight: 'bolder',
			color: '#fff'
			}
			},
			data: [{value: 40, name: 'km/h'}]
			},
			{
			name: '转速',
			type: 'gauge',
			center: ['25%', '55%'], // 默认全局居中
			radius: '30%',
			min: 0,
			max: 7,
			endAngle: 45,
			splitNumber: 7,
			axisLine: { // 坐标轴线
			lineStyle: { // 属性lineStyle控制线条样式
			color: [[0.29, 'lime'], [0.86, '#1e90ff'], [1, '#ff4500']],
			width: 2,
			shadowColor: '#fff', //默认透明
			shadowBlur: 10
			}
			},
			axisLabel: { // 坐标轴小标记
			fontWeight: 'bolder',
			color: '#fff',
			shadowColor: '#fff', //默认透明
			shadowBlur: 10
			},
			axisTick: { // 坐标轴小标记
			length: 12, // 属性length控制线长
			lineStyle: { // 属性lineStyle控制线条样式
			color: 'auto',
			shadowColor: '#fff', //默认透明
			shadowBlur: 10
			}
			},
			splitLine: { // 分隔线
			length: 20, // 属性length控制线长
			lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
			width: 3,
			color: '#fff',
			shadowColor: '#fff', //默认透明
			shadowBlur: 10
			}
			},
			pointer: {
			width: 5,
			shadowColor: '#fff', //默认透明
			shadowBlur: 5
			},
			title: {
			offsetCenter: [0, '-30%'], // x, y，单位px
			textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
			fontWeight: 'bolder',
			fontStyle: 'italic',
			color: '#fff',
			shadowColor: '#fff', //默认透明
			shadowBlur: 10
			}
			},
			detail: {
			//backgroundColor: 'rgba(30,144,255,0.8)',
			// borderWidth: 1,
			borderColor: '#fff',
			shadowColor: '#fff', //默认透明
			shadowBlur: 5,
			width: 80,
			height: 30,
			offsetCenter: [25, '20%'], // x, y，单位px
			textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
			fontWeight: 'bolder',
			color: '#fff'
			}
			},
			data: [{value: 1.5, name: 'x1000 r/min'}]
			},
			{
			name: '油表',
			type: 'gauge',
			center: ['75%', '50%'], // 默认全局居中
			radius: '30%',
			min: 0,
			max: 2,
			startAngle: 135,
			endAngle: 45,
			splitNumber: 2,
			axisLine: { // 坐标轴线
			lineStyle: { // 属性lineStyle控制线条样式
			color: [[0.2, 'lime'], [0.8, '#1e90ff'], [1, '#ff4500']],
			width: 2,
			shadowColor: '#fff', //默认透明
			shadowBlur: 10
			}
			},
			axisTick: { // 坐标轴小标记
			length: 12, // 属性length控制线长
			lineStyle: { // 属性lineStyle控制线条样式
			color: 'auto',
			shadowColor: '#fff', //默认透明
			shadowBlur: 10
			}
			},
			axisLabel: {
			fontWeight: 'bolder',
			color: '#fff',
			shadowColor: '#fff', //默认透明
			shadowBlur: 10,
			formatter: function (v){
			switch (v + '') {
			case '0': return 'E';
			case '1': return 'Gas';
			case '2': return 'F';
			}
			}
			},
			splitLine: { // 分隔线
			length:15, // 属性length控制线长
			lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
			width:3,
			color: '#fff',
			shadowColor: '#fff', //默认透明
			shadowBlur: 10
			}
			},
			pointer: {
			width:2,
			shadowColor: '#fff', //默认透明
			shadowBlur: 5
			},
			title: {
			show: false
			},
			detail: {
			show: false
			},
			data: [{value: 0.5, name: 'gas'}]
			},
			{
			name: '水表',
			type: 'gauge',
			center: ['75%', '50%'], // 默认全局居中
			radius: '30%',
			min: 0,
			max: 2,
			startAngle: 315,
			endAngle: 225,
			splitNumber: 2,
			axisLine: { // 坐标轴线
			lineStyle: { // 属性lineStyle控制线条样式
			color: [[0.2, 'lime'], [0.8, '#1e90ff'], [1, '#ff4500']],
			width: 2,
			shadowColor: '#fff', //默认透明
			shadowBlur: 10
			}
			},
			axisTick: { // 坐标轴小标记
			show: false
			},
			axisLabel: {
			fontWeight: 'bolder',
			color: '#fff',
			shadowColor: '#fff', //默认透明
			shadowBlur: 10,
			formatter: function(v){
			switch (v + '') {
			case '0': return 'H';
			case '1': return 'Water';
			case '2': return 'C';
			}
			}
			},
			splitLine: { // 分隔线
			length: 15, // 属性length控制线长
			lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
			width: 3,
			color: '#fff',
			shadowColor: '#fff', //默认透明
			shadowBlur: 10
			}
			},
			pointer: {
			width: 2,
			shadowColor: '#fff', //默认透明
			shadowBlur: 5
			},
			title: {
			show: false
			},
			detail: {
			show: false
			},
			data:[{value: 0.5, name: 'gas'}]
			}
			]
			};
			setInterval(function (){
			crnChartOption.series[0].data[0].value = (Math.random()*100).toFixed(2) - 0;
			crnChartOption.series[1].data[0].value = (Math.random()*7).toFixed(2) - 0;
			crnChartOption.series[2].data[0].value = (Math.random()*2).toFixed(2) - 0;
			crnChartOption.series[3].data[0].value = (Math.random()*2).toFixed(2) - 0;
			crnChart.setOption(crnChartOption);
			}, 1000);


			/***********************************************************************************/