<template>
  <div class="myproject">
    <!-- <tab :initdate='"2019-01-11"' :parkey='parkey' :pars='pars' :dateColor="dateColor"/> -->
    <!-- <durtime :startTm='start' :endTm='end' :secFun='secFun'/> -->
    <process :dateConfig='dateConfig' :chatConfig='chatConfig'/>
    <!-- <label @click='change'>点击</label> -->
  </div>
</template>
<script>
/**
 * module:配置参数，调用时间组件+（echarts折线图）模块
 * author:lwt
 */
import process from './process'
export default {
  name: 'Myproject',
  props: {
  },
  components: {
    process
  },
  data () {
    return {
      dateConfig: { // 配置日期参数
        start: '2018-02-03 12:12', // 默认开始时间
        end: '2019-01-12 09:34' // 默认结束时间
      },
      chatConfig: { // 配置报图+剖面图参数
        width: 800, // 报图的宽
        height: 420, // 报图的高
        chatPath: 'WebApi/api/v1/water/d2/chart', // 报图请求的接口
        dataSourceParams: { // 请求报图接口的参数
          stcd: '90000121',
          time: '[@{start},@{end}]',
          dtmel_type: '3',
          interval: '1h'
        },
        chatDataKey: 'data.line_data', // 获取报图数据源数据
        option: {
          // grid: {
          //   show: true,
          //   borderColor: '#2077AD',
          //   backgroundColor: '#173458'
          // },
          // legend: {
          //   top: '1',
          //   left: '5',
          //   backgroundColor: '#133968',
          //   textStyle: {
          //     color: '#fff'
          //   }
          // },
          // xAxis: {
          //   axisLine: {
          //     lineStyle: {
          //       color: '#fff'
          //     }
          //   }
          // },
          yAxis: [ // 配置报图的yAxis参数
            {
              name: '上水位(m)',
              type: 'value',
              max: 100
              // axisLine: {
              //   lineStyle: {
              //     color: '#fff'
              //   }
              // }
            },
            {
              name: '下水位(m)',
              nameLocation: 'start',
              max: 100,
              type: 'value',
              inverse: true
              // axisLine: {
              //   lineStyle: {
              //     color: '#fff'
              //   }
              // }
            }
          ]
        },
        chatParams: { // 配置报图xy轴的参数
          xDataKey: '@{tm|date(MM-DD <br> HH:mm)}', // x轴绑定的字段
          yDataKey: [ // y轴绑定的字段
            { key: '@{val}',
              name: '上水位',
              type: 'line',
              source: 'data.line_data',
              itemStyle: {
                normal: {
                  // areaStyle: {
                  //   color: {
                  //     type: 'linear',
                  //     x: 0,
                  //     y: 0,
                  //     x2: 0,
                  //     y2: 1,
                  //     colorStops: [{
                  //       offset: 0, color: '#41E000' // 0% 处的颜色
                  //     }, {
                  //       offset: 1, color: '#02687c' // 100% 处的颜色
                  //     }],
                  //     globalCoord: false // 缺省为 false
                  //   } },
                  color: '#005DBC',
                  lineStyle: {
                    color: '#005DBC'
                  }
                } } }, // 水位， alone不传表示数据源是个数组，从数组取值
            { key: '@{w}',
              alone: true,
              name: '下水位',
              type: 'line',
              source: 'data.line_data',
              yAxisIndex: 1,
              itemStyle: {
                normal: {
                  // areaStyle: {
                  //   color: {
                  //     type: 'linear',
                  //     x: 0,
                  //     y: 0,
                  //     x2: 0,
                  //     y2: 1,
                  //     colorStops: [{
                  //       offset: 0, color: '#F56526' // 0% 处的颜色
                  //     }, {
                  //       offset: 1, color: '#246880' // 100% 处的颜色
                  //     }],
                  //     globalCoord: false // 缺省为 false
                  //   }
                  // },
                  color: '#D83C0F',
                  lineStyle: {
                    color: '#D83C0F'
                  }
                } }
            } // 汛限水位，alone：true表示数据源是单个值，根据x轴长度转数组
          ]
        }
      }
    }
  },
  computed: {

  },
  created () {

  },
  mounted () {

  },
  beforeDestroy () {
  },
  methods: {
  }
}
</script>

<style lang="scss">
  .myproject{
    height: 500px;
  }
  // .durTime .out{
  //   background: #224064;
  // }
  // .WdateInputDiv{
  //   background: #0C2544; color: #fff;padding: 0 2px;
  // }
</style>
