首页机具供应展示图表等接口调试完成

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
+    })
+}

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' // 自定义颜色

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) {
+            handler() {
-                this.setOptions(val)
+                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' // 折线颜色
                         },

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: [
+                        // data: [
-                            { value: 320, name: '待供应量', itemStyle: { color: '#6ccaf6' } },
+                        //     { value: 320, name: '待供应量', itemStyle: { color: '#6ccaf6' } },
-                            { value: 240, name: '计划需求量', itemStyle: { color: '#65dfe0' } },
+                        //     { value: 240, name: '计划需求量', itemStyle: { color: '#65dfe0' } },
-                            { value: 149, name: '已供应量', itemStyle: { color: '#ff8e9d' } }
+                        //     { 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' // 字体颜色
                         }

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

@@ -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() {

src/views/home/equipment-supply/index.vue

@@ -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>