<template>
|
<div class="color-info">
|
<div v-if="type == 1" class="color-one">
|
加工数({{ activeTask?.Order?.unit ?? '--' }})
|
<span>{{ plcInfo?.finishNumber ?? 0 }}</span>
|
</div>
|
<div v-else class="color-two">
|
目标({{ activeTask?.Order?.unit ?? '--' }})
|
<span> {{ plcInfo?.totalNumber ?? 0 }}</span>
|
</div>
|
</div>
|
</template>
|
<script setup lang="ts">
|
import { toRefs } from 'vue'
|
import { usePLCStore } from '@/stores/plc'
|
import { storeToRefs } from 'pinia'
|
import { useTasksStore } from '@/stores/tasks'
|
|
export interface ColorInfoProps {
|
/** 1加工数 2目标数*/
|
type?: 1 | 2
|
}
|
|
const props = defineProps<ColorInfoProps>()
|
const { type } = toRefs(props)
|
|
const plcStore = usePLCStore()
|
const { plcInfo } = storeToRefs(plcStore)
|
const taskStore = useTasksStore()
|
const { activeTask } = storeToRefs(taskStore)
|
</script>
|
|
<style scoped lang="scss">
|
$status-default: #13235a;
|
$status-running: #f76c0f;
|
$status-ready: #13235a;
|
$status-done: #0059ffd0;
|
$status-star: yellow;
|
|
.color-info {
|
width: calc(50% - 5px);
|
height: 120px;
|
line-height: 40px;
|
margin-top: 10px;
|
border-radius: 4px;
|
color: #fff;
|
overflow: hidden;
|
float: left;
|
text-align: center;
|
font-size: 15px;
|
|
.color-one {
|
background: $status-running;
|
height: 100%;
|
width: 100%;
|
margin-right: 10px;
|
span {
|
width: 100%;
|
display: inline-block;
|
font-weight: 600;
|
font-size: 30px;
|
margin-top: 15px;
|
}
|
}
|
.color-two {
|
background: $status-done;
|
margin-left: 10px;
|
height: 100%;
|
width: 100%;
|
span {
|
width: 100%;
|
display: inline-block;
|
font-weight: 600;
|
font-size: 30px;
|
margin-top: 15px;
|
}
|
}
|
}
|
</style>
|
