ZLPMS/PMS.WebUI/Views/Home/Dashboard.cshtml

@{
ViewBag.Title = "Dashboard";
Layout = "~/Views/Shared/_MainLayoutPage.cshtml";
}

<style type="text/css">
 .outer {
  width: 100%;
  height: 180px;
  display: -webkit-flex;
  justify-content: space-between;
  /*决定子元素两端对齐，均匀间隔*/
  align-item: center;
  /*决定子元素垂直居中*/
  /*flex-wrap: wrap; 子元素超出换行，默认是不换行的，当子元素的宽由flex决定时会失效*/
  margin-bottom: 5px;
 }

 .outer .chart-container {
  width: 260px;
  float: left;
  height: 180px;
  margin: 3px;
  cursor: pointer;
 }

 .highcharts-yaxis-grid .highcharts-grid-line {
  display: none;
 }

 p {
  padding: 2px;
 }

 #Newnoty a {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 300px;
  display: inline-block;
 }

 @@media (max-width: 600px) {
  .outer {
   width: 100%;
   height: 400px;
  }

  .outer .chart-container {
   width: 300px;
   float: none;
   margin: 0 auto;

  }
 }
</style>
<script src="~/Content/Scripts/plugins/hcharts/highcharts.js"></script>
<script src="~/Content/Scripts/plugins/hcharts/highcharts-more.js"></script>
<script src="~/Content/Scripts/plugins/hcharts/modules/solid-gauge.js"></script>
<script src="~/ViewModels/dashboard.js?v=1.13"></script>
<div class="outer">
 <div onclick="NotFinishList(3)" id="container0" class="chart-container"></div>
 <div onclick="NotFinishList(2)" id="container1" class="chart-container"></div>
 <div onclick="NotFinishList(1)" id="container2" class="chart-container"></div>
 <div onclick="NotFinishList(4)" id="container3" class="chart-container"></div>
 <div onclick="NotFinishList(5)" id="container4" class="chart-container"></div>
</div>
<div class="outer" style="height:230px;">
 <div class="easyui-panel" title="<i class='fa fa-flag'></i> 与我相关的问题(最近5条)"
  data-options="tools:[{iconCls:'fa fa-folder-open',handler:function(){alert('浏览更多')}}]"
  style="width:33%;height:230px;float:left">
  <table id="dgMyProlem"></table>
 </div>
 <div class="easyui-panel" title="<i class='fa fa-hand-o-right'></i> 常见问题处理"
  data-options="tools:[{iconCls:'fa fa-folder-open',handler:function(){alert('浏览更多')}}]"
  style="width:33%;height:230px;">
  <table id="dgNorProlems"></table>
 </div>
 <div id="Newnoty" class="easyui-panel" title="<i class='fa fa-volume-up'></i> 最新公告"
  data-options="tools:[{iconCls:'fa fa-folder-open',handler:function(){MessageList()}}]"
  style="width:33%;height:230px;padding:10px;">


 </div>
</div>
<div style="width:100%;height:400px; border-top:solid 1px #EEE; border-bottom:solid 1px #eee; margin:3px;">
 <div id="container-column" style="width: 48%; height: 400px; float:left;"></div>
 <!--问题处理延迟环节-->
 <div id="problemStop" style="width: 45%; height: 400px; float:left;"></div>
</div>

<script type="text/javascript">
 var RYXZ = '@ViewBag.RYXZ'
 var model = new viewModel(RYXZ);
 model.init();
 //消息列表
 function MessageList() {
  top.ZLPMS.OpenNewWindow('消息列表', '/Home/MessageList', '795px', '523px', null);
 }
 //未完成列表
 function NotFinishList(Type) {
  top.ZLPMS.OpenNewWindow(Type == 3 ? '待完成的需求' : Type === 2 ? '未回复的咨询' : Type == 1 ? '未解决的BUG' : Type == 4 ? '未完成的任务' :
   '指派给我的问题', '/Home/NotFinishProblem?Type=' + Type, '795px', '523px', null);
 }
 //详细消息查看
 function MessageDeatil(id) {
  top.ZLPMS.OpenNewWindow('消息详细', '/Home/MessageDeatil/' + id, '905px', '553px', null);
 }
</script>