1420 lines
60 KiB
HTML
1420 lines
60 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||
<title>高速公路智慧可视化大屏</title>
|
||
<link rel="stylesheet" href="../static/css/index.css">
|
||
<link rel="stylesheet" href="../static/css/reset.css">
|
||
<script src="../static/js/vue.js"></script>
|
||
</head>
|
||
<body>
|
||
|
||
<div id="particles-js" class="main">
|
||
<div class="main_con">
|
||
<div class="main_top">
|
||
<div class="main_top_left">
|
||
<div class="main_top_left_top">
|
||
<img src="../static/images/main_top_left.png"/>
|
||
<div class="main_top_left_top_title">拥堵延时排名TOP1</div>
|
||
<div class="main_top_left_top_con">
|
||
<div class="main_top_left_top_con_list">
|
||
<span> << top1.label >> </span>
|
||
<p>城市</p>
|
||
</div>
|
||
<div class="main_top_left_top_con_list">
|
||
<span> << top1.idx >> </span>
|
||
<p>拥堵指数</p>
|
||
</div>
|
||
<div class="main_top_left_top_con_list">
|
||
<span> << isStaus(top1.idxRatioState) >> </span>
|
||
<p>趋势</p>
|
||
</div>
|
||
<div class="main_top_left_top_con_left">
|
||
<div class="main_top_left_t_c_l_left">
|
||
<span class="main_top_left_c_l_n "> << top1.idxRatio >> </span>
|
||
<p>周环比数</p>
|
||
</div>
|
||
<div class="main_top_left_t_c_l_right">
|
||
<span class=" main_top_left_c_l_n"> << top1.realSpeed >> </span>
|
||
<p>平均速度</p>
|
||
</div>
|
||
</div>
|
||
<div class="main_top_left_top_con_right main_top_left_top_con_right2">
|
||
<div class="main_top_left_t_c_r_left">
|
||
<span class="main_top_left_c_l_n"> << top1.freeFlowSpeed >> </span>
|
||
<p>畅通速度</p>
|
||
</div>
|
||
<div class="main_top_left_t_c_r_right">
|
||
<span class="main_top_left_c_l_n"> << top1.idx >> </span>
|
||
<p>延时指数</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="main_top_left_top main_top_left_bottom">
|
||
<img src="../static/images/main_top_left.png"/>
|
||
<div class="main_top_left_top_title">高速驾驶行为风险指数</div>
|
||
<div id="baseId" class="main_top_left_top_con"></div>
|
||
</div>
|
||
</div>
|
||
<div class="main_top_middle">
|
||
<div class="main_top_middle_top_title">
|
||
<img class="title_bg" src="../static/images/title_bg.png">
|
||
智慧交通大数据可视化监管平台
|
||
</div>
|
||
<div class="main_top_middle_num_title">平台数据总体量</div>
|
||
<div class="main_top_middle_num">
|
||
|
||
<div v-for="item in resultList" class="main_top_middle_num_list">
|
||
<img src="../static/images/center_num.png">
|
||
<p class="main_top_middle_num_list5"> << item >> </p>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="main_top_middle_bottom">
|
||
<div class="main_top_middle_bottom_echarts">
|
||
<img src="../static/images/main_top_bottom.png">
|
||
<div class="main_top_echarts_con">
|
||
<div class="main_top_echarts_con_title" id="cityTime">交通健康指数时间段分析</div>
|
||
<div id="threeTasksId" class="main_top_echarts_pie"></div>
|
||
</div>
|
||
</div>
|
||
<div class="main_top_middle_bottom_echarts main_top_middle_bottom_echarts_right">
|
||
<img src="../static/images/main_top_bottom.png">
|
||
<div class="main_top_echarts_con">
|
||
<div class="main_top_echarts_con_title">道路情况信息</div>
|
||
<div id="publicityId" class="main_top_echarts_pie"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="main_top_left main_top_right">
|
||
<div class="main_top_left_top">
|
||
<img src="../static/images/main_top_left.png"/>
|
||
<div class="main_top_left_top_title">快捷跳转</div>
|
||
<div class="main_top_left_top_con">
|
||
|
||
<div class="main_top_left_top_con_left">
|
||
<a href="/auth-login">
|
||
<span></span>
|
||
<p>后台管理</p>
|
||
</a>
|
||
</div>
|
||
<div class="main_top_left_top_con_right">
|
||
<a href="/">
|
||
<span></span>
|
||
<p>可视化驾驶舱</p>
|
||
</a>
|
||
</div>
|
||
<div class="main_top_left_top_con_list">
|
||
<span class="monthData">0</span>
|
||
<p>平均速度</p>
|
||
</div>
|
||
<div class="main_top_left_top_con_list">
|
||
<span class="someThing">0</span>
|
||
<p>畅通速度</p>
|
||
</div>
|
||
<div class="main_top_left_top_con_list">
|
||
<span class="policyData">0</span>
|
||
<p>天气</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="main_top_left_top main_top_left_bottom">
|
||
<img src="../static/images/main_top_left.png"/>
|
||
<div class="main_top_left_top_title">城市健康数量分类占比</div>
|
||
<div id="questionId" class="main_top_left_top_con">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="main_bottom">
|
||
<div class="main_bottom_top">
|
||
<div class="main_bottom_top_list">
|
||
<img src="../static/images/main_bottopm_top1.png">
|
||
<div class="main_bottom_t_l_title">拥堵延时排名</div>
|
||
<div class="main_bottom_t_l_con">
|
||
<div class="main_bottom_t_l_main">
|
||
<ul id="cityUl"></ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="main_bottom_top_list">
|
||
<img src="../static/images/main_bottopm_top2.png">
|
||
<div class="main_bottom_t_l_title">全国高速安全隐患路段超速占比</div>
|
||
<div id="departmentId" class="main_bottom_t_l_chart"></div>
|
||
</div>
|
||
<div class="main_bottom_top_list">
|
||
<img src="../static/images/main_bottopm_top1.png">
|
||
<div class="main_bottom_t_l_title">交通健康排名</div>
|
||
<div class="main_bottom_t_l_con">
|
||
<div class="main_bottom_t_l_main2">
|
||
<ul id="headthCity">
|
||
<li>
|
||
<div class="main_bottom_t_l_main_list">
|
||
<div class="main_bottom_t_list_title main_bottom_polity_title1"></div>
|
||
<div class="main_bottom_t_list_time main_bottom_polity_time1"></div>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="main_bottom_bottom">
|
||
<div class="main_bottom_b_left">
|
||
<img src="../static/images/main_bottom_bottom.png">
|
||
<div class="main_bottom_b_title">交通指数分析</div>
|
||
<div id="coverageId" class="main_bottom_b_con"></div>
|
||
</div>
|
||
<div class="main_bottom_b_middle1">
|
||
<img src="../static/images/main_bootm_middle.png">
|
||
<div class="main_bottom_b_title">拥堵城市参数排名</div>
|
||
<div id="contentId" class="main_bottom_b_con main_bottom_b_con2"></div>
|
||
</div>
|
||
<div class="main_bottom_b_middle2">
|
||
<img src="../static/images/main_bootm_middle.png">
|
||
<div class="main_bottom_b_title">交通健康城市排名</div>
|
||
<div id="publicNumId" class="main_bottom_b_con main_bottom_b_con2"></div>
|
||
</div>
|
||
<div class="main_bottom_b_right">
|
||
<img src="../static/images/main_bottom_bottom.png">
|
||
<div class="main_bottom_b_title" id="roadData">道路情况信息</div>
|
||
<div id="yearsNumId" class="main_bottom_b_con"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html>
|
||
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
|
||
<script src="https://www.jq22.com/jquery/echarts-4.2.1.min.js"></script>
|
||
<script type="text/javascript" src="../static/js/dataScoll.js"></script>
|
||
<script type="text/javascript" src="../static/js/digitalScroll.js"></script>
|
||
<script type="text/javascript" src="../static/js/jcarousellite.js"></script>
|
||
<script type="text/javascript" src="../static/js/particles.min.js"></script>
|
||
<script type="text/javascript" src="../static/js/app.js"></script>
|
||
<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.min.js"></script>
|
||
<script>
|
||
axios.get("/api/CongestionCityOrderList").then(res => {
|
||
var newItemHTML = ""
|
||
for (let i = 0; i < res.data.length; i++) {
|
||
// 将原始日期字符串转换为Date对象
|
||
var date = new Date(res.data[i].create_time);
|
||
// 获取年、月、日
|
||
var year = date.getFullYear();
|
||
var month = ('0' + (date.getMonth() + 1)).slice(-2); // 月份从0开始，因此要加1
|
||
var day = ('0' + date.getDate()).slice(-2);
|
||
// 拼接成 "yyyy-mm-dd" 格式的字符串
|
||
var formattedDate = year + '-' + month + '-' + day;
|
||
let text = ` <li>
|
||
<div class="main_bottom_t_l_main_list">
|
||
<div class="main_bottom_t_list_title main_bottom_t_list_title1"> ${res.data[i].label}
|
||
<span>${'| 畅通速度：' + res.data[i].freeFlowSpeed + 'km/h'}<span>
|
||
<span>${'| 平均速度：' + res.data[i].realSpeed + 'km/h'}<span>
|
||
</div>
|
||
<div class="main_bottom_t_list_time main_bottom_t_list_time1">${formattedDate}</div>
|
||
</div>
|
||
</li>`
|
||
newItemHTML += text;
|
||
}
|
||
var ul = document.getElementById('cityUl');
|
||
// 在ul的末尾追加新的列表项
|
||
ul.insertAdjacentHTML('beforeend', newItemHTML);
|
||
|
||
})
|
||
axios.get("/api/rankList").then(res => {
|
||
var newItemHTML = ""
|
||
for (let i = 0; i < res.data.length; i++) {
|
||
// 将原始日期字符串转换为Date对象
|
||
var date = new Date(res.data[i].create_time);
|
||
// 获取年、月、日
|
||
var year = date.getFullYear();
|
||
var month = ('0' + (date.getMonth() + 1)).slice(-2); // 月份从0开始，因此要加1
|
||
var day = ('0' + date.getDate()).slice(-2);
|
||
// 拼接成 "yyyy-mm-dd" 格式的字符串
|
||
var formattedDate = year + '-' + month + '-' + day;
|
||
let text = ` <li>
|
||
<div class="main_bottom_t_l_main_list">
|
||
<div class="main_bottom_t_list_title main_bottom_t_list_title1"> ${res.data[i].cityName}
|
||
<span>${'| 畅通速度：' + res.data[i].freeFlowSpeed + 'km/h'}<span>
|
||
<span>${'| 平均速度：' + res.data[i].realSpeed + 'km/h'}<span>
|
||
</div>
|
||
<div class="main_bottom_t_list_time main_bottom_t_list_time1">${formattedDate}</div>
|
||
</div>
|
||
</li>`
|
||
newItemHTML += text;
|
||
}
|
||
var ul = document.getElementById('headthCity');
|
||
// 在ul的末尾追加新的列表项
|
||
ul.insertAdjacentHTML('beforeend', newItemHTML);
|
||
|
||
})
|
||
|
||
|
||
$(function () {
|
||
function apiFn() {
|
||
this.hostname = ""
|
||
}
|
||
|
||
apiFn.prototype = {
|
||
Init: function () {
|
||
this.findCount()
|
||
this.otherDataFn()
|
||
this.baseInfo()
|
||
this.questionFn()
|
||
this.publicityFn()
|
||
this.threeTasksFn()
|
||
this.departmentFn()
|
||
this.guideFn()
|
||
this.policyFn()
|
||
this.coverageFn()
|
||
this.yearsNumFn()
|
||
this.contentFn()
|
||
this.publicNumFn()
|
||
setInterval(function () {
|
||
numInit()
|
||
}, 6000)
|
||
},
|
||
findCount: function () {
|
||
|
||
},
|
||
// 其他数据展示
|
||
otherDataFn: function () {
|
||
$(".daysData").addClass("counter-value").text("304")
|
||
$(".weekData").addClass("counter-value").text("2044")
|
||
$(".monthData").addClass("counter-value").text("909")
|
||
$(".someThing").addClass("counter-value").text("980")
|
||
$(".policyData").addClass("counter-value").text("200")
|
||
},
|
||
// 基础信息
|
||
baseInfo: function () {
|
||
axios.get('/api/jiashiData').then(res => {
|
||
|
||
var baseChart = echarts.init(document.getElementById('baseId'));
|
||
var charts = []
|
||
for (let i = 0; i < 5; i++) {
|
||
charts.push({name: res.data[i].addressDesc, num: res.data[i].turnIndex})
|
||
}
|
||
|
||
var color = ['rgba(100,255,249', 'rgba(100,255,249', 'rgba(100,255,249', 'rgba(100,255,249', 'rgba(100,255,249']
|
||
let lineY = []
|
||
for (var i = 0; i < charts.length; i++) {
|
||
var x = i
|
||
if (x > color.length - 1) {
|
||
x = color.length - 1
|
||
}
|
||
var data = {
|
||
name: charts[i].name,
|
||
color: color[x] + ')',
|
||
value: charts[i].num,
|
||
itemStyle: {
|
||
normal: {
|
||
show: true,
|
||
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
|
||
offset: 0,
|
||
color: color[x] + ', 0.3)'
|
||
}, {
|
||
offset: 1,
|
||
color: color[x] + ', 1)'
|
||
}], false),
|
||
barBorderRadius: 10
|
||
},
|
||
emphasis: {
|
||
shadowBlur: 15,
|
||
shadowColor: 'rgba(0, 0, 0, 0.1)'
|
||
}
|
||
}
|
||
}
|
||
lineY.push(data)
|
||
}
|
||
var option = {
|
||
title: {
|
||
show: false
|
||
},
|
||
grid: {
|
||
// borderWidth: 1,
|
||
top: '10%',
|
||
left: '30%',
|
||
right: '20%',
|
||
bottom: '3%'
|
||
},
|
||
color: color,
|
||
yAxis: [{
|
||
type: 'category',
|
||
inverse: true,
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLine: {
|
||
show: false
|
||
},
|
||
axisLabel: {
|
||
show: false,
|
||
inside: false
|
||
},
|
||
data: charts.name
|
||
}, {
|
||
type: 'category',
|
||
inverse: true,
|
||
axisLine: {
|
||
show: false
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLabel: {
|
||
show: true,
|
||
inside: false,
|
||
textStyle: {
|
||
color: '#38E1E1',
|
||
fontSize: '8',
|
||
},
|
||
formatter: function (val, index) {
|
||
return `${charts[index].num}`
|
||
}
|
||
},
|
||
splitArea: {
|
||
show: false
|
||
},
|
||
splitLine: {
|
||
show: false
|
||
},
|
||
data: charts
|
||
}],
|
||
xAxis: {
|
||
// type: 'value',
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLine: {
|
||
show: false
|
||
},
|
||
splitLine: {
|
||
show: false
|
||
},
|
||
axisLabel: {
|
||
show: false
|
||
}
|
||
},
|
||
series: [{
|
||
name: '',
|
||
type: 'bar',
|
||
zlevel: 2,
|
||
barWidth: '5px',
|
||
data: lineY,
|
||
animationDuration: 1500,
|
||
label: {
|
||
normal: {
|
||
color: 'white',
|
||
show: true,
|
||
position: [-65, -2],
|
||
textStyle: {
|
||
fontSize: 8
|
||
},
|
||
formatter: function (a, b) {
|
||
return a.name
|
||
}
|
||
}
|
||
}
|
||
}],
|
||
animationEasing: 'cubicOut'
|
||
}
|
||
baseChart.setOption(option)
|
||
setInterval(function () {
|
||
baseChart.clear()
|
||
baseChart.setOption(option)
|
||
}, 40000)
|
||
|
||
})
|
||
|
||
|
||
},
|
||
// 反馈问题类型占比
|
||
questionFn: function () {
|
||
|
||
axios.get("/api/rankListViewPie").then(res => {
|
||
var numArr = [
|
||
{name: '健康', value: res.data[0].value},
|
||
{name: '亚健康', value: res.data[1].value},
|
||
]
|
||
|
||
var datas = numArr
|
||
var questionChart = echarts.init(document.getElementById('questionId'));
|
||
var option = {
|
||
title: {
|
||
left: 'center'
|
||
},
|
||
tooltip: {
|
||
trigger: 'item',
|
||
formatter: '{a} <br/>{b} : {c} ({d}%)'
|
||
},
|
||
color: ['#2E8CFF', '#FD9133', '#37D2D4', '#19CA88', '#858FF8'],
|
||
legend: {
|
||
itemWidth: 11,// 标志图形的长度
|
||
itemHeight: 11,// 标志图形的宽度
|
||
orient: 'vertical',
|
||
// left: 'right',
|
||
top: '15%',
|
||
x: '50%',
|
||
data: datas,
|
||
textStyle: { //图例文字的样式
|
||
color: '#fff',
|
||
fontSize: 8
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
name: '数量',
|
||
type: 'pie',
|
||
radius: '75%',
|
||
center: ['20%', '50%'],
|
||
animationDuration: 2500,
|
||
data: datas,
|
||
label: {
|
||
normal: {
|
||
position: 'inner',
|
||
show: false
|
||
}
|
||
}
|
||
}
|
||
]
|
||
};
|
||
questionChart.setOption(option)
|
||
setInterval(function () {
|
||
questionChart.clear()
|
||
questionChart.setOption(option)
|
||
}, 8000)
|
||
})
|
||
|
||
|
||
},
|
||
// 党务公开
|
||
publicityFn: function () {
|
||
axios.get("/api/cityListViewPie").then(res => {
|
||
var dataArr = res.data
|
||
var publicitChart = echarts.init(document.getElementById('publicityId'));
|
||
var data = dataArr
|
||
var option = {
|
||
color: ['#38EB70', '#F7E16C', '#0EFCFF', '#FD9133', '#4D92F2'],
|
||
tooltip: {
|
||
trigger: 'item',
|
||
formatter: '{a} <br/>{b} : {c} ({d}%)'
|
||
},
|
||
legend: {
|
||
itemWidth: 12,// 标志图形的长度
|
||
itemHeight: 12,// 标志图形的宽度
|
||
orient: 'vertical',
|
||
// left: 'right',
|
||
top: '5%',
|
||
bottom: '50%',
|
||
x: '45%',
|
||
textStyle: {
|
||
color: '#fff',
|
||
fontSize: 8,
|
||
|
||
},
|
||
data: data,
|
||
},
|
||
series: [
|
||
// 主要展示层的
|
||
{
|
||
radius: ['70%', '90%'],
|
||
center: ['25%', '50%'],
|
||
type: 'pie',
|
||
label: {
|
||
normal: {
|
||
position: 'inner',
|
||
show: false
|
||
}
|
||
},
|
||
name: "km/h",
|
||
data: data,
|
||
},
|
||
// 边框的设置
|
||
{
|
||
radius: ['50%', '55%'],
|
||
center: ['25%', '50%'],
|
||
type: 'pie',
|
||
label: {
|
||
normal: {
|
||
show: false
|
||
},
|
||
emphasis: {
|
||
show: false
|
||
}
|
||
},
|
||
labelLine: {
|
||
normal: {
|
||
show: false
|
||
},
|
||
emphasis: {
|
||
show: false
|
||
}
|
||
},
|
||
animation: false,
|
||
tooltip: {
|
||
show: false
|
||
},
|
||
data: [{
|
||
value: 1,
|
||
itemStyle: {
|
||
color: "rgba(250,250,250,0.3)",
|
||
},
|
||
}],
|
||
}
|
||
]
|
||
};
|
||
publicitChart.setOption(option)
|
||
setInterval(function () {
|
||
publicitChart.clear()
|
||
publicitChart.setOption(option)
|
||
}, 6000)
|
||
})
|
||
|
||
|
||
},
|
||
// 交通健康指数时间段分析
|
||
threeTasksFn: function () {
|
||
axios.get("/api/getTimeHeath").then(res => {
|
||
|
||
// 获取具有特定 ID 的元素
|
||
var element = document.getElementById("cityTime");
|
||
// 修改元素的内容
|
||
element.innerHTML = res.data[0].name + "新的交通健康指数时间段分析";
|
||
var name = []
|
||
var idx1 = []
|
||
for (var i = 0; i < res.data.length; i++) {
|
||
name.push(res.data[i].time)
|
||
idx1.push(res.data[i].res)
|
||
}
|
||
var publicNumChart = echarts.init(document.getElementById('threeTasksId'));
|
||
var option = {
|
||
tooltip: {
|
||
trigger: 'axis'
|
||
},
|
||
legend: {
|
||
x: '35%',
|
||
y: '0%',
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontSize: 8
|
||
},
|
||
itemWidth: 10,
|
||
itemHeight: 10,
|
||
},
|
||
calculable: true,
|
||
xAxis: [
|
||
{
|
||
type: 'category',
|
||
data: name,
|
||
axisLabel: {
|
||
interval: 0,
|
||
textStyle: {
|
||
fontSize: 8,
|
||
color: 'rgba(255,255,255,.7)',
|
||
}
|
||
},
|
||
"axisTick": { //y轴刻度线
|
||
"show": false
|
||
},
|
||
"axisLine": { //y轴
|
||
"show": false,
|
||
},
|
||
}
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: 'value',
|
||
scale: true,
|
||
name: '单位：%',
|
||
nameTextStyle: {
|
||
color: 'rgba(255,255,255,.7)',
|
||
fontSize: 8
|
||
},
|
||
boundaryGap: [0.2, 0.2],
|
||
"axisTick": { //y轴刻度线
|
||
"show": false
|
||
},
|
||
"axisLine": { //y轴
|
||
"show": false,
|
||
},
|
||
axisLabel: {
|
||
textStyle: {
|
||
color: 'rgba(255,255,255,.8)',
|
||
fontSize: 8
|
||
// opacity: 0.1,
|
||
}
|
||
},
|
||
splitLine: { //决定是否显示坐标中网格
|
||
show: true,
|
||
lineStyle: {
|
||
color: ['#fff'],
|
||
opacity: 0.2
|
||
}
|
||
},
|
||
},
|
||
{
|
||
type: 'value',
|
||
scale: true,
|
||
show: false,
|
||
// name: "销量额(万元)",
|
||
nameTextStyle: {
|
||
color: 'rgba(255,255,255,.2)',
|
||
},
|
||
boundaryGap: [0.2, 0.2],
|
||
"axisTick": { //y轴刻度线
|
||
"show": false
|
||
},
|
||
"axisLine": { //y轴
|
||
"show": false,
|
||
},
|
||
axisLabel: {
|
||
textStyle: {
|
||
color: 'rgba(255,255,255,.2)',
|
||
// opacity: 0.1,
|
||
}
|
||
},
|
||
splitLine: { //决定是否显示坐标中网格
|
||
show: true,
|
||
lineStyle: {
|
||
color: ['#fff'],
|
||
opacity: 0.2
|
||
}
|
||
},
|
||
|
||
}
|
||
],
|
||
color: ['#2E8CFF', '#38EB70'],
|
||
grid: {
|
||
left: '5%',
|
||
right: '1%',
|
||
top: '25%',
|
||
bottom: '15%'
|
||
},
|
||
series: [
|
||
{
|
||
animationDuration: 2500,
|
||
barWidth: '20%',
|
||
name: '高峰期延时指数',
|
||
type: 'line',
|
||
data: idx1,
|
||
}
|
||
],
|
||
animationEasing: 'cubicOut'
|
||
};
|
||
publicNumChart.setOption(option)
|
||
setInterval(function () {
|
||
publicNumChart.clear()
|
||
publicNumChart.setOption(option)
|
||
}, 6000)
|
||
})
|
||
},
|
||
|
||
// 各部门苏木镇嘎查村公开占比
|
||
departmentFn: function () {
|
||
|
||
var dataArr = []
|
||
axios.get("/api/jiashiData").then(res => {
|
||
for (let i = 0; i < 10; i++) {
|
||
dataArr.push({name: res.data[i].linkNameChn, value: res.data[i].ndbkvIndex})
|
||
}
|
||
|
||
// 中间滚动数据展示
|
||
for (var j = 0; j < dataArr.length; j++) {
|
||
$(".main_list_title_num" + (j + 1)).addClass("counter-value").text(dataArr[j].value)
|
||
$(".main_list_title" + (j + 1)).text(dataArr[j].name)
|
||
}
|
||
var departmentChart = echarts.init(document.getElementById('departmentId'));
|
||
var data = dataArr
|
||
var option = {
|
||
color: ['#FD9133', '#47F6A2', '#37D2D4', '#3493FF'],
|
||
tooltip: {
|
||
trigger: 'item',
|
||
formatter: "{a} <br/>{b} : {c} ({d}%)"
|
||
},
|
||
legend: {
|
||
itemWidth: 15,// 标志图形的长度
|
||
itemHeight: 15,// 标志图形的宽度
|
||
orient: 'vertical',
|
||
// left: 'right',
|
||
top: '30%',
|
||
bottom: '50%',
|
||
x: '5%',
|
||
textStyle: {
|
||
color: '#fff',
|
||
fontSize: 8,
|
||
|
||
},
|
||
data: data,
|
||
},
|
||
series: [
|
||
{
|
||
name: '道路状况占比分析',
|
||
type: 'pie',
|
||
radius: ['50%', '70%'],
|
||
center: ['78%', '52%'],
|
||
labelLine: {
|
||
normal: {
|
||
length: 12,
|
||
lineStyle: {
|
||
type: 'solid',
|
||
color: '#0EFCFF'
|
||
}
|
||
}
|
||
|
||
},
|
||
label: {
|
||
normal: {
|
||
formatter: (params) => {
|
||
return params.name
|
||
},
|
||
borderWidth: 0,
|
||
borderRadius: 4,
|
||
padding: [0, 0],
|
||
height: 20,
|
||
fontSize: 8,
|
||
align: 'center',
|
||
color: '#0EFCFF',
|
||
}
|
||
},
|
||
data: data
|
||
},
|
||
{
|
||
color: '#0EFCFF',
|
||
type: 'pie',
|
||
radius: ['55', '56'],
|
||
center: ['78%', '52%'],
|
||
data: [100],
|
||
label: {
|
||
show: false
|
||
}
|
||
},
|
||
{
|
||
type: 'pie',
|
||
radius: ['25', '26'],
|
||
center: ['78%', '52%'],
|
||
data: [100],
|
||
label: {
|
||
show: false
|
||
}
|
||
}
|
||
]
|
||
};
|
||
departmentChart.setOption(option)
|
||
setInterval(function () {
|
||
departmentChart.clear()
|
||
departmentChart.setOption(option)
|
||
}, 12000)
|
||
})
|
||
|
||
|
||
},
|
||
// 办事指南
|
||
guideFn: function () {
|
||
$(".main_bottom_t_l_main").jCarouselLite({
|
||
vertical: true,
|
||
hoverPause: true,
|
||
visible: 4,
|
||
auto: 1000,
|
||
speed: 500
|
||
});
|
||
},
|
||
// 政策解读
|
||
policyFn: function () {
|
||
$(".main_bottom_t_l_main2").jCarouselLite({
|
||
vertical: true,
|
||
hoverPause: true,
|
||
visible: 4,
|
||
auto: 1000,
|
||
speed: 500
|
||
});
|
||
},
|
||
// 交通指数分析
|
||
coverageFn: function () {
|
||
|
||
axios.get("/api/headthView").then(res => {
|
||
let indicatorList = []
|
||
let indicatorvalue1 = []
|
||
let indicatorvalue2 = []
|
||
for (let i = 0; i < res.data.length; i++) {
|
||
indicatorList.push({name: res.data[i].name, max: res.data[i].value + res.data[i].value * 0.3})
|
||
indicatorvalue1.push(res.data[i].value)
|
||
}
|
||
|
||
var coverageChart = echarts.init(document.getElementById('coverageId'));
|
||
var option = {
|
||
radar: {
|
||
indicator: indicatorList,
|
||
name: {
|
||
textStyle: {
|
||
fontSize: 8, // 设置雷达图标题的字体大小
|
||
|
||
}
|
||
},
|
||
axisLabel: {
|
||
textStyle: {
|
||
fontSize: 8 // 设置雷达图坐标轴标签的字体大小
|
||
}
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
name: 'Budget vs spending',
|
||
type: 'radar',
|
||
data: [
|
||
{
|
||
value: indicatorvalue1,
|
||
name: 'Allocated Budget',
|
||
|
||
}
|
||
]
|
||
}
|
||
]
|
||
};
|
||
|
||
coverageChart.setOption(option)
|
||
setInterval(function () {
|
||
coverageChart.clear()
|
||
coverageChart.setOption(option)
|
||
}, 10000)
|
||
})
|
||
|
||
|
||
},
|
||
// 本年公开数量
|
||
yearsNumFn: function () {
|
||
axios.get("/api/getRoadHeath").then(res => {
|
||
var resArr = res.data
|
||
var nameArr = []
|
||
var caiArr = []
|
||
var cunArr = []
|
||
var danArr = []
|
||
var junArr = []
|
||
var zhenArr = []
|
||
for (var i = 0; i < resArr.length; i++) {
|
||
nameArr.push(resArr[i].road_name)
|
||
caiArr.push(resArr[i].speed) //速度
|
||
cunArr.push(resArr[i].travelTime) //延迟时间
|
||
danArr.push(resArr[i].delayTime) //旅行时间
|
||
junArr.push(resArr[i].index) //拥堵延时指数
|
||
|
||
}
|
||
var yearsNumChart = echarts.init(document.getElementById('yearsNumId'));
|
||
var spNum = 5, _max = 100;
|
||
var y_data = nameArr.reverse();
|
||
_data1 = caiArr.reverse(),
|
||
_data2 = cunArr.reverse(),
|
||
_data3 = danArr.reverse();
|
||
_data4 = junArr.reverse();
|
||
var fomatter_fn = function (v) {
|
||
return (v.value / _max * 100).toFixed(0)
|
||
}
|
||
var _label = {
|
||
normal: {
|
||
show: true,
|
||
position: 'inside',
|
||
formatter: fomatter_fn,
|
||
textStyle: {
|
||
color: '#fff',
|
||
fontSize: 8
|
||
}
|
||
}
|
||
};
|
||
var option = {
|
||
grid: {
|
||
containLabel: true,
|
||
left: 0,
|
||
top: 0,
|
||
right: 0,
|
||
bottom: 0
|
||
},
|
||
tooltip: {
|
||
show: true,
|
||
backgroundColor: '#fff',
|
||
borderColor: '#ddd',
|
||
borderWidth: 1,
|
||
textStyle: {
|
||
color: '#3c3c3c',
|
||
fontSize: 16
|
||
},
|
||
extraCssText: 'box-shadow: 0 0 5px rgba(0, 0, 0, 0.1)'
|
||
},
|
||
xAxis: {
|
||
splitNumber: spNum,
|
||
interval: _max / spNum,
|
||
max: _max,
|
||
axisLabel: {
|
||
show: false,
|
||
formatter: function (v) {
|
||
var _v = (v / _max * 100).toFixed(0);
|
||
return _v == 0 ? _v : _v + '%';
|
||
}
|
||
},
|
||
axisLine: {
|
||
show: false
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
splitLine: {
|
||
show: false
|
||
}
|
||
|
||
},
|
||
yAxis: [{
|
||
data: y_data,
|
||
axisLabel: {
|
||
fontSize: 8,
|
||
color: 'rgba(255,255,255,.7)'
|
||
|
||
},
|
||
axisLine: {
|
||
show: false
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
splitLine: {
|
||
show: false
|
||
}
|
||
}, {
|
||
show: false,
|
||
data: y_data,
|
||
axisLine: {
|
||
show: false
|
||
}
|
||
}],
|
||
series: [
|
||
{
|
||
type: 'bar',
|
||
name: '速度',
|
||
stack: '2',
|
||
label: _label,
|
||
legendHoverLink: false,
|
||
barWidth: 7,
|
||
itemStyle: {
|
||
normal: {
|
||
color: '#FD9133'
|
||
},
|
||
emphasis: {
|
||
color: '#FD9133'
|
||
}
|
||
},
|
||
data: _data1
|
||
},
|
||
{
|
||
type: 'bar',
|
||
name: '延迟时间',
|
||
stack: '2',
|
||
legendHoverLink: false,
|
||
barWidth: 20,
|
||
label: _label,
|
||
itemStyle: {
|
||
normal: {
|
||
color: '#2E8CFF'
|
||
},
|
||
emphasis: {
|
||
color: '#2E8CFF'
|
||
}
|
||
},
|
||
data: _data2
|
||
},
|
||
{
|
||
type: 'bar',
|
||
stack: '2',
|
||
name: '旅行时间',
|
||
legendHoverLink: false,
|
||
barWidth: 20,
|
||
label: _label,
|
||
itemStyle: {
|
||
normal: {
|
||
color: '#37D2D4'
|
||
},
|
||
emphasis: {
|
||
color: '#37D2D4'
|
||
}
|
||
},
|
||
data: _data3
|
||
},
|
||
{
|
||
type: 'bar',
|
||
stack: '2',
|
||
name: '拥堵延时指数',
|
||
legendHoverLink: false,
|
||
barWidth: 20,
|
||
label: _label,
|
||
itemStyle: {
|
||
normal: {
|
||
color: '#19CA88'
|
||
},
|
||
emphasis: {
|
||
color: '#19CA88'
|
||
}
|
||
},
|
||
data: _data4
|
||
}
|
||
]
|
||
};
|
||
yearsNumChart.setOption(option)
|
||
setInterval(function () {
|
||
yearsNumChart.clear()
|
||
yearsNumChart.setOption(option)
|
||
}, 120000)
|
||
})
|
||
|
||
},
|
||
|
||
// 拥堵城市分析（完成）
|
||
contentFn: function () {
|
||
axios.get("/api/CongestionCityOrder").then(res => {
|
||
|
||
console.log("okkk")
|
||
console.log(res)
|
||
|
||
var nameArr = []
|
||
var caiArr = []
|
||
var cunArr = []
|
||
for (var i = 0; i < res.data.length; i++) {
|
||
nameArr.push(res.data[i].label)
|
||
caiArr.push(res.data[i].freeFlowSpeed)
|
||
cunArr.push(res.data[i].realSpeed)
|
||
}
|
||
var contentChart = echarts.init(document.getElementById('contentId'));
|
||
var option = {
|
||
tooltip: {
|
||
trigger: 'axis'
|
||
},
|
||
legend: {
|
||
x: '35%',
|
||
y: '0%',
|
||
data: ["平均速度", "畅通速度"],
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontSize: 8
|
||
},
|
||
itemWidth: 10,
|
||
itemHeight: 10,
|
||
},
|
||
calculable: true,
|
||
xAxis: [
|
||
{
|
||
type: 'category',
|
||
data: nameArr,
|
||
axisLabel: {
|
||
interval: 0,
|
||
textStyle: {
|
||
fontSize: 8,
|
||
color: 'rgba(255,255,255,.7)',
|
||
}
|
||
},
|
||
"axisTick": { //y轴刻度线
|
||
"show": false
|
||
},
|
||
"axisLine": { //y轴
|
||
"show": false,
|
||
},
|
||
}
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: 'value',
|
||
scale: true,
|
||
name: '单位：km/h',
|
||
nameTextStyle: {
|
||
color: 'rgba(255,255,255,.7)',
|
||
fontSize: 8
|
||
},
|
||
boundaryGap: [0.2, 0.2],
|
||
"axisTick": { //y轴刻度线
|
||
"show": false
|
||
},
|
||
"axisLine": { //y轴
|
||
"show": false,
|
||
},
|
||
axisLabel: {
|
||
textStyle: {
|
||
color: 'rgba(255,255,255,.8)',
|
||
fontSize: 8
|
||
}
|
||
},
|
||
splitLine: { //决定是否显示坐标中网格
|
||
show: true,
|
||
lineStyle: {
|
||
color: ['#fff'],
|
||
opacity: 0.2
|
||
}
|
||
},
|
||
},
|
||
{
|
||
type: 'value',
|
||
scale: true,
|
||
show: false,
|
||
// name: "销量额(万元)",
|
||
nameTextStyle: {
|
||
color: 'rgba(255,255,255,.2)',
|
||
},
|
||
boundaryGap: [0.2, 0.2],
|
||
"axisTick": { //y轴刻度线
|
||
"show": false
|
||
},
|
||
"axisLine": { //y轴
|
||
"show": false,
|
||
},
|
||
axisLabel: {
|
||
textStyle: {
|
||
color: 'rgba(255,255,255,.2)',
|
||
}
|
||
},
|
||
splitLine: { //决定是否显示坐标中网格
|
||
show: true,
|
||
lineStyle: {
|
||
color: ['#fff'],
|
||
opacity: 0.2
|
||
}
|
||
},
|
||
|
||
}
|
||
],
|
||
color: ['#0EFCFF', '#FD9133'],
|
||
grid: {
|
||
left: '5%',
|
||
right: '1%',
|
||
top: '25%',
|
||
bottom: '15%'
|
||
// containLabel: true
|
||
},
|
||
series: [
|
||
{
|
||
barWidth: '10%',
|
||
name: '平均速度',
|
||
type: 'line',
|
||
data: caiArr,
|
||
},
|
||
{
|
||
animationDuration: 2500,
|
||
barWidth: '20%',
|
||
name: '畅通速度',
|
||
type: 'bar',
|
||
data: cunArr,
|
||
}
|
||
]
|
||
};
|
||
contentChart.setOption(option)
|
||
setInterval(function () {
|
||
contentChart.clear()
|
||
contentChart.setOption(option)
|
||
}, 90000)
|
||
})
|
||
|
||
},
|
||
// 交通健康城市排名（完成）
|
||
publicNumFn: function () {
|
||
axios.get("/api/rankListView").then(res => {
|
||
var name = []
|
||
var idx1 = []
|
||
var healthValue = []
|
||
for (var i = 0; i < res.data.length; i++) {
|
||
name.push(res.data[i].cityName)
|
||
idx1.push(res.data[i].idx1)
|
||
healthValue.push(res.data[i].healthValue)
|
||
}
|
||
var publicNumChart = echarts.init(document.getElementById('publicNumId'));
|
||
var option = {
|
||
tooltip: {
|
||
trigger: 'axis'
|
||
},
|
||
legend: {
|
||
x: '35%',
|
||
y: '0%',
|
||
data: ['交通健康指数'],
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontSize: 8
|
||
},
|
||
itemWidth: 10,
|
||
itemHeight: 10,
|
||
},
|
||
calculable: true,
|
||
xAxis: [
|
||
{
|
||
type: 'category',
|
||
data: name,
|
||
axisLabel: {
|
||
interval: 0,
|
||
textStyle: {
|
||
fontSize: 8,
|
||
color: 'rgba(255,255,255,.7)',
|
||
}
|
||
},
|
||
"axisTick": { //y轴刻度线
|
||
"show": false
|
||
},
|
||
"axisLine": { //y轴
|
||
"show": false,
|
||
},
|
||
}
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: 'value',
|
||
scale: true,
|
||
name: '单位：%',
|
||
nameTextStyle: {
|
||
color: 'rgba(255,255,255,.7)',
|
||
fontSize: 8
|
||
},
|
||
max: 1.8,
|
||
min: 0,
|
||
boundaryGap: [0.2, 0.2],
|
||
"axisTick": { //y轴刻度线
|
||
"show": false
|
||
},
|
||
"axisLine": { //y轴
|
||
"show": false,
|
||
},
|
||
axisLabel: {
|
||
textStyle: {
|
||
color: 'rgba(255,255,255,.8)',
|
||
fontSize: 8
|
||
// opacity: 0.1,
|
||
}
|
||
},
|
||
splitLine: { //决定是否显示坐标中网格
|
||
show: true,
|
||
lineStyle: {
|
||
color: ['#fff'],
|
||
opacity: 0.2
|
||
}
|
||
},
|
||
},
|
||
{
|
||
type: 'value',
|
||
scale: true,
|
||
show: false,
|
||
// name: "销量额(万元)",
|
||
nameTextStyle: {
|
||
color: 'rgba(255,255,255,.2)',
|
||
},
|
||
boundaryGap: [0.2, 0.2],
|
||
"axisTick": { //y轴刻度线
|
||
"show": false
|
||
},
|
||
"axisLine": { //y轴
|
||
"show": false,
|
||
},
|
||
axisLabel: {
|
||
textStyle: {
|
||
color: 'rgba(255,255,255,.2)',
|
||
// opacity: 0.1,
|
||
}
|
||
},
|
||
splitLine: { //决定是否显示坐标中网格
|
||
show: true,
|
||
lineStyle: {
|
||
color: ['#fff'],
|
||
opacity: 0.2
|
||
}
|
||
},
|
||
|
||
}
|
||
],
|
||
color: ['#2E8CFF', '#38EB70'],
|
||
grid: {
|
||
left: '5%',
|
||
right: '1%',
|
||
top: '25%',
|
||
bottom: '15%'
|
||
},
|
||
series: [
|
||
{
|
||
animationDuration: 2500,
|
||
barWidth: '20%',
|
||
name: '交通健康指数',
|
||
type: 'bar',
|
||
data: idx1,
|
||
},
|
||
{
|
||
animationDuration: 2500,
|
||
barWidth: '20%',
|
||
name: '健康状态',
|
||
type: 'line',
|
||
data: healthValue,
|
||
}
|
||
],
|
||
animationEasing: 'cubicOut'
|
||
};
|
||
publicNumChart.setOption(option)
|
||
setInterval(function () {
|
||
publicNumChart.clear()
|
||
publicNumChart.setOption(option)
|
||
}, 60000)
|
||
})
|
||
}
|
||
}
|
||
var start = new apiFn()
|
||
start.Init()
|
||
})
|
||
</script>
|
||
<script type="text/javascript">
|
||
// 将vue挂载到id为home的根元素上
|
||
var vm = new Vue({
|
||
delimiters: ["<<", ">>"],
|
||
el: "#particles-js",
|
||
data() {
|
||
return {
|
||
'top1': {},
|
||
'CongestionCityOrderList': [],
|
||
resultList: []
|
||
};
|
||
},
|
||
methods: {
|
||
init() {
|
||
axios.get("/api/top1").then(res => {
|
||
this.top1 = res.data[0]
|
||
})
|
||
|
||
axios.get("/api/dataCount").then(res => {
|
||
// 生成 0 到 10000 之间的随机整数
|
||
const randomNumber = Math.random() * 10000;
|
||
// 将随机数映射到 10000 到 20000 之间
|
||
const randomInteger = Math.floor(randomNumber) + 10000;
|
||
|
||
let str_count = randomInteger.toString()
|
||
|
||
let resultList =[]
|
||
for (let i = 0; i <str_count.length; i++) {
|
||
resultList.push(str_count[i])
|
||
}
|
||
this.resultList = resultList
|
||
console.log(this.resultList)
|
||
|
||
|
||
})
|
||
},
|
||
|
||
|
||
isStaus(res) {
|
||
if (res === 'up') {
|
||
return "上升"
|
||
} else if (res === 'down') {
|
||
return "下降"
|
||
} else if (res === "flat") {
|
||
return "保持平衡"
|
||
}
|
||
|
||
}
|
||
},
|
||
mounted() {
|
||
},
|
||
created() {
|
||
this.init()
|
||
},
|
||
});
|
||
|
||
|
||
</script> |