no message

components/common/commo-split-line.vue

+<template>
+  <div :style="{'height': height, 'background-color': bgColor}"></div>
+</template>
+<script>
+export default {
+  props: {
+    height: {
+      type: String,
+      default: '1px'
+    },  
+    bgColor: {
+      type: String,
+      default: '#F8F9FA'
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@/assets/style/mixin';
+// @import '@/assets/style/global';
+
+</style>

components/common/common-header.vue

+<!-- 头部组件 -->
+<template>
+  <section class="common-header" :style="{'background-color': bgColor}">
+      <img src="" @click="back"/>
+      <span></span>
+  </section>
+</template>
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      default: '项目名称'
+    },  
+    bgColor: {
+      type: String,
+      default: '#fff'
+    }
+  },
+  methods: {
+    back() {
+      if( true ) {
+        this.$router.history(-1);
+      } else {
+        this.$rocNative.back();
+      }
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@/assets/style/mixin';
+@import '@/assets/style/global';
+.common-header {
+  margin-top: px2rem(60px);
+}
+</style>

components/common/common-loading.vue

+ <template>
+	<div class="common-loader loader--style3" title="2">
+        <div class="loader-mask"></div>
+        <svg version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+            width="40" height="40" viewBox="0 0 60 60" style="enable-background:new 0 0 80 80;" xml:space="preserve">
+            <path fill="#000" d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z">
+                <animateTransform attributeType="xml"
+                attributeName="transform"
+                type="rotate"
+                from="0 25 25"
+                to="360 25 25"
+                dur="0.6s"
+                repeatCount="indefinite"/>
+            </path>
+        </svg>
+    </div>
+
+</template>
+
+<style lang="scss" scoped>
+    @import '@/assets/style/mixin';
+    .common-loader {
+        &-mask {
+            position: fixed;
+            top: 0;
+            left: 0;
+            bottom: 0;
+            right: 0;
+            z-index: 100;
+            // background: rgba(0, 0, 0, 0.5);
+        }
+        svg {
+            position: absolute;
+            top: px2rem(280px);
+            left: px2rem(172px);
+            z-index: 101;
+        }
+    }
+
+    svg path, svg rect{
+        // fill: #fff;
+        // fill: #449284;
+        fill: #449284;
+    }
+</style>

components/common/common-show-all.vue

+<template>
+  <section class="common-show-all" >
+    <span :class="{'margin-top15': needMarginTop}" @click="showAllItem">{{btnText}}</span>
+  </section>
+</template>
+<script>
+
+export default {
+  data() {
+    return {
+      
+    }
+  },
+  props: {
+    needMarginTop: {
+      type: Boolean,
+      default: false
+    },
+    btnText: {
+      type: String,
+      default: '查看全部'
+    },
+    itemIndex: {
+      type: String,
+      default: '0'
+    }
+  },
+  methods: {
+    showAllItem() {
+      this.$emit('showAllItem')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@/assets/style/mixin';
+// @import '@/assets/style/global';
+.common-show-all {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: px2rem(6px);
+  span {
+    display: inline-block;
+    width: px2rem(345px);
+    height: px2rem(40px);
+    line-height: px2rem(40px);
+    margin-bottom: px2rem(15px);
+    text-align: center;
+    border-radius: px2rem(22px);
+    color: #676869;
+    background: #F8F9FA;
+  }
+  .margin-top15 {
+    margin-top: px2rem(15px);
+  }
+}
+
+</style>

components/common/common-simple.vue

+<!-- Tabs组件 -->
+<template>
+  <section class="common-tabs">
+      
+  </section>
+</template>
+<script>
+export default {
+  props: {
+    tapList: {
+      type: Array,
+      default: () => []
+    }
+  },
+  methods: {
+    
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@/assets/style/mixin';
+@import '@/assets/style/global';
+.common-tabs {
+  margin-top: 0;
+}
+</style>

components/common/common-swiper-item.vue

+<!-- Swipter的子组件 -->
+<template>
+  <section class="common-swiper-item">
+      
+  </section>
+</template>
+<script>
+export default {
+  props: {
+    itemData: {
+      type: Array,
+      default: () => []
+    }
+  },
+  methods: {
+    
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@/assets/style/mixin';
+@import '@/assets/style/global';
+.common-swiper-item {
+  margin-top: 0;
+}
+</style>

components/common/common-tabs.vue

+<!-- Tabs组件 -->
+<template>
+  <section class="common-tabs">
+      ss
+  </section>
+</template>
+<script>
+export default {
+  props: {
+    tapList: {
+      type: Array,
+      default: () => []
+    }
+  },
+  methods: {
+    
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+// @import '@/assets/style/mixin';
+// @import '@/assets/style/global';
+.common-tabs {
+  margin-top: 0;
+}
+</style>

components/common/common-tips.vue

+<!-- Tabs组件 -->
+<template>
+  <section class="common-tips">
+      
+  </section>
+</template>
+<script>
+export default {
+  props: {
+    tipList: {
+      type: Array,
+      default: () => []
+    }
+  },
+  methods: {
+    
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@/assets/style/mixin';
+@import '@/assets/style/global';
+.common-tabs {
+  margin-top: 0;
+}
+</style>

components/common/common-title.vue

+<!-- Tabs组件 -->
+<template>
+  <section class="common-tabs">
+      
+  </section>
+</template>
+<script>
+export default {
+  props: {
+    tapList: {
+      type: Array,
+      default: () => []
+    }
+  },
+  methods: {
+    
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@/assets/style/mixin';
+@import '@/assets/style/global';
+.common-tabs {
+  margin-top: 0;
+}
+</style>

package-lock.json

@@ -4046,6 +4046,29 @@
         "safer-buffer": "^2.1.0"
       }
     },
+    "echarts": {
+      "version": "4.4.0",
+      "resolved": "http://192.168.110.93:4873/echarts/-/echarts-4.4.0.tgz",
+      "integrity": "sha512-zJD1YaONA2Ib6rKCpkU9rT/K+OFJ/F0/3Mj5FamGLXytBV5g36gsQGv8sYL7fVs/BFj/sn3wemyctlgIHMCA5w==",
+      "requires": {
+        "zrender": "4.1.1"
+      }
+    },
+    "echarts-amap": {
+      "version": "1.0.0-rc.6",
+      "resolved": "http://192.168.110.93:4873/echarts-amap/-/echarts-amap-1.0.0-rc.6.tgz",
+      "integrity": "sha1-V4KnTa7lLtRM4/j2JXdWF4PwnhY="
+    },
+    "echarts-liquidfill": {
+      "version": "2.0.5",
+      "resolved": "http://192.168.110.93:4873/echarts-liquidfill/-/echarts-liquidfill-2.0.5.tgz",
+      "integrity": "sha512-3G19W5ngoh1L3BXYuD34g0Vd30ORWvQtyxRuL+7vmOZ3FkF6xkgD4pfcCL7QVAQOr+XZ4OiD2ot6dNGsRhflcg=="
+    },
+    "echarts-wordcloud": {
+      "version": "1.1.3",
+      "resolved": "http://192.168.110.93:4873/echarts-wordcloud/-/echarts-wordcloud-1.1.3.tgz",
+      "integrity": "sha512-Et8D5xEAoYkidmHun+hEH+2lF9dhCt6D0JJ390vlr2r/1zwhhZAbcL01CEvG93QcMcJpSvSPK8vRiGkTbMHRxg=="
+    },
     "editorconfig": {
       "version": "0.15.3",
       "resolved": "https://registry.npmjs.org/editorconfig/-/editorconfig-0.15.3.tgz",
@@ -8737,6 +8760,11 @@
       "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=",
       "dev": true
     },
+    "numerify": {
+      "version": "1.2.9",
+      "resolved": "http://192.168.110.93:4873/numerify/-/numerify-1.2.9.tgz",
+      "integrity": "sha512-X4QzQiytV5ZN3TVLhzbtFzjTarUNnaa1pgNDFqt7u7Nqhxe7FvY2eYrGt4WYHlYXDqgtfC/n/a5nJ2y0LijV8w=="
+    },
     "nuxt": {
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/nuxt/-/nuxt-2.8.1.tgz",
@@ -12355,6 +12383,11 @@
       "resolved": "https://registry.npmjs.org/utila/-/utila-0.4.0.tgz",
       "integrity": "sha1-ihagXURWV6Oupe7MWxKk+lN5dyw="
     },
+    "utils-lite": {
+      "version": "0.1.10",
+      "resolved": "http://192.168.110.93:4873/utils-lite/-/utils-lite-0.1.10.tgz",
+      "integrity": "sha512-jlHvdtI8MyWURF/3u+ufIjf1Cs5WjN6WZl9qO8dEkZsVjaI7X5YMUhaCFzkvB69ljt6fo4Dd7V/Oj2NJOFDFOQ=="
+    },
     "utils-merge": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
@@ -12365,6 +12398,18 @@
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.3.2.tgz",
       "integrity": "sha512-yXJmeNaw3DnnKAOKJE51sL/ZaYfWJRl1pK9dr19YFCu0ObS231AB1/LbqTKRAQ5kw8A90rA6fr4riOUpTZvQZA=="
     },
+    "v-charts": {
+      "version": "1.19.0",
+      "resolved": "http://192.168.110.93:4873/v-charts/-/v-charts-1.19.0.tgz",
+      "integrity": "sha512-vm2HBUmxAsXK0ivwce9LytcpqrItDA5JSPLYVxZXtiuoyhcn80XX1/3dPJd/1GqG1OYv3jfBo1s9ra4q8GowqA==",
+      "requires": {
+        "echarts-amap": "1.0.0-rc.6",
+        "echarts-liquidfill": "^2.0.2",
+        "echarts-wordcloud": "^1.1.3",
+        "numerify": "1.2.9",
+        "utils-lite": "0.1.10"
+      }
+    },
     "validate-npm-package-license": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
@@ -13636,6 +13681,11 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/ylru/-/ylru-1.2.1.tgz",
       "integrity": "sha512-faQrqNMzcPCHGVC2aaOINk13K+aaBDUPjGWl0teOXywElLjyVAB6Oe2jj62jHYtwsU49jXhScYbvPENK+6zAvQ=="
+    },
+    "zrender": {
+      "version": "4.1.1",
+      "resolved": "http://192.168.110.93:4873/zrender/-/zrender-4.1.1.tgz",
+      "integrity": "sha512-epy1rl82dP/JKxhZl+JRfwcZjobKOoynxBzvBZJBPjmDMAxBE4grLjDryx8BHkHlKyWsUkis4XEL2wN61w5l4w=="
     }
   }
 }

package.json

@@ -14,8 +14,11 @@
   "dependencies": {
     "cookie-universal": "^2.0.16",
     "cross-env": "^5.2.0",
+    "echarts": "^4.4.0",
     "koa": "^2.6.2",
     "nuxt": "^2.0.0",
+    "pica-area": "^1.0.16",
+    "v-charts": "^1.19.0",
     "vant": "^2.0.9"
   },
   "devDependencies": {

pages/common-tabs.vue

+<!-- Tabs组件 -->
+<template>
+  <section class="common-tabs">
+      ss
+  </section>
+</template>
+<script>
+export default {
+  props: {
+    tapList: {
+      type: Array,
+      default: () => []
+    }
+  },
+  methods: {
+    
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+// @import '@/assets/style/mixin';
+// @import '@/assets/style/global';
+.common-tabs {
+  margin-top: 0;
+}
+</style>

pages/index.vue

 <template>
   <div class="container">
     <h1>nuxt-ssr</h1>
-    <about />
+    <CommonTabs></CommonTabs>
+    <!-- <ve-line :data="chartData"></ve-line> -->
   </div>
 </template>
 
 <script>
-import request from '@/service/api'
-import { getHospital } from '@/service';
-
-import About from '../components/about';
+import { CommonTabs } from './common-tabs'
+// import CommonTabs from '@/components/common/common-tabs'
+// import VeLine from 'v-charts/lib/line.common'
+// const VeLine = require('v-charts/lib/line.common');
 
 export default {
   components: {
-    About
-  },
-  async asyncData({ $axios }) {
-    console.log('index page async data');
-    const { data } = await request({
-      baseURL: 'https://sc.yunqueyi.com',
-      url: '/contents/template/116/widgetList?token=55122B14EAD64B77B4D65E083C994979&setEntry=true'
-    });
-    
-    return { hos: data.model.widgetList }
+    CommonTabs
+    // VeLine: import('v-charts/lib/line.common').then(module => {
+    //   console.log('module', module.default);
+    //   return module.default;
+    // })  
   },
-  fetch() {
-    console.log('index page fetch');
+  async asyncData() {
     return {
-      fetch: 'fetch'
-    }
+      chartData: {
+        columns: ['date', 'PV'],
+        rows: [
+          { 'date': '01-01', 'PV': 1231 },
+          { 'date': '01-02', 'PV': 1223 },
+          { 'date': '01-03', 'PV': 2123 },
+          { 'date': '01-04', 'PV': 4123 },
+          { 'date': '01-05', 'PV': 3123 },
+          { 'date': '01-06', 'PV': 7123 }
+        ]
+      }
+    }  
   },
   created() {
     // this.$store.dispatch('searchHospital', { name: '测试' });
   },
-  mounted() {}
+  mounted() {
+    // import('v-charts/lib/line.common').then(module => {
+    //   console.log('module', module.default);
+    // })
+  }
 }
 </script>
 

plugins/vue-inject.js

 import Vue from 'vue'
 import rocNative from '@/utils/jsbridge'
+import VeLine from 'v-charts/lib/line.common'
 
-Vue.prototype.$rocNative = new rocNative();
+Vue.prototype.$rocNative = new rocNative()
+Vue.use(VeLine);
\ No newline at end of file