<template>
  <div>
    <!--导航栏 -->
    <div class="hxjx_root">

      <div style="width:55%;overflow:hidden;">
        <table class="table  table-hover table-bordered table-striped table-condensed text-nowrap">
          <thead class="hxjx_table_th">
          <tr>
            <th class="hxjx_table_th_width">序号</th>
            <th class="hxjx_table_th_width">钽靶批号</th>
            <th class="hxjx_table_th_width">规格</th>
            <th class="hxjx_table_th_width">工艺</th>
            <th class="hxjx_table_th_width">直径</th>
          </tr>
          </thead>
          <tbody>
          <tr v-if="dataList.length>0" v-for="(item,index) in dataList">
            <td class="hxjx_table_btnColumn"
                :class="[{table_td_warn: item.operation===1},{table_td_error:item.state===3}]"
            >{{ index + 1 }}
            </td>
            <td class="hxjx_table_btnColumn"
                :class="[{table_td_warn: item.operation===1},{table_td_error:item.state===3}]"
            >{{ item.id }}
            </td>
            <td class="hxjx_table_btnColumn"
                style="max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"
                :title="item.specification"
                :class="[{table_td_warn: item.operation===1},{table_td_error:item.state===3}]"
            >
              {{ item.specification }}
            </td>
            <td class="hxjx_table_btnColumn"
                :class="[{table_td_warn: item.operation===1},{table_td_error:item.state===3}]"
            >
              {{ item.technology }}
            </td>
            <td class="hxjx_table_btnColumn"
                :class="[{table_td_warn: item.operation===1},{table_td_error:item.state===3}]"
            >{{ item.diameter }}
            </td>
          </tr>
          <tr v-if="dataList.length<=0">
            <td class="hxjx_table_btnColumn"
                style="height: 150px;vertical-align: middle;text-align: center;" colspan="5" rowspan="8"
            >
              等待下一批次材料轧制
            </td>
          </tr>
          </tbody>
        </table>
        <!-- 按钮操作 -->
        <table class="table">
          <tr>
            <td class="hxjx_footer_main" style="padding: 0;">
              <div class="btn-group btn-group-sm">
                <a href="#" class="btn btn-primary btn-sm custom hxjx_foot_btn_custom"
                   @click="nextStep" v-loading="nextStepLoading"
                >下道次</a>
                <a href="#" class="btn btn-primary btn-sm custom hxjx_foot_btn_custom"
                   @click="startProcess"
                >开始轧制</a>
                <a href="#" class="btn btn-primary btn-sm custom hxjx_foot_btn_custom"
                   @click="finishProcess"
                   style="margin-right: 0;"
                >轧制完成</a>
              </div>
            </td>
          </tr>
        </table>

      </div>
      <div style="width:45%;">
        <table class="table  table-hover table-bordered table-striped table-condensed text-nowrap"
               style="font-size: small"
        >
          <thead class="hxjx_table_th">
          <tr>
            <th class="hxjx_table_th_width">批号</th>
            <th class="hxjx_table_th_width">轧制道次</th>
            <th class="hxjx_table_th_width">压下量</th>
            <th class="hxjx_table_th_width">辊缝设定值</th>
            <th class="hxjx_table_th_width">喂料角度</th>
            <th class="hxjx_table_th_width">完成</th>
          </tr>
          </thead>
          <tbody>
          <td class="hxjx_table_btnColumn" rowspan="5"
              style="vertical-align: middle;text-align: center;" v-if="processing.id!=null"
          >
            {{ processing.id }}
          </td>

          <td class="hxjx_table_btnColumn" rowspan="5"
              style="vertical-align: middle;text-align: center;" v-else
          >
            当前无可用操作批号
          </td>

          <tr v-for="(item,index) in passList">
            <td class="hxjx_table_btnColumn" :class="{table_td_unstart: item.operation===1}">{{ item.step }}</td>
            <td class="hxjx_table_btnColumn" :class="{table_td_unstart: item.operation===1}">
              {{ item.reduction }}
            </td>
            <td class="hxjx_table_btnColumn" :class="{table_td_unstart: item.operation===1}">{{ item.setValue }}
            </td>
            <td class="hxjx_table_btnColumn" :class="{table_td_unstart: item.operation===1}">{{ item.angle }}</td>
            <td class="hxjx_table_btnColumn" :class="{table_td_unstart: item.operation===1}">
              <div class="circle_finish" v-if="item.state===1"></div>
              <div class="circle_error" v-if="item.state===2"></div>
              <div class="circle_unstart" v-if="item.state===0 && item.operation===1"></div>
              <div class="circle_unstart2" v-if="item.state===0 && item.operation!==1"></div>
            </td>
          </tr>
          <tr v-if="passList==[]" v-for="item in 4">
            <td class="hxjx_table_btnColumn"></td>
            <td class="hxjx_table_btnColumn"></td>
            <td class="hxjx_table_btnColumn"></td>
            <td class="hxjx_table_btnColumn"></td>
            <td class="hxjx_table_btnColumn">
              <div class="circle_unstart"></div>
            </td>
          </tr>
          </tbody>
        </table>

        <!-- 旋转角度 -->
        <div style="width:100%;height:350px;display: flex;justify-content: space-between">
          <div style="display: flex;margin-bottom: 15px;">
            <img src="../../../assets/img/FlowChart-2-1.png" class="imageCircle"
                 :style="{transform: 'rotate(-' + circleStart + 'deg)'}"
            />
            <img src="../../../assets/img/FlowChart-2-2.png" class="image-circle-rows">
          </div>
          <div style="">

            <el-button type="success" plain
                       @click="submit(1)" :loading="!submitButton"
            >确认
            </el-button>
            <el-button type="danger" plain
                       style="margin-right: 0;" :loading="!submitButton" @click="submit(2)"
            >异常
            </el-button>
          </div>
        </div>
      </div>
    </div>

    <div style="margin-top: -150px">
      <table class="table table-borderless hxjx_table_text_left">
        <tbody>
        <tr>
          <td class="hxjx_table_label_format hxjx_table_label">传动侧油缸位置:</td>
          <td class="hxjx_table_label_format hxjx_table_text">
            <input class="text-nowrap form-control" type="text" name="runPosition"
                   style="background-color: rgb(255, 192, 0);color:#fff;text-align: right;width:300px;"
                   :value="plcData.circleContainerAddress+'mm'"
            />
          </td>
          <td class="hxjx_table_label_format hxjx_table_label">操作侧油缸位置:</td>
          <td class="hxjx_table_label_format hxjx_table_text">
            <input class="text-nowrap form-control" type="text" name="operatePosition"
                   style="background-color: rgb(255, 192, 0);color:#fff;text-align: right;width:300px;"
                   :value="plcData.operationContainerAddress+'mm'"
            />
          </td>
        </tr>
        <tr>
          <td class="hxjx_table_label_format hxjx_table_label">传动侧压力:</td>
          <td class="hxjx_table_label_format hxjx_table_text">
            <input class="text-nowrap form-control" type="text" name="runPressure"
                   style="background-color: rgb(255, 192, 0);color:#fff;text-align: right;width:300px;"
                   :value="plcData.convey+'吨'"
            />
          </td>
          <td class="hxjx_table_label_format hxjx_table_label">操作侧压力:</td>
          <td class="hxjx_table_label_format hxjx_table_text">
            <input class="text-nowrap form-control" type="text" name="operatePressure"
                   style="background-color: rgb(255, 192, 0);color:#fff;text-align: right;width:300px;"
                   :value="plcData.operation+'吨'"
            />
          </td>
        </tr>
        <tr>
          <td class="hxjx_table_label_format hxjx_table_label">上辊电流:</td>
          <td class="hxjx_table_label_format hxjx_table_text">
            <input class="text-nowrap form-control" type="text" name="upElectric"
                   style="background-color: rgb(255, 192, 0);color:#fff;text-align: right;width:300px;"
                   :value="plcData.highElectric+'A'"
            />
          </td>
          <td class="hxjx_table_label_format hxjx_table_label">下辊电流:</td>
          <td class="hxjx_table_label_format hxjx_table_text">
            <input class="text-nowrap form-control" type="text" name="downElectric"
                   style="background-color: rgb(255, 192, 0);color:#fff;text-align: right;width:300px;"
                   :value="plcData.lowElectric+'A'"
            />
          </td>
        </tr>

        <tr>
          <td class="hxjx_table_label_format hxjx_table_label">轧机反馈速度:</td>
          <td class="hxjx_table_label_format hxjx_table_text">
            <input class="text-nowrap form-control" type="text" name="speed"
                   style="background-color: rgb(255, 192, 0);color:#fff;text-align: right;width:300px;"
                   :value="plcData.machineBackSpeed+'米/分钟'"
            />
          </td>
          <td class="hxjx_table_label_format hxjx_table_label"></td>
          <td class="hxjx_table_label_format hxjx_table_text"></td>
        </tr>
        </tbody>
      </table>
    </div>

    <div id="hxjx_popup" class="hxjx_popup" v-if="showFault">
      <!-- 表头-->
      <div class="hxjx_popup_header_danger">
        <span style="float:left">故障</span>
        <!-- <span id="hxjx_popup_header_close" style="float:right"><i class='fa fa-times' style="font-size: 20px;cursor: pointer;"></i></span> -->
      </div>
      <!-- body-->
      <div class="hxjx_popup_body_danger">
        <div style="width:100%;height:227px;">
          <table class="table table-borderless hxjx_table_text_left">
            <tbody>
            <tr>
              <td class="hxjx_table_label_format hxjx_table_label" style="padding:0.25rem;">时间:</td>
              <td class="hxjx_table_label_format hxjx_table_text" style="padding:0.25rem;">{{ messageData.createTime }}
              </td>
              <td class="hxjx_table_label_format hxjx_table_text_rule"
                  style="padding:0.25rem;vertical-align: middle;"
              ></td>
            </tr>
            <tr>
              <td class="hxjx_table_label_format hxjx_table_label" style="padding:0.25rem;">故障名称:</td>
              <td class="hxjx_table_label_format hxjx_table_text" style="padding:0.25rem;">{{ messageData.faultName }}
              </td>
              <td class="hxjx_table_label_format hxjx_table_text_rule"
                  style="padding:0.25rem;vertical-align: middle;"
              ></td>
            </tr>
            <tr>
              <td class="hxjx_table_label_format hxjx_table_label" style="padding:0.25rem;">故障信息:</td>
              <td class="hxjx_table_label_format hxjx_table_text" style="padding:0.25rem;">
                {{ messageData.faultMessage }}
              </td>
              <td class="hxjx_table_label_format hxjx_table_text_rule"
                  style="padding:0.25rem;vertical-align: middle;"
              ></td>
            </tr>
            </tbody>
          </table>
        </div>
        <!-- 按钮操作 -->
        <table class="table">
          <tr>
            <td style="padding: 20px 0 0 0;text-align: right; border-top:0px solid #dc3545">
              <div class="btn-group btn-group-sm">
                <a href="#" class="hxjx-button-ensure btn btn-danger btn-sm custom hxjx_foot_btn_custom"
                   style="margin-right: 0;" @click="ensure"
                >确定</a>
              </div>
            </td>
          </tr>
        </table>
      </div>
    </div>

    <el-dialog
      title="请填写轧制后的最终厚度与直径"
      :visible.sync="dialogVisible"
      width="70%"
    >
      <el-table
        :data="finalData"
        stripe
        style="width: 100%">
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column
          prop="id"
          label="钽靶批号"
        >
          <templete slot-scope="scope">
            <div v-if="scope.row.id">{{ scope.row.id }}</div>
            <div class="kong" v-else>-</div>
          </templete>
        </el-table-column>

        <el-table-column
          prop="width"
          label="轧前厚度"
          width="180"
        >
          <templete slot-scope="scope">
            <div v-if="scope.row.width">{{ scope.row.width }}</div>
            <div class="kong" v-else>-</div>
          </templete>
        </el-table-column>

        <el-table-column
          prop="finalWidth"
          label="最终厚度D1"
        >
          <templete slot-scope="scope">
            <el-input v-if="scope.row.id && scope.row.state!==3" v-model="scope.row.finalWidth"
                      placeholder="请输入该批号的最终厚度1"
            ></el-input>
            <el-input v-if="scope.row.id && scope.row.state===3" v-model="scope.row.finalWidth"
                      placeholder="该批次发生异常" disabled
            ></el-input>
            <div class="kong" v-if="!scope.row.id">-</div>
          </templete>
        </el-table-column>
        <el-table-column
          prop="finalWidth2"
          label="最终厚度D2"
        >
          <templete slot-scope="scope">
            <el-input v-if="scope.row.id && scope.row.state!==3" v-model="scope.row.finalWidth2"
                      placeholder="请输入该批号的最终厚度2"
            ></el-input>
            <el-input v-if="scope.row.id && scope.row.state===3" v-model="scope.row.finalWidth2"
                      placeholder="该批次发生异常" disabled
            ></el-input>
            <div class="kong" v-if="!scope.row.id">-</div>
          </templete>
        </el-table-column>
        <el-table-column
          prop="finalDiameter"
          label="最终直径L1"
        >
          <templete slot-scope="scope">
            <el-input v-if="scope.row.id && scope.row.state!==3" v-model="scope.row.finalDiameter"
                      placeholder="请输入该批号的最终直径1"
            ></el-input>
            <el-input v-if="scope.row.id && scope.row.state===3 " placeholder="该批次发生异常" disabled></el-input>
            <div class="kong" v-if="!scope.row.id">-</div>
          </templete>
        </el-table-column>
        <el-table-column
          prop="finalDiameter2"
          label="最终直径L2"
        >
          <templete slot-scope="scope">
            <el-input v-if="scope.row.id && scope.row.state!==3" v-model="scope.row.finalDiameter2"
                      placeholder="请输入该批号的最终直径2"
            ></el-input>
            <el-input v-if="scope.row.id && scope.row.state===3 " placeholder="该批次发生异常" disabled></el-input>
            <div class="kong" v-if="!scope.row.id">-</div>
          </templete>
        </el-table-column>

        <el-table-column
          prop="createBy"
          label="轧制人员1"
        >
          <templete slot-scope="scope">
            <el-input v-if="scope.row.id && scope.row.state!==3" v-model="scope.row.createBy"
                      placeholder="请输入轧制人员"
            ></el-input>
            <el-input v-if="scope.row.id && scope.row.state===3 " placeholder="该批次发生异常" disabled></el-input>
            <div class="kong" v-if="!scope.row.id">-</div>
          </templete>
        </el-table-column>

        <el-table-column
          prop="updateBy"
          label="轧制人员2"
        >
          <templete slot-scope="scope">
            <el-input v-if="scope.row.id && scope.row.state!==3" v-model="scope.row.updateBy"
                      placeholder="请输入轧制人员2"
            ></el-input>
            <el-input v-if="scope.row.id && scope.row.state===3 " placeholder="该批次发生异常" disabled></el-input>
            <div class="kong" v-if="!scope.row.id">-</div>
          </templete>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
