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

<!--
 * @Author: zwq
 * @Date: 2021-07-19 15:18:30
 * @LastEditors: zhp
 * @LastEditTime: 2023-11-22 13:58:30
 * @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:.4em" alt="">
      许昌安彩AGV原片周转看板
      <h3 class="unit">单位：河南汇融科技服务有限公司</h3>
      <h3 class="time">{{ times }}</h3>
      <!-- <el-button
        type="text"
        class="title-button"
        :style="{ right: 33 + 'px', top: 37 + 'px' }"
        @click="changeFullScreen"
      >
        <svg-icon v-if="isFullScreen" icon-class="unFullScreenView" />
        <svg-icon 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 * beilv" type="flex" class="flex-1">
        <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
          <base-container :beilv="1" :title="'搬运任务'" :title-icon="'5_1'" :back="'energy'">
            <base-table1 :page="1" :limit="9" :show-index="false" :beilv="1" :table-config="qualityYearTableProps"
              :table-data="qualityYearList" />
          </base-container>
        </el-col>
        <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
          <base-container :beilv="1" :title="'周转进度'" :title-icon="'5_3'" :back="'energy'">
            <!-- <div style="width: 45%;position: absolute; top: 3em; right: 3em;">
              <top-radio-group />
            </div> -->

            <!-- 为外部添加一个容器并显式地设置一个高度: -->
            <!-- <div style="height: 300px;"> -->
            <div style="width:100%; overflow: hidden scroll;">
              <!-- <el-row style="margin-bottom: 1em">
                    <p class="now-team-title">加工工单进度</p>
                  </el-row> -->
              <el-row v-for="op in orderProcessList" :key="op.id" style="margin-bottom: 1em">
                <el-progress :percentage="op.outRate * 100" class="custom-progress-bar" />
                <p v-if="op.outRate === 1" class="now-secondary-title" style="color:#4679FD">
                  <i class="el-icon-check" />
                  {{ op.name }}
                </p>
                <p v-else class="now-secondary-title">{{ op.name }}</p>
              </el-row>
              <!-- <el-row>
                    <el-progress :percentage="100" class="custom-progress-bar" />
                    <p class="now-secondary-title" style="color:#4679FD">
                      <i class="el-icon-check" />
                      成都碲化镉5000一期订单
                    </p>
                  </el-row>
                  <el-row>
                    <el-progress :percentage="85" class="custom-progress-bar" />
                    <p class="now-secondary-title">成都碲化镉二订单</p>
                  </el-row>
                  <el-row>
                    <el-progress :percentage="85" class="custom-progress-bar" />
                    <p class="now-secondary-title">长利订单1000</p>
                  </el-row>
                  <el-row>
                    <el-progress :percentage="85" class="custom-progress-bar" />
                    <p class="now-secondary-title">国际工程20号订单</p>
                  </el-row>
                  <el-row>
                    <el-progress :percentage="85" class="custom-progress-bar" />
                    <p class="now-secondary-title">铜铟镓硒眉山10万订单</p>
                  </el-row> -->
            </div>
            <!-- </div> -->
          </base-container>
        </el-col>
      </el-row>

      <el-row :style="{ padding: '0 ' + 9 + 'px' }" :gutter="12 * beilv" type="flex" class="flex-1">
        <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
          <base-container :beilv="1" :height="256" :title="'库存管理'" :title-icon="'5_5'" :back="'energy'">
            <!-- <div style="width: 45%;position: absolute; top: 3em; right: 3em;">
              <top-radio-group />
            </div> -->
            <!-- <el-row :gutter="9 * beilv"> -->
              <!-- <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="24"> -->
                <base-table :page="1" :limit="9" :show-index="false" :beilv="1" :table-config="inventoryTableProps"
                  :table-data="inventoryList" />
              <!-- </el-col> -->
              <!-- <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
                <base-table3
                  :page="2"
                  :limit="5"
                  :beilv="1"
                  :table-config="qualityTableProps2"
                  :table-data="qualityList2"
                />
              </el-col> -->
            <!-- </el-row> -->
          </base-container>
        </el-col>
        <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
          <base-container :beilv="1" :height="318 + 338 + 16" :title="'库位信息'" :title-icon="'5_4'" :back="'energy'">
            <!-- <div style="width: 45%;position: absolute; top: 3em; right: 3em;">
              <top-radio-group />
            </div> -->
            <!-- 像下面这样表格里的limit值，也许可以用js动态计算出来 -->
            <base-table2 :page="1" :limit="9" :show-index="false" :beilv="1" :table-config="locationTableProps"
              :table-data="locationList" />
          </base-container>
        </el-col>
      </el-row>

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

