carwin_report/.history/src/views/IndexView/details/CLKCdetails_20230710155036.vue

<template>
  <div class="JCDetails" style="padding: 50px;">
    <h1>车辆库存</h1>

    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="进销存报表" name="first">
        <div class="topbox" style="display: flex;justify-content: space-between;">
          <div style="width: 60%;"></div>
          <div class="selec">
            <el-select v-model="value" filterable multiple collapse-tags clearable placeholder="请选择">
              <el-option v-for="item in options" :key="item.value" :label="item.text" :value="item.value">
              </el-option>
            </el-select>
          </div>
          <div class="timeselec">
            <el-date-picker v-model="value2" type="date" placeholder="选择日期">
            </el-date-picker>
          </div>
          <button style="width: 100px;height: 40px;background-color: aqua;" @click="chaxun2(value, value2)">查询</button>
        </div>
        <div> <el-table :header-cell-style="{
          background: 'rgba(30, 111, 200,0.8)',
          color: 'white',
          textAlign: 'center',
          border: '1px rgb(70, 91, 117) solid',
        }" :data="tableData" style="width: 100%">
            <el-table-column prop="company" label="店面" width="100">
            </el-table-column>
            <el-table-column prop="tqxl" label="同期销量">
            </el-table-column>
            <el-table-column prop="ymb" label="月目标">
            </el-table-column>
            <el-table-column prop="rzdj" label="日增定交">
            </el-table-column>
            <el-table-column prop="lcdd" label="留存订单">
            </el-table-column>
            <el-table-column prop="drjc" label="当日交车">
            </el-table-column>
            <el-table-column prop="yljc" label="月累交车">
            </el-table-column>
            <el-table-column prop="wcl" label="完成率">
            </el-table-column>
            <el-table-column prop="hb" label="环比">
            </el-table-column>
            <el-table-column prop="tqxl_jzdq" label="同期销量(截至当前)">
            </el-table-column>
            <el-table-column prop="tb" label="同比">
            </el-table-column>
            <el-table-column prop="kczl" label="库存总量">
            </el-table-column>
            <el-table-column prop="kcje" label="库存金额">
            </el-table-column>
            <el-table-column prop="kcsd" label="库存深度">
            </el-table-column>
            <el-table-column prop="yplqcltc" label="银票临期车辆台次">
            </el-table-column>
            <el-table-column prop="180zb" label="180天以上库存占比">
            </el-table-column>
            <el-table-column prop="180je" label="180以上车辆金额">
            </el-table-column>
            <el-table-column prop="xjczb" label="现金车占比">
            </el-table-column>
            <el-table-column prop="xjcje" label="现金车金额">
            </el-table-column>
            <el-table-column prop="ymygkcsd" label="月末预估库存深度">
            </el-table-column>

          </el-table></div>
      </el-tab-pane>
      <el-tab-pane label="分渠道销量统计分析" name="second">
        <div class="topbox" style="display: flex;justify-content: space-between;">
          <div style="width: 60%;"></div>
          <div class="selec">
            <el-select v-model="value" filterable multiple collapse-tags clearable placeholder="请选择">
              <el-option v-for="item in options" :key="item.value" :label="item.text" :value="item.value">
              </el-option>
            </el-select>
          </div>
          <div class="timeselec">
            <el-date-picker v-model="value3" type="month" placeholder="选择日期">
            </el-date-picker>
          </div>
          <button style="width: 100px;height: 40px;background-color: aqua;" @click="chaxun(value, value3)">查询</button>
        </div>
        <div> <el-table :header-cell-style="{
          background: 'rgba(30, 111, 200,0.8)',
          color: 'white',
          textAlign: 'center',
          border: '1px rgb(70, 91, 117) solid',
        }" :data="tableData2.table_data" style="width: 100%">
            <el-table-column v-for="(item, index) in tableData2.table_title" :prop="item" :label="item" :key="index"
              width="100">
            </el-table-column>

          </el-table></div>
      </el-tab-pane>

    </el-tabs>


  </div>
