<template>
  <div class="flex-row" id="unit" v-show="(!echarts)&&(!isActiveTotalForm)">
    <div class="basic-main" @keyup.enter="search">
      <div class="flex">
        <div class="flex" style="flex:1;">
          <criteria-paged :model="model" :pager='true' v-ref:paged>
            <criteria @condition-changed='$parent.search' partial='criteria' v-ref:cri>
              <div class="form-horizontal select-overspread container-fluid auto" novalidate partial @keyup.enter="search()">
                <div class="row" width="100%">
                  <div class="col-sm-2 form-group">
                    <label class="font_normal_body">客户编号</label>
                    <input  style="width:60%" class="input_search" condition="f_userinfo_code like '%{}%'" placeholder='客户编号' type="text"
                           v-el:meternumber v-model="model.f_userinfo_code" v-next-el='f_userinfo_code'
                    >
                  </div>
                  <div class="col-sm-2 form-group">
                    <label class="font_normal_body">客户名称</label>
                    <input  style="width:60%" class="input_search" condition="f_user_name like '%{}%'" placeholder='客户名称' type="text"
                           v-el:username v-model="model.f_username" v-next-el='userid'>
                  </div>
                  <div class="col-sm-2 form-group">
                    <label class="font_normal_body">&nbsp;&nbsp;&nbsp;小区&nbsp;&nbsp;&nbsp;</label>
                    <v-select :value.sync="model.f_residential_area"
                              class="select_list select"
                              v-model="model.f_residential_area"
                              style="width: 60%"
                              multiple
                              condition="f_residential_area in {}"
                              :options='$parent.$parent.residentialArea' placeholder='选择小区'
                              close-on-select>

                    </v-select>
                  </div>
                  <div class="col-sm-2 form-group">
                    <label class="font_normal_body">用气地址</label>
                    <input  style="width:60%" class="input_search" condition="f_address like '%{}%'" placeholder='用气地址' type="text"
                            v-el:area v-el:xq v-model="model.f_address" v-next-el='address'
                    >
                  </div>
                  <div class="col-sm-4 form-group button-range">
                    <button @click="search()" class="button_search button_spacing">查询</button>
                    <button @click="$parent.$parent.clearmsg" class="button_clear button_spacing">清空</button>
                    <export-excel :data="$parent.$parent.getCondition()"
                                  :field="$parent.$parent.getfield"
                                  sqlurl="api/af-revenue/logic/openapi/exportfile" sql-name="webmeter_getUserGasList" template-name='未用气分析'
                                  v-ref:exports
                                  :choose-col="true"></export-excel>
                    <button class="button_export button_spacing" style="width: max-content" @click="$parent.$parent.showTotalForm()" >显示汇总</button>
                    <button class="button_export button_spacing" @click="$parent.$parent.showEcharts()">显示图表</button>
                    <div style="float: right"  class="button_spacing" :class="{'button_shrink_top':$parent.$parent.criteriaShow,'button_shrink_bottom':!$parent.$parent.criteriaShow}"    @click="$parent.$parent.hidden()"></div>
                  </div>
                </div>
                <div class="row" v-show="$parent.$parent.criteriaShow">

                  <!--<div class="col-sm-2 form-group" >
                    <label class="font_normal_body">用气属性</label>
                    <v-select
                      placeholder='用气属性'
                      value-single="true"
                      :value.sync="model.f_gasproperties2"
                      v-model="model.f_gasproperties2"
                      :options='$parent.$parent.Gasproperties2'
                      close-on-select condition="uf.f_gasproperties2 {}">
                    </v-select>
                  </div>-->
<!--                  <res-select-group  :show-component="['company']" :initres="$parent.$parent.initres"  @re-res="$parent.$parent.getRes" v-ref:sel></res-select-group>-->
                  <div class="col-sm-2 form-group">
                    <label class="font_normal_body">表&emsp;&emsp;号</label>
                    <input  style="width:60%" class="input_search" condition="f_meternumber like '%{}'" placeholder='表号' type="text"
                            v-el:meternumber v-model="model.f_meternumber" v-next-el='meternumber'
                    >
                  </div>
<!--                  <div class="col-sm-2">-->
<!--                    <label class="font_normal_body">公&emsp;&emsp;司</label>-->
<!--                    <right-tree @re-res="$parent.$parent.getorg"-->
<!--                                :initresid='$parent.$parent.orgid'></right-tree>-->
<!--                  </div>-->
                  <res-select-group :show-component="$parent.$parent.resshow" :selectin="true" :initres="$parent.$parent.initres"  @re-res="$parent.$parent.getRes" v-ref:sel></res-select-group>
