From 3fe6be8e6eeae41fcfabc5876cac2fddd1c860f0 Mon Sep 17 00:00:00 2001
From: hanbaoshan <hanbaoshan@aiotlink.com>
Date: 星期四, 21 一月 2021 11:41:07 +0800
Subject: [PATCH] 朔黄首页数据统计分析tab静态页完善

---
 src/pages/shuohuangMonitorAnalyze/index/App.vue                 |    2 
 src/pages/shuohuangMonitorAnalyze/components/charts/pie.vue     |   13 +
 src/pages/shuohuangMonitorAnalyze/components/guideIndex.vue     |  246 ++++++++++++++++++++--
 src/pages/shuohuangMonitorAnalyze/components/swipeTabs.vue      |  181 ++++++++++++++++
 src/pages/shuohuangMonitorAnalyze/components/charts/line.vue    |   18 +
 src/pages/shuohuangMonitorAnalyze/index/main.ts                 |    3 
 src/pages/shuohuangMonitorAnalyze/components/leftNav.vue        |    2 
 src/pages/shuohuangMonitorAnalyze/components/charts/dataset.vue |  154 ++++++++++++++
 8 files changed, 587 insertions(+), 32 deletions(-)

diff --git a/src/pages/shuohuangMonitorAnalyze/components/charts/dataset.vue b/src/pages/shuohuangMonitorAnalyze/components/charts/dataset.vue
new file mode 100644
index 0000000..3e74266
--- /dev/null
+++ b/src/pages/shuohuangMonitorAnalyze/components/charts/dataset.vue
@@ -0,0 +1,154 @@
+<template>
+  <div class="irregular-dataset">
+    <div ref="multiBar" style="width: 100%;height: 300px;"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      options: {},
+    }
+  },
+  mounted () {
+    this.options = this.mockData();
+    this.initMultiBar();
+  },
+  methods: {
+    mockData () {
+
+      var dimension = ['鏈福绗�', '鏈墜姣�', '鏈懠鍞�', '杩愯涓潯瑙�', '鏈鏌�', '鏈簲绛�'];
+      var categoryCount = 30;
+      var xAxisData = [];
+      var customData = [];
+      var legendData = [];
+      var dataList = [];
+
+      legendData.push('trend');
+      var encodeY = [];
+      for (var i = 0; i < dimension.length; i++) {
+        legendData.push(dimension[i]);
+        dataList.push([]);
+        encodeY.push(1 + i);
+      }
+
+      for (var i = 0; i < categoryCount; i++) {
+        var val = Math.random() * 1000;
+        xAxisData.push('category' + i);
+        var customVal = [i];
+        customData.push(customVal);
+
+        for (var j = 0; j < dataList.length; j++) {
+          var value = j === 0
+            ? this.$echarts.number.round(val, 2)
+            : this.$echarts.number.round(Math.max(0, dataList[j - 1][i] + (Math.random() - 0.5) * 200), 2);
+          dataList[j].push(value);
+          customVal.push(value);
+        }
+      }
+      return {
+        title: {
+          text: '杩濊鎯呭喌缁熻',
+          textStyle: {
+            fontSize: '14px'
+          }
+        },
+        grid: {
+          top: 50,
+          left: 30,
+          right: 20,
+        },
+        tooltip: {
+          trigger: 'axis'
+        },
+        legend: {
+          data: legendData,
+          left: 'right',
+          //color: ['aqua','#3aa0ff', '#36cbcb', '#4dcb73', '#fad337', '#f2637b', '#975fe4']
+        },
+        dataZoom: [{
+          type: 'slider',
+          start: 50,
+          end: 70
+        }, {
+          type: 'inside',
+          start: 50,
+          end: 70
+        }],
+        xAxis: {
+          data: xAxisData
+        },
+        yAxis: {},
+        series: [{
+          type: 'custom',
+          name: 'trend',
+          renderItem: this.renderItem,
+          itemStyle: {
+            borderWidth: 2
+          },
+          encode: {
+            x: 0,
+            y: encodeY
+          },
+          data: customData,
+          z: 100
+        }].concat(this.$echarts.util.map(dataList, function (data, index) {
+          return {
+            type: 'bar',
+            animation: false,
+            name: legendData[index + 1],
+            itemStyle: {
+              opacity: 0.7
+            },
+            color: ['#3aa0ff', '#36cbcb', '#4dcb73', '#fad337', '#f2637b', '#975fe4'][index],
+            data: data
+          };
+        }))
+      }
+    },
+    renderItem (params, api) {
+      var xValue = api.value(0);
+      var currentSeriesIndices = api.currentSeriesIndices();
+      var barLayout = api.barLayout({
+        barGap: '30%', barCategoryGap: '20%', count: currentSeriesIndices.length - 1
+      });
+
+      var points = [];
+      for (var i = 0; i < currentSeriesIndices.length; i++) {
+        var seriesIndex = currentSeriesIndices[i];
+        if (seriesIndex !== params.seriesIndex) {
+          var point = api.coord([xValue, api.value(seriesIndex)]);
+          point[0] += barLayout[i - 1].offsetCenter;
+          point[1] -= 20;
+          points.push(point);
+        }
+      }
+      var style = api.style({
+        color: '#975fe4',
+        //stroke: api.visual('color'),
+        stroke: 'aqua',
+        fill: null
+      });
+
+      return {
+        type: 'polyline',
+        shape: {
+          points: points
+        },
+
+        style: style
+      };
+    },
+    initMultiBar () {
+      this.$nextTick(() => {
+        let dom = this.$echarts.init(this.$refs['multiBar']);
+        dom.setOption(this.options);
+      })
+    }
+  }
+}
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/src/pages/shuohuangMonitorAnalyze/components/charts/line.vue b/src/pages/shuohuangMonitorAnalyze/components/charts/line.vue
index c2c3a19..04dbb1b 100644
--- a/src/pages/shuohuangMonitorAnalyze/components/charts/line.vue
+++ b/src/pages/shuohuangMonitorAnalyze/components/charts/line.vue
@@ -1,5 +1,5 @@
 <template>
