<template>
|
<view>
|
<u-search v-show="show" class="searchbg" shape="true" bg-color="rgba(255, 255, 255, 0.5)" placeholder="请输入名称"
|
:show-action="false" v-model="keyword" @search="searchxinxi"
|
:style="{top: topheight+'px',position: 'absolute',width: '50%',left: '25%'}"></u-search>
|
<!-- #ifdef APP-PLUS || H5 -->
|
<view :style="{top: topheight+'px',position: 'absolute',width: '100%','z-index': '999999999999999999999999'}">
|
<!-- <u--image
|
|
:showLoading="true"
|
src="../../static/img/red.png"
|
width="25px"
|
height="25px"
|
@click="click"
|
></u--image>禁区 -->
|
|
<div class="area"
|
style="display: inline-block;font-weight: bolder;font-size: 16px;background-color: #000000;color: #ffffff;">
|
<image src="../../static/img/red.png"
|
style="vertical-align: middle;position: relative;top: -2px;width:20px;height:20px">禁区</image>
|
</div>
|
<div class="area"
|
style="display: inline-block;font-weight: bolder;font-size: 16px;background-color: #000000;color: #ffffff;">
|
<image src="../../static/img/green.png"
|
style="vertical-align: middle;position: relative;top: -2px;width:20px;height:20px">安全区</image>
|
</div>
|
<div class="area"
|
style="display: inline-block;font-weight: bolder;font-size: 16px;background-color: #000000;color: #ffffff;">
|
<image src="../../static/img/blue.png"
|
style="vertical-align: middle;position: relative;top: -2px;width:20px;height:20px"> 施工区</image>
|
</div>
|
<div class="area"
|
style="display: inline-block;font-weight: bolder;font-size: 16px;background-color: #000000;color: #ffffff;">
|
<image src="../../static/img/qingse.png"
|
style="vertical-align: middle;position: relative;top: -2px;width:20px;height:20px"> 保护区</image>
|
</div>
|
</view>
|
|
|
<view style="margin-top: 120px;position: fixed; z-index: 9999999999999999999999;">
|
<!-- {{warnlist}} -->
|
<!-- {{warnlist.length}} -->
|
<view v-for="(item,index) in warnlist" :key="index" style="margin-top: 10px;">
|
<!-- {{item.warnstatus}} -->
|
<u-alert type="warning" :closable="true" :description="item"></u-alert>
|
</view>
|
</view>
|
<!-- <u-button @click="draw" icon="../../static/drawfence.png"
|
style=" border-color: #5b5b5b;background-color: rgba(115, 115, 115, 0); width: 31px;height: 31px; position:absolute;top: 70%; left:15px;z-index: 999999999999999;"></u-button> -->
|
<u-button @click="draw" icon="../../static/drawf.png" :style="{
|
borderColor: '#5b5b5b',
|
backgroundColor: 'rgba(115, 115, 115, 0)',
|
width: '32px',
|
height: '31px',
|
position: 'absolute',
|
top: buttonTop + 'px',
|
left: buttonLeft + 'px',
|
zIndex: 999999999999999
|
}">
|
</u-button>
|
<u-modal style="position: absolute;z-index: 99999999999999;" buttonReverse confirmText="下一步" cancelText="取消"
|
:show="drawshow" @cancel="cancelmodal" @confirm="startdraw" ref="uModal" :showCancelButton="true"
|
:closeOnClickOverlay="true">
|
<u-icon name="close" style="position: absolute;right: 10px;top:10px" @click="closemodal"></u-icon>
|
<view style="max-height: 600px; overflow-y: auto;">
|
|
<u--form style="" labelPosition="left" :model="model" :rules="rules2" ref="uForm">
|
<u-form-item required label="终端编号:" borderBottom ref="item1" labelWidth="80px">
|
<u-badge v-if="tagonlie==1 && code!=''" :isDot="true" type="success"></u-badge>
|
<u-badge v-else-if="tagonlie==0 && code!=''" :isDot="true" type="info"></u-badge>
|
<!-- <u--input v-model="code" border="none" placeholder="请输入终端编号" @blur="seachcode"></u--input> -->
|
<tn-input v-model="code" type="select" @click="showtagid = true" placeholder="请选择终端编号" />
|
<tn-select v-model="showtagid" mode="single" :list="tagidlist" @confirm="confirmtagid"
|
:searchShow="true"></tn-select>
|
</u-form-item>
|
<u-form-item label="选择场景:" prop="fencetype" borderBottom ref="item1" labelWidth="80px">
|
<u-radio-group v-model="model.fencetype" placement="row">
|
<u-radio :customStyle="{marginRight: '8px'}" v-for="(item, index) in radiolist1"
|
:key="index" :label="item.name" :name="item.name" @change="radioChange">
|
</u-radio>
|
</u-radio-group>
|
</u-form-item>
|
|
<view v-if='isperties'>
|
<u-form-item v-show='isperties' label="绘制方式:" prop="fencetype" borderBottom ref="item1"
|
labelWidth="80px">
|
<u-radio-group v-model="drawway" placement="row">
|
<u-radio :customStyle="{marginRight: '8px'}" v-for="(item, index) in radiolist2"
|
:key="index" :label="item.name" :name="item.name">
|
</u-radio>
|
</u-radio-group>
|
</u-form-item>
|
|
</view>
|
|
|
<view v-else>
|
<u-form-item label="操作提示:" borderBottom ref="item1" labelWidth="80px">
|
<span style="color:red">将标签放在地面测量导线边缘坐标，同时用激光测量导线距离地面的高度</span>
|
|
</u-form-item>
|
<u-form-item label="新增塔:" borderBottom ref="item1" labelWidth="80px">
|
<u-number-box v-model="tanum" :min="2" :max="4 " @change="valChange"></u-number-box>
|
</u-form-item>
|
<view v-for="i in tanum" :key="i">
|
<u-form-item :label="'塔' + (i) + '坐标A:'" borderBottom ref="item1" labelWidth="80px">
|
<tn-input v-show="zuobiaolist[i-1][0]!=''" v-model="zuobiaolist[i-1][0]"
|
inputAlign="right" style="width:400rpx"></tn-input>
|
<!-- <tn-button v-show="zuobiaolist[i-1][0]==''" backgroundColor="#55aaff" fontColor="#ffffff"
|
size="small" @click="acquisitionxy(i,0)">采集坐标</tn-button> -->
|
<uni-tooltip :content="content" placement="top" style="width:100px">
|
<!-- <button size="mini" @click="acquisition">采集</button> -->
|
|
<u-button style="width:100px" type="primary" v-show="zuobiaolist[i-1][0]==''"
|
:disabled="disabled" size="mini"
|
@click="acquisitionxy(i,0,'zb')">采集坐标</u-button>
|
</uni-tooltip>
|
</u-form-item>
|
<u-form-item :label="'塔' + (i) + '坐标B:'" borderBottom ref="item1" labelWidth="80px">
|
<tn-input v-show="zuobiaolist[i-1][1]!=''" v-model="zuobiaolist[i-1][1]"
|
inputAlign="right" style="width:400rpx"></tn-input>
|
<uni-tooltip :content="content" placement="top" style="width:100px">
|
<u-button style="width:100px" type="primary" v-show="zuobiaolist[i-1][1]==''"
|
:disabled="disabled" size="mini"
|
@click="acquisitionxy(i,1,'zb')">采集坐标</u-button>
|
<!-- <tn-button disabled v-show="zuobiaolist[i-1][1]==''" backgroundColor="#55aaff" fontColor="#ffffff"
|
size="small" @click="acquisitionxy(i,1)">采集坐标</tn-button> -->
|
</uni-tooltip>
|
</u-form-item>
|
<u-form-item label="导线高:" borderBottom ref="item1" labelWidth="80px">
|
<u--input v-model="zuobiaolist[i-1][3]" border="none" placeholder="请输入导线高:"></u--input>
|
</u-form-item>
|
|
<view v-if="i>=1 && i<tanum">
|
<!-- {{i<=tanum}}
|
{{saglist[i-1]}}
|
{{saglist[i-1][0]}} -->
|
<u-form-item :label="'弧垂' + (i) + '坐标A:'" borderBottom ref="item1"
|
:labelWidth="labelWidth">
|
<tn-input v-show="saglist[i-1][0]!=''" v-model="saglist[i-1][0]" inputAlign="right"
|
style="width:400rpx"></tn-input>
|
<uni-tooltip :content="content" placement="top" style="width:100px">
|
|
<u-button style="width:100px" type="primary" v-show="saglist[i-1][0]==''"
|
:disabled="disabled" size="mini"
|
@click="acquisitionxy(i,0,'sag')">采集坐标</u-button>
|
</uni-tooltip>
|
</u-form-item>
|
<u-form-item :label="'弧垂' + (i) + '坐标B:'" borderBottom ref="item1"
|
:labelWidth="labelWidth">
|
<tn-input v-show="saglist[i-1][1]!=''" v-model="saglist[i-1][1]" inputAlign="right"
|
style="width:400rpx"></tn-input>
|
<uni-tooltip :content="content" placement="top" style="width:100px">
|
<u-button style="width:100px" type="primary" v-show="saglist[i-1][1]==''"
|
:disabled="disabled" size="mini"
|
@click="acquisitionxy(i,1,'sag')">采集坐标</u-button>
|
</uni-tooltip>
|
</u-form-item>
|
<u-form-item label="弧垂高:" borderBottom ref="item1" labelWidth="80px">
|
<u--input v-model="saglist[i-1][3]" border="none" placeholder="请输入弧垂高:"></u--input>
|
</u-form-item>
|
</view>
|
</view>
|
|
</view>
|
|
</u--form>
|
</view>
|
</u-modal>
|
<u-modal style="position: absolute;z-index: 99999999999999;" buttonReverse confirmText="保存围栏" cancelText="返回上一步"
|
:show="savefence" @cancel="cancelsave" @confirm="save" ref="uModal" :showCancelButton="true"
|
:closeOnClickOverlay="true">
|
<!-- <u-icon name="close" style="position: absolute;right: 10px;top:10px" @click="closemodal"></u-icon> -->
|
<u--form style="" labelPosition="left" :model="model" ref="uForm" :rules="rules2">
|
<u-form-item required label="围栏名称:" prop="name" borderBottom ref="item1" labelWidth="80px">
|
<u--input v-model="model.name" border="none" placeholder="请输入围栏名称"></u--input>
|
</u-form-item>
|
|
|
<u-form-item required label="围栏类型:" prop="type" borderBottom ref="item1" :labelWidth="labelWidth">
|
<tn-input v-model="model.type" type="select" @click="show1 = true" placeholder="请输入选择围栏类型" />
|
<tn-action-sheet :list="typeList" v-model="show1" @click="typeCallback"></tn-action-sheet>
|
</u-form-item>
|
<u-form-item required label="关联部门:" prop="department" borderBottom ref="item1" :labelWidth="labelWidth">
|
<tn-input v-model="model.department" type="select" @click="show2 = true" placeholder="请选择关联部门" />
|
<tn-action-sheet :list="bumenList" v-model="show2" @click="bymenCallback"></tn-action-sheet>
|
</u-form-item>
|
|
<u-form-item required label="围栏高度:" prop="height" borderBottom ref="item1" labelWidth="80px">
|
<u--input v-model="model.height" border="none" placeholder="请输入围栏高度"></u--input>m
|
</u-form-item>
|
|
<u-form-item required label="预警距离:" prop="distance" borderBottom ref="item1" labelWidth="80px">
|
<u--input v-model="model.distance" border="none" placeholder="请输入预警距离"></u--input>m
|
</u-form-item>
|
<!-- <u-form-item required label="预警语音:" prop="nowarnmes" borderBottom ref="item1" labelWidth="80px">
|
<u--input v-model="model.nowarnmes" border="none" placeholder="请输入预警语音"></u--input>
|
</u-form-item>
|
<u-form-item required label="告警语音:" prop="warnmes" borderBottom ref="item1" labelWidth="80px">
|
<u--input v-model="model.warnmes" border="none" placeholder="请输入告警语音"></u--input>
|
</u-form-item> -->
|
<u-form-item required label="电压等级:" prop="dianya" borderBottom ref="item1" labelWidth="80px">
|
<tn-input v-model="model.juli" type="select" @click="show4 = true" placeholder="请选择电压等级" />
|
<tn-action-sheet :list="rangeLevel" v-model="show4" @click="changeRangeLevel"></tn-action-sheet>
|
<!-- <uni-data-select v-model="model.dianya" :localdata="rangeLevel"
|
@change="changeRangeLevel"></uni-data-select> -->
|
<!-- <u--input v-model="model.dianya" border="none" placeholder="请输入电压等级"></u--input> -->
|
</u-form-item>
|
<u-form-item required label="安全距离:" prop="dianya" borderBottom ref="item1" labelWidth="80px">
|
<u--input v-model="model.dianya" border="none" placeholder="请输入安全距离"></u--input>m
|
</u-form-item>
|
<u-form-item label="是否启用:" borderBottom ref="item1" labelWidth="80px">
|
<!-- <u--input v-model="model.name" border="none" placeholder="请输入围栏名称"></u--input> -->
|
<u-switch v-model="isplay" @change="isopen"></u-switch>
|
</u-form-item>
|
<u-form-item v-if="model.fencetype == '变电作业'" label="地面校准:" borderBottom ref="item1">
|
<span style="color:red">将标签放在地面，点击获取围栏地面高度</span>
|
</u-form-item>
|
<u-form-item v-if="model.fencetype == '变电作业'" label="地面高度:" borderBottom ref="item1" labelWidth="80px">
|
<tn-input v-show="model.fenceFloorHe!='-1'" v-model="model.fenceFloorHe"
|
inputAlign="right"></tn-input>
|
<!-- <uni-tooltip :content="content" placement="top" style="width:100px"> -->
|
<u-button style="width:100px" type="primary" v-show="model.fenceFloorHe=='-1'" size="mini"
|
@click="fenceHe()">已经放好</u-button>
|
<!-- <tn-button disabled v-show="zuobiaolist[i-1][1]==''" backgroundColor="#55aaff" fontColor="#ffffff"
|
size="small" @click="acquisitionxy(i,1)">采集坐标</tn-button> -->
|
<!-- </uni-tooltip> -->
|
</u-form-item>
|
</u--form>
|
</u-modal>
|
<!-- 连续绘制弹窗 -->
|
<u-modal :show="ldrawshow" :title="ldrawtitle" :content='ldrawcontent' confirmText="开始绘制" cancelText="返回上一步"
|
:showCancelButton="true" @cancel="ldrawcancel" @confirm="ldrawconfirm" buttonReverse></u-modal>
|
|
<!-- <tn-popup v-model="lockguiji" :mask="false" mode="bottom" closeBtn :maskCloseable="false"> -->
|
|
<u-button v-show="end" style="position: absolute;z-index: 99999999999999;bottom:15%;width:50%;left:25%"
|
type="primary" shape="circle" text="结束绘制" @click="endsave()"></u-button>
|
<!-- 打点绘制弹窗 pointdrawshow-->
|
<u-modal style="position: absolute;z-index: 99999999999999;" buttonReverse confirmText="打点完成" cancelText="返回上一步"
|
:show="pointdrawshow" @cancel="cancelpoint" @confirm="savepoint" ref="uModal" :showCancelButton="true"
|
:closeOnClickOverlay="true">
|
<view style="max-height: 300px; overflow-y: auto;">
|
<u--form style="" labelPosition="left" :model="model" :rules="rules2" ref="uForm">
|
<u-form-item label="新增点:" borderBottom ref="item1" labelWidth="80px">
|
<u-number-box v-model="pointnum" :min="4" @change="onchange"></u-number-box>
|
</u-form-item>
|
<view v-for="(item, index) in pointlist" :key="index">
|
<u-form-item :label="'点' + (index+1) + '坐标:'" borderBottom ref="item1" labelWidth="80px">
|
<tn-input v-show="pointlist[index]!=index" v-model="pointlist[index]"
|
style="width:400rpx"></tn-input>
|
<uni-tooltip :content="pointcontent" placement="top" style="width:100px">
|
<u-button style="width:100px" type="primary" v-if="pointlist[index]==index"
|
:disabled="pointdisabled" size="mini" @click="acquisitionxy(index)">采集坐标</u-button>
|
|
<u-button style="width:100px" type="primary" v-else-if="pointlist[index]==''"
|
:disabled="pointdisabled" size="mini" @click="acquisitionxy(index)">采集坐标</u-button>
|
</uni-tooltip>
|
</u-form-item>
|
</view>
|
</u--form>
|
|
</view>
|
<!-- <u-icon name="close" style="position: absolute;right: 10px;top:10px" @click="closemodal"></u-icon> -->
|
|
</u-modal>
|
|
<!-- </tn-popup> -->
|
<!-- <view v-show="lockguiji"
|
style=" position: absolute;z-index: 99999999999999;background-color: #cad1fd;bottom: 80px;width: 80%;left: 15%;">
|
<view style="display: flex;">
|
|
<span style="margin-right: 10px;">当前：{{dqnum}}</span>
|
<span style="margin-right: 10px;">{{plackTime}}</span>
|
</view>
|
<view style="display: flex;">
|
<span>速度：</span>
|
<uni-data-select style="width: 40%;" placeholder="选择速度" v-model="model.sudu" :localdata="range"
|
@change="change"></uni-data-select>
|
</view>
|
</view> -->
|
<div id="mars3dContainer" class="mars3d-container" :marsset='marsset' :change:marsset="mars3d.getmarsData"
|
:amapPoints='amapPoints' :change:amapPoints="mars3d.getData" :threeortwo='threeortwo'
|
:change:threeortwo="mars3d.get3wei" :amapPointData='amapPointData'
|
:change:amapPointData="mars3d.getPointData" :amapldrawData='amapldrawData'
|
:change:amapldrawData="mars3d.getDrwaData" :amapFencePoints='amapFencePoints'
|
:change:amapFencePoints="mars3d.getFenceData" :amapdeFencePoints='amapdeFencePoints'
|
:change:amapdeFencePoints="mars3d.getFenceDatade" :amapGPSPoints='amapGPSPoints'
|
:change:amapGPSPoints="mars3d.getgpsData" :point='point' :change:point="mars3d.getmarsPoint"
|
:fenceposition='fenceposition' :change:fenceposition="mars3d.getmarsfencePoint"></div>
|
<!-- #endif -->
|
<!-- #ifndef APP-PLUS || H5 -->
|
<!-- #endif -->
|
<successCom ref="refSuccess" style="position: absolute;z-index: 9999999999999999;"></successCom>
|
</view>
|
</template>
|
<script>
|
import successCom from '@/components/success.vue'
|
import {
|
findtagid,
|
findWarnmes,
|
submitper,
|
findbumen,
|
acquisition,
|
findtagIdPerson,
|
findBaiDuGuiJi,
|
findAllFence,
|
getBaseGPSCesium,
|
findPerson,
|
MarsHome,
|
getGPSCesium,
|
getGPS
|
} from '@/config/api.js';
|
|
// 逻辑层
|
export default {
|
components: {
|
successCom
|
},
|
data() {
|
return {
|
warnlist: [],
|
warnidlist: [],
|
warnidslist: [],
|
labelWidth: 100,
|
pointlock: false, //踩点获取数据开关
|
pointcontent: '',
|
pointdisabled: false,
|
pointlist: [0, 1, 2, 3],
|
pointnum: 4,
|
pointdrawshow: false,
|
end: false,
|
ldrawshow: false,
|
ldrawtitle: '操作提示:',
|
ldrawcontent: '请手持终端，等待RTK绿色后行走为一个闭合围栏。准备完毕后点击开始绘制，完成后点击结束绘制',
|
|
isperties: true,
|
drawway: '打点绘制',
|
content: '请先输入终端编号',
|
disabled: true,
|
savefence: false,
|
bumenList: [],
|
show1: false,
|
show2: false,
|
typeList: [{
|
text: '保护区'
|
},
|
{
|
text: '禁入区'
|
},
|
{
|
text: '工作区'
|
},
|
{
|
text: '安全区'
|
},
|
],
|
warnmesList: [{
|
text: '出去告警'
|
},
|
{
|
text: '进入告警'
|
},
|
{
|
text: '工作区'
|
},
|
{
|
text: '安全区'
|
},
|
],
|
list: [
|
[
|
0, 1
|
],
|
[
|
2, 3
|
],
|
[
|
4, 5
|
]
|
],
|
|
zuobiaolist: [
|
[
|
'', '', '', ''
|
],
|
// height1:'',
|
[
|
'', '', '', ''
|
],
|
[
|
'', '', '', ''
|
],
|
// height1:'',
|
[
|
'', '', '', ''
|
],
|
// height3:'',
|
],
|
saglist: [
|
[
|
'', '', '', ''
|
],
|
[
|
'', '', '', ''
|
],
|
[
|
'', '', '', ''
|
],
|
|
// height3:'',
|
],
|
// list: [
|
// [
|
// 0, 1
|
// ],
|
// [
|
// 2, 3
|
// ],
|
// [
|
// 4, 5
|
// ]
|
// ],
|
|
// zuobiaolist: [
|
// [
|
// '1A', '1B', '1','11'
|
// ],
|
// // height1:'',
|
// [
|
// '2A', '2B', '2','22'
|
// ],
|
// [
|
// '3A', '3B', '3','33'
|
// ],
|
// // height1:'',
|
// [
|
// '4A', '4B', '4','44'
|
// ],
|
// // height3:'',
|
// ],
|
// saglist: [
|
// [
|
// 'H5A', 'H5B', '5','55'
|
// ],
|
// [
|
// 'H6A', 'H6B', '6','66'
|
// ],
|
// [
|
// 'H7A', 'H7B', '7','77'
|
// ],
|
|
// // height3:'',
|
// ],
|
tanum: 2,
|
color1: '#e2e2e2',
|
color2: '#8b8b8b',
|
color5: '#8b8b8b',
|
color10: '#8b8b8b',
|
color20: '#8b8b8b',
|
color50: '#8b8b8b',
|
color100: '#8b8b8b',
|
sudu: 'x1',
|
plackTime: '',
|
dqnum: '',
|
lockguiji: false,
|
shownotify: true,
|
cancelText: '暂停',
|
isRunning: true,
|
plackControl: '',
|
countNum: 0,
|
LocusData: '',
|
// isPlack: false,
|
value: '',
|
startdatetime: '',
|
stopdatetime: '',
|
rangeLevel: [{
|
value: '0.95m',
|
text: '10kV(0.95m)'
|
}, {
|
value: '1.05m',
|
text: '20kV(1.05m)'
|
}, {
|
value: '1.15m',
|
text: '35kV(1.15m)'
|
}, {
|
value: '1.4m',
|
text: '66kV(1.4m)'
|
}, {
|
value: '1.65m',
|
text: '110kV(1.65m)'
|
}, {
|
value: '2.55m',
|
text: '220kV(2.55m)'
|
}, {
|
value: '3.25m',
|
text: '330kV(3.25m)'
|
}, {
|
value: '4.66m',
|
text: '500kV(4.55m)'
|
}, {
|
value: '6.70m',
|
text: '750kV(6.70m)'
|
}, {
|
value: '8.25m',
|
text: '1000kV(8.25m)'
|
}],
|
rules2: {
|
|
'name': {
|
type: 'string',
|
// max: 1,
|
required: true,
|
message: '请填写围栏名称',
|
trigger: ['blur', 'change']
|
},
|
'code': {
|
type: 'string',
|
// max: 1,
|
required: true,
|
message: '请填写终端编号',
|
trigger: ['blur', 'change']
|
},
|
|
'type': {
|
type: 'string',
|
// max: 1,
|
required: true,
|
message: '请选择围栏类型',
|
trigger: ['blur', 'change']
|
},
|
'department': {
|
type: 'string',
|
// max: 1,
|
required: true,
|
message: '请选择关联部门',
|
trigger: ['blur', 'change']
|
},
|
'distance': {
|
type: 'string',
|
// max: 1,
|
required: true,
|
message: '请填写预警距离',
|
trigger: ['blur', 'change']
|
},
|
'nowarnmes': {
|
type: 'string',
|
// max: 1,
|
required: true,
|
message: '请填写预警语音',
|
trigger: ['blur', 'change']
|
},
|
'warnmes': {
|
type: 'string',
|
// max: 1,
|
required: true,
|
message: '请填写告警语音',
|
trigger: ['blur', 'change']
|
},
|
'dianya': {
|
type: 'string',
|
// max: 1,
|
required: true,
|
message: '请填写电压等级',
|
trigger: ['blur', 'change']
|
},
|
|
},
|
radiolist2: [{
|
name: '打点绘制',
|
disabled: true
|
},
|
{
|
name: '连续绘制',
|
disabled: false
|
// },
|
// {
|
// name: '5小时',
|
// disabled: false
|
}
|
],
|
radiolist1: [{
|
name: '输电作业',
|
disabled: false
|
},
|
{
|
name: '变电作业',
|
disabled: true
|
// },
|
// {
|
// name: '5小时',
|
// disabled: false
|
}
|
],
|
boStart: 0,
|
// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
|
radiovalue1: '',
|
code: '',
|
isplay: false,
|
digao: '',
|
latlon: '',
|
model: {
|
points: '',
|
fenceFloorHe: '-1', //围栏底高
|
height: '', //围栏高
|
lineHeight: '-1', //导线高
|
company: this.company,
|
perCompany: '',
|
addperson: this.username,
|
// // userInfo: {
|
name: '',
|
juli: '',
|
type: '',
|
department: '',
|
distance: '0',
|
dianya: '',
|
// fencetype:'',//围栏性质
|
isplay: '0',
|
nowarnmes: '',
|
warnmes: '',
|
fencetype: '变电作业',
|
// },
|
},
|
drawshow: false,
|
checked: false,
|
guijishow: false,
|
show: false,
|
amapsuduPoints: 0,
|
amapendGuijiPoints: '',
|
amapGuijiPoints: [],
|
amapFencePoints: [],
|
amapdeFencePoints: {},
|
keyword: '',
|
topheight: 55,
|
threeortwo: [],
|
amapPoints: [], // 这就是我们需要向视图层传递的数据
|
amapPointData: [], // 这就是我们需要向视图层传递的数据
|
amapldrawData: [],
|
amapGPSPoints: [],
|
marsset: {},
|
point: {},
|
drawlist: [],
|
longitude: '',
|
latitude: '',
|
show4: false,
|
showtagid: false,
|
tagidlist: [],
|
tagonlie: '',
|
skeletonHeight: '',
|
buttonTop: 0, // 按钮的 top 位置
|
buttonLeft: 0 // 按钮的 left 位置
|
}
|
|
},
|
props: {
|
fenceposition: {
|
type: String,
|
// default: 60
|
},
|
|
},
|
mounted() {
|
console.log(this.fenceposition);
|
|
this.getLocation();
|
this.warnidslist = []
|
this.warnidlist = []
|
this.warnlist = []
|
this.findtagidall();
|
this.findbumenall();
|
this.initMap();
|
// this.updateButtonPosition(); // 初始化按钮位置
|
// window.addEventListener('resize', this.updateButtonPosition); // 监听窗口大小变化
|
this.$nextTick(() => {
|
// 获取系统信息
|
const systemInfo = uni.getSystemInfoSync()
|
this.skeletonHeight = systemInfo.safeArea.height
|
this.buttonTop = this.skeletonHeight - 224;
|
|
this.buttonLeft = 15;
|
// this.webHeight = this.skeletonHeight - this.tabBarHeight
|
|
// this.vuex_status_bar_height = this.webHeight
|
// this.currentIndex = 2
|
})
|
this.threeortwo.push(this.is3wei)
|
// this.amapPoints = []
|
// this.amapBasePoints = []
|
// this.amapFencePoints = []
|
|
// this.amapGuijiPoints = []
|
// this.amapendGuijiPoints = ''
|
this.topheight = this.vuex_custom_bar_height + 15
|
|
|
|
|
},
|
methods: {
|
// updateButtonPosition() {
|
// const windowHeight = window.innerHeight;
|
// console.log(windowHeight);
|
// const windowWidth = window.innerWidth;
|
// this.buttonTop = windowHeight-279 ;
|
// this.buttonLeft = 15;
|
// console.log(this.buttonTop);
|
// },
|
findtagidall() {
|
if (this.vuex_is_login) {
|
const params = {
|
company: this.company,
|
juese: uni.getStorageSync('juese'),
|
}
|
findtagid(params).then((res) => {
|
console.log(res);
|
if (res.code == 0) {
|
this.tagidlist = res.data.map(item => ({
|
value: item.online,
|
label: item.tagid
|
}));
|
} else {
|
this.$refs.refSuccess.showBox({
|
type: 'error',
|
txt: res.msg
|
});
|
}
|
})
|
}
|
|
},
|
confirmtagid(e) {
|
this.code = e[0].label
|
// this.tagonlie = e[0].value
|
this.seachcode()
|
|
},
|
changeRangeLevel(e) {
|
console.log(e);
|
// console.log(this.model.juli);
|
this.model.juli = this.rangeLevel[e].text;
|
// if (this.model.juli != '') {
|
this.model.dianya = this.rangeLevel[e].value.split("m")[0]
|
// }
|
// this.dianya = e;
|
// this.model.dianya = e.split("m")[0];
|
},
|
getLocation() {
|
uni.getLocation({
|
type: 'wgs84',
|
success: function(res) {
|
console.log('当前位置的经度：' + res.longitude);
|
console.log('当前位置的纬度：' + res.latitude);
|
|
}
|
});
|
},
|
|
onchange(e) {
|
var list = []
|
if (this.pointlist.length < e.value) {
|
for (var i = this.pointlist.length; i < e.value; i++) {
|
|
list.push(i)
|
this.pointlist.push(i)
|
// e[i]
|
}
|
} else {
|
this.pointlist.splice(e.value, this.pointlist.length - e.value)
|
}
|
},
|
radioChange(n) {
|
|
if (n == '变电作业') {
|
this.isperties = true
|
} else {
|
this.isperties = false
|
|
}
|
},
|
seachcode(e) {
|
this.drawlist = []
|
const params = {
|
id: this.code,
|
company: this.company,
|
juese: uni.getStorageSync('juese'),
|
}
|
findtagIdPerson(params).then((res) => {
|
if (res.data != null) {
|
this.tagonlie = res.data.online
|
if (res.data.gpsstatus == '4') {
|
this.disabled = false
|
this.content = ''
|
this.pointcontent = ''
|
this.digao = res.data.height
|
// this.end = true
|
if (this.end == true) {
|
this.model.points += res.data.lat + ":" + res.data.lon + ";"
|
|
this.drawlist.push(res.data.lat)
|
this.drawlist.push(res.data.lon)
|
this.amapldrawData.push(this.drawlist)
|
}
|
// if (this.pointlock == true) {
|
// this.amapPointData.push(res.data)
|
|
// this.pointlock = false
|
// }
|
|
} else {
|
this.content = '设备非高精'
|
this.disabled = true
|
this.pointcontent = '设备非高精'
|
}
|
} else {
|
this.disabled = true
|
this.content = '未搜索到设备'
|
this.pointcontent = '未搜索到设备'
|
}
|
})
|
setTimeout(() => {
|
// //5秒播放一次
|
this.seachcode()
|
}, 1000);
|
|
},
|
isopen(e) {
|
if (e == true) {
|
this.model.isplay = '1'
|
} else {
|
this.model.isplay = '0'
|
}
|
},
|
findbumenall() {
|
if (this.vuex_is_login) {
|
const params = {
|
company: this.company,
|
juese: uni.getStorageSync('juese'),
|
}
|
findbumen(params).then((res) => {
|
console.log(res);
|
if (res.code == 0) {
|
this.bumenList = res.data.map(item => ({
|
value: item.name,
|
text: item.name
|
}));
|
} else {
|
this.$refs.refSuccess.showBox({
|
type: 'error',
|
txt: res.msg
|
});
|
}
|
})
|
}
|
|
},
|
typeCallback(index) {
|
const params = {
|
type: this.typeList[index].text,
|
}
|
findWarnmes(params).then((res) => {
|
if (res.code == 0) {
|
// nowarnmes: '靠近危险请注意',
|
// warnmes: '进入危险区域请注意',
|
// if (res.data.type == "工作区") {
|
// this.model.nowarnmes = res.data.nowarnmes + ";" + res.data.nowarnmestype
|
// this.model.warnmes = res.data.warnmes + ";" + res.data.warnmestype
|
// } else {
|
this.model.nowarnmes = res.data.nowarnmes
|
this.model.warnmes = res.data.warnmes
|
// }
|
} else {
|
|
}
|
})
|
this.model.type = this.typeList[index].text;
|
},
|
bymenCallback(index) {
|
this.model.department = this.bumenList[index].text;
|
|
},
|
acquisitionxy(index, i, name) {
|
const params = {
|
baoliu3: this.code,
|
company: this.company,
|
juese: uni.getStorageSync('juese'),
|
}
|
console.log(params);
|
if (this.vuex_is_login) {
|
acquisition(params).then((res) => {
|
console.log(res);
|
if (res.code == 0) {
|
if (this.model.fencetype == '变电作业') {
|
// this.model.points += res.data.lat + ":" + res.data.lon + ";"
|
this.pointlist.splice(index, 1, res.data.lat + ":" + res.data.lon);
|
console.log(this.pointlist);
|
this.amapPointData.splice(index, 1, res.data);
|
// this.amapPointData.push(res.data)
|
// this.amapPointData = this.pointlist
|
this.pointlock = true
|
} else {
|
console.log(name);
|
if (name == 'zb') {
|
console.log(index);
|
console.log(i);
|
this.zuobiaolist[index - 1][i] = res.data.lat + ":" + res.data.lon + ";"
|
this.zuobiaolist[index - 1][2] = res.data.height
|
this.amapPointData.splice(index + i, 1, res.data);
|
} else {
|
this.saglist[index - 1][i] = res.data.lat + ":" + res.data.lon + ";"
|
this.saglist[index - 1][2] = res.data.height
|
|
}
|
|
}
|
} else {
|
this.$refs.refSuccess.showBox({
|
type: 'error',
|
txt: res.msg
|
});
|
}
|
})
|
}
|
|
},
|
|
valChange(e) {
|
console.log('当前值为: ' + e.value)
|
},
|
initlock() {
|
this.fetchPersonsList();
|
this.fetchFenceList();
|
|
},
|
closemodal() {
|
this.drawshow = false
|
},
|
cancelmodal() {
|
this.drawshow = false
|
},
|
cancelsave() {
|
this.savefence = false
|
this.drawshow = true
|
},
|
save() {
|
this.model.company = this.company
|
this.model.addperson = this.vuex_user
|
this.model.perCompany = this.company
|
|
|
if (this.model.fencetype == '输电作业') {
|
this.model.points = this.zuobiaolist
|
var hei = ''
|
let num = this.tanum - 1
|
let result = '';
|
//根据塔数循环查询塔和弧垂的坐标A数据，根据第一条塔，第二条弧垂把数据拼接起来
|
for (let i = 0; i < this.tanum; i++) {
|
result += this.zuobiaolist[i][0];
|
if (i < num) {
|
result += this.saglist[i][0];
|
}
|
|
hei += this.zuobiaolist[i][2] + ":" + this.zuobiaolist[i][3] + ';';
|
if (i < num) {
|
hei += this.saglist[i][2] + ":" + this.saglist[i][3] + ';';
|
}
|
|
// hei += this.zuobiaolist[i][3];
|
// if (i < num) {
|
// hei += this.saglist[i][3];
|
// }
|
}
|
//从最后一条查询点位B第一条塔，第二条弧垂拼接，最后把两组数据拼接起来
|
for (let i = this.tanum - 1; i >= 0; i--) {
|
result += this.zuobiaolist[i][1];
|
if (i >= 1) {
|
result += this.saglist[i - 1][1];
|
}
|
|
// hei += this.zuobiaolist[i][2];
|
// if (i >= 1) {
|
// hei += this.saglist[i - 1][2];
|
// }
|
|
hei += this.zuobiaolist[i][2] + ":" + this.zuobiaolist[i][3] + ';';
|
if (i >= 1) {
|
hei += this.saglist[i - 1][2] + ":" + this.saglist[i - 1][3] + ';';
|
}
|
}
|
console.log(result);
|
console.log(hei);
|
this.model.points = result
|
this.model.lineHeight = hei
|
} else {
|
let result = '';
|
for (var i = 0; i < this.pointlist.length; i++) {
|
result += this.pointlist[i] + ";"
|
}
|
this.model.points = result
|
}
|
|
this.$refs.uForm.validate().then(res => {
|
uni.$u.toast('校验通过')
|
submitper(this.model).then((res) => {
|
if (res.code == 0) {
|
this.$refs.refSuccess.showBox({
|
type: 'success',
|
txt: "保存成功"
|
});
|
|
this.savefence = false
|
this.amapldrawData = []
|
this.amapPointData = []
|
} else {
|
this.$refs.refSuccess.showBox({
|
type: 'error',
|
txt: res.data
|
});
|
}
|
})
|
// this.savefence = false
|
}).catch(errors => {
|
// uni.$u.toast('校验失败')
|
})
|
// this.savefence = false
|
},
|
|
|
formatDate(date) {
|
const year = date.getFullYear();
|
const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从 0 开始
|
const day = String(date.getDate()).padStart(2, '0');
|
const hours = String(date.getHours()).padStart(2, '0');
|
const minutes = String(date.getMinutes()).padStart(2, '0');
|
const seconds = String(date.getSeconds()).padStart(2, '0');
|
|
return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
|
},
|
|
startdraw() {
|
if (this.code == '') {
|
this.$refs.refSuccess.showBox({
|
type: 'error',
|
txt: '请输入终端编号'
|
});
|
} else {
|
//选择变电作业
|
if (this.isperties == false) {
|
for (var i = 0; i < this.tanum; i++) {
|
if (this.zuobiaolist[i][0] == '' && this.zuobiaolist[i][1] == '') {
|
// lock = true
|
this.$refs.refSuccess.showBox({
|
type: 'error',
|
txt: '请先打点'
|
});
|
} else if (this.zuobiaolist[i][2] == '') {
|
this.$refs.refSuccess.showBox({
|
type: 'error',
|
txt: '请输入导线高'
|
});
|
// lock = false
|
} else {
|
this.drawshow = false
|
this.savefence = true
|
}
|
}
|
} else {
|
if (this.drawway == "连续绘制") {
|
this.drawshow = false
|
this.ldrawshow = true
|
} else {
|
this.drawshow = false
|
this.pointdrawshow = true
|
}
|
}
|
}
|
|
|
|
|
},
|
cancelpoint() {
|
this.drawshow = true
|
this.pointdrawshow = false
|
},
|
savepoint() {
|
this.pointdrawshow = false
|
this.savefence = true
|
},
|
fenceHe() {
|
//获取围栏底高
|
this.model.fenceFloorHe = this.digao
|
},
|
endsave() {
|
this.end = false
|
this.savefence = true
|
},
|
ldrawcancel() {
|
this.drawshow = true
|
this.ldrawshow = false
|
},
|
|
ldrawconfirm() {
|
|
this.ldrawshow = false
|
this.end = true
|
// this.model.points += this.latlon
|
},
|
change(e) {
|
this.amapsuduPoints = e
|
},
|
draw() {
|
|
if (this.vuex_is_login == true) {
|
this.drawshow = true
|
this.savefence = false
|
}
|
},
|
zoom() {
|
this.show = !this.show
|
},
|
receiveRenderData(val) {
|
this.fetchPersonsList();
|
this.updateTrajectories();
|
this.fetchFenceList();
|
},
|
searchxinxi() {
|
const params = {
|
name: this.keyword,
|
company: this.company,
|
}
|
if (this.vuex_is_login) {
|
findPerson(params).then((res) => {
|
if (res.code == 0) {
|
var targetPoint = {}
|
targetPoint.lat = res.data.lon
|
targetPoint.lon = res.data.lat
|
this.point = targetPoint
|
} else {
|
this.$refs.refSuccess.showBox({
|
type: 'error',
|
txt: res.msg
|
});
|
}
|
})
|
}
|
},
|
handleMapClick(e) {
|
this.$emit('mars3dc', e)
|
},
|
|
guijiClick(e) {
|
this.dqnum = e.dqnum
|
this.plackTime = e.plackTime
|
},
|
initMap() {
|
// if (this.vuex_is_login) {
|
MarsHome().then((rep) => {
|
|
// uni.getLocation({
|
// type: 'wgs84',
|
// success: function(res) {
|
// console.log('当前位置的经度：' + res.longitude);
|
// console.log('当前位置的纬度：' + res.latitude);
|
if (this.lonlat != '') {
|
rep.data[0].mapposition = this.lonlat
|
}
|
// }
|
// });
|
this.marsset = rep.data[0]
|
})
|
// }
|
},
|
fetchFenceList() {
|
const params = {
|
company: this.company,
|
juese: uni.getStorageSync('juese'),
|
}
|
if (this.vuex_is_login) {
|
if (uni.getStorageSync('isfence') == true) {
|
findAllFence(params).then((res) => {
|
if (res.data != null) {
|
const filteredData = res.data.filter(item => item.isplay === 0);
|
if (filteredData != null) {
|
this.amapdeFencePoints = filteredData
|
}
|
if (this.amapFencePoints.length > res.data.length) {
|
//当有围栏删除时调用地图把围栏全部删除
|
const missingData = this.amapFencePoints.filter(item1 => {
|
return !res.data.some(item2 => item2.id === item1.id);
|
});
|
this.amapdeFencePoints = missingData
|
|
}
|
this.amapFencePoints = res.data
|
}
|
})
|
} else {
|
this.amapFencePoints = []
|
}
|
}
|
setTimeout(() => {
|
//5秒播放一次
|
this.fetchFenceList();
|
}, 5000);
|
},
|
|
fetchPersonsList() {
|
this.amapPoints = []
|
const params = {
|
company: this.company,
|
juese: uni.getStorageSync('juese'),
|
}
|
if (this.vuex_is_login) {
|
getGPSCesium(params).then((res) => {
|
if (res.data != null) {
|
this.amapPoints = res.data
|
for (var i = 0; i < res.data.length; i++) {
|
// res.data[i].online==1
|
if (res.data[i].online == "1") {
|
console.log(this.zystate);
|
if (this.zystate == 'START') {
|
// if (res.data.filter(item => item.warnstatus == '1').length > 0) {
|
// if (this.warnidlist.indexOf(res.data[i].warnstatus=='1') < 0) {
|
// this.warnlist.push(res.data.filter(item => item.warnstatus == '1')[
|
// 0].tagid +
|
// "进入预警区域请注意")
|
// this.warnidlist.push(res.data.filter(item => item.warnstatus ==
|
// '1')[0].tagid)
|
// } else {
|
|
// this.warnlist.splice(this.warnidlist.indexOf(res.data.filter(
|
// item => item.warnstatus !=
|
// '1')[0]
|
// .tagid),
|
// 1)
|
// this.warnidlist.splice(this.warnidlist.indexOf(res.data.filter(item =>
|
// item.warnstatus !=
|
// '1')[0]
|
// .tagid),
|
// 1)
|
// }
|
// }
|
if (this.warnidlist.indexOf(res.data[i].tagid) < 0) {
|
if (res.data[i].warnstatus == '1') {
|
this.warnlist.push(res.data[i].tagid +
|
"进入预警区域请注意")
|
this.warnidlist.push(res.data[i].tagid)
|
} else if (res.data[i].baoliu2.split(";")[0] == 1) {
|
this.warnlist.push(res.data[i].tagid +
|
"进入禁入区请注意")
|
this.warnidlist.push(res.data[i].tagid)
|
} else if (res.data[i].baoliu2.split(";")[1] == 0) {
|
this.warnlist.push(res.data[i].tagid +
|
"超范围请注意")
|
this.warnidlist.push(res.data[i].tagid)
|
} else if (res.data[i].baoliu2.split(";")[2] == 1) {
|
this.warnlist.push(res.data[i].tagid +
|
"超高请注意")
|
this.warnidlist.push(res.data[i].tagid)
|
}
|
} else {
|
if (res.data[i].baoliu2.split(";")[0] == 1) {} else if (res.data[i]
|
.baoliu2
|
.split(";")[1] == 0) {} else if (res.data[i].baoliu2.split(";")[
|
2] ==
|
1) {} else if (res.data[i].warnstatus == '1') {} else {
|
this.warnlist.splice(this.warnidlist.indexOf(res.data[i].tagid),
|
1)
|
this.warnidlist.splice(this.warnidlist.indexOf(res.data[i].tagid),
|
1)
|
}
|
}
|
const filteredData = res.data.filter(item => {
|
return item.online === "1" && item.gpsstatus !== "4" && (
|
item
|
.baoliu1 ===
|
'手持标签' || item.baoliu1 === '车载标签');
|
});
|
// 将符合条件的数据的 tagid 添加到 this.warnidlist 中
|
filteredData.forEach(item => {
|
if (this.warnidslist.indexOf(item.tagid) < 0) {
|
this.warnlist.push(item.tagid + "设备非高精");
|
this.warnidslist.push(item.tagid)
|
}
|
});
|
} else {
|
this.warnlist = [];
|
this.warnidslist = []
|
}
|
} else {
|
|
}
|
}
|
|
|
}
|
|
})
|
}
|
|
setTimeout(() => {
|
//5秒播放一次
|
this.fetchPersonsList();
|
}, 5000);
|
},
|
|
updateTrajectories() {
|
const params = {
|
company: this.company,
|
juese: uni.getStorageSync('juese'),
|
}
|
if (this.vuex_is_login) {
|
getGPS(params).then((res) => {
|
if (res.data != null) {
|
this.amapGPSPoints = res.data
|
}
|
})
|
}
|
setTimeout(() => {
|
//5秒播放一次
|
this.updateTrajectories();
|
}, 1000);
|
},
|
}
|
}
|
</script>
|
<script module="mars3d" lang="renderjs">
|
let graphicLayer = null;
|
let graphicLayerFence = null;
|
let graphicLayerFenceBianJie = null;
|
let graphicLayerFencedrwa = null;
|
var creditHtml = ''
|
var map
|
let addedCarIds = new Set();
|
let addedBaseIds = new Set();
|
let addedFenceIds = new Set();
|
var LocusData;
|
var LocuData;
|
var countNum = 0;
|
var sudus = 1000;
|
let isRunning = true; // 标志变量，用于控制方法是否继续执行
|
var params;
|
var plackControl;
|
var timeoutId;
|
var isPlack = true;
|
var car;
|
var num = 0;
|
var globalMap = false;
|
import {
|
mapOptions
|
} from './config.js'
|
if (!String.prototype.replaceAll) {
|
String.prototype.replaceAll = function(str, newStr) {
|
// If a regex pattern
|
if (Object.prototype.toString.call(str).toLowerCase() === '[object regexp]') {
|
return this.replace(str, newStr);
|
}
|
// If a string
|
return this.replace(new RegExp(str, 'g'), newStr);
|
};
|
}
|
|
export default {
|
data() {
|
return {
|
fplock: false,
|
fenceplock: false,
|
plist: [],
|
cartesianPoints: [],
|
sudus: 0,
|
boStart: 0,
|
is2d: false,
|
dot: 123,
|
graphicLabels: {},
|
graphicLabelsids: {},
|
fenceid: '',
|
fenceids: '',
|
graphicids: [],
|
graphicFence: {},
|
labels: {},
|
list: {},
|
perlist: {},
|
}
|
},
|
props: {
|
homelat: {
|
type: Number,
|
},
|
homelng: {
|
type: Number,
|
},
|
},
|
mounted() {
|
addedCarIds = new Set();
|
graphicLayer = null
|
this.loadSource([
|
|
//用本地地址，并可以官网下载最新包，手动覆盖下，http://mars3d.cn/download.html
|
// "static/lib/Cesium/Widgets/widgets.css",
|
// "static/lib/Cesium/Cesium.js",
|
// "static/lib/mars3d/mars3d.css",
|
// "static/lib/mars3d/mars3d.js",
|
// "static/css/style.css",
|
|
// "http://123.56.113.213:8080/hxzkuwb/Home/demo/lib/Cesium/Widgets/widgets.css",
|
// "http://123.56.113.213:8080/hxzkuwb/Home/demo/lib/Cesium/Cesium.js",
|
// "http://123.56.113.213:8080/hxzkuwb/Home/demo/lib/mars3d/mars3d.css",
|
// "http://123.56.113.213:8080/hxzkuwb/Home/demo/lib/mars3d/mars3d.js",
|
// "http://123.56.113.213:8080/hxzkuwb/Home/js/3DMoXing.js",
|
"http://39.106.210.13:8888/hxzkuwb/view/Home/demo/lib/Cesium/Widgets/widgets.css",
|
"http://39.106.210.13:8888/hxzkuwb/view/Home/demo/lib/Cesium/Cesium.js",
|
"http://39.106.210.13:8888/hxzkuwb/view/Home/demo/lib/mars3d/mars3d.css",
|
"http://39.106.210.13:8888/hxzkuwb/view/Home/demo/lib/mars3d/mars3d.js",
|
|
// "http://123.117.152.120:8088/hxzkuwb/view/Home/demo/lib/Cesium/Widgets/widgets.css",
|
// "http://123.117.152.120:8088/hxzkuwb/view/Home/demo/lib/Cesium/Cesium.js",
|
// "http://123.117.152.120:8088/hxzkuwb/view/Home/demo/lib/mars3d/mars3d.css",
|
// "http://123.117.152.120:8088/hxzkuwb/view/Home/demo/lib/mars3d/mars3d.js",
|
//用在线地址
|
// "http://mars3d.cn/lib/Cesium/Widgets/widgets.css",
|
// "http://mars3d.cn/lib/Cesium/Cesium.js",
|
// "http://mars3d.cn/lib/mars3d/mars3d.css",
|
// "http://mars3d.cn/lib/mars3d/mars3d.js",
|
"static/css/style.css",
|
]).then(() => {
|
this.rewriteCesiumSources(Cesium);
|
// if (globalMap==false) {
|
this.createMap()
|
// }
|
|
})
|
},
|
methods: {
|
//创建地图
|
getTerrainProviderViewModelsArr() {
|
return [
|
new Cesium.ProviderViewModel({
|
name: "无地形",
|
tooltip: "WGS84标准球体",
|
iconUrl: "static/img/basemaps/TerrainEllipsoid.png",
|
creationFunction: function() {
|
return mars3d.LayerUtil.getNoTerrainProvider()
|
}
|
}),
|
new Cesium.ProviderViewModel({
|
name: "中国地形",
|
tooltip: "由 火星科技 提供的中国国内地形",
|
iconUrl: "static/img/basemaps/TerrainSTK.png",
|
creationFunction: function() {
|
return mars3d.LayerUtil.createTerrainProvider({
|
url: "http://data.mars3d.cn/terrain"
|
})
|
}
|
}),
|
new Cesium.ProviderViewModel({
|
name: "ArcGIS地形",
|
tooltip: "由 火星科技 提供的中国国内地形",
|
iconUrl: "static/img/basemaps/TerrainSTK.png",
|
creationFunction: function() {
|
return mars3d.LayerUtil.createTerrainProvider({
|
type: "arcgis",
|
url: "https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer"
|
})
|
}
|
}),
|
new Cesium.ProviderViewModel({
|
name: "全球地形",
|
tooltip: "由 Cesium官方 提供的高分辨率全球地形",
|
iconUrl: "static/img/basemaps/TerrainSTK.png",
|
creationFunction: function() {
|
return mars3d.LayerUtil.createTerrainProvider({
|
type: "ion",
|
requestWaterMask: true,
|
requestVertexNormals: true
|
})
|
}
|
})
|
]
|
},
|
getmarsData(newValue) {
|
this.list = newValue
|
},
|
get3wei(newValue) {
|
this.is2d = newValue[0]
|
|
},
|
//创建地图
|
createMap() {
|
if (Object.keys(this.list).length == 0) { //切换页面有时会因为getmarsData（）在createMap()之后执行，导致此方法没有原始定位数据报错
|
setTimeout(() => {
|
//5秒播放一次
|
this.createMap()
|
}, 100);
|
} else {
|
let mapPositionlat;
|
let mapPositionlng;
|
let mapPositionalt;
|
let mapPositionheading;
|
let mapPositionpitch;
|
mapPositionlat = this.list.mapposition.split(',')[1];
|
mapPositionlng = this.list.mapposition.split(',')[0];
|
mapPositionalt = this.list.alt;
|
mapPositionheading = this.list.heading;
|
mapPositionpitch = this.list.pitch;
|
const Cesium = mars3d.Cesium;
|
map = new mars3d.Map('mars3dContainer', {
|
scene: {
|
center: {
|
// lat: 38.443729,
|
// lng: 38.443729,
|
// alt: 200,
|
// heading: 0,
|
// pitch: 0,
|
|
lat: mapPositionlat,
|
lng: mapPositionlng,
|
alt: mapPositionalt,
|
heading: 0,
|
pitch: 0
|
},
|
// center: { lat: mapPosition[1], lng: mapPosition[0], alt: HomeSetting.alt, heading: HomeSetting.heading, pitch: HomeSetting.pitch },
|
showSkyAtmosphere: false, // 关闭球周边的白色轮廓 map.scene.skyAtmosphere = false
|
fog: true,
|
fxaa: true,
|
globe: {
|
showGroundAtmosphere: false, // 关闭大气（球表面白蒙蒙的效果）
|
depthTestAgainstTerrain: false,
|
baseColor: "#546a53"
|
},
|
// terrain: {
|
// url: "http://data.mars3d.cn/terrain",
|
// show: true
|
// },
|
cameraController: {
|
zoomFactor: 10.0,
|
touchZoomFactor: 10.0, // 触摸缩放灵敏度（与鼠标滚轮同步）
|
zoomAnimation: true, // 启用缩放动画
|
zoomAnimationTime: 0.3, // 动画持续时间（秒）,
|
minimumZoomDistance: 1,
|
maximumZoomDistance: 50000000,
|
enableRotate: true,
|
enableZoom: true,
|
enableContinuousZoom: true, // 启用惯性滚动（可选）
|
zoomAnimationTime: 0.1, // 动画时间（缩短可加快响应）
|
},
|
mapProjection: mars3d.CRS.EPSG3857, // 2D下展示墨卡托投影
|
mapMode2D: Cesium.MapMode2D.INFINITE_SCROLL, // 2D下左右一直可以滚动重复世界地图
|
skyBox: {
|
sources: {
|
positiveX: "static/img/skybox_near/qingtian/rightav9.jpg",
|
negativeX: "static/img/skybox_near/qingtian/leftav9.jpg",
|
positiveY: "static/img/skybox_near/qingtian/frontav9.jpg",
|
negativeY: "static/img/skybox_near/qingtian/backav9.jpg",
|
positiveZ: "static/img/skybox_near/qingtian/topav9.jpg",
|
negativeZ: "static/img/skybox_near/qingtian/bottomav9.jpg"
|
},
|
sources2: {
|
positiveX: "static/img/skybox_near/wanxia/SunSetRight.png",
|
negativeX: "static/img/skybox_near/wanxia/SunSetLeft.png",
|
positiveY: "static/img/skybox_near/wanxia/SunSetFront.png",
|
negativeY: "static/img/skybox_near/wanxia/SunSetBack.png",
|
positiveZ: "static/img/skybox_near/wanxia/SunSetUp.png",
|
negativeZ: "static/img/skybox_near/wanxia/SunSetDown.png"
|
},
|
sources3: {
|
negativeX: "static/img/skybox/2/tycho2t3_80_mx.jpg",
|
negativeY: "static/img/skybox/2/tycho2t3_80_my.jpg",
|
negativeZ: "static/img/skybox/2/tycho2t3_80_mz.jpg",
|
positiveX: "static/img/skybox/2/tycho2t3_80_px.jpg",
|
positiveY: "static/img/skybox/2/tycho2t3_80_py.jpg",
|
positiveZ: "static/img/skybox/2/tycho2t3_80_pz.jpg"
|
}
|
},
|
// sceneMode: this.is2d // 设置初始场景模式为2D
|
},
|
terrain: false, // 关闭地形空间
|
// terrain: {
|
// url: "http://data.mars3d.cn/terrain",
|
// show: true
|
// },
|
control: {
|
// geocoder:true,
|
mouseDownView: true,
|
clockAnimate: false,
|
timeline: false,
|
compass: false,
|
navigationHelpButton: false,
|
fullscreenButton: false,
|
homeButton: true,
|
locationBar: false,
|
zoom: true,
|
sceneModePicker: false,
|
baseLayerPicker: true, // 是否显示图层选择控件
|
terrainProviderViewModels: this
|
.getTerrainProviderViewModelsArr() // 自baseLayerPicker面板的地形可选数组
|
},
|
|
basemaps: [{
|
// name: "天地图影像",
|
// icon: "static/img/basemaps/tdt_img.png",
|
// type: "tdt",
|
// layer: "img_d",
|
// key: mars3d.Token.tiandituArr,
|
// show: false, // 关闭天地图影像
|
// credit: creditHtml
|
// },
|
// {
|
// name: "天地图电子",
|
// icon: "static/img/basemaps/tdt_vec.png",
|
// type: "group",
|
// layers: [{
|
// name: "底图",
|
// type: "tdt",
|
// layer: "vec_d",
|
// key: mars3d.Token.tiandituArr
|
// },
|
// {
|
// name: "注记",
|
// type: "tdt",
|
// layer: "vec_z",
|
// key: mars3d.Token.tiandituArr
|
// }
|
// ],
|
// show: false, // 关闭天地图电子
|
// credit: creditHtml
|
// },
|
// {
|
name: "高德影像",
|
icon: "static/img/basemaps/gaode_img.png",
|
type: "group",
|
layers: [{
|
name: "底图",
|
type: "gaode",
|
layer: "img_d"
|
},
|
{
|
name: "注记",
|
type: "gaode",
|
layer: "img_z"
|
}
|
],
|
show: false, // 关闭高德影像
|
credit: creditHtml
|
},
|
{
|
name: "高德电子",
|
icon: "static/img/basemaps/gaode_vec.png",
|
type: "gaode",
|
layer: "vec",
|
show: true, // 默认显示高德电子地图
|
credit: creditHtml
|
},
|
{
|
name: "百度影像",
|
icon: "static/img/basemaps/gaode_img.png",
|
type: "group",
|
layers: [{
|
name: "底图",
|
type: "baidu",
|
layer: "img_d"
|
},
|
{
|
name: "注记",
|
type: "baidu",
|
layer: "img_z"
|
}
|
],
|
show: false, // 关闭百度影像
|
credit: creditHtml
|
},
|
{
|
name: "百度电子",
|
icon: "static/img/basemaps/gaode_vec.png",
|
type: "baidu",
|
layer: "vec",
|
show: false, // 关闭百度电子
|
credit: creditHtml
|
},
|
{
|
// name: "谷歌影像",
|
// icon: "static/img/basemaps/google_img.png",
|
// type: "google",
|
// layer: "img_d",
|
// chinaCRS: mars3d.ChinaCRS.GCJ02,
|
// show: false // 关闭谷歌影像
|
// },
|
// {
|
// name: "谷歌电子",
|
// icon: "static/img/basemaps/google_vec.png",
|
// type: "google",
|
// layer: "vec",
|
// chinaCRS: mars3d.ChinaCRS.GCJ02,
|
// show: false // 关闭谷歌电子
|
// },
|
// {
|
name: "ArcGIS影像",
|
icon: "static/img/basemaps/esriWorldImagery.png",
|
type: "arcgis",
|
layer: "img_d",
|
enablePickFeatures: false,
|
show: false // 关闭 ArcGIS 影像
|
}
|
]
|
});
|
// const toolbar = new mars3d.control.geocoder({
|
// position: { top: "10px", left: "10px" }, // 按钮位置
|
// items: [
|
// {
|
// type: "button",
|
// text: "搜索",
|
// icon: "fa fa-search", // 使用 Font Awesome 图标
|
// action: () => {
|
// // this.$refs.searchBox.show(); // 调用搜索框的显示方法
|
// }
|
// }
|
// ]
|
// });
|
// map.addControl(toolbar);
|
|
if (this.is2d == true) {
|
map.scene.morphTo3D(0);
|
} else {
|
map.scene.morphTo2D(0);
|
}
|
// 创建矢量数据图层
|
graphicLayer = new mars3d.layer.GraphicLayer({
|
allowDrillPick: true // 如果存在坐标完全相同的图标点，可以打开该属性，click事件通过graphics判断
|
})
|
graphicLayerFencedrwa = new mars3d.layer.GraphicLayer()
|
map.addLayer(graphicLayerFencedrwa)
|
graphicLayerFenceBianJie = new mars3d.layer.GraphicLayer()
|
map.addLayer(graphicLayerFenceBianJie)
|
graphicLayerFence = new mars3d.layer.GraphicLayer()
|
map.addLayer(graphicLayerFence)
|
|
|
|
|
map.addLayer(graphicLayer)
|
// 绑定点击事件
|
graphicLayer.on(mars3d.EventType.click, (event, position) => {
|
var car = event.graphic
|
// var list = []
|
var json = {}
|
|
// var message = "姓名: " + name + "<br>编号: " + number;
|
// // 使用Mars3D的提示框组件显示信息
|
// this.graphicLayer.bindPopup(new mars3d.Tooltip({
|
// content: message,
|
// position: position, // 指定提示框的位置为点击的位置
|
// className: "custom-tooltip", // 可以添加自定义样式类
|
// closeButton: true, // 是否显示关闭按钮
|
// }));
|
// 打开提示框
|
// this.graphicLayer.openPopup();
|
|
json.online = car.attr.online
|
json.baoliu1 = car.attr.baoliu1
|
json.type = car.attr.type
|
json.rtcm = car.attr.rtcm
|
json.tagid = car.attr.tagid
|
json.encryption = car.attr.encryption
|
json.personname = car.attr.personname
|
json.power = car.attr.power
|
json.height = car.attr.height
|
json.department = car.attr.department
|
json.gpsstatus = car.attr.gpsstatus
|
this.perlist = json
|
this.$ownerInstance.callMethod('handleMapClick', this.perlist);
|
|
|
})
|
|
//测试本地图片
|
// const graphic = new mars3d.graphic.BillboardEntity({
|
// position: [117.229619, 31.686288, 1000],
|
// style: {
|
// image: "static/img/mark-red.png",
|
// horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
// verticalOrigin: Cesium.VerticalOrigin.BOTTOM
|
// },
|
// attr: {
|
// remark: "示例1"
|
// }
|
// })
|
// graphicLayer.addGraphic(graphic)
|
// this.fetchPersonsList()
|
// this.updateTrajectories()
|
|
// this.getGPSCesium();
|
this.$ownerInstance.callMethod('receiveRenderData', this.dot)
|
this.fplock = true
|
globalMap = true
|
}
|
this.$ownerInstance.callMethod('initlock');
|
},
|
getmarsPoint(newValue) {
|
if (Object.keys(newValue).length != 0) {
|
map.camera.flyTo({
|
destination: Cesium.Cartesian3.fromDegrees(newValue.lon, newValue.lat, 500), // 目标点经纬度和视角高度
|
duration: 3 // 动画持续时间（秒）
|
});
|
}
|
},
|
|
getmarsfencePoint(newValue) {
|
console.log(444444444444);
|
console.log(newValue);
|
console.log(newValue.split(",")[0]);
|
if (this.fenceplock == false) {
|
setTimeout(() => {
|
if (this.fplock == true) {
|
//5秒播放一次
|
if (Object.keys(newValue).length != 0) {
|
map.camera.flyTo({
|
destination: Cesium.Cartesian3.fromDegrees(newValue.split(",")[0],
|
newValue.split(",")[1], 500), // 目标点经纬度和视角高度wwwwww
|
duration: 3 // 动画持续时间（秒）
|
});
|
this.fenceplock = true
|
}
|
}
|
|
}, 1000);
|
}
|
|
|
},
|
|
|
getFenceDatade(newValue) {
|
if (Object.keys(newValue).length != 0) {
|
graphicLayerFence.clear()
|
|
addedFenceIds = new Set();
|
// if (this.fenceid == newValue.id) {
|
graphicLayerFenceBianJie.clear()
|
//}
|
|
}
|
},
|
haversineDistance(lng1, lat1, lng2, lat2) {
|
|
|
|
const R = 6371e3; // 地球半径，单位：米
|
const φ1 = lat1 * (Math.PI / 180);
|
const φ2 = lat2 * (Math.PI / 180);
|
const Δφ = (lat2 - lat1) * (Math.PI / 180);
|
const Δλ = (lng2 - lng1) * (Math.PI / 180);
|
|
const a = Math.sin(Δφ / 2) * Math.sin(Δφ / 2) +
|
Math.cos(φ1) * Math.cos(φ2) *
|
Math.sin(Δλ / 2) * Math.sin(Δλ / 2);
|
const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
|
|
return R * c;
|
},
|
getFenceData(newValue) {
|
if (Object.keys(newValue).length != 0) {
|
newValue.forEach((e, i) => {
|
if (e.isplay === '1') {
|
if (!addedFenceIds.has(e.id)) {
|
this.fenceids = e.id + "_fence"
|
// setTimeout(() => {
|
//5秒播放一次
|
// }, 1000);
|
let parts = e.points.split(';');
|
var part = []
|
var fence = []
|
var positions = []; // 存储所有点的经纬度
|
//所有经纬度点
|
for (var i = 0; i < parts.length; i++) {
|
|
part = parts[i].split(',');
|
if (part.length > 1) {
|
var lng = parseFloat(part[0]);
|
var lat = parseFloat(part[1]);
|
positions.push({
|
lng: lng,
|
lat: lat
|
});
|
}
|
|
// fence.push(part[0])
|
// fence.push(part[1])
|
// part.push('0')
|
|
const graphic = new mars3d.graphic.BillboardEntity({
|
|
position: [part[0], part[1], 0],
|
// id: newValue[e].e,
|
// model: {
|
// ...modelParam,
|
// },
|
style: {
|
image: "static/img/ponit1.png",
|
scale: 0.4,
|
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
verticalOrigin: Cesium.VerticalOrigin.BOTTOM
|
}
|
// attr: {
|
// online: newValue[e].online,
|
// lat: newValue[e].lat,
|
// lon: newValue[e].lon,
|
// ppower: newValue[e].power,
|
// // baoliu4: e.baoliu4,
|
// gpsstatus: newValue[e].gpsstatus,
|
// department: newValue[e].department,
|
// pname: newValue[e].name,
|
// // ptagid: newValue[e].id,。
|
// }
|
})
|
graphicLayerFenceBianJie.addGraphic(graphic)
|
// graphicLayer.addGraphic(label);
|
// addedCarIds.add(e.id);
|
// this.graphicLabelsids[newValue[e].id] = {
|
// graphic: graphic,
|
// // fence: fenceGraphic
|
// };
|
fence.push(part)
|
}
|
for (var k = 0; k < positions.length; k++) {
|
var currentPoint = positions[k];
|
var nextPoint = positions[(k + 1) % positions.length]; // 处理最后一个点和第一个点相连的情况
|
|
var distance = this.haversineDistance(currentPoint.lng, currentPoint.lat,
|
nextPoint
|
.lng, nextPoint.lat);
|
distance = parseFloat(distance.toFixed(2));
|
var midLng = (currentPoint.lng + nextPoint.lng) / 2;
|
var midLat = (currentPoint.lat + nextPoint.lat) / 2;
|
// 创建一个 LabelEntity 来显示距离
|
var labelGraphic = new mars3d.graphic.LabelEntity({
|
position: new mars3d.LngLatPoint(midLng, midLat),
|
style: {
|
text: `${distance} m`,
|
font_size: 14,
|
font_weight: "bold",
|
color: "#FFFFFF",
|
backgroundColor: "#000000",
|
visibleDepth: false,
|
|
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
verticalOrigin: Cesium.VerticalOrigin.CENTER
|
}
|
});
|
graphicLayerFenceBianJie.addGraphic(labelGraphic);
|
|
}
|
|
let colorFence = ""
|
let JuXingcolorFence = ""
|
if (e.type == "禁入区") {
|
colorFence = "#F56D6E"
|
}
|
if (e.type == "工作区") {
|
colorFence = "#3795DA"
|
|
}
|
if (e.type == "安全区") {
|
colorFence = "#2BFB2E"
|
}
|
const fenceGraphic = new mars3d.graphic.PolygonPrimitive({
|
|
positions: fence,
|
style: {
|
closure: true,
|
color: colorFence,
|
opacity: 0.5,
|
diffHeight: e.height / 100,
|
materialType: mars3d.MaterialType.LineFlow,
|
label: {
|
text: e.name,
|
font_size: 18,
|
outline: true,
|
outlineColor: colorFence,
|
color: "#ffffff",
|
distanceDisplayCondition: true,
|
distanceDisplayCondition_far: 500000,
|
distanceDisplayCondition_near: 0,
|
}
|
},
|
// positions: [["116.2811140","39.8318720"],["116.2817160","39.8317730"],["116.2811709","39.8322179"]],
|
// style: {
|
// color: this.parseColor("#FF0000").withAlpha(0.3),
|
// outlineWidth: 2, // 边框粗细（像素）
|
// outline: true,
|
// outlineColor: this.parseColor("#b40000"),
|
// // diffHeight: newValue[e].height || 0,
|
// label: {
|
// text: e.name,
|
// font_size: 18,
|
// outline: true,
|
// outlineColor: "#C70708",
|
// color: "#ffffff",
|
// distanceDisplayCondition: true,
|
// distanceDisplayCondition_far: 500000,
|
// distanceDisplayCondition_near: 0
|
// }
|
// },
|
attr: {
|
name: e.name,
|
// ptagid: newValue[e].id,。
|
}
|
});
|
graphicLayerFence.addGraphic(fenceGraphic);
|
addedFenceIds.add(e.id);
|
console
|
.log(this.graphicFence);
|
this.graphicFence[this.fenceids] = {
|
// graphic: graphic,
|
fence: fenceGraphic
|
};
|
} else {
|
// if (addedFenceIds.has(e.id)) {
|
// graphicLayer.removeGraphic(graphic);
|
// delete this.graphicLabels[e.id]; // 删除引用
|
// // delete this.labels[e.id];
|
// addedFenceIds.delete(e.id);
|
// // this.graphicLabels[e.anchorid] = {
|
// // graphic: graphic1
|
// // };
|
// }
|
}
|
}
|
}) // 将传递过来的值赋值给points，这样就可以在视图层中使用
|
} else {
|
addedFenceIds = new Set();
|
}
|
},
|
parseColor(colorStr) {
|
try {
|
if (Cesium.Color[colorStr.toUpperCase()]) {
|
return Cesium.Color[colorStr.toUpperCase()];
|
}
|
return Cesium.Color.fromCssColorString(colorStr);
|
} catch (error) {
|
return Cesium.Color.WHITE;
|
}
|
},
|
|
getDrwaData(newValue) {
|
this.plist = []
|
if (this.graphicFence[this.fenceid]) {
|
graphicLayer.removeGraphic(this.graphicFence[this.fenceid].fence);
|
delete this.graphicFence[this.fenceid];
|
}
|
if (Object.keys(newValue).length != 0) {
|
for (var e = newValue.length - 1; e < newValue.length; e++) {
|
this.fenceid = newValue[e].id
|
if (newValue[e - 1].lat != undefined && newValue[e].lat == newValue[e - 1].lat) {
|
console.log("数据重复===========》》》》》》》》", newValue[e].lat);
|
} else {
|
|
// // 3. 闭合多边形
|
this.cartesianPoints.push(newValue[e]);
|
// // [["116.2811140","39.8318720"],["116.2817160","39.8317730"],["116.2811709","39.8322179"]]
|
const fenceGraphic = new mars3d.graphic.PolygonPrimitive({
|
positions: this.cartesianPoints,
|
// positions: [["116.2811140","39.8318720"],["116.2817160","39.8317730"],["116.2811709","39.8322179"]],
|
style: {
|
color: this.parseColor("#FF0000").withAlpha(0.3),
|
outlineWidth: 2, // 边框粗细（像素）
|
outline: true,
|
outlineColor: this.parseColor("#b40000"),
|
// diffHeight: newValue[e].height || 0,
|
}
|
});
|
graphicLayer.addGraphic(fenceGraphic);
|
this.graphicFence[newValue[e].id] = {
|
// graphic: graphic,
|
fence: fenceGraphic
|
};
|
}
|
}
|
}
|
},
|
getPointData(newValue) {
|
|
this.cartesianPoints = []
|
// if (this.graphicFence[this.fenceid]) {
|
// graphicLayer.removeGraphic(this.graphicFence[this.fenceid].fence);
|
// delete this.graphicFence[this.fenceid];
|
// }
|
// if (this.graphicLabelsids[this.fenceid]) {
|
// graphicLayer.removeGraphic(this.graphicLabelsids[this.fenceid].graphic);
|
// delete this.graphicLabelsids[this.fenceid];
|
// }
|
if (graphicLayerFencedrwa != null) {
|
graphicLayerFencedrwa.clear()
|
}
|
if (Object.keys(newValue).length != 0) {
|
for (var e = 0; e < newValue.length; e++) {
|
this.fenceid = newValue[e].id
|
this.plist = []
|
this.plist.push(newValue[e].lat)
|
this.plist.push(newValue[e].lon)
|
// 3. 闭合多边形
|
this.cartesianPoints.push(this.plist);
|
// 自动闭合多边形
|
// [["116.2811140","39.8318720"],["116.2817160","39.8317730"],["116.2811709","39.8322179"]]
|
const fenceGraphic = new mars3d.graphic.PolygonPrimitive({
|
positions: this.cartesianPoints,
|
// id: newValue[e].id,
|
// positions: [["116.2811140","39.8318720"],["116.2817160","39.8317730"],["116.2811709","39.8322179"]],
|
style: {
|
color: this.parseColor("#FF0000").withAlpha(0.3),
|
outlineWidth: 2, // 边框粗细（像素）
|
outline: true,
|
outlineColor: this.parseColor("#b40000"),
|
diffHeight: newValue[e].height || 0,
|
// label: {
|
// text: e.name,
|
// font_size: 14,
|
// color: Cesium.Color.WHITE,
|
// distanceDisplayCondition: [0, 500000]
|
// }
|
}
|
});
|
|
// this.graphicFence[newValue[e].id] = {
|
// // graphic: graphic,
|
// fence: fenceGraphic
|
// };
|
graphicLayerFencedrwa.addGraphic(fenceGraphic);
|
//测试本地图片
|
// this.graphicids.push(newValue[e].id)
|
const graphic = new mars3d.graphic.BillboardEntity({
|
|
position: [newValue[e].lat, newValue[e].lon, 0],
|
id: newValue[e].e,
|
// model: {
|
// ...modelParam,
|
// },
|
style: {
|
image: "static/img/ponit1.png",
|
scale: 0.4,
|
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
verticalOrigin: Cesium.VerticalOrigin.BOTTOM
|
},
|
attr: {
|
online: newValue[e].online,
|
lat: newValue[e].lat,
|
lon: newValue[e].lon,
|
ppower: newValue[e].power,
|
// baoliu4: e.baoliu4,
|
gpsstatus: newValue[e].gpsstatus,
|
department: newValue[e].department,
|
pname: newValue[e].name,
|
// ptagid: newValue[e].id,。
|
}
|
})
|
graphicLayerFencedrwa.addGraphic(graphic)
|
// graphicLayer.addGraphic(label);
|
// addedCarIds.add(e.id);
|
// this.graphicLabelsids[newValue[e].id] = {
|
// graphic: graphic,
|
// // fence: fenceGraphic
|
// };
|
}
|
} else {
|
console.log("清空绘制围栏");
|
}
|
},
|
getData(newValue) {
|
let modelParam = {
|
scale: 2,
|
url: "http://39.106.210.13:8888/hxzkuwb/view/Home/model/model/walk.gltf",
|
pitch: 0,
|
roll: 0,
|
};
|
if (Object.keys(newValue).length != 0) {
|
newValue.forEach((e, i) => {
|
if (e.online === '1') {
|
if (!addedCarIds.has(e.id)) {
|
// console.log("打印数据====》》》》》》》》》》");
|
//测试本地图片
|
let colorFence = ""
|
let JuXingcolorFence = ""
|
var img = "static/img/zuobiao3.png";
|
if (e.gpsstatus == 1) { //单点蓝色
|
// var img = "static/img/zuobiao4.png";
|
colorFence = "#00aaff"
|
}
|
if (e == 2 || e.gpsstatus == -1 || e.gpsstatus == 3) { //其他类型灰色
|
// var img = "static/img/zuobiao1.png";
|
colorFence = "rgba(0,0,0,0.5)"
|
}
|
if (e.gpsstatus == 4) { //高精度绿色
|
|
colorFence = "#20D85C"
|
}
|
if (e.gpsstatus == 5) { //浮点黄色
|
// var img = "static/img/zuobiao2.png";
|
colorFence = "#ffff00"
|
}
|
// if (e.baoliu2.split(";").indexOf("1")<0) {
|
// var img = "static/img/zuobiao7.png";
|
// }
|
if (e.baoliu2.split(";")[0] == 1) {
|
var img = "static/img/zuobiao7.png";
|
} else if (e.baoliu2.split(";")[1] == 0) {
|
var img = "static/img/zuobiao7.png";
|
} else if (e.baoliu2.split(";")[2] == 1) {
|
var img = "static/img/zuobiao7.png";
|
}else
|
if (e.warnstatus == "1") {
|
var img = "static/img/zuobiao6.png";
|
// var img = "static/img/zuobiao2.png";
|
}
|
// if (e.baoliu19 == "车载") {
|
// var img = 'static/img/car1.png'
|
// } else {
|
// var img = 'static/img/person6.png'
|
// }
|
const graphic = new mars3d.graphic.BillboardEntity({
|
|
position: [e.lat, e.lon, 0],
|
id: e.id,
|
// model: {
|
// ...modelParam,
|
// },
|
style: {
|
// image: "static/img/person5.png",
|
image: img,
|
scale: "0.4",
|
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
verticalOrigin: Cesium.VerticalOrigin.BOTTOM
|
},
|
attr: {
|
online: e.gpsstatus,
|
type: e.type,
|
baoliu1: e.baoliu1,
|
rtcm: e.rtcm,
|
encryption: e.encryption,
|
power: e.power,
|
height: e.height,
|
gpsstatus: e.gpsstatus,
|
pdepartment: e.department,
|
personname: e.personname,
|
tagid: e.tagid,
|
}
|
})
|
const label = new mars3d.graphic.LabelEntity({
|
position: graphic.position, // 标签的位置与图标位置相同
|
style: {
|
text: e.personname + " " + e.id, // 标签的文本内容为姓名和编号
|
font: '10pt sans-serif', // 字体样式
|
fillColor: "#000000", // 字体颜色
|
outlineColor: colorFence, // 描边颜色，使文字更清晰
|
outlineWidth: 2, // 描边宽度
|
style: Cesium.LabelStyle.FILL_AND_OUTLINE, // 风格：填充和描边
|
verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // 文字在垂直方向的原点
|
pixelOffset: new Cesium.Cartesian2(0, -
|
30) // 文字偏移量，向下偏移10像素
|
}
|
});
|
if (this.graphicLabels[e.id]) {
|
graphicLayer.removeGraphic(this.graphicLabels[e.id].graphic);
|
delete this.graphicLabels[e.id];
|
// delete this.labels[car.id];
|
}
|
graphicLayer.addGraphic(graphic)
|
graphicLayer.addGraphic(label);
|
addedCarIds.add(e.id);
|
this.graphicLabels[e.id] = {
|
graphic: graphic,
|
label: label
|
};
|
}
|
} else {
|
if (addedCarIds.has(e.id)) {
|
let colorFence = ""
|
let JuXingcolorFence = ""
|
var img = "static/img/zuobiao3.png";
|
if (e.gpsstatus == 1) { //单点蓝色
|
// var img = "static/img/zuobiao4.png";
|
colorFence = "#00aaff"
|
}
|
if (e == 2 || e.gpsstatus == -1 || e.gpsstatus == 3) { //其他类型灰色
|
// var img = "static/img/zuobiao1.png";
|
colorFence = "rgba(0,0,0,0.5)"
|
}
|
if (e.gpsstatus == 4) { //高精度绿色
|
|
colorFence = "#20D85C"
|
}
|
if (e.gpsstatus == 5) { //浮点黄色
|
// var img = "static/img/zuobiao2.png";
|
colorFence = "#ffff00"
|
}
|
|
|
if (this.isoffline == true) {
|
const graphic1 = new mars3d.graphic.BillboardEntity({
|
position: [e.lat, e.lon, 0],
|
id: e.id,
|
style: {
|
|
image: img,
|
scale: "0.4",
|
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
verticalOrigin: Cesium.VerticalOrigin.BOTTOM
|
},
|
attr: {
|
online: e.gpsstatus,
|
type: e.type,
|
baoliu1: e.baoliu1,
|
rtcm: e.rtcm,
|
encryption: e.encryption,
|
power: e.power,
|
height: e.height,
|
gpsstatus: e.gpsstatus,
|
pdepartment: e.department,
|
personname: e.personname,
|
tagid: e.tagid,
|
}
|
})
|
graphicLayer.removeGraphic(this.graphicLabels[e.id].graphic);
|
delete this.graphicLabels[e.id];
|
graphicLayer.addGraphic(graphic1)
|
this.graphicLabels[e.id] = {
|
graphic: graphic1,
|
};
|
} else {
|
graphicLayer.removeGraphic(this.graphicLabels[e.id].graphic);
|
graphicLayer.removeGraphic(this.graphicLabels[e.id].label);
|
delete this.graphicLabels[e.id];
|
}
|
addedCarIds.delete(e.id);
|
}
|
}
|
}) // 将传递过来的值赋值给points，这样就可以在视图层中使用
|
}
|
},
|
getgpsData(newValue) {
|
let modelParam = {
|
scale: 2,
|
url: "http://39.106.210.13:8888/hxzkuwb/view/Home/model/model/walk.gltf",
|
pitch: 0,
|
roll: 0,
|
};
|
if (Object.keys(newValue).length != 0) {
|
var listALL = newValue;
|
if (graphicLayer != null) {
|
graphicLayer.eachGraphic((car) => {
|
// 取出对应车辆的轨迹列表
|
var path = listALL.filter((item) => {
|
return item.id === car.id
|
});
|
path.forEach((item) => {
|
var point = new mars3d.LngLatPoint(item.lat, item
|
.lon, 0);
|
car.addDynamicPosition(point, item.addtiem);
|
const {
|
oldgraphic,
|
label
|
} = this.graphicLabels[item.id];
|
// 移除旧的图标实体
|
if (this.graphicLabels[car.id]) {
|
graphicLayer.removeGraphic(car);
|
graphicLayer.removeGraphic(label);
|
}
|
// item.baoliu2.split(";").indexOf(1)
|
|
if (item.online === '1') {
|
var img = "static/img/zuobiao3.png";
|
let colorFence = ""
|
let JuXingcolorFence = ""
|
|
if (item.gpsstatus == 1) { //单点蓝色
|
// var img = "static/img/zuobiao4.png";
|
colorFence = "#00aaff"
|
|
}
|
if (item == 2 || item.gpsstatus == -1 || item.gpsstatus ==
|
3) { //其他类型灰色
|
// var img = "static/img/zuobiao1.png";
|
colorFence = "rgba(0,0,0,0.5)"
|
}
|
if (item.gpsstatus == 4) { //高精度绿色
|
// var img = "static/img/zuobiao3.png";
|
colorFence = "#20D85C"
|
}
|
if (item.gpsstatus == 5) { //浮点黄色
|
// var img = "static/img/zuobiao2.png";
|
colorFence = "#ffff00"
|
}
|
// console.log(22222222);
|
// console.log(item.baoliu2);
|
// console.log(item.baoliu2.split(";").indexOf("1"));
|
// console.log(item.baoliu2.split(";").indexOf("1")>-1);
|
// if (item.baoliu2.split(";").indexOf("1") < 0) {
|
// var img = "static/img/zuobiao7.png";
|
// // var img = "static/img/zuobiao2.png";
|
// }
|
if (item.baoliu2.split(";")[0] == 1) {
|
var img = "static/img/zuobiao7.png";
|
} else if (item.baoliu2.split(";")[1] == 0) {
|
var img = "static/img/zuobiao7.png";
|
} else if (item.baoliu2.split(";")[2] == 1) {
|
var img = "static/img/zuobiao7.png";
|
}else
|
if (item.warnstatus == "1") {
|
var img = "static/img/zuobiao6.png";
|
// var img = "static/img/zuobiao2.png";
|
}
|
|
// 创建新的图标实体
|
const newGraphic = new mars3d.graphic.BillboardEntity({
|
position: [item.lat, item.lon, 0],
|
id: item.id,
|
style: {
|
// image: "static/img/person5.png",
|
image: img,
|
scale: "0.4",
|
horizontalOrigin: Cesium.HorizontalOrigin
|
.CENTER,
|
|
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
// pixelOffset: new Cesium.Cartesian2(0, 10), // 向下偏移50像素
|
},
|
attr: {
|
online: item.online,
|
type: item.type,
|
baoliu1: item.baoliu1,
|
encryption: item.encryption,
|
rtcm: item.rtcm,
|
power: item.power,
|
height: item.height,
|
gpsstatus: item.gpsstatus,
|
department: item.department,
|
personname: item.personname,
|
tagid: item.tagid,
|
}
|
})
|
const newlabel = new mars3d.graphic.LabelEntity({
|
position: point,
|
style: {
|
text: item.personname + " " + item.tagid,
|
font: '10pt sans-serif',
|
fillColor: "#000000",
|
outlineColor: colorFence,
|
outlineWidth: 2,
|
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
|
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
pixelOffset: new Cesium.Cartesian2(0, -30)
|
}
|
});
|
// 添加标签到图层并存储引用
|
graphicLayer.addGraphic(newlabel);
|
// 添加新的图标实体到图层
|
graphicLayer.addGraphic(newGraphic);
|
this.graphicLabels[item.id] = {
|
graphic: newGraphic,
|
label: newlabel
|
};
|
}
|
});
|
});
|
}
|
}
|
},
|
|
//重写cesium接口
|
rewriteCesiumSources(Cesium) {
|
const loadImageElement_old = Cesium.Resource._Implementations.loadImageElement;
|
Cesium.Resource._Implementations.loadImageElement = function(url, crossOrigin, deferred) {
|
// 修改本地file本地文件需要设置跨域（uniapp环境等）
|
if (url.startsWith('file')) {
|
crossOrigin = true;
|
}
|
if (!url.startsWith('http')) {
|
crossOrigin = true;
|
}
|
|
return loadImageElement_old(url, crossOrigin, deferred);
|
};
|
|
const contains_old = Cesium.TrustedServers.contains;
|
Cesium.TrustedServers.contains = function(url) {
|
// 修改本地file本地文件需要设置跨域（uniapp环境等）
|
if (url.startsWith('file')) {
|
return false;
|
}
|
return contains_old.bind(this)(url);
|
};
|
},
|
|
// 加载资源
|
loadSource(loadQueen) {
|
const stepOne = (resolve) => {
|
if (loadQueen.length) {
|
const dep = loadQueen.shift()
|
|
let loader
|
if (dep.endsWith(".css")) {
|
loader = this.loadLink(dep)
|
} else {
|
loader = this.loadScript(dep)
|
}
|
|
loader.then(() => {
|
stepOne(resolve)
|
})
|
} else {
|
resolve(true)
|
}
|
}
|
|
return new Promise((resolve) => {
|
stepOne(resolve)
|
})
|
},
|
|
// 加载scrpit
|
loadScript(src, async = true) {
|
const $script = document.createElement("script")
|
$script.async = async
|
$script.src = src
|
document.body.appendChild($script)
|
return new Promise((resolve, reject) => {
|
$script.onload = () => {
|
resolve(true)
|
}
|
})
|
},
|
|
// 加载scrpit
|
loadLink(src) {
|
const $link = document.createElement("link")
|
$link.rel = "stylesheet"
|
$link.href = src
|
document.head.appendChild($link)
|
return new Promise((resolve, reject) => {
|
$link.onload = () => {
|
resolve(true)
|
}
|
})
|
}
|
|
}
|
}
|
</script>
|
|
<style>
|
.searchbg {
|
width: '50%';
|
left: '25%';
|
position: 'absolute';
|
z-index: 99999999;
|
}
|
|
|
.content {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
width: 100%;
|
|
height: 100%;
|
}
|
</style>
|
