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
2025-01-08 18:05:12 +08:00
parent ab1ab210a9
commit 9ee304c8c2
39 changed files with 2081 additions and 1926 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,9 +1,7 @@
<template>
<div class="work-box-1">
<!-- 最新工单 -->
<div class="header">
<div class="title"> <span>最新工单</span> </div>
</div>
<Title1 title="最新工单" />
<!-- 列表 -->
<div class="list">
<div class="li" v-for="(item, index) in list" :key="index">
@@ -32,9 +30,9 @@
width: vw(815);
height: vh(950);
margin-top: vh(120);
box-sizing: border-box;
background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%);
position: relative;
z-index: 99;
padding: 0 vw(20);
.list {
/* 滚动条整体样式 */
@@ -113,30 +111,5 @@
}
}
}
.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>

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

@@ -1,7 +1,9 @@
<template>
<div class="work-box-2">
<div class="box-1">
<Title1 title="今日工单" />
<div>
<Title1 title="今日工单" />
</div>
<div class="hd-list">
<img class="h-icon" src="@/assets/images/work-icon-1.png" />
<div class="item item1">
@@ -21,7 +23,7 @@
</div>
</div>
<div class="chart">
<div class="chart__wrapper">
<div class="chart__wrapper mr-8">
<Title3 title="工单总数" />
<!-- <div class="check-label">
<span class="active">全部</span>
@@ -55,7 +57,7 @@
</div>
</div>
<div class="progress-item">
<span class="progress-item__label">紧急</span>
<span class="progress-item__label">重要</span>
<div class="progress-item__inner">
<el-progress
:percentage="completeRateData.important * 100"
@@ -86,11 +88,11 @@
</div>
</div>
<div class="chart__wrapper">
<Title3 title="景区工单占比" />
<Title3 title="景区工单类型占比" />
<div class="chart__inner">
<spotRate :dataList="spotRateData" :total="8888" />
<spotRate :dataList="typeRateData" :total="8888" />
<ul class="chart__legend">
<li class="chart__legend-item" v-for="(item, index) in spotRateData" :key="index">
<li class="chart__legend-item" v-for="(item, index) in typeRateData" :key="index">
<p class="dot" :style="{ background: colors[index] }" />
<p class="name">{{ item.name }}</p>
<p class="value">{{ item.value }}%</p>
@@ -99,7 +101,7 @@
<div class="alarm">
<Title2 title="异常点位告警排名" />
<ul class="alarm__wrapper">
<li class="alarm-item" v-for="(item, index) in 8" :key="index">
<li class="alarm-item" v-for="(item, index) in pointRankData" :key="index">
<p
class="alarm-item__rank"
:class="{
@@ -108,9 +110,9 @@
'alarm-item__rank--primary': index == 2
}"
>
{{ item }}
{{ index + 1 }}
</p>
<p class="alarm-item__content">异常点位告警1号名称</p>
<p class="alarm-item__content">{{ item.link_title }}</p>
</li>
</ul>
</div>
@@ -131,7 +133,8 @@
getCompleteRateApi,
getSpotRateApi,
getTypeRateApi
} from '@/api/workOrder.js'
} from '@/api/workOrder'
import { getNewsPointRankApi } from '@/api/news'
const colors = ['#FDC40A', '#FF5232', '#50F0A6', '#5FDFFA']
let totalData = ref({
@@ -146,7 +149,13 @@
let xAxisData = ref([])
let typeRateData = ref([])
let spotRateData = ref([])
let pointRankData = ref([])
const getNewsPointRank = async () => {
let res = await getNewsPointRankApi()
pointRankData.value = res.data
console.log(res, '1111')
}
const getTypeRate = async () => {
let res = await getTypeRateApi()
typeRateData.value = res.data.data
@@ -174,6 +183,7 @@
getCompleteRate()
getTypeRate()
getSpotRate()
getNewsPointRank()
})
</script>
@@ -219,14 +229,13 @@
}
}
.work-box-2 {
width: vw(1522);
margin-top: vh(120);
margin-left: vw(10);
position: relative;
z-index: 99;
margin-left: vw(8);
.box-1 {
height: vh(500);
background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%);
padding: vw(1) 0;
box-sizing: border-box;
background: linear-gradient(to bottom, #0b2f64 0%, #062b57 100%);
.chart {
display: flex;
justify-content: space-between;
@@ -313,7 +322,9 @@
}
}
.box-2 {
height: vh(434);
padding: vw(1);
height: vh(442);
box-sizing: border-box;
background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%);
.chart {

436
src/views/workOrder/components/box-3.vue
View File

@@ -1,48 +1,69 @@
<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>
<Title1 title="消息统计" />
<div class="statistics">
<div class="statistics-item">
<div class="flex align-center">
<img class="statistics-item__icon" src="@/assets/images/dot-primary.svg" alt="" />
<span class="statistics-item__label">今日消息总条数</span>
</div>
<div class="statistics-item__value--primary">
<countup end-val="45678" />
<span class="statistics-item__value-suffix">条</span>
</div>
</div>
<div class="item item3">
紧急工单数 <span class=""><countup endVal="45678" /></span>
<div class="statistics-item">
<div class="flex align-center">
<img class="statistics-item__icon" src="@/assets/images/dot-error.svg" alt="" />
<span class="statistics-item__label">紧急消息</span>
</div>
<div class="statistics-item__value--error">
<countup end-val="45678" />
<span class="statistics-item__value-suffix">条</span>
</div>
</div>
<div class="item item2">
重要工单数 <span class=""><countup endVal="45678" /></span>
<div class="statistics-item">
<div class="flex align-center">
<img class="statistics-item__icon" src="@/assets/images/dot-warning.svg" alt="" />
<span class="statistics-item__label">重要消息</span>
</div>
<div class="statistics-item__value--warning">
<countup end-val="45678" />
<span class="statistics-item__value-suffix">条</span>
</div>
</div>
<div class="item item1">
普通工单数 <span class=""><countup endVal="45678" /></span>
<div class="statistics-item">
<div class="flex align-center">
<img class="statistics-item__icon" src="@/assets/images/dot-success.svg" alt="" />
<span class="statistics-item__label">普通消息</span>
</div>
<div class="statistics-item__value--success">
<countup end-val="45678" />
<span class="statistics-item__value-suffix">条</span>
</div>
</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 class="chart-box">
<pie :width="150" :height="150" />
<pie :width="150" :height="150" />
<pie :width="150" :height="150" />
</div>
</div>
<!-- 2 -->
<div class="work-box-1">
<!-- 最新工单 -->
<div class="header">
<div class="title"> <span>消息情况</span> </div>
</div>
<!-- 列表 -->
<Title1 title="消息情况" />
<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 class="item" v-for="(item, index) in list" :key="index">
<span
:class="{
'label--primary': item.level == 'normal',
'label--warning': item.level == 'warn',
'label--error': item.level == 'important'
}"
>{{ item.level_text }}</span
>
<p>{{ item.title }}</p>
<span class="time">{{ item.time }}</span>
</div>
</div>
</div>
@@ -51,162 +72,42 @@
<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
}
]
}
]
import pie from './pie.vue'
import { getNewsListApi, getNewsStateApi, getNewsTotalApi } from '@/api/news'
const list = ref([])
const getNewsTotal = async () => {
let res = await getNewsTotalApi()
console.log(res, '============')
}
const getNewsState = async () => {
let res = await getNewsStateApi()
}
const getNewsList = async () => {
let res = await getNewsListApi()
list.value = res.data
}
onMounted(() => {
getNewsList()
getNewsTotal()
getNewsState()
})
</script>
<style lang="scss" scoped>
.work-box-3 {
width: vw(813);
height: vh(380);
width: vw(840);
margin-top: vh(120);
margin-left: vw(10);
position: relative;
z-index: 99;
background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%);
margin-left: vw(8);
.work-box-1 {
width: vw(815);
height: vh(588);
background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%);
position: relative;
z-index: 99;
padding: 0 vw(20);
height: vh(566);
display: flex;
flex-direction: column;
background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%);
.list {
/* 滚动条整体样式 */
&::-webkit-scrollbar {
@@ -221,15 +122,15 @@
background: rgba(0, 150, 255, 0.63); /* 滑块的背景色 */
border-radius: 5px; /* 滑块的圆角 */
}
height: vh(510);
height: vh(500);
overflow: auto;
.li:nth-child(odd) {
.item:nth-child(odd) {
background: rgba(3, 78, 153, 0.3);
}
.li:nth-child(even) {
.item:nth-child(even) {
background-color: transparent;
}
.li {
.item {
display: flex;
align-items: center;
justify-content: flex-start;
@@ -245,13 +146,16 @@
display: inline-block;
margin-right: vw(10);
}
.label1 {
.label--primary {
@extend .label;
background: #2380fb;
}
.label2 {
.label--warning {
@extend .label;
background: #feae00;
}
.label3 {
.label--error {
@extend .label;
background: #d9011b;
}
.time {
@@ -281,128 +185,72 @@
}
}
}
.header {
position: relative;
margin: 0 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%);
display: flex;
flex-direction: column;
height: vh(380);
overflow: hidden;
margin-bottom: vw(8);
background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%);
.chart-box {
padding: vw(20) vw(15);
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(140);
height: vh(140);
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;
.statistics {
padding: 0 vw(20);
.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);
display: flex;
justify-content: space-around;
&-item {
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 {
}
&-item__icon {
width: vw(24);
height: vw(24);
}
&-item__label {
color: #fff;
font-size: vw(14);
}
&-item__value {
position: relative;
margin-top: vh(16);
padding-left: vw(12);
padding-bottom: vh(12);
display: flex;
align-items: center;
font-weight: bold;
font-size: vw(28);
color: #fff;
&--primary {
@extend .statistics-item__value;
color: #02f9fa;
background-image: url('@/assets/images/mask-primary.png');
background-size: 100% 100%;
}
&--error {
@extend .statistics-item__value;
background-image: url('@/assets/images/mask-error.png');
background-size: 100% 100%;
}
&--warning {
@extend .statistics-item__value;
background-image: url('@/assets/images/mask-warning.png');
background-size: 100% 100%;
}
&--success {
@extend .statistics-item__value;
background-image: url('@/assets/images/mask-success.png');
background-size: 100% 100%;
}
}
.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%;
&-item__value-suffix {
font-size: vw(12);
margin-top: vh(6);
}
}
}

157
src/views/workOrder/components/pie.vue Normal file
View File

@@ -0,0 +1,157 @@
<template>
<div class="pie" :id="id" />
</template>
<script setup>
import { fitChartSize } from '@/utils/dataUtil'
import { useEchart } from '@/hooks/echart'
const { id, setOption } = useEchart()
let option = {
backgroundColor: 'transparent',
title: [
{
text: '45.5%',
x: 'center',
top: '42%',
textStyle: {
color: '#02F9FA',
fontSize: fitChartSize(24)
}
},
{
text: '完成率',
x: 'center',
top: '54%',
textStyle: {
color: '#fff',
fontSize: fitChartSize(12)
}
}
],
series: [
{
type: 'gauge',
radius: '100%',
center: ['50%', '50%'],
min: 0,
max: 100,
startAngle: 90,
endAngle: 450,
clockwise: false,
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: 90,
endAngle: 450,
clockwise: false,
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
}
]
}
]
}
const init = () => {
setOption(option)
}
onMounted(() => {
init()
})
</script>
<style lang="scss" scoped>
.pie {
width: vw(200);
height: vh(200);
}
</style>