联调饼图api

back/src/views/modules/workBench/api.js

@@ -44,3 +44,43 @@ export const getHasToDoTask = (data, success, fail) => {
         fail && fail(err)
     })
 }
+
+// 上架统计《====》饼图
+export const getTotalByDept = (data, success, fail) => {
+    Request({
+        methods: 'get',
+        url: '/resource/selectTotalByDept',
+        data
+    }).then(res => {
+        success && success(res)
+    }).catch(err => {
+        fail && fail(err)
+    })
+}
+
+
+// 部门申请
+export const getApply = (data, success, fail) => {
+    Request({
+        methods: 'get',
+        url: '/resource/selectTotalApplyByDept',
+        data
+    }).then(res => {
+        success && success(res)
+    }).catch(err => {
+        fail && fail(err)
+    })
+}
+
+// 部门需求
+export const getRequire = (data, success, fail) => {
+    Request({
+        methods: 'get',
+        url: '/demanData/selectFlagCountByDepts',
+        data
+    }).then(res => {
+        success && success(res)
+    }).catch(err => {
+        fail && fail(err)
+    })
+}

back/src/views/modules/workBench/components/dept-chart-view.vue

@@ -1,22 +1,203 @@
 <template>
-    <div class="dept-box">
+    <div>
-       
+        <div class="title">{{ title }}</div>
+        <div v-if="dataListCopy.length > 0" style="width:260px; height:232px" class="dept-chart-view" :id="id">
+        </div>
+        <div class="no-data" v-else>暂无数据</div>
     </div>
+
 </template>
 <script>
+import * as echarts from 'echarts';
+
 export default {
     data() {
         return {
+            dataListCopy: [],
+            myChart: null,
+        }
+    },
+    mounted() {
+        this.init()
+    },
+    props: {
+        id: {
+            type: String,
+            default: ''
+        },
+        title: {
+            type: String,
+            default: ''
+        },
+        dataList: {
+            type: Array,
+            default: () => []
+        },
+    },
+    watch: {
+        dataList: {
+            handler(newVal, oldVal) {
+                if (newVal) {
+                    this.dataListCopy = newVal;
+                    if (document.getElementById(this.id)) {
+                        this.init()
+                    }
+                }
+            },
+            deep: true,
+            immediate: true
+        },
+    },
+    methods: {
+        init() {
+            var chartDom = document.getElementById(this.id);
+            if (this.myChart) {
+                this.myChart.dispose()
+            }
+            this.myChart = chartDom && echarts.init(chartDom);
 
+            let lengendArr = this.dataListCopy.filter(v => v.name);
+
+            let colorArray = [
+                '#fe845e', '#ff3e55', '#d5c438', '#ff9999', '#9c78ed', '#48c760', '#48c6c7', '#0058e1',
+            ]
+
+            let total = 0;
+            this.dataListCopy.map(v => {
+                if (v.value || v.value === 0) {
+                    total = total + Number(v.value || 0)
+                }
+            })
+            let option = {
+                "animation": true,
+                title: [
+                    {
+                        text: '{val|' + total + '} {unit|' + '个' + '}',
+                        top: 'top',
+                        left: 'center',
+                        textStyle: {
+                            rich: {
+                                val: {
+                                    fontSize: 20,
+                                    fontWeight: 'bold',
+                                    color: '#212121',
+                                    padding: [80, 0]
+                                },
+                                unit: {
+                                    fontSize: 16,
+                                    fontWeight: 'normal',
+                                    color: '#212121',
+                                    padding: [80, 0],
+                                }
+                            },
+                        },
+                    },
+                ],
+                "legend": {
+                    type: 'scroll',
+                    "width": "90%",
+                    "left": "center",
+                    "textStyle": {
+                        "color": "#212121",
+                        "fontSize": 12
+                    },
+                    "icon": "circle",
+                    "right": "0",
+                    "bottom": "0",
+                    "padding": [10, 60],
+                    "itemGap": 10,
+                    "data": lengendArr
+                },
+                "series": [{
+                    "type": "pie",
+                    "center": ["50%", "40%"],
+                    "radius": ["50%", "63%"],
+                    "color": colorArray,
+                    "startAngle": 135,
+                    label: {
+                        show: false
+                    },
+                    "emphasis": {
+                        "label": {
+                            "show": false,
+                            "formatter": "{b|{b}:}  {per|{d}%}  ",
+                            "backgroundColor": "rgba(255, 147, 38, 0)",
+                            "borderColor": "transparent",
+                            "borderRadius": 4,
+                            "rich": {
+                                "a": {
+                                    "color": "#999",
+                                    "lineHeight": 22,
+                                    "align": "center"
+                                },
+                                "hr": {
+                                    "borderColor": "#aaa",
+                                    "width": "100%",
+                                    "borderWidth": 1,
+                                    "height": 0
+                                },
+                                "b": {
+                                    "color": "#fff",
+                                    "fontSize": 18,
+                                    "lineHeight": 33
+                                },
+                                "c": {
+                                    "fontSize": 14,
+                                    "color": "#eee"
+                                },
+                                "per": {
+                                    "color": "#FDF44E",
+                                    "fontSize": 25,
+                                    "padding": [5, 6],
+                                    "borderRadius": 2
+                                }
+                            }
+                        }
+                    },
+                    data: this.dataListCopy,
+                },
+
+                {
+                    "type": "pie",
+                    "center": ["50%", "40%"],
+                    "radius": ["35%", "36%"],
+                    "label": {
+                        "show": false
+                    },
+                    color: ['#d8dde8'],
+                    "data": [{
+                        "value": 78,
+                        "name": "实例1",
+                    }]
+                }
+                ]
+            }
+            this.myChart && option && this.myChart.setOption(option, true);
         }
     }
 }
 </script>
 <style lang="scss" scoped>
