add site
This commit is contained in:
905
Site/FITracker.aspx
Normal file
905
Site/FITracker.aspx
Normal file
@ -0,0 +1,905 @@
|
||||
<%@ 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 .dialog-title .dialog-close {
|
||||
float: right;
|
||||
margin-right: 6px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.dialog .dialog-title .dialog-close:before {
|
||||
content: '\e600';
|
||||
}
|
||||
|
||||
.dialog-content table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.dialog-content table td.label {
|
||||
width: 170px;
|
||||
text-align: right;
|
||||
padding-right: 10px;
|
||||
line-height: 28px;
|
||||
height: 24px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.dialog-content table td input,
|
||||
.dialog-content table td textarea {
|
||||
border: 1px solid #a9a9a9;
|
||||
width: 200px;
|
||||
height: 18px;
|
||||
padding: 1px;
|
||||
}
|
||||
|
||||
.dialog-content table td input[type="checkbox"] {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.dialog-content table td textarea {
|
||||
height: 100px;
|
||||
max-width: 200px;
|
||||
}
|
||||
|
||||
#dialog_user_randompass {
|
||||
width: auto;
|
||||
height: 16px;
|
||||
margin: 3px 4px 0 4px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-family: CalciteWebCoreIcons;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.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.40/esri/css/esri.css" />
|
||||
<script src="https://js.arcgis.com/3.40"></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;
|
||||
$('#mask_bg').show();
|
||||
$('#dialog_accuracy')
|
||||
.attr('act', 'add')
|
||||
.css({
|
||||
'top': (document.documentElement.clientHeight - $('#dialog_accuracy').height()) / 3,
|
||||
'left': (document.documentElement.clientWidth - $('#dialog_accuracy').width()) / 2
|
||||
})
|
||||
.showDialog();
|
||||
$('#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;
|
||||
$('#mask_bg').hide();
|
||||
$('#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() {
|
||||
$('#mask_bg').show();
|
||||
$('#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();
|
||||
$('#mask_bg').hide();
|
||||
}
|
||||
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.40/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.40/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.40/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.40/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 () {
|
||||
$('#mask_bg').hide();
|
||||
});
|
||||
|
||||
$('#dialog_accuracy').dialog(function () {
|
||||
$('#mask_bg').hide();
|
||||
});
|
||||
|
||||
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" class="inputbox" 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>
|
||||
|
||||
Reference in New Issue
Block a user