<script>
import baseContainer from './components/baseContainer'
import baseTable1 from './components/baseTable'
import baseTable from './components/baseTable'
import baseTable2 from './components/baseTable'
// import TopRadioGroup from './components/topRadioGroup'
// import pieChart1 from './components/PieChart'
// import pieChart2 from './components/PieChart'
// import pieChart3 from './components/PieChart'
// import { mapGetters } from 'vuex'
import screenfull from 'screenfull'
// import BaseVideo from './components/baseVideo.vue'
// import alarmLevel from './components/alarmLevel'
// import axios from '@/utils/request'
// import doubleYChart from './components/doubleYChart '
// import elementResizeDetectorMaker from 'element-resize-detector';
// var erd = elementResizeDetectorMaker(); //创建实例
// import LinearBarChart from './components/linearBarChart'
const qualityTableProps1 = [
  {
    prop: 'name',
    label: '产线名称'
  },
  {
    prop: 'createTime',
    label: '发生时间'
  },
  {
    prop: 'code',
    label: '质量编码'
  },
  {
    prop: 'content',
    label: '质量内容'
  }
]
const qualityTableProps2 = [
  {
    prop: 'name',
    label: '工序名称'
  },
  {
    prop: 'createTime',
    label: '发生时间'
  },
  {
    prop: 'code',
    label: '质量编码'
  },
  {
    prop: 'content',
    label: '质量内容'
  }
]
const cxNameList = ['周一', '周二', '周三', '周四', '周五']

const cxDataList = [
  {
    topColor: '#9DD5FF',
    bottomColor: '#1295FF',
    name: '电耗能',
    data: [100, 150, 121, 97, 140]
  },
  {
    topColor: '#FF8BC3',
    bottomColor: '#EB46A1',
    name: '水耗能',
    data: [110, 110, 151, 77, 110]
  },
  {
    topColor: '#85F6E9',
    bottomColor: '#2EC6B4',
    name: '天然气',
    data: [110, 120, 171, 287, 40]
  },
  {
    topColor: '#9496FF',
    bottomColor: '#6567FF',
    name: '焦炉煤气',
    data: [140, 157, 122, 27, 240]
  },
  {
    topColor: '#F68E8A',
    bottomColor: '#E95552',
    name: '余热发电',
    data: [170, 180, 127, 17, 340]
  },
  {
    topColor: '#FFE873',
    bottomColor: '#E7AE2A',
    name: '二氧化硫',
    data: [140, 160, 121, 57, 170]
  }
]

