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

<!--
 * @Author: zhp
 * @Date: 2024-01-29 16:50:26
 * @LastEditTime: 2024-04-02 15:01:40
 * @LastEditors: zhp
 * @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:.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">
        <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8">
          <base-container :title="'切割数据'" :size="'small'" :title-icon="'eqAlarm'">
            <!-- <base-table1 :page="1" :limit="999" :show-index="false" :table-config="cutProps"
              :table-data="cutTableDataList" /> -->
            <dv-scroll-board :config="cutConfig" style="width:100%;height:350px" ref='cutScrollBoard' />
          </base-container>
        </el-col>

        <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8">
          <base-container :no-content-padding="true" :title="'产量及良率统计'" :size="'small'"
            :title-icon="'energyMonitoring'">
            <!-- <div style="width: 45%;position: absolute; top: 3em; right: 3em;">
              <top-radio-group />
            </div> -->
            <!-- 像下面这样表格里的limit值，也许可以用js动态计算出来 -->
            <div v-if="coldDetData" class="myLegend">
              <div class="barLegend"></div>
              <h4 class="barText">产线产量</h4>
              <div class="barCircle"></div>
              <h4 class="barCircleText">产线良品率</h4>
            </div>
            <double-y-chart ref="productChart" :id="'doubleYChart'" :name-list="cxNameList" :data-list="cxDataList"
              :height="359" :show-legend="true" />
          </base-container>
        </el-col>

        <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8">
          <base-container :no-content-padding="true" :title="'ISRA 缺陷数据'" :size="'small'" :title-icon="'scrap'">
            <!-- <base-table1 :page="1" :limit="999" :show-index="false" :table-config="ISRATableProps"
              :table-data="ISRAList" /> -->
            <ISRAChart ref="ISRAChart" />
            <!-- <dv-scroll-board :config="ISRAConfig" style="width:100%;height:350px" ref='ISRAScrollBoard' /> -->
          </base-container>
        </el-col>
      </el-row>

      <el-row :style="{ padding: '0 ' + 9 + 'px' }" :gutter="10" type="flex" class="flex-1">
        <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
          <base-container :no-content-padding="true" :height="256" :title="'废片 缺陷数据'" :size="'eqStatus'"
            :title-icon="'scrap'">
            <!-- <div style="width: 45%;position: absolute; top: 3em; right: 3em;">
              <top-radio-group />
            </div> -->
            <!-- <el-row :gutter="9"> -->
            <!-- <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="24"> -->
            <pile-bar-chart id=" 'one' " style="margin-top: -5px;" ref="firstPileChart" :height="80" />
            <second-pile-bar-chart id=" 'second' " ref="secondPileChart" :height="90" />
            <third-pile-bar-chart id=" 'third' " ref="thirdPileChart" :height="90" />
            <fourth-pile-bar-chart id=" 'fourth' " ref="fourthPileChart" :height="90" />
            <fifth-pile-bar-chart style="margin-top: -5px;" id=" 'fifth' " ref="fifthPileChart" :height="90" />
            <!-- <pile-bar-chart ref="secondPileChart"
              :height="90" />
            <pile-bar-chart ref="thirdPileChart"
              :height="90" />
            <pile-bar-chart ref="fourthPileChart"
              :height="90" />
            <pile-bar-chart ref="fifthPileChart"
              :height="90" /> -->
            <!-- </el-col> -->
            <!-- <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
                <base-table3
                  :page="2"
                  :limit="5"

                  :table-config="qualityTableProps2"
                  :table-data="qualityList2"
                />
              </el-col> -->
            <!-- </el-row> -->
          </base-container>
        </el-col>
        <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="14">
          <base-container :height="318 + 338 + 16" :size="'eqStatus'" :title="'设备状态监控'" :title-icon="'eqMonitoring'">
            <!-- <div style="width: 45%;position: absolute; top: 3em; right: 3em;">
              <top-radio-group />
            </div> -->
            <!-- 像下面这样表格里的limit值，也许可以用js动态计算出来 -->
            <el-col :span="8" style="">
              <div style="color:rgba(82, 255, 248, 1);font-size:20px;margin: 5px 0 10px 0">熔化风机</div>
              <!-- <base-table1 :page="1" :limit="999" :show-index="false" :table-config="EqMonitoringPropsFun"
                :table-data="funList" />    -->
              <dv-scroll-board :config="funConfig" style="width:100%;height:310px" ref='funScrollBoard' />
            </el-col>
            <span class="eqLine"></span>
            <el-col :span="8">
              <div style="color:rgba(82, 255, 248, 1);font-size:20px;margin: 5px 0 10px 0;">退火风机</div>
              <!-- <base-table1 :page="1" :limit="999" :show-index="false" :table-config="EqMonitoringPropsFun"
                :table-data="annealFunList" /> -->
              <dv-scroll-board :config="annealFunConfig" style="width:100%;height:310px" ref='annealFunScrollBoard' />
            </el-col>
            <span class="eqLineTwo"></span>
            <el-col :span="8" style="float: right;">
              <div style="color:rgba(82, 255, 248, 1);font-size:20px;margin: 5px 0 10px 0;">产线设备</div>
              <!-- <base-table1 :page="1" :limit="999" :show-index="false" :table-config="EqMonitoringProps"
                :table-data="realEqList" /> -->
              <dv-scroll-board :config="realEqConfig" style="width:100%;height:310px" ref='realEqScrollBoard' />

            </el-col>
            <!-- <double-y-chart :id="'doubleYChart'" :name-list="cxNameList" :data-list="cxDataList" :height="359"
              :show-legend="true" /> -->
          </base-container>
        </el-col>
      </el-row>

      <!-- end  -->
      <!-- <el-col :span="16">
              <el-row>
                <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="24">
                  <base-container  :height="672">
                    <base-video :video-height="624"  />
                  </base-container>
                </el-col>
              </el-row>
            </el-col>
      -->
    </el-row>
  </div>
