el-select选中变色及百分比怎么做

 <div class="stock-location">
          <el-form-item :label="$t('lang.intoStockLocation')" prop="shelvesSn">
            <div class="changeColor" style="position: relative;">
            //使用内联样式，在它的外面给它加个div盒子,设置两个变量：宽度和颜色
              <div
                :style="{
                  position: 'absolute',
                  backgroundColor: backgroundColorShelves,
                  width: backgroundWidthShelves + 'px',
                  height: '40px',
                  borderRadius: '5px'
                }"
              ></div>
              <el-select
                v-model="ruleForm.shelvesSn"
                class="shelfLocation"
                :placeholder="$t('lang.pleaseSelect')"
                @change="handleShelvesChange"
                popper-class="changeColor-select"
              >
                <el-option
                  :label="
                    item.shelvesUsage > 0
                      ? $t('lang.shelfUsage', {
                          shelf: item.shelvesSn,
                          usage: item.shelvesUsage
                        })
                      : item.shelvesSn
                  "
                  :value="item.shelvesSn"
                  v-for="(item, index) in shelvesList"
                  :key="index"
                ></el-option>
              </el-select>
            </div>
            <div class="unit">{{ $t("lang.shielf") }}</div>
          </el-form-item>
       
          <el-form-item
            prop="shelvesLevel"
            :label="$t('lang.nth')"
            label-width="22px"
          >
            <div class="changeColor" style="position: relative;">
              <div
                :style="{
                  position: 'absolute',
                  backgroundColor: backgroundColor,
                  width: backgroundWidth + 'px',
                  height: '40px',
                  borderRadius: '5px'
                }"
              ></div>
              <Popover placement="top" :imageUrl="imgUrl" v-if="imgUrl">
                <el-select
                  v-model="ruleForm.shelvesLevel"
                  class="shelfLevel"
                  :placeholder="$t('lang.pleaseSelect')"
                  @change="handleLevelChange"
                  popper-class="changeColor-select"
                >
                  <el-option
                    :label="
                      item.usage > 0
                        ? $t('lang.levelUsage', {
                            level: item.level,
                            usage: item.usage
                          })
                        : item.level
                    "
                    :value="item.level"
                    v-for="(item, index) in levelList"
                    :key="index"
                  ></el-option>
                </el-select>
              </Popover>
              <el-select
                v-else
                v-model="ruleForm.shelvesLevel"
                class="shelfLevel"
                :placeholder="$t('lang.pleaseSelect')"
                @change="handleLevelChange"
              >
                <el-option
                  :label="
                    item.usage > 0
                      ? $t('lang.levelUsage', {
                          level: item.level,
                          usage: item.usage
                        })
                      : item.level
                  "
                  :value="item.level"
                  v-for="(item, index) in levelList"
                  :key="index"
                ></el-option>
              </el-select>
            </div>
            <div class="unit">{{ $t("lang.level") }}</div>
          </el-form-item>
        </div>