const qualityList1 = [
  { name: '钢一线', createTime: '2021.10.21 24:59:59', code: '2121321231', content: '气泡' },
  { name: '钢二线', createTime: '2021.11.22 24:59:59', code: '3321123213', content: '气泡' },
  { name: '钢三线', createTime: '2021.12.12 24:59:59', code: '4535435345', content: '气泡' },
  { name: '钢四线', createTime: '2021.12.20 24:59:59', code: '5465465466', content: '气泡' },
  { name: '钢五线', createTime: '2021.12.02 24:59:59', code: '2132131312', content: '气泡' },
  { name: '钢一线', createTime: '2021.10.21 24:59:59', code: '2121321231', content: '气泡' },
  { name: '钢二线', createTime: '2021.11.22 24:59:59', code: '3321123213', content: '气泡' },
  { name: '钢三线', createTime: '2021.12.12 24:59:59', code: '4535435345', content: '气泡' },
  { name: '钢四线', createTime: '2021.12.20 24:59:59', code: '5465465466', content: '气泡' },
  { name: '钢五线', createTime: '2021.12.02 24:59:59', code: '2132131312', content: '气泡' },
  { name: '钢一线', createTime: '2021.10.21 24:59:59', code: '2121321231', content: '气泡' },
  { name: '钢二线', createTime: '2021.11.22 24:59:59', code: '3321123213', content: '气泡' },
  { name: '钢三线', createTime: '2021.12.12 24:59:59', code: '4535435345', content: '气泡' },
  { name: '钢四线', createTime: '2021.12.20 24:59:59', code: '5465465466', content: '气泡' },
  { name: '钢五线', createTime: '2021.12.02 24:59:59', code: '2132131312', content: '气泡' },
  { name: '钢六线', createTime: '2021.12.11 24:59:59', code: '2132131212', content: '气泡' }
]
const qualityList2 = [
  { name: '上片', createTime: '2021.10.22 24:59:59', code: '2132132133', content: '气泡' },
  { name: '磨边', createTime: '2021.12.21 24:59:59', code: '2132131232', content: '气泡' },
  { name: '清洗', createTime: '2021.12.12 24:59:59', code: '1232131312', content: '气泡' },
  { name: '激光打孔', createTime: '2021.12.13 24:59:59', code: '2132132131', content: '气泡' },
  { name: 'AR镀膜', createTime: '2021.10.23 24:59:59', code: '2311212232', content: '气泡' },
  { name: '固化', createTime: '2021.09.22 24:59:59', code: '21321321312', content: '气泡' },
  { name: '清洗', createTime: '2021.12.12 24:59:59', code: '1232131312', content: '气泡' },
  { name: '激光打孔', createTime: '2021.12.13 24:59:59', code: '2132132131', content: '气泡' },
  { name: 'AR镀膜', createTime: '2021.10.23 24:59:59', code: '2311212232', content: '气泡' },
  { name: '固化', createTime: '2021.09.22 24:59:59', code: '21321321312', content: '气泡' },
  { name: '上片', createTime: '2021.10.22 24:59:59', code: '2132132133', content: '气泡' },
  { name: '磨边', createTime: '2021.12.21 24:59:59', code: '2132131232', content: '气泡' },
  { name: '清洗', createTime: '2021.12.12 24:59:59', code: '1232131312', content: '气泡' },
  { name: '激光打孔', createTime: '2021.12.13 24:59:59', code: '2132132131', content: '气泡' },
  { name: 'AR镀膜', createTime: '2021.10.23 24:59:59', code: '2311212232', content: '气泡' },
  { name: '固化', createTime: '2021.09.22 24:59:59', code: '21321321312', content: '气泡' },
  { name: '丝网印刷', createTime: '2021.12.21 24:59:59', code: '21321322132', content: '气泡' },
  { name: '钢化炉', createTime: '2021.12.20 24:59:59', code: '21321312321', content: '气泡' },
  { name: '检测设备', createTime: '2021.12.12 24:59:59', code: '21321322132', content: '气泡' },
  { name: '包装设备', createTime: '2021.12.23 24:59:59', code: '39284982931', content: '气泡' }
]
const legendData1 = [
  {
    name: '设备1',
    icon: 'circle',
    value: 196
  },
  {
    name: '设备2',
    icon: 'circle',
    value: 147
  },
  {
    name: '设备3',
    icon: 'circle',
    value: 24
  },
  {
    name: '设备4',
    icon: 'circle',
    value: 85
  },
  {
    name: '设备5',
    icon: 'circle',
    value: 8
  },
  {
    name: '设备6',
    icon: 'circle',
    value: 112
  },
  {
    name: '设备7',
    icon: 'circle',
    value: 146
  },
  {
    name: '设备8',
    icon: 'circle',
    value: 27
  },
  {
    name: '设备9',
    icon: 'circle',
    value: 2
  },
  {
    name: '设备10',
    icon: 'circle',
    value: 90
  }
]
const legendData2 = [
  {
    name: '磨边',
    icon: 'circle',
    value: 196
  },
  {
    name: '清洗',
    icon: 'circle',
    value: 135
  },
  {
    name: '固化',
    icon: 'circle',
    value: 144
  },
  {
    name: '镀膜',
    icon: 'circle',
    value: 97
  },
  {
    name: '激光打孔',
    icon: 'circle',
    value: 12
  },
  {
    name: '丝网印刷',
    icon: 'circle',
    value: 10
  },
  {
    name: '钢化炉',
    icon: 'circle',
    value: 3
  }
]
const legendData3 = [
  {
    name: '钢一线',
    icon: 'circle',
    value: 196
  },
  {
    name: '钢二线',
    icon: 'circle',
    value: 133
  },
  {
    name: '钢三线',
    icon: 'circle',
    value: 24
  },
  {
    name: '钢四线',
    icon: 'circle',
    value: 77
  },
  {
    name: '钢五线',
    icon: 'circle',
    value: 77
  }
]
const locationTableProps = [
  {
    prop: 'eqName',
    label: '库位名称'
  },
  {
    prop: 'eqCode',
    label: '存放物件名称'
  },
  {
    prop: 'productCode',
    label: '编码'
  },
  {
    prop: 'level',
    label: '存放位置',
    // subcomponent: alarmLevel,
    align: 'center'
  },
  {
    prop: 'unit',
    label: '单位',
    // subcomponent: alarmLevel,
    align: 'center'
  },
  {
    prop: 'product',
    label: '数量'
  },
  {
    prop: 'time',
    label: '入库时间'
  }
]

