<template>
  <div class="page">
    <div class="head">
      <div class="head_content">
        <span class="text_date">2023-08-01</span>
        <span class="text_time">17:18:29</span>
        <span class="text_week">星期三</span>
        <span class="text_title">联达供应链数据大屏</span>
        <span class="text_car">刷新时间：10s</span>
      </div>
    </div>
    <div class="middle">
      <title-content-with-bord class="trade_left">
        <template  v-slot:title>营业情况</template >
        <template  v-slot:content>
          <contrast-card v-for="data in mockData.yyqk" :title="data.title"
                         :lt="data.amount"
                         :lb="data.unit"
                         :rtl="data.title1"
                         :rtm="data.amount1"
                         :rtr="data.rate1"
                         :rbl="data.title2"
                         :rbm="data.amount2"
                         :rbr="data.rate2"/>
        </template >
      </title-content-with-bord>
      <container-with-bord class="trade_middle">
        <card style="margin-top: 10px; width: 80%; height: 20%; position: relative;">
          <template>
            <title-content v-for="data in mockData.sr" style="width: 33.3%; text-align: center; float:left;">
              <template v-slot:title>
                {{ data.title }}
              </template>
              <template v-slot:content>
                <num-with-r-b-mark>
                  <template v-slot:num>{{ data.value }}</template>
                  <template v-slot:unit>万元</template>
                </num-with-r-b-mark>
              </template>
            </title-content>
          </template>
        </card>
        <div id="main_bar_chart" style="width: 897px; margin: auto; height: 350px;"/>
      </container-with-bord>
      <title-content-with-bord class="trade_right">
        <template  v-slot:title>账款情况</template >
        <template  v-slot:content>
          <contrast-card v-for="data in mockData.zkqk" :title="data.title"
                         :lt="data.amount"
                         :lb="data.unit"
                         :rtl="data.title1"
                         :rtm="data.amount1"
                         :rtr="data.rate1"
                         :rbl="data.title2"
                         :rbm="data.amount2"
                         :rbr="data.rate2"/>
        </template >
      </title-content-with-bord>
    </div>
    <div class="middle">
      <div class="content trade_left" style="cursor: pointer;">
        <!--左上边框-->
        <div class="t_line_box">
          <i class="t_l_line"></i>
          <i class="l_t_line"></i>
        </div>
        <!--右上边框-->
        <div class="t_line_box">
          <i class="t_r_line"></i>
          <i class="r_t_line"></i>
        </div>
        <!--左下边框-->
        <div class="t_line_box">
          <i class="l_b_line"></i>
          <i class="b_l_line"></i>
        </div>
        <!--右下边框-->
        <div class="t_line_box">
          <i class="r_b_line"></i>
          <i class="b_r_line"></i>
        </div>
        <div class="main_title">
          <img src="img/t_1.png" alt="">
          湖南省货运收入
        </div>
        <div id="chart_1" class="chart" style="width:100%;height: 280px;"></div>
      </div>
      <div class="trade_middle" style="border: none;box-shadow: none;">
        <container-with-bord style="height: calc(50% - 6px); width: 100%; margin-bottom: 12px;"></container-with-bord>
        <container-with-bord style="height: calc(50% - 6px); width: 100%;">
          <div style="width: 100%; height: 50%;">
            <card style="width: 32%; margin: 5px calc(4%/6); height: calc(100% - 10px); position: relative; float: left">
              <title-content style="text-align: center; float:left; width: 100%;">
                <template v-slot:title>
                  当日订单
                </template>
                <template v-slot:content>
                  <num-with-r-b-mark style="width: 48%; float: left; line-height: 64px;">
                    <template v-slot:num>2,000</template>
                    <template v-slot:unit>万吨</template>
                  </num-with-r-b-mark>
                  <num-with-r-b-mark style="width: 48%; float: left; line-height: 64px;">
                    <template v-slot:num>20,000</template>
                    <template v-slot:unit>万元</template>
                  </num-with-r-b-mark>
                </template>
              </title-content>
            </card>
            <card style="width: 32%; margin: 5px calc(4%/6); height: calc(100% - 10px); position: relative; float: left">
              <title-content style="text-align: center; float:left; width: 100%;">
                <template v-slot:title>
                  当日完成量
                </template>
                <template v-slot:content>
                  <num-with-r-b-mark style="width: 48%; float: left; line-height: 64px;">
                    <template v-slot:num>2,000</template>
                    <template v-slot:unit>万吨</template>
                  </num-with-r-b-mark>
                  <num-with-r-b-mark style="width: 48%; float: left; line-height: 64px;">
                    <template v-slot:num>20,000</template>
                    <template v-slot:unit>万元</template>
                  </num-with-r-b-mark>
                </template>
              </title-content>
            </card>
            <card style="width: 32%; margin: 5px calc(4%/6); height: calc(100% - 10px); position: relative; float: left">
              <title-content style="text-align: center; float:left; width: 100%;">
                <template v-slot:title>
                  余量
                </template>
                <template v-slot:content>
                  <num-with-r-b-mark style="width: 48%; float: left; line-height: 64px;">
                    <template v-slot:num>2,000</template>
                    <template v-slot:unit>万吨</template>
                  </num-with-r-b-mark>
                  <num-with-r-b-mark style="width: 48%; float: left; line-height: 64px;">
                    <template v-slot:num>20,000</template>
                    <template v-slot:unit>万元</template>
                  </num-with-r-b-mark>
                </template>
              </title-content>
            </card>
          </div>
          <div style="width: 100%; height: 50%;">
            <card style="width: 32%; margin: 5px 9%; height: calc(100% - 10px); position: relative; float: left">
              <title-content style="text-align: center; float:left; width: 100%;">
                <template v-slot:title>
                  消失客户
                </template>
                <template v-slot:content>
                  <num-with-r-b-mark style="width: 48%; float: left; line-height: 64px;">
                    <template v-slot:num>2,000</template>
                    <template v-slot:unit>万吨</template>
                  </num-with-r-b-mark>
                  <num-with-r-b-mark style="width: 48%; float: left; line-height: 64px;">
                    <template v-slot:num>20,000</template>
                    <template v-slot:unit>万元</template>
                  </num-with-r-b-mark>
                </template>
              </title-content>
            </card>
            <card style="width: 32%; margin: 5px 9%; height: calc(100% - 10px); position: relative; float: left">
              <title-content style="text-align: center; float:left; width: 100%;">
                <template v-slot:title>
                  新增客户
                </template>
                <template v-slot:content>
                  <num-with-r-b-mark style="width: 48%; float: left; line-height: 64px;">
                    <template v-slot:num>2,000</template>
                    <template v-slot:unit>万吨</template>
                  </num-with-r-b-mark>
                  <num-with-r-b-mark style="width: 48%; float: left; line-height: 64px;">
                    <template v-slot:num>20,000</template>
                    <template v-slot:unit>万元</template>
                  </num-with-r-b-mark>
                </template>
              </title-content>
            </card>
          </div>


        </container-with-bord>
      </div>

      <div class="content trade_right"><!--左上边框-->
        <div class="t_line_box">
          <i class="t_l_line"></i>
          <i class="l_t_line"></i>
        </div>
        <!--右上边框-->
        <div class="t_line_box">
          <i class="t_r_line"></i>
          <i class="r_t_line"></i>
        </div>
        <!--左下边框-->
        <div class="t_line_box">
          <i class="l_b_line"></i>
          <i class="b_l_line"></i>
        </div>
        <!--右下边框-->
        <div class="t_line_box">
          <i class="r_b_line"></i>
          <i class="b_r_line"></i>
        </div>
        <div class="main_title">
          <img src="img/t_1.png" alt="">
          湖南省货运收入
        </div>
        <div id="chart_1" class="chart" style="width:100%;height: 280px;"></div>
      </div>
    </div>
  </div>
