1707 lines
50 KiB
Vue
1707 lines
50 KiB
Vue
<template>
|
||
<div id="centerDiv" class="mapcontainer">
|
||
<!-- 头部 -->
|
||
<div class="el-header">
|
||
<div class="app-name">{{ appName }}</div>
|
||
|
||
<div class="header-info" style="z-index: 9999999999999999">
|
||
<!-- 时间中心 -->
|
||
<div class="time-info">
|
||
<div class="time-time-info" style="margin-right: 15px">
|
||
{{ time }}
|
||
</div>
|
||
<div class="time-time-info" style="margin-right: 15px">
|
||
{{ date }}
|
||
</div>
|
||
<div class="time-time-info" style="margin-right: 15px">
|
||
星期{{ workday }}
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 天气中心 -->
|
||
<div class="weather-info">
|
||
<div class="weater">{{ weater }}</div>
|
||
<div class="temperature">{{ temperature }}</div>
|
||
</div>
|
||
|
||
<div class="newworkstate">
|
||
网络状态：<span :style="{
|
||
color: newworkstate == '网络正常' ? '#67C23A' : '#E6A23C',
|
||
}">{{ newworkstate }}</span>
|
||
</div>
|
||
|
||
<!-- 退出按钮 -->
|
||
<div class="logout-button" style="position: relative; z-index: 999999999999" @click="logout()"></div>
|
||
</div>
|
||
</div>
|
||
<search v-if="finishLoadMap" />
|
||
<!-- 快捷按钮 -->
|
||
<div class="shortcut-button" id="shortcutbutton">
|
||
<!-- <div class="quick-button" v-if="appTools['toolsbox']" @click="toolsShow = !toolsShow">常用工具</div> -->
|
||
|
||
<!-- <div class="quick-button" v-if="appTools['uavbox']" @click="uavShow = !uavShow">视频巡航</div> -->
|
||
|
||
<!-- <div class="quick-button" v-if="appTools['routebox']" @click="routeShow = !routeShow">路线规划</div> -->
|
||
|
||
<!-- <div class="quick-button" v-if="appTools['monitorbox']" @click="monitorShow = !monitorShow">视频监控</div> -->
|
||
|
||
<!-- <div class="quick-button" v-if="appTools['griderbox']" @click="griderShow = !griderShow">网格管理</div> -->
|
||
|
||
<!-- <div class="quick-button" v-if="appTools['reportbox']" @click=" reportlistShow = !reportlistShow">线索上报</div>
|
||
|
||
<div class="quick-button" @click="socketBoxVisible = !socketBoxVisible">现场人员</div> -->
|
||
</div>
|
||
|
||
<!-- 地图 -->
|
||
<Map style="width: 100%; height: 100vh" :url="configUrl" :widgetUrl="widgetUrl" @onload="onMapload" />
|
||
|
||
<!-- 图上测量 -->
|
||
<div class="tools-boxs" v-if="toolsShow && appTools['toolsbox'] && finishLoadMap">
|
||
<toolbox @historyShow="showHistoryLabel" @drawLable="drawLable"></toolbox>
|
||
</div>
|
||
|
||
<!-- 线索合并 -->
|
||
<div class="merage-box" v-if="mergeboxShow && finishLoadMap" v-drag>
|
||
<mergebox @wuzi="wuzi" @changeCurrentInfo="changeCurrentInfo" @clsoe="mergeboxShow = false" @success="mergeSuccess"
|
||
:checkList="checkList" :checkNumber="checkNumber"></mergebox>
|
||
</div>
|
||
|
||
<!-- 工具箱 -->
|
||
<div class="tools">
|
||
<!-- 火情调度 -->
|
||
<div class="situation" v-if="reportSituationShow">
|
||
<div class="situation-info">
|
||
<p>
|
||
<span>火情描述：{{ currentInfo.describe }}</span>
|
||
</p>
|
||
<p>
|
||
<span>上报人员：{{ currentInfo.reportPerson }}</span>
|
||
<span style="float: right">上报时间：{{ currentInfo.reportTime }}</span>
|
||
</p>
|
||
<p>
|
||
<span>预估火点：{{ currentInfo.address }} </span>
|
||
<span>
|
||
<el-button type="primary" size="mini" icon="el-icon-location-information"></el-button>
|
||
</span>
|
||
</p>
|
||
</div>
|
||
<div class="situation-tab-container">
|
||
<div class="situation-tab" :style="{
|
||
'border-bottom': active == 1 ? '3px solid #01D6D5' : '0px',
|
||
}" @click="active = 1">
|
||
火情动态
|
||
</div>
|
||
<div class="situation-tab" :style="{
|
||
'border-bottom': active == 2 ? '3px solid #01D6D5' : '0px',
|
||
}" @click="active = 2">
|
||
任务下发
|
||
</div>
|
||
<div class="situation-tab" :style="{
|
||
'border-bottom': active == 3 ? '3px solid #01D6D5' : '0px',
|
||
}" @click="active = 3">
|
||
附近水源
|
||
</div>
|
||
<div class="situation-tab" :style="{
|
||
'border-bottom': active == 4 ? '3px solid #01D6D5' : '0px',
|
||
}" @click="active = 4">
|
||
物资调度
|
||
</div>
|
||
</div>
|
||
<!-- 火情动态 -->
|
||
<trendsbox v-show="active == 1"></trendsbox>
|
||
|
||
<!-- 任务下发 -->
|
||
<taskbox v-show="active == 2"></taskbox>
|
||
<!-- -->
|
||
</div>
|
||
</div>
|
||
<!-- 人员 -->
|
||
<div class="personnel-container" v-drag v-if="personVisible && finishLoadMap">
|
||
<personnel :fireData="currentInfo" @close="personVisible = false" @videoCall="videoCall">
|
||
</personnel>
|
||
</div>
|
||
<!-- 物资 -->
|
||
<div class="goods-container" v-if="goodsVisible" v-drag>
|
||
<goodsbox :endLngLat="endLngLat" :firePopup='firePopupClosed' :visible='goodsVisible' @close="goodsVisible = false">
|
||
</goodsbox>
|
||
</div>
|
||
<!-- 水源 -->
|
||
<div class="water-container" v-if="waterVisible" v-drag>
|
||
<waterbox
|
||
:waterCenter="waterCenter"
|
||
:firePopup = "firePopupClosed"
|
||
@close="waterVisible = false"
|
||
></waterbox>
|
||
</div>
|
||
|
||
<!-- 网格化管理 -->
|
||
<!-- <div class="grid-container" v-show="appTools['griderbox'] && griderShow">
|
||
<gridbox></gridbox>
|
||
</div> -->
|
||
|
||
<div class="bottom-tools-container" style="display: none" v-if="finishLoadMap">
|
||
<!-- 最优路线规划 -->
|
||
<div class="route" v-show="routeShow && appTools['routebox']">
|
||
<routebox></routebox>
|
||
</div>
|
||
|
||
<!-- 监控列表 -->
|
||
<div class="monitor" v-if="monitorShow && appTools['monitorbox']">
|
||
<monitorbox @showLCmonitorbox="showLCmonitorbox"></monitorbox>
|
||
</div>
|
||
|
||
<div class="monitor" v-if="videoCallShow">
|
||
<div class="close-button" @click="videoCallShow = false">
|
||
<i class="el-icon el-icon-close"></i>
|
||
</div>
|
||
<videocall @endVideoCall="endVideoCall"></videocall>
|
||
</div>
|
||
|
||
<div class="monitor" v-if="LCmonitorboxShow">
|
||
<div class="close-button" @click="LCmonitorboxShow = false">
|
||
<i class="el-icon el-icon-close"></i>
|
||
</div>
|
||
<LCmonitorbox v-if="LCmonitorboxShow" :deviceId="deviceId" :channelId="channelId"></LCmonitorbox>
|
||
</div>
|
||
</div>
|
||
<!-- 右键点击设置 -->
|
||
<div v-if="setVisibleShow">
|
||
<rightclicksetting :type="rightType" :clickdata="setDatas" @close="rightType = 0"></rightclicksetting>
|
||
</div>
|
||
<!-- socket -->
|
||
<div class="socket-container" v-if="socketBoxVisible && finishLoadMap">
|
||
<socketDiaBox @close="socketBoxVisible = false" @videoCall="videoCall"></socketDiaBox>
|
||
</div>
|
||
<!-- 数据图层 -->
|
||
<div class="layercontainer flex column jc-c ai-c" id="layercontainer" v-if="false">
|
||
<div class="layerplugbox" v-if="layerPlugVisible">
|
||
<layerPlugInUnit></layerPlugInUnit>
|
||
</div>
|
||
<div class="layerControlBtn flex ai-c jc-c cursor" @click="layerPlugVisible = !layerPlugVisible">
|
||
<img style="width: 18px; height: 18px" src="/img/layercontrol.png" />
|
||
</div>
|
||
</div>
|
||
<!-- 右侧弹窗 -->
|
||
<div class="rightdiabox flex column jc-sb" v-if="rightDiaVisible && finishLoadMap">
|
||
<div class="rightbox1">
|
||
<rightEchartsData></rightEchartsData>
|
||
</div>
|
||
<div class="rightbox2" v-if="finishLoadMap">
|
||
<!-- <fireClues></fireClues> -->
|
||
<reportlist @close="reportlistShow = false" :mergeSuccessRandom="mergeSuccessRandom" @wuzi="wuzi"
|
||
@shuiyuan="shuiyuan" @getTaskListSocket="getTaskList" @getlistSocket="reportlistShow = true"
|
||
@jiankong="jiankong" @renyuan="renyuan" @merge="mergeboxShow = true" @changeCurrentInfo="changeCurrentInfo"
|
||
:checkList="checkList" :checkNumber="checkNumber"></reportlist>
|
||
</div>
|
||
|
||
<div class="rightbox1" v-if="finishLoadMap">
|
||
<uavbox></uavbox>
|
||
</div>
|
||
</div>
|
||
<!-- 呼叫中心 -->
|
||
<div class="callCenterBox" v-if="callCenterVisible && finishLoadMap">
|
||
<callCenter @callUser="callUser" @getOnlineUser="onlineUserBoxShow = true"></callCenter>
|
||
</div>
|
||
<!-- 展开收起两边弹窗 -->
|
||
<!-- <div class="diatoggleBtn" id="diatoggleBtn" @click="diaToggle"></div> -->
|
||
|
||
<!-- 火情上报 -->
|
||
<!-- <div class="report" v-if="appTools['reportbox']">
|
||
<reportbox @getAllReportList="getAllReportList"></reportbox>
|
||
</div> -->
|
||
<!-- 任务下发 -->
|
||
<div class="task" v-if="taskDeliveryShow && finishLoadMap" v-drag>
|
||
<taskDelivery @closeTask="closeTask" :lng="tasklng" :lat="tasklat"></taskDelivery>
|
||
</div>
|
||
<!-- 脚部 -->
|
||
<div class="footer" id="footer">
|
||
<div class="base-layer-change-button" @click="addTileLayer('vec_d')">
|
||
电子地图
|
||
</div>
|
||
<div class="base-layer-change-button" :style="{ 'margin-right': '40px' }" @click="addTileLayer('img_d')">
|
||
卫星地图
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 呼叫中心 -->
|
||
<div class="one-button-container" v-drag v-if="oneButtonCallShow">
|
||
<div class="close-button" style="margin-right: 8px; z-index: 9999" @click="oneButtonCallShow = false">
|
||
<i class="el-icon el-icon-close"></i>
|
||
</div>
|
||
<onebuttoncall></onebuttoncall>
|
||
</div>
|
||
<!-- 视频监控 -->
|
||
<div style="
|
||
width: 100vw;
|
||
height: 100vh;
|
||
position: fixed;
|
||
top: 0px;
|
||
left: 0px;
|
||
background: rgba(0, 0, 0, 0.6);
|
||
z-index: 99999;
|
||
" v-if="HKmonitorboxShow">
|
||
<div class="close-button" style="
|
||
position: absolute;
|
||
top: calc(50% - 170px);
|
||
left: calc(50% + 200px);
|
||
transform: translate(-50%, -50%);
|
||
z-index: 9999999999999999999;
|
||
" @click="HKmonitorboxShow = false">
|
||
<i class="el-icon el-icon-close"></i>
|
||
</div>
|
||
<HKmonitorbox v-if="HKmonitorboxShow" :deviceId="deviceId" :channelId="channelId"></HKmonitorbox>
|
||
</div>
|
||
|
||
<!-- 在线人员 -->
|
||
<div class="online-user-container" v-drag v-if="onlineUserBoxShow">
|
||
<div class="close-button" style="margin-right: 8px; z-index: 9999" @click="onlineUserBoxShow = false">
|
||
<i class="el-icon el-icon-close"></i>
|
||
</div>
|
||
<Onlineuserbox></Onlineuserbox>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
// 请求接口获取全部路由和工具箱信息
|
||
import { getModules } from "@/api/modules.js";
|
||
|
||
import AppConfigInfo from "../../../public/config/app.json";
|
||
import widgetJson from "../../../public/config/widget.json";
|
||
import feixianConfigJson from "../../../public/config/feixianConfig.json";
|
||
import { clearRouterFunc } from './lib/routePath'
|
||
|
||
import $ from "jquery";
|
||
import Map from "@/components/mars3d/Map.vue";
|
||
// import widgetdiv from '@/components/Widget/index.vue'
|
||
import Uavbox from "./widget/uavbox.vue";
|
||
import toolbox from "./widget/toolbox.vue";
|
||
import monitorbox from "./widget/monitorbox.vue";
|
||
import routebox from "./widget/routebox.vue";
|
||
import waterbox from "./widget/waterbox.vue";
|
||
// import reportbox from './widget/reportbox.vue'
|
||
import reportlist from "./widget/reportlist.vue";
|
||
import goodsbox from "./widget/goodsbox.vue";
|
||
import trendsbox from "./widget/trendsbox.vue";
|
||
import taskbox from "./widget/taskbox.vue";
|
||
// import gridbox from './widget/gridbox.vue';
|
||
import LCmonitorbox from "./widget/LCmonitorbox.vue";
|
||
import HKmonitorbox from "./widget/HKmonitorbox.vue";
|
||
import videocall from "./widget/videocallbox.vue";
|
||
import personnel from "./widget/personnel.vue";
|
||
import taskDelivery from "./widget/taskDelivery.vue";
|
||
import axios from "axios";
|
||
import jQuery from "jquery";
|
||
import mergebox from "./widget/mergebox.vue";
|
||
import rightclicksetting from "./widget/rightclick.vue";
|
||
import socketDiaBox from "./widget/socketdiabox.vue";
|
||
import layerPlugInUnit from "./widget/layerplug.vue";
|
||
import callCenter from "./widget/callcenter.vue";
|
||
// import fireClues from './widget/fireclues.vue';
|
||
import rightEchartsData from "./widget/rightechartsdata.vue";
|
||
import search from "./widget/search.vue";
|
||
import drag from "../../utils/draged";
|
||
import Onebuttoncall from "./widget/onebuttoncall.vue";
|
||
import Onlineuserbox from "./widget/onlineuserbox.vue";
|
||
import { getMethodCommon, postMethodCommon } from '../../api/common';
|
||
let BASE_URL = process.env.VUE_APP_BASE_API;
|
||
const areaName = localStorage.getItem("areaName");
|
||
export default {
|
||
name: "home",
|
||
components: {
|
||
Map,
|
||
// widgetdiv,
|
||
Uavbox,
|
||
toolbox,
|
||
monitorbox,
|
||
routebox,
|
||
waterbox,
|
||
// reportbox,
|
||
goodsbox,
|
||
reportlist,
|
||
trendsbox,
|
||
taskbox,
|
||
// gridbox,
|
||
LCmonitorbox,
|
||
HKmonitorbox,
|
||
mergebox,
|
||
personnel,
|
||
videocall,
|
||
rightclicksetting,
|
||
socketDiaBox,
|
||
taskDelivery,
|
||
layerPlugInUnit,
|
||
callCenter,
|
||
// fireClues,
|
||
rightEchartsData,
|
||
search,
|
||
Onebuttoncall,
|
||
Onlineuserbox,
|
||
},
|
||
|
||
data() {
|
||
return {
|
||
endLngLat: null,
|
||
appName: null,
|
||
appTools: null,
|
||
toolsShow: true,
|
||
routeShow: true,
|
||
uavShow: true,
|
||
monitorShow: true,
|
||
griderShow: false,
|
||
reportSituationShow: false,
|
||
reportlistShow: false,
|
||
waterCenter: null,
|
||
date: null,
|
||
time: null,
|
||
workday: null,
|
||
weater: null,
|
||
temperature: null,
|
||
newworkstate: null, //网络状态
|
||
// configUrl: "config/config.json",
|
||
configUrl: `config/${areaName}Config.json`,
|
||
widgetUrl: "config/widget.json",
|
||
tileLayer: null,
|
||
active: 1,
|
||
personVisible: false,
|
||
goodsVisible: false,
|
||
waterVisible: false,
|
||
currentInfo: {},
|
||
LCmonitorboxShow: false,
|
||
HKmonitorboxShow: false,
|
||
onlineUserBoxShow: false,
|
||
deviceId: null,
|
||
channelId: null,
|
||
checkList: [],
|
||
checkNumber: [],
|
||
mergeboxShow: false,
|
||
mergeSuccessRandom: 1,
|
||
rightType: 0,
|
||
setDatas: {},
|
||
setVisibleShow: false,
|
||
videoCallShow: false,
|
||
socketBoxVisible: false,
|
||
taskDeliveryShow: false,
|
||
tasklng: "",
|
||
tasklat: "",
|
||
friePointLayer: null,
|
||
layerPlugVisible: true,
|
||
rightDiaVisible: true,
|
||
callCenterVisible: true,
|
||
oneButtonCallShow: false,
|
||
finishLoadMap: false, // 地图加载完成
|
||
firePopupClosed: false,
|
||
taskGraphicLayer:null,
|
||
taskList:[],
|
||
};
|
||
},
|
||
|
||
mounted() {
|
||
|
||
|
||
},
|
||
|
||
created() {
|
||
let _this = this;
|
||
window.AppConfig = AppConfigInfo[areaName];
|
||
window.delTaskPoint = this.delTaskPoint;
|
||
this.appName = AppConfig.appname;
|
||
this.appTools = AppConfig.tools;
|
||
|
||
// 每秒更新日期时间
|
||
setInterval(function () {
|
||
_this.handlerTime();
|
||
}, 1000);
|
||
|
||
// 获取天气
|
||
this.getWeater();
|
||
|
||
// 获取网络状态
|
||
this.getNetWorkState();
|
||
|
||
//脱敏
|
||
window.hiddenReadData = function (e) {
|
||
e.innerHTML = e
|
||
.getAttribute("data-phone")
|
||
.replace(/(\d{3})\d*(\d{4})/, "$1****$2");
|
||
};
|
||
window.showReadData = function (e) {
|
||
e.innerHTML = e.getAttribute("data-phone");
|
||
};
|
||
|
||
window.lookMonitorByMonitorLayer = this.lookMonitorByMonitorLayer;
|
||
|
||
// 视频通话
|
||
window.videoCall = this.videoCall;
|
||
|
||
window.shuiyuan = this.shuiyuan;
|
||
|
||
window.delFirePoint = this.delFirePoint;
|
||
},
|
||
watch: {
|
||
waterVisible: {
|
||
handler(newVal, oldVal) {
|
||
if (!newVal) {
|
||
clearRouterFunc()
|
||
}
|
||
},
|
||
immediate: true
|
||
},
|
||
goodsVisible:{
|
||
handler(newVal, oldVal) {
|
||
if (!newVal) {
|
||
clearRouterFunc()
|
||
}
|
||
},
|
||
immediate: true
|
||
}
|
||
},
|
||
methods: {
|
||
showHistoryLabel(){
|
||
this.rightType = 4;
|
||
this.setVisibleShow = true;
|
||
},
|
||
drawLable(val) {
|
||
this.setDatas = {
|
||
title: "",
|
||
lng: val.lng,
|
||
lat: val.lat,
|
||
iconUrl: null,
|
||
remark: "",
|
||
};
|
||
switch (val.type) {
|
||
case 1:
|
||
this.setDatas.iconUrl = "火点";
|
||
break;
|
||
case 2:
|
||
this.setDatas.iconUrl = "集合点";
|
||
break;
|
||
case 3:
|
||
this.setDatas.iconUrl = "消防车";
|
||
break;
|
||
default:
|
||
break;
|
||
}
|
||
this.rightType = 3;
|
||
this.setVisibleShow = true;
|
||
},
|
||
getTaskList() {
|
||
getMethodCommon("/FireManagement/LoadAllTask",{
|
||
pageIndex:1,
|
||
pageSize:999,
|
||
}).then(res=>{
|
||
if(res.code == 200){
|
||
this.taskList = res.data;
|
||
this.drawTaskPoint();
|
||
}
|
||
})
|
||
},
|
||
// 绘制任务点图标
|
||
drawTaskPoint(){
|
||
if(this.taskGraphicLayer){
|
||
this.taskGraphicLayer.clear();
|
||
}else{
|
||
this.taskGraphicLayer = new this.mars3d.layer.GraphicLayer();
|
||
window.globalmap.addLayer(this.taskGraphicLayer);
|
||
}
|
||
this.taskList.forEach((item,index)=>{
|
||
let graphic = new mars3d.graphic.BillboardEntity({
|
||
position: [parseFloat(item.lng),parseFloat(item.lat)],
|
||
style: {
|
||
image: "/img/marktask.png",
|
||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||
clampToGround:true,
|
||
scale:0.4,
|
||
label: {
|
||
text: "任务点",
|
||
font_size: 14,
|
||
color: "#ffffff",
|
||
pixelOffsetY: 10,
|
||
distanceDisplayCondition: true,
|
||
distanceDisplayCondition_far: 500000,
|
||
distanceDisplayCondition_near: 0
|
||
}
|
||
},
|
||
"popup": `<div class="marsTiltPanel marsTiltPanel-theme-blue" style="font-size:12px;">
|
||
<div class="marsTiltPanel-wrap">
|
||
<div class="area">
|
||
<div class="arrow-lt"></div>
|
||
<div class="b-t"></div>
|
||
<div class="b-r"></div>
|
||
<div class="b-b"></div>
|
||
<div class="b-l"></div>
|
||
<div class="arrow-rb"></div>
|
||
<div class="label-wrap">
|
||
<div class="title">任务信息</div>
|
||
<div class="label-content">
|
||
<div class="data-li">
|
||
<div class="data-label">任务内容：${item.content? item.content:'暂无任务内容'}</div>
|
||
</div>
|
||
<div class="data-li">
|
||
<div class="data-label">任务地点：</div>
|
||
<div class="data-value"><span id="lablYeWei" class="label-num">${item.lng},${item.lat}</span><span class="label-unit"></span>
|
||
</div>
|
||
</div>
|
||
<div class="data-li">
|
||
<div class="data-label">任务创建时间：</div>
|
||
<div class="data-value"><span id="lablYeWei" class="label-num">${item.taskTime}</span><span class="label-unit"></span>
|
||
</div>
|
||
</div>
|
||
<div class="data-li">
|
||
<div class="data-value">
|
||
<span id="lablCSFM2" onclick="delTaskPoint(${item.id})" class="label-tag data-value-status-3" title="删除任务点">删除任务点</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="b-t-l"></div>
|
||
<div class="b-b-r"></div>
|
||
</div>
|
||
<div class="arrow" ></div>
|
||
</div>`,
|
||
"popupOptions":{
|
||
"offsetY":-30,
|
||
"template":"{content}",
|
||
"horizontalOrigin":"Cesium.HorizontalOrigin.LEFT",
|
||
"verticalOrigin":"Cesium.VerticalOrigin.CENTER"
|
||
},
|
||
attr: { remark: "火点"}
|
||
})
|
||
this.taskGraphicLayer.addGraphic(graphic) // 还可以另外一种写法: graphic.addTo(graphicLayer)
|
||
})
|
||
},
|
||
delTaskPoint(id){
|
||
postMethodCommon("/FireManagement/DeleteFireTask",[id]).then(res=>{
|
||
if(res.code==200){
|
||
this.$message({
|
||
type:"success",
|
||
message:"删除成功"
|
||
})
|
||
this.getTaskList();
|
||
}
|
||
})
|
||
},
|
||
|
||
// 一件呼叫
|
||
callUser() {
|
||
this.oneButtonCallShow = true;
|
||
},
|
||
diaToggle() {
|
||
if (this.callCenterVisible) {
|
||
document.getElementById("diatoggleBtn").style.right = "25px";
|
||
document.getElementById("layercontainer").style.left = "500px";
|
||
document.getElementById("shortcutbutton").style.right = "25px";
|
||
document.getElementById("footer").style.right = "25px";
|
||
document.getElementById("toolBarRightTogg").style.right = "25px !important";
|
||
document.getElementsByClassName("cesium-viewer-toolbar")[0].style.right = "25px !important";
|
||
// widgetJson.openAtStart[1].css.right = "25px";
|
||
// feixianConfigJson.map3d.control.compass.left = "25px";
|
||
} else {
|
||
document.getElementById("diatoggleBtn").style.right = "462px";
|
||
document.getElementById("layercontainer").style.left = "25px";
|
||
document.getElementById("shortcutbutton").style.right = "500px";
|
||
document.getElementById("footer").style.right = "460px";
|
||
document.getElementById("toolBarRightTogg").style.right = "500px !important";
|
||
// widgetJson.openAtStart[1].css.right = "500px";
|
||
// feixianConfigJson.map3d.control.compass.left = "500px";
|
||
}
|
||
|
||
// this.mars3d.widget.destroy();
|
||
// this.mars3d.widget.init(window.globalmap, widgetJson, "/");
|
||
// window.globalmap.options = feixianConfigJson.map3d;
|
||
|
||
this.callCenterVisible = !this.callCenterVisible;
|
||
this.rightDiaVisible = !this.rightDiaVisible;
|
||
this.toolsShow = !this.toolsShow;
|
||
},
|
||
// 视频通话
|
||
videoCall(phone) {
|
||
localStorage.setItem("callerName", phone);
|
||
this.videoCallShow = true;
|
||
},
|
||
endVideoCall() {
|
||
localStorage.setItem("callerName", "");
|
||
this.videoCallShow = false;
|
||
},
|
||
closeTask() {
|
||
this.getTaskList();
|
||
this.taskDeliveryShow = false;
|
||
},
|
||
mergeSuccess() {
|
||
this.mergeboxShow = false;
|
||
|
||
this.$message({
|
||
type: "success",
|
||
message: "合并成功！",
|
||
});
|
||
this.checkList = [];
|
||
this.checkNumber = [];
|
||
this.mergeSuccessRandom = Math.random();
|
||
this.getFirePointList();
|
||
},
|
||
// 获取火点列表 地图展示
|
||
getFirePointList() {
|
||
axios({
|
||
method: "get",
|
||
url: BASE_URL + "/FireManagement/GetFireInfo",
|
||
params: {
|
||
id: 0,
|
||
},
|
||
headers: {
|
||
"X-Token": localStorage.getItem("X-Token"),
|
||
},
|
||
}).then((res) => {
|
||
if (res.data.code == 200) {
|
||
this.drawFirePoint(res.data.data);
|
||
}
|
||
});
|
||
},
|
||
drawFirePoint(data) {
|
||
if (this.friePointLayer == null) {
|
||
this.friePointLayer = new this.mars3d.layer.GraphicLayer({ id: 999 });
|
||
window.globalmap.addLayer(this.friePointLayer);
|
||
} else {
|
||
this.friePointLayer.clear();
|
||
}
|
||
data.forEach((item, index) => {
|
||
let graphic = new mars3d.graphic.BillboardEntity({
|
||
position: [parseFloat(item.lng), parseFloat(item.lat)],
|
||
style: {
|
||
image: "/img/markfire.png",
|
||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||
clampToGround: true,
|
||
scale: 0.5,
|
||
label: {
|
||
text: "火点",
|
||
font_size: 14,
|
||
color: "#ffffff",
|
||
pixelOffsetY: 10,
|
||
distanceDisplayCondition: true,
|
||
distanceDisplayCondition_far: 500000,
|
||
distanceDisplayCondition_near: 0,
|
||
},
|
||
},
|
||
popup: `<div class="marsTiltPanel marsTiltPanel-theme-red" style="font-size:12px;">
|
||
<div class="marsTiltPanel-wrap">
|
||
<div class="area">
|
||
<div class="arrow-lt"></div>
|
||
<div class="b-t"></div>
|
||
<div class="b-r"></div>
|
||
<div class="b-b"></div>
|
||
<div class="b-l"></div>
|
||
<div class="arrow-rb"></div>
|
||
<div class="label-wrap">
|
||
<div class="title">火点信息</div>
|
||
<div class="label-content">
|
||
<div class="data-li">
|
||
<div class="data-label">火点地址：${item.address}</div>
|
||
</div>
|
||
<div class="data-li">
|
||
<div class="data-label">上报时间：</div>
|
||
<div class="data-value"><span id="lablYeWei" class="label-num">${item.createTime}</span><span class="label-unit"></span>
|
||
</div>
|
||
</div>
|
||
<div class="data-li">
|
||
<div class="data-value">
|
||
<span id="lablSBZT1" onclick="renyuan([${item.lng},${item.lat}]);" class="label-tag data-value-status-1" >附近人员</span>
|
||
<span id="lablCSFM2" onclick="shuiyuan([${item.lng},${item.lat}])" class="label-tag data-value-status-2" >附近水源</span>
|
||
<span id="lablCSFM2" onclick="wuzi([${item.lng},${item.lat}])" class="label-tag data-value-status-2" >周边物资</span>
|
||
<span id="lablCSFM2" onclick="delFirePoint(${item.id})" class="label-tag data-value-status-3" title="删除火点">删除火点</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="b-t-l"></div>
|
||
<div class="b-b-r"></div>
|
||
</div>
|
||
<div class="arrow" ></div>
|
||
</div>`,
|
||
popupOptions: {
|
||
offsetY: -30,
|
||
template: "{content}",
|
||
horizontalOrigin: "Cesium.HorizontalOrigin.LEFT",
|
||
verticalOrigin: "Cesium.VerticalOrigin.CENTER",
|
||
},
|
||
attr: { remark: "火点" },
|
||
});
|
||
this.friePointLayer.addGraphic(graphic); // 还可以另外一种写法: graphic.addTo(graphicLayer)
|
||
});
|
||
},
|
||
// 乐橙监控
|
||
showLCmonitorbox(e) {
|
||
this.channelId = e.channelId;
|
||
this.deviceId = e.deviceId;
|
||
this.LCmonitorboxShow = true;
|
||
},
|
||
changeCurrentInfo(item) {
|
||
this.currentInfo = item;
|
||
// this.reportSituationShow = true;
|
||
},
|
||
getAllReportList() {
|
||
this.reportlistShow = !this.reportlistShow;
|
||
},
|
||
// 退出登录
|
||
logout() {
|
||
// localStorage.setItem("X-Token", "");
|
||
// window.location.reload();
|
||
this.$router.push({ path: "/index" });
|
||
},
|
||
// 物资
|
||
wuzi(item) {
|
||
this.endLngLat = item;
|
||
this.goodsVisible = true;
|
||
},
|
||
// 监控
|
||
jiankong(e) {
|
||
// this.deviceId = "8L0995DPAG5DF32";
|
||
this.deviceId = e;
|
||
this.channelId = "0";
|
||
this.HKmonitorboxShow = true;
|
||
},
|
||
renyuan(item) {
|
||
this.currentInfo.lng = item[0];
|
||
this.currentInfo.lat = item[1];
|
||
this.personVisible = !this.personVisible;
|
||
},
|
||
// 水源
|
||
shuiyuan(item) {
|
||
this.waterCenter = item;
|
||
this.waterVisible = !this.waterVisible;
|
||
},
|
||
// 删除火点
|
||
delFirePoint(id) {
|
||
axios({
|
||
method: "post",
|
||
url: BASE_URL + "/FireManagement/DeleteFireInfo?id=" + id,
|
||
headers: {
|
||
"X-Token": localStorage.getItem("X-Token"),
|
||
},
|
||
}).then((res) => {
|
||
if (res.data.code == 200) {
|
||
this.$message({
|
||
type: "success",
|
||
message: "删除成功",
|
||
});
|
||
this.getFirePointList();
|
||
}
|
||
});
|
||
},
|
||
// 地图构造完成回调
|
||
onMapload(map) {
|
||
let _self = this;
|
||
window.globalmap = map;
|
||
this.finishLoadMap = true;
|
||
map.on(this.mars3d.EventType.click, this.onMapClick);
|
||
map.on(this.mars3d.EventType.clickTileGraphic, this.onMapClick);
|
||
// 创建entity图层
|
||
_self.graphicLayer = new this.mars3d.layer.GraphicLayer({
|
||
pid: 88,
|
||
});
|
||
//监听pop弹窗
|
||
_self.handlerlistenPopup(map);
|
||
map.addLayer(_self.graphicLayer);
|
||
// 灭火专班
|
||
let graphic = new mars3d.graphic.BillboardEntity({
|
||
position:
|
||
localStorage.getItem("areaName") == "feixian"
|
||
? [118.031537, 35.43147, 246]
|
||
: [117.838645, 35.503401, 248.7],
|
||
style: {
|
||
image:
|
||
"/img/miehuozhuanban-" + localStorage.getItem("areaName") + ".png",
|
||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||
clampToGround: true,
|
||
scale: 0.7,
|
||
label: {
|
||
text: "森林防灭火指挥中心",
|
||
font_size: 14,
|
||
color: "#ffffff",
|
||
pixelOffsetY: 10,
|
||
distanceDisplayCondition: true,
|
||
distanceDisplayCondition_far: 500000,
|
||
distanceDisplayCondition_near: 0,
|
||
},
|
||
},
|
||
attr: { remark: "森林防灭火指挥中心" },
|
||
});
|
||
|
||
_self.graphicLayer.addGraphic(graphic); // 还可以另外一种写法: graphic.addTo(graphicLayer)
|
||
|
||
_self.bindShowTilesParts();
|
||
const mapContextmenuItems = [
|
||
{
|
||
text: "设为火点",
|
||
show: function (e) {
|
||
return Cesium.defined(e.cartesian);
|
||
},
|
||
callback: (e) => {
|
||
const mpt = mars3d.LngLatPoint.fromCartesian(e.cartesian);
|
||
let url =
|
||
"https://restapi.amap.com/v3/geocode/regeo?key=" +
|
||
AppConfigInfo.gaodeApi +
|
||
"&location=" +
|
||
mpt._lng +
|
||
"," +
|
||
mpt._lat +
|
||
"&extensions=base";
|
||
axios({
|
||
method: "get",
|
||
url: url,
|
||
})
|
||
.then((res) => {
|
||
let name = res.data.regeocode.formatted_address;
|
||
this.setDatas = {
|
||
address: name,
|
||
lng: mpt._lng,
|
||
lat: mpt._lat,
|
||
describe: "",
|
||
areaname: localStorage.getItem("areaName"),
|
||
sourceType: 5,
|
||
};
|
||
this.rightType = 1;
|
||
})
|
||
.catch((err) => {
|
||
console.log("ee", err);
|
||
});
|
||
|
||
this.setVisibleShow = true;
|
||
},
|
||
},
|
||
{
|
||
text: "设为任务点",
|
||
show: function (e) {
|
||
return Cesium.defined(e.cartesian)
|
||
},
|
||
callback: (e) => {
|
||
const mpt = mars3d.LngLatPoint.fromCartesian(e.cartesian)
|
||
this.tasklng = mpt._lng
|
||
this.tasklat = mpt._lat
|
||
this.taskDeliveryShow = true
|
||
}
|
||
},
|
||
{
|
||
text: "查找周边",
|
||
show: function (e) {
|
||
return Cesium.defined(e.cartesian);
|
||
},
|
||
children: [
|
||
{
|
||
text: "人员",
|
||
callback: (e) => {
|
||
const mpt = mars3d.LngLatPoint.fromCartesian(e.cartesian);
|
||
console.log("aaa", mpt);
|
||
this.currentInfo = {
|
||
lng: mpt._lng,
|
||
lat: mpt._lat,
|
||
};
|
||
this.personVisible = true;
|
||
this.goodsVisible = false;
|
||
this.waterVisible = false;
|
||
},
|
||
},
|
||
{
|
||
text: "物资",
|
||
callback: (e) => {
|
||
const mpt = mars3d.LngLatPoint.fromCartesian(e.cartesian);
|
||
this.endLngLat = [mpt._lng, mpt._lat];
|
||
this.goodsVisible = true;
|
||
this.waterVisible = false;
|
||
this.personVisible = false;
|
||
|
||
},
|
||
},
|
||
{
|
||
text: "水源",
|
||
callback: (e) => {
|
||
const mpt = mars3d.LngLatPoint.fromCartesian(e.cartesian);
|
||
this.waterCenter = [mpt._lng, mpt._lat];
|
||
this.waterVisible = true;
|
||
this.goodsVisible = false;
|
||
this.personVisible = false;
|
||
clearRouterFunc()
|
||
},
|
||
},
|
||
],
|
||
},
|
||
{
|
||
text: "添加标注",
|
||
// show: function (e) {
|
||
// return Cesium.defined(e.cartesian)
|
||
// },
|
||
children: [
|
||
{
|
||
text: "火点",
|
||
callback: (e) => {
|
||
const mpt = mars3d.LngLatPoint.fromCartesian(e.cartesian);
|
||
this.setDatas = {
|
||
title: "",
|
||
lng: mpt._lng,
|
||
lat: mpt._lat,
|
||
iconUrl: "火点",
|
||
remark: "",
|
||
};
|
||
this.rightType = 3;
|
||
this.setVisibleShow = true;
|
||
},
|
||
},
|
||
{
|
||
text: "集合点",
|
||
callback: (e) => {
|
||
const mpt = mars3d.LngLatPoint.fromCartesian(e.cartesian);
|
||
this.setDatas = {
|
||
title: "",
|
||
lng: mpt._lng,
|
||
lat: mpt._lat,
|
||
iconUrl: "集合点",
|
||
remark: "",
|
||
};
|
||
this.rightType = 3;
|
||
this.setVisibleShow = true;
|
||
},
|
||
},
|
||
{
|
||
text: "消防车",
|
||
callback: (e) => {
|
||
const mpt = mars3d.LngLatPoint.fromCartesian(e.cartesian);
|
||
this.setDatas = {
|
||
title: "",
|
||
lng: mpt._lng,
|
||
lat: mpt._lat,
|
||
iconUrl: "消防车",
|
||
remark: "",
|
||
};
|
||
this.rightType = 3;
|
||
this.setVisibleShow = true;
|
||
},
|
||
},
|
||
// {
|
||
// text: "箭头",
|
||
// callback: (e) => {
|
||
// const mpt = mars3d.LngLatPoint.fromCartesian(e.cartesian)
|
||
// this.setDatas = {
|
||
// title: '',
|
||
// lng: mpt._lng,
|
||
// lat: mpt._lat,
|
||
// iconUrl:'箭头',
|
||
// remark: ''
|
||
// }
|
||
// this.rightType = 3
|
||
// this.setVisibleShow = true
|
||
// }
|
||
// }
|
||
],
|
||
},
|
||
];
|
||
map.bindContextMenu(mapContextmenuItems);
|
||
|
||
// 查询火点
|
||
_self.getFirePointList();
|
||
// 查询任务点
|
||
_self.getTaskList();
|
||
},
|
||
//监听点击图层事件
|
||
handlerlistenPopup(map) {
|
||
let _this = this
|
||
map.on(mars3d.EventType.popupOpen, function (event) {
|
||
if (event.graphic && event.graphic.options && event.graphic.options.attr.remark == "火点") {
|
||
_this.firePopupClosed = false;
|
||
}
|
||
});
|
||
map.on(mars3d.EventType.popupClose, function (event) {
|
||
if (event.graphic && event.graphic.options && event.graphic.options.attr.remark == "火点") {
|
||
_this.firePopupClosed = true;
|
||
}
|
||
})
|
||
},
|
||
onMapClick(e) { },
|
||
// 当前日期时间
|
||
handlerTime() {
|
||
let date = new Date();
|
||
this.time =
|
||
(date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) +
|
||
":" +
|
||
(date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
|
||
":" +
|
||
(date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds());
|
||
this.date =
|
||
date.getFullYear() +
|
||
"-" +
|
||
(date.getMonth() + 1 < 10
|
||
? "0" + (date.getMonth() + 1)
|
||
: date.getMonth() + 1) +
|
||
"-" +
|
||
(date.getDate() < 10 ? "0" + date.getDate() : date.getDate());
|
||
let workdays = ["日", "一", "二", "三", "四", "五", "六"];
|
||
this.workday = workdays[date.getDay()];
|
||
},
|
||
// 当前天气
|
||
getWeater() {
|
||
let _this = this;
|
||
jQuery.ajax({
|
||
url: "https://api.asilu.com/weather/",
|
||
type: "GET",
|
||
dataType: "jsonp",
|
||
data: {
|
||
city: AppConfig.area,
|
||
key: "adfdb863ddb1101bb6b40c0700d6203b",
|
||
},
|
||
success: function (res) {
|
||
_this.weater = res.weather[0].weather;
|
||
_this.temperature = res.weather[0].temp;
|
||
},
|
||
});
|
||
},
|
||
// 获取网络状态
|
||
getNetWorkState() {
|
||
if (window.navigator.onLine) {
|
||
this.newworkstate = "网络正常";
|
||
} else {
|
||
this.newworkstate = "网络断开";
|
||
}
|
||
let _this = this;
|
||
window.addEventListener("online", function (e) {
|
||
_this.newworkstate = "网络正常";
|
||
});
|
||
window.addEventListener("offline", function (e) {
|
||
_this.newworkstate = "网络断开";
|
||
_this.$message({
|
||
type: "error",
|
||
message: "网络已断开！",
|
||
});
|
||
});
|
||
},
|
||
// 添加天地图
|
||
addTileLayer(layer) {
|
||
this.removeTileLayer();
|
||
this.tileLayer = new mars3d.layer.TdtLayer({
|
||
name: "天地图影像注记",
|
||
layer: layer,
|
||
key: ["b6585bc41ee16251dbe6b1af64f375d9"],
|
||
zIndex: 1,
|
||
});
|
||
window.globalmap.addLayer(this.tileLayer);
|
||
},
|
||
// 移除底图
|
||
removeTileLayer() {
|
||
if (this.tileLayer) {
|
||
this.tileLayer.remove(true);
|
||
window.globalmap.removeLayer(this.tileLayer, true);
|
||
this.tileLayer = null;
|
||
}
|
||
},
|
||
// 邦定地图点击事件
|
||
bindShowTilesParts() {
|
||
let _this = this;
|
||
window.globalmap.on(mars3d.EventType.clickGraphic, function (event) {
|
||
_this.loadUserList(event);
|
||
});
|
||
},
|
||
// 点击事件获取人员
|
||
loadUserList(event) {
|
||
console.log("event222", event);
|
||
let layerName = event.layer.options.name;
|
||
// 如果是监控图层
|
||
if (layerName == "视频监控") {
|
||
console.log("event.graphic.options.attr", event.graphic.options.attr);
|
||
this.deviceId = event.graphic.options.attr["cameraindexcode"];
|
||
this.channelId = event.graphic.options.attr["channelno"];
|
||
this.HKmonitorboxShow = true;
|
||
return;
|
||
}
|
||
if (
|
||
layerName == "视频监控(86处)" ||
|
||
layerName == "林区监控" ||
|
||
layerName == "语音卡口"
|
||
) {
|
||
console.log("event:::", event);
|
||
// this.getMonitorList(event.graphic.options.position[0],event.graphic.options.position[1]);
|
||
this.getMonitorList(
|
||
event.graphic.options.attr.lng,
|
||
event.graphic.options.attr.lat
|
||
);
|
||
return;
|
||
}
|
||
// 其他图层
|
||
let queryName = event.graphic.options.attr["name2"];
|
||
let url = null;
|
||
switch (layerName) {
|
||
case "检查点":
|
||
url = "/FirePrevention/LoadjianchadianUser";
|
||
break;
|
||
case "检查站(87处)":
|
||
url = "/FirePrevention/LoadpyjianchadianUser";
|
||
break;
|
||
case "瞭望台":
|
||
url = "/FirePrevention/Loadliaowangtaiuser";
|
||
break;
|
||
case "护林点":
|
||
url = "/FirePrevention/LoadhulindianUser";
|
||
break;
|
||
case "防火驿站":
|
||
url = "/FirePrevention/Loadfanghuoyizhanuser";
|
||
break;
|
||
case "向导":
|
||
url = "/FirePrevention/Loadxiangdaouser";
|
||
break;
|
||
}
|
||
if (url) {
|
||
// 查询人员列表
|
||
this.loadUserListApi(url, queryName);
|
||
}
|
||
},
|
||
// 获取监控
|
||
getMonitorList(lng, lat) {
|
||
axios({
|
||
method: "get",
|
||
params: {
|
||
lng: lng,
|
||
lat: lat,
|
||
},
|
||
url: BASE_URL + "/Camera/GetCameraInfoByPoint",
|
||
}).then((res) => {
|
||
if (res.data.code == 200) {
|
||
res.data.data.forEach((item, index) => {
|
||
$(".popup-container").append(
|
||
"<div onclick='lookMonitorByMonitorLayer(" +
|
||
item.type +
|
||
',"' +
|
||
item.num +
|
||
'",' +
|
||
item.road +
|
||
");' class='monitor-btn' data-channelId='" +
|
||
item.type +
|
||
"' data-deviceId=" +
|
||
item.id +
|
||
" style='padding:4px 8px;text-align:center;font-size:14px;border-radius:2px;background:#108eff;color:#fff;margin:6px 0px;cursor:pointer;'><img src='/img/monitor-video.png' width='24px' style='position:relative;top:-2px;left:-4px;'/>" +
|
||
item.name +
|
||
"</div>"
|
||
);
|
||
});
|
||
}
|
||
});
|
||
},
|
||
// 获取人员
|
||
loadUserListApi(url, queryName) {
|
||
axios({
|
||
method: "get",
|
||
params: {
|
||
area: queryName,
|
||
},
|
||
url: BASE_URL + url,
|
||
}).then((data) => {
|
||
if (data.data.code == 200) {
|
||
data.data.data.forEach((item, index) => {
|
||
$(".popup-container").append(
|
||
`<div class='popup-item'>
|
||
${item.username}
|
||
<span data-phone='${item.phone
|
||
}' onmouseenter='showReadData(this);' onmouseleave='hiddenReadData(this);'>
|
||
${item.phone.replace(/(\d{3})\d*(\d{4})/, "$1****$2")}
|
||
</span>
|
||
${item.area} ${item.usertype}
|
||
</div>
|
||
`
|
||
);
|
||
});
|
||
}
|
||
});
|
||
},
|
||
// 监控信息
|
||
lookMonitorByMonitorLayer(type, id, road) {
|
||
if (type == 1) {
|
||
//乐橙
|
||
this.channelId = road;
|
||
this.deviceId = id;
|
||
this.LCmonitorboxShow = true;
|
||
} else if (type == 2) {
|
||
//海康
|
||
this.channelId = road;
|
||
this.deviceId = id;
|
||
this.HKmonitorboxShow = true;
|
||
}
|
||
},
|
||
},
|
||
destroyed() {
|
||
// 隐藏图层按钮
|
||
let opt = {
|
||
"name": "图层",
|
||
"icon": "fa fa-tasks",
|
||
"widget": "widgets/manageLayers/widget.js",
|
||
"uri": "widgets/manageLayers/widget.js"
|
||
}
|
||
window.mars3d.widget.disable(opt);
|
||
},
|
||
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.mapcontainer{
|
||
width:100vw;
|
||
height:100vh;
|
||
overflow: hidden;
|
||
}
|
||
.el-header {
|
||
width: 100%;
|
||
height: 90px;
|
||
position: absolute;
|
||
top: 0px;
|
||
left: 0px;
|
||
z-index: 999;
|
||
background-image: url("/img/header.png");
|
||
background-size: 100% 80px;
|
||
}
|
||
|
||
.app-name {
|
||
min-width: 200px;
|
||
height: 80px;
|
||
color: #fff;
|
||
line-height: 70px;
|
||
margin-left: 80px;
|
||
font-size: 30px;
|
||
font-weight: 600;
|
||
background-image: linear-gradient(180deg, #b8ffff, #ddffff);
|
||
-webkit-background-clip: text;
|
||
color: transparent;
|
||
}
|
||
|
||
.header-info {
|
||
min-width: 660px;
|
||
height: 30px;
|
||
position: absolute;
|
||
top: 30px;
|
||
right: 0px;
|
||
}
|
||
|
||
.weather-info {
|
||
width: 140px;
|
||
height: 25px;
|
||
line-height: 24px;
|
||
color: #fff;
|
||
float: left;
|
||
text-align: center;
|
||
padding: 0px 10px;
|
||
position: relative;
|
||
}
|
||
|
||
.weather-info::after {
|
||
content: "";
|
||
width: 2px;
|
||
height: 14px;
|
||
top: 6px;
|
||
background: #b8ffff;
|
||
position: absolute;
|
||
right: 0px;
|
||
}
|
||
|
||
.weather-info .weater {
|
||
font-size: 14px;
|
||
float: left;
|
||
}
|
||
|
||
.time-info {
|
||
width: 220px;
|
||
height: 25px;
|
||
line-height: 24px;
|
||
color: #fff;
|
||
text-align: center;
|
||
float: left;
|
||
margin: 0px 10px;
|
||
margin-right: 10px;
|
||
position: relative;
|
||
}
|
||
|
||
.time-info::after {
|
||
content: "";
|
||
width: 2px;
|
||
height: 14px;
|
||
top: 6px;
|
||
background: #b8ffff;
|
||
position: absolute;
|
||
right: 0px;
|
||
}
|
||
|
||
.time-info .time-time-info {
|
||
font-size: 14px;
|
||
float: left;
|
||
}
|
||
|
||
.newworkstate {
|
||
float: left;
|
||
height: 25px;
|
||
line-height: 24px;
|
||
color: #fff;
|
||
text-align: center;
|
||
padding: 0px 10px;
|
||
}
|
||
|
||
.logout-button {
|
||
width: 95px;
|
||
height: 25px;
|
||
background-image: url(/img/logout-bg.png);
|
||
background-size: 95px 25px;
|
||
float: right;
|
||
cursor: pointer;
|
||
float: left;
|
||
position: relative;
|
||
top: 0px;
|
||
left: 20px;
|
||
cursor: pointer;
|
||
z-index: 999999999999999999999999999;
|
||
}
|
||
|
||
/* 快捷按钮 */
|
||
.shortcut-button {
|
||
width: 140px;
|
||
min-height: 140px;
|
||
position: absolute;
|
||
top: 210px;
|
||
right: 500px;
|
||
z-index: 9999;
|
||
}
|
||
|
||
.shortcut-button .quick-button {
|
||
width: 140px;
|
||
height: 40px;
|
||
line-height: 40px;
|
||
text-align: center;
|
||
color: #fff;
|
||
background-image: url(/img/tool-button-bg.png);
|
||
background-size: 140px 40px;
|
||
margin-bottom: 20px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.tools {
|
||
min-width: 250px;
|
||
height: 10px;
|
||
position: absolute;
|
||
top: 130px;
|
||
left: 25px;
|
||
}
|
||
|
||
.task {
|
||
width: 480px;
|
||
height: calc(100vh - 750px);
|
||
position: absolute;
|
||
right: 450px;
|
||
top: 300px;
|
||
}
|
||
|
||
.tools-box {
|
||
width: 250px;
|
||
height: 100%;
|
||
float: left;
|
||
margin-right: 15px;
|
||
}
|
||
|
||
.tools-boxs {
|
||
width: 420px;
|
||
height: calc(100% - 640px);
|
||
position: absolute;
|
||
bottom: 50px;
|
||
left: 25px;
|
||
}
|
||
|
||
.huoqing-box {
|
||
width: 480px;
|
||
height: 360px;
|
||
position: absolute;
|
||
top: 130px;
|
||
left: 25px;
|
||
z-index: 99;
|
||
}
|
||
|
||
.merage-box {
|
||
width: 480px;
|
||
height: 360px;
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
z-index: 99;
|
||
}
|
||
|
||
.grid-container {
|
||
width: 1200px;
|
||
padding-top: 100px;
|
||
height: 560px;
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
background-image: url(/img/wg-bg.png);
|
||
background-size: 100% 100%;
|
||
transform: translate(-50%, -50%);
|
||
z-index: 2000;
|
||
}
|
||
|
||
.personnel-container {
|
||
width: 525px;
|
||
height: 735px;
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 20px;
|
||
background-image: url(/img/person.png);
|
||
background-size: 100% 100%;
|
||
transform: translate(0, -50%);
|
||
z-index: 2000;
|
||
}
|
||
|
||
.goods-container {
|
||
width: 603px;
|
||
height: 457px;
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 20px;
|
||
background-image: url(/img/goods.png);
|
||
background-size: 100% 100%;
|
||
transform: translate(0, 0);
|
||
z-index: 2000;
|
||
}
|
||
|
||
.water-container{
|
||
width: 603px;
|
||
height: 457px;
|
||
position: absolute;
|
||
top: 100px;
|
||
left: 20px;
|
||
background-image: url(/img/goods.png);
|
||
background-size: 100% 100%;
|
||
transform: translate(0, 0);
|
||
z-index: 2000;
|
||
}
|
||
|
||
.socket-container {
|
||
width: 500px;
|
||
height: 457px;
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 20px;
|
||
background-image: url(/img/goods.png);
|
||
background-size: 100% 100%;
|
||
transform: translate(0, -50%);
|
||
z-index: 2000;
|
||
}
|
||
|
||
.bottom-tools-container {
|
||
min-width: 200px;
|
||
height: 200px;
|
||
position: absolute;
|
||
bottom: 60px;
|
||
left: 25px;
|
||
z-index: 1999;
|
||
}
|
||
|
||
.uav {
|
||
width: 250px;
|
||
height: 200px;
|
||
float: left;
|
||
margin-right: 15px;
|
||
}
|
||
|
||
/* 监控 */
|
||
.monitor {
|
||
width: 340px;
|
||
height: 200px;
|
||
float: left;
|
||
margin-right: 15px;
|
||
position: relative;
|
||
}
|
||
|
||
.close-button {
|
||
position: absolute;
|
||
right: 20px;
|
||
top: 14px;
|
||
cursor: pointer;
|
||
color: #fff;
|
||
font-weight: bold;
|
||
width: 20px;
|
||
height: 20px;
|
||
background: #0abfb5cc;
|
||
line-height: 20px;
|
||
text-align: center;
|
||
}
|
||
|
||
/* 火情调度 */
|
||
.situation {
|
||
width: 480px;
|
||
height: 100%;
|
||
float: left;
|
||
margin-right: 15px;
|
||
background-image: url(/img/tool-bg.png);
|
||
background-size: 100% 100%;
|
||
padding: 15px 15px 0px 15px;
|
||
}
|
||
|
||
.situation-info {
|
||
color: #eee;
|
||
line-height: 18px;
|
||
padding: 10px 10px 0px 10px;
|
||
}
|
||
|
||
.situation-tab-container {
|
||
width: 100%;
|
||
height: 50px;
|
||
border-bottom: 1px solid #2f5d55;
|
||
margin: 0px auto;
|
||
}
|
||
|
||
.situation-tab {
|
||
width: 70px;
|
||
font-size: 12px;
|
||
height: 50px;
|
||
line-height: 50px;
|
||
color: #0abfb5;
|
||
float: left;
|
||
cursor: pointer;
|
||
text-align: center;
|
||
}
|
||
|
||
/* 最有路线 */
|
||
.route {
|
||
width: 325px;
|
||
height: 200px;
|
||
float: left;
|
||
margin-right: 15px;
|
||
}
|
||
|
||
/* 附近水源地 */
|
||
.water {
|
||
width: 325px;
|
||
height: 455px;
|
||
position: absolute;
|
||
left: 400px;
|
||
top: 200px;
|
||
}
|
||
|
||
/* 火情上报 */
|
||
.report {
|
||
position: absolute;
|
||
width: 340px;
|
||
height: 140px;
|
||
bottom: 100px;
|
||
right: 70px;
|
||
}
|
||
|
||
.footer {
|
||
width: 100%;
|
||
height: 50px;
|
||
position: absolute;
|
||
bottom: 0px;
|
||
right: 460px;
|
||
background-size: 1920px 50px;
|
||
background-position: 1920px 0px;
|
||
z-index: 99999;
|
||
}
|
||
|
||
.footer .base-layer-change-button {
|
||
float: right;
|
||
width: 150px;
|
||
height: 40px;
|
||
background-image: url(/img/base-layer-button-bg.png);
|
||
background-size: 150px 40px;
|
||
text-align: center;
|
||
line-height: 40px;
|
||
position: relative;
|
||
top: -40px;
|
||
right: 0px;
|
||
font-size: 16px;
|
||
cursor: pointer;
|
||
color: #ffffff;
|
||
}
|
||
|
||
.layercontainer {
|
||
position: absolute;
|
||
z-index: 9;
|
||
left: 460px;
|
||
bottom: 50px;
|
||
width: 56px;
|
||
display: none;
|
||
}
|
||
|
||
.layerplugbox {
|
||
width: 100%;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.layerControlBtn {
|
||
width: 56px;
|
||
height: 56px;
|
||
border-radius: 56px;
|
||
background: linear-gradient(180deg, #062020 0%, #041515 100%);
|
||
}
|
||
|
||
.callCenterBox {
|
||
position: fixed;
|
||
left: 25px;
|
||
top: 110px;
|
||
z-index: 9;
|
||
width: 421px;
|
||
height: 462px;
|
||
background-image: url(/img/callcenter.png);
|
||
background-size: 100% 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 20px 15px;
|
||
}
|
||
|
||
.rightdiabox {
|
||
width: 420px;
|
||
height: calc(100% - 135px);
|
||
position: absolute;
|
||
right: 25px;
|
||
bottom: 50px;
|
||
z-index: 9;
|
||
}
|
||
|
||
.rightbox1 {
|
||
height: 32%;
|
||
background-image: url(/img/commonbg1.png);
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.rightbox2 {
|
||
height: 33%;
|
||
background-image: url(/img/commonbg1.png);
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.diatoggleBtn {
|
||
width: 32px;
|
||
height: 32px;
|
||
background-image: url(/img/togglebg.png);
|
||
background-size: 100% 100%;
|
||
position: absolute;
|
||
right: 462px;
|
||
bottom: 115px;
|
||
z-index: 9;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.one-button-container {
|
||
width: 1000px;
|
||
height: 600px;
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
z-index: 999;
|
||
}
|
||
|
||
.online-user-container {
|
||
width: 800px;
|
||
height: 400px;
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
z-index: 999999999;
|
||
}
|
||
</style>
|