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

更改

wangqin
zhangzhang 9 months ago
parent
e9dbbc1a37
commit
432805b9b0
6 changed files with 131 additions and 213 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 49
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dayTotal/index.vue
  2. 37
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventSource/assets/charts.js
  3. 186
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventSource/index.vue
  4. 62
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railway/index.vue
  5. 4
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railwayDay/assets/charts.js
  6. 6
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railwayDay/index.vue

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

@ -2,7 +2,8 @@
<div class='congestion'> <div class='congestion'>
<WgtTitle :title="'日累计感知事件趋势'"></WgtTitle> <WgtTitle :title="'日累计感知事件趋势'"></WgtTitle>
<div class="board"> <div class="board">
<div class="charts keep-ratio " id="daytotal"></div> <Empty v-if="!dataList || dataList.length <= 0" text="暂无数据..."></Empty>
<div v-else class="charts keep-ratio " id="daytotal"></div>
</div> </div>
</div> </div>
</template> </template>
@ -39,54 +40,10 @@ export default {
getDailyCumulative().then(res => { getDailyCumulative().then(res => {
if (res.code == 200) { if (res.code == 200) {
this.dataList = res.data
let data = res.data; let data = res.data;
let timer = []; let timer = [];
let number = []; let number = [];
//默认数值
if(data.length < 1){
data = [
{
time: '00:00',
number: 800
},
{
time: '02:00',
number: 1000
},
{
time: '04:00',
number: 800
},
{
time: '06:00',
number: 700
},
{
time: '08:00',
number: 400
},
{
time: '10:00',
number: 1000
},
{
time: '12:00',
number: 800
},
{
time: '14:00',
number: 500
},
{
time: '16:00',
number: 800
},
{
time: '18:00',
number: 500
},
]
}
data.forEach((it) => { data.forEach((it) => {
timer.push(moment(it.time).format('HH:mm')); timer.push(moment(it.time).format('HH:mm'));

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

@ -119,21 +119,7 @@ var options = {
itemGap: 15, // 设置legend的间距 itemGap: 15, // 设置legend的间距
itemWidth: 10, // 设置宽度 itemWidth: 10, // 设置宽度
itemHeight: 15, // 设置高度 itemHeight: 15, // 设置高度
textStyle: {
fontSize: 12,
color: "#fff",
rich: {
a: {
fontSize: 12,
},
b: {
fontSize: 12,
padding: 5,
marginLeft: 5,
color: "#37E7FF",
},
},
},
itemStyle: { itemStyle: {
borderColor: "transparent", borderColor: "transparent",
}, },
@ -147,11 +133,28 @@ var options = {
} }
} }
var arr = [ var arr = [
"{a|" + name + (name.trim().length == 4 ? "}" : "} "), "{ast|" + name + "}",
"{b|" + (target * 100).toFixed(0) + "%}", "{bst|" + (target * 100).toFixed(0) + "%}",
]; ];
return arr.join(" "); return arr.join(" ");
}, },
textStyle: {
fontSize: 12,
color: "#fff",
rich: {
ast: {
align: "left",
fontSize: 12,
width: 65,
},
bst: {
align: "left",
fontSize: 12,
marginLeft: 20,
color: "#37E7FF",
},
},
},
}, },
series: [ series: [
{ {

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

@ -59,103 +59,103 @@ export default {
let data = res.data.warningSourceList; let data = res.data.warningSourceList;
let total = res.data.total; let total = res.data.total;
if (data.length > 0) { // if (data.length > 0) {
let chartData = [ let chartData = [
{ {
average: 0, average: 0,
name: '视频AI ', name: '视频AI',
percent: 0.3 percent: 0.3
}, },
{ {
average: 0, average: 0,
name: '雷达识别', name: '雷达识别',
percent: 0.2 percent: 0.2
}, { }, {
average: 0, average: 0,
name: '锥桶', name: '锥桶',
percent: 0.1 percent: 0.1
}, { }, {
average: 0, average: 0,
name: '护栏碰撞', name: '护栏碰撞',
percent: 0.2 percent: 0.2
}, { }, {
average: 0, average: 0,
name: '扫码报警', name: '扫码报警',
percent: 0.1 percent: 0.1
}, { }, {
average: 0, average: 0,
name: '非机预警', name: '非机预警',
percent: 0.1 percent: 0.1
}, },
] ]
data.forEach(it => { data.forEach(it => {
if (it.warningSource == 1) { if (it.warningSource == 1) {
chartData[0].average += it.number; chartData[0].average += it.number;
} }
if (it.warningSource == 2) { if (it.warningSource == 2) {
chartData[1].average += it.number; chartData[1].average += it.number;
} }
if (it.warningSource == 3) { if (it.warningSource == 3) {
chartData[2].average += it.number; chartData[2].average += it.number;
} }
if (it.warningSource == 4) { if (it.warningSource == 4) {
chartData[3].average += it.number; chartData[3].average += it.number;
} }
if (it.warningSource == 5) { if (it.warningSource == 5) {
chartData[4].average += it.number; chartData[4].average += it.number;
} }
if (it.warningSource == 6) { if (it.warningSource == 6) {
chartData[5].average += it.number; chartData[5].average += it.number;
} }
// total ++; // total ++;
// drawRoundRect(context, 231, 37 + (index * 27), 138, 20, 12, gr); // drawRoundRect(context, 231, 37 + (index * 27), 138, 20, 12, gr);
})
// console.log('data',chartData)
let colorList = ['#006EDF', '#00FF00', '#FFC30D', '#FF8400', '#1DA7FF', '#2967EA'];
let lengData = [];
let mainData = [];
for (let i = 0; i < chartData.length; i++) {
let it = chartData[i];
lengData.push({
name: it.name,
color: colorList[i],
value: it.average,
});
mainData.push({
name: it.name,
color: colorList[i],
value: it.average,
percent: (it.average / total) || 0
}) })
// console.log('data',chartData) }
let colorList = ['#006EDF', '#00FF00', '#FFC30D', '#FF8400', '#1DA7FF', '#2967EA']; window.mainData = mainData;
let lengData = []; // console.log('mainData', mainData)
let mainData = []; chartsStatistics.title.text = `{tb|${total}}`;
chartsStatistics.title.subtext = "{zb|总数}";
for (let i = 0; i < chartData.length; i++) {
let it = chartData[i]; chartsStatistics.legend.data = lengData;
lengData.push({ chartsStatistics.series[0].data = mainData;
name: it.name,
color: colorList[i], myChart.on('mouseover', (params) => {
value: it.average, // console.log('params',params)
}); if (params.componentType == 'graphic') {
mainData.push({ return
name: it.name,
color: colorList[i],
value: it.average,
percent: it.average / total
})
} }
window.mainData = mainData; chartsStatistics.title.text = `{tb|${params.percent}%}`;
// console.log('mainData', mainData) 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.text = `{tb|${total}}`;
chartsStatistics.title.subtext = "{zb|总数}"; chartsStatistics.title.subtext = "{zb|总数}";
// chartsStatistics.title.left = "25%";
chartsStatistics.legend.data = lengData; myChart.setOption(chartsStatistics);
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);
})
}
} }

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

@ -6,7 +6,9 @@
<div class="checked">路段车流量Top10</div> <div class="checked">路段车流量Top10</div>
<div>断面交通量Top10</div> <div>断面交通量Top10</div>
</div> --> </div> -->
<div class="charts keep-ratio" id="situationEchartBox"></div> <Empty v-if="!dataList || dataList.length <= 0" text="暂无数据..."></Empty>
<div v-else class="charts keep-ratio" id="situationEchartBox"></div>
</div> </div>
</div> </div>
</template> </template>
@ -23,7 +25,9 @@ export default {
WgtTitle, WgtTitle,
}, },
data() { data() {
return {}; return {
dataList: []
};
}, },
mounted() { mounted() {
@ -40,51 +44,6 @@ export default {
let texts = []; let texts = [];
let datas = []; let datas = [];
//默认显示数值
if (data.length <= 0) {
data = [
{
sectionName: "华山北枢纽-济南虚",
number: 32774,
},
{
sectionName: "东客站虚-华山北枢纽",
number: 30067,
},
{
sectionName: "小许家枢纽-东客站虚",
number: 30057,
},
{
sectionName: "临沂枣园枢纽-临沂虚",
number: 28774,
},
{
sectionName: "华山北枢纽-济南虚",
number: 26021,
},
{
sectionName: "华山北枢纽-济南虚",
number: 24061,
},
{
sectionName: "华山北枢纽-济南虚",
number: 20150,
},
{
sectionName: "华山北枢纽-济南虚",
number: 20140,
},
{
sectionName: "华山北枢纽-济南虚",
number: 20050,
},
{
sectionName: "华山北枢纽-济南虚",
number: 20010,
},
];
}
data.forEach((it) => { data.forEach((it) => {
texts.push(it.sectionName); texts.push(it.sectionName);
datas.push(it.number); datas.push(it.number);
@ -99,7 +58,7 @@ export default {
}); });
}); });
}, },
created() {}, created() { },
methods: {}, methods: {},
}; };
</script> </script>
@ -116,12 +75,9 @@ 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( border-image: linear-gradient(360deg,
360deg,
rgba(55, 231, 255, 0.3), rgba(55, 231, 255, 0.3),
rgba(55, 231, 255, 0) rgba(55, 231, 255, 0)) 1 1;
)
1 1;
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;

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

@ -69,7 +69,7 @@ var options = {
}, },
xAxis: { xAxis: {
type: "category", type: "category",
data: nameList, data: [],
axisTick: { axisTick: {
show: false, //隐藏X轴刻度 show: false, //隐藏X轴刻度
}, },
@ -121,7 +121,7 @@ var options = {
series: [ series: [
{ {
type: "bar", type: "bar",
data: dataList, data: [],
z: 4, z: 4,
itemStyle: { itemStyle: {
color: { color: {

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

@ -2,7 +2,8 @@
<div class='congestion'> <div class='congestion'>
<WgtTitle :title="'路段日感知事件'"></WgtTitle> <WgtTitle :title="'路段日感知事件'"></WgtTitle>
<div class="board"> <div class="board">
<div class="charts keep-ratio " id="railwayDay"></div> <Empty v-if="!dataList || dataList.length <= 0" text="暂无数据..."></Empty>
<div v-else class="charts keep-ratio " id="railwayDay"></div>
</div> </div>
</div> </div>
</template> </template>
@ -21,7 +22,7 @@ export default {
}, },
data() { data() {
return { return {
dataList: []
} }
}, },
@ -37,6 +38,7 @@ export default {
var myChart = echarts.init(document.getElementById('railwayDay')); var myChart = echarts.init(document.getElementById('railwayDay'));
getSectionPerceivedNumber().then((res) => { getSectionPerceivedNumber().then((res) => {
if (res.code == 200) { if (res.code == 200) {
dataList = res.data;
let data = res.data; let data = res.data;
if (data.length > 0) { if (data.length > 0) {
let texts = []; let texts = [];

Write Preview
Loading…
Cancel
Save