计划进度图组件

src/views/system/jbdScan/generalModules.vue

@@ -9,12 +9,14 @@
 import satisfaction from './satisfaction/satisfaction.vue'
 import approve from './approve/approve.vue'
 import orderOpen from './goods/orderOpen.vue'
+import planImplementation from './planImplementation/planImplementation.vue'
 
 export default {
     components: {
         satisfaction,
         approve,
-        orderOpen
+        orderOpen,
+        planImplementation
     },
     props: {
         currentType: {

src/views/system/jbdScan/planImplementation/planImplementation.vue

@@ -0,0 +1,114 @@
+<template>
+    <div>
+        <el-dialog
+            :title="generalData.title || '计划进度'"
+            :visible.sync="generalShow"
+            width="80%"
+            top="5vh"
+            append-to-body
+            custom-class="customClass"
+            @close="close"
+        >
+            <div class="stopCenter">
+                <div v-if="generalData.alertShow" class="tableTop">
+                    <el-alert
+                        :title="generalData.alert.title || ''"
+                        type="success"
+                        :description="generalData.alert.description || ''"
+                        :closable="false"
+                    />
+                </div>
+
+                <el-row :gutter="20">
+                    <el-col :span="6">
+                        <div ref="chart1" class="chart" />
+                    </el-col>
+                    <el-col :span="18">
+                        <div ref="chart2" id="chart2" class="chart" />
+                    </el-col>
+                </el-row>
+            </div>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+import planImplementationJS from './planImplementationJS'
+export default {
+    mixins: [planImplementationJS],
+    props: {
+        show: {
+            type: Boolean,
+            default: false
+        },
+        generalList: {
+            type: Array,
+            default: () => {
+                return []
+            }
+        }
+    },
+    data () {
+        return {
+            generalShow: this.show,
+            id: '',
+            generalData: {
+                title: '',
+                alertShow: false,
+                alert: {
+                    title: '',
+                    description: ''
+                },
+                leftTotal: 0,
+                rightData: {
+                    title: '人数',
+                    xAxisData: ['金源信通'],
+                    series: [{
+                        name: '总数',
+                        data: ['']
+                    }],
+                    color: ['rgb(55, 162, 218)', 'rgb(103, 224, 227)', 'rgb(253, 102, 109)']
+                }
+            }
+        }
+    },
+    watch: {
+        show: {
+            handler () {
+                // this.generalShow = this.show
+            },
+            deep: true,
+            immediate: true
+        }
+    },
+    created () {
+        console.log(this.generalList)
+        this.generalData = this.generalList[0]
+
+        setTimeout(() => {
+            this.getOption(this.generalData.leftTotal)
+            this.barDataPlan(this.generalData.rightData)
+        }, 100)
+    },
+    methods: {
+        close () {
+            this.$emit('generalClose', false)
+        }
+    }
+}
+</script>
+
+<style  scoped>
+.stopCenter{
+    margin: 0 30px 20px 30px;
+}
+
+.tableTop{
+    margin: 10px 0;
+}
+
+.chart{
+    width: 100%;
+    height: 300px;
+}
+</style>

src/views/system/jbdScan/planImplementation/planImplementationJS.js

@@ -0,0 +1,145 @@
+import echarts from 'echarts'
+export default {
+    data () {
+        return {
+            barLable: {
+                show: true,
+                position: 'top',
+                textStyle: { // 数值样式
+                    color: 'black',
+                    fontSize: 12
+                },
+                formatter: (params) => {
+                    // 这个回调函数不起作用了
+                    return params.value === '0' ? '' : params.value
+                }
+
+            }
+        }
+    },
+    methods: {
+        getOption (totalMs = 0) {
+            console.log(totalMs)
+            const option = {
+                series: [
+                    {
+                        type: 'gauge',
+                        min: 0,
+                        max: 100,
+                        animationDuration: 3000,
+                        axisLine: {
+                            lineStyle: {
+                                width: 30,
+                                color: [
+                                    [0.3, '#fd666d'],
+                                    [0.7, '#37a2da'],
+                                    [1, '#67e0e3']
+                                ]
+                            }
+                        },
+                        pointer: {
+                            itemStyle: {
+                                color: 'auto'
+                            }
+                        },
+                        axisTick: {
+                            distance: -30,
+                            length: 8,
+                            lineStyle: {
+                                color: '#fff',
+                                width: 2
+                            }
+                        },
+                        splitLine: {
+                            distance: -30,
+                            length: 30,
+                            lineStyle: {
+                                color: '#fff',
+                                width: 4
+                            }
+                        },
+                        axisLabel: {
+                            show: true
+                        },
+                        detail: {
+                            valueAnimation: true,
+                            formatter: '{value} %',
+                            color: 'auto',
+                            top: '100%',
+                            offsetCenter: [0, '75%']
+                        },
+                        data: [{ value: totalMs, top: '100%' }]
+                    }
+                ]
+            }
+            const accept = echarts.init(this.$refs.chart1)
+            accept.setOption(JSON.parse(JSON.stringify(option)))
+            // this.show1 = true
+        },
+        barDataPlan (data) {
+            data.series.forEach(item => {
+                item.label = this.barLable
+                item.type = 'bar'
+                item.barGap = 0
+                item.emphasis = {
+                    focus: 'series'
+                }
+            })
+            const barDataTy = {
+                // 图例设置
+                legend: {
+                    textStyle: {
+                        fontSize: 12,
+                        color: '#333'
+                    }
+                },
+                title: {
+                    show: true,
+                    text: data.title,
+                    textStyle: {
+                        // color: '#fff',
+                        fontSize: 20,
+                        fontWeight: '600'
+                    },
+                    textAlign: 'center',
+                    left: '50%',
+                    top: '20px'
+                },
+                xAxis: {
+                    name: '部门',
+                    type: 'category',
+                    data: data.xAxisData,
+                    axisTick: {
+                        alignWithLabel: true
+                    },
+                    axisLabel: {
+                        rotate: 30,
+                        interval: 0,
+                        margin: 10
+                    }
+                },
+                yAxis: {
+                    type: 'value',
+                    name: '数量（个）',
+                    minInterval: 1,
+                    nameTextStyle: {
+                        fontSize: 14
+                    },
+                    splitLine: {
+                        show: false
+                    }
+                },
+                series: data.series,
+                color: data.color,
+                tooltip: {
+                    show: true,
+                    trigger: 'axis'
+                }
+            }
+            const accept = echarts.init(this.$refs.chart2)
+            accept.setOption(JSON.parse(JSON.stringify(barDataTy)))
+        }
+    }
+
+}
+