lukeyan #143

Merged
lukeyan merged 5 commits from lukeyan into master 10 months ago

@ -24,28 +24,143 @@
<body> <body>
<div id="container"></div> <div id="container"></div>
<script> <script>
// import { Engine } from 'mapv-three';
// 创建地图实例 // 创建地图实例
var map = new BMapGL.Map("container"); // 创建地图实例 var map = new BMapGL.Map("container"); // 创建地图实例
var point = new BMapGL.Point(121.619992, 30.025703); // 创建点坐标 var point = new BMapGL.Point(121.619992, 30.025703); // 创建点坐标
window.addEventListener('message', function (event) {
let company_list = event.data
console.log('data01', company_list);
company_list.forEach((item) => {
let company_point = new BMapGL.Point(item.longitude, item.latitude);
let myIcon = {};
// 根据公司排名打点
if (item.areaRank == '1') {
myIcon = new BMapGL.Icon(
'./top01.png',
new BMapGL.Size(40, 60),
{
imageOffset: new BMapGL.Size(0, 0, 5)
}
)
var marker = new BMapGL.Marker(company_point, { icon: myIcon }); // 创建点位
marker.disableMassClear();
map.addOverlay(marker);
} else if (item.areaRank == '2') {
myIcon = new BMapGL.Icon(
'./top02.png',
new BMapGL.Size(40, 60),
{
imageOffset: new BMapGL.Size(0, 0, 5)
}
)
var marker = new BMapGL.Marker(company_point, { icon: myIcon }); // 创建点位
marker.disableMassClear();
map.addOverlay(marker);
} else if (item.areaRank == '3') {
myIcon = new BMapGL.Icon(
'./top03.png',
new BMapGL.Size(40, 60),
{
imageOffset: new BMapGL.Size(0, 0, 5)
}
)
var marker = new BMapGL.Marker(company_point, { icon: myIcon }); // 创建点位
marker.disableMassClear();
map.addOverlay(marker);
} else if (item.areaRank == '4') {
myIcon = new BMapGL.Icon(
'./top04.png',
new BMapGL.Size(40, 60),
{
imageOffset: new BMapGL.Size(0, 0, 5)
}
)
var marker = new BMapGL.Marker(company_point, { icon: myIcon }); // 创建点位
marker.disableMassClear();
map.addOverlay(marker);
} else if (item.areaRank == '5') {
myIcon = new BMapGL.Icon(
'./top05.png',
new BMapGL.Size(40, 60),
{
imageOffset: new BMapGL.Size(0, 0, 5)
}
)
var marker = new BMapGL.Marker(company_point, { icon: myIcon }); // 创建点位
marker.disableMassClear();
map.addOverlay(marker);
}
// 公司名
let content = item.companyName;
let label = new BMapGL.Label(content, {
position: company_point, // 设置标注的地理位置
offset: new BMapGL.Size(-20, -50), // 设置标注的偏移量
})
label.setStyle({
backgroundColor: "#f9d2e4",
border: "0",
color: "#01847f",
fontSize: "16px",
cursor: "pointer",
});
label.disableMassClear();
map.addOverlay(label);
// 文本点击
label.addEventListener('click', function () {
map.clearOverlays(); // 为保证始终只有一个文本覆盖物弹出,每次创造文本覆盖物时,先清楚所有的文本覆盖物
// 注意 clearOverlays会清除地图所有的覆盖物所以要给不想清除的覆盖物加上disableMassClear以做到禁止删除
var point_text = new BMapGL.Label(); // 创建公司详情文本覆盖物
point_text.setStyle({
color: "blue",
borderRadius: "5px",
borderColor: "#ccc",
padding: "10px",
fontSize: "16px",
fontFamily: "微软雅黑",
backgroundColor: "#b5ebff",
transform: "translateX(-50%) translateY(calc(-100% - 10px))",
});
// 点位点击转处置弹窗
point_text.setPosition(
new BMapGL.Point(item.longitude, item.latitude)
);
point_text.setOffset(new BMapGL.Size(130, -10));
point_text.setStyle({
width: "340px",
height: "238px",
background: "url(../pbImg/dialogback.png) no-repeat",
backgroundSize: "100% 100%",
border: "0",
color: "#fff",
zIndex: 2000000000,
});
point_text.setContent(`
<div style='width:100%;display:flex;justify-content: space-between;align-items: center;'>
<h4 style='margin:12px;font-size: 14px;color: #FFE6D9;overflow: hidden;text-overflow: ellipsis;white-space: nowrap; cursor: pointer;'>${item.companyName}</h4>
<div class='closeBtn' style='background: url(../pbImg/close.png) no-repeat;width:20px;height:20px;background-size: 100% 100%;margin-right:10px; cursor: pointer;"'></div></div>
<div style='margin:0 auto;font-size: 14px;width:316px;height:108px;padding:0 12px;background: rgba(108,128,151,0.20);border: 1px solid rgba(73,84,97,1);'>
<h4 style='height:33%;opacity: 0.8;margin:0;line-height:38px;font-weight:300;'><span style="color:#D0DEEE;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">单位地址:</span>${item.companyAddress}</h4>
<div title="${item.levelIndexThree}" style='height:33%;opacity: 0.8;margin:0;line-height:38px;font-weight:300;overflow:hidden; text-overflow: ellipsis;white-space: nowrap'><span style="color:#D0DEEE;">安全负责人:</span>${item.emergencyContact}</div>
<h4 style='height:33%;opacity: 0.8;margin:0;line-height:38px;font-weight:300;'><span style="color:#D0DEEE;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">综合得分:</span>${item.score}</h4>
`);
map.addOverlay(point_text);
let closebtn = document.querySelector(".closeBtn");
closebtn.addEventListener("click", () => {
map.removeOverlay(point_text);
});
})
})
})
map.centerAndZoom(point, 14); // 初始化地图,设置中心点坐标和地图级别 map.centerAndZoom(point, 14); // 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(); map.enableScrollWheelZoom();
// 初始化 mapvthree 引擎(第一个参数为地图实例或DOM) map.setMapType(BMAP_SATELLITE_MAP); // 卫星地图模式
// const engine = new Engine(map, {
// rendering: {
// enableAnimationLoop: true,
// }
// });
// engine.map.setCenter(center);
// engine.map.setPitch(60);
map.setMapType(BMAP_SATELLITE_MAP);
// map.setHeading(64.5); // map.setHeading(64.5);
// map.setTilt(73); // map.setTilt(73);
// 禁止地图旋转和倾斜可以通过配置项进行设置 // 禁止地图旋转和倾斜可以通过配置项进行设置
var map = new BMapGL.Map("allmap", { // var map = new BMapGL.Map("allmap", {
enableRotate: false, // enableRotate: false,
enableTilt: false // enableTilt: false
}); // });
</script> </script>
</body> </body>

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

