更新样式

gaosp

2024-01-16 e48137c53bd78960f98434436cd2de3303ccf9e8

 src/container/workshop/device.vue

@@ -1,13 +1,13 @@
<!--
 * @Date: 2024-01-13 20:46:33
 * @LastEditors: Sneed
 * @LastEditTime: 2024-01-13 21:37:22
 * @LastEditTime: 2024-01-16 01:08:39
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/mdc/src/container/workshop/device.vue
-->
<template>
    <div class="device-item">
        <el-checkbox class="care" v-model="care" @change="change"></el-checkbox>
        <p>YKX123123213</p>
        <p>{{ machineName }}</p>
        <div class="device-item-box">
            <div class="img">
                <span class="img-status" v-if="item.status === 'STOP'">停机</span>
@@ -20,21 +20,21 @@
                <li>
                    <img src="./img/sd.png" alt="">
                    <div>
                        <p>{{ item.cycleCount }}</p>
                        <p>{{ efficiency}}</p>
                        <p>能力利用率</p>
                    </div>
                </li>
                <li>
                    <img src="./img/sd.png" alt="">
                    <div>
                        <p>{{ item.cycleCount }}</p>
                        <p>{{ utilizationDaily}}</p>
                        <p>日利用率</p>
                    </div>
                </li>
                <li>
                    <img src="./img/sd.png" alt="">
                    <div>
                        <p>{{ item.cycleCount }}</p>
                        <p>{{ info.cycleCount}}</p>
                        <p>完工件数</p>
                    </div>
                </li>
@@ -45,18 +45,64 @@
<script>
import { getRequest,getUrl } from '@/api/Api'
export default {
    props: ['item'],
    props: {
        id: {
            type: [String,Number]
        },
        info: {
            type: Object,
            default: function () {
                return {}
            }
        },
        deviceList: {
            type: Array,
            default: function() {
                return []
            }
        },
        plantDeviceList: {
            type: Array,
            default: function() {
                return []
            }
        }
    },
    data () {
        return {
            care: false,
            item: {}
        }
    },
    computed: {
        efficiency () {
            return this.info.efficiency || 0
        },
        utilizationDaily () {
            return this.info.utilizationDaily || 0
        },
        cycleCount () {
            return this.info.cycleCount || 0
        },
        machineName () {
            try {
                let arr = [...this.deviceList,...this.plantDeviceList]
                return arr.find(item => item.machineId=== this.id).machineName
            } catch (error) {
                return this.id
            }
             
        }
    },
    methods: {
        change (val) {
            console.log(val)
            getRequest('machineConcern',{concern: val ? 1 : 0,id: this.item.id}).then(res => {
            getRequest('machineConcern',{concern: val ? 1 : 0,id: this.id}).then(res => {
                console.log(res)
            })
        },
        getInfo () {
            this.item = {}
        }
    },
}
@@ -89,10 +135,11 @@
    &>p:before {
        content: '';
        position: absolute;
        z-index: 0;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        width: 60px;
        width: 30px;
        height: 1px;
        background: linear-gradient(270deg, #65A5D6 0%, rgba(11,70,115,0) 100%);
    }
@@ -102,7 +149,7 @@
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        width: 60px;
        width: 30px;
        height: 1px;
        background: linear-gradient(90deg, #65A5D6 0%, rgba(11,70,115,0) 100%);
    }