lemonBeans_ui/src/views/index.vue

<template>
  <div class="app-container home">
    <ul class="block">
      <li>
        <div>
          <i class="el-icon-success" style="font-size: 50px;text-align: center"></i>
          <p>入库</p>
        </div>
      </li>
      <li>
        <div>
          <i class="el-icon-success" style="font-size: 50px;text-align: center"></i>
          <p>出库</p>
        </div>
      </li>
      <li>
        <div>
          <i class="el-icon-success" style="font-size: 50px;text-align: center"></i>
          <p>新增用户</p>
        </div>
      </li>
      <li>
        <div>
          <i class="el-icon-success" style="font-size: 50px;text-align: center"></i>
          <p>新增商品</p>
        </div>
      </li>
      <li>
        <div>
          <i class="el-icon-success" style="font-size: 50px;text-align: center"></i>
          <p>调拨</p>
        </div>
      </li>
      <li>
        <div>
          <i class="el-icon-success" style="font-size: 50px;text-align: center"></i>
          <p>收款</p>
        </div>
      </li>
      <li>
        <div>
          <i class="el-icon-success" style="font-size: 50px;text-align: center"></i>
          <p>付款</p>
        </div>
      </li>
      <li>
        <div>
          <i class="el-icon-success" style="font-size: 50px;text-align: center"></i>
          <p>对账</p>
        </div>
      </li>
      <li>
        <div>
          <i class="el-icon-success" style="font-size: 50px;text-align: center"></i>
          <p>货转</p>
        </div>
      </li>
      <li>
        <div>
          <i class="el-icon-success" style="font-size: 50px;text-align: center"></i>
          <p>协议</p>
        </div>
      </li>
    </ul>
    <div style="width: 30%;float: right">
      <div style="display: flex;">
        <div id="box" style="width:100%;height:350px;"></div>
      </div>
    </div>
    <div style="width: 100%;margin-bottom: 50px">
      <el-table :data="tableData" style="width: 65%;float: left;">
        <el-table-column prop="name" label="待办事宜" width="360"></el-table-column>
        <el-table-column prop="date" label="时间" width="300"></el-table-column>
        <el-table-column prop="address" label="操作"></el-table-column>
      </el-table>
      <el-table :data="tableData" style="width: 30%;float: left;margin-left: 20px;margin-right: 20px;">
        <el-table-column prop="name" label="消息中心" width="220"/>
        <el-table-column prop="address" label="操作"/>
      </el-table>
    </div>
  </div>
</template>

<script>
import { listCorps } from "../../src/api/index";
export default {
  name: "index",
  data() {
    return {
      // 版本号
      version: "3.2.1",
      tableData: [{
        date: '2020-11-20 12:00',
        name: '某客户出库单审核',
        address: '查看详情'
      }, {
        date: '2020-11-20 12:00',
        name: '某客户账单审核',
        address: '查看详情'
      }, {
        date: '2020-11-20 12:00',
        name: '仓储费审核结算审核',
        address: '查看详情'
      }, {
        date: '2020-11-20 12:00',
        name: '某客户出库单审核',
        address: '查看详情'
      }, {
        date: '2020-11-20 12:00',
        name: '仓储费审核结算审核',
        address: '查看详情'
      }, {
        date: '2020-11-20 12:00',
        name: '仓储费审核结算审核',
        address: '查看详情'
      }]
    };
  },
  mounted() {
    this.drawLine();
  },
  created(){
    this.getList();
  },
  methods: {
    getList() {
      this.loading = true;
      listCorps(this.queryParams).then(response => {
        console.log(response);
      });
    },
    goTarget(href) {
      window.open(href, "_blank");
    },
    drawLine() {
      // 基于准备好的dom，初始化echarts实例，所以只能在mounted中调用
      let myChart = this.$echarts.init(document.getElementById('box'))
      // 绘制图表
      myChart.setOption({
        title: {
          text: '某某库存统计',
          subtext: '虚构数据',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          // orient: 'vertical',
          // top: 'middle',
          bottom: 10,
          left: 'center',
          data: ['西凉', '益州', '兖州', '荆州']
        },
        series: [
          {
            type: 'pie',
            radius: '65%',
            center: ['50%', '50%'],
            selectedMode: 'single',
            data: [
              {
                label: {
                  backgroundColor: '#eee',
                  borderColor: '#777',
                  borderWidth: 1,
                  borderRadius: 4,
                  rich: {
                    title: {
                      color: '#eee',
                      align: 'center'
                    },
                    abg: {
                      backgroundColor: '#333',
                      width: '100%',
                      align: 'right',
                      height: 25,
                      borderRadius: [4, 4, 0, 0]
                    },
                    Sunny: {
                      height: 30,
                      align: 'left'
                    },
                    Cloudy: {
                      height: 30,
                      align: 'left'
                    },
                    Showers: {
                      height: 30,
                      align: 'left'
                    },
                    weatherHead: {
                      color: '#333',
                      height: 24,
                      align: 'left'
                    },
                    hr: {
                      borderColor: '#777',
                      width: '100%',
                      borderWidth: 0.5,
                      height: 0
                    },
                    value: {
                      width: 20,
                      padding: [0, 20, 0, 30],
                      align: 'left'
                    },
                    valueHead: {
                      color: '#333',
                      width: 20,
                      padding: [0, 20, 0, 30],
                      align: 'center'
                    },
                    rate: {
                      width: 40,
                      align: 'right',
                      padding: [0, 10, 0, 0]
                    },
                    rateHead: {
                      color: '#333',
                      width: 40,
                      align: 'center',
                      padding: [0, 10, 0, 0]
                    }
                  }
                }
              },
              {value: 535, name: '荆州'},
              {value: 510, name: '兖州'},
              {value: 634, name: '益州'},
              {value: 735, name: '西凉'}
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      });
    }
  },
};
</script>

<style scoped lang="scss">
.block{
  width: 70%;
  float: left;
  display: flex;
  flex-wrap: wrap;
  height: 350px;
  li{
    width: 18%;
    height: 150px;
    background-color: #1c84c6;
    margin-left: 10px;
    text-align: center;
    color: #FFFFFF;
    div{
      margin-top: 40px;
      p{
        font-size: 20px;
      }
    }
  }
}
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }

  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }

  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}
</style>