<!--                  <div class="col-sm-2 form-group">-->
<!--                    <label class="font_normal_body">组织机构</label>-->
<!--                    <res-select :initresid="$parent.$parent.orgid"-->
<!--                                style="width:60%"-->
<!--                                @res-select="$parent.$parent.getRes"-->
<!--                                restype='organization'>-->
<!--                    </res-select>-->
<!--                  </div>-->

                  <div class="col-sm-2 form-group">
                    <label class="font_normal_body">客户类型</label>
                    <v-select :options='$parent.$parent.Gasusertype'
                              :value.sync="model.f_user_type"
                              close-on-select
                              style="width:60%"
                              condition="f_user_type = '{}'"
                              id="f_user_type"
                              placeholder='客户类型'
                              v-model="model.f_user_type"
                              value-single="true">
                    </v-select>
                  </div>
                  <div class="col-sm-2 form-group">
                    <label class="font_normal_body">用气性质</label>
                    <v-select :options='$parent.$parent.Gasproperties'
                              :value.sync="model.f_gasproperties"
                              close-on-select
                              condition="f_gasproperties = '{}'"
                              id="f_gasproperties"
                              placeholder='用气性质'
                              style="width:60%"
                              v-model="model.f_gasproperties"
                              value-single="true">
                    </v-select>
                  </div>
                  <div class="col-sm-2 form-group">
                    <label class="font_normal_body">气表品牌</label>
                    <v-select :value.sync="model.f_meter_brand"
                              v-model="model.f_meter_brand"
                              :options='$parent.$parent.meterbrands' placeholder='请选择'
                              condition="f_meter_brand = '{}'"
                              close-on-select></v-select>
                  </div>
                  <div class="col-sm-2 form-group">
                    <label class="font_normal_body">时间区间</label>
                    <datepicker  :disabled-days-of-Week="[]" :format="'yyyy-MM-dd HH:mm:ss'"
                                :show-reset-button="reset"
                                :value.sync="model.startDate"
                                id="startDate"
                                style="width:60%"
                                placeholder="开始时间"
                                v-model="model.startDate">
                    </datepicker>
                  </div>
                  <div class="col-sm-2 form-group">
                    <label class="font_normal_body" style="word-break:keep-all;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;至&nbsp;&nbsp;&nbsp;</label>
                    <datepicker  :disabled-days-of-Week="[]" :format="'yyyy-MM-dd HH:mm:ss'"
                                :show-reset-button="reset"
                                :value.sync="model.endDate"
                                style="width:60%"
                                id="endDate"
                                style="width:60%"
                                placeholder="结束日期"
                                v-model="model.endDate">
                    </datepicker>
                  </div>
                  <div class="col-sm-2 form-group  flex-row" style="white-space: nowrap">
                    <label class="font_normal_body">&nbsp;&nbsp;&nbsp;用气量&nbsp;</label>
                    <div class="row">
                      <input type="text" style="width:27%" class="input_search" v-model="model.f_oughtamount1"
                             condition="f_oughtamount >= {} " placeholder="">
                      <label class="font_normal_body"> ≤ x ≤ </label>
                      <input type="text" style="width:27%" class="input_search" v-model="model.f_oughtamount2"
                             condition="f_oughtamount <= {} " placeholder="">
                    </div>
                  </div>
                  <!--<div class="col-sm-2 form-group">
                    <label class="font_normal_body">用&nbsp;气&nbsp;量&nbsp;</label>
                    <input  type="text" style="width:60%" class="input_search"
                           v-model="model.f_start_oughtamount" placeholder='起始气量'
                    >
                  </div>
                  <div class="col-sm-2 form-group">
                    <label class="font_normal_body">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;至&nbsp;&nbsp;&nbsp;</label>
                    <input  type="text" style="width:60%" class="input_search"
                           v-model="model.f_end_oughtamount" placeholder='结束气量'
                    >
                  </div>-->
                  <div class="col-sm-2 form-group">
                    <label class="font_normal_body" title="参数：设备类型">用气设备</label>
                    <v-select id="f_meter_brand"
                              v-model="model.f_devices_type"
                              :value.sync="model.f_devices_type"
                              :options='$parent.$parent.devicesTypes'
                              placeholder='请选择'
                              condition="f_devices_type like '%{}%'" :search="false"
                              close-on-select style="width: 60%">
                    </v-select>
                  </div>
                  <div class="col-sm-2 form-group">
                    <label class="font_normal_body">房屋类型</label>
                    <v-select :value.sync="model.f_house_type" v-model="model.f_house_type"
                              :options='$parent.$parent.houseTypes' placeholder='请选择'
                              close-on-select
                              condition="f_house_type = '{}'"></v-select>
                  </div>
                  <div class="col-sm-2 form-group">
                    <label class="font_normal_body">安装位置</label>
                    <v-select :value.sync="model.f_position" v-model="model.f_position"
                              :options='$parent.$parent.positions' placeholder='请选择'
                              condition="f_position = '{}'"
                              close-on-select></v-select>
                  </div>
                  <div class="col-sm-2 form-group  flex-row" style="white-space: nowrap">
                    <label class="font_normal_body">期末结余</label>
                    <div class="row">
                      <input type="text" style="width:27%" class="input_search" v-model="model.f_curbalance1"
                             condition="f_curbalance >= {} " placeholder="">
                      <label class="font_normal_body"> ≤ x ≤ </label>
                      <input type="text" style="width:27%" class="input_search" v-model="model.f_curbalance2"
                             condition="f_curbalance <= {} " placeholder="">
                    </div>
                  </div>
                  <div class="col-sm-2 form-group">
                    <label class="font_normal_body" >档案抄表员</label>
                    <v-select :value.sync="model.f_files_inputtor"
                              v-model="model.f_files_inputtor"
                              :options='$parent.$parent.inputtores' placeholder='请选择'
                              condition="f_files_inputtor = '{}'"
                              close-on-select :search="false">
                    </v-select>
                  </div>
                </div>
              </div>
            </criteria>
            <data-grid :model="model" id="usergasall" partial='list' class="list_area table_sy" v-ref:grid>
              <template partial='head'>
                <tr>
                  <th style="text-align:center">
                    <nobr>客户编号</nobr>
                  </th>
                  <th style="text-align:center">
                    <nobr>客户类型</nobr>
                  </th>
                  <th style="text-align:center">
                    <nobr>用气性质</nobr>
                  </th>
                  <th style="text-align:center">
                    <nobr>用户电话</nobr>
                  </th>
                  <!--<th style="text-align:center"><nobr>用气属性</nobr></th>-->
                  <th style="text-align:center">
                    <nobr>客户名称</nobr>
                  </th>
                  <th style="text-align:center">
                    <nobr>小区</nobr>
                  </th>
                  <th style="text-align:center">
                    <nobr>用气单价</nobr>
                  </th>
                  <th style="text-align:center">
                    <nobr>累购气量</nobr>
                  </th>
                  <th style="text-align:center">
                    <nobr>累购金额</nobr>
                  </th>
                  <th style="text-align:center">
                    <nobr>账号结余</nobr>
                  </th>
                  <th style="text-align:center">
                    <nobr>气表名称</nobr>
                  </th>
                  <th style="text-align:center">
                    <nobr>用气地址</nobr>
                  </th>
                  <th style="text-align:center">
                    <nobr>表号</nobr>
                  </th>
                  <th style="text-align:center">
                    <nobr>期初余额(元)</nobr>
                  </th>
                  <th style="text-align:center">
                    <nobr>上期底数</nobr>
                  </th>
                  <th style="text-align:center">
                    <nobr>本期底数</nobr>
                  </th>
                  <!-- <th style="text-align:center"><nobr>气价(元/m³)</nobr></th>-->
                  <th style="text-align:center">
                    <nobr>用气量(m³)</nobr>
                  </th>
                  <th style="text-align:center">
                    <nobr>用气金额(元)</nobr>
                  </th>
