X-web/src/views/common/home.vue

<template>
  <div class="mod-home">
    <el-row :span="24" class="sample-bg">
      <el-col :span="6" class="bg1-1">
        <el-row :span="24" class="bg1-1-1">
          <div class="box-company-title">
            <div class="company-title">东齐公司大数据看板</div>
          </div>
        </el-row>
        <el-row :span="24" class="bg1-1-2">
          <div class="box-custom-number">
            <div class="custom-number">客户数：10</div>
          </div>
        </el-row>
        <el-row :span="24" class="bg1-1-1">
          <div class="box-contract-number">
            <div class="contract-number">合同数：10</div>
          </div>
        </el-row>
        <el-row :span="24" class="bg1-1-2">
          <div class="box-contract-amount">
            <div class="contract-amount">合同总金额：10</div>
          </div>
        </el-row>
      </el-col>
      <el-col :span="12" class="bg1-2">
        <el-row :span="24" class="bg1-2-1">
          <div class="box-notice-title">
            <div class="notice-title">通知：热烈欢迎领导莅临考察</div>
          </div>
        </el-row>
        <el-row :span="24" class="bg1-2-2">
          <div class="box-stat-number">
            <div class="stat-number">
              <div class="item">
                <div class="title">在制产品总数</div>
                <div class="number">100</div>
              </div>
               <div class="item">
                <div class="title">已完成数量</div>
                <div class="number">1000</div>
              </div>
               <div class="item">
                <div class="title">损坏数量</div>
                <div class="number">19</div>
              </div>
               <div class="item">
                <div class="title">生产总值</div>
                <div class="number">9988221</div>
              </div>
            </div>
          </div>
        </el-row>
        <el-row :span="24" class="bg1-2-3">
          <div class="box-contract-table">
            <div class="contract-table table">
              <el-table :data="contractList" height="100%" row-class-name="custom-ranking-table-row" style="width:100%;">
                <el-table-column prop="no" label="序号"></el-table-column>
                <el-table-column prop="contractNo" label="合同号"></el-table-column>
                <el-table-column prop="productName" label="产品名称"></el-table-column>
                <el-table-column prop="productNo" label="产品编号"></el-table-column>
                <el-table-column prop="batchNo" label="批次号"></el-table-column>
                <el-table-column prop="progress" label="生产进度" width="180">
                  <template slot-scope="scope">
                    <el-progress :percentage="100" status="success"></el-progress>
                  </template>
                </el-table-column>
                <el-table-column prop="customName" label="客户名称"></el-table-column>
                <el-table-column prop="operatorName" label="当前操作人"></el-table-column>
              </el-table>
            </div>
          </div>
        </el-row>
      </el-col>
      <el-col :span="6" class="bg1-3">
        <el-row :span="24" class="bg1-3-1">
          <div class="box-custom-ranking">
            <div class="custom-ranking">客户排名</div>
          </div>
        </el-row>
        <el-row :span="24" class="bg1-3-2">
          <div class="box-custom-ranking">
            <div class="custom-ranking">
              <div class="table">
                  <el-table :data="contractList" height="100%" row-class-name="custom-ranking-table-row" style="width:100%;">
                    <el-table-column prop="productName" label="客户名称"></el-table-column>
                    <el-table-column prop="progress" label="合同金额占比">
                      <template slot-scope="scope">
                        <el-progress :text-inside="true" :stroke-width="16" :percentage="90" status="success"></el-progress>
                      </template>
                    </el-table-column>
                    <el-table-column prop="no" label="增长率" width="80" :fixed="right"></el-table-column>
                </el-table>
              </div>
            </div>
          </div>
        </el-row>
      </el-col>
    </el-row>
    <el-row :span="24" class="sample-bg1">
      <el-col :span="6" class="bg2-1">
         <el-row :span="24" class="bg2-3-1">
          <div class="box-contract-alert">
            <div class="contract-alert">合同预警</div>
          </div>
        </el-row>
        <el-row :span="24" class="bg2-3-2">
          <div class="box-contract-alert">
            <div class="contract-alert">
              <div class="table">
                  <el-table :data="contractList" height="100%" row-class-name="custom-ranking-table-row" style="width:100%;">
                    <el-table-column prop="no" label="序号"></el-table-column>
                    <el-table-column prop="contractNo" label="合同号"></el-table-column>
                    <el-table-column prop="contractNo" label="订单号"></el-table-column>
                    <el-table-column prop="progress" label="剩余时间"></el-table-column>
                    <el-table-column prop="progress" label="交付日期"></el-table-column>
                    <el-table-column prop="customName" label="客户名称"></el-table-column>
                    <el-table-column prop="customName" label="业务员"></el-table-column>
                </el-table>
              </div>
            </div>
          </div>
        </el-row>
      </el-col>
      <el-col :span="6" class="bg2-2">
        <el-row :span="24" class="bg2-3-1">
          <div class="box-contract-alert">
            <div class="contract-alert">报损记录</div>
          </div>
        </el-row>
        <el-row :span="24" class="bg2-3-2">
          <div class="box-contract-alert">
            <div class="contract-alert">
              <div class="table">
                  <el-table :data="contractList" height="100%" row-class-name="custom-ranking-table-row" style="width:100%;">
                    <el-table-column prop="no" label="序号"></el-table-column>
                    <el-table-column prop="contractNo" label="合同号"></el-table-column>
                    <el-table-column prop="contractNo" label="订单号"></el-table-column>
                    <el-table-column prop="progress" label="剩余时间"></el-table-column>
                    <el-table-column prop="progress" label="交付日期"></el-table-column>
                    <el-table-column prop="customName" label="客户名称"></el-table-column>
                    <el-table-column prop="customName" label="业务员"></el-table-column>
                </el-table>
              </div>
            </div>
          </div>
        </el-row>
      </el-col>
      <el-col :span="6" class="bg2-1">
        <el-row :span="24" class="bg2-3-1">
          <div class="box-contract-alert">
            <div class="contract-alert">报工</div>
          </div>
        </el-row>
        <el-row :span="24" class="bg2-3-2">
          <div class="box-contract-alert">
            <div class="contract-alert">
              <div class="table">
                  <el-table :data="contractList" height="100%" row-class-name="custom-ranking-table-row" style="width:100%;">
                    <el-table-column prop="no" label="序号"></el-table-column>
                    <el-table-column prop="contractNo" label="合同号"></el-table-column>
                    <el-table-column prop="contractNo" label="订单号"></el-table-column>
                    <el-table-column prop="progress" label="剩余时间"></el-table-column>
                    <el-table-column prop="progress" label="交付日期"></el-table-column>
                    <el-table-column prop="customName" label="客户名称"></el-table-column>
                    <el-table-column prop="customName" label="业务员"></el-table-column>
                </el-table>
              </div>
            </div>
          </div>
        </el-row>
      </el-col>
      <el-col :span="6" class="bg2-2">
        <el-row :span="24" class="bg2-3-1">
          <div class="box-contract-alert">
            <div class="contract-alert">出库记录</div>
          </div>
        </el-row>
        <el-row :span="24" class="bg2-3-2">
          <div class="box-contract-alert">
            <div class="contract-alert">
              <div class="table">
                  <el-table :data="contractList" height="100%" row-class-name="custom-ranking-table-row" style="width:100%;">
                    <el-table-column prop="no" label="序号"></el-table-column>
                    <el-table-column prop="contractNo" label="合同号"></el-table-column>
                    <el-table-column prop="contractNo" label="订单号"></el-table-column>
                    <el-table-column prop="progress" label="剩余时间"></el-table-column>
                    <el-table-column prop="progress" label="交付日期"></el-table-column>
                    <el-table-column prop="customName" label="客户名称"></el-table-column>
                    <el-table-column prop="customName" label="业务员"></el-table-column>
                </el-table>
              </div>
            </div>
          </div>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
 export default {
  name: 'home',
  components: {
  },
  data () {
    return {
      contractList:[
        {no:"1",contractNo:"NKDI98SDF",productName:"课桌粉笔",productNo:"KIHDSDF",batchNo:"N23",progress:"80",customName:"中国联通",operatorName:"小王"},
        {no:"1",contractNo:"NKDI98SDF",productName:"课桌粉笔",productNo:"KIHDSDF",batchNo:"N23",progress:"80",customName:"中国联通",operatorName:"小王"},
        {no:"1",contractNo:"NKDI98SDF",productName:"课桌粉笔",productNo:"KIHDSDF",batchNo:"N23",progress:"80",customName:"中国联通",operatorName:"小王"},
        {no:"1",contractNo:"NKDI98SDF",productName:"课桌粉笔",productNo:"KIHDSDF",batchNo:"N23",progress:"80",customName:"中国联通",operatorName:"小王"},
        {no:"1",contractNo:"NKDI98SDF",productName:"课桌粉笔",productNo:"KIHDSDF",batchNo:"N23",progress:"80",customName:"中国联通",operatorName:"小王"},
        {no:"1",contractNo:"NKDI98SDF",productName:"课桌粉笔",productNo:"KIHDSDF",batchNo:"N23",progress:"80",customName:"中国联通",operatorName:"小王"},
        {no:"1",contractNo:"NKDI98SDF",productName:"课桌粉笔",productNo:"KIHDSDF",batchNo:"N23",progress:"80",customName:"中国联通",operatorName:"小王"}
      ]
    }
  },
  methods: {
    
  }
}
</script>

