feat 工单消息
This commit is contained in:
duanliang
@@ -29,6 +29,8 @@
|
||||
z-index:99;
|
||||
padding:0 vw(20);
|
||||
.list{
|
||||
scrollbar-width: none;
|
||||
scrollbar-color: transparent transparent;
|
||||
height:vh(895);
|
||||
overflow: auto;
|
||||
.li:nth-child(odd){
|
||||
@@ -71,7 +73,7 @@
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
margin-left:vw(50);
|
||||
margin-left:vw(30);
|
||||
}
|
||||
p{
|
||||
font-weight: 400;
|
||||
|
||||
@@ -8,19 +8,19 @@
|
||||
<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>
|
||||
今日工单总条数 <span class="color1"><countup endVal="45678" /></span>
|
||||
</div>
|
||||
<div class="item item1">
|
||||
工单完成数 <span class="color1">456789</span>
|
||||
工单完成数 <span class="color1"><countup endVal="45678" /></span>
|
||||
</div>
|
||||
<div class="item item3">
|
||||
紧急工单数 <span class="">456789</span>
|
||||
紧急工单数 <span class=""><countup endVal="45678" /></span>
|
||||
</div>
|
||||
<div class="item item2">
|
||||
重要工单数 <span class="">456789</span>
|
||||
重要工单数 <span class=""><countup endVal="45678" /></span>
|
||||
</div>
|
||||
<div class="item item1">
|
||||
普通工单数 <span class="">456789</span>
|
||||
普通工单数 <span class=""><countup endVal="45678" /></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart-box flex">
|
||||
@@ -100,8 +100,8 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as echarts from 'echarts'
|
||||
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';
|
||||
@@ -395,7 +395,7 @@
|
||||
})
|
||||
const optionLine = ref({
|
||||
backgroundColor:'transparent',
|
||||
height:250,
|
||||
height:240,
|
||||
grid:{
|
||||
top:'30',
|
||||
bottom:'0',
|
||||
@@ -496,6 +496,9 @@
|
||||
font-size:vw(14) !important;
|
||||
color:#fff;
|
||||
}
|
||||
.line-chart{
|
||||
// margin-top:vh(20);
|
||||
}
|
||||
.work-box-2{
|
||||
width:vw(1522);
|
||||
height:vh(965);
|
||||
@@ -515,7 +518,7 @@
|
||||
|
||||
.lt-chart{
|
||||
width:vw(740);
|
||||
height: vw(336);
|
||||
min-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;
|
||||
@@ -654,6 +657,7 @@
|
||||
height:vh(74);
|
||||
}
|
||||
.item{
|
||||
display:flex;
|
||||
width:vw(210);
|
||||
height:vh(58);
|
||||
line-height: vh(58);
|
||||
@@ -670,7 +674,7 @@
|
||||
font-size: vw(24);
|
||||
position: relative;
|
||||
top:vh(2);
|
||||
margin-left:vw(2);
|
||||
margin-left:vw(5);
|
||||
}
|
||||
.color1{
|
||||
color:#02F9FA;
|
||||
|
||||
401
src/views/workOrder/components/box-3.vue
Normal file
401
src/views/workOrder/components/box-3.vue
Normal file
@@ -0,0 +1,401 @@
|
||||
<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>
|
||||
</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
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
})
|
||||
</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{
|
||||
scrollbar-width: none;
|
||||
scrollbar-color: transparent transparent;
|
||||
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(150);
|
||||
height:vh(150);
|
||||
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;
|
||||
.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>
|
||||
Reference in New Issue
Block a user