hitch-sb-antd/src/views/workplace/backlog/SpareWorkplaceBacklog.vue

<template>
  <a-row :gutter="[20,30]">
    <a-col :span="14">
      <a-card title="总览">
        <a-row type="flex" justify="space-between" align="middle">
          <a-col :span="4">
            <div class="top-left">
              <div>
                <img src="@/assets/spare/1.png" width="63px" alt="">
              </div>
              <div>
                <div>备件总数</div>
                <div>
                  <span>5</span>个
                </div>
              </div>
              <div class="top-left-bg" style="background:#F5F7FA"></div>
            </div>
          </a-col>
          <a-col :span="4">
            <div class="top-left">
              <div>
                <img src="@/assets/spare/2.png" width="63px" alt="">
              </div>
              <div>
                <div>备件类别</div>
                <div>
                  <span>11</span>种
                </div>
              </div>
              <div class="top-left-bg" style="background:#F0F8FE"></div>
            </div>
          </a-col>
          <a-col :span="4">
            <div class="top-left">
              <div>
                <img src="@/assets/spare/3.png" width="63px" alt="">
              </div>
              <div>
                <div>重要备件</div>
                <div>
                  <span>5</span>个
                </div>
              </div>
              <div class="top-left-bg" style="background:#FBF4E7"></div>
            </div>
          </a-col>
          <a-col :span="4">
            <div class="top-left">
              <div>
                <img src="@/assets/spare/4.png" width="63px" alt="">
              </div>
              <div>
                <div>专用备件</div>
                <div>
                  <span>12</span>个
                </div>
              </div>
              <div class="top-left-bg" style="background:#FBE7E3"></div>
            </div>
          </a-col>
          <a-col :span="4">
            <div class="top-left">
              <div>
                <img src="@/assets/spare/5.png" width="63px" alt="">
              </div>
              <div>
                <div>总库存</div>
                <div>
                  <span>5</span>个
                </div>
              </div>
              <div class="top-left-bg" style="background:#EBFEF1"></div>
            </div>
          </a-col>
        </a-row>
      </a-card>
    </a-col>
    <a-col :span="5">
      <a-card title="仓库地图">
        <div class="top-left hover" @click="$router.push('/sb/position/img')">
          <img src="@/assets/bgView/zidi.png" width="100%" height="100%" alt="">
        </div>
      </a-card>
    </a-col>
    <a-col :span="5">
      <a-card title="备件地图">
        <div class="top-left hover" @click="$router.push('/spare/view/map')">
          <img src="@/assets/bgView/xiandi.png" width="100%" height="100%" alt="">
        </div>
      </a-card>
    </a-col>
    <a-col :span="24">
      <a-card title="预警列表">
        <a-row :gutter="50">
          <a-col :span="5">
            <div class="middle-box">
              <div>更换预警</div>
              <span>126</span>
            </div>
          </a-col>
          <a-col :span="5">
            <div class="middle-box" style="border-color:#F59B00">
              <div>编号重复预警</div>
              <span>126</span>
            </div>
          </a-col>
          <a-col :span="5">
            <div class="middle-box" style="border-color:#F26264">
              <div>变更预警</div>
              <span>126</span>
            </div>
          </a-col>
          <a-col :span="5">
            <div class="middle-box" style="border-color:#73C747">
              <div>库存下限预警</div>
              <span>126</span>
            </div>
          </a-col>
        </a-row>
      </a-card>
    </a-col>
    <a-col :span="24">
      <a-card title="备件类型分布">
        <div slot="extra">
          <a-radio-group default-value="a" button-style="solid">
            <a-radio-button value="a">
              全部
            </a-radio-button>
            <a-radio-button value="b">
              再用
            </a-radio-button>
            <a-radio-button value="c">
              闲置
            </a-radio-button>
          </a-radio-group>
        </div>
        <chart-view height="360px" :chartOption="chartOption" />
      </a-card>
    </a-col>
  </a-row>
</template>

<script>
import * as echarts from 'echarts/core'
export default {
  data () {
    return {
      lineData: []
    }
  },
  computed: {
    chartOption () {
      return {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        yAxis: {
          name: '',
          nameTextStyle: {
            color: 'rgba(0,0,0,0.5)'
          },
          type: 'value',
          min: 0,
          axisLine: {
            show: false
          },
          axisLabel: {
            color: '#979797',
            fontSize: 12
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed'
              // color: '#2b2b2b'
            }
          },
          axisTick: {
            show: false
          }
        },
        xAxis: {
          type: 'category',
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
        },
        series: [
          {
            name: '备件总数',
            type: 'bar',
            barWidth: 20,
            data: [10, 52, 200, 334, 390, 330, 220, 150, 82, 91, 34, 290],
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#52C5FF' },
                { offset: 1, color: '#228FFE' }
              ])
            }
          },
          {
            name: '借出数量',
            barWidth: 20,
            type: 'bar',
            data: [10, 52, 200, 334, 390, 330, 220, 150, 82, 91, 34, 290],
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#FF5252' },
                { offset: 1, color: '#FE2222' }
              ])
            }

          }
        ]
      }
    }
  }
}
</script>

<style lang="less" scoped>
.top-left {
  display: flex;
  font-family: PingFang SC;
  width: 100%;
  text-align: center;
  justify-content: space-around;
  font-size: 18px;
  color: #666666;
  position: relative;
  height: 110px;
  & > div {
    z-index: 1;
  }
  span {
    font-size: 30px;
    font-weight: 500;
    color: #333333;
  }
  .top-left-bg {
    width: 100%;
    height: 80px;
    opacity: 0.74;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 0;
  }
}
.middle-box {
  height: 129px;
  width: 100%;
  background: #f4f6f9;
  border-radius: 10px;
  border-left: 6px solid #002c81;
  padding: 20px 25px;
  font-size: 24px;
  font-family: PingFang SC;
  color: #999999;
  span {
    font-size: 36px;
    line-height: 60px;
    color: #333333;
  }
}
.hover{
  cursor: pointer;
}
</style>