update
This commit is contained in:
hzz
parent
2ce62d244e
commit
ad569425b6
@ -30,6 +30,37 @@ export function getdeviceInfo() {
|
||||
|
||||
|
||||
|
||||
//获取设备信息
|
||||
export function device(obj) {
|
||||
return request({
|
||||
url: '/mf/device',
|
||||
method: 'get',
|
||||
params: obj
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
//获取裁片视觉检测工作记录
|
||||
export function getOKOrNGList(obj) {
|
||||
return request({
|
||||
url: '/pms/device/getOKOrNGList',
|
||||
method: 'get',
|
||||
params: obj
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// 查询设备保养记录
|
||||
export function checkRecord(obj) {
|
||||
return request({
|
||||
url: 'pms/checkRecord/list',
|
||||
method: 'get',
|
||||
params: obj
|
||||
})
|
||||
}
|
||||
// 查询设备维修单列表
|
||||
// 设备保养提醒
|
||||
export function deviceCheck(devCode) {
|
||||
@ -67,3 +98,12 @@ export function deviceStatusChartByDevice(obj) {
|
||||
params: obj
|
||||
})
|
||||
}
|
||||
|
||||
//查询单设备电耗趋势
|
||||
export function powerConsumptionTrend(obj) {
|
||||
return request({
|
||||
url: '/mf/powerConsumptionTrend',
|
||||
method: 'get',
|
||||
params: obj
|
||||
})
|
||||
}
|
||||
@ -17,7 +17,13 @@
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
|
||||
|
||||
|
||||
const prop = defineProps({
|
||||
totalElect: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
lineData: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
@ -84,7 +90,7 @@ let left_option = computed(() => {
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: 700,
|
||||
value: prop.totalElect,
|
||||
name: '总耗电量'
|
||||
}
|
||||
]
|
||||
@ -157,7 +163,7 @@ let line_option = computed(() => {
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
itemStyle: {
|
||||
color: 'rgb(150 ,162 ,116)',
|
||||
color: '#3E7179',
|
||||
},
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
@ -171,10 +177,10 @@ let line_option = computed(() => {
|
||||
y2: 1,
|
||||
colorStops: [{
|
||||
offset: 0,
|
||||
color: 'rgb(150 ,162 ,116 ,0.6)'
|
||||
color: '#437C84'
|
||||
}, {
|
||||
offset: 1,
|
||||
color: 'rgb(150 ,162 ,116 ,0.2)'
|
||||
color: '#1F2F33'
|
||||
}]
|
||||
}
|
||||
}
|
||||
|
||||
@ -21,9 +21,12 @@ const options = computed(() => {
|
||||
return {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
|
||||
axisPointer: {
|
||||
// Use axis to trigger tooltip
|
||||
type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
|
||||
type: 'cross',
|
||||
label: {
|
||||
backgroundColor: '#6a7985'
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {},
|
||||
@ -46,11 +49,7 @@ const options = computed(() => {
|
||||
return {
|
||||
name: item.name,
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
areaStyle: {},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
// stack: 'Total',
|
||||
data: item.data
|
||||
};
|
||||
})
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
<div class="status-list">
|
||||
<div class="status-item" v-for="item of infoList">
|
||||
<span class="status-name">{{ item.name }}:</span>
|
||||
<span>{{ item.value }} min</span>
|
||||
<span class="status-value">{{ item.value }} min</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="status-chart">
|
||||
@ -19,7 +19,7 @@
|
||||
|
||||
</div>
|
||||
<div class="lc box-bg-color">
|
||||
<Lcenter :lineData="lineData"></Lcenter>
|
||||
<Lcenter :totalElect="totalElect" :lineData="lineData"></Lcenter>
|
||||
</div>
|
||||
<div class="lb box-bg-color">
|
||||
</div>
|
||||
@ -56,7 +56,7 @@ import StackBarChart from './components/stackBarChart.vue';
|
||||
import Lcenter from './components/lcenter.vue';
|
||||
import BottomTable from './components/bottomTable.vue';
|
||||
import LineChart from './components/lineChart.vue';
|
||||
import { deviceCheck, deviceRepair, productionChartByDevice, deviceStatusChartByDevice } from '@/api/pms/device'
|
||||
import { checkRecord, deviceRepair, productionChartByDevice, deviceStatusChartByDevice,powerConsumptionTrend } from '@/api/pms/device'
|
||||
const { proxy } = getCurrentInstance()
|
||||
const route = useRoute()
|
||||
let params = ref(route.params.timeFrame)
|
||||
@ -64,21 +64,21 @@ let deviceStatusChartData = reactive({
|
||||
xAxis: [],
|
||||
series: []
|
||||
})
|
||||
let devStorage = JSON.parse(localStorage.getItem('devStorage'))
|
||||
let devStorage ={ "devCode": "33202006", "sn": "358284933"} //JSON.parse(localStorage.getItem('devStorage'))
|
||||
|
||||
let repair_column = [
|
||||
{ prop: 'devCode', label: '编码', },
|
||||
{ prop: 'devCode', label: '编码', width: '60px'},
|
||||
{ prop: 'name', label: '设备名称', },
|
||||
{ prop: 'subject', label: '报警内容', },
|
||||
{ prop: 'person', label: '负责人', },
|
||||
{ prop: 'time', label: '报警时间', }
|
||||
{ prop: 'person', label: '负责人', width: '65px' },
|
||||
{ prop: 'time', label: '报警时间', width: '80px'}
|
||||
]
|
||||
let remind_column = [
|
||||
{ prop: 'devCode', label: '编码', },
|
||||
{ prop: 'devCode', label: '编码', width: '60px'},
|
||||
{ prop: 'name', label: '设备名称', },
|
||||
{ prop: 'subject', label: '保养内容', },
|
||||
{ prop: 'person', label: '负责人', },
|
||||
{ prop: 'time', label: '保养时间', }
|
||||
{ prop: 'person', label: '负责人', width: '65px' },
|
||||
{ prop: 'time', label: '保养时间', width: '80px'}
|
||||
]
|
||||
|
||||
let devTime = reactive({
|
||||
@ -89,24 +89,43 @@ let devTime = reactive({
|
||||
})
|
||||
let infoList = computed(() => {
|
||||
return [
|
||||
{ name: '总工作时长', value: devTime.workTime },
|
||||
{ name: '总待机时长', value: devTime.waitTime },
|
||||
{ name: '总停机时长', value: devTime.stopTime },
|
||||
{ name: '总故障时长', value: devTime.faultTime },
|
||||
{ name: '总工作时长', value: devTime.workTime.toFixed(1) },
|
||||
{ name: '总待机时长', value: devTime.waitTime.toFixed(1) },
|
||||
{ name: '总停机时长', value: devTime.stopTime.toFixed(1) },
|
||||
{ name: '总故障时长', value: devTime.faultTime.toFixed(1) },
|
||||
]
|
||||
})
|
||||
|
||||
let repair_data = ref()
|
||||
let remind_data = ref()
|
||||
|
||||
let totalElect = ref(0)
|
||||
let lineData = reactive({
|
||||
xAxis: ['1', '2', '3', '4', '5'],
|
||||
series: [0, 0, 0, 0, 0]
|
||||
xAxis: [],
|
||||
series: []
|
||||
})
|
||||
|
||||
function getPowerConsumptionTrend() {
|
||||
powerConsumptionTrend({ type: params.value, devCode: devStorage.devCode }).then(res => {
|
||||
lineData.xAxis = res.data.time
|
||||
lineData.series = res.data.elec
|
||||
totalElect.value = res.data.totalElect
|
||||
})
|
||||
}
|
||||
|
||||
/**获取保养记录 */
|
||||
function getDeviceCheck() {
|
||||
deviceCheck(devStorage.devCode).then(res => {
|
||||
remind_data.value = res.data
|
||||
function getCheckRecord() {
|
||||
let query = { devCode: devStorage.devCode, pageNum: 1, pageSize: 10, status: 2 }
|
||||
checkRecord(query).then(res => {
|
||||
remind_data.value = res.rows.map(item => {
|
||||
return {
|
||||
devCode: item.devCode,
|
||||
name: item.deviceName,
|
||||
subject: item.subjectCodesName,
|
||||
person: item.director,
|
||||
time: item.deadline
|
||||
}
|
||||
})
|
||||
|
||||
})
|
||||
}
|
||||
@ -167,10 +186,10 @@ const getDeviceStatusChart = async () => {
|
||||
name: proxy.tLang('common', '待机'),
|
||||
data: series.wait
|
||||
})
|
||||
deviceStatusChartData.series.push({
|
||||
name: proxy.tLang('common', '停机'),
|
||||
data: series.stop
|
||||
})
|
||||
// deviceStatusChartData.series.push({
|
||||
// name: proxy.tLang('common', '停机'),
|
||||
// data: series.stop
|
||||
// })
|
||||
deviceStatusChartData.series.push({
|
||||
name: proxy.tLang('common', '故障'),
|
||||
data: series.fault
|
||||
@ -181,9 +200,10 @@ const getDeviceStatusChart = async () => {
|
||||
|
||||
function init() {
|
||||
getDeviceStatusChart()
|
||||
getDeviceCheck()
|
||||
getCheckRecord()
|
||||
getDeviceRepair()
|
||||
getproductionChart()
|
||||
getPowerConsumptionTrend()
|
||||
|
||||
}
|
||||
onMounted(() => {
|
||||
@ -230,7 +250,7 @@ onMounted(() => {
|
||||
align-items: center;
|
||||
|
||||
.left {
|
||||
width: 60vw;
|
||||
width: 63vw;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -248,36 +268,35 @@ onMounted(() => {
|
||||
align-items: center;
|
||||
|
||||
.status-list {
|
||||
width: 30%;
|
||||
width: 35%;
|
||||
height: 100%;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
|
||||
.status-item {
|
||||
width: 100%;
|
||||
height: 26px;
|
||||
box-sizing: border-box;
|
||||
padding: 0 20px;
|
||||
padding: 0 10px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.status-name {
|
||||
font-size: 12px;
|
||||
color: #999898;
|
||||
}
|
||||
|
||||
span {
|
||||
text-align: left;
|
||||
margin: 0 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.status-chart {
|
||||
width: 70%;
|
||||
width: 65%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
@ -295,7 +314,7 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.right {
|
||||
width: 37.7vw;
|
||||
width: 34.7vw;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@ -71,11 +71,13 @@ const handleSelectionChange = (val) => {
|
||||
--el-table-bg-color: transparent;
|
||||
--el-table-tr-bg-color: transparent;
|
||||
--el-table-expanded-cell-bg-color: transparent;
|
||||
font-size: 12px;
|
||||
}
|
||||
::v-deep(.table_header th) {
|
||||
background-color: transparent !important;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
}
|
||||
.title {
|
||||
width: 100%;
|
||||
|
||||
@ -11,12 +11,25 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
|
||||
let infoList = [
|
||||
{name: '设备名称', value: '123456789'},
|
||||
{name: '机架号', value: '123456789'},
|
||||
{name: '最后保养', value: '123456789'},
|
||||
|
||||
let prop = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
let infoList = computed(() => {
|
||||
return [
|
||||
{name: '设备名称', value: prop.data.name},
|
||||
{name: '机架号', value: prop.data.devCode},
|
||||
{name: '最后保养', value: prop.data.checkTime},
|
||||
]
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@ -2,9 +2,10 @@
|
||||
<div class="imagecard-container">
|
||||
<div class="title">{{ tLang('message', '设备视图') }}</div>
|
||||
<div class="content">
|
||||
<el-image style="width: 80%; height: 80%;max-width: 80%;max-height: 80%;" :src="bgimage" fit="contain">
|
||||
<el-image style="width: 80%; height: 80%;max-width: 80%;max-height: 80%;" :src="fileUrl + props.bgimage"
|
||||
fit="contain">
|
||||
</el-image>
|
||||
<div class="data" v-if="data.length > 0">
|
||||
<div class="data" v-if="props.isRate">
|
||||
<div class="data-item" v-for="(item, index) in data" :key="index">{{ item.name }}：{{ item.value }}</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -14,11 +15,16 @@
|
||||
<script setup>
|
||||
import bgimage from '@/assets/images/login-background.jpg'
|
||||
|
||||
let fileUrl = import.meta.env.VITE_APP_BASE_API
|
||||
const props = defineProps({
|
||||
bgimage: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
isRate: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
@ -29,6 +35,13 @@ const props = defineProps({
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
let list = computed(() => {
|
||||
return [
|
||||
{ name: '当前花版名称', value: 'A' },
|
||||
{ name: '冲孔进度', value: '90%' },
|
||||
]
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@ -15,14 +15,14 @@
|
||||
<div class="message-mine">
|
||||
<div class="message-title">主轴旋转异常，请检查机械部件</div>
|
||||
<div class="message-desc">
|
||||
<span>{{ tLang('message', '设备ID') }}: </span>
|
||||
<span>{{ tLang('message', '机架号') }}: </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="#DC2626" size="small">{{ tLang('message','处理') }}</el-button> -->
|
||||
<el-button color="#e7e7e7" size="small">{{ tLang('message','忽略') }}</el-button>
|
||||
</div>
|
||||
</div>
|
||||
@ -33,6 +33,8 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { formatter } from 'element-plus';
|
||||
|
||||
|
||||
const { proxy } = getCurrentInstance();
|
||||
let options = computed(() => {
|
||||
@ -40,10 +42,6 @@ let options = computed(() => {
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
top: '5%',
|
||||
left: 'center'
|
||||
},
|
||||
backgroundColor: 'transparent',
|
||||
series: [
|
||||
{
|
||||
@ -56,8 +54,9 @@ let options = computed(() => {
|
||||
borderRadius: 10
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
formatter:(params)=>{
|
||||
return params.name + params.value + '次'
|
||||
}
|
||||
},
|
||||
// emphasis: {
|
||||
// label: {
|
||||
@ -66,13 +65,10 @@ let options = computed(() => {
|
||||
// fontWeight: 'bold'
|
||||
// }
|
||||
// },
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: [
|
||||
{ value: 1048, name: proxy.tLang('home', '维修') },
|
||||
{ value: 735, name: proxy.tLang('pms', '保养') },
|
||||
{ value: 580, name: proxy.tLang('message', '故障') },
|
||||
{ value: 1, name: proxy.tLang('home', '维修') },
|
||||
{ value: 2, name: proxy.tLang('pms', '保养') },
|
||||
{ value: 3, name: proxy.tLang('message', '故障') },
|
||||
]
|
||||
}
|
||||
]
|
||||
@ -169,9 +165,10 @@ let options = computed(() => {
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.message-mine {
|
||||
width: 60%;
|
||||
width: 75%;
|
||||
height: 100%;
|
||||
padding-left: 20px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
@ -189,7 +186,7 @@ let options = computed(() => {
|
||||
}
|
||||
}
|
||||
.option {
|
||||
width: 40%;
|
||||
width: 25%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
@ -339,18 +339,18 @@ let oeeOption = computed(() => {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
margin-bottom: 5px;
|
||||
.message-mine {
|
||||
width: 60%;
|
||||
width: 65%;
|
||||
height: 100%;
|
||||
padding-left: 20px;
|
||||
padding-left: 5px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
align-items: flex-start;
|
||||
|
||||
.message-title {
|
||||
font-size: 14px;
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@ -359,13 +359,13 @@ let oeeOption = computed(() => {
|
||||
color: #999898;
|
||||
|
||||
span {
|
||||
margin-right: 15px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.option {
|
||||
width: 40%;
|
||||
width: 35%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@ -375,7 +375,7 @@ let oeeOption = computed(() => {
|
||||
|
||||
.error-chart {
|
||||
width: 100%;
|
||||
height: calc(100% - 50px);
|
||||
height: calc(100% - 55px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -5,9 +5,9 @@
|
||||
{{ tLang('common', '状态') }}
|
||||
</div>
|
||||
<div class="left-content">
|
||||
<div class="status-box" style="background-color: #22C55E;"></div>
|
||||
<div class="status-box" :style="{'background-color':stateList[props.data.state].color}"></div>
|
||||
<div class="status-text">
|
||||
运行中
|
||||
{{ stateList[props.data.state].text }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -16,25 +16,25 @@
|
||||
<div class="top-item">
|
||||
<div class="title">{{ tLang('message', '检测裁片数') }}</div>
|
||||
<div class="content">
|
||||
{{ 22 }}
|
||||
{{ props.data.checkNum }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="top-item">
|
||||
<div class="title">{{ tLang('message', '运行时长') }}</div>
|
||||
<div class="content">
|
||||
{{ "00:00:00" }}
|
||||
{{ props.data.runTime }} min
|
||||
</div>
|
||||
</div>
|
||||
<div class="top-item">
|
||||
<div class="title">{{ tLang('message', '耗电量') }}</div>
|
||||
<div class="content">
|
||||
{{ '32 kw·h' }}
|
||||
{{ props.data.electTotal+ ' kw·h' }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<span class="label">{{ tLang('message', '异常次数') }}</span>
|
||||
<span>{{ 3 }}</span>
|
||||
<span>{{ props.data.errorCount }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -43,7 +43,22 @@
|
||||
<script setup>
|
||||
import {ref, reactive } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
})
|
||||
const { proxy } = getCurrentInstance();
|
||||
|
||||
let stateList = {
|
||||
0: {color:'#cfcfcf',text:'停机中' },
|
||||
1: {color:'#F59E0B',text:'待机中' },
|
||||
2: {color:'#22C55E',text:'运行中' },
|
||||
3: {color:'#EF4444',text:'故障中' },
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@ -25,26 +25,36 @@
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
})
|
||||
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: '' },
|
||||
|
||||
|
||||
let devData = computed(() => {
|
||||
return {
|
||||
status: { 'label': proxy.tLang('home', '设备状态'), 'value': props.data.state, type: 'status' },
|
||||
scansNum: { 'label': proxy.tLang('message', '扫描次数'), 'value': props.data.outputToday, type: '' },
|
||||
runTime: { 'label': proxy.tLang('message', '运行时长'), 'value': props.data.runTime + ' min', type: '' },
|
||||
consumption: { 'label': proxy.tLang('message', '耗电量'), 'value': props.data.electTotal + ' kW·h', type: '' },
|
||||
identifyState: { 'label': proxy.tLang('message', '识别状态'), 'value': '0', type: 'status' },
|
||||
identifyNum: { 'label': proxy.tLang('message', '识别数量'), 'value': props.data.cutNum, type: '' },
|
||||
identifyTime: { 'label': proxy.tLang('message', '总识别时长'), 'value': '00:34:22', type: '' },
|
||||
ErrorNum: { 'label': proxy.tLang('message', '异常次数'), 'value': '22', type: '' },
|
||||
ErrorNum: { 'label': proxy.tLang('message', '异常次数'), 'value': props.data.errorCount, 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' },
|
||||
'0': { 'label': proxy.tLang('message', '停机中'), 'value': '1', 'color': '#cfcfcf' },
|
||||
'1': { 'label': proxy.tLang('message', '待机中'), 'value': '1', 'color': '#F59E0B' },
|
||||
'2': { 'label': proxy.tLang('message', '运行中'), 'value': '1', 'color': '#22C55E' },
|
||||
'3': { 'label': proxy.tLang('message', '故障中'), 'value': '1', 'color': '#ff6e76' },
|
||||
|
||||
|
||||
}
|
||||
@ -118,6 +128,8 @@ let statusList = {
|
||||
background: #1F2937;
|
||||
|
||||
.right-item-content {
|
||||
height: calc(100% - 20px);
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
|
||||
@ -3,13 +3,13 @@
|
||||
<div class="left">
|
||||
<div class="left-content">
|
||||
<div class="speed-box">
|
||||
<div class="speed-value">250rpm</div>
|
||||
<div class="speed-value">{{props.data.speed}} rpm</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="right-item" v-for="item in devData">
|
||||
<div class="title">{{ item['label'] }}</div>
|
||||
<div class="right-item-content" v-if="item['type'] == 'status'">
|
||||
<div class="status-box" :style="{ background: statusList[item.value]['color'] }"></div>
|
||||
@ -26,20 +26,31 @@
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
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 devData = computed(() => {
|
||||
return [
|
||||
{ 'label': proxy.tLang('home', '设备状态'), 'value': props.data.state, type: 'status' },
|
||||
{ 'label': proxy.tLang('message', '运行时长'), 'value': props.data.runTime + ' min', type: '' },
|
||||
{ 'label': proxy.tLang('message', '总产量'), 'value': props.data.outputToday, 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' },
|
||||
'0': { 'label': proxy.tLang('message', '停机中'), 'value': '1', 'color': '#cfcfcf' },
|
||||
'1': { 'label': proxy.tLang('message', '待机中'), 'value': '1', 'color': '#F59E0B' },
|
||||
'2': { 'label': proxy.tLang('message', '运行中'), 'value': '1', 'color': '#22C55E' },
|
||||
'3': { 'label': proxy.tLang('message', '故障中'), 'value': '1', 'color': '#ff6e76' },
|
||||
|
||||
|
||||
}
|
||||
|
||||
@ -8,11 +8,11 @@
|
||||
<div class="rate-info">
|
||||
<div class="ok flex-column">
|
||||
<span>OK</span>
|
||||
<span class="rate">{{ 50 }}%</span>
|
||||
<span class="rate">{{ rate.okRate+'%('+props.data.ok + '/'+rate.total+')' }} </span>
|
||||
</div>
|
||||
<div class="ng flex-column">
|
||||
<span>NG</span>
|
||||
<span class="rate">{{ 50 }}%</span>
|
||||
<span class="rate">{{ rate.ngRate+'%('+props.data.ng + '/'+rate.total+')' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -20,12 +20,32 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive } from 'vue'
|
||||
|
||||
|
||||
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {
|
||||
ok: 0,
|
||||
ng: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
const {proxy} = getCurrentInstance()
|
||||
let rate = reactive({
|
||||
okRate: 0,
|
||||
ngRate: 0,
|
||||
total: 0
|
||||
})
|
||||
let options = computed(() => {
|
||||
let total = props.data.ok + props.data.ng
|
||||
rate.okRate = ((props.data.ok / total) * 100).toFixed(1)
|
||||
rate.ngRate = 100 - rate.okRate
|
||||
rate.total = total
|
||||
return {
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
@ -60,8 +80,8 @@ let options = computed(() => {
|
||||
show: false
|
||||
},
|
||||
data: [
|
||||
{ value: 1048, name: 'OK',itemStyle: {color: '#38D380'} },
|
||||
{ value: 735, name: 'NG',itemStyle: {color: '#F05A5A'} },
|
||||
{ value: props.data.ok, name: 'OK',itemStyle: {color: '#38D380'} },
|
||||
{ value: props.data.ng, name: 'NG',itemStyle: {color: '#F05A5A'} },
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
35
src/views/screen/components/rbottom2.vue
Normal file
35
src/views/screen/components/rbottom2.vue
Normal file
@ -0,0 +1,35 @@
|
||||
<template>
|
||||
<div class="rbottom2-container">
|
||||
<div class="title">{{ tLang('device', '检测结果占比') }}</div>
|
||||
<div class="content">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import bottomTable from './bottomTable.vue'
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.title {
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
font-size: 12px;
|
||||
color: #cfcfcf;
|
||||
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 100%;
|
||||
height: calc(100% - 20px);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.rbottom2-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@ -2,27 +2,37 @@
|
||||
<div class="container">
|
||||
<div class="left">
|
||||
<div class="lt box-bg-color">
|
||||
<Ltop1></Ltop1>
|
||||
<!-- <Ltop2></Ltop2> -->
|
||||
<!-- <Ltop3></Ltop3> -->
|
||||
<Ltop1 v-if="devCode == codeList.cp" :data="info"></Ltop1>
|
||||
<Ltop2 v-else-if="devCode == codeList.pb" :data="info"></Ltop2>
|
||||
<Ltop3 v-else :data="info"></Ltop3>
|
||||
</div>
|
||||
<div class="lc">
|
||||
<!-- <Lcenter1></Lcenter1> -->
|
||||
<Lcenter2></Lcenter2>
|
||||
<Lcenter1 v-if="devCode == codeList.cp || devCode == codeList.pb"></Lcenter1>
|
||||
<Lcenter2 v-else></Lcenter2>
|
||||
</div>
|
||||
<div class="lb box-bg-color">
|
||||
<bottomTable title="检测结果" :columns="columns" :table-data="tableData"></bottomTable>
|
||||
<bottomTable title="检测结果" v-if="devCode == codeList.cp" :columns="columns" :table-data="tableData">
|
||||
<template #checkResult="scope">
|
||||
<span v-if="scope.row.checkResult == 'NG'" style="color: red">{{ scope.row.checkResult }}</span>
|
||||
<span v-else style="color: #17C27B;">{{ scope.row.checkResult }}</span>
|
||||
</template>
|
||||
</bottomTable>
|
||||
<bottomTable title="识别记录" v-else-if="devCode == codeList.pb" :columns="columns" :table-data="tableData">
|
||||
</bottomTable>
|
||||
<bottomTable title="工作记录" v-else :columns="columns" :table-data="tableData"></bottomTable>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="rt box-bg-color">
|
||||
<imageCard></imageCard>
|
||||
<imageCard :bgimage="info.file" :isRate="is_rate"></imageCard>
|
||||
</div>
|
||||
<div class="rc box-bg-color">
|
||||
<devInfo></devInfo>
|
||||
<devInfo :data="info"></devInfo>
|
||||
</div>
|
||||
<div class="rb box-bg-color">
|
||||
<Rbottom1></Rbottom1>
|
||||
<Rbottom1 v-if="devCode == codeList.cp" :data="reqOKOrNGCount"></Rbottom1>
|
||||
<bottomTable v-else title="保养提醒" :columns="remind_column" :table-data="remind_data"></bottomTable>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -38,22 +48,128 @@ import bottomTable from './components/bottomTable.vue'
|
||||
import imageCard from './components/imageCard.vue'
|
||||
import devInfo from './components/devInfo.vue'
|
||||
import Rbottom1 from './components/rbottom1.vue'
|
||||
import { device, deviceCheck, getOKOrNGList } from '@/api/pms/device'
|
||||
import { computed, reactive } from 'vue'
|
||||
|
||||
|
||||
let devCode = ref('3051903')
|
||||
let codeList = {
|
||||
cp: '3051903',//裁片
|
||||
pb: '3051502',//平板扫描
|
||||
ck: '33202006',//冲孔
|
||||
fr: '334011' //缝纫
|
||||
}
|
||||
let is_rate = ref(false)
|
||||
const columns = [
|
||||
// { type: 'selection' },
|
||||
// { type: 'index', label: '序号' },
|
||||
{ prop: 'code', label: '产品编码' },
|
||||
{ prop: 'status', label: '检查结果', slot: 'status' },
|
||||
{ prop: 'offset', label: '偏差值' },
|
||||
{ prop: 'date', label: '检测时间' },
|
||||
{ prop: 'num', label: '检测数量' },
|
||||
{ prop: 'productCode', label: '产品编码' },
|
||||
{ prop: 'checkResult', label: '检查结果', slot: 'checkResult', width: '80px' },
|
||||
{ prop: 'deviationValue', label: '偏差值' },
|
||||
{ prop: 'ts', label: '检测时间' },
|
||||
{ prop: 'checkNum', label: '检测数量' },
|
||||
]
|
||||
|
||||
let remind_column = [
|
||||
{ prop: 'devCode', label: '编码', width: '60px' },
|
||||
{ prop: 'name', label: '设备名称', },
|
||||
{ prop: 'subject', label: '保养内容', },
|
||||
{ prop: 'person', label: '负责人', width: '60px' },
|
||||
{ prop: 'time', label: '保养时间', width: '75px' }
|
||||
]
|
||||
let remind_data = ref()
|
||||
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' }
|
||||
])
|
||||
|
||||
|
||||
let info = reactive({
|
||||
name: '',
|
||||
devCode: '',
|
||||
file: '',
|
||||
checkTime: '',
|
||||
state: 0,
|
||||
checkNum: 0,
|
||||
runTime: 0,
|
||||
errorCount: 0,
|
||||
electTotal: 0,
|
||||
speed: 0,
|
||||
output: 0,
|
||||
outputToday: 0,
|
||||
cutNum: 0
|
||||
})
|
||||
//获取设备信息
|
||||
function getDevice() {
|
||||
device({ devCode: devCode.value }).then(res => {
|
||||
info.name = res.data.name
|
||||
info.devCode = res.data.code
|
||||
info.file = res.data.file
|
||||
info.checkTime = res.data.checkTime
|
||||
info.state = res.data.state
|
||||
info.checkNum = res.data.checkNum || 0
|
||||
info.runTime = res.data.runTime
|
||||
info.errorCount = res.data.errorCount
|
||||
info.electTotal = res.data.electTotal || 0
|
||||
info.output = res.data.output
|
||||
info.outputToday = res.data.outputToday
|
||||
info.cutNum = res.data.cutNum || 0
|
||||
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
let reqOKOrNGCount = computed(() => {
|
||||
let ok = 0
|
||||
let ng = 0
|
||||
tableData.value.forEach(item => {
|
||||
if (item.checkResult == 'OK') {
|
||||
ok++
|
||||
} else {
|
||||
ng++
|
||||
|
||||
}
|
||||
})
|
||||
|
||||
return {
|
||||
ok,ng
|
||||
}
|
||||
})
|
||||
//裁片视觉检测 工作记录
|
||||
function reqOKOrNGList() {
|
||||
getOKOrNGList({ devCode: devCode.value }).then(res => {
|
||||
tableData.value = res.data
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**获取保养记录 */
|
||||
function getDeviceCheck() {
|
||||
deviceCheck(devCode.value).then(res => {
|
||||
remind_data.value = res.data
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
function init() {
|
||||
getDevice()
|
||||
getDeviceCheck()
|
||||
if (devCode.value == codeList.cp) {
|
||||
reqOKOrNGList()
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
// devCode.value = localStorage.getItem('devStorage')?JSON.parse(localStorage.getItem('devStorage')).devCode:""
|
||||
|
||||
init()
|
||||
if (devCode.value == '33202006') {
|
||||
is_rate.value = true
|
||||
} else if (devCode.value == '334011') {
|
||||
is_rate.value = true
|
||||
} else {
|
||||
is_rate.value = false
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@ -64,6 +180,7 @@ let tableData = ref([
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 100vw;
|
||||
height: calc(100vh - 50px);
|
||||
@ -74,6 +191,7 @@ let tableData = ref([
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.left {
|
||||
width: 65.5vw;
|
||||
height: 100%;
|
||||
@ -81,19 +199,23 @@ let tableData = ref([
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.lt {
|
||||
width: 100%;
|
||||
height: 24.4%;
|
||||
}
|
||||
|
||||
.lc {
|
||||
width: 100%;
|
||||
height: 36.2%;
|
||||
}
|
||||
|
||||
.lb {
|
||||
width: 100%;
|
||||
height: 33.4%;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
width: 32.6vw;
|
||||
height: 100%;
|
||||
@ -101,14 +223,17 @@ let tableData = ref([
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.rt {
|
||||
width: 100%;
|
||||
height: 29.2%;
|
||||
}
|
||||
|
||||
.rc {
|
||||
width: 100%;
|
||||
height: 27.8%;
|
||||
}
|
||||
|
||||
.rb {
|
||||
width: 100%;
|
||||
height: 37.6%;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user