<template>
  <div id="greenbelt-analysis" class="map-tool-model">
    <common-map-tool-title @close="close" title="绿地分析"/>
    <div class="main-content p20">
      <div class="single_row">
        <el-row class="single_row_select">
          <el-col :span="7">
            <el-select v-model="form.layerName":popper-append-to-body="false" @change="showGreenLayer" filterable collapse-tags style="width: 100%" placeholder="请选择">
              <el-option
                  v-for="item in greenList"
                  :key="item.name"
                  :label="item.name"
                  :value="item.name">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="7">
            <el-select v-model="form.district":popper-append-to-body="false" @change="districtToStreet" filterable collapse-tags style="width: 100%" placeholder="请选择">
              <el-option
                  v-for="item in qxList"
                  :key="item.name"
                  :label="item.name"
                  :value="item.value">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="7">
            <el-select v-model="form.street":popper-append-to-body="false" filterable collapse-tags style="width: 100%" placeholder="请选择">
              <el-option
                  v-for="item in jdList"
                  :key="item.TOWN"
                  :label="item.TOWN"
                  :value="item.TOWN">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="2">
            <i class="el-icon-search title_search" @click="getTableData"></i>
          </el-col>
        </el-row>
      </div>
      <div class="single_row">
        <div class="single_statistics" v-for="item in allStatistics.slice(0,3)" :key="item.id">
          <div class="statistics_value">
            <span class="value_content">
              {{ (item.value/1000000).toFixed(2) }}
            </span>
            <span class="unit_content">
              km<sup>2</sup>
            </span>
          </div>
          <div class="statistics_title">
            {{ item.name }}
          </div>
        </div>
        <div class="single_statistics_last" v-for="item in allStatistics.slice(3,4)" :key="item.id">
          <div class="statistics_value">
            <span class="value_content">
              {{ (item.value * 100).toFixed(2) }}
            </span>
            <span class="unit_content">
             %
            </span>
          </div>
          <div class="statistics_title">
            {{ item.name }}
          </div>
        </div>
      </div>
      <div v-if="tableData.length >0" class="single_row">
        <el-table
            @row-click="gotoSingleItem"
            :data="tableData"
            :height="250"
            style="width: 100%">
          <el-table-column v-if="form.district ==''"
              show-overflow-tooltip
              prop="district"
              width="80"
              label="区">
          </el-table-column>
          <el-table-column v-if="form.district !==''"
              show-overflow-tooltip
              prop="street"
              width="80"
              label="街镇">
          </el-table-column>
          <el-table-column
              show-overflow-tooltip
              prop="green_area"
              width="80"
              label="绿地面积">
          </el-table-column>
          <el-table-column
              show-overflow-tooltip
              prop="building_area"
              width="110"
              label="居住用地面积">
          </el-table-column>
          <el-table-column
              show-overflow-tooltip
              prop="green_buffer_building"
              width="110"
              label="覆盖居住面积">
          </el-table-column>
          <el-table-column
              show-overflow-tooltip
              prop="interest"
              label="覆盖率">
          </el-table-column>
        </el-table>
      </div>
    </div>
<!--    <div class="bottom-btn">-->
<!--      <div class="btn single_button" @click="runGreenbeltAnalysis">运行分析</div>-->
<!--    </div>-->
  </div>
</template>

