刘朋
1 year ago
48 changed files with 3170 additions and 2313 deletions
|
After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 2.3 MiB |
|
After Width: | Height: | Size: 7.2 KiB |
|
After Width: | Height: | Size: 334 B |
|
After Width: | Height: | Size: 425 B |
|
Before Width: | Height: | Size: 1018 KiB |
|
After Width: | Height: | Size: 136 KiB |
@ -0,0 +1,43 @@ |
|||
export const searchFormList = [ |
|||
{ |
|||
label: "路段名称:", |
|||
key: "ld", |
|||
// required: true,
|
|||
type: "select", |
|||
options: { |
|||
options: [], |
|||
}, |
|||
}, |
|||
{ |
|||
label: "指标名称:", |
|||
key: "type", |
|||
// required: true,
|
|||
type: "select", |
|||
options: { |
|||
options: [ |
|||
{ |
|||
value: "1", |
|||
label: "拥挤度", |
|||
}, |
|||
{ |
|||
value: "2", |
|||
label: "饱和度", |
|||
}, |
|||
{ |
|||
value: "3", |
|||
label: "交通组成特征指数", |
|||
}, |
|||
], |
|||
}, |
|||
}, |
|||
{ |
|||
label: "时间范围:", |
|||
key: "time", |
|||
// required: true,
|
|||
type: "datePicker", |
|||
options: { |
|||
format: "yyyy-MM-dd", |
|||
type: "daterange", |
|||
}, |
|||
}, |
|||
]; |
|||
@ -1,391 +1,399 @@ |
|||
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; //角度，用来做简单的动画效果的
|
|||
{ value: 50, name: "情报板发布" }, |
|||
{ value: 20, name: "微博发布" }, |
|||
{ value: 30, 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++) { |
|||
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, |
|||
}, |
|||
}); |
|||
|
|||
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); |
|||
} |
|||
|
|||
data3.push({ |
|||
value: res[i].value, |
|||
name: res[i].name, |
|||
itemStyle: { |
|||
opacity: 0.1, |
|||
var options = { |
|||
color: ["#5CC5FF", "#54EFD5", "#FD9666", "#5C8CFE", "#51D5AD"], |
|||
title: [ |
|||
{ |
|||
text: "999", |
|||
top: "27%", |
|||
textAlign: "center", |
|||
left: "49%", |
|||
textStyle: { |
|||
color: "#ffffff", |
|||
fontSize: 30, |
|||
fontFamily: "PangMenZhengDao", |
|||
}, |
|||
}) |
|||
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: '27%', |
|||
textAlign: 'center', |
|||
left: '49%', |
|||
textStyle: { |
|||
color: '#ffffff', |
|||
fontSize: 30, |
|||
fontFamily: 'PangMenZhengDao', |
|||
}, |
|||
}, |
|||
{ |
|||
text: "总数", |
|||
top: "38%", |
|||
textAlign: "center", |
|||
left: "49%", |
|||
textStyle: { |
|||
color: "rgba(242, 252, 253, 0.84)", |
|||
fontSize: 14, |
|||
fontWeight: 400, |
|||
}, |
|||
{ |
|||
text: '总数', |
|||
top: '38%', |
|||
textAlign: 'center', |
|||
left: '49%', |
|||
textStyle: { |
|||
color: 'rgba(242, 252, 253, 0.84)', |
|||
}, |
|||
], |
|||
grid: { |
|||
top: "3%", |
|||
left: "6%", |
|||
right: "6%", |
|||
bottom: "3%", |
|||
containLabel: true, |
|||
}, |
|||
tooltip: { |
|||
trigger: "item", |
|||
// formatter: '{b} : {c}:{d}'
|
|||
}, |
|||
legend: { |
|||
orient: "vertical", |
|||
height: "80px", |
|||
// left: "10%",
|
|||
top: "68%", |
|||
itemWidth: 10, |
|||
itemHeight: 10, |
|||
icon: "circle", |
|||
textStyle: { |
|||
color: "#ffffff", |
|||
fontSize: 14, |
|||
lineHeight: 22, |
|||
rich: { |
|||
text: { |
|||
width: 80, |
|||
marginLeft: 32, |
|||
fontSize: 14, |
|||
}, |
|||
number: { |
|||
fontSize: 14, |
|||
color: "#37E7FF", |
|||
marginLeft: 32, |
|||
fontWeight: "bold", |
|||
}, |
|||
unit: { |
|||
fontSize: 14, |
|||
fontWeight: 400, |
|||
}, |
|||
}, |
|||
], |
|||
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; |
|||
} |
|||
}, |
|||
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}%}`;; |
|||
}, |
|||
} |
|||
var percert = total == 0 ? 0 : ((tarValue / total) * 100).toFixed(2); |
|||
const arr = name + " " + tarValue; |
|||
return `{text|${name}} {number|${percert}%}`; |
|||
}, |
|||
pageIconColor: "#fff", |
|||
pageIconSize: 10, |
|||
pageTextStyle: { |
|||
color: "#fff", |
|||
}, |
|||
series: [ |
|||
/** 饼图上刻度 */ |
|||
type: "scroll", |
|||
pageButtonPosition: "end", |
|||
}, |
|||
series: [ |
|||
/** 饼图上刻度 */ |
|||
{ |
|||
type: 'gauge', |
|||
center: ['50%', '35%'], |
|||
radius: '40%', // 错位调整此处
|
|||
type: "gauge", |
|||
center: ["50%", "35%"], |
|||
radius: "40%", // 错位调整此处
|
|||
startAngle: 0, |
|||
endAngle: 360, |
|||
splitNumber: 52, |
|||
axisLine: { show: false }, |
|||
splitLine: { |
|||
splitLine: { |
|||
// length: 39,
|
|||
length: '2', |
|||
length: "2", |
|||
lineStyle: { |
|||
width: 5, |
|||
color: '#5CC5FF' |
|||
} |
|||
color: "#5CC5FF", |
|||
}, |
|||
}, |
|||
axisTick: { show: false }, |
|||
axisLabel: { show: false } |
|||
axisLabel: { show: false }, |
|||
}, |
|||
/** 绘制外部圆弧-2-开始圆点 <left-top> */ |
|||
/** 绘制外部圆弧-2-开始圆点 <left-top> */ |
|||
{ |
|||
type: 'custom', |
|||
coordinateSystem: 'none', |
|||
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; |
|||
let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.5; |
|||
return { |
|||
type: 'circle', |
|||
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 |
|||
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' |
|||
fill: "#5BC4FF", |
|||
stroke: "#5BC4FF", |
|||
}, |
|||
silent: true |
|||
} |
|||
silent: true, |
|||
}; |
|||
}, |
|||
data: [0] |
|||
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) => { |
|||
return { |
|||
type: "arc", |
|||
shape: { |
|||
cx: api.getWidth() / 2, |
|||
cy: api.getHeight() / 2 - 59, |
|||
r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.5, |
|||
startAngle: ((350 + -angle) * Math.PI) / 180, |
|||
endAngle: ((120 + -angle) * Math.PI) / 180, |
|||
}, |
|||
style: { |
|||
fill: "transparent", |
|||
stroke: "#5BC4FF66", |
|||
lineWidth: 2.6, |
|||
}, |
|||
silent: true, |
|||
}; |
|||
}, |
|||
{ |
|||
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] |
|||
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.5; |
|||
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, |
|||
}; |
|||
}, |
|||
{ |
|||
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) => { |
|||
return { |
|||
type: "arc", |
|||
shape: { |
|||
cx: api.getWidth() / 2, |
|||
cy: api.getHeight() / 2 - 59, |
|||
r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.5, |
|||
startAngle: ((150 + -angle) * Math.PI) / 180, |
|||
endAngle: ((-30 + -angle) * Math.PI) / 180, |
|||
}, |
|||
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] |
|||
style: { |
|||
fill: "transparent", |
|||
stroke: "#5BC4FF66", |
|||
lineWidth: 2.6, |
|||
}, |
|||
silent: true, |
|||
}; |
|||
}, |
|||
{ |
|||
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] |
|||
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, |
|||
}; |
|||
}, |
|||
{ |
|||
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] |
|||
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, |
|||
}; |
|||
}, |
|||
{ |
|||
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] |
|||
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, |
|||
}; |
|||
}, |
|||
{ |
|||
type: 'pie', |
|||
radius: ['45%', '39%'], |
|||
center: ['50%', '35%'], |
|||
z: 10, |
|||
label: { |
|||
show: false, |
|||
position: 'center', |
|||
formatter: (params) => { |
|||
return params.name + "\r\n" + params.value |
|||
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, |
|||
}, |
|||
rich: { |
|||
total: { |
|||
fontSize: 16, |
|||
color: '#04F5FE', |
|||
}, |
|||
efficiency: { |
|||
fontSize: 12, |
|||
color: '#00FD6D', |
|||
}, |
|||
style: { |
|||
fill: "transparent", |
|||
stroke: "#5BC4FF66", |
|||
lineWidth: 2.6, |
|||
}, |
|||
color: '#FFFFFF', |
|||
fontSize: 12, |
|||
lineHeight: 16, |
|||
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; |
|||
}, |
|||
data: data1, |
|||
labelLine: { |
|||
show: false, |
|||
rich: { |
|||
total: { |
|||
fontSize: 16, |
|||
color: "#04F5FE", |
|||
}, |
|||
efficiency: { |
|||
fontSize: 12, |
|||
color: "#00FD6D", |
|||
}, |
|||
}, |
|||
itemStyle: { |
|||
normal: { |
|||
borderWidth: 6, |
|||
shadowBlur: 10, |
|||
borderRadius: 50, // 圆角
|
|||
} |
|||
} |
|||
color: "#FFFFFF", |
|||
fontSize: 12, |
|||
lineHeight: 16, |
|||
}, |
|||
{ |
|||
type: 'pie', |
|||
radius: ['25%', '39%'], |
|||
center: ['50%', '35%'], |
|||
label: { |
|||
show: false, |
|||
data: data1, |
|||
labelLine: { |
|||
show: false, |
|||
}, |
|||
itemStyle: { |
|||
normal: { |
|||
borderRadius: "5", |
|||
borderWidth: 4, |
|||
borderType: "solid", |
|||
borderColor: "#0C2D3A", |
|||
}, |
|||
data: data2, |
|||
labelLine: { |
|||
show: false, |
|||
}, |
|||
}, |
|||
{ |
|||
type: "pie", |
|||
radius: ["25%", "39%"], |
|||
center: ["50%", "35%"], |
|||
label: { |
|||
show: false, |
|||
}, |
|||
data: data2, |
|||
labelLine: { |
|||
show: false, |
|||
}, |
|||
itemStyle: { |
|||
normal: { |
|||
borderRadius: "5", |
|||
borderWidth: 4, |
|||
borderType: "solid", |
|||
borderColor: "#0C2D3A", |
|||
}, |
|||
itemStyle: { |
|||
normal: { |
|||
borderWidth: 6, |
|||
shadowBlur: 10, |
|||
borderRadius: 0, // 圆角
|
|||
} |
|||
} |
|||
}, |
|||
], |
|||
|
|||
}; |
|||
}, |
|||
], |
|||
}; |
|||
|
|||
export default options |
|||
export default options; |
|||
|
|||
@ -1,392 +1,406 @@ |
|||
var res = [ |
|||
{ value: 20, name: '情报板发布' }, |
|||
{ value: 1, name: '' }, |
|||
{ value: 20, name: '微博发布' }, |
|||
{ value: 1, name: '' }, |
|||
{ value: 20, name: '服务网站' }, |
|||
{ value: 1, name: '' }, |
|||
{ value: 20, name: '短信发布' }, |
|||
{ value: 1, name: '' }, |
|||
{ value: 20, name: '微信发布' }, |
|||
{ value: 1, name: '' }, |
|||
]; |
|||
// var res = this.evaluatedCountList;
|
|||
var data1 = [], data2 = [], data3 = [], legendData = []; |
|||
var curIndex = 0; |
|||
var index = 0; |
|||
{ value: 20, name: "情报板发布" }, |
|||
{ value: 20, name: "微博发布" }, |
|||
{ value: 20, name: "服务网站" }, |
|||
{ value: 20, name: "短信发布" }, |
|||
{ value: 20, name: "微信发布" }, |
|||
]; |
|||
// 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, |
|||
}, |
|||
}) |
|||
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, |
|||
data3.push({ |
|||
value: res[i].value, |
|||
name: res[i].name, |
|||
itemStyle: { |
|||
opacity: 0.1, |
|||
}, |
|||
}); |
|||
if (res[i].name != "") legendData.push(res[i].name); |
|||
} |
|||
let angle = 0; //角度，用来做简单的动画效果的
|
|||
var options = { |
|||
color: ["#68F4DD", "#FFDD69", "#3CC3F0", "#5C8CFE", "#51D5AD"], |
|||
title: [ |
|||
{ |
|||
text: "999", |
|||
top: "27%", |
|||
textAlign: "center", |
|||
left: "49%", |
|||
textStyle: { |
|||
color: "#ffffff", |
|||
fontSize: 30, |
|||
fontFamily: "PangMenZhengDao", |
|||
}, |
|||
}) |
|||
if ( res[i].name != "" ) |
|||
legendData.push(res[i].name); |
|||
} |
|||
let angle = 0; //角度，用来做简单的动画效果的
|
|||
var options = { |
|||
color: ['#68F4DD', 'transparent', '#FFDD69', 'transparent', '#3CC3F0', 'transparent', '#5C8CFE', 'transparent', '#51D5AD', 'transparent'], |
|||
title: [ |
|||
{ |
|||
text:'999', |
|||
top: '27%', |
|||
textAlign: 'center', |
|||
left: '49%', |
|||
textStyle: { |
|||
color: '#ffffff', |
|||
fontSize: 30, |
|||
fontFamily: 'PangMenZhengDao', |
|||
}, |
|||
}, |
|||
{ |
|||
text: "总数", |
|||
top: "38%", |
|||
textAlign: "center", |
|||
left: "49%", |
|||
textStyle: { |
|||
color: "rgba(242, 252, 253, 0.84)", |
|||
fontSize: 14, |
|||
fontWeight: 400, |
|||
}, |
|||
{ |
|||
text: '总数', |
|||
top: '38%', |
|||
textAlign: 'center', |
|||
left: '49%', |
|||
textStyle: { |
|||
color: 'rgba(242, 252, 253, 0.84)', |
|||
}, |
|||
], |
|||
grid: { |
|||
top: "3%", |
|||
left: "6%", |
|||
right: "6%", |
|||
bottom: "3%", |
|||
containLabel: true, |
|||
}, |
|||
tooltip: { |
|||
trigger: "item", |
|||
// formatter: "{b} : {c}:{d}",
|
|||
}, |
|||
legend: { |
|||
orient: "vertical", |
|||
// width: "350px",
|
|||
height: "80px", |
|||
// left: "10%",
|
|||
top: "68%", |
|||
itemWidth: 10, |
|||
itemHeight: 10, |
|||
icon: "circle", |
|||
textStyle: { |
|||
color: "#ffffff", |
|||
fontSize: 12, |
|||
lineHeight: 22, |
|||
rich: { |
|||
text: { |
|||
width: 80, |
|||
marginLeft: 32, |
|||
fontSize: 14, |
|||
}, |
|||
number: { |
|||
fontSize: 14, |
|||
color: "#37E7FF", |
|||
marginLeft: 32, |
|||
fontWeight: "bold", |
|||
}, |
|||
unit: { |
|||
fontSize: 14, |
|||
fontWeight: 400, |
|||
}, |
|||
}, |
|||
], |
|||
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) { |
|||
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; |
|||
} |
|||
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}%}`;; |
|||
}, |
|||
} |
|||
var percert = total == 0 ? 0 : ((tarValue / total) * 100).toFixed(2); |
|||
const arr = name + " " + tarValue; |
|||
return `{text|${name}} {number|${percert}%}`; |
|||
}, |
|||
pageIconColor: "#fff", |
|||
pageIconSize: 10, |
|||
pageTextStyle: { |
|||
color: "#fff", |
|||
}, |
|||
series: [ |
|||
/** 饼图上刻度 */ |
|||
type: "scroll", |
|||
pageButtonPosition: "end", |
|||
}, |
|||
series: [ |
|||
/** 饼图上刻度 */ |
|||
{ |
|||
type: 'gauge', |
|||
center: ['50%', '35%'], |
|||
radius: '46%', // 错位调整此处
|
|||
type: "gauge", |
|||
center: ["50%", "35%"], |
|||
radius: "46%", // 错位调整此处
|
|||
startAngle: 0, |
|||
endAngle: 360, |
|||
splitNumber: 52, |
|||
axisLine: { show: false }, |
|||
splitLine: { |
|||
splitLine: { |
|||
// length: 39,
|
|||
length: '2', |
|||
length: "2", |
|||
lineStyle: { |
|||
width: 5, |
|||
color: '#5CC5FF' |
|||
} |
|||
color: "#5CC5FF", |
|||
}, |
|||
}, |
|||
axisTick: { show: false }, |
|||
axisLabel: { show: false } |
|||
axisLabel: { show: false }, |
|||
}, |
|||
/** 绘制外部圆弧-2-开始圆点 <left-top> */ |
|||
/** 绘制外部圆弧-2-开始圆点 <left-top> */ |
|||
{ |
|||
type: 'custom', |
|||
coordinateSystem: 'none', |
|||
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; |
|||
let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.5; |
|||
return { |
|||
type: 'circle', |
|||
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 |
|||
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' |
|||
fill: "#5BC4FF", |
|||
stroke: "#5BC4FF", |
|||
}, |
|||
silent: true |
|||
} |
|||
silent: true, |
|||
}; |
|||
}, |
|||
data: [0] |
|||
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) => { |
|||
return { |
|||
type: "arc", |
|||
shape: { |
|||
cx: api.getWidth() / 2, |
|||
cy: api.getHeight() / 2 - 59, |
|||
r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.5, |
|||
startAngle: ((350 + -angle) * Math.PI) / 180, |
|||
endAngle: ((120 + -angle) * Math.PI) / 180, |
|||
}, |
|||
style: { |
|||
fill: "transparent", |
|||
stroke: "#5BC4FF66", |
|||
lineWidth: 2.6, |
|||
}, |
|||
silent: true, |
|||
}; |
|||
}, |
|||
{ |
|||
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] |
|||
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.5; |
|||
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, |
|||
}; |
|||
}, |
|||
{ |
|||
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) => { |
|||
return { |
|||
type: "arc", |
|||
shape: { |
|||
cx: api.getWidth() / 2, |
|||
cy: api.getHeight() / 2 - 59, |
|||
r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.5, |
|||
startAngle: ((150 + -angle) * Math.PI) / 180, |
|||
endAngle: ((-30 + -angle) * Math.PI) / 180, |
|||
}, |
|||
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] |
|||
style: { |
|||
fill: "transparent", |
|||
stroke: "#5BC4FF66", |
|||
lineWidth: 2.6, |
|||
}, |
|||
silent: true, |
|||
}; |
|||
}, |
|||
{ |
|||
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] |
|||
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, |
|||
}; |
|||
}, |
|||
{ |
|||
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] |
|||
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, |
|||
}; |
|||
}, |
|||
{ |
|||
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] |
|||
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, |
|||
}; |
|||
}, |
|||
{ |
|||
type: 'pie', |
|||
radius: ['45%', '40%'], |
|||
center: ['50%', '35%'], |
|||
z: 10, |
|||
label: { |
|||
show: false, |
|||
position: 'center', |
|||
formatter: (params) => { |
|||
return params.name + "\r\n" + params.value |
|||
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, |
|||
}, |
|||
rich: { |
|||
total: { |
|||
fontSize: 16, |
|||
color: '#04F5FE', |
|||
}, |
|||
efficiency: { |
|||
fontSize: 12, |
|||
color: '#00FD6D', |
|||
}, |
|||
style: { |
|||
fill: "transparent", |
|||
stroke: "#5BC4FF66", |
|||
lineWidth: 2.6, |
|||
}, |
|||
color: '#FFFFFF', |
|||
fontSize: 12, |
|||
lineHeight: 16, |
|||
silent: true, |
|||
}; |
|||
}, |
|||
data: [0], |
|||
}, |
|||
{ |
|||
type: "pie", |
|||
radius: ["45%", "40%"], |
|||
center: ["50%", "35%"], |
|||
|
|||
z: 10, |
|||
label: { |
|||
show: false, |
|||
position: "center", |
|||
formatter: (params) => { |
|||
return params.name + "\r\n" + params.value; |
|||
}, |
|||
data: data1, |
|||
labelLine: { |
|||
show: false, |
|||
rich: { |
|||
total: { |
|||
fontSize: 16, |
|||
color: "#04F5FE", |
|||
}, |
|||
efficiency: { |
|||
fontSize: 12, |
|||
color: "#00FD6D", |
|||
}, |
|||
}, |
|||
itemStyle: { |
|||
normal: { |
|||
borderWidth: 6, |
|||
shadowBlur: 10, |
|||
borderRadius: 50, // 圆角
|
|||
} |
|||
} |
|||
color: "#FFFFFF", |
|||
fontSize: 12, |
|||
lineHeight: 16, |
|||
}, |
|||
{ |
|||
type: 'pie', |
|||
radius: ['29%', '40%'], |
|||
center: ['50%', '35%'], |
|||
label: { |
|||
show: false, |
|||
data: data1, |
|||
labelLine: { |
|||
show: false, |
|||
}, |
|||
itemStyle: { |
|||
// normal: {
|
|||
// borderWidth: 4,
|
|||
// shadowBlur: 10,
|
|||
// borderRadius: 50, // 圆角
|
|||
// },
|
|||
normal: { |
|||
borderRadius: "5", |
|||
borderWidth: 4, |
|||
borderType: "solid", |
|||
borderColor: "#0C2D3A", |
|||
}, |
|||
data: data2, |
|||
labelLine: { |
|||
show: false, |
|||
}, |
|||
}, |
|||
{ |
|||
type: "pie", |
|||
radius: ["29%", "40%"], |
|||
center: ["50%", "35%"], |
|||
label: { |
|||
show: false, |
|||
}, |
|||
data: data2, |
|||
labelLine: { |
|||
show: false, |
|||
}, |
|||
itemStyle: { |
|||
normal: { |
|||
borderRadius: "5", |
|||
borderWidth: 8, |
|||
borderType: "solid", |
|||
borderColor: "#0C2D3A", |
|||
}, |
|||
itemStyle: { |
|||
normal: { |
|||
borderWidth: 6, |
|||
shadowBlur: 10, |
|||
borderRadius: 0, // 圆角
|
|||
} |
|||
} |
|||
}, |
|||
], |
|||
|
|||
}; |
|||
}, |
|||
], |
|||
}; |
|||
|
|||
export default options |
|||
export default options; |
|||
|
|||
@ -1,271 +1,302 @@ |
|||
|
|||
/* 数据 */ |
|||
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 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
|
|||
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% 处的颜色
|
|||
}, |
|||
borderRadius: 6 |
|||
}, |
|||
label: { show: false } |
|||
}) |
|||
} else { |
|||
dataList.push({ |
|||
name: item, |
|||
value: valueList[index], |
|||
itemStyle:{ |
|||
borderRadius: 6 |
|||
} |
|||
}) |
|||
} |
|||
}) |
|||
], |
|||
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", |
|||
}, |
|||
tooltip: { |
|||
show: true, |
|||
trigger: "axis", |
|||
}, |
|||
legend: { |
|||
// orient: 'vertical',
|
|||
icon: "circle", |
|||
itemHeight: 8, |
|||
itemWidth: 8, |
|||
top: "20px", |
|||
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', |
|||
}, |
|||
grid: { |
|||
top: "75px", //上边距
|
|||
right: "0", //右边距
|
|||
left: "0", //左边距
|
|||
bottom: "20px", //下边距
|
|||
containLabel: true, |
|||
}, |
|||
xAxis: { |
|||
type: "category", |
|||
data: nameList, |
|||
axisTick: { |
|||
show: false, //隐藏X轴刻度
|
|||
}, |
|||
axisLine: { |
|||
lineStyle: { |
|||
color: "rgba(49, 217, 255, 0.8)", |
|||
}, |
|||
}, |
|||
yAxis: [{ |
|||
type: 'value', |
|||
name: "", |
|||
max: 1200, |
|||
min:0, |
|||
splitNumber:5, |
|||
}, |
|||
axisLabel: { |
|||
show: true, |
|||
color: "#fff", |
|||
fontSize: 10, |
|||
}, |
|||
}, |
|||
yAxis: [ |
|||
{ |
|||
type: "value", |
|||
name: "(起)", |
|||
nameTextStyle: { |
|||
color: '#B6E6FF', |
|||
fontSize: 13, |
|||
fontFamily: 'Source Han Sans CN-Regular', |
|||
align: "left", |
|||
verticalAlign: "center", |
|||
color: "#fff", |
|||
fontSize: 10, |
|||
align: "right", |
|||
verticalAlign: "center", |
|||
}, |
|||
axisLabel: { |
|||
fontSize: 13, |
|||
color: '#B6E6FF', |
|||
fontFamily: 'HarmonyOS Sans-Regular', |
|||
// formatter:function(value,index){
|
|||
// return yList[index]
|
|||
// }
|
|||
fontSize: 10, |
|||
color: "#fff", |
|||
// formatter:function(value,index){
|
|||
// return yList[index]
|
|||
// }
|
|||
}, |
|||
axisLine: { |
|||
show: false, |
|||
show: false, |
|||
}, |
|||
axisTick: { |
|||
show: false |
|||
show: false, |
|||
}, |
|||
splitLine: { |
|||
lineStyle: { |
|||
color: 'rgba(49, 217, 255, 0.5)', |
|||
} |
|||
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: "#32BB8A90" }, |
|||
{ offset: 1, color: "#32BB8A00" }, |
|||
], |
|||
global: false, |
|||
}, |
|||
}, |
|||
// yAxisIndex: 1, // 与第二个 y 轴关联
|
|||
itemStyle: { |
|||
color: "#32BB8A", |
|||
}, |
|||
lineStyle: { |
|||
width: 2, |
|||
}, |
|||
}], |
|||
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: "#32BB8A90" }, |
|||
{ 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: '#08BAF4', |
|||
}, |
|||
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: "#08BAF490" }, |
|||
{ offset: 1, color: "#08BAF400" }, |
|||
], |
|||
global: false, |
|||
}, |
|||
}, |
|||
data: [600, 700, 900, 400, 500, 800, 600,600, 700, 900, 400, 500, 800, 600], // 折线图的数据
|
|||
}, |
|||
{ |
|||
name: '微信发布', |
|||
type: 'line', |
|||
symbol: 'circle', |
|||
symbolSize: 0, |
|||
// yAxisIndex: 1, // 与第二个 y 轴关联
|
|||
itemStyle: { |
|||
color: '#E2BA74', |
|||
}, |
|||
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, |
|||
}, |
|||
}, |
|||
lineStyle: { |
|||
width: 2, |
|||
}, |
|||
data: [850, 810, 712, 580, 480, 480, 780,850, 810, 712, 580, 480, 480, 780], // 折线图的数据
|
|||
},{ |
|||
name: '微博发布', |
|||
type: 'line', |
|||
symbol: 'circle', |
|||
symbolSize: 0, |
|||
// yAxisIndex: 1, // 与第二个 y 轴关联
|
|||
itemStyle: { |
|||
color: '#51BFA4', |
|||
}, |
|||
smooth: true, |
|||
areaStyle: { |
|||
width: 4, |
|||
opacity: 0.25, |
|||
color: { |
|||
type: 'linear', |
|||
x: 0, |
|||
y: 0, |
|||
x2: 0, |
|||
y2: 1, |
|||
colorStops: [ |
|||
{ offset: 0.389, color: "#51BFA490" }, |
|||
{ offset: 1, color: "#51BFA400" }, |
|||
], |
|||
global: false, |
|||
}, |
|||
}, |
|||
lineStyle: { |
|||
width: 2, |
|||
}, |
|||
data: [850, 810, 712, 580, 480, 480, 780,850, 810, 712, 580, 480, 480, 780], // 折线图的数据
|
|||
},{ |
|||
name: '短信发布', |
|||
type: 'line', |
|||
symbol: 'circle', |
|||
symbolSize: 0, |
|||
// yAxisIndex: 1, // 与第二个 y 轴关联
|
|||
itemStyle: { |
|||
color: '#08BAF4', |
|||
}, |
|||
smooth: true, |
|||
areaStyle: { |
|||
width: 4, |
|||
opacity: 0.25, |
|||
color: { |
|||
type: 'linear', |
|||
x: 0, |
|||
y: 0, |
|||
x2: 0, |
|||
y2: 1, |
|||
colorStops: [ |
|||
{ offset: 0.389, color: "#08BAF490" }, |
|||
{ offset: 1, color: "#08BAF400" }, |
|||
], |
|||
global: false, |
|||
}, |
|||
}, |
|||
lineStyle: { |
|||
width: 2, |
|||
}, |
|||
data: [850, 410, 712, 680, 50, 280, 480,850, 810, 712, 580, 480, 480, 780], // 折线图的数据
|
|||
}, |
|||
] |
|||
} |
|||
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: "#08BAF4", |
|||
}, |
|||
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: "#08BAF490" }, |
|||
{ offset: 1, color: "#08BAF400" }, |
|||
], |
|||
global: false, |
|||
}, |
|||
}, |
|||
data: [ |
|||
600, 700, 900, 400, 500, 800, 600, 600, 700, 900, 400, 500, 800, 600, |
|||
], // 折线图的数据
|
|||
}, |
|||
{ |
|||
name: "微信发布", |
|||
type: "line", |
|||
symbol: "circle", |
|||
symbolSize: 0, |
|||
// yAxisIndex: 1, // 与第二个 y 轴关联
|
|||
itemStyle: { |
|||
color: "#E2BA74", |
|||
}, |
|||
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, |
|||
}, |
|||
}, |
|||
lineStyle: { |
|||
width: 2, |
|||
}, |
|||
data: [ |
|||
850, 810, 712, 580, 480, 480, 780, 850, 810, 712, 580, 480, 480, 780, |
|||
], // 折线图的数据
|
|||
}, |
|||
{ |
|||
name: "微博发布", |
|||
type: "line", |
|||
symbol: "circle", |
|||
symbolSize: 0, |
|||
// yAxisIndex: 1, // 与第二个 y 轴关联
|
|||
itemStyle: { |
|||
color: "#51BFA4", |
|||
}, |
|||
smooth: true, |
|||
areaStyle: { |
|||
width: 4, |
|||
opacity: 0.25, |
|||
color: { |
|||
type: "linear", |
|||
x: 0, |
|||
y: 0, |
|||
x2: 0, |
|||
y2: 1, |
|||
colorStops: [ |
|||
{ offset: 0.389, color: "#51BFA490" }, |
|||
{ offset: 1, color: "#51BFA400" }, |
|||
], |
|||
global: false, |
|||
}, |
|||
}, |
|||
lineStyle: { |
|||
width: 2, |
|||
}, |
|||
data: [ |
|||
850, 810, 712, 580, 480, 480, 780, 850, 810, 712, 580, 480, 480, 780, |
|||
], // 折线图的数据
|
|||
}, |
|||
{ |
|||
name: "短信发布", |
|||
type: "line", |
|||
symbol: "circle", |
|||
symbolSize: 0, |
|||
// yAxisIndex: 1, // 与第二个 y 轴关联
|
|||
itemStyle: { |
|||
color: "#08BAF4", |
|||
}, |
|||
smooth: true, |
|||
areaStyle: { |
|||
width: 4, |
|||
opacity: 0.25, |
|||
color: { |
|||
type: "linear", |
|||
x: 0, |
|||
y: 0, |
|||
x2: 0, |
|||
y2: 1, |
|||
colorStops: [ |
|||
{ offset: 0.389, color: "#08BAF490" }, |
|||
{ offset: 1, color: "#08BAF400" }, |
|||
], |
|||
global: false, |
|||
}, |
|||
}, |
|||
lineStyle: { |
|||
width: 2, |
|||
}, |
|||
data: [ |
|||
850, 410, 712, 680, 50, 280, 480, 850, 810, 712, 580, 480, 480, 780, |
|||
], // 折线图的数据
|
|||
}, |
|||
], |
|||
}; |
|||
|
|||
export default options; |
|||
|
|||
@ -1,271 +1,293 @@ |
|||
|
|||
/* 数据 */ |
|||
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 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, 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
|
|||
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% 处的颜色
|
|||
}, |
|||
borderRadius: 6 |
|||
}, |
|||
label: { show: false } |
|||
}) |
|||
} else { |
|||
dataList.push({ |
|||
name: item, |
|||
value: valueList[index], |
|||
itemStyle:{ |
|||
borderRadius: 6 |
|||
} |
|||
}) |
|||
} |
|||
}) |
|||
], |
|||
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", |
|||
}, |
|||
tooltip: { |
|||
show: true, |
|||
trigger: "axis", |
|||
}, |
|||
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', |
|||
}, |
|||
grid: { |
|||
top: "80px", //上边距
|
|||
right: "0", //右边距
|
|||
left: "0", //左边距
|
|||
bottom: "10px", //下边距
|
|||
containLabel: true, |
|||
}, |
|||
xAxis: { |
|||
type: "category", |
|||
data: nameList, |
|||
axisTick: { |
|||
show: false, //隐藏X轴刻度
|
|||
}, |
|||
axisLine: { |
|||
lineStyle: { |
|||
color: "rgba(49, 217, 255, 0.8)", |
|||
}, |
|||
}, |
|||
yAxis: [{ |
|||
type: 'value', |
|||
name: "", |
|||
max: 1000, |
|||
min:0, |
|||
splitNumber:5, |
|||
}, |
|||
axisLabel: { |
|||
show: true, |
|||
color: "#fff", |
|||
fontSize: 10, |
|||
}, |
|||
}, |
|||
yAxis: [ |
|||
{ |
|||
type: "value", |
|||
name: "(起)", |
|||
nameTextStyle: { |
|||
color: '#B6E6FF', |
|||
fontSize: 13, |
|||
fontFamily: 'Source Han Sans CN-Regular', |
|||
align: "left", |
|||
verticalAlign: "center", |
|||
color: "#fff", |
|||
fontSize: 10, |
|||
align: "right", |
|||
verticalAlign: "center", |
|||
}, |
|||
axisLabel: { |
|||
fontSize: 13, |
|||
color: '#B6E6FF', |
|||
fontFamily: 'HarmonyOS Sans-Regular', |
|||
// formatter:function(value,index){
|
|||
// return yList[index]
|
|||
// }
|
|||
fontSize: 10, |
|||
color: "#fff", |
|||
// fontFamily: "HarmonyOS Sans-Regular",
|
|||
// formatter:function(value,index){
|
|||
// return yList[index]
|
|||
// }
|
|||
}, |
|||
axisLine: { |
|||
show: false, |
|||
show: false, |
|||
}, |
|||
axisTick: { |
|||
show: false |
|||
show: false, |
|||
}, |
|||
splitLine: { |
|||
lineStyle: { |
|||
color: 'rgba(49, 217, 255, 0.5)', |
|||
} |
|||
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: "#51BFA490" }, |
|||
{ offset: 1, color: "#51BFA400" }, |
|||
], |
|||
global: false, |
|||
}, |
|||
}, |
|||
// yAxisIndex: 1, // 与第二个 y 轴关联
|
|||
itemStyle: { |
|||
color: "#51BFA4", |
|||
}, |
|||
lineStyle: { |
|||
width: 2, |
|||
}, |
|||
}], |
|||
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: "#51BFA490" }, |
|||
{ offset: 1, color: "#51BFA400" }, |
|||
], |
|||
global: false, |
|||
}, |
|||
}, |
|||
// yAxisIndex: 1, // 与第二个 y 轴关联
|
|||
itemStyle: { |
|||
color: '#51BFA4', |
|||
}, |
|||
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: '#08BAF4', |
|||
}, |
|||
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: "#08BAF490" }, |
|||
{ offset: 1, color: "#08BAF400" }, |
|||
], |
|||
global: false, |
|||
}, |
|||
}, |
|||
data: [600, 700, 900, 400, 500, 800, 600,600, 700, 900, 400, 500, 800, 600], // 折线图的数据
|
|||
}, |
|||
{ |
|||
name: '微信发布', |
|||
type: 'line', |
|||
symbol: 'circle', |
|||
symbolSize: 0, |
|||
// yAxisIndex: 1, // 与第二个 y 轴关联
|
|||
itemStyle: { |
|||
color: '#E2BA74', |
|||
}, |
|||
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, |
|||
}, |
|||
}, |
|||
lineStyle: { |
|||
width: 2, |
|||
}, |
|||
data: [850, 810, 712, 580, 480, 480, 780,850, 810, 712, 580, 480, 480, 780], // 折线图的数据
|
|||
},{ |
|||
name: '微博发布', |
|||
type: 'line', |
|||
symbol: 'circle', |
|||
symbolSize: 0, |
|||
// yAxisIndex: 1, // 与第二个 y 轴关联
|
|||
itemStyle: { |
|||
color: '#FB6D07', |
|||
}, |
|||
smooth: true, |
|||
areaStyle: { |
|||
width: 4, |
|||
opacity: 0.25, |
|||
color: { |
|||
type: 'linear', |
|||
x: 0, |
|||
y: 0, |
|||
x2: 0, |
|||
y2: 1, |
|||
colorStops: [ |
|||
{ offset: 0.389, color: "#FB6D0799" }, |
|||
{ offset: 1, color: "#FB6D0700" }, |
|||
], |
|||
global: false, |
|||
}, |
|||
}, |
|||
lineStyle: { |
|||
width: 2, |
|||
}, |
|||
data: [850, 810, 712, 580, 480, 480, 780,850, 810, 712, 580, 480, 480, 780], // 折线图的数据
|
|||
},{ |
|||
name: '短信发布', |
|||
type: 'line', |
|||
symbol: 'circle', |
|||
symbolSize: 0, |
|||
// yAxisIndex: 1, // 与第二个 y 轴关联
|
|||
itemStyle: { |
|||
color: '#07DEFB', |
|||
}, |
|||
smooth: true, |
|||
areaStyle: { |
|||
width: 4, |
|||
opacity: 0.25, |
|||
color: { |
|||
type: 'linear', |
|||
x: 0, |
|||
y: 0, |
|||
x2: 0, |
|||
y2: 1, |
|||
colorStops: [ |
|||
{ offset: 0.389, color: "#07DEFB90" }, |
|||
{ offset: 1, color: "#07DEFB00" }, |
|||
], |
|||
global: false, |
|||
}, |
|||
}, |
|||
lineStyle: { |
|||
width: 2, |
|||
}, |
|||
data: [850, 410, 712, 680, 50, 280, 480,850, 810, 712, 580, 480, 480, 780], // 折线图的数据
|
|||
}, |
|||
] |
|||
} |
|||
data: [1000, 800, 520, 600, 900, 700, 700, 1000, 800, 520, 600, 900], // 折线图的数据
|
|||
}, |
|||
{ |
|||
name: "服务网站", |
|||
type: "line", |
|||
symbol: "circle", |
|||
symbolSize: 0, |
|||
|
|||
// yAxisIndex: 1, // 与第二个 y 轴关联
|
|||
itemStyle: { |
|||
color: "#08BAF4", |
|||
}, |
|||
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: "#08BAF490" }, |
|||
{ offset: 1, color: "#08BAF400" }, |
|||
], |
|||
global: false, |
|||
}, |
|||
}, |
|||
data: [600, 700, 900, 400, 500, 800, 600, 600, 700, 900, 400, 500], // 折线图的数据
|
|||
}, |
|||
{ |
|||
name: "微信发布", |
|||
type: "line", |
|||
symbol: "circle", |
|||
symbolSize: 0, |
|||
// yAxisIndex: 1, // 与第二个 y 轴关联
|
|||
itemStyle: { |
|||
color: "#E2BA74", |
|||
}, |
|||
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, |
|||
}, |
|||
}, |
|||
lineStyle: { |
|||
width: 2, |
|||
}, |
|||
data: [850, 810, 712, 580, 480, 480, 780, 850, 810, 712, 580, 480], // 折线图的数据
|
|||
}, |
|||
{ |
|||
name: "微博发布", |
|||
type: "line", |
|||
symbol: "circle", |
|||
symbolSize: 0, |
|||
// yAxisIndex: 1, // 与第二个 y 轴关联
|
|||
itemStyle: { |
|||
color: "#FB6D07", |
|||
}, |
|||
smooth: true, |
|||
areaStyle: { |
|||
width: 4, |
|||
opacity: 0.25, |
|||
color: { |
|||
type: "linear", |
|||
x: 0, |
|||
y: 0, |
|||
x2: 0, |
|||
y2: 1, |
|||
colorStops: [ |
|||
{ offset: 0.389, color: "#FB6D0799" }, |
|||
{ offset: 1, color: "#FB6D0700" }, |
|||
], |
|||
global: false, |
|||
}, |
|||
}, |
|||
lineStyle: { |
|||
width: 2, |
|||
}, |
|||
data: [850, 810, 712, 580, 480, 480, 780, 850, 810, 712, 580, 480], // 折线图的数据
|
|||
}, |
|||
{ |
|||
name: "短信发布", |
|||
type: "line", |
|||
symbol: "circle", |
|||
symbolSize: 0, |
|||
// yAxisIndex: 1, // 与第二个 y 轴关联
|
|||
itemStyle: { |
|||
color: "#07DEFB", |
|||
}, |
|||
smooth: true, |
|||
areaStyle: { |
|||
width: 4, |
|||
opacity: 0.25, |
|||
color: { |
|||
type: "linear", |
|||
x: 0, |
|||
y: 0, |
|||
x2: 0, |
|||
y2: 1, |
|||
colorStops: [ |
|||
{ offset: 0.389, color: "#07DEFB90" }, |
|||
{ offset: 1, color: "#07DEFB00" }, |
|||
], |
|||
global: false, |
|||
}, |
|||
}, |
|||
lineStyle: { |
|||
width: 2, |
|||
}, |
|||
data: [850, 410, 712, 680, 50, 280, 480, 850, 810, 712, 580, 480], // 折线图的数据
|
|||
}, |
|||
], |
|||
}; |
|||
|
|||
export default options; |
|||
|
|||
@ -1,177 +1,166 @@ |
|||
<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" /> |
|||
<AuditAnalytics class="content-l" /> |
|||
<PostTrendsDay class="content-l" /> |
|||
</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(){ |
|||
|
|||
} |
|||
} |
|||
|
|||
<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" /> |
|||
<AuditAnalytics class="content-l" /> |
|||
<PostTrendsDay class="content-l" style="margin-right: 0" /> |
|||
</div> |
|||
<div class="content"> |
|||
<PostTrendsMonth class="content-mi" /> |
|||
<NucleusThrough class="content-mi" style="margin-right: 0" /> |
|||
</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; |
|||
} |
|||
</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 { |
|||
|
|||
.content { |
|||
width: 100%; |
|||
height: 100%; |
|||
position: relative; |
|||
z-index: 6; |
|||
color: white; |
|||
|
|||
.header-shot{ |
|||
width: 98%; |
|||
margin: auto; |
|||
margin-top: 15px; |
|||
height:160px; |
|||
margin: auto; |
|||
display: flex; |
|||
flex: 1; |
|||
pointer-events: none; |
|||
margin-top: 19px; |
|||
--keep-ratio: scaleX(1); |
|||
|
|||
> div { |
|||
pointer-events: auto; |
|||
} |
|||
|
|||
.content { |
|||
width: 100%; |
|||
margin: auto; |
|||
display: flex; |
|||
flex: 1; |
|||
pointer-events: none; |
|||
margin-top: 19px; |
|||
|
|||
>div { |
|||
pointer-events: auto; |
|||
} |
|||
|
|||
.content-l { |
|||
width: calc(25%); |
|||
|
|||
margin-right:20px; |
|||
.content-l { |
|||
width: calc(25%); |
|||
|
|||
} |
|||
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: 49.4%; |
|||
} |
|||
.content-mi { |
|||
width: calc(50%); |
|||
|
|||
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%; |
|||
.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; |
|||
} |
|||
|
|||
.foot-l { |
|||
width: 726px; |
|||
} |
|||
.foot-m { |
|||
width: 613px; |
|||
} |
|||
.foot-r { |
|||
width: 493px; |
|||
} |
|||
} |
|||
.content-r { |
|||
width: 49.4%; |
|||
} |
|||
} |
|||
.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> |
|||
|
|||
} |
|||
</style> |
|||
|
|||
@ -0,0 +1,461 @@ |
|||
<template> |
|||
<div class="login"> |
|||
<!-- <Bg2 style=" width: 600px; height:800px; position: fixed; left: 100px; top:100px">发多少刚发的刚发的</Bg2> --> |
|||
<el-form |
|||
ref="loginForm" |
|||
:model="loginForm" |
|||
:rules="loginRules" |
|||
class="login-form" |
|||
> |
|||
<div |
|||
style=" |
|||
width: 100%; |
|||
text-align: center; |
|||
padding-right: 20px; |
|||
padding-bottom: 10px; |
|||
" |
|||
> |
|||
<!-- <img src="../assets/image/login-logo.png" width="120px;" /> --> |
|||
<div class="loginTitle">欢迎登录</div> |
|||
</div> |
|||
<div class="title">{{ "" }}</div> |
|||
<el-form-item prop="username" style="margin-top: 40px"> |
|||
<el-input |
|||
v-model="loginForm.username" |
|||
type="text" |
|||
auto-complete="off" |
|||
placeholder="请输入用户名" |
|||
class="username" |
|||
> |
|||
<img |
|||
slot="prefix" |
|||
src="../assets/images/Vector.png" |
|||
class="el-input__icon input-icon" |
|||
/> |
|||
</el-input> |
|||
<!-- <div style="border-bottom: 1px solid #cfcfcf; margin-top: 5px"></div> --> |
|||
</el-form-item> |
|||
<el-form-item prop="password"> |
|||
<el-input |
|||
v-model="loginForm.password" |
|||
type="password" |
|||
auto-complete="off" |
|||
placeholder="请输入密码" |
|||
@keyup.enter.native="handleLogin" |
|||
class="password" |
|||
> |
|||
<img |
|||
slot="prefix" |
|||
src="../assets/images/locked.png" |
|||
class="el-input__icon input-icon" |
|||
/> |
|||
</el-input> |
|||
<!-- <div style="border-bottom: 1px solid #cfcfcf; margin-top: 5px"></div> --> |
|||
</el-form-item> |
|||
<Verify |
|||
@success="capctchaCheckSuccess" |
|||
:mode="'pop'" |
|||
:captchaType="'blockPuzzle'" |
|||
:imgSize="{ width: '330px', height: '155px' }" |
|||
ref="verify" |
|||
></Verify> |
|||
<el-checkbox |
|||
v-model="loginForm.rememberMe" |
|||
style="margin: 40px 0px 20px 0px" |
|||
>记住密码</el-checkbox |
|||
> |
|||
<el-form-item style="width: 100%; text-align: center"> |
|||
<el-button |
|||
:loading="loading" |
|||
size="medium" |
|||
type="goon" |
|||
style="width: 100%" |
|||
@click.native.prevent="handleLogin" |
|||
> |
|||
<span v-if="!loading">登 录</span> |
|||
<span v-else>登 录 中...</span> |
|||
</el-button> |
|||
<div style="float: right" v-if="register"> |
|||
<router-link class="link-type" :to="'/register'" |
|||
>立即注册</router-link |
|||
> |
|||
</div> |
|||
</el-form-item> |
|||
</el-form> |
|||
|
|||
<!-- 底部 --> |
|||
<div class="el-login-footer"> |
|||
<!-- <span>Copyright ©hamdell All Rights Reserved.</span> --> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import Cookies from "js-cookie"; |
|||
import { encrypt, decrypt } from "@/utils/jsencrypt"; |
|||
import Verify from "@/components/Verifition/Verify"; |
|||
import { getCaptchaOnOff } from "@/api/login.js"; |
|||
import { listOrder } from "@/api/payment/order"; |
|||
import { getUserDeptId } from "@/api/system/user"; |
|||
import { listTunnels } from "@/api/equipment/tunnel/api.js"; |
|||
import { getConfigKey } from "@/api/system/config.js"; |
|||
|
|||
import Bg2 from "@screen/components/Decorations/bg-2.vue"; |
|||
|
|||
export default { |
|||
components: { Verify, Bg2 }, |
|||
name: "Login", |
|||
data() { |
|||
return { |
|||
title: "", // 系统标题 |
|||
cookiePassword: "", |
|||
loginForm: { |
|||
// username: "admin", |
|||
// password: "dxc123!@#", |
|||
//dxc123!@# |
|||
username: "", |
|||
password: "", |
|||
rememberMe: false, |
|||
code: "", |
|||
uuid: "", |
|||
}, |
|||
loginRules: { |
|||
username: [ |
|||
{ required: true, trigger: "blur", message: "请输入您的账号" }, |
|||
], |
|||
password: [ |
|||
{ required: true, trigger: "blur", message: "请输入您的密码" }, |
|||
], |
|||
}, |
|||
loading: false, |
|||
// 验证码开关 |
|||
captchaOnOff: false, |
|||
// 注册开关 |
|||
register: false, |
|||
redirect: undefined, |
|||
}; |
|||
}, |
|||
watch: { |
|||
$route: { |
|||
handler: function (route) { |
|||
this.redirect = route.query && route.query.redirect; |
|||
}, |
|||
immediate: true, |
|||
}, |
|||
}, |
|||
created() { |
|||
this.getCookie(); |
|||
//this.getCaptchaOnOffFun(); |
|||
this.title = systemConfig.title(systemConfig.systemType); |
|||
}, |
|||
methods: { |
|||
// 获取验证码是否开启 |
|||
getCaptchaOnOffFun() { |
|||
getCaptchaOnOff().then((response) => { |
|||
this.captchaOnOff = response.captchaOnOff; |
|||
}); |
|||
}, |
|||
// 验证码 |
|||
capctchaCheckSuccess(params) { |
|||
this.loginForm.code = params.captchaVerification; |
|||
this.loading = true; |
|||
console.log(this.loginForm.rememberMe, "======================="); |
|||
if (this.loginForm.rememberMe == true) { |
|||
Cookies.set("username", this.loginForm.username, { expires: 30 }); |
|||
Cookies.set("password", encrypt(this.loginForm.password), { |
|||
expires: 30, |
|||
}); |
|||
Cookies.set("rememberMe", this.loginForm.rememberMe, { expires: 30 }); |
|||
} else { |
|||
Cookies.remove("username"); |
|||
Cookies.remove("password"); |
|||
Cookies.remove("rememberMe"); |
|||
} |
|||
this.$store |
|||
.dispatch("Login", this.loginForm) |
|||
.then(() => { |
|||
this.$router.push({ path: this.redirect || "/" }).catch(() => {}); |
|||
}) |
|||
.catch(() => { |
|||
this.loading = false; |
|||
}); |
|||
}, |
|||
getCookie() { |
|||
const username = Cookies.get("username"); |
|||
const password = Cookies.get("password"); |
|||
const rememberMe = Cookies.get("rememberMe"); |
|||
console.log("rem", rememberMe); |
|||
this.loginForm = { |
|||
username: username === undefined ? this.loginForm.username : username, |
|||
password: |
|||
password === undefined ? this.loginForm.password : decrypt(password), |
|||
rememberMe: rememberMe === undefined ? false : Boolean(rememberMe), |
|||
}; |
|||
}, |
|||
handleLogin() { |
|||
if (this.captchaOnOff) { |
|||
this.$refs.loginForm.validate((valid) => { |
|||
if (valid) { |
|||
this.$refs.verify.show(); |
|||
} |
|||
}); |
|||
} else { |
|||
if (this.loginForm.rememberMe == true) { |
|||
Cookies.set("username", this.loginForm.username, { expires: 30 }); |
|||
Cookies.set("password", encrypt(this.loginForm.password), { |
|||
expires: 30, |
|||
}); |
|||
Cookies.set("rememberMe", this.loginForm.rememberMe, { expires: 30 }); |
|||
} else { |
|||
Cookies.remove("username"); |
|||
Cookies.remove("password"); |
|||
Cookies.remove("rememberMe"); |
|||
} |
|||
|
|||
this.$store |
|||
.dispatch("Login", this.loginForm) |
|||
.then(() => { |
|||
this.$router.push({ path: this.redirect || "/" }).catch(() => {}); |
|||
// this.getManageStation(); |
|||
}) |
|||
.catch(() => { |
|||
this.loading = false; |
|||
}); |
|||
} |
|||
}, |
|||
getManageStation() { |
|||
getConfigKey("sd.moduleSwitch").then((res) => { |
|||
console.log(res, "管理站01"); |
|||
this.$cache.local.set("manageStation", res.msg); |
|||
}); |
|||
getConfigKey("sd.navigationBar").then((res) => { |
|||
console.log(res, "res"); |
|||
let sideTheme = "theme-blue"; |
|||
if (res.msg == "0") { |
|||
sideTheme = "theme-dark"; |
|||
} else { |
|||
sideTheme = "theme-blue"; |
|||
} |
|||
// console.log(res, "是否胡山隧道，胡山单独导航栏样式"); |
|||
this.$cache.local.set("navigationBar", res.msg); |
|||
this.$store.dispatch("settings/changeSetting", { |
|||
key: "sideTheme", |
|||
value: sideTheme, |
|||
}); |
|||
// this.sideTheme = val; |
|||
this.$cache.local.set( |
|||
"layout-setting", |
|||
`{ |
|||
"topNav":${this.$store.state.settings.topNav}, |
|||
"tagsView":${this.$store.state.settings.tagsView}, |
|||
"weatherView":${this.$store.state.settings.weatherView}, |
|||
"fixedHeader":${this.$store.state.settings.fixedHeader}, |
|||
"sidebarLogo":${this.$store.state.settings.sidebarLogo}, |
|||
"dynamicTitle":${this.$store.state.settings.dynamicTitle}, |
|||
"sideTheme":"${sideTheme}", |
|||
"theme":"${this.$store.state.settings.theme}" |
|||
}` |
|||
); |
|||
// console.log(this.$store.state.settings.sideTheme) |
|||
}); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style rel="stylesheet/scss" lang="scss" scoped> |
|||
::v-deep .el-input__inner { |
|||
background-color: transparent !important; |
|||
height: 100%; |
|||
font-size: 22px; |
|||
font-family: Source Han Sans CN, Source Han Sans CN; |
|||
font-weight: 400; |
|||
color: #07caf6; |
|||
margin-left: 68px; |
|||
} |
|||
|
|||
::v-deep .el-checkbox__label { |
|||
color: #fff; |
|||
font-size: 18px !important; |
|||
font-family: Source Han Sans CN, Source Han Sans CN; |
|||
font-weight: 400; |
|||
color: #ffffff !important; |
|||
margin-bottom: 10px; |
|||
} |
|||
|
|||
::v-deep .el-form-item__error { |
|||
position: absolute; |
|||
top: 75px; |
|||
} |
|||
|
|||
::v-deep .el-input__inner::placeholder { |
|||
color: #07caf6; |
|||
} |
|||
|
|||
.login { |
|||
position: relative; |
|||
height: 100%; |
|||
background-image: url("../assets/images/login-background.png"); |
|||
// background-size: 100% auto; |
|||
background-repeat: no-repeat; |
|||
background-size: 100% 100%; |
|||
} |
|||
|
|||
.login::after { |
|||
content: ""; |
|||
position: absolute; |
|||
width: 100%; |
|||
height: 120px; |
|||
background-image: url("../assets/images/login-head.png"); |
|||
background-repeat: no-repeat; |
|||
background-size: auto 100%; |
|||
background-position: center center; |
|||
} |
|||
|
|||
.title { |
|||
margin: 0px auto 10px auto; |
|||
font-size: 24px; |
|||
text-align: center; |
|||
color: #353f55; |
|||
letter-spacing: 2px; |
|||
} |
|||
|
|||
.login-form::after { |
|||
content: ""; |
|||
position: absolute; |
|||
left: -4px; |
|||
top: 0px; |
|||
width: 4px; |
|||
height: 100%; |
|||
background: linear-gradient( |
|||
180deg, |
|||
#bdfff600 0%, |
|||
#bdfff6 50%, |
|||
#bdfff600 100% |
|||
); |
|||
} |
|||
|
|||
.login-form::before { |
|||
content: ""; |
|||
position: absolute; |
|||
right: -4px; |
|||
top: 0px; |
|||
width: 4px; |
|||
height: 100%; |
|||
background: linear-gradient( |
|||
180deg, |
|||
#bdfff600 0%, |
|||
#bdfff6 50%, |
|||
#bdfff600 100% |
|||
); |
|||
} |
|||
|
|||
.login-form { |
|||
position: absolute; |
|||
left: 50%; |
|||
top: 20%; |
|||
transform: translateX(-50%); |
|||
width: 400px; |
|||
height: 500px; |
|||
background: #00000080; |
|||
border-radius: 0px 0px 0px 0px; |
|||
opacity: 1; |
|||
border: 4px solid #0c5963; |
|||
padding: 50px; |
|||
// margin-left: 50%; |
|||
|
|||
.loginTitle { |
|||
display: inline-flex; |
|||
width: 100%; |
|||
height: 45px; |
|||
font-size: 30px; |
|||
font-family: Source Han Sans CN, Source Han Sans CN; |
|||
font-weight: 500; |
|||
color: #ffffff; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
|
|||
.el-input { |
|||
width: 300px; |
|||
height: 60px; |
|||
border-radius: 4px 4px 4px 4px; |
|||
opacity: 1; |
|||
border: 1px solid #01cffe; |
|||
background-color: transparent; |
|||
margin-bottom: 12px; |
|||
|
|||
::v-deep .el-input__inner { |
|||
font-size: 20px !important; |
|||
} |
|||
|
|||
input { |
|||
border: 0; |
|||
height: 35px; |
|||
} |
|||
} |
|||
|
|||
.input-icon { |
|||
height: 20px; |
|||
width: 20px; |
|||
margin-left: 2px; |
|||
position: relative; |
|||
left: 14px; |
|||
top: 18px; |
|||
} |
|||
} |
|||
|
|||
.login-tip { |
|||
font-size: 13px; |
|||
text-align: center; |
|||
color: #bfbfbf; |
|||
} |
|||
|
|||
.login-code { |
|||
width: 37%; |
|||
height: 35px; |
|||
float: right; |
|||
|
|||
img { |
|||
cursor: pointer; |
|||
vertical-align: middle; |
|||
} |
|||
} |
|||
|
|||
.el-login-footer { |
|||
height: 40px; |
|||
line-height: 40px; |
|||
position: fixed; |
|||
bottom: 0; |
|||
width: 100%; |
|||
text-align: center; |
|||
color: #fff; |
|||
font-family: Arial; |
|||
font-size: 12px; |
|||
letter-spacing: 1px; |
|||
} |
|||
|
|||
.login-code-img { |
|||
height: 35px; |
|||
} |
|||
|
|||
/* 重置按钮 */ |
|||
.el-button--goon { |
|||
font-size: 24px; |
|||
font-weight: 400; |
|||
color: #fff; |
|||
width: 380px; |
|||
height: 55px; |
|||
background: #07caf6; |
|||
border-radius: 4px; |
|||
opacity: 1; |
|||
border: none; |
|||
} |
|||
|
|||
.el-button--goon:hover { |
|||
} |
|||
|
|||
::v-deep .el-form-item__error { |
|||
top: 62px; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue