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
Unified 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 { .weather {
margin-right: 20px; width: 435px;
display: inline-block; span {
margin-right: 20px;
display: inline-block;
}
} }
.statistics { .statistics {
width: 300px; 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) { handler(data) {
let newData = []; let newData = [];
// let xData = []; // let xData = [];
console.log("data77777", data);
data.forEach((item) => { data.forEach((item) => {
newData.push(item.avgTemperature); newData.push(item.avgTemperature);
// xData.push(item.timeSlot); // xData.push(item.timeSlot);

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

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

Write Preview
Loading…
Cancel
Save