<script>
import CommonMapToolTitle from "@/components/common/CommonMapToolTitle";
import {addBufferLayer, addGreenLayer, addJZXQLayer, setMapClick} from "@/units/map/AddLayer";
import {createNamespacedHelpers} from "vuex";
import {getAllGreen, getDistrict, getGreen, getStreet} from "@/service/show-platform";
const {mapState} = createNamespacedHelpers('platform')
export default {
  name: "GreenbeltAnalysis",
  components:{
    CommonMapToolTitle
  },
  data(){
    return{
      form:{
        layerName:'',
        district:'',
        street:''
      },
      greenList:[
        {
          id:'02',
          name:'公园绿地',
          url:'http://10.81.66.1:8080/site03/rest/services/gyld_buffer_vr/MapServer',
          originUrl:'http://10.81.66.1:8080/site02/rest/services/gyld/MapServer'
        },
        {
          id:'03',
          name:'其他绿地',
          url:'http://10.81.66.1:8080/site03/rest/services/qtld_buffer_vr/MapServer',
          originUrl:'http://10.81.66.1:8080/site02/rest/services/qtld/MapServer'
        },
        {
          id:'04',
          name:'生产绿地',
          url:'http://10.81.66.1:8080/site03/rest/services/scld_buffer_vr/MapServer',
          originUrl:'http://10.81.66.1:8080/site02/rest/services/scld/MapServer'
        },
        {
          id:'06',
          name:'街道绿地',
          url:'http://10.81.66.1:8080/site03/rest/services/jdld_buffer_vr/MapServer',
          originUrl:'http://10.81.66.1:8080/site02/rest/services/jdld/MapServer'
        },
        {
          id:'07',
          name:'附属绿地',
          url:'http://10.81.66.1:8080/site03/rest/services/dwfsld_buffer_vr/MapServer',
          originUrl:'http://10.81.66.1:8080/site02/rest/services/dwfsld/MapServer'
        },
      ],
      qxList:[
      ],
      jdList:[],
      allList:[],
      allStatistics:[
        {
          id:"01",
          name:"居住用地面积",
          value:0,
        },
        {
          id:"02",
          name:"绿地面积",
          value:0,
        },
        {
          id:"03",
          name:"覆盖居住面积",
          value:0,
        },
        {
          id:"04",
          name:"覆盖率",
          value:0,
        },
      ],
      tableData: [
      ]
    }
  },
  mounted() {
    getDistrict().then(res =>{
      let data = res.msg[0].Rows;
      this.getDistrict(data)
    })
    getStreet().then(res =>{
      let data = res.msg[0].Rows;
      this.getStreet(data)
    })
    addJZXQLayer(false);
    setMapClick('','')
  },
  methods:{
    getStreet(data){
      console.log(data)
      this.allList = data;
      this.jdList = data;
    },
    getDistrict(data){
      console.log(data)
      this.qxList = [];
      let temp = {
        name:'全市',
        value:''
      }
      this.qxList.push(temp);
      for(let i=0;i<data.length;i++){
       let districtTemp = {
         name:data[i].DISTRICT,
         value:data[i].DISTRICT,
       }
        this.qxList.push(districtTemp);
      }
    },
    districtToStreet(val){
      debugger
      this.jdList = [];
      this.form.street = '';
      if(val ==''){
        this.jdList = this.allList;
      }
      for(let i=0;i< this.allList.length;i++){
        if(this.allList[i].DISTRICT == val){
          this.jdList.push(this.allList[i]);
        }
      }
    },
    showGreenLayer(){
      let url = '';
      for(let i = 0; i<this.greenList.length;i++){
        if(this.greenList[i].name == this.form.layerName){
          url = this.greenList[i].originUrl;
        }
      }
      addGreenLayer(false,url)
    },
    getTableData(){
      let url = '';
      for(let i = 0; i<this.greenList.length;i++){
       if(this.greenList[i].name == this.form.layerName){
         url = this.greenList[i].url;
       }
      }
      if(this.form.street ==""){
        if(this.form.district ==''){
          addBufferLayer(false,"区县","1=1",url);
        }else{
          addBufferLayer(false,"区县","区县名称='"+this.form.district+"'",url);
        }
      }else if(this.form.street !==""){
        addBufferLayer(false,"街道","街道名='"+this.form.street+"'",url);
      }

      if(this.form.district ==''){
        getAllGreen().then(res =>{
          debugger
          let data = res.msg[0].Rows;
          this.allStatistics[0].value = 0;
          this.allStatistics[1].value = 0;
          this.allStatistics[2].value = 0;
          this.allStatistics[3].value = 0;
          for(let i=0;i<data.length;i++){
            this.allStatistics[0].value += parseFloat(data[i].JZXQ_AREA); //居住小区面
            //this.allStatistics[1].value += parseFloat(data[i].JZXQ_AREA); //绿地面积
            //this.allStatistics[2].value += parseFloat(data[i].JZXQ_AREA); //覆盖居住面积
            //this.allStatistics[3].value += parseFloat(data[i].JZXQ_AREA); //覆盖率
          }
          debugger
          switch (this.form.layerName){
            case "公园绿地":
              for(let i=0;i<data.length;i++) {
                this.allStatistics[1].value += parseFloat(data[i].GYLD_AREA); //绿地面积
                this.allStatistics[2].value += parseFloat(data[i].GYLD_BUFFER_JZXQ_AREA); //覆盖居住面积
              }
              break;
            case "其他绿地":
              for(let i=0;i<data.length;i++) {
                this.allStatistics[1].value += parseFloat(data[i].QTLD_AREA); //绿地面积
                this.allStatistics[2].value += parseFloat(data[i].QTLD_BUFFER_JZXQ_AREA); //覆盖居住面积
              }
              break;
            case "生产绿地":
              for(let i=0;i<data.length;i++) {
                this.allStatistics[1].value += parseFloat(data[i].SCLD_AREA); //绿地面积
                this.allStatistics[2].value += parseFloat(data[i].SCLD_BUFFER_JZXQ_AREA); //覆盖居住面积
              }
              break;
            case "单位绿地":
              for(let i=0;i<data.length;i++) {
                this.allStatistics[1].value += parseFloat(data[i].DWLD_AREA); //绿地面积
                this.allStatistics[2].value += parseFloat(data[i].DWLD_BUFFER_JZXQ_AREA); //覆盖居住面积
              }
              break;
            case "街道绿地":
              for(let i=0;i<data.length;i++) {
                this.allStatistics[1].value += parseFloat(data[i].JDLD_AREA); //绿地面积
                this.allStatistics[2].value += parseFloat(data[i].JDLD_BUFFER_JZXQ_AREA); //覆盖居住面积
              }
              break;
            case "附属绿地":
              for(let i=0;i<data.length;i++) {
                this.allStatistics[1].value += parseFloat(data[i].FSLD_AREA); //绿地面积
                this.allStatistics[2].value += parseFloat(data[i].FSLD_BUFFER_JZXQ_AREA); //覆盖居住面积
              }
              break;
          }
          this.allStatistics[3].value = this.allStatistics[2].value /this.allStatistics[0].value;
          this.tableData = [];
          for(let i=0;i<data.length;i++){
            if(this.form.layerName =="公园绿地"){
              let temp = {
                district: data[i].DISTRICT,
                street:data[i].TOWN,
                green_area: (parseFloat(data[i].GYLD_AREA)/1000000).toFixed(2),
                building_area: (parseFloat(data[i].JZXQ_AREA)/1000000).toFixed(2),
                green_buffer_building:(parseFloat(data[i].GYLD_BUFFER_JZXQ_AREA)/1000000).toFixed(2),
                interest: (parseFloat(data[i].GYLD_BUFFER_JZXQ_AREA)/parseFloat(data[i].JZXQ_AREA) * 100).toFixed(2)
              }
              this.tableData.push(temp)
            }else if(this.form.layerName =="其他绿地"){
              let temp = {
                district: data[i].DISTRICT,
                street:data[i].TOWN,
                green_area: (parseFloat(data[i].QTLD_AREA)/1000000).toFixed(2),
                building_area: (parseFloat(data[i].JZXQ_AREA)/1000000).toFixed(2),
                green_buffer_building:(parseFloat(data[i].QTLD_BUFFER_JZXQ_AREA)/1000000).toFixed(2),
                interest: (parseFloat(data[i].QTLD_BUFFER_JZXQ_AREA)/parseFloat(data[i].JZXQ_AREA) * 100).toFixed(2)
              }
              this.tableData.push(temp)
            }else if(this.form.layerName =="生产绿地"){
              let temp = {
                district: data[i].DISTRICT,
                street:data[i].TOWN,
                green_area: (parseFloat(data[i].SCLD_AREA)/1000000).toFixed(2),
                building_area: (parseFloat(data[i].JZXQ_AREA)/1000000).toFixed(2),
                green_buffer_building:(parseFloat(data[i].SCLD_BUFFER_JZXQ_AREA)/1000000).toFixed(2),
                interest: (parseFloat(data[i].SCLD_BUFFER_JZXQ_AREA)/parseFloat(data[i].JZXQ_AREA) * 100).toFixed(2)
              }
              this.tableData.push(temp)
            }else if(this.form.layerName =="单位绿地"){
              let temp = {
                district: data[i].DISTRICT,
                street:data[i].TOWN,
                green_area: (parseFloat(data[i].DWLD_AREA)/1000000).toFixed(2),
                building_area: (parseFloat(data[i].JZXQ_AREA)/1000000).toFixed(2),
                green_buffer_building:(parseFloat(data[i].DWLD_BUFFER_JZXQ_AREA)/1000000).toFixed(2),
                interest: (parseFloat(data[i].DWLD_BUFFER_JZXQ_AREA)/parseFloat(data[i].JZXQ_AREA) * 100).toFixed(2)
              }
              this.tableData.push(temp)
            }else if(this.form.layerName =="街道绿地"){
              let temp = {
                district: data[i].DISTRICT,
                street:data[i].TOWN,
                green_area: (parseFloat(data[i].JDLD_AREA)/1000000).toFixed(2),
                building_area: (parseFloat(data[i].JZXQ_AREA)/1000000).toFixed(2),
                green_buffer_building:(parseFloat(data[i].JDLD_BUFFER_JZXQ_AREA)/1000000).toFixed(2),
                interest: (parseFloat(data[i].JDLD_BUFFER_JZXQ_AREA)/parseFloat(data[i].JZXQ_AREA) * 100).toFixed(2)
              }
              this.tableData.push(temp)
            }else if(this.form.layerName =="附属绿地"){
              let temp = {
                district: data[i].DISTRICT,
                street:data[i].TOWN,
                green_area: (parseFloat(data[i].FSLD_AREA)/1000000).toFixed(2),
                building_area: (parseFloat(data[i].JZXQ_AREA)/1000000).toFixed(2),
                green_buffer_building:(parseFloat(data[i].FSLD_BUFFER_JZXQ_AREA)/1000000).toFixed(2),
                interest: (parseFloat(data[i].FSLD_BUFFER_JZXQ_AREA)/parseFloat(data[i].JZXQ_AREA) * 100).toFixed(2)
              }
              this.tableData.push(temp)
            }
          }
        })
      }else{
        getGreen(this.form.district,this.form.street).then(res =>{
          let data = res.msg[0].Rows;
          this.allStatistics[0].value = 0;
          this.allStatistics[1].value = 0;
          this.allStatistics[2].value = 0;
          this.allStatistics[3].value = 0;
          for(let i=0;i<data.length;i++){
            this.allStatistics[0].value += parseFloat(data[i].JZXQ_AREA); //居住小区面
            //this.allStatistics[1].value += parseFloat(data[i].JZXQ_AREA); //绿地面积
            //this.allStatistics[2].value += parseFloat(data[i].JZXQ_AREA); //覆盖居住面积
            //this.allStatistics[3].value += parseFloat(data[i].JZXQ_AREA); //覆盖率
          }
          debugger
          switch (this.form.layerName){
            case "公园绿地":
              for(let i=0;i<data.length;i++) {
                this.allStatistics[1].value += parseFloat(data[i].GYLD_AREA); //绿地面积
                this.allStatistics[2].value += parseFloat(data[i].GYLD_BUFFER_JZXQ_AREA); //覆盖居住面积
              }
              break;
            case "其他绿地":
              for(let i=0;i<data.length;i++) {
                this.allStatistics[1].value += parseFloat(data[i].QTLD_AREA); //绿地面积
                this.allStatistics[2].value += parseFloat(data[i].QTLD_BUFFER_JZXQ_AREA); //覆盖居住面积
              }
              break;
            case "生产绿地":
              for(let i=0;i<data.length;i++) {
                this.allStatistics[1].value += parseFloat(data[i].SCLD_AREA); //绿地面积
                this.allStatistics[2].value += parseFloat(data[i].SCLD_BUFFER_JZXQ_AREA); //覆盖居住面积
              }
              break;
            case "单位绿地":
              for(let i=0;i<data.length;i++) {
                this.allStatistics[1].value += parseFloat(data[i].DWLD_AREA); //绿地面积
                this.allStatistics[2].value += parseFloat(data[i].DWLD_BUFFER_JZXQ_AREA); //覆盖居住面积
              }
              break;
            case "街道绿地":
              for(let i=0;i<data.length;i++) {
                this.allStatistics[1].value += parseFloat(data[i].JDLD_AREA); //绿地面积
                this.allStatistics[2].value += parseFloat(data[i].JDLD_BUFFER_JZXQ_AREA); //覆盖居住面积
              }
              break;
            case "附属绿地":
              for(let i=0;i<data.length;i++) {
                this.allStatistics[1].value += parseFloat(data[i].FSLD_AREA); //绿地面积
                this.allStatistics[2].value += parseFloat(data[i].FSLD_BUFFER_JZXQ_AREA); //覆盖居住面积
              }
              break;
          }
          this.allStatistics[3].value = this.allStatistics[2].value /this.allStatistics[0].value;
          this.tableData = [];
          for(let i=0;i<data.length;i++){
            if(this.form.layerName =="公园绿地"){
              let temp = {
                district: data[i].DISTRICT,
                street:data[i].TOWN,
                green_area: (parseFloat(data[i].GYLD_AREA)/1000000).toFixed(2),
                building_area: (parseFloat(data[i].JZXQ_AREA)/1000000).toFixed(2),
                green_buffer_building:(parseFloat(data[i].GYLD_BUFFER_JZXQ_AREA)/1000000).toFixed(2),
                interest: (parseFloat(data[i].GYLD_BUFFER_JZXQ_AREA)/parseFloat(data[i].JZXQ_AREA) * 100).toFixed(2)
              }
              this.tableData.push(temp)
            }else if(this.form.layerName =="其他绿地"){
              let temp = {
                district: data[i].DISTRICT,
                street:data[i].TOWN,
                green_area: (parseFloat(data[i].QTLD_AREA)/1000000).toFixed(2),
                building_area: (parseFloat(data[i].JZXQ_AREA)/1000000).toFixed(2),
                green_buffer_building:(parseFloat(data[i].QTLD_BUFFER_JZXQ_AREA)/1000000).toFixed(2),
                interest: (parseFloat(data[i].QTLD_BUFFER_JZXQ_AREA)/parseFloat(data[i].JZXQ_AREA) * 100).toFixed(2)
              }
              this.tableData.push(temp)
            }else if(this.form.layerName =="生产绿地"){
              let temp = {
                district: data[i].DISTRICT,
                street:data[i].TOWN,
                green_area: (parseFloat(data[i].SCLD_AREA)/1000000).toFixed(2),
                building_area: (parseFloat(data[i].JZXQ_AREA)/1000000).toFixed(2),
                green_buffer_building:(parseFloat(data[i].SCLD_BUFFER_JZXQ_AREA)/1000000).toFixed(2),
                interest: (parseFloat(data[i].SCLD_BUFFER_JZXQ_AREA)/parseFloat(data[i].JZXQ_AREA) * 100).toFixed(2)
              }
              this.tableData.push(temp)
            }else if(this.form.layerName =="单位绿地"){
              let temp = {
                district: data[i].DISTRICT,
                street:data[i].TOWN,
                green_area: (parseFloat(data[i].DWLD_AREA)/1000000).toFixed(2),
                building_area: (parseFloat(data[i].JZXQ_AREA)/1000000).toFixed(2),
                green_buffer_building:(parseFloat(data[i].DWLD_BUFFER_JZXQ_AREA)/1000000).toFixed(2),
                interest: (parseFloat(data[i].DWLD_BUFFER_JZXQ_AREA)/parseFloat(data[i].JZXQ_AREA) * 100).toFixed(2)
              }
              this.tableData.push(temp)
            }else if(this.form.layerName =="街道绿地"){
              let temp = {
                district: data[i].DISTRICT,
                street:data[i].TOWN,
                green_area: (parseFloat(data[i].JDLD_AREA)/1000000).toFixed(2),
                building_area: (parseFloat(data[i].JZXQ_AREA)/1000000).toFixed(2),
                green_buffer_building:(parseFloat(data[i].JDLD_BUFFER_JZXQ_AREA)/1000000).toFixed(2),
                interest: (parseFloat(data[i].JDLD_BUFFER_JZXQ_AREA)/parseFloat(data[i].JZXQ_AREA) * 100).toFixed(2)
              }
              this.tableData.push(temp)
            }else if(this.form.layerName =="附属绿地"){
              let temp = {
                district: data[i].DISTRICT,
                street:data[i].TOWN,
                green_area: (parseFloat(data[i].FSLD_AREA)/1000000).toFixed(2),
                building_area: (parseFloat(data[i].JZXQ_AREA)/1000000).toFixed(2),
                green_buffer_building:(parseFloat(data[i].FSLD_BUFFER_JZXQ_AREA)/1000000).toFixed(2),
                interest: (parseFloat(data[i].FSLD_BUFFER_JZXQ_AREA)/parseFloat(data[i].JZXQ_AREA) * 100).toFixed(2)
              }
              this.tableData.push(temp)
            }
          }
        })
      }
    },
    gotoSingleItem(val){
      console.log(val);
      debugger
      let url = '';
      for(let i = 0; i<this.greenList.length;i++){
        if(this.greenList[i].name == this.form.layerName){
          url = this.greenList[i].url;
        }
      }
      debugger
      if(this.form.street ==""){
        if(this.form.district ==''){
          addBufferLayer(false,"区县","区县名称='"+val.district+"'",url);
        }else{
          addBufferLayer(false,"街道","街道名='"+val.street+"'",url);
        }
      }else if(this.form.street !==""){
        addBufferLayer(false,"街道","街道名='"+val.street+"'",url);
      }
    },
    runGreenbeltAnalysis(){
    },
    close(){
      addBufferLayer(true);
      addJZXQLayer(true)
      this.$emit('setToolDetailType','');
    }
  },
  watch:{
    currentReturnResult:{
      handler(){
        this.tempResult()
      }
    },
  }
}
</script>

