工业工联网沙盘大屏交接代码第一次提交

2 years ago · 6f6332fae4
27 changed files with 3939 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,24 @@
+.DS_Store
+node_modules
+/dist
+
+/tests/e2e/videos/
+/tests/e2e/screenshots/
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/img/bg-big.png
+++ b/img/bg-big.png
--- a/img/border-small.png
+++ b/img/border-small.png
--- a/img/border.png
+++ b/img/border.png
--- a/img/crk.png
+++ b/img/crk.png
--- a/img/hbfx.png
+++ b/img/hbfx.png
--- a/img/header-1.png
+++ b/img/header-1.png
--- a/img/header-2.png
+++ b/img/header-2.png
--- a/img/header-3.png
+++ b/img/header-3.png
--- a/img/header-4.png
+++ b/img/header-4.png
--- a/img/header-5.png
+++ b/img/header-5.png
--- a/img/header-6.png
+++ b/img/header-6.png
--- a/img/icon-title.png
+++ b/img/icon-title.png
--- a/img/icon.png
+++ b/img/icon.png
--- a/img/smfx.png
+++ b/img/smfx.png
--- a/img/title-bg.png
+++ b/img/title-bg.png
--- a/img/title-decorate-left.png
+++ b/img/title-decorate-left.png
--- a/img/title-decorate-right.png
+++ b/img/title-decorate-right.png
--- a/img/video1.mp4
+++ b/img/video1.mp4
--- a/img/video2.mp4
+++ b/img/video2.mp4
--- a/index.html
+++ b/index.html
--- a/js/echarts-liquidfill.js
+++ b/js/echarts-liquidfill.js
--- a/js/echarts.min.js
+++ b/js/echarts.min.js
--- a/js/echarts5_0_1.min.js
+++ b/js/echarts5_0_1.min.js
--- a/js/jquery-1.7.2.min.js
+++ b/js/jquery-1.7.2.min.js
--- a/js/scroll/index.html
+++ b/js/scroll/index.html
@ -0,0 +1,192 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+
+<head>
+	<meta charset="utf-8">
+	<title>jQuery无缝滚动</title>
+	<style>
+		* {
+			margin: 0;
+			padding: 0;
+		}
+
+		.container {
+			width: 400px;
+			margin: 50px auto;
+		}
+
+		.header {
+			text-align: center;
+			margin-bottom: 10px;
+		}
+
+		.title {
+			border-left: 5px solid blue;
+			line-height: 35px;
+			padding-left: 5px;
+			margin-bottom: 5px;
+		}
+
+		.scroll {
+			width: 400px;
+			height: 260px;
+			border: 1px solid #ccc;
+			line-height: 26px;
+			font-size: 12px;
+			overflow: hidden;
+		}
+
+		.flex-between {
+			display: flex;
+			justify-content: space-between;
+		}
+
+		.flex-between-center {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+		}
+
+		.bg-primary {
+			background-color: #0099CC;
+		}
+
+		.padding-5 {
+			padding: 5px;
+		}
+
+		.margin-t-20 {
+			margin-top: 20px;
+		}
+
+		a {
+			text-decoration: none;
+		}
+
+		.inline {
+			display: inline-block;
+			width: 10px;
+			height: 10px;
+			border-radius: 50%;
+			background-color: #339933;
+			margin: 0 10px;
+		}
+
+		.underline {
+			display: inline-block;
+			width: 10px;
+			height: 10px;
+			border-radius: 50%;
+			background-color: #FF0033;
+			margin: 0 10px;
+		}
+
+		.select {
+			margin-top: 10px;
+		}
+	</style>
+</head>
+
+<body>
+	<div class="container">
+		<h1 class="header">jQuery无缝滚动</h1>
+		<h4 class="title">车辆巡查</h4>
+		<div class="scroll">
+			<ul>
+				<li>
+					<div class="margin-b-5 padding-5">
+						<div class="flex-between-center">
+							<div>
+								<div class="bg-primary padding-5 margin-b-5">闽D29101</div>
+								<div>在线状态</div>
+							</div>
+							<div>保洁车</div>
+						</div>
+						<div class="flex-between">
+							<div><span class="inline"></span>在线</div>
+							<div>上次在线 2018-09-23 10:32:32</div>
+						</div>
+					</div>
+				</li>
+				<li>
+					<div class="margin-b-5 padding-5">
+						<div class="flex-between-center">
+							<div>
+								<div class="bg-primary padding-5 margin-b-5">闽D29102</div>
+								<div>在线状态</div>
+							</div>
+							<div>保洁车</div>
+						</div>
+						<div class="flex-between">
+							<div><span class="underline"></span>离线</div>
+							<div>上次在线 2018-09-23 10:32:32</div>
+						</div>
+					</div>
+				</li>
+				<li>
+					<div class="margin-b-5 padding-5">
+						<div class="flex-between-center">
+							<div>
+								<div class="bg-primary padding-5 margin-b-5">闽D29103</div>
+								<div>在线状态</div>
+							</div>
+							<div>保洁车</div>
+						</div>
+						<div class="flex-between">
+							<div><span class="underline"></span>离线</div>
+							<div>上次在线 2018-09-23 10:32:32</div>
+						</div>
+					</div>
+				</li>
+				<li>
+					<div class="margin-b-5 padding-5">
+						<div class="flex-between-center">
+							<div>
+								<div class="bg-primary padding-5 margin-b-5">闽D29104</div>
+								<div>在线状态</div>
+							</div>
+							<div>保洁车</div>
+						</div>
+						<div class="flex-between">
+							<div><span class="inline"></span>在线</div>
+							<div>上次在线 2018-09-23 10:32:32</div>
+						</div>
+					</div>
+				</li>
+				<li>
+					<div class="margin-b-5 padding-5">
+						<div class="flex-between-center">
+							<div>
+								<div class="bg-primary padding-5 margin-b-5">闽D29105</div>
+								<div>在线状态</div>
+							</div>
+							<div>保洁车</div>
+						</div>
+						<div class="flex-between">
+							<div><span class="underline"></span>离线</div>
+							<div>上次在线 2018-09-23 10:32:32</div>
+						</div>
+					</div>
+				</li>
+			</ul>
+		</div>
+		<div class="margin-t-20">
+			<div class="select"><a href="./index.html">li元素固定格式展示</a></div>
+			<div class="select"><a href="./index2.html">li元素无固定格式展示</a></div>
+			<div class="select"><a href="./index3.html">横向滚动展示</a></div>
+		</div>
+	</div>
+	<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
+	<script src="js/scroll.js"></script>
+	<script type="text/javascript">
+		$(function () {
+			$('.scroll').scroll({
+				speed: 80, //数值越大，速度越快
+			});
+		});
+	</script>
+
+</body>
+
+
+</html>
--- a/js/scroll/scroll.js
+++ b/js/scroll/scroll.js
@ -0,0 +1,67 @@
+// JavaScript Document
+(function ($) {
+	$.fn.scroll = function (options) {
+		//默认配置
+		var defaults = {
+			speed: 30,  //滚动速度为0-100之间
+			direction: 'vertical'  //方向：vertical向上滚动,horizantal向左滚动
+		};
+
+		var opts = $.extend({}, defaults, options), intId = [];
+
+		function marquee(obj, step, direction) {
+			if (direction == 'horizantal') {
+				obj.find("ul").animate({
+					marginLeft: '-=1'
+				}, 0, function () {
+					var s = Math.abs(parseInt($(this).css("margin-left")));
+					if (s >= step) {
+						$(this).find("li").slice(0, 1).appendTo($(this));
+						$(this).css("margin-left", 0);
+					}
+				});
+			} else if (direction == 'vertical') {
+				obj.find("ul").animate({
+					marginTop: '-=1'
+				}, 0, function () {
+					var s = Math.abs(parseInt($(this).css("margin-top")));
+					if (s >= step) {
+						$(this).find("li").slice(0, 1).appendTo($(this));
+						$(this).css("margin-top", 0);
+					}
+				});
+			}
+		}
+
+		this.each(function (i) {
+			var speed = 0 < 100 - opts["speed"] && 100 - opts["speed"] <= 100 ? 100 - opts["speed"] : 30;
+			var direction = opts["direction"] == 'vertical' || opts["direction"] == 'horizantal' ? opts["direction"] : 'vertical';
+			var _this = $(this);
+			intId[i] = setInterval(function () {
+				var sh;
+				if (direction == 'horizantal') {
+					sh = _this.find("ul").find("li:first").outerWidth(true);
+				} else {
+					sh = _this.find("ul").find("li:first").outerHeight(true);
+				}
+				marquee(_this, sh, direction);
+			}, speed);
+
+			_this.hover(function () {
+				clearInterval(intId[i]);
+			}, function () {
+				intId[i] = setInterval(function () {
+					var sh;
+					if (direction == 'horizantal') {
+						sh = _this.find("ul").find("li:first").outerWidth(true);
+					} else {
+						sh = _this.find("ul").find("li:first").outerHeight(true);
+					}
+					marquee(_this, sh, direction);
+				}, speed);
+			});
+
+		});
+
+	}
+})(jQuery);