<template>
	<div class="background">
		<el-row style="box-shadow: inset 0 0 30px rgb(24, 78, 135);">
			<div style="height: 100px; width: 1918px;">
				<div style="position: relative;height: 100%;width: 300px; float: left;">
					<div style="position: absolute;transform: translate(-50%, -50%);left:55%; top:50%;">
						<img style="width: 280px;height: 90px" :src="titlePng">
					</div>
				</div>
				<div style="height: 100%;width: 1618px;float: left;">
					<el-col v-for="(item, index) in statusInformation" :key="index" :span="4" style="height: 100%;">
						<div style="width: 60px; height: 60px;float: left;margin: 25px 0 0 30px">
							<img style="width: 50px; height: 50px;margin-left: 20px" :src="item.img">
						</div>
						<div style="width: 150px;height: 69px;float:right;margin: 30px 20px 0 0" @click="showPlanPage(item.id)">
							<div style="color: #83ffff;font-size: 32px;text-align: center;font-weight: bolder">
								{{ item.data }}
							</div>
							<div style="text-align: center">
								{{ item.text }}
							</div>
						</div>
					</el-col>
				</div>
			</div>
		</el-row>
		<el-row>
			<div style="position: relative;height: 980px;">
				<div style="height: 100%; width: 100%;position: absolute;">
					<div style="width: 100%;height:980px;filter:blur(10);z-index: 999;">
						<iframe :src="ifsrc" frameborder="0" width="100%" height="980px" id="dmtComIframe" ref="dmtComIframe" ></iframe>
					</div>
				</div>
				<div :style="{display: isShow}" class="data-box" style="left:15px; top:20px;">
					<span class="borderLeft1 boxBorder"></span>
					<span class="borderLeft2 boxBorder"></span>
					<span class="borderRight1 boxBorder"></span>
					<span class="borderRight2 boxBorder"></span>
					<div style="width: 100%; height: 50px;">
						<div class="indicatorBlock"/>
						<div class="indicatorText">
							生产可动率
						</div>
					</div>
					<div style="height: 230px; width: 100%;">
						<el-col :span="8" style="height: 100%;">
							<div id="dashboardOne" style="height: 80%; width: 100%;"/>
							<div style="height: 20%; width: 100%;text-align: center;font-size: 20px;line-height: 20px">
								生产进度
							</div>
						</el-col>
						<el-col :span="8" style="height: 100%;">
							<div id="dashboardTwo" style="height: 80%; width: 100%;"/>
							<div style="height: 20%; width: 100%;text-align: center;font-size: 20px;line-height: 20px">
								时间开动率
							</div>
						</el-col>
						<el-col :span="8" style="height: 100%;">
							<div id="dashboardThree" style="height: 80%; width: 100%;"/>
							<div style="height: 20%; width: 100%;text-align: center;font-size: 20px;line-height: 20px">
								性能开动率
							</div>
						</el-col>
					</div>
				</div>
				<div :style="{display: isShow}" class="data-box" style="left:15px; top:340px;">
					<span class="borderLeft1 boxBorder"></span>
					<span class="borderLeft2 boxBorder"></span>
					<span class="borderRight1 boxBorder"></span>
					<span class="borderRight2 boxBorder"></span>
					<div style="width: 100%; height: 50px;">
						<div class="indicatorBlock"/>
						<div class="indicatorText">
							日产量
						</div>
					</div>
					<div id="dailyOutput" style="height: 250px; width: 100%"/>
				</div>
				<div :style="{display: isShow}" class="data-box" style="left:15px; top:660px;">
					<span class="borderLeft1 boxBorder"></span>
					<span class="borderLeft2 boxBorder"></span>
					<span class="borderRight1 boxBorder"></span>
					<span class="borderRight2 boxBorder"></span>
					<div style="width: 100%; height: 45px;">
						<div class="indicatorBlock"/>
						<div class="indicatorText">
							刀具管理
						</div>
					</div>
          <table class="tool" style="margin: 10px auto">
            <tr>
              <th class="tg-lfnm">刀具名称</th>
              <th class="tg-lfnm">刀具状态</th>
              <th class="tg-lfnm">规格</th>
              <th class="tg-lfnm">累计加工</th>
              <th class="tg-lfnm">剩余寿命</th>
            </tr>

            <tr v-for="item in knifeData">
              <td v-if="item.isRed == 0" class="tg-lfnm">{{item.name}}</td>
              <td v-if="item.isRed == 0" class="tg-tr94">{{item.status}}</td>
              <td v-if="item.isRed == 0" class="tg-tr94">{{item.size}}</td>
              <td v-if="item.isRed == 0" class="tg-tr94">{{item.useCount}}</td>
              <td v-if="item.isRed == 0" class="tg-tr94">{{item.remainCount}}</td>

              <td v-if="item.isRed == 1" class="tg-sh07">{{item.name}}</td>
              <td v-if="item.isRed == 1" class="tg-v8f3">{{item.status}}</td>
              <td v-if="item.isRed == 1" class="tg-v8f3">{{item.size}}</td>
              <td v-if="item.isRed == 1" class="tg-v8f3">{{item.useCount}}</td>
              <td v-if="item.isRed == 1" class="tg-v8f3">{{item.remainCount}}</td>
            </tr>
          </table>
				</div>
				<div :style="{display: isShow}" class="data-box" style="right:15px; top:20px;">
					<span class="borderLeft1 boxBorder"></span>
					<span class="borderLeft2 boxBorder"></span>
					<span class="borderRight1 boxBorder"></span>
					<span class="borderRight2 boxBorder"></span>
					<div style="width: 100%; height: 50px;">
						<div class="indicatorBlock"/>
						<div class="indicatorText">
							SPC控制图
						</div>
					</div>
					<div id="faultType" style="height: 250px; width: 100%;"/>
				</div>
				<div :style="{display: isShow}" class="data-box" style="right:15px; top:340px;">
					<span class="borderLeft1 boxBorder"></span>
					<span class="borderLeft2 boxBorder"></span>
					<span class="borderRight1 boxBorder"></span>
					<span class="borderRight2 boxBorder"></span>
					<div style="width: 100%; height: 50px;">
						<div class="indicatorBlock"/>
						<div class="indicatorText">
							工序能力分析
						</div>
					</div>
					<div id="myChart4" style="height: 250px; width: 100%"/>
				</div>
				<div :style="{display: isShow}" class="data-box" style="right:15px; top:660px;">
					<span class="borderLeft1 boxBorder"></span>
					<span class="borderLeft2 boxBorder"></span>
					<span class="borderRight1 boxBorder"></span>
					<span class="borderRight2 boxBorder"></span>
					<div style="width: 100%; height: 50px;">
						<div class="indicatorBlock"/>
						<div class="indicatorText">
							均值极差图
						</div>
					</div>
					<div id="faultTime" style="height: 250px; width: 100%;"/>
				</div>
				<div :style="{display: isShow}" class="data-box"  style="left:395px; top:660px;width: 1130px;">
					<span class="borderLeft1 boxBorder"></span>
					<span class="borderLeft2 boxBorder"></span>
					<span class="borderRight1 boxBorder"></span>
					<span class="borderRight2 boxBorder"></span>
					<div style="width: 100%; height: 50px;">
						<div class="indicatorBlock"/>
						<div class="indicatorText">
							报警信息
						</div>
					</div>
					<div style="width: 100%; height: 250px">
						<el-table height="48" style="width: 100%;display: block">
							<el-table-column label="工位号" align="center" width="150">
							</el-table-column>
							<el-table-column label="报警信息" align="center">
							</el-table-column>
							<el-table-column align="center" label="持续时间(S)" width="150">
							</el-table-column>
							<el-table-column align="center" label="报警开始时间" width="180">
							</el-table-column>
							<el-table-column align="center" label="报警结束时间" width="180">
							</el-table-column>
						</el-table>
						<vue-seamless-scroll ref="seamlessScroll" :class-option="classOption" :data="tableData" style="height: 200px;overflow: hidden">
							<div v-for="(item, index) in tableData" :key="index" style="display: flex">
								<div style="width: 150px;padding: 12px 0;text-align: center" v-text="item.opName"></div>
								<div style="width: 470px;padding: 12px 0;text-align: center" v-text="item.motorcycleType"></div>
								<div style="width: 150px;padding: 12px 0;text-align: center" v-text="item.time"></div>
								<div style="width: 180px;padding: 12px 0;text-align: center" v-text="item.startTime"></div>
								<div style="width: 180px;padding: 12px 0;text-align: center" v-text="item.endTime"></div>
							</div>
						</vue-seamless-scroll>
					</div>
				</div>
				<div  style="position: absolute;left:425px; top:10px;width: 60px;height: 30px" @mouseover="isShowBtn='inline'" @mouseleave="isShowBtn='none'">
					<div :style="{display: isShowBtn}">
						<el-button size="mini" style="background: #103666;color: white;border: 1px solid #103666;" @click="restView">复原</el-button>
					</div>
				</div>
			</div>
		</el-row>
		<!--		<div id="robotrrrr" style="width: 200px;height: 300px;border: 1px solid #00893d;position: absolute">13</div>-->
		<el-dialog :visible.sync="dialogFormVisible1" title="编辑生产计划" center width="440px">
			<el-form ref="form" :model="form" label-position="right" label-width="100px">
				<el-form-item label="生产计划" prop="planData">
					<el-input-number v-model="form.planData" style="width: 240px;border-radius: 4px" :min="0" :step="1" />
				</el-form-item>
				<el-row>
					<el-form-item >
						<el-button style="width: 80px;height: 40px" type="primary" @click="submitAdd1('form1')">确 定</el-button>
						<el-button style="width: 80px;height: 40px" @click="callOff1('form1')">取消</el-button>
					</el-form-item>
				</el-row>
			</el-form>
		</el-dialog>
	</div>
