Merge branch 'master' of http://s16s652780.51mypc.cn:49896/r/zhba_regulatory
| | |
|---|
| | | //所有表格 边框 |
|---|
| | | .el-card, |
|---|
| | | .el-tabs__content, |
|---|
| | | .ol-viewport { |
|---|
| | | .track-box { |
|---|
| | | border: 1px solid transparent !important; |
|---|
| | | box-shadow: 3px 3px 15px -2px rgb(0, 0, 0) !important; |
|---|
| | | } |
|---|
| | | .ol-viewport { |
|---|
| | | box-shadow: 0px 3px 15px -2px rgb(0, 0, 0) !important; |
|---|
| | | } |
|---|
| | | // 左侧树形 阴影 |
|---|
| | | |
|---|
| | | // .el-card.is-always-shadow { |
|---|
| | |
|---|
| | | height: calc(100% - 48px) !important; |
|---|
| | | overflow-y: auto !important; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .track-box { |
|---|
| | | .datetime { |
|---|
| | | input { |
|---|
| | | background: #004ca7 !important; |
|---|
| | | &::-webkit-input-placeholder { |
|---|
| | | /* WebKit browsers */ |
|---|
| | | color: #fff !important; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .el-date-editor .el-range-separator { |
|---|
| | | color: #fff !important; |
|---|
| | | } |
|---|
| | |
|---|
| | | <Map ref="modalForm" /> |
|---|
| | | </div> |
|---|
| | | <div> |
|---|
| | | <div class="data-table map-people-table" |
|---|
| | | v-show='!detailFlag'> |
|---|
| | | <el-table :data="tableData" |
|---|
| | | <div class="data-table map-people-table" v-show="!detailFlag"> |
|---|
| | | <el-table |
|---|
| | | :data="tableData" |
|---|
| | | style="width: 100%" |
|---|
| | | v-loading="loading"> |
|---|
| | | <el-table-column align="center" |
|---|
| | | v-loading="loading" |
|---|
| | | > |
|---|
| | | <el-table-column |
|---|
| | | align="center" |
|---|
| | | prop="mode" |
|---|
| | | label="车辆型号" |
|---|
| | | width="136"> |
|---|
| | | </el-table-column> |
|---|
| | | |
|---|
| | | <el-table-column align="center" |
|---|
| | | prop="personInCharge" |
|---|
| | | label="责任人"> |
|---|
| | | </el-table-column> |
|---|
| | | |
|---|
| | | <el-table-column label="操作" |
|---|
| | | width="136" |
|---|
| | | align='center'> |
|---|
| | | > |
|---|
| | | </el-table-column> |
|---|
| | | |
|---|
| | | <el-table-column |
|---|
| | | align="center" |
|---|
| | | prop="personInCharge" |
|---|
| | | label="责任人" |
|---|
| | | > |
|---|
| | | </el-table-column> |
|---|
| | | |
|---|
| | | <el-table-column label="操作" width="136" align="center"> |
|---|
| | | <template slot-scope="scope"> |
|---|
| | | <el-button @click="positionClick(scope.row)" |
|---|
| | | <el-button |
|---|
| | | @click="positionClick(scope.row)" |
|---|
| | | type="text" |
|---|
| | | size="small" |
|---|
| | | title='定位'> |
|---|
| | | <i class='el-icon-location'></i> |
|---|
| | | title="定位" |
|---|
| | | > |
|---|
| | | <i class="el-icon-location"></i> |
|---|
| | | </el-button> |
|---|
| | | <el-button @click="detailsClick(scope.row)" |
|---|
| | | <el-button |
|---|
| | | @click="detailsClick(scope.row)" |
|---|
| | | type="text" |
|---|
| | | size="small" |
|---|
| | | title='轨迹'> |
|---|
| | | <i class='el-icon-position'></i> |
|---|
| | | title="轨迹" |
|---|
| | | > |
|---|
| | | <i class="el-icon-position"></i> |
|---|
| | | </el-button> |
|---|
| | | </template> |
|---|
| | | </el-table-column> |
|---|
| | | </el-table> |
|---|
| | | <div ref="tablePagination"> |
|---|
| | | <el-pagination @size-change="handleSizeChange" |
|---|
| | | <el-pagination |
|---|
| | | @size-change="handleSizeChange" |
|---|
| | | @current-change="handleCurrentChange" |
|---|
| | | background |
|---|
| | | :page-sizes="[10, 30, 50, 100]" |
|---|
| | |
|---|
| | | :current-page="page.currentPage" |
|---|
| | | :page-size="page.pageSize" |
|---|
| | | :pager-count="3" |
|---|
| | | :total="page.total"> |
|---|
| | | :total="page.total" |
|---|
| | | > |
|---|
| | | </el-pagination> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class='track-box' |
|---|
| | | v-show='detailFlag'> |
|---|
| | | <div class="track-box" v-show="detailFlag"> |
|---|
| | | <div> |
|---|
| | | <el-button @click="goOut" |
|---|
| | | type="text" |
|---|
| | | size="small" |
|---|
| | | title='轨迹'> |
|---|
| | | <i class='el-icon-back'></i> |
|---|
| | | <el-button @click="goOut" type="text" size="small" title="轨迹"> |
|---|
| | | <i class="el-icon-back"></i> |
|---|
| | | </el-button> |
|---|
| | | |
|---|
| | | 详细资料及轨迹查询 |
|---|
| | | </div> |
|---|
| | | <ul> |
|---|
| | | |
|---|
| | | <li> |
|---|
| | | <div>车辆型号：</div> |
|---|
| | | <div>{{ detailObj.mode }}</div> |
|---|
| | |
|---|
| | | |
|---|
| | | <li> |
|---|
| | | <div>选择时间：</div> |
|---|
| | | <div> |
|---|
| | | <el-date-picker v-model="trackTime" |
|---|
| | | <div class="datetime"> |
|---|
| | | <el-date-picker |
|---|
| | | v-model="trackTime" |
|---|
| | | type="datetimerange" |
|---|
| | | range-separator="至" |
|---|
| | | start-placeholder="开始日期" |
|---|
| | | size='mini' |
|---|
| | | :editable='false' |
|---|
| | | end-placeholder="结束日期"> |
|---|
| | | size="mini" |
|---|
| | | :editable="false" |
|---|
| | | end-placeholder="结束日期" |
|---|
| | | > |
|---|
| | | </el-date-picker> |
|---|
| | | </div> |
|---|
| | | </li> |
|---|
| | | |
|---|
| | | <li> |
|---|
| | | <el-button type="text" |
|---|
| | | @click="lookTrack"> |
|---|
| | | <el-button type="text" @click="lookTrack"> |
|---|
| | | 查看轨迹 |
|---|
| | | </el-button> |
|---|
| | | </li> |
|---|
| | | |
|---|
| | | </ul> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import { getCarList, getPosition, getTrack } from "@/api/map/car"; |
|---|
| | | |
|---|
| | | import { |
|---|
| | | getCarList, |
|---|
| | | getPosition, |
|---|
| | | getTrack |
|---|
| | | } from '@/api/map/car' |
|---|
| | | |
|---|
| | | import gunPng from '@/assets/img/gun.png' |
|---|
| | | import gunPng from "@/assets/img/gun.png"; |
|---|
| | | |
|---|
| | | export default { |
|---|
| | | data () { |
|---|
| | |
|---|
| | | detailFlag: false, |
|---|
| | | loading: true, |
|---|
| | | trackTime: [], |
|---|
| | | detailObj: {} |
|---|
| | | } |
|---|
| | | detailObj: {}, |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | created () { |
|---|
| | | this.getList() |
|---|
| | | |
|---|
| | | this.getList(); |
|---|
| | | }, |
|---|
| | | mounted () { |
|---|
| | | |
|---|
| | | }, |
|---|
| | | mounted() {}, |
|---|
| | | methods: { |
|---|
| | | getList () { |
|---|
| | | getCarList({ current: this.page.currentPage, size: this.page.pageSize }).then(res => { |
|---|
| | | var data = res.data.data |
|---|
| | | this.tableData = data.records |
|---|
| | | this.page.total = data.total |
|---|
| | | this.loading = false |
|---|
| | | }) |
|---|
| | | getCarList({ |
|---|
| | | current: this.page.currentPage, |
|---|
| | | size: this.page.pageSize, |
|---|
| | | }).then((res) => { |
|---|
| | | var data = res.data.data; |
|---|
| | | this.tableData = data.records; |
|---|
| | | this.page.total = data.total; |
|---|
| | | this.loading = false; |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | handleSizeChange (val) { |
|---|
| | | this.page.pageSize = val |
|---|
| | | this.loading = true |
|---|
| | | this.getList() |
|---|
| | | this.page.pageSize = val; |
|---|
| | | this.loading = true; |
|---|
| | | this.getList(); |
|---|
| | | }, |
|---|
| | | handleCurrentChange (val) { |
|---|
| | | this.page.currentPage = val |
|---|
| | | this.loading = true |
|---|
| | | this.getList() |
|---|
| | | this.page.currentPage = val; |
|---|
| | | this.loading = true; |
|---|
| | | this.getList(); |
|---|
| | | }, |
|---|
| | | |
|---|
| | | positionClick (val) { |
|---|
| | | getPosition({ type: 2, workerId: val.id }).then(result => { |
|---|
| | | var res = result.data.data |
|---|
| | | getPosition({ type: 2, workerId: val.id }).then((result) => { |
|---|
| | | var res = result.data.data; |
|---|
| | | if (JSON.stringify(res) != "{}") { |
|---|
| | | this.$refs.modalForm.addEntitys({ |
|---|
| | | LGTD: 115.860, |
|---|
| | | LTTD: 28.710, |
|---|
| | | name: '枪支位置' |
|---|
| | | }, gunPng, 0.8, 'gunlayer', 'gunAddlayer'); |
|---|
| | | this.$refs.modalForm.addEntitys( |
|---|
| | | { |
|---|
| | | LGTD: 115.86, |
|---|
| | | LTTD: 28.71, |
|---|
| | | name: "枪支位置", |
|---|
| | | }, |
|---|
| | | gunPng, |
|---|
| | | 0.8, |
|---|
| | | "gunlayer", |
|---|
| | | "gunAddlayer" |
|---|
| | | ); |
|---|
| | | } |
|---|
| | | |
|---|
| | | }) |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | |
|---|
| | | detailsClick (row) { |
|---|
| | | this.detailFlag = true |
|---|
| | | this.detailFlag = true; |
|---|
| | | this.detailObj = { |
|---|
| | | mode: row.mode, |
|---|
| | | personInCharge: row.personInCharge, |
|---|
| | | dateForProduction: row.dateForProduction, |
|---|
| | | brand: row.brand, |
|---|
| | | id: row.id |
|---|
| | | } |
|---|
| | | |
|---|
| | | id: row.id, |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | |
|---|
| | | lookTrack () { |
|---|
| | | if (this.trackTime.length == 0) { |
|---|
| | | this.$message({ message: '请选择开始时间', duration: 2000 }) |
|---|
| | | return |
|---|
| | | this.$message({ message: "请选择开始时间", duration: 2000 }); |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | const startTime = new Date(this.trackTime[0]) |
|---|
| | | 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()) |
|---|
| | | ":" + |
|---|
| | | this.disposeTime(startTime.getSeconds()); |
|---|
| | | if (this.trackTime.length == 1) { |
|---|
| | | this.$message({ message: '请选择结束时间', duration: 2000 }) |
|---|
| | | return |
|---|
| | | this.$message({ message: "请选择结束时间", duration: 2000 }); |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | const endTime = new Date(this.trackTime[1]) |
|---|
| | | 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.disposeTime(endTime.getSeconds()); |
|---|
| | | |
|---|
| | | getTrack({ workerId: this.detailObj.id, type: 2, startTime: start, endTime: end }).then(res => { |
|---|
| | | var result = res.data.data |
|---|
| | | getTrack({ |
|---|
| | | workerId: this.detailObj.id, |
|---|
| | | type: 2, |
|---|
| | | startTime: start, |
|---|
| | | endTime: end, |
|---|
| | | }).then((res) => { |
|---|
| | | var result = res.data.data; |
|---|
| | | if (result.length > 1) { |
|---|
| | | let arr = [] |
|---|
| | | let arr = []; |
|---|
| | | |
|---|
| | | result.forEach(item => { |
|---|
| | | arr.push([Number(item.longitude), Number(item.latitude)]) |
|---|
| | | }) |
|---|
| | | result.forEach((item) => { |
|---|
| | | arr.push([Number(item.longitude), Number(item.latitude)]); |
|---|
| | | }); |
|---|
| | | |
|---|
| | | this.$refs.modalForm.addLines(arr); |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | // 处理时间补零操作 |
|---|
| | | disposeTime (s) { |
|---|
| | | return s < 10 ? '0' + s : s |
|---|
| | | return s < 10 ? "0" + s : s; |
|---|
| | | }, |
|---|
| | | |
|---|
| | | goOut () { |
|---|
| | | this.detailFlag = !this.detailFlag |
|---|
| | | this.$refs.modalForm.clearLine() |
|---|
| | | this.trackTime = [] |
|---|
| | | } |
|---|
| | | this.detailFlag = !this.detailFlag; |
|---|
| | | this.$refs.modalForm.clearLine(); |
|---|
| | | this.trackTime = []; |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | destroyed () { |
|---|
| | | |
|---|
| | | window.ol2d.removeLayer(this.peopleAddlayer) |
|---|
| | | |
|---|
| | | window.ol2d.removeLayer(this.peopleAddlayer); |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | .data-table { |
|---|
| | | border: 1px solid transparent !important; |
|---|
| | | box-shadow: 3px 3px 15px -2px rgb(0, 0, 0) !important; |
|---|
| | | } |
|---|
| | | .card-body { |
|---|
| | | display: flex; |
|---|
| | | & > div:first-child { |
|---|
| | |
|---|
| | | <Map ref="modalForm" /> |
|---|
| | | </div> |
|---|
| | | <div> |
|---|
| | | <div class="data-table map-people-table" |
|---|
| | | v-show='!detailFlag'> |
|---|
| | | <el-table :data="tableData" |
|---|
| | | <div class="data-table map-people-table" v-show="!detailFlag"> |
|---|
| | | <el-table |
|---|
| | | :data="tableData" |
|---|
| | | style="width: 100%" |
|---|
| | | v-loading="loading"> |
|---|
| | | <el-table-column align="center" |
|---|
| | | v-loading="loading" |
|---|
| | | > |
|---|
| | | <el-table-column |
|---|
| | | align="center" |
|---|
| | | prop="gunMode" |
|---|
| | | label="枪支类型" |
|---|
| | | width="136"> |
|---|
| | | </el-table-column> |
|---|
| | | |
|---|
| | | <el-table-column align="center" |
|---|
| | | prop="personInCharge" |
|---|
| | | label="责任人"> |
|---|
| | | </el-table-column> |
|---|
| | | |
|---|
| | | <el-table-column label="操作" |
|---|
| | | width="136" |
|---|
| | | align='center'> |
|---|
| | | > |
|---|
| | | </el-table-column> |
|---|
| | | |
|---|
| | | <el-table-column |
|---|
| | | align="center" |
|---|
| | | prop="personInCharge" |
|---|
| | | label="责任人" |
|---|
| | | > |
|---|
| | | </el-table-column> |
|---|
| | | |
|---|
| | | <el-table-column label="操作" width="136" align="center"> |
|---|
| | | <template slot-scope="scope"> |
|---|
| | | <el-button @click="positionClick(scope.row)" |
|---|
| | | <el-button |
|---|
| | | @click="positionClick(scope.row)" |
|---|
| | | type="text" |
|---|
| | | size="small" |
|---|
| | | title='定位'> |
|---|
| | | <i class='el-icon-location'></i> |
|---|
| | | title="定位" |
|---|
| | | > |
|---|
| | | <i class="el-icon-location"></i> |
|---|
| | | </el-button> |
|---|
| | | <el-button @click="detailsClick(scope.row)" |
|---|
| | | <el-button |
|---|
| | | @click="detailsClick(scope.row)" |
|---|
| | | type="text" |
|---|
| | | size="small" |
|---|
| | | title='轨迹'> |
|---|
| | | <i class='el-icon-position'></i> |
|---|
| | | title="轨迹" |
|---|
| | | > |
|---|
| | | <i class="el-icon-position"></i> |
|---|
| | | </el-button> |
|---|
| | | </template> |
|---|
| | | </el-table-column> |
|---|
| | | </el-table> |
|---|
| | | <div ref="tablePagination"> |
|---|
| | | <el-pagination @size-change="handleSizeChange" |
|---|
| | | <el-pagination |
|---|
| | | @size-change="handleSizeChange" |
|---|
| | | @current-change="handleCurrentChange" |
|---|
| | | background |
|---|
| | | :page-sizes="[10, 30, 50, 100]" |
|---|
| | |
|---|
| | | :current-page="page.currentPage" |
|---|
| | | :page-size="page.pageSize" |
|---|
| | | :pager-count="3" |
|---|
| | | :total="page.total"> |
|---|
| | | :total="page.total" |
|---|
| | | > |
|---|
| | | </el-pagination> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class='track-box' |
|---|
| | | v-show='detailFlag'> |
|---|
| | | <div class="track-box" v-show="detailFlag"> |
|---|
| | | <div> |
|---|
| | | <el-button @click="goOut" |
|---|
| | | type="text" |
|---|
| | | size="small" |
|---|
| | | title='轨迹'> |
|---|
| | | <i class='el-icon-back'></i> |
|---|
| | | <el-button @click="goOut" type="text" size="small" title="轨迹"> |
|---|
| | | <i class="el-icon-back"></i> |
|---|
| | | </el-button> |
|---|
| | | |
|---|
| | | 详细资料及轨迹查询 |
|---|
| | | </div> |
|---|
| | | <ul> |
|---|
| | | |
|---|
| | | <li> |
|---|
| | | <div>枪支类型：</div> |
|---|
| | | <div>{{ detailObj.gunMode }}</div> |
|---|
| | |
|---|
| | | |
|---|
| | | <li> |
|---|
| | | <div>选择时间：</div> |
|---|
| | | <div> |
|---|
| | | <el-date-picker v-model="trackTime" |
|---|
| | | <div class="datetime"> |
|---|
| | | <el-date-picker |
|---|
| | | v-model="trackTime" |
|---|
| | | type="datetimerange" |
|---|
| | | range-separator="至" |
|---|
| | | start-placeholder="开始日期" |
|---|
| | | size='mini' |
|---|
| | | :editable='false' |
|---|
| | | end-placeholder="结束日期"> |
|---|
| | | size="mini" |
|---|
| | | :editable="false" |
|---|
| | | end-placeholder="结束日期" |
|---|
| | | > |
|---|
| | | </el-date-picker> |
|---|
| | | </div> |
|---|
| | | </li> |
|---|
| | | |
|---|
| | | <li> |
|---|
| | | <el-button type="text" |
|---|
| | | @click="lookTrack"> |
|---|
| | | <el-button type="text" @click="lookTrack"> |
|---|
| | | 查看轨迹 |
|---|
| | | </el-button> |
|---|
| | | </li> |
|---|
| | | |
|---|
| | | </ul> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import { getGunList, getPosition, getTrack } from "@/api/map/gun"; |
|---|
| | | |
|---|
| | | import { |
|---|
| | | getGunList, |
|---|
| | | getPosition, |
|---|
| | | getTrack |
|---|
| | | } from '@/api/map/gun' |
|---|
| | | |
|---|
| | | import gunPng from '@/assets/img/gun.png' |
|---|
| | | import gunPng from "@/assets/img/gun.png"; |
|---|
| | | |
|---|
| | | export default { |
|---|
| | | data () { |
|---|
| | |
|---|
| | | detailFlag: false, |
|---|
| | | loading: true, |
|---|
| | | trackTime: [], |
|---|
| | | detailObj: {} |
|---|
| | | } |
|---|
| | | detailObj: {}, |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | created () { |
|---|
| | | this.getList() |
|---|
| | | |
|---|
| | | this.getList(); |
|---|
| | | }, |
|---|
| | | mounted () { |
|---|
| | | |
|---|
| | | }, |
|---|
| | | mounted() {}, |
|---|
| | | methods: { |
|---|
| | | getList () { |
|---|
| | | getGunList({ current: this.page.currentPage, size: this.page.pageSize }).then(res => { |
|---|
| | | var data = res.data.data |
|---|
| | | this.tableData = data.records |
|---|
| | | this.page.total = data.total |
|---|
| | | this.loading = false |
|---|
| | | }) |
|---|
| | | getGunList({ |
|---|
| | | current: this.page.currentPage, |
|---|
| | | size: this.page.pageSize, |
|---|
| | | }).then((res) => { |
|---|
| | | var data = res.data.data; |
|---|
| | | this.tableData = data.records; |
|---|
| | | this.page.total = data.total; |
|---|
| | | this.loading = false; |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | handleSizeChange (val) { |
|---|
| | | this.page.pageSize = val |
|---|
| | | this.loading = true |
|---|
| | | this.getList() |
|---|
| | | this.page.pageSize = val; |
|---|
| | | this.loading = true; |
|---|
| | | this.getList(); |
|---|
| | | }, |
|---|
| | | handleCurrentChange (val) { |
|---|
| | | this.page.currentPage = val |
|---|
| | | this.loading = true |
|---|
| | | this.getList() |
|---|
| | | this.page.currentPage = val; |
|---|
| | | this.loading = true; |
|---|
| | | this.getList(); |
|---|
| | | }, |
|---|
| | | |
|---|
| | | positionClick (val) { |
|---|
| | | getPosition({ type: 3, workerId: val.id }).then(result => { |
|---|
| | | var res = result.data.data |
|---|
| | | getPosition({ type: 3, workerId: val.id }).then((result) => { |
|---|
| | | var res = result.data.data; |
|---|
| | | if (JSON.stringify(res) != "{}") { |
|---|
| | | this.$refs.modalForm.addEntitys({ |
|---|
| | | LGTD: 115.860, |
|---|
| | | LTTD: 28.710, |
|---|
| | | name: '枪支位置' |
|---|
| | | }, gunPng, 0.8, 'gunlayer', 'gunAddlayer'); |
|---|
| | | this.$refs.modalForm.addEntitys( |
|---|
| | | { |
|---|
| | | LGTD: 115.86, |
|---|
| | | LTTD: 28.71, |
|---|
| | | name: "枪支位置", |
|---|
| | | }, |
|---|
| | | gunPng, |
|---|
| | | 0.8, |
|---|
| | | "gunlayer", |
|---|
| | | "gunAddlayer" |
|---|
| | | ); |
|---|
| | | } |
|---|
| | | |
|---|
| | | }) |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | |
|---|
| | | detailsClick (row) { |
|---|
| | | this.detailFlag = true |
|---|
| | | this.detailFlag = true; |
|---|
| | | this.detailObj = { |
|---|
| | | gunMode: row.gunMode, |
|---|
| | | personInCharge: row.personInCharge, |
|---|
| | |
|---|
| | | validTime: row.validTime, |
|---|
| | | issueUnit: row.issueUnit, |
|---|
| | | cardNumber: row.cardNumber, |
|---|
| | | id: row.id |
|---|
| | | } |
|---|
| | | |
|---|
| | | id: row.id, |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | |
|---|
| | | lookTrack () { |
|---|
| | | if (this.trackTime.length == 0) { |
|---|
| | | this.$message({ message: '请选择开始时间', duration: 2000 }) |
|---|
| | | return |
|---|
| | | this.$message({ message: "请选择开始时间", duration: 2000 }); |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | const startTime = new Date(this.trackTime[0]) |
|---|
| | | 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()) |
|---|
| | | ":" + |
|---|
| | | this.disposeTime(startTime.getSeconds()); |
|---|
| | | if (this.trackTime.length == 1) { |
|---|
| | | this.$message({ message: '请选择结束时间', duration: 2000 }) |
|---|
| | | return |
|---|
| | | this.$message({ message: "请选择结束时间", duration: 2000 }); |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | const endTime = new Date(this.trackTime[1]) |
|---|
| | | 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.disposeTime(endTime.getSeconds()); |
|---|
| | | |
|---|
| | | getTrack({ workerId: this.detailObj.id, type: 3, startTime: start, endTime: end }).then(res => { |
|---|
| | | var result = res.data.data |
|---|
| | | getTrack({ |
|---|
| | | workerId: this.detailObj.id, |
|---|
| | | type: 3, |
|---|
| | | startTime: start, |
|---|
| | | endTime: end, |
|---|
| | | }).then((res) => { |
|---|
| | | var result = res.data.data; |
|---|
| | | if (result.length > 1) { |
|---|
| | | let arr = [] |
|---|
| | | let arr = []; |
|---|
| | | |
|---|
| | | result.forEach(item => { |
|---|
| | | arr.push([Number(item.longitude), Number(item.latitude)]) |
|---|
| | | }) |
|---|
| | | result.forEach((item) => { |
|---|
| | | arr.push([Number(item.longitude), Number(item.latitude)]); |
|---|
| | | }); |
|---|
| | | |
|---|
| | | this.$refs.modalForm.addLines(arr); |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | // 处理时间补零操作 |
|---|
| | | disposeTime (s) { |
|---|
| | | return s < 10 ? '0' + s : s |
|---|
| | | return s < 10 ? "0" + s : s; |
|---|
| | | }, |
|---|
| | | |
|---|
| | | goOut () { |
|---|
| | | this.detailFlag = !this.detailFlag |
|---|
| | | this.$refs.modalForm.clearLine() |
|---|
| | | this.trackTime = [] |
|---|
| | | } |
|---|
| | | this.detailFlag = !this.detailFlag; |
|---|
| | | this.$refs.modalForm.clearLine(); |
|---|
| | | this.trackTime = []; |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | destroyed () { |
|---|
| | | |
|---|
| | | window.ol2d.removeLayer(this.peopleAddlayer) |
|---|
| | | |
|---|
| | | window.ol2d.removeLayer(this.peopleAddlayer); |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | .data-table { |
|---|
| | | border: 1px solid transparent !important; |
|---|
| | | box-shadow: 3px 3px 15px -2px rgb(0, 0, 0) !important; |
|---|
| | | } |
|---|
| | | .card-body { |
|---|
| | | display: flex; |
|---|
| | | & > div:first-child { |
|---|
| | |
|---|
| | | <Map ref="modalForm" /> |
|---|
| | | </div> |
|---|
| | | <div> |
|---|
| | | <div class="data-table map-people-table" |
|---|
| | | v-show='!detailFlag'> |
|---|
| | | <el-table :data="tableData" |
|---|
| | | <div class="data-table map-people-table" v-show="!detailFlag"> |
|---|
| | | <el-table |
|---|
| | | :data="tableData" |
|---|
| | | style="width: 100%" |
|---|
| | | v-loading="loading"> |
|---|
| | | <el-table-column align="center" |
|---|
| | | v-loading="loading" |
|---|
| | | > |
|---|
| | | <el-table-column |
|---|
| | | align="center" |
|---|
| | | prop="realName" |
|---|
| | | label="姓名" |
|---|
| | | width="136"> |
|---|
| | | </el-table-column> |
|---|
| | | |
|---|
| | | <el-table-column align="center" |
|---|
| | | prop="roleName" |
|---|
| | | label="所属角色"> |
|---|
| | | </el-table-column> |
|---|
| | | |
|---|
| | | <el-table-column label="操作" |
|---|
| | | width="136" |
|---|
| | | align='center'> |
|---|
| | | > |
|---|
| | | </el-table-column> |
|---|
| | | |
|---|
| | | <el-table-column |
|---|
| | | align="center" |
|---|
| | | prop="roleName" |
|---|
| | | label="所属角色" |
|---|
| | | > |
|---|
| | | </el-table-column> |
|---|
| | | |
|---|
| | | <el-table-column label="操作" width="136" align="center"> |
|---|
| | | <template slot-scope="scope"> |
|---|
| | | <el-button @click="positionClick(scope.row)" |
|---|
| | | <el-button |
|---|
| | | @click="positionClick(scope.row)" |
|---|
| | | type="text" |
|---|
| | | size="small" |
|---|
| | | title='定位'> |
|---|
| | | <i class='el-icon-location'></i> |
|---|
| | | title="定位" |
|---|
| | | > |
|---|
| | | <i class="el-icon-location"></i> |
|---|
| | | </el-button> |
|---|
| | | <el-button @click="detailsClick(scope.row)" |
|---|
| | | <el-button |
|---|
| | | @click="detailsClick(scope.row)" |
|---|
| | | type="text" |
|---|
| | | size="small" |
|---|
| | | title='轨迹'> |
|---|
| | | <i class='el-icon-position'></i> |
|---|
| | | title="轨迹" |
|---|
| | | > |
|---|
| | | <i class="el-icon-position"></i> |
|---|
| | | </el-button> |
|---|
| | | </template> |
|---|
| | | </el-table-column> |
|---|
| | | </el-table> |
|---|
| | | <div ref="tablePagination"> |
|---|
| | | <el-pagination @size-change="handleSizeChange" |
|---|
| | | <el-pagination |
|---|
| | | @size-change="handleSizeChange" |
|---|
| | | @current-change="handleCurrentChange" |
|---|
| | | background |
|---|
| | | :page-sizes="[10, 30, 50, 100]" |
|---|
| | |
|---|
| | | :current-page="page.currentPage" |
|---|
| | | :page-size="page.pageSize" |
|---|
| | | :pager-count="3" |
|---|
| | | :total="page.total"> |
|---|
| | | :total="page.total" |
|---|
| | | > |
|---|
| | | </el-pagination> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class='track-box' |
|---|
| | | v-show='detailFlag'> |
|---|
| | | <div class="track-box" v-show="detailFlag"> |
|---|
| | | <div> |
|---|
| | | <el-button @click="goOut" |
|---|
| | | type="text" |
|---|
| | | size="small" |
|---|
| | | title='轨迹'> |
|---|
| | | <i class='el-icon-back'></i> |
|---|
| | | <el-button @click="goOut" type="text" size="small" title="轨迹"> |
|---|
| | | <i class="el-icon-back"></i> |
|---|
| | | </el-button> |
|---|
| | | |
|---|
| | | 详细资料及轨迹查询 |
|---|
| | | </div> |
|---|
| | | <ul> |
|---|
| | | |
|---|
| | | <li> |
|---|
| | | <div>姓名：</div> |
|---|
| | | <div>{{ detailObj.name }}</div> |
|---|
| | |
|---|
| | | |
|---|
| | | <li> |
|---|
| | | <div>选择时间：</div> |
|---|
| | | <div> |
|---|
| | | <el-date-picker v-model="trackTime" |
|---|
| | | <div class="datetime"> |
|---|
| | | <el-date-picker |
|---|
| | | v-model="trackTime" |
|---|
| | | type="datetimerange" |
|---|
| | | range-separator="至" |
|---|
| | | start-placeholder="开始日期" |
|---|
| | | size='mini' |
|---|
| | | :editable='false' |
|---|
| | | end-placeholder="结束日期"> |
|---|
| | | size="mini" |
|---|
| | | :editable="false" |
|---|
| | | end-placeholder="结束日期" |
|---|
| | | > |
|---|
| | | </el-date-picker> |
|---|
| | | </div> |
|---|
| | | </li> |
|---|
| | | |
|---|
| | | <li> |
|---|
| | | <el-button type="text" |
|---|
| | | @click="lookTrack"> |
|---|
| | | <el-button type="text" @click="lookTrack"> |
|---|
| | | 查看轨迹 |
|---|
| | | </el-button> |
|---|
| | | </li> |
|---|
| | | |
|---|
| | | </ul> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import { |
|---|
| | | getPeopleList, |
|---|
| | | getPosition, |
|---|
| | | getTrack |
|---|
| | | } from '@/api/map/people' |
|---|
| | | import { getPeopleList, getPosition, getTrack } from "@/api/map/people"; |
|---|
| | | |
|---|
| | | import peoplePng from '@/assets/img/people.png' |
|---|
| | | import peoplePng from "@/assets/img/people.png"; |
|---|
| | | |
|---|
| | | export default { |
|---|
| | | data () { |
|---|
| | |
|---|
| | | detailFlag: false, |
|---|
| | | loading: true, |
|---|
| | | trackTime: [], |
|---|
| | | detailObj: {} |
|---|
| | | } |
|---|
| | | detailObj: {}, |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | created () { |
|---|
| | | |
|---|
| | | }, |
|---|
| | | created() {}, |
|---|
| | | mounted () { |
|---|
| | | this.getList() |
|---|
| | | |
|---|
| | | |
|---|
| | | this.getList(); |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | getList () { |
|---|
| | | getPeopleList({ current: this.page.currentPage, size: this.page.pageSize }).then(res => { |
|---|
| | | var data = res.data.data |
|---|
| | | this.tableData = data.records |
|---|
| | | this.page.total = data.total |
|---|
| | | this.loading = false |
|---|
| | | }) |
|---|
| | | getPeopleList({ |
|---|
| | | current: this.page.currentPage, |
|---|
| | | size: this.page.pageSize, |
|---|
| | | }).then((res) => { |
|---|
| | | var data = res.data.data; |
|---|
| | | this.tableData = data.records; |
|---|
| | | this.page.total = data.total; |
|---|
| | | this.loading = false; |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | handleSizeChange (val) { |
|---|
| | | this.page.pageSize = val |
|---|
| | | this.loading = true |
|---|
| | | this.getList() |
|---|
| | | this.page.pageSize = val; |
|---|
| | | this.loading = true; |
|---|
| | | this.getList(); |
|---|
| | | }, |
|---|
| | | handleCurrentChange (val) { |
|---|
| | | this.page.currentPage = val |
|---|
| | | this.loading = true |
|---|
| | | this.getList() |
|---|
| | | this.page.currentPage = val; |
|---|
| | | this.loading = true; |
|---|
| | | this.getList(); |
|---|
| | | }, |
|---|
| | | |
|---|
| | | positionClick (val) { |
|---|
| | | getPosition({ type: 1, workerId: val.id }).then(result => { |
|---|
| | | var res = result.data.data |
|---|
| | | getPosition({ type: 1, workerId: val.id }).then((result) => { |
|---|
| | | var res = result.data.data; |
|---|
| | | if (JSON.stringify(res) != "{}") { |
|---|
| | | this.$refs.modalForm.addEntitys({ |
|---|
| | | this.$refs.modalForm.addEntitys( |
|---|
| | | { |
|---|
| | | LGTD: res.longitude, |
|---|
| | | LTTD: res.latitude, |
|---|
| | | name: '人员位置' |
|---|
| | | }, peoplePng, 0.5, 'peoplelayer', 'peopleAddlayer'); |
|---|
| | | name: "人员位置", |
|---|
| | | }, |
|---|
| | | peoplePng, |
|---|
| | | 0.5, |
|---|
| | | "peoplelayer", |
|---|
| | | "peopleAddlayer" |
|---|
| | | ); |
|---|
| | | } |
|---|
| | | |
|---|
| | | }) |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | |
|---|
| | | detailsClick (row) { |
|---|
| | | this.detailFlag = true |
|---|
| | | this.detailFlag = true; |
|---|
| | | this.detailObj = { |
|---|
| | | name: row.realName, |
|---|
| | | role: row.roleName, |
|---|
| | | phone: row.phone, |
|---|
| | | address: row.address, |
|---|
| | | id: row.id |
|---|
| | | } |
|---|
| | | |
|---|
| | | id: row.id, |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | |
|---|
| | | lookTrack () { |
|---|
| | | if (this.trackTime.length == 0) { |
|---|
| | | this.$message({ message: '请选择开始时间', duration: 2000 }) |
|---|
| | | return |
|---|
| | | this.$message({ message: "请选择开始时间", duration: 2000 }); |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | const startTime = new Date(this.trackTime[0]) |
|---|
| | | 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()) |
|---|
| | | ":" + |
|---|
| | | this.disposeTime(startTime.getSeconds()); |
|---|
| | | if (this.trackTime.length == 1) { |
|---|
| | | this.$message({ message: '请选择结束时间', duration: 2000 }) |
|---|
| | | return |
|---|
| | | this.$message({ message: "请选择结束时间", duration: 2000 }); |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | const endTime = new Date(this.trackTime[1]) |
|---|
| | | 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.disposeTime(endTime.getSeconds()); |
|---|
| | | |
|---|
| | | getTrack({ workerId: this.detailObj.id, type: 1, startTime: start, endTime: end }).then(res => { |
|---|
| | | var result = res.data.data |
|---|
| | | getTrack({ |
|---|
| | | workerId: this.detailObj.id, |
|---|
| | | type: 1, |
|---|
| | | startTime: start, |
|---|
| | | endTime: end, |
|---|
| | | }).then((res) => { |
|---|
| | | var result = res.data.data; |
|---|
| | | if (result.length > 1) { |
|---|
| | | let arr = [] |
|---|
| | | let arr = []; |
|---|
| | | |
|---|
| | | result.forEach(item => { |
|---|
| | | arr.push([Number(item.longitude), Number(item.latitude)]) |
|---|
| | | }) |
|---|
| | | result.forEach((item) => { |
|---|
| | | arr.push([Number(item.longitude), Number(item.latitude)]); |
|---|
| | | }); |
|---|
| | | |
|---|
| | | this.$refs.modalForm.addLines(arr); |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | // 处理时间补零操作 |
|---|
| | | disposeTime (s) { |
|---|
| | | return s < 10 ? '0' + s : s |
|---|
| | | return s < 10 ? "0" + s : s; |
|---|
| | | }, |
|---|
| | | |
|---|
| | | goOut () { |
|---|
| | | this.detailFlag = !this.detailFlag |
|---|
| | | this.$refs.modalForm.clearLine() |
|---|
| | | this.trackTime = [] |
|---|
| | | } |
|---|
| | | this.detailFlag = !this.detailFlag; |
|---|
| | | this.$refs.modalForm.clearLine(); |
|---|
| | | this.trackTime = []; |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | destroyed () { |
|---|
| | | |
|---|
| | | window.ol2d.removeLayer(this.peopleAddlayer) |
|---|
| | | |
|---|
| | | window.ol2d.removeLayer(this.peopleAddlayer); |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" scoped> |
|---|
| | |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .el-range-editor--mini .el-range-input { |
|---|
| | | background-color: #004ca7 !important; |
|---|
| | | color: #fff !important; |
|---|
| | | } |
|---|
| | | .data-table { |
|---|
| | | border: 1px solid transparent !important; |
|---|
| | | box-shadow: 3px 3px 15px -2px rgb(0, 0, 0) !important; |
|---|
| | | } |
|---|
| | | </style> |
|---|
