<template>
  <div id="container" ref="container" class="visual-container" :style="styles">
    <el-row class="container-title" :style="{
        height: 88 + 'px',
        lineHeight: 88 + 'px',
        fontSize: 30 + 'px'
      }">
      <img src="../../assets/img/logo.png" style="width:1.1em;position:relative;top:.4em" alt="">
      许昌安彩冷端看板
      <!-- <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>
        <el-col :span="8" :style="{ padding: '0 ' + 8 + 'px' }">
          <el-row>
            <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="24">
              <base-container :beilv="1" :height="460" :title="'切割数据'" :title-icon="'1_1'">
                <!-- <div style="width:100%">
                  <el-row style="margin-bottom: 1em">
                    <p class="now-team-title main-title">- 报警总数 -</p>
                    <p class="now-team-content" style="margin:0">{{ exceptionAlarm.total }}</p>
                  </el-row>
                </div> -->
                <base-table1 :page="1" :limit="10" :show-index="false" :beilv="1" :table-config="inciseTableProps"
                  :table-data="inciseList" />
              </base-container>
            </el-col>
            <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="24">
              <!-- 各产线投入数量和产出 -->
              <base-container :beilv="1" :height="180" :title="'缺陷数据'" :title-icon="'1_3'">
                <!-- <top-radio-group :data-type="0" @change-time-range="handleChangeChartTable3" /> -->
                <base-table :page="1" :limit="10" :show-index="false" :beilv="1" :table-config="qualityTableProps"
                  :table-data="qualityList" />
              </base-container>
            </el-col>
          </el-row>
        </el-col>

        <el-col :span="16" :style="{ padding: '0 ' + 8 + 'px' }">
          <!-- 中间栏 -->
          <el-row>
            <el-col>
              <!-- 各产线投入数量折线展示 -->
              <el-row>
                <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="24">
                  <base-container1 :beilv="1" :title="'能源监控'" :title-icon="'1_5'">
                    <linear-bar-chart :name-list="cxNameList" :data-list="cxDataList" :height="200" :beilv="1"
                      :show-legend="true" />
                  </base-container1>
                </el-col>
              </el-row>

              <!-- 各产线投入产出折线展示 -->
              <el-row>
                <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="24">
                  <base-container1 :beilv="1" :title="'设备状态监控'" :title-icon="'1_5'">
                    <div class="visual-select">
                      <el-select v-model="modelMonth" size="mini" placeholder="">
                        <el-option key="1" value="钢1线" label="钢1线" default />
                      </el-select>
                    </div>
                    <base-table1 :page="1" :limit="5" :show-index="false" :beilv="1"
                      :table-config="qualityMonthTableProps" :table-data="qualityMonthList" />
                  </base-container1>
                </el-col>
              </el-row>

              <!-- 成品率折线展示 -->
              <el-row>
                <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="24">
                  <base-container1 :beilv="1" :title="'下片数量统计'" :title-icon="'1_5'">
                    <linear-bar-chart :id=" 'NumCharts' " :name-list="NumList" :data-list="NumDataList" :height="235"
                      :beilv="1" :show-legend="true" />
                  </base-container1>
                  <!-- <base-container :beilv="1" :title="'成品率折线展示'" :title-icon="'1_6'">
                    <div style="position:absolute;right:2em;top:3em;width:30em;">
                      <top-radio-group />
                    </div>
                    <line-chart2
                      :id="'line-chart2'"
                      :show-legend="true"
                      :legend-position="'center'"
                      :legend-data="legendData"
                      :beilv="1"
                      :height="'200'"
                    />
                  </base-container> -->
                </el-col>
              </el-row>

              <!-- 成品率条形图展示 -->
              <!-- <el-row style="flex-grow: 1; display: flex;">
                <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="24">
                  <base-container title="成品率条形图展示" title-icon="yieldline" :beilv="1">
                    <linear-bar-chart
                      :name-list="cplNameList"
                      :data-list="cplDataList"
                      :beilv="1"
                      :show-legend="true"
                    />
                  </base-container>
                </el-col>
              </el-row> -->
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-row>
  </div>
</template>

