U 环境监测页面

whychw

2021-05-14 054f39773f3ca63182af9a1d11ef7b2ee2f42d68

U 环境监测页面

 package-lock.json

Diff too large

 package.json

@@ -10,6 +10,7 @@
    "@types/three": "^0.103.2",
    "axios": "^0.19.2",
    "core-js": "^3.6.5",
    "echarts": "^5.1.1",
    "element-ui": "^2.13.2",
    "postcss-px2rem": "^0.3.0",
    "three": "^0.111.0",

 public/theme/normal.css

@@ -167,6 +167,9 @@
.page-panel-title {
    color: #3399FF;
    font-weight: bold;
    display: -webkit-flex;
    display: flex;
    align-items: center;
}
.title-pillar {
    display: inline-block;

 src/pages/monitor/environmentMonitor.vue

New file
@@ -0,0 +1,160 @@
<template>
    <flex-layout>
        <page-panel title="环境监测" class="flex-page-content">
            <div slot="title" class="page-panel-title">
                <span class="title-pillar"></span>环境监测
            </div>
            <div class="page-content">
                <div class="wrap">
                    <div class="panel-grp">
                        <div class="item"
                            v-for="(item, idx) in list"
                            :key="'list_' + idx"
                            >
                            <panel
                                :title="item.title"
                                :list="item.list"
                                ></panel>
                        </div>
                    </div>
                    <div class="room"></div>
                </div>
            </div>
        </page-panel>
    </flex-layout>
</template>

<script>
import pagePanel from '@/components/pagePanel';
import panel from './panel';

export default {
    data () {
        return {
            list: [
                {
                    title: '水质监测'
                    ,list: [
                        {
                            name: '参数1'
                            ,value: 120
                        }
                        ,{
                            name: '参数2'
                            ,value: 340
                        }
                        ,{
                            name: '参数3'
                            ,value: 40
                        }
                        ,{
                            name: '参数4'
                            ,value: 3
                        }
                        ,{
                            name: '参数5'
                            ,value: 30
                        }
                    ]
                }
                ,{
                    title: '漏水监测'
                    ,list: [
                        {
                            name: '参数1'
                            ,value: 340
                        }
                        ,{
                            name: '参数2'
                            ,value: 340
                        }
                        ,{
                            name: '参数3'
                            ,value: 340
                        }
                        ,{
                            name: '参数4'
                            ,value: 340
                        }
                        ,{
                            name: '参数5'
                            ,value: 340
                        }
                    ]
                }
                ,{
                    title: '绝缘监测'
                    ,list: [
                        {
                            name: '参数1'
                            ,value: 340
                        }
                        ,{
                            name: '参数2'
                            ,value: 340
                        }
                        ,{
                            name: '参数3'
                            ,value: 340
                        }
                        ,{
                            name: '参数4'
                            ,value: 340
                        }
                        ,{
                            name: '参数5'
                            ,value: 340
                        }
                    ]
                }
            ]
        }
    }
    ,components: {
        pagePanel
        ,panel
    }
    ,mounted () {
        setTimeout(() => {
            this.list[1].list[0].value = 40;
        }, 5000);
    }
}
</script>

<style scoped>
.page-content {
    display: -webkit-flex;
    display: flex;
    height: 100%;
    justify-content: center;
    align-items: center;
}
.wrap {
    /*width: 980px;*/
    width: 80%;
    max-width: 1000px;/* no */
    -webkit-border-radius: 6px;
    border-radius: 6px;
}
.panel-grp {
    display: -webkit-flex;
    display: flex;

}
.item {
    flex: 1;
    height: 300px;
    background: #fff;
    border-radius: 6px 6px 0 0;
}
.item + .item {
    margin-left: 10px;
}
.room {
    width: 100%;
    height: 0;
    padding-bottom: 43.65%;
    background: #fff url(./images/room.png) center center / contain no-repeat;
}
</style>

 src/pages/monitor/images/room.png

 src/pages/monitor/js/api.js

New file
@@ -0,0 +1,3 @@
import axios from "@/assets/js/axios";

export {}

 src/pages/monitor/panel.vue

New file
@@ -0,0 +1,148 @@
<template>
    <div class="root">
        <div class="title">{{title}}</div>
        <div class="graph" ref="graph"></div>
        <!-- <div class="list">
            <div class="item"
                v-for="(item, index) in list"
                :key="'list_' + index"
                >
                <span>{{item.name}}</span>
                <span>{{item.value}}</span>
            </div>
        </div> -->
    </div>
</template>

<script>

import * as Echarts from 'echarts';


export default {
    // 图表配置
    opts: {
        legend: {
            top: 'bottom',
            icon: 'circle'
        },
        tooltip: {
            trigger: 'item',
            // formatter: '{a} <br/>{b} : {c} ({d}%)'
            formatter: '{b} : {c} ({d}%)'
        },
        series: [
            {
                // name: '面积模式',
                type: 'pie',
                radius: [0, 46],
                center: ['50%', '50%'],
                // roseType: 'radius',
                itemStyle: {
                    borderRadius: 4
                },
                // label: {
                //     formatter: '{b}: {d}'
                // },
                data: []
            }
        ]
    }
    ,myChart: null
    ,data () {
        return {

        }
    }
    ,components: {

    }
    ,props: {
        list: {
            type: Array
            ,default () {
                return []
            }
        }
        ,title: {
            type: String
            ,default: ''
        }
    }
    ,watch: {
        list: {
            handler (n) {
                if (n) {
                    this.update(n);
                }
            }
            ,deep: true
        }
    }
    ,methods: {
        init () {
            let chartDom = this.$refs.graph;
            let myChart = Echarts.init(chartDom);
            this.$options.myChart = myChart;
            let option = this.$options.opts;
            option.series[0].data = this.list;

            option && myChart.setOption(option);
        }
        ,update (data) {
            let option = this.$options.opts;
            let myChart = this.$options.myChart;
            option.series[0].data = data;
            myChart.setOption(option);
        }
        ,resizeHandle () {
            this.$options.myChart.resize();
        }
    }
    ,mounted () {
        let opts = this.$options.opts;
        opts.legend['formatter'] = (params) => {
            for (var i = 0; i < opts.series[0].data.length; i++) {
                if (opts.series[0].data[i].name == params) {
                    return params + ": " + opts.series[0].data[i].value;
                }
            }
            return params;
        };
        this.init();
        window.addEventListener('resize', this.resizeHandle);
    }
    ,beforeDestroy () {
        window.removeEventListener('resize', this.resizeHandle);
    }
}
</script>

<style scoped>
.root {
    position: relative;
    color: #000;
    height: 100%;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
}
.graph {
    flex: 1;
    /*width: 200px;
    height: 200px;*/
}
.title {
    position: absolute;
    top: 1em;
    right: .6em;
    font-size: 22px;
    font-weight: 700;
    color: #000;
}

.list {
    display: -webkit-flex;
    display: flex;
}
</style>

 src/router/routes.js

@@ -64,5 +64,13 @@
            },
            component: (resolve) => require(['@/pages/warn/incomingScreenWarnRule.vue'], resolve),
        },
        {   // 环境监测
            path: 'environmentMonitor',
            name: 'environmentMonitor',
            meta: {
                name: '进线屏告警规则',
            },
            component: (resolve) => require(['@/pages/monitor/environmentMonitor.vue'], resolve),
        },
    ]
}];