前端：high-chart plugin

src/dashoo.cn/frontend_web/nuxt.config.js

@@ -89,6 +89,7 @@ module.exports = {
       'vue-clipboards',
       'moment',
       'chart.js',
+      'highcharts',
       'deepmerge' // vue-chartjs dep
     ],
     extractCSS: true,

src/dashoo.cn/frontend_web/package-lock.json

@@ -5067,9 +5067,14 @@
     },
     "highcharts": {
       "version": "5.0.15",
-      "resolved": "https://registry.npm.taobao.org/highcharts/download/highcharts-5.0.15.tgz?cache=0&sync_timestamp=1603355133438&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fhighcharts%2Fdownload%2Fhighcharts-5.0.15.tgz",
+      "resolved": "https://registry.nlark.com/highcharts/download/highcharts-5.0.15.tgz",
       "integrity": "sha1-qa8RU4qFuF8wDmb3oOBIp++Ks4E="
     },
+    "highcharts-vue": {
+      "version": "1.4.0",
+      "resolved": "https://registry.nlark.com/highcharts-vue/download/highcharts-vue-1.4.0.tgz",
+      "integrity": "sha1-S9qt3GuaPuoN9w0poirnE9KOSgw="
+    },
     "hmac-drbg": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
@@ -11846,6 +11851,11 @@
         "clipboard": "^1.7.1"
       }
     },
+    "vue-highcharts": {
+      "version": "0.2.0",
+      "resolved": "https://registry.nlark.com/vue-highcharts/download/vue-highcharts-0.2.0.tgz",
+      "integrity": "sha1-k3VLou4ZnzxQYgCYfh3HTprck9k="
+    },
     "vue-hot-reload-api": {
       "version": "2.3.4",
       "resolved": "https://registry.npm.taobao.org/vue-hot-reload-api/download/vue-hot-reload-api-2.3.4.tgz",

src/dashoo.cn/frontend_web/package.json

@@ -27,6 +27,7 @@
     "es6-promise": "^4.1.1",
     "file-saver": "^2.0.1",
     "highcharts": "^5.0.15",
+    "highcharts-vue": "^1.4.0",
     "js-cookie": "^2.1.4",
     "jwt-decode": "^2.2.0",
     "moment": "^2.18.1",
@@ -37,6 +38,7 @@
     "vue-chartjs": "^3.0.0",
     "vue-class-component": "^5.0.1",
     "vue-clipboards": "^1.1.0",
+    "vue-highcharts": "^0.2.0",
     "vue-i18n": "^7.2.0",
     "vue-print-nb": "^1.0.3",
     "vuedraggable": "^2.15.0",

src/dashoo.cn/frontend_web/src/pages/indexNew.vue

@@ -1,23 +1,25 @@
 <template>
   <div class="home-body" v-loading="downloading" element-loading-text="'数据读取中，请稍候。。。'">
     <!--标题部分-->
-    <div style="display: flex; height: 20%; padding-top: 0px; margin-bottom: 1%">
-      <div style="width: 20%; margin: 0 5px; border: 1px solid #F6931F"></div>
-      <div style="width: 20%; margin: 0 5px; border: 1px solid #F6931F"></div>
-      <div style="width: 20%; margin: 0 5px; border: 1px solid #F6931F"></div>
-      <div style="width: 20%; margin: 0 5px; border: 1px solid #F6931F"></div>
-      <div style="width: 20%; margin: 0 5px; border: 1px solid #F6931F"></div>
+    <div class="todo-box">
+      <div class="todo-box-item"></div>
+      <div class="todo-box-item"></div>
+      <div class="todo-box-item"></div>
+      <div class="todo-box-item"></div>
+      <div class="todo-box-item"></div>
     </div>
-    <div style="width: 100%; height: 80%; padding-top: 0px; margin-bottom: 1%">
-      <div style="display: flex; width: 100%; height: 50%; padding-top: 0px; margin-bottom: 1%">
-        <div style="width: 50%; height: 100%; margin: 0 5px; padding-top: 0px; border: 1px solid #00ffff; margin-bottom: 1%">
-          <highcharts :options="chartOptions"></highcharts>
+    <div class="chart-box">
+      <div class="chart-box-row">
+        <div class="chart-box-row-item">
+          <div style="height: 100%">
+            <highcharts :options="chartOptions"></highcharts>
+          </div>
         </div>
-        <div style="width: 50%; height: 100%; margin: 0 5px; padding-top: 0px; border: 1px solid #f13f40; margin-bottom: 1%"></div>
+        <div class="chart-box-row-item"></div>
       </div>
-      <div style="display: flex; width: 100%; height: 50%; padding-top: 0px; margin-bottom: 1%">
-        <div style="width: 50%; height: 100%; margin: 0 5px; padding-top: 0px; border: 1px solid #00ffff; margin-bottom: 1%"></div>
-        <div style="width: 50%; height: 100%; margin: 0 5px; padding-top: 0px; border: 1px solid #f13f40; margin-bottom: 1%"></div>
+      <div class="chart-box-row">
+        <div class="chart-box-row-item"></div>
+        <div class="chart-box-row-item"></div>
       </div>
     </div>
   </div>
@@ -25,16 +27,12 @@
 
 <script>
   import echarts from 'echarts'
-  // import {Chart} from 'highcharts-vue'
 
   import {
     mapGetters
   } from 'vuex'
   export default {
     name: 'index',
-    // components: {
-    //   highcharts: Chart
-    // },
     data () {
       return {
         chartOptions: {
@@ -433,37 +431,35 @@
     padding: 0 5px;
     display: flex;
     flex-direction: column;
-    .header-card {
-      .header-box {
-        height: 150px;
-        font-size: 26px;
-        font-weight: bold;
-        text-align: left;
-        .box-title {
-          height: 30%;
-          margin: 10px 22px;
-          /*border: 1px solid #00ffff;*/
-          span {
-            color: #F56C6C;
-          }
-        }
-        .box-content {
-          height: 70%;
-          margin: 20px 25px;
-          cursor: pointer;
-          /*border: 1px solid #F56C6C;*/
-          span:hover{
-            color: #1D8CE0;
-          }
-        }
+    .todo-box {
+      display: flex;
+      height: 20%;
+      padding-top: 0px;
+      margin-bottom: 1%;
+      .todo-box-item {
+        width: 20%;
+        margin: 0 5px;
+        border: 1px solid #F6931F
       }
     }
-    .chart {
-      flex: 1;
-      .home-show {
-        .chart-box {
-          width: 100%;
-          min-height: 300px;
+    .chart-box {
+      width: 100%;
+      height: 80%;
+      padding-top: 0px;
+      margin-bottom: 1%;
+      .chart-box-row {
+        display: flex;
+        width: 100%;
+        height: 50%;
+        padding-top: 0px;
+        margin-bottom: 1%;
+        .chart-box-row-item {
+          width: 50%;
+          height: 100%;
+          margin: 0 5px;
+          padding-top: 0px;
+          border: 1px solid #00ffff;
+          margin-bottom: 1%
         }
       }
     }