const locationList = [
  { eqName: '备件库D-D区-14', eqCode: '原件', level: '中', product: '12323', productCode: 'WLXX20220919000147', unit: '片', time: '2023年9月10日' },
  { eqName: '辅料库D-D区-1', eqCode: '螺丝刀', level: '下', product: ' 123', productCode: 'WLXX20210415000158', unit: '个', time: '2023年9月10日' },
  {
    eqName: '	辅料库A-D区-1', eqCode: '清洗剂', level: '上', product: ' 123', productCode: 'WLXX20210415000157', unit: '瓶', time: '2023年9月10日'
  },
  { eqName: '备件库D-D区-14', eqCode: '原件', level: '中', product: '12323', productCode: 'WLXX20220919000147', unit: '片', time: '2023年9月10日' },
  { eqName: '辅料库D-D区-1', eqCode: '螺丝刀', level: '下', product: ' 123', productCode: 'WLXX20210415000158', unit: '个', time: '2023年9月10日' },
  {
    eqName: '	辅料库A-D区-1', eqCode: '清洗剂', level: '上', product: ' 123', productCode: 'WLXX20210415000157', unit: '瓶', time: '2023年9月10日'
  },
  { eqName: '备件库D-D区-14', eqCode: '原件', level: '中', product: '12323', productCode: 'WLXX20220919000147', unit: '片', time: '2023年9月10日' },
  { eqName: '辅料库D-D区-1', eqCode: '螺丝刀', level: '下', product: ' 123', productCode: 'WLXX20210415000158', unit: '个', time: '2023年9月10日' },
  {
    eqName: '	辅料库A-D区-1', eqCode: '清洗剂', level: '上', product: ' 123', productCode: 'WLXX20210415000157', unit: '瓶', time: '2023年9月10日'
  },
  { eqName: '备件库D-D区-14', eqCode: '原件', level: '中', product: '12323', productCode: 'WLXX20220919000147', unit: '片', time: '2023年9月10日' },
  { eqName: '辅料库D-D区-1', eqCode: '螺丝刀', level: '下', product: ' 123', productCode: 'WLXX20210415000158', unit: '个', time: '2023年9月10日' },
  {
    eqName: '	辅料库A-D区-1', eqCode: '清洗剂', level: '上', product: ' 123', productCode: 'WLXX20210415000157', unit: '瓶', time: '2023年9月10日'
  },
  { eqName: '备件库D-D区-14', eqCode: '原件', level: '中', product: '12323', productCode: 'WLXX20220919000147', unit: '片', time: '2023年9月10日' },
  { eqName: '辅料库D-D区-1', eqCode: '螺丝刀', level: '下', product: ' 123', productCode: 'WLXX20210415000158', unit: '个', time: '2023年9月10日' },
  {
    eqName: '	辅料库A-D区-1', eqCode: '清洗剂', level: '上', product: ' 123', productCode: 'WLXX20210415000157', unit: '瓶', time: '2023年9月10日'
  }
]
const inventoryTableProps = [
  {
    prop: 'eqName',
    label: '物件名称'
  },
  {
    prop: 'eqCode',
    label: '存放区域'
  },
  {
    prop: 'productCode',
    label: '编码'
  },
  {
    prop: 'level',
    label: '规格',
    // subcomponent: alarmLevel,
    align: 'center'
  },
  {
    prop: 'unit',
    label: '单位',
    // subcomponent: alarmLevel,
    align: 'center'
  },
  {
    prop: 'product',
    label: '数量'
  },
  {
    prop: 'time',
    label: '入库时间'
  }
]

