新乡大屏

.env.production

@@ -2,5 +2,5 @@ NODE_ENV = 'production'
 VUE_APP_ENV = 'production'
 VUE_APP_VERSION = '1.0'
 VUE_APP_PLATFORM = 'pc'
-VUE_APP_PHP_URL = http://gyjk.jya-tech.com
+VUE_APP_PHP_URL = http://wy.yjafw.com
 BASE_URL = '/wap/screen/'

.env.test

@@ -2,5 +2,5 @@ NODE_ENV = 'test'
 VUE_APP_ENV = 'test'
 VUE_APP_VERSION = '1.0'
 VUE_APP_PLATFORM = 'pc'
-VUE_APP_PHP_URL = http://gyjk.jya-tech.com
+VUE_APP_PHP_URL = http://guoyaojiangkang.com
 BASE_URL = '/'

public/index.html

@@ -11,8 +11,8 @@
   <meta name="viewport" content="width=device-width,initial-scale=1.0">
   <link rel="icon" href="<%= BASE_URL %>favicon.ico">
   <title>
-    医院后勤管理系统
-    <!-- <%= htmlWebpackPlugin.options.title %> -->
+
+    <%= htmlWebpackPlugin.options.title %>
   </title>
 </head>
 

src/apps/xxscreen/api.js

@@ -0,0 +1,79 @@
+import request from '@/common/utils/request';
+
+const SCREEN = '/api/screen/';
+
+export default {
+    // 获取大屏,紧急联系人及图片
+    getOrgInfo() {
+        return request.post(`${SCREEN}Index/getOrgInfo`);
+    },
+    // 项目大屏--员工数据分析
+    getUserCate() {
+        return request.post(`${SCREEN}User/userCate`);
+    },
+    // 项目大屏--员工好评度排名
+    getUserPraise() {
+        return request.post(`${SCREEN}User/userPraise`);
+    },
+    // 项目大屏--员工实时在岗情况
+    getUserPosition() {
+        return request.post(`${SCREEN}User/userPosition`);
+    },
+    // 项目大屏（新）
+    userDepData() {
+        return request.post(`${SCREEN}User/userDep`);
+    },
+    // 项目大屏--工单数据分析 今日工单完成率
+    getFinishRate(parmas) {
+        return request.post(`${SCREEN}Order/finishRate`, parmas);
+    },
+    // 项目大屏--任务数据统计
+    getOrderCount(parmas) {
+        return request.post(`${SCREEN}Order/orderCount`, parmas);
+    },
+    // 项目大屏--热点科室排名
+    getHotDep(parmas) {
+        return request.post(`${SCREEN}Order/hotDep`, parmas);
+    },
+    // 项目大屏--耗材使用排名
+    getHotMate(parmas) {
+        return request.post(`${SCREEN}Order/hotMate`, parmas);
+    },
+    // 项目大屏--任务数据总览
+    getTaskList(parmas) {
+        return request.post(`${SCREEN}Order/taskList`, parmas);
+    },
+    // 项目大屏--医废收取量统计 当天及30天内平均收取重量
+    getDepRecord() {
+        return request.post(`${SCREEN}Waste/depRecord`);
+    },
+    // 项目大屏--巡更任务数据统计 当天及30天异常数量
+    getAddrRecord() {
+        return request.post(`${SCREEN}Patrol/addrRecord`);
+    },
+    // 项目大屏--日常工作任务记录
+    getDailyTaskRecord() {
+        return request.post(`${SCREEN}Index/dailyTaskRecord`);
+    },
+    cateTodoCount() {
+        return request.post(`${SCREEN}Todo/cateTodoCount`);
+    },
+
+    getTaskData(parmas) {
+        return request.post(`${SCREEN}Task/lists`, parmas);
+    },
+    // 最新一条巡更记录
+    getPatrolNewestRecord(parmas) {
+        return request.post(`${SCREEN}Patrol/newestRecord`, parmas);
+    },
+    // 获取巡更记录及图片
+    getPatrolRecord() {
+        return request.post(`${SCREEN}Patrol/patrolRecord`);
+    },
+    getTaskRecordOne(parmas) {
+        return request.post(`${SCREEN}Daily/taskRecordOne`, parmas);
+    },
+    getMonitor(parmas) {
+        return request.post(`${SCREEN}Index/getMonitor`, parmas);
+    },
+};

src/apps/xxscreen/components/xxmodule.vue

@@ -0,0 +1,138 @@
+<template>
+    <div class="module-main">
+        <div class="module-box">
+            <div class="main-left">
+                <div class="title">项目人员数据分析</div>
+                <dv-active-ring-chart  v-if="userCateFlag"  :config="config" class="data" />
+            </div>
+            <div class="main-right">
+                <div class="title">项目各部门人员分析</div>
+                <dv-active-ring-chart v-if="userDepFlag"  :config="config2" class="data" />
+            </div>
+
+        </div>
+
+    </div>
+</template>
+
+<script>
+import Vue from 'vue';
+import Component from 'vue-class-component';
+import api from '../api';
+
+@Component({
+    props: {
+        data: {
+            type: Object,
+            default: null,
+        },
+    },
+})
+export default class Echarts extends Vue {
+    config = {
+        radius: '60%',
+        activeRadius: '70%',
+        data: [],
+        lineWidth: 10,
+        digitalFlopStyle: {
+            fontSize: 16,
+        },
+        color: ['#0263FF', '#FF7723', '#FFE84B', '#8E30FF', '#E541AC', '#50E1F7'],
+        showOriginValue: true,
+    }
+
+    userCateFlag = false;
+
+    userDepFlag = false;
+
+    config2 ={
+        radius: '60%',
+        activeRadius: '70%',
+        data: [],
+        lineWidth: 10,
+        digitalFlopStyle: {
+            fontSize: 16,
+        },
+        color: ['#0263FF', '#FF7723', '#FFE84B', '#8E30FF', '#E541AC', '#50E1F7'],
+        showOriginValue: true,
+
+    }
+
+    created() {
+        this.getUserCate();
+        this.userDepData();
+        setInterval(() => {
+            this.getUserCate();
+            this.userDepData();
+        }, 5000 * 60);
+    }
+
+    getUserCate() {
+        api.getUserCate().then((res) => {
+            this.userCateFlag = false;
+            this.$nextTick(() => {
+                this.userCateFlag = true;
+                this.config.data = res.data;
+            });
+        }).catch(() => {}).finally(() => {
+            this.userCateFlag = true;
+        });
+    }
+
+    userDepData() {
+        api.userDepData().then((res) => {
+            this.userDepFlag = false;
+            this.$nextTick(() => {
+                this.userDepFlag = true;
+                this.config2.data = res.data;
+            });
+        }).catch(() => {}).finally(() => {
+            this.userDepFlag = true;
+        });
+    }
+}
+</script>
+
+<style scoped lang="scss">
+    .main-left{
+        width: 50%;
+        height: 100%;
+        display: inline-block;
+        float: left;
+    }
+   .main-left .title{
+        width: 100%;
+        height: 40px;
+        line-height: 40px;
+        font-size: 15px;
+        font-family: Source Han Sans CN;
+        font-weight: bold;
+        color: #FFFFFF;
+        text-align: center;
+    }
+    .main-left .data{
+        width: 100%;
+        height: calc(100% - 40px);
+    }
+
+    .main-right{
+        width: 50%;
+        height: 100%;
+        display: inline-block;
+        float: left;
+    }
+   .main-right .title{
+        width: 100%;
+        height: 40px;
+        line-height: 40px;
+        font-size: 15px;
+        font-family: Source Han Sans CN;
+        font-weight: bold;
+        color: #FFFFFF;
+        text-align: center;
+    }
+    .main-right .data{
+        width: 100%;
+        height: calc(100% - 40px);
+    }
+</style>