@ -39,3 +39,19 @@ export function car_point(params) {
params params
}) })
} }
// 车辆轨迹
export function car_line(params) {
return request({
url:'/SafeCompanyVehicleTrack/getById',
method:'get',
params
})
}
// 感知设备
export function camera_point(params) {
return request({
url:'/ThreeProoFingsData/CameraList',
method:'get',
params
})
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 14 KiB

Before

Width:  |  Height:  |  Size: 8.2 KiB

After

Width:  |  Height:  |  Size: 8.2 KiB

Before

Width:  |  Height:  |  Size: 4.2 KiB

After

Width:  |  Height:  |  Size: 4.2 KiB

Before

Width:  |  Height:  |  Size: 4.2 KiB

After

Width:  |  Height:  |  Size: 4.2 KiB

Before

Width:  |  Height:  |  Size: 4.4 KiB

After

Width:  |  Height:  |  Size: 4.4 KiB

Before

Width:  |  Height:  |  Size: 8.5 KiB

After

Width:  |  Height:  |  Size: 8.5 KiB

Before

Width:  |  Height:  |  Size: 40 KiB

After

Width:  |  Height:  |  Size: 40 KiB

Before

Width:  |  Height:  |  Size: 662 KiB

After

Width:  |  Height:  |  Size: 662 KiB

Before

Width:  |  Height:  |  Size: 98 KiB

After

Width:  |  Height:  |  Size: 98 KiB

Before

Width:  |  Height:  |  Size: 4.1 KiB

After

Width:  |  Height:  |  Size: 4.1 KiB

Before

Width:  |  Height:  |  Size: 129 KiB

After

Width:  |  Height:  |  Size: 129 KiB

Before

Width:  |  Height:  |  Size: 24 KiB

After

Width:  |  Height:  |  Size: 24 KiB

Before

Width:  |  Height:  |  Size: 8.7 KiB

After

Width:  |  Height:  |  Size: 8.7 KiB

Before

Width:  |  Height:  |  Size: 17 KiB

After

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Before

Width:  |  Height:  |  Size: 8.9 KiB

After

Width:  |  Height:  |  Size: 8.9 KiB

@ -360,13 +360,13 @@ export default {
height: 34%; height: 34%;
width: 100%; width: 100%;
margin-bottom: 20px; margin-bottom: 20px;
background: url('~@/assets/safetyIndex/主屏板块1.png') no-repeat; background: url('~@/assets/safetyIndex/modelback.png') no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
.title { .title {
width: 100%; width: 100%;
height: 33px; height: 33px;
background: url('~@/assets/safetyIndex/标题样式.png') no-repeat; background: url('~@/assets/safetyIndex/titleback.png') no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
font-size: 16px; font-size: 16px;
color: #D9E7FF; color: #D9E7FF;

@ -307,13 +307,13 @@ export default {
height: 28.06%; height: 28.06%;
width: 100%; width: 100%;
margin-bottom: 20px; margin-bottom: 20px;
background: url('~@/assets/safetyIndex/主屏板块1.png') no-repeat; background: url('~@/assets/safetyIndex/modelback.png') no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
.title { .title {
width: 100%; width: 100%;
height: 33px; height: 33px;
background: url('~@/assets/safetyIndex/标题样式.png') no-repeat; background: url('~@/assets/safetyIndex/titleback.png') no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
font-size: 16px; font-size: 16px;
color: #D9E7FF; color: #D9E7FF;

@ -369,13 +369,13 @@ export default {
height: 36.42%; height: 36.42%;
width: 100%; width: 100%;
margin-bottom: 20px; margin-bottom: 20px;
background: url('~@/assets/safetyIndex/主屏板块1.png') no-repeat; background: url('~@/assets/safetyIndex/modelback.png') no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
.title { .title {
width: 100%; width: 100%;
height: 33px; height: 33px;
background: url('~@/assets/safetyIndex/标题样式.png') no-repeat; background: url('~@/assets/safetyIndex/titleback.png') no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
font-size: 16px; font-size: 16px;
color: #D9E7FF; color: #D9E7FF;

@ -454,7 +454,7 @@ export default {
.xfwp { .xfwp {
width: calc(33.33% - 13.33px); width: calc(33.33% - 13.33px);
height: 100%; height: 100%;
background: url('~@/assets/safetyIndex/主屏板块1.png') no-repeat; background: url('~@/assets/safetyIndex/modelback.png') no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@ -463,7 +463,7 @@ export default {
.title { .title {
width: 100%; width: 100%;
height: 33px; height: 33px;
background: url('~@/assets/safetyIndex/标题样式.png') no-repeat; background: url('~@/assets/safetyIndex/titleback.png') no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
font-size: 16px; font-size: 16px;
color: #D9E7FF; color: #D9E7FF;

@ -263,13 +263,13 @@ export default {
height: 25.64%; height: 25.64%;
width: 100%; width: 100%;
margin-bottom: 20px; margin-bottom: 20px;
background: url('~@/assets/safetyIndex/主屏板块1.png') no-repeat; background: url('~@/assets/safetyIndex/modelback.png') no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
.title { .title {
width: 100%; width: 100%;
height: 33px; height: 33px;
background: url('~@/assets/safetyIndex/标题样式.png') no-repeat; background: url('~@/assets/safetyIndex/titleback.png') no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
font-size: 16px; font-size: 16px;
color: #D9E7FF; color: #D9E7FF;
@ -358,7 +358,7 @@ export default {
.green { .green {
width: 90px; width: 90px;
height: 90px; height: 90px;
background: url('~@/assets/safetyIndex/绿色.png') no-repeat; background: url('~@/assets/safetyIndex/greenicon.png') no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
margin: 0 auto; margin: 0 auto;
margin-bottom: 10px; margin-bottom: 10px;
@ -384,7 +384,7 @@ export default {
.blue { .blue {
width: 90px; width: 90px;
height: 90px; height: 90px;
background: url('~@/assets/safetyIndex/蓝色.png') no-repeat; background: url('~@/assets/safetyIndex/blueicon.png') no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
margin: 0 auto; margin: 0 auto;
margin-bottom: 10px; margin-bottom: 10px;
@ -410,7 +410,7 @@ export default {
.yellow { .yellow {
width: 90px; width: 90px;
height: 90px; height: 90px;
background: url('~@/assets/safetyIndex/黄色.png') no-repeat; background: url('~@/assets/safetyIndex/yellowicon.png') no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
margin: 0 auto; margin: 0 auto;
margin-bottom: 10px; margin-bottom: 10px;
@ -436,7 +436,7 @@ export default {
.red { .red {
width: 90px; width: 90px;
height: 90px; height: 90px;
background: url('~@/assets/safetyIndex/红色.png') no-repeat; background: url('~@/assets/safetyIndex/redicon.png') no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
margin: 0 auto; margin: 0 auto;
margin-bottom: 10px; margin-bottom: 10px;

@ -243,13 +243,13 @@ export default {
height: calc(37.94% - 40px); height: calc(37.94% - 40px);
width: 100%; width: 100%;
margin-bottom: 20px; margin-bottom: 20px;
background: url('~@/assets/safetyIndex/主屏板块1.png') no-repeat; background: url('~@/assets/safetyIndex/modelback.png') no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
.title { .title {
width: 100%; width: 100%;
height: 33px; height: 33px;
background: url('~@/assets/safetyIndex/标题样式.png') no-repeat; background: url('~@/assets/safetyIndex/titleback.png') no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
font-size: 16px; font-size: 16px;
color: #D9E7FF; color: #D9E7FF;

@ -274,13 +274,13 @@ export default {
height: calc(37.94% - 40px); height: calc(37.94% - 40px);
width: 100%; width: 100%;
margin-bottom: 20px; margin-bottom: 20px;
background: url('~@/assets/safetyIndex/主屏板块1.png') no-repeat; background: url('~@/assets/safetyIndex/modelback.png') no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
.title { .title {
width: 100%; width: 100%;
height: 33px; height: 33px;
background: url('~@/assets/safetyIndex/标题样式.png') no-repeat; background: url('~@/assets/safetyIndex/titleback.png') no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
font-size: 16px; font-size: 16px;
color: #D9E7FF; color: #D9E7FF;

@ -1,47 +1,59 @@
<template> <template>
<div class="xfwp"> <div class="xfwp">
<div class="title" @click="showDialog"><img src="../../assets/safetyIndex/装饰009991.png" alt="">消防安全</div> <div class="title" @click="showDialog">
<img src="../../assets/safetyIndex/装饰009991.png" alt="" />消防安全
</div>
<div class="bodyBox" v-if="fireData && fireData.length"> <div class="bodyBox" v-if="fireData && fireData.length">
<div class="bodyBoxImg"><img src="../../assets/companyCanban/消防.png" alt=""></div> <div class="bodyBoxImg">
<img src="../../assets/companyCanban/消防.png" alt="" />
</div>
<div class="topBody" v-if="fireData"> <div class="topBody" v-if="fireData">
<div class="huozai"> <div class="huozai">
<img src="../../assets/companyCanban/icon/火灾事故.png" alt=""> <img src="../../assets/companyCanban/icon/火灾事故.png" alt="" />
<div class="huozaiText">火灾事故</div> <div class="huozaiText">火灾事故</div>
<div class="red">{{ fireData[0].numValue }}</div> <div class="red">{{ fireData[0].numValue }}</div>
</div> </div>
<div class="huozai"> <div class="huozai">
<img src="../../assets/companyCanban/icon/协助扑救.png" alt=""> <img src="../../assets/companyCanban/icon/协助扑救.png" alt="" />
<div class="huozaiText">协助扑救</div> <div class="huozaiText">协助扑救</div>
<div class="yellow">{{ fireData[3].numValue }}</div> <div class="yellow">{{ fireData[3].numValue }}</div>
</div> </div>
</div> </div>
<div class="topBody" v-if="fireData"> <div class="topBody" v-if="fireData">
<div class="huozai"> <div class="huozai">
<img src="../../assets/companyCanban/icon/消防违建.png" alt=""> <img src="../../assets/companyCanban/icon/消防违建.png" alt="" />
<div class="huozaiText">消防违</div> <div class="huozaiText">消防违</div>
<div class="blue">{{ fireData[2].numValue }}</div> <div class="blue">{{ fireData[2].numValue }}</div>
</div> </div>
<div class="huozai"> <div class="huozai">
<img src="../../assets/companyCanban/icon/其他事故.png" alt=""> <img src="../../assets/companyCanban/icon/其他事故.png" alt="" />
<div class="huozaiText">其他事故</div> <div class="huozaiText">其他事故</div>
<div class="green">{{ fireData[1].numValue }}</div> <div class="green">{{ fireData[1].numValue }}</div>
</div> </div>
</div> </div>
</div> </div>
<el-dialog title="消防安全上报数据详情" :visible.sync="diaVisible" class="picForm" <el-dialog
v-if="fireDetailList && fireDetailList.length"> title="消防安全上报数据详情"
:visible.sync="diaVisible"
class="picForm"
v-if="fireDetailList && fireDetailList.length"
>
<div class="xfsswh"> <div class="xfsswh">
<div class="tjsjTitle">消防设施维护</div> <div class="tjsjTitle">消防设施维护</div>
<div class="zhuangshi"></div> <div class="zhuangshi"></div>
<div class="sjItem"> <div class="sjItem">
<div class="iconBox"><img src="../../assets/companyCanban/icon/设备录入率.png" alt=""></div> <div class="iconBox">
<img src="../../assets/companyCanban/icon/设备录入率.png" alt="" />
</div>
<div class="sjText"> <div class="sjText">
<div>{{ fireDetailList[0].safeRuleName }}</div> <div>{{ fireDetailList[0].safeRuleName }}</div>
<div class="percent">{{ fireDetailList[0].numValue }}%</div> <div class="percent">{{ fireDetailList[0].numValue }}%</div>
</div> </div>
</div> </div>
<div class="sjItem"> <div class="sjItem">
<div class="iconBox"><img src="../../assets/companyCanban/icon/设备合理性.png" alt=""></div> <div class="iconBox">
<img src="../../assets/companyCanban/icon/设备合理性.png" alt="" />
</div>
<div class="sjText"> <div class="sjText">
<div>{{ fireDetailList[1].safeRuleName }}</div> <div>{{ fireDetailList[1].safeRuleName }}</div>
<div class="onlineStatus" v-if="fireDetailList[1].numValue == '是'"> <div class="onlineStatus" v-if="fireDetailList[1].numValue == '是'">
@ -55,7 +67,12 @@
</div> </div>
</div> </div>
<div class="sjItem"> <div class="sjItem">
<div class="iconBox"><img src="../../assets/companyCanban/icon/日常保养及时率.png" alt=""></div> <div class="iconBox">
<img
src="../../assets/companyCanban/icon/日常保养及时率.png"
alt=""
/>
</div>
<div class="sjText"> <div class="sjText">
<div>{{ fireDetailList[2].safeRuleName }}</div> <div>{{ fireDetailList[2].safeRuleName }}</div>
<div class="percent">{{ fireDetailList[2].numValue }}%</div> <div class="percent">{{ fireDetailList[2].numValue }}%</div>
@ -66,7 +83,9 @@
<div class="tjsjTitle">企业台账建设</div> <div class="tjsjTitle">企业台账建设</div>
<div class="zhuangshi"></div> <div class="zhuangshi"></div>
<div class="sjItem"> <div class="sjItem">
<div class="iconBox"><img src="../../assets/companyCanban/icon/必要资质.png" alt=""></div> <div class="iconBox">
<img src="../../assets/companyCanban/icon/必要资质.png" alt="" />
</div>
<div class="sjText"> <div class="sjText">
<div>{{ fireDetailList[3].safeRuleName }}</div> <div>{{ fireDetailList[3].safeRuleName }}</div>
<div class="onlineStatus" v-if="fireDetailList[3].numValue == '是'"> <div class="onlineStatus" v-if="fireDetailList[3].numValue == '是'">
@ -80,7 +99,12 @@
</div> </div>
</div> </div>
<div class="sjItem"> <div class="sjItem">
<div class="iconBox"><img src="../../assets/companyCanban/icon/验收许可或建设许可.png" alt=""></div> <div class="iconBox">
<img
src="../../assets/companyCanban/icon/验收许可或建设许可.png"
alt=""
/>
</div>
<div class="sjText"> <div class="sjText">
<div>{{ fireDetailList[4].safeRuleName }}</div> <div>{{ fireDetailList[4].safeRuleName }}</div>
<div class="onlineStatus" v-if="fireDetailList[4].numValue == '是'"> <div class="onlineStatus" v-if="fireDetailList[4].numValue == '是'">
@ -94,7 +118,9 @@
</div> </div>
</div> </div>
<div class="sjItem"> <div class="sjItem">
<div class="iconBox"><img src="../../assets/companyCanban/icon/日常检查表.png" alt=""></div> <div class="iconBox">
<img src="../../assets/companyCanban/icon/日常检查表.png" alt="" />
</div>
<div class="sjText"> <div class="sjText">
<div>{{ fireDetailList[5].safeRuleName }}</div> <div>{{ fireDetailList[5].safeRuleName }}</div>
<div class="onlineStatus" v-if="fireDetailList[5].numValue == '是'"> <div class="onlineStatus" v-if="fireDetailList[5].numValue == '是'">
@ -112,7 +138,9 @@
<div class="tjsjTitle">消防制度执行</div> <div class="tjsjTitle">消防制度执行</div>
<div class="zhuangshi"></div> <div class="zhuangshi"></div>
<div class="sjItem"> <div class="sjItem">
<div class="iconBox"><img src="../../assets/companyCanban/icon/人员培训.png" alt=""></div> <div class="iconBox">
<img src="../../assets/companyCanban/icon/人员培训.png" alt="" />
</div>
<div class="sjText"> <div class="sjText">
<div>{{ fireDetailList[6].safeRuleName }}</div> <div>{{ fireDetailList[6].safeRuleName }}</div>
<div class="onlineStatus" v-if="fireDetailList[6].numValue == '是'"> <div class="onlineStatus" v-if="fireDetailList[6].numValue == '是'">
@ -126,7 +154,12 @@
</div> </div>
</div> </div>
<div class="sjItem"> <div class="sjItem">
<div class="iconBox"><img src="../../assets/companyCanban/icon/演习举办情况.png" alt=""></div> <div class="iconBox">
<img
src="../../assets/companyCanban/icon/演习举办情况.png"
alt=""
/>
</div>
<div class="sjText"> <div class="sjText">
<div>{{ fireDetailList[7].safeRuleName }}</div> <div>{{ fireDetailList[7].safeRuleName }}</div>
<div class="onlineStatus" v-if="fireDetailList[7].numValue == '是'"> <div class="onlineStatus" v-if="fireDetailList[7].numValue == '是'">
@ -140,7 +173,12 @@
</div> </div>
</div> </div>
<div class="sjItem"> <div class="sjItem">
<div class="iconBox"><img src="../../assets/companyCanban/icon/管理层专业知晓程度.png" alt=""></div> <div class="iconBox">
<img
src="../../assets/companyCanban/icon/管理层专业知晓程度.png"
alt=""
/>
</div>
<div class="sjText"> <div class="sjText">
<div>{{ fireDetailList[8].safeRuleName }}</div> <div>{{ fireDetailList[8].safeRuleName }}</div>
<div class="onlineStatus" v-if="fireDetailList[8].numValue == '是'"> <div class="onlineStatus" v-if="fireDetailList[8].numValue == '是'">
@ -159,67 +197,68 @@
<div class="zhuangshi"></div> <div class="zhuangshi"></div>
<div class="huozai hong"> <div class="huozai hong">
<img src="../../assets/companyCanban/icon/火灾事故.png" alt=""> <img src="../../assets/companyCanban/icon/火灾事故.png" alt="" />
<div class="huozaiText">火灾事故</div> <div class="huozaiText">火灾事故</div>
<div class="red">{{ fireData[0].numValue }}</div> <div class="red">{{ fireData[0].numValue }}</div>
</div> </div>
<div class="huozai huang"> <div class="huozai huang">
<img src="../../assets/companyCanban/icon/协助扑救.png" alt=""> <img src="../../assets/companyCanban/icon/协助扑救.png" alt="" />
<div class="huozaiText">协助扑救</div> <div class="huozaiText">协助扑救</div>
<div class="yellow">{{ fireData[3].numValue }}</div> <div class="yellow">{{ fireData[3].numValue }}</div>
</div> </div>
<div class="huozai lan"> <div class="huozai lan">
<img src="../../assets/companyCanban/icon/消防违建.png" alt=""> <img src="../../assets/companyCanban/icon/消防违建.png" alt="" />
<div class="huozaiText">消防违</div> <div class="huozaiText">消防违</div>
<div class="blue">{{ fireData[2].numValue }}</div> <div class="blue">{{ fireData[2].numValue }}</div>
</div> </div>
<div class="huozai lv"> <div class="huozai lv">
<img src="../../assets/companyCanban/icon/其他事故.png" alt=""> <img src="../../assets/companyCanban/icon/其他事故.png" alt="" />
<div class="huozaiText">其他事故</div> <div class="huozaiText">其他事故</div>
<div class="green">{{ fireData[1].numValue }}</div> <div class="green">{{ fireData[1].numValue }}</div>
</div> </div>
</div> </div>
</el-dialog> </el-dialog>
</div> </div>
</template> </template>
<script> <script>
import { fireSafety, fireSafetyDetail } from '@/api/companyCanban' import { fireSafety, fireSafetyDetail } from "@/api/companyCanban";
export default { export default {
props: ['companyId'], props: ["companyId"],
data() { data() {
return { return {
diaVisible: false, diaVisible: false,
companyID: this.companyId, companyID: this.companyId,
fireData: [], fireData: [],
fireDetailList: [], fireDetailList: [],
} };
}, },
created() { created() {
fireSafety({ companyId: this.companyID }).then(res => { fireSafety({ companyId: this.companyID }).then((res) => {
this.fireData = res.data this.fireData = res.data;
}) });
}, },
methods: { methods: {
showDialog() { showDialog() {
fireSafetyDetail({ companyId: this.companyID }).then(res => { fireSafetyDetail({ companyId: this.companyID }).then((res) => {
this.fireDetailList = res.data.safeRuleNumValueVos this.fireDetailList = res.data.safeRuleNumValueVos;
this.diaVisible = true console.log(
}) "res.data.safeRuleNumValueVos",
res.data.safeRuleNumValueVos
);
this.diaVisible = true;
});
}, },
}, },
} };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.xfwp { .xfwp {
width: calc(33.33% - 13.33px); width: calc(33.33% - 13.33px);
height: 100%; height: 100%;
background: url('~@/assets/safetyIndex/主屏板块1.png') no-repeat; background: url("~@/assets/safetyIndex/modelback.png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@ -228,10 +267,10 @@ export default {
.title { .title {
width: 100%; width: 100%;
height: 33px; height: 33px;
background: url('~@/assets/safetyIndex/标题样式.png') no-repeat; background: url("~@/assets/safetyIndex/titleback.png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
font-size: 16px; font-size: 16px;
color: #D9E7FF; color: #d9e7ff;
letter-spacing: 1px; letter-spacing: 1px;
text-align: center; text-align: center;
font-weight: 500; font-weight: 500;
@ -261,7 +300,7 @@ export default {
top: 0; top: 0;
bottom: 0; bottom: 0;
margin: auto; margin: auto;
background: url('~@/assets/companyCanban/98901.png') no-repeat; background: url("~@/assets/companyCanban/98901.png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -293,56 +332,54 @@ export default {
.huozaiText { .huozaiText {
font-size: 14px; font-size: 14px;
color: #FFFFFF; color: #ffffff;
letter-spacing: 1px; letter-spacing: 1px;
font-weight: 400; font-weight: 400;
} }
.red { .red {
font-size: 16px; font-size: 16px;
color: #FFCBC9; color: #ffcbc9;
letter-spacing: 0.8px; letter-spacing: 0.8px;
line-height: 33px; line-height: 33px;
text-shadow: 0 0 8px rgba(255, 52, 52, 0.50); text-shadow: 0 0 8px rgba(255, 52, 52, 0.5);
font-weight: 600; font-weight: 600;
} }
.yellow { .yellow {
font-size: 16px; font-size: 16px;
color: #FFF5C9; color: #fff5c9;
letter-spacing: 0.8px; letter-spacing: 0.8px;
line-height: 33px; line-height: 33px;
text-shadow: 0 0 8px rgba(255, 214, 52, 0.50); text-shadow: 0 0 8px rgba(255, 214, 52, 0.5);
font-weight: 600; font-weight: 600;
} }
.blue { .blue {
font-size: 16px; font-size: 16px;
color: #C9EDFF; color: #c9edff;
letter-spacing: 0.8px; letter-spacing: 0.8px;
line-height: 33px; line-height: 33px;
text-shadow: 0 0 8px rgba(52, 227, 255, 0.50); text-shadow: 0 0 8px rgba(52, 227, 255, 0.5);
font-weight: 600; font-weight: 600;
} }
.green { .green {
font-size: 16px; font-size: 16px;
color: #C9FFFB; color: #c9fffb;
letter-spacing: 0.8px; letter-spacing: 0.8px;
line-height: 33px; line-height: 33px;
text-shadow: 0 0 8px rgba(52, 255, 185, 0.50); text-shadow: 0 0 8px rgba(52, 255, 185, 0.5);
font-weight: 600; font-weight: 600;
} }
} }
} }
} }
.picForm { .picForm {
/deep/ .el-dialog { /deep/ .el-dialog {
background-color: rgba(0, 0, 0, 0); background-color: rgba(0, 0, 0, 0);
background: url('~@/assets/head/编组 3021112.png') no-repeat; background: url("~@/assets/head/编组 3021112.png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
width: 841px; width: 841px;
height: 670px; height: 670px;
@ -350,7 +387,7 @@ export default {
.el-dialog__title { .el-dialog__title {
font-size: 16px; font-size: 16px;
color: #EBFFF4; color: #ebfff4;
letter-spacing: 2px; letter-spacing: 2px;
text-shadow: 0 0 9px rgba(21, 255, 195, 0.77); text-shadow: 0 0 9px rgba(21, 255, 195, 0.77);
font-weight: 400; font-weight: 400;
@ -365,7 +402,7 @@ export default {
width: 100%; width: 100%;
height: 120px; height: 120px;
margin: 10px 0; margin: 10px 0;
background: url('~@/assets/companyCanban/09091.png') no-repeat; background: url("~@/assets/companyCanban/09091.png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
position: relative; position: relative;
padding: 0 10px; padding: 0 10px;
@ -379,10 +416,10 @@ export default {
left: 14px; left: 14px;
top: 10px; top: 10px;
font-size: 16px; font-size: 16px;
color: #FFE6D9; color: #ffe6d9;
letter-spacing: 0; letter-spacing: 0;
line-height: 16px; line-height: 16px;
text-shadow: 0 0 8px rgba(255, 119, 52, 0.50); text-shadow: 0 0 8px rgba(255, 119, 52, 0.5);
font-weight: 500; font-weight: 500;
} }
@ -390,7 +427,8 @@ export default {
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
background: url('~@/assets/companyCanban/矩形(装饰).png') no-repeat; background: url("~@/assets/companyCanban/矩形(装饰).png")
no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
width: 15px; width: 15px;
height: 15px; height: 15px;
@ -399,7 +437,7 @@ export default {
.sjItem { .sjItem {
width: 200px; width: 200px;
height: 60px; height: 60px;
background: url('~@/assets/companyCanban/7691备份.png') no-repeat; background: url("~@/assets/companyCanban/7691备份.png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
margin-top: 20px; margin-top: 20px;
display: flex; display: flex;
@ -412,11 +450,15 @@ export default {
border: 1px solid rgba(64, 145, 169, 1); border: 1px solid rgba(64, 145, 169, 1);
box-shadow: 0px 0px 6px 0px rgba(74, 176, 195, 1); box-shadow: 0px 0px 6px 0px rgba(74, 176, 195, 1);
box-sizing: border-box; box-sizing: border-box;
background-image: linear-gradient(180deg, rgba(74, 176, 195, 0.37) 0%, rgba(98, 155, 227, 0.02) 43%, rgba(74, 176, 195, 0.37) 100%); background-image: linear-gradient(
180deg,
rgba(74, 176, 195, 0.37) 0%,
rgba(98, 155, 227, 0.02) 43%,
rgba(74, 176, 195, 0.37) 100%
);
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.sjText { .sjText {
@ -429,7 +471,7 @@ export default {
.percent { .percent {
font-size: 18px; font-size: 18px;
color: #FFFFFF; color: #ffffff;
letter-spacing: 1.12px; letter-spacing: 1.12px;
font-weight: 700; font-weight: 700;
margin-top: 8px; margin-top: 8px;
@ -446,7 +488,7 @@ export default {
width: 18px; width: 18px;
height: 18px; height: 18px;
border-radius: 50%; border-radius: 50%;
background: #2CFED3; background: #2cfed3;
box-shadow: inset 0px 1px 2px 0px rgba(255, 255, 255, 1); box-shadow: inset 0px 1px 2px 0px rgba(255, 255, 255, 1);
box-shadow: 0px 0px 8px 1px rgba(44, 254, 211, 0.65); box-shadow: 0px 0px 8px 1px rgba(44, 254, 211, 0.65);
box-shadow: 0px 0px 4px 0px rgba(33, 121, 195, 0.56); box-shadow: 0px 0px 4px 0px rgba(33, 121, 195, 0.56);
@ -456,7 +498,7 @@ export default {
width: 18px; width: 18px;
height: 18px; height: 18px;
border-radius: 50%; border-radius: 50%;
background: rgba(183, 33, 33, 0.50); background: rgba(183, 33, 33, 0.5);
} }
} }
@ -472,21 +514,20 @@ export default {
height: 18px; height: 18px;
border-radius: 50%; border-radius: 50%;
opacity: 0.5; opacity: 0.5;
background: #1C9980; background: #1c9980;
} }
.red { .red {
width: 18px; width: 18px;
height: 18px; height: 18px;
border-radius: 50%; border-radius: 50%;
background: #FF2D2D; background: #ff2d2d;
box-shadow: inset 0px 1px 2px 0px rgba(255, 255, 255, 1); box-shadow: inset 0px 1px 2px 0px rgba(255, 255, 255, 1);
box-shadow: 0px 0px 8px 1px rgba(254, 67, 44, 0.65); box-shadow: 0px 0px 8px 1px rgba(254, 67, 44, 0.65);
box-shadow: 0px 0px 4px 0px rgba(195, 33, 33, 0.56); box-shadow: 0px 0px 4px 0px rgba(195, 33, 33, 0.56);
} }
} }
} }
} }
} }
@ -494,7 +535,7 @@ export default {
height: 180px; height: 180px;
width: 100%; width: 100%;
margin: 10px 0; margin: 10px 0;
background: url('~@/assets/companyCanban/09091.png') no-repeat; background: url("~@/assets/companyCanban/09091.png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
position: relative; position: relative;
padding: 0 10px; padding: 0 10px;
@ -508,10 +549,10 @@ export default {
left: 14px; left: 14px;
top: 10px; top: 10px;
font-size: 16px; font-size: 16px;
color: #FFE6D9; color: #ffe6d9;
letter-spacing: 0; letter-spacing: 0;
line-height: 16px; line-height: 16px;
text-shadow: 0 0 8px rgba(255, 119, 52, 0.50); text-shadow: 0 0 8px rgba(255, 119, 52, 0.5);
font-weight: 500; font-weight: 500;
} }
@ -519,7 +560,8 @@ export default {
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
background: url('~@/assets/companyCanban/矩形(装饰).png') no-repeat; background: url("~@/assets/companyCanban/矩形(装饰).png")
no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
width: 15px; width: 15px;
height: 15px; height: 15px;
@ -543,7 +585,7 @@ export default {
.huozaiText { .huozaiText {
width: 100%; width: 100%;
font-size: 14px; font-size: 14px;
color: #FFFFFF; color: #ffffff;
text-align: center; text-align: center;
letter-spacing: 1px; letter-spacing: 1px;
font-weight: 400; font-weight: 400;
@ -553,59 +595,58 @@ export default {
width: 100%; width: 100%;
text-align: center; text-align: center;
font-size: 16px; font-size: 16px;
color: #FFCBC9; color: #ffcbc9;
letter-spacing: 0.8px; letter-spacing: 0.8px;
line-height: 33px; line-height: 33px;
text-shadow: 0 0 8px rgba(255, 52, 52, 0.50); text-shadow: 0 0 8px rgba(255, 52, 52, 0.5);
font-weight: 600; font-weight: 600;
} }
.yellow { .yellow {
font-size: 16px; font-size: 16px;
color: #FFF5C9; color: #fff5c9;
letter-spacing: 0.8px; letter-spacing: 0.8px;
line-height: 33px; line-height: 33px;
text-shadow: 0 0 8px rgba(255, 214, 52, 0.50); text-shadow: 0 0 8px rgba(255, 214, 52, 0.5);
font-weight: 600; font-weight: 600;
} }
.blue { .blue {
font-size: 16px; font-size: 16px;
color: #C9EDFF; color: #c9edff;
letter-spacing: 0.8px; letter-spacing: 0.8px;
line-height: 33px; line-height: 33px;
text-shadow: 0 0 8px rgba(52, 227, 255, 0.50); text-shadow: 0 0 8px rgba(52, 227, 255, 0.5);
font-weight: 600; font-weight: 600;
} }
.green { .green {
font-size: 16px; font-size: 16px;
color: #C9FFFB; color: #c9fffb;
letter-spacing: 0.8px; letter-spacing: 0.8px;
line-height: 33px; line-height: 33px;
text-shadow: 0 0 8px rgba(52, 255, 185, 0.50); text-shadow: 0 0 8px rgba(52, 255, 185, 0.5);
font-weight: 600; font-weight: 600;
} }
} }
.lan { .lan {
background: url('~@/assets/companyCanban/背景(蓝).png') no-repeat; background: url("~@/assets/companyCanban/背景(蓝).png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
} }
.huang { .huang {
background: url('~@/assets/companyCanban/背景(黄).png') no-repeat; background: url("~@/assets/companyCanban/背景(黄).png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
} }
.lv { .lv {
background: url('~@/assets/companyCanban/背景(绿).png') no-repeat; background: url("~@/assets/companyCanban/背景(绿).png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
} }
.hong { .hong {
background: url('~@/assets/companyCanban/背景(红).png') no-repeat; background: url("~@/assets/companyCanban/背景(红).png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
} }
} }

@ -153,7 +153,7 @@ export default {
.xfwp { .xfwp {
width: calc(33.33% - 13.33px); width: calc(33.33% - 13.33px);
height: 100%; height: 100%;
background: url('~@/assets/safetyIndex/主屏板块1.png') no-repeat; background: url('~@/assets/safetyIndex/modelback.png') no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@ -162,7 +162,7 @@ export default {
.title { .title {
width: 100%; width: 100%;
height: 33px; height: 33px;
background: url('~@/assets/safetyIndex/标题样式.png') no-repeat; background: url('~@/assets/safetyIndex/titleback.png') no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
font-size: 16px; font-size: 16px;
color: #D9E7FF; color: #D9E7FF;

@ -206,7 +206,7 @@ export default {
init_right_chart() { init_right_chart() {
let data = [ let data = [
["业务咨询", 532], ["业务咨询", 532],
["法律服务", 231], ["法律办理", 231],
["证照办理", 234], ["证照办理", 234],
]; ];
this.right_option.series[0].data = data; this.right_option.series[0].data = data;

@ -38,7 +38,7 @@
<div class="person_type"> <div class="person_type">
<div class="person_type_item">普通岗位</div> <div class="person_type_item">普通岗位</div>
<div class="person_type_item">重点岗位</div> <div class="person_type_item">重点岗位</div>
<div class="person_type_item">专家岗位</div> <div class="person_type_item">专家人员</div>
<div class="person_type_item">重点人员</div> <div class="person_type_item">重点人员</div>
</div> </div>
<!-- 员工类型数量 --> <!-- 员工类型数量 -->

@ -51,7 +51,7 @@ export default {
paths.push(new build_map.Point(lng, lat)); paths.push(new build_map.Point(lng, lat));
} }
polygon = new build_map.Polygon(paths, { polygon = new build_map.Polygon(paths, {
fillColor: "#dcdfe6", fillColor: "#3b4c44",
strokeColor: "#0f1423", strokeColor: "#0f1423",
fillOpacity: 0.4, fillOpacity: 0.4,
strokeWeight: 1, strokeWeight: 1,
@ -66,7 +66,7 @@ export default {
paths.push(new build_map.Point(lng, lat)); paths.push(new build_map.Point(lng, lat));
} }
polygon = new build_map.Polygon(paths, { polygon = new build_map.Polygon(paths, {
fillColor: "#dcdfe6", fillColor: "#3b4c44",
strokeColor: "#0f1423", strokeColor: "#0f1423",
fillOpacity: 0.4, fillOpacity: 0.4,
strokeWeight: 1, strokeWeight: 1,

@ -0,0 +1,31 @@
<template>
<div class="map" id="container"></div>
</template>
<script>
export default {
name: "LineMap",
data() {
return {};
},
mounted() {
this.init_map()
},
methods: {
init_map() {
//
var map = new BMapGL.Map("container"); //
var point = new BMapGL.Point(121.619992, 30.025703); //
map.centerAndZoom(point, 14); //
map.enableScrollWheelZoom();
map.setMapType(BMAP_SATELLITE_MAP);
//
var map = new BMapGL.Map("allmap", {
enableRotate: false,
enableTilt: false,
});
},
},
};
</script>
<style lang="less" scoped>
</style>

@ -18,6 +18,9 @@
<!-- <div class="map_body"> <!-- <div class="map_body">
<HomeMap ref="homeMap"></HomeMap> <HomeMap ref="homeMap"></HomeMap>
</div> --> </div> -->
<!-- <div class="map_body">
<LineMap ref="lineMap"></LineMap>
</div> -->
<div class="left_box"> <div class="left_box">
<!-- 园区企业 --> <!-- 园区企业 -->
<CompanyNum ref="companyNum"></CompanyNum> <CompanyNum ref="companyNum"></CompanyNum>
@ -61,6 +64,8 @@ import CompanyService from "./components/companyService";
import Notification from "./components/notification"; import Notification from "./components/notification";
import Endanger from "./components/endanger"; import Endanger from "./components/endanger";
// import HomeMap from "./components/homeMap"; // import HomeMap from "./components/homeMap";
// import LineMap from "./components/lineMap"
import { topRanking } from '@/api/safetyIndex'
export default { export default {
name: "CompositeIndex", name: "CompositeIndex",
components: { components: {
@ -71,6 +76,7 @@ export default {
Notification, Notification,
Endanger, Endanger,
// HomeMap, // HomeMap,
// LineMap
}, },
data() { data() {
return { return {
@ -88,6 +94,9 @@ export default {
select_value: "地图", select_value: "地图",
}; };
}, },
mounted() {
this.get_rank()
},
methods: { methods: {
change_map(val) { change_map(val) {
if (val == "2") { if (val == "2") {
@ -97,6 +106,17 @@ export default {
}); });
} }
}, },
//
async get_rank() {
let params = {
scoreType: 'month'
}
let res = await topRanking(params)
console.log('restop',res);
let iframe_window = this.$refs.iframeDom.contentWindow
let data = res.data
iframe_window.postMessage(data,'*')
},
}, },
}; };
</script> </script>

@ -24,6 +24,16 @@ export default {
type: Array, type: Array,
default: () => [], default: () => [],
}, },
//
camera_list: {
type: Array,
default: () => [],
},
//
new_line: {
type: Array,
default: () => [],
},
}, },
data() { data() {
return { return {
@ -99,8 +109,28 @@ export default {
car_marker.addEventListener("click", function () { car_marker.addEventListener("click", function () {
// //
// //
that.$emit('get_car_text',item) that.$emit("get_car_text", item);
}) });
});
//
that.camera_list.forEach((item) => {
var camera_point = new BMap.Point(item.longitude, item.latitude);
// ;
var camera_icon = {};
camera_icon = new BMap.Icon(
require("@/assets/factor/factor04.png"),
new BMap.Size(20, 40),
{
imageOffset: new BMap.Size(0, 0, 5), //
}
);
var camera_marker = new BMap.Marker(camera_point, { icon: camera_icon }); //
map.addOverlay(camera_marker);
// camera_marker.addEventListener("click", function () {
// //
// //
// that.$emit("get_car_text", item);
// });
}); });
}, 500); }, 500);
map.centerAndZoom( map.centerAndZoom(
@ -198,21 +228,26 @@ export default {
} }
}, },
// //
cause_car_line_map(item) { cause_car_line_map(item, new_line) {
let BMap = window.BMap; let BMap = window.BMap;
let map = new BMap.Map("container", { let map = new BMap.Map("container", {
style: { style: {
styleJson, styleJson,
}, },
}); });
console.log("item", item);
//let that = this; // //let that = this; //
// let label = new BMap.Label(); // let label = new BMap.Label();
//
//119.460741
//29.531762999999998
//29.531762
setTimeout(() => { setTimeout(() => {
var point = new BMap.Point(item.longitude, item.latitude) var point = new BMap.Point(new_line[0].longitude, new_line[0].latitude);
// ; // ;
var myIcon = {}; var myIcon = {};
myIcon = new BMap.Icon( myIcon = new BMap.Icon(
require("@/assets/factor/factor03.png"), require("@/assets/factor/car_start.png"),
new BMap.Size(20, 40), new BMap.Size(20, 40),
{ {
imageOffset: new BMap.Size(0, 0, 5), // imageOffset: new BMap.Size(0, 0, 5), //
@ -220,15 +255,94 @@ export default {
); );
var marker = new BMap.Marker(point, { icon: myIcon }); // var marker = new BMap.Marker(point, { icon: myIcon }); //
map.addOverlay(marker); map.addOverlay(marker);
},500) //
var end_point = new BMap.Point(
new_line[new_line.length - 1].longitude,
new_line[new_line.length - 1].latitude
);
var end_icon = {};
end_icon = new BMap.Icon(
require("@/assets/factor/car_end.png"),
new BMap.Size(20, 40),
{
imageOffset: new BMap.Size(0, 0, 5), //
}
);
var end_marker = new BMap.Marker(end_point, { icon: end_icon }); //
map.addOverlay(end_marker);
map.centerAndZoom( //
new BMap.Point(item.longitude, item.latitude), var line_point = [];
16 for (let i = 0; i < new_line.length; i++) {
); // line_point.push(
new BMap.Point(new_line[i].longitude, new_line[i].latitude)
);
}
console.log("line_point", line_point);
var polyline = new BMap.Polyline(line_point, {
strokeColor: "red",
strokeWeight: 6,
strokeOpacity: 1,
});
console.log("pl", polyline);
map.addOverlay(polyline);
}, 500);
map.centerAndZoom(new BMap.Point(item.longitude, item.latitude), 8); //
map.setMinZoom(12); // map.setMinZoom(12); //
map.setMaxZoom(19); map.setMaxZoom(19);
map.enableScrollWheelZoom(true); map.enableScrollWheelZoom(true);
// showBoundaryx(MapLine.features[5]);
// function showBoundaryx(city) {
// var paths = [];
// var list = city.geometry.coordinates;
// var polygon = {};
// if (list.length > 1) {
// for (let a = 0; a < list.length; a++) {
// paths = [];
// for (let i = 0; i < list[a][0].length; i++) {
// let lat = list[a][0][i][1],
// lng = list[a][0][i][0];
// paths.push(new BMap.Point(lng, lat));
// }
// console.log('paths',paths);
// polygon = new BMap.Polygon(paths, {
// fillColor: "#3b4c44",
// strokeColor: "#0f1423",
// fillOpacity: 0.6,
// strokeWeight: 1,
// }); //
// polygon.disableMassClear();
// map.addOverlay(polygon); //
// }
// } else {
// for (let i = 0; i < list[0].length; i++) {
// let lat = list[0][i][1],
// lng = list[0][i][0];
// paths.push(new BMap.Point(lng, lat));
// }
// console.log('paths',paths);
// polygon = new BMap.Polygon(paths, {
// fillColor: "#3b4c44",
// strokeColor: "#0f1423",
// fillOpacity: 0.6,
// strokeWeight: 1,
// }); //
// polygon.disableMassClear();
// map.addOverlay(polygon); //
// }
// polygon.infowindow = new BMap.InfoWindow();
// polygon.infowindow.name = city.properties.name;
// polygon.addEventListener("mouseover", function () {
// polygon.setFillColor("#ffa500");
// });
// polygon.addEventListener("mouseout", function () {
// map.removeOverlay(label);
// polygon.setFillColor("#3b4c44");
// });
// }
}, },
}, },
}; };

@ -10,6 +10,7 @@
:company_list="company_list" :company_list="company_list"
:video_list="video_list" :video_list="video_list"
:car_list="car_list" :car_list="car_list"
:camera_list="camera_list"
@get_company_text="get_company_text" @get_company_text="get_company_text"
@get_video_text="get_video_text" @get_video_text="get_video_text"
@get_car_text="get_car_text" @get_car_text="get_car_text"
@ -58,6 +59,9 @@
<el-button size="small" @click="get_car()">{{ <el-button size="small" @click="get_car()">{{
this.btn_car this.btn_car
}}</el-button> }}</el-button>
<el-button size="small" @click="get_camera()">{{
this.btn_camera
}}</el-button>
</div> </div>
</div> </div>
<!-- 公司信息文本展示 --> <!-- 公司信息文本展示 -->
@ -158,6 +162,8 @@ import {
queryCompany, queryCompany,
queryVideo, queryVideo,
car_point, car_point,
car_line,
camera_point,
} from "@/api/factorResources"; } from "@/api/factorResources";
export default { export default {
name: "factor", name: "factor",
@ -169,6 +175,7 @@ export default {
company_list: [], // company_list: [], //
video_list: [], // video_list: [], //
car_list: [], // car_list: [], //
camera_list: [], //
search: { search: {
word: "", word: "",
select: "企业", select: "企业",
@ -179,7 +186,8 @@ export default {
], ],
btn_video: "", // btn_video: "", //
btn_item: "", // btn_item: "", //
btn_car:'', // btn_car: "", //
btn_camera: "", //
company_flag: "0", // company_flag: "0", //
/////////// ///////////
text_company: "", text_company: "",
@ -208,6 +216,7 @@ export default {
// //
this.get_video(); this.get_video();
this.get_car_point(); this.get_car_point();
this.get_camera_point();
}, },
methods: { methods: {
// //
@ -250,26 +259,43 @@ export default {
}; };
queryVideo(param).then((res) => { queryVideo(param).then((res) => {
this.video_list = res.data; this.video_list = res.data;
this.camera_list = [];
this.company_list = []; this.company_list = [];
this.car_list = [] this.car_list = [];
// //
this.$refs.factorMap.init_map(); this.$refs.factorMap.init_map();
}); });
}, },
// //
async get_car() { async get_car() {
this.company_flag = '0' this.company_flag = "0";
let res = await car_point(); let res = await car_point();
console.log("resss", res); console.log("resss", res);
if (res.code == 200) { if (res.code == 200) {
this.car_list = res.data this.car_list = res.data;
this.camera_list = [];
this.company_list = []; this.company_list = [];
this.video_list = [] this.video_list = [];
// //
this.$refs.factorMap.init_map(); this.$refs.factorMap.init_map();
// this.btn_car = `(${res.data.length})`; // this.btn_car = `(${res.data.length})`;
} else if (res.code == 500) { } else if (res.code == 500) {
this.$message.warning(res.msg) this.$message.warning(res.msg);
}
},
//
async get_camera() {
this.company_flag = "0";
let res = await camera_point();
if (res.code == 200) {
this.camera_list = res.data;
this.car_list = [];
this.company_list = [];
this.video_list = [];
//
this.$refs.factorMap.init_map();
} else if (res.code == 500) {
this.$message.warning(res.msg);
} }
}, },
// //
@ -323,10 +349,29 @@ export default {
} }
}, },
// //
get_car_text(item) { async get_car_text(item) {
let params = {
vehicleNo: item.vehicleNo,
};
let res = await car_line(params);
if (res.code == 200) {
console.log("res", res.data);
// let arr = [
// { longitude: 121.597849, latitude: 29.904037 },
// { longitude: 121.593864, latitude: 29.903234 },
// { longitude: 121.594464, latitude: 29.905234 },
// { longitude: 121.596364, latitude: 29.904434 },
// ];
let arr = res.data;
const new_line = arr.map((item) => ({
longitude: item.longitude,
latitude: item.latitude,
}));
console.log("nnn", new_line);
this.$message.success("车辆轨迹查询中...");
// //
console.log('item',item); this.$refs.factorMap.cause_car_line_map(item, new_line);
this.$refs.factorMap.cause_car_line_map(item) }
}, },
async get_car_point() { async get_car_point() {
@ -336,7 +381,17 @@ export default {
// this.car_list = res.data // this.car_list = res.data
this.btn_car = `危化品车辆(${res.data.length})`; this.btn_car = `危化品车辆(${res.data.length})`;
} else if (res.code == 500) { } else if (res.code == 500) {
this.$message.warning(res.msg) this.$message.warning(res.msg);
}
},
async get_camera_point() {
let res = await camera_point();
console.log("resssc", res);
if (res.code == 200) {
// this.car_list = res.data
this.btn_camera = `感知设备(${res.data.length})`;
} else if (res.code == 500) {
this.$message.warning(res.msg);
} }
}, },
// //
@ -472,7 +527,7 @@ export default {
} }
.left_check { .left_check {
width: 13vw; width: 13vw;
height: 18vh; height: 23vh;
border: 0.1px solid #28847e; border: 0.1px solid #28847e;
background: #212f30; background: #212f30;
border-radius: 4px; border-radius: 4px;
@ -491,7 +546,7 @@ export default {
margin-top: 1vh; margin-top: 1vh;
margin-left: 1vw; margin-left: 1vw;
width: 11vw; width: 11vw;
height: 13vh; height: 18vh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.el-button { .el-button {

@ -199,6 +199,7 @@ export default {
function showBoundaryEx(city) { function showBoundaryEx(city) {
var paths = []; var paths = [];
var list = city.geometry.coordinates; var list = city.geometry.coordinates;
console.log('city.geometry.coordinates',list[0]);
var polygon = {}; var polygon = {};
if (list.length > 1) { if (list.length > 1) {
for (let a = 0; a < list.length; a++) { for (let a = 0; a < list.length; a++) {
@ -219,9 +220,7 @@ export default {
} }
} else { } else {
for (let i = 0; i < list[0].length; i++) { for (let i = 0; i < list[0].length; i++) {
let lat = list[0][i][1], paths.push(new BMap.Point(list[0][i][0], list[0][i][1]));
lng = list[0][i][0];
paths.push(new BMap.Point(lng, lat));
} }
polygon = new BMap.Polygon(paths, { polygon = new BMap.Polygon(paths, {
fillColor: "#3b4c44", fillColor: "#3b4c44",

@ -193,13 +193,13 @@ export default {
height: 23%; height: 23%;
width: 100%; width: 100%;
margin-bottom: 20px; margin-bottom: 20px;
background: url("~@/assets/safetyIndex/主屏板块1.png") no-repeat; background: url("~@/assets/safetyIndex/modelback.png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
.title { .title {
width: 100%; width: 100%;
height: 33px; height: 33px;
background: url("~@/assets/safetyIndex/标题样式.png") no-repeat; background: url("~@/assets/safetyIndex/titleback.png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
font-size: 16px; font-size: 16px;
color: #d9e7ff; color: #d9e7ff;

@ -335,13 +335,13 @@ export default {
height: 23%; height: 23%;
width: 100%; width: 100%;
margin-bottom: 20px; margin-bottom: 20px;
background: url("~@/assets/safetyIndex/主屏板块1.png") no-repeat; background: url("~@/assets/safetyIndex/modelback.png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
.title { .title {
width: 100%; width: 100%;
height: 33px; height: 33px;
background: url("~@/assets/safetyIndex/标题样式.png") no-repeat; background: url("~@/assets/safetyIndex/titleback.png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
font-size: 16px; font-size: 16px;
color: #d9e7ff; color: #d9e7ff;

@ -73,7 +73,7 @@ export default {
height: 22.9%; height: 22.9%;
width: 100%; width: 100%;
margin-bottom: 20px; margin-bottom: 20px;
background: url('~@/assets/safetyIndex/主屏板块1.png') no-repeat; background: url('~@/assets/safetyIndex/modelback.png') no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
} }
@ -81,7 +81,7 @@ export default {
height: 37.56%; height: 37.56%;
width: 100%; width: 100%;
margin-bottom: 20px; margin-bottom: 20px;
background: url('~@/assets/safetyIndex/主屏板块1.png') no-repeat; background: url('~@/assets/safetyIndex/modelback.png') no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
} }
} }

@ -116,7 +116,7 @@ export default {
height: 37.7%; height: 37.7%;
width: 100%; width: 100%;
margin-bottom: 20px; margin-bottom: 20px;
background: url('~@/assets/safetyIndex/主屏板块5.png') no-repeat; background: url('~@/assets/safetyIndex/modelback03.png') no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
margin-top: 20px; margin-top: 20px;
padding-top: 33px; padding-top: 33px;

@ -133,7 +133,7 @@ export default {
height: 37.7%; height: 37.7%;
width: 100%; width: 100%;
margin-bottom: 20px; margin-bottom: 20px;
background: url('~@/assets/safetyIndex/主屏板块1.png') no-repeat; background: url('~@/assets/safetyIndex/modelback.png') no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
@ -141,7 +141,7 @@ export default {
.title { .title {
width: 100%; width: 100%;
height: 33px; height: 33px;
background: url('~@/assets/safetyIndex/标题样式.png') no-repeat; background: url('~@/assets/safetyIndex/titleback.png') no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
font-size: 16px; font-size: 16px;
color: #D9E7FF; color: #D9E7FF;
@ -168,7 +168,7 @@ export default {
box-sizing: border-box; box-sizing: border-box;
width: 380px; width: 380px;
height: 42px; height: 42px;
background: url('~@/assets/safetyIndex/编组 38备份21.png') no-repeat; background: url('~@/assets/safetyIndex/back007.png') no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
display: flex; display: flex;
justify-content: space-evenly; justify-content: space-evenly;
@ -215,7 +215,7 @@ export default {
.green { .green {
width: 67px; width: 67px;
height: 67px; height: 67px;
background: url('~@/assets/safetyIndex/绿色.png') no-repeat; background: url('~@/assets/safetyIndex/greenicon.png') no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
margin: 0 auto; margin: 0 auto;
margin-bottom: 10px; margin-bottom: 10px;
@ -244,7 +244,7 @@ export default {
.blue { .blue {
width: 67px; width: 67px;
height: 67px; height: 67px;
background: url('~@/assets/safetyIndex/蓝色.png') no-repeat; background: url('~@/assets/safetyIndex/blueicon.png') no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
margin: 0 auto; margin: 0 auto;
margin-bottom: 10px; margin-bottom: 10px;
@ -270,7 +270,7 @@ export default {
.yellow { .yellow {
width: 67px; width: 67px;
height: 67px; height: 67px;
background: url('~@/assets/safetyIndex/黄色.png') no-repeat; background: url('~@/assets/safetyIndex/yellowicon.png') no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
margin: 0 auto; margin: 0 auto;
margin-bottom: 10px; margin-bottom: 10px;
@ -298,7 +298,7 @@ export default {
.red { .red {
width: 67px; width: 67px;
height: 67px; height: 67px;
background: url('~@/assets/safetyIndex/红色.png') no-repeat; background: url('~@/assets/safetyIndex/redicon.png') no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
margin: 0 auto; margin: 0 auto;
margin-bottom: 10px; margin-bottom: 10px;

@ -27,7 +27,7 @@
</div> </div>
<div class="topBottom"> <div class="topBottom">
<div class="topBottomItem" @click="goMore('剧毒')"> <div class="topBottomItem" @click="goMore('剧毒')">
<img src="../../assets/safetyIndex/涉危企业.png" alt="" /> <img src="../../assets/safetyIndex/dangericon.png" alt="" />
<div class="itemBox"> <div class="itemBox">
<div class="qiye"> <div class="qiye">
{{ {{
@ -47,7 +47,7 @@
</div> </div>
</div> </div>
<div class="topBottomItem" @click="goMore('易制爆')"> <div class="topBottomItem" @click="goMore('易制爆')">
<img src="../../assets/safetyIndex/易制爆企业2.png" alt="" /> <img src="../../assets/safetyIndex/explodeicon.png" alt="" />
<div class="itemBox"> <div class="itemBox">
<div class="qiye"> <div class="qiye">
{{ {{
@ -67,7 +67,7 @@
</div> </div>
</div> </div>
<div class="topBottomItem" @click="goMore('易制毒')"> <div class="topBottomItem" @click="goMore('易制毒')">
<img src="../../assets/safetyIndex/易制毒2.png" alt="" /> <img src="../../assets/safetyIndex/drugicon.png" alt="" />
<div class="itemBox"> <div class="itemBox">
<div class="qiye"> <div class="qiye">
{{ {{
@ -87,7 +87,7 @@
</div> </div>
</div> </div>
<div class="topBottomItem" @click="goMore('放射源')"> <div class="topBottomItem" @click="goMore('放射源')">
<img src="../../assets/safetyIndex/放射源2.png" alt="" /> <img src="../../assets/safetyIndex/radioactiveicon.png" alt="" />
<div class="itemBox"> <div class="itemBox">
<div class="qiye"> <div class="qiye">
{{ {{
@ -293,7 +293,7 @@ export default {
.toubu { .toubu {
width: 100%; width: 100%;
height: calc(58.84% + 20px); height: calc(58.84% + 20px);
background: url("~@/assets/safetyIndex/主屏板块4.png") no-repeat; background: url("~@/assets/safetyIndex/modelback02.png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
padding: 35px 20px 20px; padding: 35px 20px 20px;
box-sizing: border-box; box-sizing: border-box;
@ -599,7 +599,7 @@ export default {
.third { .third {
width: 31.34%; width: 31.34%;
height: 80%; height: 80%;
background: url("~@/assets/safetyIndex/编组 352111.png") no-repeat; background: url("~@/assets/safetyIndex/ranking03.png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
padding: 5px 10px 12px 27px; padding: 5px 10px 12px 27px;
box-sizing: border-box; box-sizing: border-box;
@ -679,7 +679,7 @@ export default {
left: 50%; left: 50%;
top: 30px; top: 30px;
margin-left: -20.5%; margin-left: -20.5%;
background: url("~@/assets/safetyIndex/编组 3521.png") no-repeat; background: url("~@/assets/safetyIndex/ranking01.png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
padding: 10px 16px 16px; padding: 10px 16px 16px;
text-align: center; text-align: center;

@ -219,7 +219,7 @@ export default {
height: 37.7%; height: 37.7%;
width: 100%; width: 100%;
margin-bottom: 20px; margin-bottom: 20px;
background: url('~@/assets/safetyIndex/主屏板块1.png') no-repeat; background: url('~@/assets/safetyIndex/modelback.png') no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
@ -227,7 +227,7 @@ export default {
.title { .title {
width: 100%; width: 100%;
height: 33px; height: 33px;
background: url('~@/assets/safetyIndex/标题样式.png') no-repeat; background: url('~@/assets/safetyIndex/titleback.png') no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
font-size: 16px; font-size: 16px;
color: #D9E7FF; color: #D9E7FF;

@ -511,13 +511,13 @@ export default {
height: 35.84%; height: 35.84%;
width: 100%; width: 100%;
margin-bottom: 20px; margin-bottom: 20px;
background: url("~@/assets/safetyIndex/主屏板块1.png") no-repeat; background: url("~@/assets/safetyIndex/modelback.png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
.title { .title {
width: 100%; width: 100%;
height: 33px; height: 33px;
background: url("~@/assets/safetyIndex/标题样式.png") no-repeat; background: url("~@/assets/safetyIndex/titleback.png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
font-size: 16px; font-size: 16px;
color: #d9e7ff; color: #d9e7ff;

@ -87,13 +87,13 @@ export default {
height: 35.84%; height: 35.84%;
width: 100%; width: 100%;
margin-bottom: 20px; margin-bottom: 20px;
background: url('~@/assets/safetyIndex/主屏板块1.png') no-repeat; background: url('~@/assets/safetyIndex/modelback.png') no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
.title { .title {
width: 100%; width: 100%;
height: 33px; height: 33px;
background: url('~@/assets/safetyIndex/标题样式.png') no-repeat; background: url('~@/assets/safetyIndex/titleback.png') no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
font-size: 16px; font-size: 16px;
color: #D9E7FF; color: #D9E7FF;

Loading…
Cancel
Save