manage-client 3.2.86-aode → 3.2.86-aodeToV4

package/src/components/safecheck/analysis/SafeHiddenAnaly.vue

@@ -1,932 +1,932 @@
-<template>
-  <div class="frame">
-    <div class="top">
-      <img src="../../image/组6.png"/>
-      <span>{{date}}</span>
-    </div>
-    <div class="main">
-      <div class="row" style="height: auto;color: #9effff;">
-        <div class="col-sm-3" style="width: 22%;padding: 0 0 0 20px;z-index: 99999999;">
-          <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'"
-                      :show-reset-button="reset">
-          </datepicker>
-        </div>
-        <div class="col-sm-3" style="width: 22%">
-          <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'"
-                      :show-reset-button="reset">
-          </datepicker>
-        </div>
-        <div class="col-sm-3" style="width: 22%">
-          <label class="control-label">组织机构</label>
-          <right-tree :userid.sync='userid' :source.sync='source' @re-res="getRes"
-                      class="childrenorgstyle"></right-tree>
-        </div>
-      </div>
-      <div class="main-1">
-        <div class="bar-1" id="hidden1"></div>
-        <div class="bar-2" id="hidden2"></div>
-        <div class="bar-3">
-          <label style="text-align: center"><p style="color: #c3325f">{{hiddenclick}}</p>解决方案</label>
-          <div style="height: 77%;overflow-y: auto;color: white;text-align: center">
-            <p @click="amplification" style="text-align: center">
-              1.****************************<br/>
-              1.****************************<br/>
-              1.****************************<br/>
-              1.****************************<br/>
-              1.****************************<br/>
-              1.****************************<br/>
-              1.****************************<br/>
-              1.****************************<br/>
-              1.****************************<br/>
-              1.****************************<br/>
-              1.****************************<br/>
-              1.****************************<br/>
-              1.****************************<br/>
-              1.****************************<br/>
-            </p>
-          </div>
-        </div>
-      </div>
-
-      <div class="main-2">
-        <div class="bar-4" id="hidden3"></div>
-        <div class="bar-5">
-          <criteria-paged :model="model1" v-ref:paged style="overflow-x: auto; overflow-y: auto;"
-                          id="childrencriteriastyle">
-            <data-grid :model="model" partial='list' v-ref:grid :classname="'table'" id="childrendatagridstyle"
-                       :customize="false">
-              <template partial='head'>
-                <!--<th>-->
-
-                <!--<h4 align="center">详情表</h4>-->
-                <!--</th>-->
-                <th class="thstyle" @click="$parent.$parent.$parent.exportss" style="color: #c3325f">用户编号</th>
-                <th class="thstyle">用户名称</th>
-                <th class="thstyle">小区</th>
-                <th class="thstyle">用户地址</th>
-                <th class="thstyle">隐患类型</th>
-              </template>
-              <template partial='body'>
-                <tr class="tr-1">
-                  <td class="td-1" style="text-align: center;">{{row.f_userinfo_code}}</td>
-                  <td class="td-1" style="text-align: center;">{{row.f_user_name}}</td>
-                  <td class="td-1" style="text-align: center;">{{row.f_residential_area}}</td>
-                  <td class="td-1" style="text-align: center;">{{row.f_address}}</td>
-                  <td class="td-1" style="text-align: center;">{{row.f_item_name}}</td>
-                </tr>
-              </template>
-              <!--              <template partial='foot'></template>-->
-            </data-grid>
-          </criteria-paged>
-
-        </div>
-      </div>
-    </div>
-    <modal :show.sync="show" v-ref:modal backdrop="false">
-      <header slot="modal-header" class="modal-header text-center">
-        <button type="button" class="close" @click="close"><span>&times;</span></button>
-        <h4 class="modal-title"><p style="color: #c3325f">{{hiddenclick}}</p>{{opera}}</h4>
-
-      </header>
-      <article slot="modal-body">
-        <div class="auto col-sm-11 col-md-offset-1" style="margin-top: 10px;text-align: center" v-if="!exportshow">
-          1.****************************<br/>
-          1.****************************<br/>
-          1.****************************<br/>
-          1.****************************<br/>
-          1.****************************<br/>
-          1.****************************<br/>
-          1.****************************<br/>
-          1.****************************<br/>
-          1.****************************<br/>
-          1.****************************<br/>
-          1.****************************<br/>
-          1.****************************<br/>
-          1.****************************<br/>
-          1.****************************<br/>
-        </div>
-        <div style="margin-top: 10px;height: 400px;width: 400px" v-if="exportshow">
-          <export-excel :data="condition"
-                        :field="filename"
-                        sqlurl="rs/logic/exportfile" sql-name="getHidden3" :template-name='templatename'
-                        :choose-col="true"></export-excel>
-        </div>
-      </article>
-      <footer slot="modal-footer" class="modal-footer">
-      </footer>
-    </modal>
-  </div>
-</template>
-
-<script>
-  import * as Util from '../../../stores/Util'
-  import * as DataSql from '../../../stores/DataSql'
-  import {PagedList} from "vue-client";
-
-  export default {
-    name: "TelephoneAnaly",
-    title: "大屏分析",
-    data() {
-      return {
-        date: '',
-        timer: '',
-        model: {         //时间参数
-          startDate: Util.toStandardDateString().substring(0, 7),
-          endDate: Util.toStandardDateString().substring(0, 7),
-        },
-        userid: this.$login.f.id,
-        source: `tool.getFullTree(this.getRights().where(row.getType() != $zone$).where(row.getType() == $organization$))`,
-        selldata: [],
-        xc: '',
-        xc1: '',
-        xc2: '',
-        hiddenclick: '',
-        areaclick: '',
-        hiddendata: [],
-        hiddendata2: [],
-        model1: new PagedList(),
-        filialeNameStr: '',
-        filialeCodeStr: '',
-        show: false,
-        opera: '',
-        condition: {},
-        filename: {
-          f_userinfo_code: '用户编号',
-          f_user_name: '用户名称',
-          f_residential_area: '小区',
-          f_address: '用户地址',
-          f_item_name: '隐患类型',
-        },
-        templatename: '',
-        exportshow: false,
-      }
-    },
-    methods: {
-      setBar() {
-        this.xc = this.$echarts.init(document.getElementById('hidden1'))
-
-        var scale = 1
-
-        var lname = []
-        var maxdata = 0
-        var kdata = []
-        this.selldata.forEach(function (s) {
-          if (s.value > maxdata) {
-            maxdata = s.value
-          }
-          lname.push(s.name)
-        })
-        this.selldata.forEach(function () {
-          kdata.push(maxdata)
-        })
-        var maxindex = this.selldata.length - 1
-        var option1 = {
-          tooltip: {
-            trigger: 'axis',
-            axisPointer: { // 坐标轴指示器，坐标轴触发有效
-              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
-            },
-            formatter: function (params, ticket, callback) {
-              return params[0].marker + '   <span style="font-weight: normal">' + params[0].name + '</span>&nbsp;&nbsp;&nbsp; <span style="color:#e1e52a;font-weight: bolder">' + params[0].value + '</span>';
-            },
-            textStyle: {
-              fontSize: 16 * scale
-            },
-            show: true,
-            alwaysShowContent: true,
-            backgroundColor: '#01396d',
-            // borderColor :'rgba(13, 109, 180)',
-            borderWidth: 0,
-            hideDelay: 100,
-            triggerOn: 'mousemove',
-            padding: 10 * scale,
-            enterable: true,
-            position: function (point, params, dom, rect, size) {
-              //其中point为当前鼠标的位置，size中有两个属性：viewSize和contentSize，分别为外层div和tooltip提示框的大小
-              var x = point[0]; //
-              var y = point[1];
-              var viewWidth = size.viewSize[0];
-              var viewHeight = size.viewSize[1];
-              var boxWidth = size.contentSize[0];
-              var boxHeight = size.contentSize[1];
-              var posX = 0; //x坐标位置
-              var posY = 0; //y坐标位置
-              if (x < boxWidth) { //左边放不开
-                posX = 5;
-              } else { //左边放的下
-                posX = x - boxWidth;
-              }
-
-              if (y < boxHeight) { //上边放不开
-                posY = 5;
-              } else { //上边放得下
-                posY = y - boxHeight;
-              }
-              posX = posX - 20
-              return [posX, posY];
-            },
-            extraCssText: 'width: auto;height:auto;',
-          },
-          grid: {
-            left: '3%',
-            top: '4%',
-            bottom: '1%',
-            containLabel: true
-          },
-          xAxis: {
-            type: 'value',
-            scale: true,
-            position: 'bottom',
-            min: 0,
-            nameGap: 30,
-            splitLine: {
-              show: false
-            },
-            axisLine: {
-              show: true,
-              lineStyle: {
-                color: '#08738e'
-              }
-            },
-            axisTick: {
-              show: false
-            },
-            axisLabel: {
-              margin: 8,
-              textStyle: {
-                color: '#95bad7'
-              }
-            },
-          },
-          yAxis: {
-            type: 'category',
-            //  name: 'TOP 20',
-            axisLine: {
-              show: true,
-              lineStyle: {
-                color: '#08738e'
-              }
-            },
-            axisTick: {
-              show: false,
-              lineStyle: {
-                color: '#ddd'
-              }
-            },
-            axisLabel: {
-              interval: 0,
-              textStyle: {
-                color: '#15dce2'
-              }
-            },
-            data: lname
-          },
-          dataZoom: [{
-            type: "inside",
-            startValue: maxindex - 5,
-            endValue: maxindex,
-            zoomLock: true,
-            throttle: 10,
-            orient: 'vertical',
-          }],
-          series: [
-            {
-              name: '',
-              type: 'bar',
-              barWidth: '30%',
-              itemStyle: {
-                barBorderRadius: [0, 16, 16, 0],
-                color: '#6fd9d0',
-              },
-              emphasis: {
-                itemStyle: {
-                  color: '#ffff2c'
-                }
-              },
-              zlevel: 2,
-              data: this.selldata
-            },
-            {
-              type: 'bar',
-              barGap: '-100%',
-              barWidth: '30%',
-              itemStyle: {
-                normal: {
-                  barBorderRadius: [0, 16, 16, 0],
-                  color: '#2a374e'
-                },
-              },
-              labelLine: {
-                show: true,
-              },
-              zlevel: 0,
-              data: kdata
-            }
-          ]
-        }
-
-        this.xc.setOption(option1)
-        var self = this
-        this.xc.on('click', function (params) {
-          console.log(params)
-          self.hiddenclick = params.name
-
-        })
-      },
-      setBar1() {
-        this.xc1 = this.$echarts.init(document.getElementById('hidden2'))
-        var scale = 1
-        var xAxisData = [];
-        var legendData = [this.hiddenclick];
-        var serieData = [];
-        var metaDate = []
-
-        this.hiddendata.forEach(function (s) {
-
-          xAxisData.push(s.name.substring(2, 7))
-          metaDate.push(s.value)
-        })
-
-        var yname = '      月份'
-        for (var v = 0; v < legendData.length; v++) {
-          var serie = {
-            name: legendData[v],
-            type: 'line',
-            symbol: "circle",
-            symbolSize: 5 * scale,
-            color: '#a39241',
-            lineStyle: {
-              width: 1,
-              color: '#a39241'
-            },
-            label: {
-              show: true,
-              position: 'top',
-              textStyle: { //数值样式
-                color: '#fefefe',
-                fontSize: 14 * scale
-              }
-            },
-            areaStyle: {
-              color: {
-                type: 'linear',
-                x: 0,
-                y: 0,
-                x2: 0,
-                y2: 1,
-                colorStops: [{
-                  offset: 1,
-                  color: '#031a2b' // 0% 处的颜色
-                },
-                  {
-                    offset: 0.5,
-                    color: '#273531' // 50% 处的颜色
-                  },
-                  {
-                    offset: 0,
-                    color: '#444c3e' // 100% 处的颜色
-                  }],
-                globalCoord: false // 缺省为 false
-              },
-            },
-
-            data: metaDate
-          }
-          serieData.push(serie)
-        }
-        var colors = ["#036BC8", "#4A95FF", "#5EBEFC", "#2EF7F3", "#FFFFFF"]
-
-
-        this.xc1.setOption({
-          title: {text: '', textAlign: 'left', textStyle: {color: "#fff", fontSize: "16*scale", fontWeight: "normal"}},
-
-          color: colors,
-          grid: {left: '2%', top: "15%", bottom: "1%", right: "8%", containLabel: true},
-          tooltip: {
-            formatter: function (params) {
-              if (params.data == '') {
-                return ''
-              }
-              var result = ''
-              params.forEach(function (item) {
-                result += item.seriesName + " : " + item.value + "</br>";
-              });
-              return params[0].axisValue + '月<br/>' + result
-            },
-            axisPointer: {type: 'line', lineStyle: {width: 0}},
-            trigger: 'axis',
-            extraCssText: 'width: auto;height: auto;'
-          },
-          xAxis: [
-            {
-              name: yname,
-              type: 'category',
-              nameTextStyle: {
-                fontSize: 12 * scale,
-                color: '#15dce2',
-                padding: [40 * scale, 0, 0, -40 * scale],
-              },
-              boundaryGap: true,
-              axisLine: {show: true, lineStyle: {color: '#04669e', width: 1}},
-              axisLabel: {interval: 0, textStyle: {color: '#ffffff', fontSize: 14 * scale}},
-              axisTick: {show: false},
-              data: xAxisData,
-            },
-          ],
-          yAxis: [
-            {
-              name: '隐患数量',
-              nameTextStyle: {
-                fontSize: 12 * scale,
-                padding: [-12 * scale, 35 * scale, 0, 0],
-              },
-              axisTick: {show: false},
-              splitLine: {show: true, lineStyle: {type: 'dashed', color: '#004371'}},
-              axisLabel: {textStyle: {color: '#15dce2', fontSize: 12 * scale}},
-              axisLine: {show: false, lineStyle: {color: '#15dce2', fontSize: 12 * scale}},
-            },
-          ],
-          series: serieData
-        })
-      },
-      setBar2() {
-        this.xc2 = this.$echarts.init(document.getElementById('hidden3'))
-        var scale = 0.8
-        let echartData = this.hiddendata2
-
-        let legendname = []
-        echartData.forEach(function (s) {
-          legendname.push(s.name)
-        })
-        var rich = {
-          white: {
-            color: "#fff",
-            align: 'center',
-            fontSize: 14 * scale,
-
-            padding: [8 * scale, 8 * scale]
-          },
-          blue: {
-            color: '#e1e52a',
-            fontSize: 16 * scale,
-            align: 'center',
-            padding: [8 * scale, 8 * scale]
-          },
-          hr: {
-            borderColor: '#64d8d4',
-            width: '100%',
-            borderWidth: 0.5,
-            height: 0,
-          },
-        }
-        var total = 0; //用户总和
-        echartData.forEach(function (value) {
-          total += value.value;
-        });
-        this.xc2.setOption({
-          title: [],
-          legend: {
-            show: false
-          },
-          grid: {
-            left: '10%',
-            right: '10%',
-            top: '0',
-            bottom: '0'
-          },
-
-          series: [
-            {
-              name: 'Line 1',
-              type: 'pie',
-              animation: false,
-              clockWise: false,
-              radius: ['21%', '22%'],
-              center: ['50%', '50%'],
-              itemStyle: {
-                normal: {
-                  label: {
-                    show: false
-                  },
-                  labelLine: {
-                    show: false
-                  },
-                }
-              },
-              hoverAnimation: false,
-              tooltip: {
-                show: false
-              },
-              data: [{
-                value: 100,
-                name: '02',
-                itemStyle: {
-                  normal: {
-                    color: '#29b7ff',//未完成的圆环的颜色
-                    label: {
-                      show: false
-                    },
-                    labelLine: {
-                      show: false
-                    }
-                  }
-                }
-              }]
-            },
-            {
-              name: '总用户数',
-              type: 'pie',
-              radius: ['26%', '40%'],
-              center: ['50%', '50%'],
-              minAngle: 15,//最小角度
-              startAngle: 300, //起始角度
-              hoverAnimation: false,
-              color: ['#6fd9d0', '#ede61f', '#e5e280', '#6e93e0', '#c7e06e', '#e68d8d'],
-              label: {
-                normal: {
-                  borderWidth: 1,
-                  borderRadius: 4,
-                  backgroundColor: '#004b5c',
-                  borderColor: '#64d8d4',
-                  formatter: function (params, ticket, callback) {
-                    var total = 0; //用户总数量
-                    var percent = 0;
-                    echartData.forEach(function (value, index, array) {
-                      total += value.value;
-                    });
-                    percent = ((params.value / total) * 100).toFixed(1);
-                    return '{white|' + params.name + '}\n{hr|}\n{blue|  ' + params.value + '}{blue|   ' + percent + '%}';
-                  },
-                  rich: rich,
-                }
-              },
-              labelLine: {
-                normal: {
-                  length: 10,
-                  length2: 12,
-                }
-              },
-              data: echartData
-            },
-            {
-              name: 'Line 2',
-              type: 'pie',
-              animation: false,
-              clockWise: false,
-              radius: ['44%', '45%'],
-              center: ['50%', '50%'],
-              itemStyle: {
-                normal: {
-                  label: {
-                    show: false
-                  },
-                  labelLine: {
-                    show: false
-                  },
-                }
-              },
-              hoverAnimation: false,
-              tooltip: {
-                show: false
-              },
-              data: [{
-                value: 100,
-                name: '02',
-                itemStyle: {
-                  normal: {
-                    color: '#29b7ff',//未完成的圆环的颜色
-                    label: {
-                      show: false
-                    },
-                    labelLine: {
-                      show: false
-                    }
-                  }
-                }
-              }
-              ]
-            }
-          ]
-        }, true)
-
-        var self = this
-        this.xc2.on('click', function (params) {
-          console.log(params)
-          self.areaclick = params.name
-
-        })
-      },
-      amplification() {
-        this.show = true
-        this.opera = '解决方案'
-        this.exportshow = false
-      },
-      exportss() {
-        this.show = true
-        this.opera = '导出'
-        this.exportshow = true
-        this.templatename = this.hiddenclick + '隐患用户导出'
-      },
-      close() {
-        this.show = false
-      },
-      // 获取组织结构
-      getRes(obj) {
-        this.filialeNameStr = obj.res
-        this.filialeCodeStr = obj.resids
-      },
-      refdate() {
-        var self = this
-        setInterval(function () {
-          var ss = Util.toStandardTimeString()
-          self.date = ss.toString().replace('-/g', '/')
-        }, 1000)
-      },
-      init() {
-        var condition = {
-          startDate: this.model.startDate,
-          endDate: this.model.endDate,
-          f_filialeids: ''
-        }
-        DataSql.getData1(this, 'getHidden', condition, 'selldata')
-      },
-      getHidden() {
-        var condition = {
-          startDate: this.model.startDate,
-          endDate: this.model.endDate,
-          f_filialeids: '',
-          itemname: this.hiddenclick
-        }
-        DataSql.getData1(this, 'getHidden1', condition, 'hiddendata')
-        DataSql.getData1(this, 'getHidden2', condition, 'hiddendata2')
-      }
-    },
-    watch: {
-      'model': {
-        deep: true,
-        handler() {
-          console.log('ces')
-          this.init()
-        }
-      },
-      'selldata'() {
-        if (this.selldata.length == 0) {
-          this.$showMessage('数据为空')
-          return
-        }
-        console.log(this.selldata, '测试')
-        this.setBar()
-        this.hiddenclick = this.selldata[this.selldata.length - 1].name
-      },
-      'hiddenclick'() {
-        this.getHidden()
-      },
-      'areaclick'() {
-        var condition = {
-          startDate: "\"" + this.model.startDate + "\"",
-          endDate: "\"" + this.model.endDate + "\"",
-          f_filialeids: "\"\"",
-          itemname: "\"" + this.hiddenclick + "\""
-        }
-
-        condition.condition = "\" and  1=1 \""
-        if (this.areaclick != '') {
-          condition.condition = "\" and b.f_residential_area =\'" + this.areaclick + " \'\""
-        }
-        this.condition = condition
-        this.model1 = new PagedList('/rs/sql/getHidden3', 10, condition)
-        this.model1.search()
-      },
-      'hiddendata'() {
-        console.log(this.hiddendata, '测试')
-        this.setBar1()
-      },
-      'hiddendata2'() {
-        console.log(this.hiddendata2, '测试')
-        this.setBar2()
-
-        var condition = {
-          startDate: "\"" + this.model.startDate + "\"",
-          endDate: "\"" + this.model.endDate + "\"",
-          f_filialeids: "\"\"",
-          itemname: "\"" + this.hiddenclick + "\""
-        }
-
-        condition.condition = "\" and  1=1 \""
-
-        this.condition = condition
-        this.model1 = new PagedList('/rs/sql/getHidden3', 10, condition)
-        this.model1.search()
-      }
-    },
-    ready() {
-      this.refdate()
-      this.model.startDate = '2001-01'
-      this.init()
-    }
-
-  }
-</script>
-
-<style>
-  #childrendatagridstyle table tr:hover {
-    background-color: #013e48;
-    color: #ffffff;
-  }
-
-  #childrendatagridstyle table tr:hover {
-    background-color: #013e48;
-    color: #ffffff;
-  }
-
-  #childrendatagridstyle table .customizestyle {
-    background-color: #013e48 !important;
-    color: #ffffff !important;
-  }
-
-  #childrencriteriastyle nav ul {
-    background-color: #013e48 !important;
-    color: #02fbe6 !important;
-  }
-
-  #childrencriteriastyle nav ul li {
-    color: #02fbe6 !important;
-  }
-
-  #childrencriteriastyle nav ul input {
-    margin: 0% 1%;
-    background-color: #0fa397 !important;
-    color: #ffffff !important;
-  }
-
-  #childrencriteriastyle nav ul a {
-    border: #02fbe6 1px solid;
-    border-radius: 4px;
-    color: #02fbe6 !important;
-  }
-
-  #childrencriteriastyle nav ul a:visited {
-    background-color: #0fa397 !important;
-  }
-
-  #childrencriteriastyle nav ul a:hover {
-    border: 1px solid #65d2bc;
-  }
-
-  .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 > button {
-    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>
-  .div-1 {
-    height: 85%;
-    width: 100%;
-  }
-
-  .title-2 {
-    margin-top: 3%;
-    padding: 0% 2%;
-    font-size: 1.4em;
-    color: #fff;
-    height: 10%;
-    width: 100%;
-  }
-
-  .title-21 {
-    margin-top: -6%;
-    height: 8%;
-    width: auto;
-    float: right;
-    margin-right: 10%;
-    font-size: 0.8em;
-    color: #333333;
-  }
-
-  .title-22 {
-    margin-top: -3%;
-    padding: 0% 1%;
-    height: 10%;
-    float: right;
-    font-size: 0.65em;
-  }
-
-  .title-23 {
-    margin-top: -1.6%;
-    padding: 0% 1%;
-    height: 9%;
-    float: right;
-    font-size: 0.65em;
-  }
-
-  .thstyle {
-    background-color: #05525f;
-
-    color: #06ecd8;
-  }
-
-  .td-1 {
-    border: solid 1px #6fd9d0;
-    color: #ffffff;
-  }
-
-  .tr-1:hover {
-    background-color: #013e48;
-    color: #ffffff;
-  }
-
-  .div-2 {
-    margin-top: -3%;
-    color: #40cfc3;
-    font-size: 0.65em;
-  }
-
-  .div-3 {
-    margin-top: -1.4%;
-    color: #40cfc3;
-    font-size: 0.65em;
-  }
-
-  img {
-    width: 20px;
-    margin-right: 3px;
-  }
-
-  .title-2 span {
-
-  }
-
-  .execlshow {
-    margin-top: -1%;
-  }
-
-  /*.criteria-paged .pager */
-</style>
+<template>
+  <div class="frame">
+    <div class="top">
+      <img src="../../image/组6.png"/>
+      <span>{{date}}</span>
+    </div>
+    <div class="main">
+      <div class="row" style="height: auto;color: #9effff;">
+        <div class="col-sm-3" style="width: 22%;padding: 0 0 0 20px;z-index: 99999999;">
+          <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'"
+                      :show-reset-button="reset">
+          </datepicker>
+        </div>
+        <div class="col-sm-3" style="width: 22%">
+          <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'"
+                      :show-reset-button="reset">
+          </datepicker>
+        </div>
+        <div class="col-sm-3" style="width: 22%">
+          <label class="control-label">组织机构</label>
+          <right-tree :userid.sync='userid' :source.sync='source' @re-res="getRes"
+                      class="childrenorgstyle"></right-tree>
+        </div>
+      </div>
+      <div class="main-1">
+        <div class="bar-1" id="hidden1"></div>
+        <div class="bar-2" id="hidden2"></div>
+        <div class="bar-3">
+          <label style="text-align: center"><p style="color: #c3325f">{{hiddenclick}}</p>解决方案</label>
+          <div style="height: 77%;overflow-y: auto;color: white;text-align: center">
+            <p @click="amplification" style="text-align: center">
+              1.****************************<br/>
+              1.****************************<br/>
+              1.****************************<br/>
+              1.****************************<br/>
+              1.****************************<br/>
+              1.****************************<br/>
+              1.****************************<br/>
+              1.****************************<br/>
+              1.****************************<br/>
+              1.****************************<br/>
+              1.****************************<br/>
+              1.****************************<br/>
+              1.****************************<br/>
+              1.****************************<br/>
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <div class="main-2">
+        <div class="bar-4" id="hidden3"></div>
+        <div class="bar-5">
+          <criteria-paged :model="model1" v-ref:paged style="overflow-x: auto; overflow-y: auto;"
+                          id="childrencriteriastyle">
+            <data-grid :model="model" partial='list' v-ref:grid :classname="'table'" id="childrendatagridstyle"
+                       :customize="false">
+              <template partial='head'>
+                <!--<th>-->
+
+                <!--<h4 align="center">详情表</h4>-->
+                <!--</th>-->
+                <th class="thstyle" @click="$parent.$parent.$parent.exportss" style="color: #c3325f">用户编号</th>
+                <th class="thstyle">用户名称</th>
+                <th class="thstyle">小区</th>
+                <th class="thstyle">用户地址</th>
+                <th class="thstyle">隐患类型</th>
+              </template>
+              <template partial='body'>
+                <tr class="tr-1">
+                  <td class="td-1" style="text-align: center;">{{row.f_userinfo_code}}</td>
+                  <td class="td-1" style="text-align: center;">{{row.f_user_name}}</td>
+                  <td class="td-1" style="text-align: center;">{{row.f_residential_area}}</td>
+                  <td class="td-1" style="text-align: center;">{{row.f_address}}</td>
+                  <td class="td-1" style="text-align: center;">{{row.f_item_name}}</td>
+                </tr>
+              </template>
+              <!--              <template partial='foot'></template>-->
+            </data-grid>
+          </criteria-paged>
+
+        </div>
+      </div>
+    </div>
+    <modal :show.sync="show" v-ref:modal backdrop="false">
+      <header slot="modal-header" class="modal-header text-center">
+        <button type="button" class="close" @click="close"><span>&times;</span></button>
+        <h4 class="modal-title"><p style="color: #c3325f">{{hiddenclick}}</p>{{opera}}</h4>
+
+      </header>
+      <article slot="modal-body">
+        <div class="auto col-sm-11 col-md-offset-1" style="margin-top: 10px;text-align: center" v-if="!exportshow">
+          1.****************************<br/>
+          1.****************************<br/>
+          1.****************************<br/>
+          1.****************************<br/>
+          1.****************************<br/>
+          1.****************************<br/>
+          1.****************************<br/>
+          1.****************************<br/>
+          1.****************************<br/>
+          1.****************************<br/>
+          1.****************************<br/>
+          1.****************************<br/>
+          1.****************************<br/>
+          1.****************************<br/>
+        </div>
+        <div style="margin-top: 10px;height: 400px;width: 400px" v-if="exportshow">
+          <export-excel :data="condition"
+                        :field="filename"
+                        sqlurl="api/revenue/logic/exportfile" sql-name="getHidden3" :template-name='templatename'
+                        :choose-col="true"></export-excel>
+        </div>
+      </article>
+      <footer slot="modal-footer" class="modal-footer">
+      </footer>
+    </modal>
+  </div>
+</template>
+
+<script>
+  import * as Util from '../../../stores/Util'
+  import * as DataSql from '../../../stores/DataSql'
+  import {PagedList} from "vue-client";
+
+  export default {
+    name: "TelephoneAnaly",
+    title: "大屏分析",
+    data() {
+      return {
+        date: '',
+        timer: '',
+        model: {         //时间参数
+          startDate: Util.toStandardDateString().substring(0, 7),
+          endDate: Util.toStandardDateString().substring(0, 7),
+        },
+        userid: this.$login.f.id,
+        source: `tool.getFullTree(this.getRights().where(row.getType() != $zone$).where(row.getType() == $organization$))`,
+        selldata: [],
+        xc: '',
+        xc1: '',
+        xc2: '',
+        hiddenclick: '',
+        areaclick: '',
+        hiddendata: [],
+        hiddendata2: [],
+        model1: new PagedList(),
+        filialeNameStr: '',
+        filialeCodeStr: '',
+        show: false,
+        opera: '',
+        condition: {},
+        filename: {
+          f_userinfo_code: '用户编号',
+          f_user_name: '用户名称',
+          f_residential_area: '小区',
+          f_address: '用户地址',
+          f_item_name: '隐患类型',
+        },
+        templatename: '',
+        exportshow: false,
+      }
+    },
+    methods: {
+      setBar() {
+        this.xc = this.$echarts.init(document.getElementById('hidden1'))
+
+        var scale = 1
+
+        var lname = []
+        var maxdata = 0
+        var kdata = []
+        this.selldata.forEach(function (s) {
+          if (s.value > maxdata) {
+            maxdata = s.value
+          }
+          lname.push(s.name)
+        })
+        this.selldata.forEach(function () {
+          kdata.push(maxdata)
+        })
+        var maxindex = this.selldata.length - 1
+        var option1 = {
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: { // 坐标轴指示器，坐标轴触发有效
+              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+            },
+            formatter: function (params, ticket, callback) {
+              return params[0].marker + '   <span style="font-weight: normal">' + params[0].name + '</span>&nbsp;&nbsp;&nbsp; <span style="color:#e1e52a;font-weight: bolder">' + params[0].value + '</span>';
+            },
+            textStyle: {
+              fontSize: 16 * scale
+            },
+            show: true,
+            alwaysShowContent: true,
+            backgroundColor: '#01396d',
+            // borderColor :'rgba(13, 109, 180)',
+            borderWidth: 0,
+            hideDelay: 100,
+            triggerOn: 'mousemove',
+            padding: 10 * scale,
+            enterable: true,
+            position: function (point, params, dom, rect, size) {
+              //其中point为当前鼠标的位置，size中有两个属性：viewSize和contentSize，分别为外层div和tooltip提示框的大小
+              var x = point[0]; //
+              var y = point[1];
+              var viewWidth = size.viewSize[0];
+              var viewHeight = size.viewSize[1];
+              var boxWidth = size.contentSize[0];
+              var boxHeight = size.contentSize[1];
+              var posX = 0; //x坐标位置
+              var posY = 0; //y坐标位置
+              if (x < boxWidth) { //左边放不开
+                posX = 5;
+              } else { //左边放的下
+                posX = x - boxWidth;
+              }
+
+              if (y < boxHeight) { //上边放不开
+                posY = 5;
+              } else { //上边放得下
+                posY = y - boxHeight;
+              }
+              posX = posX - 20
+              return [posX, posY];
+            },
+            extraCssText: 'width: auto;height:auto;',
+          },
+          grid: {
+            left: '3%',
+            top: '4%',
+            bottom: '1%',
+            containLabel: true
+          },
+          xAxis: {
+            type: 'value',
+            scale: true,
+            position: 'bottom',
+            min: 0,
+            nameGap: 30,
+            splitLine: {
+              show: false
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: '#08738e'
+              }
+            },
+            axisTick: {
+              show: false
+            },
+            axisLabel: {
+              margin: 8,
+              textStyle: {
+                color: '#95bad7'
+              }
+            },
+          },
+          yAxis: {
+            type: 'category',
+            //  name: 'TOP 20',
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: '#08738e'
+              }
+            },
+            axisTick: {
+              show: false,
+              lineStyle: {
+                color: '#ddd'
+              }
+            },
+            axisLabel: {
+              interval: 0,
+              textStyle: {
+                color: '#15dce2'
+              }
+            },
+            data: lname
+          },
+          dataZoom: [{
+            type: "inside",
+            startValue: maxindex - 5,
+            endValue: maxindex,
+            zoomLock: true,
+            throttle: 10,
+            orient: 'vertical',
+          }],
+          series: [
+            {
+              name: '',
+              type: 'bar',
+              barWidth: '30%',
+              itemStyle: {
+                barBorderRadius: [0, 16, 16, 0],
+                color: '#6fd9d0',
+              },
+              emphasis: {
+                itemStyle: {
+                  color: '#ffff2c'
+                }
+              },
+              zlevel: 2,
+              data: this.selldata
+            },
+            {
+              type: 'bar',
+              barGap: '-100%',
+              barWidth: '30%',
+              itemStyle: {
+                normal: {
+                  barBorderRadius: [0, 16, 16, 0],
+                  color: '#2a374e'
+                },
+              },
+              labelLine: {
+                show: true,
+              },
+              zlevel: 0,
+              data: kdata
+            }
+          ]
+        }
+
+        this.xc.setOption(option1)
+        var self = this
+        this.xc.on('click', function (params) {
+          console.log(params)
+          self.hiddenclick = params.name
+
+        })
+      },
+      setBar1() {
+        this.xc1 = this.$echarts.init(document.getElementById('hidden2'))
+        var scale = 1
+        var xAxisData = [];
+        var legendData = [this.hiddenclick];
+        var serieData = [];
+        var metaDate = []
+
+        this.hiddendata.forEach(function (s) {
+
+          xAxisData.push(s.name.substring(2, 7))
+          metaDate.push(s.value)
+        })
+
+        var yname = '      月份'
+        for (var v = 0; v < legendData.length; v++) {
+          var serie = {
+            name: legendData[v],
+            type: 'line',
+            symbol: "circle",
+            symbolSize: 5 * scale,
+            color: '#a39241',
+            lineStyle: {
+              width: 1,
+              color: '#a39241'
+            },
+            label: {
+              show: true,
+              position: 'top',
+              textStyle: { //数值样式
+                color: '#fefefe',
+                fontSize: 14 * scale
+              }
+            },
+            areaStyle: {
+              color: {
+                type: 'linear',
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [{
+                  offset: 1,
+                  color: '#031a2b' // 0% 处的颜色
+                },
+                  {
+                    offset: 0.5,
+                    color: '#273531' // 50% 处的颜色
+                  },
+                  {
+                    offset: 0,
+                    color: '#444c3e' // 100% 处的颜色
+                  }],
+                globalCoord: false // 缺省为 false
+              },
+            },
+
+            data: metaDate
+          }
+          serieData.push(serie)
+        }
+        var colors = ["#036BC8", "#4A95FF", "#5EBEFC", "#2EF7F3", "#FFFFFF"]
+
+
+        this.xc1.setOption({
+          title: {text: '', textAlign: 'left', textStyle: {color: "#fff", fontSize: "16*scale", fontWeight: "normal"}},
+
+          color: colors,
+          grid: {left: '2%', top: "15%", bottom: "1%", right: "8%", containLabel: true},
+          tooltip: {
+            formatter: function (params) {
+              if (params.data == '') {
+                return ''
+              }
+              var result = ''
+              params.forEach(function (item) {
+                result += item.seriesName + " : " + item.value + "</br>";
+              });
+              return params[0].axisValue + '月<br/>' + result
+            },
+            axisPointer: {type: 'line', lineStyle: {width: 0}},
+            trigger: 'axis',
+            extraCssText: 'width: auto;height: auto;'
+          },
+          xAxis: [
+            {
+              name: yname,
+              type: 'category',
+              nameTextStyle: {
+                fontSize: 12 * scale,
+                color: '#15dce2',
+                padding: [40 * scale, 0, 0, -40 * scale],
+              },
+              boundaryGap: true,
+              axisLine: {show: true, lineStyle: {color: '#04669e', width: 1}},
+              axisLabel: {interval: 0, textStyle: {color: '#ffffff', fontSize: 14 * scale}},
+              axisTick: {show: false},
+              data: xAxisData,
+            },
+          ],
+          yAxis: [
+            {
+              name: '隐患数量',
+              nameTextStyle: {
+                fontSize: 12 * scale,
+                padding: [-12 * scale, 35 * scale, 0, 0],
+              },
+              axisTick: {show: false},
+              splitLine: {show: true, lineStyle: {type: 'dashed', color: '#004371'}},
+              axisLabel: {textStyle: {color: '#15dce2', fontSize: 12 * scale}},
+              axisLine: {show: false, lineStyle: {color: '#15dce2', fontSize: 12 * scale}},
+            },
+          ],
+          series: serieData
+        })
+      },
+      setBar2() {
+        this.xc2 = this.$echarts.init(document.getElementById('hidden3'))
+        var scale = 0.8
+        let echartData = this.hiddendata2
+
+        let legendname = []
+        echartData.forEach(function (s) {
+          legendname.push(s.name)
+        })
+        var rich = {
+          white: {
+            color: "#fff",
+            align: 'center',
+            fontSize: 14 * scale,
+
+            padding: [8 * scale, 8 * scale]
+          },
+          blue: {
+            color: '#e1e52a',
+            fontSize: 16 * scale,
+            align: 'center',
+            padding: [8 * scale, 8 * scale]
+          },
+          hr: {
+            borderColor: '#64d8d4',
+            width: '100%',
+            borderWidth: 0.5,
+            height: 0,
+          },
+        }
+        var total = 0; //用户总和
+        echartData.forEach(function (value) {
+          total += value.value;
+        });
+        this.xc2.setOption({
+          title: [],
+          legend: {
+            show: false
+          },
+          grid: {
+            left: '10%',
+            right: '10%',
+            top: '0',
+            bottom: '0'
+          },
+
+          series: [
+            {
+              name: 'Line 1',
+              type: 'pie',
+              animation: false,
+              clockWise: false,
+              radius: ['21%', '22%'],
+              center: ['50%', '50%'],
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: false
+                  },
+                  labelLine: {
+                    show: false
+                  },
+                }
+              },
+              hoverAnimation: false,
+              tooltip: {
+                show: false
+              },
+              data: [{
+                value: 100,
+                name: '02',
+                itemStyle: {
+                  normal: {
+                    color: '#29b7ff',//未完成的圆环的颜色
+                    label: {
+                      show: false
+                    },
+                    labelLine: {
+                      show: false
+                    }
+                  }
+                }
+              }]
+            },
+            {
+              name: '总用户数',
+              type: 'pie',
+              radius: ['26%', '40%'],
+              center: ['50%', '50%'],
+              minAngle: 15,//最小角度
+              startAngle: 300, //起始角度
+              hoverAnimation: false,
+              color: ['#6fd9d0', '#ede61f', '#e5e280', '#6e93e0', '#c7e06e', '#e68d8d'],
+              label: {
+                normal: {
+                  borderWidth: 1,
+                  borderRadius: 4,
+                  backgroundColor: '#004b5c',
+                  borderColor: '#64d8d4',
+                  formatter: function (params, ticket, callback) {
+                    var total = 0; //用户总数量
+                    var percent = 0;
+                    echartData.forEach(function (value, index, array) {
+                      total += value.value;
+                    });
+                    percent = ((params.value / total) * 100).toFixed(1);
+                    return '{white|' + params.name + '}\n{hr|}\n{blue|  ' + params.value + '}{blue|   ' + percent + '%}';
+                  },
+                  rich: rich,
+                }
+              },
+              labelLine: {
+                normal: {
+                  length: 10,
+                  length2: 12,
+                }
+              },
+              data: echartData
+            },
+            {
+              name: 'Line 2',
+              type: 'pie',
+              animation: false,
+              clockWise: false,
+              radius: ['44%', '45%'],
+              center: ['50%', '50%'],
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: false
+                  },
+                  labelLine: {
+                    show: false
+                  },
+                }
+              },
+              hoverAnimation: false,
+              tooltip: {
+                show: false
+              },
+              data: [{
+                value: 100,
+                name: '02',
+                itemStyle: {
+                  normal: {
+                    color: '#29b7ff',//未完成的圆环的颜色
+                    label: {
+                      show: false
+                    },
+                    labelLine: {
+                      show: false
+                    }
+                  }
+                }
+              }
+              ]
+            }
+          ]
+        }, true)
+
+        var self = this
+        this.xc2.on('click', function (params) {
+          console.log(params)
+          self.areaclick = params.name
+
+        })
+      },
+      amplification() {
+        this.show = true
+        this.opera = '解决方案'
+        this.exportshow = false
+      },
+      exportss() {
+        this.show = true
+        this.opera = '导出'
+        this.exportshow = true
+        this.templatename = this.hiddenclick + '隐患用户导出'
+      },
+      close() {
+        this.show = false
+      },
+      // 获取组织结构
+      getRes(obj) {
+        this.filialeNameStr = obj.res
+        this.filialeCodeStr = obj.resids
+      },
+      refdate() {
+        var self = this
+        setInterval(function () {
+          var ss = Util.toStandardTimeString()
+          self.date = ss.toString().replace('-/g', '/')
+        }, 1000)
+      },
+      init() {
+        var condition = {
+          startDate: this.model.startDate,
+          endDate: this.model.endDate,
+          f_filialeids: ''
+        }
+        DataSql.getData1(this, 'getHidden', condition, 'selldata')
+      },
+      getHidden() {
+        var condition = {
+          startDate: this.model.startDate,
+          endDate: this.model.endDate,
+          f_filialeids: '',
+          itemname: this.hiddenclick
+        }
+        DataSql.getData1(this, 'getHidden1', condition, 'hiddendata')
+        DataSql.getData1(this, 'getHidden2', condition, 'hiddendata2')
+      }
+    },
+    watch: {
+      'model': {
+        deep: true,
+        handler() {
+          console.log('ces')
+          this.init()
+        }
+      },
+      'selldata'() {
+        if (this.selldata.length == 0) {
+          this.$showMessage('数据为空')
+          return
+        }
+        console.log(this.selldata, '测试')
+        this.setBar()
+        this.hiddenclick = this.selldata[this.selldata.length - 1].name
+      },
+      'hiddenclick'() {
+        this.getHidden()
+      },
+      'areaclick'() {
+        var condition = {
+          startDate: "\"" + this.model.startDate + "\"",
+          endDate: "\"" + this.model.endDate + "\"",
+          f_filialeids: "\"\"",
+          itemname: "\"" + this.hiddenclick + "\""
+        }
+
+        condition.condition = "\" and  1=1 \""
+        if (this.areaclick != '') {
+          condition.condition = "\" and b.f_residential_area =\'" + this.areaclick + " \'\""
+        }
+        this.condition = condition
+        this.model1 = new PagedList('/api/revenue/sql/getHidden3', 10, condition)
+        this.model1.search()
+      },
+      'hiddendata'() {
+        console.log(this.hiddendata, '测试')
+        this.setBar1()
+      },
+      'hiddendata2'() {
+        console.log(this.hiddendata2, '测试')
+        this.setBar2()
+
+        var condition = {
+          startDate: "\"" + this.model.startDate + "\"",
+          endDate: "\"" + this.model.endDate + "\"",
+          f_filialeids: "\"\"",
+          itemname: "\"" + this.hiddenclick + "\""
+        }
+
+        condition.condition = "\" and  1=1 \""
+
+        this.condition = condition
+        this.model1 = new PagedList('/api/revenue/sql/getHidden3', 10, condition)
+        this.model1.search()
+      }
+    },
+    ready() {
+      this.refdate()
+      this.model.startDate = '2001-01'
+      this.init()
+    }
+
+  }
+</script>
+
+<style>
+  #childrendatagridstyle table tr:hover {
+    background-color: #013e48;
+    color: #ffffff;
+  }
+
+  #childrendatagridstyle table tr:hover {
+    background-color: #013e48;
+    color: #ffffff;
+  }
+
+  #childrendatagridstyle table .customizestyle {
+    background-color: #013e48 !important;
+    color: #ffffff !important;
+  }
+
+  #childrencriteriastyle nav ul {
+    background-color: #013e48 !important;
+    color: #02fbe6 !important;
+  }
+
+  #childrencriteriastyle nav ul li {
+    color: #02fbe6 !important;
+  }
+
+  #childrencriteriastyle nav ul input {
+    margin: 0% 1%;
+    background-color: #0fa397 !important;
+    color: #ffffff !important;
+  }
+
+  #childrencriteriastyle nav ul a {
+    border: #02fbe6 1px solid;
+    border-radius: 4px;
+    color: #02fbe6 !important;
+  }
+
+  #childrencriteriastyle nav ul a:visited {
+    background-color: #0fa397 !important;
+  }
+
+  #childrencriteriastyle nav ul a:hover {
+    border: 1px solid #65d2bc;
+  }
+
+  .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 > button {
+    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>
+  .div-1 {
+    height: 85%;
+    width: 100%;
+  }
+
+  .title-2 {
+    margin-top: 3%;
+    padding: 0% 2%;
+    font-size: 1.4em;
+    color: #fff;
+    height: 10%;
+    width: 100%;
+  }
+
+  .title-21 {
+    margin-top: -6%;
+    height: 8%;
+    width: auto;
+    float: right;
+    margin-right: 10%;
+    font-size: 0.8em;
+    color: #333333;
+  }
+
+  .title-22 {
+    margin-top: -3%;
+    padding: 0% 1%;
+    height: 10%;
+    float: right;
+    font-size: 0.65em;
+  }
+
+  .title-23 {
+    margin-top: -1.6%;
+    padding: 0% 1%;
+    height: 9%;
+    float: right;
+    font-size: 0.65em;
+  }
+
+  .thstyle {
+    background-color: #05525f;
+
+    color: #06ecd8;
+  }
+
+  .td-1 {
+    border: solid 1px #6fd9d0;
+    color: #ffffff;
+  }
+
+  .tr-1:hover {
+    background-color: #013e48;
+    color: #ffffff;
+  }
+
+  .div-2 {
+    margin-top: -3%;
+    color: #40cfc3;
+    font-size: 0.65em;
+  }
+
+  .div-3 {
+    margin-top: -1.4%;
+    color: #40cfc3;
+    font-size: 0.65em;
+  }
+
+  img {
+    width: 20px;
+    margin-right: 3px;
+  }
+
+  .title-2 span {
+
+  }
+
+  .execlshow {
+    margin-top: -1%;
+  }
+
+  /*.criteria-paged .pager */
+</style>