医废大屏

src/apps/home/components/screen-module.vue

@@ -107,6 +107,8 @@
                 <smodule97 v-if="item.name === 'mode97'" :data="data" />
                 <smodule98 v-if="item.name === 'mode98'" :data="data" />
                 <smodule99 v-if="item.name === 'mode99'" :data="data" />
+                <smodule100 v-if="item.name === 'mode100'" :data="data" />
+
 
             </div>
         </template>
@@ -217,6 +219,8 @@ import Smodule96 from '@/apps/home/components/smodule/smodule96.vue';
 import Smodule97 from '@/apps/home/components/smodule/smodule97.vue';
 import Smodule98 from '@/apps/home/components/smodule/smodule98.vue';
 import Smodule99 from '@/apps/home/components/smodule/smodule99.vue';
+import Smodule100 from '@/apps/home/components/smodule/smodule100.vue';
+
 
 @Component({
     props: {

src/apps/home/components/smodule/smodule100.vue

@@ -0,0 +1,164 @@
+<template>
+    <div class="module-main">
+        <div class="module-box">
+            <div class="header">
+                <div class="rhombus" />
+                <span class="title">医废周数据分析</span>
+            </div>
+            <echarts  v-if="!loading" :data="echartdata" class="echarts" />
+        </div>
+    </div>
+
+</template>
+
+<script>
+import Vue from 'vue';
+
+import Component from 'vue-class-component';
+import Echarts from '@/common/components/echarts.vue';
+import api from '../../api';
+
+@Component({
+    components: {
+        Echarts,
+    },
+    props: {
+        data: {
+            type: Object,
+            default: null,
+        },
+    },
+})
+export default class Smodule100 extends Vue {
+    loading = true;
+
+    echartdata = {
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+                type: 'cross',
+                crossStyle: {
+                    color: '#999',
+                },
+            },
+        },
+        color: ['#B24038', '#FFF000', '#709FA6', '#C8856B', '#9DC5B0'], // , '#7D9D85'
+        legend: {
+            data: [],
+            textStyle: {
+                color: '#88B1D0',
+                fontSize: 10,
+            },
+        },
+        xAxis: [
+            {
+                type: 'category',
+                data: [],
+                rotate: 45,
+                axisLabel: {
+                    textStyle: {
+                        color: '#fff',
+                    },
+                },
+                splitLine: {
+                    show: false, // 去掉网格线
+                },
+                splitArea: {
+                    show: false,
+                },
+            },
+        ],
+
+        yAxis: [
+            {
+                type: 'value',
+                interval: 50,
+                axisLabel: {
+                    textStyle: {
+                        color: '#fff',
+                    },
+                },
+                splitLine: {
+                    show: false, // 去掉网格线
+                },
+                splitArea: {
+                    show: false,
+                },
+            },
+        ],
+        series: [
+
+        ],
+    };
+
+    created() {
+        this.getWeekCateRecord();
+        setInterval(() => {
+            this.getWeekCateRecord();
+        }, 5000 * 60);
+    }
+
+    getWeekCateRecord() {
+        this.loading = true;
+        api.getWeekCateRecord().then((res) => {
+            this.echartdata.xAxis[0].data = res.data.date;
+            this.echartdata.legend.data = res.data.cate;
+            const lists = res.data.list;
+            const series = [];
+            lists.forEach((e) => {
+                series.push(
+                    {
+                        name: e.title,
+                        type: 'bar',
+                        data: e.list,
+                    },
+                );
+            });
+
+            this.echartdata.series = series;
+
+            this.loading = false;
+        }).catch(() => {}).finally(() => {
+            this.loading = false;
+        });
+    }
+}
+</script>
+
+<style scoped lang="scss">
+     .module-box{
+        width: 100%;
+        height: 100%;
+        position: relative;
+    }
+    .module-box .header{
+        width: 97%;
+        height: 40px;
+        line-height: 40px;
+        padding-left: 3%;
+    }
+    .module-box .header .rhombus{
+        width: 14px;
+        height: 14px;
+        background: #2D59BC;
+        display: inline-block;
+        clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
+    }
+    .module-box .header .title{
+        color: #FFFFFF;
+        font-size: 15px;
+        font-weight: 500;
+        margin-left: 2%;
+    }
+    .module-box .echarts{
+        width: 100%;
+        height: auto;
+        position: absolute;
+        top: 40px;
+        left: 0;
+        right: 0;
+        bottom: 0;
+    }
+ 
+
+</style>