dashbord.vue 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584
  1. <template>
  2. <div class="dashbord-context">
  3. <div class='dashboard_box'>
  4. <h3 style="padding-left: 5px;" class="dashboard_box_h3"> <strong>总览</strong>
  5. <span style="font-size: 12px;">总览网页提供设备和远程服务器的总体状态信息。</span>
  6. </h3>
  7. </div>
  8. <div class="dashboard_box_sub">
  9. <div class="sub_left">
  10. <Row>
  11. <Col span="24">
  12. <div class="dashboard_chat">
  13. <div class='dashboard_item_title' style='padding-left: 20px;'>
  14. <span>使能机箱管理</span>
  15. <i-switch class='switch' v-model="serMode" @on-change="change" />
  16. </div>
  17. <div class='model-contect'>
  18. <ul>
  19. <template v-for='item in serverList'>
  20. <li :class="item.cardIndex == activeIndex ? 'active' : 'off'">
  21. <img class="svg checked-card" id="svg1" src="../assets/checked-card.png">
  22. <span class="tab_span">BMC1</span>
  23. <template v-if='item.status == 0'>
  24. <span class="active_span off_span">Status</span>
  25. </template>
  26. <template v-else-if='item.status == 1'>
  27. <span class="active_span">Status</span>
  28. </template>
  29. <template v-else>
  30. <span class="active_span error_span">Status</span>
  31. </template>
  32. <span :class="['power_span', item.power == 0 ? 'power_off_span' : '']">Power</span>
  33. </li>
  34. </template>
  35. </ul>
  36. </div>
  37. </div>
  38. </Col>
  39. <Col span="24">
  40. <div class="dashboard_item">
  41. <div class="dashboard_item_title">
  42. 设备信息
  43. </div>
  44. <div class='info_detail'>
  45. <Row class='margin_btm'>
  46. <Col span="8">固件版本:</Col>
  47. <Col span="14">3.20.3.3</Col>
  48. </Row>
  49. <Row class='margin_btm'>
  50. <Col span="8">固件编译时间:</Col>
  51. <Col span="14">Jul 19 2019 13:49:00 CST</Col>
  52. </Row>
  53. </div>
  54. </div>
  55. </Col>
  56. <Col span="24">
  57. <div class="dashboard_item">
  58. <div class="dashboard_item_title">
  59. 息网络信
  60. </div>
  61. <div class='info_detail'>
  62. <Row class='margin_btm'>
  63. <Col span="8">MAC地址:</Col>
  64. <Col span="14">02:04:06:08:0A:8E</Col>
  65. </Row>
  66. <Row class='margin_btm'>
  67. <Col span="8">V4网络模式:</Col>
  68. <Col span="14">Static</Col>
  69. </Row>
  70. <Row class='margin_btm'>
  71. <Col span="8">IPv4地址:</Col>
  72. <Col span="14">192.168.0.203</Col>
  73. </Row>
  74. <Row class='margin_btm'>
  75. <Col span="8">V6网络模式:</Col>
  76. <Col span="14">Disable</Col>
  77. </Row>
  78. </div>
  79. </div>
  80. </Col>
  81. </Row>
  82. </div>
  83. <div class="sub_center">
  84. <Row>
  85. <Col span="24">
  86. <div class="dashboard_SensorBox" style='margin-top:0px;'>
  87. <div class="dashboard_item_title">
  88. 传感器状态
  89. </div>
  90. <div class='info_detail2'>
  91. <Row class='margin_btm' type="flex" justify="center">
  92. <Col span="4"><strong>状态</strong></Col>
  93. <Col span="8"><strong>Sensor</strong></Col>
  94. <Col span="8"><strong>Reading</strong></Col>
  95. <Col span="4"><strong></strong></Col>
  96. </Row>
  97. <Row class='line-class on' type="flex" justify="center">
  98. <Col span="4">
  99. <img src="../assets/status_critical.png" title="Critical" style="width: 12px" border="0">
  100. </Col>
  101. <Col span="8">VCC12</Col>
  102. <Col span="8">22.36 Volts</Col>
  103. <Col span="4"><a href="sensor_readings.html?id=0"><img src="../assets/view.png" border="0" style="width: 12px" class="my_view"></a></Col>
  104. </Row>
  105. <Row class='line-class off' type="flex" justify="center">
  106. <Col span="4">
  107. <img src="../assets/status_critical.png" title="Critical" style="width: 12px" border="0">
  108. </Col>
  109. <Col span="8">VCC12</Col>
  110. <Col span="8">22.36 Volts</Col>
  111. <Col span="4"><a href="sensor_readings.html?id=0"><img src="../assets/view.png" border="0" style="width: 12px" class="my_view"></a></Col>
  112. </Row>
  113. <!-- <Row class='margin_btm'><Col span="8">固件编译时间:</Col><Col span="14">Jul 19 2019 13:49:00 CST</Col></Row> -->
  114. </div>
  115. </div>
  116. </Col>
  117. <Col span="24">
  118. <div class="dashboard_SensorBox">
  119. <div class="dashboard_item_title">
  120. KVM
  121. </div>
  122. <!-- <div class='info_detail'>
  123. <Row class='margin_btm'><Col span="8">固件版本:</Col><Col span="14">3.20.3.3</Col></Row>
  124. <Row class='margin_btm'><Col span="8">固件编译时间:</Col><Col span="14">Jul 19 2019 13:49:00 CST</Col></Row>
  125. </div> -->
  126. </div>
  127. </Col>
  128. </Row>
  129. </div>
  130. <div class="sub_right">
  131. <Row>
  132. <Col span="24">
  133. <div class="dashboard_SensorBox" style='margin-top:0px;padding:0;'>
  134. <div class="dashboard_item_title" style='padding: 25px 20px;'>
  135. 日志
  136. </div>
  137. <div class='info_detail' style="width: 100%; padding:0;">
  138. <div id="myChart" style="width: 250px; min-height:400px;"></div>
  139. </div>
  140. </div>
  141. </Col>
  142. <Col span="24">
  143. <div class="dashboard_SensorBox">
  144. <div class="dashboard_item_title">
  145. CPU 信息
  146. </div>
  147. <div class='info_detail'>
  148. <Row class='margin_btm'>
  149. <Col span="8">系统:</Col>
  150. <Col span="16">Neokylin</Col>
  151. </Row>
  152. <Row class='margin_btm'>
  153. <Col span="8">版本:</Col>
  154. <Col span="16">dev 4.0</Col>
  155. </Row>
  156. <Row class='margin_btm'>
  157. <Col span="8">系统:</Col>
  158. <Col span="16">20%</Col>
  159. </Row>
  160. <Row class='margin_btm'>
  161. <Col span="8">版本:</Col>
  162. <Col span="16">49%</Col>
  163. </Row>
  164. </div>
  165. </div>
  166. </Col>
  167. </Row>
  168. </div>
  169. </div>
  170. </div>
  171. </template>
  172. <script>
  173. import echarts from 'echarts'
  174. export default {
  175. name: 'dashbord1',
  176. data() {
  177. return {
  178. serverList: [{
  179. cardIndex: 1,
  180. senserName: 'aa',
  181. status: 1,
  182. power: 1,
  183. isError: false,
  184. isOnline: 1,
  185. isMainCard: false,
  186. },
  187. {
  188. cardIndex: 2,
  189. senserName: 'aa',
  190. status: 0,
  191. power: 0,
  192. isError: false,
  193. isOnline: 1,
  194. isMainCard: false,
  195. },
  196. {
  197. cardIndex: 2,
  198. senserName: 'aa',
  199. status: 3,
  200. power: 0,
  201. isError: false,
  202. isOnline: 1,
  203. isMainCard: false,
  204. },
  205. ],
  206. activeIndex: 1,
  207. serMode: false,
  208. }
  209. },
  210. created() {
  211. console.log("3333333333333")
  212. },
  213. mounted(){
  214. this.getPie()
  215. },
  216. methods: {
  217. change() {
  218. },
  219. getPie() {
  220. // 基于准备好的dom,初始化echarts实例
  221. let myChart = echarts.init(document.getElementById('myChart'));
  222. // 绘制图表,this.echarts1_option是数据
  223. myChart.setOption({
  224. series: [{
  225. name: '访问来源',
  226. type: 'pie',
  227. radius: '55%',
  228. // 圆环位置
  229. center: ['50%', '20%'],
  230. hoverAnimation: true, // 是否开启 hover 在扇区上的放大动画效果
  231. itemStyle : {
  232. normal : {
  233. //隐藏标示文字
  234. label : {
  235. show : false
  236. },
  237. //隐藏标示线
  238. labelLine : {
  239. show : false
  240. }
  241. }
  242. },
  243. data: [
  244. {
  245. name: "a",
  246. value: Math.round(Math.random() * 100000)
  247. }, {
  248. name: "b",
  249. value: Math.round(Math.random() * 100000)
  250. }, {
  251. name: "c",
  252. value: Math.round(Math.random() * 100000)
  253. },{
  254. name: "d",
  255. value: Math.round(Math.random() * 100000)
  256. }, {
  257. name: "e",
  258. value: Math.round(Math.random() * 100000)
  259. }, {
  260. name: "f",
  261. value: Math.round(Math.random() * 100000)
  262. },{
  263. name: "g",
  264. value: Math.round(Math.random() * 100000)
  265. }, {
  266. name: "h",
  267. value: Math.round(Math.random() * 100000)
  268. }, {
  269. name: "i",
  270. value: Math.round(Math.random() * 100000)
  271. }]
  272. }],
  273. tooltip: {
  274. formatter: '{b} : {c}', // 默认值null,内容格式器
  275. },
  276. legend: {
  277. orient: 'vertical',
  278. top: 200,
  279. left: 20,
  280. // top: 20,
  281. data: ['a', 'b', 'c','d', 'e', 'f','g', 'h', 'i']
  282. },
  283. });
  284. },
  285. }
  286. }
  287. </script>
  288. <style lang='scss' scoped>
  289. .dashbord-context {
  290. color: #fff;
  291. /*overflow-x: scroll;*/
  292. padding-bottom: 30px;
  293. .dashboard_box_h3 {
  294. border-bottom: none;
  295. font-size: 24px;
  296. span {
  297. color: #FFFFFF;
  298. font-weight: 400;
  299. font-size: 12px;
  300. margin-left: 8px;
  301. }
  302. }
  303. .dashboard_box_sub {
  304. width: 100%;
  305. display: flex;
  306. justify-content: space-between;
  307. .sub_left {
  308. width: 350px;
  309. }
  310. .sub_center {
  311. width: 580px;
  312. margin: 0 10px;
  313. }
  314. .sub_right {
  315. width: 250px;
  316. /*margin-right: 4px;*/
  317. }
  318. }
  319. .line-class {
  320. height: 44px;
  321. text-align: center;
  322. line-height: 44px;
  323. &.on {
  324. background-color: rgba(24, 116, 255, 0.06);
  325. }
  326. &.off {}
  327. }
  328. .table_line {}
  329. .dashboard_box {
  330. width: 1180px;
  331. margin: auto;
  332. margin-top: 10px;
  333. /* background: #040C19; */
  334. padding: 20px 0;
  335. }
  336. .dashboard_item_title {
  337. display: flex;
  338. justify-content: space-between;
  339. position: relative;
  340. color: #1674FA;
  341. font-weight: 600;
  342. font-size: 14px;
  343. text-align: left;
  344. margin-bottom: 20px;
  345. /*padding-left: 20px;*/
  346. padding-top: 25px;
  347. padding-right: 20px;
  348. span {}
  349. .switch {
  350. /*padding-left: 20px;*/
  351. width: 38px;
  352. }
  353. .ivu-switch-checked:after {
  354. left: 18px;
  355. }
  356. &.palft {
  357. padding-left: 20px;
  358. }
  359. }
  360. .dashboard_chat {
  361. width: 350px;
  362. min-height: 280px;
  363. background: url(/res/BG.png) no-repeat;
  364. background-size: 100% 100%;
  365. border-radius: 3px;
  366. background: -webkit-linear-gradient(bottom, #FFFFFF, #D1E3FF);
  367. background: -o-linear-gradient(top, #FFFFFF, #D1E3FF);
  368. background: -moz-linear-gradient(top, #FFFFFF, #D1E3FF);
  369. background: linear-gradient(to top, #FFFFFF, #D1E3FF);
  370. }
  371. .model-contect {
  372. margin-top: 0 !important;
  373. padding-top: 8px;
  374. /*padding: 8px 20px 0 20px;*/
  375. .active {
  376. background: url(../assets/stor/cart_active.png) no-repeat center;
  377. background-size: 100%;
  378. background-color: #fff;
  379. }
  380. ul {
  381. li {
  382. margin: auto;
  383. display: flex;
  384. position: relative;
  385. display: block;
  386. height: 42px;
  387. width: 320px;
  388. margin: auto;
  389. background: url(../assets/stor/cart.png) no-repeat center;
  390. background-size: 100%;
  391. background-color: #fff;
  392. color: #999999;
  393. img.checked-card {
  394. position: absolute;
  395. bottom: 20px;
  396. left: 9px;
  397. width: 14px;
  398. }
  399. .tab_span {
  400. position: absolute;
  401. right: 50px;
  402. top: 0;
  403. display: block;
  404. width: 120px;
  405. height: 42px;
  406. line-height: 42px;
  407. text-align: center;
  408. color: #999999;
  409. overflow: hidden;
  410. text-overflow: ellipsis;
  411. white-space: nowrap;
  412. font-weight: bold;
  413. }
  414. .active_span {
  415. position: absolute;
  416. left: 60px;
  417. top: 0;
  418. display: block;
  419. height: 42px;
  420. width: 40px;
  421. text-align: center;
  422. padding-top: 22px;
  423. color: #29C093;
  424. font-size: 12px;
  425. &.off_span {
  426. color: #999999;
  427. }
  428. &.error_span:before {
  429. background: #FF0000;
  430. }
  431. }
  432. .active_span:before {
  433. content: '';
  434. position: absolute;
  435. left: 50%;
  436. top: 10px;
  437. transform: translate(-50%, 0);
  438. height: 10px;
  439. width: 10px;
  440. background: #29C093;
  441. border-radius: 50%;
  442. }
  443. .off_span:before {
  444. background: #999999;
  445. }
  446. /*.active_span:before {
  447. background: #999999;
  448. }*/
  449. .power_span {
  450. position: absolute;
  451. left: 105px;
  452. top: 0;
  453. display: block;
  454. height: 42px;
  455. width: 40px;
  456. text-align: center;
  457. padding-top: 22px;
  458. color: #29C093;
  459. font-size: 12px;
  460. &.power_off_span {
  461. color: #999999;
  462. }
  463. }
  464. .power_span:before {
  465. content: '';
  466. position: absolute;
  467. left: 50%;
  468. top: 10px;
  469. transform: translate(-50%, 0);
  470. height: 10px;
  471. width: 10px;
  472. background: #29C093;
  473. border-radius: 50%;
  474. }
  475. .power_off_span:before {
  476. background: #999999;
  477. }
  478. .error .active_span:before {
  479. background: #FF0000;
  480. }
  481. /*.off .active_span:before {
  482. background: #999999;
  483. }*/
  484. }
  485. }
  486. .svg {
  487. display: none;
  488. }
  489. }
  490. .dashboard_item {
  491. background: -webkit-linear-gradient(bottom, #FFFFFF, #D1E3FF);
  492. background: -o-linear-gradient(top, #FFFFFF, #D1E3FF);
  493. background: -moz-linear-gradient(top, #FFFFFF, #D1E3FF);
  494. background: linear-gradient(to top, #FFFFFF, #D1E3FF);
  495. padding: 20px;
  496. margin-top: 20px;
  497. border-radius: 3px;
  498. width: 350px;
  499. }
  500. .info_detail2 {
  501. color: #022B7D;
  502. font-size: 12px;
  503. }
  504. .info_detail {
  505. color: #022B7D;
  506. font-size: 12px;
  507. text-align: left;
  508. .ivu-col {
  509. text-align: left;
  510. }
  511. }
  512. .margin_btm {
  513. margin-bottom: 20px;
  514. text-align: center;
  515. }
  516. .dashboard_SensorBox {
  517. background: -webkit-linear-gradient(bottom, #FFFFFF, #D1E3FF);
  518. background: -o-linear-gradient(top, #FFFFFF, #D1E3FF);
  519. background: -moz-linear-gradient(top, #FFFFFF, #D1E3FF);
  520. background: linear-gradient(to top, #FFFFFF, #D1E3FF);
  521. padding: 25px 20px;
  522. width: 100%;
  523. border-radius: 3px;
  524. margin-top: 20px;
  525. /*margin-top:0;*/
  526. .dashboard_item_title {
  527. padding-top: 0;
  528. }
  529. }
  530. }
  531. </style>