zkPCproject/src/page/bi/bi.vue

<template>
  <div class="pages">
    <!-- 头部导航菜单以及筛选菜单 -->
    <header class="header">
      <!-- 导航菜单 -->
      <div class="head-top">
        <div class="nav-box">
          <div
            class="nav-box-item"
            v-for="(data, index) in headList"
            :key="data.title + index"
            :class="{ active: headIndex == data.title }"
            @click="selectNav(data)"
            v-show="data.show"
          >
            <img
              v-show="headIndex == data.title"
              class="nav-box-item-img"
              src="/img/bidata/lsideActive.png"
              alt=""
            />
            {{ data.title }}
            <img
              v-show="headIndex == data.title"
              class="nav-box-item-img"
              src="/img/bidata/rsideActive.png"
              alt=""
            />
          </div>
        </div>
        <div class="back" @click="backHome">回到首页</div>
      </div>

      <!-- 筛选菜单 -->
      <div class="head-bottom">
        <div class="head-box">
          <span class="text">接待时间</span>
          <div class="timer">
            <div
              class="timer-item"
              v-for="(data, index) in dateSelect"
              :key="data.title + index"
              :class="{ active: dateSelectIndex == data.value }"
              @click="timerClick(data.value)"
            >
              {{ data.title }}
            </div>
            <el-date-picker
              class="little"
              value-format="yyyy-MM-dd"
              v-model="time"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="timerChange"
            >
            </el-date-picker>
          </div>

          <span class="text" style="margin-left: 32px">公司</span>
          <el-select
            class="company"
            v-model="companyValue"
            placeholder="请选择"
            clearable
            filterable
            @change="changeCompany"
            :popper-append-to-body="false"
          >
            <el-option
              v-for="item in companyOptions"
              :key="item.orgCode"
              :label="item.orgName"
              :value="item.orgCode"
            >
            </el-option>
          </el-select>

          <template v-if="showSelect('接待分析')">
            <span class="text" style="margin-left: 32px">项目</span>
            <el-select
              class="company"
              v-model="projectValue"
              placeholder="请选择"
              :popper-append-to-body="false"
            >
              <el-option
                v-for="item in projectOptions"
                :key="item.label"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </template>

          <template v-if="showSelect('案场排名')">
            <span class="text" style="margin-left: 32px">排名类型</span>
            <el-select
              class="company"
              v-model="dimensionType"
              placeholder="请选择"
              :popper-append-to-body="false"
            >
              <el-option
                v-for="item in rankingTypeList"
                :key="item.title"
                :label="item.title"
                :value="item.value"
                :disabled="item.disabled"
              >
              </el-option>
            </el-select>

            <span class="text" style="margin-left: 32px">排名规则</span>
            <el-select
              class="company"
              v-model="orderBy"
              placeholder="请选择"
              :popper-append-to-body="false"
            >
              <el-option
                v-for="item in ruleTypeList"
                :key="item.title"
                :label="item.title"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </template>

          <div class="search">
            <el-button type="primary" @click="initPage">查询</el-button>
          </div>
        </div>
      </div>
    </header>

    <!-- 中间部分 -->
    <section v-if="headIndex == '实时总览'" class="bodys">
      <!-- 柱状图 -->
      <div class="items lside">
        <div
          class="item-item"
          v-for="(data, index) in lsideDataList"
          :key="data.title + index"
        >
          <titles :title="data.title">
            <div class="rsidebox" slot="rside">
              <div
                :class="{ active: data.activeName == data.params }"
                @click="
                  (data.activeName = data.params),
                    getFormatter(data.params, data.title)
                "
                class="asd"
              >
                按项目
              </div>
              <div
                :class="{ active: data.activeName == data.params1 }"
                @click="
                  (data.activeName = data.params1),
                    getFormatter(data.params1, data.title)
                "
                class="asd"
              >
                按城市
              </div>
            </div>
          </titles>

          <div
            v-if="data.activeName == data.params"
            class="echarts"
            :id="data.params"
          ></div>
          <div
            v-if="data.activeName == data.params1"
            class="echarts"
            :id="data.params1"
          ></div>
        </div>
      </div>

      <!-- 中间展示 -->
      <div class="items middle">
        <!-- 第一部分 -->
        <div class="items-top">
          <p class="title">待处理</p>
          <div class="item-box">
            <!-- // background-size: 168px 168px;
            // background-position: center; -->
            <div
              class="item-box-item"
              v-for="(data, index) in stayHandleList"
              @click="showDialog(data)"
              :key="data.img + index"
              :style="{
                background: `url(${data.img}) no-repeat`,
                backgroundSize: '168px 168px',
                backgroundPosition: 'center',
              }"
            >
              <div class="num" :style="{ color: data.fontColor }">
                {{ data.data || 0 }}
              </div>
              <div class="item-title">{{ data.title }}</div>
            </div>
          </div>
        </div>
        <!-- 第二部分 -->
        <div class="item-btm">
          <img
            class="jiedailiang"
            src="/img/bidata/jiedailiang@2x.png"
            alt=""
          />
          <img class="bgdsada" src="/img/bidata/bgdsada@x2.png" alt="" />

          <div class="numberoftimes">
            <img
              class="numberoftimes-img"
              src="/img/bidata/weu@2x.png"
              alt=""
            />
            <div class="numberoftimes-box">
              <span class="cishu">{{ receptionCount }}</span>
              <span class="ci">次</span>
            </div>
          </div>

          <div class="ibox">
            <div
              class="ibox-item"
              v-for="(data, index) in jiedaiList"
              @click="showDialog(data)"
              :key="data.bgImg + index"
              :style="{
                background: `url(${data.bgImg}) no-repeat`,
                backgroundSize: data.unit ? '112px 112px' : '148px 108px',
                backgroundPosition: 'center',
              }"
            >
              <div
                class="num"
                :style="{
                  width: data.unit ? '112px' : '148px',
                  height: data.unit ? '112px' : '108px',
                }"
              >
                {{ data.data || 0 }}{{ data.unit || "" }}
              </div>
              <div class="title">{{ data.title }}</div>
            </div>
          </div>
        </div>
        <!-- 第三部分 -->
        <div class="item-mi">
          <div class="item-item lside">
            <titles title="接待趋势"></titles>
            <div class="echarts" id="tendencyData1"></div>
          </div>
          <div class="item-item rside">
            <titles title="销讲执行趋势"></titles>
            <div class="echarts" id="tendencyData2"></div>
          </div>
        </div>
      </div>

      <!-- 饼状图 -->
      <div class="items rside">
        <div
          class="item-item"
          v-for="(data, index) in rsideDataList"
          :key="data.params + index"
        >
          <titles :title="data.title"></titles>
          <div class="echarts" :id="data.params"></div>
        </div>
      </div>
    </section>

    <section class="caseRanking" v-if="headIndex == '案场排名'">
      <div class="head-boxs">
        <div
          class="head-box-items"
          v-for="(data, index) in caseRankingList"
          :key="data.title + index + data.unit"
        >
          <div class="t">{{ data.title }}</div>

          <div class="b">
            <p class="lside">
              <span class="resultA">{{ data.resultA }}</span>
              <span class="unit">{{ data.unit }}</span>
            </p>

            <p class="rside">
              <img
                v-if="data.resultB > 0"
                class="r-img"
                src="/img/indexIcon/indexCardUp.png"
                alt=""
              />
              <img
                v-if="data.resultB < 0"
                class="r-img"
                src="/img/indexIcon/indexCardDown.png"
                alt=""
              />
              <span :class="{ up: data.resultB > 0 }" v-if="data.resultB > 0"
                >+{{ data.resultB }}</span
              >
              <span
                :class="{ down: data.resultB < 0 }"
                v-if="data.resultB < 0"
                >{{ data.resultB }}</span
              >
              <!-- <span v-if="data.resultB == 0">{{ data.resultB }}</span> -->
            </p>
          </div>
        </div>
      </div>
      <div class="body-box">
        <div
          class="body-box-item"
          v-for="(data, index) in rankingEchartsBarList"
          :key="data.params + index"
        >
          <titles :title="data.title"></titles>
          <div class="echarts" :id="data.params"></div>
        </div>
      </div>
    </section>

    <el-dialog
      class="dialogtips"
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="800px"
      :before-close="handleClose"
    >
      <el-table
        :data="tableData"
        height="363px"
        :style="{ background: '#0B1F53', border: 'none' }"
        :header-cell-style="{
          backgroundColor: '#0B1F53',
          color: '#34DBFC',
          fontSize: '14px',
          border: 'none',
          fontWeight: '600',
        }"
        :row-class-name="tableRowClassName"
      >
        <el-table-column
          v-for="(data, index) in tableNameList"
          :key="data.showParams + index"
          :property="data.showParams"
          :label="data.showTitle"
        ></el-table-column>
      </el-table>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="current"
        :page-sizes="[10, 50, 100]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-dialog>
  </div>
