271 lines
7.9 KiB
Vue
271 lines
7.9 KiB
Vue
<template>
|
|
<div class="work-box-3">
|
|
<div class="work-2-flex">
|
|
<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" />
|
|
<span class="statistics-item__label">今日消息总条数</span>
|
|
</div>
|
|
<div class="statistics-item__value--primary">
|
|
<countup :end-val="countInfo.total" />
|
|
<span class="statistics-item__value-suffix">条</span>
|
|
</div>
|
|
</div>
|
|
<div class="statistics-item">
|
|
<div class="flex align-center">
|
|
<img class="statistics-item__icon" src="@/assets/images/dot-error.svg" />
|
|
<span class="statistics-item__label">紧急消息</span>
|
|
</div>
|
|
<div class="statistics-item__value--error">
|
|
<countup :end-val="countInfo.warn" />
|
|
<span class="statistics-item__value-suffix">条</span>
|
|
</div>
|
|
</div>
|
|
<div class="statistics-item">
|
|
<div class="flex align-center">
|
|
<img class="statistics-item__icon" src="@/assets/images/dot-warning.svg" />
|
|
<span class="statistics-item__label">重要消息</span>
|
|
</div>
|
|
<div class="statistics-item__value--warning">
|
|
<countup :end-val="countInfo.important" />
|
|
<span class="statistics-item__value-suffix">条</span>
|
|
</div>
|
|
</div>
|
|
<div class="statistics-item">
|
|
<div class="flex align-center">
|
|
<img class="statistics-item__icon" src="@/assets/images/dot-success.svg" />
|
|
<span class="statistics-item__label">普通消息</span>
|
|
</div>
|
|
<div class="statistics-item__value--success">
|
|
<countup :end-val="countInfo.normal" />
|
|
<span class="statistics-item__value-suffix">条</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="chart-box">
|
|
<newsRate :dataList="newsStateList" />
|
|
</div>
|
|
</div>
|
|
<div class="work-box-1">
|
|
<Title1 title="消息情况" />
|
|
<div class="list">
|
|
<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>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import countup from 'vue-countup-v3'
|
|
import pie from './pie.vue'
|
|
import { getNewsListApi, getNewsStateApi, getNewsTotalApi } from '@/api/news'
|
|
import NewsRate from "@/views/workOrder/components/newsRate.vue";
|
|
|
|
let list = ref([])
|
|
let countInfo = ref({
|
|
important: 0,
|
|
normal: 0,
|
|
total: 0,
|
|
warn: 0
|
|
})
|
|
let newsStateList = ref([])
|
|
const getNewsTotal = async () => {
|
|
let res = await getNewsTotalApi()
|
|
countInfo.value = res.data
|
|
}
|
|
const getNewsState = async () => {
|
|
let res = await getNewsStateApi()
|
|
newsStateList.value = res.data
|
|
console.log(newsStateList.value, '=================')
|
|
}
|
|
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(1000);
|
|
margin-top: vh(120);
|
|
margin-left: vw(8);
|
|
|
|
.work-box-1 {
|
|
padding: 0 vw(20);
|
|
// height: vh(566);
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%);
|
|
|
|
.list {
|
|
height: vh(1600);
|
|
// height:100%;
|
|
overflow: auto;
|
|
/* 滚动条整体样式 */
|
|
&::-webkit-scrollbar {
|
|
width: vw(4); /* 滚动条的宽度 */
|
|
}
|
|
/* 滚动条轨道 */
|
|
&::-webkit-scrollbar-track {
|
|
background: 'transparent'; /* 轨道的背景色 */
|
|
}
|
|
/* 滚动条滑块 */
|
|
&::-webkit-scrollbar-thumb {
|
|
background: rgba(0, 150, 255, 0.63); /* 滑块的背景色 */
|
|
border-radius: 5px; /* 滑块的圆角 */
|
|
}
|
|
.item:nth-child(odd) {
|
|
background: rgba(3, 78, 153, 0.3);
|
|
}
|
|
.item:nth-child(even) {
|
|
background-color: transparent;
|
|
}
|
|
.item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
padding: vh(20) vh(10);
|
|
.label {
|
|
width: vw(60);
|
|
height: vh(34);
|
|
line-height: vh(34);
|
|
color: #fff;
|
|
border-radius: 2px 2px 2px 2px;
|
|
font-size: font-vw(20);
|
|
text-align: center;
|
|
display: inline-block;
|
|
margin-right: vw(10);
|
|
}
|
|
.label--primary {
|
|
@extend .label;
|
|
width:initial;
|
|
height:initial;
|
|
padding:vw(15);
|
|
background: #2380fb;
|
|
}
|
|
.label--warning {
|
|
@extend .label;
|
|
background: #feae00;
|
|
}
|
|
.label--error {
|
|
@extend .label;
|
|
background: #d9011b;
|
|
}
|
|
.time {
|
|
font-weight: 400;
|
|
font-size: font-vw(18);
|
|
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: font-vw(20);
|
|
color: #ffffff;
|
|
text-align: left;
|
|
font-style: normal;
|
|
text-transform: none;
|
|
flex: 1;
|
|
/*1. 先强制一行内显示文本*/
|
|
white-space: nowrap;
|
|
/*2. 超出的部分隐藏*/
|
|
overflow: hidden;
|
|
/*3. 文字用省略号替代超出的部分*/
|
|
text-overflow: ellipsis;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.work-2-flex {
|
|
display: flex;
|
|
flex-direction: column;
|
|
// height: vh(380);
|
|
margin-bottom: vw(20);
|
|
background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%);
|
|
|
|
.chart-box {
|
|
padding: vw(20) vw(15);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.statistics {
|
|
padding: 0 vw(20);
|
|
display: flex;
|
|
justify-content: space-around;
|
|
&-item {
|
|
font-weight: 400;
|
|
font-size: font-vw(20);
|
|
}
|
|
&-item__icon {
|
|
width: vw(24);
|
|
height: vw(24);
|
|
}
|
|
&-item__label {
|
|
color: #fff;
|
|
font-size: font-vw(20);
|
|
}
|
|
&-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: font-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%;
|
|
}
|
|
}
|
|
&-item__value-suffix {
|
|
font-size: font-vw(12);
|
|
margin-top: vh(6);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|