面板需求

haoxuan

2023-08-19 4336b6e9141f2544363f4880fbd0d67f095e7074

面板需求

 .env.development

@@ -4,5 +4,5 @@

# 页面 title 前缀
VUE_APP_TITLE=Basic
VUE_APP_BATH_PATH='http://192.168.20.120:8003'
VUE_APP_BATH_PATH='http://127.0.0.1:8003'


 src/api/home/index.js

@@ -1,4 +1,71 @@
import request from "@/utils/request";
// 获取网络配置 
export const NetworkCard = () => {
  return request({
    url: "/v1/config/net",
    method: "get",
  });
};

export const setworkCard = (data) => {
  return request({
    url: "/v1/config/net",
    method: "post",
    data
  });
};
// 获取生产进度 
export const getProgress = (data) => {
  return request({
    url: "/v1/plc/productProgress",
    method: "get",
    data
  });
};
// 获取pLC品牌 列表
export const getMiniDictList = () => {
  return request({
    url: "/v1/plcBrand/list",
    method: "get",
  });
};
// 添加 pLC品牌 
export const addMiniDict = () => {
  return request({
    url: "/v1/plcBrand/add",
    method: "post",
  });
};
// 删除 pLC品牌 
export const deleteMiniDict = (data) => {
  return request({
    url: `v1/plcBrand/delete/${data.id}`,
    
    method: "delete",
  });
};
// 更新 pLC品牌 
export const updateMiniDict = () => {
  return request({
    url: "/v1/plcBrand/update",
    method: "put",
  });
};
// 获取plc 
export const getPlc = () => {
  return request({
    url: "/v1/config/plc",
    method: "get",
  });
};
export const setPlc = (data) => {
  return request({
    url: "/v1/config/plc",
    method: "post",
    data,
  });
};
// 设置plc
//获取任务
export const getTaskInfo = (data) => {
  return request({

 src/components/AddControl.vue

@@ -23,14 +23,13 @@
      <div style="color:#333;font-size:15px; font-weight:700;margin-bottom:10px;">工艺参数</div>
      <el-form
        ref="form"
        :model="form"
        label-width="80px"
        label-position="left"
      >
        <div v-for="(item,index) in Arr" :key="index">
          <el-form-item :label="item.value" prop="estimateHour" class="form-item">
          <el-form-item :label="item.Key" prop="estimateHour" class="form-item">
            <el-input
              v-model="item.key"
              v-model="item.Value"
              placeholder="请输入"
              disabled
            ></el-input>
@@ -41,7 +40,7 @@
    <div slot="footer" class="dialog-footer tac">
      <el-button @click="shutdown">关闭</el-button>

      <el-button type="primary" @click="onSubmit(form)">下发参数</el-button>
      <el-button type="primary" @click="onSubmit()">下发参数</el-button>
    </div>
  </el-dialog>
</template>
@@ -65,44 +64,17 @@
  data() {
    return {
      islook: false,
      form: {
        consumedHour: null,
        directorID: "",
        endDate: "",
        estimateHour: null,
        priority: null,
        progress: null,
        projectID: "",
        taskName: "",
      },
      Arr:[
        {
          value:'设定长度',
          key:'100m',
        },
        {
          value:'切割时间',
          key:'100s',
        }
      ]
      Arr:[]
    };
  },
  mounted() {
    this.getStartInfo()
    
  },
  watch: {
    islook(val) {
      if (val) {
        this.form = {
          consumedHour: null,
          directorID: "",
          endDate: "",
          estimateHour: null,
          priority: null,
          progress: null,
          projectID: "",
          taskName: "",
        };
        this.getStartInfo()
        
      }
    },
  },
@@ -110,7 +82,7 @@
    getStartInfo(){
      startTask({id:this.id}).then(res=>{
        if(res.code==200){
          
          this.Arr=res.data.params;
        }
      })
    },
@@ -137,14 +109,12 @@
      sendProcessParams({id:this.id}).then(res=>{
        if(res.code==200){
          this.$message.success("下发成功！");
          this.$emit("shutdown", this.form);
          this.shutdown();
        }
      }) 
    },
    shutdown() {
      this.islook = false;
      this.$refs.form.resetFields();
    },
  },
};

 src/components/bomDialog.vue

@@ -58,9 +58,16 @@
</template>

<script>
import { addMaterial, updateMaterial } from "@/api/ProductiveTask/inventory";
import { getCodeStandardList } from "@/api/basic/standard";

