提交

package.json

     "tinymce": "^5.0.12",
     "vue": "^2.6.6",
     "vue-amap": "^0.5.9",
-    "vue-echarts": "^4.0.1",
     "vue-router": "^3.0.2",
     "vuex": "^3.1.0",
     "wangeditor": "^3.1.1"

src/components/SelectBuilding.vue

+<template>
+  <el-select v-model="val" filterable placeholder="请选择">
+    <el-option
+      v-for="item in buildings"
+      :key="item.buildingId"
+      :label="item.buildingName"
+      :value="item.buildingId">
+    </el-option>
+  </el-select>
+</template>
+
+<script>
+import { mapState, mapActions } from 'vuex'
+
+export default {
+  name: 'SelectBuilding',
+  props: [ 'value' ],
+  data () {
+    return {
+      cacheVal: null,
+    }
+  },
+  computed: {
+    ...mapState({
+      buildings: s => s.buildings || [],
+    }),
+    val: {
+      get() {
+        return this.value || this.cacheVal
+      },
+      set (nw) {
+        this.cacheVal = nw
+        this.$emit('input', nw)
+      }
+    },
+  },
+  created () {
+    if (!this.buildings || !this.buildings.length) {
+      this.getBuildings()
+    }
+  },
+  methods: {
+    ...mapActions([
+      'getBuildings',
+    ]),
+  },
+}
+</script>
+

src/components/charts/VisitingDayLine.vue

