<template>
  <div class="dashboard-editor-container">
    <div class="mtitle">
      早上好，管理员！
      <iframe allowtransparency="true" frameborder="0" width="180" height="36" scrolling="no" style="padding-top:10px;"
      						src="//tianqi.2345.com/plugin/widget/index.htm?s=3&z=2&t=0&v=0&d=2&bd=0&k=&f=#545555&ltf=#545555&htf=ffffff&q=1&e=1&a=1&c=72036&w=180&h=36&align=center"></iframe>
      </div>
<!--    <div class="cbox">-->
<!--      <div class="ctitle">各保税区综合评分概况</div>-->
<!--      <div class="rows">-->
<!--        <div class="row">-->
<!--          <div class="out">-->
<!--            <div class="int">-->
<!--              <span class="icon" style="background-color: rgba(37, 97, 239, 1)">&#xe6e0;</span>-->
<!--              <div class="num">80</div>-->
<!--              <div class="desc">南宁综合保税区</div>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="row">-->
<!--          <div class="out">-->
<!--            <div class="int">-->
<!--              <span class="icon" style="background-color: rgba(102, 110, 232, 1)">&#xe6e0;</span>-->
<!--              <div class="num">80</div>-->
<!--              <div class="desc">钦州综合保税区</div>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="row">-->
<!--          <div class="out">-->
<!--            <div class="int">-->
<!--              <span class="icon" style="background-color: rgba(61, 212, 167, 1)">&#xe6e0;</span>-->
<!--              <div class="num">80</div>-->
<!--              <div class="desc">北海综合保税区</div>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="row">-->
<!--          <div class="out">-->
<!--            <div class="int">-->
<!--              <span class="icon" style="background-color: rgba(250, 116, 107, 1)">&#xe6e0;</span>-->
<!--              <div class="num">80</div>-->
<!--              <div class="desc">凭祥综合保税区</div>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="row">-->
<!--          <div class="out">-->
<!--            <div class="int">-->
<!--              <span class="icon" style="background-color: rgba(253, 219, 120, 1)">&#xe6e0;</span>-->
<!--              <div class="num">80</div>-->
<!--              <div class="desc">梧州综合保税区</div>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->
    <div class="row" style="width: 40%; float: left; margin-top: 15px">
      <div class="cbox">
        <div class="lable">快捷入口</div>
        <div class="menu">
          <div class="out">
            <div class="int">
              <div class="icon" style="background-color: rgba(255, 199, 28, 0.2); color: #fddb78">&#xe679;</div>
              <div class="desc">数据采集</div>
            </div>
          </div>
        </div>
        <div class="menu">
          <div class="out">
            <div class="int">
              <div class="icon" style="background-color: rgba(61, 212, 167, 0.2); color: #3fd4a8">&#xe616;</div>
              <div class="desc">权限管理</div>
            </div>
          </div>
        </div>
        <div class="menu">
          <div class="out">
            <div class="int">
              <div class="icon" style="background-color: rgba(255, 199, 28, 0.2); color: #fddb78">&#xe634;</div>
              <div class="desc">质量管理</div>
            </div>
          </div>
        </div>
        <div class="menu">
          <div class="out">
            <div class="int">
              <div class="icon" style="background-color: rgba(250, 116, 107, 0.2); color: #fa7c74">&#xe6d2;</div>
              <div class="desc">全景展示</div>
            </div>
          </div>
        </div>
        <div class="menu">
          <div class="out">
            <div class="int">
              <div class="icon" style="background-color: rgba(37, 97, 239, 0.2); color: #2561ef">&#xe6b2;</div>
              <div class="desc">数据接口</div>
            </div>
          </div>
        </div>
        <div class="menu">
          <div class="out">
            <div class="int">
              <div class="icon" style="background-color: rgba(61, 212, 167, 0.2); color: #3fd4a8">&#xe611;</div>
              <div class="desc">移动端</div>
            </div>
          </div>
        </div>
        <div class="menu">
          <div class="out">
            <div class="int">
              <div class="icon" style="background-color: rgba(108, 118, 244, 0.2); color: #707af4">&#xe600;</div>
              <div class="desc">指标度量管理</div>
            </div>
          </div>
        </div>
        <div class="menu">
          <div class="out">
            <div class="int">
              <div class="icon" style="background-color: rgba(61, 212, 167, 0.2); color: #3fd4a8">&#xe607;</div>
              <div class="desc">门户网站</div>
            </div>
          </div>
        </div>
        <div class="menu">
          <div class="out">
            <div class="int">
              <div class="icon" style="background-color: rgba(255, 199, 28, 0.2); color: #fddb78">&#xe628;</div>
              <div class="desc">统计查询</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="row" style="width: 60%; float: left; margin-top: 15px; padding-left: 20px">
      <div class="cbox">
        <div class="lable">经营总收入</div>
        <BarChart :chartData="chartData.bar" style="width: 100%"></BarChart>
      </div>
    </div>
    <div class="row" style="width: 25%; float: left; margin-top: 15px">
      <div class="cbox">
        <div class="lable">进出口总值</div>
        <PieChart :chartData="chartData.pie"></PieChart>
      </div>
    </div>
    <div class="row" style="width: 25%; float: left; padding-left: 15px; margin-top: 15px">
      <div class="cbox">
        <div class="lable">加工贸易进出口值</div>
        <PieChart :chartData="chartData.pie"></PieChart>
      </div>
    </div>
    <div class="row" style="width: 25%; float: left; padding-left: 15px; margin-top: 15px">
      <div class="cbox">
        <div class="lable">物流货物进出口值</div>
        <PieChart :chartData="chartData.pie"></PieChart>
      </div>
    </div>
    <div class="row" style="width: 25%; float: left; padding-left: 15px; margin-top: 15px">
      <div class="cbox">
        <div class="lable">互市交易值</div>
        <PieChart :chartData="chartData.pie"></PieChart>
      </div>
    </div>
  </div>