<!--                  <th style="text-align:center">-->
<!--                    <nobr>充值金额(元)</nobr>-->
<!--                  </th>-->
                  <th style="text-align:center">
                    <nobr>期末结余(元)</nobr>
                  </th>
                  <th style="text-align:center">
                    <nobr>档案抄表员</nobr>
                  </th>
                </tr>


              </template>
              <template partial='body'>
                <td>{{row.f_userinfo_code}}</td>
                <td style="text-align:center">{{row.f_user_type}}</td>
                <td style="text-align:center">{{row.f_gasproperties}}</td>
                <td style="text-align:center">{{row.f_user_phone}}</td>
                <!--<td style="text-align:center">{{row.f_gasproperties2}}</td>-->
                <td style="text-align:center">
                  <nobr>{{row.f_user_name}}</nobr>
                </td>
                <td style="text-align:center">
                  <nobr>{{row.f_residential_area}}</nobr>
                </td>
                <td style="text-align:center">
                  <nobr>{{row.f_price}}</nobr>
                </td>
                <td style="text-align:center">{{row.f_total_gas}}</td>
                <td style="text-align:center">{{row.f_total_fee}}</td>
                <td style="text-align:center">{{row.f_balance_amount}}</td>
                <td style="text-align:center">{{row.f_meter_brand}}</td>
                <td>
                  <nobr>{{row.f_address}}</nobr>
                </td>
                <td>{{row.f_meternumber}}</td>
                <td style="text-align:center">{{row.f_balance}}</td>
                <td style="text-align:center">{{row.f_last_tablebase}}</td>
                <td style="text-align:center">{{row.f_tablebase}}</td>
                <!--<td style="text-align:center">{{row.f_avg_price}}</td>-->
                <td style="text-align:center">{{row.f_oughtamount}}</td>
                <td style="text-align:center">{{row.f_oughtfee}}</td>
