yyl
1 year ago
26 changed files with 2605 additions and 13 deletions
@ -0,0 +1,391 @@ |
|||||
|
var res = [ |
||||
|
{ value: 50, name: '情报板发布' }, |
||||
|
{ value: 1, name: '' }, |
||||
|
{ value: 20, name: '微博发布' }, |
||||
|
{ value: 1, name: '' }, |
||||
|
{ value: 30, name: '服务网站' }, |
||||
|
{ value: 1, name: '' }, |
||||
|
]; |
||||
|
// var res = this.evaluatedCountList;
|
||||
|
var data1 = [], data2 = [], data3 = [], legendData = []; |
||||
|
var curIndex = 0; |
||||
|
var index = 0; |
||||
|
let angle = 0; //角度，用来做简单的动画效果的
|
||||
|
|
||||
|
for (var i = 0; i < res.length; i++) { |
||||
|
|
||||
|
data1.push({ |
||||
|
value: res[i].value, |
||||
|
name: res[i].name, |
||||
|
}) |
||||
|
data2.push({ |
||||
|
value: res[i].value, |
||||
|
name: res[i].name, |
||||
|
itemStyle: { |
||||
|
opacity: 0.4, |
||||
|
}, |
||||
|
}) |
||||
|
|
||||
|
data3.push({ |
||||
|
value: res[i].value, |
||||
|
name: res[i].name, |
||||
|
itemStyle: { |
||||
|
opacity: 0.1, |
||||
|
}, |
||||
|
}) |
||||
|
if ( res[i].name != "" ) |
||||
|
legendData.push(res[i].name); |
||||
|
} |
||||
|
|
||||
|
var options = { |
||||
|
color: ['#5CC5FF', 'transparent', '#54EFD5', 'transparent', '#FD9666', 'transparent', '#5C8CFE', 'transparent', '#51D5AD', 'transparent'], |
||||
|
title: [ |
||||
|
{ |
||||
|
text:'999', |
||||
|
top: '25%', |
||||
|
textAlign: 'center', |
||||
|
left: '50%', |
||||
|
textStyle: { |
||||
|
color: '#ffffff', |
||||
|
fontSize: 30, |
||||
|
fontFamily: 'SourceHanSansCN', |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
text: '总数', |
||||
|
top: '38%', |
||||
|
textAlign: 'center', |
||||
|
left: '50%', |
||||
|
textStyle: { |
||||
|
color: 'rgba(242, 252, 253, 0.84)', |
||||
|
fontSize: 16, |
||||
|
fontFamily: 'SourceHanSansCN', |
||||
|
}, |
||||
|
}, |
||||
|
], |
||||
|
grid: { |
||||
|
top: '3%', |
||||
|
left: '6%', |
||||
|
right: '6%', |
||||
|
bottom: '3%', |
||||
|
containLabel: true |
||||
|
}, |
||||
|
tooltip: { |
||||
|
trigger: 'item', |
||||
|
formatter: '{b} : {c}:{d}' |
||||
|
}, |
||||
|
legend: { |
||||
|
orient: '', |
||||
|
left: '10%', |
||||
|
top: '68%', |
||||
|
itemWidth: 10, |
||||
|
itemHeight: 10, |
||||
|
icon:"circle", |
||||
|
textStyle: { |
||||
|
color: "#ffffff", |
||||
|
fontSize: 14, |
||||
|
lineHeight: 22, |
||||
|
rich: { |
||||
|
text: { |
||||
|
marginLeft:32, |
||||
|
fontSize: 14, |
||||
|
}, |
||||
|
number: { |
||||
|
fontSize: 14, |
||||
|
color: "#37E7FF", |
||||
|
marginLeft:32, |
||||
|
fontWeight: 'bold' |
||||
|
}, |
||||
|
unit: { |
||||
|
fontSize: 14, |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
data: legendData, |
||||
|
formatter(name) { |
||||
|
if ( name == "" ) return ""; |
||||
|
const newData = res; |
||||
|
let tarValue = 0; |
||||
|
let total = 0; |
||||
|
for (let i = 0; i < newData.length; i++) { |
||||
|
total += newData[i].value; |
||||
|
if (newData[i].name === name) { |
||||
|
tarValue = newData[i].value; |
||||
|
} |
||||
|
} |
||||
|
var percert = total == 0 ? 0 : ((tarValue / total) * 100).toFixed(2); |
||||
|
const arr = name + ' ' + tarValue; |
||||
|
return `{text|${name}} {number|${percert}%}`;; |
||||
|
}, |
||||
|
}, |
||||
|
series: [ |
||||
|
/** 饼图上刻度 */ |
||||
|
{ |
||||
|
type: 'gauge', |
||||
|
center: ['50%', '35%'], |
||||
|
radius: '40%', // 错位调整此处
|
||||
|
startAngle: 0, |
||||
|
endAngle: 360, |
||||
|
splitNumber: 52, |
||||
|
axisLine: { show: false }, |
||||
|
splitLine: { |
||||
|
// length: 39,
|
||||
|
length: '2', |
||||
|
lineStyle: { |
||||
|
width: 5, |
||||
|
color: '#5CC5FF' |
||||
|
} |
||||
|
}, |
||||
|
axisTick: { show: false }, |
||||
|
axisLabel: { show: false } |
||||
|
}, |
||||
|
/** 绘制外部圆弧-2-开始圆点 <left-top> */ |
||||
|
{ |
||||
|
type: 'custom', |
||||
|
coordinateSystem: 'none', |
||||
|
renderItem: (params, api) => { |
||||
|
let x0 = api.getWidth() / 2; |
||||
|
let y0 = api.getHeight() / 2 - 59; |
||||
|
let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.50; |
||||
|
return { |
||||
|
type: 'circle', |
||||
|
shape: { |
||||
|
/** 角度175° 外弧2开始角度 */ |
||||
|
cx: x0 + r * Math.cos((350 + -angle) * Math.PI / 180), |
||||
|
cy: y0 + r * Math.sin((350 + -angle) * Math.PI / 180), |
||||
|
r: 4 |
||||
|
}, |
||||
|
style: { |
||||
|
fill: '#5BC4FF', |
||||
|
stroke: '#5BC4FF' |
||||
|
}, |
||||
|
silent: true |
||||
|
} |
||||
|
}, |
||||
|
data: [0] |
||||
|
}, |
||||
|
{ |
||||
|
type: 'custom', |
||||
|
coordinateSystem: 'none', |
||||
|
renderItem: (params, api) => { |
||||
|
return { |
||||
|
type: 'arc', |
||||
|
shape: { |
||||
|
cx: api.getWidth() / 2, |
||||
|
cy: api.getHeight() / 2 - 59, |
||||
|
r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.50, |
||||
|
startAngle: (350 + -angle) * Math.PI / 180, |
||||
|
endAngle: (120 + -angle) * Math.PI / 180 |
||||
|
}, |
||||
|
style: { |
||||
|
fill: 'transparent', |
||||
|
stroke: '#5BC4FF66', |
||||
|
lineWidth: 2.6 |
||||
|
}, |
||||
|
silent: true |
||||
|
} |
||||
|
}, |
||||
|
data: [0] |
||||
|
}, |
||||
|
{ |
||||
|
type: 'custom', |
||||
|
coordinateSystem: 'none', |
||||
|
renderItem: (params, api) => { |
||||
|
let x0 = api.getWidth() / 2; |
||||
|
let y0 = api.getHeight() / 2 - 59; |
||||
|
let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.50; |
||||
|
return { |
||||
|
type: 'circle', |
||||
|
shape: { |
||||
|
/** 角度175° 外弧2开始角度 */ |
||||
|
cx: x0 + r * Math.cos((150 + -angle) * Math.PI / 180), |
||||
|
cy: y0 + r * Math.sin((150 + -angle) * Math.PI / 180), |
||||
|
r: 4 |
||||
|
}, |
||||
|
style: { |
||||
|
fill: '#5BC4FF', |
||||
|
stroke: '#5BC4FF' |
||||
|
}, |
||||
|
silent: true |
||||
|
} |
||||
|
}, |
||||
|
data: [0] |
||||
|
}, |
||||
|
{ |
||||
|
type: 'custom', |
||||
|
coordinateSystem: 'none', |
||||
|
renderItem: (params, api) => { |
||||
|
return { |
||||
|
type: 'arc', |
||||
|
shape: { |
||||
|
cx: api.getWidth() / 2, |
||||
|
cy: api.getHeight() / 2 - 59, |
||||
|
r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.50, |
||||
|
startAngle: (150 + -angle) * Math.PI / 180, |
||||
|
endAngle: (-30 + -angle) * Math.PI / 180 |
||||
|
}, |
||||
|
style: { |
||||
|
fill: 'transparent', |
||||
|
stroke: '#5BC4FF66', |
||||
|
lineWidth: 2.6 |
||||
|
}, |
||||
|
silent: true |
||||
|
} |
||||
|
}, |
||||
|
data: [0] |
||||
|
}, |
||||
|
{ |
||||
|
type: 'custom', |
||||
|
coordinateSystem: 'none', |
||||
|
renderItem: (params, api) => { |
||||
|
let x0 = api.getWidth() / 2; |
||||
|
let y0 = api.getHeight() / 2 - 59; |
||||
|
let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.56; |
||||
|
return { |
||||
|
type: 'circle', |
||||
|
shape: { |
||||
|
/** 角度175° 外弧2开始角度 */ |
||||
|
cx: x0 + r * Math.cos((590 + -angle) * Math.PI / 180), |
||||
|
cy: y0 + r * Math.sin((590 + -angle) * Math.PI / 180), |
||||
|
r: 4 |
||||
|
}, |
||||
|
style: { |
||||
|
fill: '#5BC4FF', |
||||
|
stroke: '#5BC4FF' |
||||
|
}, |
||||
|
silent: true |
||||
|
} |
||||
|
}, |
||||
|
data: [0] |
||||
|
}, |
||||
|
{ |
||||
|
type: 'custom', |
||||
|
coordinateSystem: 'none', |
||||
|
renderItem: (params, api) => { |
||||
|
return { |
||||
|
type: 'arc', |
||||
|
shape: { |
||||
|
cx: api.getWidth() / 2, |
||||
|
cy: api.getHeight() / 2 - 59, |
||||
|
r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.56, |
||||
|
startAngle: (590 + -angle) * Math.PI / 180, |
||||
|
endAngle: (350 + -angle) * Math.PI / 180 |
||||
|
}, |
||||
|
style: { |
||||
|
fill: 'transparent', |
||||
|
stroke: '#5BC4FF66', |
||||
|
lineWidth: 2.6 |
||||
|
}, |
||||
|
silent: true |
||||
|
} |
||||
|
}, |
||||
|
data: [0] |
||||
|
}, |
||||
|
{ |
||||
|
type: 'custom', |
||||
|
coordinateSystem: 'none', |
||||
|
renderItem: (params, api) => { |
||||
|
let x0 = api.getWidth() / 2; |
||||
|
let y0 = api.getHeight() / 2 - 59; |
||||
|
let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.56; |
||||
|
return { |
||||
|
type: 'circle', |
||||
|
shape: { |
||||
|
/** 角度175° 外弧2开始角度 */ |
||||
|
cx: x0 + r * Math.cos((90 + -angle) * Math.PI / 180), |
||||
|
cy: y0 + r * Math.sin((90 + -angle) * Math.PI / 180), |
||||
|
r: 4 |
||||
|
}, |
||||
|
style: { |
||||
|
fill: '#5BC4FF', |
||||
|
stroke: '#5BC4FF' |
||||
|
}, |
||||
|
silent: true |
||||
|
} |
||||
|
}, |
||||
|
data: [0] |
||||
|
}, |
||||
|
{ |
||||
|
type: 'custom', |
||||
|
coordinateSystem: 'none', |
||||
|
renderItem: (params, api) => { |
||||
|
return { |
||||
|
type: 'arc', |
||||
|
shape: { |
||||
|
cx: api.getWidth() / 2, |
||||
|
cy: api.getHeight() / 2 - 59, |
||||
|
r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.56, |
||||
|
startAngle: (90 + -angle) * Math.PI / 180, |
||||
|
endAngle: (160 + -angle) * Math.PI / 180 |
||||
|
}, |
||||
|
style: { |
||||
|
fill: 'transparent', |
||||
|
stroke: '#5BC4FF66', |
||||
|
lineWidth: 2.6 |
||||
|
}, |
||||
|
silent: true |
||||
|
} |
||||
|
}, |
||||
|
data: [0] |
||||
|
}, |
||||
|
{ |
||||
|
type: 'pie', |
||||
|
radius: ['45%', '39%'], |
||||
|
center: ['50%', '35%'], |
||||
|
z: 10, |
||||
|
label: { |
||||
|
show: false, |
||||
|
position: 'center', |
||||
|
formatter: (params) => { |
||||
|
return params.name + "\r\n" + params.value |
||||
|
}, |
||||
|
rich: { |
||||
|
total: { |
||||
|
fontSize: 16, |
||||
|
color: '#04F5FE', |
||||
|
}, |
||||
|
efficiency: { |
||||
|
fontSize: 12, |
||||
|
color: '#00FD6D', |
||||
|
}, |
||||
|
}, |
||||
|
color: '#FFFFFF', |
||||
|
fontSize: 12, |
||||
|
lineHeight: 16, |
||||
|
}, |
||||
|
data: data1, |
||||
|
labelLine: { |
||||
|
show: false, |
||||
|
}, |
||||
|
itemStyle: { |
||||
|
normal: { |
||||
|
borderWidth: 6, |
||||
|
shadowBlur: 10, |
||||
|
borderRadius: 50, // 圆角
|
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
type: 'pie', |
||||
|
radius: ['25%', '39%'], |
||||
|
center: ['50%', '35%'], |
||||
|
label: { |
||||
|
show: false, |
||||
|
}, |
||||
|
data: data2, |
||||
|
labelLine: { |
||||
|
show: false, |
||||
|
}, |
||||
|
itemStyle: { |
||||
|
normal: { |
||||
|
borderWidth: 6, |
||||
|
shadowBlur: 10, |
||||
|
borderRadius: 0, // 圆角
|
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
], |
||||
|
|
||||
|
}; |
||||
|
|
||||
|
export default options |
||||
@ -0,0 +1,66 @@ |
|||||
|
<template> |
||||
|
<div class='congestion'> |
||||
|
<WgtTitle :title="'收费站管制分析'"></WgtTitle> |
||||
|
<div class="board"> |
||||
|
<div class="charts" id="auditAnalytics"></div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import WgtTitle from "../../../../../perception/widgets/title"; |
||||
|
import * as echarts from "echarts"; |
||||
|
import chartsStatistics from "./assets/charts"; |
||||
|
export default { |
||||
|
name: 'RailWayDay', |
||||
|
components: { |
||||
|
WgtTitle |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
created() { |
||||
|
|
||||
|
}, |
||||
|
methods: { |
||||
|
|
||||
|
}, |
||||
|
mounted() { |
||||
|
setTimeout(() => { |
||||
|
this.$nextTick(() => { |
||||
|
var myChart = echarts.init(document.getElementById('auditAnalytics')); |
||||
|
myChart.setOption(chartsStatistics); |
||||
|
}); |
||||
|
}); |
||||
|
}, |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang='scss' scoped> |
||||
|
.congestion { |
||||
|
width: 100%; |
||||
|
.board{ |
||||
|
height:346px; |
||||
|
width: 100%; |
||||
|
padding: 0px 20px; |
||||
|
background: linear-gradient(180deg, rgba(6,66,88,0.2) 0%, #064258 100%); |
||||
|
border-radius: 5px 5px 5px 5px; |
||||
|
opacity: 0.8; |
||||
|
border: 1px solid; |
||||
|
border-image: linear-gradient(360deg, rgba(55, 231, 255,0.3), rgba(55, 231, 255, 0)) 1 1; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
.charts { |
||||
|
height:376px; |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
</style> |
||||
|
|
||||
@ -0,0 +1,284 @@ |
|||||
|
var res = [ |
||||
|
{ value: 20, name: '交通事故' }, |
||||
|
{ value: 1, name: '' }, |
||||
|
{ value: 20, name: '车辆故障' }, |
||||
|
{ value: 1, name: '' }, |
||||
|
{ value: 15, name: '路障清除' }, |
||||
|
{ value: 1, name: '' }, |
||||
|
{ value: 10, name: '交通管制' }, |
||||
|
{ value: 1, name: '' }, |
||||
|
{ value: 5, name: '道路拥堵' }, |
||||
|
{ value: 1, name: '' }, |
||||
|
{ value: 5, name: '异常天气' }, |
||||
|
{ value: 1, name: '' }, |
||||
|
]; |
||||
|
let angle = 0; //角度，用来做简单的动画效果的
|
||||
|
|
||||
|
//获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
|
||||
|
function getCirlPoint(x0, y0, r, angle) { |
||||
|
let x1 = x0 + r * Math.cos((angle * Math.PI) / 180); |
||||
|
let y1 = y0 + r * Math.sin((angle * Math.PI) / 180); |
||||
|
return { |
||||
|
x: x1, |
||||
|
y: y1, |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
let color = ['#4278F8F9', 'transparent','#5372C4', 'transparent', '#0046FFF9', 'transparent','#FB9434F9', 'transparent','#854101F9', 'transparent', '#05E599F9', 'transparent','#219F73F9', 'transparent','#7CEDD5F9', 'transparent',]; |
||||
|
let colorend = ['#4278F800', 'transparent', '#5372C400', 'transparent','#0046FF00', 'transparent', '#FB943400', 'transparent','#85410100', 'transparent','#05E59900', 'transparent','#219F7300', 'transparent','#7CEDD500', 'transparent',]; |
||||
|
|
||||
|
// var res = this.evaluatedCountList;
|
||||
|
var data1 = [], data2 = [], data3 = [], legendData = []; |
||||
|
var curIndex = 0; |
||||
|
var index = 0; |
||||
|
|
||||
|
for (var i = 0; i < res.length; i++) { |
||||
|
data1.push({ |
||||
|
value: res[i].value, |
||||
|
name: res[i].name, |
||||
|
}) |
||||
|
data2.push({ |
||||
|
value: res[i].value, |
||||
|
name: res[i].name, |
||||
|
itemStyle: { |
||||
|
opacity: 0.4, |
||||
|
}, |
||||
|
}) |
||||
|
|
||||
|
data3.push({ |
||||
|
value: res[i].value, |
||||
|
name: res[i].name, |
||||
|
itemStyle: { |
||||
|
opacity: 0.1, |
||||
|
}, |
||||
|
}) |
||||
|
if ( res[i].name != "" ) |
||||
|
legendData.push(res[i].name); |
||||
|
} |
||||
|
|
||||
|
var options = { |
||||
|
color: ['#2867FF', 'transparent', '#58C3FF', 'transparent', '#FF6A3B', 'transparent','#FDA474', 'transparent','#FEE58F','transparent', '#8DFEBF','transparent', '#66F4DC', 'transparent','#33E27D', 'transparent','#5D8CFE','transparent',], |
||||
|
title: [ |
||||
|
{ |
||||
|
text:'999', |
||||
|
top: '25%', |
||||
|
textAlign: 'center', |
||||
|
left: '50%', |
||||
|
textStyle: { |
||||
|
color: '#ffffff', |
||||
|
fontSize: 30, |
||||
|
fontFamily: 'SourceHanSansCN', |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
text: '总数', |
||||
|
top: '38%', |
||||
|
textAlign: 'center', |
||||
|
left: '50%', |
||||
|
textStyle: { |
||||
|
color: 'rgba(242, 252, 253, 0.84)', |
||||
|
fontSize: 16, |
||||
|
fontFamily: 'SourceHanSansCN', |
||||
|
}, |
||||
|
}, |
||||
|
], |
||||
|
grid: { |
||||
|
top: '38%', |
||||
|
left: '6%', |
||||
|
right: '6%', |
||||
|
bottom: '3%', |
||||
|
containLabel: true |
||||
|
}, |
||||
|
tooltip: { |
||||
|
trigger: 'item', |
||||
|
formatter: '{b} : {c}:{d}' |
||||
|
}, |
||||
|
legend: { |
||||
|
orient: '', |
||||
|
left: '10%', |
||||
|
top: '68%', |
||||
|
itemWidth: 10, |
||||
|
itemHeight: 10, |
||||
|
icon:"circle", |
||||
|
textStyle: { |
||||
|
color: "#ffffff", |
||||
|
fontSize: 14, |
||||
|
lineHeight: 22, |
||||
|
rich: { |
||||
|
text: { |
||||
|
marginLeft:32, |
||||
|
fontSize: 14, |
||||
|
}, |
||||
|
number: { |
||||
|
fontSize: 14, |
||||
|
color: "#37E7FF", |
||||
|
marginLeft:32, |
||||
|
fontWeight: 'bold' |
||||
|
}, |
||||
|
unit: { |
||||
|
fontSize: 14, |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
data: legendData, |
||||
|
formatter(name) { |
||||
|
const newData = res; |
||||
|
let tarValue = 0; |
||||
|
let total = 0; |
||||
|
for (let i = 0; i < newData.length; i++) { |
||||
|
total += newData[i].value; |
||||
|
if (newData[i].name === name) { |
||||
|
tarValue = newData[i].value; |
||||
|
} |
||||
|
} |
||||
|
var percert = total == 0 ? 0 : ((tarValue / total) * 100).toFixed(2); |
||||
|
const arr = name + ' ' + tarValue; |
||||
|
return `{text|${name}} {number|${percert}%}`;; |
||||
|
}, |
||||
|
}, |
||||
|
series: [ |
||||
|
/** 饼图上刻度 */ |
||||
|
{ |
||||
|
type: 'gauge', |
||||
|
center: ['50%', '35%'], |
||||
|
radius: '46%', // 错位调整此处
|
||||
|
startAngle: 0, |
||||
|
endAngle: 360, |
||||
|
splitNumber: 52, |
||||
|
axisLine: { show: false }, |
||||
|
splitLine: { |
||||
|
// length: 39,
|
||||
|
length: '2', |
||||
|
lineStyle: { |
||||
|
width: 5, |
||||
|
color: '#5CC5FF' |
||||
|
} |
||||
|
}, |
||||
|
axisTick: { show: false }, |
||||
|
axisLabel: { show: false } |
||||
|
}, |
||||
|
{ |
||||
|
name: '中心效果圆', |
||||
|
type: 'gauge', |
||||
|
radius: '30%', |
||||
|
center: ['50%', '35%'], |
||||
|
startAngle: 0, |
||||
|
endAngle: 360, |
||||
|
axisLine: { |
||||
|
lineStyle: { |
||||
|
color: [[1, '#0AFFE950']], |
||||
|
width: 1 |
||||
|
} |
||||
|
}, |
||||
|
axisTick: { |
||||
|
show: false |
||||
|
}, |
||||
|
splitLine: { |
||||
|
show: false |
||||
|
}, |
||||
|
axisLabel: { |
||||
|
show: false |
||||
|
}, |
||||
|
detail: { |
||||
|
show: false |
||||
|
}, |
||||
|
pointer: { |
||||
|
show: false |
||||
|
}, |
||||
|
progress: { |
||||
|
show: true, |
||||
|
width: 80, |
||||
|
itemStyle: { |
||||
|
color: { |
||||
|
type: 'radial', |
||||
|
x: 0.5, |
||||
|
y: 0.5, |
||||
|
r: 0.5, |
||||
|
colorStops: [ |
||||
|
{ |
||||
|
offset: 0, |
||||
|
color: 'rgb(0, 224, 205, 0)' |
||||
|
}, |
||||
|
{ |
||||
|
offset: 0.7, |
||||
|
color: 'rgba(0, 224, 205, 0)' |
||||
|
}, |
||||
|
{ |
||||
|
offset: 1, |
||||
|
color: 'rgba(10, 255, 233, 0.5)' |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
data: [ |
||||
|
{ |
||||
|
value: 100 |
||||
|
} |
||||
|
] |
||||
|
}, |
||||
|
{ |
||||
|
type: 'pie', |
||||
|
radius: ['50%', '40%'], |
||||
|
center: ['50%', '35%'], |
||||
|
z: 10, |
||||
|
label: { |
||||
|
show: false, |
||||
|
position: 'center', |
||||
|
formatter: (params) => { |
||||
|
return params.name + "\r\n" + params.value |
||||
|
}, |
||||
|
rich: { |
||||
|
total: { |
||||
|
fontSize: 16, |
||||
|
color: '#04F5FE', |
||||
|
}, |
||||
|
efficiency: { |
||||
|
fontSize: 12, |
||||
|
color: '#00FD6D', |
||||
|
}, |
||||
|
}, |
||||
|
color: '#FFFFFF', |
||||
|
fontSize: 12, |
||||
|
lineHeight: 16, |
||||
|
}, |
||||
|
data: data1, |
||||
|
labelLine: { |
||||
|
show: false, |
||||
|
}, |
||||
|
itemStyle: { |
||||
|
normal: { |
||||
|
borderRadius: "5", |
||||
|
borderWidth:0, |
||||
|
borderType:"solid", |
||||
|
borderCap:"round", |
||||
|
borderJoin:"round", |
||||
|
borderColor:"#064258", |
||||
|
borderMiterLimit:"20", |
||||
|
color: function(params) { |
||||
|
return { |
||||
|
type: 'linear', |
||||
|
x: 0, |
||||
|
y: 0, |
||||
|
x2: 1, |
||||
|
y2: 1, |
||||
|
colorStops: [{ |
||||
|
offset: 0, |
||||
|
color: color[params.dataIndex] // 0% 处的颜色
|
||||
|
}, |
||||
|
{ |
||||
|
offset: 1, |
||||
|
color: colorend[params.dataIndex] // 100% 处的颜色
|
||||
|
} |
||||
|
], |
||||
|
globalCoord: false // 缺省为 false
|
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
}, |
||||
|
} |
||||
|
], |
||||
|
|
||||
|
}; |
||||
|
|
||||
|
export default options |
||||
@ -0,0 +1,66 @@ |
|||||
|
<template> |
||||
|
<div class='congestion'> |
||||
|
<WgtTitle :title="'事件源分析'"></WgtTitle> |
||||
|
<div class="board"> |
||||
|
<div class="charts" id="channelAnalytics"></div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import WgtTitle from "../../../../../perception/widgets/title"; |
||||
|
import * as echarts from "echarts"; |
||||
|
import chartsStatistics from "./assets/charts"; |
||||
|
export default { |
||||
|
name: 'RailWayDay', |
||||
|
components: { |
||||
|
WgtTitle |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
created() { |
||||
|
|
||||
|
}, |
||||
|
methods: { |
||||
|
|
||||
|
}, |
||||
|
mounted() { |
||||
|
setTimeout(() => { |
||||
|
this.$nextTick(() => { |
||||
|
var myChart = echarts.init(document.getElementById('channelAnalytics')); |
||||
|
myChart.setOption(chartsStatistics); |
||||
|
}); |
||||
|
}); |
||||
|
}, |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang='scss' scoped> |
||||
|
.congestion { |
||||
|
width: 100%; |
||||
|
.board{ |
||||
|
height:346px; |
||||
|
width: 100%; |
||||
|
padding: 0px 20px; |
||||
|
background: linear-gradient(180deg, rgba(6,66,88,0.2) 0%, #064258 100%); |
||||
|
border-radius: 5px 5px 5px 5px; |
||||
|
opacity: 0.8; |
||||
|
border: 1px solid; |
||||
|
border-image: linear-gradient(360deg, rgba(55, 231, 255,0.3), rgba(55, 231, 255, 0)) 1 1; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
.charts { |
||||
|
height:376px; |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
</style> |
||||
|
|
||||
@ -0,0 +1,284 @@ |
|||||
|
var res = [ |
||||
|
{ value: 20, name: '交通事故' }, |
||||
|
{ value: 1, name: '' }, |
||||
|
{ value: 20, name: '车辆故障' }, |
||||
|
{ value: 1, name: '' }, |
||||
|
{ value: 15, name: '路障清除' }, |
||||
|
{ value: 1, name: '' }, |
||||
|
{ value: 10, name: '交通管制' }, |
||||
|
{ value: 1, name: '' }, |
||||
|
{ value: 5, name: '道路拥堵' }, |
||||
|
{ value: 1, name: '' }, |
||||
|
{ value: 5, name: '异常天气' }, |
||||
|
{ value: 1, name: '' }, |
||||
|
]; |
||||
|
let angle = 0; //角度，用来做简单的动画效果的
|
||||
|
|
||||
|
//获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
|
||||
|
function getCirlPoint(x0, y0, r, angle) { |
||||
|
let x1 = x0 + r * Math.cos((angle * Math.PI) / 180); |
||||
|
let y1 = y0 + r * Math.sin((angle * Math.PI) / 180); |
||||
|
return { |
||||
|
x: x1, |
||||
|
y: y1, |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
let color = ['#4278F8F9', 'transparent','#5372C4', 'transparent', '#0046FFF9', 'transparent','#FB9434F9', 'transparent','#854101F9', 'transparent', '#05E599F9', 'transparent','#219F73F9', 'transparent','#7CEDD5F9', 'transparent',]; |
||||
|
let colorend = ['#4278F800', 'transparent', '#5372C400', 'transparent','#0046FF00', 'transparent', '#FB943400', 'transparent','#85410100', 'transparent','#05E59900', 'transparent','#219F7300', 'transparent','#7CEDD500', 'transparent',]; |
||||
|
|
||||
|
// var res = this.evaluatedCountList;
|
||||
|
var data1 = [], data2 = [], data3 = [], legendData = []; |
||||
|
var curIndex = 0; |
||||
|
var index = 0; |
||||
|
|
||||
|
for (var i = 0; i < res.length; i++) { |
||||
|
data1.push({ |
||||
|
value: res[i].value, |
||||
|
name: res[i].name, |
||||
|
}) |
||||
|
data2.push({ |
||||
|
value: res[i].value, |
||||
|
name: res[i].name, |
||||
|
itemStyle: { |
||||
|
opacity: 0.4, |
||||
|
}, |
||||
|
}) |
||||
|
|
||||
|
data3.push({ |
||||
|
value: res[i].value, |
||||
|
name: res[i].name, |
||||
|
itemStyle: { |
||||
|
opacity: 0.1, |
||||
|
}, |
||||
|
}) |
||||
|
if ( res[i].name != "" ) |
||||
|
legendData.push(res[i].name); |
||||
|
} |
||||
|
|
||||
|
var options = { |
||||
|
color: ['#2867FF', 'transparent', '#58C3FF', 'transparent', '#FF6A3B', 'transparent','#FDA474', 'transparent','#FEE58F','transparent', '#8DFEBF','transparent', '#66F4DC', 'transparent','#33E27D', 'transparent','#5D8CFE','transparent',], |
||||
|
title: [ |
||||
|
{ |
||||
|
text:'999', |
||||
|
top: '25%', |
||||
|
textAlign: 'center', |
||||
|
left: '50%', |
||||
|
textStyle: { |
||||
|
color: '#ffffff', |
||||
|
fontSize: 30, |
||||
|
fontFamily: 'SourceHanSansCN', |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
text: '总数', |
||||
|
top: '38%', |
||||
|
textAlign: 'center', |
||||
|
left: '50%', |
||||
|
textStyle: { |
||||
|
color: 'rgba(242, 252, 253, 0.84)', |
||||
|
fontSize: 16, |
||||
|
fontFamily: 'SourceHanSansCN', |
||||
|
}, |
||||
|
}, |
||||
|
], |
||||
|
grid: { |
||||
|
top: '38%', |
||||
|
left: '6%', |
||||
|
right: '6%', |
||||
|
bottom: '3%', |
||||
|
containLabel: true |
||||
|
}, |
||||
|
tooltip: { |
||||
|
trigger: 'item', |
||||
|
formatter: '{b} : {c}:{d}' |
||||
|
}, |
||||
|
legend: { |
||||
|
orient: '', |
||||
|
left: '10%', |
||||
|
top: '68%', |
||||
|
itemWidth: 10, |
||||
|
itemHeight: 10, |
||||
|
icon:"circle", |
||||
|
textStyle: { |
||||
|
color: "#ffffff", |
||||
|
fontSize: 14, |
||||
|
lineHeight: 22, |
||||
|
rich: { |
||||
|
text: { |
||||
|
marginLeft:32, |
||||
|
fontSize: 14, |
||||
|
}, |
||||
|
number: { |
||||
|
fontSize: 14, |
||||
|
color: "#37E7FF", |
||||
|
marginLeft:32, |
||||
|
fontWeight: 'bold' |
||||
|
}, |
||||
|
unit: { |
||||
|
fontSize: 14, |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
data: legendData, |
||||
|
formatter(name) { |
||||
|
const newData = res; |
||||
|
let tarValue = 0; |
||||
|
let total = 0; |
||||
|
for (let i = 0; i < newData.length; i++) { |
||||
|
total += newData[i].value; |
||||
|
if (newData[i].name === name) { |
||||
|
tarValue = newData[i].value; |
||||
|
} |
||||
|
} |
||||
|
var percert = total == 0 ? 0 : ((tarValue / total) * 100).toFixed(2); |
||||
|
const arr = name + ' ' + tarValue; |
||||
|
return `{text|${name}} {number|${percert}%}`;; |
||||
|
}, |
||||
|
}, |
||||
|
series: [ |
||||
|
/** 饼图上刻度 */ |
||||
|
{ |
||||
|
type: 'gauge', |
||||
|
center: ['50%', '35%'], |
||||
|
radius: '46%', // 错位调整此处
|
||||
|
startAngle: 0, |
||||
|
endAngle: 360, |
||||
|
splitNumber: 52, |
||||
|
axisLine: { show: false }, |
||||
|
splitLine: { |
||||
|
// length: 39,
|
||||
|
length: '2', |
||||
|
lineStyle: { |
||||
|
width: 5, |
||||
|
color: '#5CC5FF' |
||||
|
} |
||||
|
}, |
||||
|
axisTick: { show: false }, |
||||
|
axisLabel: { show: false } |
||||
|
}, |
||||
|
{ |
||||
|
name: '中心效果圆', |
||||
|
type: 'gauge', |
||||
|
radius: '30%', |
||||
|
center: ['50%', '35%'], |
||||
|
startAngle: 0, |
||||
|
endAngle: 360, |
||||
|
axisLine: { |
||||
|
lineStyle: { |
||||
|
color: [[1, '#0AFFE950']], |
||||
|
width: 1 |
||||
|
} |
||||
|
}, |
||||
|
axisTick: { |
||||
|
show: false |
||||
|
}, |
||||
|
splitLine: { |
||||
|
show: false |
||||
|
}, |
||||
|
axisLabel: { |
||||
|
show: false |
||||
|
}, |
||||
|
detail: { |
||||
|
show: false |
||||
|
}, |
||||
|
pointer: { |
||||
|
show: false |
||||
|
}, |
||||
|
progress: { |
||||
|
show: true, |
||||
|
width: 80, |
||||
|
itemStyle: { |
||||
|
color: { |
||||
|
type: 'radial', |
||||
|
x: 0.5, |
||||
|
y: 0.5, |
||||
|
r: 0.5, |
||||
|
colorStops: [ |
||||
|
{ |
||||
|
offset: 0, |
||||
|
color: 'rgb(0, 224, 205, 0)' |
||||
|
}, |
||||
|
{ |
||||
|
offset: 0.7, |
||||
|
color: 'rgba(0, 224, 205, 0)' |
||||
|
}, |
||||
|
{ |
||||
|
offset: 1, |
||||
|
color: 'rgba(10, 255, 233, 0.5)' |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
data: [ |
||||
|
{ |
||||
|
value: 100 |
||||
|
} |
||||
|
] |
||||
|
}, |
||||
|
{ |
||||
|
type: 'pie', |
||||
|
radius: ['50%', '40%'], |
||||
|
center: ['50%', '35%'], |
||||
|
z: 10, |
||||
|
label: { |
||||
|
show: false, |
||||
|
position: 'center', |
||||
|
formatter: (params) => { |
||||
|
return params.name + "\r\n" + params.value |
||||
|
}, |
||||
|
rich: { |
||||
|
total: { |
||||
|
fontSize: 16, |
||||
|
color: '#04F5FE', |
||||
|
}, |
||||
|
efficiency: { |
||||
|
fontSize: 12, |
||||
|
color: '#00FD6D', |
||||
|
}, |
||||
|
}, |
||||
|
color: '#FFFFFF', |
||||
|
fontSize: 12, |
||||
|
lineHeight: 16, |
||||
|
}, |
||||
|
data: data1, |
||||
|
labelLine: { |
||||
|
show: false, |
||||
|
}, |
||||
|
itemStyle: { |
||||
|
normal: { |
||||
|
borderRadius: "5", |
||||
|
borderWidth:0, |
||||
|
borderType:"solid", |
||||
|
borderCap:"round", |
||||
|
borderJoin:"round", |
||||
|
borderColor:"#064258", |
||||
|
borderMiterLimit:"20", |
||||
|
color: function(params) { |
||||
|
return { |
||||
|
type: 'linear', |
||||
|
x: 0, |
||||
|
y: 0, |
||||
|
x2: 1, |
||||
|
y2: 1, |
||||
|
colorStops: [{ |
||||
|
offset: 0, |
||||
|
color: color[params.dataIndex] // 0% 处的颜色
|
||||
|
}, |
||||
|
{ |
||||
|
offset: 1, |
||||
|
color: colorend[params.dataIndex] // 100% 处的颜色
|
||||
|
} |
||||
|
], |
||||
|
globalCoord: false // 缺省为 false
|
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
}, |
||||
|
} |
||||
|
], |
||||
|
|
||||
|
}; |
||||
|
|
||||
|
export default options |
||||
@ -0,0 +1,66 @@ |
|||||
|
<template> |
||||
|
<div class='congestion'> |
||||
|
<WgtTitle :title="'事件类型分析'"></WgtTitle> |
||||
|
<div class="board"> |
||||
|
<div class="charts" id="eventTypeAnalysis"></div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import WgtTitle from "../../../../../perception/widgets/title"; |
||||
|
import * as echarts from "echarts"; |
||||
|
import chartsStatistics from "./assets/charts"; |
||||
|
export default { |
||||
|
name: 'RailWayDay', |
||||
|
components: { |
||||
|
WgtTitle |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
created() { |
||||
|
|
||||
|
}, |
||||
|
methods: { |
||||
|
|
||||
|
}, |
||||
|
mounted() { |
||||
|
setTimeout(() => { |
||||
|
this.$nextTick(() => { |
||||
|
var myChart = echarts.init(document.getElementById('eventTypeAnalysis')); |
||||
|
myChart.setOption(chartsStatistics); |
||||
|
}); |
||||
|
}); |
||||
|
}, |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang='scss' scoped> |
||||
|
.congestion { |
||||
|
width: 100%; |
||||
|
.board{ |
||||
|
height:346px; |
||||
|
width: 100%; |
||||
|
padding: 0px 20px; |
||||
|
background: linear-gradient(180deg, rgba(6,66,88,0.2) 0%, #064258 100%); |
||||
|
border-radius: 5px 5px 5px 5px; |
||||
|
opacity: 0.8; |
||||
|
border: 1px solid; |
||||
|
border-image: linear-gradient(360deg, rgba(55, 231, 255,0.3), rgba(55, 231, 255, 0)) 1 1; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
.charts { |
||||
|
height:376px; |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
</style> |
||||
|
|
||||
@ -0,0 +1,308 @@ |
|||||
|
import * as echarts from "echarts"; |
||||
|
|
||||
|
let xData = [ |
||||
|
"1月", |
||||
|
"2月", |
||||
|
"3月", |
||||
|
"4月", |
||||
|
"5月", |
||||
|
"6月", |
||||
|
"7月", |
||||
|
"8月", |
||||
|
"9月", |
||||
|
"10月", |
||||
|
"11月", |
||||
|
"12月" |
||||
|
]; |
||||
|
let data1 = [200, 530, 920, 400, 600, 700, 300, 800, 900, 120, 570, 800]; |
||||
|
let data2= [120, 340, 750, 600, 400, 700, 900, 200, 540, 320, 370, 500]; |
||||
|
let data3 = [200, 530, 920, 400, 600, 700, 300, 800, 900, 120, 570, 800]; |
||||
|
let options = { |
||||
|
tooltip: { |
||||
|
show:false, |
||||
|
trigger: "axis", |
||||
|
axisPointer: { |
||||
|
// 坐标轴指示器，坐标轴触发有效
|
||||
|
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
|
||||
|
}, |
||||
|
textStyle: { |
||||
|
color: "#fff", |
||||
|
fontSize: 14, |
||||
|
}, |
||||
|
backgroundColor: "rgba(3, 31, 71, .0)", //设置背景颜色
|
||||
|
borderColor: "rgba(3, 31, 71, .0)", |
||||
|
formatter: "健康监测<br>{b1}：{c1}人", |
||||
|
}, |
||||
|
grid: { |
||||
|
left: "2%", |
||||
|
right: "4%", |
||||
|
top: "20%", |
||||
|
bottom: "10%", |
||||
|
containLabel: true, |
||||
|
}, |
||||
|
xAxis: { |
||||
|
data: xData, |
||||
|
show: true, |
||||
|
axisTick: { |
||||
|
show: false, |
||||
|
lineStyle: { |
||||
|
color: "#fff", |
||||
|
}, |
||||
|
}, |
||||
|
axisLine: { |
||||
|
lineStyle: { |
||||
|
color: "#1C82C5", |
||||
|
}, |
||||
|
}, |
||||
|
axisLabel: { |
||||
|
interval: 0, |
||||
|
align: "center", |
||||
|
rotate: "1", |
||||
|
margin: "20", |
||||
|
textStyle: { |
||||
|
fontSize: 12, |
||||
|
color: "#50A2C1", |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
yAxis: [ |
||||
|
{ |
||||
|
min: 0, |
||||
|
axisLine: { |
||||
|
lineStyle: { |
||||
|
color: "#1C82C5", |
||||
|
}, |
||||
|
}, |
||||
|
splitLine: { |
||||
|
show: true, |
||||
|
lineStyle: { |
||||
|
color: "rgba(28, 130, 197, .3)", |
||||
|
type: "solid", |
||||
|
}, |
||||
|
}, |
||||
|
axisLabel: { |
||||
|
color: "#DEEBFF", |
||||
|
textStyle: { |
||||
|
fontSize: 12, |
||||
|
}, |
||||
|
}, |
||||
|
axisTick: { |
||||
|
show: false, |
||||
|
}, |
||||
|
}, |
||||
|
], |
||||
|
legend: { |
||||
|
// orient: 'vertical',
|
||||
|
icon: "circle", |
||||
|
itemHeight: 6, |
||||
|
itemWidth: 6, |
||||
|
top: "5%", |
||||
|
right: "10%", |
||||
|
textStyle: { |
||||
|
color: "#fff", |
||||
|
}, |
||||
|
|
||||
|
data:[ |
||||
|
{ |
||||
|
name:"审核通过", |
||||
|
itemStyle:{ |
||||
|
color:'#00A3FF', |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
name:"待审核", |
||||
|
itemStyle:{ |
||||
|
color:'#51BFA4', |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
name:"审核不通过", |
||||
|
itemStyle:{ |
||||
|
color:'#E2BA74', |
||||
|
}, |
||||
|
} |
||||
|
], |
||||
|
}, |
||||
|
series: [ |
||||
|
{ |
||||
|
name: "审核通过", |
||||
|
type: "bar", |
||||
|
barWidth: "10px", |
||||
|
selectedMode:false, |
||||
|
select:{ |
||||
|
itemStyle:{ |
||||
|
opacity: 1, |
||||
|
color: function (params) { |
||||
|
var a = params; |
||||
|
|
||||
|
return new echarts.graphic.LinearGradient( |
||||
|
0, |
||||
|
0, |
||||
|
0, |
||||
|
1, |
||||
|
[ |
||||
|
{ |
||||
|
offset: 0, |
||||
|
color: "#1AC5FD", // 0% 处的颜色
|
||||
|
}, |
||||
|
{ |
||||
|
offset: 1, |
||||
|
color: "#003B4E", // 100% 处的颜色
|
||||
|
}, |
||||
|
], |
||||
|
false |
||||
|
); |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
itemStyle: { |
||||
|
// lenged文本
|
||||
|
opacity: 0.6, |
||||
|
color: function (params) { |
||||
|
var a = params.name; |
||||
|
console.log("==========a=============",a); |
||||
|
return new echarts.graphic.LinearGradient( |
||||
|
0, |
||||
|
0, |
||||
|
0, |
||||
|
1, |
||||
|
[ |
||||
|
{ |
||||
|
offset: 0, |
||||
|
color: "#1AC5FD", // 0% 处的颜色
|
||||
|
}, |
||||
|
{ |
||||
|
offset: 1, |
||||
|
color: "#003B4E", // 100% 处的颜色
|
||||
|
}, |
||||
|
], |
||||
|
false |
||||
|
); |
||||
|
}, |
||||
|
}, |
||||
|
data: data2, |
||||
|
}, |
||||
|
// 下半截柱状图linear-gradient(180deg, #61D8FF 0%, #003B4E 100%); linear-gradient(180deg, #06D7B1 0%, #003B4E 100%)
|
||||
|
{ |
||||
|
name: "待审核", |
||||
|
type: "bar", |
||||
|
barWidth: "10px", |
||||
|
barGap: "120%", |
||||
|
selectedMode:false, |
||||
|
select:{ |
||||
|
itemStyle:{ |
||||
|
opacity: 1, |
||||
|
color: function (params) { |
||||
|
var a = params; |
||||
|
|
||||
|
return new echarts.graphic.LinearGradient( |
||||
|
0, |
||||
|
0, |
||||
|
0, |
||||
|
1, |
||||
|
[ |
||||
|
{ |
||||
|
offset: 0, |
||||
|
color: "#00E4BB53", // 0% 处的颜色
|
||||
|
}, |
||||
|
{ |
||||
|
offset: 1, |
||||
|
color: "#00E4BB53", // 100% 处的颜色
|
||||
|
}, |
||||
|
], |
||||
|
false |
||||
|
); |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
itemStyle: { |
||||
|
// lenged文本
|
||||
|
opacity: 0.6, |
||||
|
color: function (params) { |
||||
|
var a = params.name; |
||||
|
console.log("==========a=============",a); |
||||
|
return new echarts.graphic.LinearGradient( |
||||
|
0, |
||||
|
0, |
||||
|
0, |
||||
|
1, |
||||
|
[ |
||||
|
{ |
||||
|
offset: 0, |
||||
|
color: "#00E4BB", // 0% 处的颜色
|
||||
|
}, |
||||
|
{ |
||||
|
offset: 1, |
||||
|
color: "#00E4BB00", // 100% 处的颜色
|
||||
|
}, |
||||
|
], |
||||
|
false |
||||
|
); |
||||
|
}, |
||||
|
}, |
||||
|
data: data1, |
||||
|
}, |
||||
|
|
||||
|
{ |
||||
|
name: "审核不通过", |
||||
|
type: "bar", |
||||
|
barWidth: "10px", |
||||
|
selectedMode:false, |
||||
|
select:{ |
||||
|
itemStyle:{ |
||||
|
opacity: 1, |
||||
|
color: function (params) { |
||||
|
var a = params; |
||||
|
|
||||
|
return new echarts.graphic.LinearGradient( |
||||
|
0, |
||||
|
0, |
||||
|
0, |
||||
|
1, |
||||
|
[ |
||||
|
{ |
||||
|
offset: 0, |
||||
|
color: "#1AC5FD", // 0% 处的颜色
|
||||
|
}, |
||||
|
{ |
||||
|
offset: 1, |
||||
|
color: "#003B4E", // 100% 处的颜色
|
||||
|
}, |
||||
|
], |
||||
|
false |
||||
|
); |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
itemStyle: { |
||||
|
// lenged文本
|
||||
|
opacity: 0.6, |
||||
|
color: function (params) { |
||||
|
var a = params.name; |
||||
|
console.log("==========a=============",a); |
||||
|
return new echarts.graphic.LinearGradient( |
||||
|
0, |
||||
|
0, |
||||
|
0, |
||||
|
1, |
||||
|
[ |
||||
|
{ |
||||
|
offset: 0, |
||||
|
color: "#FCBE39", // 0% 处的颜色
|
||||
|
}, |
||||
|
{ |
||||
|
offset: 1, |
||||
|
color: "#FCBE3900", // 100% 处的颜色
|
||||
|
}, |
||||
|
], |
||||
|
false |
||||
|
); |
||||
|
}, |
||||
|
}, |
||||
|
data: data2, |
||||
|
}, |
||||
|
], |
||||
|
}; |
||||
|
|
||||
|
|
||||
|
export default options; |
||||
@ -0,0 +1,133 @@ |
|||||
|
<template> |
||||
|
<div class='congestion'> |
||||
|
<WgtTitle :title="'月审核通过趋势分析'"></WgtTitle> |
||||
|
<div class="board"> |
||||
|
<div class="searchPanel_1" > |
||||
|
<el-date-picker |
||||
|
size="mini" |
||||
|
v-if="year != 'quarter'" |
||||
|
class="selectRoad" |
||||
|
v-model="dateTime" |
||||
|
style="width:140px;" |
||||
|
|
||||
|
placeholder="请选择" |
||||
|
/> |
||||
|
<el-quarter-picker size="mini" class="selectRoad" style="width:180px;" v-if="year == 'quarter'" v-model="quarter" aria-placeholder="请选季度" /> |
||||
|
|
||||
|
<el-button type="primary" size="mini" class="btnSearch" icon="el-icon-search">查询</el-button> |
||||
|
<el-button class="btnReset" size="mini" icon="el-icon-refresh-left" >重置</el-button> |
||||
|
</div> |
||||
|
<div class="charts" id="nucleusThrough"></div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import WgtTitle from "../../../../../perception/widgets/title"; |
||||
|
import * as echarts from "echarts"; |
||||
|
import chartsStatistics from "./assets/charts3"; |
||||
|
export default { |
||||
|
name: 'nucleusThrough', |
||||
|
components: { |
||||
|
WgtTitle |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
created() { |
||||
|
|
||||
|
}, |
||||
|
methods: { |
||||
|
|
||||
|
}, |
||||
|
mounted() { |
||||
|
setTimeout(() => { |
||||
|
this.$nextTick(() => { |
||||
|
var myChart = echarts.init(document.getElementById('nucleusThrough')); |
||||
|
myChart.setOption(chartsStatistics); |
||||
|
}); |
||||
|
}); |
||||
|
}, |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang='scss' scoped> |
||||
|
.congestion { |
||||
|
width: 100%; |
||||
|
.board{ |
||||
|
position: relative; |
||||
|
height:300px; |
||||
|
width: 100%; |
||||
|
padding: 0px 20px; |
||||
|
background: linear-gradient(180deg, rgba(6,66,88,0.2) 0%, #064258 100%); |
||||
|
border-radius: 5px 5px 5px 5px; |
||||
|
opacity: 1; |
||||
|
border: 1px solid; |
||||
|
border-image: linear-gradient(360deg, rgba(55, 231, 255,0.3), rgba(55, 231, 255, 0)) 1 1; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
|
||||
|
|
||||
|
.searchPanel_1{ |
||||
|
position:absolute; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
height: 40px; |
||||
|
width:100%; |
||||
|
font-size: 14px; |
||||
|
margin-bottom: 10px; |
||||
|
left:20px; |
||||
|
top:2px; |
||||
|
z-index: 10000; |
||||
|
div{ |
||||
|
white-space: nowrap; |
||||
|
margin-right: 4px; |
||||
|
} |
||||
|
.inputZh{ |
||||
|
width: 47px; |
||||
|
::v-deep{ |
||||
|
.el-input__inner{ |
||||
|
background-color: #064258 !important; |
||||
|
border-width: 0px !important; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.inputJl{ |
||||
|
margin-left: 5px; |
||||
|
margin-right: 10px; |
||||
|
} |
||||
|
.selectRoad{ |
||||
|
width:89px; |
||||
|
border:1px solid #00B3CC; |
||||
|
::v-deep{ |
||||
|
.el-input__inner{ |
||||
|
background-color: #064258 !important; |
||||
|
border-width: 0px !important; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.btnSearch{ |
||||
|
background: linear-gradient(180deg, #005C79 0%, #009BCC 100%); |
||||
|
margin-left: 10px; |
||||
|
border-color: transparent; |
||||
|
} |
||||
|
.btnReset{ |
||||
|
background: linear-gradient(180deg, #005C79 0%, #009BCC 100%);; |
||||
|
border-color: transparent; |
||||
|
color: white; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
.charts { |
||||
|
height:300px; |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
</style> |
||||
|
|
||||
@ -0,0 +1,180 @@ |
|||||
|
|
||||
|
/* 数据 */ |
||||
|
let nameList = ["00:00", "02:00", "04:00", "06:00", "08:00", "10:00", "12:00", "14:00", "16:00", "18:00", "20:00", "22:00"]; // 类别
|
||||
|
let valueList = [800, 520, 650, 950, 420, 600, 450, 720, 303, 503 , 203 ,703 , 903 ]; // 人数
|
||||
|
var yList = [ "1000","800","轻度拥堵","基本畅通","畅通"] |
||||
|
/* 数据整合 */ |
||||
|
let dataList = []; |
||||
|
nameList.map((item, index) => { |
||||
|
if (index === 4) { |
||||
|
dataList.push({ |
||||
|
name: item, |
||||
|
value: valueList[index], |
||||
|
itemStyle: { |
||||
|
color: { |
||||
|
type: 'linear', |
||||
|
x: 0, |
||||
|
y: 0, |
||||
|
x2: 0, |
||||
|
y2: 1, |
||||
|
colorStops: [{ |
||||
|
offset: 0, color: '#FFB904' // 0% 处的颜色
|
||||
|
}, { |
||||
|
offset: 1, color: '#FF6969' // 100% 处的颜色
|
||||
|
}], |
||||
|
global: false // 缺省为 false
|
||||
|
}, |
||||
|
borderRadius: 6 |
||||
|
}, |
||||
|
label: { show: false } |
||||
|
}) |
||||
|
} else { |
||||
|
dataList.push({ |
||||
|
name: item, |
||||
|
value: valueList[index], |
||||
|
itemStyle:{ |
||||
|
borderRadius: 6 |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
var options = { |
||||
|
legend: { |
||||
|
// orient: 'vertical',
|
||||
|
icon: "circle", |
||||
|
itemHeight: 8, |
||||
|
itemWidth: 8, |
||||
|
top: "5%", |
||||
|
x: "right", |
||||
|
textStyle: { |
||||
|
color: "#fff", |
||||
|
}, |
||||
|
}, |
||||
|
grid: { |
||||
|
top: '15%',//上边距
|
||||
|
right: '0',//右边距
|
||||
|
left: '0',//左边距
|
||||
|
bottom: "10%",//下边距
|
||||
|
containLabel: true, |
||||
|
}, |
||||
|
xAxis: { |
||||
|
type: 'category', |
||||
|
data: nameList, |
||||
|
axisTick: { |
||||
|
show: false //隐藏X轴刻度
|
||||
|
}, |
||||
|
axisLine: { |
||||
|
lineStyle: { |
||||
|
color: "rgba(49, 217, 255, 0.8)" |
||||
|
} |
||||
|
}, |
||||
|
axisLabel: { |
||||
|
show: true, |
||||
|
color: '#B6E6FF', |
||||
|
fontSize:8, |
||||
|
fontFamily: 'Source Han Sans CN-Regular', |
||||
|
}, |
||||
|
}, |
||||
|
yAxis: [{ |
||||
|
type: 'value', |
||||
|
name: "", |
||||
|
max: 1200, |
||||
|
min:0, |
||||
|
splitNumber:5, |
||||
|
nameTextStyle: { |
||||
|
color: '#B6E6FF', |
||||
|
fontSize: 13, |
||||
|
fontFamily: 'Source Han Sans CN-Regular', |
||||
|
align: "left", |
||||
|
verticalAlign: "center", |
||||
|
}, |
||||
|
axisLabel: { |
||||
|
fontSize: 13, |
||||
|
color: '#B6E6FF', |
||||
|
fontFamily: 'HarmonyOS Sans-Regular', |
||||
|
// formatter:function(value,index){
|
||||
|
// return yList[index]
|
||||
|
// }
|
||||
|
}, |
||||
|
axisLine: { |
||||
|
show: false, |
||||
|
}, |
||||
|
axisTick: { |
||||
|
show: false |
||||
|
}, |
||||
|
splitLine: { |
||||
|
lineStyle: { |
||||
|
color: 'rgba(49, 217, 255, 0.5)', |
||||
|
} |
||||
|
}, |
||||
|
}], |
||||
|
series: [ |
||||
|
{ |
||||
|
name: '情报板发布', |
||||
|
type: 'line', |
||||
|
symbol: 'circle', |
||||
|
symbolSize: 0, |
||||
|
smooth: true, |
||||
|
areaStyle: { |
||||
|
width: 4, |
||||
|
opacity: 0.25, |
||||
|
color: { |
||||
|
type: 'linear', |
||||
|
x: 0, |
||||
|
y: 0, |
||||
|
x2: 0, |
||||
|
y2: 1, |
||||
|
colorStops: [ |
||||
|
{ offset: 0.389, color: "#32BB8A99" }, |
||||
|
{ offset: 1, color: "#32BB8A00" }, |
||||
|
], |
||||
|
global: false, |
||||
|
}, |
||||
|
}, |
||||
|
// yAxisIndex: 1, // 与第二个 y 轴关联
|
||||
|
itemStyle: { |
||||
|
color: '#32BB8A90', |
||||
|
}, |
||||
|
lineStyle: { |
||||
|
width:2, |
||||
|
}, |
||||
|
|
||||
|
data: [1000, 800, 520, 600, 900, 700, 700,1000, 800, 520, 600, 900, 700, 700], // 折线图的数据
|
||||
|
}, |
||||
|
{ |
||||
|
name: '服务网站', |
||||
|
type: 'line', |
||||
|
symbol: 'circle', |
||||
|
symbolSize: 0, |
||||
|
|
||||
|
// yAxisIndex: 1, // 与第二个 y 轴关联
|
||||
|
itemStyle: { |
||||
|
color: '#E2BA7490', |
||||
|
}, |
||||
|
lineStyle: { |
||||
|
width: 2, |
||||
|
}, |
||||
|
smooth: true, |
||||
|
areaStyle: { |
||||
|
width: 4, |
||||
|
opacity: 0.25, |
||||
|
color: { |
||||
|
type: 'linear', |
||||
|
x: 0, |
||||
|
y: 0, |
||||
|
x2: 0, |
||||
|
y2: 1, |
||||
|
colorStops: [ |
||||
|
{ offset: 0.389, color: "#E2BA7490" }, |
||||
|
{ offset: 1, color: "#E2BA7400" }, |
||||
|
], |
||||
|
global: false, |
||||
|
}, |
||||
|
}, |
||||
|
data: [600, 700, 900, 400, 500, 800, 600,600, 700, 900, 400, 500, 800, 600], // 折线图的数据
|
||||
|
}, |
||||
|
] |
||||
|
} |
||||
|
|
||||
|
export default options; |
||||
@ -0,0 +1,66 @@ |
|||||
|
<template> |
||||
|
<div class='congestion'> |
||||
|
<WgtTitle :title="'今日事件趋势'"></WgtTitle> |
||||
|
<div class="board"> |
||||
|
<div class="charts" id="postTrendsDay"></div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import WgtTitle from "../../../../../perception/widgets/title"; |
||||
|
import * as echarts from "echarts"; |
||||
|
import chartsStatistics from "./assets/charts"; |
||||
|
export default { |
||||
|
name: 'RailWayDay', |
||||
|
components: { |
||||
|
WgtTitle |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
created() { |
||||
|
|
||||
|
}, |
||||
|
methods: { |
||||
|
|
||||
|
}, |
||||
|
mounted() { |
||||
|
setTimeout(() => { |
||||
|
this.$nextTick(() => { |
||||
|
var myChart = echarts.init(document.getElementById('postTrendsDay')); |
||||
|
myChart.setOption(chartsStatistics); |
||||
|
}); |
||||
|
}); |
||||
|
}, |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang='scss' scoped> |
||||
|
.congestion { |
||||
|
width: 100%; |
||||
|
.board{ |
||||
|
height:346px; |
||||
|
width: 100%; |
||||
|
padding: 0px 20px; |
||||
|
background: linear-gradient(180deg, rgba(6,66,88,0.2) 0%, #064258 100%); |
||||
|
border-radius: 5px 5px 5px 5px; |
||||
|
opacity: 1; |
||||
|
border: 1px solid; |
||||
|
border-image: linear-gradient(360deg, rgba(55, 231, 255,0.3), rgba(55, 231, 255, 0)) 1 1; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
.charts { |
||||
|
height:346px; |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
</style> |
||||
|
|
||||
@ -0,0 +1,180 @@ |
|||||
|
|
||||
|
/* 数据 */ |
||||
|
let nameList = ["00:00", "02:00", "04:00", "06:00", "08:00", "10:00", "12:00", "14:00", "16:00", "18:00", "20:00", "22:00"]; // 类别
|
||||
|
let valueList = [800, 520, 650, 950, 420, 600, 450, 720, 303, 503 , 203 ,703 , 903 ]; // 人数
|
||||
|
var yList = [ "1000","800","轻度拥堵","基本畅通","畅通"] |
||||
|
/* 数据整合 */ |
||||
|
let dataList = []; |
||||
|
nameList.map((item, index) => { |
||||
|
if (index === 4) { |
||||
|
dataList.push({ |
||||
|
name: item, |
||||
|
value: valueList[index], |
||||
|
itemStyle: { |
||||
|
color: { |
||||
|
type: 'linear', |
||||
|
x: 0, |
||||
|
y: 0, |
||||
|
x2: 0, |
||||
|
y2: 1, |
||||
|
colorStops: [{ |
||||
|
offset: 0, color: '#FFB904' // 0% 处的颜色
|
||||
|
}, { |
||||
|
offset: 1, color: '#FF6969' // 100% 处的颜色
|
||||
|
}], |
||||
|
global: false // 缺省为 false
|
||||
|
}, |
||||
|
borderRadius: 6 |
||||
|
}, |
||||
|
label: { show: false } |
||||
|
}) |
||||
|
} else { |
||||
|
dataList.push({ |
||||
|
name: item, |
||||
|
value: valueList[index], |
||||
|
itemStyle:{ |
||||
|
borderRadius: 6 |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
var options = { |
||||
|
legend: { |
||||
|
// orient: 'vertical',
|
||||
|
icon: "circle", |
||||
|
itemHeight: 8, |
||||
|
itemWidth: 8, |
||||
|
top: "5%", |
||||
|
x: "right", |
||||
|
textStyle: { |
||||
|
color: "#fff", |
||||
|
}, |
||||
|
}, |
||||
|
grid: { |
||||
|
top: '20%',//上边距
|
||||
|
right: '0',//右边距
|
||||
|
left: '0',//左边距
|
||||
|
bottom: "10%",//下边距
|
||||
|
containLabel: true, |
||||
|
}, |
||||
|
xAxis: { |
||||
|
type: 'category', |
||||
|
data: nameList, |
||||
|
axisTick: { |
||||
|
show: false //隐藏X轴刻度
|
||||
|
}, |
||||
|
axisLine: { |
||||
|
lineStyle: { |
||||
|
color: "rgba(49, 217, 255, 0.8)" |
||||
|
} |
||||
|
}, |
||||
|
axisLabel: { |
||||
|
show: true, |
||||
|
color: '#B6E6FF', |
||||
|
fontSize:8, |
||||
|
fontFamily: 'Source Han Sans CN-Regular', |
||||
|
}, |
||||
|
}, |
||||
|
yAxis: [{ |
||||
|
type: 'value', |
||||
|
name: "", |
||||
|
max: 1000, |
||||
|
min:0, |
||||
|
splitNumber:5, |
||||
|
nameTextStyle: { |
||||
|
color: '#B6E6FF', |
||||
|
fontSize: 13, |
||||
|
fontFamily: 'Source Han Sans CN-Regular', |
||||
|
align: "left", |
||||
|
verticalAlign: "center", |
||||
|
}, |
||||
|
axisLabel: { |
||||
|
fontSize: 13, |
||||
|
color: '#B6E6FF', |
||||
|
fontFamily: 'HarmonyOS Sans-Regular', |
||||
|
// formatter:function(value,index){
|
||||
|
// return yList[index]
|
||||
|
// }
|
||||
|
}, |
||||
|
axisLine: { |
||||
|
show: false, |
||||
|
}, |
||||
|
axisTick: { |
||||
|
show: false |
||||
|
}, |
||||
|
splitLine: { |
||||
|
lineStyle: { |
||||
|
color: 'rgba(49, 217, 255, 0.5)', |
||||
|
} |
||||
|
}, |
||||
|
}], |
||||
|
series: [ |
||||
|
{ |
||||
|
name: '感知事件', |
||||
|
type: 'line', |
||||
|
symbol: 'circle', |
||||
|
symbolSize: 0, |
||||
|
smooth: true, |
||||
|
areaStyle: { |
||||
|
width: 4, |
||||
|
opacity: 0.25, |
||||
|
color: { |
||||
|
type: 'linear', |
||||
|
x: 0, |
||||
|
y: 0, |
||||
|
x2: 0, |
||||
|
y2: 1, |
||||
|
colorStops: [ |
||||
|
{ offset: 0.389, color: "#32BB8A99" }, |
||||
|
{ offset: 1, color: "#32BB8A00" }, |
||||
|
], |
||||
|
global: false, |
||||
|
}, |
||||
|
}, |
||||
|
// yAxisIndex: 1, // 与第二个 y 轴关联
|
||||
|
itemStyle: { |
||||
|
color: '#32BB8A', |
||||
|
}, |
||||
|
lineStyle: { |
||||
|
width:2, |
||||
|
}, |
||||
|
|
||||
|
data: [1000, 800, 520, 600, 900, 700, 700,1000, 800, 520, 600, 900, 700, 700], // 折线图的数据
|
||||
|
}, |
||||
|
{ |
||||
|
name: '交通事件', |
||||
|
type: 'line', |
||||
|
symbol: 'circle', |
||||
|
symbolSize: 0, |
||||
|
|
||||
|
// yAxisIndex: 1, // 与第二个 y 轴关联
|
||||
|
itemStyle: { |
||||
|
color: '#E2BA74', |
||||
|
}, |
||||
|
lineStyle: { |
||||
|
width: 2, |
||||
|
}, |
||||
|
smooth: true, |
||||
|
areaStyle: { |
||||
|
width: 4, |
||||
|
opacity: 0.25, |
||||
|
color: { |
||||
|
type: 'linear', |
||||
|
x: 0, |
||||
|
y: 0, |
||||
|
x2: 0, |
||||
|
y2: 1, |
||||
|
colorStops: [ |
||||
|
{ offset: 0.389, color: "##E2BA7490" }, |
||||
|
{ offset: 1, color: "##E2BA7400" }, |
||||
|
], |
||||
|
global: false, |
||||
|
}, |
||||
|
}, |
||||
|
data: [600, 700, 900, 400, 500, 800, 600,600, 700, 900, 400, 500, 800, 600], // 折线图的数据
|
||||
|
}, |
||||
|
] |
||||
|
} |
||||
|
|
||||
|
export default options; |
||||
@ -0,0 +1,134 @@ |
|||||
|
<template> |
||||
|
<div class='congestion'> |
||||
|
<WgtTitle :title="'今日发布趋势分析'"></WgtTitle> |
||||
|
<div class="board"> |
||||
|
<div class="searchPanel_1" > |
||||
|
<el-date-picker |
||||
|
size="mini" |
||||
|
v-if="year != 'quarter'" |
||||
|
class="selectRoad" |
||||
|
v-model="dateTime" |
||||
|
style="width:140px;" |
||||
|
|
||||
|
placeholder="请选择" |
||||
|
/> |
||||
|
<el-quarter-picker size="mini" class="selectRoad" style="width:180px;" v-if="year == 'quarter'" v-model="quarter" aria-placeholder="请选季度" /> |
||||
|
|
||||
|
<el-button type="primary" size="mini" class="btnSearch" icon="el-icon-search">查询</el-button> |
||||
|
<el-button class="btnReset" size="mini" icon="el-icon-refresh-left" >重置</el-button> |
||||
|
</div> |
||||
|
<div class="charts" id="postTrendsMonth"></div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import WgtTitle from "../../../../../perception/widgets/title"; |
||||
|
import * as echarts from "echarts"; |
||||
|
import chartsStatistics from "./assets/charts"; |
||||
|
export default { |
||||
|
name: 'postTrendsMonth', |
||||
|
components: { |
||||
|
WgtTitle |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
created() { |
||||
|
|
||||
|
}, |
||||
|
methods: { |
||||
|
|
||||
|
}, |
||||
|
mounted() { |
||||
|
setTimeout(() => { |
||||
|
this.$nextTick(() => { |
||||
|
var myChart = echarts.init(document.getElementById('postTrendsMonth')); |
||||
|
myChart.setOption(chartsStatistics); |
||||
|
}); |
||||
|
}); |
||||
|
}, |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang='scss' scoped> |
||||
|
.congestion { |
||||
|
width: 100%; |
||||
|
.board{ |
||||
|
position: relative; |
||||
|
height:300px; |
||||
|
width: 100%; |
||||
|
padding: 0px 20px; |
||||
|
background: linear-gradient(180deg, rgba(6,66,88,0.2) 0%, #064258 100%); |
||||
|
border-radius: 5px 5px 5px 5px; |
||||
|
opacity: 0.8; |
||||
|
border: 1px solid; |
||||
|
border-image: linear-gradient(360deg, rgba(55, 231, 255,0.3), rgba(55, 231, 255, 0)) 1 1; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
flex-direction: column; |
||||
|
|
||||
|
.searchPanel_1{ |
||||
|
position:absolute; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
height: 40px; |
||||
|
width:100%; |
||||
|
font-size: 14px; |
||||
|
margin-bottom: 10px; |
||||
|
left:20px; |
||||
|
top:2px; |
||||
|
z-index: 100; |
||||
|
div{ |
||||
|
white-space: nowrap; |
||||
|
margin-right: 4px; |
||||
|
} |
||||
|
.inputZh{ |
||||
|
width: 47px; |
||||
|
::v-deep{ |
||||
|
.el-input__inner{ |
||||
|
background-color: #064258 !important; |
||||
|
border-width: 0px !important; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.inputJl{ |
||||
|
margin-left: 5px; |
||||
|
margin-right: 10px; |
||||
|
} |
||||
|
.selectRoad{ |
||||
|
width:89px; |
||||
|
border:1px solid #00B3CC; |
||||
|
::v-deep{ |
||||
|
.el-input__inner{ |
||||
|
background-color: #064258 !important; |
||||
|
border-width: 0px !important; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.btnSearch{ |
||||
|
background: linear-gradient(180deg, #005C79 0%, #009BCC 100%); |
||||
|
margin-left: 10px; |
||||
|
border-color: transparent; |
||||
|
} |
||||
|
.btnReset{ |
||||
|
background: linear-gradient(180deg, #005C79 0%, #009BCC 100%);; |
||||
|
border-color: transparent; |
||||
|
color: white; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
} |
||||
|
} |
||||
|
.charts { |
||||
|
height:300px; |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
</style> |
||||
|
|
||||
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 2.9 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
@ -0,0 +1,256 @@ |
|||||
|
<template> |
||||
|
<div class='TrafficFlow'> |
||||
|
<section class="foot"> |
||||
|
<div class="item" v-for="(item,index) in topDatas" > |
||||
|
<div class="item-title" > |
||||
|
<span> {{ item.text }} <span class="num">{{ item.textNum }}</span>{{ item.textEnd }}</span> |
||||
|
</div> |
||||
|
<div class="item-body" > |
||||
|
<div class="icon-left" > |
||||
|
<img :src="item.icon" /> |
||||
|
</div> |
||||
|
<div class="text-right" > |
||||
|
<div class="topText" > |
||||
|
已处理 <span class="num">{{ item.reviewed }}</span> 起 |
||||
|
</div> |
||||
|
<div class="bottomText" > |
||||
|
处理中 <span class="num" >{{ item.noReviewed }}</span> 起 |
||||
|
</div> |
||||
|
<div class="bottomText" > |
||||
|
待处理 <span class="num" >{{ item.noReviewed }}</span> 起 |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</section> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
|
||||
|
export default { |
||||
|
name: 'publicService', |
||||
|
components: { |
||||
|
|
||||
|
}, |
||||
|
data(){ |
||||
|
return { |
||||
|
activeName:"first", |
||||
|
topDatas:[ { |
||||
|
text:"其他事件", |
||||
|
textEnd:"起", |
||||
|
textNum:9, |
||||
|
icon:require("./assets/其他事件.png"), |
||||
|
reviewed:4, |
||||
|
noReviewed:5 |
||||
|
},{ |
||||
|
text:"路障清除", |
||||
|
textEnd:"起", |
||||
|
textNum:9, |
||||
|
icon:require("./assets/路障清除.png"), |
||||
|
reviewed:4, |
||||
|
noReviewed:5 |
||||
|
},{ |
||||
|
text:"车辆故障", |
||||
|
textEnd:"起", |
||||
|
textNum:9, |
||||
|
icon:require("./assets/车辆故障.png"), |
||||
|
reviewed:4, |
||||
|
noReviewed:5 |
||||
|
},{ |
||||
|
text:"服务区异常", |
||||
|
textEnd:"起", |
||||
|
textNum:9, |
||||
|
icon:require("./assets/服务区异常.png"), |
||||
|
reviewed:4, |
||||
|
noReviewed:5 |
||||
|
},{ |
||||
|
text:"交通管制", |
||||
|
textEnd:"起", |
||||
|
textNum:9, |
||||
|
icon:require("./assets/交通管制.png"), |
||||
|
reviewed:4, |
||||
|
noReviewed:5 |
||||
|
},{ |
||||
|
text:"交通拥堵", |
||||
|
textEnd:"起", |
||||
|
textNum:9, |
||||
|
icon:require("./assets/交通拥堵.png"), |
||||
|
reviewed:4, |
||||
|
noReviewed:5 |
||||
|
},{ |
||||
|
text:"施工建设", |
||||
|
textEnd:"起", |
||||
|
textNum:9, |
||||
|
icon:require("./assets/施工建设.png"), |
||||
|
reviewed:4, |
||||
|
noReviewed:5 |
||||
|
},{ |
||||
|
text:"异常天气", |
||||
|
textEnd:"起", |
||||
|
textNum:9, |
||||
|
icon:require("./assets/异常天气.png"), |
||||
|
reviewed:4, |
||||
|
noReviewed:5 |
||||
|
},{ |
||||
|
text:"交通事故", |
||||
|
textEnd:"起", |
||||
|
textNum:9, |
||||
|
icon:require("./assets/交通事故.png"), |
||||
|
reviewed:4, |
||||
|
noReviewed:5 |
||||
|
} |
||||
|
|
||||
|
] |
||||
|
} |
||||
|
}, |
||||
|
methods:{ |
||||
|
changeTabs(){ |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang='scss' scoped> |
||||
|
|
||||
|
::v-deep .el-tabs__item{ |
||||
|
display: inline-flex; |
||||
|
justify-content: center; |
||||
|
font-size: 16px; |
||||
|
font-family: PingFang SC, PingFang SC; |
||||
|
font-weight: 500; |
||||
|
color: #FFFFFF; |
||||
|
min-width:128px; |
||||
|
position: relative; |
||||
|
left:10px; |
||||
|
} |
||||
|
|
||||
|
::v-deep .el-tabs__active-bar { |
||||
|
min-width:128px; |
||||
|
} |
||||
|
|
||||
|
::v-deep .el-tabs__nav-wrap::after { |
||||
|
background-color: #133242; |
||||
|
opacity: 0.1; |
||||
|
} |
||||
|
|
||||
|
.footTabs { |
||||
|
display: inline; |
||||
|
width:99%; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.TrafficFlow { |
||||
|
width: 100%; |
||||
|
height: 182px; |
||||
|
display: inline-flex; |
||||
|
position: relative; |
||||
|
z-index: 6; |
||||
|
color: white; |
||||
|
background: linear-gradient(180deg, rgba(6,66,88,0) 0%, #06425804 93%); |
||||
|
border-radius: 0px 0px 0px 0px; |
||||
|
|
||||
|
.foot { |
||||
|
display: inline-flex; |
||||
|
flex-direction: row; |
||||
|
width:100%; |
||||
|
height:100%; |
||||
|
|
||||
|
.item { |
||||
|
position: relative; |
||||
|
display: inline-flex; |
||||
|
width: calc(100% / 9); |
||||
|
height:100%; |
||||
|
flex-direction: column; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
|
||||
|
.item-title { |
||||
|
position: relative; |
||||
|
display: inline-flex; |
||||
|
width: 162px; |
||||
|
height:35px; |
||||
|
flex-direction: row; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
background: linear-gradient(180deg, rgba(3,60,82,0) 0%, #033C52 100%); |
||||
|
border-radius: 4px 4px 4px 4px; |
||||
|
font-size: 16px; |
||||
|
font-family: PingFang SC, PingFang SC; |
||||
|
font-weight: 500; |
||||
|
color: #FFFFFF; |
||||
|
|
||||
|
span.num { |
||||
|
font-size: 22px; |
||||
|
font-family: PangMenZhengDao, PangMenZhengDao; |
||||
|
font-weight: 400; |
||||
|
color: #E2B066; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.item-body { |
||||
|
position: relative; |
||||
|
display: inline-flex; |
||||
|
width: 162px; |
||||
|
height:100%; |
||||
|
flex-direction: row; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
font-size: 14px; |
||||
|
font-family: PingFang SC, PingFang SC; |
||||
|
font-weight: 400; |
||||
|
color: #FFFFFF; |
||||
|
margin-top:0px; |
||||
|
|
||||
|
.text-right { |
||||
|
display: inline-flex; |
||||
|
flex-direction: column; |
||||
|
align-items: space-between; |
||||
|
justify-content: space-between; |
||||
|
|
||||
|
>div { |
||||
|
margin:5px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
img { |
||||
|
width:47px; |
||||
|
height:47px; |
||||
|
margin:0 10px; |
||||
|
margin-right:20px; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
span.num { |
||||
|
font-size: 14px; |
||||
|
font-family: PangMenZhengDao, PangMenZhengDao; |
||||
|
font-weight: 400; |
||||
|
color: #E2B066; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.item::after { |
||||
|
content: ""; |
||||
|
position: absolute; |
||||
|
display: inline-flex; |
||||
|
top:20px; |
||||
|
right:0px; |
||||
|
width: 1px; |
||||
|
height: 116px; |
||||
|
background: linear-gradient(90deg, rgba(8, 135, 182, 0.2), rgba(0, 100, 137, 1), rgba(3, 60, 81, 0.2)); |
||||
|
opacity: 1; |
||||
|
flex-direction: row; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
} |
||||
|
</style> |
||||
|
|
||||
@ -0,0 +1,178 @@ |
|||||
|
<template> |
||||
|
<div class='TrafficFlow'> |
||||
|
<section class="foot"> |
||||
|
<el-tabs class="footTabs" v-model="activeName" @tab-click="changeTabs"> |
||||
|
<el-tab-pane label="公众服务统计分析" name="first"> |
||||
|
<div class="header-shot" > |
||||
|
<TopComponent /> |
||||
|
</div> |
||||
|
<div class="content" > |
||||
|
<ChannelAnalytics class="content-l" /> |
||||
|
<EventTypeAnalysis class="content-l" /> |
||||
|
<PostTrendsDay class="content-r" /> |
||||
|
<AuditAnalytics class="content-r" /> |
||||
|
</div> |
||||
|
<div class="content" > |
||||
|
<PostTrendsMonth class="content-mi" /> |
||||
|
<NucleusThrough class="content-mi" /> |
||||
|
</div> |
||||
|
</el-tab-pane> |
||||
|
<el-tab-pane label="公众服务统计查询" name="second"> |
||||
|
|
||||
|
</el-tab-pane> |
||||
|
</el-tabs> |
||||
|
</section> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import TopComponent from './components/topComponent'; |
||||
|
import ChannelAnalytics from './components/channelAnalytics'; |
||||
|
import EventTypeAnalysis from './components/eventTypeAnalysis'; |
||||
|
import AuditAnalytics from './components/auditAnalytics'; |
||||
|
import PostTrendsDay from './components/postTrendsDay'; |
||||
|
import PostTrendsMonth from './components/postTrendsMonth'; |
||||
|
import NucleusThrough from './components/nucleusThrough'; |
||||
|
|
||||
|
export default { |
||||
|
name: 'publicService', |
||||
|
components: { |
||||
|
TopComponent, |
||||
|
ChannelAnalytics, |
||||
|
EventTypeAnalysis, |
||||
|
AuditAnalytics, |
||||
|
PostTrendsDay, |
||||
|
PostTrendsMonth, |
||||
|
NucleusThrough |
||||
|
}, |
||||
|
data(){ |
||||
|
return { |
||||
|
activeName:"first" |
||||
|
} |
||||
|
}, |
||||
|
methods:{ |
||||
|
changeTabs(){ |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang='scss' scoped> |
||||
|
|
||||
|
::v-deep .el-tabs__item{ |
||||
|
display: inline-flex; |
||||
|
justify-content: center; |
||||
|
font-size: 16px; |
||||
|
font-family: PingFang SC, PingFang SC; |
||||
|
font-weight: 500; |
||||
|
color: #FFFFFF; |
||||
|
min-width:128px; |
||||
|
position: relative; |
||||
|
left:10px; |
||||
|
} |
||||
|
|
||||
|
::v-deep .el-tabs__active-bar { |
||||
|
min-width:128px; |
||||
|
} |
||||
|
|
||||
|
::v-deep .el-tabs__nav-wrap::after { |
||||
|
background-color: #133242; |
||||
|
opacity: 0.1; |
||||
|
} |
||||
|
|
||||
|
.footTabs { |
||||
|
display: inline; |
||||
|
width:100%; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.TrafficFlow { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
position: relative; |
||||
|
z-index: 6; |
||||
|
color: white; |
||||
|
|
||||
|
.header-shot{ |
||||
|
width: 98%; |
||||
|
margin: auto; |
||||
|
margin-top: 15px; |
||||
|
height:160px; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.content { |
||||
|
width: 100%; |
||||
|
margin: auto; |
||||
|
display: flex; |
||||
|
flex: 1; |
||||
|
pointer-events: none; |
||||
|
margin-top: 19px; |
||||
|
|
||||
|
>div { |
||||
|
pointer-events: auto; |
||||
|
} |
||||
|
|
||||
|
.content-l { |
||||
|
width: calc(20%); |
||||
|
|
||||
|
margin-right:20px; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.content-mi { |
||||
|
width: calc(50%); |
||||
|
|
||||
|
margin-right:20px; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.content-m { |
||||
|
display: inline-flex; |
||||
|
flex-direction: column; |
||||
|
width: calc(100% / 4 ); |
||||
|
margin-right:20px; |
||||
|
|
||||
|
.content-m-t { |
||||
|
width:100%; |
||||
|
height:240px; |
||||
|
margin-bottom: 20px; |
||||
|
} |
||||
|
} |
||||
|
.content-r { |
||||
|
width:29%; |
||||
|
margin-right:20px; |
||||
|
} |
||||
|
} |
||||
|
.foot{ |
||||
|
width: 98%; |
||||
|
margin: auto; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
flex: 1; |
||||
|
pointer-events: none; |
||||
|
margin-top: 8px; |
||||
|
>div { |
||||
|
pointer-events: auto; |
||||
|
} |
||||
|
|
||||
|
.foot-w { |
||||
|
width:100%; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.foot-l { |
||||
|
width: 726px; |
||||
|
} |
||||
|
.foot-m { |
||||
|
width: 613px; |
||||
|
} |
||||
|
.foot-r { |
||||
|
width: 493px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
|
|
||||
Loading…
Reference in new issue