feat: 添加获取/设定设备配置接口,添加设备配置弹窗,生产弹窗添加根据配置决定是否允许无工艺参数生产

songshankun

2023-11-10 0d4b65b968fdbf59cc9c0b0b2ca2091b4fc6c4ba

feat: 添加获取/设定设备配置接口,添加设备配置弹窗,生产弹窗添加根据配置决定是否允许无工艺参数生产

 src/api/home/index.js

@@ -1,6 +1,6 @@
import request from "@/utils/request";
import axios from "axios"
// 获取网络配置 
// 获取网络配置
export const NetworkCard = () => {
  return request({
    url: "/v1/config/net",
@@ -15,7 +15,7 @@
    data
  });
};
// 获取生产进度 
// 获取生产进度
export const getProgress = (data) => {
  return request({
    url: "/v1/plc/productProgress",
@@ -31,29 +31,29 @@
    method: "get",
  });
};
// 添加 pLC品牌 
// 添加 pLC品牌
export const addMiniDict = () => {
  return request({
    url: "/v1/plcBrand/add",
    method: "post",
  });
};
// 删除 pLC品牌 
// 删除 pLC品牌
export const deleteMiniDict = (data) => {
  return request({
    url: `v1/plcBrand/delete/${data.id}`,
    

    method: "delete",
  });
};
// 更新 pLC品牌 
// 更新 pLC品牌
export const updateMiniDict = () => {
  return request({
    url: "/v1/plcBrand/update",
    method: "put",
  });
};
// 获取plc 
// 获取plc
export const getPlc = () => {
  return request({
    url: "/v1/config/plc",
@@ -115,7 +115,7 @@
    data,
  });
};
//获取未任务 
//获取未任务
export const getTaskUnStarted = (data) => {
  return request({
    url: "/v1/task/get/unStarted?page="+data.page+'&pageSize='+data.pageSize,
@@ -140,3 +140,24 @@
    data,
  });
};

/**
 * 获取当前面板绑定的设备列表
 */
export function getDeviceList() {
  return request({
    url: `/v1/device/list`,
    method: 'get'
  })
}

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

 src/components/ParamsConfigModal.vue

New file
@@ -0,0 +1,142 @@
<template>
<div class="params-config-modal">
  <el-dialog
    title="配置"
    :visible.sync="visible"
    width="30%"
    :before-close="handleClose">
    <div class="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>
    <span slot="footer" class="dialog-footer">
    <el-button class="submit" @click="setConfig">确 定</el-button>
  </span>
  </el-dialog>
</div>
</template>

<script>
import {apiSetCurrentDeviceConfig, getDeviceList} from "@/api/home";
import {Message} from "element-ui";

