<template>
|
<view class="content">
|
<view class="m-header">
|
<!-- LOGO -->
|
<view class="m-logo">
|
<view class="m-logo-img">
|
<u--image v-if="img_url" :src="img_url" width="6em" height="2em" mode="aspectFit"></u--image>
|
<view class="m-logo-text">{{ app_name }}</view>
|
</view>
|
</view>
|
<!-- 更多 -->
|
<view class="m-back m-back-1">
|
<u-icon class="m-icon" :name="!showMenus ? 'list' : 'arrow-down'" color="#fff" size="2em" @click="showMenusClick"></u-icon>
|
<transition>
|
<view v-show="showMenus" class="m-colls">
|
<view @click="formSys" class="m-coll-view">
|
<view v-show="listName == 'sys'" class="m-coll-view-1"></view>
|
系统
|
</view>
|
<view @click="listMap" class="m-coll-view">
|
<view v-show="listName == 'map'" class="m-coll-view-1"></view>
|
地图
|
</view>
|
<view @click="listJobHis" class="m-coll-view">
|
<view v-show="listName == 'jobHis'" class="m-coll-view-1"></view>
|
作业历史
|
</view>
|
<view @click="listAlarmHis" class="m-coll-view">
|
<view v-show="listName == 'alarmHis'" class="m-coll-view-1"></view>
|
告警历史
|
</view>
|
<view @click="listRail" class="m-coll-view">
|
<view v-show="listName == 'rail'" class="m-coll-view-1"></view>
|
围栏管理
|
</view>
|
<view @click="listBaseStation" class="m-coll-view">
|
<view v-show="listName == 'baseStation'" class="m-coll-view-1"></view>
|
基站管理
|
</view>
|
<view @click="listDepartment" class="m-coll-view">
|
<view v-show="listName == 'department'" class="m-coll-view-1"></view>
|
部门管理
|
</view>
|
<view @click="aboutUs" class="m-coll-view">
|
<view v-show="listName == 'aboutUs'" class="m-coll-view-1"></view>
|
关于我们
|
</view>
|
</view>
|
</transition>
|
<!-- 通用列表组件 -->
|
<list
|
v-if="listShow"
|
:isRefresh="isRefresh"
|
:titleList="titleList"
|
:listName="listName"
|
:colWidth="colWidth"
|
@allot="allot"
|
@closeList="closeList"
|
@add="add"
|
@update="update"
|
@refresh="refresh"
|
></list>
|
<!-- 绘制围栏表单组件 -->
|
<draw-form
|
v-if="drawFormShow"
|
@submitDrawForm="submitDrawForm"
|
@startDraw="startDraw"
|
@endDraw="endDrawFunction"
|
@cancelDrawForm="drawFormShow = false"
|
></draw-form>
|
<!-- 标签分配表单组件 -->
|
<tally-form
|
v-if="tallyFormShow"
|
:tallyFormData="tallyFormData"
|
:tallyType="tallyType"
|
@submitTallyForm="submitTallyForm"
|
@cancelTallyForm="tallyFormShow = false"
|
></tally-form>
|
<!-- 围栏管理表单组件 -->
|
<rail-form
|
v-if="railFormShow"
|
:railFormData="railFormData"
|
:railType="railType"
|
@submitRailForm="submitRailForm"
|
@cancelRailForm="railFormShow = false"
|
></rail-form>
|
<!-- 地图表单组件 -->
|
<map-form v-if="mapFormShow" :mapFormData="mapFormData" :mapType="mapType" @submitMapForm="submitMapForm" @cancelMapForm="mapFormShow = false"></map-form>
|
<!-- 系统表单组件 -->
|
<sys-form v-if="sysFormShow" @submitSysForm="submitSysForm" @cancelSysForm="sysFormShow = false"></sys-form>
|
<!-- 基站管理表单组件 -->
|
<base-form
|
v-if="baseFormShow"
|
:baseFormData="baseFormData"
|
:baseType="baseType"
|
@submitBaseForm="submitBaseForm"
|
@cancelBaseForm="baseFormShow = false"
|
></base-form>
|
<!-- 关于我们表单组件 -->
|
<about-us-form v-if="aboutUsShow" @submitAboutUsForm="submitAboutUsForm" @cancelAboutUsForm="aboutUsShow = false"></about-us-form>
|
<!-- 部门管理表单组件 -->
|
<department-form
|
v-if="departmentFormShow"
|
:departmentFormData="departmentFormData"
|
:departmentType="departmentType"
|
@submitDepartmentForm="submitDepartmentForm"
|
@cancelDepartmentForm="departmentFormShow = false"
|
></department-form>
|
<!-- 密码表单组件 -->
|
<password-form v-if="passwordFormShow" @submitPasswordForm="submitPasswordForm" @cancelPasswordForm="passwordFormShow = false"></password-form>
|
</view>
|
</view>
|
<view class="m-middle">
|
<view
|
v-if="mapShow"
|
id="allmap"
|
:tallyList="tallyList"
|
:change:tallyList="BMapView.updateEcharts"
|
:railList="railList"
|
:change:railList="BMapView.updateEcharts2"
|
:tally="tally"
|
:change:tally="BMapView.updateEcharts3"
|
:center="center"
|
:change:center="BMapView.updateEcharts4"
|
:window="window"
|
:change:window="BMapView.updateEcharts5"
|
:maxmin="maxmin"
|
:change:maxmin="BMapView.updateEcharts6"
|
:baseList="baseList"
|
:change:baseList="BMapView.updateEcharts7"
|
:mapInfo="mapInfo"
|
:change:mapInfo="BMapView.updateEcharts8"
|
class="map"
|
></view>
|
<!-- 绘制围栏、开始作业、标签分配 -->
|
<view class="m-index-buttons" v-show="endDraw">
|
<view class="m-index-btn m-index-btn_1" @click="drawFormShow = true">
|
<u--image src="/static/img/draw.png" width="2em" height="1.5em" mode="aspectFit"></u--image>
|
<view class="m-index-btn-text">绘制围栏</view>
|
</view>
|
<view
|
class="m-index-btn m-index-btn_2"
|
v-show="step == 'start' || step == 'notStart'"
|
:style="{ 'background-color': step == 'notStart' ? '#50DB68' : '#E4E406' }"
|
@touchstart="touchstart"
|
@touchend="touchend"
|
@click="startJob"
|
>
|
<u--image src="/static/img/pause-logo.png" v-if="step == 'start'" width="3.5em" height="2em" mode="aspectFit"></u--image>
|
<u--image src="/static/img/start-logo.png" v-if="step == 'notStart'" width="3.5em" height="2em" mode="aspectFit"></u--image>
|
<!-- <view class="m-index-btn-text">{{ step == 'start' ? '开始' : '未开始' }}</view> -->
|
</view>
|
<view
|
class="m-index-btn m-index-btn_3"
|
v-show="step == 'suspend'"
|
style="background-color: #50DB68;"
|
@touchstart="touchstart"
|
@touchend="touchend"
|
@click="suspendJob"
|
>
|
<u--image src="/static/img/start-logo.png" width="3.5em" height="2em" mode="aspectFit"></u--image>
|
<!-- <view class="m-index-btn-text">暂停</view> -->
|
</view>
|
<view class="m-index-btn m-index-btn_4" v-show="step == 'end'" style="background-color: #EB4452;" @click="step = 'notStart'">
|
<u--image src="/static/img/end-logo.png" width="3.5em" height="2em" mode="aspectFit"></u--image>
|
<!-- <view class="m-index-btn-text">结束</view> -->
|
</view>
|
<view class="m-index-btn m-index-btn_5" @click="listTally()">
|
<u--image src="/static/img/pen.png" width="2em" height="1.5em" mode="aspectFit"></u--image>
|
<view class="m-index-btn-text">标签分配</view>
|
</view>
|
</view>
|
</view>
|
<view class="m-footer">
|
<!-- 基站 -->
|
<view class="m-index-base">
|
<image :src="baseImg" v-if="baseImg != ''"></image>
|
<view class="m-index-baseNum" v-if="baseNum">{{ baseNum }}</view>
|
</view>
|
<view class="m-index-rail" @click="showRailMenus = !showRailMenus">
|
<u--image src="/static/img/rail-logo.png" width="2em" height="1.5em" mode="aspectFit"></u--image>
|
<view>围栏</view>
|
</view>
|
<transition name="rail">
|
<view v-show="showRailMenus" class="m-colls-2">
|
<view v-for="(item, index) in railList" :key="index" @click="showRail(item)" class="m-coll-view">
|
{{ item.name.length > 4 ? item.name.slice(0, 4) + '..' : item.name }}
|
</view>
|
</view>
|
</transition>
|
</view>
|
|
<!-- 围栏显示 -->
|
<!-- <view class="m-back-2">
|
<view class="m-back-view-show">围栏显示</view>
|
<view class="m-back-view" @click="showAll">
|
<u-collapse class="m-coll m-coll-2" :border="false">
|
<u-collapse-item :disabled="true" :isLink="false"><view slot="title" class="m-coll-text-title">全部显示</view></u-collapse-item>
|
</u-collapse>
|
</view>
|
<view class="m-back-view m-back-2-view" v-for="(item, index) in railList" :key="index" @click="showRail(item)">
|
<u-collapse :class="'m-coll m-coll-2-' + index" :border="false">
|
<u-collapse-item :disabled="true" :isLink="false">
|
<view slot="title" class="m-coll-text-title">{{ item.name.length > 4 ? item.name.slice(0, 4) + '..' : item.name }}</view>
|
</u-collapse-item>
|
</u-collapse>
|
</view>
|
</view> -->
|
</view>
|
</template>
|
|
<script>
|
import list from '@/components/list.vue';
|
import drawForm from '@/pages/index/components/drawForm.vue';
|
import tallyForm from '@/pages/index/components/tallyForm.vue';
|
import railForm from '@/pages/index/components/railForm.vue';
|
import mapForm from '@/pages/index/components/mapForm.vue';
|
import sysForm from '@/pages/index/components/sysForm.vue';
|
import baseForm from '@/pages/index/components/baseForm.vue';
|
import aboutUsForm from '@/pages/index/components/aboutUsForm.vue';
|
import departmentForm from '@/pages/index/components/departmentForm.vue';
|
import passwordForm from '@/pages/index/components/passwordForm.vue';
|
import { connChart, getPointsCenter, transition, getWiFiIP } from '@/common/utils.js';
|
import { formatDate, get_time_cha_s } from '@/common/tools.js';
|
import { gps2xybiandianzhan, inPoly } from '@/common/GnssToXY.js';
|
import { write_one_taghz } from '@/common/ControTag.js';
|
export default {
|
components: {
|
list,
|
drawForm,
|
tallyForm,
|
railForm,
|
mapForm,
|
sysForm,
|
baseForm,
|
aboutUsForm,
|
departmentForm,
|
passwordForm
|
},
|
data() {
|
return {
|
showMenus: false,
|
showRailMenus: false,
|
listShow: false,
|
drawFormShow: false,
|
tallyFormShow: false,
|
railFormShow: false,
|
mapFormShow: false,
|
sysFormShow: false,
|
baseFormShow: false,
|
departmentFormShow: false,
|
aboutUsShow: false,
|
passwordFormShow: false,
|
passwordFormText: '',
|
titleList: [],
|
colWidth: 2,
|
listName: null,
|
tallyType: null,
|
mapType: null,
|
baseType: null,
|
railType: null,
|
departmentType: null,
|
tallyFormData: {},
|
mapFormData: {},
|
baseFormData: {},
|
railFormData: {},
|
departmentFormData: {},
|
step: 'notStart',
|
isRefresh: false,
|
railList: [],
|
time: null,
|
tallyList: [], //标签位置列表
|
tally: [],
|
center: '',
|
maxmin: {},
|
date: null,
|
window: {},
|
baseList: [], //基站位置列表
|
baseImg: '/static/img/base_4.png',
|
countSOS: 0,
|
audioTime: null,
|
preSos: 0,
|
preSosHeight: 0,
|
sqlOptions: {
|
name: 'demo',
|
path: '_doc/demo.db'
|
},
|
labelModel: null,
|
ip: '', //192.168.1.15
|
port: '8233', //默认8233端口
|
localPort: '9527',
|
message: '你好啊',
|
listBytes: ['53', '53', '01', 'c0', '00', 'A9', '09', '10', '11', '12', '19', '20', 'ff', 'ff', '4E', '4E'],
|
endDraw: true,
|
railAllList: [],
|
tagid: '',
|
base_obj: {},
|
app_name: '',
|
img_url: '',
|
baseNum: null, //GNGGA报文记数，最大65535，之后从1开始重新记数
|
baseTime: 0, //基站状态时间记数，当超过60秒没有收到JZGGA数据变灰色离线
|
model: {
|
baoliu13: '1', //视图刷新速率
|
baoliu14: '5', //标签数量上限
|
baoliu15: '3', //围栏数量上限
|
real_trak_time: '30', //实时轨迹时长
|
udpAdress: '', //交互地址
|
baoliu20: '8233', //交互端口
|
gas_show: '1', //是否显示围栏
|
baoliu17: '1', //是否缩略显示信息
|
viewAnckid: '1', //是否显示基站
|
baoliu16: '1', //是否显示轨迹
|
yulan_map: '1', //百度地图切换
|
localhost: '7777', //本机端口号
|
show_password: '1' //是否输入密码
|
},
|
mapInfo: {
|
x_Truelength: '500',
|
y_Truewidth: '500'
|
}, //地图长宽信息
|
mapShow: true
|
};
|
},
|
watch: {
|
railList(newV, oldV) {
|
if (newV.length == 0) {
|
this.step = 'notStart';
|
}
|
},
|
showMenus(newV, oldV) {
|
if (!newV) {
|
this.listName = null;
|
}
|
},
|
baseNum(newV, oldV) {
|
if (newV >= 65535) {
|
this.baseNum = 1;
|
}
|
},
|
baseTime(newV, oldV) {
|
// console.log("监听基站信号时间：----------------------"+newV)
|
if (newV >= 10) {
|
// console.log("当前基站id号：----------------------"+this.base_obj.tagid)
|
var labelModel = connChart('base');
|
labelModel.update(`anchorid="${this.base_obj.tagid}"`, { anchormode: '0' }, (e, r) => {
|
// console.log(e,r)
|
this.anchorManagementa(true);
|
});
|
}
|
}
|
// step(newV, oldV){
|
// if(uni.getStorageSync('preSos') && this.step=='start'){
|
// this.audio()
|
// }
|
// }
|
},
|
onLoad() {
|
// var labelModel = connChart('base');
|
// labelModel.drop((err,results)=>{
|
// console.log(results);
|
// });
|
this.findidfence();
|
this.findidfenceAll();
|
this.setSysInfo();
|
this.getRealPositiona();
|
this.setLabelInfo();
|
this.insertMap();
|
this.audio();
|
uni.getSystemInfo({
|
success: res => {
|
this.window = {
|
windowWidth: res.windowWidth,
|
windowHeight: res.windowHeight
|
};
|
}
|
});
|
this.insertDepartment();
|
this.bindBroadcast();
|
setInterval(() => {
|
this.baseTime++;
|
}, 1000);
|
|
var info_ = uni.getStorageSync('about_info');
|
if (!info_) {
|
uni.setStorageSync('about_info', { app_name: '智能围栏', img_url: '' });
|
}
|
var info = uni.getStorageSync('about_info');
|
if (!info) return;
|
if (info.app_name) this.app_name = info.app_name;
|
if (info.img_url) this.img_url = info.img_url;
|
},
|
methods: {
|
/**
|
* 初始化标签蜂鸣状态
|
*/
|
setLabelInfo() {
|
let labelModel = connChart('label');
|
labelModel.update(
|
{
|
p_status: 0
|
},
|
(err, results) => {
|
// console.log(err, results);
|
}
|
);
|
},
|
/**
|
* 广播--发送字符串
|
*/
|
sendBroadMsg() {
|
this.$socket.sendBroadcast(this.message, this.ip, this.port, this.localPort); //目标端口'7777',本地端口'9527'
|
},
|
/**控制标签蜂鸣
|
* @param zhi 蜂鸣时间
|
* @param tagid 标签ID
|
* @param ip 发送的IP地址
|
* */
|
fengming_biandianzhan(zhi, tagid, baoliu2) {
|
if (baoliu2 == '') return;
|
let labelModel = connChart('label');
|
if (this.ip && this.port)
|
labelModel.find(`p_tagid="${tagid}"`, (e, r) => {
|
// console.log(e, r);
|
if (!e) {
|
var fengmingstate = baoliu2; //获取标签蜂鸣状态
|
// console.log('标签状态', fengmingstate, zhi);
|
if (zhi == 0) {
|
//如果值为0表示让标签停止蜂鸣
|
if (fengmingstate == 20) {
|
//如果标签处于蜂鸣状态则下发停止蜂鸣指令
|
var byt = write_one_taghz(zhi, tagid, 0x10);
|
// console.log(byt);
|
this.$socket.sendBytesBroadcast(JSON.stringify(byt), this.ip, this.port, '9527');
|
}
|
labelModel.update(
|
`p_tagid="${tagid}"`,
|
{
|
p_status: 0
|
},
|
(err, results) => {
|
// console.log(err, results);
|
}
|
);
|
} else {
|
// if (fengmingstate == 0) {
|
//如果标签没有处于蜂鸣状态则下发蜂鸣指令
|
var byt = write_one_taghz(zhi, tagid, 0x10);
|
// console.log(byt);
|
this.$socket.sendBytesBroadcast(JSON.stringify(byt), this.ip, this.port, '9527');
|
// }
|
labelModel.update(
|
`p_tagid="${tagid}"`,
|
{
|
p_status: 1
|
},
|
(err, results) => {
|
// console.log(err, results);
|
}
|
);
|
}
|
}
|
});
|
},
|
/**停止蜂鸣
|
* @param tagid 标签ID
|
* */
|
stop_fengming(tagid, baoliu2) {
|
this.fengming_biandianzhan(0, tagid, baoliu2); //控制标签蜂鸣
|
},
|
/**开始蜂鸣
|
* @param tagid 标签ID
|
* */
|
start_fengming(tagid, time, baoliu2) {
|
this.fengming_biandianzhan(time, tagid, baoliu2); //控制标签蜂鸣
|
},
|
/**间隔一段时间蜂鸣
|
* @param tagid 标签ID
|
* @param time 蜂鸣时长单位秒
|
* @param zanting_time 暂停时长单位秒
|
* */
|
fengming_duanxu(tagid, time, zanting_time, baoliu2) {
|
let labelModel = connChart('label');
|
labelModel.find(`p_tagid="${tagid}"`, (e, r) => {
|
// console.log(e, r);
|
if (!e) {
|
var tm = r[0].p_time; //标签上一次下发蜂鸣的时间
|
var a = get_time_cha_s(tm); //上次下发蜂鸣时间和现在时间差
|
if (a > zanting_time) {
|
//如果时间差大于暂停时间
|
this.fengming_biandianzhan(time, tagid, baoliu2); //控制标签蜂鸣
|
//设置标签下发蜂鸣的时间
|
labelModel.update(
|
`p_tagid="${tagid}"`,
|
{
|
p_time: formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss')
|
},
|
(err, results) => {
|
// console.log(err, results);
|
}
|
);
|
}
|
}
|
});
|
},
|
/**
|
* 出区域需要做的事情
|
* @param tagid 标签ID
|
* */
|
outfencedo(tagid, baoliu2) {
|
let labelModel = connChart('label');
|
labelModel.find(`p_tagid="${tagid}"`, (e, r) => {
|
// console.log(e, r);
|
if (!e) {
|
var tm = r[0].p_time; //标签上一次下发蜂鸣的时间
|
var a = get_time_cha_s(tm); //上次下发蜂鸣时间和现在时间差
|
if (a >= 2) {
|
//如果时间差大于暂停时间
|
this.start_fengming(tagid, 10, baoliu2); //控制标签蜂鸣
|
//设置标签下发蜂鸣的时间
|
labelModel.update(
|
`p_tagid="${tagid}"`,
|
{
|
p_time: formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss')
|
},
|
(err, results) => {
|
// console.log(err, results);
|
}
|
);
|
}
|
}
|
});
|
|
},
|
/**
|
* 超过高报警需要做的事情
|
* @param tagid 标签ID
|
*/
|
outgao(tagid, baoliu2) {
|
let labelModel = connChart('label');
|
labelModel.find(`p_tagid="${tagid}"`, (e, r) => {
|
// console.log(e, r);
|
if (!e) {
|
var tm = r[0].p_time; //标签上一次下发蜂鸣的时间
|
var a = get_time_cha_s(tm); //上次下发蜂鸣时间和现在时间差
|
if (a >= 2) {
|
//如果时间差大于暂停时间
|
this.start_fengming(tagid, 11, baoliu2); //控制标签蜂鸣
|
//设置标签下发蜂鸣的时间
|
labelModel.update(
|
`p_tagid="${tagid}"`,
|
{
|
p_time: formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss')
|
},
|
(err, results) => {
|
// console.log(err, results);
|
}
|
);
|
}
|
}
|
});
|
|
},
|
/**
|
* 广播--发送字节数组
|
*/
|
sendHexBroadMsg() {
|
this.$socket.sendBytesBroadcast(JSON.stringify(this.listBytes), this.ip, this.port, '9527'); //9527为本地固定端口，不可修改
|
},
|
/**
|
* 广播--开始监听端口广播
|
*/
|
bindBroadcast() {
|
this.$socket.bindBroadcast('7777');
|
this.$socket.recBroadcastStatus = status => {
|
//服务器返回状态
|
// console.log(status);
|
if (status == '0') {
|
//UDP连接成功
|
// console.log('UDP开启广播接收');
|
} else if (status == '1') {
|
//UDP断开连接
|
// console.log('UDP关闭广播接收');
|
}
|
};
|
this.$socket.recBroadcastMsgCallBack = (receivedMsg, receivedAddress) => {
|
//服务器返回广播字符串
|
//基站数据说明： http://www.bdsmall.cn/newsitem/278407380
|
// console.log('服务端地址：',receivedAddress)
|
this.ip = receivedAddress;
|
var sysModel = connChart('sys');
|
sysModel.update({ udpAdress: this.ip }, (e, r) => {
|
// console.log(e, r);
|
});
|
var dataList = receivedMsg.split('$'); //接收基站每秒发送的数据，将多条分成单条存于数组中
|
dataList.forEach(e => {
|
var data = e.split(',');
|
// console.log(data)
|
var obj = {
|
GNGGA: data[0],
|
utc_time: data[1],
|
posx: transition(data[2], 0).lng,
|
NS: data[3],
|
posy: transition(0, data[4]).lat,
|
EW: data[5],
|
state: data[6],
|
num: data[7],
|
hdop: data[8],
|
haiba_gao: data[9],
|
gao_danwei: data[10],
|
tuoqiu: data[11],
|
chafen_time: data[12],
|
chafen_id: data[13],
|
jiaoyan: data[14],
|
tagid: data[15],
|
power: parseInt(data[16], 16), //将16进制的电量转为10进制
|
signalIntensity: data[17],
|
baoliu1: data[18],
|
baoliu2: data[19], //parseInt(data[19],16).toString(2).charAt(2)
|
baoliu3: data[20],
|
bumen: '',
|
gaocheng: data[9],
|
fence: '',
|
fence_name: '',
|
baoliu18: data[6],
|
name: '',
|
jingdu: transition(data[2], 0).lng,
|
weidu: transition(0, data[4]).lat,
|
statusName: '初始化',
|
addTime: new Date().getTime(),
|
xiuzhenggao: data[9]
|
};
|
// console.log(obj)
|
if (obj.GNGGA == 'GNGGA') {
|
this.baseTime = 0;
|
this.baseNum++;
|
if (this.base_obj.tagid && obj.tagid && this.base_obj.tagid != obj.tagid) {
|
//标签数据
|
var xy = gps2xybiandianzhan(this.base_obj.posx, this.base_obj.posy, obj.posx, obj.posy);
|
obj.posx = xy[0];
|
obj.posy = xy[1];
|
// console.log(xy);
|
let labelModel = connChart('label');
|
labelModel.find(`p_tagid="${obj.tagid}"`, (e, r) => {
|
// console.log(e, r);
|
if (!e) {
|
obj.bumen = r[0].p_department;
|
// obj.gaocheng=r[0].baoliu4
|
obj.name = r[0].p_name;
|
obj.fence_name = r[0].baoliu12;
|
}
|
if (this.endDraw == false || this.step == 'start') {//绘制围栏中或者开始作业中
|
if (obj.state == 0) {
|
obj.statusName = '初始化';
|
} else if (obj.state == 1) {
|
obj.statusName = '单点定位';
|
} else if (obj.state == 2) {
|
obj.statusName = '码差分';
|
} else if (obj.state == 3) {
|
obj.statusName = '无效PPS';
|
} else if (obj.state == 4) {
|
obj.statusName = '固定解';
|
} else if (obj.state == 5) {
|
obj.statusName = '浮点解';
|
} else if (obj.state == 6) {
|
obj.statusName = '正在估算';
|
} else if (obj.state == 7) {
|
obj.statusName = '人工输入固定值';
|
} else if (obj.state == 8) {
|
obj.statusName = '模拟模式';
|
} else if (obj.state == 9) {
|
obj.statusName = 'WAAS差分';
|
}
|
}
|
if (this.step == 'suspend') {
|
obj.statusName = '暂停作业';
|
}
|
if (this.step == 'end') {
|
obj.statusName = '结束作业';
|
}
|
if (this.step == 'start') {
|
//开始作业状态
|
if (obj.state == '4') {
|
//标签为高精度
|
if (obj.fence_name) {
|
//标签绑定了围栏
|
if (
|
this.railAllList.filter(e => {
|
return e.name == obj.fence_name && e.baoliu7 == 1;
|
}).length > 0
|
) {
|
//当围栏开启时
|
let base = connChart('base');
|
base.find(`anchorid="${this.base_obj.tagid}"`, (e, r) => {
|
// console.log(e, r);
|
if (!e && r) {
|
//当基站存在时
|
var xdg = (parseFloat(obj.haiba_gao) - parseFloat(this.base_obj.haiba_gao) + parseFloat(r[0].updateGao || 0)).toFixed(6); //标签相对高度
|
var railgao = parseFloat(
|
this.railAllList.filter(e => {
|
return e.name == obj.fence_name && e.baoliu7 == 1;
|
})[0].baoliu1
|
); //围栏高度
|
var point = { x: obj.jingdu, y: obj.weidu }; //标签当前点坐标
|
var pts = JSON.parse(
|
this.railAllList.filter(e => {
|
return e.name == obj.fence_name && e.baoliu7 == 1;
|
})[0].pts
|
); //围栏坐标-经纬度
|
var alarm_obj = {
|
baoliu1: obj.jingdu + ',' + obj.weidu, //坐标
|
baoliu2: obj.fence_name, //围栏名称
|
baoliu3: obj.bumen, //关联部门
|
objectid: obj.tagid, //关联标签
|
status: null, //状态
|
time: formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss'), //告警时间
|
type: '' //告警原因
|
};
|
if (xdg > railgao) {
|
//标签相对高度大于围栏高度
|
// console.log('标签相对高度大于围栏高度');
|
obj.fence = 1;
|
alarm_obj.type = '标签超高';
|
this.outgao(obj.tagid, obj.baoliu2); //超高告警需要调用的处理方法
|
let alarm = connChart('alarm');
|
alarm.insert(alarm_obj, (err, results) => {
|
// console.log(err);
|
// console.log(results);
|
if (!err) console.log('增加成功');
|
});
|
} else if (!inPoly(point, pts)) {
|
//标签坐标不在围栏区域内
|
// console.log('不在范围内');
|
obj.fence = 2;
|
alarm_obj.type = '标签出区域';
|
this.outfencedo(obj.tagid, obj.baoliu2); //出围栏告警需要调用的处理方法
|
let alarm = connChart('alarm');
|
alarm.insert(alarm_obj, (err, results) => {
|
// console.log(err);
|
// console.log(results);
|
if (!err) console.log('增加成功');
|
});
|
} else {
|
//标签坐标在区域内
|
// console.log('标签在区域内');
|
this.stop_fengming(obj.tagid, obj.baoliu2); //停止蜂鸣
|
}
|
}
|
});
|
}
|
} else {
|
//标签没有绑定部门
|
}
|
} else {
|
//不是高精度，设置蜂鸣
|
this.fengming_duanxu(obj.tagid, 2, 5, obj.baoliu2); //断续蜂鸣
|
}
|
}
|
|
if (this.tagid == obj.tagid) {
|
//选择某个标签绘制围栏时
|
var str = obj.posx + ',' + obj.posy;
|
var jwd = {
|
x: obj.jingdu,
|
y: obj.weidu
|
};
|
// console.log(jwd);
|
this.$store.commit('updateTallyRailPositon', { xy: str, jwd: jwd, yuandian_jingdu: this.base_obj.posx, yuandian_weidu: this.base_obj.posy });
|
}
|
obj.xiuzhenggao = (parseFloat(this.base_obj.haiba_gao) - parseFloat(obj.haiba_gao)).toFixed(2); //基站修正高
|
let base = connChart('base');
|
base.find(`anchorid="${this.base_obj.tagid}"`, (e, r) => {
|
// console.log(e, r);
|
if (!e && r.length > 0) {
|
//当基站存在时
|
var xdg = (parseFloat(obj.haiba_gao) - parseFloat(this.base_obj.haiba_gao) + parseFloat(r[0].updateGao || 0)).toFixed(2); //标签相对高度
|
// console.log(parseFloat(obj.haiba_gao),parseFloat(this.base_obj.haiba_gao),parseFloat(r[0].updateGao || 0),xdg)
|
obj.gaocheng = xdg;
|
labelModel.update(
|
`p_tagid="${obj.tagid}"`,
|
{
|
baoliu4: xdg
|
},
|
(e, r) => {
|
// console.log(e,r)
|
}
|
);
|
} else {
|
obj.statusName = '无基准站';
|
}
|
this.$store.commit('updateTallyPostion', obj);
|
});
|
|
});
|
} else if (this.base_obj.tagid && obj.tagid && this.base_obj.tagid == obj.tagid) {
|
//基站数据
|
var xy = gps2xybiandianzhan(this.base_obj.posx, this.base_obj.posy, obj.posx, obj.posy);
|
var labelModel = connChart('base');
|
//JZGGA坐标和GNGGA坐标距离大于5米变成黄色显示基站异常
|
if (Math.abs(xy[0]) > 5 || Math.abs(xy[1]) > 5) {
|
labelModel.update(`anchorid="${obj.tagid}"`, { anchormode: '2' }, (e, r) => {
|
// console.log(e,r)
|
this.anchorManagementa();
|
});
|
} else {
|
if (this.baseTime <= 10) {
|
labelModel.update(`anchorid="${obj.tagid}"`, { anchormode: '1' }, (e, r) => {
|
// console.log(e,r)
|
this.anchorManagementa();
|
});
|
}
|
}
|
labelModel.update(
|
`anchorid="${obj.tagid}"`,
|
{
|
POSX: obj.jingdu,
|
POSY: obj.weidu,
|
POSZ: obj.gaocheng,
|
jingdu: xy[0],
|
weidu: xy[1]
|
},
|
(e, r) => {
|
// console.log(e,r)
|
}
|
);
|
}
|
} else if (obj.GNGGA == 'JZGGA') {
|
//基站原点数据，此数据过程中不改动
|
this.base_obj = obj;
|
this.baseTime = 0;
|
this.anchorManagementa();
|
}
|
});
|
};
|
this.$socket.recBroadcastHexMsgCallBack = function(receivedHexMsg, receivedAddress) {
|
//硬件服务器返回广播16进制数据
|
// console.log(receivedHexMsg, receivedAddress);
|
let msg = receivedHexMsg;
|
let sum = msg.length / 2;
|
let arr = [];
|
for (let k = 0; k < sum; k++) {
|
let i = msg.substring(k * 2, k * 2 + 2);
|
arr.push(i);
|
}
|
// console.log(arr);
|
};
|
},
|
/**
|
* 广播--关闭广播监听
|
*/
|
closeBroadcast() {
|
this.$socket.closeBroadcast();
|
},
|
touchstart() {
|
// console.log('长按中');
|
if (this.step == 'notStart') {
|
return;
|
}
|
if (this.railList.length == 0) {
|
uni.$u.toast('当前无围栏，无法进行作业');
|
return;
|
}
|
//五秒倒计时
|
var datatime = 5;
|
this.date = setInterval(() => {
|
uni.$u.toast('倒计时' + datatime + '秒');
|
datatime = datatime - 1;
|
}, 1000);
|
|
//五秒后按钮变成结束
|
this.time = setTimeout(() => {
|
// console.log('五秒结束');
|
clearInterval(this.date);
|
this.step = 'end';
|
this.endJob();
|
}, 5000);
|
},
|
startDraw(e) {
|
this.endDraw = false;
|
this.tagid = e.tagid;
|
},
|
endDrawFunction() {
|
this.endDraw = true;
|
this.tagid = '';
|
},
|
touchend() {
|
// console.log('长按结束');
|
clearTimeout(this.time);
|
clearInterval(this.date);
|
},
|
open(e) {},
|
close(e) {},
|
change(e) {},
|
//显示所有围栏
|
showAll() {
|
this.center = '0,0';
|
},
|
//显示其中一个围栏
|
showRail(item) {
|
this.center = item.centerpoint;
|
this.maxmin = {
|
max: item.max,
|
min: item.min
|
};
|
},
|
showMenusClick() {
|
this.showMenus = !this.showMenus;
|
if (!this.showMenus) {
|
this.sysFormShow = false;
|
this.aboutUsShow = false;
|
this.closeList();
|
} else {
|
if (this.model.show_password) {
|
this.passwordFormShow = true;
|
this.passwordFormText = 'showMenusClick';
|
this.showMenus = !this.showMenus;
|
return;
|
}
|
this.formSys();
|
}
|
},
|
//系统表单
|
formSys() {
|
this.listShow = false;
|
this.aboutUsShow = false;
|
this.sysFormShow = true;
|
this.listName = 'sys';
|
},
|
//关于我们
|
aboutUs() {
|
this.listShow = false;
|
this.sysFormShow = false;
|
this.aboutUsShow = true;
|
this.listName = 'aboutUs';
|
},
|
//作业历史列表
|
listJobHis() {
|
this.sysFormShow = false;
|
this.listShow = false;
|
this.aboutUsShow = false;
|
setTimeout(() => {
|
this.listShow = true;
|
this.listName = 'jobHis';
|
this.titleList = [
|
{ title: '操作', value: 'type' },
|
{ title: '围栏', value: 'fencename' },
|
{ title: '部门', value: 'department' },
|
{ title: '标签', value: 'tagid' },
|
{ title: '围栏高', value: 'high' },
|
{ title: '围栏绘制时间', value: 'fenceaddtime' },
|
{ title: '记录时间', value: 'addtime' },
|
{ title: '备注', value: 'beizhu' }
|
];
|
this.colWidth = 1.5;
|
}, 50);
|
},
|
//告警历史列表
|
listAlarmHis() {
|
this.sysFormShow = false;
|
this.listShow = false;
|
this.aboutUsShow = false;
|
setTimeout(() => {
|
this.listShow = true;
|
this.listName = 'alarmHis';
|
this.titleList = [
|
{ title: '序号', value: 'id' },
|
{ title: '围栏', value: 'baoliu2' },
|
{ title: '部门', value: 'baoliu3' },
|
{ title: '标签', value: 'objectid' },
|
{ title: '时间', value: 'time' },
|
{ title: '原因', value: 'type' },
|
{ title: '坐标', value: 'baoliu1' }
|
];
|
this.colWidth = 1.7;
|
}, 50);
|
},
|
//围栏管理列表
|
listRail() {
|
this.sysFormShow = false;
|
this.listShow = false;
|
this.aboutUsShow = false;
|
setTimeout(() => {
|
this.listShow = true;
|
this.listName = 'rail';
|
this.titleList = [
|
{ title: '围栏名称', value: 'name' },
|
{ title: '关联部门', value: 'bumen' },
|
{ title: '告警高度', value: 'baoliu1' },
|
{ title: '绘制时间', value: 'addtime' },
|
{ title: '启用围栏', value: 'baoliu7' }
|
];
|
this.colWidth = 2.3;
|
}, 50);
|
},
|
//标签分配列表
|
listTally() {
|
if (this.model.show_password) {
|
this.passwordFormShow = true;
|
this.passwordFormText = 'listTally';
|
return;
|
}
|
this.sysFormShow = false;
|
this.listShow = false;
|
this.aboutUsShow = false;
|
this.showMenus = true;
|
setTimeout(() => {
|
this.listShow = true;
|
this.listName = 'tally';
|
this.titleList = [
|
{ title: '序号', value: 'id' },
|
{ title: '标签ID', value: 'p_tagid' },
|
{ title: '名称', value: 'p_name' },
|
{ title: '绑定围栏', value: 'baoliu12' },
|
{ title: '高度/m', value: 'baoliu4' },
|
{ title: '部门', value: 'p_department' }
|
];
|
this.colWidth = 1.9;
|
}, 50);
|
},
|
//地图列表
|
listMap() {
|
this.sysFormShow = false;
|
this.listShow = false;
|
this.aboutUsShow = false;
|
setTimeout(() => {
|
this.listShow = true;
|
this.listName = 'map';
|
this.titleList = [
|
{ title: '序号', value: 'id' },
|
{ title: '图层', value: 'floor' },
|
{ title: '名称', value: 'mapname' },
|
{ title: 'X实长', value: 'x_Truelength' },
|
{ title: 'Y实长', value: 'y_Truewidth' },
|
{ title: 'X0', value: 'x0_length' },
|
{ title: 'Y0', value: 'y0_width' },
|
{ title: 'X像素', value: 'x_Pixel' },
|
{ title: 'Y像素', value: 'y_Pixel' },
|
{ title: '时间', value: 'addTime' }
|
];
|
this.colWidth = 1.2;
|
}, 50);
|
},
|
//基站管理列表
|
listBaseStation() {
|
this.sysFormShow = false;
|
this.listShow = false;
|
this.aboutUsShow = false;
|
setTimeout(() => {
|
this.listShow = true;
|
this.listName = 'baseStation';
|
this.titleList = [
|
{ title: '基站ID', value: 'anchorid' },
|
{ title: '经度', value: 'POSX' },
|
{ title: '纬度', value: 'POSY' },
|
{ title: '高度/米', value: 'POSZ' },
|
{ title: '修正高/米', value: 'updateGao' }
|
];
|
this.colWidth = 2.3;
|
}, 50);
|
},
|
//部门管理列表
|
listDepartment() {
|
this.sysFormShow = false;
|
this.listShow = false;
|
this.aboutUsShow = false;
|
setTimeout(() => {
|
this.listShow = true;
|
this.listName = 'department';
|
this.titleList = [
|
{ title: '部门序号', value: 'id' },
|
{ title: '部门ID', value: 'department_id' },
|
{ title: '部门名称', value: 'department_name' },
|
{ title: '创建时间', value: 'addTime' }
|
];
|
this.colWidth = 2.8;
|
}, 50);
|
},
|
closeList() {
|
this.listShow = false;
|
this.listName = null;
|
},
|
add(e) {
|
if (this.listName == 'rail') {
|
this.railFormShow = true;
|
this.railType = 'add';
|
this.railFormData = e.formData;
|
} else if (this.listName == 'tally') {
|
this.tallyFormShow = true;
|
this.tallyType = 'add';
|
this.tallyFormData = e.formData;
|
} else if (this.listName == 'map') {
|
this.mapFormShow = true;
|
this.mapType = 'add';
|
this.mapFormData = e.formData;
|
} else if (this.listName == 'baseStation') {
|
this.baseFormShow = true;
|
this.baseType = 'add';
|
this.baseFormData = e.formData;
|
} else if (this.listName == 'department') {
|
this.departmentFormShow = true;
|
this.departmentType = 'add';
|
this.departmentFormData = e.formData;
|
}
|
},
|
update(e) {
|
if (this.listName == 'rail') {
|
this.railFormShow = true;
|
this.railType = 'update';
|
this.railFormData = e.formData;
|
} else if (this.listName == 'tally') {
|
this.tallyFormShow = true;
|
this.tallyType = 'update';
|
this.tallyFormData = e.formData;
|
} else if (this.listName == 'map') {
|
this.mapFormShow = true;
|
this.mapType = 'update';
|
this.mapFormData = e.formData;
|
} else if (this.listName == 'baseStation') {
|
this.baseFormShow = true;
|
this.baseType = 'update';
|
this.baseFormData = e.formData;
|
} else if (this.listName == 'department') {
|
this.departmentFormShow = true;
|
this.departmentType = 'update';
|
this.departmentFormData = e.formData;
|
}
|
},
|
allot(e) {
|
this.tallyFormShow = true;
|
this.tallyType = e.type;
|
this.tallyFormData = e.formData;
|
},
|
submitTallyForm() {
|
this.tallyFormShow = false;
|
this.isRefresh = true;
|
},
|
submitRailForm() {
|
this.railFormShow = false;
|
this.isRefresh = true;
|
},
|
submitMapForm() {
|
this.mapFormShow = false;
|
this.isRefresh = true;
|
this.insertMap();
|
},
|
submitSysForm() {
|
this.sysFormShow = false;
|
this.isRefresh = true;
|
this.showMenus = false;
|
this.setSysInfo();
|
this.closeBroadcast();
|
|
setTimeout(() => {
|
this.bindBroadcast();
|
}, 500);
|
},
|
submitAboutUsForm() {
|
this.aboutUsShow = false;
|
this.isRefresh = true;
|
this.showMenus = false;
|
var info = uni.getStorageSync('about_info');
|
if (!info) {
|
this.app_name = '智能围栏';
|
return;
|
}
|
if (info.app_name) this.app_name = info.app_name;
|
if (info.img_url) this.img_url = info.img_url;
|
},
|
submitBaseForm() {
|
console.log(this.isRefresh)
|
this.baseFormShow = false;
|
this.isRefresh = true;
|
console.log(this.isRefresh)
|
},
|
submitDrawForm() {
|
this.drawFormShow = false;
|
this.isRefresh = true;
|
this.listTally();
|
},
|
submitDepartmentForm() {
|
this.departmentFormShow = false;
|
this.isRefresh = true;
|
},
|
submitPasswordForm() {
|
this.passwordFormShow = false;
|
if (this.passwordFormText == 'listTally') {
|
this.sysFormShow = false;
|
this.listShow = false;
|
this.aboutUsShow = false;
|
this.showMenus = true;
|
setTimeout(() => {
|
this.listShow = true;
|
this.listName = 'tally';
|
this.titleList = [
|
{ title: '序号', value: 'id' },
|
{ title: '标签ID', value: 'p_tagid' },
|
{ title: '名称', value: 'p_name' },
|
{ title: '绑定围栏', value: 'baoliu12' },
|
{ title: '高度/m', value: 'baoliu4' },
|
{ title: '部门', value: 'p_department' }
|
];
|
this.colWidth = 1.9;
|
}, 50);
|
} else if (this.passwordFormText == 'showMenusClick') {
|
this.showMenus = !this.showMenus;
|
if (!this.showMenus) {
|
this.sysFormShow = false;
|
this.aboutUsShow = false;
|
this.closeList();
|
} else {
|
this.formSys();
|
}
|
}
|
this.passwordFormText = '';
|
},
|
//列表刷新
|
refresh(e) {
|
this.isRefresh = e.isRefresh;
|
},
|
//开始作业
|
startJob() {
|
if (this.railList.length == 0) {
|
uni.$u.toast('当前无围栏，无法进行作业');
|
return;
|
}
|
if (this.step == 'notStart' || this.step == 'suspend') {
|
var fence = connChart('fence');
|
fence.find('baoliu7="1"', (e, r) => {
|
// console.log(e,r)
|
var railAllList = [];
|
railAllList = r;
|
let label = connChart('label');
|
label.find('baoliu12!=""', (e, r) => {
|
// console.log(e, r);
|
var work = connChart('work');
|
var arr = [];
|
railAllList.forEach(e => {
|
r.forEach(item => {
|
if (e.name == item.baoliu12) {
|
arr.push({
|
addtime: formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss'),
|
beizhu: '', //备注
|
department: e.bumen, //绑定部门
|
fenceaddtime: e.addtime, //围栏添加时间
|
fencename: e.name, //围栏名称
|
high: e.baoliu1, //围栏高度
|
tagid: item.p_tagid, //绑定标签ID
|
type: '开始作业' //操作步骤
|
});
|
}
|
});
|
});
|
railAllList.forEach(e => {
|
if (
|
arr.filter(item => {
|
return e.name == item.fencename;
|
}).length == 0
|
) {
|
arr.push({
|
addtime: formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss'),
|
beizhu: '', //备注
|
department: e.bumen, //绑定部门
|
fenceaddtime: e.addtime, //围栏添加时间
|
fencename: e.name, //围栏名称
|
high: e.baoliu1, //围栏高度
|
tagid: '', //绑定标签ID
|
type: '开始作业' //操作步骤
|
});
|
}
|
});
|
// console.log(arr);
|
arr.forEach((item, index) => {
|
work.insert(item, (err, results) => {
|
// console.log(err, results);
|
if (arr.length - 1 == index) {
|
this.step = 'start';
|
this.workAudio();
|
}
|
});
|
});
|
});
|
});
|
} else if (this.step == 'start') {
|
this.suspendJob();
|
}
|
},
|
//暂停作业
|
suspendJob() {
|
if (this.step == 'start') {
|
var fence = connChart('fence');
|
fence.find('baoliu7="1"', (e, r) => {
|
// console.log(e,r)
|
var railAllList = [];
|
railAllList = r;
|
let label = connChart('label');
|
label.find('baoliu12!=""', (e, r) => {
|
// console.log(e, r);
|
var work = connChart('work');
|
var arr = [];
|
railAllList.forEach(e => {
|
r.forEach(item => {
|
if (e.name == item.baoliu12) {
|
arr.push({
|
addtime: formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss'),
|
beizhu: '', //备注
|
department: e.bumen, //绑定部门
|
fenceaddtime: e.addtime, //围栏添加时间
|
fencename: e.name, //围栏名称
|
high: e.baoliu1, //围栏高度
|
tagid: item.p_tagid, //绑定标签ID
|
type: '暂停作业' //操作步骤
|
});
|
}
|
});
|
});
|
railAllList.forEach(e => {
|
if (
|
arr.filter(item => {
|
return e.name == item.fencename;
|
}).length == 0
|
) {
|
arr.push({
|
addtime: formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss'),
|
beizhu: '', //备注
|
department: e.bumen, //绑定部门
|
fenceaddtime: e.addtime, //围栏添加时间
|
fencename: e.name, //围栏名称
|
high: e.baoliu1, //围栏高度
|
tagid: '', //绑定标签ID
|
type: '暂停作业' //操作步骤
|
});
|
}
|
});
|
// console.log(arr);
|
arr.forEach((item, index) => {
|
work.insert(item, (err, results) => {
|
// console.log(err, results);
|
if (arr.length - 1 == index) {
|
this.step = 'suspend';
|
this.workAudio();
|
}
|
});
|
});
|
});
|
});
|
} else if (this.step == 'suspend') {
|
this.startJob();
|
}
|
},
|
//结束作业
|
endJob() {
|
var fence = connChart('fence');
|
fence.find('baoliu7="1"', (e, r) => {
|
// console.log(e,r)
|
var railAllList = [];
|
railAllList = r;
|
let label = connChart('label');
|
label.find('baoliu12!=""', (e, r) => {
|
// console.log(e, r);
|
var work = connChart('work');
|
var arr = [];
|
railAllList.forEach(e => {
|
r.forEach(item => {
|
if (e.name == item.baoliu12) {
|
arr.push({
|
addtime: formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss'),
|
beizhu: '', //备注
|
department: e.bumen, //绑定部门
|
fenceaddtime: e.addtime, //围栏添加时间
|
fencename: e.name, //围栏名称
|
high: e.baoliu1, //围栏高度
|
tagid: item.p_tagid, //绑定标签ID
|
type: '结束作业' //操作步骤
|
});
|
}
|
});
|
});
|
railAllList.forEach(e => {
|
if (
|
arr.filter(item => {
|
return e.name == item.fencename;
|
}).length == 0
|
) {
|
arr.push({
|
addtime: formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss'),
|
beizhu: '', //备注
|
department: e.bumen, //绑定部门
|
fenceaddtime: e.addtime, //围栏添加时间
|
fencename: e.name, //围栏名称
|
high: e.baoliu1, //围栏高度
|
tagid: '', //绑定标签ID
|
type: '结束作业' //操作步骤
|
});
|
}
|
});
|
// console.log(arr);
|
arr.forEach((item, index) => {
|
work.insert(item, (err, results) => {
|
// console.log(err, results);
|
if (arr.length - 1 == index) {
|
this.workAudio();
|
}
|
});
|
});
|
});
|
});
|
},
|
//开始、暂停、结束作业语音
|
workAudio() {
|
let _this = this;
|
let src = '';
|
if (this.step == 'start') {
|
src = '/static/voice/startWork.wav';
|
} else if (this.step == 'suspend') {
|
src = '/static/voice/suspendWork.wav';
|
} else if (this.step == 'end') {
|
src = '/static/voice/endWork.wav';
|
}
|
|
//实例化声音
|
const Audio = uni.createInnerAudioContext();
|
Audio.autoplay = true;
|
Audio.src = src; //音频地址
|
Audio.play(); //执行播放
|
Audio.onError(res => {
|
// console.log(res.errMsg);
|
// console.log(res.errCode);
|
});
|
Audio.onEnded(function() {
|
Audio.destroy();
|
});
|
},
|
//显示5个围栏按钮
|
findidfence() {
|
var labelModel = connChart('fence');
|
// await labelModel.drop((err,results)=>{
|
// console.log(results);
|
// });
|
labelModel.limit({ where: 'baoliu7="1" order by id desc', number: 1, count: 5 }, (e, r) => {
|
// console.log(e, r);
|
var sys = this.$store.state.sys;
|
if (!sys.gas_show) {
|
this.railList = [];
|
} else {
|
this.railList = [];
|
r.forEach((item, index) => {
|
r[index].zuobiao = JSON.parse(item.zuobiao);
|
});
|
this.railList = r;
|
}
|
// console.log(r)
|
setTimeout(() => {
|
this.findidfence();
|
}, 1000);
|
});
|
},
|
//显示全部围栏按钮
|
findidfenceAll() {
|
var labelModel = connChart('fence');
|
labelModel.find('baoliu7="1" order by id desc', (e, r) => {
|
// console.log(e,r)
|
this.railAllList = [];
|
this.railAllList = r;
|
setTimeout(() => {
|
this.findidfenceAll();
|
}, 1000);
|
});
|
},
|
//室内位置查询
|
getRealPositiona() {
|
// var labelModel = connChart('label');
|
// labelModel.drop((err,results)=>{
|
// console.log(results);
|
// });
|
this.tallyList = this.$store.state.tallyPostion;
|
// console.log(this.$store.state.tallyPostion)
|
//测试代码
|
// this.tallyList[0].fence=2
|
this.$store.commit('updateTally', this.tallyList);
|
|
this.tally = this.$store.state.tally;
|
// console.log(this.tally)
|
if (this.tallyList) {
|
var list = this.tallyList.filter(e => {
|
return e.fence == 2;
|
});
|
var list_height = this.tallyList.filter(e => {
|
return e.fence == 1;
|
});
|
} else {
|
var list = [];
|
var list_height = [];
|
}
|
if (list) {
|
var listLength = list.length;
|
} else {
|
var listLength = 0;
|
}
|
if (list_height) {
|
var listHeightLength = list_height.length;
|
} else {
|
var listHeightLength = 0;
|
}
|
uni.setStorageSync('preSos', listLength);
|
uni.setStorageSync('preSosHeight', listHeightLength);
|
setTimeout(() => {
|
this.getRealPositiona();
|
}, 1000);
|
},
|
//告警语音
|
audio() {
|
if (uni.getStorageSync('preSos') && this.step == 'start') {
|
//超出围栏范围告警语音
|
let _this = this;
|
// let src = '/static/voice/outwarning1.wav';
|
let src = '/static/voice/outwarn.m4a';
|
//实例化声音
|
const Audio = uni.createInnerAudioContext();
|
Audio.autoplay = true;
|
Audio.src = src; //音频地址
|
Audio.play(); //执行播放
|
Audio.onError(res => {
|
// console.log(res.errMsg);
|
// console.log(res.errCode);
|
});
|
Audio.onPause(res => {
|
setTimeout(() => {
|
this.audio();
|
}, 1000);
|
Audio.destroy();
|
});
|
Audio.onEnded(function() {
|
setTimeout(() => {
|
//5秒播放一次
|
_this.audio();
|
}, 5000);
|
Audio.destroy();
|
});
|
} else if (uni.getStorageSync('preSosHeight') && this.step == 'start') {
|
//超出围栏高度告警语音
|
let _this = this;
|
let src = '/static/voice/outheightwarn.m4a';
|
//实例化声音
|
const Audio = uni.createInnerAudioContext();
|
Audio.autoplay = true;
|
Audio.src = src; //音频地址
|
Audio.play(); //执行播放
|
Audio.onError(res => {
|
// console.log(res.errMsg);
|
// console.log(res.errCode);
|
});
|
Audio.onPause(res => {
|
setTimeout(() => {
|
this.audio();
|
}, 1000);
|
Audio.destroy();
|
});
|
Audio.onEnded(function() {
|
setTimeout(() => {
|
//5秒播放一次
|
_this.audio();
|
}, 5000);
|
Audio.destroy();
|
});
|
} else {
|
setTimeout(() => {
|
this.audio();
|
}, 1000);
|
}
|
},
|
//基站查询
|
anchorManagementa(val) {
|
var labelModel = connChart('base');
|
labelModel.find(`anchorid="${this.base_obj.tagid}"`, (e, r) => {
|
// console.log(e,r)
|
var sys = this.$store.state.sys;
|
// console.log(sys)
|
if (!sys.viewAnckid) {
|
this.baseList = [];
|
this.baseImg = '';
|
return;
|
}
|
try {
|
this.baseList = r;
|
if (r != undefined && r.length > 0) {
|
if (r[0].anchormode == 0) {
|
//离线
|
this.baseImg = '/static/img/base_4.png';
|
} else if (r[0].anchormode == 1) {
|
//正常
|
this.baseImg = '/static/img/base_2.png';
|
} else {
|
//故障
|
this.baseImg = '/static/img/base_3.png';
|
}
|
}
|
if (val) {
|
//离线
|
this.baseImg = '/static/img/base_4.png';
|
}
|
} catch (e) {
|
//TODO handle the exception
|
// console.error('错误查询')
|
}
|
});
|
},
|
//设置默认部门
|
insertDepartment() {
|
var labelModel = connChart('department');
|
labelModel.find(`department_name="系统默认"`, (e, r) => {
|
// console.log(e,r)
|
//添加
|
if (r != undefined && r.length != 0) {
|
} else {
|
labelModel.insert(
|
{
|
addTime: formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss'),
|
department_id: '1',
|
department_name: '系统默认'
|
},
|
(err, results) => {
|
// console.log(err,results);
|
}
|
);
|
}
|
});
|
},
|
//设置默认地图-默认地图长宽为500米
|
insertMap() {
|
var labelModel = connChart('map');
|
labelModel.find(`mapname="默认地图"`, (e, r) => {
|
// console.log(e,r)
|
if (r != undefined && r.length != 0) {
|
this.mapInfo = {
|
x_Truelength: r[0].x_Truelength,
|
y_Truewidth: r[0].y_Truewidth
|
};
|
this.$store.commit('mapInfoFunc', this.mapInfo);
|
this.mapShow = true;
|
} else {
|
labelModel.insert(
|
{
|
addTime: formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss'),
|
x_Truelength: '500',
|
y_Truewidth: '500',
|
x0_length: '0',
|
y0_width: '0',
|
mapname: '默认地图'
|
},
|
(err, results) => {
|
// console.log(err,results);
|
labelModel.find(`mapname="默认地图"`, (e, r) => {
|
// console.log(e,r)
|
if (r != undefined && r.length != 0) {
|
this.mapInfo = {
|
x_Truelength: r[0].x_Truelength,
|
y_Truewidth: r[0].y_Truewidth
|
};
|
this.$store.commit('mapInfoFunc', this.mapInfo);
|
this.mapShow = true;
|
}
|
});
|
}
|
);
|
}
|
});
|
},
|
//获取系统信息-设置默认系统信息
|
setSysInfo() {
|
var labelModel = connChart('sys');
|
labelModel.find((e, r) => {
|
// console.log(e,r)
|
if (r != undefined && r.length != 0) {
|
this.model = r[0];
|
this.model.gas_show = this.model.gas_show == 1 ? true : false;
|
this.model.viewAnckid = this.model.viewAnckid == 1 ? true : false;
|
this.model.baoliu16 = this.model.baoliu16 == 1 ? true : false;
|
this.model.baoliu17 = this.model.baoliu17 == 1 ? true : false;
|
this.model.yulan_map = this.model.yulan_map == 1 ? true : false;
|
this.model.show_password = this.model.show_password == 1 ? true : false;
|
this.port = r[0].baoliu20;
|
this.$store.commit('updateSys', r[0]);
|
} else {
|
labelModel.insert(
|
{
|
udpAdress: this.model.udpAdress,
|
baoliu20: this.model.baoliu20,
|
baoliu13: this.model.baoliu13,
|
baoliu14: this.model.baoliu14,
|
baoliu15: this.model.baoliu15,
|
real_trak_time: this.model.real_trak_time,
|
gas_show: this.model.gas_show ? '1' : '0',
|
viewAnckid: this.model.viewAnckid ? '1' : '0',
|
baoliu16: this.model.baoliu16 ? '1' : '0',
|
baoliu17: this.model.baoliu17 ? '1' : '0',
|
yulan_map: this.model.yulan_map ? '1' : '0',
|
show_password: this.model.show_password ? '1' : '0'
|
},
|
(e, r) => {
|
// console.log(e,r)
|
}
|
);
|
}
|
this.$store.commit('updateSys', this.model);
|
this.model.localhost = '7777';
|
this.anchorManagementa();
|
});
|
}
|
}
|
};
|
</script>
|
|
<script module="BMapView" lang="renderjs">
|
import { mymap,coordinateConverter,mapInit } from "@/common/utils.js";
|
export default {
|
name: "index",
|
data() {
|
return {
|
tallyListMap:[],
|
railListMap:[],
|
tallyMap:[],
|
centerMap:'',
|
tagIdList:[],
|
rectangleList:[],
|
rectTallyTagIdList:[],
|
windowMap:{},
|
maxminMap:{},
|
// BMap:null,
|
mmap:null,
|
baseListMap:[],
|
anchorIdList:[],
|
newRailList:[],
|
tally_coord:[],
|
isFirst:true,
|
mapInfoXY:{}
|
};
|
},
|
mounted(){
|
const script = document.createElement('script')
|
script.src = 'static/baidumap_apiV2_offline/baidumapv2/baidumap_offline_v2_20160921.js'
|
script.onload=this.getMap
|
document.head.appendChild(script)
|
},
|
watch:{
|
mapInfoXY(newV,oldV){
|
// const script = document.createElement('script')
|
// script.src = 'static/baidumap_apiV2_offline/baidumapv2/baidumap_offline_v2_20160921.js'
|
// script.onload=this.getMap
|
// document.head.appendChild(script)
|
}
|
},
|
methods: {
|
// ================百度地图==================
|
getMap(){
|
var CenterPoint="0,0";//中心点
|
var tileLayer = new BMap.TileLayer({ isTransparentPng: true });
|
tileLayer.getTilesUrl = function (tileCoord, zoom) {
|
// console.log(zoom)
|
var x = tileCoord.x;
|
var y = tileCoord.y;
|
return 'static/' + zoom + '/tile' + x + '_' + y + '.png';
|
}
|
var MyMap = new BMap.MapType('MyMap', tileLayer, { minZoom: 18, maxZoom: 19 });
|
var mmap = new BMap.Map("allmap", { mapType: MyMap });//在百度地图容器中创建一个地图
|
mmap.centerAndZoom(new BMap.Point(CenterPoint.split(',')[0], CenterPoint.split(',')[1]), (Number(18) + Number(19)) / 2);
|
|
mmap.addEventListener('click', function (e) {
|
// console.log(e.point)
|
});
|
|
mmap.enableScrollWheelZoom(); //开启鼠标滚轮缩放
|
// mmap.disablePinchToZoom(false);
|
|
mmap.addControl(new BMap.NavigationControl());// 添加缩放控件
|
var scale=new BMap.ScaleControl({
|
anchor:BMAP_ANCHOR_BOTTOM_LEFT
|
})
|
mmap.addControl(scale); //开启比例尺
|
|
// this.BMap=BMap
|
this.mmap=mmap
|
this.drawRail(mmap)
|
this.getEvent(mmap)
|
this.getTrack(mmap)
|
this.setTextClass(mmap)
|
this.setpanBy(mmap)
|
},
|
setpanBy(mmap){
|
mmap.panBy(0.1,0)
|
mmap.panBy(-0.1,0)
|
setTimeout(()=>{
|
this.setpanBy(mmap)
|
},3000)
|
},
|
setTextClass(mmap){
|
//修改比例尺文本
|
let zoom= mmap.getZoom(); // 获取缩放级别
|
if(zoom==18){
|
var scale=document.getElementsByClassName("BMap_scaleTxt")
|
var map_x=parseFloat(this.mapInfoXY.x_Truelength)
|
map_x=(map_x/500).toFixed(9)
|
var x=Math.round(map_x*50)
|
var newSize=x+' 米'
|
setTimeout(()=>{
|
scale[0].innerHTML=newSize
|
},20)
|
}else if(zoom==19){
|
var scale=document.getElementsByClassName("BMap_scaleTxt")
|
var map_x=parseFloat(this.mapInfoXY.x_Truelength)
|
map_x=(map_x/500).toFixed(9)
|
var x=Math.round(map_x*20)
|
var newSize=x+' 米'
|
setTimeout(()=>{
|
scale[0].innerHTML=newSize
|
},20)
|
}
|
setTimeout(()=>{
|
this.setTextClass(mmap)
|
},100)
|
},
|
drawRail(mmap){
|
//设置围栏为覆盖物
|
this.railListMap.forEach((e,i)=>{
|
var railCoordList=[]
|
// e.zuobiao=["150,150","150,-150","-150,-150","-150,150"] //测试-假数据
|
if(this.newRailList.filter(item=>{return e.id==item.id}).length==0){
|
e.zuobiao.forEach((item,index)=>{
|
var list=item.split(',');
|
var arr=coordinateConverter(list[0],list[1],this.mapInfoXY.x_Truelength,this.mapInfoXY.y_Truewidth);
|
railCoordList.push(new BMap.Point(arr.lng,arr.lat));
|
})
|
var rectangle = new BMap.Polygon(railCoordList, { strokeColor: 'rgb(252,4,5)',fillColor:'rgb(252,4,5)',fillOpacity:0.1, strokeWeight: 1.5, strokeOpacity: 0.8 }); //创建矩形
|
rectangle.disableMassClear()
|
mmap.addOverlay(rectangle);
|
this.newRailList.push({id:e.id,rectangle:rectangle})
|
}
|
})
|
var arr=[]
|
var newarr=[]
|
//删除围栏
|
this.newRailList.forEach((item,index)=>{
|
if(this.railListMap.filter(e=>{return e.id==item.id}).length==0){
|
// console.log(item.id)
|
// mmap.removeOverlay(item.rectangle);
|
item.rectangle.enableMassClear()
|
// item.rectangle.hide()
|
item.rectangle.setStrokeOpacity(0)
|
item.rectangle.setFillOpacity(0)
|
// mmap.clearOverlays();
|
arr.push(index)
|
// this.newRailList.splice(index,1)
|
}else{
|
newarr.push(index)
|
}
|
})
|
arr.forEach((e,i)=>{
|
this.newRailList.splice(e,1)
|
})
|
setTimeout(()=>{
|
this.drawRail(mmap)
|
},1000)
|
},
|
getEvent(mmap){
|
//将基站位置显示在地图上
|
var base=[]
|
this.baseListMap.forEach((e,i)=>{
|
base.push({point:coordinateConverter(e.jingdu,e.weidu,this.mapInfoXY.x_Truelength,this.mapInfoXY.y_Truewidth),anchorid:e.anchorid,anchormode:e.anchormode})
|
})
|
base.forEach((e,i)=>{
|
var img=''
|
var name=''
|
if(e.anchormode==1){//正常
|
name='base_2'
|
}else if(e.anchormode==0){//离线
|
name='base_4'
|
}else{//故障
|
name='base_3'
|
}
|
// #ifdef APP-PLUS
|
img='././static/img/'+name+'.png'
|
// #endif
|
// #ifdef H5
|
img='/static/img/'+name+'.png'
|
// #endif
|
if(this.anchorIdList[i]==undefined){
|
var myIcon = new BMap.Icon(img, new BMap.Size(25,25),{
|
anchor: new BMap.Size(12.5, 25),
|
});//设置标注图片
|
var marker = new BMap.Marker(new BMap.Point(e.point.lng,e.point.lat),{icon:myIcon}); // 创建标注
|
marker.disableMassClear()
|
marker.setZIndex(1)
|
mmap.addOverlay(marker);
|
this.anchorIdList.push({anchorid:e.anchorid,marker:marker})
|
}else if(this.anchorIdList[i].anchorid!=e.anchorid){
|
var marker=this.anchorIdList[i].marker
|
marker.enableMassClear()
|
mmap.clearOverlays();
|
// mmap.removeOverlay(marker);
|
this.anchorIdList.splice(i,1)
|
}else{
|
var marker =this.anchorIdList.filter(item=>{return item.anchorid==e.anchorid})[0].marker
|
var myIcon = new BMap.Icon(img, new BMap.Size(25,25),{
|
anchor: new BMap.Size(12.5, 25),
|
});//设置标注图片
|
marker.setIcon(myIcon)
|
marker.setPosition(new BMap.Point(e.point.lng,e.point.lat))
|
}
|
})
|
|
//图标
|
var list=[]
|
var labelList=[]
|
this.tallyListMap.forEach(e=>{
|
//添加标签
|
//将单位为米的坐标转换成经纬度添加进数组
|
list.push({
|
point:coordinateConverter(e.posx,e.posy,this.mapInfoXY.x_Truelength,this.mapInfoXY.y_Truewidth),
|
tagid:e.tagid,
|
name:e.name,
|
power:e.power,
|
bumen:e.bumen,
|
gaocheng:e.gaocheng,
|
fence:e.fence,
|
baoliu18:e.baoliu18,
|
status:e.statusName
|
})
|
})
|
|
//设置标签为覆盖物
|
list.forEach((e,i)=>{
|
if(this.tagIdList.filter(item=>{return item.tagid==e.tagid}).length==0){
|
var img=''
|
// #ifdef APP-PLUS
|
if(e.fence==2 || e.fence==1){
|
img='././static/tally/tally_6.png'
|
}else{
|
if(e.baoliu18==0){//红色
|
img='././static/tally/tally_4.png'
|
}else if(e.baoliu18==1){//蓝色
|
img='././static/tally/tally_5.png'
|
}else if(e.baoliu18==2){//青色
|
img='././static/tally/tally_7.png'
|
}else if(e.baoliu18==4){//绿色
|
img='././static/tally/tally_1.png'
|
}else if(e.baoliu18==5){//黄色
|
img='././static/tally/tally_2.png'
|
}else{//灰色
|
img='././static/tally/tally_3.png'
|
}
|
}
|
// #endif
|
// // #ifdef H5
|
// img='/static/img/tally_2.png'
|
// // #endif
|
var myIcon = new BMap.Icon(img, new BMap.Size(23,33),{
|
anchor: new BMap.Size(11.5, 33),
|
});//设置标注图片
|
var marker = new BMap.Marker(new BMap.Point(e.point.lng,e.point.lat),{icon:myIcon}); // 创建标注
|
var name=e.name?e.name:''
|
var status=e.status?e.status:''
|
var power=e.power?e.power:''
|
var gaocheng=e.gaocheng?e.gaocheng:''
|
var content=
|
"<div class='label-marker label-marker-show-1'>"+
|
"<div class='label-marker-1'>"+
|
"<div class='label-marker-1-1'>名称: "+name+"</div></div>"+
|
"<div class='label-marker-1'>"+
|
"<div class='label-marker-1-1'>ID: "+e.tagid+"</div></div>"+
|
"</div>"
|
|
var label = new BMap.Label(content,{
|
position: new BMap.Point(e.point.lng,e.point.lat), // 指定文本标注所在的地理位置
|
offset: new BMap.Size(0, -25)
|
});
|
var border=''
|
var backgroundColor=''
|
if(e.baoliu18==0){//红色
|
border='1px solid rgba(212, 0, 0, 0.5)'
|
backgroundColor='rgba(255, 0, 0, 0.5)'
|
}else if(e.baoliu18==1){//蓝色
|
border='1px solid rgba(0, 69, 207, 0.5)'
|
backgroundColor='rgba(0, 85, 255, 0.5)'
|
}else if(e.baoliu18==2){//青色
|
border='1px solid rgba(1, 255, 255, 0.5)'
|
backgroundColor='rgba(1, 255, 255, 0.5)'
|
}else if(e.baoliu18==4){//绿色
|
border='1px solid rgba(0, 166, 0, 0.5)'
|
backgroundColor='rgba(0, 188, 0, 0.5)'
|
}else if(e.baoliu18==5){//黄色
|
border='1px solid rgba(255,151,0,0.5)'
|
backgroundColor='rgba(255,151,0,0.5)'
|
}else{//灰色
|
border='1px solid rgba(145, 145, 145, 0.5)'
|
backgroundColor='rgba(177, 177, 177, 0.5)'
|
}
|
label.setStyle({
|
border: border,
|
padding: "5px",
|
borderRadius:"8px",
|
color: "#333",
|
backgroundColor: backgroundColor,
|
display:'block',
|
transform: "translate(-50%,-120%)",
|
position:"absolute"
|
});
|
// label.addEventListener("click", ()=>{ //点击label隐藏label
|
// label.setStyle({
|
// display: "none",
|
// })
|
// });
|
marker.addEventListener("click", ()=>{ //点击marker显示label
|
// this.tagIdList[i].label.enableMassClear()
|
// mmap.clearOverlays();
|
// mmap.removeOverlay(this.tagIdList[i].label);
|
// this.tagIdList[i].label.hide()
|
if(this.tagIdList.filter(item=>{return item.tagid==e.tagid})[0].labelType==1){
|
var labelType=2
|
}else if(this.tagIdList.filter(item=>{return item.tagid==e.tagid})[0].labelType==2){
|
var labelType=3
|
}else if(this.tagIdList.filter(item=>{return item.tagid==e.tagid})[0].labelType==3){
|
var labelType=1
|
}
|
// console.log(labelType)
|
var point={
|
lng:0,
|
lat:0
|
}
|
this.tagIdList.forEach((item,index)=>{
|
if(e.tagid==item.tagid){
|
point=item.point
|
border=item.border || border
|
backgroundColor=item.backgroundColor || backgroundColor
|
name=item.name
|
status=item.status
|
power=item.power
|
gaocheng=item.gaocheng
|
}
|
})
|
if(labelType==1){
|
content=
|
"<div class='label-marker label-marker-show-1'>"+
|
"<div class='label-marker-1'>"+
|
"<div class='label-marker-1-1'>名称: "+name+"</div></div>"+
|
"<div class='label-marker-1'>"+
|
"<div class='label-marker-1-1'>ID: "+e.tagid+"</div></div>"+
|
"</div>"
|
label.setContent(content)
|
label.setPosition(new BMap.Point(point.lng,point.lat))
|
label.setStyle({
|
border: border,
|
padding: "5px",
|
borderRadius:"8px",
|
color: "#333",
|
backgroundColor: backgroundColor,
|
display:'block',
|
transform: "translate(-50%,-120%)",
|
position:"absolute"
|
});
|
}else if(labelType==2){
|
content=
|
"<div class='label-marker label-marker-show-1'>"+
|
"<div class='label-marker-1'>"+
|
"<div class='label-marker-1-1'>标签: "+e.tagid+"</div>"+
|
"<div class='label-marker-1-1'>状态: "+status+"</div></div>"+
|
"<div class='label-marker-1'>"+
|
"<div class='label-marker-1-1'>电量: "+power+"</div>"+
|
"<div class='label-marker-1-1'>高度: "+gaocheng+"</div></div>"+
|
"</div>"
|
label.setContent(content)
|
label.setPosition(new BMap.Point(point.lng,point.lat))
|
label.setStyle({
|
border: border,
|
padding: "5px",
|
borderRadius:"8px",
|
color: "#333",
|
backgroundColor: backgroundColor,
|
display:'block',
|
transform: "translate(-50%,-120%)",
|
position:"absolute"
|
});
|
}else if(labelType==3){
|
label.setStyle({
|
display: "none",
|
})
|
}
|
|
// label = new BMap.Label(content,{
|
// position: new BMap.Point(e.point.lng,e.point.lat), // 指定文本标注所在的地理位置
|
// offset: new BMap.Size(0, -25)
|
// });
|
|
// label.addEventListener("click", ()=>{ //点击label隐藏label
|
// label.setStyle({
|
// display: "none",
|
// })
|
// });
|
// label.disableMassClear()
|
// mmap.addOverlay(label);
|
this.tagIdList.forEach((item,index)=>{
|
if(e.tagid==item.tagid){
|
this.tagIdList[index].label=label
|
this.tagIdList[index].labelType=labelType
|
}
|
})
|
|
});
|
marker.disableMassClear()
|
label.disableMassClear()
|
marker.setZIndex(10)
|
mmap.addOverlay(marker);
|
mmap.addOverlay(label);
|
this.tagIdList.push({
|
tagid:e.tagid,marker:marker,label:label,labelType:1,baoliu18:e.baoliu18,name:name,
|
status:status,power:power,gaocheng:gaocheng,point:e.point,border:border,backgroundColor:backgroundColor
|
})
|
|
}else if(this.tagIdList.filter(item=>{return item.tagid==e.tagid}).length==1){
|
var marker =this.tagIdList.filter(item=>{return item.tagid==e.tagid})[0].marker
|
var label =this.tagIdList.filter(item=>{return item.tagid==e.tagid})[0].label
|
var labelType =this.tagIdList.filter(item=>{return item.tagid==e.tagid})[0].labelType
|
var baoliu18 =this.tagIdList.filter(item=>{return item.tagid==e.tagid})[0].baoliu18
|
var border =this.tagIdList.filter(item=>{return item.tagid==e.tagid})[0].border || ''
|
var backgroundColor =this.tagIdList.filter(item=>{return item.tagid==e.tagid})[0].backgroundColor || ''
|
marker.setPosition(new BMap.Point(e.point.lng,e.point.lat))
|
|
if(e.fence==2 || e.fence==1){
|
img='././static/tally/tally_6.png'
|
var myIcon = new BMap.Icon(img, new BMap.Size(23,33),{
|
anchor: new BMap.Size(11.5, 33),
|
});//设置标注图片
|
marker.setIcon(myIcon)
|
}else{
|
if(e.baoliu18==0){//红色
|
img='././static/tally/tally_4.png'
|
}else if(e.baoliu18==1){//蓝色
|
img='././static/tally/tally_5.png'
|
}else if(e.baoliu18==2){//青色
|
img='././static/tally/tally_7.png'
|
}else if(e.baoliu18==4){//绿色
|
img='././static/tally/tally_1.png'
|
}else if(e.baoliu18==5){//黄色
|
img='././static/tally/tally_2.png'
|
}else{//灰色
|
img='././static/tally/tally_3.png'
|
}
|
var myIcon = new BMap.Icon(img, new BMap.Size(23,33),{
|
anchor: new BMap.Size(11.5, 33),
|
});//设置标注图片
|
marker.setIcon(myIcon)
|
}
|
if(e.baoliu18==0){//红色
|
border='1px solid rgba(212, 0, 0, 0.5)'
|
backgroundColor='rgba(255, 0, 0, 0.5)'
|
}else if(e.baoliu18==1){//蓝色
|
border='1px solid rgba(0, 69, 207, 0.5)'
|
backgroundColor='rgba(0, 85, 255, 0.5)'
|
}else if(e.baoliu18==2){//青色
|
border='1px solid rgba(1, 255, 255, 0.5)'
|
backgroundColor='rgba(1, 255, 255, 0.5)'
|
}else if(e.baoliu18==4){//绿色
|
border='1px solid rgba(0, 166, 0, 0.5)'
|
backgroundColor='rgba(0, 188, 0, 0.5)'
|
}else if(e.baoliu18==5){//黄色
|
border='1px solid rgba(255,151,0,0.5)'
|
backgroundColor='rgba(255,151,0,0.5)'
|
}else{//灰色
|
border='1px solid rgba(145, 145, 145, 0.5)'
|
backgroundColor='rgba(177, 177, 177, 0.5)'
|
}
|
if(labelType==2){
|
var name=e.name?e.name:''
|
var status=e.status?e.status:''
|
var power=e.power?e.power:''
|
var gaocheng=e.gaocheng?e.gaocheng:''
|
content=
|
"<div class='label-marker label-marker-show-1'>"+
|
"<div class='label-marker-1'>"+
|
"<div class='label-marker-1-1'>标签: "+e.tagid+"</div>"+
|
"<div class='label-marker-1-1'>状态: "+status+"</div></div>"+
|
"<div class='label-marker-1'>"+
|
"<div class='label-marker-1-1'>电量: "+power+"</div>"+
|
"<div class='label-marker-1-1'>高度: "+gaocheng+"</div></div>"+
|
"</div>"
|
label.setContent(content)
|
label.setPosition(new BMap.Point(e.point.lng,e.point.lat))
|
if(baoliu18!=e.baoliu18){
|
label.setStyle({
|
border: border,
|
padding: "5px",
|
borderRadius:"8px",
|
color: "#333",
|
backgroundColor: backgroundColor,
|
display:'block',
|
transform: "translate(-50%,-120%)",
|
position:"absolute"
|
});
|
}
|
}else if(labelType==1){
|
var name=e.name?e.name:''
|
var status=e.status?e.status:''
|
var power=e.power?e.power:''
|
var gaocheng=e.gaocheng?e.gaocheng:''
|
content=
|
"<div class='label-marker label-marker-show-1'>"+
|
"<div class='label-marker-1'>"+
|
"<div class='label-marker-1-1'>名称: "+name+"</div></div>"+
|
"<div class='label-marker-1'>"+
|
"<div class='label-marker-1-1'>ID: "+e.tagid+"</div></div>"+
|
"</div>"
|
label.setContent(content)
|
label.setPosition(new BMap.Point(e.point.lng,e.point.lat))
|
if(baoliu18!=e.baoliu18){
|
label.setStyle({
|
border: border,
|
padding: "5px",
|
borderRadius:"8px",
|
color: "#333",
|
backgroundColor: backgroundColor,
|
display:'block',
|
transform: "translate(-50%,-120%)",
|
position:"absolute"
|
});
|
}
|
}else if(labelType==3){
|
label.setStyle({
|
display:'none',
|
});
|
}
|
|
this.tagIdList.forEach((item,index)=>{
|
if(e.tagid==item.tagid){
|
this.tagIdList[index].marker=marker
|
this.tagIdList[index].label=label
|
this.tagIdList[index].baoliu18=e.baoliu18
|
this.tagIdList[index].point=e.point
|
this.tagIdList[index].border=border
|
this.tagIdList[index].backgroundColor=backgroundColor
|
}
|
})
|
|
}
|
})
|
//删除标签
|
var newTagList=this.tagIdList.filter((e,i)=>{
|
return list.filter((item,index)=>{
|
return item.tagid==e.tagid
|
}).length==0
|
})
|
newTagList.forEach((e)=>{
|
var marker=e.marker
|
var label=e.label
|
var border='1px solid rgba(145, 145, 145, 0.5)'
|
var backgroundColor='rgba(177, 177, 177, 0.5)'
|
var content=
|
"<div class='label-marker label-marker-show-1'>"+
|
"<div class='label-marker-1'>"+
|
"<div class='label-marker-1-1'>标签: "+e.tagid+"</div>"+
|
"<div class='label-marker-1-1'>状态: "+'离线'+"</div></div>"+
|
"<div class='label-marker-1'>"+
|
"<div class='label-marker-1-1'>电量: "+e.power+"</div>"+
|
"<div class='label-marker-1-1'>高度: "+e.gaocheng+"</div></div>"+
|
"</div>"
|
label.setContent(content)
|
label.setStyle({
|
border: border,
|
padding: "5px",
|
borderRadius:"8px",
|
color: "#333",
|
backgroundColor: backgroundColor,
|
display:'block',
|
transform: "translate(-50%,-120%)",
|
position:"absolute"
|
});
|
var img='././static/tally/tally_3.png'//灰色
|
var myIcon = new BMap.Icon(img, new BMap.Size(23,33),{
|
anchor: new BMap.Size(11.5, 33),
|
});//设置标注图片
|
marker.setIcon(myIcon)
|
// mmap.removeOverlay(marker);
|
// mmap.removeOverlay(label);
|
// this.tagIdList.forEach((item,index)=>{
|
// if(e.tagid==item.tagid){
|
// this.tagIdList.splice(index,1)
|
// }
|
// })
|
})
|
|
//以围栏中心为中心点显示在地图上
|
// console.log(this.centerMap)
|
var center=coordinateConverter(this.centerMap.split(',')[0],this.centerMap.split(',')[1],this.mapInfoXY.x_Truelength,this.mapInfoXY.y_Truewidth)
|
if(this.centerMap!='' && this.centerMap!=undefined){
|
var obj=this.maxminMap
|
if(this.centerMap=='0,0'){
|
var zoom=18
|
mmap.centerAndZoom(new BMap.Point(center.lng,center.lat), zoom);
|
// mmap.panTo(new BMap.Point(center.lng,center.lat));
|
}else{
|
var max_x=obj.max.split(',')[0]
|
var max_y=obj.max.split(',')[1]
|
var min_x=obj.min.split(',')[0]
|
var min_y=obj.min.split(',')[1]
|
var new_x=max_x-min_x
|
var new_y=max_y-min_y
|
var zoom=18
|
if(new_x*2>this.windowMap.windowWidth || new_y*2>this.windowMap.windowHeight || this.centerMap=="0,0"){
|
zoom=18
|
}else{
|
zoom=19
|
}
|
mmap.centerAndZoom(new BMap.Point(center.lng,center.lat), zoom);
|
// mmap.panTo(new BMap.Point(center.lng,center.lat));
|
}
|
}
|
this.centerMap=''
|
// this.rectangleList.forEach(e=>{
|
// e.rectangle.enableMassClear()
|
// mmap.clearOverlays();
|
// // mmap.removeOverlay(e.rectangle);
|
// })
|
// this.rectangleList=[]
|
setTimeout(()=>{
|
this.getEvent(mmap)
|
},1000)
|
},
|
getTrack(mmap){
|
//设置人员实时位置拖尾效果
|
var tally=this.tallyMap
|
// console.log(tally)
|
this.tally_coord=[]
|
// this.tally_coord=new Array(tally && tally[tally.length-1] && tally[tally.length-1].tallyList!=null?tally[tally.length-1].tallyList.length:0).fill({coord:[],tagid:''})
|
var sign=false
|
// console.log(this.tally_coord)
|
if(tally && tally!=[]){
|
sign=true
|
tally.forEach((e,i)=>{//10
|
if(e.tallyList)
|
e.tallyList.forEach((item,index)=>{//4
|
var arr=coordinateConverter(item.posx,item.posy,this.mapInfoXY.x_Truelength,this.mapInfoXY.y_Truewidth)
|
if(this.tally_coord.filter(ite=>{return ite.tagid==item.tagid}).length!=0){
|
var coord=JSON.parse(JSON.stringify(this.tally_coord.filter(ite=>{return ite.tagid==item.tagid})[0].coord)) || []
|
coord.push(new BMap.Point(parseFloat(arr.lng),parseFloat(arr.lat)))
|
}else{
|
var coord=[]
|
}
|
var inde=null;
|
this.tally_coord.forEach((itemr,indexx)=>{
|
if(itemr.tagid==item.tagid){
|
inde=indexx
|
}
|
})
|
var tagid=item.tagid
|
if(inde==null){
|
this.tally_coord.push({coord:coord,tagid:tagid})
|
}else{
|
this.$set(this.tally_coord,inde,{coord:coord,tagid:tagid})
|
}
|
})
|
// e.tallyList.forEach((item,index)=>{//4
|
// var arr=coordinateConverter(item.posx,item.posy,this.mapInfoXY.x_Truelength,this.mapInfoXY.y_Truewidth)
|
// if(this.tally_coord[index].coord!=undefined){
|
// var coord=JSON.parse(JSON.stringify(this.tally_coord[index].coord))
|
// coord.splice(i,0,new BMap.Point(parseFloat(arr.lng),parseFloat(arr.lat)))
|
// }else{
|
// var coord=[]
|
// }
|
// var tagid=JSON.parse(JSON.stringify(this.tally_coord[index].tagid))
|
// tagid=item.tagid
|
// this.$set(this.tally_coord,index,{coord:coord,tagid:tagid})
|
// })
|
})
|
}
|
// var lll=0
|
// if(this.tally_coord[0] && this.tally_coord[0].coord!=undefined){
|
// lll=this.tally_coord[0].coord.length
|
// }
|
// console.log(this.tally_coord,this.tally_coord.length,lll)
|
if(this.tally_coord && sign)
|
this.tally_coord.forEach((e,i)=>{
|
if(this.rectTallyTagIdList.filter(item=>{return item.tagid==e.tagid}).length==0){
|
// console.log('添加路径')
|
if(e.coord==undefined){
|
e.coord=[]
|
}
|
var rectangle = new BMap.Polyline(e.coord, { strokeColor: 'rgb(252,4,5)', strokeWeight: 1, strokeOpacity: 0.8 }); //创建折线
|
rectangle.disableMassClear()
|
mmap.addOverlay(rectangle);
|
this.rectTallyTagIdList[i]={rectangle:rectangle,tagid:e.tagid}
|
}else{
|
// console.log('修改路径',this.tally_coord[i].coord)
|
var rectangle=this.rectTallyTagIdList[i].rectangle
|
rectangle.disableMassClear()
|
// rectangle.hide()
|
rectangle.show()
|
// console.log(rectangle.isVisible())
|
if(e.coord==undefined){
|
e.coord=[]
|
}
|
rectangle.setPath(e.coord)
|
}
|
})
|
this.rectTallyTagIdList.forEach((e,i)=>{
|
if(this.tally_coord.filter(item=>{return item.tagid==e.tagid}).length==0){
|
// console.log('删除路径')
|
var rectangle=this.rectTallyTagIdList[i].rectangle
|
// rectangle.hide()
|
rectangle.setStrokeOpacity(0)
|
rectangle.enableMassClear()
|
// mmap.clearOverlays();
|
// mmap.removeOverlay(rectangle)
|
this.rectTallyTagIdList.splice(i,1)
|
}
|
})
|
setTimeout(()=>{
|
this.getTrack(mmap)
|
},1000)
|
},
|
updateEcharts(newValue, oldValue, ownerInstance, instance) {
|
// 监听 service 层数据变更
|
this.tallyListMap=newValue;
|
// console.log('tally',this.tallyList)
|
// console.log('newValue', newValue)
|
// console.log('oldValue', oldValue)
|
// console.log('ownerInstance', ownerInstance)
|
// console.log('instance', instance)
|
// app端监听数据变化调用方法
|
},
|
updateEcharts2(newValue, oldValue, ownerInstance, instance) {
|
this.railListMap=newValue
|
},
|
updateEcharts3(newValue, oldValue, ownerInstance, instance) {
|
this.tallyMap=newValue
|
},
|
updateEcharts4(newValue, oldValue, ownerInstance, instance){
|
this.centerMap=newValue
|
},
|
updateEcharts5(newValue, oldValue, ownerInstance, instance){
|
this.windowMap=newValue
|
},
|
updateEcharts6(newValue, oldValue, ownerInstance, instance){
|
this.maxminMap=newValue
|
},
|
updateEcharts7(newValue, oldValue, ownerInstance, instance){
|
this.baseListMap=newValue
|
},
|
updateEcharts8(newValue, oldValue, ownerInstance, instance){
|
this.mapInfoXY=newValue
|
},
|
onClick(event, ownerInstance) {
|
// 调用 service 层的方法
|
},
|
}
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.content {
|
flex: 1;
|
}
|
.m-header {
|
width: 100%;
|
height: 50vh;
|
background-color: #459eff;
|
}
|
.map,
|
#allmap {
|
// width: calc(100% - 30px);
|
// height: calc(100vh - 20px - 3.5em - 85px);
|
width: calc(100% - 0px);
|
height: calc(100vh - 0px - 3.5em - 82px);
|
position: absolute;
|
// top: 15px;
|
// left: 15px;
|
top: 0px;
|
left: 0px;
|
border: 1px solid #fff;
|
// border-radius: 15px;
|
box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.2);
|
}
|
/deep/ .map div:nth-of-type(1) div:nth-of-type(2) div:nth-of-type(4) {
|
z-index: 750 !important;
|
}
|
|
.m-logo {
|
position: absolute;
|
top: 35px;
|
left: 50%;
|
transform: translate(-50%, 0);
|
color: #fff;
|
.m-logo-img {
|
// position: absolute;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
.m-logo-text {
|
// position: absolute;
|
}
|
}
|
.m-back {
|
position: absolute;
|
top: 20px;
|
right: 0em;
|
}
|
.m-back-1 {
|
z-index: 150;
|
}
|
.m-colls {
|
background-color: rgba(255, 255, 255, 0.9);
|
border-radius: 15px;
|
position: absolute;
|
right: 0;
|
top: 3.5em;
|
width: 8em;
|
z-index: 800;
|
overflow: hidden;
|
}
|
.m-colls-2 {
|
background-color: rgba(255, 255, 255, 0.9);
|
border-top-left-radius: 15px;
|
border-top-right-radius: 15px;
|
position: absolute;
|
right: 0;
|
bottom: 0;
|
padding-bottom: 60px;
|
width: 8em;
|
z-index: 800;
|
overflow: hidden;
|
box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.16);
|
}
|
|
.v-leave-active,
|
.v-enter-active {
|
transition: all 0.5s ease;
|
}
|
.v-leave-active,
|
.v-enter {
|
height: 0px !important;
|
// opacity: 0;
|
}
|
.v-leave,
|
.v-enter-active {
|
height: calc(140px + 8em);
|
// opacity: 1;
|
}
|
|
.rail-leave-active,
|
.rail-enter-active {
|
transition: all 0.5s ease;
|
}
|
.rail-leave-active,
|
.rail-enter {
|
height: 0px !important;
|
// opacity: 0;
|
}
|
.rail-leave,
|
.rail-enter-active {
|
height: 60px;
|
// opacity: 1;
|
}
|
|
.m-icon {
|
position: absolute;
|
right: 1em;
|
}
|
.m-middle {
|
width: 100%;
|
height: calc(100vh - 20px - 3.5em);
|
position: absolute;
|
top: calc(20px + 3.5em);
|
left: 0px;
|
background-color: #eaeef1;
|
z-index: 100;
|
// border-top-left-radius: 15px;
|
// border-top-right-radius: 15px;
|
}
|
.m-footer {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
position: absolute;
|
bottom: 0;
|
left: 0;
|
z-index: 150;
|
width: 100%;
|
height: 60px;
|
background-color: rgba(255, 255, 255, 0.8);
|
// border-top-left-radius: 8px;
|
// border-top-right-radius: 8px;
|
box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.16);
|
.m-index-base {
|
margin-left: 2em;
|
display: flex;
|
align-items: center;
|
image {
|
// animation: heart 1s ease infinite;
|
width: 1.5em;
|
height: 1.5em;
|
}
|
.m-index-baseNum {
|
margin-left: 10px;
|
}
|
// @keyframes heart {
|
// 0% {
|
// opacity: 0;
|
// }
|
// 100% {
|
// opacity: 1;
|
// }
|
// }
|
}
|
.m-index-rail {
|
display: flex;
|
align-items: center;
|
// margin-right: 2em;
|
position: absolute;
|
right: 2em;
|
z-index: 850;
|
color: #459eff;
|
}
|
}
|
.m-back-2 {
|
position: absolute;
|
top: 20px;
|
overflow: hidden;
|
border-radius: 15px;
|
left: 1em;
|
.m-back-view {
|
border-radius: 15px;
|
margin-top: 5px;
|
margin-bottom: 8px;
|
}
|
.m-back-2-view {
|
margin-top: 5px;
|
margin-bottom: 8px;
|
}
|
.m-back-view-show {
|
color: #000;
|
font-size: 1.5em;
|
text-align: center;
|
}
|
}
|
|
/deep/ .u-cell {
|
border-radius: 15px;
|
background-color: rgba(233, 233, 233, 0.8);
|
// box-shadow: -4.243px -4.243px 10px 0px rgba(255, 255, 255, 0.4), 2.294px 3.277px 10px 0px rgba(191, 191, 191, 0.4);
|
}
|
.u-cell--clickable {
|
}
|
.u-collapse-content {
|
color: #fff;
|
}
|
.m-coll {
|
width: 3em;
|
// color: #fff;
|
// border-radius: 15px;
|
// background-color: rgba(233, 233, 233, 1);
|
}
|
/deep/ .m-coll-1 .u-collapse-item .u-cell,
|
/deep/ .m-coll-2 .u-collapse-item .u-cell,
|
/deep/ .m-coll-2-0 .u-collapse-item .u-cell,
|
/deep/ .m-coll-2-1 .u-collapse-item .u-cell,
|
/deep/ .m-coll-2-2 .u-collapse-item .u-cell,
|
/deep/ .m-coll-2-3 .u-collapse-item .u-cell,
|
/deep/ .m-coll-2-4 .u-collapse-item .u-cell {
|
// box-shadow: -3.536px -3.536px 5px 0px rgba(255, 255, 255, 0.75), 4.721px 6.457px 8px -5px rgba(191, 191, 191, 1);
|
&:active {
|
// background-color: rgba(197, 197, 197, 0.8);
|
}
|
}
|
.u-icon--right .u-icon__icon--info {
|
color: #fff;
|
}
|
.m-coll-view {
|
color: #459eff;
|
padding: 10px 15px;
|
text-align: center;
|
position: relative;
|
}
|
.m-coll-view-1 {
|
position: relative;
|
}
|
.m-coll-view-1:after {
|
position: absolute;
|
left: 0;
|
bottom: 0;
|
content: '';
|
width: 0;
|
height: 0;
|
transform: translate(0, 18px);
|
border-top: 8px solid transparent;
|
border-bottom: 8px solid transparent;
|
border-left: 8px solid #68b0fe;
|
}
|
.m-coll-text {
|
color: #000;
|
padding: 10px 15px;
|
text-align: center;
|
border-radius: 10px;
|
box-shadow: -3.536px -3.536px 5px 0px rgba(255, 255, 255, 0.75), 4.721px 6.457px 8px -5px rgba(191, 191, 191, 1);
|
margin-bottom: 5px;
|
&:active {
|
background-color: rgba(197, 197, 197, 0.8);
|
}
|
}
|
/deep/ .u-cell__body {
|
padding: 5px 15px;
|
}
|
.m-coll-text-title {
|
color: #000;
|
// padding: 5px 15px;
|
width: fit-content;
|
display: flex;
|
align-items: center;
|
justify-content: space-around;
|
}
|
/deep/ .u-collapse-item__content {
|
box-shadow: inset 2px 3.464px 5px 0px rgba(153, 153, 153, 0.004);
|
}
|
.u-collapse-item__content__text {
|
padding: 0 !important;
|
}
|
.m-index-buttons {
|
position: absolute;
|
left: 50%;
|
bottom: 0;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
transform: translate(-50%, -93%);
|
width: auto;
|
height: auto;
|
z-index: 500;
|
.m-index-btn {
|
.m-index-btn-text {
|
white-space: nowrap;
|
}
|
}
|
.m-index-btn_1 {
|
// background-image: url('/static/img/left-btn.png');
|
// background-size: 100% 100%;
|
padding: 10px 60px 10px 30px;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
color: #fff;
|
width: calc(3em + 20px);
|
background-color: rgba(69, 158, 255, 0.9);
|
border-top-left-radius: 5em;
|
border-bottom-left-radius: 5em;
|
}
|
.m-index-btn_2,
|
.m-index-btn_3,
|
.m-index-btn_4 {
|
// background-image: url('/static/img/circle.png');
|
// background-size: 100% 100%;
|
padding: 17px 0;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
color: #fff;
|
width: calc(3em + 20px);
|
position: absolute;
|
z-index: 500;
|
// background-color: #50DB68;
|
border-radius: 50%;
|
}
|
.m-index-btn_5 {
|
// background-image: url('/static/img/right-btn.png');
|
// background-size: 100% 100%;
|
padding: 10px 30px 10px 60px;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
color: #fff;
|
width: calc(3em + 20px);
|
background-color: rgba(69, 158, 255, 0.9);
|
border-top-right-radius: 5em;
|
border-bottom-right-radius: 5em;
|
}
|
}
|
.u-form-item__body__left {
|
width: auto !important;
|
}
|
/deep/ .label-marker {
|
display: flex;
|
align-items: center;
|
color: #fff;
|
font-family: 'PingFang';
|
font-weight: bold;
|
padding: 5px;
|
// background-color: rgba(255,151,0,0.5);
|
width: 80%;
|
justify-content: space-between;
|
}
|
/deep/ .label-marker-1 {
|
flex-direction: column;
|
display: flex;
|
}
|
/deep/ .label-marker-1:nth-of-type(1) {
|
margin-right: 10px;
|
}
|
// /deep/ .label-marker-1-1:nth-of-type(1) {
|
// margin-bottom: 5px;
|
// }
|
/* 隐藏四个边角 */
|
/deep/ .BMap_pop div:nth-child(1),
|
/deep/ .BMap_pop div:nth-child(2),
|
/deep/ .BMap_pop div:nth-child(3),
|
/deep/ .BMap_pop div:nth-child(4),
|
/deep/ .BMap_pop div:nth-child(5),
|
/deep/ .BMap_pop div:nth-child(6),
|
/deep/ .BMap_pop div:nth-child(7),
|
/deep/ .BMap_pop div:nth-child(8),
|
/deep/ .BMap_pop div:nth-child(9) {
|
background-color: rgba(255, 151, 0, 0.5) !important;
|
border-color: rgba(255, 151, 0, 0.5) !important;
|
}
|
/deep/ .BMap_pop div:nth-child(1) {
|
// border-top-left-radius: 15px;
|
}
|
/deep/ .BMap_pop div:nth-child(3) {
|
// border-top-right-radius: 15px;
|
}
|
/deep/ .BMap_pop div:nth-child(5) {
|
// border-bottom-left-radius: 15px;
|
}
|
/deep/ .BMap_pop div:nth-child(7) {
|
// border-bottom-right-radius: 15px;
|
}
|
/deep/ .BMap_pop div:nth-child(8) {
|
display: none;
|
}
|
/deep/ .BMap_cpyCtrl {
|
display: none;
|
}
|
/deep/ .anchorBL {
|
display: none;
|
}
|
|
@media screen and (max-width: 450px) {
|
/deep/ .BMap_scaleCtrl {
|
bottom: 100px !important;
|
}
|
/deep/ .BMap_stdMpCtrl {
|
bottom: 80px !important;
|
}
|
}
|
/deep/ .BMap_scaleCtrl {
|
display: block;
|
left: 10px !important;
|
}
|
/deep/ .BMap_stdMpZoomIn {
|
border: 1px solid #459eff !important;
|
border-top-left-radius: 15px !important;
|
border-top-right-radius: 15px !important;
|
background-color: #fff !important;
|
}
|
/deep/ .BMap_stdMpZoomOut {
|
border: 1px solid #459eff !important;
|
border-top: none !important;
|
border-bottom-left-radius: 15px !important;
|
border-bottom-right-radius: 15px !important;
|
background-color: #fff !important;
|
}
|
/deep/ .BMap_stdMpZoom {
|
// opacity: 0 !important;
|
// height: auto !important;
|
border-radius: 16px !important;
|
// border-bottom-left-radius: 20px !important;
|
// border-bottom-right-radius: 20px !important;
|
|
// padding: 0 !important;
|
background-color: #459eff !important;
|
}
|
</style>
|
