Browse Source

Merge branch 'develop' of http://39.106.31.193:9211/mengff/jihe-hs into develop

wangqin
刘朋 1 year ago
parent
commit
336d895eef
  1. 2
      ruoyi-ui/src/views/JiHeExpressway/components/InputSearch/index.vue
  2. 42
      ruoyi-ui/src/views/JiHeExpressway/components/Pagination.vue
  3. 2
      ruoyi-ui/src/views/JiHeExpressway/pages/control/event/businessDataManagement/views/firstResponders/index.vue
  4. 12
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dailyDisposal/assets/charts.js
  5. 133
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dailyDisposal/index.vue
  6. 6
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventSource/assets/charts.js
  7. 185
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventSource/index.vue

2
ruoyi-ui/src/views/JiHeExpressway/components/InputSearch/index.vue

@ -105,7 +105,7 @@ export default {
return {
visible: false,
types: this.type,
value: this.valueData,
value: "",
width: null,
popperOptions: {
popHideCallBack: () => {

42
ruoyi-ui/src/views/JiHeExpressway/components/Pagination.vue

@ -1,61 +1,67 @@
<template>
<ElPagination v-on="$listeners" v-bind="getProps" ref="ElPaginationRef" class="Pagination" />
<ElPagination
v-on="$listeners"
v-bind="getProps"
ref="ElPaginationRef"
class="Pagination"
/>
</template>
<script>
export default {
name: 'Pagination',
name: "Pagination",
computed: {
getProps() {
return {
// total
layout: "prev, pager, next, sizes, jumper",
layout: "prev, pager, next, sizes, jumper,total",
...this.$attrs,
small: true,
}
}
};
},
},
mounted() {
if (!this.$refs.ElPaginationRef) return;
const jumpPageDom = this.$refs.ElPaginationRef.$el.querySelector(".el-pagination__jump");
const jumpPageDom = this.$refs.ElPaginationRef.$el.querySelector(
".el-pagination__jump"
);
if (jumpPageDom?.childNodes?.[0]?.nodeValue)
jumpPageDom.childNodes[0].nodeValue = "跳至";
}
}
},
};
</script>
<style lang='scss' scoped>
<style lang="scss" scoped>
.Pagination {
// color: #fff;
::v-deep {
>button,
>ul li {
> button,
> ul li {
background: #064258;
border-radius: 2px 2px 2px 2px;
opacity: 1;
color: #fff;
}
>button {
> button {
padding: 0 3px;
border: 1px solid #00B3CC;
border: 1px solid #00b3cc;
}
>ul li {
background: linear-gradient(180deg, #004960 0%, #004B62 100%);
> ul li {
background: linear-gradient(180deg, #004960 0%, #004b62 100%);
margin: 0 1.5px;
&.active {
background: linear-gradient(180deg, #005C79 0%, #009BCC 100%);
background: linear-gradient(180deg, #005c79 0%, #009bcc 100%);
}
}
.el-pagination__total {
color: #FFF;
color: #fff;
}
.el-pagination__sizes {

2
ruoyi-ui/src/views/JiHeExpressway/pages/control/event/businessDataManagement/views/firstResponders/index.vue

@ -28,9 +28,7 @@
:formConfigOptions="{ labelWidth: '72px' }"
placeholder="请输入姓名、电话,回车搜索"
type="input"
:valueData="valueData"
:params="params"
:queryParams="queryParams"
@handleSearch="handleSearch"
/>
</div>

12
ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dailyDisposal/assets/charts.js

@ -4,7 +4,7 @@ window.echartsData = [
{ value: 35, name: "已处理" },
];
window.colorList = ["#FFee0B", "#61D8FF", "#6AE0BC"];
window.colorList = ["#FFee0B", "#61D8FF", "#6AE0BC", "#1DA7FF"];
window.count = 0;
echartsData.forEach((it) => {
@ -66,10 +66,10 @@ var options = {
{
name: "",
type: "pie",
radius: "60px",
width: "200px",
radius: "70%",
// width: "200px",
center: ["130px", "50%"],
roseType: "radius",
// roseType: "radius",
label: {
show: false,
position: "outside",
@ -111,11 +111,11 @@ var options = {
{
name: "",
type: "pie",
radius: "70px",
radius: "80%",
hoverAnimation: false,
emphasis: { scale: false },
center: ["130px", "50%"],
roseType: "radius",
// roseType: "radius",
label: {
show: false,
position: "outside",

133
ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dailyDisposal/index.vue

@ -1,58 +1,63 @@
<template>
<div class='congestion'>
<div class="congestion">
<WgtTitle :title="'日事件处置情况占比'"></WgtTitle>
<div class="board">
<div class="charts keep-ratio " id="dailyDisposal"></div>
<div class="charts keep-ratio" id="dailyDisposal"></div>
</div>
</div>
</template>
<script>
import WgtTitle from '../../../widgets/title'
import WgtTitle from "../../../widgets/title";
import * as echarts from "echarts";
import chartsStatistics from "./assets/charts";
import { getWarningStateDay } from '../../../../../../../api/event/perceiveEvent';
import { getWarningStateDay } from "../../../../../../../api/event/perceiveEvent";
const drawRoundRect = (ctx, x, y, width, height, radius, gr) => {
// ctx, x, y, , ,
ctx.beginPath();
ctx.fillStyle = gr;
ctx.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 3 / 2);
ctx.arc(x + radius, y + radius, radius, Math.PI, (Math.PI * 3) / 2);
ctx.lineTo(width - radius + x, y);
ctx.arc(width - radius + x, radius + y, radius, Math.PI * 3 / 2, Math.PI * 2);
ctx.arc(
width - radius + x,
radius + y,
radius,
(Math.PI * 3) / 2,
Math.PI * 2
);
ctx.lineTo(width + x, height + y - radius);
ctx.arc(width - radius + x, height - radius + y, radius, 0, Math.PI * 1 / 2);
ctx.arc(
width - radius + x,
height - radius + y,
radius,
0,
(Math.PI * 1) / 2
);
ctx.lineTo(radius + x, height + y);
ctx.arc(radius + x, height - radius + y, radius, Math.PI * 1 / 2, Math.PI);
ctx.arc(radius + x, height - radius + y, radius, (Math.PI * 1) / 2, Math.PI);
ctx.closePath();
//ctx.stroke();
ctx.fill()
}
ctx.fill();
};
export default {
name: 'dailyDisposal',
name: "dailyDisposal",
components: {
WgtTitle
WgtTitle,
},
data() {
return {
}
},
created() {
return {};
},
methods: {
},
created() {},
methods: {},
mounted() {
setTimeout(() => {
this.$nextTick(() => {
var myChart = echarts.init(document.getElementById('dailyDisposal'));
var myChart = echarts.init(document.getElementById("dailyDisposal"));
getWarningStateDay().then(res => {
getWarningStateDay().then((res) => {
if (res.code == 200) {
let data = res.data;
if (data.length > 0) {
@ -69,90 +74,85 @@ export default {
// it.number = 86;
echartsData.push({
name: "上报",
value: it.number
value: it.number,
});
}
if (it.warningState == 2) {
echartsData.push({
name: "已完成",
value: it.number
value: it.number,
});
}
if (it.warningState == 3) {
echartsData.push({
name: "已终止",
value: it.number
value: it.number,
});
}
if (it.warningState == 4) {
echartsData.push({
name: "自动结束",
value: it.number
value: it.number,
});
}
}
chartsStatistics.legend.data = window.echartsData?.map(x => x);
chartsStatistics.series[0].data = echartsData.map((item, index) => {
return {
...item,
label: {
color: colorList[index]
}
chartsStatistics.legend.data = window.echartsData?.map((x) => x);
chartsStatistics.series[0].data = echartsData.map(
(item, index) => {
return {
...item,
label: {
color: colorList[index],
},
};
}
})
chartsStatistics.series[1].data = echartsData.map((item, index) => {
return {
...item,
label: {
color: colorList[index]
}
);
chartsStatistics.series[1].data = echartsData.map(
(item, index) => {
return {
...item,
label: {
color: colorList[index],
},
};
}
})
);
}
}
myChart.setOption(chartsStatistics);
});
const domMap = document.getElementById("dailyDisposal");
let parentDiv = domMap.firstChild;
// canvas
let canvas = document.createElement('canvas');
let canvas = document.createElement("canvas");
canvas.width = parentDiv.offsetWidth;
canvas.height = parentDiv.offsetHeight;
parentDiv.appendChild(canvas);
const context = canvas.getContext('2d');
const context = canvas.getContext("2d");
//
var gr = context.createLinearGradient(230, 0, 360, 0);
//
gr.addColorStop(1, 'rgba(92,197,255,0)');
gr.addColorStop(0, 'rgba(92,197,255,0.5)');
gr.addColorStop(1, "rgba(92,197,255,0)");
gr.addColorStop(0, "rgba(92,197,255,0.5)");
context.lineWidth = 1; // 线
//
drawRoundRect(context, 230, 36, 180, 24, 12, gr)
drawRoundRect(context, 230, 63, 180, 24, 12, gr)
drawRoundRect(context, 230, 90, 180, 24, 12, gr)
drawRoundRect(context, 230, 117, 180, 24, 12, gr)
drawRoundRect(context, 230, 36, 180, 24, 12, gr);
drawRoundRect(context, 230, 63, 180, 24, 12, gr);
drawRoundRect(context, 230, 90, 180, 24, 12, gr);
drawRoundRect(context, 230, 117, 180, 24, 12, gr);
});
});
},
}
};
</script>
<style lang='scss' scoped>
<style lang="scss" scoped>
.congestion {
width: 100%;
@ -164,11 +164,15 @@ export default {
border-radius: 5px 5px 5px 5px;
opacity: 1;
border: 1px solid;
border-image: linear-gradient(360deg, rgba(55, 231, 255, 0.3), rgba(55, 231, 255, 0)) 1 1;
border-image: linear-gradient(
360deg,
rgba(55, 231, 255, 0.3),
rgba(55, 231, 255, 0)
)
1 1;
display: flex;
justify-content: space-between;
align-items: center;
}
}
@ -177,4 +181,3 @@ export default {
width: 100%;
}
</style>

6
ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventSource/assets/charts.js

@ -125,16 +125,18 @@ var options = {
data: lengData,
formatter: function (name) {
let target = 0;
let percent = 0;
if (!mainData) return "";
for (let i = 0; i < window.mainData.length; i++) {
if (window.mainData[i].name === name) {
target = window.mainData[i].value;
percent = window.mainData[i].percent;
}
}
console.log('starget',target)
console.log("starget", target);
var arr = [
"{ast|" + name + "}",
"{bst|" + Math.round((target * 100).toFixed(0)) + "% }",
"{bst|" + Math.round((percent * 100).toFixed(0)) + "% }",
"{cst|" + Math.round(target) + "起}",
];
return arr.join(" ");

185
ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventSource/index.vue

@ -1,49 +1,56 @@
<template>
<div @resize="changeReisze" class='congestion'>
<div @resize="changeReisze" class="congestion">
<WgtTitle :title="'感知事件源分析'"></WgtTitle>
<div class="board">
<div class="charts keep-ratio " id="eventSource"></div>
<div class="charts keep-ratio" id="eventSource"></div>
</div>
</div>
</template>
<script>
import WgtTitle from '../../../widgets/title'
import WgtTitle from "../../../widgets/title";
import * as echarts from "echarts";
import chartsStatistics from "./assets/charts";
import { getWarningSourceGroup } from '../../../../../../../api/event/perceiveEvent';
import { getWarningSourceGroup } from "../../../../../../../api/event/perceiveEvent";
const drawRoundRect = (ctx, x, y, width, height, radius, gr) => {
// ctx, x, y, , ,
ctx.beginPath();
ctx.fillStyle = gr;
ctx.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 3 / 2);
ctx.arc(x + radius, y + radius, radius, Math.PI, (Math.PI * 3) / 2);
ctx.lineTo(width - radius + x, y);
ctx.arc(width - radius + x, radius + y, radius, Math.PI * 3 / 2, Math.PI * 2);
ctx.arc(
width - radius + x,
radius + y,
radius,
(Math.PI * 3) / 2,
Math.PI * 2
);
ctx.lineTo(width + x, height + y - radius);
ctx.arc(width - radius + x, height - radius + y, radius, 0, Math.PI * 1 / 2);
ctx.arc(
width - radius + x,
height - radius + y,
radius,
0,
(Math.PI * 1) / 2
);
ctx.lineTo(radius + x, height + y);
ctx.arc(radius + x, height - radius + y, radius, Math.PI * 1 / 2, Math.PI);
ctx.arc(radius + x, height - radius + y, radius, (Math.PI * 1) / 2, Math.PI);
ctx.closePath();
//ctx.stroke();
ctx.fill()
}
ctx.fill();
};
export default {
name: 'EventSource',
name: "EventSource",
components: {
WgtTitle
WgtTitle,
},
data() {
return {
}
return {};
},
created() {
},
created() {},
methods: {
changeReisze() {
this.myChart.resize();
@ -52,7 +59,7 @@ export default {
mounted() {
setTimeout(() => {
this.$nextTick(() => {
var myChart = echarts.init(document.getElementById('eventSource'));
var myChart = echarts.init(document.getElementById("eventSource"));
getWarningSourceGroup().then((res) => {
if (res.code == 200) {
@ -63,32 +70,36 @@ export default {
let chartData = [
{
average: 0,
name: '视频AI',
percent: 0.3
name: "视频AI",
percent: 0.3,
},
{
average: 0,
name: '雷达识别',
percent: 0.2
}, {
name: "雷达识别",
percent: 0.2,
},
{
average: 0,
name: '锥桶',
percent: 0.1
}, {
name: "锥桶",
percent: 0.1,
},
{
average: 0,
name: '护栏碰撞',
percent: 0.2
}, {
name: "护栏碰撞",
percent: 0.2,
},
{
average: 0,
name: '扫码报警',
percent: 0.1
}, {
name: "扫码报警",
percent: 0.1,
},
{
average: 0,
name: '非机预警',
percent: 0.1
name: "非机预警",
percent: 0.1,
},
]
data.forEach(it => {
];
data.forEach((it) => {
if (it.warningSource == 1) {
chartData[0].average += it.number;
}
@ -109,9 +120,16 @@ export default {
}
// total ++;
// drawRoundRect(context, 231, 37 + (index * 27), 138, 20, 12, gr);
})
});
// console.log('data',chartData)
let colorList = ['#006EDF', '#00FF00', '#FFC30D', '#FF8400', '#1DA7FF', '#2967EA'];
let colorList = [
"#006EDF",
"#00FF00",
"#FFC30D",
"#FF8400",
"#1DA7FF",
"#2967EA",
];
let lengData = [];
let mainData = [];
@ -126,55 +144,70 @@ export default {
name: it.name,
color: colorList[i],
value: it.average,
percent: (it.average / total) || 0
})
percent: it.average / total || 0,
});
}
window.mainData = mainData;
// console.log('mainData', mainData)
console.log("mainData", mainData);
chartsStatistics.title.text = `{tb|${total}}`;
chartsStatistics.title.subtext = "{zb|总数}";
chartsStatistics.legend.data = lengData;
chartsStatistics.series[0].data = mainData;
myChart.on('mouseover', (params) => {
// console.log('params',params)
if (params.componentType == 'graphic') {
return
}
chartsStatistics.title.text = `{tb|${params.percent}%}`;
chartsStatistics.title.subtext = `{zb|${params.data.name}}`;
// chartsStatistics.title.left = "22%";
myChart.setOption(chartsStatistics);
})
//
myChart.on('mouseout', (params) => {
chartsStatistics.title.text = `{tb|${total}}`;
chartsStatistics.title.subtext = "{zb|总数}";
// chartsStatistics.title.left = "25%";
myChart.setOption(chartsStatistics);
})
// chartsStatistics.legend.formatter = (name) => {
// let target = 0;
// if (!mainData) return "";
// for (let i = 0; i < window.mainData.length; i++) {
// if (window.mainData[i].name === name) {
// target = window.mainData[i].value;
// }
// }
// console.log("starget", target);
// var arr = [
// "{ast|" + name + "}",
// "{bst|" + Math.round((target * 100).toFixed(0)) + "% }",
// "{cst|" + Math.round(target) + "}",
// ];
// return arr.join(" ");
// };
// myChart.on("mouseover", (params) => {
// // console.log('params',params)
// if (params.componentType == "graphic") {
// return;
// }
// chartsStatistics.title.text = `{tb|${params.percent}%}`;
// chartsStatistics.title.subtext = `{zb|${params.data.name}}`;
// // chartsStatistics.title.left = "22%";
// myChart.setOption(chartsStatistics);
// });
// //
// myChart.on("mouseout", (params) => {
// chartsStatistics.title.text = `{tb|${total}}`;
// chartsStatistics.title.subtext = "{zb|}";
// // chartsStatistics.title.left = "25%";
// myChart.setOption(chartsStatistics);
// });
// }
}
myChart.setOption(chartsStatistics);
})
});
const domMap = document.getElementById("eventSource");
let parentDiv = domMap.firstChild;
// canvas
let canvas = document.createElement('canvas');
let canvas = document.createElement("canvas");
canvas.width = parentDiv.offsetWidth;
canvas.height = parentDiv.offsetHeight;
parentDiv.appendChild(canvas);
const context = canvas.getContext('2d');
const context = canvas.getContext("2d");
//
let gr = context.createLinearGradient(230, 0, 360, 0);
gr.addColorStop(1, 'rgba(92,197,255,0)');
gr.addColorStop(0, 'rgba(92,197,255,0.3)');
gr.addColorStop(1, "rgba(92,197,255,0)");
gr.addColorStop(0, "rgba(92,197,255,0.3)");
drawRoundRect(context, 214, 15, 134, 21, 12, gr);
drawRoundRect(context, 214, 42, 134, 21, 12, gr);
drawRoundRect(context, 214, 69, 134, 21, 12, gr);
@ -184,17 +217,14 @@ export default {
context.lineWidth = 1; // 线
this.myChart = myChart;
});
});
},
}
};
</script>
<style lang='scss' scoped>
<style lang="scss" scoped>
.congestion {
width: 100%;
@ -206,11 +236,15 @@ export default {
border-radius: 5px 5px 5px 5px;
opacity: 1;
border: 1px solid;
border-image: linear-gradient(360deg, rgba(55, 231, 255, 0.3), rgba(55, 231, 255, 0)) 1 1;
border-image: linear-gradient(
360deg,
rgba(55, 231, 255, 0.3),
rgba(55, 231, 255, 0)
)
1 1;
display: flex;
justify-content: space-between;
align-items: center;
}
}
@ -219,4 +253,3 @@ export default {
width: 100%;
}
</style>
Loading…
Cancel
Save