src/apps/xxscreen/components/xxmodule1.vue

@@ -0,0 +1,194 @@
+<template>
+    <div class="module-main">
+        <div class="module-box">
+            <div class="main-one">
+                <div class="title">员工好评度排名</div>
+                <dv-scroll-board  v-if="userPraiseFlag" :config="config" class="data" />
+            </div>
+            <div class="main-one">
+                <div class="title">耗材使用排名</div>
+                <dv-scroll-board  v-if="flag2" :config="config2" class="data" />
+            </div>
+            <div class="main-there">
+                <div class="module-title">
+                    热点科室排名
+                    <select v-model="type" class="module-select" @change="updateData">
+                        <option value="1">运送</option>
+                        <option value="2">陪护</option>
+                    </select>
+                </div>
+                <dv-scroll-board v-if="flag3" :config="config3" class="data" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import Vue from 'vue';
+import Component from 'vue-class-component';
+import api from '../api';
+
+@Component({
+    props: {
+        data: {
+            type: Object,
+            default: null,
+        },
+    },
+})
+export default class Echarts extends Vue {
+    config = {
+        data: [],
+        rowNum: '4',
+        oddRowBGC: 'rgba(17, 43, 117, 0.5)',
+        evenRowBGC: 'rgba(9, 32, 99, 0.5)',
+    }
+
+    config2 = {
+        data: [
+        ],
+        rowNum: '4',
+        oddRowBGC: 'rgba(17, 43, 117, 0.5)',
+        evenRowBGC: 'rgba(9, 32, 99, 0.5)',
+    }
+
+    config3 = {
+        data: [
+        ],
+        rowNum: '4',
+        oddRowBGC: 'rgba(17, 43, 117, 0.5)',
+        evenRowBGC: 'rgba(9, 32, 99, 0.5)',
+    }
+
+    userPraiseFlag = false;
+
+    flag2 = false;
+
+    flag3 = false;
+
+    timer = null;
+
+    type = 1;
+
+    created() {
+        this.getUserPraise();
+        this.getHotMate();
+        this.getHotDep();
+        setInterval(() => {
+            this.getUserPraise();
+            this.getHotMate();
+            this.getHotDep();
+        }, 5000 * 60);
+    }
+
+    updateData() {
+        if (this.timer) { // 清除定时器
+            clearInterval(this.timer);
+        }
+        this.getHotDep();
+        this.timer = setInterval(() => {
+            this.getHotDep();
+        }, 1000 * 60 * 10);
+    }
+
+    getUserPraise() {
+        api.getUserPraise().then((res) => {
+            this.userPraiseFlag = false;
+            this.$nextTick(() => {
+                this.userPraiseFlag = true;
+                this.config.data = res.data;
+            });
+        }).catch(() => {}).finally(() => {
+            this.userPraiseFlag = true;
+        });
+    }
+
+    getHotMate() {
+        api.getHotMate().then((res) => {
+            this.flag2 = false;
+            this.$nextTick(() => {
+                this.config2.data = res.data;
+                this.flag2 = true;
+            });
+        }).catch(() => {}).finally(() => {
+            this.flag2 = true;
+        });
+    }
+
+    getHotDep() {
+        api.getHotDep({
+            type: this.type,
+        }).then((res) => {
+            this.flag3 = false;
+            this.$nextTick(() => {
+                this.config3.data = res.data;
+                this.flag3 = true;
+            });
+        }).catch(() => {}).finally(() => {
+            this.flag3 = true;
+        });
+    }
+}
+</script>
+
+<style scoped lang="scss">
+    .main-one{
+        width: 32%;
+        height: 100%;
+        display: inline-block;
+        float: left;
+    }
+    .main-one .title{
+        width: calc(100% - 10px);
+        height: 40px;
+        line-height: 40px;
+        font-size: 14px;
+        color: #FFFFFF;
+        padding-left: 10px;
+    }
+    .main-one .data{
+        width: calc(100% - 20px);
+        height: calc(100% - 50px);
+        padding:0px 10px;
+    }
+    .main-there {
+        width: 36%;
+        height: 100%;
+        display: inline-block;
+        float: left;
+    }
+    .main-there .module-title{
+        /* width: calc(100% - 10px);
+        height: 40px;
+        line-height: 40px;
+        font-size: 14px;
+        font-family: Source Han Sans CN;
+        font-weight: bold;
+        color: #FFFFFF;
+        padding-left: 10px;
+        overflow: hidden; */
+        position: relative;
+        height: 40px;
+        line-height: 40px;
+        font-size: 14px;
+    }
+    .main-there .data{
+        width: calc(100% - 20px);
+        height: calc(100% - 50px);
+        padding:0px 10px;
+    }
+
+    .module-select{
+        width: 38px;
+        height: 20px;
+        color: #A6D6FF;
+        background-color: #3D7FFF;
+        outline: none;
+        border: 1px solid #A6D6FF;
+        float: right;
+        vertical-align: middle;
+        margin-top: 10px;
+        margin-right: 5px;
+    }
+
+</style>

src/apps/xxscreen/components/xxmodule2.vue

