首页机具供应展示图表等接口调试完成
This commit is contained in:
BianLzhaoMin
parent
93d078d2be
commit
dc6efc9d90
|
|
@ -8,3 +8,19 @@ export const getCardListApi = data => {
|
|||
params: data
|
||||
})
|
||||
}
|
||||
// 获取饼图1数据信息
|
||||
export const getPie_1DataApi = data => {
|
||||
return request({
|
||||
url: '/material/mainPage/getDemandTotal',
|
||||
method: 'get',
|
||||
params: data
|
||||
})
|
||||
}
|
||||
// 获取柱状图和折线图数据信息
|
||||
export const getBarAndLineDataApi = data => {
|
||||
return request({
|
||||
url: '/material/mainPage/getDemandList',
|
||||
method: 'get',
|
||||
params: data
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -23,6 +23,18 @@ export default {
|
|||
height: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
barAndLineX: {
|
||||
type: Array,
|
||||
default: () => ['机具']
|
||||
},
|
||||
barY1: {
|
||||
type: Array,
|
||||
default: () => ['0']
|
||||
},
|
||||
barY2: {
|
||||
type: Array,
|
||||
default: () => ['0']
|
||||
}
|
||||
},
|
||||
data() {
|
||||
|
|
@ -42,6 +54,26 @@ export default {
|
|||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
watch: {
|
||||
barAndLineX: {
|
||||
deep: true,
|
||||
handler() {
|
||||
this.initChart()
|
||||
}
|
||||
},
|
||||
barY1: {
|
||||
deep: true,
|
||||
handler() {
|
||||
this.initChart()
|
||||
}
|
||||
},
|
||||
barY2: {
|
||||
deep: true,
|
||||
handler() {
|
||||
this.initChart()
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(this.$el, 'macarons')
|
||||
|
|
@ -77,7 +109,8 @@ export default {
|
|||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: ['卸扣5t', '卸扣8t', '手扳葫芦', '绞磨', '机具1', '机具2', '机具13'],
|
||||
// data: ['卸扣5t', '卸扣8t', '手扳葫芦', '绞磨', '机具1', '机具2', '机具13'],
|
||||
data: this.barAndLineX,
|
||||
axisTick: {
|
||||
alignWithLabel: true
|
||||
},
|
||||
|
|
@ -111,7 +144,7 @@ export default {
|
|||
name: '需求',
|
||||
type: 'bar',
|
||||
barWidth: '20%', // 柱子宽度
|
||||
data: [79, 52, 200, 334, 390, 330, 220],
|
||||
data: this.barY1,
|
||||
animationDuration: 2000,
|
||||
itemStyle: {
|
||||
color: '#26a8ff' // 自定义颜色
|
||||
|
|
@ -121,7 +154,7 @@ export default {
|
|||
name: '供应',
|
||||
type: 'bar',
|
||||
barWidth: '20%', // 柱子宽度
|
||||
data: [80, 52, 200, 334, 390, 330, 220],
|
||||
data: this.barY2,
|
||||
animationDuration: 2000,
|
||||
itemStyle: {
|
||||
color: '#ff8e9d' // 自定义颜色
|
||||
|
|
|
|||
|
|
@ -29,6 +29,24 @@ export default {
|
|||
chartData: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
barAndLineX: {
|
||||
type: Array,
|
||||
default: () => ['机具']
|
||||
},
|
||||
// 折线图 Y 轴数据源1
|
||||
lineY1: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
},
|
||||
// 折线图 Y 轴数据源2
|
||||
lineY2: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
|
|
@ -37,10 +55,22 @@ export default {
|
|||
}
|
||||
},
|
||||
watch: {
|
||||
chartData: {
|
||||
barAndLineX: {
|
||||
deep: true,
|
||||
handler(val) {
|
||||
this.setOptions(val)
|
||||
handler() {
|
||||
this.initChart()
|
||||
}
|
||||
},
|
||||
lineY1: {
|
||||
deep: true,
|
||||
handler() {
|
||||
this.initChart()
|
||||
}
|
||||
},
|
||||
lineY2: {
|
||||
deep: true,
|
||||
handler() {
|
||||
this.initChart()
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
@ -65,7 +95,8 @@ export default {
|
|||
this.chart.setOption({
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['卸扣5t', '卸扣8t', '手扳葫芦', '绞磨', '机具1', '机具2', '机具13'],
|
||||
// data: ['卸扣5t', '卸扣8t', '手扳葫芦', '绞磨', '机具1', '机具2', '机具13'],
|
||||
data: this.barAndLineX,
|
||||
boundaryGap: false, // 折线与 y 轴不留间隙
|
||||
axisTick: {
|
||||
show: true // 隐藏刻度线
|
||||
|
|
@ -124,7 +155,7 @@ export default {
|
|||
name: '需求量',
|
||||
type: 'line',
|
||||
smooth: false, // 平滑曲线
|
||||
data: [12, 66, 88, 90, 70, 110, 20], // 数据
|
||||
data: this.lineY1, // 数据
|
||||
itemStyle: {
|
||||
color: '#33aeff' // 折线颜色
|
||||
},
|
||||
|
|
@ -144,7 +175,7 @@ export default {
|
|||
name: '待供应量',
|
||||
type: 'line',
|
||||
smooth: false, // 平滑曲线
|
||||
data: [12, 20, 22, 30, 99, 60, 3], // 数据
|
||||
data: this.lineY2, // 数据
|
||||
itemStyle: {
|
||||
color: '#ff8e9d' // 折线颜色
|
||||
},
|
||||
|
|
|
|||
|
|
@ -21,6 +21,16 @@ export default {
|
|||
height: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
pie_1Data: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return [
|
||||
{ value: 0, name: '计划需求量', itemStyle: { color: '#65dfe0' } },
|
||||
{ value: 0, name: '已供应量', itemStyle: { color: '#ff8e9d' } },
|
||||
{ value: 0, name: '待供应量', itemStyle: { color: '#6ccaf6' } }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
|
|
@ -30,7 +40,7 @@ export default {
|
|||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
this.initChart(this.pie_1Data)
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
|
|
@ -40,20 +50,29 @@ export default {
|
|||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
watch: {
|
||||
pie_1Data: {
|
||||
deep: true,
|
||||
handler(val) {
|
||||
this.initChart(val)
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
initChart(pie_1Data) {
|
||||
this.chart = echarts.init(this.$el, 'macarons')
|
||||
|
||||
this.chart.setOption({
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{b} : {c} ({d}%)'
|
||||
// formatter: '{b} : {c} ({d}%)'
|
||||
formatter: '{b} {c}'
|
||||
},
|
||||
legend: {
|
||||
left: 'center',
|
||||
bottom: '0',
|
||||
icon: 'circle',
|
||||
data: ['待供应量', '计划需求量', '已供应量']
|
||||
data: ['计划需求量', '已供应量', '待供应量']
|
||||
},
|
||||
series: [
|
||||
{
|
||||
|
|
@ -61,11 +80,12 @@ export default {
|
|||
// roseType: 'radius', // radius 为玫瑰饼图
|
||||
radius: [0, 95],
|
||||
center: ['50%', '50%'],
|
||||
data: [
|
||||
{ value: 320, name: '待供应量', itemStyle: { color: '#6ccaf6' } },
|
||||
{ value: 240, name: '计划需求量', itemStyle: { color: '#65dfe0' } },
|
||||
{ value: 149, name: '已供应量', itemStyle: { color: '#ff8e9d' } }
|
||||
],
|
||||
// data: [
|
||||
// { value: 320, name: '待供应量', itemStyle: { color: '#6ccaf6' } },
|
||||
// { value: 240, name: '计划需求量', itemStyle: { color: '#65dfe0' } },
|
||||
// { value: 149, name: '已供应量', itemStyle: { color: '#ff8e9d' } }
|
||||
// ],
|
||||
data: pie_1Data,
|
||||
animationEasing: 'cubicInOut',
|
||||
animationDuration: 2600,
|
||||
itemStyle: {
|
||||
|
|
@ -74,7 +94,8 @@ export default {
|
|||
},
|
||||
label: {
|
||||
show: true, // 显示标签
|
||||
formatter: '{b}: {d}%', // 显示 name 和比率
|
||||
// formatter: '{b}: {d}%', // 显示 name 和比率
|
||||
formatter: '{b} {c}%', // 显示 name 和比率
|
||||
fontSize: 12, // 字体大小
|
||||
color: '#333' // 字体颜色
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,16 @@
|
|||
<div class="chart-title">{{ chartTitle }}</div>
|
||||
<div class="chart-content">
|
||||
<!-- <PieChart /> -->
|
||||
<component :is="ChartTypeName" :chartData="chartData" />
|
||||
<component
|
||||
:is="ChartTypeName"
|
||||
:chartData="chartData"
|
||||
:pie_1Data="pie_1Data"
|
||||
:barAndLineX="barAndLineX"
|
||||
:barY1="barY1"
|
||||
:barY2="barY2"
|
||||
:lineY1="lineY1"
|
||||
:lineY2="lineY2"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -28,6 +37,48 @@ export default {
|
|||
ChartTypeName: {
|
||||
type: String,
|
||||
default: 'PieChart'
|
||||
},
|
||||
// 饼图 1 数据源
|
||||
pie_1Data: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
},
|
||||
// 饼图和折线图 X 轴数据源
|
||||
barAndLineX: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
},
|
||||
// 柱图 Y 轴数据源1
|
||||
barY1: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
},
|
||||
// 柱图 Y 轴数据源2
|
||||
barY2: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
},
|
||||
// 折线图 Y 轴数据源1
|
||||
lineY1: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
},
|
||||
// 折线图 Y 轴数据源2
|
||||
lineY2: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
|
|
|
|||
|
|
@ -104,7 +104,16 @@
|
|||
<!-- 图表区域 -->
|
||||
<div class="chart-box">
|
||||
<div :key="index" v-for="(chart, index) in chartList">
|
||||
<ChartModelBox :chartTitle="chart.title" :ChartTypeName="chart.type" />
|
||||
<ChartModelBox
|
||||
:chartTitle="chart.title"
|
||||
:ChartTypeName="chart.type"
|
||||
:pie_1Data="pie_1Data"
|
||||
:barAndLineX="barAndLineX"
|
||||
:barY1="barY1"
|
||||
:barY2="barY2"
|
||||
:lineY1="lineY1"
|
||||
:lineY2="lineY2"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -123,7 +132,7 @@ import TableModel from './components/table-model' // 二级页面列表组件
|
|||
import Treeselect from '@riophae/vue-treeselect'
|
||||
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
|
||||
|
||||
import { getCardListApi } from '@/api/home/equipment-supply.js'
|
||||
import { getCardListApi, getPie_1DataApi, getBarAndLineDataApi } from '@/api/home/equipment-supply.js'
|
||||
import { getListProject, getListUnite } from '@/api/lease/apply'
|
||||
export default {
|
||||
components: {
|
||||
|
|
@ -250,7 +259,13 @@ export default {
|
|||
title: '待供应占比统计',
|
||||
type: 'LineChart'
|
||||
}
|
||||
]
|
||||
],
|
||||
pie_1Data: [],
|
||||
barAndLineX: [],
|
||||
barY1: [],
|
||||
lineY1: [],
|
||||
barY2: [],
|
||||
lineY2: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -287,7 +302,34 @@ export default {
|
|||
this.cardList_3[0].cardNum = projectNum
|
||||
this.cardList_3[1].cardNum = suppliedQuantityAllNum || 0
|
||||
this.cardList_3[2].cardNum = suppliedQuantityPrice || 0
|
||||
|
||||
// 获取饼图和柱状图
|
||||
const { data: barAndLine } = await getBarAndLineDataApi(queryParams)
|
||||
const { typeNameList, demandNumList, suppliedQuantityNumList, suppliedToBeQuantityNumList } = barAndLine
|
||||
this.barAndLineX = typeNameList
|
||||
this.barY1 = demandNumList
|
||||
this.lineY1 = demandNumList
|
||||
this.barY2 = suppliedQuantityNumList
|
||||
this.lineY2 = suppliedToBeQuantityNumList
|
||||
|
||||
console.log('barAndLine', barAndLine)
|
||||
},
|
||||
// 获取图表数据
|
||||
async getPie_1DataFun() {
|
||||
const queryParams = {
|
||||
...this.queryParams,
|
||||
startTime: this.queryDate && this.queryDate.length > 0 ? this.queryDate[0] : '',
|
||||
endTime: this.queryDate && this.queryDate.length > 0 ? this.queryDate[1] : ''
|
||||
}
|
||||
const { data: pie1 } = await getPie_1DataApi(queryParams)
|
||||
const { demandNum, suppliedQuantityNum, suppliedToBeQuantityNum } = pie1
|
||||
this.pie_1Data = [
|
||||
{ value: demandNum, name: '计划需求量', itemStyle: { color: '#65dfe0' } },
|
||||
{ value: suppliedQuantityNum, name: '已供应量', itemStyle: { color: '#ff8e9d' } },
|
||||
{ value: suppliedToBeQuantityNum, name: '待供应量', itemStyle: { color: '#6ccaf6' } }
|
||||
]
|
||||
},
|
||||
|
||||
// 获取公司和工程
|
||||
async getCompanyAndProjectFun() {
|
||||
const comRes = await getListUnite({ projectId: null })
|
||||
|
|
@ -298,6 +340,7 @@ export default {
|
|||
// 查询
|
||||
onHandleSearch() {
|
||||
this.getCardListFun()
|
||||
this.getPie_1DataFun()
|
||||
},
|
||||
// 重置
|
||||
onHandleReset() {
|
||||
|
|
@ -354,6 +397,7 @@ export default {
|
|||
this.queryDate = this.getDefaultDateRange()
|
||||
this.getCompanyAndProjectFun()
|
||||
this.getCardListFun()
|
||||
this.getPie_1DataFun()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue