<template>
  <el-row :gutter="20">
    <el-col :span="24">
      <div>
        <el-menu
          mode="horizontal"
          style="min-height: 50px; margin-top: -20px"
          default-active="1"
          @select="switchMenu"
        >
          <el-menu-item index="1">
            <span slot="title">运费</span>
          </el-menu-item>
          <el-menu-item index="2">
            <span slot="title">旺季/紧急附加费</span>
          </el-menu-item>
          <el-menu-item index="3">
            <span slot="title">燃油</span>
          </el-menu-item>
        </el-menu>
      </div>
    </el-col>
    <el-col v-if="menuIndex == 1" :span="24">
      <h5>
        生效时间:{{ EnableTime }}
        <el-button
          v-show="showSettlemen"
          @click="
            dialogSettlemen = true;
            SettlemenDto.customerids=[];
          "
          >结算价导入</el-button
        >
        <el-button
          @click="
            dialogAdjustment = true;
            loadExpress();
          "
          >调整运费</el-button
        >
        <!-- <el-button
          @click="
            batchUpdateFreight();
          "
          >一键更新运费</el-button
        > -->
      </h5>
      <div
        id="container"
        style="position: relative; z-index: 1; overflow: hidden"
      >
        <div id="xAxis" />
        <div id="yAxis" />
        <el-table
          ref="elTable"
          cell-class-name="cell-custom"
          border
          class="elTable"
          :data="sdata"
          width="980"
          max-height="550"
          @cell-mouse-enter="cellClick"
        >
          <el-table-column
            label="公斤/分区"
            prop="公斤/分区"
            fixed
            min-width="100"
          />
          <el-table-column
            v-for="item in columes.filter((x) => x != '公斤/分区')"
            :key="item"
            :label="item"
            :prop="item"
          />
        </el-table>
      </div>
    </el-col>
    <el-col v-if="menuIndex == 2" :span="24">
      <div>
        <h5>
          生效时间:{{ additionalChargeEnableTime
          }}<el-button
            @click="
              dialogAttachFee = true;
              SettlemenDto.customerids.length>0?SettlemenDto.customerids=[]:SettlemenDto.customerids
            "
            v-show="showSettlemen"
            >导入附加费</el-button
          >
        </h5>
        <el-table
          ref="elTable"
          cell-class-name="cell-custom"
          border
          class="elTable"
          :data="additionalChargeData"
          width="980"
          max-height="550"
        >
          <el-table-column label="分区" prop="zone" fixed min-width="100" />
          <el-table-column
            label="国家简码"
            prop="CountryCode"
            fixed
            min-width="100"
          />
          <el-table-column label="首重重量(g)" prop="FristWeight" fixed />
          <el-table-column label="首重费用" prop="FristFee" fixed />
          <el-table-column label="续重重量(g)" prop="ContinuedWeight" fixed />
          <el-table-column label="续重费用" prop="ContinuedFee" fixed />
        </el-table>
      </div>
    </el-col>
    <el-col v-if="menuIndex == 3" :span="24">
      <el-table :data="feeOtherData" max-height="550">
        <el-table-column
          label="生效日期"
          prop="EffectiveDate"
          fixed
          min-width="100"
        />
        <el-table-column label="费率" prop="Price" fixed min-width="100">
          <template slot-scope="r"> {{ r.row.Price }}% </template>
        </el-table-column>
      </el-table>
    </el-col>
    <div>
    <el-dialog title="运费调整" :visible.sync="dialogAdjustment">
      <el-form label-position="right" label-width="150px">
        <el-form-item label="调整客户">
          <el-select v-model="SettlemenDto.customerids" multiple filterable>
             <el-checkbox
                v-model="check"
                :indeterminate="SettlemenDto.customerids.length !== allCustomers.length"
                @change="selectAllCustomers"
              >
                全选
              </el-checkbox>
            <el-option
              v-for="item in allCustomers"
              :key="item.Id"
              :value="item.Id"
              :label="item.CompanyName"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="调整线路">
          <el-input v-model="SettlemenDto.channelname" disabled />
        </el-form-item>
        <el-form-item label="生效时间">
          <el-date-picker
            v-model="SettlemenDto.setTime"
            value-format="yyyy-MM-dd"
          />
          <span
            v-show="SettlemenDto.isChange && !SettlemenDto.setTime"
            style="color: red"
          >
            *当前报价已变更，必须填入生效时间
          </span>
        </el-form-item>
        <el-form-item label="调整内容">
          <el-row
            v-for="(adj, index) in SettlemenDto.ajds"
            :key="index"
            :gutter="5"
          >
            <el-col :span="6">
              <el-form-item label="分区" label-width="50px" size="mini">
                <el-select v-model="adj.Zone" filterable multiple>
                  <el-option
                    v-for="item in expressZones"
                    :key="item"
                    :value="item"
                    :label="item"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="方式" label-width="50px" size="mini">
                <el-select v-model="adj.Mode" filterable>
                  <el-option
                    v-for="item in AdjustmentMode"
                    :key="item.Value"
                    :value="item.Value"
                    :label="item.Key"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="值" label-width="50px" size="mini">
                <el-input v-model="adj.Value">
                  <!-- <template slot="append">%</template> -->
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item size="mini">
                <el-button @click="pushAdj(index)">+</el-button>
                <el-button @click="removeAdj(index)">-</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="预览">
          <el-button type="warning" @click="viewAdj()">预览</el-button>
        </el-form-item>
        <el-form-item label="调整说明(非必填)">
          <el-input v-model="SettlemenDto.Remark" type="textarea" :rows="2" />
        </el-form-item>
        <el-form-item label="内容预览">
          <el-table
            border
            :highlight-current-row="true"
            width="100%"
            :data="viewSettlemenData"
            max-height="400px"
          >
            <el-table-column
              label="公斤/分区"
              prop="公斤/分区"
              fixed
              min-width="100"
            />
            <el-table-column
              v-for="item in columes2.filter((x) => x != '公斤/分区')"
              :key="item"
              :label="item"
              :prop="item"
            />
          </el-table>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogAdjustment = false">取 消</el-button>
        <el-button type="primary" @click="SendExpressData()">提 交</el-button>
      </span>
    </el-dialog>
    </div>
    <div>
    <el-dialog title="结算价调整" :visible.sync="dialogSettlemen">
      <el-form label-position="right" label-width="150px">
        <el-form-item label="调整分公司">
          <el-select
            v-model="SettlemenDto.customerids"
            placeholder="分公司"
            clearable
            filterable
            multiple
          >
            <el-option
              v-for="item in branchOffice"
              :key="item.Id"
              :label="item.CompanyName"
              :value="item.Id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="生效时间">
          <el-date-picker
            v-model="SettlemenDto.setTime"
            value-format="yyyy-MM-dd"
          />
          <span
            v-show="SettlemenDto.isChange && !SettlemenDto.setTime"
            style="color: red"
          >
            *当前报价已变更，必须填入生效时间
          </span>
        </el-form-item>
        <el-form-item label="调整说明(非必填)">
          <el-input v-model="SettlemenDto.Remark" type="textarea" :rows="2" />
        </el-form-item>
        <el-form-item label="导入数据">
          <el-upload
            :action="SettlementApi"
            :headers="header"
            :multiple="false"
            :on-success="inputSettlemenDataSuccess"
            :loading="updateSettlemenDataLoading"
            :before-upload="inputSettlemenDataLoad"
            :on-error="inputSettlemenDataError"
          >
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="模板">
          <span style="padding-right:20px;">
          <a type="button" :href="FedexTemplateUrl" target="_bank">Fedex模板</a>
          </span>
          <span><a type="button" :href="DHLTemplateUrl" target="_bank">DHL模板</a></span>
        </el-form-item>
        
        <el-form-item label="内容预览">
          <el-table
            border
            :highlight-current-row="true"
            width="100%"
            :data="viewSettlemenData"
            max-height="400px"
          >
            <el-table-column
              label="公斤/分区"
              prop="公斤/分区"
              fixed
              min-width="100"
            />
            <el-table-column
              v-for="item in columes2.filter((x) => x != '公斤/分区')"
              :key="item"
              :label="item"
              :prop="item"
            />
          </el-table>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogSettlemen = false">取 消</el-button>
        <el-button type="primary" @click="SendSettlemenData()">提 交</el-button>
      </span>
    </el-dialog>
    </div>
    <div>
    <el-dialog title="附加费调整" :visible.sync="dialogAttachFee">
      <el-form label-position="right" label-width="150px">
        <el-form-item label="调整分公司">
          <el-select
            v-model="SettlemenDto.customerids"
            placeholder="分公司"
            clearable
            filterable
            multiple
          >
            <el-option
              v-for="item in branchOffice"
              :key="item.Id"
              :label="item.CompanyName"
              :value="item.Id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="生效时间">
          <el-date-picker
            v-model="SettlemenDto.setTime"
            value-format="yyyy-MM-dd"
          />
          <span
            v-show="SettlemenDto.isChange && !SettlemenDto.setTime"
            style="color: red"
          >
            *当前报价已变更，必须填入生效时间
          </span>
        </el-form-item>
        <el-form-item label="调整线路">
          <el-input v-model="SettlemenDto.channelname" disabled />
        </el-form-item>
        <el-form-item label="导入数据">
          <el-upload
            :action="AttachFeeApi"
            :headers="header"
            :multiple="false"
            :on-success="inputAttachFeeSuccess"
            :loading="updateAttachFeeLoading"
            :before-upload="inputAttachFeeLoad"
            :on-error="inputAttachFeeError"
          >
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="模板">
          <a type="button" :href="AttachFeeTemplateUrl" target="_bank"
            >点击下载</a
          >
        </el-form-item>
        <el-form-item label="内容预览">
          <el-table
            border
            :highlight-current-row="true"
            width="100%"
            :data="viewAttachFeeData"
            max-height="400px"
          >
            <el-table-column label="分区" prop="操作费" fixed min-width="100" />
            <el-table-column
              label="国家简码"
              prop="国家"
              fixed
              min-width="100"
            />
            <el-table-column label="首重重量(g)" prop="起重" fixed />
            <el-table-column label="首重费用" prop="起重费" fixed />
            <el-table-column label="续重重量(g)" prop="续重" fixed />
            <el-table-column label="续重费用" prop="续重费" fixed />
          </el-table>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogAttachFee = false">取 消</el-button>
        <el-button type="primary" @click="SendAttachFeeData()">提 交</el-button>
      </span>
    </el-dialog>
    </div>
  </el-row>
