<template>
  <div>
    <el-card>
      <span>请选择机床：</span>
      <el-autocomplete
        v-model="searchCriteria"
        :fetch-suggestions="querySearch"
        clearable
        style="width: 200px;margin-left: 10px"
        size="small"
        class="inline-input"
        placeholder="请输入内容"
        @clear="clearMachine"
        @select="handleSelect"/>
      <el-tag style="margin-left: 10px; color: black;background: #EAEAEA" type="info">未开始</el-tag>
      <el-tag style="background: #7eaced; color: black">进行中</el-tag>
      <el-tag style="background: #ff9759; color: black">已完成</el-tag>
      <!--<el-button type="success" icon="el-icon-search" size="mini" style="margin-left: 15px" @click="searchColor">查询</el-button>-->
    </el-card>
    <el-card>
      <div class="main">
        <div class="process">
          <div :class="[isActive ? color[22] : 'weikaishi']" class="module" style="position: relative;left: 1770px;top:220px; width: 80px;height: 48px;">
            <el-tooltip placement="top">
              <div slot="content">多行信息<br>第二行信息</div>
              <el-button :disabled="disabled" style="color: black;line-height:19px" type="text" @click="title='发货';update()">发货<br>{{ `${data[0].发货百分比}%` }}</el-button>
            </el-tooltip>
          </div>
          <div :class="[isActive ? color[21] : 'weikaishi']" class="module" style="position: relative;left: 1580px;top:220px; width: 80px;height: 48px;">
            <el-tooltip placement="top">
              <div slot="content">多行信息<br>第二行信息</div>
              <el-button :disabled="disabled" style="color: black;line-height:19px" type="text" @click="title='总装调试';update()">总装调试<br>{{ `${data[0].总装调试百分比}%` }}</el-button>
            </el-tooltip>
          </div>
          <div :class="[isActive ? color[20] : 'weikaishi']" class="module" style="position: relative;left: 1390px;top:220px; width: 80px;height: 48px;">
            <el-tooltip placement="top">
              <div slot="content">多行信息<br>第二行信息</div>
              <el-button :disabled="disabled" style="color: black;line-height:19px" type="text" @click="title='装配质检';update()">装配质检<br>{{ `${data[0].装配质检百分比}%` }}</el-button>
            </el-tooltip>
          </div>
          <div :class="[isActive ? color[19] : 'weikaishi']" class="module" style="position: relative;left: 1185px;top:105px; width: 80px;height: 48px;">
            <el-tooltip placement="top">
              <div slot="content">角色：电气部<br>电气部长制定装配计划，<br>并记录计划执行情况</div>
              <el-button :disabled="disabled" style="color: black;line-height:19px" type="text" @click="title='电气装配';update()">电气装配<br>{{ `${data[0].电气装配百分比}%` }}</el-button>
            </el-tooltip>
          </div>
          <div :class="[isActive ? color[18] : 'weikaishi']" class="module" style="position: relative;left: 1100px;top:176px; width: 80px;height: 48px;">
            <el-tooltip placement="top">
              <div slot="content">角色：装配部长<br>装配部长制定装配计划，<br>并记录计划执行情况</div>
              <el-button :disabled="disabled" style="color: black;line-height:19px" type="text" @click="title='机械装配';update()">机械装配<br>{{ `${data[0].机械装配百分比}%` }}</el-button>
            </el-tooltip>
          </div>
          <div :class="[isActive ? color[17] : 'weikaishi']" class="module" style="position: relative;left: 1015px;top:247px; width: 80px;height: 48px;">
            <el-tooltip placement="top">
              <div slot="content">角色：冷作车间主任<br>冷作车间主任制定冷作计划，<br>并记录计划执行情况</div>
              <el-button :disabled="disabled" style="color: black;line-height:19px" type="text" @click="title='冷作';update()">冷作<br>{{ `${data[0].冷作百分比}%` }}</el-button>
            </el-tooltip>
          </div>
          <div :class="[isActive ? color[16] : 'weikaishi']" class="module" style="position: relative;left: 930px;top:319px; width: 80px;height: 48px;">
            <el-tooltip placement="top">
              <div slot="content">角色：油漆车间主任<br>油漆车间主任制定装配计划，<br>并记录计划执行情况</div>
              <el-button :disabled="disabled" style="color: black;line-height:19px" type="text" @click="title='油漆';update()">油漆<br>{{ `${data[0].油漆百分比}%` }}</el-button>
            </el-tooltip>
          </div>
          <div :class="[isActive ? color[15] : 'weikaishi']" class="module" style="position: relative;left: 695px;top:220px; width: 80px;height: 48px;">
            <el-tooltip placement="top">
              <div slot="content">角色：装配部长<br>此模块用于查询某机床是否达到装配条件，<br>即采购件与自制件是否成组配套</div>
              <el-button :disabled="disabled" style="color: black;line-height:19px" type="text" @click="title='成组配套';update()">成组配套<br>{{ `${data[0].成组配套百分比}%` }}</el-button>
            </el-tooltip>
          </div>
          <div :class="[isActive ? color[14] : 'weikaishi']" class="module" style="position: relative;left: 455px;top:55px; width: 80px;height: 48px;">
            <el-tooltip placement="top">
              <div slot="content">多行信息<br>第二行信息</div>
              <el-button :disabled="disabled" style="color: black;line-height:19px" type="text" @click="title='自制质检';update()">自制质检<br>{{ `${data[0].自制质检百分比}%` }}</el-button>
            </el-tooltip>
          </div>
          <div :class="[isActive ? color[13] : 'weikaishi']" class="module" style="position: relative;left: 373px;top:283px; width: 80px;height: 48px;">
            <el-tooltip placement="top">
              <div slot="content">多行信息<br>第二行信息</div>
              <el-button :disabled="disabled" style="color: black;line-height:19px" type="text" @click="title='采购质检';update()">采购质检<br>{{ `${data[0].采购质检百分比}%` }}</el-button>
            </el-tooltip>
          </div>
          <div :class="[isActive ? color[12] : 'weikaishi']" class="module" style="position: relative;left: 160px;top:110px; width: 80px;height: 48px;">
            <el-tooltip placement="top">
              <div slot="content">角色：金工车间<br>接收加工任务并使用<br>MES工作站进行报工</div>
              <el-button :disabled="disabled" style="color: black;line-height:19px" type="text" @click="title='车间加工';update()">车间加工<br>{{ `${data[0].车间加工百分比}%` }}</el-button>
            </el-tooltip>
          </div>
          <div :class="[isActive ? color[11] : 'weikaishi']" class="module" style="position: relative;left: -25px;top:-1px; width: 80px;height: 48px;">
            <el-tooltip placement="top">
              <div slot="content">多行信息<br>第二行信息</div>
              <el-button :disabled="disabled" style="color: black;line-height:19px" type="text" @click="title='工序外协';update()">工序外协<br>{{ `${data[0].工序外协百分比}%` }}</el-button>
            </el-tooltip>
          </div>
          <div :class="[isActive ? color[10] : 'weikaishi']" class="module" style="position: relative;left: -230px;top:54px; width: 80px;height: 48px;">
            <el-tooltip placement="top">
              <div slot="content">多行信息<br>第二行信息</div>
              <el-button :disabled="disabled" style="color: black;line-height:19px" type="text" @click="title='能力平衡';update()">能力平衡<br>{{ `${data[0].能力平衡百分比}%` }}</el-button>
            </el-tooltip>
          </div>
          <div :class="[isActive ? color[9] : 'weikaishi']" class="module" style="position: relative;left: -415px;top:54px; width: 80px;height: 48px;">
            <el-tooltip placement="top">
              <div slot="content">第二行信息</div>
              <el-button :disabled="disabled" style="color: black;line-height:19px" type="text" @click="title='定额';update()">定额<br>{{ `${data[0].定额百分比}%` }}</el-button>
            </el-tooltip>
          </div>
          <div :class="[isActive ? color[8] : 'weikaishi']" class="module" style="position: relative;left: -597px;top:54px; width: 80px;height: 48px;">
            <el-tooltip placement="top">
              <div slot="content">第二行信息</div>
              <el-button :disabled="disabled" style="color: black;line-height:19px" type="text" @click="title='工艺';update()">工艺<br>{{ `${data[0].工艺百分比}%` }}</el-button>
            </el-tooltip>
          </div>
          <div :class="[isActive ? color[7] : 'weikaishi']" class="module" style="position: relative;left: -805px;top:1px; width: 80px;height: 48px;">
            <el-tooltip placement="top">
              <div slot="content">角色：下料员<br>对于钢板等自家备料<br>下料员需要在系统确认备料<br>并通知金工领料</div>
              <el-button :disabled="disabled" style="color: black;line-height:19px" type="text" @click="title='自家备料';update()">自家备料<br>{{ `${data[0].自家备料百分比}%` }}</el-button>
            </el-tooltip>
          </div>
          <div :class="[isActive ? color[0] : 'weikaishi']" class="module" style="position: relative;left: -1350px;top:222px; width: 80px;height: 48px;">
            <el-tooltip placement="top">
              <div slot="content">角色：营销内勤<br>负责创建项目及机床的基础信息，<br>此部分作为系统数据的源头</div>
              <el-button :disabled="disabled" style="color: black;line-height:19px" type="text" @click="title = '签订合同';update()">签订合同<br>{{ `${data[0].签订合同百分比}%` }}</el-button>
            </el-tooltip>
          </div>
          <div :class="[isActive ? color[1] : 'weikaishi']" class="module" style="position: relative;left: -1336px;top:222px; width: 80px;height: 48px;">
            <el-tooltip placement="top">
              <div slot="content">角色：技术员<br>负责导入三表(零件)，<br>组件在项目启动会时提出，<br>由制造总监导入</div>
              <el-button :disabled="disabled" style="color: black;line-height:19px" type="text" @click="title = '产品设计';update()">产品设计<br>{{ `${data[0].产品设计百分比}%` }}</el-button>
            </el-tooltip>
          </div>
          <div :class="[isActive ? color[6] : 'weikaishi']" class="module" style="position: relative;left: -1057px;top:110px; width: 80px;height: 48px;">
            <el-tooltip placement="top">
              <div slot="content">角色：下料员<br>外购物料到货后，由下料员确认备料，<br>并通知金工领料</div>
              <el-button :disabled="disabled" style="color: black;line-height:19px" type="text" @click="title='外购备料';update()">外购备料<br>{{ `${data[0].外购备料百分比}%` }}</el-button>
            </el-tooltip>
          </div>
          <div :class="[isActive ? color[2] : 'weikaishi']" class="module" style="position: relative;left: -1405px;top:222px; width: 80px;height: 48px;">
            <el-tooltip placement="top">
              <div slot="content">角色：计划员<br>计划员负责将三表中的零件按实际情况分配为：<br>自制件、采购部采购件、制造部采购件三类</div>
              <el-button :disabled="disabled" style="color: black;line-height:19px" type="text" @click="title='零件分配';update()">零件分配<br>{{ `${data[0].零件分配百分比}%` }}</el-button>
            </el-tooltip>
          </div>
          <div :class="[isActive ? color[3] : 'weikaishi']" class="module" style="position: relative;left: -1350px;top:63px; width: 80px;height: 48px;">
            <el-tooltip placement="top">
              <div slot="content">角色：计划员<br>计划员分配零件后，<br>在生产计划下达模块<br>可查看到自家加工的零件任务，<br>计划员需要将这些零件投产</div>
              <el-button :disabled="disabled" style="color: black;line-height:19px" type="text" @click="title='自制件';update()">自制件<br>{{ `${data[0].自制件百分比}%` }}</el-button>
            </el-tooltip>
          </div>
          <div :class="[isActive ? color[5] : 'weikaishi']" class="module" style="position: relative;left: -1435px;top:223px; width: 80px;height: 48px;">
            <el-tooltip placement="top">
              <div slot="content">多行信息<br>第二行信息</div>
              <el-button :disabled="disabled" style="color: black;line-height:19px" type="text" @click="title='车间采购';update()">车间采购<br>{{ `${data[0].车间采购百分比}%` }}</el-button>
            </el-tooltip>
          </div>
          <div :class="[isActive ? color[4] : 'weikaishi']" class="module" style="position: relative;left: -548px;top:300px; width: 80px;height: 48px;">
            <el-tooltip placement="top">
              <div slot="content">多行信息<br>第二行信息</div>
              <el-button :disabled="disabled" style="color: black;line-height:19px" type="text" @click="title='采购部采购';update()">采购部采购<br>{{ `${data[0].采购部采购百分比}%` }}</el-button>
            </el-tooltip>
          </div>
        </div>
      </div>
    </el-card>
    <el-card style="height: 380px">
      <el-row>
        <h2>{{ title }}</h2>
      </el-row>
      <div style="margin: 0 auto;width: 400px">
        <el-row>
          <el-select v-model="value" placeholder="请选择" style="width: 200px" @change="select">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
          </el-select>
        </el-row>
        <el-row style="margin-top: 30px">
          <el-input-number v-model="num" :precision="2" :step="0.1" :max="100" style="width: 200px" @blur="blur"/>
        </el-row>
        <el-row style="margin-top: 30px">
          <el-button type="primary" style="width: 200px;padding-top: 12px" @click="save">保存</el-button>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script>