@@ -0,0 +1,123 @@
+<template>
+    <div class="module-main">
+        <div class="module-box">
+            <div class="main-box">
+                <div class="nums-box">
+                    <div class="nums">{{info.bj}}</div>
+                    <div class="name">保洁工单</div>
+                    <div class="img">
+                        <img src="../images/chengse.png" alt="">
+                    </div>
+                </div>
+                <div class="nums-box">
+                    <div class="nums">{{info.bx}}</div>
+                    <div class="name">报修工单</div>
+                    <div class="img">
+                        <img src="../images/fense.png" alt="">
+                    </div>
+                </div>
+                <div class="nums-box">
+                    <div class="nums">{{info.yh}}</div>
+                    <div class="name">应急工单</div>
+                    <div class="img">
+                        <img src="../images/huangse.png" alt="">
+                    </div>
+                </div>
+                <div class="nums-box">
+                    <div class="nums">{{info.ys}}</div>
+                    <div class="name">运送工单</div>
+                    <div class="img">
+                        <img src="../images/lanse.png" alt="">
+                    </div>
+                </div>
+                <div class="nums-box">
+                    <div class="nums">{{info.ph}}</div>
+                    <div class="name">陪护单</div>
+                    <div class="img">
+                        <img src="../images/lvse.png" alt="">
+                    </div>
+                </div>
+
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import Vue from 'vue';
+import Component from 'vue-class-component';
+import api from '../api';
+
+@Component({
+    props: {
+        data: {
+            type: Object,
+            default: null,
+        },
+    },
+})
+export default class Echarts extends Vue {
+    info = [];
+
+    created() {
+        this.cateTodoCount();
+        setInterval(() => {
+            this.cateTodoCount();
+        }, 5000 * 60);
+    }
+
+    cateTodoCount() {
+        api.cateTodoCount().then((res) => {
+            this.info = res.data;
+        }).catch(() => {}).finally(() => {
+        });
+    }
+}
+</script>
+
+<style scoped lang="scss">
+    .main-box{
+        // width: calc(100% - 40px);
+        // height: calc(100% - 20px);
+        // margin: 10px 20px;
+        width: 100%;
+        height: 100%;
+    }
+    .nums-box{
+        width:calc(113px - 65px);
+        height: 100%;
+        display: inline-block;
+        padding-left: 65px;
+    }
+    .nums-box .nums{
+        width: 100%;
+        height: 20px;
+        line-height: 25px;
+        text-align: center;
+        font-size: 14px;
+        font-family: Source Han Sans CN;
+        font-weight: 400;
+        color: #FFFFFF;
+    }
+    .nums-box .name{
+        width: 100%;
+        height: 20px;
+        line-height: 20px;
+        text-align: center;
+        font-size: 12px;
+        font-family: Source Han Sans CN;
+        font-weight: 400;
+        color: #FFFFFF;
+    }
+    .nums-box .img{
+        // width: 100%;
+        // height: calc(100% - 40px);
+        width: 48px;
+        height: 30px;
+    }
+    .nums-box .img img{
+        width: 100%;
+        height: 100%;
+    }
+
+</style>

src/apps/xxscreen/components/xxmodule3.vue

@@ -0,0 +1,60 @@
+<template>
+    <div class="module-main">
+        <div class="module-box">
+            <div class="main-box">
+                <img v-if="info.img" :src="info.img" alt="">
+                <img v-if="!info.img" src="../images/tu.png" alt="">
+            </div>
+            <div v-if="info" class="org-contact">
+                应急电话：{{info.phone}}({{info.name}})
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import Vue from 'vue';
+import Component from 'vue-class-component';
+import api from '../api';
+
+@Component({
+
+})
+export default class xxModule3 extends Vue {
+    info = null;
+
+    created() {
+        this.getOrgInfo();
+        setInterval(() => {
+            this.getOrgInfo();
+        }, 5000 * 60);
+    }
+
+    getOrgInfo() {
+        api.getOrgInfo().then((res) => {
+            this.info = res.data;
+        }).catch(() => {}).finally(() => {});
+    }
+}
+</script>
+
+<style scoped lang="scss">
+    .main-box{
+        width: 100%;
+        height: 100;
+    }
+    .main-box img{
+        width: 100%;
+        height: 100%;
+    }
+    .org-contact{
+        position: absolute;
+        z-index: 9;
+        width: 500px;
+        height: 45px;
+        left: 20px;
+        bottom: 0px;
+        // color: #35FFDB;
+        font-size: 18px;
+    }
+</style>

src/apps/xxscreen/components/xxmodule4.vue

@@ -0,0 +1,228 @@
+<template>
+    <div class="module-main">
+        <div class="module-box">
+            <div class="header">
+                <span>任务数据统计</span>
+                <select v-model="type" class="module-select" @change="updateData">
+                    <option value="1">日统计</option>
+                    <option value="2">周统计</option>
+                    <option value="3">月统计</option>
+                </select>
+                <select v-model="mode" class="module-select" @change="updateData">
+                    <option value="1">报修</option>
+                    <option value="2">保洁</option>
+                    <option value="3">运送</option>
+                    <option value="4">应急</option>
+                </select>
+            </div>
+            <echarts :data="echartsOption" class="data" />
+        </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({
+    props: {
+        data: {
+            type: Object,
+            default: null,
+        },
+    },
+    components: {
+        echarts,
+    },
+})
+export default class Echarts extends Vue {
+    echartsOption = {
+        color: ['#1CC6DA', '#FBFE25'],
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+                type: 'cross',
+                crossStyle: {
+                    color: '#999',
+                },
+            },
+        },
+        legend: {
+            show: true,
+            data: ['工单数', '订单数'],
+            itemWidth: 20, // 颜色块宽度
+            itemHeight: 5, // 颜色块高度
+            textStyle: {
+                fontSize: 12, // 颜色块后字体大小
+                color: '#fff', // 颜色块后字体颜色
+            },
+            top: '-3px',
+        },
+        grid: {
+            top: '15px',
+            left: '0',
+            right: '0',
+            bottom: '0',
+            containLabel: true,
+        },
+        xAxis: [
+            {
+                type: 'category',
+                data: [],
+                // 设置轴线的属性
+                axisLine: {
+                    lineStyle: {
+                        color: '#FFFFFF',
+                        width: 1, // 这里是为了突出显示加上的
+                    },
+                },
+                // splitLine: {
+                //     show: false, // 去掉网格线
+                // },
+            },
+        ],
+        yAxis: [
+            {
+                type: 'value',
+                name: '数量',
+                // min: 0,
+                // max: 250,
+                // interval: 50,
+                axisLabel: {
+                    formatter: '{value}',
+                },
+                // 设置轴线的属性
+                axisLine: {
+                    show: true,
+                    lineStyle: {
+                        color: '#FFFFFF',
+                        width: 1, // 这里是为了突出显示加上的
+                    },
+                },
+                axisTick: { // y轴刻度线
+                    show: true,
+                },
+                splitLine: { // 网格线
+                    show: false,
+                },
+            },
+        ],
+        series: [
+            {
+                name: '工单数',
+                type: 'bar',
+                barWidth: '10px',
+                data: [],
+            },
+            {
+                name: '订单数',
+                type: 'line',
+                data: [],
+            },
+        ],
+    };
+
+    loading = true;
+
+    mode = 1;
+
+    type = 1;
+
+    timer=null;
+
+    created() {
+        this.updateData();
+        // this.getOrderCount();
+        // setInterval(() => {
+        //     this.getOrderCount();
+        // }, 1000 * 60 * 5);
+    }
+
+    updateData() {
+        if (this.timer) { // 清除定时器
+            clearInterval(this.timer);
+        }
+        this.getOrderCount();
+        this.timer = setInterval(() => {
+            this.getOrderCount();
+        }, 1000 * 60 * 5);
+    }
+
+    getOrderCount() {
+        api.getOrderCount({
+            type: this.type,
+            mode: this.mode,
+        }).then((res) => {
+            this.$nextTick(() => {
+                this.echartsOption.xAxis = [
+                    {
+                        type: 'category',
+                        data: res.data.d,
+                        // 设置轴线的属性
+                        axisLine: {
+                            lineStyle: {
+                                color: '#FFFFFF',
+                                width: 1, // 这里是为了突出显示加上的
+                            },
+                        },
+                        // splitLine: {
+                        //     show: false, // 去掉网格线
+                        // },
+                    },
+                ];
+                this.echartsOption.series = [
+                    {
+                        name: '工单数',
+                        type: 'bar',
+                        barWidth: '5px',
+                        data: res.data.d1,
+                    },
+                    {
+                        name: '订单数',
+                        type: 'line',
+                        data: res.data.d2,
+                    },
+                ];
+            });
+        }).catch(() => {}).finally(() => {});
+    }
+}
+</script>
+
+<style scoped lang="scss">
+
+    .header{
+        width: calc(100% - 20px);
+        height: 50px;
+        line-height: 50px;
+        padding: 0 10px;
+        font-size: 18px;
+    }
+    .header span{
+        font-size: 15px;
+        font-family: Source Han Sans CN;
+        font-weight: bold;
+        color: #FFFFFF;
+    }
+    .data{
+        width: calc(100% - 20px);
+        height: calc(100% - 70px);
+        margin: 0px 10px;
+    }
+
+    .module-select{
+        width: 80px;
+        height: 20px;
+        color: #A6D6FF;
+        background-color: #3D7FFF;
+        outline: none;
+        border: 1px solid #A6D6FF;
+        float: right;
+        vertical-align: middle;
+        margin-top: 10px;
+        margin-right: 5px;
+    }
+</style>