export default {
  name: "ParamsConfigModal",
  props:{
    visible:{
      type: Boolean,
      default:false
    }
  },
  data(){
    return{
      config:false,
      deviceInfo:null
    }
  },
  watch:{
    visible(val){
      if (val){
        this.getDeviceInfo()
      }
    }
  },
  methods:{
    handleClose(){
      this.$emit('update:visible', false)
      this.$emit('close')
    },
    getDeviceInfo(){
      getDeviceList().then(res=>{
        this.deviceInfo = res.data
        this.config=this.getConfig(this.deviceInfo)
      }).catch(err=>{
        console.error(err)
      })
    },
    setConfig() {
      apiSetCurrentDeviceConfig({
        // 选中允许下发即不需要工艺参数 ,这俩是反的
        needSetProcessParams: !this.config
      })
        .then(() => {
          Message({
            message: '设置成功',
            type: 'success',
            duration: 3 * 1000
          })
          this.handleClose()
        })
        .catch((err) => {
          console.error(err)
        })
    },
    getConfig(deviceInfo){
      const currentDeviceInfo = deviceInfo.deviceList?.find((ele) => {
        return ele.deviceID === deviceInfo.currentDeviceID
      })
      return !currentDeviceInfo?.needSetProcessParams
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep {
  .el-dialog{
    background-color: #10256c;
    color: #fff;
  }
  .el-dialog__title,.el-dialog__body{
    color: #fff;
  }
}
.submit{
  background-color: #0dfde6;
  outline: none;
  border: none;
  color:#333333;
  width: 100px;
  height: 40px;
  font-size: 14px;
  font-weight: 500;
  &:hover{
    background-color: #0dfde6;
    color:#333333;
  }
  &:focus{
    background-color: #0dfde6;
    color:#333333;
  }
  &:active{
    background-color: #0dfde6;
    color:#333333;
  }
}
.dialog-footer{
  display: flex;
  align-items: center;
  justify-content: center;
}
.content{
  height: 160px;
  padding:30px 20px;
  box-sizing: border-box;
}

.config-radio-group {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;

}
::v-deep .el-radio__label {
  color: #fff!important;
}
.el-radio{
  margin-bottom: 20px;
}
</style>

 src/components/TaskControlModal.vue

@@ -93,6 +93,10 @@
                >
                  工艺参数
                </div>
                <!-- 未获取到工艺参数, 且当前设备允许在没有工艺参数的情况下生产, 则提示-->
                <div v-if="getProcessParamsErrMsg && currentDeviceAllowNoParams" class="title-item title-item-two">
                  未获取到工艺参数, 请手动设置或在云端工艺模型中上传
                </div>
                <div
                  class="title-item title-item-two"
                  v-for="(item, index) in currentProcessParams"
@@ -103,7 +107,7 @@
                </div>
              </div>
            </div>
            <div class="process-err-tip" v-if="getProcessParamsErrMsg">
            <div class="process-err-tip" v-if="getProcessParamsErrMsg && !currentDeviceAllowNoParams">
              <div class="tip-icon">
                <span class="el-icon-error color_error"></span>
              </div>
@@ -170,7 +174,7 @@
      </div>
      <div slot="footer" :class="messageError?'dialog-footer tac btn-error':'dialog-footer tac'"
           style="overflow: hidden">
        <template v-if="messageError || getProcessParamsErrMsg">
        <template v-if="(messageError || getProcessParamsErrMsg) && !currentDeviceAllowNoParams">
          <div class="btn" v-if="messageError ==='下发成功！'||getProcessParamsErrMsg" @click="closeClick">
            <img src="../../public/close-btn.png"/>
          </div>
@@ -215,7 +219,7 @@
</template>

<script>
import {getTaskInfo, sendProcessParams, startTask,} from "@/api/home"; // 产线
import {getDeviceList, getTaskInfo, sendProcessParams, startTask,} from "@/api/home"; // 产线
import {channelNameConfig} from "@/common/constants";
export default {
  name: 'TaskControlModal',
@@ -248,13 +252,17 @@
      isLoading: false,
      second: 0,
      secondTimer: null,
      channelNameConfig: channelNameConfig
      channelNameConfig: channelNameConfig,
      currentDeviceAllowNoParams:false,
      deviceInfo:null
    };
  },
  mounted() {
    this.getTaskList().then(() => {
      const firstData = this.taskList[0]
      const id = firstData?.Procedure?.ID
      console.log(this.taskList)
      this.getDeviceInfo()
      if (id) {
        this.currentTaskIndex = this.taskList.findIndex(ele => ele.Procedure.ID === id)
        this.getCurrentTaskProduceParams(id)
@@ -312,6 +320,7 @@
      this.messageError = ''
      this.resParams = {};
      if (newVal) {
        this.getDeviceInfo()
        this.getTaskList().then(() => {
          const firstData = this.taskList[0]
          const id = firstData?.Procedure?.ID
@@ -361,6 +370,20 @@
        console.error(err)
      },)
    },
    getDeviceInfo(){
      getDeviceList().then(res=>{
        this.deviceInfo = res.data
        this.currentDeviceAllowNoParams=this.getConfig(this.deviceInfo)
      }).catch(err=>{
        console.error(err)
      })
    },
    getConfig(deviceInfo){
      const currentDeviceInfo = deviceInfo.deviceList?.find((ele) => {
        return ele.deviceID === deviceInfo.currentDeviceID
      })
      return !currentDeviceInfo?.needSetProcessParams
    },
    /**
     * 获取当前展示的任务的工艺参数
     */
@@ -369,6 +392,7 @@
      if (id) {
        this.currentProcessParams = []
        this.getProcessParamsErrMsg = ""

        startTask({id}).then((res) => {
          if (res.code === 200) {
            this.currentProcessParams = res.data.Params ?? []

 src/views/visualization.vue

@@ -38,6 +38,11 @@
            @click="setUrl"
          ></span>
          <span
            class="font el-icon-s-tools set-title"
            style="float: right;margin-right: 6px"
            @click="openParamsConfigModal"
          ></span>
          <span
            style="float: right;margin-right:20px;font-size:28px;line-height:25px;"
            @click="taskClick"
          >
@@ -593,6 +598,7 @@
      :listData="listData"
      @updateGet="updateGet"
    />
    <ParamsConfigModal :visible="paramsConfigIsShow" @close="closeParamsConfigModal"></ParamsConfigModal>
  </div>
</template>

@@ -616,8 +622,10 @@
import TaskControlModal from "@/components/TaskControlModal.vue";
import {channelNameConfig} from "@/common/constants";
import _ from 'lodash'
import ParamsConfigModal from "@/components/ParamsConfigModal.vue";
export default {
  components: {
    ParamsConfigModal,
    TaskControlModal,
    Card,
    Knowledge,
@@ -753,6 +761,7 @@
      resprocInfoTimer:null,
      channelNameConfig: channelNameConfig,
      index:null,
      paramsConfigIsShow:false
    };
  },
  mounted() {
@@ -1355,6 +1364,12 @@
        path: "/set",
      });
    },
    openParamsConfigModal(){
      this.paramsConfigIsShow=true
    },
    closeParamsConfigModal(){
      this.paramsConfigIsShow=false
    },
    // 右侧控制
    controlClick() {
      if (this.Tasks.length > 0) {