import { SelectMachine } from '@/api/ManufacturingCenter/ParseQuery'
import request from '@/utils/request'
export default {
  data() {
    return {
      name: '',
      name1: '',
      num: 0,
      options: [{
        value: 1,
        label: '未开始'
      }, {
        value: 2,
        label: '进行中'
      }, {
        value: 3,
        label: '已完成'
      }, {
        value: 4,
        label: '已拖期'
      }],
      value: '',
      title: '请点击查询',
      disabled: true,
      color: [],
      isActive: false,
      machineValue: '',
      searchCriteria: '', // 机床名称 V-model
      restaurants: [], // 机床名称数组
      data: [{
        签订合同百分比: 0,
        产品设计百分比: 0,
        零件分配百分比: 0,
        自制件百分比: 0,
        车间采购百分比: 0,
        采购部采购百分比: 0,
        自家备料百分比: 0,
        外购备料百分比: 0,
        工艺百分比: 0,
        定额百分比: 0,
        能力平衡百分比: 0,
        工序外协百分比: 0,
        车间加工百分比: 0,
        自制质检百分比: 0,
        采购质检百分比: 0,
        成组配套百分比: 0,
        电气装配百分比: 0,
        机械装配百分比: 0,
        冷作百分比: 0,
        油漆百分比: 0,
        装配质检百分比: 0,
        总装调试百分比: 0,
        发货百分比: 0
      }] // 百分比
    }
  },
  methods: {
    select() {
      if (this.value === 3) {
        this.num = 100
      }
    },
    blur() {
      if (this.num === 100) {
        this.value = 3
      }
    },
    // 清空查询条件
    clearMachine() {
      this.num = 0
      this.value = ''
      this.title = '请点击查询'
      this.machineValue = ''
      this.isActive = false
      this.disabled = true
      this.data[0].签订合同百分比 = 0
      this.data[0].产品设计百分比 = 0
      this.data[0].零件分配百分比 = 0
      this.data[0].自制件百分比 = 0
      this.data[0].车间采购百分比 = 0
      this.data[0].采购部采购百分比 = 0
      this.data[0].自家备料百分比 = 0
      this.data[0].外购备料百分比 = 0
      this.data[0].工艺百分比 = 0
      this.data[0].定额百分比 = 0
      this.data[0].能力平衡百分比 = 0
      this.data[0].工序外协百分比 = 0
      this.data[0].车间加工百分比 = 0
      this.data[0].自制质检百分比 = 0
      this.data[0].采购质检百分比 = 0
      this.data[0].成组配套百分比 = 0
      this.data[0].电气装配百分比 = 0
      this.data[0].机械装配百分比 = 0
      this.data[0].冷作百分比 = 0
      this.data[0].油漆百分比 = 0
      this.data[0].装配质检百分比 = 0
      this.data[0].总装调试百分比 = 0
      this.data[0].发货百分比 = 0
    },
    // 机床名称查询函数
    querySearch(queryString, cb) {
      this.restaurants = []
      if (this.searchCriteria !== '' && this.searchCriteria !== null) {
        SelectMachine(this.searchCriteria).then(response => {
          const res = response.data
          res.forEach(item => {
            this.restaurants.push({
              value: item.货品编号,
              num: item.机床流水号
            })
          })
          return this.restaurants
        }).then(data => {
          var restaurants = data
          var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
          return results
        }).then(data => {
          // 调用 callback 返回建议列表的数据
          cb(data)
        })
      }
    },
    // 机床名称实时请求查询匹配函数
    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1)
        // !== -1为全字匹配  === 0为首字匹配
      }
    },
    // 选择机床名称后的赋值函数
    async handleSelect(item) {
      // 在此方法中可以把下拉框选中值中的内容赋值给其他变量使用
      this.machineValue = item.num
      this.machineValue ? this.disabled = false : this.disabled = true
      this.title = '请点击选择'
      await request({
        url: '',
        method: 'post',
        data: {
          type: '3',
          name: `select * from 综合查询_状态 where 机床流水号 = ${this.machineValue}`
        }
      }).then(res => {
        this.isActive = true
        this.data = res.data
        if (res.data[0].签订合同状态 === 1) { this.color[0] = 'weikaishi' } else if (res.data[0].签订合同状态 === 2) { this.color[0] = 'jixingzhong' } else if (res.data[0].签订合同状态 === 3) { this.color[0] = 'yiwancheng' } else if (res.data[0].签订合同状态 === 4) { this.color[0] = 'red' }
        if (res.data[0].产品设计状态 === 1) { this.color[1] = 'weikaishi' } else if (res.data[0].产品设计状态 === 2) { this.color[1] = 'jixingzhong' } else if (res.data[0].产品设计状态 === 3) { this.color[1] = 'yiwancheng' } else if (res.data[0].产品设计状态 === 4) { this.color[1] = 'red' }
        if (res.data[0].零件分配状态 === 1) { this.color[2] = 'weikaishi' } else if (res.data[0].零件分配状态 === 2) { this.color[2] = 'jixingzhong' } else if (res.data[0].零件分配状态 === 3) { this.color[2] = 'yiwancheng' } else if (res.data[0].零件分配状态 === 4) { this.color[2] = 'red' }
        if (res.data[0].自制件状态 === 1) { this.color[3] = 'weikaishi' } else if (res.data[0].自制件状态 === 2) { this.color[3] = 'jixingzhong' } else if (res.data[0].自制件状态 === 3) { this.color[3] = 'yiwancheng' } else if (res.data[0].自制件状态 === 4) { this.color[3] = 'red' }
        if (res.data[0].采购部采购状态 === 1) { this.color[4] = 'weikaishi' } else if (res.data[0].采购部采购状态 === 2) { this.color[4] = 'jixingzhong' } else if (res.data[0].采购部采购状态 === 3) { this.color[4] = 'yiwancheng' } else if (res.data[0].采购部采购状态 === 4) { this.color[4] = 'red' }
        if (res.data[0].车间采购状态 === 1) { this.color[5] = 'weikaishi' } else if (res.data[0].车间采购状态 === 2) { this.color[5] = 'jixingzhong' } else if (res.data[0].车间采购状态 === 3) { this.color[5] = 'yiwancheng' } else if (res.data[0].车间采购状态 === 4) { this.color[5] = 'red' }
        if (res.data[0].外购备料状态 === 1) { this.color[6] = 'weikaishi' } else if (res.data[0].外购备料状态 === 2) { this.color[6] = 'jixingzhong' } else if (res.data[0].外购备料状态 === 3) { this.color[6] = 'yiwancheng' } else if (res.data[0].外购备料状态 === 4) { this.color[6] = 'red' }
        if (res.data[0].自家备料状态 === 1) { this.color[7] = 'weikaishi' } else if (res.data[0].自家备料状态 === 2) { this.color[7] = 'jixingzhong' } else if (res.data[0].自家备料状态 === 3) { this.color[7] = 'yiwancheng' } else if (res.data[0].自家备料状态 === 4) { this.color[7] = 'red' }
        if (res.data[0].工艺状态 === 1) { this.color[8] = 'weikaishi' } else if (res.data[0].工艺状态 === 2) { this.color[8] = 'jixingzhong' } else if (res.data[0].工艺状态 === 3) { this.color[8] = 'yiwancheng' } else if (res.data[0].工艺状态 === 4) { this.color[8] = 'red' }
        if (res.data[0].定额状态 === 1) { this.color[9] = 'weikaishi' } else if (res.data[0].定额状态 === 2) { this.color[9] = 'jixingzhong' } else if (res.data[0].定额状态 === 3) { this.color[9] = 'yiwancheng' } else if (res.data[0].定额状态 === 4) { this.color[9] = 'red' }
        if (res.data[0].能力平衡状态 === 1) { this.color[10] = 'weikaishi' } else if (res.data[0].能力平衡状态 === 2) { this.color[10] = 'jixingzhong' } else if (res.data[0].能力平衡状态 === 3) { this.color[10] = 'yiwancheng' } else if (res.data[0].能力平衡状态 === 4) { this.color[10] = 'red' }
        if (res.data[0].工序外协状态 === 1) { this.color[11] = 'weikaishi' } else if (res.data[0].工序外协状态 === 2) { this.color[11] = 'jixingzhong' } else if (res.data[0].工序外协状态 === 3) { this.color[11] = 'yiwancheng' } else if (res.data[0].工序外协状态 === 4) { this.color[11] = 'red' }
        if (res.data[0].车间加工状态 === 1) { this.color[12] = 'weikaishi' } else if (res.data[0].车间加工状态 === 2) { this.color[12] = 'jixingzhong' } else if (res.data[0].车间加工状态 === 3) { this.color[12] = 'yiwancheng' } else if (res.data[0].车间加工状态 === 4) { this.color[12] = 'red' }
        if (res.data[0].采购质检状态 === 1) { this.color[13] = 'weikaishi' } else if (res.data[0].采购质检状态 === 2) { this.color[13] = 'jixingzhong' } else if (res.data[0].采购质检状态 === 3) { this.color[13] = 'yiwancheng' } else if (res.data[0].采购质检状态 === 4) { this.color[13] = 'red' }
        if (res.data[0].自制质检状态 === 1) { this.color[14] = 'weikaishi' } else if (res.data[0].自制质检状态 === 2) { this.color[14] = 'jixingzhong' } else if (res.data[0].自制质检状态 === 3) { this.color[14] = 'yiwancheng' } else if (res.data[0].自制质检状态 === 4) { this.color[14] = 'red' }
        if (res.data[0].成组配套状态 === 1) { this.color[15] = 'weikaishi' } else if (res.data[0].成组配套状态 === 2) { this.color[15] = 'jixingzhong' } else if (res.data[0].成组配套状态 === 3) { this.color[15] = 'yiwancheng' } else if (res.data[0].成组配套状态 === 4) { this.color[15] = 'red' }
        if (res.data[0].油漆状态 === 1) { this.color[16] = 'weikaishi' } else if (res.data[0].油漆状态 === 2) { this.color[16] = 'jixingzhong' } else if (res.data[0].油漆状态 === 3) { this.color[16] = 'yiwancheng' } else if (res.data[0].油漆状态 === 4) { this.color[16] = 'red' }
        if (res.data[0].冷作状态 === 1) { this.color[17] = 'weikaishi' } else if (res.data[0].冷作状态 === 2) { this.color[17] = 'jixingzhong' } else if (res.data[0].冷作状态 === 3) { this.color[17] = 'yiwancheng' } else if (res.data[0].冷作状态 === 4) { this.color[17] = 'red' }
        if (res.data[0].机械装配状态 === 1) { this.color[18] = 'weikaishi' } else if (res.data[0].机械装配状态 === 2) { this.color[18] = 'jixingzhong' } else if (res.data[0].机械装配状态 === 3) { this.color[18] = 'yiwancheng' } else if (res.data[0].机械装配状态 === 4) { this.color[18] = 'red' }
        if (res.data[0].电气装配状态 === 1) { this.color[19] = 'weikaishi' } else if (res.data[0].电气装配状态 === 2) { this.color[19] = 'jixingzhong' } else if (res.data[0].电气装配状态 === 3) { this.color[19] = 'yiwancheng' } else if (res.data[0].电气装配状态 === 4) { this.color[19] = 'red' }
        if (res.data[0].装配质检状态 === 1) { this.color[20] = 'weikaishi' } else if (res.data[0].装配质检状态 === 2) { this.color[20] = 'jixingzhong' } else if (res.data[0].装配质检状态 === 3) { this.color[20] = 'yiwancheng' } else if (res.data[0].装配质检状态 === 4) { this.color[20] = 'red' }
        if (res.data[0].总装调试状态 === 1) { this.color[21] = 'weikaishi' } else if (res.data[0].总装调试状态 === 2) { this.color[21] = 'jixingzhong' } else if (res.data[0].总装调试状态 === 3) { this.color[21] = 'yiwancheng' } else if (res.data[0].总装调试状态 === 4) { this.color[21] = 'red' }
        if (res.data[0].发货状态 === 1) { this.color[22] = 'weikaishi' } else if (res.data[0].发货状态 === 2) { this.color[22] = 'jixingzhong' } else if (res.data[0].发货状态 === 3) { this.color[22] = 'yiwancheng' } else if (res.data[0].发货状态 === 4) { this.color[22] = 'red' }
      })
    },
    async update() {
      if (this.title === '签订合同') { this.name1 = `select 签订合同状态,签订合同百分比 from 综合查询_状态 where 机床流水号 = ${this.machineValue}` }
      if (this.title === '产品设计') { this.name1 = `select 产品设计状态,产品设计百分比 from 综合查询_状态 where 机床流水号 = ${this.machineValue}` }
      if (this.title === '零件分配') { this.name1 = `select 零件分配状态,零件分配百分比 from 综合查询_状态 where 机床流水号 = ${this.machineValue}` }
      if (this.title === '自制件') { this.name1 = `select 自制件状态,自制件百分比 from 综合查询_状态 where 机床流水号 = ${this.machineValue}` }
      if (this.title === '车间采购') { this.name1 = `select 车间采购状态,车间采购百分比 from 综合查询_状态 where 机床流水号 = ${this.machineValue}` }
      if (this.title === '采购部采购') { this.name1 = `select 采购部采购状态,采购部采购百分比 from 综合查询_状态 where 机床流水号 = ${this.machineValue}` }
      if (this.title === '自家备料') { this.name1 = `select 自家备料状态,自家备料百分比 from 综合查询_状态 where 机床流水号 = ${this.machineValue}` }
      if (this.title === '外购备料') { this.name1 = `select 外购备料状态,外购备料百分比 from 综合查询_状态 where 机床流水号 = ${this.machineValue}` }
      if (this.title === '工艺') { this.name1 = `select 工艺状态,工艺百分比 from 综合查询_状态 where 机床流水号 = ${this.machineValue}` }
      if (this.title === '定额') { this.name1 = `select 定额状态,定额百分比 from 综合查询_状态 where 机床流水号 = ${this.machineValue}` }
      if (this.title === '能力平衡') { this.name1 = `select 能力平衡状态,能力平衡百分比 from 综合查询_状态 where 机床流水号 = ${this.machineValue}` }
      if (this.title === '工序外协') { this.name1 = `select 工序外协状态,工序外协百分比 from 综合查询_状态 where 机床流水号 = ${this.machineValue}` }
      if (this.title === '车间加工') { this.name1 = `select 车间加工状态,车间加工百分比 from 综合查询_状态 where 机床流水号 = ${this.machineValue}` }
      if (this.title === '自制质检') { this.name1 = `select 自制质检状态,自制质检百分比 from 综合查询_状态 where 机床流水号 = ${this.machineValue}` }
      if (this.title === '采购质检') { this.name1 = `select 采购质检状态,采购质检百分比 from 综合查询_状态 where 机床流水号 = ${this.machineValue}` }
      if (this.title === '成组配套') { this.name1 = `select 成组配套状态,成组配套百分比 from 综合查询_状态 where 机床流水号 = ${this.machineValue}` }
      if (this.title === '电气装配') { this.name1 = `select 电气装配状态,电气装配百分比 from 综合查询_状态 where 机床流水号 = ${this.machineValue}` }
      if (this.title === '机械装配') { this.name1 = `select 机械装配状态,机械装配百分比 from 综合查询_状态 where 机床流水号 = ${this.machineValue}` }
      if (this.title === '冷作') { this.name1 = `select 冷作状态,冷作百分比 from 综合查询_状态 where 机床流水号 = ${this.machineValue}` }
      if (this.title === '油漆') { this.name1 = `select 油漆状态,油漆百分比 from 综合查询_状态 where 机床流水号 = ${this.machineValue}` }
      if (this.title === '装配质检') { this.name1 = `select 装配质检状态,装配质检百分比 from 综合查询_状态 where 机床流水号 = ${this.machineValue}` }
      if (this.title === '总装调试') { this.name1 = `select 总装调试状态,总装调试百分比 from 综合查询_状态 where 机床流水号 = ${this.machineValue}` }
      if (this.title === '发货') { this.name1 = `select 发货状态,发货百分比 from 综合查询_状态 where 机床流水号 = ${this.machineValue}` }
      await request({
        url: '',
        method: 'post',
        data: {
          type: '3',
          name: this.name1
        }
      }).then(res => {
        switch (this.title) {
          case '签订合同':
            this.value = res.data[0].签订合同状态
            this.num = res.data[0].签订合同百分比
            break
          case '产品设计':
            this.value = res.data[0].产品设计状态
            this.num = res.data[0].产品设计百分比
            break
          case '零件分配':
            this.value = res.data[0].零件分配状态
            this.num = res.data[0].零件分配百分比
            break
          case '自制件':
            this.value = res.data[0].自制件状态
            this.num = res.data[0].自制件百分比
            break
          case '车间采购':
            this.value = res.data[0].车间采购状态
            this.num = res.data[0].车间采购百分比
            break
          case '采购部采购':
            this.value = res.data[0].采购部采购状态
            this.num = res.data[0].采购部采购百分比
            break
          case '自家备料':
            this.value = res.data[0].自家备料状态
            this.num = res.data[0].自家备料百分比
            break
          case '外购备料':
            this.value = res.data[0].外购备料状态
            this.num = res.data[0].外购备料百分比
            break
          case '工艺':
            this.value = res.data[0].工艺状态
            this.num = res.data[0].工艺百分比
            break
          case '定额':
            this.value = res.data[0].定额状态
            this.num = res.data[0].定额百分比
            break
          case '能力平衡':
            this.value = res.data[0].能力平衡状态
            this.num = res.data[0].能力平衡百分比
            break
          case '工序外协':
            this.value = res.data[0].工序外协状态
            this.num = res.data[0].工序外协百分比
            break
          case '车间加工':
            this.value = res.data[0].车间加工状态
            this.num = res.data[0].车间加工百分比
            break
          case '自制质检':
            this.value = res.data[0].自制质检状态
            this.num = res.data[0].自制质检百分比
            break
          case '采购质检':
            this.value = res.data[0].采购质检状态
            this.num = res.data[0].采购质检百分比
            break
          case '成组配套':
            this.value = res.data[0].成组配套状态
            this.num = res.data[0].成组配套百分比
            break
          case '电气装配':
            this.value = res.data[0].电气装配状态
            this.num = res.data[0].电气装配百分比
            break
          case '机械装配':
            this.value = res.data[0].机械装配状态
            this.num = res.data[0].机械装配百分比
            break
          case '冷作':
            this.value = res.data[0].冷作状态
            this.num = res.data[0].冷作百分比
            break
          case '油漆':
            this.value = res.data[0].油漆状态
            this.num = res.data[0].油漆百分比
            break
          case '装配质检':
            this.value = res.data[0].装配质检状态
            this.num = res.data[0].装配质检百分比
            break
          case '总装调试':
            this.value = res.data[0].总装调试状态
            this.num = res.data[0].总装调试百分比
            break
          case '发货':
            this.value = res.data[0].发货状态
            this.num = res.data[0].发货百分比
            break
          default:
        }
      })
    },
    async save() {
      if (this.title === '签订合同') { this.name = `update 综合查询_状态 set 签订合同状态 = ${this.value},签订合同百分比= ${this.num} where 机床流水号 = ${this.machineValue}` }
      if (this.title === '产品设计') { this.name = `update 综合查询_状态 set 产品设计状态 = ${this.value},产品设计百分比= ${this.num} where 机床流水号 = ${this.machineValue}` }
      if (this.title === '零件分配') { this.name = `update 综合查询_状态 set 零件分配状态 = ${this.value},零件分配百分比= ${this.num} where 机床流水号 = ${this.machineValue}` }
      if (this.title === '自制件') { this.name = `update 综合查询_状态 set 自制件状态 = ${this.value},自制件百分比= ${this.num} where 机床流水号 = ${this.machineValue}` }
      if (this.title === '车间采购') { this.name = `update 综合查询_状态 set 车间采购状态 = ${this.value},车间采购百分比= ${this.num} where 机床流水号 = ${this.machineValue}` }
      if (this.title === '采购部采购') { this.name = `update 综合查询_状态 set 采购部采购状态 = ${this.value},采购部采购百分比= ${this.num} where 机床流水号 = ${this.machineValue}` }
      if (this.title === '自家备料') { this.name = `update 综合查询_状态 set 自家备料状态 = ${this.value},自家备料百分比= ${this.num} where 机床流水号 = ${this.machineValue}` }
      if (this.title === '外购备料') { this.name = `update 综合查询_状态 set 外购备料状态 = ${this.value},外购备料百分比= ${this.num} where 机床流水号 = ${this.machineValue}` }
      if (this.title === '工艺') { this.name = `update 综合查询_状态 set 工艺状态 = ${this.value},工艺百分比= ${this.num} where 机床流水号 = ${this.machineValue}` }
      if (this.title === '定额') { this.name = `update 综合查询_状态 set 定额状态 = ${this.value},定额百分比= ${this.num} where 机床流水号 = ${this.machineValue}` }
      if (this.title === '能力平衡') { this.name = `update 综合查询_状态 set 能力平衡状态 = ${this.value},能力平衡百分比= ${this.num} where 机床流水号 = ${this.machineValue}` }
      if (this.title === '工序外协') { this.name = `update 综合查询_状态 set 工序外协状态 = ${this.value},工序外协百分比= ${this.num} where 机床流水号 = ${this.machineValue}` }
      if (this.title === '车间加工') { this.name = `update 综合查询_状态 set 车间加工状态 = ${this.value},车间加工百分比= ${this.num} where 机床流水号 = ${this.machineValue}` }
      if (this.title === '自制质检') { this.name = `update 综合查询_状态 set 自制质检状态 = ${this.value},自制质检百分比= ${this.num} where 机床流水号 = ${this.machineValue}` }
      if (this.title === '采购质检') { this.name = `update 综合查询_状态 set 采购质检状态 = ${this.value},采购质检百分比= ${this.num} where 机床流水号 = ${this.machineValue}` }
      if (this.title === '成组配套') { this.name = `update 综合查询_状态 set 成组配套状态 = ${this.value},成组配套百分比= ${this.num} where 机床流水号 = ${this.machineValue}` }
      if (this.title === '电气装配') { this.name = `update 综合查询_状态 set 电气装配状态 = ${this.value},电气装配百分比= ${this.num} where 机床流水号 = ${this.machineValue}` }
      if (this.title === '机械装配') { this.name = `update 综合查询_状态 set 机械装配状态 = ${this.value},机械装配百分比= ${this.num} where 机床流水号 = ${this.machineValue}` }
      if (this.title === '冷作') { this.name = `update 综合查询_状态 set 冷作状态 = ${this.value},冷作百分比= ${this.num} where 机床流水号 = ${this.machineValue}` }
      if (this.title === '油漆') { this.name = `update 综合查询_状态 set 油漆状态 = ${this.value},油漆百分比= ${this.num} where 机床流水号 = ${this.machineValue}` }
      if (this.title === '装配质检') { this.name = `update 综合查询_状态 set 装配质检状态 = ${this.value},装配质检百分比= ${this.num} where 机床流水号 = ${this.machineValue}` }
      if (this.title === '总装调试') { this.name = `update 综合查询_状态 set 总装调试状态 = ${this.value},总装调试百分比= ${this.num} where 机床流水号 = ${this.machineValue}` }
      if (this.title === '发货') { this.name = `update 综合查询_状态 set 发货状态 = ${this.value},发货百分比= ${this.num} where 机床流水号 = ${this.machineValue}` }
      if (this.title !== '请点击查询') {
        await request({
          url: '',
          method: 'post',
          data: {
            type: '3',
            name: this.name
          }
        }).then(res => {
          console.log(res)
          if (res.data.length === 0) {
            this.$message.success('保存成功')
          } else {
            this.$message.error('保存失败')
          }
        }).then(() => {
          request({
            url: '',
            method: 'post',
            data: {
              type: '3',
              name: `select * from 综合查询_状态 where 机床流水号 = ${this.machineValue}`
            }
          }).then(res => {
            this.isActive = true
            this.data = res.data
            if (res.data[0].签订合同状态 === 1) { this.color[0] = 'weikaishi' } else if (res.data[0].签订合同状态 === 2) { this.color[0] = 'jixingzhong' } else if (res.data[0].签订合同状态 === 3) { this.color[0] = 'yiwancheng' } else if (res.data[0].签订合同状态 === 4) { this.color[0] = 'red' }
            if (res.data[0].产品设计状态 === 1) { this.color[1] = 'weikaishi' } else if (res.data[0].产品设计状态 === 2) { this.color[1] = 'jixingzhong' } else if (res.data[0].产品设计状态 === 3) { this.color[1] = 'yiwancheng' } else if (res.data[0].产品设计状态 === 4) { this.color[1] = 'red' }
            if (res.data[0].零件分配状态 === 1) { this.color[2] = 'weikaishi' } else if (res.data[0].零件分配状态 === 2) { this.color[2] = 'jixingzhong' } else if (res.data[0].零件分配状态 === 3) { this.color[2] = 'yiwancheng' } else if (res.data[0].零件分配状态 === 4) { this.color[2] = 'red' }
            if (res.data[0].自制件状态 === 1) { this.color[3] = 'weikaishi' } else if (res.data[0].自制件状态 === 2) { this.color[3] = 'jixingzhong' } else if (res.data[0].自制件状态 === 3) { this.color[3] = 'yiwancheng' } else if (res.data[0].自制件状态 === 4) { this.color[3] = 'red' }
            if (res.data[0].采购部采购状态 === 1) { this.color[4] = 'weikaishi' } else if (res.data[0].采购部采购状态 === 2) { this.color[4] = 'jixingzhong' } else if (res.data[0].采购部采购状态 === 3) { this.color[4] = 'yiwancheng' } else if (res.data[0].采购部采购状态 === 4) { this.color[4] = 'red' }
            if (res.data[0].车间采购状态 === 1) { this.color[5] = 'weikaishi' } else if (res.data[0].车间采购状态 === 2) { this.color[5] = 'jixingzhong' } else if (res.data[0].车间采购状态 === 3) { this.color[5] = 'yiwancheng' } else if (res.data[0].车间采购状态 === 4) { this.color[5] = 'red' }
            if (res.data[0].外购备料状态 === 1) { this.color[6] = 'weikaishi' } else if (res.data[0].外购备料状态 === 2) { this.color[6] = 'jixingzhong' } else if (res.data[0].外购备料状态 === 3) { this.color[6] = 'yiwancheng' } else if (res.data[0].外购备料状态 === 4) { this.color[6] = 'red' }
            if (res.data[0].自家备料状态 === 1) { this.color[7] = 'weikaishi' } else if (res.data[0].自家备料状态 === 2) { this.color[7] = 'jixingzhong' } else if (res.data[0].自家备料状态 === 3) { this.color[7] = 'yiwancheng' } else if (res.data[0].自家备料状态 === 4) { this.color[7] = 'red' }
            if (res.data[0].工艺状态 === 1) { this.color[8] = 'weikaishi' } else if (res.data[0].工艺状态 === 2) { this.color[8] = 'jixingzhong' } else if (res.data[0].工艺状态 === 3) { this.color[8] = 'yiwancheng' } else if (res.data[0].工艺状态 === 4) { this.color[8] = 'red' }
            if (res.data[0].定额状态 === 1) { this.color[9] = 'weikaishi' } else if (res.data[0].定额状态 === 2) { this.color[9] = 'jixingzhong' } else if (res.data[0].定额状态 === 3) { this.color[9] = 'yiwancheng' } else if (res.data[0].定额状态 === 4) { this.color[9] = 'red' }
            if (res.data[0].能力平衡状态 === 1) { this.color[10] = 'weikaishi' } else if (res.data[0].能力平衡状态 === 2) { this.color[10] = 'jixingzhong' } else if (res.data[0].能力平衡状态 === 3) { this.color[10] = 'yiwancheng' } else if (res.data[0].能力平衡状态 === 4) { this.color[10] = 'red' }
            if (res.data[0].工序外协状态 === 1) { this.color[11] = 'weikaishi' } else if (res.data[0].工序外协状态 === 2) { this.color[11] = 'jixingzhong' } else if (res.data[0].工序外协状态 === 3) { this.color[11] = 'yiwancheng' } else if (res.data[0].工序外协状态 === 4) { this.color[11] = 'red' }
            if (res.data[0].车间加工状态 === 1) { this.color[12] = 'weikaishi' } else if (res.data[0].车间加工状态 === 2) { this.color[12] = 'jixingzhong' } else if (res.data[0].车间加工状态 === 3) { this.color[12] = 'yiwancheng' } else if (res.data[0].车间加工状态 === 4) { this.color[12] = 'red' }
            if (res.data[0].采购质检状态 === 1) { this.color[13] = 'weikaishi' } else if (res.data[0].采购质检状态 === 2) { this.color[13] = 'jixingzhong' } else if (res.data[0].采购质检状态 === 3) { this.color[13] = 'yiwancheng' } else if (res.data[0].采购质检状态 === 4) { this.color[13] = 'red' }
            if (res.data[0].自制质检状态 === 1) { this.color[14] = 'weikaishi' } else if (res.data[0].自制质检状态 === 2) { this.color[14] = 'jixingzhong' } else if (res.data[0].自制质检状态 === 3) { this.color[14] = 'yiwancheng' } else if (res.data[0].自制质检状态 === 4) { this.color[14] = 'red' }
            if (res.data[0].成组配套状态 === 1) { this.color[15] = 'weikaishi' } else if (res.data[0].成组配套状态 === 2) { this.color[15] = 'jixingzhong' } else if (res.data[0].成组配套状态 === 3) { this.color[15] = 'yiwancheng' } else if (res.data[0].成组配套状态 === 4) { this.color[15] = 'red' }
            if (res.data[0].油漆状态 === 1) { this.color[16] = 'weikaishi' } else if (res.data[0].油漆状态 === 2) { this.color[16] = 'jixingzhong' } else if (res.data[0].油漆状态 === 3) { this.color[16] = 'yiwancheng' } else if (res.data[0].油漆状态 === 4) { this.color[16] = 'red' }
            if (res.data[0].冷作状态 === 1) { this.color[17] = 'weikaishi' } else if (res.data[0].冷作状态 === 2) { this.color[17] = 'jixingzhong' } else if (res.data[0].冷作状态 === 3) { this.color[17] = 'yiwancheng' } else if (res.data[0].冷作状态 === 4) { this.color[17] = 'red' }
            if (res.data[0].机械装配状态 === 1) { this.color[18] = 'weikaishi' } else if (res.data[0].机械装配状态 === 2) { this.color[18] = 'jixingzhong' } else if (res.data[0].机械装配状态 === 3) { this.color[18] = 'yiwancheng' } else if (res.data[0].机械装配状态 === 4) { this.color[18] = 'red' }
            if (res.data[0].电气装配状态 === 1) { this.color[19] = 'weikaishi' } else if (res.data[0].电气装配状态 === 2) { this.color[19] = 'jixingzhong' } else if (res.data[0].电气装配状态 === 3) { this.color[19] = 'yiwancheng' } else if (res.data[0].电气装配状态 === 4) { this.color[19] = 'red' }
            if (res.data[0].装配质检状态 === 1) { this.color[20] = 'weikaishi' } else if (res.data[0].装配质检状态 === 2) { this.color[20] = 'jixingzhong' } else if (res.data[0].装配质检状态 === 3) { this.color[20] = 'yiwancheng' } else if (res.data[0].装配质检状态 === 4) { this.color[20] = 'red' }
            if (res.data[0].总装调试状态 === 1) { this.color[21] = 'weikaishi' } else if (res.data[0].总装调试状态 === 2) { this.color[21] = 'jixingzhong' } else if (res.data[0].总装调试状态 === 3) { this.color[21] = 'yiwancheng' } else if (res.data[0].总装调试状态 === 4) { this.color[21] = 'red' }
            if (res.data[0].发货状态 === 1) { this.color[22] = 'weikaishi' } else if (res.data[0].发货状态 === 2) { this.color[22] = 'jixingzhong' } else if (res.data[0].发货状态 === 3) { this.color[22] = 'yiwancheng' } else if (res.data[0].发货状态 === 4) { this.color[22] = 'red' }
          })
        })
      } else {
        this.$message.error('请选择节点')
      }
    }
  }
}
</script>

