yudao-dev/src/views/OperationalOverview/processingBoard.vue

<!--
 * @Author: zwq
 * @Date: 2021-07-19 15:18:30
 * @LastEditors: zhp
 * @LastEditTime: 2024-04-16 13:42:27
 * @Description:
-->
<template>
  <div id="container" ref="container" class="visual-container" :style="styles">
    <el-row class="container-title" :style="{
    	height: 88 + 'px',
    	lineHeight: 88 + 'px',
    	fontSize: 31 + 'px',
    }">
      <img src="../../assets/img/logo.png" style="width: 1.1em; position: relative; top: 0.22em" alt="" />
      许昌安彩深加工看板
      <h3 class="unit">单位：河南汇融数字科技有限公司</h3>
      <h3 class="time">{{ times }}</h3>
      <!-- <el-button type="text" class="title-button" :style="{ right: 18 + 'px', top: 26 + 'px',fontSize:'32px'}"
        @click="changeFullScreen">
        <svg-icon width="32" height="32" v-if="isFullScreen" icon-class="unFullScreenView" />
        <svg-icon width="32" height="32" v-else icon-class="fullScreenView" />
      </el-button> -->
    </el-row>
    <el-row class="container-main flex-col" type="flex">
      <el-row :style="{ padding: '0 ' + 9 + 'px' }" :gutter="15" type="flex" class="flex-1" style="height: 50%">
        <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8" height="100%">
          <base-container :title="'设备报警'" :size="'small'" :height="318" :title-icon="'eqAlarm'">
            <dv-scroll-board class="eqTable" :config="eqConfig" style="width: 100%; height: 350px"
              ref="eqScrollBoard" />
          </base-container>
        </el-col>
        <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8" height="100%">
          <base-container :title="'各工序缺陷汇总'" :size="'small'" :title-icon="'scrap'">
            <dv-scroll-board :config="processConfig" style="width: 100%; height: 350px" ref="processScrollBoard" />
          </base-container>
        </el-col>

        <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8" height="100%">
          <base-container :height="318" :size="'small'" :title="'工单监控'" :title-icon="'eqMonitoring'">
            <div class="order" style="width: 100%; overflow: hidden scroll; height: 350px">
              <el-row v-for="op in orderList" :key="op.id" style="margin-bottom: .5em;overflow: hidden;">
                <!-- <el-col :span="12"> -->
                <!-- <div style="height: 34px;"> -->
                <span class="now-secondary-title" style="font-size: 14px;opacity: calc(.6);">{{ op.name }}</span>
                <el-divider class="split" v-if="op.specifications" direction="vertical"></el-divider>
                <!-- <span v-if="op.size" class="split"></span> -->
                <span v-if="op.specifications" class="orderSize" style="font-size: 14px;opacity: calc(.6);">{{
                op.specifications }}</span>
                <el-divider class="split" v-if="op.planQuantity" direction="vertical"></el-divider>
                <span v-if="op.planQuantity" class="orderPlan" style="font-size: 14px;opacity: calc(.6);">{{
                op.planQuantity }}</span>
                <span v-if="op.actualQuantity" class="orderFinish"
                  style="font-size: 14px;opacity: calc(.6);margin-left: 130px;">{{
                  op.actualQuantity
                  }}</span>
                <el-divider class="split" v-if="op.actualQuantity" direction="vertical"></el-divider>
                <!-- </div> -->
                <el-progress style="width: 620px;" text-color="rgba(255, 255, 255, .6)" :stroke-width="10"
                  define-back-color="rgba(32, 57, 96, 1)" :percentage="op.progressRate" class="custom-progress-bar" />
              </el-row>
            </div>
            <!-- </div> -->
          </base-container>
        </el-col>
      </el-row>

      <el-row :style="{ padding: '0 ' + 9 + 'px' }" :gutter="12" type="flex" class="flex-1">
        <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
          <base-container :show-yes-time="true" :no-content-padding="true" :height="256" :size="'eqStatus'"
            :title="'能源监控'" :title-icon="'energyMonitoring'">
            <el-row :gutter="9">
              <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="24">
                <linear-bar-chart ref="EnergyMonitoringChart" :name-list="EnergyMonitoringNameList"
                  :data-list="EnergyMonitoringList" :height="359" />
              </el-col>
            </el-row>
          </base-container>
        </el-col>
        <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
          <base-container :show-time="true" :no-content-padding="true" :height="318 + 338 + 16" :size="'eqStatus'"
            :title="'产线产量及良品率'" :title-icon="'productLine'">
            <div class="myLegend">
              <div class=" barCircleLegend"></div>
              <div class=" barCircle"></div>
              <h4 class="barText">产线良品率</h4>
              <div class="barLegend"></div>
              <h4 class="barCircleText">产线产量</h4>
            </div>
            <double-y-chart ref="productLineChart" :id="'doubleYChart'" :height="390" :show-legend="true" />
          </base-container>
        </el-col>
      </el-row>
    </el-row>
  </div>
