update code

public/css/largeScreenLayout.css

@@ -57,6 +57,9 @@
     height: 970px;
     background: url("../images/one/3x3.png") no-repeat center/100% 100%;
 }
+.screen-one-3-3.no-title{
+    background: url("../images/one/3x32.png") no-repeat center/100% 100%;
+}
 .screen-one-3-4{
     height: 970px;
     background: url("../images/one/3x4.png") no-repeat center/100% 100%;

src/api/project/index.js

@@ -92,7 +92,12 @@ const getInfo=()=>{
     method:'get'
   })
 }
-
+const listPhotography=id=>{
+  return request({
+    url: `bgscreen/photography/listPhotography?projectId=${id}`,
+    method: 'get'
+  });
+}
 
 export default{
     findProjectByDept,
@@ -102,7 +107,8 @@ export default{
     groupByCategory,
     groupByLevel,
     getProjectUser,
-    getInfo
+    getInfo,
+    listPhotography
 }
 
 

src/components/header.vue

@@ -21,7 +21,7 @@
                                 @click="pageJump(61, '#/video')">视频监控</button>
                             <button type="button" :class="nav == 62 ? 'active' : ''" class="sub-btn"
                                 @click="pageJump(62, '#/aiVideo')">AI识别监控</button>
-                            <button v-if="1==2" type="button" :class="nav == 63 ? 'active' : ''" class="sub-btn"
+                            <button v-if="1==1" type="button" :class="nav == 63 ? 'active' : ''" class="sub-btn"
                                 @click="pageJump(63, '#/photography')">延时摄影</button>
                         </div>
                     </div>

src/components/module/module-one-3-3.js

@@ -2,7 +2,7 @@ import Vue from 'vue'
 Vue.component('module-one-3-3', {
     template:`
         <div class="screen-module">
-            <div class="screen-one-3-3">
+            <div class="screen-one-3-3" :class="notitle?'no-title':''">
                 <div class="module-title"><span>{{label}}</span></div>
                 <slot></slot> 
             </div>
@@ -11,6 +11,9 @@ Vue.component('module-one-3-3', {
     props: {
         label:{
             type:String
+        },
+        notitle:{
+            type:Boolean
         }
     },
 

src/pages/index.vue

@@ -277,9 +277,9 @@ export default {
                 icon: "rect",
                 orient: "horizontal",
                 left: '50%',
-                top: '0',
+                top: '10%',
-                itemGap: 0,     
+                itemGap: 20,
-                       
+                itemHeight:30,
                 textStyle: {
                     padding:[0,0,2,0],    
                     fontSize: 10,
@@ -611,7 +611,7 @@ export default {
                     roleType: 0
                 };
                 this.$api.problemmodify.safetySummary(postData).then(d => {
-                    this.dangersDatas = (d || []).map(it => {
+                   let tmps= (d || []).map(it => {
                         return {
                             text: it.problemArea,
                             prop: '0.0',
@@ -619,6 +619,8 @@ export default {
                             value: +it.roleType || 0
                         }
                     });
+                    tmps.splice(6)
+                    this.dangersDatas =tmps;
                     let sum = 0;
                     this.dangersDatas.forEach(it => {
                         sum += it.value * 1;
@@ -633,7 +635,7 @@ export default {
                 };
                 this.qualityNavTitle = "质量隐患总数";
                 this.$api.problemmodify.qualitySummary(postData).then(d => {
-                    this.dangersDatas = (d || []).map(it => {
+                   let tmps = (d || []).map(it => {
                         return {
                             text: it.problemArea,
                             prop: '0.0',
@@ -641,6 +643,8 @@ export default {
                             value: +it.roleType || 0
                         }
                     });
+                    tmps.splice(6)
+                    this.dangersDatas=tmps;
                     let sum = 0;
                     this.dangersDatas.forEach(it => {
                         sum += it.value * 1;

src/pages/photography.vue

@@ -0,0 +1,196 @@
+<template>
+    <div class="prj-photography-main">
+        <div class="screen-content">
+            <el-row>
+                <el-col :span="6">
+                    <module-one-3-1 label="延时摄影列表">
+                        <div class="left-list scroll">
+                        <el-collapse v-model="activeNames" >
+                            <el-collapse-item v-for="(it, idx) in dataList" :key="idx" :name="it.videoDate">
+                                <template slot="title">
+                                    <div style="position:relative;padding-left:20px;width: 100%;">
+                                        <span>{{ it.videoDate }}</span>
+                                        <i class="header-icon el-icon-camera-solid" @click.stop="playVideo(it)"
+                                            style="position: absolute;right: 30px;top: 10px;font-size: 30px;"></i>
+                                    </div>
+                                </template>
+                                <div class="img-items">
+                                    <div v-for="(item, index) in it.images" :key="index" class="img-item">
+                                        <el-image :src="item.url + '.min.jpg'" style="width: 90%;"
+                                            :preview-src-list="[item.url]" />
+                                        <div class="div-date">{{ item.date }}</div>
+                                    </div>
+                                </div>
+                            </el-collapse-item>
+                        </el-collapse>
+                    </div>
+                    </module-one-3-1>
+                </el-col>
+                <el-col :span="18" class="no-title">
+                    <module-one-3-3 label="" :notitle="true">
+                        <div class="right-title">
+                            <span class="sp-title">{{info.videoDate }}</span>
+                        </div>
+                        <video controls v-if="info">
+                            <source :src="info.videoUrl" type="video/mp4" />
+                            您的浏览器不支持Video标签。
+                        </video>
+                    </module-one-3-3>
+                </el-col>
+            </el-row>
+        </div>
+    </div>
+</template>
+
+<script>
+import '../components/module/module-one-3-1'
+import '../components/module/module-one-3-3'
+import debounce from 'lodash.debounce'
+export default {
+    name: 'JhbigscreenPhotography',
+
+    data() {
+        return {
+            prj: {},
+            prjs: [],
+            dataList: [],
+            activeNames: [],
+            info: null,
+        };
+    },
+
+    mounted() {
+        this.$bus.$on("loadProjects", debounce(prjs => {
+            this.prjs = prjs;
+        }));
+        this.$bus.$on("projectChange", debounce(res => {
+            this.prj = res;
+            this.loadData();
+        }));
+        if (this.$root.hasInitHeader) {
+            this.initMe();
+        }
+    },
+
+    methods: {
+        playVideo(it){
+            this.info=it;
+        },
+        loadData() {
+            this.getProjectId(id => {
+                this.$api.project.listPhotography(id).then(d => {
+                    this.dataList = (d.data || []).map(it => {
+                        it.images = this.$tryToJson(it.imageUrl);
+                        return it;
+                    })
+                    if (this.dataList.length > 0) {
+                        this.activeNames = [this.dataList[0].videoDate];
+                        this.info = this.dataList[0];
+                    }
+                })
+
+            });
+        },
+        initMe() {
+            this.project = this.$root.project || {};
+            this.prjs = this.$root.projects || [];
+            this.loadData();
+        },
+        getProjectId(cb) {
+            let func = () => {
+                let prjId = this.prj?.id || 0;
+                if (prjId == 0) {
+                    if (!this.prjs || this.prjs.length == 0) {
+                        setTimeout(func, 100);
+                    } else {
+                        cb && cb(this.prjs[1].id);
+                    }
+                } else {
+                    cb && cb(prjId);
+                }
+            }
+            func();
+        },
+    },
+};
+</script>
+
+<style lang="less" scoped>
+.prj-photography-main {
+    .no-title {
+        /deep/ .screen-one-3-3 {
+            background-image: none;
+            border: solid 1px #409eff5c;
+            .module-title{
+                display: none;
+            }
+            .right-title{
+                height: 200px;
+                display: flex;
+                align-items: center;
+                justify-content: center
+            }
+            .sp-title{
+                display: inline-block;
+                line-height: 72px;
+                padding: 0px 40px;
+                font-size: 40px;
+                background-size: 100% 100%;
+                background-image: url('../assets/images/bgphoto.png');
+            }
+            video{
+                width: 100%;
+                height: calc(100% - 201px);
+            }
+        }
+    }
+    .left-list{
+        max-height: calc(100% - 40px);
+        overflow-y: auto;
+        &::-webkit-scrollbar {
+            width: 4px;
+            height: 4px;
+        }
+    }
+    /deep/ .screen-one-3-1 {
+        .el-collapse {
+            border: none;
+            margin-top: 4px;
+
+            .el-collapse-item {}
+
+            .el-collapse-item__header {
+                background-color: #097fca2e;
+                color: #089fff;
+                border: none;
+            }
+
+            .el-collapse-item__content {
+                padding-bottom: 12px;
+            }
+
+            .el-collapse-item__wrap {
+                background-color: transparent;
+                border: none;                
+                .img-item {
+                    margin-top: 8px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    flex-direction: column;
+                    color: #fff;
+                    position: relative;
+
+                    .div-date {
+                        width: calc(90% - 24px);
+                        text-align: left;
+                        position: absolute;
+                        bottom: 0px;
+                        background-color: #ffffff38;
+                        padding-left: 24px;
+                    }
+                }
+            }
+        }
+    }
+}</style>

src/pages/projectEngin.vue

@@ -116,6 +116,7 @@ export default {
                 itemWidth:20,
                 itemHeight:40,
                 textStyle: {
+                    color: "#c3dbfd",
                     fontSize: 14,
                     rich: {
                         name: {

src/pages/projectQuality.vue

@@ -272,6 +272,7 @@ export default {
                     itemWidth:50,                    
                     textStyle: {
                         fontSize: 14,
+                        color: "#c3dbfd",
                         rich: {
                             name: {
                                 color: "#c3dbfd",

src/router/index.js

@@ -46,6 +46,11 @@ const routes = [
     path: '/engin',
     name: 'engin',
     component: () => import(/* webpackChunkName: "video" */ '../pages/projectEngin.vue')
+  }, 
+  {
+    path: '/photography',
+    name: 'photography',
+    component: () => import(/* webpackChunkName: "video" */ '../pages/photography.vue')
   }
 ]
 const router = new VueRouter({