<%@ Page Language="C#" AutoEventWireup="true" CodeFile="MapViewChart.aspx.cs" Inherits="MapViewChart" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style>
html,
body {
/*font-family: sans-serif;*/
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#content {
width: 100%;
top: 0px;
bottom: 0;
margin: 0;
position: fixed;
/*color: #6b6b6b;*/
overflow: auto;
}
#parameter_left {
background: #f4f4f4;
height: 100%;
width: 200px;
float: left;
color: #000;
position: relative;
}
div {
cursor: default;
}
</style>
<style type="text/css">
.data-grid {
height: 100%;
font-size: 12px !important;
font-family: "Segoe UI","Segoe UI Web (West European)","Segoe UI",-apple-system,BlinkMacSystemFont,"Roboto","Helvetica Neue",sans-serif !important;
}
</style>
<link rel="stylesheet" href="<%=GetFileUrlWithVersion("css/default.css")%>" type="text/css" />
<link rel="stylesheet" href="<%=GetFileUrlWithVersion("css/split_sub.css")%>" type="text/css" />
<link rel="stylesheet" href="<%=GetFileUrlWithVersion("css/split_sub.css")%>" />
<link rel="stylesheet" href="<%=GetFileUrlWithVersion("css/mapview.css")%>" />
<link rel="stylesheet" href="<%=GetFileUrlWithVersion("css/editmultiselect.css")%>" />
<link rel="stylesheet" href="https://js.arcgis.com/3.40/esri/css/esri.css" />
<link rel="stylesheet" href="<%=GetFileUrlWithVersion("css/jquery.datetimepicker.css")%>" />
<link rel="stylesheet" href="<%=GetFileUrlWithVersion("css/playbar.css")%>" />
<link type="text/css" href="<%=GetFileUrlWithVersion("js/components/css/gridview.css") %>" rel="stylesheet" />
<link type="text/css" href="<%=GetFileUrlWithVersion("css/override.css") %>" rel="stylesheet" />
<link href="<%=GetFileUrlWithVersion("css/panel.css")%>" rel="stylesheet" type="text/css" />
<script src="<%=GetFileUrlWithVersion("js/jquery-" + (JQueryVersion ?? "3.6.0") + ".min.js")%>" type="text/javascript"></script>
<script src="<%=GetFileUrlWithVersion("js/cookie.js")%>"></script>
<script src="<%=GetFileUrlWithVersion("js/utility.js")%>" type="text/javascript"></script>
<script type="text/javascript" src="<%=GetFileUrlWithVersion("js/components/gridview.js") %>"></script>
<script>
var GridView = window.GridView || window['g5-gridview'];
//必须放在地图js之前
var dojoConfig = {
paths: {
extras1: location.pathname.replace(/\/[^/]+$/, "") + "/js/mapview"
},
cacheBust: true
};
</script>
<script src="<%=GetFileUrlWithVersion("js/jquery.datetimepicker.full.js")%>"></script>
<script src="<%=GetFileUrlWithVersion("js/vue.min.js")%>"></script>
<script src="<%=GetFileUrlWithVersion("js/echarts.min.js")%>"></script>
<script src="<%=GetFileUrlWithVersion("js/compass.js")%>"></script>
<script>Vue.config.productionTip = false; Vue.config.silent = true;</script>
<script src="https://js.arcgis.com/3.40"></script>
<script src="<%=GetFileUrlWithVersion("js/mapview/asset.js")%>"></script>
<script src="<%=GetFileUrlWithVersion("js/mapview/maphelper.js")%>"></script>
<script src="<%=GetFileUrlWithVersion("js/mapview/mapview.js")%>"></script>
<script src="<%=GetFileUrlWithVersion("js/language.js")%>"></script>
<script src="<%=GetFileUrlWithVersion("js/assetsummary.js")%>"></script>
<script type="text/javascript">
_network.root = '<%=Page.ResolveUrl("~/")%>';
var companyids = "";
var MachineID = "<%=MachineID %>";
var VIN = '<%=VIN.Replace("'","\\'") %>';
var Datasource = "<%=Datasource %>";
var currentdate = "<%=CurrentDate %>";
var isMapLoaded = false;
var leftCtrlWidth = 390;
var rightCtrlWidth = 280;
var mapHelper;
var machineAlert;
var userParams = undefined;
var assetObject = undefined;
var notShowDetail = true;
var notShowIcons = true;
var canEditAsset = false;
var canViewWorkOrder = false;
var canViewMR = false;
var canViewAlertsManagement = false;
var canViewFuelRecords = false;
var canViewInspection = false;
var canViewPM = false;
var showTooltipIcons = false;
var IsSupperAdmin = false;
var isAllowed = false;
var serVersion = "";
var vm;
_network.mapviewchartquery = function (method, param, callback, error, nolog) {
_network.request("MapViewChart.aspx?tp=ashx", -1, method, param, callback, error, nolog);
}
function init() {
loadMap();
}
function loadMap() {
mapHelper = new MapHelper(onMapInitialized);
assetObject = new AssetObject(mapHelper);
}
function onMapInitialized() {
isMapLoaded = true;
initData(onDataInitialized);
}
function initData(callback) {
$("#historyCtrl").show();//所有类型站点都显示Show History
//$("#contentCtrl").css("bottom", "184px");
$("#autoRecenterDiv").show();
//assetObject.getContractor(callback);
if (callback)
callback();
}
function onDataInitialized() {
isMapLoaded = true;
refreshData();
setInterval(refreshData, 60 * 1000);//开启定时刷新
setTimeout(checkServerVersion, 60000);
}
function refreshData() {
try {
if (machineAlert) {
_dialog.close(machineAlert);
machineAlert = null;
}
getMachineItem();
assetObject.getCompanyLocations();
}
catch (e) {
machineAlert = _dialog.showAlert(GetTextByKey("P_MV_UNABLETOOBTAINASSETDATAATTEMPTINGTORECONNECT", 'Unable to obtain asset data. Attempting to reconnect...'), GetTextByKey("P_MV_REFRESHASSETDATA", 'Refresh asset data'));
}
}
function getMachineItem() {
_network.mapviewchartquery("getMachineItem", JSON.stringify([MachineID, VIN, Datasource]), function (data) {
if (data && typeof (data) !== "string") {
if (data.Location) {
data.Latitude = data.Location.Latitude;
data.Longitude = data.Location.Longitude;
}
mapHelper.clearMachine();
mapHelper.showMachine(data);
mapHelper.locateMachine(data, true);
currentLocationHistoryMachine = data;
vm.reload(data);
getNowFormatDate();
} else
mapHelper.clearMachine();
$('#loadingDiv').hide();
}, function () {
$('#loadingDiv').hide();
});
}
function checkServerVersion() {//检查服务端版本号，如果服务端已经更新，刷新当前页面
_network.mapviewquery("GetServerVersion", "", function (data) {
if (serVersion != "" && serVersion != data) {
window.location.reload(true);
return;
}
serVersion = data;
setTimeout(checkServerVersion, 60000);
});
}
function showOtherIcons() {
var leftCtrl = $("#leftCtrl");
$("#mapMeunDiv").css("left", leftCtrl.width() + 25);
}
function reloaddata(machineid, vin) {
MachineID = machineid;
VIN = vin;
if (isMapLoaded) {
if ((MachineID && MachineID > 0)
|| (VIN && VIN !== ""))
refreshData();
else
mapHelper.clearMachine();
}
}
function GetLanguageByCookie() {
var lang = getCookie('<%=Common.LanguageCookieName%>');
if (lang == null) {
return "en-us";
} else {
return lang;
}
}
$(function () {
_fleet.currentLang = GetLanguageByCookie();
$("#content").applyFleetLanguageText();
init();
$("#showDealerLocationsDiv").click(null, function (e) {
if ($("#showDealerLocationsDiv").attr("state") == "0") {
assetObject.showLocations();
$("#showDealerLocationsDiv").attr("state", "1").attr("title", GetTextByKey("P_MV_TURNOFFDEALERLOCATIONS", "Turn Off Dealer Locations"));
}
else {
assetObject.clearLocations();
$("#showDealerLocationsDiv").attr("state", "0").attr("title", GetTextByKey("P_MV_TURNONDEALERLOCATIONS", "Turn On Dealer Locations"));
}
});
$("#basemapgalleryDiv").click(null, function (e) {
$("#basemapGallery").show();
});
$("#splitIcon").click(null, function (e) {
var leftCtrl = $("#leftCtrl");
var splitIcon = $("#splitIcon");
var mapView = $("#mapView");
var imgc = $("#splitIconImg");
if (leftCtrl.hasClass("leftCtrl")) {
leftCtrl.removeClass("leftCtrl");
leftCtrl.width(leftCtrlWidth);
splitIcon.css("left", leftCtrlWidth + 1);
mapView.css("left", leftCtrlWidth + 1);
imgc.attr("src", "img/left.png");
}
else {
leftCtrl.addClass("leftCtrl");
leftCtrl.width(0);
splitIcon.css("left", 1);
mapView.css("left", 1);
imgc.attr("src", "img/right.png");
}
showOtherIcons();
});
vm = new Vue({
el: '#machineInfo',
data: {
machine: {
Location: {}
}
},
methods: {
reload: function (data) {
this.machine = data;
}
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="content" style="margin-top: 2px;">
<input id="selContractor" type="hidden" value="<%=CompanyID %>" />
<div id="layout">
<div id="leftCtrl" class="leftCtrl">
<div style="margin-top: 5px;">
<div style="font-size: 16px; font-weight: bold; padding-left: 10px;">
Asset Information
<span class="hisicon pointer" style='margin-left: 20px;' onclick="locationHistoryClick();" title="Location History" data-title-lgid="P_MA_LOCATIONHISTORY"></span>
</div>
<div id="machineInfo" style="font-size: 12px; padding-left: 30px;">
<b data-lgid="P_MV_NAME_COLON">Name:</b> {{machine.Name}}<br />
<b data-lgid="P_MV_NAMECUSTOM_COLON">Name (Custom):</b> {{machine.Name2}}<br />
<b data-lgid="P_MV_SN_COLON">SN:</b> {{machine.VIN}}<br />
<b data-lgid="P_MV_MAKE_COLON">Make:</b> {{machine.Make}}<br />
<b data-lgid="P_MV_MODEL_COLON">Model:</b> {{machine.Model}}<br />
<b data-lgid="P_MA_ASSETTYPE_COLON">Asset Type:</b> {{machine.AssetType}}<br />
<b data-lgid="P_MV_ENGINEHOURS_COLON">Engine Hours:</b> {{machine.EngineHours}}<br />
<b data-lgid="P_MV_ENGINEHOURSUPDATED_COLON">Engine Hours Updated:</b> {{machine.EngineHoursDateText}}<br />
<b data-lgid="P_MV_LOCATIONUPDATED_COLON">Location Updated:</b> {{machine.Location.LocationTimeText}}<br />
<b data-lgid="P_MV_GROUPS_COLON">Groups: </b>{{machine.GroupNames}}<br />
<br />
<br />
{{machine.AlertTip}}<br />
</div>
</div>
</div>
<div>
<div id="mapView">
</div>
<div id="basemapgalleryDiv">
<div id="basemapImg"></div>
<div id="basemapTitle"></div>
</div>
<div id="basemapGallery"></div>
<div id="splitIcon">
<img id="splitIconImg" src="img/right.png" style="height: 45px; width: 20px;" />
</div>
<div id="splitIconRight" style="display: none">
<img id="splitIconImgRight" src="img/left.png" style="height: 45px; width: 20px;" />
</div>
</div>
<div id="mapMeunDiv" style="position: absolute; top: 90px; left: 20px; z-index: 50;">
<div id="showDealerLocationsDiv" style="display: none; top: 90px;" state="1" title="Turn Off Dealer Locations">
<%=Logo1 %>
</div>
</div>
<div id="mapAlertLayerDiv" style="display: none">
<table>
<tr>
<td data-lgid="P_MV_MAPALERTLAYER">Map Alert Layer</td>
<td>
<select id="selMapAlertLayer" style="width: 200px;"></select></td>
<td>
<img src="img/filters.png" alt="Set Parameter(s)" title="Set Parameter(s)" data-title-lgid="P_MV_SETPARAMETERS" style="padding-left: 5px; display: none;" id="setparameter" onclick="openSetAlertLayerParameters();" /></td>
</tr>
</table>
</div>
<div id="loadingDiv" style="display: none;">
<div class="loadingmach icnmach icn-spinmach"></div>
</div>
<div id="refreshTimeDiv"></div>
</div>
</div>
</form>
</body>
</html>