RIZO/zhuangpei-mesvue3
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

安灯大屏修改

Browse Source
This commit is contained in:
赵正易 2025-03-14 17:02:23 +08:00
parent 1260ff60e6
commit 3a789f5065
9 changed files with 166 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/views/SmartScreen/AndonScreen/charts/chart1.vue
View File

@ -1,10 +1,16 @@
<!-- 今日工单 -->
<template>
<div>
<div class="title">安灯记录</div>
<!-- <div class="title">安灯记录</div> -->
<el-table height="600" :data="dataList" v-loading="loading" ref="tableRef" highlight-current-row @mouseover.native="clearScroll" @mouseleave.native="createScroll">
<el-table-column prop="lineCode" label="产线" />
<el-table-column prop="faultDict" label="异常类型" />
<el-table-column prop="faultDict" label="异常类型">
<template #default="scope">
<el-tag class="tag" effect="dark" size="large" :color="getTagColor(scope.row.faultDict)">
<span>{{ scope.row.faultDict }}</span>
</el-tag>
</template>
</el-table-column>
<el-table-column prop="faultContext" label="异常内容" />
<el-table-column prop="startTime" label="开始时间" />
<el-table-column prop="duration" label="持续时长" />
@ -31,6 +37,29 @@ function handleQuery() {
getList()
}
handleQuery()
/// 获取异常类型清单 =====================
import { GetListFault } from '@/api/andonManagement/dataAnalysis.js'
const faultType = ref([])
function initFaultType() {
GetListFault().then((res) => {
const { code, data } = res
if (code == 200) {
faultType.value = data
}
})
}
initFaultType()
function getTagColor(faultDict) {
for (let item of faultType.value) {
if (faultDict === item.name) {
return item.color
}
}
return '#409EFF'
}
// 自动获取数据
let timer1 = null
const clearSearchTimer = () => {
@ -41,7 +70,7 @@ const createSearchTimer = () => {
clearSearchTimer()
timer1 = setInterval(() => {
handleQuery()
}, 1000 * 60 * 5)
}, 1000 * 60 * 1)
}
// 自动滚动

23
src/views/SmartScreen/AndonScreen/charts/chart2.vue
View File

