Asp.net+Vue2構建簡單記賬WebApp之一（設計）
Asp.net+Vue2構建簡單記賬WebApp之二（使用ABP迅速搭建.Net后臺）
Asp.net+Vue2構建簡單記賬WebApp之三（使用Vue-cli構建vue.js應用）
Asp.net+Vue2構建簡單記賬WebApp之四（vue.js構建記賬主頁面）
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} (xt6fbqg%)"
},
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} (cafmrfb%)"
},
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框架，頁面綁定數據，我們一切操作只需要修改數據，頁面自動改變。不需要直接操作頁面元素。