</template>
<script>
import { _getCustomers } from "@/api/baseInfo";
import { getToken } from "@/utils/auth";
import {
  postBatchChange,
  getSettlementAdjustmentMode,
  GetExoressZones,
  GetExpressFeeAsAdjustment,
  GenerateExpressFeeFile,
  AddQuoteJobBySales,
} from "@/api/financeQuotation";
import { mapGetters } from "vuex";
export default {
  name: "Express",
  props: [
    "basedata",
    "customerids",
    "expressid",
    "channelname",
    "customers",
    "pagerSerach",
  ],
  computed: {
    ...mapGetters(["roles"]),
  },
  data: function () {
    return {
      dialogAdjustment: false,
      dialogAttachFee: false,
      viewSettlemenData: [],
      viewAttachFeeData: [],
      header: { Authorization: "token " + getToken() },
      FedexTemplateUrl: "http://120.24.149.148/Data/Template/ExpressSettlemen.xlsx",
      DHLTemplateUrl: "http://120.24.149.148/Data/Template/DHL结算价模板.xlsx",
      AttachFeeTemplateUrl:
        "http://120.24.149.148/Data/Template/附加费-模板.xlsx",
      dialogSettlemen: false,
      SettlementApi:
        process.env.VUE_APP_New_API +
        "/FinanceQuotation/InputExpressSettlement",
      AttachFeeApi:"",
      xAxisTop: 0,
      yAxisLeft: 0,
      sdata: [],
      additionalChargeData: [],
      feeOtherData: [],
      additionalChargeEnableTime: "",
      SettlemenDto: {
        fileUrl: "",
        customerids: [],
        expressid: 0,
        channelname: "",
        ajds: [
          {
            Zone: 0,
            Mode: 1,
            Value: 0,
          },
        ],
      },
      columes2: [],
      columes: [],
      allCustomers: [],
      branchOffice: [],
      updateSettlemenDataLoading: false,
      updateAttachFeeLoading: false,
      EnableTime: "",
      menuIndex: 1,
      AdjustmentMode: [],
      baseFee: [],
      expressZones: [],
      adjustmentDto: null,
      showSettlemen: false,
    };
  },
  watch: {
    basedata(n, o) {
      this.additionalChargeData = n.additionalCharge;
      if (this.additionalChargeData.length > 0) {
        this.additionalChargeEnableTime =
          this.additionalChargeData[0].EnableTime;
      }
      this.feeOtherData = n.feeOther;
      this.sdata = JSON.parse(n.jsonData);
      if (n.feeBase != null) {
        this.EnableTime = n.feeBase.EnableTime;
      }
      this.columes = [];
      for (var i in this.sdata[0]) {
        this.columes[this.columes.length] = i;
      }
    },
    customerids(n, o) {
      this.SettlemenDto.customerids = n;
    },
    expressid(n, o) {
      // 加载分区
      this.SettlemenDto.expressid = n;
      this.AttachFeeApi =process.env.VUE_APP_New_API +
        "/Finance_ServiceSurcharge/AddServiceSurcharge?ExpressId="+ this.SettlemenDto.expressid;
    },
    channelname(n, o) {
      this.SettlemenDto.channelname = n;
    },
    customers(n, o) {
      this.allCustomers = n;
      this.branchOffice = n.filter((x) => x.Type == 1);
    },
  },
  mounted() {
    //判断用户角色
    this.showSettlemen = this.roles.includes("结算价管理员");
    const _this = this;
    const table = this.$refs.elTable.bodyWrapper;
    table.addEventListener("scroll", () => {
      document.getElementById("xAxis").style.top =
        _this.xAxisTop - table.scrollTop + "px";
      document.getElementById("yAxis").style.left =
        _this.yAxisLeft - table.scrollLeft + "px";
    });
    getSettlementAdjustmentMode().then((r) => {
      this.AdjustmentMode = r;
    });
  },
  methods: {
    selectAllCustomers (checked) {
      if (checked) {
        this.SettlemenDto.customerids = this.allCustomers.map(d => d.Id)
      } else {
        this.SettlemenDto.customerids = []
      }
    },
    loadExpress() {
      GetExoressZones(this.SettlemenDto.expressid).then((r) => {
        this.expressZones = r;
      });
    },
    batchUpdateFreight(){
     if (this.SettlemenDto.expressid == 0) {
        this.$message({ type: "error", message: "请选择渠道，并点击查询！" });
        return false;
      }
      this.$confirm("按照最新结算价，与现有调整方案，更新所有已调整过的客户，执行时间较长，请勿重复点击！是否继续？", "提示", {
          cancelButtonText: "取消",
          confirmButtonText: "确定",
          type: "warning",
        }).then(() => {
          AddQuoteJobBySales(this.SettlemenDto.expressid).then(()=>{
            this.$message({type:"success",message:"已添加任务！"});
          });
           
        });
    },
    viewAdj() {
      if (this.SettlemenDto.customerids.length == 0) {
        this.$message("请先选择客户");
        return false;
      }
      if (this.SettlemenDto.channelId == 0) {
        this.$message("请先选择渠道");
        return false;
      }
      var zones = [];
      for (var i = 0; i < this.SettlemenDto.ajds.length; i++) {
        var z = this.SettlemenDto.ajds[i].Zone.join(",");
        zones.push({
          Mode: this.SettlemenDto.ajds[i].Mode,
          Value: this.SettlemenDto.ajds[i].Value,
          Zone: z,
        });
      }
      this.adjustmentDto = {
        ExpressId: this.SettlemenDto.expressid,
        CustomerId: this.SettlemenDto.customerids,
        Details: zones,
      };
      GetExpressFeeAsAdjustment(this.adjustmentDto)
        .then((response) => {
          debugger;
          this.viewSettlemenData = JSON.parse(response.json);
          this.SettlemenDto.detail = response.detail;
          this.columes2 = [];
          for (var i in this.viewSettlemenData[0]) {
            this.columes2[this.columes2.length] = i;
          }
        })
        .finally((r) => {
          this.la;
        });
    },
    switchMenu(index) {
      this.menuIndex = index;
    },
    inputSettlement() {
      this.dialogSettlemen = true;
    },
    pushAdj(index) {
      this.SettlemenDto.ajds.splice(index, 0, { Zone: 0, Mode: 1, Value: 0 });
    },
    removeAdj(index) {
      if (this.SettlemenDto.ajds.length > 1) {
        this.SettlemenDto.ajds.splice(index, 1);
      } else {
        this.$message("须保留一项进行修改");
      }
    },
    inputSettlemenDataLoad() {
      if (this.updateSettlemenDataLoading) {
        this.$message("上传中，请勿重复上传");
        return false;
      } else {
        this.updateSettlemenDataLoading = true;
      }
    },

    inputSettlemenDataSuccess(response, file, fileList) {
      debugger;
      this.updateSettlemenDataLoading = false;
      this.viewSettlemenData = JSON.parse(response.data.json);
      this.SettlemenDto.fileUrl = response.data.url;
      this.SettlemenDto.detail = response.data.detail;
      this.columes2 = [];
      for (var i in this.viewSettlemenData[0]) {
        this.columes2[this.columes2.length] = i;
      }
    },
    inputAttachFeeLoad() {
      if (
        this.SettlemenDto.expressid == undefined ||
        this.SettlemenDto.expressid == 0
      ) {
        this.$message("请先选择渠道");
        return false;
      }
      if (this.updateAttachFeeLoading) {
        this.$message("上传中，请勿重复上传");
        return false;
      } else {
        this.updateAttachFeeLoading = true;
      }
    },
    inputAttachFeeSuccess(response, file, fileList) {
      this.updateAttachFeeLoading = false;
      this.viewAttachFeeData = response.data.detail;
      this.SettlemenDto.fileUrl = response.data.url;
      this.SettlemenDto.detail = response.data.detail;
    },
    inputAttachFeeError(response) {
      this.updateAttachFeeLoading = false;
      var msg = JSON.parse(response.message);
      this.$message(msg.message);
    },
    SendSettlemenData() {
      var fillter = [
        {
          setTime: this.SettlemenDto.setTime,
          Remark: this.SettlemenDto.Remark,
          FileUrl: this.SettlemenDto.fileUrl,
          ChangeCustomers: this.SettlemenDto.customerids, // 分公司，写死
          Expressid: this.SettlemenDto.expressid,
          ExpresssName: this.SettlemenDto.channelname,
          detail: this.SettlemenDto.detail,
        },
      ];
      if (fillter.length > 0 && this.SettlemenDto.setTime == null) {
        this.$message({ type: "error", message: "请输入生效时间" });
        return false;
      }
      if (this.channelId == 0) {
        this.$message({ type: "error", message: "请选择渠道，并点击查询！" });
        return false;
      }
      if (this.SettlemenDto.fileUrl == "") {
        this.$message({ type: "error", message: "请上传文件！" });
        return false;
      }

      postBatchChange(fillter).then((r) => {
        this.$message({ type: "success", message: "提交成功，等待批复" });
        this.dialogSettlemen = false;
        this.pagerSerach();
      });
    },
    SendExpressData() {
      var fillter = [
        {
          setTime: this.SettlemenDto.setTime,
          Remark: this.SettlemenDto.Remark,
          FileUrl: this.SettlemenDto.fileUrl,
          ChangeCustomers: this.SettlemenDto.customerids, // 分公司，写死
          Expressid: this.SettlemenDto.expressid,
          ExpresssName: this.SettlemenDto.channelname,
          detail: this.SettlemenDto.detail,
        },
      ];
      if (fillter.length > 0 && this.SettlemenDto.setTime == null) {
        this.$message({ type: "error", message: "请输入生效时间" });
        return false;
      }
      if (this.channelId == 0) {
        this.$message({ type: "error", message: "请选择渠道，并点击查询！" });
        return false;
      }
      if (
        this.SettlemenDto.detail == undefined ||
        this.SettlemenDto.detail < 1
      ) {
        this.$message({ type: "error", message: "请先预览数据，进行校验" });
        return false;
      }
      var data = {
        adjustmentDto: this.adjustmentDto,
        detail: this.SettlemenDto.detail,
      };
      GenerateExpressFeeFile(data).then((r) => {
        fillter.FileUrl = r;
        postBatchChange(fillter).then((r) => {
          this.$message({ type: "success", message: "提交成功，等待批复" });
          this.dialogAdjustment = false;
          this.pagerSerach();
        });
      });
    },
    SendAttachFeeData() {
      var fillter = [
        {
          setTime: this.SettlemenDto.setTime,
          Remark: "附加费调整",
          FileUrl: this.SettlemenDto.fileUrl,
          ChangeCustomers: this.SettlemenDto.customerids, // 分公司，写死
          Expressid: this.SettlemenDto.expressid,
          ExpresssName: this.SettlemenDto.channelname,
          detail: this.SettlemenDto.detail,
        },
      ];
      if (fillter.length > 0 && this.SettlemenDto.setTime == null) {
        this.$message({ type: "error", message: "请输入生效时间" });
        return false;
      }
      if (this.channelId == 0) {
        this.$message({ type: "error", message: "请选择渠道，并点击查询！" });
        return false;
      }
      if (this.SettlemenDto.fileUrl == "") {
        this.$message({ type: "error", message: "请上传文件！" });
        return false;
      }
      postBatchChange(fillter).then((r) => {
        this.$message({ type: "success", message: "提交成功，等待批复" });
        this.dialogAttachFee = false;
        this.pagerSerach();
      });
    },
    inputSettlemenDataError(response) {
      this.updateSettlemenDataLoading = false;
      var msg = JSON.parse(response.message);
      this.$message(msg.message);
    },
    cellClick(row, column, cell) {
      // 获取表格的滚动偏移量
      const table = this.$refs.elTable.bodyWrapper;
      const scrollTop = table.scrollTop;
      const scrollLeft = table.scrollLeft;

      // 容器，XY轴的宽高不能超过它
      const container = document
        .getElementById("container")
        .getBoundingClientRect();
      const maxHeight = container.height;

      // 重置所有单元格z-index
      const cells = document.getElementsByClassName("cell-custom");
      for (const i in cells) {
        if (cells[i].style) {
          cells[i].style.zIndex = "1";
        }
      }

      // 清除高亮单元格
      const highlineCell = document.getElementsByClassName("highline-cell")[0];
      if (highlineCell) {
        highlineCell.classList.remove("highline-cell");
      }

      // 获取X/Y轴
      const xAxis = document.getElementById("xAxis");
      const yAxis = document.getElementById("yAxis");

      // 重置X/Y轴位置
      xAxis.style.top = 0;
      yAxis.style.left = 0;

      const xRect = xAxis.getBoundingClientRect();
      const yRect = yAxis.getBoundingClientRect();
      const cellRect = cell.getBoundingClientRect();

      // 设置X轴高度，Y轴宽度
      xAxis.style.height = cellRect.height + "px";
      yAxis.style.width = cellRect.width + "px";

      // 设置X/Y轴位置
      xAxis.style.top = cellRect.top - xRect.top + "px";
      yAxis.style.left = cellRect.left - yRect.left + "px";

      // 记录XY轴位置，用于设置XY轴随滚动条移动
      this.xAxisTop = cellRect.top - xRect.top + scrollTop;
      this.yAxisLeft = cellRect.left - yRect.left + scrollLeft;

      // 设置选中单元格的样式
      cell.classList.add("highline-cell");
    },
  },
};
</script>
<style scoped lang="less">
#xAxis {
  position: absolute;
  width: 100%;
  background-color: #faf598;
  opacity: 0.5;
  z-index: 2;
  pointer-events: none;
}
#yAxis {
  position: absolute;
  height: 100%;
  background-color: #faf598;
  opacity: 0.5;
  z-index: 2;
  pointer-events: none;
}
.elTable {
  width: 100%;
  /deep/ .highline-cell {
    // 选中单元格的样式
    border: 2px solid green !important;
    background-color: white !important;
    z-index: 3 !important;
  }
}
</style>
