<template>
  <div class="home_div">
    <div class="home_title">
      <div class="home_title_search">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-sousuo"></use>
        </svg>
        搜索
      </div>
      <div class="home_title_setting">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-shezhi"></use>
        </svg>
      </div>
    </div>
    <div class="home_maininfo">


      <div class="home_icon_area">

        <div class="home_icon_area_mx" @click="gotosaletask">
          <svg class="icon home_icon_area_use" aria-hidden="true">
            <use xlink:href="#icon-xiaoshoudingdan"></use>
          </svg>
          <div class="home_icon_text">销售订单</div>
        </div>

        <div class="home_icon_area_mx">
          <svg class="icon home_icon_area_use" aria-hidden="true">
            <use xlink:href="#icon-shangpin"></use>
          </svg>
          <div class="home_icon_text">采购订单</div>
        </div>


        <div class="home_icon_area_mx">
          <svg class="icon home_icon_area_use" aria-hidden="true">
            <use xlink:href="#icon-kucun"></use>
          </svg>
          <div class="home_icon_text">库存查询</div>
        </div>

        <div class="home_icon_area_mx">
          <svg class="icon home_icon_area_use" aria-hidden="true">
            <use xlink:href="#icon-yingyongguanli"></use>
          </svg>
          <div class="home_icon_text">更多</div>
        </div>

      </div>

      <div class="home_msg">
        <div>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-xiaoxi"></use>
          </svg>
          2月25日公司经营日报已出炉，欢迎查看！</div>
      </div>

      <!-- <div class="home_func_msg">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-xiaoxi"></use>
        </svg>
        更多功能整装待发，敬请期待！
      </div> -->

      <div class="home_widget_area">

        <!-- <div class="home_widget_mx">
          <div class="home_widget_mx_title">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-shujukanban"></use>
            </svg>
            产销情况
          </div>
          <div class="home_widget_mx_content">
            <img src="../assets/chanxiaotu.jpg" class="img-chanxiao"></img>
            <div style="font-size: 14px;text-align: center;color: #666;">此处只作展示用，不代表折线图控件最终效果</div>
          </div>
        </div> -->

        <div class="home_widget_mx">
          <div class="home_widget_mx_title">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-icon-test"></use>
            </svg>
            订单情况
          </div>

          <div class="home_widget_mx_content">

            <div class="home_widget_cw_flex">

              <div class="home_widget_cw_left">
                <div class="home_widget_cw_left_title">未发货订单金额(万元)</div>
                <div class="home_widget_cw_left_content">689.34</div>
              </div>

              <div class="home_widget_cw_right">
                <div class="home_widget_cw_left_title">本月接单(万元)</div>
                <div class="home_widget_cw_left_content">200.54</div>
              </div>

            </div>

            <div class="home_widget_cw_flex">
              <div class="home_widget_cw_left">
                <div class="home_widget_cw_left_title">其中已入库金额(万元)</div>
                <div class="home_widget_cw_left_content">689.34</div>
              </div>

              <div class="home_widget_cw_right">
                <div class="home_widget_cw_left_title">本月发货(万元)</div>
                <div class="home_widget_cw_left_content">180.54</div>
              </div>
            </div>
          </div>
        </div>

        <div class="home_widget_mx">

          <div class="home_widget_mx_title">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-caiwuguanli"></use>
            </svg>
            财务状况
          </div>

          <div class="home_widget_mx_content">



            <div class="home_widget_cw_flex bottomline">

              <div class="home_widget_cw_left">
                <div class="home_widget_cw_left_title">成品库存总额(万元)</div>
                <div class="home_widget_cw_left_content">360.88</div>
              </div>
              <div class="home_widget_cw_right">
                <div class="home_widget_cw_right_title">本月入库<span class="home_widget_cw_right_content">333.54</span>(万元)
                </div>
                <div class="home_widget_cw_right_title">本月出库<span class="home_widget_cw_right_content">268.54</span>(万元)
                </div>
              </div>

            </div>

            <!-- <div class="home_widget_cw_flex bottomline">

              <div class="home_widget_cw_left">
                <div class="home_widget_cw_left_title">车间在途总额(万元)</div>
                <div class="home_widget_cw_left_content">222.88</div>
              </div>
              <div class="home_widget_cw_right">
                <div class="home_widget_cw_right_title">本月入库<span class="home_widget_cw_right_content">231.54</span>(万元)</div>
                <div class="home_widget_cw_right_title">本月出库<span class="home_widget_cw_right_content">112.54</span>(万元)</div>
              </div>

            </div> -->

            <div class="home_widget_cw_flex bottomline">

              <div class="home_widget_cw_left">
                <div class="home_widget_cw_left_title">材料库存总额(万元)</div>
                <div class="home_widget_cw_left_content">444.88</div>
              </div>
              <div class="home_widget_cw_right">
                <div class="home_widget_cw_right_title">本月入库<span class="home_widget_cw_right_content">333.54</span>(万元)
                </div>
                <div class="home_widget_cw_right_title">本月出库<span class="home_widget_cw_right_content">321.54</span>(万元)
                </div>
              </div>

            </div>

            <div class="home_widget_cw_flex bottomline">

              <div class="home_widget_cw_left">
                <div class="home_widget_cw_left_title">现金结余(万元)</div>
                <div class="home_widget_cw_left_content">888.88</div>
              </div>
              <div class="home_widget_cw_right">
                <div class="home_widget_cw_right_title">本月收入<span class="home_widget_cw_right_content">777.54</span>(万元)
                </div>
                <div class="home_widget_cw_right_title">本月支出<span class="home_widget_cw_right_content">666.54</span>(万元)
                </div>
              </div>

            </div>

            <div class="home_widget_cw_flex bottomline">

              <div class="home_widget_cw_left">
                <div class="home_widget_cw_left_title">应收结余(万元)</div>
                <div class="home_widget_cw_left_content">555.88</div>
              </div>
              <div class="home_widget_cw_right">
                <div class="home_widget_cw_right_title">本月已收<span class="home_widget_cw_right_content">666.54</span>(万元)
                </div>
                <div class="home_widget_cw_right_title">本月应收<span class="home_widget_cw_right_content">444.54</span>(万元)
                </div>
              </div>

            </div>


            <div class="home_widget_cw_flex">

              <div class="home_widget_cw_left">
                <div class="home_widget_cw_left_title">应付结余(万元)</div>
                <div class="home_widget_cw_left_content">456.88</div>
              </div>
              <div class="home_widget_cw_right">
                <div class="home_widget_cw_right_title">本月已付<span class="home_widget_cw_right_content">543.54</span>(万元)
                </div>
                <div class="home_widget_cw_right_title">本月应付<span class="home_widget_cw_right_content">234.54</span>(万元)
                </div>
              </div>

            </div>

          </div>
        </div>

        <div class="home_widget_mx">
          <div class="home_widget_mx_title">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-tubiao-zhuzhuangtu"></use>
            </svg>
            库存状况
          </div>
          <div class="home_widget_mx_content">
            <img src="../assets/zhutu.jpg" class="img-chanxiao"></img>
            <div style="font-size: 14px;text-align: center;color: #666;">此处只作展示用，不代表柱状图控件最终效果</div>
          </div>
        </div>

        <div class="home_reload">重新载入数据</div>
      </div>



    </div>


  </div>
