| @@ -90,3 +90,29 @@ export function resourceTypeAnalysis (deptId, year) { | |||
| params: query | |||
| }) | |||
| } | |||
| // 资源一张图-左下-资源发包分析 | |||
| export function resourceOutsourcingAnalysis (deptId, year) { | |||
| let query = { | |||
| deptId, | |||
| year | |||
| } | |||
| return request({ | |||
| url: 'api/home/xixia/resource/zyfbfx', | |||
| method: 'get', | |||
| params: query | |||
| }) | |||
| } | |||
| // 资源一张图-右上-合同类型分析 | |||
| export function analysisContractTypes (deptId, year) { | |||
| let query = { | |||
| deptId, | |||
| year | |||
| } | |||
| return request({ | |||
| url: 'api/home/xixia/resource/htgkfx', | |||
| method: 'get', | |||
| params: query | |||
| }) | |||
| } | |||
| @@ -1,10 +1,15 @@ | |||
| <Pannel title="资源发包分析" height="340" flexIble> | |||
| <Pannel title="资源发包分析" height="340" flexIble | |||
| 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="top"> | |||
| <PannelTabs @change="tabChange" :data="pannelTabData"></PannelTabs> | |||
| </div> | |||
| <div class="buttom"> | |||
| <Bar id="bar2"></Bar> | |||
| <Bar v-if="isLoad" id="bar2"></Bar> | |||
| </div> | |||
| </div> | |||
| </Pannel> | |||
| @@ -1,15 +1,34 @@ | |||
| import Pannel from '@/components/pannel/index.vue'; | |||
| import PannelTabs from '@/components/pannel-tabs/index.vue'; | |||
| import Bar from '@/components/charts/bar/index.vue'; | |||
| import { resourceOutsourcingAnalysis } from '../../../../api/index.js' | |||
| import { mapGetters } from 'vuex' | |||
| export default { | |||
| components: { | |||
| Bar, | |||
| PannelTabs, | |||
| Pannel | |||
| }, | |||
| computed: { | |||
| ...mapGetters(['year', 'deptId']) | |||
| }, | |||
| watch: { | |||
| year: { | |||
| handler () { | |||
| this.getData(); | |||
| }, | |||
| immediate: true, // 立即执行 | |||
| }, | |||
| deptId: { | |||
| handler () { | |||
| this.getData(); | |||
| }, | |||
| immediate: true, // 立即执行 | |||
| } | |||
| }, | |||
| data () { | |||
| return { | |||
| isLoad: false, | |||
| pannelTabData: [ | |||
| { | |||
| id: '1', | |||
| @@ -28,9 +47,24 @@ export default { | |||
| mounted () { | |||
| }, | |||
| methods: { | |||
| getData () { | |||
| if (this.year, this.deptId) { | |||
| this.isLoad = false; | |||
| resourceOutsourcingAnalysis(this.deptId, this.year).then(res => { | |||
| if (this.tabIndex == 1) { | |||
| this.data = res.data.xz | |||
| } else if (this.tabIndex == 2) { | |||
| this.data = res.data.cz | |||
| } | |||
| this.isLoad = true; | |||
| }) | |||
| } | |||
| }, | |||
| tabChange (info) { | |||
| //console.log(info); | |||
| this.tabIndex = info.id | |||
| this.getData() | |||
| } | |||
| } | |||
| }; | |||
| @@ -1,26 +1,26 @@ | |||
| export default [ | |||
| [ | |||
| { | |||
| name: '总资产(万元)', | |||
| name: '合同数量(个)', | |||
| icon: require('./1.png'), | |||
| value: '8000' | |||
| value: '0' | |||
| }, | |||
| { | |||
| name: '总负债(万元)', | |||
| name: '总合同额(万元)', | |||
| icon: require('./2.png'), | |||
| value: '257' | |||
| value: '0' | |||
| } | |||
| ], | |||
| [ | |||
| { | |||
| name: '总收入(万元)', | |||
| name: '已结款(万元)', | |||
| icon: require('./3.png'), | |||
| value: '1460' | |||
| value: '0' | |||
| }, | |||
| { | |||
| name: '总支出(万元)', | |||
| name: '待借款(万元)', | |||
| icon: require('./2.png'), | |||
| value: '1011' | |||
| value: '0' | |||
| } | |||
| ] | |||
| ] | |||
| @@ -1,14 +1,48 @@ | |||
| import Pannel from '@/components/pannel/index.vue'; | |||
| import Block from '@/components/block/index.vue'; | |||
| import data from './data.js'; | |||
| import { analysisContractTypes } from '../../../../api/index.js' | |||
| import { mapGetters } from 'vuex' | |||
| export default { | |||
| components: { | |||
| Block, | |||
| Pannel | |||
| }, | |||
| computed: { | |||
| ...mapGetters(['year', 'deptId']) | |||
| }, | |||
| watch: { | |||
| year: { | |||
| handler () { | |||
| this.getData(); | |||
| }, | |||
| immediate: true, // 立即执行 | |||
| }, | |||
| deptId: { | |||
| handler () { | |||
| this.getData(); | |||
| }, | |||
| immediate: true, // 立即执行 | |||
| } | |||
| }, | |||
| data () { | |||
| return { | |||
| data | |||
| }; | |||
| }, | |||
| methods: { | |||
| getData () { | |||
| if (this.year, this.deptId) { | |||
| this.isLoad = false; | |||
| analysisContractTypes(this.deptId, this.year).then(res => { | |||
| console.log('analysisContractTypes', res); | |||
| this.data[0][0].value = res.data.numHt | |||
| this.data[0][1].value = res.data.zhte | |||
| this.data[1][0].value = res.data.yjk | |||
| this.data[1][1].value = res.data.djk | |||
| this.isLoad = true; | |||
| }) | |||
| } | |||
| } | |||
| } | |||
| }; | |||