专栏首页挖坑填坑Asp.net+Vue2构建简单记账WebApp之六(vue.js构建记账统计页面)

Asp.net+Vue2构建简单记账WebApp之六(vue.js构建记账统计页面)

一、添加两个新页面

/components/ MonthCount.vue

<template>
  <div id="MonthCount" >
    <div class="chart">
      <div id="Chart"></div>
    </div>
    <ul class="list">
      <li v-for="item in listData">
        <mt-cell-swipe v-bind:title="item.name" v-bind:label="item.creationTime" :right="[{
                                                                                                      content: '删除',
                                                                                                      style: { background: 'red', color: '#fff' },
                                                                                                      handler: () => DeleteBill(item.id)}]" >
          <span>¥{{item.money}}</span>
          <i slot="icon" class="fa" v-bind:class="item.fontStyle" width="24" height="24"></i>
        </mt-cell-swipe>
      </li>
      <li v-if="loading" style="text-align: center">
        <mt-spinner :type="3" color="#26a2ff"></mt-spinner>
      </li>
      <li v-else-if="loadMore" v-on:click="GetListData" style="text-align: center">
        点击更多
      </li>
    </ul>
  </div>

</template>
<script>
  import { Toast } from 'mint-ui';
  // 按需引入echart模板
  let echarts = require('echarts/lib/echarts');
  require('echarts/lib/chart/pie');
  require('echarts/lib/component/tooltip');
  require('echarts/lib/component/title');


  export default{
    data(){
      return{
        listData:[],//列表数据
        chartData:[],// 图表数据
        date:new Date(), // 时间
        loadMore:false,
        loading:false
      }
    },
    methods:{
      DeleteBill(id){
        this.$http.post('/bill/DeleteBill', {
          key: id
        }).then(response => {
          if(response.body.result.result)
          {
            Toast("删除成功");
            this.GetChartData();
            this.GetListData();
          }else
          {
            Toast(response.body.result.data)
          }
        }, response => {
          Toast("服务器连接失败");
        });
      },
      // 获取图表数据
      GetChartData(){
        this.$http.post('/bill/GetCount', {
          Date: this.date,
          Type:1,
          User: '1'
        }).then(response => {
          if(response.body.result.result)
          {
            this.chartData = response.body.result.data;
          }else
          {
            Toast(response.body.result.data)
          }
        }, response => {
          Toast("获取数据出错");
        });
      },
      // 获取列表数据
      GetListData(){
        this.loading=true;
        this.$http.post('/bill/GetBills', {
          Date:this.date,
          SkipCount:this.listData.length,
          Type:1,
          User: '1',
        }).then(response => {
          if(response.body.result.result)
          {
            let newlistdata =[...this.listData,...response.body.result.data.items];
            this.listData = newlistdata;
            this.loadMore = response.body.result.data.totalCount>this.listData.length;
          }else
          {
            Toast(response.body.result.data);
          }
          this.loading=false;
        }, response => {
          this.loading=false;
          Toast("获取数据出错");
        });
      },
      // 绘制图表
      DrawChart(){
        // 基于准备好的dom,初始化echarts实例
        let myChart = echarts.init(document.getElementById('Chart'));
        let data = this.chartData;
        let count =0;   // 从新计算总值
        for (let i of this.chartData) {
          count+=i.value;
        }
        // 绘制图表
        myChart.setOption({
          title : {
            text: count,
            subtext: '单位(元)',
            x:'right'
          },
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          series: [
            {
              name: '消费',
              type: 'pie',
              radius: '55%',
              center: ['50%', '50%'],
              data: data
            }
          ]
        });
      },
    },
    // 监测变化
    watch:{
      chartData:function () {
        this.DrawChart(); // 绘制表格

      }
    },
    // 创建后执行
    created(){
      this.GetChartData();
      this.GetListData();
    }
  }
</script>

<style scoped>
  #Chart{
    height: 300px;
    width: 100%;
  }
  ul{
    list-style: none;
    padding-left: 0;
  }
  ul li{
    text-align: left;
    margin-bottom: 5px;
  }
  .bottom{
    position: fixed;
    height: 1px;
    width: 100%;
    bottom: 65px;
  }
</style>

components/YearCount.vue

<template>
  <div>
    <div id="ChartLine" class="chart"></div>
    <div id="ChartPie" class="chart"></div>
  </div>
