carwin_report/src/views/IndexView/IndexView.vue

<template>
  <dv-full-screen-container>
    <div class="bigbox">
      <div class="top">
        <h2>
          集团数据看板
          <div class="time">{{ currentTime }}</div>
        </h2>
        <dv-decoration-5 :color="['rgb(63, 150, 165)', 'yellow']" style="height:60px;margin: -25px auto;" />
      </div>
      <div class="container">
        <div class="left">
          <div class="smallbox">
            <dv-border-box-1 class="dv-border-box-1one">
              <router-link class="unline" :to="{ name: 'keliufenxidetails' }">
                客流分析</router-link>
              <!-- <div class="lvlanbox">
                <div class="lv">
                  <p>首次进店</p>
                  <h4>
                    <span>1068
                    </span>人
                  </h4>
                </div>
                <div class="lan">
                  <p>首次进店</p>
                  <h4>1068</h4>
                </div>
              </div> -->
              <!-- <div id="chartone"> -->
              <KLFX />
              <!-- </div> -->
            </dv-border-box-1>
            <dv-border-box-1 class="dv-border-box-1two"><router-link class="unline"
                :to="{ name: 'cheliangkucundetails' }">
                车辆库存</router-link>
              <div class="lvlanbox">
                <div class="lv">
                  <p>库存台次</p>
                  <h4 style="overflow: hidden;">{{ clkcdata.stock_count }}<span>台</span></h4>
                </div>
                <div class="lan">
                  <p>库存金额</p>
                  <h4 style="overflow: hidden;height: 53px;">{{ (clkcdata.stock_amount / 10000).toFixed(2)
                  }}<span>万</span></h4>
                </div>

              </div>
              <div class="whater">
                <dv-water-level-pond :config="chartConfig1" style="width:30%;height:100px" />
                <p>超180天</p>
                <dv-water-level-pond :config="chartConfig2" style="width:30%;height:100px" />
                <p>现金车</p>
              </div>
            </dv-border-box-1>
          </div>
          <p style="text-align: center;padding: 10px;font-size: 1.2rem;">销售分析</p>
          <div class="monthly">
            <dv-border-box-1 class="dv-border-box-1four"><router-link class="unline"
                :to="{ name: 'xiaoshoufenximondetails' }">
                月度</router-link>
              <div class="monthlyboxs">
                <TCHB></TCHB>
              </div>

            </dv-border-box-1>
            <!-- <dv-border-box-1 class="dv-border-box-1five">年度
              <div class="monthlyboxs">
                <div class="monthlybox" style="padding-left: 20px;">
                  <div class="mon1 lv">
                    <p>首次进店</p>
                    <h4><span>1068</span>人</h4>
                  </div>
                  <div class="mon2 lan">
                    <p>首次进店</p>
                    <h4><span>1068</span>人</h4>
                  </div>
                  <div class="mon3 huang">
                    <p>首次进店</p>
                    <h4><span>1068</span>人</h4>
                  </div>
                </div>
                <div class="monthlybox" style="padding-top: 20px;">
                  <p>台次环比</p>
                  <TCHBY></TCHBY>
                  <p style="margin-bottom: 20px;color: rgb(91, 211, 218);">完成率25</p>
                  <div style="width: 80%;margin: 0 auto;"><el-progress :text-inside="true" define-back-color="gray"
                      :stroke-width="12" color="rgb(12, 150, 120)" :percentage="70"></el-progress></div>
                </div>
                <div class="monthlybox" style="padding-top: 20px;">
                  <p>台次环比</p>
                  <LRHBY></LRHBY>
                  <p style="margin-bottom: 20px;color: rgb(91, 211, 218);">完成率25</p>
                  <div style="width: 80%;margin: 0 auto;"><el-progress :text-inside="true" define-back-color="gray"
                      :stroke-width="12" color="rgb(150, 162, 60)" :percentage="70"></el-progress></div>
                </div>
              </div>

            </dv-border-box-1> -->
            <dv-border-box-1 class="dv-border-box-1five"><router-link class="unline" :to="{ name: 'fenqiyewudetails' }">
                分期业务</router-link>
              <FQYW />
              <!-- <div style="width: 30%;">
                  <div>
                    <p style="margin: 20px 0;color: rgb(91, 211, 218);">高期限25</p>
                    <div style="width: 100%;margin: 0 auto;"><el-progress :text-inside="true" define-back-color="gray"
                        :stroke-width="20" color="rgb(80, 180, 210)" :percentage="70"></el-progress></div>
                  </div>
                  <div>
                    <p style="margin: 20px 0;color: rgb(110, 211, 218);">渗透率25</p>
                    <div style="width: 100%;margin: 0 auto;"><el-progress :text-inside="true" define-back-color="gray"
                        :stroke-width="20" color="rgb(100, 233, 180)" :percentage="70"></el-progress></div>
                  </div>
                </div> -->
            </dv-border-box-1>
            <dv-border-box-1 class="dv-border-box-1five"><router-link class="unline" :to="{ name: 'keyuanfenxidetails' }">
                客源分析</router-link>
              <KYFX />
            </dv-border-box-1>
            <div class="chanyetj">
              <p style="text-align: center;margin:30px 0 30px  0;cursor: pointer;" @click="gojcdetail"><span
                  class="unline">交车排名</span>
              </p>
              <JCPM></JCPM>
              <!-- <div><dv-scroll-board :config="jiaoche"
                  style="width:600px;height:300px;text-align: center;margin: 0 auto;cursor: pointer;" />
              </div> -->
            </div>
          </div>
        </div>
        <div class="right">
          <div class="smallbox">
            <div style="width: 45%;cursor: pointer;" @click="gorctcdetail()">
              <dv-border-box-7 :color="['rgb(50,191,246)', 'rgb(131,191,246)']" class="taici">
                <div class="lv">
                  <p>入厂台次</p>
                  <h4><span>{{ rctcdata.total
                  }}</span>台</h4>
                </div>
                <div class="shoubao1">
                  <p><span>首保</span><span>{{ rctcdata.sb_count }}</span></p>
                  <p><span>索赔</span><span>{{ rctcdata.sp_count }}</span></p>
                  <p><span>定保</span><span>{{ rctcdata.db_count
                  }}</span></p>
                  <p><span>一般维修</span><span>{{ rctcdata.ws_count
                  }}</span></p>
                  <p><span>返喷</span><span>{{ rctcdata.bp_count
                  }}</span></p>
                  <p></p>
                </div>
              </dv-border-box-7>
            </div>
            <div style="width: 45%;cursor: pointer;" @click="gorcczdetail()">
              <!-- @click="gorcczdetail()" -->
              <dv-border-box-7 :color="['rgb(50,191,246)', 'rgb(131,191,246)']" class="chanzhi">
                <div class="lv">
                  <p>入厂产值</p>
                  <h4><span>{{ rctcdata.total_amount
                  }}</span>万</h4>
                </div>
                <div class="shoubao2">

                  <p><span>首保</span><span>{{ rctcdata.sb_amount }}</span></p>
                  <p><span>索赔</span><span>{{ rctcdata.sp_amount }}</span></p>
                  <p><span>定保</span><span>{{ rctcdata.db_amount
                  }}</span></p>
                  <p><span>一般维修</span><span>{{ rctcdata.ws_amount
                  }}</span></p>
                  <p><span>事故</span><span>{{ rctcdata.bp_amount
                  }}</span></p>
                  <p></p>
                </div>
              </dv-border-box-7>
            </div>
          </div>
          <div class="chanyetj">
            <p style="text-align: center;margin: 20px 0;" @click="goczdetail"><span class="unline">产值统计</span></p>
            <CZTJ></CZTJ>
          </div>
          <div class="chanyetj">
            <p style="text-align: center;margin: 30px 0 30px 0;" @click="gobxdetail">
              <span class="unline">保险承保核保</span>

            </p>
            <BXHB></BXHB>
          </div>
          <div style="width: 100%;">
            <p style="margin: 30px 0;text-align: center;cursor: pointer;" @click="gokcfxdetails"><span
                class="unline">库存分析</span></p>
            <KCFX />
          </div>
          <div style="width: 100%;">
            <p style="text-align: center;margin: 0 0 50px 0;"><router-link style="color: white;text-decoration: none;"
                :to="{ name: 'baokefenxidetails' }">
                <span class="unline">保客分析</span></router-link></p>
            <BKFX />
          </div>
        </div>
      </div>
    </div>
  </dv-full-screen-container>
