<template>
  <el-container class="full">
    <el-header>
      <div class="head">资产管理数据看板</div>
    </el-header>
    <el-main class="full" style="margin-top: 30px;">
      <el-row :gutter="4" class="full">
        <el-col :span="8" >
          <TablePage :columns="td_head[0]" :tableData="td_value[0]" title="集中商业" style="height: 40%;" detail="新开项目:大都汇" link="/detail"/>
          <TablePage :columns="td_head[1]" :tableData="td_value[1]" title="酒店及服务式公寓" style="height: 30%;"/>
          <TablePage :columns="td_head[2]" :tableData="td_value[2]" title="景区资产" style="height: 30%;" />
        </el-col>
        <el-col :span="8" >
          <ChartPage :columns="td_head[3]" :tableData="td_value[3]" title="资产分布情况" :option="pie_data" style="height: 30%;"/>
          <TablePage :columns="td_head[4]" :tableData="td_value[4]" title="核心指标" style="height: 40%;"/>
          <ChartPage :columns="td_head[5]" :tableData="td_value[5]" title="收入及NPI走势" :option="bar_data" style="height: 30%;"/>
        </el-col>
        <el-col :span="8">
          <TablePage :columns="td_head[6]" :tableData="td_value[6]" title="长租公寓" style="height: 60%;"/>
          <TablePage :columns="td_head[7]" :tableData="td_value[7]" title="租赁类资产" style="height: 40%;"/>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script>
import ChartPage from './components/ChartPage.vue'
import TablePage from './components/TablePage.vue'
export default {
  name: 'App',
  components: {
    ChartPage,
    TablePage
  },
  data(){
    return {
      pie_data:{
        title: [
          {
            text: '总体资产面积',
            subtext: '35000m²',
            textAlign:'center',
            left: '30%'
          },
          {
            text: '总体资产金额',
            subtext: '54000亿',
            textAlign:'center',
            left: '70%'
          }
        ],
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          left: 'center',
          top: 'bottom',
          
        },
        series: [
          {
            name: 'Area Mode',
            type: 'pie',
            radius: [10, 70],
            center: ['10%', '50%'],
            roseType: 'area',
            label: {
              show: false
            },
            itemStyle: {
              borderRadius: 5
            },
            data: [
              { value: 30, name: 'rose 1' },
              { value: 28, name: 'rose 2' },
              { value: 26, name: 'rose 3' },
              { value: 24, name: 'rose 4' },
              { value: 22, name: 'rose 5' },
            ]
          },
          {
            name: 'Area Mode',
            type: 'pie',
            radius: [10, 70],
            center: ['36.66%', '50%'],
            roseType: 'area',
            label: {
              show: false
            },
            itemStyle: {
              borderRadius: 5
            },
            data: [
              { value: 30, name: 'rose 1' },
              { value: 28, name: 'rose 2' },
              { value: 26, name: 'rose 3' },
              { value: 24, name: 'rose 4' },
              { value: 22, name: 'rose 5' },
            ]
          },
          {
            name: 'Area Mode',
            type: 'pie',
            radius: [10, 70],
            center: ['63%', '50%'],
            roseType: 'area',
            label: {
              show: false
            },
            itemStyle: {
              borderRadius: 5
            },
            data: [
              { value: 30, name: 'rose 1' },
              { value: 28, name: 'rose 2' },
              { value: 26, name: 'rose 3' },
              { value: 24, name: 'rose 4' },
              { value: 22, name: 'rose 5' },
            ]
          },{
            name: 'Area Mode',
            type: 'pie',
            radius: [10, 70],
            center: ['89%', '50%'],
            roseType: 'area',
            label: {
              show: false
            },
            itemStyle: {
              borderRadius: 5
            },
            data: [
              { value: 30, name: 'rose 1' },
              { value: 28, name: 'rose 2' },
              { value: 26, name: 'rose 3' },
              { value: 24, name: 'rose 4' },
              { value: 22, name: 'rose 5' },
            ]
          }
        ]
      },
      bar_data: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        legend: {
          data: ['Evaporation', 'Precipitation', 'Temperature']
        },
        xAxis: [
          {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: 'Precipitation',
            min: 0,
            max: 250,
            interval: 50,
            axisLabel: {
              formatter: '{value} ml'
            }
          },
          {
            type: 'value',
            name: 'Temperature',
            min: 0,
            max: 25,
            interval: 5,
            axisLabel: {
              formatter: '{value} °C'
            }
          }
        ],
        series: [
          {
            name: 'Evaporation',
            type: 'bar',
            tooltip: {
              valueFormatter: function (value) {
                return value + ' ml';
              }
            },
            data: [
              2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
            ]
          },
          {
            name: 'Precipitation',
            type: 'bar',
            tooltip: {
              valueFormatter: function (value) {
                return value + ' ml';
              }
            },
            data: [
              2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
            ]
          },
          {
            name: 'Temperature',
            type: 'line',
            yAxisIndex: 1,
            tooltip: {
              valueFormatter: function (value) {
                return value + ' °C';
              }
            },
            data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
          }
        ]
      },
      td_value:[[],[],[],[],[],[],[],[]],
      td_head:[{},{},{},{},{},{},{},{}]
    }
  },
  mounted(){
    fetch('project/').then(o=>o.json()).then(o=>{
      this.td_head[0]=o.fieldname
      this.td_value[0]=o.data.map(o=>o.fields)
    })
  },
}
</script>

<style>
html,body{
  height: 100%;
  margin:0;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  width: 100%;
  height: 100%;
  background-image:url(../src/assets/bg@2x.png);
  background-repeat: no-repeat;
  background-size:cover;
  position: fixed;
}
.head{
  background-image:url(../src/assets/biaoti@2x.png);
  background-repeat: no-repeat;
  background-size:cover;
  color: aqua;
  font-size:x-large;
  height: 70px;
  width: 100%;
  justify-content:center;
  align-items: center;
  display:flex;
}
.full{
  height: 100%;
}
</style>