-  <div ref="lineChart"></div>
+  <div ref="lineChart" :style="{width:defineW+'px',height:defineH+'px'}"></div>
 </template>
 
 <script>
@@ -7,14 +7,22 @@
   props: {
     options: {
       type: Object
+    },
+    defineW: {
+      type: Number,
+      default: 600,
+    },
+    defineH: {
+      type: Number,
+      default: 300,
     }
   },
-  mounted(){
+  mounted () {
     this.initLineChart();
   },
-  methods:{
-    initLineChart(){
-      this.$$nextTick(()=>{
+  methods: {
+    initLineChart () {
+      this.$nextTick(() => {
         let dom = this.$echarts.init(this.$refs['lineChart']);
         dom.setOption(this.options);
       })
diff --git a/src/pages/shuohuangMonitorAnalyze/components/charts/pie.vue b/src/pages/shuohuangMonitorAnalyze/components/charts/pie.vue
index 46e941c..f71636f 100644
--- a/src/pages/shuohuangMonitorAnalyze/components/charts/pie.vue
+++ b/src/pages/shuohuangMonitorAnalyze/components/charts/pie.vue
@@ -1,17 +1,25 @@
 <template>
-  <div ref="pieChart" style="width: 600px; height: 300px;"></div>
+  <div ref="pieChart" :style="{width: pieW+'px', height: pieH+'px'}"></div>
 </template>
 
 <script>
 export default {
   data () {
     return {
-
+      
     }
   },
   props: {
     options: {
       type: Object
+    },
+    pieW: {
+      type: Number,
+      default: 600
+    },
+    pieH: {
+      type: Number,
+      default: 300
     }
   },
   mounted () {
@@ -29,4 +37,5 @@
 </script>
 
 <style lang="scss">
+
 </style>
\ No newline at end of file
diff --git a/src/pages/shuohuangMonitorAnalyze/components/guideIndex.vue b/src/pages/shuohuangMonitorAnalyze/components/guideIndex.vue
index 8007458..8092860 100644
--- a/src/pages/shuohuangMonitorAnalyze/components/guideIndex.vue
+++ b/src/pages/shuohuangMonitorAnalyze/components/guideIndex.vue
@@ -4,7 +4,7 @@
       <el-tab-pane label="鏁版嵁缁熻鍒嗘瀽" name="dataStatistic"></el-tab-pane>
       <el-tab-pane label="浠诲姟缁熻鍒嗘瀽" name="taskStatistic"></el-tab-pane>
     </el-tabs>
-    <div class="tab-content">
+    <div class="tab-content" v-if="actCardTab=='dataStatistic'">
       <div class="card-view">
         <el-card>
           <div class="title">
@@ -130,33 +130,82 @@
             </div>
           </div>
         </div>
-        <div class="statics">
+        <div class="statics flex-box">
           <div class="lt">
             <div class="statics-part">
               <div class="statics-header">
                 <span class="title">涔樺姟鍛樿繚瑙勭粺璁�</span>
-                <time-shortcut @actPickerChange="irregularStatistic"></time-shortcut>
+                <time-shortcut @actPickerChange="irregularMenStatistic"></time-shortcut>
               </div>
-              <div class="chart-area flex-box">
-                <div class="lt">
-                  <div class="chart-theme">涔樺姟鍛樻�讳汉鏁�</div>
-                  <div class="sum">
-                    <span class="val">8846</span>
-                    <span class="ratio">17.1%</span>
+              <div class="statics-content">
+                <div class="chart-area flex-box">
+                  <div class="lt">
+                    <div class="chart-theme">涔樺姟鍛樻�讳汉鏁�</div>
+                    <div class="sum">
+                      <span class="val">8846</span>
+                      <span class="ratio">17.1%</span>
+                    </div>
+                    <line-chart :options="optionsOfIrregularSum" :defineW="300" :defineH="160"></line-chart>
                   </div>
-                  <Line :options="optionsOfIrregularSum"></Line>
-                </div>
-                <div class="gt">
-                  <div class="chart-theme">浜哄潎杩濊娆℃暟</div>
-                  <div class="sum">
-                    <span class="val">8846</span>
+                  <div class="gt">
+                    <div class="chart-theme">浜哄潎杩濊娆℃暟</div>
+                    <div class="sum">
+                      <span class="val">8846</span>
+                    </div>
+                    <!-- <line-chart :options="optionsOfIrregularPer"></line-chart> -->
+                    <line-chart :options="optionsOfIrregularPer" :defineW="300" :defineH="160"></line-chart>
                   </div>
                 </div>
+                <el-table :data="irregularTableData">
+                  <el-table-column label="鎺掑悕"></el-table-column>
+                  <el-table-column label="濮撳悕"></el-table-column>
+                  <el-table-column label="杩濊娆℃暟"></el-table-column>
+                  <el-table-column label="鍛ㄦ定骞�"></el-table-column>
+                </el-table>
+                <el-pagination
+                  @size-change="handleTableSizeChange"
+                  @current-change="renderIrregularMenTable"
+                  :current-page.sync="PageIndex"
+                  :page-size="PageSize"
+                  :page-sizes="pageSizes"
+                  layout="total,sizes, prev, pager, next"
+                  :total="tableTotal"
+                ></el-pagination>
+              </div>
+            </div>
+          </div>
+          <div class="rt">
+            <div class="statics-part">
+              <div class="statics-header">
+                <span class="title">閲嶇偣鍦版杩濊浜嬩欢缁熻</span>
+                <time-shortcut @actPickerChange="irregularEventStatistic"></time-shortcut>
+              </div>
+              <div class="statics-content">
+                <el-radio-group v-model="irregularEventType" size="small">
+                  <el-radio-button label="fhdd">闃叉姢鍦版</el-radio-button>
+                  <el-radio-button label="jcz">杩涘嚭绔�</el-radio-button>
+                  <el-radio-button label="gfx">杩囧垎鐩�</el-radio-button>
+                  <el-radio-button label="hc">浼氳溅</el-radio-button>
+                  <el-radio-button label="lsmx">涓存椂鎱㈡��</el-radio-button>
+                </el-radio-group>
+                <!-- <Pie :options="optionsOfIrregularEventPie"></Pie> -->
+                <Pie :options="optionsOfHidDangerPie"></Pie>
               </div>
             </div>
           </div>
         </div>
+        <div class="part">
+          <div class="tab-swiper">
+            <swipe-tabs></swipe-tabs>
+          </div>
+          <div class="tab-detail">
+            <dataset-chart style="width:100%"></dataset-chart>
+          </div>
+        </div>
       </div>
+    </div>
+    <div class="tab-content" v-if="actCardTab=='taskStatistic'">
+      
     </div>
   </div>
 </template>
@@ -165,9 +214,11 @@
 import timeShortcut from './timeShortcut';
 import Bar from './charts/bar';
 import Pie from './charts/pie';
-import Line from './charts/line';
+import LineChart from './charts/line';
+import SwipeTabs from './swipeTabs';
+import DatasetChart from './charts/dataset';
 export default {
-  components: { timeShortcut, Bar, Pie, Line },
+  components: { timeShortcut, Bar, Pie, LineChart, SwipeTabs, DatasetChart },
   data () {
     return {
       actCardTab: 'dataStatistic',
@@ -194,11 +245,24 @@
             data: ['鏈福绗�', '鏈墜姣�', '鏈懠鍞�', '杩愯涓潯瑙�', '鏈鏌�', '鏈簲绛�'],
             axisTick: {
               alignWithLabel: true
-            }
+            },
+            // axisLine: {
+            //   lineStyle: {
+            //     color: '#ccc'
+            //   }
+            // },
+            // nameTextStyle: {
+            //   color: "#333"
+            // }
           }
         ],
         yAxis: [
-          { type: 'value' }
+          {            
+            type: 'value',
+            axisLine: {
+              show: false
+            }
+          }
         ],
         series: [
           {
@@ -255,6 +319,10 @@
       },
       optionsOfIrregularSum: {
         animation: false,
+        grid: {
+          top: 0,
+          left: 0
+        },
         tooltip: {
           trigger: 'axis',
           axisPointer: {
@@ -265,6 +333,7 @@
           }
         },
         xAxis: {
+          show: false,
           type: 'category',
           boundaryGap: false,
           data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
@@ -274,6 +343,8 @@
         },
         yAxis: {
           type: 'value',
+          show: false,
+          boundaryGap: [0, '30%'],
           label: {
             show: false
           }
@@ -282,17 +353,82 @@
           {
             data: [820, 932, 901, 934, 1290, 1330, 1320],
             type: 'line',
-
+            smooth: true,
+            areaStyle: {
+              opacity: 0.3
+            },
+            color: '#5dbafd'
           }
         ]
+      },
+      optionsOfIrregularPer: {
+        animation: false,
+        grid: {
+          top: 0,
+          left: 0
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#6a7985'
+            }
+          }
+        },
+        xAxis: {
+          show: false,
+          type: 'category',
+          boundaryGap: false,
+          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+          label: {
+            show: false
+          }
+        },
+        yAxis: {
+          type: 'value',
+          show: false,
+          label: {
+            show: false
+          }
+        },
+        series: [
+          {
+            data: [820, 932, 901, 934, 1290, 1330, 1320],
+            type: 'line',
+            smooth: true,
+            areaStyle: {
+              opacity: 0.3
+            },
+            color: '#8adee6'
+          }
+        ]
+      },
+      irregularTableData: [],
+      PageIndex: 1,
+      PageSize: 5,
+      pageSizes: [5, 10],
+      tableTotal: 0,
+      irregularEventType: 'fhdd',
+      optionsOfIrregularEventPie: {
+
       }
     }
   },
   methods: {
+    renderIrregularMenTable () {
+
+    },
+    handleTableSizeChange () {
+
+    },
     timeShortChange (time) {
 
     },
-    irregularStatistic (time) {
+    irregularMenStatistic (time) {
+
+    },
+    irregularEventStatistic (time) {
 
     }
   }
@@ -359,6 +495,15 @@
           .day-ratio {
             display: flex;
             align-items: center;
+            &>span{
+              margin-right: 6px;
+            }
+            .triangle.green{
+              margin-top: -6px;
+            }
+            .triangle.red{
+              margin-top: 6px;
+            }
           }
         }
         .devide {
@@ -368,11 +513,17 @@
         }
         .detail {
           display: flex;
+          align-items: center;
+          color: #777;
+          .name{
+            margin-right: 20px;
+          }
         }
       }
     }
     .part {
-      padding: 10px 0;
+      padding: 20px 0;
+      margin-bottom: 20px;
       .header-width-tab {
         display: flex;
         justify-content: space-between;
@@ -385,10 +536,46 @@
         display: flex;
         padding: 0 10px;
         min-height: 400px;
+        margin-bottom: 20px;
+        .statics-header {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          border-bottom: 1px solid #eee;
+          padding-bottom: 10px;
+          margin-bottom: 20px;
+          .title {
+            font-size: 16px;
+            font-weight: bold;
+          }
+        }
+        .statics-part {
+          .statics-content {
+            padding: 0 20px;
+            .chart-area {
+              .chart-theme {
+                font-size: 14px;
+                color: #999;
+              }
+              .sum {
+                padding: 14px 0 10px;
+                .val {
+                  font-size: 24px;
+                  padding-left: 10px;
+                  margin-right: 20px;
+                }
+                .ratio {
+                  font-size: 14px;
+                  color: #999;
+                }
+              }
+            }
+          }
+        }
         .lt {
           text-align: left;
           flex: 1;
-          padding-right: 20px;
+          padding-right: 40px;
         }
         .rt {
           text-align: left;
@@ -426,6 +613,19 @@
           }
         }
       }
+      .flex-box {
+        .lt,
+        .rt,
+        .gt {
+          flex: 1;
+          width: auto;
+          //padding: 0 20px;
+        }
+      }
+      .tab-swiper {
+        width: calc(100vw - 340px);
+        margin-bottom: 20px;
+      }
     }
   }
 }
diff --git a/src/pages/shuohuangMonitorAnalyze/components/leftNav.vue b/src/pages/shuohuangMonitorAnalyze/components/leftNav.vue
index afcc4d9..15ceb0c 100644
--- a/src/pages/shuohuangMonitorAnalyze/components/leftNav.vue
+++ b/src/pages/shuohuangMonitorAnalyze/components/leftNav.vue
@@ -69,7 +69,7 @@
   data () {
     return {
       publicPath: process.env.BASE_URL,
-      activeIndex: 'searchForVideoAnalyze'
+      activeIndex: 'guideIndex'
     }
   },
   mounted(){
diff --git a/src/pages/shuohuangMonitorAnalyze/components/swipeTabs.vue b/src/pages/shuohuangMonitorAnalyze/components/swipeTabs.vue
new file mode 100644
index 0000000..2c7e937
--- /dev/null
+++ b/src/pages/shuohuangMonitorAnalyze/components/swipeTabs.vue
@@ -0,0 +1,181 @@
+<template>
+  <div class="swipe-tabs">
+    <swiper :options="swiperOption" ref="swiperTabs">
+      <swiper-slide v-for="slide in slides" :key="slide.id">
+        <div class="slide-tab" :class="{'act':actSlide==slide.id}" @click="checkSlide(slide)">
+          <div class="title">{{slide.name}}</div>
+          <div class="flex-box">
+            <div>
+              <div class="dimension">杩濊鐜�</div>
+              <div class="dimension-val">{{slide.ratio}}</div>
+            </div>
+            <div style="margin-left: 60px;">
+              <Pie :options="optOfPie(slide)" :pieW="70" :pieH="70"></Pie>
+            </div>
+          </div>
+        </div>
+      </swiper-slide>
+    </swiper>
+    <div class="swiper-scrollbar"></div>
+    <div class="swiper-button-next">
+      <div class="icon-btn">
+        <i class="iconfont iconyou1"></i>
+      </div>
+    </div>
+    <div class="swiper-button-prev">
+      <div class="icon-btn">
+        <i class="iconfont iconzuo"></i>
+      </div>
+    </div>
+    <div class="swiper-pagination"></div>
+  </div>
+</template>
+
+<script>
+import Pie from './charts/pie';
+export default {
+  components: { Pie },
+  data () {
+    return {
+      swiperOption: {
+        spaceBetween: 0,
+        //initialSlide: 0,
+        direction: 'horizontal',
+        navigation: {
+          nextEl: '.swiper-button-next',
+          prevEl: '.swiper-button-prev'
+        },
+        slidesPerView: 5,
+        observer: true,
+        observeParents: true,
+      },
+      slides: [
+        { id: 'jlfgs', name: '鏈洪噺鍒嗗叕鍙�', ratio: 82, },
+        { id: 'ztyj', name: '涓搧涓�灞�', ratio: 78, },
+        { id: 'ztsj', name: '涓搧涓夊眬', ratio: 45 },
+        { id: 'ztsij', name: '涓搧鍥涘眬', ratio: 30 },
+        { id: 'jtjw', name: '浜搧鏈哄姟', ratio: 30 },
+        { id: 'ztwj', name: '涓搧浜斿眬', ratio: 30 },
+        { id: 'jgjw', name: '浜珮鏈哄姟', ratio: 30 },
+      ],
+      actSlide: ''
+    }
+  },
+  mounted () {
+    console.log('swip mounte');
+    this.actSlide = this.slides[0].id;
+
+  },
+  methods: {
+    optOfPie (slide) {
+      return {
+        tooltip: {
+          trigger: 'item',
+          formatter: '{a}<br/>{b}:{c} ({d}%)'
+        },
+        // legend: {
+        //   orient: 'vertical',
+        //   right: 10,
+        //   y: 'center',
+        //   data: ['鏈福绗�', '鏈墜姣�', '鏈懠鍞�', '杩愯涓潯瑙�', '鏈鏌�', '鏈簲绛�']
+        // },
+        series: [
+          {
+            name: '杩濊鐜�',
+            type: 'pie',
+            color: ['#18bfff', '#e9f6fb'],
+            radius: ['60%', '90%'],
+            //center: ['40%','60%'],
+            tooltip: {
+              show: false
+            },
+            avoidLabelOverlap: false,
+            label: {
+              show: false,
+              position: 'center'
+            },
+            // emphasis: {
+            //   label: {
+            //     show: true,
+            //     fontSize: '30',
+            //     fontWeight: 'bold'
+            //   }
+            // },
+            hoverAnimation: false,
+            labelLine: {
+              show: false
+            },
+            data: [
+              { value: slide.ratio, name: '' },
+              { value: 100 - slide.ratio, name: '' },
+
+            ]
+          }
+        ]
+      }
+    },
+    checkSlide (slide) {
+      this.actSlide = slide.id;
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.swipe-tabs {
+  position: relative;
+  padding: 0 30px;
+
+  .swiper-container {
+    border-left: 1px solid #eee;
+    border-right: 1px solid #eee;
+  }
+  .slide-tab {
+    cursor: pointer;
+    border-top: 2px solid transparent;
+    padding: 20px;
+    text-align: left;
+    &.act {
+      border-color: #409eff;
+    }
+    .title {
+      font-size: 16px;
+      color: #666;
+    }
+    .dimension {
+      color: #999;
+      margin: 10px 0;
+    }
+    .dimension-val {
+      color: #555;
+      font-size: 28px;
+    }
+  }
+  .swiper-button-prev,
+  .swiper-button-next {
+    cursor: pointer;
+    // width: 40px;
+    // height: 40px;
+    position: absolute;
+    background: transparent;
+    top: 50%;
+    margin-top: -20px;
+    z-index: 999;
+    //border-radius: 4em;
+    outline: none;
+    .icon-btn {
+      font-size: 24px;
+      color: #666;
+      text-align: center;
+      line-height: 38px;
+      cursor: pointer;
+    }
+  }
+  .swiper-button-next {
+    right: -10px;
+  }
+  .swiper-button-prev {
+    left: -10px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/shuohuangMonitorAnalyze/index/App.vue b/src/pages/shuohuangMonitorAnalyze/index/App.vue
index c6d0831..bf0da94 100644
--- a/src/pages/shuohuangMonitorAnalyze/index/App.vue
+++ b/src/pages/shuohuangMonitorAnalyze/index/App.vue
@@ -38,7 +38,7 @@
   data () {
     return {
       isCollapse: false,
-      actPage: 'searchForVideoAnalyze',
+      actPage: 'guideIndex',
     }
   },
   mounted () {
diff --git a/src/pages/shuohuangMonitorAnalyze/index/main.ts b/src/pages/shuohuangMonitorAnalyze/index/main.ts
index 4297dbe..c67de5b 100644
--- a/src/pages/shuohuangMonitorAnalyze/index/main.ts
+++ b/src/pages/shuohuangMonitorAnalyze/index/main.ts
@@ -6,7 +6,10 @@
 import echarts from 'echarts';
 import 'element-ui/lib/theme-chalk/index.css';
 import "@/assets/css/element-variables.scss";
+import VueAwesomeSwiper from "vue-awesome-swiper";
+import "swiper/dist/css/swiper.css";
 Vue.use(ElementUI);
+Vue.use(VueAwesomeSwiper as any);
 Vue.mixin(Mixin);
 Vue.prototype.$moment = moment;
 Vue.prototype.$echarts = echarts;

--
Gitblit v1.8.0