carwin_report/src/views/TableDetail/RCCZtable.vue

<template>
  <div>
    <!-- 标题 -->
    <div class="title" style="margin-top: 10px">
      <div style="display: flex; justify-content: space-between">
        <h1 style="color: azure">漯河亿通集团数据看板</h1>

        <div class="time">
          <span class="iconfont icon-riqi"></span>&nbsp;&nbsp;{{ currentTime }}
        </div>
      </div>
      <img src="../../assets/bargound/图层 6.png" width="100%" />
    </div>
    <div class="content">
      <!-- 库存车辆 -->

      <el-tabs type="border-card" class="theme">
        <div style="display: flex; justify-content: space-between">
          <!-- 图标 -->
          <div>
            <p>
              <img src="../../assets/bargound/data.png" alt="" /><span class="kccl">首次入厂产值</span>
            </p>
          </div>
          <div style="display: flex">
            <!-- 下拉框 -->
            <div style="margin-right: 20px">
              <el-select class="select" v-model="company_ids" multiple placeholder="请选择" style="width: 200px">
                <el-option v-for="item in options" :key="item.value" :label="item.text" :value="item.value">
                </el-option>
              </el-select>
            </div>
            <!-- 日期表 -->
            <div class="dataForm" style="margin-right: 20px">
              <el-date-picker
                v-model="value1"
                type="month"
                placeholder="2023-08"
              >
              </el-date-picker>
            </div>
            <!-- 按钮 -->
            <el-button @click="searchBtn" style="background-color: rgb(40, 155, 209); color: black">查询</el-button>
          </div>
        </div>
       <!-- 表格 -->
       <el-table
       border
          class="exporttable"
          :data="tableData"
         
          stripe
          :header-cell-style="{ 'text-align': 'center', background: '#03111c' }"
          :cell-style="{ 'text-align': 'center' }"
          show-summary
          style="width: 100%; margin: 1px"
          max-height="700">
            <el-table-column
              prop="name"
              label="品牌">
            </el-table-column>
            <el-table-column
              
              label="产值">
              <el-table-column
              prop="mbcz"
              label="目标">
            </el-table-column>
            <el-table-column
              prop="sjcz"
              label="实际达成">
            </el-table-column>
            <el-table-column
              prop="czwcl"
              label="完成率">
            </el-table-column>
            <el-table-column
              prop="cztb"
              label="同比">
            </el-table-column>
            <el-table-column
              prop="czhb"
              label="环比">
            </el-table-column>
            </el-table-column>
           
            <el-table-column
              prop="name"
              label="产值分类">
              <el-table-column
              prop="jdmb"
              label="机电目标">
            </el-table-column>
            <el-table-column
              prop="jdsj"
              label="实际达成">
            </el-table-column>
            <el-table-column
              prop="spmb"
              label="索赔目标">
            </el-table-column>
            <el-table-column
              prop="spsj"
              label="实际达成">
            </el-table-column>
            <el-table-column
            
              label="钣喷目标">
            </el-table-column>
            <el-table-column
              prop="bpsj"
              label="实际达成">
            </el-table-column>
          
            </el-table-column>
            <el-table-column
              prop="name"
              label="毛利率">
              <el-table-column
              prop="jdmlv"
              label="机电毛利率">
            </el-table-column>
            <el-table-column
              prop="spmll"
              label="索赔毛利率">
            </el-table-column>
            <el-table-column
              prop="bpmll"
              label="钣喷毛利率">
            </el-table-column>
            <el-table-column
              prop="zhmlv"
              label="综合毛利率">
            </el-table-column>
            <el-table-column
              prop="mlvhb"
              label="环比">
            </el-table-column>
            <el-table-column
              prop="mlvtb"
              label="同比">
            </el-table-column>
            </el-table-column>
            <el-table-column
              prop="amount7"
              label="客单价">
              <el-table-column
              prop="jxkdj"
              label="机修客单价">
            </el-table-column>
            <el-table-column
              prop="bpkdj"
              label="钣喷客单价">
            </el-table-column>
            </el-table-column>
            
          </el-table>

        <!-- <el-tab-pane label=" 分渠道销量统计分析">配置管理</el-tab-pane> -->
      </el-tabs>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      
      currentTime: "",
      company_ids: [],
      //表格各类属性
      tableData: [],
      //下拉框内属性
      options: [],
      //日期表属性
      pickerOptions: {
        shortcuts: [
        
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
        
        ],
      },
      value1: [("2023-08-01")],
    };
  },
  computed: {
    Riqi : function getNowFormatDate() {
      let date = new Date(),
        year = date.getFullYear(), //获取完整的年份(4位)
        month = date.getMonth() + 1, //获取当前月份(0-11,0代表1月)
        strDate = date.getDate(); // 获取当前日(1-31)
      if (month < 10) month = `0${month}`; // 如果月份是个位数，在前面补0
      if (strDate < 10) strDate = `0${strDate}`; // 如果日是个位数，在前面补0

      return `${year}-${month}`;
    }
  },
  mounted() {
    this.updateTime(); //时间
    this.getTableDate(); //开始获取表格
    this.getSelectDate(); //下拉框接口数据
    console.log(this.Riqi);
    this.value1 =this.Riqi;
  },
  beforeDestroy() {
    // 在组件销毁前清除定时器，避免内存泄漏
    clearInterval(this.timer);
  },
  methods: {
 
    //表格接口数据
    getTableDate() {
      axios
        .get("http://192.168.2.55:8022/plugins/lhyt/shjy_detail", {
          params: {
            company_ids: this.company_ids.join(),
            search_month: this.Riqi,
          }
        })
        .then((res) => {
          console.log("--------", res.data.data);
          this.tableData = res.data.data;
        });
    },
    //下拉框数据
    getSelectDate() {
      axios
        .get("http://192.168.2.55:8022/plugins/lhyt/get_companies")
        .then((ret) => {
          this.options = ret.data.data;
        });
    },
    //更新时间
    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}`;
    },
    resetDateFilter() {
      this.$refs.filterTable.clearFilter("date");
    },
    clearFilter() {
      this.$refs.filterTable.clearFilter();
    },
    formatter(row, column) {
      return row.address;
    },
    filterTag(value, row) {
      return row.tag === value;
    },
    filterHandler(value, row, column) {
      const property = column["property"];
      return row[property] === value;
    },
    //查询
    searchBtn() {
     this.getTableDate()
    
    }
  },
};
</script>

<style scoped="less">
.content {
  padding: 10px;
}

.title {
  width: 100%;
  /* background: url('../../assets/bargound/'); */
  height: 64px;

  p {
    height: 100px;
  }
}

.kccl {
  color: #697c91;
  font-size: 24px;
  margin-left: 10px;
}

.el-input__inner {
  background-color: #133654;
}

.el-input__inner {
  border: 0;
}

::v-deep .el-date-editor .el-range-input {
  display: inline-block;
  height: 100%;
  width: 39%;
  text-align: center;
  font-size: 14px;
  color: #ffffffba;
  background-color: #133654;
}

::v-deep .el-table {
  border: none;
}

::v-deep .el-table::before {
  background-color: black;
}

::v-deep .el-table__footer-wrapper tbody td.el-table__cell,
.el-table__header-wrapper tbody td.el-table__cell {
  background-color: rgb(2, 62, 2);
  color: #93acbf;
}

::v-deep .el-table--border::after,
.el-table--group::after,
.el-table::before {
  content: "";
  position: absolute;
  background-color: black;
  z-index: 1;
}
/* 日期表 */
:deep(.el-input__inner) {
  background-color: #133654;
  border: none;
  color: #ffffffc1;
}
::v-deep .el-table td,
.building-top .el-table th.is-leaf {
  color: #93acbf;
}

::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td {
  background-color: #133654;
}

::v-deep .el-table tr {
  background: #133654;
}

::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td {
  background: #081b2b;
}

/**
改变边框颜色
 */
.el-table {
  border-bottom: 1px solid #102b47;
  border-right: 1px solid #102b47;
  margin: 0 auto;
}

::v-deep .el-tabs.theme.el-tabs--top.theme.el-tabs--border-card .el-tabs__nav-scroll {
  border-bottom: 1px solid;
}

::v-deep.el-table th {
  border: 1px solid #102b47 !important;
  border-right: none !important;
  border-bottom: none !important;
}

::v-deep.el-table td {
  border: 1px solid #102b47;
  border-right: none !important;
}

.time {
  color: rgb(174, 201, 222);
  margin-right: 2%;
  font-size: 16px;
  overflow: hidden;
  max-width: 15%;
  white-space: nowrap;
}
</style>