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

---
 .../oa/assetCategoryRecord/assetCategory.vue  | 230 ++++++++++
 .../assetCategoryLarge.vue                    | 419 ++++++++++++++++++
 .../oa/assetCategoryRecord/interConfig.js     |  29 ++
 .../oa/assetStatusRecord/assetStatusLarge.vue |   6 +-
 4 files changed, 681 insertions(+), 3 deletions(-)
 create mode 100644 src/views/superFusionPlatform/mainPlatform/moduleAndLayout/moduleCom/oa/assetCategoryRecord/assetCategory.vue
 create mode 100644 src/views/superFusionPlatform/mainPlatform/moduleAndLayout/moduleCom/oa/assetCategoryRecord/assetCategoryLarge.vue
 create mode 100644 src/views/superFusionPlatform/mainPlatform/moduleAndLayout/moduleCom/oa/assetCategoryRecord/interConfig.js

diff --git a/src/views/superFusionPlatform/mainPlatform/moduleAndLayout/moduleCom/oa/assetCategoryRecord/assetCategory.vue b/src/views/superFusionPlatform/mainPlatform/moduleAndLayout/moduleCom/oa/assetCategoryRecord/assetCategory.vue
new file mode 100644
index 0000000..1a7c8be
--- /dev/null
+++ b/src/views/superFusionPlatform/mainPlatform/moduleAndLayout/moduleCom/oa/assetCategoryRecord/assetCategory.vue
@@ -0,0 +1,230 @@
+<template>
+    <div class="asset-category-div">
+        <div class="search-div">
+            <div class="search-dom">
+                <span class="search-title-style">资产类别</span>
+                <span class="can-click-style" :title="assetNames" v-on:click="chooseAssets">{{assetNames}}</span>
+            </div>
+        </div>
+        <div v-if="showLoading" class="show-loading-div">
+            <a-spin/>
+        </div>
+        <div v-if="!showLoading" class="asset-category-content-div">
+            <div v-if="showEmpty == false" id="assetCategory" style="width: 100%;height: 100%"></div>
+            <div v-if="showEmpty" class="no-data-div">
+                <a-empty/>
+            </div>
+        </div>
+        <select-asset key="asset-select-com" :show="showAssetPanel" modalTitle="资产类别选择" :selectedDepart="selectAssets"
+                      @cancel="closeAssetPanel" @selectComplete="selectAssetComplete" :isMultipleChoice="true"/>
+    </div>
+</template>
+<script>
+    import SelectAsset from '../common/selectAsset.vue';
+    import interConfig from './interConfig';
+    import * as echarts from 'echarts';
+    import {Spin,Empty} from 'ant-design-vue';
+    export default{
+        data(){
+            return {
+                showLoading:true,
+                showEmpty:false,
+                showAssetPanel: false,
+                assetIds: "",
+                assetNames: "全部",
+                assetObjs: [],
+                selectAssets: []
+            }
+        },
+        watch: {
+            assetObjs: function (newVal) {
+                let assetObjs = [];
+                let assetNames = "全部";
+                let assetIds = "";
+                if (newVal.length > 0) {
+                    assetNames = "";
+                    for (let i = 0, len = newVal.length; i < len; i++) {
+                        let dom = {
+                            category_id: newVal[i].category_id,
+                            category_name: newVal[i].category_name
+                        }
+                        assetIds += dom.category_id + ",";
+                        assetNames += dom.category_name + ",";
+                        assetObjs.push(dom);
+                    }
+                    assetIds = assetIds.substring(0, assetIds.length - 1);
+                    assetNames = assetNames.substring(0, assetNames.length - 1);
+                }
+                this.assetIds = assetIds;
+                this.assetNames = assetNames;
+                this.selectAssets = assetObjs;
+                this.getCategoryPieDiagram();
+            },
+        },
+        mounted(){
+            this.getCategoryPieDiagram();
+        },
+        methods: {
+            getCategoryPieDiagram: function () {
+                let param = {
+                    org_id: this.BaseConfig.person_info_my.bureau_id,
+                }
+                if (this.assetIds != '') {
+                    param.asset_classify_ids = this.assetIds;
+                }
+                this.InterfaceConfig.callInterface([{
+                    url: interConfig.getCategoryPieDiagram.url,
+                    params: param,
+                    method: interConfig.getCategoryPieDiagram.method,
+                    isTestLogin: interConfig.getCategoryPieDiagram.isTestLogin,
+                }], (result) => {
+                    this.showLoading = false;
+                    let resData = result[0].data;
+                    if (result[0].status === 200) {
+                        if (resData.code === 2000) {
+                            let categoryList = resData.data.categoryList;
+                            if(categoryList && categoryList.length > 0){
+                                let chartData = [];
+                                for (let i = 0, len = categoryList.length; i < len; i++) {
+                                    if(categoryList[i].category_value != null && parseInt(categoryList[i].category_value) > 0){
+                                        chartData.push({name: categoryList[i].category_name, value: categoryList[i].category_value,})
+                                    }
+                                    if(chartData.length > 0){
+                                        this.showEmpty = false;
+                                        this.$nextTick(function () {
+                                            this.buildEchart(chartData);
+                                        })
+                                    }else {
+                                        this.showEmpty = true;
+                                    }
+                                }
+                            }else {
+                                this.showEmpty = true;
+                            }
+
+                        }
+                    }
+                })
+            },
+            buildEchart:function (dataList) {
+                //可视化图表
+                let myEchart = echarts.getInstanceByDom(document.getElementById("assetCategory"));
+                if (myEchart == null) {
+                    myEchart = echarts.init(document.getElementById('assetCategory'));
+                }
+                myEchart.setOption(
+                    {
+                        tooltip: {
+                            trigger: 'item'
+                        },
+                        legend: {
+                            show:true,
+                            type:'scroll',
+                            orient: 'vertical',
+                            left:'0',
+                            align:"auto",
+                            padding: [5, 10],
+                            formatter: function (name) {
+                                return echarts.format.truncateText(name, 100, '14px Microsoft Yahei', '…');
+                            },
+                            tooltip: {
+                                show: true
+                            }
+                        },
+                        series: [
+                            {
+                                name: '累计数量',
+                                type: 'pie',
+                                radius: '50%',
+                                left:"20%",
+                                data: dataList,
+                                label: {
+                                    show: false,
+                                },
+                                emphasis: {
+                                    itemStyle: {
+                                        shadowBlur: 10,
+                                        shadowOffsetX: 0,
+                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
+                                    }
+                                }
+                            },
+                        ]
+                    }
+                )
+                window.addEventListener("resize", () => {
+                    if (myEchart) {
+                        myEchart.resize()
+                    }
+                })
+            },
+            chooseAssets: function () {
+                if (!this.showAssetPanel) {
+                    this.showAssetPanel = true;
+                }
+            },
+            closeAssetPanel: function () {
+                this.showAssetPanel = false;
+            },
+            selectAssetComplete: function (selectedData) {
+                this.assetObjs = selectedData;
+                this.showAssetPanel = false;
+            },
+        },
+        components: {
+            SelectAsset,
+            ASpin:Spin,
+            AEmpty:Empty
+        }
+    }
+</script>
+
+<style lang="scss">
+    .asset-category-div {
+        width: 100%;
+        min-height: 20rem;
+        display: flex;
+        flex-direction: column;
+        .search-div {
+            width: 100%;
+            height: 3rem;
+            display: flex;
+            .search-dom {
+                width: 50%;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                .search-title-style {
+                    width: 45%;
+                    text-align: center;
+                }
+                .can-click-style {
+                    width: 55%;
+                    margin-left: 0.5rem;
+                    color: #31a8fa;
+                    cursor: pointer;
+                    text-align: left;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                }
+            }
+        }
+        .asset-category-content-div {
+            width: 100%;
+            height: 20rem;
+            .no-data-div{
+                min-height: 15rem;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+            }
+        }
+        .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/assetCategoryRecord/assetCategoryLarge.vue b/src/views/superFusionPlatform/mainPlatform/moduleAndLayout/moduleCom/oa/assetCategoryRecord/assetCategoryLarge.vue
new file mode 100644
index 0000000..f76e7a1
--- /dev/null
+++ b/src/views/superFusionPlatform/mainPlatform/moduleAndLayout/moduleCom/oa/assetCategoryRecord/assetCategoryLarge.vue
@@ -0,0 +1,419 @@
+<template>
+    <div class="asset-cagetory-large-div">
+        <div class="dep-place-echart-div">
+            <div class="item-echart-div">
+                <div class="title-div">部门统计</div>
+                <div class="echart-div">
+                    <div v-if="!showDepLoading && showDepEmpty == false" id="deptRecordEchart" style="width: 100%;height: 100%"></div>
+                    <div v-if="showDepEmpty" class="show-loading-div">
+                        <a-empty/>
+                    </div>
+                    <div v-if="showDepLoading" class="show-loading-div">
+                        <a-spin/>
+                    </div>
+                </div>
+            </div>
+            <div class="item-echart-div">
+                <div class="echart-div">
+                    <div v-if="!showPlaceLoading && showPlaceEmpty == false" id="placeEchart" style="width: 100%;height: 100%"></div>
+                    <div v-if="showPlaceEmpty" class="show-loading-div">
+                        <a-empty/>
+                    </div>
+                    <div v-if="showPlaceLoading" class="show-loading-div">
+                        <a-spin/>
+                    </div>
+                </div>
+                <div class="title-div">地点统计</div>
+            </div>
+        </div>
+        <div class="asset-cagetory-div">
+            <div class="title-div"><div class="title-span">类别统计</div></div>
+            <div class="category-echart-div">
+                <div v-if="showCategoryLoading" class="show-loading-div">
+                    <a-spin/>
+                </div>
+                <div v-if="!showCategoryLoading" id="categoryRecordEchart" style="width: 100%;height: 100%"></div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+    import interConfig from './interConfig';
+    import * as echarts from 'echarts';
+    import {Spin,Empty} from 'ant-design-vue';
+    export default{
+        data(){
+            return {
+                showDepLoading:true,
+                showPlaceLoading:true,
+                showCategoryLoading:true,
+                showDepEmpty:false,
+                showPlaceEmpty:false,
+            }
+        },
+        mounted(){
+            this.getDeptPieDiagram();
+            this.getPlacePieDiagram();
+            this.getCategoryPieDiagram();
+        },
+        methods:{
+            getDeptPieDiagram:function () {
+                let param = {
+                    org_id: this.BaseConfig.person_info_my.bureau_id,
+                }
+                this.InterfaceConfig.callInterface([{
+                    url: interConfig.getDeptPieDiagram.url,
+                    params: param,
+                    method: interConfig.getDeptPieDiagram.method,
+                    isTestLogin: interConfig.getDeptPieDiagram.isTestLogin,
+                }], (result) => {
+                    this.showDepLoading = false;
+                    let resData = result[0].data;
+                    if (result[0].status === 200) {
+                        if (resData.code === 2000) {
+                            let manageDeptList = resData.data.manageDeptList;
+                            if(manageDeptList && manageDeptList.length > 0){
+                                let chartData = [];
+                                for (let i = 0, len = manageDeptList.length; i < len; i++) {
+                                    if(manageDeptList[i].manage_dept_value != null && parseInt(manageDeptList[i].manage_dept_value) > 0){
+                                        chartData.push({name: manageDeptList[i].manage_dept_name, value: manageDeptList[i].manage_dept_value,})
+                                    }
+                                    if(chartData.length > 0){
+                                        this.showDepEmpty = false;
+                                        this.$nextTick(function () {
+                                            this.buildDepEchart(chartData);
+                                        })
+                                    }else {
+                                        this.showDepEmpty = true;
+                                    }
+                                }
+                            }else {
+                                this.showDepEmpty = true;
+                            }
+                        }
+                    }
+                })
+            },
+            buildDepEchart:function (dataList) {
+                let myEchart = echarts.getInstanceByDom(document.getElementById("deptRecordEchart"));
+                if (myEchart == null) {
+                    myEchart = echarts.init(document.getElementById('deptRecordEchart'));
+                }
+                myEchart.setOption(
+                    {
+                        tooltip: {
+                            trigger: 'item'//鼠标悬浮提示内容
+                        },
+                        legend: {
+                            show:true,
+                            type:'scroll',
+                            orient: 'vertical',
+                            left:'0',
+                            align:"auto",
+                            padding: [5, 10],
+                            formatter: function (name) {
+                                return echarts.format.truncateText(name, 100, '14px Microsoft Yahei', '…');
+                            },
+                            tooltip: {
+                                show: true
+                            }
+                        },
+                        series: [
+                            {
+                                name: '部门资产数量',
+                                type: 'pie',
+                                minAngle: 6,
+                                radius: [30, 90],
+                                center: ['50%', '50%'],
+                                left:"20%",
+                                avoidLabelOverlap:true,//标签不重叠
+                                //roseType: 'area',//南丁格尔图
+                                label: {
+                                    show:false,
+                                },
+                                itemStyle: {
+                                    borderRadius: 5
+                                },
+                                data: dataList
+                            }
+                        ]
+                    }
+                )
+                window.addEventListener("resize", () => {
+                    if (myEchart) {
+                        myEchart.resize()
+                    }
+                })
+            },
+            getPlacePieDiagram:function () {
+                let param = {
+                    org_id: this.BaseConfig.person_info_my.bureau_id,
+                }
+                this.InterfaceConfig.callInterface([{
+                    url: interConfig.getPlacePieDiagram.url,
+                    params: param,
+                    method: interConfig.getPlacePieDiagram.method,
+                    isTestLogin: interConfig.getPlacePieDiagram.isTestLogin,
+                }], (result) => {
+                    this.showPlaceLoading = false;
+                    let resData = result[0].data;
+                    if (result[0].status === 200) {
+                        if (resData.code === 2000) {
+                            let placeList = resData.data.placeList;
+                            if(placeList && placeList.length > 0){
+                                let chartData = [];
+                                for (let i = 0, len = placeList.length; i < len; i++) {
+                                    if(placeList[i].place_value != null && parseInt(placeList[i].place_value) > 0){
+                                        chartData.push({name: placeList[i].place_name, value: placeList[i].place_value,})
+                                    }
+                                    if(chartData.length > 0){
+                                        this.showPlaceEmpty = false;
+                                        this.$nextTick(function () {
+                                            this.buildPlaceEchart(chartData);
+                                        })
+                                    }else {
+                                        this.showPlaceEmpty = true;
+                                    }
+                                }
+                            }else {
+                                this.showPlaceEmpty = true;
+                            }
+                        }
+                    }
+                })
+            },
+            buildPlaceEchart:function (dataList) {
+                let myEchart = echarts.getInstanceByDom(document.getElementById("placeEchart"));
+                if (myEchart == null) {
+                    myEchart = echarts.init(document.getElementById('placeEchart'));
+                }
+                myEchart.setOption(
+                    {
+                        tooltip: {
+                            trigger: 'item'//鼠标悬浮提示内容
+                        },
+                        legend: {
+                            show:true,
+                            type:'scroll',
+                            orient: 'vertical',
+                            right:'0',
+                            align:"auto",
+                            padding: [5, 10],
+                            formatter: function (name) {
+                                return echarts.format.truncateText(name, 100, '14px Microsoft Yahei', '…');
+                            },
+                            tooltip: {
+                                show: true
+                            }
+                        },
+                        series: [
+                            {
+                                name: '各地点资产数量',
+                                type: 'pie',
+                                minAngle: 6,
+                                radius: [30, 90],
+                                center: ['50%', '50%'],
+                                right:"20%",
+                                avoidLabelOverlap:true,//标签不重叠
+                                //roseType: 'area',//南丁格尔图
+                                label: {
+                                    show:false,
+                                },
+                                itemStyle: {
+                                    borderRadius: 5
+                                },
+                                data: dataList
+                            }
+                        ]
+                    }
+                )
+                window.addEventListener("resize", () => {
+                    if (myEchart) {
+                        myEchart.resize()
+                    }
+                })
+            },
+            getCategoryPieDiagram:function () {
+                let param = {
+                    org_id: this.BaseConfig.person_info_my.bureau_id,
+                }
+                this.InterfaceConfig.callInterface([{
+                    url: interConfig.getCategoryPieDiagram.url,
+                    params: param,
+                    method: interConfig.getCategoryPieDiagram.method,
+                    isTestLogin: interConfig.getCategoryPieDiagram.isTestLogin,
+                }], (result) => {
+                    this.showCategoryLoading = false;
+                    let resData = result[0].data;
+                    if (result[0].status === 200) {
+                        if (resData.code === 2000) {
+                            let categoryList = resData.data.categoryList;
+                            this.$nextTick(function () {
+                                this.buildCategoryEchart(categoryList);
+                            })
+                        }
+                    }
+                })
+            },
+            buildCategoryEchart:function (dataList) {
+                let allEchart = echarts.getInstanceByDom(document.getElementById("categoryRecordEchart"));
+                if (allEchart == null) {
+                    allEchart = echarts.init(document.getElementById('categoryRecordEchart'));
+                }
+                let xData = [];
+                let yData = [];
+                if (dataList && dataList.length > 0) {
+                    for (let i = 0, len = dataList.length; i < len; i++) {
+                        xData.push(dataList[i].category_name);
+                        yData.push(dataList[i].category_value);
+                    }
+                }
+                allEchart.setOption({
+                    tooltip: {
+                        trigger: 'axis',
+                        axisPointer: {
+                            type: 'cross',
+                            crossStyle: {
+                                color: '#999'
+                            }
+                        }
+                    },
+                    xAxis: {
+                        type: 'category',
+                        data: xData,
+                        axisLabel: {
+                            interval: 0,
+                            rotate: 30,  //倾斜的程度
+                        }
+                    },
+                    grid: {
+                        left: "10%",
+                        right: "10%",
+                        bottom: "20%",
+                        top: "5%"
+                    },
+                    yAxis: {
+                        type: 'value'
+                    },
+                    dataZoom: [//X轴滑动条
+                        {
+                            type: 'inside', //滑动条
+                            show: true,      //开启
+                            xAxisIndex: [0],
+                            //left: '93%',  //滑动条位置
+                            bottom: "0%",
+                            start: 1,    //初始化时，滑动条宽度开始标度
+                            end: 50      //初始化时，滑动条宽度结束标度
+                        }
+                    ],
+                    series: [
+                        {
+                            data: yData,
+                            type: 'bar',
+                            showBackground: true,
+                            barWidth: "30",
+                            itemStyle: {
+                                normal: {
+                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                                        offset: 0,
+                                        color: '#80bef6'
+                                    }, {
+                                        offset: 1,
+                                        color: '#188df0'
+                                    }]),
+                                }
+                            },
+                            backgroundStyle: {
+                                color: '#f2f2f2'
+                            }
+                        }
+                    ]
+                });
+                window.addEventListener("resize", () => {
+                    if(allEchart){
+                        allEchart.resize()
+                    }
+                })
+            }
+        },
+        components:{
+            ASpin:Spin,
+            AEmpty:Empty
+        }
+    }
+</script>
+<style lang="scss">
+    .asset-cagetory-large-div{
+        width: 100%;
+        min-height: 20rem;
+        padding: 0.5rem;
+        display: flex;
+        flex-direction: column;
+        .dep-place-echart-div{
+            width: 100%;
+            height:12rem;
+            display: flex;
+            justify-content: space-between;
+            .item-echart-div{
+                width: calc(50% - 5px);
+                height: 12rem;
+                display: flex;
+                .title-div{
+                    width: 30px;
+                    height: 12rem;
+                    display: flex;
+                    font-size: 16px;
+                    justify-content: center;
+                    align-items: center;
+                    text-align: center;
+                    background-color: #f8b62b;
+                    color: white;
+                }
+                .echart-div{
+                    width: calc(100% - 30px);
+                    height: 12rem;
+                    .show-loading-div {
+                        height: 12rem;
+                        display: flex;
+                        justify-content: center;
+                        align-items: center;
+                    }
+                }
+
+            }
+        }
+        .asset-cagetory-div{
+            width: 100%;
+            min-height: 15rem;
+            display: flex;
+            flex-direction: column;
+            .title-div{
+                width: 100%;
+                height: 2rem;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                .title-span{
+                    height: 30px;
+                    padding: 0.5rem 1rem;
+                    background-color: #f8b62b;
+                    color: white;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    font-size: 16px;
+                }
+            }
+            .category-echart-div{
+                width: 100%;
+                height: 13rem;
+                .show-loading-div{
+                    height: 12rem;
+                    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/assetCategoryRecord/interConfig.js b/src/views/superFusionPlatform/mainPlatform/moduleAndLayout/moduleCom/oa/assetCategoryRecord/interConfig.js
new file mode 100644
index 0000000..c2c8f6c
--- /dev/null
+++ b/src/views/superFusionPlatform/mainPlatform/moduleAndLayout/moduleCom/oa/assetCategoryRecord/interConfig.js
@@ -0,0 +1,29 @@
+export default {
+
+    /*
+    * 资产分类汇总【小号分类；中号-类别统计】
+    * */
+    "getCategoryPieDiagram":{
+        url:'/intellioa/asset/assetReport/getCategoryPieDiagram',
+        method:'get',
+        isTestLogin:true
+    },
+
+    /*
+     * 部门资产汇总【中号-部门统计】
+     * */
+    "getDeptPieDiagram":{
+        url:'/intellioa/asset/assetReport/getDeptPieDiagram',
+        method:'get',
+        isTestLogin:true
+    },
+
+    /*
+     * 存放地点资产汇总 【中号-地点统计】
+     * */
+    "getPlacePieDiagram":{
+        url:'/intellioa/asset/assetReport/getPlacePieDiagram',
+        method:'get',
+        isTestLogin:true
+    },
+}
diff --git a/src/views/superFusionPlatform/mainPlatform/moduleAndLayout/moduleCom/oa/assetStatusRecord/assetStatusLarge.vue b/src/views/superFusionPlatform/mainPlatform/moduleAndLayout/moduleCom/oa/assetStatusRecord/assetStatusLarge.vue
index 8af0800..a674360 100644
--- a/src/views/superFusionPlatform/mainPlatform/moduleAndLayout/moduleCom/oa/assetStatusRecord/assetStatusLarge.vue
+++ b/src/views/superFusionPlatform/mainPlatform/moduleAndLayout/moduleCom/oa/assetStatusRecord/assetStatusLarge.vue
@@ -68,7 +68,7 @@
         </div>
         <div v-if="!showLoading" class="status-content-div">
             <div class="echart-left-div">
-                <div id="typeEchart" style="width: 100%;height: 100%"></div>
+                <div id="typeRecordEchart" style="width: 100%;height: 100%"></div>
             </div>
             <div class="echart-arrow-div">
                 <div class="arrow-div" style="width: 2rem;height: 3rem">
@@ -129,9 +129,9 @@
                 })
             },
             buildTypeEchart: function () {
-                let myEchart = echarts.getInstanceByDom(document.getElementById("typeEchart"));
+                let myEchart = echarts.getInstanceByDom(document.getElementById("typeRecordEchart"));
                 if (myEchart == null) {
-                    myEchart = echarts.init(document.getElementById('typeEchart'));
+                    myEchart = echarts.init(document.getElementById('typeRecordEchart'));
                 }
                 let chartData = [
                     {name: "在库资产", value: this.stock_num},