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

Compare commits

base: mengff:b6d6f0867285e9869d3105b91b75db70615584f8
Branches Tags
mengff:develop
mengff:wangqin
...
compare: mengff:db20711abf4ad95b8dbdfc62f8b92242dfd29eb8
Branches Tags
mengff:develop
mengff:wangqin

2 Commits
b6d6f08672 ... db20711abf

Author SHA1 Message Date
zhangzhang db20711abf Merge branch 'develop' of http://39.106.31.193:9211/mengff/jihe-hs into develop
7 months ago
zhangzhang b79f676b78 完善拓扑图
7 months ago
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
  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. 341
      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);

341
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 list = this.map.children[e - 1].children;
const list1 = list.filter(x=>x.ringNetWork === 1)
if(list1){
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