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

bug更改

wangqin
zhangzhang 1 year ago
parent
287d981d3d
commit
20380c54da
6 changed files with 536 additions and 542 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. 86
      ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/topComponent/index.vue
  2. 3
      ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/assets/charts.js
  3. 30
      ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/index.vue
  4. 6
      ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/nucleusThrough/index.vue
  5. 13
      ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/postTrendsMonth/index.vue
  6. 288
      ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/topComponent/index.vue

86
ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/topComponent/index.vue
View File

@ -1,17 +1,22 @@
<template> <template>
<div class='TrafficFlow'> <div class="TrafficFlow">
<section class="foot"> <section class="foot">
<div class="item keep-ratio" v-for="(item, index) in topDatas"> <div class="item keep-ratio" v-for="(item, index) in topDatas">
<div class="line"> <div class="line"></div>
</div>
<div class="item-title"> <div class="item-title">
<span> {{ item.eventName }} <span class="num">{{ item.total }}</span>起</span> <span>
{{ item.eventName }} <span class="num">{{ item.total }}</span
>起</span
>
</div> </div>
<div class="item-body"> <div class="item-body">
<div class="icon-left" <div
:style="{ backgroundImage: `url(${require(`@screen/images/layer/${active}/${item.eventName}.svg`)})`, '--bgColor': `rgba(0, 209, 255, 10%)` }"> class="left"
</div> :style="{
backgroundImage: `url(${require(`@screen/images/layer/${active}/${item.eventName}.svg`)})`,
'--bgColor': `rgba(0, 209, 255, 10%)`,
}"
></div>
<div class="text-right"> <div class="text-right">
<div class="text"> <div class="text">
@ -31,17 +36,15 @@
</template> </template>
<script> <script>
import { eventStatusNum } from "@/api/event/governanceAnalysis" import { eventStatusNum } from "@/api/event/governanceAnalysis";
export default { export default {
name: 'publicService', name: "publicService",
components: { components: {},
},
data() { data() {
return { return {
active: "事件专题", active: "事件专题",
activeName: "first", activeName: "first",
topDatas: [] topDatas: [],
// topDatas: [{ // topDatas: [{
// text: "其他事件", // text: "其他事件",
// textEnd: "起", // textEnd: "起",
@ -108,33 +111,30 @@ export default {
// } // }
// ] // ]
} };
}, },
methods: { methods: {
getEventStatusNum() { getEventStatusNum() {
eventStatusNum().then(response => { eventStatusNum().then((response) => {
this.topDatas = response.data this.topDatas = response.data;
}) });
}, },
changeTabs() { changeTabs() {},
}
}, },
mounted() { mounted() {
this.getEventStatusNum() this.getEventStatusNum();
}, },
};
}
</script> </script>
<style lang='scss' scoped> <style lang="scss" scoped>
::v-deep .el-tabs__item { ::v-deep .el-tabs__item {
display: inline-flex; display: inline-flex;
justify-content: center; justify-content: center;
font-size: 16px; font-size: 16px;
font-family: PingFang SC, PingFang SC; font-family: PingFang SC, PingFang SC;
font-weight: 500; font-weight: 500;
color: #FFFFFF; color: #ffffff;
min-width: 128px; min-width: 128px;
position: relative; position: relative;
left: 10px; left: 10px;
@ -152,7 +152,6 @@ export default {
.footTabs { .footTabs {
display: inline; display: inline;
width: 99%; width: 99%;
} }
.TrafficFlow { .TrafficFlow {
@ -176,7 +175,6 @@ export default {
height: 100%; height: 100%;
background: linear-gradient(180deg, rgba(6, 66, 88, 0) 40%, #064258 93%); background: linear-gradient(180deg, rgba(6, 66, 88, 0) 40%, #064258 93%);
.item { .item {
position: relative; position: relative;
display: inline-flex; display: inline-flex;
@ -194,18 +192,22 @@ export default {
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background: linear-gradient(180deg, rgba(3, 60, 82, 0) 0%, #033C52 100%); background: linear-gradient(
180deg,
rgba(3, 60, 82, 0) 0%,
#033c52 100%
);
border-radius: 4px 4px 4px 4px; border-radius: 4px 4px 4px 4px;
font-size: 16px; font-size: 16px;
font-family: PingFang SC, PingFang SC; font-family: PingFang SC, PingFang SC;
font-weight: 500; font-weight: 500;
color: #FFFFFF; color: #ffffff;
span.num { span.num {
font-size: 22px; font-size: 22px;
font-family: PangMenZhengDao; font-family: PangMenZhengDao;
font-weight: 400; font-weight: 400;
color: #E2B066; color: #e2b066;
position: relative; position: relative;
display: inline-flex; display: inline-flex;
top: 2px; top: 2px;
@ -224,10 +226,10 @@ export default {
font-size: 14px; font-size: 14px;
font-family: PingFang SC, PingFang SC; font-family: PingFang SC, PingFang SC;
font-weight: 400; font-weight: 400;
color: #FFFFFF; color: #ffffff;
margin: 20px 0; margin: 20px 0;
.icon-left { .left {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -242,22 +244,20 @@ export default {
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: auto; background-size: auto;
background-position: center; background-position: center;
transition: all .18s linear; transition: all 0.18s linear;
&::before { &::before {
content: ""; content: "";
position: absolute; position: absolute;
width: 45px; width: 45px;
height: 45px; height: 45px;
border: 1px solid rgba(0, 209, 255, .5); border: 1px solid rgba(0, 209, 255, 0.5);
background-color: var(--bgColor); background-color: var(--bgColor);
border-radius: 50%; border-radius: 50%;
z-index: -1; z-index: -1;
} }
} }
.text-right { .text-right {
display: inline-flex; display: inline-flex;
flex-direction: column; flex-direction: column;
@ -270,18 +270,13 @@ export default {
} }
} }
span.num { span.num {
font-size: 18px; font-size: 18px;
font-family: PangMenZhengDao; font-family: PangMenZhengDao;
font-weight: 400; font-weight: 400;
color: #E2B066; color: #e2b066;
} }
} }
} }
.line { .line {
@ -295,8 +290,6 @@ export default {
background-size: 100% 100%; background-size: 100% 100%;
} }
// .item::after { // .item::after {
// content: ""; // content: "";
// position: absolute; // position: absolute;
@ -311,9 +304,6 @@ export default {
// justify-content: center; // justify-content: center;
// align-items: center; // align-items: center;
// } // }
} }
} }
</style> </style>

3
ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/assets/charts.js
View File

@ -3,6 +3,9 @@ import * as echarts from "echarts";
let options = { let options = {
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
valueFormatter: (value) => {
return value + "%";
},
// backgroundColor: "rgba(17,95,182,0.5)", // backgroundColor: "rgba(17,95,182,0.5)",
// textStyle: { // textStyle: {
// color: "#fff", // color: "#fff",

30
ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/index.vue
View File

@ -65,20 +65,26 @@
prop="deviceName" prop="deviceName"
label="设备名称" label="设备名称"
></el-table-column> ></el-table-column>
<el-table-column prop="deviceNo" label="设备桩号" width=""> <el-table-column prop="deviceNo" label="设备桩号">
</el-table-column> </el-table-column>
<el-table-column <el-table-column
prop="direction" prop="direction"
label="方向" label="方向"
class-name="showClass" class-name="showClass"
width=""
> >
<template slot-scope="scope">
<span>{{
scope.row.direction == "1"
? "上行"
: scope.row.direction == "2"
? "中间"
: "下行"
}}</span>
</template>
</el-table-column> </el-table-column>
<el-table-column prop="deviceIp" label="设备IP" width=""> <el-table-column prop="deviceIp" label="设备IP"> </el-table-column>
</el-table-column> <el-table-column prop="production" label="厂家"> </el-table-column>
<el-table-column prop="production" label="厂家" width=""> <el-table-column prop="type" label="型号">
</el-table-column>
<el-table-column prop="type" label="型号" width="">
<template slot-scope="scope"> <template slot-scope="scope">
<div v-if="scope.row.type == '1-1'">高清网络枪型固定摄像机</div> <div v-if="scope.row.type == '1-1'">高清网络枪型固定摄像机</div>
<div v-if="scope.row.type == '1-2'">高清网络球形摄像机</div> <div v-if="scope.row.type == '1-2'">高清网络球形摄像机</div>
@ -99,11 +105,9 @@
<div v-if="scope.row.type == '13'">智能设备箱</div> <div v-if="scope.row.type == '13'">智能设备箱</div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="network" label="网段" width=""> <!-- <el-table-column prop="network" label="网段"> </el-table-column> -->
</el-table-column> <el-table-column prop="time" label="监测时间"> </el-table-column>
<el-table-column prop="time" label="监测时间" width=""> <el-table-column prop="deviceStatus" label="设备状态">
</el-table-column>
<el-table-column prop="deviceStatus" label="设备状态" width="">
<template slot-scope="scope"> <template slot-scope="scope">
<div v-if="scope.row.deviceStatus == 1">在线</div> <div v-if="scope.row.deviceStatus == 1">在线</div>
<div v-if="scope.row.deviceStatus == 0" style="color: #bbb"> <div v-if="scope.row.deviceStatus == 0" style="color: #bbb">
@ -422,7 +426,7 @@ export default {
.floatEmpty { .floatEmpty {
position: absolute; position: absolute;
z-index: 100; z-index: 100;
background: rgba($color: #000000, $alpha: 0.2); // background: rgba($color: #000000, $alpha: 0.2);
left: 0; left: 0;
top: 0; top: 0;
right: 0; right: 0;

6
ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/nucleusThrough/index.vue
View File

@ -11,14 +11,14 @@
style="width: 140px" style="width: 140px"
placeholder="请选择" placeholder="请选择"
/> />
<el-quarter-picker <!-- <el-quarter-picker
size="mini" size="mini"
class="selectRoad" class="selectRoad"
style="width: 180px" style="width: 180px"
v-if="year == 'quarter'" v-if="year == 'quarter'"
v-model="quarter" v-model="quarter"
aria-placeholder="请选季度" aria-placeholder="请选季度"
/> /> -->
<el-button <el-button
type="primary" type="primary"
@ -97,7 +97,7 @@ export default {
margin-bottom: 10px; margin-bottom: 10px;
left: 20px; left: 20px;
top: 2px; top: 2px;
z-index: 0; z-index: 9;
div { div {
white-space: nowrap; white-space: nowrap;

13
ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/postTrendsMonth/index.vue
View File

@ -1,25 +1,16 @@
<template> <template>
<div class="congestion"> <div class="congestion">
<WgtTitle :title="'月发布渠道趋势分析'"></WgtTitle> <WgtTitle title="月发布渠道趋势分析"></WgtTitle>
<div class="board"> <div class="board">
<div class="searchPanel_1"> <div class="searchPanel_1">
<el-date-picker <el-date-picker
size="mini" size="mini"
v-if="year != 'quarter'"
class="selectRoad" class="selectRoad"
v-model="dateTime" v-model="dateTime"
style="width: 140px" style="width: 140px"
type="month" type="month"
placeholder="请选择" placeholder="请选择"
/> />
<el-quarter-picker
size="mini"
class="selectRoad"
style="width: 180px"
v-if="year == 'quarter'"
v-model="quarter"
aria-placeholder="请选季度"
/>
<el-button <el-button
type="primary" type="primary"
@ -99,7 +90,7 @@ export default {
margin-bottom: 10px; margin-bottom: 10px;
left: 20px; left: 20px;
top: 2px; top: 2px;
z-index: 0; z-index: 9;
div { div {
white-space: nowrap; white-space: nowrap;

288
ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/topComponent/index.vue
View File

@ -1,165 +1,168 @@
<template> <template>
<div class='TrafficFlow'> <div class="TrafficFlow">
<section class="foot"> <section class="foot">
<div class="item keep-ratio" v-for="(item,index) in topDatas" > <div class="item keep-ratio" v-for="(item, index) in topDatas">
<div class="item-title" > <div class="item-title">
<span> {{ item.text }} <span class="num">{{ item.textNum }}</span>{{ item.textEnd }}</span> <span>
{{ item.text }} <span class="num">{{ item.textNum }}</span
>{{ item.textEnd }}</span
>
</div> </div>
<div class="item-body" > <div class="item-body">
<div class="icon-left" > <div class="">
<img :src="item.icon" /> <img :src="item.icon" />
</div> </div>
<div class="text-right" > <div class="text-right">
<div class="topText" > <div class="topText">
已审核 <span class="num">{{ item.reviewed }}</span> 起 已审核 <span class="num">{{ item.reviewed }}</span> 起
</div> </div>
<div class="bottomText" > <div class="bottomText">
未审核 <span class="num" >{{ item.noReviewed }}</span> 起 未审核 <span class="num">{{ item.noReviewed }}</span> 起
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
</div> </div>
</template> </template>
<script> <script>
export default {
export default { name: "publicService",
name: 'publicService', components: {},
components: { data() {
},
data(){
return { return {
activeName:"first", activeName: "first",
topDatas:[ { topDatas: [
text:"其他事件", {
textEnd:"起", text: "其他事件",
textNum:9, textEnd: "起",
icon:require("./assets/其他事件.png"), textNum: 9,
reviewed:4, icon: require("./assets/其他事件.png"),
noReviewed:5 reviewed: 4,
},{ noReviewed: 5,
text:"路障清除",
textEnd:"起",
textNum:9,
icon:require("./assets/路障清除.png"),
reviewed:4,
noReviewed:5
},{
text:"车辆故障",
textEnd:"起",
textNum:9,
icon:require("./assets/车辆故障.png"),
reviewed:4,
noReviewed:5
},{
text:"服务区异常",
textEnd:"起",
textNum:9,
icon:require("./assets/服务区异常.png"),
reviewed:4,
noReviewed:5
},{
text:"交通管制",
textEnd:"起",
textNum:9,
icon:require("./assets/交通管制.png"),
reviewed:4,
noReviewed:5
},{
text:"交通拥堵",
textEnd:"起",
textNum:9,
icon:require("./assets/交通拥堵.png"),
reviewed:4,
noReviewed:5
},{
text:"施工建设",
textEnd:"起",
textNum:9,
icon:require("./assets/施工建设.png"),
reviewed:4,
noReviewed:5
},{
text:"异常天气",
textEnd:"起",
textNum:9,
icon:require("./assets/异常天气.png"),
reviewed:4,
noReviewed:5
},{
text:"交通事故",
textEnd:"起",
textNum:9,
icon:require("./assets/交通事故.png"),
reviewed:4,
noReviewed:5
}
]
}
}, },
methods:{ {
changeTabs(){ text: "路障清除",
textEnd: "起",
} textNum: 9,
} icon: require("./assets/路障清除.png"),
reviewed: 4,
} noReviewed: 5,
</script> },
{
<style lang='scss' scoped> text: "车辆故障",
textEnd: "起",
textNum: 9,
icon: require("./assets/车辆故障.png"),
reviewed: 4,
noReviewed: 5,
},
{
text: "服务区异常",
textEnd: "起",
textNum: 9,
icon: require("./assets/服务区异常.png"),
reviewed: 4,
noReviewed: 5,
},
{
text: "交通管制",
textEnd: "起",
textNum: 9,
icon: require("./assets/交通管制.png"),
reviewed: 4,
noReviewed: 5,
},
{
text: "交通拥堵",
textEnd: "起",
textNum: 9,
icon: require("./assets/交通拥堵.png"),
reviewed: 4,
noReviewed: 5,
},
{
text: "施工建设",
textEnd: "起",
textNum: 9,
icon: require("./assets/施工建设.png"),
reviewed: 4,
noReviewed: 5,
},
{
text: "异常天气",
textEnd: "起",
textNum: 9,
icon: require("./assets/异常天气.png"),
reviewed: 4,
noReviewed: 5,
},
{
text: "交通事故",
textEnd: "起",
textNum: 9,
icon: require("./assets/交通事故.png"),
reviewed: 4,
noReviewed: 5,
},
],
};
},
methods: {
changeTabs() {},
},
};
</script>
::v-deep .el-tabs__item{ <style lang="scss" scoped>
::v-deep .el-tabs__item {
display: inline-flex; display: inline-flex;
justify-content: center; justify-content: center;
font-size: 16px; font-size: 16px;
font-family: PingFang SC, PingFang SC; font-family: PingFang SC, PingFang SC;
font-weight: 500; font-weight: 500;
color: #FFFFFF; color: #ffffff;
min-width:128px; min-width: 128px;
position: relative; position: relative;
left:10px; left: 10px;
} }
::v-deep .el-tabs__active-bar { ::v-deep .el-tabs__active-bar {
min-width:128px; min-width: 128px;
} }
::v-deep .el-tabs__nav-wrap::after { ::v-deep .el-tabs__nav-wrap::after {
background-color: #133242; background-color: #133242;
opacity: 0.1; opacity: 0.1;
} }
.footTabs { .footTabs {
display: inline; display: inline;
width:99%; width: 99%;
}
}
.TrafficFlow { .TrafficFlow {
width: 100%; width: 100%;
height: 182px; height: 182px;
display: inline-flex; display: inline-flex;
position: relative; position: relative;
z-index: 6; z-index: 6;
color: white; color: white;
background: linear-gradient(180deg, rgba(6,66,88,0) 0%, #06425804 93%); background: linear-gradient(180deg, rgba(6, 66, 88, 0) 0%, #06425804 93%);
border-radius: 0px 0px 0px 0px; border-radius: 0px 0px 0px 0px;
.foot { .foot {
display: inline-flex; display: inline-flex;
flex-direction: row; flex-direction: row;
width:100%; width: 100%;
height:100%; height: 100%;
.item { .item {
position: relative; position: relative;
display: inline-flex; display: inline-flex;
width: calc(100% / 9); width: calc(100% / 9);
height:100%; height: 100%;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -168,26 +171,30 @@
position: relative; position: relative;
display: inline-flex; display: inline-flex;
width: 162px; width: 162px;
height:35px; height: 35px;
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background: linear-gradient(180deg, rgba(3,60,82,0) 0%, #033C52 100%); background: linear-gradient(
180deg,
rgba(3, 60, 82, 0) 0%,
#033c52 100%
);
border-radius: 4px 4px 4px 4px; border-radius: 4px 4px 4px 4px;
font-size: 16px; font-size: 16px;
font-family: PingFang SC, PingFang SC; font-family: PingFang SC, PingFang SC;
font-weight: 500; font-weight: 500;
color: #FFFFFF; color: #ffffff;
span.num { span.num {
font-size: 22px; font-size: 22px;
font-family: PangMenZhengDao; font-family: PangMenZhengDao;
font-weight: 400; font-weight: 400;
color: #E2B066; color: #e2b066;
display: inline-flex; display: inline-flex;
position: relative; position: relative;
left:-2px; left: -2px;
top:1px; top: 1px;
} }
} }
@ -195,52 +202,51 @@
position: relative; position: relative;
display: inline-flex; display: inline-flex;
width: 162px; width: 162px;
height:100%; height: 100%;
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
font-size: 14px; font-size: 14px;
font-family: PingFang SC, PingFang SC; font-family: PingFang SC, PingFang SC;
font-weight: 400; font-weight: 400;
color: #FFFFFF; color: #ffffff;
margin-top:15px; margin-top: 15px;
img { img {
width:47px; width: 47px;
height:47px; height: 47px;
margin:0 10px; margin: 0 10px;
margin-right:20px; margin-right: 20px;
} }
span.num { span.num {
font-size: 18px; font-size: 18px;
font-family: PangMenZhengDao; font-family: PangMenZhengDao;
font-weight: 400; font-weight: 400;
color: #E2B066; color: #e2b066;
} }
} }
} }
.item::after { .item::after {
content: ""; content: "";
position: absolute; position: absolute;
display: inline-flex; display: inline-flex;
top:20px; top: 20px;
right:0px; right: 0px;
width: 1px; width: 1px;
height: 116px; height: 116px;
background: linear-gradient(90deg, rgba(8, 135, 182, 0.2), rgba(0, 100, 137, 1), rgba(3, 60, 81, 0.2)); background: linear-gradient(
90deg,
rgba(8, 135, 182, 0.2),
rgba(0, 100, 137, 1),
rgba(3, 60, 81, 0.2)
);
opacity: 1; opacity: 1;
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
}
} }
</style> }
</style>

Write Preview
Loading…
Cancel
Save