From 461fbb3fc2685c627fc2e2a36bb53ed1075ad0a5 Mon Sep 17 00:00:00 2001
From: gongdi <410827992@qq.com>
Date: Fri, 24 Sep 2021 11:56:53 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B5=84=E4=BA=A7=E7=8A=B6=E6=80=81=E6=B1=87?=
 =?UTF-8?q?=E6=80=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../oa/assetStatus/assetStatusLarge.vue       | 316 ++++++++++++++++--
 .../moduleCom/oa/assetStatus/interConfig.js   |  10 +
 2 files changed, 300 insertions(+), 26 deletions(-)

diff --git a/src/views/superFusionPlatform/mainPlatform/moduleAndLayout/moduleCom/oa/assetStatus/assetStatusLarge.vue b/src/views/superFusionPlatform/mainPlatform/moduleAndLayout/moduleCom/oa/assetStatus/assetStatusLarge.vue
index d7a6656..8af0800 100644
--- a/src/views/superFusionPlatform/mainPlatform/moduleAndLayout/moduleCom/oa/assetStatus/assetStatusLarge.vue
+++ b/src/views/superFusionPlatform/mainPlatform/moduleAndLayout/moduleCom/oa/assetStatus/assetStatusLarge.vue
@@ -63,37 +63,47 @@
                 <div class="part-title">状态统计</div>
             </div>
         </div>
-        <div class="status-content-div">
-            <div class="echart-left-div"></div>
+        <div v-if="showLoading" class="show-loading-div">
+            <a-spin/>
+        </div>
+        <div v-if="!showLoading" class="status-content-div">
+            <div class="echart-left-div">
+                <div id="typeEchart" style="width: 100%;height: 100%"></div>
+            </div>
             <div class="echart-arrow-div">
                 <div class="arrow-div" style="width: 2rem;height: 3rem">
                     <img src="./image/arrow.png" style="width: 100%;height: 100%">
                 </div>
             </div>
-            <div class="echart-right-div"></div>
+            <div class="echart-right-div">
+                <div id="categoryEchart" style="width: 100%;height: 100%"></div>
+            </div>
         </div>
     </div>
 </template>
 <script>
     import interConfig from './interConfig';
