设备故障报警

src/assets/style/public.scss

@@ -101,3 +101,8 @@ $el-bg-color-3: #EBEEF5;
 
 //四级边框&&四级灰
 $el-bg-color-4: #F2F6FC;
+
+
+.margin-lr-20{
+  margin: 0 20px;
+}

src/assets/style/theme/theme-base.scss

@@ -98,8 +98,6 @@
         }
         .d2-theme-container-main-body {
           position: relative;
-          margin: 24px 24px 85px;
-
         }
       }
     }

src/assets/style/theme/theme.scss

@@ -176,6 +176,7 @@
   .d2-theme-container {
     // 侧边栏
     .d2-theme-container-aside {
+        border-right:1px solid #ECECEC ;
       // 菜单为空的时候显示的信息
       .d2-layout-header-aside-menu-empty {
         background: $theme-aside-menu-empty-background-color;

src/main.js

@@ -44,8 +44,9 @@ import { preventReClick } from '@/util/plugins'
 // import './promission'
 //自定义提示框
 import toastRegistry from './components/toast/index'
-
+import cardWarp from '@/pages/components/cardWarp.vue'
 import ElementUI from 'element-ui' //element-ui的全部组件
+Vue.component('cardWarp', cardWarp)
 // import 'element-ui/lib/theme-chalk/index.css'
 Vue.use(toastRegistry)//element-ui的css
 Vue.use(ElementUI) //使用elementUI

src/pages/analysis/fault/index.vue

-<template>
-    <div>
-        设备故障报警
-    </div>
+<template lang='pug'>
+card-warp(title="故障报警分析")
+    div(slot="right")
+        div
+            span 时间范围：
+            el-date-picker.margin-lr-20(
+                size='mini'
+                v-model="dateValue",
+                type="daterange",
+                align="right",
+                unlink-panels,
+                range-separator="至",
+                start-placeholder="开始日期",
+                end-placeholder="结束日期",
+                :picker-options="pickerOptions"
+            )
+            el-button(size='mini' type='primary') 查询
+    div(slot="content")
+        .echartsWarp(width="100%", flex)
+            div
+                .title 设备故障统计
+                pie
+            div
+                .title 设备报警统计
+                pie2
+            div
+                .title 设备类型故障数量统计
+                pie3
+            div
+                .title 设备故障数量统计
+                pie4
 </template>
 
 <script>
-    export default {
+import pie from './pie'
+import pie2 from './pie2'
+import pie3 from './pie3'
+import pie4 from './pie4'
+export default {
+    components: {
+        pie,
+        pie2,
+        pie3,
+        pie4
+    },
+    data() {
+        return {
+            dateValue: '',
 
+            pickerOptions: {
+                shortcuts: [
+                    {
+                        text: '最近一周',
+                        onClick(picker) {
+                            const end = new Date()
+                            const start = new Date()
+                            start.setTime(
+                                start.getTime() - 3600 * 1000 * 24 * 7
+                            )
+                            picker.$emit('pick', [start, end])
+                        }
+                    },
+                    {
+                        text: '最近一个月',
+                        onClick(picker) {
+                            const end = new Date()
+                            const start = new Date()
+                            start.setTime(
+                                start.getTime() - 3600 * 1000 * 24 * 30
+                            )
+                            picker.$emit('pick', [start, end])
+                        }
+                    },
+                    {
+                        text: '最近三个月',
+                        onClick(picker) {
+                            const end = new Date()
+                            const start = new Date()
+                            start.setTime(
+                                start.getTime() - 3600 * 1000 * 24 * 90
+                            )
+                            picker.$emit('pick', [start, end])
+                        }
+                    }
+                ]
+            }
+        }
+    },
+    methods: {
+        tabClick(tab, event) {
+            console.log(tab, event)
+        }
     }
+}
 </script>
 
 <style lang="scss" scoped>
-
+.echartsWarp {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    height: calc(100vh - 260px);
+    > div {
+        width: 48%;
+        height: calc(90% / 2);
+        margin: 3px;
+        padding: 13px;
+        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
+        .title {
+            font-size: 16px;
+            font-family: Microsoft YaHei;
+            font-weight: 600;
+            color: #000000;
+            line-height: 40px;
+            &::before {
+                content: "";
+                display: inline-block;
+                width: 10px;
+                height: 10px;
+                border-radius: 50%;
+                background: #0097ff;
+                margin: 0 10px;
+            }
+        }
+    }
+}
 </style>

src/pages/analysis/fault/pie.vue

+<template lang='pug'>
+#pie(:style="{ width: '100%', height: '90%'}")
+</template>
+
+<script>
+export default {
+    mounted() {
+        this.pie()
+    },
+    methods: {
+        pie() {
+            let dom = document.getElementById('pie')
+            if (!dom) return
+            let myCharts = this.$echarts.init(dom)
+            let option = {
+
+                tooltip: {
+                    trigger: 'item'
+                },
+                legend: {
+                    orient: 'horizontal',
+                    top: '1%'
+                },
+                series: [
+                    {
+                        type: 'pie',
+                        radius: '50%',
+                        data: [
+                            { value: 1048, name: '搜索引擎' },
+                            { value: 735, name: '直接访问' },
+                            { value: 580, name: '邮件营销' },
+                            { value: 484, name: '联盟广告' },
+                            { value: 300, name: '视频广告' }
+                        ]
+
+                    }
+                ]
+            }
+            myCharts.setOption(option)
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

src/pages/analysis/fault/pie2.vue

+<template lang='pug'>
+#pie2(:style="{ width: '100%', height: '90%' }")
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            legendData: [],
+            nameList: [
+  '赵', '钱', '孙', '李', '周', '吴', '郑', '王', '冯', '陈', '褚', '卫', '蒋', '沈', '韩'
+            ],
+            list: {}
+        }
+    },
+    created() {
+        this.list = this.genData(20)
+    },
+    mounted() {
+        this.ring()
+        console.log(this.list)
+    },
+    methods: {
+        ring() {
+            let dom = document.getElementById('pie2')
+            if (!dom) return
+            let myCharts = this.$echarts.init(dom)
+            let option = {
+                tooltip: {
+                    trigger: 'item',
+                    formatter: '{a} <br/>{b} : {c} ({d}%)'
+                },
+                legend: {
+                    type: 'scroll',
+                    orient: 'vertical',
+                    right: 10,
+                    top: 20,
+                    bottom: 20,
+                    data: this.list.legendData,
+
+                    selected: this.list.selected
+                },
+                series: [
+                    {
+                        name: '姓名',
+                        type: 'pie',
+                        radius: '55%',
+                        center: ['40%', '50%'],
+                        data: this.list.seriesData,
+                        emphasis: {
+                            itemStyle: {
+                                shadowBlur: 10,
+                                shadowOffsetX: 0,
+                                shadowColor: 'rgba(0, 0, 0, 0.5)'
+                            }
+                        }
+                    }
+                ]
+            }
+            myCharts.setOption(option)
+        },
+        genData(count) {
+            var legendData = []
+            var seriesData = []
+            for (var i = 0; i < count; i++) {
+                var name =
+                    Math.random() > 0.65
+                        ? this.makeWord(4, 1) + '·' + this.makeWord(3, 0)
+                        : this.makeWord(2, 1)
+                legendData.push(name)
+                seriesData.push({
+                    name: name,
+                    value: Math.round(Math.random() * 100000)
+                })
+            }
+
+            return {
+                legendData: legendData,
+                seriesData: seriesData
+            }
+        },
+        makeWord(max, min) {
+            var nameLen = Math.ceil(Math.random() * max + min)
+            var name = []
+            for (var i = 0; i < nameLen; i++) {
+                name.push(
+                    this.nameList[ Math.round(Math.random() * this.nameList.length - 1) ]
+                )
+            }
+            return name.join('')
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

src/pages/analysis/fault/pie3.vue

+<template lang='pug'>
+#pie3(:style="{ width: '100%', height: '90%'}")
+</template>
+
+<script>
+export default {
+    mounted() {
+        this.pie()
+    },
+    methods: {
+        pie() {
+            let dom = document.getElementById('pie3')
+            if (!dom) return
+            let myCharts = this.$echarts.init(dom)
+            let option = {
+
+                tooltip: {
+                    trigger: 'item'
+                },
+                legend: {
+                    orient: 'horizontal',
+                    top: '1%'
+                },
+                series: [
+                    {
+                        type: 'pie',
+                        radius: '50%',
+                        data: [
+                            { value: 1048, name: '搜索引擎' },
+                            { value: 735, name: '直接访问' },
+                            { value: 580, name: '邮件营销' },
+                            { value: 484, name: '联盟广告' },
+                            { value: 300, name: '视频广告' }
+                        ]
+
+                    }
+                ]
+            }
+            myCharts.setOption(option)
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

src/pages/analysis/fault/pie4.vue

+<template lang='pug'>
+#pie4(:style="{ width: '100%', height: '90%' }")
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            legendData: [],
+            nameList: [
+                '赵',
+                '钱',
+                '孙',
+                '范',
+                '屈',
+                '项',
+                '祝',
+                '董',
+                '梁',
+                '杜',
+                '阮',
+                '蓝',
+                '闵',
+                '席',
+                '季',
+                '麻',
+                '强',
+                '贾',
+                '路',
+                '娄',
+                '危'
+            ],
+            list: {}
+        }
+    },
+    created() {
+        this.list = this.genData(20)
+    },
+    mounted() {
+        this.ring()
+        console.log(this.list)
+    },
+    methods: {
+        ring() {
+            let dom = document.getElementById('pie4')
+            if (!dom) return
+            let myCharts = this.$echarts.init(dom)
+            let option = {
+                tooltip: {
+                    trigger: 'item',
+                    formatter: '{a} <br/>{b} : {c} ({d}%)'
+                },
+                legend: {
+                    type: 'scroll',
+                    orient: 'vertical',
+                    right: 10,
+                    top: 20,
+                    bottom: 20,
+                    data: this.list.legendData,
+
+                    selected: this.list.selected
+                },
+                series: [
+                    {
+                        name: '姓名',
+                        type: 'pie',
+                        radius: '55%',
+                        center: ['40%', '50%'],
+                        data: this.list.seriesData,
+                        emphasis: {
+                            itemStyle: {
+                                shadowBlur: 10,
+                                shadowOffsetX: 0,
+                                shadowColor: 'rgba(0, 0, 0, 0.5)'
+                            }
+                        }
+                    }
+                ]
+            }
+            myCharts.setOption(option)
+        },
+        genData(count) {
+            var legendData = []
+            var seriesData = []
+            for (var i = 0; i < count; i++) {
+                var name =
+                    Math.random() > 0.65
+                        ? this.makeWord(4, 1) + '·' + this.makeWord(3, 0)
+                        : this.makeWord(2, 1)
+                legendData.push(name)
+                seriesData.push({
+                    name: name,
+                    value: Math.round(Math.random() * 100000)
+                })
+            }
+
+            return {
+                legendData: legendData,
+                seriesData: seriesData
+            }
+        },
+        makeWord(max, min) {
+            var nameLen = Math.ceil(Math.random() * max + min)
+            var name = []
+            for (var i = 0; i < nameLen; i++) {
+                name.push(
+                    this.nameList[ Math.round(Math.random() * this.nameList.length - 1) ]
+                )
+            }
+            return name.join('')
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

src/pages/components/cardWarp.vue

+<template lang='pug'>
+.card-warp
+    .card-header
+        span.card-title {{ title }}
+        slot(name="right")
+    .card-content
+        slot(name="content")
+</template>
+
+<script>
+export default {
+    name: 'card-warp',
+    props: {
+        title: {
+            type: String,
+            default: '数据统计'
+        }
+    }
+}
+</script>
+<style lang="scss" scoped>
+.card-warp {
+    width: 100%;
+    height: 100%;
+    .card-header {
+        display: flex;
+        justify-content: space-between;
+        height: 74px;
+        line-height: 74px;
+        padding: 0 20px;
+        border-bottom: 1px solid #ececec;
+        .card-title {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-size: 16px;
+            font-weight: 600;
+            &::before {
+                content: "";
+                display: inline-block;
+                padding-right: 5px;
+                margin-right: 10px;
+                height: 16px;
+
+                background: #21acfc;
+            }
+        }
+    }
+    .card-content {
+        margin: 20px;
+    }
+}
+</style>