2180 lines
102 KiB
HTML
2180 lines
102 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/cldt.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>
|
||
|
||
</head>
|
||
|
||
<body>
|
||
|
||
<div id=app>
|
||
<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-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_2">
|
||
<dv-border-box-8>
|
||
|
||
<p class="title">
|
||
<span>片区车流统计</span>
|
||
</p>
|
||
<div id="echarts-left_2" style="width: 100%; height: 25vh;"></div>
|
||
|
||
</dv-border-box-8>
|
||
|
||
</div>
|
||
<div class="left_3">
|
||
<dv-border-box-8>
|
||
<p class="title">
|
||
<span>园区内行驶停止车辆统计</span>
|
||
</p>
|
||
<div id="echarts-left_3" 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="r_i r_i_1">
|
||
<dv-border-box-8 :reverse="true" class="">
|
||
<p class="title">
|
||
<span>当日进出园区车辆次数</span>
|
||
</p>
|
||
<div id="right-chart_1" style="width: 100%; height: 25vh;"></div>
|
||
</dv-border-box-8>
|
||
</div>
|
||
<div class="r_i r_i_2">
|
||
<dv-border-box-8 :reverse="true" class="">
|
||
<p class="title">
|
||
<span>道路车辆情况</span>
|
||
</p>
|
||
<div id="right-chart_2" style="width: 100%; height: 25vh;"></div>
|
||
</dv-border-box-8>
|
||
</div>
|
||
<div class="r_i r_i_3">
|
||
<dv-border-box-8 :reverse="true" class="">
|
||
<p class="title">
|
||
<span>园区内行驶停止车辆统计</span>
|
||
</p>
|
||
<div id="right-chart_3" 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 class="car-search">
|
||
<input type="text" placeholder="车辆搜索" v-model="linKey">
|
||
<i @click="searchClear" v-show="linKey"></i>
|
||
<span @click="linSearch">搜索</span>
|
||
</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: '/icon/01.png',
|
||
val: 1222,
|
||
},
|
||
{
|
||
label: "停止车辆",//行驶重
|
||
icon: '/icon/02.png',
|
||
val: 2222,
|
||
},
|
||
{
|
||
label: "重载车辆",//停止空
|
||
icon: '/icon/11.png',
|
||
val: 3333,
|
||
},
|
||
{
|
||
label: "空载车辆",//停止重
|
||
icon: '/icon/12.png',
|
||
val: 4444,
|
||
},
|
||
|
||
],
|
||
enter = [
|
||
{
|
||
label: "一级周界",
|
||
bc: lv1color,
|
||
val: 'lv1',
|
||
},
|
||
{
|
||
label: "二级周界",
|
||
bc: lv2color,
|
||
val: 'lv2',
|
||
},
|
||
{
|
||
label: "三级周界",
|
||
bc: lv3color,
|
||
val: 'lv3',
|
||
},
|
||
|
||
],
|
||
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+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjkzNjY5NzQ3QTcyMTExRUI5OTM1OTc5OEFERjMyM0Y0IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjkzNjY5NzQ4QTcyMTExRUI5OTM1OTc5OEFERjMyM0Y0Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6OTM2Njk3NDVBNzIxMTFFQjk5MzU5Nzk4QURGMzIzRjQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6OTM2Njk3NDZBNzIxMTFFQjk5MzU5Nzk4QURGMzIzRjQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7DkPpKAAAJmklEQVR42uyc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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+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjhGREMzM0Q2QTcyMTExRUI5Mzg2RkREM0QyQ0ZGRDA3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjhGREMzM0Q3QTcyMTExRUI5Mzg2RkREM0QyQ0ZGRDA3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6OEZEQzMzRDRBNzIxMTFFQjkzODZGREQzRDJDRkZEMDciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6OEZEQzMzRDVBNzIxMTFFQjkzODZGREQzRDJDRkZEMDciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz53r5RLAAAMTklEQVR42uxc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'
|
||
},
|
||
{
|
||
'name': '运单状态',
|
||
'path': 'yddt',
|
||
'img': 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAAkCAYAAABCKP5eAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjhFRDRBMDFFQTcyMTExRUI5MTI2RkJDOUI5NEQyQTAxIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjhFRDRBMDFGQTcyMTExRUI5MTI2RkJDOUI5NEQyQTAxIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6OEVENEEwMUNBNzIxMTFFQjkxMjZGQkM5Qjk0RDJBMDEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6OEVENEEwMURBNzIxMTFFQjkxMjZGQkM5Qjk0RDJBMDEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7VvU5NAAAMvklEQVR42uyc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'
|
||
},
|
||
],
|
||
currentTime: '',
|
||
showSidebar: false,
|
||
echarts_data: [],
|
||
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);
|
||
console.log(this.model)
|
||
} else {
|
||
this.model = [];
|
||
}
|
||
this.change(this);
|
||
|
||
},
|
||
get zh() {
|
||
//console.log(this.model)
|
||
// let v1=this.model.filter(i==100),
|
||
// v2=this.model.filter(i==200),
|
||
// arr=[];
|
||
// v1.forEach(i=>{
|
||
// v2.forEach(j=>{
|
||
// arr.push(i+j+'');
|
||
|
||
// })
|
||
// })
|
||
var arr = [];
|
||
|
||
for (var i = 0; i < this.model.length; i++) {
|
||
this.model[i] = String(this.model[i])
|
||
}
|
||
arr = this.model;
|
||
return arr;
|
||
},
|
||
change() {
|
||
console.log('搜索车辆，车辆状态过滤', car_markers.list)
|
||
if (!car_markers || !car_markers.list || car_markers.list.length === 0) {
|
||
return; // 如果没有车辆数据，直接返回
|
||
}
|
||
car_markers.list.forEach(i => {
|
||
var data = i.getExtData();
|
||
if (!data) {
|
||
return; // 如果没有数据，跳过
|
||
}
|
||
var shouldShow = false;
|
||
|
||
// 将 status 字符串映射到对应的过滤值
|
||
// status格式：'01'=行驶空载, '02'=行驶重载, '11'=停止空载, '12'=停止重载
|
||
// 过滤值：1222=行驶车辆, 2222=停止车辆, 3333=重载车辆, 4444=空载车辆
|
||
var statusValues = [];
|
||
if (data.status === '01') {
|
||
// 行驶空载 -> 行驶车辆(1222) 和 空载车辆(4444)
|
||
statusValues = [1222, 4444];
|
||
} else if (data.status === '02') {
|
||
// 行驶重载 -> 行驶车辆(1222) 和 重载车辆(3333)
|
||
statusValues = [1222, 3333];
|
||
} else if (data.status === '11') {
|
||
// 停止空载 -> 停止车辆(2222) 和 空载车辆(4444)
|
||
statusValues = [2222, 4444];
|
||
} else if (data.status === '12') {
|
||
// 停止重载 -> 停止车辆(2222) 和 重载车辆(3333)
|
||
statusValues = [2222, 3333];
|
||
} else if (data.status == 1222 || data.status == 2222 || data.status == 3333 || data.status == 4444) {
|
||
// 如果已经是数字格式，直接使用
|
||
statusValues = [parseInt(data.status)];
|
||
}
|
||
|
||
// 检查车辆状态是否匹配（只要匹配任一状态值即可）
|
||
var isStatusMatch = false;
|
||
if (statusValues.length > 0) {
|
||
for (var j = 0; j < statusValues.length; j++) {
|
||
if (this.zh.includes(String(statusValues[j]))) {
|
||
isStatusMatch = true;
|
||
break;
|
||
}
|
||
}
|
||
}
|
||
|
||
if (isStatusMatch) {
|
||
// 如果车辆状态匹配，再检查搜索关键词
|
||
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: car.map(i => i.val),
|
||
kids: car
|
||
}, {
|
||
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(); // 清除定时器以避免内存泄漏
|
||
},
|
||
mounted() {
|
||
this.initChart();
|
||
},
|
||
watch: {
|
||
// 监听数据变化自动更新图表
|
||
echarts_data(newVal) {
|
||
if (newVal) {
|
||
this.updateChart();
|
||
}
|
||
}
|
||
},
|
||
|
||
methods: {
|
||
initChart() {
|
||
|
||
// 通过document.getElementById获取DOM元素
|
||
const chartDom = document.getElementById('echarts-left_1');
|
||
// 初始化图表
|
||
if (chartDom) {
|
||
this.myChart1 = echarts.init(chartDom);
|
||
// 设置初始空配置
|
||
this.myChart1.setOption({
|
||
title: {
|
||
textStyle: {
|
||
color: '#94a3b8',
|
||
fontSize: 18
|
||
},
|
||
left: 'center',
|
||
top: 'center'
|
||
},
|
||
xAxis: {show: false},
|
||
yAxis: {show: true},
|
||
series: []
|
||
});
|
||
}
|
||
|
||
|
||
// 初始化图表
|
||
const chartDom2 = document.getElementById('echarts-left_2');
|
||
if (chartDom2) {
|
||
this.myChart2 = echarts.init(chartDom2);
|
||
// 设置初始空配置
|
||
this.myChart2.setOption({
|
||
title: {
|
||
textStyle: {
|
||
color: '#94a3b8',
|
||
fontSize: 18
|
||
},
|
||
left: 'center',
|
||
top: 'center'
|
||
},
|
||
xAxis: {show: false},
|
||
yAxis: {show: true},
|
||
series: []
|
||
});
|
||
}
|
||
|
||
// 通过document.getElementById获取DOM元素
|
||
const chartDom3 = document.getElementById('echarts-left_3');
|
||
// 初始化图表
|
||
if (chartDom3) {
|
||
this.myChart3 = echarts.init(chartDom3);
|
||
this.myChart3.setOption({
|
||
title: {
|
||
textStyle: {
|
||
color: '#94a3b8',
|
||
fontSize: 18
|
||
},
|
||
left: 'center',
|
||
top: 'center'
|
||
},
|
||
xAxis: {show: false},
|
||
yAxis: {show: true},
|
||
series: []
|
||
});
|
||
}
|
||
|
||
|
||
// 初始化图表
|
||
const chartDom4 = document.getElementById('right-chart_1');
|
||
if (chartDom4) {
|
||
this.myChart4 = echarts.init(chartDom4);
|
||
// 设置初始空配置
|
||
this.myChart4.setOption({
|
||
title: {
|
||
textStyle: {
|
||
color: '#94a3b8',
|
||
fontSize: 18
|
||
},
|
||
left: 'center',
|
||
top: 'center'
|
||
},
|
||
xAxis: {show: false},
|
||
yAxis: {show: true},
|
||
series: []
|
||
});
|
||
}
|
||
|
||
// 初始化图表
|
||
const chartDom5 = document.getElementById('right-chart_2');
|
||
if (chartDom4) {
|
||
this.myChart5 = echarts.init(chartDom5);
|
||
// 设置初始空配置
|
||
this.myChart5.setOption({
|
||
title: {
|
||
textStyle: {
|
||
color: '#94a3b8',
|
||
fontSize: 18
|
||
},
|
||
left: 'center',
|
||
top: 'center'
|
||
},
|
||
xAxis: {show: false},
|
||
yAxis: {show: true},
|
||
series: []
|
||
});
|
||
}
|
||
|
||
// 初始化图表
|
||
const chartDom6 = document.getElementById('right-chart_3');
|
||
if (chartDom6) {
|
||
this.myChart6 = echarts.init(chartDom6);
|
||
// 设置初始空配置
|
||
this.myChart6.setOption({
|
||
title: {
|
||
textStyle: {
|
||
color: '#94a3b8',
|
||
fontSize: 18
|
||
},
|
||
left: 'center',
|
||
top: 'center'
|
||
},
|
||
xAxis: {show: false},
|
||
yAxis: {show: true},
|
||
series: []
|
||
});
|
||
}
|
||
|
||
// 窗口大小变化时重绘图表
|
||
window.addEventListener('resize', this.handleResize);
|
||
},
|
||
handleResize() {
|
||
this.myChart && this.myChart.resize();
|
||
},
|
||
toPath(url) {
|
||
window.location.href = '/index/datav/' + url
|
||
},
|
||
getData() {
|
||
$.post('/api/Yq_screen/vehicle_trend').then(r => {
|
||
this.echarts_data = r.data
|
||
})
|
||
},
|
||
updateChart() {
|
||
if (this.myChart1) {
|
||
var chartData = this.echarts_data.park || {}
|
||
if (!chartData || !chartData.time || !chartData.enter) {
|
||
return; // 数据不完整，跳过
|
||
}
|
||
option = {
|
||
tooltip: {
|
||
trigger: 'axis'
|
||
},
|
||
legend: {
|
||
data: ["进入园区车辆"],
|
||
textStyle: {
|
||
fontSize: 12,
|
||
color: "#fff"
|
||
}
|
||
},
|
||
|
||
xAxis: {
|
||
type: 'category',
|
||
boundaryGap: false,
|
||
data: chartData.time || [],
|
||
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)"}
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
name: '进入园区车辆',
|
||
type: 'line',
|
||
data: chartData.enter || [],
|
||
markLine: {
|
||
data: [
|
||
{type: 'average', name: 'Avg'},
|
||
[
|
||
{
|
||
symbol: 'none',
|
||
x: '90%',
|
||
yAxis: 'max'
|
||
},
|
||
{
|
||
symbol: 'circle',
|
||
label: {
|
||
position: 'start',
|
||
formatter: 'Max'
|
||
},
|
||
type: 'max',
|
||
name: '最高点'
|
||
}
|
||
]
|
||
]
|
||
}
|
||
}
|
||
]
|
||
};
|
||
|
||
// 设置图表配置
|
||
this.myChart1.setOption(option);
|
||
}
|
||
if (this.myChart2) {
|
||
var chartData = this.echarts_data.area || []
|
||
if (!Array.isArray(chartData)) {
|
||
chartData = [];
|
||
}
|
||
var option = {
|
||
tooltip: {
|
||
trigger: "item",
|
||
},
|
||
color: ["#8486F4", "#F077B3", "#29ABE2", "#FFBD27", "#89DE79", "#64B9EA"],
|
||
series: [{
|
||
name: "片区车流统计",
|
||
type: "pie",
|
||
radius: ['40%', '70%'],
|
||
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.stop_count || []
|
||
var chartData2 = this.echarts_data.driving_count || []
|
||
|
||
var time = [];
|
||
var stop_count = []
|
||
var driving_count = []
|
||
if (chartData && Array.isArray(chartData)) {
|
||
chartData.map((item,index)=>{
|
||
if (item) {
|
||
if (item.hour_time) time.push(item.hour_time)
|
||
stop_count.push(item.order_count || 0)
|
||
}
|
||
})
|
||
}
|
||
if (chartData2 && Array.isArray(chartData2)) {
|
||
chartData2.map((item,index)=>{
|
||
if (item) {
|
||
driving_count.push(item.order_count || 0)
|
||
}
|
||
})
|
||
}
|
||
|
||
var option = {
|
||
color: ["#92B0FF", "#F0A6E8"],
|
||
title: {
|
||
text: ""
|
||
},
|
||
tooltip: {
|
||
trigger: "axis",
|
||
axisPointer: {
|
||
type: "cross",
|
||
label: {
|
||
backgroundColor: "#6a7985"
|
||
}
|
||
}
|
||
},
|
||
legend: {
|
||
data: ["行驶车辆数", "停止车辆数"],
|
||
textStyle: {
|
||
fontSize: 12,
|
||
color: "#fff"
|
||
}
|
||
},
|
||
grid: {
|
||
left: "3%",
|
||
right: "4%",
|
||
bottom: "3%",
|
||
containLabel: true
|
||
},
|
||
xAxis: [{
|
||
type: "category",
|
||
boundaryGap: false,
|
||
data: time,
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: "#D2F1FF",
|
||
width: 1
|
||
}
|
||
},
|
||
splitLine: {
|
||
show: false
|
||
}
|
||
}],
|
||
yAxis: {
|
||
type: "value",
|
||
boundaryGap: [0, "30%"],
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: "#D2F1FF",
|
||
width: 1
|
||
}
|
||
},
|
||
splitLine: {
|
||
show: false,
|
||
lineStyle: {
|
||
type: "solid",
|
||
color: "rgba(255,255,255,0.1)"
|
||
}
|
||
}
|
||
},
|
||
series: [{
|
||
name: "行驶车辆数",
|
||
type: "line",
|
||
stack: "总量",
|
||
smooth: true,
|
||
lineStyle: {
|
||
width: 0
|
||
},
|
||
showSymbol: false,
|
||
areaStyle: {
|
||
opacity: .8,
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||
offset: 0,
|
||
color: "rgba(146,176,255, .8)"
|
||
}, {
|
||
offset: 1,
|
||
color: "rgba(146,176,255, 0.1)"
|
||
}])
|
||
},
|
||
emphasis: {
|
||
focus: "series"
|
||
},
|
||
data: driving_count
|
||
}, {
|
||
name: "停止车辆数",
|
||
type: "line",
|
||
stack: "总量",
|
||
smooth: true,
|
||
lineStyle: {
|
||
width: 0
|
||
},
|
||
showSymbol: false,
|
||
areaStyle: {
|
||
opacity: .8,
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||
offset: 0,
|
||
color: "rgba(240,166,232,.8)"
|
||
}, {
|
||
offset: 1,
|
||
color: "rgba(240,166,232,0.1)"
|
||
}])
|
||
},
|
||
emphasis: {
|
||
focus: "series"
|
||
},
|
||
data: stop_count
|
||
}]
|
||
};
|
||
this.myChart3.setOption(option);
|
||
}
|
||
if (this.myChart4) {
|
||
var chartData = this.echarts_data.park || {}
|
||
if (!chartData || !chartData.time || !chartData.out) {
|
||
return; // 数据不完整，跳过
|
||
}
|
||
option = {
|
||
tooltip: {
|
||
trigger: 'axis'
|
||
},
|
||
legend: {
|
||
data: ["驶出园区车辆"],
|
||
textStyle: {
|
||
fontSize: 12,
|
||
color: "#fff"
|
||
}
|
||
},
|
||
|
||
xAxis: {
|
||
type: 'category',
|
||
boundaryGap: false,
|
||
data: chartData.time || [],
|
||
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)"}
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
name: '驶出园区车辆',
|
||
type: 'line',
|
||
data: chartData.out || [],
|
||
markLine: {
|
||
data: [
|
||
{type: 'average', name: 'Avg'},
|
||
[
|
||
{
|
||
symbol: 'none',
|
||
x: '90%',
|
||
yAxis: 'max'
|
||
},
|
||
{
|
||
symbol: 'circle',
|
||
label: {
|
||
position: 'start',
|
||
formatter: 'Max'
|
||
},
|
||
type: 'max',
|
||
name: '最高点'
|
||
}
|
||
]
|
||
]
|
||
}
|
||
}
|
||
]
|
||
};
|
||
|
||
// 设置图表配置
|
||
this.myChart4.setOption(option);
|
||
}
|
||
if (this.myChart5) {
|
||
var chartData = this.echarts_data.road_count
|
||
if (!chartData || !Array.isArray(chartData)) {
|
||
chartData = [];
|
||
}
|
||
var name = []
|
||
var count = []
|
||
chartData.map((item,index)=>{
|
||
if (item && item.name) {
|
||
name.push(item.name.slice(0,4))
|
||
count.push(item.count || 0)
|
||
}
|
||
})
|
||
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: name,
|
||
axisTick: {
|
||
alignWithLabel: true
|
||
},
|
||
axisLabel: {
|
||
interval: 0,
|
||
rotate: 45,
|
||
textStyle: {
|
||
color: "#ffffff",
|
||
fontSize: 12
|
||
}
|
||
},
|
||
axisLine: {lineStyle: {color: "#D2F1FF", width: 1}},
|
||
|
||
}],
|
||
yAxis: {
|
||
type: "value",
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: "#D2F1FF",
|
||
width: 1
|
||
}
|
||
},
|
||
splitLine: {
|
||
show: false,
|
||
lineStyle: {
|
||
type: "solid",
|
||
color: "rgba(255,255,255,0.1)"
|
||
}
|
||
}
|
||
},
|
||
series: [{
|
||
name: "道路车辆情况",
|
||
type: "bar",
|
||
barWidth: "20%",
|
||
itemStyle: {
|
||
// color:'#3aa0ff'
|
||
normal: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0,
|
||
1, [{
|
||
offset: 0,
|
||
color: "#0082DC"
|
||
}, {
|
||
offset: 1,
|
||
color: "#00FFD8"
|
||
}])
|
||
}
|
||
},
|
||
data: count
|
||
}]
|
||
};
|
||
|
||
|
||
// 设置图表配置
|
||
this.myChart5.setOption(option);
|
||
}
|
||
if (this.myChart6) {
|
||
var chartData = this.echarts_data.stop_count || []
|
||
var chartData2 = this.echarts_data.driving_count || []
|
||
|
||
var time = [];
|
||
var stop_count = []
|
||
var driving_count = []
|
||
if (chartData && Array.isArray(chartData)) {
|
||
chartData.map((item,index)=>{
|
||
if (item) {
|
||
if (item.hour_time) time.push(item.hour_time)
|
||
stop_count.push(item.order_count || 0)
|
||
}
|
||
})
|
||
}
|
||
if (chartData2 && Array.isArray(chartData2)) {
|
||
chartData2.map((item,index)=>{
|
||
if (item) {
|
||
driving_count.push(item.order_count || 0)
|
||
}
|
||
})
|
||
}
|
||
var option = {
|
||
color: ["#92B0FF", "#F0A6E8"],
|
||
title: {
|
||
text: ""
|
||
},
|
||
tooltip: {
|
||
trigger: "axis",
|
||
axisPointer: {
|
||
type: "cross",
|
||
label: {
|
||
backgroundColor: "#6a7985"
|
||
}
|
||
}
|
||
},
|
||
legend: {
|
||
data: ["重载车辆", "空载车辆"],
|
||
textStyle: {
|
||
fontSize: 12,
|
||
color: "#fff"
|
||
}
|
||
},
|
||
grid: {
|
||
left: "3%",
|
||
right: "4%",
|
||
bottom: "3%",
|
||
containLabel: true
|
||
},
|
||
xAxis: [{
|
||
type: "category",
|
||
boundaryGap: false,
|
||
data: time,
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: "#D2F1FF",
|
||
width: 1
|
||
}
|
||
},
|
||
splitLine: {
|
||
show: false
|
||
}
|
||
}],
|
||
yAxis: {
|
||
type: "value",
|
||
boundaryGap: [0, "30%"],
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: "#D2F1FF",
|
||
width: 1
|
||
}
|
||
},
|
||
splitLine: {
|
||
show: false,
|
||
lineStyle: {
|
||
type: "solid",
|
||
color: "rgba(255,255,255,0.1)"
|
||
}
|
||
}
|
||
},
|
||
series: [{
|
||
name: "重载车辆",
|
||
type: "line",
|
||
stack: "总量",
|
||
smooth: true,
|
||
lineStyle: {
|
||
width: 0
|
||
},
|
||
showSymbol: false,
|
||
areaStyle: {
|
||
opacity: .8,
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||
offset: 0,
|
||
color: "rgba(146,176,255, .8)"
|
||
}, {
|
||
offset: 1,
|
||
color: "rgba(146,176,255, 0.1)"
|
||
}])
|
||
},
|
||
emphasis: {
|
||
focus: "series"
|
||
},
|
||
data: stop_count
|
||
}, {
|
||
name: "空载车辆",
|
||
type: "line",
|
||
stack: "总量",
|
||
smooth: true,
|
||
lineStyle: {
|
||
width: 0
|
||
},
|
||
showSymbol: false,
|
||
areaStyle: {
|
||
opacity: .8,
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||
offset: 0,
|
||
color: "rgba(240,166,232,.8)"
|
||
}, {
|
||
offset: 1,
|
||
color: "rgba(240,166,232,0.1)"
|
||
}])
|
||
},
|
||
emphasis: {
|
||
focus: "series"
|
||
},
|
||
data: driving_count
|
||
}]
|
||
};
|
||
// 设置图表配置
|
||
this.myChart6.setOption(option);
|
||
}
|
||
|
||
|
||
},
|
||
|
||
|
||
startTimer() {
|
||
this.timer = setInterval(() => {
|
||
this.currentTime = this.getCurrentDateTime();
|
||
}, 1000);
|
||
|
||
//触发整点请求数据
|
||
const currentMinutes = new Date().getMinutes();
|
||
const timeUntilNextHour = (60 - currentMinutes) * 60 * 1000;
|
||
this.timer2 = setTimeout(() => {
|
||
setInterval(this.getData(), 3600000);
|
||
}, timeUntilNextHour);
|
||
|
||
},
|
||
stopTimer() {
|
||
clearInterval(this.timer);
|
||
clearInterval(this.timer2);
|
||
},
|
||
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(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=1.4.15&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: 12.3,
|
||
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], //地图图层的数组
|
||
}),
|
||
stopcolor = '#ff0000',
|
||
livcolor = '#e89393',
|
||
lv1color = "#ff0000",
|
||
lv2color = "#a08e8e",
|
||
lv3color = '#d2db00',
|
||
lv4color = '#f29b76',
|
||
|
||
overlayGroups = {
|
||
fac: [],
|
||
car: [],
|
||
enter: {},
|
||
road: [],
|
||
truth: [],
|
||
},
|
||
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`;
|
||
|
||
map.on('zoomchange', () => {
|
||
if (map.getZoom() > 18) map.setZoom(18);
|
||
});
|
||
// 构造官方卫星图层
|
||
var satelliteLayer = new AMap.TileLayer.Satellite();
|
||
//批量添加图层
|
||
map.add([satelliteLayer]);
|
||
|
||
|
||
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(info, pixel) {
|
||
|
||
const res = `
|
||
<div class="custom-info-window zjinfo" >
|
||
<p> ${info.name}</p>
|
||
<p>停车位总数：${info.space}</p>
|
||
<p>停放车辆数量：${info.place_car}</p>
|
||
<p>剩余车位数量：${info.remainder_car}</p>
|
||
<p>当日入场车次：${info.in_car}</p>
|
||
<p>当日出场车次：${info.out_car}</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();
|
||
}, 5000)
|
||
}
|
||
|
||
// 区域数据
|
||
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]
|
||
}
|
||
return obj
|
||
})(),
|
||
...(sty || {})
|
||
})
|
||
|
||
map.add(poy)
|
||
poy.on('click', function (e) {
|
||
|
||
$.post('/api/Yq_perimeter/perimeter_detail',{name:e.target.getExtData().name}).then(r => {
|
||
openInfo(r.data, 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 => {
|
||
const pos = e.lnglat;
|
||
const carInfo = e.target.getExtData();
|
||
openCarInfo(carInfo, pos)
|
||
};
|
||
|
||
function openCarInfo(carInfo, pixel) {
|
||
|
||
var qr_color = ''
|
||
if (carInfo.qr_color == 1) {
|
||
qr_color = '绿牌车辆'
|
||
} else if (carInfo.qr_color == 2) {
|
||
qr_color = '黄牌车辆'
|
||
} else if (carInfo.qr_color == 3) {
|
||
qr_color = '红牌车辆'
|
||
} else {
|
||
qr_color = '未知'
|
||
}
|
||
|
||
var vehicle_type = ''
|
||
if (carInfo.vehicle_type == -1) {
|
||
vehicle_type = '区域外行驶'
|
||
} else if (carInfo.vehicle_type == 0) {
|
||
vehicle_type = '正常'
|
||
} else if (carInfo.vehicle_type == 1) {
|
||
vehicle_type = '超速'
|
||
} else if (carInfo.vehicle_type == 2) {
|
||
vehicle_type = '禁行'
|
||
} else if (carInfo.vehicle_type == 3) {
|
||
vehicle_type = '禁停'
|
||
} else if (carInfo.vehicle_type == 4) {
|
||
vehicle_type = '未上报'
|
||
} else if (carInfo.vehicle_type == 5) {
|
||
vehicle_type = '超最大数量'
|
||
}
|
||
const res = `
|
||
<div class="carinfo" >
|
||
<div v-show="carInfo.type==='pog'" class="i-tit"></div>
|
||
<div class="i-main">
|
||
<div class="im-item">车牌号：${carInfo.vehicleNo}</div>
|
||
<div class="im-item">速度：${carInfo.vec1}</div>
|
||
<div class="im-item">状态：` + vehicle_type + `</div>
|
||
<div class="im-item">车辆码：${qr_color}</div>
|
||
<div class="im-item">定位时间：${carInfo.positionTime}</div>
|
||
<div class="btn_map">
|
||
<button Onclick="bjlist('${carInfo.vehicleNo}')" style="display: block;width: 100%;">查看报警</button>
|
||
<button Onclick="cardetail('${carInfo.vehicleNo}')" style="width: 45%;">车辆信息</button>
|
||
<button Onclick="parklist('${carInfo.vehicleNo}')" style="width: 45%;float: right;">入园记录</button>
|
||
<button Onclick="waybill_list('${carInfo.vehicleNo}')" style="width: 45%;">运单记录</button>
|
||
<button Onclick="history('${carInfo.vehicleNo}')" style="width: 45%;float: right;">车辆轨迹</button>
|
||
</div>
|
||
</div>
|
||
</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();
|
||
}, 5000)
|
||
}
|
||
|
||
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 => {
|
||
if (!i.longitude || !i.latitude) {
|
||
return;
|
||
}
|
||
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('/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: '/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;
|
||
// 先显示所有车辆，确保车辆能显示出来
|
||
if (markers && markers.length > 0) {
|
||
markers.forEach(function(marker) {
|
||
marker.show();
|
||
});
|
||
}
|
||
// 延迟应用过滤，确保数据已完全加载
|
||
setTimeout(function() {
|
||
if (vm && vm.form && vm.form[1] && car_markers && car_markers.list && car_markers.list.length > 0) {
|
||
vm.form[1].change();
|
||
}
|
||
}, 100);
|
||
}
|
||
|
||
|
||
let car_markers = new CarMarkers();
|
||
let _this = this;
|
||
|
||
// 坐标转换配置：如果数据库存储的是WGS84坐标，设置为true；如果已经是GCJ02，设置为false
|
||
var NEED_COORDINATE_CONVERT = true; // 根据实际情况调整：true=需要转换，false=不需要转换
|
||
|
||
// WGS84转GCJ02坐标转换函数（与i_clm.html保持一致）
|
||
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 getlist() {
|
||
// 先从外部API获取车辆位置数据（与i_clm.html保持一致，确保位置一致）
|
||
$.ajax({
|
||
url: 'https://changshoupark.cyuncq.com/cs/posInfo',
|
||
type: 'POST',
|
||
contentType: 'application/json',
|
||
data: JSON.stringify({
|
||
"fenceList": ["CQQA_CQCS"]
|
||
}),
|
||
success: function (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);
|
||
|
||
// 处理地图展示数据（坐标转换，与i_clm.html保持一致）
|
||
var processedData = posResponse.data.map(function (item) {
|
||
if (item.posList && item.posList.length > 0) {
|
||
item.posList = item.posList.map(function (vehicle) {
|
||
// WGS84转GCJ02坐标转换（高德地图使用GCJ02）
|
||
var converted = wgs84ToGcj02(vehicle.lon, vehicle.lat);
|
||
vehicle.lon = converted.lon;
|
||
vehicle.lat = converted.lat;
|
||
return vehicle;
|
||
});
|
||
}
|
||
return item;
|
||
});
|
||
|
||
// 从数据库获取车辆状态信息，然后合并位置数据
|
||
$.ajax({
|
||
dataType: "json",
|
||
type: "post",
|
||
url: '/api/Yq_screen/screen_list',
|
||
data: {
|
||
action: 'Screen/screen_list'
|
||
},
|
||
success: function (res) {
|
||
if (res.code == 1) {
|
||
var dbVehicleList = res.data.vehicle_list || [];
|
||
_this.mingyu = res.data.mingyu;
|
||
|
||
// 创建数据库车辆信息映射表（以车牌号为key）
|
||
var dbVehicleMap = {};
|
||
dbVehicleList.forEach(function(vehicle) {
|
||
dbVehicleMap[vehicle.vehicleNo] = vehicle;
|
||
});
|
||
|
||
// 合并API位置数据和数据库状态数据
|
||
carlist = [];
|
||
processedData.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 vehNo = vehicle.vehNo;
|
||
var dbVehicle = dbVehicleMap[vehNo] || {};
|
||
|
||
// 使用API的坐标（已转换），数据库的状态信息
|
||
var mergedVehicle = {
|
||
id: dbVehicle.id || (vehicleIndex + index * 1000),
|
||
vehicleNo: vehNo,
|
||
longitude: parseFloat(vehicle.lon.toFixed(6)),
|
||
latitude: parseFloat(vehicle.lat.toFixed(6)),
|
||
vec1: dbVehicle.vec1 || vehicle.v1 || 0,
|
||
zai: dbVehicle.zai || 0,
|
||
vehicle_type: dbVehicle.vehicle_type,
|
||
positionTime: vehicle.posTime ? new Date(vehicle.posTime * 1000).toLocaleString() : '',
|
||
// 计算status：使用数据库的vec1和zai，如果没有则使用默认值
|
||
// status格式：01=行驶空载, 02=行驶重载, 11=停止空载, 12=停止重载
|
||
status: `${(dbVehicle.vec1 || vehicle.v1 || 0) == 0 ? ((dbVehicle.zai || 0) == 0 ? '01' : '02') : ((dbVehicle.zai || 0) == 0 ? 11 : 12)}`,
|
||
// 保留车辆码颜色信息
|
||
qr_color: dbVehicle.qr_color !== undefined ? dbVehicle.qr_color : null
|
||
};
|
||
|
||
// 保留数据库中的其他字段
|
||
if (dbVehicle.id) mergedVehicle.id = dbVehicle.id;
|
||
|
||
carlist.push(mergedVehicle);
|
||
});
|
||
}
|
||
});
|
||
|
||
car_markers.update(carlist);
|
||
}
|
||
},
|
||
error: function(err) {
|
||
console.warn('获取车辆状态信息失败:', err);
|
||
// 如果数据库获取失败，仍然使用API数据（但可能缺少状态信息）
|
||
renderVehiclePositionsFromAPI(processedData);
|
||
}
|
||
});
|
||
} else {
|
||
// 如果API获取失败，回退到数据库数据
|
||
getVehicleListFromDB();
|
||
}
|
||
},
|
||
error: function (xhr, status, error) {
|
||
console.warn('外部车辆数据请求失败:', error);
|
||
// 如果API获取失败，回退到数据库数据
|
||
getVehicleListFromDB();
|
||
}
|
||
});
|
||
}
|
||
|
||
// 从数据库获取车辆列表（备用方案）
|
||
function getVehicleListFromDB() {
|
||
$.ajax({
|
||
dataType: "json",
|
||
type: "post",
|
||
url: '/api/Yq_screen/screen_list',
|
||
data: {
|
||
action: 'Screen/screen_list'
|
||
},
|
||
success: function (res) {
|
||
if (res.code == 1) {
|
||
carlist = res.data.vehicle_list;
|
||
_this.mingyu = res.data.mingyu;
|
||
carlist && carlist.forEach(i => {
|
||
i.status = `${i.vec1 == 0 ? (i.zai == 0 ? '01' : '02') : (i.zai == 0 ? 11 : 12)}`;
|
||
|
||
// 坐标转换：如果数据库存储的是WGS84坐标，需要转换为GCJ02
|
||
if (NEED_COORDINATE_CONVERT && i.longitude && i.latitude) {
|
||
var converted = wgs84ToGcj02(parseFloat(i.longitude), parseFloat(i.latitude));
|
||
i.longitude = parseFloat(converted.lon.toFixed(6));
|
||
i.latitude = parseFloat(converted.lat.toFixed(6));
|
||
}
|
||
})
|
||
car_markers.update(carlist);
|
||
}
|
||
},
|
||
});
|
||
}
|
||
|
||
// 仅从API数据渲染（当数据库不可用时）
|
||
function renderVehiclePositionsFromAPI(processedData) {
|
||
carlist = [];
|
||
processedData.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;
|
||
}
|
||
|
||
carlist.push({
|
||
id: vehicleIndex + index * 1000,
|
||
vehicleNo: vehicle.vehNo,
|
||
longitude: parseFloat(vehicle.lon.toFixed(6)),
|
||
latitude: parseFloat(vehicle.lat.toFixed(6)),
|
||
vec1: vehicle.v1 || 0,
|
||
zai: 0,
|
||
status: `${(vehicle.v1 || 0) == 0 ? '01' : '11'}` // 默认状态
|
||
});
|
||
});
|
||
}
|
||
});
|
||
car_markers.update(carlist);
|
||
}
|
||
|
||
// 同步车辆数据到本地数据库（异步执行，设置超时避免阻塞）
|
||
// 同步时会根据企业周界规则自动校验并生成报警，并保存轨迹数据
|
||
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);
|
||
} else {
|
||
console.warn('车辆数据同步失败:', res.msg);
|
||
}
|
||
},
|
||
error: function (xhr, status, error) {
|
||
if (status === 'timeout') {
|
||
console.warn('车辆数据同步超时');
|
||
} else {
|
||
console.warn('车辆数据同步请求失败:', error);
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
getlist();
|
||
setInterval(function () {
|
||
getlist();
|
||
}, 20000)
|
||
|
||
function getcar_num(id, fn) {
|
||
$.ajax({
|
||
dataType: "json",
|
||
type: "post",
|
||
url: '/api/Yq_screen/enterprise_vehicle',
|
||
data: {
|
||
action: 'Screen/enterprise_vehicle',
|
||
id: id
|
||
},
|
||
success: function (res) {
|
||
if (res.code == 1) {
|
||
|
||
console.log(res.data.vehicle_info)
|
||
fn(res.data.vehicle_info);
|
||
} else {
|
||
}
|
||
|
||
},
|
||
});
|
||
//return 333
|
||
}
|
||
|
||
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.polyline(r.data[0])
|
||
this.dataHandle(r.data)
|
||
})
|
||
// 106.941496,29.924628;106.976515,29.889809;106.920897,29.900821;106.941496,29.924628
|
||
// 107.01527,29.895601;106.997876,29.89281;106.991391,29.887939;106.985853,29.880405;106.981835,29.871026;106.960543,29.849142;106.950737,29.83564;106.945862,29.824089;106.943563,29.814148;106.945054,29.799754;106.942764,29.783607;106.970332,29.766519;106.983273,29.751322;107.017612,29.737776;107.050425,29.734115;107.064458,29.737683;107.064744,29.739318;107.058942,29.748447;107.055205,29.762378;107.071581,29.77504;107.086248,29.789923;107.088111,29.796775;107.084106,29.807387;107.080959,29.81142;107.068298,29.813474;107.06422,29.813406;107.060435,29.82112;107.050628,29.827207;107.04726,29.828623;107.046543,29.829966;107.04701,29.830878;107.04712,29.834263;107.044827,29.838826;107.053757,29.842875;107.056479,29.849047;107.057124,29.85153;107.056802,29.853468;107.060415,29.86047;107.061665,29.864841;107.054919,29.881592;107.052508,29.894119;107.040451,29.898403;107.028579,29.89536;107.014946,29.895825;106.997804,29.89278
|
||
}
|
||
|
||
function bjlist(id) {
|
||
window.open('/index/datav/bjlist?id=' + id)
|
||
};
|
||
|
||
function cardetail(id) { //车辆详情
|
||
window.open('/index/datav/car_detail?id=' + id)
|
||
};
|
||
|
||
function parklist(id) { //入园记录
|
||
window.open('/index/datav/park_list?id=' + id)
|
||
};
|
||
|
||
function waybill_list(id) { //运单记录
|
||
window.open('/index/datav/waybill_list?id=' + id)
|
||
};
|
||
|
||
function history(id) { //车辆轨迹
|
||
window.open('/index/datav/vehicle_history?id=' + id)
|
||
};
|
||
|
||
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>
|