</template>
<script>
import { column } from "./tuozhuai";
import { jxctabledataInfo, fqdxltabledataInfo } from "../../../servuces/prove";
export default {
  data () {
    return {
      //进销存
      tableData: [],
      tableData2: [],
      options: [],
      value: '',
      value2: '',
      value3: '',
      activeName: 'first'
    }
  },
  created () {
    const data = sessionStorage.getItem('data')
    console.log(data);
    if (data) {
      this.options = JSON.parse(data)
    }
  },
  mounted () {
    column(this.tableData)
    this.jxctabledataapi()
    this.fqdxltabledataapi()
  },
  methods: {
    chaxun (value, value3) {
      const strvalue = value.join(',')
      const date = new Date(value3)
      // 获取年份和月份
      const year = date.getFullYear();
      const month = date.getMonth() + 1; // 月份从0开始，需要加1

      // 将年份和月份拼接成所需形式的字符串
      const strvalue1 = `${year}-${month}`;
      fqdxltabledataInfo({ "company_ids": strvalue, "search_month": strvalue1 }).then(res => {
        console.log('查询分期业务', res);
        this.tableData2 = res.data
      }
      )
      // console.log(strvalue, strvalue1);
    },
    chaxun2 (value, value2) {
      const strvalue = value.join(',')
      const date = new Date(value2)
      // 获取年份和月份
      const year = date.getFullYear();
      const month = date.getMonth() + 1; // 月份从0开始，需要加1
      const day = date.getDate()
      // 将年份和月份拼接成所需形式的字符串
      const strvalue1 = `${year}-${month}-${day}`;
      jxctabledataInfo({ "company_ids": strvalue, "search_date": strvalue1 }).then(res => {
        // console.log('查询分期业务', res);
        this.tableData = res.data
        // this.tableDatahj = res.footer
      }
      )
      console.log(strvalue, strvalue1);
    },
    handleClick (tab, event) {
      console.log(tab, event);
      const activeTab = tab.index
      console.log(activeTab);
      if (activeTab === 2) {
        column(this.tableData2)
      }
    },

    //进销存接口数据
    jxctabledataapi () {
      jxctabledataInfo().then(res => {
        // console.log(res);
        this.tableData = res.data

      })
    },
    //分渠道销量统计
    fqdxltabledataapi () {
      fqdxltabledataInfo().then(res => {

        console.log('分销渠道', res.data);
        this.tableData2 = res.data
        console.log(this.tableData2);

      })
    }
  }
}
</script>
<style>
/* .el-table tr {
  background-color: none;
  color: white;
} */
.el-table .warning-row {
  background-color: rgba(15, 78, 146, 0.827);

}

.el-table .success-row {
  background-color: rgb(15, 78, 146, 0.5);
}

.has-gutter tr th:last-child {
  background-color: rgba(30, 111, 200, 0.8);
}

.el-table tr {
  background-color: rgb(15, 78, 146, 0.5);
}
</style>
<style scoped lang="scss">
.JCDetails {
  .selec {
    margin: 0 0 20px 0;
  }
}

::v-deep .el-table {
  background-color: transparent;
  border-color: rgb(70, 91, 117);
}

::v-deep .el-table td,
.building-top .el-table th.is-leaf {
  border-color: rgb(70, 91, 117);
  color: white;
}

::v-deep .el-table td:hover {
  color: rgb(5, 51, 159);
}

::v-deep .has-gutter th {
  border-color: rgb(70, 91, 117);
}

::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td {
  background-color: rgb(58, 147, 189);
}

::v-deep #tab-first,
::v-deep #tab-second,
::v-deep #tab-third,
::v-deep #tab-fourth {
  color: #fff; //设置修改默认蚊子颜色，背景颜色，等
}

::v-deep .el-tabs__item.is-active {
  color: rgb(37, 99, 214) !important;
}
</style>