| | |
| | | <html lang="en"> |
| | | |
| | | <head> |
| | | <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
| | | <meta name="viewport" |
| | | content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> |
| | | <title>属性</title> |
| | | <link rel="stylesheet" href="../layui/css/layui.css"> |
| | | <style> |
| | | html, |
| | | body, |
| | | #ModelLibrary { |
| | | background-color: rgba(0, 0, 0, 0); |
| | | height: 100%; |
| | | overflow: hidden; |
| | | color: #fff; |
| | | } |
| | | <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
| | | <meta name="viewport" |
| | | content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> |
| | | <title>属性</title> |
| | | <link rel="stylesheet" href="../layui/css/layui.css"> |
| | | <style> |
| | | html, |
| | | body, |
| | | #ModelLibrary { |
| | | background-color: rgba(0, 0, 0, 0); |
| | | height: 100%; |
| | | overflow: hidden; |
| | | color: #fff; |
| | | } |
| | | |
| | | button { |
| | | margin: 10px 0 10px 10px; |
| | | } |
| | | button { |
| | | margin: 10px 0 10px 10px; |
| | | } |
| | | |
| | | .layui-btn-sm i { |
| | | font-size: 24px !important; |
| | | } |
| | | .layui-btn-sm i { |
| | | font-size: 24px !important; |
| | | } |
| | | |
| | | .layui-input-block { |
| | | margin-left: 0; |
| | | } |
| | | .layui-input-block { |
| | | margin-left: 0; |
| | | } |
| | | |
| | | .layui-form-item { |
| | | margin-bottom: 0px !important; |
| | | border-bottom: none; |
| | | } |
| | | .layui-form-item { |
| | | margin-bottom: 0px !important; |
| | | border-bottom: none; |
| | | } |
| | | |
| | | .layui-input { |
| | | background-color: rgba(0, 0, 0, 0) !important; |
| | | margin-top: 5px; |
| | | color: #fff; |
| | | } |
| | | .layui-input { |
| | | background-color: rgba(0, 0, 0, 0) !important; |
| | | margin-top: 5px; |
| | | color: #fff; |
| | | } |
| | | |
| | | .layui-form-select dl { |
| | | background-color: rgba(0, 0, 0, 0.5) !important; |
| | | } |
| | | .layui-form-select dl { |
| | | background-color: rgba(0, 0, 0, 0.5) !important; |
| | | } |
| | | |
| | | .layui-form-select dl dd:hover { |
| | | background-color: #f2f2f250; |
| | | } |
| | | .layui-form-select dl dd:hover { |
| | | background-color: #f2f2f250; |
| | | } |
| | | |
| | | .active { |
| | | border: 1px solid #fc0 !important; |
| | | box-shadow: 0 0 8px #ddd; |
| | | -moz-box-shadow: 0 0 8px #ddd; |
| | | -webkit-box-shadow: 0 0 8px #ddd; |
| | | cursor: pointer; |
| | | } |
| | | .active { |
| | | border: 1px solid #fc0 !important; |
| | | box-shadow: 0 0 8px #ddd; |
| | | -moz-box-shadow: 0 0 8px #ddd; |
| | | -webkit-box-shadow: 0 0 8px #ddd; |
| | | cursor: pointer; |
| | | } |
| | | |
| | | .LibraryHead { |
| | | position: relative; |
| | | height: 50px; |
| | | border-bottom: 1px solid #ffffff; |
| | | } |
| | | .LibraryHead { |
| | | position: relative; |
| | | height: 50px; |
| | | border-bottom: 1px solid #ffffff; |
| | | } |
| | | |
| | | .models { |
| | | overflow: auto; |
| | | margin: 5px 0; |
| | | } |
| | | .models { |
| | | overflow: auto; |
| | | margin: 5px 0; |
| | | } |
| | | |
| | | .models div { |
| | | display: none; |
| | | } |
| | | .models div { |
| | | display: none; |
| | | } |
| | | |
| | | .models li { |
| | | display: inline-block; |
| | | cursor: pointer; |
| | | } |
| | | .models li { |
| | | display: inline-block; |
| | | cursor: pointer; |
| | | } |
| | | |
| | | .models img { |
| | | width: 145px; |
| | | height: 145px; |
| | | margin: 8px 8px 0 0; |
| | | border: 1px solid #D2D2D2; |
| | | } |
| | | .models img { |
| | | width: 145px; |
| | | height: 145px; |
| | | margin: 8px 8px 0 0; |
| | | border: 1px solid #D2D2D2; |
| | | } |
| | | |
| | | .models img:hover { |
| | | border: 1px solid #3995f4; |
| | | } |
| | | .models img:hover { |
| | | border: 1px solid #3995f4; |
| | | } |
| | | |
| | | .layui-anim::-webkit-scrollbar, |
| | | .models::-webkit-scrollbar { |
| | | /*滚动条整体样式*/ |
| | | width: 8px; |
| | | /*高宽分别对应横竖滚动条的尺寸*/ |
| | | height: 8px; |
| | | scrollbar-arrow-color: red; |
| | | } |
| | | .layui-anim::-webkit-scrollbar, |
| | | .models::-webkit-scrollbar { |
| | | /*滚动条整体样式*/ |
| | | width: 8px; |
| | | /*高宽分别对应横竖滚动条的尺寸*/ |
| | | height: 8px; |
| | | scrollbar-arrow-color: red; |
| | | } |
| | | |
| | | .layui-anim::-webkit-scrollbar-thumb, |
| | | .models::-webkit-scrollbar-thumb { |
| | | border-radius: 5px; |
| | | -webkit-box-shadow: inset 0 0 5px rgba(218, 218, 218, 0.2); |
| | | box-shadow: inset 0 0 5px rgba(218, 218, 218, 0.2); |
| | | background: rgba(218, 218, 218, 0.5); |
| | | scrollbar-arrow-color: red; |
| | | } |
| | | .layui-anim::-webkit-scrollbar-thumb, |
| | | .models::-webkit-scrollbar-thumb { |
| | | border-radius: 5px; |
| | | -webkit-box-shadow: inset 0 0 5px rgba(218, 218, 218, 0.2); |
| | | box-shadow: inset 0 0 5px rgba(218, 218, 218, 0.2); |
| | | background: rgba(218, 218, 218, 0.5); |
| | | scrollbar-arrow-color: red; |
| | | } |
| | | |
| | | .layui-anim::-webkit-scrollbar-track, |
| | | .models::-webkit-scrollbar-track { |
| | | -webkit-box-shadow: inset 0 0 5px rgba(218, 218, 218, 0.2); |
| | | box-shadow: inset 0 0 5px rgba(218, 218, 218, 0.2); |
| | | border-radius: 0; |
| | | background: rgba(218, 218, 218, 0.1); |
| | | } |
| | | </style> |
| | | .layui-anim::-webkit-scrollbar-track, |
| | | .models::-webkit-scrollbar-track { |
| | | -webkit-box-shadow: inset 0 0 5px rgba(218, 218, 218, 0.2); |
| | | box-shadow: inset 0 0 5px rgba(218, 218, 218, 0.2); |
| | | border-radius: 0; |
| | | background: rgba(218, 218, 218, 0.1); |
| | | } |
| | | |
| | | </style> |
| | | </head> |
| | | |
| | | <body> |
| | | <div class="LibraryHead"> |
| | | <button type="button" title="打开" id='open' class="open layui-btn layui-btn-sm"> |
| | | <i class="layui-icon"></i> |
| | | </button> |
| | | <button type="button" title="保存" class="save layui-btn layui-btn-sm layui-btn-normal"> |
| | | <i class="layui-icon"></i> |
| | | </button> |
| | | <button type="button" title="是否开启编辑" class="edit layui-btn layui-btn-sm layui-btn-warm"> |
| | | <i class="layui-icon"></i> |
| | | </button> |
| | | <button type="button" title="清空" class="delete layui-btn layui-btn-sm layui-btn-danger"> |
| | | <i class="layui-icon"></i> |
| | | </button> |
| | | </div> |
| | | <div id="ModelLibrary" style="margin:0 10px;"> |
| | | <div class="selectType"> |
| | | <form class="layui-form" action=""> |
| | | <div class="layui-form-item"> |
| | | <div class="layui-input-block"> |
| | | <select name="modelType" id='modelType' lay-filter="modelType"> |
| | | <div class="LibraryHead"> |
| | | <button type="button" title="打开" id='open' class="open layui-btn layui-btn-sm"> |
| | | <i class="layui-icon"></i> |
| | | </button> |
| | | <button type="button" title="保存" class="save layui-btn layui-btn-sm layui-btn-normal"> |
| | | <i class="layui-icon"></i> |
| | | </button> |
| | | <button type="button" title="是否开启编辑" class="edit layui-btn layui-btn-sm layui-btn-warm"> |
| | | <i class="layui-icon"></i> |
| | | </button> |
| | | <button type="button" title="清空" class="delete layui-btn layui-btn-sm layui-btn-danger"> |
| | | <i class="layui-icon"></i> |
| | | </button> |
| | | </div> |
| | | <div id="ModelLibrary" style="margin:0 10px;"> |
| | | <div class="selectType"> |
| | | <form class="layui-form" action=""> |
| | | <div class="layui-form-item"> |
| | | <div class="layui-input-block"> |
| | | <select name="modelType" id='modelType' lay-filter="modelType"> |
| | | |
| | | </select> |
| | | </div> |
| | | </div> |
| | | </form> |
| | | </select> |
| | | </div> |
| | | </div> |
| | | <div class="models"> |
| | | |
| | | </div> |
| | | </form> |
| | | </div> |
| | | <script src="../layui/layui.js"></script> |
| | | <script src="../jquery-2.0.3.js"></script> |
| | | <script> |
| | | var Viewer = parent.sgworld._Viewer; |
| | | var sgworld = parent.sgworld; |
| | | var ModelLibrary = sgworld.Creator.getModelLibrary(Viewer); |
| | | var modelList = ModelLibrary.getLibraryData(); |
| | | <div class="models"> |
| | | |
| | | var imgRootURL = 'http://36.7.136.132:1988/ModelLibrary/'; |
| | | </div> |
| | | </div> |
| | | <script src="../layui/layui.js"></script> |
| | | <script src="../jquery-2.0.3.js"></script> |
| | | <script> |
| | | var Viewer = window.Viewer; |
| | | var sgworld = window.sgworld; |
| | | var ModelLibrary = sgworld.Creator.getModelLibrary(window.Viewer); |
| | | var modelList = ModelLibrary.getLibraryData(); |
| | | |
| | | //开启编辑并启用属性弹窗 |
| | | let isEdit = true; |
| | | sgworld.Creator.SimpleGraphic.edit(true, { editProp: true }); |
| | | var imgRootURL = 'http://183.162.245.49:8090/ModelLibrary/'; |
| | | |
| | | modelList = modelList.data; |
| | | addModelList(); |
| | | layui.use(['element', 'form', 'slider', 'upload'], function () { |
| | | window.element = layui.element; //Tab的切换功能,切换事件监听等,需要依赖element模块 |
| | | window.form = layui.form; |
| | | window.slider = layui.slider; |
| | | window.upload = layui.upload; |
| | | //开启编辑并启用属性弹窗 |
| | | let isEdit = true; |
| | | sgworld.Creator.SimpleGraphic.edit(true, { |
| | | editProp: true |
| | | }); |
| | | |
| | | var bodyHeight = $('body').height(); |
| | | $('.models').height(bodyHeight - 110); |
| | | $("#model0").show(); |
| | | modelList = modelList.data; |
| | | addModelList(); |
| | | layui.use(['element', 'form', 'slider', 'upload'], function() { |
| | | window.element = layui.element; //Tab的切换功能,切换事件监听等,需要依赖element模块 |
| | | window.form = layui.form; |
| | | window.slider = layui.slider; |
| | | window.upload = layui.upload; |
| | | |
| | | form.on('select(modelType)', function (data) { |
| | | $("#model" + data.value).show(); |
| | | $("#model" + data.value).siblings().hide(); |
| | | }); |
| | | var bodyHeight = $('body').height(); |
| | | $('.models').height(bodyHeight - 110); |
| | | $("#model0").show(); |
| | | |
| | | upload.render({ |
| | | elem: '#open' |
| | | , accept: 'file' //普通文件 |
| | | , auto: false |
| | | , choose: function (obj) { |
| | | var files = this.files = obj.pushFile(); |
| | | for (var key in files) { |
| | | sgworld.Creator.SimpleGraphic.open(files[key]); |
| | | break; |
| | | } |
| | | } |
| | | }); |
| | | form.on('select(modelType)', function(data) { |
| | | $("#model" + data.value).show(); |
| | | $("#model" + data.value).siblings().hide(); |
| | | }); |
| | | |
| | | $(".save").click(() => { |
| | | sgworld.Creator.SimpleGraphic.save(); |
| | | }); |
| | | |
| | | $(".edit").click(() => { |
| | | isEdit = !isEdit; |
| | | if (isEdit) { |
| | | sgworld.Creator.SimpleGraphic.edit(true, { editProp: true }); |
| | | $(".edit i").html(''); |
| | | } else { |
| | | sgworld.Creator.SimpleGraphic.edit(false); |
| | | $(".edit i").html(''); |
| | | } |
| | | }); |
| | | |
| | | $(".delete").click(() => { |
| | | sgworld.Creator.SimpleGraphic.clear() |
| | | }); |
| | | }); |
| | | function drawModel(type, numbering, name) { |
| | | ModelLibrary.drawModel(type, numbering, function (model) { |
| | | model.name = name; |
| | | //添加到属性编辑列表 |
| | | sgworld.Creator.SimpleGraphic.SimpleGraphicObj.push(model.id); |
| | | }) |
| | | upload.render({ |
| | | elem: '#open', |
| | | accept: 'file' //普通文件 |
| | | , |
| | | auto: false, |
| | | choose: function(obj) { |
| | | var files = this.files = obj.pushFile(); |
| | | for (var key in files) { |
| | | sgworld.Creator.SimpleGraphic.open(files[key]); |
| | | break; |
| | | } |
| | | } |
| | | }); |
| | | |
| | | function addModelList() { |
| | | var modelsContainer = $(".models"); |
| | | var selectContainer = $('#modelType'); |
| | | modelList.forEach((item, index) => { |
| | | selectContainer.append(`<option value="${index}">${item.name}(${item.data.length})</option>`); |
| | | let htmlStr = `<div id="model${index}"><ul>`; |
| | | item.data.forEach((model, index1) => { |
| | | htmlStr += `<li onclick="drawModel(${index},${index1},'${model.name}')"> |
| | | $(".save").click(() => { |
| | | sgworld.Creator.SimpleGraphic.save(); |
| | | }); |
| | | |
| | | $(".edit").click(() => { |
| | | isEdit = !isEdit; |
| | | if (isEdit) { |
| | | sgworld.Creator.SimpleGraphic.edit(true, { |
| | | editProp: true |
| | | }); |
| | | $(".edit i").html(''); |
| | | } else { |
| | | sgworld.Creator.SimpleGraphic.edit(false); |
| | | $(".edit i").html(''); |
| | | } |
| | | }); |
| | | |
| | | $(".delete").click(() => { |
| | | sgworld.Creator.SimpleGraphic.clear() |
| | | }); |
| | | }); |
| | | |
| | | function drawModel(type, numbering, name) { |
| | | ModelLibrary.drawModel(type, numbering, function(model) { |
| | | model.name = name; |
| | | //添加到属性编辑列表 |
| | | sgworld.Creator.SimpleGraphic.SimpleGraphicObj.push(model.id); |
| | | }) |
| | | } |
| | | |
| | | function addModelList() { |
| | | var modelsContainer = $(".models"); |
| | | var selectContainer = $('#modelType'); |
| | | modelList.forEach((item, index) => { |
| | | selectContainer.append(`<option value="${index}">${item.name}(${item.data.length})</option>`); |
| | | let htmlStr = `<div id="model${index}"><ul>`; |
| | | item.data.forEach((model, index1) => { |
| | | htmlStr += `<li onclick="drawModel(${index},${index1},'${model.name}')"> |
| | | <i title="${model.name}"> |
| | | <img src="${imgRootURL}${model.img}"> |
| | | </i> |
| | | </li>`; |
| | | }); |
| | | htmlStr += '</ul></div>'; |
| | | modelsContainer.append(htmlStr); |
| | | }); |
| | | }); |
| | | htmlStr += '</ul></div>'; |
| | | modelsContainer.append(htmlStr); |
| | | }); |
| | | |
| | | } |
| | | </script> |
| | | } |
| | | |
| | | </script> |
| | | |
| | | |
| | | </body> |
| | | |
| | | </html> |
| | | </html> |