Browse Source

改bug、改公共服务统计的布局

wangqin
hui 11 months ago
parent
commit
6e4f1b82c7
  1. 24
      ruoyi-ui/src/common/menuData.js
  2. 2
      ruoyi-ui/src/views/JiHeExpressway/components/CameraShower/CameraController.vue
  3. 10
      ruoyi-ui/src/views/JiHeExpressway/components/infoBoard/BoardInfoEditor.vue
  4. 8
      ruoyi-ui/src/views/JiHeExpressway/index.vue
  5. BIN
      ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/events/img.png
  6. 42
      ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/events/index.vue
  7. BIN
      ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/statistic/img.png
  8. 42
      ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/statistic/index.vue
  9. 39
      ruoyi-ui/src/views/JiHeExpressway/pages/control/qrCode/index.vue
  10. 18
      ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/auditAnalytics/assets/charts.js
  11. 6
      ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/auditAnalytics/index.vue
  12. 17
      ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/channelAnalytics/assets/charts.js
  13. 6
      ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/channelAnalytics/index.vue
  14. 18
      ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/eventTypeAnalysis/assets/charts.js
  15. 8
      ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/eventTypeAnalysis/index.vue
  16. 7
      ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/nucleusThrough/index.vue
  17. 6
      ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/postTrendsDay/index.vue
  18. 8
      ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/postTrendsMonth/index.vue
  19. 2
      ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/topComponent/index.vue
  20. 129
      ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/index.vue
  21. 4
      ruoyi-ui/vue.config.js

24
ruoyi-ui/src/common/menuData.js

