Skip to content

G
gavel-hafms-vue
Commit d2692446 authored by 李苏's avatar 李苏 💬
Browse files
Options

ERP项目明细汇总 新增图表，前端分页

parent a75f4aa4
Show whitespace changes
Inline Side-by-side
Showing with 550 additions and 134 deletions
src/views/hzcxbb/erpxmmxz/index.vue
View file @ d2692446
<template>
<div class="min_full">
<!-- 图表统计-->
<el-drawer size='500px' title="图表统计" :visible.sync="drawer" :direction="'btt'">
<div class="full" style="padding: 20px;display: flex;">
<div id="sgwlpzhzBarCharts" class="flex1">
</div>
<div id="sgwlpzhzPieCharts" class="flex1">
</div>
</div>
</el-drawer>
<!-- 查询条件-->
<div class="search" v-condition>
<SearchButton :app='app'></SearchButton>
......@@ -7,8 +18,74 @@
<el-col :span="6" class="search-col">
<div class="search-item">
<span class="search-span">汇总方式:</span>
<RelSelect collapse-tags multiple style="width: 100%;" src='budgetms/sgwlpzhz/init/hzfs' filterable clearable
:match="{value:'id',label:'name'}" v-model='queryParams.hzfs'></RelSelect>
<RelSelect collapse-tags multiple style="width: 100%;" src='budgetms/sgwlpzhz/init/hzfs' filterable
clearable :match="{value:'id',label:'name'}" v-model='queryParams.hzfs'></RelSelect>
</div>
</el-col>
<el-col :span="6" class="search-col">
<div class="search-item">
<span class="search-span">利润中心:</span>
<RelSelect collapse-tags multiple style="width: 100%;" src='budgetms/lrzx/query' filterable clearable
:match="{value:'id',label:'jc'}" v-model='queryParams.lrzxid'></RelSelect>
</div>
</el-col>
<el-col :span="6" class="search-col">
<div class="search-item">
<span class="search-span">开始日期:</span>
<el-date-picker value-format="timestamp" v-model='queryParams.beginDate'></el-date-picker>
</div>
</el-col>
<el-col :span="6" class="search-col">
<div class="search-item">
<span class="search-span">截止日期:</span>
<el-date-picker value-format="timestamp" v-model='queryParams.endDate'></el-date-picker>
</div>
</el-col>
</el-row>
<el-row :gutter="20" class="search-row-1">
<el-col :span="6" class="search-col">
<div class="search-item">
<span class="search-span">一级分类:</span>
<RelSelect collapse-tags multiple style="width: 100%;" src='budgetms/xmfl/queryAllRoot' filterable clearable
:match="{value:'id',label:'showname'}" v-model='queryParams.yjxmflid'></RelSelect>
</div>
</el-col>
<el-col :span="6" class="search-col">
<div class="search-item">
<span class="search-span">二级分类:</span>
<RelSelect linkage :linkParams="{pid:queryParams.yjxmflid}" :params="{
pids:queryParams.yjxmflid.join()
}" collapse-tags multiple style="width: 100%;" src='budgetms/xmfl/queryAllMj' filterable clearable
:match="{value:'id',label:'name'}" v-model='queryParams.xmflid'></RelSelect>
</div>
</el-col>
<el-col :span="6" class="search-col">
<div class="search-item">
<span class="search-span">项目包:</span>
<RelSelect collapse-tags multiple style="width: 100%;" src='budgetms/xmgl/query' filterable clearable
:match="{value:'id',label:'name'}" v-model='queryParams.xmbid'></RelSelect>
</div>
</el-col>
<el-col :span="6" class="search-col">
<div class="search-item">
<span class="search-span">项目:</span>
<el-input v-model="queryParams.xmid"></el-input>
</div>
</el-col>
</el-row>
<el-row :gutter="20" class="search-row-1">
<el-col :span="6" class="search-col">
<div class="search-item">
<span class="search-span">资本/成本:</span>
<RelSelect collapse-tags multiple style="width: 100%;" src='budgetms/sgwlpz/init/zblx' filterable clearable
:match="{value:'id',label:'name'}" v-model='queryParams.zblx'></RelSelect>
</div>
</el-col>
<el-col :span="6" class="search-col">
<div class="search-item">
<span class="search-span">物资/服务:</span>
<RelSelect collapse-tags multiple style="width: 100%;" src='budgetms/sgwlpz/init/wzbz' filterable clearable
:match="{value:'id',label:'name'}" v-model='queryParams.wzbz'></RelSelect>
</div>
</el-col>
</el-row>
......@@ -20,6 +97,7 @@
<AddButton ref="add" :app='app'></AddButton>
<CopyButton ref="copy" :app='app'></CopyButton>
<EditButton ref="edit" :app='app'></EditButton>
<el-button size="small" type="primary" @click="doDrawer">生成图表</el-button>
<!-- <AttachFileButton :app='app' ></AttachFileButton> -->
<!-- 额外按钮-->
<!-- 表头设置 -->
......@@ -28,9 +106,9 @@
<!-- 表格-->
<div class="tablePagers">
<TablePager :multipleTrans="[
'hzfs'
]" @getData='getData' :ref="'TablePager'" :app='app' :query='query' @selectItem='selectItem' :operateButtons='false'
@getRow='getRow'>
'hzfs','lrzxid','yjxmflid','xmflid','xmbid','zblx','wzbz'
]" @getData='getData' :ref="'TablePager'" :app='app' :query='query' @selectItem='selectItem' fePage
:operateButtons='false' @getRow='getRow'>
</TablePager>
</div>
</div>
......@@ -47,48 +125,60 @@
import {
tableMixin
} from 'common'
import * as echarts from 'echarts'
import {
option
} from 'runjs';
const colorList = [
'#C1232B', '#B5C334', '#FCCE10', '#E87C25', '#27727B',
'#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD',
'#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0'
];
export default {
mixins: [tableMixin],
name: 'erpxmmxz',
/* 初始额外赋值*/
async mounted() {
/* 解决多选异步冲突*/
setTimeout(()=>{
this.$refs['TablePager'].pageQuery()
},400)
/* 初始化*/
},
watch: {
hzfs:{
deep:true,
immediate:true,
handler:function(val){
hzfs: {
deep: true,
immediate: true,
handler: function(val) {
/* 控制菜单栏*/
this.$nextTick(()=>{
if(this.$refs.TablePager&&this.$refs.TablePager.newGridList&&this.$refs.TablePager.newGridList.length>0){
this.$refs.TablePager.newGridList.forEach(item=>{
if(item.showKey){
if(val.indexOf(item.showKey)!=-1){
item.show=true
}else{
item.show=false
this.$nextTick(() => {
if (this.$refs.TablePager && this.$refs.TablePager.newGridList && this.$refs.TablePager.newGridList
.length > 0) {
this.$refs.TablePager.newGridList.forEach(item => {
if (item.showKey) {
if (val.indexOf(item.showKey) != -1) {
item.show = true
} else {
item.show = false
}
}
})
console.log( this.$refs.TablePager.newGridList)
console.log(this.$refs.TablePager.newGridList)
}
})
}
}
},
computed:{
hzfs(){
let hzfs=this.queryParams.hzfs
computed: {
hzfs() {
let hzfs = this.queryParams.hzfs
return hzfs
}
},
data() {
return {
barChart: null,
pieChart: null,
drawer: false,
/*需要的额外参数 */
showDialog: false,
DialogName: '',
......@@ -99,36 +189,362 @@
/* 查询参数*/
queryParams: {
hzfs: ['LRZX'],
lrzxid: [],
beginDate: new Date().getTime() - 1000 * 60 * 60 * 24 * 30,
endDate: new Date().getTime(),
yjxmflid: [],
xmflid: [],
xmbid: [],
xmid: '',
zblx: [],
wzbz: []
},
/* 表格标题对应参数*/
tableTitle: [
{title: "利润中心", field: "jc", fieldType: "ftString",width:192,showKey:"LRZX"},
{title: "部门编码", field: "xmbmcode", fieldType: "ftString",width:120,showKey:"BM",show:false},
{title: "部门", field: "xmbmname", fieldType: "ftString",width:120,showKey:"BM",show:false},
{title: "项目", field: "xmcode", fieldType: "ftString",width:60,showKey:"XM",show:false},
{title: "项目描述", field: "xmdesc", fieldType: "ftString",width:192,showKey:"XM",show:false},
{title: "科目编码", field: "mkmid", fieldType: "ftString",width:100,showKey:"KM",show:false},
{title: "科目", field: "kmname", fieldType: "ftString",width:120,showKey:"KM",show:false},
{title: "项目包", field: "xmbmc", fieldType: "ftString",width:192,showKey:"XMB",show:false},
{title: "年度", field: "year", fieldType: "int",align:"center",width:80,showKey:"YEAR",show:false},
{title: "月份", field: "month", fieldType: "int",align:"center",width:80,showKey:"MONTH",show:false},
{title: "一级项目分类", field: "yjxmname", fieldType: "ftString",width:120,showKey:"YJXMFL",show:false},
{title: "二级项目分类", field: "xmflName", fieldType: "ftString",width:120,showKey:"XMFL",show:false},
{title: "供应商编码", field: "gyscode", fieldType: "ftString",width:120,showKey:"GYS",show:false},
{title: "供应商", field: "gysname", fieldType: "ftString",width:192,showKey:"GYS",show:false},
{title: "物资/服务", field: "wzbz", fieldType: "ftString",width:120,showKey:"WZ", formatter: function (a,b,value) {
var map = {"Y": "物资", "N": "服务"};
tableTitle: [{
title: "利润中心",
field: "jc",
fieldType: "ftString",
width: 192,
showKey: "LRZX"
},
{
title: "部门编码",
field: "xmbmcode",
fieldType: "ftString",
width: 120,
showKey: "BM",
show: false
},
{
title: "部门",
field: "xmbmname",
fieldType: "ftString",
width: 120,
showKey: "BM",
show: false
},
{
title: "项目",
field: "xmcode",
fieldType: "ftString",
width: 60,
showKey: "XM",
show: false
},
{
title: "项目描述",
field: "xmdesc",
fieldType: "ftString",
width: 192,
showKey: "XM",
show: false
},
{
title: "科目编码",
field: "mkmid",
fieldType: "ftString",
width: 100,
showKey: "KM",
show: false
},
{
title: "科目",
field: "kmname",
fieldType: "ftString",
width: 120,
showKey: "KM",
show: false
},
{
title: "项目包",
field: "xmbmc",
fieldType: "ftString",
width: 192,
showKey: "XMB",
show: false
},
{
title: "年度",
field: "year",
fieldType: "int",
align: "center",
width: 80,
showKey: "YEAR",
show: false
},
{
title: "月份",
field: "month",
fieldType: "int",
align: "center",
width: 80,
showKey: "MONTH",
show: false
},
{
title: "一级项目分类",
field: "yjxmname",
fieldType: "ftString",
width: 120,
showKey: "YJXMFL",
show: false
},
{
title: "二级项目分类",
field: "xmflName",
fieldType: "ftString",
width: 120,
showKey: "XMFL",
show: false
},
{
title: "供应商编码",
field: "gyscode",
fieldType: "ftString",
width: 120,
showKey: "GYS",
show: false
},
{
title: "供应商",
field: "gysname",
fieldType: "ftString",
width: 192,
showKey: "GYS",
show: false
},
{
title: "物资/服务",
field: "wzbz",
fieldType: "ftString",
width: 120,
showKey: "WZ",
formatter: function(a, b, value) {
var map = {
"Y": "物资",
"N": "服务"
};
var text = map[value];
return text || "";
},show:false
},
{title: "资本/成本", field: "zblx", fieldType: "ftString",width:120,showKey:"ZB",show:false},
{title: "项目金额", field: "xmje", fieldType: "float", fieldType: "float",props:"decimal:6"},
show: false
},
{
title: "资本/成本",
field: "zblx",
fieldType: "ftString",
width: 120,
showKey: "ZB",
show: false
},
{
title: "项目金额",
field: "xmje",
fieldType: "float",
fieldType: "float",
props: "decimal:6"
},
]
}
},
methods: {
/* initChart*/
doDrawer() {
this.drawer = true
/* 异步初始化echart对象*/
this.$nextTick(() => {
/* initbar initpie*/
this.initbar()
this.initpie()
})
},
mergeData(predata, keys, xNumber, isFifter) {
function sorBy(props) {
return function(a, b) {
return b[props] - a[props];
}
}
var data = [...predata];
let list = [];
let key1 = keys[0];;
data.map(item => {
var el = {
name: item['xvalue']
};
if (!isFifter) {
el[key1] = parseFloat(item[key1]).toFixed(2);
list.push(el)
} else {
if (item[key1] && item[key2]) {
el[key1] = parseFloat(item[key1]).toFixed(2);
list.push(el)
}
}
})
list.sort(sorBy(key1))
let num1 = 0;
list.map((item, index) => {
if (index > xNumber) {
num1 += item[key1];
}
});
if (data.length > xNumber) {
list.length = xNumber;
var qtEl = {
name: "其他"
};
qtEl[key1] = parseFloat(num1).toFixed(2);
list.push(qtEl)
}
return list
},
initbar() {
let title = []
let data = []
/* 测试*/
this.mergeData([...this.tabData], ["xmje"], 9).forEach(function(item, i) {
data.push(item.xmje);
title.push(item.name);
});
let that = this
let edom = echarts.init(document.getElementById('sgwlpzhzBarCharts'))
let option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true,
},
yAxis: {
type: 'value',
boundaryGap: [0, 0.01],
},
xAxis: {
type: 'category',
data: title,
axisLabel: {
formatter: function(value) {
// 自定义格式化函数
var maxWidth = 30; // 设置最大宽度
if (value.length > maxWidth) {
return value.slice(0, maxWidth) + '...'; // 超过最大宽度时显示省略号
}
return value;
}
}
},
series: [{
type: 'bar',
label: {
show: true,
position: 'top'
},
data: data,
itemStyle: {
normal: {
color: function(params) {
return colorList[params.dataIndex]
},
label: {
show: true,
position: 'top',
// formatter: '{c}'
formatter: '{c}'
}
}
},
}],
};
edom.setOption(option)
},
initpie() {
let data = []
this.mergeData([...this.tabData], ["xmje"], 9).forEach(function(item, i) {
data.push({
name: item.name,
value: item.xmje || 0
})
});
let edom = echarts.init(document.getElementById('sgwlpzhzPieCharts'))
let option = {
legend: {
show: true
},
series: [{
type: 'pie',
radius: ['40%', '60%'],
avoidLabelOverlap: true,
itemStyle: {
borderColor: '#fff',
borderWidth: 2
},
color: colorList,
label: {
// alignTo: 'labelLine', // ! 文字对齐方式
formatter: function(e) {
let {
data: {
value,
name,
percent
},
} = e;
return `{x|}{a|${name}}\n{b|${value}}`;
},
minMargin: 5,
lineHeight: 15,
rich: {
x: {
width: 10,
height: 10,
backgroundColor: 'inherit',
borderRadius: 5
},
a: {
fontSize: 14,
color: 'inherit',
padding: [0, 20, 0, 8]
},
b: {
fontSize: 12,
align: 'left',
color: '#666666',
padding: [8, 0, 0, 18]
},
c: {
fontSize: 12,
align: 'left',
color: '#666666',
padding: [8, 0, 0, 8]
},
},
},
data: data,
}, ],
};
edom.setOption(option)
},
/* 基础查询*/
query: doQuery,
/* 基础增*/
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment