MES / IOT · Files

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
    ViewData["title"] = "项目工程表";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@section header
{

	<link href="~/css/iot/iconfont.css" rel="stylesheet" />

    <style type="text/css">

		/* head*/

		.head {
			padding-left: 7px;
		}

		.head-project {display: flex;width: 100%;height: 7vh;}

		.head-project-logo {display: flex;justify-content: flex-start;width: 70%; align-items: center;}

		.head-project-title {height: 10vh;text-align: center;line-height: 10vh;font-size:30px;padding-left: 6vh;}

		.head-project-route {display: flex;width: 30%;justify-content: flex-end;align-items: center;}

		.divcontent {
			display: flex;
			height: 100%;
		}

		.contcss {
			display: flex;
			width: 20%;
			margin-right: 1vw;
			box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
		}

		.top-refresh-data {

			height: 23px;
			line-height: 23px;

			background-color: #ffffff;

			margin-right: 2vw;

			font-size: 20px;

		}

		.divcontent-left {
			flex: 2;
			display: flex;
			flex-direction: column;
			justify-content: center;
			padding-left: 1vw;
		}

		.divcontent-right {
			flex: 1;
		}

		.imgdiv {
			text-align: center;
			line-height: 10vh;
		}

		.textStyle {
			font-weight: 600;
			font-size: 1.2vw;
			color: black;
		}

		.layui-colla-content {
			padding: 10px 15px;
		}

		.iconfont {
			font-size: 42px;
		}

		.headStyle{
			position: fixed;
			background-color: #fff;
			z-index: 99;
			width: 99%
		}

		.layui-colla-item{margin-bottom:5px;}

		.textStylered {
			font-weight: 600;
			font-size: 1.2vw;
			color: red;
		}

    </style>			

}

