Compare commits

..

5 Commits

4 changed files with 50 additions and 63 deletions

View File

@ -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>

View File

@ -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;

View File

@ -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,6 +110,11 @@ export default {
},
methods: {
initMiddleMap() {
AMapLoader.load({
key: "e49669059fa36494531a82ed982f395c", // WebKey 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], //
@ -120,12 +129,13 @@ export default {
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

View File

@ -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;