zkPCproject/src/views/Statistics/TheTeamCompared.vue

<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"
            placeholder="请选择"
            filterable
            @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: TimetoAhoose == 4 }" @click="tabtimetap(4)">
            近7天
          </div>
          <div :class="{ tophove: TimetoAhoose == 5 }" @click="tabtimetap(5)">
            近15天
          </div>
          <div :class="{ tophove: TimetoAhoose == 6 }" @click="tabtimetap(6)">
            近30天
          </div>
        </div>
        <div style="margin-left: 26px">
          <el-date-picker
            v-model="customtime"
            @change="confirmtime()"
            type="daterange"
            :clearable="false"
            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: auto; margin-right: 10px"
          v-if="sta_team_downLoad"
        >
          <el-button @click="downLoad">导出</el-button>
        </div>
      </div>
    </div>
    <!-- 表格 -->
    <div class="cen-tab">
      <div style="overflow: auto">
        <table>
          <tbody>
            <tr>
              <td
                v-for="(item, index) in tablsitdata1"
                :key="index"
                class="theadtd"
              >
                {{ item.name }}
              </td>
            </tr>
            <tr v-for="(item, iddex) in tablsitdata2" :key="iddex">
              <td v-if="iddex + 1 == tablsitdata2.length" class="theadtd">
                合计/平均
              </td>
              <td v-else class="theadtd">{{ iddex + 1 }}</td>

              <td class="theadtd">{{ item.deptName }}</td>
              <td class="theadtd">{{ item.receptionCount }}</td>
              <td class="theadtd">{{ item.accountNum }}</td>
              <td class="theadtd">{{ item.activeCustomer || 0 }}</td>
              <td class="theadtd">{{ item.prohibitedCustomer || 0 }}</td>
              <td class="theadtd">
                {{ Math.floor(item.sumDuration / 60) || 0 }}
              </td>
              <td class="theadtd">{{ item.fraction || 0 }}%</td>
              <td class="theadtd">{{ item.prohibitedZb || 0 }}%</td>
              <td
                class="theadtd"
                v-for="(che, ind) in item.resultsList"
                :key="ind"
              >
                {{ che.zxl }}%
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <div class="app-box-san">
      <div class="zuo">
        <div class="title">
          <div class="text1">接待量排名</div>
        </div>
        <div class="hejisan">
          <div class="sanbox1" style="width: 50%">
            <div class="text1-1">团队总数</div>
            <div class="text1-2">{{ teamobj1.num || 0 }}个</div>
          </div>
          <div class="sanbox1" style="width: 50%">
            <div class="text1-1">均值</div>
            <div class="text1-2">{{ teamobj1.avg || 0 }}个</div>
          </div>
        </div>
        <div
          v-if="teamobj1.list.length != 0"
          style="width: 94%; margin: 0 auto"
        >
          <div class="jinbox" v-for="(item, i) in teamobj1.list" :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"
          v-if="teamobj1.list.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">接待时长排名</div>
        </div>
        <div class="hejisan">
          <div class="sanbox1" style="width: 50%">
            <div class="text1-1">团队总数</div>
            <div class="text1-2">{{ teamobj2.num || 0 }}个</div>
          </div>
          <div class="sanbox1" style="width: 50%">
            <div class="text1-1">均值</div>
            <div class="text1-2">
              {{ Math.floor(teamobj2.avg / 60) || 0 }}分钟
            </div>
          </div>
        </div>
        <div
          v-if="teamobj2.list.length != 0"
          style="width: 94%; margin: 0 auto"
        >
          <div class="jinbox" v-for="(item, i) in teamobj2.list" :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"
          v-if="teamobj2.list.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">销讲执行率</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">{{ teamobj3.num || 0 }}个</div>
          </div>
          <div class="sanbox1" style="width: 50%">
            <div class="text1-1">均值</div>
            <div class="text1-2">{{ teamobj3.avg || 0 }}%</div>
          </div>
        </div>
        <div
          v-if="teamobj3.list.length != 0"
          style="width: 94%; margin: 0 auto"
        >
          <div class="jinbox" v-for="(item, i) in teamobj3.list" :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"
          v-if="teamobj3.list.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">销讲能力雷达图</div>
        </div>
        <div
          id="main"
          v-if="isshowcd2 == true"
          style="width: 94%; margin: 0 auto"
        ></div>
        <div class="nulllist" v-if="isshowcd2 == false">
          <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">违禁接待次数</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: 50%">
            <div class="text1-1">团队总数</div>
            <div class="text1-2">{{ teamobj5.num || 0 }}个</div>
          </div>
          <div class="sanbox1" style="width: 50%">
            <div class="text1-1">均值</div>
            <div class="text1-2">{{ teamobj5.avg || 0 }}次</div>
          </div>
        </div>
        <div
          v-if="teamobj5.list.length != 0"
          style="width: 94%; margin: 0 auto"
        >
          <div class="jinbox" v-for="(item, i) in teamobj5.list" :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"
          v-if="teamobj5.list.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">违禁话术雷达图</div>
        </div>
        <div
          v-if="isshowcd == true"
          id="main2"
          style="width: 94%; margin: 0 auto"
        ></div>
        <div class="nulllist" v-if="isshowcd == false">
          <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 {
  data() {
    return {
      houseId: "",
      TimetoAhoose: 4,
      customtime: [],
      statDateStart: "",
      statDateEnd: "",
      tablsitdata1: [],
      tablsitdata2: [],
      teamobj1: {
        avg: "",
        list: [],
        num: "",
      },
      teamobj2: {
        avg: "",
        list: [],
        num: "",
      },
      teamobj3: {
        avg: "",
        list: [],
        num: "",
      },
      teamobj5: {
        avg: "",
        list: [],
        num: "",
      },
      teamAllLevel: [],
      teamAllLevelid: "",
      teamAllLeve2: [],
      teamAllLeve2id: "",
      ceratelist: [],
      role: "",
      houseList: [],
      isshowcd: true,
      isshowcd2: true,
    };
  },
  computed: {
    ...mapGetters(["permissions"]),
  },
  created() {
    this.sta_team_downLoad = this.permissions["sta_team_downLoad"];
  },
  mounted() {
    this.role = localStorage.getItem("orgType");
    if (this.role == 3) {
      this.houseId = localStorage.getItem("houseId");
      this.allhttp();
    } else {
      this.zkhousePage();
    }
  },
  methods: {
    downLoad() {
      let pamaet = {
        houseId: this.houseId,
        dateType: 0,
        statDateStart: this.statDateStart,
        statDateEnd: this.statDateEnd,
      };
      if (this.TimetoAhoose == 7) {
        pamaet.dateType = null;
      } else {
        pamaet.dateType = this.TimetoAhoose;
      }
      exportMethodPost(
        "autoSR/cusStageStatistics/teamTableExport",
        "团队对比",
        pamaet
      );
    },
    zkhousePage() {
      this.$api.api
        .findHouseByUser({
          orgType: localStorage.getItem("orgType"),
        })
        .then((res) => {
          this.houseList = res.data;
          this.houseId = res.data[0].id;
          this.allhttp();
        });
    },
    houseChange() {
      this.customtime = [];
      this.TimetoAhoose = 4;
      this.statDateStart = "";
      this.statDateEnd = "";
      this.allhttp();
    },
    allhttp() {
      this.teamteamTable();
      this.teamData1();
      this.teamData2();
      this.teamData3();
      this.teamData4();
      this.teamData5();
      this.teamData6();
      this.teamAllLeve();
    },
    // 获取一级
    teamAllLeve() {
      this.teamAllLevel = [{ name: "平均执行", value: "" }];
      this.teamAllLeve2 = [{ name: "总次数", value: "" }];
      let pamaet = {
        houseId: this.houseId,
        dateType: 0,
        statDateStart: this.statDateStart,
        statDateEnd: this.statDateEnd,
      };
      if (this.TimetoAhoose == 7) {
        pamaet.dateType = null;
      } else {
        pamaet.dateType = this.TimetoAhoose;
      }
      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 = "";
      });
    },
    //表格
    teamteamTable() {
      this.tablsitdata1 = [
        { name: "序号" },
        { name: "团队" },
        { name: "接待量" },
        { name: "接待顾问" },
        { name: "有效接待" },
        { name: "违禁接待次数" },
        { name: "接待时长（分）" },
        { name: "平均执行率" },
        { name: "违禁接待占比" },
      ];
      let pamaet = {
        houseId: this.houseId,
        dateType: 0,
        statDateStart: this.statDateStart,
        statDateEnd: this.statDateEnd,
      };

      if (this.TimetoAhoose == 7) {
        pamaet.dateType = null;
      } else {
        pamaet.dateType = this.TimetoAhoose;
      }
      this.$api.http.teamteamTable(pamaet).then((res) => {
        let newlist = res.data || [];
        this.tablsitdata2 = res.data;
        newlist[0].resultsList.map((item) => {
          this.tablsitdata1.push({ name: item.name });
        });
      });
    },
    //接待量排名
    teamData1() {
      this.teamobj1 = {
        avg: "",
        list: [],
        num: "",
      };
      let pamaet = {
        houseId: this.houseId,
        dateType: 0,
        statDateStart: this.statDateStart,
        statDateEnd: this.statDateEnd,
        type: 1,
      };
      if (this.TimetoAhoose == 7) {
        pamaet.dateType = null;
      } else {
        pamaet.dateType = this.TimetoAhoose;
      }
      this.$api.http.teamData(pamaet).then((res) => {
        let arr = [];
        res.data.list.map((item) => {
          let obj = {};
          obj.name = item.deptName;
          obj.zxl = item.activeCustomer;
          arr.push(obj);
        });
        arr = this.dealData(arr);
        this.teamobj1 = {
          avg: res.data.avg || 0,
          num: res.data.num || 0,
          list: arr || [],
        };
      });
    },
    //录音时长排名
    teamData2() {
      this.teamobj2 = {
        avg: "",
        list: [],
        num: "",
      };
      let pamaet = {
        houseId: this.houseId,
        dateType: 0,
        statDateStart: this.statDateStart,
        statDateEnd: this.statDateEnd,
        type: 2,
      };
      if (this.TimetoAhoose == 7) {
        pamaet.dateType = null;
      } else {
        pamaet.dateType = this.TimetoAhoose;
      }
      this.$api.http.teamData(pamaet).then((res) => {
        let arr = [];
        res.data.list.map((item) => {
          let obj = {};
          obj.name = item.deptName;
          obj.zxl = Math.floor(item.sumDuration / 60);
          arr.push(obj);
        });
        arr = this.dealData(arr);
        this.teamobj2 = {
          avg: res.data.avg || 0,
          num: res.data.num || 0,
          list: arr || [],
        };
      });
    },
    //销讲执行率切换一级
    teamAllLevelidtap() {
      this.teamData3();
    },
    //销讲执行率
    teamData3() {
      this.teamobj3 = {
        avg: "",
        list: [],
        num: "",
      };
      let pamaet = {
        houseId: this.houseId,
        dateType: 0,
        statDateStart: this.statDateStart,
        statDateEnd: this.statDateEnd,
        type: 3,
        marketingId: this.teamAllLevelid,
      };
      if (this.TimetoAhoose == 7) {
        pamaet.dateType = null;
      } else {
        pamaet.dateType = this.TimetoAhoose;
      }
      this.$api.http.teamData(pamaet).then((res) => {
        let arr = [];
        res.data.list.map((item) => {
          let obj = {};
          obj.name = item.deptName;
          obj.zxl = item.fraction;
          arr.push(obj);
        });
        // arr=this.dealData(arr)
        this.teamobj3 = {
          avg: res.data.avg || 0,
          num: res.data.num || 0,
          list: arr || [],
        };
      });
    },
    //销讲雷达图
    teamData4() {
      let pamaet = {
        houseId: this.houseId,
        dateType: 0,
        statDateStart: this.statDateStart,
        statDateEnd: this.statDateEnd,
        type: 4,
      };
      if (this.TimetoAhoose == 7) {
        pamaet.dateType = null;
      } else {
        pamaet.dateType = this.TimetoAhoose;
      }
      this.$api.http.teamData(pamaet).then((res) => {
        let namelist = [];
        let datalist = [];
        let newlinename = [];
        let arr = res.data.list || [];

        if (arr.length != 0) {
          arr.map((item) => {
            namelist.push(item.deptName);
            datalist.push({
              name: item.deptName,
              value: [],
            });
          });
          arr[0].resultsList.map((item) => {
            newlinename.push({
              name: item.name,
              max: 100,
            });
          });
          arr.map((item, index) => {
            datalist.map((che) => {
              if (item.deptName == che.name) {
                item.resultsList.map((as) => {
                  che.value.push(as.zxl);
                });
              }
            });
          });
        }

        this.initecah(namelist, datalist, newlinename);
      });
    },
    //违禁话术雷达图
    teamData6() {
      let pamaet = {
        houseId: this.houseId,
        dateType: 0,
        statDateStart: this.statDateStart,
        statDateEnd: this.statDateEnd,
        type: 6,
      };
      if (this.TimetoAhoose == 7) {
        pamaet.dateType = null;
      } else {
        pamaet.dateType = this.TimetoAhoose;
      }
      this.$api.http.teamData(pamaet).then((res) => {
        let namelist = [];
        let datalist = [];
        let newlinename = [];
        let arr = res.data.list || [];
        if (arr.length != 0) {
          arr.map((item) => {
            namelist.push(item.deptName);
            datalist.push({
              name: item.deptName,
              value: [],
            });
          });
          arr[0].sensitiveWordsList.map((item) => {
            newlinename.push({
              name: item.words,
              max: 100,
            });
          });
          arr.map((item, index) => {
            datalist.map((che) => {
              if (item.deptName == che.name) {
                item.sensitiveWordsList.map((as) => {
                  che.value.push(as.num);
                });
              }
            });
          });
        }
        this.initecah2(namelist, datalist, newlinename);
      });
    },

    initecah(namelist, datalist, newlinename) {
      if (datalist.length == 0) {
        this.isshowcd2 = false;
        return;
      } else {
        this.isshowcd2 = true;
      }
      echarts.init(document.getElementById("main")).dispose();
      var chartDom = document.getElementById("main");
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        color: [
          "#6F8EDC",
          "#EE6666",
          "#F98120",
          "#1CC99E",
          "#9474FB",
          "#66AFF5",
          "#FABD2B",
          "#FFCF8F",
          "#657292",
          "#7A6A99",
          "#BF5D52",
          "#77B7E4",
          "#E6A065",
          "#9D5139",
          "#C1AA88",
          "#F87F7A",
          "#F6CF74",
          "#7F5506",
          "#88BB9B",
          "#6E99AA",
          "#5789D0",
        ],
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: namelist,
          right: "10",
          top: "10",
        },
        color: ["#2671E2", "#F3787B"],
        radar: {
          // shape: 'circle',
          indicator: newlinename,
        },
        series: [
          {
            type: "radar",
            tooltip: {
              trigger: "item",
            },
            data: datalist,
          },
        ],
      };
      option && myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    initecah2(namelist, datalist, newlinename) {
      if (datalist.length == 0) {
        this.isshowcd = false;
        return;
      } else {
        this.isshowcd = true;
      }
      echarts.init(document.getElementById("main2")).dispose();
      var chartDom = document.getElementById("main2");
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        color: [
          "#6F8EDC",
          "#EE6666",
          "#F98120",
          "#1CC99E",
          "#9474FB",
          "#66AFF5",
          "#FABD2B",
          "#FFCF8F",
          "#657292",
          "#7A6A99",
          "#BF5D52",
          "#77B7E4",
          "#E6A065",
          "#9D5139",
          "#C1AA88",
          "#F87F7A",
          "#F6CF74",
          "#7F5506",
          "#88BB9B",
          "#6E99AA",
          "#5789D0",
        ],
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: namelist,
          right: "10",
          top: "10",
        },
        color: ["#2671E2", "#F3787B"],
        radar: {
          // shape: 'circle',
          indicator: newlinename,
        },
        series: [
          {
            type: "radar",
            tooltip: {
              trigger: "item",
            },
            data: datalist,
          },
        ],
      };
      option && myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },

    //违禁接待次数一级切换
    teamAllLeve2tap() {
      this.teamData5();
    },
    //违禁接待次数
    teamData5() {
      this.teamobj5 = {
        avg: "",
        list: [],
        num: "",
      };
      let pamaet = {
        houseId: this.houseId,
        dateType: 0,
        statDateStart: this.statDateStart,
        statDateEnd: this.statDateEnd,
        type: 5,
        words: this.teamAllLeve2id,
      };
      if (this.TimetoAhoose == 7) {
        pamaet.dateType = null;
      } else {
        pamaet.dateType = this.TimetoAhoose;
      }
      this.$api.http.teamData(pamaet).then((res) => {
        let arr = [];
        res.data.list.map((item) => {
          let obj = {};
          obj.name = item.deptName;
          obj.zxl = item.prohibitedCustomer;
          arr.push(obj);
        });
        arr = this.dealData(arr);
        this.teamobj5 = {
          avg: res.data.avg || 0,
          num: res.data.num || 0,
          list: arr || [],
        };
      });
    },

    // 自定义时间
    confirmtime() {
      this.TimetoAhoose = 7;
      (this.statDateStart = this.customtime[0]),
        (this.statDateEnd = this.customtime[1]);
      this.allhttp();
    },
    //切换时间
    tabtimetap(index) {
      this.TimetoAhoose = index;
      this.statDateStart = "";
      this.statDateEnd = "";
      this.customtime = [];
      this.allhttp();
    },
    dealData(arr) {
      console.log(arr);
      let num = Math.max.apply(
        Math,
        arr.map(function (o) {
          return o.zxl;
        })
      ); //结果：3
      arr.map((item) => {
        item.zxl1 = Math.floor((item.zxl / num) * 100) || 0;
      });
      return arr;
    },
  },
};
</script>

<style scoped="scoped" lang="scss" >
/* 添加table滚动条 */
table {
  border-collapse: collapse;
  width: 100%;
}
tbody {
  display: block;
  // width: 100%;
  // overflow-x: auto;
  height: 220px;
}
tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
  // word-break: break-all;
}

.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-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;
    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 {
    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;
      }
    }

    #main {
      height: calc(400px - 55px);
    }
    #main2 {
      height: calc(400px - 55px);
    }
  }
}

.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 {
    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%;
    text-indent: 16px;
  }
}
.theadtd {
  width: 140px;
  height: 48px;
  border: 1px solid #e0e0e0;
  text-align: center;
  line-height: 48px;
  font-size: 16px;
  color: #32363d;
}

.nulllist {
  flex: 1;
}
</style>