<template>
<!--    三维展示三维展示三维展示三维展示三维展示三维展示三维展示三维展示三维展示三维展示三维展示三维展示三维展示三维展示三维展示三维展示为主，占据大部分显示-->
    <div>
        <vue-particles
                color="rgb(0,0,0,0)"
                :particleOpacity="0"
                :particlesNumber="0"
                shapeType="circle"
                :particleSize="4"
                linesColor="#fff"
                :linesWidth="1"
                :lineLinked="true"
                :lineOpacity="0"
                :linesDistance="150"
                :moveSpeed="0"
                :hoverEffect="false"
                hoverMode="grab"
                :clickEffect="false"
                clickMode="push"
                class="lizi1"
        >
        </vue-particles>
        <div style="background:rgba(0,0,0,0.2);filter:blur(10); width: 1889px ;height: 1060px;">
            <div class="yui" style="border: 2px solid #5B9BD5;margin:0.5% 0.5% 0.5% 0.5%;padding-bottom:1%;width: 100% ;">
                <el-row :gutter="0">
                    <el-col :span="24">
                        <div style="z-index: 999;height: 60px">
                                <el-col :span="6">
                                    <div style="margin-left: 10%;text-align: left;line-height: 60px;height: 60px">
                                        <div style="display: inline;vertical-align:top;height: 100px">
                                        </div>
                                    </div>
                                </el-col>
                                <el-col :span="12" >
                                    <div style="font-size: 32px;color: white;text-align: center;margin-top: 0px;">
                                        <span style="color: white;">{{title}}</span>
                                    </div>
                                </el-col>
                                <el-col :span="6">
                                    <div style="color: white;margin-left: 25%;">
                                        <div style="float: left;font-size: 2.2rem;margin-top: 2%">
                                            <span>{{(this.hour) + ':'+ (this.minute) + ':'+(this.second)}}</span>
                                        </div>
                                        <div style="float: left;margin-left: 40px">
                                            <div style="font-size: 1.4rem;">
                                                <span>{{this.month + '.'+ this.day}}</span>
                                            </div>
                                            <div style="font-size: 1.4rem;">
                                                <span>{{'星期'+ this.week.toString()}}</span>
                                            </div>
                                        </div>
                                    </div>
                                </el-col>
                        </div>
                    </el-col>
                </el-row>
                <el-row style="border: #5B9BD5 solid 1px">
                    <el-col :span="20">
                        <el-row style="width: 100%;height: 945px;margin-top:0px;border: 1px solid #5B9BD5;text-align: center;color:#fff">
<!--                                1-->
                                <iframe frameborder=0 scrolling=no src="http://localhost:2565/editor/index_RobotPlan.html" style="width: 99%;height:935px;filter:blur(10);z-index: 999;padding: 5px"></iframe>
                        </el-row>
                    </el-col>
                    <el-col :span="4">
                        <el-row style="border-bottom: 1px solid #5B9BD5;height: 217px">
                            <el-col :span="24" style="border-left: 1px solid #5B9BD5;padding: 3px">
                                <el-row>
                                    <el-col :span="8">
                                        <div style="height: 40px;line-height: 40px;text-align:center;color: white;font-size: 18px;border: 1px solid white">订单号</div>
                                    </el-col>
                                    <el-col :span="16">
                                        <div style="height: 40px;line-height: 40px;text-align:center;color: white;font-size: 18px;border: 1px solid white">{{ orderNumber }}</div>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="8">
                                        <div style="height: 40px;line-height: 40px;text-align:center;color: white;font-size: 18px;border: 1px solid white">计划数</div>
                                    </el-col>
                                    <el-col :span="16" style="border: 1px solid white">
                                        <el-input v-model="plantCount" style="width: 100%" @blur="updateRate()"/>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="8">
                                        <div style="height: 40px;line-height: 40px;text-align:center;color: white;font-size: 18px;border: 1px solid white">日产量</div>
                                    </el-col>
                                    <el-col :span="16">
                                        <div style="height: 40px;line-height: 40px;text-align:center;color: white;font-size: 18px;border: 1px solid white">{{ dailyOutput }}</div>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="16">
                                        <div style="height: 40px;line-height: 40px;text-align:center;color: white;font-size: 18px;border: 1px solid white">计划节拍(s)</div>
                                    </el-col>
                                    <el-col :span="8" style="border: 1px solid white">
                                        <el-input v-model="planBeat" style="width: 100%" @blur="updateRate()"/>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="16">
                                        <div style="height: 40px;line-height: 40px;text-align:center;color: white;font-size: 18px;border: 1px solid white">当前节拍(s)</div>
                                    </el-col>
                                    <el-col :span="8">
                                        <div style="height: 40px;line-height: 40px;text-align:center;color: white;font-size: 18px;border: 1px solid white">{{ currentBeat }}</div>
                                    </el-col>
                                </el-row>
                            </el-col>
                        </el-row>
                        <el-row style="border-bottom: 1px solid #5B9BD5;height: 210px">
                            <el-col :span="12" style="">
                                <div style="font-size: 25px;width: 100%;margin-top: 10px;border-bottom: 1px solid #5B9BD5">
                                    <div style="width: 100%;height: 200px">
                                        <div id="myChart20" style="width: 100%;height: 180px;"/>
                                    </div>
                                </div>
                            </el-col>
                            <el-col :span="12" style="">
                                <div style="font-size: 25px;width: 100%;margin-top: 10px;border-bottom: 1px solid #5B9BD5">
                                    <div style="width: 100%;height: 200px">
                                        <div id="myChart22" style="width: 100%;height: 180px;"/>
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row style="border-bottom: 1px solid #5B9BD5;height: 207px">
                            <el-col :span="24" style="">
                                <div style="font-size: 25px;width: 100%;margin-top: 5px;border-bottom: 1px solid #5B9BD5">
                                    <div style="width: 100%;height: 200px">
                                        <div id="myChart21" style="width: 100%;height: 180px;"/>
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row style="border-bottom: 1px solid #5B9BD5">
                            <el-col :span="24">
                                <div style="width: 100%;height: 250px;border-bottom: 1px solid #5B9BD5;text-align: center;color:#fff">
                                    <div id="myChart1" style="width: 100%;height: 250px;float: right;"/>
                                </div>
                                <div style="width: 100%;padding: 8px 0px 0px 0px;margin-left: 5px;height: 51px">
                                    <el-col :span="8">
                                        <el-button type="primary" style="width: 92%;font-size: 16px" @click="modifyWorkOrder">设备管理</el-button>
                                    </el-col >
                                    <el-col :span="8">
                                        <el-button type="primary" style="width: 92%;font-size: 16px" @click="modifyWorkOrder">刀具管理</el-button>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-button type="primary" style="width: 92%;font-size: 16px" @click="modifyWorkOrder1">数据查询</el-button>
                                    </el-col >
                                </div>
                            </el-col>
                        </el-row>
                    </el-col>
                </el-row>
                <el-row :gutter="0">
                    <el-col :span="24">
                        <div style="z-index: 999;height: 70px;width: 100%;margin-left: 40%"  @click="digShow()">
                            <div style="color: #ffcc66;font-size: 42px;letter-spacing: 10px;text-align: center;line-height: 70px;width: 100%">
                                <vue-seamless-scroll :data="welcomeWord" :class-option="classOption">
                                    {{welcomeWord[0].word}}
                                </vue-seamless-scroll>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>
        <el-dialog title="编辑欢迎词/标题" :close-on-click-modal="false" :visible.sync="dialogVisible" center width="40%">
            <el-card>
                <span>标&nbsp;&nbsp;&nbsp; 题：</span>
                <el-input v-model="titleEdit" style="width: 500px"/>
                <el-button type="primary" style="width: 100px;font-size: 16px;margin-left: 10px" @click="EditTitle()">确定</el-button>
                <br>
                <br>
                <span>欢迎词：</span>
                <el-input v-model="welcomeWordedit" style="width: 500px"/>
                <el-button type="primary" style="width: 100px;font-size: 16px;margin-left: 10px" @click="editWelcomeWord()">确定</el-button>
            </el-card>
        </el-dialog>
    </div>