</template>

<script>
import * as echarts from "echarts";
import titles from "./common/title.vue";
import * as dialogConstList from "./index";
import { mapGetters } from "vuex";

export default {
  components: { titles },
  data() {
    return {
      headList: dialogConstList.headList,
      headIndex: "实时总览", // 默认选中nav选项
      time: [], //自定义时间
      // 日期类型选择
      dateSelect: dialogConstList.dateSelect,
      dateSelectIndex: 1, // 选中

      dialogVisible: false, // 提示文字
      dialogTitle: "", // 弹窗提示文字

      current: 1, // 页码
      size: 10, // 数量
      total: 0, // 总条数

      // 录音未开启数组
      stayHandleList: dialogConstList.stayHandleList,

      // 接待量数组
      jiedaiList: dialogConstList.jiedaiList,
      receptionCount: 0, // 接待量

      // 接待趋势
      receptionList: [],

      // 销讲执行趋势
      salesExecution: [],

      allRecSaleList: [], // 接待趋势&销讲执行趋势总数组

      // 公司
      companyOptions: [],
      companyValue: "",

      // 项目
      projectOptions: [],
      projectValue: "",

      visitReceptionDistribute: [], //到访次数分布
      invalidReceptionDistribute: [], //无效接待原因分布
      levelFractionDistribute: [], //客户意向度分布
      systemLevelDistribute: [], //客户等级分布
      rsideDataList: dialogConstList.rsideDataList, // 右侧菜单

      eceptionRankingByHouseTop10: [], //接待排名（按项目）
      activeReceptionByHouseTop10: [], //有效接待排名（按项目）
      violatedReceptionByHouseTop10: [], //违禁接待排名（按项目）
      visitReceptionByHouseTop10: [], //复访接待排名（按项目）
      receptionRankingByCityTop10: [], //接待排名（按城市）
      activeReceptionByCityTop10: [], //有效接待排名（按城市）
      violatedReceptionByCityTop10: [], //违禁接待排名（按城市）
      visitReceptionByCityTop10: [], //复访接待排名（按城市）

      lsideDataList: dialogConstList.lsideDataList, // 左侧菜单列表

      tableNameList: [], // table 循环的表头数据,
      tableData: [], // table数据
      showDialogData: {}, // 点击选项赋值

      caseRankingList: dialogConstList.caseRankingList, // 案场排名数组
      ruleTypeList: dialogConstList.ruleTypeList, // 排名规则
      rankingTypeList: dialogConstList.rankingTypeList, // 排名类型
      orderBy: 1, // 排序规则
      dimensionType: 1, //项目

      rankingEchartsBarList: dialogConstList.rankingEchartsBarList, // 案场排名柱状图
    };
  },

  computed: {
    ...mapGetters(["permissions"]),
    showSelect() {
      return (name) => {
        return name == this.headIndex;
      };
    },
  },

  created() {
    this.checkAuthority();
  },

  mounted() {
    this.initPage();
  },

  methods: {
    // 检测权限
    checkAuthority() {
      this.headList.forEach((item) => {
        if (this.permissions[item.methods]) {
          item.show = true;
        } else {
          item.show = false;
        }
      });
      let hIndex = sessionStorage.getItem("BIHeadIndex") || "实时总览";
      let obj = this.headList.find((item) => item.title == hIndex);
      if (obj.show) {
        this.selectNav(obj);
      } else {
        let obj1 = this.headList.find((item) => item.show === true);
        this.selectNav(obj1);
      }
    },

    // 清除数据
    clearData() {},

    // 初始化页面
    initPage() {
      this.biGetOrgCodeList();
      let obj = this.headList.find((item) => item.title == this.headIndex);
      this.$nextTick(() => {
        this[obj.methods]();
      });
    },

    // 实时总览
    initPageRealTimeOverview() {
      this.biDataOverview();
    },

    // 案场排名
    initCaseRanking() {
      this.biTopStatisticData();
      this.$nextTick(() => {
        this.biRankingData();
      });
    },

    // 案场排名顶部对比数据
    biTopStatisticData() {
      // 接口入参
      const params = {
        dateType: this.dateSelectIndex,
        orgCode: this.companyValue,
        startDate: this.time[0] || "",
        endDate: this.time[1] || "",
      };
      this.$api.http.biTopStatisticData(params).then((res) => {
        if (res.code == 10000) {
          this.caseRankingList.forEach((item) => {
            item.resultA = res.data.resultA[item.params];
            item.resultB = res.data.resultB[item.params];
          });
        }
      });
    },

    // 获取案场详情柱状图数据
    biRankingData() {
      const params = {
        dateType: this.dateSelectIndex,
        orgCode: this.companyValue,
        startDate: this.time[0] || "",
        endDate: this.time[1] || "",
        orderBy: this.orderBy, // 1 前10，2 后10
        dimensionType: this.dimensionType, //1 项目，2 城市，3 区域
      };
      this.$api.http.biRankingData(params).then((res) => {
        if (res.code == 10000) {
          this.rankingEchartsBarList.forEach((ob) => {
            let object = res.data[ob.params];
            console.log(object, ob.params);
            let xAxis = object.data.map((item) => {
              return item.name;
            });
            let avgList = [];
            let yAxis = {};
            if (this.companyValue) {
              avgList.push({
                yAxis: object.companyAvg,
                name: "集团平均",
              });
              try {
                if (
                  object.data[this.orderBy == 1 ? 0 : object.data.length - 1]
                    .value < object.companyAvg
                ) {
                  yAxis.max = object.companyAvg;
                }
              } catch (e) {
                console.log(e);
              }
            } else {
              avgList.push({
                yAxis: object.allAvg,
                name: "行业平均",
              });
              try {
                if (
                  object.data[this.orderBy == 1 ? 0 : object.data.length - 1]
                    .value < object.allAvg
                ) {
                  yAxis.max = object.allAvg;
                }
              } catch (e) {
                console.log(e);
              }
            }
            if (ob.unit == "%") {
              yAxis = {
                max: 100,
              };
            }

            this.$nextTick(() => {
              this.creatBar({
                id: ob.params,
                xAxis: xAxis,
                yAxis: yAxis,
                series: [
                  {
                    type: "bar",
                    barMaxWidth: "20%",
                    name: ob.title,
                    data: object.data || [],
                    itemStyle: {
                      normal: {
                        //柱体的颜色
                        //右，下，左，上（1，0，0，0）表示从正右开始向左渐变
                        color: function (params) {
                          let colorList = [
                            ["#FF7B96", "#FA3E63"],
                            ["#FC6128", "#FAB519"],
                            ["#FBE695", "#FFC536"],
                            ["#4C83FF", "#2AFADF"],
                          ];

                          let colorItem =
                            colorList[
                              params.dataIndex > 2 ? 3 : params.dataIndex
                            ];
                          return new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1,
                            [
                              {
                                offset: 0,
                                color: colorItem[0],
                              },
                              {
                                offset: 1,
                                color: colorItem[1],
                              },
                            ],
                            false
                          );
                        },
                      },
                    },
                    markLine: {
                      symbol: ["none", "none"], // none为标线两端的样式为无，可更改
                      lineStyle: {
                        normal: {
                          color: "#34DBFC", // 这儿设置安全基线颜色
                        },
                      },
                      data: avgList,
                      label: {
                        show: true,
                        position: "end",
                        padding: [-13, -20, 15, -85],
                        formatter: (data) => {
                          return `${data.name}：${data.value}`;
                        },
                      },
                    },
                  },
                ],
              });
            });
          });
        }
      });
    },

    // 下划线
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 0) {
        return "second";
      }
    },
    // 弹窗关闭
    handleClose() {
      this.dialogVisible = false;
      this.current = 1;
      this.size = 10;
    },

    // 弹窗展示
    showDialog(data) {
      this.showDialogData = data;
      const params = {
        dataType: data.dataType,
        dateType: this.dateSelectIndex,
        orgCode: this.companyValue,
        startDate: this.time[0] || "",
        endDate: this.time[1] || "",
        current: this.current,
        size: this.size,
      };
      this.$api.http.biChooseDataTable(params).then((res) => {
        if (res.code == 10000) {
          let arr = [...this.stayHandleList, ...this.jiedaiList];
          let obj = arr.find((item) => item.title == data.title);
          this.total = res.data.total;
          this.dialogTitle = data.title;
          this.tableNameList = dialogConstList[obj.tableListName];
          this.tableData = res.data.records;
          this.dialogVisible = true;
        }
      });
    },

    // 获取页面数据
    biDataOverview() {
      const params = {
        dateType: this.dateSelectIndex,
        orgCode: this.companyValue,
        startDate: this.time[0] || "",
        endDate: this.time[1] || "",
      };
      this.$api.http.biDataOverview(params).then((res) => {
        if (res.code == 10000) {
          this.receptionCount = res.data.statisticData.receptionCount || 0;
          this.jiedaiList.forEach((item) => {
            // 接待趋势
            item.data = res.data.statisticData[item.params] || 0;
          });
          this.stayHandleList.forEach((item) => {
            // 销讲趋势
            item.data = res.data.statisticData[item.params] || 0;
          });

          this.allRecSaleList = res.data.tendencyData || []; // 趋势图

          //左侧菜单数据填充
          this.lsideDataList.forEach((item) => {
            this[item.params] = res.data[item.params] || [];
            this[item.params1] = res.data[item.params1] || [];
          });

          //右侧菜单数据填充
          this.rsideDataList.forEach((item) => {
            this[item.params] = res.data[item.params] || [];
          });

          this.$nextTick(() => {
            this.empityReceptionListSalesExecution();
            this.formatLineData();
            this.formatterPie();
            this.formatterBar();
          });
        }
      });
    },

    // 获取公司
    biGetOrgCodeList() {
      this.$api.http.biGetOrgCodeList().then((res) => {
        if (res.code == 10000) {
          this.companyOptions = res.data;
        }
      });
    },

    // 清空存放的series变量
    empityReceptionListSalesExecution() {
      this.receptionList = [];
      this.salesExecution = [];
    },

    // 处理折线统计图的数据
    formatLineData() {
      let arr1 = [
        {
          name: "接待量",
          params: "receptionCount",
        },
        {
          name: "有效接待",
          params: "activeCustomer",
        },
        {
          params: "prohibitedCustomer",
          name: "违禁接待",
        },
      ];
      let obj1 = {
        id: "tendencyData1",
        xAxis: [],
        legend: [],
        series: [],
      };
      arr1.forEach((item, index) => {
        let par = {
          // 折线图的样式
          smooth: true,
          name: item.name,
          type: "line",
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                1,
                1,
                this.lineColorLinear(index),
                false
              ),
              shadowColor: "rgba(44,118,222, 0.1)",
              shadowBlur: 10,
            },
          },
          itemStyle: {
            normal: {
              color: {
                type: "linear", // 线性渐变
                x: 0,
                y: 0,
                x2: 1,
                y2: 1,
                colorStops: this.lineColorLinear(index),
              },
            },
          },
          data: [],
        };
        this.allRecSaleList.forEach((org) => {
          par.data.push(org[item.params] || 0);

          if (!obj1.xAxis.includes(org.statDate.split(" ")[0])) {
            obj1.xAxis.push(org.statDate.split(" ")[0]);
          }

          if (!obj1.legend.includes(item.name)) {
            obj1.legend.push(item.name);
          }
        });
        this.receptionList.push(par);
      });
      let arr2 = [
        {
          name: "平均销讲执行率",
          params: "fraction",
        },
        {
          name: "平均挖掘执行率",
          params: "wordFraction",
        },
        {
          name: "平均挖掘成功率",
          params: "wordFinishFraction",
        },
      ];

      let obj2 = {
        id: "tendencyData2",
        xAxis: [],
        legend: [],
        series: [],
        max: 100,
      };

      arr2.forEach((item, index) => {
        let par = {
          // 折线图的样式
          smooth: true,
          name: item.name,
          type: "line",
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                1,
                1,
                this.lineColorLinear(index),
                false
              ),
              shadowColor: "rgba(44,118,222, 0.1)",
              shadowBlur: 10,
            },
          },
          itemStyle: {
            normal: {
              color: {
                type: "linear", // 线性渐变
                x: 0,
                y: 0,
                x2: 1,
                y2: 1,
                colorStops: this.lineColorLinear(index),
              },
            },
          },
          data: [],
        };

        this.allRecSaleList.forEach((org) => {
          par.data.push(org[item.params] || 0);

          if (!obj2.xAxis.includes(org.statDate.split(" ")[0])) {
            obj2.xAxis.push(org.statDate.split(" ")[0]);
          }

          if (!obj2.legend.includes(item.name)) {
            obj2.legend.push(item.name);
          }
        });

        this.salesExecution.push(par);
      });

      obj1.series = this.receptionList;
      obj2.series = this.salesExecution;
      this.$nextTick(() => {
        this.creatLine(obj1);
        this.creatLine(obj2);
      });
    },

    // 创建折线图
    creatLine(obj) {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById(obj.id));
      // this.receptionList
      // 指定图表的配置项和数据
      let option = {
        legend: {
          show: true,
          bottom: "0",
          right: "center",
          orient: "horizontal", // 图例列表的布局朝向; horizontal; vertical
          data: obj.legend,
          icon: "circle",
          left: "center", // 距离容器侧边距离
          textStyle: {
            color: "#fff",
            fontSize: 12,
          },
        },

        grid: {
          top: "10%",
          bottom: "25%",
          right: "5%",
          left: "15%",
        },
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          data: obj.xAxis, // x坐标轴集合
          axisLabel: {
            //X轴标签
            show: true,
            interval: 0,
            rotate: 40,
            textStyle: {
              color: "#fff", //字体颜色
              fontSize: 12, //字体大小
            },
            interval: obj.xAxis.length > 15 ? 3 : 0, //主要设置其间隔，间隔为3
          },
          axisLine: {
            lineStyle: {
              color: "#fff",
            },
          },
        },
        yAxis: [
          {
            type: "value",
            nameTextStyle: {
              color: "#fff",
              fontSize: 12,
            },
            lineStyle: {
              color: "#fff",
            },
            minInterval: 5,
            axisLabel: {
              textStyle: {
                color: "#fff", //字体颜色
                fontSize: 14, //字体大小
              },
              formatter: (e) => {
                return `${e}`;
              },
            },
            axisTick: { show: false },
            axisLine: {
              show: false,
            },
            splitLine: {
              //Y轴分隔符
              show: true,
              lineStyle: {
                color: "#fff",
                type: "dashed",
              },
            },
          },
        ],
        series: obj.series,
      };
      if (obj.max) {
        option.yAxis[0].max = 100;
      }

      // 使用刚指定的配置项和数据显示图表。
      option && myChart.setOption(option);
      window.onresize = function () {
        myChart.resize();
      };
    },

    // 格式化饼图数据
    formatterPie() {
      this.rsideDataList.forEach((list) => {
        if (list.params == "visitReceptionDistribute") {
          let gentle = 0;
          let [arr1, arr2] = [[], []];
          this.visitReceptionDistribute.forEach((item) => {
            if (item.name != "首次到访") {
              gentle += item.value;
            } else {
              arr1.push(item);
            }
            arr2.push(item);
          });
          let series = [
            {
              name: "到访次数分布",
              type: "pie",
              selectedMode: "single",
              radius: [0, "30%"],
              label: {
                position: "inner",
                fontSize: 14,
              },
              labelLine: {
                show: false,
              },
              data: arr1,
            },
            {
              name: "到访次数分布",
              type: "pie",
              radius: ["45%", "60%"],
              labelLine: {
                length: 30,
              },
              data: arr2,
            },
          ];
          series[0].data.push({
            name: "复访接待",
            value: gentle,
          });
          this.creatPie({
            id: list.params,
            legend: {
              show: false,
            },
            series: series,
          });
        } else {
          let legend = this[list.params].map((item) => {
            return item.name;
          });
          this.creatPie({
            id: list.params,
            grid: {
              bottom: "20%",
              top: "5%",
            },
            legend: {
              legend: legend,
              show: true,
              orient: "horizontal",
              type: "scroll",
              bottom: "5%",
              textStyle: {
                color: "#fff",
              },
            },
            series: [
              {
                name: list.title,
                type: "pie",
                radius: ["45%", "60%"],
                labelLine: {
                  length: 5,
                  showAbove: true,
                },
                minAngle: 5,
                avoidLabelOverlap: true,
                data: this[list.params],
                itemStyle: {
                  normal: {
                    color: function (colors) {
                      var colorList = [
                        "#D0444D",
                        "#376FE3",
                        "#E1B31F",
                        "#8D25E4",
                        "#DF7323",
                        "#2ED1EE",
                      ];
                      return colorList[colors.dataIndex];
                    },
                  },
                },
              },
            ],
          });
        }
      });
    },
    // 创建饼图
    creatPie(obj) {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById(obj.id));

      let option = {
        tooltip: {
          trigger: "item",
        },
        legend: obj.legend,
        series: obj.series,
      };

      option && myChart.setOption(option);
      window.onresize = function () {
        myChart.resize();
      };
    },

    // 重绘echarts
    getFormatter(params, name) {
      let xAxis = this[params].map((item) => {
        return item.name;
      });

      this.$nextTick(() => {
        this.creatBar({
          id: params,
          xAxis: xAxis,
          series: [
            {
              type: "bar",
              barMaxWidth: "20%",
              name: name,
              data: this[params],
              itemStyle: {
                normal: {
                  //柱体的颜色
                  //右，下，左，上（1，0，0，0）表示从正右开始向左渐变
                  color: function (params) {
                    let colorList = [
                      ["#FF7B96", "#FA3E63"],
                      ["#FC6128", "#FAB519"],
                      ["#FBE695", "#FFC536"],
                      ["#4C83FF", "#2AFADF"],
                    ];

                    let colorItem =
                      colorList[params.dataIndex > 2 ? 3 : params.dataIndex];
                    return new echarts.graphic.LinearGradient(
                      0,
                      0,
                      0,
                      1,
                      [
                        {
                          offset: 0,
                          color: colorItem[0],
                        },
                        {
                          offset: 1,
                          color: colorItem[1],
                        },
                      ],
                      false
                    );
                  },
                },
              },
            },
          ],
        });
      });
    },

    // 格式化柱状图数据
    formatterBar() {
      this.lsideDataList.forEach((list) => {
        let xAxis = this[list.params].map((item) => {
          return item.name;
        });

        let xAxis1 = this[list.params1].map((item) => {
          return item.name;
        });

        this.$nextTick(() => {
          if (list.activeName == list.params) {
            this.creatBar({
              id: list.params,
              xAxis: xAxis,
              series: [
                {
                  type: "bar",
                  barMaxWidth: "20%",
                  name: list.title,
                  data: this[list.params],
                  itemStyle: {
                    normal: {
                      //柱体的颜色
                      //右，下，左，上（1，0，0，0）表示从正右开始向左渐变
                      color: function (params) {
                        let colorList = [
                          ["#FF7B96", "#FA3E63"],
                          ["#FC6128", "#FAB519"],
                          ["#FBE695", "#FFC536"],
                          ["#4C83FF", "#2AFADF"],
                        ];

                        let colorItem =
                          colorList[
                            params.dataIndex > 2 ? 3 : params.dataIndex
                          ];
                        return new echarts.graphic.LinearGradient(
                          0,
                          0,
                          0,
                          1,
                          [
                            {
                              offset: 0,
                              color: colorItem[0],
                            },
                            {
                              offset: 1,
                              color: colorItem[1],
                            },
                          ],
                          false
                        );
                      },
                    },
                  },
                },
              ],
            });
          } else {
            this.creatBar({
              id: list.params1,
              xAxis: xAxis1,
              series: [
                {
                  type: "bar",
                  barMaxWidth: "20%",
                  name: list.title,
                  data: this[list.params1],
                  itemStyle: {
                    normal: {
                      //柱体的颜色
                      //右，下，左，上（1，0，0，0）表示从正右开始向左渐变
                      color: function (params) {
                        let colorList = [
                          ["#FF7B96", "#FA3E63"],
                          ["#FC6128", "#FAB519"],
                          ["#FBE695", "#FFC536"],
                          ["#4C83FF", "#2AFADF"],
                        ];

                        let colorItem =
                          colorList[
                            params.dataIndex > 2 ? 3 : params.dataIndex
                          ];
                        return new echarts.graphic.LinearGradient(
                          0,
                          0,
                          0,
                          1,
                          [
                            {
                              offset: 0,
                              color: colorItem[0],
                            },
                            {
                              offset: 1,
                              color: colorItem[1],
                            },
                          ],
                          false
                        );
                      },
                    },
                  },
                },
              ],
            });
          }
        });
      });
    },

    // 生成柱状图
    creatBar(obj) {
      console.log(obj, obj.id);
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById(obj.id));
      myChart.clear();
      let option = {};
      if (obj.series[0].data.length > 0) {
        option = {
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
            },
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
          },
          xAxis: [
            {
              type: "category",
              data: obj.xAxis,
              axisTick: {
                alignWithLabel: true,
              },
              axisLabel: {
                //X轴标签
                show: true,
                interval: 0,
                rotate: 40,
                textStyle: {
                  color: "#fff", //字体颜色
                  fontSize: 12, //字体大小
                },
                interval: obj.xAxis.length > 15 ? 3 : 0, //主要设置其间隔，间隔为3
              },
              axisLine: {
                lineStyle: {
                  color: "#fff",
                },
              },
            },
          ],
          yAxis: [
            {
              ...obj.yAxis,
              type: "value",
              nameTextStyle: {
                color: "#fff",
                fontSize: 12,
              },
              // interval: 20,
              lineStyle: {
                color: "#fff",
              },
              axisLabel: {
                textStyle: {
                  color: "#fff", //字体颜色
                  fontSize: 14, //字体大小
                },
                formatter: (e) => {
                  return `${e}`;
                },
              },
              axisTick: { show: false },
              axisLine: {
                show: false,
              },
              splitLine: {
                //Y轴分隔符
                show: true,
                lineStyle: {
                  color: "#fff",
                  type: "dashed",
                },
              },
            },
          ],
          series: obj.series,
        };
      } else {
        option = this.setEmpty();
      }
      option && myChart.setOption(option);
      window.onresize = function () {
        myChart.resize();
      };
    },

    // 折线图线的颜色
    lineColorLinear(index) {
      let arr = [
        [
          {
            offset: 0,
            color: "#4C83FF",
          },
          {
            offset: 1,
            color: "#2AFADF",
          },
        ],

        [
          {
            offset: 0,
            color: "#FAB519",
          },
          {
            offset: 1,
            color: "#FC6128",
          },
        ],

        [
          {
            offset: 0,
            color: "#FF7B96",
          },
          {
            offset: 1,
            color: "#FA3E63",
          },
        ],
      ];
      return arr[index];
    },

    // 设置数据为空时展示
    setEmpty() {
      return {
        title: {
          text: " {a|}",
          x: "center",
          y: "center",
          subtext: "糟糕！数据不见了",
          itemGap: -20,
          textStyle: {
            rich: {
              a: {
                color: "#000",
                fontSize: "16",
                height: 80,
                width: 160,
                backgroundColor: {
                  image:
                    "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjQiIGhlaWdodD0iNDEiIHZpZXdCb3g9IjAgMCA2NCA0MSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCiAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAxKSIgZmlsbD0ibm9uZSIgZmlsbFJ1bGU9ImV2ZW5vZGQiPg0KICAgIDxlbGxpcHNlIGZpbGw9IiNkZGQiIGN4PSIzMiIgY3k9IjMzIiByeD0iMzIiIHJ5PSI3IiAvPg0KICAgIDxnIGZpbGxSdWxlPSJub256ZXJvIiBzdHJva2U9IiM5OTkiPg0KICAgICAgPHBhdGgNCiAgICAgICAgZD0iTTU1IDEyLjc2TDQ0Ljg1NCAxLjI1OEM0NC4zNjcuNDc0IDQzLjY1NiAwIDQyLjkwNyAwSDIxLjA5M2MtLjc0OSAwLTEuNDYuNDc0LTEuOTQ3IDEuMjU3TDkgMTIuNzYxVjIyaDQ2di05LjI0eiIgLz4NCiAgICAgIDxwYXRoDQogICAgICAgIGQ9Ik00MS42MTMgMTUuOTMxYzAtMS42MDUuOTk0LTIuOTMgMi4yMjctMi45MzFINTV2MTguMTM3QzU1IDMzLjI2IDUzLjY4IDM1IDUyLjA1IDM1aC00MC4xQzEwLjMyIDM1IDkgMzMuMjU5IDkgMzEuMTM3VjEzaDExLjE2YzEuMjMzIDAgMi4yMjcgMS4zMjMgMi4yMjcgMi45Mjh2LjAyMmMwIDEuNjA1IDEuMDA1IDIuOTAxIDIuMjM3IDIuOTAxaDE0Ljc1MmMxLjIzMiAwIDIuMjM3LTEuMzA4IDIuMjM3LTIuOTEzdi0uMDA3eiINCiAgICAgICAgZmlsbD0iI2UxZTFlMSIgLz4NCiAgICA8L2c+DQogIDwvZz4NCjwvc3ZnPg==",
                },
              },
            },
          },
          subtextStyle: {
            fontSize: 16,
          },
        },
      };
    },

    // 公司弹窗修改
    changeCompany() {
      if (this.headIndex == "案场排名" && this.companyValue) {
        let index = this.rankingTypeList.findIndex((item) => item.value == 3);
        this.rankingTypeList[index].disabled = false;
      } else {
        this.dimensionType = 1;
        let index = this.rankingTypeList.findIndex((item) => item.value == 3);
        this.rankingTypeList[index].disabled = true;
      }
    },

    // 返回首页
    backHome() {
      this.$router.go(-1);
    },

    // 选中nav导航
    selectNav(index) {
      this.headIndex = index.title;
      sessionStorage.setItem("BIHeadIndex", this.headIndex);
      this.initPage();
    },

    // 时间类型选项被点击
    timerClick(index) {
      this.time = [];
      this.dateSelectIndex = index;
      this.initPage();
    },

    // 自定义时间改变
    timerChange() {
      this.dateSelectIndex = null;
      this.initPage();
    },

    // To doing
    //
    handleCurrentChange(e) {
      this.current = e;
      this.showDialog(this.showDialogData);
    },

    //
    handleSizeChange(e) {
      this.size = e;
      this.showDialog(this.showDialogData);
    },
  },
};
</script>