<script>
import baseContainer from './components/baseContainer'
import baseContainer1 from './components/baseContainer1'
import baseTable from './components/baseTable'
import baseTable1 from './components/baseTable'
// import baseTable3 from './components/baseTable'
// import TopRadioGroup from './components/topRadioGroup'
// import LineChart1 from './components/LineChart'
// import LineChart2 from './components/LineChart'
import LinearBarChart from './components/linearBarChart'
// import { mapGetters } from 'vuex'
import screenfull from 'screenfull'
// import ThreeBarChart from './components/threeBarChart.vue'
// import SimpleLineChart from './components/SimpleLineChart.vue'
// import BaseVideo from './components/baseVideo.vue'
// import axios from '@/utils/request'
// import { timeFormatter } from '@/filters'
// import moment from 'moment'
// import elementResizeDetectorMaker from 'element-resize-detector';
// var erd = elementResizeDetectorMaker(); //创建实例
const qualityTableProps1 = [
  {
    prop: 'createTime',
    label: '报警时间'
  },
  {
    prop: 'alarmCode',
    label: '报警编码'
  },
  {
    prop: 'alarmContent',
    label: '报警内容'
  }
]
const qualityTableProps2 = [
  {
    prop: 'createTime',
    label: '下单时间'
  },
  {
    prop: 'orderCode',
    label: '订单编码'
  },
  {
    prop: 'orderNumber',
    label: '订单数量'
  }
]

const qualityList1 = [
  { createTime: '2020/01/01', alarmCode: '3928498293', alarmContent: '故障' },
  { createTime: '2020/01/02', alarmCode: '3928498294', alarmContent: '故障' },
  { createTime: '2020/01/03', alarmCode: '3928498292', alarmContent: '故障' },
  { createTime: '2020/01/04', alarmCode: '3928498291', alarmContent: '故障' },
  { createTime: '2020/01/05', alarmCode: '3928498296', alarmContent: '故障' },
  { createTime: '2020/01/06', alarmCode: '3928498298', alarmContent: '故障' }

]
const qualityList2 = [
  { createTime: '2020/01/11', orderCode: '3928498292', orderNumber: '12312' },
  { createTime: '2020/01/12', orderCode: '3928498291', orderNumber: '21321' },
  { createTime: '2020/01/13', orderCode: '3928498293', orderNumber: '32121321' },
  { createTime: '2020/01/14', orderCode: '3928498294', orderNumber: '323213' },
  { createTime: '2020/01/15', orderCode: '3928498295', orderNumber: '2312312' },
  { createTime: '2020/01/16', orderCode: '3928498297', orderNumber: '2312312' }
]

const legendData = [
  {
    name: '产线1',
    icon: 'circle'
  },
  {
    name: '产线2',
    icon: 'circle'
  },
  {
    name: '产线3',
    icon: 'circle'
  },
  {
    name: '产线4',
    icon: 'circle'
  },
  {
    name: '产线5',
    icon: 'circle'
  },
  {
    name: '产线6',
    icon: 'circle'
  }
]
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 NumList = ['2023.9.11', '2023.9.12', '2023.9.13', '2023.9.14', '2023.9.15', '2023.9.16', '2023.9.17']

const NumDataList = [
  {
    topColor: '#9DD5FF',
    bottomColor: '#1295FF',
    name: '钢一线',
    data: [100, 150, 121, 97, 140, 132, 123]
  },
  {
    topColor: '#FF8BC3',
    bottomColor: '#EB46A1',
    name: '钢二线',
    data: [110, 110, 151, 77, 110, 55, 111]
  },
  {
    topColor: '#85F6E9',
    bottomColor: '#2EC6B4',
    name: '钢三线',
    data: [110, 120, 171, 287, 40, 100, 232]
  },
  {
    topColor: '#9496FF',
    bottomColor: '#6567FF',
    name: '钢四线',
    data: [140, 157, 122, 27, 123, 132, 32]
  },
  {
    topColor: '#9496FF',
    bottomColor: '#6567FF',
    name: '钢五线',
    data: [140, 157, 122, 27, 111, 154, 132]
  },
  {
    topColor: '#9496FF',
    bottomColor: '#6567FF',
    name: '钢六线',
    data: [140, 157, 122, 27, 240, 143, 122]
  }
]

