lixuefeng/fengjie-datascreen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

新版式

Browse Source
This commit is contained in:
duanliang
2025-11-24 23:17:46 +08:00
parent 9d78158b77
commit 5c17235581
55 changed files with 973 additions and 731 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/views/monitor/components/alarmRate.vue
View File

@@ -37,8 +37,8 @@
orient: 'vertical',
y: 'center',
left: '50%',
itemWidth: fitChartSize(12),
itemHeight: fitChartSize(12),
itemWidth: fitChartSize(18),
itemHeight: fitChartSize(18),
itemGap: fitChartSize(6),
formatter: (name) => {
let obj = props.dataList.find((item) => item.name == name)
@@ -48,11 +48,11 @@
rich: {
name: {
color: '#fff',
fontSize: fitChartSize(12)
fontSize: fitChartSize(20)
},
value: {
color: '#fff',
fontSize: fitChartSize(12)
fontSize: fitChartSize(20)
}
}
}
@@ -73,13 +73,13 @@
rich: {
value: {
color: '#fff',
fontSize: fitChartSize(16),
fontSize: fitChartSize(20),
fontWeight: 'bold',
padding: [0, 0, 5, 0]
},
name: {
color: '#fff',
fontSize: fitChartSize(12)
fontSize: fitChartSize(22)
}
}
},
@@ -132,7 +132,7 @@
<style scoped lang="scss">
.alarmRate {
width: vw(380);
height: vh(180);
width: 100%;
height: vh(400);
}
</style>

119
src/views/monitor/components/box-1.vue
View File