<style scoped lang="scss">
::v-deep{
  .el-select__tags{
    white-space: nowrap;
    overflow: hidden;
  }
  .el-select__input{
    color: #fff;
  }
  .el-select-dropdown__wrap{
    max-height: 150px;
  }
  .el-scrollbar__wrap{
    overflow-y: scroll;
    height: 100%;
  }
  .el-select-dropdown{
    position: absolute !important;
    left: 0px !important;
    border: 1px solid #00a1ff !important;
    background-color: rgba(0, 31, 112, 0.8) !important;
  }
  .el-select-dropdown__item.hover, .el-select-dropdown__item:hover{
    background-color: rgba(0, 31, 112, 1);
    color: #409EFF;
  }
  .el-select-dropdown.is-multiple .el-select-dropdown__item.selected.hover{
    background-color: rgba(0, 31, 112, 1);
    color: #409EFF;
  }
  .el-select-dropdown.is-multiple .el-select-dropdown__item.selected{
    background-color: rgba(0, 31, 112, 1);
    color: #409EFF;
  }
  .el-tag.el-tag--info .el-tag__close{
    color: transparent !important;
  }
  .el-select .el-tag__close.el-icon-close{
    color: #409EFF  !important;
    background-color: transparent  !important;
  }
  .el-popper[x-placement^=bottom] .popper__arrow::after{
    border-bottom-color: rgba(0, 31, 112, 1);
  }
  .el-tag.el-tag--info {
    background-color: rgba(0, 31, 112, 0.8);
    border-color: #00a1ff;
    color: #409EFF;
  }
  .el-select-dropdown__item{
    color:#fff
  }
  .el-table, .el-table__expanded-cell{
    background-color: transparent;
  }
  .el-table th.el-table__cell{
    background-color: transparent;
  }
  .el-table tr{
    background-color: transparent;
  }
  .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf{
    border-bottom: 1px solid rgba(0, 170, 255, 0.8);
  }
  .el-table thead{
    color: #fff;
  }
  .el-table{
    color: #fff;
  }
  .el-table--border::after, .el-table--group::after, .el-table::before{
    background-color: transparent;
  }
  .el-table tbody tr:hover>td {
    background: rgba(0, 204, 255, 0.7) !important
  }
}
#greenbelt-analysis{
  position: absolute;
  z-index: 1;
  width: 520px;
  top: 89px;
  right: 120px;
  .main-content{
    .single_row{
      margin: 10px 0px;
      display: flex;
      justify-content: center;
      .single_row_select{
        display: flex;
        flex-direction:row;
        justify-content: space-around;
      }
      .single_statistics{
        color: #fff;
        border-right: 1px dashed #fff;
        width: 25%;
      }
      .single_statistics_last{
        color: #fff;
        width: 25%;
      }
      .statistics_value{
        display: flex;
        justify-content: center;
        .value_content{
          font-size: 22px;
          font-weight: bold;
        }
        .unit_content{
          display: flex;
          padding-top: 5px;
        }
      }
      .statistics_title{
        display: flex;
        justify-content: center;
        font-size: 14px;
      }
      .left_title{
        color: #fff;
        padding-right: 10px;
        display: flex;
        justify-content: right;
        align-items: center;
        height: 38px;
      }
    }
    .title_search{
      height: 100%;
      font-size: 24px;
      color: #fff;
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }
  }
  ::-webkit-scrollbar{
    width: 8px;
    height: 8px;
  }
  ::-webkit-scrollbar-thumb{
    background-color: #028aab;
    border-radius: 3px;
  }
}
</style>
