1837 lines
84 KiB
HTML
1837 lines
84 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html>
|
|||
|
|
|
|||
|
|
<head>
|
|||
|
|
<meta charset="utf-8">
|
|||
|
|
<meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
|
|||
|
|
<meta http-equiv=Access-Control-Allow-Origin content=*>
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|||
|
|
<link rel="shortcut icon" href="__CDN__/assets/img/favicon.ico"/>
|
|||
|
|
<link href="__CDN__/web/static/css/datav.css" rel="stylesheet">
|
|||
|
|
|
|||
|
|
|
|||
|
|
<title>{$site.name|htmlentities}</title>
|
|||
|
|
<script src="__CDN__/web/static/js/jquery-1.11.3.js" type=text/javascript charset=utf-8></script>
|
|||
|
|
<script src="__CDN__/web/static/js/echarts.min.js" type=text/javascript charset=utf-8></script>
|
|||
|
|
<script src="__CDN__/web/static/js/vue.js" type=text/javascript charset=utf-8></script>
|
|||
|
|
<script src="__CDN__/web/static/js/data.js" type=text/javascript charset=utf-8></script>
|
|||
|
|
|
|||
|
|
<script src="__CDN__/web/static/js/datav.min.vue.js"></script>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<style>
|
|||
|
|
/*控制vue渲染*/
|
|||
|
|
[v-cloak] {
|
|||
|
|
display: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/*区域面积自提颜色*/
|
|||
|
|
.amap-overlay-text-container {
|
|||
|
|
color: red;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
</style>
|
|||
|
|
|
|||
|
|
</head>
|
|||
|
|
|
|||
|
|
<body>
|
|||
|
|
|
|||
|
|
<div id="app" v-cloak>
|
|||
|
|
<!-- 头部导航 -->
|
|||
|
|
<div class="header">
|
|||
|
|
|
|||
|
|
<div class="left">
|
|||
|
|
<dv-decoration-1 style="width:200px;height:50px;">
|
|||
|
|
</dv-decoration-1>
|
|||
|
|
<div class="logo">
|
|||
|
|
<span>{{ name }}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="title">
|
|||
|
|
<img :src="p.img" alt="p.name" v-for="(p,i) in page" :key="i" @click="toPath(p.path)">
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="right">
|
|||
|
|
<div>
|
|||
|
|
<span class="view"
|
|||
|
|
:class="{sidebarcolor:showSidebar}"
|
|||
|
|
@click="toggleSidebar">{{!showSidebar ? '收起侧边栏' : '打开侧边栏'}}</span>
|
|||
|
|
<span>当前日期：{{currentTime }}</span>
|
|||
|
|
<dv-decoration-1 style="width:200px;height:50px;">
|
|||
|
|
</dv-decoration-1>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 内容区域 -->
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="left" v-show="!showSidebar">
|
|||
|
|
<div class="left_1">
|
|||
|
|
<dv-border-box-1>
|
|||
|
|
<p class="title" >
|
|||
|
|
园区基本情况
|
|||
|
|
</p>
|
|||
|
|
<div style="display: flex;flex-direction: row;justify-content: space-around;width: 100%;padding-left:10px;">
|
|||
|
|
<div style="display: flex;flex-direction: column;"><span>一级企业</span>
|
|||
|
|
<span>{{enterprise_count[2] ? enterprise_count[2].num : 0}}</span></div>
|
|||
|
|
<div style="display: flex;flex-direction: column;"><span>二级企业</span>
|
|||
|
|
<span>{{enterprise_count[0] ? enterprise_count[0].num : 0}}</span></div>
|
|||
|
|
<div style="display: flex;flex-direction: column;"><span>三级企业</span>
|
|||
|
|
<span>{{enterprise_count[1] ? enterprise_count[1].num : 0}}</span></div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<p class="title" >
|
|||
|
|
片区情况
|
|||
|
|
</p>
|
|||
|
|
|
|||
|
|
<div style="display: flex;flex-direction: row;justify-content: space-around;width: 100%;padding-left:10px;">
|
|||
|
|
<div style="display: flex;flex-direction: column;"><span>化工一区</span>
|
|||
|
|
<span>{{echarts_data.area ? echarts_data.area[0] : 0}}</span></div>
|
|||
|
|
<div style="display: flex;flex-direction: column;"><span>化工二区</span>
|
|||
|
|
<span>{{echarts_data.area ? echarts_data.area[1] : 0}}</span></div>
|
|||
|
|
<div style="display: flex;flex-direction: column;"><span>化工三区</span>
|
|||
|
|
<span>{{echarts_data.area ? echarts_data.area[2] : 0}}</span></div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div>
|
|||
|
|
<div style="display: flex;flex-direction: column;">
|
|||
|
|
<p class="title" >道路情况</p>
|
|||
|
|
<span>{{echarts_data.road_count}}</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</dv-border-box-1>
|
|||
|
|
</div>
|
|||
|
|
<div class="left_2">
|
|||
|
|
<dv-border-box-8>
|
|||
|
|
|
|||
|
|
<p class="title">
|
|||
|
|
<span>卡口流量统计</span>
|
|||
|
|
</p>
|
|||
|
|
<div id="echarts-left_1" style="width: 100%; height: 25vh;"></div>
|
|||
|
|
|
|||
|
|
</dv-border-box-8>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
<div class="left_3">
|
|||
|
|
<dv-border-box-8>
|
|||
|
|
<p class="title">
|
|||
|
|
<span>近30天报警统计</span>
|
|||
|
|
</p>
|
|||
|
|
<div id="echarts-left_2" style="width: 100%; height: 25vh;"></div>
|
|||
|
|
</dv-border-box-8>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="main">
|
|||
|
|
<div id='container'></div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="right" v-show="!showSidebar">
|
|||
|
|
<div class="right_1" style="display:flex;flex-direction: column;">
|
|||
|
|
<dv-border-box-1>
|
|||
|
|
<p class="title" style="margin: 0">
|
|||
|
|
<span>报警处理情况</span>
|
|||
|
|
</p>
|
|||
|
|
|
|||
|
|
<div style="display: grid;grid-template-columns: 1fr 1fr 1fr;align-items: center;padding-left: 30px;width: 100%">
|
|||
|
|
<div style="display: flex;flex-direction: column;align-content: center">
|
|||
|
|
<dv-water-level-pond :config="right_config_1"
|
|||
|
|
style="width:50px;height:70px"></dv-water-level-pond>
|
|||
|
|
<div style="width: 70px;">
|
|||
|
|
已处理
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div>
|
|||
|
|
<div style="height:30px">
|
|||
|
|
总数
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
{{right_config_he}}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div style="display: flex;flex-direction: column">
|
|||
|
|
<dv-water-level-pond :config="right_config_2"
|
|||
|
|
style="width:50px;height:70px"></dv-water-level-pond>
|
|||
|
|
<div>
|
|||
|
|
未处理
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<p class="title">
|
|||
|
|
<span>园区危化品车辆统计</span>
|
|||
|
|
</p>
|
|||
|
|
|
|||
|
|
<div style="width: 100%;height: 20px;">
|
|||
|
|
<div style="padding: 0 10px 5px;">
|
|||
|
|
<span>在线：{{right_config_line.online}}</span>
|
|||
|
|
<span>离线：{{right_config_line.offline}}</span>
|
|||
|
|
</div>
|
|||
|
|
<div style="display:flex;padding: 0 10px;">
|
|||
|
|
<div :style="{
|
|||
|
|
'width':right_config_line.online_ratio + '%'
|
|||
|
|
}" style="height:20px;background-color: yellow"></div>
|
|||
|
|
<div :style="{
|
|||
|
|
'width':right_config_line.offline_ratio + '%'
|
|||
|
|
}" style="height:20px;background-color: green"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</dv-border-box-1>
|
|||
|
|
</div>
|
|||
|
|
<div class="right_2">
|
|||
|
|
<dv-border-box-8 :reverse="true">
|
|||
|
|
<p class="title">
|
|||
|
|
<span>危化品车流量TOP5</span>
|
|||
|
|
</p>
|
|||
|
|
<div id="echarts-right_1" style="width: 100%; height: 25vh;"></div>
|
|||
|
|
</dv-border-box-8>
|
|||
|
|
</div>
|
|||
|
|
<div class="right_3">
|
|||
|
|
<dv-border-box-8 :reverse="true">
|
|||
|
|
<p class="title">
|
|||
|
|
<span>全年运单统计</span>
|
|||
|
|
</p>
|
|||
|
|
<div id="echarts-right_2" style="width: 100%; height: 25vh;"></div>
|
|||
|
|
</dv-border-box-8>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 地图上图标切换 -->
|
|||
|
|
<div class="lengend" :class="vis&&'l-show'" v-show="vis">
|
|||
|
|
<div class="l-item" v-for="(i,k) of form" :key="k">
|
|||
|
|
<div class="l-head">
|
|||
|
|
<div class="f-item">
|
|||
|
|
<input type="checkbox" v-model="i.val" :id="k+'-tit'">
|
|||
|
|
<label :for="k+'-tit'">
|
|||
|
|
<span>{{i.tit}}</span>
|
|||
|
|
</label>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="l-cont">
|
|||
|
|
<div class="f-item" v-for="(j,z) of i.kids" :key="z">
|
|||
|
|
<input type="checkbox" v-model="i.model" :value="j.val" :id="k+'-item-'+z" @change="i.change(i)">
|
|||
|
|
<label :for="k+'-item-'+z">
|
|||
|
|
<img :src="j.icon" alt="" v-if="j.icon">
|
|||
|
|
<i v-if="j.bc" :style="{'background-color':j.bc}"></i>
|
|||
|
|
<span>{{j.label}}</span>
|
|||
|
|
</label>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="app-vis"><input type="checkbox" id="vis" v-show="vis" v-model="vis"> <label for="vis"></label></div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script type="text/javascript">
|
|||
|
|
|
|||
|
|
stopcolor = '#ff0000'
|
|||
|
|
livcolor = '#e89393'
|
|||
|
|
lv1color = "#ff0000"
|
|||
|
|
lv2color = "#a08e8e"
|
|||
|
|
lv3color = '#d2db00'
|
|||
|
|
lv4color = '#f29b76'
|
|||
|
|
overlayGroups = {
|
|||
|
|
fac: [],
|
|||
|
|
car: [],
|
|||
|
|
enter: {},
|
|||
|
|
road: [],
|
|||
|
|
truth: [],
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
let fac = [
|
|||
|
|
{
|
|||
|
|
label: "变电站",
|
|||
|
|
icon: '/web/static/icon/d.png',
|
|||
|
|
val: 'y',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: "配气站",
|
|||
|
|
icon: '/web/static/icon/fq.png',
|
|||
|
|
val: 'g',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: "热能配置",
|
|||
|
|
icon: '/web/static/icon/rs.png',
|
|||
|
|
val: 'v',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: "废物处理",
|
|||
|
|
icon: '/web/static/icon/fs.png',
|
|||
|
|
val: 'f',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: "给水厂",
|
|||
|
|
icon: '/web/static/icon/w.png',
|
|||
|
|
val: 'd',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: "污水处理厂",
|
|||
|
|
icon: '/web/static/icon/ws.png',
|
|||
|
|
val: 'h',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: "事故池",
|
|||
|
|
icon: '/web/static/icon/b.png',
|
|||
|
|
val: 'p',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: "应急集合点",
|
|||
|
|
icon: '/web/static/icon/pp.png',
|
|||
|
|
val: 'm',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: "医院",
|
|||
|
|
icon: '/web/static/icon/ht.png',
|
|||
|
|
val: '_',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: "居住区域",
|
|||
|
|
bc: livcolor,
|
|||
|
|
val: 'live',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: "停车区域",
|
|||
|
|
bc: stopcolor,
|
|||
|
|
val: 'stop',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: "森林防护区",
|
|||
|
|
bc: '#26c533',
|
|||
|
|
val: 'tree',
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
car = [
|
|||
|
|
{
|
|||
|
|
label: "行驶车辆",
|
|||
|
|
icon: '/web/static/icon/icon_tuli_xs@2x.png',
|
|||
|
|
val: 100,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: "停止车辆",
|
|||
|
|
icon: '/web/static/icon/icon_tuli_tz@2x.png',
|
|||
|
|
val: 200,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: "预警车辆",
|
|||
|
|
icon: '/web/static/icon/icon_tuli_yj@2x.png',
|
|||
|
|
val: 10,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: "正常车辆",
|
|||
|
|
icon: '/web/static/icon/icon_tuli_wyj@2x.png',
|
|||
|
|
val: 20,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: "运单车辆",
|
|||
|
|
icon: '/web/static/icon/icon_tuli_yd@2x.png',
|
|||
|
|
val: 1,
|
|||
|
|
}, {
|
|||
|
|
label: "无运单车辆",
|
|||
|
|
icon: '/web/static/icon/icon_tuli_wyj@2x.png',
|
|||
|
|
val: 2,
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
],
|
|||
|
|
carCode = [
|
|||
|
|
{
|
|||
|
|
label: "红牌车辆",
|
|||
|
|
icon: '/web/static/icon/100.png',
|
|||
|
|
val: 100,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: "黄牌车辆",
|
|||
|
|
icon: '/web/static/icon/200.png',
|
|||
|
|
val: 200,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: "绿牌车辆",
|
|||
|
|
icon: '/web/static/icon/300.png',
|
|||
|
|
val: 300,
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
enter = [
|
|||
|
|
{
|
|||
|
|
label: "一级周界",
|
|||
|
|
bc: lv1color,
|
|||
|
|
val: 'lv1',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: "二级周界",
|
|||
|
|
bc: lv2color,
|
|||
|
|
val: 'lv2',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: "三级周界",
|
|||
|
|
bc: lv3color,
|
|||
|
|
val: 'lv3',
|
|||
|
|
},
|
|||
|
|
// {
|
|||
|
|
// label:"四级周界",
|
|||
|
|
// bc:lv4color,
|
|||
|
|
// val:'lv4',
|
|||
|
|
// },
|
|||
|
|
|
|||
|
|
],
|
|||
|
|
road = [
|
|||
|
|
{
|
|||
|
|
label: "正常周界",
|
|||
|
|
bc: '#448ACA',
|
|||
|
|
val: 'nor',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: "预警周界",
|
|||
|
|
bc: '#46A162',
|
|||
|
|
val: 'warn',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: "禁行周界",
|
|||
|
|
bc: '#6A005F',
|
|||
|
|
val: 'no',
|
|||
|
|
}
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
|
|||
|
|
var vm = new Vue({
|
|||
|
|
el: '#app',
|
|||
|
|
filters: {
|
|||
|
|
status(n) {
|
|||
|
|
switch (n) {
|
|||
|
|
case -1:
|
|||
|
|
return '区域外行驶';
|
|||
|
|
case 0:
|
|||
|
|
return '正常';
|
|||
|
|
case 1:
|
|||
|
|
return '超速';
|
|||
|
|
case 2:
|
|||
|
|
return '禁行/禁停';
|
|||
|
|
case 3:
|
|||
|
|
return '禁停/禁行';
|
|||
|
|
case 4:
|
|||
|
|
return '未上报';
|
|||
|
|
case 5:
|
|||
|
|
return '超最大数量'
|
|||
|
|
default:
|
|||
|
|
return "";
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
data: {
|
|||
|
|
name: '封闭园区运营中心',
|
|||
|
|
page: [
|
|||
|
|
{
|
|||
|
|
'name': '总览',
|
|||
|
|
'path': 'index',
|
|||
|
|
'img': 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAAkCAYAAABCKP5eAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjkyQUZGOTU4QTcyMTExRUI4QjUxRjY1NEYwMEUwMUM2IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjkyQUZGOTU5QTcyMTExRUI4QjUxRjY1NEYwMEUwMUM2Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6OTJBRkY5NTZBNzIxMTFFQjhCNTFGNjU0RjAwRTAxQzYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6OTJBRkY5NTdBNzIxMTFFQjhCNTFGNjU0RjAwRTAxQzYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7WHxqiAAAI8ElEQVR42uyc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
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
'name': '车辆码',
|
|||
|
|
'path': 'i_clm',
|
|||
|
|
'img': 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAAkCAYAAABCKP5eAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjkxRjdENUQ2QTcyMTExRUI4RDJBRTUzMjc2RjEzRERBIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjkxRjdENUQ3QTcyMTExRUI4RDJBRTUzMjc2RjEzRERBIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6OTFGN0Q1RDRBNzIxMTFFQjhEMkFFNTMyNzZGMTNEREEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6OTFGN0Q1RDVBNzIxMTFFQjhEMkFFNTMyNzZGMTNEREEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5pdQd6AAAKwElEQVR42uyc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
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
'name': '车辆状态',
|
|||
|
|
'path': 'cldt',
|
|||
|
|
'img': 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAAkCAYAAABCKP5eAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjkwOTE3MzIzQTcyMTExRUI5M0RDRkMxMUY4ODZBQzE2IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjkwOTE3MzI0QTcyMTExRUI5M0RDRkMxMUY4ODZBQzE2Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6OTA5MTczMjFBNzIxMTFFQjkzRENGQzExRjg4NkFDMTYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6OTA5MTczMjJBNzIxMTFFQjkzRENGQzExRjg4NkFDMTYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5q+4q4AAANAElEQVR42uycf2xV1R3Az7k/3n3vFV6BooBtXZSMIYVK5x9QF2PYJpAtS2ZCa7ZkLkLJliwaKW7TzUlhOl0CZUaTbYoYl2VOfsz9MReKIWbTQJnGIfDa6dRE2ykGCmuhfT/uPefs+z0/7ru8x+sPfrQuvhtuzv1x7n2n53O+P873fC903RsjL5JxbC8F3p+h4JQQAaWg6rIglW0yNioKJXa99XUn983xPOiM+WYN1SYkSxVYXgE8pYAthGwRwoQ+HxdgLaFmE/BUABAZvgihAmBuERFKcARyZbvCmwhlTUkwB75dgfcHhAvSZkNpc8UyRGIk/EISDCCJbym4AUCVgBVoIWhETVe6ftKlOJRgDdaihBq4HEqXFEm0cyG4ttyFkWCEzG0qj3lETRNagTxZEkx1qeEKC/SzjZIMQucgF0aoZFkM2SlSyyFcdSwYgMVjriWa611UpHjypZerHdWyBWS5Bi2YvCxCDQ0nsRLASlIJi8ANHIALwHFndghXcC3JhNIK4EmRYKGcLAWXSsAMmMBuSwZCaCGHQ+l/kaAEsFHHVEFmBq6jATtKmrmj1TSARomvAJ6EDTocHSspxYGSWml7QxMp2QqKcJGhKFbRNFTBQkK2I3BdWQrmUgleetMAHyW5AncyISNcAGuj9FIACVIbhLMnaTMpl5IuwE5T6RgjaAPYeMehCtZqmRm4bqGUNtgu2OHKNglOFoPuhv7nPkipL6D7KZW620g2etXIDs65memIiIoW2oNm2luWNrcYroellGApyaSioidPehkaVoEqGC2yxgcl16qZKXYWiC3aZm4cYMccqCCGtKvGU8apEUe1bOCCa8Y8gAsPCecy2+BffzHx2okM37K5N7d/PPXvX+Atn5uka+49kr3vSnRq543xh0YC0vNgOrtnIs892ZT449uDbMsT7+d7Lqt6BpoBRZoosAW44GVxsMkhM8PQCK5S0VSpWxo6UEpVOzqChWoZJRfhxvAcfshV9S4L4Ica4i3QhlT3yeBgnIaNG3W7Kk6XuZTWmvrbliZegAlh81jPfXCO34FljUeXF9/LcdK/JZ3djceeRW8Qthgcb3twu7XGTrkWWT7dpdMn8tx4APuAxxLQS2hloYQpEkKXjAJpNimPMlTeNUhwUehRaIdLmKCGcqiwVJKLcD0FXdrhi2nw3V+IN8/0aAgjadMWUC19q2rdtbCXfe5MThz6ZIT3L5xpt8Aza2Dk9v+iMX4v3jud48/kOenE43lJq2PEF7sHfZGuq7J29w/zFvOOY6eD9JfmuKvjdilgm4p0HDornFlAJ0XPQ+3RkGiN2aSuJO5L1bWr4/Q2aNey4vt5RvofS2d2TbS/mIw9S7iggqlk4QNvZOMLI5CkOMooeRony9hhEXG6iJoKKZC21OdKchEugr5YwNMcUgcS0qw6ldRB0+uhGw+Za+WfE305jw5iPXwG2jhknjnh833PvpdN43HHjVVDZ31x/DfvZA493FRFoDwYfU/3gP8CFC9c6Dc2NSY3mnbhuzc1JtoLgETf1p7MLhWyLY3Ex2y6WoK2aJ3PRYmKprrfJtpflqYDDpRgkgcldmSqim2JOLznrRPQtjdG9uK06GU/9jsACP1HcqCG86CO/QQRPpRBAux7Et4N5wxVT1zaZQn4kref3Vi1B2xJ3yNHRzbg+fcXJJqTDqnv7Ck/0m+vj9Uvne12b/rncK251r4o0VrlWq0SjkUaUCNAVw6h2g5g8BDppIjjjx4d6RirPeYd0FWDqCUMcDz++VvDay6olRYmVs9OWM/AwOqY5tL2/X25ZQdPBUOXQ0WjgwUSS7MgyFmYKmVgDjwC5jcDYyknqAPnLpRuHsZYThAPVLd3m5u/E9rrWFPpHSJMBNBzJug016o9erMBVW67brrd7HOy78dLkhtxx2uuTeullHFxSILhIi2P9TUcRA6li8dqEwLEnXGSzjCx25zjcVmTA3BrEtb2wRzfsPX4yNNDOb5pZb13+Lvz4w1T7YE7U/njVyWsjaD2dr3Yl++byHMJhzaP+LzLQA1VKID85bGRbSCFzUYjbG6qasdrOJiuStCNWM6rssp6xiOB6MT642nHzbOd1K3XxNrBnq8HvThk2oPaBzQKuT5l74cB2Pnqx/mnL5c0/98AxtGN0guOR5+RQmnHwO6hOoxew+2d/wbhQICOXD2UF10JRzk1CO08ZwnUK3b+nIRVDWoqHb139LQP565Us6BS28BWVZ/M8BDoJxnWrx2s1GhtB+etDduBpuD9IbYSr39uur0dB9eB/+TWImRoV9/VSWvzqnqvfcU1sV3Y5if+ldn3mZFgtI0WpfUxcJgKnixAo6Q6VuRwpWLWvkjcPIX2zpzPq6KtKHnGPuP9r9Z5e85keSfYoPNAoSTBLlV3R1PVzhPDfC06Y6UeNWnwmdhRrCFw4FyXsvcgWFTFUV8B7q25ZV5svZFW/d6Vxj/wHFL/mZHg55THW+KwoOQi3HLOjPR0tXNlpBxVqjmeX+2sRvuMxzM8qw0Hy08bk9sHsuI8pw07He0sQrhvcXI9AE0Z1Wxs50BOpIt/W8MLHSgE3jjLbcD3fLnW246mo1Ttk77OnvJ/z5XcrEi8M4x7opBgQIwXFprNWiTVYTOzk8u9Rz3H8da9E4BYlEzHfZpD14HK3QFqcgNqg1MZvsG2aENNnLZG3wsaof2cz3fh8dm8OA52va0ZYDHlG9yMNnUnDMILtetVgIuDBgfVEoCLNh2vf3iOdaY8a/MDjckO8xy+c26VtRPrXkK/yP6OMjBJAFyzIpFroliCozk/Bqhaf6QaqFCxUDiXERW9EnyxoZpHlibLeqRGRXfo6Urx9tZA0L5opr3OBWhmD
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
'name': '运单状态',
|
|||
|
|
'path': 'yddt',
|
|||
|
|
'img': 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAAkCAYAAABCKP5eAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjhFRDRBMDFFQTcyMTExRUI5MTI2RkJDOUI5NEQyQTAxIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjhFRDRBMDFGQTcyMTExRUI5MTI2RkJDOUI5NEQyQTAxIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6OEVENEEwMUNBNzIxMTFFQjkxMjZGQkM5Qjk0RDJBMDEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6OEVENEEwMURBNzIxMTFFQjkxMjZGQkM5Qjk0RDJBMDEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7VvU5NAAAMvklEQVR42uyc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
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
currentTime: '',
|
|||
|
|
showSidebar: false,
|
|||
|
|
echarts_data: [],
|
|||
|
|
enterprise_count: [],
|
|||
|
|
right_config_line:{online:0,offline:0},
|
|||
|
|
right_config_he: 0,
|
|||
|
|
right_config_1:{data: [55],shape: 'round'},
|
|||
|
|
right_config_2:{data: [45],shape: 'round',colors:['red','red']},
|
|||
|
|
myChart: null,
|
|||
|
|
show_video: false,
|
|||
|
|
infoPos: {
|
|||
|
|
left: '0px',
|
|||
|
|
top: '0px'
|
|||
|
|
},
|
|||
|
|
videosrc: true,
|
|||
|
|
zjinfor: {},
|
|||
|
|
zjinforvis: false,
|
|||
|
|
carInfo: {},
|
|||
|
|
infoVis: false,
|
|||
|
|
vis: false,
|
|||
|
|
linKey: "",
|
|||
|
|
search: '',
|
|||
|
|
form: [
|
|||
|
|
{
|
|||
|
|
tit: '固定设施标记',
|
|||
|
|
get val() {
|
|||
|
|
return this.model.length === this.kids.length;
|
|||
|
|
},
|
|||
|
|
set val(n) {
|
|||
|
|
if (n) {
|
|||
|
|
this.model = this.kids.map(i => i.val);
|
|||
|
|
} else {
|
|||
|
|
this.model = [];
|
|||
|
|
}
|
|||
|
|
this.change(this);
|
|||
|
|
},
|
|||
|
|
model: fac.map(i => i.val),
|
|||
|
|
change(_this) {
|
|||
|
|
let marksers = overlayGroups.fac,
|
|||
|
|
kids = _this.kids.map(i => i.val);
|
|||
|
|
|
|||
|
|
marksers.forEach(i => {
|
|||
|
|
let val = i.getExtData().type;
|
|||
|
|
if (_this.model.includes(val) || !kids.includes(val)) {
|
|||
|
|
i.show();
|
|||
|
|
} else {
|
|||
|
|
i.hide();
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
kids: fac
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
tit: '车辆码',
|
|||
|
|
get val() {
|
|||
|
|
return this.model.length === this.kids.length;
|
|||
|
|
},
|
|||
|
|
set val(n) {
|
|||
|
|
if (n) {
|
|||
|
|
this.model = this.kids.map(i => i.val);
|
|||
|
|
} else {
|
|||
|
|
this.model = [];
|
|||
|
|
}
|
|||
|
|
this.change(this);
|
|||
|
|
},
|
|||
|
|
get zh() {
|
|||
|
|
var arr = [];
|
|||
|
|
for (var i = 0; i < this.model.length; i++) {
|
|||
|
|
this.model[i] = parseInt(this.model[i])
|
|||
|
|
}
|
|||
|
|
arr = this.model;
|
|||
|
|
return arr;
|
|||
|
|
},
|
|||
|
|
change() {
|
|||
|
|
console.log('搜索车辆，车辆码过滤', car_markers.list)
|
|||
|
|
car_markers.list.forEach(i => {
|
|||
|
|
var data = i.getExtData();
|
|||
|
|
var shouldShow = false;
|
|||
|
|
|
|||
|
|
// 先检查车辆码状态是否匹配
|
|||
|
|
if (this.zh.includes(data.status)) {
|
|||
|
|
// 如果车辆码匹配，再检查搜索关键词
|
|||
|
|
if (vm.search) {
|
|||
|
|
// 如果有搜索关键词，检查车牌号是否匹配（支持部分匹配）
|
|||
|
|
if (data.vehicleNo && data.vehicleNo.indexOf(vm.search) !== -1) {
|
|||
|
|
shouldShow = true;
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
// 没有搜索关键词，显示所有匹配车辆码的车辆
|
|||
|
|
shouldShow = true;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 应用显示/隐藏
|
|||
|
|
if (shouldShow) {
|
|||
|
|
i.show();
|
|||
|
|
} else {
|
|||
|
|
i.hide();
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
model: carCode.map(i => i.val),
|
|||
|
|
kids: carCode
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
tit: '周界',
|
|||
|
|
get val() {
|
|||
|
|
return this.model.length === this.kids.length;
|
|||
|
|
},
|
|||
|
|
set val(n) {
|
|||
|
|
if (n) {
|
|||
|
|
this.model = this.kids.map(i => i.val);
|
|||
|
|
} else {
|
|||
|
|
this.model = [];
|
|||
|
|
}
|
|||
|
|
this.change(this);
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
change(_this) {
|
|||
|
|
vm.enterSec();
|
|||
|
|
|
|||
|
|
let enters = overlayGroups.enter,
|
|||
|
|
kids = _this.kids.map(i => i.val);
|
|||
|
|
// for(var i in enters){
|
|||
|
|
// if(_this.model.includes(i)){
|
|||
|
|
// enters[i].forEach(j=>j.show());
|
|||
|
|
// }else{
|
|||
|
|
// enters[i].forEach(j=>j.hide());
|
|||
|
|
// }
|
|||
|
|
// }
|
|||
|
|
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
model: enter.map(i => i.val),
|
|||
|
|
kids: enter
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
tit: '周界筛选禁行',
|
|||
|
|
$val: false,
|
|||
|
|
|
|||
|
|
get val() {
|
|||
|
|
return this.$val;
|
|||
|
|
},
|
|||
|
|
set val(n) {
|
|||
|
|
this.$val = n;
|
|||
|
|
this.change(this);
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
change(_this) {
|
|||
|
|
vm.enterSec();
|
|||
|
|
},
|
|||
|
|
model: [1, 2],
|
|||
|
|
kids: [
|
|||
|
|
{
|
|||
|
|
label: "非禁行",
|
|||
|
|
val: 2,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: "禁行",
|
|||
|
|
val: 1,
|
|||
|
|
},
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
// {
|
|||
|
|
// tit:'道路周界',
|
|||
|
|
// model:true,
|
|||
|
|
// change(_this){
|
|||
|
|
// let truth= overlayGroups.truth,
|
|||
|
|
// kids=_this.kids.map(i=>i.val);
|
|||
|
|
// for(var i in truth){
|
|||
|
|
// if(_this.model.includes(i)){
|
|||
|
|
// truth[i].forEach(j=>j.show());
|
|||
|
|
// }else{
|
|||
|
|
// truth[i].forEach(j=>j.hide());
|
|||
|
|
// }
|
|||
|
|
// }
|
|||
|
|
|
|||
|
|
|
|||
|
|
// },
|
|||
|
|
// get val(){
|
|||
|
|
// return this.model;
|
|||
|
|
// },
|
|||
|
|
// set val(n){
|
|||
|
|
|
|||
|
|
// this.model=n;
|
|||
|
|
// let truth= overlayGroups.truth;
|
|||
|
|
// for(var i in truth){
|
|||
|
|
// if(n){
|
|||
|
|
// truth[i].forEach(j=>j.show());
|
|||
|
|
// }else{
|
|||
|
|
// truth[i].forEach(j=>j.hide());
|
|||
|
|
// }
|
|||
|
|
// }
|
|||
|
|
|
|||
|
|
// },
|
|||
|
|
// kids:[],
|
|||
|
|
// }
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
enterModel() {
|
|||
|
|
var ef = this.form.filter(i => i.tit === '周界')[0],
|
|||
|
|
sf = this.form.filter(i => i.tit === '周界筛选禁行')[0];
|
|||
|
|
return {
|
|||
|
|
lv: ef.model,
|
|||
|
|
isSec: sf.val,
|
|||
|
|
sec: sf.model
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
created() {
|
|||
|
|
this.startTimer()
|
|||
|
|
this.getData()
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
beforeDestroy() {
|
|||
|
|
this.stopTimer(); // 清除定时器以避免内存泄漏
|
|||
|
|
if (this.myChart) {
|
|||
|
|
this.myChart.dispose();
|
|||
|
|
this.myChart = null;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
|
|||
|
|
this.initChart();
|
|||
|
|
},
|
|||
|
|
watch: {
|
|||
|
|
// 监听数据变化自动更新图表
|
|||
|
|
echarts_data(newVal) {
|
|||
|
|
if (newVal) {
|
|||
|
|
this.updateChart();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
getData() {
|
|||
|
|
$.post('/api/Yq_screen/overview').then(r => {
|
|||
|
|
this.echarts_data = r.data
|
|||
|
|
this.enterprise_count = r.data.enterprise_count
|
|||
|
|
|
|||
|
|
this.right_config_1 = {...this.right_config_1,data:[r.data.alarm_handling.processed_ratio]}
|
|||
|
|
this.right_config_2 = {...this.right_config_2,data:[r.data.alarm_handling.untreated_ratio]}
|
|||
|
|
this.right_config_he = r.data.alarm_handling.he
|
|||
|
|
this.right_config_line = r.data.vehicle
|
|||
|
|
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
initChart() {
|
|||
|
|
// 通过document.getElementById获取DOM元素
|
|||
|
|
const chartDom = document.getElementById('echarts-left_1');
|
|||
|
|
|
|||
|
|
|
|||
|
|
if (chartDom) {
|
|||
|
|
this.myChart = echarts.init(chartDom);
|
|||
|
|
// 设置初始空配置
|
|||
|
|
this.myChart.setOption({
|
|||
|
|
title: {
|
|||
|
|
textStyle: {
|
|||
|
|
color: '#94a3b8',
|
|||
|
|
fontSize: 18
|
|||
|
|
},
|
|||
|
|
left: 'center',
|
|||
|
|
top: 'center'
|
|||
|
|
},
|
|||
|
|
xAxis: {show: false},
|
|||
|
|
yAxis: {show: true},
|
|||
|
|
series: []
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
const allcarsDom = document.getElementById('echarts-left_2');
|
|||
|
|
if (allcarsDom) {
|
|||
|
|
this.myChart2 = echarts.init(allcarsDom);
|
|||
|
|
// 设置初始空配置
|
|||
|
|
this.myChart2.setOption({
|
|||
|
|
title: {
|
|||
|
|
textStyle: {
|
|||
|
|
color: '#94a3b8',
|
|||
|
|
fontSize: 18
|
|||
|
|
},
|
|||
|
|
left: 'center',
|
|||
|
|
top: 'center'
|
|||
|
|
},
|
|||
|
|
xAxis: {show: false},
|
|||
|
|
yAxis: {show: true},
|
|||
|
|
series: []
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
// 通过document.getElementById获取DOM元素
|
|||
|
|
const chartBjTime = document.getElementById('echarts-right_1');
|
|||
|
|
if (chartBjTime) {
|
|||
|
|
// 初始化图表
|
|||
|
|
this.myChart3 = echarts.init(chartBjTime);
|
|||
|
|
// 设置初始空配置
|
|||
|
|
this.myChart3.setOption({
|
|||
|
|
title: {
|
|||
|
|
textStyle: {
|
|||
|
|
color: '#94a3b8',
|
|||
|
|
fontSize: 18
|
|||
|
|
},
|
|||
|
|
left: 'center',
|
|||
|
|
top: 'center'
|
|||
|
|
},
|
|||
|
|
xAxis: {show: false},
|
|||
|
|
yAxis: {show: true},
|
|||
|
|
series: []
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 通过document.getElementById获取DOM元素
|
|||
|
|
const chartYqxz = document.getElementById('echarts-right_2');
|
|||
|
|
if (chartYqxz) {
|
|||
|
|
// 初始化图表
|
|||
|
|
this.myChart4 = echarts.init(chartYqxz);
|
|||
|
|
// 设置初始空配置
|
|||
|
|
this.myChart4.setOption({
|
|||
|
|
title: {
|
|||
|
|
textStyle: {
|
|||
|
|
color: '#94a3b8',
|
|||
|
|
fontSize: 18
|
|||
|
|
},
|
|||
|
|
left: 'center',
|
|||
|
|
top: 'center'
|
|||
|
|
},
|
|||
|
|
xAxis: {show: false},
|
|||
|
|
yAxis: {show: true},
|
|||
|
|
series: []
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 窗口大小变化时重绘图表
|
|||
|
|
window.addEventListener('resize', this.handleResize);
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
updateChart() {
|
|||
|
|
if (this.myChart) {
|
|||
|
|
|
|||
|
|
// 初始化图表
|
|||
|
|
const chartData = this.echarts_data.road_checkpoints;
|
|||
|
|
|
|||
|
|
var option = {
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'axis',
|
|||
|
|
axisPointer: {
|
|||
|
|
type: 'shadow'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
legend: {
|
|||
|
|
textStyle: {
|
|||
|
|
color: "#ffffff",
|
|||
|
|
fontSize: '8'
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
grid: {
|
|||
|
|
left: '3%',
|
|||
|
|
right: '4%',
|
|||
|
|
bottom: '3%',
|
|||
|
|
containLabel: true
|
|||
|
|
},
|
|||
|
|
xAxis: [
|
|||
|
|
{
|
|||
|
|
type: 'category',
|
|||
|
|
data: chartData.name,
|
|||
|
|
axisTick: {
|
|||
|
|
alignWithLabel: true
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
interval: 0,
|
|||
|
|
// rotate: 45,
|
|||
|
|
textStyle: {
|
|||
|
|
color: "#ffffff",
|
|||
|
|
fontSize: 12
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
axisLine: {lineStyle: {color: "#ffffff", width: 1}},
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
yAxis: [
|
|||
|
|
{
|
|||
|
|
type: 'value',
|
|||
|
|
axisLine: {lineStyle: {color: "#ffffff", width: 1}},
|
|||
|
|
splitLine: {
|
|||
|
|
show: true,
|
|||
|
|
lineStyle: {type: "dashed", color: "rgba(255,255,255,0.3)"}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
name: '驶入',
|
|||
|
|
type: 'bar',
|
|||
|
|
emphasis: {
|
|||
|
|
focus: 'series'
|
|||
|
|
},
|
|||
|
|
itemStyle: {
|
|||
|
|
color: '#3aa0ff'
|
|||
|
|
},
|
|||
|
|
data: chartData.drive_in,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '驶出',
|
|||
|
|
type: 'bar',
|
|||
|
|
stack: 'Ad',
|
|||
|
|
emphasis: {
|
|||
|
|
focus: 'series'
|
|||
|
|
},
|
|||
|
|
itemStyle: {
|
|||
|
|
color: '#4ecb73'
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
data: chartData.drive_out
|
|||
|
|
},
|
|||
|
|
]
|
|||
|
|
};
|
|||
|
|
// 设置图表配置
|
|||
|
|
this.myChart.setOption(option);// 通过document.getElementById获取DOM元素
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (this.myChart2) {
|
|||
|
|
var chartData = this.echarts_data.alarm_count;
|
|||
|
|
|
|||
|
|
var option = {
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: "item",
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
color: ["#8486F4", "#F077B3", "#29ABE2", "#FFBD27", "#89DE79", "#64B9EA"],
|
|||
|
|
series: [{
|
|||
|
|
name: "报警次数（次）",
|
|||
|
|
type: "pie",
|
|||
|
|
avoidLabelOverlap: true,
|
|||
|
|
itemStyle: {
|
|||
|
|
borderRadius: 10,
|
|||
|
|
borderColor: '#fff',
|
|||
|
|
borderWidth: 1
|
|||
|
|
},
|
|||
|
|
label: {
|
|||
|
|
show: true,
|
|||
|
|
lineStyle: {
|
|||
|
|
color: "#fff" // 标签引导线的颜色
|
|||
|
|
},
|
|||
|
|
normal: {
|
|||
|
|
show: true,
|
|||
|
|
formatter: '{b}: {c} ({d}%)' // {b}: name, {c}: value, {d}: percentage
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
emphasis: {
|
|||
|
|
label: {
|
|||
|
|
show: true,
|
|||
|
|
fontSize: "14",
|
|||
|
|
fontWeight: "bold"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
labelLine: {
|
|||
|
|
lineStyle: {
|
|||
|
|
color: "rgba(255, 255, 255, 0.3)" // 标签引导线的颜色
|
|||
|
|
},
|
|||
|
|
smooth: 0.2, // 平滑度
|
|||
|
|
length: 10, // 第一段线长度
|
|||
|
|
length2: 20 // 第二段线长度
|
|||
|
|
},
|
|||
|
|
data: chartData
|
|||
|
|
}]
|
|||
|
|
};
|
|||
|
|
// 设置图表配置
|
|||
|
|
this.myChart2.setOption(option);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (this.myChart3) {
|
|||
|
|
|
|||
|
|
var chartData = this.echarts_data.traffic_volume;
|
|||
|
|
var name = []
|
|||
|
|
chartData.name.map((item, i) => {
|
|||
|
|
name.push(item.waybill_loading.slice(0,4))
|
|||
|
|
});
|
|||
|
|
var option = {
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: "item",
|
|||
|
|
axisPointer: {
|
|||
|
|
type: 'shadow'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
legend: {
|
|||
|
|
textStyle: {
|
|||
|
|
color: "#ffffff",
|
|||
|
|
fontSize: '8'
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
grid: {
|
|||
|
|
left: '3%',
|
|||
|
|
right: '4%',
|
|||
|
|
bottom: '3%',
|
|||
|
|
containLabel: true
|
|||
|
|
},
|
|||
|
|
xAxis: [
|
|||
|
|
{
|
|||
|
|
type: 'category',
|
|||
|
|
data: name,
|
|||
|
|
axisTick: {
|
|||
|
|
alignWithLabel: true
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
interval: 0,
|
|||
|
|
textStyle: {
|
|||
|
|
color: "#ffffff",
|
|||
|
|
fontSize: 12
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
axisLine: {lineStyle: {color: "#ffffff", width: 1}},
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
yAxis: [
|
|||
|
|
{
|
|||
|
|
type: 'value',
|
|||
|
|
axisLine: {lineStyle: {color: "#ffffff", width: 1}},
|
|||
|
|
splitLine: {
|
|||
|
|
show: true,
|
|||
|
|
lineStyle: {type: "dashed", color: "rgba(255,255,255,0.3)"}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
name: '装货',
|
|||
|
|
type: 'bar',
|
|||
|
|
emphasis: {
|
|||
|
|
focus: 'series'
|
|||
|
|
},
|
|||
|
|
itemStyle: {
|
|||
|
|
color: '#8f13e1'
|
|||
|
|
},
|
|||
|
|
data: chartData.loading,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '卸货',
|
|||
|
|
type: 'bar',
|
|||
|
|
stack: 'Ad',
|
|||
|
|
emphasis: {
|
|||
|
|
focus: 'series'
|
|||
|
|
},
|
|||
|
|
itemStyle: {
|
|||
|
|
color: '#2e9486'
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
data: chartData.unloading
|
|||
|
|
}]
|
|||
|
|
}
|
|||
|
|
// 设置图表配置
|
|||
|
|
this.myChart3.setOption(option);
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (this.myChart4) {
|
|||
|
|
var chartData = this.echarts_data.year;
|
|||
|
|
var mouth = []
|
|||
|
|
var data = []
|
|||
|
|
chartData.map((item, i) => {
|
|||
|
|
mouth.push(item.month)
|
|||
|
|
data.push(item.count)
|
|||
|
|
});
|
|||
|
|
const option = {
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: "axis",
|
|||
|
|
formatter: function (t) {
|
|||
|
|
return t[0].name + "月<br/>" + t[0].value + "";
|
|||
|
|
},
|
|||
|
|
axisPointer: {
|
|||
|
|
type: "cross",
|
|||
|
|
label: {
|
|||
|
|
backgroundColor: "#000000"
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
xAxis: {
|
|||
|
|
type: "category",
|
|||
|
|
// 设置月份标签（1月到12月）
|
|||
|
|
data: mouth,
|
|||
|
|
boundaryGap: false,
|
|||
|
|
axisLine: {
|
|||
|
|
lineStyle: {
|
|||
|
|
color: "#D2F1FF",
|
|||
|
|
width: 1
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
yAxis: {
|
|||
|
|
type: "value",
|
|||
|
|
axisLine: {lineStyle: {color: "#ffffff", width: 1}},
|
|||
|
|
splitLine: {
|
|||
|
|
show: true,
|
|||
|
|
lineStyle: {type: "dashed", color: "rgba(255,255,255,0.3)"}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
visualMap: {
|
|||
|
|
type: "piecewise",
|
|||
|
|
show: false,
|
|||
|
|
dimension: 0,
|
|||
|
|
seriesIndex: 0
|
|||
|
|
},
|
|||
|
|
series: [{
|
|||
|
|
type: "line",
|
|||
|
|
smooth: .6,
|
|||
|
|
symbol: "none",
|
|||
|
|
lineStyle: {
|
|||
|
|
color: "#B7FFE0",
|
|||
|
|
width: 1
|
|||
|
|
},
|
|||
|
|
markLine: {
|
|||
|
|
symbol: ["none", "none"],
|
|||
|
|
label: {
|
|||
|
|
show: false
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
areaStyle: {
|
|||
|
|
normal: {
|
|||
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|||
|
|
{offset: 0, color: "#B7FFE0"},
|
|||
|
|
{offset: .5, color: "rgba(183, 255, 224, 0.5)"},
|
|||
|
|
{offset: 1, color: "rgba(183, 255, 224, 0)"}
|
|||
|
|
])
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 使用转换后的数据
|
|||
|
|
data: data
|
|||
|
|
}]
|
|||
|
|
};
|
|||
|
|
// 设置图表配置
|
|||
|
|
this.myChart4.setOption(option);
|
|||
|
|
}
|
|||
|
|
// 窗口大小变化时重绘图表
|
|||
|
|
window.addEventListener('resize', this.handleResize);
|
|||
|
|
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
|
|||
|
|
handleResize() {
|
|||
|
|
this.myChart && this.myChart.resize();
|
|||
|
|
this.myChart2 && this.myChart2.resize();
|
|||
|
|
this.myChart3 && this.myChart3.resize();
|
|||
|
|
this.myChart4 && this.myChart4.resize();
|
|||
|
|
},
|
|||
|
|
toPath(url) {
|
|||
|
|
window.location.href = '/index/datav/' + url
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
startTimer() {
|
|||
|
|
this.timer = setInterval(() => {
|
|||
|
|
this.currentTime = this.getCurrentDateTime();
|
|||
|
|
}, 1000);
|
|||
|
|
},
|
|||
|
|
stopTimer() {
|
|||
|
|
clearInterval(this.timer);
|
|||
|
|
},
|
|||
|
|
getCurrentDateTime() {
|
|||
|
|
const now = new Date();
|
|||
|
|
const year = now.getFullYear();
|
|||
|
|
const month = this.padNumber(now.getMonth() + 1);
|
|||
|
|
const day = this.padNumber(now.getDate());
|
|||
|
|
const hours = this.padNumber(now.getHours());
|
|||
|
|
const minutes = this.padNumber(now.getMinutes());
|
|||
|
|
const seconds = this.padNumber(now.getSeconds());
|
|||
|
|
return (
|
|||
|
|
year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds
|
|||
|
|
);
|
|||
|
|
},
|
|||
|
|
padNumber(num) {
|
|||
|
|
return num < 10 ? '0' + num : num;
|
|||
|
|
},
|
|||
|
|
toggleSidebar() {
|
|||
|
|
this.showSidebar = !this.showSidebar
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
enterSec() {
|
|||
|
|
let enters = overlayGroups.enter;
|
|||
|
|
// console.log('enterSec',enters)
|
|||
|
|
for (var i in enters) {
|
|||
|
|
if (this.enterModel.lv.includes(i)) {
|
|||
|
|
if (this.enterModel.isSec) {
|
|||
|
|
enters[i].forEach(j => {
|
|||
|
|
if ([0, ...this.enterModel.sec].includes(j.getExtData().is_ban)) {
|
|||
|
|
j.show()
|
|||
|
|
} else {
|
|||
|
|
console.log(j)
|
|||
|
|
j.hide();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
enters[i].forEach(j => j.show());
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
} else {
|
|||
|
|
enters[i].forEach(j => j.hide());
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
linSearch() {
|
|||
|
|
this.search = this.linKey;
|
|||
|
|
vm.form[1].change();
|
|||
|
|
},
|
|||
|
|
searchClear() {
|
|||
|
|
this.search = "";
|
|||
|
|
this.linKey = "";
|
|||
|
|
vm.form[1].change();
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<script type="text/javascript">
|
|||
|
|
window._AMapSecurityConfig = {
|
|||
|
|
securityJsCode: 'c093878ad110aeadf3f2e6854ada1f6c',
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<script src="https://webapi.amap.com/maps?v=2.1Beta&key=31fedc4d3fd2c3438589db99eb2f7182&plugin=AMap.MouseTool"></script>
|
|||
|
|
<script type="text/javascript">
|
|||
|
|
const MAP_KEY = "31fedc4d3fd2c3438589db99eb2f7182",
|
|||
|
|
{
|
|||
|
|
LngLat
|
|||
|
|
} = AMap;
|
|||
|
|
var buildings = new AMap.Buildings({
|
|||
|
|
zooms: [13.4, 20],
|
|||
|
|
zIndex: 10,
|
|||
|
|
heightFactor: 2, //2倍于默认高度（3D 视图下生效）
|
|||
|
|
});
|
|||
|
|
var map = new AMap.Map('container', {
|
|||
|
|
zoom: 13.4,
|
|||
|
|
center: new LngLat(107.01706, 29.821693),
|
|||
|
|
mapStyle: 'amap://styles/light',//d20072f4733f3c023ea36097cd4d9933
|
|||
|
|
viewMode: "3D",
|
|||
|
|
terrain: true,
|
|||
|
|
pitch: 44.5,
|
|||
|
|
rotation: 0,
|
|||
|
|
features: ['bg', 'road', 'point'],//默认不要 'building',
|
|||
|
|
layers: [buildings], //地图图层的数组
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
map.on('zoomchange', () => {
|
|||
|
|
if (map.getZoom() > 18) map.setZoom(18);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
|
|||
|
|
// 构造官方卫星图层
|
|||
|
|
var satelliteLayer = new AMap.TileLayer.Satellite();
|
|||
|
|
//批量添加图层
|
|||
|
|
map.add([satelliteLayer]);
|
|||
|
|
|
|||
|
|
|
|||
|
|
// 卡口
|
|||
|
|
kk = `107.027841,29.759073;107.034279,29.762086;106.997726,29.824484;107.059954,29.820257;107.043592,29.83791;107.016477,29.871028;106.962953,29.790122`;
|
|||
|
|
|
|||
|
|
function kkRender() {
|
|||
|
|
strToLL(kk).map(i => {
|
|||
|
|
new AMap.Marker({
|
|||
|
|
position: i,
|
|||
|
|
map: map,
|
|||
|
|
icon: '/web/static/icon/tuli_kakou.png'
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
kkRender();
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
showMarkers();
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
function strToLL(str) {
|
|||
|
|
return str.split(';').map(i => new LngLat(...i.split(',').map(j => +j)))
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function openInfo(name, pixel) {
|
|||
|
|
|
|||
|
|
const res = `
|
|||
|
|
<div class="custom-info-window" style="color: black;">
|
|||
|
|
<p style="color: white;background: rgba(13,21,61,.7);border: 1px solid rgba(126,206,244,.8);padding: 10px 20px;"> ${name}</p>
|
|||
|
|
</div>
|
|||
|
|
`;
|
|||
|
|
|
|||
|
|
// 创建新的信息窗口
|
|||
|
|
infoWindow = new AMap.InfoWindow({
|
|||
|
|
content: res,
|
|||
|
|
offset: new AMap.Pixel(0, 0),
|
|||
|
|
isCustom: true
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
infoWindow.open(map, [pixel.lng, pixel.lat]);
|
|||
|
|
|
|||
|
|
setTimeout(() => {
|
|||
|
|
infoWindow.close();
|
|||
|
|
}, 3000)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 区域数据
|
|||
|
|
function lvOverRender(i, sty) {
|
|||
|
|
var style = {};
|
|||
|
|
|
|||
|
|
style = {
|
|||
|
|
fillOpacity: {
|
|||
|
|
1: 0,
|
|||
|
|
2: .5,
|
|||
|
|
3: .5,
|
|||
|
|
4: 1,
|
|||
|
|
},
|
|||
|
|
fillColor: {
|
|||
|
|
1: lv1color,
|
|||
|
|
2: lv2color,
|
|||
|
|
3: lv3color,
|
|||
|
|
4: lv4color
|
|||
|
|
},
|
|||
|
|
strokeOpacity: {
|
|||
|
|
1: 1,
|
|||
|
|
2: 1,
|
|||
|
|
3: 1,
|
|||
|
|
4: 1
|
|||
|
|
},
|
|||
|
|
strokeColor: {
|
|||
|
|
1: lv1color,
|
|||
|
|
2: lv2color,
|
|||
|
|
3: lv3color,
|
|||
|
|
4: lv4color
|
|||
|
|
},
|
|||
|
|
strokeWeight: {
|
|||
|
|
1: 3,
|
|||
|
|
2: 2,
|
|||
|
|
3: 0,
|
|||
|
|
4: 0,
|
|||
|
|
},
|
|||
|
|
zIndex: {
|
|||
|
|
1: 21,
|
|||
|
|
2: 22,
|
|||
|
|
3: 23,
|
|||
|
|
4: 24
|
|||
|
|
},
|
|||
|
|
strokeStyle: {
|
|||
|
|
1: 'dashed',//dashed
|
|||
|
|
2: 'solid',
|
|||
|
|
3: 'solid',
|
|||
|
|
4: 'solid',
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var poy = new AMap.Polygon({
|
|||
|
|
map: map,
|
|||
|
|
path: i.info ? strToLL(i.info) : '',
|
|||
|
|
extData: i,
|
|||
|
|
...(function () {
|
|||
|
|
var obj = {};
|
|||
|
|
for (var j in style) {
|
|||
|
|
const region_lv = i.region_lv == 20 ? 2 : (i.region_lv == 21 ? 3 : (i.region_lv == 22 ? 1 : 4))
|
|||
|
|
obj[j] = style[j][region_lv]
|
|||
|
|
|
|||
|
|
if (region_lv == 1 && i.id == 1) {
|
|||
|
|
// 计算区域面积
|
|||
|
|
var area = Math.round(AMap.GeometryUtil.ringArea(strToLL(i.info)));
|
|||
|
|
console.log(area)
|
|||
|
|
var text = new AMap.Text({
|
|||
|
|
position: new AMap.LngLat(107.01256, 29.777093),
|
|||
|
|
text: '区域面积' + area + '平方米',
|
|||
|
|
offset: new AMap.Pixel(-20, -20)
|
|||
|
|
})
|
|||
|
|
map.add(text);
|
|||
|
|
map.setFitView();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return obj
|
|||
|
|
})(),
|
|||
|
|
...(sty || {})
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
|
|||
|
|
map.add(poy)
|
|||
|
|
poy.on('click', function (e) {
|
|||
|
|
console.log(e.target.getExtData())
|
|||
|
|
openInfo(e.target.getExtData().name, e.lnglat)
|
|||
|
|
// // if(e.target.getExtData().type=='stop'){
|
|||
|
|
// // vm.zjinfor={name:'明宇危化品停车场'}
|
|||
|
|
// // }else if(e.target.getExtData().type=='live'){
|
|||
|
|
// // vm.zjinfor={name:'晏家居住区'}
|
|||
|
|
// // }else{
|
|||
|
|
// // vm.zjinfor=e.target.getExtData();
|
|||
|
|
// // }
|
|||
|
|
// vm.zjinfor = e.target.getExtData();
|
|||
|
|
//
|
|||
|
|
// vm.zjinforvis = true;
|
|||
|
|
// vm.infoVis = false;
|
|||
|
|
// let pos = e.pixel;
|
|||
|
|
// vm.infoPos = {
|
|||
|
|
// left: `${pos.x + 10}px`,
|
|||
|
|
// top: `${pos.y - 120}px`
|
|||
|
|
// }
|
|||
|
|
// var timer;
|
|||
|
|
// timer && clearTimeout(timer);
|
|||
|
|
//
|
|||
|
|
// timer = setTimeout(e => {
|
|||
|
|
// vm.zjinforvis = false
|
|||
|
|
// }, 5e3);
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
return poy;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var carlist = [],
|
|||
|
|
timer,
|
|||
|
|
markerEvent = e => {
|
|||
|
|
let pos = e.pixel;
|
|||
|
|
vm.carInfo = e.target.getExtData();
|
|||
|
|
vm.infoVis = true;
|
|||
|
|
vm.zjinforvis = false;
|
|||
|
|
vm.infoPos = {
|
|||
|
|
left: `${pos.x + 10}px`,
|
|||
|
|
top: `${pos.y - 120}px`
|
|||
|
|
}
|
|||
|
|
timer && clearTimeout(timer);
|
|||
|
|
|
|||
|
|
timer = setTimeout(e => {
|
|||
|
|
vm.infoVis = false
|
|||
|
|
}, 5e3);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
|
|||
|
|
function CarMarkers() {
|
|||
|
|
this.list = [];
|
|||
|
|
this.data = [];
|
|||
|
|
Object.defineProperty(this, 'ids', {
|
|||
|
|
get() {
|
|||
|
|
return this.data.map(i => i.id);
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
CarMarkers.prototype.getMarker = function (id) {
|
|||
|
|
return this.list.filter(i => {
|
|||
|
|
return i.getExtData().id === id
|
|||
|
|
})[0];
|
|||
|
|
}
|
|||
|
|
CarMarkers.prototype.update = function (list) {
|
|||
|
|
let markers = [], marker;
|
|||
|
|
list.forEach(i => {
|
|||
|
|
let lnglat = new LngLat(i.longitude, i.latitude);
|
|||
|
|
i.type = "marker";
|
|||
|
|
|
|||
|
|
if (this.ids.includes(i.id)) {
|
|||
|
|
marker = this.getMarker(i.id);
|
|||
|
|
|
|||
|
|
if (lnglat.toString() !== marker.getPosition().toString()) {
|
|||
|
|
marker.setPosition(lnglat);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var _data = marker.getExtData();
|
|||
|
|
|
|||
|
|
marker.setIcon('/web/static/icon/' + i.status + '.png'/*_data.vehicle_type?'icon/dingwei_red.png':_data.vec1?'icon/dingwei_blue.png':'icon/dingwei_white.png'*/);
|
|||
|
|
|
|||
|
|
|
|||
|
|
marker.setExtData(i);
|
|||
|
|
|
|||
|
|
|
|||
|
|
} else {
|
|||
|
|
marker = new AMap.Marker({
|
|||
|
|
icon: '/web/static/icon/' + i.status + '.png',//i.vehicle_type?'icon/dingwei_red.png':i.vec1?'icon/dingwei_blue.png':'icon/dingwei_white.png',
|
|||
|
|
position: lnglat,
|
|||
|
|
offset: new AMap.Pixel(-12, -12),
|
|||
|
|
zIndex: 30 + i.id,
|
|||
|
|
map: map,
|
|||
|
|
extData: i
|
|||
|
|
});
|
|||
|
|
marker.on('click', markerEvent)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/*if(vm.form[1].zh.includes(i.status)){
|
|||
|
|
marker.show();
|
|||
|
|
}else{
|
|||
|
|
marker.hide();
|
|||
|
|
}*/
|
|||
|
|
|
|||
|
|
markers.push(marker)
|
|||
|
|
})
|
|||
|
|
let removeArr = [];
|
|||
|
|
this.list.forEach(i => {
|
|||
|
|
if (!markers.includes(i)) {
|
|||
|
|
removeArr.push(i)
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
map.remove(removeArr)
|
|||
|
|
this.data = list;
|
|||
|
|
this.list = markers;
|
|||
|
|
vm.form[1].change();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
let car_markers = new CarMarkers();
|
|||
|
|
|
|||
|
|
function showMarkers() {
|
|||
|
|
const icons = {
|
|||
|
|
_: '/web/static/icon/ht.png',
|
|||
|
|
g: '/web/static/icon/fq.png',
|
|||
|
|
u: '/web/static/icon/lv3.png',
|
|||
|
|
c: '/web/static/icon/lv4.png',
|
|||
|
|
l: '/web/static/icon/2.png',
|
|||
|
|
y: '/web/static/icon/d.png',
|
|||
|
|
v: '/web/static/icon/rs.png',
|
|||
|
|
d: '/web/static/icon/w.png',
|
|||
|
|
h: '/web/static/icon/ws.png',
|
|||
|
|
s: '/web/static/icon/lv1.png',
|
|||
|
|
b: '/web/static/icon/ot.png',
|
|||
|
|
m: '/web/static/icon/pp.png',
|
|||
|
|
f: '/web/static/icon/fs.png',
|
|||
|
|
p: '/web/static/icon/b.png',
|
|||
|
|
stop: '/web/static/icon/p.png'
|
|||
|
|
}
|
|||
|
|
let geoJson = markers_pos.map(i => {
|
|||
|
|
return {
|
|||
|
|
path: i[0],
|
|||
|
|
type: i[1]
|
|||
|
|
}
|
|||
|
|
}),
|
|||
|
|
markers = geoJson.map(i => {
|
|||
|
|
return new AMap.Marker({
|
|||
|
|
position: strToLL(i.path)[0],
|
|||
|
|
icon: new AMap.Icon({
|
|||
|
|
size: new AMap.Size(23, 23),
|
|||
|
|
image: icons[i.type],
|
|||
|
|
imageSize: new AMap.Size(15, 15),
|
|||
|
|
}),
|
|||
|
|
anchor: 'bottom-center',
|
|||
|
|
offset: new AMap.Pixel(0, 0),
|
|||
|
|
content: !icons[i.type] && `<span style="color:#fff">${i.type}</span>`,
|
|||
|
|
map: map,
|
|||
|
|
extData: i,
|
|||
|
|
})
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
|
|||
|
|
overlayGroups.fac = markers;
|
|||
|
|
return markers;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
overlayGroups.truth = {nor: [], no: [], warn: []};
|
|||
|
|
var truthColor = {nor: '#1b2538', warn: '#46A162', no: '#6A005F'}
|
|||
|
|
|
|||
|
|
getData()
|
|||
|
|
|
|||
|
|
function getData() {
|
|||
|
|
$.post('/api/Yq_perimeter/perimeter_list').then(r => {
|
|||
|
|
this.dataHandle(r.data)
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 获取车辆位置信息（从外部API）
|
|||
|
|
function getlist() {
|
|||
|
|
$.ajax({
|
|||
|
|
type: "POST",
|
|||
|
|
contentType: 'application/json',
|
|||
|
|
url: 'https://changshoupark.cyuncq.com/cs/posInfo',
|
|||
|
|
data: JSON.stringify({
|
|||
|
|
"fenceList": ["CQQA_CQCS"]
|
|||
|
|
}),
|
|||
|
|
success: function (posResponse) {
|
|||
|
|
console.log(posResponse)
|
|||
|
|
if (posResponse.code === 200 && posResponse.data && posResponse.data.length > 0) {
|
|||
|
|
// 构建同步数据（保留原始WGS84坐标）
|
|||
|
|
var syncData = {
|
|||
|
|
code: 200,
|
|||
|
|
data: posResponse.data.map(function (item) {
|
|||
|
|
return {
|
|||
|
|
fenceCode: item.fenceCode,
|
|||
|
|
danCount: item.danCount,
|
|||
|
|
posList: item.posList ? item.posList.map(function (vehicle) {
|
|||
|
|
return {
|
|||
|
|
vehNo: vehicle.vehNo,
|
|||
|
|
vehId: vehicle.vehId,
|
|||
|
|
lon: vehicle.lon,
|
|||
|
|
lat: vehicle.lat,
|
|||
|
|
originalLon: vehicle.lon,
|
|||
|
|
originalLat: vehicle.lat,
|
|||
|
|
v1: vehicle.v1,
|
|||
|
|
dir: vehicle.dir,
|
|||
|
|
posTime: vehicle.posTime,
|
|||
|
|
color: vehicle.color,
|
|||
|
|
trans: vehicle.trans
|
|||
|
|
};
|
|||
|
|
}) : []
|
|||
|
|
};
|
|||
|
|
})
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 同步数据到本地数据库
|
|||
|
|
syncVehicleToLocal(syncData);
|
|||
|
|
|
|||
|
|
// 处理地图展示数据（坐标转换）
|
|||
|
|
var processedData = posResponse.data.map(function (item) {
|
|||
|
|
if (item.posList && item.posList.length > 0) {
|
|||
|
|
item.posList = item.posList.map(function (vehicle) {
|
|||
|
|
var converted = wgs84ToGcj02(vehicle.lon, vehicle.lat);
|
|||
|
|
vehicle.lon = converted.lon;
|
|||
|
|
vehicle.lat = converted.lat;
|
|||
|
|
|
|||
|
|
return vehicle;
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
return item;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
renderVehiclePositions(processedData);
|
|||
|
|
} else {
|
|||
|
|
console.log('未获取到车辆位置数据');
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
error: function (xhr, status, error) {
|
|||
|
|
console.warn('本地车辆数据请求失败:', error);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 同步车辆数据到本地数据库（异步执行，设置超时避免阻塞）
|
|||
|
|
// 同步时会根据企业周界规则自动校验并生成报警
|
|||
|
|
function syncVehicleToLocal(data) {
|
|||
|
|
$.ajax({
|
|||
|
|
type: "POST",
|
|||
|
|
contentType: 'application/json',
|
|||
|
|
url: '/api/Yq_data_handle/sync_vehicle',
|
|||
|
|
data: JSON.stringify(data),
|
|||
|
|
timeout: 30000, // 30秒超时
|
|||
|
|
async: true, // 确保异步执行
|
|||
|
|
success: function (res) {
|
|||
|
|
if (res.code == 1 || res.code == 200) {
|
|||
|
|
console.log('车辆数据同步成功:', res.data);
|
|||
|
|
// 如果有新报警生成，刷新滚动报警列表
|
|||
|
|
if (res.data && res.data.alarm_count > 0) {
|
|||
|
|
console.log('生成新报警:', res.data.alarm_count, '条');
|
|||
|
|
vm.getData(); // 刷新报警列表
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
console.warn('车辆数据同步失败:', res.msg);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
error: function (xhr, status, error) {
|
|||
|
|
if (status === 'timeout') {
|
|||
|
|
console.warn('车辆数据同步超时');
|
|||
|
|
} else {
|
|||
|
|
console.warn('车辆数据同步请求失败:', error);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// WGS84坐标转GCJ02坐标（高德地图坐标系）
|
|||
|
|
function wgs84ToGcj02(lon, lat) {
|
|||
|
|
var a = 6378245.0;
|
|||
|
|
var ee = 0.00669342162296594323;
|
|||
|
|
|
|||
|
|
if (outOfChina(lon, lat)) {
|
|||
|
|
return {lon: lon, lat: lat};
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var dLat = transformLat(lon - 105.0, lat - 35.0);
|
|||
|
|
var dLon = transformLon(lon - 105.0, lat - 35.0);
|
|||
|
|
var radLat = lat / 180.0 * Math.PI;
|
|||
|
|
var magic = Math.sin(radLat);
|
|||
|
|
magic = 1 - ee * magic * magic;
|
|||
|
|
var sqrtMagic = Math.sqrt(magic);
|
|||
|
|
dLat = (dLat * 180.0) / ((a * (1 - ee)) / (magic * sqrtMagic) * Math.PI);
|
|||
|
|
dLon = (dLon * 180.0) / (a / sqrtMagic * Math.cos(radLat) * Math.PI);
|
|||
|
|
|
|||
|
|
return {
|
|||
|
|
lon: lon + dLon,
|
|||
|
|
lat: lat + dLat
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function outOfChina(lon, lat) {
|
|||
|
|
return (lon < 72.004 || lon > 137.8347) || ((lat < 0.8293 || lat > 55.8271) || false);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function transformLat(lon, lat) {
|
|||
|
|
var ret = -100.0 + 2.0 * lon + 3.0 * lat + 0.2 * lat * lat + 0.1 * lon * lat + 0.2 * Math.sqrt(Math.abs(lon));
|
|||
|
|
ret += (20.0 * Math.sin(6.0 * lon * Math.PI) + 20.0 * Math.sin(2.0 * lon * Math.PI)) * 2.0 / 3.0;
|
|||
|
|
ret += (20.0 * Math.sin(lat * Math.PI) + 40.0 * Math.sin(lat / 3.0 * Math.PI)) * 2.0 / 3.0;
|
|||
|
|
ret += (160.0 * Math.sin(lat / 12.0 * Math.PI) + 320 * Math.sin(lat * Math.PI / 30.0)) * 2.0 / 3.0;
|
|||
|
|
return ret;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function transformLon(lon, lat) {
|
|||
|
|
var ret = 300.0 + lon + 2.0 * lat + 0.1 * lon * lon + 0.1 * lon * lat + 0.1 * Math.sqrt(Math.abs(lon));
|
|||
|
|
ret += (20.0 * Math.sin(6.0 * lon * Math.PI) + 20.0 * Math.sin(2.0 * lon * Math.PI)) * 2.0 / 3.0;
|
|||
|
|
ret += (20.0 * Math.sin(lon * Math.PI) + 40.0 * Math.sin(lon / 3.0 * Math.PI)) * 2.0 / 3.0;
|
|||
|
|
ret += (150.0 * Math.sin(lon / 12.0 * Math.PI) + 300.0 * Math.sin(lon / 30.0 * Math.PI)) * 2.0 / 3.0;
|
|||
|
|
return ret;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 渲染车辆位置到地图
|
|||
|
|
function renderVehiclePositions(data) {
|
|||
|
|
let new_car_data = []
|
|||
|
|
data.forEach(function (item, index) {
|
|||
|
|
if (item.posList && item.posList.length > 0) {
|
|||
|
|
item.posList.forEach(function (vehicle, vehicleIndex) {
|
|||
|
|
|
|||
|
|
if (!vehicle.lon || !vehicle.lat ||
|
|||
|
|
isNaN(vehicle.lon) || isNaN(vehicle.lat) ||
|
|||
|
|
vehicle.lon < 70 || vehicle.lon > 140 ||
|
|||
|
|
vehicle.lat < 0 || vehicle.lat > 60) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var lon = parseFloat(vehicle.lon).toFixed(6);
|
|||
|
|
var lat = parseFloat(vehicle.lat).toFixed(6);
|
|||
|
|
new_car_data.push({
|
|||
|
|
...vehicle,
|
|||
|
|
id: vehicleIndex,
|
|||
|
|
vehicleNo: vehicle.vehNo,
|
|||
|
|
longitude: lon,
|
|||
|
|
latitude: lat,
|
|||
|
|
status: 200, // 默认状态，后续会根据车辆码颜色更新
|
|||
|
|
type: 'vehicle',
|
|||
|
|
speed: vehicle.v1,
|
|||
|
|
direction: vehicle.dir,
|
|||
|
|
posTime: vehicle.posTime,
|
|||
|
|
color: vehicle.color,
|
|||
|
|
trans: vehicle.trans,
|
|||
|
|
vehId: vehicle.vehId,
|
|||
|
|
fenceCode: item.fenceCode,
|
|||
|
|
danCount: item.danCount,
|
|||
|
|
sequence: index + 1,
|
|||
|
|
originalLon: vehicle.lon,
|
|||
|
|
originalLat: vehicle.lat
|
|||
|
|
})
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
car_markers.update(new_car_data)
|
|||
|
|
|
|||
|
|
// 收集所有车牌号
|
|||
|
|
var vehicleNos = new_car_data.map(function(item) {
|
|||
|
|
return item.vehicleNo;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 从后端获取车辆的车辆码颜色（qr_color）信息
|
|||
|
|
$.ajax({
|
|||
|
|
type: "POST",
|
|||
|
|
contentType: 'application/json',
|
|||
|
|
url: '/api/Yq_data_handle/get_vehicle_code_colors',
|
|||
|
|
data: JSON.stringify({ vehicles: vehicleNos }),
|
|||
|
|
success: function(res) {
|
|||
|
|
if (res.code == 1 && res.data) {
|
|||
|
|
var vehicleCodeMap = res.data; // {车牌号: qr_color}
|
|||
|
|
|
|||
|
|
// 更新每个车辆的 status
|
|||
|
|
vehicleNos.forEach(function(vehNo) {
|
|||
|
|
var qrColor = vehicleCodeMap[vehNo];
|
|||
|
|
// 根据车辆码颜色设置 status: 1=绿码=300, 2=黄码=200, 3=红码=100
|
|||
|
|
var status = 200; // 默认黄码
|
|||
|
|
if (qrColor == 1) {
|
|||
|
|
status = 300; // 绿码
|
|||
|
|
} else if (qrColor == 2) {
|
|||
|
|
status = 200; // 黄码
|
|||
|
|
} else if (qrColor == 3) {
|
|||
|
|
status = 100; // 红码
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 更新对应车辆的 status
|
|||
|
|
car_markers.list.forEach(function(marker) {
|
|||
|
|
var data = marker.getExtData();
|
|||
|
|
if (data.vehicleNo === vehNo) {
|
|||
|
|
data.status = status;
|
|||
|
|
marker.setExtData(data);
|
|||
|
|
marker.setIcon('/web/static/icon/' + status + '.png');
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 更新车辆码颜色后，重新应用搜索和过滤
|
|||
|
|
if (vm && vm.form && vm.form[1]) {
|
|||
|
|
vm.form[1].change();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
error: function(err) {
|
|||
|
|
console.warn('获取车辆码颜色失败:', err);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 初始化时调用，并设置定时刷新
|
|||
|
|
getlist();
|
|||
|
|
setInterval(function () {
|
|||
|
|
getlist();
|
|||
|
|
}, 30000);
|
|||
|
|
|
|||
|
|
function dataHandle(data) {
|
|||
|
|
let lv1 = [], lv2 = [], lv3 = [], lv4 = [];
|
|||
|
|
data.filter(function (i) {
|
|||
|
|
var res;
|
|||
|
|
if (i.region_lv === 22 && i.region_type === 8) { //停车场
|
|||
|
|
//res = false;
|
|||
|
|
overlayGroups.fac.push(lvOverRender(i, {
|
|||
|
|
fillColor: stopcolor,
|
|||
|
|
fillOpacity: .3,
|
|||
|
|
strokeColor: stopcolor,
|
|||
|
|
extData: {
|
|||
|
|
type: 'stop',
|
|||
|
|
name: i.name
|
|||
|
|
}
|
|||
|
|
}))
|
|||
|
|
} else if (i.region_lv === 21 && i.region_type === 3) { //居住区
|
|||
|
|
//res = false;
|
|||
|
|
overlayGroups.fac.push(lvOverRender(i, {
|
|||
|
|
fillColor: livcolor,
|
|||
|
|
fillOpacity: .5,
|
|||
|
|
strokeColor: livcolor,
|
|||
|
|
extData: {
|
|||
|
|
type: 'live',
|
|||
|
|
name: i.name
|
|||
|
|
}
|
|||
|
|
}))
|
|||
|
|
} else if (i.region_lv === 20 && i.region_type === 4) { //森林防护区
|
|||
|
|
overlayGroups.fac.push(lvOverRender(i, {
|
|||
|
|
fillColor: '#26c533',
|
|||
|
|
strokeColor: '#26c533',
|
|||
|
|
extData: {
|
|||
|
|
type: 'tree',
|
|||
|
|
name: i.name
|
|||
|
|
}
|
|||
|
|
}))
|
|||
|
|
} else {
|
|||
|
|
res = true;
|
|||
|
|
}
|
|||
|
|
return res;
|
|||
|
|
|
|||
|
|
}).forEach(i => {
|
|||
|
|
|
|||
|
|
if (i.info) {
|
|||
|
|
let stys = {}
|
|||
|
|
if (i.region_type == 5) {
|
|||
|
|
stys = {
|
|||
|
|
[i.id]: {
|
|||
|
|
fillColor: '#000000',
|
|||
|
|
fillOpacity: .1,
|
|||
|
|
strokeColor: '#000000',
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
var over = lvOverRender(i, stys[i.id] || {})
|
|||
|
|
switch (i.region_lv) {
|
|||
|
|
case 22:
|
|||
|
|
lv1.push(over);
|
|||
|
|
break;
|
|||
|
|
case 20:
|
|||
|
|
lv2.push(over);
|
|||
|
|
break;
|
|||
|
|
case 21:
|
|||
|
|
lv3.push(over);
|
|||
|
|
break;
|
|||
|
|
default:
|
|||
|
|
lv4.push(over);
|
|||
|
|
break;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
overlayGroups.enter = {
|
|||
|
|
lv1, lv2, lv3, lv4
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
|
|||
|
|
</body>
|
|||
|
|
|
|||
|
|
</html>
|