safecheck-client 3.0.33-103 → 3.0.33-106

package/src/filiale/bayan/android/CheckPlanDown.vue

@@ -0,0 +1,249 @@
+<template>
+  <div class="auto">
+
+    <div class="auto">
+      <criteria-paged :model="model" v-ref:paged>
+        <criteria partial='criteria' @condition-changed='$parent.selfSearch' v-ref:cri>
+          <div partial>
+            <div class="row app-row">
+              <div class="col-xs-4">
+                <img src="../../../assets/档案信息.png" style="width: 20px;margin-bottom: 5px" alt="">
+                <label for="f_plan_name" class="font text-left">计划名称：</label>
+              </div>
+              <div class="col-xs-8">
+                <input id="f_plan_name" class="search_input input-font" v-model="model.f_plan_name"
+                       condition="f_plan_name like '%{}%'" />
+              </div>
+            </div>
+            <div class="row text-center" style="margin-top: 20px;">
+              <button type="button" class="btn btn-lg btn-font btn-color" style="width: 45%;"
+                      @click="search">查询</button>
+            </div>
+            <!--<div class="row app-btn">-->
+            <!--<button class="btn btn-primary col-xs-6" type="button"  @click="search"><span class="glyphicon  glyphicon-search" style="margin-right: 20px;">查询</span></button>-->
+            <!--</div>-->
+            <div style="height:30px;"></div>
+          </div>
+        </criteria>
+        <list :model="model" partial='list'>
+          <div partial>
+            <div class="auto app-text" style="margin-top: 5px;">
+              <div class="panel" style="padding: 10px 10px 5px 10px;">
+                <div class="panel-body panel-self">
+                  <div class="row">
+                    <p class="panel-title col-xs-4 text-left font">计划名称</p>
+                    <p class="panel-title col-xs-8 text-left input-font">{{ row.f_plan_name }}</p>
+                  </div>
+                  <div class="row">
+                    <p class="panel-title col-xs-4 text-left font">计划时间</p>
+                    <p class="panel-title col-xs-8 text-left input-font">{{ row.f_plan_year }}/{{ row.f_plan_month }}</p>
+                  </div>
+                  <!--<div class="row">-->
+                  <!--<p class="panel-title col-xs-4 text-left font">生成人员</p>-->
+                  <!--<p class="panel-title col-xs-8 text-left input-font">{{ row.f_create_operator }}/{{row.f_plan_month}}</p>-->
+                  <!--</div>-->
+                  <!--<div class="row">-->
+                  <!--<p class="panel-title col-xs-4 text-left font">下发人员</p>-->
+                  <!--<p class="panel-title col-xs-8 text-left input-font">{{ row.f_send_operator }}/{{row.f_plan_month}}</p>-->
+                  <!--</div>-->
+                  <div class="row text-right">
+                    <button type="button" class="btn yybtn-color"
+                            v-on:click.stop.prevent='$parent.$parent.$parent.downloadHand(row)'
+                            v-if="$parent.$parent.$parent.isDown(row)">下载</button>&nbsp;
+                  </div>
+                </div>
+              </div>
+
+            </div>
+          </div>
+        </list>
+      </criteria-paged>
+    </div>
+    <!--<div class="row text-center" style="margin-top: 20px;">-->
+    <!--<button type="' 正在进行共享计划下载，请确认！' btn-lg btn-font btn-color" style="width: 45%;" @click="downHand()">共享计划下载</button>-->
+    <!--&lt;!&ndash;<button type="button" class="btn btn-lg btn-font btn-color" style="width: 45%;" @click="database()">数据库导出</button>&ndash;&gt;-->
+    <!--</div>-->
+    <!-- <div class="auto" style="padding-top: 20px;" v-if='show'>
+      <p class="text-warning" style="padding: 0 10px">正在下载抄表单...</p>
+    </div> -->
+    <!-- <hand-info v-if="show" :data="handinfo"></hand-info> -->
+    <!-- <div class="auto" v-if="!show">
+      <p class="text-warning" style="padding: 0 10px">
+        暂无可操作的抄表信息
+      </p>
+    </div> -->
+  </div>
+  <!--  <back-page :need-back='true'  @flag="$back()"></back-page>-->
+</template>
+<script>
+
+import { PagedList,HttpResetClass } from 'vue-client'
+
+import Vue from 'vue'
+
+
+export default {
+  title: '共享计划下载',
+  data() {
+    return {
+      model: new PagedList(`${this.$androidUtil.getProxyUrl()}/rs/sql/getShareCheckPlan`, 5, { f_fengongsi: `'${Vue.user.orgid}'` }),
+      checkPlanInfo: [],
+      condition: ' and 1=1 ',
+      localcheckPlanInfo: []
+    }
+  },
+  async ready() {
+
+    await this.init()
+    this.getlocalCheckPlan()
+  },
+  methods: {
+    selfSearch(args) {
+      args.condition += this.condition
+      this.model.search(args.condition, args.model)
+    },
+    async init() {
+      this.condition = ' and 1=1 '
+      let classes_arr = await new HttpResetClass().load('POST', `${this.$androidUtil.getProxyUrl()}/rs/sql/tel_singleTable_OrderBy`, {
+        data: {
+          items: 'name', tablename: 't_parameter', condition: `id in (select processid from t_paramvalue where name = '${Vue.user.name}') and name like '%组'`, orderitem: 'id'
+        }
+      })
+      let classes_str = classes_arr.data.map(item => { return `'${item.name}'` }).join()
+      if (classes_arr.data && classes_arr.data.length >0){
+        this.condition += ` and f_class in (${classes_str})`
+      }
+      let outlets_arr = await new HttpResetClass().load('POST', `${this.$androidUtil.getProxyUrl()}/rs/sql/tel_singleTable_OrderBy`, {
+        data: {
+          items: 'name', tablename: 't_parameter', condition: `id in (select processid from t_paramvalue where name in (${classes_str})) and name like '%厅%'`, orderitem: 'id'
+        }
+      })
+      if (outlets_arr.data && outlets_arr.data.length >0){
+        this.condition += ` and f_outlets in (${outlets_arr.data.map(outlets => { return `'${outlets.name.substring(3)}'` }).join()})`
+      }
+    },
+    reload() {
+      //tag
+      this.$refs.paged.loadPage(this.$refs.paged.model.pageIndex)
+    },
+    getlocalCheckPlan() {
+      let value = this.$androidUtil.path({ alias: 'getLocalCheckPlan', data: {} })
+      //tag
+      this.localcheckPlanInfo = value.data
+      // this.$androidUtil.path({alias: 'getLocalCheckPlan', data:{}}).then((value)=>{
+      //   //tag
+      //   this.localcheckPlanInfo = value.data
+      // })
+    },
+    downloadHand(row) {
+      HostApp.__this__ = this
+      this.$showMessage('正在进行共享计划下载，请确认！', ['confirm', 'cancel']).then((res) => {
+        if (res === 'confirm') {
+          HostApp.logicWithHint({
+            'logic': 'DownCheckPlanInfo',
+            'callback': 'javascript: HostApp.__this__.downloadHandCallback()',
+            'data': { id: row.id },
+            'backresult': 1
+          })
+        }
+      })
+    },
+    downloadHandCallback(jo) {
+      // 安卓端
+      //tag
+      if (jo.state == 'ok') {
+        let result = JSON.parse(jo.result)
+        if (result.state == 0) {
+          if (result.data.length > 0) {
+            this.getlocalCheckPlan()
+            this.$showMessage('下载成功，您可前往计划导航进行查看！')
+          } else {
+            this.$showMessage('无可下载的共享计划！')
+          }
+        } else {
+          this.$showMessage('下载失败！')
+        }
+      } else {
+        this.$showMessage('下载失败，请重试！')
+      }
+    }
+  },
+  computed: {
+    isDown() {
+      return function (row) {
+        for (let info of this.localcheckPlanInfo) {
+          if (info.id == row.id) {
+            return false
+          }
+        }
+        return true
+      }
+    }
+  }
+}
+</script>
+<style>
+.bg {
+  background-color: blue;
+  height: 1px;
+  border: 0;
+}
+
+.app-row {
+  background-color: white;
+  padding: 10px 10px 0 10px;
+  border-bottom: 1px solid rgba(235, 235, 235, 0.5);
+}
+
+.search_input {
+  border: 0;
+  outline: none;
+}
+
+.font {
+  font: 15px PingFang-SC-Medium;
+  color: #666666;
+}
+
+.input-font {
+  font: 15px PingFang-SC-Medium;
+  color: #333333;
+}
+
+.btn-font {
+  font: 600 16px PingFang-SC-Bold;
+  color: #499EDF;
+}
+
+.btn-color {
+  background-color: #FFFFFF;
+  border-radius: 10px;
+  border: 1px solid #499EDF;
+}
+
+.app-text {
+  font-size: 12px;
+}
+
+.panel-self {
+  border-radius: 10px;
+  border: 1px solid #499EDF;
+  background-color: #F8F8F8;
+}
+
+.yybtn-color {
+  background-color: #499edf;
+  border-radius: 4px;
+  border: 1px solid #499EDF;
+  color: #FFFFFF;
+  font: 14px PingFang-SC-Bold;
+}
+
+.qxbtn-color {
+  background-color: #FFFFFF;
+  border-radius: 4px;
+  color: #499edf;
+  font: 14px PingFang-SC-Bold;
+  border: 1px solid #499EDF;
+}
+</style>

