supervise/supervise-report-ui/src/views/index.vue

<template>
  <div class="mains">

    <div class="index">

      <div class="title">

        <span class="title-text">数据总览</span>

        <div class="title-select">

          <el-select v-model="wareValue" placeholder="请选择仓库" style="width: 250px;margin-right: 50px;">
            <el-option v-for="item in warehouse" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>

          <el-date-picker v-model="times" @change="selectTime" type="date" placeholder="选择日期" format="yyyy-MM-dd"
            value-format="yyyy-MM-dd" style="width: 200px;">
          </el-date-picker>

        </div>

      </div>

      <div class="top">

        <div class="top-left">

          <div class="top-left-item">

            <div class="top-left-item-left">
              <img src="@/assets/loginImg/data.png" />
              <span>动产质押类项目</span>
            </div>
            <div class="top-left-item-centre">
              <span class="top-left-item-centre-span">1</span>
              <span>个</span>
            </div>
            <span class="top-left-item-right">165161655元</span>

          </div>

          <div class="top-left-item">

            <div class="top-left-item-left">
              <img src="@/assets/loginImg/file.png" />
              <span>保证类项目</span>
            </div>
            <div class="top-left-item-centre">
              <span class="top-left-item-centre-span">1</span>
              <span>个</span>
            </div>
            <span class="top-left-item-right">165161655元</span>

          </div>

          <div class="top-left-item">

            <div class="top-left-item-left">
              <img src="@/assets/loginImg/projet.png" />
              <span>应收帐款质押类项目</span>
            </div>
            <div class="top-left-item-centre">
              <span class="top-left-item-centre-span">1</span>
              <span>个</span>
            </div>
            <span class="top-left-item-right">165161655元</span>

          </div>


        </div>

        <div class="top-right">

          <div class="top-right-item">

            <span class="top-right-item-text1">账户余额</span>
            <span class="top-right-item-text2">￥155651.15</span>
            <span class="top-right-item-text3">↑ 15.66%</span>
            <span class="top-right-item-text4">↓ 12.21%</span>

          </div>
          <div class="top-right-item-view"></div>

          <div class="top-right-item">

            <span class="top-right-item-text1">应收账款</span>
            <span class="top-right-item-text2">￥155651.15</span>
            <span class="top-right-item-text3">↑ 15.66%</span>
            <span class="top-right-item-text4">↓ 12.21%</span>

          </div>
          <div class="top-right-item-view"></div>

          <div class="top-right-item">

            <span class="top-right-item-text1">库存货值</span>
            <span class="top-right-item-text2">￥155651.15</span>
            <span class="top-right-item-text3">↑ 15.66%</span>
            <span class="top-right-item-text4">↓ 12.21%</span>

          </div>
          <div class="top-right-item-view"></div>

          <div class="top-right-item">

            <span class="top-right-item-text1">在途货值</span>
            <span class="top-right-item-text2">￥155651.15</span>
            <span class="top-right-item-text3">↑ 15.66%</span>
            <span class="top-right-item-text4">↓ 12.21%</span>

          </div>
          <span class="top-right-item-view"></span>

          <div class="top-right-item">

            <span class="top-right-item-text1">预付款</span>
            <span class="top-right-item-text2">￥155651.15</span>
            <span class="top-right-item-text3">↑ 15.66%</span>
            <span class="top-right-item-text4">↓ 12.21%</span>

          </div>


        </div>

      </div>

      <div class="centre">

        <div class="centre-title">

          <img src="@/assets/loginImg/char.png" />
          <span>库存分析图</span>
          <div class="centre-title-view"></div>
        </div>

        <div id="main" style="width: 100%;height: 250px;margin-top: 20px;"></div>

      </div>


      <div class="bom">

        <el-table v-loading="tableLoading" :data="listSalesChannelData" border style="width: 100%;">
          <el-table-column width="200" label="销售渠道类别" prop="salesChannelCategory" align="center" />
          <el-table-column label="总额" prop="totalAmount" align="center" />
          <el-table-column label="应收帐款" prop="accountsReceivable" align="center" />
          <el-table-column label="扣除应收" prop="deductionAccountsReceivable" align="center" />
        </el-table>


      </div>

    </div>

  </div>
</template>