-.dept-box {
+.dept-chart-view {
-    width: 394px;
+    width: 260px;
-    height: 252px;
+    height: 232px;
-    margin: 16px;
+    margin: 1px;
-    background: pink;
+}
+
+.title {
+    width: 260px;
+    font-size: 18px;
+    color: #212121;
+    text-align: center;
+    line-height: 30px;
+}
+
+.no-data {
+    width: 260px;
+    height: 232px;
+    line-height: 232px;
+    font-size: 16px;
+    color: #212121;
+    text-align: center;
 }
 </style>

back/src/views/modules/workBench/components/dept-todo-view.vue

@@ -114,6 +114,7 @@ export default {
 .list-box {
     width: 314px;
     height: 252px;
+    padding: 0 16px;
 }
 
 .list-item {

back/src/views/modules/workBench/workBench.vue

@@ -4,9 +4,13 @@
         <div class="flex-row-start top">
             <div class="flex-row-start dept-left">
                 <dept-todo-view title="部门待办" :dataInfo="toToData"></dept-todo-view>
-                <dept-todo-view title="部门已办" :dataInfo="hasToDodoData"></dept-todo-view>
+                <dept-todo-view title="部门已办" :dataInfo="hasToDodoData" style="margin-left: 0"></dept-todo-view>
+            </div>
+            <div class="flex-row-start dept-chart-box">
+                <dept-chart-view id="shelves" title="部门上架" :dataList="resourceData"></dept-chart-view>
+                <dept-chart-view id="apply" title="部门申请" :dataList="applyData"></dept-chart-view>
+                <dept-chart-view id="demand" title="部门需求" :dataList="requireData"></dept-chart-view>
             </div>
-            <div class="dept-chart-box"></div>
         </div>
         <!-- 中 -->
         <div class="center">
@@ -21,14 +25,16 @@
 <script>
 import BottomView from '../workBench/components/bottom-view.vue'
 import CenterView from '../workBench/components/center-view.vue'
+import DeptChartView from '../workBench/components/dept-chart-view.vue'
 import deptTodoView from '../workBench/components/dept-todo-view.vue'
-import * as Apis from './api'
+import * as Apis from './api.js'
 
 export default {
     components: {
         deptTodoView,
         BottomView,
         CenterView,
+        DeptChartView,
     },
     data() {
         return {
@@ -39,7 +45,7 @@ export default {
                 bgColor: 'rgba(228,138,1,0.12)',
                 borderColor: 'rgba(250,123,12,0.54)',
                 textColor: '#f86f01',
-                num: 34,
+                num: 0,
                 list: [],
                 nameStr: 'taskName'
             },
@@ -51,15 +57,29 @@ export default {
                 bgColor: 'rgba(37,165,13,0.12)',
                 borderColor: 'rgba(49,194,20,0.54)',
                 textColor: '#21b107',
-                num: 34,
+                num: 0,
                 list: [],
                 nameStr: 'processDefinitionName'
-            }
+            },
+            // 上架
+            resourceData: [],
+            // 上架
+            applyData: [],
+            // 上架
+            requireData: [],
         }
     },
     mounted() {
+        // 部门待办
         this.getToDo()
+        // 部门已办
         this.getHasToDo()
+        // 上架
+        this.getShelvesTotal()
+        // 申请
+        this.getApplyTotal()
+        // 需求
+        this.getRequireTotal()
     },
     methods: {
         // 待办
@@ -70,12 +90,13 @@ export default {
             }
             Apis.getToDoTask(data, res => {
                 if (res.data.code !== 0) {
-                    return;
+                    return this.$message.error(res.data.msg)
                 }
                 console.log('res----待办-------->', res.data);
                 this.toToData.list = res.data.data.records || []
+                this.toToData.num = res.data.data.records.length || 0
             }, err => {
-                console.log('err-----待办------->', err);
+                this.$message.error(err)
             })
         },
         // 已办
@@ -86,14 +107,63 @@ export default {
             }
             Apis.getHasToDoTask(data, res => {
                 if (res.data.code !== 0) {
-                    return;
+                    return this.$message.error(res.data.msg)
                 }
                 console.log('res----已办-------->', res.data);
                 this.hasToDodoData.list = res.data.data.records || []
+                this.hasToDodoData.num = res.data.data.records.length || 0
             }, err => {
+                this.$message.error(err)
                 console.log('err-----已办------->', err);
             })
         },
+        // 部门上架
+        getShelvesTotal() {
+            Apis.getTotalByDept({}, res => {
+                if (res.data.code !== 0) {
+                    return this.$message.error(res.data.msg)
+                }
+                console.log('res----部门上架-------->', res.data);
+                this.resourceData = this.formatList(res.data.data.total || [])
+            }, err => {
+                this.$message.error(err)
+            })
+        },
+        // 部门申请
+        getApplyTotal() {
+            Apis.getApply({}, res => {
+                if (res.data.code !== 0) {
+                    return this.$message.error(res.data.msg)
+                }
+                console.log('res----部门申请-------->', res.data);
+                this.applyData = this.formatList(res.data.data.total || [])
+            }, err => {
+                this.$message.error(err)
+            })
+        },
+        formatList(list = [], nameStr = 'type') {
+            let arr = []
+            list.map(v => {
+                let obj = {}
+                obj.name = v[nameStr];
+                obj.value = v.count;
+                arr.push(obj)
+            })
+            return arr;
+        },
+        // 部门需求
+        getRequireTotal() {
+            Apis.getRequire({}, res => {
+                if (res.data.code !== 0) {
+                    return this.$message.error(res.data.msg)
+                }
+                console.log('res----部门需求-------->', res.data);
+                this.requireData = this.formatList(res.data.data.total || [], 'flag')
+            }, err => {
+                this.$message.error(err)
+            })
+        },
+
     },
 }
 </script>
@@ -114,17 +184,19 @@ export default {
     .top {
         height: 284px;
         margin-bottom: 16px;
-        background: #fff;
+
     }
 
     .dept-left {
         width: 836px;
+        background: #fff;
+        margin-right: 16px;
     }
 
     .dept-chart-box {
         width: 780px;
         height: 100%;
-        background: orange;
+        background: #fff;
     }
 }
 </style>