manage-client 3.2.11 → 3.2.12

package/src/components/ManageHome/Drill/DrillData.vue

@@ -1,791 +1,791 @@
-<template>
-  <div>
-    <div class="datestyle">
-      <label for="startDate">开始日期:</label>
-      <datepicker id="startDate" placeholder="开始日期" class="childrendatestyle"
-                  v-model="model.startDate"
-                  :value.sync="model.startDate"
-                  :disabled-days-of-Week="[]"
-                  :format="'yyyy-MM-dd'"
-                  :show-reset-button="reset">
-      </datepicker>
-      <label for="endDate">结束日期:</label>
-      <datepicker id="endDate" placeholder="结束日期" class="childrendatestyle"
-                  v-model="model.endDate"
-                  :value.sync="model.endDate"
-                  :disabled-days-of-Week="[]"
-                  :format="'yyyy-MM-dd'"
-                  :show-reset-button="reset">
-      </datepicker>
-      <!--<label class="control-label">组织机构</label>-->
-      <!--<right-tree :userid.sync='userid' :source.sync='source' @re-res="getRes" id="childrenorgstyle"></right-tree>-->
-    </div>
-    <div class="title-1">
-      <span>{{parenttitle.pagename}} — <span
-        style="font-size: 0.80em">{{parenttitle.pagechildrenname}}</span></span>
-      <button class="button-1" @click="backclick">返回</button>
-    </div>
-    <div class="div-1">
-      <div class="drillcontent" v-show="!listenlistshow">
-        <div class="menuselect">
-          <div class="selectstyle">
-            <!--钻取下拉列表1-->
-            <v-select id="selectid" v-ref:selected class="childrenselectstyle" :value.sync="select0"
-                      :options='drillparam' placeholder='请选择' close-on-select clear-button
-                      @click="getinitDate">
-            </v-select>
-            <!--钻取下拉列表2-->
-            <v-select v-show="childrenselectshow" id="selectchildrenid" v-ref:selected1 class="childrenselectstyle"
-                      :value.sync="select1"
-                      :options='drillchildrenparam' placeholder='请选择' close-on-select clear-button
-                      @click="getinitDate1">
-            </v-select>
-            <input type="text" v-model="inputtext" :placeholder='textcontent'
-                   v-show="inputtextshow">
-            <button class="button-21" @click="listenToChild1">钻取</button>
-            <button class="button-2" @click="listenToChild2">清空</button>
-          </div>
-          <!--<div class="historydiv">-->
-          <!--<div v-show="clickhistoryshow"><span  v-for="s in clickhistory"><span class="history">{{s}}</span>-></span></div>-->
-          <!--<div v-show="clickshow"><span  v-for="s in clickparam"><span class="history">{{s}}</span>-></span></div>-->
-          <!--</div>-->
-        </div>
-        <div class="drilltext" v-show="!listenlistshow">
-          <!--图表-->
-          <div id="echarts" class="echartsstyle"></div>
-          <!--汇总表-->
-          <drill-pool :pooldata="datapool" class="pool"></drill-pool>
-        </div>
-      </div>
-      <!--详细列表-->
-      <drill-list :listsqldata="listsqldata" :templatename="parenttitle.pagechildrenname" class="drilllist"
-                  :class="{'drillliststyle':listenlistshow}"></drill-list>
-    </div>
-  </div>
-</template>
-
-<script>
-  import * as Util from '../../../stores/Util'
-  import * as Dec from '../../../stores/DrillECharts'
-  import * as Drillsql from '../../../stores/DrillSql'
-  import co from 'co'
-
-  export default {
-    name: "DrillData",
-    props: {
-      parenttitle: {
-        pagename: String,   //钻取页面name
-        pagetitle: String,  //钻取页面标题,也是取钻取信息的字段
-        pagechildrenname: String, //钻取页面子标题
-      },   // 钻取页面
-      drillshow: Boolean,
-      idname: String,
-      childname: String,    //获取初始图表的refs -name 进行setBar绘制初始echarts
-      echartsdata: Array,   //初始数据来源所钻取模块，进行汇总显示
-      initdatatr: Object,    //初始化配置文件数据
-      listcondition: {
-        clickparam: String,
-        drillterm: String,
-        tablename: String,
-        drillcondition: String,
-        sqlurl: String,
-        headData: Array,
-        bodyData: Array,
-      },
-    },
-    data() {
-      return {
-        userid: this.$login.f.id,
-        source: `tool.getFullTree(this.getRights().where(row.getType() != $zone$).where(row.getType() == $organization$))`,
-        datapool: [],    //汇总数据
-        model: {         //时间参数
-          startDate: Util.toStandardDateString(),
-          endDate: Util.toStandardDateString(),
-        },
-        drillparam: [],       //一级钻取列表
-        selectparam: '',      //选择字段
-        listsqldata: {        //列表sql参数
-          urlcarrydata: [],
-          headData: [],
-          bodyData: [],
-        },
-        xc: '',
-
-        childrenselectshow: false,       //二级下拉列表show
-        drillchildrenparam: [],          //二级下拉列表
-        inputtextshow: false,             //输入框show
-        select0: [],                     //一级选中值
-        select1: [],                     //二级选中值
-        inputtext: '',                    //输入框
-        textcontent: '',                  //输入框默认内容
-        listenlistshow: false,           //列表展开控制
-        clickhistoryshow: false,         //钻取历史显示
-        clickshow: false,                //点击历史显示
-        datedefault: true,               //默认不加载初始时间
-        datelistif: false,               //时间选择发生变化
-
-        barparam: '',        //饼状图点击字段
-        clickhistory: [],    //钻取历史
-        clickparam: [],      //点击历史
-        sqlobtaindata: [],   //请求后台获取的数据
-        echartsType: '',     //钻取后echarts的类型
-        bartype: '',         //时间分类类型(按年year，按月month)
-
-        initflag: true,    //初始化判断
-        yname: '',       //柱状图y名称
-        xname: '',       //柱状图x名称
-        seriename: '',    //seriename名称
-        namesubif: false,
-      }
-
-    },
-    computed: {
-      selected() {
-        return this.$refs.grid.selected
-      }
-    },
-    methods: {
-      // 获取组织结构
-      getRes(obj) {
-        this.filialeNameStr = obj.res
-        this.filialeCodeStr = obj.resids
-      },
-      // 返回二级页面
-      backclick() {
-        this.$echarts.init(document.getElementById('echarts')).clear()
-        this.$parent.drillshow = false
-        this.initflag = true
-        this.resetParam()
-        console.log(this.datedefault,'时间判断')
-      },
-      //图点击事件
-      eConsole(param) {
-        // 对饼状图进行点击处理
-        if (this.echartsType == 'pie') {
-          // 点击历史
-          this.clickparam.push(param.data.name)
-          // 控制显示历史
-          this.clickshow = true
-          // 点击字段记录
-          this.barparam = param.data
-        }
-      },
-      //钻取按键响应事件
-      listenToChild1() {
-        // 获取下拉列表zhi
-        var texttile = this.$refs.selected.selectedItems
-        var texttile1 = this.$refs.selected1.selectedItems
-        console.log(texttile, '钻取一级类型')
-        console.log(texttile1, '钻取二级类型')
-        // 判断是否进行选择
-        if (typeof texttile == "undefined" || texttile == '') {
-          this.$showMessage('未选择查询类型!')
-          return
-        }
-
-        var conditionparamone = {}  //一级钻取字段对象
-        var conditionparamtow = {}  //二级钻取字段对象
-
-        console.log(this.datedefault,'时间判断')
-        // 填充默认时间
-        if (this.datedefault == true) {
-            Drillsql.startDate = eval(Util.toStandardDateString().toString().substring(0, 4) + '-50') + '-01-01 00:00:00'
-            Drillsql.endDate = this.model.endDate + ' 00:00:00'
-        } else {
-          Drillsql.startDate = this.model.startDate + ' 00:00:00'
-          Drillsql.endDate = this.model.endDate + ' 00:00:00'
-        }
-
-        //特殊处理
-        var param = Drillsql.param
-        var param1 = Drillsql.param1
-
-        if (this.inputtext != '' && this.idname == 'pastscale') {
-          Drillsql.param = this.inputtext
-          Drillsql.param1 = this.inputtext
-        }
-
-        //获取选中一级分类的信息
-        conditionparamone = Drillsql.getDrillParameter(this.parenttitle.pagetitle, this.idname, texttile, '')
-        // 填充钻取状态
-        this.clickhistoryshow = true
-        this.bartype = conditionparamone.name
-        this.clickhistory.push(conditionparamone.label)
-        this.echartsType = conditionparamone.echartsType
-        var dateparam = conditionparamone.dateparam
-        var dateparamif = conditionparamone.dateif
-        if (conditionparamone.echartsType == 'bar') {
-          this.yname = conditionparamone.yname
-          this.xname = conditionparamone.xname
-          this.seriename = conditionparamone.seriename
-          this.namesubif = conditionparamone.namesubif
-        }
-
-
-        // 判断是否有二级钻取
-        if (texttile1 != '') {
-          //获取选中二级分类的信息
-          conditionparamtow = Drillsql.getDrillParameter(this.parenttitle.pagetitle, this.idname, texttile, texttile1)
-          // 填充钻取状态
-          this.bartype = conditionparamtow.name
-          this.clickhistory.push(conditionparamtow.label)
-          this.echartsType = conditionparamtow.echartsType
-          dateparam = conditionparamtow.dateparam
-          dateparamif = conditionparamtow.dateif
-          if (conditionparamtow.echartsType == 'bar') {
-            this.yname = conditionparamtow.yname
-            this.xname = conditionparamtow.xname
-            this.seriename = conditionparamtow.seriename
-            this.namesubif = conditionparamtow.namesubif
-          }
-
-
-          //往期购气特殊处理
-          if (conditionparamtow.label == '高于往期购气量' && this.inputtext < 1) {
-            this.$showMessage('请输入大于1的数!')
-            Drillsql.param = param
-            Drillsql.param1 = param1
-            return
-          }
-          if (conditionparamtow.label == '低于往期购气量' && (this.inputtext > 1 || this.inputtext > 1)) {
-            this.$showMessage('请输入0-1之间的数!')
-            Drillsql.param = param
-            Drillsql.param1 = param1
-            return
-          }
-        } else {
-          conditionparamtow = {}
-        }
-
-        // console.log(conditionparamone, '一级分类信息')
-        // console.log(conditionparamtow, '二级分类信息')
-        // console.log(this.clickhistory, this.echartsType, '图状态信息')
-        // 点击字段进行sql拼接
-        var barcondition = ''
-        if (this.barparam != '' && conditionparamone.barparamif) {
-          barcondition = this.barparam.drilltype + '=\'' + this.barparam.name + '\' and '
-        }
-       var dateif=true
-        // 时间参数进行sql拼接
-        if (this.datalistif && !this.datedefault && !dateparamif) {
-          dateif=false
-          barcondition = dateparam + '>=\'' +  Drillsql.startDate+ '\' and '
-            + dateparam + '<=\'' +  Drillsql.endDate + '\' and ' + barcondition
-        }
-        // 拼接SQL查询条件
-        // keys:分组字段  drillparam:选择字段   drillterm:查询条件
-        // console.log(barcondition, '拼接字段')
-        //重置明细数据
-
-        var sqlparam = ''
-
-        if (JSON.stringify(conditionparamtow) == '{}') {
-          // 获取一级分类sql
-
-          sqlparam = conditionparamone.sqlcondition
-        } else {
-          // 获取二级分类sql
-          sqlparam = conditionparamtow.sqlcondition
-        }
-        var condition =''
-
-        // 拼接点击条件
-        if(this.idname=='usernum'|| this.idname=='pastscale'){
-          condition =barcondition
-        }else {
-          condition =this.bartype+' and '+barcondition
-        }
-
-        //请求后台数据
-        var sqlcondition = {
-          startDate:Drillsql.startDate,
-          endDate:Drillsql.endDate,
-          param:Drillsql.param,
-          param1:Drillsql.param1,
-          param2:Drillsql.param2,
-          condition:condition
-        }
-        if( this.idname=='pastscale'){
-          var s1 = eval('(' + Drillsql.param + '-1)*100')
-          var s1 = s1.toString().substring(0, 5)
-          var s2 = eval(Drillsql.param1 + '*100')
-          var s2 = s2.toString().substring(0, 5)
-          var s3=''
-             s3= conditionparamone.label
-            if(s3=='全部'){
-               s3=''
-            }
-          sqlcondition.s1=s1
-          sqlcondition.s2=s2
-          sqlcondition.s3=s3
-          sqlcondition.param3=' and '+conditionparamone.name
-        }
-        console.log(sqlcondition, '图表请求sql')
-        let getsqldata = Dec.getData(this, sqlparam ,sqlcondition)
-        co(getsqldata)
-        // 时间参数进行sql拼接
-        var pagelist = Drillsql.getDrillList(this.parenttitle.pagetitle, this.idname, '', '')
-        if (this.datalistif && !this.datedefault&&dateif) {
-          barcondition = pagelist[2].dateparam + '>=\'' + this.model.startDate + ' 00:00:00\' and '
-            + pagelist[2].dateparam + '<=\'' + this.model.endDate + ' 00:00:00\' and ' + barcondition
-          this.datelistif = false
-        }
-        console.log(barcondition, '时间sqllist')
-        //获取列表sql
-        if (!conditionparamone.listif) {
-          barcondition = barcondition + '  ' + conditionparamone.name + '\t and '
-        }
-        if (texttile1 != '') {
-          barcondition = barcondition + conditionparamtow.listparam
-        }
-        var list = Drillsql.listparam
-        // 警告特殊处理
-        if (this.idname == 'caveat'||this.idname == 'lossassociation'||this.idname == 'longnotusegas'||this.idname == 'longnotbuygas') {
-          Drillsql.listparam = ''
-        }
-        Drillsql.listparam1 = barcondition
-        console.log(Drillsql.listparam1, '列表钻取条件 ')
-        pagelist = Drillsql.getDrillList(this.parenttitle.pagetitle, this.idname, '', '')
-        console.log(pagelist)
-        var sqllistcondition= [this.idname+'list',20,{listparam:"\""+Drillsql.listparam+"\"",listparam1:"\""+Drillsql.listparam1+"\""}]
-        //调用赋值函数，传递给绘图子组件
-        this.Transfer(sqllistcondition, pagelist[0].headData, pagelist[1].bodyData)
-        Drillsql.param = param
-        Drillsql.param1 = param1
-        Drillsql.listparam = list
-      },
-
-      //清空按键事件
-      listenToChild2() {
-        this.xc.clear()
-        this.resetParam()
-
-        //重新初始化
-        this.initdata()
-      },
-      //重置参数
-      resetParam() {
-        this.barparam = ''     //清空点击字段
-        this.drillparam = []    //清空下拉列表
-        this.select0 = []
-        this.drillchildrenparam = []  //清空子下拉列表
-        this.clickhistory = []       //清空查询历史
-        this.clickparam = []          //清空点击历史
-
-        this.model.startDate = Util.toStandardDateString()   //重置时间为当前时间
-        this.model.endDate = Util.toStandardDateString()
-
-        this.childrenselectshow = false    //关闭子下拉列表
-        this.clickhistoryshow = false      //关闭查询历史显示
-        this.clickshow = false             //关闭点击历史显示
-        this.datelistif = false             //关闭时间更改标志
-        this.datedefault = true             //打开时间初始标志
-        this.inputtextshow = false          //关闭输入框
-        this.textcontent = ''
-        this.inputtext = ''
-      },
-      //传递参数赋值，传递给子组件
-      Transfer(pageurl, headData, bodyData) {
-        this.listsqldata.urlcarrydata = pageurl
-        this.listsqldata.headData = headData
-        this.listsqldata.bodyData = bodyData
-      },
-      //初始化图表数据参数
-      initdata() {
-        console.log(this.echartsdata, '钻取初始化参数')
-        console.log(this.initdatatr, '初始化获取sql的参数')
-
-
-        Drillsql.startDate = this.initdatatr['startDate']
-        Drillsql.endDate = this.initdatatr['endDate']
-        Drillsql.param = this.initdatatr['param']
-        Drillsql.param1 = this.initdatatr['param1']
-        Drillsql.listparam = this.initdatatr['listparam']
-        Drillsql.listparam1 = ''
-
-
-        //特殊处理
-        if (this.parenttitle.pagechildrenname == '主要用户展示') {
-          Drillsql.listparam1 = ' a.f_user_type=\'非民用\' and  '
-        }
-
-        this.$parent.$refs[this.childname].setBar("echarts")
-        this.datapool = this.$parent.childdata
-        var pagelist = Drillsql.getDrillList(this.parenttitle.pagetitle, this.idname, '', '')
-        console.log(pagelist)
-        var sqllistcondition= [this.idname+'list',20,{listparam:"\""+Drillsql.listparam+"\"",listparam1:"\""+Drillsql.listparam1+"\""}]
-
-        //调用赋值函数，传递给绘图子组件
-        this.Transfer(sqllistcondition, pagelist[0].headData, pagelist[1].bodyData)
-
-      },
-
-      getinitDate() {
-        this.inputtextshow = false
-        this.textcontent = ''
-        this.inputtext = ''
-        this.drillparam = Drillsql.getDrillParameter(this.parenttitle.pagetitle, this.idname, '', '')
-      },
-    }
-    ,
-    watch: {
-      'model':
-        {
-          deep: true,
-          handler(val) {
-            if(!this.$parent.drillshow){
-              return
-            }
-            this.datedefault = false
-            this.datalistif = true
-          }
-          ,
-        }
-      ,
-      'echartsdata':
-        {
-          deep: true,
-          handler(val) {
-            if (typeof this.echartsdata !== "undefined" && this.drillshow == true && this.initflag) {
-              this.initdata()
-              this.initflag = false
-            }
-          }
-          ,
-          immediate: true
-        }
-      ,
-      'drillshow':
-        {
-          deep: true,
-          handler(val) {
-            if (typeof this.echartsdata !== "undefined" && this.drillshow == true && this.initflag) {
-              this.initdata()
-              this.initflag = false
-            }
-          }
-          ,
-          immediate: true
-        }
-      ,
-      'select0':
-        {
-          deep: true,
-          handler() {
-            // console.log(this.select0, '选中分类的值')
-            if (this.select0.length < 1) {
-              return
-            }
-            this.select1 = ''
-
-            this.childrenselectshow = false
-            var self = this
-            this.drillparam.forEach(function (s) {
-              if (self.select0 == s.value && s.name == 't_area') {
-                let gen = Dec.select(self, 't_area', '1=1')
-                co(gen)
-              }
-            })
-            setTimeout(() => {
-              self.drillparam.forEach(function (s) {
-                if (s.value == self.select0) {
-                  if (typeof s.children != "undefined" && JSON.stringify(s.children) != '[]') {
-                    self.childrenselectshow = true
-                    self.drillchildrenparam = s.children
-                  }
-                }
-
-              })
-            }, 500)
-          }
-        }
-      ,
-      'select1':
-        {
-          deep: true,
-          handler() {
-            // console.log(this.select1, '选中分类的值')
-            if (this.select1.length < 1) {
-              return
-            }
-            var self = this
-            var l = 0
-            var texttile = this.$refs.selected.selectedItems
-            this.drillparam.forEach(function (s) {
-              if (s.label == texttile && s.inputchildren != '') {
-                l++
-                self.inputtextshow = true
-                self.textcontent = s.inputchildren
-              }
-            })
-            if (l == 0) {
-              this.inputtextshow = false
-              this.textcontent = ''
-              this.inputtext = ''
-            }
-          }
-        }
-      ,
-      'sqlobtaindata':
-        {
-          deep: true,
-          handler(val) {
-            if (this.sqlobtaindata.length < 1) {
-              this.$showMessage('数据为空!')
-              return
-            }
-            console.log('测试数据变化')
-            if (this.echartsType == 'pie') {
-              this.datapool = this.sqlobtaindata
-              Dec.setPie(this, 'echarts', this.sqlobtaindata, this.sqlobtaindata)
-            }
-            if (this.echartsType == 'bar') {
-              this.datapool = this.sqlobtaindata
-              var cachebardata = Dec.DataIntegration(this.sqlobtaindata)
-              // console.log(cachebardata, this.bartype, '整合数据及柱状图状态')
-              Dec.setBar(this, 'echarts', cachebardata, this.xname, this.yname, this.seriename, this.idname, this.namesubif)
-            }
-          }
-        },
-    },
-    ready() {
-      // console.log(this.drillshow, '三级页面')
-      // this.model.startDate = Util.toStandardDateString()
-      // this.model.endDate = Util.toStandardDateString()
-    }
-  }
-</script>
-
-<style>
-  .childrendatestyle input {
-    background-color: rgba(1, 207, 242, 0.01);
-    border: solid 1px #6fd9d0;
-    color: white;
-  }
-
-  .childrendatestyle .datepicker-popup {
-    background-color: #023740 !important;
-    border: solid 1px #6fd9d0;
-    color: white !important;
-  }
-
-  .childrendatestyle .datepicker-monthRange span:hover,
-  .datepicker-ctrl p:hover,
-  .datepicker-ctrl i:hover,
-  .datepicker-dateRange span:hover,
-  .datepicker-dateRange-item-hover {
-    background-color: #00f3ff !important;
-    /*border: solid 1px #6fd9d0;*/
-    color: white !important;
-  }
-
-  .childrenselectstyle button {
-    background-color: #013e48 !important;
-    border: solid 1px #6fd9d0 !important;
-    color: white !important;
-  }
-
-  .childrenselectstyle ul {
-    background-color: #013e48 !important;
-    border: solid 1px #6fd9d0 !important;
-
-  }
-
-  .childrenselectstyle div {
-    background-color: #013e48 !important;
-    color: white !important;
-  }
-
-  .childrenselectstyle li a {
-    color: white !important;
-  }
-
-  .childrenselectstyle li a:hover {
-    background-color: #05525f;
-  }
-
-  #childrenorgstyle #vc-chooser .list-group-item {
-    background-color: #013e48 !important;
-    color: #fff !important;
-  }
-
-  #childrenorgstyle #vc-chooser .list-group {
-    background-color: #6fd9d0 !important;
-    color: #fff !important;
-  }
-
-  #childrenorgstyle #vc-chooser button {
-    border: solid 1px #6fd9d0;
-    background-color: rgba(1, 207, 242, 0.01) !important;
-    color: #fff !important;
-  }
-</style>
-<style scoped>
-  label {
-    color: white;
-  }
-
-  .datestyle {
-    padding-left: 3%;
-    width: 100%;
-    height: 9%;
-  }
-
-  .div-1 {
-
-    height: 80%;
-    width: 100%;
-  }
-
-  .title-1 {
-    border-radius: 10px 10px 0px 0px;
-    margin: 0% 2%;
-    padding: 0% 2%;
-    font-size: 1.6em;
-    display: flex;
-    /*实现垂直居中*/
-    align-items: center;
-    justify-content: space-between;
-    color: #fff;
-    height: 8%;
-    width: 96%;
-    background-color: rgba(1, 207, 242, 0.08);
-  }
-
-  .button-1 {
-    height: 65%;
-    width: 6%;
-    margin-right: 1%;
-    background-color: #013e48;
-    border-radius: 6px;
-    border: solid 1px #40cfc3;
-    font-size: 0.65em;
-    float: right;
-  }
-
-  .button-2 {
-    color: white;
-    height: 100%;
-    width: 12%;
-    margin-left: 2%;
-    margin-top: 0.1%;
-    background-color: #013e48;
-    border-radius: 6px;
-    border: solid 1px #40cfc3;
-    font-size: 1em;
-  }
-
-  .button-1:hover {
-    background-color: #40cfc3;
-    border: 1px solid #00ffea;
-    border-radius: 6px;
-  }
-
-  .button-2:hover {
-    background-color: #00ffe9;
-    border: 1px solid #013e48;
-    border-radius: 6px;
-  }
-
-  .button-21 {
-    background-color: #40cfc3;
-    border-radius: 6px;
-    color: white;
-    height: 100%;
-    width: 12%;
-    margin-left: 2%;
-    margin-top: 0.1%;
-    border: solid 1px #40cfc3;
-    font-size: 1em;
-  }
-
-  .button-21:hover {
-    border: 1px solid #00ffea;
-    border-radius: 6px;
-  }
-
-  .drillcontent {
-    margin-left: 2%;
-    width: 52%;
-    height: 100%;
-    float: left;
-    background-color: rgba(1, 207, 242, 0.04);
-  }
-
-  .drilltext {
-    width: 100%;
-    height: 84%;
-    /*background-color: #c7254e;*/
-  }
-
-  .echartsstyle {
-    height: 95%;
-    width: 56%;
-    float: left;
-    /*background-color: white;*/
-  }
-
-  .pool {
-    height: 100%;
-    width: 44%;
-    float: left;
-    /*background-color: #c7254e;*/
-  }
-
-  .drilllist {
-    height: 100%;
-    width: 44%;
-    float: left;
-    background-color: rgba(1, 207, 242, 0.04);
-  }
-
-  .drillliststyle {
-    margin-left: 2%;
-    height: 96%;
-    width: 96%;
-    float: left;
-    background-color: rgba(1, 207, 242, 0.04);
-  }
-
-  .menuselect {
-    margin-top: 1%;
-    margin-left: 4%;
-    height: 16%;
-    width: 96%;
-  }
-
-  .selectstyle {
-    height: 45%;
-  }
-
-  .datestyle label {
-    margin-left: 1%;
-    margin-top: 1%;
-  }
-
-  #selectchildrenid {
-    margin-left: 1%;
-  }
-
-  .history {
-    border-radius: 2px;
-    border: solid 1px #2f9ad1;
-    color: #2f9ad1;
-  }
-
-  .historydiv div {
-    height: 49%;
-  }
-
-  .historydiv {
-    height: 55%;
-  }
-
-  .selectstyle input {
-    width: 20%;
-    height: 95%;
-    background-color: #023740 !important;
-    border: solid 1px #6fd9d0;
-    color: white !important;
-  }
-</style>
+<template>
+  <div>
+    <div class="datestyle">
+      <label for="startDate">开始日期:</label>
+      <datepicker id="startDate" placeholder="开始日期" class="childrendatestyle"
+                  v-model="model.startDate"
+                  :value.sync="model.startDate"
+                  :disabled-days-of-Week="[]"
+                  :format="'yyyy-MM-dd'"
+                  :show-reset-button="reset">
+      </datepicker>
+      <label for="endDate">结束日期:</label>
+      <datepicker id="endDate" placeholder="结束日期" class="childrendatestyle"
+                  v-model="model.endDate"
+                  :value.sync="model.endDate"
+                  :disabled-days-of-Week="[]"
+                  :format="'yyyy-MM-dd'"
+                  :show-reset-button="reset">
+      </datepicker>
+      <!--<label class="control-label">组织机构</label>-->
+      <!--<right-tree :userid.sync='userid' :source.sync='source' @re-res="getRes" id="childrenorgstyle"></right-tree>-->
+    </div>
+    <div class="title-1">
+      <span>{{parenttitle.pagename}} — <span
+        style="font-size: 0.80em">{{parenttitle.pagechildrenname}}</span></span>
+      <button class="button-1" @click="backclick">返回</button>
+    </div>
+    <div class="div-1">
+      <div class="drillcontent" v-show="!listenlistshow">
+        <div class="menuselect">
+          <div class="selectstyle">
+            <!--钻取下拉列表1-->
+            <v-select id="selectid" v-ref:selected class="childrenselectstyle" :value.sync="select0"
+                      :options='drillparam' placeholder='请选择' close-on-select clear-button
+                      @click="getinitDate">
+            </v-select>
+            <!--钻取下拉列表2-->
+            <v-select v-show="childrenselectshow" id="selectchildrenid" v-ref:selected1 class="childrenselectstyle"
+                      :value.sync="select1"
+                      :options='drillchildrenparam' placeholder='请选择' close-on-select clear-button
+                      @click="getinitDate1">
+            </v-select>
+            <input type="text" v-model="inputtext" :placeholder='textcontent'
+                   v-show="inputtextshow">
+            <button class="button-21" @click="listenToChild1">钻取</button>
+            <button class="button-2" @click="listenToChild2">清空</button>
+          </div>
+          <!--<div class="historydiv">-->
+          <!--<div v-show="clickhistoryshow"><span  v-for="s in clickhistory"><span class="history">{{s}}</span>-></span></div>-->
+          <!--<div v-show="clickshow"><span  v-for="s in clickparam"><span class="history">{{s}}</span>-></span></div>-->
+          <!--</div>-->
+        </div>
+        <div class="drilltext" v-show="!listenlistshow">
+          <!--图表-->
+          <div id="echarts" class="echartsstyle"></div>
+          <!--汇总表-->
+          <drill-pool :pooldata="datapool" class="pool"></drill-pool>
+        </div>
+      </div>
+      <!--详细列表-->
+      <drill-list :listsqldata="listsqldata" :templatename="parenttitle.pagechildrenname" class="drilllist"
+                  :class="{'drillliststyle':listenlistshow}"></drill-list>
+    </div>
+  </div>
+</template>
+
+<script>
+  import * as Util from '../../../stores/Util'
+  import * as Dec from '../../../stores/DrillECharts'
+  import * as Drillsql from '../../../stores/DrillSql'
+  import co from 'co'
+
+  export default {
+    name: "DrillData",
+    props: {
+      parenttitle: {
+        pagename: String,   //钻取页面name
+        pagetitle: String,  //钻取页面标题,也是取钻取信息的字段
+        pagechildrenname: String, //钻取页面子标题
+      },   // 钻取页面
+      drillshow: Boolean,
+      idname: String,
+      childname: String,    //获取初始图表的refs -name 进行setBar绘制初始echarts
+      echartsdata: Array,   //初始数据来源所钻取模块，进行汇总显示
+      initdatatr: Object,    //初始化配置文件数据
+      listcondition: {
+        clickparam: String,
+        drillterm: String,
+        tablename: String,
+        drillcondition: String,
+        sqlurl: String,
+        headData: Array,
+        bodyData: Array,
+      },
+    },
+    data() {
+      return {
+        userid: this.$login.f.id,
+        source: `tool.getFullTree(this.getRights().where(row.getType() != $zone$).where(row.getType() == $organization$))`,
+        datapool: [],    //汇总数据
+        model: {         //时间参数
+          startDate: Util.toStandardDateString(),
+          endDate: Util.toStandardDateString(),
+        },
+        drillparam: [],       //一级钻取列表
+        selectparam: '',      //选择字段
+        listsqldata: {        //列表sql参数
+          urlcarrydata: [],
+          headData: [],
+          bodyData: [],
+        },
+        xc: '',
+
+        childrenselectshow: false,       //二级下拉列表show
+        drillchildrenparam: [],          //二级下拉列表
+        inputtextshow: false,             //输入框show
+        select0: [],                     //一级选中值
+        select1: [],                     //二级选中值
+        inputtext: '',                    //输入框
+        textcontent: '',                  //输入框默认内容
+        listenlistshow: false,           //列表展开控制
+        clickhistoryshow: false,         //钻取历史显示
+        clickshow: false,                //点击历史显示
+        datedefault: true,               //默认不加载初始时间
+        datelistif: false,               //时间选择发生变化
+
+        barparam: '',        //饼状图点击字段
+        clickhistory: [],    //钻取历史
+        clickparam: [],      //点击历史
+        sqlobtaindata: [],   //请求后台获取的数据
+        echartsType: '',     //钻取后echarts的类型
+        bartype: '',         //时间分类类型(按年year，按月month)
+
+        initflag: true,    //初始化判断
+        yname: '',       //柱状图y名称
+        xname: '',       //柱状图x名称
+        seriename: '',    //seriename名称
+        namesubif: false,
+      }
+
+    },
+    computed: {
+      selected() {
+        return this.$refs.grid.selected
+      }
+    },
+    methods: {
+      // 获取组织结构
+      getRes(obj) {
+        this.filialeNameStr = obj.res
+        this.filialeCodeStr = obj.resids
+      },
+      // 返回二级页面
+      backclick() {
+        this.$echarts.init(document.getElementById('echarts')).clear()
+        this.$parent.drillshow = false
+        this.initflag = true
+        this.resetParam()
+        console.log(this.datedefault,'时间判断')
+      },
+      //图点击事件
+      eConsole(param) {
+        // 对饼状图进行点击处理
+        if (this.echartsType == 'pie') {
+          // 点击历史
+          this.clickparam.push(param.data.name)
+          // 控制显示历史
+          this.clickshow = true
+          // 点击字段记录
+          this.barparam = param.data
+        }
+      },
+      //钻取按键响应事件
+      listenToChild1() {
+        // 获取下拉列表zhi
+        var texttile = this.$refs.selected.selectedItems
+        var texttile1 = this.$refs.selected1.selectedItems
+        console.log(texttile, '钻取一级类型')
+        console.log(texttile1, '钻取二级类型')
+        // 判断是否进行选择
+        if (typeof texttile == "undefined" || texttile == '') {
+          this.$showMessage('未选择查询类型!')
+          return
+        }
+
+        var conditionparamone = {}  //一级钻取字段对象
+        var conditionparamtow = {}  //二级钻取字段对象
+
+        console.log(this.datedefault,'时间判断')
+        // 填充默认时间
+        if (this.datedefault == true) {
+            Drillsql.startDate = eval(Util.toStandardDateString().toString().substring(0, 4) + '-50') + '-01-01 00:00:00'
+            Drillsql.endDate = this.model.endDate + ' 00:00:00'
+        } else {
+          Drillsql.startDate = this.model.startDate + ' 00:00:00'
+          Drillsql.endDate = this.model.endDate + ' 00:00:00'
+        }
+
+        //特殊处理
+        var param = Drillsql.param
+        var param1 = Drillsql.param1
+
+        if (this.inputtext != '' && this.idname == 'pastscale') {
+          Drillsql.param = this.inputtext
+          Drillsql.param1 = this.inputtext
+        }
+
+        //获取选中一级分类的信息
+        conditionparamone = Drillsql.getDrillParameter(this.parenttitle.pagetitle, this.idname, texttile, '')
+        // 填充钻取状态
+        this.clickhistoryshow = true
+        this.bartype = conditionparamone.name
+        this.clickhistory.push(conditionparamone.label)
+        this.echartsType = conditionparamone.echartsType
+        var dateparam = conditionparamone.dateparam
+        var dateparamif = conditionparamone.dateif
+        if (conditionparamone.echartsType == 'bar') {
+          this.yname = conditionparamone.yname
+          this.xname = conditionparamone.xname
+          this.seriename = conditionparamone.seriename
+          this.namesubif = conditionparamone.namesubif
+        }
+
+
+        // 判断是否有二级钻取
+        if (texttile1 != '') {
+          //获取选中二级分类的信息
+          conditionparamtow = Drillsql.getDrillParameter(this.parenttitle.pagetitle, this.idname, texttile, texttile1)
+          // 填充钻取状态
+          this.bartype = conditionparamtow.name
+          this.clickhistory.push(conditionparamtow.label)
+          this.echartsType = conditionparamtow.echartsType
+          dateparam = conditionparamtow.dateparam
+          dateparamif = conditionparamtow.dateif
+          if (conditionparamtow.echartsType == 'bar') {
+            this.yname = conditionparamtow.yname
+            this.xname = conditionparamtow.xname
+            this.seriename = conditionparamtow.seriename
+            this.namesubif = conditionparamtow.namesubif
+          }
+
+
+          //往期购气特殊处理
+          if (conditionparamtow.label == '高于往期购气量' && this.inputtext < 1) {
+            this.$showMessage('请输入大于1的数!')
+            Drillsql.param = param
+            Drillsql.param1 = param1
+            return
+          }
+          if (conditionparamtow.label == '低于往期购气量' && (this.inputtext > 1 || this.inputtext > 1)) {
+            this.$showMessage('请输入0-1之间的数!')
+            Drillsql.param = param
+            Drillsql.param1 = param1
+            return
+          }
+        } else {
+          conditionparamtow = {}
+        }
+
+        // console.log(conditionparamone, '一级分类信息')
+        // console.log(conditionparamtow, '二级分类信息')
+        // console.log(this.clickhistory, this.echartsType, '图状态信息')
+        // 点击字段进行sql拼接
+        var barcondition = ''
+        if (this.barparam != '' && conditionparamone.barparamif) {
+          barcondition = this.barparam.drilltype + '=\'' + this.barparam.name + '\' and '
+        }
+       var dateif=true
+        // 时间参数进行sql拼接
+        if (this.datalistif && !this.datedefault && !dateparamif) {
+          dateif=false
+          barcondition = dateparam + '>=\'' +  Drillsql.startDate+ '\' and '
+            + dateparam + '<=\'' +  Drillsql.endDate + '\' and ' + barcondition
+        }
+        // 拼接SQL查询条件
+        // keys:分组字段  drillparam:选择字段   drillterm:查询条件
+        // console.log(barcondition, '拼接字段')
+        //重置明细数据
+
+        var sqlparam = ''
+
+        if (JSON.stringify(conditionparamtow) == '{}') {
+          // 获取一级分类sql
+
+          sqlparam = conditionparamone.sqlcondition
+        } else {
+          // 获取二级分类sql
+          sqlparam = conditionparamtow.sqlcondition
+        }
+        var condition =''
+
+        // 拼接点击条件
+        if(this.idname=='usernum'|| this.idname=='pastscale'){
+          condition =barcondition
+        }else {
+          condition =this.bartype+' and '+barcondition
+        }
+
+        //请求后台数据
+        var sqlcondition = {
+          startDate:Drillsql.startDate,
+          endDate:Drillsql.endDate,
+          param:Drillsql.param,
+          param1:Drillsql.param1,
+          param2:Drillsql.param2,
+          condition:condition
+        }
+        if( this.idname=='pastscale'){
+          var s1 = eval('(' + Drillsql.param + '-1)*100')
+          var s1 = s1.toString().substring(0, 5)
+          var s2 = eval(Drillsql.param1 + '*100')
+          var s2 = s2.toString().substring(0, 5)
+          var s3=''
+             s3= conditionparamone.label
+            if(s3=='全部'){
+               s3=''
+            }
+          sqlcondition.s1=s1
+          sqlcondition.s2=s2
+          sqlcondition.s3=s3
+          sqlcondition.param3=' and '+conditionparamone.name
+        }
+        console.log(sqlcondition, '图表请求sql')
+        let getsqldata = Dec.getData(this, sqlparam ,sqlcondition)
+        co(getsqldata)
+        // 时间参数进行sql拼接
+        var pagelist = Drillsql.getDrillList(this.parenttitle.pagetitle, this.idname, '', '')
+        if (this.datalistif && !this.datedefault&&dateif) {
+          barcondition = pagelist[2].dateparam + '>=\'' + this.model.startDate + ' 00:00:00\' and '
+            + pagelist[2].dateparam + '<=\'' + this.model.endDate + ' 00:00:00\' and ' + barcondition
+          this.datelistif = false
+        }
+        console.log(barcondition, '时间sqllist')
+        //获取列表sql
+        if (!conditionparamone.listif) {
+          barcondition = barcondition + '  ' + conditionparamone.name + '\t and '
+        }
+        if (texttile1 != '') {
+          barcondition = barcondition + conditionparamtow.listparam
+        }
+        var list = Drillsql.listparam
+        // 警告特殊处理
+        if (this.idname == 'caveat'||this.idname == 'lossassociation'||this.idname == 'longnotusegas'||this.idname == 'longnotbuygas') {
+          Drillsql.listparam = ''
+        }
+        Drillsql.listparam1 = barcondition
+        console.log(Drillsql.listparam1, '列表钻取条件 ')
+        pagelist = Drillsql.getDrillList(this.parenttitle.pagetitle, this.idname, '', '')
+        console.log(pagelist)
+        var sqllistcondition= [this.idname+'list',20,{listparam:"\""+Drillsql.listparam+"\"",listparam1:"\""+Drillsql.listparam1+"\""}]
+        //调用赋值函数，传递给绘图子组件
+        this.Transfer(sqllistcondition, pagelist[0].headData, pagelist[1].bodyData)
+        Drillsql.param = param
+        Drillsql.param1 = param1
+        Drillsql.listparam = list
+      },
+
+      //清空按键事件
+      listenToChild2() {
+        this.xc.clear()
+        this.resetParam()
+
+        //重新初始化
+        this.initdata()
+      },
+      //重置参数
+      resetParam() {
+        this.barparam = ''     //清空点击字段
+        this.drillparam = []    //清空下拉列表
+        this.select0 = []
+        this.drillchildrenparam = []  //清空子下拉列表
+        this.clickhistory = []       //清空查询历史
+        this.clickparam = []          //清空点击历史
+
+        this.model.startDate = Util.toStandardDateString()   //重置时间为当前时间
+        this.model.endDate = Util.toStandardDateString()
+
+        this.childrenselectshow = false    //关闭子下拉列表
+        this.clickhistoryshow = false      //关闭查询历史显示
+        this.clickshow = false             //关闭点击历史显示
+        this.datelistif = false             //关闭时间更改标志
+        this.datedefault = true             //打开时间初始标志
+        this.inputtextshow = false          //关闭输入框
+        this.textcontent = ''
+        this.inputtext = ''
+      },
+      //传递参数赋值，传递给子组件
+      Transfer(pageurl, headData, bodyData) {
+        this.listsqldata.urlcarrydata = pageurl
+        this.listsqldata.headData = headData
+        this.listsqldata.bodyData = bodyData
+      },
+      //初始化图表数据参数
+      initdata() {
+        console.log(this.echartsdata, '钻取初始化参数')
+        console.log(this.initdatatr, '初始化获取sql的参数')
+
+
+        Drillsql.startDate = this.initdatatr['startDate']
+        Drillsql.endDate = this.initdatatr['endDate']
+        Drillsql.param = this.initdatatr['param']
+        Drillsql.param1 = this.initdatatr['param1']
+        Drillsql.listparam = this.initdatatr['listparam']
+        Drillsql.listparam1 = ''
+
+
+        //特殊处理
+        if (this.parenttitle.pagechildrenname == '主要用户展示') {
+          Drillsql.listparam1 = ' a.f_user_type=\'非民用\' and  '
+        }
+
+        this.$parent.$refs[this.childname].setBar("echarts")
+        this.datapool = this.$parent.childdata
+        var pagelist = Drillsql.getDrillList(this.parenttitle.pagetitle, this.idname, '', '')
+        console.log(pagelist)
+        var sqllistcondition= [this.idname+'list',20,{listparam:"\""+Drillsql.listparam+"\"",listparam1:"\""+Drillsql.listparam1+"\""}]
+
+        //调用赋值函数，传递给绘图子组件
+        this.Transfer(sqllistcondition, pagelist[0].headData, pagelist[1].bodyData)
+
+      },
+
+      getinitDate() {
+        this.inputtextshow = false
+        this.textcontent = ''
+        this.inputtext = ''
+        this.drillparam = Drillsql.getDrillParameter(this.parenttitle.pagetitle, this.idname, '', '')
+      },
+    }
+    ,
+    watch: {
+      'model':
+        {
+          deep: true,
+          handler(val) {
+            if(!this.$parent.drillshow){
+              return
+            }
+            this.datedefault = false
+            this.datalistif = true
+          }
+          ,
+        }
+      ,
+      'echartsdata':
+        {
+          deep: true,
+          handler(val) {
+            if (typeof this.echartsdata !== "undefined" && this.drillshow == true && this.initflag) {
+              this.initdata()
+              this.initflag = false
+            }
+          }
+          ,
+          immediate: true
+        }
+      ,
+      'drillshow':
+        {
+          deep: true,
+          handler(val) {
+            if (typeof this.echartsdata !== "undefined" && this.drillshow == true && this.initflag) {
+              this.initdata()
+              this.initflag = false
+            }
+          }
+          ,
+          immediate: true
+        }
+      ,
+      'select0':
+        {
+          deep: true,
+          handler() {
+            // console.log(this.select0, '选中分类的值')
+            if (this.select0.length < 1) {
+              return
+            }
+            this.select1 = ''
+
+            this.childrenselectshow = false
+            var self = this
+            this.drillparam.forEach(function (s) {
+              if (self.select0 == s.value && s.name == 't_area') {
+                let gen = Dec.select(self, 't_area', '1=1')
+                co(gen)
+              }
+            })
+            setTimeout(() => {
+              self.drillparam.forEach(function (s) {
+                if (s.value == self.select0) {
+                  if (typeof s.children != "undefined" && JSON.stringify(s.children) != '[]') {
+                    self.childrenselectshow = true
+                    self.drillchildrenparam = s.children
+                  }
+                }
+
+              })
+            }, 500)
+          }
+        }
+      ,
+      'select1':
+        {
+          deep: true,
+          handler() {
+            // console.log(this.select1, '选中分类的值')
+            if (this.select1.length < 1) {
+              return
+            }
+            var self = this
+            var l = 0
+            var texttile = this.$refs.selected.selectedItems
+            this.drillparam.forEach(function (s) {
+              if (s.label == texttile && s.inputchildren != '') {
+                l++
+                self.inputtextshow = true
+                self.textcontent = s.inputchildren
+              }
+            })
+            if (l == 0) {
+              this.inputtextshow = false
+              this.textcontent = ''
+              this.inputtext = ''
+            }
+          }
+        }
+      ,
+      'sqlobtaindata':
+        {
+          deep: true,
+          handler(val) {
+            if (this.sqlobtaindata.length < 1) {
+              this.$showMessage('数据为空!')
+              return
+            }
+            console.log('测试数据变化')
+            if (this.echartsType == 'pie') {
+              this.datapool = this.sqlobtaindata
+              Dec.setPie(this, 'echarts', this.sqlobtaindata, this.sqlobtaindata)
+            }
+            if (this.echartsType == 'bar') {
+              this.datapool = this.sqlobtaindata
+              var cachebardata = Dec.DataIntegration(this.sqlobtaindata)
+              // console.log(cachebardata, this.bartype, '整合数据及柱状图状态')
+              Dec.setBar(this, 'echarts', cachebardata, this.xname, this.yname, this.seriename, this.idname, this.namesubif)
+            }
+          }
+        },
+    },
+    ready() {
+      // console.log(this.drillshow, '三级页面')
+      // this.model.startDate = Util.toStandardDateString()
+      // this.model.endDate = Util.toStandardDateString()
+    }
+  }
+</script>
+
+<style>
+  .childrendatestyle input {
+    background-color: rgba(1, 207, 242, 0.01);
+    border: solid 1px #6fd9d0;
+    color: white;
+  }
+
+  .childrendatestyle .datepicker-popup {
+    background-color: #023740 !important;
+    border: solid 1px #6fd9d0;
+    color: white !important;
+  }
+
+  .childrendatestyle .datepicker-monthRange span:hover,
+  .datepicker-ctrl p:hover,
+  .datepicker-ctrl i:hover,
+  .datepicker-dateRange span:hover,
+  .datepicker-dateRange-item-hover {
+    background-color: #00f3ff !important;
+    /*border: solid 1px #6fd9d0;*/
+    color: white !important;
+  }
+
+  .childrenselectstyle button {
+    background-color: #013e48 !important;
+    border: solid 1px #6fd9d0 !important;
+    color: white !important;
+  }
+
+  .childrenselectstyle ul {
+    background-color: #013e48 !important;
+    border: solid 1px #6fd9d0 !important;
+
+  }
+
+  .childrenselectstyle div {
+    background-color: #013e48 !important;
+    color: white !important;
+  }
+
+  .childrenselectstyle li a {
+    color: white !important;
+  }
+
+  .childrenselectstyle li a:hover {
+    background-color: #05525f;
+  }
+
+  #childrenorgstyle #vc-chooser .list-group-item {
+    background-color: #013e48 !important;
+    color: #fff !important;
+  }
+
+  #childrenorgstyle #vc-chooser .list-group {
+    background-color: #6fd9d0 !important;
+    color: #fff !important;
+  }
+
+  #childrenorgstyle #vc-chooser button {
+    border: solid 1px #6fd9d0;
+    background-color: rgba(1, 207, 242, 0.01) !important;
+    color: #fff !important;
+  }
+</style>
+<style scoped>
+  label {
+    color: white;
+  }
+
+  .datestyle {
+    padding-left: 3%;
+    width: 100%;
+    height: 9%;
+  }
+
+  .div-1 {
+
+    height: 80%;
+    width: 100%;
+  }
+
+  .title-1 {
+    border-radius: 10px 10px 0px 0px;
+    margin: 0% 2%;
+    padding: 0% 2%;
+    font-size: 1.6em;
+    display: flex;
+    /*实现垂直居中*/
+    align-items: center;
+    justify-content: space-between;
+    color: #fff;
+    height: 8%;
+    width: 96%;
+    background-color: rgba(1, 207, 242, 0.08);
+  }
+
+  .button-1 {
+    height: 65%;
+    width: 6%;
+    margin-right: 1%;
+    background-color: #013e48;
+    border-radius: 6px;
+    border: solid 1px #40cfc3;
+    font-size: 0.65em;
+    float: right;
+  }
+
+  .button-2 {
+    color: white;
+    height: 100%;
+    width: 12%;
+    margin-left: 2%;
+    margin-top: 0.1%;
+    background-color: #013e48;
+    border-radius: 6px;
+    border: solid 1px #40cfc3;
+    font-size: 1em;
+  }
+
+  .button-1:hover {
+    background-color: #40cfc3;
+    border: 1px solid #00ffea;
+    border-radius: 6px;
+  }
+
+  .button-2:hover {
+    background-color: #00ffe9;
+    border: 1px solid #013e48;
+    border-radius: 6px;
+  }
+
+  .button-21 {
+    background-color: #40cfc3;
+    border-radius: 6px;
+    color: white;
+    height: 100%;
+    width: 12%;
+    margin-left: 2%;
+    margin-top: 0.1%;
+    border: solid 1px #40cfc3;
+    font-size: 1em;
+  }
+
+  .button-21:hover {
+    border: 1px solid #00ffea;
+    border-radius: 6px;
+  }
+
+  .drillcontent {
+    margin-left: 2%;
+    width: 52%;
+    height: 100%;
+    float: left;
+    background-color: rgba(1, 207, 242, 0.04);
+  }
+
+  .drilltext {
+    width: 100%;
+    height: 84%;
+    /*background-color: #c7254e;*/
+  }
+
+  .echartsstyle {
+    height: 95%;
+    width: 56%;
+    float: left;
+    /*background-color: white;*/
+  }
+
+  .pool {
+    height: 100%;
+    width: 44%;
+    float: left;
+    /*background-color: #c7254e;*/
+  }
+
+  .drilllist {
+    height: 100%;
+    width: 44%;
+    float: left;
+    background-color: rgba(1, 207, 242, 0.04);
+  }
+
+  .drillliststyle {
+    margin-left: 2%;
+    height: 96%;
+    width: 96%;
+    float: left;
+    background-color: rgba(1, 207, 242, 0.04);
+  }
+
+  .menuselect {
+    margin-top: 1%;
+    margin-left: 4%;
+    height: 16%;
+    width: 96%;
+  }
+
+  .selectstyle {
+    height: 45%;
+  }
+
+  .datestyle label {
+    margin-left: 1%;
+    margin-top: 1%;
+  }
+
+  #selectchildrenid {
+    margin-left: 1%;
+  }
+
+  .history {
+    border-radius: 2px;
+    border: solid 1px #2f9ad1;
+    color: #2f9ad1;
+  }
+
+  .historydiv div {
+    height: 49%;
+  }
+
+  .historydiv {
+    height: 55%;
+  }
+
+  .selectstyle input {
+    width: 20%;
+    height: 95%;
+    background-color: #023740 !important;
+    border: solid 1px #6fd9d0;
+    color: white !important;
+  }
+</style>