src/apps/xxscreen/components/xxmodule5.vue

@@ -0,0 +1,226 @@
+<template>
+    <div class="module-main">
+        <div class="module-box">
+            <div class="header">
+                巡更任务数据统计
+            </div>
+            <echarts :data="echartsOption"  class="data" />
+        </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({
+    props: {
+        data: {
+            type: Object,
+            default: null,
+        },
+    },
+    components: {
+        echarts,
+    },
+})
+export default class Echarts extends Vue {
+    echartsOption = {
+        color: ['#23A3F4', '#FEC006'],
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+                type: 'cross',
+                crossStyle: {
+                    color: '#999',
+                },
+            },
+        },
+        legend: {
+            show: true,
+            data: ['当天巡更', '30天内异常数据'],
+            itemWidth: 20, // 颜色块宽度
+            itemHeight: 5, // 颜色块高度
+            textStyle: {
+                fontSize: 12, // 颜色块后字体大小
+                color: '#fff', // 颜色块后字体颜色
+            },
+            top: '-2px',
+        },
+        grid: {
+            top: '15px',
+            left: '0',
+            right: '0',
+            bottom: '0',
+            containLabel: true,
+        },
+        xAxis: [
+            {
+                type: 'category',
+                data: [],
+                // 设置轴线的属性
+                axisLine: {
+                    lineStyle: {
+                        color: '#FFFFFF',
+                        width: 1, // 这里是为了突出显示加上的
+                    },
+                },
+                // splitLine: {
+                //     show: false, // 去掉网格线
+                // },
+            },
+        ],
+        yAxis: [
+            {
+                type: 'value',
+                name: '数量',
+                axisLabel: {
+                    formatter: '{value}',
+                },
+                // 设置轴线的属性
+                axisLine: {
+                    show: true,
+                    lineStyle: {
+                        color: '#FFFFFF',
+                        width: 1, // 这里是为了突出显示加上的
+                    },
+                },
+                axisTick: { // y轴刻度线
+                    show: true,
+                },
+                splitLine: { // 网格线
+                    show: true,
+                    lineStyle: {
+                        color: 'rgba(229, 255, 252, 0.33)',
+                        width: 1, // 这里是为了突出显示加上的
+                    },
+                },
+            },
+        ],
+        series: [
+            {
+                name: '当天巡更',
+                type: 'bar',
+                barWidth: '10px',
+                data: [],
+            },
+            {
+                name: '30天内异常数据',
+                type: 'line',
+                areaStyle: {
+                    color: 'rgba(254, 192, 6, 0.18)',
+                },
+                data: [],
+            },
+        ],
+    };
+
+    timer = null;
+
+    info = null;
+
+    titles = [];
+
+    y1 = [];
+
+    y2 = [];
+
+    created() {
+        this.getAddrRecord();
+
+        setInterval(() => {
+            this.getAddrRecord();
+        }, 1000 * 60 * 5);
+    }
+
+    updateData() {
+        if (this.timer) { // 清除定时器
+            clearInterval(this.timer);
+        }
+        if (this.info) {
+            this.titles = this.info.titles;
+            this.y1 = this.info.y1;
+            this.y2 = this.info.y2;
+
+            this.timer = setInterval(() => {
+                this.formatEchart();
+            }, 1000 * 3);
+        }
+    }
+
+    formatEchart() {
+        let ts = this.titles;
+        let y11 = this.y1;
+        let y22 = this.y2;
+        if (this.titles.length > 7) {
+            ts = this.titles.slice(0, 6);
+            y11 = this.y1.slice(0, 6);
+            y22 = this.y2.slice(0, 6);
+            const tt1 = this.titles.shift();
+            this.titles.push(tt1);
+            const yy1 = this.y1.shift();
+            this.y1.push(yy1);
+            const yy2 = this.y2.shift();
+            this.y2.push(yy2);
+        }
+
+        this.$nextTick(() => {
+            this.echartsOption.xAxis = [
+                {
+                    type: 'category',
+                    data: ts,
+                    // 设置轴线的属性
+                    axisLine: {
+                        lineStyle: {
+                            color: '#FFFFFF',
+                            width: 1, // 这里是为了突出显示加上的
+                        },
+                    },
+                    // splitLine: {
+                    //     show: false, // 去掉网格线
+                    // },
+                },
+            ];
+            this.echartsOption.series = [
+                {
+                    name: '工单数',
+                    type: 'bar',
+                    barWidth: '5px',
+                    data: y11,
+                },
+                {
+                    name: '订单数',
+                    type: 'line',
+                    data: y22,
+                },
+            ];
+        });
+    }
+
+    getAddrRecord() {
+        api.getAddrRecord().then((res) => {
+            this.info = res.data;
+            this.updateData();
+        }).catch(() => {}).finally(() => {});
+    }
+}
+</script>
+
+<style scoped lang="scss">
+  .module-box .header{
+        width: calc(100% - 20px);
+        height: 50px;
+        line-height: 50px;
+        padding: 0 10px;
+        font-size: 15px;
+        font-family: Source Han Sans CN;
+        font-weight: bold;
+    }
+    .data{
+        width: calc(100% - 20px);
+        height: calc(100% - 70px);
+        margin: 0px 10px;
+    }
+</style>

src/apps/xxscreen/components/xxmodule6.vue