@ -24,7 +24,11 @@ const props = defineProps({
let options = {
title: {
text: '本月异常停机时间统计',
left: 'left'
left: 'left',
textStyle: {
fontSize: 36, // 设置标题字体大小
fontWeight: 'bold' // 可选：设置字体粗细
}
},
tooltip: {
trigger: 'axis',
@ -43,12 +47,18 @@ let options = {
boundaryGap: true,
axisTick: {
show: false
},
axisLabel: {
fontSize: 24 // 设置X轴标签字体大小
}
},
yAxis: {
type: 'value',
axisTick: {
show: false
},
axisLabel: {
fontSize: 24 // 设置X轴标签字体大小
}
},
// 图例
@ -56,7 +66,11 @@ let options = {
type: 'scroll',
top: 'top',
width: '70%',
left: '20%'
left: '20%',
textStyle: {
fontSize: 24, // 设置标题字体大小
fontWeight: 'bold' // 可选：设置字体粗细
}
},
series: [
{
@ -91,8 +105,6 @@ import { ShutdownBar } from '@/api/smartScreen/AndonScreen/index.js'
function updateData() {
ShutdownBar().then((res) => {
if (res.code === 200) {
console.log('ShutdownBar', res.data)
options.title = res.data.title
options.xAxis.data = res.data.xAxis.data
let _series = res.data.series
@ -100,6 +112,9 @@ function updateData() {
if (item.type === 'bar') {
item.stack = 'group'
}
item.label = {
fontSize: 20 // 设置数据标签字体大小
}
})
options.series = _series
chart.value.setOption(options)

29
src/views/SmartScreen/AndonScreen/charts/chart3.vue
View File

@ -24,13 +24,18 @@ const props = defineProps({
const options = {
title: {
text: '本月异常占比',
left: 'left'
left: 'left',
textStyle: {
fontSize: 36, // 设置标题字体大小
fontWeight: 'bold' // 可选：设置字体粗细
}
},
legend: {
type: 'scroll',
top: 20,
right: 10,
textStyle: {
fontSize: 24, // 设置标题字体大小
color: '#fff'
}
},
@ -78,17 +83,17 @@ import { AbnormalDurationRatio } from '@/api/smartScreen/AndonScreen/index.js'
function updateData() {
AbnormalDurationRatio().then((res) => {
if (res.code === 200) {
console.log('AbnormalDurationRatio', res.data)
let data = res.data
// _series.forEach((item) => {
// item.label = {
// // 设置label在扇区内部
// position: 'inner',
// // 自定义显示格式，{b}表示名称，{d}表示百分比
// formatter: '{b}\n{d}%'
// }
// })
options.series[0].data = data
let _series = res.data
_series.forEach((item) => {
item.label = {
// 设置label在扇区内部
// position: 'inner',
// 自定义显示格式，{b}表示名称，{d}表示百分比
// formatter: '{b}\n{d}%'
fontSize: 20 // 设置数据标签字体大小
}
})
options.series[0].data = _series
chart.value.setOption(options)
}
})

45
src/views/SmartScreen/AndonScreen/charts/table.css
View File

@ -1,29 +1,44 @@
.el-table {
font-size: 28px;
font-weight: 600;
background-color: transparent !important; /* Set the background color for the table */
--el-table-text-color: #eee !important;
--el-table-border-color: transparent !important; /* Set the border color for the table */
--el-table-border: 1px solid #fff !important; /* Set the border for the table */
--el-table-text-color: #eee !important;
--el-table-border-color: transparent !important; /* Set the border color for the table */
--el-table-border: 1px solid #fff !important; /* Set the border for the table */
--el-table-border-style: none !important; /* Set the border style for the table */
--el-table-border-width: 0 !important; /* Set the border width for the table */
--el-table-header-bg-color: transparent !important; /* Set the background color for the table header */
--el-table-header-text-color: #eee !important; /* Set the text color for the table header */
--el-table-header-cell-padding: 0 0 0 0 !important; /* Set the padding for the table header cell */
--el-table-header-cell-padding: 0 0 0 0 !important; /* Set the padding for the table header cell */
--el-table-row-hover-bg-color: transparent !important; /* Set the background color for the table row on hover */
--el-table-row-hover-text-color: #fff !important; /* Set the text color for the table row on hover */
--el-table-row-text-color: #fff !important; /* Set the text color for the table row */
--el-table-row-bg-color: transparent !important; /* Set the background color for the table row */
--el-table-header-cell-height: 40px !important; /* Set the height for the table header cell */
--el-table-cell-height: 40px !important; /* Set the height for the table cell */
--el-table-cell-padding: 0 0 0 0 !important; /* Set the padding for the table cell */
--el-table-tr-bg-color: transparent !important; /* Set the background color for the table row */
--el-table-cell-padding: 0 0 0 0 !important; /* Set the padding for the table cell */
--el-table-tr-bg-color: transparent !important; /* Set the background color for the table row */
}
.title{
height: 20px;
font-size: 18px;
font-weight: 700;
display: flex;
align-items: center;
color: #fff;
}
::v-deep(.el-table__row) {
height: 100px;
}
::v-deep(.cell) {
height: 80px;
display: flex;
align-items: center;
line-height: 40px;
}
.title {
height: 20px;
font-size: 24px;
font-weight: 700;
display: flex;
align-items: center;
color: #fff;
}
.tag {
font-size: 28px;
height: 60px;
}

2
src/views/SmartScreen/AndonScreen/components/kbHeader.vue
View File

@ -18,7 +18,7 @@
justify-content: center;
}
.title {
font-size: 36px;
font-size: 48px;
font-weight: 600;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
-webkit-background-clip: text; /* 仅将背景应用于文本 */

2
src/views/SmartScreen/AndonScreen/components/logo.vue
View File

@ -31,6 +31,6 @@ import imgUrl from '@/assets/logo/logo.png'
margin-left: 10px;
text-align: center;
/* line-height: 25px; */
font-size: 24px;
font-size: 36px;
}
</style>

42
src/views/SmartScreen/AndonScreen/index.css
View File

@ -1,6 +1,6 @@
body{
margin: 0;
padding: 0;
body {
margin: 0;
padding: 0;
}
.background {
padding: 0;
@ -26,7 +26,7 @@ body{
width: 99%;
height: 100%;
color: #eeeeee;
background-color: rgba(32, 163, 250, 0.2);
background-color: rgba(32, 163, 250, 0.2);
}
.screen .header {
width: 100%;
@ -47,10 +47,32 @@ body{
top: 10px;
color: #eeeeee;
}
.body{
display: flex;
flex-direction: column;
.body {
display: flex;
flex-direction: column;
}
.box {
padding: 20px;
}
.tag-title {
font-size: 56px;
text-align: center;
margin-bottom: 10px;
}
.tag-box {
display: flex;
flex-wrap: wrap;
gap: 10px; /* 设置所有方向上的间隔 */
justify-content: space-between; /* 使第一项和最后一项分别贴紧容器的两侧 */
}
.tag-box .tag-example {
flex: 1 1 48%; /* 每个tag占据近似一半宽度，考虑到gap的存在，这里设置为48% */
box-sizing: border-box;
min-width: 0; /* 确保即使内容超出也能正常换行 */
}
.tag-example {
/* width: 300px; */
height: 80px;
font-size: 48px;
}
.box{
padding: 20px;
}

34
src/views/SmartScreen/AndonScreen/index.vue
View File

@ -13,13 +13,23 @@
</div>
<div class="body">
<el-row :gutter="5">
<el-col :span="24">
<el-col :span="18">
<dv-border-box12 class="box">
<div>
<chart1></chart1>
</div>
</dv-border-box12>
</el-col>
<el-col :span="6">
<dv-border-box12 class="box">
<div class="tag-title">异常类型</div>
<div class="tag-box">
<el-tag class="tag-example" v-for="fault in faultType" effect="dark" :color="fault.color">
<span>{{ fault.name }}</span>
</el-tag>
</div>
</dv-border-box12>
</el-col>
</el-row>
<el-row :gutter="5">
<el-col :span="18">
@ -54,6 +64,28 @@ const { proxy } = getCurrentInstance()
function goBack() {
proxy.$router.push('/')
}
/// 获取异常类型清单 =====================
import { GetListFault } from '@/api/andonManagement/dataAnalysis.js'
const faultType = ref([])
function initFaultType() {
GetListFault().then((res) => {
const { code, data } = res
if (code == 200) {
faultType.value = data
}
})
}
initFaultType()
function getTagColor(faultDict) {
for (let item of faultType.value) {
if (faultDict === item.name) {
return item.color
}
}
return '#409EFF'
}
</script>
<style scoped>

2
src/views/SmartScreen/AndonScreen/theme/chalk.json
View File

@ -1,5 +1,5 @@
{
"color": ["#0082fc", "#05f8d6", "#fdd845", "#22ed7c", "#09b0d3", "#1d27c9", "#f9e264", "#f47a75", "#72ccff"],
"color": ["#72ccff", "#fe0000", "#f36a00", "#cc217f", "#0168b7", "#22ad3a", "#fc217f", "#f9e264", "#f47a75", "#72ccff"],
"backgroundColor": "transparent",
"textStyle": {},
"title": {