@@ -68,20 +68,15 @@ export default { | |||||
const option = { | const option = { | ||||
color: ["#3398DB"], | color: ["#3398DB"], | ||||
tooltip: { | tooltip: { | ||||
trigger: "axis", | |||||
axisPointer: { | |||||
type: "line", | |||||
lineStyle: { | |||||
opacity: 0, | |||||
}, | |||||
} | |||||
show: true, | |||||
trigger: "item", | |||||
}, | }, | ||||
legend: { | legend: { | ||||
data: ["直接访问", "背景"], | data: ["直接访问", "背景"], | ||||
show: false, | show: false, | ||||
}, | }, | ||||
grid: { | grid: { | ||||
left: "0%", | |||||
left: "10%", | |||||
right: "0%", | right: "0%", | ||||
bottom: "5%", | bottom: "5%", | ||||
top: "15%", | top: "15%", | ||||
@@ -179,6 +174,23 @@ export default { | |||||
shadowBlur: 10, | shadowBlur: 10, | ||||
color: 'rgba(18, 40, 83, 1)' | color: 'rgba(18, 40, 83, 1)' | ||||
}, | }, | ||||
renderItem: function (params, api) { | |||||
//获取对应类目的axisTick中心点坐标 | |||||
var start = api.coord([api.value(0)]); | |||||
//通过坐标系的宽度和类目数,计算单个类目的背景 | |||||
var width = (params.coordSys.width / 7) * 0.6; | |||||
return { | |||||
type: 'rect', | |||||
shape: { | |||||
// 相对左上角坐标 | |||||
x: start[0] - width / 2, | |||||
y: params.coordSys.y, | |||||
width: width, | |||||
height: params.coordSys.height, | |||||
}, | |||||
style: api.style() | |||||
}; | |||||
}, | |||||
itemStyle: { | itemStyle: { | ||||
normal: { | normal: { | ||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ | color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ | ||||
@@ -213,31 +225,7 @@ export default { | |||||
}, | }, | ||||
data: data, | data: data, | ||||
zlevel: 11, | zlevel: 11, | ||||
}, | |||||
{ | |||||
type: 'custom', | |||||
itemStyle: { | |||||
color: 'rgba(18, 40, 83, 0.4)' | |||||
}, | |||||
renderItem: function (params, api) { | |||||
//获取对应类目的axisTick中心点坐标 | |||||
var start = api.coord([api.value(0)]); | |||||
//通过坐标系的宽度和类目数,计算单个类目的背景 | |||||
var width = (params.coordSys.width / 7) * 0.6; | |||||
return { | |||||
type: 'rect', | |||||
shape: { | |||||
// 相对左上角坐标 | |||||
x: start[0] - width / 2, | |||||
y: params.coordSys.y, | |||||
width: width, | |||||
height: params.coordSys.height, | |||||
}, | |||||
style: api.style() | |||||
}; | |||||
}, | |||||
data: [100, 100, 100, 100, 100, 100, 100] | |||||
}, | |||||
} | |||||
], | ], | ||||
};; | };; | ||||
@@ -52,9 +52,7 @@ export default { | |||||
}; | }; | ||||
}, | }, | ||||
mounted () { | mounted () { | ||||
setTimeout(()=>{ | |||||
this.initChart(); | |||||
},2000) | |||||
this.initChart(); | |||||
}, | }, | ||||
computed: { | computed: { | ||||
}, | }, | ||||
@@ -145,20 +143,21 @@ export default { | |||||
type: "pie", | type: "pie", | ||||
radius: ["48%", "70%"], | radius: ["48%", "70%"], | ||||
color: ["rgba(15, 252, 252, 1)", "rgba(134, 91, 252, 1)", "rgba(49, 129, 246, 1)", "rgba(29, 197, 104, 1)","#ffc72b"], | |||||
color: ["rgba(15, 252, 252, 1)", "rgba(134, 91, 252, 1)", "rgba(49, 129, 246, 1)", "rgba(29, 197, 104, 1)", "#ffc72b"], | |||||
label: { | label: { | ||||
normal: { | normal: { | ||||
formatter: function (params, ticket, callback) { | formatter: function (params, ticket, callback) { | ||||
var total = 0; //考生总数量 | var total = 0; //考生总数量 | ||||
var percent = 0; //考生占比 | var percent = 0; //考生占比 | ||||
echartData.forEach(function (value, index, array) { | echartData.forEach(function (value, index, array) { | ||||
total += value.value; | |||||
total += value; | |||||
}); | }); | ||||
percent = ((params.value / total) * 100).toFixed(1); | percent = ((params.value / total) * 100).toFixed(1); | ||||
return ( | return ( | ||||
"{white|" + percent + "%" + "}\n" + | |||||
"{white|" + params.percent | |||||
+ "%" + "}\n" + | |||||
"{blue|" + params.name + "}\n" + | "{blue|" + params.name + "}\n" + | ||||
(that.showTit ? "{hr|}\n{yellow|" + params.value + params.data.unit + '}':'') | |||||
(that.showTit ? "{hr|}\n{yellow|" + params.value + params.data.unit + '}' : '') | |||||
); | ); | ||||
}, | }, | ||||
rich: rich, | rich: rich, | ||||
@@ -22,6 +22,16 @@ const ALL_CHANGED = ~(1 << 31); | |||||
export default { | export default { | ||||
components: { | components: { | ||||
}, | }, | ||||
watch: { | |||||
'queryParams.deptId': { | |||||
handler: function () { | |||||
console.log(this.queryParams.deptId); | |||||
this.commitDept(this.queryParams.deptId); | |||||
}, | |||||
immediate: true, // 立即执行 | |||||
} | |||||
}, | |||||
data () { | data () { | ||||
return { | return { | ||||
financeSummary: { | financeSummary: { | ||||
@@ -79,6 +89,8 @@ export default { | |||||
created () { | created () { | ||||
}, | }, | ||||
mounted () { | mounted () { | ||||
// console.log('当前年份', this.centerYear); | |||||
this.commitYear(this.centerYear); | |||||
// 获取geoserver的地址 | // 获取geoserver的地址 | ||||
this.getGeoServerUrl(); | this.getGeoServerUrl(); | ||||
getInfo().then(res => { | getInfo().then(res => { | ||||
@@ -91,11 +103,22 @@ export default { | |||||
}); | }); | ||||
}, | }, | ||||
methods: { | methods: { | ||||
/** | |||||
* 提交dept | |||||
* @param {*} deptId | |||||
*/ | |||||
commitDept (deptId) { | |||||
this.$store.commit('SET_DEPTID', deptId); | |||||
}, | |||||
commitYear (year) { | |||||
this.$store.commit('SET_YEAR', year); | |||||
}, | |||||
//切换年份 | //切换年份 | ||||
yearDropdown (item) { | yearDropdown (item) { | ||||
this.queryParams.year = item; | this.queryParams.year = item; | ||||
this.centerYear = item; | this.centerYear = item; | ||||
this.getData(YEAR_CHANGED); | this.getData(YEAR_CHANGED); | ||||
this.commitYear(item); | |||||
}, | }, | ||||
// 绘制地图 | // 绘制地图 | ||||
drawMap (node, isLocated) { // isLocated 控制地图是否跳转 | drawMap (node, isLocated) { // isLocated 控制地图是否跳转 | ||||
@@ -250,7 +273,6 @@ export default { | |||||
} | } | ||||
}); | }); | ||||
}, | }, | ||||
getData (mask) { | getData (mask) { | ||||
if (!mask) | if (!mask) | ||||
mask = ALL_CHANGED; | mask = ALL_CHANGED; | ||||
@@ -307,14 +329,12 @@ export default { | |||||
}); | }); | ||||
} | } | ||||
}, | }, | ||||
selectAddress (value, isLocated = true) { // isLocated 控制地图是否跳转 | selectAddress (value, isLocated = true) { // isLocated 控制地图是否跳转 | ||||
this.queryParams.deptId = value[value.length - 1]; | this.queryParams.deptId = value[value.length - 1]; | ||||
this.getData(DEPT_CHANGED); | this.getData(DEPT_CHANGED); | ||||
let node = this.$refs["cascader2"].panel.getNodeByValue(value); | let node = this.$refs["cascader2"].panel.getNodeByValue(value); | ||||
this.drawMap(node, isLocated); | this.drawMap(node, isLocated); | ||||
}, | }, | ||||
// 查找指定deptId的所有父节点id | // 查找指定deptId的所有父节点id | ||||
findParentNodeIds (tree, deptId, result) { | findParentNodeIds (tree, deptId, result) { | ||||
for (let node of tree) { | for (let node of tree) { | ||||
@@ -1,5 +1,7 @@ | |||||
const getters = { | const getters = { | ||||
sidebar: state => state.app.sidebar, | sidebar: state => state.app.sidebar, | ||||
year: state => state.user.year, | |||||
deptId: state => state.user.deptId, | |||||
size: state => state.app.size, | size: state => state.app.size, | ||||
device: state => state.app.device, | device: state => state.app.device, | ||||
visitedViews: state => state.tagsView.visitedViews, | visitedViews: state => state.tagsView.visitedViews, | ||||
@@ -9,7 +11,7 @@ const getters = { | |||||
name: state => state.user.name, | name: state => state.user.name, | ||||
introduction: state => state.user.introduction, | introduction: state => state.user.introduction, | ||||
roles: state => state.user.roles, | roles: state => state.user.roles, | ||||
userRoles:state => state.user.userRoles, | |||||
userRoles: state => state.user.userRoles, | |||||
permissions: state => state.user.permissions, | permissions: state => state.user.permissions, | ||||
setUpModuleId: state => state.user.setUpModuleId, | setUpModuleId: state => state.user.setUpModuleId, | ||||
permission_routes: state => state.permission.routes, | permission_routes: state => state.permission.routes, | ||||
@@ -35,5 +37,5 @@ const getters = { | |||||
bigscreenUrl: state => state.user.bigscreenUrl, //大数据指挥舱 | bigscreenUrl: state => state.user.bigscreenUrl, //大数据指挥舱 | ||||
globalLogo: state => state.user.globalLogo, //全局logo | globalLogo: state => state.user.globalLogo, //全局logo | ||||
screenLogo: state => state.user.screenLogo, //大屏logo | screenLogo: state => state.user.screenLogo, //大屏logo | ||||
} | |||||
} | |||||
export default getters | export default getters |
@@ -4,6 +4,8 @@ import { getToken, setToken, removeToken } from '@/utils/auth' | |||||
const user = { | const user = { | ||||
state: { | state: { | ||||
deptId: '', | |||||
year: '', | |||||
token: getToken(), | token: getToken(), | ||||
name: '', | name: '', | ||||
avatar: '', | avatar: '', | ||||
@@ -29,6 +31,9 @@ const user = { | |||||
}, | }, | ||||
mutations: { | mutations: { | ||||
SET_YEAR: (state, payload) => { | |||||
state.year = payload | |||||
}, | |||||
SET_TOKEN: (state, token) => { | SET_TOKEN: (state, token) => { | ||||
state.token = token | state.token = token | ||||
}, | }, | ||||
@@ -0,0 +1,173 @@ | |||||
import request from '@/utils/request' | |||||
// 资金一张图-左上-货币资金分析 | |||||
export function lefttopMonetaryFundAnalysis (deptId, year) { | |||||
let query = { | |||||
deptId, | |||||
year | |||||
} | |||||
return request({ | |||||
url: 'api/home/xixia/finance/hbzjfx', | |||||
method: 'get', | |||||
params: query | |||||
}) | |||||
} | |||||
// 资金一张图-左中-资金收入分析(类型) | |||||
export function leftbottomcapitalgainstype (deptId, year) { | |||||
let query = { | |||||
deptId, | |||||
year | |||||
} | |||||
return request({ | |||||
url: 'api/home/xixia/finance/zjsrlxfx', | |||||
method: 'get', | |||||
params: query | |||||
}) | |||||
} | |||||
// 资金一张图-左中-资金收入分析(趋势) | |||||
export function leftbottomcapitalgainstrend (deptId, year) { | |||||
let query = { | |||||
deptId, | |||||
year | |||||
} | |||||
return request({ | |||||
url: 'api/home/xixia/finance/zjsrqsfx', | |||||
method: 'get', | |||||
params: query | |||||
}) | |||||
} | |||||
// 资金一张图-左下-资金支出分析(类型) | |||||
export function analysisOfCapitalExpenditureType (deptId, year) { | |||||
let query = { | |||||
deptId, | |||||
year | |||||
} | |||||
return request({ | |||||
url: 'api/home/xixia/finance/zjzhclxfx', | |||||
method: 'get', | |||||
params: query | |||||
}) | |||||
} | |||||
// 资金一张图-左中-资金支出分析(趋势) | |||||
export function analysisOfCapitalExpenditureRend (deptId, year) { | |||||
let query = { | |||||
deptId, | |||||
year | |||||
} | |||||
return request({ | |||||
url: 'api/home/xixia/finance/zjzhcqsfx', | |||||
method: 'get', | |||||
params: query | |||||
}) | |||||
} | |||||
// 资金一张图-右上-资产负债分析 | |||||
export function assetLiabilityAnalysis (deptId, year) { | |||||
let query = { | |||||
deptId, | |||||
year | |||||
} | |||||
return request({ | |||||
url: 'api/home/xixia/finance/zcfzfx', | |||||
method: 'get', | |||||
params: query | |||||
}) | |||||
} | |||||
// 资金一张图-右中-资金收入排名 | |||||
export function rankingOfFundIncome (deptId, year) { | |||||
let query = { | |||||
deptId, | |||||
year | |||||
} | |||||
return request({ | |||||
url: 'api/home/xixia/finance/zjsrpm', | |||||
method: 'get', | |||||
params: query | |||||
}) | |||||
} | |||||
// 资金一张图-右下-资金支出排名 | |||||
export function rankingOfCapitalExpenditure (deptId, year) { | |||||
let query = { | |||||
deptId, | |||||
year | |||||
} | |||||
return request({ | |||||
url: 'api/home/xixia/finance/zjzhcpm', | |||||
method: 'get', | |||||
params: query | |||||
}) | |||||
} | |||||
// 资金一张图-中下-固定项目的金额指标 | |||||
export function fixedProjectAmountIndicator (deptId, year) { | |||||
let query = { | |||||
deptId, | |||||
year | |||||
} | |||||
return request({ | |||||
url: 'api/home/xixia/finance/srzhcjezb', | |||||
method: 'get', | |||||
params: query | |||||
}) | |||||
} | |||||
// 资金一张图-预警分析-左上-资金支出大额预警分析 | |||||
export function analysisOfLargeFundExpenditureWarning (deptId, year) { | |||||
let query = { | |||||
deptId, | |||||
year, | |||||
voucherAmountMin: 10000 | |||||
} | |||||
return request({ | |||||
url: 'api/home/xixia/financeWarning/zjzcdeyjfx', | |||||
method: 'get', | |||||
params: query | |||||
}) | |||||
} | |||||
// 资金一张图-预警分析-左下-资金往来不规范预警分析 | |||||
export function warninganalysisofnonstandardfund (deptId, year) { | |||||
let query = { | |||||
deptId, | |||||
year, | |||||
voucherAmountMin: 10000 | |||||
} | |||||
return request({ | |||||
url: 'api/home/xixia/financeWarning/zjwlbgfyjfx', | |||||
method: 'get', | |||||
params: query | |||||
}) | |||||
} | |||||
// 资金一张图-预警分析-右上-资金支出大额预警排名 | |||||
export function rankingOfLargeFundExpenditureWarning (deptId, year) { | |||||
let query = { | |||||
deptId, | |||||
year, | |||||
voucherAmountMin: 10000 | |||||
} | |||||
return request({ | |||||
url: 'api/home/xixia/financeWarning/zjzcdeyjpm', | |||||
method: 'get', | |||||
params: query | |||||
}) | |||||
} | |||||
// 资金一张图-预警分析-右下-资金往来不规范预警排名 | |||||
export function rankingOfNonStandardFundTransactionsWarning (deptId, year, type) { | |||||
let query = { | |||||
deptId, | |||||
year, | |||||
type | |||||
} | |||||
return request({ | |||||
url: 'api/home/xixia/financeWarning/zjwlbgfyjpm', | |||||
method: 'get', | |||||
params: query | |||||
}) | |||||
} |
@@ -1,18 +1,52 @@ | |||||
import BlockValue from '@/components/value/index.vue'; | import BlockValue from '@/components/value/index.vue'; | ||||
import data from './data.js'; | import data from './data.js'; | ||||
import { fixedProjectAmountIndicator } from '../../../api/index.js'; | |||||
import { mapGetters } from 'vuex'; | |||||
export default { | export default { | ||||
components: { | components: { | ||||
BlockValue | BlockValue | ||||
}, | }, | ||||
computed: { | |||||
...mapGetters(['year', 'deptId']) | |||||
}, | |||||
watch: { | |||||
year: { | |||||
handler () { | |||||
this.getData(); | |||||
}, | |||||
immediate: true, // 立即执行 | |||||
}, | |||||
deptId: { | |||||
handler () { | |||||
this.getData(); | |||||
}, | |||||
immediate: true, // 立即执行 | |||||
} | |||||
}, | |||||
data () { | data () { | ||||
return { | return { | ||||
data | data | ||||
}; | }; | ||||
}, | }, | ||||
created () { | |||||
}, | |||||
mounted () { | |||||
}, | |||||
methods: { | methods: { | ||||
getData () { | |||||
if (this.year, this.deptId) { | |||||
this.isLoad = false; | |||||
fixedProjectAmountIndicator(this.deptId, this.year).then(res => { | |||||
this.data[0][1].value = res.data.jysr; // 经营收入 | |||||
this.data[0][2].value = res.data.tzsy; // 投资收益 | |||||
this.data[0][3].value = res.data.bzsr; // 补助收入 | |||||
this.data[0][4].value = res.data.qtsr; // 补助收入 | |||||
this.data[1][0].value = res.data.jyzc; // 经营支出 | |||||
this.data[1][1].value = res.data.sjjfj; // 税金及附加 | |||||
this.data[1][2].value = res.data.glfy; // 管理费用 | |||||
this.data[1][3].value = res.data.gyzc; // 公益支出 | |||||
this.data[1][4].value = res.data.qtzc; // 其他支出 | |||||
this.data[1][5].value = res.data.sdsfy; // 所得税费用 | |||||
this.isLoad = true; | |||||
}) | |||||
} | |||||
} | |||||
} | } | ||||
}; | }; |
@@ -1,11 +1,16 @@ | |||||
<Pannel title="资金支出分析" height="340"> | |||||
<Pannel title="资金支出分析" height="340" | |||||
v-loading="!isLoad" | |||||
element-loading-text="拼命加载中" | |||||
element-loading-spinner="el-icon-loading" | |||||
element-loading-background="rgba(0, 0, 0, 0.1)" | |||||
> | |||||
<div class="full"> | <div class="full"> | ||||
<div class="top"> | <div class="top"> | ||||
<PannelTabs @change="tabChange" ></PannelTabs> | <PannelTabs @change="tabChange" ></PannelTabs> | ||||
</div> | </div> | ||||
<div class="buttom"> | <div class="buttom"> | ||||
<LineCharts v-if="tabIndex === '1'" id="otherline"></LineCharts> | |||||
<PieCharts v-if="tabIndex === '2'" id="otherpie"></PieCharts> | |||||
<LineCharts v-if="tabIndex === '1' && isLoad" id="otherline" :data="data"></LineCharts> | |||||
<PieCharts v-if="tabIndex === '2' && isLoad" id="otherpie" :data="data"></PieCharts> | |||||
</div> | </div> | ||||
</div> | </div> | ||||
</Pannel> | </Pannel> |
@@ -2,6 +2,8 @@ import Pannel from '@/components/pannel/index.vue'; | |||||
import PannelTabs from '@/components/pannel-tabs/index.vue'; | import PannelTabs from '@/components/pannel-tabs/index.vue'; | ||||
import LineCharts from '@/components/charts/line/index.vue'; | import LineCharts from '@/components/charts/line/index.vue'; | ||||
import PieCharts from '@/components/charts/pie/index.vue'; | import PieCharts from '@/components/charts/pie/index.vue'; | ||||
import { mapGetters } from 'vuex'; | |||||
import { analysisOfCapitalExpenditureType, analysisOfCapitalExpenditureRend } from '../../../../api/index.js'; | |||||
export default { | export default { | ||||
components: { | components: { | ||||
@@ -12,17 +14,73 @@ export default { | |||||
}, | }, | ||||
data () { | data () { | ||||
return { | return { | ||||
data: [], // 数据 | |||||
isLoad: false, // 是否加载完成 | |||||
tabIndex: '1' | tabIndex: '1' | ||||
}; | }; | ||||
}, | }, | ||||
computed: { | |||||
...mapGetters(['year', 'deptId']) | |||||
}, | |||||
created () { | created () { | ||||
}, | }, | ||||
mounted () { | mounted () { | ||||
}, | }, | ||||
watch: { | |||||
year: { | |||||
handler () { | |||||
this.getData(); | |||||
}, | |||||
immediate: true, // 立即执行 | |||||
}, | |||||
deptId: { | |||||
handler () { | |||||
this.getData(); | |||||
}, | |||||
immediate: true, // 立即执行 | |||||
} | |||||
}, | |||||
methods: { | methods: { | ||||
tabChange (info) { | tabChange (info) { | ||||
//console.log(info); | //console.log(info); | ||||
this.tabIndex = info.id | this.tabIndex = info.id | ||||
} | |||||
this.getData() | |||||
}, | |||||
// 获取数据 | |||||
getData () { | |||||
if (this.year || this.deptId) { | |||||
this.isLoad = false; | |||||
// 如果是趋势 | |||||
if (this.tabIndex == 1) { | |||||
analysisOfCapitalExpenditureRend(this.year, this.deptId).then(res => { | |||||
let data = res.data.map(item => { | |||||
return { | |||||
name: item.name + '月', | |||||
value: item.value | |||||
} | |||||
}) | |||||
this.data = data; | |||||
this.isLoad = true; | |||||
}) | |||||
} else if (this.tabIndex == 2) { | |||||
// 获取类型 | |||||
analysisOfCapitalExpenditureType(this.year, this.deptId).then(res => { | |||||
let data = res.data.list.map(item => { | |||||
return { | |||||
name: item.name, | |||||
value: item.value, | |||||
unit: '万元' | |||||
} | |||||
}) | |||||
this.data = data | |||||
this.isLoad = true; | |||||
}) | |||||
} | |||||
} | |||||
}, | |||||
} | } | ||||
}; | }; |
@@ -1,11 +1,16 @@ | |||||
<Pannel title="资金往来不规范预警分析" height="305"> | |||||
<Pannel title="资金往来不规范预警分析" height="305" | |||||
v-loading="!isLoad" | |||||
element-loading-text="拼命加载中" | |||||
element-loading-spinner="el-icon-loading" | |||||
element-loading-background="rgba(0, 0, 0, 0.1)" | |||||
> | |||||
<div class="full"> | <div class="full"> | ||||
<div class="top"> | <div class="top"> | ||||
<PannelTabs @change="tabChange" :data="pannelTabsData"></PannelTabs> | <PannelTabs @change="tabChange" :data="pannelTabsData"></PannelTabs> | ||||
</div> | </div> | ||||
<div class="buttom"> | <div class="buttom"> | ||||
<BarSign id="bar3"></BarSign> | |||||
<BarSign v-if="isLoad" id="bar3" :data="data"></BarSign> | |||||
</div> | </div> | ||||
</div> | </div> | ||||
</Pannel> | </Pannel> |
@@ -1,12 +1,31 @@ | |||||
import Pannel from '@/components/pannel/index.vue'; | import Pannel from '@/components/pannel/index.vue'; | ||||
import BarSign from '@/components/charts/bar-sign/index.vue'; | import BarSign from '@/components/charts/bar-sign/index.vue'; | ||||
import PannelTabs from '@/components/pannel-tabs/index.vue'; | import PannelTabs from '@/components/pannel-tabs/index.vue'; | ||||
import { mapGetters } from 'vuex'; | |||||
import { warninganalysisofnonstandardfund } from '../../../../api/index.js'; | |||||
export default { | export default { | ||||
components: { | components: { | ||||
BarSign, | BarSign, | ||||
PannelTabs, | PannelTabs, | ||||
Pannel | Pannel | ||||
}, | }, | ||||
computed: { | |||||
...mapGetters(['year', 'deptId']) | |||||
}, | |||||
watch: { | |||||
year: { | |||||
handler () { | |||||
this.getData(); | |||||
}, | |||||
immediate: true, // 立即执行 | |||||
}, | |||||
deptId: { | |||||
handler () { | |||||
this.getData(); | |||||
}, | |||||
immediate: true, // 立即执行 | |||||
} | |||||
}, | |||||
data () { | data () { | ||||
return { | return { | ||||
pannelTabsData: [ | pannelTabsData: [ | ||||
@@ -18,16 +37,41 @@ export default { | |||||
id: '2', | id: '2', | ||||
name: '收入' | name: '收入' | ||||
} | } | ||||
] | |||||
], | |||||
data: [], | |||||
isLoad: false, | |||||
tabIndex: '1' | |||||
}; | }; | ||||
}, | }, | ||||
created () { | |||||
}, | |||||
mounted () { | |||||
}, | |||||
methods: { | methods: { | ||||
tabChange () { | |||||
getData () { | |||||
if (this.year, this.deptId) { | |||||
this.isLoad = false; | |||||
warninganalysisofnonstandardfund(this.deptId, this.year).then(res => { | |||||
if (this.tabIndex == 1) { | |||||
let arr = res.data.zc.map(item => { | |||||
return { | |||||
name: item.name, | |||||
name: item.value | |||||
} | |||||
}) | |||||
this.data = arr | |||||
} else if (this.tabIndex == 2) { | |||||
let arr = res.data.sr.map(item => { | |||||
return { | |||||
name: item.name, | |||||
name: item.value | |||||
} | |||||
}) | |||||
this.data = arr | |||||
} | |||||
this.isLoad = true; | |||||
}) | |||||
} | |||||
}, | |||||
tabChange (info) { | |||||
this.tabIndex = info.id | |||||
this.getData() | |||||
} | } | ||||
} | } | ||||
}; | }; |
@@ -1,11 +1,16 @@ | |||||
<Pannel title="资金收入分析" height="340"> | |||||
<Pannel title="资金收入分析" height="340" | |||||
v-loading="!isLoad" | |||||
element-loading-text="拼命加载中" | |||||
element-loading-spinner="el-icon-loading" | |||||
element-loading-background="rgba(0, 0, 0, 0.1)" | |||||
> | |||||
<div class="full"> | <div class="full"> | ||||
<div class="top"> | <div class="top"> | ||||
<PannelTabs @change="tabChange"></PannelTabs> | <PannelTabs @change="tabChange"></PannelTabs> | ||||
</div> | </div> | ||||
<div class="buttom"> | <div class="buttom"> | ||||
<LineCharts v-if="tabIndex === '1'"></LineCharts> | |||||
<PieCharts v-if="tabIndex === '2'"></PieCharts> | |||||
<LineCharts v-if="tabIndex === '1' && isLoad" :data="data"></LineCharts> | |||||
<PieCharts v-if="tabIndex === '2' && isLoad" :data="data"></PieCharts> | |||||
</div> | </div> | ||||
</div> | </div> | ||||
</Pannel> | </Pannel> |
@@ -2,7 +2,15 @@ import Pannel from '@/components/pannel/index.vue'; | |||||
import PannelTabs from '@/components/pannel-tabs/index.vue'; | import PannelTabs from '@/components/pannel-tabs/index.vue'; | ||||
import LineCharts from '@/components/charts/line/index.vue'; | import LineCharts from '@/components/charts/line/index.vue'; | ||||
import PieCharts from '@/components/charts/pie/index.vue'; | import PieCharts from '@/components/charts/pie/index.vue'; | ||||
import { mapGetters } from 'vuex'; | |||||
import { leftbottomcapitalgainstrend, leftbottomcapitalgainstype } from '../../../../api/index.js'; | |||||
const map = { | |||||
'经营收入': '万元', | |||||
'补助收入': '万吨', | |||||
'投资收益': '万元', | |||||
'其他收入': '万吨' | |||||
} | |||||
export default { | export default { | ||||
components: { | components: { | ||||
LineCharts, | LineCharts, | ||||
@@ -12,16 +20,73 @@ export default { | |||||
}, | }, | ||||
data () { | data () { | ||||
return { | return { | ||||
data: [], // 数据 | |||||
isLoad: false, // 是否加载完成 | |||||
tabIndex: '1' | tabIndex: '1' | ||||
}; | }; | ||||
}, | }, | ||||
computed: { | |||||
...mapGetters(['year', 'deptId']) | |||||
}, | |||||
watch: { | |||||
year: { | |||||
handler () { | |||||
this.getData(); | |||||
}, | |||||
immediate: true, // 立即执行 | |||||
}, | |||||
deptId: { | |||||
handler () { | |||||
this.getData(); | |||||
}, | |||||
immediate: true, // 立即执行 | |||||
} | |||||
}, | |||||
created () { | created () { | ||||
}, | }, | ||||
mounted () { | mounted () { | ||||
}, | }, | ||||
methods: { | methods: { | ||||
// 获取数据 | |||||
getData () { | |||||
if (this.year || this.deptId) { | |||||
this.isLoad = false; | |||||
// 如果是趋势 | |||||
if (this.tabIndex == 1) { | |||||
leftbottomcapitalgainstrend(this.year, this.deptId).then(res => { | |||||
let data = res.data.map(item => { | |||||
return { | |||||
name: item.name + '月', | |||||
value: item.value | |||||
} | |||||
}) | |||||
this.data = data; | |||||
this.isLoad = true; | |||||
}) | |||||
} else if (this.tabIndex == 2) { | |||||
// 获取类型 | |||||
leftbottomcapitalgainstype(this.year, this.deptId).then(res => { | |||||
let data = res.data.list.map(item => { | |||||
return { | |||||
name: item.name, | |||||
value: item.value, | |||||
unit: this.unitMaker(item.name) | |||||
} | |||||
}) | |||||
this.data = data | |||||
this.isLoad = true; | |||||
}) | |||||
} | |||||
} | |||||
}, | |||||
unitMaker (val) { | |||||
return map[val]; | |||||
}, | |||||
tabChange (info) { | tabChange (info) { | ||||
this.tabIndex = info.id | this.tabIndex = info.id | ||||
this.getData() | |||||
} | } | ||||
} | } | ||||
}; | }; |
@@ -1,4 +1,9 @@ | |||||
<Pannel title="货币资金分析" height="232"> | |||||
<Pannel title="货币资金分析" height="232" | |||||
v-loading="!isLoad" | |||||
element-loading-text="拼命加载中" | |||||
element-loading-spinner="el-icon-loading" | |||||
element-loading-background="rgba(0, 0, 0, 0.1)" | |||||
> | |||||
<table> | <table> | ||||
<tr v-for="line in data"> | <tr v-for="line in data"> | ||||
<td v-for="item in line"> | <td v-for="item in line"> | ||||
@@ -1,13 +1,49 @@ | |||||
import Pannel from '@/components/pannel/index.vue'; | import Pannel from '@/components/pannel/index.vue'; | ||||
import Block from '@/components/block/index.vue'; | import Block from '@/components/block/index.vue'; | ||||
import data from './data.js'; | import data from './data.js'; | ||||
import { mapGetters } from 'vuex'; | |||||
import { lefttopMonetaryFundAnalysis } from '../../../../api/index.js'; | |||||
export default { | export default { | ||||
components: { | components: { | ||||
Block, | Block, | ||||
Pannel | Pannel | ||||
}, | }, | ||||
computed: { | |||||
...mapGetters(['year', 'deptId']) | |||||
}, | |||||
watch: { | |||||
year: { | |||||
handler () { | |||||
this.getData(); | |||||
}, | |||||
immediate: true, // 立即执行 | |||||
}, | |||||
deptId: { | |||||
handler () { | |||||
this.getData(); | |||||
}, | |||||
immediate: true, // 立即执行 | |||||
} | |||||
}, | |||||
methods: { | |||||
getData () { | |||||
if (this.year, this.deptId) { | |||||
this.isLoad = false; | |||||
lefttopMonetaryFundAnalysis(this.deptId, this.year).then(res => { | |||||
this.data[0][0].value = res.data.cke // 存款额 | |||||
this.data[0][1].value = res.data.ckzzs // 组织数 | |||||
this.data[1][0].value = res.data.xje // 现金额(万元) | |||||
this.data[1][1].value = res.data.xjzzs | |||||
this.isLoad = true; | |||||
}) | |||||
} | |||||
} | |||||
}, | |||||
data () { | data () { | ||||
return { | return { | ||||
isLoad: false, // 是否加载完成 | |||||
data | data | ||||
}; | }; | ||||
} | } | ||||
@@ -1,4 +1,9 @@ | |||||
<Pannel title="资金支出大额预警分析" height="305"> | |||||
<Bar></Bar> | |||||
<Pannel title="资金支出大额预警分析" height="305" | |||||
v-loading="!isLoad" | |||||
element-loading-text="拼命加载中" | |||||
element-loading-spinner="el-icon-loading" | |||||
element-loading-background="rgba(0, 0, 0, 0.1)" | |||||
> | |||||
<Bar v-if="isLoad" :data="data"></Bar> | |||||
</Pannel> | </Pannel> |
@@ -1,13 +1,33 @@ | |||||
import Pannel from '@/components/pannel/index.vue'; | import Pannel from '@/components/pannel/index.vue'; | ||||
import Bar from '@/components/charts/bar/index.vue'; | import Bar from '@/components/charts/bar/index.vue'; | ||||
import { mapGetters } from 'vuex'; | |||||
import { analysisOfLargeFundExpenditureWarning } from '../../../../api/index.js'; | |||||
export default { | export default { | ||||
components: { | components: { | ||||
Bar, | Bar, | ||||
Pannel | Pannel | ||||
}, | }, | ||||
computed: { | |||||
...mapGetters(['year', 'deptId']) | |||||
}, | |||||
watch: { | |||||
year: { | |||||
handler () { | |||||
this.getData(); | |||||
}, | |||||
immediate: true, // 立即执行 | |||||
}, | |||||
deptId: { | |||||
handler () { | |||||
this.getData(); | |||||
}, | |||||
immediate: true, // 立即执行 | |||||
} | |||||
}, | |||||
data () { | data () { | ||||
return { | return { | ||||
isLoad: false, | |||||
data: [] | |||||
}; | }; | ||||
}, | }, | ||||
created () { | created () { | ||||
@@ -15,5 +35,20 @@ export default { | |||||
mounted () { | mounted () { | ||||
}, | }, | ||||
methods: { | methods: { | ||||
getData () { | |||||
if (this.year, this.deptId) { | |||||
this.isLoad = false; | |||||
analysisOfLargeFundExpenditureWarning(this.deptId, this.year).then(res => { | |||||
let arr = res.data.map(item => { | |||||
return { | |||||
name: item.name, | |||||
value: item.value | |||||
} | |||||
}) | |||||
this.data = arr; | |||||
this.isLoad = true; | |||||
}) | |||||
} | |||||
} | |||||
} | } | ||||
}; | }; |
@@ -1,3 +1,3 @@ | |||||
<Pannel title="资金支出排名" height="340"> | <Pannel title="资金支出排名" height="340"> | ||||
<ScrollTable></ScrollTable> | |||||
<ScrollTable v-if="isLoad" :data="data" :headers="['部门名称', '收入金额', '排名']"></ScrollTable> | |||||
</Pannel> | </Pannel> |
@@ -1,19 +1,51 @@ | |||||
import Pannel from '@/components/pannel/index.vue'; | import Pannel from '@/components/pannel/index.vue'; | ||||
import ScrollTable from '@/components/scroll-table/index.vue'; | import ScrollTable from '@/components/scroll-table/index.vue'; | ||||
import { rankingOfCapitalExpenditure } from '../../../../api/index.js'; | |||||
import { mapGetters } from 'vuex'; | |||||
export default { | export default { | ||||
components: { | components: { | ||||
ScrollTable, | ScrollTable, | ||||
Pannel | Pannel | ||||
}, | }, | ||||
computed: { | |||||
...mapGetters(['year', 'deptId']) | |||||
}, | |||||
watch: { | |||||
year: { | |||||
handler () { | |||||
this.getData(); | |||||
}, | |||||
immediate: true, // 立即执行 | |||||
}, | |||||
deptId: { | |||||
handler () { | |||||
this.getData(); | |||||
}, | |||||
immediate: true, // 立即执行 | |||||
} | |||||
}, | |||||
data () { | data () { | ||||
return { | return { | ||||
isLoad: false | |||||
}; | }; | ||||
}, | }, | ||||
created () { | created () { | ||||
}, | }, | ||||
mounted () { | mounted () { | ||||
}, | }, | ||||
methods: { | methods: { | ||||
getData () { | |||||
if (this.year, this.deptId) { | |||||
this.isLoad = false; | |||||
rankingOfCapitalExpenditure(this.deptId, this.year).then(res => { | |||||
let data = res.data.map(item => { | |||||
return [item.name, item.value, item.index] | |||||
}) | |||||
this.data = data; | |||||
this.isLoad = true; | |||||
}) | |||||
} | |||||
} | |||||
} | } | ||||
}; | }; |
@@ -1,11 +1,16 @@ | |||||
<Pannel title="资金往来不规范预警排名" height="305"> | |||||
<Pannel title="资金往来不规范预警排名" height="305" | |||||
v-loading="!isLoad" | |||||
element-loading-text="拼命加载中" | |||||
element-loading-spinner="el-icon-loading" | |||||
element-loading-background="rgba(0, 0, 0, 0.1)" | |||||
> | |||||
<div class="full"> | <div class="full"> | ||||
<div class="top"> | <div class="top"> | ||||
<PannelTabs :data="pannelTabsData" @change="tabChange"></PannelTabs> | <PannelTabs :data="pannelTabsData" @change="tabChange"></PannelTabs> | ||||
</div> | </div> | ||||
<div class="buttom"> | <div class="buttom"> | ||||
<ScrollTable :headers="headers" :bodyHeight="160"></ScrollTable> | |||||
<ScrollTable v-if="isLoad" :headers="headers" :data="data" :bodyHeight="160"></ScrollTable> | |||||
</div> | </div> | ||||
</div> | </div> | ||||
</Pannel> | </Pannel> |
@@ -1,14 +1,34 @@ | |||||
import Pannel from '@/components/pannel/index.vue'; | import Pannel from '@/components/pannel/index.vue'; | ||||
import ScrollTable from '@/components/scroll-table/index.vue'; | import ScrollTable from '@/components/scroll-table/index.vue'; | ||||
import PannelTabs from '@/components/pannel-tabs/index.vue'; | import PannelTabs from '@/components/pannel-tabs/index.vue'; | ||||
import { rankingOfNonStandardFundTransactionsWarning } from '../../../../api/index.js'; | |||||
import { mapGetters } from 'vuex'; | |||||
export default { | export default { | ||||
components: { | components: { | ||||
PannelTabs, | PannelTabs, | ||||
ScrollTable, | ScrollTable, | ||||
Pannel | Pannel | ||||
}, | }, | ||||
computed: { | |||||
...mapGetters(['year', 'deptId']) | |||||
}, | |||||
watch: { | |||||
year: { | |||||
handler () { | |||||
this.getData(); | |||||
}, | |||||
immediate: true, // 立即执行 | |||||
}, | |||||
deptId: { | |||||
handler () { | |||||
this.getData(); | |||||
}, | |||||
immediate: true, // 立即执行 | |||||
} | |||||
}, | |||||
data () { | data () { | ||||
return { | return { | ||||
data: [], | |||||
pannelTabsData: [ | pannelTabsData: [ | ||||
{ | { | ||||
id: '1', | id: '1', | ||||
@@ -20,6 +40,7 @@ export default { | |||||
} | } | ||||
], | ], | ||||
tabIndex: '1', | tabIndex: '1', | ||||
isLoad: false, | |||||
headers: ['部门名称', '支出金额', '排名'] | headers: ['部门名称', '支出金额', '排名'] | ||||
}; | }; | ||||
}, | }, | ||||
@@ -28,8 +49,21 @@ export default { | |||||
mounted () { | mounted () { | ||||
}, | }, | ||||
methods: { | methods: { | ||||
getData () { | |||||
if (this.year, this.deptId) { | |||||
this.isLoad = false; | |||||
rankingOfNonStandardFundTransactionsWarning(this.deptId, this.year, this.tabIndex).then(res => { | |||||
let data = res.rows.map(item => { | |||||
return [item.name, item.value, item.index] | |||||
}) | |||||
this.data = data; | |||||
this.isLoad = true; | |||||
}) | |||||
} | |||||
}, | |||||
tabChange (info) { | tabChange (info) { | ||||
this.tabIndex = info.id | this.tabIndex = info.id | ||||
this.getData() | |||||
} | } | ||||
} | } | ||||
}; | }; |
@@ -1,3 +1,3 @@ | |||||
<Pannel title="资金收入排名" height="340"> | <Pannel title="资金收入排名" height="340"> | ||||
<ScrollTable></ScrollTable> | |||||
<ScrollTable v-if="isLoad" :data="data" :headers="['部门名称', '收入金额', '排名']"></ScrollTable> | |||||
</Pannel> | </Pannel> |
@@ -1,13 +1,33 @@ | |||||
import Pannel from '@/components/pannel/index.vue'; | import Pannel from '@/components/pannel/index.vue'; | ||||
import ScrollTable from '@/components/scroll-table/index.vue'; | import ScrollTable from '@/components/scroll-table/index.vue'; | ||||
import { rankingOfFundIncome } from '../../../../api/index.js'; | |||||
import { mapGetters } from 'vuex'; | |||||
export default { | export default { | ||||
components: { | components: { | ||||
ScrollTable, | ScrollTable, | ||||
Pannel | Pannel | ||||
}, | }, | ||||
computed: { | |||||
...mapGetters(['year', 'deptId']) | |||||
}, | |||||
watch: { | |||||
year: { | |||||
handler () { | |||||
this.getData(); | |||||
}, | |||||
immediate: true, // 立即执行 | |||||
}, | |||||
deptId: { | |||||
handler () { | |||||
this.getData(); | |||||
}, | |||||
immediate: true, // 立即执行 | |||||
} | |||||
}, | |||||
data () { | data () { | ||||
return { | return { | ||||
isLoad: false, | |||||
data: [] | |||||
}; | }; | ||||
}, | }, | ||||
created () { | created () { | ||||
@@ -15,5 +35,17 @@ export default { | |||||
mounted () { | mounted () { | ||||
}, | }, | ||||
methods: { | methods: { | ||||
getData () { | |||||
if (this.year, this.deptId) { | |||||
this.isLoad = false; | |||||
rankingOfFundIncome(this.deptId, this.year).then(res => { | |||||
let data = res.data.map(item => { | |||||
return [item.name, item.value, item.index] | |||||
}) | |||||
this.data = data; | |||||
this.isLoad = true; | |||||
}) | |||||
} | |||||
} | |||||
} | } | ||||
}; | }; |
@@ -1,4 +1,9 @@ | |||||
<Pannel title="资产负债分析" height="232"> | |||||
<Pannel title="资产负债分析" height="232" | |||||
v-loading="!isLoad" | |||||
element-loading-text="拼命加载中" | |||||
element-loading-spinner="el-icon-loading" | |||||
element-loading-background="rgba(0, 0, 0, 0.1)" | |||||
> | |||||
<table> | <table> | ||||
<tr v-for="line in data"> | <tr v-for="line in data"> | ||||
<td v-for="item in line"> | <td v-for="item in line"> | ||||
@@ -1,11 +1,45 @@ | |||||
import Pannel from '@/components/pannel/index.vue'; | import Pannel from '@/components/pannel/index.vue'; | ||||
import Block from '@/components/block/index.vue'; | import Block from '@/components/block/index.vue'; | ||||
import data from './data.js'; | import data from './data.js'; | ||||
import { assetLiabilityAnalysis } from '../../../../api/index.js'; | |||||
import { mapGetters } from 'vuex'; | |||||
export default { | export default { | ||||
components: { | components: { | ||||
Block, | Block, | ||||
Pannel | Pannel | ||||
}, | }, | ||||
computed: { | |||||
...mapGetters(['year', 'deptId']) | |||||
}, | |||||
watch: { | |||||
year: { | |||||
handler () { | |||||
this.getData(); | |||||
}, | |||||
immediate: true, // 立即执行 | |||||
}, | |||||
deptId: { | |||||
handler () { | |||||
this.getData(); | |||||
}, | |||||
immediate: true, // 立即执行 | |||||
} | |||||
}, | |||||
methods: { | |||||
getData () { | |||||
if (this.year, this.deptId) { | |||||
this.isLoad = false; | |||||
assetLiabilityAnalysis(this.deptId, this.year).then(res => { | |||||
this.data[0][0].value = res.data.zc // 总资产(万元) | |||||
this.data[0][1].value = res.data.fz // 总负债(万元) | |||||
this.data[1][0].value = res.data.sr // 总收入(万元) | |||||
this.data[1][1].value = res.data.zhc // 总支出(万元) | |||||
this.isLoad = true; | |||||
}) | |||||
} | |||||
} | |||||
}, | |||||
data () { | data () { | ||||
return { | return { | ||||
data | data | ||||
@@ -1,4 +1,9 @@ | |||||
<Pannel title="资金支出大额预警排名" height="305"> | |||||
<ScrollTable :headers="headers"></ScrollTable> | |||||
<Pannel title="资金支出大额预警排名" height="305" | |||||
v-loading="!isLoad" | |||||
element-loading-text="拼命加载中" | |||||
element-loading-spinner="el-icon-loading" | |||||
element-loading-background="rgba(0, 0, 0, 0.1)" | |||||
> | |||||
<ScrollTable v-if="isLoad" :data="data" :headers="headers"></ScrollTable> | |||||
</Pannel> | </Pannel> |
@@ -1,12 +1,32 @@ | |||||
import Pannel from '@/components/pannel/index.vue'; | import Pannel from '@/components/pannel/index.vue'; | ||||
import ScrollTable from '@/components/scroll-table/index.vue'; | import ScrollTable from '@/components/scroll-table/index.vue'; | ||||
import { rankingOfLargeFundExpenditureWarning } from '../../../../api/index.js'; | |||||
import { mapGetters } from 'vuex'; | |||||
export default { | export default { | ||||
components: { | components: { | ||||
ScrollTable, | ScrollTable, | ||||
Pannel | Pannel | ||||
}, | }, | ||||
computed: { | |||||
...mapGetters(['year', 'deptId']) | |||||
}, | |||||
watch: { | |||||
year: { | |||||
handler () { | |||||
this.getData(); | |||||
}, | |||||
immediate: true, // 立即执行 | |||||
}, | |||||
deptId: { | |||||
handler () { | |||||
this.getData(); | |||||
}, | |||||
immediate: true, // 立即执行 | |||||
} | |||||
}, | |||||
data () { | data () { | ||||
return { | return { | ||||
isLoad: false, | |||||
headers: ['部门名称', '支出金额', '排名'] | headers: ['部门名称', '支出金额', '排名'] | ||||
}; | }; | ||||
}, | }, | ||||
@@ -15,5 +35,17 @@ export default { | |||||
mounted () { | mounted () { | ||||
}, | }, | ||||
methods: { | methods: { | ||||
getData () { | |||||
if (this.year, this.deptId) { | |||||
this.isLoad = false; | |||||
rankingOfLargeFundExpenditureWarning(this.deptId, this.year).then(res => { | |||||
let data = res.rows.map(item => { | |||||
return [item.name, item.value, item.index] | |||||
}) | |||||
this.data = data; | |||||
this.isLoad = true; | |||||
}) | |||||
} | |||||
} | |||||
} | } | ||||
}; | }; |