<template>
  <div class="all">
    <div class="top">
      <img src="../../assets/隐患分析.png">
    </div>
    <div class="main">
      <!--查询-->
      <div class="row" style="height: 80px;padding-left: 25px;">
        <div class="col-sm-2 form-group">
          <label class="font_normal_body" style="margin-right: 2px">公&emsp;&emsp;司</label>
          <right-tree @re-res="getRes" :initresid="filialeid">
          </right-tree>
        </div>
        <div class="col-sm-2 form-group">
          <label for="startDate" class="font_normal_body">开始日期:</label>
          <datepicker id="startDate" placeholder="开始日期"
                      v-model="startDate"
                      :value.sync="startDate"
                      style="width: 60%;"
                      :disabled-days-of-Week="[]"
                      :format="'yyyy-MM-dd'"
                      :show-reset-button="reset">
          </datepicker>
        </div>
        <div class="col-sm-2 form-group">
          <label for="endDate" class="font_normal_body">结束日期:</label>
          <datepicker id="endDate" placeholder="结束日期"
                      v-model="endDate"
                      :value.sync="endDate"
                      :disabled-days-of-Week="[]"
                      style="width: 60%;"
                      :format="'yyyy-MM-dd'"
                      :show-reset-button="reset">
          </datepicker>
        </div>
        <div class="col-sm-3 form-group" style="margin-top: 8px">
          <button class="button_search button_spacing" @click="search()">查询</button>
        </div>
      </div>
      <!--左边 -->
      <!--<div>-->
        <!--饼图-->
        <div class="auto" id="myChart2" style="width:40%;height:70%"></div>
        <!--折线图-->
        <!--<div class="auto" id="myChart1" style="width:40%;height:45%"></div>-->
      <!--</div>-->
      <div class="right">
        <!--折线图-->
        <div id="myChart3"></div>
      </div>
    </div>

  </div>

</template>

