新巡更大屏，需求

src/apps/home/api.js

@@ -308,11 +308,27 @@ export default {
     getPatrolImg2(parmas) {
         return request.post(`${SCREEN}Patrol/patrolImg2`, parmas);
     },
-    //巡更现场照片
+    // 巡更现场照片
     getPatrolImg3(parmas) {
         return request.post(`${SCREEN}Patrol/patrolImg3`, parmas);
     },
-    //巡更记录路线
+    // 新巡更数据
+    getNewData(parmas) {
+        return request.post(`${SCREEN}Patrol/newData`, parmas);
+    },
+    // 新巡消防设施检查总览
+    getPatrolDevice(parmas) {
+        return request.post(`${SCREEN}Patrol/patrolDevice`, parmas);
+    },
+    // 新巡更消防现场照片
+    getPatrolImg4(parmas) {
+        return request.post(`${SCREEN}Patrol/patrolImg4`, parmas);
+    },
+    // 新巡更每日消防检查数据
+    getPatrolDeviceData(parmas) {
+        return request.post(`${SCREEN}Patrol/patrolDeviceData`, parmas);
+    },
+    // 巡更记录路线
     getPatrolRoutes(parmas) {
         return request.post(`${SCREEN}Patrol/patrolRoutes`, parmas);
     },

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

@@ -110,7 +110,10 @@
                 <smodule100 v-if="item.name === 'mode100'" :data="data" />
                 <smodule101 v-if="item.name === 'mode101'" :data="data" />
                 <smodule102 v-if="item.name === 'mode102'" :data="data" />
-
+                <smodule103 v-if="item.name === 'mode103'" :data="data" />
+                <smodule104 v-if="item.name === 'mode104'" :data="data" />
+                <smodule105 v-if="item.name === 'mode105'" :data="data" />
+                <smodule106 v-if="item.name === 'mode106'" :data="data" />
 
             </div>
         </template>
@@ -224,7 +227,10 @@ 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';
-
+import Smodule103 from '@/apps/home/components/smodule/smodule103.vue';
+import Smodule104 from '@/apps/home/components/smodule/smodule104.vue';
+import Smodule105 from '@/apps/home/components/smodule/smodule105.vue';
+import Smodule106 from '@/apps/home/components/smodule/smodule106.vue';
 
 @Component({
     props: {
@@ -341,6 +347,10 @@ import Smodule102 from '@/apps/home/components/smodule/smodule102.vue';
         Smodule100,
         Smodule101,
         Smodule102,
+        Smodule103,
+        Smodule104,
+        Smodule105,
+        Smodule106,
     },
 })
 export default class Echarts extends Vue {

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

@@ -0,0 +1,244 @@
+<template>
+    <div class="module-main">
+        <div class="module-box">
+            <!-- <div class="main-box"> -->
+            <div class="block2 flex-col">
+                <div class="text-wrapper1 flex-row justify-between">
+                    <span class="text5">{{ info.count1 }}</span>
+                    <span class="text6">{{ info.count2 }}</span>
+                </div>
+                <div class="text-wrapper2 flex-row justify-between">
+                    <span class="text7">点位总数</span>
+                    <span class="text8">计划点位数</span>
+                </div>
+                <div class="box1 flex-row">
+                    <span class="text9" style="margin-left: 1.5vw;">{{ info.count3 }}</span>
+                    <span class="text9" style="font-size: 15px;margin-top: 4.3vw;margin-left: -17vw;">总人数</span>
+                </div>
+                <div class="box2  justify-between">
+                    <div class="text-group2  justify-between">
+                        <span class="text11">{{ info.count4 }}</span>
+                        <span class="text12">当班人数</span>
+                    </div>
+                    <div class=" justify-between">
+                        <span class="text13">{{ info.count5 }}<a v-if=" info.count5 > 0 " style="font-size: 30px;">%</a></span>
+                        <span class="text14">今日巡更完成率</span>
+                    </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 {
+    info = {}
+
+    created() {
+        this.getNewData();
+
+        setInterval(() => {
+            this.getNewData();
+        }, 1000 * 60 * 15);
+    }
+
+    getNewData() {
+        api.getNewData().then((res) => {
+            this.info = res.data;
+        }).catch(() => {}).finally(() => {
+
+        });
+    }
+}
+</script>
+
+<style scoped lang="scss">
+.flex-col {
+    display: flex;
+    flex-direction: column;
+}
+
+.flex-row {
+    display: flex;
+    flex-direction: row;
+}
+
+.justify-between {
+    display: flex;
+    justify-content: space-between;
+}
+
+.block2 {
+    background-image: url(../../images/smodule/smodule103.png);
+    background-repeat: no-repeat;
+    background-size: 100% 80%;
+    height: 77vh;
+
+    .text-wrapper1 {
+        width: 18.8vw;
+        height: 11vh;
+        margin: 4vh 0 0 2.2vw;
+
+        .text5 {
+            width: 13.9vw;
+            height: 11vh;
+            overflow-wrap: break-word;
+            color: rgba(255, 255, 255, 1);
+            font-size: 3.7vw;
+            font-family: AlibabaPuHuiTi-Bold;
+            font-weight: 700;
+            text-align: left;
+            white-space: nowrap;
+            line-height: 11vh;
+        }
+
+        .text6 {
+            width: 13.9vw;
+            height: 11vh;
+            overflow-wrap: break-word;
+            color: rgba(255, 255, 255, 1);
+            font-size: 3.7vw;
+            font-family: AlibabaPuHuiTi-Bold;
+            font-weight: 700;
+            text-align: right;
+            margin-left: 15.8vw;
+            white-space: nowrap;
+            line-height: 11vh;
+        }
+    }
+
+    .text-wrapper2 {
+        width: 26.5vw;
+        height: 5vh;
+
+        // margin: 0 0 0 2.9vw;
+        .text7 {
+            width: 9.3vw;
+            height: 5vh;
+            overflow-wrap: break-word;
+            color: rgba(11, 226, 223, 1);
+            font-size: 18px;
+            font-family: AlibabaPuHuiTi-Regular;
+            font-weight: NaN;
+            text-align: left;
+            margin-left: 2.5vw;
+            margin-top: -5.5vh;
+            white-space: nowrap;
+            line-height: 11vh;
+        }
+
+        .text8 {
+            width: 9.3vw;
+            height: 5vh;
+            overflow-wrap: break-word;
+            color: rgba(11, 226, 223, 1);
+            font-size: 18px;
+            font-family: AlibabaPuHuiTi-Regular;
+            font-weight: NaN;
+            text-align: left;
+            margin-left: 18.4vw;
+            margin-top: -6vh;
+            white-space: nowrap;
+            line-height: 11vh;
+        }
+    }
+
+    .box1 {
+        width: 23.1vw;
+        height: 27vh;
+        margin: 0 0 0 11.6vw;
+        .text9 {
+            width: 23.1vw;
+            height: 16vh;
+            overflow-wrap: break-word;
+            color: rgba(11, 226, 223, 1);
+            font-size: 100px;
+            font-family: AlibabaPuHuiTi-Heavy;
+            font-weight: 900;
+            text-align: left;
+            white-space: nowrap;
+            line-height: 20vh;
+        }
+
+    }
+
+    .box2 {
+        // width: 71.5vw;
+        height: 11.5vw;
+        margin: 5vh 0 0 2vw;
+        .text-group2{
+            .text11 {
+                width: 13.9vw;
+                height: 11vh;
+                overflow-wrap: break-word;
+                color: rgba(255, 255, 255, 1);
+                font-size: 3.7vw;
+                font-family: AlibabaPuHuiTi-Bold;
+                font-weight: 700;
+                text-align: left;
+                margin-top: -2.5vw;
+                white-space: nowrap;
+                line-height: 49px;
+            }
+
+            .text12 {
+                width: 69px;
+                height: 17px;
+                overflow-wrap: break-word;
+                color: rgba(11, 226, 223, 1);
+                font-size: 18px;
+                font-family: AlibabaPuHuiTi-Regular;
+                font-weight: NaN;
+                text-align: left;
+                white-space: nowrap;
+                line-height: 48px;
+                margin-left: -13.5vw;
+                margin-top: 1vh;
+            }
+        }
+        .text13 {
+            width: 104px;
+            height: 47px;
+            overflow-wrap: break-word;
+            color: rgba(255, 255, 255, 1);
+            font-size: 3.7vw;
+            font-family: AlibabaPuHuiTi-Bold;
+            font-weight: 700;
+            text-align: left;
+            white-space: nowrap;
+            margin-top: -4vh;
+            margin-left: -9vw;
+            line-height: 5vh;
+        }
+        .text14 {
+            position: absolute;
+            width: 123px;
+            height: 17px;
+            overflow-wrap: break-word;
+            color: rgba(11, 226, 223, 1);
+            font-size: 18px;
+            font-family: AlibabaPuHuiTi-Regular;
+            font-weight: NaN;
+            text-align: left;
+            white-space: nowrap;
+            line-height: 6vh;
+            margin-left: -9vw;
+            margin-top: 1vh;
+        }
+    }
+}
+</style>

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

@@ -0,0 +1,137 @@
+<template>
+    <div class="module-main">
+        <div class="module-box">
+            <div class="header">
+                消防设施检查总览
+            </div>
+            <dv-scroll-board :config="config" style="width:95%;height:50%;overflow: hidden;margin-left: 12px;" />
+            <div class="header">消防现场照片</div>
+            <div class="module-public module-bottom-box">
+                <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.deviceDetails}}</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.deviceDetails}}</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 = []
+
+    config = {
+
+    }
+
+    created() {
+        this.getPatrolDevice();
+        this.getPatrolImg4();
+        setInterval(() => {
+            this.getPatrolImg4();
+        }, 10000 * 6);
+        setInterval(() => {
+            this.getPatrolDevice();
+        }, 5000 * 60);
+    }
+
+    getPatrolImg4() {
+        api.getPatrolImg4().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,
+        });
+    }
+
+    getPatrolDevice() {
+        api.getPatrolDevice().then((res) => {
+            this.config = {
+                header: ['编号', '设备名称', '检查内容', '维护人员'],
+                data: res.data,
+                align: 'left',
+                oddRowBGC: '#1D519C',
+                evenRowBGC: '#2E73D1',
+                rowNum: 6,
+            };
+        }).catch(() => { }).finally(() => {
+        });
+    }
+}
+</script>
+
+<style scoped lang="scss">
+.module-box .header {
+    width: 100%;
+    height: 5%;
+    margin-top: 0.5vw;
+    overflow-wrap: break-word;
+    color: rgba(11, 226, 223, 1);
+    font-size: 18px;
+    font-family: SourceHanSansCN-Bold;
+    font-weight: 700;
+    text-align: left;
+    white-space: nowrap;
+    line-height: 18px;
+    display: flex;
+    align-items: center;
+    padding-left: 15px;
+}
+.module-bottom-box{
+        width: 97%;
+        height: 37%;
+        position: relative;
+    }
+.module-bottom-box .bottom-content-box{
+        margin-left: 0.7vw;
+        margin-top: 0.2vw;
+        height: 6.2vw;
+        overflow: hidden;
+    }
+.module-bottom-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>

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

