|
@@ -1,2 +1,220 @@
|
|
|
<template>
|
|
<template>
|
|
|
|
|
+ <div id="containerMap" class="containerMap">
|
|
|
|
|
+ <div class="alarm_list">
|
|
|
|
|
+ <span class="alarm_list_item" v-for="item in alarm_list"><img :src="alarm_type[item.code].icon"/><span>{{ alarm_type[item.code].name }}</span><span class="alarm_item_brager" :style="{'background-color':alarm_type[item.code].bg}">{{ item.count }}</span></span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="houselist">
|
|
|
|
|
+ <span class="item" v-for="item in houselist" :style="{'background-color':alarm_type[item.alarmtype].bg}" >
|
|
|
|
|
+ <el-tooltip :content="item.name" placement="top" class="custom-tooltip">
|
|
|
|
|
+ <span class="item">{{ item.code }}</span>
|
|
|
|
|
+ </el-tooltip>
|
|
|
|
|
+ </span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
</template>
|
|
</template>
|
|
|
|
|
+<script setup>
|
|
|
|
|
+import AMapLoader from '@amap/amap-jsapi-loader';
|
|
|
|
|
+import {shallowRef,onMounted} from "vue";
|
|
|
|
|
+
|
|
|
|
|
+const map = shallowRef(null);
|
|
|
|
|
+const AMap = ref();
|
|
|
|
|
+const alarm_type=ref({
|
|
|
|
|
+ "none":{
|
|
|
|
|
+ name:'行为合规',
|
|
|
|
|
+ bg:'#2488fe',
|
|
|
|
|
+ icon:'src/assets/images/ico_alarm_none.png'
|
|
|
|
|
+ },
|
|
|
|
|
+ "smoke":{
|
|
|
|
|
+ name:'吸烟告警',
|
|
|
|
|
+ bg:'#ef911c',
|
|
|
|
|
+ icon:'src/assets/images/ico_alarm_smoke.png'
|
|
|
|
|
+ },
|
|
|
|
|
+ "fire":{
|
|
|
|
|
+ name:'异常烟火',
|
|
|
|
|
+ icon:'src/assets/images/ico_alarm_fire.png',
|
|
|
|
|
+ bg:'#de4a4a'
|
|
|
|
|
+ },
|
|
|
|
|
+ "temp":{
|
|
|
|
|
+ name:'环境异常',
|
|
|
|
|
+ bg:'#12c9b5',
|
|
|
|
|
+ icon:'src/assets/images/ico_alarm_temp.png'
|
|
|
|
|
+ },
|
|
|
|
|
+ "person":{
|
|
|
|
|
+ name:'人员入侵',
|
|
|
|
|
+ icon:'src/assets/images/ico_alarm_person.png',
|
|
|
|
|
+ bg:'#833dd9'
|
|
|
|
|
+ }
|
|
|
|
|
+})
|
|
|
|
|
+const alarm_list = ref([{
|
|
|
|
|
+ code:"none",
|
|
|
|
|
+ count:0
|
|
|
|
|
+},{
|
|
|
|
|
+ code:"smoke",
|
|
|
|
|
+ count:0
|
|
|
|
|
+},{
|
|
|
|
|
+ code:"fire",
|
|
|
|
|
+ count:0
|
|
|
|
|
+},{
|
|
|
|
|
+ code:"temp",
|
|
|
|
|
+ count:0
|
|
|
|
|
+},{
|
|
|
|
|
+ code:"person",
|
|
|
|
|
+ count:0
|
|
|
|
|
+}]);
|
|
|
|
|
+
|
|
|
|
|
+const houselist=ref([{
|
|
|
|
|
+ name:"自贡中心仓库",
|
|
|
|
|
+ code:"zg",
|
|
|
|
|
+ city:"510300",
|
|
|
|
|
+ addr:"自贡市沿滩区金川路东段28号高新仓储物流园一期",
|
|
|
|
|
+ lnglat:[0,0],
|
|
|
|
|
+ alarmtype:"none",
|
|
|
|
|
+},{
|
|
|
|
|
+ name:"成都中心仓库",
|
|
|
|
|
+ code:"cd",
|
|
|
|
|
+ city:"510100",
|
|
|
|
|
+ addr:"简阳市石桥镇羊羊小镇大华国际B1栋13楼1322号",
|
|
|
|
|
+ lnglat:[0,0],
|
|
|
|
|
+ alarmtype:"smoke",
|
|
|
|
|
+}]);
|
|
|
|
|
+
|
|
|
|
|
+const initHouseLoca=()=>{
|
|
|
|
|
+ for (let index = 0; index < houselist.value.length; index++) {
|
|
|
|
|
+ const element = houselist.value[index];
|
|
|
|
|
+ let geocoder = AMap.value.Geocoder({
|
|
|
|
|
+ city: "全国" // 城市范围,默认全国
|
|
|
|
|
+ });
|
|
|
|
|
+
|
|
|
|
|
+ let address = element.addr;
|
|
|
|
|
+ geocoder.getLocation(address, function(status, result) {
|
|
|
|
|
+ if (status === 'complete' && result.geocodes.length) {
|
|
|
|
|
+ var lng = result.geocodes[0].location.getLng();
|
|
|
|
|
+ var lat = result.geocodes[0].location.getLat();
|
|
|
|
|
+ console.log('地址解析结果的经纬度:', lng, lat);
|
|
|
|
|
+ } else {
|
|
|
|
|
+ console.error('地址解析失败');
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+const initWindow=()=>{
|
|
|
|
|
+// 信息窗体
|
|
|
|
|
+let infoWindow = new AMap.value.InfoWindow({
|
|
|
|
|
+offset: new AMap.value.Pixel(0,-10),
|
|
|
|
|
+retainwhenClose: true,
|
|
|
|
|
+});
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+const initMap = () => {
|
|
|
|
|
+ AMapLoader.load({
|
|
|
|
|
+ key: 'cf0ede1d8833ccb51fb6b084e23a7b5e', // 申请好的Web端开发者Key,首次调用 load 时必填
|
|
|
|
|
+ version: '2.0', // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
|
|
|
|
|
+ plugins: ['AMap.Scale', 'AMap.ToolBar','AMap.Geocoder'], // 需要使用的的插件列表,如比例尺'AMap.Scale'等
|
|
|
|
|
+ Loca:{
|
|
|
|
|
+ version:'2.0.0'
|
|
|
|
|
+ }
|
|
|
|
|
+ })
|
|
|
|
|
+ .then((res) => {
|
|
|
|
|
+ AMap.value = res
|
|
|
|
|
+ // 上来就显示的中心点 北京 116.397, 39.918
|
|
|
|
|
+ var lnglat = new res.LngLat(116.397, 39.918);
|
|
|
|
|
+ map.value = new res.Map('containerMap', {
|
|
|
|
|
+ //设置地图容器id
|
|
|
|
|
+ viewMode: '2D', //是否为3D地图模式
|
|
|
|
|
+ zoom: 15, //初始化地图级别
|
|
|
|
|
+ mapStyle:"amap://styles/dark",//深色模式
|
|
|
|
|
+ center: lnglat, //初始化地图中心点位置
|
|
|
|
|
+ })
|
|
|
|
|
+ map.value.clearMap() // 清除地图覆盖物
|
|
|
|
|
+ // 地图是否可拖拽和缩放
|
|
|
|
|
+ map.value.setStatus({
|
|
|
|
|
+ dragEnable: true, // 是否可拖拽
|
|
|
|
|
+ zoomEnable: true, // 是否可缩放
|
|
|
|
|
+ })
|
|
|
|
|
+ initHouseLoca();
|
|
|
|
|
+ initWindow()
|
|
|
|
|
+
|
|
|
|
|
+ })
|
|
|
|
|
+ .catch((e) => {
|
|
|
|
|
+ console.log('error', e)
|
|
|
|
|
+ })
|
|
|
|
|
+}
|
|
|
|
|
+onMounted(() => {
|
|
|
|
|
+ const userinfo = JSON.parse(sessionStorage.getItem("user")||'{}');
|
|
|
|
|
+ if (userinfo.userName!=null) {
|
|
|
|
|
+ let tmplst =[];
|
|
|
|
|
+ for (let index = 0; index < houselist.value.length; index++) {
|
|
|
|
|
+ const element = houselist.value[index];
|
|
|
|
|
+ if(userinfo.userName=='admin'|| element.code==userinfo.userName){
|
|
|
|
|
+ tmplst.push(element)
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ houselist.value = tmplst;
|
|
|
|
|
+ }
|
|
|
|
|
+ initMap()
|
|
|
|
|
+})
|
|
|
|
|
+</script>
|
|
|
|
|
+<style scoped>
|
|
|
|
|
+.custom-tooltip .el-tooltip__popper {
|
|
|
|
|
+ background-color: #484e58 !important; /* 修改为你的颜色 */
|
|
|
|
|
+}
|
|
|
|
|
+</style>
|
|
|
|
|
+<style lang='scss' scoped>
|
|
|
|
|
+.containerMap{
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: calc(100vh - 60px);
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+ .alarm_list{
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ z-index: 10;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ left: 75px;
|
|
|
|
|
+ top: 40px;
|
|
|
|
|
+ .alarm_list_item{
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+ margin: 0 5px;
|
|
|
|
|
+ padding: 6px 20px;
|
|
|
|
|
+ border-radius: 30px;
|
|
|
|
|
+ color: #fff;
|
|
|
|
|
+ background-color: #455b6d;
|
|
|
|
|
+ img{
|
|
|
|
|
+ width: 24px;
|
|
|
|
|
+ height: 24px;
|
|
|
|
|
+ vertical-align: middle;
|
|
|
|
|
+ }
|
|
|
|
|
+ .alarm_item_brager{
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ font-weight: bold;
|
|
|
|
|
+ width: 24px;
|
|
|
|
|
+ height: 24px;
|
|
|
|
|
+ border-radius: 50%;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ line-height: 24px;
|
|
|
|
|
+ top: -13px;
|
|
|
|
|
+ right: 0;
|
|
|
|
|
+ font-size: 12px;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ .houselist{
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ bottom: 20px;
|
|
|
|
|
+ left: 75px;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ z-index: 10;
|
|
|
|
|
+ color: #fff;
|
|
|
|
|
+ .item{
|
|
|
|
|
+ cursor: pointer;
|
|
|
|
|
+ border-radius: 3px;
|
|
|
|
|
+ margin: 3px;
|
|
|
|
|
+ padding:5px 5px;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ font-weight: bold;
|
|
|
|
|
+ .item:hover{
|
|
|
|
|
+ padding:20px 5px;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+</style>
|