<template>
  <div class="box-center">
    <div class="app-top">
      <div class="app-titel" v-if="role != 3" style="margin-bottom: 10px">
        <div class="titel-text">项目选择:</div>
        <div style="margin-left: 26px">
          <el-select
            v-model="houseId"
            filterable
            placeholder="请选择"
            @change="houseChange"
          >
            <el-option
              v-for="item in houseList"
              :key="item.id"
              :label="item.propertyName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="app-titel">
        <div style="text-indent: 30px">接待时间:</div>
        <div class="toptimeqhuan">
          <div :class="{ tophove: dateType == 4 }" @click="tabtimetap(4)">
            近7天
          </div>
          <div :class="{ tophove: dateType == 5 }" @click="tabtimetap(5)">
            近15天
          </div>
          <div :class="{ tophove: dateType == 6 }" @click="tabtimetap(6)">
            近30天
          </div>
        </div>
        <div style="margin-left: 26px">
          <el-date-picker
            v-model="customtime"
            @change="confirmtime()"
            type="daterange"
            range-separator="-"
            :default-time="['00:00:00', '23:59:59']"
            value-format="yyyy-MM-dd"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </div>
        <div style="margin-left: 26px" class="div-lab">
          <div class="label">团队</div>
          <el-select
            v-model="deptId"
            filterable
            @change="deptChange"
            placeholder="请选择"
            class="div-inp"
          >
            <el-option
              v-for="item in options"
              :key="item.deptId"
              :label="item.name"
              :value="item.deptId"
            >
            </el-option>
          </el-select>
        </div>
      </div>
    </div>
    <!-- 表格 -->
    <div class="cen-tab">
      <div class="app-titel1">
        <div class="toptimeqhuan">
          <div :class="{ tophove: tabFlag == 0 }" @click="tabFlagChange(0)">
            销讲统计
          </div>
          <div :class="{ tophove: tabFlag == 1 }" @click="tabFlagChange(1)">
            违禁统计
          </div>
        </div>
        <div
          style="margin-left: auto; margin-right: 10px"
          v-if="sta_men_downLoad"
        >
          <el-button @click="downLoad">导出</el-button>
        </div>
      </div>
      <el-table max-height="300" :data="tableData" stripe style="width: 100%">
        <el-table-column prop="batchId" label="序号" align="center">
          <template slot-scope="scope">
            {{
              scope.$index == tableData.length - 1
                ? "合计/平均"
                : scope.$index + 1
            }}
          </template>
        </el-table-column>
        <el-table-column prop="accountName" label="顾问" align="center">
        </el-table-column>
        <el-table-column prop="deptName" label="归属团队" align="center">
        </el-table-column>
        <el-table-column
          prop="activeCustomer"
          label="接待量"
          align="center"
          sortable
        >
          <template slot-scope="{ row }"> {{ row.activeCustomer }}次 </template>
        </el-table-column>
        <el-table-column
          v-if="tabFlag == 1"
          prop="prohibitedCustomer"
          label="违禁接待次数"
          align="center"
          sortable
        >
          <template slot-scope="{ row }">
            {{ row.prohibitedCustomer }}次
          </template>
        </el-table-column>
        <el-table-column
          v-if="tabFlag == 1"
          prop="prohibitedZb"
          label="违禁接待占比"
          align="center"
          sortable
        >
          <template slot-scope="{ row }"> {{ row.prohibitedZb }}% </template>
        </el-table-column>
        <el-table-column
          v-if="tabFlag == 0"
          prop="realityEquipmentCount"
          label="接待时长"
          align="center"
          sortable
          width="110"
        >
          <template slot-scope="{ row }">
            {{ Math.floor(row.sumDuration / 60) }}分钟
          </template>
        </el-table-column>
        <el-table-column
          v-if="tabFlag == 0"
          prop="fraction"
          label="销讲执行率"
          align="center"
          sortable
          width="110"
        >
          <template slot-scope="{ row }"> {{ row.fraction }}% </template>
        </el-table-column>
        <el-table-column
          v-for="(item, idx) in tablist"
          :key="idx"
          :prop="item.props"
          :label="item.label"
          align="center"
          sortable
          width="100"
        >
          <template slot-scope="{ row }"> {{ row[item.props] }}% </template>
        </el-table-column>
      </el-table>
      <div style="display: flex; justify-content: flex-end; margin-top: 10px">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="current"
          :page-sizes="[10, 30, 50]"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>

    <div class="app-box-san">
      <div class="zuo">
        <div class="title">
          <div class="text1">接待量排名（TOP10）</div>
        </div>
        <div class="hejisan">
          <div class="sanbox1" style="width: 35%">
            <div class="text1-1">接待合计</div>
            <div class="text1-2">{{ sum1 }}次</div>
          </div>
          <div class="sanbox1" style="width: 40%">
            <div class="text1-1">顾问人数</div>
            <div class="text1-2">{{ num1 }}个</div>
          </div>
          <div class="sanbox1" style="width: 25%">
            <div class="text1-1">人均接待</div>
            <div class="text1-2">{{ avg1 }}次</div>
          </div>
        </div>
        <div
          v-if="echarlist.length != 0"
          style="min-height: 258px; width: 94%; margin: 0 auto;padding: 0 0 20px 0;"
        >
          <div class="jinbox" v-for="(item, i) in echarlist" :key="i">
            <div class="jinboxtit">{{ item.name }}</div>
            <div class="jinbox-box">
              <div
                class="boxbaifenbi"
                :style="'width:' + item.zxl1 + '%;'"
              ></div>
            </div>
            <div class="jinboxbott">{{ item.zxl }}次</div>
          </div>
        </div>
        <div
          class="nulllist"
          style="height: 250px"
          v-if="echarlist.length == 0"
        >
          <div class="imgboxc">
            <img class="imgboxc-img" src="/img/nullnull.png" alt="" />
            <div class="nulltext">暂无数据</div>
          </div>
        </div>
      </div>
      <div class="you">
        <div class="title">
          <div class="text1">接待时长排名（TOP10）</div>
        </div>

        <div class="hejisan">
          <div class="sanbox1" style="width: 35%">
            <div class="text1-1">接待时长合计</div>
            <div class="text1-2">{{ Math.floor(sum2 / 60) }}分钟</div>
          </div>
          <div class="sanbox1" style="width: 40%">
            <div class="text1-1">顾问人数</div>
            <div class="text1-2">{{ num2 }}个</div>
          </div>
          <div class="sanbox1" style="width: 25%">
            <div class="text1-1">均值</div>
            <div class="text1-2">{{ Math.floor(avg2 / 60) }}分钟</div>
          </div>
        </div>
        <div
          v-if="echarlist2.length != 0"
          style="min-height: 258px; width: 94%; margin: 0 auto;padding: 0 0 20px 0;"
        >
          <div class="jinbox" v-for="(item, i) in echarlist2" :key="i">
            <div class="jinboxtit">{{ item.name }}</div>
            <div class="jinbox-box">
              <div
                class="boxbaifenbi"
                :style="'width:' + item.percentage + '%;'"
              ></div>
            </div>
            <div class="jinboxbott">{{ item.zxl }}分钟</div>
          </div>
        </div>
        <div
          class="nulllist"
          style="height: 250px"
          v-if="echarlist2.length == 0"
        >
          <div class="imgboxc">
            <img class="imgboxc-img" src="/img/nullnull.png" alt="" />
            <div class="nulltext">暂无数据</div>
          </div>
        </div>
      </div>
    </div>

    <div class="app-box-san">
      <div class="zuo">
        <div class="title">
          <div class="text1">平均执行率排名（TOP10）</div>
          <div class="text2">
            <el-select
              @change="teamAllLevelidtap()"
              style="width: 90%; margin: 0 auto"
              v-model="teamAllLevelid"
              placeholder="请选择"
            >
              <el-option
                v-for="item in teamAllLevel"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="hejisan">
          <div class="sanbox1" style="width: 50%">
            <div class="text1-1">顾问人数</div>
            <div class="text1-2">{{ num3 }}个</div>
          </div>
          <div class="sanbox1" style="width: 50%">
            <div class="text1-1">平均执行</div>
            <div class="text1-2">{{ avg3 }}%</div>
          </div>
        </div>
        <div
          v-if="echarlist1.length != 0"
          style="min-height: 258px; width: 94%; margin: 0 auto;padding: 0 0 20px 0;"
        >
          <div class="jinbox" v-for="(item, i) in echarlist1" :key="i">
            <div class="jinboxtit">{{ item.name }}</div>
            <div class="jinbox-box">
              <div
                class="boxbaifenbi"
                :style="'width:' + item.zxl + '%;'"
              ></div>
            </div>
            <div class="jinboxbott">{{ item.zxl }}%</div>
          </div>
        </div>
        <div
          class="nulllist"
          style="height: 250px"
          v-if="echarlist1.length == 0"
        >
          <div class="imgboxc">
            <img class="imgboxc-img" src="/img/nullnull.png" alt="" />
            <div class="nulltext">暂无数据</div>
          </div>
        </div>
      </div>
      <div class="you">
        <div class="title">
          <div class="text1">违禁接待次数排名（TOP10）</div>
          <div class="text2">
            <el-select
              @change="teamAllLeve2tap()"
              style="width: 90%; margin: 0 auto"
              v-model="teamAllLeve2id"
              placeholder="请选择"
            >
              <el-option
                v-for="item in teamAllLeve2"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="hejisan">
          <div class="sanbox1" style="width: 35%">
            <div class="text1-1">违禁合计</div>
            <div class="text1-2">{{ sum4 }}次</div>
          </div>
          <div class="sanbox1" style="width: 40%">
            <div class="text1-1">顾问人数</div>
            <div class="text1-2">{{ num4 }}个</div>
          </div>
          <div class="sanbox1" style="width: 25%">
            <div class="text1-1">均值</div>
            <div class="text1-2">{{ avg4 }}次</div>
          </div>
        </div>
        <div
          v-if="echarlist3.length != 0"
          style="min-height: 258px; width: 94%; margin: 0 auto;padding: 0 0 20px 0;"
        >
          <div class="jinbox" v-for="(item, i) in echarlist3" :key="i">
            <div class="jinboxtit">{{ item.name }}</div>
            <div class="jinbox-box">
              <div
                class="boxbaifenbi"
                :style="'width:' + item.zxl1 + '%;'"
              ></div>
            </div>
            <div class="jinboxbott">{{ item.zxl }}次</div>
          </div>
        </div>
        <div
          class="nulllist"
          style="height: 250px"
          v-if="echarlist3.length == 0"
        >
          <div class="imgboxc">
            <img class="imgboxc-img" src="/img/nullnull.png" alt="" />
            <div class="nulltext">暂无数据</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { mapGetters } from "vuex";