@@ -0,0 +1,138 @@
+<template>
+    <div class="module-main">
+        <div class="module-box">
+            <div class="header">
+                巡更计划总览
+            </div>
+            <dv-scroll-board :config="config" style="width:95%;height:50%;overflow: hidden;margin-left: 12px;" />
+            <div class="header">巡更现场照片</div>
+            <div class="module-public module-bottom-box">
+                <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>
+
+</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 = []
+
+    config = {
+
+    }
+
+    created() {
+        this.getPatrolNormalAddr();
+        this.getPatrolImg3();
+        setInterval(() => {
+            this.getPatrolImg3();
+        }, 10000 * 6);
+        setInterval(() => {
+            this.getPatrolNormalAddr();
+        }, 5000 * 60);
+    }
+
+    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,
+        });
+    }
+
+    getPatrolNormalAddr() {
+        api.getPatrolNormalAddr({ mode: 1 }).then((res) => {
+            this.config = {
+                header: ['地点', '人员', '时间', '是否异常', '问题描述'],
+                data: res.data,
+                align: 'content',
+                oddRowBGC: '#1D519C',
+                evenRowBGC: '#2E73D1',
+                rowNum: 6,
+            };
+        }).catch(() => { }).finally(() => {
+        });
+    }
+}
+</script>
+
+<style scoped lang="scss">
+.module-box .header {
+    width: 100%;
+    height: 5%;
+    margin-top: 0.5vw;
+    overflow-wrap: break-word;
+    color: rgba(11, 226, 223, 1);
+    font-size: 18px;
+    font-family: SourceHanSansCN-Bold;
+    font-weight: 700;
+    text-align: left;
+    white-space: nowrap;
+    line-height: 18px;
+    display: flex;
+    align-items: center;
+    padding-left: 15px;
+}
+.module-bottom-box{
+        width: 97%;
+        height: 37%;
+        // margin-top: 2.38%;
+        position: relative;
+    }
+.module-bottom-box .bottom-content-box{
+        margin-left: 0.7vw;
+        margin-top: 0.2vw;
+        height: 6.2vw;
+        overflow: hidden;
+    }
+.module-bottom-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>

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

