feat: 添加工艺列表接口,工艺详情弹窗未完成

songshankun

2023-11-02 19378c283f19ee0b023b3cd73fbdd331eed2fe17

feat: 添加工艺列表接口,工艺详情弹窗未完成

 src/api/craftModel.ts

New file
@@ -0,0 +1,19 @@
export interface ParamsMap {
  [keyProp: string]: string
}

export interface CraftModel {
  ID: number
  CreatedAt: string
  UpdatedAt: string
  DeletedAt: string
  number: string
  product: string
  procedure: string
  Params: string
  paramsMap: ParamsMap
  deviceId: string
  isUpdate: boolean
  newParamsMap: string
  newNumber: string
}

 src/api/index.ts

@@ -2,6 +2,7 @@
import type { CraftParamsResponse, TasksGroupByChannel } from './task'
import type { PLCResponse } from './plc'
import type { Devices } from './device'
import type { CraftModel } from './craftModel'

export interface BaseResponse<T = any> {
  code: number
@@ -105,3 +106,38 @@
    method: 'get'
  })
}

export interface CraftModelListParams {
  procedureId: number
  page: number
  pageSize: number
  number: string
}

/**
 * 获取工艺模型列表
 * @param params
 */
export function apiGetCraftModelList(params: CraftModelListParams) {
  return request<BaseResponse<CraftModel[]>>({
    url: '/v1/processModel/list',
    method: 'get',
    params
  })
}

export interface UpdateCraftPrams {
  procedureId: number
}

/**
 * 更新工艺模型
 * @param params
 */
export function updateCraftParams(params: UpdateCraftPrams) {
  return request<BaseResponse>({
    url: '/v1/task/updateProcessParams',
    method: 'post',
    data: params
  })
}

 src/api/task.ts

@@ -105,6 +105,6 @@
}

export interface CraftParamsResponse {
  number: string
  Number: string
  Params: CraftParam[]
}

 src/stores/craftModel.ts

New file
@@ -0,0 +1,24 @@
import { ref, computed } from 'vue'
import { defineStore } from 'pinia'
import type { CraftModel } from '@/api/craftModel'
import { apiGetCraftModelList } from '@/api'
import { useTasksStore } from '@/stores/tasks'

export const useCraftModelStore = defineStore('craftModel', () => {
  const craftModelList = ref<CraftModel[]>()
  const taskStore = useTasksStore()
  function getCraftModelList() {
    if (taskStore.activeTask?.Procedure.ID) {
      apiGetCraftModelList({
        procedureId: taskStore.activeTask?.Procedure.ID,
        page: 1,
        pageSize: 999,
        number: taskStore.activeTask?.Procedure?.processModelNumber
      }).then((res) => {
        craftModelList.value = res.data ?? []
      })
    }
  }

  return { craftModelList, getCraftModelList }
})

 src/stores/tasks.ts

@@ -123,22 +123,6 @@
    activeTask.value = task
  }

  const requestParamsMap = ref<{
    [channel: number]: TaskListParams
  }>({})
  function getParamsByChannel(channel: number) {
    return (
      requestParamsMap.value[channel] ?? {
        type: 1,
        offset: 0,
        limit: 3
      }
    )
  }

  function setParamsByChannel(channel: number, params: TaskListParams) {
    requestParamsMap.value[channel] = params
  }
  return {
    channels,
    getChannels,
@@ -146,9 +130,6 @@
    activeTask,
    reload,
    setActiveTask,
    requestParamsMap,
    getParamsByChannel,
    setParamsByChannel,
    moreChannelTasksBtn,
    foldChannelTasksBtn
  }

 src/views/dashboard/components/CraftDetailModal.vue

New file
@@ -0,0 +1,35 @@
<template>
  <div class="craft-detail-modal">
    <BaseModal v-model="modelData" :wider="true" @close="closeModal">
      <template #title>工艺详情 </template>
      <div class="modal-content">
        <el-scrollbar always class="scroller">
          <div class="trouble"></div>
        </el-scrollbar>
      </div>
    </BaseModal>
  </div>
</template>
<script setup lang="ts">
import { useVModel } from '@vueuse/core'

export interface CraftDetailModalProps {
  modelValue: boolean
}
const props = withDefaults(defineProps<CraftDetailModalProps>(), {
  modelValue: false
})
const emit = defineEmits<{
  'update:modelValue': [show: boolean]
  close: []
}>()
const modelData = useVModel(props, 'modelValue', emit)

function closeModal() {
  emit('close')
}

//TODO: 工艺详情弹窗
</script>

<style scoped lang="scss"></style>

 src/views/dashboard/components/ProcessInfo.vue