<style>
html,
body,
.site-wrapper,
.site-content__wrapper,
.site-content,
.el-card,
.el-card__body {
  height: 100%;
}
.mod-home {
  /* line-height: 1.5; */
  height: 100%;
}

.sample-bg {
  background-color: #021327;
  height: 60%;
}

.sample-bg1 {
  background-color: #021327;
  height: 40%;
}

.bg1-1 {
  /* background-color: yellow; */
  height: 100%;
}

.bg1-2 {
  /* background-color: orange; */
  height: 100%;
}

.bg1-3 {
  /* background-color: orchid; */
  height: 100%;
}

.bg2-1 {
  /* background-color: red; */
  height: 100%;
}

.bg2-2 {
  /* background-color: aqua; */
  height: 100%;
}

.bg1-1-1 {
  height: 25%;
  padding: 10px 10px;
  /* border: 1px solid black; */
}

.bg1-1-2 {
  height: 25%;
  padding: 10px;
  /* border: 1px solid black; */
}

.box-company-title {
  background-color: #094198;
  display: flex;
  height: 100%;
}

.company-title {
  font-size: 20px;
  color: aliceblue;
  margin: 0 auto;
  align-items: center;
  display: flex;
}

.box-custom-number {
  background-color: #D65246;
  display: flex;
  height: 100%;
}

