<template>
  <div class="chart-container">
    <div class="filter">
      <div class="startTime">
        <span class="timeText">起始时间</span>
        <el-date-picker
          v-model="startTime"
          :clearable="false"
          type="datetime"
          value-format="timestamp"
          placeholder="选择日期">
        </el-date-picker>
      </div>
      <div class="endTime">
        <span class="timeText">截止时间</span>
        <el-date-picker
          v-model="endTime"
          :clearable="false"
          type="datetime"
          value-format="timestamp"
          placeholder="选择日期">
        </el-date-picker>
      </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-option>
        </el-select>
      </div>
      <div>
        <span class="timeText">间隔时间</span>
        <el-select v-model="jgTime"   placeholder="请选择" @change="changeJgTime">
          <el-option
            v-for="item in jgTimes"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div class="timeQuery">
        <el-button  size="small" :loading="loading"  @click="dateQuery">查询</el-button>
      </div>
      <div class="toolbar" v-show="this.showToolBar"> <vxe-toolbar ref="fstToolBar" custom >
        <template v-slot:buttons>
          <vxe-button class="downloadButton" style="border:none;"  @click="exportDataEvent"><i class="vxe-icon--download" ></i></vxe-button>
        </template>
      </vxe-toolbar></div>
      <div class="toolbar" v-show="this.showToolBar"> <vxe-toolbar ref="nwpToolBar" custom></vxe-toolbar></div>


      <div class="timeQuery">
        <el-button  size="small" :loading="loading"  @click="dialogVisible = true">显示设置</el-button>
      </div>
      <div class="timeQuery">
        <el-button  size="small" :loading="loading"  @click="dialogVisiblePoint = true">点位设置</el-button>
      </div>
