代码整合
parent
55e4f23690
commit
933d3d001d
7
.env.dev
7
.env.dev
|
|
@ -14,5 +14,8 @@ VUE_APP_OIDC_SILENTREDIRECTURI = http://112.233.241.108:1803/silent-renew-oidc.h
|
|||
|
||||
|
||||
|
||||
VUE_APP_BASE_API =http://223.99.16.253:9001/api
|
||||
VUE_APP_BASE_IMG_URL =http://223.99.16.253:9001
|
||||
#VUE_APP_BASE_API =http://223.99.16.253:9001/api
|
||||
#VUE_APP_BASE_IMG_URL =http://223.99.16.253:9001
|
||||
|
||||
VUE_APP_BASE_API = http://123.132.248.154:9224/api
|
||||
VUE_APP_BASE_IMG_URL = http://123.132.248.154:9224
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
{
|
||||
"method":"feixian",
|
||||
"pingyixian":{
|
||||
"appname":"平邑县森林防火电子沙盘",
|
||||
"area":"平邑县",
|
||||
"baseUrl":"",
|
||||
"waterUrl":"http://175.27.168.120:8080/geoserver/pingyixian/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=pingyixian%3Ashuiyuandi_new&maxFeatures=50000&outputFormat=application%2Fjson",
|
||||
"goodsUrl":"",
|
||||
"tools":{
|
||||
"routebox":true,
|
||||
"toolsbox":true,
|
||||
"monitorbox":true,
|
||||
"uavbox":true,
|
||||
"waterbox":true,
|
||||
"reportbox":false,
|
||||
"goodsbox":true,
|
||||
"griderbox":false
|
||||
}
|
||||
},
|
||||
"feixian":{
|
||||
"appname":"费县森林防火电子沙盘",
|
||||
"area":"费县",
|
||||
"baseUrl":"",
|
||||
"goodsUrl":"",
|
||||
"tools":{
|
||||
"routebox":true,
|
||||
"toolsbox":true,
|
||||
"monitorbox":true,
|
||||
"uavbox":true,
|
||||
"waterbox":true,
|
||||
"reportbox":true,
|
||||
"goodsbox":true,
|
||||
"griderbox":true
|
||||
}
|
||||
},
|
||||
"gaoxinqu":{
|
||||
"appname":"高新区森林防火电子沙盘",
|
||||
"area":"高新区",
|
||||
"baseUrl":"",
|
||||
"goodsUrl":"",
|
||||
"tools":{
|
||||
"routebox":true,
|
||||
"toolsbox":true,
|
||||
"monitorbox":true,
|
||||
"uavbox":true,
|
||||
"waterbox":true
|
||||
}
|
||||
},
|
||||
"lanlingxian":{
|
||||
"appname":"兰陵县森林防火电子沙盘",
|
||||
"area":"兰陵县",
|
||||
"baseUrl":"",
|
||||
"goodsUrl":"",
|
||||
"tools":{
|
||||
"routebox":true,
|
||||
"toolsbox":true,
|
||||
"monitorbox":true,
|
||||
"uavbox":true,
|
||||
"waterbox":true
|
||||
}
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 9.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
|
|
@ -7,7 +7,7 @@
|
|||
<meta name="author" content="山东慧创 http://www.hopetrytech.com ">
|
||||
<link rel="icon" href="<%= BASE_URL %>sitelogo.jpg">
|
||||
|
||||
<title>临沂国家高新区数据资源平台</title>
|
||||
<title>林业防火平台</title>
|
||||
|
||||
<!--第三方lib-->
|
||||
<script
|
||||
|
|
|
|||
|
|
@ -74,7 +74,6 @@ haoutil.loading = {
|
|||
else {
|
||||
param.template = '<div class="bar ' + (param.className || '') + '" role="bar"></div><div class="spinner" role="spinner"><div class="spinner-icon"></div></div>';
|
||||
}
|
||||
|
||||
NProgress.configure(param);
|
||||
NProgress.start();
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
|
|
@ -63,6 +63,10 @@ export default {
|
|||
} else {
|
||||
|
||||
mars3d.Resource.fetchJson({ url: this.url }).then((data) => {
|
||||
|
||||
console.log("datadatadatadata:::::",data);
|
||||
|
||||
|
||||
this.initMars3d(data.map3d)// 构建地图
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<div id="centerDiv" class="mapcontainer">
|
||||
<!-- 头部 -->
|
||||
<div class="el-header">
|
||||
<div class="app-name">平邑县林业防火电子沙盘</div>
|
||||
<div class="app-name">{{appName}}</div>
|
||||
|
||||
<div class="header-info">
|
||||
<!-- 天气中心 -->
|
||||
|
|
@ -16,68 +16,119 @@
|
|||
<div class="time-date-info">{{date}}</div>
|
||||
</div>
|
||||
<!-- 退出按钮 -->
|
||||
<div class="logout-button"></div>
|
||||
<div class="logout-button" @click="logout()"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 快捷按钮 -->
|
||||
<div class="shortcut-button">
|
||||
|
||||
<div class="quick-button" @click="toolsShow = !toolsShow">常用工具</div>
|
||||
<div class="quick-button" v-if="appTools['toolsbox']" @click="toolsShow = !toolsShow">常用工具</div>
|
||||
|
||||
<div class="quick-button" @click="uavShow = !uavShow">视频巡航</div>
|
||||
<div class="quick-button" v-if="appTools['uavbox']" @click="uavShow = !uavShow">视频巡航</div>
|
||||
|
||||
<div class="quick-button" @click="routeShow = !routeShow">路线规划</div>
|
||||
<div class="quick-button" v-if="appTools['routebox']" @click="routeShow = !routeShow">路线规划</div>
|
||||
|
||||
<div class="quick-button" @click="monitorShow = !monitorShow">视频监控</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>
|
||||
|
||||
|
||||
<!-- 地图 -->
|
||||
<Map style="width:100%;height:100vh;" :url="configUrl" :widgetUrl="widgetUrl" @onload="onMapload" />
|
||||
|
||||
<!-- 工具箱 -->
|
||||
<div class="tools" v-show="toolsShow">
|
||||
<toolbox :globalmap="globalmap"></toolbox>
|
||||
<div class="tools" >
|
||||
<div class="tools-box" v-show="toolsShow && appTools['toolsbox']">
|
||||
<toolbox :globalmap="globalmap"></toolbox>
|
||||
</div>
|
||||
|
||||
<div class="tools-box" v-if="reportlistShow">
|
||||
<reportlist @wuzi="wuzi" @shuiyuan="shuiyuan" :globalmap="globalmap"></reportlist>
|
||||
</div>
|
||||
|
||||
<!-- 火情调度 -->
|
||||
<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>
|
||||
<!-- -->
|
||||
<!-- 附近水源 -->
|
||||
<waterbox v-show="appTools['waterbox'] && active == 3" :waterCenter="waterCenter" :globalmap="globalmap"></waterbox>
|
||||
<!-- 物资调度 -->
|
||||
<goodsbox v-show="appTools['goodsbox'] && active == 4" :endLngLat="endLngLat" :globalmap="globalmap"></goodsbox>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- <div class="monitor"></div> -->
|
||||
|
||||
|
||||
<!-- 附近水源 -->
|
||||
<div class="water" v-show="false">
|
||||
<waterbox></waterbox>
|
||||
<!-- 网格化管理 -->
|
||||
<div class="grid-container" v-show="appTools['griderbox'] && griderShow">
|
||||
<gridbox ></gridbox>
|
||||
</div>
|
||||
|
||||
<div class="bottom-tools-container">
|
||||
|
||||
<!-- 无人机 -->
|
||||
<div class="uav" v-if="uavShow">
|
||||
<div class="uav" v-if="uavShow && appTools['uavbox']">
|
||||
<uavbox></uavbox>
|
||||
</div>
|
||||
|
||||
<!-- 最优路线规划 -->
|
||||
<div class="route" v-show="routeShow">
|
||||
<div class="route" v-show="routeShow && appTools['routebox']">
|
||||
<routebox :globalmap="globalmap"></routebox>
|
||||
</div>
|
||||
|
||||
<!-- 监控列表 -->
|
||||
<div class="monitor" v-if="monitorShow">
|
||||
<div class="monitor" v-if="monitorShow && appTools['monitorbox']">
|
||||
<monitorbox></monitorbox>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<!-- -->
|
||||
|
||||
<!-- 火情上报 -->
|
||||
<div class="report" v-if="appTools['reportbox']">
|
||||
<reportbox @getAllReportList="getAllReportList"></reportbox>
|
||||
</div>
|
||||
<!-- 脚部 -->
|
||||
<div class="footer">
|
||||
<div class="base-layer-change-button">电子地图</div>
|
||||
<div class="base-layer-change-button" :style="{'margin-right':'40px'}">卫星地图</div>
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 请求接口获取全部路由和工具箱信息
|
||||
import { getModules } from '@/api/modules.js';
|
||||
|
||||
import AppConfigInfo from '../../../public/config/app.json'
|
||||
|
||||
import Map from '@/components/mars3d/Map.vue'
|
||||
// import widgetdiv from '@/components/Widget/index.vue'
|
||||
import Uavbox from './widget/uavbox.vue'
|
||||
|
|
@ -85,8 +136,15 @@ 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 axios from 'axios';
|
||||
import jQuery from 'jquery'
|
||||
import jQuery from 'jquery';
|
||||
|
||||
export default {
|
||||
name: 'business',
|
||||
components: {
|
||||
|
|
@ -96,15 +154,31 @@ export default {
|
|||
toolbox,
|
||||
monitorbox,
|
||||
routebox,
|
||||
waterbox
|
||||
waterbox,
|
||||
reportbox,
|
||||
goodsbox,
|
||||
reportlist,
|
||||
trendsbox,
|
||||
taskbox,
|
||||
gridbox
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
endLngLat:null,
|
||||
appName:null,
|
||||
appTools:null,
|
||||
toolsShow:true,
|
||||
routeShow:true,
|
||||
uavShow:true,
|
||||
monitorShow:true,
|
||||
waterShow:false,
|
||||
goodsbox:false,
|
||||
goodsShow:false,
|
||||
griderShow:false,
|
||||
reportSituationShow:false,
|
||||
reportlistShow:false,
|
||||
waterCenter:null,
|
||||
date:null,
|
||||
time:null,
|
||||
weater:null,
|
||||
|
|
@ -112,12 +186,34 @@ export default {
|
|||
globalmap:null,
|
||||
configUrl: "config/config.json",
|
||||
widgetUrl: "config/widget.json",
|
||||
tileLayer:null,
|
||||
active:1,
|
||||
currentInfo:{
|
||||
"id": 443095135416325,
|
||||
"reportPerson": "feixian",
|
||||
"reportTime": "2023-07-26 11:38:45",
|
||||
"describe": "费县东蒙镇发生火情，请立即排查",
|
||||
"lng": "117.369",
|
||||
"lat": "35.963",
|
||||
"address": "费县东蒙镇",
|
||||
"sourceType": 2,
|
||||
"state": 1,
|
||||
"createId": "8465b1c7-a710-492e-91e2-c61562f7358e",
|
||||
"areaName": "feixian",
|
||||
"sourceTypeName": "摄像机",
|
||||
"stateName": "上报"
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
mounted(){
|
||||
|
||||
},
|
||||
created(){
|
||||
window.AppConfig = AppConfigInfo[AppConfigInfo.method];
|
||||
this.appName = AppConfig.appname;
|
||||
this.appTools = AppConfig.tools;
|
||||
let _this = this;
|
||||
// 每秒更新日期时间
|
||||
setInterval(function(){
|
||||
|
|
@ -128,6 +224,26 @@ export default {
|
|||
this.getWeater();
|
||||
},
|
||||
methods: {
|
||||
getAllReportList(){
|
||||
this.reportlistShow = true;
|
||||
},
|
||||
// 退出登录
|
||||
logout(){
|
||||
alert(111);
|
||||
localStorage.setItem("X-Token",null);
|
||||
this.$router.push({'path':'/login'})
|
||||
},
|
||||
// 物资
|
||||
wuzi(item){
|
||||
this.endLngLat = item
|
||||
console.log("itemitem",item);
|
||||
this.goodsShow = true;
|
||||
},
|
||||
// 水源
|
||||
shuiyuan(item){
|
||||
this.waterCenter = item;
|
||||
this.waterShow = true;
|
||||
},
|
||||
// 地图构造完成回调
|
||||
onMapload(map) {
|
||||
let _self = this;
|
||||
|
|
@ -151,7 +267,7 @@ export default {
|
|||
clampToGround:true,
|
||||
scale:0.7,
|
||||
label: {
|
||||
text: "平邑县森林防灭火指挥中心",
|
||||
text: "森林防灭火指挥中心",
|
||||
font_size: 14,
|
||||
color: "#ffffff",
|
||||
pixelOffsetY: 10,
|
||||
|
|
@ -160,11 +276,11 @@ export default {
|
|||
distanceDisplayCondition_near: 0
|
||||
}
|
||||
},
|
||||
attr: { remark: "平邑县森林防灭火指挥中心" }
|
||||
})
|
||||
attr: { remark: "森林防灭火指挥中心" }
|
||||
})
|
||||
|
||||
_self.graphicLayer.addGraphic(graphic) // 还可以另外一种写法: graphic.addTo(graphicLayer)
|
||||
|
||||
|
||||
|
||||
},
|
||||
|
||||
onMapClick(e){
|
||||
|
|
@ -184,7 +300,7 @@ export default {
|
|||
type: 'GET',
|
||||
dataType: 'jsonp',
|
||||
data: {
|
||||
"city": '临沂',
|
||||
"city": AppConfig.area,
|
||||
"key": "adfdb863ddb1101bb6b40c0700d6203b",
|
||||
},
|
||||
success: function (res) {
|
||||
|
|
@ -193,6 +309,26 @@ export default {
|
|||
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 添加天地图
|
||||
addTileLayer(layer) {
|
||||
this.removeTileLayer()
|
||||
this.tileLayer = new mars3d.layer.TdtLayer({
|
||||
name: "天地图影像注记",
|
||||
layer: layer,
|
||||
key: ['b6585bc41ee16251dbe6b1af64f375d9'],
|
||||
zIndex:1,
|
||||
})
|
||||
this.globalmap.addLayer(this.tileLayer)
|
||||
},
|
||||
// 移除底图
|
||||
removeTileLayer() {
|
||||
if (this.tileLayer) {
|
||||
this.tileLayer.remove(true);
|
||||
this.globalmap.removeLayer(this.tileLayer, true)
|
||||
this.tileLayer = null
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -287,6 +423,8 @@ export default {
|
|||
float:left;
|
||||
position: relative;
|
||||
top:10px;
|
||||
cursor:pointer;
|
||||
z-index:999999999999999999999999999;
|
||||
}
|
||||
|
||||
/* 快捷按钮 */
|
||||
|
|
@ -313,13 +451,33 @@ export default {
|
|||
|
||||
|
||||
.tools{
|
||||
width:250px;
|
||||
min-width:250px;
|
||||
height: calc( 100vh - 440px);
|
||||
position: absolute;
|
||||
top:130px;
|
||||
left:25px;
|
||||
}
|
||||
|
||||
.tools-box{
|
||||
width:250px;
|
||||
height:100%;
|
||||
float:left;
|
||||
margin-right:15px;
|
||||
}
|
||||
|
||||
.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:99999999999999999;
|
||||
}
|
||||
|
||||
.bottom-tools-container{
|
||||
min-width:200px;
|
||||
height:200px;
|
||||
|
|
@ -342,6 +500,39 @@ export default {
|
|||
float:left;
|
||||
margin-right:15px;
|
||||
}
|
||||
/* 火情调度 */
|
||||
.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;
|
||||
|
|
@ -357,6 +548,14 @@ export default {
|
|||
left:400px;
|
||||
top:200px;
|
||||
}
|
||||
/* 火情上报 */
|
||||
.report{
|
||||
position:absolute;
|
||||
width:340px;
|
||||
height:140px;
|
||||
bottom:100px;
|
||||
right:70px;
|
||||
}
|
||||
.footer{
|
||||
width:100%;
|
||||
height:50px;
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ function parse(input) {
|
|||
return match[0];
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function crs(obj) {
|
||||
if (obj && srid.match(/\d+/)) {
|
||||
obj.crs = {
|
||||
|
|
@ -32,7 +32,7 @@ function parse(input) {
|
|||
}
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
return obj;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,416 @@
|
|||
<template>
|
||||
<div class="box">
|
||||
<div class="box-title" >
|
||||
<el-input type="text" size="mini" style="width:160px;float:left;margin-right:12px;" v-model="listQuery.wuzi"></el-input>
|
||||
<el-button type="primary" size="mini" icon="el-icon-search" @click="getWaterList">查询</el-button>
|
||||
|
||||
</div>
|
||||
<div class="box-container">
|
||||
<div class="table-body">
|
||||
<!-- <div class="item" v-for="(item,index) in nestWaterPoints" :key="index">
|
||||
<div>水源点{{index+1}}</div>
|
||||
<div>{{item.distance}}km</div>
|
||||
<div class="float:right;text-align:right;">
|
||||
<i class="el-icon el-icon-position" @click="flyToPosition([item.lngLat[0],item.lngLat[1]])"></i>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="item" v-for="(item,index) in waterPoints" :key="index">
|
||||
<div>物资名称：{{item.street}}{{item.name}}
|
||||
|
||||
<el-button type="primary" size="mini" icon="el-icon-position" style="float:right;" @click="flyToPosition(item)">
|
||||
路线
|
||||
</el-button>
|
||||
</div>
|
||||
<div>物资明细：{{item.info}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import appConfig from '../../../../public/config/app.json'
|
||||
import { parse } from '../lib/handleGeojson'
|
||||
import * as turf from '@turf/turf'
|
||||
import axios from "axios";
|
||||
export default {
|
||||
name: 'monitorbox',
|
||||
props:['globalmap','endLngLat'],
|
||||
data(){
|
||||
return{
|
||||
startLngLat:null,
|
||||
list:[],
|
||||
listQuery:{
|
||||
wuzi:null,
|
||||
areaname:'费县'
|
||||
},
|
||||
waterPoints:null,
|
||||
nestWaterPoints:[],
|
||||
echartsLayer:null,
|
||||
pathPointGraphicLayer:null,
|
||||
goodsGraphicLayer:null,
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
endLngLat:function(e){
|
||||
|
||||
}
|
||||
},
|
||||
created(){
|
||||
this.getWaterList();
|
||||
},
|
||||
methods:{
|
||||
getWaterList(){
|
||||
axios({
|
||||
method: 'get',
|
||||
url: "http://123.132.248.154:9224/api/FirePrevention/Loadwuzichubei",
|
||||
params:this.listQuery,
|
||||
headers:{
|
||||
"X-Token":localStorage.getItem("X-Token"),
|
||||
}
|
||||
}).then(res => {
|
||||
this.waterPoints = res.data.data;
|
||||
this.addGoodsLayer();
|
||||
})
|
||||
},
|
||||
flyToPosition(item){
|
||||
let lngLat = parse(item.geom).coordinates;
|
||||
this.startLngLat = lngLat;
|
||||
this.getRoutePath();
|
||||
this.globalmap.flyToPoint(lngLat,{radius:400,"pitch":-90});
|
||||
},
|
||||
getRoutePath(){ // 获取路线数据
|
||||
let startCoor = this.startLngLat;
|
||||
let endCoor = this.endLngLat;
|
||||
|
||||
axios({
|
||||
method: 'get',
|
||||
url: 'http://123.132.248.154:9210/api/FirePrevention/LoadRoad',
|
||||
headers:{
|
||||
"X-Token":localStorage.getItem("X-Token"),
|
||||
},
|
||||
params: {
|
||||
startlng: parseFloat(startCoor[0]),
|
||||
startlat: parseFloat(startCoor[1]),
|
||||
endlng: parseFloat(endCoor[0]),
|
||||
endlat: parseFloat(endCoor[1]),
|
||||
}
|
||||
}).then(data => {
|
||||
if (data.data.data.length > 0) {
|
||||
let LineString = data.data.data[0].route;
|
||||
if(LineString == null || LineString == "null"){
|
||||
|
||||
}else{
|
||||
let _this = this;
|
||||
console.log("LineStringing",LineString);
|
||||
setTimeout(function () {
|
||||
_this.drawRoutePath(parse(LineString));
|
||||
// designPath(parse(LineString));
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
}else{
|
||||
|
||||
}
|
||||
})
|
||||
},
|
||||
drawRoutePath(geojson) { // 绘制路线
|
||||
if(this.pathPointGraphicLayer == null){
|
||||
this.pathPointGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
this.globalmap.addLayer(this.pathPointGraphicLayer);
|
||||
}
|
||||
|
||||
this.pathPointGraphicLayer.clear();
|
||||
|
||||
if(geojson.type=="LineString"){
|
||||
geojson.coordinates = [geojson.coordinates]
|
||||
}
|
||||
|
||||
// 虚线部分
|
||||
var startCoor = this.startLngLat;
|
||||
var endCoor =this.endLngLat;
|
||||
// 起始点坐标
|
||||
var startCoorArr = [parseFloat(startCoor[0]), parseFloat(startCoor[1])]
|
||||
// 终点坐标
|
||||
var endCoorArr = [parseFloat(endCoor[0]), parseFloat(endCoor[1])]
|
||||
|
||||
var startTurfPoint = turf.point(startCoorArr);
|
||||
var endTurfPoint = turf.point(endCoorArr);
|
||||
|
||||
// 起始路线部分
|
||||
var startPath = [];
|
||||
geojson.coordinates[0].forEach((item, index) => {
|
||||
startPath.push(turf.point([item[0], item[1]]));
|
||||
})
|
||||
|
||||
var startTurfPath = turf.featureCollection(startPath);
|
||||
var startNearestPoint = turf.nearestPoint(startTurfPoint, startTurfPath);
|
||||
|
||||
var startNearestPointLngLat = null;
|
||||
if (startNearestPoint) {
|
||||
startNearestPointLngLat = startNearestPoint.geometry.coordinates;
|
||||
var graphic = new mars3d.graphic.PolylineEntity({
|
||||
positions: [
|
||||
startCoorArr,
|
||||
startNearestPointLngLat,
|
||||
],
|
||||
style: {
|
||||
width: 5,
|
||||
clampToGround: true,
|
||||
materialType: mars3d.MaterialType.PolylineDash,
|
||||
materialOptions: {
|
||||
color: Cesium.Color.YELLOW,
|
||||
dashLength: 8.0
|
||||
}
|
||||
},
|
||||
attr: { remark: "虚线" }
|
||||
})
|
||||
this.pathPointGraphicLayer.addGraphic(graphic)
|
||||
}
|
||||
|
||||
// 终点路线部分
|
||||
var endPath = [];
|
||||
geojson.coordinates[geojson.coordinates.length - 1].forEach((item, index) => {
|
||||
endPath.push(turf.point([item[0], item[1]]));
|
||||
})
|
||||
var endTurfPath = turf.featureCollection(endPath);
|
||||
var endNearestPoint = turf.nearestPoint(endTurfPoint, endTurfPath);
|
||||
|
||||
var endNearestPointLngLat = null;
|
||||
if (endNearestPoint) {
|
||||
endNearestPointLngLat = endNearestPoint.geometry.coordinates;
|
||||
var graphic = new mars3d.graphic.PolylineEntity({
|
||||
positions: [
|
||||
endCoorArr,
|
||||
endNearestPointLngLat,
|
||||
],
|
||||
style: {
|
||||
width: 5,
|
||||
clampToGround: true,
|
||||
materialType: mars3d.MaterialType.PolylineDash,
|
||||
materialOptions: {
|
||||
color: Cesium.Color.YELLOW,
|
||||
dashLength: 8.0
|
||||
}
|
||||
},
|
||||
attr: { remark: "虚线" }
|
||||
})
|
||||
this.pathPointGraphicLayer.addGraphic(graphic)
|
||||
}
|
||||
|
||||
// 漫游数据
|
||||
var tripArr = [];
|
||||
// 实线路线部分
|
||||
geojson.coordinates.forEach((item, index) => {
|
||||
tripArr = tripArr.concat(item);
|
||||
})
|
||||
|
||||
var graphic = new mars3d.graphic.PolylineEntity({
|
||||
positions: tripArr,
|
||||
style: {
|
||||
width: 5,
|
||||
clampToGround: true,
|
||||
materialType: mars3d.MaterialType.LineFlow,
|
||||
materialOptions: {
|
||||
color: Cesium.Color.CYAN,
|
||||
image: "/img/line-colour.png",
|
||||
speed: 10
|
||||
}
|
||||
},
|
||||
attr: { remark: "示例13" }
|
||||
})
|
||||
this.pathPointGraphicLayer.addGraphic(graphic)
|
||||
|
||||
this.pathPointGraphicLayer.flyTo();
|
||||
|
||||
this.tripFlyArray = [];
|
||||
tripArr.forEach((item, index) => {
|
||||
if (index % 20 == 0) {
|
||||
this.tripFlyArray.push(item);
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
addGoodsLayer(){
|
||||
if(this.goodsGraphicLayer == null){
|
||||
this.goodsGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
this.globalmap.addLayer(this.goodsGraphicLayer);
|
||||
}
|
||||
|
||||
|
||||
this.waterPoints.forEach((item,index)=>{
|
||||
let graphic = new mars3d.graphic.DivGraphic({
|
||||
position: parse(item.geom).coordinates,
|
||||
style: {
|
||||
html: `<div class="marsTiltPanel marsTiltPanel-theme-blue" style="width:300px;">
|
||||
<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">${item.name}</div>
|
||||
<div class="label-content">
|
||||
<div class="data-li">
|
||||
<div class="data-label">归属信息：</div>
|
||||
<div class="data-value"><span class="label-num">${item.street}
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-label">物资信息：</div>
|
||||
<div class="data-value"><span class="label-num">
|
||||
${item.info}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-t-l"></div>
|
||||
<div class="b-b-r"></div>
|
||||
</div>
|
||||
<div class="arrow" ></div>
|
||||
</div>`,
|
||||
horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
scaleByDistance: new Cesium.NearFarScalar(1000, 1.0, 200000, 0.2),
|
||||
clampToGround: true
|
||||
},
|
||||
attr: { remark: "示例11" },
|
||||
pointerEvents: true
|
||||
})
|
||||
|
||||
this.goodsGraphicLayer.addGraphic(graphic);
|
||||
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.box{
|
||||
width: 100%;
|
||||
height: calc( 100% - 180px);
|
||||
overflow: hidden;
|
||||
text-align:left;
|
||||
z-index: 99;
|
||||
}
|
||||
.box-title{
|
||||
width:100%;
|
||||
height:40px;
|
||||
line-height:50px;
|
||||
text-indent:20px;
|
||||
color: #00FFF0;
|
||||
}
|
||||
.box-container{
|
||||
width: calc( 100% - 0px);
|
||||
padding:0px 12px;
|
||||
height: calc( 100% - 60px);
|
||||
}
|
||||
.table-header{
|
||||
width: calc( 100% - 10px);
|
||||
height:25px;
|
||||
color:#fff;
|
||||
text-align: center;
|
||||
}
|
||||
.table-header div{
|
||||
float:left;
|
||||
width:25%;
|
||||
border-bottom:1px dashed #00FFF0;
|
||||
padding-bottom:8px;
|
||||
}
|
||||
.table-body{
|
||||
width:100%;
|
||||
height: calc( 100% - 0px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.table-body .item{
|
||||
padding:15px;
|
||||
width:100%;
|
||||
min-height:80px;
|
||||
background: #00ffee2f;
|
||||
font-size:12px;
|
||||
text-align: left;
|
||||
color:#fff;
|
||||
line-height:24px;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
.table-body .item:nth-child(2n){
|
||||
background:#00ffee50;
|
||||
}
|
||||
|
||||
/* .table-body .item div{
|
||||
float:left;
|
||||
width:33%;
|
||||
height:36px;
|
||||
color:#eee;
|
||||
overflow: hidden;
|
||||
} */
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
background: transparent;
|
||||
border-radius: 5px
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
padding-top: 100px;
|
||||
-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px -1px 0 rgba(0, 0, 0, .07);
|
||||
background-color: #797979;
|
||||
min-height: 28px;
|
||||
border-radius: 4px;
|
||||
background-clip: padding-box
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
-webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25);
|
||||
background-color: rgba(0, 0, 0, .4)
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:active {
|
||||
-webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .35);
|
||||
background-color: rgba(0, 0, 0, .5)
|
||||
}
|
||||
|
||||
::v-deep .el-input__inner{
|
||||
background:none;
|
||||
color:#fff;
|
||||
margin-top:4px;
|
||||
}
|
||||
|
||||
::v-deep .el-input__inner{
|
||||
background:none;
|
||||
color:#fff;
|
||||
margin-top:4px;
|
||||
}
|
||||
|
||||
::v-deep .el-input__inner{
|
||||
border-radius:0px;
|
||||
position:relative;
|
||||
top:1px;
|
||||
}
|
||||
|
||||
::v-deep .el-button{
|
||||
border-radius:0px;
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
*/
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,475 @@
|
|||
<template>
|
||||
<div class="grid-container">
|
||||
<el-row :gutter="0">
|
||||
<el-col :span="6" style="margin-right:0px;height:400px;">
|
||||
<div style="padding-top:20px;padding-left:20px;height:100%;width: calc( 100% - 10px);overflow-y:auto;">
|
||||
<el-tree :data="data" default-expand-all :props="defaultProps" @node-click="handleNodeClick"></el-tree>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="18" style="height:400px;overflow-y:auto;">
|
||||
<div class="grid-item" v-for="(item,index) in tableData" :key="index">
|
||||
<p><span style="font-size:24px;">{{item.areaName}}</span><span>{{item.households}}户{{item.peopleNum}}人</span></p>
|
||||
<p>{{item.userName}} {{item.phone}}</p>
|
||||
<p>{{item.politicalOutlook}}</p>
|
||||
<p>{{item.userType}}</p>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios';
|
||||
|
||||
export default {
|
||||
name: 'index',
|
||||
data(){
|
||||
return {
|
||||
ruleForm:{
|
||||
"areaId": 0,
|
||||
"areaName": "",
|
||||
"areaType": 0,
|
||||
"createId": "",
|
||||
"households": 0,
|
||||
"peopleNum": 0,
|
||||
"remake": "",
|
||||
"pId": 0,
|
||||
"userId": 0,
|
||||
"cardNo": "",
|
||||
"userName": "",
|
||||
"userType": "",
|
||||
"politicalOutlook": "",
|
||||
"education": "",
|
||||
"veteran": true,
|
||||
"phone": "",
|
||||
"imaUrl": ""
|
||||
},
|
||||
dialogVisible:false,
|
||||
total:100,
|
||||
listQuery:{
|
||||
pageSize:10,
|
||||
pageNum:1,
|
||||
},
|
||||
data:null,
|
||||
defaultProps: {
|
||||
children: 'child',
|
||||
label: 'areaName'
|
||||
},
|
||||
tableData: [{
|
||||
areaName: '网格名称',
|
||||
households: '户数',
|
||||
peopleNum : '人数',
|
||||
phone : '手机号码',
|
||||
politicalOutlook : '身份',
|
||||
userName : '网格员姓名',
|
||||
userType : '类型',
|
||||
},]
|
||||
}
|
||||
},
|
||||
created(){
|
||||
this.getTree();
|
||||
|
||||
},
|
||||
mounted(){
|
||||
|
||||
},
|
||||
methods:{
|
||||
addDialog(){
|
||||
this.dialogVisible = true;
|
||||
},
|
||||
getTree(){
|
||||
let _this = this;
|
||||
axios({method:"get",url:"http://123.132.248.154:9224/api/Grid/LoadGridXZ",params:{'regionName':'feixian'},headers:{'X-Token':localStorage.getItem("X-Token")}}).then(res=>{
|
||||
console.log("data",res.data.data);
|
||||
if(res.data.code == 200){
|
||||
_this.data = res.data.data;
|
||||
this.getUserList({id:_this.data[0].child[0].child[0].id});
|
||||
console.log("_this.data",_this.data);
|
||||
}
|
||||
})
|
||||
},
|
||||
getUserList(data){
|
||||
axios({method:"get",url:"http://123.132.248.154:9224/api/Grid/LoadChildGridUser",params:data,headers:{'X-Token':localStorage.getItem("X-Token")}}).then(res=>{
|
||||
if(res.data.code == 200){
|
||||
this.tableData = res.data.data.dataInfo;
|
||||
}
|
||||
})
|
||||
},
|
||||
handleNodeClick(node){
|
||||
this.getUserList({id:node.id})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.grid-item{
|
||||
width:194px;
|
||||
padding:15px 15px;
|
||||
height:140px;
|
||||
background:rgb(12, 69, 76);
|
||||
float:left;
|
||||
margin:6px;
|
||||
color:#eee;
|
||||
line-height:18px;
|
||||
}
|
||||
::v-deep .el-dialog{
|
||||
background:rgba(10, 235, 216, 0.295);
|
||||
color:#fff;
|
||||
}
|
||||
.operate-container{
|
||||
text-align:right;
|
||||
width:100%;
|
||||
height:44px;
|
||||
border-bottom:1px solid #108eff;
|
||||
margin-bottom:10px;
|
||||
}
|
||||
.grid-container{
|
||||
width: calc( 100% - 0px);
|
||||
min-height:500px;
|
||||
padding:40px;
|
||||
}
|
||||
/* */
|
||||
::v-deep .el-tree {
|
||||
|
||||
color: #ffffff;
|
||||
/* // 整体背景透明 */
|
||||
background: rgba(0, 0, 0, 0);
|
||||
}
|
||||
::v-deep .el-checkbox__inner {
|
||||
/*// checkbox 背景透明 */
|
||||
background: rgba(0, 0, 0, 0);
|
||||
}
|
||||
::v-deep .el-tree-node__content:hover {
|
||||
/* // hover 节点背景色，否则是白色 */
|
||||
background: rgba(104, 147, 215, 0.4);
|
||||
}
|
||||
::v-deep .el-tree-node:focus > .el-tree-node__content {
|
||||
/* // focus 节点背景透明，否则是白色 */
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
|
||||
::v-deep .el-table{
|
||||
background:none;
|
||||
color:#fff;
|
||||
}
|
||||
|
||||
::v-deep .el-table thead{
|
||||
color:#fff;
|
||||
}
|
||||
|
||||
::v-deep .el-form-item__label{
|
||||
/* padding:0px; */
|
||||
}
|
||||
|
||||
::v-deep .el-form-item{
|
||||
/* margin-bottom:5px; */
|
||||
}
|
||||
|
||||
|
||||
::v-deep .el-table__fixed-right::before, .el-table__fixed::before{
|
||||
height:0px;
|
||||
}
|
||||
::v-deep .el-table::before{
|
||||
height:0px;
|
||||
}
|
||||
::v-deep .el-form--inline{
|
||||
height:30px;
|
||||
}
|
||||
::v-deep .mapboxgl-ctrl{
|
||||
display:block;
|
||||
}
|
||||
::v-deep .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf{
|
||||
border-bottom:1px solid hsl(240, 100%, 37%,0.2);
|
||||
}
|
||||
|
||||
|
||||
::v-deep .el-input__inner {
|
||||
background-color: transparent;
|
||||
border: 0.0625rem solid #0cf0dd;
|
||||
color: #fff;
|
||||
border-radius:0px;
|
||||
}
|
||||
|
||||
::v-deep .el-button{
|
||||
border-radius:0px;
|
||||
}
|
||||
::v-deep .el-form-item__label {
|
||||
color: #11edf5;
|
||||
/* line-height: 2.1875rem; */
|
||||
}
|
||||
::v-deep .el-button--small {
|
||||
padding: 0.625rem 2.1875rem;
|
||||
}
|
||||
::v-deep .el-form--inline .el-form-item {
|
||||
/* margin-left: 1.875rem; */
|
||||
}
|
||||
::v-deep .el-table,
|
||||
.el-table__expanded-cell {
|
||||
background: transparent !important;
|
||||
}
|
||||
/* “表格内背景颜色“ */
|
||||
::v-deep.el-table th,
|
||||
::v-deep.el-table tr,
|
||||
::v-deep.el-table td {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
/* 按钮样式修改 */
|
||||
::v-deep .el-button--success {
|
||||
background: #26947c;
|
||||
color: #00f261;
|
||||
border: 0;
|
||||
}
|
||||
::v-deep .el-button--info {
|
||||
background: #482c27;
|
||||
color: #8ac2da;
|
||||
border: 0;
|
||||
}
|
||||
::v-deep.el-button--primary {
|
||||
background: #10fad3;
|
||||
color: #8ac2da;
|
||||
border: 0;
|
||||
}
|
||||
::v-deep.el-button--primary {
|
||||
background: #10f3cd;
|
||||
color: #fff;
|
||||
border: 0;
|
||||
}
|
||||
/*修改element-ui的table 在鼠标悬停hover时的高亮颜色*/
|
||||
::v-deep.el-table tbody tr:hover > td {
|
||||
background-color: black !important;
|
||||
}
|
||||
/* 第一个 dialog修改 */
|
||||
::v-deep.dialog_one .el-dialog {
|
||||
background: #266a94 !important;
|
||||
border: 1px solid #10a2e1;
|
||||
}
|
||||
::v-deep.dialog_one .el-dialog__title {
|
||||
color: #00b2ff;
|
||||
font-size: 2rem;
|
||||
}
|
||||
::v-deep.dialog_one .el-dialog__header {
|
||||
text-align: center;
|
||||
}
|
||||
/* 第二个 dialog 修改 */
|
||||
::v-deep.dialog_two .el-dialog {
|
||||
background: rgba(21, 236, 218, 0.603) !important;
|
||||
border: 1px solid #797979;
|
||||
}
|
||||
::v-deep.dialog_two .el-dialog__body {
|
||||
padding: 10px 0;
|
||||
}
|
||||
::v-deep.dialog_two .el-dialog__header {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
||||
::v-deep .el-table__cell{
|
||||
background:none;
|
||||
padding:0px;
|
||||
font-size:14px;
|
||||
color:#fff!important;
|
||||
}
|
||||
|
||||
::v-deep .cell{
|
||||
padding:0px;
|
||||
height:40px;
|
||||
line-height:40px;
|
||||
/* background:hsl(212, 43%, 49%,0.5); */
|
||||
text-align:center;
|
||||
font-size:12px;
|
||||
}
|
||||
|
||||
::v-deep .number{
|
||||
background:none;
|
||||
color:#fff;
|
||||
}
|
||||
|
||||
::v-deep .btn-next{
|
||||
background:none;
|
||||
color:#fff;
|
||||
}
|
||||
|
||||
::v-deep .btn-prev{
|
||||
background:none;
|
||||
color:#fff;
|
||||
}
|
||||
|
||||
::v-deep .el-pagination__total{
|
||||
color:#fff;
|
||||
}
|
||||
|
||||
::v-deep .el-pagination__jump{
|
||||
color:#fff;
|
||||
}
|
||||
|
||||
::v-deep .el-pagination button:disabled{
|
||||
background:none;
|
||||
}
|
||||
::v-deep .disabled{
|
||||
background:none;
|
||||
}
|
||||
|
||||
::v-deep .el-descriptions__body{
|
||||
background:none;
|
||||
color:#ccc;
|
||||
}
|
||||
|
||||
::v-deep .el-descriptions-row{
|
||||
background:none;
|
||||
color:#eee;
|
||||
}
|
||||
|
||||
|
||||
::v-deep .el-descriptions-item__label{
|
||||
background:rgba(14, 231, 213, 0.5);
|
||||
color:#eee;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
::v-deep .el-descriptions .is-bordered .el-descriptions-item__cell{
|
||||
border-color:rgb(71, 166, 179);
|
||||
}
|
||||
|
||||
|
||||
|
||||
::v-deep .el-checkbox{
|
||||
margin-top:14px;
|
||||
}
|
||||
|
||||
::v-deep .el-table--scrollable-y .el-table__body-wrapper{
|
||||
overflow-x:auto;
|
||||
overflow-y:auto;
|
||||
}
|
||||
|
||||
::v-deep .el-table--scrollable-x .el-table__body-wrapper{
|
||||
|
||||
}
|
||||
|
||||
::v-deep .el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar {
|
||||
display: block !important;
|
||||
z-index:99999999999999;
|
||||
}
|
||||
/* 滑道样式 */
|
||||
::v-deep .el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar{
|
||||
width:0px;
|
||||
height:10px;
|
||||
background:#10e1f0;
|
||||
border-radius: 6px;
|
||||
z-index:99999999999999;
|
||||
}
|
||||
/* 定义滑块的样式 */
|
||||
::v-deep .el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar-thumb{
|
||||
border-radius: 0px;
|
||||
-webkit-box-shadow:inset 0 0 6px rgba(20, 231, 247, 0.753);
|
||||
background-color:rgba(0,0,0,0.3);
|
||||
z-index:99999999999999;
|
||||
}
|
||||
/* 定义滑块鼠标移入时的样式 */
|
||||
::v-deep .el-table--scrollable-x .el-table__body-wrapper .el-table__body-wrapper .is-scrolling-left::-webkit-scrollbar-thumb:hover{
|
||||
border-radius: 10px;
|
||||
-webkit-box-shadow:inset 0 0 6px rgba(13, 240, 228, 0.3);
|
||||
background-color:rgba(23, 221, 211, 0.4);
|
||||
z-index:99999999999999;
|
||||
}
|
||||
|
||||
::v-deep .el-pagination__jump{
|
||||
margin-left:0px;
|
||||
}
|
||||
|
||||
|
||||
::v-deep .el-pagination .el-select {
|
||||
width:80px;
|
||||
}
|
||||
|
||||
::v-deep .el-pager li{
|
||||
width:10px!important;
|
||||
}
|
||||
|
||||
::v-deep .el-pager .number{
|
||||
padding:0px;
|
||||
width:10px!important;
|
||||
}
|
||||
|
||||
::v-deep .el-pagination .el-input__inner{
|
||||
width:80px;
|
||||
}
|
||||
|
||||
::v-deep .mapboxgl-ctrl{
|
||||
/* display:none; */
|
||||
}
|
||||
::v-deep .mapboxgl-ctrl-attrib-inner{
|
||||
display:none;
|
||||
}
|
||||
|
||||
::v-deep .el-form-item__content .is-disabled .el-input__inner{
|
||||
background-color:none!important;
|
||||
}
|
||||
|
||||
::v-deep .mapboxgl-map canvas {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
::v-deep .el-pager li{
|
||||
min-width:25px !important;
|
||||
}
|
||||
|
||||
::v-deep .el-table--border::after, .el-table--group::after, .el-table::before{
|
||||
background:none;
|
||||
}
|
||||
::v-deep .el-table--border, .el-table--group{
|
||||
border:0px;
|
||||
}
|
||||
|
||||
::v-deep .el-table--border th.el-table__cell, .el-table__fixed-right-patch{
|
||||
/* border:0px; */
|
||||
}
|
||||
|
||||
::v-deep .el-table--border .el-table__cell, .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed{
|
||||
border:0px;
|
||||
}
|
||||
.page-container{
|
||||
width: 100%;
|
||||
height:60px;
|
||||
padding:15px 0px;
|
||||
border-top:1px solid #ccc;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
background: transparent;
|
||||
border-radius: 5px
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
padding-top: 100px;
|
||||
-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px -1px 0 rgba(0, 0, 0, .07);
|
||||
background-color: #797979;
|
||||
min-height: 28px;
|
||||
border-radius: 4px;
|
||||
background-clip: padding-box
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
-webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25);
|
||||
background-color: rgba(0, 0, 0, .4)
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:active {
|
||||
-webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .35);
|
||||
background-color: rgba(0, 0, 0, .5)
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
<template>
|
||||
<div class="box">
|
||||
<div class="news">
|
||||
<p class="title">
|
||||
塔山森林景区发生火灾
|
||||
<el-button size="mini" type="warning" style="" icon="el-icon-position" >查看</el-button>
|
||||
</p>
|
||||
<p class="desc">
|
||||
<span>塔山森林公园北侧发生火灾…… </span>
|
||||
<span class="time">2023-07-21 12:42:32</span>
|
||||
</p>
|
||||
<p style="font-size:12px;text-align:right;color:#fff;cursor:pointer;">
|
||||
<span @click="getAllReportList">查看全部上报>></span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'reportbox',
|
||||
props:['globalmap'],
|
||||
data(){
|
||||
return {
|
||||
reportList:[
|
||||
{
|
||||
time:"2023-07-22 10:45:10",
|
||||
title:"大公馆西北侧发生火灾",
|
||||
desc:"大公馆西北侧发生5级火灾……",
|
||||
lngLat:""
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
getAllReportList(){
|
||||
this.$emit("getAllReportList");
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.box{
|
||||
width:100%;
|
||||
height:100%;
|
||||
background-image: url(/img/uav-bg.png);
|
||||
background-size:100% 100%;
|
||||
padding:20px 20px;
|
||||
}
|
||||
|
||||
.news{
|
||||
width:100%;
|
||||
line-height:20px;
|
||||
text-align:left;
|
||||
color:#ccc;
|
||||
}
|
||||
|
||||
.news .title{
|
||||
line-height:10px;
|
||||
font-weight: bold;
|
||||
color:aquamarine;
|
||||
}
|
||||
|
||||
.news .desc{
|
||||
font-size:12px;
|
||||
}
|
||||
|
||||
.news .time{
|
||||
float:right;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,261 @@
|
|||
<template>
|
||||
<div class="box">
|
||||
<div class="tab-container">
|
||||
<div class="tab-button" :style="{'border-bottom':active == 1 ? '3px solid #01D6D5': '0px'}" @click="getInfo(1)">最新上报</div>
|
||||
<div class="tab-button" :style="{'border-bottom':active == 2 ? '3px solid #01D6D5': '0px'}" @click="getInfo(2)">正在处理</div>
|
||||
<div class="tab-button" :style="{'border-bottom':active == 3 ? '3px solid #01D6D5': '0px'}" @click="getInfo(3)">处理完成</div>
|
||||
</div>
|
||||
<div class="box-container">
|
||||
|
||||
|
||||
<div class="draw" v-show="active == 1">
|
||||
<div class="news" v-for="(item,index) in list" :key="index">
|
||||
<div class="title">
|
||||
{{item.address }}
|
||||
<div
|
||||
class="daohang"
|
||||
style="width:30px;height:24px;text-align:center;line-height:24px;border-radius:4px;float:right;background:#108eff;color:#fff;position:relative;top:4px;cursor:pointer;"
|
||||
@click="toPosition(item);"
|
||||
><i class="el-icon el-icon-position"></i></div>
|
||||
</div>
|
||||
<p class="desc">
|
||||
<span>信息描述：{{item.describe}}</span>
|
||||
</p>
|
||||
<p class="desc">
|
||||
<span class="time">上报时间：{{item.reportTime}}</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios'
|
||||
import { parse } from '../lib/handleGeojson';
|
||||
export default {
|
||||
name: 'toolbox',
|
||||
props:['globalmap'],
|
||||
data(){
|
||||
return {
|
||||
active:1,
|
||||
list:[
|
||||
|
||||
],
|
||||
listQuery:{
|
||||
state:0,
|
||||
areaname:'feixian',
|
||||
pageIndex:1,
|
||||
pageSize:10,
|
||||
},
|
||||
graphicLayer:null,
|
||||
graphicPoint:null,
|
||||
graphicWinodw:null,
|
||||
}
|
||||
},
|
||||
created(){
|
||||
this.getList();
|
||||
window.wuzi = this.wuzi
|
||||
window.shuiyuan = this.shuiyuan
|
||||
},
|
||||
mounted(){
|
||||
|
||||
},
|
||||
methods:{
|
||||
shuiyuan(e){
|
||||
this.$emit("shuiyuan",e);
|
||||
},
|
||||
wuzi(e){
|
||||
this.$emit("wuzi",e);
|
||||
},
|
||||
getInfo(active){
|
||||
this.listQuery.state = active;
|
||||
this.active = active;
|
||||
this.getList();
|
||||
},
|
||||
getList(){
|
||||
axios({
|
||||
method:"post",
|
||||
url:"http://123.132.248.154:9224/api/FireManagement/LoadFireClueInfoByAreaName",
|
||||
params:this.listQuery,
|
||||
headers:{
|
||||
'X-Token':localStorage.getItem("X-Token")
|
||||
}
|
||||
}).then(res=>{
|
||||
if(res.data.code == 200){
|
||||
this.list = res.data.data;
|
||||
}
|
||||
})
|
||||
},
|
||||
toPosition(item){
|
||||
console.log(item);
|
||||
|
||||
let _self = this;
|
||||
|
||||
if(!_self.graphicLayer){
|
||||
_self.graphicLayer = new this.mars3d.layer.GraphicLayer({
|
||||
pid:88,
|
||||
})
|
||||
_self.globalmap.addLayer(_self.graphicLayer)
|
||||
}
|
||||
if(_self.graphicPoint && _self.graphicWinodw){
|
||||
_self.graphicLayer.clear();
|
||||
_self.graphicPoint = null;
|
||||
_self.graphicWinodw = null;
|
||||
}
|
||||
_self.graphicPoint = new mars3d.graphic.DivLightPoint({
|
||||
position: [parseFloat(item.lng),parseFloat(item.lat)],
|
||||
style: {
|
||||
color: "#f33349",
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
|
||||
},
|
||||
})
|
||||
_self.graphicLayer.addGraphic(_self.graphicPoint)
|
||||
|
||||
_self.graphicWinodw = new mars3d.graphic.DivGraphic({
|
||||
position: [parseFloat(item.lng),parseFloat(item.lat)],
|
||||
style: {
|
||||
html: `<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">${item.address}</div>
|
||||
<div class="label-content">
|
||||
<div class="data-li">
|
||||
<div class="data-label">火情描述：${item.describe}</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-label">上报时间：</div>
|
||||
<div class="data-value"><span id="lablYeWei" class="label-num">${item.reportTime}</span><span class="label-unit"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-value">
|
||||
<span id="lablSBZT1" class="label-tag data-value-status-1" title="中间状态">人员调度</span>
|
||||
<span id="lablSBZT2" onclick="wuzi([${item.lng},${item.lat}]);" class="label-tag data-value-status-0" title="关闭状态" >物资调度</span>
|
||||
<span id="lablCSFM2" onclick="shuiyuan([${item.lng},${item.lat}])" class="label-tag data-value-status-2" title="打开状态">附近水源</span>
|
||||
<span id="lablSBZT1" class="label-tag data-value-status-1" 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>`,horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
scaleByDistance: new Cesium.NearFarScalar(1000, 1.0, 200000, 0.2),
|
||||
clampToGround: true
|
||||
},
|
||||
attr: { remark: "示例10" },
|
||||
// 可以传入自定义测试点样式
|
||||
// testPoint: {
|
||||
// color: '#ff0000',
|
||||
// pixelSize: 8,
|
||||
// },
|
||||
pointerEvents: true // false时不允许拾取和触发任意鼠标事件，但可以穿透div缩放地球
|
||||
})
|
||||
_self.graphicLayer.addGraphic(_self.graphicWinodw);
|
||||
|
||||
_self.graphicWinodw.flyTo();
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.box{
|
||||
width:250px;
|
||||
height:100%;
|
||||
background-image: url(/img/tool-bg.png);
|
||||
background-size:100% 100%;
|
||||
}
|
||||
.tab-container{
|
||||
width:210px;
|
||||
height:60px;
|
||||
border-bottom:1px solid #2F5D55;
|
||||
padding-top:10px;
|
||||
margin:0px auto;
|
||||
}
|
||||
.tab-button{
|
||||
width:70px;
|
||||
font-size:12px;
|
||||
height:50px;
|
||||
line-height:50px;
|
||||
color:#0ABFB5;
|
||||
float:left;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
.box-container{
|
||||
width: 220px;
|
||||
margin:15px;
|
||||
height: calc( 100% - 90px);
|
||||
overflow-y:auto;
|
||||
}
|
||||
.news{
|
||||
width:100%;
|
||||
line-height:18px;
|
||||
padding:10px 15px 0px 15px;
|
||||
text-align:left;
|
||||
color:#ccc;
|
||||
border-bottom:1px solid #01d6d67a;
|
||||
}
|
||||
|
||||
.news .title{
|
||||
line-height:30px;
|
||||
font-weight: bold;
|
||||
color:aquamarine;
|
||||
}
|
||||
|
||||
.news .desc{
|
||||
font-size:12px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
background: transparent;
|
||||
border-radius: 5px
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
padding-top: 100px;
|
||||
-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px -1px 0 rgba(0, 0, 0, .07);
|
||||
background-color: #797979;
|
||||
min-height: 28px;
|
||||
border-radius: 4px;
|
||||
background-clip: padding-box
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
-webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25);
|
||||
background-color: rgba(0, 0, 0, .4)
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:active {
|
||||
-webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .35);
|
||||
background-color: rgba(0, 0, 0, .5)
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -28,7 +28,7 @@ import * as turf from '@turf/turf'
|
|||
|
||||
export default {
|
||||
name: 'routebox',
|
||||
props:['globalmap'],
|
||||
props:['globalmap','routeInfo'],
|
||||
data(){
|
||||
return {
|
||||
startPoint:null,
|
||||
|
|
@ -38,12 +38,18 @@ import * as turf from '@turf/turf'
|
|||
contourLine:null,
|
||||
contourLineAreaObj:null,
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
|
||||
},
|
||||
created(){
|
||||
|
||||
},
|
||||
mounted(){
|
||||
|
||||
},
|
||||
destroyed(){
|
||||
|
||||
|
||||
},
|
||||
methods:{
|
||||
bindMapClick(type){ //绑定点击事件 绘制获取起始点数据
|
||||
|
|
|
|||
|
|
@ -0,0 +1,224 @@
|
|||
<template>
|
||||
<div class="box">
|
||||
<div class="box-title" >
|
||||
<el-input type="text" size="mini" style="width:160px;float:left;margin-right:12px;" v-model="listQuery.wuzi"></el-input>
|
||||
<el-button type="primary" size="mini" icon="el-icon-search" @click="getWaterList">查询</el-button>
|
||||
<el-button type="primary" size="mini" icon="el-icon-plus" @click="addtaskShow = true">添加任务</el-button>
|
||||
|
||||
</div>
|
||||
<div class="box-container">
|
||||
<div class="table-body" v-show="!addtaskShow">
|
||||
<div class="item" v-for="(item,index) in waterPoints" :key="index">
|
||||
<div>{{item.street}}{{item.name}}</div>
|
||||
<div>{{item.info}}</div>
|
||||
<div class="float:right;text-align:right;">
|
||||
<i class="el-icon el-icon-position" @click="flyToPosition(item)"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 添加任务 -->
|
||||
<div class="add-task-box" v-show="addtaskShow">
|
||||
|
||||
<el-form ref="form" size="mini" :model="form" label-width="100px">
|
||||
|
||||
<el-form-item label="接收人">
|
||||
<el-input v-model="form.name"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="任务详情">
|
||||
<el-input v-model="form.name"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="任务地点">
|
||||
<el-input v-model="form.name"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import appConfig from '../../../../public/config/app.json'
|
||||
import { parse } from '../lib/handleGeojson'
|
||||
import * as turf from '@turf/turf'
|
||||
import axios from "axios";
|
||||
export default {
|
||||
name: 'monitorbox',
|
||||
props:['globalmap','endLngLat'],
|
||||
data(){
|
||||
return{
|
||||
addtaskShow:false,
|
||||
startLngLat:null,
|
||||
list:[],
|
||||
listQuery:{
|
||||
wuzi:null,
|
||||
areaname:'费县'
|
||||
},
|
||||
waterPoints:null,
|
||||
nestWaterPoints:[],
|
||||
echartsLayer:null,
|
||||
pathPointGraphicLayer:null,
|
||||
goodsGraphicLayer:null,
|
||||
form:{
|
||||
name:"hello world"
|
||||
}
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
endLngLat:function(e){
|
||||
|
||||
}
|
||||
},
|
||||
created(){
|
||||
this.getWaterList();
|
||||
},
|
||||
methods:{
|
||||
getWaterList(){
|
||||
axios({
|
||||
method: 'get',
|
||||
url: "http://123.132.248.154:9224/api/FirePrevention/Loadwuzichubei",
|
||||
params:this.listQuery,
|
||||
headers:{
|
||||
"X-Token":localStorage.getItem("X-Token"),
|
||||
}
|
||||
}).then(res => {
|
||||
this.waterPoints = res.data.data;
|
||||
this.addGoodsLayer();
|
||||
})
|
||||
},
|
||||
flyToPosition(item){
|
||||
let lngLat = parse(item.geom).coordinates;
|
||||
this.startLngLat = lngLat;
|
||||
this.getRoutePath();
|
||||
this.globalmap.flyToPoint(lngLat,{radius:400,"pitch":-90});
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.box{
|
||||
width: 100%;
|
||||
height: calc( 100% - 180px);
|
||||
overflow: hidden;
|
||||
text-align:left;
|
||||
z-index: 99;
|
||||
}
|
||||
.box-title{
|
||||
width:100%;
|
||||
height:40px;
|
||||
line-height:50px;
|
||||
text-indent:20px;
|
||||
color: #00FFF0;
|
||||
}
|
||||
.box-container{
|
||||
width: calc( 100% - 0px);
|
||||
padding:0px 12px;
|
||||
height: calc( 100% - 60px);
|
||||
}
|
||||
|
||||
.add-task-box{
|
||||
width: calc( 100% - 0px);
|
||||
padding:0px 12px;
|
||||
height: calc( 100% - 60px);
|
||||
}
|
||||
.table-header{
|
||||
width: calc( 100% - 10px);
|
||||
height:25px;
|
||||
color:#fff;
|
||||
text-align: center;
|
||||
}
|
||||
.table-header div{
|
||||
float:left;
|
||||
width:25%;
|
||||
border-bottom:1px dashed #00FFF0;
|
||||
padding-bottom:8px;
|
||||
}
|
||||
.table-body{
|
||||
width:100%;
|
||||
height: calc( 100% - 0px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.table-body .item{
|
||||
width:100%;
|
||||
height:36px;
|
||||
background: #00ffee2f;
|
||||
font-size:12px;
|
||||
text-align: center;
|
||||
line-height:36px;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
.table-body .item:nth-child(2n){
|
||||
background:#00ffee50;
|
||||
}
|
||||
|
||||
.table-body .item div{
|
||||
float:left;
|
||||
width:33%;
|
||||
height:36px;
|
||||
color:#eee;
|
||||
overflow: hidden;
|
||||
}
|
||||
.table-body .item div:nth-of-type(2){
|
||||
width:53%;
|
||||
}
|
||||
.table-body .item div:nth-of-type(3){
|
||||
width:13%;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
background: transparent;
|
||||
border-radius: 5px
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
padding-top: 100px;
|
||||
-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px -1px 0 rgba(0, 0, 0, .07);
|
||||
background-color: #797979;
|
||||
min-height: 28px;
|
||||
border-radius: 4px;
|
||||
background-clip: padding-box
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
-webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25);
|
||||
background-color: rgba(0, 0, 0, .4)
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:active {
|
||||
-webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .35);
|
||||
background-color: rgba(0, 0, 0, .5)
|
||||
}
|
||||
|
||||
::v-deep .el-input__inner{
|
||||
background:none;
|
||||
color:#fff;
|
||||
margin-top:4px;
|
||||
}
|
||||
|
||||
::v-deep .el-input__inner{
|
||||
border-radius:0px;
|
||||
position:relative;
|
||||
top:1px;
|
||||
}
|
||||
|
||||
::v-deep .el-button{
|
||||
border-radius:0px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
<template>
|
||||
<div class="box">
|
||||
<el-timeline :reverse="false">
|
||||
<el-timeline-item
|
||||
v-for="(activity, index) in activities"
|
||||
:key="index"
|
||||
:timestamp="activity.timestamp">
|
||||
{{activity.content}}
|
||||
</el-timeline-item>
|
||||
</el-timeline>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'trendsbox',
|
||||
data(){
|
||||
return {
|
||||
activities: [{
|
||||
content: '管理员下发任务至徐景良',
|
||||
timestamp: '2018-04-15'
|
||||
}, {
|
||||
content: '徐景良确认为火情',
|
||||
timestamp: '2018-04-13'
|
||||
}, {
|
||||
content: '徐景良上报了火点信息',
|
||||
timestamp: '2018-04-11'
|
||||
}]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.box{
|
||||
width:100%;
|
||||
padding:30px 30px 0px 0px;
|
||||
text-align:left;
|
||||
}
|
||||
::v-deep .el-timeline-item__content{
|
||||
color:#0ABFB5
|
||||
|
||||
}
|
||||
::v-deep .el-card{
|
||||
background:none;
|
||||
color:#ccc;
|
||||
}
|
||||
::v-deep .el-card__body{
|
||||
background:none;
|
||||
padding:0px;
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,15 +1,185 @@
|
|||
<template>
|
||||
<div class="box">
|
||||
|
||||
<div class="box-container">
|
||||
<div class="table-body">
|
||||
<div class="item" v-for="(item,index) in nestWaterPoints" :key="index">
|
||||
<div>水源点{{index+1}}</div>
|
||||
<div>{{item.distance}}km</div>
|
||||
<div class="float:right;text-align:right;">
|
||||
<i class="el-icon el-icon-position" @click="flyToPosition([item.lngLat[0],item.lngLat[1]])"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import appConfig from '../../../../public/config/app.json'
|
||||
import * as turf from '@turf/turf'
|
||||
import axios from "axios";
|
||||
export default {
|
||||
name: 'waterbox',
|
||||
name: 'monitorbox',
|
||||
props:['globalmap','waterCenter'],
|
||||
data(){
|
||||
return {
|
||||
return{
|
||||
list:[],
|
||||
waterPoints:null,
|
||||
nestWaterPoints:[],
|
||||
echartsLayer:null,
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
waterCenter:{
|
||||
handler(newVal,oldVal) {
|
||||
this.getNestPoint(newVal[0],newVal[1]);
|
||||
},
|
||||
immediate: true,
|
||||
// 开启深度监听 deep
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
created(){
|
||||
this.getWaterList();
|
||||
},
|
||||
methods:{
|
||||
getWaterList(){
|
||||
axios({
|
||||
method: 'get',
|
||||
url: appConfig['pingyixian'].waterUrl,
|
||||
}).then(res => {
|
||||
this.waterPoints = res.data;
|
||||
})
|
||||
},
|
||||
getNestPoint(lng,lat){
|
||||
console.log("lng,lat",lng,lat);
|
||||
let from = turf.point([lng,lat]);
|
||||
this.nestWaterPoints = [];
|
||||
|
||||
this.waterPoints.features.forEach((item,index)=>{
|
||||
let to = turf.point(item.geometry.coordinates);
|
||||
let options = {units: 'kilometers'};
|
||||
let distance = turf.distance(from, to, options);
|
||||
let obj = {
|
||||
lngLat:item.geometry.coordinates,
|
||||
distance:distance.toFixed(2)
|
||||
}
|
||||
this.nestWaterPoints.push(obj);
|
||||
})
|
||||
//
|
||||
this.nestWaterPoints.sort((a,b)=>{
|
||||
return a.distance - b.distance;
|
||||
})
|
||||
|
||||
this.nestWaterPoints = this.nestWaterPoints.slice(0,10);
|
||||
|
||||
let options = this.getEchartsOption(lng,lat,this.nestWaterPoints)
|
||||
|
||||
if(this.echartsLayer){
|
||||
this.echartsLayer.remove(true);
|
||||
}
|
||||
this.echartsLayer = new mars3d.layer.EchartsLayer(options)
|
||||
this.globalmap.addLayer(this.echartsLayer)
|
||||
this.echartsLayer.flyTo();
|
||||
},
|
||||
getEchartsOption(lng,lat,nestWaterPoints) {
|
||||
const beijinCoord = [lng, lat]
|
||||
const symbolPoint = "image://img/symbol1.png"
|
||||
const linePoint = "image://img/linePoint1.png"
|
||||
|
||||
const pointArr = []
|
||||
const pathArr = [];
|
||||
|
||||
for(let i=0;i<10;i++){
|
||||
pointArr.push({
|
||||
name: i,
|
||||
value: nestWaterPoints[i].lngLat,
|
||||
symbol: symbolPoint
|
||||
})
|
||||
pathArr.push({
|
||||
name: i,
|
||||
toname: "当前位置",
|
||||
coords: [nestWaterPoints[i].lngLat, beijinCoord]
|
||||
})
|
||||
}
|
||||
|
||||
const option = {
|
||||
animation: false,
|
||||
clampToGround:true,
|
||||
series: [
|
||||
{
|
||||
name: "",
|
||||
type: "lines",
|
||||
coordinateSystem: "mars3dMap",
|
||||
zlevel: 1,
|
||||
data: pathArr,
|
||||
// 线上面的动态特效
|
||||
effect: {
|
||||
show: true,
|
||||
smooth: false,
|
||||
trailLength: 0,
|
||||
symbol: linePoint,
|
||||
symbolSize: [10, 30],
|
||||
period: 4
|
||||
},
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 1,
|
||||
color: "#ffffff",
|
||||
curveness: 0.2
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
type: "effectScatter",
|
||||
coordinateSystem: "mars3dMap",
|
||||
zlevel: 3,
|
||||
data: [
|
||||
{
|
||||
name: "当前位置",
|
||||
value: beijinCoord.concat(200)
|
||||
}
|
||||
],
|
||||
rippleEffect: {
|
||||
period: 10,
|
||||
scale: 5,
|
||||
brushType: "fill"
|
||||
}
|
||||
},
|
||||
{
|
||||
type: "effectScatter",
|
||||
coordinateSystem: "mars3dMap",
|
||||
symbolSize: [20, 20],
|
||||
symbolOffset: [0, -10],
|
||||
zlevel: 3,
|
||||
circular: {
|
||||
rotateLabel: true
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
show: false,
|
||||
position: "bottom",
|
||||
formatter: "{b}",
|
||||
fontSize: 18,
|
||||
color: "#fff",
|
||||
textBorderColor: "#2aa4e8",
|
||||
offset: [0, 20]
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
shadowColor: "none"
|
||||
}
|
||||
},
|
||||
data: pointArr
|
||||
}
|
||||
]
|
||||
}
|
||||
return option
|
||||
},
|
||||
flyToPosition(lngLat){
|
||||
this.globalmap.flyToPoint(lngLat,{radius:400,"pitch":-90});
|
||||
// {"lat":34.984709,"lng":118.253932,"alt":6066,"heading":354,}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -17,9 +187,94 @@
|
|||
|
||||
<style scoped>
|
||||
.box{
|
||||
width:320px;
|
||||
height:455px;
|
||||
background-image:url(/img/water-source-bg.png);
|
||||
background-size: 100% 100%;
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
overflow: hidden;
|
||||
text-align:left;
|
||||
z-index: 99;
|
||||
}
|
||||
.box-title{
|
||||
width:100%;
|
||||
height:40px;
|
||||
line-height:50px;
|
||||
text-indent:20px;
|
||||
color: #00FFF0;
|
||||
}
|
||||
.box-container{
|
||||
width: calc( 100% - 0px);
|
||||
padding:0px 12px;
|
||||
height: calc( 100% - 60px);
|
||||
}
|
||||
.table-header{
|
||||
width: calc( 100% - 10px);
|
||||
height:25px;
|
||||
color:#fff;
|
||||
text-align: center;
|
||||
}
|
||||
.table-header div{
|
||||
float:left;
|
||||
width:25%;
|
||||
border-bottom:1px dashed #00FFF0;
|
||||
padding-bottom:8px;
|
||||
}
|
||||
.table-body{
|
||||
width:100%;
|
||||
height: calc( 100% - 0px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.table-body .item{
|
||||
width:100%;
|
||||
height:36px;
|
||||
background: #00ffee2f;
|
||||
font-size:12px;
|
||||
text-align: center;
|
||||
line-height:36px;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
.table-body .item:nth-child(2n){
|
||||
background:#00ffee50;
|
||||
}
|
||||
|
||||
.table-body .item div{
|
||||
float:left;
|
||||
width:33%;
|
||||
color:#eee;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
background: transparent;
|
||||
border-radius: 5px
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
padding-top: 100px;
|
||||
-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px -1px 0 rgba(0, 0, 0, .07);
|
||||
background-color: #797979;
|
||||
min-height: 28px;
|
||||
border-radius: 4px;
|
||||
background-clip: padding-box
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
-webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25);
|
||||
background-color: rgba(0, 0, 0, .4)
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:active {
|
||||
-webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .35);
|
||||
background-color: rgba(0, 0, 0, .5)
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -1,7 +1,8 @@
|
|||
<template>
|
||||
<el-menu class="navbar" mode="horizontal">
|
||||
<div class="logo">
|
||||
<img class="user-avatar" :src="logo">临沂国家高新区
|
||||
<!-- <img class="user-avatar" :src="logo"> -->
|
||||
林业防火平台
|
||||
</div>
|
||||
<hamburger class="hamburger-container" :toggleClick="toggleSideBar" :isActive="sidebar.opened"></hamburger>
|
||||
<el-dropdown class="avatar-container" @command="handleCommand" trigger="click">
|
||||
|
|
|
|||
|
|
@ -232,7 +232,7 @@
|
|||
|
||||
.login-container {
|
||||
height: 100%;
|
||||
background: url('~@/assets/login/bg1.jpg') no-repeat;
|
||||
// background: url('~@/assets/login/bg1.jpg') no-repeat;
|
||||
background-color: #EBEBEA;
|
||||
background-position: 0 0;
|
||||
background-size: 62% 100%;
|
||||
|
|
@ -300,7 +300,7 @@
|
|||
|
||||
<style scoped>
|
||||
.left-panel {
|
||||
background-image: url('~@/assets/login/bg1.jpg');
|
||||
/* background-image: url('~@/assets/login/bg1.jpg'); */
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background-repeat: no-repeat;
|
||||
|
|
|
|||
Loading…
Reference in New Issue