mengff
/
jihe-hs
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

更改图表

wangqin
zhangzhang 1 year ago
parent
66f6d4eac4
commit
55e03a5470
17 changed files with 1966 additions and 1828 deletions
Unified View
  1. 2
      ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/postTrendsDay/assets/charts.js
  2. 3
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/assets/charts3.js
  3. 20
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/index.vue
  4. 27
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railway/index.vue
  5. 36
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/index.vue
  6. 2
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/classification/assets/charts.js
  7. 7
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/congestion/assets/charts.js
  8. 8
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/flowstate/assets/charts.js
  9. 366
      ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/auditAnalytics/assets/charts.js
  10. 378
      ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/channelAnalytics/assets/charts.js
  11. 391
      ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/eventTypeAnalysis/assets/charts.js
  12. 52
      ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/nucleusThrough/assets/charts3.js
  13. 77
      ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/nucleusThrough/index.vue
  14. 197
      ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/postTrendsDay/assets/charts.js
  15. 186
      ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/postTrendsMonth/assets/charts.js
  16. 81
      ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/postTrendsMonth/index.vue
  17. 129
      ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/index.vue

2
ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/postTrendsDay/assets/charts.js
View File

@ -24,7 +24,7 @@ var options = {
grid: { grid: {
top: "15%", //上边距 top: "15%", //上边距
right: "0", //右边距 right: "0", //右边距
left: "10px", //左边距 left: "15px", //左边距
bottom: "10%", //下边距 bottom: "10%", //下边距
containLabel: true, containLabel: true,
}, },

3
ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/assets/charts3.js
View File

@ -191,6 +191,9 @@ let options = {
zlevel: 10, zlevel: 10,
data: [], data: [],
animationDelay: 500, animationDelay: 500,
tooltip: {
show: false,
},
}, },
], ],
}; };

20
ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/index.vue
View File

