| | |
|---|
| | | * @Author: Morpheus |
|---|
| | | * @Date: 2021-07-05 16:31:54 |
|---|
| | | * @Last Modified by: Morpheus |
|---|
| | | * @Last Modified time: 2021-11-30 16:47:29 |
|---|
| | | * @Last Modified time: 2021-12-02 08:50:15 |
|---|
| | | * 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="gunMode" |
|---|
| | | 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="gunMode" |
|---|
| | | label="枪支型号" |
|---|
| | | width="136"> |
|---|
| | | </el-table-column> |
|---|
| | | |
|---|
| | | <el-table-column |
|---|
| | | align="center" |
|---|
| | | prop="personInCharge" |
|---|
| | | label="责任人" |
|---|
| | | > |
|---|
| | | </el-table-column> |
|---|
| | | <el-table-column align="center" |
|---|
| | | prop="gunCardNumber" |
|---|
| | | label="枪号"> |
|---|
| | | </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 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> |
|---|
| | | |
|---|
| | | 详细资料及轨迹查询 |
|---|
| | | </div> |
|---|
| | | <ul> |
|---|
| | | <li> |
|---|
| | | <div>枪支类型：</div> |
|---|
| | | <div>{{ detailObj.gunMode }}</div> |
|---|
| | | </li> |
|---|
| | | 详细资料及轨迹查询 |
|---|
| | | </div> |
|---|
| | | <ul> |
|---|
| | | <li> |
|---|
| | | <div>枪支类型：</div> |
|---|
| | | <div>{{ detailObj.gunMode }}</div> |
|---|
| | | </li> |
|---|
| | | |
|---|
| | | <li> |
|---|
| | | <div>责任人：</div> |
|---|
| | | <div>{{ detailObj.personInCharge }}</div> |
|---|
| | | </li> |
|---|
| | | <li> |
|---|
| | | <div>枪号：</div> |
|---|
| | | <div>{{ detailObj.gunCardNumber }}</div> |
|---|
| | | </li> |
|---|
| | | |
|---|
| | | <li> |
|---|
| | | <div>发证日期：</div> |
|---|
| | | <div>{{ detailObj.issueTime }}</div> |
|---|
| | | </li> |
|---|
| | | <li> |
|---|
| | | <div>护卫员：</div> |
|---|
| | | <div>{{ detailObj.personInCharge }}</div> |
|---|
| | | </li> |
|---|
| | | |
|---|
| | | <li> |
|---|
| | | <div>有效日期：</div> |
|---|
| | | <div>{{ detailObj.validTime }}</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.issueUnit }}</div> |
|---|
| | | </li> |
|---|
| | | |
|---|
| | | <li> |
|---|
| | | <div>用枪编号：</div> |
|---|
| | | <div>{{ detailObj.cardNumber }}</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> |
|---|
| | | <li> |
|---|
| | | <el-button type="text" |
|---|
| | | @click="lookTrack"> |
|---|
| | | 查看轨迹 |
|---|
| | | </el-button> |
|---|
| | | </li> |
|---|
| | | </ul> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </el-card> |
|---|
| | | </el-col> |
|---|
| | | </el-row> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import { getGunList, getPosition, getTrack, getNewTrack } from "@/api/map/gun"; |
|---|
| | | import { getGunList, getTrack } from "@/api/map/gun"; |
|---|
| | | |
|---|
| | | import gunPng from "@/assets/img/gun.png"; |
|---|
| | | |
|---|
| | | export default { |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | tableData: [], |
|---|
| | | page: { |
|---|
| | | pageSize: 10, |
|---|
| | | currentPage: 1, |
|---|
| | | total: 0, |
|---|
| | | }, |
|---|
| | | detailFlag: false, |
|---|
| | | loading: true, |
|---|
| | | trackTime: [], |
|---|
| | | detailObj: {}, |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | created() { |
|---|
| | | this.getList(); |
|---|
| | | }, |
|---|
| | | 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; |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | 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: 3, workerId: val.id }).then((result) => { |
|---|
| | | var res = result.data.data; |
|---|
| | | if (JSON.stringify(res) != "{}") { |
|---|
| | | this.$refs.modalForm.addEntitys( |
|---|
| | | { |
|---|
| | | LGTD: 115.86, |
|---|
| | | LTTD: 28.71, |
|---|
| | | name: "枪支位置", |
|---|
| | | data () { |
|---|
| | | return { |
|---|
| | | tableData: [], |
|---|
| | | page: { |
|---|
| | | pageSize: 10, |
|---|
| | | currentPage: 1, |
|---|
| | | total: 0, |
|---|
| | | }, |
|---|
| | | gunPng, |
|---|
| | | 0.8, |
|---|
| | | "gunlayer", |
|---|
| | | "gunAddlayer" |
|---|
| | | ); |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | detailFlag: false, |
|---|
| | | loading: true, |
|---|
| | | trackTime: [], |
|---|
| | | detailObj: {}, |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | |
|---|
| | | detailsClick(row) { |
|---|
| | | this.detailFlag = true; |
|---|
| | | this.detailObj = { |
|---|
| | | gunMode: row.gunMode, |
|---|
| | | personInCharge: row.personInCharge, |
|---|
| | | issueTime: row.issueTime, |
|---|
| | | validTime: row.validTime, |
|---|
| | | issueUnit: row.issueUnit, |
|---|
| | | cardNumber: row.cardNumber, |
|---|
| | | id: row.id, |
|---|
| | | }; |
|---|
| | | created () { |
|---|
| | | this.getList(); |
|---|
| | | }, |
|---|
| | | 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; |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | handleSizeChange (val) { |
|---|
| | | this.page.pageSize = val; |
|---|
| | | this.loading = true; |
|---|
| | | this.getList(); |
|---|
| | | }, |
|---|
| | | handleCurrentChange (val) { |
|---|
| | | this.page.currentPage = val; |
|---|
| | | this.loading = true; |
|---|
| | | this.getList(); |
|---|
| | | }, |
|---|
| | | |
|---|
| | | 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()); |
|---|
| | | 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()); |
|---|
| | | positionClick (val) { |
|---|
| | | var timestamp = Date.parse(new Date()); |
|---|
| | | |
|---|
| | | // getTrack({ |
|---|
| | | // workerId: this.detailObj.id, |
|---|
| | | // type: 3, |
|---|
| | | // startTime: start, |
|---|
| | | // endTime: end, |
|---|
| | | // }).then((res) => { |
|---|
| | | // var result = res.data.data; |
|---|
| | | // if (result.length > 1) { |
|---|
| | | // let arr = []; |
|---|
| | | var serverDate = new Date(timestamp); |
|---|
| | | |
|---|
| | | // result.forEach((item) => { |
|---|
| | | // arr.push([Number(item.longitude), Number(item.latitude)]); |
|---|
| | | // }); |
|---|
| | | |
|---|
| | | // this.$refs.modalForm.addLines(arr); |
|---|
| | | // } |
|---|
| | | // }); |
|---|
| | | |
|---|
| | | getNewTrack({ |
|---|
| | | startTime: start, |
|---|
| | | endTime: end, |
|---|
| | | }).then((res) => { |
|---|
| | | console.log(res, "车辆轨迹"); |
|---|
| | | var result = res.data.data; |
|---|
| | | if (result.length > 1) { |
|---|
| | | let arr = []; |
|---|
| | | |
|---|
| | | result.res.forEach((item) => { |
|---|
| | | arr.push([Number(item.dwjd), Number(item.dwwd)]); |
|---|
| | | }); |
|---|
| | | |
|---|
| | | this.$refs.modalForm.addLines(arr); |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | const start = |
|---|
| | | (serverDate.getFullYear() - 5) + |
|---|
| | | "-" + |
|---|
| | | this.disposeTime(serverDate.getMonth() + 1) + |
|---|
| | | "-" + |
|---|
| | | this.disposeTime(serverDate.getDate()) + |
|---|
| | | " " + |
|---|
| | | this.disposeTime(serverDate.getHours()) + |
|---|
| | | ":" + |
|---|
| | | this.disposeTime(serverDate.getMinutes()) + |
|---|
| | | ":" + |
|---|
| | | this.disposeTime(serverDate.getSeconds()); |
|---|
| | | |
|---|
| | | |
|---|
| | | const end = |
|---|
| | | serverDate.getFullYear() + |
|---|
| | | "-" + |
|---|
| | | this.disposeTime(serverDate.getMonth() + 1) + |
|---|
| | | "-" + |
|---|
| | | this.disposeTime(serverDate.getDate()) + |
|---|
| | | " " + |
|---|
| | | this.disposeTime(serverDate.getHours()) + |
|---|
| | | ":" + |
|---|
| | | this.disposeTime(serverDate.getMinutes()) + |
|---|
| | | ":" + |
|---|
| | | this.disposeTime(serverDate.getSeconds()); |
|---|
| | | |
|---|
| | | |
|---|
| | | getTrack({ |
|---|
| | | idCardNo: val.cardNo, |
|---|
| | | startTime: start, |
|---|
| | | endTime: end, |
|---|
| | | }).then((res) => { |
|---|
| | | var result = res.data.res; |
|---|
| | | if (JSON.stringify(res) != "{}") { |
|---|
| | | var array = result.sort(function (a, b) { |
|---|
| | | return a['dwsj'] < b['dwsj'] ? 1 : -1 |
|---|
| | | }) |
|---|
| | | |
|---|
| | | this.$refs.modalForm.addEntitys( |
|---|
| | | { |
|---|
| | | LGTD: Number(array[0].dwjd), |
|---|
| | | LTTD: Number(array[0].dwwd), |
|---|
| | | name: "枪支位置", |
|---|
| | | }, |
|---|
| | | gunPng, |
|---|
| | | 0.8, |
|---|
| | | "gunlayer", |
|---|
| | | "gunAddlayer" |
|---|
| | | ); |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | |
|---|
| | | detailsClick (row) { |
|---|
| | | this.detailFlag = true; |
|---|
| | | this.detailObj = { |
|---|
| | | gunMode: row.gunMode, |
|---|
| | | personInCharge: row.personInCharge, |
|---|
| | | issueTime: row.issueTime, |
|---|
| | | validTime: row.validTime, |
|---|
| | | issueUnit: row.issueUnit, |
|---|
| | | cardNumber: row.cardNumber, |
|---|
| | | id: row.id, |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | |
|---|
| | | 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()); |
|---|
| | | 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()); |
|---|
| | | |
|---|
| | | getTrack({ |
|---|
| | | idCardNo: this.detailObj.cardNo, |
|---|
| | | startTime: start, |
|---|
| | | endTime: end, |
|---|
| | | }).then((res) => { |
|---|
| | | var result = res.data.res; |
|---|
| | | if (result.length > 1) { |
|---|
| | | let arr = []; |
|---|
| | | |
|---|
| | | var array = result.sort(function (a, b) { |
|---|
| | | return a['dwsj'] > b['dwsj'] ? 1 : -1 |
|---|
| | | }) |
|---|
| | | |
|---|
| | | array.forEach((item) => { |
|---|
| | | arr.push([Number(item.dwjd), Number(item.dwwd)]); |
|---|
| | | }); |
|---|
| | | |
|---|
| | | 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> |
|---|
| | | .data-table { |
|---|
| | | border: 1px solid transparent !important; |
|---|
| | | box-shadow: 3px 3px 15px -2px rgb(0, 0, 0) !important; |
|---|
| | | border: 1px solid transparent !important; |
|---|
| | | box-shadow: 3px 3px 15px -2px rgb(0, 0, 0) !important; |
|---|
| | | } |
|---|
| | | .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; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style> |
|---|