import { exportMethodPost } from "@/util/util";
export default {
  name: "consultantBrand",
  data() {
    return {
      houseId: "",
      buildingoptions: [],
      houseList: [],
      dateType: 2,
      tabFlag: 0,
      current: 1,
      size: 10,
      total: 20,
      customtime: [],
      tablist: [],
      deptId: "",
      tableData: [],
      orgType: localStorage.getItem("orgType"),
      options: [],
      value: "1",
      statDateStart: "",
      statDateEnd: "",
      echarlist: [],
      echarlist1: [],
      echarlist2: [],
      echarlist3: [],
      teamAllLevel: [],
      teamAllLevelid: "",
      teamAllLeve2id: "",
      teamAllLeve2: [],
      sum1: "",
      avg1: "",
      num1: "",

      sum2: "",
      avg2: "",
      num2: "",

      sum3: "",
      avg3: "",
      num3: "",

      sum4: "",
      avg4: "",
      num4: "",
      houseList: [],
      role: "",
    };
  },
  computed: {
    ...mapGetters(["permissions"]),
  },
  created() {
    this.sta_men_downLoad = this.permissions["sta_men_downLoad"];
  },
  mounted() {
    this.role = localStorage.getItem("orgType");
    if (this.role == 3) {
      this.houseId = localStorage.getItem("houseId");
      this.tabtimetap(4);
      this.deptFindList();
      this.teamAllLeve();
    } else {
      this.zkhousePage();
    }
  },
  methods: {
    downLoad() {
      let obj = {
        houseId: this.houseId,
        statDateStart: this.statDateStart,
        statDateEnd: this.statDateEnd,
        deptId: this.deptId,
        dateType: this.dateType == 7 ? null : this.dateType,
        type: 1,
        current: 1,
        size: 1,
      };
      // exportMethodPost()
      exportMethodPost(
        "autoSR/cusStageStatistics/accountRankExport",
        "顾问排名",
        obj
      );
    },
    houseChange() {
      this.customtime = [];
      this.TimetoAhoose = 4;
      this.statDateStart = "";
      this.statDateEnd = "";
      this.sum1 = "";
      this.avg1 = "";
      this.num1 = "";

      this.sum2 = "";
      this.avg2 = "";
      this.num2 = "";

      this.sum3 = "";
      this.avg3 = "";
      this.num3 = "";

      this.sum4 = "";
      this.avg4 = "";
      this.num4 = "";
      this.tableData = [];
      this.tabFlag = 0;
      this.echarlist = [];
      this.echarlist1 = [];
      this.echarlist2 = [];
      this.echarlist3 = [];
      this.tabtimetap(4);
      this.deptFindList();
      this.teamAllLeve();
    },
    zkhousePage() {
      this.$api.api
        .findHouseByUser({
          orgType: localStorage.getItem("orgType"),
        })
        .then((res) => {
          this.houseList = res.data;
          this.houseId = res.data[0].id;
          this.tabtimetap(4);
          this.deptFindList();
          this.teamAllLeve();
        });
    },
    async deptChange() {
      await this.init();
    },
    // 获取一级
    teamAllLeve() {
      this.teamAllLevel = [{ name: "平均执行", value: "" }];
      this.teamAllLeve2 = [{ name: "总次数", value: "" }];
      let pamaet = {
        houseId: this.houseId,
        dateType: 0,
        statDateStart: this.statDateStart,
        statDateEnd: this.statDateEnd,
      };
      if (this.dateType == 7) {
        pamaet.dateType = null;
      } else {
        pamaet.dateType = this.dateType;
      }
      this.$api.http.teamAllLevel(pamaet).then((res) => {
        let arr1 = res.data.resultsList || [];
        let arr2 = res.data.sensitiveWordsList || [];
        arr1.map((item) => {
          this.teamAllLevel.push({
            name: item.name,
            value: item.marketingId,
          });
        });
        arr2.map((item) => {
          this.teamAllLeve2.push({
            name: item.words,
            value: item.words,
          });
        });
        this.teamAllLevelid = "";
        this.teamAllLeve2id = "";
      });
    },
    deptFindList() {
      this.options = [];
      // 获取团队
      this.$api.http
        .overviewfindList({
          houseId: this.houseId,
        })
        .then((res) => {
          let userinfo = JSON.parse(sessionStorage.getItem("zk-userInfo"));
          if (userinfo.content.deptType == 1) {
            this.options.push(...res.data);
            this.deptId = this.options[0].deptId;
          } else {
            this.options = [
              {
                name: "全部",
                deptId: "",
              },
            ];
            this.deptId = "";
            this.options.push(...res.data);
          }

          this.accountRank();
        });
    },
    async init() {
      this.accountRank();
      this.echarlist = await this.accountRankTOP10(1);
      this.echarlist1 = await this.accountRankTOP10(3, this.teamAllLevelid, "");
      this.echarlist2 = await this.accountRankTOP10(2);
      this.echarlist3 = await this.accountRankTOP10(4, "", this.teamAllLeve2id);
    },
    // 获取图标
    async accountRankTOP10(type, marketingId = "", words = "") {
      let res = await this.$api.api.accountRankTOP10({
        houseId: this.houseId,
        statDateStart: this.statDateStart,
        statDateEnd: this.statDateEnd,

        deptId: this.deptId,
        dateType: this.dateType == 7 ? null : this.dateType,
        type,
        marketingId,
        words,
      });
      this["sum" + type] = res.data.sum || 0;
      this["num" + type] = res.data.num || 0;
      this["avg" + type] = res.data.avg || 0;
      let arr = [];
      let max = 0;
      let newarr = res.data.list || [];
      if (newarr.length != 0) {
        res.data.list.map((item) => {
          let obj = {};
          if (type == 1) {
            obj.name = item.accountName;
            obj.zxl = item.activeCustomer;
            arr.push(obj);
          } else if (type == 2) {
            obj.name = item.accountName;
            obj.zxl = Math.floor(item.sumDuration / 60);
            if (max < obj.zxl) {
              max = obj.zxl;
            }
            arr.push(obj);
          } else if (type == 3) {
            obj.name = item.accountName;
            obj.zxl = item.fraction;
            arr.push(obj);
          } else {
            obj.name = item.accountName;
            obj.zxl = item.prohibitedCustomer;
            arr.push(obj);
          }
        });
      }

      if (type == 2) {
        arr.forEach((item) => {
          item.percentage = (item.zxl / max) * 100;
        });
      }

      if (type == 3) {
        arr = arr;
      }

      if (type == 4) {
        console.log(
          arr,
          "arr4,ajdklsajkldjaskldjakslajdklsajkldjaskldjakslajdklsajkldjaskldjakslajdklsajkldjaskldjakslajdklsajkldjaskldjakslajdklsajkldjaskldjaksl"
        );
        arr = this.dealData(arr);
      }
      return arr;
    },

    accountRank() {
      this.$api.api
        .accountRank({
          houseId: this.houseId,
          statDateStart: this.statDateStart,
          statDateEnd: this.statDateEnd,
          current: this.current,
          size: this.size,
          deptId: this.deptId,
          dateType: this.dateType == 7 ? null : this.dateType,
        })
        .then((res) => {
          this.tableData = res.data.records;
          // 数据处理
          // 需要两个数组，一个用来展示
          this.deailDate();
          this.total = res.data.total;
        });
    },
    confirmtime() {
      this.dateType = 7;
      this.statDateStart = this.customtime[0];
      this.statDateEnd = this.customtime[1];
      this.init();
    },
    deailDate() {
      this.tablist = [];
      // 当他是第一个 小将
      if (this.tabFlag == 0) {
        this.tableData[0].resultsList.map((item, idx) => {
          let obj = {};
          obj.label = item.name;
          obj.props = "str" + idx;
          this.tablist.push(obj);
        });
        this.tableData.map((item) => {
          this.tablist.map((item1, idx) => {
            item[item1.props] = item.resultsList[idx].zxl;
          });
        });
      } else {
        this.tableData[0].sensitiveWordsList.map((item, idx) => {
          let obj = {};
          obj.label = item.words;
          obj.props = "str" + idx;
          this.tablist.push(obj);
        });
        this.tableData.map((item) => {
          this.tablist.map((item1, idx) => {
            item[item1.props] = item.sensitiveWordsList[idx].num;
          });
        });
      }
    },
    //平均执行率切换一级
    async teamAllLevelidtap() {
      // this.teamData3();
      this.echarlist1 = await this.accountRankTOP10(3, this.teamAllLevelid, "");
    },
    //违禁接待次数一级切换
    async teamAllLeve2tap() {
      // this.teamData5();
      this.echarlist3 = await this.accountRankTOP10(4, "", this.teamAllLeve2id);
    },
    echarCreat() {
      let myChart = echarts.init(document.getElementById("echar"));
      let option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        color: [
          "#66AFF5",
          "#FABD2B",
          "#6F8EDC",
          "#FFCF8F",
          "#F98120",
          "#1CC99E",
          "#9474FB",
          "#657292",
          "#7A6A99",
          "#BF5D52",
          "#EE6666",
          "#77B7E4",
          "#E6A065",
          "#9D5139",
          "#C1AA88",
          "#F87F7A",
          "#F6CF74",
          "#7F5506",
          "#88BB9B",
          "#6E99AA",
          "#5789D0",
        ],
        legend: {},
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          boundaryGap: [0, 0.01],
        },
        yAxis: {
          type: "category",
          data: ["Brazil", "Indonesia", "USA", "India", "China", "World"],
        },
        series: [
          {
            type: "bar",
            data: [19325, 23438, 31000, 121594, 134141, 681807],
          },
        ],
      };
      myChart.setOption(option);
    },
    handleCurrentChange(e) {
      this.current = e;
      this.accountRank();
    },
    handleSizeChange(e) {
      this.size = e;
      this.accountRank();
    },
    //切换时间
    tabtimetap(index) {
      this.statDateStart = "";
      this.statDateEnd = "";
      this.dateType = index;
      this.init();
    },
    tabFlagChange(idx) {
      this.tabFlag = idx;
      this.deailDate();
    },
    dealData(arr) {
      console.log(arr, "arr");
      let num = Math.max.apply(
        Math,
        arr.map(function (o) {
          return o.zxl;
        })
      ); //结果：3
      console.log(num, "nums");
      arr.map((item) => {
        if (num != 0) {
          item.zxl1 = Math.floor((item.zxl / num) * 100);
        } else {
          item.zxl1 = 0;
        }
      });
      console.log(arr, "arr2");
      return arr;
    },
  },
};
</script>

