<template>
  <div class="myproject">
    <curve :count='count' :chat='chat' :othAttr='othAttr'/>
    <!-- <span @click='secFun'>dfdfdfdfdfd</span> -->
  </div>
</template>
<script>
/**
 * module:配置参数，调用库容曲线组件的demo
 * author:lwt
 */
import curve from '../../src/components/capacityCurve/capacityCurve'
export default {
  name: 'Myproject',
  props: {
  },
  components: {
    curve
  },
  data () {
    return {
      count: { // 配置水位-库容计算信息
        // isShow: false, // 是否显示头部计算工具，true或不设置：是，false：否
        countPath: '/webapi/api/v1/water/d2/count-storagecurve', // 水位-库容计算的接口
        dataSourceParamsSW: { // 计算水位接口参数
          stcd: '@{stcd}',
          w: '@{w}'
        },
        dataSourceParamsKR: { // 计算库容接口参数
          stcd: '@{stcd}',
          rz: '@{rz}'
        },
        swDataKey: 'data.val', // 水位值
        krDataKey: 'data.w' // 库容值
      },
      chat: { // 配置库容曲线信息
        // krvalPath: '/webapi-fxkh/api/water/zvarl_b?stcd=41603650', // 库容曲线的接口
        krvalPath: 'http://202.109.200.36:50053/webapi/api/v1/water/d2/zvarl_b', // 库容曲线的接口
        dataSourceParams: { // 计算水位接口参数
          stcd: '@{stcd}'
        },
        DataKey: 'data', // 接口请求的数据源数据
        xDataKey: '@{w}', // x轴绑定的字段
        yDataKey: '@{rz}' // y轴绑定的字段
      },
      othAttr: { // 其它配置信息
        width: 1000, // 报图的宽
        height: 432, // 报图的高
        typeTitle: '流量', // 标记文字,不传默认‘库容’
        dataSource: {
          stcd: '90000122',
          sw: 40.5, // 当前水位
          kr: 192, // 当前库容
          tm: '11-02 23:32', // 当前时间
          flood_val: 45, // 汛限水位
          dsflz: 35, // 设计洪水位
          normz: 34, // 正常高水位
          ddz: 30 // 死水位
        },
        valParams: {
          sw: '@{sw}', // 当前水位
          // swUnit: 'kk', // 水位单位，不传默认m
          kr: '@{kr}', // 当前库容
          // krUnit: 'km', // 库容单位，不传默认万m³
          tm: '@{tm}' // 当前时间
        },
        lineParams: [
          { name: '汛限水位', key: '@{flood_val}', lineColor: 'red' }, // 汛限水位
          { name: '设计洪水位', key: '@{dsflz}', lineColor: 'red' }, // 设计洪水位
          { name: '正常高水位', key: '@{normz}', lineColor: 'red' }, // 正常高水位
          { name: '死水位', key: '@{ddz}', lineColor: 'red' } // 死水位
        ],
        option: { // 报图参数
          grid: {
            show: true,
            borderColor: '#2077AD',
            backgroundColor: '#173458'
          },
          yAxis: {
            name: '水位(m)',
            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            }
          },
          xAxis: {
            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            }
          }
        }
      }
      // txt: {
      //   sw: 40.5, // 当前水位
      //   kr: 192, // 当前库容
      //   tm: '11-02 23:32', // 当前时间
      //   flood_val: 45, // 汛限水位
      //   dsflz: 35, // 设计洪水位
      //   stcd: '90000121',
      //   normz: 34, // 正常高水位
      //   ddz: 30, // 死水位
      //   width: 1000, // 报图的宽
      //   height: 432, // 报图的高
      //   countPath: '/webapi/api/v1/water/d2/count-storagecurve', // 水位-库容计算的接口
      //   krvalPath: '/webapi/api/v1/water/d2/zvarl_b' // 库容曲线的接口
      // }
    }
  },
  computed: {

  },
  created () {

  },
  mounted () {

  },
  beforeDestroy () {
  },
  methods: {
    secFun: function () {
      this.othAttr = { // 其它配置信息
        width: 1000, // 报图的宽
        height: 432, // 报图的高
        dataSource: {
          stcd: '90000122',
          sw: 40.5, // 当前水位
          kr: 192, // 当前库容
          tm: '11-02 23:32', // 当前时间
          flood_val: 45, // 汛限水位
          dsflz: 35, // 设计洪水位
          normz: 34, // 正常高水位
          ddz: 30 // 死水位
        },
        valParams: {
          sw: '@{sw}', // 当前水位
          kr: '@{kr}', // 当前库容
          tm: '@{tm}' // 当前时间
        },
        lineParams: [
          { name: '汛限水位', key: '@{flood_val}', lineColor: 'yellow' }, // 汛限水位
          { name: '设计洪水位', key: '@{dsflz}', lineColor: 'yellow' }, // 设计洪水位
          { name: '正常高水位', key: '@{normz}', lineColor: 'yellow' }, // 正常高水位
          { name: '死水位', key: '@{ddz}', lineColor: 'yellow' } // 死水位
        ],
        option: { // 报图参数
          grid: {
            show: true
            // borderColor: '#2077AD',
            // backgroundColor: '#173458'
          },
          yAxis: {
            name: '水位(m)',
            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            }
          },
          xAxis: {
            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            }
          }
        }
      }
    }
  }
}
</script>

<style lang="scss">
  .myproject{
    // background: #3B517A;
    height: 500px;
  }
//   .capacityCurve .out{
//     background: #224064; color: #fff;
//   }
//   .capacityCurve .inp {
//     border: 1px solid #44648E;background: #0C2544;color: #fff;
//   }
//   .capacityCurve input[disabled] {
//     background: #59769a;
// }
</style>
