feat:对接工单模块接口
This commit is contained in:
zjc
@@ -16,3 +16,12 @@ export function getVideoListApi(data) {
|
||||
params: data
|
||||
})
|
||||
}
|
||||
|
||||
// 刷新播放地址
|
||||
export function postRefreshApi(data) {
|
||||
return request({
|
||||
url: '/api/video/refresh',
|
||||
method: 'POST',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
@@ -96,6 +96,8 @@ const instance = axios.create({
|
||||
baseURL: 'http://36.138.38.16:8001/fjtcc-api',
|
||||
timeout: 100000,
|
||||
headers: {
|
||||
Authorization:
|
||||
'eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6ImE1OWFmNWYwLTU3OWItNDJkNy1hZDJhLTY0Y2JlODA5ZWI1NiJ9.BTxvu6jUWbN0qONWf5K6VzXopE8T8qXzKuX-mij21VJT4U0LdgnqToyqeNDQ2OyJ6cvpdJBzQ9mEEb-dnwrTpQ',
|
||||
'Content-Type': 'application/json;charset=UTF-8'
|
||||
}
|
||||
})
|
||||
@@ -106,7 +108,7 @@ const instance = axios.create({
|
||||
instance.interceptors.request.use(
|
||||
(config) => {
|
||||
if (config.data && config.headers['Content-Type'] === 'application/json";charset=UTF-8')
|
||||
config.data = qs.stringify(config.data)
|
||||
config.data = config.data
|
||||
return config
|
||||
},
|
||||
(error) => {
|
||||
|
||||
49
src/api/workOrder.js
Normal file
49
src/api/workOrder.js
Normal file
@@ -0,0 +1,49 @@
|
||||
import request from './request'
|
||||
|
||||
// 最新工单
|
||||
export function getListApi() {
|
||||
return request({
|
||||
url: '/api/largeScreen/workorder/list',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 统计
|
||||
export function getTotalApi() {
|
||||
return request({
|
||||
url: '/api/largeScreen/workorder/total',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 工单总数(折线图)
|
||||
export function getLineChartApi() {
|
||||
return request({
|
||||
url: '/api/largeScreen/workorder/lineChart',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 工单完成比例
|
||||
export function getCompleteRateApi() {
|
||||
return request({
|
||||
url: '/api/largeScreen/workorder/completeRate',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 工单景区占比
|
||||
export function getSpotRateApi() {
|
||||
return request({
|
||||
url: '/api/largeScreen/workorder/spotRate',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 工单类型占比
|
||||
export function getTypeRateApi() {
|
||||
return request({
|
||||
url: '/api/largeScreen/workorder/typeRate',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
BIN
src/assets/fonts/MicrosoftYaHei.ttf
Normal file
BIN
src/assets/fonts/MicrosoftYaHei.ttf
Normal file
Binary file not shown.
BIN
src/assets/fonts/MicrosoftYaHeiBold.ttf
Normal file
BIN
src/assets/fonts/MicrosoftYaHeiBold.ttf
Normal file
Binary file not shown.
13
src/assets/fonts/index.css
Normal file
13
src/assets/fonts/index.css
Normal file
@@ -0,0 +1,13 @@
|
||||
@font-face {
|
||||
font-family: "MicrosoftYaHei";
|
||||
src: url("./MicrosoftYaHei.ttf");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "MicrosoftYaHeiBold";
|
||||
src: url("./MicrosoftYaHeiBold.ttf");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
BIN
src/assets/fonts/微软正黑体.ttf
Normal file
BIN
src/assets/fonts/微软正黑体.ttf
Normal file
Binary file not shown.
BIN
src/assets/fonts/微软雅黑粗体.ttf
Normal file
BIN
src/assets/fonts/微软雅黑粗体.ttf
Normal file
Binary file not shown.
@@ -33,15 +33,15 @@
|
||||
<script setup>
|
||||
import primary from '@/assets/images/item-primary.png'
|
||||
import error from '@/assets/images/item-error.png'
|
||||
import { getVideoListApi } from '@/api/home'
|
||||
import { getVideoListApi, postRefreshApi } from '@/api/home'
|
||||
import Hls from 'hls.js'
|
||||
|
||||
let list = ref(2)
|
||||
let list = ref([])
|
||||
|
||||
const getRefs = (el) => {
|
||||
if (el) {
|
||||
const hls = new Hls()
|
||||
hls.loadSource('https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8')
|
||||
hls.loadSource('http://36.138.38.16:6106/live/042f4987808b444aa96c1e8bc6e3ad2a/hls.m3u8')
|
||||
hls.attachMedia(el)
|
||||
hls.on(Hls.Events.MANIFEST_PARSED, () => {
|
||||
el.play()
|
||||
@@ -52,6 +52,7 @@
|
||||
let res = await getVideoListApi({
|
||||
businessVideoDisplayPosition: ''
|
||||
})
|
||||
list.value = res.data
|
||||
}
|
||||
onMounted(() => {
|
||||
getVideoList()
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
>
|
||||
{{ item.name }}
|
||||
</li>
|
||||
<el-dropdown v-if="navLeft.length > 3" trigger="click" @command="handleCommand">
|
||||
<!-- <el-dropdown v-if="navLeft.length > 3" trigger="click" @command="handleCommand">
|
||||
<li
|
||||
class="nav-left-item"
|
||||
:style="{
|
||||
@@ -29,7 +29,7 @@
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</el-dropdown> -->
|
||||
</ul>
|
||||
<div class="title">
|
||||
<span>{{ title }}</span>
|
||||
@@ -280,6 +280,7 @@
|
||||
& > span {
|
||||
font-size: vw(48);
|
||||
font-weight: 800;
|
||||
font-family: 'MicrosoftYaHeiBold';
|
||||
color: transparent;
|
||||
letter-spacing: vw(10);
|
||||
-webkit-background-clip: text;
|
||||
|
||||
@@ -18,7 +18,8 @@ export function useWebSocket(url) {
|
||||
sendMessage(
|
||||
JSON.stringify({
|
||||
action: 'start',
|
||||
type: 'index'
|
||||
type: 'index',
|
||||
scenitspot: 'index'
|
||||
})
|
||||
)
|
||||
}
|
||||
|
||||
@@ -4,6 +4,7 @@ import App from './App.vue'
|
||||
import router from './router'
|
||||
import '@/styles/reset.css'
|
||||
import '@/styles/common.scss'
|
||||
import '@/assets/fonts/index.css'
|
||||
|
||||
const app = createApp(App)
|
||||
|
||||
|
||||
@@ -34,6 +34,9 @@
|
||||
.mr-8 {
|
||||
margin-right: vw(8) !important;
|
||||
}
|
||||
.mt-8 {
|
||||
margin-top: vw(8) !important;
|
||||
}
|
||||
.pt-10 {
|
||||
padding-top: vh(10) !important;
|
||||
}
|
||||
|
||||
@@ -209,9 +209,9 @@
|
||||
)
|
||||
})
|
||||
const channelTotal = computed(() => {
|
||||
return homeData.value?.userPortrait.channel.reduce(
|
||||
(total, current) => Number(current.count) + total,
|
||||
0
|
||||
return (
|
||||
homeData.value?.userPortrait?.channel ||
|
||||
[].reduce((total, current) => Number(current.count) + total, 0)
|
||||
)
|
||||
})
|
||||
</script>
|
||||
|
||||
@@ -41,30 +41,32 @@
|
||||
}
|
||||
},
|
||||
color: ['#F15A25', '#01FEFE', '#12B5FD'],
|
||||
series: homeData.value?.userPortrait?.channel.map((item, index) => {
|
||||
return {
|
||||
name: item.name,
|
||||
type: 'pie',
|
||||
clockwise: false, //顺时加载
|
||||
radius: [`${x * (index + 1)}%`, `${y + index * 15}%`],
|
||||
center: ['50%', '40%'],
|
||||
label: { show: false },
|
||||
labelLine: { show: false },
|
||||
emphasis: { show: false },
|
||||
data: [
|
||||
{
|
||||
value: parseFloat(item.value),
|
||||
name: item.name
|
||||
},
|
||||
{
|
||||
value: 100,
|
||||
itemStyle: {
|
||||
color: '#07439C'
|
||||
series:
|
||||
homeData.value?.userPortrait?.channel ||
|
||||
[].map((item, index) => {
|
||||
return {
|
||||
name: item.name,
|
||||
type: 'pie',
|
||||
clockwise: false, //顺时加载
|
||||
radius: [`${x * (index + 1)}%`, `${y + index * 15}%`],
|
||||
center: ['50%', '40%'],
|
||||
label: { show: false },
|
||||
labelLine: { show: false },
|
||||
emphasis: { show: false },
|
||||
data: [
|
||||
{
|
||||
value: parseFloat(item.value),
|
||||
name: item.name
|
||||
},
|
||||
{
|
||||
value: 100,
|
||||
itemStyle: {
|
||||
color: '#07439C'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
})
|
||||
]
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
)
|
||||
|
||||
@@ -1,132 +1,142 @@
|
||||
<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>
|
||||
<div class="work-box-1">
|
||||
<!-- 最新工单 -->
|
||||
<div class="header">
|
||||
<div class="title"> <span>最新工单</span> </div>
|
||||
</div>
|
||||
<!-- 列表 -->
|
||||
<div class="list">
|
||||
<div class="li" v-for="(item, index) in list" :key="index">
|
||||
<span :class="item.level">{{ item.level_text }}</span>
|
||||
<p>{{ item.title }}</p>
|
||||
<span class="time">{{ item.time }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup>
|
||||
import { getListApi } from '@/api/workOrder'
|
||||
let list = ref([])
|
||||
const getList = async () => {
|
||||
let res = await getListApi()
|
||||
list.value = res.data
|
||||
}
|
||||
onMounted(() => {
|
||||
getList()
|
||||
})
|
||||
</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{
|
||||
/* 滚动条整体样式 */
|
||||
&::-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(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(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-box-1 {
|
||||
width: vw(815);
|
||||
height: vh(950);
|
||||
margin-top: vh(120);
|
||||
background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%);
|
||||
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(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: vw(2);
|
||||
font-size: vw(14);
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
margin-right: vw(10);
|
||||
}
|
||||
.normal {
|
||||
@extend .label;
|
||||
background: #2380fb;
|
||||
}
|
||||
.warn {
|
||||
@extend .label;
|
||||
background: #feae00;
|
||||
}
|
||||
.important {
|
||||
@extend .label;
|
||||
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%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,110 +1,119 @@
|
||||
<template>
|
||||
<div class="work-box-2">
|
||||
<!-- 1 -->
|
||||
<div class="work-2-flex">
|
||||
<div class="header">
|
||||
<div class="title"> <span>今日工单</span> </div>
|
||||
</div>
|
||||
<div class="box-1">
|
||||
<Title1 title="今日工单" />
|
||||
<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" />
|
||||
<div class="item item1">
|
||||
今日工单总条数 <span class="color1"><countup endVal="45678" /></span>
|
||||
今日工单总条数 <span class="color1"><countup :end-val="totalData.total" /></span>
|
||||
</div>
|
||||
<div class="item item1">
|
||||
工单完成数 <span class="color1"><countup endVal="45678" /></span>
|
||||
工单完成数 <span class="color1"><countup :end-val="totalData.complete" /></span>
|
||||
</div>
|
||||
<div class="item item3">
|
||||
紧急工单数 <span class=""><countup endVal="45678" /></span>
|
||||
紧急工单数 <span class=""><countup :end-val="totalData.warn" /></span>
|
||||
</div>
|
||||
<div class="item item2">
|
||||
重要工单数 <span class=""><countup endVal="45678" /></span>
|
||||
重要工单数 <span class=""><countup :end-val="totalData.important" /></span>
|
||||
</div>
|
||||
<div class="item item1">
|
||||
普通工单数 <span class=""><countup endVal="45678" /></span>
|
||||
普通工单数 <span class=""><countup :end-val="totalData.normal" /></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart-box flex">
|
||||
<div class="lt-chart">
|
||||
<div class="title-3"><span>异常告警占比</span></div>
|
||||
<div class="box chart-p">
|
||||
<div class="check-label">
|
||||
<span class="active">全部</span>
|
||||
<span>已完成总数</span>
|
||||
</div>
|
||||
<v-chart class="line-chart" :option="optionLine" autoresize />
|
||||
</div>
|
||||
<div class="chart">
|
||||
<div class="chart__wrapper">
|
||||
<Title3 title="工单总数" />
|
||||
<!-- <div class="check-label">
|
||||
<span class="active">全部</span>
|
||||
<span>已完成总数</span>
|
||||
</div> -->
|
||||
<Line :width="680" :height="320" :data="seriesData" :xAxisData="xAxisData" />
|
||||
</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">
|
||||
<div class="chart__wrapper">
|
||||
<Title3 title="工单类型完成比例" />
|
||||
<div class="progress">
|
||||
<div class="progress-item">
|
||||
<span class="progress-item__label">普通</span>
|
||||
<div class="progress-item__inner">
|
||||
<el-progress
|
||||
:percentage="50"
|
||||
:percentage="completeRateData.normal * 100"
|
||||
:stroke-width="fitChartSize(24)"
|
||||
stroke-linecap="square"
|
||||
:stroke-width="fitChartSize(15)"
|
||||
color="#2380FB"
|
||||
></el-progress>
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-item">
|
||||
<span>普通</span>
|
||||
<div class="box-1">
|
||||
<div class="progress-item">
|
||||
<span class="progress-item__label">紧急</span>
|
||||
<div class="progress-item__inner">
|
||||
<el-progress
|
||||
:percentage="50"
|
||||
:percentage="completeRateData.warn * 100"
|
||||
:stroke-width="fitChartSize(24)"
|
||||
stroke-linecap="square"
|
||||
:stroke-width="fitChartSize(15)"
|
||||
color="#D9011B"
|
||||
></el-progress>
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-item">
|
||||
<span>普通</span>
|
||||
<div class="box-1">
|
||||
<div class="progress-item">
|
||||
<span class="progress-item__label">紧急</span>
|
||||
<div class="progress-item__inner">
|
||||
<el-progress
|
||||
:percentage="50"
|
||||
:percentage="completeRateData.important * 100"
|
||||
:stroke-width="fitChartSize(24)"
|
||||
stroke-linecap="square"
|
||||
:stroke-width="fitChartSize(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 class="box-2 mt-8">
|
||||
<Title1 title="不同景区工单占比" />
|
||||
<div class="chart">
|
||||
<div class="chart__wrapper">
|
||||
<Title3 title="景区工单占比" />
|
||||
<div class="chart__inner">
|
||||
<spotRate :dataList="spotRateData" :total="8888" />
|
||||
<ul class="chart__legend">
|
||||
<li class="chart__legend-item" v-for="(item, index) in spotRateData" :key="index">
|
||||
<p class="dot" :style="{ background: colors[index] }" />
|
||||
<p class="name">{{ item.name }}</p>
|
||||
<p class="value">{{ item.value }}%</p>
|
||||
</li>
|
||||
</ul>
|
||||
</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 class="chart__wrapper">
|
||||
<Title3 title="景区工单占比" />
|
||||
<div class="chart__inner">
|
||||
<spotRate :dataList="spotRateData" :total="8888" />
|
||||
<ul class="chart__legend">
|
||||
<li class="chart__legend-item" v-for="(item, index) in spotRateData" :key="index">
|
||||
<p class="dot" :style="{ background: colors[index] }" />
|
||||
<p class="name">{{ item.name }}</p>
|
||||
<p class="value">{{ item.value }}%</p>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="alarm">
|
||||
<Title2 title="异常点位告警排名" />
|
||||
<ul class="alarm__wrapper">
|
||||
<li class="alarm-item" v-for="(item, index) in 8" :key="index">
|
||||
<p
|
||||
class="alarm-item__rank"
|
||||
:class="{
|
||||
'alarm-item__rank--error': index == 0,
|
||||
'alarm-item__rank--warning': index == 1,
|
||||
'alarm-item__rank--primary': index == 2
|
||||
}"
|
||||
>
|
||||
{{ item }}
|
||||
</p>
|
||||
<p class="alarm-item__content">异常点位告警1号名称</p>
|
||||
</li>
|
||||
</ul>
|
||||
</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>
|
||||
@@ -114,404 +123,57 @@
|
||||
|
||||
<script setup>
|
||||
import countup from 'vue-countup-v3'
|
||||
import * as echarts from 'echarts'
|
||||
import spotRate from './spotRate.vue'
|
||||
import { fitChartSize } from '@/utils/dataUtil'
|
||||
import Map from '@/components/Map/marker.vue'
|
||||
import VChart, { THEME_KEY } from 'vue-echarts'
|
||||
import { ref, provide } from 'vue'
|
||||
import {
|
||||
getTotalApi,
|
||||
getLineChartApi,
|
||||
getCompleteRateApi,
|
||||
getSpotRateApi,
|
||||
getTypeRateApi
|
||||
} from '@/api/workOrder.js'
|
||||
|
||||
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 colors = ['#FDC40A', '#FF5232', '#50F0A6', '#5FDFFA']
|
||||
let totalData = ref({
|
||||
total: 0,
|
||||
complete: 0,
|
||||
urgent: 0,
|
||||
important: 0,
|
||||
normal: 0
|
||||
})
|
||||
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: {
|
||||
let completeRateData = ref({ important: 0, normal: 0, warn: 0 })
|
||||
let seriesData = ref([])
|
||||
let xAxisData = ref([])
|
||||
let typeRateData = ref([])
|
||||
let spotRateData = ref([])
|
||||
|
||||
// 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: '90%',
|
||||
grid: {
|
||||
top: '20',
|
||||
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 }
|
||||
},
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(125, 231, 255, 0.1)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(0, 157, 255, 0.1)'
|
||||
}
|
||||
])
|
||||
},
|
||||
|
||||
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
|
||||
}
|
||||
}
|
||||
]
|
||||
const getTypeRate = async () => {
|
||||
let res = await getTypeRateApi()
|
||||
typeRateData.value = res.data.data
|
||||
}
|
||||
const getSpotRate = async () => {
|
||||
let res = await getSpotRateApi()
|
||||
spotRateData.value = res.data.data
|
||||
}
|
||||
const getCompleteRate = async () => {
|
||||
let res = await getCompleteRateApi()
|
||||
completeRateData.value = res.data
|
||||
}
|
||||
const getLineChart = async () => {
|
||||
let res = await getLineChartApi()
|
||||
seriesData.value = res.data.series
|
||||
xAxisData.value = res.data.data
|
||||
}
|
||||
const getTotal = async () => {
|
||||
let res = await getTotalApi()
|
||||
totalData.value = res.data
|
||||
}
|
||||
onMounted(() => {
|
||||
getTotal()
|
||||
getLineChart()
|
||||
getCompleteRate()
|
||||
getTypeRate()
|
||||
getSpotRate()
|
||||
})
|
||||
</script>
|
||||
|
||||
@@ -527,9 +189,7 @@
|
||||
font-size: vw(14) !important;
|
||||
color: #fff;
|
||||
}
|
||||
.line-chart {
|
||||
// margin-top:vh(20);
|
||||
}
|
||||
|
||||
.chart-p {
|
||||
position: relative;
|
||||
.check-label {
|
||||
@@ -541,7 +201,6 @@
|
||||
padding: vw(5);
|
||||
background: linear-gradient(270deg, rgba(8, 41, 86, 0.16) 0%, #0b61b4 100%);
|
||||
border-radius: vw(50);
|
||||
// border: 1px solid rgba(0,114,220,0.3);
|
||||
margin-left: vw(5);
|
||||
display: inline-block;
|
||||
font-weight: 400;
|
||||
@@ -561,144 +220,44 @@
|
||||
}
|
||||
.work-box-2 {
|
||||
width: vw(1522);
|
||||
height: vh(965);
|
||||
margin-top: vh(100);
|
||||
margin-top: vh(120);
|
||||
margin-left: vw(10);
|
||||
position: relative;
|
||||
z-index: 99;
|
||||
.work-2-flex {
|
||||
.box-1 {
|
||||
height: vh(500);
|
||||
background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%);
|
||||
height: vh(490);
|
||||
overflow: hidden;
|
||||
|
||||
.chart-box {
|
||||
.chart {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: vw(20) vw(15);
|
||||
|
||||
.lt-chart {
|
||||
&__wrapper {
|
||||
width: vw(740);
|
||||
min-height: vw(336);
|
||||
padding: vw(20);
|
||||
height: vh(370);
|
||||
padding: 0 vw(20);
|
||||
background-image: url('@/assets/images/bg-3.png');
|
||||
background-size: 100% 100%;
|
||||
.box-press {
|
||||
.progress {
|
||||
padding: vw(30);
|
||||
padding-top: vh(40);
|
||||
.p-item {
|
||||
&-item {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
margin-top: vh(40);
|
||||
align-items: center;
|
||||
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(250);
|
||||
display: flex;
|
||||
margin-top: vh(30);
|
||||
.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);
|
||||
&-item__label {
|
||||
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; /* 兼容其他浏览器 */
|
||||
font-size: vw(14);
|
||||
color: #ffffff;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
margin-right: vw(10);
|
||||
}
|
||||
&-item__inner {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -752,30 +311,131 @@
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
.header {
|
||||
position: relative;
|
||||
margin: vh(20);
|
||||
}
|
||||
.box-2 {
|
||||
height: vh(434);
|
||||
background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%);
|
||||
|
||||
.title {
|
||||
margin: vh(5) auto;
|
||||
width: vw(468);
|
||||
height: vh(32);
|
||||
font-weight: 800;
|
||||
font-size: vw(16);
|
||||
color: #fff;
|
||||
.chart {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: vw(20) vw(15);
|
||||
|
||||
&__wrapper {
|
||||
width: vw(740);
|
||||
height: vh(370);
|
||||
padding: 0 vw(20);
|
||||
background-image: url('@/assets/images/bg-3.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
&__inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&__legend {
|
||||
flex: 1;
|
||||
|
||||
&-item {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: vh(40);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: vh(8);
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(0, 150, 255, 0.34) 0%,
|
||||
rgba(0, 150, 255, 0) 100%
|
||||
);
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
width: vw(4);
|
||||
height: vh(40);
|
||||
background-color: #0096ff;
|
||||
}
|
||||
|
||||
.dot {
|
||||
width: vw(4);
|
||||
height: vw(4);
|
||||
margin: 0 vw(16);
|
||||
}
|
||||
|
||||
.name {
|
||||
font-weight: 400;
|
||||
font-size: vw(12);
|
||||
color: #ffffff;
|
||||
width: vw(130);
|
||||
}
|
||||
|
||||
.value {
|
||||
font-weight: bold;
|
||||
font-size: vw(15);
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.alarm {
|
||||
background: #0a4190;
|
||||
|
||||
&__wrapper {
|
||||
flex: 1;
|
||||
height: vh(270);
|
||||
background: #054581; /* 滚动条整体样式 */
|
||||
&::-webkit-scrollbar {
|
||||
width: vw(4); /* 滚动条的宽度 */
|
||||
}
|
||||
/* 滚动条轨道 */
|
||||
&::-webkit-scrollbar-track {
|
||||
background: 'transparent'; /* 轨道的背景色 */
|
||||
}
|
||||
/* 滚动条滑块 */
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: rgba(0, 150, 255, 0.63); /* 滑块的背景色 */
|
||||
border-radius: 5px; /* 滑块的圆角 */
|
||||
}
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
&-item {
|
||||
padding: 0 vw(12);
|
||||
&:nth-child(2n) {
|
||||
background: #054d8d;
|
||||
}
|
||||
height: vh(40);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&-item__rank {
|
||||
width: vw(24);
|
||||
height: vh(16);
|
||||
font-size: vw(12);
|
||||
color: #ffffff;
|
||||
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%);
|
||||
}
|
||||
background: #495c77;
|
||||
}
|
||||
&-item__rank--error {
|
||||
background-color: #d9011b;
|
||||
}
|
||||
&-item__rank--warning {
|
||||
background-color: #feae00;
|
||||
}
|
||||
&-item__rank--primary {
|
||||
background-color: #2380fb;
|
||||
}
|
||||
&-item__content {
|
||||
padding-left: vw(20);
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -194,18 +194,16 @@
|
||||
.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-top: vh(120);
|
||||
margin-left: vw(10);
|
||||
position: relative;
|
||||
z-index: 99;
|
||||
background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%);
|
||||
|
||||
.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);
|
||||
@@ -285,7 +283,7 @@
|
||||
}
|
||||
.header {
|
||||
position: relative;
|
||||
margin: vh(20);
|
||||
margin: 0 vh(20);
|
||||
.title {
|
||||
margin: vh(5) auto;
|
||||
width: vw(468);
|
||||
|
||||
94
src/views/workOrder/components/spotRate.vue
Normal file
94
src/views/workOrder/components/spotRate.vue
Normal file
@@ -0,0 +1,94 @@
|
||||
<template>
|
||||
<div class="spotRate" :id="id" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { fitChartSize } from '@/utils/dataUtil'
|
||||
import { useEchart } from '@/hooks/echart'
|
||||
|
||||
const props = defineProps({
|
||||
config: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
dataList: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
total: {
|
||||
type: Number,
|
||||
default: () => 0
|
||||
},
|
||||
colors: {
|
||||
type: Array,
|
||||
default: () => ['#FDC40A', '#FF5232', '#50F0A6', '#5FDFFA']
|
||||
}
|
||||
})
|
||||
|
||||
const { id, setOption } = useEchart()
|
||||
|
||||
var defaultCofig = {
|
||||
color: [],
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
center: ['50%', '50%'],
|
||||
radius: ['70%', '90%'],
|
||||
itemStyle: {
|
||||
borderWidth: fitChartSize(4),
|
||||
borderColor: '#093672'
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: 'center',
|
||||
fontWeight: 'bold',
|
||||
rich: {
|
||||
value: {
|
||||
color: '#fff',
|
||||
fontSize: fitChartSize(24),
|
||||
fontWeight: 'bold',
|
||||
padding: [0, 0, 5, 0]
|
||||
},
|
||||
name: {
|
||||
color: '#7894A8',
|
||||
fontSize: fitChartSize(12)
|
||||
}
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: []
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.dataList,
|
||||
(newVal) => {
|
||||
if (newVal.length > 0) {
|
||||
nextTick(() => {
|
||||
defaultCofig.color = props.colors
|
||||
defaultCofig.series[0].data = props.dataList
|
||||
defaultCofig.series[0].label.formatter = () => {
|
||||
return `{value|${props.total}}` + '\n' + `{name|工单总数}`
|
||||
}
|
||||
setOption({
|
||||
...defaultCofig,
|
||||
...props.config
|
||||
})
|
||||
})
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.spotRate {
|
||||
width: vw(240);
|
||||
height: vh(320);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user