<div class="vueApp">

	<div class="head headStyle" >

		<div class="head-breadcrumb">

			<span class="layui-breadcrumb" lay-separator="> " lay-filter="projectMap">

				<a href="/configure/BaseProject/ProjectOverview">项目概述</a>
			</span>
		</div>

		<div class="head-project">
			<div class="head-project-logo">
				<div><img style="width:190px;height:21px;" src="/images/logo.png" alt="" /></div>
				<div class="head-project-title">{{head.projectName}}</div>
			</div>
			<div class="head-project-route">

				<div class="footer-list div-flex top-refresh-data">

					数据刷新倒计时:<span style="color:cornflowerblue;display:block" id="refreshDataTime">{{refreshDataTime}}</span>

				</div>

				<a data-scr="/equipment/BaseEquipment/IndexProjectAndEq" href="" class="sys-a-det">切换到设备列表</a>

			</div>
		</div>
	</div>

	<div class="layui-collapse" style="padding-left:7px;padding-top: 3vw;">

		<!--设备概述-->

		<div class="layui-colla-item">

			<div class="layui-colla-title">设备概述</div>

			<div class="layui-colla-content layui-show">
				<div class="divcontent vueApp" style="height: 10vh">

					<div class="contcss">
						<div class="divcontent-left">
							<div>设备总数</div>

							<div class="textStyle">{{body.eqCount}}</div>

						</div>
						<div class="divcontent-right">
							<div class="imgdiv">
								<span class="iconfont icon-shebei" style="color: rgb(146, 133, 235);"></span>
							</div>
						</div>
					</div>
					<div class="contcss">
						<div class="divcontent-left">

							<div>运行数</div>

							<div class="textStyle">{{body.eqRunCount}}</div>

						</div>
						<div class="divcontent-right">
							<div class="imgdiv">

								<span class="iconfont icon-zaixianshu" style="color: #16baaa;"></span>

							</div>
						</div>
					</div>
					<div class="contcss">
						<div class="divcontent-left">

							<div>待机数</div>

							<div class="textStyle">{{body.eqStandBy}}</div>

						</div>
						<div class="divcontent-right">
							<div class="imgdiv">

								<span class="iconfont icon-daiji" style="color: rgb(146, 133, 235);"></span>

							</div>
						</div>
					</div>

					<div class="contcss">

						<div class="divcontent-left">

							<div>故障数</div>
							<div class="textStyle">{{body.eqError}}</div>
						</div>
						<div class="divcontent-right">
							<div class="imgdiv">

								<span class="iconfont icon-shebeiguzhang2" style="color: #ffb800;"></span>

							</div>
						</div>
					</div>
					<div class="contcss">
						<div class="divcontent-left">

							<div>离线数(5m)</div>

							<div class="textStyle" style="color:red;">{{body.eqOffline}}</div>

						</div>
						<div class="divcontent-right">
							<div class="imgdiv">

								<span class="iconfont icon-lixianshu"></span>

							</div>
						</div>

					</div>

				</div>

			</div>
		</div>

		<!--当天设备运行-->

		<div class="layui-colla-item">

			<div class="layui-colla-title">当天设备运行 (运行+待机)/设备总数</div>

			<div class="layui-colla-content layui-show" style="height: 10vh">
				<div class="divcontent">
					<div class="contcss">
						<div class="divcontent-left">
							<div>在线率</div>

							<div class="textStyle">{{body.eqOnlineRate}}</div>

						</div>
						<div class="divcontent-right">
							<div class="imgdiv">
								<span class="iconfont icon-shebeizaixianshuai" style="color: rgb(146, 133, 235);"></span>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!--设备在线状况--> 

		<div class="layui-colla-item">

			<div class="layui-colla-title">设备在线状况</div>
			<div class="layui-colla-content">
				<div style="width:480px;margin-bottom: 33px;">
					<table id="mainList" lay-filter="mainList" lay-size="sm"></table>
				</div>
			</div>
		</div>
		<!--设备开机时间-->
		<div class="layui-colla-item">

			<div class="layui-colla-title">设备开机时间(近7天/单位:H)</div>

			<div class="layui-colla-content">
				<div class="divcontent">

					<div id="eqPowerOnTime" style="width: 90vw;height: 300px;"></div>

				</div>
			</div>
		</div>

		<!--设备故障次数-->

		<div class="layui-colla-item">

			<div class="layui-colla-title">设备故障次数(近7天)【点击柱子查看故障详情】</div>

			<div class="layui-colla-content">
				<div class="divcontent">
					<div id="eqAlarmsNumber" style="width: 90vw;height: 300px;"></div>
				</div>
			</div>
		</div>

		<!--设备故障超40分钟-->

		<div class="layui-colla-item">

			<div class="layui-colla-title" style="color:#ff5722 ;">设备故障超40分钟(近7天)</div>

			<div class="layui-colla-content">
				<div class="divcontent">

					<div >

						<table id="mainAlarms" lay-filter="mainAlarms" lay-size="sm"></table>
					</div>
				</div>
			</div>
		</div>

		<!--扩展指标-->

		<div class="layui-colla-item">

			<div class="layui-colla-title">扩展指标(近7天)【点击图标查看详情】妥善率目标99%</div>

			<div class="layui-colla-content layui-show" style="height: 10vh">

				<div class="divcontent">

					<!--妥善率-->

					<div class="contcss" id="clickToClickSuccessRate">

						<div class="divcontent-left">

							<div>妥善率(单位:分钟)</div>

							<div class="textStyle" :class="{'textStylered': parseFloat(eqSumObj.proper) < 99}">{{ eqSumObj.proper }}</div>

						</div>
						<div class="divcontent-right">
							<div class="imgdiv">

								<span class="iconfont icon-shebeiOEE" style="color: rgb(146, 133, 235);cursor: pointer;"></span>

							</div>
						</div>
					</div>

					<!--MTTR-->

					<div class="contcss" id="clickToClickMTTR">

						<div class="divcontent-left">

							<div>MTTR(单位:H)</div>

							<div class="textStyle">{{eqSumObj.mttr}}</div>

						</div>
						<div class="divcontent-right">
							<div class="imgdiv">

								<span class="iconfont icon-shebeiMTTR" style="color: rgb(146, 133, 235);cursor: pointer;"></span>

							</div>
						</div>
					</div>

					<!--MTBF-->

					<div class="contcss" id="clickToClickMTBF">

						<div class="divcontent-left">

							<div>MTBF(单位:H)</div>

							<div class="textStyle">{{eqSumObj.mtbf}}</div>

						</div>
						<div class="divcontent-right">
							<div class="imgdiv">

								<span class="iconfont icon-MTBF" style="color: rgb(146, 133, 235);cursor: pointer !important;"></span>

							</div>
						</div>
					</div>

					<!--OEE-->
					<div class="contcss" id="clickToClickOEE">
						<div class="divcontent-left">

							<div>OEE(单位:分钟)</div>

							<div class="textStyle">{{eqSumObj.oee}}</div>
						</div>
						<div class="divcontent-right">
							<div class="imgdiv">

								<span class="iconfont icon--OEE" style="color: rgb(146, 133, 235);cursor: pointer!important;"></span>

							</div>
						</div>
					</div>

				</div>
			</div>

		</div> 

	</div>

	<!--公式提示-->

	<div style="margin: 20px;color:blue;" >

		<span><span style="font-weight: bold;">妥善率：</span>（1-故障时间/总时间）*100%</span>

		<span style="margin-left: 30px;"><span style="font-weight: bold;">MTTR：</span>故障時間H/故障次數</span>

		<span style="margin-left: 30px;"><span style="font-weight: bold;">MTBF：</span> (运行H+空闲时间H)÷故障次数</span>

		<span style="margin-left: 30px;"><span style="font-weight: bold;">OEE：</span>(运行时间/(运行时间+空闲时间+故障时间))*100%</span>

	</div>

	<!--妥善率-->

	<div id="tuoshanlv" style="display:none">

		<div id="eqTuoShanRate" style="width: 65vw;height: 300px;"></div>
		<table id="tableProper" lay-filter="tableProper" lay-size="sm"></table>

	</div>

	<div id="eleMTTR" style="display:none">
		<table id="tableMTTR" lay-filter="tableMTTR" lay-size="sm"></table>
	</div>

	<div id="eleMTBF" style="display:none">
		<table id="tableMTBF" lay-filter="tableMTBF" lay-size="sm"></table>
	</div>

	<div id="eleOee" style="display:none">
		<table id="tableOee" lay-filter="tableOee" lay-size="sm"></table>
	</div>

	<div id="eleAlarm" style="display:none">
		<table id="tableAlarm" lay-filter="tableAlarm" lay-size="sm"></table>
	</div>

</div>

@section Scripts

    {

       <script src="~/js/echarts/echarts.common.min.js"></script>

	   <script type="text/javascript" src="~/echartsconfig/projectoverviewconfig.js"></script>

       <script type="text/javascript" src="/productjs/configure/ProjectOverview.js" asp-append-version="true"></script>

 }