@@ -64,3 +64,16 @@ export function longTermContractNonExecutionWarning (deptId, year) { | |||||
params: query | params: query | ||||
}) | }) | ||||
} | } | ||||
// 资源一张图-左上-资源概况分析 | |||||
export function resourceOverviewAnalysis (deptId, year) { | |||||
let query = { | |||||
deptId, | |||||
year | |||||
} | |||||
return request({ | |||||
url: 'api/home/xixia/resource/zygkfx', | |||||
method: 'get', | |||||
params: query | |||||
}) | |||||
} |
@@ -1,4 +1,4 @@ | |||||
<Pannel title="资金支出分析" height="340" flexIble> | |||||
<Pannel title="资源发包分析" height="340" flexIble> | |||||
<div class="full"> | <div class="full"> | ||||
<div class="top"> | <div class="top"> | ||||
<PannelTabs @change="tabChange" :data="pannelTabData"></PannelTabs> | <PannelTabs @change="tabChange" :data="pannelTabData"></PannelTabs> | ||||
@@ -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)" | |||||
> | |||||
<div class="full colbox"> | <div class="full colbox"> | ||||
<div class="top"> | <div class="top"> | ||||
<div v-for="item in data" class="item"> | <div v-for="item in data" class="item"> | ||||
@@ -10,7 +15,7 @@ | |||||
</div> | </div> | ||||
</div> | </div> | ||||
<div class="buttom"> | <div class="buttom"> | ||||
<HorizontalBar></HorizontalBar> | |||||
<HorizontalBar v-if="isLoad" :data="barData"></HorizontalBar> | |||||
</div> | </div> | ||||
</div> | </div> | ||||
</Pannel> | </Pannel> |
@@ -1,13 +1,32 @@ | |||||
import Pannel from '@/components/pannel/index.vue'; | import Pannel from '@/components/pannel/index.vue'; | ||||
import HorizontalBar from '@/components/charts/horizontal-bar/index.vue'; | import HorizontalBar from '@/components/charts/horizontal-bar/index.vue'; | ||||
import { resourceOverviewAnalysis } from '../../../../api/index.js' | |||||
import { mapGetters } from 'vuex'; | |||||
export default { | export default { | ||||
components: { | components: { | ||||
HorizontalBar, | HorizontalBar, | ||||
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: [ | data: [ | ||||
{ | { | ||||
name: '农用地', | name: '农用地', | ||||
@@ -24,9 +43,34 @@ export default { | |||||
value: '500', | value: '500', | ||||
unit: '亩' | unit: '亩' | ||||
} | } | ||||
] | |||||
], | |||||
barData: [] | |||||
}; | }; | ||||
}, | }, | ||||
methods: { | methods: { | ||||
getData () { | |||||
if (this.year, this.deptId) { | |||||
this.isLoad = false; | |||||
resourceOverviewAnalysis(this.deptId, this.year).then(res => { | |||||
console.log(222, res); | |||||
this.data[0].value = res.data.nyd | |||||
this.data[1].value = res.data.jsyd | |||||
this.data[2].value = res.data.wlydjlm | |||||
let barData = [ | |||||
{ | |||||
name: '闲置', | |||||
value: res.data.xz | |||||
}, | |||||
{ | |||||
name: '出租/出借', | |||||
value: res.data.czcj | |||||
} | |||||
] | |||||
this.barData = barData; | |||||
this.isLoad = true; | |||||
}) | |||||
} | |||||
} | |||||
} | } | ||||
}; | }; |