| | |
| | | * @Author: shuishen 1109946754@qq.com |
| | | * @Date: 2022-08-18 16:18:17 |
| | | * @LastEditors: shuishen 1109946754@qq.com |
| | | * @LastEditTime: 2023-02-10 10:49:34 |
| | | * @LastEditTime: 2023-02-11 15:18:52 |
| | | * @FilePath: \srs-police-affairs\src\views\video\list.vue |
| | | * @Description: 辖区管理 |
| | | * |
| | |
| | | <div v-show="boxShow" class="container-content"> |
| | | <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="draw-btn"> |
| | |
| | | <button @click="changeRange" class="btn">确定</button> |
| | | </div> |
| | | <div v-show="searchValBoxShow" class="search-val-box"> |
| | | <div |
| | | @click="searchVlaClick(item)" |
| | | v-for="(item, index) in searchArray" |
| | | :key="index" |
| | | >{{ item.name }}</div> |
| | | <div @click="searchVlaClick(item)" v-for="(item, index) in searchArray" :key="index">{{ item.name }} |
| | | </div> |
| | | </div> |
| | | |
| | | <div class="down-tree"> |
| | | <el-scrollbar> |
| | | <el-tree |
| | | v-show="searchLazyFlag" |
| | | :props="props" |
| | | :load="loadNode" |
| | | lazy |
| | | @node-click="treeClick" |
| | | ></el-tree> |
| | | <el-tree v-show="searchLazyFlag" :props="props" :load="loadNode" lazy @node-click="treeClick"> |
| | | <span class="custom-tree-node" slot-scope="node"> |
| | | <i v-show="node.data.leaf" class="status-box" |
| | | :class="{ online: Number(node.data.status) === 1 }"></i> |
| | | |
| | | <el-tree |
| | | v-show="searchLazyFlag == false" |
| | | :data="searchTreeData" |
| | | :props="defaultProps" |
| | | :default-expand-all="true" |
| | | @node-click="treeClick" |
| | | ></el-tree> |
| | | <span> |
| | | {{ |
| | | node.data.name |
| | | }} |
| | | </span> |
| | | </span> |
| | | </el-tree> |
| | | |
| | | <el-tree v-show="searchLazyFlag == false" :data="searchTreeData" :props="defaultProps" |
| | | :default-expand-all="true" @node-click="treeClick"> |
| | | <span class="custom-tree-node" slot-scope="node"> |
| | | <i class="status-box" :class="{ online: Number(node.data.status) === 1 }"></i> |
| | | |
| | | <span> |
| | | {{ |
| | | node.data.name |
| | | }} |
| | | </span> |
| | | </span> |
| | | </el-tree> |
| | | </el-scrollbar> |
| | | </div> |
| | | |
| | | <div class="list-show" v-if="false"> |
| | | <div class="car-list"> |
| | | <div class="list-box"> |
| | | <el-table |
| | | :data="monitoringList" |
| | | style="width: 100%" |
| | | <el-table :data="monitoringList" style="width: 100%" |
| | | :header-cell-style="{ 'text-align': 'center', 'background-color': 'rgba(9, 40, 199, 0.5)', 'borderColor': '#324e75' }" |
| | | :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }" |
| | | @cell-click="rowClick" |
| | | > |
| | | <el-table-column |
| | | :show-overflow-tooltip="true" |
| | | prop="name" |
| | | label="点位名称" |
| | | min-width="35%" |
| | | ></el-table-column> |
| | | <el-table-column |
| | | :show-overflow-tooltip="true" |
| | | prop="pTZTypeText" |
| | | label="点位类型" |
| | | min-width="35%" |
| | | ></el-table-column> |
| | | <el-table-column |
| | | :show-overflow-tooltip="true" |
| | | prop="status" |
| | | label="状态" |
| | | min-width="30%" |
| | | > |
| | | :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }" @cell-click="rowClick"> |
| | | <el-table-column :show-overflow-tooltip="true" prop="name" label="点位名称" |
| | | min-width="35%"></el-table-column> |
| | | <el-table-column :show-overflow-tooltip="true" prop="pTZTypeText" label="点位类型" |
| | | min-width="35%"></el-table-column> |
| | | <el-table-column :show-overflow-tooltip="true" prop="status" label="状态" min-width="30%"> |
| | | <template slot-scope="scope"> |
| | | <div |
| | | class="state-box" |
| | | :class="{ online: scope.row.status == '1' }" |
| | | ></div> |
| | | <div class="state-box" :class="{ online: scope.row.status == '1' }"></div> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | </div> |
| | | <div class="pages"> |
| | | <el-pagination |
| | | background |
| | | layout="prev, pager, next" |
| | | :page-size="pagesize" |
| | | :page-count="pagesCount" |
| | | :current-page="currentPage" |
| | | pager-count="5" |
| | | @current-change="handleCurrentChange" |
| | | ></el-pagination> |
| | | <el-pagination background layout="prev, pager, next" :page-size="pagesize" |
| | | :page-count="pagesCount" :current-page="currentPage" pager-count="5" |
| | | @current-change="handleCurrentChange"></el-pagination> |
| | | </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> |
| | | |
| | | <el-dialog |
| | | :title="dialogTitle" |
| | | :modal="false" |
| | | :visible.sync="dialogVisible" |
| | | :before-close="dialogBeforeClose" |
| | | :close-on-click-modal="true" |
| | | class="car-video-box" |
| | | > |
| | | <video |
| | | id="videoElement" |
| | | autoplay |
| | | controls |
| | | width="100%" |
| | | height="100%" |
| | | 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 id="videoElement" autoplay controls width="100%" height="100%" style="object-fit: fill"></video> |
| | | </el-dialog> |
| | | <el-dialog |
| | | :title="drawDialogTitle" |
| | | :modal="false" |
| | | :visible.sync="drawDialogVisible" |
| | | :before-close="drawDialogBeforeClose" |
| | | :close-on-click-modal="true" |
| | | class="video-draw-box" |
| | | > |
| | | <el-dialog :title="drawDialogTitle" :modal="false" :visible.sync="drawDialogVisible" |
| | | :before-close="drawDialogBeforeClose" :close-on-click-modal="true" class="video-draw-box"> |
| | | <input type="text" v-model="drawName" placeholder="请输入绘制线或面的名称" /> |
| | | <button @click="saveDrawInfo">保存</button> |
| | | </el-dialog> |
| | |
| | | this.searchTreeData = [] |
| | | getSearchTreeDevices({ |
| | | // 内网 |
| | | // deviceId: '36110000002009999000', |
| | | deviceId: '36110000002009999000', |
| | | // 外网 |
| | | deviceId: '34020000002000000003', |
| | | // deviceId: '34020000002000000003', |
| | | parentId: '361102', |
| | | deptId: this.userInfo.dept_id, |
| | | name: this.searchValue.trim() |
| | |
| | | |
| | | await getTreeDevices({ |
| | | // 内网 |
| | | // deviceId: '36110000002009999000', |
| | | deviceId: '36110000002009999000', |
| | | // 外网 |
| | | deviceId: '34020000002000000003', |
| | | // deviceId: '34020000002000000003', |
| | | parentId, |
| | | deptId: this.userInfo.dept_id, |
| | | type, |
| | |
| | | border-radius: 10px; |
| | | overflow-y: auto; |
| | | |
| | | & > div { |
| | | &>div { |
| | | height: 100%; |
| | | padding: 0 10px; |
| | | line-height: 36px; |
| | |
| | | .list-show { |
| | | flex: 1; |
| | | |
| | | & > div { |
| | | &>div { |
| | | height: 100%; |
| | | display: flex; |
| | | flex-direction: column; |
| | |
| | | border-radius: 10px; |
| | | overflow: hidden; |
| | | |
| | | & > div { |
| | | &>div { |
| | | height: 100%; |
| | | overflow-y: auto; |
| | | |