@@ -0,0 +1,98 @@
+<template>
+    <div class="module-main">
+        <div class="module-box">
+            <div class="header">
+                保洁网格化管理
+            </div>
+            <div class="data">
+                <div class="bj-box">
+                    <div class="bj-one-box">
+                        <div class="title">保洁网格化管理</div>
+                        <div class="nums">11</div>
+                    </div>
+                </div>
+                <div v-for="(item,index) in list" :key="index" class="bj-box">
+                    <div  class="bj-one-box">
+                        <div class="title">{{item.title}}</div>
+                        <div class="nums">{{item.count}}</div>
+                    </div>
+                </div>
+
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import Vue from 'vue';
+import Component from 'vue-class-component';
+import api from '../api';
+
+@Component({
+
+})
+export default class Echarts extends Vue {
+    list = [];
+
+    created() {
+        this.getTaskRecordOne();
+        setInterval(() => {
+            this.getTaskRecordOne();
+        }, 5000 * 60);
+    }
+
+    getTaskRecordOne() {
+        api.getTaskRecordOne().then((res) => {
+            this.list = res.data;
+        }).catch(() => {}).finally(() => {
+        });
+    }
+}
+</script>
+
+<style scoped lang="scss">
+    .module-box .header{
+        width: calc(100% - 20px);
+        height: 40px;
+        line-height: 50px;
+        padding: 0 10px;
+        font-size: 15px;
+        font-family: Source Han Sans CN;
+        font-weight: bold;
+    }
+    .data{
+        width: calc(100% - 20px);
+        height: calc(100% - 60px);
+        margin: 0px 10px;
+        overflow-y: auto;
+    }
+    .bj-box{
+        width: calc(25% - 20px);
+        height: calc(40% - 10px);
+        padding: 0px 10px;
+        display: inline-block;
+        float: left;
+        margin-top: 10px;
+    }
+    .bj-box .bj-one-box{
+        width: 100%;
+        height: 100%;
+        background-color: #092063;
+
+    }
+    .bj-box .bj-one-box .title{
+        width:calc(100% - 10px);
+        height: calc(100% - 35px);
+        overflow: hidden;
+        padding: 10px 5px 0px 5px;
+        text-align: center;
+        font-size: 14px;
+    }
+    .bj-box .bj-one-box .nums{
+        width: 100%;
+        height: 25px;
+        line-height: 25px;
+        text-align: center;
+        font-size: 14px;
+    }
+</style>

src/apps/xxscreen/components/xxmodule7.vue

@@ -0,0 +1,157 @@
+<template>
+    <div class="module-main">
+        <div class="module-box">
+            <div class="main-box">
+                <div class="module-title">
+                    任务数据总览
+                    <select v-model="mode" class="module-select" @change="updateData">
+                        <option value="1">报修</option>
+                        <option value="2">保洁</option>
+                        <option value="3">运送</option>
+                        <option value="4">应急</option>
+                        <option value="5">陪护</option>
+                    </select>
+                </div>
+                <div class="echarts">
+                    <dv-scroll-board v-if="flag" :config="config" style="width:100%;height:100%" />
+                </div>
+            </div>
+        </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({
+    props: {
+        data: {
+            type: Object,
+            default: null,
+        },
+    },
+    components: {
+        echarts,
+    },
+})
+export default class smodule8 extends Vue {
+    mode = 1;
+
+    flag = false;
+
+    config = {
+        header: [],
+        data: [],
+        rowNum: 5,
+        // index: true,
+        // columnWidth: [80],
+        align: ['center', 'center', 'center', 'center', 'center', 'center', 'center', 'center'],
+        headerBGC: 'rgba(17, 43, 117, 2.5)',
+        oddRowBGC: 'rgba(17, 43, 117, 0.5)',
+        evenRowBGC: 'rgba(9, 32, 99, 0.5)',
+    }
+
+    created() {
+        this.updateData();
+    }
+
+    updateData() {
+        if (this.timer) { // 清除定时器
+            clearInterval(this.timer);
+        }
+        this.getTaskList();
+        this.timer = setInterval(() => {
+            this.getTaskList();
+        }, 1000 * 60 * 1);
+    }
+
+    getTaskList() {
+        api.getTaskList({
+            mode: this.mode,
+        }).then((res) => {
+            this.flag = false;
+            this.$nextTick(() => {
+                this.config.header = res.data.header;
+                this.config.data = res.data.data;
+                this.flag = true;
+            });
+        }).catch(() => {}).finally(() => {
+            this.flag = true;
+        });
+    }
+}
+</script>
+<style lang="css">
+    .line1 {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: box;
+        display: -webkit-box;
+        line-clamp: 1;
+        box-orient: vertical;
+        -webkit-line-clamp: 1;
+        -webkit-box-orient: vertical;
+        word-break: break-all;
+    }
+</style>
+<style scoped lang="scss">
+    *{
+        box-sizing:border-box;
+        color: #fff;
+    }
+    .text-right{
+        text-align: right;
+    }
+    .pull-right{
+        float: right !important;
+    }
+    .module-title{
+        position: relative;
+        height: 40px;
+        line-height: 40px;
+        font-size: 15px;
+        font-family: Source Han Sans CN;
+        font-weight: bold;
+    }
+    .module-title::before{
+        content: '';
+        position: absolute;
+        z-index: 1;
+        height: 8px;
+        width: 72px;
+        top: 32px;
+        left: 0;
+        /* background-image: url(../../images/smodule/org-title.png);
+        background-size: 100% 100%; */
+    }
+    .main-box{
+        width: 100%;
+        height: 100%;
+        padding: 10px;
+        position: relative;
+        padding-top: 0;
+    }
+
+    .module-select{
+        width: 80px;
+        height: 20px;
+        color: #A6D6FF;
+        background-color: #3D7FFF;
+        outline: none;
+        border: 1px solid #A6D6FF;
+        float: right;
+        vertical-align: middle;
+        margin-top: 15px;
+        margin-right: 5px;
+    }
+
+    .echarts{
+        width: auto;
+        height: calc(100% - 50px);
+        margin-top: 10px;
+    }
+
+</style>

src/apps/xxscreen/components/xxmodule8.vue