</template>

<script>
import PanelGroup from './dashboard/PanelGroup';
import LineChart from './dashboard/LineChart';
import RaddarChart from './dashboard/RaddarChart';
import PieChart from './dashboard/PieChart';
import BarChart from './dashboard/BarChart';
export default {
  name: 'Index',
  components: {
    PanelGroup,
    LineChart,
    RaddarChart,
    PieChart,
    BarChart
  },
  data() {
    return {
      chartData: {
        bar: [
          { name: '凭祥', value: '1' },
          { name: '钦州', value: '3' },
          { name: '南宁', value: '6' },
          { name: '北海', value: '7' },
          { name: '梧州', value: '3' },
        ],
        pie: [
          { name: '南宁保税区', value: '1' },
          { name: '北海保税区', value: '2' },
          { name: '梧州保税区', value: '2' },
          { name: '钦州保税区', value: '2' },
          { name: '凭祥保税区', value: '2' }
        ]
      }
    };
  },
  methods: {}
};
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;
  overflow: hidden;
  .mtitle {
    margin-bottom: 20px;
    font-size: 19px;
    margin-top: -15px;
  }
  .cbox {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0px 10px 30px rgba(228, 228, 228, 0.49);
    overflow: hidden;
    padding: 20px;
    .ctitle {
      font-weight: 500;
      font-size: 21px;
      color: #333333;
      margin-bottom: 40px;
    }
    .rows {
      .row {
        float: left;
        width: 20%;
        .out {
          padding: 10px;
          .int {
            border: 1px solid #e6e6e6;
            text-align: center;
            border-radius: 8px;
            padding: 30px;
            color: #545555;
            .icon {
              display: block;
              width: 45px;
              height: 45px;
              margin: 0 auto;
              border-radius: 12px;
              color: white;
              margin-top: -56px;
              font-size: 20px;
              line-height: 42px;
            }
            .num {
              font-size: 30px;
              font-weight: bold;
              margin-top: 10px;
              margin-bottom: 10px;
            }
            .desc {
              font-size: 15px;
            }
          }
        }
      }
    }
    .menu {
      float: left;
      width: 33.33%;
      .out {
        padding: 10px;
        .int {
          padding: 10px 10px 0px 10px;
          text-align: center;
          .icon {
            width: 45px;
            height: 45px;
            color: white;
            border-radius: 12px;
            margin: 0 auto;
            font-size: 25px;
            line-height: 42px;
          }
          .desc {
            color: #545555;
            margin-top: 9px;
            font-size: 14px;
          }
        }
      }
    }
  }
}
</style>
