jay.chang/ibms-dome
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[Frontend] [系統監控] 熱點顯示 popover | [全域功能] YT-Tooltip 根據絕對座標顯示 popover 程序建置 | [儀表板] demo用系統小類Card程序建置

Browse Source
This commit is contained in:
dev01 2022-12-28 13:12:08 +08:00
parent 71c2240e68
commit 3f9aca1e4e
5 changed files with 135 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

109
Frontend/_dashboard.html
View File

@ -2,9 +2,9 @@
<div class="row"> <div class="row">
<div class="col-sm-12 col-xl-4 poisition-relative"> <div class="col-sm-12 col-xl-4 poisition-relative">
<!-- <img src="img/clouds.png" class="img-fluid" style="min-height: 520px;"> --> <!-- <img src="img/clouds.png" class="img-fluid" style="min-height: 520px;"> -->
<div id="forgeViewer" class="position-absolute" style="width:96%;height:96%;"></div> <div id="forgeViewer" class="position-absolute" style="width:96%;height:96%;"></div>
</div> </div>
<div class="col-sm-12 col-xl-4"> <div class="col-sm-12 col-xl-4">
<div class="row"> <div class="row">
@ -144,7 +144,7 @@
<div style="width:100%; min-height:300px;"> <div style="width:100%; min-height:300px;">
<canvas class="chart" id="eveWeekElecChart"></canvas> <canvas class="chart" id="eveWeekElecChart"></canvas>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
@ -156,10 +156,10 @@
<div class="row"> <div class="row">
<div class="col-sm-12 col-lg-8"> <div class="col-sm-12 col-lg-8">
<div class="row" id="sysSubBtnList"> <div class="row" id="sysSubBtnList">
</div> </div>
</div> </div>
<div class="col-sm-12 col-lg-4"> <div class="col-sm-12 col-lg-4">
<div class="row"> <div class="row">
<div class="col-lg-6"> <div class="col-lg-6">
@ -183,7 +183,7 @@
</div> </div>
</div>--> </div>-->
<div class="col-12 mb-2 position-relative row m-0 justify-content-center"> <div class="col-12 mb-2 position-relative row m-0 justify-content-center">
<canvas class="chart" id="errRecChart"></canvas> <canvas class="chart" id="errRecChart"></canvas>
</div> </div>
<div class="col-12 mb-2 position-relative row m-0 justify-content-center"> <div class="col-12 mb-2 position-relative row m-0 justify-content-center">
<canvas class="chart" id="errChkChart"></canvas> <canvas class="chart" id="errChkChart"></canvas>
@ -202,16 +202,16 @@
<div class="panel-container show"> <div class="panel-container show">
<div class="panel-content poisition-relative p-0"> <div class="panel-content poisition-relative p-0">
<!--<div class="pb-5 pt-3"> <!--<div class="pb-5 pt-3">
<div class="d-flex mr-0"> <div class="d-flex mr-0">
<div class="mr-2"> <div class="mr-2">
<span class="peity-donut" data-peity="{ &quot;fill&quot;: [&quot;#2196F3&quot;, &quot;#9acffa&quot;], &quot;innerRadius&quot;: 14, &quot;radius&quot;: 20 }">3/10</span> <span class="peity-donut" data-peity="{ &quot;fill&quot;: [&quot;#2196F3&quot;, &quot;#9acffa&quot;], &quot;innerRadius&quot;: 14, &quot;radius&quot;: 20 }">3/10</span>
</div> </div>
<div> <div>
<label class="fs-sm mb-0 mt-2 mt-md-0">Page Views</label> <label class="fs-sm mb-0 mt-2 mt-md-0">Page Views</label>
<h4 class="font-weight-bold mb-0">14,134</h4> <h4 class="font-weight-bold mb-0">14,134</h4>
</div> </div>
</div> </div>
</div>--> </div>-->
<div class="col-12 mb-2 position-relative row m-0 justify-content-center"> <div class="col-12 mb-2 position-relative row m-0 justify-content-center">
<span class="text-center position-absolute t-white" style="top:25%;left:27%;">已完成<br>6</span> <span class="text-center position-absolute t-white" style="top:25%;left:27%;">已完成<br>6</span>
<img src="img/u40.png" class="" style="width:75%;margin-left:0px;left:-22px;"> <img src="img/u40.png" class="" style="width:75%;margin-left:0px;left:-22px;">
@ -237,7 +237,7 @@
<script> <script>
var tarElePath = ''; var tarElePath = '';
var sysSubList = []; var sysSubList = [];
var floList = []; //每個樓層 var floList = []; //每個樓層
@ -253,7 +253,7 @@
var errRecChart = null; var errRecChart = null;
var errChkChart = null; var errChkChart = null;
var loadedCnt = 0; var loadedCnt = 0;
var chartDataCnt = { alarmCnt:0, recCnt:0, chkedErrCnt:0, unChkedErrCnt:0 }; var chartDataCnt = { alarmCnt: 0, recCnt: 0, chkedErrCnt: 0, unChkedErrCnt: 0 };
var sysIconList = [ var sysIconList = [
{ mainSys: "EE", subSys: "E1", iconClass: "fal fa-grip-vertical" }, { mainSys: "EE", subSys: "E1", iconClass: "fal fa-grip-vertical" },
@ -264,6 +264,25 @@
{ mainSys: "ME", subSys: "M10", iconClass: "fal fa-wind" }, { mainSys: "ME", subSys: "M10", iconClass: "fal fa-wind" },
{ mainSys: "ME", subSys: "M12", iconClass: "fal fa-snowflake" }, { mainSys: "ME", subSys: "M12", iconClass: "fal fa-snowflake" },
{ mainSys: "ELEV", subSys: "EL", iconClass: "fal fa-door-open" }, { mainSys: "ELEV", subSys: "EL", iconClass: "fal fa-door-open" },
{ mainSys: "FE", subSys: "F1", iconClass: "fal fa-fire-extinguisher" },
{ mainSys: "FE", subSys: "F2", iconClass: "fal fa-smog" },
{ mainSys: "WP", subSys: "W1", iconClass: "fal fa-stopwatch" },
{ mainSys: "S", subSys: "R", iconClass: "fal fa-user-shield" },
];
var tempSysSubText = [
{ text: "高壓配電盤" ,mainSys: "EE", subSys: "E1", },
{ text: "低壓配電盤" ,mainSys: "EE", subSys: "E2", },
{ text: "緊急發電機" ,mainSys: "EE", subSys: "E3", },
{ text: "電錶系統" ,mainSys: "EE", subSys: "E4", },
{ text: "二線式照明系統" ,mainSys: "LT", subSys: "L1", },
{ text: "小型送風機" ,mainSys: "ME", subSys: "M10", },
{ text: "環境感測設備" ,mainSys: "ME", subSys: "M12", },
{ text: "電梯設備" ,mainSys: "ELEV", subSys: "EL", },
{ text: "消防設備" ,mainSys: "FE", subSys: "F1", },
{ text: "排煙系統" ,mainSys: "FE", subSys: "F2", },
{ text: "電子水錶" ,mainSys: "WP", subSys: "W1", },
{ text: "門禁安全系統" ,mainSys: "S", subSys: "R", }
]; ];
$(document).ready(function () { $(document).ready(function () {
@ -275,6 +294,21 @@
timeOutGetData(); timeOutGetData();
}); });
function demoSubList() {
let isExiNames = $("#sysSubBtnList .dev-group button[id^=sysSubCardBtn]").toArray().map(x => $(x).text());
let strHtml = ``;
$.each(tempSysSubText, (idx, obj) => {
if (isExiNames.indexOf(obj.text) == -1) {
let iconObj = sysIconList.filter(x => x.mainSys == obj.mainSys && x.subSys == obj.subSys)[0];
strHtml += `<div class="btn-group btn-group-lg col-lg-3 mb-4 dev-group">
<button name="topFunBtn" data-page="alert" type="button" class="btn btn-secondary col-4"><i class="${iconObj.iconClass || "fal fa-hdd"} fa-2x py-2"></i></button>
<button id="sysSubCardBtn${obj.subSys}" type="button" class="btn btn-secondary" data-id="${obj.subSys}">${obj.text}</button>
</div>`;
}
})
$("#sysSubBtnList").append(strHtml);
}
//取得 左下方 各系統小類 //取得 左下方 各系統小類
function getSubList() { function getSubList() {
let url = baseApiUrl + "/api/Device/GetMainSub"; let url = baseApiUrl + "/api/Device/GetMainSub";
@ -290,7 +324,7 @@
let contest = ["E4", "EL", "L1", "M10", "M12"] let contest = ["E4", "EL", "L1", "M10", "M12"]
$.each(res.data.history_Main_Systems, (index, mainSysObj) => { $.each(res.data.history_Main_Systems, (index, mainSysObj) => {
$.each(mainSysObj.history_Sub_systems, (index2, subSysObj) => { $.each(mainSysObj.history_Sub_systems, (index2, subSysObj) => {
if (contest.indexOf(subSysObj.sub_system_tag) != -1) { if (contest.indexOf(subSysObj.sub_system_tag) != -1) {
sysSubList.push({ sysMainTag: mainSysObj.main_system_tag, sysSubTag: subSysObj.sub_system_tag }); sysSubList.push({ sysMainTag: mainSysObj.main_system_tag, sysSubTag: subSysObj.sub_system_tag });
} }
let iconClass = sysIconList.filter(x => x.mainSys == mainSysObj.main_system_tag && x.subSys == subSysObj.sub_system_tag)[0]?.iconClass; let iconClass = sysIconList.filter(x => x.mainSys == mainSysObj.main_system_tag && x.subSys == subSysObj.sub_system_tag)[0]?.iconClass;
@ -301,7 +335,8 @@
}) })
}) })
$("#sysSubBtnList").html(strHtml); $("#sysSubBtnList").html(strHtml);
demoSubList();
} }
}, null, "POST").send(); }, null, "POST").send();
} }
@ -350,9 +385,9 @@
let prevTwoWeek = displayDate(getTimeByType(null, -14), "date").replaceAll("/", "-") + "T00:00:00"; let prevTwoWeek = displayDate(getTimeByType(null, -14), "date").replaceAll("/", "-") + "T00:00:00";
let yesterday = displayDate(getTimeByType(null, -1), "date").replaceAll("/", "-") + "T00:00:00"; let yesterday = displayDate(getTimeByType(null, -1), "date").replaceAll("/", "-") + "T00:00:00";
let tomorrow = displayDate(getTimeByType(null, 1), "date").replaceAll("/", "-") + "T00:00:00"; let tomorrow = displayDate(getTimeByType(null, 1), "date").replaceAll("/", "-") + "T00:00:00";
// 今日用電量 // 今日用電量
getElectricMeterDayDataByBaja(devNum + "_kWh_tot", n4Sup, today, tomorrow, (data) => { getElectricMeterDayDataByBaja(devNum + "_kWh_tot", n4Sup, today, tomorrow, (data) => {
let result = data?.data[0]?.sum; let result = data?.data[0]?.sum;
@ -411,7 +446,7 @@
function chkBajaLoaded() { function chkBajaLoaded() {
loadedCnt++; loadedCnt++;
if (loadedCnt == 9) { if (loadedCnt == 9) {
chartErrRec(["異常數量", "賦歸數量"], [chartDataCnt.alarmCnt, chartDataCnt.recCnt]); chartErrRec(["異常數量", "賦歸數量"], [chartDataCnt.alarmCnt, chartDataCnt.recCnt]);
chartErrChk(["已確認異常", "未確認異常"], [chartDataCnt.chkedErrCnt, chartDataCnt.unChkedErrCnt]); chartErrChk(["已確認異常", "未確認異常"], [chartDataCnt.chkedErrCnt, chartDataCnt.unChkedErrCnt]);
@ -422,7 +457,7 @@
// 圖表 - 今天與昨天用電量 (長條圖) // 圖表 - 今天與昨天用電量 (長條圖)
function chartEveDaysElec(todayData, yesData) { function chartEveDaysElec(todayData, yesData) {
let eveDayElecChartCanvas = $('#eveDayElecChart').get(0).getContext('2d'); let eveDayElecChartCanvas = $('#eveDayElecChart').get(0).getContext('2d');
let curHour = (new Date()).getHours(); let curHour = (new Date()).getHours();
todayData.data = todayData.filter(x => x.timestamp.$time.$hour < curHour); todayData.data = todayData.filter(x => x.timestamp.$time.$hour < curHour);
@ -431,7 +466,7 @@
labels: todayData?.data.map(x => x.timestamp.$time.$hour), labels: todayData?.data.map(x => x.timestamp.$time.$hour),
datasets: [ datasets: [
{ {
id:"today", id: "today",
type: "bar", type: "bar",
label: '今日用電量', label: '今日用電量',
fill: false, fill: false,
@ -474,9 +509,9 @@
}, },
}], }],
yAxes: [{ yAxes: [{
ticks: { ticks: {
min:0, min: 0,
beginAtZero: true beginAtZero: true
}, },
}] }]
@ -510,12 +545,12 @@
}); });
} }
} }
// 圖表 - 這週與上週用電量 (長條圖) // 圖表 - 這週與上週用電量 (長條圖)
function chartEveWeeksElec(curWeekData, prevWeekData) { function chartEveWeeksElec(curWeekData, prevWeekData) {
let eveWeekElecChartCanvas = $('#eveWeekElecChart').get(0).getContext('2d'); let eveWeekElecChartCanvas = $('#eveWeekElecChart').get(0).getContext('2d');
let eveWeekElecChartData = { let eveWeekElecChartData = {
labels: curWeekData.map(x => dayToChiDay(strToDate(x.timestamp.$cEncStr, "day"))), labels: curWeekData.map(x => dayToChiDay(strToDate(x.timestamp.$cEncStr, "day"))),
@ -602,7 +637,7 @@
} }
// 圖表 - 異常與賦歸圖表 (圓餅圖) // 圖表 - 異常與賦歸圖表 (圓餅圖)
function chartErrRec(labels,datas) { function chartErrRec(labels, datas) {
let errRecChartCanvas = ctx = $('#errRecChart').get(0).getContext('2d'); let errRecChartCanvas = ctx = $('#errRecChart').get(0).getContext('2d');
@ -732,7 +767,7 @@
}) })
}) })
}) })
} }
}, null, "POST").send(); }, null, "POST").send();
} }
@ -857,9 +892,9 @@
//} //}
// 左側 3D 電梯 Viewer Option 設置 // 左側 3D 電梯 Viewer Option 設置
/*elev3DOption.nodes = Object.keys(elev3DBind).map(x => elev3DBind[x]);*/ /*elev3DOption.nodes = Object.keys(elev3DBind).map(x => elev3DBind[x]);*/
floList = Object.keys(subData).filter(x => x.startsWith("SP_FLS_")).map(x => x?.split("SP_FLS_")[1]); floList = Object.keys(subData).filter(x => x.startsWith("SP_FLS_")).map(x => x?.split("SP_FLS_")[1]);
elev3DOption.nodeId = elev3DBind[devNum]; elev3DOption.nodeId = elev3DBind[devNum];
elev3DOption.floorHeight = floList.map((x) => { return { floor: x } }); elev3DOption.floorHeight = floList.map((x) => { return { floor: x } });
elev3DOption.floorHeight.forEach((floObj, idx) => { elev3DOption.floorHeight.forEach((floObj, idx) => {
@ -877,7 +912,7 @@
} }
} }
}) })
if (elev3DObj.length != 0) { if (elev3DObj.length != 0) {
let elevObj = elev3DObj.filter(x => x.nodeId == elev3DBind[devNum])[0]; let elevObj = elev3DObj.filter(x => x.nodeId == elev3DBind[devNum])[0];
if (!elevObj.id) { if (!elevObj.id) {
@ -904,7 +939,7 @@
console.log("五分鐘更新") console.log("五分鐘更新")
getElectricBaja(); getElectricBaja();
}) })
onEvent("click", "button[id^=sysSubCardBtn]", function () { onEvent("click", "button[id^=sysSubCardBtn]", function () {
let subSysTag = $(this).data("id"); let subSysTag = $(this).data("id");
$(`#subSysBtn${subSysTag}`).click(); $(`#subSysBtn${subSysTag}`).click();

26
Frontend/_sysMonAll.html
View File

@ -273,7 +273,19 @@
if (!res || res.code != "0000" || !res.data) { if (!res || res.code != "0000" || !res.data) {
} else { } else {
let myDataList = res.data?.filter(x => x.device_coordinate_3d != null && isJSON(x.device_coordinate_3d)).map(x => { return { position: JSON.parse(x.device_coordinate_3d) } }); debugger
let myDataList = [];
$.each(res.data, (idx, data) => {
let item = {};
item.position = {};
if (item.device_coordinate_3d != null && isJSON(item.device_coordinate_3d)) {
item.position = JSON.parse(x.device_coordinate_3d);
}
$.extend(item, data);
myDataList.push(item);
})
console.log("1", myDataList)
setHotspotPoint(myDataList); setHotspotPoint(myDataList);
callback ? callback() : ""; callback ? callback() : "";
} }
@ -286,8 +298,16 @@
getHopspotPoint(myDataList); getHopspotPoint(myDataList);
} }
onEvent("autodesk:click:sprite", "[name=forgeViewer]", function (e, obj) { onEvent("autodesk:click:sprite", "[name=forgeViewer]", function (e, obj,dbObj) {
console.log(e, obj) let position = {};
position.tpLeft = obj.target.toolController.lastClickX;
position.tpTop = obj.target.toolController.lastClickY;
position.tpOffHeight = 24;
console.log(position)
console.log(obj)
console.log(dbObj)
initPopover(pageAct.sysMainTag == "LT" ? "light" : null, position, "[name=forgeViewer]");
}) })
</script> </script>

22
Frontend/index.html
View File

@ -1978,6 +1978,8 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
</div> </div>
</div> </div>
</div> </div>
<!--<button id="testsysbtn" class="btn btn-info col-1">系統監控(測試用)</button>-->
<!-- END Messenger --> <!-- END Messenger -->
<!-- BEGIN Page Settings --> <!-- BEGIN Page Settings -->
<!-- END Page Settings --> <!-- END Page Settings -->
@ -2253,6 +2255,10 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
$("#lightSchModal").modal("show"); $("#lightSchModal").modal("show");
} }
}) })
onEvent("click", "#testsysbtn", function () {
})
$(window).on("timeout:3s", function () { $(window).on("timeout:3s", function () {
getSystemAlarmByBaja((data) => { getSystemAlarmByBaja((data) => {
@ -2357,13 +2363,13 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
} }
// Card 呈現初始化 // Card 呈現初始化
function initPopover(type = null) { function initPopover(type = null, extOption = {},selector = "[name=devItem]") {
$("[name=devItem]").each((index, ele) => { $(selector).each((index, ele) => {
let devNum = $(ele).data("number"); //設備編號 let devNum = $(ele).data("number"); //設備編號
let devGuid = $(ele).data("id"); //guid let devGuid = $(ele).data("id"); //guid
let devName = $(ele).data("name"); //full_name let devName = $(ele).data("name"); //full_name
let lightHtml = type == "light" ? `<button type="button" id="lightSch-tab" class="btn btn-icon nav-link" role="tab" data-tabname="cardTab" data-target="#lightSch"><i class="fas fa-calendar-alt"></i></button>` : ""; let lightHtml = type == "light" ? `<button type="button" id="lightSch-tab" class="btn btn-icon nav-link" role="tab" data-tabname="cardTab" data-target="#lightSch"><i class="fas fa-calendar-alt"></i></button>` : "";
$(ele).YTTooltip({ let option = {
html: `<div class="card m-1 border device-wrap"> html: `<div class="card m-1 border device-wrap">
<div class="card-header p-3"> <div class="card-header p-3">
@ -2402,10 +2408,14 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
//loadErrRecTable2($(oriEle).data("number")); //loadErrRecTable2($(oriEle).data("number"));
//loadErrRecTable(); //loadErrRecTable();
loadErr($(oriEle).data("number")); loadErr($(oriEle).data("number"));
$(tooltipEle).find("#info").html(typeof drawInfoTabBlo != "undefined"? drawInfoTabBlo(devGuid) : ""); $(tooltipEle).find("#info").html(typeof drawInfoTabBlo != "undefined" ? drawInfoTabBlo(devGuid) : "");
typeof subDeviceSetTable != "undefined "? subDeviceSetTable($(oriEle).data("number")) : "" typeof subDeviceSetTable != "undefined " ? subDeviceSetTable($(oriEle).data("number")) : ""
} }
}) };
$.extend(option, extOption);
$(ele).YTTooltip(option);
}) })
} }

5
Frontend/js/forge/forgemodel.js
View File

@ -640,7 +640,7 @@ async function addHotPoint(data) {
const dbId = 10 + index; const dbId = 10 + index;
const myPosition = myData.position; const myPosition = myData.position;
const viewable = new DataVizCore.SpriteViewable(myPosition, style, dbId); const viewable = new DataVizCore.SpriteViewable(myPosition, style, dbId);
myData._dbId = dbId;
viewableData.addViewable(viewable); viewableData.addViewable(viewable);
}); });
@ -653,7 +653,8 @@ async function addHotPoint(data) {
if (event.dbId >= 10 && event.dbId <= 13) {//event.dbId > 0 && event.dbId < 19 if (event.dbId >= 10 && event.dbId <= 13) {//event.dbId > 0 && event.dbId < 19
console.log(`Sprite clicked: ${event.dbId}`); console.log(`Sprite clicked: ${event.dbId}`);
openHotspotModal(); openHotspotModal();
$(selector).trigger("autodesk:click:sprite", event); let myData = myDataList.filter(x => x._dbId == event.dbId)[0];
$(selector).trigger("autodesk:click:sprite", event, myData);
} }
if (event.clickInfo != null) { if (event.clickInfo != null) {

23
Frontend/js/yourteam/plugins/yt-tooltip/yt-tooltip.js
View File

@ -31,6 +31,12 @@ $.fn.YTTooltip = function (option) {
hideTooltipEvent: hideTooltipEvent, hideTooltipEvent: hideTooltipEvent,
onShow: option.onShow || null, onShow: option.onShow || null,
group: option.group || null, group: option.group || null,
targetPosition: {
left: option.tpLeft || null,
top: option.tpTop || null,
offsetWidth: option.tpOffWidth || null,
offsetHeight: option.tpOffHeight || null,
}
}; };
if (obj.toggle == "hover") { if (obj.toggle == "hover") {
@ -49,10 +55,21 @@ $.fn.YTTooltip = function (option) {
let bodyHeight = $("body")[0].offsetHeight; let bodyHeight = $("body")[0].offsetHeight;
//計算引用元素 offset //計算引用元素 offset
let offset = $(this).offset(); let offset = $(this).offset();
if (obj.targetPosition.left != null) {
offset.left = obj.targetPosition.left;
}
if (obj.targetPosition.top != null) {
offset.top = obj.targetPosition.top;
}
//引用元素 高寬 //引用元素 高寬
let width = $(this)[0].offsetWidth; let width = $(this)[0].offsetWidth;
if (obj.targetPosition.offsetWidth != null) {
width = obj.targetPosition.offsetWidth;
}
let height = $(this)[0].offsetHeight; let height = $(this)[0].offsetHeight;
if (obj.targetPosition.offsetHeight != null) {
height = obj.targetPosition.offsetHeight;
}
$(this).data("yttooltipid", ranId); $(this).data("yttooltipid", ranId);
$(clone).attr("id", "yt_tooltip_" + ranId); $(clone).attr("id", "yt_tooltip_" + ranId);
if (obj.group) { if (obj.group) {
@ -85,15 +102,17 @@ $.fn.YTTooltip = function (option) {
} else if (obj.direction == "right") { } else if (obj.direction == "right") {
left = offset.left + toolWidth + width > bodyWidth ? offset.left - toolWidth - 10 : offset.left + width + 10; left = offset.left + toolWidth + width > bodyWidth ? offset.left - toolWidth - 10 : offset.left + width + 10;
} else if (obj.direction == "bottom") { } else if (obj.direction == "bottom") {
left = offset.left + toolWidth + width > bodyWidth ? offset.left - toolWidth - 10 : offset.left;
top = offset.top + toolHeight + height > bodyHeight ? offset.top + height + 10 : offset.top + height + 10; top = offset.top + toolHeight + height > bodyHeight ? offset.top + height + 10 : offset.top + height + 10;
} else if (obj.direction == "top") { } else if (obj.direction == "top") {
left = offset.left + toolWidth + width > bodyWidth ? offset.left - toolWidth - 10 : offset.left;
top = offset.top < toolHeight ? offset.top + height + 5 : offset.top - toolHeight - 10; top = offset.top < toolHeight ? offset.top + height + 5 : offset.top - toolHeight - 10;
} }
if (obj.direction == "left" || obj.direction == "right") { if (obj.direction == "left" || obj.direction == "right") {
$(clone).css({ left: left, top: offset.top }); $(clone).css({ left: left, top: offset.top });
} else if (obj.direction == "top" || obj.direction == "bottom"){ } else if (obj.direction == "top" || obj.direction == "bottom"){
$(clone).css({ left: offset.left, top: top}); $(clone).css({ left: left, top: top});
} }
setTimeout(function () { setTimeout(function () {
obj.onShow ? obj.onShow(clone, obj.ele, obj) : ""; obj.onShow ? obj.onShow(clone, obj.ele, obj) : "";