Compare commits

...

5 Commits

4 changed files with 50 additions and 63 deletions

View File

@ -213,6 +213,6 @@
</div> </div>
</div> </div>
</body> </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> </html>

View File

@ -67,10 +67,10 @@
<div class="trip-warper"> <div class="trip-warper">
<div class="trip-top"> <div class="trip-top">
<div>车牌号</div> <div>车牌号</div>
<div> <div style="padding: 0 6px;">
<input type="text" /> <el-input placeholder="请输入车牌号"></el-input>
</div> </div>
<div>查询</div> <el-button size="small" type="primary">查询</el-button>
</div> </div>
<div id="map"></div> <div id="map"></div>
</div> </div>
@ -184,6 +184,7 @@ export default {
value: "3", value: "3",
}, },
], ],
map: null,
}; };
}, },
mounted() { mounted() {
@ -443,40 +444,6 @@ export default {
console.log(e); 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> </script>
@ -578,15 +545,17 @@ export default {
padding: 15px; padding: 15px;
.trip-warper { .trip-warper {
width: 100%; width: 100%;
height: calc(450px - 2rem); height: 600px;
position: relative; position: relative;
.trip-top { .trip-top {
position: absolute; position: absolute;
top: 0; top: 10px;
left: 0; left: 10px;
padding: 10px 14px;
background-color: #fff;
border-radius: 6px;
z-index: 999; z-index: 999;
display: flex; display: flex;
width: 26%;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
height: 40px; height: 40px;

View File

@ -21,8 +21,11 @@
</div> </div>
</template> </template>
<script> <script>
import {formatDate} from '@/utils/index' import {formatDate} from '@/utils/index'
import AMapLoader from "@amap/amap-jsapi-loader";
window._AMapSecurityConfig = {
securityJsCode: "b6314ade5a42c3f3ac2284b6d4d89b1f",
};
export default { export default {
data() { data() {
@ -98,6 +101,7 @@ export default {
equSelect: null, equSelect: null,
lists: [] lists: []
}, },
AMap: null,
} }
}, },
mounted() { mounted() {
@ -106,6 +110,11 @@ export default {
}, },
methods: { methods: {
initMiddleMap() { 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", { this.map = new AMap.Map("MiddleMap", {
zoom: 13,// zoom: 13,//
center: [87.52746963724496, 43.84122412572595], // center: [87.52746963724496, 43.84122412572595], //
@ -120,12 +129,13 @@ export default {
marks.forEach(item => { marks.forEach(item => {
this.addMapMarker(item.location, 'car2', item) this.addMapMarker(item.location, 'car2', item)
}) })
})
}, },
// //
addMapMarker(LngLatData = [], type = '', info = {}) { addMapMarker(LngLatData = [], type = '', info = {}) {
const marker = new AMap.Marker({ const marker = new this.AMap.Marker({
position: new AMap.LngLat(LngLatData[0], LngLatData[1]), position: new this.AMap.LngLat(LngLatData[0], LngLatData[1]),
offset: new AMap.Pixel(-30, -52), offset: new this.AMap.Pixel(-30, -52),
icon: `/images/${type}.png`, // Icon URL icon: `/images/${type}.png`, // Icon URL
title: '' title: ''
}); });
@ -149,7 +159,7 @@ export default {
</div>`; </div>`;
this.map.setZoom(15); this.map.setZoom(15);
this.map.setCenter([lng, lat]); this.map.setCenter([lng, lat]);
const polyline = new AMap.Polyline({ const polyline = new this.AMap.Polyline({
map: this.map, map: this.map,
path: sourceInfo.gpsData, path: sourceInfo.gpsData,
showDir: true, showDir: true,
@ -158,7 +168,7 @@ export default {
strokeWeight: 6, //线 strokeWeight: 6, //线
// strokeStyle: "solid" //线 // strokeStyle: "solid" //线
}); });
const infoWindow = new AMap.InfoWindow({ const infoWindow = new this.AMap.InfoWindow({
content, content,
anchor: 'middle-left', anchor: 'middle-left',
isCustom: true isCustom: true

View File

@ -49,7 +49,13 @@
<div class="bigscreen-item-wrapper"> <div class="bigscreen-item-wrapper">
<div class="bigscreen-item-title-extra">报警信息</div> <div class="bigscreen-item-title-extra">报警信息</div>
<div class="bigscreen-item-content right-top"> <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'> <el-table-column label="报警等级" align='center'>
<template slot-scope="scope"> <template slot-scope="scope">
<div v-if="scope.row.grade=='一级预警'" style="background:#ea6511;border-radius:8px">{{scope.row.grade}}</div> <div v-if="scope.row.grade=='一级预警'" style="background:#ea6511;border-radius:8px">{{scope.row.grade}}</div>
@ -272,7 +278,7 @@ export default {
name: "物资占比", name: "物资占比",
type: "pie", type: "pie",
radius: ["40%", "70%"], radius: ["40%", "70%"],
center: "center", center: ["50%", "56%"],
data: [ data: [
{ {
name: "钢筋", name: "钢筋",
@ -524,6 +530,7 @@ export default {
@import url(../../utils/bigscreenTool/index.scss); @import url(../../utils/bigscreenTool/index.scss);
.bigscreen8-wrapper { .bigscreen8-wrapper {
width: 100%; width: 100%;
height: calc(100vh - 84px);
overflow: hidden; overflow: hidden;
mix-blend-mode: multiply; mix-blend-mode: multiply;
background-image: url(./assets/bg.png); background-image: url(./assets/bg.png);
@ -606,6 +613,7 @@ export default {
align-items: center; align-items: center;
padding: 5px; padding: 5px;
justify-content: space-between; justify-content: space-between;
padding: 0 10px;
.monitoring-icon { .monitoring-icon {
width: 2.5rem; width: 2.5rem;
height: 2.5rem; height: 2.5rem;