cpp/cpp-ui/src/views/cloudDataQuery/index.vue

<template>
  <div class="app-container">
    <div class="dark-el-input dark-el-button">
      <el-form ref="queryForm" size="small" :inline="true">
        <el-form-item label="时间">
          <el-date-picker
            :clearable="false"
            v-model="dateTime"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="['00:00:00', '23:59:59']" popper-class="cpp-popper"
            :picker-options="pickerOptions"
          />
        </el-form-item>
        <el-form-item label="场站名称">
          <el-select v-model="stationCode" placeholder="请选择" popper-class="cpp-popper">
            <el-option
              v-for="item in stationList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="预测D+">
          <el-select v-model="forecastHowLongAgo" placeholder="请选择" popper-class="cpp-popper">
            <el-option
              v-for="item in this.points()"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" style="margin-left: 5px" icon="el-icon-search" @click="dataQuery">查询
          </el-button>
          <el-button type="primary" style="margin-left: 5px" icon="el-icon-download" @click="exportFile">导出
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <div style="margin-top: 10px" v-loading="loading">
      <div style="float:left;width: 100%;height:475px" ref="zhxCharts"></div>
      <div style="float:left;width: 92.5%;margin-left: 58px">
        <vxe-table
          align="center"
          ref="xTable"
          auto-resize
          border
          resizable
          height="288px"
          highlight-current-row
          show-overflow
          :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
          :cell-class-name="cellClassName"
        >
          <vxe-table-column
            v-for="(item, index) in fromHead"
            :key="index"
            align="center"
            :title="item.title"
            :field="item.field"
          ></vxe-table-column>
        </vxe-table>
        <vxe-pager
          perfect
          :current-page.sync="currentPage"
          :page-size.sync="pageSize"
          :total="total"
          :page-sizes=[5,15,50,100]
          :layouts="['PrevJump', 'PrevPage','JumpNumber', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']"
          @page-change="handlePageChange"
        >
        </vxe-pager>
      </div>

    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: 'cloudData',
  data() {
    return {
      fromHead: [],
      zhxChart: null,
      wdChart: null,
      dateTime: [new Date(new Date().toLocaleDateString()).getTime(), new Date(new Date().toLocaleDateString()).getTime() + (60 * 60 * 24 * 1000) - 1],
      total: 0,
      sortOrder: 'asc',
      pageSize: 5,
      currentPage: 1,
      stationList: [],
      stationCode: [],
      tableData: [],
      nameList: [],
      loading: false,
      modId: '',//备用id
      itemStyle: [
        {
          itemStyle: {
            normal: {
              lineStyle: {
                color: '#4A99FF',
                // shadowColor: '#4A99FF',
                // shadowBlur: 10,
              },
              shadowColor: '#4A99FF',
              shadowBlur: 10,
            },
          },
          areaStyle: {
            normal: { // 单项区域填充样式
              color: {
                type: 'linear',
                x: 0, //右
                y: 0, //下
                x2: 1, //左
                y2: 1, //上
                colorStops: [{
                  offset: 0,
                  color: '#4A99FF'
                }, {
                  offset: 0.5,
                  color: 'rgba(0,0,0,0)'
                }, {
                  offset: 1,
                  color: '#4A99FF'
                }],
                globalCoord: false
              },
              opacity: 1 // 区域透明度
            }
          }
        },
        {
          itemStyle: {
            normal: {
              lineStyle: {
                color: '#4BFFFC',
                // shadowColor: '#4BFFFC',
                // shadowBlur: 10,
              },
              shadowColor: '#4BFFFC',
              shadowBlur: 10,
            },
          },
          areaStyle: {
            normal: { // 单项区域填充样式
              color: {
                type: 'linear',
                x: 0, //右
                y: 0, //下
                x2: 1, //左
                y2: 1, //上
                colorStops: [{
                  offset: 0,
                  color: '#4BFFFC'
                }, {
                  offset: 0.5,
                  color: 'rgba(0,0,0,0)'
                }, {
                  offset: 1,
                  color: '#4BFFFC'
                }],
                globalCoord: false
              },
              opacity: 1 // 区域透明度
            }
          }
        },
        {
          itemStyle: {
            normal: {
              lineStyle: {
                color: '#ff654a',
                // shadowColor: '#4A99FF',
                // shadowBlur: 10,
              },
              shadowColor: '#ff654a',
              shadowBlur: 10,
            },
          },
          areaStyle: {
            normal: { // 单项区域填充样式
              color: {
                type: 'linear',
                x: 0, //右
                y: 0, //下
                x2: 1, //左
                y2: 1, //上
                colorStops: [{
                  offset: 0,
                  color: '#ff654a'
                }, {
                  offset: 0.5,
                  color: 'rgba(0,0,0,0)'
                }, {
                  offset: 1,
                  color: '#ff654a'
                }],
                globalCoord: false
              },
              opacity: 1 // 区域透明度
            }
          }
        },
        {
          itemStyle: {
            normal: {
              lineStyle: {
                color: '#edff4a',
                // shadowColor: '#4A99FF',
                // shadowBlur: 10,
              },
              shadowColor: '#edff4a',
              shadowBlur: 10,
            },
          },
          areaStyle: {
            normal: { // 单项区域填充样式
              color: {
                type: 'linear',
                x: 0, //右
                y: 0, //下
                x2: 1, //左
                y2: 1, //上
                colorStops: [{
                  offset: 0,
                  color: '#edff4a'
                }, {
                  offset: 0.5,
                  color: 'rgba(0,0,0,0)'
                }, {
                  offset: 1,
                  color: '#edff4a'
                }],
                globalCoord: false
              },
              opacity: 1 // 区域透明度
            }
          }
        },
        {
          itemStyle: {
            normal: {
              lineStyle: {
                color: '#65ff4a',
                // shadowColor: '#4A99FF',
                // shadowBlur: 10,
              },
              shadowColor: '#65ff4a',
              shadowBlur: 10,
            },
          },
          areaStyle: {
            normal: { // 单项区域填充样式
              color: {
                type: 'linear',
                x: 0, //右
                y: 0, //下
                x2: 1, //左
                y2: 1, //上
                colorStops: [{
                  offset: 0,
                  color: '#65ff4a'
                }, {
                  offset: 0.5,
                  color: 'rgba(0,0,0,0)'
                }, {
                  offset: 1,
                  color: '#65ff4a'
                }],
                globalCoord: false
              },
              opacity: 1 // 区域透明度
            }
          }
        },
        {
          itemStyle: {
            normal: {
              lineStyle: {
                color: '#4affea',
                // shadowColor: '#4A99FF',
                // shadowBlur: 10,
              },
              shadowColor: '#4affea',
              shadowBlur: 10,
            },
          },
          areaStyle: {
            normal: { // 单项区域填充样式
              color: {
                type: 'linear',
                x: 0, //右
                y: 0, //下
                x2: 1, //左
                y2: 1, //上
                colorStops: [{
                  offset: 0,
                  color: '#4affea'
                }, {
                  offset: 0.5,
                  color: 'rgba(0,0,0,0)'
                }, {
                  offset: 1,
                  color: '#4affea'
                }],
                globalCoord: false
              },
              opacity: 1 // 区域透明度
            }
          }
        },
        {
          itemStyle: {
            normal: {
              lineStyle: {
                color: '#894aff',
                // shadowColor: '#4A99FF',
                // shadowBlur: 10,
              },
              shadowColor: '#894aff',
              shadowBlur: 10,
            },
          },
          areaStyle: {
            normal: { // 单项区域填充样式
              color: {
                type: 'linear',
                x: 0, //右
                y: 0, //下
                x2: 1, //左
                y2: 1, //上
                colorStops: [{
                  offset: 0,
                  color: '#894aff'
                }, {
                  offset: 0.5,
                  color: 'rgba(0,0,0,0)'
                }, {
                  offset: 1,
                  color: '#894aff'
                }],
                globalCoord: false
              },
              opacity: 1 // 区域透明度
            }
          }
        },
        {
          itemStyle: {
            normal: {
              lineStyle: {
                color: '#d84aff',
                // shadowColor: '#4A99FF',
                // shadowBlur: 10,
              },
              shadowColor: '#d84aff',
              shadowBlur: 10,
            },
          },
          areaStyle: {
            normal: { // 单项区域填充样式
              color: {
                type: 'linear',
                x: 0, //右
                y: 0, //下
                x2: 1, //左
                y2: 1, //上
                colorStops: [{
                  offset: 0,
                  color: '#d84aff'
                }, {
                  offset: 0.5,
                  color: 'rgba(0,0,0,0)'
                }, {
                  offset: 1,
                  color: '#d84aff'
                }],
                globalCoord: false
              },
              opacity: 1 // 区域透明度
            }
          }
        },
        {
          itemStyle: {
            normal: {
              lineStyle: {
                color: '#ff4aae',
                // shadowColor: '#4A99FF',
                // shadowBlur: 10,
              },
              shadowColor: '#ff4aae',
              shadowBlur: 10,
            },
          },
          areaStyle: {
            normal: { // 单项区域填充样式
              color: {
                type: 'linear',
                x: 0, //右
                y: 0, //下
                x2: 1, //左
                y2: 1, //上
                colorStops: [{
                  offset: 0,
                  color: '#ff4aae'
                }, {
                  offset: 0.5,
                  color: 'rgba(0,0,0,0)'
                }, {
                  offset: 1,
                  color: '#ff4aae'
                }],
                globalCoord: false
              },
              opacity: 1 // 区域透明度
            }
          }
        },

      ],
      colorArr: [
        {
          start: "rgba(155, 101, 229,",
          end: "rgba(219,44,44,0.5)"
        },
        {
          start: "rgba(71, 173, 245,",
          end: "rgba(231,132,46,0.5)"
        },
        {
          start: "rgba(82, 249, 107,",
          end: "rgba(190,229,50,0.5)"
        },
        {
          start: "rgba(82, 249, 107,",
          end: "rgba(44,214,140,0.5)"
        },
        {
          start: "rgba(82, 249, 107,",
          end: "rgba(43,73,221,0.5)"
        },
        {
          start: "rgba(82, 249, 107,",
          end: "rgba(40,203,203,0.5)"
        },
        {
          start: "rgba(82, 249, 107,",
          end: "rgba(195,42,180,0.5)"
        },
        {
          start: "rgba(82, 249, 107,",
          end: "rgba(231,45,119,0.5)"
        },
        {
          start: "rgba(82, 249, 107,",
          end: "rgba(229,46,46,0.5)"
        },
      ],
      lineStyle: [
        {
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(219,50,51,0.3)'
              }, {
                offset: 0.8,
                color: 'rgba(219, 50, 51, 0)'
              }], false),
              shadowColor: 'rgba(0, 0, 0, 0.1)',
              shadowBlur: 10
            }
          },
          itemStyle: {
            normal: {
              color: 'rgb(219,50,51)',
              borderColor: 'rgba(219,50,51,0.2)',
              borderWidth: 12
            }
          },
        },
        {
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(219,196,50,0.3)'
              }, {
                offset: 0.8,
                color: 'rgba(219, 50, 51, 0)'
              }], false),
              shadowColor: 'rgba(0, 0, 0, 0.1)',
              shadowBlur: 10
            }
          },
          itemStyle: {
            normal: {
              color: 'rgb(219,196,50)',
              borderColor: 'rgba(219,196,50,0.2)',
              borderWidth: 12
            }
          },
        },
        {
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(101,219,50,0.3)'
              }, {
                offset: 0.8,
                color: 'rgba(219, 50, 51, 0)'
              }], false),
              shadowColor: 'rgba(0, 0, 0, 0.1)',
              shadowBlur: 10
            }
          },
          itemStyle: {
            normal: {
              color: 'rgb(101,219,50)',
              borderColor: 'rgba(101,219,50,0.2)',
              borderWidth: 12
            }
          },
        },
        {
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(50,219,171,0.3)'
              }, {
                offset: 0.8,
                color: 'rgba(219, 50, 51, 0)'
              }], false),
              shadowColor: 'rgba(0, 0, 0, 0.1)',
              shadowBlur: 10
            }
          },
          itemStyle: {
            normal: {
              color: 'rgb(50,219,171)',
              borderColor: 'rgba(50,219,171,0.2)',
              borderWidth: 12
            }
          },
        },
        {
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(50,118,219,0.3)'
              }, {
                offset: 0.8,
                color: 'rgba(219, 50, 51, 0)'
              }], false),
              shadowColor: 'rgba(0, 0, 0, 0.1)',
              shadowBlur: 10
            }
          },
          itemStyle: {
            normal: {
              color: 'rgb(50,118,219)',
              borderColor: 'rgba(50,118,219,0.2)',
              borderWidth: 12
            }
          },
        },
        {
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(140,50,219,0.3)'
              }, {
                offset: 0.8,
                color: 'rgba(219, 50, 51, 0)'
              }], false),
              shadowColor: 'rgba(0, 0, 0, 0.1)',
              shadowBlur: 10
            }
          },
          itemStyle: {
            normal: {
              color: 'rgb(140,50,219)',
              borderColor: 'rgba(140,50,219,0.2)',
              borderWidth: 12
            }
          },
        },
        {
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(202,50,219,0.3)'
              }, {
                offset: 0.8,
                color: 'rgba(219, 50, 51, 0)'
              }], false),
              shadowColor: 'rgba(0, 0, 0, 0.1)',
              shadowBlur: 10
            }
          },
          itemStyle: {
            normal: {
              color: 'rgb(202,50,219)',
              borderColor: 'rgba(202,50,219,0.2)',
              borderWidth: 12
            }
          },
        },
        {
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(50,199,219,0.3)'
              }, {
                offset: 0.8,
                color: 'rgba(219, 50, 51, 0)'
              }], false),
              shadowColor: 'rgba(0, 0, 0, 0.1)',
              shadowBlur: 10
            }
          },
          itemStyle: {
            normal: {
              color: 'rgb(50,199,219)',
              borderColor: 'rgba(50,199,219,0.2)',
              borderWidth: 12
            }
          },
        },
        {
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(219,143,50,0.3)'
              }, {
                offset: 0.8,
                color: 'rgba(219, 50, 51, 0)'
              }], false),
              shadowColor: 'rgba(0, 0, 0, 0.1)',
              shadowBlur: 10
            }
          },
          itemStyle: {
            normal: {
              color: 'rgb(219,143,50)',
              borderColor: 'rgba(219,143,50,0.2)',
              borderWidth: 12
            }
          },
        }
      ],
      lineColor: '#3b3b3b',
      forecastHowLongAgo: 1,
      // 日期使用
      pickerOptions: {
        disabledDate: (time) => {
          return time.getTime() >  new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 *11 - 1
        }
      },
    }
  },
  created() {
    this.getStationCode()
  },
  mounted() {
    window.addEventListener("resize", this.handleResize);
    window.addEventListener("transitionend", this.handleResize);
  },
  destroyed() {
    // 清空缓存中首页地图跳转的参数
    localStorage.setItem('map-jump-staion','')
  },
  computed: {},
  methods: {
    // 图表自适应浏览器窗口大小
    handleResize(){
      if(this.zhxChart!=null && this.zhxChart!=undefined){
        this.zhxChart.resize();
      }
    },
    cellClassName({row, rowIndex, column, columnIndex}) {
      if (columnIndex == 10) {
        if (row.cz === '—') {
          return "class-style-yellow"
        }
        if (row.cz != '' && row.cz != undefined && row.cz != 0) {
          return "class-style-red"
        }
      }
    },
    // tabClick(tab) {
    //   if (this.activeName == 'first') {
    //     this.$nextTick(function () {
    //       this.zhxChart.resize();
    //     })
    //   }
    // },
    // nameFormat({cellValue, row, column}) {
    //   const item = this.nameList.find(item => item.value === cellValue)
    //   return item ? item.label : ''
    // },
    stationCodeFormat({cellValue, row, column}) {
      const item = this.stationList.find(item => item.value === cellValue)
      return item ? item.label : ''
    },
    handlePageChange({currentPage, pageSize}) {
      this.currentPage = currentPage
      this.pageSize = pageSize
    },
    async dataQuery() {
      let startTime = Math.round(this.dateTime[0])
      let endTime = Math.round(this.dateTime[1])
      if (endTime <= startTime) {
        this.$message.warning("开始时间不能大于结束时间")
        return
      }
      if (endTime - startTime > 60 * 60 * 24 * 1000 * 15) {
        this.$message.warning("查询数据不能超过15天！")
        return
      }
      let queryParams = {
        "stationCode": this.stationCode,
        "startTime": startTime,
        "endTime": endTime,
        "forecastHowLongAgo": this.forecastHowLongAgo
      }

      this.loading = true
      this.$axios.get('/powerstationstatusdata/cloudDataQuery', {params: queryParams}).then(res => {
        this.fromHead = res.data.tableField
        this.tableData = res.data.tableData
        this.total = res.data.tableData.length

        const zhMap = {}
        let stationType = 'E1'


        this.fromHead.forEach((item) => {

          if (item.field != 'time') {
            zhMap[item.title] = []
          }
          if (item.field == 'wsHubHeight') {
            stationType = 'E2'
          }
        });


        let timeList = []
        this.tableData.forEach((item) => {
          this.fromHead.forEach((item1) => {
            if (item1.title != '时间') {
              zhMap[item1.title].push(item[item1.field])
            } else {
              timeList.push(item[item1.field])
            }
          });
        });
        // this.$nextTick(function () {
        //   this.zhxChart.resize();
        // })
        this.zhDraw(timeList, zhMap, stationType)
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    exportFile() {
      let startTime = Math.round(this.dateTime[0])
      let endTime = Math.round(this.dateTime[1])
      if (endTime <= startTime) {
        this.$message.warning("开始时间不能大于结束时间")
        return
      }
      if (endTime - startTime > 60 * 60 * 24 * 1000 * 15) {
        this.$message.warning("查询数据不能超过15天！")
        return
      }
      let queryParams = {
        "stationCode": this.stationCode,
        "startTime": startTime,
        "endTime": endTime,
        "forecastHowLongAgo": this.forecastHowLongAgo
      }

      this.$axios.get("/powerstationstatusdata/export/", {params: queryParams},{
        responseType: 'blob'// 用于解决中文乱码
      }).then((response) => {
        this.loading = false
      }).catch((error) => {
        this.loading = false
        this.$message.error('导出失败' + error)
      })
    },
    async getStationCode() {
      await this.$axios({url: '/electricfield/all', method: 'get'}).then(response => {
        this.stationList = response.data
        if (this.stationList.length > 0) {
          // 判断缓存中是否是首页地图跳转
          if (localStorage.getItem('map-jump-staion')==''){
            this.stationCode = this.stationList[0].value
          }
          else{
            this.stationCode = localStorage.getItem('map-jump-staion')
          }
          this.dataQuery()
        }
      })
    },
    zhDraw(timeList, zhMap, stationType) {
      this.zhxChart = echarts.init(this.$refs.zhxCharts, 'dark', {renderer: 'svg'})
      let option = {
        backgroundColor: 'transparent',
        title: {
          top: 20,
          text: '中心功率预测',
          textStyle: {
            fontWeight: 'normal',
            fontSize: 16,
            // color: this.lineColor
          },
          left: '1%'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            lineStyle: {
              color: '#57617B'
            }
          }
        },
        legend: {
          top: 20,
          width: '70%',
          icon: 'rect',
          itemWidth: 14,
          itemHeight: 5,
          itemGap: 13,
          data: [],
          right: '4%',
          textStyle: {
            fontSize: 12,
            // color: this.lineColor
          },
          selected: {}
        },
        dataZoom: [
          //   {
          //   show: true,
          //   realtime: true,
          //   start: 0,
          //   end: 100,
          //   left: "15%",
          //   right: "15%",
          //   // textStyle: {
          //   // color: this.lineColor
          //   // }
          // },
          {
            type: 'inside'
          }],
        grid: {
          top: 100,
          left: '2%',
          right: '2%',
          bottom: '10%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          boundaryGap: false,
          // axisLine: {
          //   lineStyle: {
          //     color: this.lineColor
          //   }
          // },
          data: []
        }],
        yAxis: [{
          type: 'value',
          name: 'MW',
          axisTick: {
            show: false
          },
          // axisLine: {
          //   lineStyle: {
          //     color: this.lineColor
          //   }
          // },
          axisLabel: {
            margin: 10,
            textStyle: {
              fontSize: 14,
              // color: this.lineColor
            },
            formatter: '{value}',
          },
          splitLine: {
            lineStyle: {
              color: '#57617B'
            }
          }
        }, {
          type: 'value',
          name: '',
          axisTick: {
            show: false
          },
          // axisLine: {
          //   lineStyle: {
          //     color: this.lineColor
          //   }
          // },

          axisLabel: {
            margin: 10,
            textStyle: {
              fontSize: 14,
              // color: this.lineColor
            },
            formatter: '{value}',
          },
          splitLine: {
            lineStyle: {
              color: '#57617B'
            }
          }
        }],
        series: []
      }
      option.xAxis[0].data = timeList
      if (stationType == 'E1') {
        option.yAxis[1].name = 'W/㎡'
      } else {
        option.yAxis[1].name = 'm/s'
      }

      let index = 0;
      for (let key in zhMap) {
        for (let i = 0; i < zhMap[key].length; i++) {
          zhMap[key][i] = zhMap[key][i] == -99 ? null : zhMap[key][i]
        }
        option.legend.data.push(key)

        let sValue = {
          name: key,
          type: 'line',
          yAxisIndex: 0,
          smooth: false,
          symbol: 'circle',
          symbolSize: 5,
          showSymbol: false,
          lineStyle: {
            normal: {
              width: 2
            }
          },
          itemStyle: this.lineStyle[index].itemStyle,
          data: zhMap[key]
        }
        if (key == '轮毂风速' || key == '总辐射') {
          sValue.yAxisIndex = 1
        }
        option.series.push(sValue)
        index++;
      }
      this.zhxChart.setOption(option, true)
      // window.addEventListener("resize", () => {
      //   this.zhxChart.resize();
      // });
    },
    points() {
      let points = []

      for (let i = 1; i < 11; i++) {
        points.push({label: i + "", value: i})
      }

      return points
    }
  },
}
</script>

<style scoped>
/* //然后给对应的单元格样式 */
>>> .vxe-table .vxe-body--row .vxe-body--column.class-style-yellow {

  color: #FFFF00;
}

>>> .vxe-table .vxe-body--row .vxe-body--column.class-style-red {
  color: #FF0000;
}
</style>
<!--&gt;>>.vxe-table .vxe-body&#45;&#45;row .vxe-body&#45;&#45;column.class-style .vxe-cell .vxe-cell&#45;&#45;label{-->