-<template>
-  <v-chart class="x-chart" :options="options" autoresize></v-chart>
-</template>
-
-<script>
-import 'echarts/lib/chart/line'
-import 'echarts/lib/component/title'
-import 'echarts/lib/component/dataZoom'
-import 'echarts/lib/component/tooltip'
-
-export default {
-  name: 'visiting-day-line',
-  components: {
-    // vChart: () => import('vue-echarts'),
-  },
-  props: [
-    'source',
-  ],
-  data () {
-    return {
-      opts: {
-        title: { text: '日访问量' },
-        tooltip: {
-          formatter: (params, ticket, callback) => {
-            const { visiteDate, amount } = params.data
-            const tip = `${visiteDate}: ${amount}`
-            callback(ticket, tip)
-            return tip
-          }
-        },
-        xAxis: { type: 'category' },
-        yAxis: { name: '人/日' },
-        series: [
-          {
-            type: 'line',
-            smooth: true,
-            encode: {
-              x: 'visiteDate',
-              y: 'amount',
-            },
-          },
-        ],
-        dataZoom: [
-          {
-            type: 'inside',
-            show: true,
-            start: 0,
-            end: 100,
-          },
-          // {
-          //   type: 'slider',
-          //   show: true,
-          //   start: 0,
-          //   end: 100,
-          // }
-        ],
-        dataset: {
-          sourceHeader: false,
-          dimensions: ['visiteDate', 'amount'],
-        },
-      }
-    }
-  },
-  computed: {
-    options () {
-      return {
-        ...this.opts,
-        title: {
-          ...this.opts.title,
-        },
-        dataset: {
-          ...this.opts.dataset,
-          source: this.source || [],
-        }
-      }
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.x-chart {
-  margin: 0 auto;
-  width: 100%;
-  height: 100%;
-}
-</style>
-

src/components/charts/VisitingDayTable.vue

-<template>
-  <div>
-    <h3 style="margin: 0">访客记录</h3>
-    <el-table
-      :data="dataSet"
-      stripe
-      style="width: 100%">
-      <el-table-column
-        label="日期"
-        width="180">
-        <template slot-scope="scope">
-          <span>{{formatDate(scope.row.visiteDate)}}</span>
-        </template>
-      </el-table-column>
-      <el-table-column
-        prop="name"
-        label="姓名"
-        width="180">
-      </el-table-column>
-      <el-table-column
-        prop="carStyle"
-        label="车辆">
-      </el-table-column>
-      <el-table-column
-        prop="deviceName"
-        label="采集设备">
-      </el-table-column>
-    </el-table>
-    <el-pagination
-      small
-      style="margin-top:10px;"
-      layout="prev, pager, next"
-      :page-size="pageNavi.size"
-      :total="pageNavi.total"
-      :current-page="pageNavi.current"
-      @current-change="changePage"
-    >
-    </el-pagination>
-  </div>
-</template>
-
-<script>
-import dayjs from 'dayjs'
-
-export default {
-  name: 'visiting-day-table',
-  props: [
-    'source',
-    'page',
-  ],
-  data() {
-    return {
-      sampleData: [
-        { visiteDate: '2019-02-15 17:00', name: '张一', carStyle: '奔驰', channel: '搜房' },
-        { visiteDate: '2019-02-15 16:40', name: '张二', carStyle: '奔驰', channel: '搜房' },
-        { visiteDate: '2019-02-15 16:30', name: '张三', carStyle: '奔驰', channel: '搜房' },
-        { visiteDate: '2019-02-15 15:50', name: '张四', carStyle: '奔驰', channel: '搜房' },
-        { visiteDate: '2019-02-15 15:40', name: '张五', carStyle: '奔驰', channel: '搜房' },
-        { visiteDate: '2019-02-15 15:20', name: '张六', carStyle: '奔驰', channel: '搜房' },
-        { visiteDate: '2019-02-15 15:10', name: '张七', carStyle: '奔驰', channel: '搜房' },
-        { visiteDate: '2019-02-15 15:00', name: '张八', carStyle: '奔驰', channel: '搜房' },
-      ],
-      defPage: {
-        current: 1,
-        size: 10,
-        total: 0,
-      }
-    }
-  },
-  computed: {
-    pageNavi () {
-      return {
-        ...this.defPage,
-        ...(this.page || {})
-      }
-    },
-    dataSet () {
-      return this.source || this.sampleData
-    }
-  },
-  methods: {
-    changePage (nwPg) {
-      this.$emit('page-change', nwPg)
-    },
-    formatDate(dt) {
-      if (!dt || dt.indexOf('0001-') > -1) return ''
-
-      return dayjs(dt).format('YYYY-MM-DD HH:mm')
-    }
-  }
-}
-</script>
-

src/components/charts/XLine.vue

 <template>
-   <div ref="thirdChart" ></div>
+  <div ref="echart" ></div>
 </template>
 <script>
 import Echarts from "echarts";
+
 export default {
   name: "XLine",
-  props: ["value"],
+  props: {
+    value: {
+      type: Object,
+      default: () => {},
+    },
+  },
   data() {
     return {
       chart: undefined,
       defaultOpts: {
-        //  dataset: {
-        //   dimensions: ['date', 'userCount', 'authorizationCount'],
-        //   source,
-        // },
         title: {
           text: "新增用户"
         },
     };
   },
   watch: {
-    value (val) {
-      this.renderChart(val)
+    value: {
+      handler(val) {
+        this.renderChart(val)
+      },
+      immediate: true,
+      deep: true,
     },
   },
   mounted() {
-    if (!this.chart) {
-      this.chart = Echarts.init(this.$refs.thirdChart);
-      this.renderChart(this.value)
-    }
+    this.renderChart(this.value || {})
   },
   methods: {
+    initChats () {
+      if (!this.chart && this.$refs.echart) {
+        this.chart = Echarts.init(this.$refs.echart);
+      }
+
+      if (this.chart) {
+        return Promise.resolve(this.chart)
+      } else {
+        return Promise.reject()
+      }
+    },
     renderChart(val) {
-      // 绘制图表
-      this.chart.setOption({
-        ...this.defaultOpts,
-        ...val
-      });
+      this.initChats().then((echart) => {
+        // 绘制图表
+        echart.setOption({
+          ...this.defaultOpts,
+          ...val
+        });
+      })
     }
   }
 };

src/config/api.js

       userResource: {
           method:'get',
           url: `${commPrefix}/selectUserResource`
-      }
+      },
+      newsUserCount: {
+          method:'get',
+          url: `${commPrefix}/selectNewsUserCount`
+      },
   },
 }
 export default apis

src/main.js

 import XMRightLay from '@/components/XMRightLay.vue'
 import XMSearchForm from '@/components/XMSearchForm.vue'
 import RichEditor from '@/components/RichEditor.vue'
+import SelectBuilding from '@/components/SelectBuilding'
 
 import App from './App.vue'
 import router from './router'
 Vue.component('xm-rtl', XMRightLay)
 Vue.component('xm-search', XMSearchForm)
 Vue.component('rich-editor', RichEditor)
+Vue.component('select-building', SelectBuilding)
 Vue.use(VueAMap)
 
 VueAMap.initAMapApiLoader({

src/store/system.js

     },
     menus: [],
     user: {},
+    buildings: [],
   },
   mutations: {
     updateUser(state, user) {
         ...state.user,
         ...user,
       }
+    },
+    updateBuildings(state, buildings) {
+      state.buildings = buildings || []
     }
   },
   actions: {
         localStorage.removeItem('x-token')
         commit('updateUser', {})
       })
