<template>
<!-- 稽核日志界面 -->
<div class="tile is-parent test ">
<article class="tile is-child box">
<Card>
<Row :gutter="16">
<Col span="12">
<div id="echartContainer" style="width:500px; height:300px " ></div>
</Col>
<Col span="12">
<div id="echartContainer2" style="width:500px; height:300px " ></div>
</Col>
</Row>
</Card>
<br/>
<br/>
<TableHead headName="稽核列表"></TableHead>
<Table size="small" border :columns="columnsName" :data="dataList"></Table>
<Row type="flex" justify="space-between">
<Col span="4">
</Col>
<Col>
</Col>
</Row>
</article>
</div>
</template>
<script>
import Vue from 'vue'
import axios from 'axios'
import TableHead from 'component/TableHead.vue'
var echarts = require('echarts')
export default {
components: {
TableHead
},
mounted: function() {
this.$Notice.config({
top: 150,
duration: 3
});
this.query();
},
name: 'debug',
data: function() {
return {
dataList:[],
columnsName:
[
{
title: "序號",
type: "index",
fixed: 'left',
width: 75,
},
{
title: "文件日期",
key: 'fileDate',
width: 130,
},
{
title: "入庫文件數(shù)",
key: 'filesCloud',
width: 130
},
{
title: "源文件數(shù)",
key: 'filesBill',
width: 130,
},
{
title: "入庫條數(shù)",
key: 'rowsCloud',
width: 130,
},
{
title: "源文件總條數(shù)",
key: 'rowsBill',
width: 130,
},
{
title: "文件差值",
key: 'fileDiff',
width: 130,
},
{
title: "總行數(shù)差值",
key: 'rowsDiff',
width: 130,
},
{
title: "稽核時間",
key: 'checkDate',
width: 160,
},
{
title: "更新時間",
key: 'updateDate',
width: 160,
},
],
}
},
methods: {
query: function() {
let that = this
that.loading=true;
axios.get("CheckBillsController/queryCheckBills",
{
})
.then(function(res) {
let charData =res.data.data;
that.total = res.data.data.dataList.datasize;
that.dataList=res.data.data.dataList;
that.open(charData);
})
.catch(function(err) {
console.log(err)
})
that.loading=false;
},
open(charData)
{
let that=this
//文件稽核
var myChartFile = echarts.init(document.getElementById('echartContainer'));
//行數(shù)稽核
var myChartRows = echarts.init(document.getElementById('echartContainer2'));
// 繪制文件稽核圖表
myChartFile.setOption(
{
title:
{
text: "文件稽核"
},
tooltip:
{
trigger: 'axis'
},
axisPointer :
{ // 坐標軸指示器荡澎，坐標軸觸發(fā)有效
type : 'shadow' // 默認為直線，可選為：'line' | 'shadow'
},
//圖形類目
legend:
{
data:['入庫文件數(shù)','源文件數(shù)','源文件數(shù)差值']
},
//圖形工具欄
toolbox:
{
show : true,
feature : {
magicType : {show: true, type: ['line', 'bar']},
}
},
calculable : true,
xAxis:
{
data: charData.time,
axisLabel:
{
//設置x軸文字傾斜顯示
interval:0,
rotate:40
},
//設置x軸文字長度自動適應
grid:
{
left: '10%',
bottom:'35%'
}
},
yAxis:
{
//坐標顯示內(nèi)容
axisLabel:
{
margin: 2,
formatter: function (value, index) {
if (value <= -10000000) {
value = value / 100000000 + "億";
}
else if (value <= -10000 && value > -10000000) {
value = value / 10000 + "萬";
}
else if (value >= 10000 && value < 10000000) {
value = value / 10000 + "萬";
}
else if (value >= 10000000 && value < 100000000) {
value = value / 10000000 + "千萬";
}
else if (value > 100000000 ) {
value = value / 100000000 + "億";
}
return value;
}
}
},
series:
[
{
name: '入庫文件數(shù)',
type: 'bar',
data: charData.cloudFiles,
//柱子顏色
itemStyle:{
normal:
{
color:'#4ad2ff'
}
},
},
{
name: '源文件數(shù)',
type: 'bar',
data: charData.billFiles,
itemStyle:{
normal:
{
color:'#9966ff'
}
},
},
{
name: '源文件數(shù)差值',
type: 'bar',
data: charData.diffFiles,
itemStyle:
{
normal:
{
color:'#434343'
}
},
}
]
});
myChartRows.setOption(
{
title: { text: "總行數(shù)稽核" },
tooltip : {
trigger: 'axis',
},
axisPointer : { // 坐標軸指示器晤锹，坐標軸觸發(fā)有效
type : 'shadow' // 默認為直線，可選為：'line' | 'shadow'
},
legend: {
data:['入庫總行數(shù)','源文件總行數(shù)','總行數(shù)差值']
},
toolbox: {
show : true,
feature : {
magicType : {show: true, type: ['line', 'bar']},
}
},
calculable : true,
xAxis: {
data: charData.time,
//設置x軸文字傾斜顯示
axisLabel:
{
interval:0,
rotate:40,
},
//設置x軸文字長度自動適應
grid: {
left: '10%',
bottom:'35%'
}
},
yAxis: {
type: 'value',
// name: '營業(yè)額(元)',
axisTick: {
inside: true
},
scale: true,
axisLabel: {
margin: 2,
formatter: function (value, index) {
if (value <= -10000000) {
value = value / 100000000 + "億";
}
else if (value <= -10000 && value > -10000000) {
value = value / 10000 + "萬";
}
else if (value >= 10000 && value < 10000000) {
value = value / 10000 + "萬";
}
else if (value >= 10000000 && value < 100000000) {
value = value / 10000000 + "千萬";
}
else if (value > 100000000 ) {
value = value / 100000000 + "億";
}
return value;
}
}
},
series: [
{
name: '入庫總行數(shù)',
type: 'bar',
data: charData.cloudRows,
itemStyle:{
normal:{
color:'#19BE6B'
}
},
},
{
name: '源文件總行數(shù)',
type: 'bar',
data: charData.billRows,
itemStyle:{
normal:{
color:'#2D8CF0'
}
},
},
{
name: '總行數(shù)差值',
type: 'bar',
data: charData.diffRows,
itemStyle:{
normal:{
color:'#993300'
}
},
}
]
}
);
}
}
}
</script>
效果圖
