feat: 添加设备配置弹窗, 调整任务控制弹窗适配无工艺参数时允许不允许生产的情况

songshankun

2023-11-09 2096f22b858727a449947ffaa68197ad96104d71

feat: 添加设备配置弹窗, 调整任务控制弹窗适配无工艺参数时允许不允许生产的情况

 src/api/device.ts

@@ -1,6 +1,8 @@
export interface DeviceMap {
  deviceID: string
  deviceName: string
  /** true时没有工艺参数不允许下发  false时没有工艺参数允许下发*/
  needSetProcessParams: boolean
}

export interface Devices {

 src/api/index.ts

@@ -120,16 +120,31 @@
}

/**
 * 获取当前面板绑定的设备列表
 * 设定当前设备
 */
export function apiSetCurrentDevice(data: SetCurrentDeviceParams) {
  return request<BaseResponse<Devices>>({
  return request<BaseResponse>({
    url: `/v1/device/setCurrentDeviceId`,
    method: 'post',
    data
  })
}

export interface SetCurrentDeviceConfigParams {
  needSetProcessParams: boolean
}

/**
 * 设定当前设备配置
 */
export function apiSetCurrentDeviceConfig(data: SetCurrentDeviceConfigParams) {
  return request<BaseResponse>({
    url: `/v1/device/config`,
    method: 'post',
    data
  })
}

export interface CraftModelListParams {
  procedureId: number
  page: number

 src/components.d.ts

@@ -19,6 +19,8 @@
    ElPopconfirm: typeof import('element-plus/es')['ElPopconfirm']
    ElPopover: typeof import('element-plus/es')['ElPopover']
    ElProgress: typeof import('element-plus/es')['ElProgress']
    ElRadio: typeof import('element-plus/es')['ElRadio']
    ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
    ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
    ElStep: typeof import('element-plus/es')['ElStep']
    ElSteps: typeof import('element-plus/es')['ElSteps']

 src/stores/devices.ts

@@ -10,6 +10,14 @@
    return deviceRes?.value?.data as Devices
  })

  // 当前设备在缺少工艺参数的时候是否允许下发生产
  const currentDeviceAllowNoParams = computed(() => {
    const currentDeviceInfo = deviceInfo.value.deviceList?.find((ele) => {
      return ele.deviceID === deviceInfo.value.currentDeviceID
    })
    return !currentDeviceInfo?.needSetProcessParams
  })

  /**
   * 如果任务状态是进行中, 则轮询 plc 取进度
   */
@@ -28,5 +36,5 @@
    startDevicePolling()
  }

  return { deviceInfo, startPollingDevice }
  return { deviceInfo, startPollingDevice, currentDeviceAllowNoParams }
})

 src/views/dashboard/components/DashboardTitle.vue

@@ -26,10 +26,15 @@
          <IconCloudOff></IconCloudOff>
        </el-icon>
      </div>

      <div class="params-config" @click="openConfigModal">
        <el-icon size="28"><Setting /></el-icon>
      </div>
    </div>
  </div>
  <DeviceCheckList v-model="showDevicesModal" @should-reload="emits('shouldReload')"></DeviceCheckList>
  <TroubleTrackerModal v-model="showProblemsModal" :problems="problemList"></TroubleTrackerModal>
  <DeliverParamsConfigModal v-model="showConfigModal"></DeliverParamsConfigModal>
</template>
<script setup lang="ts">
import AlertLightIcon from '@/components/icons/AlertLightIcon.vue'
@@ -43,6 +48,8 @@
import { useRequest } from 'vue-hooks-plus'
import { apiGetProblemList } from '@/api'
import { PROBLEMS_POLLING_DURATION } from '@/common/constants'
import { Setting } from '@element-plus/icons-vue'
import DeliverParamsConfigModal from '@/views/dashboard/components/DeliverParamsConfigModal.vue'

const emits = defineEmits<{
  shouldReload: []
@@ -98,6 +105,14 @@
  return cloudConnection ? cloudConnection?.CheckResult : true
})

// 配置下发参数弹窗
const showConfigModal = ref(false)
function openConfigModal() {
  showConfigModal.value = true
}
function closeConfigModal() {
  showConfigModal.value = false
}
/**
 * 轮询问题诊断
 */
@@ -143,4 +158,10 @@
  font-size: 40px;
  color: #fff;
}
.cloud-connection-status {
  margin-right: 10px;
}
.params-config {
  cursor: pointer;
}
</style>

 src/views/dashboard/components/DeliverParamsConfigModal.vue

