<template>
|
<div class="dashboard-container">
|
<div class="overview-section">
|
<el-row :gutter="20">
|
<el-col :lg="24">
|
<div class="data-overview">
|
<h3 class="title">数据总览</h3>
|
<div class="metrics">
|
<div class="metric-item" v-for="(item, index) in dataMetrics" :key="index">
|
<div style="display: flex;align-items: center; margin-left: 80px;">
|
<div class="metric-icon">
|
<i :class="getMetricIcon(item.name)"></i>
|
</div>
|
<div class="metric-name">{{ item.name }}</div>
|
</div>
|
<div class="metric-value">{{ item.value }}</div>
|
</div>
|
</div>
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
<div class="overview-section">
|
<el-row :gutter="20">
|
<el-col :lg="24">
|
<div class="bg-color-black task-board-container">
|
<div class="d-flex pt-2 pl-2">
|
<div class="d-flex">
|
<span class="fs-xl text mx-2 title">当前生产任务</span>
|
</div>
|
</div>
|
<div class="body-box">
|
<div class="scroll-table-container" @mouseenter="pauseScroll" @mouseleave="resumeScroll">
|
<!-- 表头 -->
|
<div class="table-header" ref="tableHeader">
|
<table class="header-table">
|
<thead>
|
<tr>
|
<th style="width: 60px;font-size: 18px;">序号</th>
|
<th style="width: 100px;font-size: 18px;">托盘码</th>
|
<th style="width: 120px;font-size: 18px;">起始地址</th>
|
<th style="width: 120px;font-size: 18px;">目标地址</th>
|
<th style="width: 120px;font-size: 18px;">任务类型</th>
|
<th style="width: 120px;font-size: 18px;">任务状态</th>
|
<th style="width: 160px;font-size: 18px;">创建时间</th>
|
</tr>
|
</thead>
|
</table>
|
</div>
|
|
<!-- 表格内容区域 -->
|
<div class="table-body-container" ref="tableBody">
|
<div class="table-body-wrapper" :style="{ transform: `translateY(-${scrollPosition}px)` }">
|
<!-- 原始数据 -->
|
<table class="body-table">
|
<tbody>
|
<tr v-for="(row, index) in tableData" :key="index"
|
:class="index % 2 === 0 ? 'even-row' : 'odd-row'">
|
<td style="width: 60px; text-align: center;font-size: 16px;">{{ index + 1 }}</td>
|
<td style="width: 100px; text-align: center;font-size: 16px;">{{ row.palletCode || '无' }}</td>
|
<td style="width: 120px; text-align: center;font-size: 16px;">{{ row.sourceAddress || '无' }}
|
</td>
|
<td style="width: 120px; text-align: center;font-size: 16px;">{{ row.targetAddress || '无' }}
|
</td>
|
<td style="width: 120px; text-align: center;font-size: 16px;">{{ row.taskType || '无' }}</td>
|
<td style="width: 120px; text-align: center;font-size: 16px;">
|
<el-tag :type="getStatusType(row.taskState)" size="small">
|
{{ row.taskState || '无' }}
|
</el-tag>
|
</td>
|
<td style="width: 160px; text-align: center;font-size: 18px;">{{ row.createDate || '无' }}</td>
|
</tr>
|
</tbody>
|
</table>
|
|
<!-- 复制一份数据用于无缝滚动 -->
|
<table class="body-table" v-if="tableData.length > rowNum">
|
<tbody>
|
<tr v-for="(row, index) in tableData" :key="`copy-${index}`"
|
:class="index % 2 === 0 ? 'even-row' : 'odd-row'">
|
<td style="width: 60px; text-align: center;">{{ index + tableData.length + 1 }}</td>
|
<td style="width: 100px; text-align: center;">{{ row.palletCode || '无' }}</td>
|
<td style="width: 120px; text-align: center;">{{ row.sourceAddress || '无' }}</td>
|
<td style="width: 120px; text-align: center;">{{ row.targetAddress || '无' }}</td>
|
<td style="width: 120px; text-align: center;">{{ row.taskType || '无' }}</td>
|
<td style="width: 120px; text-align: center;">
|
<el-tag :type="getStatusType(row.taskState)" size="small">
|
{{ row.taskState || '无' }}
|
</el-tag>
|
</td>
|
<td style="width: 160px; text-align: center;">{{ row.createDate || '无' }}</td>
|
</tr>
|
</tbody>
|
</table>
|
</div>
|
</div>
|
</div>
|
<div v-if="tableData.length === 0" class="no-data-board">
|
<el-empty description="暂无生产任务数据" :image-size="80" />
|
</div>
|
</div>
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
<div class="charts-section">
|
<el-row :gutter="20">
|
<el-col :lg="12">
|
<div class="chart-container">
|
<h3 class="title">出库量</h3>
|
<div v-if="loading" class="loading">加载中...</div>
|
<div v-else-if="error" class="error">数据加载失败</div>
|
<div v-else-if="!chartData.outbound.values.length" class="no-data">暂无出库数据</div>
|
<div v-else ref="outboundChart" class="chart"></div>
|
</div>
|
</el-col>
|
<el-col :lg="12">
|
<div class="chart-container">
|
<h3 class="title">入库量</h3>
|
<div v-if="loading" class="loading">加载中...</div>
|
<div v-else-if="error" class="error">数据加载失败</div>
|
<div v-else-if="!chartData.inbound.values.length" class="no-data">暂无入库数据</div>
|
<div v-else ref="inboundChart" class="chart"></div>
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
<div style="margin-top: 20px;"></div>
|
<div class="charts-section">
|
<el-row :gutter="20">
|
<el-col :lg="24">
|
<div class="chart-container">
|
<h3 class="title">月出入库量</h3>
|
<div v-if="loading" class="loading">加载中...</div>
|
<div v-else-if="error" class="error">数据加载失败</div>
|
<div v-else-if="!chartData.monthData.inValue.length || !chartData.monthData.outValue.length" class="no-data">
|
暂无出入库数据</div>
|
<div v-else ref="monthDataChart" class="chart1"></div>
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import http from '../api/http.js';
|
import { ref, reactive, onMounted, onUnmounted, nextTick, computed } from 'vue';
|
import * as echarts from 'echarts';
|
// import { TrendCharts } from '@element-plus/icons-vue';
|
|
// 响应式数据
|
const dataMetrics = ref([]);
|
const tableData = ref([]);
|
const chartData = reactive({
|
outbound: { dates: [], values: [] },
|
inbound: { dates: [], values: [] },
|
monthData: { dates: [], inValue: [], outValue: [] }
|
});
|
const loading = ref(true);
|
const error = ref(false);
|
|
// 滚动相关
|
const tableHeader = ref(null);
|
const tableBody = ref(null);
|
const scrollPosition = ref(0);
|
const isScrolling = ref(true);
|
let scrollInterval = null;
|
const rowNum = 7; // 显示的行数
|
const rowHeight = 40; // 每行高度
|
|
|
const getMetricIcon = (type) => {
|
const iconMap = {
|
'今日进库量': 'iconfont icon-cangpeitubiao_huanhuorukutuihuoruku',
|
'今日出库量': 'el-icon-takeaway-box',
|
'本月进库量': 'iconfont icon-cangpeitubiao_huanhuorukutuihuoruku',
|
'本月出库量': 'el-icon-takeaway-box',
|
'库存总量': 'el-icon-goods',
|
};
|
return iconMap[type] || 'el-icon-data-board';
|
};
|
// 图表引用和实例
|
const outboundChart = ref(null);
|
const inboundChart = ref(null);
|
const monthDataChart = ref(null);
|
const outboundInstance = ref(null);
|
const inboundInstance = ref(null);
|
const monthDataInstance = ref(null);
|
const charts = ref([]);
|
|
// 启动滚动
|
const startScrolling = () => {
|
if (tableData.value.length <= rowNum) {
|
isScrolling.value = false;
|
return; // 数据少时不滚动
|
}
|
|
isScrolling.value = true;
|
const totalHeight = tableData.value.length * rowHeight;
|
|
scrollInterval = setInterval(() => {
|
scrollPosition.value += 1;
|
|
// 当滚动到第一份数据的末尾时，重置位置实现无缝滚动
|
if (scrollPosition.value >= totalHeight) {
|
scrollPosition.value = 0;
|
}
|
}, 20); // 调整滚动速度
|
};
|
|
// 暂停滚动
|
const pauseScroll = () => {
|
if (scrollInterval) {
|
clearInterval(scrollInterval);
|
scrollInterval = null;
|
}
|
isScrolling.value = false;
|
};
|
|
// 恢复滚动
|
const resumeScroll = () => {
|
if (tableData.value.length > rowNum) {
|
startScrolling();
|
}
|
};
|
|
// 状态标签类型
|
const getStatusType = (status) => {
|
const statusMap = {
|
};
|
return statusMap[status] || 'primary';
|
};
|
|
// 初始化图表
|
const initCharts = () => {
|
if (!outboundChart.value || !inboundChart.value || !monthDataChart.value) {
|
console.log('图表容器未找到，延迟初始化');
|
return;
|
}
|
|
outboundInstance.value = echarts.init(outboundChart.value);
|
inboundInstance.value = echarts.init(inboundChart.value);
|
monthDataInstance.value = echarts.init(monthDataChart.value);
|
|
charts.value = [outboundInstance.value, inboundInstance.value, monthDataInstance.value];
|
|
// 出库量图表配置（柱状图）
|
const outboundOption = {
|
tooltip: {
|
trigger: 'axis',
|
axisPointer: {
|
type: 'shadow'
|
},
|
formatter: function (params) {
|
const data = params[0];
|
return `
|
<div style="font-weight: bold; margin-bottom: 5px;">${data.name}</div>
|
<div style="display: flex; align-items: center;">
|
<span style="display: inline-block; width: 10px; height: 10px; background: ${data.color}; border-radius: 50%; margin-right: 5px;"></span>
|
<span>${data.seriesName}: </span>
|
<span style="font-weight: bold; margin-left: 5px;">${data.value}</span>
|
</div>
|
`;
|
},
|
backgroundColor: 'rgba(255, 255, 255, 0.9)',
|
borderColor: '#ddd',
|
borderWidth: 1,
|
textStyle: {
|
color: '#333'
|
}
|
},
|
grid: {
|
left: '3%',
|
right: '4%',
|
bottom: '3%',
|
containLabel: true
|
},
|
xAxis: {
|
type: 'category',
|
data: chartData.outbound.dates,
|
axisLabel: {
|
rotate: 45
|
}
|
},
|
yAxis: {
|
type: 'value',
|
name: '数量'
|
},
|
series: [{
|
name: '出库量',
|
data: chartData.outbound.values,
|
type: 'bar',
|
itemStyle: {
|
color: '#e06e6e'
|
},
|
barWidth: '60%',
|
animation: true,
|
label: {
|
show: true,
|
position: 'top',
|
formatter: '{c}',
|
color: '#e06e6e'
|
}
|
}]
|
};
|
|
// 入库量图表配置（折线图）
|
const inboundOption = {
|
tooltip: {
|
trigger: 'axis',
|
axisPointer: {
|
type: 'line'
|
},
|
formatter: function (params) {
|
const data = params[0];
|
return `
|
<div style="font-weight: bold; margin-bottom: 5px;">${data.name}</div>
|
<div style="display: flex; align-items: center;">
|
<span style="display: inline-block; width: 10px; height: 10px; background: ${data.color}; border-radius: 50%; margin-right: 5px;"></span>
|
<span>${data.seriesName}: </span>
|
<span style="font-weight: bold; margin-left: 5px;">${data.value}</span>
|
</div>
|
`;
|
},
|
backgroundColor: 'rgba(255, 255, 255, 0.9)',
|
borderColor: '#ddd',
|
borderWidth: 1,
|
textStyle: {
|
color: '#333'
|
}
|
},
|
grid: {
|
left: '3%',
|
right: '4%',
|
bottom: '3%',
|
containLabel: true
|
},
|
xAxis: {
|
type: 'category',
|
data: chartData.inbound.dates,
|
axisLabel: {
|
rotate: 45
|
}
|
},
|
yAxis: {
|
type: 'value',
|
name: '数量'
|
},
|
series: [{
|
name: '入库量',
|
data: chartData.inbound.values,
|
type: 'line',
|
itemStyle: {
|
color: '#4a7bff'
|
},
|
lineStyle: {
|
width: 3
|
},
|
smooth: true,
|
animation: true,
|
label: {
|
show: true,
|
position: 'top',
|
formatter: '{c}',
|
color: '#4a7bff'
|
}
|
}]
|
};
|
|
// 月出入库量图表配置（双折线图）
|
const monthDataOption = {
|
tooltip: {
|
trigger: 'axis',
|
axisPointer: {
|
type: 'cross',
|
crossStyle: {
|
color: '#999'
|
}
|
},
|
formatter: function (params) {
|
let html = `<div style="font-weight: bold; margin-bottom: 5px;">${params[0].name}</div>`;
|
params.forEach(param => {
|
html += `
|
<div style="display: flex; align-items: center; margin: 2px 0;">
|
<span style="display: inline-block; width: 10px; height: 10px; background: ${param.color}; border-radius: 50%; margin-right: 5px;"></span>
|
<span>${param.seriesName}: </span>
|
<span style="font-weight: bold; margin-left: 5px;">${param.value}</span>
|
</div>
|
`;
|
});
|
return html;
|
},
|
backgroundColor: 'rgba(255, 255, 255, 0.9)',
|
borderColor: '#ddd',
|
borderWidth: 1,
|
textStyle: {
|
color: '#333'
|
}
|
},
|
legend: {
|
data: ['入库量', '出库量'],
|
bottom: 0
|
},
|
grid: {
|
left: '3%',
|
right: '4%',
|
bottom: '10%',
|
containLabel: true
|
},
|
xAxis: {
|
type: 'category',
|
data: chartData.monthData.dates,
|
axisLabel: {
|
rotate: 45
|
},
|
axisPointer: {
|
type: 'shadow'
|
}
|
},
|
yAxis: {
|
type: 'value',
|
name: '数量'
|
},
|
series: [
|
{
|
name: '入库量',
|
data: chartData.monthData.inValue,
|
type: 'line',
|
itemStyle: {
|
color: '#4a7bff'
|
},
|
lineStyle: {
|
width: 3
|
},
|
smooth: true,
|
animation: true,
|
label: {
|
show: true,
|
position: 'top',
|
formatter: '{c}',
|
color: '#4a7bff'
|
}
|
},
|
{
|
name: '出库量',
|
data: chartData.monthData.outValue,
|
type: 'line',
|
itemStyle: {
|
color: '#e06e6e'
|
},
|
lineStyle: {
|
width: 3
|
},
|
smooth: true,
|
animation: true,
|
label: {
|
show: true,
|
position: 'top',
|
formatter: '{c}',
|
color: '#e06e6e'
|
}
|
}
|
]
|
};
|
|
outboundInstance.value.setOption(outboundOption);
|
inboundInstance.value.setOption(inboundOption);
|
monthDataInstance.value.setOption(monthDataOption);
|
};
|
|
// 更新图表数据
|
const updateCharts = () => {
|
nextTick(() => {
|
if (outboundInstance.value && chartData.outbound.values.length > 0) {
|
outboundInstance.value.setOption({
|
xAxis: { data: chartData.outbound.dates },
|
series: [{ data: chartData.outbound.values }]
|
});
|
}
|
|
if (inboundInstance.value && chartData.inbound.values.length > 0) {
|
inboundInstance.value.setOption({
|
xAxis: { data: chartData.inbound.dates },
|
series: [{ data: chartData.inbound.values }]
|
});
|
}
|
|
if (monthDataInstance.value && chartData.monthData.dates.length > 0) {
|
monthDataInstance.value.setOption({
|
xAxis: { data: chartData.monthData.dates },
|
series: [
|
{ data: chartData.monthData.inValue },
|
{ data: chartData.monthData.outValue }
|
]
|
});
|
}
|
});
|
};
|
|
// 响应式窗口调整
|
const handleResize = () => {
|
charts.value.forEach(chart => chart && chart.resize());
|
};
|
|
// 数据处理
|
const handleDataUpdate = (data) => {
|
console.log('API响应数据:', data);
|
|
// 更新数据指标
|
if (data.metrics && Array.isArray(data.metrics)) {
|
dataMetrics.value = data.metrics.map(item => ({
|
name: item.name || item.Name || '未知指标',
|
value: item.value != null ? item.value : item.Value || 0
|
}));
|
}
|
|
// 更新图表数据
|
if (data.outbound) {
|
chartData.outbound.dates = data.outbound.dates || [];
|
chartData.outbound.values = data.outbound.values || [];
|
}
|
|
if (data.inbound) {
|
chartData.inbound.dates = data.inbound.dates || [];
|
chartData.inbound.values = data.inbound.values || [];
|
}
|
|
if (data.monthData) {
|
chartData.monthData.dates = data.monthData.dates || [];
|
chartData.monthData.inValue = data.monthData.inValue || [];
|
chartData.monthData.outValue = data.monthData.outValue || [];
|
}
|
|
// 更新表格数据
|
if (data && data.newTask && Array.isArray(data.newTask)) {
|
tableData.value = data.newTask.map(task => ({
|
palletCode: task.palletCode || '无',
|
roadway: task.roadway || '无',
|
sourceAddress: task.sourceAddress || '无',
|
targetAddress: task.targetAddress || '无',
|
taskType: task.taskType || '无',
|
taskState: task.taskState || '无',
|
errorMessage: task.errorMessage || '无',
|
createDate: task.createDate || '无',
|
}));
|
|
// 数据更新后重新启动滚动
|
nextTick(() => {
|
pauseScroll();
|
startScrolling();
|
});
|
} else {
|
tableData.value = [];
|
pauseScroll();
|
}
|
|
// 延迟初始化图表，确保数据已更新
|
nextTick(() => {
|
if (!outboundInstance.value || !inboundInstance.value || !monthDataInstance.value) {
|
initCharts();
|
} else {
|
updateCharts();
|
}
|
});
|
};
|
|
// 数据获取
|
const fetchData = async () => {
|
try {
|
loading.value = true;
|
error.value = false;
|
|
const response = await http.post("api/StockInfo/GetStockData", {});
|
console.log('API响应:', response);
|
|
if (response.data && response.data.success !== false) {
|
handleDataUpdate(response.data);
|
} else {
|
throw new Error('API返回数据格式错误');
|
}
|
loading.value = false;
|
} catch (err) {
|
console.error('API请求失败:', err);
|
loading.value = false;
|
error.value = true;
|
}
|
};
|
|
const intervalId = ref(null);
|
const startPolling = () => {
|
fetchData();
|
intervalId.value = setInterval(fetchData, 5 * 60 * 1000); // 5分钟轮询
|
};
|
|
const stopPolling = () => {
|
if (intervalId.value) {
|
clearInterval(intervalId.value);
|
intervalId.value = null;
|
}
|
pauseScroll();
|
};
|
|
// 生命周期
|
onMounted(() => {
|
startPolling();
|
window.addEventListener('resize', handleResize);
|
});
|
|
onUnmounted(() => {
|
stopPolling();
|
charts.value.forEach(chart => chart && chart.dispose());
|
window.removeEventListener('resize', handleResize);
|
});
|
</script>
|
|
<style scoped lang="less">
|
.dashboard-container {
|
padding: 20px;
|
background-color: #f5f6fa;
|
min-height: 100vh;
|
}
|
|
.overview-section {
|
margin-bottom: 20px;
|
}
|
|
.data-overview {
|
background: white;
|
padding: 16px;
|
border-radius: 8px;
|
height: 200px;
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
.title {
|
display: flex;
|
align-items: center;
|
|
&::before {
|
display: block;
|
content: "";
|
width: 6px;
|
height: 20px;
|
background-color: #409eff;
|
margin-right: 10px;
|
}
|
}
|
}
|
|
.task-board-container {
|
height: 300px;
|
border-radius: 8px;
|
background-color: white;
|
display: flex;
|
flex-direction: column;
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
}
|
|
.d-flex {
|
display: flex;
|
|
.title {
|
display: flex;
|
align-items: center;
|
|
&::before {
|
display: block;
|
content: "";
|
width: 6px;
|
height: 20px;
|
background-color: #409eff;
|
margin-right: 10px;
|
}
|
}
|
}
|
|
.pt-2 {
|
padding-top: 0.5rem;
|
}
|
|
.pl-2 {
|
padding-left: 0.5rem;
|
}
|
|
.text-icon {
|
color: #409eff;
|
font-size: 18px;
|
}
|
|
.fs-xl {
|
font-size: 16px;
|
font-weight: bold;
|
}
|
|
.text {
|
color: #333;
|
}
|
|
.mx-2 {
|
margin-left: 0.5rem;
|
margin-right: 0.5rem;
|
}
|
|
.body-box {
|
flex: 1;
|
padding: 10px;
|
border-radius: 8px;
|
overflow: hidden;
|
}
|
|
.scroll-table-container {
|
height: 250px;
|
position: relative;
|
border: 1px solid #e0e0e0;
|
border-radius: 4px;
|
overflow: hidden;
|
}
|
|
.table-header {
|
position: absolute;
|
top: 0;
|
left: 0;
|
right: 0;
|
z-index: 10;
|
background: #0066cc;
|
}
|
|
.header-table {
|
width: 100%;
|
border-collapse: collapse;
|
}
|
|
.header-table th {
|
background: #0066cc;
|
color: white;
|
font-weight: bold;
|
padding: 8px 4px;
|
text-align: center;
|
border-right: 1px solid #0055aa;
|
font-size: 12px;
|
}
|
|
.header-table th:last-child {
|
border-right: none;
|
}
|
|
.table-body-container {
|
position: absolute;
|
top: 40px;
|
/* 表头高度 */
|
left: 0;
|
right: 0;
|
bottom: 0;
|
overflow: hidden;
|
}
|
|
.table-body-wrapper {
|
transition: transform 0.1s linear;
|
}
|
|
.body-table {
|
width: 100%;
|
border-collapse: collapse;
|
}
|
|
.body-table td {
|
padding: 8px 4px;
|
border-bottom: 1px solid #f0f0f0;
|
font-size: 12px;
|
height: 40px;
|
box-sizing: border-box;
|
}
|
|
.even-row {
|
background-color: #f8f9fa;
|
}
|
|
.odd-row {
|
background-color: #ffffff;
|
}
|
|
.body-table tr:hover {
|
background-color: #e6f7ff !important;
|
}
|
|
.no-data-board {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
height: 100%;
|
width: 100%;
|
}
|
|
.metrics {
|
display: flex;
|
justify-content: space-between;
|
margin-top: 15px;
|
}
|
|
.metric-item {
|
text-align: center;
|
flex: 1;
|
padding: 10px;
|
}
|
|
.metric-name {
|
font-size: 24px;
|
color: #666;
|
margin-bottom: 8px;
|
}
|
|
.metric-value {
|
font-size: 22px;
|
font-weight: bold;
|
margin: 20px 0;
|
color: #333;
|
}
|
|
.charts-section {
|
margin-bottom: 20px;
|
}
|
|
.chart-container {
|
background: white;
|
padding: 16px;
|
border-radius: 8px;
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
height: 400px;
|
|
.title {
|
display: flex;
|
align-items: center;
|
|
&::before {
|
display: block;
|
content: "";
|
width: 6px;
|
height: 20px;
|
background-color: #409eff;
|
margin-right: 10px;
|
}
|
}
|
}
|
|
.chart {
|
height: 350px;
|
width: 100%;
|
}
|
|
.chart1 {
|
height: 350px;
|
width: 100%;
|
}
|
|
.loading,
|
.error,
|
.no-data {
|
margin-top: 50px;
|
height: 500px;
|
font-size: 20px;
|
}
|
|
.loading {
|
color: #999;
|
}
|
|
.error {
|
color: #f56c6c;
|
}
|
|
.metric-icon {
|
width: 28px;
|
height: 28px;
|
border-radius: 8px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
margin-right: 12px;
|
margin-bottom: 6px;
|
font-size: 24px;
|
background: rgba(255, 255, 255, 0.8);
|
}
|
|
.no-data {
|
color: #909399;
|
}
|
|
/* Element Plus 标签样式调整 */
|
:deep(.el-tag) {
|
border: none;
|
font-size: 12px;
|
}
|
|
:deep(.el-tag--success) {
|
background-color: #f0f9ff;
|
color: #67c23a;
|
}
|
|
:deep(.el-tag--primary) {
|
background-color: #f0f9ff;
|
color: #409eff;
|
}
|
|
:deep(.el-tag--info) {
|
background-color: #f4f4f5;
|
color: #909399;
|
}
|
|
:deep(.el-tag--danger) {
|
background-color: #fef0f0;
|
color: #f56c6c;
|
}
|
</style>
|