@@ -0,0 +1,195 @@
+<template>
+    <div class="module-main">
+        <div class="module-box">
+            <div class="main-box">
+                <div class="module-title">
+                    可视化轨迹展示
+                </div>
+                <div class="patrol">
+                    <div class="patrol-box">
+                        <div v-for="(item,index) in imgs" :key="index" class="list">
+                            <div class="top-img">
+                                <img :src="item.img" alt="">
+                            </div>
+
+                            <div class="patrol-title line1">
+                                {{item.title}}
+                            </div>
+                        </div>
+                    </div>
+                    <div class="echarts">
+                        <dv-scroll-board v-if="flag" :config="config" style="width:100%;height:100%" />
+                    </div>
+                </div>
+
+            </div>
+        </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({
+    props: {
+        data: {
+            type: Object,
+            default: null,
+        },
+    },
+    components: {
+        echarts,
+    },
+})
+export default class smodule8 extends Vue {
+    imgs = [];
+
+    flag = false;
+
+    config = {
+        header: ['地点', '时间', '人员', '内容'],
+        data: [],
+        rowNum: 4,
+        // index: true,
+        // columnWidth: [80],
+        align: ['center', 'center', 'center', 'center', 'center', 'center', 'center', 'center'],
+        headerBGC: 'rgba(17, 43, 117, 0.5)',
+        oddRowBGC: 'rgba(17, 43, 117, 0.5)',
+        evenRowBGC: 'rgba(9, 32, 99, 0.5)',
+    }
+
+    created() {
+        this.getPatrolRecord();
+
+        setInterval(() => {
+            this.getPatrolRecord();
+        }, 1000 * 60);
+    }
+
+    getPatrolRecord() {
+        api.getPatrolRecord().then((res) => {
+            this.imgs = res.data.imgs;
+            this.flag = false;
+            this.$nextTick(() => {
+                this.flag = true;
+                this.config.data = res.data.lists;
+            });
+        }).catch(() => {}).finally(() => {
+            this.flag = true;
+        });
+    }
+}
+</script>
+<style lang="css">
+    .line1 {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: box;
+        display: -webkit-box;
+        line-clamp: 1;
+        box-orient: vertical;
+        -webkit-line-clamp: 1;
+        -webkit-box-orient: vertical;
+        word-break: break-all;
+    }
+</style>
+<style scoped lang="scss">
+    *{
+        box-sizing:border-box;
+        color: #fff;
+    }
+    .text-right{
+        text-align: right;
+    }
+    .pull-right{
+        float: right !important;
+    }
+    .module-title{
+        position: relative;
+        height: 40px;
+        line-height: 40px;
+        font-size: 15px;
+        font-family: Source Han Sans CN;
+        font-weight: bold;
+    }
+    .module-title::before{
+        content: '';
+        position: absolute;
+        z-index: 1;
+        height: 8px;
+        width: 72px;
+        top: 32px;
+        left: 0;
+        /* background-image: url(../../images/smodule/org-title.png);
+        background-size: 100% 100%; */
+    }
+    .main-box{
+        width: 100%;
+        height: 100%;
+        padding: 10px;
+        position: relative;
+        padding-top: 0;
+    }
+
+    .module-select{
+        width: 80px;
+        height: 20px;
+        color: #A6D6FF;
+        background-color: #061A3B;
+        outline: none;
+        border: 1px solid #A6D6FF;
+        float: right;
+        vertical-align: middle;
+        margin-top: 15px;
+        margin-right: 5px;
+    }
+
+    .echarts{
+        width: auto;
+        height: calc(100% - 75px);
+        margin-top: 10px;
+        overflow: hidden;
+    }
+
+    .patrol{
+        width: auto;
+        height: calc(100% - 40px);
+
+        .patrol-box{
+            height: 65px;
+            overflow: hidden;
+            .list{
+                height: 65px;
+                width: 30%;
+                margin-left: 8px;
+                overflow: hidden;
+                text-align: center;
+                float: left;
+
+                .top-img{
+                    width: 97px;
+                    height: 44px;
+                    overflow: hidden;
+                    img{
+                        width: 100%;
+                        height: 100%;
+                    }
+                }
+
+                .patrol-title{
+                    height: 20px;
+                    line-height: 20px;
+                    font-size: 12px;
+                    background-color: rgba(69, 117, 230, 0.2);
+                }
+            }
+
+        }
+        .patrol-box:first-child{
+            margin-left: 0;
+        }
+    }
+</style>

src/apps/xxscreen/router.js

@@ -0,0 +1,13 @@
+export default {
+    path: '/',
+    redirect: '/xxscreen',
+    // component: () => import(/* webpackChunkName: "main" */ '@/apps/login/views/main.vue'),
+    component: () => import(/* webpackChunkName: "main" */ '@/App.vue'),
+    children: [
+        {
+            name: 'xxscreen',
+            path: 'xxscreen/:orgId',
+            component: () => import(/* webpackChunkName: "therelevel" */ '@/apps/xxscreen/views/xxscreen.vue'),
+        },
+    ],
+};

src/apps/xxscreen/views/xxscreen.js

@@ -0,0 +1,212 @@
+import Vue from 'vue';
+import Component from 'vue-class-component';
+
+import echarts from '@/common/components/echarts.vue';
+import ProgressBar from '@/common/components/progress.vue';
+import openImg from '@/common/components/openImg.vue';
+import openVideo from '@/common/components/openVideo.vue';
+import iframes from '@/common/components/iframe.vue';
+import xxModule from '../components/xxmodule.vue';
+import xxModule1 from '../components/xxmodule1.vue';
+import xxModule2 from '../components/xxmodule2.vue';
+import xxModule3 from '../components/xxmodule3.vue';
+import xxModule4 from '../components/xxmodule4.vue';
+import xxModule5 from '../components/xxmodule5.vue';
+import xxModule6 from '../components/xxmodule6.vue';
+import xxModule7 from '../components/xxmodule7.vue';
+import xxModule8 from '../components/xxmodule8.vue';
+import api from '../api';
+
+@Component({
+    components: {
+        ProgressBar,
+        echarts,
+        openImg,
+        iframes,
+        openVideo,
+        xxModule,
+        xxModule1,
+        xxModule2,
+        xxModule3,
+        xxModule4,
+        xxModule5,
+        xxModule6,
+        xxModule7,
+        xxModule8,
+    },
+    watch: {
+        scaleRadio() {
+            this.changeZoom();
+        },
+    },
+})
+
+export default class BannerIndex extends Vue {
+    week = '';
+
+    day = '';
+
+    time = '';
+
+    yxDay = '';
+
+    scaleRadio = 1;
+
+    monitor = null;
+
+    monitor1 = null;
+
+    monitor2 = null;
+
+    monitor3 = null;
+
+    monitor4 = null;
+
+    monitor5 = null;
+
+    monitor6 = null;
+
+    monitor7 = null;
+
+    monitor8 = null;
+
+    monitor9 = null;
+
+    videoVisible = false;
+
+    videoVisible1 = false;
+
+    videoVisible2 = false;
+
+    videoVisible3 = false;
+
+    videoVisible4 = false;
+
+    videoVisible5 = false;
+
+    videoVisible6 = false;
+
+    videoVisible7 = false;
+
+    videoVisible8 = false;
+
+    videoVisible9 = false;
+
+    mounted() {
+        // 监听窗口大小变化
+        window.onresize = () => (() => {
+            // this.screenWidth = document.body.clientWidth;
+            // this.screenHeight = document.body.clientHeight;
+
+            this.changeZoom();
+        })();
+    }
+
+    created() {
+        this.changeZoom();
+        this.realSysTime();
+        this.getMonitor();
+        setInterval(() => {
+            this.realSysTime();
+        }, 1000);
+    }
+
+    realSysTime() {
+        const now = new Date();
+        const year = now.getFullYear(); // 获取年份
+        let month = now.getMonth(); // 获取月份
+        let date = now.getDate(); // 获取日期
+        const day = now.getDay(); // 获取星期
+        let hour = now.getHours(); // 获取小时
+        let minute = now.getMinutes(); // 获取分钟
+        let seconds = now.getSeconds(); // 获取秒
+        month += 1;
+        const arrWeek = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
+        this.week = arrWeek[day];
+        if (month < 10) {
+            month = `0${month}`;
+        }
+        if (date < 10) {
+            date = `0${date}`;
+        }
+        if (hour < 10) {
+            hour = `0${hour}`;
+        }
+        if (minute < 10) {
+            minute = `0${minute}`;
+        }
+        if (seconds < 10) {
+            seconds = `0${seconds}`;
+        }
+        this.day = `${year}年${month}月${date}日`;
+        this.time = `${hour}:${minute}:${seconds}`;
+
+        const dateTime = '2022-02-21'; // 系统运行开始日期
+        const curDateTime = `${year}-${month}-${date}`;
+
+        const curDay = (new Date(curDateTime).getTime() - new Date(dateTime).getTime()) / 86400 / 1000;
+        this.yxDay = curDay.toFixed(0);
+    }
+
+    getMonitor() {
+        api.getMonitor().then((res) => {
+            this.monitor = res.data.info;
+            this.monitor1 = res.data.info1;
+            this.monitor2 = res.data.info2;
+            this.monitor3 = res.data.info3;
+            this.monitor4 = res.data.info4;
+            this.monitor5 = res.data.info5;
+            this.monitor6 = res.data.info6;
+            this.monitor7 = res.data.info7;
+            this.monitor8 = res.data.info8;
+            this.monitor9 = res.data.info9;
+        }).catch(() => { }).finally(() => {
+
+        });
+    }
+
+    changeZoom() {
+        const windowWidth = document.documentElement.offsetWidth || document.body.offsetWidth;
+        this.scaleRadio = windowWidth / 1920;
+    }
+
+    clickMonitor() {
+        this.videoVisible = true;
+    }
+
+    clickMonitor1() {
+        this.videoVisible1 = true;
+    }
+
+    clickMonitor2() {
+        this.videoVisible2 = true;
+    }
+
+    clickMonitor3() {
+        this.videoVisible3 = true;
+    }
+
+    clickMonitor4() {
+        this.videoVisible4 = true;
+    }
+
+    clickMonitor5() {
+        this.videoVisible5 = true;
+    }
+
+    clickMonitor6() {
+        this.videoVisible6 = true;
+    }
+
+    clickMonitor7() {
+        this.videoVisible7 = true;
+    }
+
+    clickMonitor8() {
+        this.videoVisible8 = true;
+    }
+
+    clickMonitor9() {
+        this.videoVisible9 = true;
+    }
+}