const cplNameList = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
const cplDataList = [
  {
    topColor: '#9DD5FF',
    bottomColor: '#1295FF',
    name: '钢一线',
    data: [100, 150, 121, 97, 140, 180, 127]
  },
  {
    topColor: '#FF8BC3',
    bottomColor: '#EB46A1',
    name: '钢二线',
    data: [110, 110, 151, 77, 110, 151, 77]
  },
  {
    topColor: '#85F6E9',
    bottomColor: '#2EC6B4',
    name: '钢三线',
    data: [110, 120, 171, 287, 40, 160, 127]
  },
  {
    topColor: '#9496FF',
    bottomColor: '#6567FF',
    name: '钢四线',
    data: [140, 157, 122, 27, 240, 180, 127]
  },
  {
    topColor: '#F68E8A',
    bottomColor: '#E95552',
    name: '钢五线',
    data: [170, 180, 127, 17, 340, 180, 255]
  },
  {
    topColor: '#FFE873',
    bottomColor: '#E7AE2A',
    name: '钢六线',
    data: [140, 160, 121, 57, 170, 3, 127]
  }
]
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
  },
  {
    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
  },
  {
    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
  },
  {
    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
  },
  {
    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
  }
]
const qualityTableProps = [
  {
    prop: 'createTime',
    label: '发生时间'
  },
  {
    prop: 'content',
    label: '缺陷内容'
  },
  {
    prop: 'productLine',
    label: '产线'
  },
  {
    prop: 'process',
    label: '发生工序'
  }
]