New file
@@ -0,0 +1,96 @@
<template>
  <div class="deliver-params-config-modal">
    <CommonModal v-model="modelData" @close="modelData = false">
      <template #title>配置</template>
      <div class="config-content">
        <el-radio-group v-model="config" class="config-radio-group">
          <el-radio :label="false" size="large">无工艺参数，不允许下发生产任务</el-radio>
          <el-radio :label="true" size="large">无工艺参数，允许下发生产任务</el-radio>
        </el-radio-group>
      </div>
      <template #footer>
        <div class="config-footer">
          <BigButton class="btn" bg-color="#0dfde6" color="#333333" @click="setConfig">保存</BigButton>
        </div>
      </template>
    </CommonModal>
  </div>
</template>
<script setup lang="ts">
import BigButton from '@/views/dashboard/components/BigButton.vue'
import { useVModel } from '@vueuse/core'
import { ref, watch } from 'vue'
import { useDevicesStore } from '@/stores/devices'
import { storeToRefs } from 'pinia'
import { apiSetCurrentDeviceConfig } from '@/api'
import { ElMessage } from 'element-plus'
const props = withDefaults(
  defineProps<{
    modelValue: boolean
  }>(),
  {
    modelValue: false
  }
)

const emit = defineEmits<{
  'update:modelValue': [show: boolean]
}>()
const modelData = useVModel(props, 'modelValue', emit)
const deviceStore = useDevicesStore()
const { currentDeviceAllowNoParams } = storeToRefs(deviceStore)
watch(modelData, () => {
  // 打开弹窗时初始化选中项
  if (modelData.value) {
    config.value = currentDeviceAllowNoParams.value
  }
})

const config = ref(false)

function setConfig() {
  apiSetCurrentDeviceConfig({
    // 选中允许下发即不需要工艺参数 ,这俩是反的
    needSetProcessParams: !config.value
  })
    .then(() => {
      ElMessage({
        message: '设置成功',
        type: 'success',
        duration: 3 * 1000
      })
      modelData.value = false
      deviceStore.startPollingDevice()
    })
    .catch((err) => {
      console.error(err)
    })
}
</script>
<style scoped lang="scss">
.config-content {
  padding: 10px 20px;
}
.config-radio-group {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  :deep(.el-radio__label) {
    color: #fff;
  }
}
.config-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  .btn {
    height: 40px;
    width: 100px;
    font-size: 14px;
    font-weight: 500;
    line-height: 40px;
    border-radius: 4px;
  }
}
</style>

 src/views/dashboard/components/TaskControlModal.vue

@@ -40,6 +40,10 @@

                    <div class="info-item-two">
                      <div style="color: #4efefa; font-size: 18px; margin-bottom: 10px; margin-top: 20px">工艺参数</div>
                      <!-- 未获取到工艺参数, 且当前设备允许在没有工艺参数的情况下生产, 则提示-->
                      <div v-if="getCraftParamsTip && currentDeviceAllowNoParams" class="info-item info-item-two">
                        未获取到工艺参数, 请手动设置或在云端工艺模型中上传
                      </div>
                      <div v-for="(item, index) in craftParams" :key="index" class="info-item info-item-two">
                        {{ item.Key }}：{{ item.Value || '' }}
                      </div>
@@ -52,7 +56,7 @@
        </template>

        <!--        只有获取到工艺参数才可以进行操作-->
        <template v-if="getCraftParamsTip">
        <template v-if="getCraftParamsTip && !currentDeviceAllowNoParams">
          <div class="content-tips">
            <div class="craft-params-error">
              <div class="error-icon">
@@ -108,7 +112,7 @@
        </template>
      </div>
      <template #footer>
        <template v-if="getCraftParamsTip">
        <template v-if="getCraftParamsTip && !currentDeviceAllowNoParams">
          <div class="btn">
            <BigButton bg-color="#4765c0" @click="closeModal"> 关闭 </BigButton>
          </div>
@@ -160,6 +164,7 @@
import { createMachine } from 'xstate'
import { useMachine } from '@xstate/vue'
import { CircleCloseFilled, Loading, SuccessFilled } from '@element-plus/icons-vue'
import { useDevicesStore } from '@/stores/devices'

export interface TaskControlModalProps {
  task?: Task
@@ -196,7 +201,8 @@
const craftParams = ref<CraftParam[]>()
// 获取工艺参数结果信息
const getCraftParamsTip = ref('')

// 当前设备若没有工艺参数是否允许下发
const { currentDeviceAllowNoParams } = storeToRefs(useDevicesStore())
/**
 * 获取当前展示的任务的工艺参数
 */
@@ -204,6 +210,7 @@
  if (taskId) {
    craftParams.value = []
    getCraftParamsTip.value = ''

    getCraftParams({ id: taskId }).then(
      (res) => {
        craftParams.value = res.data.Params ?? []