console-main.html 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Sa-Admin 控制台</title>
  5. <meta charset="utf-8">
  6. <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  7. <!-- 所有的 css & js 资源 -->
  8. <link rel="stylesheet" href="../../static/kj/element-ui/theme-chalk/index.css">
  9. <link rel="stylesheet" href="../../static/sa.css">
  10. <style type="text/css">
  11. .vue-box{margin: 0; padding: 0; height: 100%;}
  12. .el-card{border-radius: 0px; border: 1px #ddd solid ; margin-bottom: 14px;}
  13. .s-row{/* background-color: antiquewhite; */ padding: 0 14px; padding-bottom: 0px;}
  14. .s-row-1{padding-top: 14px;}
  15. .s-row-2{/* margin-top: -10px; */}
  16. .s-row-2 .el-card .el-card__body{height: 250px;}
  17. .s-row-3 .el-card{/* height: 100%; */}
  18. .echarts-div{height: 100%;}
  19. .s-row-3 .el-alert{margin-bottom: 14px;}
  20. </style>
  21. </head>
  22. <body>
  23. <div class="vue-box" style="display: none;" :style="'display: block;'">
  24. <!-- ------------ 第一栏 - 统计数据 ------------- -->
  25. <div class="s-row s-row-1">
  26. <com-sta-data></com-sta-data>
  27. </div>
  28. <!-- ------------ 第二栏 - 图表 ------------- -->
  29. <div class="s-row s-row-2">
  30. <el-row :gutter="14">
  31. <el-col :lg="8" :xs="24">
  32. <el-card shadow="never" header="柱状图">
  33. <com-chart-1></com-chart-1>
  34. </el-card>
  35. </el-col>
  36. <el-col :lg="8" :xs="24">
  37. <el-card shadow="never" header="饼图">
  38. <com-chart-2></com-chart-2>
  39. </el-card>
  40. </el-col>
  41. <el-col :lg="8" :xs="24">
  42. <el-card shadow="never" header="折线图">
  43. <com-chart-3></com-chart-3>
  44. </el-card>
  45. </el-col>
  46. </el-row>
  47. </div>
  48. </div>
  49. <script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
  50. <script src="https://unpkg.com/element-ui@2.13.0/lib/index.js"></script>
  51. <script src="https://unpkg.com/http-vue-loader@1.4.2/src/httpVueLoader.js"></script>
  52. <script src="https://unpkg.com/jquery@3.4.1/dist/jquery.js"></script>
  53. <script src="https://www.layuicdn.com/layer-v3.1.1/layer.js"></script>
  54. <script src="https://unpkg.com/echarts@4.6.0/dist/echarts-en.min.js"></script>
  55. <script src="../../static/sa.js"></script>
  56. <script type="text/javascript">
  57. var app = new Vue({
  58. components: {
  59. 'com-sta-data': httpVueLoader('com-sta-data.vue'),
  60. 'com-chart-1': httpVueLoader('com-chart-1.vue'),
  61. 'com-chart-2': httpVueLoader('com-chart-2.vue'),
  62. 'com-chart-3': httpVueLoader('com-chart-3.vue'),
  63. 'com-stack': httpVueLoader('com-stack.vue'),
  64. 'com-update-log': httpVueLoader('com-update-log.vue'),
  65. 'com-origin': httpVueLoader('com-origin.vue'),
  66. // 'com-intro': httpVueLoader('com-intro.vue'),
  67. },
  68. el: '.vue-box',
  69. data: {
  70. },
  71. methods: {
  72. },
  73. mounted: function() {
  74. }
  75. })
  76. // 设置监听,改变窗口大小时重绘图表
  77. window.myChartList = [];
  78. window.onresize = function() {
  79. myChartList.forEach(function(myChart) {
  80. myChart.resize();
  81. })
  82. }
  83. </script>
  84. <!-- 百度统计(下载到本地后请删除) -->
  85. <div style="height: 0px; overflow: hidden;">
  86. <script type="text/javascript" src="https://v1.cnzz.com/z_stat.php?id=1279021391&web_id=1279021391"></script>
  87. </div>
  88. </body>
  89. </html>