<!--      <div class="toolbar" v-show="this.showToolBar"> <vxe-toolbar ref="nwpToolBar" custom export></vxe-toolbar></div>-->
    </div>

    <el-dialog
      title="请选择点位"
      :visible.sync="dialogVisiblePoint"
      :before-close="this.cancelDisplayPoint"
      width="18%">
        <div class="inputNum">
          <span class="timeText">上报超短期：</span>
          <el-select v-model="cdqAgo"   placeholder="请选择">
            <el-option
              v-for="item in cdqOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="inputNum">
          <span class="timeText">上报短期：</span>
          <el-select v-model="dqAgo"   placeholder="请选择">
            <el-option
              v-for="item in dqOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="inputNum">
          <span class="timeText">nwp：</span>
          <el-select v-model="nwpAgo"   placeholder="请选择">
            <el-option
              v-for="item in nwpOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div>
      <span slot="footer" class="dialog-footer">
    <el-button @click="this.cancelDisplayPoint" style="color: #1f2d3d">取 消</el-button>
    <el-button type="primary" style="color: #1f2d3d" @click="this.changeDisplayPoint">确 定</el-button>
  </span>
    </el-dialog>


    <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, index) in listh"
            :key="element.value"
            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" @change="log">
          <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 @click="this.initShow" style="color: #3d1f25">初始化</el-button>
    <el-button @click="this.cancelDisplay" style="color: #1f2d3d">取 消</el-button>
    <el-button type="primary" style="color: #1f2d3d" @click="this.changeDisplay">确 定</el-button>
  </span>
    </el-dialog>

    <div class="content">
      <el-tabs type="card" v-model="activeName" @tab-click="Byresize">
        <el-tab-pane label="图表" name="first">
          <chart :drawData = this.drawData :resizeKey=this.resizeKey  />
        </el-tab-pane>
        <el-tab-pane label="表格" name="second">
          <div class="tableContent">
            <vxe-grid
            id="nwpTable"
            ref="nwpRef"
            border
            :loading="loading"
            export-config
            :custom-config="{storage: true, checkMethod: checkColumnMethod}"
            :auto-resize="true"
            highlight-hover-row
            :header-cell-style="styleStr"
            max-height="90%"
            :cell-style="styleTableStr"
            align="center"
            :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
            :columns="tableColumn"
            />
            <div class="rtPageturning">
              <vxe-pager
                background
                :loading="loading"
                :current-page="currentPage"
                :page-size="pageSize"
                :total="tableData.length"
                @page-change="handlePageChange"
                :layouts="['PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']">
              </vxe-pager>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
  import Chart from './charts'
  import resize from '../../../components/Charts/mixins/resize'
  import moment from "moment";
  import draggable from 'vuedraggable'
  export default {
    name: 'cq',
    components: { Chart,draggable},
    mixins: [resize],
    data(){
      return{
        styleStr:{},
        styleTableStr:{},
        selectTime:new Date(),
        columns:{},
        dqAgo:"1",
        cdqAgo:"1",
        nwpAgo:"1",
        chart: null,
        queryStartTime:'',
        queryEndTime:'',
        startTime:new Date(new Date().toLocaleDateString()).getTime(),
        endTime:new Date(new Date().toLocaleDateString()).getTime() + 60 * 60 * 24 * 1000-1,
        loading:true,
        drawLoading:true,
        tableLoading:true,
        resizeKey:1,
        activeName: 'first',
        drawData:{},
        tableData:[],
        total:0,
        sortOrder:'asc',
        pageSize: 10,
        currentPage: 1,
        showToolBar:false,
        dialogVisible: false,
        dialogVisiblePoint: false,
        equipments:"",
        equipmentId:"",
        electricField:{},
        displayCode:'comprehensiveContrast',
        displayConfig:{
          id:"",
          displayCode:"comprehensiveContrast",
          showCode:"",
          hiddenCode:""
        },
        displayPointConfig:{
          id:"",
          displayCode:"comprehensivePoint",
          showCode:"",
          hiddenCode:""
        },
        displayConfigJgTime:{
          id:"",
          displayCode:"timeInterval",
          showCode:"",
          hiddenCode:""
        },
        displayConfigPageSize:{
          id:"",
          displayCode:"pageSize",
          showCode:"",
          hiddenCode:""
        },
        listh: [],
        lists: [],
        listhquery: [],
        listsquery: [],
        tableColumn:[],
        dqOptions:[
          {label: "预测前一天",value:"1"},
          {label: "预测前两天",value:"2"},
          {label: "预测前三天",value:"3"}
        ],
        cdqOptions:[
          {label: "预测前第一点",value:"1"},
          {label: "预测前第二点",value:"2"},
          {label: "预测前第三点",value:"3"},
          {label: "预测前第四点",value:"4"},
          {label: "预测前第五点",value:"5"},
          {label: "预测前第六点",value:"6"},
          {label: "预测前第七点",value:"7"},
          {label: "预测前第八点",value:"8"},
          {label: "预测前第九点",value:"9"},
          {label: "预测前第十点",value:"10"},
          {label: "预测前第十一点",value:"11"},
          {label: "预测前第十二点",value:"12"},
          {label: "预测前第十三点",value:"13"},
          {label: "预测前第十四点",value:"14"},
          {label: "预测前第十五点",value:"15"},
          {label: "预测前第十六点",value:"16"},
        ],
        nwpOptions:[
          {label: "预测前一天",value:"1"},
          {label: "预测前两天",value:"2"},
          {label: "预测前三天",value:"3"}
        ],
        jgTime:3600000,
        jgTimes:[
          {label: "15分钟",value:900000},
          {label: "1小时",value:3600000}
        ]
      }
    },
    created () {
      if(sessionStorage.getItem('styleSwitch') === 'blue'){
        this.styleStr = {background:'black',color:'white',border:'white'}
        this.styleTableStr = {background:'black',color:'white'}
      }
      document.body.ondrop = function(event) {
        event.preventDefault();
        event.stopPropagation();
      };
      this.$nextTick(() => {
        // 手动将表格和工具栏进行关联
        this.$refs.nwpRef.connect(this.$refs.nwpToolBar)
      })
    },
    mounted() {
      this.getJgTimeAndPageSize()
      this.init()

    },
    methods:{
      initShow(){
        this.dialogVisible = false

        this.$XModal.confirm('您确定要初始化？').then(type => {

          if (type === 'confirm') {
            this.$axios.delete("displayConfig/deleteById/"+this.displayConfig.id).then(res =>{
              if(res.code == 0 ){
                this.$message.success("执行成功！")
                location.reload()
              }
            })
          }
        })
      },
      exportDataEvent() {
        this.loading = true
        this.$axios.get('comprehensiveContrastExport/'+this.startTime+'/'+this.endTime+'/'+this.equipmentId+'/'+this.electricField.electricFieldTypeEnum+'/'+this.dqAgo+'/'+this.cdqAgo+'/'+this.nwpAgo+'/'+this.jgTime, {
          responseType: 'blob'// 用于解决中文乱码
        }).then((response) => {
          this.loading = false
        }).catch((error) => {
          this.loading = false
          this.$message.error('导出失败' + error)
        })
      },
      init(){
        this.$axios.get("/comprehensiveContrast/getSpeedColumn").then(res =>{
          this.columns = res.data
        })
        this.queryStartTime = this.startTime
        this.queryEndTime = this.endTime
        this.loading = true
        this.getElectricField()
        this.getSelects()
        // this.getTable()

      },
      changeJgTime(){
        this.displayConfigJgTime.showCode = this.jgTime
        this.$axios.post('displayConfig/',this.displayConfigJgTime).then((res) => {
          this.displayConfigJgTime = res.data
          // this.$message.success('间隔时间设置成功' )
          this.dialogVisible = false
          this.getDraw(this.startTime,this.endTime)
        }).catch((error) => {
          this.$message.error('间隔时间设置出错' + error)
        })
      },
      changePageSize(pageSize){
        this.displayConfigPageSize.showCode = pageSize
        this.$axios.post('displayConfig/',this.displayConfigPageSize).then((res) => {
          this.displayConfigPageSize = res.data
          // this.$message.success('PageSize设置成功' )
          this.dialogVisible = false
        }).catch((error) => {
          this.$message.error('PageSize设置出错' + error)
        })
      },
      getJgTimeAndPageSize(){
        this.$axios.get('displayConfig/timeInterval').then((res) => {
          this.displayConfigJgTime = res.data
          this.jgTime = parseInt(this.displayConfigJgTime.showCode)
          // this.$message.success('间隔时间获取成功' )
          this.dialogVisible = false
        }).catch((error) => {
          this.$message.error('间隔时间获取出错' + error)
        })
        this.$axios.get('displayConfig/pageSize').then((res) => {
          this.displayConfigPageSize = res.data
          this.pageSize = parseInt(this.displayConfigPageSize.showCode)
          // this.$message.success('PageSize获取成功' )
          this.dialogVisible = false
        }).catch((error) => {
          this.$message.error('PageSize获取出错' + error)
        })
      },
      getSelects(){
        this.$axios.get("/comprehensiveContrast/getSelects").then(res =>{
          this.dqOptions = res.data.forecast
          this.cdqOptions = res.data.cdq
          this.nwpOptions = res.data.nwp
        }).catch((error) => {
          this.$message.error('PageSize获取出错' + error)
        })
        // this.getTable()

      },
      getElectricField(){
        this.$axios.get('/electricField/').then((res) => {
          this.electricField = res.data
          this.electricField.electricFieldTypeEnum = 'E2'
          this.getEquipments(this.electricField.electricFieldTypeEnum)
        }).catch((error) => {
          this.$message.error('查询场站信息出错' + error)
        })
      },
      getEquipments(eType){
        var url = '/weatherStationInfos'
        this.displayConfig.displayCode = "weatherStationInfos"
        //枚举类型E1光伏  E2风电
        if(eType == 'E2'){
          url = '/windTowerInfos'
          this.displayConfig.displayCode = 'windTowerInfos'
        }
        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.getDisplay()
          }else {
            this.$message.warning("设备信息未维护")
          }
        }).catch((error) => {
          this.$message.error('查询设备信息出错' + error)
        })
      },
      initDisplay(){
        // this.lists = []
        // this.listsquery = []
        if(this.electricField.electricFieldTypeEnum == 'E1'){
          this.lists.push({key:'总辐射(W/㎡)(W/㎡)',value:'globalR'})
          this.listh.push({key:'直辐射(W/㎡)',value:'directR'})
          this.listh.push({key:'散辐射(W/㎡)',value:'diffuseR'})
          this.listh.push({key:'斜辐射(W/㎡)',value:'obliqueR'})

          this.lists.push({key:'nwp辐射(W/㎡)',value:'swr'})
          this.listh.push({key:'nwp直辐射(W/㎡)',value:'directRadiation'})
          this.listh.push({key:'nwp散辐射(W/㎡)',value:'diffuseRadiation'})

          this.lists.push({key:'实际功率(MW)',value:'realValue'})
          // this.listh.push({key:'可用功率',value:'ableValue'})
          // this.listh.push({key:'理论功率',value:'theoryValue'})
          this.lists.push({key:'上报短期(MW)',value:'dq'})
          this.lists.push({key:'上报超短期(MW)',value:'cdq'})

          this.listsquery.push({key:'总辐射(W/㎡)',value:'globalR'})
          this.listhquery.push({key:'直辐射(W/㎡)',value:'directR'})
          this.listhquery.push({key:'散辐射(W/㎡)',value:'diffuseR'})
          this.listhquery.push({key:'斜辐射(W/㎡)',value:'obliqueR'})

          this.listsquery.push({key:'nwp辐射(W/㎡)',value:'swr'})
          this.listhquery.push({key:'nwp直辐射(W/㎡)',value:'directRadiation'})
          this.listhquery.push({key:'nwp散辐射(W/㎡)',value:'diffuseRadiation'})

          this.listsquery.push({key:'实际功率(MW)',value:'realValue'})
          // this.listhquery.push({key:'可用功率',value:'ableValue'})
          // this.listhquery.push({key:'理论功率',value:'theoryValue'})
          this.listsquery.push({key:'上报短期(MW)',value:'dq'})
          this.listsquery.push({key:'上报超短期(MW)',value:'cdq'})

          this.changeDisplay()
        }else{
          this.lists.push({key:'实际功率(MW)',value:'realValue'})
          // this.listh.push({key:'理论功率',value:'theoryValue'})
          this.lists.push({key:'上报短期(MW)',value:'dq'})
          this.lists.push({key:'上报超短期(MW)',value:'cdq'})

          this.lists.push({key:'10米风速(m/s)',value:'wsInst10'})
          this.listh.push({key:'30米风速(m/s)',value:'wsInst30'})
          this.listh.push({key:'50米风速(m/s)',value:'wsInst50'})
          this.listh.push({key:'60米风速(m/s)',value:'wsInst60'})
          this.listh.push({key:'70米风速(m/s)',value:'wsInst70'})
          this.listh.push({key:'80米风速(m/s)',value:'wsInst80'})
          this.listh.push({key:'90米风速(m/s)',value:'wsInst90'})
          this.listh.push({key:'100米风速(m/s)',value:'wsInst100'})
          this.listh.push({key:'110米风速(m/s)',value:'wsInst110'})
          this.listh.push({key:'120米风速(m/s)',value:'wsInst120'})

          this.lists.push({key:this.columns.ws10,value:'ws10'})
          this.listh.push({key:this.columns.ws30,value:'ws30'})
          this.listh.push({key:this.columns.ws50,value:'ws50'})
          this.listh.push({key:this.columns.ws70,value:'ws70'})
          this.listh.push({key:this.columns.ws80,value:'ws80'})
          this.listh.push({key:this.columns.ws90,value:'ws90'})
          this.listh.push({key:this.columns.ws100,value:'ws100'})
          this.listh.push({key:this.columns.ws170,value:'ws170'})

          // this.listhquery.push({key:'可用功率',value:'ableValue'})
          // this.listhquery.push({key:'理论功率',value:'theoryValue'})
          this.listsquery.push({key:'实际功率(MW)',value:'realValue'})
          this.listsquery.push({key:'上报短期(MW)',value:'dq'})
          this.listsquery.push({key:'上报超短期(MW)',value:'cdq'})

          this.listsquery.push({key:'10米风速(m/s)',value:'wsInst10'})
          this.listhquery.push({key:'30米风速(m/s)',value:'wsInst30'})
          this.listhquery.push({key:'50米风速(m/s)',value:'wsInst50'})
          this.listhquery.push({key:'60米风速(m/s)',value:'wsInst60'})
          this.listhquery.push({key:'70米风速(m/s)',value:'wsInst70'})
          this.listhquery.push({key:'80米风速(m/s)',value:'wsInst80'})
          this.listhquery.push({key:'90米风速(m/s)',value:'wsInst90'})
          this.listhquery.push({key:'100米风速(m/s)',value:'wsInst100'})
          this.listhquery.push({key:'110米风速(m/s)',value:'wsInst110'})
          this.listhquery.push({key:'120米风速(m/s)',value:'wsInst120'})

          this.listsquery.push({key:this.columns.ws10,value:'ws10'})
          this.listhquery.push({key:this.columns.ws30,value:'ws30'})
          this.listhquery.push({key:this.columns.ws50,value:'ws50'})
          this.listhquery.push({key:this.columns.ws70,value:'ws70'})
          this.listhquery.push({key:this.columns.ws80,value:'ws80'})
          this.listhquery.push({key:this.columns.ws90,value:'ws90'})
          this.listhquery.push({key:this.columns.ws100,value:'ws100'})
          this.listhquery.push({key:this.columns.ws170,value:'ws170'})

          this.changeDisplay()
        }
      },
      getDisplay(){
        this.$axios.get('displayConfig/'+this.displayConfig.displayCode).then((res) => {
          if(res.data == null||res.data.code == 0){
            this.initDisplay()
          }else{
            this.displayConfig = res.data
            var showlist = this.displayConfig.showCode.split(',')
            var hiddenlist = this.displayConfig.hiddenCode.split(',')
            for(var i =0;i<showlist.length;i++){
              switch (showlist[i]) {
                case 'globalR':
                  this.lists.push({key:'总辐射(W/㎡)',value:'globalR'})
                  this.listsquery.push({key:'总辐射(W/㎡)',value:'globalR'})
                      break;
                case 'directR':
                  this.lists.push({key:'直辐射(W/㎡)',value:'directR'})
                  this.listsquery.push({key:'直辐射(W/㎡)',value:'directR'})
                  break;
                case 'diffuseR':
                  this.lists.push({key:'散辐射(W/㎡)',value:'diffuseR'})
                  this.listsquery.push({key:'散辐射(W/㎡)',value:'diffuseR'})
                  break;
                case 'obliqueR':
                  this.lists.push({key:'斜辐射(W/㎡)',value:'obliqueR'})
                  this.listsquery.push({key:'斜辐射(W/㎡)',value:'obliqueR'})
                  break;
                case 'wsInst10':
                  this.lists.push({key:'10米风速(m/s)',value:'wsInst10'})
                  this.listsquery.push({key:'10米风速(m/s)',value:'wsInst10'})
                  break;
                case 'wsInst30':
                  this.lists.push({key:'30米风速(m/s)',value:'wsInst30'})
                  this.listsquery.push({key:'30米风速(m/s)',value:'wsInst30'})
                  break;
                case 'wsInst50':
                  this.lists.push({key:'50米风速(m/s)',value:'wsInst50'})
                  this.listsquery.push({key:'50米风速(m/s)',value:'wsInst50'})
                  break;
                case 'wsInst60':
                  this.lists.push({key:'60米风速(m/s)',value:'wsInst60'})
                  this.listsquery.push({key:'60米风速(m/s)',value:'wsInst60'})
                  break;
                case 'wsInst70':
                  this.lists.push({key:'70米风速(m/s)',value:'wsInst70'})
                  this.listsquery.push({key:'70米风速(m/s)',value:'wsInst70'})
                  break;
                case 'wsInst80':
                  this.lists.push({key:'80米风速(m/s)',value:'wsInst80'})
                  this.listsquery.push({key:'80米风速(m/s)',value:'wsInst80'})
                  break;
                case 'wsInst90':
                  this.lists.push({key:'90米风速(m/s)',value:'wsInst90'})
                  this.listsquery.push({key:'90米风速(m/s)',value:'wsInst90'})
                  break;
                case 'wsInst100':
                  this.lists.push({key:'100米风速(m/s)',value:'wsInst100'})
                  this.listsquery.push({key:'100米风速(m/s)',value:'wsInst100'})
                  break;
                case 'wsInst110':
                  this.lists.push({key:'110米风速(m/s)',value:'wsInst110'})
                  this.listsquery.push({key:'110米风速(m/s)',value:'wsInst110'})
                  break;
                case 'wsInst120':
                  this.lists.push({key:'120米风速(m/s)',value:'wsInst120'})
                  this.listsquery.push({key:'120米风速(m/s)',value:'wsInst120'})
                  break;
                case 'ws10':
                  this.lists.push({key:this.columns.ws10,value:'ws10'})
                  this.listsquery.push({key:this.columns.ws10,value:'ws10'})
                  break;
                case 'ws30':
                  this.lists.push({key:this.columns.ws30,value:'ws30'})
                  this.listsquery.push({key:this.columns.ws30,value:'ws30'})
                  break;
                case 'ws50':
                  this.lists.push({key:this.columns.ws50,value:'ws50'})
                  this.listsquery.push({key:this.columns.ws50,value:'ws50'})
                  break;
                case 'ws70':
                  this.lists.push({key:this.columns.ws70,value:'ws70'})
                  this.listsquery.push({key:this.columns.ws70,value:'ws70'})
                  break;
                case 'ws80':
                  this.lists.push({key:this.columns.ws80,value:'ws80'})
                  this.listsquery.push({key:this.columns.ws80,value:'ws80'})
                  break;
                case 'ws90':
                  this.lists.push({key:this.columns.ws90,value:'ws90'})
                  this.listsquery.push({key:this.columns.ws90,value:'ws90'})
                  break;
                case 'ws100':
                  this.lists.push({key:this.columns.ws100,value:'ws100'})
                  this.listsquery.push({key:this.columns.ws100,value:'ws100'})
                  break;
                case 'ws170':
                  this.lists.push({key:this.columns.ws170,value:'ws170'})
                  this.listsquery.push({key:this.columns.ws170,value:'ws170'})
                  break;
                case 'swr':
                  this.lists.push({key:'nwp辐射(W/㎡)',value:'swr'})
                  this.listsquery.push({key:'nwp辐射(W/㎡)',value:'swr'})
                  break;
                case 'directRadiation':
                  this.lists.push({key:'nwp直辐射(W/㎡)',value:'directRadiation'})
                  this.listsquery.push({key:'nwp直辐射(W/㎡)',value:'directRadiation'})
                  break;
                case 'diffuseRadiation':
                  this.lists.push({key:'nwp散辐射(W/㎡)',value:'diffuseRadiation'})
                  this.listsquery.push({key:'nwp散辐射(W/㎡)',value:'diffuseRadiation'})
                  break;
                // case 'ableValue':
                //   this.lists.push({key:'可用功率',value:'ableValue'})
                //   this.listsquery.push({key:'可用功率',value:'ableValue'})
                //   break;
                // case 'theoryValue':
                //   this.lists.push({key:'理论功率',value:'theoryValue'})
                //   this.listsquery.push({key:'理论功率',value:'theoryValue'})
                //   break;
                case 'realValue':
                  this.lists.push({key:'实际功率(MW)',value:'realValue'})
                  this.listsquery.push({key:'实际功率(MW)',value:'realValue'})
                  break;
                case 'dq':
                  this.lists.push({key:'上报短期(MW)',value:'dq'})
                  this.listsquery.push({key:'上报短期(MW)',value:'dq'})
                  break;
                case 'cdq':
                  this.lists.push({key:'上报超短期(MW)',value:'cdq'})
                  this.listsquery.push({key:'上报超短期(MW)',value:'cdq'})
                  break;

              }
            }
            for(var i =0;i<hiddenlist.length;i++){
              switch (hiddenlist[i]) {
                case 'globalR':
                  this.listh.push({key:'总辐射(W/㎡)',value:'globalR'})
                  this.listhquery.push({key:'总辐射(W/㎡)',value:'globalR'})
                  break;
                case 'directR':
                  this.listh.push({key:'直辐射(W/㎡)',value:'directR'})
                  this.listhquery.push({key:'直辐射(W/㎡)',value:'directR'})
                  break;
                case 'diffuseR':
                  this.listh.push({key:'散辐射(W/㎡)',value:'diffuseR'})
                  this.listhquery.push({key:'散辐射(W/㎡)',value:'diffuseR'})
                  break;
                case 'obliqueR':
                  this.listh.push({key:'斜辐射(W/㎡)',value:'obliqueR'})
                  this.listhquery.push({key:'斜辐射(W/㎡)',value:'obliqueR'})
                  break;
                case 'wsInst10':
                  this.listh.push({key:'10米风速(m/s)',value:'wsInst10'})
                  this.listhquery.push({key:'10米风速(m/s)',value:'wsInst10'})
                  break;
                case 'wsInst30':
                  this.listh.push({key:'30米风速(m/s)',value:'wsInst30'})
                  this.listhquery.push({key:'30米风速(m/s)',value:'wsInst30'})
                  break;
                case 'wsInst50':
                  this.listh.push({key:'50米风速(m/s)',value:'wsInst50'})
                  this.listhquery.push({key:'50米风速(m/s)',value:'wsInst50'})
                  break;
                case 'wsInst60':
                  this.listh.push({key:'60米风速(m/s)',value:'wsInst60'})
                  this.listhquery.push({key:'60米风速(m/s)',value:'wsInst60'})
                  break;
                case 'wsInst70':
                  this.listh.push({key:'70米风速(m/s)',value:'wsInst70'})
                  this.listhquery.push({key:'70米风速(m/s)',value:'wsInst70'})
                  break;
                case 'wsInst80':
                  this.listh.push({key:'80米风速(m/s)',value:'wsInst80'})
                  this.listhquery.push({key:'80米风速(m/s)',value:'wsInst80'})
                  break;
                case 'wsInst90':
                  this.listh.push({key:'90米风速(m/s)',value:'wsInst90'})
                  this.listhquery.push({key:'90米风速(m/s)',value:'wsInst90'})
                  break;
                case 'wsInst100':
                  this.listh.push({key:'100米风速(m/s)',value:'wsInst100'})
                  this.listhquery.push({key:'100米风速(m/s)',value:'wsInst100'})
                  break;
                case 'wsInst110':
                  this.listh.push({key:'110米风速(m/s)',value:'wsInst110'})
                  this.listhquery.push({key:'110米风速(m/s)',value:'wsInst110'})
                  break;
                case 'wsInst120':
                  this.listh.push({key:'120米风速(m/s)',value:'wsInst120'})
                  this.listhquery.push({key:'120米风速(m/s)',value:'wsInst120'})
                  break;
                case 'ws10':
                  this.listh.push({key:this.columns.ws10,value:'ws10'})
                  this.listhquery.push({key:this.columns.ws10,value:'ws10'})
                  break;
                case 'ws30':
                  this.listh.push({key:this.columns.ws30,value:'ws30'})
                  this.listhquery.push({key:this.columns.ws30,value:'ws30'})
                  break;
                case 'ws50':
                  this.listh.push({key:this.columns.ws50,value:'ws50'})
                  this.listhquery.push({key:this.columns.ws50,value:'ws50'})
                  break;
                case 'ws70':
                  this.listh.push({key:this.columns.ws70,value:'ws70'})
                  this.listhquery.push({key:this.columns.ws70,value:'ws70'})
                  break;
                case 'ws80':
                  this.listh.push({key:this.columns.ws80,value:'ws80'})
                  this.listhquery.push({key:this.columns.ws80,value:'ws80'})
                  break;
                case 'ws90':
                  this.listh.push({key:this.columns.ws90,value:'ws90'})
                  this.listhquery.push({key:this.columns.ws90,value:'ws90'})
                  break;
                case 'ws100':
                  this.listh.push({key:this.columns.ws100,value:'ws100'})
                  this.listhquery.push({key:this.columns.ws100,value:'ws100'})
                  break;
                case 'ws170':
                  this.listh.push({key:this.columns.ws170,value:'ws170'})
                  this.listhquery.push({key:this.columns.ws170,value:'ws170'})
                  break;
                case 'swr':
                  this.listh.push({key:'nwp辐射(W/㎡)',value:'swr'})
                  this.listhquery.push({key:'nwp辐射(W/㎡)',value:'swr'})
                  break;
                case 'directRadiation':
                  this.listh.push({key:'nwp直辐射(W/㎡)',value:'directRadiation'})
                  this.listhquery.push({key:'nwp直辐射(W/㎡)',value:'directRadiation'})
                  break;
                case 'diffuseRadiation':
                  this.listh.push({key:'nwp散辐射(W/㎡)',value:'diffuseRadiation'})
                  this.listhquery.push({key:'nwp散辐射(W/㎡)',value:'diffuseRadiation'})
                  break;
                // case 'ableValue':
                //   this.listh.push({key:'可用功率',value:'ableValue'})
                //   this.listhquery.push({key:'可用功率',value:'ableValue'})
                //   break;
                // case 'theoryValue':
                //   this.listh.push({key:'理论功率',value:'theoryValue'})
                //   this.listhquery.push({key:'理论功率',value:'theoryValue'})
                //   break;
                case 'realValue':
                  this.lists.push({key:'实际功率(MW)',value:'realValue'})
                  this.listsquery.push({key:'实际功率(MW)',value:'realValue'})
                  break;
                case 'dq':
                  this.listh.push({key:'上报短期(MW)',value:'dq'})
                  this.listhquery.push({key:'上报短期(MW)',value:'dq'})
                  break;
                case 'cdq':
                  this.listh.push({key:'上报超短期(MW)',value:'cdq'})
                  this.listhquery.push({key:'上报超短期(MW)',value:'cdq'})
                  break;
              }
            }
          }
          this.$axios.get('displayConfig/comprehensivePoint').then((res) => {
            if(res.data==null||res.data.code == 0){
              this.displayPointConfig = {
                "displayCode":"comprehensivePoint",
                "showCode":"1,1,1",
                "hiddenCode":''
              }
              this.$axios.post('displayConfig/',this.displayPointConfig).then((res) => {
                this.displayPointConfig = res.data
                this.$message.success('点位设置成功' )
                this.dialogVisible = false
                this.getDraw(this.startTime,this.endTime)
              }).catch((error) => {
                this.$message.error('点位设置出错' + error)
              })
            }else {
              this.displayPointConfig = res.data
              var point = this.displayPointConfig.showCode.split(',')
              this.cdqAgo =  point[0]
              this.dqAgo =  point[1]
              this.nwpAgo =  point[2]
            }
            this.getDraw(this.queryStartTime,this.queryEndTime)
          })
        })

      },
      changeDisplay(){
        this.displayConfig.showCode = ""
        this.displayConfig.hiddenCode = ""
        this.listsquery=[]
        this.listhquery=[]
        for(var i = 0;i<this.listh.length;i++){
          this.listhquery.push(this.listh[i])
        }
        for(var i = 0;i<this.lists.length;i++){
          this.listsquery.push(this.lists[i])
        }
        for(var i =0;i<this.listsquery.length;i++){
          this.displayConfig.showCode += this.listsquery[i].value+","
        }
        for(var i =0;i<this.listhquery.length;i++){
          this.displayConfig.hiddenCode += this.listhquery[i].value+","
        }
        this.$axios.post('displayConfig/',this.displayConfig).then((res) => {
          this.displayConfig = res.data
          this.$message.success('展示设置成功' )
          this.dialogVisible = false
          this.getDraw(this.startTime,this.endTime)
        }).catch((error) => {
          this.$message.error('展示设置出错' + error)
        })
      },
      changeDisplayPoint(){
        this.displayPointConfig.showCode = this.cdqAgo+","+this.dqAgo+","+this.nwpAgo
        this.$axios.post('displayConfig/',this.displayPointConfig).then((res) => {
          // this.displayConfig = res.data
          this.$message.success('点位设置成功' )
          this.dialogVisiblePoint = false
          this.getDraw(this.startTime,this.endTime)
        }).catch((error) => {
          this.$message.error('点位设置出错' + error)
        })
      },
      cancelDisplay(){
        this.lists=[]
        this.listh=[]
        for(var i = 0;i<this.listhquery.length;i++){
          this.listh.push(this.listhquery[i])
        }
        for(var i = 0;i<this.listsquery.length;i++){
          this.lists.push(this.listsquery[i])
        }
        this.dialogVisible = false
      },
      cancelDisplayPoint(){
        // this.lists=[]
        // this.listh=[]
        // for(var i = 0;i<this.listhquery.length;i++){
        //   this.listh.push(this.listhquery[i])
        // }
        // for(var i = 0;i<this.listsquery.length;i++){
        //   this.lists.push(this.listsquery[i])
        // }
        this.dialogVisiblePoint = false
      },
      getDraw(startTime,endTime){
        this.drawLoading = true
        this.tableData = []

        if(isNaN(this.dqAgo)){
          this.dqAgo = 1
        }
        if(isNaN(this.cdqAgo)){
          this.cdqAgo = 1
        }
        if(isNaN(this.nwpAgo)){
          this.nwpAgo = 1
        }
        this.$axios.get('comprehensiveContrast/'+startTime+'/'+endTime+'/'+this.equipmentId+'/'+this.electricField.electricFieldTypeEnum+'/'+this.dqAgo+'/'+this.cdqAgo+'/'+this.nwpAgo+'/'+this.jgTime).then((res) => {
            this.tableColumn = [
              { field: 'times', title: '时间', width:200},
            ]

          for(let i = 0;i<this.listsquery.length;i++){
            var colunm = {
              field:this.listsquery[i].value , title: this.listsquery[i].key
            }

            this.tableColumn.push(colunm)
            if(this.listsquery[i].value == 'realValue'&&res.data.displayKyLl=="1"){
              this.tableColumn.push({ field: 'ableValue', title: '可用功率' })
              this.tableColumn.push({ field: 'theoryValue', title: '理论功率' })
              this.tableColumn.push({ field: 'referencePowerBySample', title: '参照功率（样板机）' })
              this.tableColumn.push({ field: 'referencePowerByMeasuring', title: '参照功率（测风、测光）' })
            }
          }


          this.drawData = {times:[],realValue:[],ableValue:[],referencePowerBySample:[],referencePowerByMeasuring:[],theoryValue:[],dq:[],cdq:[],directR:[],diffuseR:[],globalR:[],obliqueR:[],wsInst10:[],wsInst30:[],wsInst50:[],wsInst60:[],wsInst70:[],wsInst80:[],wsInst90:[],wsInst100:[],wsInst110:[],wsInst120:[],ws10:[],ws30:[],ws50:[],ws70:[],ws80:[],ws90:[],ws100:[],ws170:[],swr:[],directRadiation:[],diffuseRadiation:[],electricField:this.electricField,columns:this.columns}
          const data = res.data.tableResult
          const data1 = res.data.resultList
          this.tableData=[]
          // console.log(data)
          //因为后台设置两个结果的长度肯定一样的所以放在一个for循环中
          for(let i = 0;i<data.length;i++){

            var object = {}
            this.drawData.times.push(data[i].time)
            object.times = data[i].time

            if(data[i].realValue!=undefined){
              this.drawData.realValue.push(data[i].realValue)
              object.realValue = data[i].realValue;
            }
            if(data[i].ableValue!=undefined){
              this.drawData.ableValue.push(data[i].ableValue)
              object.ableValue = data[i].ableValue;
            }
            if(data[i].theoryValue!=undefined){
              this.drawData.theoryValue.push(data[i].theoryValue)
              object.theoryValue = data[i].theoryValue;
            }
            if(data[i].referencePowerBySample!=undefined){
              this.drawData.referencePowerBySample.push(data[i].referencePowerBySample)
              object.referencePowerBySample = data[i].referencePowerBySample;
            }
            if(data[i].referencePowerByMeasuring!=undefined){
              this.drawData.referencePowerByMeasuring.push(data[i].referencePowerByMeasuring)
              object.referencePowerByMeasuring = data[i].referencePowerByMeasuring;
            }
            if(data[i].dq!=undefined){
              this.drawData.dq.push(data[i].dq)
              object.dq = data[i].dq;
            }
            if(data[i].cdq!=undefined){
              this.drawData.cdq.push(data[i].cdq)
              object.cdq = data[i].cdq;
            }


          // }
          // for(let i = 0;i<data1.length;i++){
          if(data1[i].directR!=undefined){
            this.drawData.directR.push(data1[i].directR)
            object.directR = data1[i].directR;
          }
          if(data1[i].diffuseR!=undefined){
            this.drawData.diffuseR.push(data1[i].diffuseR)
            object.diffuseR = data1[i].diffuseR;
          }
          if(data1[i].globalR!=undefined){
              this.drawData.globalR.push(data1[i].globalR)
            object.globalR = data1[i].globalR;
          }
          if(data1[i].obliqueR!=undefined){
              this.drawData.obliqueR.push(data1[i].obliqueR)
            object.obliqueR = data1[i].obliqueR;
          }
          if(data1[i].wsInst10!=undefined){
            this.drawData.wsInst10.push(data1[i].wsInst10)
            object.wsInst10 = data1[i].wsInst10;
          }
          if(data1[i].wsInst30!=undefined){
            this.drawData.wsInst30.push(data1[i].wsInst30)
            object.wsInst30 = data1[i].wsInst30;
          }
          if(data1[i].wsInst50!=undefined){
            this.drawData.wsInst50.push(data1[i].wsInst50)
            object.wsInst50 = data1[i].wsInst50;
          }
            if(data1[i].wsInst60!=undefined){
              this.drawData.wsInst60.push(data1[i].wsInst60)
              object.wsInst60 = data1[i].wsInst60;
            }
          if(data1[i].wsInst70!=undefined){
            this.drawData.wsInst70.push(data1[i].wsInst70)
            object.wsInst70 = data1[i].wsInst70;
          }
          if(data1[i].wsInst80!=undefined){
            this.drawData.wsInst80.push(data1[i].wsInst80)
            object.wsInst80 = data1[i].wsInst80;
          }
          if(data1[i].wsInst90!=undefined){
            this.drawData.wsInst90.push(data1[i].wsInst90)
            object.wsInst90 = data1[i].wsInst90;
          }
          if(data1[i].wsInst100!=undefined){
            this.drawData.wsInst100.push(data1[i].wsInst100)
            object.wsInst100 = data1[i].wsInst100;
          }
          if(data1[i].wsInst110!=undefined){
            this.drawData.wsInst110.push(data1[i].wsInst110)
            object.wsInst110 = data1[i].wsInst110;
          }
            if(data1[i].wsInst120!=undefined){
              this.drawData.wsInst120.push(data1[i].wsInst120)
              object.wsInst120 = data1[i].wsInst120;
            }
          if(data1[i].ws10!=undefined){
            this.drawData.ws10.push(data1[i].ws10)
            object.ws10 = data1[i].ws10;
          }
          if(data1[i].ws30!=undefined){
            this.drawData.ws30.push(data1[i].ws30)
            object.ws30 = data1[i].ws30;
          }
          if(data1[i].ws50!=undefined){
            this.drawData.ws50.push(data1[i].ws50)
            object.ws50 = data1[i].ws50;
          }
          if(data1[i].ws70!=undefined){
            this.drawData.ws70.push(data1[i].ws70)
            object.ws70 = data1[i].ws70;
          }
          if(data1[i].ws80!=undefined){
            this.drawData.ws80.push(data1[i].ws80)
            object.ws80 = data1[i].ws80;
          }
          if(data1[i].ws90!=undefined){
            this.drawData.ws90.push(data1[i].ws90)
            object.ws90 = data1[i].ws90;
          }
          if(data1[i].ws100!=undefined){
            this.drawData.ws100.push(data1[i].ws100)
            object.ws100 = data1[i].ws100;
          }
          if(data1[i].ws170!=undefined){
            this.drawData.ws170.push(data1[i].ws170)
            object.ws170 = data1[i].ws170;
          }
          if(data1[i].swr!=undefined){
            this.drawData.swr.push(data1[i].swr)
            object.swr = data1[i].swr;
          }
          if(data1[i].diffuseRadiation!=undefined){
            this.drawData.diffuseRadiation.push(data1[i].diffuseRadiation)
            object.diffuseRadiation = data1[i].diffuseRadiation;
          }
          if(data1[i].directRadiation!=undefined){
            this.drawData.directRadiation.push(data1[i].directRadiation)
            object.directRadiation = data1[i].directRadiation;
          }

              this.tableData.push(object)


          }
          this.tableLoading = false
          if(!this.drawLoading && !this.tableLoading){
            this.loading = false
          }
          this.drawLoading = false
          if(!this.drawLoading && !this.tableLoading){
            this.loading = false
          }

        }).catch((error) => {
          this.drawLoading = false
          if(!this.drawLoading && !this.tableLoading){
            this.loading = false
          }
          this.$message.error('查询对比数据出错' + error)
        })

      },
      // getTable(){
      //   this.tableLoading = true
      //   this.$axios.get('/forecastPowerShortTerm/'+this.queryStartTime+'/'+this.queryEndTime+'/'+this.currentPage+'/'+this.pageSize+'?sortOrder='+this.sortOrder).then((res) => {
      //     // this.tableData = res.data.content
      //     // 表分页格数据总条数
      //     this.total = res.data.count
      //     this.tableLoading = false
      //     if(!this.drawLoading && !this.tableLoading){
      //       this.loading = false
      //     }
      //   }).catch((error) => {
      //     this.tableLoading = false
      //     if(!this.drawLoading && !this.tableLoading){
      //       this.loading = false
      //     }
      //     this.$message.error('查询table出错' + error)
      //   })
      //
      // },
      handlePageChange ({ currentPage, pageSize }) {
        this.currentPage = currentPage
        if(this.pageSize!=pageSize){
          this.changePageSize(pageSize)
        }
        this.pageSize = pageSize

      },
      dateFormat({ cellValue, row, column }) {
        return this.$XEUtils.toDateString(cellValue, 'yyyy-MM-dd HH:mm:ss')
      },
      enumToWord({ cellValue, row, column }) {
        if(cellValue == "E1"){
          return "云端模型"
        }
        if(cellValue == 'E2'){
          return "物理模型"
        }
        if(cellValue == 'E3'){
          return "统计模型"
        }
        if(cellValue == 'E4'){
          return "补录数据"
        }
        if(cellValue == 'E5'){
          return "差值模型"
        }
      },
      dateMoment({ cellValue, row, column }) {
        return moment(cellValue).format('YYYY-MM-DD HH:mm:ss')
      },
      // sortChangeEvent ({ column, property, order }) {
      //   if(order == null){
      //     order = 'asc'
      //   }
      //   this.currentPage = 1
      //   this.sortOrder = order
      //   this.loading = true
      //   this.getTable()
      // },

      checkColumnMethod ({ column }) {
        if (column.property === 'preTime') {
          return false
        }
        return true
      },
      dateQuery(){
        this.loading = true
        if(this.endTime<=this.startTime){
          this.$message.error("开始时间不能大于结束时间")
          this.startTime = this.queryStartTime
          this.endTime = this.queryEndTime
          this.loading = false
          return
        }
        if(this.endTime-this.startTime> 60 * 60 * 24 * 1000*31){
          this.startTime = this.queryStartTime
          this.endTime = this.queryEndTime
          this.$message.error("只能最多查询31天的数据哦")
          this.loading = false
          return
        }
        this.queryStartTime = this.startTime
        this.queryEndTime = this.endTime
        this.getDraw(this.queryStartTime,this.queryEndTime)
        // this.getTable()
      },
      Byresize(tab){
        if(tab.name =='first'){
          this.resizeKey++
          this.showToolBar = false
        }else{
          this.showToolBar = true
        }

      },
      log: function(evt) {
        /*window.console.log(evt);*/
   /*     console.log(this.lists)
        console.log(this.listh)*/

     /*   this.changeDisplay()*/
      },
      // 初始页currentPage、初始每页数据数pagesize和数据data
      handleSizeChange: function (size) {
        this.pageSize = size;
        // console.log(this.pageSize)  //每页下拉显示数据
      },
      handleCurrentChange: function(currentPage){
        this.currentPage = currentPage;
        // console.log(this.currentPage)  //点击第几页
      }
    }
  }
