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

完善拓扑图

wangqin
zhangzhang 7 months ago
parent
da6e171372
commit
b79f676b78
3 changed files with 228 additions and 125 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. 9
      ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/CrowdnessIndicatorRankings/index.vue
  2. 1
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherInfoQuery/components/TemperatureTrend/index.vue
  3. 343
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/topology/index.vue

9
ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/CrowdnessIndicatorRankings/index.vue
View File

@ -202,9 +202,12 @@ export default {
}
}
}
.weather span {
margin-right: 20px;
display: inline-block;
.weather {
width: 435px;
span {
margin-right: 20px;
display: inline-block;
}
}
.statistics {
width: 300px;

1
ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherInfoQuery/components/TemperatureTrend/index.vue
View File

@ -31,7 +31,6 @@ export default {
handler(data) {
let newData = [];
// let xData = [];
console.log("data77777", data);
data.forEach((item) => {
newData.push(item.avgTemperature);
// xData.push(item.timeSlot);

343
ruoyi-ui/src/views/JiHeExpressway/pages/perception/topology/index.vue
View File

@ -1,29 +1,39 @@
<template>
<div class='topolog'>
<div class="topolog">
<div class="list">
<div v-for="(item, index) in list" @click="listClick(index)"
:class="'listItem keep-ratio ' + (selIndex === index ? 'listItemAction' : '')">
<div
v-for="(item, index) in list"
@click="listClick(index)"
:class="
'listItem keep-ratio ' + (selIndex === index ? 'listItemAction' : '')
"
>
{{ item.name }}
</div>
</div>
<div class="card">
<div class="top ">
<div class="top">
<div class="t-left">{{ name }}</div>
<div style="display: flex;">
<div class="t-right" v-for="(item,index) in card">
交换机总数 <template v-if="card.length>1">({{ index+1 }})</template>：<span class="len">{{ item.total }}</span>个
<div style="display: flex">
<div class="t-right" v-for="(item, index) in card">
交换机总数
<template v-if="card.length > 1">({{ index + 1 }})</template>：<span
class="len"
>{{ item.total }}</span
>个
<div class="space"></div>
故障数：<span class="len err">{{ item.error }}</span>个
故障数：<span class="len err">{{ item.error }}</span
>个
</div>
</div>
</div>
</div>
<div class="content" v-if="selIndex===0">
<div class="content" v-if="selIndex === 0">
<div class="c c-border">
<div class="arrow-panel-line">
<div class="arrowdow"></div>
<div class="arrowdow"></div>
</div>
<div class="arrow-panel" style="margin-top: -5px;">
<div class="arrow-panel" style="margin-top: -5px">
<div class="arrow"></div>
<div class="arrow"></div>
<div class="arrow"></div>
@ -31,41 +41,61 @@
</div>
<div v-for="(item, index) in topo" v-if="index < 5" class="switch">
<div :class="'line ' + (item.netWorkStatus ? '' : 'liner')"></div>
<div :class="'arrowdown ' + (item.netWorkStatus ? '' : 'arrowr')"></div>
<div :class="'c-name ' + (item.netWorkStatus ? '' : 'c-namer')">{{ item.switchName }}</div>
<div
:class="'arrowdown ' + (item.netWorkStatus ? '' : 'arrowr')"
></div>
<div :class="'c-name ' + (item.netWorkStatus ? '' : 'c-namer')">
{{ item.switchName }}
</div>
<div :class="'line ' + (item.netWorkStatus ? '' : 'liner')"></div>
<div :class="'arrowdown ' + (item.netWorkStatus ? '' : 'arrowr')" style="margin-top:-35px;"></div>
<img v-if="item.netWorkStatus" src="./switch1.png">
<img v-else src="./switch0.png">
<div :class="'c-name c-namesw ' + (item.netWorkStatus ? '' : 'c-namer')">sw</div>
<div
:class="'arrowdown ' + (item.netWorkStatus ? '' : 'arrowr')"
style="margin-top: -35px"
></div>
<img v-if="item.netWorkStatus" src="./switch1.png" />
<img v-else src="./switch0.png" />
<div
:class="
'c-name c-namesw ' + (item.netWorkStatus ? '' : 'c-namer')
"
></div>
<div :class="'c-desc ' + (item.netWorkStatus ? '' : 'c-descr')">
<div>桩号：{{ item.stakeMark }}</div>
<div>IP：{{ item.switchIp }}</div>
</div>
</div>
<div class="arrow-panel" style="margin-top: 292px;">
<div class="arrow-panel" style="margin-top: 308px">
<div class="arrow arrowrig"></div>
<div class="arrow arrowrig"></div>
<div class="arrow arrowrig"></div>
<div class="arrow arrowrig"></div>
</div>
<div class="arrow-panel-line" style="margin-left: 100.1%;">
<div class="arrow-panel-line" style="margin-left: 100.1%">
<div class="arrowdow arrowtop"></div>
<div class="arrowdow arrowtop"></div>
</div>
</div>
<div class="c " style="margin-top: -5px;">
<div class="c" style="margin-top: -5px">
<div v-for="(item, index) in topo" v-if="index >= 5" class="switch">
<div :class="'line ' + (item.netWorkStatus ? '' : 'liner')"></div>
<div :class="'arrowdown ' + (item.netWorkStatus ? '' : 'arrowr')"></div>
<div :class="'c-name ' + (item.netWorkStatus ? '' : 'c-namer')">{{ item.switchName }}</div>
<div
:class="'arrowdown ' + (item.netWorkStatus ? '' : 'arrowr')"
></div>
<div :class="'c-name ' + (item.netWorkStatus ? '' : 'c-namer')">
{{ item.switchName }}
</div>
<div :class="'line ' + (item.netWorkStatus ? '' : 'liner')"></div>
<div :class="'arrowdown ' + (item.netWorkStatus ? '' : 'arrowr')" style="margin-top:-35px;"></div>
<div
:class="'arrowdown ' + (item.netWorkStatus ? '' : 'arrowr')"
style="margin-top: -35px"
></div>
<img class="imgsw" v-if="item.netWorkStatus" src="./switch1.png" />
<img class="imgsw" v-else src="./switch0.png" />
<div :class="'c-name ' + (item.netWorkStatus ? '' : 'c-namer')"
style="padding:0px 50px;margin-top: -5px;border:0px">sw</div>
<img class="imgsw" v-else src="./switch0.png" />
<div
:class="'c-name ' + (item.netWorkStatus ? '' : 'c-namer')"
style="padding: 0px 50px; margin-top: -5px; border: 0px"
></div>
<div :class="'c-desc ' + (item.netWorkStatus ? '' : 'c-descr')">
<div>桩号：{{ item.stakeMark }}</div>
<div>IP：{{ item.switchIp }}</div>
@ -74,50 +104,80 @@
</div>
</div>
<div class="content" v-else>
<div class="c c-border" style="margin-bottom: 30px;" v-for="(item,index) of topo">
<div
class="c c-border"
style="margin-bottom: 30px"
v-for="(item, index) of topo"
>
<div class="arrow-panel-line">
<div class="arrowdow"></div>
<div class="arrowdow"></div>
</div>
<div class="arrow-panel" style="margin-top: -5px;">
<div class="arrow-panel" style="margin-top: -5px">
<div class="arrow"></div>
<div class="arrow"></div>
<div class="arrow"></div>
<div class="arrow"></div>
</div>
<div class="cscorll">
<div :style="' height: 290px;width:'+item.length*200+'px;'">
<div v-for="(itm, idx) in item" class="switchScro">
<div class="switch">
<div :class="'line ' + (itm.netWorkStatus ? '' : 'liner')"></div>
<div :class="'arrowdown ' + (itm.netWorkStatus ? '' : 'arrowr')" style="margin-top: -30px;"></div>
<img class="imgsw" v-if="itm.netWorkStatus" src="./switch1.png" />
<img class="imgsw" v-else src="./switch0.png" />
<div :class="'c-name c-namesw ' + (itm.netWorkStatus ? '' : 'c-namer')">{{itm.switchName}}({{index+1}})</div>
<div :class="'line ' + (itm.netWorkStatus ? '' : 'liner')" style="height: 40px"></div>
<div :class="'arrowdown ' + (itm.netWorkStatus ? '' : 'arrowr')" style="margin-top: -30px;"></div>
<div :class="'device-list ' + (itm.netWorkStatus ? '' : 'device-list-r')">
<div v-for="(idv,idvx) in itm.dcDeviceList">
<div class="device-item">
<img src="./t10.png" />
<div>{{ idv.deviceName }}</div>
</div>
</div>
<!-- width:' + item.length * 200 + 'px;' -->
<!-- <div style="height: 290px"> -->
<div v-for="(itm, idx) in item" class="switchScro">
<div class="switch">
<div
:class="'line ' + (itm.netWorkStatus ? '' : 'liner')"
></div>
<div
:class="'arrowdown ' + (itm.netWorkStatus ? '' : 'arrowr')"
style="margin-top: -30px"
></div>
<img
class="imgsw"
v-if="itm.netWorkStatus"
src="./switch1.png"
/>
<img class="imgsw" v-else src="./switch0.png" />
<div
:class="
'c-name c-namesw ' + (itm.netWorkStatus ? '' : 'c-namer')
"
>
{{ itm.switchName }}({{ index + 1 }})
</div>
<div
:class="'line ' + (itm.netWorkStatus ? '' : 'liner')"
style="height: 40px"
></div>
<div
:class="'arrowdown ' + (itm.netWorkStatus ? '' : 'arrowr')"
style="margin-top: -30px"
></div>
<div
:class="
'device-list ' + (itm.netWorkStatus ? '' : 'device-list-r')
"
>
<div
v-for="(idv, idvx) in itm.dcDeviceList"
class="device-item"
>
<img src="./t10.png" />
<div class="device-item-text">{{ idv.deviceName }}</div>
</div>
</div>
</div>
</div>
<!-- </div> -->
</div>
<div class="arrow-panel" style="margin-top: 292px;">
<div class="arrow-panel" style="margin-top: 308px">
<div class="arrow"></div>
<div class="arrow"></div>
<div class="arrow"></div>
<div class="arrow"></div>
</div>
<div class="arrow-panel-line" style="margin-left: 100.1%;">
<div class="arrow-panel-line" style="margin-left: 100.1%">
<div class="arrowdow"></div>
<div class="arrowdow"></div>
</div>
@ -128,90 +188,90 @@
</template>
<script>
import request from '@/utils/request'
import request from "@/utils/request";
import { Message } from "element-ui";
const enum_device_type = [
{type: "1", label: "枪机",}
]
const enum_device_type = [{ type: "1", label: "枪机" }];
export default {
name: 'InDevelopment',
components: {
},
name: "InDevelopment",
components: {},
data() {
return {
list: [],
selIndex: 0,
name: '',
card: [{total: 0, error: 0 }],
topo: []
}
name: "",
card: [{ total: 0, error: 0 }],
topo: [],
};
},
mounted() {
this.bind()
this.bind();
request({
url: "/type/list",
method: "get",
}).then(res=>{
console.log(res)
});
url: "/type/list",
method: "get",
}).then((res) => {
console.log(res);
});
},
methods: {
bind() {
request({
url: '/business/switch/list',
method: 'get'
}).then(result => {
url: "/business/switch/list",
method: "get",
}).then((result) => {
if (result.code != 200) return Message.error(result?.msg);
this.map = result.data[0];
let list = [{ name: this.map.switchName }]
this.map.children.forEach(e => {
list.push({ name: e.switchName })
});
let list = [{ name: this.map.switchName }];
this.map.children.forEach((e) => {
list.push({ name: e.switchName });
});
this.list = list;
this.listClick();
})
});
},
listClick(e = 0) {
this.selIndex = e;
if (e === 0) {
this.name = this.map.switchName,
this.card = [{
total: this.map.children.length,
error: this.map.children.filter(x => x.netWorkStatus === 0).length
}]
this.topo = this.map.children
(this.name = this.map.switchName),
(this.card = [
{
total: this.map.children.length,
error: this.map.children.filter((x) => x.netWorkStatus === 0)
.length,
},
]);
this.topo = this.map.children;
} else {
this.name = this.map.children[e-1].switchName;
this.name = this.map.children[e - 1].switchName;
let cards = [];
let topo = [];
const list = this.map.children[e-1].children;
const list1 = list.filter(x=>x.ringNetWork === 1)
if(list1){
const list = this.map.children[e - 1].children;
const list1 = list.filter((x) => x.ringNetWork === 1);
if (list1) {
cards.push({
total: list1.length,
error: list1.filter(x => x.netWorkStatus === 0).length
})
topo.push(list1)
error: list1.filter((x) => x.netWorkStatus === 0).length,
});
topo.push(list1);
}
const list2 = list.filter(x=>x.ringNetWork === 2)
if(list2 && list2.length > 0){
const list2 = list.filter((x) => x.ringNetWork === 2);
if (list2 && list2.length > 0) {
cards.push({
total: list2.length,
error: list2.filter(x => x.netWorkStatus === 0).length
})
topo.push(list2)
error: list2.filter((x) => x.netWorkStatus === 0).length,
});
topo.push(list2);
}
this.topo = topo;
this.card = cards;
}
}
}
}
},
},
};
</script>
<style lang='scss' scoped>
<style lang="scss" scoped>
.topolog {
width: 100%;
height: 100%;
@ -278,14 +338,14 @@ export default {
padding-bottom: 10px;
margin-left: 20px;
.len {
color: #12F7B2;
color: #12f7b2;
font-size: 26px;
font-weight: bold;
margin: 0px 10px;
}
.err {
color: #FF5935;
color: #ff5935;
}
.space {
@ -304,12 +364,15 @@ export default {
display: flex;
flex-direction: row;
justify-content: space-around;
height: 300px;
height: 315px;
}
.c-border {
border: 2px solid #34d3eb;
position: relative;
// width: 98%;
// margin: auto;
// overflow: auto;
}
.arrow-panel {
@ -357,14 +420,19 @@ export default {
background: linear-gradient(to bottom, #34d3eb, #ffffff00);
}
}
.cscorll{
width: 80vw;
height: 290px;
overflow-x: auto;
.cscorll {
// width: 80vw;
width: 100%;
position: absolute;
display: flex;
justify-content: space-around;
height: 310px;
padding: 0 20px;
overflow-y: hidden;
overflow-x: auto;
z-index: 9999;
}
.switchScro{
.switchScro {
height: 300px;
width: 200px;
margin-right: 20px;
@ -383,7 +451,7 @@ export default {
}
.liner {
background-color: #FF5935;
background-color: #ff5935;
}
.arrowdown {
@ -395,25 +463,38 @@ export default {
}
.arrowr {
background: linear-gradient(to top, #FF5935, #ffffff00);
background: linear-gradient(to top, #ff5935, #ffffff00);
}
.c-name {
background: linear-gradient(270deg, rgba(61, 231, 253, 0) 0%, rgba(61, 231, 253, 0.7) 51%, rgba(61, 231, 253, 0) 100%);
background: linear-gradient(
270deg,
rgba(61, 231, 253, 0) 0%,
rgba(61, 231, 253, 0.7) 51%,
rgba(61, 231, 253, 0) 100%
);
border-radius: 4px;
padding: 10px 30px;
margin-top: 5px;
border: 1px solid #34d3eb;
}
.c-namesw{
padding:0px 50px;
.c-namesw {
padding: 0px 50px;
margin-top: -5px;
font-size: 14px;
border:0px !important;
border: 0px !important;
}
.c-namer {
background: linear-gradient(270deg, rgba(255, 90, 54, 0) 0%, rgba(255, 90, 54, 0.8) 51%, rgba(255, 90, 54, 0) 100%);
border: 1px solid #FF5935;
background: linear-gradient(
270deg,
rgba(255, 90, 54, 0) 0%,
rgba(255, 90, 54, 0.8) 51%,
rgba(255, 90, 54, 0) 100%
);
border: 1px solid #ff5935;
// white-space: nowrap;
// overflow: hidden;
// text-overflow: ellipsis;
}
.c-desc {
@ -425,7 +506,7 @@ export default {
}
.c-descr {
background: linear-gradient(to bottom, #102229 5%, #FF5935);
background: linear-gradient(to bottom, #102229 5%, #ff5935);
}
img {
@ -434,19 +515,39 @@ export default {
margin-top: 10px;
}
}
.device-list{
.device-list {
border: 1px dashed #34d3eb;
height: 90px;
min-height: 110px;
min-width: 160px;
margin-top: 10px;
overflow: auto;
}
.device-list-r{
border-color: #FF5935;
.device-list-r {
border-color: #ff5935;
// display: flex;
// flex-wrap: wrap;
// justify-content: space-around;
display: grid;
grid-template-rows: repeat(2, minmax(30px, auto));
grid-auto-columns: 1fr;
grid-gap: 0px;
grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
// overflow: hidden;
padding: 10px;
}
.device-item{
image{
width: 30px;
height: 30px;
.device-item {
overflow: hidden;
img {
margin: 0;
width: 25px;
height: 25px;
}
.device-item-text {
width: 40px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 12px;
}
}
</style>

Write Preview
Loading…
Cancel
Save