</template>

<script>
import baseContainer from './components/baseContainer';
import baseTable1 from './components/baseTable';
import screenfull from 'screenfull';
import doubleYChart from './components/doubleYChart ';
import LinearBarChart from './components/linearBarChart';
import WebSocketHeartbeat from './ws.js';

// 创建WebSocketHeartbeat实例
const qualityYearList = [
	{
		name: '翻转机',
		code: 'EQ20240110112358000235',
		status: '运行',
		error: '否',
	},
	{
		name: '烘干炉',
		code: 'EQ20240110112537000241',
		status: '运行',
		error: '否',
	},
	{
		name: '清洗机',
		code: '	EQ20240110112310000232',
		status: '运行',
		error: '否',
	},
	{
		name: '钢化清洗机',
		code: 'EQ20240110111700000208',
		status: '运行',
		error: '否',
	},
	{
		name: '固化机',
		code: 'EQ20240110111700000201',
		status: '运行',
		error: '否',
	},
	{
		name: '磨边清洗机',
		code: '	EQ20240110111700000208',
		status: '运行',
		error: '否',
	},
	{
		name: '预热机',
		code: 'EQ20240110111700000205',
		status: '故障',
		error: '是',
	},
	{
		name: '下片机',
		code: 'EQ20240115151435000279',
		status: '运行',
		error: '否',
	},
	{
		name: '冷却机',
		code: 'EQ20240110111700000203',
		status: '运行',
		error: '否',
	},
	{
		name: 'A储片机106',
		code: 'EQ20240110111700000202',
		status: '运行',
		error: '否',
	},
	{
		name: '二次清洗机',
		code: 'EQ20240110111700000209',
		status: '运行',
		error: '否',
	},
	{
		name: '二次磨边机',
		code: '	EQ20240110110927000181',
		status: '故障',
		error: '是',
	},
	{
		name: '测试设备',
		code: 'EQ20240110111700000201',
		status: '运行',
		error: '否',
	},
];
const qualityMonthList = [
	{
		productionLineName: 'D61',
		sectionName: '成型',
		count: '3片',
		inspectionTypeName: '细长泡',
	},
	{
		productionLineName: 'D62',
		sectionName: '组合落板',
		count: '4片',
		inspectionTypeName: '细长泡',
	},
	{
		productionLineName: 'D61',
		sectionName: '磨边',
		count: '6片',
		inspectionTypeName: '开口泡',
	},
	{
		productionLineName: 'D63',
		sectionName: '清洗',
		count: '5片',
		inspectionTypeName: '结石',
	},
	{
		productionLineName: 'D64',
		sectionName: '打孔',
		count: '2片',
		inspectionTypeName: '结石',
	},
	{
		productionLineName: 'D63',
		sectionName: '成型',
		count: '7片',
		inspectionTypeName: '开口泡',
	},
	{
		productionLineName: 'D61',
		sectionName: '上片',
		count: '8片',
		inspectionTypeName: '结石',
	},
];
const orderProcessList = [
	{
		id: '1',
		outRate: '.8',
		name: '凯盛0322',
	},
	{
		id: '2',
		outRate: '.4',
		name: '光伏玻璃4.0',
	},
	{
		id: '3',
		outRate: '.5',
		name: '光伏玻璃3.0',
	},
	{
		id: '4',
		outRate: '.3',
		name: '光伏玻璃2.0',
	},
	{
		id: '5',
		outRate: '.5',
		name: '光伏玻璃1.0',
	},
	{
		id: '6',
		outRate: '.8',
		name: '光伏玻璃',
	},
	{
		id: '7',
		outRate: '.8',
		name: '统计订单',
	},
];
export default {
	name: 'ProductionMonitoringCockpit',
	components: {
		baseContainer,
		baseTable1,
		// baseTable2,
		// baseTable3,
		// TopRadioGroup,
		doubleYChart,
		LinearBarChart,
		// pieChart1,
		// pieChart2
		// pieChart3
		// BaseVideo
	},
	data() {
		return {
			beilv2: 1,
			beilv: 1,
			value: 100,
			orderList: [],
			times: '',
			EnergyMonitoringNameList: [],
			// equipmentList:[],
			EnergyMonitoringList: [],
			eqConfig: {
				header: ['序号', '设备名称', '设备编码', '设备状态', '是否故障'],
				headerBGC: 'rgba(32, 55, 96, 0.8)',
				oddRowBGC: 'rgba(32, 55, 96, 0.8)',
				evenRowBGC: 'rgba(14, 32, 62, 0.8)',
				columnWidth: [70, 100, 200, 90, 90],
				align: ['center'],
				data: [],
				// index:true,
				rowNum: 10,
			},
			processConfig: {
				header: ['序号', '产线名称', '工序', '损耗片数', '缺陷类型'],
				headerBGC: 'rgba(32, 55, 96, 0.8)',
				oddRowBGC: 'rgba(32, 55, 96, 0.8)',
				evenRowBGC: 'rgba(14, 32, 62, 0.8)',
				columnWidth: [70, 130, 100, 120, 110],
				align: ['center'],
				data: [],
				// index:true,
				rowNum: 10,
			},
			// cxDataList,
			SJGws: undefined,
			wsHeartbeat: undefined,
			productLineList: [],
			qualityYearList,
			clientWidth: 0,
			containerWidth: 111111,
			isFullScreen: false,
			// orderProcessList: [],
			orderProcessList,
			qualityMonthList,
			// qualityMonthTableProps,
			modelMonth: '',
			dateType: '0',
		};
	},
	computed: {
		styles() {
			const v = Math.floor(this.value * this.beilv2 * 100) / 10000;
			return {
				transform: `scale(${v})`,
				transformOrigin: 'top left',
			};
		},
	},
	watch: {
		isFullScreen: function (val) {
			if (val) {
				const _this = this;
				_this.beilv2 = document.documentElement.clientWidth / 1920;
				console.log(_this.beilv2);
			} else {
				const _this = this;
				_this.beilv2 = document.documentElement.clientWidth / 1920;
			}
		},
		clientWidth(val) {
			if (!this.timer) {
				this.clientWidth = val;
				this.beilv2 = this.clientWidth / 1920;
				this.timer = true;
				let _this = this;
				setTimeout(function () {
					_this.timer = false;
				}, 500);
			}
			this.windowWidth(val);
		},
	},
  created() {
    this.getData();
		this.init();
		setTimeout(() => {
			window.location.reload();
		}, 86400000);
	},
	destroyed() {
		this.websocketClose();
		this.SJGWebsocketClose();
	},
	mounted() {
		let detData = [
			{
				id: '1',
				name: '测试工单',
        progressRate: 0.933333,
        specifications: '1100*5554*22',
        plan: 11111,
        finish:111,
			},
			{
				id: '2',
				name: '测试工单2',
        progressRate: 0.932323,
        size: '1100*5554*22',
        plan: 11111,
        finish: 111,
			},
			{
				id: '3',
				name: '测试工单3',
        progressRate: 0.23232,
        size: '1100*5554*22',
        plan: 11111,
        finish: 111,
			},
			{
				id: '4',
				name: '测试工单4',
        progressRate: 0.32323,
        size: '1100*5554*22',
        plan: 11111,
        finish: 111,
      },
      {
        id: '5',
        name: '测试工单4',
        progressRate: 0.32323,
        size: '1100*5554*22',
        plan: 11111,
        finish: 111,
      },
      {
        id: '6',
        name: '测试工单4',
        size: '1100*5554*22',
        progressRate: 0.32323,
        plan: 11111,
        finish: 111,
      },
      {
        id: '7',
        name: '测试工单4',
        size: '1100*5554*22',
        progressRate: 0.32323,
        plan: 11111,
        finish: 111,
      },
      {
        id: '8',
        name: '测试工单4',
        progressRate: 0.32323,
        size: '1100*5554*22',
        plan: 11111,
        finish: 111,
      },
			// {
			//   id: '5',
			//   name: '测试工单',
			//   progressRate: 0.5555
			// }, {
			//   id: '6',
			//   name: '测试工单',
			//   progressRate: 0.66564
			// },
		];
		this.orderList = detData.map((ele, index) => {
			if (ele.progressRate && ele.progressRate != 1) {
				return {
					id: ele.id,
					name: ele.name,
          progressRate: parseFloat((ele.progressRate * 100).toFixed(0)),
          specifications: ele.specifications ?  '规格' + ele.specifications :null,
          planQuantity: ele.plan ? '计划' + ele.plan + '片' : null,
          finish: ele.finish + '片',
				};
			}
		});
		let EnergyNameList = ['Y61', 'Y62', 'Y63', 'Y64', 'Y65'];
		this.EnergyMonitoringNameList = EnergyNameList;
		let EnergyDataList = [1, 2, 3, 4, 5];
		// this.wsData.data.forEach((ele) => {
		//   EnergyDataList.push(ele.useQuantity)
		// })
		this.EnergyMonitoringList = EnergyDataList;
		// console.log(EnergyDataList)
		this.$refs.EnergyMonitoringChart.initChart(
			this.EnergyMonitoringNameList,
			this.EnergyMonitoringList
		);
		let eqArr = this.qualityYearList.map((item, index) => [
			`<span style="color:rgba(255,255,255,0.5)" >${index + 1 || ''}
            </span>`,
			// formatDate(item.planStartTime) || '',
			`
          <span style="color:rgba(255,255,255,0.5)" >${item.name || ''}
            </span>`,
			`<span style="color:rgba(255,255,255,0.5)">${item.code || ''}</span>`,
      `<span style="color:rgba(255,255,255,0.5)"><div style="${item.status == '运行' ? 'box-shadow: 0px 0px 2px 1px #2760FF;width:6px;height:6px;border-radius: 50%;background-color: #2760FF;float:left;margin:13px 10px 0 0 ' : 'box-shadow: 0px 0px 2px 1px #FFBD02;width:6px;height:6px;border-radius: 50%;  background-color: #FFBD02;float:left;margin:13px 10px 0 0 '}"></div>  ${item.status || ''}</span>`,
      `<span style="color:rgba(255,255,255,0.5)"><div style="${item.error == '是' ? 'box-shadow: 0px 0px 2px 1px #2760FF;width:6px;height:6px;border-radius: 50%;background-color: #2760FF;float:left;margin:13px 10px 0 0 ' : 'box-shadow: 0px 0px 2px 1px #FFBD02;width:6px;height:6px;border-radius: 50%;  background-color: #FFBD02;float:left;margin:13px 10px 0 0 '}"></div>  ${item.error || ''}</span>`,
		]);
    this.eqConfig.data = eqArr;
    let data = [
      {
        lineName: 'D62',
        outputNum: '11111',
        passRate: '0.9873'
      },
      {
        lineName: 'D63',
        outputNum: '23212',
        passRate: '0.9873'
      },
      {
        lineName: 'D61',
        outputNum: '423323',
        passRate: '0.9873'
      },
      {
        lineName: 'D64',
        outputNum: '43434',
        passRate: '0.9873'
      },
    ]
    let nameList = [];
    let passRateList = [];
    let outputNumList = [];
    // let arr = ['D64', 'D62', 'D61', 'D63', 'D65']
    for (let i = 0; i < data.length - 1; i++) {
      // 二次循环，注意：再减去外层的循环次数，向后依次两两相互比较转换；
      for (let j = 0; j < data.length - i - 1; j++) {
        // 当前一个值大于后一个值
        if (data[j].lineName.substr(data[j].lineName.length - 1, 1) > data[j + 1].lineName.substr(data[j + 1].lineName.length - 1, 1)) {
          // 定义变量，以赋值的形式前后交换，直到换到最小的在前面，左右再无比较，则循环结束形成排序结果
          let temp = data[j];
          data[j] = data[j + 1];
          data[j + 1] = temp;
        }
      }
    }
    data.forEach((ele) => {
      // if (item.id == ele.productionLineId) {
      // if (item.name.substr(0, 1) == "D") {
      // console.log(ele)
      nameList.push(ele.lineName);
      outputNumList.push(ele.outputNum);
      passRateList.push(ele.passRate);
      // }
      // }
    });
    this.$nextTick(() => {
      this.$refs.productLineChart.initChart(
        nameList,
        passRateList,
        outputNumList
      );
    })
		// this.getList()
		this.initWebSocket();
		this.SJGInitWebSocket();
		this.getTimes();
		// this.$refs.EnergyMonitoringChart.initChart(['Y61', 'Y62', 'Y63', 'Y64', 'Y65',], [3134, 2323, 3232, 3233, 2321])
		const _this = this;
		_this.beilv2 = document.documentElement.clientWidth / 1920;
		window.onresize = () => {
			return (() => {
				_this.clientWidth = `${document.documentElement.clientWidth}`;
				this.beilv2 = _this.clientWidth / 1920;
			})();
		};
	},

	// beforeDestroy() {
	//   //离开页面删除检测器和所有侦听器
	//   // erd.uninstall(document); //这里用ref是因为vue离开页面后获取不到dom
	//   removeEventListener('resize', resizeFun)
	// },
  methods: {
		getData() {
			let processArr = qualityMonthList.map((item, index) => [
				// console.log(item)
				`<span style="color:rgba(255,255,255,0.5)" >${index + 1 || ''}
            </span>`,
				// formatDate(item.planStartTime) || '',
				`
          <span style="color:rgba(255,255,255,0.5)" >${
						item.productionLineName || ''
					}
            </span>`,
				`<span style="color:rgba(255,255,255,0.5)">${
					item.sectionName || ''
				}</span>`,
				`<span style="color:rgba(255,255,255,0.5)">${item.count || ''}</span>`,
				`<span style="color:rgba(255,255,255,0.5)">${
					item.inspectionTypeName || ''
				}</span>`,
			]);
      this.processConfig.data = processArr;
      // this.$nextTick(() => {
        this.$refs['processScrollBoard'].updateRows(processArr);
      // })
		},
		// getList() {
		//   // this.$axios.get(
		//   //   'base/core-production-line/listAll',
		//   //   'get',
		//   //   this.queryParams
		//   // ).then((res) => {
		//   //   // console.log('11111', res);
		//   //   this.productLineList = res.data
		//   // })
		//   this.$axios.get(
		//     'base/quality-inspection-record/dayStatistics',
		//     'get',
		//   ).then((res) => {
		//     // console.log('11111', res);
		//     let processArr = qualityMonthList.map((item, index) => [
		//       // console.log(item)
		//       `<span style="color:rgba(255,255,255,0.5)" >${index + 1 || ''}
		//         </span>`,
		//       // formatDate(item.planStartTime) || '',
		//       `
		//       <span style="color:rgba(255,255,255,0.5)" >${item.productionLineName || ''}
		//         </span>`,
		//       `<span style="color:rgba(255,255,255,0.5)">${item.sectionName || ''}</span>`,
		//       `<span style="color:rgba(255,255,255,0.5)">${item.count || ''}</span>`,
		//       `<span style="color:rgba(255,255,255,0.5)">${item.inspectionTypeName || ''}</span>`,
		//     ])
		//     this.processConfig.data = processArr
		//     this.$refs['processScrollBoard'].updateRows(processArr)
		//     // if (res.data.length !==0) {
		//     //   let processArr = res.data.map((item, index) => [
		//     //     // console.log(item)
		//     //     `<span style="color:rgba(255,255,255,0.5)" >${index + 1 || ''}
		//     //     </span>`,
		//     //     // formatDate(item.planStartTime) || '',
		//     //     `
		//     //   <span style="color:rgba(255,255,255,0.5)" >${item.productionLineName || ''}
		//     //     </span>`,
		//     //     `<span style="color:rgba(255,255,255,0.5)">${item.sectionName || ''}</span>`,
		//     //     `<span style="color:rgba(255,255,255,0.5)">${item.count || ''}</span>`,
		//     //     `<span style="color:rgba(255,255,255,0.5)">${item.inspectionTypeName || ''}</span>`,
		//     //   ])
		//     //   this.processConfig.data = processArr
		//     //   this.$refs['processScrollBoard'].updateRows(processArr)
		//     // }
		//   })
		// },
		getTimes() {
			setInterval(this.getTimesInterval, 1000);
		},
		getTimesInterval: function () {
			let _this = this;
			let year = new Date().getFullYear(); //获取当前时间的年份
			let month = new Date().getMonth() + 1; //获取当前时间的月份
			let day = new Date().getDate(); //获取当前时间的天数
			let hours = new Date().getHours(); //获取当前时间的小时
			let minutes = new Date().getMinutes(); //获取当前时间的分数
			let seconds = new Date().getSeconds(); //获取当前时间的秒数
			//当小于 10 的是时候，在前面加 0
			if (hours < 10) {
				hours = '0' + hours;
			}
			if (minutes < 10) {
				minutes = '0' + minutes;
			}
			if (seconds < 10) {
				seconds = '0' + seconds;
			}
			//拼接格式化当前时间
			this.times =
				year +
				'.' +
				month +
				'.' +
				day +
				' ' +
				hours +
				':' +
				minutes +
				':' +
				seconds;
		},
		initWebSocket() {
			let date = new Date().valueOf();
			const wsUrl =
				process.env.VUE_APP_Socket_API + `/websocket/message?userId=EN${date}`;
			this.wsHeartbeat = new WebSocketHeartbeat(wsUrl);

			// 处理收到的消息
			this.wsHeartbeat.ws.onmessage = (event) => {
				console.log('收到消息:', event.data);
				this.wsData = event?.data ? JSON.parse(event?.data) : {};
				// console.log('22222', this.wsData.data)
				if (this.wsData.type === 'EnergyMonitoring') {
					let EnergyNameList = [];
					this.wsData.data.forEach((ele) => {
						EnergyNameList.push(ele.lineName);
					});
					this.EnergyMonitoringNameList = EnergyNameList;
					let EnergyDataList = [];
					this.wsData.data.forEach((ele) => {
						EnergyDataList.push(ele.useQuantity);
					});
					this.EnergyMonitoringList = EnergyDataList;
          console.log(EnergyDataList);
          this.$nextTick(() => {
            this.$refs.EnergyMonitoringChart.initChart(this.EnergyMonitoringNameList,this.EnergyMonitoringList);
          })

				}
			};
			// if (typeof (WebSocket) === 'undefined') {
			//   alert('您的浏览器不支持WebSocket')
			// } else {
			//   const wsUrl = process.env.VUE_APP_Socket_API + `/websocket/message?userId=EN${date}`
			//   // const wsUrl = 'ws://192.168.1.104:48082/websocket/message?userId=SJG'
			//   // const wsUrl = 'ws://10.70.2.2:8080/websocket/message?userId=EN111'
			//   // 实例化 WebSocket
			//   this.websocket = new WebSocket(wsUrl)
			//   // 监听 WebSocket 连接
			//   this.websocket.onopen = this.websocketOnOpen
			//   // 监听 WebSocket 错误信息
			//   this.websocket.onerror = this.websocketOnError
			//   // 监听 WebSocket 消息
			//   this.websocket.onmessage = this.websocketOnMessage
			//   // 监听 webSocket 断开信息
			//   this.websocket.onclose = this.websocketClose
			// }
		},
		SJGInitWebSocket() {
			let date = new Date().valueOf();
			const SJGWsUrl =
				process.env.VUE_APP_Socket_API + `/websocket/message?userId=SJG${date}`;
			this.SJGws = new WebSocketHeartbeat(SJGWsUrl);

			// 处理收到的消息
			this.SJGws.ws.onmessage = (event) => {
				console.log('收到消息:', event.data);
				this.SJGWsData = event?.data ? JSON.parse(event?.data) : {};
				// console.log(this.wsData.detData);
				// console.log('22222', this.wsData.data)
				if (this.SJGWsData.type === 'order') {
					this.orderList = this.SJGWsData.detData.map((ele, index) => {
						if (ele.progressRate && ele.progressRate != 1) {
							return {
								id: ele.id,
								name: ele.name,
                progressRate: parseFloat((ele.progressRate * 100).toFixed(0)),
                specifications: ele.specifications ?  '规格' + ele.specifications :null,
                planQuantity: ele.planQuantity  ? '计划' + ele.planQuantity + '片' : null,
                actualQuantity: ele.actualQuantity ? ele.actualQuantity + '片' : null,
							};
						}
					});
					console.log(this.orderList);
				} else if (this.SJGWsData.type === 'equipment') {
					let eqArr = this.SJGWsData.detData.map((item, index) => [
						`<span style="color:rgba(255,255,255,0.5)" >${index + 1 || ''}
            </span>`,
						`<span style="color:rgba(255,255,255,0.5)" >${item.name || ''}
            </span>`,
						`<span style="color:rgba(255,255,255,0.5)">${
							item.code || ''
						}</span>`,
            `<span style="color:rgba(255,255,255,0.5)"><div style="${item.status == '正常' ? 'box-shadow: 0px 0px 2px 1px #2760FF;width:6px;height:6px;border-radius: 50%;background-color: #2760FF;float:left;margin:10px 10px 0 0 ' : 'box-shadow: 0px 0px 2px 1px #FFBD02;width:6px;height:6px;border-radius: 50%;  background-color: #FFBD02;float:left;margin:10px 10px 0 0 '}"></div>  ${item.status || ''}</span>`,
            `<span style="color:rgba(255,255,255,0.5)"><div style="${item.error == 'true' ? 'box-shadow: 0px 0px 2px 1px #2760FF;width:6px;height:6px;border-radius: 50%;background-color: #2760FF;float:left;margin:10px 10px 0 0 ' : 'box-shadow: 0px 0px 2px 1px #FFBD02;width:6px;height:6px;border-radius: 50%;  background-color: red;float:left;margin:10px 10px 0 0 '}"></div>  ${item.error || ''}</span>`,
					]);
          this.eqConfig.data = eqArr;
          // this.$nextTick(() => {
            this.$refs['eqScrollBoard'].updateRows(eqArr);
          // })
					// console.log(SJGWsData.orderList)
				} else if (this.SJGWsData.type === 'productline') {
					console.log('aaaaaaaaaaaaaaaaaaa', this.SJGWsData);
					let nameList = [];
					let passRateList = [];
					let outputNumList = [];
          // let arr = ['D64', 'D62', 'D61', 'D63', 'D65']
          for (let i = 0; i < this.SJGWsData.detData.length - 1; i++) {
            // 二次循环，注意：再减去外层的循环次数，向后依次两两相互比较转换；
            for (let j = 0; j < this.SJGWsData.detData.length - i - 1; j++) {
              // 当前一个值大于后一个值
              if (this.SJGWsData.detData[j].lineName.substr(this.SJGWsData.detData[j].lineName.length - 1, 1) > this.SJGWsData.detData[j + 1].lineName.substr(this.SJGWsData.detData[j + 1].lineName.length - 1, 1)) {
                // 定义变量，以赋值的形式前后交换，直到换到最小的在前面，左右再无比较，则循环结束形成排序结果
                let temp = this.SJGWsData.detData[j];
                this.SJGWsData.detData[j] = this.SJGWsData.detData[j + 1];
                this.SJGWsData.detData[j + 1] = temp;
              }
            }
          }
          this.SJGWsData.detData.forEach((ele) => {
            // if (item.id == ele.productionLineId) {
            // if (item.name.substr(0, 1) == "D") {
            // console.log(ele)
            nameList.push(ele.lineName);
            outputNumList.push(ele.outputNum);
            passRateList.push(ele.passRate);
            // }
            // }
          });
          this.$nextTick(() => {
            this.$refs.productLineChart.initChart(
              nameList,
              passRateList,
              outputNumList
            );
          })
        } else if (this.SJGWsData.type === 'inspection') {
          let processArr = this.SJGWsData.detData.map((item, index) => [
            `<span style="color:rgba(255,255,255,0.5)" >${index + 1 || ''}
            </span>`,
            `<span style="color:rgba(255,255,255,0.5)" >${item.productionLineName || ''}
            </span>`,
            `<span style="color:rgba(255,255,255,0.5)">${item.sectionName || ''
            }</span>`,
            `<span style="color:rgba(255,255,255,0.5)">${item.count || ''
            }</span>`,
            `<span style="color:rgba(255,255,255,0.5)">${item.inspectionTypeName || ''
            }</span>`,
          ]);
          this.processConfig.data = processArr;
          // this.$nextTick(() => {
          this.$refs['processScrollBoard'].updateRows(processArr);
          // })
				}
			};
		},
		SJGWebsocketClose(e) {
			this.SJGws.ws.onclose = (event) => {
				console.log(event);
			};
		},
		websocketClose(e) {
			this.wsHeartbeat.ws.onclose = (event) => {
				console.log(event);
			};
		},
		windowWidth(value) {
			this.clientWidth = value;
			this.beilv2 = this.clientWidth / 1920;
		},
		change() {
			console.log(this.isFullScreen);
			debugger;
			this.isFullScreen = screenfull.isFullscreen;
		},
		init() {
			console.log(screenfull.isEnabled);
			if (screenfull.isEnabled) {
				debugger;
				screenfull.on('change', this.change);
			}
		},
		destroy() {
			if (screenfull.isEnabled) {
				screenfull.off('change', this.change);
			}
		},
		changeFullScreen() {
			// this.containerWidth = 223223223
			if (!screenfull.isEnabled) {
				this.$message({
					message: 'you browser can not work',
					type: 'warning',
				});
				return false;
			}
			screenfull.toggle();
		},
	},
};
</script>