const qualityList = [
  { createTime: '12:00:01', content: '报废', productLine: '钢一线', process: '磨边' },
  { createTime: '12:20:51', content: '报废', productLine: '钢二线', process: '镀膜' },
  { createTime: '11:15:21', content: '报废', productLine: '钢三线', process: '钢化' },
  { createTime: '11:22:16', content: '报废', productLine: '钢四线', process: '镀膜' },
  { createTime: '10:30:49', content: '报废', productLine: '钢五线', process: '包装' },
  { createTime: '10:40:35', content: '报废', productLine: '钢六线', process: '钢化' },
  { createTime: '10:31:35', content: '报废', productLine: '钢七线', process: '包装' },
  { createTime: '10:32:35', content: '报废', productLine: '钢八线', process: '钢化' },
  { createTime: '10:33:35', content: '报废', productLine: '钢一线', process: '磨边' },
  { createTime: '10:34:35', content: '报废', productLine: '钢二线', process: '镀膜' },
  { createTime: '10:38:35', content: '报废', productLine: '钢三线', process: '钢化' },
  { createTime: '10:31:35', content: '报废', productLine: '钢四线', process: '镀膜' },
  // { createTime: '10:43:35', content: '报废', productLine: '钢五线', process: '镀膜' },
  // { createTime: '10:43:35', content: '报废', productLine: '钢五线', process: '镀膜' },
  // { createTime: '10:43:35', content: '报废', productLine: '钢五线', process: '镀膜' },
  // { createTime: '10:43:35', content: '报废', productLine: '钢五线', process: '镀膜' },
  // { createTime: '10:43:35', content: '报废', productLine: '钢五线', process: '镀膜' },
  // { createTime: '10:43:35', content: '报废', productLine: '钢五线', process: '镀膜' },
  // { createTime: '10:43:35', content: '报废', productLine: '钢五线', process: '镀膜' },
  // { createTime: '10:43:35', content: '报废', productLine: '钢五线', process: '镀膜' },
  // { createTime: '10:43:35', content: '报废', productLine: '钢五线', process: '镀膜' }

  // { createTime: '10:30:35', content: '报废', productLine: '钢六线', process: '镀膜' },
  // { createTime: '10:30:35', content: '报废', productLine: '钢六线', process: '镀膜' }
]
const inciseTableProps = [
  { prop: 'finishNum', label: '成品数' },
  { prop: 'scrapNum', label: '废片数' },
  { prop: 'area', label: '面积' }
  // { prop: 'count', label: '总数' },
  // { prop: 'equipmentName', label: '设备名称' }
]
// total: 0,
const inciseList = [
  { finishNum: '21312', scrapNum: '23', area: '10576.2' },
  { finishNum: '12353', scrapNum: '20', area: '10572.04' },
  { finishNum: '32313', scrapNum: '13', area: '12334.24' },
  { finishNum: '43434', scrapNum: '14', area: '12344.24' },
  { finishNum: '34334', scrapNum: '15', area: '12344.24' },
  { finishNum: '43434', scrapNum: '16', area: '12344.24' },
  { finishNum: '32353', scrapNum: '17', area: '12344.24' },
  { finishNum: '43434', scrapNum: '10', area: '12434.24' },
  { finishNum: '43434', scrapNum: '13', area: '12344.24' },
  { finishNum: '32353', scrapNum: '14', area: '12337.24' },
  { finishNum: '43434', scrapNum: '10', area: '12323.24' },
  { finishNum: '43423', scrapNum: '14', area: '12235.24' },
  { finishNum: '32343', scrapNum: '15', area: '12345.24' },
  { finishNum: '43434', scrapNum: '18', area: '12455.24' },
  { finishNum: '43432', scrapNum: '19', area: '12345.24' },
  { finishNum: '43432', scrapNum: '19', area: '12345.24' }
]
export default {
  name: 'ProductionMonitoringCockpit',
  components: {
    baseContainer,
    baseTable,
    baseTable1,
    baseContainer1,
    // baseTable3,
    // TopRadioGroup,
    // ThreeBarChart,
    // SimpleLineChart,
    // LineChart1,
    // LineChart2,
    LinearBarChart
    // BaseVideo
  },
  data() {
    return {
      exceptionAlarm: {
        inciseTableProps: [
          { prop: 'finishNum', label: '成品数' },
          { prop: 'scrapNum', label: '废片数' },
          { prop: 'area', label: '面积' }
          // { prop: 'count', label: '总数' },
          // { prop: 'equipmentName', label: '设备名称' }
        ],
        total: 0,
        inciseList: [
          { finishNum: '21312', scrapNum: '23', area: '10576.2' },
          { finishNum: '12353', scrapNum: '10', area: '1057.04' },
          { finishNum: '32353', scrapNum: '10', area: '12333.24' }
        ]
      },
      inAndOutOfEachLine: {
        tableProps: [
          { prop: 'pdName', label: '产线名' },
          { prop: 'in', label: '上片数量' },
          { prop: 'out', label: '下片数量' },
          { prop: 'rate', label: '比率' }
          // {
          //   prop: 'rate',
          //   label: '比率',
          //   filter: val => {
          //     if (val !== null && val !== undefined && val.trim() !== '') return `${(val * 100).toFixed(2)}%`
          //     else return '-'
          //   }
          // }
        ],
        total: 0,
        list: []
      },
      qualityMonthTableProps,
      qualityMonthList,
      orderProcessList: [],
      beilv: 1,
      beilv2: 1,
      value: 100,
      isFullScreen: false,
      qualityTableProps1,
      qualityList1,
      qualityList,
      qualityTableProps,
      qualityTableProps2,
      qualityList2,
      dateType: '0',
      inciseTableProps,
      inciseList,
      legendData,
      cxNameList,
      cxDataList,
      NumList,
      NumDataList,
      modelMonth: '',
      cplNameList,
      cplDataList,
      plInput: {},
      plOutput: {},
      plRate: {},
      loadTable: false,
      standardCategory: null
    }
  },
  computed: {
    // ...mapGetters(['sidebar']),
    styles() {
      const v = Math.floor(this.value * this.beilv2 * 100) / 10000
      return {
        transform: `scale(${v})`,
        transformOrigin: 'left top'
        // overflow: hidden;
      }
    }
  },
  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.windowWidth(document.documentElement.clientWidth)
  },
  mounted() {
    const _this = this;
    _this.beilv2 = document.documentElement.clientWidth / 1920
    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: {
    windowWidth(value) {
      this.clientWidth = value
    },
    // erd.listenTo(document.getElementById("box"), (element) => {
    //   var width = element.offsetWidth;
    //   var height = element.offsetHeight;
    // })
    // fetchList(type) {
    //   switch (type) {
    //     case 'exception-alarm': {
    //       return axios({
    //         url: '/analysis/factory-monitor/alarm',
    //         method: 'post'
    //       }).then(res => {
    //         if (res.data.length) {
    //           this.exceptionAlarm.list = res.data
    //           res.data.forEach(item => {
    //             if (item.count) {
    //               this.exceptionAlarm.total = item.count
    //             }
    //           })
    //         } else {
    //           this.exceptionAlarm.total = 0
    //           this.exceptionAlarm.list.splice(0)
    //         }
    //       })
    //     }
    //     case 'inAndOutOfEachLine':
    //       return this.handleChangeChartTable3('0')
    //     case 'order-process':
    //       return axios({
    //         url: '/analysis/factory-monitor/order',
    //         method: 'post'
    //       }).then(res => {
    //         if (res.data) {
    //           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)
    //         }
    //       })
    //     case 'line-chart-data':
    //       return this.handleChangeOptions('all', '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() {
      if (!screenfull.enabled) {
        this.$message({
          message: 'you browser can not work',
          type: 'warning'
        })
        return false
      }
      screenfull.toggle(this.$refs.container)
    },

    /**
     * 当切换当天、一周、一个月数据时
     * @param {string} chartId - '投入数量图', '产出数量图', '投入产出比'
     * @param {string} optValue - '0','1','2'
     */
    // handleChangeOptions(chartId, optValue) {
    //   let startTime
    //   let endTime
    //   const url = '/analysis/factory-monitor/pdlNumTime'
    //   const method = 'post'
    //   switch (optValue) {
    //     case '0': {
    //       const baseTime = moment().set({ hour: 0, minute: 0, second: 0 })
    //       startTime = baseTime.format('YYYY-MM-DDTHH:mm:ss')
    //       endTime = baseTime.set({ hour: 23, minute: 59, second: 59 }).format('YYYY-MM-DDTHH:mm:ss')
    //       break
    //     }
    //     case '1': {
    //       startTime = moment()
    //         .subtract(1, 'week')
    //         .set({ hour: 0, minute: 0, second: 0 })
    //         .format('YYYY-MM-DDTHH:mm:ss')
    //       endTime = moment().format('YYYY-MM-DDTHH:mm:ss')
    //       break
    //     }
    //     case '2': {
    //       startTime = moment()
    //         .subtract(1, 'month')
    //         .set({ hour: 0, minute: 0, second: 0 })
    //         .format('YYYY-MM-DDTHH:mm:ss')
    //       endTime = moment().format('YYYY-MM-DDTHH:mm:ss')
    //       break
    //     }
    //   }

    //   return axios({
    //     url,
    //     method,
    //     data: {
    //       startTime,
    //       endTime
    //     }
    //   }).then(res => {
    //     console.log('res', res)
    //     switch (chartId) {
    //       case '投入数量图':
    //         this.plInput = {}
    //         res.data.forEach(item => {
    //           if (!this.standardCategory) {
    //             this.standardCategory = item.series
    //           }

    //           item.data.forEach((category, index) => {
    //             if (!isNaN(Number(category.time))) {
    //               category.time = +category.time
    //             }
    //             if (this.plInput[item.pdName]) {
    //               this.$set(this.plInput[item.pdName], [category.time], category.in)
    //             } else {
    //               this.$set(this.plInput, [item.pdName], { [category.time]: category.in })
    //             }
    //           })
    //         })
    //         /** 填充 key */
    //         this.fillKey(this.plInput, this.standardCategory)
    //         this.standardCategory = null
    //         break
    //       case '产出数量图':
    //         this.plOutput = {}
    //         res.data.forEach(item => {
    //           if (!this.standardCategory) {
    //             this.standardCategory = item.series
    //           }

    //           item.data.forEach((category, index) => {
    //             if (!isNaN(Number(category.time))) {
    //               category.time = +category.time
    //             }
    //             if (this.plOutput[item.pdName]) {
    //               this.$set(this.plOutput[item.pdName], [category.time], category.out)
    //             } else {
    //               this.$set(this.plOutput, [item.pdName], { [category.time]: category.out })
    //             }
    //           })
    //         })
    //         /** 填充 key */
    //         this.fillKey(this.plOutput, this.standardCategory)
    //         this.standardCategory = null
    //         break
    //       case '投入产出比':
    //         this.plRate = {}
    //         res.data.forEach(item => {
    //           if (!this.standardCategory) {
    //             this.standardCategory = item.series
    //           }

    //           item.data.forEach((category, index) => {
    //             if (!isNaN(Number(category.time))) {
    //               category.time = +category.time
    //             }
    //             if (this.plRate[item.pdName]) {
    //               this.$set(this.plRate[item.pdName], [category.time], category.rate)
    //             } else {
    //               this.$set(this.plRate, [item.pdName], { [category.time]: category.rate })
    //             }
    //           })
    //         })
    //         /** 填充 key */
    //         this.fillKey(this.plRate, this.standardCategory)
    //         this.standardCategory = null
    //         break
    //       case 'all':
    //         res.data.forEach(item => {
    //           /** 保存x轴的标准分类，因为数据会有缺失，标准分类用于校验哪些数据缺失 */
    //           if (!this.standardCategory) {
    //             this.standardCategory = item.series
    //           }
    //           /** if valid */
    //           if (item.data.length) {
    //             /** handle data */
    //             item.data.forEach((category, index) => {
    //               if (!isNaN(Number(category.time))) {
    //                 category.time = +category.time
    //               }

    //               if (this.plInput[item.pdName]) {
    //                 this.$set(this.plInput[item.pdName], [category.time], category.in)
    //               } else {
    //                 this.$set(this.plInput, [item.pdName], { [category.time]: category.in })
    //               }

    //               if (this.plOutput[item.pdName]) {
    //                 this.$set(this.plOutput[item.pdName], [category.time], category.out)
    //               } else {
    //                 this.$set(this.plOutput, [item.pdName], { [category.time]: category.out })
    //               }

    //               if (this.plRate[item.pdName]) {
    //                 this.$set(this.plRate[item.pdName], [category.time], category.rate)
    //               } else {
    //                 this.$set(this.plRate, [item.pdName], { [category.time]: category.rate })
    //               }
    //             })
    //           }
    //         })

    //         /** 填充 key */
    //         this.fillKey(this.plInput, this.standardCategory)
    //         this.fillKey(this.plOutput, this.standardCategory)
    //         this.fillKey(this.plRate, this.standardCategory)

    //         this.loadTable = true
    //         this.standardCategory = null
    //         break
    //     }
    //   })
    // },

    fillKey(obj, keyList) {
      for (const [legend, child] of Object.entries(obj)) {
        /** 数量相等，就不继续执行了 */
        if (Object.keys(child).length === keyList) return
        const newChild = {}
        keyList.forEach(key => {
          if (!isNaN(Number(key))) {
            key = +key
          }

          if (child[key] === undefined) {
            newChild[key] = null
          } else {
            newChild[key] = child[key]
          }
        })
        obj[legend] = newChild
      }
    },

    // handleChangeChartTable3(v) {
    //   let startTime
    //   let endTime
    //   switch (v) {
    //     case '0': {
    //       const baseTime = moment().set({ hour: 0, minute: 0, second: 0 })
    //       startTime = baseTime.format('YYYY-MM-DDTHH:mm:ss')
    //       endTime = baseTime.add(1, 'd').format('YYYY-MM-DDTHH:mm:ss')
    //       break
    //     }
    //     case '1': {
    //       startTime = moment()
    //         .startOf('week')
    //         .set({ hour: 0, minute: 0, second: 0 })
    //         .format('YYYY-MM-DDTHH:mm:ss')
    //       endTime = moment(new Date()).format('YYYY-MM-DDTHH:mm:ss')
    //       break
    //     }
    //     case '2': {
    //       startTime = moment()
    //         .startOf('month')
    //         .set({ hour: 0, minute: 0, second: 0 })
    //         .format('YYYY-MM-DDTHH:mm:ss')
    //       endTime = moment(new Date()).format('YYYY-MM-DDTHH:mm:ss')
    //       break
    //     }
    //   }
    //   /** 请求数据 */
    //   axios({
    //     url: '/analysis/factory-monitor/pdlNum',
    //     method: 'post',
    //     data: {
    //       startTime,
    //       endTime
    //     }
    //   }).then(res => {
    //     // inAndOutOfEachLine
    //     if (res.data) {
    //       this.inAndOutOfEachLine.total = res.data.length
    //       this.inAndOutOfEachLine.list = res.data
    //     } else {
    //       this.inAndOutOfEachLine.total = 0
    //       this.inAndOutOfEachLine.list.splice(0)
    //     }
    //   })
    // }
  }
}
</script>

<style lang="scss" scoped>
.visual-container {
  // width: 100%;
  width: 1920px;
  height: 1080px;
  background: url('../../assets/img/OperationalOverview/back.png') no-repeat;
  background-size: cover;
  // height: 100vh;
  .container-title {
    width: 100%;
    background: url('../../assets/img/OperationalOverview/title.png') no-repeat;
    background-size: 100% 100%;
    color: #00fff0;
    text-align: center;

    .title-button {
      color: #00fff0;
      font-size: 20px;
      position: absolute;
    }
  }
 .visual-select {
   position: absolute;
   right: 1em;
   top: 2em;
 }
  .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);
}
</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);
}
/* .container-main {
  min-height: calc(100vh - 10em);
} */
</style>