<script>
  import {PagedList} from 'vue-client'
  import { HttpResetClass } from 'vue-client'

  export default {
    title: '隐患分析图表',
    data () {
      return {
        // model: new PagedList('rs/sql/getCheckPlanList', 20),
        // filialeid: '${this.$login.f.orgid}',
        // startDate: '2020-01-01',
        startDate: '',
        endDate: '',
        // userid: '103632',
        userid: this.$login.f.id,
        filialeid: '(453)',
        source: 'tool.getFullTree(this.getRights().where(row.getType() == $organization$))',
        // 饼图隐患等级
        leveldata: [
          {value: 1548, name: '三级隐患',selected: 'true'},
          {value: 775, name: '二级隐患',selected: 'true'},
          {value: 679, name: '一级隐患', selected: true},
          {value: 679, name: '其他隐患', selected: true}
        ],
        // 饼状隐患数量
        pienamedata: [
          {value: 848, name: '百度'},
          {value: 335, name: '直达'},
          {value: 310, name: '邮件营销'},
          {value: 251, name: '谷歌'},
          {value: 234, name: '联盟广告'},
          // {value: 147, name: '必应'},
          {value: 235, name: '视频广告'},
          {value: 602, name: '其他'}
        ],
        // 柱状图隐患名称
        barname: ['燃气表漏气', '燃气表损坏', '气量异常差值', '其他隐患', '灶具超期', '灶具打不着火', '热水器超期', '软管漏气', '开放式厨房', '燃气设施安装不规范'],
        // 柱状图隐患数量
        baryinhuan: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8],
        // 柱状图处理数
        barchuli: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0],
        // 柱状图剩余数
        barshengyu: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5]

      }
    },
    methods: {
      getRes (obj) {
        //tag
        this.filialeid = this.$login.convertToIn(obj.resids);
        //tag
      },
      search () {
        //tag
        let http = new HttpResetClass()
        let condition = ' 1 = 1 '
        condition += this.filialeid ? ` and cp.f_filialeid in ${this.filialeid}` : ' and 1=1 '
        condition += this.startDate ? ` and cp.f_onsite_time >= '${this.startDate}'` : ' and 1=1 '
        condition += this.endDate ? ` and cp.f_onsite_time <= '${this.endDate}'` : ' and 1=1 '
        //tag
        http.load('POST', '/rs/logic/hiddenchart', {condition: condition},
          {resolveMsg: '获取数据成功！！！', rejectMsg: '获取数据失败！！！'}).then((res) => {
            //tag
            this.leveldata = res.data.piedengji
            this.pienamedata = res.data.pieshuliang
            this.getPieChartData()
            //tag
            this.setbardata(res.data.bardata)
          })
      },
      // 饼状图绘图
      getPieChartData () {
        const chart2 = document.getElementById('myChart2')
        if (chart2) {
          const myChart2 = this.$echarts.init(chart2)
          let option = {
            title: {
              text: '隐患类型比例图',
              textStyle: {
                fontStyle: 'normal',
                fontWeight: 'bold',
                color: '#cdb56d'  //标题颜色
              },
              // subtext: '模拟数据',
              x: 'center'
            },
            tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b}: {c} ({d}%)',
              extraCssText:'width:200px;height:80px;'
            },
            color: ['#ff7f50','#87cefa','#da70d6','#32cd32','#6495ed',
              '#ff69b4','#ffa500','#40e0d0','#1e90ff','#ff6347','#00fa9a','#ffd700',
              '#ff6666','#3cb371','#30e0e0'],
            // legend: {
            //   data: ['直达', '营销广告', '搜索引擎', '邮件营销', '联盟广告', '视频广告', '百度', '谷歌', '必应', '其他']
            // },
            series: [
              {
                name: '隐患等级',
                type: 'pie',
                selectedMode: 'single',
                radius: [0, '26%'],
                label: {
                  position: 'inner',
                  fontSize: 14,
                },
                labelLine: {
                  show: false
                },
                data: this.leveldata
              },
              {
                name: '隐患名称',
                type: 'pie',
                radius: ['36%', '48%'],
                labeliLne: {
                  length: 30,
                },
                label: {
                  formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
                  // backgroundColor: '#8DB6CD',
                  backgroundColor: 'rgba(0,0,0,0)',
                  borderColor: '#8C8D8E',
                  borderWidth: 1,
                  borderRadius: 4,

                  rich: {
                    a: {
                      color: '#FFFF00',
                      lineHeight: 22,
                      align: 'center'
                    },
                    hr: {
                      borderColor: '#8C8D8E',
                      width: '100%',
                      borderWidth: 1,
                      height: 0
                    },
                    b: {
                      color: '#FFFDFE',
                      fontSize: 14,
                      fontWeight: 'bold',
                      lineHeight: 33
                    },
                    per: {
                      color: '#fff',
                      backgroundColor: '#4C5058',
                      padding: [3, 4],
                      borderRadius: 4
                    }
                  }
                },
                data: this.pienamedata
              }
            ]
          };
          myChart2.setOption(option)
        }
      },
      // 折线图绘图
      getLineChartData () {
        const chart1 = document.getElementById('myChart1')
        if (chart1) {
          const myChart1 = this.$echarts.init(chart1)
          let option = {
            title: {
              text: '隐患数量折线图',
              textStyle: {
                fontWeight: 'normal',
                color: '#A3FFFC'  //标题颜色
              },
              x: 'center'
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'cross',
                label: {
                  backgroundColor: '#6a7985'
                }
              },
              extraCssText:'width:120px;height:80px;'
            },
            color: ['#ffa500'],
            xAxis: {
              type: 'category',
              name: '隐患名称',
              boundaryGap: true,
              data: ['隐患1', '隐患2', '隐患3', '隐患4', '隐患5', '隐患6', '隐患7'],
              axisLine: {
                lineStyle: {
                  type:  'solid',
                  color:  '#fff' , //左边线的颜色
                  width: '1' //坐标线的宽度
                }
              }
            },
            textStyle: {
              fontSize: 15,
              color: '#fff'
            },
            yAxis: {
              type: 'value',
              name: '数量',
              axisLine: {
                lineStyle: {
                  type: 'solid',
                  color: '#fff',
                  width: '1'
                }
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: '#468b81',
                  width: '1',
                  type: 'dashed'
                }
              }
            },
            series: [{
              data: [820, 932, 901, 934, 1290, 1330, 1320],
              type: 'line',
              areaStyle: {
                color: 'rgba(255,230,20,0.2)'
              },
              // 显示数值
              itemStyle: {normal: {label: {show: true}}}
            }]
          }
          option && myChart1.setOption(option);
        }
      },
      // 柱状图绘图
      getHistogramDate () {
        const chart3 = document.getElementById('myChart3')
        if (chart3) {
          const myChart3 = this.$echarts.init(chart3)
          let option = {
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'cross',
                crossStyle: {
                  color: '#999'
                }
              },
              extraCssText: 'width:130px;height:90px;'
            },
            toolbox: {
              feature: {
                dataView: {show: true, readOnly: false},
                magicType: {show: true, type: ['line', 'bar']},
                restore: {show: true},
                saveAsImage: {show: true}
              }
            },
            legend: {
              data: ['隐患数','处理数','剩余数'],
              textStyle: {
                color: '#fff' // 图例文字颜色
              }
            },
            textStyle: {
              fontSize: 15,
              color: '#fff'
            },
            // color: ['#43fff8','#43ff42','#adff6b'],
            color: ['#32cd32','#40e0d0','#ffcf17'],
            xAxis: [
              {
                type: 'category',
                data: this.barname,
                axisPointer: {
                  type: 'shadow'
                },
                // 字体倾斜
                axisLabel: {
                  interval: 0,
                  rotate: 40
                },
                // 轴线颜色
                axisLine: {
                  lineStyle: {
                    type:  'solid',
                    color:  '#fff' , //左边线的颜色
                    width: '1' //坐标线的宽度
                  }
                }
              }
            ],
            yAxis: [
              {
                type: 'value',
                name: '隐患数量',
                min: 0,
                max: 250,
                interval: 50,
                axisLabel: {
                  formatter: '{value}'
                },
                // 轴线颜色
                axisLine: {
                  lineStyle: {
                    type: 'solid',
                    color: '#fff', // 左边线的颜色
                    width: '1' // 坐标线的宽度
                  }
                },
                // 背景虚线
                splitLine: {
                  show: true,
                  lineStyle: {
                    color: '#468b81',
                    width: '1',
                    type: 'dashed'
                  }
                }
              },
              {
                type: 'value',
                name: '消除数',
                min: 0,
                max: 25,
                interval: 5,
                axisLabel: {
                  formatter: '{value}'
                },
                // 轴线颜色
                axisLine: {
                  lineStyle: {
                    type: 'solid',
                    color: '#fff',
                    width: '1'
                  }
                },
                // 背景虚线
                splitLine: {
                  show: true,
                  lineStyle: {
                    color: '#468b81',
                    width: '1',
                    type: 'dashed'
                  }
                }
              }
            ],
            series: [
              {
                name: '隐患数',
                type: 'bar',
                data: this.baryinhuan,
                // 显示数值
                itemStyle: {normal: {label: {show: true}}}
              },
              {
                name: '处理数',
                type: 'bar',
                data: this.barchuli
              },
              {
                name: '剩余数',
                type: 'line',
                yAxisIndex: 1,
                data: this.barshengyu,
                // 显示数值
                itemStyle: {normal: {label: {show: true}}}
              }
            ]
          };
          option && myChart3.setOption(option);
        }
      },
      // 设置柱状图参数
      setbardata (data) {
        for (let i = 0; i < data.length; i++) {
          //tag
          //tag
          this.barname.splice(i, 1, data[i].name)
          this.baryinhuan.splice(i, 1, data[i].count)
          this.barchuli.splice(i, 1, data[i].xiaochu)
          this.barshengyu.splice(i, 1, data[i].shengyu)
        }
        this.getHistogramDate()
      }
    },
    ready () {
      //tag
      // 绘制饼图
      this.getPieChartData()
      // 绘制折线图
      // this.getLineChartData()
      // 绘制柱状图
      this.getHistogramDate()
    }
  }
</script>

<style scoped>
  .all {
    background-image: url(../../assets/星球背景.jpg);
    background-size: 100% auto;
    background-repeat:no-repeat;
    background-attachment: fixed;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  .top {
    width: 100%;
    height: 12%;
    text-align: center;
    padding-top: .24rem;
    background-color: rgba(1,57,71,.5);
  }
  .main {
    /*float: left;*/
    width: 100%;
    /*margin: 0 1% 1%;*/
    padding-top: 10px;
    height: 88%;
    background-color: rgba(1,57,71,.5);
  }
  .right {
    /*float: right;*/
    width: 60%;
    height: 69%;
    /*border: 1px solid #ff252f;*/
    position: absolute;
    right: 18px;
    top: 21%;
  }
  .font_normal_body {
    color: #fff;
  }

</style>
