Browse Source

判断app,添加操作按钮,及操作提示

DESKTOP-CRQ4N2U\jintian 1 year ago
parent
commit
3056f1609c
1 changed files with 111 additions and 6 deletions
  1. 111 6
      src/jtMap3d/Widgets/common/RuntimeEnvironment.js

+ 111 - 6
src/jtMap3d/Widgets/common/RuntimeEnvironment.js

@@ -2,7 +2,7 @@
  * 检测程序运行环境
  * @return
  */
-const checkAppOrWeb = function() {
+const _checkAppOrWeb = function() {
 	if (window.navigator.userAgent.match(
 			/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
 		)) {
@@ -16,20 +16,125 @@ const checkAppOrWeb = function() {
  * 是否是运行于App
  * @ignore
  */
-const isRuntimeApp = function() {
-	if (this._checkAppOrWeb() === "App") {
+export const isRuntimeApp = function() {
+	if (_checkAppOrWeb() === "App") {
 		return true;
 	}
-	return false;
+	return true;
 }
 
 /**
  * 是否是运行于App
  * @ignore
  */
-const isRuntimeWeb = function() {
-	if (this._checkAppOrWeb() === "Web") {
+export const isRuntimeWeb = function() {
+	if (_checkAppOrWeb() === "Web") {
 		return true;
 	}
 	return false;
 }
+
+/**
+ * @ignore
+ * 创建操作的主容器
+ */
+export function createOperationMainDom() {
+	//创建画布
+	let buttonDiv = document.createElement('div');
+	buttonDiv.id = "drawButtonDiv";
+	buttonDiv.style.width = '80px';
+	buttonDiv.style.backgroundColor = 'rgba(5, 45, 155, 0.7)';
+	buttonDiv.style.borderRadius = '5px';
+	buttonDiv.style.display = 'flex';
+	buttonDiv.style.flexDirection = 'column';
+	buttonDiv.style.padding = '8px';
+	buttonDiv.style.justifyContent = 'center';
+	buttonDiv.style.position = 'absolute';
+	buttonDiv.style.bottom = '150px';
+	buttonDiv.style.right = '10px';
+
+	let btnUndo = document.createElement('button');
+	btnUndo.id = "btnDrawBackout";
+	btnUndo.style.height = '30px';
+	btnUndo.style.marginBottom = '8px';
+	btnUndo.style.backgroundColor = 'rgba(52, 137, 255, 1.0)';
+	btnUndo.style.color = 'rgb(255, 255, 255)';
+	btnUndo.style.border = '0px solid red';
+	btnUndo.style.borderRadius = '5px';
+	btnUndo.innerHTML = '回退';
+	btnUndo.style.fontSize = '13px';
+	btnUndo.style.cursor = 'pointer';
+	buttonDiv.appendChild(btnUndo);
+
+	let btnCompletion = document.createElement('button');
+	btnCompletion.id = "btnDrawComplete";
+	btnCompletion.style.height = '30px';
+	btnCompletion.style.backgroundColor = 'rgba(88, 185, 45, 1.0)';
+	btnCompletion.style.color = 'rgb(255, 255, 255)';
+	btnCompletion.style.border = '0px solid red';
+	btnCompletion.style.borderRadius = '5px';
+	btnCompletion.innerHTML = '完成';
+	btnCompletion.style.fontSize = '13px';
+	btnCompletion.style.cursor = 'pointer';
+	buttonDiv.appendChild(btnCompletion);
+
+	/* 加入到页面 */
+	document.body.appendChild(buttonDiv);
+}
+
+/**
+ * 创建顶部弹出提示消息 1秒后自动消失
+ * @ignore
+ * @param {String} message 消息内容
+ */
+export function showTooltipMessage(message) {
+	let msgMainDom = document.getElementById('messageMainDom');
+	if (msgMainDom !== null && msgMainDom !== undefined) {
+		document.body.removeChild(msgMainDom);
+	}
+	msgMainDom = document.createElement('div');
+	msgMainDom.style.width = '30%';
+	msgMainDom.style.backgroundColor = 'rgba(237, 248, 230, 1.0)';
+	msgMainDom.style.height = '45px';
+	msgMainDom.style.border = 'solid 2px rgb(219, 241, 208)';
+	msgMainDom.style.borderRadius = '8px';
+	msgMainDom.style.display = 'flex';
+	msgMainDom.style.alignItems = 'center';
+	msgMainDom.style.paddingLeft = '10px';
+	msgMainDom.style.color = 'rgb(91, 188, 48)';
+	msgMainDom.style.fontSize = '14px';
+	msgMainDom.style.fontWeight = '600';
+	msgMainDom.style.position = 'absolute';
+	msgMainDom.style.left = '35%';
+	msgMainDom.style.transition = 'transform 1s';
+	msgMainDom.style.transform = 'translateY(-90px)';
+	msgMainDom.style.top = '0px';
+	msgMainDom.style.zIndex = 1000;
+	document.body.appendChild(msgMainDom);
+
+	let strHtml = '';
+	strHtml += "<div style='"
+	strHtml += "background-color: rgb(88, 185, 45);";
+	strHtml += "color: rgb(255, 255, 255);";
+	strHtml += "height: 24px;";
+	strHtml += "width: 24px;";
+	strHtml += "border-radius: 20px;";
+	strHtml += "display: flex;";
+	strHtml += "justify-content: center;";
+	strHtml += "align-items: center;";
+	strHtml += "font-size: 14px;";
+	strHtml += "margin-right: 18px;";
+	strHtml += "'>&#10003</div>";
+	strHtml += "<div>" + message + "</div>";
+
+	msgMainDom.innerHTML = strHtml;
+	msgMainDom.addEventListener('transitionend', function() {
+		setTimeout(function() {
+			document.body.removeChild(msgMainDom);
+		}, 1000);
+	}, false);
+
+	setTimeout(function() {
+		msgMainDom.style.transform = 'translateY(50px)';
+	}, 100)
+}