Commit 0b82f9e4 authored by 李苏's avatar 李苏 💬

预算申报表 部分/

parent 34e6920b
import request from 'common/src/utils/request'
/* query */
export function dpzsQuery(query) {
return request({
url: '/budgetms/dpzs/query',
method: 'post',
data: query||{}
})
}
import request from 'common/src/utils/request'
/* query */
export function doQuery(query) {
return request({
url: '/budgetms/yssqmxrep/query',
method: 'post',
data: query||{}
})
}
export function doAdd(query) {
return request({
url: '/budgetms/yssqmxrep/add',
method: 'post',
data: query||{}
})
}
export function doUpdate(query) {
return request({
url: '/budgetms/yssqmxrep/update',
method: 'post',
data: query||{}
})
}
export function doDelete(query) {
return request({
url: '/budgetms/yssqmxrep/delete',
method: 'post',
data: query||{}
})
}
export function title(query) {
return request({
url: '/budgetms/yssqsp/init/title',
method: 'post',
data: query||{}
})
}
......@@ -252,6 +252,32 @@ export const powerRoutes=[
},
name:'xmznjh',
path:"xmznjh"
},
{
component:'hzcxbb/kshdp/index',
hidden:false,
meta:{
"title": "可视化大屏",
"icon": "",
"noCache": false,
"link": null,
"mkid":901020300,
},
name:'kshdp',
path:"kshdp"
},
{
component:'hzcxbb/ysspzl/index',
hidden:false,
meta:{
"title": "预算申报及下达总览",
"icon": "",
"noCache": false,
"link": null,
"mkid":901040100,
},
name:'ysspzl',
path:"ysspzl"
}
]
},
......@@ -297,7 +323,7 @@ export const constantRoutes = [
children: [
{
path: 'index',
component: () => import('@/views/erpxmmxzgl/xmmxcx/index'),
component: () => import('@/views/hzcxbb/ysspzl/index'),
name: 'Index',
// redirect: '/user/profile',
meta: { title: '首页', icon: 'dashboard', affix: true }
......
<template>
<div class="min_full kshdp">
<!-- 菜单-->
<el-drawer
title="相关搜索"
:visible.sync="drawer"
size="30%">
<div style="padding: 10;">
<!-- -->
<el-row :gutter="20" class="search-row-1">
<el-col :span="24" 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>
</div>
</el-col>
<el-col :span="24" class="search-col">
<div class="search-item">
<span class="search-span">开始日期:</span>
<el-date-picker style="width: 100%;" value-format="timestamp" v-model='queryParams.beginDate'></el-date-picker>
</div>
</el-col>
<el-col :span="24" class="search-col">
<div class="search-item">
<span class="search-span">截止日期:</span>
<el-date-picker style="width: 100%;" value-format="timestamp" v-model='queryParams.endDate'></el-date-picker>
</div>
</el-col>
<el-col :span="24" 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="24" 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="24" 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="24" 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="24" 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-drawer>
<el-tabs tab-position="left">
<div @click="drawer=true" v-show="!loading" class="el-menu">
相关搜索
</div>
<el-tab-pane label="总览">
<div v-loading="loading" element-loading-text="正在请求中..." class="min_full noborder ofauto ">
<div id="dpzsCharts" v-echartResize="()=>{
dpzsCharts.resize()
}" class="full">
</div>
</div>
</el-tab-pane>
<el-tab-pane label="资本/成本">
<div class="min_full noborder ">
</div>
</el-tab-pane>
<el-tab-pane label="资本/成本2">
</el-tab-pane>
<el-tab-pane label="资本/成本3">
</el-tab-pane>
<el-tab-pane label="物资/服务">
</el-tab-pane>
<el-tab-pane label="物资/服务2">
</el-tab-pane>
<el-tab-pane label="物资/服务3">
</el-tab-pane>
<el-tab-pane label="一级项目分类">
</el-tab-pane>
<el-tab-pane label="一级项目分类2">
</el-tab-pane>
<el-tab-pane label="一级项目分类3">
</el-tab-pane>
<el-tab-pane label="二级项目分类">
</el-tab-pane>
<el-tab-pane label="二级项目分类2">
</el-tab-pane>
<el-tab-pane label="二级项目分类3">
</el-tab-pane>
<el-tab-pane label="科目">
</el-tab-pane>
<el-tab-pane label="科目3">
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import echarts from "echarts";
import {
dpzsQuery
} from '@/api/hzcxbb/kshdp.js';
function fullScreen(element) {
const elem = element || document.documentElement;
if (elem.webkitRequestFullScreen) {
elem.webkitRequestFullScreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.requestFullScreen) {
elem.requestFullscreen();
} else if (elem.msExitFullscreen) {
elem.msExitFullscreen();
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
} else if (typeof window.ActiveXObject !== "undefined") { //for Internet Explorer
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
}
export default {
mounted() {
this.$nextTick(() => {
this.dpzsCharts = echarts.init(document.getElementById('dpzsCharts'))
document.getElementById('dpzsCharts').addEventListener('dblclick', function(e) {
fullScreen(document.getElementById('dpzsCharts'))
}, false);
this.initdpzsCharts()
})
},
data() {
return {
drawer: false,
loading: true,
queryParams: {
hzfs: ["LRZX"],
beginDate: 1546272000000,
endDate: 1690732800000,
lrzxid:[],
yjxmflid:[],
xmflid:[],
zblx:[],
wzbz:[]
},
dpzsCharts: null,
}
},
methods: {
initdpzsCharts() {
var showTitle = {};
this.loading=true
let queryParams=_.cloneDeep(this.queryParams)
for (let key in queryParams) {
if (Array.isArray(queryParams[key])) {
queryParams[key]= queryParams[key].join()
}
}
dpzsQuery(queryParams).then(res => {
if (res.success) {
this.loading=false
var response = res.data.records;
var hours = response.dateValue;
var option = {
tooltip: {
position: 'left',
formatter: function(param) {
var value = param.value;
return param.marker + param.name + ":&nbsp;&nbsp;" + param.value[1];
}
},
title: [],
singleAxis: [],
series: []
};
var number = 0;
var datesArray = [];
if (hours.length <= 12 && hours.length > 0) {
datesArray = getAfter12Months(hours[0]);
} else {
datesArray = hours;
}
if (response["xseriesList"]) {
number = response["xseriesList"].length;
response["xseriesList"].forEach(function(day, idx) {
var list = day["sdValueList"];
var s_data = [];
list.forEach(function(item, i) {
s_data.push([i, item])
});
showTitle[idx] = day["sdLabel"];
let title = day["sdLabel"];
if (day["sdLabel"].length > 10) {
title = day["sdLabel"].substr(0, 10) + '...';
}
if (number <= 10) {
option.title.push({
triggerEvent: true,
textBaseline: 'middle',
top: (idx + 0.5) * 100 / number + '%',
text: title,
subtextStyle: {
show: false
},
textStyle: {
fontSize: 12,
},
});
option.singleAxis.push({
left: 150,
type: 'category',
boundaryGap: false,
data: datesArray,
top: (idx * 100 / number + 5) + '%',
height: (100 / number - 10) + '%',
axisLabel: {
// interval: 2
},
// splitNumber:12
});
} else {
option.title.push({
triggerEvent: true,
textBaseline: 'middle',
top: (idx + 0.5) * 10,
text: title,
textStyle: {
fontSize: 12,
},
});
option.singleAxis.push({
left: 150,
type: 'category',
boundaryGap: false,
data: datesArray,
top: idx * 100 + 5,
height: 85,
axisLabel: {
// interval: 0
},
});
}
option.series.push({
singleAxisIndex: idx,
coordinateSystem: 'singleAxis',
type: 'scatter',
data: s_data,
symbolSize: function(dataItem) {
return Math.sqrt(dataItem[1]) * 0.5;
}
});
});
this.dpzsCharts.setOption(option, true);
}
}
})
}
}
}
</script>
<style scoped>
.kshdp {
padding: 5px;
}
.search-span{
text-align: left;
}
/deep/ .el-tabs--left .el-tabs__item.is-left {
text-align: center;
padding: 0 15px;
font-size: 13px;
/* color: #666; */
}
.noborder {
border: 0px solid #fff;
}
.ofauto{
overflow: auto;
}
/* Webkit 浏览器(如 Chrome、Safari)下的滚动条样式 */
.ofauto::-webkit-scrollbar {
width: 0.5em;
}
.ofauto::-webkit-scrollbar-thumb {
background-color: transparent;
}
.ofauto::-webkit-scrollbar-track {
background-color: transparent;
}
.full{
background-color: #fff;
}
.el-menu{
opacity: 0.8;
font-size: 12px;
z-index: 100;
writing-mode: vertical-rl;
text-orientation: upright;
white-space: nowrap;
text-align: center;
position: absolute;
right: 0px;
top: 0;
height: 100px;
padding-left: 5px;
padding-right: 5px;
color: #fff;
background-color: cornflowerblue;
cursor: pointer;
}
.el-menu:hover{
opacity: 1;
transform: scale(1.02);
}
</style>
<template>
<div class="min_full">
<!-- 查询条件-->
<div class="search" v-condition>
<SearchButton :app='app'></SearchButton>
<el-row :gutter="20" class="search-row-1">
<el-col :span="8" class="search-col">
<div class="search-item">
<span class="search-span">申请公司:</span>
<RelSelect @getAllData='getAlldata' collapse-tags multiple style="width: 100%;" src='budgetms/common/sjbm/query' filterable clearable
:match="{value:'id',label:'bmmc'}" v-model='queryParams.sjbmids'></RelSelect>
</div>
</el-col>
<el-col :span="8" class="search-col">
<div class="search-item">
<span class="search-span">申请部门:</span>
<RelSelect collapse-tags multiple linkage :linkParams="{sjbmids:queryParams.sjbmids.join()}"
style="width: 100%;" src='budgetms/common/bm/query' filterable clearable
:match="{value:'id',label:'bmmc'}" v-model='queryParams.chooseBmids'></RelSelect>
</div>
</el-col>
<el-col :span="8" class="search-col">
<div class="search-item">
<el-checkbox @change="gszs" true-label='Y' false-label='N' v-model="queryParams.showSjbm">按公司展示</el-checkbox>
</div>
</el-col>
</el-row>
</div>
<!-- 按钮操作-->
<el-row class="tool-bar" style="text-align: center;">
<!-- sapn-->
<span class="title">{{title}}</span>
<ToolButton :app='app'></ToolButton>
</el-row>
<!-- 表格-->
<div class="tablePagers">
<TablePager :beforePageQuery='apiTitle' :spanMethod='spanMethod' @getData='getData' :ref="'TablePager'" :app='app' :query='query' @selectItem='selectItem' :operateButtons='false' :showPagination='false'
:multipleTrans="[
'sjbmids','chooseBmids'
]" @getRow='getRow'>
</TablePager>
</div>
<div v-html="remark" class="remark">
</div>
</div>
</template>
<script>
import {
doQuery,
doAdd,
doUpdate,
doDelete,
title as initIitle
} from '@/api/hzcxbb/ysspzl.js';
import {
tableMixin
} from 'common'
export default {
mixins: [tableMixin],
name: 'ysspzl',
/* 初始额外赋值*/
async mounted() {
this.$refs['TablePager'].pageQuery()
},
data() {
return {
title:'',
remark:'',
spanArr:[],
/*需要的额外参数 */
showDialog: false,
DialogName: '',
type: '',
DialogTitle: '',
/* 基础url*/
baseUrl: 'budgetms/yssqmxrep',
/* 查询参数*/
queryParams: {
sjbmids: [],
chooseBmids: [],
showSjbm: 'N'
},
/* 特殊格式表格*/
tableTitle: [{
label: "成本大类",
prop: "flname",
fieldType: "ftString",
width: 160
},
{
title: "成本预算科目",
field: "fyxmname",
fieldType: "ftString",
width: 160
},
{
title: "申报信息",
fieldType: "ftString",
field: "sbxx",
width: 160,
subtitle: [{
prop: "wsxqje",
label: "申报数",
width: "120"
},
{
prop: "ysnum",
label: "申报条数",
width: "120"
},
{
prop: "fwssdje",
label: "审批中",
width: "120"
},
{
prop: "cwsje",
label: "已完成",
width: "120"
}
]
},
{
title: "成本预算科目",
field: "sbxx",
width: "120",
subtitle: [{
prop: "wssdxqje",
label: "审定数",
width: "120"
},
{
prop: "fwssdje",
label: "审批中",
width: "120"
},
{
prop: "cwssdje",
label: "已完成",
width: "120"
},
]
},
{
title: "审减",
field: "wssjje",
fieldType: "float",
width: 120,
},
{
title: "当年支出",
field: "xhys",
fieldType: "float",
width: 120
},
{
title: "预算完成率",
field: "yswcl",
fieldType: "percent",
width: 120
},
{
title: "可用余额",
field: "kyye",
fieldType: "float"
}
]
}
},
watch:{
tabData:{
handler(newVal) {
this.getpan()
},
deep: true // 开启深度监听
},
},
methods: {
apiTitle(){
initIitle(this.queryParams).then(res=>{
if(res.success){
this.title=res.data.records.title
this.remark=res.data.records.remark
}
})
},
getpan(){
let redata=this.tabData.map(item=>{
return item.flname
})
/* 重置spanArr*/
this.spanArr=[]
let pos=0
redata.reduce((old, cur, i) => {
// old 上一个元素 cur 当前元素 i 索引
if (i === 0) {
// 第一次判断先增加一个 1 占位 ,索引为0
this.spanArr.push(1)
pos = 0
} else {
if (cur === old) {
this.spanArr[pos] += 1
this.spanArr.push(0)
} else {
this.spanArr.push(1)
pos = i
}
}
return cur
}, {})
},
spanMethod({ row, column, rowIndex, columnIndex }) {
if (column.property=='flname') {
const _row = this.spanArr[rowIndex]
const _col = _row > 0 ? 1 : 0
return {
rowspan: _row,
colspan: _col
}
}
},
/* 基础查询*/
query: doQuery,
/* 基础增*/
apiAdd: doAdd,
/* 基础更新*/
apiUpdate: doUpdate,
/* 删除操作*/
apiDelete: doDelete,
getAlldata(gsOption){
this.gsOptionMap={}
gsOption.forEach(item=>{
this.gsOptionMap[item.id]=item.bmmc
})
},
/* 初始化赋值操作*/
gszs(val){
/* 是否按公司展示*/
if(val=='Y'){
/* 拓展表格列头*/
/* 构建新表头*/
this.queryParams.sjbmids.forEach(id=>{
let obj={
label: this.gsOptionMap[id],
field: id,
width: 160,
subtitle:[
{
prop: id+'W',
label: "申报数",
width: "120"
},
{
prop: id+'S',
label: "审定数",
width: "120"
},
{
prop: id+'N',
label: "申报条数",
width: "120"
},
]
}
/* */
this.tableTitle.push(obj)
this.$refs['TablePager'].setGrid({
reload:false
})
this.$refs['TablePager'].pageQuery()
})
}else{
/* 删除表格列头*/
this.tableTitle.forEach((item,index)=>{
if(this.queryParams.sjbmids.indexOf(item.field)!=-1){
this.tableTitle.splice(index, 1);
}
})
this.$refs['TablePager'].setGrid(
{
reload:false
})
this.$refs['TablePager'].pageQuery()
}
}
},
components: {
}
}
</script>
<style scoped>
.title{
text-align: center;
font-size: 18px;
line-height: 30px;
color: #222;
font-weight: 800;
}
.remark{
text-align: right;
height: 40px;
line-height: 17px;
font-size: 12px;
color: #666;
padding-right: 20px;
white-space: pre-wrap;
}
</style>
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