</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;*/
  /*}*/

  /*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{*/
    /*background:transparent;*/
  /*}*/

  /*.el-button{*/
    /*background:transparent;*/
    /*color:white;*/
  /*}*/
  /*.filter{*/
    /*width: 100%;background-color: transparent;height: 10%*/
  /*}*/
  /*.filter >>> input{*/
    /*background:transparent;*/
    /*border:none;*/
    /*color:white;*/
  /*}*/
  /*.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;*/
  /*}*/


  /*.tableContent{*/
    /*width: 100%;*/
    /*height:calc(80vh - 50px);*/
  /*}*/
  /*.tableContent >>> td{*/
    /*border:1px solid #ffffff;*/
  /*}*/

  /*.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;*/
  /*}*/
  /*.toolbar{*/
    /*position:absolute;right:0px;*/
  /*}*/
  /*.toolbar >>> .vxe-button.type--button.is--circle {*/
    /*padding: 0 .5em;*/
    /*min-width: 34px;*/
    /*border-radius: 10%;*/
    /*border: none;*/
    /*background: transparent;*/
    /*color: white;*/
  /*}*/
  .drag-box-item {
    /*margin:10px;*/
    flex: 1;
    height: 220px;
    max-width: 100%;
    min-width: 100%;
    background-color: #eff1f5;
    margin-right: 16px;
    border-radius: 6px;
    border: 1px #e1e4e8 solid;
  }

  .item-title {
    padding: 8px 8px 8px 12px;
    font-size: 14px;
    line-height: 1.5;
    color: #24292e;
    font-weight: 600;
  }

  .item-ul {
    padding: 0 8px 8px;
    height: 200px;
    overflow-y: scroll;
  }

  .item-ul::-webkit-scrollbar {
    width: 0;
  }

  .drag-list {
    width: 14%;
    float: left;
    border: 1px #e1e4e8 solid;
    padding: 10px;
    /*margin: 5px 0 10px;*/
    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;
  }

  .inputNum {
    height: 50px;
    text-align: right;
  }
</style>

