加工数+目标数的组件+设备状态的组件

haoxuan

2023-10-31 778c10923ce7adf233f8a6b820d5824aa2402843

加工数+目标数的组件+设备状态的组件

 src/api/plc.ts

@@ -2,5 +2,7 @@
  finishNumber: number
  totalNumber: number
  /** 1断开 2生产中 3待机*/
  plcStatus: 1 | 2 | 3
  // plcStatus: 1 | 2 | 3,
  plcStatus: 1
  plcNotConnected: String
}

 src/api/task.ts

@@ -16,6 +16,7 @@
  startTime: number
  endTime: number
  Status: number
  finishNumber: number
}

export interface Procedure {

 src/components.d.ts

@@ -12,6 +12,7 @@
    ElCollapse: typeof import('element-plus/es')['ElCollapse']
    ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
    ElIcon: typeof import('element-plus/es')['ElIcon']
    ElPopover: typeof import('element-plus/es')['ElPopover']
    ElProgress: typeof import('element-plus/es')['ElProgress']
    ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
    ElStep: typeof import('element-plus/es')['ElStep']

 src/views/dashboard/components/ColorInfo.vue

New file
@@ -0,0 +1,72 @@
<template>
  <div class="color-info">
    <div v-if="type == 1" class="color-one">
      加工数({{ order.unit }})
      <span>{{ order.finishNumber || 0 }}</span>
    </div>
    <div v-else class="color-two">
      目标({{ order.unit }})
      <span> {{ order.amount || 0 }}</span>
    </div>
  </div>
</template>
<script setup lang="ts">
import { toRefs } from 'vue'
import type { Order } from '@/api/task'

export interface ColorInfoProps {
  order: Order
  type?: Number
}

const props = defineProps<ColorInfoProps>()
const { order, type } = toRefs(props)
</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>

 src/views/dashboard/components/DeviceStatusInfo.vue

New file
@@ -0,0 +1,155 @@
<template>
  <div class="device-status-info">
    <div v-if="type == 1" class="color-one">
      设备状态
      <!-- 1断开2生产3待机 -->
      <span v-if="device.plcStatus" class="device-m">
        <el-popover
          v-if="device.plcStatus == 1 && device.plcNotConnected"
          :width="180"
          placement="top-end"
          trigger="click"
        >
          <template #reference>
            <el-icon class="duan">
              <Link />
            </el-icon>
            断开
          </template>
          {{ device.plcNotConnected }}
        </el-popover>
        <span v-else>
          <el-icon v-if="device.plcStatus == 1 && !device.plcNotConnected" class="duan">
            <Link />
          </el-icon>
          <el-icon v-else class="lian">
            <Link />
          </el-icon>
          <!-- :class="{
              'status-running': device.plcStatus == 2,
              'status-off': device.plcStatus != 2,
            }" -->
          <span class="status-running">
            {{ device.plcStatus == 1 ? '断开' : device.plcStatus == 2 ? '生产中' : '待机' }}
          </span>
        </span>
      </span>
      <div class="device-b">运行时间：1天1小时23分12秒</div>
    </div>
    <div v-if="type == 2" class="color-two">
      集群状态
      <!-- 1断开2生产3待机 -->
      <span v-if="device.plcStatus" class="device-m">
        <el-popover
          v-if="device.plcStatus == 1 && device.plcNotConnected"
          :width="180"
          placement="top-end"
          trigger="click"
        >
          <template #reference>
            <el-icon class="duan">
              <CircleCloseFilled />
            </el-icon>
            断开
          </template>
          {{ device.plcNotConnected }}
        </el-popover>
        <span v-else>
          <el-icon v-if="device.plcStatus == 1 && !device.plcNotConnected" class="duan">
            <CircleCloseFilled />
          </el-icon>
          <el-icon v-else class="lian">
            <SuccessFilled />
          </el-icon>
          <!-- :class="{
              'status-running': device.plcStatus == 2,
              'status-off': device.plcStatus != 2,
            }" -->
          <span class="status-running">
            {{ device.plcStatus == 1 ? '断开' : device.plcStatus == 2 ? '在线' : '待机' }}
          </span>
        </span>
      </span>
      <div class="device-b">运行时间：1天1小时23分12秒</div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { toRefs } from 'vue'
import { Link, CircleCloseFilled, SuccessFilled } from '@element-plus/icons-vue'
import type { PLCResponse } from '@/api/plc'

export interface DeviceStatusInfoProps {
  device: PLCResponse
  type?: Number
}

const props = defineProps<DeviceStatusInfoProps>()
const { device, type } = toRefs(props)
</script>