@ -102,6 +102,30 @@ export default [
}, },
], ],
}, },
{
title: "扫码报警",
name: "controlQR",
path: "/control/qrCode",
component: "control/qrCode/index.vue"
},
{
title: "非机预警",
name: "controlManual",
children: [
{
title: "事件列表",
name: "controlManualEvents",
path: "/control/manual/events",
component: "control/manual/events/index.vue",
},
{
title: "统计分析",
name: "controlManualStatistic",
path: "/control/manual/statistic",
component: "control/manual/statistic/index.vue",
}
]
}
], ],
}, },
{ {

2
ruoyi-ui/src/views/JiHeExpressway/components/CameraShower/CameraController.vue

@ -126,7 +126,7 @@ export default {
.compHead{ .compHead{
display: flex; justify-content: flex-end; padding-bottom: 20px; display: flex; justify-content: flex-end; padding-bottom: 20px;
// img{ width: 20px; height: 20px; pointer-events: all;} // img{ width: 20px; height: 20px; pointer-events: all;}
.iconfont{font-size: 18px; pointer-events: all;} .iconfont{font-size: 18px; pointer-events: all; color: #3DE8FF;}
} }
.compCon { .compCon {
display: flex; display: flex;

10
ruoyi-ui/src/views/JiHeExpressway/components/infoBoard/BoardInfoEditor.vue

@ -374,8 +374,8 @@ export default {
}, },
}, },
watch: { watch: {
screenSize(newV){ screenSize:{
handler(newV){
if(newV){ if(newV){
let boardH = newV.split("*")[1]; let boardH = newV.split("*")[1];
let fontSize = "20"; let fontSize = "20";
@ -394,6 +394,8 @@ export default {
this.templateDefault.fontSize = fontSize; this.templateDefault.fontSize = fontSize;
} }
}, },
immediate:true
},
visible: { visible: {
handler(newV) { handler(newV) {
this.dialogVisible = newV; this.dialogVisible = newV;
@ -453,10 +455,6 @@ export default {
// this.templateDefault.fontSize = this.fontSizeList[0].dictValue // this.templateDefault.fontSize = this.fontSizeList[0].dictValue
// this.dataForm.FONT_SIZE = res.data[1].dictValue // this.dataForm.FONT_SIZE = res.data[1].dictValue
}); });
}, },
methods: { methods: {
initData() { initData() {

8
ruoyi-ui/src/views/JiHeExpressway/index.vue

@ -113,16 +113,16 @@ export default {
} }
.content { .content {
display: flex; // display: flex;
flex-direction: row; // flex-direction: row;
pointer-events: none; pointer-events: none;
::v-deep { ::v-deep {
>div { >div {
top: -6px; // top: -6px;
z-index: -1; z-index: -1;
pointer-events: auto; pointer-events: auto;
height: calc(100% + 6px); // height: calc(100% + 6px);
} }
} }

BIN
ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/events/img.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 369 KiB

42
ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/events/index.vue

@ -0,0 +1,42 @@
<template>
<div class='comp_box'>
<img src="./img.png" />
</div>
</template>
<script>
export default {
name: 'InDevelopment',
components: {
},
props: {
text: {
type: String,
default: "暂无数据"
}
},
mounted() {
}
}
</script>
<style lang='scss' scoped>
.comp_box {
// padding-top:160px;
width: 100%;
height: 100%;
color: #8A9EAA;
display: flex;
justify-content: center;
align-items: center;
position: relative;
img {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
}
}
</style>

BIN
ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/statistic/img.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 496 KiB

42
ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/statistic/index.vue

@ -0,0 +1,42 @@
<template>
<div class='comp_box'>
<img src="./img.png" />
</div>
</template>
<script>
export default {
name: 'InDevelopment',
components: {
},
props:{
text:{
type:String,
default:"暂无数据"
}
},
mounted() {
}
}
</script>
<style lang='scss' scoped>
.comp_box {
// padding-top:160px;
width: 100%;
height: 100%;
color: #8A9EAA;
display: flex;
justify-content: center;
align-items: center;
position: relative;
img{
position: absolute;
left: 0;
top:0;
bottom: 0;
right: 0;
}
}
</style>

39
ruoyi-ui/src/views/JiHeExpressway/pages/control/qrCode/index.vue

@ -0,0 +1,39 @@
<template>
<div class='comp_box'>
<iframe class="iframe" src="http://10.168.56.206:8888/alarm-ui/single?u=pDo/guSkRP8=&p=u4johJJOFTyugiay04vYxQ==&t=za4NgrFfeTdF76uSUrhJuA==&route=/warning/QRCode" frameborder="0"></iframe>
</div>
</template>
<script>
export default {
name: 'InDevelopment',
components: {
},
props:{
text:{
type:String,
default:"暂无数据"
}
},
mounted() {
}
}
</script>
<style lang='scss' scoped>
.comp_box {
// padding-top:160px;
width: 100%;
height: 100%;
color: #8A9EAA;
display: flex;
justify-content: center;
align-items: center;
position: relative;
.iframe {
position: absolute;
left: 0; top:0; width: 100%; height: 100%;
}
}
</style>

18
ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/auditAnalytics/assets/charts.js

@ -34,7 +34,7 @@ for (var i = 0; i < res.length; i++) {
}); });
if (res[i].name != "") legendData.push(res[i].name); if (res[i].name != "") legendData.push(res[i].name);
} }
let decoDelta = 48;
var options = { var options = {
color: ["#5CC5FF", "#54EFD5", "#FD9666", "#5C8CFE", "#51D5AD"], color: ["#5CC5FF", "#54EFD5", "#FD9666", "#5C8CFE", "#51D5AD"],
title: [ title: [
@ -154,7 +154,7 @@ var options = {
coordinateSystem: "none", coordinateSystem: "none",
renderItem: (params, api) => { renderItem: (params, api) => {
let x0 = api.getWidth() / 2; let x0 = api.getWidth() / 2;
let y0 = api.getHeight() / 2 - 59; let y0 = api.getHeight() / 2 - decoDelta;
let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.5; let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.5;
return { return {
type: "circle", type: "circle",
@ -181,7 +181,7 @@ var options = {
type: "arc", type: "arc",
shape: { shape: {
cx: api.getWidth() / 2, cx: api.getWidth() / 2,
cy: api.getHeight() / 2 - 59, cy: api.getHeight() / 2 - decoDelta,
r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.5, r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.5,
startAngle: ((350 + -angle) * Math.PI) / 180, startAngle: ((350 + -angle) * Math.PI) / 180,
endAngle: ((120 + -angle) * Math.PI) / 180, endAngle: ((120 + -angle) * Math.PI) / 180,
@ -201,7 +201,7 @@ var options = {
coordinateSystem: "none", coordinateSystem: "none",
renderItem: (params, api) => { renderItem: (params, api) => {
let x0 = api.getWidth() / 2; let x0 = api.getWidth() / 2;
let y0 = api.getHeight() / 2 - 59; let y0 = api.getHeight() / 2 - decoDelta;
let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.5; let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.5;
return { return {
type: "circle", type: "circle",
@ -228,7 +228,7 @@ var options = {
type: "arc", type: "arc",
shape: { shape: {
cx: api.getWidth() / 2, cx: api.getWidth() / 2,
cy: api.getHeight() / 2 - 59, cy: api.getHeight() / 2 - decoDelta,
r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.5, r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.5,
startAngle: ((150 + -angle) * Math.PI) / 180, startAngle: ((150 + -angle) * Math.PI) / 180,
endAngle: ((-30 + -angle) * Math.PI) / 180, endAngle: ((-30 + -angle) * Math.PI) / 180,
@ -248,7 +248,7 @@ var options = {
coordinateSystem: "none", coordinateSystem: "none",
renderItem: (params, api) => { renderItem: (params, api) => {
let x0 = api.getWidth() / 2; let x0 = api.getWidth() / 2;
let y0 = api.getHeight() / 2 - 59; let y0 = api.getHeight() / 2 - decoDelta;
let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.56; let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.56;
return { return {
type: "circle", type: "circle",
@ -275,7 +275,7 @@ var options = {
type: "arc", type: "arc",
shape: { shape: {
cx: api.getWidth() / 2, cx: api.getWidth() / 2,
cy: api.getHeight() / 2 - 59, cy: api.getHeight() / 2 - decoDelta,
r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.56, r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.56,
startAngle: ((590 + -angle) * Math.PI) / 180, startAngle: ((590 + -angle) * Math.PI) / 180,
endAngle: ((350 + -angle) * Math.PI) / 180, endAngle: ((350 + -angle) * Math.PI) / 180,
@ -295,7 +295,7 @@ var options = {
coordinateSystem: "none", coordinateSystem: "none",
renderItem: (params, api) => { renderItem: (params, api) => {
let x0 = api.getWidth() / 2; let x0 = api.getWidth() / 2;
let y0 = api.getHeight() / 2 - 59; let y0 = api.getHeight() / 2 - decoDelta;
let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.56; let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.56;
return { return {
type: "circle", type: "circle",
@ -322,7 +322,7 @@ var options = {
type: "arc", type: "arc",
shape: { shape: {
cx: api.getWidth() / 2, cx: api.getWidth() / 2,
cy: api.getHeight() / 2 - 59, cy: api.getHeight() / 2 - decoDelta,
r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.56, r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.56,
startAngle: ((90 + -angle) * Math.PI) / 180, startAngle: ((90 + -angle) * Math.PI) / 180,
endAngle: ((160 + -angle) * Math.PI) / 180, endAngle: ((160 + -angle) * Math.PI) / 180,

6
ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/auditAnalytics/index.vue

@ -42,10 +42,10 @@ export default {
<style lang='scss' scoped> <style lang='scss' scoped>
.congestion { .congestion {
width: 100%; width: 100%;
display: flex; flex-direction: column;
.board { .board {
height: 346px;
width: 100%; width: 100%;
flex: 1;
padding: 0px 20px; padding: 0px 20px;
background: linear-gradient(180deg, rgba(6, 66, 88, 0.2) 0%, #064258 100%); background: linear-gradient(180deg, rgba(6, 66, 88, 0.2) 0%, #064258 100%);
border-radius: 5px 5px 5px 5px; border-radius: 5px 5px 5px 5px;
@ -60,7 +60,7 @@ export default {
} }
.charts { .charts {
height: 376px; height: 100%;
width: 100%; width: 100%;
} }
</style> </style>

17
ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/channelAnalytics/assets/charts.js

@ -36,6 +36,7 @@ for (var i = 0; i < res.length; i++) {
if (res[i].name != "") legendData.push(res[i].name); if (res[i].name != "") legendData.push(res[i].name);
} }
let angle = 0; //角度,用来做简单的动画效果的 let angle = 0; //角度,用来做简单的动画效果的
let decoDelta = 48;
var options = { var options = {
color: ["#68F4DD", "#FFDD69", "#3CC3F0", "#5C8CFE", "#51D5AD"], color: ["#68F4DD", "#FFDD69", "#3CC3F0", "#5C8CFE", "#51D5AD"],
title: [ title: [
@ -155,7 +156,7 @@ var options = {
coordinateSystem: "none", coordinateSystem: "none",
renderItem: (params, api) => { renderItem: (params, api) => {
let x0 = api.getWidth() / 2; let x0 = api.getWidth() / 2;
let y0 = api.getHeight() / 2 - 59; let y0 = api.getHeight() / 2 - decoDelta;
let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.5; let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.5;
return { return {
type: "circle", type: "circle",
@ -182,7 +183,7 @@ var options = {
type: "arc", type: "arc",
shape: { shape: {
cx: api.getWidth() / 2, cx: api.getWidth() / 2,
cy: api.getHeight() / 2 - 59, cy: api.getHeight() / 2 - decoDelta,
r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.5, r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.5,
startAngle: ((350 + -angle) * Math.PI) / 180, startAngle: ((350 + -angle) * Math.PI) / 180,
endAngle: ((120 + -angle) * Math.PI) / 180, endAngle: ((120 + -angle) * Math.PI) / 180,
@ -202,7 +203,7 @@ var options = {
coordinateSystem: "none", coordinateSystem: "none",
renderItem: (params, api) => { renderItem: (params, api) => {
let x0 = api.getWidth() / 2; let x0 = api.getWidth() / 2;
let y0 = api.getHeight() / 2 - 59; let y0 = api.getHeight() / 2 - decoDelta;
let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.5; let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.5;
return { return {
type: "circle", type: "circle",
@ -229,7 +230,7 @@ var options = {
type: "arc", type: "arc",
shape: { shape: {
cx: api.getWidth() / 2, cx: api.getWidth() / 2,
cy: api.getHeight() / 2 - 59, cy: api.getHeight() / 2 - decoDelta,
r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.5, r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.5,
startAngle: ((150 + -angle) * Math.PI) / 180, startAngle: ((150 + -angle) * Math.PI) / 180,
endAngle: ((-30 + -angle) * Math.PI) / 180, endAngle: ((-30 + -angle) * Math.PI) / 180,
@ -249,7 +250,7 @@ var options = {
coordinateSystem: "none", coordinateSystem: "none",
renderItem: (params, api) => { renderItem: (params, api) => {
let x0 = api.getWidth() / 2; let x0 = api.getWidth() / 2;
let y0 = api.getHeight() / 2 - 59; let y0 = api.getHeight() / 2 - decoDelta;
let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.56; let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.56;
return { return {
type: "circle", type: "circle",
@ -276,7 +277,7 @@ var options = {
type: "arc", type: "arc",
shape: { shape: {
cx: api.getWidth() / 2, cx: api.getWidth() / 2,
cy: api.getHeight() / 2 - 59, cy: api.getHeight() / 2 - decoDelta,
r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.56, r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.56,
startAngle: ((590 + -angle) * Math.PI) / 180, startAngle: ((590 + -angle) * Math.PI) / 180,
endAngle: ((350 + -angle) * Math.PI) / 180, endAngle: ((350 + -angle) * Math.PI) / 180,
@ -296,7 +297,7 @@ var options = {
coordinateSystem: "none", coordinateSystem: "none",
renderItem: (params, api) => { renderItem: (params, api) => {
let x0 = api.getWidth() / 2; let x0 = api.getWidth() / 2;
let y0 = api.getHeight() / 2 - 59; let y0 = api.getHeight() / 2 - decoDelta;
let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.56; let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.56;
return { return {
type: "circle", type: "circle",
@ -323,7 +324,7 @@ var options = {
type: "arc", type: "arc",
shape: { shape: {
cx: api.getWidth() / 2, cx: api.getWidth() / 2,
cy: api.getHeight() / 2 - 59, cy: api.getHeight() / 2 - decoDelta,
r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.56, r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.56,
startAngle: ((90 + -angle) * Math.PI) / 180, startAngle: ((90 + -angle) * Math.PI) / 180,
endAngle: ((160 + -angle) * Math.PI) / 180, endAngle: ((160 + -angle) * Math.PI) / 180,

6
ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/channelAnalytics/index.vue

@ -42,9 +42,9 @@ export default {
<style lang='scss' scoped> <style lang='scss' scoped>
.congestion { .congestion {
width: 100%; width: 100%;
display: flex; flex-direction: column;
.board { .board {
height: 346px; flex: 1;
width: 100%; width: 100%;
padding: 0px 20px; padding: 0px 20px;
background: linear-gradient(180deg, rgba(6, 66, 88, 0.2) 0%, #064258 100%); background: linear-gradient(180deg, rgba(6, 66, 88, 0.2) 0%, #064258 100%);
@ -60,7 +60,7 @@ export default {
} }
.charts { .charts {
height: 376px; height: 100%;
width: 100%; width: 100%;
} }
</style> </style>

18
ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/eventTypeAnalysis/assets/charts.js

@ -51,7 +51,7 @@ for (var i = 0; i < res.length; i++) {
}); });
if (res[i].name != "") legendData.push(res[i].name); if (res[i].name != "") legendData.push(res[i].name);
} }
let decoDelta = 48;
var options = { var options = {
color: [ color: [
"#2867FF", "#2867FF",
@ -180,7 +180,7 @@ var options = {
coordinateSystem: "none", coordinateSystem: "none",
renderItem: (params, api) => { renderItem: (params, api) => {
let x0 = api.getWidth() / 2; let x0 = api.getWidth() / 2;
let y0 = api.getHeight() / 2 - 59; let y0 = api.getHeight() / 2 - decoDelta;
let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.5; let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.5;
return { return {
type: "circle", type: "circle",
@ -207,7 +207,7 @@ var options = {
type: "arc", type: "arc",
shape: { shape: {
cx: api.getWidth() / 2, cx: api.getWidth() / 2,
cy: api.getHeight() / 2 - 59, cy: api.getHeight() / 2 - decoDelta,
r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.5, r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.5,
startAngle: ((350 + -angle) * Math.PI) / 180, startAngle: ((350 + -angle) * Math.PI) / 180,
endAngle: ((120 + -angle) * Math.PI) / 180, endAngle: ((120 + -angle) * Math.PI) / 180,
@ -227,7 +227,7 @@ var options = {
coordinateSystem: "none", coordinateSystem: "none",
renderItem: (params, api) => { renderItem: (params, api) => {
let x0 = api.getWidth() / 2; let x0 = api.getWidth() / 2;
let y0 = api.getHeight() / 2 - 59; let y0 = api.getHeight() / 2 - decoDelta;
let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.5; let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.5;
return { return {
type: "circle", type: "circle",
@ -254,7 +254,7 @@ var options = {
type: "arc", type: "arc",
shape: { shape: {
cx: api.getWidth() / 2, cx: api.getWidth() / 2,
cy: api.getHeight() / 2 - 59, cy: api.getHeight() / 2 - decoDelta,
r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.5, r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.5,
startAngle: ((150 + -angle) * Math.PI) / 180, startAngle: ((150 + -angle) * Math.PI) / 180,
endAngle: ((-30 + -angle) * Math.PI) / 180, endAngle: ((-30 + -angle) * Math.PI) / 180,
@ -274,7 +274,7 @@ var options = {
coordinateSystem: "none", coordinateSystem: "none",
renderItem: (params, api) => { renderItem: (params, api) => {
let x0 = api.getWidth() / 2; let x0 = api.getWidth() / 2;
let y0 = api.getHeight() / 2 - 59; let y0 = api.getHeight() / 2 - decoDelta;
let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.56; let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.56;
return { return {
type: "circle", type: "circle",
@ -301,7 +301,7 @@ var options = {
type: "arc", type: "arc",
shape: { shape: {
cx: api.getWidth() / 2, cx: api.getWidth() / 2,
cy: api.getHeight() / 2 - 59, cy: api.getHeight() / 2 - decoDelta,
r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.56, r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.56,
startAngle: ((590 + -angle) * Math.PI) / 180, startAngle: ((590 + -angle) * Math.PI) / 180,
endAngle: ((350 + -angle) * Math.PI) / 180, endAngle: ((350 + -angle) * Math.PI) / 180,
@ -321,7 +321,7 @@ var options = {
coordinateSystem: "none", coordinateSystem: "none",
renderItem: (params, api) => { renderItem: (params, api) => {
let x0 = api.getWidth() / 2; let x0 = api.getWidth() / 2;
let y0 = api.getHeight() / 2 - 59; let y0 = api.getHeight() / 2 - decoDelta;
let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.56; let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.56;
return { return {
type: "circle", type: "circle",
@ -348,7 +348,7 @@ var options = {
type: "arc", type: "arc",
shape: { shape: {
cx: api.getWidth() / 2, cx: api.getWidth() / 2,
cy: api.getHeight() / 2 - 59, cy: api.getHeight() / 2 - decoDelta,
r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.56, r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.56,
startAngle: ((90 + -angle) * Math.PI) / 180, startAngle: ((90 + -angle) * Math.PI) / 180,
endAngle: ((160 + -angle) * Math.PI) / 180, endAngle: ((160 + -angle) * Math.PI) / 180,

8
ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/eventTypeAnalysis/index.vue

@ -1,5 +1,5 @@
<template> <template>
<div class='congestion '> <div class='congestion'>
<WgtTitle :title="'今日发布事件类型分析'"></WgtTitle> <WgtTitle :title="'今日发布事件类型分析'"></WgtTitle>
<div class="board"> <div class="board">
<div class="charts keep-ratio" id="eventTypeAnalysis"></div> <div class="charts keep-ratio" id="eventTypeAnalysis"></div>
@ -42,10 +42,10 @@ export default {
<style lang='scss' scoped> <style lang='scss' scoped>
.congestion { .congestion {
width: 100%; width: 100%;
display: flex; flex-direction: column;
.board { .board {
height: 346px;
width: 100%; width: 100%;
flex: 1;
padding: 0px 20px; padding: 0px 20px;
background: linear-gradient(180deg, rgba(6, 66, 88, 0.2) 0%, #064258 100%); background: linear-gradient(180deg, rgba(6, 66, 88, 0.2) 0%, #064258 100%);
border-radius: 5px 5px 5px 5px; border-radius: 5px 5px 5px 5px;
@ -60,7 +60,7 @@ export default {
} }
.charts { .charts {
height: 376px; height: 100%;
width: 100%; width: 100%;
} }
</style> </style>

7
ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/nucleusThrough/index.vue

@ -2,7 +2,7 @@
<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 keep-ratio">
<el-date-picker <el-date-picker
size="mini" size="mini"
type="month" type="month"
@ -66,12 +66,11 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.congestion { .congestion {
width: 100%; display: flex; flex-direction: column;
.board { .board {
position: relative; position: relative;
height: 300px; flex: 1;
width: 100%;
padding: 0px 20px; padding: 0px 20px;
background: linear-gradient(180deg, rgba(6, 66, 88, 0.2) 0%, #064258 100%); background: linear-gradient(180deg, rgba(6, 66, 88, 0.2) 0%, #064258 100%);
border-radius: 5px 5px 5px 5px; border-radius: 5px 5px 5px 5px;

6
ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/postTrendsDay/index.vue

@ -42,10 +42,10 @@ export default {
<style lang='scss' scoped> <style lang='scss' scoped>
.congestion { .congestion {
width: 100%; width: 100%;
display: flex; flex-direction: column;
.board { .board {
height: 346px;
width: 100%; width: 100%;
flex: 1;
padding: 0px 20px; padding: 0px 20px;
background: linear-gradient(180deg, rgba(6, 66, 88, 0.2) 0%, #064258 100%); background: linear-gradient(180deg, rgba(6, 66, 88, 0.2) 0%, #064258 100%);
border-radius: 5px 5px 5px 5px; border-radius: 5px 5px 5px 5px;
@ -60,7 +60,7 @@ export default {
} }
.charts { .charts {
height: 346px; height: 100%;
width: 100%; width: 100%;
} }
</style> </style>

8
ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/postTrendsMonth/index.vue

@ -2,7 +2,7 @@
<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 keep-ratio">
<el-date-picker <el-date-picker
size="mini" size="mini"
class="selectRoad" class="selectRoad"
@ -58,12 +58,10 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.congestion { .congestion {
width: 100%; display: flex; flex-direction: column;
.board { .board {
flex: 1;
position: relative; position: relative;
height: 300px;
width: 100%;
padding: 0px 20px; padding: 0px 20px;
background: linear-gradient(180deg, rgba(6, 66, 88, 0.2) 0%, #064258 100%); background: linear-gradient(180deg, rgba(6, 66, 88, 0.2) 0%, #064258 100%);
border-radius: 5px 5px 5px 5px; border-radius: 5px 5px 5px 5px;

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

@ -144,7 +144,6 @@ export default {
.TrafficFlow { .TrafficFlow {
width: 100%; width: 100%;
height: 182px;
display: inline-flex; display: inline-flex;
position: relative; position: relative;
z-index: 6; z-index: 6;
@ -247,6 +246,7 @@ export default {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.item:last-child::after{ background: none;}
} }
} }
</style> </style>

129
ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/index.vue

@ -1,25 +1,23 @@
<template> <template>
<div class="TrafficFlow"> <div class="public_service_statistic">
<section class="foot">
<el-tabs class="footTabs" v-model="activeName" @tab-click="changeTabs"> <el-tabs class="content_tab" v-model="activeName" @tab-click="changeTabs">
<el-tab-pane label="公众服务统计分析" name="first"> <el-tab-pane label="公众服务统计分析" name="first" class="first_tab">
<div class="header-shot"> <TopComponent class="line_01"/>
<TopComponent /> <div class="line_02">
<ChannelAnalytics class="unit" />
<EventTypeAnalysis class="unit" />
<AuditAnalytics class="unit" />
<PostTrendsDay class="unit" />
</div> </div>
<div class="content"> <div class="line_03">
<ChannelAnalytics class="content-l" /> <PostTrendsMonth class="unit" />
<EventTypeAnalysis class="content-l" /> <NucleusThrough class="unit" />
<AuditAnalytics class="content-l" />
<PostTrendsDay class="content-l" style="margin-right: 0" />
</div>
<div class="content">
<PostTrendsMonth class="content-mi" />
<NucleusThrough class="content-mi" style="margin-right: 0" />
</div> </div>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="公众服务统计查询" name="second"> </el-tab-pane> <el-tab-pane label="公众服务统计查询" name="second"> </el-tab-pane>
</el-tabs> </el-tabs>
</section>
</div> </div>
</template> </template>
@ -76,90 +74,41 @@ export default {
opacity: 0.1; opacity: 0.1;
} }
.footTabs { .public_service_statistic {
display: inline;
width: 100%;
}
.TrafficFlow {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: relative; padding: 15px;
display: flex; justify-content: stretch; align-items: stretch;
// position: relative;
z-index: 6; z-index: 6;
color: white; color: white;
overflow: hidden;
.header-shot { .content_tab{
width: 98%; display: flex; flex-direction: column; flex: 1;
margin: auto; ::v-deep .el-tabs__header{}
margin-top: 15px; ::v-deep .el-tabs__content{ flex: 1;}
height: 160px;
} }
.content { .first_tab{
width: 100%; width: 100%; height: 100%; display: flex; flex-direction: column;
margin: auto; .line_01 {
display: flex; flex-basis: 140px; margin-bottom: 16px;
flex: 1;
pointer-events: none;
margin-top: 19px;
--keep-ratio: scaleX(1);
> div {
pointer-events: auto;
}
.content-l {
width: calc(25%);
margin-right: 20px;
} }
.line_02{
.content-mi {
width: calc(50%);
margin-right: 20px;
}
.content-m {
display: inline-flex;
flex-direction: column;
width: calc(100% / 4);
margin-right: 20px;
.content-m-t {
width: 100%;
height: 240px;
margin-bottom: 20px;
}
}
.content-r {
width: 49.4%;
}
}
.foot {
width: 98%;
margin: auto;
display: flex;
justify-content: space-between;
flex: 1; flex: 1;
pointer-events: none; height: 0;
margin-top: 8px; display: flex;
> div { margin-bottom: 16px;
pointer-events: auto; .unit{ margin-right: 16px; flex: 1; width: 0;}
} .unit:last-child{ margin-right: 0;}
.foot-w {
width: 100%;
}
.foot-l {
width: 726px;
}
.foot-m {
width: 613px;
} }
.foot-r { .line_03{
width: 493px; height: 0;
flex: 1;
display: flex; align-items: stretch;
.unit{ margin-right: 16px; flex: 1; }
.unit:last-child{ margin-right: 0;}
} }
} }
} }

4
ruoyi-ui/vue.config.js

@ -52,8 +52,8 @@ module.exports = {
// target: `http://10.0.81.204:8087`, //现场后台 刘文阁 // target: `http://10.0.81.204:8087`, //现场后台 刘文阁
// target: `http://10.168.69.255:8087`, //正晨后台 连现场物联 刘文阁 // target: `http://10.168.69.255:8087`, //正晨后台 连现场物联 刘文阁
// target: `http://10.168.78.135:8087`, //王钦 // target: `http://10.168.78.135:8087`, //王钦
// target: `http://10.168.66.196:8087`, //正晨后台 连现场物联 刘文阁2 target: `http://10.168.66.196:8087`, //正晨后台 连现场物联 刘文阁2
target: `http://10.168.68.42:8087`, //王思祥 // target: `http://10.168.68.42:8087`, //王思祥
// target: `http://10.168.65.194:8087`, //赵祥龙 // target: `http://10.168.65.194:8087`, //赵祥龙
// target: `http://10.168.65.156:8097`, //孟 // target: `http://10.168.65.156:8097`, //孟
changeOrigin: true, changeOrigin: true,

Loading…
Cancel
Save