Browse Source

bug更改

wangqin
zhangzhang 1 year ago
parent
commit
20380c54da
  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. 110
      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

@ -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

@ -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

@ -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

@ -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

@ -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;

110
ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/topComponent/index.vue

@ -1,12 +1,15 @@
<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">
@ -24,101 +27,102 @@
</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: "其他事件", text: "其他事件",
textEnd: "起", textEnd: "起",
textNum: 9, textNum: 9,
icon: require("./assets/其他事件.png"), icon: require("./assets/其他事件.png"),
reviewed: 4, reviewed: 4,
noReviewed:5 noReviewed: 5,
},{ },
{
text: "路障清除", text: "路障清除",
textEnd: "起", textEnd: "起",
textNum: 9, textNum: 9,
icon: require("./assets/路障清除.png"), icon: require("./assets/路障清除.png"),
reviewed: 4, reviewed: 4,
noReviewed:5 noReviewed: 5,
},{ },
{
text: "车辆故障", text: "车辆故障",
textEnd: "起", textEnd: "起",
textNum: 9, textNum: 9,
icon: require("./assets/车辆故障.png"), icon: require("./assets/车辆故障.png"),
reviewed: 4, reviewed: 4,
noReviewed:5 noReviewed: 5,
},{ },
{
text: "服务区异常", text: "服务区异常",
textEnd: "起", textEnd: "起",
textNum: 9, textNum: 9,
icon: require("./assets/服务区异常.png"), icon: require("./assets/服务区异常.png"),
reviewed: 4, reviewed: 4,
noReviewed:5 noReviewed: 5,
},{ },
{
text: "交通管制", text: "交通管制",
textEnd: "起", textEnd: "起",
textNum: 9, textNum: 9,
icon: require("./assets/交通管制.png"), icon: require("./assets/交通管制.png"),
reviewed: 4, reviewed: 4,
noReviewed:5 noReviewed: 5,
},{ },
{
text: "交通拥堵", text: "交通拥堵",
textEnd: "起", textEnd: "起",
textNum: 9, textNum: 9,
icon: require("./assets/交通拥堵.png"), icon: require("./assets/交通拥堵.png"),
reviewed: 4, reviewed: 4,
noReviewed:5 noReviewed: 5,
},{ },
{
text: "施工建设", text: "施工建设",
textEnd: "起", textEnd: "起",
textNum: 9, textNum: 9,
icon: require("./assets/施工建设.png"), icon: require("./assets/施工建设.png"),
reviewed: 4, reviewed: 4,
noReviewed:5 noReviewed: 5,
},{ },
{
text: "异常天气", text: "异常天气",
textEnd: "起", textEnd: "起",
textNum: 9, textNum: 9,
icon: require("./assets/异常天气.png"), icon: require("./assets/异常天气.png"),
reviewed: 4, reviewed: 4,
noReviewed:5 noReviewed: 5,
},{ },
{
text: "交通事故", text: "交通事故",
textEnd: "起", textEnd: "起",
textNum: 9, textNum: 9,
icon: require("./assets/交通事故.png"), icon: require("./assets/交通事故.png"),
reviewed: 4, reviewed: 4,
noReviewed:5 noReviewed: 5,
} },
],
] };
}
}, },
methods: { methods: {
changeTabs(){ changeTabs() {},
},
} };
}
}
</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;
@ -136,7 +140,6 @@
.footTabs { .footTabs {
display: inline; display: inline;
width: 99%; width: 99%;
} }
.TrafficFlow { .TrafficFlow {
@ -172,18 +175,22 @@
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;
@ -202,7 +209,7 @@
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 {
@ -212,16 +219,13 @@
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 {
@ -232,15 +236,17 @@
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>
Loading…
Cancel
Save