<!--                    <el-button @click="dialogVisible = false">取 消</el-button>-->
                    <el-button type="primary" @click="submitFinalData">确 定</el-button>
                    </span>
    </el-dialog>
  </div>
</template>

<script>
import {messageData, messageUpdate} from '@/api/system/resource'
import {
  listMaterial,
  materialFinalData,
  materialUpdate,
  stepPLC, stepProcess,
  stepSubmit,
  stepUpdate
} from '@/api/system/process'
import {
  materialAbnormalStart,
  materialCheckFlagError, materialNextError,
  materialNextStepFlagError, stepCheckAbnormal, stepFinishError,
  stepNextError
} from '@/api/system/abnormal'
import {getFaultMessage, newIP} from '@/api/system/common'

export default {
  name: 'index',
  data() {
    return {
      MessageParams: {
        state: 0
      },
      showFault: false,
      dialogVisible: false,
      passList: [],
      dataList: [],
      processing: {
        id: null,
        batchId: ''
      },
      finalData: [],
      activeIndex: 0,
      batchSize: 0,
      flag: 1,
      intervalTime: '',
      submitButton: false,
      // 保证同一批次只弹出一次
      finalFlag: 0,
      plcData: {
        circleContainerAddress: 0.00,
        operationContainerAddress: 0.00,
        convey: 0.00,
        operation: 0.00,
        highElectric: 0.00,
        lowElectric: 0.00,
        machineBackSpeed: 0.00,
        agc: 0.00,
        ordinary: 0.00
      },
      nextStepFlagError: -1,
      messageData: {},
      newHTML: true,
      processBatchId:0,
      nowPass: {},
      nextStepLoading: false,
      circleStart: 0,
    }
  },
  methods: {

    ensure() {
      let data = {
        state: 1
      }

      messageUpdate(data).then(res => {
        this.showFault = false
      })
    },

    submit(state) {
      // 获取正在运行的对象
      this.submitButton = false
      let step = this.passList.filter(item => item.operation === 1)[0]
      if (state === 2) {
        if (confirm('是否将钽靶【' + step.materialId + '】移动至异常品内处理？')) {
          step.state = state
          let material = this.processing
          material.state = 3
          materialUpdate(material).then(() => {
            stepSubmit(step).then(res => {
              this.getStepDataList()
              materialCheckFlagError(this.processing).then(res => {
                this.nextStepFlagError = step.state
                this.nextMaterial()
                if (res.data === 1) {
                  this.$notify({
                    title: '提醒',
                    message: '该道次已完成，请点击下道次'
                  })
                }
              })
            })
          })
        }
      } else if (state === 1) {
        let material = this.processing
        step.state = 1
        stepUpdate(step).then(res => {
          materialCheckFlagError(material).then(res => {
            this.nextStepFlagError = step.state
            if (res.data === 1) {
              this.checkFinal()
              this.$notify({
                title: '提醒',
                message: '该道次已完成，请点击下道次'
              })
            } else {
              this.nextMaterial()
            }
          })
        })
      }
    },

    // 下道次
    nextStep() {
      let step = this.nowPass
      if (step && step.state === 0) {
        alert('请操作当前道次')
        this.nextStepLoading = false
      } else {
        this.nextStepLoading = true
        stepNextError(step).then(res => {
          this.nextStepLoading = false
          this.getDataList()
          materialNextStepFlagError().then(res => {
            this.submitButton = res.data === 0
          })
        })
        .catch((error) => {
          this.$message(error.message)
        })
        .finally(() => {
          this.nextStepLoading = false
        })
      }
    },

    nextMaterial() {
      let step = this.passList.filter(item => item.operation === 1)[0]
      let stepFlag = this.nextStepFlagError
      if (step && step.state !== 0 && stepFlag !== -1 && stepFlag !== 0) {
        let material = this.processing
        material.stepFlag = stepFlag
        materialNextError(material).then(res => {

          this.getDataList()
          // 表示这是第一次穷尽
          materialNextStepFlagError().then(res => {
            if (res.data === 1) {
              this.$notify({
                title: '提示',
                message: '该道次已完成，请点击下道次'
              })
            } else {
              this.submitButton = res.data === 0
            }
            if (this.finalFlag === 0) {
              // 检测是否穷尽
              this.checkFinal()
            }
          })
        })
      }
    },

    startProcess() {
      let params = {
        state: 5,
        batchId:this.processBatchId
      }
      materialAbnormalStart(params).then(res => {
        if (res.data !== 0) {
          materialNextStepFlagError().then(res => {
            this.submitButton = res.data === 0
            this.getDataList()
          })
          alert('开始轧制')
          this.getDataList()
        } else {
          alert('该批次已经开始轧制')
        }
      })
    },

    finishProcess() {

        stepCheckAbnormal(this.processBatchId).then(res => {
          if (res.data === 0) {
            // get
            stepFinishError(this.processBatchId).then(res => {
              alert('该批次轧制完成')
            })
            this.dataList = []
            this.passList = []
            this.processing = {batchId: -1, id: null}
          } else {
            alert('该批次存在某道次尚未处理')
          }
        })

    },

    checkFinal() {
      stepCheckAbnormal(this.processBatchId).then(res => {
        if (res.data === 0) {
          this.finalFlag = 1
          this.dialogVisible = true
          this.finalData = this.dataList
        }
      })
    },

    // 提交最终数据
    submitFinalData() {
      let data = this.finalData
      materialFinalData(data).then(res => {
        if (res.code === 200) {
          this.$message('提交成功，请点击轧制完成')
          this.dialogVisible = false
        }
      })

    },

    getDataList() {
      //state==0表示并未送进轧制页面的新进材料
      let params = {
        delFlag: 1,
        state: 5
      }
      listMaterial(params).then(res => {
        if (res.total !== 0) {
          this.batchSize = res.total
          this.dataList = res.rows
          this.processing = res.rows.filter(item => item.operation === 1)[0] ? res.rows.filter(item => item.operation === 1)[0] : {
            batchId: -1,
            id: null
          }
          this.processBatchId = res.rows[0].batchId

          materialNextStepFlagError().then(res => {
            this.submitButton = res.data === 0
            if (this.processing.state === 3) {
              let material = this.processing
              material.stepFlag = 1
              materialNextError(material).then(res => {
                this.getDataList()
              })
            }
            if (this.processing.batchId !== -1 && this.processing.state !== 3) {
              this.getStepDataList()
              if (this.newHTML) {
                this.submitButtonCheck()
                this.newHTML = false
              }
            }
          })

        }

      })
    },
    getStepDataList() {
      let params = {
        materialId: this.processing.id,
        delFlag: 1,
        batchId: this.processing.batchId
      }
      stepProcess(params).then(res => {
        this.passList = res.data
        this.nextStepFlagError = res.data.filter(item => item.operation === 1)[0].state
        this.nowPass = this.passList.filter(item => item.operation === 1)[0]
        let nowPass = this.nowPass

        let temp = nowPass.step % 8
        const angleMap = {
          0: 315,
          1: 0,
          2: 90,
          3: 45,
          4: 135,
          5: 180,
          6: 270,
          7: 225,
          8: 315,
        };
        this.circleStart = angleMap[temp];
      })
    },

    getPLCData() {
      let params = this.passList.filter(item => item.operation === 1)[0]
      stepPLC(params).then(res => {
        this.plcData = res.data
      })
    },
    getFault() {
      getFaultMessage().then(res => {
        if (res.data !== 0) {
          this.showFault = true
          messageData(this.MessageParams).then(res => {
            this.messageData = res.data
          })
        }
      })
    },

    submitButtonCheck() {
      materialNextStepFlagError().then(res => {
        this.submitButton = res.data === 0
        this.passList.forEach(item => {
          if (item.operation === 1 && item.state === 0) {
            this.submitButton = true
          }
        })
      })
    }
  },
  mounted() {

    clearInterval(this.intervalTime)
    this.getDataList()  // 接口方法

    this.intervalTime = setInterval(() => {
      this.getFault()
      this.getPLCData()
      this.getDataList()  // 接口方法

    }, 3000)

  },
  computed: {},
  created() {
    newIP()
    this.getFault()
    materialNextStepFlagError().then(res => {
      this.submitButton = res.data === 0
    })
  },

  beforeDestroy() {
    // 清除定时器
    clearInterval(this.intervalTime)
  }
}
</script>