const inventoryList = [
  { eqName: '原片', eqCode: '辅料库', level: '133*289', product: ' 12323', productCode: 'WLXX20220919000147', unit: '片', time: '2023年9月10日' },
  { eqName: '磨轮', eqCode: '辅料库', level: '133*289', product: ' 12323', productCode: 'WLXX20210415000158', unit: '片', time: '2023年9月10日' },
  {
    eqName: '	包装辅材', eqCode: '辅料库', level: '133*289', product: ' 12323', productCode: 'WLXX20210415000157', unit: '片', time: '2023年9月10日' },
  {
    eqName: '	螺丝刀', eqCode: '备件库', level: '', product: ' 123', productCode: 'WLXX20220919000147', unit: '个', time: '2023年9月10日' },
  {
    eqName: '	清洗剂', eqCode: '备件库', level: '200mm', product: ' 123', productCode: 'WLXX20220919000147', unit: '瓶', time: '2023年9月10日' },
  { eqName: '原片', eqCode: '辅料库', level: '133*289', product: ' 12323', productCode: 'WLXX20220919000147', unit: '片', time: '2023年9月10日' },
  { eqName: '磨轮', eqCode: '辅料库', level: '133*289', product: ' 12323', productCode: 'WLXX20210415000158', unit: '片', time: '2023年9月10日' },
  {
    eqName: '	包装辅材', eqCode: '辅料库', level: '133*289', product: ' 12323', productCode: 'WLXX20210415000157', unit: '片', time: '2023年9月10日'
  },
  {
    eqName: '	螺丝刀', eqCode: '备件库', level: '', product: ' 123', productCode: 'WLXX20220919000147', unit: '个', time: '2023年9月10日'
  },
  {
    eqName: '	清洗剂', eqCode: '备件库', level: '200mm', product: ' 123', productCode: 'WLXX20220919000147', unit: '瓶', time: '2023年9月10日'
  }
]
const qualityYearTableProps = [
  {
    prop: 'eqName',
    label: '作业号'
  },
  {
    prop: 'eqCode',
    label: '执行叉车'
  },
  {
    prop: 'level',
    label: '库位',
    // subcomponent: alarmLevel,
    align: 'center'
  },
  {
    prop: 'product',
    label: '成品规格'
  },
  {
    prop: 'productCode',
    label: '成品编码'
  },
  {
    prop: 'time',
    label: '时间'
  }
]