<style scoped="scoped" lang="scss" >
.box-center {
  width: 100%;
  padding: 15px;
  min-width: 1000px;
  padding-bottom: 100px;
}
.cen-tab {
  width: 100%;
  padding: 15px;
  background: #ffffff;
  margin-top: 15px;
}
.tophove {
  color: #ffffff;
  background: #2671e2;
}
.app-titel1 {
  width: 100%;
  height: 70px;
  background: #ffffff;
  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04);
  border-radius: 4px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  .titel-text {
    height: 100%;
    font-size: 18px;
    font-weight: 600;
    color: #32363d;
    line-height: 70px;
    margin-left: 30px;
  }
  .toptimeqhuan {
    width: 190px;
    height: 32px;
    background: #ffffff;
    border-radius: 4px;
    border: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
    overflow: hidden;
    margin-left: 20px;
    cursor: pointer;
  }
  .toptimeqhuan div {
    flex: 1;
    text-align: center;
    line-height: 32px;
    font-size: 16px;
  }
}

.app-top {
  width: 100%;
  background: #ffffff;
  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04);
  border-radius: 4px;
  padding-top: 15px;
  padding-bottom: 15px;
  .app-titel {
    width: 100%;
    display: flex;
    align-items: center;
    .titel-text {
      height: 100%;
      font-size: 16px;
      font-weight: 600;
      color: #32363d;
      text-indent: 30px;
    }
    .toptimeqhuan {
      width: 190px;
      height: 32px;
      background: #ffffff;
      border-radius: 4px;
      border: 1px solid #e0e0e0;
      display: flex;
      align-items: center;
      overflow: hidden;
      margin-left: 20px;
      cursor: pointer;
    }
    .toptimeqhuan div {
      flex: 1;
      text-align: center;
      line-height: 32px;
      font-size: 14px;
    }
  }
}

