manage-client 3.1.14 → 3.1.17

package/src/components/webmeter/DrillData/UserGasAll.vue

@@ -1,596 +1,596 @@
-<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>
-                <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-2 form-group">
-                    <label class="font_normal_body">表&emsp;&emsp;号</label>
-                    <input  style="width:60%" class="input_search" condition="f_meternumber = '{}'" placeholder='表号' type="text"
-                            v-el:meternumber v-model="model.f_meternumber" v-next-el='meternumber'
-                    >
-                  </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="rs/logic/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">
-                    <label class="font_normal_body">公&emsp;&emsp;司</label>
-                    <right-tree @re-res="$parent.$parent.getorg"
-                                :initresid='$parent.$parent.orgid'></right-tree>
-                  </div>
-<!--                  <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">壁&ensp;挂&ensp;炉</label>
-                    <v-select id="f_meter_brand"
-                              v-model="model.f_usetype"
-                              placeholder=''
-                              :value.sync="model.f_usetype"
-                              :options='$parent.$parent.usetypes'
-                              condition="f_usetype {}" :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>
-              </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>
-                </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>
-              </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-show="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 './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()
-  }
-
-  export default {
-    title: '用气分析',
-    props: ['data'],
-    components: {UserGasEcharts},
-    data() {
-      return {
-        model: new PagedList('rs/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: [],
-        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':'期末结余(元)'
-
-          }
-        },
-        groupname: ['year'],
-        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: `!= '壁挂炉'`}]
-      }
-    },
-    ready() {
-        readyGen(this)
-        this.$refs.paged.$refs.cri.model.startDate = Util.toStandardDateString() + ' 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
-    },
-    methods: {
-      // 查询开关
-      hidden() {
-        this.criteriaShow = !this.criteriaShow
-      },
-      async  getaddress(){
-        let HttpReset = new HttpResetClass()
-        var data = await HttpReset.load('POST', 'rs/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 = {}
-      },
-      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}`
-        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)
-      },
-      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('气表类型')]
-      },
-      Gasproperties() {
-        return [{label: '全部', value: ''}, ...this.$appdata.getParam('用气性质')]
-      }
-    }
-  }
-</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>
+<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>
+                <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-2 form-group">
+                    <label class="font_normal_body">表&emsp;&emsp;号</label>
+                    <input  style="width:60%" class="input_search" condition="f_meternumber = '{}'" placeholder='表号' type="text"
+                            v-el:meternumber v-model="model.f_meternumber" v-next-el='meternumber'
+                    >
+                  </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="rs/logic/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">
+                    <label class="font_normal_body">公&emsp;&emsp;司</label>
+                    <right-tree @re-res="$parent.$parent.getorg"
+                                :initresid='$parent.$parent.orgid'></right-tree>
+                  </div>
+<!--                  <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">壁&ensp;挂&ensp;炉</label>
+                    <v-select id="f_meter_brand"
+                              v-model="model.f_usetype"
+                              placeholder=''
+                              :value.sync="model.f_usetype"
+                              :options='$parent.$parent.usetypes'
+                              condition="f_usetype {}" :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>
+              </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>
+                </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>
+              </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-show="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 './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()
+  }
+
+  export default {
+    title: '用气分析',
+    props: ['data'],
+    components: {UserGasEcharts},
+    data() {
+      return {
+        model: new PagedList('rs/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: [],
+        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':'期末结余(元)'
+
+          }
+        },
+        groupname: ['year'],
+        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: `!= '壁挂炉'`}]
+      }
+    },
+    ready() {
+        readyGen(this)
+        this.$refs.paged.$refs.cri.model.startDate = Util.toStandardDateString() + ' 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
+    },
+    methods: {
+      // 查询开关
+      hidden() {
+        this.criteriaShow = !this.criteriaShow
+      },
+      async  getaddress(){
+        let HttpReset = new HttpResetClass()
+        var data = await HttpReset.load('POST', 'rs/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 = {}
+      },
+      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}`
+        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)
+      },
+      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('气表类型')]
+      },
+      Gasproperties() {
+        return [{label: '全部', value: ''}, ...this.$appdata.getParam('用气性质')]
+      }
+    }
+  }
+</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>