车流量section

liuqimichale
1 parent 9ce9cfea
Showing 9 changed files with 232 additions and 34 deletions
src/assets/img/errortype1.png
src/assets/img/errortype5.png
src/assets/img/noticetype1.png
src/assets/img/noticetype2.png
src/components/lineChart.vue
src/views/mainContainer.vue
src/views/newssection.vue
src/views/outsection.vue
src/views/vehiclesection.vue
+<template>
+  <div :class="className" :style="{height:height,width:width}"></div>
+</template>
+
+<script>
+import echarts from 'echarts'
+
+require('echarts/theme/macarons') // echarts theme
+import {debounce} from '../utils/debounce'
+
+export default {
+  name: 'lineChart',
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '205px'
+    },
+    autoResize: {
+      type: Boolean,
+      default: true
+    },
+    chartData: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      chart: null,
+      sidebarElm: null
+    }
+  },
+  watch: {
+    chartData: {
+      deep: true,
+    }
+  },
+  mounted() {
+    this.initChart()
+    if (this.autoResize) {
+      this.__resizeHandler = debounce(() => {
+        if (this.chart) {
+          this.chart.resize()
+        }
+      }, 100)
+      window.addEventListener('resize', this.__resizeHandler)
+    }
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    if (this.autoResize) {
+      window.removeEventListener('resize', this.__resizeHandler)
+    }
+
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    setOptions({xData, yData} = {}) {
+      this.chart.setOption({
+        tooltip: {
+          trigger: 'axis'
+        },
+        legend: {
+          data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: ['周一','周二','周三','周四','周五','周六','周日']
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: [
+          {
+            name:'邮件营销',
+            type:'line',
+            stack: '总量',
+            data:[120, 132, 101, 134, 90, 230, 210]
+          },
+          {
+            name:'联盟广告',
+            type:'line',
+            stack: '总量',
+            data:[220, 182, 191, 234, 290, 330, 310]
+          },
+          {
+            name:'视频广告',
+            type:'line',
+            stack: '总量',
+            data:[150, 232, 201, 154, 190, 330, 410]
+          },
+          {
+            name:'直接访问',
+            type:'line',
+            stack: '总量',
+            data:[320, 332, 301, 334, 390, 330, 320]
+          },
+          {
+            name:'搜索引擎',
+            type:'line',
+            stack: '总量',
+            data:[820, 932, 901, 934, 1290, 1330, 1320]
+          }
+        ]
+
+      })
+    },
+    initChart() {
+      this.chart = echarts.init(this.$el, 'macarons')
+      this.setOptions(this.chartData)
+    }
+  }
+}
+</script>
@@ -10,7 +10,7 @@
         <div class="heightper-top"></div>
         <div class="heightper-bottom">
           <outsection style="width: 50%;float: left"></outsection>
-          <outsection style="width: 50%;float: left"></outsection>
+          <vehiclesection style="width: 50%;float: left"></vehiclesection>
         </div>
       </li>
       <li>
@@ -32,7 +32,7 @@ import sfysection from &#39;../views/sfysection&#39;
 import berthsection from '../views/berthsection'
 import newssection from '../views/newssection'
 import outsection from '../views/outsection'