</template>

<script>
import KLFX from "./chart/KLFX.vue";//客流分析
import FQYW from "./chart/FQYW.vue";//分期业务
import KYFX from "./chart/KYFX.vue";//客源分析
import KCFX from "./chart/KCFX.vue";//库存分析
import BKFX from "./chart/BKFX.vue";//保客分析
import TCHB from "./chart/TCHB.vue";//月度台次环比
// import TCHBY from "./chart/TCHBY.vue";//台次环比
// import LRHBY from "./chart/LRHBY.vue";//利润环比
import JCPM from "./chart/JCPM.vue";//交车排名
import CZTJ from "./chart/CZTJ.vue";//交车排名
import BXHB from "./chart/BXHB.vue";//交车排名
import { clkcchartInfo, rctcchartInfo, kcfxcompanInfo } from "../../servuces/prove";
import { mapMutations } from "vuex";
export default {
  data () {
    return {
      currentTime: "",//时间
      rctcdata: [],//首页入场台次数据
      clkcdata: [],//首页车辆库存数据
      //水位图
      chartConfig1: {
        data: [],
        colors: ['rgb(10,101,140)'],
        waveOpacity: 0.6
      },
      chartConfig2: {
        data: [],
        colors: ['rgb(10,101,140)'],
        waveOpacity: 0.6
      },
    };
  },
  mounted () {
    // 在组件创建时启动定时器，每秒更新一次时间
    this.updateTime();
    this.clkcchartapi()////首页车辆库存数据接口调取
    this.rctcchartapi()//首页入场台次数据接口调取
    this.kcfxcompanapi()//门店
    // //数字翻牌器定时器
    // setInterval(() => {
    //   this.power(360);
    // }, 3000);
  },
  beforeDestroy () {
    // 在组件销毁前清除定时器，避免内存泄漏
    clearInterval(this.timer);
  },
  components: {
    KLFX,
    FQYW,
    KYFX,
    KCFX,
    BKFX,
    TCHB,
    JCPM,
    CZTJ,
    BXHB
  },
  methods: {
    ...mapMutations(['setData']),
    kcfxcompanapi () {
      kcfxcompanInfo().then(res => {
        const storefront = res.data
        this.setData(storefront)
        console.log('门店', res);
        sessionStorage.setItem('data', JSON.stringify(storefront))
      })
    },
    //首页入场台次数据接口调取
    rctcchartapi () {
      rctcchartInfo().then(res => {
        this.rctcdata = res.data
      })
    },
    //超过180
    //首页车辆库存数据接口调取
    clkcchartapi () {
      clkcchartInfo().then(res => {
        // const { chartConfig1 } = this
        // this.chartConfig1.data = res.data.cash_ratio
        this.chartConfig1.data = [(res.data.cash_ratio * 100).toFixed(2), 0]
        this.chartConfig2.data = [(res.data.overstock_ratio * 100).toFixed(2), 0]
        // 第一个参数最大值，第二个是默认值(默认为0就行了，字段拼成的数组)
        this.clkcdata = res.data
        this.chartConfig2 = { ...this.chartConfig2 }
        this.chartConfig1 = { ...this.chartConfig1 }
      })
    },


    //库存分析点击去详情 
    gokcfxdetails () {
      this.$router.push('kucunfenxidetails')
    },
    //交车排行点击去详情
    gojcdetail () {
      this.$router.push('jiaochedetails')
    },
    //产值统计点击详情
    goczdetail () {
      this.$router.push('chanzhidetails')
    },
    //保险核保点击详情跳转
    gobxdetail () {
      this.$router.push('baoxiandetails')
    },
    //入场台次点击去产值统计
    gorctcdetail () {
      this.$router.push('ruchangtaicidetails')
    },
    //入场产值点击去产值统计
    gorcczdetail () {
      this.$router.push('ruchangchanzhidetails')
    },
    // //数字翻牌器
    // power(n) {
    //   this.confignumber1.number[0] = Math.floor((Math.random() * n) + 1);
    //   this.confignumber1 = { ...this.confignumber1 };//对象解构，更新props
    // },
    updateTime () {
      // 更新时间的方法
      this.currentTime = this.getCurrentTime();

      // 每秒更新一次时间
      this.timer = setInterval(() => {
        this.currentTime = this.getCurrentTime();
      }, 1000);
    },
    getCurrentTime () {
      // 获取当前时间的方法
      const now = new Date();
      const year = now.getFullYear();
      const month = String(now.getMonth() + 1).padStart(2, "0");
      const day = String(now.getDate()).padStart(2, "0");
      const hours = String(now.getHours()).padStart(2, "0");
      const minutes = String(now.getMinutes()).padStart(2, "0");
      const seconds = String(now.getSeconds()).padStart(2, "0");
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
  },
};
</script>
<style scoped lang="scss">
::-webkit-scrollbar {
  width: .3vw;
  background-color: rgba(30, 111, 200, 0.8)b;
}

::-webkit-scrollbar-thumb {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
  border-radius: 5px;
  background-color: rgb(132, 153, 216);
}

::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  background: rgba(30, 111, 200, 0.8);
}