<script>
export default {
data(){
  return {
    //定义变量给它一个默认值
      backgroundColorShelves: "white",//货架编号
      backgroundWidthShelves: 0,
      backgroundColor: "white",//货架层级
      backgroundWidth: 0,
    
  }
},

//定义变颜色以及宽度变化的方法
//改变货架编号
 updateStyleShelves(percentage1, percentage2) {
    //为什么设置202是因为输入框的宽度是202
      this.backgroundWidthShelves = 202 * percentage1;
      this.backgroundColorShelves = percentage1 > 0.8 ? "#ffe2e2" : "#fff0e0";
      this.backgroundWidth = 202 * percentage2;
      this.backgroundColor = percentage2 > 0.8 ? "#ffe2e2" : "#fff0e0";
    },
    
//改变货架层级
    updateStyle(percentage) {
      this.backgroundWidth = 202 * percentage;
      this.backgroundColor = percentage > 0.8 ? "#ffe2e2" : "#fff0e0";
    },
    
 //改变货架编号的方法       
  handleShelvesChange(item) {
      //定义一个选中的货架
      const selectedShelf = this.shelvesList.filter(
        ele => ele.shelvesSn === item //item为货架编号
      );
      if (selectedShelf && selectedShelf.length > 0) {
        //监控层
        this.levelList = selectedShelf[0].floors || [];
        this.shelvesUsePercentage = Number(selectedShelf[0].shelvesUsage) / 100;
        this.ruleForm.shelvesLevel = this.levelList.length > 0 ? 1 : "";
        this.defaultlevelUsePercentage = Number(this.levelList[0].usage) / 100; //选择货架编号的默认第一个的货架的百分比
        // console.log("123",this.shelvesUsePercentage, this.defaultlevelUsePercentage)
        //调用变色的方法，将货架编号百分比以及货架层数百分比传进去
        this.updateStyleShelves(
          this.shelvesUsePercentage,
          this.defaultlevelUsePercentage
        );
         }
      this.checkSelectedShelves();
    },
    
 //改变货架层级的方法   
  handleLevelChange(val) {
      this.defineUsagePercentAndImageUrl(val);
      this.updateStyle(this.levelUsePercentage);
  }
 </script>

handleShelvesChange(item) {
      //定义一个选中的货架
      const selectedShelf = this.shelvesList.filter(
        ele => ele.shelvesSn === item
      );
      if (selectedShelf && selectedShelf.length > 0) {
       //监控层
        this.levelList = selectedShelf[0].floors || [];
        this.shelvesUsePercentage = Number(selectedShelf[0].shelvesUsage) / 100;
        this.ruleForm.shelvesLevel = this.levelList.length > 0 ? 1 : "";
        if (this.ruleForm.shelvesLevel) {
          this.defineUsagePercentAndImageUrl(this.ruleForm.shelvesLevel);
          // 插入背景色(货架层)
          if (this.isShowUsage) {
          //关键代码，他传的是选择器和百分比
            this.calculateSelectBackground(
              ".shelfLevel>.el-input",
              this.levelUsePercentage
            );
            // 插入背景色(货架)
            this.calculateSelectBackground(
              ".shelfLocation>.el-input",
              this.shelvesUsePercentage
            );
          }
        }
      }
      this.checkSelectedShelves();
    },
    changeCheckbox() {
      if (this.checked == false) {
        this.ruleForm.operateType = 0;
      } else {
        this.ruleForm.operateType = 2;
      }
    },
    // 用js向下拉选择框插入背景色百分比进度条
    calculateSelectBackground(selector, percentage) {
      console.log(selector, percentage);
      let dom = document.querySelector(selector);
      if (dom) {
        let lastDom = document.querySelector(`${selector}>div`);
        if (lastDom) {
          dom.removeChild(lastDom);
        }
        console.log(selector, percentage, 2);
        let domHeight = dom.offsetHeight - 2;
        let domWidth = dom.offsetWidth * percentage;
        let newDom = document.createElement("div");
        console.log(domHeight, domWidth, percentage, 3);
        //这样的写法
        newDom.style = `
          width: ${domWidth}px;
          height: ${domHeight}px;
          background: ${percentage > 0.8 ? "#ffe2e2" : "#fff0e0"};
          position: absolute;
          border-radius:4px;
          opacity:0.5;
          bottom:0px;
        `;
        dom.insertBefore(newDom, dom.children[0]);
      }
    },
    destroyDom(selector) {
      let dom = document.querySelector(selector);
      let lastDom = document.querySelector(`${selector}>div`);
      if (lastDom) {
        dom.removeChild(lastDom);
      }
    },
    handleLevelChange(val) {
      this.ruleForm.shelvesLevel = val;
      this.defineUsagePercentAndImageUrl(val);
      this.checkSelectedShelves();
      // console.log(this.isShowUsage);
      if (this.isShowUsage) {
        this.calculateSelectBackground(
          ".shelfLevel>.el-input",
          this.levelUsePercentage
        );
      } else {
        this.calculateSelectBackground(".shelfLevel>.el-input", 0);
      }
    },
    defineUsagePercentAndImageUrl(val) {
      const selectedItem = this.levelList.filter(item => item.level === val)[0];
      this.levelUsePercentage = Number(selectedItem.usage) / 100;
      this.imgUrl = selectedItem.url;
      this.isShowUsage = selectedItem.usage > 0; //图片对否显示：false不显示，true显示
    },
   checkSelectedShelves() {
      if (this.selectedShelvesList.length > 0) {
        const selectedShelf = this.selectedShelvesList.filter(
          item =>
            item.shelvesSn === this.ruleForm.shelvesSn &&
            item.shelvesLevel === this.ruleForm.shelvesLevel
        );
        if (selectedShelf.length > 0) {
          this.selectedShelvesList.forEach((elem, idx) => {
            if (
              selectedShelf[0].shelvesLevel === elem.shelvesLevel &&
              selectedShelf[0].shelvesSn === elem.shelvesSn
            ) {
              this.mouseIndex = idx;
              this.isSelectShow = true;
            }
          });
        } else {
          this.mouseIndex = -1;
          this.isSelectShow = false;
        }
      }
    },