859 lines
34 KiB
Plaintext
859 lines
34 KiB
Plaintext
<%@ Page Title="" Language="C#" MasterPageFile="~/IronIntelMasterPage.master" AutoEventWireup="true" CodeFile="FITracker.aspx.cs" Inherits="FITracker" %>
|
||
|
||
<asp:Content ID="Content1" ContentPlaceHolderID="holder_head" runat="Server">
|
||
<link href="css/jquery.datetimepicker.css" rel="stylesheet" />
|
||
<style type="text/css">
|
||
.itemselcted {
|
||
background-color: #ccc;
|
||
}
|
||
|
||
.itemhidden {
|
||
display: none;
|
||
}
|
||
|
||
.itemsuggested {
|
||
background-color: #ffff99;
|
||
}
|
||
|
||
#tbMachineTypes tbody tr:hover {
|
||
cursor: default;
|
||
background: #ddd;
|
||
}
|
||
|
||
#tbodyAssigned tr:hover {
|
||
cursor: default;
|
||
background: #ddd;
|
||
}
|
||
|
||
#tbodyUnassigned tr:hover {
|
||
cursor: default;
|
||
background: #ddd;
|
||
}
|
||
|
||
#tbodySelected tr:hover {
|
||
cursor: default;
|
||
background: #ddd;
|
||
}
|
||
|
||
#contentctrl {
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
}
|
||
|
||
.float_left {
|
||
float: left;
|
||
}
|
||
|
||
.function_bar {
|
||
float: right;
|
||
}
|
||
|
||
.user_main {
|
||
padding: 0 4px;
|
||
}
|
||
|
||
#dialog_user_randompass {
|
||
width: auto;
|
||
height: 16px;
|
||
margin: 3px 4px 0 4px;
|
||
}
|
||
|
||
.msgdiv {
|
||
padding-bottom: 10px;
|
||
}
|
||
|
||
.msgtime {
|
||
padding-left: 10px;
|
||
padding-right: 10px;
|
||
margin-bottom: 2px;
|
||
}
|
||
|
||
.msgself {
|
||
white-space: pre-wrap;
|
||
max-width: 240px;
|
||
border-radius: 5px;
|
||
padding-top: 8px;
|
||
padding-bottom: 8px;
|
||
padding-right: 20px;
|
||
padding-left: 20px;
|
||
display: inline-block;
|
||
margin-right: 10px;
|
||
background-color: #9eea6a;
|
||
text-align: left;
|
||
}
|
||
|
||
.msgother {
|
||
white-space: pre-wrap;
|
||
max-width: 240px;
|
||
border-radius: 5px;
|
||
padding-top: 8px;
|
||
padding-bottom: 8px;
|
||
padding-right: 20px;
|
||
padding-left: 20px;
|
||
display: inline-block;
|
||
margin-left: 10px;
|
||
background-color: white;
|
||
}
|
||
|
||
.locicon:before {
|
||
padding-right: 2px;
|
||
font-family: 'FontAwesome';
|
||
color: rgb(123,28,33);
|
||
content: '\f3c5';
|
||
}
|
||
|
||
.jsicon:before {
|
||
padding-right: 2px;
|
||
font-family: 'FontAwesome';
|
||
color: rgb(123,28,33);
|
||
content: '\f312';
|
||
}
|
||
|
||
.deviceitem {
|
||
padding-left: 15px;
|
||
padding-right: 10px;
|
||
cursor: pointer;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.deviceitem:hover {
|
||
background-color: #cbcbcb;
|
||
}
|
||
|
||
.deviceselected {
|
||
background-color: #e0e0e0;
|
||
}
|
||
|
||
.dialogspanbtn {
|
||
font-size: 14px;
|
||
font-weight: normal;
|
||
font-family: 'CalciteWebCoreIcons', 'Fontawesome';
|
||
cursor: pointer;
|
||
background: rgb(249, 189, 117);
|
||
padding: 2px;
|
||
}
|
||
|
||
.dialogedit:before {
|
||
content: '\e61b';
|
||
}
|
||
|
||
|
||
#basemapImg {
|
||
width: 100%;
|
||
height: 100%;
|
||
margin: 0;
|
||
padding: 0;
|
||
background-repeat: no-repeat;
|
||
background-position: center center;
|
||
-webkit-border-radius: 5px;
|
||
-moz-border-radius: 5px;
|
||
-o-border-radius: 5px;
|
||
border-radius: 5px;
|
||
}
|
||
|
||
#basemapTitle {
|
||
position: absolute;
|
||
z-index: 2;
|
||
bottom: 0px;
|
||
width: 90%;
|
||
color: #4c4c4c;
|
||
margin: 0;
|
||
font-size: 10px;
|
||
line-height: 12px;
|
||
display: block;
|
||
padding: 2px 5%;
|
||
background: #fff;
|
||
background: rgba(255, 255, 255, 0.80);
|
||
-webkit-border-radius: 0 0 5px 5px;
|
||
-moz-border-radius: 0 0 5px 5px;
|
||
-o-border-radius: 0 0 5px 5px;
|
||
border-radius: 0 0 5px 5px;
|
||
text-align: center;
|
||
}
|
||
|
||
#basemapgalleryDiv {
|
||
position: absolute;
|
||
right: 15px;
|
||
top: 35px;
|
||
z-index: 199;
|
||
background-color: #EFEFEF;
|
||
height: 75px;
|
||
width: 75px;
|
||
border: solid 1px #57585A;
|
||
border-radius: 5px;
|
||
padding: 1px;
|
||
}
|
||
|
||
#basemapGallery {
|
||
position: absolute;
|
||
right: 15px;
|
||
top: 35px;
|
||
width: 370px;
|
||
height: 120px;
|
||
overflow: auto;
|
||
display: none;
|
||
z-index: 200;
|
||
background-color: #EFEFEF;
|
||
}
|
||
</style>
|
||
<link rel="stylesheet" type="text/css" href="css/spectrum.css?v=1" />
|
||
<script src="js/spectrum.js?v=1" type="text/javascript"></script>
|
||
<script src="js/jquery.datetimepicker.full.js"></script>
|
||
<script src="<%=GetFileUrlWithVersion("js/vue.min.js")%>"></script>
|
||
<script>Vue.config.productionTip = false; Vue.config.silent = true;</script>
|
||
<link rel="stylesheet" href="https://js.arcgis.com/3.44/esri/css/esri.css" />
|
||
<script src="https://js.arcgis.com/3.44"></script>
|
||
<script>
|
||
_network.trackerquery = function (method, param, callback, error, nolog) {
|
||
_network.request("FITracker.aspx?tp=ashx", -1, method, param, callback, error, nolog);
|
||
}
|
||
|
||
var _allDevices;
|
||
var deviceid;
|
||
var assetid;
|
||
var lastmsgid = -1;
|
||
var devicevm;
|
||
var deviceinfovm;
|
||
|
||
function OnRefresh() {
|
||
showloading(true);
|
||
_network.trackerquery("GetTrackers", "", function (data) {
|
||
showloading(false);
|
||
_allDevices = data;
|
||
showDeviceList(_allDevices);
|
||
}, function (err) {
|
||
showloading(false);
|
||
});
|
||
}
|
||
|
||
function showDeviceList(data) {
|
||
for (var i = 0; i < data.length; i++) {
|
||
var r = data[i];
|
||
for (var j in r) {
|
||
if (j === "DeviceName" && r["DeviceName"] === "") {
|
||
r["DeviceName"] = r["DeviceID"];
|
||
break;
|
||
}
|
||
}
|
||
}
|
||
//devicevm.reload([]);
|
||
devicevm.reload(data);
|
||
}
|
||
|
||
function deviceChanged(e, newevice) {
|
||
var t = $(e.target);
|
||
t.parent().parent().find(".deviceselected").removeClass("deviceselected");
|
||
t.addClass("deviceselected");
|
||
if (newevice) {
|
||
deviceid = newevice.DeviceID;
|
||
assetid = newevice.AssetID;
|
||
lastmsgid = -1;
|
||
$("#msgctrl").empty();
|
||
loadTracker();
|
||
deviceinfovm.reload(newevice);
|
||
}
|
||
}
|
||
|
||
function OnEditAccuracy() {
|
||
if (deviceid == undefined || deviceid <= 0) return;
|
||
showmaskbg(true);
|
||
$('#dialog_accuracy')
|
||
.attr('act', 'add')
|
||
.css({
|
||
'top': (document.documentElement.clientHeight - $('#dialog_accuracy').height()) / 3,
|
||
'left': (document.documentElement.clientWidth - $('#dialog_accuracy').width()) / 2
|
||
})
|
||
.showDialogfixed();
|
||
$('#dialog_accuracyvalue').val($("#txtAccuracy").val()).select();
|
||
}
|
||
|
||
function SaveAccuracy() {
|
||
if (deviceid == undefined || deviceid <= 0) return;
|
||
|
||
var accuracy = $("#dialog_accuracyvalue").val();
|
||
if (accuracy !== "" && isNaN(accuracy)) {
|
||
showAlert(GetTextByKey("P_M3_ACCURACYFORMATERROR", 'Accuracy format error.'), GetTextByKey("P_M3_EDITACCURACY", "Edit Accuracy"));
|
||
return false;
|
||
}
|
||
if (eval(accuracy) < 0) {
|
||
showAlert(GetTextByKey("P_M3_ACCURACYCANNOTBELESSTHAN0", 'Accuracy cannot be less than 0.'), GetTextByKey("P_M3_EDITACCURACY", "Edit Accuracy"));
|
||
return false;
|
||
}
|
||
var note = $.trim($('#dialog_accuracynote').val());
|
||
|
||
var param = JSON.stringify([deviceid, accuracy, note]);
|
||
param = htmlencode(param);
|
||
_network.trackerquery("ChangeAcceptableAccuracy", param, function (data) {
|
||
if (data !== '') {
|
||
showAlert(data, GetTextByKey("P_M3_SENDMESSAGE", 'Send Message'));
|
||
}
|
||
else {
|
||
$("#txtAccuracy").val(accuracy);
|
||
deviceinfovm.device.AcceptableAccuracy = accuracy;
|
||
$('#dialog_accuracy').hideDialog();
|
||
}
|
||
}, function (err) {
|
||
showAlert(GetTextByKey("P_M3_FAILEDTOSENDMESSAGE", 'Failed to send message.'), GetTextByKey("P_M3_SENDMESSAGE", 'Send Message'));
|
||
});
|
||
}
|
||
|
||
function loadTracker() {
|
||
getMessages();
|
||
execIframeFunc("reloaddata", [assetid, ""], "iframemachine");
|
||
}
|
||
|
||
var gettingmsgdeviceid = undefined;
|
||
function getMessages() {
|
||
if (deviceid == undefined || deviceid < 0 || gettingmsgdeviceid == deviceid)
|
||
return;
|
||
gettingmsgdeviceid = deviceid;
|
||
let tempdeviceid = deviceid;
|
||
var param = JSON.stringify([deviceid, lastmsgid]);
|
||
_network.trackerquery("GetMessages", param, function (data) {
|
||
if (typeof data === 'string') {
|
||
//showAlert(data, 'Get Messages');
|
||
}
|
||
else {
|
||
if (data.length > 0) {
|
||
if (tempdeviceid !== deviceid)
|
||
return;
|
||
for (var i = 0; i < data.length; i++) {
|
||
var msg = data[i];
|
||
if (lastmsgid >= msg.ID)
|
||
continue;
|
||
showMessage(msg);
|
||
lastmsgid = msg.ID;
|
||
}
|
||
|
||
var scrollHeight = $('#msgctrl').prop("scrollHeight");
|
||
$('#msgctrl').animate({ scrollTop: scrollHeight }, 400);
|
||
}
|
||
}
|
||
gettingmsgdeviceid = undefined;
|
||
}, function (err) {
|
||
gettingmsgdeviceid = undefined;
|
||
//showAlert('Failed to get messages.', 'Get Messages');
|
||
});
|
||
}
|
||
|
||
function postMessage(msg, type) {
|
||
if (deviceid == undefined || deviceid <= 0) return;
|
||
var param = JSON.stringify([deviceid, msg, type]);
|
||
param = htmlencode(param);
|
||
let tempdeviceid = deviceid;
|
||
_network.trackerquery("PostMessage", param, function (data) {
|
||
if (typeof data === 'string') {
|
||
showAlert(data, GetTextByKey("P_M3_SENDMESSAGE", 'Send Message'));
|
||
}
|
||
else {
|
||
var msg = data;
|
||
if (tempdeviceid !== deviceid)
|
||
return;
|
||
if (lastmsgid >= msg.ID)
|
||
return;
|
||
showMessage(msg);
|
||
lastmsgid = msg.ID;
|
||
|
||
var scrollHeight = $('#msgctrl').prop("scrollHeight");
|
||
$('#msgctrl').animate({ scrollTop: scrollHeight }, 400);
|
||
}
|
||
}, function (err) {
|
||
showAlert(GetTextByKey("P_M3_FAILEDTOSENDMESSAGE", 'Failed to send message.'), GetTextByKey("P_M3_SENDMESSAGE", 'Send Message'));
|
||
});
|
||
}
|
||
|
||
function sendMessage() {
|
||
var msg = $("#txtmsg").val();
|
||
if ($.trim(msg) === "") {
|
||
showAlert(GetTextByKey("P_M3_MESSAGECANNOTBEEMPTY", 'Message cannot be empty.'), GetTextByKey("P_M3_SENDMESSAGE", 'Send Message'));
|
||
return;
|
||
}
|
||
$("#txtmsg").val("").focus();
|
||
//showMessage(msg, true);
|
||
postMessage(msg, 0);
|
||
}
|
||
|
||
function showMessage(msg) {
|
||
var msgctrl = $("#msgctrl");
|
||
var div = $("<div class='msgdiv'></div>").appendTo(msgctrl);
|
||
$("<div class='msgtime'></div>").text(msg.SenderName + " " + msg.TimeText).appendTo(div);
|
||
var contentctrl = $("<div></div>").appendTo(div);
|
||
if (msg.MessageType === 1 | msg.MessageType === 2) {
|
||
var lat = 0;
|
||
var lng = 0;
|
||
var text = "";
|
||
var index = msg.TextMessage.indexOf(",");
|
||
if (index > 0)
|
||
lat = eval(msg.TextMessage.substring(0, index));
|
||
var index1 = msg.TextMessage.indexOf(",", index + 1);
|
||
if (index1 > 0) {
|
||
lng = eval(msg.TextMessage.substring(index + 1, index1));
|
||
text = msg.TextMessage.substring(index1 + 1);
|
||
}
|
||
if (msg.MessageType === 1) {
|
||
contentctrl.append($("<span class='jsicon'></span>"));
|
||
}
|
||
else if (msg.MessageType === 2) {
|
||
contentctrl.append($("<span class='locicon'></span>"));
|
||
}
|
||
contentctrl.css("padding-left", 10);
|
||
var js = $("<a href='javascript:void(0);'></a>").text(text);
|
||
contentctrl.append(js);
|
||
}
|
||
else
|
||
contentctrl.text(msg.TextMessage);
|
||
if (msg.IsSelf) {
|
||
contentctrl.addClass("msgself");
|
||
div.css("text-align", "right");
|
||
}
|
||
else
|
||
contentctrl.addClass("msgother");
|
||
}
|
||
|
||
function getJobsites() {
|
||
_network.trackerquery("GetJobsites", [], function (data) {
|
||
if (typeof data !== 'string') {
|
||
var seljs = $("#selJobsites");
|
||
for (var i in data) {
|
||
var js = data[i];
|
||
seljs.append($('<option></option>')
|
||
.attr('value', js.ID)
|
||
.text(js.Name).data("jsobj", js));
|
||
}
|
||
}
|
||
}, function (err) {
|
||
});
|
||
}
|
||
|
||
|
||
function sendJobsite() {
|
||
$('#jobsitectrl').show();
|
||
}
|
||
|
||
function sendJobsiteMessage() {
|
||
var seljs = $("#selJobsites");
|
||
var selItem = seljs.find("option:selected");
|
||
var js = selItem ? selItem.data("jsobj") : null;
|
||
if (js) {
|
||
var msg = "";
|
||
msg += js.Latitude + ",";
|
||
msg += js.Longitude + ",";
|
||
msg += js.Name;
|
||
postMessage(msg, 1);
|
||
}
|
||
$('#jobsitectrl').hide();
|
||
}
|
||
|
||
function sendLocation() {
|
||
showmaskbg(true);
|
||
$('#dialog_map')
|
||
.attr('act', 'add')
|
||
.css({
|
||
'top': (document.documentElement.clientHeight - $('#dialog_map').height()) / 3,
|
||
'left': (document.documentElement.clientWidth - $('#dialog_map').width()) / 2
|
||
})
|
||
.showDialog();
|
||
}
|
||
|
||
function sendLocationMessage() {
|
||
var latitude = $('#maplatude').text();
|
||
var longitude = $('#maplongitude').text();
|
||
if (latitude !== "" && longitude !== "") {
|
||
var msg = "";
|
||
msg += latitude + ",";
|
||
msg += longitude + ",";
|
||
msg += "Location";
|
||
postMessage(msg, 2);
|
||
$('#dialog_map').hideDialog();
|
||
showmaskbg(false);
|
||
}
|
||
else {
|
||
showAlert(GetTextByKey("P_M3_PLEASESELECTALOCATIONTOSENDTO", 'Please select a location to send to.'), GetTextByKey("P_M3_SENDLOCATION", 'Send Location'));
|
||
}
|
||
}
|
||
|
||
|
||
/*地图相关*/
|
||
var polygonitem = [];
|
||
var machineGraphics = [];
|
||
var isMapLoaded = false;
|
||
var isLoadingMap = false;
|
||
var mapObj;
|
||
var graphicLayer = undefined;
|
||
var BasePointLayer = undefined;
|
||
var BasePolygonLayer = undefined
|
||
var DrawPolygonLayer = undefined
|
||
var TransportationLayer = undefined
|
||
var GraphicC = undefined;
|
||
var PointC = undefined;
|
||
var PictureMarkerSymbolC = undefined;
|
||
var UnitsC = undefined;
|
||
var CircleC = undefined;
|
||
var SimpleFillSymbolC = undefined;
|
||
var ExtentC = undefined;
|
||
var DrawC = undefined;
|
||
var toolbar = undefined;
|
||
var PolygonC = undefined;
|
||
var BasemapGalleryC = undefined;
|
||
|
||
function loadMap() {
|
||
require(["esri/map", "esri/graphic", "esri/geometry/Point", "esri/symbols/PictureMarkerSymbol", "esri/units",
|
||
"esri/geometry/Circle", "esri/symbols/SimpleFillSymbol", "esri/geometry/Extent", "esri/toolbars/draw", "esri/symbols/SimpleMarkerSymbol",
|
||
"esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol", "esri/geometry/Polygon", "esri/dijit/BasemapGallery", "esri/layers/ArcGISTiledMapServiceLayer"],
|
||
function (Map, Graphic, Point, PictureMarkerSymbol, Units, Circle, SimpleFillSymbol, Extent, Draw, SimpleMarkerSymbol,
|
||
SimpleLineSymbol, SimpleFillSymbol, Polygon, BasemapGallery, ArcGISTiledMapServiceLayer) {
|
||
MapC = Map;
|
||
GraphicC = Graphic;
|
||
PointC = Point;
|
||
PictureMarkerSymbolC = PictureMarkerSymbol;
|
||
UnitsC = Units;
|
||
CircleC = Circle;
|
||
SimpleFillSymbolC = SimpleFillSymbol;
|
||
ExtentC = Extent;
|
||
DrawC = Draw;
|
||
PolygonC = Polygon;
|
||
BasemapGalleryC = BasemapGallery;
|
||
mapObj = new MapC("mapdiv", {
|
||
basemap: "topo",
|
||
center: [-128.694315, 42.202091], // longitude, latitude
|
||
zoom: 4
|
||
});
|
||
|
||
dojo.connect(mapObj, "onClick", showCoordinates);
|
||
$('div.esriControlsBR').remove();
|
||
graphicLayer = new esri.layers.GraphicsLayer();
|
||
mapObj.addLayer(graphicLayer);
|
||
BasePointLayer = new esri.layers.GraphicsLayer();
|
||
mapObj.addLayer(BasePointLayer);
|
||
BasePolygonLayer = new esri.layers.GraphicsLayer();
|
||
mapObj.addLayer(BasePolygonLayer);
|
||
|
||
DrawPolygonLayer = new esri.layers.GraphicsLayer();
|
||
mapObj.addLayer(DrawPolygonLayer);
|
||
|
||
TransportationLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/arcgis/rest/services/Reference/World_Transportation/MapServer");
|
||
|
||
// create a toolbar for the map
|
||
//toolbar = new DrawC(mapObj);
|
||
//toolbar.on("draw-complete", completeshape);
|
||
|
||
initBasemapGallery(mapObj);
|
||
|
||
isLoadingMap = false;
|
||
isMapLoaded = true;
|
||
});
|
||
}
|
||
|
||
function initBasemapGallery(map) {
|
||
$(window).click(function (e) {
|
||
if ($(e.target).attr("id") != "basemapImg")
|
||
$("#basemapGallery").hide();
|
||
});
|
||
var basemap = "topo";
|
||
$("#basemapImg").css("background-image", "url('https://js.arcgis.com/3.44/esri/images/basemap/topo.jpg')");
|
||
$("#basemapTitle").text(GetTextByKey("P_MAP_TOPOGRAPHIC", "Topographic"));
|
||
|
||
var basemapGallery = new BasemapGalleryC({
|
||
showArcGISBasemaps: false,
|
||
map: map
|
||
}, "basemapGallery");
|
||
|
||
|
||
var satellitemap = new esri.dijit.Basemap({
|
||
layers: [new esri.dijit.BasemapLayer({
|
||
url: "http://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer"
|
||
})],
|
||
title: GetTextByKey("P_MAP_IMAGERY", "Imagery"),
|
||
thumbnailUrl: "https://js.arcgis.com/3.44/esri/images/basemap/satellite.jpg"
|
||
});
|
||
basemapGallery.add(satellitemap);
|
||
|
||
var topomap = new esri.dijit.Basemap({
|
||
layers: [new esri.dijit.BasemapLayer({
|
||
url: "http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer"
|
||
})],
|
||
title: GetTextByKey("P_MAP_TOPOGRAPHIC", "Topographic"),
|
||
thumbnailUrl: "https://js.arcgis.com/3.44/esri/images/basemap/topo.jpg"
|
||
});
|
||
basemapGallery.add(topomap);
|
||
|
||
var streetmap = new esri.dijit.Basemap({
|
||
layers: [new esri.dijit.BasemapLayer({
|
||
//type: "OpenStreetMap",
|
||
url: "http://server.arcgisonline.com/arcgis/rest/services/World_Street_Map/MapServer"
|
||
})],
|
||
title: GetTextByKey("P_MAP_STREETS", "Streets"),
|
||
thumbnailUrl: "https://js.arcgis.com/3.44/esri/images/basemap/streets.jpg"
|
||
|
||
});
|
||
basemapGallery.add(streetmap);
|
||
|
||
basemapGallery.startup();
|
||
|
||
basemapGallery.on("selection-change", function () {
|
||
var basemap = basemapGallery.getSelected();
|
||
if (basemap) {
|
||
if (basemap.title == "Imagery")
|
||
map.addLayer(TransportationLayer);
|
||
else
|
||
map.removeLayer(TransportationLayer);
|
||
$("#basemapImg").css("background-image", "url('" + basemap.thumbnailUrl + "')");
|
||
$("#basemapTitle").text(basemap.title);
|
||
}
|
||
$("#basemapGallery").hide();
|
||
});
|
||
|
||
basemapGallery.on("error", function (msg) {
|
||
console.log("basemap gallery error: ", msg);
|
||
});
|
||
}
|
||
|
||
function showCoordinates(evt) {
|
||
if (evt) {
|
||
var mp = evt.mapPoint;
|
||
$("#mapLocation").css("display", "block");
|
||
$('#maplatude').text(mp.getLatitude().toFixed(6));
|
||
$('#maplongitude').text(mp.getLongitude().toFixed(6));
|
||
}
|
||
|
||
locateJobSite();
|
||
}
|
||
|
||
function locateJobSite(isopen) {
|
||
var latitude = parseFloat($('#maplatude').text());
|
||
var longitude = parseFloat($('#maplongitude').text());
|
||
if (latitude == 0 && longitude == 0) return;
|
||
var point = new esri.geometry.Point({
|
||
latitude: latitude,
|
||
longitude: longitude
|
||
});
|
||
if (isopen) {
|
||
mapObj.centerAndZoom(point, 3);
|
||
}
|
||
var symbol = new esri.symbol.TextSymbol({
|
||
color: [0xf7, 0xc0, 0x03],//#f7c003
|
||
haloColor: "black",
|
||
haloSize: "1px",
|
||
text: "\ue61d",
|
||
xoffset: 3,
|
||
yoffset: 3,
|
||
font: { // autocast as esri/symbols/Font
|
||
size: 32,
|
||
family: "CalciteWebCoreIcons",
|
||
weight: "bolder"
|
||
}
|
||
});
|
||
graphicLayer.clear();
|
||
var graphic = new esri.Graphic(point, symbol);
|
||
graphicLayer.add(graphic);
|
||
}
|
||
|
||
$(function () {
|
||
setPageTitle(GetTextByKey("P_M3", 'M3'), true);
|
||
setFavoriteDisplay(true, 500);
|
||
|
||
setInterval(getMessages, 5 * 1000);//定时获取消息
|
||
getJobsites();
|
||
|
||
devicevm = new Vue({
|
||
el: '#devicelist',
|
||
data: {
|
||
devices: []
|
||
},
|
||
methods: {
|
||
reload: function (data) {
|
||
this.devices = data;
|
||
},
|
||
deviceClick: function (e, d) {
|
||
deviceChanged(e, d);
|
||
}
|
||
}
|
||
});
|
||
|
||
deviceinfovm = new Vue({
|
||
el: '#deviceinfo',
|
||
data: {
|
||
device: {}
|
||
},
|
||
methods: {
|
||
reload: function (data) {
|
||
this.device = data;
|
||
}
|
||
}
|
||
});
|
||
|
||
$('#dialog_map').dialog(function () {
|
||
showmaskbg(false);
|
||
});
|
||
|
||
$('#dialog_accuracy').dialog(function () {
|
||
showmaskbg(false);
|
||
});
|
||
|
||
loadMap();
|
||
$("#basemapgalleryDiv").click(null, function (e) {
|
||
$("#basemapGallery").show();
|
||
});
|
||
|
||
$(window).resize(function () {
|
||
//$("#devicelist").css("height", $(window).height() - $("#devicelist").offset().top - 4);
|
||
//grid_dt && grid_dt.resize();
|
||
//$("#rightctrl").css("height", $(window).height() - $("#rightctrl").offset().top - 4)
|
||
// .css("width", $(window).width() - 250);
|
||
}).resize();
|
||
|
||
$(document).mousedown(function (e) {
|
||
var jsctrl = $('#jobsitectrl');
|
||
var t = $(e.target);
|
||
if (!t.is(jsctrl)
|
||
&& !t.parent().is(jsctrl)
|
||
&& !t.parent().parent().is(jsctrl)
|
||
&& !t.is($("#btnSendJobsite")))
|
||
jsctrl.hide();
|
||
});
|
||
|
||
OnRefresh();
|
||
});
|
||
|
||
</script>
|
||
</asp:Content>
|
||
<asp:Content ID="Content2" ContentPlaceHolderID="holder_content" runat="Server">
|
||
<div>
|
||
<div id="contentctrl">
|
||
<div class="page_title" data-lgid="P_M3">M3</div>
|
||
<div class="function_title">
|
||
<%--<span class="sbutton iconadd" onclick="OnAdd();">Add</span>--%>
|
||
<span class="sbutton iconrefresh" onclick="OnRefresh();" data-lgid="P_M3_REFRESH">Refresh</span>
|
||
</div>
|
||
<div>
|
||
<div id="devicelist" style="position: absolute; width: 240px; left: 5px; top: 75px; bottom: 5px; line-height: 30px; border: 1px solid gray;">
|
||
<div style="margin-left: 7px; font-size: 14px; font-weight: bold;" data-lgid="P_M3_DEVICES">Devices</div>
|
||
<div v-for="device in devices">
|
||
<div class='deviceitem' v-on:click="deviceClick($event,device)" v-bind:title="device.DeviceName">{{device.DeviceName}}</div>
|
||
</div>
|
||
</div>
|
||
<div id="rightctrl" style="position: absolute; top: 75px; left: 250px; right: 0px; bottom: 0px;">
|
||
<div id="deviceinfo" style="border: 1px solid gray; height: 60px; line-height: 24px; min-width: 1100px;">
|
||
<table>
|
||
<tr>
|
||
<td style="text-align: right;"><b data-lgid="P_M3_DEVICEID_COLON">Device ID:</b></td>
|
||
<td style="min-width: 140px;">{{device.DeviceID}}</td>
|
||
<td style="text-align: right; padding-left: 10px;"><b data-lgid="P_M3_DEVICENAME_COLON">Device Name:</b></td>
|
||
<td style="min-width: 140px;">{{device.DeviceName}}</td>
|
||
<td style="text-align: right; padding-left: 10px;"><b data-lgid="P_M3_DEVICETYPE_COLON">Device Type:</b></td>
|
||
<td style="min-width: 120px;">{{device.DeviceType}}</td>
|
||
<td style="text-align: right; padding-left: 10px;"><b data-lgid="P_M3_ACCURACY_COLON">Accuracy:</b></td>
|
||
<td style="min-width: 120px; white-space: nowrap;">
|
||
<input type="text" id="txtAccuracy" v-model="device.AcceptableAccuracy" maxlength="8" tabindex="14" style="width: 120px;" disabled="disabled" />
|
||
<span id="spanEditAccuracy" class="dialogspanbtn dialogedit" title="Edit Accuracy" data-title-lgid="P_M3_EDITACCURACY" onclick="OnEditAccuracy();"></span></td>
|
||
</tr>
|
||
<tr>
|
||
<td style="text-align: right;"><b data-lgid="P_M3_ASSETNAME_COLON">Asset Name:</b></td>
|
||
<td>{{device.Name}}</td>
|
||
<td style="text-align: right; padding-left: 10px;"><b data-lgid="P_M3_MAKE_COLON">Make:</b></td>
|
||
<td>{{device.Make}}</td>
|
||
<td style="text-align: right; padding-left: 10px;"><b data-lgid="P_M3_MODEL_COLON">Model:</b></td>
|
||
<td>{{device.Model}}</td>
|
||
<td style="text-align: right; padding-left: 10px;"><b data-lgid="P_M3_TYPE_COLON">Type:</b></td>
|
||
<td>{{device.Type}}</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
<div style="position: absolute; top: 65px; bottom: 5px; border: 1px solid gray; width: 400px;">
|
||
<div id="msgctrl" style="position: absolute; top: 0px; bottom: 158px; width: 100%; background-color: #e5e5e5; overflow: auto;"></div>
|
||
<table style="position: absolute; bottom: 5px; width: 100%; border-collapse: collapse; border-spacing: 0;">
|
||
<tr style="height: 120px;">
|
||
<td>
|
||
<textarea id="txtmsg" style="width: 392px; height: 118px; resize: none;"></textarea>
|
||
</td>
|
||
</tr>
|
||
<tr style="height: 30px;">
|
||
<td style="text-align: right; position: relative;">
|
||
<div>
|
||
<input id="btnSendLocation" type="button" value="Send Location" data-lgid="P_M3_SENDLOCATION" style="margin-right: 10px;" onclick="sendLocation();" />
|
||
<input id="btnSendJobsite" type="button" value="Send Jobsite" data-lgid="P_M3_SENDJOBSITE" style="margin-right: 10px;" onclick="sendJobsite();" />
|
||
<input type="button" value="Send" data-lgid="P_M3_SEND" style="margin-right: 10px;" onclick="sendMessage();" />
|
||
<div id="jobsitectrl" style="position: absolute; background-color: #d2d2d2; top: -40px; right: 62px; padding-top: 10px; padding-bottom: 10px; padding-right: 5px; padding-left: 5px; display: none;">
|
||
<select id="selJobsites" style="min-width: 120px; max-height: 280px;">
|
||
</select>
|
||
<input type="button" value="Send" data-lgid="P_M3_SEND" style="margin-left: 5px;" onclick="sendJobsiteMessage();" />
|
||
</div>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
<div style="position: absolute; top: 65px; bottom: 10px; left: 405px; right: 1px; border: 1px solid gray; min-width: 690px;">
|
||
<iframe id="iframemachine" src="MapViewChart.aspx?ds=FITRACKER" style="width: 100%; height: 100%; display: block; border: none;"></iframe>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="dialogmask" class="maskbg" style="display: none;">
|
||
<div class="loading_icon icon c-spin"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="mask_bg">
|
||
<div class="loading c-spin"></div>
|
||
</div>
|
||
<div class="dialog" id="dialog_map" style="width: 1200px; display: none;">
|
||
<div class="dialog-title"><span class="title" data-lgid="P_M3_SENDLOCATION">Send Location</span><em class="dialog-close"></em></div>
|
||
|
||
<div class="dialog-content">
|
||
<div style="float: left; margin-left: 5px; margin-top: -5px;">
|
||
<div id="mapdiv" style="width: 1180px; height: 540px; background-color: Window;">
|
||
</div>
|
||
<div id="basemapgalleryDiv">
|
||
<div id="basemapImg"></div>
|
||
<div id="basemapTitle"></div>
|
||
</div>
|
||
<div id="basemapGallery"></div>
|
||
|
||
<div id="mapLocation" class="dialog-func" style="float: left; display: none;">
|
||
<span style="margin-left: 5px;" data-lgid="P_M3_LATITUDE_COLON">Latitude: </span>
|
||
<label id="maplatude"></label>
|
||
<span data-lgid="P_M3_LONGITUDE_COLON"> Longitude: </span><label id="maplongitude"></label>
|
||
</div>
|
||
|
||
<div class="dialog-func" style="float: right;">
|
||
<input type="button" class="dialog-close" style="height: 24px;" value="Cancel" data-lgid="P_M3_CANCEL" tabindex="13" />
|
||
<input type="button" onclick="sendLocationMessage();" style="height: 24px; width: unset;" value="Send" data-lgid="P_M3_SEND" tabindex="12" />
|
||
<div class="clear"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="dialog_accuracy" class="dialog" style="display: none;">
|
||
<div class="dialog-title"><span class="title" id="popupTitle" data-lgid="P_M3_EDITACCURACY">Edit Accuracy</span><em class="dialog-close"></em></div>
|
||
<div class="dialog-content">
|
||
<table style="line-height: 30px;">
|
||
<tr>
|
||
<td class="label" style="width: 100px;" data-lgid="P_M3_ACCURACY">Accuracy</td>
|
||
<td>
|
||
<input type="text" id="dialog_accuracyvalue" maxlength="100" tabindex="50" style="width: 240px;" /></td>
|
||
</tr>
|
||
<tr>
|
||
<td class="label" style="width: 100px;" data-lgid="P_M3_NOTE_COLON">Note:</td>
|
||
<td>
|
||
<textarea id="dialog_accuracynote" maxlength="1000" tabindex="51" style="width: 240px; height: 100px; max-width: unset;"></textarea>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
|
||
<div class="dialog-func">
|
||
<input type="button" value="Cancel" data-lgid="P_M3_CANCEL" class="dialog-close" tabindex="53" style="margin-right: 30px;" />
|
||
<input type="button" onclick="SaveAccuracy();" value="OK" data-lgid="P_M3_OK" tabindex="52" />
|
||
<div class="clear"></div>
|
||
</div>
|
||
</div>
|
||
</asp:Content>
|
||
|