manage-client 3.2.86-4 → 3.2.86-aodeToV4

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

@@ -1,918 +1,792 @@
-<template>
-  <div>
-    <div class="datestyle">
-      <label for="startDate" v-if="searchs!=='longnotbuygas'&&searchs!=='longnotusegas'&&searchs!=='lossassociation'">开始日期:</label>
-      <datepicker id="startDate" placeholder="开始日期" class="childrendatestyle"
-                  v-if="searchs!=='longnotbuygas'&&searchs!=='longnotusegas'&&searchs!=='lossassociation'"
-                  v-model="model.startDate"
-                  :value.sync="model.startDate"
-                  :disabled-days-of-Week="[]"
-                  :format="'yyyy-MM-dd'"
-                  :show-reset-button="reset">
-      </datepicker>
-      <label for="endDate"  v-if="searchs!=='longnotbuygas'&&searchs!=='longnotusegas'&&searchs!=='lossassociation'">结束日期:</label>
-      <datepicker id="endDate" placeholder="结束日期" class="childrendatestyle"
-                  v-if="searchs!=='longnotbuygas'&&searchs!=='longnotusegas'&&searchs!=='lossassociation'"
-                  v-model="model.endDate"
-                  :value.sync="model.endDate"
-                  :disabled-days-of-Week="[]"
-                  :format="'yyyy-MM-dd'"
-                  :show-reset-button="reset">
-      </datepicker>
-      <div class="childrendatestyle datepicker " v-if="searchs==='longnotbuygas'">
-        <input type="text" style="width:30%" class="childrendatestyle1" v-model="days1">
-        <label>< 未购气天数 <=</label>
-        <input type="text" style="width:30%" class="childrendatestyle1" v-model="days2">
-      </div>
-      <div class="childrendatestyle datepicker " v-if="searchs==='lossassociation'">
-        <input type="text" style="width:30%" class="childrendatestyle1" v-model="days1">
-        <label>< 失联天数<= </label>
-        <input type="text" style="width:30%" class="childrendatestyle1" v-model="days2">
-      </div>
-      <div class="childrendatestyle datepicker " v-if="searchs==='longnotusegas'">
-        <input type="text" style="width:30%" class="childrendatestyle1" v-model="days1">
-        <label>< 未使用天数<=</label>
-        <input type="text" style="width:30%" class="childrendatestyle1" v-model="days2">
-      </div>
-      <!--<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 '../../../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 {
-        days1:0,
-        days2:'',
-        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,
-        searchs:''
-      }
-
-    },
-    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() {
-        console.log('进入钻取----------------------------------------------------------------------')
-        // 获取下拉列表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,'时间判断')
-        // 填充默认时间
-        console.log('---------------钻取时间前---------------------------')
-        console.log(this.model.startDate)
-        console.log(this.model.endDate)
-        if (this.datedefault == true) {
-          Drillsql.startDate = eval(Util.toStandardDateString().toString().substring(0, 4) + '-50') + '-01-01'
-          Drillsql.endDate = this.model.endDate
-        } else {
-          Drillsql.startDate = this.model.startDate
-          Drillsql.endDate = this.model.endDate
-        }
-        console.log('==========================钻取时间后后后后后后后后后---------------------------')
-        console.log(this.model.startDate)
-        console.log(this.model.endDate)
-
-        //特殊处理
-        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 = ' and ' + this.barparam.drilltype + '=\'' + this.barparam.name + '\' '
-          console.log("========================================listenToChild1拼条件了",barcondition)
-        }
-       var dateif=true
-        // 时间参数进行sql拼接
-        if (this.datalistif && !this.datedefault && !dateparamif && this.searchs!=='longnotbuygas'&&this.searchs!=='longnotusegas'&&this.searchs!=='lossassociation') {
-          dateif=false
-          barcondition = dateparam + '>=to_date(\'' +  Drillsql.startDate+ '\',\'yyyy-MM-dd\') and '
-            + dateparam + '<=to_date(\'' +  Drillsql.endDate + '\',\'yyyy-MM-dd \')' + barcondition
-        }
-        console.log('拼接的参数后的数据--------------------------')
-        console.log(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 {
-          if(!barcondition){
-            condition =this.bartype
-          }else{
-            condition =this.bartype+' and '+barcondition
-          }
-        }
-        if(!barcondition){
-          barcondition=conditionparamone.name?(' '+conditionparamone.name):''+conditionparamtow.name?(' and '+conditionparamtow.name):' '
-        }else{
-          barcondition+=' and '+ barcondition
-        }
-        if(!this.days1){
-          this.days1=0
-        }
-
-      if(this.searchs==='longnotbuygas'){ // 长期未购气
-        barcondition = barcondition+' and CAST(trunc(SYSDATE)- NVL(F_SELLINGGAS_MAX_DATE,a.f_input_date) as int) > ' + this.days1
-        if(this.days2){
-          barcondition = barcondition+ ' and CAST(trunc(SYSDATE)- NVL(F_SELLINGGAS_MAX_DATE,a.f_input_date) as int) <= ' + this.days2
-        }
-      }else if(this.searchs==='longnotusegas'){ // 长期未用气
-        barcondition =barcondition+ ' and CAST(trunc(SYSDATE)- trunc(F_HANDPLAN_MAX_HANDDATE) as int) >' + this.days1
-        if(this.days2){
-          barcondition = barcondition+ ' and CAST(trunc(SYSDATE)- trunc(F_HANDPLAN_MAX_HANDDATE) as int) <='+this.days2
-        }
-      }else if(this.searchs==='lossassociation'){ // 失联
-        barcondition = barcondition+' and slday >'+this.days1
-        if(this.days2){
-          barcondition =barcondition+ ' and  slday <='+this.days2
-        }
-    }
-        condition=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
-          if(conditionparamone.name){
-            console.log("拼conditionparamone.name")
-            sqlcondition.param3=' and '+conditionparamone.name
-          }
-        }
-        console.log(sqlcondition, '图表请求sql')
-        let getsqldata = Dec.getData(this, sqlparam ,sqlcondition)
-        co(getsqldata)
-        // 时间参数进行sql拼接
-        console.log("=======================准备调用getDrillList!!!!"+this.parenttitle.pagetitle+"========"+this.idname)
-        var pagelist = Drillsql.getDrillList(this.parenttitle.pagetitle, this.idname, '', '')
-        console.log("=======================!!!!pagelist："+JSON.stringify(pagelist[2]))
-        console.log("this.searchs:"+this.searchs+"======this.datalistif:"+this.datalistif+"======!this.datedefault:"+!this.datedefault+"======dateif:"+dateif)
-        if (this.datalistif && !this.datedefault&&dateif&&this.searchs==='longnotbuygas'&&this.searchs==='longnotusegas'&&this.searchs==='lossassociation') {
-          this.datelistif = false
-        }
-        console.log(barcondition, '时间sqllist')
-        //获取列表sql
-        if (!conditionparamone.listif) {
-          console.log("!!!!!!!!!!!!!!!!!!!!!!!conditionparamone.listif拼了barcondition",conditionparamone.name)
-          barcondition = barcondition
-        }
-        if (texttile1 != '' && this.searchs!=='lossassociation' && this.searchs!=='longnotusegas' && this.searchs!=='longnotbuygas' ) {
-          barcondition = barcondition + '\t and '+ 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",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.idname)
-        this.searchs=this.idname
-        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=\'非民用\' '
-        }
-
-        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, '', '')
-      },
-      //整理数据
-      notgasData(res) {
-        var nobuygasdata=[]
-        let num = [0, 0, 0, 0, 0, 0 ]
-        num[0] = res[0].week
-        num[1] = res[0].month
-        num[2] = res[0].tmonth
-        num[3] = res[0].harfyear
-        num[4] = res[0].year
-        num[5] = res[0].more
-        var date = ['0-7', '7-30', '30-90', '90-180', '180-360','>360']
-        var i = 0
-        num.forEach((row)=>{
-
-          let item = {}
-          item.name = date[i]
-          item.value = num[i]
-          item.type = this.select1[0]?this.select1[0]:this.select0[0]
-          nobuygasdata.push(item)
-          i++
-        })
-
-        console.log("@@@@@@@@@@@@@@@@",nobuygasdata)
-        return nobuygasdata
-      },
-    }
-    ,
-    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) {
-            console.log("!!!!!!!!!!!!!!!!!!!!!!drillshow变了！",val)
-            if(val){
-              this.datedefault = false
-              this.datalistif = true
-            }
-            return
-            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) {
-                console.log("select0!!!!!!!!!!!!!!",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,
-          async handler(val) {
-            console.log("==================>",val)
-            if (this.sqlobtaindata.length < 1) {
-              this.$showMessage('数据为空!')
-              return
-            }
-
-            if(this.searchs==='longnotbuygas'||this.searchs==='longnotusegas'||this.searchs==='lossassociation'){
-              var dates=[]
-              dates=await this.notgasData(this.sqlobtaindata)
-                if (this.echartsType == 'pie') {
-                  this.datapool = dates
-                  Dec.setPie(this, 'echarts', this.sqlobtaindata, this.sqlobtaindata)
-                }
-                if (this.echartsType == 'bar') {
-                  this.datapool = dates
-
-                  var cachebardata = await Dec.DataIntegration(dates)
-                  console.log(cachebardata, this.bartype, '整合数据及柱状图状态')
-                  Dec.setBar(this, 'echarts', cachebardata, this.xname, this.yname, this.seriename, this.idname, this.namesubif)
-                }
-            }else{
-
-              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;
-  }
-  .childrendatestyle1{
-    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 '../../../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 + '>=to_date(\'' +  Drillsql.startDate+ '\',\'yyyy-MM-dd hh24:mi:ss\') and '
+            + dateparam + '<=to_date(\'' +  Drillsql.endDate + '\',\'yyyy-MM-dd hh24:mi:ss\') 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 + '>=to_date(\'' + this.model.startDate + ' 00:00:00\',\'yyyy-MM-dd hh24:mi:ss\') and '
+            + pagelist[2].dateparam + '<=to_date(\'' + this.model.endDate + ' 00:00:00\',\'yyyy-MM-dd hh24:mi:ss\') 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) {
+            return
+            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>