@ -220,8 +220,8 @@ export default {
dateTime: "2024", dateTime: "2024",
direction: "1", direction: "1",
dataList: [], dataList: [],
selectIndex: 3, selectIndex: 1,
selectId: 3, selectId: 1,
type: "year", type: "year",
chart1List: [], chart1List: [],
chart2List: [], chart2List: [],
@ -400,21 +400,21 @@ export default {
data.forEach((it) => { data.forEach((it) => {
if (it.warningType == 1) { if (it.warningType == 1) {
types.push("交通拥堵"); types.push("交通拥堵");
}else if (it.warningType == 2) { } else if (it.warningType == 2) {
types.push("行人"); types.push("行人");
}else if (it.warningType == 3) { } else if (it.warningType == 3) {
types.push("非机动车"); types.push("非机动车");
}else if (it.warningType == 4) { } else if (it.warningType == 4) {
types.push("停车"); types.push("停车");
}else if (it.warningType == 5) { } else if (it.warningType == 5) {
types.push("倒车/逆行"); types.push("倒车/逆行");
}else if (it.warningType == 6) { } else if (it.warningType == 6) {
types.push("烟火"); types.push("烟火");
}else if (it.warningType == 7) { } else if (it.warningType == 7) {
types.push("撒落物"); types.push("撒落物");
}else if (it.warningType == 8) { } else if (it.warningType == 8) {
types.push("异常天气"); types.push("异常天气");
}else if (it.warningType == 9) { } else if (it.warningType == 9) {
types.push("护栏碰撞"); types.push("护栏碰撞");
} else { } else {
types.push("其他"); types.push("其他");

27
ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railway/index.vue
View File

@ -6,10 +6,16 @@
<div class="checked">路段车流量Top10</div> <div class="checked">路段车流量Top10</div>
<div>断面交通量Top10</div> <div>断面交通量Top10</div>
</div> --> </div> -->
<Empty v-show="!dataList || dataList.length <= 0" text="暂无数据..."></Empty> <Empty
<div v-show="dataList && dataList.length > 0" style="width: 450px;" class="charts keep-ratio" v-show="!dataList || dataList.length <= 0"
id="situationEchartBox"></div> text="暂无数据..."
></Empty>
<div
v-show="dataList && dataList.length > 0"
style="width: 450px"
class="charts keep-ratio"
id="situationEchartBox"
></div>
</div> </div>
</div> </div>
</template> </template>
@ -27,7 +33,7 @@ export default {
}, },
data() { data() {
return { return {
dataList: [] dataList: [],
}; };
}, },
@ -41,7 +47,7 @@ export default {
getSectionPerceivedList().then((res) => { getSectionPerceivedList().then((res) => {
console.log(res); console.log(res);
if (res.code == 200) { if (res.code == 200) {
this.dataList = res.data this.dataList = res.data;
let data = res.data; let data = res.data;
let texts = []; let texts = [];
@ -60,7 +66,7 @@ export default {
}); });
}); });
}, },
created() { }, created() {},
methods: {}, methods: {},
}; };
</script> </script>
@ -77,9 +83,12 @@ export default {
border-radius: 5px 5px 5px 5px; border-radius: 5px 5px 5px 5px;
opacity: 1; opacity: 1;
border: 1px solid; border: 1px solid;
border-image: linear-gradient(360deg, border-image: linear-gradient(
360deg,
rgba(55, 231, 255, 0.3), rgba(55, 231, 255, 0.3),
rgba(55, 231, 255, 0)) 1 1; rgba(55, 231, 255, 0)
)
1 1;
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;

36
ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/index.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class='TrafficFlow'> <div class="TrafficFlow">
<section class="content"> <section class="content">
<Railway class="content-l" /> <Railway class="content-l" />
<div class="content-m"> <div class="content-m">
@ -10,7 +10,7 @@
<EventSource class="content-m-t" /> <EventSource class="content-m-t" />
<DailyDisposal class="content-m-t" /> <DailyDisposal class="content-m-t" />
</div> </div>
<div class="content-m" style="margin-right: 0;"> <div class="content-m" style="margin-right: 0">
<MonthStatistice class="content-m-t" /> <MonthStatistice class="content-m-t" />
<TypeAnalysis class="content-m-t" /> <TypeAnalysis class="content-m-t" />
</div> </div>
@ -22,17 +22,17 @@
</template> </template>
<script> <script>
import Railway from './components/railway/index.vue'; import Railway from "./components/railway/index.vue";
import RailWayDay from './components/railwayDay/index.vue'; import RailWayDay from "./components/railwayDay/index.vue";
import DayTotal from './components/dayTotal/index.vue'; import DayTotal from "./components/dayTotal/index.vue";
import EventSource from './components/eventSource/index.vue'; import EventSource from "./components/eventSource/index.vue";
import DailyDisposal from './components/dailyDisposal/index.vue'; import DailyDisposal from "./components/dailyDisposal/index.vue";
import TypeAnalysis from './components/typeAnalysis'; import TypeAnalysis from "./components/typeAnalysis";
import MonthStatistice from './components/monthStatistics/index.vue'; import MonthStatistice from "./components/monthStatistics/index.vue";
import EventQuery from './components/eventQuery'; import EventQuery from "./components/eventQuery";
export default { export default {
name: 'EventDetection', name: "EventDetection",
components: { components: {
Railway, Railway,
RailWayDay, RailWayDay,
@ -42,11 +42,11 @@ export default {
TypeAnalysis, TypeAnalysis,
MonthStatistice, MonthStatistice,
EventQuery, EventQuery,
} },
} };
</script> </script>
<style lang='scss' scoped> <style lang="scss" scoped>
.TrafficFlow { .TrafficFlow {
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -68,7 +68,7 @@ export default {
pointer-events: none; pointer-events: none;
margin-top: 19px; margin-top: 19px;
>div { > div {
pointer-events: auto; pointer-events: auto;
} }
@ -76,10 +76,8 @@ export default {
width: calc(100% / 4 - 25px * 3); width: calc(100% / 4 - 25px * 3);
min-width: 475px; min-width: 475px;
margin-right: 15px; margin-right: 15px;
} }
.content-m { .content-m {
display: inline-flex; display: inline-flex;
flex-direction: column; flex-direction: column;
@ -107,13 +105,12 @@ export default {
pointer-events: none; pointer-events: none;
margin-top: 0px; margin-top: 0px;
>div { > div {
pointer-events: auto; pointer-events: auto;
} }
.foot-w { .foot-w {
width: 100%; width: 100%;
} }
.foot-l { .foot-l {
@ -130,4 +127,3 @@ export default {
} }
} }
</style> </style>

2
ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/classification/assets/charts.js
View File

@ -189,7 +189,7 @@ var options = {
itemStyle: { itemStyle: {
normal: { normal: {
borderRadius: "5", borderRadius: "5",
borderWidth: 2, borderWidth: 4,
borderType: "solid", borderType: "solid",
borderCap: "round", borderCap: "round",
borderJoin: "round", borderJoin: "round",

7
ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/congestion/assets/charts.js
View File

@ -55,6 +55,10 @@ nameList.map((item, index) => {
}); });
var options = { var options = {
tooltip: {
show: true,
trigger: "axis",
},
grid: { grid: {
top: "5%", //上边距 top: "5%", //上边距
right: "20px", //右边距 right: "20px", //右边距
@ -157,6 +161,9 @@ var options = {
borderRadius: 6, borderRadius: 6,
}, },
}, },
tooltip: {
show: false,
},
}, },
], ],
}; };

8
ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/flowstate/assets/charts.js
View File

@ -1,5 +1,9 @@
import * as echarts from "echarts"; import * as echarts from "echarts";
var options = { var options = {
tooltip: {
show: true,
trigger: "axis",
},
axisPointer: { axisPointer: {
link: [ link: [
{ {
@ -127,7 +131,7 @@ var options = {
], ],
series: [ series: [
{ {
name: "Evaporation", name: "",
type: "line", type: "line",
symbolSize: 0, symbolSize: 0,
lineStyle: { lineStyle: {
@ -160,7 +164,7 @@ var options = {
], ],
}, },
{ {
name: "Rainfall", name: "",
type: "line", type: "line",
symbol: "circle", symbol: "circle",
symbolSize: 0, symbolSize: 0,

366
ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/auditAnalytics/assets/charts.js
View File

@ -1,30 +1,29 @@
var res = [ var res = [
{ value: 50, name: '情报板发布' }, { value: 50, name: "情报板发布" },
{ value: 1, name: '' }, { value: 20, name: "微博发布" },
{ value: 20, name: '微博发布' }, { value: 30, name: "服务网站" },
{ value: 1, name: '' }, ];
{ value: 30, name: '服务网站' }, // var res = this.evaluatedCountList;
{ value: 1, name: '' }, var data1 = [],
]; data2 = [],
// var res = this.evaluatedCountList; data3 = [],
var data1 = [], data2 = [], data3 = [], legendData = []; legendData = [];
var curIndex = 0; var curIndex = 0;
var index = 0; var index = 0;
let angle = 0; //角度，用来做简单的动画效果的 let angle = 0; //角度，用来做简单的动画效果的
for (var i = 0; i < res.length; i++) {
for (var i = 0; i < res.length; i++) {
data1.push({ data1.push({
value: res[i].value, value: res[i].value,
name: res[i].name, name: res[i].name,
}) });
data2.push({ data2.push({
value: res[i].value, value: res[i].value,
name: res[i].name, name: res[i].name,
itemStyle: { itemStyle: {
opacity: 0.4, opacity: 0.4,
}, },
}) });
data3.push({ data3.push({
value: res[i].value, value: res[i].value,
@ -32,78 +31,79 @@ var res = [
itemStyle: { itemStyle: {
opacity: 0.1, opacity: 0.1,
}, },
}) });
if ( res[i].name != "" ) if (res[i].name != "") legendData.push(res[i].name);
legendData.push(res[i].name); }
}
var options = { var options = {
color: ['#5CC5FF', 'transparent', '#54EFD5', 'transparent', '#FD9666', 'transparent', '#5C8CFE', 'transparent', '#51D5AD', 'transparent'], color: ["#5CC5FF", "#54EFD5", "#FD9666", "#5C8CFE", "#51D5AD"],
title: [ title: [
{ {
text:'999', text: "999",
top: '27%', top: "27%",
textAlign: 'center', textAlign: "center",
left: '49%', left: "49%",
textStyle: { textStyle: {
color: '#ffffff', color: "#ffffff",
fontSize: 30, fontSize: 30,
fontFamily: 'PangMenZhengDao', fontFamily: "PangMenZhengDao",
}, },
}, },
{ {
text: '总数', text: "总数",
top: '38%', top: "38%",
textAlign: 'center', textAlign: "center",
left: '49%', left: "49%",
textStyle: { textStyle: {
color: 'rgba(242, 252, 253, 0.84)', color: "rgba(242, 252, 253, 0.84)",
fontSize: 14, fontSize: 14,
fontWeight: 400, fontWeight: 400,
}, },
}, },
], ],
grid: { grid: {
top: '3%', top: "3%",
left: '6%', left: "6%",
right: '6%', right: "6%",
bottom: '3%', bottom: "3%",
containLabel: true containLabel: true,
}, },
tooltip: { tooltip: {
trigger: 'item', trigger: "item",
formatter: '{b} : {c}:{d}' // formatter: '{b} : {c}:{d}'
}, },
legend: { legend: {
orient: '', orient: "vertical",
left: '10%', height: "80px",
top: '68%', // left: "10%",
top: "68%",
itemWidth: 10, itemWidth: 10,
itemHeight: 10, itemHeight: 10,
icon:"circle", icon: "circle",
textStyle: { textStyle: {
color: "#ffffff", color: "#ffffff",
fontSize: 14, fontSize: 14,
lineHeight: 22, lineHeight: 22,
rich: { rich: {
text: { text: {
marginLeft:32, width: 80,
marginLeft: 32,
fontSize: 14, fontSize: 14,
}, },
number: { number: {
fontSize: 14, fontSize: 14,
color: "#37E7FF", color: "#37E7FF",
marginLeft:32, marginLeft: 32,
fontWeight: 'bold' fontWeight: "bold",
}, },
unit: { unit: {
fontSize: 14, fontSize: 14,
} },
} },
}, },
data: legendData, data: legendData,
formatter(name) { formatter(name) {
if ( name == "" ) return ""; if (name == "") return "";
const newData = res; const newData = res;
let tarValue = 0; let tarValue = 0;
let total = 0; let total = 0;
@ -114,242 +114,249 @@ var res = [
} }
} }
var percert = total == 0 ? 0 : ((tarValue / total) * 100).toFixed(2); var percert = total == 0 ? 0 : ((tarValue / total) * 100).toFixed(2);
const arr = name + ' ' + tarValue; const arr = name + " " + tarValue;
return `{text|${name}} {number|${percert}%}`;; return `{text|${name}} {number|${percert}%}`;
}, },
pageIconColor: "#fff",
pageIconSize: 10,
pageTextStyle: {
color: "#fff",
},
type: "scroll",
pageButtonPosition: "end",
}, },
series: [ series: [
/** 饼图上刻度 */ /** 饼图上刻度 */
{ {
type: 'gauge', type: "gauge",
center: ['50%', '35%'], center: ["50%", "35%"],
radius: '40%', // 错位调整此处 radius: "40%", // 错位调整此处
startAngle: 0, startAngle: 0,
endAngle: 360, endAngle: 360,
splitNumber: 52, splitNumber: 52,
axisLine: { show: false }, axisLine: { show: false },
splitLine: { splitLine: {
// length: 39, // length: 39,
length: '2', length: "2",
lineStyle: { lineStyle: {
width: 5, width: 5,
color: '#5CC5FF' color: "#5CC5FF",
} },
}, },
axisTick: { show: false }, axisTick: { show: false },
axisLabel: { show: false } axisLabel: { show: false },
}, },
/** 绘制外部圆弧-2-开始圆点 <left-top> */ /** 绘制外部圆弧-2-开始圆点 <left-top> */
{ {
type: 'custom', type: "custom",
coordinateSystem: 'none', coordinateSystem: "none",
renderItem: (params, api) => { renderItem: (params, api) => {
let x0 = api.getWidth() / 2; let x0 = api.getWidth() / 2;
let y0 = api.getHeight() / 2 - 59; 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 { return {
type: 'circle', type: "circle",
shape: { shape: {
/** 角度175° 外弧2开始角度 */ /** 角度175° 外弧2开始角度 */
cx: x0 + r * Math.cos((350 + -angle) * Math.PI / 180), cx: x0 + r * Math.cos(((350 + -angle) * Math.PI) / 180),
cy: y0 + r * Math.sin((350 + -angle) * Math.PI / 180), cy: y0 + r * Math.sin(((350 + -angle) * Math.PI) / 180),
r: 4 r: 4,
}, },
style: { style: {
fill: '#5BC4FF', fill: "#5BC4FF",
stroke: '#5BC4FF' stroke: "#5BC4FF",
}, },
silent: true silent: true,
} };
}, },
data: [0] data: [0],
}, },
{ {
type: 'custom', type: "custom",
coordinateSystem: 'none', coordinateSystem: "none",
renderItem: (params, api) => { renderItem: (params, api) => {
return { return {
type: 'arc', type: "arc",
shape: { shape: {
cx: api.getWidth() / 2, cx: api.getWidth() / 2,
cy: api.getHeight() / 2 - 59, cy: api.getHeight() / 2 - 59,
r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.50, r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.5,
startAngle: (350 + -angle) * Math.PI / 180, startAngle: ((350 + -angle) * Math.PI) / 180,
endAngle: (120 + -angle) * Math.PI / 180 endAngle: ((120 + -angle) * Math.PI) / 180,
}, },
style: { style: {
fill: 'transparent', fill: "transparent",
stroke: '#5BC4FF66', stroke: "#5BC4FF66",
lineWidth: 2.6 lineWidth: 2.6,
}, },
silent: true silent: true,
} };
}, },
data: [0] data: [0],
}, },
{ {
type: 'custom', type: "custom",
coordinateSystem: 'none', coordinateSystem: "none",
renderItem: (params, api) => { renderItem: (params, api) => {
let x0 = api.getWidth() / 2; let x0 = api.getWidth() / 2;
let y0 = api.getHeight() / 2 - 59; 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 { return {
type: 'circle', type: "circle",
shape: { shape: {
/** 角度175° 外弧2开始角度 */ /** 角度175° 外弧2开始角度 */
cx: x0 + r * Math.cos((150 + -angle) * Math.PI / 180), cx: x0 + r * Math.cos(((150 + -angle) * Math.PI) / 180),
cy: y0 + r * Math.sin((150 + -angle) * Math.PI / 180), cy: y0 + r * Math.sin(((150 + -angle) * Math.PI) / 180),
r: 4 r: 4,
}, },
style: { style: {
fill: '#5BC4FF', fill: "#5BC4FF",
stroke: '#5BC4FF' stroke: "#5BC4FF",
}, },
silent: true silent: true,
} };
}, },
data: [0] data: [0],
}, },
{ {
type: 'custom', type: "custom",
coordinateSystem: 'none', coordinateSystem: "none",
renderItem: (params, api) => { renderItem: (params, api) => {
return { return {
type: 'arc', type: "arc",
shape: { shape: {
cx: api.getWidth() / 2, cx: api.getWidth() / 2,
cy: api.getHeight() / 2 - 59, cy: api.getHeight() / 2 - 59,
r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.50, r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.5,
startAngle: (150 + -angle) * Math.PI / 180, startAngle: ((150 + -angle) * Math.PI) / 180,
endAngle: (-30 + -angle) * Math.PI / 180 endAngle: ((-30 + -angle) * Math.PI) / 180,
}, },
style: { style: {
fill: 'transparent', fill: "transparent",
stroke: '#5BC4FF66', stroke: "#5BC4FF66",
lineWidth: 2.6 lineWidth: 2.6,
}, },
silent: true silent: true,
} };
}, },
data: [0] data: [0],
}, },
{ {
type: 'custom', type: "custom",
coordinateSystem: 'none', coordinateSystem: "none",
renderItem: (params, api) => { renderItem: (params, api) => {
let x0 = api.getWidth() / 2; let x0 = api.getWidth() / 2;
let y0 = api.getHeight() / 2 - 59; let y0 = api.getHeight() / 2 - 59;
let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.56; let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.56;
return { return {
type: 'circle', type: "circle",
shape: { shape: {
/** 角度175° 外弧2开始角度 */ /** 角度175° 外弧2开始角度 */
cx: x0 + r * Math.cos((590 + -angle) * Math.PI / 180), cx: x0 + r * Math.cos(((590 + -angle) * Math.PI) / 180),
cy: y0 + r * Math.sin((590 + -angle) * Math.PI / 180), cy: y0 + r * Math.sin(((590 + -angle) * Math.PI) / 180),
r: 4 r: 4,
}, },
style: { style: {
fill: '#5BC4FF', fill: "#5BC4FF",
stroke: '#5BC4FF' stroke: "#5BC4FF",
}, },
silent: true silent: true,
} };
}, },
data: [0] data: [0],
}, },
{ {
type: 'custom', type: "custom",
coordinateSystem: 'none', coordinateSystem: "none",
renderItem: (params, api) => { renderItem: (params, api) => {
return { return {
type: 'arc', type: "arc",
shape: { shape: {
cx: api.getWidth() / 2, cx: api.getWidth() / 2,
cy: api.getHeight() / 2 - 59, cy: api.getHeight() / 2 - 59,
r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.56, r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.56,
startAngle: (590 + -angle) * Math.PI / 180, startAngle: ((590 + -angle) * Math.PI) / 180,
endAngle: (350 + -angle) * Math.PI / 180 endAngle: ((350 + -angle) * Math.PI) / 180,
}, },
style: { style: {
fill: 'transparent', fill: "transparent",
stroke: '#5BC4FF66', stroke: "#5BC4FF66",
lineWidth: 2.6 lineWidth: 2.6,
}, },
silent: true silent: true,
} };
}, },
data: [0] data: [0],
}, },
{ {
type: 'custom', type: "custom",
coordinateSystem: 'none', coordinateSystem: "none",
renderItem: (params, api) => { renderItem: (params, api) => {
let x0 = api.getWidth() / 2; let x0 = api.getWidth() / 2;
let y0 = api.getHeight() / 2 - 59; let y0 = api.getHeight() / 2 - 59;
let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.56; let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.56;
return { return {
type: 'circle', type: "circle",
shape: { shape: {
/** 角度175° 外弧2开始角度 */ /** 角度175° 外弧2开始角度 */
cx: x0 + r * Math.cos((90 + -angle) * Math.PI / 180), cx: x0 + r * Math.cos(((90 + -angle) * Math.PI) / 180),
cy: y0 + r * Math.sin((90 + -angle) * Math.PI / 180), cy: y0 + r * Math.sin(((90 + -angle) * Math.PI) / 180),
r: 4 r: 4,
}, },
style: { style: {
fill: '#5BC4FF', fill: "#5BC4FF",
stroke: '#5BC4FF' stroke: "#5BC4FF",
}, },
silent: true silent: true,
} };
}, },
data: [0] data: [0],
}, },
{ {
type: 'custom', type: "custom",
coordinateSystem: 'none', coordinateSystem: "none",
renderItem: (params, api) => { renderItem: (params, api) => {
return { return {
type: 'arc', type: "arc",
shape: { shape: {
cx: api.getWidth() / 2, cx: api.getWidth() / 2,
cy: api.getHeight() / 2 - 59, cy: api.getHeight() / 2 - 59,
r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.56, r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.56,
startAngle: (90 + -angle) * Math.PI / 180, startAngle: ((90 + -angle) * Math.PI) / 180,
endAngle: (160 + -angle) * Math.PI / 180 endAngle: ((160 + -angle) * Math.PI) / 180,
}, },
style: { style: {
fill: 'transparent', fill: "transparent",
stroke: '#5BC4FF66', stroke: "#5BC4FF66",
lineWidth: 2.6 lineWidth: 2.6,
}, },
silent: true silent: true,
} };
}, },
data: [0] data: [0],
}, },
{ {
type: 'pie', type: "pie",
radius: ['45%', '39%'], radius: ["45%", "39%"],
center: ['50%', '35%'], center: ["50%", "35%"],
z: 10, z: 10,
label: { label: {
show: false, show: false,
position: 'center', position: "center",
formatter: (params) => { formatter: (params) => {
return params.name + "\r\n" + params.value return params.name + "\r\n" + params.value;
}, },
rich: { rich: {
total: { total: {
fontSize: 16, fontSize: 16,
color: '#04F5FE', color: "#04F5FE",
}, },
efficiency: { efficiency: {
fontSize: 12, fontSize: 12,
color: '#00FD6D', color: "#00FD6D",
}, },
}, },
color: '#FFFFFF', color: "#FFFFFF",
fontSize: 12, fontSize: 12,
lineHeight: 16, lineHeight: 16,
}, },
@ -359,16 +366,17 @@ var res = [
}, },
itemStyle: { itemStyle: {
normal: { normal: {
borderWidth: 6, borderRadius: "5",
shadowBlur: 10, borderWidth: 4,
borderRadius: 50, // 圆角 borderType: "solid",
} borderColor: "#0C2D3A",
} },
},
}, },
{ {
type: 'pie', type: "pie",
radius: ['25%', '39%'], radius: ["25%", "39%"],
center: ['50%', '35%'], center: ["50%", "35%"],
label: { label: {
show: false, show: false,
}, },
@ -378,14 +386,14 @@ var res = [
}, },
itemStyle: { itemStyle: {
normal: { normal: {
borderWidth: 6, borderRadius: "5",
shadowBlur: 10, borderWidth: 4,
borderRadius: 0, // 圆角 borderType: "solid",
} borderColor: "#0C2D3A",
} },
},
}, },
], ],
};
}; export default options;
export default options

378
ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/channelAnalytics/assets/charts.js
View File

@ -1,32 +1,30 @@
var res = [ var res = [
{ value: 20, name: '情报板发布' }, { value: 20, name: "情报板发布" },
{ value: 1, name: '' }, { value: 20, name: "微博发布" },
{ value: 20, name: '微博发布' }, { value: 20, name: "服务网站" },
{ value: 1, name: '' }, { value: 20, name: "短信发布" },
{ value: 20, name: '服务网站' }, { value: 20, name: "微信发布" },
{ value: 1, name: '' }, ];
{ value: 20, name: '短信发布' }, // var res = this.evaluatedCountList;
{ value: 1, name: '' }, var data1 = [],
{ value: 20, name: '微信发布' }, data2 = [],
{ value: 1, name: '' }, data3 = [],
]; legendData = [];
// var res = this.evaluatedCountList; var curIndex = 0;
var data1 = [], data2 = [], data3 = [], legendData = []; var index = 0;
var curIndex = 0;
var index = 0;
for (var i = 0; i < res.length; i++) { for (var i = 0; i < res.length; i++) {
data1.push({ data1.push({
value: res[i].value, value: res[i].value,
name: res[i].name, name: res[i].name,
}) });
data2.push({ data2.push({
value: res[i].value, value: res[i].value,
name: res[i].name, name: res[i].name,
itemStyle: { itemStyle: {
opacity: 0.4, opacity: 0.4,
}, },
}) });
data3.push({ data3.push({
value: res[i].value, value: res[i].value,
@ -34,74 +32,76 @@ var res = [
itemStyle: { itemStyle: {
opacity: 0.1, opacity: 0.1,
}, },
}) });
if ( res[i].name != "" ) if (res[i].name != "") legendData.push(res[i].name);
legendData.push(res[i].name); }
} let angle = 0; //角度，用来做简单的动画效果的
let angle = 0; //角度，用来做简单的动画效果的 var options = {
var options = { color: ["#68F4DD", "#FFDD69", "#3CC3F0", "#5C8CFE", "#51D5AD"],
color: ['#68F4DD', 'transparent', '#FFDD69', 'transparent', '#3CC3F0', 'transparent', '#5C8CFE', 'transparent', '#51D5AD', 'transparent'],
title: [ title: [
{ {
text:'999', text: "999",
top: '27%', top: "27%",
textAlign: 'center', textAlign: "center",
left: '49%', left: "49%",
textStyle: { textStyle: {
color: '#ffffff', color: "#ffffff",
fontSize: 30, fontSize: 30,
fontFamily: 'PangMenZhengDao', fontFamily: "PangMenZhengDao",
}, },
}, },
{ {
text: '总数', text: "总数",
top: '38%', top: "38%",
textAlign: 'center', textAlign: "center",
left: '49%', left: "49%",
textStyle: { textStyle: {
color: 'rgba(242, 252, 253, 0.84)', color: "rgba(242, 252, 253, 0.84)",
fontSize: 14, fontSize: 14,
fontWeight: 400, fontWeight: 400,
}, },
}, },
], ],
grid: { grid: {
top: '3%', top: "3%",
left: '6%', left: "6%",
right: '6%', right: "6%",
bottom: '3%', bottom: "3%",
containLabel: true containLabel: true,
}, },
tooltip: { tooltip: {
trigger: 'item', trigger: "item",
formatter: '{b} : {c}:{d}' // formatter: "{b} : {c}:{d}",
}, },
legend: { legend: {
orient: '', orient: "vertical",
left: '10%', // width: "350px",
top: '68%', height: "80px",
// left: "10%",
top: "68%",
itemWidth: 10, itemWidth: 10,
itemHeight: 10, itemHeight: 10,
icon:"circle", icon: "circle",
textStyle: { textStyle: {
color: "#ffffff", color: "#ffffff",
fontSize: 14, fontSize: 12,
lineHeight: 22, lineHeight: 22,
rich: { rich: {
text: { text: {
marginLeft:32, width: 80,
marginLeft: 32,
fontSize: 14, fontSize: 14,
}, },
number: { number: {
fontSize: 14, fontSize: 14,
color: "#37E7FF", color: "#37E7FF",
marginLeft:32, marginLeft: 32,
fontWeight: 'bold' fontWeight: "bold",
}, },
unit: { unit: {
fontSize: 14, fontSize: 14,
} },
} },
}, },
data: legendData, data: legendData,
formatter(name) { formatter(name) {
@ -115,242 +115,250 @@ var res = [
} }
} }
var percert = total == 0 ? 0 : ((tarValue / total) * 100).toFixed(2); var percert = total == 0 ? 0 : ((tarValue / total) * 100).toFixed(2);
const arr = name + ' ' + tarValue; const arr = name + " " + tarValue;
return `{text|${name}} {number|${percert}%}`;; return `{text|${name}} {number|${percert}%}`;
}, },
pageIconColor: "#fff",
pageIconSize: 10,
pageTextStyle: {
color: "#fff",
},
type: "scroll",
pageButtonPosition: "end",
}, },
series: [ series: [
/** 饼图上刻度 */ /** 饼图上刻度 */
{ {
type: 'gauge', type: "gauge",
center: ['50%', '35%'], center: ["50%", "35%"],
radius: '46%', // 错位调整此处 radius: "46%", // 错位调整此处
startAngle: 0, startAngle: 0,
endAngle: 360, endAngle: 360,
splitNumber: 52, splitNumber: 52,
axisLine: { show: false }, axisLine: { show: false },
splitLine: { splitLine: {
// length: 39, // length: 39,
length: '2', length: "2",
lineStyle: { lineStyle: {
width: 5, width: 5,
color: '#5CC5FF' color: "#5CC5FF",
} },
}, },
axisTick: { show: false }, axisTick: { show: false },
axisLabel: { show: false } axisLabel: { show: false },
}, },
/** 绘制外部圆弧-2-开始圆点 <left-top> */ /** 绘制外部圆弧-2-开始圆点 <left-top> */
{ {
type: 'custom', type: "custom",
coordinateSystem: 'none', coordinateSystem: "none",
renderItem: (params, api) => { renderItem: (params, api) => {
let x0 = api.getWidth() / 2; let x0 = api.getWidth() / 2;
let y0 = api.getHeight() / 2 - 59; 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 { return {
type: 'circle', type: "circle",
shape: { shape: {
/** 角度175° 外弧2开始角度 */ /** 角度175° 外弧2开始角度 */
cx: x0 + r * Math.cos((350 + -angle) * Math.PI / 180), cx: x0 + r * Math.cos(((350 + -angle) * Math.PI) / 180),
cy: y0 + r * Math.sin((350 + -angle) * Math.PI / 180), cy: y0 + r * Math.sin(((350 + -angle) * Math.PI) / 180),
r: 4 r: 4,
}, },
style: { style: {
fill: '#5BC4FF', fill: "#5BC4FF",
stroke: '#5BC4FF' stroke: "#5BC4FF",
}, },
silent: true silent: true,
} };
}, },
data: [0] data: [0],
}, },
{ {
type: 'custom', type: "custom",
coordinateSystem: 'none', coordinateSystem: "none",
renderItem: (params, api) => { renderItem: (params, api) => {
return { return {
type: 'arc', type: "arc",
shape: { shape: {
cx: api.getWidth() / 2, cx: api.getWidth() / 2,
cy: api.getHeight() / 2 - 59, cy: api.getHeight() / 2 - 59,
r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.50, r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.5,
startAngle: (350 + -angle) * Math.PI / 180, startAngle: ((350 + -angle) * Math.PI) / 180,
endAngle: (120 + -angle) * Math.PI / 180 endAngle: ((120 + -angle) * Math.PI) / 180,
}, },
style: { style: {
fill: 'transparent', fill: "transparent",
stroke: '#5BC4FF66', stroke: "#5BC4FF66",
lineWidth: 2.6 lineWidth: 2.6,
}, },
silent: true silent: true,
} };
}, },
data: [0] data: [0],
}, },
{ {
type: 'custom', type: "custom",
coordinateSystem: 'none', coordinateSystem: "none",
renderItem: (params, api) => { renderItem: (params, api) => {
let x0 = api.getWidth() / 2; let x0 = api.getWidth() / 2;
let y0 = api.getHeight() / 2 - 59; 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 { return {
type: 'circle', type: "circle",
shape: { shape: {
/** 角度175° 外弧2开始角度 */ /** 角度175° 外弧2开始角度 */
cx: x0 + r * Math.cos((150 + -angle) * Math.PI / 180), cx: x0 + r * Math.cos(((150 + -angle) * Math.PI) / 180),
cy: y0 + r * Math.sin((150 + -angle) * Math.PI / 180), cy: y0 + r * Math.sin(((150 + -angle) * Math.PI) / 180),
r: 4 r: 4,
}, },
style: { style: {
fill: '#5BC4FF', fill: "#5BC4FF",
stroke: '#5BC4FF' stroke: "#5BC4FF",
}, },
silent: true silent: true,
} };
}, },
data: [0] data: [0],
}, },
{ {
type: 'custom', type: "custom",
coordinateSystem: 'none', coordinateSystem: "none",
renderItem: (params, api) => { renderItem: (params, api) => {
return { return {
type: 'arc', type: "arc",
shape: { shape: {
cx: api.getWidth() / 2, cx: api.getWidth() / 2,
cy: api.getHeight() / 2 - 59, cy: api.getHeight() / 2 - 59,
r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.50, r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.5,
startAngle: (150 + -angle) * Math.PI / 180, startAngle: ((150 + -angle) * Math.PI) / 180,
endAngle: (-30 + -angle) * Math.PI / 180 endAngle: ((-30 + -angle) * Math.PI) / 180,
}, },
style: { style: {
fill: 'transparent', fill: "transparent",
stroke: '#5BC4FF66', stroke: "#5BC4FF66",
lineWidth: 2.6 lineWidth: 2.6,
}, },
silent: true silent: true,
} };
}, },
data: [0] data: [0],
}, },
{ {
type: 'custom', type: "custom",
coordinateSystem: 'none', coordinateSystem: "none",
renderItem: (params, api) => { renderItem: (params, api) => {
let x0 = api.getWidth() / 2; let x0 = api.getWidth() / 2;
let y0 = api.getHeight() / 2 - 59; let y0 = api.getHeight() / 2 - 59;
let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.56; let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.56;
return { return {
type: 'circle', type: "circle",
shape: { shape: {
/** 角度175° 外弧2开始角度 */ /** 角度175° 外弧2开始角度 */
cx: x0 + r * Math.cos((590 + -angle) * Math.PI / 180), cx: x0 + r * Math.cos(((590 + -angle) * Math.PI) / 180),
cy: y0 + r * Math.sin((590 + -angle) * Math.PI / 180), cy: y0 + r * Math.sin(((590 + -angle) * Math.PI) / 180),
r: 4 r: 4,
}, },
style: { style: {
fill: '#5BC4FF', fill: "#5BC4FF",
stroke: '#5BC4FF' stroke: "#5BC4FF",
}, },
silent: true silent: true,
} };
}, },
data: [0] data: [0],
}, },
{ {
type: 'custom', type: "custom",
coordinateSystem: 'none', coordinateSystem: "none",
renderItem: (params, api) => { renderItem: (params, api) => {
return { return {
type: 'arc', type: "arc",
shape: { shape: {
cx: api.getWidth() / 2, cx: api.getWidth() / 2,
cy: api.getHeight() / 2 - 59, cy: api.getHeight() / 2 - 59,
r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.56, r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.56,
startAngle: (590 + -angle) * Math.PI / 180, startAngle: ((590 + -angle) * Math.PI) / 180,
endAngle: (350 + -angle) * Math.PI / 180 endAngle: ((350 + -angle) * Math.PI) / 180,
}, },
style: { style: {
fill: 'transparent', fill: "transparent",
stroke: '#5BC4FF66', stroke: "#5BC4FF66",
lineWidth: 2.6 lineWidth: 2.6,
}, },
silent: true silent: true,
} };
}, },
data: [0] data: [0],
}, },
{ {
type: 'custom', type: "custom",
coordinateSystem: 'none', coordinateSystem: "none",
renderItem: (params, api) => { renderItem: (params, api) => {
let x0 = api.getWidth() / 2; let x0 = api.getWidth() / 2;
let y0 = api.getHeight() / 2 - 59; let y0 = api.getHeight() / 2 - 59;
let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.56; let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.56;
return { return {
type: 'circle', type: "circle",
shape: { shape: {
/** 角度175° 外弧2开始角度 */ /** 角度175° 外弧2开始角度 */
cx: x0 + r * Math.cos((90 + -angle) * Math.PI / 180), cx: x0 + r * Math.cos(((90 + -angle) * Math.PI) / 180),
cy: y0 + r * Math.sin((90 + -angle) * Math.PI / 180), cy: y0 + r * Math.sin(((90 + -angle) * Math.PI) / 180),
r: 4 r: 4,
}, },
style: { style: {
fill: '#5BC4FF', fill: "#5BC4FF",
stroke: '#5BC4FF' stroke: "#5BC4FF",
}, },
silent: true silent: true,
} };
}, },
data: [0] data: [0],
}, },
{ {
type: 'custom', type: "custom",
coordinateSystem: 'none', coordinateSystem: "none",
renderItem: (params, api) => { renderItem: (params, api) => {
return { return {
type: 'arc', type: "arc",
shape: { shape: {
cx: api.getWidth() / 2, cx: api.getWidth() / 2,
cy: api.getHeight() / 2 - 59, cy: api.getHeight() / 2 - 59,
r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.56, r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.56,
startAngle: (90 + -angle) * Math.PI / 180, startAngle: ((90 + -angle) * Math.PI) / 180,
endAngle: (160 + -angle) * Math.PI / 180 endAngle: ((160 + -angle) * Math.PI) / 180,
}, },
style: { style: {
fill: 'transparent', fill: "transparent",
stroke: '#5BC4FF66', stroke: "#5BC4FF66",
lineWidth: 2.6 lineWidth: 2.6,
}, },
silent: true silent: true,
} };
}, },
data: [0] data: [0],
}, },
{ {
type: 'pie', type: "pie",
radius: ['45%', '40%'], radius: ["45%", "40%"],
center: ['50%', '35%'], center: ["50%", "35%"],
z: 10, z: 10,
label: { label: {
show: false, show: false,
position: 'center', position: "center",
formatter: (params) => { formatter: (params) => {
return params.name + "\r\n" + params.value return params.name + "\r\n" + params.value;
}, },
rich: { rich: {
total: { total: {
fontSize: 16, fontSize: 16,
color: '#04F5FE', color: "#04F5FE",
}, },
efficiency: { efficiency: {
fontSize: 12, fontSize: 12,
color: '#00FD6D', color: "#00FD6D",
}, },
}, },
color: '#FFFFFF', color: "#FFFFFF",
fontSize: 12, fontSize: 12,
lineHeight: 16, lineHeight: 16,
}, },
@ -359,17 +367,23 @@ var res = [
show: false, show: false,
}, },
itemStyle: { itemStyle: {
// normal: {
// borderWidth: 4,
// shadowBlur: 10,
// borderRadius: 50, // 圆角
// },
normal: { normal: {
borderWidth: 6, borderRadius: "5",
shadowBlur: 10, borderWidth: 4,
borderRadius: 50, // 圆角 borderType: "solid",
} borderColor: "#0C2D3A",
} },
},
}, },
{ {
type: 'pie', type: "pie",
radius: ['29%', '40%'], radius: ["29%", "40%"],
center: ['50%', '35%'], center: ["50%", "35%"],
label: { label: {
show: false, show: false,
}, },
@ -379,14 +393,14 @@ var res = [
}, },
itemStyle: { itemStyle: {
normal: { normal: {
borderWidth: 6, borderRadius: "5",
shadowBlur: 10, borderWidth: 8,
borderRadius: 0, // 圆角 borderType: "solid",
} borderColor: "#0C2D3A",
} },
},
}, },
], ],
};
}; export default options;
export default options

391
ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/eventTypeAnalysis/assets/charts.js
View File

@ -1,24 +1,15 @@
var res = [ var res = [
{ value: 20, name: '交通事故' }, { value: 20, name: "交通事故" },
{ value: 1, name: '' }, { value: 20, name: "车辆故障" },
{ value: 20, name: '车辆故障' }, { value: 15, name: "路障清除" },
{ value: 1, name: '' }, { value: 10, name: "交通管制" },
{ value: 15, name: '路障清除' }, { value: 5, name: "道路拥堵" },
{ value: 1, name: '' }, { value: 5, name: "异常天气" },
{ value: 10, name: '交通管制' }, { value: 5, name: "其他事件" },
{ value: 1, name: '' }, { value: 10, name: "施工建设" },
{ value: 5, name: '道路拥堵' }, { value: 10, name: "服务区异常" },
{ value: 1, name: '' }, ];
{ value: 5, name: '异常天气' }, let angle = 0; //角度，用来做简单的动画效果的
{ value: 1, name: '' },
{ value: 5, name: '其他事件' },
{ value: 1, name: '' },
{ value: 10, name: '施工建设' },
{ value: 1, name: '' },
{ value: 10, name: '服务区异常' },
{ value: 1, name: '' },
];
let angle = 0; //角度，用来做简单的动画效果的
//获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度) //获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
function getCirlPoint(x0, y0, r, angle) { function getCirlPoint(x0, y0, r, angle) {
@ -30,23 +21,26 @@ function getCirlPoint(x0, y0, r, angle) {
}; };
} }
// var res = this.evaluatedCountList; // var res = this.evaluatedCountList;
var data1 = [], data2 = [], data3 = [], legendData = []; var data1 = [],
var curIndex = 0; data2 = [],
var index = 0; data3 = [],
legendData = [];
var curIndex = 0;
var index = 0;
for (var i = 0; i < res.length; i++) { for (var i = 0; i < res.length; i++) {
data1.push({ data1.push({
value: res[i].value, value: res[i].value,
name: res[i].name, name: res[i].name,
}) });
data2.push({ data2.push({
value: res[i].value, value: res[i].value,
name: res[i].name, name: res[i].name,
itemStyle: { itemStyle: {
opacity: 0.4, opacity: 0.4,
}, },
}) });
data3.push({ data3.push({
value: res[i].value, value: res[i].value,
@ -54,74 +48,85 @@ function getCirlPoint(x0, y0, r, angle) {
itemStyle: { itemStyle: {
opacity: 0.1, opacity: 0.1,
}, },
}) });
if ( res[i].name != "" ) if (res[i].name != "") legendData.push(res[i].name);
legendData.push(res[i].name); }
}
var options = { var options = {
color: ['#2867FF', 'transparent', '#58C3FF', 'transparent', '#FF6A3B', 'transparent','#FDA474', 'transparent','#FEE58F','transparent', '#8DFEBF','transparent', '#66F4DC', 'transparent','#33E27D', 'transparent','#5D8CFE','transparent',], color: [
"#2867FF",
"#58C3FF",
"#FF6A3B",
"#FDA474",
"#FEE58F",
"#8DFEBF",
"#66F4DC",
"#33E27D",
"#5D8CFE",
],
title: [ title: [
{ {
text:'999', text: "999",
top: '27%', top: "27%",
textAlign: 'center', textAlign: "center",
left: '49%', left: "49%",
textStyle: { textStyle: {
color: '#ffffff', color: "#ffffff",
fontSize: 30, fontSize: 30,
fontFamily: 'PangMenZhengDao', fontFamily: "PangMenZhengDao",
}, },
}, },
{ {
text: '总数', text: "总数",
top: '38%', top: "38%",
textAlign: 'center', textAlign: "center",
left: '49%', left: "49%",
textStyle: { textStyle: {
color: 'rgba(242, 252, 253, 0.84)', color: "rgba(242, 252, 253, 0.84)",
fontSize: 14, fontSize: 14,
fontWeight: 400, fontWeight: 400,
}, },
}, },
], ],
grid: { grid: {
top: '38%', top: "38%",
left: '6%', left: "6%",
right: '6%', right: "6%",
bottom: '3%', bottom: "3%",
containLabel: true containLabel: true,
}, },
tooltip: { tooltip: {
trigger: 'item', trigger: "item",
formatter: '{b} : {c}:{d}' // formatter: "{b} : {c}:{d}",
}, },
legend: { legend: {
orient: '', orient: "vertical",
left: '0%', height: "80px",
top: '68%', // left: "0%",
top: "68%",
itemWidth: 10, itemWidth: 10,
itemHeight: 10, itemHeight: 10,
icon:"circle", icon: "circle",
textStyle: { textStyle: {
color: "#ffffff", color: "#ffffff",
fontSize: 14, fontSize: 14,
lineHeight: 22, lineHeight: 22,
rich: { rich: {
text: { text: {
marginLeft:32, width: 80,
marginLeft: 32,
fontSize: 14, fontSize: 14,
}, },
number: { number: {
fontSize: 14, fontSize: 14,
color: "#37E7FF", color: "#37E7FF",
marginLeft:32, marginLeft: 32,
fontWeight: 'bold' fontWeight: "bold",
}, },
unit: { unit: {
fontSize: 14, fontSize: 14,
} },
} },
}, },
data: legendData, data: legendData,
formatter(name) { formatter(name) {
@ -135,242 +140,249 @@ function getCirlPoint(x0, y0, r, angle) {
} }
} }
var percert = total == 0 ? 0 : ((tarValue / total) * 100).toFixed(2); var percert = total == 0 ? 0 : ((tarValue / total) * 100).toFixed(2);
const arr = name + ' ' + tarValue; const arr = name + " " + tarValue;
return `{text|${name}} {number|${percert}%}`;; return `{text|${name}} {number|${percert}%}`;
}, },
pageIconColor: "#fff",
pageIconSize: 10,
pageTextStyle: {
color: "#fff",
},
type: "scroll",
pageButtonPosition: "end",
}, },
series: [ series: [
/** 饼图上刻度 */ /** 饼图上刻度 */
{ {
type: 'gauge', type: "gauge",
center: ['50%', '35%'], center: ["50%", "35%"],
radius: '46%', // 错位调整此处 radius: "46%", // 错位调整此处
startAngle: 0, startAngle: 0,
endAngle: 360, endAngle: 360,
splitNumber: 52, splitNumber: 52,
axisLine: { show: false }, axisLine: { show: false },
splitLine: { splitLine: {
// length: 39, // length: 39,
length: '2', length: "2",
lineStyle: { lineStyle: {
width: 5, width: 5,
color: '#5CC5FF' color: "#5CC5FF",
} },
}, },
axisTick: { show: false }, axisTick: { show: false },
axisLabel: { show: false } axisLabel: { show: false },
}, },
/** 绘制外部圆弧-2-开始圆点 <left-top> */ /** 绘制外部圆弧-2-开始圆点 <left-top> */
{ {
type: 'custom', type: "custom",
coordinateSystem: 'none', coordinateSystem: "none",
renderItem: (params, api) => { renderItem: (params, api) => {
let x0 = api.getWidth() / 2; let x0 = api.getWidth() / 2;
let y0 = api.getHeight() / 2 - 59; 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 { return {
type: 'circle', type: "circle",
shape: { shape: {
/** 角度175° 外弧2开始角度 */ /** 角度175° 外弧2开始角度 */
cx: x0 + r * Math.cos((350 + -angle) * Math.PI / 180), cx: x0 + r * Math.cos(((350 + -angle) * Math.PI) / 180),
cy: y0 + r * Math.sin((350 + -angle) * Math.PI / 180), cy: y0 + r * Math.sin(((350 + -angle) * Math.PI) / 180),
r: 4 r: 4,
}, },
style: { style: {
fill: '#5BC4FF', fill: "#5BC4FF",
stroke: '#5BC4FF' stroke: "#5BC4FF",
}, },
silent: true silent: true,
} };
}, },
data: [0] data: [0],
}, },
{ {
type: 'custom', type: "custom",
coordinateSystem: 'none', coordinateSystem: "none",
renderItem: (params, api) => { renderItem: (params, api) => {
return { return {
type: 'arc', type: "arc",
shape: { shape: {
cx: api.getWidth() / 2, cx: api.getWidth() / 2,
cy: api.getHeight() / 2 - 59, cy: api.getHeight() / 2 - 59,
r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.50, r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.5,
startAngle: (350 + -angle) * Math.PI / 180, startAngle: ((350 + -angle) * Math.PI) / 180,
endAngle: (120 + -angle) * Math.PI / 180 endAngle: ((120 + -angle) * Math.PI) / 180,
}, },
style: { style: {
fill: 'transparent', fill: "transparent",
stroke: '#5BC4FF66', stroke: "#5BC4FF66",
lineWidth: 2.6 lineWidth: 2.6,
}, },
silent: true silent: true,
} };
}, },
data: [0] data: [0],
}, },
{ {
type: 'custom', type: "custom",
coordinateSystem: 'none', coordinateSystem: "none",
renderItem: (params, api) => { renderItem: (params, api) => {
let x0 = api.getWidth() / 2; let x0 = api.getWidth() / 2;
let y0 = api.getHeight() / 2 - 59; 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 { return {
type: 'circle', type: "circle",
shape: { shape: {
/** 角度175° 外弧2开始角度 */ /** 角度175° 外弧2开始角度 */
cx: x0 + r * Math.cos((150 + -angle) * Math.PI / 180), cx: x0 + r * Math.cos(((150 + -angle) * Math.PI) / 180),
cy: y0 + r * Math.sin((150 + -angle) * Math.PI / 180), cy: y0 + r * Math.sin(((150 + -angle) * Math.PI) / 180),
r: 4 r: 4,
}, },
style: { style: {
fill: '#5BC4FF', fill: "#5BC4FF",
stroke: '#5BC4FF' stroke: "#5BC4FF",
}, },
silent: true silent: true,
} };
}, },
data: [0] data: [0],
}, },
{ {
type: 'custom', type: "custom",
coordinateSystem: 'none', coordinateSystem: "none",
renderItem: (params, api) => { renderItem: (params, api) => {
return { return {
type: 'arc', type: "arc",
shape: { shape: {
cx: api.getWidth() / 2, cx: api.getWidth() / 2,
cy: api.getHeight() / 2 - 59, cy: api.getHeight() / 2 - 59,
r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.50, r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.5,
startAngle: (150 + -angle) * Math.PI / 180, startAngle: ((150 + -angle) * Math.PI) / 180,
endAngle: (-30 + -angle) * Math.PI / 180 endAngle: ((-30 + -angle) * Math.PI) / 180,
}, },
style: { style: {
fill: 'transparent', fill: "transparent",
stroke: '#5BC4FF66', stroke: "#5BC4FF66",
lineWidth: 2.6 lineWidth: 2.6,
}, },
silent: true silent: true,
} };
}, },
data: [0] data: [0],
}, },
{ {
type: 'custom', type: "custom",
coordinateSystem: 'none', coordinateSystem: "none",
renderItem: (params, api) => { renderItem: (params, api) => {
let x0 = api.getWidth() / 2; let x0 = api.getWidth() / 2;
let y0 = api.getHeight() / 2 - 59; let y0 = api.getHeight() / 2 - 59;
let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.56; let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.56;
return { return {
type: 'circle', type: "circle",
shape: { shape: {
/** 角度175° 外弧2开始角度 */ /** 角度175° 外弧2开始角度 */
cx: x0 + r * Math.cos((590 + -angle) * Math.PI / 180), cx: x0 + r * Math.cos(((590 + -angle) * Math.PI) / 180),
cy: y0 + r * Math.sin((590 + -angle) * Math.PI / 180), cy: y0 + r * Math.sin(((590 + -angle) * Math.PI) / 180),
r: 4 r: 4,
}, },
style: { style: {
fill: '#5BC4FF', fill: "#5BC4FF",
stroke: '#5BC4FF' stroke: "#5BC4FF",
}, },
silent: true silent: true,
} };
}, },
data: [0] data: [0],
}, },
{ {
type: 'custom', type: "custom",
coordinateSystem: 'none', coordinateSystem: "none",
renderItem: (params, api) => { renderItem: (params, api) => {
return { return {
type: 'arc', type: "arc",
shape: { shape: {
cx: api.getWidth() / 2, cx: api.getWidth() / 2,
cy: api.getHeight() / 2 - 59, cy: api.getHeight() / 2 - 59,
r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.56, r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.56,
startAngle: (590 + -angle) * Math.PI / 180, startAngle: ((590 + -angle) * Math.PI) / 180,
endAngle: (350 + -angle) * Math.PI / 180 endAngle: ((350 + -angle) * Math.PI) / 180,
}, },
style: { style: {
fill: 'transparent', fill: "transparent",
stroke: '#5BC4FF66', stroke: "#5BC4FF66",
lineWidth: 2.6 lineWidth: 2.6,
}, },
silent: true silent: true,
} };
}, },
data: [0] data: [0],
}, },
{ {
type: 'custom', type: "custom",
coordinateSystem: 'none', coordinateSystem: "none",
renderItem: (params, api) => { renderItem: (params, api) => {
let x0 = api.getWidth() / 2; let x0 = api.getWidth() / 2;
let y0 = api.getHeight() / 2 - 59; let y0 = api.getHeight() / 2 - 59;
let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.56; let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.56;
return { return {
type: 'circle', type: "circle",
shape: { shape: {
/** 角度175° 外弧2开始角度 */ /** 角度175° 外弧2开始角度 */
cx: x0 + r * Math.cos((90 + -angle) * Math.PI / 180), cx: x0 + r * Math.cos(((90 + -angle) * Math.PI) / 180),
cy: y0 + r * Math.sin((90 + -angle) * Math.PI / 180), cy: y0 + r * Math.sin(((90 + -angle) * Math.PI) / 180),
r: 4 r: 4,
}, },
style: { style: {
fill: '#5BC4FF', fill: "#5BC4FF",
stroke: '#5BC4FF' stroke: "#5BC4FF",
}, },
silent: true silent: true,
} };
}, },
data: [0] data: [0],
}, },
{ {
type: 'custom', type: "custom",
coordinateSystem: 'none', coordinateSystem: "none",
renderItem: (params, api) => { renderItem: (params, api) => {
return { return {
type: 'arc', type: "arc",
shape: { shape: {
cx: api.getWidth() / 2, cx: api.getWidth() / 2,
cy: api.getHeight() / 2 - 59, cy: api.getHeight() / 2 - 59,
r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.56, r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.56,
startAngle: (90 + -angle) * Math.PI / 180, startAngle: ((90 + -angle) * Math.PI) / 180,
endAngle: (160 + -angle) * Math.PI / 180 endAngle: ((160 + -angle) * Math.PI) / 180,
}, },
style: { style: {
fill: 'transparent', fill: "transparent",
stroke: '#5BC4FF66', stroke: "#5BC4FF66",
lineWidth: 2.6 lineWidth: 2.6,
}, },
silent: true silent: true,
} };
}, },
data: [0] data: [0],
}, },
{ {
type: 'pie', type: "pie",
radius: ['45%', '40%'], radius: ["45%", "40%"],
center: ['50%', '35%'], center: ["50%", "35%"],
z: 10, z: 10,
label: { label: {
show: false, show: false,
position: 'center', position: "center",
formatter: (params) => { formatter: (params) => {
return params.name + "\r\n" + params.value return params.name + "\r\n" + params.value;
}, },
rich: { rich: {
total: { total: {
fontSize: 16, fontSize: 16,
color: '#04F5FE', color: "#04F5FE",
}, },
efficiency: { efficiency: {
fontSize: 12, fontSize: 12,
color: '#00FD6D', color: "#00FD6D",
}, },
}, },
color: '#FFFFFF', color: "#FFFFFF",
fontSize: 12, fontSize: 12,
lineHeight: 16, lineHeight: 16,
}, },
@ -380,16 +392,17 @@ function getCirlPoint(x0, y0, r, angle) {
}, },
itemStyle: { itemStyle: {
normal: { normal: {
borderWidth: 6, borderRadius: "5",
shadowBlur: 10, borderWidth: 4,
borderRadius: 50, // 圆角 borderType: "solid",
} borderColor: "#0C2D3A",
} },
},
}, },
{ {
type: 'pie', type: "pie",
radius: ['29%', '39%'], radius: ["29%", "39%"],
center: ['50%', '35%'], center: ["50%", "35%"],
label: { label: {
show: false, show: false,
}, },
@ -399,14 +412,14 @@ function getCirlPoint(x0, y0, r, angle) {
}, },
itemStyle: { itemStyle: {
normal: { normal: {
borderWidth: 6, borderRadius: "5",
shadowBlur: 10, borderWidth: 4,
borderRadius: 0, // 圆角 borderType: "solid",
} borderColor: "#0C2D3A",
} },
},
}, },
], ],
};
}; export default options;
export default options

52
ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/nucleusThrough/assets/charts3.js
View File

@ -19,25 +19,25 @@ 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 data3 = [200, 530, 920, 400, 600, 700, 300, 800, 900, 120, 570, 800];
let options = { let options = {
tooltip: { tooltip: {
show: false, show: true,
trigger: "axis", trigger: "axis",
axisPointer: { // axisPointer: {
// 坐标轴指示器，坐标轴触发有效 // // 坐标轴指示器，坐标轴触发有效
type: "shadow", // 默认为直线，可选为：'line' | 'shadow' // type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
}, // },
textStyle: { // textStyle: {
color: "#fff", // color: "#fff",
fontSize: 14, // fontSize: 14,
}, // },
backgroundColor: "rgba(3, 31, 71, .0)", //设置背景颜色 // backgroundColor: "rgba(3, 31, 71, .0)", //设置背景颜色
borderColor: "rgba(3, 31, 71, .0)", // borderColor: "rgba(3, 31, 71, .0)",
formatter: "健康监测<br>{b1}：{c1}人", // formatter: "健康监测<br>{b1}：{c1}人",
}, },
grid: { grid: {
left: "2%", left: "0",
right: "4%", right: "0",
top: "20%", top: "80px",
bottom: "10%", bottom: "25px",
containLabel: true, containLabel: true,
}, },
xAxis: { xAxis: {
@ -51,7 +51,7 @@ let options = {
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: "#1C82C5", color: "#2CC9EC",
}, },
}, },
axisLabel: { axisLabel: {
@ -60,17 +60,23 @@ let options = {
rotate: "1", rotate: "1",
margin: "20", margin: "20",
textStyle: { textStyle: {
fontSize: 12, fontSize: 10,
color: "#50A2C1", color: "#fff",
}, },
}, },
}, },
yAxis: [ yAxis: [
{ {
min: 0, name: "(起)",
nameTextStyle: {
color: "#fff",
fontSize: 10,
align: "right",
verticalAlign: "center",
},
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: "#1C82C5", color: "#1D7B93",
}, },
}, },
splitLine: { splitLine: {
@ -81,9 +87,9 @@ let options = {
}, },
}, },
axisLabel: { axisLabel: {
color: "#DEEBFF", color: "#fff",
textStyle: { textStyle: {
fontSize: 12, fontSize: 10,
}, },
}, },
axisTick: { axisTick: {

77
ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/nucleusThrough/index.vue
View File

@ -1,17 +1,37 @@
<template> <template>
<div class='congestion'> <div class="congestion">
<WgtTitle :title="'月审核通过趋势分析'"></WgtTitle> <WgtTitle :title="'月审核通过趋势分析'"></WgtTitle>
<div class="board"> <div class="board">
<div class="searchPanel_1"> <div class="searchPanel_1">
<el-date-picker size="mini" type="month" class="selectRoad" v-model="dateTime" style="width:140px;" <el-date-picker
placeholder="请选择" /> size="mini"
<el-quarter-picker size="mini" class="selectRoad" style="width:180px;" v-if="year == 'quarter'" v-model="quarter" type="month"
aria-placeholder="请选季度" /> class="selectRoad"
v-model="dateTime"
<el-button type="primary" size="mini" class="btnSearch" icon="el-icon-search">查询</el-button> style="width: 140px"
<el-button class="btnReset" size="mini" icon="el-icon-refresh-left">重置</el-button> 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>
<div class="charts keep-ratio " id="nucleusThrough"></div> <div class="charts keep-ratio" id="nucleusThrough"></div>
</div> </div>
</div> </div>
</template> </template>
@ -21,34 +41,30 @@ import WgtTitle from "@screen/pages/perception/widgets/title";
import * as echarts from "echarts"; import * as echarts from "echarts";
import chartsStatistics from "./assets/charts3"; import chartsStatistics from "./assets/charts3";
export default { export default {
name: 'nucleusThrough', name: "nucleusThrough",
components: { components: {
WgtTitle WgtTitle,
}, },
data() { data() {
return { return {
dateTime: "", dateTime: "",
} };
},
created() {
}, },
methods: {
}, created() {},
methods: {},
mounted() { mounted() {
setTimeout(() => { setTimeout(() => {
this.$nextTick(() => { this.$nextTick(() => {
var myChart = echarts.init(document.getElementById('nucleusThrough')); var myChart = echarts.init(document.getElementById("nucleusThrough"));
myChart.setOption(chartsStatistics); myChart.setOption(chartsStatistics);
}); });
}); });
}, },
} };
</script> </script>
<style lang='scss' scoped> <style lang="scss" scoped>
.congestion { .congestion {
width: 100%; width: 100%;
@ -61,18 +77,22 @@ export default {
border-radius: 5px 5px 5px 5px; border-radius: 5px 5px 5px 5px;
opacity: 1; opacity: 1;
border: 1px solid; border: 1px solid;
border-image: linear-gradient(360deg, rgba(55, 231, 255, 0.3), rgba(55, 231, 255, 0)) 1 1; border-image: linear-gradient(
360deg,
rgba(55, 231, 255, 0.3),
rgba(55, 231, 255, 0)
)
1 1;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
.searchPanel_1 { .searchPanel_1 {
position: absolute; position: absolute;
display: flex; display: flex;
align-items: center; align-items: center;
height: 40px; height: 40px;
width: 100%; width: 50%;
font-size: 14px; font-size: 14px;
margin-bottom: 10px; margin-bottom: 10px;
left: 20px; left: 20px;
@ -102,7 +122,7 @@ export default {
.selectRoad { .selectRoad {
width: 89px; width: 89px;
border: 1px solid #00B3CC; border: 1px solid #00b3cc;
::v-deep { ::v-deep {
.el-input__inner { .el-input__inner {
@ -113,19 +133,17 @@ export default {
} }
.btnSearch { .btnSearch {
background: linear-gradient(180deg, #005C79 0%, #009BCC 100%); background: linear-gradient(180deg, #005c79 0%, #009bcc 100%);
margin-left: 10px; margin-left: 10px;
border-color: transparent; border-color: transparent;
} }
.btnReset { .btnReset {
background: linear-gradient(180deg, #005C79 0%, #009BCC 100%); background: linear-gradient(180deg, #005c79 0%, #009bcc 100%);
;
border-color: transparent; border-color: transparent;
color: white; color: white;
} }
} }
} }
} }
@ -134,4 +152,3 @@ export default {
width: 100%; width: 100%;
} }
</style> </style>

197
ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/postTrendsDay/assets/charts.js
View File

@ -1,8 +1,22 @@
/* 数据 */ /* 数据 */
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 nameList = [
let valueList = [800, 520, 650, 950, 420, 600, 450, 720, 303, 503 , 203 ,703 , 903 ]; // 人数 "00:00",
var yList = [ "1000","800","轻度拥堵","基本畅通","畅通"] "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 = []; let dataList = [];
nameList.map((item, index) => { nameList.map((item, index) => {
@ -12,87 +26,91 @@ nameList.map((item, index) => {
value: valueList[index], value: valueList[index],
itemStyle: { itemStyle: {
color: { color: {
type: 'linear', type: "linear",
x: 0, x: 0,
y: 0, y: 0,
x2: 0, x2: 0,
y2: 1, y2: 1,
colorStops: [{ colorStops: [
offset: 0, color: '#FFB904' // 0% 处的颜色 {
}, { offset: 0,
offset: 1, color: '#FF6969' // 100% 处的颜色 color: "#FFB904", // 0% 处的颜色
}], },
global: false // 缺省为 false {
offset: 1,
color: "#FF6969", // 100% 处的颜色
},
],
global: false, // 缺省为 false
}, },
borderRadius: 6 borderRadius: 6,
}, },
label: { show: false } label: { show: false },
}) });
} else { } else {
dataList.push({ dataList.push({
name: item, name: item,
value: valueList[index], value: valueList[index],
itemStyle:{ itemStyle: {
borderRadius: 6 borderRadius: 6,
} },
}) });
} }
}) });
var options = { var options = {
tooltip: {
show: true,
trigger: "axis",
},
legend: { legend: {
// orient: 'vertical', // orient: 'vertical',
icon: "circle", icon: "circle",
itemHeight: 8, itemHeight: 8,
itemWidth: 8, itemWidth: 8,
top: "5%", top: "20px",
x: "right", x: "right",
textStyle: { textStyle: {
color: "#fff", color: "#fff",
}, },
}, },
grid: { grid: {
top: '15%',//上边距 top: "75px", //上边距
right: '0',//右边距 right: "0", //右边距
left: '0',//左边距 left: "0", //左边距
bottom: "10%",//下边距 bottom: "20px", //下边距
containLabel: true, containLabel: true,
}, },
xAxis: { xAxis: {
type: 'category', type: "category",
data: nameList, data: nameList,
axisTick: { axisTick: {
show: false //隐藏X轴刻度 show: false, //隐藏X轴刻度
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: "rgba(49, 217, 255, 0.8)" color: "rgba(49, 217, 255, 0.8)",
} },
}, },
axisLabel: { axisLabel: {
show: true, show: true,
color: '#B6E6FF', color: "#fff",
fontSize:8, fontSize: 10,
fontFamily: 'Source Han Sans CN-Regular',
}, },
}, },
yAxis: [{ yAxis: [
type: 'value', {
name: "", type: "value",
max: 1200, name: "(起)",
min:0,
splitNumber:5,
nameTextStyle: { nameTextStyle: {
color: '#B6E6FF', color: "#fff",
fontSize: 13, fontSize: 10,
fontFamily: 'Source Han Sans CN-Regular', align: "right",
align: "left",
verticalAlign: "center", verticalAlign: "center",
}, },
axisLabel: { axisLabel: {
fontSize: 13, fontSize: 10,
color: '#B6E6FF', color: "#fff",
fontFamily: 'HarmonyOS Sans-Regular',
// formatter:function(value,index){ // formatter:function(value,index){
// return yList[index] // return yList[index]
// } // }
@ -101,26 +119,27 @@ var options = {
show: false, show: false,
}, },
axisTick: { axisTick: {
show: false show: false,
}, },
splitLine: { splitLine: {
lineStyle: { lineStyle: {
color: 'rgba(49, 217, 255, 0.5)', color: "rgba(49, 217, 255, 0.5)",
} },
},
}, },
}], ],
series: [ series: [
{ {
name: '情报板发布', name: "情报板发布",
type: 'line', type: "line",
symbol: 'circle', symbol: "circle",
symbolSize: 0, symbolSize: 0,
smooth: true, smooth: true,
areaStyle: { areaStyle: {
width: 4, width: 4,
opacity: 0.25, opacity: 0.25,
color: { color: {
type: 'linear', type: "linear",
x: 0, x: 0,
y: 0, y: 0,
x2: 0, x2: 0,
@ -134,23 +153,25 @@ var options = {
}, },
// yAxisIndex: 1, // 与第二个 y 轴关联 // yAxisIndex: 1, // 与第二个 y 轴关联
itemStyle: { itemStyle: {
color: '#32BB8A', color: "#32BB8A",
}, },
lineStyle: { lineStyle: {
width:2, width: 2,
}, },
data: [1000, 800, 520, 600, 900, 700, 700,1000, 800, 520, 600, 900, 700, 700], // 折线图的数据 data: [
1000, 800, 520, 600, 900, 700, 700, 1000, 800, 520, 600, 900, 700, 700,
], // 折线图的数据
}, },
{ {
name: '服务网站', name: "服务网站",
type: 'line', type: "line",
symbol: 'circle', symbol: "circle",
symbolSize: 0, symbolSize: 0,
// yAxisIndex: 1, // 与第二个 y 轴关联 // yAxisIndex: 1, // 与第二个 y 轴关联
itemStyle: { itemStyle: {
color: '#08BAF4', color: "#08BAF4",
}, },
lineStyle: { lineStyle: {
width: 2, width: 2,
@ -160,7 +181,7 @@ var options = {
width: 4, width: 4,
opacity: 0.25, opacity: 0.25,
color: { color: {
type: 'linear', type: "linear",
x: 0, x: 0,
y: 0, y: 0,
x2: 0, x2: 0,
@ -172,23 +193,25 @@ var options = {
global: false, global: false,
}, },
}, },
data: [600, 700, 900, 400, 500, 800, 600,600, 700, 900, 400, 500, 800, 600], // 折线图的数据 data: [
600, 700, 900, 400, 500, 800, 600, 600, 700, 900, 400, 500, 800, 600,
], // 折线图的数据
}, },
{ {
name: '微信发布', name: "微信发布",
type: 'line', type: "line",
symbol: 'circle', symbol: "circle",
symbolSize: 0, symbolSize: 0,
// yAxisIndex: 1, // 与第二个 y 轴关联 // yAxisIndex: 1, // 与第二个 y 轴关联
itemStyle: { itemStyle: {
color: '#E2BA74', color: "#E2BA74",
}, },
smooth: true, smooth: true,
areaStyle: { areaStyle: {
width: 4, width: 4,
opacity: 0.25, opacity: 0.25,
color: { color: {
type: 'linear', type: "linear",
x: 0, x: 0,
y: 0, y: 0,
x2: 0, x2: 0,
@ -203,22 +226,25 @@ var options = {
lineStyle: { lineStyle: {
width: 2, width: 2,
}, },
data: [850, 810, 712, 580, 480, 480, 780,850, 810, 712, 580, 480, 480, 780], // 折线图的数据 data: [
},{ 850, 810, 712, 580, 480, 480, 780, 850, 810, 712, 580, 480, 480, 780,
name: '微博发布', ], // 折线图的数据
type: 'line', },
symbol: 'circle', {
name: "微博发布",
type: "line",
symbol: "circle",
symbolSize: 0, symbolSize: 0,
// yAxisIndex: 1, // 与第二个 y 轴关联 // yAxisIndex: 1, // 与第二个 y 轴关联
itemStyle: { itemStyle: {
color: '#51BFA4', color: "#51BFA4",
}, },
smooth: true, smooth: true,
areaStyle: { areaStyle: {
width: 4, width: 4,
opacity: 0.25, opacity: 0.25,
color: { color: {
type: 'linear', type: "linear",
x: 0, x: 0,
y: 0, y: 0,
x2: 0, x2: 0,
@ -233,22 +259,25 @@ var options = {
lineStyle: { lineStyle: {
width: 2, width: 2,
}, },
data: [850, 810, 712, 580, 480, 480, 780,850, 810, 712, 580, 480, 480, 780], // 折线图的数据 data: [
},{ 850, 810, 712, 580, 480, 480, 780, 850, 810, 712, 580, 480, 480, 780,
name: '短信发布', ], // 折线图的数据
type: 'line', },
symbol: 'circle', {
name: "短信发布",
type: "line",
symbol: "circle",
symbolSize: 0, symbolSize: 0,
// yAxisIndex: 1, // 与第二个 y 轴关联 // yAxisIndex: 1, // 与第二个 y 轴关联
itemStyle: { itemStyle: {
color: '#08BAF4', color: "#08BAF4",
}, },
smooth: true, smooth: true,
areaStyle: { areaStyle: {
width: 4, width: 4,
opacity: 0.25, opacity: 0.25,
color: { color: {
type: 'linear', type: "linear",
x: 0, x: 0,
y: 0, y: 0,
x2: 0, x2: 0,
@ -263,9 +292,11 @@ var options = {
lineStyle: { lineStyle: {
width: 2, width: 2,
}, },
data: [850, 410, 712, 680, 50, 280, 480,850, 810, 712, 580, 480, 480, 780], // 折线图的数据 data: [
850, 410, 712, 680, 50, 280, 480, 850, 810, 712, 580, 480, 480, 780,
], // 折线图的数据
}, },
] ],
} };
export default options; export default options;

186
ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/postTrendsMonth/assets/charts.js
View File

@ -1,8 +1,22 @@
/* 数据 */ /* 数据 */
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 nameList = [
let valueList = [800, 520, 650, 950, 420, 600, 450, 720, 303, 503 , 203 ,703 , 903 ]; // 人数 "00:00",
var yList = [ "1000","800","轻度拥堵","基本畅通","畅通"] "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 = []; let dataList = [];
nameList.map((item, index) => { nameList.map((item, index) => {
@ -12,34 +26,43 @@ nameList.map((item, index) => {
value: valueList[index], value: valueList[index],
itemStyle: { itemStyle: {
color: { color: {
type: 'linear', type: "linear",
x: 0, x: 0,
y: 0, y: 0,
x2: 0, x2: 0,
y2: 1, y2: 1,
colorStops: [{ colorStops: [
offset: 0, color: '#FFB904' // 0% 处的颜色 {
}, { offset: 0,
offset: 1, color: '#FF6969' // 100% 处的颜色 color: "#FFB904", // 0% 处的颜色
}], },
global: false // 缺省为 false {
offset: 1,
color: "#FF6969", // 100% 处的颜色
},
],
global: false, // 缺省为 false
}, },
borderRadius: 6 borderRadius: 6,
}, },
label: { show: false } label: { show: false },
}) });
} else { } else {
dataList.push({ dataList.push({
name: item, name: item,
value: valueList[index], value: valueList[index],
itemStyle:{ itemStyle: {
borderRadius: 6 borderRadius: 6,
} },
}) });
} }
}) });
var options = { var options = {
tooltip: {
show: true,
trigger: "axis",
},
legend: { legend: {
// orient: 'vertical', // orient: 'vertical',
icon: "circle", icon: "circle",
@ -52,47 +75,43 @@ var options = {
}, },
}, },
grid: { grid: {
top: '20%',//上边距 top: "80px", //上边距
right: '0',//右边距 right: "0", //右边距
left: '0',//左边距 left: "0", //左边距
bottom: "10%",//下边距 bottom: "10px", //下边距
containLabel: true, containLabel: true,
}, },
xAxis: { xAxis: {
type: 'category', type: "category",
data: nameList, data: nameList,
axisTick: { axisTick: {
show: false //隐藏X轴刻度 show: false, //隐藏X轴刻度
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: "rgba(49, 217, 255, 0.8)" color: "rgba(49, 217, 255, 0.8)",
} },
}, },
axisLabel: { axisLabel: {
show: true, show: true,
color: '#B6E6FF', color: "#fff",
fontSize:8, fontSize: 10,
fontFamily: 'Source Han Sans CN-Regular',
}, },
}, },
yAxis: [{ yAxis: [
type: 'value', {
name: "", type: "value",
max: 1000, name: "(起)",
min:0,
splitNumber:5,
nameTextStyle: { nameTextStyle: {
color: '#B6E6FF', color: "#fff",
fontSize: 13, fontSize: 10,
fontFamily: 'Source Han Sans CN-Regular', align: "right",
align: "left",
verticalAlign: "center", verticalAlign: "center",
}, },
axisLabel: { axisLabel: {
fontSize: 13, fontSize: 10,
color: '#B6E6FF', color: "#fff",
fontFamily: 'HarmonyOS Sans-Regular', // fontFamily: "HarmonyOS Sans-Regular",
// formatter:function(value,index){ // formatter:function(value,index){
// return yList[index] // return yList[index]
// } // }
@ -101,26 +120,27 @@ var options = {
show: false, show: false,
}, },
axisTick: { axisTick: {
show: false show: false,
}, },
splitLine: { splitLine: {
lineStyle: { lineStyle: {
color: 'rgba(49, 217, 255, 0.5)', color: "rgba(49, 217, 255, 0.5)",
} },
},
}, },
}], ],
series: [ series: [
{ {
name: '情报板发布', name: "情报板发布",
type: 'line', type: "line",
symbol: 'circle', symbol: "circle",
symbolSize: 0, symbolSize: 0,
smooth: true, smooth: true,
areaStyle: { areaStyle: {
width: 4, width: 4,
opacity: 0.25, opacity: 0.25,
color: { color: {
type: 'linear', type: "linear",
x: 0, x: 0,
y: 0, y: 0,
x2: 0, x2: 0,
@ -134,23 +154,23 @@ var options = {
}, },
// yAxisIndex: 1, // 与第二个 y 轴关联 // yAxisIndex: 1, // 与第二个 y 轴关联
itemStyle: { itemStyle: {
color: '#51BFA4', color: "#51BFA4",
}, },
lineStyle: { lineStyle: {
width:2, width: 2,
}, },
data: [1000, 800, 520, 600, 900, 700, 700,1000, 800, 520, 600, 900, 700, 700], // 折线图的数据 data: [1000, 800, 520, 600, 900, 700, 700, 1000, 800, 520, 600, 900], // 折线图的数据
}, },
{ {
name: '服务网站', name: "服务网站",
type: 'line', type: "line",
symbol: 'circle', symbol: "circle",
symbolSize: 0, symbolSize: 0,
// yAxisIndex: 1, // 与第二个 y 轴关联 // yAxisIndex: 1, // 与第二个 y 轴关联
itemStyle: { itemStyle: {
color: '#08BAF4', color: "#08BAF4",
}, },
lineStyle: { lineStyle: {
width: 2, width: 2,
@ -160,7 +180,7 @@ var options = {
width: 4, width: 4,
opacity: 0.25, opacity: 0.25,
color: { color: {
type: 'linear', type: "linear",
x: 0, x: 0,
y: 0, y: 0,
x2: 0, x2: 0,
@ -172,23 +192,23 @@ var options = {
global: false, global: false,
}, },
}, },
data: [600, 700, 900, 400, 500, 800, 600,600, 700, 900, 400, 500, 800, 600], // 折线图的数据 data: [600, 700, 900, 400, 500, 800, 600, 600, 700, 900, 400, 500], // 折线图的数据
}, },
{ {
name: '微信发布', name: "微信发布",
type: 'line', type: "line",
symbol: 'circle', symbol: "circle",
symbolSize: 0, symbolSize: 0,
// yAxisIndex: 1, // 与第二个 y 轴关联 // yAxisIndex: 1, // 与第二个 y 轴关联
itemStyle: { itemStyle: {
color: '#E2BA74', color: "#E2BA74",
}, },
smooth: true, smooth: true,
areaStyle: { areaStyle: {
width: 4, width: 4,
opacity: 0.25, opacity: 0.25,
color: { color: {
type: 'linear', type: "linear",
x: 0, x: 0,
y: 0, y: 0,
x2: 0, x2: 0,
@ -203,22 +223,23 @@ var options = {
lineStyle: { lineStyle: {
width: 2, width: 2,
}, },
data: [850, 810, 712, 580, 480, 480, 780,850, 810, 712, 580, 480, 480, 780], // 折线图的数据 data: [850, 810, 712, 580, 480, 480, 780, 850, 810, 712, 580, 480], // 折线图的数据
},{ },
name: '微博发布', {
type: 'line', name: "微博发布",
symbol: 'circle', type: "line",
symbol: "circle",
symbolSize: 0, symbolSize: 0,
// yAxisIndex: 1, // 与第二个 y 轴关联 // yAxisIndex: 1, // 与第二个 y 轴关联
itemStyle: { itemStyle: {
color: '#FB6D07', color: "#FB6D07",
}, },
smooth: true, smooth: true,
areaStyle: { areaStyle: {
width: 4, width: 4,
opacity: 0.25, opacity: 0.25,
color: { color: {
type: 'linear', type: "linear",
x: 0, x: 0,
y: 0, y: 0,
x2: 0, x2: 0,
@ -233,22 +254,23 @@ var options = {
lineStyle: { lineStyle: {
width: 2, width: 2,
}, },
data: [850, 810, 712, 580, 480, 480, 780,850, 810, 712, 580, 480, 480, 780], // 折线图的数据 data: [850, 810, 712, 580, 480, 480, 780, 850, 810, 712, 580, 480], // 折线图的数据
},{ },
name: '短信发布', {
type: 'line', name: "短信发布",
symbol: 'circle', type: "line",
symbol: "circle",
symbolSize: 0, symbolSize: 0,
// yAxisIndex: 1, // 与第二个 y 轴关联 // yAxisIndex: 1, // 与第二个 y 轴关联
itemStyle: { itemStyle: {
color: '#07DEFB', color: "#07DEFB",
}, },
smooth: true, smooth: true,
areaStyle: { areaStyle: {
width: 4, width: 4,
opacity: 0.25, opacity: 0.25,
color: { color: {
type: 'linear', type: "linear",
x: 0, x: 0,
y: 0, y: 0,
x2: 0, x2: 0,
@ -263,9 +285,9 @@ var options = {
lineStyle: { lineStyle: {
width: 2, width: 2,
}, },
data: [850, 410, 712, 680, 50, 280, 480,850, 810, 712, 580, 480, 480, 780], // 折线图的数据 data: [850, 410, 712, 680, 50, 280, 480, 850, 810, 712, 580, 480], // 折线图的数据
}, },
] ],
} };
export default options; export default options;

81
ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/postTrendsMonth/index.vue
View File

@ -1,17 +1,38 @@
<template> <template>
<div class='congestion'> <div class="congestion">
<WgtTitle :title="'月发布渠道趋势分析'"></WgtTitle> <WgtTitle :title="'月发布渠道趋势分析'"></WgtTitle>
<div class="board"> <div class="board">
<div class="searchPanel_1"> <div class="searchPanel_1">
<el-date-picker size="mini" v-if="year != 'quarter'" class="selectRoad" v-model="dateTime" style="width:140px;" <el-date-picker
type="month" placeholder="请选择" /> size="mini"
<el-quarter-picker size="mini" class="selectRoad" style="width:180px;" v-if="year == 'quarter'" v-model="quarter" v-if="year != 'quarter'"
aria-placeholder="请选季度" /> class="selectRoad"
v-model="dateTime"
<el-button type="primary" size="mini" class="btnSearch" icon="el-icon-search">查询</el-button> style="width: 140px"
<el-button class="btnReset" size="mini" icon="el-icon-refresh-left">重置</el-button> type="month"
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>
<div class="charts keep-ratio " id="postTrendsMonth"></div> <div class="charts keep-ratio" id="postTrendsMonth"></div>
</div> </div>
</div> </div>
</template> </template>
@ -21,34 +42,30 @@ import WgtTitle from "@screen/pages/perception/widgets/title";
import * as echarts from "echarts"; import * as echarts from "echarts";
import chartsStatistics from "./assets/charts"; import chartsStatistics from "./assets/charts";
export default { export default {
name: 'postTrendsMonth', name: "postTrendsMonth",
components: { components: {
WgtTitle WgtTitle,
}, },
data() { data() {
return { return {
dateTime: "", dateTime: "",
} };
},
created() {
}, },
methods: {
}, created() {},
methods: {},
mounted() { mounted() {
setTimeout(() => { setTimeout(() => {
this.$nextTick(() => { this.$nextTick(() => {
var myChart = echarts.init(document.getElementById('postTrendsMonth')); var myChart = echarts.init(document.getElementById("postTrendsMonth"));
myChart.setOption(chartsStatistics); myChart.setOption(chartsStatistics);
}); });
}); });
}, },
} };
</script> </script>
<style lang='scss' scoped> <style lang="scss" scoped>
.congestion { .congestion {
width: 100%; width: 100%;
@ -61,7 +78,12 @@ export default {
border-radius: 5px 5px 5px 5px; border-radius: 5px 5px 5px 5px;
opacity: 1; opacity: 1;
border: 1px solid; border: 1px solid;
border-image: linear-gradient(360deg, rgba(55, 231, 255, 0.3), rgba(55, 231, 255, 0)) 1 1; border-image: linear-gradient(
360deg,
rgba(55, 231, 255, 0.3),
rgba(55, 231, 255, 0)
)
1 1;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
@ -72,7 +94,7 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
height: 40px; height: 40px;
width: 100%; width: 50%;
font-size: 14px; font-size: 14px;
margin-bottom: 10px; margin-bottom: 10px;
left: 20px; left: 20px;
@ -102,7 +124,7 @@ export default {
.selectRoad { .selectRoad {
width: 89px; width: 89px;
border: 1px solid #00B3CC; border: 1px solid #00b3cc;
::v-deep { ::v-deep {
.el-input__inner { .el-input__inner {
@ -113,25 +135,22 @@ export default {
} }
.btnSearch { .btnSearch {
background: linear-gradient(180deg, #005C79 0%, #009BCC 100%); background: linear-gradient(180deg, #005c79 0%, #009bcc 100%);
margin-left: 10px; margin-left: 10px;
border-color: transparent; border-color: transparent;
} }
.btnReset { .btnReset {
background: linear-gradient(180deg, #005C79 0%, #009BCC 100%); background: linear-gradient(180deg, #005c79 0%, #009bcc 100%);
;
border-color: transparent; border-color: transparent;
color: white; color: white;
} }
} }
} }
} }
.charts { .charts {
height: 300px; height: 300px;
width: 100%; width: 100%;
}</style> }
</style>

129
ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/index.vue
View File

@ -1,41 +1,39 @@
<template> <template>
<div class='TrafficFlow'> <div class="TrafficFlow">
<section class="foot"> <section class="foot">
<el-tabs class="footTabs" v-model="activeName" @tab-click="changeTabs"> <el-tabs class="footTabs" v-model="activeName" @tab-click="changeTabs">
<el-tab-pane label="公众服务统计分析" name="first"> <el-tab-pane label="公众服务统计分析" name="first">
<div class="header-shot" > <div class="header-shot">
<TopComponent /> <TopComponent />
</div> </div>
<div class="content" > <div class="content">
<ChannelAnalytics class="content-l" /> <ChannelAnalytics class="content-l" />
<EventTypeAnalysis class="content-l" /> <EventTypeAnalysis class="content-l" />
<AuditAnalytics class="content-l" /> <AuditAnalytics class="content-l" />
<PostTrendsDay class="content-l" /> <PostTrendsDay class="content-l" style="margin-right: 0" />
</div> </div>
<div class="content" > <div class="content">
<PostTrendsMonth class="content-mi" /> <PostTrendsMonth class="content-mi" />
<NucleusThrough class="content-mi" /> <NucleusThrough class="content-mi" style="margin-right: 0" />
</div> </div>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="公众服务统计查询" name="second"> <el-tab-pane label="公众服务统计查询" name="second"> </el-tab-pane>
</el-tab-pane>
</el-tabs> </el-tabs>
</section> </section>
</div> </div>
</template> </template>
<script> <script>
import TopComponent from './components/topComponent'; import TopComponent from "./components/topComponent";
import ChannelAnalytics from './components/channelAnalytics'; import ChannelAnalytics from "./components/channelAnalytics";
import EventTypeAnalysis from './components/eventTypeAnalysis'; import EventTypeAnalysis from "./components/eventTypeAnalysis";
import AuditAnalytics from './components/auditAnalytics'; import AuditAnalytics from "./components/auditAnalytics";
import PostTrendsDay from './components/postTrendsDay'; import PostTrendsDay from "./components/postTrendsDay";
import PostTrendsMonth from './components/postTrendsMonth'; import PostTrendsMonth from "./components/postTrendsMonth";
import NucleusThrough from './components/nucleusThrough'; import NucleusThrough from "./components/nucleusThrough";
export default { export default {
name: 'publicService', name: "publicService",
components: { components: {
TopComponent, TopComponent,
ChannelAnalytics, ChannelAnalytics,
@ -43,64 +41,58 @@
AuditAnalytics, AuditAnalytics,
PostTrendsDay, PostTrendsDay,
PostTrendsMonth, PostTrendsMonth,
NucleusThrough NucleusThrough,
}, },
data(){ data() {
return { return {
activeName:"first" activeName: "first",
} };
}, },
methods:{ methods: {
changeTabs(){ changeTabs() {},
},
} };
} </script>
}
</script>
<style lang='scss' scoped>
::v-deep .el-tabs__item{ <style lang="scss" scoped>
::v-deep .el-tabs__item {
display: inline-flex; display: inline-flex;
justify-content: center; justify-content: center;
font-size: 16px; font-size: 16px;
font-family: PingFang SC, PingFang SC; font-family: PingFang SC, PingFang SC;
font-weight: 500; font-weight: 500;
color: #FFFFFF; color: #ffffff;
min-width:128px; min-width: 128px;
position: relative; position: relative;
left:10px; left: 10px;
} }
::v-deep .el-tabs__active-bar { ::v-deep .el-tabs__active-bar {
min-width:128px; min-width: 128px;
} }
::v-deep .el-tabs__nav-wrap::after { ::v-deep .el-tabs__nav-wrap::after {
background-color: #133242; background-color: #133242;
opacity: 0.1; opacity: 0.1;
} }
.footTabs { .footTabs {
display: inline; display: inline;
width:100%; width: 100%;
}
}
.TrafficFlow { .TrafficFlow {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: relative; position: relative;
z-index: 6; z-index: 6;
color: white; color: white;
.header-shot{ .header-shot {
width: 98%; width: 98%;
margin: auto; margin: auto;
margin-top: 15px; margin-top: 15px;
height:160px; height: 160px;
} }
.content { .content {
@ -110,34 +102,33 @@
flex: 1; flex: 1;
pointer-events: none; pointer-events: none;
margin-top: 19px; margin-top: 19px;
--keep-ratio: scaleX(1);
>div { > div {
pointer-events: auto; pointer-events: auto;
} }
.content-l { .content-l {
width: calc(25%); width: calc(25%);
margin-right:20px; margin-right: 20px;
} }
.content-mi { .content-mi {
width: calc(50%); width: calc(50%);
margin-right:20px; margin-right: 20px;
} }
.content-m { .content-m {
display: inline-flex; display: inline-flex;
flex-direction: column; flex-direction: column;
width: calc(100% / 4 ); width: calc(100% / 4);
margin-right:20px; margin-right: 20px;
.content-m-t { .content-m-t {
width:100%; width: 100%;
height:240px; height: 240px;
margin-bottom: 20px; margin-bottom: 20px;
} }
} }
@ -145,7 +136,7 @@
width: 49.4%; width: 49.4%;
} }
} }
.foot{ .foot {
width: 98%; width: 98%;
margin: auto; margin: auto;
display: flex; display: flex;
@ -153,13 +144,12 @@
flex: 1; flex: 1;
pointer-events: none; pointer-events: none;
margin-top: 8px; margin-top: 8px;
>div { > div {
pointer-events: auto; pointer-events: auto;
} }
.foot-w { .foot-w {
width:100%; width: 100%;
} }
.foot-l { .foot-l {
@ -172,6 +162,5 @@
width: 493px; width: 493px;
} }
} }
} }
</style> </style>

Write Preview
Loading…
Cancel
Save