Compare commits
5 Commits
3b0d6a0282
...
d8cb9b1cee
Author | SHA1 | Date | |
---|---|---|---|
d8cb9b1cee | |||
11e7f3b150 | |||
49cb31ab0e | |||
5277071516 | |||
837c33d5b1 |
@ -213,6 +213,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=e8722adaace412f3d9d531a5cb019756&plugin=AMap.MouseTool,AMap.PolyEditor,AMap.BezierCurveEditor,AMap.RectangleEditor,AMap.CircleEditor,AMap.PolygonEditor,AMap.PolylineEditor"></script>
|
||||
<!-- <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=e8722adaace412f3d9d531a5cb019756&plugin=AMap.MouseTool,AMap.PolyEditor,AMap.BezierCurveEditor,AMap.RectangleEditor,AMap.CircleEditor,AMap.PolygonEditor,AMap.PolylineEditor"></script> -->
|
||||
|
||||
</html>
|
||||
|
@ -67,10 +67,10 @@
|
||||
<div class="trip-warper">
|
||||
<div class="trip-top">
|
||||
<div>车牌号</div>
|
||||
<div>
|
||||
<input type="text" />
|
||||
<div style="padding: 0 6px;">
|
||||
<el-input placeholder="请输入车牌号"></el-input>
|
||||
</div>
|
||||
<div>查询</div>
|
||||
<el-button size="small" type="primary">查询</el-button>
|
||||
</div>
|
||||
<div id="map"></div>
|
||||
</div>
|
||||
@ -184,6 +184,7 @@ export default {
|
||||
value: "3",
|
||||
},
|
||||
],
|
||||
map: null,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
@ -443,40 +444,6 @@ export default {
|
||||
console.log(e);
|
||||
});
|
||||
},
|
||||
// 添加图形点标记
|
||||
// addMapMarker(sourceData = [], type = "sxt", info = {}) {
|
||||
// const marker = new AMap.Marker({
|
||||
// position: new AMap.LngLat(sourceData[0], sourceData[1]),
|
||||
// offset: new AMap.Pixel(-30, -52),
|
||||
// icon: `/images/${type}.png`, // 添加 Icon 图标 URL
|
||||
// title: "",
|
||||
// });
|
||||
// this.map.add(marker);
|
||||
// marker.on("click", (e) => {
|
||||
// this.showInfoWindow(sourceData[0], sourceData[1], {
|
||||
// type: "#304156",
|
||||
// ...info,
|
||||
// });
|
||||
// });
|
||||
// },
|
||||
// // 显示信息窗体
|
||||
// showInfoWindow(lng, lat, sourceInfo) {
|
||||
// let content = `
|
||||
// <div style="padding: 6px;background-color: #32b9ef;">
|
||||
// <div>
|
||||
// <div style="padding: 4px;fontweigth:500"><b>${sourceInfo.device}</b></div>
|
||||
// <div style="padding: 4px;margin:5px 0">${sourceInfo.name}</div>
|
||||
// <div style="padding: 4px;">正常运行</div>
|
||||
// </div>
|
||||
// </div>
|
||||
// `;
|
||||
// const infoWindow = new AMap.InfoWindow({
|
||||
// content,
|
||||
// anchor: "middle-left",
|
||||
// isCustom: true,
|
||||
// });
|
||||
// infoWindow.open(this.map, [lng, lat]);
|
||||
// },
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -578,15 +545,17 @@ export default {
|
||||
padding: 15px;
|
||||
.trip-warper {
|
||||
width: 100%;
|
||||
height: calc(450px - 2rem);
|
||||
height: 600px;
|
||||
position: relative;
|
||||
.trip-top {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
padding: 10px 14px;
|
||||
background-color: #fff;
|
||||
border-radius: 6px;
|
||||
z-index: 999;
|
||||
display: flex;
|
||||
width: 26%;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 40px;
|
||||
|
@ -21,8 +21,11 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
import {formatDate} from '@/utils/index'
|
||||
import AMapLoader from "@amap/amap-jsapi-loader";
|
||||
window._AMapSecurityConfig = {
|
||||
securityJsCode: "b6314ade5a42c3f3ac2284b6d4d89b1f",
|
||||
};
|
||||
|
||||
export default {
|
||||
data() {
|
||||
@ -98,6 +101,7 @@ export default {
|
||||
equSelect: null,
|
||||
lists: []
|
||||
},
|
||||
AMap: null,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
@ -106,26 +110,32 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
initMiddleMap() {
|
||||
this.map = new AMap.Map("MiddleMap", {
|
||||
zoom: 13,//级别
|
||||
center: [87.52746963724496, 43.84122412572595], //中心点坐标
|
||||
});
|
||||
this.map.on('mapmove', () => {
|
||||
})
|
||||
this.map.on('click', (e) => {
|
||||
console.log('e', e);
|
||||
navigator.clipboard.writeText(`[${e.lnglat.R.toString()}, ${e.lnglat.Q.toString()}],`)
|
||||
})
|
||||
const marks = this.marks;
|
||||
marks.forEach(item => {
|
||||
this.addMapMarker(item.location, 'car2', item)
|
||||
AMapLoader.load({
|
||||
key: "e49669059fa36494531a82ed982f395c", // 申请好的Web端开发者Key,首次调用 load 时必填
|
||||
version: "1.4.15", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
|
||||
}).then((AMap) => {
|
||||
this.AMap = AMap
|
||||
this.map = new AMap.Map("MiddleMap", {
|
||||
zoom: 13,//级别
|
||||
center: [87.52746963724496, 43.84122412572595], //中心点坐标
|
||||
});
|
||||
this.map.on('mapmove', () => {
|
||||
})
|
||||
this.map.on('click', (e) => {
|
||||
console.log('e', e);
|
||||
navigator.clipboard.writeText(`[${e.lnglat.R.toString()}, ${e.lnglat.Q.toString()}],`)
|
||||
})
|
||||
const marks = this.marks;
|
||||
marks.forEach(item => {
|
||||
this.addMapMarker(item.location, 'car2', item)
|
||||
})
|
||||
})
|
||||
},
|
||||
// 添加图形点标记
|
||||
addMapMarker(LngLatData = [], type = '', info = {}) {
|
||||
const marker = new AMap.Marker({
|
||||
position: new AMap.LngLat(LngLatData[0], LngLatData[1]),
|
||||
offset: new AMap.Pixel(-30, -52),
|
||||
const marker = new this.AMap.Marker({
|
||||
position: new this.AMap.LngLat(LngLatData[0], LngLatData[1]),
|
||||
offset: new this.AMap.Pixel(-30, -52),
|
||||
icon: `/images/${type}.png`, // 添加 Icon 图标 URL
|
||||
title: ''
|
||||
});
|
||||
@ -149,7 +159,7 @@ export default {
|
||||
</div>`;
|
||||
this.map.setZoom(15);
|
||||
this.map.setCenter([lng, lat]);
|
||||
const polyline = new AMap.Polyline({
|
||||
const polyline = new this.AMap.Polyline({
|
||||
map: this.map,
|
||||
path: sourceInfo.gpsData,
|
||||
showDir: true,
|
||||
@ -158,7 +168,7 @@ export default {
|
||||
strokeWeight: 6, //线宽
|
||||
// strokeStyle: "solid" //线样式
|
||||
});
|
||||
const infoWindow = new AMap.InfoWindow({
|
||||
const infoWindow = new this.AMap.InfoWindow({
|
||||
content,
|
||||
anchor: 'middle-left',
|
||||
isCustom: true
|
||||
|
@ -49,7 +49,13 @@
|
||||
<div class="bigscreen-item-wrapper">
|
||||
<div class="bigscreen-item-title-extra">报警信息</div>
|
||||
<div class="bigscreen-item-content right-top">
|
||||
<el-table :data="tableData" style="width: 100%;">
|
||||
<el-table
|
||||
:data="tableData"
|
||||
style="width: 100%;"
|
||||
row-style="background-color: #051d38;"
|
||||
cell-style="background-color: #051d38;color: white;border-bottom: 1px solid #25252525;"
|
||||
header-cell-style="background-color: #092f5c;color: white;"
|
||||
>
|
||||
<el-table-column label="报警等级" align='center'>
|
||||
<template slot-scope="scope">
|
||||
<div v-if="scope.row.grade=='一级预警'" style="background:#ea6511;border-radius:8px">{{scope.row.grade}}</div>
|
||||
@ -272,7 +278,7 @@ export default {
|
||||
name: "物资占比",
|
||||
type: "pie",
|
||||
radius: ["40%", "70%"],
|
||||
center: "center",
|
||||
center: ["50%", "56%"],
|
||||
data: [
|
||||
{
|
||||
name: "钢筋",
|
||||
@ -524,6 +530,7 @@ export default {
|
||||
@import url(../../utils/bigscreenTool/index.scss);
|
||||
.bigscreen8-wrapper {
|
||||
width: 100%;
|
||||
height: calc(100vh - 84px);
|
||||
overflow: hidden;
|
||||
mix-blend-mode: multiply;
|
||||
background-image: url(./assets/bg.png);
|
||||
@ -606,6 +613,7 @@ export default {
|
||||
align-items: center;
|
||||
padding: 5px;
|
||||
justify-content: space-between;
|
||||
padding: 0 10px;
|
||||
.monitoring-icon {
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
|
Loading…
Reference in New Issue
Block a user