const qualityYearList = [
  { eqName: 'RQ20230910', eqCode: '1-01', level: '成品库D-D区-14', product: ' 2.2-1033*2089', productCode: 'CP5651696323', time: '2023年9月10日' },
  { eqName: 'RQ20230911', eqCode: '1-02', level: '成品库A-A区-1', product: ' 3.2-1033*2089', productCode: 'CP563232323', time: '2023年9月11日' },
  { eqName: 'RQ20230912', eqCode: '2-01', level: '成品库D-D区-1', product: ' 1.2-1033*2089', productCode: 'CP5651696321', time: '2023年9月12日' },
  { eqName: 'RQ20230913', eqCode: '1-03', level: '成品库A-B区-1', product: ' 2.2-1033*2089', productCode: 'CP5651696323', time: '2023年9月13日' },
  { eqName: 'RQ20230914', eqCode: '2-02', level: '成品库D-D区-2', product: ' 3.2-1033*2089', productCode: 'CP565169322', time: '2023年9月14日' },
  { eqName: 'RQ20230915', eqCode: '1-01', level: '成品库B-A区-4', product: ' 1.2-1033*2089', productCode: 'CP56516962323', time: '2023年9月15日' },
  { eqName: 'RQ20230916', eqCode: '1-03', level: '成品库A-A区-2', product: ' 2.2-1033*2089', productCode: 'CP5651694343', time: '2023年9月16日' },
  { eqName: 'RQ20230917', eqCode: '1-02', level: '成品库C-D区-12', product: '4.2-1033*2089', productCode: 'CP5651692323', time: '2023年9月17日' },
  { eqName: 'RQ20230918', eqCode: '2-01', level: '成品库A-D区-4', product: ' 5.2-1033*2089', productCode: 'CP5651696232', time: '2023年9月18日' },
  { eqName: 'RQ20230919', eqCode: '2-02', level: '成品库C-D区-9', product: ' 1.2-1033*2089', productCode: 'CP5651696323', time: '2023年9月19日' },
  { eqName: 'RQ20230920', eqCode: '2-03', level: '成品库D-D区-4', product: ' 5.2-1033*2089', productCode: 'CP5651696323', time: '2023年9月20日' },
  { eqName: 'RQ20230920', eqCode: '2-04', level: '成品库D-D区-4', product: ' 2.2-1033*2089', productCode: 'CP5651696323', time: '2023年9月20日' },
  { eqName: 'RQ20230920', eqCode: '2-05', level: '成品库A-D区-4', product: ' 5.2-1033*2089', productCode: 'CP5651696323', time: '2023年9月20日' },
  { eqName: 'RQ20230920', eqCode: '3-03', level: '成品库B-D区-4', product: ' 3.2-1033*2089', productCode: 'CP5651696323', time: '2023年9月20日' },
  { eqName: 'RQ20230920', eqCode: '1-03', level: '成品库C-D区-4', product: ' 2.2-1033*2089', productCode: 'CP5651696323', time: '2023年9月20日' }
]
const qualityMonthTableProps = [
  {
    prop: 'lineName',
    label: '产线名'
  },
  {
    prop: 'process',
    label: '工序'
  },
  {
    prop: 'eqName',
    label: '设备名'
  },
  {
    prop: 'eqCode',
    label: '设备编码'
  },
  {
    prop: 'long',
    label: '总运行时长(h)'
  },
  // {
  //   prop: 'createTime',
  //   label: '保养时间'
  // },
  {
    prop: 'status',
    label: '设备状态'
  }
  // {
  //   prop: 'nextCreateTime',
  //   label: '下次保养时间'
  // }
  // {
  //   prop: 'nextLong',
  //   label: '距离保养时间(天)',
  //   // subcomponent: nextDay,
  //   align: 'center'
  // }
]

const qualityMonthList = [
  {
    lineName: '钢一线',
    process: '41',
    eqName: '设备1',
    eqCode: '2312312',
    long: '255',
    // createTime: '2021-02-25 12:00:01',
    status: '报警'
    // nextCreateTime: '2022-12-25 12:00:01',
    // nextLong: 365
  },
  {
    lineName: '钢二线',
    process: '41',
    eqName: '设备2',
    eqCode: '43434',
    long: '255',
    // createTime: '2021-11-25 12:00:01',
    status: '正常'
    // nextCreateTime: '2022-12-25 12:00:01',
    // nextLong: 4
  },
  {
    lineName: '钢三线',
    process: '41',
    eqName: '设备3',
    eqCode: '23213212',
    long: '255',
    // createTime: '2021-10-25 12:00:01',
    status: '故障停机'
    // nextCreateTime: '2022-12-25 12:00:01',
    // nextLong: 24
  },
  {
    lineName: '钢四线',
    process: '41',
    eqName: '设备4',
    eqCode: '23213',
    long: '255',
    // createTime: '2021-02-25 12:00:01',
    status: '故障停机'
    // nextCreateTime: '2022-12-25 12:00:01',
    // nextLong: -36
  },
  {
    lineName: '钢五线',
    process: '41',
    eqName: '设备5',
    eqCode: '23121312',
    long: '255',
    // createTime: '2021-06-25 12:00:01',
    status: '待机'
    // nextCreateTime: '2022-12-25 12:00:01',
    // nextLong: 111
  }
]

// let resizeFun = null

