| | |
| | | <div v-show="boxShow" class="container-content"> |
| | | <div class="switch-box" v-show="!detailFlag"> |
| | | 资源类别: |
| | | <el-select v-model="typeValue" @change="navClick" placeholder="请选择" class="type-select-css"> |
| | | <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" |
| | | class="option-css"></el-option> |
| | | <el-select |
| | | v-model="typeValue" |
| | | @change="navClick" |
| | | placeholder="请选择" |
| | | class="type-select-css" |
| | | > |
| | | <el-option |
| | | v-for="item in options" |
| | | :key="item.value" |
| | | :label="item.label" |
| | | :value="item.value" |
| | | class="option-css" |
| | | ></el-option> |
| | | </el-select> |
| | | </div> |
| | | |
| | | <div class="list-show" v-if="!detailFlag"> |
| | | <div class="search-box"> |
| | | 资源名称: |
| | | <input v-model="searchValue" @input="searchChange" type="text" placeholder="请输入搜索条件" /> |
| | | <input |
| | | v-model="searchValue" |
| | | @input="searchChange" |
| | | type="text" |
| | | placeholder="请输入搜索条件" |
| | | /> |
| | | </div> |
| | | |
| | | <div class="list" ref="tableBox"> |
| | | <el-table :data="equimentTableData" |
| | | <el-table |
| | | :data="equimentTableData" |
| | | :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }" |
| | | :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'pointer' }" |
| | | :height="currentTableHeight"> |
| | | <el-table-column prop="name" :show-overflow-tooltip="true" label="名称" |
| | | min-width="30%"></el-table-column> |
| | | <el-table-column prop="channelId" :show-overflow-tooltip="true" label="通道编号" |
| | | min-width="24%"></el-table-column> |
| | | :height="currentTableHeight" |
| | | > |
| | | <el-table-column |
| | | prop="name" |
| | | :show-overflow-tooltip="true" |
| | | label="名称" |
| | | min-width="30%" |
| | | ></el-table-column> |
| | | <el-table-column |
| | | prop="channelId" |
| | | :show-overflow-tooltip="true" |
| | | label="通道编号" |
| | | min-width="24%" |
| | | ></el-table-column> |
| | | <el-table-column prop="status" label="状态" min-width="18%"> |
| | | <template slot-scope="scope"> |
| | | <div class="state-box" :class="{ online: scope.row.status == '1' }"></div> |
| | |
| | | |
| | | <el-table-column label="操作" align="center" min-width="28%"> |
| | | <template slot-scope="scope"> |
| | | <el-button @click="rowClick(scope.row)" type="text" size="small" title="定位"> |
| | | <el-button |
| | | @click="rowClick(scope.row)" |
| | | type="text" |
| | | size="small" |
| | | title="定位" |
| | | > |
| | | <i class="el-icon-location"></i> |
| | | </el-button> |
| | | <el-button v-show="navType == 0" @click="equipmentTrack(scope.row)" type="text" |
| | | size="small" title="轨迹"> |
| | | <el-button |
| | | v-show="navType == 0" |
| | | @click="equipmentTrack(scope.row)" |
| | | type="text" |
| | | size="small" |
| | | title="轨迹" |
| | | > |
| | | <i class="el-icon-position"></i> |
| | | </el-button> |
| | | <el-button @click="play(scope.row)" type="text" size="small" title="播放视频"> |
| | | <el-button |
| | | @click="play(scope.row)" |
| | | type="text" |
| | | size="small" |
| | | title="播放视频" |
| | | > |
| | | <i class="el-icon-video-play"></i> |
| | | </el-button> |
| | | </template> |
| | |
| | | </el-table> |
| | | |
| | | <div class="pages" ref="tablePagination"> |
| | | <el-pagination background layout="prev, pager, next" you:page-size="equimentPage.pageSize" |
| | | :page-count="equimentPage.count" :pager-count="4" :current-page="equimentPage.currentPage" |
| | | @current-change="handleCurrentChange"></el-pagination> |
| | | <el-pagination |
| | | background |
| | | layout="prev, pager, next" |
| | | you:page-size="equimentPage.pageSize" |
| | | :page-count="equimentPage.count" |
| | | :pager-count="4" |
| | | :current-page="equimentPage.currentPage" |
| | | @current-change="handleCurrentChange" |
| | | ></el-pagination> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | <div>状态:</div> |
| | | <div> |
| | | {{ |
| | | currentSelectEquipment.status ? (currentSelectEquipment.status == 0 ? '离线' : |
| | | '在线') : '' |
| | | currentSelectEquipment.status ? (currentSelectEquipment.status == 0 ? '离线' : |
| | | '在线') : '' |
| | | }} |
| | | </div> |
| | | </li> |
| | |
| | | <li> |
| | | <div>选择时间:</div> |
| | | <div class="datetime"> |
| | | <el-date-picker v-model="trackTime" type="daterange" unlink-panels range-separator="至" |
| | | start-placeholder="开始日期" size="mini" :editable="false" |
| | | end-placeholder="结束日期"></el-date-picker> |
| | | <el-date-picker |
| | | v-model="trackTime" |
| | | type="daterange" |
| | | unlink-panels |
| | | range-separator="至" |
| | | start-placeholder="开始日期" |
| | | size="mini" |
| | | :editable="false" |
| | | end-placeholder="结束日期" |
| | | ></el-date-picker> |
| | | </div> |
| | | </li> |
| | | |
| | |
| | | </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 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> |
| | | |
| | | <el-dialog :title="dialogTitle" :modal="false" :visible.sync="dialogVisible" :before-close="dialogBeforeClose" |
| | | :close-on-click-modal="true" class="car-video-box"> |
| | | <video autoplay controls width="100%" height="100%" ref="videoElement" id="videoElement" |
| | | style="object-fit: fill"></video> |
| | | <el-dialog |
| | | :title="dialogTitle" |
| | | :modal="false" |
| | | :visible.sync="dialogVisible" |
| | | :before-close="dialogBeforeClose" |
| | | :close-on-click-modal="true" |
| | | class="car-video-box" |
| | | > |
| | | <video |
| | | autoplay |
| | | controls |
| | | width="100%" |
| | | height="100%" |
| | | ref="videoElement" |
| | | id="videoElement" |
| | | style="object-fit: fill" |
| | | ></video> |
| | | </el-dialog> |
| | | </div> |
| | | </template> |
| | |
| | | align-items: center; |
| | | justify-content: space-around; |
| | | |
| | | &>div { |
| | | & > div { |
| | | flex: 1; |
| | | } |
| | | } |
| | |
| | | color: #fff; |
| | | border-bottom: 1px solid #fff; |
| | | |
| | | &>div { |
| | | & > div { |
| | | text-align: center; |
| | | } |
| | | |
| | | &>div:first-child { |
| | | & > div:first-child { |
| | | flex: 2; |
| | | } |
| | | |
| | | &>div:last-child { |
| | | & > div:last-child { |
| | | flex: 6; |
| | | |
| | | &>div { |
| | | & > div { |
| | | width: 100% !important; |
| | | } |
| | | } |
| | |
| | | border-radius: 10px; |
| | | overflow: hidden; |
| | | |
| | | &>div { |
| | | & > div { |
| | | height: 100%; |
| | | overflow-y: auto; |
| | | |