From c916b63f60fa9e6de04d6400960db47bd7d6a9cd Mon Sep 17 00:00:00 2001
From: liuyg <376836862@qq.com>
Date: Mon, 26 Jul 2021 09:12:16 +0800
Subject: [PATCH] Merge branch 'master' of http://192.168.0.105:10010/r/zhba_regulatory
---
src/views/home/index.scss | 9
src/views/map/peopleGps.vue | 656 +++++++++++++++++++++++++++---------------------------
2 files changed, 338 insertions(+), 327 deletions(-)
diff --git a/src/views/home/index.scss b/src/views/home/index.scss
index a55c140..1539d67 100644
--- a/src/views/home/index.scss
+++ b/src/views/home/index.scss
@@ -257,12 +257,12 @@
top: 50px;
}
/deep/ .el-table--striped .el-table__body tr.el-table__row--striped td {
- background: #18458f;
+ background: #031d4b !important;
}
/deep/ .el-table--enable-row-transition .el-table__body td,
/deep/ .el-table th,
.el-table tr {
- background: #3457b1;
+ background: #03225b !important;
}
/deep/ .el-table .cell {
color: #fff;
@@ -271,6 +271,9 @@
/deep/ .el-table td,
.el-table th.is-leaf {
border-bottom-color: transparent;
+ }
+ /deep/ .el-table__header th{
+ border-bottom: 1px solid #031a38 !important;
}
/deep/.el-table--enable-row-hover .el-table__body tr:hover > td {
background-color: #b0caf3;
@@ -303,7 +306,7 @@
/deep/ .el-table--border::after,
/deep/ .el-table--group::after,
/deep/ .el-table::before {
- background-color: transparent;
+ background-color: transparent !important;
}
.card-text {
height: 30px;
diff --git a/src/views/map/peopleGps.vue b/src/views/map/peopleGps.vue
index dc1573d..f2b73df 100644
--- a/src/views/map/peopleGps.vue
+++ b/src/views/map/peopleGps.vue
@@ -2,132 +2,132 @@
* @Author: Morpheus
* @Date: 2021-07-05 16:31:54
* @Last Modified by: Morpheus
- * @Last Modified time: 2021-07-23 14:12:26
+ * @Last Modified time: 2021-07-23 14:54:47
* menu-name 押运人员定位
*/
<template>
- <el-row class="morpheus-map-box">
- <el-col :span="24">
- <el-card>
- <div class="card-body">
- <div>
- <Map ref="modalForm" />
- </div>
- <div>
- <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"
- prop="realName"
- label="姓名"
- width="136"
- >
- </el-table-column>
+ <el-row class="morpheus-map-box">
+ <el-col :span="24">
+ <el-card>
+ <div class="card-body">
+ <div>
+ <Map ref="modalForm" />
+ </div>
+ <div>
+ <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"
- prop="roleName"
- label="所属角色"
- >
- </el-table-column>
+ <el-table-column align="center"
+ prop="mapInd"
+ label="序号"
+ width="54">
+ </el-table-column>
- <el-table-column label="操作" width="136" align="center">
- <template slot-scope="scope">
- <el-button
- @click="positionClick(scope.row)"
- type="text"
- size="small"
- title="定位"
- >
- <i class="el-icon-location"></i>
- </el-button>
- <el-button
- @click="detailsClick(scope.row)"
- type="text"
- size="small"
- title="轨迹"
- >
- <i class="el-icon-position"></i>
- </el-button>
- </template>
- </el-table-column>
- </el-table>
- <div ref="tablePagination">
- <el-pagination
- @size-change="handleSizeChange"
- @current-change="handleCurrentChange"
- background
- :page-sizes="[10, 30, 50, 100]"
- layout="sizes, prev, pager, next"
- :current-page="page.currentPage"
- :page-size="page.pageSize"
- :pager-count="3"
- :total="page.total"
- >
- </el-pagination>
- </div>
- </div>
- <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>
+ <el-table-column align="center"
+ prop="realName"
+ label="姓名"
+ width="82">
+ </el-table-column>
- 详细资料及轨迹查询
- </div>
- <ul>
- <li>
- <div>姓名：</div>
- <div>{{ detailObj.name }}</div>
- </li>
+ <el-table-column align="center"
+ prop="deptName"
+ label="所属公司">
+ </el-table-column>
- <li>
- <div>所属角色：</div>
- <div>{{ detailObj.role }}</div>
- </li>
+ <el-table-column label="操作"
+ width="136"
+ align="center">
+ <template slot-scope="scope">
+ <el-button @click="positionClick(scope.row)"
+ type="text"
+ size="small"
+ title="定位">
+ <i class="el-icon-location"></i>
+ </el-button>
+ <el-button @click="detailsClick(scope.row)"
+ type="text"
+ size="small"
+ title="轨迹">
+ <i class="el-icon-position"></i>
+ </el-button>
+ </template>
+ </el-table-column>
+ </el-table>
+ <div ref="tablePagination">
+ <el-pagination @size-change="handleSizeChange"
+ @current-change="handleCurrentChange"
+ background
+ layout="prev, pager, next"
+ :current-page="page.currentPage"
+ :page-size="page.pageSize"
+ :pager-count="3"
+ :total="page.total">
+ </el-pagination>
+ </div>
+ </div>
+ <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>
- <li>
- <div>联系电话：</div>
- <div>{{ detailObj.phone }}</div>
- </li>
+ 详细资料及轨迹查询
+ </div>
+ <ul>
+ <li>
+ <div>姓名：</div>
+ <div>{{ detailObj.name }}</div>
+ </li>
- <li>
- <div>联系地址：</div>
- <div>{{ detailObj.address }}</div>
- </li>
+ <li>
+ <div>所属公司：</div>
+ <div>{{ detailObj.deptName }}</div>
+ </li>
- <li>
- <div>选择时间：</div>
- <div class="datetime">
- <el-date-picker
- v-model="trackTime"
- type="datetimerange"
- range-separator="至"
- start-placeholder="开始日期"
- size="mini"
- :editable="false"
- end-placeholder="结束日期"
- >
- </el-date-picker>
- </div>
- </li>
+ <li>
+ <div>联系电话：</div>
+ <div>{{ detailObj.phone }}</div>
+ </li>
- <li>
- <el-button type="text" @click="lookTrack">
- 查看轨迹
- </el-button>
- </li>
- </ul>
- </div>
- </div>
- </div>
- </el-card>
- </el-col>
- </el-row>
+ <li>
+ <div>联系地址：</div>
+ <div>{{ detailObj.address }}</div>
+ </li>
+
+ <li>
+ <div>选择时间：</div>
+ <div class="datetime">
+ <el-date-picker v-model="trackTime"
+ type="datetimerange"
+ 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>
+ </el-card>
+ </el-col>
+ </el-row>
</template>
<script>
@@ -136,238 +136,246 @@
import peoplePng from "@/assets/img/people.png";
export default {
- data() {
- return {
- tableData: [],
- page: {
- pageSize: 10,
- currentPage: 1,
- total: 0,
- },
- detailFlag: false,
- loading: true,
- trackTime: [],
- detailObj: {},
- };
- },
- created() {},
- mounted() {
- 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;
- });
- },
- handleSizeChange(val) {
- this.page.pageSize = val;
- this.loading = true;
- this.getList();
- },
- handleCurrentChange(val) {
- this.page.currentPage = val;
- this.loading = true;
- this.getList();
- },
-
- positionClick(val) {
- getPosition({ type: 1, workerId: val.id }).then((result) => {
- var res = result.data.data;
- if (JSON.stringify(res) != "{}") {
- this.$refs.modalForm.addEntitys(
- {
- LGTD: res.longitude,
- LTTD: res.latitude,
- name: "人员位置",
+ data () {
+ return {
+ tableData: [],
+ page: {
+ pageSize: 10,
+ currentPage: 1,
+ total: 0,
},
- peoplePng,
- 0.5,
- "peoplelayer",
- "peopleAddlayer"
- );
- }
- });
+ detailFlag: false,
+ loading: true,
+ trackTime: [],
+ detailObj: {},
+ };
},
-
- detailsClick(row) {
- this.detailFlag = true;
- this.detailObj = {
- name: row.realName,
- role: row.roleName,
- phone: row.phone,
- address: row.address,
- id: row.id,
- };
+ created () { },
+ mounted () {
+ this.getList();
},
+ methods: {
+ getList () {
+ getPeopleList({
+ current: this.page.currentPage,
+ size: this.page.pageSize,
+ }).then((res) => {
+ var data = res.data.data;
- lookTrack() {
- 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());
+ data.records.forEach((item, index) => {
+ if (data.current > 1) {
+ item.mapInd = (data.current - 1) * 10 + index + 1
+ } else {
+ item.mapInd = index + 1
+ }
+ })
+ this.tableData = data.records;
+ this.page.total = data.total;
+ this.loading = false;
+ });
+ },
+ handleSizeChange (val) {
+ this.page.pageSize = val;
+ this.loading = true;
+ this.getList();
+ },
+ handleCurrentChange (val) {
+ this.page.currentPage = val;
+ this.loading = true;
+ this.getList();
+ },
- getTrack({
- workerId: this.detailObj.id,
- type: 1,
- startTime: start,
- endTime: end,
- }).then((res) => {
- var result = res.data.data;
- if (result.length > 1) {
- let arr = [];
+ positionClick (val) {
+ getPosition({ type: 1, workerId: val.id }).then((result) => {
+ var res = result.data.data;
+ if (JSON.stringify(res) != "{}") {
+ this.$refs.modalForm.addEntitys(
+ {
+ LGTD: res.longitude,
+ LTTD: res.latitude,
+ name: "人员位置",
+ },
+ peoplePng,
+ 0.5,
+ "peoplelayer",
+ "peopleAddlayer"
+ );
+ }
+ });
+ },
- result.forEach((item) => {
- arr.push([Number(item.longitude), Number(item.latitude)]);
- });
+ detailsClick (row) {
+ this.detailFlag = true;
+ this.detailObj = {
+ name: row.realName,
+ deptName: row.deptName,
+ phone: row.phone,
+ address: row.address,
+ id: row.id,
+ };
+ },
- this.$refs.modalForm.addLines(arr);
- }
- });
+ lookTrack () {
+ 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());
+
+ getTrack({
+ workerId: this.detailObj.id,
+ type: 1,
+ startTime: start,
+ endTime: end,
+ }).then((res) => {
+ var result = res.data.data;
+ if (result.length > 1) {
+ let arr = [];
+
+ result.forEach((item) => {
+ arr.push([Number(item.longitude), Number(item.latitude)]);
+ });
+
+ this.$refs.modalForm.addLines(arr);
+ }
+ });
+ },
+ // 处理时间补零操作
+ disposeTime (s) {
+ return s < 10 ? "0" + s : s;
+ },
+
+ goOut () {
+ this.detailFlag = !this.detailFlag;
+ this.$refs.modalForm.clearLine();
+ this.trackTime = [];
+ },
},
- // 处理时间补零操作
- disposeTime(s) {
- return s < 10 ? "0" + s : s;
+ destroyed () {
+ window.ol2d.removeLayer(this.peopleAddlayer);
},
-
- goOut() {
- this.detailFlag = !this.detailFlag;
- this.$refs.modalForm.clearLine();
- this.trackTime = [];
- },
- },
- destroyed() {
- window.ol2d.removeLayer(this.peopleAddlayer);
- },
};
</script>
<style lang="scss" scoped>
.card-body {
- display: flex;
- & > div:first-child {
- flex: 8;
- }
-
- & > div:last-child {
- position: relative;
-
- flex: 3;
- & > div {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
-
- & > .el-table {
- height: calc(100% - 34px);
- }
+ display: flex;
+ & > div:first-child {
+ flex: 8;
}
- .track-box {
- & > div {
+ & > div:last-child {
position: relative;
- height: 42px;
- line-height: 42px;
- text-align: center;
- color: #fff;
- border-bottom: 1px solid #fff;
- .el-button {
- padding: 0 !important;
- position: absolute;
- top: 4px;
- left: 4px;
- width: 42px;
- height: 28px;
- line-height: 28px;
- }
- }
- ul {
- margin: 0;
- padding: 0px;
- }
- li {
- margin: 0;
- padding: 0 4px;
- list-style: none;
- height: 42px;
- line-height: 42px;
- display: flex;
- color: #fff;
- border-bottom: 1px solid #fff;
+
+ flex: 3;
& > div {
- text-align: center;
- }
- & > div:first-child {
- flex: 2;
- }
- & > div:last-child {
- flex: 6;
- & > div {
- width: 100% !important;
- }
- }
- }
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
- 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;
+ & > .el-table {
+ height: calc(100% - 34px);
+ }
}
- }
+
+ .track-box {
+ & > div {
+ position: relative;
+ height: 42px;
+ line-height: 42px;
+ text-align: center;
+ color: #fff;
+ border-bottom: 1px solid #fff;
+ .el-button {
+ padding: 0 !important;
+ position: absolute;
+ top: 4px;
+ left: 4px;
+ width: 42px;
+ height: 28px;
+ line-height: 28px;
+ }
+ }
+ ul {
+ margin: 0;
+ padding: 0px;
+ }
+ 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;
+ }
+ }
+ }
}
- }
}
.el-range-editor--mini .el-range-input {
- background-color: #004ca7 !important;
- color: #fff !important;
+ background-color: #004ca7 !important;
+ color: #fff !important;
}
</style>
--
Gitblit v1.9.3