<template>
  <div class="chart-container">
    <div class="filter">
      <div class="startTime">
        <span class="timeText">起始时间</span>
        <el-date-picker
          v-model="startTime"
          :clearable="false"
          type="date"
          value-format="timestamp"
          placeholder="选择日期"
        />
      </div>
      <div class="endTime">
        <span class="timeText">截止时间</span>
        <el-date-picker
          v-model="endTime"
          :clearable="false"
          type="date"
          value-format="timestamp"
          placeholder="选择日期"
        />
      </div>
      <div>
        <span class="timeText">设备选择</span>
        <el-select v-model="equipmentId" placeholder="请选择">
          <el-option
            v-for="item in equipments"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </div>
      <div class="timeQuery">
        <el-button :loading="loading" size="small" @click="get">查询</el-button>
      </div>
<!--      <div class="timeQuery">-->
<!--        <el-button size="small" :loading="loading" @click="dataShow">数据显示设置</el-button>-->
<!--      </div>-->
      <div class="timeQuery">
        <el-button :loading="loading" size="small" @click="exportDataEvent">导出</el-button>
      </div>
      <div class="timeQuery">
        <el-button :loading="loading" size="small" @click="prValue('click')" v-show="this.show">Pr值</el-button>
      </div>
<!--      <div class="timeQuery" v-show="bShow" style="margin-left: 20%">-->
<!--        日内总辐射平均：-->
<!--        <el-switch-->
<!--        v-model="switchValue"-->
<!--        @change="showavg"-->
<!--        active-color="#13ce66"-->
<!--        inactive-color="#ff4949"-->
<!--        active-text = "开启"-->
<!--        >-->
<!--      </el-switch>-->
<!--      </div>-->
    </div>
    <div class="content">

      <div class="tableContent">
        <!--        <span class="demonstration">默认 Hover 指示器触发</span>-->
        <el-carousel :height="autoH" trigger="click" :autoplay="false" direction="horizontal" indicator-position="">
          <el-carousel-item v-for="item in itemDatas" :key="item.index" :label="item.type">
            <vxe-grid
              ref="xTable"
              class="gridTable"
              border
              stripe
              export-config
              :auto-resize="true"
              highlight-hover-row
              :header-row-style="styleStr"
              max-height="80%"
              :cell-style="styleTableStr"
              align="center"
              :data="item.tableData"
              :columns="item.tableColumn"
              show-footer
              :footer-method="footerMethod"
              :footer-row-style="{background:'#014038',color:'white'}"
            />
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
    <el-dialog
      title="选择展示数据类型"
      :visible.sync="dialogVisible"
      :before-close="this.cancelDisplay"
      width="50%"
    >
      <div class="drag-box-item">
        <div class="item-title">隐藏</div>

        <draggable class="list-group" :list="listh" group="people" @change="log">
          <transition-group id="done" tag="div" class="item-ul">
            <div
              v-for="(element) in listh"
              :key="element.value"
              class="drag-list"
            ><!--class="drag-list"-->
              {{ element.key }}
            </div>
          </transition-group>
        </draggable>

      </div>
      <div class="drag-box-item">
        <div class="item-title">展示</div>

        <draggable class="list-group" :list="lists" group="people">
          <transition-group id="wdtodo" tag="div" class="item-ul">
            <div
              v-for="(element, index) in lists"
              :key="element.value"
              class="drag-list"
            >
              {{ element.key }}
            </div>
          </transition-group>
        </draggable>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button style="color: #1f2d3d" @click="this.cancelDisplay">取 消</el-button>
        <el-button type="primary" style="color: #1f2d3d" @click="this.changeDisplay">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      :visible.sync="dialogVisible1"
      :before-close="this.close"
      width="50%"
    >
      <div>
        <el-button :loading="loading" size="small" @click="exportDataEventPrValue">导出</el-button>
      </div>
      <div class="tableContentPrValue">
        <el-carousel :height="autoH" trigger="click" :autoplay="false" direction="horizontal" indicator-position=""
                     style="height: 700px ">
          <el-carousel-item v-for="item in itemPrValue" :key="item.index" :label="item.type" style="height: 850px">
            <vxe-grid
              ref="xTable"
              class="gridTablePrValue"
              border
              stripe
              export-config
              :auto-resize="false"
              highlight-hover-row
              :header-row-style="styleStr"
              max-height="80%"
              :cell-style="styleTableStr"
              align="center"
              :data="item.tableDataPrValue"
              :columns="item.tableColumnPrValue"
            />
          </el-carousel-item>
        </el-carousel>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" style="color: #1f2d3d" @click="this.close" size="small">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
