| | |
| | | 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> |
| | |
| | | </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> |
| | |
| | | <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> |
| | |
| | | <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> |
| | |
| | | </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> |
| | |
| | | </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> |
| | |
| | | </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> |
| | |
| | | </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> |
| | |
| | | flvPlayer7: null, |
| | | flvPlayer8: null, |
| | | }, |
| | | isHaveMonitor: { |
| | | video5: false, |
| | | video6: false, |
| | | video7: false, |
| | | video8: false, |
| | | } |
| | | } |
| | | }, |
| | | created () { |
| | |
| | | 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}`) |
| | | } |
| | |
| | | .search-box { |
| | | padding: 0 10px; |
| | | |
| | | &>div:first-child { |
| | | & > div:first-child { |
| | | margin-top: 0; |
| | | } |
| | | |
| | | &>div { |
| | | & > div { |
| | | margin-top: 10px; |
| | | display: flex; |
| | | align-items: center; |
| | |
| | | border-radius: 8px; |
| | | |
| | | .row-content { |
| | | &>div { |
| | | & > div { |
| | | display: flex; |
| | | line-height: 28px; |
| | | |
| | |
| | | .right { |
| | | height: 100%; |
| | | |
| | | &>div { |
| | | & > div { |
| | | display: flex; |
| | | } |
| | | |
| | |
| | | line-height: 28px; |
| | | display: flex; |
| | | |
| | | &>div { |
| | | & > div { |
| | | text-align: left; |
| | | } |
| | | |
| | |
| | | line-height: 28px; |
| | | display: flex; |
| | | |
| | | &>div { |
| | | & > div { |
| | | text-align: left; |
| | | } |
| | | |
| | |
| | | border-radius: 10px; |
| | | overflow: hidden; |
| | | |
| | | &>div { |
| | | & > div { |
| | | height: 100%; |
| | | overflow-y: auto; |
| | | |
| | |
| | | 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 { |