春风项目四线(合箱线、总装线)
jiang
2024-01-24 2df134deae4601dd7182c1b95a6663ce03785854
jcdm-ui/src/views/dashboard/PanelGroup.vue
@@ -1,6 +1,11 @@
<template>
  <el-row :gutter="40" class="panel-group">
    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span class="top2">单日累计产量</span>
      </div>
      <el-row :gutter="40" class="panel-group">
    <el-col  :span="4" class="card-panel-col">
      <div class="card-panel" @click="handleSetLineChartData('newVisitis')">
        <div class="card-panel-icon-wrapper icon-people">
          <svg-icon icon-class="peoples" class-name="card-panel-icon" />
@@ -9,11 +14,11 @@
          <div class="card-panel-text">
            合箱上线
          </div>
          <count-to :start-val="0" :end-val="102400" :duration="2600" class="card-panel-num" />
          <count-to :start-val="0" :end-val="10200" :duration="2600" class="card-panel-num" />
        </div>
      </div>
    </el-col>
    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
    <el-col  :span="4" class="card-panel-col">
      <div class="card-panel" @click="handleSetLineChartData('messages')">
        <div class="card-panel-icon-wrapper icon-message">
          <svg-icon icon-class="message" class-name="card-panel-icon" />
@@ -26,7 +31,7 @@
        </div>
      </div>
    </el-col>
    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
    <el-col  :span="4" class="card-panel-col">
      <div class="card-panel" @click="handleSetLineChartData('purchases')">
        <div class="card-panel-icon-wrapper icon-money">
          <svg-icon icon-class="money" class-name="card-panel-icon" />
@@ -39,7 +44,7 @@
        </div>
      </div>
    </el-col>
    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
    <el-col :span="4" class="card-panel-col">
      <div class="card-panel" @click="handleSetLineChartData('shoppings')">
        <div class="card-panel-icon-wrapper icon-shopping">
          <svg-icon icon-class="shopping" class-name="card-panel-icon" />
@@ -52,7 +57,37 @@
        </div>
      </div>
    </el-col>
  </el-row>
    <el-col  :span="4" class="card-panel-col">
      <div class="card-panel" @click="handleSetLineChartData('shoppings')">
        <div class="card-panel-icon-wrapper icon-shopping">
          <svg-icon icon-class="shopping" class-name="card-panel-icon" />
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">
            CVT上线
          </div>
          <count-to :start-val="0" :end-val="13600" :duration="3600" class="card-panel-num" />
        </div>
      </div>
    </el-col>
    <el-col  :span="4" class="card-panel-col">
      <div class="card-panel" @click="handleSetLineChartData('shoppings')">
        <div class="card-panel-icon-wrapper icon-shopping">
          <svg-icon icon-class="shopping" class-name="card-panel-icon" />
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">
            CVT下线
          </div>
          <count-to :start-val="0" :end-val="13600" :duration="3600" class="card-panel-num" />
        </div>
      </div>
    </el-col>
      </el-row>
    </el-card>
</template>
<script>
@@ -71,14 +106,31 @@
</script>
<style lang="scss" scoped>
//.bottom-card{
//  padding: 15px 20px 20px 20px;
//  height: auto;
//  width: 1272px;
//  margin-left: 20px;
//  justify-content: center;
//  column-width: max-content;
//}
.top2{
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 0px;
}
.panel-group {
  margin-top: 18px;
  width: 1442px;
  .card-panel-col {
    margin-bottom: 32px;
  }
    margin-bottom: 15px;
  }
  .card-panel {
    margin-left: -13px;
    width: 220px;
    height: 108px;
    cursor: pointer;
    font-size: 12px;
@@ -129,7 +181,7 @@
    .card-panel-icon-wrapper {
      float: left;
      margin: 14px 0 0 14px;
      margin: 14px 0 0 10px;
      padding: 16px;
      transition: all 0.38s ease-out;
      border-radius: 6px;
@@ -143,18 +195,19 @@
    .card-panel-description {
      float: right;
      font-weight: bold;
      margin: 26px;
      margin-left: 0px;
      margin: 15px 30px 0 0;
      //margin-left: 0px;
      padding: 15px 15px;
      .card-panel-text {
        line-height: 18px;
        line-height: 14px;
        color: rgba(0, 0, 0, 0.45);
        font-size: 16px;
        margin-bottom: 12px;
        font-size: 12px;
        margin-bottom: 9px;
      }
      .card-panel-num {
        font-size: 20px;
        font-size: 18px;
      }
    }
  }