<style scoped lang="scss">
$status-default: #13235a;
$status-running: #00ff00f0;
$status-ready: #13235a;
$status-done: #2c5dbb82;
$status-border: #ffffff21;
$status-dark-font: #efefef;
$status-off: red;
.device-status-info {
  width: calc(50% - 5px);
  height: 150px;
  line-height: 40px;
  background: $status-done;
  margin-top: 10px;
  border-radius: 4px;
  color: #fff;
  border: 1px solid $status-border;
  box-sizing: border-box;
  overflow: hidden;
  float: left;
  text-align: center;
  font-size: 15px;

  .duan {
    color: $status-off;
    font-size: 26px;
    margin-right: 5px;
    margin-top: 2px;
    float: left;
  }
  .lian {
    color: $status-running;
    font-size: 26px;
    margin-right: 5px;
    float: left;
    margin-top: 2px;
  }
  .color-one,
  .color-two {
    height: 100%;
    width: 100%;
    margin-right: 10px;
    .device-m {
      width: 100%;
      display: inline-block;
      font-size: 15px;
      line-height: 25px;
      span {
        display: inline-block;
        line-height: 30px;
      }
    }
    .device-b {
      font-size: 12px;
      margin-top: 10px;
      width: 100%;
      line-height: 25px;
      color: $status-dark-font;
    }
  }
  .color-two {
    margin-left: 10px;
  }
}
</style>

 src/views/dashboard/components/ProcessInfo.vue

@@ -5,31 +5,30 @@
    </div>
    <div class="item-r">
      <div class="item-r-t font_weight">{{ process.number }}</div>
      <div class="item-r-b">{{ process.name }}</div>
      <div class="item-r-b">{{ process.name }}</div>
      <div class="item-r-b">{{ process.product }}</div>
      <div class="item-r-b">{{ process.procedure }}</div>
    </div>
    <div class="tip-r">
    <div v-if="process.isUpdate" class="tip-r">
      <img src="~@/assets/images/process-tip.png" />
    </div>
    <div class="tip-current">当前使用</div>
    <div v-if="process.isUpdate" class="tip-current">当前使用</div>
    <div class="btn">
      <el-button type="primary" class="color_organge"> 更新工艺</el-button>
      <el-button type="primary" class="color_organge"> 更新工艺 </el-button>
    </div>
  </div>
</template>
<script setup lang="ts">
import { computed, toRefs } from 'vue'
export interface ProcessInfoProps {
  process?: process
}

const props = defineProps<ProcessInfoProps>()
import { toRefs } from 'vue'
const props = defineProps<{
  process: { product: '产品名称'; number: '111'; procedure: '工艺名称'; isUpdate: true }
}>()
const { process } = toRefs(props)
</script>

<style scoped lang="scss">
$status-running: #f76c0f;
$status-done: #2c5dbb82;
$status-ready: #00ff00f0;
.font_weight {
  font-weight: 600;
}
@@ -88,7 +87,7 @@
  }

  .tip-current {
    background: green;
    background: $status-ready;
    color: #fff;
    position: absolute;
    top: 0px;

 src/views/dashboard/index.vue

@@ -23,6 +23,8 @@
      <div class="task-detail">
        <TaskControl :task="activeTask"></TaskControl>
      </div>
      <ColorInfo :order="order" :type="1"></ColorInfo>
      <ColorInfo :order="order" :type="2"></ColorInfo>
    </template>
    <template #middleBlock4>
      <SubTitle>人员信息</SubTitle>
@@ -33,7 +35,10 @@
        <CurrentDateTime></CurrentDateTime>
      </div>
    </template>
    <template #rightBlock2>状态面板</template>
    <template #rightBlock2>
      <DeviceStatusInfo :device="device" :type="1"></DeviceStatusInfo>
      <DeviceStatusInfo :device="device" :type="2"></DeviceStatusInfo>
    </template>
    <template #rightBlock3>
      <SubTitle>知识库</SubTitle>
    </template>
@@ -42,9 +47,12 @@
<script setup lang="ts">
import { computed, ref } from 'vue'
import ChannelCollapse from '@/views/dashboard/components/ChannelCollapse.vue'
import type { Worker } from '@/api/task'
import type { Worker, Order } from '@/api/task'
import type { PLCResponse } from '@/api/plc'
import PersonInfo from '@/views/dashboard/components/PersonInfo.vue'
import ProcessInfo from '@/views/dashboard/components/ProcessInfo.vue'
import ColorInfo from '@/views/dashboard/components/ColorInfo.vue'
import DeviceStatusInfo from '@/views/dashboard/components/DeviceStatusInfo.vue'
import type { LabelValue } from '@/views/dashboard/components/TaskTabs.vue'
import TaskTabs from '@/views/dashboard/components/TaskTabs.vue'
import CurrentDateTime from '@/views/dashboard/components/CurrentDateTime.vue'
@@ -65,7 +73,21 @@
  } as unknown as Worker
})
const process = computed(() => {
  return { name: '工艺名称', number: '111' }
  return { product: '产品名称', number: '111', procedure: '工艺名称', isUpdate: true }
})

const order = computed(() => {
  return {
    finishNumber: 0,
    unit: '个',
    amount: '10'
  } as unknown as Order
})
const device = computed(() => {
  return {
    plcStatus: 1,
    plcNotConnected: false
  } as unknown as PLCResponse
})
const taskTabsList = [
  {