.custom-number {
  font-size: 20px;
  color: aliceblue;
  margin: 0 auto;
  align-items: center;
  display: flex;
}

.box-contract-number {
  background-color: #11D2B7;
  display: flex;
  height: 100%;
}

.contract-number {
  font-size: 20px;
  color: aliceblue;
  margin: 0 auto;
  align-items: center;
  display: flex;
}

.box-contract-amount {
  background-color: #F6A647;
  display: flex;
  height: 100%;
}

.contract-amount {
  font-size: 20px;
  color: aliceblue;
  margin: 0 auto;
  align-items: center;
  display: flex;
}

/*中间通知区域*/

.bg1-2-1 {
  height: 15%;
  padding: 10px;
  /* border: 1px solid black; */
}

.bg1-2-2 {
  height: 25%;
  padding: 10px;
  /* border: 1px solid black; */
}

.bg1-2-3 {
  height: 60%;
  padding: 10px;
  /* border: 1px solid black; */
}

.box-notice-title {
  background-color: #2FB5F2;
  display: flex;
  height: 100%;
}

.notice-title {
  font-size: 20px;
  color: red;
  margin: 0 auto;
  align-items: center;
  display: flex;
}

.box-stat-number {
  background-color: #415065;
  display: flex;
  height: 100%;
}

.stat-number {
  font-size: 20px;
  color: aliceblue;
  margin: 0 auto;
  align-items: center;
  display: flex;
  justify-content: space-around;
  width: 100%;
}

.stat-number > .item {
  height: 80%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.stat-number > .item > .title{
  color:darkturquoise;
}

.stat-number > .item > .number {
  text-align: center;
}

/*合同列表*/
.box-contract-table {
  background-color: #415065;
  display: flex;
  height: 100%;
}

.contract-table {
  font-size: 20px;
  color: aliceblue;
  margin: 0 auto;
  align-items: center;
  display: flex;
  justify-content: space-around;
  width: 100%;
}

.bg1-3-1 {
  height: 10%;
  /* min-height: 45px; */
  padding: 10px;
  /* border: 1px solid black; */
}

.bg1-3-2 {
  height: 90%;
  padding: 10px;
  /* border: 1px solid black; */
}

/*客户排名*/
.box-custom-ranking {
  background-color: #415065;
  height: 100%;
}

.custom-ranking {
  font-size: 14px;
  color: aliceblue;
  display: flex;
  flex-direction: column;
  align-items:center;
	justify-content:center;
	text-align:justify;
  width: 100%;
  height: 100%;
}

.custom-ranking > .table {
  background-color:darkturquoise;
  height: 100%;
  width: 100%;
}

.custom-ranking-table-row {
  font-size: 8px;
}

.bg2-3-1 {
  height: 10%;
  padding: 5px 10px;
  /* border: 1px solid black; */
}

.bg2-3-2 {
  height: 90%;
  padding: 10px;
  /* border: 1px solid black; */
}


/*合同预警*/
.box-contract-alert {
  background-color: #415065;
  height: 100%;
}

.contract-alert {
  font-size: 14px;
  color: aliceblue;
  display: flex;
  flex-direction: column;
  align-items:center;
	justify-content:center;
	text-align:justify;
  width: 100%;
  height: 100%;
}

.contract-alert > .title > div {
  background-color: #415065;
  width: 100%;
  display:flex;
	align-items:center;
	justify-content:center;
	text-align:justify;
}

.contract-alert > .table {
  background-color:darkturquoise;
  height: 100%;
  width: 100%;
}

.table thead .cell {
  font-size: 12px;
  -webkit-transform: scale(0.8) !important;
}

.table tbody .cell {
  font-size: 12px;
  -webkit-transform: scale(0.8) !important;
}

/* 设置滚动条的样式 */

::-webkit-scrollbar {

width:6px;
height: 6px;
}

/* 滚动槽 */

::-webkit-scrollbar-track {

-webkit-box-shadow:inset006pxrgba(0,0,0,0.3);

border-radius:10px;

}

/* 滚动条滑块 */

::-webkit-scrollbar-thumb {

border-radius:10px;

background:rgba(0,0,0,0.1);

-webkit-box-shadow:inset006pxrgba(0,0,0,0.5);

}

::-webkit-scrollbar-thumb:window-inactive {

background:rgba(161, 156, 156, 0.2);

}
</style>