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

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

wangqin
王钦 10 months ago
parent
cd9dd05931 5cc085a9ed
commit
a5f069a48b
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
Unified 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

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

@ -1,7 +1,7 @@
<template> <template>
<div class='congestion'> <div class='congestion'>
<div class="board"> <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"> <div class="searchPanel">
<el-select v-model="area" size="mini" class="selectRoad" placeholder="请选择" default-first-option> <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"> <el-option v-for="item in areaOptions" :key="item.value" :label="item.label" :value="item.value">
@ -103,56 +103,57 @@ export default {
dateTime: "2024", dateTime: "2024",
area: '1', area: '1',
dataList: [ 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: "", quarter: "",
selectIndex: 3,
selectId: 3, selectId: 3,
year: "year", year: "year",
list: [ list: [
@ -169,8 +170,10 @@ export default {
}, },
methods: { methods: {
selectProgress(item, index) { selectProgress(item, index,) {
this.selectId = index; console.log("))))))))))))", item.id, item, index)
this.selectIndex = index
this.selectId = item.id;
this.searchQuery() this.searchQuery()
}, },
onReset() { onReset() {
@ -489,16 +492,16 @@ export default {
this.dataList.push({ this.dataList.push({
title: it.sectionName.split("-")[0], title: it.sectionName.split("-")[0],
id: it.id, id: it.id,
}); });
}) })
if (rows.length > 0) { console.log("dataList", this.dataList)
let lastRoad = rows[rows.length - 1].sectionName.split("-")[1]; // if (rows.length > 0) {
this.dataList.push({ // let lastRoad = rows[rows.length - 1].sectionName.split("-")[1];
title: lastRoad, // this.dataList.push({
id: rows[rows.length - 1].id, // title: lastRoad,
}); // id: rows[rows.length - 1].id,
} // });
// }
} }
this.searchQuery(); 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> <template>
<div class='congestion'> <div class='congestion'>
<div :style="{ width: dataList.length * 300 }"> <div>
<!-- :style="{ width: dataList.length * 300 }" -->
<!-- {{ selectIndex }}-{{ selectLine }} -->
<div :class="selectIndex == index ? <div :class="selectIndex == index ?
(selectLine < 1 ? 'item action Abefore' : 'item action Aafter') : (selectLine < 1 ? 'item action Abefore' : 'item action Aafter') :
(selectIndex + selectLine == index ? (selectIndex + selectLine == index ?
(selectLine < 1 ? 'item action Aafter' : 'item action Abefore') : 'item')" (selectLine < 1 ? 'item action Aafter' : 'item action Abefore') : 'item')"
v-for="(item, index) in dataList" :key="index"> 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> <span></span>
<div>{{ item.title }}</div> <div>{{ item.title }}</div>
@ -47,10 +52,10 @@ export default {
}, },
methods: { methods: {
selectItem(index, num, item) { selectItem(index, num, item) {
this.selectIndex = index; // this.selectIndex = index;
this.selectLine = num; this.selectLine = num;
if (item) if (item)
this.$emit("selectItem", item, index); this.$emit("selectItem", item, index,);
} }
}, },
mounted() { mounted() {

Write Preview
Loading…
Cancel
Save