<template>
  <div class="myproject">
    <!-- <tab :initdate='"2019-01-11"' :parkey='parkey' :pars='pars' :dateColor="dateColor"/> -->
    <!-- <durtime :startTm='start' :endTm='end' :secFun='secFun'/> -->
    <chat :chatConfig='chatConfig'/>
    <label @click='change'>点击</label>
  </div>
</template>
<script>
/**
 * module:配置参数调用（折线图+剖面图）组件的demo
 * author:lwt
 */
import chat from './chat'
export default {
  name: 'Myproject',
  props: {
  },
  components: {
    chat
  },
  data () {
    return {
      chatConfig: { // 配置报图+剖面图参数
        width: 550, // 报图的宽
        height: 420, // 报图的高
        isRR: false, // true：水库，false：河道
        dateConfig: { // 配置日期参数
          start: '2019-09-01 12:12', // 默认开始时间
          end: '2019-09-19 09:34', // 默认结束时间
          stcd: '051'
        },
        chatPath: 'http://61.145.9.103:50053/WebApi/api/v1/water/d2/chart?', // 报图请求的接口
        // chatPath: 'http://192.168.116.246:18090/webapi/api/water/chart?stcd=055&time=%5B2019-09-01%2011%3A07%2C2019-09-19%2011%3A07%5D&type=3', // 报图请求的接口
        // chatPath: 'http://172.16.28.140:8080/webapi/fxkh/water/chart', // 报图请求的接口
        dataSourceParams: { // 请求报图接口的参数
          stcd: '@{stcd}',
          time: '[@{start},@{end}]',
          dtmel_type: '3'
          // interval: '1h'
        },
        chatDataKey: 'data.line_data', // 获取报图数据源数据
        lineDataKey: 'data', // 获取剖面图数据源数据
        endData: [ // 配置剖面图顶部的参数
          { key: '@{tm|date(MM-DD HH:mm)}', name: '时间', unit: '' },
          { key: '@{val}', name: '水位', unit: 'm' },
          { key: '@{val}', name: '库容', unit: '万m³' }
        ],
        lineParams: [ // 配置剖面图画线的参数
          { key: '@{ddz}', lineColor: '#000000', txtColor: '#000000', text: '坝顶高程', xStart: 50, xEnd: 185, txtX: 80 }, // 坝顶高程
          { key: '@{flood_val}', lineColor: '#E62BB1', txtColor: '#E62BB1', text: '汛限水位', xStart: 0, xEnd: 185, txtX: 90 }, // 汛限水位
          // { lineColor: '#2D6DC7', txtColor: '#2D6DC7', text: '水位', xStart: 0, xEnd: 185, txtX: 100 }, // 水位--水库
          { lineColor: '#2D6DC7', txtColor: '#2D6DC7', text: '水位', xStart: 150, xEnd: 270, txtX: 200 }, // 水位--河道
          { key: '@{ddz}', lineColor: '#112DE2', txtColor: '#112DE2', text: '死水位', xStart: 50, xEnd: 185, txtX: 100 }, // 死水位
          { key: '@{ddz}', lineColor: '#000000', txtColor: '#000000', text: '设计水位', xStart: 186, xEnd: 280, txtX: 190 }, // 设计水位
          { key: '@{ddz}', lineColor: '#000000', txtColor: '#000000', text: '放水涵管', xStart: 186, xEnd: 280, txtX: 190 }, // 放水涵管
          { key: '@{ddz}', lineColor: '#C138B9', txtColor: '#C138B9', text: '警戒水位', xStart: 0, xEnd: 185, txtX: 90 }, // 警戒水位
          { key: '@{ddz}', lineColor: '#EB382A', txtColor: '#EB382A', text: '保证水位', xStart: 0, xEnd: 185, txtX: 90 } // 保证水位
        ],
        option: { // 报图参数
          grid: {
            show: true,
            borderColor: '#2077AD',
            backgroundColor: '#173458'
          },
          legend: {
            top: '1',
            left: '5',
            backgroundColor: '#133968',
            textStyle: {
              color: '#fff'
            }
          },
          yAxis: {
            name: '1111',
            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            }
          },
          xAxis: {
            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', symbol: 'arrow' }, // 水位， alone不传表示数据源是个数组，从数组取值
            { key: '@{flood_val}', alone: true, name: '汛限水位', type: 'line', source: 'data' }, // 汛限水位，alone：true表示数据源是单个值，根据x轴长度转数组
            { key: '@{ensure_val}', alone: true, name: '正常水位', type: 'line', source: 'data' } // 正常水位
          ]
        }
      }
    }
  },
  computed: {

  },
  created () {

  },
  mounted () {

  },
  beforeDestroy () {
  },
  methods: {
    change: function () {
      let chatConfig = { // 配置报图+剖面图参数
        width: 550, // 报图的宽
        height: 420, // 报图的高
        isRR: true, // true：水库，false：河道
        dateConfig: { // 配置日期参数
          start: '2018-07-03 12:12', // 默认开始时间
          end: '2019-09-12 09:34', // 默认结束时间
          stcd: '90000122'
        },
        chatPath: 'WebApi/api/v1/water/d2/chart', // 报图请求的接口
        // chatPath: 'http://172.16.28.140:8080/webapi/fxkh/water/chart', // 报图请求的接口
        dataSourceParams: { // 请求报图接口的参数
          stcd: '@{stcd}',
          time: '[@{start},@{end}]',
          dtmel_type: '3',
          interval: '1h'
        },
        chatDataKey: 'data.line_data', // 获取报图数据源数据
        lineDataKey: 'data', // 获取剖面图数据源数据
        endData: [ // 配置剖面图顶部的参数
          { key: '@{tm|date(MM-DD HH:mm)}', name: '时间', unit: '' },
          { key: '@{val}', name: '水位', unit: 'm' },
          { key: '@{val_up}', name: '库容', unit: '万m³' }
        ],
        lineParams: [ // 配置剖面图画线的参数
          { key: '@{ddz}', lineColor: '#000000', txtColor: '#000000', text: '坝顶高程', xStart: 50, xEnd: 185, txtX: 80 }, // 坝顶高程
          { key: '@{flood_val}', lineColor: '#E62BB1', txtColor: '#E62BB1', text: '汛限水位', xStart: 0, xEnd: 185, txtX: 90 }, // 汛限水位
          { lineColor: '#2D6DC7', txtColor: '#2D6DC7', text: '水位', xStart: 0, xEnd: 185, txtX: 100 }, // 水位--水库
          // { key: '@{bdgc}', lineColor: '#2D6DC7', txtColor: '#2D6DC7', text: '水位', xStart: 150, xEnd: 270, txtX: 200 }, // 水位--河道
          { key: '@{ddz}', lineColor: '#112DE2', txtColor: '#112DE2', text: '死水位', xStart: 50, xEnd: 185, txtX: 100 }, // 死水位
          { key: '@{ddz}', lineColor: '#000000', txtColor: '#000000', text: '设计水位', xStart: 186, xEnd: 280, txtX: 190 }, // 设计水位
          { key: '@{ddz}', lineColor: '#000000', txtColor: '#000000', text: '放水涵管', xStart: 186, xEnd: 280, txtX: 190 }, // 放水涵管
          { key: '@{ddz}', lineColor: '#C138B9', txtColor: '#C138B9', text: '警戒水位', xStart: 0, xEnd: 185, txtX: 90 }, // 警戒水位
          { key: '@{ddz}', lineColor: '#EB382A', txtColor: '#EB382A', text: '保证水位', xStart: 0, xEnd: 185, txtX: 90 } // 保证水位
        ],
        option: { // 报图参数
          // grid: {
          //   show: true,
          //   borderColor: '#2077AD',
          //   backgroundColor: '#173458'
          // },
          // legend: {
          //   top: '1',
          //   left: '5',
          //   backgroundColor: '#133968',
          //   textStyle: {
          //     color: '#fff'
          //   }
          // },
          // yAxis: {
          //   name: '',
          //   axisLine: {
          //     lineStyle: {
          //       color: '#fff'
          //     }
          //   }
          // },
          // xAxis: {
          //   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', symbol: 'arrow' }, // 水位， alone不传表示数据源是个数组，从数组取值
            { key: '@{flood_val}', alone: true, name: '汛限水位', type: 'line', source: 'data' }, // 汛限水位，alone：true表示数据源是单个值，根据x轴长度转数组
            { key: '@{ensure_val}', alone: true, name: '正常水位', type: 'line', source: 'data' } // 正常水位
          ]
        }
      }
      this.chatConfig = chatConfig
    }
  }
}
</script>

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