master

分支 (1)

管理

管理

master

jointjs-demo
/
index2.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />

		<title>框图2</title>
		<link rel="stylesheet" type="text/css" href="css/joint.css" />
		<link rel="stylesheet" type="text/css" href="css/routing.css" />
		<style>
			body {
				position: absolute;
				top: 0px;
				bottom: 0px;
				left: 0px;
				right: 0px;
			}
			#paper {
				border: 1px solid gray;
			}

			/* markAvailable 当用户点击magnet时，界面上显示可以连接的magnet。为了突出可以连接的magnet，添加必要的css*/
			/* port styling */
			/* .available-magnet {
				fill: yellow;
			} */

			/* element styling */
			/* .available-cell rect {
				stroke-dasharray: 5, 2;
			} */
			.svgEleOperate{
			    position: absolute;
			    width: 80px;
			    padding: 10px;
			    border: 1px solid #000;
			    background-color: #16fb09;
			}
			.svgEleOperate span{
			    display: inline-block;
			    height: 30px;
			    line-height: 30px;
			    width: 100%;
			    border: 1px solid #000;
			    border-radius: 15px;
			    text-align: center;
			    margin: 10px 0;
			}
			.svgEleOperate span:hover{
			    background-color: dodgerblue;
			    color: #fff;
			}

			 * {
            margin: 0;
            padding: 0;
        }

        .blockDiagram {
            position: relative;
            height: 45px;
        }

        .blockDiagram .title {
            height: 32px;
            line-height: 32px;
            padding: 0 10px;
            background: #48b3ff;
            color: #000;
            font-size: 13px;
            letter-spacing: 1px;
            box-sizing: border-box;
        }

        .blockDiagram .title span {
            color: #fff;
            display: inline-block;
            margin-left: 10px;
        }

        .blockDiagram .blockDiagramcase {
            background: #edf8ff;
            padding: 5px 10px;
        }

        .blockDiagram .blockDiagramcase dl {
            display: flex;
            justify-content: flex-start;
            align-items: flex-start;
            align-content: flex-start;
            flex-direction: row;
            flex-wrap: wrap;
        }

        .blockDiagram .blockDiagramcase dl dd {
            padding: 0px 20px 0px 20px;
            position: relative;
            font-size: 13px;
            height: 20px;
            line-height: 21px;
            box-sizing: border-box;
            cursor: pointer;
        }

        .blockDiagram .blockDiagramcase dl dd:before {
            content: '';
            position: absolute;
            top: 50%;
            left: 0;
            width: 12px;
            height: 12px;
            display: block;
            border: 1px solid #999;
            border-radius: 100%;
            -webkit-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            transform: translateY(-50%);
        }

        .blockDiagram .blockDiagramcase dl dd.black {
            color: #000;
        }

        .blockDiagram .blockDiagramcase dl dd.red {
            color: #fa486d;
        }

        .blockDiagram .blockDiagramcase dl dd.green {
            color: #3fcf6b;
        }

        .blockDiagram .blockDiagramcase dl dd.orange {
            color: #f69240;
        }

        .blockDiagram .blockDiagramcase dl dd.blue {
            color: #4a7ebb;
        }

        .blockDiagram .blockDiagramcase dl dd.active.black:before {
            background: #000;
            border: none;
        }

        .blockDiagram .blockDiagramcase dl dd.active.red:before {
            background: #fa486d;
            border: none;
        }

        .blockDiagram .blockDiagramcase dl dd.active.green:before {
            background: #3fcf6b;
            border: none;
        }

        .blockDiagram .blockDiagramcase dl dd.active.orange:before {
            background: #f69240;
            border: none;
        }

        .blockDiagram .blockDiagramcase dl dd.active.blue:before {
            background: #4a7ebb;
            border: none;
        }

        .blockDiagram .innerStroke {
            box-shadow: 0 0 10px rgba(72, 179, 255, 0.2) inset;
            border-radius: 6px;
            padding: 5px;
        }

        .blockDiagram .outsideStroke {
            box-shadow: 0 0 5px rgba(72, 179, 255, 0.7);
            border-radius: 6px;
            padding: 5px;
            margin-top: 30px;
        }

        .blockDiagram .solid {
            border-width: 1px;
            border-style: solid;
        }

        .blockDiagram .solid.black {
            border-color: #000;
        }

        .blockDiagram .solid.red {
            border-color: #fa486d;
        }

        .blockDiagram .solid.green {
            border-color: #3fcf6b;
        }

        .blockDiagram .solid.orange {
            border-color: #f69240;
        }

        .blockDiagram .solid.blue {
            border-color: #4a7ebb;
        }

        .popAdd {
            box-shadow: 0 0 10px rgba(72, 179, 255, 0.5);
            background: #fff;
            -webkit-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
        }

        .popAdd .popAdd_Head {
            height: 32px;
            line-height: 32px;
            font-size: 12px;
            color: #000;
            text-align: center;
            border-bottom: 1px solid #48b3ff;
        }

        .popAdd .popAdd_Con {
            margin: 10px;
            height: 126px;
            box-sizing: border-box;
            background: #ebebeb;
        }

        .popAdd .popAdd_Con .popAdd_ConTxt {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: row;
            padding-top: 8px;
        }

        .popAdd .popAdd_Con .popAdd_ConTxt label {
            height: 30px;
            line-height: 30px;
            min-width: 50px;
            text-align: right;
            margin-bottom: 0;
        }

        .popAdd .popAdd_Con .popAdd_ConTxt input {
            height: 24px;
            width: calc(100% - 200px);
            outline: none;
            padding: 0 5px;
            border: 1px solid #D2D2D2;
            border-radius: 4px;
            box-sizing: border-box;
        }

        .popAdd .popAdd_btn {
            position: absolute;
            bottom: 0;
            left: 0;
            z-index: 1;
            width: 100%;
            height: 32px;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }

        .popAdd .popAdd_btn a {
            display: inline-block;
            width: 60px;
            height: 20px;
            line-height: 20px;
            color: #fff;
            border-radius: 20px;
            text-align: center;
            margin: 0 10px;
            font-size: 10px;
            text-decoration: none;
        }

        .popAdd .popAdd_btn a.return {
            background: #ccc;
        }

        .popAdd .popAdd_btn a.submit {
            background: #48b3ff;
        }

        .editText {
            background-color: white;
            position: absolute;
            min-width: 20px;
            font-size: 15px;
            padding: 5px;
        }

        .addHover {
            background: #48b3ff;
            color: #fff;
        }

        span {
            -moz-user-select: none;
            -webkit-user-select: none;
            user-select: none;
        }

        ul li {
            -moz-user-select: none;
            -webkit-user-select: none;
            user-select: none;
        }

        #interface_block::-webkit-scrollbar {
            display: block;
        }

        /* qq-client */
        .qq-client{position:fixed;right:0px;top:18%;margin-top:-80px;box-shadow: 0 0 3px 3px #e3e3e3;z-index:2;}
        .qq-client a{width:50px;height:160px;text-align:center;border:#ebebeb solid 1px;padding:0px 0px;line-height:40px;display:block;}
        .qq-client h1{font-size:14px;width:90%;margin:0px auto;text-align:center;height:40px;line-height:50px;border-bottom:#ebebeb solid 1px;position:relative;border:#ebebeb solid 0px;}
        .qq-client h1 span{font-size:12px;font-weight:normal;position:absolute;left:-30px;top:0px;cursor:pointer;background:#ffffff;border:#ebebeb solid 1px;width:40px;height:40px;line-height:40px;border-radius:20px;text-align:center;}
        .qq-client-content{position:fixed;right:42px;display:none;background:#ffffff;width:200px; box-shadow: 0 0 4px rgba(72,179,255,.3);border-top-left-radius: 4px;border-bottom-left-radius: 4px;overflow: hidden;}
        /*.qq-client-content h1{font-size:14px;width:95%;margin:0px auto;text-align:right;height:30px;line-height:30px;border-bottom:#ebebeb solid 1px;position:relative;border:#ebebeb solid 0px;}*/
        .qq-client-content h1{background: #fff;width: 100%;text-align: center;font-size:14px;width:100%;margin:0px auto;height:40px;line-height:40px;border-bottom:#ebebeb solid 1px;position:relative;border:#ebebeb solid 0px;}
        .qq-client-content h1 .qq-client-close{position: absolute;right: 8px;top:10px;border:1px solid #48b3ff;display: block;border-radius: 100%; color: #48B3FF; font-size:20px;;cursor: pointer; width: 20px; height: 20px;line-height: 18px; text-align: center;-moz-transform: rotate(45deg);-ms-transform: rotate(45deg);transform: rotate(45deg);-webkit-transform: rotate(45deg);}
        .qq-client-content h1 .qq-client-close:hover{
            border:1px solid rgba(72,179,255,.7);
            color: rgba(72,179,255,.7);
        }
        /*.qq-client-content h1 span{font-size:12px;font-weight:normal;position:absolute;left:-30px;top:0px;cursor:pointer;background:#ffffff;border:#ebebeb solid 1px;width:40px;height:40px;line-height:40px;border-radius:20px;text-align:left;}*/
        .qq-client-content h5{font-size: 12px; font-weight: 500;}
        .qq-client-content a:hover{background: transparent;}
        .qq-client-list{background:#ffffff;}
        .client-list{overflow:hidden;line-height:40px;width:90%;margin:0px auto;border-bottom:dashed 1px #ebebeb;}
        .client-list a{display:block;}
        .client-list a:hover{color:red;}
        .client-list span{float:left;}
        .client-list label{float:left;width:60px;text-align:right;padding-right:10px;}

		</style>
	</head>
	<body id="body">
		<div id="tools">
			<button id="exportButton">导出PNG</button>
			<button id="resetDataButton">重置数据</button>
			<button id="resetZoom">resetZoom</button>
			<button id="toggleFullScreen">toggleFullScreen</button>
			<!-- <p></p> -->
			<label>Zoom</label>
			<input type="range" min="0.2" max="5" step="0.2" value="1" onchange="zoomlevel.value=this.value; paper.scale(this.value);" />
			<output id="zoomlevel">1</output>
			<div>
			    <button class="router-switch" data-connector="normal">Normal /<br> None</button>
			    <button class="router-switch" data-connector="rounded">Rounded /<br> None</button>
			    <button class="router-switch" data-connector="smooth">Smooth /<br> None</button>
			    <button class="router-switch" data-router="orthogonal" data-connector="normal">Normal /<br> Orthogonal</button>
			    <button class="router-switch" data-router="orthogonal" data-connector="rounded">Rounded /<br> Orthogonal</button>
			    <button class="router-switch" data-router="manhattan" data-connector="normal">Normal /<br> Manhattan</button>
			    <button class="router-switch" data-router="manhattan" data-connector="rounded">Rounded /<br> Manhattan</button>
			    <button class="router-switch" data-router="metro" data-connector="normal">Normal /<br> Metro</button>
			    <button class="router-switch" data-router="metro" data-connector="rounded">Rounded /<br> Metro</button>
			</div>

			<div class="blockDiagram" id="blockDiagramcase">
				<div class="blockDiagramcase">
					<dl id="selectDl">

					</dl>
				</div>
			</div>
		</div>


		<div id="paper"></div>
		<!--jointjs 依赖库start -->
		<script src="js/jquery/jquery-2.1.4.js"></script>
		<script src="js/jointjs/lodash.js"></script>
		<script src="js/jointjs/backbone.js"></script>
		<script src="js/jointjs/joint.js"></script>
		<!-- jointjs依赖库end -->


		<script src="js/layer/layer.min.js"></script>

		<!-- 自定义库start -->
		<script src="js/index2.js"></script>
		<script src="js/browser.min.js"></script>
		<script src="js/saveSvgAsPng.js" type="text/babel"></script>
		<!-- 自定义库end -->
		<script>
	/* 	window.onload = function(){
			setTimeout(function(){
				let t = performance.timing
				console.log('DNS查询耗时 ：' + (t.domainLookupEnd - t.domainLookupStart).toFixed(0))
				console.log('TCP链接耗时 ：' + (t.connectEnd - t.connectStart).toFixed(0))
				console.log('request请求耗时 ：' + (t.responseEnd - t.responseStart).toFixed(0))
				console.log('解析dom树耗时 ：' + (t.domComplete - t.domInteractive).toFixed(0))
				console.log('白屏时间 ：' + (t.responseStart - t.navigationStart).toFixed(0))
				console.log('domready时间 ：' + (t.domContentLoadedEventEnd - t.navigationStart).toFixed(0))
				console.log('onload时间 ：' + (t.loadEventEnd - t.navigationStart).toFixed(0))
				if(t = performance.memory){
					console.log('js内存使用占比 ：' + (t.usedJSHeapSize / t.totalJSHeapSize * 100).toFixed(2) + '%')
				}
			})
		} */
		</script>
	</body>
</html>