<template>
  <div>
    <el-row :gutter="10" style="margin-top:10px">
      <el-col :span="12">
        <header class="header-title2">用户信息</header>
        <div class="tx-container">
          <el-row :gutter="10" class="user-row mar1">
            <el-col :span="10">
              <img src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" />
            </el-col>
            <el-col :span="14">
              <ul class="user-ul">
                <li>用户名：测试 1</li>
                <li>上报次数：29561次</li>
                <li>驳回次数：29561次</li>
                <li>修改次数：29561次</li>
                <li>本期未报：12监测点</li>
                <li>投稿数量：12条</li>
              </ul>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :span="12">
        <header class="header-title2">通知公告</header>
        <div class="tx-container">
          <ul class="notice-ul mar1">
            <li v-for="i in 6" :key="i">
              <el-row>
                <el-col :span="19">通告</el-col>
                <el-col class="notice-time" :span="5">2019-03-08</el-col>
              </el-row>
            </li>
          </ul>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="10" style="margin-top:10px">
      <el-col :span="12">
        <header class="header-title2">
          原粮上周行情
          <div class="header-right">
            期数：
            <el-select size="small" v-model="value" placeholder="请选择" style="width:120px;">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
        </header>
        <div class="tx-container">
          <div class="mar1">
            <el-table tooltip-effect="dark" style="width: 100%;margin-top:10px;" align="center" border stripe highlight-current-rowv-loading="tableLoading" :data="tableData">
              <el-table-column align="center" label="指标" :show-overflow-tooltip="true" prop="planFileName"></el-table-column>
              <el-table-column align="center" label="标准" :show-overflow-tooltip="true" prop="migrationDate"></el-table-column>
              <el-table-column align="center" label="收购价" :show-overflow-tooltip="true" prop="city"></el-table-column>
              <el-table-column align="center" label="出库价" :show-overflow-tooltip="true" prop="findingsAudit"></el-table-column>
              <el-table-column align="center" label="出厂价" :show-overflow-tooltip="true" prop="city"></el-table-column>
              <el-table-column align="center" label="批发价" :show-overflow-tooltip="true" prop="findingsAudit"></el-table-column>
              <el-table-column align="center" label="零售价" :show-overflow-tooltip="true" prop="findingsAudit"></el-table-column>
            </el-table>
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <header class="header-title2">
          原粮近三月趋势分析
          <div class="header-right">
            日期：
            <el-date-picker size="small" style="width:240px;" v-model="timeVal" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期">
            </el-date-picker>
          </div>
        </header>
        <div class="tx-container">
          <div class="echarts-box" id="blockMap">

          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import echarts from 'echarts'
export default {
  data() {
    return {
      timeVal:'',
      options: [{
        value: '第一周',
        label: '第一周'
      }, {
        value: '第二周',
        label: '第二周'
      }],
      value: '',
      tableData: [{
        index: 1
      }]
    }
  },
  created() {
  
  },
  methods: {
    //柱形图
    createBlock(dataName, dataValue) {
      console.log(dataName)
      // 基于准备好的dom，初始化echarts实例
      const myChart = echarts.init(document.getElementById('blockMap'));
      let option = {
          tooltip : {
              trigger: 'axis'
          },
          legend: {
              top: 20
          },
          toolbox: {
          },
          calculable : true,
          xAxis : [
              {
                  type : 'category',
                  boundaryGap : false,
                  data : ['周一','周二','周三','周四','周五','周六','周日']
              }
          ],
          yAxis : [
              {
                  type : 'value'
              }
          ],
          series : [
              {
                  name:'白麦',
                  type:'line',
                  stack: '总量',
                  data:[120, 132, 101, 134, 90, 230, 210]
              },
              {
                  name:'红麦',
                  type:'line',
                  stack: '总量',
                  data:[220, 182, 191, 234, 290, 330, 310]
              },
              {
                  name:'混合麦',
                  type:'line',
                  stack: '总量',
                  data:[150, 232, 201, 154, 190, 330, 410]
              },
              {
                  name:'稻谷',
                  type:'line',
                  stack: '总量',
                  data:[320, 332, 301, 334, 390, 330, 320]
              },
              {
                  name:'大豆',
                  type:'line',
                  stack: '总量',
                  data:[820, 932, 901, 934, 1290, 1330, 1320]
              }
          ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    }
  },
  mounted() {
    this.createBlock() 
  }
}
</script>
<style scoped>
.header-title2 {
  width: 100%;
  height: 44px;
  line-height: 44px;
  color: #fff;
  background-image: url("../../../assets/small.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  box-sizing: border-box;
  padding-left: 20px;
  position: relative;
}
.header-right{ position:absolute; right: 10px; top: 0px;}
.tx-container {
  width: 100%;
  height: 300px;
  border: 1px solid #eef2f7;
}
.mar1{ padding: 0 10px;}
.echarts-box {
  width: 100%;
  height: 100%;
}

.user-row img{ max-width: 100%; max-height: 100%; margin-top: 15px;}
.user-ul{ padding: 0; margin: 0;}
.user-ul li{ list-style: none; color: #333; padding: 14px 0px 10px; font-size: 14px; border-bottom: 1px dotted #ccc;}
.notice-ul{ padding: 0; margin: 0;}
.notice-ul li{ list-style: none; color: #333; padding: 14px 10px 10px; font-size: 14px; border-bottom: 1px dotted #ccc;}
.notice-time{ text-align: center;}

</style>





