feat 工单消息
This commit is contained in:
duanliang
BIN
src/assets/images/map-bg-2.png
Normal file
BIN
src/assets/images/map-bg-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.0 MiB |
BIN
src/assets/images/small-v-bg.png
Normal file
BIN
src/assets/images/small-v-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.2 KiB |
BIN
src/assets/images/work-icon-1.png
Normal file
BIN
src/assets/images/work-icon-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.8 KiB |
BIN
src/assets/images/work-icon-m-1.png
Normal file
BIN
src/assets/images/work-icon-m-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 532 B |
BIN
src/assets/images/work-n-bg-1.png
Normal file
BIN
src/assets/images/work-n-bg-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
src/assets/images/work-n-bg-2.png
Normal file
BIN
src/assets/images/work-n-bg-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
src/assets/images/work-n-bg-3.png
Normal file
BIN
src/assets/images/work-n-bg-3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
@@ -36,6 +36,11 @@ const router = createRouter({
|
||||
path: '/sentiment',
|
||||
name: 'sentiment',
|
||||
component: () => import('@/views/sentiment/index.vue')
|
||||
},
|
||||
{
|
||||
path: '/workOrder',
|
||||
name: 'workOrder',
|
||||
component: () => import('@/views/workOrder/index.vue')
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
@@ -54,61 +54,6 @@ const navLeft = [{
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
background-color: #0a254b;
|
||||
.header {
|
||||
position: absolute;
|
||||
left: vw(326);
|
||||
.title {
|
||||
width: vw(3133);
|
||||
height: vh(120);
|
||||
font-size: vw(48);
|
||||
font-weight: 800;
|
||||
text-align: center;
|
||||
padding-top: vh(20);
|
||||
color: #fff;
|
||||
letter-spacing: vw(10);
|
||||
box-sizing: border-box;
|
||||
text-shadow: 0px 4px 7px rgba(0, 150, 255, 0.75);
|
||||
background-image: url('@/assets/images/title.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.nav-left {
|
||||
position: absolute;
|
||||
left: vw(380);
|
||||
top: vh(34);
|
||||
display: flex;
|
||||
&-item {
|
||||
cursor: pointer;
|
||||
margin-left: vh(-10);
|
||||
width: vw(210);
|
||||
height: vh(56);
|
||||
padding-top: vh(10);
|
||||
font-weight: 600;
|
||||
font-size: vw(28);
|
||||
text-align: center;
|
||||
color: rgba(208, 236, 255, 0.9);
|
||||
background-image: url('@/assets/images/title-2.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
.nav-right {
|
||||
position: absolute;
|
||||
right: vw(424);
|
||||
top: vh(34);
|
||||
display: flex;
|
||||
&-item {
|
||||
cursor: pointer;
|
||||
margin-right: vh(-10);
|
||||
width: vw(210);
|
||||
height: vh(56);
|
||||
padding-top: vh(10);
|
||||
font-weight: 600;
|
||||
font-size: vw(28);
|
||||
text-align: center;
|
||||
color: rgba(208, 236, 255, 0.9);
|
||||
background-image: url('@/assets/images/title-3.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -55,9 +55,9 @@
|
||||
legend: {
|
||||
type: 'scroll',
|
||||
orient: 'vertical',
|
||||
right: 10,
|
||||
top: 70,
|
||||
bottom: 20,
|
||||
right: fitChartSize(10),
|
||||
top: fitChartSize(70),
|
||||
bottom: fitChartSize(20),
|
||||
itemWidth:5,
|
||||
itemHeight:5,
|
||||
padding: [20,10,20,10],
|
||||
@@ -79,7 +79,7 @@
|
||||
backgroundColor: '1',
|
||||
},
|
||||
a: {
|
||||
width: 75,
|
||||
width: fitChartSize(75),
|
||||
align: 'left',
|
||||
fontSize:fitChartSize(16),
|
||||
// backgroundColor:'1'
|
||||
@@ -114,8 +114,8 @@
|
||||
{
|
||||
name: 'Access From',
|
||||
type: 'pie',
|
||||
left:-50,
|
||||
top:40,
|
||||
left:fitChartSize(-50),
|
||||
top:fitChartSize(40),
|
||||
width:fitChartSize(350),
|
||||
height:fitChartSize(350),
|
||||
// width:200,
|
||||
@@ -129,14 +129,48 @@
|
||||
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'
|
||||
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: {
|
||||
@@ -149,7 +183,7 @@
|
||||
{ value: 135, name: '异常状况4' },
|
||||
{ value: 100, name: '异常状况5' },
|
||||
{ value: 777, name: '异常状况6' },
|
||||
{ value: 777, name: '其他' },
|
||||
{ value: 888, name: '其他' },
|
||||
]
|
||||
|
||||
},
|
||||
|
||||
99
src/views/traffic/components/box-2.vue
Normal file
99
src/views/traffic/components/box-2.vue
Normal file
@@ -0,0 +1,99 @@
|
||||
<template>
|
||||
<div class="traffic-box-2">
|
||||
<div class="map-box">
|
||||
<Map></Map>
|
||||
<!-- 视频 -->
|
||||
<div class="video-list">
|
||||
<div class="li">
|
||||
<vue3VideoPlay v-bind="options"/>
|
||||
</div>
|
||||
<div class="li">
|
||||
<vue3VideoPlay v-bind="options"/>
|
||||
</div>
|
||||
<div class="menu">查看更多</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Map from '@/components/Map/marker.vue'
|
||||
const options = reactive({
|
||||
src: "http://192.168.1.60:8080/live/340200000013200000011_34020000001320000001/hls.m3u8", //视频源
|
||||
type: 'm3u8', //视频类型
|
||||
width:"100%",
|
||||
height:"100%",
|
||||
color: "#409eff", //主题色
|
||||
title: "", //视频名称
|
||||
muted: false, //静音
|
||||
webFullScreen: false,
|
||||
speedRate: ["0.75", "1.0", "1.25", "1.5", "2.0"], //播放倍速
|
||||
autoPlay: true, //自动播放
|
||||
loop: false, //循环播放
|
||||
mirror: false, //镜像画面
|
||||
ligthOff: false, //关灯模式
|
||||
volume: 0.3, //默认音量大小
|
||||
control: true, //是否显示控制
|
||||
controlBtns: [
|
||||
// "audioTrack",
|
||||
// "quality",
|
||||
// "speedRate",
|
||||
// "volume",
|
||||
"setting",
|
||||
"pip",
|
||||
"pageFullScreen",
|
||||
"fullScreen",
|
||||
], //显示所有按钮,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.traffic-box-2{
|
||||
width:vw(1517);
|
||||
height:vh(965);
|
||||
background-image: url('/src/assets/images/map-bg-2.png');
|
||||
background-size: 100% 100%;
|
||||
margin:0 vw(10);
|
||||
padding:vh(35) vw(30);
|
||||
margin-top:vh(110);
|
||||
position:relative;
|
||||
z-index:9;
|
||||
.map-box{
|
||||
width:100%;
|
||||
height:100%;
|
||||
position:relative;
|
||||
.video-list{
|
||||
width:vw(320);
|
||||
height:vh(120);
|
||||
background: #0A254B;
|
||||
border-radius: 0px 0px 0px 0px;
|
||||
position: absolute;
|
||||
bottom:vw(10);
|
||||
right:vw(10);
|
||||
z-index: 99;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.li{
|
||||
width:vw(140);
|
||||
height:vh(105);
|
||||
background-image: url('/src/assets/images/small-v-bg.png');
|
||||
background-size: 100% 100%;
|
||||
margin-right:vw(6);
|
||||
}
|
||||
.menu{
|
||||
width: vw(12);
|
||||
height: vh(60);
|
||||
font-family: Inter, Inter;
|
||||
font-weight: 400;
|
||||
font-size: vw(12);
|
||||
color: #FFFFFF;
|
||||
line-height: vh(14);
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
14
src/views/traffic/components/box-3.vue
Normal file
14
src/views/traffic/components/box-3.vue
Normal file
@@ -0,0 +1,14 @@
|
||||
<template>
|
||||
<div class="traffic-box-3">
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.traffic-box-3{
|
||||
|
||||
}
|
||||
</style>
|
||||
@@ -2,6 +2,7 @@
|
||||
<main class="wrapper">
|
||||
<CoreVideo />
|
||||
<box1/>
|
||||
<box2/>
|
||||
<Header title="交通大屏" is-skip :nav-left="navLeft" :nav-right="navRight" />
|
||||
<Correspondence />
|
||||
</main>
|
||||
@@ -9,6 +10,7 @@
|
||||
|
||||
<script setup>
|
||||
import box1 from './components/box-1.vue'
|
||||
import box2 from './components/box-2.vue'
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
119
src/views/workOrder/components/box-1.vue
Normal file
119
src/views/workOrder/components/box-1.vue
Normal 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
720
src/views/workOrder/components/box-2.vue
Normal 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>
|
||||
26
src/views/workOrder/index.vue
Normal file
26
src/views/workOrder/index.vue
Normal file
@@ -0,0 +1,26 @@
|
||||
<template>
|
||||
<main class="wrapper">
|
||||
<CoreVideo />
|
||||
<box1/>
|
||||
<box2/>
|
||||
<Header title="工单消息" is-skip />
|
||||
<Correspondence />
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import box1 from './components/box-1.vue'
|
||||
import box2 from './components/box-2.vue'
|
||||
|
||||
onMounted(() => {})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.wrapper {
|
||||
display: flex;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
background-color: #0a254b;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user