@@ -41,17 +41,17 @@
<countup class="scenic-item__value" :end-val="scenicAiAnalyzeData.handled" />
</div>
</div>
<div class="flex pt-20 gap8">
<div class="box">
<div class=" pt-20 gap8" style="margin-top:20px;">
<div class="box ">
<Title3 title="异常告警" />
<Line
:width="370"
:height="180"
width="100%"
:height="90"
:data="abnormalAlarm"
:xAxisData="abnormalAlarmXAxisData"
/>
</div>
<div class="box">
<div class="box other-box" style="margin-top:20px;">
<Title3 title="异常告警占比" />
<div class="flex">
<alarmRate :dataList="abnormalData.abnormalAlarmPercent" />
@@ -80,12 +80,12 @@
<countup class="scenic-item__value" :end-val="trafficAiAnalyzeData.handled" />
</div>
</div>
<div class="flex pt-20">
<div class="flex pt-20" style="margin-top:20px;">
<div class="box">
<Title3 title="平均车速(KM/H)" />
<traffic-jam :width="760"
<traffic-jam width="100%"
:series="jamlData[0].data"
:data="jamXAxisData" :height="180" />
:data="jamXAxisData" :height="350" />
</div>
</div>
</template>
@@ -105,11 +105,11 @@
alt=""
/>
<img v-if="scenicSpotId == '龙桥河'" class="map-img" src="@/assets/images/lqh.jpg" alt="" /> -->
<iframe v-if="scenicSpotId == 'root000000'" width="100%" height="100%" src="/map/sxzd/bdc.html"></iframe>
<iframe v-if="scenicSpotId == 'root00000000'" width="100%" height="100%" src="/map/sxzd/sxzd.html"></iframe>
<iframe v-if="scenicSpotId == '龙桥河'" width="100%" height="100%" src="/map/lqh/lqh.html"></iframe>
<iframe v-if="scenicSpotId == 'root000000'" width="100%" height="100%" src="http://192.168.77.200/map/sxzd/bdc.html"></iframe>
<iframe v-if="scenicSpotId == 'root00000000'" width="100%" height="100%" src="http://192.168.77.200/map/sxzd/sxzd.html"></iframe>
<iframe v-if="scenicSpotId == '龙桥河'" width="100%" height="100%" src="http://192.168.77.200/map/lqh/lqh.html"></iframe>
</div>
<div class="flex">
<div class="">
<div class="monitor">
<div class="t-title">
<span>监控点位统计</span>
@@ -142,8 +142,8 @@
<div class="bg" style="cursor: pointer;" >
<Title3 title="今日异常告警" @click="showAbnormalList" />
<Line
:width="370"
:height="180"
width="100%"
:height="70"
:data="abnormalAlarm"
:xAxisData="abnormalAlarmXAxisData"
/>
@@ -180,7 +180,6 @@
<Title3 title="异常告警占比" />
<div class="flex">
<alarmRate :dataList="abnormalData.abnormalAlarmPercent" />
</div>
</div>
</div>
@@ -347,7 +346,7 @@
.none {
width: vw(380);
height: vh(200);
font-size: vw(28);
font-size: font-vw(28);
color: #f2f2f2;
display: flex;
align-items: center;
@@ -355,7 +354,7 @@
}
.detection-top {
width: 100%;
height: vh(560);
height: vh(860);
overflow-x: auto;
overflow-y: hidden;
display: flex;
@@ -381,10 +380,10 @@
}
}
.monitor {
width: vw(405);
// width: vw(405);
margin-right: vw(8);
&-statistics {
height: vh(90);
height: vh(110);
display: flex;
align-items: center;
justify-content: space-evenly;
@@ -398,13 +397,13 @@
&-statistics-item {
&__label {
font-weight: 400;
font-size: vw(14);
font-size: font-vw(20);
color: #fff;
}
&__value {
margin-top: vh(10);
font-weight: bold;
font-size: vw(24);
font-size: font-vw(24);
color: #ffffff;
}
&:nth-child(4) {
@@ -418,9 +417,9 @@
}
}
.traffic-alarm {
width: vw(405);
// width: vw(405);
&-statistics {
height: vh(90);
height: vh(110);
display: flex;
align-items: center;
justify-content: space-evenly;
@@ -434,20 +433,20 @@
&-statistics-item {
&__label {
font-weight: 400;
font-size: vw(14);
font-size: font-vw(20);
color: #fff;
}
&__value {
margin-top: vh(10);
font-weight: bold;
font-size: vw(24);
font-size: font-vw(24);
color: #02f9fa;
text-align: center;
}
&__error {
margin-top: vh(10);
font-weight: bold;
font-size: vw(24);
font-size: font-vw(24);
color: #ff4400;
text-align: center;
}
@@ -468,11 +467,11 @@
}
}
.t-title {
margin: vh(10) auto;
margin: vh(25) auto;
width: 100%;
height: vh(32);
height: vh(50);
font-weight: 800;
font-size: vw(16);
font-size: font-vw(22);
color: #fff;
display: flex;
align-items: center;
@@ -486,31 +485,31 @@
box-shadow: none;
border-top-left-radius: vh(30);
border-bottom-left-radius: vh(30);
font-size: vw(14);
font-size: font-vw(14);
color: #fff;
}
.box-1 {
margin-top: vh(120);
width: vw(800);
height: vh(950);
width: vw(1100);
// height: vh(950);
padding: vw(8);
box-sizing: border-box;
background-image: url('@/assets/images/bg-2.png');
background-size: 100% 100%;
.traffic {
margin-top: vh(20);
height: vh(72);
height: vh(142);
display: flex;
align-items: center;
justify-content: space-evenly;
&-item {
width: vw(229);
height: vw(72);
width: vw(339);
height: vw(102);
font-weight: 400;
font-size: vw(14);
font-size: font-vw(14);
color: #fff;
padding-left: vw(84);
padding-left: vw(150);
display: flex;
flex-direction: column;
justify-content: center;
@@ -531,22 +530,22 @@
&-item__title {
margin-bottom: vh(6);
font-weight: 400;
font-size: vw(14);
font-size: font-vw(18);
color: #ffffff;
}
&-item__value--primary {
font-weight: bold;
font-size: vw(24);
font-size: font-vw(24);
color: #12b5fd;
}
&-item__value--success {
font-weight: bold;
font-size: vw(24);
font-size: font-vw(24);
color: #02f9fa;
}
&-item__value--error {
font-weight: bold;
font-size: vw(24);
font-size: font-vw(24);
color: #f15a25;
}
}
@@ -557,13 +556,14 @@
gap: vw(20);
&-item {
width: vw(182);
height: vw(106);
// width: vw(182);
flex:1;
height: vw(156);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin:vh(20) 0;
&:nth-child(1) {
background-image: url('/src/assets/images/four-t-1.png');
background-size: 100% 100%;
@@ -604,25 +604,28 @@
}
&-item__label {
font-weight: 400;
font-size: vw(14);
font-size: font-vw(20);
color: #fff;
}
&-item__value {
font-weight: bold;
font-size: vw(24);
font-size: font-vw(24);
margin-top: vh(10);
}
}
.unit {
color: #02f9fa;
font-size: vw(14);
font-size: font-vw(14);
margin-bottom: vh(4);
}
.other-box{
height: vh(350) !important;
}
.box {
flex: 1;
height: vh(220);
height: vh(340);
background-image: url('@/assets/images/bg-3.png');
background-size: 100% 100%;
@@ -636,7 +639,7 @@
// & > span {
// padding-left: vw(22);
// font-weight: bold;
// font-size: vw(15);
// font-size: font-vw(15);
// background-image: linear-gradient(to bottom, #ffffff 0%, #75c1ff 100%);
// -webkit-background-clip: text;
// background-clip: text;
@@ -659,36 +662,36 @@
justify-content: center;
}
&-title {
font-size: vw(14);
font-size: font-vw(14);
color: rgba(255, 255, 255, 0.9);
}
&-value {
margin-top: vh(10);
font-weight: bold;
font-size: vw(24);
font-size: font-vw(24);
color: #02f9fa;
}
&-error{
margin-top: vh(10);
font-weight: bold;
font-size: vw(24);
font-size: font-vw(24);
color: #ff4400;
}
.count {
font-weight: bold;
font-size: vw(28);
font-size: font-vw(28);
color: #ff4400 !important;
}
.prefix,
.suffix {
color: #ff4400;
font-size: vw(12);
font-size: font-vw(12);
}
}
.title-3 {
position: relative;
width: vw(344);
height: vh(12);
height: vh(16);
margin-top: vh(20);
background-image: url('@/assets/images/title-6.png');
background-size: 100% 100%;
@@ -697,7 +700,7 @@
position: absolute;
bottom: vh(4);
left: vw(20);
font-size: vw(15);
font-size: font-vw(18);
font-weight: bold;
background-image: linear-gradient(to bottom, #ffffff 0%, #0096ff 100%);
-webkit-background-clip: text;

72
src/views/monitor/components/box-2.vue
View File

@@ -588,6 +588,7 @@
</script>
<style lang="scss" scoped>
.new-title{
margin-bottom:vh(20);
color:#fff;
@@ -621,7 +622,7 @@
> span {
margin: 0 vw(16);
font-weight: 400;
font-size: vw(16);
font-size: font-vw(16);
color: #ffffff;
}
.pause {
@@ -642,34 +643,35 @@
:deep(.el-input__inner) {
background-color: rgba(0, 0, 0, 0) !important;
color: #fff;
font-size: font-vw(22) !important;
}
.box-2 {
margin-top: vh(120);
height: vh(950);
// height: vh(950);
display: flex;
flex: 1;
}
:deep(.el-input__inner) {
height: vh(36);
font-size: vw(16);
font-size: font-vw(16);
color: #ffffff;
}
.left-nav {
margin: 0 vw(8);
width: vw(250);
width: vw(400);
background: linear-gradient(321deg, #0b2f64 0%, #062b57 91%, rgba(5, 40, 79, 0) 100%);
.bom-box {
margin-top: vh(20);
.search-box {
border-radius: vw(2);
height: vh(36);
height: vh(56);
border: 1px solid #0096ff;
margin: vh(10) auto;
display: flex;
align-items: center;
justify-content: space-between;
.search-icon {
width: vw(20);
height: vw(20);
@@ -679,12 +681,13 @@
.tree-box {
position: relative;
height: vh(490);
// height: vh(490);
padding: 0 vw(20);
padding-right:0;
padding-bottom:vw(10);
overflow-y: auto;
overflow-x: hidden;
margin-top:vh(30);
/* 滚动条整体样式 */
&::-webkit-scrollbar {
width: vw(4); /* 滚动条的宽度 */
@@ -701,7 +704,8 @@
.tree-item {
cursor: pointer;
position: relative;
padding-top: vh(20);
padding-top: vh(30);
// border-left: vw(2) solid #37d8fc;
&:nth-child(1) {
padding-top: 0;
@@ -724,7 +728,7 @@
padding: 0 vw(5);
display: block;
font-weight: 400;
font-size: vw(15);
font-size: font-vw(20);
color: #ffffff;
text-align: left;
font-style: normal;
@@ -755,7 +759,7 @@
cursor: pointer;
color: rgb(192,216,254);
font-weight: 400;
font-size: vw(15);
font-size: font-vw(18);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@@ -773,9 +777,9 @@
}
.ul {
font-weight: 400;
font-size: vw(18);
font-size: font-vw(18);
color: #fff;
height: vh(340);
height: vh(740);
overflow-y: auto;
overflow-x: hidden;
/* 滚动条整体样式 */
@@ -794,13 +798,14 @@
}
.li {
cursor: pointer;
width: vw(250);
height: vh(58);
line-height: vh(58);
// width: vw(250);
height: vh(98);
line-height: vh(98);
text-align: center;
margin-bottom: vh(15);
margin-bottom: vh(25);
background: url('/src/assets/images/m-nav-bg-1.png');
background-size: 100% 100%;
font-size: font-vw(22);
}
.active {
background: url('/src/assets/images/m-nav-bg-2.png');
@@ -813,7 +818,7 @@
&-wrapper {
position: relative;
width: 100%;
height: vh(960);
// height: vh(960);
padding: vh(30) vw(20);
box-sizing: border-box;
background-image: url('/src/assets/images/log-v-bg.png');
@@ -822,7 +827,7 @@
padding: vh(10) vw(30);
position: absolute;
right: vw(30);
bottom: vh(20);
bottom: vh(50);
}
}
&-list {
@@ -835,7 +840,7 @@
position: relative;
// width: vw(686);
width: 33%;
height: vh(380);
height: vh(920);
padding: vh(10) vw(10);
background-image: url('/src/assets/images/item-primary.png');
background-size: 100% 100%;
@@ -857,7 +862,7 @@
text-align: center;
line-height: vh(24);
font-weight: 400;
font-size: vw(16);
font-size: font-vw(16);
color: #ffffff;
background-image: url('@/assets/images/unfollow.png');
background-size: 100% 100%;
@@ -875,9 +880,9 @@
left: 0;
bottom: 0;
width: 100%;
padding: vh(10) vw(10);
padding: vh(20) vw(20);
color: #fff;
font-size: vw(14);
font-size: font-vw(20);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@@ -889,11 +894,12 @@
}
&-item__title--primary {
@extend .video-item__title;
font-size: font-vw(20);
background-color: rgba(4, 30, 69, 0.72);
}
&-item__video {
width: 100%;
height: vh(366);
height: vh(900);
object-fit: cover;
}
&-detail {
@@ -905,7 +911,7 @@
position: relative;
padding: vh(40) vw(50);
width: vw(1660);
height: vh(960);
// height: vh(960);
background-image: url('/src/assets/images/one-video-bg.png');
background-size: 100% 100%;
}
@@ -916,7 +922,7 @@
top: 40 (vh);
z-index: 9;
font-weight: 400;
font-size: vw(14);
font-size: font-vw(14);
color: #ffffff;
padding: vw(20);
display: flex;
@@ -925,14 +931,14 @@
}
&-detail__video {
width: 100%;
height: vh(820);
height: vh(1820);
object-fit: contain;
background-color: #000;
}
&-right {
margin-left: vw(8);
width: vw(440);
height: vh(956);
// height: vh(956);
background: #082f5a;
.back-box {
cursor: pointer;
@@ -946,14 +952,14 @@
}
& > span {
font-weight: bold;
font-size: vw(20);
font-size: font-vw(20);
color: #ffffff;
}
}
.list {
overflow-y: auto;
overflow-x: hidden;
height: vh(920);
height: vh(1920);
padding: vw(8);
/* 滚动条整体样式 */
&::-webkit-scrollbar {
@@ -991,7 +997,7 @@
width: 100%;
padding: vw(10);
color: #fff;
font-size: vw(14);
font-size: font-vw(14);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@@ -1003,6 +1009,8 @@
}
&-title--primary {
@extend .item-title;
font-size: font-vw(20);
padding:vw(10);
background-color: rgba(4, 30, 69, 0.72);
}
&-img {
@@ -1054,7 +1062,7 @@
span {
margin-left: vw(30);
font-weight: 800;
font-size: vw(15);
font-size: font-vw(15);
line-height: vh(26);
text-align: center;
font-style: normal;
@@ -1086,7 +1094,7 @@
border-radius: 0px 0px 0px 0px;
text-align: center;
font-weight: 400;
font-size: vw(14);
font-size: font-vw(14);
color: #ffffff;
padding: vw(20);
text-align: left;

10
src/views/monitor/components/traffic-jam.vue
View File

@@ -61,7 +61,7 @@
}
},
axisLabel: {
fontSize: fitChartSize(12),
fontSize: fitChartSize(20),
color: 'rgba(255,255,255,0.9)'
},
data: getXAxisData()
@@ -79,7 +79,7 @@
type: 'value',
axisLabel: {
show: true,
fontSize: fitChartSize(12),
fontSize: fitChartSize(20),
color: 'rgba(255,255,255,0.9)'
},
splitLine: {
@@ -99,7 +99,7 @@
show: true,
position: 'top',
color: '#fff',
fontSize: fitChartSize(12),
fontSize: fitChartSize(20),
formatter: (res) => {
let valueMap = {
1: '畅通',
@@ -139,7 +139,7 @@
<style scoped lang="scss">
.traffic-jam {
width: vw(760);
height: vh(180);
width:100%;
height: vh(360);
}
</style>