</template>

<script>
import baseContainer from './components/baseContainer'
import baseTable1 from './components/baseTable'
import screenfull from 'screenfull'
import pileBarChart from './components/pileBarChart'
import secondPileBarChart from './components/pileBarChart'
import thirdPileBarChart from './components/pileBarChart'
import fourthPileBarChart from './components/pileBarChart'
import fifthPileBarChart from './components/pileBarChart'

import colorDiv from './components/colorDiv'
import moment from "moment";
import doubleYChart from './components/coldDoubleYChart'
import { parseTime } from '../core/mixins/code-filter';
import ISRAChart from './components/ISRAChart.vue';
import { getDcsMsg, closeDcsMsg } from "./wsInterface"
import LinearBarChart from './components/linearBarChart'
import WebSocketHeartbeat from './ws.js';
export default {
  name: 'ProductionMonitoringCockpit',
  components: {
    baseContainer,
    baseTable1,
    pileBarChart,
    doubleYChart,
    LinearBarChart,
    ISRAChart,
    secondPileBarChart,
    thirdPileBarChart ,
    fourthPileBarChart,
   fifthPileBarChart ,
  },
  data() {
    return {
      beilv2: 1,
      beilv: 1,
      value: 100,
      realEqList:[],
      orderList: [],
      times: '',
      cutConfig: {
        header: ['序号', '产线', '时间', '规格', '良品面积', '废品面积', '良品率'],
        headerBGC: 'rgba(32, 55, 96, 0.8)',
        oddRowBGC: 'rgba(32, 55, 96, 0.8)',
        evenRowBGC: 'rgba(14, 32, 62, 0.8)',
        columnWidth: [60,60, 132, 142, 105,105,90],
        align: ['center'],
        data: [],
        // index:true,
        rowNum: 10
      },
      funConfig: {
        header: ['序号', '设备名称', '运行状态'],
        headerBGC: 'rgba(32, 55, 96, 0.8)',
        oddRowBGC: 'rgba(32, 55, 96, 0.8)',
        evenRowBGC: 'rgba(14, 32, 62, 0.8)',
        columnWidth: [60, 180, 90],
        align: ['center'],
        data: [],
        // index:true,
        rowNum: 10
      },
      realEqConfig: {
        header: ['序号','设备名称','运行状态'],
        headerBGC: 'rgba(32, 55, 96, 0.8)',
        oddRowBGC: 'rgba(32, 55, 96, 0.8)',
        evenRowBGC: 'rgba(14, 32, 62, 0.8)',
        columnWidth: [60, 180, 90],
        align: ['center'],
        data: [],
        // index:true,
        rowNum: 10
      },
      annealFunConfig: {
        header: ['序号', '设备名称', '运行状态'],
        headerBGC: 'rgba(32, 55, 96, 0.8)',
        oddRowBGC: 'rgba(32, 55, 96, 0.8)',
        evenRowBGC: 'rgba(14, 32, 62, 0.8)',
        columnWidth: [60, 180, 90],
        align: ['center'],
        data: [],
        // index:true,
        rowNum: 10
      },
      ISRAConfig: {
        header: ['序号', '产线', '时间', '缺陷类型', '缺陷数量', '占比'],
        headerBGC: 'rgba(32, 55, 96, 0.8)',
        oddRowBGC: 'rgba(32, 55, 96, 0.8)',
        evenRowBGC: 'rgba(14, 32, 62, 0.8)',
        columnWidth: [70, 70, 130, 150, 110, 110,],
        align: ['center'],
        data: [],
        // index:true,
        rowNum: 10
      },
      ISRAList:[],
      EnergyMonitoringNameList: [],
      EnergyMonitoringList: [],
      clientWidth: 0,
      containerWidth: 111111,
      isFullScreen: false,
      cutWsData: {},
      Cutws: undefined,
      funWs: undefined,
      SJGws: undefined,
      funWsData: {},
      coldDetData:[],
      SJGWsData: {},
      cxNameList:[],
      cxDataList:[],
      // orderProcessList: [],
      dateType: '0',
      wsIsOpen:false,
      funList:[],
      annealFunList: [],
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        equipmentId: null,
        productionLineId: null,
      },
    }
  },
  computed: {
    // ...mapGetters(['sidebar']),
    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.init()
    setTimeout(() => {
      window.location.reload()
    }, 86400000)
    // this.getData()
  },
  destroyed() {
    this.CutWebsocketClose()
    this.SJGWebsocketClose()
    this.funWebSocketClose()
    if (this.wsIsOpen) {
      closeDcsMsg()
      this.wsIsOpen = false
      console.log('关闭============')
    }
  },
  mounted() {
    this.getProductData()
    // this.$refs.productChart.initChart(nameList, yieldList, sumAreaList)
    this.getTimes()
    // console.log(moment(this.logoutTime - 28800000).format('HH:mm:ss'));
    this.funInitWebSocket()
      if (!this.wsIsOpen) {
        getDcsMsg()
        this.wsIsOpen = true
        console.log('开启websocket==========')
      }
    this.CutInitWebSocket()
    this.SJGInitWebSocket()
    const _this = this;
    _this.beilv2 = document.documentElement.clientWidth / 1920
    window.onresize = () => {
      return (() => {
        _this.clientWidth = `${document.documentElement.clientWidth}`
        this.beilv2 = _this.clientWidth / 1920
      })()
    }
  },
  methods: {
    getProductData() {
      let nameList = []
      let nameWasteList = []
      let topNameList = []
      let productList = []
      let wasteList = []
      let yieldList = []
      let sumAreaList = []
      // let yieldList = []
      // this.cutTableDataList =
      this.coldDetData = [
        {
          "first": 0.8834,
          "lineName": "Y61",
          "product": 0.8834,
          "productArea": 35069.28,
          "second": 0,
          'sumArea': 38400,
          'wastArea': 3330.72,
          "yield": 0.9133
        },
        {
          "first": 0.847,
          "lineName": "Y62",
          "product": 0.847,
          "productArea": 26765.46,
          "second": 0,
          'sumArea': 1111111,
          'wastArea': 22222,
          "yield": 0.9133
        },
        {
          "first": 0.8668,
          "lineName": "Y63",
          "product": 0.8668,
          "productArea": 26448.46,
          "second": 0,
          'sumArea': 1111111,
          'wastArea': 22222,
          "yield": 0.9133
        },
        {
          "first": 0.9064,
          "lineName": "Y64",
          "product": 0.9064,
          "productArea": 26667.32,
          "second": 0,
          'sumArea': 1111111,
          'wastArea': 22222,
          "yield": 0.9133
        },
        {
          "first": 0.8838,
          "lineName": "Y65",
          "product": 0.8838,
          "productArea": 26554.32,
          "second": 0,
          'sumArea': 1111111,
          'wastArea': 22222,
          "yield": 0.9133
        }
      ]
      this.coldDetData.forEach((ele, index) => {
        nameList.push(ele.lineName)
        topNameList.push('产线: ' + ele.lineName + '   ' + '总面积:' + ele.sumArea + '㎡')
        productList.push(ele.productArea)
        wasteList.push(ele.wastArea)
        nameWasteList.push('缺陷面积:' + ele.wastArea + '㎡')
        // yieldList.push({
        //   name: '良品',
        //   yield:ele.yield
        // })
        sumAreaList.push(ele.sumArea)
        yieldList.push((ele.yield * 100).toFixed(3))
      })
      this.$nextTick(() => {
        this.$refs.productChart.initChart(nameList, yieldList, sumAreaList)
        this.$refs.firstPileChart.initChart(nameList, [topNameList[0]], [nameWasteList[0]], [productList[0]], [wasteList[0]])
        this.$refs.secondPileChart.initChart(nameList, [topNameList[1]], [nameWasteList[1]], [productList[1]], [wasteList[1]])
        this.$refs.thirdPileChart.initChart(nameList, [topNameList[2]], [nameWasteList[2]], [productList[2]], [wasteList[2]])
        this.$refs.fourthPileChart.initChart(nameList, [topNameList[3]], [nameWasteList[3]], [productList[3]], [wasteList[3]])
        this.$refs.fifthPileChart.initChart(nameList, [topNameList[4]], [nameWasteList[4]], [productList[4]], [wasteList[4]])
      })
    },
    getData() {
      let detData = [
        {
          name: '1',
          run: '运行',
        },
        {
          name: '2',
          run: '未运行',
        },
        {
          name: '3',
          run: '运行',
        },
        {
          name: '4',
          run: '未运行',
        },
        {
          name: '1',
          run: '运行',
        },
      ]
      this.realEqList = detData.map((item, index) => [
        // console.log(item)
        `<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)"><div style="${item.run == '运行' ? '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.run || ''}</span>`,
      ])
        this.realEqConfig.data = this.realEqList
        this.$refs['realEqScrollBoard'].updateRows(this.realEqList)
    },
    CutWebsocketClose(e) {
      this.Cutws.ws.onclose = (event) => { console.log(event );}
    },
    SJGWebsocketClose(e) {
      this.SJGws.ws.onclose = (event) => { console.log(event); }
    },
    funWebSocketClose(e) {
      this.funWs.ws.onclose = (event) => { console.log(event); }
    },
    formatTime(time, option) {
      console.log(time);
      const d = new Date(time)
        return (
          d.getMonth() +
          1 +
          '月' +
          d.getDate() +
          '日' +
          d.getHours() +
          '时'
          // +
          // d.getMinutes() +
          // '分'
        )
      // }
    },
    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;
    },
    SJGInitWebSocket() {
      let date = new Date().valueOf()
      const SJGWsUrl = process.env.VUE_APP_Socket_API + `/websocket/message?userId=COLD${date}`
       this.SJGws = new WebSocketHeartbeat(SJGWsUrl);

      // 处理收到的消息
      this.SJGws.ws.onmessage = (event) => {
        this.SJGWsData = event?.data ? JSON.parse(event?.data) : {}
        if (this.SJGWsData.type === 'isra') {
          console.log('222222', this.SJGWsData.detData)
          console.log(this.SJGWsData.detData);
          let chartData = this.SJGWsData.detData.map((item, index) => {
            return {
              name: item.type,
              num: item.num
            }
          })
          this.$refs['ISRAChart'].updateChart(chartData)
        } else if (this.SJGWsData.type === 'equipment') {
          this.realEqList = this.SJGWsData.detData.map((item, index) => [
            // console.log(item)
            `<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)"><div style="${item.run == '运行' ? '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.run || ''}</span>`,
          ])
        }
        this.realEqConfig.data = this.realEqList
        // this.$nextTick(() => {
          this.$refs['realEqScrollBoard'].updateRows(this.realEqList)
        // })
      };
      // if (typeof (WebSocket) === 'undefined') {
      //   alert('您的浏览器不支持WebSocket')
      // } else {
      //   // const wsUrl = 'ws://192.168.1.74:48080/websocket/message?userId=EN111'
      //   // const wsUrl = 'ws://192.168.1.104:48082/websocket/message?userId=SJG'
      //   let date = new Date().valueOf()
      //   const SJGWsUrl = process.env.VUE_APP_Socket_API + `/websocket/message?userId=COLD${date}`
      //   this.SJGWebsocket = new WebSocket(SJGWsUrl)
      //   // 监听 WebSocket 连接
      //   this.SJGWebsocket.onopen = this.SJGWebsocketOnOpen
      //   // 监听 WebSocket 错误信息
      //   this.SJGWebsocket.onerror = this.SJGWebsocketOnError
      //   // 监听 WebSocket 消息
      //   this.SJGWebsocket.onmessage = this.SJGWebsocketOnMessage
      //   // 监听 webSocket 断开信息
      //   this.SJGWebsocket.onclose = this.SJGWebsocketClose
      // }
    },
    CutInitWebSocket() {
      let date = new Date().valueOf()
        const cutWsUrl = process.env.VUE_APP_Socket_API + `/websocket/message?userId=CUTTING${date}`
      // const SJGWsUrl = process.env.VUE_APP_Socket_API + `/websocket/message?userId=COLD${date}`
      this.Cutws = new WebSocketHeartbeat(cutWsUrl);

      // 处理收到的消息
      this.Cutws.ws.onmessage = (event) => {
        console.log(event)
        this.cutWsData = event?.data ? JSON.parse(event?.data) : {}
        if (this.cutWsData.type === 'cutting' && this.cutWsData.name === 'table') {
          let cutArr = this.cutWsData.productHourData.map((item, index) => [
            `<span style="color:rgba(255,255,255,0.7)" >${index + 1 || ''}
            </span>`,
            `<span style="color:rgba(255,255,255,0.7)" >${item.lineName || ''}
            </span>`,
            `<span style="color:rgba(255,255,255,0.7)">${this.formatTime(item.time) || ''}</span>`,
            `<span style="color:rgba(255,255,255,0.7)">${this.getSize(item.size) || ''}</span>`,
            `<span style="color:rgba(255,255,255,0.7)">${item.productArea + '㎡' || ''}</span>`,
            `<span style="color:rgba(255,255,255,0.7)">${item.wasteArea + '㎡' || ''}</span>`,
            `<div style = "${(item.product * 100).toFixed(2) > 91 ? 'display:block;color:#00FFF7' : 'display:none;'}">${(item.product * 100).toFixed(2) + '%' || ''}</div>
           <div style = "${(item.product * 100).toFixed(2) < 91 ? 'display:block; color:rgba(255, 209, 96, 1)' : 'display:none;'}">${(item.product * 100).toFixed(2) + '%' || ''}</div>`
          ])
          this.cutConfig.data = cutArr
          // this.$nextTick(() => {
            this.$refs['cutScrollBoard'].updateRows(cutArr)
          // })
          // this.cutConfig.data = cutArr
          // this.$refs['cutScrollBoard'].updateRows(cutArr)
        } else if (this.cutWsData.type === 'cutting' && this.cutWsData.name === 'chart' && this.cutWsData.dateType === 'day') {
          let nameList = []
          let nameWasteList = []
          let topNameList = []
          let productList = []
          let wasteList = []
          let sumAreaList = []
          let yieldList = []
          this.coldDetData = this.cutWsData.coldDetData
          // this.cutTableDataList =
          this.cutWsData.coldDetData.forEach((ele, index) => {
            nameList.push(ele.lineName)
            topNameList.push('产线: ' + ele.lineName + '   ' + '总面积:' + ele.sumArea + '㎡')
            productList.push(ele.productArea)
            wasteList.push(ele.wastArea)
            nameWasteList.push('缺陷面积:' + ele.wastArea + '㎡')
            sumAreaList.push(ele.sumArea)
            yieldList.push(parseFloat((ele.yield * 100).toFixed(3)))
          })
          this.$nextTick(() => {
            this.$refs.firstPileChart.initChart(nameList, [topNameList[0]], [nameWasteList[0]], [productList[0]], [wasteList[0]])
            this.$refs.secondPileChart.initChart(nameList, [topNameList[1]], [nameWasteList[1]], [productList[1]], [wasteList[1]])
            this.$refs.thirdPileChart.initChart(nameList, [topNameList[0]], [nameWasteList[0]], [productList[0]], [wasteList[0]])
            this.$refs.fourthPileChart.initChart(nameList, [topNameList[0]], [nameWasteList[0]], [productList[0]], [wasteList[0]])
            this.$refs.fifthPileChart.initChart(nameList, [topNameList[0]], [nameWasteList[0]], [productList[0]], [wasteList[0]])
            this.$refs.productChart.initChart(nameList, yieldList, sumAreaList)
          })
        }
      };
      // if (typeof (WebSocket) === 'undefined') {
      //   alert('您的浏览器不支持WebSocket')
      // } else {
      //   // const wsUrl = 'ws://192.168.1.74:48080/websocket/message?userId=EN111'
      //   // const wsUrl = 'ws://192.168.1.104:48082/websocket/message?userId=SJG'
      //   let date = new Date().valueOf()
      //   const cutWsUrl = process.env.VUE_APP_Socket_API + `/websocket/message?userId=CUTTING${date}`

      //   this.cutWebsocket = new WebSocket(cutWsUrl)
      //   // 监听 WebSocket 连接
      //   this.cutWebsocket.onopen = this.cutWebsocketOnOpen
      //   // 监听 WebSocket 错误信息
      //   this.cutWebsocket.onerror = this.cutWebsocketOnError
      //   // 监听 WebSocket 消息
      //   this.cutWebsocket.onmessage = this.cutWebsocketOnMessage
      //   // 监听 webSocket 断开信息
      //   this.cutWebsocket.onclose = this.cutWebsocketClose
      // }
    },
    funInitWebSocket() {
      let date = new Date().valueOf()
      const funWsUrl = `ws://10.70.180.10:8081/xc-screen/websocket/${date}`
      this.funWs = new WebSocketHeartbeat(funWsUrl);
      // 处理收到的消息
      this.funWs.ws.onmessage = (event) => {
        this.funWsData = event?.data ? JSON.parse(event?.data) : {}
        // FanInfo
        if (this.funWsData.type === 'AnnealFanInfo') {
          let arr = []
          let index = 0
          for (let i in this.funWsData.data.annealFanInfo) {
            index++,
              arr.push([
                `<span style="color:rgba(255,255,255,0.5)" >${index || ''}
            </span>`,
                // `<span style="color:rgba(255,255,255,0.5)" >${i || ''}
                // </span>`,
                `<span style="color:rgba(255,255,255,0.5)">${i || ''}</span>`,
                `<span style="color:rgba(255,255,255,0.5)"><div style="${this.funWsData.data.annealFanInfo[i] == '运行' ? '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>  ${this.funWsData.data.annealFanInfo[i] || ''}</span>`,
              ])
          }
          this.annealFunConfig.data = arr
          // this.$nextTick(() => {
            this.$refs['annealFunScrollBoard'].updateRows(arr)
          // })
        }
        if (this.funWsData.type === 'FanInfo') {
          let arr = []
          let index = 0
          for (let i in this.funWsData.data.fanInfo) {
            index++,
              arr.push([
                `<span style="color:rgba(255,255,255,0.5)" >${index || ''}
            </span>`,
                `<span style="color:rgba(255,255,255,0.5)">${i || ''}</span>`,
                `<span style="color:rgba(255,255,255,0.5)"><div style="${this.funWsData.data.fanInfo[i] == '运行' ? '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>  ${this.funWsData.data.fanInfo[i] || ''}</span>`,
              ])
          }
          this.funConfig.data = arr
          // this.$nextTick(() => {
            this.$refs['funScrollBoard'].updateRows(arr)
          // })
        }
      };
      // if (typeof (WebSocket) === 'undefined') {
      //   alert('您的浏览器不支持WebSocket')
      // } else {
      //   // const wsUrl = 'ws://192.168.1.74:48080/websocket/message?userId=EN111'
      //   // const wsUrl = 'ws://192.168.1.104:48082/websocket/message?userId=SJG'
      //   let date = new Date().valueOf()
      //   const funWsUrl = `ws://10.70.180.10:8081/xc-screen/websocket/${date}`
      //   this.funWebsocket = new WebSocket(funWsUrl)
      //   // 监听 WebSocket 连接
      //   this.funWebsocket.onopen = this.funWebsocketOnOpen
      //   // 监听 WebSocket 错误信息
      //   this.funWebsocket.onerror = this.funWebsocketOnError
      //   // 监听 WebSocket 消息
      //   this.funWebsocket.onmessage = this.funWebsocketOnMessage
      //   // 监听 webSocket 断开信息
      //   this.funWebsocket.onclose = this.funWebsocketClose
      // }
    },
    // funWebsocketOnOpen() {
    //   console.log('socket连接成功')
    //   this.SJGWebsocket.onmessage()
    // },
    // // 连接建立失败重连
    // funWebsocketOnError(e) {
    //   this.funInitWebSocket()
    // },
    // 数据接收
    // funWebsocketOnMessage(e) {
    //   this.funWsData = e?.data ? JSON.parse(e?.data) : {}
    //   // FanInfo
    //   if (this.funWsData.type === 'AnnealFanInfo') {
    //     let arr = []
    //     let index = 0
    //     for (let i in this.funWsData.data.annealFanInfo) {
    //       index++,
    //       arr.push([
    //         `
    //       <span style="color:rgba(255,255,255,0.5)" >${index || ''}
    //         </span>`,
    //         `<span style="color:rgba(255,255,255,0.5)" >${i || ''}
    //         </span>`,
    //         `<span style="color:rgba(255,255,255,0.5)">${this.funWsData.data.annealFanInfo[i] || ''}</span>`,
    //       ])
    //     }
    //     this.annealFunConfig.data = arr
    //     this.$refs['annealFunScrollBoard'].updateRows(arr)
    //   }
    //   if (this.funWsData.type === 'FanInfo') {
    //     let arr = []
    //     let index = 0
    //     for (let i in this.funWsData.data.fanInfo) {
    //       index++,
    //       arr.push([
    //         `<span style="color:rgba(255,255,255,0.5)" >${index || ''}</span>`,
    //         `<span style="color:rgba(255,255,255,0.5)" >${i || ''}</span>`,
    //         `<span style="color:rgba(255,255,255,0.5)">${this.funWsData.data.fanInfo[i] || ''}</span>`,
    //       ])
    //     }
    //     this.funConfig.data = arr
    //     this.$refs['funScrollBoard'].updateRows(arr)
    //   }
    // },
    // cutWebsocketOnOpen() {
    //   console.log('socket连接成功')
    //   this.SJGWebsocket.onmessage()
    // },
    // // 连接建立失败重连
    // cutWebsocketOnError(e) {
    //   this.CutInitWebSocket()
    // },
    getSize(str) {
      // console.log(str.match(/\d+(\.\d+)?/g))
     let size =  str.match(/\d+(\.\d+)?/g).map(ele => {
        return parseFloat(ele)
     })
      // console.log(size[0] + '*' + size[1] + '*' + size[2]);
      return size[0] + '*' + size[1] + '*' + size[2]
    },
    windowWidth(value) {
      this.clientWidth = value
      this.beilv2 = this.clientWidth / 1920
    },
    change() {
      console.log(this.isFullScreen);
      this.isFullScreen = screenfull.isFullscreen
    },
    init() {
      if (screenfull.isEnabled) {
        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>
.myLegend{
  position: absolute;
  top: -20px;
  right: 50px;
  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;
  }
  .barText{
    // float: right;
    display: inline-block;
    margin-right: 10px;
  }
  .barCircle{
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: rgba(255, 209, 96, 1);
    display: inline-block;
    margin-right: 5px;
  }
  .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: rgba(0, 255, 247, 1);
    text-align: center;
    letter-spacing: 8px;
    word-spacing: 8px;
    .unit {
      position: absolute;
      left: 290px;
      top: 25px;
      color: rgba(255, 255, 255, 0.80);
      font-size: 20px;
      letter-spacing: 1px;
      }

    .time {
      position: absolute;
      left: 1360px;
      color: rgba(255, 255, 255, 0.80);
      top: 25px;
      font-size: 20px;
      letter-spacing: .72px;
    }

    .title-button {
      color: rgba(255, 255, 255, 0.80);
      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 {
  margin: 0;
  font-size: 1em;
  line-height: 2em;
  color: #fff;
}

.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);
}

.visual-select {
  position: absolute;
  right: 1em;
  top: 2em;
}

.screen-btn {
  color: #00fff0;
  font-size: 32px;
}
// .container-main {
//    padding: 5px;
//  }
</style>

<style lang="scss">
.eqLine{
  height: 290px;
  width: 1px;
  position: absolute;
  left: 33.8%;
  top: 12%;
background: linear-gradient(to bottom,rgba(60,
  231,
  255,0), #3CE7FF, rgba(60,
      231,
      255, 0));
}
.eqLineTwo {
  height: 290px;
  width: 1px;
  position: absolute;
  left: 66.3%;
  top: 12%;
  background: linear-gradient(to bottom, rgba(60,
        231,
        255, 0), #3CE7FF, rgba(60,
        231,
        255, 0));
}
.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;
  }
}

</style>

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

.flex-1 {
  flex: 1 1;
}

.h-full {
  height: calc(100vh - 150px);
}

/* .container-main {
  min-height: calc(100vh - 10em);
} */
.orange {
  color: rgba(255, 209, 96, 1)
}

.white {
  color: rgba(255, 255, 255, 0.5)
}
.tooltip {
  position: relative;
  display: inline-block;
}
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 150%;
  left: 50%;
  margin-left: -60px;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: black transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

</style>