+    import * as echarts from 'echarts';
+    import {Spin} from 'ant-design-vue';
     export default{
         data(){
             return {
-                stock_num:0,//在库
-                use_num:0,//在用
-                borrow_num:0,//借用
-                repair_num:0,//维修
-                scrap_num:0,//待报废
-                transfer_num:0,//处置
+                showLoading: true,
+                stock_num: 0,//在库
+                use_num: 0,//在用
+                borrow_num: 0,//借用
+                repair_num: 0,//维修
+                scrap_num: 0,//待报废
+                transfer_num: 0,//处置
             }
         },
         mounted(){
             this.getAllStatusGather();
         },
-        methods:{
-            getAllStatusGather:function () {
+        methods: {
+            getAllStatusGather: function () {
                 let param = {
-                    org_id:this.BaseConfig.person_info_my.bureau_id
+                    org_id: this.BaseConfig.person_info_my.bureau_id
                 }
                 this.InterfaceConfig.callInterface([{
                     url: interConfig.getAllStatusGather.url,
@@ -101,6 +111,7 @@
                     method: interConfig.getAllStatusGather.method,
                     isTestLogin: interConfig.getAllStatusGather.isTestLogin,
                 }], (result) => {
+                    this.showLoading = false;
                     let resData = result[0].data;
                     if (result[0].status === 200) {
                         if (resData.code === 2000) {
@@ -110,10 +121,256 @@
                             this.repair_num = resData.data.repair_num;
                             this.scrap_num = resData.data.scrap_num;
                             this.transfer_num = resData.data.transfer_num;
+                            this.$nextTick(function () {
+                                this.buildTypeEchart();
+                            })
                         }
                     }
                 })
-            }
+            },
+            buildTypeEchart: function () {
+                let myEchart = echarts.getInstanceByDom(document.getElementById("typeEchart"));
+                if (myEchart == null) {
+                    myEchart = echarts.init(document.getElementById('typeEchart'));
+                }
+                let chartData = [
+                    {name: "在库资产", value: this.stock_num},
+                    {name: "在用资产", value: this.use_num},
+                    {name: "借用资产", value: this.borrow_num},
+                    {name: "维修资产", value: this.repair_num},
+                    {name: "待报废资产", value: this.scrap_num},
+                    {name: "处置资产", value: this.transfer_num},
+                ];
+                myEchart.setOption(
+                    {
+                        //color: ["rgb(129, 212, 250)", "rgb(165, 214, 167)", "rgb(255, 205, 210)", "rgb(250, 205, 145)","rgb(179, 157, 219)","rgb(158, 158, 158)"],
+                        tooltip: {
+                            trigger: 'item'//鼠标悬浮提示内容
+                        },
+                        legend: {
+                            show: false,
+                            top: 'bottom'
+                        },
+                        series: [
+                            {
+                                name: '资产数量',
+                                type: 'pie',
+                                minAngle: 10,
+                                radius: [40, 90],
+                                center: ['50%', '50%'],
+                                //roseType: 'area',//南丁格尔图
+                                label: {
+                                    //alignTo: 'edge',
+                                    formatter: '{name|{b}}\n{value|{c} }',
+                                    minMargin: 5,
+                                    edgeDistance: 10,
+                                    lineHeight: 15,
+                                    rich: {
+                                        time: {
+                                            fontSize: 10,
+                                            color: '#999'
+                                        }
+                                    }
+                                },
+                                labelLine: {
+                                    length: 15,
+                                    length2: 0,
+                                    maxSurfaceAngle: 80
+                                },
+                                labelLayout: function (params) {
+                                    const isLeft = params.labelRect.x < myEchart.getWidth() / 2;
+                                    const points = params.labelLinePoints;
+                                    // Update the end point.
+                                    points[2][0] = isLeft
+                                        ? params.labelRect.x
+                                        : params.labelRect.x + params.labelRect.width;
+                                    return {
+                                        labelLinePoints: points
+                                    };
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true
+                                    }
+                                },
+                                itemStyle: {
+//                                    normal: {
+//                                        borderWidth: 2,
+//                                        borderColor: '#fff',
+//                                    },
+                                    borderRadius: 5
+                                },
+                                data: chartData
+                            }
+                        ]
+                    }
+                )
+                myEchart.on("click", this.getAllStatusCategoryGather);
+                window.addEventListener("resize", () => {
+                    if (myEchart) {
+                        myEchart.resize()
+                    }
+                })
+                this.getAllStatusCategoryGather(chartData[0]);
+            },
+            getAllStatusCategoryGather: function (chart) {
+                let status = "";
+                switch (chart.name) {
+                    case "在库资产":
+                        status = 0;
+                        break;
+                    case "在用资产":
+                        status = 1;
+                        break;
+                    case "借用资产":
+                        status = 2;
+                        break;
+                    case "维修资产":
+                        status = 3;
+                        break;
+                    case "待报废资产":
+                        status = 4;
+                        break;
+                    case "处置资产":
+                        status = 5;
+                        break;
+                    default:
+                        break;
+                }
+                let param = {
+                    org_id: this.BaseConfig.person_info_my.bureau_id,
+                    asset_status: status
+                }
+                this.InterfaceConfig.callInterface([{
+                    url: interConfig.getAllStatusCategoryGather.url,
+                    params: param,
+                    method: interConfig.getAllStatusCategoryGather.method,
+                    isTestLogin: interConfig.getAllStatusCategoryGather.isTestLogin,
+                }], (result) => {
+                    let resData = result[0].data;
+                    if (result[0].status === 200) {
+                        if (resData.code === 2000) {
+                            if (resData.data && resData.data.length > 0) {
+                                this.buildCategoryEchart(resData.data, chart);
+                            }
+                        }
+                    }
+                })
+            },
+            buildCategoryEchart: function (dataList, chart) {
+                let myEchart = echarts.getInstanceByDom(document.getElementById("categoryEchart"));
+                if (myEchart == null) {
+                    myEchart = echarts.init(document.getElementById('categoryEchart'));
+                }
+                let chartData = [];
+                //let colorList = this.getColor(dataList.length);
+                for (let i = 0, len = dataList.length; i < len; i++) {
+                    chartData.push(
+                        {
+                            name: dataList[i].asset_classify_name,
+                            value: dataList[i].num,
+//                            itemStyle: {color: colorList[i]},
+//                            label: {color: colorList[i]}
+                        }
+                    )
+                }
+                myEchart.setOption(
+                    {
+                        title: {
+                            text: chart.name + '\n' + chart.value,
+                            x: "center",
+                            y: "center",
+//                            textStyle:{
+//                                color:chart.color
+//                            }
+                        },
+                        tooltip: {
+                            trigger: 'item'//鼠标悬浮提示内容
+                        },
+                        legend: {
+                            show: false,
+                            top: 'bottom'
+                        },
+                        series: [
+                            {
+                                name: '资产数量',
+                                type: 'pie',
+                                minAngle: 10,
+                                radius: [60, 90],
+                                center: ['50%', '50%'],
+                                //roseType: 'area',//南丁格尔图
+                                label: {
+                                    alignTo: 'edge',
+                                    formatter: '{name|{b}}\n{value|{c} }',
+                                    minMargin: 5,
+                                    edgeDistance: 10,
+                                    lineHeight: 15,
+                                    rich: {
+                                        time: {
+                                            fontSize: 10,
+                                            color: '#999'
+                                        }
+                                    },
+                                },
+                                labelLine: {
+                                    length: 15,
+                                    length2: 0,
+                                    maxSurfaceAngle: 80
+                                },
+                                labelLayout: function (params) {
+                                    const isLeft = params.labelRect.x < myEchart.getWidth() / 2;
+                                    const points = params.labelLinePoints;
+                                    // Update the end point.
+                                    points[2][0] = isLeft
+                                        ? params.labelRect.x
+                                        : params.labelRect.x + params.labelRect.width;
+                                    return {
+                                        labelLinePoints: points
+                                    };
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true
+                                    }
+                                },
+                                itemStyle: {
+//                                    normal: {
+//                                        borderWidth: 2,
+//                                        borderColor: '#fff',
+//                                    },
+                                    borderRadius: 5
+                                },
+                                data: chartData
+                            }
+                        ]
+                    }
+                )
+                window.addEventListener("resize", () => {
+                    if (myEchart) {
+                        myEchart.resize()
+                    }
+                })
+            },
+            randColor: function () {
+                //生成随机颜色
+                return "#" + ("00000" + ((Math.random() * 16777215 + 0.5) >> 0).toString(16)).slice(-6);
+//                let r, g, b;
+//                r = Math.floor(Math.random() * 256);
+//                g = Math.floor(Math.random() * 256);
+//                b = Math.floor(Math.random() * 256);
+//                return "rgb(" +r + ',' +g+ ',' +b+ ")";
+            },
+            getColor: function (num) {
+                //获取随机颜色
+                var colorList = [];
+                for (var i = 0; i < num; i++) {
+                    colorList.push(this.randColor());
+                }
+                return colorList;
+            },
+        },
+        components: {
+            ASpin: Spin
         }
     }
 </script>
