<template>
  <div class="app-container home">
    <div style="width: 100%;margin-bottom: 50px">
      <el-table :data="tableData" style="width: 50%;float: left">
        <el-table-column prop="name" label="待办列表" width="250"></el-table-column>
        <el-table-column prop="date" label="时间" width="250"></el-table-column>
        <el-table-column prop="address" label="操作"></el-table-column>
      </el-table>
      <el-table :data="tableData" style="width: 25%;float: left;margin-left: 20px;margin-right: 20px">
        <el-table-column prop="name" label="提醒列表" width="220" />
        <el-table-column prop="address" label="操作" />
      </el-table>
      <el-table :data="tableData" style="width: 15%;">
        <el-table-column prop="name" label="新闻公告" />
      </el-table>
    </div>
    <div style="display: flex;margin-top: -30px">
      <div id="box" style="width:30%;height:350px;"></div>
      <div id="bug" style="width:35%;height:350px;"></div>
      <div id="temp" style="width:30%;height:350px;"></div>
    </div>
  </div>
</template>

<script>
  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();
      this.bug_ss();
      this.temp();
    },
    methods: {
      goTarget(href) {
        window.open(href, "_blank");
      },
      drawLine() {
        // 基于准备好的dom，初始化echarts实例，所以只能在mounted中调用
        let myChart = this.$echarts.init(document.getElementById('box'))
        // 绘制图表
        myChart.setOption({
          tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          radar: {
            float:'left',
            radius: '66%',
            center: ['50%', '42%'],
            splitNumber: 8,
            splitArea: {
              areaStyle: {
                color: 'rgba(127,95,132,.3)',
                opacity: 1,
                shadowBlur: 45,
                shadowColor: 'rgba(0,0,0,.5)',
                shadowOffsetX: 0,
                shadowOffsetY: 15
              }
            },
            indicator: [
              { name: '对比', max: 10000 },
              { name: '对比', max: 20000 },
              { name: '对比', max: 20000 },
              { name: '对比', max: 20000 },
              { name: '对比', max: 20000 },
              { name: '对比', max: 20000 }
            ]
          },
          legend: {
            left: 'center',
            bottom: '10',
            data: ['某商品1', '某商品2', '某商品3']
          },
          series: [{
            type: 'radar',
            symbolSize: 0,
            areaStyle: {
              normal: {
                shadowBlur: 13,
                shadowColor: 'rgba(0,0,0,.2)',
                shadowOffsetX: 0,
                shadowOffsetY: 10,
                opacity: 1
              }
            },
            data: [
              {
                value: [5000, 7000, 12000, 11000, 15000, 14000],
                name: '某商品1'
              },
              {
                value: [4000, 9000, 15000, 15000, 13000, 11000],
                name: '某商品2'
              },
              {
                value: [5500, 11000, 12000, 15000, 12000, 12000],
                name: '某商品3'
              }
            ]
          }]
        });
      },
      bug_ss() {
        // 基于准备好的dom，初始化echarts实例，所以只能在mounted中调用
        let myChart_s = this.$echarts.init(document.getElementById('bug'));

        // 指定图表的配置项和数据
        myChart_s.setOption({
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
            left: 'center',
            bottom: '10',
            data: ['库存1', '库存2', '库存3', '库存4', '库存5']
          },
          series: [
            {
              name: 'WEEKLY WRITE ARTICLES',
              type: 'pie',
              roseType: 'radius',
              radius: [15, 95],
              center: ['50%', '38%'],
              data: [
                { value: 320, name: '库存1' },
                { value: 240, name: '库存2' },
                { value: 149, name: '库存3' },
                { value: 100, name: '库存4' },
                { value: 59, name: '库存5' }
              ],
              animationEasing: 'cubicInOut',
              animationDuration: 2600
            }
          ]
        })
      },
      temp() {
        // 基于准备好的dom，初始化echarts实例，所以只能在mounted中调用
        let myChart_s = this.$echarts.init(document.getElementById('temp'));

        // 指定图表的配置项和数据
        myChart_s.setOption({
          xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(220, 220, 220, 0.8)'
            }
          }]
        })
      }
    },
  };
</script>

<style scoped lang="scss">
  .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>