@@ -3,26 +3,39 @@
    <div class="item-l-bng">
      <img src="~@/assets/images/process-model.png" />
    </div>
    <div class="item-r">
      <div class="item-r-t font_weight">{{ process.number }}</div>
      <div class="item-r-b">{{ process.product }}</div>
      <div class="item-r-b">{{ process.procedure }}</div>
    <div class="item-r" @click="onDetailClick">
      <div class="item-r-t font_weight">{{ craftModel.number }}</div>
      <div class="item-r-b">产品: {{ craftModel.product }}</div>
      <div class="item-r-b">工艺: {{ craftModel.procedure }}</div>
    </div>
    <div v-if="process.isUpdate" class="tip-r">
    <div v-if="craftModel.isUpdate" class="tip-r">
      <img src="~@/assets/images/process-tip.png" />
    </div>
    <div v-if="process.isUpdate" class="tip-current">当前使用</div>
    <div v-if="craftModel.isUpdate" class="tip-current">当前使用</div>
    <div class="btn">
      <el-button type="primary" class="color_organge"> 更新工艺 </el-button>
      <el-button type="primary" class="color_organge" @click="onUpdateClick"> 更新工艺 </el-button>
    </div>
  </div>
</template>
<script setup lang="ts">
import { toRefs } from 'vue'
import type { CraftModel } from '@/api/craftModel'
const props = defineProps<{
  process: { product: '产品名称'; number: '111'; procedure: '工艺名称'; isUpdate: true }
  craftModel: CraftModel
}>()
const { process } = toRefs(props)
const { craftModel } = toRefs(props)

const emit = defineEmits<{
  update: [craftModel: CraftModel]
  detail: [craftModel: CraftModel]
}>()

function onDetailClick() {
  emit('detail', craftModel)
}
function onUpdateClick() {
  emit('update', craftModel)
}
</script>

<style scoped lang="scss">

 src/views/dashboard/components/TaskControlModal.vue

@@ -335,7 +335,7 @@
  send('开始生产')

  sendProcessParams({
    procedureId: task.value.Procedure.ID
    procedureId: task!.value!.Procedure.ID
  })
    .then(
      (res) => {

 src/views/dashboard/index.vue

@@ -15,7 +15,12 @@
          <ProcessingInfo style="margin-top: 6px" :task="activeTask"></ProcessingInfo>
        </el-tab-pane>
        <el-tab-pane label="工艺信息" name="工艺信息">
          <ProcessInfo :process="process"></ProcessInfo>
          <ProcessInfo
            v-for="item in craftModelStore.craftModelList"
            :key="item.ID"
            :craft-model="item"
            @detail="openCraftModelDetailModal"
          ></ProcessInfo>
        </el-tab-pane>
        <el-tab-pane label="物料清单" name="物料清单">
          <InputMaterialsList></InputMaterialsList>
@@ -51,12 +56,12 @@
      <BigButton class="btn" bg-color="red">红灯呼叫</BigButton>
    </template>
  </DashboardLayout>
  <CraftDetailModal v-model="showCraftModelDetail" @close="showCraftModelDetail = false"></CraftDetailModal>
</template>
<script setup lang="ts">
import { computed, ref, watch, onUnmounted } from 'vue'
import { computed, ref, watch } from 'vue'
import ChannelCollapse from '@/views/dashboard/components/ChannelCollapse.vue'
import type { Worker, Order, Task } 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'
@@ -77,6 +82,8 @@
import DashboardTitle from '@/views/dashboard/components/DashboardTitle.vue'
import { usePLCStore } from '@/stores/plc'
import { useDevicesStore } from '@/stores/devices'
import { useCraftModelStore } from '@/stores/craftModel'
import CraftDetailModal from '@/views/dashboard/components/CraftDetailModal.vue'

defineOptions({
  name: 'DashboardView'
@@ -99,12 +106,7 @@
    amount: '10'
  } as unknown as Order
})
const device = computed(() => {
  return {
    plcStatus: 1,
    plcNotConnected: false
  } as unknown as PLCResponse
})

const taskTabsList = [
  {
    label: '未完成',
@@ -130,16 +132,31 @@
  tasksStore.getChannels(tab.value)
}

/**
 * 完成任务或者下发参数成功后要刷新通道数据
 * @param task
 */
function reloadAllData(task: Task) {
  tasksStore.reload(task.Channel)
}

const plcStore = usePLCStore()
// 启动plc 轮询
const plcStore = usePLCStore()
plcStore.startPollingPLC()

// 启动 设备 轮询
const deviceStore = useDevicesStore()
deviceStore.startPollingDevice()

// 切换任务时获取对应任务的工艺模型信息
const craftModelStore = useCraftModelStore()
watch(activeTask, () => {
  craftModelStore.getCraftModelList()
})

const showCraftModelDetail = ref(false)
function openCraftModelDetailModal() {
  console.log(1)
  showCraftModelDetail.value = true
}
</script>

<style scoped lang="scss">