<!--
 * @Author: zwq
 * @Date: 2021-07-19 15:18:30
 * @LastEditors: zhp
 * @LastEditTime: 2024-04-03 10:54:53
 * @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="">
      许昌安彩AGV原片周转看板
      <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 * beilv" type="flex" class="flex-1">
        <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
          <base-container :beilv="1" :size="'eqStatus'" :title="'搬运任务'" :title-icon="'task'" :back="'energy'">
            <!-- <base-table1 :page="1" :limit="999" :show-index="false" :beilv="1" :table-config="qualityYearTableProps"
              :table-data="qualityYearList" /> -->
            <dv-scroll-board :config="taskConfig" style="width:100%;height:350px" ref='taskScrollBoard' />
          </base-container>
        </el-col>
        <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
          <base-container :beilv="1" :size="'eqStatus'" :title="'周转进度'" :title-icon="'order'" :back="'energy'">
            <div class="order" style="width:100%; overflow: hidden scroll;height: 350px;">
              <el-row v-for="op in orderProcessList" :key="op.id" style="margin-bottom: .5em">
                <!-- <p v-if="op.outRate === 1" class="now-secondary-title"
                  style="font-size: 14px; opacity: calc(.6);color:#4679FD">
                  <i class="el-icon-check" />
                  {{ op.name }}
                </p> -->
                <!-- <p class="now-secondary-title">{{ op.name }}</p> -->
                <p  class="now-secondary-title" style="font-size: 14px;opacity: calc(.6);">{{ op.name }}</p>
                <el-progress style="width: 935px;" text-color="rgba(255, 255, 255, .6)" :stroke-width="10"
                  define-back-color="rgba(32, 57, 96, 1)" :percentage="op.outRate * 100" class="custom-progress-bar" />
              </el-row>
            </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="280" :size="'eqStatus'" :title="'库存管理'" :title-icon="'productLine'"
            :back="'energy'">
            <!-- <base-table :page="1" :limit="999" :show-index="false" :beilv="1" :table-config="inventoryTableProps"
              :table-data="inventoryList" /> -->
            <dv-scroll-board :config="inventoryConfig" style="width:100%;height:380px" ref='inventoryScrollBoard' />
          </base-container>
        </el-col>
        <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
          <base-container :beilv="1" :height="318 + 338 + 16" :size="'eqStatus'" :title="'库位信息'" :title-icon="'info'"
            :back="'energy'">
            <!-- <base-table2 :page="1" :limit="999" :show-index="false" :beilv="1" :table-config="locationTableProps"
              :table-data="locationList" /> -->
            <dv-scroll-board :config="locationConfig" style="width:100%;height:380px" ref='locationScrollBoard' />
          </base-container>
        </el-col>
      </el-row>
    </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 screenfull from 'screenfull'
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日'
  },
  {
    eqName: '	清洗剂', eqCode: '备件库', level: '200mm', 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: '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日' }
]
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,
      inventoryTableProps,
      inventoryList,
      locationList,
      taskConfig: {
        header: ['序号', '作业号', '执行叉车', '库位', '成品规格', '成品编码', '时间'],
        headerBGC: 'rgba(32, 55, 96, 0.8)',
        oddRowBGC: 'rgba(32, 55, 96, 0.8)',
        evenRowBGC: 'rgba(14, 32, 62, 0.8)',
        columnWidth: [80, 120, 90, 140, 140, 150,130],
        align: ['center'],
        data: [],
        // index:true,
        rowNum: 10
      },
      inventoryConfig: {
        header: ['序号', '物件名称', '存放区域', '规格', '数量', '单位', '编码', '入库时间'],
        headerBGC: 'rgba(32, 55, 96, 0.8)',
        oddRowBGC: 'rgba(32, 55, 96, 0.8)',
        evenRowBGC: 'rgba(14, 32, 62, 0.8)',
        columnWidth: [80, 100, 90, 140, 80, 70, 180, 120],
        align: ['center'],
        data: [],
        // index:true,
        rowNum: 10
      },
      locationConfig: {
        header: ['序号', '库位名称', '存放物件名称', '数量', '存放位置', '编码', '单位', '入库时间'],
        headerBGC: 'rgba(32, 55, 96, 0.8)',
        oddRowBGC: 'rgba(32, 55, 96, 0.8)',
        evenRowBGC: 'rgba(14, 32, 62, 0.8)',
        columnWidth: [80, 100, 120, 80, 100, 180, 70, 120],
        align: ['center'],
        data: [],
        // index:true,
        rowNum: 10
      },
      locationTableProps,
      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'
        },
         {
          name: '作业号RQ20230911',
          outRate: '0.4'
        },
        {
          name: '作业号RQ20230911',
          outRate: '0.4'
        }, {
          name: '作业号RQ20230911',
          outRate: '0.4'
        }, {
          name: '作业号RQ20230911',
          outRate: '0.4'
        }
      ],
      // qualityTableProps1,
      modelMonth: '',
      // logoutTime: 43200000,
      // qualityTableProps2,
      // qualityList2,
      dateType: '0',
    }
  },
  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.fetchList('exception-alarm')
    // this.fetchList('inAndOutOfEachLine')
    // this.fetchList('order-process')
    // this.fetchList('line-chart-data')
    this.init()
    this.getTimes()
    this.windowWidth(document.documentElement.clientWidth)
    setTimeout(() => {
      window.location.reload()
    }, 86400000)
  },
  mounted() {
    this.getTask()
    this.getInventoryData()
    this.getLocationData()
    const _this = this;
    window.onresize = () => {
      return (() => {
        _this.clientWidth = `${document.documentElement.clientWidth}`
        this.beilv2 = _this.clientWidth / 1920
      })()
    }
  },
  methods: {
    getTimes() {
      setInterval(this.getTimesInterval, 1000);
    },
    getTask() {
      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.eqName || ''}
            </span>`,
        `<span style="color:rgba(255,255,255,0.5)">${item.eqCode || ''}</span>`,
        `<span style="color:rgba(255,255,255,0.5)">${item.level || ''}</span>`,
        `<span style="color:rgba(255,255,255,0.5)">${item.product || ''}</span>`,
        `<span style="color:rgba(255,255,255,0.5)">${item.productCode || ''}</span>`,
        `<span style="color:rgba(255,255,255,0.5)">${item.time || ''}</span>`,

      ])
      this.taskConfig.data = eqArr
      this.$refs['taskScrollBoard'].updateRows(eqArr)
    },
    getInventoryData() {
      let eqArr = this.inventoryList.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.eqName || ''}
            </span>`,
        `<span style="color:rgba(255,255,255,0.5)">${item.eqCode || ''}</span>`,
        `<span style="color:rgba(255,255,255,0.5)">${item.level || ''}</span>`,
        `<span style="color:rgba(255,255,255,0.5)">${item.product || ''}</span>`,
        `<span style="color:rgba(255,255,255,0.5)">${item.unit || ''}</span>`,
        `<span style="color:rgba(255,255,255,0.5)">${item.productCode || ''}</span>`,
        `<span style="color:rgba(255,255,255,0.5)">${item.time || ''}</span>`,
      ])
      this.inventoryConfig.data = eqArr
      this.$refs['inventoryScrollBoard'].updateRows(eqArr)
    },
    getLocationData() {
      let eqArr = this.locationList.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.eqName || ''}
            </span>`,
        `<span style="color:rgba(255,255,255,0.5)">${item.eqCode || ''}</span>`,
        `<span style="color:rgba(255,255,255,0.5)">${item.product || ''}</span>`,
        `<span style="color:rgba(255,255,255,0.5)">${item.level || ''}</span>`,
        `<span style="color:rgba(255,255,255,0.5)">${item.productCode || ''}</span>`,
        `<span style="color:rgba(255,255,255,0.5)">${item.unit || ''}</span>`,
        `<span style="color:rgba(255,255,255,0.5)">${item.time || ''}</span>`,
      ])
      this.locationConfig.data = eqArr
      this.$refs['locationScrollBoard'].updateRows(eqArr)
    },
    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
    },
    change() {
      this.isFullScreen = screenfull.isFullscreen
    },
    init() {
      if (screenfull.isEnabled) {
        screenfull.on('change', this.change)
      }
    },
    destroy() {
      if (screenfull.isEnabled) {
        screenfull.off('change', this.change)
      }
    },
    changeFullScreen() {
      console.log(this.beilv);
      if (!screenfull.isEnabled) {
        this.$message({
          message: 'you browser can not work',
          type: 'warning'
        })
        return false
      }
      screenfull.toggle()
    }
  }
}
</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/AGV.png') no-repeat;
    background-size: 100% 100%;
    color: #00fff0;
    text-align: center;
    letter-spacing: 8px;
    // word-spacing: 8px;
    position: relative;
      .unit {
          position: absolute;
          left: 240px;
          top: 25px;
          color: rgba(255, 255, 255, 0.80);
          font-size: 20px;
          letter-spacing: 1px;
        }
        .time {
          position: absolute;
          left: 1400px;
            top: 25px;
          color: rgba(255, 255, 255, 0.80);
          font-size: 20px;
          letter-spacing: .72px;
        }
    .title-button {
      color: #00fff0;
      font-size: 20px;
      position: absolute;
    }
  }

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

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

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

.now-secondary-title {
  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);
}
::v-deep .el-progress__text {
  width: 50px;
  margin-top: -70px;
  margin-left: 834px;
  text-align: right;
  // background-color: unset;
  // background-image: linear-gradient(to right, #4573fe, #47f8dc);
}
 .visual-select {
   position: absolute;
   right: 1em;
   top: 2em;
 }

//  .container-main {
//    padding: 5px;
//  }
.order::-webkit-scrollbar{
  display: none
}
</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>
