welcome.html 7.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281
  1. <!DOCTYPE html>
  2. <html lang="zh-cmn-Hans">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>生保系统故障分析及辅助维修决策软件</title>
  6. <meta name="renderer" content="webkit">
  7. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  8. <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8">
  9. <link rel="stylesheet" href="./css/font.css">
  10. <link rel="stylesheet" href="./css/xadmin.css">
  11. <script src="./lib/jquery.min.js"></script>
  12. <script src="./lib/layui/layui.js" charset="utf-8"></script>
  13. <script src="../other/js/functions.js"></script>
  14. <script src="../other/public/echarts.js" type="text/javascript" charset="utf-8"></script>
  15. <style>
  16. .charts-box {
  17. width: 47%;
  18. height: 100%;
  19. background-color: #f8f8f8;
  20. display: inline-block;
  21. }
  22. .charts-select {
  23. text-align: right;
  24. z-index: 99999;
  25. display: flex;
  26. align-items: center;
  27. }
  28. .self-sl {
  29. margin-right: 10px;
  30. height: 32px;
  31. }
  32. .layui-input {
  33. height: 32px;
  34. }
  35. .btn {
  36. display: inline-block;
  37. padding: 6px 12px;
  38. margin-bottom: 0;
  39. font-size: 14px;
  40. font-weight: 400;
  41. line-height: 1.42857143;
  42. text-align: center;
  43. white-space: nowrap;
  44. vertical-align: middle;
  45. -ms-touch-action: manipulation;
  46. touch-action: manipulation;
  47. cursor: pointer;
  48. -webkit-user-select: none;
  49. -moz-user-select: none;
  50. -ms-user-select: none;
  51. user-select: none;
  52. background-image: none;
  53. border: 1px solid transparent;
  54. border-radius: 4px;
  55. }
  56. .btn-info {
  57. color: #fff;
  58. background-color: #5bc0de;
  59. border-color: #46b8da;
  60. }
  61. #max {
  62. height: 480px;
  63. width: 50%;
  64. display: inline-block;
  65. background-color: #F8F8F8;
  66. position: absolute;
  67. right: 10px;
  68. }
  69. </style>
  70. </head>
  71. <body>
  72. <div class="x-body layui-anim layui-anim-up">
  73. <blockquote class="layui-elem-quote">欢迎管理员:
  74. <span id="username" class="x-red">admin</span>
  75. <span id="clock">当前时间:2018-04-25 20:50:53</span>
  76. <a class="layui-btn layui-btn-sm" style="margin-top:-2px; float:right;"
  77. href="javascript:location.replace(location.href);" title="刷新">
  78. <i class="layui-icon" style="line-height:30px">ဂ</i>刷新
  79. </a>
  80. </blockquote>
  81. <div class="layui-row layui-col-space10">
  82. <div class="layui-col-md6">
  83. <fieldset class="layui-elem-field ">
  84. <legend>故障信息</legend>
  85. <div class="layui-field-box">
  86. <div class="layui-card">
  87. <div class="layui-card-body">
  88. <div class="layui-carousel x-admin-carousel x-admin-backlog" lay-anim=""
  89. lay-indicator="inside" lay-arrow="none" style="width: 100%; height: 180px;">
  90. <div carousel-item="">
  91. <ul class="layui-row layui-col-space10 layui-this">
  92. <li class="layui-col-xs12">
  93. <a data-index="2" data-title="角色管理" data-url="role.html"
  94. href="javascript:" class="x-admin-backlog-body">
  95. <h3>总故障数</h3>
  96. <p>
  97. <cite id="roleCount">12</cite>
  98. </p>
  99. </a>
  100. </li>
  101. <li class="layui-col-xs12">
  102. <a data-index="1" data-title="用户管理" data-url="user.html"
  103. href="javascript:" class="x-admin-backlog-body">
  104. <h3>总装备数</h3>
  105. <p>
  106. <cite id="userCount">66</cite>
  107. </p>
  108. </a>
  109. </li>
  110. </ul>
  111. </div>
  112. </div>
  113. </div>
  114. </div>
  115. </div>
  116. </fieldset>
  117. </div>
  118. <div class="layui-col-md6">
  119. <fieldset class="layui-elem-field">
  120. <legend>系统概括</legend>
  121. <div class="layui-field-box">
  122. <div class="layui-card">
  123. <div class="layui-card-body">
  124. <div class="layui-carousel x-admin-carousel x-admin-backlog" lay-anim=""
  125. lay-indicator="inside" lay-arrow="none" style="width: 100%; height: 270px;">
  126. <div carousel-item="">
  127. <ul class="layui-row layui-col-space10 layui-this">
  128. <li class="layui-col-xs12">
  129. <a data-index="9" class="x-admin-backlog-body">
  130. <h3>故障记录数</h3>
  131. <p>
  132. <cite id="resourceCount">12</cite>
  133. </p>
  134. </a>
  135. </li>
  136. <li class="layui-col-xs12">
  137. <a data-index="10" class="x-admin-backlog-body">
  138. <h3>文章记录数</h3>
  139. <p>
  140. <cite id="deptCount">66</cite>
  141. </p>
  142. </a>
  143. </li>
  144. <li class="layui-col-xs12">
  145. <a data-index="11" class="x-admin-backlog-body">
  146. <h3>用户数量</h3>
  147. <p>
  148. <cite id="authorCount">99</cite>
  149. </p>
  150. </a>
  151. </li>
  152. </ul>
  153. </div>
  154. </div>
  155. </div>
  156. </div>
  157. </div>
  158. </fieldset>
  159. </div>
  160. </div>
  161. <fieldset class="layui-elem-field ">
  162. <legend>统计</legend>
  163. <div class="layui-field-box">
  164. <div class="layui-card">
  165. <div class="layui-card-body">
  166. <div class="charts-box">
  167. <div class="charts-select">
  168. <div class="self-sl">
  169. <select id="dvc-select" onchange="selectDvc()" name="">
  170. <option value="">选择机型</option>
  171. </select>
  172. </div>
  173. <div class="self-sl">
  174. <select onchange="selectTime()" id="time" name="">
  175. <option value="year">年</option>
  176. <option value="quarter">季度</option>
  177. <option value="month">月</option>
  178. </select>
  179. </div>
  180. <div class="layui-inline" style="margin-right: 15px;display: flex;">
  181. <div class="layui-inline" style="margin-right: 15px;">
  182. <input type="text" placeholder="起始时间" id="startTime"
  183. class="layui-input test-item">
  184. </div>
  185. <div class="layui-inline">
  186. <input type="text" placeholder="终止时间" id="endTime"
  187. class="layui-input test-item">
  188. </div>
  189. </div>
  190. <div><button class="btn btn-info addUser" id="sure">确定</button></div>
  191. </div>
  192. <div id="main" style="width: 450px;height: 450px;"></div>
  193. </div>
  194. <div id="max"></div>
  195. </div>
  196. </div>
  197. </div>
  198. </fieldset>
  199. </div>
  200. </body>
  201. <script type="text/javascript">
  202. var myChart = echarts.init(document.getElementById('main'));
  203. var myCharte = echarts.init(document.getElementById('max'))
  204. option = {
  205. title: {
  206. text: '折线图堆叠'
  207. },
  208. tooltip: {
  209. trigger: 'axis'
  210. },
  211. legend: {
  212. data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
  213. },
  214. grid: {
  215. left: '3%',
  216. right: '4%',
  217. bottom: '3%',
  218. containLabel: true
  219. },
  220. toolbox: {
  221. feature: {
  222. saveAsImage: {}
  223. }
  224. },
  225. xAxis: {
  226. type: 'category',
  227. boundaryGap: false,
  228. data: []
  229. },
  230. yAxis: {
  231. type: 'value'
  232. },
  233. series: []
  234. };
  235. option1 = {
  236. title: {
  237. text: '折线图堆叠'
  238. },
  239. tooltip: {
  240. trigger: 'axis'
  241. },
  242. legend: {
  243. data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
  244. },
  245. grid: {
  246. left: '3%',
  247. right: '4%',
  248. bottom: '3%',
  249. containLabel: true
  250. },
  251. toolbox: {
  252. feature: {
  253. saveAsImage: {}
  254. }
  255. },
  256. xAxis: {
  257. type: 'category',
  258. boundaryGap: false,
  259. data: []
  260. },
  261. yAxis: {
  262. type: 'value'
  263. },
  264. series: []
  265. };
  266. myChart.setOption(option);
  267. myCharte.setOption(option1);
  268. </script>
  269. </html>