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

feat：完善功能

Browse Source
This commit is contained in:
zjc
2024-12-30 11:56:20 +08:00
parent cb35986d1a
commit d2c0db5270
9 changed files with 1508 additions and 1468 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,413 +1,412 @@
<template>
<div class="work-box-3">
<!-- 1 -->
<div class="work-2-flex">
<div class="header">
<div class="title"> <span>消息情况</span> </div>
</div>
<div class="hd-list">
<div class="item item1">
工单完成数 <span class="color1"><countup endVal="45678" /></span>
</div>
<div class="item item3">
紧急工单数 <span class=""><countup endVal="45678" /></span>
</div>
<div class="item item2">
重要工单数 <span class=""><countup endVal="45678" /></span>
</div>
<div class="item item1">
普通工单数 <span class=""><countup endVal="45678" /></span>
</div>
</div>
<div class="chart-box flex">
<div class="box-item">
<v-chart class="line-chart" :option="option" autoresize />
</div>
<div class="box-item">
<v-chart class="line-chart" :option="option" autoresize />
</div>
<div class="box-item">
<v-chart class="line-chart" :option="option" autoresize />
</div>
</div>
</div>
<!-- 2 -->
<div class="work-box-1">
<!-- 最新工单 -->
<div class="header">
<div class="title"> <span>最新工单</span> </div>
</div>
<!-- 列表 -->
<div class="list">
<div class="li" v-for="item in 40">
<span class="label label1">普通</span>
<p>这是一条工单信息这是一条工单信息这是一条工单信息这是一条工单信息这是一条</p>
<span class="time">2024-12.16 23:58</span>
</div>
</div>
</div>
</div>
<div class="work-box-3">
<!-- 1 -->
<div class="work-2-flex">
<div class="header">
<div class="title"> <span>消息情况</span> </div>
</div>
<div class="hd-list">
<div class="item item1">
工单完成数 <span class="color1"><countup endVal="45678" /></span>
</div>
<div class="item item3">
紧急工单数 <span class=""><countup endVal="45678" /></span>
</div>
<div class="item item2">
重要工单数 <span class=""><countup endVal="45678" /></span>
</div>
<div class="item item1">
普通工单数 <span class=""><countup endVal="45678" /></span>
</div>
</div>
<div class="chart-box flex">
<div class="box-item">
<v-chart class="line-chart" :option="option" autoresize />
</div>
<div class="box-item">
<v-chart class="line-chart" :option="option" autoresize />
</div>
<div class="box-item">
<v-chart class="line-chart" :option="option" autoresize />
</div>
</div>
</div>
<!-- 2 -->
<div class="work-box-1">
<!-- 最新工单 -->
<div class="header">
<div class="title"> <span>消息情况</span> </div>
</div>
<!-- 列表 -->
<div class="list">
<div class="li" v-for="item in 40">
<span class="label label1">普通</span>
<p>这是一条工单信息这是一条工单信息这是一条工单信息这是一条工单信息这是一条</p>
<span class="time">2024-12.16 23:58</span>
</div>
</div>
</div>
</div>
</template>
<script setup>
import countup from 'vue-countup-v3'
import * as echarts from 'echarts'
import { fitChartSize } from '@/utils/dataUtil'
import Map from '@/components/Map/marker.vue'
import VChart, { THEME_KEY } from 'vue-echarts';
import { ref, provide } from 'vue';
provide(THEME_KEY, 'dark');
const option = ref({
backgroundColor:'transparent',
title: [
{
text: '45.5%',
x: 'center',
top: '34%',
textStyle: {
color: '#00D0FF',
fontSize: fitChartSize(12)
}
},
{
text: '完成率',
x: 'center',
top: '56%',
textStyle: {
color: '#fff',
fontSize: fitChartSize(12)
}
}
],
series: [
// 内侧环
{
type: 'gauge',
radius: '100%',
center: ['50%', '50%'],
min: 0,
max: 100,
startAngle: 360,
endAngle: 0,
itemStyle: {
color: '#00D0FF'
},
axisLine: {
show: true,
roundCap: false,
lineStyle: {
color: [
[0, '#075199'],
[1, '#075199']
],
width: fitChartSize(6)
}
},
progress: {
show: true,
roundCap: false,
width: fitChartSize(6)
},
pointer: {
// 指针
show: false
},
axisTick: {
// 刻度
show: false
},
splitLine: {
// 分割线
show: false
},
axisLabel: {
// 刻度标签
show: false
},
detail: {
// 仪表盘详情
show: false
},
data: [
{
value: 50
}
]
},
{
type: 'gauge',
radius: '95%',
center: ['50%', '50%'],
min: 0,
max: 100,
startAngle: 360,
endAngle: 0,
itemStyle: {
color: '#057EB9'
},
axisLine: {
roundCap: false,
lineStyle: {
color: [
[0, '#075199'],
[1, '#075199']
],
width: fitChartSize(10)
}
},
progress: {
show: true,
roundCap: false,
width: fitChartSize(10)
},
pointer: {
// 指针
show: false
},
axisTick: {
// 刻度
show: false
},
splitLine: {
// 分割线
show: false
},
axisLabel: {
// 刻度标签
show: false
},
detail: {
// 仪表盘详情
show: false
},
data: [
{
value: 50
}
]
}
]
})
import countup from 'vue-countup-v3'
import * as echarts from 'echarts'
import { fitChartSize } from '@/utils/dataUtil'
import Map from '@/components/Map/marker.vue'
import VChart, { THEME_KEY } from 'vue-echarts'
import { ref, provide } from 'vue'
provide(THEME_KEY, 'dark')
const option = ref({
backgroundColor: 'transparent',
title: [
{
text: '45.5%',
x: 'center',
top: '34%',
textStyle: {
color: '#00D0FF',
fontSize: fitChartSize(12)
}
},
{
text: '完成率',
x: 'center',
top: '56%',
textStyle: {
color: '#fff',
fontSize: fitChartSize(12)
}
}
],
series: [
// 内侧环
{
type: 'gauge',
radius: '100%',
center: ['50%', '50%'],
min: 0,
max: 100,
startAngle: 360,
endAngle: 0,
itemStyle: {
color: '#00D0FF'
},
axisLine: {
show: true,
roundCap: false,
lineStyle: {
color: [
[0, '#075199'],
[1, '#075199']
],
width: fitChartSize(6)
}
},
progress: {
show: true,
roundCap: false,
width: fitChartSize(6)
},
pointer: {
// 指针
show: false
},
axisTick: {
// 刻度
show: false
},
splitLine: {
// 分割线
show: false
},
axisLabel: {
// 刻度标签
show: false
},
detail: {
// 仪表盘详情
show: false
},
data: [
{
value: 50
}
]
},
{
type: 'gauge',
radius: '95%',
center: ['50%', '50%'],
min: 0,
max: 100,
startAngle: 360,
endAngle: 0,
itemStyle: {
color: '#057EB9'
},
axisLine: {
roundCap: false,
lineStyle: {
color: [
[0, '#075199'],
[1, '#075199']
],
width: fitChartSize(10)
}
},
progress: {
show: true,
roundCap: false,
width: fitChartSize(10)
},
pointer: {
// 指针
show: false
},
axisTick: {
// 刻度
show: false
},
splitLine: {
// 分割线
show: false
},
axisLabel: {
// 刻度标签
show: false
},
detail: {
// 仪表盘详情
show: false
},
data: [
{
value: 50
}
]
}
]
})
</script>
<style lang="scss" scoped>
.work-box-3{
width: vw(813);
height: vh(380);
background: linear-gradient( 321deg, #0B2F64 0%, #062B57 100%);
border-radius: 0px 0px 0px 0px;
margin-top:vh(100);
margin-left:vw(10);
position:relative;
z-index: 99;
.work-box-1{
width:vw(815);
height:vh(588);
// margin-top:vh(100);
background: linear-gradient( 321deg, #0B2F64 0%, #062B57 100%);
border-radius: 0px 0px 0px 0px;
position:relative;
z-index:99;
padding:0 vw(20);
.list{
/* 滚动条整体样式 */
&::-webkit-scrollbar {
width: vw(4); /* 滚动条的宽度 */
}
/* 滚动条轨道 */
&::-webkit-scrollbar-track {
background: 'transparent'; /* 轨道的背景色 */
}
/* 滚动条滑块 */
&::-webkit-scrollbar-thumb {
background: rgba(0, 150, 255, 0.63); /* 滑块的背景色 */
border-radius: 5px; /* 滑块的圆角 */
}
height:vh(510);
overflow: auto;
.li:nth-child(odd){
background: rgba(3,78,153,0.3);
}
.li:nth-child(even){
background-color: transparent;
}
.li{
display: flex;
align-items: center;
justify-content: flex-start;
padding:vh(8) vh(10);
.label{
width: vw(60);
height: vh(24);
line-height:vh(24);
color:#fff;
border-radius: 2px 2px 2px 2px;
font-size: vw(14);
text-align: center;
display: inline-block;
margin-right: vw(10);
}
.label1{
background: #2380FB;
}
.label2{
background: #FEAE00;
}
.label3{
background: #D9011B;
}
.time{
font-weight: 400;
font-size: vw(12);
color: rgba(255,255,255,0.6);
line-height: 14px;
text-align: left;
font-style: normal;
text-transform: none;
margin-left:vw(30);
}
p{
font-weight: 400;
font-size: vw(15);
color: #FFFFFF;
text-align: left;
font-style: normal;
text-transform: none;
flex: 1;
/*1. 先强制一行内显示文本*/
white-space: nowrap;
/*2. 超出的部分隐藏*/
overflow: hidden;
/*3. 文字用省略号替代超出的部分*/
text-overflow: ellipsis;
}
}
}
.header {
position: relative;
margin:vh(20);
.title {
margin: vh(5) auto;
width: vw(468);
height: vh(32);
font-weight: 800;
font-size: vw(16);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
background-image: url('@/assets/images/title-4.png');
background-size: 100% 100%;
span{
font-weight: 800;
color: transparent;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
background-image: linear-gradient(to bottom, #ffffff 0%, #87c9ff 100%);
}
}
}
}
.work-2-flex{
background: linear-gradient( 321deg, #0B2F64 0%, #062B57 100%);
height:vh(380);
overflow:hidden;
.chart-box{
display: flex;
justify-content: space-between;
padding:vw(20) vw(15);
height:vh(360);
padding-top:vh(35);
box-sizing: border-box;
.box-item{
flex:1;
width:vw(140);
height:vh(140);
padding:vw(10);
.line-chart{
// width:100%;
// height:100%;
}
}
}
.header {
position: relative;
margin:vh(20);
.title {
margin: vh(5) auto;
width: vw(468);
height: vh(32);
font-weight: 800;
font-size: vw(16);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
background-image: url('@/assets/images/title-4.png');
background-size: 100% 100%;
span{
font-weight: 800;
color: transparent;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
background-image: linear-gradient(to bottom, #ffffff 0%, #87c9ff 100%);
}
}
}
.hd-list{
display: flex;
justify-content: center;
position:relative;
padding: 0 vw(20);
.h-icon{
position:absolute;
left:vw(70);
top:50%;
transform: translateY(-50%);
width:vw(74);
height:vh(74);
}
.item{
display:flex;
width:vw(210);
height:vh(58);
line-height: vh(58);
padding-left:vw(10);
text-align: center;
margin:0 vw(15);
font-weight: 400;
font-size: vw(14);
color: rgba(255,255,255,0.9);
text-align: left;
font-style: normal;
text-transform: none;
span{
font-size: vw(24);
position: relative;
top:vh(2);
margin-left:vw(5);
}
.color1{
color:#02F9FA;
}
}
.item1{
background-image: url('@/assets/images/work-n-bg-1.png');
background-size: 100% 100%;
}
.item2{
background-image: url('@/assets/images/work-n-bg-2.png');
background-size: 100% 100%;
}
.item3{
background-image: url('@/assets/images/work-n-bg-3.png');
background-size: 100% 100%;
}
}
}
}
</style>
.work-box-3 {
width: vw(813);
height: vh(380);
background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%);
border-radius: 0px 0px 0px 0px;
margin-top: vh(100);
margin-left: vw(10);
position: relative;
z-index: 99;
.work-box-1 {
width: vw(815);
height: vh(588);
// margin-top:vh(100);
background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%);
border-radius: 0px 0px 0px 0px;
position: relative;
z-index: 99;
padding: 0 vw(20);
.list {
/* 滚动条整体样式 */
&::-webkit-scrollbar {
width: vw(4); /* 滚动条的宽度 */
}
/* 滚动条轨道 */
&::-webkit-scrollbar-track {
background: 'transparent'; /* 轨道的背景色 */
}
/* 滚动条滑块 */
&::-webkit-scrollbar-thumb {
background: rgba(0, 150, 255, 0.63); /* 滑块的背景色 */
border-radius: 5px; /* 滑块的圆角 */
}
height: vh(510);
overflow: auto;
.li:nth-child(odd) {
background: rgba(3, 78, 153, 0.3);
}
.li:nth-child(even) {
background-color: transparent;
}
.li {
display: flex;
align-items: center;
justify-content: flex-start;
padding: vh(8) vh(10);
.label {
width: vw(60);
height: vh(24);
line-height: vh(24);
color: #fff;
border-radius: 2px 2px 2px 2px;
font-size: vw(14);
text-align: center;
display: inline-block;
margin-right: vw(10);
}
.label1 {
background: #2380fb;
}
.label2 {
background: #feae00;
}
.label3 {
background: #d9011b;
}
.time {
font-weight: 400;
font-size: vw(12);
color: rgba(255, 255, 255, 0.6);
line-height: 14px;
text-align: left;
font-style: normal;
text-transform: none;
margin-left: vw(30);
}
p {
font-weight: 400;
font-size: vw(15);
color: #ffffff;
text-align: left;
font-style: normal;
text-transform: none;
flex: 1;
/*1. 先强制一行内显示文本*/
white-space: nowrap;
/*2. 超出的部分隐藏*/
overflow: hidden;
/*3. 文字用省略号替代超出的部分*/
text-overflow: ellipsis;
}
}
}
.header {
position: relative;
margin: vh(20);
.title {
margin: vh(5) auto;
width: vw(468);
height: vh(32);
font-weight: 800;
font-size: vw(16);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
background-image: url('@/assets/images/title-4.png');
background-size: 100% 100%;
span {
font-weight: 800;
color: transparent;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
background-image: linear-gradient(to bottom, #ffffff 0%, #87c9ff 100%);
}
}
}
}
.work-2-flex {
background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%);
height: vh(380);
overflow: hidden;
.chart-box {
display: flex;
justify-content: space-between;
padding: vw(20) vw(15);
height: vh(360);
padding-top: vh(35);
box-sizing: border-box;
.box-item {
flex: 1;
width: vw(140);
height: vh(140);
padding: vw(10);
.line-chart {
// width:100%;
// height:100%;
}
}
}
.header {
position: relative;
margin: vh(20);
.title {
margin: vh(5) auto;
width: vw(468);
height: vh(32);
font-weight: 800;
font-size: vw(16);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
background-image: url('@/assets/images/title-4.png');
background-size: 100% 100%;
span {
font-weight: 800;
color: transparent;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
background-image: linear-gradient(to bottom, #ffffff 0%, #87c9ff 100%);
}
}
}
.hd-list {
display: flex;
justify-content: center;
position: relative;
padding: 0 vw(20);
.h-icon {
position: absolute;
left: vw(70);
top: 50%;
transform: translateY(-50%);
width: vw(74);
height: vh(74);
}
.item {
display: flex;
width: vw(210);
height: vh(58);
line-height: vh(58);
padding-left: vw(10);
text-align: center;
margin: 0 vw(15);
font-weight: 400;
font-size: vw(14);
color: rgba(255, 255, 255, 0.9);
text-align: left;
font-style: normal;
text-transform: none;
span {
font-size: vw(24);
position: relative;
top: vh(2);
margin-left: vw(5);
}
.color1 {
color: #02f9fa;
}
}
.item1 {
background-image: url('@/assets/images/work-n-bg-1.png');
background-size: 100% 100%;
}
.item2 {
background-image: url('@/assets/images/work-n-bg-2.png');
background-size: 100% 100%;
}
.item3 {
background-image: url('@/assets/images/work-n-bg-3.png');
background-size: 100% 100%;
}
}
}
}
</style>