Skip to content

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

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

parent a75f4aa4
Hide whitespace changes
Inline Side-by-side
Showing with 550 additions and 134 deletions
src/views/hzcxbb/erpxmmxz/index.vue
View file @ d2692446
<template> <template>
<div class="min_full"> <div class="min_full">
<!-- 查询条件--> <!-- 图表统计-->
<div class="search" v-condition> <el-drawer size='500px' title="图表统计" :visible.sync="drawer" :direction="'btt'">
<SearchButton :app='app'></SearchButton> <div class="full" style="padding: 20px;display: flex;">
<el-row :gutter="20" class="search-row-1"> <div id="sgwlpzhzBarCharts" class="flex1">
<el-col :span="6" class="search-col">
<div class="search-item"> </div>
<span class="search-span">汇总方式:</span> <div id="sgwlpzhzPieCharts" class="flex1">
<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>
</div> </div>
</el-col> </el-drawer>
</el-row> <!-- 查询条件-->
</div> <div class="search" v-condition>
<!-- 按钮操作--> <SearchButton :app='app'></SearchButton>
<el-row class="tool-bar"> <el-row :gutter="20" class="search-row-1">
<ToolButton :app='app'></ToolButton> <el-col :span="6" class="search-col">
<ViewButton ref="view" :app='app'></ViewButton> <div class="search-item">
<AddButton ref="add" :app='app'></AddButton> <span class="search-span">汇总方式:</span>
<CopyButton ref="copy" :app='app'></CopyButton> <RelSelect collapse-tags multiple style="width: 100%;" src='budgetms/sgwlpzhz/init/hzfs' filterable
<EditButton ref="edit" :app='app'></EditButton> clearable :match="{value:'id',label:'name'}" v-model='queryParams.hzfs'></RelSelect>
<!-- <AttachFileButton :app='app' ></AttachFileButton> --> </div>
<!-- 额外按钮--> </el-col>
<!-- 表头设置 --> <el-col :span="6" class="search-col">
<!-- 权限--> <div class="search-item">
</el-row> <span class="search-span">利润中心:</span>
<!-- 表格--> <RelSelect collapse-tags multiple style="width: 100%;" src='budgetms/lrzx/query' filterable clearable
<div class="tablePagers"> :match="{value:'id',label:'jc'}" v-model='queryParams.lrzxid'></RelSelect>
<TablePager :multipleTrans="[ </div>
'hzfs' </el-col>
]" @getData='getData' :ref="'TablePager'" :app='app' :query='query' @selectItem='selectItem' :operateButtons='false' <el-col :span="6" class="search-col">
@getRow='getRow'> <div class="search-item">
</TablePager> <span class="search-span">开始日期:</span>
</div> <el-date-picker value-format="timestamp" v-model='queryParams.beginDate'></el-date-picker>
</div> </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>
</div>
<!-- 按钮操作-->
<el-row class="tool-bar">
<ToolButton :app='app'></ToolButton>
<ViewButton ref="view" :app='app'></ViewButton>
<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> -->
<!-- 额外按钮-->
<!-- 表头设置 -->
<!-- 权限-->
</el-row>
<!-- 表格-->
<div class="tablePagers">
<TablePager :multipleTrans="[
'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>
</template> </template>
<script> <script>
import { import {
doQuery, doQuery,
doAdd, doAdd,
doUpdate, doUpdate,
doDelete doDelete
} from '@/api/hzcxbb/erpxmmxz.js'; } from '@/api/hzcxbb/erpxmmxz.js';
/* edit页面*/ /* edit页面*/
import Edit from './edit' import Edit from './edit'
import { import {
tableMixin tableMixin
} from 'common' } from 'common'
export default { import * as echarts from 'echarts'
mixins: [tableMixin], import {
name: 'erpxmmxz', option
/* 初始额外赋值*/ } from 'runjs';
async mounted() { const colorList = [
/* 解决多选异步冲突*/ '#C1232B', '#B5C334', '#FCCE10', '#E87C25', '#27727B',
setTimeout(()=>{ '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD',
this.$refs['TablePager'].pageQuery() '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0'
},400) ];
}, export default {
mixins: [tableMixin],
name: 'erpxmmxz',
/* 初始额外赋值*/
async mounted() {
this.$refs['TablePager'].pageQuery()
/* 初始化*/
},
watch: { watch: {
hzfs:{ hzfs: {
deep:true, deep: true,
immediate:true, immediate: true,
handler:function(val){ handler: function(val) {
/* 控制菜单栏*/ /* 控制菜单栏*/
this.$nextTick(()=>{ this.$nextTick(() => {
if(this.$refs.TablePager&&this.$refs.TablePager.newGridList&&this.$refs.TablePager.newGridList.length>0){ if (this.$refs.TablePager && this.$refs.TablePager.newGridList && this.$refs.TablePager.newGridList
this.$refs.TablePager.newGridList.forEach(item=>{ .length > 0) {
if(item.showKey){ this.$refs.TablePager.newGridList.forEach(item => {
if(val.indexOf(item.showKey)!=-1){ if (item.showKey) {
item.show=true if (val.indexOf(item.showKey) != -1) {
}else{ item.show = true
item.show=false } else {
} item.show = false
} }
}) }
console.log( this.$refs.TablePager.newGridList) })
} console.log(this.$refs.TablePager.newGridList)
}
}) })
} }
} }
}, },
computed:{ computed: {
hzfs(){ hzfs() {
let hzfs=this.queryParams.hzfs let hzfs = this.queryParams.hzfs
return hzfs return hzfs
} }
}, },
data() { data() {
return { return {
/*需要的额外参数 */ barChart: null,
showDialog: false, pieChart: null,
DialogName: '', drawer: false,
type: '', /*需要的额外参数 */
DialogTitle: '', showDialog: false,
/* 基础url*/ DialogName: '',
baseUrl: 'budgetms/sgwlpzhz', type: '',
/* 查询参数*/ DialogTitle: '',
queryParams: { /* 基础url*/
hzfs: ['LRZX'], baseUrl: 'budgetms/sgwlpzhz',
}, /* 查询参数*/
queryParams: {
/* 表格标题对应参数*/ hzfs: ['LRZX'],
tableTitle: [ lrzxid: [],
{title: "利润中心", field: "jc", fieldType: "ftString",width:192,showKey:"LRZX"}, beginDate: new Date().getTime() - 1000 * 60 * 60 * 24 * 30,
{title: "部门编码", field: "xmbmcode", fieldType: "ftString",width:120,showKey:"BM",show:false}, endDate: new Date().getTime(),
{title: "部门", field: "xmbmname", fieldType: "ftString",width:120,showKey:"BM",show:false}, yjxmflid: [],
{title: "项目", field: "xmcode", fieldType: "ftString",width:60,showKey:"XM",show:false}, xmflid: [],
{title: "项目描述", field: "xmdesc", fieldType: "ftString",width:192,showKey:"XM",show:false}, xmbid: [],
{title: "科目编码", field: "mkmid", fieldType: "ftString",width:100,showKey:"KM",show:false}, xmid: '',
{title: "科目", field: "kmname", fieldType: "ftString",width:120,showKey:"KM",show:false}, zblx: [],
{title: "项目包", field: "xmbmc", fieldType: "ftString",width:192,showKey:"XMB",show:false}, wzbz: []
{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}, tableTitle: [{
{title: "供应商编码", field: "gyscode", fieldType: "ftString",width:120,showKey:"GYS",show:false}, title: "利润中心",
{title: "供应商", field: "gysname", fieldType: "ftString",width:192,showKey:"GYS",show:false}, field: "jc",
{title: "物资/服务", field: "wzbz", fieldType: "ftString",width:120,showKey:"WZ", formatter: function (a,b,value) { fieldType: "ftString",
var map = {"Y": "物资", "N": "服务"}; width: 192,
var text = map[value]; showKey: "LRZX"
return text || ""; },
},show:false {
}, title: "部门编码",
{title: "资本/成本", field: "zblx", fieldType: "ftString",width:120,showKey:"ZB",show:false}, field: "xmbmcode",
{title: "项目金额", field: "xmje", fieldType: "float", fieldType: "float",props:"decimal:6"}, 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"
},
] ]
} }
}, },
methods: { methods: {
/* 基础查询*/ /* initChart*/
query: doQuery, doDrawer() {
/* 基础增*/ this.drawer = true
apiAdd: doAdd, /* 异步初始化echart对象*/
/* 基础更新*/ this.$nextTick(() => {
apiUpdate: doUpdate,
/* 删除操作*/ /* initbar initpie*/
apiDelete: doDelete, this.initbar()
/* 初始化赋值操作*/ this.initpie()
init() {
})
}
}, },
components: { mergeData(predata, keys, xNumber, isFifter) {
Edit, 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,
/* 基础增*/
apiAdd: doAdd,
/* 基础更新*/
apiUpdate: doUpdate,
/* 删除操作*/
apiDelete: doDelete,
/* 初始化赋值操作*/
init() {
}
},
components: {
Edit,
}
}
</script> </script>
<style scoped> <style scoped>
......
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