package/src/filiale/bayan/android/SafecheckOrderV.vue

@@ -1981,6 +1981,7 @@
         this.$set('data.f_off_valve_reason', this.item.f_plan_meters[0].f_off_valve_reason)
         this.$set('data.f_lgql_value', this.item.f_plan_meters[0].f_lgql_value)
         this.$set('data.f_lgje_value', this.item.f_plan_meters[0].f_lgje_value)
+        this.$set('data.f_table_state', this.item.f_plan_meters[0].f_table_state)
         // this.$set('data.f_user_inhome_time', this.item.f_user_inhome_time)
         // this.$set('data.f_user_check_time', this.item.f_user_check_time)
         // this.$set('data.f_user_spare_phone', this.item.f_user_spare_phone)

package/src/filiale/bayan/android/SafecheckUserInfo.vue

@@ -34,6 +34,14 @@
                  v-model="userinfo.f_user_phone"/>
 
         </div>
+        <div class="col-xs-12" style="padding: 2px 0">
+          <p class="panel-title col-xs-5 text-left font" style="width: 21%;float: left"><b>表具状态:</b></p>
+          <p class="panel-title text-left input-font" style="width: 79%">{{ userinfo.f_table_state }}</p>
+        </div>
+        <div class="col-xs-12" style="padding: 2px 0">
+          <p class="panel-title col-xs-5 text-left font" style="width: 21%;float: left"><b>是否限购:</b></p>
+          <p class="panel-title text-left input-font" style="width: 79%">{{limitGas}}</p>
+        </div>
         <!--        <div class="col-xs-12" style="padding: 2px 0" v-if="updateuserphone&&(userinfo.planmeterss.f_aliasname=='机表')">-->
         <!--          <p class="panel-title text-left font" style="width: 23%;float: left"><b>机表表号:</b></p>-->
         <!--          <input class="panel-title text-left input-font" style="width: 53%" value="{{ userinfo.f_meter_no }}" v-model="userinfo.f_meter_no"/>-->