</template>

<script>
  export default {
    name: 'home',
    methods: {
      gotosaletask() {
        this.$router.push({
          path: "/saletask"
        });
      }
    }

  }

</script>

<style>
  body {
    margin: 0;
    padding: 0;
    background-color: rgb(242, 242, 242);
    font-family: "微软雅黑";
  }

  .home_div {
    background-color: rgb(242, 242, 242);
  }

  .home_reload {
    font-size: 16px;
    color: #aaa;
    padding: 10px;
    background-color: white;
    margin: 8px 10px 15px 10px;
    box-shadow: 1px 2px 10px #ccc;
    border-radius: 10px;
    overflow: hidden;
    text-align: center;
  }

  .home_title {
    width: 100%;
    display: flex;
    align-items: center;
    background-color: rgb(34, 131, 210);
    /* position: fixed; */
    color: white;
  }

  .home_title_search {
    background-color: rgb(30, 115, 187);
    margin: 10px;
    padding: 5px 5px 5px 20px;
    /* font-size: 14px;
    line-height: 20px; */
    flex: 0 0 78%;
    border-radius: 15px;
  }

  .home_title_setting {
    font-size: 20px;
    position: absolute;
    right: 4%;
  }

  .home_msg {
    padding: 10px 20px;
    background-color: white;
    font-size: 15px;
    color: #666;
    box-shadow: 1px 1px 6px #ccc;
  }

  .home_icon_area {
    padding: 5px 10px 10px;
    display: flex;
    background-color: rgb(34, 131, 210);
  }

  .home_icon_area_mx {
    text-align: center;
    /* margin-right: 0px; */
    flex: 0 0 25%;
  }

  .home_icon_area_use {
    font-size: 35px;
    color: white;
  }

  .home_icon_text {
    color: white;
    font-size: 15px;
  }

  .home_widget_mx {
    /* height: 420px; */
    background-color: white;
    margin: 8px 10px 15px 10px;
    box-shadow: 1px 2px 10px #ccc;
    border-radius: 10px;
    overflow: hidden;
    padding-bottom: 10px;
  }

  .home_widget_mx_title {
    background-color: rgb(245, 245, 245);
    font-size: 17px;
    font-weight: bold;
    color: rgb(139, 139, 139);
    padding: 8px 20px;

  }

  .img-chanxiao {
    width: 100%
  }

  .bottomline {
    border-bottom: 1px solid #eee;
  }



  .home_widget_cw_flex {
    display: flex;
    align-items: center;
    margin-bottom: 2px;
    /* border-bottom: 1px solid #eee; */
  }

  .home_widget_cw_left {
    margin-left: 20px;
    margin-top: 5px;
    flex: 0 0 45%;
    /* border-right: 1px solid #eee; */
  }

  .home_widget_cw_left_title {
    font-size: 13px;
    /* color: #888; */
    color: rgb(153, 153, 153);
  }

  .home_widget_cw_left_content {
    font-size: 25px;
    font-weight: bold;
    /* color: rgb(228, 35, 35); */
    color: rgb(255, 128, 26);
  }

  .home_widget_cw_right {
    margin-left: 10px;
    margin-top: 5px;
  }

  .home_widget_cw_right_title {
    font-size: 13px;
    line-height: 25px;
    color: rgb(153, 153, 153);
  }

  .home_widget_cw_right_content {
    margin-left: 5px;
    color: #555;
    font-weight: bold;
  }

  .home_func_msg {
    background-color: #feffda;
    font-size: 15px;
    color: #666;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #eee;
  }

</style>