</template>

<script>
import axios from 'axios'
import * as echarts from 'echarts'
// import DMT from '../components/DMT/index'
export default {
  name: 'MingLuo',
  // components: { DMT },
  data() {
    return {
      ifsrc: '',
      classOption: {
        step: 0.5,
        direction: 1,
        limitMoveNum: 5,
        hoverStop: false
      },
      form: {
        planData: 0
      },
      alarmTypes: {},
      dialogFormVisible1: false,
      isShow1: true,
      isShow: 'inline',
      isShowBtn1: false,
      isShowBtn: 'none',
      src: localStorage.getItem('twinAddress'),
      statusInformation: [
        {
          id: 'ProductionPlan',
          img: require('../img/ProductionPlan.png'),
          data: window.g.titleData.ProductionPlan,
          text: '生产计划(辆)'
        },
        {
          id: 'ActualOutput',
          img: require('../img/ActualOutput.png'),
          data: window.g.titleData.ActualOutput,
          text: '实际产量(辆)'
        },
        {
          id: 'rhythm',
          img: require('../img/rhythm.png'),
          data: window.g.titleData.rhythm,
          text: '节拍JPH/小时'
        },
        {
          id: 'OEEAnalysis',
          img: require('../img/OEEAnalysis.png'),
          data: window.g.titleData.OEEAnalysis,
          text: '设备效能OEE%'
        },
        {
          id: 'NumberFaults',
          img: require('../img/NumberFaults.png'),
          data: window.g.titleData.NumberFaults,
          text: '故障数量'
        },
        {
          id: 'FaultsTime',
          img: require('../img/FaultsTime.png'),
          data: window.g.titleData.FaultsTime,
          text: '故障时间min'
        }],
      titlePng: '',
      myChart4X: window.g.dayDataX,
      myChart4Y: window.g.dayDataY,
      myChart4X1: [],
      myChart4Y1: [],
      myChart4Alarm1: [],
      myChart4Alarm2: [],
      tableData: window.g.errData,
      robotList: [
        {
          'J1': 0,
          'J2': 0,
          'J3': 0,
          'J4': 0,
          'J5': 0,
          'J6': 0
        },
        {
          'J1': 0,
          'J2': 0,
          'J3': 0,
          'J4': 0,
          'J5': 0,
          'J6': 0
        },
        {
          'J1': 0,
          'J2': 0,
          'J3': 0,
          'J4': 0,
          'J5': 0,
          'J6': 0
        },
        {
          'J1': 0,
          'J2': 0,
          'J3': 0,
          'J4': 0,
          'J5': 0,
          'J6': 0
        }
      ],
      planProcess: window.g.meter1,
      timeRate: window.g.meter2,
      performanceRate: window.g.meter3,
      planData: 1,
      realData: 0,
      JPH: 50,
      OEE: 80,
      averData: 0,
      timer_1: null,
      timer_2: null,
      timer_3: null,
      timer_4: null,
      chartDom1: null,
      chartDom2: null,
      chartDom3: null,
      chartDom4: null,
      chartDom5: null,
      chartDom6: null,
      chartDom7: null,
      knifeData:window.g.knifeData,
      flag: 0,
      robotInfo: {
        'B3FD789E-E018-4006-91AD-4824830E6557': {
          joint: {
            'J1': 999.99,
            'J2': 999.99,
            'J3': 999.99,
            'J4': 999.99,
            'J5': 999.99,
            'J6': 999.99
          },
          tcp: {
            'tx': 999.99,
            'ty': 999.99,
            'tz': 999.99,
            'rx': 999.99,
            'ry': 999.99,
            'rz': 999.99
          },
          speed: 100,
          alarm: [
            {
              'AlarmID': 2,
              'AlarmNumber': 78,
              'CauseAlarmID': 0,
              'CauseAlarmNumber': 0,
              'Severity': 0,
              'Time': '',
              'AlarmMessage': '',
              'CauseAlarmMessage': '',
              'SeverityMessage': ''
            },
            {
              'AlarmID': 2,
              'AlarmNumber': 77,
              'CauseAlarmID': 0,
              'CauseAlarmNumber': 0,
              'Severity': 0,
              'Time': '',
              'AlarmMessage': '',
              'CauseAlarmMessage': '',
              'SeverityMessage': 'WARN'
            },
            {
              'AlarmID': 76,
              'AlarmNumber': 125,
              'CauseAlarmID': 0,
              'CauseAlarmNumber': 0,
              'Severity': 34,
              'Time': '2020-03-12T15:27:06',
              'AlarmMessage': 'DNET-125 ｴﾓｶｯﾖ眞ｬｽﾓﾏﾐﾖﾃ: Bd 2',
              'CauseAlarmMessage': '',
              'SeverityMessage': 'PAUSE.G'
            }
          ]
        },
        'A769F461-4011-46A4-BBC2-2AFB39EFD9C2': {
          joint: {
            'J1': 888.88,
            'J2': 888.88,
            'J3': 888.88,
            'J4': 888.88,
            'J5': 888.88,
            'J6': 888.88
          },
          tcp: {
            'tx': 888.88,
            'ty': 888.88,
            'tz': 888.88,
            'rx': 888.88,
            'ry': 888.88,
            'rz': 888.88
          },
          speed: 99,
          alarm: [
            {
              'AlarmID': 2,
              'AlarmNumber': 78,
              'CauseAlarmID': 0,
              'CauseAlarmNumber': 0,
              'Severity': 0,
              'Time': '',
              'AlarmMessage': '',
              'CauseAlarmMessage': '',
              'SeverityMessage': ''
            },
            {
              'AlarmID': 2,
              'AlarmNumber': 77,
              'CauseAlarmID': 0,
              'CauseAlarmNumber': 0,
              'Severity': 0,
              'Time': '',
              'AlarmMessage': '',
              'CauseAlarmMessage': '',
              'SeverityMessage': 'WARN'
            },
            {
              'AlarmID': 76,
              'AlarmNumber': 125,
              'CauseAlarmID': 0,
              'CauseAlarmNumber': 0,
              'Severity': 34,
              'Time': '2020-03-12T15:27:06',
              'AlarmMessage': 'DNET-125 ｴﾓｶｯﾖ眞ｬｽﾓﾏﾐﾖﾃ: Bd 2',
              'CauseAlarmMessage': '',
              'SeverityMessage': 'PAUSE.G'
            }
          ]
        },
        '04A6D8F9-7019-4C92-8845-B3CFDDF4A433': {
          joint: {
            'J1': 777.77,
            'J2': 777.77,
            'J3': 777.77,
            'J4': 777.77,
            'J5': 777.77,
            'J6': 777.77
          },
          tcp: {
            'tx': 777.77,
            'ty': 777.77,
            'tz': 777.77,
            'rx': 777.77,
            'ry': 777.77,
            'rz': 777.77
          },
          speed: 98,
          alarm: [
            {
              'AlarmID': 2,
              'AlarmNumber': 78,
              'CauseAlarmID': 0,
              'CauseAlarmNumber': 0,
              'Severity': 0,
              'Time': '',
              'AlarmMessage': '',
              'CauseAlarmMessage': '',
              'SeverityMessage': ''
            },
            {
              'AlarmID': 2,
              'AlarmNumber': 77,
              'CauseAlarmID': 0,
              'CauseAlarmNumber': 0,
              'Severity': 0,
              'Time': '',
              'AlarmMessage': '',
              'CauseAlarmMessage': '',
              'SeverityMessage': 'WARN'
            },
            {
              'AlarmID': 76,
              'AlarmNumber': 125,
              'CauseAlarmID': 0,
              'CauseAlarmNumber': 0,
              'Severity': 34,
              'Time': '2020-03-12T15:27:06',
              'AlarmMessage': 'DNET-125 ｴﾓｶｯﾖ眞ｬｽﾓﾏﾐﾖﾃ: Bd 2',
              'CauseAlarmMessage': '',
              'SeverityMessage': 'PAUSE.G'
            }
          ]
        },
        'B2BF5C42-B6ED-46D8-A7C3-046968D39805': {
          joint: {
            'J1': 666.66,
            'J2': 666.66,
            'J3': 666.66,
            'J4': 666.66,
            'J5': 666.66,
            'J6': 666.66
          },
          tcp: {
            'tx': 666.66,
            'ty': 666.66,
            'tz': 666.66,
            'rx': 666.66,
            'ry': 666.66,
            'rz': 666.66
          },
          speed: 97,
          alarm: [
            {
              'AlarmID': 2,
              'AlarmNumber': 78,
              'CauseAlarmID': 0,
              'CauseAlarmNumber': 0,
              'Severity': 0,
              'Time': '',
              'AlarmMessage': '',
              'CauseAlarmMessage': '',
              'SeverityMessage': ''
            },
            {
              'AlarmID': 2,
              'AlarmNumber': 77,
              'CauseAlarmID': 0,
              'CauseAlarmNumber': 0,
              'Severity': 0,
              'Time': '',
              'AlarmMessage': '',
              'CauseAlarmMessage': '',
              'SeverityMessage': ''
            },
            {
              'AlarmID': 76,
              'AlarmNumber': 125,
              'CauseAlarmID': 0,
              'CauseAlarmNumber': 0,
              'Severity': 34,
              'Time': '2020-03-12T15:27:06',
              'AlarmMessage': '',
              'CauseAlarmMessage': '',
              'SeverityMessage': ''
            }
          ]
        }
      },
      "listHead":[
        {"categories":"订单号"},
        {"categories":"生产编号"},
        {"categories":"发动机型号"},
        {"categories":"缸体号"},
        {"categories":"数量"},
        {"categories":"发动机功率"},
        {"categories":"发动机转速"}

      ],
      "listContent":[
        {"categories":"5025132","data1": "5011", "data2": "K71-28E5-B743","data3": "CA6DK1-28E5","data4": 114,"data5": 209,"data6": 2300},
        {"categories":"5025273","data1": "6011","data2": "K48-18E5-A802","data3": "CA4DK1-18E5","data4": 120,"data5": 139,"data6": 2300},
        {"categories":"7103202","data1": "7101","data2": "H57-24E6-C037","data3": "CA6DH1-24E6","data4": 200,"data5": 179,"data6": 2500},
        {"categories":"5025170","data1": "6021","data2": "K48-18E51-B395","data3": "K48-18E51-B395  ","data4": 220,"data5": 139,"data6":2300},
        {"categories":"5025274","data1": "5002","data2": "K71-32E51-B107","data3": "CA6DK1-32E51","data4": 163,"data5": 239,"data6":2300},
        {"categories":"5025132","data1": "5011", "data2": "K71-28E5-B743","data3": "CA6DK1-28E5","data4": 114,"data5": 209,"data6": 2300},
        {"categories":"5025273","data1": "6011","data2": "K48-18E5-A802","data3": "CA4DK1-18E5","data4": 120,"data5": 139,"data6": 2300},
        {"categories":"7103202","data1": "7101","data2": "H57-24E6-C037","data3": "CA6DH1-24E6","data4": 200,"data5": 179,"data6": 2500},
        {"categories":"5025170","data1": "6021","data2": "K48-18E51-B395","data3": "K48-18E51-B395  ","data4": 220,"data5": 139,"data6":2300},
        {"categories":"5025274","data1": "5002","data2": "K71-32E51-B107","data3": "CA6DK1-32E51","data4": 163,"data5": 239,"data6":2300},
        {"categories":"5025132","data1": "5011", "data2": "K71-28E5-B743","data3": "CA6DK1-28E5","data4": 114,"data5": 209,"data6": 2300},
        {"categories":"5025273","data1": "6011","data2": "K48-18E5-A802","data3": "CA4DK1-18E5","data4": 120,"data5": 139,"data6": 2300},
        {"categories":"7103202","data1": "7101","data2": "H57-24E6-C037","data3": "CA6DH1-24E6","data4": 200,"data5": 179,"data6": 2500},
        {"categories":"5025170","data1": "6021","data2": "K48-18E51-B395","data3": "K48-18E51-B395  ","data4": 220,"data5": 139,"data6":2300},
        {"categories":"5025274","data1": "5002","data2": "K71-32E51-B107","data3": "CA6DK1-32E51","data4": 163,"data5": 239,"data6":2300},
      ],
      "listData1":[
        {"categories":"今日总单量","data1": 20000, "data2": 3000,"data3": 1500,"data4": 1500,"data5": 1000},
        {"categories":"单期单量","data1": 15000, "data2": 2000,"data3": 1000,"data4": 300,"data5": 800},
        {"categories":"多期单量","data1": 5000, "data2": 1000,"data3": 500,"data4": 1200,"data5": 200},
        {"categories":"今日放款金额(万元)","data1": 15600.00, "data2": 500.00,"data3": 250.00,"data4": 250.00,"data5": 150.00},
        {"categories":"单期金额(万元)","data1": 11000.00, "data2": 350.00,"data3": 200.00,"data4": 50.00,"data5": 100.00},
        {"categories":"多期金额(万元)","data1": 4600.00, "data2": 150.00,"data3": 50.00,"data4": 20.00,"data5": 50.00}
      ],
      "todayData":[
        {"categories":"w001","data": 335},
        {"categories":"w002","data": 679},
        {"categories":"w003","data": 1548},
        {"categories":"w004","data": 1008},
        {"categories":"w005","data": 130},
        {"categories":"w006","data": 680},
        {"categories":"w007","data": 190}
      ],
      "PlannLoan":[
        {"categories":"w001","data1": 2.0,"data2": 2.6},
        {"categories":"w002","data1": 4.9,"data2": 5.9},
        {"categories":"w003","data1": 7.0,"data2": 9.0},
        {"categories":"w004","data1": 23.2,"data2": 26.4},
        {"categories":"w005","data1": 25.6,"data2": 28.7},
        {"categories":"w006","data1": 76.7,"data2": 70.7},
        {"categories":"w007","data1": 135.6,"data2": 175.6},
        {"categories":"w008","data1": 162.2,"data2": 182.2},
        {"categories":"w009","data1": 56.6,"data2": 48.7}
      ],

      "titleList":["14:00","14:30","15:00","15:30","16:00","16:30","17:00","17:30","18:00","18:30","19:00","19:30","20:00","20:30","21:00","21:30"],
      "dataList":["0.1","0.02","0.1","0.3","0","0.2","0","0.12","0.1","0.2","0.02","0.08","0.3","0.08","0.06","0.24"],
      "titleList06":["14:00","14:30","15:00","15:30","16:00","16:30","17:00","17:30","18:00","18:30","19:00","19:30","20:00","20:30","21:00","21:30"],
      "dataList06":["0.1","0.12","0.12","0.3","0","0.12","0","0.12","0.1","0.2","0.02","0.18","0.13","0.08","0.06","0.24"],
      "titleList2":["-3","-2","-1","0","1","2","3"],
      "dataList2":["0","1.1","11.6","34.1","11.6","1.1","0"],
      "titleList6":["用途1","用途2","用途3","用途4","用途5"],
      "dataList6":["60","40","20","80","100"],
      "legendList3":["专机","机加线","其他"],
      "titleList3":["专机","机加线","其他"],
      "dataList3":["3355","679","1548"],
      "dataList32":["954","179","1048"],
      "titleList4":["专机","机加线","其他"],
      "dataList4":["1548","1008","1300"],
      "dataList42":["148","108","330"],
      "legendList5":["累计产量","计划产量"],
      "titleList5":["0234B","0061W","4008B","0073B","0006W","1255B","2453A"],
      "dataList5":[ ["335","679","1548","1008","130","1548","1008"],
        ["130","1548","1008","130","680","335","679"]
      ],
      "titleList7":["北京","天津","上海","重庆","河北","河南","云南","辽宁","黑龙江","湖南","安徽","山东","新疆","江苏","浙江","江西","湖北","广西","甘肃","山西","内蒙古","陕西","吉林","福建","贵州","广东","青海","西藏","四川","宁夏","海南","台湾","香港","澳门"],
      "titleList8":["辽宁","黑龙江","湖南","安徽","山东","新疆","江苏","浙江","江西","湖北","广西","甘肃","山西","内蒙古","陕西","吉林","福建","贵州","广东","青海","西藏","四川","宁夏","海南","台湾"],
      "titleList9":["甘肃","山西","内蒙古","陕西","吉林","福建","贵州","广东","青海","西藏","四川","宁夏","海南","台湾","香港","澳门","北京","天津","上海"],
      PageCount: 0,
      total: 0, // 总条数
      pageSize: 5, // 每页显示条数
      PageCurrent: 1 // 后台获取页
    }
  },
  created() {
    this.ifsrc = window.dt_Config.dt_iframe
    this.getLogo()
    window.updateRobotData = this.updateRobotData
  },
  mounted() {
    const scope = this
    window.addEventListener('message', function(event) {
      const type = event.data['type']
      const data = event.data['data']
      switch (type) {
        case 'cameraStatus':
          scope.changeCameraState(data)
          break
        case 'robotPosition':
          scope.updateRobotData(data['ModelId'], data['robotData'])
          break
        default:
          break
      }
    })
    this.initEcharts()
    this.init()
    this.init1()
    this.init2()

    this.drawFaultType()
    this.drawFaultTime()
    this.timer_1 = setInterval(this.init, 10000)
    this.timer_2 = setInterval(this.init1, 60000)
    this.timer_3 = setInterval(this.init2, 60000)
    this.timer_4 = setInterval(this.init3, 500)
  },
  beforeDestroy() {
    clearInterval(this.timer_1)
    clearInterval(this.timer_2)
    clearInterval(this.timer_3)
    clearInterval(this.timer_4)
  },
  methods: {
    init() {
      this.searchChartData()
      this.searchFaultTypeName()
      this.searchFaultTime()
      //this.searchChartData3()
      this.searchChartData4()

      // 不经过存储过程直接渲染图表 用于测试
      this.drawLine4()
    },
    init1() {
      this.searchChartData1()
    },
    init2() {
      this.drawDailyOutput()
      // this.searchChartDataMySql()
    },
    init3() {
      this.searchRobotPoseSpeed()
    },
    searchRobotPoseSpeed() {
      var param = []
      var Data = this.CreateData('11', '基础数据_机器人信息_查询', param)
      this.ExecDatabase(Data).then(response => {
        for (const argument of response.data) {
          if (this.robotInfo[argument.RobotCode]) {
            this.robotInfo[argument.RobotCode]['tcp'] = this.solvePose(argument.CurrentTcpPose)
            this.robotInfo[argument.RobotCode]['speed'] = argument.CurrentSpeed
            this.robotInfo[argument.RobotCode]['alarm'] = this.solveAlarm(argument.AlarmInfo)
	          const data = {
              type: 'robotInfo',
		          data: {
                RobotCode: argument.RobotCode,
                tcp: this.robotInfo[argument.RobotCode]['tcp'],
                speed: this.robotInfo[argument.RobotCode]['speed'],
                alarm: this.robotInfo[argument.RobotCode]['alarm']
		          }
	          }
            this.$refs.dmtComIframe.contentWindow.postMessage(data, '*')
            // this.$refs.dmtCom.updateLabelInfoSpeedPose(argument.RobotCode, this.robotInfo[argument.RobotCode]['tcp'], this.robotInfo[argument.RobotCode]['speed'], this.robotInfo[argument.RobotCode]['alarm'])
          }
        }
      })
    },
    solvePose(poseString) {
      let json = {
        X: '0',
        Y: '0',
        Z: '0',
        A: '0',
        B: '0',
        C: '0'
      }
      try {
        json = JSON.parse(poseString)
        if (!json) {
          json = {
            X: '0',
            Y: '0',
            Z: '0',
            A: '0',
            B: '0',
            C: '0'
          }
        }
      } catch (e) {
        console.log(e.toString())
      }
      return {
        'tx': json.X,
        'ty': json.Y,
        'tz': json.Z,
        'rx': json.A,
        'ry': json.B,
        'rz': json.C
      }
    },
    solveAlarm(poseString) {
      if (poseString === '') poseString = '{}'
      let json = [
        {
          'Time': '',
          'AlarmMessage': '',
          'SeverityMessage': ''
        },
        {
          'Time': '',
          'AlarmMessage': '',
          'SeverityMessage': ''
        },
        {
          'Time': '',
          'AlarmMessage': '',
          'SeverityMessage': ''
        }
      ]
      try {
        json = JSON.parse(poseString)
        if (!json) {
          json = [
            {
              'Time': '',
              'AlarmMessage': '',
              'SeverityMessage': ''
            },
            {
              'Time': '',
              'AlarmMessage': '',
              'SeverityMessage': ''
            },
            {
              'Time': '',
              'AlarmMessage': '',
              'SeverityMessage': ''
            }
          ]
        }
      } catch (e) {
        console.log(e.toString())
      }
      return json
    },
    initEcharts() {
      this.chartDom1 = echarts.init(document.getElementById('dashboardOne'))
      this.chartDom2 = echarts.init(document.getElementById('dashboardTwo'))
      this.chartDom3 = echarts.init(document.getElementById('dashboardThree'))
      this.chartDom4 = echarts.init(document.getElementById('dailyOutput'))
      this.chartDom5 = echarts.init(document.getElementById('faultType'))
      this.chartDom6 = echarts.init(document.getElementById('faultTime'))
      this.chartDom7 = echarts.init(document.getElementById('myChart4'))
    },
    searchChartData() {
      var param4 = []
      var Data4 = this.CreateData('11', '生产看板_计划产量_查询', param4)
      this.ExecDatabase(Data4).then(response => {
        // this.planProcess = response.data[0].生产进度
        for (const info of this.statusInformation) {
          if (info.id === 'ProductionPlan') info.data = response.data[0].计划产量
          // if (info.id === 'ActualOutput') info.data = response.data[0].实际产量
          // if (info.id === 'rhythm') info.data = response.data[0].小时产量
          if (info.id === 'NumberFaults') info.data = response.data[0].故障数量
          if (info.id === 'FaultsTime') info.data = response.data[0].故障时间
        }
        this.drawDashboardOne()
      })
      this.drawDashboardOne()
    },
    searchChartDataMySql() {
      const url = '/SelectPlanOutput'
      const params = {
      }
      this.ExecDT_Process_Get(url, params).then(response => {
        let all = 0
        for (const info of this.statusInformation) {
          if (info.id === 'ActualOutput') info.data = response.data['PlanOutputCount']
          if (info.id === 'rhythm') info.data = response.data['PlanOutputCountH']
          if (info.id === 'ProductionPlan') all = info.data
        }
        this.planProcess = Math.floor(parseFloat(response.data['PlanOutputCount']) / all * 100 * 100) / 100
      })

      const url1 = '/SelectSevenPlanOutput'
      const params1 = {
      }
      this.ExecDT_Process_Get(url1, params1).then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.myChart4X[i] = response.data[i].date.substring(response.data[i].date.length - 5, response.data[i].date.length)
          this.myChart4Y[i] = response.data[i].num
          this.averData += response.data[i].num
        }
        this.averData = parseInt(this.averData)
        this.drawDailyOutput()
      })

    },
    searchChartData1() {
      var param4 = []
      var Data4 = this.CreateData('11', '生产看板_生产可动率_查询', param4)
      this.ExecDatabase(Data4).then(response => {
        this.performanceRate = response.data[0].性能开动率
        this.timeRate = response.data[0].时间开动率
        for (const info of this.statusInformation) {
          if (info.id === 'OEEAnalysis') info.data = response.data[0].设备效能OEE
        }
        this.drawDashboardTwo()
        this.drawDashboardThree()
      })
      this.drawDashboardTwo()
      this.drawDashboardThree()
    },
    // 7日产量
    searchChartData2() {
      var param4 = []
      this.averData = 0
      var Data4 = this.CreateData('11', '生产看板_日产量曲线_查询', param4)
      this.ExecDatabase(Data4).then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.myChart4X[i] = response.data[i].date.substring(response.data[i].date.length - 5, response.data[i].date.length)
          this.myChart4Y[i] = response.data[i].num
          this.averData += response.data[i].num
        }
        this.averData = parseInt(this.averData)
        this.drawDailyOutput()
      })
      this.drawDailyOutput()
    },
    // 7日报警
    searchChartData3() {
      var param4 = []
      var Data4 = this.CreateData('11', '生产看板_日报警曲线_查询', param4)
      this.ExecDatabase(Data4).then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.myChart4X1[i] = response.data[i].date.substring(response.data[i].date.length - 5, response.data[i].date.length)
          this.myChart4Y1[i] = response.data[i].num
        }
        this.drawLine4()
      })
    },
    // 报警信息查询
    searchChartData4() {
      var param4 = []
      var Data4 = this.CreateData('11', '生产看板_报警信息_查询', param4)
      this.ExecDatabase(Data4).then(response => {
        if (response.data.length !== 0) {
          this.tableData = response.data
          this.$refs.seamlessScroll.reset()
        }
      })
    },
    updateRobotData(ModelId, robotData) {
      switch (ModelId) {
        case 'B3FD789E-E018-4006-91AD-4824830E6557':
          for (const robotDatum of Object.keys(robotData)) {
            this.robotList[0][robotDatum] = robotData[robotDatum]
          }
          break
        case 'A769F461-4011-46A4-BBC2-2AFB39EFD9C2':
          for (const robotDatum of Object.keys(robotData)) {
            this.robotList[1][robotDatum] = robotData[robotDatum]
          }
          break
        case '04A6D8F9-7019-4C92-8845-B3CFDDF4A433':
          for (const robotDatum of Object.keys(robotData)) {
            this.robotList[2][robotDatum] = robotData[robotDatum]
          }
          break
        case 'B2BF5C42-B6ED-46D8-A7C3-046968D39805':
          for (const robotDatum of Object.keys(robotData)) {
            this.robotList[3][robotDatum] = robotData[robotDatum]
          }
          break
      }
    },
    getLogo() {
      axios.get('../../logo.png', {
        responseType: 'arraybuffer'
      }).then(res => {
        this.titlePng = 'data:image/jpeg;base64,' + btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), ''))
      })
    },
    drawDashboardOne() {
      this.chartDom1.setOption({
        series: [
          {
            type: 'gauge',
            progress: {
              show: true,
              width: 5
            },
            axisLine: {
              lineStyle: {
                width: 5,
                color: [
                  [0.3, '#ff6b6b'],
                  [0.7, '#ffa94d'],
                  [1, '#69db7c']
                ]
              }
            },
            radius: '95%',
            axisTick: {
              show: false
            },
            splitLine: {
              distance: 0,
              length: 3,
              lineStyle: {
                width: 1,
                color: 'white'
              }
            },
            axisLabel: {
              distance: 10,
              color: 'white',
              fontSize: 7
            },
            anchor: {
              show: true,
              showAbove: true,
              size: 5,
              itemStyle: {
                borderWidth: 3
              }
            },
            title: {
              show: false
            },
            detail: {
              valueAnimation: true,
              fontSize: 16,
              color: 'white',
              offsetCenter: [0, '100%']
            },
            data: [
              {
                value: this.planProcess
              }
            ]
          }
        ] })
    },
    drawDashboardTwo() {
      this.chartDom2.setOption({
        series: [
          {
            type: 'gauge',
            axisLine: {
              lineStyle: {
                width: 5,
                color: [
                  [0.3, '#ff6b6b'],
                  [0.7, '#ffa94d'],
                  [1, '#69db7c']
                ]
              }
            },
            pointer: {
              itemStyle: {
                color: 'auto'
              }
            },
            axisTick: {
              distance: -5,
              length: 3,
              lineStyle: {
                color: '#fff',
                width: 1
              }
            },
            radius: '95%',
            splitLine: {
              distance: -5,
              length: 5,
              lineStyle: {
                color: '#fff',
                width: 2
              }
            },
            axisLabel: {
              color: 'auto',
              distance: 8,
              fontSize: 8
            },
            detail: {
              formatter: '',
              valueAnimation: true,
              fontSize: 16,
              color: 'white',
              offsetCenter: [0, '100%']
            },
            data: [
              {
                value: this.timeRate
              }
            ]
          }
        ]
      })
    },
    drawDashboardThree() {
      this.chartDom3.setOption({
        series: [
          {
            type: 'gauge',
            axisLine: {
              lineStyle: {
                width: 5,
                color: [
                  [0.3, '#ff6b6b'],
                  [0.7, '#ffa94d'],
                  [1, '#69db7c']
                ]
              }
            },
            pointer: {
              itemStyle: {
                color: 'auto'
              }
            },
            axisTick: {
              distance: -5,
              length: 3,
              lineStyle: {
                color: '#fff',
                width: 1
              }
            },
            radius: '95%',
            splitLine: {
              distance: -5,
              length: 5,
              lineStyle: {
                color: '#fff',
                width: 2
              }
            },
            axisLabel: {
              color: 'auto',
              distance: 8,
              fontSize: 8
            },
            detail: {
              formatter: '',
              valueAnimation: true,
              fontSize: 16,
              color: 'white',
              offsetCenter: [0, '100%']
            },
            data: [
              {
                value: this.performanceRate
              }
            ]
          }
        ]
      })
    },
    drawDailyOutput() {
      this.chartDom4.setOption({
        grid: [
          {
            left: '13%',
            top: '10%',
            right: '8%',
            bottom: '15%'
          }
        ],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          data: this.myChart4X,
          axisLine: {
            lineStyle: {
              color: 'white'
            }
          },
          axisLabel: {
            color: 'white',
            interval: 0,
            rotate: 45
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            color: 'white'
          }
        },
        series: [
          {
            data: this.myChart4Y,
            type: 'bar',
            itemStyle: {
              color: '#fac858'
            },
            markLine: {
              data: [{ type: 'average', name: 'Avg' }],
              lineStyle: {
                color: 'red'
              },
              precision: 0,
              label: {
                position: 'end',
                color: 'white',
                distance: -0
              }
            }
          }
        ]
      })
    },
    searchFaultTypeName() {
      this.alarmTypes = {}
      var param4 = []
      param4[0] = ['AlarmTypeName', '']
      var Data4 = this.CreateData('11', '基础数据_报警类型设定_查询', param4)
      this.ExecDatabase(Data4).then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.alarmTypes['AlarmTypeCode_' + response.data[i].AlarmTypeCode] = response.data[i].AlarmTypeName
        }
        this.searchFaultType()
      })
    },
    searchFaultType() {
      var param4 = []
      var Data4 = this.CreateData('11', '生产看板_故障类型分布_查询', param4)
      this.ExecDatabase(Data4).then(response => {
        this.myChart4Alarm1 = []
        for (let i = 0; i < response.data.length; i++) {
          this.myChart4Alarm1.push({
            name: response.data[i].AlarmTypeName,
            value: response.data[i].AlarmCount,
            code: 'AlarmTypeCode_' + response.data[i].AlarmTypeCode
          })
        }

        for (const info in this.alarmTypes) {
          if (this.myChart4Alarm1.filter(res => res.code === info).length === 0) {
            this.myChart4Alarm1.push({
              name: this.alarmTypes[info],
              value: 0,
              code: info
            })
          }
        }
        this.drawFaultType()
      })
    },
    drawFaultType() {
      var scope = this
      this.chartDom5.setOption({
        color: ['#38b3f1'],
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'line' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        textStyle: {
          color: '#ccc'
        },
        grid: {
          top: '10%',
          left: '3%',
          right: '3%',
          bottom: '6%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          data: window.g.spcTitleList,
          axisTick: {
            alignWithLabel: true
          }
        }],
        yAxis: [{
          type: 'value'
        }],
        series: [{
          name: 'SPC',
          type: 'line',
          barWidth: '60%',
          data: window.g.spcDataList,
          markLine: {
            data: [{
              name: 'UCL',
              yAxis: 0.275
            }, {
              name: 'CL',
              yAxis: 0.132
            }, {
              name: 'LCL',
              yAxis: 0
            }],
            label: {
              normal: {
                formatter: '{b} : {c}',
                position: 'middle'
              }
            }
          }
        }]
      })
    },
    searchFaultTime() {
      var param4 = []
      var Data4 = this.CreateData('11', '生产看板_类别故障时长_查询', param4)
      this.ExecDatabase(Data4).then(response => {
        this.myChart4Alarm2 = []
        for (let i = 0; i < response.data.length; i++) {
          this.myChart4Alarm2.push({
            name: response.data[i].AlarmTypeName,
            value: Math.floor(parseFloat(response.data[i].AlarmSum) / 3600 * 100) / 100,
            code: 'AlarmTypeCode_' + response.data[i].AlarmTypeCode
          })
        }

        for (const info in this.alarmTypes) {
          if (this.myChart4Alarm2.filter(res => res.code === info).length === 0) {
            this.myChart4Alarm2.push({
              name: this.alarmTypes[info],
              value: 0,
              code: info
            })
          }
        }
        this.drawFaultTime()
      })
    },
    drawFaultTime() {
      this.chartDom6.setOption({
        color:['#fc0000','#ff7d4e'],
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data:['极差控制图','均值控制图'],
          textStyle:{//图例文字的样式
            color:'#ccc',
            fontSize:16
          }
        },
        textStyle: {
          color: '#ccc'
        },
        xAxis:  {
          type: 'category',
          boundaryGap: false,
          data: ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24']
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            name:'极差控制图',
            type:'line',
            data:[14, 12, 12, 11, 13, 13, 14, 12, 13, 16, 11,14,13,12,12,13,15,12,11,15,16,14,12,14],
            itemStyle: {
              normal: {
                color: "#cccccc",
                lineStyle: {
                  color: "#fc0000"
                }
              }
            },
            markLine: {
              data: [
                {type: 'average', name: '平均值'}
              ]
            }
          },
          {
            name:'均值控制图',
            type:'line',
            data:[92, 90, 87,100,78, 72, 89, 75,88,74,89,91,92,89,78,84,82,83,81,92,94,91,92,80],
            itemStyle: {
              normal: {
                color: "#cccccc",
                lineStyle: {
                  color: "#ff7d4e"
                }
              }
            },
            markPoint: {
              data: [
                {name: '周最低', value: -2, xAxis: 1, yAxis: -1.5}
              ]
            },
            markLine: {
              data: [
                {type: 'average', name: '平均值'},

              ]
            }
          }
        ]
      })
    },
    // 报警数量统计
    drawLine4() {
      this.chartDom7.setOption({
        title : {
          subtext: 'Cp=1.25,Cpk=1.68',
          x:'center',
          color: "#fff"
        },
        textStyle: {
          color: '#fff'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#fff'
            }
          }
        },
        xAxis: [
          {
            type: 'value',
            min:0,
            max:20,
            interval:2
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '',
            min: 0,
            max: 0.25,
            interval: 50,
            axisLabel: {
              formatter: '{value} '
            }
          },
          {
            type: 'value',
            name: '',
            min: 0,
            max: 0.25,
            interval: 50,
            axisLabel: {
              formatter: '{value} '
            }
          }
        ],
        series: [
          {
            type:'bar',
            barCategoryGap : "30%",
            markLine: {
              data: [
                {xAxis: '8', name: 'SL',seriesName: '95.65'},
                {xAxis: '8.9', name: 'LSL',seriesName: '108.25'},
                {xAxis: '9.3', name: 'USL',seriesName: '108.25'}
              ],
              symbol: 'pin',
              label: {
                normal: {
                  formatter: '{b}',
                  position: 'middle'
                }
              },
              itemStyle: {
                normal: {
                  color: '#fff'
                }
              }
            },
            data:window.g.gData
          },
          {
            type:'line',
            yAxisIndex: 1,
            markLine: {
              data: window.g.gData2,
              symbol: 'pin',
              label: {
                normal: {
                  formatter: '{b}',
                  position: 'middle'
                }
              },
              lineStyle: {
                normal: {
                  type: 'dotted',
                  color: '#fff'
                }
              }
            },
            data:window.g.gData3
          }
        ]
      })
    },
    // 编辑生产计划
    showPlanPage(id) {
      for (const info of this.statusInformation) {
        if (id === 'ProductionPlan' && info.id === 'ProductionPlan') {
          this.dialogFormVisible1 = true
          this.form.planData = info.data
        }
      }
    },
    // 确认编辑生产计划
    submitAdd1() {
      var param = []
      param[0] = ['计划产量', this.form.planData]
      var Data = this.CreateData('12', '基础数据_生产计划_编辑', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data[0].result === '1') {
          this.$message.success('编辑成功')
          this.searchChartData1()
          this.dialogFormVisible1 = false
        } else {
          this.$message.error('编辑失败')
        }
      })
    },
    callOff1() {
      this.dialogFormVisible1 = false
    },
    changeCameraState(state) {
      if (this.isShow1 === state) return
      this.isShow = state ? 'inline' : 'none'
      this.isShow1 = state
    },
    restView() {
      const data = {
        type: 'restView',
        data: {}
      }
      this.$refs.dmtComIframe.contentWindow.postMessage(data, '*')
    },
    clickModel(object, position) {
      // if (object) {
      //   $('#robotrrrr').css({ display: 'inline' })
      //   $('#robotrrrr').css(position)
      //   $('#robotrrrr').text(object.userData.name)
      // } else {
      //   $('#robotrrrr').css({ display: 'none' })
      // }
    },
    solveDisPlay() {
      if (this.isShow1) {
        this.isShow = 'inline'
        this.isShow1 = true
      } else {
        this.isShow = 'none'
        this.isShow1 = false
      }
    }
    // // 自动增长
    // AutoGo() {
    //   if (this.flag === 0) {
    //     this.PageCurrent = 1
    //     this.searchChartData4()
    //   } else {
    //     if (this.PageCurrent >= this.PageCount) {
    //       this.PageCurrent = 1
    //     } else {
    //       this.PageCurrent += 1
    //     }
    //     this.searchChartData4()
    //   }
    // },
    // // 分页查询
    // handleCurrentChange(val) {
    //   clearInterval(this.timer_4)
    //   this.PageCurrent = val
    //   this.searchTable()
    //   this.timer_4 = setInterval(this.init, this.updateTime)
    // }
  }
}
</script>
<style>
	HTML{
		overflow: auto;
	}
	body{
		margin:0;
		padding:0;
		width: 1920px;
		height: 1080px;
		overflow: hidden;
		position: relative;
		font-family: MiSans Bold, serif;
	}
	/*css主要部分的样式*/
	/*定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸*/
	::-webkit-scrollbar {
		width: 5px; /*对垂直流动条有效*/
		height: 5px; /*对水平流动条有效*/
	}

	/*定义滚动条的轨道颜色、内阴影及圆角*/
	::-webkit-scrollbar-track {
		-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
		background-color: rgb(14, 50, 97);
		/*background-color: #ffffff;*/
		border-radius: 2px;
	}

	/*定义滑块颜色、内阴影及圆角*/
	::-webkit-scrollbar-thumb {
		border-radius: 5px;
		-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
		background-color: rgb(10, 35, 82);
	}

	/*定义两端按钮的样式*/
	::-webkit-scrollbar-button {
		display: none;
	}

	/*定义右下角汇合处的样式*/
	::-webkit-scrollbar-corner {
		background: #dedede;
	}