</template>
<script>
  import { Toast } from 'mint-ui';
  // 按需引入echart模板
  let echarts = require('echarts/lib/echarts');
  require('echarts/lib/chart/pie');
  require('echarts/lib/chart/line');
  require('echarts/lib/component/tooltip');
  require('echarts/lib/component/title');

  export default{
    data(){
      return{
        LineData:[],//曲线图数据
        PieData:[],// 饼图数据
        date:new Date(), // 时间
      }
    },
    methods:{
      // 获取曲线图数据
      GetChartLineData(){
        this.$http.post('/bill/GetCount', {
          Date: this.date,
          Type:0,
          GroupBy:1,
          User: '1'
        }).then(response => {
          if(response.body.result.result)
          {
            this.LineData = response.body.result.data;
          }else
          {
            Toast(response.body.result.data)
          }
        }, response => {
          Toast("获取数据出错");
        });
      },
      // 获取饼图数据
      GetPieData(){
        this.$http.post('/bill/GetCount', {
          Date:this.date,
          Type:0,
          User: '1',
        }).then(response => {
          if(response.body.result.result)
          {
            this.PieData = response.body.result.data;
          }else
          {
            Toast(response.body.result.data)
          }
        }, response => {
          Toast("获取数据出错");
        });
      },
      // 绘制图表
      DrawPieChart(){
        // 基于准备好的dom,初始化echarts实例
        let myChart = echarts.init(document.getElementById('ChartPie'));
        let data = this.PieData;
        // 绘制图表
        myChart.setOption({
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          series: [
            {
              name: '消费',
              type: 'pie',
              radius: '55%',
              center: ['50%', '50%'],
              data: data
            }
          ]
        });
      },
      DrawLineChart(){
        // 基于准备好的dom,初始化echarts实例
        let myChart = echarts.init(document.getElementById('ChartLine'));
        let data = this.LineData;
        let x=[],y=[],count=0;
        for(let i of data)
        {
          x.push(i.name);
          y.push(i.value);
          count+=i.value;
        }
        // 绘制图表
        myChart.setOption({
          title : {
            text: count,
            subtext: '单位(元)',
            x:'right'
          },
          tooltip: {
            trigger: 'axis'
          },
          calculable: false,
          grid: { x: 12, y: 10, x2: 12, y2: 30, borderWidth: 0 },
          xAxis: [
            {
              splitLine: { show: false },
              type: 'category',
              boundaryGap: false,
              data: x
            }
          ],
          yAxis: [
            {
              show: false,
              type: 'value'
            }
          ],
          series: [
            {
              name: '消费',
              type: 'line',
              center: ['10%', '10%'],
              smooth: true,
              itemStyle: { normal: { areaStyle: { type: 'default' } } },
              data: y
            },


          ]
        });
      }
    },
    // 监测变化
    watch:{
      PieData:function () {
        this.DrawPieChart(); // 绘制表格

      },
      LineData:function () {
        this.DrawLineChart(); // 绘制表格

      }
    },
    // 创建后执行
    mounted(){
      this.GetChartLineData();
      this.GetPieData();
    }
  }
</script>
<style scoped>
  .chart{
    width: 100%;
    height: 300px;
  }

</style>

二、添加新页面的路由

这里用到了路由的嵌套

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello' // 记账页面
import Count from "@/components/Count" // 统计页面
import MonthCount from "@/components/MonthCount"
import YearCount from "@/components/YearCount"
Vue.use(Router)

export default new Router({
  routes: [
    {path: '/', component: Hello},
    {path: '/Count', component: Count,children:[
      {path: '', component: MonthCount},
      {path: 'year', component: YearCount}
    ]}
  ]
})

三、编写统计页面

Count.vue

<template>
  <div id="Count">
    <div class="Count_Top">
      <label >当前历史记账金额(元)</label><br>
      <label class="Money">{{TotallCount}}</label>
    </div>
    <div>
      <mt-navbar v-model="selected">
        <router-link to="/Count" v-bind:class="ClassMenuMonth" v-on:click.native="select(0)" >当月 </router-link>
        <router-link to="/Count/year"  v-bind:class="ClassMenuyear" v-on:click.native="select(1)"> 当年 </router-link>
      </mt-navbar>
      <router-view ></router-view>
    </div>

  </div>
