Skip to content

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

预算执行分析 功能 图表

parent b9f67503
Hide whitespace changes
Inline Side-by-side
Showing with 1898 additions and 784 deletions
src/api/sbysjsp/yszxfx.js 0 → 100644
View file @ 59998b94
import request from 'common/src/utils/request'
/* query */
export function doQuery(query) {
return request({
url: 'hafms/yszxfxlog/query',
method: 'post',
data: query||{}
})
}
export function doDelete(query) {
return request({
url: '/hafms/yszxfxlog/delete',
method: 'post',
data: query||{}
})
}
export function doQueryDetail(query){
return request({
url:'hafms/yszxfxlog/queryDetail',
method: 'post',
data: query||{}
})
}
src/router/index.js
View file @ 59998b94
...@@ -27,93 +27,97 @@ import Layout from '@/layout' ...@@ -27,93 +27,97 @@ import Layout from '@/layout'
activeMenu: '/system/user' // 当路由设置了该属性，则会高亮相对应的侧边栏。 activeMenu: '/system/user' // 当路由设置了该属性，则会高亮相对应的侧边栏。
} }
*/ */
export const powerRoutes=[ export const powerRoutes = [{
{
path: '/jccspz', path: '/jccspz',
component: 'Layout', component: 'Layout',
hidden: false, hidden: false,
alwaysShow:true, alwaysShow: true,
redirect: 'ysflZbdl', redirect: 'ysflZbdl',
meta: {title: "基础数据", icon: "fa-cog", noCache: false, link: null,mkid:901010000}, meta: {
children: [ title: "基础数据",
{ icon: "fa-cog",
component:'jccspz/ysflZbdl/index', noCache: false,
hidden:false, link: null,
meta:{ mkid: 901010000
},
children: [{
component: 'jccspz/ysflZbdl/index',
hidden: false,
meta: {
"title": "预算分类", "title": "预算分类",
"icon": "", "icon": "",
"noCache": false, "noCache": false,
"link": null, "link": null,
"mkid":901001000, "mkid": 901001000,
},
name: 'ysflZbdl',
path: "ysflZbdl"
}, },
name:'ysflZbdl', // {
path:"ysflZbdl" // component:'jccspz/xqsxZbxl/index',
}, // hidden:false,
// { // meta:{
// component:'jccspz/xqsxZbxl/index', // "title": "需求事项",
// hidden:false, // "icon": "",
// meta:{ // "noCache": false,
// "title": "需求事项", // "link": null,
// "icon": "", // "mkid":901010600,
// "noCache": false, // },
// "link": null, // name:'xqsxZbxl',
// "mkid":901010600, // path:"xqsxZbxl"
// }, // },
// name:'xqsxZbxl', {
// path:"xqsxZbxl" component: 'jccspz/erpKjkm/index',
// }, hidden: false,
{ meta: {
component:'jccspz/erpKjkm/index',
hidden:false,
meta:{
"title": "会计科目", "title": "会计科目",
"icon": "", "icon": "",
"noCache": false, "noCache": false,
"link": null, "link": null,
"mkid":901010200, "mkid": 901010200,
},
name: 'erpKjkm',
path: "erpKjkm"
}, },
name:'erpKjkm', {
path:"erpKjkm" component: 'jccspz/fymxwd/index',
}, hidden: false,
{ meta: {
component:'jccspz/fymxwd/index',
hidden:false,
meta:{
"title": "费用明细维度", "title": "费用明细维度",
"icon": "", "icon": "",
"noCache": false, "noCache": false,
"link": null, "link": null,
"mkid":901010700, "mkid": 901010700,
},
name: 'fymxwd',
path: "fymxwd"
}, },
name:'fymxwd', // {
path:"fymxwd" // component:'jccspz/zbfs/index',
}, // hidden:false,
// { // meta:{
// component:'jccspz/zbfs/index', // "title": "中标方式",
// hidden:false, // "icon": "",
// meta:{ // "noCache": false,
// "title": "中标方式", // "link": null,
// "icon": "", // "mkid":901030320,
// "noCache": false, // },
// "link": null, // name:'zbfs',
// "mkid":901030320, // path:"zbfs"
// }, // },
// name:'zbfs', {
// path:"zbfs" component: 'jccspz/xmbwh/index',
// }, hidden: false,
{ meta: {
component:'jccspz/xmbwh/index',
hidden:false,
meta:{
"title": "项目包维护", "title": "项目包维护",
"icon": "", "icon": "",
"noCache": false, "noCache": false,
"link": null, "link": null,
"mkid":901010300, "mkid": 901010300,
}, },
name:'xmbwh', name: 'xmbwh',
path:"xmbwh" path: "xmbwh"
} }
] ]
}, },
/* ERP项目明细账管理*/ /* ERP项目明细账管理*/
...@@ -121,49 +125,54 @@ export const powerRoutes=[ ...@@ -121,49 +125,54 @@ export const powerRoutes=[
path: '/erpxmmxzgl', path: '/erpxmmxzgl',
component: 'Layout', component: 'Layout',
hidden: false, hidden: false,
alwaysShow:true, alwaysShow: true,
redirect: 'xmmxcx', redirect: 'xmmxcx',
meta: {title: "项目明细账管理", icon: "fa-cog", noCache: false, link: null,mkid:901020000}, meta: {
children: [ title: "项目明细账管理",
{ icon: "fa-cog",
component:'erpxmmxzgl/xmmxcx/index', noCache: false,
hidden:false, link: null,
meta:{ mkid: 901020000
},
children: [{
component: 'erpxmmxzgl/xmmxcx/index',
hidden: false,
meta: {
"title": "项目信息", "title": "项目信息",
"icon": "", "icon": "",
"noCache": false, "noCache": false,
"link": null, "link": null,
"mkid":901010400, "mkid": 901010400,
},
name: 'xmmxcx',
path: "xmmxcx"
}, },
name:'xmmxcx', {
path:"xmmxcx" component: 'erpxmmxzgl/erpxmmxz/index',
}, hidden: false,
{ meta: {
component:'erpxmmxzgl/erpxmmxz/index',
hidden:false,
meta:{
"title": "项目明细账", "title": "项目明细账",
"icon": "", "icon": "",
"noCache": false, "noCache": false,
"link": null, "link": null,
"mkid":901020100, "mkid": 901020100,
},
name: 'erpxmmxz',
path: "erpxmmxz"
}, },
name:'erpxmmxz', {
path:"erpxmmxz" component: 'erpxmmxzgl/xhzl/index',
}, hidden: false,
{ meta: {
component:'erpxmmxzgl/xhzl/index',
hidden:false,
meta:{
"title": "消耗总览（定期导入）", "title": "消耗总览（定期导入）",
"icon": "", "icon": "",
"noCache": false, "noCache": false,
"link": null, "link": null,
"mkid":901030340, "mkid": 901030340,
}, },
name:'xhzl', name: 'xhzl',
path:"xhzl" path: "xhzl"
} }
] ]
}, },
/* 预算申报及审批*/ /* 预算申报及审批*/
...@@ -171,102 +180,121 @@ export const powerRoutes=[ ...@@ -171,102 +180,121 @@ export const powerRoutes=[
path: '/sbysjsp', path: '/sbysjsp',
component: 'Layout', component: 'Layout',
hidden: false, hidden: false,
alwaysShow:true, alwaysShow: true,
redirect: 'yssbkfsz', redirect: 'yssbkfsz',
meta: {title: "预算申报", icon: "fa-cog", noCache: false, link: null,mkid:901030000}, meta: {
title: "预算申报",
icon: "fa-cog",
noCache: false,
link: null,
mkid: 901030000
},
children: [ children: [
{ {
component:'sbysjsp/yssq/index', component: 'sbysjsp/yssq/index',
hidden:false, hidden: false,
meta:{ meta: {
"title": "年初测算", "title": "年初测算",
"icon": "", "icon": "",
"noCache": false, "noCache": false,
"link": null, "link": null,
"mkid": 901030100, "mkid": 901030100,
},
name: 'yssq',
path: "yssq"
}, },
name:'yssq', // {
path:"yssq" // component:'sbysjsp/mxsx/index',
}, // hidden:false,
// { // meta:{
// component:'sbysjsp/mxsx/index', // "title": "明细事项",
// hidden:false, // "icon": "",
// meta:{ // "noCache": false,
// "title": "明细事项", // "link": null,
// "icon": "", // "mkid": 901030200,
// "noCache": false, // },
// "link": null, // name:'mxsx',
// "mkid": 901030200, // path:"mxsx"
// }, // },
// name:'mxsx', {
// path:"mxsx" component: 'sbysjsp/yssqtz/index',
// }, hidden: false,
{ meta: {
component:'sbysjsp/yssqtz/index',
hidden:false,
meta:{
"title": "预算调整", "title": "预算调整",
"icon": "", "icon": "",
"noCache": false, "noCache": false,
"link": null, "link": null,
"mkid": 901030300, "mkid": 901030300,
},
name: 'yssqtz',
path: "yssqtz"
}, },
name:'yssqtz', {
path:"yssqtz" component: 'sbysjsp/yshz/index',
}, hidden: false,
{ meta: {
component:'sbysjsp/yshz/index',
hidden:false,
meta:{
"title": "预算汇总查询", "title": "预算汇总查询",
"icon": "", "icon": "",
"noCache": false, "noCache": false,
"link": null, "link": null,
"mkid": 901030400, "mkid": 901030400,
},
name: 'yshz',
path: "yshz"
}, },
name:'yshz', {
path:"yshz" component: 'sbysjsp/lqnd/index',
}, hidden: false,
{ meta: {
component:'sbysjsp/lqnd/index',
hidden:false,
meta:{
"title": "两区农电", "title": "两区农电",
"icon": "", "icon": "",
"noCache": false, "noCache": false,
"link": null, "link": null,
"mkid": 901030500, "mkid": 901030500,
},
name: 'lqnd',
path: "lqnd"
}, },
name:'lqnd', {
path:"lqnd" component: 'sbysjsp/hyha/index',
}, hidden: false,
{ meta: {
component:'sbysjsp/hyha/index',
hidden:false,
meta:{
"title": "淮阴淮安", "title": "淮阴淮安",
"icon": "", "icon": "",
"noCache": false, "noCache": false,
"link": null, "link": null,
"mkid": 901030510, "mkid": 901030510,
},
name: 'hyha',
path: "hyha"
}, },
name:'hyha', {
path:"hyha" component: 'sbysjsp/yszxjd/index',
}, hidden: false,
{ meta: {
component:'sbysjsp/yszxjd/index',
hidden:false,
meta:{
"title": "预算执行进度", "title": "预算执行进度",
"icon": "", "icon": "",
"noCache": false, "noCache": false,
"link": null, "link": null,
"mkid": 901030520, "mkid": 901030520,
},
name: 'yszxjd',
path: "yszxjd"
}, },
name:'yszxjd', {
path:"yszxjd" component: 'sbysjsp/yszxfx/index',
} hidden: false,
meta: {
"title": "预算执行分析",
"icon": "",
"noCache": false,
"link": null,
"mkid": 901030530,
},
name: 'yszxfx',
path: "yszxfx"
}
] ]
...@@ -276,24 +304,28 @@ export const powerRoutes=[ ...@@ -276,24 +304,28 @@ export const powerRoutes=[
path: '/znjh', path: '/znjh',
component: 'Layout', component: 'Layout',
hidden: false, hidden: false,
alwaysShow:true, alwaysShow: true,
redirect: 'znjhgl', redirect: 'znjhgl',
meta: {title: "智能稽核", icon: "fa-cog", noCache: false, link: null,mkid:901040000}, meta: {
children: [ title: "智能稽核",
{ icon: "fa-cog",
component:'znjh/xmznjh/index', noCache: false,
hidden:false, link: null,
meta:{ mkid: 901040000
"title": "稽核预警", },
"icon": "", children: [{
"noCache": false, component: 'znjh/xmznjh/index',
"link": null, hidden: false,
"mkid": 901040100, meta: {
}, "title": "稽核预警",
name:'xmznjh', "icon": "",
path:"xmznjh" "noCache": false,
"link": null,
"mkid": 901040100,
}, },
] name: 'xmznjh',
path: "xmznjh"
}, ]
}, },
/* 汇总查询报表*/ /* 汇总查询报表*/
...@@ -301,91 +333,93 @@ export const powerRoutes=[ ...@@ -301,91 +333,93 @@ export const powerRoutes=[
path: '/hzcxbb', path: '/hzcxbb',
component: 'Layout', component: 'Layout',
hidden: false, hidden: false,
alwaysShow:true, alwaysShow: true,
redirect: 'erpxmmxz', redirect: 'erpxmmxz',
meta: {title: "汇总查询报表", icon: "fa-cog", noCache: false, link: null,mkid:901050000}, meta: {
children: [ title: "汇总查询报表",
{ icon: "fa-cog",
component:'hzcxbb/erpxmmxz/index', noCache: false,
hidden:false, link: null,
meta:{ mkid: 901050000
},
children: [{
component: 'hzcxbb/erpxmmxz/index',
hidden: false,
meta: {
"title": "ERP项目明细账汇总查询", "title": "ERP项目明细账汇总查询",
"icon": "", "icon": "",
"noCache": false, "noCache": false,
"link": null, "link": null,
"mkid": 901020200, "mkid": 901020200,
},
name: 'erpxmmxz',
path: "erpxmmxz"
},
{
component: 'hzcxbb/kshdp/index',
hidden: false,
meta: {
"title": "可视化大屏",
"icon": "",
"noCache": false,
"link": null,
"mkid": 901020300,
},
name: 'kshdp',
path: "kshdp"
}, },
name:'erpxmmxz', {
path:"erpxmmxz" component: 'hzcxbb/szkb/index',
}, hidden: false,
{ meta: {
component:'hzcxbb/kshdp/index', "title": "数字看板",
hidden:false, "icon": "",
meta:{ "noCache": false,
"title": "可视化大屏", "link": null,
"icon": "", "mkid": '901020400',
"noCache": false, },
"link": null, name: 'szkb',
"mkid":901020300, path: "szkb"
}, },
name:'kshdp', // {
path:"kshdp" // component:'hzcxbb/render/index',
}, // hidden:false,
{ // meta:{
component:'hzcxbb/szkb/index', // "title": "render",
hidden:false, // "icon": "",
meta:{ // "noCache": false,
"title": "数字看板", // "link": null,
"icon": "", // "mkid":'test',
"noCache": false, // },
"link": null, // name:'render',
"mkid":'901020400', // path:"render"
}, // },
name:'szkb', // {
path:"szkb" // component:'hzcxbb/ysspzl/index',
}, // hidden:false,
// { // meta:{
// component:'hzcxbb/render/index', // "title": "预算申报及下达总览",
// hidden:false, // "icon": "",
// meta:{ // "noCache": false,
// "title": "render", // "link": null,
// "icon": "", // "mkid":901040100,
// "noCache": false, // },
// "link": null, // name:'ysspzl',
// "mkid":'test', // path:"ysspzl"
// }, // }
// name:'render',
// path:"render"
// },
// {
// component:'hzcxbb/ysspzl/index',
// hidden:false,
// meta:{
// "title": "预算申报及下达总览",
// "icon": "",
// "noCache": false,
// "link": null,
// "mkid":901040100,
// },
// name:'ysspzl',
// path:"ysspzl"
// }
] ]
}, },
] ]
// 公共路由 // 公共路由
export const constantRoutes = [ export const constantRoutes = [{
{
path: '/redirect', path: '/redirect',
component: Layout, component: Layout,
hidden: true, hidden: true,
children: [ children: [{
{ path: '/redirect/:path(.*)',
path: '/redirect/:path(.*)', component: () => import('@/views/redirect')
component: () => import('@/views/redirect') }]
}
]
}, },
{ {
path: '/login', path: '/login',
...@@ -411,29 +445,32 @@ export const constantRoutes = [ ...@@ -411,29 +445,32 @@ export const constantRoutes = [
path: '', path: '',
component: Layout, component: Layout,
redirect: 'index', redirect: 'index',
children: [ children: [{
{ path: 'index',
path: 'index', component: () => import('@/views/hzcxbb/szkb/index'),
component: () => import('@/views/hzcxbb/szkb/index'), name: 'Index',
name: 'Index', // redirect: '/user/profile',
// redirect: '/user/profile', meta: {
meta: { title: '首页', icon: 'dashboard', affix: true } title: '首页',
} icon: 'dashboard',
] affix: true
}
}]
}, },
{ {
path: '/user', path: '/user',
component: Layout, component: Layout,
hidden: true, hidden: true,
redirect: 'noredirect', redirect: 'noredirect',
children: [ children: [{
{ path: 'profile',
path: 'profile', component: () => import('common/src/views/user/profile/index'),
component: () => import('common/src/views/user/profile/index'), name: 'Profile',
name: 'Profile', meta: {
meta: { title: '个人中心', icon: 'user' } title: '个人中心',
icon: 'user'
} }
] }]
}, },
/* 陕钢铁预写死页面*/ /* 陕钢铁预写死页面*/
] ]
...@@ -453,6 +490,8 @@ Router.prototype.push = function push(location) { ...@@ -453,6 +490,8 @@ Router.prototype.push = function push(location) {
export default new Router({ export default new Router({
// mode: 'history', // mode: 'history',
mode: 'hash', mode: 'hash',
scrollBehavior: () => ({ y: 0 }), scrollBehavior: () => ({
y: 0
}),
routes: constantRoutes routes: constantRoutes
}) })
\ No newline at end of file
src/views/hzcxbb/szkb/index.vue
View file @ 59998b94
...@@ -106,11 +106,35 @@ ...@@ -106,11 +106,35 @@
<i class="i3"></i> <i class="i3"></i>
<i class="i4"></i> <i class="i4"></i>
<div class="full itembg "> <div class="full itembg ">
<span class="com-count-title"> <!-- 轮播图-->
示例图例 <el-carousel :indicator-position='"none"' style="overflow: hidden;" :interval='10000' class="full"
</span> :autoplay="true">
<div ref="slt" class="com-count-body"> <el-carousel-item>
</div> <span class="com-count-title">
预算执行分析-标准成本(单位)
</span>
<div ref="slt" v-echartResize="()=>{
if(slt1){
slt1.resize()
}
}" class="com-count-body">
</div>
</el-carousel-item>
<el-carousel-item>
<span class="com-count-title">
预算执行分析-标准成本(科目)
</span>
<div ref="slt2" v-echartResize="()=>{
if(slt2){
slt2.resize()
}
}" class="com-count-body">
</div>
</el-carousel-item>
</el-carousel>
</div> </div>
</div> </div>
</div> </div>
...@@ -121,10 +145,10 @@ ...@@ -121,10 +145,10 @@
<i class="i3"></i> <i class="i3"></i>
<i class="i4"></i> <i class="i4"></i>
<div class="full "> <div class="full ">
<!-- <span class="com-count-title"> <!-- <span class="com-count-title">
预算执行进度-淮安本部 预算执行进度-淮安本部
</span> --> </span> -->
<div class="com-count-body" style="height: 100%;" > <div class="com-count-body" style="height: 100%;">
<!-- 标题--> <!-- 标题-->
<div class="lbbt"> <div class="lbbt">
<div class="flex1 text-center "> <div class="flex1 text-center ">
...@@ -172,17 +196,33 @@ ...@@ -172,17 +196,33 @@
<i class="i2"></i> <i class="i2"></i>
<i class="i3"></i> <i class="i3"></i>
<i class="i4"></i> <i class="i4"></i>
<div class="full "> <el-carousel :indicator-position='"none"' style="overflow: hidden;" :interval='10000' class="full"
<span class="com-count-title"> :autoplay="true">
测试图例 <el-carousel-item>
</span> <span class="com-count-title">
<div ref="sdt" v-echartResize="()=>{ 预算执行分析-成本性项目(单位)
if(sdtCharts){ </span>
sdtCharts.resize() <div ref="slt3" v-echartResize="()=>{
if(slt3){
slt3.resize()
} }
}" class="com-count-body">
</div> }" class="com-count-body">
</div> </div>
</el-carousel-item>
<el-carousel-item>
<span class="com-count-title">
预算执行分析-成本性项目(专业)
</span>
<div ref="slt4" v-echartResize="()=>{
if(slt4){
slt4.resize()
}
}" class="com-count-body">
</div>
</el-carousel-item>
</el-carousel>
</div> </div>
</div> </div>
</div> </div>
...@@ -224,11 +264,15 @@ ...@@ -224,11 +264,15 @@
}, },
data() { data() {
return { return {
slt4: null,
slt3: null,
slt2: null,
slt1: null,
/* echart实例*/ /* echart实例*/
lg1:null, lg1: null,
lg2:null, lg2: null,
lg3:null, lg3: null,
lg4:null, lg4: null,
/* 定时器id*/ /* 定时器id*/
DELAYNUM: null, DELAYNUM: null,
/* 两区农电预算一览 */ /* 两区农电预算一览 */
...@@ -286,11 +330,10 @@ ...@@ -286,11 +330,10 @@
return item.bmName == '涟水县供电公司' return item.bmName == '涟水县供电公司'
}) })
/* 滚动表格数据*/ /* 滚动表格数据*/
this.$post('hafms/yszxjdlog/queryRepDetail', { this.$post('hafms/yszxjdlog/queryRepDetail', {}).then(res => {
}).then(res => {
if (res.success) { if (res.success) {
this.listData = res.data.records.filter(item=>{ this.listData = res.data.records.filter(item => {
return item.gsbz=='Y' return item.gsbz == 'Y'
}) })
} }
}) })
...@@ -307,7 +350,6 @@ ...@@ -307,7 +350,6 @@
hzxList: hzxList, hzxList: hzxList,
lsxList: lsxList lsxList: lsxList
}) })
this.sdtCharts = this.initsdt()
this.szkbmapCharts.on("click", (params) => { this.szkbmapCharts.on("click", (params) => {
if (params.data) { if (params.data) {
//获取到定义的数据 //获取到定义的数据
...@@ -326,6 +368,9 @@ ...@@ -326,6 +368,9 @@
this.initLqnd() this.initLqnd()
this.initLqnd2() this.initLqnd2()
this.initslt() this.initslt()
this.initslt2()
this.initslt3()
this.initslt4()
}, },
initLqnd() { initLqnd() {
...@@ -353,11 +398,11 @@ ...@@ -353,11 +398,11 @@
const LENGTH = 6 const LENGTH = 6
/* 选取前LENGTH个展示*/ /* 选取前LENGTH个展示*/
lxh1.sort(function(a, b) { lxh1.sort(function(a, b) {
return b.ndysmb - a.ndysmb; return b.ndysmb - a.ndysmb;
}); });
lxh2.sort(function(a, b) { lxh2.sort(function(a, b) {
return b.ndysmb - a.ndysmb; return b.ndysmb - a.ndysmb;
}); });
let showLxg1 = lxh1.filter((item, index) => { let showLxg1 = lxh1.filter((item, index) => {
if (index < LENGTH) { if (index < LENGTH) {
return true return true
...@@ -398,10 +443,10 @@ ...@@ -398,10 +443,10 @@
const LENGTH = 6 const LENGTH = 6
lxh1.sort(function(a, b) { lxh1.sort(function(a, b) {
return b.ndysmb - a.ndysmb; return b.ndysmb - a.ndysmb;
}); });
lxh2.sort(function(a, b) { lxh2.sort(function(a, b) {
return b.ndysmb - a.ndysmb; return b.ndysmb - a.ndysmb;
}); });
/* 选取前LENGTH个展示*/ /* 选取前LENGTH个展示*/
let showLxg1 = lxh1.filter((item, index) => { let showLxg1 = lxh1.filter((item, index) => {
...@@ -520,237 +565,711 @@ ...@@ -520,237 +565,711 @@
return huaian1 return huaian1
}, },
initslt() { initslt() {
/* 预算执行分析-标准成本-8月（单位）.xlsx数据*/
this.$post('hafms/yszxfxlog/queryRepDetail', {
lx: 'BZDW'
}).then(res => {
if (res.success && res.data.records) {
const {
records
} = res.data
if (records.length != 0) {
this.slt1 = this.initsltdo(records)
}
}
})
},
initslt3() {
/* 预算执行分析-标准成本-8月（单位）.xlsx数据*/
this.$post('hafms/yszxfxlog/queryRepDetail', {
lx: 'CBDW'
}).then(res => {
if (res.success && res.data.records) {
const {
records
} = res.data
if (records.length != 0) {
this.slt3 = this.initsltdo3(records)
}
}
})
},
initslt4() {
/* 预算执行分析-标准成本-8月（单位）.xlsx数据*/
this.$post('hafms/yszxfxlog/queryRepDetail', {
lx: 'CBKM'
}).then(res => {
if (res.success && res.data.records) {
const {
records
} = res.data
if (records.length != 0) {
records.sort(function(a, b) {
return b.wcl - a.wcl;
});
let apidata = records.filter((item, index) => {
if (index < 6) {
return true
} else {
return false
}
})
this.slt4 = this.initsltdo4(apidata)
}
}
})
},
initsltdo3(apidata) {
/* 预算执行分析-标准成本-8月（单位）.xlsx图例生成*/
let colorList = ['#f18c6e', '#d5f69b', '#22f2e5', '#2ca4fb']
const charts = this.$echarts.init(this.$refs["slt3"]);
let XAXIS = apidata.map(item => item.bmName || '未设置部门')
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
legend: {
right: 10,
top: 10,
textStyle: {
color: '#61d2f7'
},
left: 'center',
itemWidth: 9,
itemHeight: 9,
data: ['年度预算目标值', '立项值', '发生值']
},
grid: {
left: '10%',
top: '23%',
right: '10%',
bottom: '15%',
},
xAxis: {
type: 'category',
data: XAXIS,
axisLine: {
lineStyle: {
color: "#0177d4",
},
},
axisLabel: {
formatter: function(value) {
if (value.length > 7) {
return value.slice(0, 7) + '...';
}
return value;
},
color: "#fff",
fontSize: 10,
interval: 0,
},
},
yAxis: {
name: "（万元）",
nameTextStyle: {
color: "#fff",
fontSize: 10,
},
axisLine: {
lineStyle: {
color: "#0177d4",
},
},
axisLabel: {
color: "#fff",
fontSize: 10,
},
splitLine: {
show: false,
lineStyle: {
color: "#0177d4",
},
},
},
series: [{
stack: '预算',
name: '年度预算目标值',
type: "bar",
barWidth: 18,
itemStyle: {
normal: {
color: colorList[0],
},
},
label: {
show: false,
position: 'top',
textStyle: {
color: "#fff",
fontSize: 10,
},
},
data: apidata.map(item => item.ysmbje)
},
{
stack: '预算',
name: '立项值',
type: "bar",
barWidth: 18,
itemStyle: {
normal: {
color: colorList[1],
},
},
label: {
show: false,
position: 'top',
textStyle: {
color: "#fff",
fontSize: 10,
},
},
data: apidata.map(item => item.lxje)
},
{
stack: '预算', // 设置堆叠的组名
type: "bar",
name: '发生值',
barWidth: 18,
itemStyle: {
normal: {
color: colorList[3], // 设置柱状图的颜色
},
},
label: {
show: false,
position: 'top', // 在柱子顶部显示数字
textStyle: {
color: "#fff",
fontSize: 10,
},
},
data: apidata.map(item => item.fsje)
},
],
};
charts.setOption(option);
return charts
},
initsltdo(apidata) {
/* 预算执行分析-标准成本-8月（单位）.xlsx图例生成*/
let colorList = ['#f18c6e', '#d5f69b', '#22f2e5', '#2ca4fb']
const charts = this.$echarts.init(this.$refs["slt"]); const charts = this.$echarts.init(this.$refs["slt"]);
var num = 77.8 let XAXIS = apidata.map(item => item.bmName || '未设置部门')
var color = new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{ var option = {
offset: 0, tooltip: {
color: 'rgb(255,46,46)', // 0% 处的颜色 trigger: 'axis',
axisPointer: {
type: 'shadow',
},
}, },
{ legend: {
offset: 1, right: 10,
color: 'rgb(255,100,46)', // 100% 处的颜色 top: 10,
textStyle: {
color: '#61d2f7'
},
left: 'center',
itemWidth: 9,
itemHeight: 9,
data: ['年度预算目标值', '立项值', '发生值']
}, },
]); grid: {
let data1 = { left: '10%',
name: '', top: '23%',
value: num right: '10%',
} bottom: '15%',
let n = num;
let progress = (n * 0.01).toFixed(2);
var colorSet = [
[progress, color],
[1, 'rgba(0, 97, 226, 0.25)'],
];
let sizeC1 = 'rgb(255,215,37)';
let fontSize = 23;
var rich = {
white: {
height: 30,
fontSize: fontSize * 0.6,
color: 'rgba(255,255,255,0.5)',
}, },
bule: { xAxis: {
fontSize: fontSize * 2, type: 'category',
color: sizeC1, data: XAXIS,
axisLine: {
lineStyle: {
color: "#0177d4",
},
},
axisLabel: {
formatter: function(value) {
if (value.length > 7) {
return value.slice(0, 7) + '...';
}
return value;
},
color: "#fff",
fontSize: 10,
interval: 0,
},
},
yAxis: {
name: "（万元）",
nameTextStyle: {
color: "#fff",
fontSize: 10,
},
axisLine: {
lineStyle: {
color: "#0177d4",
},
},
axisLabel: {
color: "#fff",
fontSize: 10,
},
splitLine: {
show: false,
lineStyle: {
color: "#0177d4",
},
},
},
series: [{
stack: '预算',
name: '年度预算目标值',
type: "bar",
barWidth: 18,
itemStyle: {
normal: {
color: colorList[0],
},
},
label: {
show: false,
position: 'top',
textStyle: {
color: "#fff",
fontSize: 10,
},
},
data: apidata.map(item => item.ysmbje)
},
{
stack: '预算',
name: '立项值',
type: "bar",
barWidth: 18,
itemStyle: {
normal: {
color: colorList[1],
},
},
label: {
show: false,
position: 'top',
textStyle: {
color: "#fff",
fontSize: 10,
},
},
data: apidata.map(item => item.lxje)
},
{
stack: '预算', // 设置堆叠的组名
type: "bar",
name: '发生值',
barWidth: 18,
itemStyle: {
normal: {
color: colorList[3], // 设置柱状图的颜色
},
},
label: {
show: false,
position: 'top', // 在柱子顶部显示数字
textStyle: {
color: "#fff",
fontSize: 10,
},
},
data: apidata.map(item => item.fsje)
},
],
};
charts.setOption(option);
return charts
},
initslt2() {
/* 预算执行分析-标准成本-8月（）.xlsx数据*/
this.$post('hafms/yszxfxlog/queryRepDetail', {
lx: 'BZKM'
}).then(res => {
if (res.success && res.data.records) {
const {
records
} = res.data
if (records.length != 0) {
records.sort(function(a, b) {
return b.wcl - a.wcl;
});
let apidata = records.filter((item, index) => {
if (index < 6) {
return true
} else {
return false
}
})
this.slt2 = this.initsltdo2(apidata)
}
}
})
},
initsltdo4(apidata) {
let colorList = ['#f18c6e', '#d5f69b', '#22f2e5', '#2ca4fb','#9adc6f']
const charts = this.$echarts.init(this.$refs["slt4"]);
let XAXIS = apidata.map(item => item.xmflname || 'xmflname')
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
legend: {
right: 10,
top: 10,
textStyle: {
color: '#61d2f7'
},
left: 'center',
itemWidth: 9,
itemHeight: 9,
data: ['年度预算目标值', '立项值', '发生值']
},
grid: {
left: '10%',
top: '23%',
right: '10%',
bottom: '15%',
},
xAxis: {
type: 'category',
data: XAXIS,
axisLine: {
lineStyle: {
color: "#0177d4",
},
},
axisLabel: {
formatter: function(value) {
if (value.length > 7) {
return value.slice(0, 7) + '...';
}
return value;
},
color: "#fff",
fontSize: 10,
interval: 0,
},
},
yAxis: [{
name: "（万元）",
nameTextStyle: {
color: "#fff",
fontSize: 10,
},
axisLine: {
lineStyle: {
color: "#0177d4",
},
},
axisLabel: {
color: "#fff",
fontSize: 10,
},
splitLine: {
show: false,
lineStyle: {
color: "#0177d4",
},
},
},
{
name: "（完成率）",
nameTextStyle: {
color: "#fff",
fontSize: 10,
},
axisLine: {
lineStyle: {
color: "#0177d4",
},
},
axisLabel: {
color: "#fff",
fontSize: 10,
},
splitLine: {
show: false,
lineStyle: {
color: "#0177d4",
},
},
max: 100
},
],
series: [{
name: '完成率',
type: "line",
barWidth: 18,
itemStyle: {
normal: {
color: colorList[4],
},
},
label: {
show: false,
position: 'top',
textStyle: {
color: "#fff",
fontSize: 10,
},
},
yAxisIndex: 1,
data: apidata.map(item => item.wcl.toFixed(2))
}, {
stack: '预算',
name: '年度预算目标值',
type: "bar",
barWidth: 18,
itemStyle: {
normal: {
color: colorList[0],
},
},
label: {
show: false,
position: 'top',
textStyle: {
color: "#fff",
fontSize: 10,
},
},
data: apidata.map(item => item.ysmbje)
},
{
stack: '预算',
name: '立项值',
type: "bar",
barWidth: 18,
itemStyle: {
normal: {
color: colorList[1],
},
},
label: {
show: false,
position: 'top',
textStyle: {
color: "#fff",
fontSize: 10,
},
},
data: apidata.map(item => item.lxje)
},
{
stack: '预算', // 设置堆叠的组名
type: "bar",
name: '发生值',
barWidth: 18,
itemStyle: {
normal: {
color: colorList[3], // 设置柱状图的颜色
},
},
label: {
show: false,
position: 'top', // 在柱子顶部显示数字
textStyle: {
color: "#fff",
fontSize: 10,
},
},
data: apidata.map(item => item.fsje)
},
],
};
charts.setOption(option);
return charts
},
initsltdo2(apidata) {
let colorList = ['#f18c6e', '#d5f69b', '#22f2e5', '#2ca4fb','#9adc6f']
const charts = this.$echarts.init(this.$refs["slt2"]);
let XAXIS = apidata.map(item => item.xmflname || 'xmflname')
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
}, },
radius: { legend: {
height: 35, right: 10,
fontSize: 23, top: 10,
color: sizeC1, textStyle: {
textAlign: 'center', color: '#61d2f7'
},
left: 'center',
itemWidth: 9,
itemHeight: 9,
data: ['年度预算目标值', '立项值', '发生值']
}, },
size: { grid: {
height: 400, left: '10%',
top: '23%',
right: '10%',
bottom: '15%',
}, },
}; xAxis: {
var option = { type: 'category',
data: XAXIS,
title: [{ axisLine: {
text: '处理率', lineStyle: {
x: 'center', color: "#0177d4",
top: '32%',
textStyle: {
color: '#fff',
fontSize: 14,
fontWeight: '100',
}, },
}, },
{ axisLabel: {
text: num + '%', formatter: function(value) {
x: 'center', if (value.length > 7) {
top: '50%', return value.slice(0, 7) + '...';
textStyle: { }
fontSize: 13, return value;
color: '#00f0ff',
foontWeight: '500',
}, },
color: "#fff",
fontSize: 10,
interval: 0,
}, },
],
tooltip: {
formatter: '{a} <br/>{b} : {c}%',
}, },
series: [{ yAxis: [{
type: 'gauge', name: "（万元）",
center: ['50%', '60%'], nameTextStyle: {
radius: '110%', color: "#fff",
startAngle: '210', fontSize: 10,
endAngle: '-30',
pointer: {
show: false,
},
data: data1,
title: {
show: false,
}, },
axisLine: { axisLine: {
show: true,
lineStyle: { lineStyle: {
color: colorSet, color: "#0177d4",
width: 10,
// shadowBlur: 15,
// shadowColor: '#fff',
shadowOffsetX: 0,
shadowOffsetY: 0,
opacity: 1,
}, },
}, },
axisTick: { axisLabel: {
show: false, color: "#fff",
fontSize: 10,
}, },
splitLine: { splitLine: {
show: false, show: false,
length: 12,
lineStyle: { lineStyle: {
color: '#00377a', color: "#0177d4",
width: 2,
type: 'solid',
}, },
}, },
axisLabel: {
show: false,
},
}, },
// 左边刻度线
{ {
type: 'gauge', name: "（完成率）",
center: ['50%', '60%'], nameTextStyle: {
radius: '120%', color: "#fff",
startAngle: '210', fontSize: 10,
endAngle: '-30',
min: 0,
zlevel: 10,
max: 100,
splitNumber: 12,
// 展示当前进度
progress: {
show: false,
}, },
// 仪表盘指针
pointer: {
show: false,
},
// 仪表盘轴线相关配置
axisLine: { axisLine: {
show: false,
lineStyle: { lineStyle: {
color: [ color: "#0177d4",
[1, 'transparent']
],
width: 20,
}, },
}, },
// 刻度样式 axisLabel: {
axisTick: { color: "#fff",
show: false, fontSize: 10,
}, },
// 分隔线样式
splitLine: { splitLine: {
show: false, show: false,
lineStyle: {
color: "#0177d4",
},
}, },
// 刻度标签 max: 100
axisLabel: { },
show: true, ],
distance: -24, series: [{
formatter: function(value) { name: '完成率',
if (value === 0) { type: "line",
return '{white|' + value + '}'; barWidth: 18,
} itemStyle: {
return ''; normal: {
color: colorList[4],
}, },
rich: rich,
}, },
// 表盘中指针的固定点 label: {
anchor: {
show: false, show: false,
position: 'top',
textStyle: {
color: "#fff",
fontSize: 10,
},
},
yAxisIndex: 1,
data: apidata.map(item => item.wcl.toFixed(2))
}, {
stack: '预算',
name: '年度预算目标值',
type: "bar",
barWidth: 18,
itemStyle: {
normal: {
color: colorList[0],
},
}, },
detail: { label: {
show: false, show: false,
position: 'top',
textStyle: {
color: "#fff",
fontSize: 10,
},
}, },
data: [{ data: apidata.map(item => item.ysmbje)
value: 20,
}, ],
}, },
// // 又边刻度线
{ {
type: 'gauge', stack: '预算',
center: ['50%', '60%'], name: '立项值',
radius: '120%', type: "bar",
startAngle: '210', barWidth: 18,
endAngle: '-30', itemStyle: {
min: 0, normal: {
zlevel: 10, color: colorList[1],
max: 100,
splitNumber: 12,
// 展示当前进度
progress: {
show: false,
},
// 仪表盘指针
pointer: {
show: false,
},
// 仪表盘轴线相关配置
axisLine: {
show: false,
lineStyle: {
color: [
[1, 'transparent']
],
width: 20,
}, },
}, },
// 刻度样式 label: {
axisTick: {
show: false,
},
// 分隔线样式
splitLine: {
show: false, show: false,
position: 'top',
textStyle: {
color: "#fff",
fontSize: 10,
},
}, },
// 刻度标签 data: apidata.map(item => item.lxje)
axisLabel: { },
show: true, {
distance: -30, stack: '预算', // 设置堆叠的组名
formatter: function(value) { type: "bar",
if (value === 100) { name: '发生值',
return '{white|' + value + '}'; barWidth: 18,
} itemStyle: {
return ''; normal: {
}, color: colorList[3], // 设置柱状图的颜色
rich: rich, },
color: 'rgba(255,255,255,.85)',
fontSize: 12,
},
// 表盘中指针的固定点
anchor: {
show: false,
}, },
detail: { label: {
show: false, show: false,
position: 'top', // 在柱子顶部显示数字
textStyle: {
color: "#fff",
fontSize: 10,
},
}, },
data: [{ data: apidata.map(item => item.fsje)
value: 0,
}, ],
}, },
], ],
}; };
...@@ -759,112 +1278,7 @@ ...@@ -759,112 +1278,7 @@
return charts return charts
}, },
initsdt() {
const charts = this.$echarts.init(this.$refs["sdt"]);
const option = {
legend: {
bottom: 10,
textStyle: {
color: '#61d2f7' // 设置图例项字体颜色为红色
},
left: 'center',
itemWidth: 9,
itemHeight: 9,
data: ['2018溢价率', '2019溢价率']
},
xAxis: {
axisLine: { // 改变x轴颜色
show: false,
lineStyle: {
color: '#26D9FF',
}
},
axisTick: {
show: false
},
axisLabel: { // 改变x轴字体颜色和大小
textStyle: {
color: "#333",
fontSize: 12
},
},
splitLine: {
show: false,
},
},
yAxis: {
name: '%',
nameTextStyle: {
color: '#61d2f7',
padding: [0, 25, 0, 0]
},
axisLine: { // 改变y轴颜色
lineStyle: {
color: '#61d2f7'
}
},
axisTick: {
show: false
},
axisLabel: { // 改变y轴字体颜色和大小
//formatter: '{value} m³ ', // 给y轴添加单位
textStyle: {
color: "#61d2f7",
fontSize: 12
},
},
splitLine: {
lineStyle: {
color: "#61d2f7"
}
},
},
series: [{
name: '2018溢价率',
type: 'scatter',
itemStyle: {
color: "#3E9FFF",
},
symbolSize: 12,
data: [
[10.0, 8.04],
[8.0, 6.95],
[13.0, 7.58],
[9.0, 8.81],
[11.0, 8.33],
[14.0, 9.96],
[6.0, 7.24],
[4.0, 4.26],
[12.0, 10.84],
[7.0, 4.82],
[5.0, 5.68]
],
}, {
name: '2019溢价率',
type: 'scatter',
itemStyle: {
color: "#F7B500",
},
symbolSize: 12,
data: [
[9.0, 5.04],
[11.0, 7.95],
[12.0, 8.58],
[5.0, 11.81],
[7.0, 12.33],
[11.0, 7.96],
[7.0, 9.24],
[6.0, 8.26],
[10.0, 11.84],
[7.0, 3.82],
[6.0, 4.68]
],
}]
}
charts.setOption(option);
return charts
},
initlg1(apidata) { initlg1(apidata) {
let colorList = ['#f18c6e', '#d5f69b', '#22f2e5', '#2ca4fb'] let colorList = ['#f18c6e', '#d5f69b', '#22f2e5', '#2ca4fb']
let XAXIS = apidata.map(item => item.fyname) let XAXIS = apidata.map(item => item.fyname)
...@@ -903,11 +1317,11 @@ ...@@ -903,11 +1317,11 @@
}, },
axisLabel: { axisLabel: {
formatter: function(value) { formatter: function(value) {
if (value.length > 7) { if (value.length > 7) {
return value.slice(0, 7) + '...'; return value.slice(0, 7) + '...';
} }
return value; return value;
}, },
color: "#fff", color: "#fff",
fontSize: 10, fontSize: 10,
interval: 0, interval: 0,
...@@ -1063,11 +1477,11 @@ ...@@ -1063,11 +1477,11 @@
fontSize: 10, fontSize: 10,
interval: 0, interval: 0,
formatter: function(value) { formatter: function(value) {
if (value.length > 7) { if (value.length > 7) {
return value.slice(0,7) + '...'; return value.slice(0, 7) + '...';
} }
return value; return value;
}, },
}, },
}, },
yAxis: { yAxis: {
...@@ -1221,11 +1635,11 @@ ...@@ -1221,11 +1635,11 @@
fontSize: 10, fontSize: 10,
interval: 0, interval: 0,
formatter: function(value) { formatter: function(value) {
if (value.length > 7) { if (value.length > 7) {
return value.slice(0, 7) + '...'; return value.slice(0, 7) + '...';
} }
return value; return value;
}, },
}, },
}, },
yAxis: { yAxis: {
...@@ -1379,11 +1793,11 @@ ...@@ -1379,11 +1793,11 @@
fontSize: 10, fontSize: 10,
interval: 0, interval: 0,
formatter: function(value) { formatter: function(value) {
if (value.length > 7) { if (value.length > 7) {
return value.slice(0, 7) + '...'; return value.slice(0, 7) + '...';
} }
return value; return value;
}, },
}, },
}, },
yAxis: { yAxis: {
...@@ -1593,93 +2007,106 @@ ...@@ -1593,93 +2007,106 @@
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
#szkb{ #szkb {
.com-count-title{ .com-count-title {
transform: translateY(10px); transform: translateY(10px);
font-size: 1vw; font-size: 1vw;
color:#3aafe8; color: #3aafe8;
line-height: 2vh; line-height: 2vh;
font-weight: 600; font-weight: 600;
&::before{
content: ''; &::before {
height: .5vw; content: '';
width: .5vw; height: .5vw;
display: inline-block; width: .5vw;
background-color: #bde4ff; display: inline-block;
border-radius: 50%; background-color: #bde4ff;
margin-bottom: .1vh; border-radius: 50%;
} margin-bottom: .1vh;
}
}
.com-count-body {
font-size: .65vw;
height: calc(100% - 2vh);
width: 100%;
}
.itembg {
background-image: url(./static/itembg.png);
background-size: 100% 100%;
}
background-image: url(./static/bg.png);
background-size: 100% 100%;
height: 100vh;
width: 100vw;
.title {
background-image: url(./static/bg_top.png);
background-size: 100% 100%;
height: 8vh;
width: 100%;
text-align: center;
line-height: 8vh;
color: #bde4ff;
font-size: 1.8vw;
font-weight: 700;
}
.main {
height: 58vh;
width: 100%;
display: flex;
.first {
height: 100%;
width: 30%;
padding: 0.5vh;
} }
.com-count-body{
font-size: .65vw; .second {
height: calc(100% - 2vh); height: 100%;
width: 100%; width: 40%;
padding: 0.5vh;
} }
.itembg{
background-image: url(./static/itembg.png); .third {
background-size: 100% 100%; height: 100%;
width: 30%;
padding: 0.5vh;
} }
background-image: url(./static/bg.png); }
background-size: 100% 100%;
height: 100vh; .bottom {
width: 100vw; display: flex;
.title{ height: 39vh;
background-image: url(./static/bg_top.png); width: 100%;
background-size: 100% 100%; margin-top: 1vh;
height: 8vh;
width: 100%; .first {
text-align: center; height: 100%;
line-height: 8vh; width: 30%;
color: #bde4ff; padding: 0.5vh;
font-size: 1.8vw;
font-weight: 700;
} }
.main{
height: 58vh; .second {
width: 100%; height: 100%;
display: flex; width: 40%;
.first{ padding: 0.5vh;
height: 100%;
width: 30%;
padding:0.5vh;
}
.second{
height: 100%;
width: 40%;
padding:0.5vh;
}
.third{
height: 100%;
width: 30%;
padding:0.5vh;
}
} }
.bottom{
display: flex; .third {
height: 39vh; height: 100%;
width: 100%; width: 30%;
margin-top: 1vh; padding: 0.5vh;
.first{
height: 100%;
width: 30%;
padding:0.5vh;
}
.second{
height: 100%;
width: 40%;
padding:0.5vh;
}
.third{
height: 100%;
width: 30%;
padding:0.5vh;
}
} }
} }
}
.itemtitle{
.itemtitle {
margin-top: 1vh; margin-top: 1vh;
margin-bottom: 1vh; margin-bottom: 1vh;
height: 5vh; height: 5vh;
...@@ -1690,7 +2117,8 @@ ...@@ -1690,7 +2117,8 @@
color: #bde4ff; color: #bde4ff;
font-weight: 700; font-weight: 700;
} }
.itemtitleb{
.itemtitleb {
margin-top: 1vh; margin-top: 1vh;
margin-bottom: 1vh; margin-bottom: 1vh;
height: 4vh; height: 4vh;
...@@ -1701,118 +2129,137 @@ ...@@ -1701,118 +2129,137 @@
color: #bde4ff; color: #bde4ff;
font-weight: 700; font-weight: 700;
} }
.maintitle{
width: 60%;margin-right: 20%;margin-left: 20%;border-radius: 30px; .maintitle {
background-color:rgba(58,175,232,.6) ; width: 60%;
border-radius: 18px; margin-right: 20%;
margin-left: 20%;
border-radius: 30px;
background-color: rgba(58, 175, 232, .6);
border-radius: 18px;
} }
.itemtitlebg1{
background: linear-gradient(to right,#3aafe8,rgba(48,82,174,0)); .itemtitlebg1 {
background: linear-gradient(to right, #3aafe8, rgba(48, 82, 174, 0));
} }
.itemtitlebg2{
background: linear-gradient(to left,#3aafe8,rgba(48,82,174,0)); .itemtitlebg2 {
background: linear-gradient(to left, #3aafe8, rgba(48, 82, 174, 0));
} }
.itemtitlebg3{
background: linear-gradient(to left,rgba(48,82,174,0) ,#3aafe8 30% ,rgba(48,82,174,0)); .itemtitlebg3 {
background: linear-gradient(to left, rgba(48, 82, 174, 0), #3aafe8 30%, rgba(48, 82, 174, 0));
} }
.itemmain{
height:51vh; .itemmain {
height: 51vh;
width: 100%; width: 100%;
} }
.itemmainb{
height:32vh; .itemmainb {
height: 32vh;
width: 100%; width: 100%;
} }
.boxall { .boxall {
border: 1px solid #3486da; border: 1px solid #3486da;
background: rgba(0,70,190,.1); background: rgba(0, 70, 190, .1);
padding: .6vw; padding: .6vw;
position: relative; position: relative;
margin-bottom: 0.25rem; margin-bottom: 0.25rem;
z-index: 10; z-index: 10;
.i1{
border-right: 3px solid #3486da; .i1 {
right: -2px; border-right: 3px solid #3486da;
position: absolute; right: -2px;
width: 1vw; position: absolute;
height:1vw; width: 1vw;
content: ""; height: 1vw;
border-top: 3px solid #3486da; content: "";
top: -2px; border-top: 3px solid #3486da;
} top: -2px;
.i2{ }
border-left: 3px solid #3486da;
left: -2px; .i2 {
position: absolute; border-left: 3px solid #3486da;
width: 1vw; left: -2px;
height:1vw; position: absolute;
content: ""; width: 1vw;
border-top: 3px solid #3486da; height: 1vw;
top: -2px; content: "";
} border-top: 3px solid #3486da;
.i3{ top: -2px;
border-right: 3px solid #3486da; }
right: -2px;
position: absolute; .i3 {
width: 1vw; border-right: 3px solid #3486da;
height:1vw; right: -2px;
content: ""; position: absolute;
border-top: 3px solid #3486da; width: 1vw;
bottom: -2px; height: 1vw;
transform: rotate(90deg); content: "";
} border-top: 3px solid #3486da;
.i4{ bottom: -2px;
border-left: 3px solid #3486da; transform: rotate(90deg);
left: -2px; }
position: absolute;
width: 1vw; .i4 {
height:1vw; border-left: 3px solid #3486da;
content: ""; left: -2px;
border-top: 3px solid #3486da; position: absolute;
bottom: -2px; width: 1vw;
transform: rotate(-90deg); height: 1vw;
} content: "";
.lbbt{ border-top: 3px solid #3486da;
height: 4vh; bottom: -2px;
width: 100%; transform: rotate(-90deg);
font-size: .9vw; }
display: flex;
line-height: 4vh; .lbbt {
color: #61d2f7; height: 4vh;
} width: 100%;
.flex1{ font-size: .9vw;
flex: 1; display: flex;
} line-height: 4vh;
.lbbody{ color: #61d2f7;
height: calc(100% - 4vh); }
}
.lbbody div{ .flex1 {
flex: 1; flex: 1;
line-height: 25px; }
font-size: 13px;
text-align: center; .lbbody {
} height: calc(100% - 4vh);
.lbtit > :nth-child(odd) { }
-webkit-box-shadow: #07417a 0px 0px 10px; .lbbody div {
-moz-box-shadow: #07417a 0px 0px 10px; flex: 1;
box-shadow: inset 0 0 30px #07417a; line-height: 25px;
/*position: relative;*/ font-size: 13px;
} text-align: center;
.lbtit > :nth-child(even) { }
-webkit-box-shadow: #3486da 0px 0px 10px;
-moz-box-shadow: #3486da 0px 0px 10px; .lbtit> :nth-child(odd) {
box-shadow: inset 0 0 30px #3486da;
/*position: relative;*/ -webkit-box-shadow: #07417a 0px 0px 10px;
} -moz-box-shadow: #07417a 0px 0px 10px;
box-shadow: inset 0 0 30px #07417a;
/*position: relative;*/
}
.lbtit> :nth-child(even) {
-webkit-box-shadow: #3486da 0px 0px 10px;
-moz-box-shadow: #3486da 0px 0px 10px;
box-shadow: inset 0 0 30px #3486da;
/*position: relative;*/
}
} }
// @import url("szkb.scss"); // @import url("szkb.scss");
</style> </style>
src/views/sbysjsp/yszxfx/index.vue 0 → 100644
View file @ 59998b94
<template>
<div class=" flex">
<el-tabs @tab-click="handleClick" v-model="activeName" :tab-position="'left'">
<el-tab-pane style="font-size: 12px;" v-for="(item,index) in paneList" :key="item.id" :name="item.id"
:lx="item.lx" :label="item.title"></el-tab-pane>
</el-tabs>
<div style="flex: 1;overflow: hidden;">
<div class="min_full" style="border-left: 0px;">
<!-- right-->
<el-row class="tool-bar">
<!-- <ToolButton :app='app'></ToolButton> -->
<ImportTempButton @success='success' url="hafms/yszhcxlog//excel/import" :params="{
lx:'B'
}" />
<!-- 导入-->
<el-button @click="del" size="mini" type="danger">删除当前报表</el-button>
</el-row>
<!-- 表格-->
<div class="tablePagers">
<TablePager :operateButtons='false' disableQuery @getData='getData' :ref="'TablePager'" :app='app'
:query='query' @selectItem='selectItem' @getRow='getRow'>
</TablePager>
</div>
</div>
</div>
</div>
</template>
<script>
import {
doQuery,
doDelete,
doQueryDetail
} from '@/api/sbysjsp/yszxfx.js';
import {
tableMixin
} from 'common'
export default {
mixins: [tableMixin],
/* 初始额外赋值*/
async mounted() {
/* 查询数值*/
this.init()
// this.$refs['TablePager'].pageQuery()
},
data() {
return {
activeName: '',
paneList: [],
baseUrl: 'hafms/yszxfxlog',
/* 查询参数*/
queryParams: {
},
/* 表格标题对应参数*/
tableTitle: [
// {
// title: "预算科目",
// field: "fyname",
// fieldType: "ftString",
// width: 160
// },
// {
// title: "加载中",
// fieldType: "ftString",
// field: "title",
// width: 160,
// subtitle: [
// {
// label: "年度预算目标值(万元)",
// prop: "ndysmb",
// fieldType: "ftString",
// width: 230
// },
// {
// prop: "phmb",
// label: "平衡目标值(万元)",
// width: "120"
// },
// {
// prop: "ljfj",
// label: "累计分解值(万元)",
// width: "120"
// },
// {
// prop: "fjl",
// label: "分解率",
// width: "120"
// },
// {
// prop: "fsz",
// label: "发生值(万元)",
// width: "120"
// },
// {
// prop: "wcl",
// label: "完成率",
// width: "120"
// },
// ]
// },
// {
// title: "加载中",
// fieldType: "ftString",
// field: "title",
// width: 160,
// subtitle: [{
// label: "年度预算目标值(万元)",
// prop: "ndysmb2",
// fieldType: "ftString",
// width: 230
// },
// {
// prop: "phmb2",
// label: "平衡目标值(万元)",
// width: "120"
// },
// {
// prop: "ljfj2",
// label: "累计分解值(万元)",
// width: "120"
// },
// {
// prop: "fjl2",
// label: "分解率",
// width: "120"
// },
// {
// prop: "fsz2",
// label: "发生值(万元)",
// width: "120"
// },
// {
// prop: "wcl2",
// label: "完成率",
// width: "120"
// },
// ]
// },
]
}
},
methods: {
/* 切换新表头*/
transXbt(lx) {
console.log(this.$refs.TablePager.newGridList)
if (lx == 'BZDW') {
this.$refs.TablePager.newGridList = [
{
label: '单位名称',
prop: 'bmName',
show: true
},
{
label: '年度预算目标值(万元)',
prop: 'ysmbje',
show: true
},
{
label: '立项值(万元)',
prop: 'lxje',
show: true,
formatter(a, b, value) {
if (!value || value === "undefined" || value === '') {
return 0;
} else {
if (!isNaN(value)) {
return parseFloat(value).toFixed(4);
} else {
return value
}
}
}
},
{
label: '下达率（%）',
prop: 'lxl',
show: true,
formatter(a, b, value) {
if (!value || value === "undefined" || value === '') {
return 0;
} else {
if (!isNaN(value)) {
return parseFloat(value).toFixed(3);
} else {
return value
}
}
}
},
{
label: '发生值(万元)',
prop: 'fsje',
show: true,
formatter(a, b, value) {
if (!value || value === "undefined" || value === '') {
return 0;
} else {
if (!isNaN(value)) {
return parseFloat(value).toFixed(4);
} else {
return value
}
}
}
},
{
label: '完成率（%）',
prop: 'wcl',
show: true,
formatter(a, b, value) {
if (!value || value === "undefined" || value === '') {
return 0;
} else {
if (!isNaN(value)) {
return parseFloat(value).toFixed(3);
} else {
return value
}
}
}
},
{
label: '排名',
prop: 'pm',
show: true
}
]
} else if (lx == 'BZKM') {
this.$refs.TablePager.newGridList = [{
label: '项目类别',
prop: 'xmflname',
show: true
},
{
label: '年度预算目标值(万元)',
prop: 'ysmbje',
show: true,
formatter(a, b, value) {
if (!value || value === "undefined" || value === '') {
return 0;
} else {
if (!isNaN(value)) {
return parseFloat(value).toFixed(4);
} else {
return value
}
}
}
},
{
label: '待分解(万元)',
prop: 'dfjje',
show: true,
formatter(a, b, value) {
if (!value || value === "undefined" || value === '') {
return 0;
} else {
if (!isNaN(value)) {
return parseFloat(value).toFixed(4);
} else {
return value
}
}
}
},
{
label: '立项值(万元)',
prop: 'lxje',
show: true,
formatter(a, b, value) {
if (!value || value === "undefined" || value === '') {
return 0;
} else {
if (!isNaN(value)) {
return parseFloat(value).toFixed(4);
} else {
return value
}
}
}
},
{
label: '下达率（%）',
prop: 'lxl',
show: true,
formatter(a, b, value) {
if (!value || value === "undefined" || value === '') {
return 0;
} else {
if (!isNaN(value)) {
return parseFloat(value).toFixed(3);
} else {
return value
}
}
}
},
{
label: '发生值(万元)',
prop: 'fsje',
show: true
},
{
label: '完成率（%）',
prop: 'wcl',
show: true,
formatter(a, b, value) {
if (!value || value === "undefined" || value === '') {
return 0;
} else {
if (!isNaN(value)) {
return parseFloat(value).toFixed(3);
} else {
return value
}
}
}
}
]
}else if (lx == 'CBKM') {
this.$refs.TablePager.newGridList = [{
label: '项目类别',
prop: 'xmflname',
show: true
},
{
label: '年度预算目标值(万元)',
prop: 'ysmbje',
show: true,
formatter(a, b, value) {
if (!value || value === "undefined" || value === '') {
return 0;
} else {
if (!isNaN(value)) {
return parseFloat(value).toFixed(4);
} else {
return value
}
}
}
},
{
label: '待分解(万元)',
prop: 'dfjje',
show: true,
formatter(a, b, value) {
if (!value || value === "undefined" || value === '') {
return 0;
} else {
if (!isNaN(value)) {
return parseFloat(value).toFixed(4);
} else {
return value
}
}
}
},
{
label: '立项值(万元)',
prop: 'lxje',
show: true,
formatter(a, b, value) {
if (!value || value === "undefined" || value === '') {
return 0;
} else {
if (!isNaN(value)) {
return parseFloat(value).toFixed(4);
} else {
return value
}
}
}
},
{
label: '立项率（%）',
prop: 'lxl',
show: true,
formatter(a, b, value) {
if (!value || value === "undefined" || value === '') {
return 0;
} else {
if (!isNaN(value)) {
return parseFloat(value).toFixed(3);
} else {
return value
}
}
}
},
{
label: '发生值(万元)',
prop: 'fsje',
show: true,
formatter(a, b, value) {
if (!value || value === "undefined" || value === '') {
return 0;
} else {
if (!isNaN(value)) {
return parseFloat(value).toFixed(4);
} else {
return value
}
}
}
},
{
label: '完成率（%）',
prop: 'wcl',
show: true,
formatter(a, b, value) {
if (!value || value === "undefined" || value === '') {
return 0;
} else {
if (!isNaN(value)) {
return parseFloat(value).toFixed(3);
} else {
return value
}
}
}
}
]
}else if (lx == 'CBDW') {
this.$refs.TablePager.newGridList = [
{
label: '单位名称',
prop: 'bmName',
show: true
},
{
label: '年度预算目标值(万元)',
prop: 'ysmbje',
show: true,
formatter(a, b, value) {
if (!value || value === "undefined" || value === '') {
return 0;
} else {
if (!isNaN(value)) {
return parseFloat(value).toFixed(4);
} else {
return value
}
}
}
},
{
label: '立项值(万元)',
prop: 'lxje',
show: true,
formatter(a, b, value) {
if (!value || value === "undefined" || value === '') {
return 0;
} else {
if (!isNaN(value)) {
return parseFloat(value).toFixed(4);
} else {
return value
}
}
}
},
{
label: '立项率（%）',
prop: 'lxl',
show: true,
formatter(a, b, value) {
if (!value || value === "undefined" || value === '') {
return 0;
} else {
if (!isNaN(value)) {
return parseFloat(value).toFixed(3);
} else {
return value
}
}
}
},
{
label: '发生值(万元)',
prop: 'fsje',
show: true,
formatter(a, b, value) {
if (!value || value === "undefined" || value === '') {
return 0;
} else {
if (!isNaN(value)) {
return parseFloat(value).toFixed(4);
} else {
return value
}
}
}
},
{
label: '完成率（%）',
prop: 'wcl',
show: true,
formatter(a, b, value) {
if (!value || value === "undefined" || value === '') {
return 0;
} else {
if (!isNaN(value)) {
return parseFloat(value).toFixed(3);
} else {
return value
}
}
}
},
{
label: '排名',
prop: 'pm',
show: true
}
]
}
},
del() {
if (this.paneList.length > 0 && this.activeName) {
this.$confirm('是否删除当前报表, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(res => {
doDelete({
id: this.activeName
}).then(e => {
if (e.success) {
this.$success('操作成功')
/* 初始化list*/
this.init()
}
})
})
} else {
this.$warning('当前无数据，请刷新或者导入后进行操作')
}
},
init() {
doQuery({
}).then(res => {
if (res.success) {
if (res.data && res.data.records && res.data.records.length != 0) {
this.paneList = res.data.records || []
if (this.paneList[0]) {
this.transXbt(this.paneList[0].lx)
this.activeName = this.paneList[0].id
this.showTabData(this.paneList[0].id)
/* 查询第一个list*/
}
}
}
})
},
/* 导入成功回调*/
success() {
this.init()
},
/*数据处理*/
showTabData(id) {
/* 控制查询loading */
this.$refs.TablePager.loading = true
doQueryDetail({
mid: id
}).then(res => {
if (res.success) {
let records = res.data.records || []
/* 数据处理*/
this.$refs.TablePager['tableData'] = records
}
}).finally(e => {
this.$refs.TablePager.loading = false
})
},
handleClick(item) {
console.log(item)
this.transXbt(item.$attrs.lx)
this.showTabData(item.name)
},
/* 基础查询*/
query: doQuery,
apiDelete: doDelete,
queryDetail: doQueryDetail
},
components: {
}
}
</script>
<style scoped>
</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