-    }
+    },
+    getBuildings ({ commit }) {
+      return new Promise((resolve, reject) => {
+        request({
+          ...apis.building.list,
+          params: { pageSize: 999 },
+        }).then((data) => {
+          commit('updateBuildings',  data.records)
+          resolve(data)
+        }).catch(({ message }) => {
+          if (typeof message === 'string') {
+            reject(message)
+          }
+        })
+      })
+    },
   }
 }

src/views/carouselFigure/advertisementEdit.vue

       <el-form-item label="标题：">
         <el-input v-model="form.title"></el-input>
       </el-form-item>
-      <el-form-item label="发布位置：">
+      <!-- <el-form-item label="发布位置：">
         <el-select v-model="form.showPosition" placeholder="请选择">
           <el-option v-for="(item,i) in showPositionList" :key="i" :label="item.name" :value="item.value"></el-option>
         </el-select>
-      </el-form-item>
+      </el-form-item> -->
       <el-form-item label="类型：">
         <el-select v-model="form.contentType" placeholder="请选择">
           <el-option v-for="(t,i) in contentTypeList" :key="i" :label="t.name" :value="t.value"></el-option>

src/views/consultant/edit.vue

           </el-select>
         </el-form-item>
         <el-form-item label="图片：">
-          <el-upload class="avatar-uploader" :action="upFileUrl" name="file" :show-file-list="false" :before-upload="beforeImgUpload" :on-success="handleAvatarSuccess">
+          <el-upload class="avatar-uploader" :headers="uploadHeaders" :action="upFileUrl" name="file" :show-file-list="false" :before-upload="beforeImgUpload" :on-success="handleAvatarSuccess">
             <img v-if="detail.photo" :src="detail.photo" class="avatar">
             <i v-else class="el-icon-plus avatar-uploader-icon"></i>
           </el-upload>
   computed: {
     ...mapBuildingState({
       buildings: x => x.buildings
-    })
+    }),
+    uploadHeaders() {
+      const token = localStorage.getItem("x-token") || "";
+
+      return {
+        Authorization: `Bearer ${token}`
+      };
+    }
   },
   methods: {
     ...mapBuildingActions(["getBuildings"]),

src/views/index.js

     },
     children:[
       {
-        path: 'indexEcharts',
-        name: 'indexEcharts',
+        path: 'index',
+        name: 'index',
         component: () => import('./indexEcharts/index.vue'),
         meta: {
           menuShow: false,

src/views/indexEcharts/behaviorAnalysis.vue

         </ul>
       </div>
     </div>
-  <p>用户行为 最近一个月 
+  <p>最近一周 最近一个月 
     <el-date-picker
       v-model="value"
       type="daterange"

src/views/indexEcharts/index.vue

       </div>
     </el-col>
   </el-row>
+  <select-building></select-building>
   <p class="title under-line" @click="toUserSource()">用户来源</p>
   <span class="title-desc under-line" @click="toUserSource()">最近7天</span>
   <el-row :gutter="20" :style="{ height: '560px',margin:'20px 0',border:'1px solid #eee',borderRadius:'5px'}">
   </el-row>
   <p class="title under-line" @click="toBehaviorAnalysis()">用户行为</p>
   <span class="title-desc under-line" @click="toBehaviorAnalysis()">最近7天</span>
-  <div class="grid-content" ref="thirdChart"  id="thirdChart"  :style="{ height: '500px',margin:'20px 0',border:'1px solid #eee', padding:'20px',borderRadius:'5px'}" ></div>
-  <el-row :gutter="20">
+  <!-- <div class="grid-content" ref="thirdChart"  id="thirdChart"  :style="{ height: '500px',margin:'20px 0',border:'1px solid #eee', padding:'20px',borderRadius:'5px'}" ></div> -->
+   <x-line :style="{height: '500px',margin:'20px 0',border:'1px solid #eee', padding:'20px',borderRadius:'5px'}"  :value="lineSeting"></x-line>
+ <el-row :gutter="20">
     <el-col :span="12">
-      <div class="grid-content" ref="fourthChart"  id="fourthChart"  :style="{ height: '500px',margin:'20px 0',border:'1px solid #eee', padding:'20px',borderRadius:'5px'}" >
-      </div>
+      <div class="grid-content" ref="fourthChart"  id="fourthChart"  :style="{height: '500px',margin:'20px 0',border:'1px solid #eee', padding:'20px',borderRadius:'5px'}" ></div>
     </el-col>
     <el-col :span="12">
       <div class="grid-content" ref="fifthChart"  id="fifthChart"  :style="{ height: '500px',margin:'20px 0',border:'1px solid #eee', padding:'20px',borderRadius:'5px'}" >
   <p class="title under-line" @click="toNewUsers()">新增用户</p>
   <span class="title-desc under-line" @click="toNewUsers()">最近7天</span>
   <el-table :data="tableData"  border  center  style="width: 100%">
-    <el-table-column label=date prop="name" ></el-table-column>
+    <el-table-column v-for="(item, index) in tableTitle" :key="index" :label="item" :prop="index == 0 ? 'label': item"></el-table-column>
   </el-table>
   <p class="title">意向客户</p>
   <el-table :data="tableData2"  border  center  style="width: 100%">
 } = createNamespacedHelpers("indexEcharts");
 
 export default {
-  components: {},
+  components: {
+    XLine: () => import('@/components/charts/XLine.vue'),
+  },
   data() {
     return {
+      // 新增用户
       tableData: [
-        {
-          date: "2016-05-02",
-          name: "15"
-        },
-        {
-          date: "2016-05-04",
-          name: "16"
-        },
-        {
-          date: "2016-05-01",
-          name: "17"
-        },
-        {
-          date: "2016-05-03",
-          name: "18"
-        }
+        { label: '新增用户', },
+        { label: '授权注册', }
       ],
-      tableData2: [
-        {
-          num: "98",
-          name: "王晓红",
-          phone: "15742389456",
-          building: "香颂.蔚澜半岛"
-        },
-        {
-          num: "99",
-          name: "王晓红2",
-          phone: "15742389456",
-          building: "香颂.蔚澜半岛"
+      tableTitle: [ '类型' ],
+      tableData2: [ ],
+      userBehavior: [], // 用户行为
+      lineSeting: {
+        dataset: {
+          dimensions: ['date', 'activity', 'activityCount'],
+          source: [],
         },
-        {
-          num: "88",
-          name: "王晓红3",
-          phone: "15742389456",
-          building: "香颂.蔚澜半岛"
-        },
-        {
-          num: "94",
-          name: "王晓红4",
-          phone: "15742389456",
-          building: "香颂.蔚澜半岛"
-        }
-      ],
-      userBehavior: [] // 用户行为
+      },
     };
   },
   computed: {
     ...mapIndexEchartsActions(["getIndexEcharts", "setDetailNull"]),
     initPage() {
       this.setDetailNull();
-      this.getIndexEcharts();
+      this.getIndexEcharts().then(x => {
+        this.lineSeting.dataset.source = this.echartsInfo.selectUserBehavior
+        const data = this.echartsInfo.selectNewsUserCount
+        this.tableData = (data || []).reduce((acc, item, index) => {
+          const { date, userCount, authorizationCount } = item
+          const row2 = {
+            ...acc[0],
+            [`${date}`]: userCount,
+          }
+          const row3 = {
+            ...acc[1],
+            [`${date}`]: authorizationCount,
+          }
+
+          this.tableTitle = this.tableTitle.concat(`${date}`)
+
+          return [row2, row3];          
+        }, this.tableData)
+      });;
     },
     toNewUsers() {
       this.$router.push({ name: "newUsers" });
       };
       // 绘制图表
       firstChart.setOption({
-        color: ["#ff580f", "#ffb400"],
+        color: ["#3688f8", "#7974ce"],
         backgroundColor: "#fff",
         tooltip: {
           trigger: "axis"
       let secondChart = Echarts.init(this.$refs.secondChart);
       // 绘制图表
       secondChart.setOption({
+        color: ["#7974ce","#f5749d","#3688f8"],
         tooltip: {
           trigger: "item",
           formatter: "{a} <br/>{b} : {c} ({d}%)"
         },
         series: [
           {
-            name: "访问来源",
+            name: "用户来源",
             type: "pie",
             radius: "55%",
             center: ["50%", "60%"],
-            label: {
-              normal: {
-                position: "inner"
-              }
-            },
+            // label: {
+            //   normal: {
+            //     position: "inner"
+            //   }
+            // },
             data: [
               { value: 15, name: "自主进入" },
               { value: 30, name: "来源全民经纪人" },
         ]
       });
       // 折线图
-      let thirdChart = Echarts.init(this.$refs.thirdChart);
+      // let thirdChart = Echarts.init(this.$refs.thirdChart);
       // 绘制图表
-      thirdChart.setOption({
-        title: {
-          text: "访问人数"
-        },
-        color: ["#000", "green", "#5793f3", "#d14a61", "#241bba", "orange"],
-        tooltip: {
-          trigger: "axis"
-        },
-        legend: {
-          data: ["首页", "项目", "咨询", "名片", "活动", "资讯"]
-        },
-        grid: {
-          left: "3%",
-          right: "4%",
-          bottom: "3%",
-          containLabel: true
-        },
-        toolbox: {},
-        xAxis: {
-          type: "category",
-          boundaryGap: false,
-          data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
-        },
-        yAxis: {
-          type: "value"
-        },
-        series: [
-          {
-            name: "首页",
-            type: "line",
-            stack: "1",
-            data: []
-          },
-          {
-            name: "项目",
-            type: "line",
-            stack: "2",
-            data: [220, 182, 191, 234, 290, 330, 310]
-          },
-          {
-            name: "咨询",
-            type: "line",
-            stack: "3",
-            data: [150, 232, 201, 154, 190, 330, 410]
-          },
-          {
-            name: "名片",
-            type: "line",
-            stack: "4",
-            data: [320, 332, 301, 334, 390, 330, 320]
-          },
-          {
-            name: "活动",
-            type: "line",
-            stack: "5",
-            data: [820, 932, 901, 544, 1290, 1330, 1320]
-          },
-          {
-            name: "资讯",
-            type: "line",
-            stack: "6",
-            data: [400, 500, 201, 934, 1290, 1423, 777]
-          }
-        ]
-      });
+      // thirdChart.setOption({
+      //   title: {
+      //     text: "访问人数"
+      //   },
+      //   color: ["#ed3a3d", "#e613d2", "#2ed9f7", "#0ab662", "#165cf8", "#8854b9"],
+      //   tooltip: {
+      //     trigger: "axis"
+      //   },
+      //   legend: {
+      //     data: ["首页", "项目", "咨询", "名片", "活动", "资讯"]
+      //   },
+      //   grid: {
+      //     left: "3%",
+      //     right: "4%",
+      //     bottom: "3%",
+      //     containLabel: true
+      //   },
+      //   toolbox: {},
+      //   xAxis: {
+      //     type: "category",
+      //     boundaryGap: false,
+      //     data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
+      //   },
+      //   yAxis: {
+      //     type: "value"
+      //   },
+      //   series: [
+      //     {
+      //       name: "首页",
+      //       type: "line",
+      //       stack: "1",
+      //       data: []
+      //     },
+      //     {
+      //       name: "项目",
+      //       type: "line",
+      //       stack: "2",
+      //       data: [220, 182, 191, 234, 290, 330, 310]
+      //     },
+      //     {
+      //       name: "咨询",
+      //       type: "line",
+      //       stack: "3",
+      //       data: [150, 232, 201, 154, 190, 330, 410]
+      //     },
+      //     {
+      //       name: "名片",
+      //       type: "line",
+      //       stack: "4",
+      //       data: [320, 332, 301, 334, 390, 330, 320]
+      //     },
+      //     {
+      //       name: "活动",
+      //       type: "line",
+      //       stack: "5",
+      //       data: [820, 932, 901, 544, 1290, 1330, 1320]
+      //     },
+      //     {
+      //       name: "资讯",
+      //       type: "line",
+      //       stack: "6",
+      //       data: [400, 500, 201, 934, 1290, 1423, 777]
+      //     }
+      //   ]
+      // });
       // 柱状图
       let fourthChart = Echarts.init(this.$refs.fourthChart);
       // 绘制图表
         title: {
           text: "活跃用户数"
         },
-        color: ["#3398DB"],
+        color: ["#7571cf"],
         tooltip: {
           trigger: "axis",
           axisPointer: {
         title: {
           text: "转化率"
         },
+        color:["#6a96f7","#f5749d"],
         tooltip: {
           trigger: "item",
           formatter: "{a} <br/>{b}: {c} ({d}%)"
         },
         series: [
           {
-            name: "访问来源",
+            name: "转化率",
             type: "pie",
-            radius: ["50%", "70%"],
+            radius: ["40%", "56%"],
             avoidLabelOverlap: false,
             label: {
               normal: {
         title: {
           text: "性别比例"
         },
+        color:["#6a96f7","#f5749d"],
         tooltip: {
           trigger: "item",
           formatter: "{a} <br/>{b}: {c} ({d}%)"
         },
         series: [
           {
-            name: "访问来源",
+            name: "性别比例",
             type: "pie",
-            radius: ["50%", "70%"],
+            radius: ["40%", "56%"],
             avoidLabelOverlap: false,
             label: {
               normal: {
         },
         series: [
           {
-            name: "访问来源",
+            name: "城市分布",
             type: "pie",
             radius: "55%",
             center: ["50%", "60%"],
-            label: {
-              normal: {
-                position: "inner"
-              }
-            },
+            // label: {
+            //   normal: {
+            //     position: "inner"
+            //   }
+            // },
             data: [
               { value: 21, name: "合肥" },
               { value: 90, name: "南京" },

src/views/indexEcharts/newUsers.vue

 <template>
 <div>
-
-  <p class="title">用户行为 最近一个月 
+  <p class="title"><span @click="choose(list.id)" :class="active==list.id?'active':''" v-for="(list,index) in dateList" :key="index" >{{list.date}}</span>  
     <el-date-picker
       v-model="value"
       type="daterange"
       start-placeholder="开始日期"
       end-placeholder="结束日期"
+      @change="changeDate"
       default-value="2019-08-08">
     </el-date-picker></p>
   <x-line :style="{ height: '500px',margin:'20px 0',border:'1px solid #eee', padding:'20px',borderRadius:'5px'}"  :value="lineSeting"></x-line>
-   <el-table :data="tableData"  border  center  style="width: 100%">
+  <el-table :data="tableData"  border  center  style="width: 100%">
     <el-table-column v-for="(item, index) in tableTitle" :key="index" :label="item" :prop="index == 0 ? 'label': item"></el-table-column>
   </el-table>
 
   data() {
     return {
       value: "",
+      dateList:[
+        {date:'最近一周',id:1},
+        {date:'最近一个月',id:2},
+      ],
+      active:1,
       lineSeting: {
         dataset: {
           dimensions: ['date', 'userCount', 'authorizationCount'],
         { label: '授权注册', }
       ],
       tableTitle: [ '类型' ],
-      tableData2: [
-        {
-          num: "98",
-          name: "王晓红",
-          phone: "15742389456",
-          building: "香颂.蔚澜半岛"
-        },
-        {
-          num: "99",
-          name: "王晓红2",
-          phone: "15742389456",
-          building: "香颂.蔚澜半岛"
-        },
-        {
-          num: "88",
-          name: "王晓红3",
-          phone: "15742389456",
-          building: "香颂.蔚澜半岛"
-        },
-        {
-          num: "94",
-          name: "王晓红4",
-          phone: "15742389456",
-          building: "香颂.蔚澜半岛"
-        }
-      ]
     };
   },
   computed: {
   },
   methods: {
     ...mapIndexEchartsActions(["getNewsUserCount"]),
+    choose(id){
+      this.active = id;
+    },
+    changeDate(){
+      console.log(this.value,"value");
+      if(this.value!=''){
+        this.active = '3'
+      }
+    },
     initPage() {
       this.getNewsUserCount().then(x => {
         const data = this.newsUserCount.selectNewsUserCount
 
           return [row2, row3];          
         }, this.tableData)
-
-
-        window.console.log(this.tableData, '-------')
       });
     },
   },
   mounted() {
     this.initPage();
-    // this.drawLine();
   
   }
 };
 p {
   margin: 0;
 }
+.title{
+  span{
+    margin-right: 15px;
+  }
+  .active{
+    color: #044281;
+  }
+}
 </style>