export default {
  name: 'InverterTable',
  components: { draggable },
  data() {
    return {
      styleStr:{},
      styleTableStr:{},
      clientWidth: document.body.clientWidth,
      footerData: {},
      autoH: '',
      startTime: new Date(new Date().toLocaleDateString()).getTime(),
      endTime: new Date(new Date().toLocaleDateString()).getTime() + 60 * 60 * 24 * 1000 - 1,
      total: 0,
      equipmentId: '',
      pageSize: 10,
      currentPage: 1,
      equipments: '',
      dialogVisible: false,
      dialogVisible1: false,
      show: '',
      loading: true,
      electricField: [],
      hidden: [],
      lists: [],
      listh: [],
      typelist: [],
      test: '',
      displayConfig: {
        id: '',
        displayCode: 'environmentalData',
        showCode: '',
        hiddenCode: ''
      },
      itemDatas: [{
        type: '日统计',
        tableColumn: [],
        tableData: []
      },
        {
          type: '月统计',
          tableColumn: [],
          tableData: []
        },
        {
          type: '年统计',
          tableColumn: [],
          tableData: []
        }
      ],
      itemPrValue: [{
        type: '日统计',
        tableColumnPrValue: [
          {field: 'time', title: '时间'},
          {field: 'capacity', title: '容量(MW)'},
          {field: 'hourDA', title: '日照小时数(h)'},
          {field: 'ultraShortTermAccuracy', title: '系统效率'},
          {field: 'theoreticalPowerGeneration', title: '理论发电量(MW)'},
          {field: 'actualPowerGeneration', title: '实际发电量(MW)'},
          {field: 'prValue', title: 'pr值(%)'},
        ],
        tableDataPrValue: []
      },
        {
          type: '月统计',
          tableColumnPrValue: [
            {field: 'time', title: '时间'},
            {field: 'capacity', title: '容量(MW)'},
            {field: 'hourDA', title: '日照小时数(h)'},
            {field: 'ultraShortTermAccuracy', title: '系统效率'},
            {field: 'theoreticalPowerGeneration', title: '理论发电量(MW)'},
            {field: 'actualPowerGeneration', title: '实际发电量(MW)'},
            {field: 'prValue', title: 'pr值(%)'},
          ],
          tableDataPrValue: [],
        },
      ],
      bShow: false,
      avgWEATHERSTATIONglobalR: 0,
      switchValue: false
    }
  },
  watch: {
    clientWidth(newVal, oldVal) {
      this.autoHeight()
    }
  },
  created() {
    document.body.ondrop = function(event) {
      event.preventDefault()
      event.stopPropagation()
    }
    if(sessionStorage.getItem('styleSwitch') === 'blue'){
      this.styleStr = {background:'black',color:'white',border:'white'}
      this.styleTableStr = {background:'black',color:'white'}
    }
    this.autoHeight()
    this.prValue()
  },
  mounted() {
    const that = this
    window.onresize = () => {
      return (() => {
        window.clientWidth = document.body.clientWidth
        that.clientWidth = window.clientWidth
      })()
    }
    this.getElectricField()
    this.getEqAttribute()
  },
  methods: {
    getElectricField() {
      this.$axios.get('/electricField').then((res) => {
        this.electricField = res.data
        this.electricField.electricFieldTypeEnum = 'E1'
        this.getEquipments(this.electricField.electricFieldTypeEnum)
      }).catch((error) => {
        this.$message.error('查询场站信息出错' + error)
      })
    },
    getEquipments(eType) {
      var url = '/weatherStationInfos'
      this.displayConfig.displayCode = 'weatherStationEnvironmental'
      this.$axios.get(url).then((res) => {
        this.equipments = res.data
        if (res.data != null && res.data.length > 0) {
          this.equipmentId = this.equipments[0].id
          this.getEqAttributeById()
          this.get()
        } else {
          this.$message.warning('设备信息未维护')
        }
      }).catch((error) => {
        this.$message.error('查询设备信息出错' + error)
      })
    },
    get() {
      this.loading = true
      if (this.endTime < this.startTime) {
        this.$message.error('开始时间不能小于结束时间')
        this.loading = false
        return
      }
      this.$axios.get('environmentalData/findEnvironmentalData/' + this.startTime + '/' + this.endTime + '/' + this.equipmentId).then(res => {
        if (res.data.tableColumn.length > 0) {
          const tableColumn = res.data.tableColumn
          this.footerData = res.data.footerData
          this.itemDatas[0].tableColumn = [{ field: 'times', title: '时间', width: 95 }]
          this.itemDatas[1].tableColumn = [{ field: 'times', title: '时间', width: 95 }]
          this.itemDatas[2].tableColumn = [{ field: 'times', title: '时间', width: 95 }]
          for (let i = 0; i < tableColumn.length; i++) {
            if(tableColumn[i].title == '总辐射日累计'||tableColumn[i].title == '直辐射日累计'||tableColumn[i].title == '散射辐射日累计'||tableColumn[i].title == '斜面辐射日累计'||tableColumn[i].title == '日照小时数'){
              const column = {
                title: tableColumn[i].title+"("+ tableColumn[i].unit+")",
                children: [
                  { field: tableColumn[i].sum, title: '统计值', width: '5%' },
                ]
              }
              const column1 = {
                title: tableColumn[i].title+"("+ tableColumn[i].unit+")",
                children: [
                  { field: tableColumn[i].sum, title: '统计值', width: '5%' },
                  { field: tableColumn[i].max, title: '极大值', width: '5%' },
                  { field: tableColumn[i].maxTime, title: '极大值时刻', width: 180, formatter: this.dateFormat },
                  { field: tableColumn[i].min, title: '最小值', width: '5%' },
                  { field: tableColumn[i].minTime, title: '最小值时刻', width: 180, formatter: this.dateFormat },
                  { field: tableColumn[i].avg, title: '平均值', width: '5%' },
                  { field: tableColumn[i].maxAvgValue, title: '最大值', width: '5%' },
                ]
              }
              this.itemDatas[0].tableColumn.push(column)
              this.itemDatas[1].tableColumn.push(column1)
              this.itemDatas[2].tableColumn.push(column1)
            }else if(tableColumn[i].title == '日受阻电量'||tableColumn[i].title == '日站内受阻电量'||tableColumn[i].title == '日站外受阻电量') {
              const column = {
                title: tableColumn[i].title+"("+ tableColumn[i].unit+")",
                children: [
                  { field: tableColumn[i].sum, title: '统计值', width: '5%' },
                ]
              }
              const column1 = {
                title: tableColumn[i].title+"("+ tableColumn[i].unit+")",
                children: [
                  { field: tableColumn[i].sum, title: '统计值', width: '5%' },
                ]
              }
              this.itemDatas[0].tableColumn.push(column)
              this.itemDatas[1].tableColumn.push(column1)
              this.itemDatas[2].tableColumn.push(column1)
            }else{
              if(tableColumn[i].title == '总辐射'){
                this.bShow = true
              }
              const column = {
                title: tableColumn[i].title+"("+ tableColumn[i].unit+")",
                children: [
                  { field: tableColumn[i].max, title: '极大值', width: '5%' },
                  { field: tableColumn[i].maxTime, title: '极大值时刻', width: 180, formatter: this.dateFormat },
                  { field: tableColumn[i].min, title: '最小值', width: '5%' },
                  { field: tableColumn[i].minTime, title: '最小值时刻', width: 180, formatter: this.dateFormat },
                  { field: tableColumn[i].avg, title: '平均值', width: '5%' },
                  { field: tableColumn[i].maxAvgValue, title: '最大值', width: '5%' },
                ]
              }
              this.itemDatas[0].tableColumn.push(column)
              this.itemDatas[1].tableColumn.push(column)
              this.itemDatas[2].tableColumn.push(column)
            }

            this.itemDatas[0].tableData = res.data.dayList
            this.itemDatas[1].tableData = res.data.monthList
            this.itemDatas[2].tableData = res.data.yearList

            // this.itemDatas[1].tableData = res.data.monthList
            // this.itemDatas[2].tableData = res.data.yearList
          }
        } else {
          this.itemDatas[0].tableColumn = []
          this.itemDatas[1].tableColumn = []
          this.itemDatas[2].tableColumn = []
        }
        if(this.switchValue){
          this.showavg()
        }
        this.loading = false
        // console.log(this.itemDatas)
      })
    },
    prValue(click) {
      this.$axios.get('prValue/findPrValueData/' + this.startTime + '/' + this.endTime).then(res => {
        if (res.data.displayPrValue == 1) {
          this.show = true
          this.loading = true
          this.dialogVisible1 = click ? true : false
          if (this.endTime < this.startTime) {
            this.$message.error('开始时间不能小于结束时间')
            this.loading = false
            return
          }
          this.itemPrValue[0].tableDataPrValue = res.data.dayList
          this.itemPrValue[1].tableDataPrValue = res.data.monthList
        } else {
          this.show = false
          this.loading = false
          this.dialogVisible1 = false
        }
        this.loading = false
      })
    },
    getEqAttribute() {
      this.$axios.get('environmentalData/findEnvironmentalData').then((res) => {
        this.hidden = res.data
      }).catch((error) => {
        this.$message.error('查询数据类型出错' + error)
      })
    },
    initDisplay() {
      this.listh = []
      this.lists = []
      var typelist = []
      this.lists = this.typelist
      for (var k = 0; k < this.lists.length; k++) {
        typelist.push(this.lists[k].value)
      }
      // for (var i = 0; i < this.lists.length; i++) {
      //   for (var j = 0; j < this.hidden.length; j++) {
      //     if (this.lists[i].value !== this.hidden[j].value) {
      //       if (typelist.indexOf(this.hidden[j].value) == -1) {
      //         typelist.push(this.hidden[j].value)
      //         this.lists.push(this.hidden[j])
      //       }
      //     }
      //   }
      // }

      this.$nextTick(function() {
        this.changeDisplay()
      })
    },
    getDisplay() {
      this.$axios.get('/displayConfig/' + this.displayConfig.displayCode).then((res) => {
        if (res.data == null || res.data.code == 0) {
          this.initDisplay()
        } else {
          this.lists = []
          this.listh = []
          this.displayConfig = res.data
          var showlist = this.displayConfig.showCode.split(',')
          var hiddenlist = this.displayConfig.hiddenCode.split(',')
          for (var i = 0; i < showlist.length; i++) {
            for (var j = 0; j < this.hidden.length; j++) {
              if (this.hidden[j].value === showlist[i]) {
                this.lists.push(this.hidden[j])
              }
            }
          }
          for (var i = 0; i < hiddenlist.length; i++) {
            for (var j = 0; j < this.hidden.length; j++) {
              if (this.hidden[j].value === hiddenlist[i]) {
                this.listh.push(this.hidden[j])
              }
            }
          }
        }
      })
    },
    changeDisplay() {
      this.displayConfig.showCode = ''
      this.displayConfig.hiddenCode = ''
      for (var i = 0; i < this.listh.length; i++) {
        this.displayConfig.hiddenCode += this.listh[i].value + ','
      }
      for (var j = 0; j < this.lists.length; j++) {
        this.displayConfig.showCode += this.lists[j].value + ','
      }
      console.log(this.displayConfig)
      this.$axios.post('displayConfig/', this.displayConfig).then((res) => {
        this.displayConfig = res.data
        this.$message.success('展示设置成功')
        this.get()
        this.dialogVisible = false
      }).catch((error) => {
        this.$message.error('展示设置出错' + error)
      })
    },
    getEqAttributeById() {
      this.$axios.get('environmentalData/findEnvironmentalData/' + this.equipmentId).then((res) => {
        var typelist = []
        for (var i = 0; i < res.data.length; i++) {
          typelist.push({
            key: res.data[i].explanation,
            value:  res.data[i].fieldName
          })
        }
        this.typelist = typelist
        this.getDisplay()
      })
    },
    exportDataEvent() {
      this.loading = true
      const params = new URLSearchParams()
      params.append('startTime', this.startTime)
      params.append('endTime', this.endTime)
      params.append('eqId', this.equipmentId)
      this.$axios.post('/environmentalData/export', params, {
        responseType: 'blob'// 用于解决中文乱码
      }).then((response) => {
        this.loading = false
      })

      // this.$refs.xTable.openExport()

    },
    exportDataEventPrValue() {
      this.loading = true
      const params = new URLSearchParams()
      params.append('startTime', this.startTime)
      params.append('endTime', this.endTime)
      this.$axios.post('prValue/export', params, {
        responseType: 'blob'// 用于解决中文乱码
      }).then((response) => {
        this.loading = false
      })

      // this.$refs.xTable.openExport()

    },
    showavg() {
      if(this.switchValue){
        var list = this.itemDatas[0].tableData
        var avg = list[list.length-1].avgWEATHERSTATIONglobalR
        this.avgWEATHERSTATIONglobalR = avg
        this.$axios.get('/dashboard/getServerTime').then(res => {
          var today = new Date(res.data)
          var sDate = new Date(today.toLocaleDateString()).getTime()

          var time = today.getTime() - sDate
          var sk = time/60000
          var result = sk*avg/1440

          this.itemDatas[0].tableData[list.length-1].avgWEATHERSTATIONglobalR = Math.round(result*Math.pow(10,2))/Math.pow(10,2)

        })
      }else {
        this.itemDatas[0].tableData[this.itemDatas[0].tableData.length-1].avgWEATHERSTATIONglobalR = this.avgWEATHERSTATIONglobalR
      }


    },
    dataShow() {
      this.dialogVisible = true
      this.getEqAttributeById()
    },
    cancelDisplay() {
      this.lists = []
      this.listh = []
      this.dialogVisible = false
    },
    close() {
      this.dialogVisible1 = false
    },
    log: function(evt) {
      /* console.log(evt);*/
      /*     console.log(this.lists)
           console.log(this.listh)*/

      /*   this.changeDisplay()*/
    },
    footerMethod({ columns, data }) {
      const sums = []
      var footerData = this.footerData
      columns.forEach((column, columnIndex) => {
        if (columnIndex === 0) {
          sums.push('统计列极值')
        } else {
          sums.push(footerData[column.property])
        }
      })
      // 返回一个二维数组的表尾合计
      return [sums]
    },
    dateFormat({ cellValue, row, column }) {
      if (cellValue == undefined||cellValue == "") {
        return
      }
      // return this.$XEUtils.toDateString(cellValue, 'yyyy-MM-dd HH:mm:ss')
      const date = new Date(cellValue) // 时间戳为10位需*1000，时间戳为13位的话不需乘1000
      const Y = date.getFullYear() + '-'
      const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
      const D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + '    '
      const H = (date.getHours() < 10 ? '0' + (date.getHours()) : date.getHours()) + ':'
      const m = (date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes()) + ':'
      const s = (date.getSeconds() < 10 ? '0' + (date.getSeconds()) : date.getSeconds())
      return Y + M + D + H + m + s
    },
    handlePageChangeNo({ currentPage, pageSize }) {
      this.currentPageNo = currentPage
      this.pageSizeNo = pageSize
      this.querywtDataNo()
      this.startTime = this.queryStartTime
      this.endTime = this.queryEndTime
    },
    handlePageChangeAll({ currentPage, pageSize }) {
      this.currentPageAll = currentPage
      this.pageSizeAll = pageSize
      this.querywtDataAll()
      this.startTime = this.queryStartTime
      this.endTime = this.queryEndTime
    },
    autoHeight() {
      const _w =
        document.documentElement.clientWidth || document.body.clientWidth

      this.autoH = (_w * 200) / 450 - 100 + 'px'
    }
  }
}
</script>

