update code
parent
ac819db209
commit
dd383ce608
|
|
@ -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%;
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 59 KiB |
|
|
@ -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
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 806 B |
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -277,9 +277,9 @@ export default {
|
|||
icon: "rect",
|
||||
orient: "horizontal",
|
||||
left: '50%',
|
||||
top: '0',
|
||||
itemGap: 0,
|
||||
|
||||
top: '10%',
|
||||
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;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -116,6 +116,7 @@ export default {
|
|||
itemWidth:20,
|
||||
itemHeight:40,
|
||||
textStyle: {
|
||||
color: "#c3dbfd",
|
||||
fontSize: 14,
|
||||
rich: {
|
||||
name: {
|
||||
|
|
|
|||
|
|
@ -272,6 +272,7 @@ export default {
|
|||
itemWidth:50,
|
||||
textStyle: {
|
||||
fontSize: 14,
|
||||
color: "#c3dbfd",
|
||||
rich: {
|
||||
name: {
|
||||
color: "#c3dbfd",
|
||||
|
|
|
|||
|
|
@ -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({
|
||||
|
|
|
|||
Loading…
Reference in New Issue