| | |
|---|
| | | * @Author: shuishen 1109946754@qq.com |
|---|
| | | * @Date: 2022-08-18 16:18:17 |
|---|
| | | * @LastEditors: shuishen 1109946754@qq.com |
|---|
| | | * @LastEditTime: 2023-08-31 15:57:50 |
|---|
| | | * @LastEditTime: 2025-01-18 16:36:46 |
|---|
| | | * @FilePath: \srs-police-affairs\src\views\police\index.vue |
|---|
| | | * @Description: 辖区管理 |
|---|
| | | * |
|---|
| | |
|---|
| | | --> |
|---|
| | | |
|---|
| | | <template> |
|---|
| | | <div class="police-page container"> |
|---|
| | | <div v-show="boxShow" class="container-content"> |
|---|
| | | <el-main v-loading="equimentLoading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" |
|---|
| | | element-loading-background="rgba(0, 0, 0, 0.5)" style="overflow: hidden;padding: 0px;"> |
|---|
| | | <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> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <div class="list-show" v-if="!detailFlag"> |
|---|
| | | <div class="search-box"> |
|---|
| | | <span style="display: inline-block; white-space: nowrap;">资源名称：</span> |
|---|
| | | <el-input size="small" placeholder="请输入…" v-model="searchValue" @change="searchChange" |
|---|
| | | clearable></el-input> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <div class="list" ref="tableBox"> |
|---|
| | | <el-table :data="equimentTableData" |
|---|
| | | :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', borderColor: '#324e75' }" |
|---|
| | | :cell-style="{ 'text-align': 'center', borderColor: '#324e75', cursor: 'default' }" |
|---|
| | | :height="currentTableHeight"> |
|---|
| | | <el-table-column prop="newName" :show-overflow-tooltip="true" label="名称" |
|---|
| | | :min-width="typeValue == 0 || typeValue == 2 ? '56%' : '68%'"></el-table-column> |
|---|
| | | <el-table-column prop="status" label="状态" |
|---|
| | | :min-width="typeValue == 0 || typeValue == 2 ? '14%' : '14%'"> |
|---|
| | | <template slot-scope="scope"> |
|---|
| | | <div class="state-box" :class="{ online: scope.row.status == '1' }"></div> |
|---|
| | | </template> |
|---|
| | | </el-table-column> |
|---|
| | | <div slot="empty" style="text-align: center;">{{ emptyText }}</div> |
|---|
| | | <el-table-column label="操作" align="center" |
|---|
| | | :min-width="typeValue == 0 || typeValue == 2 || typeValue == 3 ? '30%' : '18%'"> |
|---|
| | | <template slot-scope="scope"> |
|---|
| | | <el-button :disabled="whetherPosition(scope.row)" @click="rowClick(scope.row)" |
|---|
| | | type="text" size="small" title="定位"> |
|---|
| | | <i class="el-icon-location" :style="{ color: positionColor(scope.row) }"></i> |
|---|
| | | </el-button> |
|---|
| | | <el-button v-show="navType != 1" @click="equipmentTrack(scope.row)" type="text" |
|---|
| | | size="small" title="轨迹"> |
|---|
| | | <i class="el-icon-police-track"></i> |
|---|
| | | </el-button> |
|---|
| | | <el-button v-show="navType != 0 && navType != 2 && navType != 3" |
|---|
| | | @click="play(scope.row)" type="text" size="small" title="播放视频"> |
|---|
| | | <i class="el-icon-video-play"></i> |
|---|
| | | </el-button> |
|---|
| | | </template> |
|---|
| | | </el-table-column> |
|---|
| | | </el-table> |
|---|
| | | |
|---|
| | | <div class="pages all-pagination-sty" ref="tablePagination" style="padding-top:-15px"> |
|---|
| | | <el-pagination background layout="prev, pager, next" :page-size="equimentPage.pageSize" |
|---|
| | | :total="equimentPage.total" :pager-count="4" :current-page="equimentPage.currentPage" |
|---|
| | | @current-change="handleCurrentChange"></el-pagination> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </el-main> |
|---|
| | | |
|---|
| | | <div class="track-box" v-show="detailFlag"> |
|---|
| | | <div class="track-box-info"> |
|---|
| | | <div class="back-btn" @click="goBack" title="轨迹">详细资料及轨迹查询</div> |
|---|
| | | <ul> |
|---|
| | | <li> |
|---|
| | | <div>通道编号：</div> |
|---|
| | | <div>{{ currentSelectEquipment.channelId ? currentSelectEquipment.channelId : '' }}</div> |
|---|
| | | </li> |
|---|
| | | |
|---|
| | | <li> |
|---|
| | | <div>设备编号：</div> |
|---|
| | | <div>{{ currentSelectEquipment.deviceId ? currentSelectEquipment.deviceId : '' }}</div> |
|---|
| | | </li> |
|---|
| | | |
|---|
| | | <li> |
|---|
| | | <div>通道名称：</div> |
|---|
| | | <div>{{ currentSelectEquipment.name ? currentSelectEquipment.name : '' }}</div> |
|---|
| | | </li> |
|---|
| | | |
|---|
| | | <li> |
|---|
| | | <div>状态：</div> |
|---|
| | | <div> |
|---|
| | | {{ |
|---|
| | | 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> |
|---|
| | | </div> |
|---|
| | | </li> |
|---|
| | | |
|---|
| | | <li> |
|---|
| | | <el-button type="text" @click="lookTrack">查看轨迹</el-button> |
|---|
| | | </li> |
|---|
| | | </ul> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="police-page container"> |
|---|
| | | <div v-show="boxShow" class="container-content"> |
|---|
| | | <el-main v-loading="equimentLoading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" |
|---|
| | | element-loading-background="rgba(0, 0, 0, 0.5)" style="overflow: hidden;padding: 0px;"> |
|---|
| | | <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> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <map-search-box></map-search-box> |
|---|
| | | <div class="list-show" v-if="!detailFlag"> |
|---|
| | | <div class="search-box"> |
|---|
| | | <span style="display: inline-block; white-space: nowrap;">资源名称：</span> |
|---|
| | | <el-input size="small" placeholder="请输入…" v-model="searchValue" @change="searchChange" clearable></el-input> |
|---|
| | | </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 class="list" ref="tableBox"> |
|---|
| | | <el-table :data="equimentTableData" |
|---|
| | | :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', borderColor: '#324e75' }" |
|---|
| | | :cell-style="{ 'text-align': 'center', borderColor: '#324e75', cursor: 'default' }" |
|---|
| | | :height="currentTableHeight"> |
|---|
| | | <el-table-column prop="newName" :show-overflow-tooltip="true" label="名称" |
|---|
| | | :min-width="typeValue == 0 || typeValue == 2 ? '56%' : '68%'"></el-table-column> |
|---|
| | | <el-table-column prop="status" label="状态" :min-width="typeValue == 0 || typeValue == 2 ? '14%' : '14%'"> |
|---|
| | | <template slot-scope="scope"> |
|---|
| | | <div class="state-box" :class="{ online: scope.row.status == '1' }"></div> |
|---|
| | | </template> |
|---|
| | | </el-table-column> |
|---|
| | | <div slot="empty" style="text-align: center;">{{ emptyText }}</div> |
|---|
| | | <el-table-column label="操作" align="center" |
|---|
| | | :min-width="typeValue == 0 || typeValue == 2 || typeValue == 3 ? '30%' : '18%'"> |
|---|
| | | <template slot-scope="scope"> |
|---|
| | | <el-button :disabled="whetherPosition(scope.row)" @click="rowClick(scope.row)" type="text" |
|---|
| | | size="small" title="定位"> |
|---|
| | | <i class="el-icon-location" :style="{ color: positionColor(scope.row) }"></i> |
|---|
| | | </el-button> |
|---|
| | | <el-button v-show="navType != 1" @click="equipmentTrack(scope.row)" type="text" size="small" |
|---|
| | | title="轨迹"> |
|---|
| | | <i class="el-icon-police-track"></i> |
|---|
| | | </el-button> |
|---|
| | | <el-button v-show="navType != 0 && navType != 2 && navType != 3" @click="play(scope.row)" type="text" |
|---|
| | | size="small" title="播放视频"> |
|---|
| | | <i class="el-icon-video-play"></i> |
|---|
| | | </el-button> |
|---|
| | | </template> |
|---|
| | | </el-table-column> |
|---|
| | | </el-table> |
|---|
| | | |
|---|
| | | <div class="pages all-pagination-sty" ref="tablePagination" style="padding-top:-15px"> |
|---|
| | | <el-pagination background layout="prev, pager, next" :page-size="equimentPage.pageSize" |
|---|
| | | :total="equimentPage.total" :pager-count="4" :current-page="equimentPage.currentPage" |
|---|
| | | @current-change="handleCurrentChange"></el-pagination> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </el-main> |
|---|
| | | |
|---|
| | | <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" :before-close="dialogBeforeClose" :modal="true" |
|---|
| | | :modal-append-to-body="false" :close-on-click-modal="false" class="car-video-box"> |
|---|
| | | <video-loading v-show="videoPlayShow"></video-loading> |
|---|
| | | <div class="track-box" v-show="detailFlag"> |
|---|
| | | <div class="track-box-info"> |
|---|
| | | <div class="back-btn" @click="goBack" title="轨迹">详细资料及轨迹查询</div> |
|---|
| | | <ul> |
|---|
| | | <li> |
|---|
| | | <div>通道编号：</div> |
|---|
| | | <div>{{ currentSelectEquipment.channelId ? currentSelectEquipment.channelId : '' }}</div> |
|---|
| | | </li> |
|---|
| | | |
|---|
| | | <video autoplay controls width="100%" height="100%" ref="videoElement" id="videoElement" |
|---|
| | | style="object-fit: fill"></video> |
|---|
| | | </el-dialog> |
|---|
| | | <policeCarDetailDialog ref="policeCarDetailDialog"/> |
|---|
| | | <talkEquipmentDetailDialog ref="talkEquipmentDetailDialog"/> |
|---|
| | | <li> |
|---|
| | | <div>设备编号：</div> |
|---|
| | | <div>{{ currentSelectEquipment.deviceId ? currentSelectEquipment.deviceId : '' }}</div> |
|---|
| | | </li> |
|---|
| | | |
|---|
| | | <li> |
|---|
| | | <div>通道名称：</div> |
|---|
| | | <div>{{ currentSelectEquipment.name ? currentSelectEquipment.name : '' }}</div> |
|---|
| | | </li> |
|---|
| | | |
|---|
| | | <li> |
|---|
| | | <div>状态：</div> |
|---|
| | | <div> |
|---|
| | | {{ |
|---|
| | | 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> |
|---|
| | | </div> |
|---|
| | | </li> |
|---|
| | | |
|---|
| | | <li> |
|---|
| | | <el-button type="text" @click="lookTrack">查看轨迹</el-button> |
|---|
| | | </li> |
|---|
| | | </ul> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <map-search-box></map-search-box> |
|---|
| | | |
|---|
| | | <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> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" :before-close="dialogBeforeClose" :modal="true" |
|---|
| | | :modal-append-to-body="false" :close-on-click-modal="false" class="car-video-box"> |
|---|
| | | <video-loading v-show="videoPlayShow"></video-loading> |
|---|
| | | |
|---|
| | | <video autoplay controls width="100%" height="100%" ref="videoElement" id="videoElement" |
|---|
| | | style="object-fit: fill"></video> |
|---|
| | | </el-dialog> |
|---|
| | | <policeCarDetailDialog ref="policeCarDetailDialog" /> |
|---|
| | | <talkEquipmentDetailDialog ref="talkEquipmentDetailDialog" /> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | |
|---|
| | | |
|---|
| | | |
|---|
| | | export default { |
|---|
| | | components:{ |
|---|
| | | policeCarDetailDialog, |
|---|
| | | talkEquipmentDetailDialog |
|---|
| | | }, |
|---|
| | | inject: ['userInfo'], |
|---|
| | | components: { |
|---|
| | | policeCarDetailDialog, |
|---|
| | | talkEquipmentDetailDialog |
|---|
| | | }, |
|---|
| | | inject: ['userInfo'], |
|---|
| | | |
|---|
| | | data () { |
|---|
| | | return { |
|---|
| | | emptyText: '', |
|---|
| | | navType: 1, |
|---|
| | | equimentLoading: false, |
|---|
| | | dialogTitle: '', |
|---|
| | | dialogVisible: false, |
|---|
| | | searchValue: '', |
|---|
| | | currentTableHeight: 0, |
|---|
| | | detailFlag: false, |
|---|
| | | trackTime: [], |
|---|
| | | options: [ |
|---|
| | | { |
|---|
| | | value: '0', |
|---|
| | | label: '警车' |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | value: '1', |
|---|
| | | label: '摄像头' |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | value: '2', |
|---|
| | | label: '手台' |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | value: '3', |
|---|
| | | label: '执法记录仪' |
|---|
| | | } |
|---|
| | | // , { |
|---|
| | | // value: '3', |
|---|
| | | // label: '电台' |
|---|
| | | // }, { |
|---|
| | | // value: '4', |
|---|
| | | // label: '执法记录仪' |
|---|
| | | // } |
|---|
| | | ], |
|---|
| | | typeValue: '1', |
|---|
| | | boxShow: true, |
|---|
| | | searchExtensivelyValue: '', |
|---|
| | | searchExtensivelyValBoxShow: false, |
|---|
| | | searchExtensivelyArray: [], |
|---|
| | | flvPlayer: null, |
|---|
| | | |
|---|
| | | equimentTableData: [], |
|---|
| | | equimentPage: { |
|---|
| | | total: 0, |
|---|
| | | pageSize: 22, |
|---|
| | | count: 0, |
|---|
| | | currentPage: 1 |
|---|
| | | }, |
|---|
| | | |
|---|
| | | currentSelectEquipment: {}, |
|---|
| | | |
|---|
| | | videoPlayShow: false |
|---|
| | | data () { |
|---|
| | | return { |
|---|
| | | emptyText: '', |
|---|
| | | navType: 1, |
|---|
| | | equimentLoading: false, |
|---|
| | | dialogTitle: '', |
|---|
| | | dialogVisible: false, |
|---|
| | | searchValue: '', |
|---|
| | | currentTableHeight: 0, |
|---|
| | | detailFlag: false, |
|---|
| | | trackTime: [], |
|---|
| | | options: [ |
|---|
| | | { |
|---|
| | | value: '0', |
|---|
| | | label: '警车' |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | value: '1', |
|---|
| | | label: '摄像头' |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | value: '2', |
|---|
| | | label: '手台' |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | value: '3', |
|---|
| | | label: '执法记录仪' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // , { |
|---|
| | | // value: '3', |
|---|
| | | // label: '电台' |
|---|
| | | // }, { |
|---|
| | | // value: '4', |
|---|
| | | // label: '执法记录仪' |
|---|
| | | // } |
|---|
| | | ], |
|---|
| | | typeValue: '1', |
|---|
| | | boxShow: true, |
|---|
| | | searchExtensivelyValue: '', |
|---|
| | | searchExtensivelyValBoxShow: false, |
|---|
| | | searchExtensivelyArray: [], |
|---|
| | | flvPlayer: null, |
|---|
| | | |
|---|
| | | created () { |
|---|
| | | window.addEventListener('resize', this.setTableHeight) |
|---|
| | | equimentTableData: [], |
|---|
| | | equimentPage: { |
|---|
| | | total: 0, |
|---|
| | | pageSize: 22, |
|---|
| | | count: 0, |
|---|
| | | currentPage: 1 |
|---|
| | | }, |
|---|
| | | |
|---|
| | | this.$nextTick(() => { |
|---|
| | | initMapPosition() |
|---|
| | | this.$EventBus.$emit('closeMxTileset') |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | currentSelectEquipment: {}, |
|---|
| | | |
|---|
| | | computed: { |
|---|
| | | whetherPosition () { |
|---|
| | | return (row) => { |
|---|
| | | return !(row.latitude && row.latitude != 0 && row.longitude && row.longitude != 0) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | |
|---|
| | | positionColor () { |
|---|
| | | return (row) => { |
|---|
| | | if (row.latitude && row.latitude != 0 && row.longitude && row.longitude != 0) { |
|---|
| | | return "#1AFA29" |
|---|
| | | } else { |
|---|
| | | return "#ccc" |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | |
|---|
| | | mounted () { |
|---|
| | | this.$parent.$parent.resize('400px', true) |
|---|
| | | |
|---|
| | | this.navClick() |
|---|
| | | |
|---|
| | | this.$nextTick(() => { |
|---|
| | | this.$EventBus.$emit('closeMxTileset') |
|---|
| | | tc = new global.DC.TrackController(global.viewer) |
|---|
| | | this.setTableHeight() |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | methods: { |
|---|
| | | // 搜索框改变事件 |
|---|
| | | searchChange () { |
|---|
| | | this.detailFlag = false |
|---|
| | | |
|---|
| | | this.$EventBus.$emit('mapClearLayer', { |
|---|
| | | layerName: 'polylineLayer', |
|---|
| | | type: 'VectorLayer' |
|---|
| | | }) |
|---|
| | | |
|---|
| | | this.equimentPage.currentPage = 1 |
|---|
| | | this.equimentPage.total = 0 |
|---|
| | | // this.equimentTableData = [] |
|---|
| | | |
|---|
| | | this.$EventBus.$emit('mapClearLayer', { |
|---|
| | | layerName: 'carLayers', |
|---|
| | | type: 'VectorLayer' |
|---|
| | | }) |
|---|
| | | |
|---|
| | | this.$EventBus.$emit('mapClearLayer', { |
|---|
| | | layerName: 'policeMonitoringLayers', |
|---|
| | | type: 'VectorLayer' |
|---|
| | | }) |
|---|
| | | |
|---|
| | | // 查询分页数据 |
|---|
| | | this.getEquipmentPaging({ type: this.navType }) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | // 设备分页处理 |
|---|
| | | handleCurrentChange (currentPage) { |
|---|
| | | this.equimentPage.currentPage = currentPage |
|---|
| | | |
|---|
| | | this.getEquipmentPaging({ type: this.navType }) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | // 获取设备分页数据 |
|---|
| | | getEquipmentPaging (params) { |
|---|
| | | this.equimentTableData = [] |
|---|
| | | this.equimentLoading = true |
|---|
| | | this.emptyText = "" |
|---|
| | | |
|---|
| | | clearInterval(policeTimeOut) |
|---|
| | | |
|---|
| | | policeTimeOut = setInterval(() => { |
|---|
| | | this.getEquipmentPaging(params) |
|---|
| | | }, 30000) |
|---|
| | | |
|---|
| | | this.$EventBus.$emit('mapClearLayer', { |
|---|
| | | layerName: 'carLayers', |
|---|
| | | type: 'VectorLayer' |
|---|
| | | }) |
|---|
| | | |
|---|
| | | this.$EventBus.$emit('mapClearLayer', { |
|---|
| | | layerName: 'policeMonitoringLayers', |
|---|
| | | type: 'VectorLayer' |
|---|
| | | }) |
|---|
| | | getEquipmentPaging({ page: this.equimentPage.currentPage, count: this.equimentPage.pageSize, ...params, query: this.searchValue, dwbh: this.userInfo.dept_id }).then(res => { |
|---|
| | | var total = res.data.data.total |
|---|
| | | if (total == 0) { |
|---|
| | | if (this.navType == 0) { |
|---|
| | | this.emptyText = "暂无警车数据" |
|---|
| | | } |
|---|
| | | if (this.navType == 1) { |
|---|
| | | this.emptyText = "暂无摄像头数据" |
|---|
| | | } |
|---|
| | | if (this.navType == 2) { |
|---|
| | | this.emptyText = "暂无手台数据" |
|---|
| | | } |
|---|
| | | if (this.navType == 3) { |
|---|
| | | this.emptyText = "暂无执法记录仪数据" |
|---|
| | | } |
|---|
| | | this.equimentLoading = false |
|---|
| | | |
|---|
| | | } |
|---|
| | | if (res.data.data.list.length > 0) { |
|---|
| | | this.equimentTableData = res.data.data.list.map(item => { |
|---|
| | | let newName = '' |
|---|
| | | if (params.type == 0) { |
|---|
| | | newName = item.name.replace('上饶-', '') |
|---|
| | | } else if (params.type == 2 || params.type == 3) { |
|---|
| | | newName = item.name |
|---|
| | | } else { |
|---|
| | | if (item.name.charAt(7) == '-') { |
|---|
| | | newName = item.name.slice(8) |
|---|
| | | } else { |
|---|
| | | newName = item.name.slice(7) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | return { ...item, newName: newName, lng: item.longitude, lat: item.latitude, alt: 1 } |
|---|
| | | }) |
|---|
| | | |
|---|
| | | this.equimentTableData.forEach(item => { |
|---|
| | | if (this.navType == 0) { |
|---|
| | | this.$EventBus.$emit('layerPointAdd', { |
|---|
| | | layerName: 'carLayers', |
|---|
| | | type: 'billboard', |
|---|
| | | params: { |
|---|
| | | ...item, |
|---|
| | | url: '/img/icon/car.png', |
|---|
| | | setStyle: { |
|---|
| | | disableDepthTestDistance: Number.POSITIVE_INFINITY |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | incident: this.siteClickCar, |
|---|
| | | mouseOverIncident: this.pointMouseOver, |
|---|
| | | mouseOutIncident: this.pointMouseOut, |
|---|
| | | }) |
|---|
| | | } else if (this.navType == 1) { |
|---|
| | | this.$EventBus.$emit('layerPointAdd', { |
|---|
| | | layerName: 'policeMonitoringLayers', |
|---|
| | | type: 'billboard', |
|---|
| | | params: { |
|---|
| | | ...item, |
|---|
| | | url: item.status == 1 ? '/img/icon/video.png' : '/img/icon/video-off.png', |
|---|
| | | setStyle: { |
|---|
| | | disableDepthTestDistance: Number.POSITIVE_INFINITY |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | incident: this.siteClick, |
|---|
| | | mouseOverIncident: this.pointMouseOver, |
|---|
| | | mouseOutIncident: this.pointMouseOut, |
|---|
| | | }) |
|---|
| | | } else if (this.navType == 2) { |
|---|
| | | // let position = global.DC.CoordTransform.BD09ToGCJ02(item.lng, item.lat) |
|---|
| | | |
|---|
| | | // item.lng = global.DC.CoordTransform.GCJ02ToWGS84(position[0], position[1])[0] |
|---|
| | | // item.lat = global.DC.CoordTransform.GCJ02ToWGS84(position[0], position[1])[1] |
|---|
| | | |
|---|
| | | this.$EventBus.$emit('layerPointAdd', { |
|---|
| | | layerName: 'policeMonitoringLayers', |
|---|
| | | type: 'billboard', |
|---|
| | | params: { |
|---|
| | | ...item, |
|---|
| | | url: '/img/icon/p-talk.png', |
|---|
| | | setStyle: { |
|---|
| | | disableDepthTestDistance: Number.POSITIVE_INFINITY |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | incident: this.siteClickTalk, |
|---|
| | | |
|---|
| | | mouseOverIncident: this.pointMouseOver, |
|---|
| | | mouseOutIncident: this.pointMouseOut, |
|---|
| | | }) |
|---|
| | | } else if (this.navType == 3) { |
|---|
| | | this.$EventBus.$emit('layerPointAdd', { |
|---|
| | | layerName: 'policeMonitoringLayers', |
|---|
| | | type: 'billboard', |
|---|
| | | params: { |
|---|
| | | ...item, |
|---|
| | | url: '/img/icon/p-b-camera.png', |
|---|
| | | setStyle: { |
|---|
| | | disableDepthTestDistance: Number.POSITIVE_INFINITY |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | incident: this.siteClickLaw, |
|---|
| | | |
|---|
| | | mouseOverIncident: this.pointMouseOver, |
|---|
| | | mouseOutIncident: this.pointMouseOut, |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | |
|---|
| | | |
|---|
| | | this.equimentPage.total = res.data.data.total |
|---|
| | | this.equimentLoading = false |
|---|
| | | } else { |
|---|
| | | this.equimentTableData = [] |
|---|
| | | this.equimentPage.total = 0 |
|---|
| | | } |
|---|
| | | |
|---|
| | | this.equimentLoading = false |
|---|
| | | }).catch(res => { |
|---|
| | | setTimeout(() => { |
|---|
| | | if (this.navType == 0) { |
|---|
| | | this.emptyText = "暂无警车数据" |
|---|
| | | } |
|---|
| | | if (this.navType == 1) { |
|---|
| | | this.emptyText = "暂无摄像头数据" |
|---|
| | | } |
|---|
| | | if (this.navType == 2) { |
|---|
| | | this.emptyText = "暂无手台数据" |
|---|
| | | } |
|---|
| | | if (this.navType == 3) { |
|---|
| | | this.emptyText = "暂无执法记录仪数据" |
|---|
| | | } |
|---|
| | | this.equimentLoading = false |
|---|
| | | }, 500) |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | // 鼠标移入图标事件 |
|---|
| | | pointMouseOver (e) { |
|---|
| | | this.$store.commit('SET_VIDEOLISTPOPUP', true) |
|---|
| | | |
|---|
| | | this.$store.commit('SET_VIDEOLISTPOPUPDATA', { |
|---|
| | | ...e.overlay.attrParams, |
|---|
| | | name: e.overlay.attrParams.newName |
|---|
| | | }) |
|---|
| | | |
|---|
| | | var popup = new global.DC.DivForms(global.viewer, { |
|---|
| | | domId: 'videoListPopup', |
|---|
| | | position: [ |
|---|
| | | global.DC.Transform.transformWGS84ToCartesian( |
|---|
| | | new global.DC.Position( |
|---|
| | | Number(e.overlay.attrParams.lng), |
|---|
| | | Number(e.overlay.attrParams.lat), |
|---|
| | | 0 |
|---|
| | | ) |
|---|
| | | ) |
|---|
| | | ] |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * @description: 鼠标移出事件 |
|---|
| | | * @param {*} e |
|---|
| | | * @return {*} |
|---|
| | | */ |
|---|
| | | pointMouseOut (e) { |
|---|
| | | this.$store.commit('SET_VIDEOLISTPOPUP', false) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | // 类别切换 |
|---|
| | | navClick (type) { |
|---|
| | | if (type && type == this.navType) return |
|---|
| | | |
|---|
| | | this.$store.commit('SET_VIDEOROWCLICKPOPUP', false) |
|---|
| | | this.$store.commit('SET_VIDEOLISTPOPUP', false) |
|---|
| | | |
|---|
| | | if (type) { |
|---|
| | | this.navType = type |
|---|
| | | } |
|---|
| | | this.searchValue = '' |
|---|
| | | |
|---|
| | | this.equimentPage.currentPage = 1 |
|---|
| | | this.equimentPage.total = 0 |
|---|
| | | |
|---|
| | | this.getEquipmentPaging({ type: this.navType }) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | // 表格行点击查看定位 |
|---|
| | | rowClick (row) { |
|---|
| | | if (row.lng == 0 || row.lat == 0) { |
|---|
| | | this.$message.error('暂无位置信息！') |
|---|
| | | |
|---|
| | | return |
|---|
| | | } |
|---|
| | | |
|---|
| | | this.$EventBus.$emit('toPosition', { |
|---|
| | | layerName: 'carLayers', |
|---|
| | | siteJd: row.lng, |
|---|
| | | siteWd: row.lat |
|---|
| | | }) |
|---|
| | | |
|---|
| | | this.$store.commit('SET_VIDEOROWCLICKPOPUP', true) |
|---|
| | | |
|---|
| | | this.$store.commit('SET_VIDEOROWCLICKPOPUPDATA', { |
|---|
| | | ...row, |
|---|
| | | name: row.newName |
|---|
| | | }) |
|---|
| | | |
|---|
| | | var popup = new global.DC.DivForms(global.viewer, { |
|---|
| | | domId: 'videoRowClickPopup', |
|---|
| | | position: [ |
|---|
| | | global.DC.Transform.transformWGS84ToCartesian( |
|---|
| | | new global.DC.Position( |
|---|
| | | Number(row.lng), |
|---|
| | | Number(row.lat), |
|---|
| | | 0 |
|---|
| | | ) |
|---|
| | | ) |
|---|
| | | ] |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | // 表格行点击查看轨迹 |
|---|
| | | equipmentTrack (row) { |
|---|
| | | this.detailFlag = true |
|---|
| | | |
|---|
| | | this.currentSelectEquipment = row |
|---|
| | | }, |
|---|
| | | |
|---|
| | | async play (row) { |
|---|
| | | this.videoPlayShow = true |
|---|
| | | |
|---|
| | | if (this.flvPlayer != null) { |
|---|
| | | this.flvPlayer.pause() |
|---|
| | | this.flvPlayer.unload() |
|---|
| | | this.flvPlayer.detachMediaElement() |
|---|
| | | this.flvPlayer.destroy() |
|---|
| | | this.flvPlayer = null |
|---|
| | | } |
|---|
| | | |
|---|
| | | this.dialogTitle = row.name |
|---|
| | | this.dialogVisible = true |
|---|
| | | |
|---|
| | | let flvUrl = '' |
|---|
| | | |
|---|
| | | await this.getDevices(row.channelId).then(res => { |
|---|
| | | flvUrl = res |
|---|
| | | }) |
|---|
| | | |
|---|
| | | if (typeof flvUrl === 'object') { |
|---|
| | | this.$message.error(flvUrl.msg) |
|---|
| | | this.dialogVisible = false |
|---|
| | | return |
|---|
| | | } |
|---|
| | | |
|---|
| | | if (flvjs.isSupported()) { |
|---|
| | | this.$nextTick(() => { |
|---|
| | | var videoElement = document.getElementById('videoElement') |
|---|
| | | this.flvPlayer = flvjs.createPlayer({ |
|---|
| | | type: 'flv', |
|---|
| | | isLive: true, |
|---|
| | | hasAudio: false, |
|---|
| | | url: flvUrl |
|---|
| | | }) |
|---|
| | | this.flvPlayer.attachMediaElement(videoElement) |
|---|
| | | this.flvPlayer.load() |
|---|
| | | this.videoPlayShow = false |
|---|
| | | this.flvPlayer.play() |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | |
|---|
| | | async getDevices (channelId) { |
|---|
| | | let flvAddress = '' |
|---|
| | | await getDevices(channelId).then(res => { |
|---|
| | | if ('data' in res.data) { |
|---|
| | | flvAddress = res.data.data.flv |
|---|
| | | } else { |
|---|
| | | flvAddress = res.data |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | return flvAddress |
|---|
| | | }, |
|---|
| | | |
|---|
| | | siteClick (e) { |
|---|
| | | |
|---|
| | | if(this.typeValue==1){ |
|---|
| | | this.play(e.overlay.attrParams) |
|---|
| | | } |
|---|
| | | |
|---|
| | | }, |
|---|
| | | // 点击查看执法记录仪信息 |
|---|
| | | siteClickLaw(e){ |
|---|
| | | // console.log(e) |
|---|
| | | }, |
|---|
| | | // 点击查看手台信息 |
|---|
| | | siteClickTalk(e){ |
|---|
| | | // console.log(e.overlay.attrParams,88888) |
|---|
| | | this.$refs.talkEquipmentDetailDialog.initOpen(e.overlay.attrParams.id) |
|---|
| | | }, |
|---|
| | | // 点击查看警车信息 |
|---|
| | | siteClickCar(e){ |
|---|
| | | // console.log(e) |
|---|
| | | this.$refs.policeCarDetailDialog.initOpen(e.overlay.attrParams.id) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | dialogBeforeClose () { |
|---|
| | | this.$refs.videoElement.pause() |
|---|
| | | this.dialogVisible = false |
|---|
| | | }, |
|---|
| | | |
|---|
| | | // 轨迹返回 |
|---|
| | | goBack () { |
|---|
| | | this.detailFlag = !this.detailFlag |
|---|
| | | this.trackTime = [] |
|---|
| | | |
|---|
| | | this.$EventBus.$emit('mapClearLayer', { |
|---|
| | | layerName: 'polylineLayer', |
|---|
| | | type: 'VectorLayer' |
|---|
| | | }) |
|---|
| | | |
|---|
| | | tc.pause() |
|---|
| | | |
|---|
| | | tc.removeTrack(track) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | // 查看轨迹 |
|---|
| | | async lookTrack () { |
|---|
| | | global.viewer.scene.globe.depthTestAgainstTerrain = false |
|---|
| | | |
|---|
| | | if (this.trackTime.length == 0) { |
|---|
| | | this.$message({ message: '请选择开始时间', duration: 2000 }) |
|---|
| | | return |
|---|
| | | } |
|---|
| | | const startTime = new Date(this.trackTime[0]) |
|---|
| | | const start = startTime.getFullYear() + '-' + this.disposeTime(startTime.getMonth() + 1) + '-' + this.disposeTime(startTime.getDate()) + ' ' + this.disposeTime(startTime.getHours()) + ':' + this.disposeTime(startTime.getMinutes()) + ':' + this.disposeTime(startTime.getSeconds()) |
|---|
| | | if (this.trackTime.length == 1) { |
|---|
| | | this.$message({ message: '请选择结束时间', duration: 2000 }) |
|---|
| | | return |
|---|
| | | } |
|---|
| | | const endTime = new Date(this.trackTime[1]) |
|---|
| | | const end = endTime.getFullYear() + '-' + this.disposeTime(endTime.getMonth() + 1) + '-' + this.disposeTime(endTime.getDate()) + ' ' + this.disposeTime(endTime.getHours()) + ':' + this.disposeTime(endTime.getMinutes()) + ':' + this.disposeTime(endTime.getSeconds()) |
|---|
| | | |
|---|
| | | this.$EventBus.$emit('mapClearLayer', { |
|---|
| | | layerName: 'polylineLayer', |
|---|
| | | type: 'VectorLayer' |
|---|
| | | }) |
|---|
| | | |
|---|
| | | let positionsArr = [] |
|---|
| | | await this.getHistoricalTrack({ start: start, end: end, channelId: this.currentSelectEquipment.channelId, type: this.navType }).then(res => { |
|---|
| | | positionsArr = res |
|---|
| | | }) |
|---|
| | | |
|---|
| | | if (positionsArr.length < 1) { |
|---|
| | | this.$message({ |
|---|
| | | message: '该设备暂无轨迹数据', |
|---|
| | | type: 'warning' |
|---|
| | | }) |
|---|
| | | |
|---|
| | | return |
|---|
| | | } |
|---|
| | | |
|---|
| | | let flag = positionsArr.every(item => item.longitude == positionsArr[0].longitude && item.latitude == positionsArr[0].latitude) |
|---|
| | | |
|---|
| | | if (flag) { |
|---|
| | | this.$message({ |
|---|
| | | message: '该设备暂无轨迹数据', |
|---|
| | | type: 'warning' |
|---|
| | | }) |
|---|
| | | |
|---|
| | | return |
|---|
| | | } |
|---|
| | | |
|---|
| | | let positionStr = '' |
|---|
| | | |
|---|
| | | positionsArr.forEach(item => { |
|---|
| | | positionStr = positionStr + item.longitude + ',' + item.latitude + ';' |
|---|
| | | }) |
|---|
| | | |
|---|
| | | this.$EventBus.$emit('layerPolylineAdd', { |
|---|
| | | layerName: 'polylineLayer', |
|---|
| | | positions: positionStr, |
|---|
| | | material: new global.DC.PolylineLightingTrailMaterialProperty({ |
|---|
| | | color: global.DC.Color.RED, |
|---|
| | | speed: 5.0 |
|---|
| | | }), |
|---|
| | | width: 6 |
|---|
| | | }) |
|---|
| | | |
|---|
| | | this.$EventBus.$emit('layerPointAdd', { |
|---|
| | | layerName: 'polylineLayer', |
|---|
| | | type: 'billboard', |
|---|
| | | params: { |
|---|
| | | lng: positionsArr[0].longitude, |
|---|
| | | lat: positionsArr[0].latitude, |
|---|
| | | alt: 1, |
|---|
| | | url: '/img/icon/orgin.png' |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | |
|---|
| | | this.$EventBus.$emit('layerPointAdd', { |
|---|
| | | layerName: 'polylineLayer', |
|---|
| | | type: 'billboard', |
|---|
| | | params: { |
|---|
| | | lng: positionsArr[positionsArr.length - 1].longitude, |
|---|
| | | lat: positionsArr[positionsArr.length - 1].latitude, |
|---|
| | | alt: 1, |
|---|
| | | url: '/img/icon/end.png' |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | |
|---|
| | | track = new global.DC.Track(positionStr, 5000, () => { |
|---|
| | | |
|---|
| | | }, { |
|---|
| | | headingOffset: -90 |
|---|
| | | }) |
|---|
| | | |
|---|
| | | track.setModel('/model/qiche.gltf', { |
|---|
| | | scale: 1 |
|---|
| | | }) |
|---|
| | | |
|---|
| | | tc.addTrack(track) |
|---|
| | | |
|---|
| | | this.$EventBus.$emit('toPosition', { |
|---|
| | | siteJd: positionsArr[0].longitude, |
|---|
| | | siteWd: positionsArr[0].latitude, |
|---|
| | | siteGd: 1000, |
|---|
| | | siteHeading: 0, |
|---|
| | | sitePitch: -90 |
|---|
| | | }) |
|---|
| | | |
|---|
| | | tc.play() |
|---|
| | | }, |
|---|
| | | |
|---|
| | | // 处理时间补零操作 |
|---|
| | | disposeTime (s) { |
|---|
| | | return s < 10 ? '0' + s : s |
|---|
| | | }, |
|---|
| | | |
|---|
| | | setTableHeight () { |
|---|
| | | this.currentTableHeight = this.$refs.tableBox.offsetHeight - this.$refs.tablePagination.offsetHeight |
|---|
| | | }, |
|---|
| | | |
|---|
| | | // 大小重置 |
|---|
| | | boxResize (val) { |
|---|
| | | this.boxShow = val |
|---|
| | | }, |
|---|
| | | |
|---|
| | | async getHistoricalTrack (params) { |
|---|
| | | let positionArr = [] |
|---|
| | | |
|---|
| | | await getHistoricalTrack(params).then(res => { |
|---|
| | | positionArr = res.data.data |
|---|
| | | }) |
|---|
| | | return positionArr |
|---|
| | | }, |
|---|
| | | |
|---|
| | | // 大搜 |
|---|
| | | getSearchExtensively (ak, region, query) { |
|---|
| | | getSearchExtensively(ak, region, query).then(res => { |
|---|
| | | this.searchExtensivelyArray = res.data.result |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | searchExtensivelyClick () { |
|---|
| | | this.getSearchExtensively('ebf48ecaa1fd436fa3d40c4600aa051f', '361100', this.searchExtensivelyValue) |
|---|
| | | this.searchExtensivelyValBoxShow = false |
|---|
| | | if (this.searchExtensivelyArray.length > 0) { |
|---|
| | | this.$EventBus.$emit('toPosition', { |
|---|
| | | siteJd: `${this.searchExtensivelyArray[0].location.lng}`, |
|---|
| | | siteWd: `${this.searchExtensivelyArray[0].location.lat}`, |
|---|
| | | siteGd: 200 |
|---|
| | | }) |
|---|
| | | this.searchExtensivelyValue = this.searchExtensivelyArray[0].name |
|---|
| | | this.$EventBus.$emit('mapClearLayer', { |
|---|
| | | layerName: 'searchLayer', |
|---|
| | | type: 'VectorLayer' |
|---|
| | | }) |
|---|
| | | this.$EventBus.$emit('layerPointAdd', { |
|---|
| | | layerName: 'searchLayer', |
|---|
| | | type: 'label', |
|---|
| | | params: { |
|---|
| | | lng: `${this.searchExtensivelyArray[0].location.lng}`, |
|---|
| | | lat: `${this.searchExtensivelyArray[0].location.lat}`, |
|---|
| | | alt: 1, |
|---|
| | | text: this.searchExtensivelyArray[0].name |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | |
|---|
| | | searchExtensivelyChange () { |
|---|
| | | if (this.searchExtensivelyValue == '') { |
|---|
| | | this.searchExtensivelyValBoxShow = false |
|---|
| | | this.isShowClearBtn = false |
|---|
| | | this.searchExtensivelyArray = [] |
|---|
| | | } else { |
|---|
| | | this.searchExtensivelyValBoxShow = true |
|---|
| | | this.isShowClearBtn = true |
|---|
| | | this.getSearchExtensively('ebf48ecaa1fd436fa3d40c4600aa051f', '361100', this.searchExtensivelyValue) |
|---|
| | | } |
|---|
| | | this.$EventBus.$emit('mapClearLayer', { |
|---|
| | | layerName: 'searchLayer', |
|---|
| | | type: 'VectorLayer' |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | searchExtensivelyVlaClick (item) { |
|---|
| | | this.searchExtensivelyValBoxShow = false |
|---|
| | | this.searchExtensivelyValue = item.name |
|---|
| | | this.$EventBus.$emit('toPosition', { |
|---|
| | | siteJd: `${item.location.lng}`, |
|---|
| | | siteWd: `${item.location.lat}`, |
|---|
| | | siteGd: 200 |
|---|
| | | }) |
|---|
| | | this.$EventBus.$emit('mapClearLayer', { |
|---|
| | | layerName: 'searchLayer', |
|---|
| | | type: 'VectorLayer' |
|---|
| | | }) |
|---|
| | | this.$EventBus.$emit('layerPointAdd', { |
|---|
| | | layerName: 'searchLayer', |
|---|
| | | type: 'label', |
|---|
| | | params: { |
|---|
| | | lng: `${item.location.lng}`, |
|---|
| | | lat: `${item.location.lat}`, |
|---|
| | | alt: 1, |
|---|
| | | text: item.name |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | this.$EventBus.$emit('layerPointAdd', { |
|---|
| | | layerName: 'searchLayer', |
|---|
| | | type: 'billboard', |
|---|
| | | params: { |
|---|
| | | lng: `${item.location.lng}`, |
|---|
| | | lat: `${item.location.lat}`, |
|---|
| | | alt: 1, |
|---|
| | | url: '/img/icon/location.png' |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | searchExtensivelyFocus () { |
|---|
| | | this.searchExtensivelyValBoxShow = true |
|---|
| | | this.getSearchExtensively('ebf48ecaa1fd436fa3d40c4600aa051f', '361100', this.searchExtensivelyValue) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | clearSearchValue () { |
|---|
| | | this.searchExtensivelyValue = '' |
|---|
| | | this.searchExtensivelyChange() |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | |
|---|
| | | destroyed () { |
|---|
| | | this.$store.commit('SET_VIDEOROWCLICKPOPUP', false) |
|---|
| | | this.$store.commit('SET_VIDEOLISTPOPUP', false) |
|---|
| | | |
|---|
| | | this.$EventBus.$emit('mapRemoveLayer', { |
|---|
| | | layerName: 'carLayers', |
|---|
| | | type: 'VectorLayer' |
|---|
| | | }) |
|---|
| | | |
|---|
| | | this.$EventBus.$emit('mapRemoveLayer', { |
|---|
| | | layerName: 'policeMonitoringLayers', |
|---|
| | | type: 'VectorLayer' |
|---|
| | | }) |
|---|
| | | |
|---|
| | | this.$EventBus.$emit('mapRemoveLayer', { |
|---|
| | | layerName: 'polylineLayer', |
|---|
| | | type: 'VectorLayer' |
|---|
| | | }) |
|---|
| | | |
|---|
| | | this.$EventBus.$emit('mapRemoveLayer', { |
|---|
| | | layerName: 'searchLayer', |
|---|
| | | type: 'VectorLayer' |
|---|
| | | }) |
|---|
| | | |
|---|
| | | if (tc && tc != null && tc != undefined) { |
|---|
| | | tc.pause() |
|---|
| | | |
|---|
| | | tc.removeTrack(track) |
|---|
| | | } |
|---|
| | | |
|---|
| | | clearInterval(policeTimeOut) |
|---|
| | | |
|---|
| | | window.removeEventListener('resize', this.setTableHeight) |
|---|
| | | |
|---|
| | | this.$parent.$parent.resize('0px') |
|---|
| | | videoPlayShow: false |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | |
|---|
| | | created () { |
|---|
| | | window.addEventListener('resize', this.setTableHeight) |
|---|
| | | |
|---|
| | | this.$nextTick(() => { |
|---|
| | | initMapPosition() |
|---|
| | | this.$EventBus.$emit('closeMxTileset') |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | computed: { |
|---|
| | | whetherPosition () { |
|---|
| | | return (row) => { |
|---|
| | | return !(row.latitude && row.latitude != 0 && row.longitude && row.longitude != 0) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | |
|---|
| | | positionColor () { |
|---|
| | | return (row) => { |
|---|
| | | if (row.latitude && row.latitude != 0 && row.longitude && row.longitude != 0) { |
|---|
| | | return "#1AFA29" |
|---|
| | | } else { |
|---|
| | | return "#ccc" |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | |
|---|
| | | mounted () { |
|---|
| | | this.$parent.$parent.resize('400px', true) |
|---|
| | | |
|---|
| | | this.navClick() |
|---|
| | | |
|---|
| | | this.$nextTick(() => { |
|---|
| | | this.$EventBus.$emit('closeMxTileset') |
|---|
| | | tc = new global.DC.TrackController(global.viewer) |
|---|
| | | this.setTableHeight() |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | methods: { |
|---|
| | | // 搜索框改变事件 |
|---|
| | | searchChange () { |
|---|
| | | this.detailFlag = false |
|---|
| | | |
|---|
| | | this.$EventBus.$emit('mapClearLayer', { |
|---|
| | | layerName: 'polylineLayer', |
|---|
| | | type: 'VectorLayer' |
|---|
| | | }) |
|---|
| | | |
|---|
| | | this.equimentPage.currentPage = 1 |
|---|
| | | this.equimentPage.total = 0 |
|---|
| | | // this.equimentTableData = [] |
|---|
| | | |
|---|
| | | this.$EventBus.$emit('mapClearLayer', { |
|---|
| | | layerName: 'carLayers', |
|---|
| | | type: 'VectorLayer' |
|---|
| | | }) |
|---|
| | | |
|---|
| | | this.$EventBus.$emit('mapClearLayer', { |
|---|
| | | layerName: 'policeMonitoringLayers', |
|---|
| | | type: 'VectorLayer' |
|---|
| | | }) |
|---|
| | | |
|---|
| | | // 查询分页数据 |
|---|
| | | this.getEquipmentPaging({ type: this.navType }, false) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | // 设备分页处理 |
|---|
| | | handleCurrentChange (currentPage) { |
|---|
| | | this.equimentPage.currentPage = currentPage |
|---|
| | | |
|---|
| | | this.getEquipmentPaging({ type: this.navType }, false) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | // 获取设备分页数据 |
|---|
| | | getEquipmentPaging (params, flag) { |
|---|
| | | this.equimentTableData = [] |
|---|
| | | this.equimentLoading = true |
|---|
| | | this.emptyText = "" |
|---|
| | | |
|---|
| | | clearInterval(policeTimeOut) |
|---|
| | | |
|---|
| | | policeTimeOut = setInterval(() => { |
|---|
| | | this.getEquipmentPaging(params, flag) |
|---|
| | | }, 30000) |
|---|
| | | |
|---|
| | | if (flag) { |
|---|
| | | this.$EventBus.$emit('mapClearLayer', { |
|---|
| | | layerName: 'carLayers', |
|---|
| | | type: 'VectorLayer' |
|---|
| | | }) |
|---|
| | | |
|---|
| | | this.$EventBus.$emit('mapClearLayer', { |
|---|
| | | layerName: 'policeMonitoringLayers', |
|---|
| | | type: 'VectorLayer' |
|---|
| | | }) |
|---|
| | | |
|---|
| | | getEquipmentPaging({ |
|---|
| | | page: this.equimentPage.currentPage, |
|---|
| | | count: 19999, |
|---|
| | | ...params, |
|---|
| | | query: this.searchValue, |
|---|
| | | dwbh: this.userInfo.dept_id |
|---|
| | | }).then(res => { |
|---|
| | | if (res.data.data.list.length > 0) { |
|---|
| | | let arrAll = res.data.data.list.map(item => { |
|---|
| | | let newName = '' |
|---|
| | | if (params.type == 0) { |
|---|
| | | newName = item.name.replace('上饶-', '') |
|---|
| | | } else if (params.type == 2 || params.type == 3) { |
|---|
| | | newName = item.name |
|---|
| | | } else { |
|---|
| | | if (item.name.charAt(7) == '-') { |
|---|
| | | newName = item.name.slice(8) |
|---|
| | | } else { |
|---|
| | | newName = item.name.slice(7) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | return { ...item, newName: newName, lng: item.longitude, lat: item.latitude, alt: 1 } |
|---|
| | | }) |
|---|
| | | |
|---|
| | | arrAll.forEach(item => { |
|---|
| | | if (this.navType == 0) { |
|---|
| | | this.$EventBus.$emit('layerPointAdd', { |
|---|
| | | layerName: 'carLayers', |
|---|
| | | type: 'billboard', |
|---|
| | | params: { |
|---|
| | | ...item, |
|---|
| | | url: '/img/icon/car.png', |
|---|
| | | setStyle: { |
|---|
| | | disableDepthTestDistance: Number.POSITIVE_INFINITY |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | incident: this.siteClickCar, |
|---|
| | | mouseOverIncident: this.pointMouseOver, |
|---|
| | | mouseOutIncident: this.pointMouseOut, |
|---|
| | | }) |
|---|
| | | } else if (this.navType == 1) { |
|---|
| | | this.$EventBus.$emit('layerPointAdd', { |
|---|
| | | layerName: 'policeMonitoringLayers', |
|---|
| | | type: 'billboard', |
|---|
| | | params: { |
|---|
| | | ...item, |
|---|
| | | url: item.status == 1 ? '/img/icon/video.png' : '/img/icon/video-off.png', |
|---|
| | | setStyle: { |
|---|
| | | disableDepthTestDistance: Number.POSITIVE_INFINITY |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | incident: this.siteClick, |
|---|
| | | mouseOverIncident: this.pointMouseOver, |
|---|
| | | mouseOutIncident: this.pointMouseOut, |
|---|
| | | }) |
|---|
| | | } else if (this.navType == 2) { |
|---|
| | | // let position = global.DC.CoordTransform.BD09ToGCJ02(item.lng, item.lat) |
|---|
| | | |
|---|
| | | // item.lng = global.DC.CoordTransform.GCJ02ToWGS84(position[0], position[1])[0] |
|---|
| | | // item.lat = global.DC.CoordTransform.GCJ02ToWGS84(position[0], position[1])[1] |
|---|
| | | |
|---|
| | | this.$EventBus.$emit('layerPointAdd', { |
|---|
| | | layerName: 'policeMonitoringLayers', |
|---|
| | | type: 'billboard', |
|---|
| | | params: { |
|---|
| | | ...item, |
|---|
| | | url: '/img/icon/p-talk.png', |
|---|
| | | setStyle: { |
|---|
| | | disableDepthTestDistance: Number.POSITIVE_INFINITY |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | incident: this.siteClickTalk, |
|---|
| | | |
|---|
| | | mouseOverIncident: this.pointMouseOver, |
|---|
| | | mouseOutIncident: this.pointMouseOut, |
|---|
| | | }) |
|---|
| | | } else if (this.navType == 3) { |
|---|
| | | this.$EventBus.$emit('layerPointAdd', { |
|---|
| | | layerName: 'policeMonitoringLayers', |
|---|
| | | type: 'billboard', |
|---|
| | | params: { |
|---|
| | | ...item, |
|---|
| | | url: '/img/icon/p-b-camera.png', |
|---|
| | | setStyle: { |
|---|
| | | disableDepthTestDistance: Number.POSITIVE_INFINITY |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | incident: this.siteClickLaw, |
|---|
| | | |
|---|
| | | mouseOverIncident: this.pointMouseOver, |
|---|
| | | mouseOutIncident: this.pointMouseOut, |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | |
|---|
| | | getEquipmentPaging({ page: this.equimentPage.currentPage, count: this.equimentPage.pageSize, ...params, query: this.searchValue, dwbh: this.userInfo.dept_id }).then(res => { |
|---|
| | | var total = res.data.data.total |
|---|
| | | if (total == 0) { |
|---|
| | | if (this.navType == 0) { |
|---|
| | | this.emptyText = "暂无警车数据" |
|---|
| | | } |
|---|
| | | if (this.navType == 1) { |
|---|
| | | this.emptyText = "暂无摄像头数据" |
|---|
| | | } |
|---|
| | | if (this.navType == 2) { |
|---|
| | | this.emptyText = "暂无手台数据" |
|---|
| | | } |
|---|
| | | if (this.navType == 3) { |
|---|
| | | this.emptyText = "暂无执法记录仪数据" |
|---|
| | | } |
|---|
| | | this.equimentLoading = false |
|---|
| | | |
|---|
| | | } |
|---|
| | | if (res.data.data.list.length > 0) { |
|---|
| | | this.equimentTableData = res.data.data.list.map(item => { |
|---|
| | | let newName = '' |
|---|
| | | if (params.type == 0) { |
|---|
| | | newName = item.name.replace('上饶-', '') |
|---|
| | | } else if (params.type == 2 || params.type == 3) { |
|---|
| | | newName = item.name |
|---|
| | | } else { |
|---|
| | | if (item.name.charAt(7) == '-') { |
|---|
| | | newName = item.name.slice(8) |
|---|
| | | } else { |
|---|
| | | newName = item.name.slice(7) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | return { ...item, newName: newName, lng: item.longitude, lat: item.latitude, alt: 1 } |
|---|
| | | }) |
|---|
| | | |
|---|
| | | this.equimentPage.total = res.data.data.total |
|---|
| | | this.equimentLoading = false |
|---|
| | | } else { |
|---|
| | | this.equimentTableData = [] |
|---|
| | | this.equimentPage.total = 0 |
|---|
| | | } |
|---|
| | | |
|---|
| | | this.equimentLoading = false |
|---|
| | | }).catch(res => { |
|---|
| | | setTimeout(() => { |
|---|
| | | if (this.navType == 0) { |
|---|
| | | this.emptyText = "暂无警车数据" |
|---|
| | | } |
|---|
| | | if (this.navType == 1) { |
|---|
| | | this.emptyText = "暂无摄像头数据" |
|---|
| | | } |
|---|
| | | if (this.navType == 2) { |
|---|
| | | this.emptyText = "暂无手台数据" |
|---|
| | | } |
|---|
| | | if (this.navType == 3) { |
|---|
| | | this.emptyText = "暂无执法记录仪数据" |
|---|
| | | } |
|---|
| | | this.equimentLoading = false |
|---|
| | | }, 500) |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | // 鼠标移入图标事件 |
|---|
| | | pointMouseOver (e) { |
|---|
| | | this.$store.commit('SET_VIDEOLISTPOPUP', true) |
|---|
| | | |
|---|
| | | this.$store.commit('SET_VIDEOLISTPOPUPDATA', { |
|---|
| | | ...e.overlay.attrParams, |
|---|
| | | name: e.overlay.attrParams.newName |
|---|
| | | }) |
|---|
| | | |
|---|
| | | var popup = new global.DC.DivForms(global.viewer, { |
|---|
| | | domId: 'videoListPopup', |
|---|
| | | position: [ |
|---|
| | | global.DC.Transform.transformWGS84ToCartesian( |
|---|
| | | new global.DC.Position( |
|---|
| | | Number(e.overlay.attrParams.lng), |
|---|
| | | Number(e.overlay.attrParams.lat), |
|---|
| | | 0 |
|---|
| | | ) |
|---|
| | | ) |
|---|
| | | ] |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * @description: 鼠标移出事件 |
|---|
| | | * @param {*} e |
|---|
| | | * @return {*} |
|---|
| | | */ |
|---|
| | | pointMouseOut (e) { |
|---|
| | | this.$store.commit('SET_VIDEOLISTPOPUP', false) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | // 类别切换 |
|---|
| | | navClick (type) { |
|---|
| | | if (type && type == this.navType) return |
|---|
| | | |
|---|
| | | this.$store.commit('SET_VIDEOROWCLICKPOPUP', false) |
|---|
| | | this.$store.commit('SET_VIDEOLISTPOPUP', false) |
|---|
| | | |
|---|
| | | if (type) { |
|---|
| | | this.navType = type |
|---|
| | | } |
|---|
| | | this.searchValue = '' |
|---|
| | | |
|---|
| | | this.equimentPage.currentPage = 1 |
|---|
| | | this.equimentPage.total = 0 |
|---|
| | | |
|---|
| | | this.getEquipmentPaging({ type: this.navType }, true) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | // 表格行点击查看定位 |
|---|
| | | rowClick (row) { |
|---|
| | | if (row.lng == 0 || row.lat == 0) { |
|---|
| | | this.$message.error('暂无位置信息！') |
|---|
| | | |
|---|
| | | return |
|---|
| | | } |
|---|
| | | |
|---|
| | | this.$EventBus.$emit('toPosition', { |
|---|
| | | layerName: 'carLayers', |
|---|
| | | siteJd: row.lng, |
|---|
| | | siteWd: row.lat |
|---|
| | | }) |
|---|
| | | |
|---|
| | | this.$store.commit('SET_VIDEOROWCLICKPOPUP', true) |
|---|
| | | |
|---|
| | | this.$store.commit('SET_VIDEOROWCLICKPOPUPDATA', { |
|---|
| | | ...row, |
|---|
| | | name: row.newName |
|---|
| | | }) |
|---|
| | | |
|---|
| | | var popup = new global.DC.DivForms(global.viewer, { |
|---|
| | | domId: 'videoRowClickPopup', |
|---|
| | | position: [ |
|---|
| | | global.DC.Transform.transformWGS84ToCartesian( |
|---|
| | | new global.DC.Position( |
|---|
| | | Number(row.lng), |
|---|
| | | Number(row.lat), |
|---|
| | | 0 |
|---|
| | | ) |
|---|
| | | ) |
|---|
| | | ] |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | // 表格行点击查看轨迹 |
|---|
| | | equipmentTrack (row) { |
|---|
| | | this.detailFlag = true |
|---|
| | | |
|---|
| | | this.currentSelectEquipment = row |
|---|
| | | }, |
|---|
| | | |
|---|
| | | async play (row) { |
|---|
| | | this.videoPlayShow = true |
|---|
| | | |
|---|
| | | if (this.flvPlayer != null) { |
|---|
| | | this.flvPlayer.pause() |
|---|
| | | this.flvPlayer.unload() |
|---|
| | | this.flvPlayer.detachMediaElement() |
|---|
| | | this.flvPlayer.destroy() |
|---|
| | | this.flvPlayer = null |
|---|
| | | } |
|---|
| | | |
|---|
| | | this.dialogTitle = row.name |
|---|
| | | this.dialogVisible = true |
|---|
| | | |
|---|
| | | let flvUrl = '' |
|---|
| | | |
|---|
| | | await this.getDevices(row.channelId).then(res => { |
|---|
| | | flvUrl = res |
|---|
| | | }) |
|---|
| | | |
|---|
| | | if (typeof flvUrl === 'object') { |
|---|
| | | this.$message.error(flvUrl.msg) |
|---|
| | | this.dialogVisible = false |
|---|
| | | return |
|---|
| | | } |
|---|
| | | |
|---|
| | | if (flvjs.isSupported()) { |
|---|
| | | this.$nextTick(() => { |
|---|
| | | var videoElement = document.getElementById('videoElement') |
|---|
| | | this.flvPlayer = flvjs.createPlayer({ |
|---|
| | | type: 'flv', |
|---|
| | | isLive: true, |
|---|
| | | hasAudio: false, |
|---|
| | | url: flvUrl |
|---|
| | | }) |
|---|
| | | this.flvPlayer.attachMediaElement(videoElement) |
|---|
| | | this.flvPlayer.load() |
|---|
| | | this.videoPlayShow = false |
|---|
| | | this.flvPlayer.play() |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | |
|---|
| | | async getDevices (channelId) { |
|---|
| | | let flvAddress = '' |
|---|
| | | await getDevices(channelId).then(res => { |
|---|
| | | if ('data' in res.data) { |
|---|
| | | flvAddress = res.data.data.flv |
|---|
| | | } else { |
|---|
| | | flvAddress = res.data |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | return flvAddress |
|---|
| | | }, |
|---|
| | | |
|---|
| | | siteClick (e) { |
|---|
| | | |
|---|
| | | if (this.typeValue == 1) { |
|---|
| | | this.play(e.overlay.attrParams) |
|---|
| | | } |
|---|
| | | |
|---|
| | | }, |
|---|
| | | // 点击查看执法记录仪信息 |
|---|
| | | siteClickLaw (e) { |
|---|
| | | // console.log(e) |
|---|
| | | }, |
|---|
| | | // 点击查看手台信息 |
|---|
| | | siteClickTalk (e) { |
|---|
| | | // console.log(e.overlay.attrParams,88888) |
|---|
| | | this.$refs.talkEquipmentDetailDialog.initOpen(e.overlay.attrParams.id) |
|---|
| | | }, |
|---|
| | | // 点击查看警车信息 |
|---|
| | | siteClickCar (e) { |
|---|
| | | // console.log(e) |
|---|
| | | this.$refs.policeCarDetailDialog.initOpen(e.overlay.attrParams.id) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | dialogBeforeClose () { |
|---|
| | | this.$refs.videoElement.pause() |
|---|
| | | this.dialogVisible = false |
|---|
| | | }, |
|---|
| | | |
|---|
| | | // 轨迹返回 |
|---|
| | | goBack () { |
|---|
| | | this.detailFlag = !this.detailFlag |
|---|
| | | this.trackTime = [] |
|---|
| | | |
|---|
| | | this.$EventBus.$emit('mapClearLayer', { |
|---|
| | | layerName: 'polylineLayer', |
|---|
| | | type: 'VectorLayer' |
|---|
| | | }) |
|---|
| | | |
|---|
| | | tc.pause() |
|---|
| | | |
|---|
| | | tc.removeTrack(track) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | // 查看轨迹 |
|---|
| | | async lookTrack () { |
|---|
| | | global.viewer.scene.globe.depthTestAgainstTerrain = false |
|---|
| | | |
|---|
| | | if (this.trackTime.length == 0) { |
|---|
| | | this.$message({ message: '请选择开始时间', duration: 2000 }) |
|---|
| | | return |
|---|
| | | } |
|---|
| | | const startTime = new Date(this.trackTime[0]) |
|---|
| | | const start = startTime.getFullYear() + '-' + this.disposeTime(startTime.getMonth() + 1) + '-' + this.disposeTime(startTime.getDate()) + ' ' + this.disposeTime(startTime.getHours()) + ':' + this.disposeTime(startTime.getMinutes()) + ':' + this.disposeTime(startTime.getSeconds()) |
|---|
| | | if (this.trackTime.length == 1) { |
|---|
| | | this.$message({ message: '请选择结束时间', duration: 2000 }) |
|---|
| | | return |
|---|
| | | } |
|---|
| | | const endTime = new Date(this.trackTime[1]) |
|---|
| | | const end = endTime.getFullYear() + '-' + this.disposeTime(endTime.getMonth() + 1) + '-' + this.disposeTime(endTime.getDate()) + ' ' + this.disposeTime(endTime.getHours()) + ':' + this.disposeTime(endTime.getMinutes()) + ':' + this.disposeTime(endTime.getSeconds()) |
|---|
| | | |
|---|
| | | this.$EventBus.$emit('mapClearLayer', { |
|---|
| | | layerName: 'polylineLayer', |
|---|
| | | type: 'VectorLayer' |
|---|
| | | }) |
|---|
| | | |
|---|
| | | let positionsArr = [] |
|---|
| | | await this.getHistoricalTrack({ start: start, end: end, channelId: this.currentSelectEquipment.channelId, type: this.navType }).then(res => { |
|---|
| | | positionsArr = res |
|---|
| | | }) |
|---|
| | | |
|---|
| | | if (positionsArr.length < 1) { |
|---|
| | | this.$message({ |
|---|
| | | message: '该设备暂无轨迹数据', |
|---|
| | | type: 'warning' |
|---|
| | | }) |
|---|
| | | |
|---|
| | | return |
|---|
| | | } |
|---|
| | | |
|---|
| | | let flag = positionsArr.every(item => item.longitude == positionsArr[0].longitude && item.latitude == positionsArr[0].latitude) |
|---|
| | | |
|---|
| | | if (flag) { |
|---|
| | | this.$message({ |
|---|
| | | message: '该设备暂无轨迹数据', |
|---|
| | | type: 'warning' |
|---|
| | | }) |
|---|
| | | |
|---|
| | | return |
|---|
| | | } |
|---|
| | | |
|---|
| | | let positionStr = '' |
|---|
| | | |
|---|
| | | positionsArr.forEach(item => { |
|---|
| | | positionStr = positionStr + item.longitude + ',' + item.latitude + ';' |
|---|
| | | }) |
|---|
| | | |
|---|
| | | this.$EventBus.$emit('layerPolylineAdd', { |
|---|
| | | layerName: 'polylineLayer', |
|---|
| | | positions: positionStr, |
|---|
| | | material: new global.DC.PolylineLightingTrailMaterialProperty({ |
|---|
| | | color: global.DC.Color.RED, |
|---|
| | | speed: 5.0 |
|---|
| | | }), |
|---|
| | | width: 6 |
|---|
| | | }) |
|---|
| | | |
|---|
| | | this.$EventBus.$emit('layerPointAdd', { |
|---|
| | | layerName: 'polylineLayer', |
|---|
| | | type: 'billboard', |
|---|
| | | params: { |
|---|
| | | lng: positionsArr[0].longitude, |
|---|
| | | lat: positionsArr[0].latitude, |
|---|
| | | alt: 1, |
|---|
| | | url: '/img/icon/orgin.png' |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | |
|---|
| | | this.$EventBus.$emit('layerPointAdd', { |
|---|
| | | layerName: 'polylineLayer', |
|---|
| | | type: 'billboard', |
|---|
| | | params: { |
|---|
| | | lng: positionsArr[positionsArr.length - 1].longitude, |
|---|
| | | lat: positionsArr[positionsArr.length - 1].latitude, |
|---|
| | | alt: 1, |
|---|
| | | url: '/img/icon/end.png' |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | |
|---|
| | | track = new global.DC.Track(positionStr, 5000, () => { |
|---|
| | | |
|---|
| | | }, { |
|---|
| | | headingOffset: -90 |
|---|
| | | }) |
|---|
| | | |
|---|
| | | track.setModel('/model/qiche.gltf', { |
|---|
| | | scale: 1 |
|---|
| | | }) |
|---|
| | | |
|---|
| | | tc.addTrack(track) |
|---|
| | | |
|---|
| | | this.$EventBus.$emit('toPosition', { |
|---|
| | | siteJd: positionsArr[0].longitude, |
|---|
| | | siteWd: positionsArr[0].latitude, |
|---|
| | | siteGd: 1000, |
|---|
| | | siteHeading: 0, |
|---|
| | | sitePitch: -90 |
|---|
| | | }) |
|---|
| | | |
|---|
| | | tc.play() |
|---|
| | | }, |
|---|
| | | |
|---|
| | | // 处理时间补零操作 |
|---|
| | | disposeTime (s) { |
|---|
| | | return s < 10 ? '0' + s : s |
|---|
| | | }, |
|---|
| | | |
|---|
| | | setTableHeight () { |
|---|
| | | this.currentTableHeight = this.$refs.tableBox.offsetHeight - this.$refs.tablePagination.offsetHeight |
|---|
| | | }, |
|---|
| | | |
|---|
| | | // 大小重置 |
|---|
| | | boxResize (val) { |
|---|
| | | this.boxShow = val |
|---|
| | | }, |
|---|
| | | |
|---|
| | | async getHistoricalTrack (params) { |
|---|
| | | let positionArr = [] |
|---|
| | | |
|---|
| | | await getHistoricalTrack(params).then(res => { |
|---|
| | | positionArr = res.data.data |
|---|
| | | }) |
|---|
| | | return positionArr |
|---|
| | | }, |
|---|
| | | |
|---|
| | | // 大搜 |
|---|
| | | getSearchExtensively (ak, region, query) { |
|---|
| | | getSearchExtensively(ak, region, query).then(res => { |
|---|
| | | this.searchExtensivelyArray = res.data.result |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | searchExtensivelyClick () { |
|---|
| | | this.getSearchExtensively('ebf48ecaa1fd436fa3d40c4600aa051f', '361100', this.searchExtensivelyValue) |
|---|
| | | this.searchExtensivelyValBoxShow = false |
|---|
| | | if (this.searchExtensivelyArray.length > 0) { |
|---|
| | | this.$EventBus.$emit('toPosition', { |
|---|
| | | siteJd: `${this.searchExtensivelyArray[0].location.lng}`, |
|---|
| | | siteWd: `${this.searchExtensivelyArray[0].location.lat}`, |
|---|
| | | siteGd: 200 |
|---|
| | | }) |
|---|
| | | this.searchExtensivelyValue = this.searchExtensivelyArray[0].name |
|---|
| | | this.$EventBus.$emit('mapClearLayer', { |
|---|
| | | layerName: 'searchLayer', |
|---|
| | | type: 'VectorLayer' |
|---|
| | | }) |
|---|
| | | this.$EventBus.$emit('layerPointAdd', { |
|---|
| | | layerName: 'searchLayer', |
|---|
| | | type: 'label', |
|---|
| | | params: { |
|---|
| | | lng: `${this.searchExtensivelyArray[0].location.lng}`, |
|---|
| | | lat: `${this.searchExtensivelyArray[0].location.lat}`, |
|---|
| | | alt: 1, |
|---|
| | | text: this.searchExtensivelyArray[0].name |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | |
|---|
| | | searchExtensivelyChange () { |
|---|
| | | if (this.searchExtensivelyValue == '') { |
|---|
| | | this.searchExtensivelyValBoxShow = false |
|---|
| | | this.isShowClearBtn = false |
|---|
| | | this.searchExtensivelyArray = [] |
|---|
| | | } else { |
|---|
| | | this.searchExtensivelyValBoxShow = true |
|---|
| | | this.isShowClearBtn = true |
|---|
| | | this.getSearchExtensively('ebf48ecaa1fd436fa3d40c4600aa051f', '361100', this.searchExtensivelyValue) |
|---|
| | | } |
|---|
| | | this.$EventBus.$emit('mapClearLayer', { |
|---|
| | | layerName: 'searchLayer', |
|---|
| | | type: 'VectorLayer' |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | searchExtensivelyVlaClick (item) { |
|---|
| | | this.searchExtensivelyValBoxShow = false |
|---|
| | | this.searchExtensivelyValue = item.name |
|---|
| | | this.$EventBus.$emit('toPosition', { |
|---|
| | | siteJd: `${item.location.lng}`, |
|---|
| | | siteWd: `${item.location.lat}`, |
|---|
| | | siteGd: 200 |
|---|
| | | }) |
|---|
| | | this.$EventBus.$emit('mapClearLayer', { |
|---|
| | | layerName: 'searchLayer', |
|---|
| | | type: 'VectorLayer' |
|---|
| | | }) |
|---|
| | | this.$EventBus.$emit('layerPointAdd', { |
|---|
| | | layerName: 'searchLayer', |
|---|
| | | type: 'label', |
|---|
| | | params: { |
|---|
| | | lng: `${item.location.lng}`, |
|---|
| | | lat: `${item.location.lat}`, |
|---|
| | | alt: 1, |
|---|
| | | text: item.name |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | this.$EventBus.$emit('layerPointAdd', { |
|---|
| | | layerName: 'searchLayer', |
|---|
| | | type: 'billboard', |
|---|
| | | params: { |
|---|
| | | lng: `${item.location.lng}`, |
|---|
| | | lat: `${item.location.lat}`, |
|---|
| | | alt: 1, |
|---|
| | | url: '/img/icon/location.png' |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | searchExtensivelyFocus () { |
|---|
| | | this.searchExtensivelyValBoxShow = true |
|---|
| | | this.getSearchExtensively('ebf48ecaa1fd436fa3d40c4600aa051f', '361100', this.searchExtensivelyValue) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | clearSearchValue () { |
|---|
| | | this.searchExtensivelyValue = '' |
|---|
| | | this.searchExtensivelyChange() |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | |
|---|
| | | destroyed () { |
|---|
| | | this.$store.commit('SET_VIDEOROWCLICKPOPUP', false) |
|---|
| | | this.$store.commit('SET_VIDEOLISTPOPUP', false) |
|---|
| | | |
|---|
| | | this.$EventBus.$emit('mapRemoveLayer', { |
|---|
| | | layerName: 'carLayers', |
|---|
| | | type: 'VectorLayer' |
|---|
| | | }) |
|---|
| | | |
|---|
| | | this.$EventBus.$emit('mapRemoveLayer', { |
|---|
| | | layerName: 'policeMonitoringLayers', |
|---|
| | | type: 'VectorLayer' |
|---|
| | | }) |
|---|
| | | |
|---|
| | | this.$EventBus.$emit('mapRemoveLayer', { |
|---|
| | | layerName: 'polylineLayer', |
|---|
| | | type: 'VectorLayer' |
|---|
| | | }) |
|---|
| | | |
|---|
| | | this.$EventBus.$emit('mapRemoveLayer', { |
|---|
| | | layerName: 'searchLayer', |
|---|
| | | type: 'VectorLayer' |
|---|
| | | }) |
|---|
| | | |
|---|
| | | if (tc && tc != null && tc != undefined) { |
|---|
| | | tc.pause() |
|---|
| | | |
|---|
| | | tc.removeTrack(track) |
|---|
| | | } |
|---|
| | | |
|---|
| | | clearInterval(policeTimeOut) |
|---|
| | | |
|---|
| | | window.removeEventListener('resize', this.setTableHeight) |
|---|
| | | |
|---|
| | | this.$parent.$parent.resize('0px') |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style scoped lang="scss"> |
|---|
| | | .container { |
|---|
| | | position: relative; |
|---|
| | | position: relative; |
|---|
| | | width: 100%; |
|---|
| | | height: 100%; |
|---|
| | | |
|---|
| | | &-content { |
|---|
| | | display: flex; |
|---|
| | | flex-direction: column; |
|---|
| | | width: 100%; |
|---|
| | | height: 100%; |
|---|
| | | color: #fff; |
|---|
| | | background: $bg-color; |
|---|
| | | |
|---|
| | | &-content { |
|---|
| | | display: flex; |
|---|
| | | flex-direction: column; |
|---|
| | | width: 100%; |
|---|
| | | height: 100%; |
|---|
| | | color: #fff; |
|---|
| | | background: $bg-color; |
|---|
| | | .switch-box { |
|---|
| | | padding: 6px; |
|---|
| | | // background: blue; |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: space-around; |
|---|
| | | |
|---|
| | | .switch-box { |
|---|
| | | padding: 6px; |
|---|
| | | // background: blue; |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: space-around; |
|---|
| | | |
|---|
| | | &>div { |
|---|
| | | flex: 1; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .list-show { |
|---|
| | | position: relative; |
|---|
| | | height: calc(100% - 50px); |
|---|
| | | |
|---|
| | | .search-box { |
|---|
| | | padding: 6px; |
|---|
| | | padding-top: 0; |
|---|
| | | height: 46px; |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | |
|---|
| | | input { |
|---|
| | | flex: 1; |
|---|
| | | height: 100%; |
|---|
| | | font-size: 18px; |
|---|
| | | text-indent: 1em; |
|---|
| | | color: #ffffff; |
|---|
| | | background-color: rgba(24, 79, 202, 0.6); |
|---|
| | | // border: 1px solid rgb(0, 92, 169); |
|---|
| | | border: 1px solid rgb(24, 79, 202); |
|---|
| | | } |
|---|
| | | |
|---|
| | | input:focus { |
|---|
| | | outline: none; |
|---|
| | | } |
|---|
| | | |
|---|
| | | input::-webkit-input-placeholder { |
|---|
| | | color: rgba(238, 238, 238, 0.7); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .list { |
|---|
| | | height: calc(100% - 48px); |
|---|
| | | display: flex; |
|---|
| | | flex-direction: column; |
|---|
| | | |
|---|
| | | .pages { |
|---|
| | | height: 40px; |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: center; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .state-box { |
|---|
| | | width: 20px; |
|---|
| | | height: 20px; |
|---|
| | | line-height: 20px; |
|---|
| | | text-align: center; |
|---|
| | | margin: 0 auto; |
|---|
| | | border-radius: 50%; |
|---|
| | | background-color: #adadad; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .online { |
|---|
| | | background-color: #4ccc7d; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | :deep(.el-table td.el-table__cell div) { |
|---|
| | | overflow: hidden; |
|---|
| | | white-space: nowrap; |
|---|
| | | text-overflow: ellipsis; |
|---|
| | | } |
|---|
| | | |
|---|
| | | :deep(.el-main) { |
|---|
| | | padding: 0; |
|---|
| | | width: 100%; |
|---|
| | | overflow: hidden !important; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .track-box { |
|---|
| | | height: calc(100% - 50px); |
|---|
| | | |
|---|
| | | .back-btn { |
|---|
| | | position: relative; |
|---|
| | | height: 42px; |
|---|
| | | line-height: 42px; |
|---|
| | | text-align: center; |
|---|
| | | color: #fff; |
|---|
| | | border-bottom: 1px solid #fff; |
|---|
| | | cursor: pointer; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .back-btn::before { |
|---|
| | | content: '\e6ea'; |
|---|
| | | font-family: element-icons; |
|---|
| | | height: 28px; |
|---|
| | | line-height: 28px; |
|---|
| | | color: #fff; |
|---|
| | | position: absolute; |
|---|
| | | top: 4px; |
|---|
| | | left: 8px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .back-btn:hover::before { |
|---|
| | | color: #fff; |
|---|
| | | } |
|---|
| | | |
|---|
| | | ul { |
|---|
| | | margin: 0; |
|---|
| | | padding: 0; |
|---|
| | | } |
|---|
| | | |
|---|
| | | li { |
|---|
| | | margin: 0; |
|---|
| | | padding: 0 4px; |
|---|
| | | list-style: none; |
|---|
| | | height: 42px; |
|---|
| | | line-height: 42px; |
|---|
| | | display: flex; |
|---|
| | | color: #fff; |
|---|
| | | border-bottom: 1px solid #fff; |
|---|
| | | |
|---|
| | | &>div { |
|---|
| | | text-align: center; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &>div:first-child { |
|---|
| | | flex: 2; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &>div:last-child { |
|---|
| | | flex: 6; |
|---|
| | | |
|---|
| | | &>div { |
|---|
| | | width: 100% !important; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | li:last-child { |
|---|
| | | text-align: center; |
|---|
| | | position: relative; |
|---|
| | | |
|---|
| | | .el-button { |
|---|
| | | position: absolute; |
|---|
| | | top: 0; |
|---|
| | | left: 0; |
|---|
| | | right: 0; |
|---|
| | | bottom: 0; |
|---|
| | | margin: auto; |
|---|
| | | padding: 0 !important; |
|---|
| | | width: 68px; |
|---|
| | | height: 32px; |
|---|
| | | line-height: 32px; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | &>div { |
|---|
| | | flex: 1; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .search-content { |
|---|
| | | position: absolute; |
|---|
| | | position: fixed; |
|---|
| | | z-index: 99; |
|---|
| | | left: 760px; |
|---|
| | | top: 40px; |
|---|
| | | width: 460px; |
|---|
| | | height: 36px; |
|---|
| | | .list-show { |
|---|
| | | position: relative; |
|---|
| | | height: calc(100% - 50px); |
|---|
| | | |
|---|
| | | .search-box { |
|---|
| | | padding: 6px; |
|---|
| | | padding-top: 0; |
|---|
| | | height: 46px; |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | |
|---|
| | | input { |
|---|
| | | flex: 1; |
|---|
| | | width: 400px; |
|---|
| | | height: 100%; |
|---|
| | | font-size: 18px; |
|---|
| | | text-indent: 1em; |
|---|
| | | color: #ffffff; |
|---|
| | | background-color: rgba(24, 79, 202, 0.75); |
|---|
| | | border: 1px solid rgb(0, 92, 169); |
|---|
| | | border-radius: 20px 0 0 20px; |
|---|
| | | vertical-align: top; |
|---|
| | | flex: 1; |
|---|
| | | height: 100%; |
|---|
| | | font-size: 18px; |
|---|
| | | text-indent: 1em; |
|---|
| | | color: #ffffff; |
|---|
| | | background-color: rgba(24, 79, 202, 0.6); |
|---|
| | | // border: 1px solid rgb(0, 92, 169); |
|---|
| | | border: 1px solid rgb(24, 79, 202); |
|---|
| | | } |
|---|
| | | |
|---|
| | | input:focus { |
|---|
| | | outline: none; |
|---|
| | | outline: none; |
|---|
| | | } |
|---|
| | | |
|---|
| | | input::-webkit-input-placeholder { |
|---|
| | | color: rgba(238, 238, 238, 0.7); |
|---|
| | | color: rgba(238, 238, 238, 0.7); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .clear { |
|---|
| | | position: absolute; |
|---|
| | | top: 0; |
|---|
| | | right: 70px; |
|---|
| | | cursor: pointer; |
|---|
| | | |
|---|
| | | img { |
|---|
| | | width: 16px; |
|---|
| | | height: 16px; |
|---|
| | | margin-top: 10px; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | button { |
|---|
| | | font-size: 24px; |
|---|
| | | font-weight: 700; |
|---|
| | | width: 60px; |
|---|
| | | height: 100%; |
|---|
| | | background-color: $table-body-tr-n-color; |
|---|
| | | color: #fff; |
|---|
| | | border: 1px solid rgb(0, 92, 169); |
|---|
| | | cursor: pointer; |
|---|
| | | border-radius: 0 20px 20px 0; |
|---|
| | | } |
|---|
| | | |
|---|
| | | button:active { |
|---|
| | | background-color: $table-body-tr-2n-color; |
|---|
| | | border: 1px solid rgb(0, 92, 169); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .searchExtensively-val-box { |
|---|
| | | .list { |
|---|
| | | height: calc(100% - 48px); |
|---|
| | | display: flex; |
|---|
| | | flex-direction: column; |
|---|
| | | position: absolute; |
|---|
| | | top: 80px; |
|---|
| | | left: 760px; |
|---|
| | | width: 380px; |
|---|
| | | max-height: 160px; |
|---|
| | | text-align: left; |
|---|
| | | color: #fff; |
|---|
| | | background: $el-dialog-bg-color; |
|---|
| | | z-index: 1111; |
|---|
| | | border-radius: 10px; |
|---|
| | | |
|---|
| | | .pages { |
|---|
| | | height: 40px; |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: center; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .state-box { |
|---|
| | | width: 20px; |
|---|
| | | height: 20px; |
|---|
| | | line-height: 20px; |
|---|
| | | text-align: center; |
|---|
| | | margin: 0 auto; |
|---|
| | | border-radius: 50%; |
|---|
| | | background-color: #adadad; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .online { |
|---|
| | | background-color: #4ccc7d; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | :deep(.el-table td.el-table__cell div) { |
|---|
| | | overflow: hidden; |
|---|
| | | white-space: nowrap; |
|---|
| | | text-overflow: ellipsis; |
|---|
| | | } |
|---|
| | | |
|---|
| | | :deep(.el-main) { |
|---|
| | | padding: 0; |
|---|
| | | width: 100%; |
|---|
| | | overflow: hidden !important; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .track-box { |
|---|
| | | height: calc(100% - 50px); |
|---|
| | | |
|---|
| | | .back-btn { |
|---|
| | | position: relative; |
|---|
| | | height: 42px; |
|---|
| | | line-height: 42px; |
|---|
| | | text-align: center; |
|---|
| | | color: #fff; |
|---|
| | | border-bottom: 1px solid #fff; |
|---|
| | | cursor: pointer; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .back-btn::before { |
|---|
| | | content: '\e6ea'; |
|---|
| | | font-family: element-icons; |
|---|
| | | height: 28px; |
|---|
| | | line-height: 28px; |
|---|
| | | color: #fff; |
|---|
| | | position: absolute; |
|---|
| | | top: 4px; |
|---|
| | | left: 8px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .back-btn:hover::before { |
|---|
| | | color: #fff; |
|---|
| | | } |
|---|
| | | |
|---|
| | | ul { |
|---|
| | | margin: 0; |
|---|
| | | padding: 0; |
|---|
| | | } |
|---|
| | | |
|---|
| | | li { |
|---|
| | | margin: 0; |
|---|
| | | padding: 0 4px; |
|---|
| | | list-style: none; |
|---|
| | | height: 42px; |
|---|
| | | line-height: 42px; |
|---|
| | | display: flex; |
|---|
| | | color: #fff; |
|---|
| | | border-bottom: 1px solid #fff; |
|---|
| | | |
|---|
| | | &>div { |
|---|
| | | height: 100%; |
|---|
| | | overflow-y: auto; |
|---|
| | | |
|---|
| | | div { |
|---|
| | | padding: 0 10px; |
|---|
| | | line-height: 36px; |
|---|
| | | cursor: pointer; |
|---|
| | | } |
|---|
| | | text-align: center; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &>div:first-child { |
|---|
| | | flex: 2; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &>div:last-child { |
|---|
| | | flex: 6; |
|---|
| | | |
|---|
| | | &>div { |
|---|
| | | width: 100% !important; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | li:last-child { |
|---|
| | | text-align: center; |
|---|
| | | position: relative; |
|---|
| | | |
|---|
| | | .el-button { |
|---|
| | | position: absolute; |
|---|
| | | top: 0; |
|---|
| | | left: 0; |
|---|
| | | right: 0; |
|---|
| | | bottom: 0; |
|---|
| | | margin: auto; |
|---|
| | | padding: 0 !important; |
|---|
| | | width: 68px; |
|---|
| | | height: 32px; |
|---|
| | | line-height: 32px; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .search-content { |
|---|
| | | position: absolute; |
|---|
| | | position: fixed; |
|---|
| | | z-index: 99; |
|---|
| | | left: 760px; |
|---|
| | | top: 40px; |
|---|
| | | width: 460px; |
|---|
| | | height: 36px; |
|---|
| | | |
|---|
| | | input { |
|---|
| | | flex: 1; |
|---|
| | | width: 400px; |
|---|
| | | height: 100%; |
|---|
| | | font-size: 18px; |
|---|
| | | text-indent: 1em; |
|---|
| | | color: #ffffff; |
|---|
| | | background-color: rgba(24, 79, 202, 0.75); |
|---|
| | | border: 1px solid rgb(0, 92, 169); |
|---|
| | | border-radius: 20px 0 0 20px; |
|---|
| | | vertical-align: top; |
|---|
| | | } |
|---|
| | | |
|---|
| | | input:focus { |
|---|
| | | outline: none; |
|---|
| | | } |
|---|
| | | |
|---|
| | | input::-webkit-input-placeholder { |
|---|
| | | color: rgba(238, 238, 238, 0.7); |
|---|
| | | } |
|---|
| | | |
|---|
| | | .clear { |
|---|
| | | position: absolute; |
|---|
| | | top: 0; |
|---|
| | | right: 70px; |
|---|
| | | cursor: pointer; |
|---|
| | | |
|---|
| | | img { |
|---|
| | | width: 16px; |
|---|
| | | height: 16px; |
|---|
| | | margin-top: 10px; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | button { |
|---|
| | | font-size: 24px; |
|---|
| | | font-weight: 700; |
|---|
| | | width: 60px; |
|---|
| | | height: 100%; |
|---|
| | | background-color: $table-body-tr-n-color; |
|---|
| | | color: #fff; |
|---|
| | | border: 1px solid rgb(0, 92, 169); |
|---|
| | | cursor: pointer; |
|---|
| | | border-radius: 0 20px 20px 0; |
|---|
| | | } |
|---|
| | | |
|---|
| | | button:active { |
|---|
| | | background-color: $table-body-tr-2n-color; |
|---|
| | | border: 1px solid rgb(0, 92, 169); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .searchExtensively-val-box { |
|---|
| | | display: flex; |
|---|
| | | flex-direction: column; |
|---|
| | | position: absolute; |
|---|
| | | top: 80px; |
|---|
| | | left: 760px; |
|---|
| | | width: 380px; |
|---|
| | | max-height: 160px; |
|---|
| | | text-align: left; |
|---|
| | | color: #fff; |
|---|
| | | background: $el-dialog-bg-color; |
|---|
| | | z-index: 1111; |
|---|
| | | border-radius: 10px; |
|---|
| | | overflow: hidden; |
|---|
| | | |
|---|
| | | &>div { |
|---|
| | | height: 100%; |
|---|
| | | overflow-y: auto; |
|---|
| | | |
|---|
| | | div { |
|---|
| | | padding: 0 10px; |
|---|
| | | line-height: 36px; |
|---|
| | | cursor: pointer; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style> |
|---|