<style scoped>
/*.chart-container{*/
/*position:relative;*/
/*width:100%;*/
/*height:calc(100vh - 50px);*/
/*}*/

/*.filter{*/
/*position:relative;*/
/*display:flex;*/
/*padding:20px 0 10px 15px;*/
/*font-size:12px;*/
/*line-height:11px;*/
/*color:white;*/
/*width: 100%;*/
/*background-color: transparent;*/
/*height: 10%;*/
/*}*/

/*input{*/
/*background:transparent;*/
/*border:none;*/
/*color:white;*/
/*}*/

/*.timeText{*/
/*opacity:0.69;*/
/*padding-right:7px;*/
/*font-size:14px;*/
/*}*/

/*.startTime{*/
/*display:inline-block;*/
/*}*/

/*.endTime{*/
/*display:inline-block;*/
/*padding-left:42px;*/
/*}*/

/*.timeQuery{*/
/*margin-left: 2%;*/
/*background:transparent;*/
/*}*/

/*.el-button{*/
/*background:transparent;*/
/*color:white;*/
/*}*/

/*.filter >>> input{*/
/*background:transparent;*/
/*border:none;*/
/*color:white;*/
/*}*/

/*.rtPageturning{*/
/*width: 100%;*/
/*height: 10%;*/
/*display: flex;*/
/*justify-content:space-between*/
/*}*/
/*.rtPageturning >>> button,*/
/*.rtPageturning >>> span,*/
/*.rtPageturning >>> input,*/
/*.rtPageturning >>> .vxe-pager--btn-wrapper li{*/
/*background-color: transparent !important;*/
/*color: #ffffff !important;*/
/*border: 1px solid #ffffff;*/
/*}*/
/*.rtPageturning >>> span{*/
/*border:none*/
/*}*/
/*.rtPageturning >>> .vxe-pager--wrapper .vxe-pager--btn-wrapper li:not(.disabled).is--active {*/
/*background-color: #9f9fa0 !important;*/
/*}*/

