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:
duanliang
2024-12-19 18:27:29 +08:00
parent 1efefe8325
commit c9b4f315e5
16 changed files with 1030 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

119
src/views/workOrder/components/box-1.vue Normal file
View File

@@ -0,0 +1,119 @@
<template>
<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>
</template>
<script>
</script>
<style lang="scss" scoped>
.work-box-1{
width:vw(815);
height:vh(975);
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{
height:vh(895);
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(50);
}
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%);
}
}
}
}
</style>

720
src/views/workOrder/components/box-2.vue Normal file
View File

@@ -0,0 +1,720 @@
<template>
<div class="work-box-2">
<!-- 1 -->
<div class="work-2-flex">
<div class="header">
<div class="title"> <span>最新工单</span> </div>
</div>
<div class="hd-list">
<img class="h-icon" src="@/assets/images/work-icon-1.png" alt="" />
<div class="item item1">
今日工单总条数 <span class="color1">456789</span>
</div>
<div class="item item1">
工单完成数 <span class="color1">456789</span>
</div>
<div class="item item3">
紧急工单数 <span class="">456789</span>
</div>
<div class="item item2">
重要工单数 <span class="">456789</span>
</div>
<div class="item item1">
普通工单数 <span class="">456789</span>
</div>
</div>
<div class="chart-box flex">
<div class="lt-chart">
<div class="title-3"><span>异常告警占比</span></div>
<div class="box">
<v-chart class="line-chart" :option="optionLine" autoresize />
</div>
</div>
<div class="lt-chart">
<div class="title-3"><span>异常告警占比</span></div>
<div class="box-press">
<!-- <v-chart class="line-chart" :option="optionLine" autoresize /> -->
<div class="p-item">
<span>普通</span>
<div class="box-1">
<el-progress :percentage="50"
stroke-linecap="square"
stroke-width="15" color="#2380FB"></el-progress>
</div>
</div>
<div class="p-item">
<span>普通</span>
<div class="box-1">
<el-progress :percentage="50"
stroke-linecap="square"
stroke-width="15" color="#D9011B"></el-progress>
</div>
</div>
<div class="p-item">
<span>普通</span>
<div class="box-1">
<el-progress :percentage="50"
stroke-linecap="square"
stroke-width="15" color="#FEAE00"></el-progress>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="work-2-flex">
<div class="header">
<div class="title"> <span>最新工单</span> </div>
</div>
<div class="chart-box flex">
<div class="lt-chart">
<div class="title-3"><span>异常告警占比</span></div>
<div class="box">
<v-chart class="chart" :option="option1" autoresize />
<!-- <v-chart class="line-chart" :option="optionLine" autoresize /> -->
</div>
</div>
<div class="lt-chart">
<div class="title-3"><span>异常告警占比</span></div>
<div class="box">
<div class="chart-1">
<v-chart class="chart" :option="option2" autoresize />
</div>
<div class="chart-des">
<div class="t-des">
<img class="h-icon" src="@/assets/images/work-icon-m-1.png" alt="" />
异常点位告警排名
</div>
<div class="t-item" v-for="item in 8">
<span class="bgColor1">1</span>
<p>异常点位告警1号名称</p>
</div>
</div>
<!-- <v-chart class="line-chart" :option="optionLine" autoresize /> -->
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import * as echarts from 'echarts'
import countup from 'vue-countup-v3'
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 customColor = ref('#2380FB');
const option1 = ref({
backgroundColor:'transparent',
tooltip: {
trigger: 'item'
},
legend: {
type: 'scroll',
orient: 'vertical',
right: fitChartSize(10),
top: fitChartSize(70),
bottom: fitChartSize(20),
itemWidth:5,
itemHeight:5,
padding: [20,10,20,10],
// itemGap:15,
show:true,
lineStyle:{
borderColor:'#fff',
width:5,
},
textStyle: {
color: '#fff',
fontSize:fitChartSize(16),
lineHeight: 16,
rich: {
d: {
width: '100%',
borderWidth: 0.5,
height:5,
backgroundColor: '1',
},
a: {
width: fitChartSize(200),
align: 'left',
fontSize:fitChartSize(16),
// backgroundColor:'1'
// color:'1',
// borderColor:'#eee',
// borderWidth:2
},
}
},
formatter: (e) => {
let ratio = 0
let value = 0
if (option1.value.series[0].data.length > 0) {
option1.value.series[0].data.forEach(item => {
if (e == item.name) {
ratio = (item.value*100/3799).toFixed(0)
value = item.value
}
});
}
// return `${e} ${ratio}%
let arr = ['{a|' + e + '}', '{b|' + ratio + '%}']
return arr.join('')
},
itemStyle:{
// color:'#fff'
},
backgroundColor:'rgba(0,77,136,0.6)'
},
series: [
{
name: 'Access From',
type: 'pie',
left:0,
top:40,
width:fitChartSize(350),
height:fitChartSize(350),
// width:200,
// height:200,
radius: ['40%', '50%'],
avoidLabelOverlap: false,
padAngle: 5,
itemStyle: {
borderRadius: 2
},
label: {
show: false,
position: 'center',
fontWeight: 'bold',
// formatter: function (o) {
// let data = o.data.value
// return `{value|${data}}` + '\n' + `{name|整改率}`
// },
// rich: {
// value: {
// color: '#fff',
// fontSize: fitChartSize(24),
// fontWeight: 'bold',
// padding: [0, 0, 5, 0]
// },
// name: {
// color: '#7894A8',
// fontSize: fitChartSize(12)
// }
// }
},
emphasis: {
label: {
show: true,
fontSize: fitChartSize(16),
fontWeight: 'bold',
color:'#fff',
fontWeight: 'bold',
formatter: function (o) {
let data = o.data.value
return `{value|${data}}` + '\n' + `{name|整改率}`
},
rich: {
value: {
color: '#fff',
fontSize: fitChartSize(24),
fontWeight: 'bold',
padding: [0, 0, 5, 0]
},
name: {
color: '#7894A8',
fontSize: fitChartSize(12)
}
}
}
},
labelLine: {
show: true
},
data: [
{ value: 200, name: '异常状况1' },
{ value: 500, name: '异常状况2' },
{ value: 234, name: '异常状况3' },
{ value: 135, name: '异常状况4' },
{ value: 100, name: '异常状况5' },
{ value: 777, name: '异常状况6' },
{ value: 888, name: '其他' },
]
},
],
})
const option2 = ref({
backgroundColor:'transparent',
tooltip: {
trigger: 'item'
},
legend: {
type: 'scroll',
orient: 'vertical',
right: fitChartSize(30),
top: fitChartSize(70),
bottom: fitChartSize(20),
itemWidth:5,
itemHeight:5,
padding: [20,10,20,10],
// itemGap:15,
show:true,
lineStyle:{
borderColor:'#fff',
width:5,
},
textStyle: {
color: '#fff',
fontSize:fitChartSize(16),
lineHeight: 16,
rich: {
d: {
width: '100%',
borderWidth: 0.5,
height:5,
backgroundColor: '1',
},
a: {
width: fitChartSize(100),
align: 'left',
fontSize:fitChartSize(16),
// backgroundColor:'1'
// color:'1',
// borderColor:'#eee',
// borderWidth:2
},
}
},
formatter: (e) => {
let ratio = 0
let value = 0
if (option1.value.series[0].data.length > 0) {
option1.value.series[0].data.forEach(item => {
if (e == item.name) {
ratio = (item.value*100/3799).toFixed(0)
value = item.value
}
});
}
// return `${e} ${ratio}%
let arr = ['{a|' + e + '}', '{b|' + ratio + '%}']
return arr.join('')
},
itemStyle:{
// color:'#fff'
},
backgroundColor:'rgba(0,77,136,0.6)'
},
series: [
{
name: 'Access From',
type: 'pie',
left:fitChartSize(-65),
top:fitChartSize(40),
width:fitChartSize(350),
height:fitChartSize(350),
// width:200,
// height:200,
radius: ['40%', '50%'],
avoidLabelOverlap: false,
padAngle: 5,
itemStyle: {
borderRadius: 2
},
label: {
show: false,
position: 'center',
fontWeight: 'bold',
// formatter: function (o) {
// let data = o.data.value
// return `{value|${data}}` + '\n' + `{name|整改率}`
// },
// rich: {
// value: {
// color: '#fff',
// fontSize: fitChartSize(24),
// fontWeight: 'bold',
// padding: [0, 0, 5, 0]
// },
// name: {
// color: '#7894A8',
// fontSize: fitChartSize(12)
// }
// }
},
emphasis: {
label: {
show: true,
fontSize: fitChartSize(16),
fontWeight: 'bold',
color:'#fff',
fontWeight: 'bold',
formatter: function (o) {
let data = o.data.value
return `{value|${data}}` + '\n' + `{name|整改率}`
},
rich: {
value: {
color: '#fff',
fontSize: fitChartSize(24),
fontWeight: 'bold',
padding: [0, 0, 5, 0]
},
name: {
color: '#7894A8',
fontSize: fitChartSize(12)
}
}
}
},
labelLine: {
show: true
},
data: [
{ value: 200, name: '异常状况1' },
{ value: 500, name: '异常状况2' },
{ value: 234, name: '异常状况3' },
{ value: 135, name: '异常状况4' },
{ value: 100, name: '异常状况5' },
{ value: 777, name: '异常状况6' },
{ value: 888, name: '其他' },
]
},
],
})
const optionLine = ref({
backgroundColor:'transparent',
height:250,
grid:{
top:'30',
bottom:'0',
left:'4%',
containLabel: true,
},
xAxis: {
nameLocation: 'middle',
type: 'category',
boundaryGap: false,
axisLabel: {
fontSize:10,
interval: 0, // 显示所有标签
rotate: 0, // 旋转标签45度
},
data: ['10:00', '10:00', '10:00', '10:00', '10:00', '10:00', '10:00', '10:00', '10:00', '10:00'],
axisTisk:{
show: true,
// 设置刻度长度
length: 1,
lineStyle: {
type: 'dashed' ,// 设置为虚线
width:0,
}
},
axisLine: {
lineStyle: {
color: '#0096FF' // 设置横线颜色
}
}
},
yAxis: {
type: 'value',
min:0,
max:7000,
interval:1000,
axisLabel: {
fontSize: fitChartSize(12) ,// 设置Y轴刻度字体大小
color: '#eee',
},
splitLine:{
show:true,
lineStyle:{
type:'dashed',
color:'#00D0FF'
}
}
},
series: [
{
data: [0, 1000, 3000, 3500, 4200, 2000, 6000,800,6500,4500],
type: 'line',
smooth: true,
label:{
show:false,//隐藏坐标点
},
itemStyle:{
color:'transparent'
},
markLine:{
symbol:['none','none'],
label:{show:false}
},
lineStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: '#7DE7FF'
},
{
offset: 0.5,
color: '#02F9FA'
},
{
offset: 1,
color: '#009DFF'
},
]),
width:2,
}
}
]
})
</script>
<style lang="scss" scoped>
:deep(.el-progress-bar__outer){
background: rgba(0,150,255,0.15);
border-radius: 0;
}
:deep(.el-progress-bar__inner){
border-radius: 0;
}
:deep(.el-progress__text){
font-size:vw(14) !important;
color:#fff;
}
.work-box-2{
width:vw(1522);
height:vh(965);
margin-top:vh(100);
margin-left:vw(10);
position:relative;
z-index: 99;
.work-2-flex{
background: linear-gradient( 321deg, #0B2F64 0%, #062B57 100%);
height:vh(490);
overflow:hidden;
.chart-box{
display: flex;
justify-content: space-between;
padding:vw(20) vw(15);
.lt-chart{
width:vw(740);
height: vw(336);
padding:vw(20);
background: radial-gradient( 70% at 99% 50%, #0A4190 0%, rgba(0,77,136,0.6) 100%);
border-radius: 0px 0px 0px 0px;
border: 1px solid;
border-image: linear-gradient(180deg, rgba(0, 150, 255, 1), rgba(0, 90, 153, 0)) 1 1;
.box-press{
padding:vw(30);
padding-top: vh(40);
.p-item{
display: flex;
width:100%;
margin-top:vh(40);
span{
font-weight: bold;
font-size: vw(14);
color: #FFFFFF;
text-align: left;
font-style: normal;
text-transform: none;
margin-right:vw(10);
}
.box-1{
flex: 1;
}
}
}
.box{
width:100%;
height:vh(300);
display: flex;
.chart-1{
flex: 1;
}
.chart-des{
width:vw(224);
height:vh(312);
background:#0A4190;
.t-item:nth-child(odd){
background: rgba(0,150,255,0.3);
}
.t-item:nth-child(even){
background-color: transparent;
}
.t-item{
display: flex;
padding:vh(10) vw(10);
span{
width:vw(24);
height:vh(16);
text-align: center;
display: inline-block;
margin-right:vw(10);
color:#fff;
border-radius: 2px 2px 2px 2px;
}
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;
}
.bgColor1{
background:#D9011B;
}
.bgColor2{
background:#FEAE00;
}
.bgColor3{
background:#2380FB;
}
.bgColor4{
background:#495C77;
}
}
.t-des{
background: rgba(0,150,255,0.4);
padding:vw(10);
font-weight: 400;
font-size: vw(13);
color: #02F9FA;
display:flex;
text-align: left;
font-style: normal;
text-transform: none;
img{
width:vw(16);
height:vh(12);
margin-right:vw(5);
}
}
}
}
.title-3 {
position: relative;
width: vw(344);
height: vh(12);
margin-top: vh(20);
background-image: url('@/assets/images/title-6.png');
background-size: 100% 100%;
& > span {
position: absolute;
bottom: vh(4);
left: vw(20);
font-size: vw(15);
font-weight: bold;
background-image: linear-gradient(to bottom, #ffffff 0%, #0096ff 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent; /* 兼容WebKit内核浏览器 */
color: transparent; /* 兼容其他浏览器 */
}
}
}
}
.hd-list{
display: flex;
justify-content: center;
position:relative;
.h-icon{
position:absolute;
left:vw(70);
top:50%;
transform: translateY(-50%);
width:vw(74);
height:vh(74);
}
.item{
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(2);
}
.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%;
}
}
.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%);
}
}
}
}
}
</style>