<!--                <td style="text-align:center">{{row.f_collection}}</td>-->
                <td style="text-align:center">{{row.f_curbalance}}</td>
                <td style="text-align:center">{{row.f_files_inputtor}}</td>
              </template>
            </data-grid>
          </criteria-paged>
          <table class="table-hover">
            <tr style="position: relative" class="table-bordered">
              <td
                style="display: inline-block;width: auto;border-right: 1px solid #F2F6FA;padding: 0px 10px 0px 10px;color: #5CB95C;font-weight: bold">
                汇总信息
              </td>
              <td style="display: inline-block;width: auto;border-right: 1px solid #F2F6FA;padding: 0px 10px 0px 10px;font-weight: bold">
              总累购气量:&emsp;{{model.sums.f_total_gas}}
            </td>
              <td style="display: inline-block;width: auto;border-right: 1px solid #F2F6FA;padding: 0px 10px 0px 10px;font-weight: bold">
                总累购金额:&emsp;{{model.sums.f_total_fee}}
              </td>
              <td style="display: inline-block;width: auto;border-right: 1px solid #F2F6FA;padding: 0px 10px 0px 10px;font-weight: bold">
                总账户结余:&emsp;{{model.sums.f_balance_amount}}
              </td>
              <td style="display: inline-block;width: auto;border-right: 1px solid #F2F6FA;padding: 0px 10px 0px 10px;font-weight: bold">
                本期用气量合计:&emsp;{{model.sums.f_oughtamount}}
              </td>
              <td style="display: inline-block;width: auto;border-right: 1px solid #F2F6FA;padding: 0px 10px 0px 10px;font-weight: bold">
                本期用气金额合计:&emsp;{{model.sums.f_oughtfee}}
              </td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </div>
  <div class="flex-row" v-if="echarts">
    <user-gas-echarts :condition="condition" :echarts="echarts" :enddate="endDate"
                      :groupname="groupname[0]" :startdate="startDate"></user-gas-echarts>
  </div>
  <!--汇总表显示模板-->
  <div class="flex-row" v-if="isActiveTotalForm">
    <user-gas-eform :condition="condition" :enddate="endDate" :startdate="startDate"></user-gas-eform>
  </div>
</template>