/*.tableContent{*/
/*width: 100%;*/
/*height:calc(80vh - 50px);*/
/*}*/
/*.tableContent >>> td{*/
/*border:1px solid #ffffff;*/
/*}*/
/*.content{*/
/*width: 100%;*/
/*background-color: transparent;*/
/*height: 90%;*/
/*padding-left: 5px;*/
/*padding-right: 5px;*/
/*}*/
/*.content >>> .el-tabs__item{*/
/*color: white;*/
/*}*/
/*.content >>> .el-tabs__item.is-active {*/
/*color: #409EFF;*/
/*}*/

/*.content >>> .vxe-button.type--button.is--circle{*/
/*padding: 0 .5em;*/
/*min-width: 34px;*/
/*border-radius: 10%;*/
/*border: none;*/
/*background: transparent;*/
/*color: white;*/
/*}*/
/*.el-carousel__item h3 {*/
/*color: #475669;*/
/*font-size: 14px;*/
/*opacity: 0.75;*/
/*line-height: 150px;*/
/*margin: 0;*/
/*}*/

/*.el-carousel__item:nth-child(2n) {*/
/*background-color: black;*/
/*}*/

/*.el-carousel__item:nth-child(2n+1) {*/
/*background-color: black;*/
/*}*/
.item-title {
  padding: 8px 8px 8px 12px;
  font-size: 14px;
  line-height: 1.5;
  color: #24292e;
  font-weight: 600;
}

