From c9f267162af7541ac0e92c65697874969b54bb5c Mon Sep 17 00:00:00 2001
From: zhusiyu <410827992@qq.com>
Date: Mon, 7 Mar 2022 17:30:30 +0800
Subject: [PATCH] =?UTF-8?q?=E7=89=A9=E5=93=81=E4=BD=BF=E7=94=A8=E7=BB=9F?=
 =?UTF-8?q?=E8=AE=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../oa/goodsUseCensus/goodsUseCensus.vue      | 401 ++++++++++++++++++
 .../oa/goodsUseCensus/interConfig.js          |  28 ++
 2 files changed, 429 insertions(+)
 create mode 100644 src/views/screenAdaptation/pages/adminCenter/moduleCom/oa/goodsUseCensus/goodsUseCensus.vue
 create mode 100644 src/views/screenAdaptation/pages/adminCenter/moduleCom/oa/goodsUseCensus/interConfig.js

diff --git a/src/views/screenAdaptation/pages/adminCenter/moduleCom/oa/goodsUseCensus/goodsUseCensus.vue b/src/views/screenAdaptation/pages/adminCenter/moduleCom/oa/goodsUseCensus/goodsUseCensus.vue
new file mode 100644
index 0000000..4b2472c
--- /dev/null
+++ b/src/views/screenAdaptation/pages/adminCenter/moduleCom/oa/goodsUseCensus/goodsUseCensus.vue
@@ -0,0 +1,401 @@
+<template>
+    <div class="goodsUseCensus">
+        <TabComp :tabArr="tabArr" showName="title" @tabChange="tabChange"/>
+        <DateChoose @flushDate="flushDate" :begin_date="begin_date" :end_date="end_date"></DateChoose>
+        <div class="part-record-div">
+            <div class="part-title">领用情况</div>
+            <div class="useTimes part-record-divChild">
+                <p>领用次数</p>
+                <h2 style="font-size: 20px;font-weight:600;color: #fff">{{15}}</h2>
+            </div>
+            <div class="useMount part-record-divChild">
+                <p>领用数量</p>
+                <h2 style="font-size: 20px;font-weight:600;color: #fff">{{76}}</h2>
+            </div>
+            <div class="useMost part-record-divChild">
+                <p>用量最多</p>
+                <h2 style="font-size: 20px;font-weight:600;color: #fff">{{15}}</h2>
+            </div>
+        </div>
+        <div class="part-record-div">
+            <div class="part-title">领用物品分类</div>
+            <div id="myEChart" ref="echartsPic" class="echart-div"></div>
+            <div class="part-record-divLeft">按次数排序</div>
+            <div class="part-record-divRigt">按数量排序</div>
+        </div>
+    </div>
+</template>
+<script>
+    import TabComp from '../common/tabComp.vue';
+    import DateChoose from '../common/dateChoose.vue';
+    //    import {} from 'ant-design-vue';
+    import InterConfig from './interConfig';
+    import moment from 'moment';
+    import * as echarts from 'echarts';
+    export default{
+        data(){
+            return {
+                tabArr: [
+                    {title: "本人"},
+                    {title: "部门"},
+                    {title: "本机构"},
+                ],
+                tabIndex: 0,
+                begin_date: null,
+                end_date: null,
+                depId: this.BaseConfig.person_info_my.dep_id,
+                //柱状图数据
+                //                    tooltip: {
+//                        trigger: 'item',
+//                        axisPointer: {}
+//                    },
+//                    grid: {
+//                        left: '5%',
+//                        bottom: '2%',
+//                        top: '4%',
+//                        containLabel: true
+//                    },
+//                    xAxis: [
+//                        {
+//                            type: 'value',
+//                            show: false,
+//                        }
+//                    ],
+//                    yAxis: [
+//                        {
+//                            type: 'category',
+//                            show: false,
+//                        }
+//                    ],
+//                    series: [
+//                        {
+//                            type: 'bar',
+//                            stack: 'Total',
+//                            label: {
+//                                show: false
+//                            },
+//                            emphasis: {
+//                                focus: 'series'
+//                            },
+//                            color: ['rgba(238, 201, 0,1)', 'rgba(238, 201, 0,1)'],
+//                            data: [320, 302, 341, 374, 390, 450, 420],
+//                            itemStyle: {
+//                                normal: {
+//                                    barBorderRadius: [0, 20, 20, 0]
+//                                }
+//                            }
+//                        },
+//                        {
+////                            name: 'Expenses',
+//                            type: 'bar',
+//                            stack: 'Total',
+//                            label: {
+//                                show: false,
+//                                position: 'left'
+//                            },
+//                            emphasis: {
+//                                focus: 'series'
+//                            },
+//                            data: [-120, -132, -101, -134, -190, -230, -210],
+//                            color: ['rgba(72, 118, 255,1)', 'rgba(72, 118, 255,1)'],
+//                            itemStyle: {
+//                                normal: {
+//                                    barBorderRadius: [20, 0, 0, 20]
+//                                }
+//                            }
+//                        }
+//                    ]
+                option: {
+                    dataZoom: [{
+                        end: 0,
+                        start: 0,
+                        type: "slider",
+                        xAxisIndex: 0,
+                        show: false,
+                    }],
+                    grid: {
+                        left: '',
+                        bottom: '',
+                        top: '',
+                        containLabel: true
+                    },
+                    legend: {
+                        data: []
+                    },
+                    series: [
+                        {
+                            stack: 'Total',
+                            label: {
+                                show: false
+                            },
+                            emphasis: {
+                                focus: 'series'
+                            },
+                            color: ['rgba(238, 201, 0,1)', 'rgba(238, 201, 0,1)'],
+                            itemStyle: {
+                                normal: {
+                                    barBorderRadius: [0, 20, 20, 0]
+                                }
+                            },
+                            data: [320, 302, 341, 374, 390, 450, 420],
+                            name: '',
+                            type: ''
+                        },
+                        {
+                            stack: 'Total',
+                            label: {
+                                show: false,
+                                position: 'left'
+                            },
+                            emphasis: {
+                                focus: 'series'
+                            },
+                            color: ['rgba(72, 118, 255,1)', 'rgba(72, 118, 255,1)'],
+                            itemStyle: {
+                                normal: {
+                                    barBorderRadius: [20, 0, 0, 20]
+                                }
+                            },
+                            data: [-120, -132, -101, -134, -190, -230, -210],
+                            name: '',
+                            type: ''
+                        }
+                    ],
+                    tooltip: {
+                        trigger: '',
+                        axisPointer: {}
+                    },
+                    xAxis: {
+                        data: [],
+                        type: '',
+                        show: false,
+                    },
+                    yAxis: {
+                        minInterval: 1,
+                        type: '',
+                        show: false,
+                    }
+                }
+            }
+        },
+        components: {
+            TabComp,
+            DateChoose
+        },
+        created(){
+            this.getNowTime();
+        },
+        mounted(){
+//            this.echartsDraw();
+        },
+
+        methods: {
+            tabChange: function (param) {
+                //console.log('goodsusecensus', param)
+                if (this.tabIndex != param.index) {
+                    this.tabIndex = param.index;
+                }
+            },
+            getGoodsUseRecord(){
+                let param = {
+                    person_id: this.BaseConfig.userInfo.person_id,//当前登录人员ID，必填
+                    dept_id: this.depId,//部门ID，data_flag=2时必填
+                    org_id: this.BaseConfig.person_info_my.bureau_id,//机构ID，必填
+                    data_flag: 1,//当=1时表示统计本人，2本部门，3本机构
+                    //start_date: moment(this.begin_date).format("YYYY-MM-DD"),//开始日期，例2020-12-15，非必填
+                    //end_date: moment(this.end_date).format("YYYY-MM-DD")//结束日期，例2021-12-15，非必填
+                };
+//                console.log(param)
+                this.InterfaceConfig.callInterface([{
+                    url: InterConfig.getGoodsUseRecord.url,
+                    params: param,
+                    method: InterConfig.getGoodsUseRecord.method,
+                    isTestLogin: InterConfig.getGoodsUseRecord.isTestLogin,
+                }], (result) => {
+//                    console.log('getGoodsUseRecord', result)
+                    if (result[0].data.code === 2000) {
+                        console.log('getGoodsUseRecord', result)
+                        let op = result[0].data.data.option;
+                        op.series[0].data = [320, 302, 341, 374, 390, 450, 420]
+                        op.series[1].data = [-120, -132, -101, -134, -190, -230, -210]
+                        op.dataZoom[0].show = false
+                        this.option = op
+//                        this.option = result[0].data.data.option;
+                        this.echartsDraw();
+//                        console.log(this.option)
+                    }
+                })
+            },
+            //时间选择器
+            flushDate (param) {
+                this.begin_date = param.beginDate_i;
+                this.end_date = param.endDate_i;
+            },
+            getNowTime() {
+                this.InterfaceConfig.callInterface([{
+                    url: InterConfig.getNowTime.url,
+                    params: {},
+                    method: InterConfig.getNowTime.method,
+                    isTestLogin: InterConfig.getNowTime.isTestLogin,
+                }], (result) => {
+                    let resData = result[0].data;
+                    if (result[0].status === 200) {
+                        if (resData.code === 2000) {
+                            let year = resData.data.year;
+                            let month = resData.data.month;
+                            let day = resData.data.day;
+                            this.begin_date = moment(year + "-" + month + "-01");
+                            this.end_date = moment(year + "-" + month + "-" + day);
+                            this.getGoodsUseRecord()
+                        }
+                    }
+                })
+            },
+            //echarts柱状图
+            echartsDraw(){
+                // 基于准备好的dom，初始化echarts实例
+                let myChart = echarts.init(document.getElementById('myEChart'));
+                // 绘制图表
+                myChart.setOption(this.option)
+//                myChart.setOption({
+//                    tooltip: {
+//                        trigger: 'item',
+//                        axisPointer: {}
+//                    },
+//                    grid: {
+//                        left: '5%',
+//                        bottom: '2%',
+//                        top: '4%',
+//                        containLabel: true
+//                    },
+//                    xAxis: [
+//                        {
+//                            type: 'value',
+//                            show: false,
+//                        }
+//                    ],
+//                    yAxis: [
+//                        {
+//                            type: 'category',
+//                            show: false,
+//                        }
+//                    ],
+//                    series: [
+//                        {
+//                            type: 'bar',
+//                            stack: 'Total',
+//                            label: {
+//                                show: false
+//                            },
+//                            emphasis: {
+//                                focus: 'series'
+//                            },
+//                            color: ['rgba(238, 201, 0,1)', 'rgba(238, 201, 0,1)'],
+//                            data: [320, 302, 341, 374, 390, 450, 420],
+//                            itemStyle: {
+//                                normal: {
+//                                    barBorderRadius: [0, 20, 20, 0]
+//                                }
+//                            }
+//                        },
+//                        {
+////                            name: 'Expenses',
+//                            type: 'bar',
+//                            stack: 'Total',
+//                            label: {
+//                                show: false,
+//                                position: 'left'
+//                            },
+//                            emphasis: {
+//                                focus: 'series'
+//                            },
+//                            data: [-120, -132, -101, -134, -190, -230, -210],
+//                            color: ['rgba(72, 118, 255,1)', 'rgba(72, 118, 255,1)'],
+//                            itemStyle: {
+//                                normal: {
+//                                    barBorderRadius: [20, 0, 0, 20]
+//                                }
+//                            }
+//                        }
+//                    ]
+//                })
+            }
+        },
+    }
+</script>
+<style scoped lang="scss">
+    .goodsUseCensus {
+        padding: 10px;
+        width: 100%;
+        min-height: 19rem;
+        .part-record-div {
+            min-height: 7rem;
+            border: 2px solid rgba(144, 202, 249, 1);
+            border-radius: 5px;
+            position: relative;
+            margin-top: 1.5rem;
+            display: flex;
+            justify-content: center;
+            padding: 1rem 0;
+            .part-title {
+                position: absolute;
+                top: -16px;
+                padding: 0.2rem 1rem;
+                border-radius: 1rem;
+                background-color: #31a8fa;
+                color: white;
+                font-size: 12px;
+            }
+            .part-record-divChild {
+                vertical-align: middle;
+                text-align: center;
+                padding-top: 1rem;
+                width: 25%;
+                height: 5rem;
+                color: #fff;
+                box-shadow: 2px 2px 2px #fff;
+            }
+            .useTimes {
+                background-color: rgba(255, 153, 102, 1);
+            }
+            .useMount {
+                background-color: rgba(102, 204, 204, 1);
+                margin: 0 8%;
+            }
+            .useMost {
+                background-color: rgba(153, 204, 255, 1);
+            }
+            .echart-div {
+                width: 80%;
+                min-height: 15rem;
+            }
+            .part-record-divLeft {
+                position: absolute;
+                top: 0;
+                left: 5%;
+                width: 7%;
+                padding: 3% 1% 0 1%;
+                height: 7rem;
+                background-color: rgb(72, 118, 255);
+                font-weight: 600;
+                border-radius: 0 0 15px 15px;
+                text-align: center;
+                vertical-align: bottom;
+            }
+            .part-record-divRigt {
+                position: absolute;
+                top: 0;
+                right: 5%;
+                width: 7%;
+                height: 7rem;
+                border: 3px solid rgb(238, 201, 0);
+                color: rgb(238, 201, 0);
+                font-weight: 600;
+                border-radius: 0 0 15px 15px;
+                text-align: center;
+                vertical-align: bottom;
+                padding-top: 2%;
+            }
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/src/views/screenAdaptation/pages/adminCenter/moduleCom/oa/goodsUseCensus/interConfig.js b/src/views/screenAdaptation/pages/adminCenter/moduleCom/oa/goodsUseCensus/interConfig.js
new file mode 100644
index 0000000..37c4e80
--- /dev/null
+++ b/src/views/screenAdaptation/pages/adminCenter/moduleCom/oa/goodsUseCensus/interConfig.js
@@ -0,0 +1,28 @@
+export default {
+    /*
+     * 获取服务器端系统时间
+     * */
+    "getNowTime":{
+        url:'/intellioa/common/getNowTime',
+        method:'get',
+        isTestLogin:true
+    },
+    //y-获取物品使用统计数据6.1
+"getGoodsUseRecord":{
+        url:'/intellioa/supplies/report/byEveryday',
+    method:'get',
+    isTestLogin:true
+}
+//     // Y-获取即时库存数据
+//     "getStock":{
+//         url:'/intellioa/supplies/info/treelist',
+//         method:'post',
+//         isTestLogin:true
+//     },
+
+
+// 返回值
+// code：状态码2000、5000、4011
+// msg：响应说明
+
+}