diff --git a/src/api/home/equipment-supply.js b/src/api/home/equipment-supply.js
index 145846b0..0d8fecab 100644
--- a/src/api/home/equipment-supply.js
+++ b/src/api/home/equipment-supply.js
@@ -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
+ })
+}
diff --git a/src/views/home/equipment-supply/components/BarChart.vue b/src/views/home/equipment-supply/components/BarChart.vue
index a55a3914..f9d32853 100644
--- a/src/views/home/equipment-supply/components/BarChart.vue
+++ b/src/views/home/equipment-supply/components/BarChart.vue
@@ -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' // 自定义颜色
diff --git a/src/views/home/equipment-supply/components/LineChart.vue b/src/views/home/equipment-supply/components/LineChart.vue
index 978c868d..298eda3e 100644
--- a/src/views/home/equipment-supply/components/LineChart.vue
+++ b/src/views/home/equipment-supply/components/LineChart.vue
@@ -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' // 折线颜色
},
diff --git a/src/views/home/equipment-supply/components/PieChart_1.vue b/src/views/home/equipment-supply/components/PieChart_1.vue
index fb7f750e..a3d46d8b 100644
--- a/src/views/home/equipment-supply/components/PieChart_1.vue
+++ b/src/views/home/equipment-supply/components/PieChart_1.vue
@@ -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' // 字体颜色
}
diff --git a/src/views/home/equipment-supply/components/chart-model-box.vue b/src/views/home/equipment-supply/components/chart-model-box.vue
index 491a1504..0e7fffdb 100644
--- a/src/views/home/equipment-supply/components/chart-model-box.vue
+++ b/src/views/home/equipment-supply/components/chart-model-box.vue
@@ -3,7 +3,16 @@
{{ chartTitle }}
-
+
@@ -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() {
diff --git a/src/views/home/equipment-supply/index.vue b/src/views/home/equipment-supply/index.vue
index 34bdc411..b01f359f 100644
--- a/src/views/home/equipment-supply/index.vue
+++ b/src/views/home/equipment-supply/index.vue
@@ -104,7 +104,16 @@
@@ -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()
}
}