import { getCodeStandardList } from "@/api/basic/standard";
import {
  NetworkCard,
  getMiniDictList,
  addMiniDict, 
  deleteMiniDict,
  updateMiniDict,
  sendProcessParams
} from "@/api/home/index";  
export default {
  name: "",
  props: {
@@ -131,11 +138,13 @@
  watch: {
    editDialogVisible(newVal){
      if(newVal){
       this.BomTableData=this.workList;
       this.BomTableData=  JSON.parse(
        JSON.stringify(this.workList))
      }
    },
    workList(newVal){
      this.BomTableData=this.workList;
      this.BomTableData=JSON.parse(
        JSON.stringify(this.workList))
    }  
  },
  mounted() {
@@ -145,6 +154,7 @@
      this.BomTableData.push({name:'',isDefault:false});
    },
    handleDelete(id) {
      
      this.BomTableData=this.BomTableData.filter(i=>{
        return i.id!=id
      })
@@ -203,30 +213,7 @@
        this.$emit('handleConfirmSave',this.BomTableData)
      }
    },
    async validate() {
      try {
        if (this.flag == "add")
          this.form.id = this.codenumberList.replace(/,/g, "");
        this.form.explain = this.explain;
        let fn = this.flag == "set" ? updateMaterial : addMaterial;
        const res = await fn(this.form);
        this.shutdown();
        this.$sucessSet('sucessSet')
        if(res.code==200){
          this.$message({
            message: this.flag == "set"?'修改成功！':'添加成功！',
            type: "success",
          });
        }
        
      } catch (err) {
        console.log(err);
        this.$message({
          message: err.message.data.data,
          type: "warning",
        });
      }
    },
   
    shutdown() {
      this.editDialogVisible = false;
      

 src/views/set.vue

@@ -1,5 +1,11 @@
<template>
  <div class="form-box">
    <div class="form-box-t">
      <el-button type="primary" @click="HomeClick()" class="background_blue">
        <i class="el-icon-d-arrow-left" />
        返回列表</el-button
      >
    </div>
    <div class="form-content-box">
      <div class="form-box-l">
        <div class="form-box-l-item">
@@ -12,7 +18,7 @@
            网络配置</el-button
          >
        </div>
        <div class="form-box-l-item">
        <!-- <div class="form-box-l-item">
          <el-button
            type="primary"
            @click="buttonClick(2)"
@@ -21,7 +27,7 @@
          >
            加入集群</el-button
          >
        </div>
        </div> -->
        <div class="form-box-l-item">
          <el-button
            type="primary"
@@ -36,26 +42,71 @@
      <div class="form-box-r">
        <el-form
          ref="form"
          :class="active == 3?'height_100':''"
          :rules="rules"
          :model="form"
          label-width="120px"
          label-position="left"
        >
          <div v-if="active == 1">
          <div v-if="active == 1 && !isSetNet">
            <div class="form-box-r-title">请配置网络</div>
            <div
              class="form-box-r-item"
              v-for="(item, index) in networkCardList"
              :key="index"
            >
              <el-input
                :value="'网卡：' + item.networkCard"
                disabled
                style="
                  width: calc(100% - 200px);
                  float: left;
                  margin-bottom: 20px;
                  margin-right: 10px;
                "
                placeholder="网卡："
              ></el-input>
              <el-switch
                style="
                  float: left;
                  margin-bottom: 20px;
                  margin-right: 10px;
                  line-height: 40px;
                  display: inline-block;
                "
                :disabled="item.ip?false:true"
                @change="switchChange(item, index, item.status)"
                v-model="item.status"
              >
              </el-switch>
              <i
                class="el-icon-setting margin_left_10px cursor_pointer"
                style="
                  font-size: 22px;
                  color: #fff;
                  margin-bottom: 20px;
                  line-height: 40px;
                  display: inline-block;
                "
                @click="setNet(item)"
              ></i>
            </div>
          </div>
          <div v-if="active == 1 && isSetNet">
            <el-form-item label="配置方式" prop="isRequired">
              <el-radio-group v-model="form.isRequired">
                <el-radio :label="true">自动匹配</el-radio>
                <!-- <el-radio :label="true">自动匹配</el-radio> -->
                <el-radio :label="false">手动配置</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item
              v-if="!form.isRequired"
              label="本机IP："
              prop="id"
              prop="ip"
              class="form-item"
            >
              <el-input
                v-model="form.id"
                v-model="form.ip"
                clearable
                placeholder="请输入"
              ></el-input>
@@ -63,11 +114,11 @@
            <el-form-item
              label="子网掩码："
              v-if="!form.isRequired"
              prop="projectName"
              prop="mask"
              class="form-item"
            >
              <el-input
                v-model="form.projectName"
                v-model="form.mask"
                clearable
                placeholder="请输入"
              ></el-input>
@@ -76,11 +127,11 @@
            <el-form-item
              v-if="!form.isRequired"
              label="网关："
              prop="type"
              prop="gateway"
              class="form-item"
            >
              <el-input
                v-model="form.type"
                v-model="form.gateway"
                clearable
                placeholder="请输入"
              ></el-input>
@@ -88,11 +139,11 @@
            <el-form-item
              v-if="!form.isRequired"
              label="DNS："
              prop="director"
              prop="dns"
              class="form-item"
            >
              <el-input
                v-model="form.director"
                v-model="form.dns"
                clearable
                placeholder="请输入"
              ></el-input>
@@ -184,13 +235,12 @@
              >
            </el-form-item>
          </div>
          <div v-if="active == 3">
          <div style="height:100%;" v-if="active == 3">
            <div
              style="
                overflow: auto;
                width: 100%;
                height: 100%;
                max-height: 450px;
                min-height: 180px;
                padding-right: 10px;
              "
            >
@@ -199,11 +249,12 @@
                prop="brand"
                class="form-item2 float_left"
              >
              <!-- style="width: calc(100% - 30px)" -->
                <el-select
                  placeholder="请选择PLC品牌"
                  v-model="form.brand"
                  clearable
                  style="width: calc(100% - 30px);"
                  style="width: 100%"
                >
                  <el-option
                    v-for="ele in plcBrandList"
@@ -212,11 +263,11 @@
                    :value="ele.name"
                  ></el-option>
                </el-select>
                <i
                <!-- <i
                  class="el-icon-setting margin_left_10px cursor_pointer"
                  style="font-size: 20px; color: gray"
                  style="font-size: 20px; color: #fff"
                  @click="handleShow"
                ></i>
                ></i> -->
              </el-form-item>

              <el-form-item label="接口方式" prop="method" class="form-item2">
@@ -238,7 +289,6 @@
                  placeholder="全部"
                  filterable
                  style="width: 100%"
                  :popper-append-to-body="false"
                >
                  <el-option
                    v-for="item in portNameList"
@@ -258,122 +308,126 @@
                  placeholder="请输入"
                ></el-input>
              </el-form-item>
             
            </div>
            <el-button
            style="margin-bottom: 10px; float: right"
            @click="addPreProduction"
            type="primary"
            icon="el-icon-plus"
            >添加</el-button
          >
          <el-table
            ref="multipleTable"
            :header-cell-style="{
              background: '#f1f3f8',
              color: '#000009',
            }"
            :data="pclList"
            tooltip-effect="dark"
            height="calc(100% - 230px)"
            style="width: 100%; padding: 0"
          >
            <el-table-column
              type="index"
              label="序号"
              width="80"
            ></el-table-column>
            <el-table-column
              prop="startAddress"
              label="数量起始地址"
              width="180"
            >
              <template slot-scope="scope">
                <el-input
                  v-if="scope.row.edit"
                  v-model.number="scope.row.startAddress"
                  placeholder="请输入"
                ></el-input>
                <span v-else>{{ scope.row.startAddress }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="length" label="数据长度" width="120">
              <template slot-scope="scope">
                <el-input
                  v-if="scope.row.edit"
                  v-model.number="scope.row.length"
                  placeholder="请输入"
                ></el-input>
                <span v-else>{{ scope.row.length }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="type" label="数据类型" width="120">
              <template slot-scope="scope">
                <!--  :popper-append-to-body="false" -->
                <el-select
                  v-if="scope.row.edit"
                  v-model="scope.row.type"
                  placeholder="请选择"
                  filterable
                >
                  <el-option
                    v-for="item in plcNumTypeList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
                <span v-else>{{ scope.row.type }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="fieldName" label="对应系统字段">
              <template slot-scope="scope">
                
                <el-select
                  v-if="scope.row.edit"
                  v-model="scope.row.fieldName"
                  placeholder="请选择"
                  filterable
                >
                  <el-option
                    label="完成量"
                    :value="1"
                  ></el-option>
                  <el-option
                    label="总量"
                    :value="2"
                  ></el-option>
                </el-select>
                <span v-else>{{ scope.row.fieldName }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="120">
              <template slot-scope="scope">
                <span class="setColor" v-if="scope.row.edit">
                  <el-button
                    @click="saveClick(scope.row, scope)"
                    type="text"
                    size="small"
                    >保存</el-button
                  >

                  <el-button type="text" size="small" @click="cancel(scope)"
                    >取消</el-button
                  >
                </span>
                <span v-else>
                  <el-button @click="dellist(scope)" type="text" size="small"
                    >删除</el-button
                  >
                </span>
              </template>
            </el-table-column>
          </el-table>
          </div>
        </el-form>
        
        <div class="project-info-footer">
          <el-button @click="shutdown" style="margin-right: 50px"
          <!-- <el-button @click="shutdown" style="margin-right: 50px"
            >取消</el-button
          >
          > -->

          <el-button type="primary" @click="onSubmit(form)">保存</el-button>
        </div>
        <div class="form-bottom-box" v-if="active==3">
                <el-button
                  style="margin-bottom: 10px; float: right"
                  @click="addPreProduction"
                  type="primary"
                  icon="el-icon-plus"
                  >添加</el-button
                >
                <el-table
                  ref="multipleTable"
                  :header-cell-style="{
                    background: '#f1f3f8',
                    color: '#000009',
                  }"
                  :data="pclList"
                  tooltip-effect="dark"
                  height="calc(100% - 50px)"
                  style="width: 100%; padding: 0"
                >
                  <el-table-column type="index"  label="序号" width="80"></el-table-column>
                  <el-table-column
                    prop="startAddress"
                    label="数量起始地址"
                    width="180"
                  >
                    <template slot-scope="scope">
                      <el-input
                        v-if="scope.row.edit"
                        v-model.number="scope.row.startAddress"
                        placeholder="请输入"
                      ></el-input>
                      <span v-else>{{ scope.row.startAddress }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="length" label="数据长度" width="120">
                    <template slot-scope="scope">
                      <el-input
                        v-if="scope.row.edit"
                        v-model.number="scope.row.length"
                        placeholder="请输入"
                      ></el-input>
                      <span v-else>{{ scope.row.length }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="type" label="数据类型" width="120">
                    <template slot-scope="scope">
                      <!--  :popper-append-to-body="false" -->
                      <el-select
                        v-if="scope.row.edit"
                        v-model="scope.row.type"
                        placeholder="请选择"
                        filterable
                      >
                        <el-option
                          v-for="item in plcNumTypeList"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id"
                        ></el-option>
                      </el-select>
                      <span v-else>{{ scope.row.type }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="fieldName"
                    label="对应系统字段"
                  >
                    <template slot-scope="scope">
                      <el-input
                        v-if="scope.row.edit"
                        v-model="scope.row.fieldName"
                        placeholder="请输入"
                      ></el-input>
                      <span v-else>{{ scope.row.fieldName }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" width="120">
                    <template slot-scope="scope">
                      <span class="setColor" v-if="scope.row.edit">
                        <el-button
                          @click="saveClick(scope.row, scope)"
                          type="text"
                          size="small"
                          >保存</el-button
                        >

                        <el-button
                          type="text"
                          size="small"
                          @click="cancel(scope)"
                          >取消</el-button
                        >
                      </span>
                      <span v-else>
                        <el-button
                          @click="dellist(scope)"
                          type="text"
                          size="small"
                          >删除</el-button
                        >
                      </span>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
      </div>
    </div>
    <BomDialog
@@ -387,12 +441,24 @@
</template>

<script>
// import {
//   getProductLineDictList,
//   listProdDic,

//   saveMiniDict,
// } from "@/api/basic/dictionary"; // 产线

import {
  getProductLineDictList,
  listProdDic,
  NetworkCard,
  setworkCard,
  getMiniDictList,
  saveMiniDict,
} from "@/api/basic/dictionary"; // 产线
  addMiniDict,
  deleteMiniDict,
  updateMiniDict,
  sendProcessParams,
  getPlc,
  setPlc,
} from "@/api/home/index";
import BomDialog from "@/components/bomDialog";
export default {
  components: {
@@ -403,28 +469,46 @@
    return {
      active: 1,
      form: {
        isRequired: true,
        budget: null,
        director: "",
        explain: "",
        id: "",
        introduction: "",
        projectName: "",
        isRequired: false,
        dns:'',
        gateway:'',
        id:'',
        ip:'',
        mask:'',
        networkCard:'',
        status:2,

        type: "",
        brand:'',
          method:'',
            portName:'',
              port:'',
                address:'',
        
      },

      rules: {
        // 项目名称
        projectName: [
        ip: [
          {
            required: true,
            message: "请填写",
            trigger: "change",
          },
        ],
        brand: [{ required: false, message: "请选择", trigger: "change" }],
        method: [{ required: false, message: "请选择", trigger: "change" }],
       
        port: [
          {
            required: false,
            validator: this.validatorNum,
          },
        ],
        portName: [{ required: false, message: "请选择", trigger: "change" }],
      },

      // 网卡
      isSetNet: false,
      networkCardList: [],
      pclList: [],
      addPreObj: {
        edit: true,
@@ -457,14 +541,97 @@
      ],
    };
  },
  mounted() {},
  mounted() {
    this.getnetworkCardList();
  },
  watch: {},
  methods: {
    validatorNum(rule, value, callback) {
      if(value){
        if (value == undefined || value == null) {
          callback(new Error("请输入有效数字"));
        } else {
          var reg = /^\+?[0-9]\d*$/;
          if (!reg.test(value)) {
            callback(new Error("请填写整数"));
          } else {
            callback();
          }
        }
      }else{
        callback();
      }
      
    },
    getnetworkCardList() {
      NetworkCard().then((res) => {
        if (res.code == 200) {
          this.networkCardList = res.data;
          for(let i in this.networkCardList){
            this.networkCardList[i].status=this.networkCardList[i].status==1?true:false
          }
        }
      });
    },
    // 设置网络
    setNet(item) {
      this.$confirm(
        item.ip
          ? "是否现在配置网络信息？"
          : "您还未配置网络信息，是否现在配置?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          this.isSetNet = true;
          this.form = JSON.parse(JSON.stringify(item));
        })
        .catch(() => {});
    },
    switchChange(item, index, status) {
      let arr = [];
      for (let i in this.networkCardList) {
        if (this.networkCardList[i].status) {
          arr.push(i);
        }
      }
      if (arr.length > 1) {
        this.$message({
          message: "只能开启一个网卡！",
          type: "warning",
        });
        this.networkCardList[index].status = !status;
        return true;
      }
      this.form=JSON.parse(JSON.stringify(item));
      this.saveOne()
    },
    HomeClick() {
      this.$router.push({
        path: "/",
      });
    },
    buttonClick(val) {
      this.active = val;
      if(this.active==3){
      if (this.active == 1) {
        this.isSetNet=false,
        this.getnetworkCardList();
      } else if (this.active == 3) {
        this.handleGetBomKindDictList();
        this.getPlcInfo()
      }
    },
    getPlcInfo(){
      getPlc().then(res=>{
        if(res.code==200){
          this.form=JSON.parse(JSON.stringify(res.data));
          this.pclList=res.data.details?JSON.parse(JSON.stringify(res.data.details)):[];
        }
      })
    },
    // PLC配置设置
    handleShow() {
@@ -473,8 +640,63 @@
    },
    //  PLC配置
    handleGetBomKindDictList(val) {
      getMiniDictList({ type: 1 }).then((res) => {
        this.plcBrandList = res.data;
      getMiniDictList().then((res) => {
        this.plcBrandList = res.data.data;
        this.plcBrandList=[
          
            {
              id:1,
              name:'三菱',
            },
            {
              id:2,
              name:'欧姆龙',
            },
            {
              id:3,
              name:'西门子',
            },
            {
              id:4,
              name:'台达',
            },
            {
              id:5,
              name:'和利时',
            },
            {
              id:6,
              name:'信捷',
            },
            {
              id:7,
              name:'南大傲拓',
            },
            {
              id:8,
              name:'汇川',
            },
            {
              id:9,
              name:'永宏',
            },
            {
              id:10,
              name:'罗克韦尔',
            },
            {
              id:11,
              name:'施耐德',
            },
            {
              id:12,
              name:'丰炜',
            },
            {
              id:13,
              name:'黄石科威',
            }
        ]
        if (val) {
          for (let i in this.plcBrandList) {
            if (this.plcBrandList[i].isDefault) {
@@ -490,7 +712,8 @@
      });
    },
    handleConfirmSave(data) {
      saveMiniDict({ list: data, type: 1 }).then((res) => {
      // { list: data, type: 1 }
      addMiniDict().then((res) => {
        if (res.code == 200) {
          this.$message({
            message: "操作成功！",
@@ -603,9 +826,35 @@
    dellist(scope) {
      this.pclList.splice(scope.$index, 1);
    },
    saveOne() {
      let params = JSON.parse(JSON.stringify(this.form));
      params.status=params.status==1?1:2
      setworkCard(params).then((res) => {
        if (res.code == 200) {
          this.$message.success("网络配置成功！");
          this.getnetworkCardList()
        }
      });
    },
    onSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.active == 1) {
            this.saveOne();
          }else if(this.active == 3){
            this.saveThree()
          }
        }
      });
    },
    
    saveThree() {
      let params = JSON.parse(JSON.stringify(this.form));
      params.details=this.pclList
      setPlc(params).then((res) => {
        if (res.code == 200) {
          this.$message.success("PLC配置成功！");
          this.getPlcInfo()
        }
      });
    },
@@ -635,16 +884,22 @@
.margin_left_10px {
  margin-left: 10px;
}
.form-bottom-box{
  height:calc(100% - 280px);
  min-height:200px;
  margin-top:100px;
.form-bottom-box {
  height: calc(100% - 280px);
  min-height: 200px;
  margin-top: 100px;
}
.form-box {
  background: rgb(2, 10, 38);
  width: 100%;
  height: 100%;
  overflow-y:hidden;
  overflow-y: hidden;
  .form-box-t {
    margin: 30px 0 0 40px;
  }
  .height_100{
    height:calc(100% -  90px);
  }
  .el-form {
    width: 100%;
    color: #fff;
@@ -654,11 +909,11 @@
    ::v-deep .el-radio {
      color: #fff !important;
    }
    .form-item2{
      width:calc(50% - 20px);
      float:left;
      &:nth-of-type(odd){
        margin-right:20px;
    .form-item2 {
      width: calc(50% - 20px);
      float: left;
      &:nth-of-type(odd) {
        margin-right: 20px;
      }
    }
  }
@@ -666,7 +921,7 @@
    padding: 110px 40px 30px;
    color: #fff;
    width: calc(100% - 80px);
    height: calc(100% - 140px);
    height: calc(100% - 140px - 70px);
  }
  .form-box-l {
    width: 200px;
@@ -683,6 +938,14 @@
    width: calc(75% - 280px);
    margin-left: 80px;
    float: left;
    .form-box-r-title {
      width: 100%;
      text-align: center;
      color: #fff;
      font-weight: 700;
      font-size: 25px;
      margin-bottom: 40px;
    }
  }
}
::v-deep .el-tabs__content {

 src/views/visualization.vue

@@ -15,20 +15,24 @@
            <span class="title-item"
              >订单编号:
              <span class="color_4efefa">{{
                taskData.order.orderId || ""
                taskData.Order.orderId || ""
              }}</span>
            </span>
            <span class="title-item"
              >当前工序:
              <span class="color_4efefa">{{
                taskData.procedure.procedure.procedureName || ""
                taskData.Procedure.procedure.procedureName || ""
              }}</span>
            </span>
            <span class="title-item"
              >后道工序: <span class="color_4efefa">Q-22038</span>
              >后道工序: <span class="color_4efefa">
                <!-- {{
                taskData.NextProcedure.procedure.procedureName || "--"
              }} -->
              </span>
            </span>
            <span class="title-item"
              >工作人数: <span class="color_4efefa">6人</span>
              >工作人数: <span class="color_4efefa">{{ taskData.Procedure.procedure.workers.length || 0}}人</span>
            </span>
          </div>
          <div class="content">
@@ -37,7 +41,7 @@
                <div class="small_title">当前完成</div>
                <div class="content_leftBttom">
                  <dl>
                    <dd style="font-size: 26px; font-weight: 600">0m</dd>
                    <dd style="font-size: 26px; font-weight: 600">{{ finishNumber }}{{  taskData.Order.unit }}</dd>
                  </dl>
                </div>
              </div>
@@ -45,7 +49,9 @@
                <div class="small_title">正品生产</div>
                <div class="content_leftBttom">
                  <dl>
                    <dd style="font-size: 26px; font-weight: 600">400m</dd>
                    <dd style="font-size: 26px; font-weight: 600">{{
                  taskData.Order.amount || 0
                }}{{  taskData.Order.unit }}</dd> 
                  </dl>
                </div>
              </div>
@@ -53,44 +59,50 @@
            <div class="content_right">
              <el-descriptions :column="2" :colon="true">
                <el-descriptions-item label="产品名称">{{
                  taskData.order.productName || ""
                  taskData.Order.productName || ""
                }}</el-descriptions-item>
                <el-descriptions-item label="数量:">{{
                  taskData.order.amount || ""
                <el-descriptions-item label="数量">{{
                  taskData.Order.amount || 0
                }}{{  taskData.Order.unit }}</el-descriptions-item>
                <el-descriptions-item label="交货日期">{{
                  taskData.Order.deliverDate || ""
                }}</el-descriptions-item>
                <el-descriptions-item label="交货日期:">{{
                  taskData.order.deliverDate || ""
                }}</el-descriptions-item>
                <el-descriptions-item label="工时:">
                  {{ taskData.order.deliverDate || "" }}
                <el-descriptions-item label="工时">
                  {{ taskData.Procedure.procedure.workHours || "" }}
                </el-descriptions-item>
                <el-descriptions-item label="起止时间">{{
                  taskData.order.startTime || ""
                }}</el-descriptions-item>
                  formatDate(taskData.Procedure.procedure.startTime)  || ""
                }}  - {{ formatDate(taskData.Procedure.procedure.endTime) }}</el-descriptions-item>
                <el-descriptions-item label="货物描述"
                  >江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item
                  >{{
                  taskData.Order.orderAttr || ""
                }}</el-descriptions-item
                >
                <el-descriptions-item label="客户名称"
                  >江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item
                  >{{
                  taskData.Order.customer || ""
                }}</el-descriptions-item
                >
                <el-descriptions-item label="参数要求"
                  >江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item
                  >{{
                  taskData.Order.parameter || ""
                }}</el-descriptions-item
                >
              </el-descriptions>
              <el-descriptions :column="1" :colon="true">
                <el-descriptions-item label="完成度" style="width: 100%">
                  <!--  -->
                  <!--:text-format="format"  -->
                  <el-progress
                    define-back-color="#007101"
                    color="#00CC66"
                    :text-inside="true"
                    :stroke-width="30"
                    :percentage="progress"
                    :text-format="format"
                    >完成率50%</el-progress
                    :percentage="parseInt(finishNumber/taskData.Order.amount)"
                    
                    ></el-progress
                  >
                </el-descriptions-item>
                <el-descriptions-item label="合格率" style="width: 100%">
                <!-- <el-descriptions-item label="合格率" style="width: 100%">
                  <el-progress
                    define-back-color="#007101"
                    color="#00CC66"
@@ -98,7 +110,7 @@
                    :stroke-width="30"
                    :percentage="passrate"
                  ></el-progress>
                </el-descriptions-item>
                </el-descriptions-item> -->
              </el-descriptions>
            </div>
          </div>
@@ -117,8 +129,8 @@
                class="card-box"
                ref="cardBox1"
                v-if="
                  taskData.procedure.procedure &&
                  taskData.procedure.procedure.inputMaterials
                  taskData.Procedure.procedure &&
                  taskData.Procedure.procedure.inputMaterials
                "
              >
                <el-carousel-item
@@ -132,21 +144,24 @@
                  >
                    <div class="card_content">
                      <div class="card_contentLeft">
                        包号:G22122304 100吨{{ index }}
                        {{ list.materialId}}
                      </div>
                    </div>
                    <div class="card_top">
                      <div>
                        设备12<i
                        <!-- 设备12<i
                          style="font-size: 14px"
                          class="el-icon-right font-arrow-20"
                        ></i>
                        设备13
                        设备13 -->
                        {{  list.materialName}} 
                      </div>
                    </div>
                    <div class="card_top-2">
                      <span class="card-top-r-t">生产完成</span>
                      <span class="card-top-r-b">12月28日 08:24</span>
                    <div class="card_top2">
                      <div style="line-height:45px;text-align:center;">
                      {{  list.amount}} {{ list.unit }}</div>
                      <!-- <span class="card-top-r-t">生产完成</span>
                      <span class="card-top-r-b">12月28日 08:24</span> -->
                    </div>
                  </div>
                </el-carousel-item>
@@ -154,61 +169,68 @@
            </div>
            <i class="el-icon-arrow-right font-arrow-20 color_4efefa"></i>
            <div class="bottom_list">
              <div class="bottom-title">当前工序:前纺(QF)</div>
              <div class="bottom-title">当前工序:{{
                taskData.Procedure.procedure.procedureName || ""
              }}</div>
              <el-carousel
                direction="vertical"
                height="calc(100% -  0px)"
                :interval="500"
                class="card-box"
                ref="cardBox2"
                v-if="
                  taskData.procedure.procedure &&
                  taskData.procedure.procedure.inputMaterials
                  taskData.Procedure.procedure &&
                  procedureList
                "
              >
                <el-carousel-item
                  :key="index"
                  v-for="(item, index) in inputMaterials"
                  v-for="(item, index) in procedureList"
                >
                  <div class="card" 
                  :key="index2"
                    v-for="(list, index2) in item">
                    <div class="card_content">
                      <div class="card_contentLeft color_blue">
                        包号:G22122304 100吨
                        <span style="float: right">6m/s</span>
                    <template v-if="list.name=='工序'">
                      <div class="card_content">
                        <div class="card_contentLeft color_blue">
                          {{ list.deviceName }}
                          <!-- <span style="float: right">6m/s</span> -->
                        </div>
                      </div>
                    </div>
                    <div class="card_top-3">
                      <span class="card-top-r-t">完成进度：50%</span>
                      <span class="card-top-r-b">
                        <el-progress
                          define-back-color="#007101"
                          color="#00CC66"
                          :text-inside="true"
                          :stroke-width="10"
                          :percentage="50"
                          :show-text="false"
                        ></el-progress>
                      </span>
                    </div>
                    <div class="card_top-2">
                      <span class="card-top-r-t">完成进度：50%</span>
                      <span class="card-top-r-b">12月28日 08:24</span>
                    </div>
                      <div class="card_top-3">
                        <span class="card-top-r-t">完成进度：{{ parseInt(finishNumber/taskData.Order.amount)||0 }}</span>
                        <span class="card-top-r-b">
                          <el-progress
                            define-back-color="#007101"
                            color="#00CC66"
                            :text-inside="true"
                            :stroke-width="10"
                            :percentage="parseInt(finishNumber/taskData.Order.amount)"
                            :show-text="false"
                          ></el-progress>
                        </span>
                      </div>
                      <div class="card_top-2">
                        <div style="line-height:45px;text-align:center;">
                        生产中</div>
                        <!-- <span class="card-top-r-t">完成进度：50%</span>
                        <span class="card-top-r-b">12月28日 08:24</span> -->
                      </div>
                    </template>
                    <template v-else>
                      <div class="card_content">
                          <div class="card_contentLeft color_blue">
                            工艺编号：{{ list.number }}
                          </div>
                        </div>
                        <div class="card_top-4">
                         工艺的具体信息请点击控制查看！
                        </div>
                    </template>
                  </div>
                </el-carousel-item>
              </el-carousel>
              <div class="card">
                <div class="card_content">
                  <div class="card_contentLeft color_blue">
                    包号:G22122304 100吨
                  </div>
                </div>
                <div class="card_top-4">
                  此模型用于数值检测，精准检测相关生产数据。
                  此模型用于数值检测，精准检测相关生产数据
                </div>
              </div>
              
              <p
                style="font-size: 22px; margin-left: 12px; margin-top: 50px"
              ></p>
@@ -228,8 +250,8 @@
                ref="cardBox3"
                class="card-box"
                v-if="
                  taskData.procedure.procedure &&
                  taskData.procedure.procedure.outputMaterials
                  taskData.Procedure.procedure &&
                  taskData.Procedure.procedure.outputMaterials
                "
              >
                <el-carousel-item
@@ -245,24 +267,28 @@
                    class="card"
                  >
                    <div class="card_content">
                      <div class="card_contentLeft">包号:G22122304 100吨</div>
                      <div class="card_contentLeft">{{  list.materialId}}</div>
                    </div>
                    <div class="card_top">
                      <div>
                        设备12<i
                        {{  list.materialName}}
                        <!-- 设备12<i
                          style="font-size: 14px"
                          class="el-icon-right font-arrow-20"
                        ></i>
                        设备13
                        设备13 -->
                      </div>
                    </div>
                    <div class="card_top-2">
                      <span class="card-top-r-t">生产完成</span>
                      <span class="card-top-r-b">12月28日 08:24</span>
                    <div class="card_top2">
                      <div style="line-height:45px;text-align:center;">
                      {{  list.amount}} {{ list.unit }}</div>
                      <!-- <span class="card-top-r-t">生产完成</span>
                      <span class="card-top-r-b">12月28日 08:24</span> -->
                      
                    </div>
                    <div class="card-info-box">预计10分钟送达</div>
                    <!-- <div class="card-info-box">预计10分钟送达</div> -->
                  </div>
                  <div class="card">
                  <!-- <div class="card">
                    <div class="card_content">
                      <div class="card_contentLeft color_green">
                        包号:G22122304 100吨
@@ -281,7 +307,7 @@
                      <span class="card-top-r-t">生产完成</span>
                      <span class="card-top-r-b">12月28日 08:24</span>
                    </div>
                  </div>
                  </div> -->
                </div>
                </el-carousel-item>
                </el-carousel>
@@ -315,22 +341,25 @@
        </div>
        <div class="right_dutyLst">
          <div class="right-small-title">当前值班</div>
          <dl class="right-small-person">
          <div class='right-person-box'>
          <dl class="right-small-person" v-for="(item,index) in taskData.Procedure.procedure.workers" :key="index">
            <dt>
              <el-avatar
              <!-- <el-avatar
                class="img-class"
                src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
              ></el-avatar>
              ></el-avatar> -->
              <i class="el-icon-s-custom color_green" style='margin:10px;font-size:40px; '/>
            </dt>
            <span
              style="font-size: 20px; font-weight: 600; margin-right: 10px"
              >{{ taskData.procedure.procedure.workers.workerName || "" }}</span
              >{{ item.workerName || "" }}</span
            >
            <span style="color: #666">{{
              taskData.procedure.procedure.workers.phoneNum || ""
              item.phoneNum || ""
            }}</span>
          </dl>
          <div
          </div>
          <!-- <div
            style="
              width: 100%;
              font-size: 18px;
@@ -340,8 +369,8 @@
              line-height: 50px;
            "
          >
            编号：{{ taskData.procedure.procedure.workers.workerId || "" }}
          </div>
            编号：{{ taskData.Procedure.procedure.workers.workerId || "" }}
          </div> -->
          <div class="right-small-btn">
            <el-button type="primary"> 打印</el-button>
            <el-popover
@@ -396,7 +425,7 @@
      </div>
    </template>
    <!-- 控制的弹框 -->
    <AddControl ref="control" :id="taskData.procedure.id" />
    <AddControl ref="control" :id="taskData.Procedure.ID" />
  </div>
</template>

@@ -406,6 +435,8 @@
  finishTask,
  getMiniDictList,
  saveMiniDict,
  startTask,
  getProgress,
} from "@/api/home/index"; // 产线
import Card from "@/components/Card.vue";
import Knowledge from "../components/Knowledge.vue";
@@ -421,12 +452,14 @@
      progress: 70, //进度
      passrate: 30, //合格率
      production: 25, //生产中
      finishNumber:0,
      // 右侧完成
      finishShow: false,
      inputMaterials: [],
      outputMaterials:[],
      procedureList:[],
      taskData: {
        order: {
        Order: {
          amount: "",
          customer: "",
          deliverDate: "",
@@ -439,57 +472,13 @@
          startTime: "",
          unit: "",
        },
        procedure: {
        Procedure: {
          id: 1,
          procedure: {
            deviceId: "",
            endTime: "",
            inputMaterials: [
              {
                amount: "",
                materialId: "",
                materialName: "",
                unit: "",
              },
              {
                amount: "",
                materialId: "",
                materialName: "",
                unit: "",
              },
              {
                amount: "",
                materialId: "",
                materialName: "",
                unit: "",
              },
              {
                amount: "",
                materialId: "",
                materialName: "",
                unit: "",
              },
              {
                amount: "",
                materialId: "",
                materialName: "",
                unit: "",
              },
              {
                amount: "",
                materialId: "",
                materialName: "",
                unit: "",
              },
            ],
            outputMaterials: [
              {
                amount: "",
                materialId: "",
                materialName: "",
                unit: "",
              },
            ],
            inputMaterials: [],
            outputMaterials: [],
            procedureId: "",
            procedureName: "",
            startTime: "",
@@ -513,9 +502,37 @@
    //   this.production = this.getRandomNumber(1, 100);
    // }, 3000);
    this.getTaskInfo();
    setInterval(() => {
      this.getProgressInfo()
    }, 60000);
  },

  methods: {
    getProgressInfo(){
      getProgress().then(res=>{
              if(res.code==200){
               
              }
            })
    },
    getDateObj (ms) {
    const now = ms ? new Date(ms) : new Date()
    const y = now.getFullYear()
    let m = now.getMonth() + 1
    m = m > 9 ? m : '0' + m
    let d = now.getDate()
    d = d > 9 ? d : '0' + d
    return { y, m, d }
  },
    // 格式化时间 ==> yyyy-mm-dd
  formatDate (value, str) {
    if (value) {
      const dateObj = this.getDateObj(value)
       return '' + dateObj.y + '-' + dateObj.m + '-' + dateObj.d
    } else {
      return ''
    }
  },
    setInterCard(value, name) {
      let height = 200;
      let num = 1;
@@ -524,7 +541,7 @@
        num = Math.floor(height / 80);
      }
      let inputMaterials = JSON.parse(
        JSON.stringify(this.taskData.procedure.procedure[value])
        JSON.stringify(this.taskData.Procedure.procedure[value])
      );
      let newDataList = [];
      let current = 0;
@@ -552,8 +569,23 @@
    getTaskInfo() {
      getTaskInfo().then((res) => {
        if (res.code == 200) {
          this.taskData=res.data;
          this.procedureList.push([{
            name:'工序',
            ...this.taskData.Procedure.procedure
          }])
          if(this.taskData.Procedure.ID){
            startTask({id:this.taskData.Procedure.ID}).then(res=>{
              if(res.code==200){
                // res.data.number
                this.procedureList[0].push({number:res.data.number,name:'工艺'})
              }
            })
          }
          console.log(this.procedureList,'===1111procedureList')
          // setTimeout(() => {
            this.setInterCard("inputMaterials", "cardBox1");
            // this.setInterCard('procedureList','cardBox2')
            this.setInterCard('outputMaterials','cardBox3')
          // }, 5000);
        }
@@ -572,9 +604,12 @@
    },
    // 右侧完成
    finishClick() {
      finishTask({ id: this.taskData.procedure.id }).then((res) => {
      finishTask({ id: this.taskData.Procedure.ID }).then((res) => {
        if (res.code == 200) {
          this.finishShow=false;
          this.getTaskInfo()
          this.$message.success("操作成功！");
         
        }
      });
    },
@@ -977,6 +1012,7 @@
      background: #00cc66;
      margin-top: 10px;
      padding: 5px 10px;
      position:relative;
      .right-small-title {
        width: auto;
        padding: 5px;
@@ -985,22 +1021,29 @@
        border-radius: 8px;
        background: #007101;
      }
      .right-person-box{
        width:100%;
        height:calc(100% - 100px);
        overflow:auto;
        margin-top:20px;
      }
      .right-small-person {
        width: 100%;
        height: 60px;
        line-height: 60px;
        margin-top: 50px;
        margin-bottom:10px;
        border-radius: 10px;
        background: #fff;
        color: #333;
       

        dt {
          float: left;
          padding: 5px;
          
          margin-right: 10px;
          .img-class {
            height: 50px;
            padding: 0 !important;
            margin: 5px !important;
          }
        }
        span {
@@ -1011,6 +1054,9 @@
      .right-small-btn {
        margin-top: 10px;
        width: 100%;
        position:absolute;
        bottom:10px;
        left:0;
        overflow: hidden;
        .el-button--primary {
          width: 46%;

 vue.config.js

@@ -66,8 +66,8 @@
        ws: true,
        changeOrigin: true,
      },
      "/v1/task": {
        target: "http://192.168.20.120:8003",
      "/v1/": {
        target: "http://127.0.0.1:8003",
        ws: true,
        changeOrigin: true,
      },