<style scoped>
  .red{
    background: red;
  }
  .jixingzhong{
    background: #7eaced;
    color: black;
    font-weight: bold;
  }
  .yiwancheng{
    background: #ff9759;
    color: black;
    font-weight: bold;
  }
  .weikaishi{
    background: #EAEAEA;
    color: black;
    font-weight: bold;
  }
  .el-card{
    margin: 5px 10px 5px 10px;
  }
  .showDiv{
    height: 380px;
  }
  .module{
    border-radius: 6px;
    /*background-color: white;*/
    display: inline-block;
  }
  .module:hover{
    box-shadow: 5px 5px 5px #888888;/*设置阴影,可以自定义参数*/
  }
  .process{
    text-align: center;
    margin-left: 80px;
    margin-top: 20px;
    width: 1858px;
    height: 400px;
    /*border: 1px solid red;*/
    background: url('../../../assets/img/img10.png') repeat;
    background-repeat:no-repeat;
    background-size:100% 100%;-moz-background-size:100% 100%;
  }
  .main{
    border: 1px solid  #DCDFE6;
    width:100%;
    overflow-y: hidden;
    overflow-x: auto;
    color: #000;
    font-size: 16px;
    height: 440px;
  }
  .main p{height:300px;}
  /*-------滚动条整体样式----*/
  .main::-webkit-scrollbar {
    width:8px;
    height:8px;
  }
  /*滚动条里面小方块样式*/
  .main::-webkit-scrollbar-thumb {
    border-radius:100px;
    -webkit-box-shadow:inset 0 0 5px rgba(0,0,0,0.2);
    background:#DCDFE6;
  }
  /*滚动条里面轨道样式*/
  .main::-webkit-scrollbar-track {
    -webkit-box-shadow:inset 0 0 5px rgba(0,0,0,0.2);
    border-radius:0;
    background:white;
  }
  .red{
    background: red;
  }
  .el-button{
    padding-top: 5px;
  }
</style>