-
+import vehiclesection from '../views/vehiclesection'
  
 export default {
   name: 'mainContainer',
@@ -44,7 +44,8 @@ export default {
     sfysection,
     berthsection,
     newssection,
-    outsection
+    outsection,
+    vehiclesection
   },
   data() {
     return {
@@ -4,9 +4,12 @@
       <div class="nwwest-roll flexfm news-wrap" id="nwwest-roll">
         <ul id="roll-ul">  
           <li v-for="item in list" ref="rollul" :class="{anim:animate==true}">
-              <span class="noticetype"></span>
-              <span class="text" :title="item.site">{{item.site}}</span>
-              <span class="time">{{item.gsmc}}</span>
+              <div class="noticetype1" v-if="item.type===1"></div>
+              <div class="noticetype2" v-else-if="item.type===2"></div>
+              <div class="errortype1" v-else-if="item.type===3"></div>
+              <div class="errortype2" v-else></div>
+              <div class="text" :title="item.site">{{item.site}}</div>
+              <div class="time">{{item.gsmc}}</div>
           </li>
         </ul>
       </div>
@@ -25,17 +28,17 @@ export default {
     return {
       animate: true,
       list: [
-        { "name": "于先生1", "site": "北京门头沟区1北京门头沟区1北京门头沟区1", "gsmc": "10-02" },
-        { "name": "于先生2", "site": "北京门头沟区2", "gsmc": "10-02" },
-        { "name": "于先生3", "site": "北京门头沟区3北京门头沟区3北京门头沟区3北京门头沟区3北京门头沟区3北京门头沟区3", "gsmc": "10-02" },
-        { "name": "于先生4", "site": "北京门头沟区4", "gsmc": "10-02" },
-        { "name": "于先生5", "site": "北京门头沟区5", "gsmc": "10-02" },
-        { "name": "于先生6", "site": "北京门头北京门头沟区6北京门头沟区6北京门头沟区6北京门头沟区6沟区6", "gsmc": "10-02" },
-        { "name": "于先生7", "site": "北京门头沟区7", "gsmc": "10-02" },
-        { "name": "于先生8", "site": "北京门头沟区8", "gsmc": "10-02" },
-        { "name": "于先生9", "site": "北京门头北京门头沟区9北京门头沟区9北京门头沟区9沟区9", "gsmc": "10-02" },
-        { "name": "于先生10", "site": "北京门头沟区10", "gsmc": "10-02" },
-        { "name": "于先生11", "site": "北京门北京门头沟区11北京门头沟区11北京门头沟区11头沟区11", "gsmc": "10-02" }
+        {"type":1, "name": "于先生1", "site": "北京门头沟区1北京门头沟区1北京门头沟区1", "gsmc": "10-02" },
+        {"type":2, "name": "于先生2", "site": "北京门头沟区2", "gsmc": "10-02" },
+        {"type":3, "name": "于先生3", "site": "北京门头沟区3北京门头沟区3北京门头沟区3北京门头沟区3北京门头沟区3北京门头沟区3", "gsmc": "10-02" },
+        {"type":4, "name": "于先生4", "site": "北京门头沟区4", "gsmc": "10-02" },
+        {"type":1, "name": "于先生5", "site": "北京门头沟区5", "gsmc": "10-02" },
+        {"type":2, "name": "于先生6", "site": "北京门头北京门头沟区6北京门头沟区6北京门头沟区6北京门头沟区6沟区6", "gsmc": "10-02" },
+        {"type":3, "name": "于先生7", "site": "北京门头沟区7", "gsmc": "10-02" },
+        {"type":4, "name": "于先生8", "site": "北京门头沟区8", "gsmc": "10-02" },
+        {"type":1, "name": "于先生9", "site": "北京门头北京门头沟区9北京门头沟区9北京门头沟区9沟区9", "gsmc": "10-02" },
+        {"type":2, "name": "于先生10", "site": "北京门头沟区10", "gsmc": "10-02" },
+        {"type":3, "name": "于先生11", "site": "北京门北京门头沟区11北京门头沟区11北京门头沟区11头沟区11", "gsmc": "10-02" }
       ]
     }
   },
@@ -60,6 +63,14 @@ export default {
 </script>
  
 <style lang="scss" scoped>
+    @mixin newsType($img){
+      margin-left: 23px;
+      margin-right: 23px;
+      width: 26px;
+      height: 26px;
+      background-image: url($img);
+      background-repeat:no-repeat ;
+    }
     .nwwest-roll {
       width: 100%;
       height: 210px;
@@ -73,19 +84,17 @@ export default {
         display: flex;
         background:rgba(255,255,255,.1);
         margin-bottom: 10px;
-        .noticetype{
-          margin-left: 23px;
-          margin-right: 23px;
-          width: 26px;
-          height: 26px;
-          background: url("../assets/img/noticetype.png") no-repeat;
+        .noticetype1{
+          @include newsType("../assets/img/noticetype1.png");
+        }
+        .noticetype2{
+          @include newsType("../assets/img/noticetype2.png");
+        }
+        .errortype1{
+          @include newsType("../assets/img/errortype1.png");
         }
-        .errortype{
-          margin-left: 23px;
-          margin-right: 23px;
-          width: 26px;
-          height: 26px;
-          background: #f00;
+        .errortype2{
+          @include newsType("../assets/img/errortype1.png");
         }
         .text{
           width:calc(100% - 100px);
 <template>
   <div>
     <titlesection title="周出场统计"></titlesection>
-    <ul class="flexfm ydp-dz-wrap">
-
-    </ul>
+    <lineChart class="flexfm inout-wrap">
+    </lineChart>
   </div>
 </template>
  
 <script>
 import titlesection from '../components/titlesection'
 import {fetchList} from '../api/api'
+import lineChart from '../components/lineChart'
  
 const lineChartData = {
   newVisitis: {
@@ -22,7 +22,8 @@ const lineChartData = {
 export default {
   name: 'outsection',
   components: {
-    titlesection
+    titlesection,
+    lineChart
   },
   data() {
     return {
@@ -46,7 +47,7 @@ export default {
 </script>
  
 <style lang="scss"  scoped>
-  .ydp-dz-wrap{
+  .inout-wrap{
     display: flex;
  
   }
+<template>
+  <div>
+    <titlesection title="今日车流量"></titlesection>
+    <lineChart class="flexfm inout-wrap">
+    </lineChart>
+  </div>
+</template>
+
+<script>
+import titlesection from '../components/titlesection'
+import {fetchList} from '../api/api'
+import lineChart from '../components/lineChart'
+
+const lineChartData = {
+  newVisitis: {
+    yData: [100, 120, 161],
+    xData: ['正常', '异常', '故障']
+  }
+}
+
+
+export default {
+  name: 'vehiclesection',
+  components: {
+    titlesection,
+    lineChart
+  },
+  data() {
+    return {
+      lineChartData: lineChartData.newVisitis,
+      dzNum: '23454',
+      ydpNum: '4454'
+    }
+  },
+  created() {
+  },
+  methods: {
+    getList() {
+      fetchList()
+      .then(res => {
+        console.log(res);
+
+      });
+    },
+  }
+}
+</script>
+
+<style lang="scss"  scoped>
+  .inout-wrap{
+    display: flex;
+
+  }
+</style>