Vue3 使用天地图绘制车辆历史轨迹
Vue3中使用天地图，自定义出车辆历史轨迹如下1. 引入在index.html 中引入天地图在线链接<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta n
·
Vue3中使用天地图，自定义出车辆历史轨迹如下
1. 引入
在index.html 中引入天地图在线链接
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>
德清餐厨垃圾收运处置监管平台
</title>
//引入天地图在线链接 tk 为你自己申请的tk
<script src="https://api.tianditu.gov.cn/api?v=3.0&tk=你申请的tk"
type="text/javascript"></script>
<script src="http://lbs.tianditu.gov.cn/js/lib/jquery/jquery-1.7.2.min.js"></script>
<!-- ECharts -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.0.2/dist/echarts.min.js"></script>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
Please enable it to continue.</strong>
</noscript>
<div id="app">
</div>
</body>
</html>
2. 使用
<template>
<div>
<!-- 车辆监督 -->
<div id="map" :style="{ height: mapHeight }">
<div id="mapDiv" ref="mapDiv"></div>
<div style="display: none" id="guijimap" ref="guijimap"></div>
</div>
<!--车辆轨迹框部分-->
<div v-if="carTrack" class="tabbable-line guijitabbox carguiJiTabBox">
<div class="tab-content">
<div class="tab-pane active in" id="tab2_1" style="text-align: center">
<p style="font-size: 16px; color: #000">
<span id="carguijititle">{{ name }}</span>
</p>
<form role="form" class="form-horizontal">
<div class="form-body">
<div class="form-group">
<label class="col-sm-3 control-label" for="form_control_1"
>日期</label
>
<div class="col-sm-7">
<a-date-picker
locale='locale'
@change="dateTimeChange(1, $event)"
v-model:value="timeDate.date"
format="YYYY-MM-DD"
:disabled-date="disabledDate"
style="width: 100%"
placeholder="选择日期"
/>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" for="form_control_1"
>时刻</label
>
<div class="col-sm-7">
<div class="input-group fl">
<a-time-picker
v-model:open="open1"
style="width: 92px"
v-model:value="timeDate.startTime"
valueFormat="HH:mm:ss"
placeholder=""
>
<template #addon>
<a-button
size="small"
type="primary"
@click="dateTimeChange(2, $event)"
>确定</a-button
>
</template>
</a-time-picker>
</div>
<span class="fl" style="margin-top: 5px"
> ~ </span
>
<div class="input-group fl">
<a-time-picker
v-model:open="open2"
style="width: 92px"
v-model:value="timeDate.endTime"
valueFormat="HH:mm:ss"
placeholder=""
>
<template #addon>
<a-button
size="small"
type="primary"
@click="dateTimeChange(3, $event)"
>确定</a-button
>
</template>
</a-time-picker>
</div>
</div>
</div>
<div class="form-group">
<!-- 轨迹播放快慢 -->
<label class="col-sm-3 control-label" for="form_control_1"
>轨迹播放</label
>
<div class="col-sm-9" style="padding-left: 0; margin-top: 8px">
<!-- <span class="fl"> 慢</span> -->
<span
><a-slider
:min="1"
@change="sliderChange"
style="width: 74%"
id="test"
v-model:value="timeDate.rangeValue"
/></span>
<!-- <span class="fl"> 快</span> -->
</div>
</div>
</div>
</form>
<a-button
v-if="startgj"
@click="startTrack"
style="padding: 0 5px; margin-right: 10px; color: '#5f5f5f'"
><template #icon><CaretRightOutlined /></template>开始
</a-button>
<a-button
v-else
@click="pauseTrack"
style="padding: 0 5px; margin-right: 10px; color: '#5f5f5f'"
><template #icon><CaretRightOutlined /></template>暂停
</a-button>
<a-button
@click="stopTrack"
style="padding: 0 5px; margin-right: 10px"
><template #icon><CloseSquareFilled /> </template>结束
</a-button>
<a-button style="padding: 0 5px" @click="carTrackReturn"
><template #icon><RollbackOutlined /></template>返回
</a-button>
<div ref="time_box" style="width: 100%; margin-top: 10px">
<div
id="carguijiscroller"
class="scroller tabselbox"
data-rail-visible="1"
data-rail-color="#ececec"
data-handle-color="#bcbcbc"
style="width: 100%; height: 350px; overflow: auto"
>
<p
v-for="(item, i) in timeList"
:key="i"
class="showcarpoint gjtimelist"
@click="clickCar(item, i)"
>
<i class="guijinumlist">{{ i }}</i
><span>{{ item.time }}</span>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import {
ref,
reactive,
toRefs,
defineComponent,
onMounted,
getCurrentInstance,
} from "vue";
import {
CarOutlined,
DownOutlined,
CaretRightOutlined,
CloseSquareFilled,
RollbackOutlined,
} from "@ant-design/icons-vue";
import { message } from "ant-design-vue";
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
import moment, { Moment } from "moment";
import 'moment/dist/locale/zh-cn';
import { format, } from "@/utils/util";
import { getcars_page, getcartrajectory_by_cid_time } from "@/api/system/api";
export default defineComponent({
components: {
CarOutlined,
DownOutlined,
CaretRightOutlined,
CloseSquareFilled,
RollbackOutlined,
},
setup() {
// 在ts中直接使用 const { ctx }=getCurrentInstance().可能会报 Property 'ctx' does not exist on type 'ComponentInternalInstance | null'. 的错误.
let { ctx } = getCurrentInstance();
let state = reactive({
count: 0,
map: "",
guijimap: "",
zoom: 12,
T: "",
mapHeight: 800 + "px",
timeDate: {
date: undefined,
startTime: "00:00:00",
endTime: "23:59:59",
rangeValue: 1,
},
carTrack: false,
loading: false,
obj_CarTrack: "",
tile: "",
timeList: [],
timename: {},
pagenum: 1,
pagesize: 500,
total: 10,
carList: [],
car_icon: "",
detailAddress: "",
v: {},
icont: "",
customerWinInfo: {},
name: "",
startgj: true,
setCarTnterTime: 1000,
linebottom: [],
iguiji: 0,
closetimeinter: 0,
markercaruserlinelabel: null,
markercarline: null,
startGTime: "",
onlinemarkercar: [],
markerclick: {},
});
const open1 = ref(false);
const open2 = ref(false);
let getData = async (pagenum, pagesize) => {
await getcars_page({ pagenum, pagesize }).then((res) => {
state.carList = res.data.content;
state.map.clearOverLays();
clearMarkers();
addMarker();
});
};
state.timeDate.date = moment().format("YYYY-MM-DD");
onMounted(() => {
clearInterval(state.timename);
getData(state.pagenum, state.pagesize);
initMapHeight();
initMap(state, ctx);
window.onresize = () => {
return (() => {
if (window.innerWidth > 1664) {
state.mapHeight = window.innerHeight - 150 + "px";
} else {
state.mapHeight = window.innerHeight - 118 + "px";
}
})();
};
state.cgjicon = new TIcon(
require("../../assets/image/map/star.png"),
new TSize(30, 30),
{ anchor: new TPixel(15, 30) }
);
});
/**
* @Author: zhai penghui
* @Date: 2021-03-05 15:55:21
* @函数名称: initMap
* @函数功能: 初始化天地图
* @函数参数:
* @函数返回:
* @param {*} state
*/
let initMap = () => {
//初始化地图对象
state.map = new TMap("mapDiv");
//设置显示地图的中心点和级别
state.map.centerAndZoom(new TLngLat(119.98107, 30.54072), 12);
//允许鼠标双击放大地图
state.map.enableHandleMouseScroll();
};
function initMapHeight() {
let main = document.getElementById("map");
main.style.height = window.innerHeight + "px";
}
function clearMarkers(params) {}
function addMarker() {
var lngLat,
lngLatarr = [];
var f = 0;
state.carList.forEach((v, i) => {
if (v.isonline == 1) {
lngLat = new TLngLat(v.longitude, v.latitude);
lngLatarr[i] = lngLat;
//创建标注对象
var icont = new TIcon(
require("../../assets/image/map/caricon_10.png"),
new TSize(28, 38),
{
anchor: new TPixel(12, 30),
}
);
state.icont = icont;
state.onlinemarkercar[f] = new TMarker(lngLat, {
icon: icont,
});
//向上地图上添加标注
state.map.addOverLay(state.onlinemarkercar[f]);
//注册标注的点击事件
TEvent.addListener(state.onlinemarkercar[f], "click", function() {
showonecarinfo(v, this);
state.map.clearOverLays();
addMarker();
// state.map.removeOverLay(state.customerWinInfo);
});
f++;
}
});
}
// 点击具体车辆信息
function showonecarinfo(v, callBackObject) {
console.log(v, callBackObject);
// state.map.removeOverLay(state.customerWinInfo);
// 关闭查寻窗口
var object = callBackObject;
// DeleteInfoBox();
let markerone;
let geocode = new TGeocoder();
geocode.getLocation(new TLngLat(v.longitude, v.latitude), searchResult);
var lng = parseFloat(object.getLngLat().getLng());
var lat = parseFloat(object.getLngLat().getLat());
markerone = new TMarker(object.getLngLat(), {
icon: state.icont,
});
state.map.addOverLay(markerone);
markerone.setZindex(600);
state.map.panTo(new TLngLat(lng, lat));
function searchResult(result) {
if (result.getStatus() == 0) {
var html = "";
html +=
"<div class='infowindiv'><table class='table table-striped table-bordered table-hover tablebule' style='width:400px;margin-bottom:0;'>";
html +=
"<tr ><th style='background-color: #007ddc;color: #fff;' colspan='4'><span ' class='fl'>" +
"车辆详情" +
"</span><i style='font-style:normal;cursor: pointer;' " +
"ref=close" +
" id='close' class='fa fa-times fr'>X</i></th></tr>";
html +=
"<tr><td style='width:71px;'>车 号</td><td>" +
v.carcode +
"</td><td colspan='2' id='carimg' rowspan='4' style='text-align:center;width:150px;'><img src= "+ ''+" style='max-width:100px;max-height:110px;'/></td></tr>";
// html += "<tr><td>驾驶员</td><td>" + "德清餐厨" + "</td></tr>";
// html += "<tr><td>联系方式</td><td>" + "13137657727" + "</td></tr>";
html += "<tr><td>车辆类型</td><td>" + v.carclasses + "</td></tr>";
html +=
"<tr><td>所属单位</td><td>" +
v.manageunit +
"</td></tr><tr><td>GPS状态</td><td>" +
"在线" +
"</td></tr>";
html += "<tr></tr>";
// html += "<tr><td>上报时间</td><td>" + "2021-02-03 09:33:10" + "</td></tr>";
html +=
"<tr><td>当前位置</td><td style='max-width:100px;max-height:110px;white-space:pre-line;word-wrap：break-word;'>" +
result.getAddress() +
"</td></tr>";
html +=
"<tr><td>车载视频：</td><td ><a οnclick='showcarguiji();' style='color:#007ddc;'>车载视频1</a> <a οnclick='showdetailcar();' style='color:#007ddc;'>车载视频2</a> <a οnclick='showdetailcar();' style='color:#007ddc;'>车载视频3</a></td>";
html +=
"<td colspan='4' ><a id='showTrack' style='color:#007ddc;'>>>查看轨迹</a> </td></tr></table></div>";
customerWinfun(object, html, v);
}
}
}
//******************************************************************************基本信息窗口
function customerWinfun(e, html, v) {
let customerWinInfo;
var config1 = {
offset: new TPixel(0, 0),
position: e.getLngLat(),
};
customerWinInfo = new TLabel(config1);
customerWinInfo.setTitle("");
customerWinInfo.setLabel(html);
customerWinInfo.getObject().style.zIndex = 10000;
state.map.addOverLay(customerWinInfo);
var obj = customerWinInfo.getObject();
var width = parseInt(obj.offsetWidth);
var height = parseInt(obj.offsetHeight);
var icon = e.getIcon();
var anchor_icon = icon.getAnchor();
var pixel = new TPixel(width / -2, height / -2 - anchor_icon[1] - 20);
customerWinInfo.setOffset(pixel);
customerWinInfo.setZindex(600);
$(".infowindiv")
.parent()
.css({
padding: 0,
border: "1px solid #999",
});
state.customerWinInfo = customerWinInfo;
let close = document.querySelector("#close");
close.onclick = () => {
// state.map.removeOverLay(state.customerWinInfo);
state.map.clearOverLays();
addMarker();
};
let showTrack = document.querySelector("#showTrack");
showTrack.onclick = () => {
showcarguiji(v);
};
}
//查看车辆轨迹
function showcarguiji(v) {
state.v = v;
state.startgj = true;
state.carTrack = true;
state.name = v.carcode;
state.timeDate.date = moment().format("YYYY-MM-DD");
state.timeDate.startTime = "00:00:00";
state.timeDate.endTime = "23:59:59";
state.timeList = [];
//由于使用ctx 打包后会保存，暂用jquery代替
$('#mapDiv').hide()
$('#guijimap').show()
// ctx.$refs.mapDiv.style.display="none";
// ctx.$refs.guijimap.style.display = "block";
//初始化地图对象
var map1 = new TMap("guijimap");
//设置显示地图的中心点和级别
map1.centerAndZoom(new TLngLat(119.96529, 30.54044), 16);
//允许鼠标滚动放大地图
map1.enableHandleMouseScroll();
map1.clearOverLays();
state.map1 = map1;
UrGban();
carvehicle(v.devicecode);
}
function startTrack() {
console.log("start");
var map1 = state.map1;
var linebottom = state.linebottom;
state.startgj = false;
clearInterval(state.timename);
state.timename = setInterval(function() {
var st = Math.ceil(state.timeDate.rangeValue / 9);
var timehms = moment(state.startGTime)
.subtract(-st, "second")
.format("HH:mm:ss");
state.startGTime = moment(state.startGTime)
.subtract(-st, "second")
.format("YYYY-MM-DD HH:mm:ss");
if (state.markercaruserlinelabel != null)
map1.removeOverLay(state.markercaruserlinelabel);
timelabel(timehms, state.markercarline.getLngLat());
if (state.startGTime >= linebottom[state.iguiji]["time"]) {
//当前时间车辆所在位置
if (state.markercarline != null)
map1.removeOverLay(state.markercarline);
state.markercarline = new TMarker(
linebottom[state.iguiji]["TLngLat"],
{
icon: new TIcon(
require("../../assets/image/map/point.png"),
new TSize(32, 25),
{ anchor: new TPixel(16, 25) }
), //车辆轨迹
}
);
map1.addOverLay(state.markercarline);
if (state.markercaruserlinelabel != null)
map1.removeOverLay(state.markercaruserlinelabel);
timelabel(timehms, state.markercarline.getLngLat());
state.iguiji++;
if (state.iguiji == linebottom.length) {
console.log(123);
clearInterval(state.timename);
state.startgj = true;
state.iguiji = 0;
state.closetimeinter = 0;
state.startGTime = linebottom[0]["time"];
}
}
}, state.setCarTnterTime);
state.closetimeinter = 1;
//添加起始车辆位置点标注
console.log("end");
}
function pauseTrack() {
clearInterval(state.timename);
state.startgj = true;
state.closetimeinter = 0;
}
function stopTrack() {
state.iguiji = 0;
state.closetimeinter = 0;
state.startGTime = state.linebottom[0]["time"];
clearInterval(state.timename);
state.startgj = true;
var lastm = state.linebottom.length - 1;
if (state.markercarline != null)
state.map1.removeOverLay(state.markercarline);
if (state.markercaruserlinelabel != null)
state.map1.removeOverLay(state.markercaruserlinelabel);
state.markercarline = new TMarker(state.linebottom[lastm]["TLngLat"], {
icon: new TIcon(
require("../../assets/image/map/point.png"),
new TSize(32, 25),
{ anchor: new TPixel(16, 25) }
),
});
state.map1.addOverLay(state.markercarline);
timelabel(
moment(state.linebottom[lastm]["time"]).format("HH:mm:ss"),
state.linebottom[lastm]["TLngLat"]
);
}
function sliderChange(val) {
state.setCarTnterTime = 1000 / val;
var st = Math.ceil(val / 9);
var map1 = state.map1;
var linebottom = state.linebottom;
if (state.closetimeinter == 1) {
clearInterval(state.timename);
state.timename = setInterval(function() {
var timehms = moment(state.startGTime)
.subtract(-st, "second")
.format("HH:mm:ss");
state.startGTime = moment(state.startGTime)
.subtract(-st, "second")
.format("YYYY-MM-DD HH:mm:ss");
if (state.markercaruserlinelabel != null)
map1.removeOverLay(state.markercaruserlinelabel);
timelabel(timehms, state.markercarline.getLngLat());
if (state.startGTime >= linebottom[state.iguiji]["time"]) {
//当前时间车辆所在位置
if (state.markercarline != null)
map1.removeOverLay(state.markercarline);
state.markercarline = new TMarker(
linebottom[state.iguiji]["TLngLat"],
{
icon: new TIcon(
require("../../assets/image/map/point.png"),
new TSize(32, 25),
{ anchor: new TPixel(16, 25) }
),
}
);
map1.addOverLay(state.markercarline);
if (state.markercaruserlinelabel != null)
map1.removeOverLay(state.markercaruserlinelabel);
timelabel(timehms, state.markercarline.getLngLat());
state.iguiji++;
if (state.iguiji == linebottom.length) {
clearInterval(state.timename);
state.startgj = true;
state.iguiji = 0;
state.closetimeinter = 0;
state.startGTime = linebottom[0]["time"];
}
}
}, state.setCarTnterTime);
}
}
function timelabel(timehms, position) {
var config = {
text:
'<div style="font-size:14px;background-color:#000;color:#fff;border-radius:4px !important;padding:3px 10px;box-shadow:3px 3px 6px 0 rgba(0,0,0,0.5);">' +
timehms +
"</div>",
offset: new TPixel(0, 0),
position: position,
};
state.markercaruserlinelabel = new TLabel(config); //创建地图文本对象
state.markercaruserlinelabel.setAnchorPer([0.5, 2]); //偏移量
state.markercaruserlinelabel.setBorderLine(0);
state.markercaruserlinelabel.setFontColor("#FFFFFF");
state.markercaruserlinelabel.setBackgroundColor("transparent");
state.map1.addOverLay(state.markercaruserlinelabel);
}
// ******************** 播放轨迹 查询轨迹
var carline = null;
function carvehicle(v_devicecode, start_time, end_time) {
state.map1.removeOverLay(state.markercarline);
state.map1.removeOverLay(state.carline);
state.map1.removeOverLay(state.markercaruserlinelabel);
if (!start_time) {
var fields = {
deviceCode: v_devicecode,
mapType: "aMap",
startTime: moment().format("YYYY-MM-DD") + " 00:00:00",
endTime: moment().format("YYYY-MM-DD HH:mm:ss"),
};
} else {
var fields = {
deviceCode: v_devicecode,
mapType: "aMap",
startTime: start_time,
endTime: end_time,
};
}
getcartrajectory_by_cid_time(fields).then((res) => {
if (res.responseCode == 0) {
var linebottom = [];
var linebottompoint = [];
if (res.data) {
var knum = 0;
res.data.map((v, k) => {
if (v["longitudedone"]) {
var arr = new Object();
arr["TLngLat"] = new TLngLat(
v["longitudedone"],
v["latitudedone"]
);
arr["time"] = format(v["equipmenttime"]);
linebottom[knum] = arr;
linebottompoint.push(
new TLngLat(v["longitudedone"], v["latitudedone"])
);
state.timeList = linebottom;
knum++;
}
});
state.linebottom = linebottom;
state.markercarline = new TMarker(linebottompoint[0], {
icon: new TIcon(
require("../../assets/image/map/point.png"),
new TSize(32, 25),
{ anchor: new TPixel(16, 25) }
), //车辆轨迹
});
state.map1.addOverLay(state.markercarline);
state.startGTime = linebottom[0]["time"];
// 添加其实车辆位置点标注
//创建线对象
carline = new TPolyline(linebottompoint, {
strokeColor: "blue",
strokeWeight: 2,
strokeOpacity: 1,
});
state.carline = carline;
//向地图上添加线
state.map1.addOverLay(carline);
state.map1.setViewport(linebottompoint);
state.map1.panTo(linebottompoint[0]);
timelabel(
moment(linebottom[0]["time"]).format("HH:mm:ss"),
state.markercarline.getLngLat()
);
} else {
message.error("暂无数据！");
}
}
});
// .catch(()=>{
// alert('网络请求失败，请稍后再试');
// })
}
function clickCar(v, k) {
console.log(v);
let map1 = state.map1;
map1.panTo(v["TLngLat"]);
state.iguiji = k;
state.startGTime = moment(v.time).format("YYYY-MM-DD HH:mm:ss");
state.closetimeinter = 0;
clearInterval(state.timename);
if (state.markercarline != null) map1.removeOverLay(state.markercarline);
if (state.markercaruserlinelabel != null)
map1.removeOverLay(state.markercaruserlinelabel);
state.markercarline = new TMarker(v["TLngLat"], {
icon: new TIcon(
require("../../assets/image/map/point.png"),
new TSize(32, 25),
{ anchor: new TPixel(16, 25) }
),
});
map1.addOverLay(state.markercarline);
timelabel(
moment(v.time).format("HH:mm:ss"),
state.markercarline.getLngLat()
);
}
function DeleteInfoBox() {
if (state.customerWinInfo.point != undefined)
state.map.removeOverLay(state.customerWinInfo);
}
function UrGban() {
//创建标注对象
var marker = new TMarker(new TLngLat(119.95777, 30.53184), {
icon: state.cgjicon,
});
//向上地图上添加标注
state.map1.addOverLay(marker);
}
function carTrackReturn() {
$('#mapDiv').show()
$('#guijimap').hide()
// ctx.$refs.mapDiv.style.display = "block";
// ctx.$refs.guijimap.style.display = "none";
state.carTrack = false;
}
function dateTimeChange(a, date, dateString) {
let startTime, endTime;
switch (a) {
case 1:
state.timeDate.date = date.format("YYYY-MM-DD");
break;
case 2:
open1.value = false;
break;
case 3:
open2.value = false;
break;
default:
break;
}
startTime = state.timeDate.date + " " + state.timeDate.startTime;
endTime = state.timeDate.date + " " + state.timeDate.endTime;
carvehicle(state.v.devicecode, startTime, endTime);
}
const handleMenuClick = (e) => {
let v = state.carList[e.key];
if (v.longitude != undefined) {
state.map.clearOverLays();
let lngLat = new TLngLat(v.longitude, v.latitude);
state.map.panTo(lngLat);
//创建标注对象
var icont = new TIcon(
require("../../assets/image/map/caricon_10.png"),
new TSize(28, 38),
{
anchor: new TPixel(12, 30),
}
);
state.icont = icont;
let marker = new TMarker(lngLat, {
icon: icont,
});
//向上地图上添加标注
state.map.addOverLay(marker);
//注册标注的点击事件
TEvent.addListener(marker, "click", function() {
showonecarinfo(v, this);
});
showonecarinfo(v, marker);
} else {
message.error("暂无轨迹！");
}
};
const disabledDate = (current) => {
return current > moment().endOf("day");
};
const onChange = (value, dateString) => {
console.log("Selected Time: ", value);
console.log("Formatted Selected Time: ", dateString);
};
const onOk = (value) => {
console.log("onOk: ", value);
};
return {
...toRefs(state),
initMap,
initMapHeight,
getData,
disabledDate,
onChange,
onOk,
startTrack,
open1,
open2,
clickCar,
pauseTrack,
stopTrack,
sliderChange,
carTrackReturn,
dateTimeChange,
handleMenuClick,
locale,
moment
};
},
});
</script>
<style lang="less" scoped>
#mapDiv,
#guijimap {
width: 100%;
height: 100%;
overflow: hidden;
}
.drapdown_wrap {
position: absolute;
left: 0px;
top: 160px;
z-index: 400;
width: 200px;
// height: 300px;
background-color: #fff;
.dropdown {
width: 100%;
z-index: 99999;
background-color: #006dc9;
color: #fff;
}
}
@media (min-width: 1664px) {
.drapdown_wrap {
position: absolute;
left: 0px;
top: 160px;
}
/*轨迹选择时间弹框*/
.tabbable-line.guijitabbox {
position: fixed;
right: 10px;
top: 151px;
width: 358px;
z-index: 999;
background: #fff;
color: #5f5f5f;
box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.5);
border-radius: 0 0 3px 3px !important;
overflow: hidden;
}
/*弹框中的input*/
.form-group .col-sm-7 {
padding-left: 0 !important;
}
/*查询轨迹*/
.gjtimelist {
border-bottom: 1px dashed #e3e3e3;
cursor: pointer;
}
.guijinumlist {
padding: 2px 8px 2px 4px;
background: #89bff5;
color: #fff;
margin-right: 10px;
}
.backspan {
font-size: 14px;
margin-left: 10px;
cursor: pointer;
}
/*巡检路线*/
.tabselbox {
height: 372px;
border-top: 1px solid #999;
text-align: left;
padding: 7px 15px;
}
.tabselbox > a {
display: block;
color: #000;
cursor: pointer;
border-bottom: 1px dashed #ccc;
padding: 9px 10px 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.tabselbox > a:hover {
color: #5b9bd1;
}
}
@media (max-width: 1664px) {
.drapdown_wrap {
position: absolute;
left: 0px;
top: 124px;
}
/*轨迹选择时间弹框*/
.tabbable-line.guijitabbox {
position: fixed;
right: 10px;
top: 119px;
width: 358px;
z-index: 999;
background: #fff;
color: #5f5f5f;
box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.5);
border-radius: 0 0 3px 3px !important;
overflow: hidden;
}
/*弹框中的input*/
.form-group .col-sm-7 {
padding-left: 0 !important;
}
/*查询轨迹*/
.gjtimelist {
border-bottom: 1px dashed #e3e3e3;
cursor: pointer;
}
.guijinumlist {
padding: 2px 8px 2px 4px;
background: #89bff5;
color: #fff;
margin-right: 10px;
}
.backspan {
font-size: 14px;
margin-left: 10px;
cursor: pointer;
}
/*巡检路线*/
.tabselbox {
height: 372px;
border-top: 1px solid #999;
text-align: left;
padding: 7px 15px;
}
.tabselbox > a {
display: block;
color: #000;
cursor: pointer;
border-bottom: 1px dashed #ccc;
padding: 9px 10px 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.tabselbox > a:hover {
color: #5b9bd1;
}
}
</style>
<style >
.isonlines {
color: #006dc9 !important;
}
</style>
前往低代码交流专区
更多推荐
1
0- 0
已为社区贡献11条内容
所有评论(0)