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

更改感知事件趋势分析

wangqin
zhangzhang 10 months ago
parent
6c5b2734e9
commit
d605ad2e55
4 changed files with 279 additions and 66 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. 121
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/index.vue
  2. 205
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/progressBar copy.vue
  3. 17
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/progressBar.vue
  4. 2
      ruoyi-ui/vue.config.js

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

@ -1,7 +1,7 @@
<template>
<div class='congestion'>
<div class="board">
<ProgressBar class="keep-ratio" @selectItem="selectProgress" :dataList="dataList" :selectIndex="selectId" />
<ProgressBar class="keep-ratio" @selectItem="selectProgress" :dataList="dataList" :selectIndex="selectIndex" />
<div class="searchPanel">
<el-select v-model="area" size="mini" class="selectRoad" placeholder="请选择" default-first-option>
<el-option v-for="item in areaOptions" :key="item.value" :label="item.label" :value="item.value">
@ -103,56 +103,57 @@ export default {
dateTime: "2024",
area: '1',
dataList: [
{
title: "殷家林枢纽"
},
{
title: "大学城立交"
},
{
title: "长清立交"
},
{
title: "松竹枢纽"
},
{
title: "孝里立交"
},
{
title: "平阴立交"
},
{
title: "孔村枢纽"
},
{
title: "平阴南立交"
},
{
title: "魏雪枢纽"
},
{
title: "东平立交"
},
{
title: "东平湖枢纽"
},
{
title: "韩岗立交"
},
{
title: "梁山立交"
},
{
title: "鄄郓枢纽"
},
{
title: "嘉祥西立交"
},
{
title: "王官屯枢纽"
}
// {
// title: "殷家林枢纽"
// },
// {
// title: "大学城立交"
// },
// {
// title: "长清立交"
// },
// {
// title: "松竹枢纽"
// },
// {
// title: "孝里立交"
// },
// {
// title: "平阴立交"
// },
// {
// title: "孔村枢纽"
// },
// {
// title: "平阴南立交"
// },
// {
// title: "魏雪枢纽"
// },
// {
// title: "东平立交"
// },
// {
// title: "东平湖枢纽"
// },
// {
// title: "韩岗立交"
// },
// {
// title: "梁山立交"
// },
// {
// title: "鄄郓枢纽"
// },
// {
// title: "嘉祥西立交"
// },
// {
// title: "王官屯枢纽"
// }
],
quarter: "",
selectIndex: 3,
selectId: 3,
year: "year",
list: [
@ -169,8 +170,10 @@ export default {
},
methods: {
selectProgress(item, index) {
this.selectId = index;
selectProgress(item, index,) {
console.log("))))))))))))", item.id, item, index)
this.selectIndex = index
this.selectId = item.id;
this.searchQuery()
},
onReset() {
@ -489,16 +492,16 @@ export default {
this.dataList.push({
title: it.sectionName.split("-")[0],
id: it.id,
});
})
if (rows.length > 0) {
let lastRoad = rows[rows.length - 1].sectionName.split("-")[1];
this.dataList.push({
title: lastRoad,
id: rows[rows.length - 1].id,
});
}
console.log("dataList", this.dataList)
// if (rows.length > 0) {
// let lastRoad = rows[rows.length - 1].sectionName.split("-")[1];
// this.dataList.push({
// title: lastRoad,
// id: rows[rows.length - 1].id,
// });
// }
}
this.searchQuery();

205
ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/progressBar copy.vue
View File

@ -0,0 +1,205 @@
<template>
<div class='congestion'>
<div :style="{ width: dataList.length * 300 }">
<div :class="selectIndex == index ?
(selectLine < 1 ? 'item action Abefore' : 'item action Aafter') :
(selectIndex + selectLine == index ?
(selectLine < 1 ? 'item action Aafter' : 'item action Abefore') : 'item')"
v-for="(item, index) in dataList" :key="index">
<i class="after" @click="selectItem(index, -1, dataList[index - 1])"></i>
<i class="before" @click="selectItem(index, +1, item)"></i>
<span></span>
<div>{{ item.title }}</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'ProgressBar',
components: {
},
props: {
dataList: {
type: Array,
default: () => {
return []
}
},
selectIndex: {
type: Number,
default: 1
}
},
data() {
return {
// selectIndex: 0,
selectLine: -1,
}
},
created() {
},
methods: {
selectItem(index, num, item) {
this.selectIndex = index;
this.selectLine = num;
if (item)
this.$emit("selectItem", item, index);
}
},
mounted() {
},
}
</script>
<style lang='scss' scoped>
.congestion {
width: 100%;
height: 35px;
display: inline-flex;
flex-direction: row;
>div {
position: relative;
width: 100%;
height: 35px;
display: inline-flex;
flex-direction: row;
>.item .after {
position: absolute;
display: inline-flex;
left: 0px;
top: -5px;
width: 45px !important;
height: 35px !important;
background-color: transparent;
cursor: pointer;
}
>.item .after::after {
content: "";
position: absolute;
display: inline-flex;
left: 0px;
top: 8px;
width: 45px !important;
height: 3px !important;
background-color: #C7C7C7;
}
>.item .before {
position: absolute;
display: inline-flex;
right: 0px;
top: -5px;
width: 45px;
height: 35px;
background-color: transparent;
cursor: pointer;
}
>.item .before::after {
content: "";
position: absolute;
display: inline-flex;
left: 0px;
top: 8px;
width: 45px !important;
height: 3px !important;
background-color: #C7C7C7;
}
.item.action .after::after {
background-color: #72FDC9;
}
.item.action.Aafter .after::after {
background-color: #C7C7C7 !important;
}
>.item.action.Aafter .before::after {
background-color: #72FDC9;
}
>.item.action.Abefore .after::after {
background-color: #72FDC9;
}
>.bef::before {
background-color: #72FDC9 !important;
}
>.aft::after {
background-color: #72FDC9 !important;
}
>.item.action span {
background-color: #72FDC9;
cursor: pointer;
}
>.item.action span::after {
border-color: #72FDC9;
}
>.action div {
color: #72FDC9 !important;
}
>.item {
position: relative;
width: 113px;
height: 35px;
display: inline-flex;
flex-direction: column;
justify-items: center;
>span {
position: absolute;
display: inline-flex;
width: 9px;
height: 9px;
background: #C7C7C7;
border-radius: 50%;
opacity: 1;
left: 53px;
}
>div {
position: relative;
display: inline-flex;
width: 100%;
align-items: center;
justify-content: center;
top: 5px;
margin-top: 10px;
color: #C7C7C7;
}
>span::after {
content: "";
position: absolute;
display: inline-flex;
width: 15px;
height: 15px;
border: 1px solid #C7C7C7;
border-radius: 50%;
opacity: 1;
top: -3.5px;
left: -3px;
}
}
}
}
</style>

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

@ -1,15 +1,20 @@
<template>
<div class='congestion'>
<div :style="{ width: dataList.length * 300 }">
<div>
<!-- :style="{ width: dataList.length * 300 }" -->
<!-- {{ selectIndex }}-{{ selectLine }} -->
<div :class="selectIndex == index ?
(selectLine < 1 ? 'item action Abefore' : 'item action Aafter') :
(selectIndex + selectLine == index ?
(selectLine < 1 ? 'item action Aafter' : 'item action Abefore') : 'item')"
v-for="(item, index) in dataList" :key="index">
<!-- {{ index }} -->
<i class="after" v-if="index === 0"></i>
<i class="after" v-else @click="selectItem(index, -1, dataList[index - 1])"></i>
<!-- {{ index }} -->
<i class="before" v-if="index === dataList.length - 1"></i>
<i class="before" v-else @click="selectItem(index, +1, item)"></i>
<i class="after" @click="selectItem(index, -1, dataList[index - 1])"></i>
<i class="before" @click="selectItem(index, +1, item)"></i>
<span></span>
<div>{{ item.title }}</div>
@ -47,10 +52,10 @@ export default {
},
methods: {
selectItem(index, num, item) {
this.selectIndex = index;
// this.selectIndex = index;
this.selectLine = num;
if (item)
this.$emit("selectItem", item, index);
this.$emit("selectItem", item, index,);
}
},
mounted() {

2
ruoyi-ui/vue.config.js
View File

@ -49,7 +49,7 @@ module.exports = {
// target: `http://10.0.81.202:8087`, //现场后台
// target: `http://10.0.81.204:8087`, //现场后台 刘文阁
// target: `http://10.168.69.255:8087`, //正晨后台 连现场物联 刘文阁
// target: `http://10.168.78.135:8087`, //王钦
// target: `http://10.168.78.135:8087`, //王钦
// target: `http://10.168.66.196:8087`, //正晨后台 连现场物联 刘文阁2
target: `http://10.168.68.42:8087`, //王思祥
changeOrigin: true,

Write Preview
Loading…
Cancel
Save