.drag-box-item {
  /*margin:10px;*/
  flex: 1;
  height: 250px;
  max-width: 100%;
  min-width: 100%;
  background-color: #eff1f5;
  margin-right: 16px;
  border-radius: 6px;
  border: 1px #e1e4e8 solid;
}
.item-ul {
  padding: 0 8px 8px;
  height: 200px;
  overflow-y: scroll;
}

.item-ul::-webkit-scrollbar {
  width: 0;
}
.drag-list {
  width: 20%;
  float: left;
  border: 1px #e1e4e8 solid;
  padding: 10px;
  text-align: center;
  list-style: none;
  background-color: #fff;
  border-radius: 6px;
  cursor: pointer;
  -webkit-transition: border .3s ease-in;
  transition: border .3s ease-in;
}

.drag-list:hover {
  border: 1px solid #20a0ff;
}
.no-allow{
  width: 20%;
  float: left;
  border: 1px #e1e4e8 solid;
  padding: 10px;
  list-style: none;
  text-align: center;
  background-color: #d0dae5;
  border-radius: 6px;
  cursor:not-allowed;
  -webkit-transition: border .3s ease-in;
  transition: border .3s ease-in;
}
.grid >> tr{
  border: 1px solid;
}
.el-carousel__indicators .el-carousel__indicators--horizontal .el-carousel__indicators--labels{
  text-align: right;
}
</style>
<style>
.gridTable{
  margin-top: 3%;
  z-index: 1000;
}
.gridTablePrValue {
  margin-top: 3%;
  z-index: 500;
  height: 300px;
}
.tableContent .el-carousel__indicators--labels{
  left: 0;
  right: 0;
  height: 3%;
  -webkit-transform: none;
  transform: none;
  text-align: center;
  position: absolute;
  top: 0px;
}
.tableContentPrValue .el-carousel__indicators--labels {
  left: 0;
  right: 0;
  height: 1%;
  -webkit-transform: none;
  transform: none;
  text-align: center;
  position: absolute;
  top: 0px;
}
</style>