</style>
<style scoped="scoped">
	.background{
		width:1920px;
		height: 1080px;
		background-color: rgb(8, 31, 72);
		color: white;
		background-size: 100%;
	}
	.data-box {
		position: absolute;
		width: 360px;
		height: 300px;
		-webkit-box-shadow: rgb(24, 78, 135) 0 0 10px;
		-moz-box-shadow: rgb(24, 78, 135) 0 0 10px;
		box-shadow: inset 0 0 30px rgb(24, 78, 135);
	}
	.boxBorder{
		position:absolute;
		padding:10px;
		border-style: solid;
		border-color: rgb(71, 209, 226);
	}
	.borderLeft1{border-width: 2px 0 0 2px;top:-2px;left:-2px;}
	.borderLeft2{border-width: 2px 2px 0 0;top:-2px;right:-2px;}
	.borderRight1{border-width: 0 0 2px 2px;bottom:-2px;left:-2px;}
	.borderRight2{border-width: 0 2px 2px 0;bottom:-2px;right:-2px;}
	.indicatorBlock {
		float: left;
		margin: 12px 0 0 30px;
		width: 15px;
		height: 26px;
		background-color: #016eea
	}
	.indicatorText {
		margin: 16px 0 0 20px;
		float: left;
		font-size:20px
	}
	/*表格透明写法*/
	/deep/ .el-table,.el-table__expanded-cell {
		background-color: transparent;
	}
	/deep/ .el-table th {
		background-color: transparent !important;
		color: #fefefe;
	}
	/deep/ .el-table tr {
		background-color: transparent !important;
	}
	/deep/ .el-table--enable-row-transition .el-table__body td,
	/deep/.el-table .cell {
		background-color: transparent;
		color: white;
		border: none;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	/deep/.el-table th>.cell {
		color:rgba(254,254,254,1);
		font-weight: 700;
	}
	/deep/ .el-table td, .el-table th{
		padding: 8px 0;
	}
	.el-table__body-wrapper::-webkit-scrollbar {
		/*width: 0;宽度为0隐藏*/
		width: 0;
	}
	.el-table::before {
		/*left: 0;*/
		/*bottom: 0;*/
		width: 100%;
		height: 0;
	}

  .tool {
    border-collapse: collapse;
    border-spacing: 0;
  }

  .tool td {
    font-family: Arial, sans-serif;
    font-size: 16px;
    padding: 10px 5px;
    border-style: solid;
    border-width: 1px;
    overflow: hidden;
    word-break: normal;
    border-color: #fff;
  }

  .tool th {
    font-family: Arial, sans-serif;
    font-size: 16px;
    font-weight: normal;
    padding: 10px 5px;
    border-style: solid;
    border-width: 1px;
    overflow: hidden;
    word-break: normal;
    border-color: #fff;
  }

  .tool .tg-v8f3 {
    background-color: #fc0000;
    color: #fff;
    text-align: center;
    vertical-align: top
  }

  .tool .tg-lfnm {
    background-color: #464650;
    text-align: center;
    color: #fff;
  }

  .tool .tg-tr94 {
    background-color: #008100;
    color: #fff;
    text-align: center
  }

  .tool .tg-sh07 {
    background-color: #464650;
    text-align: center;
    color: #fff;
    vertical-align: top
  }

	/* 表格前的圆点 */

	/*/deep/.el-table td:nth-child(1):before {*/
	/*    content: "";*/
	/*    display: block;*/
	/*    position: absolute;*/
	/*    width: 7px;*/
	/*    height: 7px;*/
	/*    background: #5078fc;*/
	/*    top: 20px;*/
	/*    border-radius: 100%;*/
	/*}*/
	/*/deep/.el-table tr:nth-child(1) td:nth-child(1):before {*/
	/*    content: "";*/
	/*    display: block;*/
	/*    position: absolute;*/
	/*    width: 7px;*/
	/*    height: 7px;*/
	/*    background: #fe3548;*/
	/*    top: 20px;*/
	/*    border-radius: 100%;*/
	/*}*/
	/*/deep/.el-table tr:nth-child(2) td:nth-child(1):before {*/
	/*    content: "";*/
	/*    display: block;*/
	/*    position: absolute;*/
	/*    width: 7px;*/
	/*    height: 7px;*/
	/*    background: #ffb343;*/
	/*    top: 20px;*/
	/*    border-radius: 100%;*/
	/*}*/
	/*/deep/.el-table tr:nth-child(3) td:nth-child(1):before {*/
	/*    content: "";*/
	/*    display: block;*/
	/*    position: absolute;*/
	/*    width: 7px;*/
	/*    height: 7px;*/
	/*    background: #03a9f4;*/
	/*    top: 20px;*/
	/*    border-radius: 100%;*/
	/*}*/

</style>