<style lang="scss" scoped>
.split{
  width: 1px;
  // display: inline-block;
  height: 14px;
  // margin-top: 2px;
  // line-height: 0;
  margin-left: 8px;
  opacity:calc(.6);
  margin-right: 8px;
  background-color: #C8CDD7;
  // border: 1px solid #C8CDD7;
}
.myLegend {
  position: absolute;
  top: -28px;
  right: 20px;
  font-size: 12px;
  color: rgba(255, 255, 255, .6);

  .barLegend {
    // float: left;
    background: linear-gradient(#9DD5FF, #1295FF);
    width: 10px;
    height: 10px;
    display: inline-block;
    margin-right: 5px;
    border-radius: 30%;
  }

  .barText {
    // float: right;
    display: inline-block;
    margin-right: 10px;
  }

  .barCircleLegend {
    width: 15px;
    height: 1px;
    background-color: rgba(255, 209, 96, 1);
    position: absolute;
    left: -4.1715px;
    top: 21.7px;
  }

  .barCircle {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: rgba(255, 209, 96, 1);
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 1.7px;
  }
  .barCircleText {
    display: inline-block;
  }
}
.visual-container {
	width: 1920px;
	height: 1080px;
	background: url('../../assets/img/OperationalOverview/back.png') no-repeat;
	background-size: cover;
	// opacity: .8;
	.container-title {
		width: 100%;
		background: url('../../assets/img/OperationalOverview/title.png') no-repeat;
		background-size: 100% 100%;
		color: #00fff0;
		word-spacing: 8px;
		letter-spacing: 8px;
		text-align: center;
		.unit {
			position: absolute;
			left: 290px;
			top: 25px;
			color: rgba(255, 255, 255, 0.8);
			font-size: 20px;
			letter-spacing: 1px;
		}
		.time {
			position: absolute;
			left: 1360px;
			color: rgba(255, 255, 255, 0.8);
			top: 25px;
			font-size: 20px;
			letter-spacing: 0.72px;
		}
		.title-button {
			color: #00fff0;
			font-size: 20px;
			position: absolute;
		}
	}

	.container-main {
		padding: 10px;
	}
}

.now-team-title {
	margin: 0;
	margin-top: -1em;
	font-size: 1.2em;
	line-height: 2em;
	color: #fff;
}

.main-title {
	text-align: center;
}

.now-secondary-title {
  display: inline-block;
  width: 70px;
	margin: 0;
	font-size: 14px;
	line-height: 2em;
	color: #fff;
}
.orderSize {
  display: inline-block;
  width: 120px;
  margin: 0;
  font-size: 14px;
  line-height: 2em;
  color: #fff;
}
.orderFinish {
  display: inline-block;
  width: 60px;
  margin: 0;
  font-size: 14px;
  line-height: 2em;
  text-align: right;
  color: #fff;
}
.orderPlan {
  display: inline-block;
  width: 100px;
  margin: 0;
  font-size: 14px;
  line-height: 2em;
  color: #fff;
  text-align: left;
}
.now-team-content {
	font-size: 3em;
	line-height: 1em;
	color: #52fff1;
	text-align: center;
}

::v-deep .el-progress-bar__inner {
	background-color: unset;
	background-image: linear-gradient(to right, #4573fe, #47f8dc);
}
::v-deep .el-progress__text {
  width: 50px;
  margin-top: -70px;
  margin-left: 538px;
  // background-color: unset;
  // background-image: linear-gradient(to right, #4573fe, #47f8dc);
}
.visual-select {
	position: absolute;
	right: 1em;
	top: 2em;
}

// .container-main {
//    padding: 5px;
//  }
</style>

<style lang="scss">
.visual-container {
	::-webkit-scrollbar {
		width: 8px;
		height: 8px;
		background-color: transparent;
	}

	::-webkit-scrollbar-track-piece {
		background: #1b2b3d;
	}

	::-webkit-scrollbar-corner {
		background: #1b2b3d;
	}

	::-webkit-scrollbar-track {
		width: 6px;
		background: #1b2b3d;
		-webkit-border-radius: 2em;
		-moz-border-radius: 2em;
		border-radius: 2em;
	}

	::-webkit-scrollbar-thumb {
		background: rgba($color: #5bc4be, $alpha: 0.7);
		background-clip: padding-box;
		min-height: 28px;
		-webkit-border-radius: 2em;
		-moz-border-radius: 2em;
		border-radius: 2em;
		transition: background-color 0.3s;
		cursor: pointer;
	}

	::-webkit-scrollbar-thumb:hover {
		background-color: rgba($color: #5bc4be, $alpha: 1);
	}
}
.coldSelect {
	.el-input {
		min-height: 10px;
	}

	// .el-input__inner {
	//   background-color: rgba($color: #31878c, $alpha: 0.29);
	//   border: rgba($color: #31878c, $alpha: 0.29);
	//   color: aliceblue;
	// }

	.el-divider--vertical {
		height: 174px;
		width: 1px;
		border: rgba(255, 255, 255, 0.15);
		color: rgba(255, 255, 255, 0.15);
		margin-left: 3em;
	}
}
.order::-webkit-scrollbar {
	display: none;
}
</style>

<style scoped>
.flex-col {
	flex-direction: column;
}

.flex-1 {
	flex: 1 1;
}
.h-full {
	height: calc(100vh);
}
/* .container-main {
  min-height: calc(100vh - 10em);
} */
.eqTable {
	overflow: hidden;
}
</style>