</template>

<script>
  import { Toast } from 'mint-ui';
  export default {
    methods: {
      select(m){
        this.selected = m;
      },
      GetTotallCount(){
        this.$http.post('/bill/GetTotallCount', {
          User: '1'
        }).then(response => {
          if(response.body.result.result)
          {
            this.TotallCount=response.body.result.data;
          }else
          {
            Toast(response.body.result.data)
          }
        }, response => {
          Toast("获取数据出错")
        });
      },
    },
    created(){
      this.GetTotallCount();
    },
    data() {
      return {
        TotallCount: 0,
        selected:-1,
      }
    },
    computed:{ // 使用计算属性给菜单动态添加样式
      ClassMenuMonth(){
        return{
          'mint-tab-item':true,
          'is-selected':this.selected==0,
        }
      },
      ClassMenuyear(){
        return{
          'mint-tab-item':true,
          'is-selected':this.selected==1,
        }
      }
    },
  };
</script>
<style scoped>
  #Count .Count_Top{
    padding: 16px;
    color: #26a2ff;
  }
  #Count .Count_Top label{
    font-size: 12px;
  }
  #Count .Count_Top .Money{
    font-size: 30px;
  }
  #Count{
    margin-top: 0;
    position: relative;
    height: auto;
    background-color: #eee;}
  .mint-tab-item{
    padding: 12px;
  }
</style>

四、发布查看

这里写图片描述

五、总结

1、没有用到vuex,菜单选择样式可以通过这个来解决现有问题,我觉得vuex主要是data数据管理,解决了组件之间数据传递的麻烦。 2、watch监测数据变化。 3、echarts 更多图表绘制参看官网 4、本想使用mint-ui的无限加载或者上拉加载,但是在这个页面里没弄成功,就自己写了个点击加载的。 5、vue.js 的是mvvm框架,页面绑定数据,我们一切操作只需要修改数据,页面自动改变。不需要直接操作页面元素。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 设计模式- 建造者模式(Builder Pattern)

    主要解决在软件系统中,有时候面临着"一个复杂对象"的创建工作,其通常由各个部分的子对象用一定的算法构成;由于需求的变化,这个复杂对象的各个部分经常面临着剧烈的变...

    易兒善
  • Angular4记账webApp练手项目之五(Angular4项目中创建service(服务)和使用http模块)

    ng给我们创建的模块account.service.ts,内容如下。 有关@Injectable和@Component,都是angular中的关键字或者关键注...

    易兒善
  • 人工智能学习(python基础算法库pandas与可视化库Matplotlib )

    第一课也是第一周学习的内容,学习使用jupyter notebooks。了解python常用的数据出来和数据可视化库。

    易兒善
  • Topology的构建

    用户3003813
  • ERROR Fatal error during KafkaServer startup. Prepare to shutdown

    1、之前搭建的kafka,过了好久,去启动kafka,发现报如下下面的错误,有错误就要解决了。

    别先生
  • 基础篇章:关于 React Native 之 RefreshControl 组件的讲解

    (友情提示:RN学习,从最基础的开始,大家不要嫌弃太基础,会的同学请自行略过,希望不要耽误已经会的同学的宝贵时间) 我们已经讲完了 ScrollView 和 L...

    非著名程序员
  • BIP用搭积木的方式助力企业商业创新

    后疫情时代是数字商业加速发展的时代,商业创新的需求不断增长,在充满不确定性的环境中被提上新高度。对于企业而言,上云的步伐要更快,数字化、智能化转型要更深入,才能...

    曾响铃
  • 爬取京东手机信息

    学习了HttpClient和Jsoup,就掌握了如何抓取数据和如何解析数据,接下来,我们做一个小练习,把京东的手机数据抓取下来。

    Remember_Ray
  • Java并发编程实战 02Java如何解决可见性和有序性问题

    在上一篇文章[Java并发编程实战 01并发Bug的源头](https://mp.weixin.qq.com/s/QT44HS47l_ir08pCZeFU5Q)...

    Johnson木木
  • CRBC:基于区块链的文物数字链

    区块链除了比特币和以太坊,除了最契合的金融领域之外,还有其他的领域也逐步卷入进来,之前说software is eating the world,现在是bloc...

    CRBC文博链

扫码关注云+社区

领取腾讯云代金券