</div>
<script>
  import * as echarts from 'echarts'
  import {
    getDateRang
  } from '@/utils/index'
  export default {
    name: '',
    data() {
      return {
        times: getDateRang('yesterday'),
        wareValue: "",
        warehouse: [

          {
            label: "111111111",
            value: "项目1"
          },
          {
            label: "222222",
            value: "项目2"
          },
          {
            label: "333333",
            value: "项目3"
          }
        ],
        listSalesChannelData: [{
            salesChannelCategory: '连网连锁店',
            totalAmount: '2000000',
            accountsReceivable: '31,914',
            deductionAccountsReceivable: '35,793'
          },
          {
            salesChannelCategory: '连锁内加盟',
            totalAmount: '28,700',
            accountsReceivable: '28,749',
            deductionAccountsReceivable: '58,339'
          },
          {
            salesChannelCategory: '配送中心',
            totalAmount: '-1241.81',
            accountsReceivable: '28,749',
            deductionAccountsReceivable: '58,339'
          },
          {
            salesChannelCategory: '连锁外加盟',
            totalAmount: '29822.44',
            accountsReceivable: '28,749',
            deductionAccountsReceivable: '58,339'
          },
          {
            salesChannelCategory: '配送中心',
            totalAmount: '-1241.81',
            accountsReceivable: '28,749',
            deductionAccountsReceivable: '58,339'
          },
          {
            salesChannelCategory: '连锁外加盟',
            totalAmount: '29822.44',
            accountsReceivable: '28,749',
            deductionAccountsReceivable: '58,339'
          },
          {
            salesChannelCategory: '配送中心',
            totalAmount: '-1241.81',
            accountsReceivable: '28,749',
            deductionAccountsReceivable: '58,339'
          },
          {
            salesChannelCategory: '连锁外加盟',
            totalAmount: '29822.44',
            accountsReceivable: '28,749',
            deductionAccountsReceivable: '58,339'
          },
          {
            salesChannelCategory: '配送中心',
            totalAmount: '-1241.81',
            accountsReceivable: '28,749',
            deductionAccountsReceivable: '58,339'
          },
          {
            salesChannelCategory: '连锁外加盟',
            totalAmount: '29822.44',
            accountsReceivable: '28,749',
            deductionAccountsReceivable: '58,339'
          }
        ],

      }
    },
    mounted() {
      this.drawLine()
    },

    methods: {

      selectTime(val) {
        console.log('val:', val)

        this.times = val
      },

      // 折线图初始化
      drawLine() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        // 绘制图表
        myChart.setOption({
          title: {
            text: ''
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          toolbox: {
            show: true,
            feature: {
              mark: {
                show: true
              },
              // 数据图标
              dataView: {
                show: false,
                readOnly: false
              },
              // 刷新图标
              restore: {
                show: false
              },
              // 下载图标
              saveAsImage: {
                show: false
              }
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          yAxis: {
            type: 'value'
          },
          series: [{
              name: 'Email',
              type: 'line',
              stack: 'Total',
              data: [120, 132, 101, 134, 90, 230, 210]
            },
            {
              name: 'Union Ads',
              type: 'line',
              stack: 'Total',
              data: [220, 182, 191, 234, 290, 330, 310]
            },
            {
              name: 'Video Ads',
              type: 'line',
              stack: 'Total',
              data: [150, 232, 201, 154, 190, 330, 410]
            },
            {
              name: 'Direct',
              type: 'line',
              stack: 'Total',
              data: [320, 332, 301, 334, 390, 330, 320]
            },
            {
              name: 'Search Engine',
              type: 'line',
              stack: 'Total',
              data: [820, 932, 901, 934, 1290, 1330, 1320]
            }
          ]
        })
      },


    }
  }
</script>

<style lang="scss" scoped>
  ::v-deep .el-input__inner {
    font-size: 20px;
    font-weight: 600;
    font-family: sans-serif;
    color: #101010;
    text-align: right;
    padding-right: 40px;
  }
  .mains{
    overflow-x: hidden;
        overflow-y: auto;
        height: 100%;
  }

  .index {
    width: 100%;
    height: 100%;
    // overflow-x: hidden;
    // overflow-y: auto;
    background: #fff;
    padding-left: 50px;
    padding-right: 50px;
    padding-top: 50px;

    .title {
      display: flex;
      flex-direction: row;
      align-items: center;
      padding-bottom: 30px;
      border-bottom: #BBBBBB solid 3px;

      .title-text {
        flex: 1;
        font-size: 25px;
        color: #101010;
        font-weight: 600;
        font-family: sans-serif;
      }
    }

    .top {
      margin-top: 20px;
      display: flex;
      width: 100%;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;

      .top-left {
        width: 35%;
        display: flex;
        flex-direction: column;

        .top-left-item {
          margin-top: 10px;
          margin-bottom: 10px;
          display: flex;
          width: 100%;
          flex-direction: row;
          align-items: center;

          .top-left-item-left {
            width: 50%;
            align-items: center;
            display: flex;
            flex-direction: row;

            img {
              width: 25px;
              height: 25px;
            }

            span {
              font-size: 20px;
              font-weight: 600;
              font-family: sans-serif;
              color: #101010;
              margin-left: 20px;

            }
          }

          .top-left-item-centre {
            width: 20%;

            .top-left-item-centre-span {
              font-size: 18px;
              color: #6C6C6C;
              padding-bottom: 1px;
              margin-left: 2px;
              margin-right: 5px;
              border-bottom: 1px solid #6C6C6C;

            }

          }

          .top-left-item-right {
            width: 30%;
            font-size: 18px;
            color: #101010;
          }
        }
      }

      .top-right {
        width: 55%;
        display: flex;
        flex-direction: row;
        align-items: center;

        .top-right-item {
          flex: 1;
          margin-left: 5px;
          margin-right: 5px;
          display: flex;
          flex-direction: column;

          .top-right-item-text1 {
            font-size: 14px;
            color: #999999;
          }

          .top-right-item-text2 {
            margin-top: 15px;
            margin-bottom: 12px;
            font-size: 20px;
            color: #101010;
            font-weight: 600;
            font-family: sans-serif;
          }

          .top-right-item-text3 {
            font-size: 14px;
            color: #FF5006;
          }

          .top-right-item-text4 {
            font-size: 14px;
            color: #58A55C;
          }
        }

        .top-right-item-view {
          width: 1px;
          background: #bbb;
          height: 80px;
          margin-right: 20px;
        }
      }
    }

    .centre {
      margin-top: 24px;
      display: flex;
      width: 100%;
      flex-direction: column;

      .centre-title {
        width: 100%;
        align-items: center;
        display: flex;
        flex-direction: row;

        img {
          width: 30px;
          height: 30px;
        }

        span {
          font-size: 20px;
          font-weight: 600;
          font-family: sans-serif;
          color: #101010;
          margin-left: 10px;

        }

        .centre-title-view {
          margin-left: 10px;
          margin-top: 10px;
          flex: 1;
          height: 3px;
          background: #efefef;
        }
      }
    }

    .bom {
      margin-top: 36px;
      padding-bottom: 50px;
    }
  }
</style>