</template>
<script>
export default {
  data() {
    return {
      efficiency: [98.2, 95, 96.5], // 效率 稼动率 良品率
      CompletionRate: [88.2, 45], // 当班完成率  今日完成率
      timer_1: null,
      timer_2: null,
      OEE: '90',
      toolNum: [],
      toolCurrent1: [],
      toolCurrent2: [],
      toolCurrent3: [],
      toolCurrent4: [],
      toolCurrent5: [],
      toolCurrent6: [],
      toolCurrent7: [],
      toolCurrent8: [],
      toolCurrent9: [],
      toolHistory1: [],
      toolHistory2: [],
      toolHistory3: [],
      toolHistory4: [],
      toolHistory5: [],
      toolHistory6: [],
      toolHistory7: [],
      toolHistory8: [],
      toolHistory9: [],
      UsePercentage: [20, 30, 25], // 零部件预防性维护 - 使用百分比
      RatedPercentage: [100, 100, 100], // 零部件预防性维护 - 额定百分比
      deviceRatedDuration: [100, 200, 300], // 零部件预防性维护 - 额定时长
      deviceUseTime: [10, 20, 30], // 零部件预防性维护 - 使用时长
      deviceRemainingTime: [90, 180, 270], // 零部件预防性维护 - 剩余时长
      RemainingPercentage: [80, 70, 75], // 零部件预防性维护 - 剩余百分比
      deviceName: ['主轴1', '主轴2', '主轴3'], // 零部件预防性维护 - 设备名称
      welcomeWord: [{ 'word': '热烈欢迎各位领导莅临视察！' }, { 'word': '热烈欢迎各位领导莅临视察！' }, { 'word': '热烈欢迎各位领导莅临视察！' }],
      title: '基于数字孪生的智能制造工厂展示平台',
      welcomeWordedit: '',
      titleEdit: '',
      orderNumber: 'DM2012090004', // 订单号
      plantCount: 6700, // 计划数
      dailyOutput: 320, // 日产量
      monthOutput: 3522, // 月产量
      planBeat: 200, // 计划节拍
      currentBeat: 196, // 当前节拍
      RunningTime: ['4h 56\'', '4h 20\'', '0h 27\'', '0h 36\''], // 运行时长 上电 运行 关机 报警
      ToolInformation: [
        { '刀具名称': '设备1', '进给': 0, '退回': 0, '加工': 1, '扭矩': 1002, '转速': 200, '使用寿命': 2000, '设定寿命': 10000 },
        { '刀具名称': '设备2', '进给': 0, '退回': 0, '加工': 1, '扭矩': 1002, '转速': 200, '使用寿命': 2050, '设定寿命': 10000 },
        { '刀具名称': '设备3', '进给': 0, '退回': 0, '加工': 1, '扭矩': 1002, '转速': 200, '使用寿命': 2050, '设定寿命': 10000 },
        { '刀具名称': '设备4', '进给': 0, '退回': 0, '加工': 1, '扭矩': 1002, '转速': 200, '使用寿命': 2050, '设定寿命': 10000 },
        { '刀具名称': '设备5', '进给': 0, '退回': 0, '加工': 1, '扭矩': 1002, '转速': 200, '使用寿命': 2050, '设定寿命': 10000 },
        { '刀具名称': '设备6', '进给': 0, '退回': 0, '加工': 1, '扭矩': 1002, '转速': 200, '使用寿命': 2050, '设定寿命': 10000 },
        { '刀具名称': '设备7', '进给': 0, '退回': 0, '加工': 1, '扭矩': 1002, '转速': 200, '使用寿命': 2050, '设定寿命': 10000 },
        { '刀具名称': '设备8', '进给': 0, '退回': 0, '加工': 1, '扭矩': 1002, '转速': 200, '使用寿命': 2050, '设定寿命': 10000 },
        { '刀具名称': '设备9', '进给': 0, '退回': 0, '加工': 1, '扭矩': 1002, '转速': 200, '使用寿命': 2050, '设定寿命': 10000 }
      ], // 刀具信息
      flag: 0,
      mySetInterval: null,
      dialogVisible: false,
      ToolStates: [
        { '刀具1': [0, 0, 1], '刀具2': [1, 0, 0], '刀具3': [0, 1, 0], '刀具4': [1, 0, 0], '刀具5': [0, 1, 0], '刀具6': [0, 0, 1], '刀具7': [1, 0, 0], '刀具8': [0, 0, 1], '刀具9': [0, 1, 0] },
        { '刀具1': [1, 0, 0], '刀具2': [0, 1, 0], '刀具3': [0, 0, 1], '刀具4': [0, 1, 0], '刀具5': [0, 0, 1], '刀具6': [1, 0, 0], '刀具7': [0, 1, 0], '刀具8': [1, 0, 0], '刀具9': [0, 0, 1] },
        { '刀具1': [0, 1, 0], '刀具2': [0, 0, 1], '刀具3': [1, 0, 0], '刀具4': [0, 0, 1], '刀具5': [1, 0, 0], '刀具6': [0, 1, 0], '刀具7': [0, 0, 1], '刀具8': [0, 1, 0], '刀具9': [1, 0, 0] },
        { '刀具1': [0, 0, 1], '刀具2': [1, 0, 0], '刀具3': [0, 1, 0], '刀具4': [1, 0, 0], '刀具5': [0, 1, 0], '刀具6': [0, 0, 1], '刀具7': [1, 0, 0], '刀具8': [0, 0, 1], '刀具9': [0, 1, 0] },
        { '刀具1': [1, 0, 0], '刀具2': [0, 1, 0], '刀具3': [0, 0, 1], '刀具4': [0, 1, 0], '刀具5': [0, 0, 1], '刀具6': [1, 0, 0], '刀具7': [0, 1, 0], '刀具8': [1, 0, 0], '刀具9': [0, 0, 1] },
        { '刀具1': [0, 1, 0], '刀具2': [0, 0, 1], '刀具3': [1, 0, 0], '刀具4': [0, 0, 1], '刀具5': [1, 0, 0], '刀具6': [0, 1, 0], '刀具7': [0, 0, 1], '刀具8': [0, 1, 0], '刀具9': [1, 0, 0] },
        { '刀具1': [0, 0, 1], '刀具2': [1, 0, 0], '刀具3': [0, 1, 0], '刀具4': [1, 0, 0], '刀具5': [0, 1, 0], '刀具6': [0, 0, 1], '刀具7': [1, 0, 0], '刀具8': [0, 0, 1], '刀具9': [0, 1, 0] },
        { '刀具1': [1, 0, 0], '刀具2': [0, 1, 0], '刀具3': [0, 0, 1], '刀具4': [0, 1, 0], '刀具5': [0, 0, 1], '刀具6': [1, 0, 0], '刀具7': [0, 1, 0], '刀具8': [1, 0, 0], '刀具9': [0, 0, 1] },
        { '刀具1': [0, 1, 0], '刀具2': [0, 0, 1], '刀具3': [1, 0, 0], '刀具4': [0, 0, 1], '刀具5': [1, 0, 0], '刀具6': [0, 1, 0], '刀具7': [0, 0, 1], '刀具8': [0, 1, 0], '刀具9': [1, 0, 0] }
      ],
      dailyOutputYData: [310, 298, 296, 300, 320, 315, 305],
      dailyOutputXData: ['1/30', '1/31', '2/1', '2/2', '2/3', '2/4', '2/5'],
      monthOutputYData: [9860, 9900, 10200, 9800, 10050, 10000, 10360, 10300, 9900, 9800, 10200, 1531],
      monthOutputXData: ['20/3', '20/4', '20/5', '20/6', '20/7', '20/8', '20/9', '20/10', '20/11', '20/12', '21/1', '21/2'],
      date: new Date(),
      month: '',
      day: '',
      minute: '',
      hour: '',
      second: '',
      week: ''
    }
  },
  computed: {
    classOption() {
      return {
        step: 1, // 数值越大速度滚动越快
        limitMoveNum: 3, // 开始无缝滚动的数据量  //this.fourDatata.length
        hoverStop: false, // 是否开启鼠标悬停stop
        direction: 2, // 0向下 1向上 2向左 3向右
        openWatch: false, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      }
    }
  },
  mounted() {
    this.timer_1 = setInterval(this.init, 5000)
    this.toolStateSetUp()
    this.randomStart()
    const _this = this // 声明一个变量指向Vue实例this，保证作用域一致
    this.timer = setInterval(() => {
      _this.date = new Date() // 修改数据date
      this.month = new Date().getMonth() + 1 < 10 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1
      this.day = new Date().getDate() < 10 ? '0' + new Date().getDate() : new Date().getDate()
      this.hour = new Date().getHours() < 10 ? '0' + new Date().getHours() : new Date().getHours()
      this.minute = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes()
      this.second = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds()
      this.week = '日一二三四五六'.charAt(new Date().getDay())
    }, 1000)
  },
  beforeDestroy() {
    clearInterval(this.timer_1)
    clearInterval(this.mySetInterval)
  },
  created() {
    this.getWelcomeWord()
    this.getTitle()
  },
  methods: {
    skip(url) {
      location.href = url
    },
    init() {
      this.drawLine11()
      this.drawLine50()
      this.drawLine51()
      this.drawLine52()
      this.drawLine151()
      this.drawLine152()
      this.arrRes()
    },
    digShow() {
      this.dialogVisible = true
      this.welcomeWordedit = this.welcomeWord[0].word
      this.titleEdit = this.title
    },
    getWelcomeWord() {
      var param = []
      var Data = this.CreateData('11', '电子看板_看板欢迎词查询', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data.length > 0) {
          this.welcomeWord[0].word = response.data[0].欢迎词
          this.welcomeWord[1].word = response.data[0].欢迎词
          this.welcomeWord[2].word = response.data[0].欢迎词
        }
      })
    },
    getTitle() {
      var param = []
      var Data = this.CreateData('11', '电子看板_看板标题查询', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data.length > 0) {
          this.title = response.data[0].欢迎词
        }
      })
    },
    editWelcomeWord() {
      var param = []
      param[0] = ['标题', this.welcomeWordedit]
      var Data = this.CreateData('11', '电子看板_看板欢迎词编辑', param)
      this.ExecDatabase(Data).then(response => {
        this.getWelcomeWord()
      })
    },
    EditTitle() {
      var param = []
      param[0] = ['标题', this.titleEdit]
      var Data = this.CreateData('11', '电子看板_看板标题编辑', param)
      this.ExecDatabase(Data).then(response => {
        this.getTitle()
      })
    },
    getpan() {
      var param = []
      var Data = this.CreateData('11', '定量_查询', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data.length > 0) {
          this.plantCount = response.data[0].计划数量
          this.planBeat = response.data[0].计划节拍
          this.orderCount = response.data[0].数量
        }
      })
    },
    updateRate() {
      var param = []
      param[0] = ['计划数量', this.plantCount]
      param[1] = ['计划节拍', this.planBeat]
      param[2] = ['数量', this.orderCount]
      var Data = this.CreateData('12', '定量_修改', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data[0].result === '1') {
          this.getpan()
        }
      })
    },
    getorder() {
      var param = []
      var Data = this.CreateData('11', '订单信息_查询', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data.length > 0) {
          this.orderNumber = response.data[0].订单号
          this.model = response.data[0].型号
        }
      })
    },
    getOutput() {
      var param = []
      var Data = this.CreateData('11', '计划产量_查询', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data.length > 0) {
          this.dailyOutput = response.data[0].日产量
          this.monthOutput = response.data[0].月产量
          this.currentBeat = response.data[0].当前节拍
          this.OEE = response.data[0].OEE
        }
      }).then(response => {
        this.drawLine50()
      })
    },
    // 查询设备实时状态
    getStates() {
      var param = []
      var Data = this.CreateData('11', '设备实时状态_查询', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data.length > 0) {
          for (let i = 0; i < response.data.length; i++) {
            document.getElementById(`${response.data[i].状态代码}`).style.background = response.data[i].颜色
          }
        } else {
          this.getColor1()
        }
      })
    },
    // 还原设备默认状态
    getColor1() {
      document.getElementById('1').style.background = 'gray'
      document.getElementById('2 ').style.background = 'gray'
      document.getElementById('3').style.background = 'gray'
      document.getElementById('4').style.background = 'gray'
    },
    getSpare() {
      var param = []
      var Data = this.CreateData('11', '备件信息_查询', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data.length > 0) {
          this.water = response.data[0].清洗液
          this.water1 = response.data[0].水量 + 'L'
          this.clean = response.data[0].紊流清洗 + 'bar'
          this.clean1 = response.data[0].定点清洗 + 'bar'
          this.clean2 = response.data[0].清洗水箱 + '℃'
          this.clean3 = response.data[0].毛刷 + 'mm'
          this.temprature = response.data[0].电气柜温度 + '℃'
          this.humidity = response.data[0].电气柜湿度 + '%rh'
          this.clean4 = response.data[0].夹持面压力 + 'bar'
        }
      })
    },
    // 部件
    getTemper() {
      var param = []
      this.deviceName = []
      this.deviceRatedDuration = []
      this.deviceUseTime = []
      this.deviceRemainingTime = []
      this.RatedPercentage = []
      this.UsePercentage = []
      this.RemainingPercentage = []
      var Data = this.CreateData('11', '部件寿命_查询', param)
      this.ExecDatabase(Data).then(response => {
        response.data.map(v => {
          this.deviceName.push(v.部件名称)
          this.deviceRatedDuration.push(v.额定时长)
          this.deviceUseTime.push(v.使用时长)
          this.deviceRemainingTime.push(v.剩余时长)
          this.RatedPercentage.push(v.额定百分比)
          this.UsePercentage.push(v.使用百分比)
          this.RemainingPercentage.push(v.剩余百分比)
        })
      }).then(response => {
        this.drawLine1()
      })
    },
    // 实时扭矩曲线
    drawLine11() {
      return
      // 基于准备好的dom，初始化echarts实例
      const myChart11 = this.$echarts.init(document.getElementById('myChart11'))
      myChart11.setOption(
        {
          title: {
            text: '实时压力曲线',
            textStyle: {
              color: '#ffffff',
              fontSize: 16
            }
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: [
              {
                name: '压套机1',
                textStyle: {
                  color: '#c23531' // 图例文字颜色
                }
              },
              {
                name: '压套机2',
                textStyle: {
                  color: '#239e00' // 图例文字颜色
                }
              },
              {
                name: '压套机3',
                textStyle: {
                  color: '#70bb61' // 图例文字颜色
                }
              },
              {
                name: '压套机4',
                textStyle: {
                  color: '#d48265' // 图例文字颜色
                }
              }
            ],
            x: 'center',
            y: 20
          },
          color: ['#c23531', '#239e00', '#70bb61', '#d48265'],
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: this.toolNum,
            axisLine: {
              lineStyle: {
                color: '#ffffff',
                width: 1 // 这里是为了突出显示加上的
              }
            }
          },
          yAxis: {
            type: 'value',
            axisLine: {
              lineStyle: {
                color: '#ffffff',
                width: 1 // 这里是为了突出显示加上的
              }
            }
          },
          series: [
            {
              name: '压套机1',
              type: 'line',
              lineStyle: {
                width: 2
              },
              data: this.toolCurrent1
            },
            {
              name: '压套机2',
              type: 'line',
              lineStyle: {
                width: 2
              },
              data: this.toolCurrent2
            },
            {
              name: '压套机3',
              type: 'line',
              lineStyle: {
                width: 2
              },
              data: this.toolCurrent3
            },
            {
              name: '压套机4',
              type: 'line',
              lineStyle: {
                width: 2
              },
              data: this.toolCurrent4
            }
          ]
        }
      )
    },
    // 历史扭矩曲线
    drawLine12() {
      return
      // 基于准备好的dom，初始化echarts实例
      const myChart12 = this.$echarts.init(document.getElementById('myChart12'))
      myChart12.setOption(
        {
          title: {
            text: '历史压力曲线',
            textStyle: {
              color: '#ffffff',
              fontSize: 16
            }
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: [
              {
                name: '压套机1',
                textStyle: {
                  color: '#c23531' // 图例文字颜色
                }
              },
              {
                name: '压套机2',
                textStyle: {
                  color: '#239e00' // 图例文字颜色
                }
              },
              {
                name: '压套机3',
                textStyle: {
                  color: '#70bb61' // 图例文字颜色
                }
              },
              {
                name: '压套机4',
                textStyle: {
                  color: '#d48265' // 图例文字颜色
                }
              }
            ],
            x: 'center',
            y: 20
          },
          color: ['#c23531', '#239e00', '#70bb61', '#d48265'],
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: this.toolNum,
            axisLine: {
              lineStyle: {
                color: '#ffffff',
                width: 1 // 这里是为了突出显示加上的
              }
            }
          },
          yAxis: {
            type: 'value',
            axisLine: {
              lineStyle: {
                color: '#ffffff',
                width: 1 // 这里是为了突出显示加上的
              }
            }
          },
          series: [
            {
              name: '压套机1',
              type: 'line',
              lineStyle: {
                width: 2
              },
              data: this.toolHistory1
            },
            {
              name: '压套机2',
              type: 'line',
              lineStyle: {
                width: 2
              },
              data: this.toolHistory2
            },
            {
              name: '压套机3',
              type: 'line',
              lineStyle: {
                width: 2
              },
              data: this.toolHistory3
            },
            {
              name: '压套机4',
              type: 'line',
              lineStyle: {
                width: 2
              },
              data: this.toolHistory4
            }
          ]
        }
      )
    },
    // 智能预测性维护图形
    drawLine1() {
      // 基于准备好的dom，初始化echarts实例
      const myChart1 = this.$echarts.init(document.getElementById('myChart1'))
      var _this = this
      myChart1.setOption({
        title: {
          text: '智能预测性维护(h)',
          textStyle: {
            color: '#fff',
            fontSize: 14
          }
        },
        color: ['#006699', '#d77b09', 'green'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '2%',
          top: '25%',
          right: '2%',
          bottom: '2%',
          containLabel: true
        },
        legend: {
          data: ['额定', '已用', '剩余'],
          right: '10px',
          textStyle: { // 图例文字的样式
            color: '#fff',
            fontSize: 10
          }
        },
        xAxis: {
          type: 'category',
          data: this.deviceName,
          axisLabel: {
            show: true,
            textStyle: {
              color: 'white', // 更改坐标轴文字颜色
              fontSize: 10 // 更改坐标轴文字大小
            }
          },
          axisLine: { // 设置轴线的配置
            lineStyle: { // 轴线的线条颜色
              color: '#fffafe'
            }
          }
        },
        yAxis: {
          type: 'value',
          min: 0,
          max: 100,
          axisLine: { // 设置轴线的配置
            lineStyle: { // 轴线的线条颜色
              color: '#fffafe'
            }
          },
          splitLine: {
            show: false
          }
        },
        series: [
          {
            name: '额定',
            type: 'bar',
            barGap: 0,
            data: this.RatedPercentage,
            label: {
              normal: {
                formatter: function(params) {
                  return _this.deviceRatedDuration[params.dataIndex] + 'h'
                },
                show: true,
                position: 'top',
                textStyle: {
                  fontWeight: 'bolder',
                  fontSize: '10',
                  color: '#fff'
                }
              }
            }
          },
          {
            name: '已用',
            type: 'bar',
            data: this.UsePercentage,
            label: {
              normal: {
                formatter: function(params) {
                  return _this.deviceUseTime[params.dataIndex] + 'h'
                },
                show: true,
                position: 'top',
                textStyle: {
                  fontWeight: 'bolder',
                  fontSize: '10',
                  color: '#fff'
                }
              }
            }
          },
          {
            name: '剩余',
            type: 'bar',
            data: this.RemainingPercentage,
            label: {
              normal: {
                formatter: function(params) {
                  return _this.deviceRemainingTime[params.dataIndex] + 'h'
                },
                show: true,
                position: 'top',
                textStyle: {
                  fontWeight: 'bolder',
                  fontSize: '10',
                  color: '#fff'
                }
              }
            }
          }
        ]
      })
    },
    // OEE图形
    drawLine50() {
      // 基于准备好的dom，初始化echarts实例
      const myChart20 = this.$echarts.init(document.getElementById('myChart20'))
      // 绘制图表
      myChart20.setOption({
        tooltip: {
          formatter: '{a} <br/>{c} {b}'
        },
        series: [
          {
            name: 'OEE',
            type: 'gauge',
            min: 0,
            max: 100,
            splitNumber: 10,
            radius: '95%',
            axisLine: { // 坐标轴线
              lineStyle: { // 属性lineStyle控制线条样式
                color: [[0.30, 'lime'], [0.70, '#1e90ff'], [1, '#ff4500']],
                width: 3
              }
            },
            axisLabel: { // 坐标轴小标记
              textStyle: { // 属性lineStyle控制线条样式
                fontWeight: 'bolder',
                color: '#fff',
                shadowColor: '#fff', // 默认透明
                shadowBlur: 10
              }
            },
            axisTick: { // 坐标轴小标记
              length: 10, // 属性length控制线长
              lineStyle: { // 属性lineStyle控制线条样式
                color: 'auto',
                shadowColor: '#fff', // 默认透���
                shadowBlur: 10
              }
            },
            splitLine: { // 分隔线
              length: 10, // 属性length控制线长
              lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
                width: 3,
                color: '#fff',
                shadowColor: '#fff', // 默认透明
                shadowBlur: 10
              }
            },
            title: {
              textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                fontWeight: 'bolder',
                fontSize: 20,
                fontStyle: 'italic',
                color: '#fff',
                shadowColor: '#fff', // 默认透明
                shadowBlur: 10
              }
            },
            detail: {
              formatter: 'OEE：' + this.OEE + '%',
              shadowBlur: 5,
              offsetCenter: [0, '90%'], // x, y，单位px
              textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                fontWeight: 'bolder',
                color: '#fffaa6',
                fontSize: 18
              }
            },
            data: [this.OEE]
          }
        ]
      })
    },
    // 当班完成率 今日完成率图形
    drawLine51() {
      // 基于准备好的dom，初始化echarts实例
      const myChart21 = this.$echarts.init(document.getElementById('myChart21'))
      // myChart1.clear()
      // 绘制图表
      myChart21.setOption({
        // backgroundColor: '#1b1b1b',
        tooltip: {
          formatter: '{a} <br/>{c} {b}'
        },
        toolbox: {
          show: true
        },
        series: [
          {
            startAngle: 180, // 开始角度 左侧角度
            endAngle: 0, // 结束角度 右侧
            name: '当班完成率',
            type: 'gauge',
            z: 3,
            min: 0,
            max: 100,
            splitNumber: 10,
            radius: '160%',
            center: ['50%', '85%'], // 默认全局居中
            axisLine: { // 坐标轴线
              lineStyle: {
                color: [[0.2, 'lime'], [0.8, '#1e90ff'], [1, '#ff4500']],
                width: 3,
                shadowColor: '#fff', // 默认透明
                shadowBlur: 8// 属性lineStyle控制线条样式
              }
            },
            axisTick: { // 坐标轴小标记
              length: 10, // 属性length控制线长
              lineStyle: { // 属性lineStyle控制线条样式
                color: 'auto'
              }
            },
            splitLine: { // 分隔线
              length: 15, // 属性length控制线长
              lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
                color: 'auto'
              }
            },
            axisLabel: {
              backgroundColor: 'auto',
              borderRadius: 2,
              color: '#eee',
              padding: 3,
              textShadowBlur: 2,
              textShadowOffsetX: 1,
              textShadowOffsetY: 1,
              textShadowColor: '#222'
            },
            title: {
              // 其余属性默认使用全局文本样式，详见TEXTSTYLE
              offsetCenter: [0, '-65%'], // 改变标题的位置
              fontWeight: 'bolder',
              fontSize: 14,
              fontStyle: 'italic',
              color: '#fff'
            },
            detail: {
              formatter: '当班：' + this.CompletionRate[0] + '%',
              shadowBlur: 5,
              offsetCenter: ['-40%', '15%'], // x, y，单位px
              textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                fontWeight: 'bolder',
                color: '#fffaa6',
                fontSize: 18
              }
            },
            data: [{ value: this.CompletionRate[0], name: '当班完成率' }]
          },
          {
            startAngle: 180, // 开始角度 左侧角度
            endAngle: 0, // 结束角度 右侧
            name: '今日完成率',
            type: 'gauge',
            center: ['50%', '85%'], // 默认全局居中
            radius: '100%',
            min: 0,
            max: 100,
            splitNumber: 10,
            axisLine: { // 坐标轴线
              lineStyle: { // 属性lineStyle控制线条样式
                color: [[0.2, 'lime'], [0.8, '#1e90ff'], [1, '#ff4500']],
                shadowColor: '#fff', // 默认透明
                width: 5
              }
            },
            axisTick: { // 坐标轴小标记
              length: 10, // 属性length控制线长
              lineStyle: { // 属性lineStyle控制线条样式
                color: 'auto'
              }
            },
            axisLabel: {
              show: false
            },
            splitLine: { // 分隔线
              length: 15, // 属性length控制线长
              lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
                color: 'auto'
              }
            },
            pointer: {
              width: 5
            },
            title: {
              offsetCenter: [0, '-35%'], // x, y，单位px
              color: '#fff'
            },
            detail: {
              formatter: '今日：' + this.CompletionRate[1] + '%',
              shadowBlur: 5,
              offsetCenter: ['60%', '22%'], // x, y，单位px
              textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                fontWeight: 'bolder',
                color: '#fffaa6',
                fontSize: 18
              }
            },
            data: [{ value: this.CompletionRate[1], name: '今日完成率' }]
          }
        ]
      })
    },
    // 效率, 稼动率, 良品率 曲线
    drawLine52() {
      // 基于准备好的dom，初始化echarts实例
      const myChart22 = this.$echarts.init(document.getElementById('myChart22'))
      // myChart1.clear()
      // 绘制图表
      myChart22.setOption(
        {
          backgroundColor: 'transparent',
          'tooltip': {},
          'xAxis': {
            'data': ['效率', '稼动率', '良品率'],
            'axisTick': {
              'show': false
            },
            'axisLine': {
              'show': false
            },
            'axisLabel': {
              interval: 0,
              textStyle: {
                color: '#beceff',
                fontSize: 15
              },
              margin: 30 // 刻度标签与轴线之间的距离。
            }
          },
          'yAxis': {
            'splitLine': {
              'show': false
            },
            'axisTick': {
              'show': false
            },
            'axisLine': {
              'show': false
            },
            'axisLabel': {
              'show': false
            }
          },
          'series': [
            { // 上部椭圆
              'name': '',
              'type': 'pictorialBar',
              'symbolSize': [25, 11],
              'symbolOffset': [0, -5],
              'z': 12,
              'data': [
                {
                  'name': '效率',
                  'value': this.efficiency[0],
                  'symbolPosition': 'end',
                  'itemStyle': {
                    'normal': {
                      'color': '#00fff5' // 圆柱顶部颜色

                    }
                  }
                },
                {
                  'name': '稼动率',
                  'value': this.efficiency[1],
                  'symbolPosition': 'end',
                  'itemStyle': {
                    'normal': {
                      'color': '#ffcc00' // 圆柱顶部颜色
                    }
                  }
                },
                {
                  'name': '良品率',
                  'value': this.efficiency[2],
                  'symbolPosition': 'end',
                  'itemStyle': {
                    'normal': {
                      'color': '#b9b7ff' // 圆柱顶部颜色
                    }
                  }
                }]
            },
            { // 底部椭圆
              'name': '',
              'type': 'pictorialBar',
              'symbolSize': [25, 11],
              'symbolOffset': [0, 7],
              'z': 12,
              'data': [
                {
                  'name': '效率',
                  'value': this.efficiency[0],
                  'itemStyle': {
                    'normal': {
                      'color': '#43bafe' // 圆柱底部颜色
                    }
                  }
                },
                {
                  'name': '稼动率',
                  'value': this.efficiency[1],
                  'itemStyle': {
                    'normal': {
                      'color': '#ff7800' // 圆柱底部颜色
                    }
                  }
                },
                {
                  'name': '良品率',
                  'value': this.efficiency[2],
                  'itemStyle': {
                    'normal': {
                      'color': '#e9a5ff' // 圆柱底部颜色
                    }
                  }
                }]
            },
            { // 底部椭圆圈实线内层
              'name': '',
              'type': 'pictorialBar',
              'symbolSize': [37, 16],
              'symbolOffset': [0, 11],
              'z': 11,
              'data': [
                {
                  'name': '效率',
                  'value': this.efficiency[0],
                  'itemStyle': {
                    'normal': {
                      'color': 'transparent',
                      'borderColor': '#43bafe', // 底部内圆圈颜色
                      'borderWidth': 3
                    }
                  }
                },
                {
                  'name': '稼动率',
                  'value': this.efficiency[1],
                  'itemStyle': {
                    'normal': {
                      'color': 'transparent',
                      'borderColor': '#ff7800', // 底部内圆圈颜色
                      'borderWidth': 3
                    }
                  }
                },
                {
                  'name': '良品率',
                  'value': this.efficiency[2],
                  'itemStyle': {
                    'normal': {
                      'color': 'transparent',
                      'borderColor': '#e9a5ff', // 底部内圆圈颜色
                      'borderWidth': 3
                    }
                  }
                }]
            },
            { // 底部椭圆-虚线 外圈
              'name': '',
              'type': 'pictorialBar',
              'symbolSize': [50, 25],
              'symbolOffset': [0, 15],
              'z': 10,
              'data': [
                {
                  'name': '效率',
                  'value': this.efficiency[0],
                  'itemStyle': {
                    'normal': {
                      'color': 'transparent',
                      'borderColor': '#43bafe', // 底部外圆圈颜色
                      'borderType': 'dashed',
                      'borderWidth': 3
                    }
                  }
                },
                {
                  'name': '稼动率',
                  'value': this.efficiency[1],
                  'itemStyle': {
                    'normal': {
                      'color': 'transparent',
                      'borderColor': '#ff7800', // 底部外圆圈颜色
                      'borderType': 'dashed',
                      'borderWidth': 3
                    }
                  }
                },
                {
                  'name': '良品率',
                  'value': this.efficiency[2],
                  'itemStyle': {
                    'normal': {
                      'color': 'transparent',
                      'borderColor': '#e9a5ff', // 底部外圆圈颜色
                      'borderType': 'dashed',
                      'borderWidth': 3
                    }
                  }
                }]
            },
            { // 中部圆柱
              'type': 'bar',
              'silent': true,
              'barWidth': 25,
              'barGap': '-100%',
              'data': [
                {
                  'name': '效率',
                  'value': this.efficiency[0],
                  'label': {
                    'normal': {
                      'show': true,
                      'position': 'top',
                      'distance': 20,
                      'textStyle': {
                        'color': '#00fff5', // 柱子对应数值颜色
                        'fontSize': 20
                      }
                    }
                  },
                  'itemStyle': {
                    'normal': {
                      'color': {
                        'x': 0,
                        'y': 0,
                        'x2': 0,
                        'y2': 1,
                        'type': 'linear',
                        'global': false,
                        'colorStops': [{
                          'offset': 0,
                          'color': 'rgba(0,255,245,0.5)'
                        }, {
                          'offset': 1,
                          'color': '#43bafe' // 底部渐变颜色
                        }]
                      }
                    }
                  }
                },
                {
                  'name': '稼动率',
                  'value': this.efficiency[1],
                  'label': {
                    'normal': {
                      'show': true,
                      'position': 'top',
                      'distance': 20,
                      'textStyle': {
                        'color': '#ffcc00', // 柱子对应数值颜色
                        'fontSize': 20
                      }
                    }
                  },
                  'itemStyle': {
                    'normal': {
                      'color': {
                        'x': 0,
                        'y': 0,
                        'x2': 0,
                        'y2': 1,
                        'type': 'linear',
                        'global': false,
                        'colorStops': [{
                          'offset': 0,
                          'color': 'rgba(255,204,0,0.5)'
                        }, {
                          'offset': 1,
                          'color': '#ff7800' // 底部渐变颜色
                        }]
                      }
                    }
                  }
                },
                {
                  'name': '良品率',
                  'value': this.efficiency[2],
                  'label': {
                    'normal': {
                      'show': true,
                      'position': 'top',
                      'distance': 20,
                      'textStyle': {
                        'color': '#b9b7ff', // 柱子对应数值颜色
                        'fontSize': 20
                      }
                    }
                  },
                  'itemStyle': {
                    'normal': {
                      'color': {
                        'x': 0,
                        'y': 0,
                        'x2': 0,
                        'y2': 1,
                        'type': 'linear',
                        'global': false,
                        'colorStops': [{
                          'offset': 0,
                          'color': 'rgba(185,183,255,0.5)'
                        }, {
                          'offset': 1,
                          'color': '#e9a5ff' // 底部渐变颜色
                        }]
                      }
                    }
                  }
                }
              ]
            }]
        }
      )
    },
    // 清洗泵压力
    getPressure() {
      var param = []
      this.xdata1 = []
      this.ydata1 = []
      var Data = this.CreateData('11', '清洗泵压力_查询', param)
      this.ExecDatabase(Data).then(response => {
        response.data.map(v => {
          this.xdata1.push(v.采集时间)
          this.ydata1.push(v.Value)
        })
      }).then(response => {
        this.drawLine4()
      })
    },
    drawLine4() {
      // 基于准备好的dom，初始化echarts实例
      const myChart4 = this.$echarts.init(document.getElementById('myChart4'))
      myChart4.setOption({
        title: {
          text: '清洗泵压力(bar)',
          textStyle: {
            color: '#fff',
            fontSize: 16
          }
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: this.ydata1
        },
        grid: {
          top: '20%',
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: this.xdata1,
          axisLine: { // 设置轴线的配置
            lineStyle: { // 轴线的线条颜色
              color: '#fffafe'
            }
          }
        },
        yAxis: {
          type: 'value',
          min: -5,
          max: 30,
          axisLine: { // 设置轴线的配置
            lineStyle: { // 轴线的线条颜色
              color: '#fffafe'
            }
          }
        },
        series: [{
          data: this.ydata1,
          type: 'line',
          itemStyle: { // 折线的样式设置
            normal: {
              lineStyle: { // 折线线条的设置
                color: '#d77b09'
              }
            }
          }
        }]
      })
    },
    // 系统气源压力
    getPressure1() {
      var param = []
      this.xdata2 = []
      this.ydata2 = []
      var Data = this.CreateData('11', '系统气源压力_查询', param)
      this.ExecDatabase(Data).then(response => {
        response.data.map(v => {
          this.xdata2.push(v.采集时间)
          this.ydata2.push(v.Value)
        })
      }).then(response => {
        this.drawLine2()
      })
    },
    drawLine2() {
      // 基于准备好的dom，初始化echarts实例
      const myChart2 = this.$echarts.init(document.getElementById('myChart2'))
      myChart2.setOption({
        title: {
          text: '系统气源压力(MPa)',
          textStyle: {
            color: '#fff',
            fontSize: 16
          }
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: this.ydata2
        },
        grid: {
          top: '20%',
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: this.xdata2,
          axisLine: { // 设置轴线的配置
            lineStyle: { // 轴线的线条颜色
              color: '#fffafe'
            }
          }
        },
        yAxis: {
          type: 'value',
          min: -2,
          max: 8,
          axisLine: { // 设置轴线的配置
            lineStyle: { // 轴线的线条颜色
              color: '#fffafe'
            }
          }
        },
        series: [{
          data: this.ydata2,
          type: 'line',
          itemStyle: { // 折线的样式设置
            normal: {
              lineStyle: { // 折线线条的设置
                color: '#d77b09'
              }
            }
          }
        }]
      })
    },
    // 过滤压力
    getPressure2() {
      var param = []
      this.xdata3 = []
      this.ydata3 = []
      var Data = this.CreateData('11', '过滤压力_查询', param)
      this.ExecDatabase(Data).then(response => {
        response.data.map(v => {
          this.xdata3.push(v.采集时间)
          this.ydata3.push(v.Value)
        })
      }).then(response => {
        this.drawLine5()
      })
    },
    drawLine5() {
      // 基于准备好的dom，初始化echarts实例
      const myChart5 = this.$echarts.init(document.getElementById('myChart5'))
      myChart5.setOption({
        title: {
          text: '过滤压力(bar)',
          textStyle: {
            color: '#fff',
            fontSize: 16
          }
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: this.ydata3
        },
        grid: {
          top: '20%',
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: this.xdata3,
          axisLine: { // 设置轴线的配置
            lineStyle: { // 轴线的线条颜色
              color: '#fffafe'
            }
          }
        },
        yAxis: {
          type: 'value',
          min: -0.5,
          max: 1,
          axisLine: { // 设置轴线的配置
            lineStyle: { // 轴线的线条颜色
              color: '#fffafe'
            }
          }
        },
        series: [{
          data: this.ydata3,
          type: 'line',
          itemStyle: { // 折线的样式设置
            normal: {
              lineStyle: { // 折线线条的设置
                color: '#d77b09'
              }
            }
          }
        }]
      })
    },
    // 真空干燥压力
    getPressure3() {
      var param = []
      this.xdata4 = []
      this.ydata4 = []
      var Data = this.CreateData('11', '真空干燥压力_查询', param)
      this.ExecDatabase(Data).then(response => {
        response.data.map(v => {
          this.xdata4.push(v.采集时间)
          this.ydata4.push(v.Value)
        })
      }).then(response => {
        this.drawLine3()
      })
    },
    drawLine3() {
      // 基于准备好的dom，初始化echarts实例
      const myChart3 = this.$echarts.init(document.getElementById('myChart3'))
      myChart3.setOption({
        title: {
          text: '真空干燥压力(Mbar)',
          textStyle: {
            color: '#fff',
            fontSize: 16
          }
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: this.ydata4
        },
        grid: {
          top: '20%',
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: this.xdata4,
          axisLine: { // 设置轴线的配置
            lineStyle: { // 轴线的线条颜色
              color: '#fffafe'
            }
          }
        },
        yAxis: {
          type: 'value',
          min: -1000,
          max: 0,
          axisLine: { // 设置轴线的配置
            lineStyle: { // 轴线的线条颜色
              color: '#fffafe'
            }
          }
        },
        series: [{
          data: this.ydata4,
          type: 'line',
          itemStyle: { // 折线的样式设置
            normal: {
              lineStyle: { // 折线线条的设置
                color: '#d77b09'
              }
            }
          }
        }]
      })
    },
    // 下料冷却区
    getTemper1() {
      var param = []
      this.xdata5 = []
      this.ydata5 = []
      var Data = this.CreateData('11', '下料冷却区_查询', param)
      this.ExecDatabase(Data).then(response => {
        response.data.map(v => {
          this.xdata5.push(v.采集时间)
          this.ydata5.push(v.Value)
        })
      }).then(response => {
        this.drawLine6()
      })
    },
    drawLine6() {
      // 基于准备好的dom，初始化echarts实例
      const myChart6 = this.$echarts.init(document.getElementById('myChart6'))
      myChart6.setOption({
        title: {
          text: '下料冷却区(℃)',
          textStyle: {
            color: '#fff',
            fontSize: 16
          }
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: this.ydata5
        },
        grid: {
          top: '20%',
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: this.xdata5,
          axisLine: { // 设置轴线的配置
            lineStyle: { // 轴线的线条颜色
              color: '#fffafe'
            }
          }
        },
        yAxis: {
          type: 'value',
          min: -10,
          max: 10,
          axisLine: { // 设置轴线的配置
            lineStyle: { // 轴线的线条颜色
              color: '#fffafe'
            }
          }
        },
        series: [{
          data: this.ydata5,
          type: 'line',
          itemStyle: { // 折线的样式设置
            normal: {
              lineStyle: { // 折线线条的设置
                color: '#d77b09'
              }
            }
          }
        }]
      })
    },
    // 点击跳转
    modifyWorkOrder() {
      return
      this.$router.push({
        // param参数用name query 参数用 path
        name: 'Dashboard'
      })
    },
    modifyWorkOrder1() {
      return
      this.$router.push({
        // param参数用name query 参数用 path
        name: 'targetProgress'
      })
    },
    modifyWorkOrder2() {
      return
      this.$router.push({
        // param参数用name query 参数用 path
        name: 'PartPurchase'
      })
    },
    toolStateSetUp() {
      return
      this.mySetInterval = setInterval(() => {
        for (const toolName in this.ToolStates[this.flag]) {
          var jinji = this.ToolStates[this.flag][toolName][0]
          var jinjiColor = 'grey'
          var jiagong = this.ToolStates[this.flag][toolName][1]
          var jiagongColor = 'grey'
          var tuihui = this.ToolStates[this.flag][toolName][2]
          var tuihuiColor = 'grey'
          document.getElementById(toolName + '-1').style.backgroundColor = jinjiColor
          document.getElementById(toolName + '-2').style.backgroundColor = jiagongColor
          document.getElementById(toolName + '-3').style.backgroundColor = tuihuiColor
          jinji === 1 ? jinjiColor = 'green' : jinjiColor = 'grey'
          jiagong === 1 ? jiagongColor = 'green' : jiagongColor = 'grey'
          tuihui === 1 ? tuihuiColor = 'green' : tuihuiColor = 'grey'
          document.getElementById(toolName + '-1').style.backgroundColor = jinjiColor
          document.getElementById(toolName + '-2').style.backgroundColor = jiagongColor
          document.getElementById(toolName + '-3').style.backgroundColor = tuihuiColor
          var num = parseInt(toolName.split('刀具')[1]) - 1
          if (jiagong === 0) {
            this.ToolInformation[num].转速 = 0
          } else {
            this.ToolInformation[num].转速 = Math.random().toFixed(1) * 1000 + 25
          }
        }
        if (this.flag < 8) {
          this.flag += 1
        } else {
          this.flag = 0
        }
      }, 5000)
    },
    randomStart() {
      for (let i = 0; i < 50; i++) {
        this.toolNum.push(i + 1)
        this.toolCurrent1.push(Math.random().toFixed(1) * 100 + 10)
        this.toolCurrent2.push(Math.random().toFixed(1) * 58 + 10)
        this.toolCurrent3.push(Math.random().toFixed(1) * 25 + 20)
        this.toolCurrent4.push(Math.random().toFixed(1) * 39 + 30)
        this.toolCurrent5.push(Math.random().toFixed(1) * 100 + 10)
        this.toolCurrent6.push(Math.random().toFixed(1) * 110 + 10)
        this.toolCurrent7.push(Math.random().toFixed(1) * 128 + 15)
        this.toolCurrent8.push(Math.random().toFixed(1) * 153 + 20)
        this.toolCurrent9.push(Math.random().toFixed(1) * 129 + 20)
        this.toolHistory1.push(Math.random().toFixed(1) * 100 + 25)
        this.toolHistory2.push(Math.random().toFixed(1) * 100 + 5)
        this.toolHistory3.push(Math.random().toFixed(1) * 100 + 18)
        this.toolHistory4.push(Math.random().toFixed(1) * 100 + 19)
        this.toolHistory5.push(Math.random().toFixed(1) * 100 + 30)
        this.toolHistory6.push(Math.random().toFixed(1) * 100 + 10)
        this.toolHistory7.push(Math.random().toFixed(1) * 100 + 26)
        this.toolHistory8.push(Math.random().toFixed(1) * 100 + 10)
        this.toolHistory9.push(Math.random().toFixed(1) * 100 + 1)
      }
    },
    arrRes() {
      this.toolCurrent1.shift()
      this.toolCurrent2.shift()
      this.toolCurrent3.shift()
      this.toolCurrent4.shift()
      this.toolCurrent5.shift()
      this.toolCurrent6.shift()
      this.toolCurrent7.shift()
      this.toolCurrent8.shift()
      this.toolCurrent9.shift()
      this.toolHistory1.shift()
      this.toolHistory2.shift()
      this.toolHistory3.shift()
      this.toolHistory4.shift()
      this.toolHistory5.shift()
      this.toolHistory6.shift()
      this.toolHistory7.shift()
      this.toolHistory8.shift()
      this.toolHistory9.shift()

      this.toolCurrent1.push(Math.random().toFixed(1) * 100 + 10)
      this.toolCurrent2.push(Math.random().toFixed(1) * 58 + 10)
      this.toolCurrent3.push(Math.random().toFixed(1) * 25 + 20)
      this.toolCurrent4.push(Math.random().toFixed(1) * 39 + 30)
      this.toolCurrent5.push(Math.random().toFixed(1) * 100 + 10)
      this.toolCurrent6.push(Math.random().toFixed(1) * 110 + 10)
      this.toolCurrent7.push(Math.random().toFixed(1) * 128 + 15)
      this.toolCurrent8.push(Math.random().toFixed(1) * 153 + 20)
      this.toolCurrent9.push(Math.random().toFixed(1) * 129 + 20)
      this.toolHistory1.push(Math.random().toFixed(1) * 100 + 25)
      this.toolHistory2.push(Math.random().toFixed(1) * 100 + 5)
      this.toolHistory3.push(Math.random().toFixed(1) * 100 + 18)
      this.toolHistory4.push(Math.random().toFixed(1) * 100 + 19)
      this.toolHistory5.push(Math.random().toFixed(1) * 100 + 30)
      this.toolHistory6.push(Math.random().toFixed(1) * 100 + 10)
      this.toolHistory7.push(Math.random().toFixed(1) * 100 + 26)
      this.toolHistory8.push(Math.random().toFixed(1) * 100 + 10)
      this.toolHistory9.push(Math.random().toFixed(1) * 100 + 1)
      // this.drawLine12()
      this.drawLine1()
      this.ToolInformation[0].扭矩 = this.toolCurrent1[49].toFixed(1)
      this.ToolInformation[1].扭矩 = this.toolCurrent2[49].toFixed(1)
      this.ToolInformation[2].扭矩 = this.toolCurrent3[49].toFixed(1)
      this.ToolInformation[3].扭矩 = this.toolCurrent4[49].toFixed(1)
      this.ToolInformation[4].扭矩 = this.toolCurrent5[49].toFixed(1)
      this.ToolInformation[5].扭矩 = this.toolCurrent6[49].toFixed(1)
      this.ToolInformation[6].扭矩 = this.toolCurrent7[49].toFixed(1)
      this.ToolInformation[7].扭矩 = this.toolCurrent8[49].toFixed(1)
      this.ToolInformation[8].扭矩 = this.toolCurrent9[49].toFixed(1)
    },
    // 画产量曲线
    drawLine151() {
      return
      // 基于准备好的dom，初始化echarts实例
      const myChart102 = this.$echarts.init(document.getElementById('myChart151'))
      // 绘制图表
      myChart102.setOption({
        title: {
          text: '日产量',
          textStyle: {
            color: '#fff'
          },
          x: 'left'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          x: 40,
          x2: 100,
          y2: 150, // y2可以控制 X轴跟Zoom控件之间的间隔，避免以为倾斜后造成 label重叠到zoom上
          left: '3%',
          right: '10%',
          bottom: '3%',
          containLabel: true
        },
        yAxis: {
          splitNumber: 4,
          type: 'value',
          axisLine: {
            lineStyle: {
              color: 'white'
            }
          }
        },
        xAxis: {
          type: 'category',
          data: this.dailyOutputXData,
          axisLine: {
            lineStyle: {
              color: 'white'
            }
          },
          axisLabel: {
            interval: 0
          }
        },
        series: [
          {
            name: '产量',
            type: 'bar',
            axisLabel: {
              interval: 0,
              rotate: 40
            },
            barWidth: 40,
            data: this.dailyOutputYData,
            label: {
              normal: {
                show: true,
                position: 'top',
                distance: 0,
                color: '#fffafe'
              }
            },
            itemStyle: {
              normal: {
                color: '#f8a53d'
              }
            },
            markLine: {
              data: [
                {
                  type: 'average',
                  name: '平均值',
                  lineStyle: {
                    color: '#fc001b'
                  },
                  label: {
                    normal: {
                      position: 'middle',
                      formatter: '{b}: {c}'
                    }
                  }
                }
              ]
            }
          }
        ]
      })
    },
    // 画产量曲线
    drawLine152() {
      return
      // 基于准备好的dom，初始化echarts实例
      const myChart102 = this.$echarts.init(document.getElementById('myChart152'))
      // 绘制图表
      myChart102.setOption({
        title: {
          text: '月产量',
          textStyle: {
            color: '#fff'
          },
          x: 'left'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          x: 40,
          x2: 100,
          y2: 150, // y2可以控制 X轴跟Zoom控件之间的间隔，避免以为倾斜后造成 label重叠到zoom上
          left: '3%',
          right: '10%',
          bottom: '3%',
          containLabel: true
        },
        yAxis: {
          splitNumber: 4,
          type: 'value',
          axisLine: {
            lineStyle: {
              color: 'white'
            }
          }
        },
        xAxis: {
          type: 'category',
          data: this.monthOutputXData,
          axisLine: {
            lineStyle: {
              color: 'white'
            }
          },
          axisLabel: {
            interval: 0
          }
        },
        series: [
          {
            name: '产量',
            type: 'bar',
            axisLabel: {
              interval: 0,
              rotate: 40
            },
            barWidth: 20,
            data: this.monthOutputYData,
            label: {
              normal: {
                show: true,
                position: 'top',
                distance: 0,
                color: '#fffafe'
              }
            },
            itemStyle: {
              normal: {
                color: '#d77b09'
              }
            },
            markLine: {
              data: [
                {
                  type: 'average',
                  name: '平均值',
                  lineStyle: {
                    color: '#ffe009'
                  },
                  label: {
                    normal: {
                      position: 'middle',
                      formatter: '{b}: {c}'
                    }
                  }
                }
              ]
            }
          }
        ]
      })
    }
  }
}
</script>
<style>
    HTML{
        overflow: auto;
    }
    .lizi1{
        position: fixed;
        top:0;
        width:100%;
        height: 100%;
        pointer-events: none;
        background: #0f0c29;  /* fallback for old browsers */
        background: -webkit-linear-gradient(to right, #012a61, #2d4b86, #012a61);  /* Chrome 10-25, Safari 5.1-6 */
        background: linear-gradient(to right, #012a61, #2d4b86, #012a61); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    }
    body{
        margin:0;
        padding:0;
        width: 1900px;
        height: 1080px;
        overflow: hidden;
        position: relative;
    }
</style>
<style scoped>
    >>>.el-input__inner {
        border: 0px;
        background-color: #012a61;
        font-size: 18px;
        color: white;
        text-align: center;
    }

    .Checkbox {
        position: absolute;
        visibility: hidden;
    }
    .Checkbox+label {
        position:absolute;
        width: 16px;
        height: 16px;
        border: 1px solid #A6A6A6;
        border-radius: 50%;
        background-color:#DEDEDE;
    }
    .Checkbox:checked+label:after {
        content: "";
        position: absolute;
        left: 2px;
        top:2px;
        width: 9px;
        height: 4px;
        border: 2px solid #424242;
        border-top-color: transparent;
        border-right-color: transparent;
        transform: rotate(-45deg);
        -ms-transform: rotate(-60deg);
        -moz-transform: rotate(-60deg);
        -webkit-transform: rotate(-60deg);
    }
</style>
