<template>
  <div class="container" :style="{ width: `${style.width}px`, height: `${style.height}px`, transform: `${style.transform}` }">
    <div class="content">
      <div class="c-left">
        <div class="left-header">
          <div>
            <img :src="titlePng" alt="logo" />
          </div>
        </div>
      </div>
      <div class="c-center">
        <div class="center-header">后悬装配线智慧系统</div>
      </div>
      <div class="c-right">
        <div class="right">
          <div class="right-head">
            <span>{{ time }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="content_main">
      <div class="content_main_calendar">
        <dv-border-box-12 class="items">
          <div style="margin: 5px 0 5px 0px">
            <span style="width: 20px;height: 10px;background: #016ce9;display: inline-block;"></span>
            <span style="color: #fff"> KPI管理</span>
            <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
            <el-radio-group v-model="selectBeat" @change="changeRadio">
              <el-radio :label="'甲班'" style="color: #fff">甲班</el-radio>
              <el-radio :label="'乙班'" style="color: #fff">乙班</el-radio>
            </el-radio-group>
          </div>
          <dv-border-box-12 class="items" style="height: 110px;margin-right: 10px">
            <div style="margin: 5px 0 10px 10px">
              <span style="width: 20px;height: 10px;background: #016ce9;display: inline-block;"></span>
              <span style="color: #fff"> 今日KPI</span>
            </div>
            <span style="margin: 0 10px">计划产量</span>
            <el-input-number v-model="form_AddKPI.计划产量" :min="0" :step="1" size="mini" style="width:150px"/>
            <span style="margin: 0 10px">理论产量</span>
            <el-input-number v-model="form_AddKPI.理论产量" :min="0" :step="1" size="mini" style="width:150px"/>
            <span style="margin: 0 10px">实际产量</span>
            <el-input-number v-model="form_AddKPI.实际产量" :min="0" :step="1" size="mini" style="width:150px"/>
            <span style="margin: 0 10px">应到人数</span>
            <el-input-number v-model="form_AddKPI.应到人数" :min="0" :step="1" size="mini" style="width:150px"/>
            <span style="margin: 0 10px">实到人数</span>
            <el-input-number v-model="form_AddKPI.实到人数" :min="0" :step="1" size="mini" style="width:150px"/>
            <el-button type="success" size="mini" style="margin-left: 10px" @click="saveTodayKpi()">保存</el-button>
          </dv-border-box-12>
          <el-row>
            <el-col :span="12">
              <dv-border-box-12 class="items" style="height: 390px;">
                <div style="margin: 5px 0 10px 10px">
                  <span style="width: 20px;height: 10px;background: #016ce9;display: inline-block;"></span>
                  <span style="color: #fff"> 甲班时间设定</span>
                </div>
                <div style="margin: 30px 100px">
                  <span style="margin: 0 10px">上班时间</span>
                  <el-time-picker
                      :clearable = "false"
                      v-model="form_beat1.上班时间"
                      size="mini"
                      is-range
                      align="center"
                      style="width: 240px;margin-left: 58px"
                      value-format="HH:mm:ss"
                      format="HH:mm"
                      range-separator="～"
                      start-placeholder="开始时间"
                      end-placeholder="结束时间"/>
                </div>
                <div style="margin: 30px 100px">
                  <span style="margin: 0 10px">休息时间1</span>
                  <el-time-picker
                      :clearable = "false"
                      v-model="form_beat1.休息时间1"
                      size="mini"
                      is-range
                      align="center"
                      style="width: 240px;margin-left: 50px"
                      value-format="HH:mm:ss"
                      format="HH:mm"
                      range-separator="～"
                      start-placeholder="开始时间"
                      end-placeholder="结束时间"/>
                </div>
                <div style="margin: 30px 100px">
                  <span style="margin: 0 10px">休息时间2</span>
                  <el-time-picker
                      :clearable = "false"
                      v-model="form_beat1.休息时间2"
                      size="mini"
                      is-range
                      align="center"
                      style="width: 240px;margin-left: 50px"
                      value-format="HH:mm:ss"
                      format="HH:mm"
                      range-separator="～"
                      start-placeholder="开始时间"
                      end-placeholder="结束时间"/>
                </div>
                <div style="margin: 30px 100px">
                  <span style="margin: 0 10px">休息时间3</span>
                  <el-time-picker
                      :clearable = "false"
                      v-model="form_beat1.休息时间3"
                      size="mini"
                      is-range
                      align="center"
                      style="width: 240px;margin-left: 50px"
                      value-format="HH:mm:ss"
                      format="HH:mm"
                      range-separator="～"
                      start-placeholder="开始时间"
                      end-placeholder="结束时间"/>
                </div>
                <div style="margin: 30px 100px">
                  <span style="margin: 0 10px">休息时间4</span>
                  <el-time-picker
                      :clearable = "false"
                      v-model="form_beat1.休息时间4"
                      size="mini"
                      is-range
                      align="center"
                      style="width: 240px;margin-left: 50px"
                      value-format="HH:mm:ss"
                      format="HH:mm"
                      range-separator="～"
                      start-placeholder="开始时间"
                      end-placeholder="结束时间"/>
                  <el-button type="success" size="mini" style="margin-left: 50px" @click="saveBeat1()">保存</el-button>
                </div>
              </dv-border-box-12>
            </el-col>
            <el-col :span="12">
              <dv-border-box-12 class="items" style="height: 390px;">
                <div style="margin: 5px 0 10px 10px">
                  <span style="width: 20px;height: 10px;background: #016ce9;display: inline-block;"></span>
                  <span style="color: #fff"> 乙班时间设定</span>
                </div>
                <div style="margin: 30px 100px">
                  <span style="margin: 0 10px">上班时间</span>
                  <el-time-picker
                      :clearable = "false"
                      v-model="form_beat2.上班时间"
                      size="mini"
                      is-range
                      align="center"
                      style="width: 240px;margin-left: 58px"
                      value-format="HH:mm:ss"
                      format="HH:mm"
                      range-separator="～"
                      start-placeholder="开始时间"
                      end-placeholder="结束时间"/>
                </div>
                <div style="margin: 30px 100px">
                  <span style="margin: 0 10px">休息时间1</span>
                  <el-time-picker
                      :clearable = "false"
                      v-model="form_beat2.休息时间1"
                      size="mini"
                      is-range
                      align="center"
                      style="width: 240px;margin-left: 50px"
                      value-format="HH:mm:ss"
                      format="HH:mm"
                      range-separator="～"
                      start-placeholder="开始时间"
                      end-placeholder="结束时间"/>
                </div>
                <div style="margin: 30px 100px">
                  <span style="margin: 0 10px">休息时间2</span>
                  <el-time-picker
                      :clearable = "false"
                      v-model="form_beat2.休息时间2"
                      size="mini"
                      is-range
                      align="center"
                      style="width: 240px;margin-left: 50px"
                      value-format="HH:mm:ss"
                      format="HH:mm"
                      range-separator="～"
                      start-placeholder="开始时间"
                      end-placeholder="结束时间"/>
                </div>
                <div style="margin: 30px 100px">
                  <span style="margin: 0 10px">休息时间3</span>
                  <el-time-picker
                      :clearable = "false"
                      v-model="form_beat2.休息时间3"
                      size="mini"
                      is-range
                      align="center"
                      style="width: 240px;margin-left: 50px"
                      value-format="HH:mm:ss"
                      format="HH:mm"
                      range-separator="～"
                      start-placeholder="开始时间"
                      end-placeholder="结束时间"/>
                </div>
                <div style="margin: 30px 100px">
                  <span style="margin: 0 10px">休息时间4</span>
                  <el-time-picker
                      :clearable = "false"
                      v-model="form_beat2.休息时间4"
                      size="mini"
                      is-range
                      align="center"
                      style="width: 240px;margin-left: 50px"
                      value-format="HH:mm:ss"
                      format="HH:mm"
                      range-separator="～"
                      start-placeholder="开始时间"
                      end-placeholder="结束时间"/>
                  <el-button type="success" size="mini" style="margin-left: 50px" @click="saveBeat2()">保存</el-button>
                </div>
              </dv-border-box-12>
            </el-col>
          </el-row>
          <dv-border-box-12 class="items" style="height: 350px;">
            <div style="margin: 5px 0 10px 10px">
              <span style="width: 20px;height: 10px;background: #016ce9;display: inline-block;"></span>
              <span style="color: #fff"> 历史KPI</span>
            </div>
            <div style="margin: 30px 100px">
              <span style="margin: 0 10px">查询日期</span>
              <el-date-picker
                  :clearable = "false"
                  v-model="form_HisKPI.日期"
                  size="mini"
                  type="date"
                  align="center"
                  style="width: 150px;margin-left:47px;"
                  value-format="yyyy-MM-dd"
                  format="yyyy-MM-dd"/>
              <span style="margin: 0 10px">查询班组</span>
              <el-select v-model="form_HisKPI.班次" size="mini" style="margin-left:47px;width:150px">
                <el-option
                    v-for="item in beatBase"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"/>
              </el-select>
              <el-button type="primary" size="mini" style="margin-left: 50px" @click="getHisBeat2()">查询数据</el-button>
            </div>
            <div style="margin: 30px 100px">
              <span style="margin: 0 10px">计划产量</span>
              <el-input v-model="form_HisKPI.计划产量" readonly size="mini" style="margin-left:47px;width:150px"/>
              <span style="margin: 0 10px">理论产量</span>
              <el-input v-model="form_HisKPI.理论产量" readonly size="mini" style="width:150px;margin-left:47px"/>
              <span style="margin: 0 10px">实际产量</span>
              <el-input v-model="form_HisKPI.实际产量" readonly size="mini" style="width:150px;margin-left:47px;"/>
              <span style="margin: 0 10px">应到人数</span>
              <el-input v-model="form_HisKPI.应到人数" readonly size="mini" style="width:150px;margin-left:47px"/>
              <span style="margin: 0 10px">实到人数</span>
              <el-input v-model="form_HisKPI.实到人数" readonly size="mini" style="width:150px;"/>
            </div>
            <div style="margin: 30px 100px">
              <span style="margin: 0 10px">不合格数</span>
              <el-input v-model="form_HisKPI.不合格数" readonly size="mini" style="margin-left:47px; width:150px"/>
              <span style="margin: 0 10px">合格数</span>
              <el-input v-model="form_HisKPI.合格数" readonly size="mini" style="width:150px;margin-left:65px;"/>
            </div>
            <div style="margin: 30px 100px">
              <span style="margin: 0 10px">线体节拍（秒）</span>
              <el-input v-model="form_HisKPI.线体节拍1" readonly size="mini" style="width:150px"/>
              <span style="margin: 0 10px">线体节拍（分）</span>
              <el-input v-model="form_HisKPI.线体节拍2" readonly size="mini" style="width:150px"/>
              <span style="margin: 0 10px">基准时间（秒）</span>
              <el-input v-model="form_HisKPI.基准时间1" readonly size="mini" style="width:150px"/>
              <span style="margin: 0 10px">基准时间（分）</span>
              <el-input v-model="form_HisKPI.基准时间2" readonly size="mini" style="width:150px"/>
              <span style="margin: 0 10px">出勤时间</span>
              <el-input v-model="form_HisKPI.出勤时间" readonly size="mini" style="width:150px"/>
            </div>

          </dv-border-box-12>
<!--          <el-button type="primary" style="position: absolute;left: 45px;bottom:-3px" @click="routeJump('')">返回主页</el-button>-->
        </dv-border-box-12>
      </div>
    </div>
  </div>
</template>
<script>
import axios from 'axios'
import { getNowTime2 } from '@/utils/tool'

export default {
  data() {
    return {
      title: '报警信息表',
      json_fields: {
        'plc名称': 'plc名称',
        'plc地址': 'plc地址',
        '报警内容': '报警内容',
        '工位': '工位',
        '状态': '状态',
        '报警时间': '报警时间'
      },
      form_AddKPI: {
        计划产量: 0,
        理论产量: 0,
        实际产量: 0,
        应到人数: 0,
        实到人数: 0
      },
      beatBase: [
        {
          label: '甲班',
          value: '甲班'
        },
        {
          label: '乙班',
          value: '乙班'
        }
      ],
      form_HisKPI: {
        日期: getNowTime2(),
        班次: '甲班',
        计划产量: 0,
        理论产量: 0,
        实际产量: 0,
        应到人数: 0,
        实到人数: 0,
        不合格数: 0,
        合格数: 0,
        线体节拍1: 0,
        线体节拍2: 0,
        基准时间1: 0,
        基准时间2: 0,
        出勤时间: 0
      },
      form_beat1: {
        上班时间: ['2024-10-01 08:00:00', '2024-10-01 18:00:00'],
        休息时间1: ['2024-10-01 10:00:00', '2024-10-01 10:15:00'],
        休息时间2: ['2024-10-01 12:00:00', '2024-10-01 13:00:00'],
        休息时间3: ['2024-10-01 15:00:00', '2024-10-01 15:15:00'],
        休息时间4: ['2024-10-01 18:00:00', '2024-10-01 18:00:00'],
        班次: '甲班'
      },
      form_beat2: {
        上班时间: ['2024-10-01 08:00:00', '2024-10-01 18:00:00'],
        休息时间1: ['2024-10-01 10:00:00', '2024-10-01 10:15:00'],
        休息时间2: ['2024-10-01 12:00:00', '2024-10-01 13:00:00'],
        休息时间3: ['2024-10-01 15:00:00', '2024-10-01 15:15:00'],
        休息时间4: ['2024-10-01 18:00:00', '2024-10-01 18:00:00'],
        班次: '乙班'
      },
      dateTime: [],
      selectBeat: '甲班',
      opCode: '',
      opCodeS: [],
      plcName: '',
      plcNameS: [
        {
          label: '前悬',
          value: '前悬'
        },
        {
          label: '后悬',
          value: '后悬'
        }
      ],
      titlePng: '',
      titlePng1: '',
      timer: '',
      timer1: '',
      time: 'time',
      tableData: [],
      style: {
        width: '1920',
        height: '1080',
        transform: 'scaleY(1) scaleX(1) translate(-50%, -50%)'
      }
    }
  },

  created() {
    this.dateTime = [getNowTime2(), getNowTime2()]
  },
  mounted() {
    const that = this
    // 定时器部分
    this.timer = setInterval(() => {
      this.time = this.getNowTime()
    }, 1000)
    // 页面自适应大小部分
    that.setScale()
    window.addEventListener('resize', () => {
      that.setScale()
    })
    this.getLogo()
  },
  beforeDestroy() {

  },
  methods: {
    changeRadio(value) {
      this.form_HisKPI.班次 = value
    },
    getHisBeat2() {
      var param = []
      param[0] = ['日期', this.form_HisKPI.日期]
      param[1] = ['班次', this.form_HisKPI.班次]
      const data = this.CreateData1('11', 'TV_KPI管理_历史KPI查询_HX', param)
      this.ExecDatabase(data).then((response) => {
        if (response.data.length > 0) {
          this.form_HisKPI.计划产量 = response.data[0]['计划产量']
          this.form_HisKPI.理论产量 = response.data[0]['理论产量']
          this.form_HisKPI.实际产量 = response.data[0]['实际产量']
          this.form_HisKPI.应到人数 = response.data[0]['应到人数']
          this.form_HisKPI.实到人数 = response.data[0]['实到人数']
          this.form_HisKPI.不合格数 = response.data[0]['不合格数']
          this.form_HisKPI.合格数 = response.data[0]['合格数']
          this.form_HisKPI.线体节拍1 = response.data[0]['线体节拍1']
          this.form_HisKPI.线体节拍2 = response.data[0]['线体节拍2']
          this.form_HisKPI.基准时间1 = response.data[0]['基准时间1']
          this.form_HisKPI.基准时间2 = response.data[0]['基准时间2']
          this.form_HisKPI.出勤时间 = response.data[0]['出勤时间']
        }
      })
    },
    saveTodayKpi() {
      var param = []
      param[0] = ['计划产量', this.form_AddKPI.计划产量]
      param[1] = ['理论产量', this.form_AddKPI.理论产量]
      param[2] = ['实际产量', this.form_AddKPI.实际产量]
      param[3] = ['应到人数', this.form_AddKPI.应到人数]
      param[4] = ['实到人数', this.form_AddKPI.实到人数]
      param[5] = ['班次', this.selectBeat]
      const data = this.CreateData1('12', 'TV_KPI管理_今日KPI修改_HX', param)
      this.ExecDatabase(data).then((response) => {
        if (response.data[0].result === '1') {
          this.$message.success('修改成功！')
        } else {
          this.$message.error('修改失败')
        }
      })
    },
    saveBeat1() {
      var param = []
      param[0] = ['开班时间', this.form_beat1.上班时间[0]]
      param[1] = ['下班时间', this.form_beat1.上班时间[1]]
      param[2] = ['休息开始时间1', this.form_beat1.休息时间1[0]]
      param[3] = ['休息开始时间2', this.form_beat1.休息时间2[0]]
      param[4] = ['休息开始时间3', this.form_beat1.休息时间3[0]]
      param[5] = ['休息开始时间4', this.form_beat1.休息时间4[0]]
      param[6] = ['休息结束时间1', this.form_beat1.休息时间1[1]]
      param[7] = ['休息结束时间2', this.form_beat1.休息时间2[1]]
      param[8] = ['休息结束时间3', this.form_beat1.休息时间3[1]]
      param[9] = ['休息结束时间4', this.form_beat1.休息时间4[1]]
      param[10] = ['班次', this.form_beat1.班次]
      const data = this.CreateData1('12', 'TV_KPI管理_班次时间调整_HX', param)
      this.ExecDatabase(data).then((response) => {
        if (response.data[0].result === '1') {
          this.$message.success('修改成功！')
        } else {
          this.$message.error('修改失败')
        }
      })
    },
    saveBeat2() {
      var param = []
      param[0] = ['开班时间', this.form_beat2.上班时间[0]]
      param[1] = ['下班时间', this.form_beat2.上班时间[1]]
      param[2] = ['休息开始时间1', this.form_beat2.休息时间1[0]]
      param[3] = ['休息开始时间2', this.form_beat2.休息时间2[0]]
      param[4] = ['休息开始时间3', this.form_beat2.休息时间3[0]]
      param[5] = ['休息开始时间4', this.form_beat2.休息时间4[0]]
      param[6] = ['休息结束时间1', this.form_beat2.休息时间1[1]]
      param[7] = ['休息结束时间2', this.form_beat2.休息时间2[1]]
      param[8] = ['休息结束时间3', this.form_beat2.休息时间3[1]]
      param[9] = ['休息结束时间4', this.form_beat2.休息时间4[1]]
      param[10] = ['班次', this.form_beat2.班次]
      const data = this.CreateData1('12', 'TV_KPI管理_班次时间调整_HX', param)
      this.ExecDatabase(data).then((response) => {
        if (response.data[0].result === '1') {
          this.$message.success('修改成功！')
        } else {
          this.$message.error('修改失败')
        }
      })
    },
    exportExcel() {
      if (this.tableData.length === 0) {
        this.$message.error('暂无数据导出！')
      }
    },
    changeDevice(value) {
      if (value === '前悬') {
        this.opCodeS = window.dt_Config.opCodeQX
      } else if (value === '后悬') {
        this.opCodeS = window.dt_Config.opCodeHX
      } else {
        this.opCodeS = []
      }
    },
    zeroFill(i) {
      if (i >= 0 && i <= 9) {
        return '0' + i
      } else {
        return i
      }
    },
    getNowTime() {
      const date = new Date()
      const month = this.zeroFill(date.getMonth() + 1)
      const day = this.zeroFill(date.getDate())
      const hour = this.zeroFill(date.getHours())
      const minute = this.zeroFill(date.getMinutes())
      const second = this.zeroFill(date.getSeconds())
      return (
        date.getFullYear() +
          '-' +
          month +
          '-' +
          day +
          ' ' +
          hour +
          ':' +
          minute +
          ':' +
          second
      )
    },
    getScale() {
      const w = window.innerWidth / this.style.width
      const h = window.innerHeight / this.style.height
      return { x: w, y: h }
    },
    setScale() {
      const scale = this.getScale()
      this.style.transform = 'scaleY(' + scale.y + ') scaleX(' + scale.x + ') translate(-50%, -50%)'
    },
    getMainPlanCountInfoData() {
      var param = []
      param[0] = ['开始日期', this.dateTime[0]]
      param[1] = ['结束日期', this.dateTime[1]]
      param[2] = ['plc名称', this.plcName]
      param[3] = ['工位', this.opCode]
      const data = this.CreateData1('11', 'TV_报警信息_查询_导出_HX', param)
      this.ExecDatabase(data).then((res) => {
        this.tableData = res.data
      })
    },

    routeJump(val, state) {
      if (val.indexOf('/') !== -1) {
        val = val.substring(1)
      }
      this.$router.push({
        path: '/'
      })
      this.$router.go(0)
    },
    getLogo() {
      axios.get('../../logo.png', {
        responseType: 'arraybuffer'
      }).then(res => {
        this.titlePng = 'data:image/jpeg;base64,' + btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), ''))
      })
      axios.get('../../十字图片.jpg', {
        responseType: 'arraybuffer'
      }).then(res => {
        this.titlePng1 = 'data:image/jpeg;base64,' + btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), ''))
      })
    }
  },
  computed: {},
  watch: {},
  props: {},
  directives: {
    scroll: {
      bind(
        el,
        {
          value: { delay, speed } = {
            delay: 0,
            speed: 50
          }
        }
      ) {
        //  delay 延迟  //speed滚动速度
        // 数据少不滚动
        // 无缝滚动
        let scrollInterval
        setTimeout(() => {
          scrollInterval = setInterval(goScroll, speed)
        }, delay)
        el.addEventListener('mouseenter', () => {
          clearInterval(scrollInterval)
        })
        el.addEventListener('mouseleave', () => {
          scrollInterval = setInterval(goScroll, speed)
        })

        function goScroll() {
          const scrollTotalHeight = JSON.parse(JSON.stringify(el.scrollTop))
          el.scrollTop++
          if (scrollTotalHeight === el.scrollTop) {
            el.scrollTop = 0
          }
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  overflow-y: hidden;
  z-index: 100;
  transform-origin: 0 0;
  position: fixed;
  left: 50%;
  top: 50%;
  background-color: #000d3a;
  color: white;

  .content {
    width: 100%;
    height: 6%;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 5px 0 20px 0;
    border-bottom: 2px solid #3d4a61;
    .c-left {
      width: 25%;
      background-color: #000d3a;
      .left-header {
        background-color: #000d3a;
        display: flex;
        align-items: center;
        margin-top: 20px;
        img {
          margin-left: 50px;
          height: 50px;
        }
        span {
          font-size: 3.5rem;
          margin-left: 1rem;
        }
      }
    }

    .c-center {
      width: 50%;
      background-color: #000d3a;
      box-sizing: border-box;
      .center-header {
        background-color: #000d3a;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 50px;
        font-weight: bold;
        letter-spacing: 15px;
      }
    }

    .c-right {
      width: 25%;
      background-color: #000d3a;
      .right-header {
        background-color: #000d3a;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 4rem;
      }
    }
  }
}
.right {
  width: 100%;
  height: 100%;
  background-color: #000d3a;
  padding-left: 1.5%;
  box-sizing: border-box;
  .right-head {
    height: 8%;
    display: flex;
    justify-content: flex-end;
    span {
      margin: 36px 25px 25px 25px;
      font-weight: 700;
      font-size: 35px;
      color: #fff;
    }
  }

  .main {
    height: 90%;
    .top {
      width: 100%;
      height: 35%;

      .cook-list {
        width: 100%;
        height: 80%;
        display: flex;
        flex-wrap: wrap;
      }
      .spot-check {
        span {
          font-size: 1rem;
        }
      }
    }

    .center {
      width: 100%;
      height: 35%;

      .center-main {
        width: 100%;
        height: 90%;
        .center-left {
          height: 100%;
          .left-top {
            height: 50%;
            display: flex;

            div {
              width: 33.33%;
              height: 100%;
            }
          }
          .left-bottom {
            height: 50%;
          }
        }

        .center-right {
          width: 40%;
          height: 100%;
          > span {
            color: #fff;
          }

          ::v-deep .row-item {
            .ceil {
              padding: 0;
            }
          }
        }
      }
      .year-plan {
        span {
          font-size: 1rem;
        }
      }
    }

    .bottom {
      width: 100%;
      height: 33%;
      .bottom-top {
        display: flex;
        width: 100%;
        height: 45%;
        .andong-left {
          width: 60%;
          height: 100%;
          > span {
            color: #fff;
          }

          .analyse {
            width: 100%;
            height: 90%;
          }
        }

        .andong-right {
          width: 40%;
          height: 100%;
          > span {
            color: #fff;
          }

          .call {
            width: 100%;
            height: 90%;
          }
        }
      }
      .bottom-bottom {
        width: 100%;
        height: 44.5%;

        ::v-deep .header-item {
          font-size: 6px;
          padding: 0;
        }
        ::v-deep .row-item {
          font-size: 4px;
          padding: 0;
          .ceil {
            padding: 0;
          }
        }
      }
    }
  }
}
.content_main {
  .content_main_calendar {
    margin: 20px 20px;
    .items {
      height: 940px;
      padding: 1rem;
      box-sizing: border-box;
      .item-head {
        height: 10rem;
        display: grid;
        grid-template-columns: repeat(3, 33.3%);
        grid-template-rows: repeat(2, 50%);
        justify-items: center;
        align-content: center;
        box-sizing: border-box;
        padding-bottom: 1rem;

        background: linear-gradient(90deg, #043079 50%, transparent 0)
        repeat-x,
        linear-gradient(90deg, #043079 50%, transparent 0) repeat-x,
        linear-gradient(0deg, #043079 50%, transparent 0) repeat-y,
        linear-gradient(0deg, #043079 50%, transparent 0) repeat-y;
        background-size: 0px 10px, 20px 10px, 10px 0px, 10px 0px;
        background-position: 0 0, 0 100%, 0 0, 100% 0;

        animation: linearGradientMove 0.3s infinite linear;
      }
      .opStatus_all {
        background-color: #21ffff;
        border-radius: 10px;
        font-size:20px;
        border: 1px solid #409eff;
        width: 260px ;
        height: 270px;
        margin-left: 45px;
        margin-bottom: 10px;
      }
      .opStatus_single {
        display: flex;
        justify-content: flex-start;
        margin: 10px 0 10px 10px;
      }
      .opStatus_single_value {
        width: 100px;
        background-color: #aaaaaa;
        text-align: left;
        padding: 0 3px;
        color: #000d3a;
        border-radius: 3px;
      }
      @keyframes linearGradientMove {
        100% {
          background-position: -20px 0, 20px 100%, 0 20px, 100% -20px;
        }
      }

      .item-content {
        box-sizing: border-box;
        margin-top: 50px;
        box-sizing: border-box;

        .bg {
          width: 100%;
          height: 100%;
          background-size: 100% 100%;
        }

        .btns {
          position: absolute;
          margin-left: 1rem;
          z-index: 999;

          div {
            border: 2px solid #244d71;
            background-color: #000d3a;
            color: #ffffff;
            padding: 0.5rem 2rem;
            margin: 0.5rem 0;
            font-size: 1.2rem;
          }
        }
      }

      .item-head > div {
        display: flex;
        align-items: center;
        width: 15rem;

        img {
          height: 4.5rem;
          width: 4.5rem;
          object-fit: cover;
        }

        .data {
          display: flex;
          flex-direction: column;

          .data-value {
            font-size: 1.5rem;
            font-weight: bold;
          }
        }
      }
    }
  }
}

::v-deep .el-table,
.el-table__expanded-cell {
  background-color: transparent !important;
}
::v-deep .el-table td, .el-table th.is-leaf {
  border: 1px solid #7b8eb4;
  font-size: 16px;
}
::v-deep.el-table tbody tr:hover > td {
  background-color: transparent !important
}
::v-deep .el-table tr {
  background-color: transparent !important;
}
::v-deep .el-table--enable-row-transition .el-table__body td,
::v-deep .el-table .cell {
  color: rgb(255, 255, 255) !important;
}
::v-deep .el-table td, .el-table th {
  padding: 8px 0 !important;
}
</style>
