Merge branch 'yuanfeng' into '20210819'

Yuanfeng

See merge request vue-project/liangXing/frontEnd!5

src/components/Swiper/index.vue

+<template>
+    <swiper :options="swiperOption">
+        <slot>
+            <!-- 滚动内容 -->
+            <!-- 下面的按需求引入 -->
+        </slot>
+        <!-- <div class="swiper-pagination" slot="pagination"></div>
+        <div class="swiper-button-prev" slot="button-prev"></div>
+        <div class="swiper-button-next" slot="button-next"></div> -->
+    </swiper>
+</template>
+
+<script>
+import { swiper } from 'vue-awesome-swiper'
+import 'swiper/dist/css/swiper.css'
+
+export default {
+    name: 'Swiper',
+    props: {
+        options: {
+            type: Object,
+            default () {
+                return {}
+            }
+        }
+    },
+    data () {
+        return {
+            swiperOption: {
+                // 滚动方向
+                // direction: 'vertical',
+                // 展示swiper-slide的个数
+                slidesPerView: 1,
+                // 展示swiper-slide是否居中
+                centeredSlides: true,
+                autoplay: {
+                    delay: 3000,
+                    disableOnInteraction: false // 手动切换之后继续自动轮播
+                },
+                loop: true
+                // 显示分页
+                // pagination: {
+                //     el: '.swiper-pagination',
+                //     clickable: true // 允许分页点击跳转
+                // },
+                // 设置点击箭头
+                // navigation: {
+                //     nextEl: '.swiper-button-next',
+                //     prevEl: '.swiper-button-prev'
+                // }
+            }
+        }
+    },
+    components: {
+        swiper
+    },
+    created () {
+        this.initPage()
+    },
+    methods: {
+        initPage () {
+            // 合并参数
+            Object.assign(this.swiperOption, this.options)
+        }
+    }
+}
+</script>
+
+<style lang="less" scoped>
+.swiper-container {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    .swiper-slide {
+        width: 100%;
+        height: 100%;
+    }
+}
+</style>
\ No newline at end of file

src/components/echarts/LineChart.vue

+<template>
+    <chart-el :chartOpt="chartConf" />
+</template>
+
+<script>
+import mixinChart from 'runner/common/mixins/mixinChart'
+
+export default {
+    name: 'LineChart',
+
+    mixins: [mixinChart],
+
+    data () {
+        return {
+            chartConf: {}
+        }
+    },
+
+    props: {
+        // 图表布局配置 - width, height
+        layout: {
+            type: Object,
+            default () {
+                return {
+                    width: '100%',
+                    height: '160px'
+                }
+            }
+        },
+
+        // 图表配置
+        option: {
+            type: Object,
+            default () {
+                return {
+                    base: {},
+                    seriesData: []
+                }
+            }
+        }
+    },
+
+    mounted () {
+        this.initComponents()
+    },
+
+    methods: {
+        initComponents () {
+            const { width = '100%', height = '160px' } = this.layout
+            const option = this.getChartOption() || {}
+            this.chartConf = {
+                width,
+                height,
+                option
+            }
+        },
+
+        /**
+         * @method getSeriesData 图表数据
+         */
+        getSeriesData () {
+            const defSeriesOpts = {
+                type: 'line',
+                symbol: 'circle',
+                symbolSize: 4,
+                lineStyle: {
+                    width: 2,
+                    shadowOffsetX: 5,
+                    shadowOffsetY: 3,
+                    shadowBlur: 20
+                },
+                areaStyle: {
+                    color: {
+                        type: 'linear',
+                        x: 0,
+                        y: 0,
+                        x2: 0,
+                        y2: 1,
+                        colorStops: [{
+                            offset: 0, color: 'rgba(36, 139, 255, 0.85)' // 0% 处的颜色
+                        }, {
+                            offset: 1, color: 'rgba(0, 190, 255, 0.11)' // 100% 处的颜色
+                        }],
+                        global: false // 缺省为 false
+                    }
+                },
+                data: []
+            }
+
+            let result = [defSeriesOpts]
+            const { seriesData = [] } = this.option
+            if (seriesData.length) {
+                const temp = []
+                seriesData.forEach(item => {
+                    temp.push(this.deepMerge({}, defSeriesOpts, item))
+                })
+                result = temp
+            }
+
+            return result
+        },
+
+        /**
+         * @method getSeriesData 图表数据
+         */
+        getChartOption () {
+            const defaultColors = ['#00BEFF', '#00DE7D']
+            const defaultOption = {
+                color: defaultColors,
+                title: {
+                    show: false
+                },
+                legend: {
+                    icon: 'circle',
+                    itemWidth: 8,
+                    itemHeight: 8,
+                    top: '-2%',
+                    right: '0%',
+                    itemGap: 40,
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 14,
+                        fontFamily: 'MicrosoftYaHei'
+                    },
+                    data: []
+                },
+                tooltip: {
+                    trigger: 'item',
+                    position: 'top',
+                    padding: [3, 5],
+                    borderColor: '#3EB9FF',
+                    backgroundColor: '#1771B8',
+                    textStyle: {
+                        height: 12,
+                        fontSize: 14,
+                        color: '#fff'
+                    },
+                    formatter (item) {
+                        return item.value
+                    }
+                },
+                grid: {
+                    left: 0,
+                    right: 30,
+                    bottom: 0,
+                    top: 20,
+                    containLabel: true
+                },
+                xAxis: {
+                    type: 'category',
+                    // 两边留白
+                    boundaryGap: false,
+                    axisTick: {
+                        show: false
+                    },
+                    axisLabel: {
+                        textStyle: {
+                            fontSize: 14,
+                            fontFamily: 'CenturyGothic',
+                            fontWeight: 400,
+                            color: '#469CCC'
+                        }
+                    },
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            color: '#3EB9FF',
+                            opacity: 0.3
+                        }
+                    },
+                    data: []
+                },
+                yAxis: {
+                    type: 'value',
+                    axisTick: {
+                        show: false
+                    },
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            color: '#9CBCF9',
+                            opacity: 0.5
+                        }
+                    },
+                    splitLine: {
+                        show: false
+                    },
+                    axisLabel: {
+                        textStyle: {
+                            fontSize: 14,
+                            fontFamily: 'CenturyGothic',
+                            fontWeight: 400,
+                            color: '#469CCC'
+                        }
+                    }
+                }
+            }
+            // 添加series
+            const result = this.deepMerge({}, defaultOption, this.option.base)
+            result.series = this.getSeriesData()
+
+            return result
+        }
+    }
+}
+</script>