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

<!--
 * @Author: zwq
 * @Date: 2021-07-19 15:18:30
 * @LastEditors: zhp
 * @LastEditTime: 2024-03-26 17:57:44
 * @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-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="'order'">
            <div style="width:100%; overflow: hidden scroll;">
              <el-row v-for="op in orderList" :key="op.id" style="margin-bottom: 1em">
                <!-- <el-col :span="12"> -->
                <p class="now-secondary-title">{{ op.name }}</p>
                <el-progress define-back-color="rgba(32, 57, 96, 1)" text-color="white"
                  :percentage="op.progressRate * 100" 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="'middle'" :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="'middle'"
            :title="'产线产量及良品率'" :title-icon="'productLine'">
            <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: {
    // ...mapGetters(['sidebar']),
    styles() {
      const v = Math.floor(this.value * this.beilv2 * 100) / 10000
      return {
        transform: `scale(${v})`,
        transformOrigin: 'top left'
      }
    }
  },

  watch: {
    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 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)">${item.status || ''}</span>`,
      `<span style="color:rgba(255,255,255,0.5)">${item.error || ''}</span>`,
    ])
    this.eqConfig.data = eqArr
    this.$refs['eqScrollBoard'].updateRows(eqArr)
    this.$refs.productLineChart.initChart(['D61', 'D62', 'D63', 'D64', 'D65',], [98, 97, 98.7, 98.5, 98.3,], [3134, 2323, 3232, 3233, 2321])
    // 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.$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.$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: ele.progressRate.toFixed(3)
              }
            }
          });
          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)">${item.status || ''}</span>`,
            `<span style="color:rgba(255,255,255,0.5)">${item.error || ''}</span>`,
          ])
          this.eqConfig.data = eqArr
          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 = []
          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.$refs.productLineChart.initChart(nameList, passRateList, outputNumList)
        } else if (this.SJGInitWebSocket === 'inspection') {
        }
      };
      // if (typeof (WebSocket) === 'undefined') {
      //   alert('您的浏览器不支持WebSocket')
      // } else {
      //   let date = new Date().valueOf()
      //   // console.log(date);
      //   console.log(process.env);
      //   const SJGWsUrl = process.env.VUE_APP_Socket_API + `/websocket/message?userId=SJG${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
      // }
    },
    // SJGWebsocketOnOpen() {
    //   console.log('socket连接成功')
    //   // console.log(this.SJGWebsocket.onmessage);
    //   this.SJGWebsocket.onmessage()
    // },
    // // 连接建立失败重连
    // SJGWebsocketOnError(e) {
    //   // console.log('11111', e)
    //   this.SJGInitWebSocket()
    // },
    // 数据接收
    // SJGWebsocketOnMessage(e) {
      // console.log(1111, e)
      // this.SJGWsData = e?.data ? JSON.parse(e?.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 != 1) {
      //       return {
      //         id: ele.id,
      //         name: ele.name,
      //         progressRate: ele.progressRate.toFixed(3)
      //       }
      //     }
      //   });
      //   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)">${item.status || ''}</span>`,
      //     `<span style="color:rgba(255,255,255,0.5)">${item.error || ''}</span>`,
      //   ])
      //   this.eqConfig.data = eqArr
      //   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 = []
      //     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.$refs.productLineChart.initChart(nameList, passRateList, outputNumList)
      // } else if (this.SJGInitWebSocket === 'inspection') {
      // }
    // },
    SJGWebsocketClose(e) {
      this.SJGws.ws.onclose = (event) => { console.log(event); }
    },
    // // 连接建立之后执行send方法发送数据
    // websocketOnOpen() {
    //   console.log('socket连接成功')
    //   this.websocket.onmessage()
    // },
    // 连接建立失败重连
    // websocketOnError(e) {
    //   console.log('11111', e)
    //   this.initWebSocket()
    // },
    // 数据接收
    // websocketOnMessage(e) {
    //   // console.log(1111, e)
    //   this.wsData = e?.data ? JSON.parse(e?.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.$refs.EnergyMonitoringChart.initChart(this.EnergyMonitoringNameList, this.EnergyMonitoringList)
    //   }
    // },
    // 数据发送
    // websocketSend() {
    //   this.websocket.send('11111')
    // },
    // // 关闭
    websocketClose(e) {
      this.wsHeartbeat.ws.onclose = (event) => { console.log(event); }
    },
    windowWidth(value) {
      this.clientWidth = value
      this.beilv2 = this.clientWidth / 1920
    },
    change() {
      this.isFullScreen = screenfull.isFullscreen
    },
    init() {
      if (screenfull.enabled) {
        screenfull.on('change', this.change)
      }
    },
    destroy() {
      if (screenfull.enabled) {
        screenfull.off('change', this.change)
      }
    },
    changeFullScreen() {
      this.containerWidth = 223223223
      if (!screenfull.enabled) {
        this.$message({
          message: 'you browser can not work',
          type: 'warning'
        })
        return false
      }
      screenfull.toggle(this.$refs.container)
    }
  }
}
</script>

<style lang="scss" scoped>


.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;
          letter-spacing: 0px;
          color: rgba($color: #ffffff, $alpha: 8);
          font-size: 20px;
        }

        .time {
          position: absolute;
          left: 1360px;
          top: 25px;
          letter-spacing: 0px;
          color: rgba($color: #ffffff, $alpha: 8);
          font-size: 20px;
        }
    .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 {
  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;
 }

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