<style lang="scss" scoped>
.pages {
  position: relative;
  width: 100vw;
  height: 100vh;
  min-width: 1200px;
  display: flex;
  flex-direction: column;
  background: url("/img/bidata/ic_bg@2x.png") no-repeat;
  background-size: 1920px 1080px;
  overflow-y: auto;

  // 头部
  .header {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;

    .head-top {
      position: relative;
      width: 100%;
      height: 60px;
      background: url("/img/bidata/head.png") no-repeat;
      background-size: 100% 60px;

      .nav-box {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: 920px;
        height: 60px;
        display: grid;
        grid-template-columns: repeat(6, 1fr);

        .nav-box-item {
          flex-grow: 1;
          flex-shrink: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 16px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #ffffff;
          cursor: pointer;

          &.active {
            font-size: 16px;
            font-weight: 600;
            color: #2ed1ee;
          }

          .nav-box-item-img {
            margin: 0 6px;
            width: 22px;
            height: 14px;
          }
        }
      }

      .back {
        position: absolute;
        right: 80px;
        top: 50%;
        transform: translateY(-50%);
        width: 96px;
        height: 36px;
        background: #2671e2;
        border-radius: 6px;
        color: #fff;
        font-weight: 600;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-size: 16px;
        text-align: center;
        line-height: 36px;
        cursor: pointer;
      }
    }

    .head-bottom {
      width: 100%;
      height: 96px;
      display: flex;
      justify-content: center;

      .head-box {
        // width: 936px;
        height: 100%;
        display: flex;
        align-items: center;

        .search {
          margin: 0 0 0 40px;
        }

        .text {
          margin-right: 12px;
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #ffffff;
        }

        .timer {
          height: 32px;
          display: flex;
          border-radius: 4px;
          overflow: hidden;

          .timer-item {
            margin: 0 1px 0 0;
            padding: 6px 12px;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #ffffff;
            text-align: center;
            background: #0a164d;
            cursor: pointer;

            &.active {
              background: #2ed1ee;
            }

            /deep/.little {
              background-color: #0a164d;
              color: #fff;
              border-color: #0a164d;
            }
          }
        }
      }
    }
  }

  // 内容部分
  .bodys {
    padding: 0 0 30px 0;
    width: 100%;
    display: grid;
    grid-template-columns: 460px 936px 460px;
    grid-column-gap: 16px;
    justify-content: center;

    .middle {
      .items-top {
        width: 100%;
        height: 244px;
        background: url("/img/bidata/ic_sssp_bg@2x.png") no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;

        .title {
          flex-shrink: 0;
          margin: 0;
          width: 100%;
          text-align: center;
          line-height: 52px;
          font-size: 18px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #34dbfc;
        }

        .item-box {
          width: 100%;
          flex-grow: 1;
          display: grid;
          justify-content: center;
          grid-template-columns: repeat(5, 1fr);
          grid-column-gap: 14px;

          .item-box-item {
            cursor: pointer;
            .num {
              margin: 40px 0 14px;
              font-size: 36px;
              font-family: DINAlternate-Bold, DINAlternate;
              font-weight: bold;
              text-align: center;
            }

            .item-title {
              text-align: center;
              font-size: 18px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #ffffff;
            }
          }
        }
      }

      .item-btm {
        margin-top: 16px;
        width: 100%;
        height: 542px;
        background: url("/img/bidata/ic_map_bg@2x.png") no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;

        .jiedailiang {
          margin: 42px auto 3px;
          display: block;
          width: 135px;
          height: 38px;
        }

        .bgdsada {
          width: 100%;
          height: 24px;
        }

        .numberoftimes {
          width: 100%;
          height: 231px;
          display: flex;
          align-items: center;
          justify-content: center;

          .numberoftimes-img {
            width: 268px;
            height: 146px;
          }

          .numberoftimes-box {
            margin: 0 0 0 12px;
            width: 126px;
            height: 146px;
            background: url("/img/bidata/wei.png") no-repeat;
            background-size: 100% 14px;
            background-position: bottom;
            display: flex;
            align-items: baseline;
            justify-content: center;

            .cishu {
              margin-top: 48px;
              font-size: 56px;
              font-family: HelveticaNeue-BoldItalic, HelveticaNeue;
              font-weight: normal;
              color: #ffffff;
              line-height: 69px;
              background: linear-gradient(180deg, #ffffff 30%, #69efff 100%);
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
            }

            .ci {
              font-size: 24px;
              font-family: PingFangSC-Semibold, PingFang SC;
              font-weight: 600;
              color: #ffffff;
              background: linear-gradient(180deg, #ffffff 30%, #69efff 100%);
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
            }
          }
        }

        .ibox {
          width: 100%;
          height: 156px;
          display: grid;
          justify-content: center;
          grid-template-columns: 148px 148px 236px 148px 148px;
          grid-column-gap: 18px;

          .ibox-item {
            height: 156px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            cursor: pointer;

            .num {
              margin: 20px 0 6px;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 30px;
              font-family: DINAlternate-Bold, DINAlternate;
              font-weight: bold;
              color: #34dbfc;
            }

            .title {
              justify-self: flex-end;
              font-size: 16px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #ffffff;
            }
          }
        }
      }

      .item-mi {
        margin-top: 16px;
        width: 100%;
        // height: 374px;
        display: grid;
        grid-template-columns: repeat(2, 460px);
        grid-column-gap: 16px;

        .item-item {
          width: 100%;
          // height: 374px;
          display: flex;
          flex-direction: column;
          background: #0b1f53;
          border: 1px solid rgba(24, 122, 205, 0.3);

          .echarts {
            width: 100%;
            flex-grow: 1;
            height: 330px;
          }
        }
      }
    }
    .lside {
      .item-item {
        margin-bottom: 16px;
        width: 100%;
        display: flex;
        flex-direction: column;
        background: #0b1f53;
        border: 1px solid rgba(24, 122, 205, 0.3);

        .echarts {
          width: 100%;
          flex-grow: 1;
          height: 238px;
        }

        .rsidebox {
          padding: 0 6px 0 0;
          display: flex;
          align-items: center;

          .asd {
            margin: 0 14px;
            font-size: 16px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #ffffff;
            cursor: pointer;

            &.active {
              font-size: 16px;
              font-family: PingFangSC-Medium, PingFang SC;
              font-weight: 500;
              color: #34dbfc;
            }
          }
        }
      }
    }

    .rside {
      .item-item {
        margin-bottom: 16px;
        width: 100%;
        display: flex;
        flex-direction: column;
        background: #0b1f53;
        border: 1px solid rgba(24, 122, 205, 0.3);

        .echarts {
          width: 100%;
          flex-grow: 1;
          height: 238px;
        }
      }
    }
  }

  .caseRanking {
    padding: 0 0 30px 0;
    width: 100%;

    .head-boxs {
      padding: 0 16px;
      width: 100%;
      height: 114px;
      display: grid;
      grid-template-columns: repeat(8, 1fr);
      grid-column-gap: 16px;

      .head-box-items {
        padding: 24px 28px;
        background: url("/img/bidata/itemBg.png") no-repeat;
        background-size: 222px;

        .t {
          font-size: 16px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #34dbfc;
        }

        .b {
          display: flex;
          align-items: flex-end;

          .lside {
            margin: 10px 0 0;
            flex-grow: 1;
            display: flex;
            align-items: baseline;

            .resultA {
              margin-right: 4px;
              font-size: 30px;
              font-family: DINAlternate-Bold, DINAlternate;
              font-weight: bold;
              color: #ffffff;
            }

            .unit {
              font-size: 14px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #ffffff;
            }
          }

          .rside {
            margin: 10px 0 0;
            flex-shrink: 0;

            span {
              font-size: 14px;
              font-family: PingFangSC-Medium, PingFang SC;
              font-weight: 500;
              color: #fff;
            }

            .up {
              color: #f74e52;
            }

            .down {
              color: #33caae;
            }

            .r-img {
              margin-right: 4px;
              width: 22px;
              height: 12px;
            }
          }
        }
      }
    }

    .body-box {
      margin: 23px 0 0;
      padding: 0 16px;
      width: 100%;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-gap: 16px;

      .body-box-item {
        background: #0b1f53;
        border: 1px solid rgba(24, 122, 205, 0.3);

        .echarts {
          width: 100%;
          height: 262px;
        }
      }
    }
  }
}

.company {
  /deep/.el-input__inner {
    background-color: #0a164d;
    color: #fff;
    border-color: #0a164d;
  }
}

/deep/.el-date-editor {
  background-color: #0a164d;
  color: #fff;
  border-color: #0a164d;
}

/deep/.el-range-input {
  background-color: #0a164d;
  color: #fff;
  border-color: #0a164d;
}

.dialogtips {
  /deep/.el-dialog__header {
    padding: 0 0 0 24px;
    width: 100%;
    height: 46px;
    display: flex;
    justify-content: space-between;
    color: #fff;
    background: linear-gradient(to right, #1568b2 0%, #080935 100%);
  }

  /deep/.el-dialog__title {
    color: #fff;
    line-height: 46px;
  }
  /deep/.el-dialog__headerbtn {
    right: 24px;
    top: 13px;
  }
  /deep/.el-dialog__close {
    color: #fff;
    font-size: 19px;
  }

  /deep/.el-dialog__body {
    padding: 0;
  }
}
/deep/.el-table__row {
  background-color: #0b1f53;
  color: #fff;
  font-size: 14px;
}
/deep/.second {
  background-color: rgba(24, 122, 205, 0.2);
  color: #fff;
  font-size: 14px;
}

/deep/.el-table__row td {
  border: none;
}
/deep/.el-table tbody tr:hover > td {
  background-color: unset !important; //修改成自己想要的颜色即可
}
/deep/ .el-table::before {
  background: #0b1f53;
}

/deep/.el-pagination {
  background: #0b1f53;
  display: flex;
  justify-content: flex-end;
}
/deep/.el-pagination__total {
  color: #fff;
}

/deep/.el-input__inner {
  background: #0a164d;
  color: #fff;
}

/deep/.btn-prev {
  background: #0a164d;
  color: #fff;
}
/deep/.el-icon-arrow-left {
  color: #fff;
}

/deep/.el-icon-arrow-right {
  color: #fff;
}
/deep/.btn-next {
  background: #0a164d;
  color: #fff;
}

/deep/.el-pagination button:disabled {
  background: #0a164d;
}

/deep/.el-pager {
  background: #0a164d;
}

/deep/.number {
  background: transparent;
}

/deep/.el-pagination__jump {
  color: #fff;
}

::v-deep .el-table__body-wrapper {
  &::-webkit-scrollbar {
    // 整个滚动条
    width: 0; // 纵向滚动条的宽度
    background: rgba(213, 215, 220, 0.3);
    border: none;
  }
  &::-webkit-scrollbar-track {
    // 滚动条轨道
    border: none;
  }
}

::v-deep .el-table--scrollable-y .el-table__body-wrapper {
  overflow-y: auto;
}

::v-deep .el-table th.gutter {
  display: none;
  width: 0;
}
::v-deep.el-table__header-wrapper colgroup col[name="gutter"] {
  display: none !important;
  width: 0 !important;
}

::v-deep .el-table__body {
  width: 100% !important;
}
/deep/.gutter {
  width: 0 !important;
  display: none !important;
}

/deep/.search .el-button--primary {
  background-color: #2ed1ee !important;
}
</style>
<style>
.el-table__header-wrapper colgroup col[name="gutter"] {
  display: none !important;
  width: 0 !important;
}
</style>