export default {
  name: 'ProductionMonitoringCockpit',
  components: {
    baseContainer,
    baseTable1,
    baseTable,
    baseTable2
    // TopRadioGroup,
    // doubleYChart
    // LinearBarChart
    // pieChart1,
    // pieChart2
    // pieChart3
    // BaseVideo
  },
  data() {
    return {
      beilv: 1,
      beilv2: 1,
      clientWidth: 0,
      times:undefined,
      value: 100,
      qualityYearTableProps,
      cxNameList,
      inventoryTableProps,
      inventoryList,
      locationList,
      locationTableProps,
      cxDataList,
      qualityYearList,
      isFullScreen: false,
      orderProcessList: [
        {
          name: '作业号RQ232323',
          outRate: '0.8'
        },
        {
          name: '作业号RQ2232232',
          outRate: '0.7'
        },
        {
          name: '作业号RQ2232232',
          outRate: '1'
        },
        {
          name: '作业号RQ2545444',
          outRate: '0.6'
        },
        {
          name: '作业号RQ232322',
          outRate: '0.5'
        },
        {
          name: '作业号RQ20230911',
          outRate: '0.4'
        }
      ],
      qualityTableProps1,
      qualityMonthList,
      qualityMonthTableProps,
      modelMonth: '',
      qualityList1,
      qualityTableProps2,
      qualityList2,
      dateType: '0',
      legendData1,
      legendData2,
      legendData3
    }
  },
  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.fetchList('exception-alarm')
    // this.fetchList('inAndOutOfEachLine')
    // this.fetchList('order-process')
    // this.fetchList('line-chart-data')
    this.init()
    this.getTimes()
    this.windowWidth(document.documentElement.clientWidth)
  },
  mounted() {
    const _this = this;
    window.onresize = () => {
      return (() => {
        _this.clientWidth = `${document.documentElement.clientWidth}`
        this.beilv2 = _this.clientWidth / 1920
      })()
    }
    // this.beilv2 = window.innerWidth / 1920
    // addEventListener('resize', resizeFun = () => {
    //   this.beilv2 = window.innerWidth / 1920
    // })
    // erd.listenTo(document, (element) => {
    //   console.log(element.offsetWidth)
    //   this.beilv2 = element.offsetWidth / 1920

    //   // var width = element.offsetWidth;
    //   // var height = element.offsetHeight;
    // });
  },
  // beforeDestroy() {
  //   //离开页面删除检测器和所有侦听器
  //   // erd.uninstall(document); //这里用ref是因为vue离开页面后获取不到dom
  //   removeEventListener('resize', resizeFun)
  // },
  methods: {
    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;
    },
    windowWidth(value) {
      this.clientWidth = value
    },
    // fetchList(type) {
    //   switch (type) {
    //     case 'order-process':
    //       return axios({
    //         url: '/analysis/factory-monitor/order',
    //         method: 'post'
    //       }).then(res => {
    //         if (res.data) {
    //           console.log(res)
    //           this.orderProcessList = res.data
    //           // this.orderProcessList = [
    //           //   { id: 1, name: '订单1', outRate: 0.5 },
    //           //   { id: 2, name: '订单2', outRate: 0.54 },
    //           //   { id: 3, name: '订单3', outRate: 0.45 },
    //           //   { id: 4, name: '订单4', outRate: 0.65 },
    //           //   { id: 5, name: '订单5', outRate: 0.35 },
    //           //   { id: 6, name: '订单6', outRate: 0.15 },
    //           //   { id: 7, name: '订单7', outRate: 0.5 },
    //           //   { id: 8, name: '订单8', outRate: 0.5 }
    //           // ]
    //         } else {
    //           this.orderProcessList.splice(0)
    //         }
    //       })
    //   }
    // },
    change() {
      this.isFullScreen = screenfull.isFullscreen
    },
    init() {
      if (screenfull.enabled) {
        screenfull.on('change', this.change)
      }
    },
    destroy() {
      if (screenfull.enabled) {
        screenfull.off('change', this.change)
      }
    },
    changeFullScreen() {
      console.log(this.beilv);
      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;
    text-align: center;
    position: relative;
    .unit{
      position: absolute;
      left: 260px;
      top:25px;
      font-size: 20px;
    }
    .time{
      position: absolute;
      left: 1360px;
      top:25px;
      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);
  }
}
    .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);
} */
</style>