src/apps/xxscreen/views/xxscreen.scss

@@ -0,0 +1,281 @@
+.zoombox {
+    position: fixed;
+    z-index: 99999;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: 100%;
+    height: 100%;
+    background-color: #14111f;
+}
+
+.page {
+    overflow: hidden;
+    background-image: url(../images/bg.png);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    color: #ffffff;
+    width: 1920px;
+    height: 810px;
+}
+
+.header {
+    width: calc(100% - 50px);
+    height: 75px;
+    position: relative;
+    color: #ffffff;
+    background-image: url(../images/header.png);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    padding: 0 25px;
+    margin-top: 15px;
+}
+
+.header-box {
+    height: 75px;
+    line-height: 75px;
+    font-size: 22px;
+}
+
+.header-box .header-left {
+    width: 505px;
+    height: 75px;
+    line-height: 75px;
+    display: inline-block;
+    text-align: right;
+}
+
+.header-box .header-left span {
+    font-size: 20px;
+    font-family: Source Han Sans CN;
+    font-weight: 400;
+    color: #FFFFFF;
+    margin-left: 20px;
+}
+
+.header-box .title {
+    width: 860px;
+    height: 75px;
+    line-height: 75px;
+    display: inline-block;
+    text-align: center;
+    font-size: 32px;
+    font-family: Source Han Sans CN;
+    font-weight: 800;
+    color: #FFFFFF;
+}
+
+.header-right {
+    width: 505px;
+    height: 75px;
+    line-height: 75px;
+    display: inline-block;
+    font-size: 20px;
+    font-family: Source Han Sans CN;
+    font-weight: 400;
+    color: #FFFFFF;
+}
+
+.main {
+    width: calc(1920px - 50px);
+    height: 690px;
+    margin: 10px 25px 20px 25px;
+}
+
+.main .monitor-video {
+    width: 243px;
+    height: 690px;
+    display: inline-block;
+    background: url(../images/monitor-bg.png);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+}
+
+.main .monitor-left {
+    float: left !important;
+}
+
+.main .monitor-right {
+    // float: right !important;
+}
+
+
+.main .monitor-video .header-box {
+    height: 40px;
+    line-height: 40px;
+    padding-left: 20px;
+    font-size: 15px;
+    font-family: Source Han Sans CN;
+    font-weight: bold;
+    color: #FFFFFF;
+}
+
+.main .monitor-video .content-box {
+    width: calc(100% - 10px);
+    height: 637px;
+    padding: 5px;
+}
+
+.main .monitor-video .content-box .img {
+    width: 100%;
+    height: 125px;
+    margin-bottom: 2px;
+}
+
+.main .monitor-video .content-box .img img {
+    width: 100%;
+    height: 100%;
+}
+
+.main .main-box {
+    display: inline-block;
+    float: left;
+    position: relative;
+}
+
+.main .main-box1 {
+    width: 364px;
+    height: 419px;
+    margin: 0 8px;
+}
+
+.main .main-box1 .one {
+    width: 100%;
+    height: 200px;
+    background-image: url(../images/one.png);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    margin-bottom: 9px;
+    position: relative;
+}
+
+.main .main-box1 .one .main-left {
+    width: 50%;
+    height: 100%;
+    display: inline-block;
+    float: left;
+}
+
+.main .main-box1 .one .main-left .title {
+    width: 100%;
+    height: 40px;
+    line-height: 40px;
+    font-size: 18px;
+    font-family: Source Han Sans CN;
+    font-weight: bold;
+    color: #FFFFFF;
+    text-align: center;
+}
+
+.main .main-box1 .one .main-left .data {
+    width: 100%;
+    height: calc(100% - 40px);
+}
+
+.main .main-box1 .one .main-right {
+    width: 50%;
+    height: 100%;
+    display: inline-block;
+    float: left;
+}
+
+.main .main-box1 .one .main-right .title {
+    width: 100%;
+    height: 40px;
+    line-height: 40px;
+    font-size: 18px;
+    font-family: Source Han Sans CN;
+    font-weight: bold;
+    color: #FFFFFF;
+    text-align: center;
+}
+
+.main .main-box1 .one .main-right .data {
+    width: 100%;
+    height: calc(100% - 40px);
+}
+
+.main .main-box1 .two {
+    width: 100%;
+    height: 203px;
+    background-image: url(../images/one.png);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    position: relative;
+}
+
+.main .main-box2 {
+    width: 624px;
+    height: 419px;
+}
+
+.main .main-box2 .there {
+    width: 100%;
+    height: 74px;
+    background-image: url(../images/there.png);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    margin-bottom: 8px;
+    position: relative;
+}
+
+.main .main-box2 .fore {
+    width: 100%;
+    height: 330px;
+    position: relative;
+    /* background-image: url(../images/screen-tem11/one.png);
+    background-repeat: no-repeat;
+    background-size: 100% 100%; */
+}
+
+.main .main-box3 {
+    width: 364px;
+    height: 419px;
+    margin: 0 8px;
+}
+
+.main .main-box3 .five {
+    width: 100%;
+    height: 201px;
+    background-image: url(../images/one.png);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    margin-bottom: 9px;
+    position: relative;
+}
+
+.main .main-box3 .six {
+    width: 100%;
+    height: 203px;
+    background-image: url(../images/one.png);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    position: relative;
+}
+
+.main-box4 {
+    width: 335px;
+    height: 268px;
+    background-image: url(../images/seven.png);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    margin: 0 8px;
+}
+
+.main-box5 {
+    width: 683px;
+    height: 268px;
+    background-image: url(../images/eight.png);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+}
+
+.main-box6 {
+    width: 334px;
+    height: 268px;
+    background-image: url(../images/nine.png);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    margin: 0 8px;
+}