#dv-full-screen-container {
  height: 100vh;
  overflow-y: auto;
  /* 当纵向内容溢出时显示滚动条 */
  /* 设置全屏高度 */
}

.bigbox {
  width: 96%;
  margin: 0 auto;

  .top {
    margin: 0 auto;
    width: 96%;

    h2 {
      padding-top: 10px;
      font-weight: 400;
      text-align: center;
      position: relative;

      .time {
        position: absolute;
        right: -30px;
        top: 33px;
        font-size: 16px;
      }
    }

    .dv-decoration-5 {


      polyline {
        margin-bottom: 20px;
      }
    }
  }

  .container {
    display: flex;
    justify-content: space-around;
    margin-top: 20px;

    .left {
      width: 40%;
      height: 300px;

      .smallbox {
        width: 100%;
        display: flex;
        justify-content: space-between;

        .dv-border-box-1one,
        .dv-border-box-1two {
          color: white;
          font-size: 1.2rem;
          text-align: center;
          width: 50%;
          height: 280px;

          #chartone {
            width: 200px;
            height: 150px;
            margin-left: 20px;
          }

          .lvlanbox {
            display: flex;
            justify-content: space-evenly;


          }

          .whater {
            display: flex;
            justify-content: space-evenly;
            margin-top: 30px;
            text-align: start;
            position: relative;
            width: 100%;

            p {
              color: white;
              text-align: center;
              position: absolute;
              font-size: 18px;
            }

            p:nth-child(2) {
              top: 60px;
              left: 20%;
            }

            p:nth-child(4) {
              top: 60px;
              right: 21%;
            }

            .dv-water-pond-level canvas {
              margin-left: 0 !important;
            }
          }

        }

      }

      .dv-border-box-1four,
      .dv-border-box-1five {
        width: 95%;
        height: 300px;
        text-align: center;
        font-size: 18px;
        margin: 0 auto;
        font-weight: 600;

        // .monthlyboxs {
        //   display: flex;
        //   justify-content: space-evenly;
        //   font-weight: 400;

        //   .monthlybox {
        //     width: 33%;

        //     ::v-deep .el-progress-bar__innerText {
        //       display: block;
        //     }
        //   }
        // }
      }

      .dv-border-box-1five {
        margin-top: 30px;

        .fenqibox {
          display: flex;
          justify-content: space-around;

        }
      }
    }

    .right {
      width: 55%;
      padding-bottom: 150px;

      .smallbox {
        display: flex;
        justify-content: space-evenly;
        margin-top: 10px;


        .taici,
        .chanzhi {
          width: 100%;
          height: 320px;

          .shoubao1,
          .shoubao2 {
            width: 300px;
            height: 200px;
            margin: 30px auto;

            p {
              margin: 5px 0 0 32px;
            }

            p:nth-last-child(1) {
              margin-top: 15px;
              margin-left: 80px;
            }

            p:nth-child(4) {
              margin-left: 0px;
            }


            p span:nth-child(2) {
              margin-left: 128px;
            }
          }

          .lv {
            margin: 20px auto;
          }
        }
      }

      .chanyetj {
        p {
          cursor: pointer;
        }
      }
    }
  }
}
</style>