manage-client 3.2.42 → 3.2.43

package/src/filiale/macheng/MeterQuery.vue

@@ -237,6 +237,15 @@
                               close-on-select
                               condition="f_meter_book_num = '{}'"></v-select>
                   </div>
+                  <div class="col-sm-2 form-group">
+                    <label class="font_normal_body" >阀门状态</label>
+                    <v-select :value.sync="model.f_valve_state"
+                              v-model="model.f_valve_state"
+                              :options='$parent.$parent.valveState' placeholder='请选择'
+                              condition="f_valve_state = '{}'"
+                              close-on-select :value-single="true" :search="false">
+                    </v-select>
+                  </div>
 
                 </div>
               </div>
@@ -907,6 +916,9 @@
       },
       meterstylenew(){
         return [{label: '全部', value: ''}, ...this.$appdata.getParam('气表型号查询用')]
+      },
+      valveState(){
+        return [{label: '全部', value: ''}, ...this.$appdata.getParam('阀门状态')]
       }
     }
   }

package/src/filiale/meihekou/UserGasEform.vue

@@ -1,267 +1,267 @@
-<template lang="html">
-  <div class="basic-main" id="unit" style="height: 99%">
-    <div class="form-horizontal select-overspread container-fluid auto" novalidate partial>
-    <div class="row">
-      <div class="col-sm-1 form-group">
-        <label class="font_normal_body">汇总项</label>
-      </div>
-      <div class="col-sm-1 form-group">
-        <input id="year" type="checkbox" checked v-model="nameForSql" value="year"/>
-        <label class="font_normal_body" for="year">年份</label>
-      </div>
-      <div class="col-sm-1 form-group">
-        <input id="month" type="checkbox" v-model="nameForSql" value="month"/>
-        <label class="font_normal_body" for="month">月份</label>
-      </div>
-      <div class="col-sm-1 form-group">
-        <input id="week" type="checkbox" v-model="nameForSql" value="week"/>
-        <label class="font_normal_body" for="week">周</label>
-      </div>
-      <div class="col-sm-1 form-group">
-        <input id="day" type="checkbox" v-model="nameForSql" value="day"/>
-        <label class="font_normal_body" for="day">日</label>
-      </div>
-      <div class="col-sm-1 form-group">
-        <input id="f_userType" type="checkbox" v-model="nameForSql" value="f_user_type"/>
-        <label class="font_normal_body" for="f_userType">用户类型</label>
-      </div>
-      <div class="col-sm-1 form-group">
-        <input id="f_gasproperties" type="checkbox" v-model="nameForSql" value="f_gasproperties"/>
-        <label class="font_normal_body" for="f_gasproperties">用气性质</label>
-      </div>
-      <div class="col-sm-1 form-group">
-        <input id="f_meter_brand" type="checkbox" v-model="nameForSql" value="f_meter_brand"/>
-        <label class="font_normal_body" for="f_meter_brand">气表品牌</label>
-      </div>
-      <div class="col-sm-1 form-group">
-        <input id="f_orgname" type="checkbox" v-model="nameForSql" value="f_orgname"/>
-        <label class="font_normal_body" for="f_orgname">组织机构</label>
-      </div>
-
-      <span style="float: right">
-          <button @click="searchData" class="button_search button_spacing">查询</button>
-         <button @click="$parent.notShowTotalForm()" class="button_clear button_spacing" style="width: max-content">隐藏汇总</button>
-          <export-excel :data="getCondition" class="button_export button_spacing"
-               :field="getfield"
-               sqlurl="rs/logic/exportfile" sql-name="webmeter_getUserGasSum" template-name='用气分析汇总'
-               :choose-col="true"></export-excel>
-
-        <!--<rexport-excel class="button_export button_spacing" id="table" style="width: 28%"></rexport-excel>-->
-        <report-print class="button_export button_spacing" height='100%' id="table" left='0' top='3cm'
-                      width='100%'></report-print></span>
-    </div>
-  </div>
-    <div id="table" style="height:90%;overflow-y: scroll">
-      <table class="table table-bordered">
-        <thead class="text-left">
-        <tr style="text-align:center">
-          <p style="padding: 8px;text-align:center;width: 100%" class="font_normal_body">用户用气汇总</p>
-        </tr>
-        <tr>
-          <th style="text-align:center" v-if="nameForSql.includes('year')">年份</th>
-          <th style="text-align:center" v-if="nameForSql.includes('month')">月份</th>
-          <th style="text-align:center" v-if="nameForSql.includes('week')">周</th>
-          <th style="text-align:center" v-if="nameForSql.includes('day')">日</th>
-          <th style="text-align:center" v-if="nameForSql.includes('f_user_type')">用户类型</th>
-          <th style="text-align:center" v-if="nameForSql.includes('f_gasproperties')">用气性质</th>
-          <th style="text-align:center" v-if="nameForSql.includes('f_meter_brand')">气表品牌</th>
-          <th style="text-align:center" v-if="nameForSql.includes('f_orgname')">组织机构</th>
-          <th style="text-align:center">
-            <nobr>总用气气量(m³)</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>一阶总金额(元)</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>三阶总气量(m³)</nobr></th>-->
-          <!--<th style="text-align:center"><nobr>三阶总金额(元)</nobr></th>-->
-        </tr>
-        </thead>
-        <tbody>
-
-        <tr v-for="item in model.rows">
-          <td style="text-align:center" v-if="nameForSql.includes('year')">{{item.year}}</td>
-          <td style="text-align:center" v-if="nameForSql.includes('month')">{{item.month}}</td>
-          <td style="text-align:center" v-if="nameForSql.includes('week')">{{item.week}}</td>
-          <td style="text-align:center" v-if="nameForSql.includes('day')">{{item.day}}</td>
-          <td style="text-align:center" v-if="nameForSql.includes('f_user_type')">{{item.f_user_type}}</td>
-          <td style="text-align:center" v-if="nameForSql.includes('f_gasproperties')">{{item.f_gasproperties}}</td>
-          <td style="text-align:center" v-if="nameForSql.includes('f_meter_brand')">{{item.f_meter_brand}}</td>
-          <td style="text-align:center" v-if="nameForSql.includes('f_orgname')">{{item.f_orgname}}</td>
-          <td style="text-align:center">{{item.f_oughtamount}}</td>
-          <td style="text-align:center">{{item.f_oughtfee}}</td>
-          <!--<td style="text-align:center">{{item.f_gas1}}</td>-->
-          <!--<td style="text-align:center">{{item.f_money1}}</td>-->
-          <!--<td style="text-align:center">{{item.f_gas2}}</td>-->
-          <!--<td style="text-align:center">{{item.f_money2}}</td>-->
-          <!--<td style="text-align:center">{{item.f_gas3}}</td>-->
-          <!--<td style="text-align:center">{{item.f_money3}}</td>-->
-        </tr>
-        </tbody>
-      </table>
-    </div>
-    <div style="height: 10%;">
-      <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;{{sumsmodel.f_gas1}}
-          </td>
-          <td style="display: inline-block;width: auto;border-right: 1px solid #F2F6FA;padding: 0px 10px 0px 10px;font-weight: bold">
-            一阶气费合计:&emsp;{{sumsmodel.f_money1}}
-          </td>
-          <td style="display: inline-block;width: auto;border-right: 1px solid #F2F6FA;padding: 0px 10px 0px 10px;font-weight: bold">
-            二阶气量合计:&emsp;{{sumsmodel.f_gas2}}
-          </td>
-          <td style="display: inline-block;width: auto;border-right: 1px solid #F2F6FA;padding: 0px 10px 0px 10px;font-weight: bold">
-            二阶气费合计:&emsp;{{sumsmodel.f_money2}}
-          </td>
-          <td style="display: inline-block;width: auto;border-right: 1px solid #F2F6FA;padding: 0px 10px 0px 10px;font-weight: bold">
-            三阶气量合计:&emsp;{{sumsmodel.f_gas3}}
-          </td>
-          <td style="display: inline-block;width: auto;border-right: 1px solid #F2F6FA;padding: 0px 10px 0px 10px;font-weight: bold">
-            三阶气费合计:&emsp;{{sumsmodel.f_money3}}
-          </td>
-        </tr>
-      </table>
-    </div>
-  </div>
-
-</template>
-
-<script>
-import {DataModel, HttpResetClass, PagedList} from 'vue-client'
-  import * as Util from '../../Util'
-
-  export default {
-    props: {
-      startdate: {
-        type: String
-      },
-      enddate: {
-        type: String
-      },
-      condition: {
-        type: String,
-        default: '1=1'
-      }
-      // groupNameByDate: {
-      //   type: [],
-      //   default:['year']
-      // }
-    },
-    data() {
-      return {
-        model2: null,
-        model: new PagedList('rs/sql/webmeter_getUserGasSum',999999999, {groupname: 'this.model.groupname',startDate: 'this.model.startDate',endDate: 'this.model.endDate'},{
-          f_gas1: 0,
-          f_money1: 0,
-          f_gas2: 0,
-          f_money2: 0,
-          f_gas3: 0,
-          f_money3: 0
-        }),
-        sumsmodel: {},
-        conditionForSql: '1=1',
-        nameForSql: [],
-        groupNameForSql: '',
-        exportfield:{"year":"年份","month":"月份","week":"周","day":"日",
-         "f_user_type":"用户类型","f_gasproperties":"用气性质","f_meter_brand":"气表品牌","f_orgname":"组织机构"}
-      }
-    },
-    ready() {
-      this.nameForSql=['year']
-      this.groupNameForSql= 'year'
-      this.conditionForSql = this.condition
-      this.searchData()
-    },
-    methods: {
-      async searchData() {
-        console.log(this.groupNameForSql)
-        if (this.groupNameForSql&& this.groupNameForSql !== 'undefined') {
-          this.model.condition = this.conditionForSql
-          this.model.groupname = this.groupNameForSql
-          this.model.startDate = this.startdate.length === 10 ? this.startdate + ' 00:00:00' : this.startdate
-          this.model.endDate = this.enddate.length === 10 ? this.enddate + ' 23:59:59' : this.enddate
-          this.model.search(this.conditionForSql, this.model)
-          this.sumsmodel = this.model.model.sums;
-          // let load = new HttpResetClass()
-          // let res = await load.load('POST', 'rs/sql/webmeter_getUserGasSum',
-          //   {data: {condition: this.conditionForSql, groupname: this.groupNameForSql}},
-          //   {resolveMsg: null, rejectMsg: null})
-          // console.log('res返回', res)
-          // this.model2 = res.data
-          // console.log('res返回123', this.model2)
-        } else {
-          this.$showAlert('请选择汇总项', 'warning', 3000)
-        }
-      },
-      //拼接groupName1
-      getGroupName1() {
-        console.log("this.nameForSql.length：" + this.nameForSql.length)
-        let str = ''
-        let i = 0
-        for (; i < this.nameForSql.length - 1; i++) {
-          str += this.nameForSql[i] + ','
-        }
-        str += this.nameForSql[i]
-        this.groupNameForSql = str.trim()
-      }
-    },
-    computed: {
-      // usertypes () {
-      //   return this.$appdate.getParams("客户类型")
-      // },
-      getfield(){
-        var fields={}
-        let i = 0
-        for (; i < this.nameForSql.length; i++) {
-          if(this.nameForSql[i] in this.exportfield ){
-            fields[this.nameForSql[i]]=this.exportfield[this.nameForSql[i]]
-          }
-        }
-        fields.f_oughtamount="总用气气量(m³)"
-        fields.f_oughtfee="总用气金额(元)"
-        return fields
-      },
-      getCondition() {
-        return {
-          condition: this.conditionForSql,
-          groupname: this.groupNameForSql
-
-        }
-      }
-      },
-    watch: {
-      'nameForSql'() {
-        // this.nameForSql =this.groupNameByDate;
-        this.getGroupName1()
-      }
-    }
-  }
-</script>
-
-<style scoped>
-  .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 30px 10px 30px;
-    border-radius: 15px;
-  }
-
-</style>
+<template lang="html">
+  <div class="basic-main" id="unit" style="height: 99%">
+    <div class="form-horizontal select-overspread container-fluid auto" novalidate partial>
+    <div class="row">
+      <div class="col-sm-1 form-group">
+        <label class="font_normal_body">汇总项</label>
+      </div>
+      <div class="col-sm-1 form-group">
+        <input id="year" type="checkbox" checked v-model="nameForSql" value="year"/>
+        <label class="font_normal_body" for="year">年份</label>
+      </div>
+      <div class="col-sm-1 form-group">
+        <input id="month" type="checkbox" v-model="nameForSql" value="month"/>
+        <label class="font_normal_body" for="month">月份</label>
+      </div>
+      <div class="col-sm-1 form-group">
+        <input id="week" type="checkbox" v-model="nameForSql" value="week"/>
+        <label class="font_normal_body" for="week">周</label>
+      </div>
+      <div class="col-sm-1 form-group">
+        <input id="day" type="checkbox" v-model="nameForSql" value="day"/>
+        <label class="font_normal_body" for="day">日</label>
+      </div>
+      <div class="col-sm-1 form-group">
+        <input id="f_userType" type="checkbox" v-model="nameForSql" value="f_user_type"/>
+        <label class="font_normal_body" for="f_userType">用户类型</label>
+      </div>
+      <div class="col-sm-1 form-group">
+        <input id="f_gasproperties" type="checkbox" v-model="nameForSql" value="f_gasproperties"/>
+        <label class="font_normal_body" for="f_gasproperties">用气性质</label>
+      </div>
+      <div class="col-sm-1 form-group">
+        <input id="f_meter_brand" type="checkbox" v-model="nameForSql" value="f_meter_brand"/>
+        <label class="font_normal_body" for="f_meter_brand">气表品牌</label>
+      </div>
+      <div class="col-sm-1 form-group">
+        <input id="f_orgname" type="checkbox" v-model="nameForSql" value="f_orgname"/>
+        <label class="font_normal_body" for="f_orgname">组织机构</label>
+      </div>
+
+      <span style="float: right">
+          <button @click="searchData" class="button_search button_spacing">查询</button>
+         <button @click="$parent.notShowTotalForm()" class="button_clear button_spacing" style="width: max-content">隐藏汇总</button>
+          <export-excel :data="getCondition" class="button_export button_spacing"
+               :field="getfield"
+               sqlurl="rs/logic/exportfile" sql-name="webmeter_getUserGasSum" template-name='用气分析汇总'
+               :choose-col="true"></export-excel>
+
+        <!--<rexport-excel class="button_export button_spacing" id="table" style="width: 28%"></rexport-excel>-->
+        <report-print class="button_export button_spacing" height='100%' id="table" left='0' top='3cm'
+                      width='100%'></report-print></span>
+    </div>
+  </div>
+    <div id="table" style="height:90%;overflow-y: scroll">
+      <table class="table table-bordered">
+        <thead class="text-left">
+        <tr style="text-align:center">
+          <p style="padding: 8px;text-align:center;width: 100%" class="font_normal_body">用户用气汇总</p>
+        </tr>
+        <tr>
+          <th style="text-align:center" v-if="nameForSql.includes('year')">年份</th>
+          <th style="text-align:center" v-if="nameForSql.includes('month')">月份</th>
+          <th style="text-align:center" v-if="nameForSql.includes('week')">周</th>
+          <th style="text-align:center" v-if="nameForSql.includes('day')">日</th>
+          <th style="text-align:center" v-if="nameForSql.includes('f_user_type')">用户类型</th>
+          <th style="text-align:center" v-if="nameForSql.includes('f_gasproperties')">用气性质</th>
+          <th style="text-align:center" v-if="nameForSql.includes('f_meter_brand')">气表品牌</th>
+          <th style="text-align:center" v-if="nameForSql.includes('f_orgname')">组织机构</th>
+          <th style="text-align:center">
+            <nobr>总用气气量(m³)</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>一阶总金额(元)</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>三阶总气量(m³)</nobr></th>-->
+          <!--<th style="text-align:center"><nobr>三阶总金额(元)</nobr></th>-->
+        </tr>
+        </thead>
+        <tbody>
+
+        <tr v-for="item in model.rows">
+          <td style="text-align:center" v-if="nameForSql.includes('year')">{{item.year}}</td>
+          <td style="text-align:center" v-if="nameForSql.includes('month')">{{item.month}}</td>
+          <td style="text-align:center" v-if="nameForSql.includes('week')">{{item.week}}</td>
+          <td style="text-align:center" v-if="nameForSql.includes('day')">{{item.day}}</td>
+          <td style="text-align:center" v-if="nameForSql.includes('f_user_type')">{{item.f_user_type}}</td>
+          <td style="text-align:center" v-if="nameForSql.includes('f_gasproperties')">{{item.f_gasproperties}}</td>
+          <td style="text-align:center" v-if="nameForSql.includes('f_meter_brand')">{{item.f_meter_brand}}</td>
+          <td style="text-align:center" v-if="nameForSql.includes('f_orgname')">{{item.f_orgname}}</td>
+          <td style="text-align:center">{{item.f_oughtamount}}</td>
+          <td style="text-align:center">{{item.f_oughtfee}}</td>
+          <!--<td style="text-align:center">{{item.f_gas1}}</td>-->
+          <!--<td style="text-align:center">{{item.f_money1}}</td>-->
+          <!--<td style="text-align:center">{{item.f_gas2}}</td>-->
+          <!--<td style="text-align:center">{{item.f_money2}}</td>-->
+          <!--<td style="text-align:center">{{item.f_gas3}}</td>-->
+          <!--<td style="text-align:center">{{item.f_money3}}</td>-->
+        </tr>
+        </tbody>
+      </table>
+    </div>
+    <div style="height: 10%;">
+      <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;{{sumsmodel.f_gas1}}
+          </td>
+          <td style="display: inline-block;width: auto;border-right: 1px solid #F2F6FA;padding: 0px 10px 0px 10px;font-weight: bold">
+            一阶气费合计:&emsp;{{sumsmodel.f_money1}}
+          </td>
+          <td style="display: inline-block;width: auto;border-right: 1px solid #F2F6FA;padding: 0px 10px 0px 10px;font-weight: bold">
+            二阶气量合计:&emsp;{{sumsmodel.f_gas2}}
+          </td>
+          <td style="display: inline-block;width: auto;border-right: 1px solid #F2F6FA;padding: 0px 10px 0px 10px;font-weight: bold">
+            二阶气费合计:&emsp;{{sumsmodel.f_money2}}
+          </td>
+          <td style="display: inline-block;width: auto;border-right: 1px solid #F2F6FA;padding: 0px 10px 0px 10px;font-weight: bold">
+            三阶气量合计:&emsp;{{sumsmodel.f_gas3}}
+          </td>
+          <td style="display: inline-block;width: auto;border-right: 1px solid #F2F6FA;padding: 0px 10px 0px 10px;font-weight: bold">
+            三阶气费合计:&emsp;{{sumsmodel.f_money3}}
+          </td>
+        </tr>
+      </table>
+    </div>
+  </div>
+
+</template>
+
+<script>
+import {DataModel, HttpResetClass, PagedList} from 'vue-client'
+  import * as Util from '../../Util'
+
+  export default {
+    props: {
+      startdate: {
+        type: String
+      },
+      enddate: {
+        type: String
+      },
+      condition: {
+        type: String,
+        default: '1=1'
+      }
+      // groupNameByDate: {
+      //   type: [],
+      //   default:['year']
+      // }
+    },
+    data() {
+      return {
+        model2: null,
+        model: new PagedList('rs/sql/webmeter_getUserGasSum',999999999, {groupname: 'this.model.groupname',startDate: 'this.model.startDate',endDate: 'this.model.endDate'},{
+          f_gas1: 0,
+          f_money1: 0,
+          f_gas2: 0,
+          f_money2: 0,
+          f_gas3: 0,
+          f_money3: 0
+        }),
+        sumsmodel: {},
+        conditionForSql: '1=1',
+        nameForSql: [],
+        groupNameForSql: '',
+        exportfield:{"year":"年份","month":"月份","week":"周","day":"日",
+         "f_user_type":"用户类型","f_gasproperties":"用气性质","f_meter_brand":"气表品牌","f_orgname":"组织机构"}
+      }
+    },
+    ready() {
+      this.nameForSql=['year']
+      this.groupNameForSql= 'year'
+      this.conditionForSql = this.condition
+      this.searchData()
+    },
+    methods: {
+      async searchData() {
+        console.log(this.groupNameForSql)
+        if (this.groupNameForSql&& this.groupNameForSql !== 'undefined') {
+          this.model.condition = this.conditionForSql
+          this.model.groupname = this.groupNameForSql
+          this.model.startDate = this.startdate.length === 10 ? this.startdate + ' 00:00:00' : this.startdate
+          this.model.endDate = this.enddate.length === 10 ? this.enddate + ' 23:59:59' : this.enddate
+          this.model.search(this.conditionForSql, this.model)
+          this.sumsmodel = this.model.model.sums;
+          // let load = new HttpResetClass()
+          // let res = await load.load('POST', 'rs/sql/webmeter_getUserGasSum',
+          //   {data: {condition: this.conditionForSql, groupname: this.groupNameForSql}},
+          //   {resolveMsg: null, rejectMsg: null})
+          // console.log('res返回', res)
+          // this.model2 = res.data
+          // console.log('res返回123', this.model2)
+        } else {
+          this.$showAlert('请选择汇总项', 'warning', 3000)
+        }
+      },
+      //拼接groupName1
+      getGroupName1() {
+        console.log("this.nameForSql.length：" + this.nameForSql.length)
+        let str = ''
+        let i = 0
+        for (; i < this.nameForSql.length - 1; i++) {
+          str += this.nameForSql[i] + ','
+        }
+        str += this.nameForSql[i]
+        this.groupNameForSql = str.trim()
+      }
+    },
+    computed: {
+      // usertypes () {
+      //   return this.$appdate.getParams("客户类型")
+      // },
+      getfield(){
+        var fields={}
+        let i = 0
+        for (; i < this.nameForSql.length; i++) {
+          if(this.nameForSql[i] in this.exportfield ){
+            fields[this.nameForSql[i]]=this.exportfield[this.nameForSql[i]]
+          }
+        }
+        fields.f_oughtamount="总用气气量(m³)"
+        fields.f_oughtfee="总用气金额(元)"
+        return fields
+      },
+      getCondition() {
+        return {
+          condition: this.conditionForSql,
+          groupname: this.groupNameForSql
+
+        }
+      }
+      },
+    watch: {
+      'nameForSql'() {
+        // this.nameForSql =this.groupNameByDate;
+        this.getGroupName1()
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  .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 30px 10px 30px;
+    border-radius: 15px;
+  }
+
+</style>