.app-box-san {
  width: 100%;
  min-height: 400px;
  display: flex;
  margin-top: 15px;
  .zuo {
    flex: 1;
    height: 100%;
    margin-right: 15px;
    background: #ffffff;
    border-radius: 4px;
    .title {
      width: 100%;
      height: 55px;
      border-bottom: 1px solid #e0e0e0;
      display: flex;
      align-content: center;
      .text1 {
        flex: 2;
        line-height: 55px;
        text-indent: 20px;
        font-weight: 500;
        font-size: 16px;
        color: #333333;
      }
      .text2 {
        flex: 1;
        height: 55px;
        display: flex;
        align-items: center;
      }
    }
  }
  .you {
    height: 100%;
    flex: 1;
    background: #ffffff;
    border-radius: 4px;
    .title {
      width: 100%;
      height: 55px;
      border-bottom: 1px solid #e0e0e0;
      display: flex;
      align-content: center;
      .text1 {
        flex: 2;
        line-height: 55px;
        text-indent: 20px;
        font-weight: 500;
        font-size: 16px;
        color: #333333;
      }
      .text2 {
        flex: 1;
        height: 55px;
        display: flex;
        align-items: center;
      }
    }
  }
}

.hejisan {
  width: 92%;
  margin: 0 auto;
  display: flex;
  padding-top: 10px;
  padding-bottom: 10px;
  .text1-1 {
    color: #666666;
  }
  .text1-2 {
    color: #333333;
    margin-top: 10px;
  }
}

// 进度条
.jinbox {
  width: 100%;
  height: 18px;
  line-height: 18px;
  display: flex;
  font-size: 16px;
  color: #2c3542;
  margin-top: 10px;
  .jinboxtit {
    width: 14%;
    height: 18px;
    padding-right: 6px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .jinbox-box {
    position: relative;
    width: 75%;
    height: 100%;
    border-radius: 8px;
    background: #f2f2f2;
  }
  .boxbaifenbi {
    height: 100%;
    background: #60d7a0;
    border-radius: 8px;
  }
  .boxbaifenbi2 {
    height: 100%;
    background: #5b8ff9;
  }
  .jinboxbott {
    width: 16%;
    display: flex;
    justify-content: flex-end;
  }
}
.div-lab {
  display: flex;
  margin: 5px;
}
.div-inp {
  width: 200px;
}
.label {
  font-size: 14px;
  font-weight: 400;
  color: #32363d;
  line-height: 32px;
  margin-left: 15px;
  min-width: 40px;
}
</style>
