Skip to content

B
binhai-video
Commit 9b1bec1d authored by 刘怀志's avatar 刘怀志
Browse files
Options

图片回放--finish

parent 3861ca2a
Hide whitespace changes
Inline Side-by-side
Showing with 187 additions and 43 deletions
src/views/intelligentAnalysis/index.vue
View file @ 9b1bec1d
......@@ -84,7 +84,7 @@
{{dialogForm.licensePlateNumber}}
</el-form-item>
<el-form-item label="车身颜色：" prop="colour">
<dict-tag :options="dict.type.colour" :value="dialogForm.colour" />
<dict-tag :options="dict.type.bhsp_colour" :value="dialogForm.colour" />
</el-form-item>
<el-form-item label="车辆类型：" prop="vehicleType">
<dict-tag :options="dict.type.bhsp_vtype" :value="dialogForm.vehicleType" />
......
src/views/picturePlayback/index.vue
View file @ 9b1bec1d
......@@ -26,9 +26,9 @@
/>
</el-select>
</el-form-item>
<el-form-item label="道路名称" prop="monitoringPosition">
<el-form-item label="道路名称" prop="roadName">
<el-select
v-model="queryParams.monitoringPosition"
v-model="queryParams.roadName"
clearable
placeholder="请选择道路"
style="width: 100%"
......@@ -74,14 +74,14 @@
<!-- type="selection"-->
<!-- width="55"-->
<!-- />-->
<el-table-column prop="regionName" label="区域" :show-overflow-tooltip="true">
<el-table-column prop="regionName" label="区域名称" :show-overflow-tooltip="true">
<template slot-scope="scope">
<dict-tag :options="dict.type.bhsp_area" :value="scope.row.regionName" />
</template>
</el-table-column>
<el-table-column prop="monitoringPosition" label="道路" :show-overflow-tooltip="true">
<el-table-column prop="roadName" label="道路名称" :show-overflow-tooltip="true">
<template slot-scope="scope">
<dict-tag :options="dict.type.bhsp_road" :value="scope.row.monitoringPosition" />
<dict-tag :options="dict.type.bhsp_road" :value="scope.row.roadName" />
</template>
</el-table-column>
<el-table-column prop="customsName" label="路口名称" :show-overflow-tooltip="true" />
......@@ -104,25 +104,9 @@
style="margin-bottom: unset !important;"
@pagination="getList"
/>
<div class="swiper-area">
<div class="swiper soop">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
</div>
<div class="swiper-pagination" />
</div>
</div>
<!-- 图片回放弹窗-->
<el-dialog title="图片回放" :visible.sync="open" width="680px" append-to-body :close-on-click-modal="false" @close="closeDialog">
<el-form ref="picForm" :model="picForm" :inline="true">
<el-form ref="picForm" label-position="right" label-width="70px" :model="picForm" :inline="true">
<el-form-item label="车身颜色" prop="colour">
<el-select
v-model="picForm.colour"
......@@ -147,10 +131,47 @@
@keyup.enter.native="getPicList"
/>
</el-form-item>
<el-form-item label="窗口数">
<el-select v-model="selectedWindow" placeholder="请选择">
<el-option
v-for="item in windowOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="getPicList">查询</el-button>
<div class="media-btns">
<el-button type="primary" icon="el-icon-search" size="mini" @click="getPicList">查询</el-button>
<svg-icon @click="playSwiper" icon-class="bofang" />
<svg-icon @click="stopSwiper" icon-class="zanting" />
</div>
</el-form-item>
</el-form>
<div class="swiper-area">
<div class="swiper soop">
<div class="swiper-wrapper">
<div class="swiper-slide" :style="swiperHeight" v-for="(item,index) in picList">
<div class="side-title">
<span class="title-item">窗口{{index+1}}</span>
<span>{{ item.startTime }}</span>
<dict-tag :options="dict.type.bhsp_area" :value="item.regionName" />
<span>{{item.monitoringName}}</span>
</div>
<div class="card-type">
车型：<dict-tag :options="dict.type.bhsp_vtype" :value="item.vehicleType" />
车身颜色：<dict-tag :options="dict.type.bhsp_colour" :value="item.colour" />
</div>
<div class="img-area">
<img :src="baseUrl + item.licensePlateImg" />
</div>
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</div>
</el-dialog>
</div>
......@@ -163,9 +184,57 @@ import { queryPassNumber, queryPassPicture } from '@/api/business/intelligentAna
export default {
name: 'Index',
// 数据字典
dicts: ['bhsp_area', 'bhsp_road', 'bhsp_colour'],
dicts: ['bhsp_area', 'bhsp_road', 'bhsp_colour', 'bhsp_vtype'],
data() {
return {
swiperInter: null, // 循环点击标志位
baseUrl: process.env.VUE_APP_IMG_API,
swiper: null,
windowOptions: [
{
label: '1窗口',
value: 'one'
},
{
label: '2窗口',
value: 'two'
},
{
label: '4窗口',
value: 'four'
},
{
label: '6窗口',
value: 'six'
},
{
label: '9窗口',
value: 'nine'
},
],
selectedWindow: 'four', // 选中的窗口数
layoutMap: {
one: {
row: 1,
col: 1
},
two: {
row: 1,
col: 2
},
four: {
row: 2,
col: 2
},
six: {
row: 2,
col: 3
},
nine: {
row: 3,
col: 3
},
},
picList: [], // 图片列表
picForm: {}, // 图片回放弹出框筛选项
open: false, // 图片回放弹窗标识位
......@@ -208,7 +277,7 @@ export default {
// 查询参数
queryParams: {
customsName: '',
monitoringPosition: '',
roadName: '',
regionName: '',
occurrenceTime: '',
licensePlateNumber: '',
......@@ -224,26 +293,56 @@ export default {
}
},
computed: {
...mapGetters(['userId'])
...mapGetters(['userId']),
// 根据选择自动生成高度
swiperHeight() {
return {height: `calc((100%) / ${this.layoutMap[this.selectedWindow].row}) !important`,width: `calc((100%) / ${this.layoutMap[this.selectedWindow].col}) !important`}
}
},
created() {
this.getRoad()
this.getList()
},
mounted() {
var swiper = new Swiper('.soop', {
slidesPerView: 4,
grid: {
rows: 2
},
spaceBetween: 30,
pagination: {
el: '.swiper-pagination',
clickable: true
}
})
},
watch:{
selectedWindow(value) {
this.$nextTick(()=>{
console.log(value,this.layoutMap,this.layoutMap[value])
this.swiper = new Swiper('.soop', {
allowTouchMove: false,
navigation: {
prevEl: '.swiper-button-prev',
nextEl: '.swiper-button-next',
},
slidesPerView: this.layoutMap[value].col,
grid: {
rows: this.layoutMap[value].row
},
spaceBetween: 0,
pagination: {
el: '.swiper-pagination',
clickable: true
}
})
this.stopSwiper()
this.swiper.update()
})
}
},
methods: {
// 播放滚动条
playSwiper() {
this.swiperInter = setInterval(()=>{
this.swiper.slideNext()
},1500)
},
// 停止播放滚动条
stopSwiper(){
if (this.swiperInter){
clearInterval(this.swiperInter)
}
},
/** 打开弹窗*/
openDia(row) {
console.log('openDia', row)
......@@ -261,10 +360,33 @@ export default {
queryPassPicture(temp).then(res => {
console.log('queryPassPicture', res.rows)
this.picList = res.rows
this.$nextTick(()=>{
this.swiper = new Swiper('.soop', {
allowTouchMove: false,
navigation: {
prevEl: '.swiper-button-prev',
nextEl: '.swiper-button-next',
},
slidesPerView: this.layoutMap[this.selectedWindow].col,
grid: {
rows: this.layoutMap[this.selectedWindow].row
},
spaceBetween: 0,
pagination: {
el: '.swiper-pagination',
clickable: true
}
})
this.stopSwiper()
this.swiper.update()
})
})
},
/** 关闭图片回放回调*/
closeDialog() {},
closeDialog() {
this.picForm ={}
this.selectedWindow = 'four'
},
/** 获取路口相关信息*/
getRoad() {
selectDisCrossname(this.userId).then(res => {
......@@ -318,16 +440,38 @@ export default {
.swiper-slide {
text-align: center;
font-size: 18px;
font-size: 12px;
background: #fff;
height: calc((100% - 30px) / 2) !important;
/* Center slide text vertically */
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.swiper-area{
height: 800px;
height: 500px;
}
.side-title{
display: flex;
}
.title-item{
margin: 0 2px;
}
.card-type{
display: flex;
}
.img-area{
img{
width: 90%;
height: 90%;
}
}
.media-btns{
display: flex;
font-size: 28px;
align-items: center;
justify-content: space-around;
width: 170px;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment