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-20 12:57:08 +08:00
parent cfba180177 c9622db16f
commit c465d43d39
6 changed files with 427 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/Correspondence/index.vue
View File

@@ -143,10 +143,11 @@
color: #ffffff; color: #ffffff;
line-height: vh(16); line-height: vh(16);
flex-wrap: wrap; flex-wrap: wrap;
margin-left: vw(20); // margin-left: vw(20);
.item { .item {
width:33.33%;
margin-top: vh(40); margin-top: vh(40);
margin-right: vh(20); // margin-right: vh(20);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;

2
src/views/traffic/index.vue
View File

@@ -2,7 +2,7 @@
<main class="wrapper"> <main class="wrapper">
<CoreVideo /> <CoreVideo />
<box1/> <box1/>
<box2/> <!-- <box2/> -->
<Header title="交通大屏" is-skip :nav-left="navLeft" :nav-right="navRight" /> <Header title="交通大屏" is-skip :nav-left="navLeft" :nav-right="navRight" />
<Correspondence /> <Correspondence />
</main> </main>

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

@@ -29,6 +29,8 @@
z-index:99; z-index:99;
padding:0 vw(20); padding:0 vw(20);
.list{ .list{
scrollbar-width: none;
scrollbar-color: transparent transparent;
height:vh(895); height:vh(895);
overflow: auto; overflow: auto;
.li:nth-child(odd){ .li:nth-child(odd){
@@ -71,7 +73,7 @@
text-align: left; text-align: left;
font-style: normal; font-style: normal;
text-transform: none; text-transform: none;
margin-left:vw(50); margin-left:vw(30);
} }
p{ p{
font-weight: 400; font-weight: 400;

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

@@ -8,19 +8,19 @@
<div class="hd-list"> <div class="hd-list">
<img class="h-icon" src="@/assets/images/work-icon-1.png" alt="" /> <img class="h-icon" src="@/assets/images/work-icon-1.png" alt="" />
<div class="item item1"> <div class="item item1">
今日工单总条数 <span class="color1">456789</span> 今日工单总条数 <span class="color1"><countup endVal="45678" /></span>
</div> </div>
<div class="item item1"> <div class="item item1">
工单完成数 <span class="color1">456789</span> 工单完成数 <span class="color1"><countup endVal="45678" /></span>
</div> </div>
<div class="item item3"> <div class="item item3">
紧急工单数 <span class="">456789</span> 紧急工单数 <span class=""><countup endVal="45678" /></span>
</div> </div>
<div class="item item2"> <div class="item item2">
重要工单数 <span class="">456789</span> 重要工单数 <span class=""><countup endVal="45678" /></span>
</div> </div>
<div class="item item1"> <div class="item item1">
普通工单数 <span class="">456789</span> 普通工单数 <span class=""><countup endVal="45678" /></span>
</div> </div>
</div> </div>
<div class="chart-box flex"> <div class="chart-box flex">
@@ -40,7 +40,7 @@
<div class="box-1"> <div class="box-1">
<el-progress :percentage="50" <el-progress :percentage="50"
stroke-linecap="square" stroke-linecap="square"
stroke-width="15" color="#2380FB"></el-progress> :stroke-width="fitChartSize(15)" color="#2380FB"></el-progress>
</div> </div>
</div> </div>
<div class="p-item"> <div class="p-item">
@@ -48,7 +48,7 @@
<div class="box-1"> <div class="box-1">
<el-progress :percentage="50" <el-progress :percentage="50"
stroke-linecap="square" stroke-linecap="square"
stroke-width="15" color="#D9011B"></el-progress> :stroke-width="fitChartSize(15)" color="#D9011B"></el-progress>
</div> </div>
</div> </div>
<div class="p-item"> <div class="p-item">
@@ -56,7 +56,7 @@
<div class="box-1"> <div class="box-1">
<el-progress :percentage="50" <el-progress :percentage="50"
stroke-linecap="square" stroke-linecap="square"
stroke-width="15" color="#FEAE00"></el-progress> :stroke-width="fitChartSize(15)" color="#FEAE00"></el-progress>
</div> </div>
</div> </div>
</div> </div>
@@ -100,8 +100,8 @@
</template> </template>
<script setup> <script setup>
import * as echarts from 'echarts'
import countup from 'vue-countup-v3' import countup from 'vue-countup-v3'
import * as echarts from 'echarts'
import { fitChartSize } from '@/utils/dataUtil' import { fitChartSize } from '@/utils/dataUtil'
import Map from '@/components/Map/marker.vue' import Map from '@/components/Map/marker.vue'
import VChart, { THEME_KEY } from 'vue-echarts'; import VChart, { THEME_KEY } from 'vue-echarts';
@@ -395,7 +395,7 @@
}) })
const optionLine = ref({ const optionLine = ref({
backgroundColor:'transparent', backgroundColor:'transparent',
height:250, height:240,
grid:{ grid:{
top:'30', top:'30',
bottom:'0', bottom:'0',
@@ -496,6 +496,9 @@
font-size:vw(14) !important; font-size:vw(14) !important;
color:#fff; color:#fff;
} }
.line-chart{
// margin-top:vh(20);
}
.work-box-2{ .work-box-2{
width:vw(1522); width:vw(1522);
height:vh(965); height:vh(965);
@@ -515,7 +518,7 @@
.lt-chart{ .lt-chart{
width:vw(740); width:vw(740);
height: vw(336); min-height: vw(336);
padding:vw(20); padding:vw(20);
background: radial-gradient( 70% at 99% 50%, #0A4190 0%, rgba(0,77,136,0.6) 100%); background: radial-gradient( 70% at 99% 50%, #0A4190 0%, rgba(0,77,136,0.6) 100%);
border-radius: 0px 0px 0px 0px; border-radius: 0px 0px 0px 0px;
@@ -528,6 +531,7 @@
display: flex; display: flex;
width:100%; width:100%;
margin-top:vh(40); margin-top:vh(40);
align-items: center;
span{ span{
font-weight: bold; font-weight: bold;
font-size: vw(14); font-size: vw(14);
@@ -654,6 +658,7 @@
height:vh(74); height:vh(74);
} }
.item{ .item{
display:flex;
width:vw(210); width:vw(210);
height:vh(58); height:vh(58);
line-height: vh(58); line-height: vh(58);
@@ -670,7 +675,7 @@
font-size: vw(24); font-size: vw(24);
position: relative; position: relative;
top:vh(2); top:vh(2);
margin-left:vw(2); margin-left:vw(5);
} }
.color1{ .color1{
color:#02F9FA; color:#02F9FA;

401
src/views/workOrder/components/box-3.vue Normal file
View 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>

3
src/views/workOrder/index.vue
View File

@@ -3,6 +3,7 @@
<CoreVideo /> <CoreVideo />
<box1/> <box1/>
<box2/> <box2/>
<box3/>
<Header title="工单消息" is-skip /> <Header title="工单消息" is-skip />
<Correspondence /> <Correspondence />
</main> </main>
@@ -11,7 +12,7 @@
<script setup> <script setup>
import box1 from './components/box-1.vue' import box1 from './components/box-1.vue'
import box2 from './components/box-2.vue' import box2 from './components/box-2.vue'
import box3 from './components/box-3.vue'
onMounted(() => {}) onMounted(() => {})
</script> </script>