@@ -294,6 +302,7 @@ export default {
     // //tag)
     this.$set('beforephone', this.userinfo.f_user_phone)
     this.$set('gmlist', [])
+    this.$set('limitGas', "")
     //tag
     if (Vue.config.safecheck != undefined) {
       if (Vue.config.safecheck.SafecheckUserinfo != undefined) {
@@ -312,8 +321,27 @@ export default {
       //tag + '：' + JSON.stringify(this.userinfo[i]))
     }
     this.safecheckStateReady()
+    this.limitgas()
   },
   methods: {
+    limitgas(){
+      //查询用户是否被限制购气
+      let http = new HttpResetClass()
+      http.load('POST', `${this.$androidUtil.getProxyUrl()}/rs/sql/tel_singleTable_OrderBy`, {
+        data: {
+          items: '*',
+          tablename: 't_userproperties   ts',
+          condition: `ts.f_userinfo_id='${this.userinfo.f_userinfoid}' and ts.f_parameter_key ='blackList' and ts.f_state='有效'`,
+          orderitem: 'ts.id'
+        }
+      }).then((res) => {
+        if (res.data.length > 0) {
+          this.limitGas="是"
+        }else{
+          this.limitGas="否"
+        }
+      })
+    },
     openPaper(userinfo_id) {
       this.$parent.$parent.$goto('edit', {row: userinfo_id})
     },

package/src/filiale/bayan/android.js

@@ -1,17 +1,18 @@
-// 分公司特殊组件页面注册
-import Vue from "vue";
-
-// 手机特殊目录注册到该文件中
-let specialComp = {
-  'current-create': (resolve) => { require(['./android/CurrentCreate'], resolve) },
-  'add-plan-item': (resolve) => { require(['./android/AddPlanItem'], resolve) },
-  'paper-feedback': (resolve) => { require(['./android/PaperFeedback'], resolve) },
-  'safecheck-devices': (resolve) => { require(['./android/SafecheckDevices'], resolve) },
-  'PhoneUpUserinfo': (resolve) => { require(['./android/PhoneUpUserinfo'], resolve) },
-  'safecheck-userinfo': (resolve) => { require(['./android/SafecheckUserInfo'], resolve) },
-  'safecheck-order-v': (resolve) => { require(['./android/SafecheckOrderV'], resolve) },
-  'edit': (resolve) => { require(['./android/Edit'], resolve) }
-}
-
-exports.specialComp = specialComp
-
+// 分公司特殊组件页面注册
+import Vue from "vue";
+
+// 手机特殊目录注册到该文件中
+let specialComp = {
+  'current-create': (resolve) => { require(['./android/CurrentCreate'], resolve) },
+  'add-plan-item': (resolve) => { require(['./android/AddPlanItem'], resolve) },
+  'paper-feedback': (resolve) => { require(['./android/PaperFeedback'], resolve) },
+  'safecheck-devices': (resolve) => { require(['./android/SafecheckDevices'], resolve) },
+  'PhoneUpUserinfo': (resolve) => { require(['./android/PhoneUpUserinfo'], resolve) },
+  'safecheck-userinfo': (resolve) => { require(['./android/SafecheckUserInfo'], resolve) },
+  'safecheck-order-v': (resolve) => { require(['./android/SafecheckOrderV'], resolve) },
+  'check-plan-down': (resolve) => { require(['./android/CheckPlanDown'], resolve) },
+  'edit': (resolve) => { require(['./android/Edit'], resolve) }
+}
+
+exports.specialComp = specialComp
+

package/src/filiale/bayan/pc/CheckDetail.vue

@@ -0,0 +1,205 @@
+<template>
+  <div>
+    <criteria-paged :model="model" v-ref:paged>
+      <criteria partial='criteria' @condition-changed='$parent.selfSearch' v-ref:criteria>
+        <div partial>
+          <!--          <p class="text-center" style="padding: 7px;"><b>安检计划项明细</b></p>-->
+          <ul class="nav nav-tabs">
+            <li role="presentation" class="active"><a style="	color: #5ac0d9 !important;">安检计划项明细</a></li>
+          </ul>
+          <div class="row">
+            <div class="form-group col-sm-4" >
+              <label class="font_normal_body">安检状态</label>
+              <v-select style="width:60% "
+                        class="select select_list"
+                        :value.sync="$parent.$parent.f_state"
+                        v-model="$parent.$parent.f_state"
+                        :options='$parent.$parent.checkState'
+                        placeholder='安检状态'
+                        close-on-select
+                        value-single
+              >
+              </v-select>
+            </div>
+            <div class="form-group col-sm-4" >
+              <v-select style="width:60% "
+                        v-if="$parent.$parent.f_state=='未入户'"
+                        class="select select_list"
+                        :value.sync="$parent.$parent.f_noruhu"
+                        v-model="$parent.$parent.f_noruhu"
+                        :options='$parent.$parent.noChecks'
+                        placeholder='请选择状态'
+                        :multiple="true"
+              >
+              </v-select>
+            </div>
+            <div class="form-group col-sm-4 button-range" >
+              <button class="button_search" style="margin-right: 10px"  @click="search()">查询</button>
+              <export-excel-safe   :data="$parent.$parent.exportParameter"
+                                   :field="$parent.$parent.excelHeaders"
+                                   sqlurl="rs/logic/SafeExportExcel" sql-name="planItem"
+                                   template-name='安检计划明细' :choose-col="true">
+              </export-excel-safe>
+              <!--<export-excel-safe-->
+              <!--:data="{condition: $parent.$parent.condition}"-->
+              <!--:field="$parent.$parent.getfield"-->
+              <!--sqlurl="rs/logic/saleExport" sql-name="getGasUser" :template-name="$parent.$parent.pricename+'气价使用人'"-->
+              <!--:choose-col="true"></export-excel-safe>-->
+
+            </div>
+          </div>
+        </div>
+      </criteria>
+      <data-grid :model="model" partial='list' class="table_sy">
+
+        <template partial='head'>
+          <tr>
+            <th><nobr>计划名称</nobr></th>
+            <th><nobr>用户编号</nobr></th>
+            <th><nobr>用户名称</nobr></th>
+            <th><nobr>小区名称</nobr></th>
+            <th><nobr>地址</nobr></th>
+            <th><nobr>安检状态</nobr></th>
+            <th><nobr>是否安检</nobr></th>
+          </tr>
+        </template>
+        <template partial='body'>
+          <td style="text-align: center"><nobr>{{row.f_plan_name}}</nobr></td>
+          <td style="text-align: center"><nobr>{{row.f_userinfo_code}}</nobr></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_address}}</nobr></td>
+          <td style="text-align: center"><nobr>{{row.f_last_check_state}}</nobr></td>
+          <td style="text-align: center"><nobr>{{row.f_state}}</nobr></td>
+        </template>
+      </data-grid>
+    </criteria-paged>
+  </div>
+</template>
+
+<script>
+import { PagedList } from 'vue-client'
+
+export default {
+  title: '安检计划项列表',
+  data () {
+    return {
+      model: new PagedList('rs/sql/planItem', 20),
+      checkState:[{label:'全部',value:''},{label:'入户',value:'入户'},{label:'未入户',value:'未入户'}],
+      noChecks:[{label:'未检',value:'未检'},{label:'到访不遇',value:'到访不遇'},{label:'拒检',value:'拒检'}],
+      excelHeaders: {
+        //用户编号	用户名称	用户电话	安检次数	用户类型	小区名称	地址	安检日期	安检状态	安检结果
+
+        'f_userinfo_code': '用户编号',
+        'f_user_name': '用户名称',
+        'f_user_phone': '用户电话',
+        //'count_item':'安检次数',
+        'f_user_type': '用户类型',
+        'f_residential_area': '小区名称',
+        'f_address':'地址',
+        'f_last_check_date':'安检日期',
+        'f_last_check_state': '安检状态',
+        'f_state':'是否已检',
+        'f_last_check_result':'安检结果'
+      },
+      f_state:'',
+      f_noruhu:''
+    }
+  },
+  props: [ 'check','checkstatus','checkstart','checkend' ],
+  watch: {
+    'check' (val) {
+      let condition
+      //tag
+      condition = `tt.f_checker_name='${this.check.f_checker}' and i.f_state!='作废' and c.f_issued='是'`
+      if(this.checkstatus){
+        condition += ` and cp.f_entry_status = '${this.checkstatus}'`
+      }
+      if (this.checkstart) {
+        condition += ` AND f_plan_year >= ${this.checkstart.substr(0,4)} `
+        condition += ` AND f_plan_month >= ${this.checkstart.substr(5,2)} `
+      }
+      if (this.checkend) {
+        condition += ` AND f_plan_year <= ${this.checkend.substr(0,4)} `
+        condition += ` AND f_plan_month <= ${this.checkend.substr(5,2)} `
+      }
+      this.f_noruhu=[]
+      this.f_state=''
+      this.model.search(condition, {})
+
+    }
+  },
+
+  ready () {
+    //tag
+    if (this.check) {
+      let condition
+      //tag
+      condition = `tt.f_checker_name='${this.check.f_checker}' and i.f_state!='作废' and c.f_issued='是'`
+      if(this.checkstatus){
+        condition += ` and cp.f_entry_status = '${this.checkstatus}'`
+      }
+      if (this.checkstart) {
+        condition += ` AND f_plan_year >= ${this.checkstart.substr(0,4)} `
+        condition += ` AND f_plan_month >= ${this.checkstart.substr(5,2)} `
+      }
+      if (this.checkend) {
+        condition += ` AND f_plan_year <= ${this.checkend.substr(0,4)} `
+        condition += ` AND f_plan_month <= ${this.checkend.substr(5,2)} `
+      }
+
+      this.model.search(condition, {})
+    }
+  },
+  methods:{
+    selfSearch(args){
+      if (this.check) {
+        args.condition = `tt.f_checker_name='${this.check.f_checker}' and i.f_state!='作废' and c.f_issued='是'`
+        if(this.checkstatus){
+          args.condition += ` and cp.f_entry_status = '${this.checkstatus}'`
+        }
+        if (this.checkstart) {
+          args.condition += ` AND f_plan_year >= ${this.checkstart.substr(0,4)} `
+          args.condition += ` AND f_plan_month >= ${this.checkstart.substr(5,2)} `
+        }
+        if (this.checkend) {
+          args.condition += ` AND f_plan_year <= ${this.checkend.substr(0,4)} `
+          args.condition += ` AND f_plan_month <= ${this.checkend.substr(5,2)} `
+        }
+        if( this.f_state){
+          if(this.f_state=='入户'){
+            args.condition=args.condition+" and i.f_state='已检' and f_last_check_state='入户'"
+          }else if(this.f_state=='未入户'){
+            if(this.f_noruhu && this.f_noruhu.length==1){
+              args.condition += this.f_noruhu[0]=='未检'?" and i.f_state='未检'":` and i.f_state='已检' and f_last_check_state='${this.f_noruhu[0]}'`
+            }else if(this.f_noruhu && this.f_noruhu.length==2){
+              if(this.f_noruhu.indexOf('未检')!=-1){
+                if(this.f_noruhu.indexOf('到访不遇')!=-1){
+                  args.condition=args.condition+" and (i.f_state='未检' or (i.f_state='已检' and f_last_check_state='到访不遇'))"
+                }else{
+                  args.condition=args.condition+" and (i.f_state='未检' or (i.f_state='已检' and f_last_check_state='拒检'))"
+                }
+              }else{
+                args.condition=args.condition+" and (i.f_state='已检' and (f_last_check_state='到访不遇' or f_last_check_state='拒检'))"
+              }
+            }else{
+              args.condition=args.condition+" and (i.f_state='未检' or (i.f_state='已检' and (f_last_check_state='到访不遇' or f_last_check_state='拒检')))"
+            }
+
+          }
+
+        }
+        this.model.search(args.condition, args.model)
+      }
+    }
+  },
+  computed: {
+    // 导出到Excel的条件构造
+    exportParameter() {
+      return {
+        condition: this.$refs.paged.model.condition
+      }
+    }
+  },
+}
+</script>

package/src/filiale/bayan/pc/CheckPlan.vue

@@ -0,0 +1,59 @@
+<template>
+  <div id="unit" class="flex-row" :class="{'binary':showItem}">
+<!--    <section>-->
+
+    <div  :class="{'basic-main':!showItem,'binary-left':showItem}" >
+          <select-check-plan @select-changed="selected" :style="style" :style2="style2" @checkstatus-changed="checkstatusChange" v-ref:check></select-check-plan>
+        </div>
+    <div  class="binary-right" v-show="showItem">
+      <div class="flex">
+          <check-detail v-if='$refs.check && $refs.check.selected' :check='$refs.check.selected' :checkstatus="checkstatus" :checkstart="$refs.check.f_check_start" :checkend="$refs.check.f_check_end"
+                        v-ref:detail></check-detail>
+        </div>
+    </div>
+
+<!--    </section>-->
+  </div>
+</template>
+
+<script>
+    import SelectCheckPlan from './SelectCheckPlan'
+    import CheckDetail from './CheckDetail'
+
+    export default {
+        title: '安检员考核',
+        props: ['f'],
+        components: {SelectCheckPlan, CheckDetail},
+        data() {
+            return {
+                showItem: false,
+                checkstatus: null,
+              style:'col-sm-2 form-group',
+              style2:'col-sm-4 form-group'
+            }
+        },
+        methods: {
+          selected(row) {
+            // //tag
+            this.showItem = true
+          },
+          checkstatusChange(val){
+            this.checkstatus = val
+          }
+        }
+    }
+</script>
+<style>
+  .form-input-group label {
+    text-align: right;
+    width: auto;
+  }
+
+  .datapanel {
+    color: #333;
+    background-color: white;
+    box-shadow: darkgrey 0.5px 0.5px 0.5px 0.5px;
+    padding: 5px 7px 5px 7px;
+    border-radius: 10px;
+  }
+</style>