<style scoped>

.imageCircle {
  position: absolute;
  width: 200px;
  height: 200px;
}

.image-circle-rows {
  z-index: 999;
  position: relative;
  width: 200px;
  height: 200px;
}


.hxjx_root {
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  font-size: 0.875rem;
}

.hxjx_navigator_info {
  height: 40px;
  border-radius: 5px;
  position: relative;
  font-size: 1rem;
  font-weight: 700;
}

.hxjx_table_label_format {
  word-break: keep-all;
  white-space: nowrap;
}

.hxjx_table_text_rule {
  color: red;
}

.hxjx_table_text {
  width: 300px !important;
  text-align: left;
  padding: 6px;
}

.hxjx_table_label {
  padding: 0px !important;
  vertical-align: middle !important;
  width: 100px;
}

.hxjx_table_text_left {
  text-align: left;
}

.hxjx_btn_margin_right5 {
  margin-right: 5px;
}

.hxjx_footer_main {
  background-color: white;
  border: solid 1px transparent !important;
}

.hxjx_table_btnColumn {
  word-break: keep-all !important;
  white-space: nowrap !important;
}

.hxjx_foot_btn_custom {
  width: 90px !important;
  margin-right: 5px;
}

/* 后添加的样式 */
.hxjx_footer_main {
  text-align: right !important;
}

