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

18
src/views/workOrder/components/box-1.vue
View File

@@ -27,8 +27,8 @@
<style lang="scss" scoped>
.work-box-1 {
width: vw(815);
height: vh(950);
width: vw(1000);
height:100%;
margin-top: vh(120);
box-sizing: border-box;
background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%);
@@ -49,6 +49,7 @@
border-radius: 5px; /* 滑块的圆角 */
}
height: vh(895);
height:100%;
overflow: auto;
.li:nth-child(odd) {
background: rgba(3, 78, 153, 0.3);
@@ -62,15 +63,16 @@
justify-content: flex-start;
padding: vh(8) vh(10);
.label {
width: vw(60);
height: vh(24);
// width: vw(60);
// height: vh(24);
line-height: vh(24);
color: #fff;
border-radius: vw(2);
font-size: vw(14);
font-size: font-vw(20);
text-align: center;
display: inline-block;
margin-right: vw(10);
padding:vw(15);
}
.normal {
@extend .label;
@@ -86,9 +88,9 @@
}
.time {
font-weight: 400;
font-size: vw(12);
font-size: font-vw(20);
color: rgba(255, 255, 255, 0.6);
line-height: 14px;
// line-height: 14px;
text-align: left;
font-style: normal;
text-transform: none;
@@ -96,7 +98,7 @@
}
p {
font-weight: 400;
font-size: vw(15);
font-size: font-vw(22);
color: #ffffff;
text-align: left;
font-style: normal;

80
src/views/workOrder/components/box-2.vue
View File

@@ -5,7 +5,7 @@
<Title1 title="今日工单" />
</div>
<div class="hd-list">
<img class="h-icon" src="@/assets/images/work-icon-1.png" />
<!-- <img class="h-icon" src="@/assets/images/work-icon-1.png" /> -->
<div class="item item1">
今日工单总条数 <span class="color1"><countup :end-val="totalData.total" /></span>
</div>
@@ -23,9 +23,10 @@
</div>
</div>
<div class="chart">
<div class="chart__wrapper mr-8">
<div class="chart__wrapper">
<Title3 title="工单总数" />
<Line :width="680" :height="320" :data="seriesData" :xAxisData="xAxisData" />
<div style="margin-top:10px;"></div>
<Line width="100%" :height="90" :data="seriesData" :xAxisData="xAxisData" />
</div>
<div class="chart__wrapper">
<Title3 title="工单类型完成比例" />
@@ -67,7 +68,7 @@
</div>
</div>
</div>
<div class="box-2 mt-8">
<div class="box-2">
<Title1 title="不同景区工单占比" />
<div class="chart">
<div class="chart__wrapper">
@@ -195,7 +196,7 @@
border-radius: 0;
}
:deep(.el-progress__text) {
font-size: vw(14) !important;
font-size: font-vw(20) !important;
color: #fff;
}
@@ -213,7 +214,7 @@
margin-left: vw(5);
display: inline-block;
font-weight: 400;
font-size: vw(13);
font-size: font-vw(20);
color: #0084ff;
text-align: center;
font-style: normal;
@@ -230,25 +231,25 @@
.work-box-2 {
margin-top: vh(120);
margin-left: vw(8);
flex:1;
.box-1 {
padding: vw(1) 0;
box-sizing: border-box;
background: linear-gradient(to bottom, #0b2f64 0%, #062b57 100%);
.chart {
display: flex;
// display: flex;
justify-content: space-between;
padding: vw(20) vw(15);
&__wrapper {
width: vw(740);
height: vh(370);
// width: vw(740);
height: vh(400);
padding: 0 vw(20);
background-image: url('@/assets/images/bg-3.png');
background-size: 100% 100%;
.progress {
padding: vw(30);
padding-top: vh(40);
padding-top: vh(50);
&-item {
display: flex;
width: 100%;
@@ -257,7 +258,7 @@
}
&-item__label {
font-weight: bold;
font-size: vw(14);
font-size: font-vw(22);
color: #ffffff;
text-align: left;
font-style: normal;
@@ -279,27 +280,27 @@
left: vw(70);
top: 50%;
transform: translateY(-50%);
width: vw(74);
width: vw(94);
height: auto;
}
.item {
display: flex;
width: vw(210);
height: vh(58);
line-height: vh(58);
width: vw(250);
height: vh(78);
line-height: vh(78);
padding-left: vw(10);
text-align: center;
margin: 0 vw(15);
font-weight: 400;
font-size: vw(14);
font-size: font-vw(22);
color: rgba(255, 255, 255, 0.9);
text-align: left;
font-style: normal;
text-transform: none;
span {
font-size: vw(24);
font-size: font-vw(28);
position: relative;
top: vh(2);
top: vh(0);
margin-left: vw(5);
}
.color1 {
@@ -321,19 +322,19 @@
}
}
.box-2 {
padding: vw(1);
height: vh(442);
// padding: vw(1);
// height: vh(442);
box-sizing: border-box;
background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%);
.chart {
display: flex;
// display: flex;
justify-content: space-between;
padding: vw(20) vw(15);
&__wrapper {
width: vw(740);
height: vh(370);
// width: vw(740);
// height: vh(370);
padding: 0 vw(20);
background-image: url('@/assets/images/bg-3.png');
background-size: 100% 100%;
@@ -349,8 +350,8 @@
&-item {
position: relative;
width: 100%;
height: vh(40);
width: 50%;
height: vh(60);
display: flex;
align-items: center;
margin-bottom: vh(8);
@@ -364,26 +365,26 @@
position: absolute;
content: '';
width: vw(4);
height: vh(40);
height: vh(60);
background-color: #0096ff;
}
.dot {
width: vw(10);
height: vw(10);
width: vw(20);
height: vw(20);
margin: 0 vw(16);
}
.name {
font-weight: 400;
font-size: vw(12);
font-size: font-vw(22);
color: #ffffff;
width: vw(130);
// width: vw(130);
}
.value {
font-weight: bold;
font-size: vw(15);
font-size: font-vw(22);
color: #ffffff;
}
}
@@ -391,11 +392,12 @@
}
.alarm {
width: vw(200);
width: vw(600);
background: #0a4190;
&__wrapper {
width: vw(200);
width: vw(400);
width:100%;
height: vh(270);
background: #054581; /* 滚动条整体样式 */
&::-webkit-scrollbar {
@@ -418,15 +420,15 @@
&:nth-child(2n) {
background: #054d8d;
}
height: vh(40);
height: vh(60);
display: flex;
align-items: center;
}
&-item__rank {
width: vw(24);
height: vh(16);
font-size: vw(12);
width: vw(34);
height: vh(30);
font-size: font-vw(20);
color: #ffffff;
display: flex;
align-items: center;
@@ -445,7 +447,7 @@
&-item__content {
padding-left: vw(20);
font-weight: 400;
font-size: vw(14);
font-size: font-vw(20);
color: #ffffff;
}
}

38
src/views/workOrder/components/box-3.vue
View File

@@ -50,8 +50,7 @@
:key="index"
:value="item.value"
:label="item.name"
:width="150"
:height="150"
/>
</div>
</div>
@@ -110,19 +109,20 @@
<style lang="scss" scoped>
.work-box-3 {
width: vw(840);
width: vw(1000);
margin-top: vh(120);
margin-left: vw(8);
.work-box-1 {
padding: 0 vw(20);
height: vh(566);
// height: vh(566);
display: flex;
flex-direction: column;
background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%);
.list {
height: vh(500);
height: vh(1600);
// height:100%;
overflow: auto;
/* 滚动条整体样式 */
&::-webkit-scrollbar {
@@ -147,20 +147,23 @@
display: flex;
align-items: center;
justify-content: flex-start;
padding: vh(8) vh(10);
padding: vh(20) vh(10);
.label {
width: vw(60);
height: vh(24);
line-height: vh(24);
height: vh(34);
line-height: vh(34);
color: #fff;
border-radius: 2px 2px 2px 2px;
font-size: vw(14);
font-size: font-vw(20);
text-align: center;
display: inline-block;
margin-right: vw(10);
}
.label--primary {
@extend .label;
width:initial;
height:initial;
padding:vw(15);
background: #2380fb;
}
.label--warning {
@@ -173,7 +176,7 @@
}
.time {
font-weight: 400;
font-size: vw(12);
font-size: font-vw(18);
color: rgba(255, 255, 255, 0.6);
line-height: 14px;
text-align: left;
@@ -183,7 +186,7 @@
}
p {
font-weight: 400;
font-size: vw(15);
font-size: font-vw(20);
color: #ffffff;
text-align: left;
font-style: normal;
@@ -202,8 +205,8 @@
.work-2-flex {
display: flex;
flex-direction: column;
height: vh(380);
margin-bottom: vw(8);
// height: vh(380);
margin-bottom: vw(20);
background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%);
.chart-box {
@@ -219,7 +222,7 @@
justify-content: space-around;
&-item {
font-weight: 400;
font-size: vw(14);
font-size: font-vw(20);
}
&-item__icon {
width: vw(24);
@@ -227,7 +230,7 @@
}
&-item__label {
color: #fff;
font-size: vw(14);
font-size: font-vw(20);
}
&-item__value {
position: relative;
@@ -237,11 +240,12 @@
display: flex;
align-items: center;
font-weight: bold;
font-size: vw(28);
font-size: font-vw(28);
color: #fff;
&--primary {
@extend .statistics-item__value;
color: #02f9fa;
background-image: url('@/assets/images/mask-primary.png');
background-size: 100% 100%;
}
@@ -262,7 +266,7 @@
}
}
&-item__value-suffix {
font-size: vw(12);
font-size: font-vw(12);
margin-top: vh(6);
}
}

6
src/views/workOrder/components/pie.vue
View File

@@ -52,7 +52,7 @@
top: '56%',
textStyle: {
color: '#fff',
fontSize: fitChartSize(12)
fontSize: fitChartSize(20)
}
}
],
@@ -175,7 +175,7 @@
<style lang="scss" scoped>
.pie {
width: vw(200);
height: vh(200);
width: vw(250);
height: vh(250);
}
</style>