src/apps/xxscreen/views/xxscreen.vue

@@ -0,0 +1,118 @@
+<template>
+    <div id="zoom" class="zoombox" :style="`zoom:${scaleRadio}`">
+        <div class="page">
+            <div class="header">
+                <div class="header-box">
+                    <div class="header-left">
+                        <span>{{day}}</span>
+                        <span>{{time}}</span>
+                        <span>{{week}}</span>
+                    </div>
+                    <div class="title">新乡市中心医院后勤一站式服务平台</div>
+                    <div class="header-right">
+                        系统已运行{{yxDay}}天
+                    </div>
+                </div>
+
+            </div>
+            <div class="main">
+                <div class="monitor-video monitor-left">
+                    <div class="header-box">
+                        监控数据
+                    </div>
+                    <div class="content-box">
+                        <div v-if="monitor" class="img" @click="clickMonitor()">
+                            <img :src="monitor.img" alt="">
+                        </div>
+                        <div v-if="monitor1" class="img" @click="clickMonitor1()">
+                            <img :src="monitor1.img" alt="">
+                        </div>
+                        <div v-if="monitor2" class="img" @click="clickMonitor2()">
+                            <img :src="monitor2.img" alt="">
+                        </div>
+                        <div v-if="monitor3" class="img" @click="clickMonitor3()">
+                            <img :src="monitor3.img" alt="">
+                        </div>
+                        <div v-if="monitor4" class="img" @click="clickMonitor4()">
+                            <img :src="monitor4.img" alt="">
+                        </div>
+                    </div>
+                </div>
+
+                <div class="main-box main-box1">
+                    <div class="one">
+                        <xxModule />
+                    </div>
+                    <div class="two">
+                        <xxModule1 />
+                    </div>
+                </div>
+                <div class="main-box main-box2">
+                    <div class="there">
+                        <xxModule2 />
+                    </div>
+                    <div class="fore">
+                        <xxModule3 />
+                    </div>
+                </div>
+                <div class="main-box main-box3">
+                    <div class="five">
+                        <xxModule4 />
+                    </div>
+                    <div class="six">
+                        <xxModule5 />
+                    </div>
+                </div>
+                <div class="main-box main-box4">
+                    <xxModule6 />
+                </div>
+                <div class="main-box main-box5">
+                    <xxModule7 />
+                </div>
+                <div class="main-box main-box6">
+                    <xxModule8 />
+                </div>
+
+                <div class="monitor-video monitor-right">
+                    <div class="header-box">
+                        监控数据
+                    </div>
+                    <div class="content-box">
+                        <div v-if="monitor5" class="img" @click="clickMonitor5()">
+                            <img :src="monitor5.img" alt="">
+                        </div>
+                        <div v-if="monitor6" class="img" @click="clickMonitor6()">
+                            <img :src="monitor6.img" alt="">
+                        </div>
+                        <div v-if="monitor7" class="img" @click="clickMonitor7()">
+                            <img :src="monitor7.img" alt="">
+                        </div>
+                        <div v-if="monitor8" class="img" @click="clickMonitor8()">
+                            <img :src="monitor8.img" alt="">
+                        </div>
+                        <div v-if="monitor9" class="img" @click="clickMonitor9()">
+                            <img :src="monitor9.img" alt="">
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <iframes v-if="videoVisible" :visible="videoVisible" :url="monitor.url" @closeClick="()=>{videoVisible=false}" />
+            <iframes v-if="videoVisible1" :visible="videoVisible1" :url="monitor1.url" @closeClick="()=>{videoVisible1=false}" />
+            <iframes v-if="videoVisible2" :visible="videoVisible2" :url="monitor2.url" @closeClick="()=>{videoVisible2=false}" />
+            <iframes v-if="videoVisible3" :visible="videoVisible3" :url="monitor3.url" @closeClick="()=>{videoVisible3=false}" />
+            <iframes v-if="videoVisible4" :visible="videoVisible4" :url="monitor4.url" @closeClick="()=>{videoVisible4=false}" />
+            <iframes v-if="videoVisible5" :visible="videoVisible5" :url="monitor5.url" @closeClick="()=>{videoVisible5=false}" />
+            <iframes v-if="videoVisible6" :visible="videoVisible6" :url="monitor6.url" @closeClick="()=>{videoVisible6=false}" />
+            <iframes v-if="videoVisible7" :visible="videoVisible7" :url="monitor7.url" @closeClick="()=>{videoVisible7=false}" />
+            <iframes v-if="videoVisible8" :visible="videoVisible8" :url="monitor8.url" @closeClick="()=>{videoVisible8=false}" />
+            <iframes v-if="videoVisible9" :visible="videoVisible9" :url="monitor9.url" @closeClick="()=>{videoVisible9=false}" />
+
+        </div>
+
+    </div>
+</template>
+
+<script src="./xxscreen.js" />
+
+<style lang="scss" scoped src="./xxscreen.scss" />

src/router.js

@@ -3,6 +3,7 @@ import Router from 'vue-router';
 import homeRouter from '@/apps/home/router';
 import onelevelRouter from '@/apps/onelevel/router';
 import threelevelRouter from '@/apps/threelevel/router';
+import xxscreenRouter from '@/apps/xxscreen/router';
 
 Vue.use(Router);
 
@@ -18,6 +19,7 @@ export default new Router({
         homeRouter,
         onelevelRouter,
         threelevelRouter,
+        xxscreenRouter,
         { path: '*', redirect: '/home' },
     ],
 });