@@ -124,31 +381,31 @@
         padding: 0.5rem;
         display: flex;
         flex-direction: column;
-        .asset-type-tab-list-div{
+        .asset-type-tab-list-div {
             width: 100%;
             height: 5rem;
             display: flex;
             justify-content: space-between;
             align-items: center;
-            .type-tab-div{
+            .type-tab-div {
                 width: 16%;
                 height: 4rem;
                 display: flex;
                 justify-content: center;
                 align-items: center;
                 color: white;
-                .img-div{
+                .img-div {
                     width: 40%;
                     display: flex;
                     justify-content: center;
                     align-items: center;
                 }
-                .info-div{
+                .info-div {
                     width: 60%;
                     display: flex;
                     flex-direction: column;
                     padding-right: 0.3rem;
-                    .info-row{
+                    .info-row {
                         width: 100%;
                         height: 50%;
                         display: flex;
@@ -156,16 +413,16 @@
                         align-items: center;
                         font-size: 15px;
                     }
-                    .row-top{
+                    .row-top {
                         border-bottom: 1px solid white;
                     }
                 }
             }
-            .tab-left{
+            .tab-left {
                 border-top-left-radius: 2rem;
                 border-bottom-left-radius: 2rem;
             }
-            .tab-right{
+            .tab-right {
                 border-top-right-radius: 2rem;
                 border-bottom-right-radius: 2rem;
             }
@@ -208,25 +465,32 @@
                 }
             }
         }
-        .status-content-div{
+        .status-content-div {
             width: 100%;
             display: flex;
             min-height: 15rem;
             margin-top: 1rem;
-            .echart-left-div{
+            .echart-left-div {
                 width: calc(50% - 1.5rem);
                 height: 18rem;
             }
-            .echart-arrow-div{
+            .echart-arrow-div {
                 width: 3rem;
                 height: 18rem;
                 display: flex;
-                justify-content: center;align-items: center;
+                justify-content: center;
+                align-items: center;
             }
-            .echart-right-div{
+            .echart-right-div {
                 width: calc(50% - 1.5rem);
                 height: 18rem;
             }
         }
+        .show-loading-div {
+            min-height: 15rem;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
     }
 </style>
\ No newline at end of file
diff --git a/src/views/superFusionPlatform/mainPlatform/moduleAndLayout/moduleCom/oa/assetStatus/interConfig.js b/src/views/superFusionPlatform/mainPlatform/moduleAndLayout/moduleCom/oa/assetStatus/interConfig.js
index 813f0b7..8cfebf3 100644
--- a/src/views/superFusionPlatform/mainPlatform/moduleAndLayout/moduleCom/oa/assetStatus/interConfig.js
+++ b/src/views/superFusionPlatform/mainPlatform/moduleAndLayout/moduleCom/oa/assetStatus/interConfig.js
@@ -19,4 +19,14 @@ export default {
         isTestLogin:true
     },
 
+
+    /*
+     * 资产状态统计-根据状态获取集体资产分类统计
+     * */
+    "getAllStatusCategoryGather":{
+        url:'/intellioa/asset/assetReport/getAllStatusCategoryGather',
+        method:'get',
+        isTestLogin:true
+    },
+
 }