update
This commit is contained in:
hzz
parent
ce827a360c
commit
bd8271dea7
@ -471,6 +471,7 @@ export default {
|
||||
"工业物联网监控平台": "Industrial Internet of Things Monitoring Platform",
|
||||
"今日":"Tody",
|
||||
"本周": "The Week",
|
||||
"本月": "The Month"
|
||||
"本月": "The Month",
|
||||
"故障": "Fault",
|
||||
}
|
||||
}
|
||||
@ -466,6 +466,7 @@ export default {
|
||||
"工业物联网监控平台": "工业物联网监控平台",
|
||||
"今日":"今日",
|
||||
"本周":"本周",
|
||||
"本月":"本月"
|
||||
"本月":"本月",
|
||||
'故障':'故障',
|
||||
}
|
||||
}
|
||||
@ -42,7 +42,7 @@ import {
|
||||
CanvasRenderer
|
||||
} from 'echarts/renderers'
|
||||
import {
|
||||
PieChart,LineChart,BarChart
|
||||
PieChart,LineChart,BarChart,GaugeChart
|
||||
} from 'echarts/charts'
|
||||
import {
|
||||
TitleComponent,
|
||||
@ -58,7 +58,8 @@ use([
|
||||
GridComponent,
|
||||
PieChart,
|
||||
LineChart,
|
||||
BarChart
|
||||
BarChart,
|
||||
GaugeChart
|
||||
]);
|
||||
|
||||
|
||||
|
||||
@ -1,10 +1,18 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
asasdasda
|
||||
asasdasda + {{ query }}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { watch } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
|
||||
const route = useRoute()
|
||||
let query = ref(route.query.timeFrame)
|
||||
watch(() => route.query.timeFrame, (newValue, oldValue) => {
|
||||
query.value=newValue
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
101
src/views/screen/components/bottomTable.vue
Normal file
101
src/views/screen/components/bottomTable.vue
Normal file
@ -0,0 +1,101 @@
|
||||
<template>
|
||||
<div class="table-container">
|
||||
<div class="title">{{ props.title }}</div>
|
||||
<div class="content">
|
||||
<el-table v-bind="$attrs" :data="tableData" header-row-class-name="table_header" :border="border" :stripe="stripe"
|
||||
style="width: 100%;height: 100%;"
|
||||
@selection-change="handleSelectionChange">
|
||||
<template v-for="item in columns" :key="item.prop">
|
||||
<!-- 选择列 -->
|
||||
<el-table-column v-if="item.type === 'selection'" type="selection" width="55" />
|
||||
|
||||
<!-- 序号列 -->
|
||||
<el-table-column v-else-if="item.type === 'index'" type="index" :width="item.width || '80'"
|
||||
:label="item.label || tLang('common', '序号')" />
|
||||
|
||||
<!-- 普通列 -->
|
||||
<el-table-column v-else :prop="item.prop" :label="item.label" :width="item.width"
|
||||
:min-width="item.minWidth" :align="item.align || 'center'">
|
||||
<!-- 自定义列内容 -->
|
||||
<template #default="scope" v-if="item.slot">
|
||||
<slot :name="item.slot" :row="scope.row"></slot>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</template>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
const props = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
columns: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
tableData: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
border: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
stripe: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits(['selection-change'])
|
||||
|
||||
const handleSelectionChange = (val) => {
|
||||
emit('selection-change', val)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
::v-deep(.el-table) {
|
||||
--el-table-border-color: transparent;
|
||||
--el-table-border: none;
|
||||
--el-table-text-color: #bdbdbe;
|
||||
--el-table-header-text-color: #bdbdbe;
|
||||
--el-table-row-hover-bg-color: transparent;
|
||||
--el-table-current-row-bg-color: transparent;
|
||||
--el-table-header-bg-color: transparent;
|
||||
--el-table-bg-color: transparent;
|
||||
--el-table-tr-bg-color: transparent;
|
||||
--el-table-expanded-cell-bg-color: transparent;
|
||||
}
|
||||
::v-deep(.table_header th) {
|
||||
background-color: transparent !important;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
}
|
||||
.title {
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
font-size: 14px;
|
||||
color: #cfcfcf;
|
||||
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 100%;
|
||||
height: calc(100% - 20px);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
204
src/views/screen/components/lcenter1.vue
Normal file
204
src/views/screen/components/lcenter1.vue
Normal file
@ -0,0 +1,204 @@
|
||||
<template>
|
||||
<div class="lc-container box-bg-color">
|
||||
<div class="title">{{ tLang('message', '异常停机分类统计') }}</div>
|
||||
<div class="content">
|
||||
<div class="left-panel">
|
||||
<v-chart :option="options" theme="dark" style="width: 100%;height: 100%;" />
|
||||
</div>
|
||||
<div class="right-panel">
|
||||
<div class="right-title">
|
||||
<span class="text1">{{ tLang('message','实时报警') }}<el-badge :show-zero="false" :value="1" class="item"><el-icon :size="20"><BellFilled /></el-icon></el-badge></span>
|
||||
<span class="text2">{{ tLang('message','全部清除') }}</span>
|
||||
</div>
|
||||
<div class="right-content">
|
||||
<div class="card-item">
|
||||
<div class="message-mine">
|
||||
<div class="message-title">主轴旋转异常，请检查机械部件</div>
|
||||
<div class="message-desc">
|
||||
<span>{{ tLang('message', '设备ID') }}: </span>
|
||||
<span>SWM5015</span>
|
||||
<span>2025-04-16 13:20:18</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="option">
|
||||
<el-button color="#DC2626" size="small">{{ tLang('message','处理') }}</el-button>
|
||||
<el-button color="#e7e7e7" size="small">{{ tLang('message','忽略') }}</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
const { proxy } = getCurrentInstance();
|
||||
let options = computed(() => {
|
||||
return {
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
top: '5%',
|
||||
left: 'center'
|
||||
},
|
||||
backgroundColor: 'transparent',
|
||||
series: [
|
||||
{
|
||||
name: '',
|
||||
type: 'pie',
|
||||
radius: ['40%', '70%'],
|
||||
avoidLabelOverlap: false,
|
||||
padAngle: 5,
|
||||
itemStyle: {
|
||||
borderRadius: 10
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
},
|
||||
// emphasis: {
|
||||
// label: {
|
||||
// show: true,
|
||||
// fontSize: 40,
|
||||
// fontWeight: 'bold'
|
||||
// }
|
||||
// },
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: [
|
||||
{ value: 1048, name: proxy.tLang('home', '维修') },
|
||||
{ value: 735, name: proxy.tLang('pms', '保养') },
|
||||
{ value: 580, name: proxy.tLang('message', '故障') },
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.box-bg-color {
|
||||
background-color: #192124;
|
||||
border-radius: 5px;
|
||||
padding: 5px;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
}
|
||||
.title {
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
font-size: 14px;
|
||||
color: #cfcfcf;
|
||||
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 100%;
|
||||
height: calc(100% - 20px);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.lc-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.content {
|
||||
|
||||
.left-panel {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
|
||||
.right-panel {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
.right-title {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
span {
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
margin: 0 20px;
|
||||
}
|
||||
.text1 {
|
||||
font-size: 18px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
.text2 {
|
||||
font-size: 12px;
|
||||
color: #cfcfcf;
|
||||
margin-right: 25px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.right-content {
|
||||
width: 100%;
|
||||
height: calc(100% - 40px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
overflow: auto;
|
||||
.card-item {
|
||||
width: 95%;
|
||||
height: 50px;
|
||||
box-sizing: border-box;
|
||||
border-left: #DC2626 4px solid;
|
||||
background-color: #2D2023;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.message-mine {
|
||||
width: 60%;
|
||||
height: 100%;
|
||||
padding-left: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
align-items: flex-start;
|
||||
.message-title {
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
}
|
||||
.message-desc {
|
||||
font-size: 10px;
|
||||
color: #d5d5d5;
|
||||
span {
|
||||
margin-right: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.option {
|
||||
width: 40%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
385
src/views/screen/components/lcenter2.vue
Normal file
385
src/views/screen/components/lcenter2.vue
Normal file
@ -0,0 +1,385 @@
|
||||
<template>
|
||||
<div class="lc-container">
|
||||
<div class="left-panel box-bg-color">
|
||||
<div class="title">{{ tLang('message', 'OEE综合设备效率') }}</div>
|
||||
<div class="content">
|
||||
<div class="oee-chart">
|
||||
<v-chart :option="oeeOption" theme="dark" style="width: 100%;height: 100%;" />
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-item">
|
||||
<div class="progress-title">
|
||||
<span>{{ tLang('message', '可用率') }}</span>
|
||||
<span class="progress-value">{{ 70 }}%</span>
|
||||
</div>
|
||||
<div class="progress-bar">
|
||||
<el-progress :percentage="70" status="warning" :stroke-width="16" :show-text="false" />
|
||||
</div>
|
||||
<div class="progress-desc">
|
||||
<span>计划停机：{{ '45分钟' }}</span>
|
||||
<span>故障停机：{{ '1小时' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-item">
|
||||
<div class="progress-title">
|
||||
<span>{{ tLang('message', '性能率') }}</span>
|
||||
<span class="progress-value">{{ 70 }}%</span>
|
||||
</div>
|
||||
<div class="progress-bar">
|
||||
<el-progress :percentage="70" status="success" :stroke-width="16" :show-text="false" />
|
||||
</div>
|
||||
<div class="progress-desc">
|
||||
<span>计划停机：{{ '45分钟' }}</span>
|
||||
<span>故障停机：{{ '1小时' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-panel box-bg-color">
|
||||
<div class="right-title">
|
||||
<span class="text1">{{ tLang('message', '实时报警') }}<el-badge :show-zero="false" :value="1"
|
||||
class="item"><el-icon :size="20">
|
||||
<BellFilled />
|
||||
</el-icon></el-badge></span>
|
||||
<span class="text2">{{ tLang('message', '全部清除') }}</span>
|
||||
</div>
|
||||
<div class="right-content">
|
||||
<div class="card-item">
|
||||
<div class="message-mine">
|
||||
<div class="message-title">主轴旋转异常，请检查机械部件</div>
|
||||
<div class="message-desc">
|
||||
<span>{{ tLang('message', '设备ID') }}: </span>
|
||||
<span>SWM5015</span>
|
||||
<span>2025-04-16 13:20:18</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="option">
|
||||
<el-button color="#DC2626" size="small">{{ tLang('message', '处理') }}</el-button>
|
||||
<el-button color="#e7e7e7" size="small">{{ tLang('message', '忽略') }}</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="error-chart">
|
||||
|
||||
<v-chart :option="options" theme="dark" style="width: 100%;height: 100%;" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
const { proxy } = getCurrentInstance();
|
||||
let options = computed(() => {
|
||||
return {
|
||||
title: {
|
||||
text: proxy.tLang('message', '异常停机分类统计'),
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
top: '15%',
|
||||
orient: 'vertical',
|
||||
left: 'left'
|
||||
},
|
||||
backgroundColor: 'transparent',
|
||||
series: [
|
||||
{
|
||||
name: '',
|
||||
type: 'pie',
|
||||
radius: ['40%', '70%'],
|
||||
avoidLabelOverlap: false,
|
||||
padAngle: 5,
|
||||
itemStyle: {
|
||||
borderRadius: 10
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
},
|
||||
// emphasis: {
|
||||
// label: {
|
||||
// show: true,
|
||||
// fontSize: 40,
|
||||
// fontWeight: 'bold'
|
||||
// }
|
||||
// },
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: [
|
||||
{ value: 1048, name: proxy.tLang('home', '维修') },
|
||||
{ value: 735, name: proxy.tLang('pms', '保养') },
|
||||
{ value: 580, name: proxy.tLang('message', '故障') },
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
})
|
||||
|
||||
let oeeOption = computed(() => {
|
||||
return {
|
||||
backgroundColor: 'transparent',
|
||||
series: [
|
||||
{
|
||||
type: 'gauge',
|
||||
startAngle: 180,
|
||||
endAngle: 0,
|
||||
center: ['50%', '75%'],
|
||||
radius: '90%',
|
||||
min: 0,
|
||||
max: 1,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: [
|
||||
[0.25, '#FF6E76'],
|
||||
[0.5, '#FDDD60'],
|
||||
[0.75, '#58D9F9'],
|
||||
[1, '#7CFFB2']
|
||||
]
|
||||
}
|
||||
},
|
||||
pointer: {
|
||||
icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
|
||||
length: '12%',
|
||||
width: 10,
|
||||
offsetCenter: [0, '-60%'],
|
||||
itemStyle: {
|
||||
color: 'auto'
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
length: 5,
|
||||
distance: 3,
|
||||
lineStyle: {
|
||||
color: 'auto',
|
||||
width: 1
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
length: 10,
|
||||
distance: 3,
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#f7f7f7',
|
||||
distance: 3,
|
||||
fontSize: 12,
|
||||
formatter: function (value) {
|
||||
return value * 100;
|
||||
}
|
||||
},
|
||||
title: {
|
||||
offsetCenter: [0, '-10%'],
|
||||
fontSize: 12
|
||||
},
|
||||
detail: {
|
||||
fontSize: 14,
|
||||
offsetCenter: [0, '-35%'],
|
||||
valueAnimation: true,
|
||||
formatter: function (value) {
|
||||
return Math.round(value * 100) + '%';
|
||||
},
|
||||
color: 'inherit'
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: 0.7,
|
||||
name: 'OEE'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.box-bg-color {
|
||||
background-color: #192124;
|
||||
border-radius: 5px;
|
||||
padding: 5px;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.title {
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
font-size: 14px;
|
||||
color: #cfcfcf;
|
||||
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 100%;
|
||||
height: calc(100% - 20px);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.lc-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.left-panel {
|
||||
width: 49%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.oee-chart {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.progress {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.progress-item {
|
||||
height: 80px;
|
||||
width: 100%;
|
||||
padding: 5px;
|
||||
box-sizing: border-box;
|
||||
background-color: #1F2937;
|
||||
border-radius: 5px;
|
||||
margin: 10px 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
align-items: flex-start;
|
||||
|
||||
.progress-title {
|
||||
font-size: 14px;
|
||||
color: #999898;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.progress-desc {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 10px;
|
||||
color: #999898;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.right-panel {
|
||||
width: 49%;
|
||||
height: 100%;
|
||||
|
||||
.right-title {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
span {
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
margin: 0 20px;
|
||||
}
|
||||
|
||||
.text1 {
|
||||
font-size: 18px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.text2 {
|
||||
font-size: 12px;
|
||||
color: #cfcfcf;
|
||||
margin-right: 25px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.right-content {
|
||||
width: 100%;
|
||||
height: calc(100% - 40px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
overflow: hidden;
|
||||
|
||||
.card-item {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
box-sizing: border-box;
|
||||
border-left: #DC2626 4px solid;
|
||||
background-color: #2D2023;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.message-mine {
|
||||
width: 60%;
|
||||
height: 100%;
|
||||
padding-left: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
align-items: flex-start;
|
||||
|
||||
.message-title {
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.message-desc {
|
||||
font-size: 10px;
|
||||
color: #999898;
|
||||
|
||||
span {
|
||||
margin-right: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.option {
|
||||
width: 40%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.error-chart {
|
||||
width: 100%;
|
||||
height: calc(100% - 50px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
142
src/views/screen/components/ltop2.vue
Normal file
142
src/views/screen/components/ltop2.vue
Normal file
@ -0,0 +1,142 @@
|
||||
<template>
|
||||
<div class="lt-container">
|
||||
<div class="left">
|
||||
<div class="left-content">
|
||||
<div class="speed-box">
|
||||
<div class="speed-value">250rpm</div>
|
||||
</div>
|
||||
<div class="speed-title">{{ tLang('message', '扫描速度') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="right-item" v-for="item of devData">
|
||||
<div class="title">{{ item['label'] }}</div>
|
||||
<div class="content" v-if="item['type'] == 'status'">
|
||||
<div class="status-box" :style="{ background: statusList[item.value]['color'] }"></div>
|
||||
<div class="status-title">{{ statusList[item.value]['label'] }}</div>
|
||||
</div>
|
||||
<div class="content" v-else>
|
||||
{{ item['value'] }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
|
||||
const { proxy } = getCurrentInstance();
|
||||
|
||||
let devData = reactive({
|
||||
status: { 'label': proxy.tLang('home', '设备状态'), 'value': '1', type: 'status' },
|
||||
scansNum: { 'label': proxy.tLang('message', '扫描次数'), 'value': '22', type: '' },
|
||||
runTime: { 'label': proxy.tLang('message', '运行时长'), 'value': '00:34:22', type: '' },
|
||||
consumption: { 'label': proxy.tLang('message', '耗电量'), 'value': '22 kW·h', type: '' },
|
||||
identifyState: { 'label': proxy.tLang('message', '识别状态'), 'value': '1', type: 'status' },
|
||||
identifyNum: { 'label': proxy.tLang('message', '识别次数'), 'value': '22', type: '' },
|
||||
identifyTime: { 'label': proxy.tLang('message', '总识别时长'), 'value': '00:34:22', type: '' },
|
||||
ErrorNum: { 'label': proxy.tLang('message', '异常次数'), 'value': '22', type: '' },
|
||||
})
|
||||
|
||||
let statusList = {
|
||||
'0': { 'label': proxy.tLang('message', '停机中'), 'value': '1', 'color': '#f6f4f4' },
|
||||
'1': { 'label': proxy.tLang('message', '待机中'), 'value': '1', 'color': '#fddd60' },
|
||||
'2': { 'label': proxy.tLang('message', '运行中'), 'value': '1', 'color': '#7cffb2' },
|
||||
'3': { 'label': proxy.tLang('message', '待机中'), 'value': '1', 'color': '#fddd60' },
|
||||
'4': { 'label': proxy.tLang('message', '故障中'), 'value': '1', 'color': '#ff6e76' },
|
||||
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.title {
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
font-size: 14px;
|
||||
color: #cfcfcf;
|
||||
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 100%;
|
||||
height: calc(100% - 20px);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.lt-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.left {
|
||||
width: 25%;
|
||||
height: 100%;
|
||||
|
||||
.left-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.speed-box {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
background: url('./../image/u65.png') no-repeat;
|
||||
background-size: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
width: 75%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.right-item {
|
||||
width: 155px;
|
||||
height: 74px;
|
||||
padding: 5px;
|
||||
box-sizing: border-box;
|
||||
background: #1F2937;
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
|
||||
.status-box {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.status-title {
|
||||
font-size: 10px;
|
||||
color: #e7e7e7;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
138
src/views/screen/components/ltop3.vue
Normal file
138
src/views/screen/components/ltop3.vue
Normal file
@ -0,0 +1,138 @@
|
||||
<template>
|
||||
<div class="lt-container">
|
||||
<div class="left">
|
||||
<div class="left-content">
|
||||
<div class="speed-box">
|
||||
<div class="speed-value">250rpm</div>
|
||||
</div>
|
||||
<div class="speed-title">{{ tLang('message', '设备转速') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="right-item" v-for="item of devData">
|
||||
<div class="title">{{ item['label'] }}</div>
|
||||
<div class="content" v-if="item['type'] == 'status'">
|
||||
<div class="status-box" :style="{ background: statusList[item.value]['color'] }"></div>
|
||||
<div class="status-title">{{ statusList[item.value]['label'] }}</div>
|
||||
</div>
|
||||
<div class="content" v-else>
|
||||
{{ item['value'] }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
|
||||
const { proxy } = getCurrentInstance();
|
||||
|
||||
let devData = reactive({
|
||||
status: { 'label': proxy.tLang('home', '设备状态'), 'value': '1', type: 'status' },
|
||||
runTime: { 'label': proxy.tLang('message', '运行时长'), 'value': '00:34:22', type: '' },
|
||||
prod: { 'label': proxy.tLang('message', '总产量'), 'value': '22', type: '' },
|
||||
})
|
||||
|
||||
let statusList = {
|
||||
'0': { 'label': proxy.tLang('message', '停机中'), 'value': '1', 'color': '#f6f4f4' },
|
||||
'1': { 'label': proxy.tLang('message', '待机中'), 'value': '1', 'color': '#fddd60' },
|
||||
'2': { 'label': proxy.tLang('message', '运行中'), 'value': '1', 'color': '#7cffb2' },
|
||||
'3': { 'label': proxy.tLang('message', '待机中'), 'value': '1', 'color': '#fddd60' },
|
||||
'4': { 'label': proxy.tLang('message', '故障中'), 'value': '1', 'color': '#ff6e76' },
|
||||
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.title {
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
font-size: 14px;
|
||||
color: #cfcfcf;
|
||||
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 100%;
|
||||
height: calc(100% - 20px);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.lt-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.left {
|
||||
width: 25%;
|
||||
height: 100%;
|
||||
|
||||
.left-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.speed-box {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
background: url('./../image/u65.png') no-repeat;
|
||||
background-size: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
width: 75%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.right-item {
|
||||
width: 200px;
|
||||
height: 120px;
|
||||
padding: 15px;
|
||||
border-radius: 5px;
|
||||
box-sizing: border-box;
|
||||
background: #1F2937;
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
|
||||
.status-box {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 50%;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.status-title {
|
||||
font-size: 12px;
|
||||
color: #e7e7e7;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
BIN
src/views/screen/image/u65.png
Normal file
BIN
src/views/screen/image/u65.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
@ -2,10 +2,17 @@
|
||||
<div class="container">
|
||||
<div class="left">
|
||||
<div class="lt box-bg-color">
|
||||
<Ltop1></Ltop1>
|
||||
<!-- <Ltop1></Ltop1> -->
|
||||
<!-- <Ltop2></Ltop2> -->
|
||||
<Ltop3></Ltop3>
|
||||
</div>
|
||||
<div class="lc">
|
||||
<!-- <Lcenter1></Lcenter1> -->
|
||||
<Lcenter2></Lcenter2>
|
||||
</div>
|
||||
<div class="lb box-bg-color">
|
||||
<bottomTable title="检测结果" :columns="columns" :table-data="tableData"></bottomTable>
|
||||
</div>
|
||||
<div class="lc box-bg-color"></div>
|
||||
<div class="lb box-bg-color"></div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="rt box-bg-color"></div>
|
||||
@ -17,6 +24,27 @@
|
||||
|
||||
<script setup>
|
||||
import Ltop1 from './components/ltop1.vue'
|
||||
import Ltop2 from './components/ltop2.vue'
|
||||
import Ltop3 from './components/ltop3.vue'
|
||||
import Lcenter1 from './components/lcenter1.vue'
|
||||
import Lcenter2 from './components/lcenter2.vue'
|
||||
import bottomTable from './components/bottomTable.vue'
|
||||
|
||||
|
||||
const columns = [
|
||||
// { type: 'selection' },
|
||||
// { type: 'index', label: '序号' },
|
||||
{ prop: 'code', label: '产品编码' },
|
||||
{ prop: 'status', label: '检查结果', slot: 'status' },
|
||||
{ prop: 'offset', label: '偏差值' },
|
||||
{ prop: 'date', label: '检测时间' },
|
||||
{ prop: 'num', label: '检测数量' },
|
||||
]
|
||||
|
||||
let tableData = ref([
|
||||
{ code: '123456789', status: '正常', offset: '0.00', date: '2021-01-01', num: '100' },
|
||||
{ code: '123456789', status: '正常', offset: '0.00', date: '2021-01-01', num: '100' }
|
||||
])
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user