From 87bc2ee400a4fe9312f81a31a2946a7b8a00fcc4 Mon Sep 17 00:00:00 2001
From: guanqb <18720758508@163.com>
Date: Thu, 02 Feb 2023 14:36:52 +0800
Subject: [PATCH] 活动监控无数据样式
---
src/views/activity/index.vue | 281 +++++++++++++++++++++++++++++++++++++++++++------------
1 files changed, 218 insertions(+), 63 deletions(-)
diff --git a/src/views/activity/index.vue b/src/views/activity/index.vue
index e49ab65..c93957e 100644
--- a/src/views/activity/index.vue
+++ b/src/views/activity/index.vue
@@ -44,26 +44,46 @@
placeholder="选择日期"
style="width:268px"
></el-date-picker>-->
- <el-date-picker v-model="selectTime" type="daterange" align="right" unlink-panels
- format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" range-separator="至"
- start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions"
- @change="activityTimeChange"></el-date-picker>
+ <el-date-picker
+ v-model="selectTime"
+ type="daterange"
+ align="right"
+ unlink-panels
+ format="yyyy-MM-dd HH:mm:ss"
+ value-format="yyyy-MM-dd HH:mm:ss"
+ range-separator="至"
+ start-placeholder="开始日期"
+ end-placeholder="结束日期"
+ :picker-options="pickerOptions"
+ @change="activityTimeChange"
+ ></el-date-picker>
</div>
</div>
<div>
<div class="category">活动名称：</div>
<div class="category-value">
- <input type="text" placeholder="请输入…" v-model="searchActivity" class="category-input"
- @input="inputChange" />
+ <input
+ type="text"
+ placeholder="请输入…"
+ v-model="searchActivity"
+ class="category-input"
+ @input="inputChange"
+ />
<button class="category-button el-icon-search" @click="searchClick"></button>
</div>
</div>
</div>
<div class="result-content">
<div class="table-box">
- <div v-show="activityList.length > 0" class="row-box" :class="{ on: currentClickIndex === index }"
- v-for="(item, index) in activityList" :key="index" @click="activityListClick(item, index)">
+ <div
+ v-show="activityList.length > 0"
+ class="row-box"
+ :class="{ on: currentClickIndex === index }"
+ v-for="(item, index) in activityList"
+ :key="index"
+ @click="activityListClick(item, index)"
+ >
<div class="row-title">常规安保</div>
<div class="row-content">
<div>
@@ -76,7 +96,9 @@
</div>
<div>
<div class="category">活动时间：</div>
- <div class="category-value">{{ item.startTime }} 至 {{ item.endTime }}</div>
+ <div
+ class="category-value"
+ >{{ item.startTime }} 至 {{ item.endTime }}</div>
</div>
<div>
<div class="category">活动详情：</div>
@@ -88,8 +110,14 @@
<div v-show="activityList == 0" class="no-data">暂无数据</div>
</div>
<div class="pages">
- <el-pagination background layout="prev, pager, next" :page-size="pagesize" :page-count="pagesCount"
- :current-page="currentPage" @current-change="handleCurrentChange"></el-pagination>
+ <el-pagination
+ background
+ layout="prev, pager, next"
+ :page-size="pagesize"
+ :page-count="pagesCount"
+ :current-page="currentPage"
+ @current-change="handleCurrentChange"
+ ></el-pagination>
</div>
</div>
</div>
@@ -102,7 +130,10 @@
<ul>
<li>
<button @click="draw('billboard', 'policeman')" title="警员">
- <img src="../../../public/img/icon/police-people-btn.png" style="height:100%" />
+ <img
+ src="../../../public/img/icon/police-people-btn.png"
+ style="height:100%"
+ />
</button>
</li>
<li>
@@ -197,7 +228,9 @@
</div>
<div class="row-box">
<div class="category">活动时间：</div>
- <div class="category-value">{{ activityDetails.startTime }} 至 {{ activityDetails.endTime }}</div>
+ <div
+ class="category-value"
+ >{{ activityDetails.startTime }} 至 {{ activityDetails.endTime }}</div>
</div>
<div class="row-box">
<div class="category">活动内容：</div>
@@ -205,27 +238,42 @@
</div>
</div>
- <div class="plan-control" v-show="dialogVisible && (isHavePolice || isHaveArrow || isHaveLine)">
+ <div
+ class="plan-control"
+ v-show="dialogVisible && (isHavePolice || isHaveArrow || isHaveLine)"
+ >
<div class="row-box" v-show="isHavePolice">
<div class="category">警力资源：</div>
<div class="category-value">
- <el-switch v-model="policeSwitch" @change="switchChange" active-color="#13ce66"
- inactive-color="#ccc"></el-switch>
+ <el-switch
+ v-model="policeSwitch"
+ @change="switchChange"
+ active-color="#13ce66"
+ inactive-color="#ccc"
+ ></el-switch>
</div>
</div>
<div class="row-box" v-show="isHaveArrow">
<div class="category">作战标绘：</div>
<div class="category-value">
- <el-switch v-model="arrowBtnSwitch" @change="switchArrowBtnChange" active-color="#13ce66"
- inactive-color="#ccc"></el-switch>
+ <el-switch
+ v-model="arrowBtnSwitch"
+ @change="switchArrowBtnChange"
+ active-color="#13ce66"
+ inactive-color="#ccc"
+ ></el-switch>
</div>
</div>
<div class="row-box" v-show="isHaveLine">
<div class="category">巡逻路线：</div>
<div class="category-value">
- <el-switch v-model="polylineBtnSwitch" @change="switchBtnChange" active-color="#13ce66"
- inactive-color="#ccc"></el-switch>
+ <el-switch
+ v-model="polylineBtnSwitch"
+ @change="switchBtnChange"
+ active-color="#13ce66"
+ inactive-color="#ccc"
+ ></el-switch>
</div>
</div>
</div>
@@ -257,8 +305,13 @@
</div>
<div class="search-content">
- <input v-model="searchExtensivelyValue" @input="searchExtensivelyChange" @focus="searchExtensivelyFocus"
- type="text" placeholder="请输入搜索条件" />
+ <input
+ v-model="searchExtensivelyValue"
+ @input="searchExtensivelyChange"
+ @focus="searchExtensivelyFocus"
+ type="text"
+ placeholder="请输入搜索条件"
+ />
<div class="clear" v-show="isShowClearBtn" @click="clearSearchValue" title="清空">
<img src="../../../public/img/icon/clear.png" alt />
</div>
@@ -266,66 +319,149 @@
</div>
<div v-show="searchExtensivelyValBoxShow" class="searchExtensively-val-box">
<div>
- <div @click="searchExtensivelyVlaClick(item)" v-for="(item, index) in searchExtensivelyArray"
- :key="index">{{ item.name }}</div>
+ <div
+ @click="searchExtensivelyVlaClick(item)"
+ v-for="(item, index) in searchExtensivelyArray"
+ :key="index"
+ >{{ item.name }}</div>
</div>
</div>
<div class="item video5" v-show="polylineBtnSwitch">
- <div class="select" v-show="isShowSelect.video5">
- <el-select size="small" v-model="monitor.type5" @change="((val) => { navClick(val, 5) })"
- placeholder="请选择" ref="videoSelect5">
- <el-option v-for="item in monitorOption" :key="item.value" :label="item.label"
- :value="item.value"></el-option>
+ <div class="select" v-show="isShowSelect.video5&&isHaveMonitor.video5">
+ <el-select
+ size="small"
+ v-model="monitor.type5"
+ @change="((val) => { navClick(val, 5) })"
+ placeholder="请选择"
+ ref="videoSelect5"
+ >
+ <el-option
+ v-for="item in monitorOption"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ ></el-option>
</el-select>
</div>
- <div class="video">
- <video id="videoElement5" autoplay controls width="100%" height="100%" style="object-fit: fill"></video>
+ <div class="video" v-show="isHaveMonitor.video5">
+ <video
+ id="videoElement5"
+ autoplay
+ controls
+ width="100%"
+ height="100%"
+ style="object-fit: fill"
+ ></video>
</div>
+ <div class="no-video" v-show="!isHaveMonitor.video5">暂无数据</div>
</div>
<div class="item video6" v-show="polylineBtnSwitch">
- <div class="select" v-show="isShowSelect.video6">
- <el-select size="small" v-model="monitor.type6" @change="((val) => { navClick(val, 6) })"
- placeholder="请选择" ref="videoSelect6">
- <el-option v-for="item in monitorOption" :key="item.value" :label="item.label"
- :value="item.value"></el-option>
+ <div class="select" v-show="isShowSelect.video6&&isHaveMonitor.video6">
+ <el-select
+ size="small"
+ v-model="monitor.type6"
+ @change="((val) => { navClick(val, 6) })"
+ placeholder="请选择"
+ ref="videoSelect6"
+ >
+ <el-option
+ v-for="item in monitorOption"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ ></el-option>
</el-select>
</div>
- <div class="video">
- <video id="videoElement6" autoplay controls width="100%" height="100%" style="object-fit: fill"></video>
+ <div class="video" v-show="isHaveMonitor.video6">
+ <video
+ id="videoElement6"
+ autoplay
+ controls
+ width="100%"
+ height="100%"
+ style="object-fit: fill"
+ ></video>
</div>
+ <div class="no-video" v-show="!isHaveMonitor.video6">暂无数据</div>
</div>
<div class="item video7" v-show="polylineBtnSwitch">
- <div class="select" v-show="isShowSelect.video7">
- <el-select size="small" v-model="monitor.type7" v-show="isShowSelect.video7"
- @change="((val) => { navClick(val, 7) })" placeholder="请选择" ref="videoSelect7">
- <el-option v-show="isShowSelect.video7" v-for="item in monitorOption" :key="item.value"
- :label="item.label" :value="item.value"></el-option>
+ <div class="select" v-show="isShowSelect.video7&&isHaveMonitor.video7">
+ <el-select
+ size="small"
+ v-model="monitor.type7"
+ v-show="isShowSelect.video7"
+ @change="((val) => { navClick(val, 7) })"
+ placeholder="请选择"
+ ref="videoSelect7"
+ >
+ <el-option
+ v-show="isShowSelect.video7"
+ v-for="item in monitorOption"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ ></el-option>
</el-select>
</div>
- <div class="video">
- <video id="videoElement7" autoplay controls width="100%" height="100%" style="object-fit: fill"></video>
+ <div class="video" v-show="isHaveMonitor.video7">
+ <video
+ id="videoElement7"
+ autoplay
+ controls
+ width="100%"
+ height="100%"
+ style="object-fit: fill"
+ ></video>
</div>
+ <div class="no-video" v-show="!isHaveMonitor.video7">暂无数据</div>
</div>
<div class="item video8" v-show="polylineBtnSwitch">
- <div class="select" v-show="isShowSelect.video8">
- <el-select size="small" v-model="monitor.type8" @change="((val) => { navClick(val, 8) })"
- placeholder="请选择" ref="videoSelect8">
- <el-option v-for="item in monitorOption" :key="item.value" :label="item.label"
- :value="item.value"></el-option>
+ <div class="select" v-show="isShowSelect.video8&&isHaveMonitor.video8">
+ <el-select
+ size="small"
+ v-model="monitor.type8"
+ @change="((val) => { navClick(val, 8) })"
+ placeholder="请选择"
+ ref="videoSelect8"
+ >
+ <el-option
+ v-for="item in monitorOption"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ ></el-option>
</el-select>
</div>
- <div class="video">
- <video id="videoElement8" autoplay controls width="100%" height="100%" style="object-fit: fill"></video>
+ <div class="video" v-show="isHaveMonitor.video8">
+ <video
+ id="videoElement8"
+ autoplay
+ controls
+ width="100%"
+ height="100%"
+ style="object-fit: fill"
+ ></video>
</div>
+ <div class="no-video" v-show="!isHaveMonitor.video8">暂无数据</div>
</div>
- <el-dialog :title="policeChooseTitle" :modal="false" :visible.sync="policeChooseVisible"
- :before-close="policeChooseBeforeClose" :close-on-click-modal="true" class="choose-police-box">
+ <el-dialog
+ :title="policeChooseTitle"
+ :modal="false"
+ :visible.sync="policeChooseVisible"
+ :before-close="policeChooseBeforeClose"
+ :close-on-click-modal="true"
+ class="choose-police-box"
+ >
<div>
<el-select size="small" v-model="policeType" placeholder="请选择">
- <el-option v-for="item in policeOption" :key="item.value" :label="item.label"
- :value="item.value"></el-option>
+ <el-option
+ v-for="item in policeOption"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ ></el-option>
</el-select>
<el-button @click="determine">确定</el-button>
<el-button @click="cancel">取消</el-button>
@@ -559,6 +695,12 @@
flvPlayer7: null,
flvPlayer8: null,
},
+ isHaveMonitor: {
+ video5: false,
+ video6: false,
+ video7: false,
+ video8: false,
+ }
}
},
created () {
@@ -1440,6 +1582,7 @@
if (index == monitorData.length - 1) {
this.monitorOption.forEach((itemm, indexx) => {
if (indexx < 4) {
+ this.isHaveMonitor[`type${indexx + 5}`] = true
this.monitor[`type${indexx + 5}`] = itemm.label
this.playVideoList(`flvPlayer${indexx + 5}`, `${itemm.flvUrl}`, `videoElement${indexx + 5}`)
}
@@ -1562,11 +1705,11 @@
.search-box {
padding: 0 10px;
- &>div:first-child {
+ & > div:first-child {
margin-top: 0;
}
- &>div {
+ & > div {
margin-top: 10px;
display: flex;
align-items: center;
@@ -1641,7 +1784,7 @@
border-radius: 8px;
.row-content {
- &>div {
+ & > div {
display: flex;
line-height: 28px;
@@ -1714,7 +1857,7 @@
.right {
height: 100%;
- &>div {
+ & > div {
display: flex;
}
@@ -1832,7 +1975,7 @@
line-height: 28px;
display: flex;
- &>div {
+ & > div {
text-align: left;
}
@@ -1862,7 +2005,7 @@
line-height: 28px;
display: flex;
- &>div {
+ & > div {
text-align: left;
}
@@ -1981,7 +2124,7 @@
border-radius: 10px;
overflow: hidden;
- &>div {
+ & > div {
height: 100%;
overflow-y: auto;
@@ -2011,6 +2154,18 @@
height: 100%;
padding: 1%;
}
+ .no-video {
+ color: #fff;
+ font-size: 32px;
+ letter-spacing: 4px;
+ width: 98%;
+ height: 98%;
+ background-color: #000;
+ margin: 1%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
}
.video5 {
--
Gitblit v1.9.3