巡更大屏

src/apps/home/api.js

@@ -308,6 +308,14 @@ export default {
     getPatrolImg2(parmas) {
         return request.post(`${SCREEN}Patrol/patrolImg2`, parmas);
     },
+    //巡更现场照片
+    getPatrolImg3(parmas) {
+        return request.post(`${SCREEN}Patrol/patrolImg3`, parmas);
+    },
+    //巡更记录路线
+    getPatrolRoutes(parmas) {
+        return request.post(`${SCREEN}Patrol/patrolRoutes`, parmas);
+    },
     getZgImg(parmas) {
         return request.post(`${SCREEN}Patrol/zgImg`, parmas);
     },

src/apps/home/components/Scroll.vue

@@ -0,0 +1,71 @@
+<template>
+    <div :style="{ width: width + 'px', height: height + 'px' }" class="container">
+        <slot/>
+    </div>
+</template>
+<script>
+export default {
+    props: {
+        width: {
+            type: Number,
+            required: true
+        },
+        height: {
+            type: Number,
+            required: true
+        },
+        duration: {
+            type: Number,
+            required: true
+        },
+        span:{
+            type: Number,
+            required: true
+        }
+    },
+    data() {
+        return {
+            timer: null,
+            el: null,
+            x: 0,
+            y: 0,
+            scrollHeight: 0
+        }
+    },
+    mounted() {
+        this.el = document.querySelector(".container")
+        if (!this.el) return;
+        this.scrollHeight = this.el.scrollHeight + 17
+        this.timer = setInterval(() => {
+            this.updatePos()
+            // console.log(this.x, this.y);
+            this.el.scrollTo(this.x, this.y)
+        }, this.duration)
+    },
+    beforeDestroy() {
+        clearInterval(this.timer)
+    },
+    methods: {
+        updatePos() {
+            this.y += this.span
+            if(this.y > this.scrollHeight)
+            this.y = 0
+
+        }
+    }
+}
+</script>
+<style lang="scss" scoped>
+/* 隐藏垂直滚动条 */
+.container::-webkit-scrollbar {
+width: 0;
+}
+/* 隐藏水平滚动条 */
+.container::-webkit-scrollbar {
+height: 0;
+}
+.container {
+    overflow-y: auto;
+    scroll-behavior: smooth;
+}
+</style>

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

@@ -108,6 +108,8 @@
                 <smodule98 v-if="item.name === 'mode98'" :data="data" />
                 <smodule99 v-if="item.name === 'mode99'" :data="data" />
                 <smodule100 v-if="item.name === 'mode100'" :data="data" />
+                <smodule101 v-if="item.name === 'mode101'" :data="data" />
+                <smodule102 v-if="item.name === 'mode102'" :data="data" />
 
 
             </div>
@@ -220,6 +222,8 @@ 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';
+import Smodule101 from '@/apps/home/components/smodule/smodule101.vue';
+import Smodule102 from '@/apps/home/components/smodule/smodule102.vue';
 
 
 @Component({
@@ -335,6 +339,8 @@ import Smodule100 from '@/apps/home/components/smodule/smodule100.vue';
         Smodule98,
         Smodule99,
         Smodule100,
+        Smodule101,
+        Smodule102,
     },
 })
 export default class Echarts extends Vue {

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

@@ -0,0 +1,307 @@
+<template>
+    <div class="module-main">
+        <div class="module-box">
+            <div class="module-one">
+                <!-- <div class="module-two flex wrap"> -->
+                    <Scroll  :height="560" :span="573" :duration="15000" class="module-two flex wrap">
+                    <div class="flex gap" v-for="(item, index) in data" :key="index">
+                        <div class="text-wrapper_1 flex-col" :class="index == data.length - 1 ? 'org' : ''">
+                            <span class="text6">{{ item.title }}</span>
+                            <span class="text7">巡更人员：{{ item.name }}</span>
+                            <span class="text8">上次时间：{{ item.time }}</span>
+                            <span class="text8"> 检查次数：{{ item.count }}</span>
+                        </div>
+                    </div>
+                </Scroll>
+                <!-- </div> -->
+            </div>
+        </div>
+    </div>
+
+</template>
+
+<script>
+import Vue from 'vue';
+import Component from 'vue-class-component';
+import api from '../../api';
+import Scroll from '../Scroll.vue';
+
+@Component({
+    components:{
+        Scroll
+    },
+    props: {
+        data: {
+            type: Object,
+            default: null,
+        },
+    },
+})
+export default class Echarts extends Vue {
+
+    data = []
+    lists = [
+        {
+            title: "住院楼2楼左侧电梯",
+            time: "12:21",
+            name: "李媛媛",
+            count: "2",
+
+        },
+        {
+            title: "住院楼3楼左侧电梯",
+            time: "12:22",
+            name: "李媛媛",
+            count: "3",
+        },
+        {
+            title: "住院楼4楼左侧电梯",
+            time: "12:23",
+            name: "李媛媛",
+            count: "5",
+        },
+        {
+            title: "住院楼5楼左侧电梯",
+            time: "12:24",
+            name: "李媛媛",
+            count: "6",
+        },
+        {
+            title: "住院楼6楼左侧电梯",
+            time: "12:25",
+            name: "李媛媛",
+            count: "8",
+        },
+        {
+            title: "住院楼2楼左侧电梯",
+            time: "12:26",
+            name: "李媛媛",
+            count: "2",
+        },
+        {
+            title: "住院楼3楼左侧电梯",
+            time: "12:27",
+            name: "李媛媛",
+            count: "3",
+        },
+        {
+            title: "住院楼4楼左侧电梯",
+            time: "12:28",
+            name: "李媛媛",
+            count: "5",
+
+        },
+        {
+            title: "住院楼5楼左侧电梯",
+            time: "12:29",
+            name: "李媛媛",
+            count: "6",
+
+        },
+        {
+            title: "住院楼6楼左侧电梯",
+            time: "12:21",
+            name: "李媛媛",
+            count: "8",
+        },
+        {
+            title: "住院楼2楼左侧电梯",
+            time: "12:30",
+            name: "李媛媛",
+            count: "2",
+        },
+        {
+            title: "住院楼3楼左侧电梯",
+            time: "12:31",
+            name: "李媛媛",
+            count: "3",
+        },
+        {
+            title: "住院楼4楼左侧电梯",
+            time: "12:32",
+            name: "李媛媛",
+            count: "5",
+
+        },
+        {
+            title: "住院楼5楼左侧电梯",
+            time: "12:33",
+            name: "李媛媛",
+            count: "6",
+        },
+        {
+            title: "住院楼6楼左侧电梯",
+            time: "12:34",
+            name: "李媛媛",
+            count: "8",
+        },
+        {
+            title: "住院楼6楼左侧电梯",
+            time: "12:35",
+            name: "李媛媛",
+            count: "8",
+        },
+        {
+            title: "住院楼6楼左侧电梯",
+            time: "12:36",
+            name: "李媛媛",
+            count: "8",
+        },
+        {
+            title: "住院楼6楼左侧电梯",
+            time: "12:37",
+            name: "李媛媛",
+            count: "7",
+        },
+
+    ]
+    created() {
+        this.getPatrolRoutes();
+        setInterval(() => {
+            this.getPatrolRoutes();
+        }, 10000 * 360);
+    }
+    getPatrolRoutes() {
+        api.getPatrolRoutes().then((res) => {
+            this.data = res.data;
+        }).catch(() => { }).finally(() => {
+        });
+    }
+
+
+}
+</script>
+<style scoped lang="scss">
+.module-one {
+    width: 96.6%;
+    height: 92.1%;
+    background-image: url(../../images/smodule/blue-boder.png);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    margin: 2.1% 1.6% 3.1% 1.6%;
+    padding-top: 2.7%;
+}
+
+.module-one .module-two {
+    margin: 5% 5%;
+    height: 560px;
+    overflow: hidden;
+}
+
+.module-one .module-two .text-wrapper_1 {
+    background-color: rgba(67, 98, 255, 0.3);
+    border-radius: 4px;
+    width: 170px;
+    height: 118px;
+    border: 1px solid rgba(95, 135, 255, 1);
+}
+
+.module-one .module-two .text-wrapper_1 .text6 {
+    width: 136px;
+    height: 16px;
+    overflow-wrap: break-word;
+    color: rgba(255, 255, 255, 1);
+    font-size: 16px;
+    font-family: SourceHanSansCN-Regular;
+    text-align: left;
+    white-space: nowrap;
+    line-height: 17px;
+    margin: 12px 0 0 10px;
+}
+
+.module-one .module-two .text-wrapper_1 .text7 {
+    width: 120px;
+    height: 16px;
+    overflow-wrap: break-word;
+    color: rgba(255, 255, 255, 1);
+    font-size: 16px;
+    font-family: SourceHanSansCN-Regular;
+    text-align: left;
+    white-space: nowrap;
+    line-height: 17px;
+    margin: 20px 0 0 10px;
+}
+
+.module-one .module-two .text-wrapper_1 .text8 {
+    width: 128px;
+    height: 16px;
+    overflow-wrap: break-word;
+    color: rgba(255, 255, 255, 1);
+    font-size: 16px;
+    font-family: SourceHanSansCN-Regular;
+    white-space: nowrap;
+    line-height: 17px;
+    margin: 5px 0 0 9px;
+}
+// 
+// common.css
+.flex {
+    display: flex;
+}
+
+.wrap {
+    flex-wrap: wrap;
+}
+
+.gap {
+    margin-bottom: 24px;
+}
+
+.text-wrapper_1 {
+    margin-left: 7px;
+    margin-right: 30px
+}
+
+.org {
+    background: orange !important;
+}
+
+.flex-col {
+  display: flex;
+  flex-direction: column;
+}
+.flex-row {
+  display: flex;
+  flex-direction: row;
+}
+.justify-start {
+    display: flex;
+    justify-content: flex-start;
+  }
+.justify-center {
+    display: flex;
+    justify-content: center;
+}
+  
+.justify-end {
+    display: flex;
+    justify-content: flex-end;
+}
+.justify-evenly {
+    display: flex;
+    justify-content: space-evenly;
+}
+.justify-around {
+    display: flex;
+    justify-content: space-around;
+}
+.justify-between {
+    display: flex;
+    justify-content: space-between;
+}
+.align-start {
+    display: flex;
+    align-items: flex-start;
+}
+.align-center {
+    display: flex;
+    align-items: center;
+}
+.align-end {
+    display: flex;
+    align-items: flex-end;
+}
+body::-webkit-scrollbar {
+  width: 0;
+  }
+</style>

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

@@ -0,0 +1,135 @@
+<template>
+    <div class="module-main">
+        <div class="module-box">
+            <div class="main-top-box">
+                <div class="module-public module-bottom-box">
+                    <div class="header">巡更现场照片</div>
+                    <div class="bottom-content-box">
+                        <div v-for="(item,index) in imgs.slice(0, Math.ceil(imgs.length / 2))" :key="index" class="imgbox">
+                            <img :src="item.images" alt="" @click="img(item.images)">
+                            <div class="name">{{item.addr}}</div>
+                        </div>
+                    </div>
+                    <div class="bottom-content-box">
+                        <div v-for="(item2,index2) in imgs.slice(Math.ceil(imgs.length / 2))" :key="index2" class="imgbox">
+                            <img :src="item2.images" alt="" @click="img(item2.images)">
+                            <div class="name">{{item2.addr}}</div>
+                        </div>
+                    </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 {
+    imgs = []
+
+    created() {
+        this.getPatrolImg3();
+
+        setInterval(() => {
+            this.getPatrolImg3();
+        }, 15000);
+    }   
+
+    getPatrolImg3() {
+        api.getPatrolImg3().then((res) => {
+            this.imgs = res.data;
+        }).catch(() => {}).finally(() => {
+        });
+    }
+
+    img(val) {
+        this.$alert(`<div style="width:100%;height:80%"><img src="${val}" style="width:100%;height:80%"></div>`, '图片详情', {
+            dangerouslyUseHTMLString: true,
+            closeOnClickModal: true,
+            showConfirmButton: false,
+        });
+    }
+}
+</script>
+
+<style scoped lang="scss">
+    .module-box{
+        width: 100%;
+        height: 100%;
+        background-image: url(../../images/screen-tem13/bg4.png);
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+    }
+    .main-top-box{
+        width: 100%;
+        height: 50%;
+    }
+    .module-box .header{
+        width: 97%;
+        height: 35px;
+        line-height: 35px;
+        font-weight: bold;
+        font-size: 15px;
+        color: #0BE2DF;
+        padding-left: 10px;
+
+        .pull-right{
+            float: right;
+            font-size: 12px;
+            color: #fff;
+            font-weight: 400;
+            .font-color{
+                color: #0BE2DF;
+            }
+            .font-color1{
+                color: #FF0000;
+            }
+        }
+
+    }
+    .module-bottom-box{
+        width: 100%;
+        height: 100%;
+        // margin-top: 2.38%;
+        position: relative;
+    }
+    .module-bottom-box .bottom-content-box{
+        width: 100%;
+        height: calc(100% - 35px);
+        overflow: hidden;
+        margin-top: 15px;
+    }
+   .main-top-box .bottom-content-box .imgbox{
+        width: 16%;
+        height: 100%;
+        margin-left: 0.6%;
+        display: inline-block;
+        float: left;
+        img{
+            width: 100%;
+            height: calc(100% - 30px);
+            border-radius: 10px;
+        }
+        .name{
+            width: 100%;
+            height: 30px;
+            line-height: 30px;
+            text-align: center;
+            font-size: 13px;
+        }
+    }   
+
+</style>