@@ -0,0 +1,165 @@
+<template>
+    <div class="module-main">
+        <div class="module-box">
+            <div class="header">
+                <span class="title">每日消防检查数据</span>
+            </div>
+            <echarts v-if="!loading" id="echarts" :data="echartdata" class="echarts" @onload="test" />
+        </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';
+// import { charts } from '@jiaminghi/data-view';
+
+@Component({
+    components: {
+        Echarts,
+    },
+    props: {
+        data: {
+            type: Object,
+            default: null,
+        },
+    },
+})
+export default class Smodule106 extends Vue {
+    loading = true;
+
+    echartdata = {
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+                type: 'cross',
+                crossStyle: {
+                    color: '#999',
+                },
+            },
+        },
+        color: ['rgba(11, 226, 223, 1)'],
+        legend: {
+            data: ['任务总数'],
+            textStyle: {
+                color: '#88B1D0',
+                fontSize: 10,
+            },
+        },
+        xAxis: [
+            {
+                type: 'category',
+                data: [],
+                rotate: 45,
+                axisLabel: {
+                    interval: 1,
+                    textStyle: {
+                        color: '#ccc',
+                    },
+                },
+                splitLine: {
+                    show: false, // 去掉网格线
+                },
+                splitArea: {
+                    show: false,
+                },
+            },
+        ],
+
+        yAxis: [
+            {
+                type: 'value',
+                interval: 60,
+                axisLabel: {
+                    textStyle: {
+                        color: '#ccc',
+                    },
+                },
+                splitLine: {
+                    show: false, // 去掉网格线
+                },
+                splitArea: {
+                    show: false,
+                },
+            },
+        ],
+        series: [
+
+        ],
+    };
+
+    created() {
+        this.getPatrolDeviceData();
+        setInterval(() => {
+            this.getPatrolDeviceData();
+        }, 5000 * 60);
+    }
+
+    // test(data) {
+    //     setTimeout(() => {
+    //         data.resize({
+    //             width: 1700,
+    //         });
+    //     }, 0);
+    // }
+
+    getPatrolDeviceData() {
+        api.getPatrolDeviceData().then((res) => {
+            this.echartdata.xAxis[0].data = res.data.date;
+            const series = [
+                {
+                    name: '任务总数',
+                    type: 'bar',
+                    data: res.data.list,
+                    barWidth: 10,
+                },
+            ];
+            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 .title {
+    overflow-wrap: break-word;
+    color: rgba(11, 226, 223, 1);
+    font-size: 18px;
+    font-family: SourceHanSansCN-Bold;
+    font-weight: 700;
+    text-align: left;
+    white-space: nowrap;
+    margin-left: -1.5vw;
+    line-height: 18px;
+}
+
+.module-box .echarts {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 20px;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
+</style>

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

@@ -14,10 +14,10 @@
                     </div>
                     <div class="two">
                         <div class="title">平均响应时间</div>
-                        <div class="nums">{{count.count2}}h</div>
+                        <div class="nums">{{count.count2 * 60}}m</div>
                     </div>
                     <div class="there">
-                        <div class="title">未派工任务数量</div>
+                        <div class="title">预约任务数量</div>
                         <div class="nums">{{count.count3}}</div>
                     </div>
                 </div>

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

@@ -131,8 +131,16 @@ export default class Smodule23 extends Vue {
         text-align: right;
         padding-right: 2%;
     }
+
+    .module-box .header .right .year{
+        color: #0000CD;
+    }
+
+    .module-box .header .right .month{
+        color: #0000CD;
+    }
     .module-box .header .right .cur{
-        color: #0000CD !important;
+        color: #FFFFFF !important;
     }
     .module-box .header .right span{
         font-size: 18px;

src/apps/home/views/home.js

@@ -15,6 +15,7 @@ import ScreenTem13 from '@/apps/home/components/screen-tem13.vue';
 import ScreenTem14 from '@/apps/home/components/screen-tem14.vue';
 import ScreenTem15 from '@/apps/home/components/screen-tem15.vue';
 import ScreenTem16 from '@/apps/home/components/screen-tem16.vue';
+import ScreenTem17 from '@/apps/home/components/screen-tem17.vue';
 
 import api from '../api';
 
@@ -35,6 +36,7 @@ import api from '../api';
         ScreenTem14,
         ScreenTem15,
         ScreenTem16,
+        ScreenTem17,
     },
 
 })

src/apps/home/views/home.vue

@@ -16,6 +16,7 @@
             <screen-tem-14 v-if="info.tempName === 'org14'" :data="info" />
             <screen-tem-15 v-if="info.tempName === 'org15'" :data="info" />
             <screen-tem-16 v-if="info.tempName === 'org16'" :data="info" />
+            <screen-tem-17 v-if="info.tempName === 'org17'" :data="info" />
         </div>
 
         <dv-loading v-if="loading" class="screen-loading">

src/common/components/echarts.vue

@@ -56,6 +56,8 @@ export default class Echarts extends Vue {
                 } else {
                     this.myChart = echarts.init(this.$refs[this.id]);
                 }
+
+                this.$emit('onload', this.myChart);
             }
             this.drawLine();
         });
@@ -71,8 +73,8 @@ export default class Echarts extends Vue {
 </script>
 
 <style scoped lang="scss">
-    .charts-div{
-        width: 100%;
-        height: 100%;
-    }
+.charts-div {
+    width: 100%;
+    height: 100%;
+}
 </style>