manage-client 3.2.79-aode → 3.2.80-aode

package/src/components/webmeter/newwebmeter/NewWebUserHand.vue

@@ -1,325 +1,325 @@
-<template>
-  <div class="flex-row" id="unit" >
-    <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>
-                    <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 for="inputStartDate" class="font_normal_body">上报日期</label>
-                    <datepicker id="inputStartDate" placeholder="上报日期" style="width:60%"
-                                v-model="model.inputStartDate"
-                                :value.sync="model.inputStartDate"
-                                :format="'yyyy-MM-dd'"
-                                :show-reset-button="true"
-                    >
-                    </datepicker>
-                  </div>
-                  <div class="col-sm-2 form-group">
-                    <label for="inputEndDate" class="font_normal_body">&nbsp;&nbsp;&nbsp;&nbsp;至&nbsp;&nbsp;&nbsp;&nbsp;&ensp;</label>
-                    <datepicker id="inputEndDate" placeholder="终止上报日期" style="width:60%"
-                                v-model="model.inputEndDate"
-                                :value.sync="model.inputEndDate"
-                                :format="'yyyy-MM-dd'"
-                                :show-reset-button="true"
-                    >
-                    </datepicker>
-                  </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"
-                              :value-single ="true"
-                              :options='$parent.$parent.meterbrands' placeholder='请选择'
-                              condition="f_meter_brand = '{}'"
-                              close-on-select></v-select>
-                  </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>
-                    <!--<button class="button_export button_spacing" style="width: max-content" @click="$parent.$parent.showTotalForm()" >显示汇总</button>-->
-                    <!--                    <button class="btn btn-success" @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>
-                    <!--                    <export-excel-plus :data="$parent.$parent.getCondition"-->
-                    <!--                                  :defaultselect="$parent.$parent.selectfields"-->
-                    <!--                                  :field="$parent.$parent.getfield"-->
-                    <!--                                  :exportprogress="true" v-ref:exports-->
-                    <!--                                  sqlurl="rs/logic/exportfileplus" sql-name="getNewUserGasAll" :template-name='$parent.$parent.getBean'-->
-                    <!--                                  :choose-col="true"></export-excel-plus>-->
-
-                    <easy-excel-export :data="$parent.$parent.getCondition"
-                                       :defaultselect="$parent.$parent.selectfields"
-                                       :field="$parent.$parent.getfield"
-                                       :exportprogress="true" v-ref:exports
-                                       sqlurl="rs/easyexcel/export" sql-name="getNewReport" :template-name="$parent.$parent.getBean"
-                                       :choose-col="true">
-                    </easy-excel-export>
-                  </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>
-
-                </tr>
-
-
-              </template>
-              <template partial='body'>
-                <td>{{row.f_date}}</td>
-                <td style="text-align:center">{{row.f_meter_brand}}</td>
-                <td style="text-align:center">{{row.opennum}}</td>
-                <td style="text-align:center">{{row.reportnum}}</td>
-                <td style="text-align:center">{{row.bili}}</td>
-
-              </template>
-
-            </data-grid>
-          </criteria-paged>
-        </div>
-      </div>
-    </div>
-  </div>
-
-</template>
-
-<script>
-import {PagedList} from 'vue-client'
-import * as Util from '../../../Util'
-import getLodop from '../../../plugins/LodopFuncs'
-import plugins from '../../../plugins/GetLoginInfoService'
-import exportConfig from "../../sale/config/exportConfig";
-let readySomething = async function (self) {
-  await self.$MagLoadParams.loadParam()
-  self.initParams()
-}
-export default {
-  title: '物联网上报统计',
-  data() {
-    return {
-      other:[],
-      footer:[],
-      sumName: [],
-      model: new PagedList('rs/sql/getNewReport', 20,{startDate: 'this.model.inputStartDate', endDate: 'this.model.inputEndDate'}),
-      getGroupNameByDate: [
-        {label: '年份', value: 'year'},
-        {label: '月份', value: 'month'},
-        {label: '周', value: 'week'}
-      ],
-      meterbrands: [],
-      criteriaShow: false,
-      reportStr: null,
-      show: false,
-      outlets: [],
-      operator: [],
-      filename: '',
-      searchshow: true,
-      startDate: '',
-      endDate: '',
-      echarts: false,
-      isActiveTotalForm: false,
-      condition: '1=1',
-      groupname: ['year'],
-      getgroupname: [
-        {label: '年份', value: 'year'},
-        {label: '月份', value: 'month'},
-        {label: '周', value: 'week'},
-        {label: '日', value: 'day'}
-      ],
-      orgCondtionStr: '(' + this.$login.f.orgid + ')',
-      orgid:[this.$login.f.orgid],
-      selectfields:[],
-    }
-  },
-  ready() {
-    this.$refs.paged.$refs.cri.model.inputStartDate = Util.toStandardDateString()
-    this.$refs.paged.$refs.cri.model.inputEndDate = Util.toStandardDateString()
-    for(var item in exportConfig.newReportConfig){
-      this.selectfields.push(item)
-    }
-    readySomething(this);
-  },
-  methods: {
-    getotherfooter(){
-      this.$refs.paged.$refs.cri.$refs.exports.otherData=[];
-      this.$refs.paged.$refs.cri.$refs.exports.footerData=[];
-      this.other=[];
-      this.footer=[];
-      let exportdata = this.getCondition;
-      let otherInData=[];
-      otherInData.push(`导出时间: ${this.$login.toStandardDateString()}`);
-      otherInData.push(`导出人：${this.$login.f.name}`)
-      let footerData=[],exportfield=this.getfield;
-      footerData.push("合计");
-      let self = this;
-      for(var field in self.sumsmodel){
-        footerData.push(`${self.sumsmodel[field]}`);
-      }
-      this.footer.push(footerData);
-      this.other.push(otherInData);
-    },
-    // 查询开关
-    hidden() {
-      this.criteriaShow = !this.criteriaShow
-    },
-    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 = []
-      let param = {
-        condition :"f_meter_type ='物联网表'",
-        items:"f_meter_brand",
-        orderitem:"id",
-        tablename:"t_gasbrand"
-      }
-      this.$resetpost('rs/sql/manageSingleTable',{data:param},{resolveMsg:null,rejectMsg:null}).then((res)=>{
-        res.data.forEach((item) => {
-          console.log(item)
-              let temp = {}
-              temp.label = item.f_meter_brand
-              temp.value = item.f_meter_brand
-              brandArr.push(temp)
-            })
-        this.meterbrands = [{label: '全部', value: ''}, ...brandArr]
-      })
-
-
-    },
-    search(args) {
-      this.startDate = this.$refs.paged.$refs.cri.model.inputStartDate
-      this.endDate = this.$refs.paged.$refs.cri.model.inputStartDate
-      if (this.endDate == '' || this.startDate == '') {
-        return this.$showMessage("结算时间区间的开始和结束时间不能为空！")
-      }
-      if (!this.orgCondtionStr){
-        return this.$showMessage("请选择分公司！")
-      }
-      if (this.orgCondtionStr)
-        this.condition = this.$refs.paged.$refs.cri.condition + `and a.f_orgid in ${this.orgCondtionStr}`
-      else
-        this.condition = this.$refs.paged.$refs.cri.condition
-      this.model.params.f_orgid = this.orgCondtionStr
-      this.model.params.f_meter_brand = this.$refs.paged.$refs.cri.model.f_meter_brand && this.$refs.paged.$refs.cri.model.f_meter_brand!==''? ` and f_meter_brand = '${this.$refs.paged.$refs.cri.model.f_meter_brand}'` :''
-
-      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)
-    },
-  },
-  watch: {
-    'data'(val) {
-      if (val.f_files_path) {
-        this.getFileContent(val.f_files_path)
-      } else {
-        this.reportStr = null
-      }
-    }
-  },
-  computed: {
-    getCondition() {
-      let f_meter_brand = this.$refs.paged.$refs.cri.model.f_meter_brand && this.$refs.paged.$refs.cri.model.f_meter_brand!==''? ` and c.f_meter_brand = '${this.$refs.paged.$refs.cri.model.f_meter_brand}'` :''
-      return { startDate: this.$refs.paged.$refs.cri.model.inputStartDate,endDate:this.$refs.paged.$refs.cri.model.inputEndDate,f_orgid:this.orgCondtionStr,f_meter_brand:f_meter_brand}
-    },
-    getfield() {
-      return exportConfig.newReportConfig
-    },
-    getBean(){
-      return '上报率导出'+ Util.guid()
-    }
-  }
-}
-</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" >
+    <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>
+                    <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 for="inputStartDate" class="font_normal_body">上报日期</label>
+                    <datepicker id="inputStartDate" placeholder="上报日期" style="width:60%"
+                                v-model="model.inputStartDate"
+                                :value.sync="model.inputStartDate"
+                                :format="'yyyy-MM-dd'"
+                                :show-reset-button="true"
+                    >
+                    </datepicker>
+                  </div>
+                  <div class="col-sm-2 form-group">
+                    <label for="inputEndDate" class="font_normal_body">&nbsp;&nbsp;&nbsp;&nbsp;至&nbsp;&nbsp;&nbsp;&nbsp;&ensp;</label>
+                    <datepicker id="inputEndDate" placeholder="终止上报日期" style="width:60%"
+                                v-model="model.inputEndDate"
+                                :value.sync="model.inputEndDate"
+                                :format="'yyyy-MM-dd'"
+                                :show-reset-button="true"
+                    >
+                    </datepicker>
+                  </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"
+                              :value-single ="true"
+                              :options='$parent.$parent.meterbrands' placeholder='请选择'
+                              condition="f_meter_brand = '{}'"
+                              close-on-select></v-select>
+                  </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>
+                    <!--<button class="button_export button_spacing" style="width: max-content" @click="$parent.$parent.showTotalForm()" >显示汇总</button>-->
+                    <!--                    <button class="btn btn-success" @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>
+                    <!--                    <export-excel-plus :data="$parent.$parent.getCondition"-->
+                    <!--                                  :defaultselect="$parent.$parent.selectfields"-->
+                    <!--                                  :field="$parent.$parent.getfield"-->
+                    <!--                                  :exportprogress="true" v-ref:exports-->
+                    <!--                                  sqlurl="rs/logic/exportfileplus" sql-name="getNewUserGasAll" :template-name='$parent.$parent.getBean'-->
+                    <!--                                  :choose-col="true"></export-excel-plus>-->
+
+                    <easy-excel-export :data="$parent.$parent.getCondition"
+                                       :defaultselect="$parent.$parent.selectfields"
+                                       :field="$parent.$parent.getfield"
+                                       :exportprogress="true" v-ref:exports
+                                       sqlurl="rs/easyexcel/export" sql-name="getNewReport" :template-name="$parent.$parent.getBean"
+                                       :choose-col="true">
+                    </easy-excel-export>
+                  </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>
+
+                </tr>
+
+
+              </template>
+              <template partial='body'>
+                <td>{{row.f_date}}</td>
+                <td style="text-align:center">{{row.f_meter_brand}}</td>
+                <td style="text-align:center">{{row.opennum}}</td>
+                <td style="text-align:center">{{row.reportnum}}</td>
+                <td style="text-align:center">{{row.bili}}</td>
+
+              </template>
+
+            </data-grid>
+          </criteria-paged>
+        </div>
+      </div>
+    </div>
+  </div>
+
+</template>
+
+<script>
+import {PagedList} from 'vue-client'
+import * as Util from '../../../Util'
+import getLodop from '../../../plugins/LodopFuncs'
+import plugins from '../../../plugins/GetLoginInfoService'
+import exportConfig from "../../sale/config/exportConfig";
+let readySomething = async function (self) {
+  await self.$MagLoadParams.loadParam()
+  self.initParams()
+}
+export default {
+  title: '物联网上报统计',
+  data() {
+    return {
+      other:[],
+      footer:[],
+      sumName: [],
+      model: new PagedList('rs/sql/getNewReport', 20,{startDate: 'this.model.inputStartDate', endDate: 'this.model.inputEndDate'}),
+      getGroupNameByDate: [
+        {label: '年份', value: 'year'},
+        {label: '月份', value: 'month'},
+        {label: '周', value: 'week'}
+      ],
+      meterbrands: [],
+      criteriaShow: false,
+      reportStr: null,
+      show: false,
+      outlets: [],
+      operator: [],
+      filename: '',
+      searchshow: true,
+      startDate: '',
+      endDate: '',
+      echarts: false,
+      isActiveTotalForm: false,
+      condition: '1=1',
+      groupname: ['year'],
+      getgroupname: [
+        {label: '年份', value: 'year'},
+        {label: '月份', value: 'month'},
+        {label: '周', value: 'week'},
+        {label: '日', value: 'day'}
+      ],
+      orgCondtionStr: '(' + this.$login.f.orgid + ')',
+      orgid:[this.$login.f.orgid],
+      selectfields:[],
+    }
+  },
+  ready() {
+    this.$refs.paged.$refs.cri.model.inputStartDate = Util.toStandardDateString()
+    this.$refs.paged.$refs.cri.model.inputEndDate = Util.toStandardDateString()
+    for(var item in exportConfig.newReportConfig){
+      this.selectfields.push(item)
+    }
+    readySomething(this);
+  },
+  methods: {
+    getotherfooter(){
+      this.$refs.paged.$refs.cri.$refs.exports.otherData=[];
+      this.$refs.paged.$refs.cri.$refs.exports.footerData=[];
+      this.other=[];
+      this.footer=[];
+      let exportdata = this.getCondition;
+      let otherInData=[];
+      otherInData.push(`导出时间: ${this.$login.toStandardDateString()}`);
+      otherInData.push(`导出人：${this.$login.f.name}`)
+      let footerData=[],exportfield=this.getfield;
+      footerData.push("合计");
+      let self = this;
+      for(var field in self.sumsmodel){
+        footerData.push(`${self.sumsmodel[field]}`);
+      }
+      this.footer.push(footerData);
+      this.other.push(otherInData);
+    },
+    // 查询开关
+    hidden() {
+      this.criteriaShow = !this.criteriaShow
+    },
+    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 = []
+      let param = {
+        condition :"f_meter_type ='物联网表'",
+        items:"f_meter_brand",
+        orderitem:"id",
+        tablename:"t_gasbrand"
+      }
+      this.$resetpost('rs/sql/manageSingleTable',{data:param},{resolveMsg:null,rejectMsg:null}).then((res)=>{
+        res.data.forEach((item) => {
+          console.log(item)
+              let temp = {}
+              temp.label = item.f_meter_brand
+              temp.value = item.f_meter_brand
+              brandArr.push(temp)
+            })
+        this.meterbrands = [{label: '全部', value: ''}, ...brandArr]
+      })
+
+
+    },
+    search(args) {
+      this.startDate = this.$refs.paged.$refs.cri.model.inputStartDate
+      this.endDate = this.$refs.paged.$refs.cri.model.inputStartDate
+      if (this.endDate == '' || this.startDate == '') {
+        return this.$showMessage("结算时间区间的开始和结束时间不能为空！")
+      }
+      if (!this.orgCondtionStr){
+        return this.$showMessage("请选择分公司！")
+      }
+      if (this.orgCondtionStr)
+        this.condition = this.$refs.paged.$refs.cri.condition + `and a.f_orgid in ${this.orgCondtionStr}`
+      else
+        this.condition = this.$refs.paged.$refs.cri.condition
+      this.model.params.f_orgid = this.orgCondtionStr
+      this.model.params.f_meter_brand = this.$refs.paged.$refs.cri.model.f_meter_brand && this.$refs.paged.$refs.cri.model.f_meter_brand!==''? ` and f_meter_brand = '${this.$refs.paged.$refs.cri.model.f_meter_brand}'` :''
+
+      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)
+    },
+  },
+  watch: {
+    'data'(val) {
+      if (val.f_files_path) {
+        this.getFileContent(val.f_files_path)
+      } else {
+        this.reportStr = null
+      }
+    }
+  },
+  computed: {
+    getCondition() {
+      let f_meter_brand = this.$refs.paged.$refs.cri.model.f_meter_brand && this.$refs.paged.$refs.cri.model.f_meter_brand!==''? ` and c.f_meter_brand = '${this.$refs.paged.$refs.cri.model.f_meter_brand}'` :''
+      return { startDate: this.$refs.paged.$refs.cri.model.inputStartDate,endDate:this.$refs.paged.$refs.cri.model.inputEndDate,f_orgid:this.orgCondtionStr,f_meter_brand:f_meter_brand}
+    },
+    getfield() {
+      return exportConfig.newReportConfig
+    },
+    getBean(){
+      return '上报率导出'+ Util.guid()
+    }
+  }
+}
+</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>