</template>
<script>
import TitleContentWithBord from "./components/container/title-content-with-bord.vue";
import InfoCard from "./components/card/info-card.vue";
import ContrastCard from "./components/card/contrast-card.vue";
import * as echarts from "echarts";
import TitleContent from "./components/container/title-content.vue";
import NumWithRBMark from "./components/layout/title-content-mark.vue";
import Card from "./components/card/card.vue";
import ContainerWithBord from "./components/container/container-with-bord.vue";
export default {
  components: {ContainerWithBord, TitleContentWithBord, Card, NumWithRBMark, TitleContent, ContrastCard, InfoCard},
  data() {
    return {
      constants: {},
      mockData:{
        yyqk:{
          yye:{
            title:"营业额",
            amount:"20,303",
            unit:"万元",
            title1:"昨天",
            amount1:"21,000",
            rate1:"-3.32%",
            title2:"上月",
            amount2:"20，000",
            rate2:"+4.92%",
          },
          cb:{
            title:"成本",
            amount:"10,303",
            unit:"万元",
            title1:"昨日",
            amount1:"11,000",
            rate1:"-2.68%",
            title2:"上月",
            amount2:"10,000",
            rate2:"+5.71%",
          },
          ml:{
            title:"毛利",
            amount:"10,000",
            unit:"万元",
            title1:"昨日",
            amount1:"10,000",
            rate1:"0.00%",
            title2:"上月",
            amount2:"10,000",
            rate2:"0.00%",
          },
        },
        zkqk:{
          yszk:{
            title:"应收账款",
            amount:"20,303",
            unit:"万元",
            title1:"昨天",
            amount1:"21,000",
            rate1:"-3.32%",
            title2:"上月",
            amount2:"20，000",
            rate2:"+4.92%",
          },
          yfzk:{
            title:"应付账款",
            amount:"10,303",
            unit:"万元",
            title1:"昨日",
            amount1:"11,000",
            rate1:"-2.68%",
            title2:"上月",
            amount2:"10,000",
            rate2:"+5.71%",
          },
          zsye:{
            title:"账上余额",
            amount:"10,000",
            unit:"万元",
            title1:"昨日",
            amount1:"10,000",
            rate1:"0.00%",
            title2:"上月",
            amount2:"10,000",
            rate2:"0.00%",
          },
        },
        sr:[
          {
            title:'累计营业收入（当年）',
            value:'20,303',
          },
          {
            title:'应收款（财务）',
            value:'20,303',
          },
          {
            title:'应收款（营销）',
            value:'20,303',
          },
        ],
        barChart:{
          textStyle: {color: "#fff"},
          tooltip: {},
          xAxis: {
            data: ['未结算未开票', '已结算未开票', '已开票未收款', '应收款', '已开票已收款']
          },
          yAxis: {},
          series: [
            {
              name: '开票详情',
              type: 'bar',
              data: [500, 300, 500, 1001, 319],
              color: "#7f83f7",
              label: {
                show: true,
                position: 'top',
                color: "#fff",
              },
            }
          ]
        },
      }
    };
  },
  methods: {
    drawMainBarChart(){
      let myChart = echarts.init(document.getElementById('main_bar_chart'));
      myChart.setOption(this.mockData.barChart);
    }
  },
  mounted() {
    this.drawMainBarChart();
  }
};
</script>
<style scoped lang="css" src="./assets/index.css"/>
