lemonBeans_ui/src/views/index.vue

<template>
  <div class="app-container home">
    <ul class="block">
      <li>
        <div>
          <i class="el-icon-download" style="font-size: 50px;text-align: center"></i>
          <p>入库</p>
        </div>
      </li>
      <li>
        <div>
          <i class="el-icon-upload2" style="font-size: 50px;text-align: center"></i>
          <p>出库</p>
        </div>
      </li>
      <li>
        <div>
          <i class="el-icon-s-custom" style="font-size: 50px;text-align: center"></i>
          <p>新增用户</p>
        </div>
      </li>
      <li>
        <div>
          <i class="el-icon-s-cooperation" style="font-size: 50px;text-align: center"></i>
          <p>新增商品</p>
        </div>
      </li>
      <li>
        <div>
          <i class="el-icon-connection" style="font-size: 50px;text-align: center"></i>
          <p>调拨</p>
        </div>
      </li>
      <li>
        <div>
          <i class="el-icon-wallet" style="font-size: 50px;text-align: center"></i>
          <p>收款</p>
        </div>
      </li>
      <li>
        <div>
          <i class="el-icon-money" style="font-size: 50px;text-align: center"></i>
          <p>付款</p>
        </div>
      </li>
      <li>
        <div>
          <i class="el-icon-s-management" style="font-size: 50px;text-align: center"></i>
          <p>对账</p>
        </div>
      </li>
      <li>
        <div>
          <i class="el-icon-takeaway-box" style="font-size: 50px;text-align: center"></i>
          <p>货转</p>
        </div>
      </li>
      <li>
        <div>
          <i class="el-icon-s-order" 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" :header-cell-style="{borderBottom:'1px dashed #dfe6ec'}" :cell-style="cellStyle" 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" :header-cell-style="{borderBottom:'1px dashed #dfe6ec'}" :cell-style="cellStyle" 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 style="width: 100%;float: left;margin-top:20px;">
      <div style="display: flex;">
        <div id="box_s" style="width:100%;height:350px;"></div>
        <div id="box_ss" style="width:100%;height:350px;"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { listCorps , listCorps_s,listCorps_ss} from "../../src/api/index";
export default {
  name: "index",
  data() {
    return {
      // 版本号
      version: "3.2.1",
      tableData: [{
        date: '2020-11-20 12:00',
        name: '<p>某客户账单审核</p>',
        address: '查看详情'
      }, {
        date: '2020-11-20 12:00',
        name: '某客户账单审核',
        address: '查看详情'
      }, {
        date: '2020-11-20 12:00',
        name: '仓储费审核结算审核',
        address: '查看详情'
      }]
    };
  },
  mounted() {
    this.drawLine();
    this.drawLine_s();
    this.drawLine_ss();
  },
  created(){
    this.getList();
    this.getLabel_s();
    this.getLabel_ss();
  },
  methods: {
    //设置单元格边框
    cellStyle({row, column, rowIndex, columnIndex}) {
      return 'border-bottom: 1px dashed rgb(223, 230, 236)'
    },
    //查询消息中心
    getList() {
      this.loading = true;
      listCorps(this.queryParams).then(response => {
        console.log(response.rows);
      });
    },
    // 仓库图表
    getLabel_s(){
      listCorps_s(this.queryParse).then(response =>{
        console.log(response.rows);
      })
    },
    // 商品图表
    getLabel_ss(){
      listCorps_ss(0).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: 200, name: '1号仓库'},
              {value: 500, name: '剩余库容'},
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      });
    },
    drawLine_s() {
      // 基于准备好的dom，初始化echarts实例，所以只能在mounted中调用
      let myChart = this.$echarts.init(document.getElementById('box_s'))
      // 绘制图表
      myChart.setOption({
        backgroundColor: '#fff',

        title: {
          text: '货主库存占比统计',
          left: 'center',
          top: 20,
          textStyle: {
            color: '#333333'
          }
        },

        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },

        visualMap: {
          show: false,
          min: 80,
          max: 600,
          inRange: {
            colorLightness: [0, 1]
          }
        },
        series: [
          {
            name: '虚构数据',
            type: 'pie',
            radius: '80%',
            center: ['50%', '60%'],
            data: [
              {value: 335, name: '货主1'},
              {value: 310, name: '货主2'},
              {value: 274, name: '货主3'},
              {value: 235, name: '货主4'},
              {value: 400, name: '货主5'}
            ].sort(function (a, b) { return a.value - b.value; }),
            roseType: 'radius',
            label: {
              // color: 'rgba(0, 0, 0, 1)'
            },
            labelLine: {
              lineStyle: {
                // color: 'rgba(51, 51, 51, 1)'
              },
              smooth: 0.2,
              length: 10,
              length2: 20
            },
            itemStyle: {
              // color: '#000',
              // shadowBlur: 200,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            },

            animationType: 'scale',
            animationEasing: 'elasticOut',
            animationDelay: function (idx) {
              return Math.random() * 200;
            }
          }
        ]
      });
    },
    drawLine_ss() {
      // 基于准备好的dom，初始化echarts实例，所以只能在mounted中调用
      let myChart = this.$echarts.init(document.getElementById('box_ss'))
      // 绘制图表
      myChart.setOption({
        title: {
          text: '本仓库商品统计',
          subtext: '虚构数据',
          left: 'center'
        },
        color: ['#3398DB'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['棉花', '淀粉', '木薯', '冰糖', '麻花', '海盐', '胡椒粉'],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '实时状态',
            type: 'bar',
            barWidth: '60%',
            data: [10, 52, 200, 334, 390, 330, 220]
          }
        ]
      });
    }
  },
};
</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;
    border-radius: 10px;
    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>