bonus
/
bonus-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

首页机具供应图表等接口完善

This commit is contained in:
BianLzhaoMin 2025-03-28 11:21:38 +08:00
parent cfb377d74c
commit 982fb201ea
5 changed files with 139 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/api/home/equipment-supply.js
View File

@ -8,6 +8,15 @@ export const getCardListApi = data => {
params: data
})
}
// 获取第二行卡片列表信息
export const getCardList_2Api = data => {
return request({
url: '/material//mainPage/getMaTypeHomeList',
method: 'get',
params: data
})
}
// 获取饼图1数据信息
export const getPie_1DataApi = data => {
return request({
@ -16,6 +25,15 @@ export const getPie_1DataApi = data => {
params: data
})
}
// 获取饼图2数据信息
export const getPie_2DataApi = data => {
return request({
url: '/material/mainPage/getMaTypeStatusTotal',
method: 'get',
params: data
})
}
// 获取柱状图和折线图数据信息
export const getBarAndLineDataApi = data => {
return request({

12
src/views/home/equipment-supply/components/PieChart_1.vue
View File

@ -61,12 +61,12 @@ export default {
methods: {
initChart(pie_1Data) {
this.chart = echarts.init(this.$el, 'macarons')
const total = pie_1Data.reduce((sum, item) => sum + item.value, 0)
this.chart.setOption({
tooltip: {
trigger: 'item',
// formatter: '{b} : {c} ({d}%)'
formatter: '{b} {c}'
formatter: '{b} : {c} ({d}%)'
// formatter: '{b} {c}'
},
legend: {
left: 'center',
@ -95,7 +95,11 @@ export default {
label: {
show: true, // 显示标签
// formatter: '{b}: {d}%', // 显示 name 和比率
formatter: '{b} {c}%', // 显示 name 和比率
formatter: function (params) {
const percent =
params.data.value == 0 ? 0 : ((params.data.value / total) * 100).toFixed(2)
return `${params.name}: ${percent}%`
},
fontSize: 12, // 字体大小
color: '#333' // 字体颜色
}

48
src/views/home/equipment-supply/components/PieChart_2.vue
View File

@ -21,6 +21,18 @@ export default {
height: {
type: String,
default: '100%'
},
pie_2Data: {
type: Array,
default: () => {
return [
{ value: 0, name: '在库量', itemStyle: { color: '#26a8ff' } },
{ value: 0, name: '在用量', itemStyle: { color: '#45d8d9' } },
{ value: 0, name: '在修量', itemStyle: { color: '#ff8e9d' } },
{ value: 0, name: '新购待入库量', itemStyle: { color: '#6ccaf6' } },
{ value: 0, name: '修试待入库量', itemStyle: { color: '#ffb667' } }
]
}
}
},
data() {
@ -30,7 +42,7 @@ export default {
},
mounted() {
this.$nextTick(() => {
this.initChart()
this.initChart(this.pie_2Data)
})
},
beforeDestroy() {
@ -40,10 +52,18 @@ export default {
this.chart.dispose()
this.chart = null
},
watch: {
pie_2Data: {
deep: true,
handler(val) {
this.initChart(val)
}
}
},
methods: {
initChart() {
initChart(pie_2Data) {
this.chart = echarts.init(this.$el, 'macarons')
const total = pie_2Data.reduce((sum, item) => sum + item.value, 0)
this.chart.setOption({
tooltip: {
trigger: 'item',
@ -61,13 +81,14 @@ export default {
// roseType: 'radius', // radius 为玫瑰饼图
radius: [60, 95],
center: ['50%', '50%'],
data: [
{ value: 320, name: '在库量', itemStyle: { color: '#26a8ff' } },
{ value: 240, name: '在用量', itemStyle: { color: '#45d8d9' } },
{ value: 120, name: '在修量', itemStyle: { color: '#ff8e9d' } },
{ value: 80, name: '新购待入库量', itemStyle: { color: '#6ccaf6' } },
{ value: 90, name: '修试待入库量', itemStyle: { color: '#ffb667' } }
],
// data: [
// { value: 320, name: '在库量', itemStyle: { color: '#26a8ff' } },
// { value: 240, name: '在用量', itemStyle: { color: '#45d8d9' } },
// { value: 120, name: '在修量', itemStyle: { color: '#ff8e9d' } },
// { value: 80, name: '新购待入库量', itemStyle: { color: '#6ccaf6' } },
// { value: 90, name: '修试待入库量', itemStyle: { color: '#ffb667' } }
// ],
data: pie_2Data,
animationEasing: 'cubicInOut',
animationDuration: 2600,
itemStyle: {
@ -76,7 +97,12 @@ export default {
},
label: {
show: true, // 显示标签
formatter: '{b}: {d}%', // 显示 name 和比率
// formatter: '{b}: {d}%', // 显示 name 和比率
formatter: function (params) {
const percent =
params.data.value == 0 ? 0 : ((params.data.value / total) * 100).toFixed(2)
return `${params.name}: ${percent}%`
},
fontSize: 12, // 字体大小
color: '#333' // 字体颜色
}

8
src/views/home/equipment-supply/components/chart-model-box.vue
View File

@ -7,6 +7,7 @@
:is="ChartTypeName"
:chartData="chartData"
:pie_1Data="pie_1Data"
:pie_2Data="pie_2Data"
:barAndLineX="barAndLineX"
:barY1="barY1"
:barY2="barY2"
@ -45,6 +46,13 @@ export default {
return []
}
},
// 饼图 2 数据源
pie_2Data: {
type: Array,
default: () => {
return []
}
},
// 饼图和折线图 X 轴数据源
barAndLineX: {
type: Array,

77
src/views/home/equipment-supply/index.vue
View File

@ -95,6 +95,8 @@
:iconType="card.icon"
:cardTitle="card.title"
:isReduce="card.isReduce"
:cardNum="card.cardNum"
:ratio="card.ratio"
@onOpenLevelTwoPages="onOpenLevelTwoPages"
/>
</div>
@ -108,6 +110,7 @@
:chartTitle="chart.title"
:ChartTypeName="chart.type"
:pie_1Data="pie_1Data"
:pie_2Data="pie_2Data"
:barAndLineX="barAndLineX"
:barY1="barY1"
:barY2="barY2"
@ -132,7 +135,13 @@ import TableModel from './components/table-model' // 二级页面列表组件
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { getCardListApi, getPie_1DataApi, getBarAndLineDataApi } from '@/api/home/equipment-supply.js'
import {
getCardListApi,
getPie_1DataApi,
getPie_2DataApi,
getCardList_2Api,
getBarAndLineDataApi
} from '@/api/home/equipment-supply.js'
import { getListProject, getListUnite } from '@/api/lease/apply'
export default {
components: {
@ -193,31 +202,41 @@ export default {
title: '在库量',
theme: '#5ad55a',
icon: 'In_the_library',
isReduce: false
isReduce: false,
cardNum: 0,
ratio: 0
},
{
title: '在用量',
theme: '#0099ff',
icon: 'In_use',
isReduce: true
isReduce: true,
cardNum: 0,
ratio: 0
},
{
title: '在修量',
theme: '#8167f5',
icon: 'In_repair',
isReduce: false
isReduce: false,
cardNum: 0,
ratio: 0
},
{
title: '新购待入库量',
theme: '#bfbf00',
icon: 'penning_store',
isReduce: true
isReduce: true,
cardNum: 0,
ratio: 0
},
{
title: '修试待入库量',
theme: '#b8741a',
icon: 'repair_store',
isReduce: true
isReduce: true,
cardNum: 0,
ratio: 0
}
],
cardList_3: [
@ -261,6 +280,7 @@ export default {
}
],
pie_1Data: [],
pie_2Data: [],
barAndLineX: [],
barY1: [],
lineY1: [],
@ -289,13 +309,13 @@ export default {
suppliedQuantityPrice
} = res
this.cardList_1[0].cardNum = demandNum
this.cardList_1[0].ratio = demandIncrease
this.cardList_1[0].ratio = Math.abs(demandIncrease)
demandIncrease > 0 ? (this.cardList_1[0].isReduce = true) : (this.cardList_1[0].isReduce = false)
this.cardList_1[1].cardNum = suppliedQuantityNum
this.cardList_1[1].ratio = suppliedQuantityIncrease
this.cardList_1[1].ratio = Math.abs(suppliedQuantityIncrease)
suppliedQuantityIncrease > 0 ? (this.cardList_1[1].isReduce = true) : (this.cardList_1[1].isReduce = false)
this.cardList_1[2].cardNum = suppliedToBeQuantityNum
this.cardList_1[2].ratio = suppliedToBeQuantityIncrease
this.cardList_1[2].ratio = Math.abs(suppliedToBeQuantityIncrease)
suppliedToBeQuantityIncrease > 0
? (this.cardList_1[2].isReduce = true)
: (this.cardList_1[2].isReduce = false)
@ -303,6 +323,45 @@ export default {
this.cardList_3[1].cardNum = suppliedQuantityAllNum || 0
this.cardList_3[2].cardNum = suppliedQuantityPrice || 0
// 获取第二行卡片数据
const { data: result } = await getCardList_2Api(queryParams)
const {
inStockNum,
inStockIncrease,
inUseNum,
inUseIncrease,
inRepairNum,
inRepairIncrease,
newPurchaseNum,
newPurchaseIncrease,
newRepairNum,
newRepairIncrease
} = result
this.cardList_2[0].cardNum = inStockNum
this.cardList_2[0].ratio = Math.abs(inStockIncrease)
inStockIncrease > 0 ? (this.cardList_2[0].isReduce = true) : (this.cardList_2[0].isReduce = false)
this.cardList_2[1].cardNum = inUseNum
this.cardList_2[1].ratio = Math.abs(inUseIncrease)
inUseIncrease > 0 ? (this.cardList_2[1].isReduce = true) : (this.cardList_2[1].isReduce = false)
this.cardList_2[2].cardNum = inRepairNum
this.cardList_2[2].ratio = Math.abs(inRepairIncrease)
inRepairIncrease > 0 ? (this.cardList_2[2].isReduce = true) : (this.cardList_2[2].isReduce = false)
this.cardList_2[3].cardNum = newPurchaseNum
this.cardList_2[3].ratio = Math.abs(newPurchaseIncrease)
newPurchaseIncrease > 0 ? (this.cardList_2[3].isReduce = true) : (this.cardList_2[3].isReduce = false)
this.cardList_2[4].cardNum = newRepairNum
this.cardList_2[4].ratio = Math.abs(newRepairIncrease)
newRepairIncrease > 0 ? (this.cardList_2[4].isReduce = true) : (this.cardList_2[4].isReduce = false)
this.pie_2Data = [
{ value: inStockNum, name: '在库量', itemStyle: { color: '#26a8ff' } },
{ value: inUseNum, name: '在用量', itemStyle: { color: '#45d8d9' } },
{ value: inRepairNum, name: '在修量', itemStyle: { color: '#ff8e9d' } },
{ value: newPurchaseNum, name: '新购待入库量', itemStyle: { color: '#6ccaf6' } },
{ value: newRepairNum, name: '修试待入库量', itemStyle: { color: '#ffb667' } }
]
// 获取饼图和柱状图
const { data: barAndLine } = await getBarAndLineDataApi(queryParams)
const { typeNameList, demandNumList, suppliedQuantityNumList, suppliedToBeQuantityNumList } = barAndLine