<script>
import {HttpResetClass, PagedList} from 'vue-client'
  import UserGasEcharts from '../../components/webmeter/DrillData/UserGasEcharts'
  import * as Util from '../../Util'
  import getLodop from '../../plugins/LodopFuncs'
  import plugins from '../../plugins/GetLoginInfoService'
  import plugin from 'system-clients/src/plugins/GetLoginInfoService'
  let readyGen = async function (self) {
    await self.$MagLoadParams.loadParam()
    self.initParams()
    self.getaddress()
    self.getinputtores()
  }

  export default {
    title: '用气分析',
    props: ['data'],
    components: {UserGasEcharts},
    data() {
      return {
        resshow:['company','slicearea'],
        model: new PagedList('api/af-revenue/sql/webmeter_getUserGasList', 20, {startDate: 'this.model.startDate', endDate: 'this.model.endDate'}, {
          f_oughtamount: 0,
          f_oughtfee: 0,
          f_total_gas: 0,
          f_total_fee: 0,
          f_balance_amount: 0
        }),
        getGroupNameByDate: [
          {label: '年份', value: 'year'},
          {label: '月份', value: 'month'},
          {label: '周', value: 'week'}
        ],
        meterbrands: [],
        residentialArea: [],
        criteriaShow: false,
        reportStr: null,
        show: false,
        initres: {
          org:[this.$login.f.orgid],
          dep:[],
          user:[]
        },
        outlets: [],
        operator: [],
        inputtores: [],
        filename: '',
        searchshow: true,
        startDate: '',
        endDate: '',
        echarts: false,
        isActiveTotalForm: false,
        condition: '1=1',
        getfield: {},
        config: {
          excelHeaders: {
            'f_userinfo_code':'客户编号',
            'f_user_type':'客户类型',
            'f_gasproperties': '用气性质',
            'f_user_name': '客户名称',
            'f_user_phone':'客户电话',
            'f_residential_area': '小区',
            'f_price':'用气单价',
            'f_address':'用气地址',
            'f_meternumber': '表号',
            'f_meter_brand':'气表品牌',
            'f_balance':'期初余额(元)',
            'f_last_tablebase': '上期底数',
            'f_tablebase':'本期底数',
            'f_oughtamount':'用气量(m³)',
            'f_oughtfee':'用气金额(元)',
            'f_curbalance':'期末结余(元)',
            'f_files_inputtor':'档案抄表员'

          }
        },
        groupname: ['day'],
        getgroupname: [
          {label: '年份', value: 'year'},
          {label: '月份', value: 'month'},
          {label: '周', value: 'week'},
          {label: '日', value: 'day'}
        ],
        // orgCondtionStr: ' and h.f_orgid in (' + this.$login.f.orgid + ')',
        orgCondtionStr: '(' + this.$login.f.orgid + ')',
        orgid:[this.$login.f.orgid],
        usetypes: [{label: '全部', value: ''},{label: '是', value: `= '壁挂炉'`},{label: '否', value: `!= '壁挂炉'`}],
        zonesdata:''
      }
    },
    ready() {
        readyGen(this)
      console.log('444444444', Util.addDate(new Date(),-6).substring(0,10))
      this.$refs.paged.$refs.cri.model.startDate = Util.addDate(new Date(),-4).substring(0,10) + ' 00:00:00'
        this.$refs.paged.$refs.cri.model.endDate = Util.toStandardDateString() + ' 23:59:59'
        // this.$refs.paged.$refs.cri.search()
        this.getfield = this.config.excelHeaders

      // 添加回车键监听
      document.addEventListener('keyup', this.handleKeyUp)
    },
    methods: {
      async getinputtores () {
        // 获取抄表员
        let rs = []
        if (this.$login.f.f_gasman.length > 0) {
          for (let i = 0; i < this.$login.f.f_gasman.length; i++) {
            let temp = {
              label: this.$login.f.f_gasman[i].name,
              value: this.$login.f.f_gasman[i].name
            }
            rs.push(temp)
          }
        }
        this.inputtores = [{label: '全部', value: ''}, ...rs]
      },

      // 添加处理回车键的方法
      handleKeyUp(e) {
        if (e.key === 'Enter') {
          this.search()
        }
      },
      // 查询开关
      hidden() {
        this.criteriaShow = !this.criteriaShow
      },
      async  getaddress(){
        let HttpReset = new HttpResetClass()
        var data = await HttpReset.load('POST', 'api/af-revenue/sql/manage_getarealist', {
          data: {
            condition: `1=1 and s.f_orgid = '${this.$login.f.orgid}'`
          }
        }, {resolveMsg: null, rejectMsg: '获取小区失败!'})
        console.log('小区',data)
        let house = [{label: '全部', value: ''}]
        for (let row of data.data){
          house.push({label: row.f_residential_area, value: row.f_residential_area})
        }
        this.residentialArea = house
      },
      SaveAsFile(str) {
        this.$showMessage('您是否需要导出本页数据？', ['confirm', 'cancel']).then((res) => {
          if (res === 'confirm') {
            let style = '<style>' +
              'td {border-width: 1px;padding: 2px;border-style: solid; border-color:black; border-collapse:collapse;} .tdright{text-align: right;}  .tdcenter{text-align: center;}</style>';
            let strHtml = style + document.getElementById(str).innerHTML;
            console.log(strHtml);
            let LODOP = getLodop();
            LODOP.PRINT_INIT('');
            LODOP.ADD_PRINT_TABLE(5, 5, '99%', '100%', strHtml);
            LODOP.SAVE_TO_FILE('用气分析.xls')
          }
        })
      },
      clearmsg() {
        // this.$refs.paged.$refs.cri.model = {}
        Object.keys(this.$refs.paged.$refs.cri.model).forEach((key) => {
          console.log(this.$refs.paged.$refs.cri.model[key])
          this.$refs.paged.$refs.cri.model[key] = []
        })
      },
      initParams() {
        // 初始化气表品牌
        let brandArr = []
        this.$MagGetSaleParam.getGasbrand().forEach((item) => {
          if (item.value.f_meter_type == '物联网表') {
            let temp = {}
            temp.label = item.label
            temp.value = item.value.f_meter_brand
            brandArr.push(temp)
          }
        })
        this.meterbrands = [{label: '全部', value: ''}, ...brandArr]

      },
      search(args) {
        this.startDate = this.$refs.paged.$refs.cri.model.startDate
        this.endDate = this.$refs.paged.$refs.cri.model.endDate
        if (this.endDate == '' || this.startDate == '') {
          return this.$showMessage("时间区间的开始和结束时间不能为空！")
        }
        // this.condition = this.$refs.paged.$refs.cri.condition + ` ${this.orgCondtionStr}`
        if (this.orgCondtionStr)
          this.condition = this.$refs.paged.$refs.cri.condition + ` and f_orgid in ${this.orgCondtionStr}`
        else
          this.condition = this.$refs.paged.$refs.cri.condition + ` and f_orgid = '${this.$login.f.orgid}'`
        if(this.zonesdata){
          this.condition = this.$refs.paged.$refs.cri.condition + ` and ${this.zonesdata}`
        }
        args.condition = this.condition
        this.model.search(args.condition, args.model)
      },
      // 显示柱状图
      showEcharts() {
        this.echarts = true
        this.isActiveTotalForm = false
      },
      notShowTotalForm() {
        this.echarts = false
        this.isActiveTotalForm = false
      },
      // 不显示柱状图
      notShowEcharts() {
        this.echarts = false
        this.isActiveTotalForm = false
      },
      // 显示汇总数据表格
      showTotalForm() {
        this.echarts = false
        this.isActiveTotalForm = true
      },
      close() {
        this.show = false
      },
      getRes(obj) {
        this.orgCondtionStr = plugins.convertToIn(obj)
        if(obj.indexOf("f_zones = ")>0){
          this.zonesdata = obj.substring(obj.indexOf("f_zones = "))
        }else{
          this.zonesdata='';
        }
      },
      getorg(obj) {
        this.orgCondtionStr = plugin.convertToIn(obj.resids)?plugin.convertToIn(obj.resids):'(' + this.$login.f.orgid + ')'
      },
      getCondition () {
        return {
          condition: this.condition,
          startDate: this.startDate,
          endDate: this.endDate
        }
      }
      // getRes(condition,obj) {
      //   this.orgCondtionStr = condition
      //   this.orgname = obj.orgnames[0]
      //   this.depname = obj.depnames[0]
      // }
    },
    watch: {
      'data'(val) {
        if (val.f_files_path) {
          this.getFileContent(val.f_files_path)
        } else {
          this.reportStr = null
        }
      }
    },
    computed: {
      houseTypes() {
        return [{label: '全部', value: ''}, ...this.$appdata.getParam('房屋类型')]
      },
      positions() {
        return [{label: '全部', value: ''}, ...this.$appdata.getParam('安装位置')]
      },
      Gasusertype() {
        return [{label: '全部', value: ''}, ...this.$appdata.getParam('用户类型')]
      },
      valveStatus() {
        return [{label: '全部', value: ''}, ...this.$appdata.getParam('气表类型')]
      },
      devicesTypes() {
        return [{label: ' 全部  ', value: ''}, ...this.$appdata.getParam('设备类型')]
      },
      Gasproperties() {
        return [{label: '全部', value: ''}, ...this.$appdata.getParam('用气性质')]
      }
    },
    beforeDestroy() {
      // 组件销毁前移除事件监听
      document.removeEventListener('keyup', this.handleKeyUp)
    }
  }
</script>
<style>
  .mystyle {
    float: right;
    padding-right: 10%;
  }

  .mystyle1 {
    padding-top: 10px;

  }

  .mystyle2 {
    width: 100%;
    height: 35px;
    /*background: #00A3F0;*/
    padding-left: 15px;
    float: left;
  }

  .datapanel {
    color: #333;
    background-color: white;
    box-shadow: darkgrey 0.5px 0.5px 0.5px 0.5px;
    padding: 10px 10px 10px 10px;
    border-radius: 15px;
  }
</style>
