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

src/api/home/equipment-supply.js

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

src/views/home/equipment-supply/components/PieChart_1.vue

@@ -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} ({d}%)'
-                    formatter: '{b} {c}'
+                    // 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' // 字体颜色
                         }

src/views/home/equipment-supply/components/PieChart_2.vue

@@ -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: [
+                        // data: [
-                            { value: 320, name: '在库量', itemStyle: { color: '#26a8ff' } },
+                        //     { value: 320, name: '在库量', itemStyle: { color: '#26a8ff' } },
-                            { value: 240, name: '在用量', itemStyle: { color: '#45d8d9' } },
+                        //     { value: 240, name: '在用量', itemStyle: { color: '#45d8d9' } },
-                            { value: 120, name: '在修量', itemStyle: { color: '#ff8e9d' } },
+                        //     { value: 120, name: '在修量', itemStyle: { color: '#ff8e9d' } },
-                            { value: 80, name: '新购待入库量', itemStyle: { color: '#6ccaf6' } },
+                        //     { value: 80, name: '新购待入库量', itemStyle: { color: '#6ccaf6' } },
-                            { value: 90, name: '修试待入库量', itemStyle: { color: '#ffb667' } }
+                        //     { 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' // 字体颜色
                         }

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

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

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

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