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

感知事件图表动态翻页

wangqin
zhangzhang 11 months ago
parent
ddb01d31fe
commit
b5f002c87d
3 changed files with 229 additions and 16 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 14
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/typeAnalysis/assets/charts.js
  2. 229
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/typeAnalysis/index.vue
  3. 2
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/flowstate/index.vue

14
ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/typeAnalysis/assets/charts.js
View File

@ -14,13 +14,18 @@ window.colorList = [
"#FFDD69",
"#F6A73C",
"#7390FD",
"#2967EA",
"#1DA7FF",
"#219f73",
"#7cedd5",
];
window.colorList1 = ["#61D8FF", "#FFB905", "#6AE0BC"];
// window.colorList1 = ["#61D8FF", "#FFB905", "#6AE0BC"];
var options = {
color: colorList,
legend: {
show: false,
width: "500px",
height: "160px",
orient: "vertical",
@ -87,8 +92,10 @@ var options = {
{
name: "",
type: "pie",
// radius: "70%",
// center: ["30%", "50%"],
radius: "70%",
center: ["30%", "50%"],
center: ["40%", "50%"],
clockwise: false,
// roseType: "area",
startAngle1: 180,
@ -133,7 +140,8 @@ var options = {
hoverAnimation: false,
emphasis: { scale: false },
clockwise: false,
center: ["30%", "50%"],
// center: ["30%", "50%"],
center: ["40%", "50%"],
// roseType: "area",
label: {
show: false,

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

@ -3,6 +3,21 @@
<WgtTitle :title="'感知事件类型分析'"></WgtTitle>
<div class="board fl-1">
<div class="charts keep-ratio" id="typeAnalysis"></div>
<div class="legend-box">
<el-carousel height="200px" direction="vertical">
<el-carousel-item
v-for="(item, index) in dataList"
:key="index"
class="legend-item"
>
<div v-for="(items, index) in item" class="legend-items">
<span class="legend-name">{{ items.name }}</span>
<span class="legend-num">{{ items.value }} 起</span>
<span class="legend-percert">{{ items.percert }}%</span>
</div>
</el-carousel-item>
</el-carousel>
</div>
</div>
</div>
</template>
@ -47,9 +62,9 @@ export default {
WgtTitle,
},
data() {
return {};
return { dataList: [] };
},
created() { },
created() {},
methods: {},
mounted() {
setTimeout(() => {
@ -57,10 +72,8 @@ export default {
var myChart = echarts.init(document.getElementById("typeAnalysis"));
getWarningTypeDay().then((res) => {
console.log(res);
if (res.code == 200) {
let data = res.data;
console.log("===================22", data);
typeAnalysisData = [
{
name: "交通拥堵",
@ -123,15 +136,31 @@ export default {
value: 0,
},
];
let total = null;
data.forEach((item, index) => {
total += item.number;
});
data.forEach((item, index) => {
typeAnalysisData.forEach((r) => {
if (item.warningType == r.warningType) {
r.value += item.number;
r.value = item.number;
this.dataList.push({
name: r.name,
value: r.value,
percert:
total == 0 ? 0 : ((r.value / total) * 100).toFixed(2),
});
}
});
// drawRoundRect(context, 250, 8 + index * 28, 120, 24, 12, gr);
});
const list = this.dataList.reduce((acc, curr, index) => {
if (index % 6 === 0) acc.push([]);
acc[Math.floor(index / 6)].push(curr);
return acc;
}, []);
this.dataList = list;
chartsStatistics.legend.data = typeAnalysisData?.map((x) => x.name);
chartsStatistics.series[0].data = typeAnalysisData.map(
(item, index) => {
@ -191,23 +220,199 @@ export default {
.congestion {
.board {
padding: 0px 20px;
background: linear-gradient(180deg,
rgba(6, 66, 88, 0.2) 0%,
#06425888 100%);
background: linear-gradient(
180deg,
rgba(6, 66, 88, 0.2) 0%,
#06425888 100%
);
border-radius: 5px 5px 5px 5px;
opacity: 1;
border: 1px solid;
border-image: linear-gradient(360deg,
border-image: linear-gradient(
360deg,
rgba(55, 231, 255, 0.1),
rgba(55, 231, 255, 0)) 1 1;
rgba(55, 231, 255, 0)
)
1 1;
display: flex;
justify-content: center;
align-items: center;
.legend-box {
width: 60%;
margin: auto;
margin-top: 20px;
height: 185px;
overflow: hidden;
.legend-item {
width: 100%;
/**
单个动画循环样式 勿删
*/
// height: 30px;
// display: flex;
// justify-content: space-between;
// align-items: center;
// animation: 5s infinite roll;
// position: relative;
// &::before {
// // position: absolute;
// content: "";
// width: 8px;
// height: 8px;
// left: 0px;
// border-radius: 50%;
// background: #37e7ff;
// }
.legend-items {
width: 100%;
height: 24px;
display: flex;
justify-content: space-between;
align-items: center;
padding-left: 20px;
background: linear-gradient(to right, #327799 0%, #0d3443 60%);
border-top-left-radius: 25px;
border-bottom-left-radius: 25px;
margin-bottom: 5px;
&::before {
// position: absolute;
content: "";
width: 8px;
height: 8px;
left: 0px;
border-radius: 50%;
background: #37e7ff;
}
}
.legend-name {
width: 60px;
margin-left: 10px;
font-size: 14px;
}
.legend-num,
.legend-percert {
width: 50px;
display: flex;
justify-content: center;
align-items: center;
font-size: 14px;
color: #37e7ff;
font-weight: bold;
}
}
.legend-item:nth-child(1) {
.legend-items:nth-child(1) {
&::before {
background: #019aff;
}
}
.legend-items:nth-child(2) {
&::before {
background: #3cc3f0;
}
}
.legend-items:nth-child(3) {
&::before {
background: #51d5ad;
}
}
.legend-items:nth-child(4) {
&::before {
background: #ffdd69;
}
}
.legend-items:nth-child(5) {
&::before {
background: #f6a73c;
}
}
.legend-items:nth-child(6) {
&::before {
background: #7390fd;
}
}
}
.legend-item:nth-child(2) {
.legend-items:nth-child(1) {
&::before {
background: #2967ea;
}
}
.legend-items:nth-child(2) {
&::before {
background: #1da7ff;
}
}
.legend-items:nth-child(3) {
&::before {
background: #219f73;
}
}
.legend-items:nth-child(4) {
&::before {
background: #7cedd5;
}
}
}
/**
单个动画循环样式 勿删
*/
// .legend-item:nth-child(1) {
// &::before {
// background: #68f4dd;
// }
// }
// .legend-item:nth-child(2) {
// &::before {
// background: #1785c0;
// }
// }
// .legend-item:nth-child(3) {
// &::before {
// background: #476dbc;
// }
// }
// .legend-item:nth-child(4) {
// &::before {
// background: #b55233;
// }
// }
// .legend-item:nth-child(5) {
// &::before {
// background: #b0862c;
// }
// }
// .legend-item:nth-child(6) {
// &::before {
// background: #35ad6b;
// }
// }
// .legend-item:nth-child(7) {
// &::before {
// background: #219f73;
// }
// }
// .legend-item:nth-child(8) {
// &::before {
// background: #7cedd5;
// }
// }
// .legend-item:nth-child(9) {
// &::before {
// background: #68f4dd;
// }
// }
}
}
}
::v-deep .el-carousel__indicators--vertical {
display: none;
}
.charts {
height: 180px;
width: 100%;
width: 50%;
}
</style>

2
ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/flowstate/index.vue
View File

@ -67,7 +67,7 @@ export default {
.tag1 {
position: absolute;
margin-top: -174px;
margin-left: 80px;
margin-left: 120px;
font-size: 12px;
}

Write Preview
Loading…
Cancel
Save