.hxjx_table_btnColumn {
  border-top: 0 !important;
}

.hxjx_table_btn {
  width: 50px !important;
  margin: 2px;
}

.hxix_table_border {
  border: 1px solid #CCC;
}

.table td, .table th {
  padding: 0.5rem;
}

.hxjx_table_th {
  background-color: rgb(91, 155, 213);
  color: #fff;
}

.circle_finish {
  width: 20px;
  height: 20px;
  background-color: #28a745;
  border-radius: 50%;
}

.circle_error {
  width: 20px;
  height: 20px;
  background-color: #dc3545;
  border-radius: 50%;
}

.circle_unstart {
  width: 20px;
  height: 20px;
  background-color: yellow;
  border-radius: 50%;
}

.circle_unstart2 {
  width: 20px;
  height: 20px;
  background-color: #ccc;
  border-radius: 50%;
}

.table_td_warn {
  background-color: yellow;
}

.table_td_error {
  background-color: #ccc;
}

.table_td_unstart {
  background-color: #eaeaea;
}


.kong {
  display: flex;
  justify-content: center;
}


.hxjx_table_text_rule {
  color: red;
}

.hxjx_popup {
  position: fixed;
  left: 400px;
  top: 200px;
  width: 640px;
  height: 360px;
  font-size: 14px;
}

.hxjx_popup_header_danger {
  width: 100%;
  height: 40px;
  padding: 9px;
  background-color: #dc3545;
  color: #fff;
}

.hxjx_popup_body_danger {
  width: 100%;
  height: 320px;
  padding: 20px;
  background-color: #fff;
  border: 1px solid #dc3545;
}
</style>
