<template>
    <div class="tdjy">
      <p class="text_p">注：数据来源大司空建筑大数据平台，统计范围为全国公开的土地交易项目，未公开的不含在内</p>
      <skeleton v-if="isSkeleton" style="padding: 16px"></skeleton>
      <div v-if="!isSkeleton" class="td_content">
        <div class="flex-box query-box">
          <div class="flex-box query-params">
            <span class="common-title">全国土地交易项目供应方式</span>
            <el-select v-model="years" @change="handleYears(1)" multiple collapse-tags filterable class="form-content-width" placeholder="请选择" :popper-append-to-body='false' size="small">
              <el-option v-for="(item, index) in yearOptions" :key="index" :label="item" :value="item" />
            </el-select>
          </div>
        </div>
        <div class="content_box" v-if="gyfsList.length > 0 && !isSkeleton">
          <div class="box-left">
            <div id="echarts1" style="height: 280px"></div>
          </div>
          <div class="box-right">
            <el-table
              :data="gyfsList"
              element-loading-text="Loading"
              border
              show-summary
              max-height="280"
              :summary-method="getSummaries"
              fit
              highlight-current-row
              :default-sort = "{prop: 'count', order: 'descending'}"
            >
              <el-table-column label="序号" width="60">
                <template slot-scope="scope">{{ scope.$index + 1 }}</template>
              </el-table-column>
              <el-table-column prop="type" label="供应方式" :formatter="formatStatus"/>
              <el-table-column prop="count" label="土地交易项目 (个)" align="right" :formatter="formatStatus" sortable/>
              <el-table-column prop="rate" label="占比（%）" align="right" :formatter="formatStatus" width="100"/>
            </el-table>
          </div>
        </div>
        <div class="empty" v-if="gyfsList.length === 0 && !isSkeleton">
          <img class="img" src="@/assets/images/project/empty.png">
          <div class="p1">抱歉，暂无数据展示</div>
        </div>
      </div>
      <div v-if="!tdytState" class="td_content">
        <div class="flex-box query-box">
          <div class="flex-box query-params">
            <span class="common-title">全国土地交易项目土地用途</span>
            <el-select v-model="years1" @change="handleYears(2)" multiple collapse-tags filterable class="form-content-width" placeholder="请选择" :popper-append-to-body='false' size="small">
              <el-option v-for="(item, index) in yearOptions" :key="index" :label="item" :value="item" />
            </el-select>
          </div>
        </div>
        <div class="content_box" v-if="tdytList.length > 0 && !tdytState">
          <div class="box-left">
            <div id="echarts2" style="height: 280px"></div>
          </div>
          <div class="box-right">
            <el-table
              :data="tdytList"
              element-loading-text="Loading"
              border
              show-summary
              max-height="280"
              :summary-method="getSummaries"
              fit
              highlight-current-row
              :default-sort = "{prop: 'count', order: 'descending'}"
            >
              <el-table-column label="序号" width="60">
                <template slot-scope="scope">{{ scope.$index + 1 }}</template>
              </el-table-column>
              <el-table-column prop="type" label="供应方式" :formatter="formatStatus"/>
              <el-table-column prop="count" label="土地交易项目 (个)" align="right" :formatter="formatStatus" sortable/>
              <el-table-column prop="rate" label="占比（%）" align="right" :formatter="formatStatus" width="100"/>
            </el-table>
          </div>
        </div>
        <div class="empty" v-if="tdytList.length === 0 && !tdytState">
          <img class="img" src="@/assets/images/project/empty.png">
          <div class="p1">抱歉，暂无数据展示</div>
        </div>
      </div>
      <div v-if="!topState" class="td_content">
        <div class="flex-box query-box">
          <div class="flex-box query-params">
            <span class="common-title">全国土地交易项目地区Top10</span>
            <el-select @change="handleYears(3)" style="margin-right: 8px" v-model="address" multiple collapse-tags filterable class="form-content-width" placeholder="地区筛选" :popper-append-to-body='false' size="small">
              <el-option v-for="(item, index) in addressList" :key="index" :label="item.label" :value="item.id" />
            </el-select>
            <el-select v-model="years2" @change="handleYears(3)" multiple collapse-tags filterable class="form-content-width" placeholder="请选择" :popper-append-to-body='false' size="small">
              <el-option v-for="(item, index) in yearOptions" :key="index" :label="item" :value="item" />
            </el-select>
          </div>
        </div>
        <div class="content_box" v-if="topList.length > 0 && !topState">
          <div class="box-left" style="width: 60%;">
            <div id="echarts3" style="height: 300px"></div>
          </div>
          <div class="box-right">
            <el-table
              :data="topList"
              element-loading-text="Loading"
              border
              show-summary
              max-height="280"
              :summary-method="getSummaries"
              fit
              highlight-current-row
              :default-sort = "{prop: 'count', order: 'descending'}"
            >
              <el-table-column label="序号" width="60">
                <template slot-scope="scope">{{ scope.$index + 1 }}</template>
              </el-table-column>
              <el-table-column prop="province" label="地区" :formatter="formatStatus"/>
              <el-table-column prop="count" label="土地交易项目 (个)" align="right" :formatter="formatStatus" sortable/>
              <el-table-column prop="rate" label="占比（%）" align="right" :formatter="formatStatus" width="100"/>
            </el-table>
          </div>
        </div>
        <div class="empty" v-if="topList.length === 0 && !topState">
          <img class="img" src="@/assets/images/project/empty.png">
          <div class="p1">抱歉，暂无数据展示</div>
        </div>
      </div>
      <div v-if="!nftjState" class="td_content">
        <div class="flex-box query-box">
          <div class="flex-box query-params">
            <span class="common-title">全国土地交易项目年份统计</span>
          </div>
        </div>
        <div class="content_box" v-if="nftjList.length > 0 && !nftjState">
          <div class="box-left" style="width: 60%;">
            <div id="echarts4" style="height: 300px"></div>
          </div>
          <div class="box-right">
            <el-table
              :data="nftjList"
              element-loading-text="Loading"
              border
              show-summary
              max-height="290"
              :summary-method="getSummaries"
              fit
              highlight-current-row
            >
              <el-table-column label="序号" width="60">
                <template slot-scope="scope">{{ scope.$index + 1 }}</template>
              </el-table-column>
              <el-table-column prop="type" label="年份" :formatter="formatStatus"/>
              <el-table-column prop="count" label="土地交易项目 (个)" align="right" :formatter="formatStatus" sortable/>
              <el-table-column prop="rate" label="占比（%）" align="right" :formatter="formatStatus" width="100"/>
            </el-table>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
  import * as echarts from 'echarts';
  import dataRegion from '@/assets/json/dataRegion'
  import { countLandMarketByType,countLandMarketByProvince,countLandMarketByYear } from '@/api/macro/macro'
  import skeleton from '../../component/skeleton'
export default {
  name: 'NationalEconomies',
  components: {
    skeleton
  },
  data() {
    return {
      myChart1:'',
      myChart2:'',
      myChart3:'',
      myChart4:'',
      addressList:[],
      address:[],
      years:[2023],
      years1:[2023],
      years2:[2023],
      yearOptions:[],
      gyfsList:[],
      tdytList:[],
      topList:[],
      nftjList:[],
      isSkeleton:true,
      gyflState:true,
      tdytState:true,
      topState:true,
      nftjState:true,
      // typeName:['住宅用地','工业用地','城镇住宅用地','其他商服用地','公共设施用地','公路用地','城镇村道路用地','公园与绿地',
      //   '工矿仓储用地','零售商业用地','科研用地','街巷用地','机关团体用地','商服用地','商务金融用地']
    }
  },
  created() {
    this.dataRegion()
    this.yearsData()

  },
  mounted() {
    this.$nextTick(()=>{
      this.getCountLandMarketByType()
      this.getCountLandMarketByTypeTd()
      this.getCountLandMarketByProvince()
      this.getCountLandMarketByYear()
    })

  },
  beforeDestroy(){

  },
  methods: {
    getCountLandMarketByType(){
      // this.isSkeleton = true
      countLandMarketByType({type:'供应方式',yearStr:this.years.join(",")}).then(res => {
        this.isSkeleton = false
        this.gyflState = false
        this.gyfsList=res.data.provinceDate;
        var list=[];
        for(var i=0;i<res.data.provinceDate.length;i++){
          var obj={};
          obj.name=res.data.provinceDate[i].type;
          obj.value=res.data.provinceDate[i].count;
          obj.rate=res.data.provinceDate[i].rate;
          list.push(obj)
        }
        if(list.length > 0){
          this.$nextTick(() => {
            this.initChart1(list)
          })
        }
      })
    },
    getCountLandMarketByTypeTd(){
      // this.isSkeleton = true
      countLandMarketByType({type:'土地用途',yearStr:this.years1.join(",")}).then(res => {
        // this.isSkeleton = false
        this.tdytState=false;
        this.tdytList=res.data.provinceDate;
        if(res.data.provinceDate.length > 0){
          var list=[];
          for(var i=0;i<10;i++){
            var obj={};
            obj.name=res.data.provinceDate[i].type;
            obj.value=res.data.provinceDate[i].count;
            obj.rate=res.data.provinceDate[i].rate;
            list.push(obj)
          }
          if(list.length > 0){
            this.$nextTick(() => {
              this.initChart2(list)
            })
          }
        }
      })
    },
    getCountLandMarketByProvince(){
      let params={
        yearStr:this.years2.join(",")
      }
      if(this.address.length > 0){
        params.provinceId=this.address.join(",")
      }
      countLandMarketByProvince(params).then(res => {
        this.topState = false
        this.topList=res.data.provinceDate;
        var list=[];
        if(res.data.provinceDate){
          for(var i=0;i<res.data.provinceDate.length;i++){
            var obj={};
            obj.province=res.data.provinceDate[i].province;
            obj.value=res.data.provinceDate[i].count;
            obj.rate=res.data.provinceDate[i].rate;
            obj.typeList=res.data.provinceDate[i].typeList
            list.push(obj)
          }
          if(list.length > 0){
            this.$nextTick(() => {
              this.initChart3(list)
            })
          }
        }
      })
    },
    getCountLandMarketByYear(){
      countLandMarketByYear().then(res => {
        this.nftjState=false;
        this.nftjList=res.data.yearDate;
        var list=[];
        if(res.data.yearDate){
          for(var i=0;i<res.data.yearDate.length;i++){
            var obj={};
            obj.type=res.data.yearDate[i].type;
            obj.value=res.data.yearDate[i].count;
            obj.rate=res.data.yearDate[i].rate;
            obj.typeList=res.data.yearDate[i].typeList
            list.push(obj)
          }
          if(list.length > 0){
            this.$nextTick(() => {
              this.initChart4(list)
            })
          }
        }
      })
    },
    initChart1(data) {
      this.$nextTick(() => {
        let myChart = echarts.init(document.getElementById("echarts1"))
        let option ={
          tooltip: {
            trigger: 'item',
            borderWidth:0,
            backgroundColor:"rgba(255, 255, 255, 0.8)",
            formatter: function (params) {
              var result = ''
              result+='<h3 style="color: #232226;padding: 0 0 5px 0;margin: 0;">'+ params.data.name +'</h3>'
              result+='<p style="color: rgba(35,35,35,0.8);padding: 0;margin: 0;">'+ params.data.value +'个 '+ params.data.rate +'%</p>'
              return result;
            },
            extraCssText:'width:150px!important;',
          },
          legend: {
            type: 'scroll',
            orient: 'horizontal',
            bottom: 0,
            data: data,
            itemHeight:8,
            itemWidth:12,
            pageButtonPosition: 'end',
          },
          color:['#8A82F3', '#5B9CF7', '#43BBE0','#8ECF95','#FFDC6B','#FFDC6B','#FFC08D','#FE9C77','#E8649B','#A151F5'],
          series: [
            {
              type: 'pie',
              radius: '55%',
              center: ['50%', '50%'],
              data: data,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        }
        myChart.setOption(option);
        window.addEventListener("resize", function () {
          myChart.resize();//图表跟随页面大小变化宽度
        });
      })
    },
    initChart2(data) {
      this.$nextTick(() => {
        let myChart = echarts.init(document.getElementById("echarts2"))
        let option ={
          tooltip: {
            trigger: 'item',
            borderWidth:0,
            backgroundColor:"rgba(255, 255, 255, 0.8)",
            formatter: function (params) {
              var result = ''
              result+='<h3 style="color: #232226;padding: 0 0 5px 0;margin: 0;">'+ params.data.name +'</h3>'
              result+='<p style="color: rgba(35,35,35,0.8);padding: 0;margin: 0;">'+ params.data.value +'个 '+ params.data.rate +'%</p>'
              return result;
            },
            extraCssText:'width:150px!important;',
          },
          legend: {
            type: 'scroll',
            orient: 'horizontal',
            bottom: 0,
            data: data,
            itemHeight:8,
            itemWidth:12,
            pageButtonPosition: 'end',
          },
          color:['#8A82F3', '#5B9CF7', '#43BBE0','#8ECF95','#FFDC6B','#FFDC6B','#FFC08D','#FE9C77','#E8649B','#A151F5'],
          series: [
            {
              type: 'pie',
              radius: '55%',
              center: ['50%', '50%'],
              data: data,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        }
        myChart.setOption(option);
        window.addEventListener("resize", function () {
          myChart.resize();//图表跟随页面大小变化宽度
        });
      })
    },
    initChart3(data) {
      this.$nextTick(() => {
        // console.log(typeList)
        let myChart = echarts.init(document.getElementById("echarts3"))
        let seriesData=[]
        let color=['#FCD68A', '#FFE48A', '#FFB8AD', '#FFD7AD', '#A9F1E5', '#D0FAB7', '#ADC0FF', '#BEECFF', '#81D5BC', '#67B3FD', '#E9C8FF', '#56BFA1', '#6799FD'];
        let typeNameList=data[0].typeList.map(item => item.type);
        let item={}
        for(var i=0; i<data.length; i++){
          for(var j=0; j<data[i].typeList.length; j++){
            item[typeNameList[j]] = [];
          }
        }
        for(var i=0; i<data.length; i++) {
          for (var j = 0; j < data[i].typeList.length; j++) {
            if(data[i].typeList[j].type === typeNameList[0]){
              item[typeNameList[0]].push(data[i].typeList[j].count)
            }
            if(data[i].typeList[j].type === typeNameList[1]){
              item[typeNameList[1]].push(data[i].typeList[j].count)
            }
            if(data[i].typeList[j].type === typeNameList[2]){
              item[typeNameList[2]].push(data[i].typeList[j].count)
            }
            if(data[i].typeList[j].type === typeNameList[3]){
              item[typeNameList[3]].push(data[i].typeList[j].count)
            }
            if(data[i].typeList[j].type === typeNameList[4]){
              item[typeNameList[4]].push(data[i].typeList[j].count)
            }
            if(data[i].typeList[j].type === typeNameList[5]){
              item[typeNameList[5]].push(data[i].typeList[j].count)
            }
            if(data[i].typeList[j].type === typeNameList[6]){
              item[typeNameList[6]].push(data[i].typeList[j].count)
            }
            if(data[i].typeList[j].type === typeNameList[7]){
              item[typeNameList[7]].push(data[i].typeList[j].count)
            }
            if(data[i].typeList[j].type === typeNameList[8]){
              item[typeNameList[8]].push(data[i].typeList[j].count)
            }
            if(data[i].typeList[j].type === typeNameList[9]){
              item[typeNameList[9]].push(data[i].typeList[j].count)
            }
            if(data[i].typeList[j].type === typeNameList[10]){
              item[typeNameList[10]].push(data[i].typeList[j].count)
            }
            if(data[i].typeList[j].type === typeNameList[11]){
              item[typeNameList[11]].push(data[i].typeList[j].count)
            }
            if(data[i].typeList[j].type === typeNameList[12]){
              item[typeNameList[12]].push(data[i].typeList[j].count)
            }
          }
        }
        for(var i=0; i<typeNameList.length; i++) {
          seriesData.push({
            name:typeNameList[i],
            smooth: false, //平滑
            type:"line",
            symbolSize: 6, //折线拐点大小
            itemStyle: {
              normal: {
                color: color[i], //图例颜色
                borderWidth: 4,
                borderColor: color[i],
                lineStyle: { color: color[i], width: 2 }
              }
            },
            data:item[typeNameList[i]],
          });
        }
        let option ={
          // legend: {
          //   left: "center",
          //   bottom: 0,
          //   itemHeight:8,
          //   itemWidth:16,
          // },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'line',
              label: {
                backgroundColor: '#FFFFFF'
              }
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            axisLabel: {
              show: true,
              interval: 0
            },
            data: data.map(item => item.province),
          },
          yAxis: {
            type: 'value',
          },
          grid: {
            top:30,
            left:50,
            right:20,
            bottom:60,
          },
          color:['#FCD68A', '#FFE48A', '#FFB8AD', '#FFD7AD', '#A9F1E5', '#D0FAB7', '#ADC0FF', '#BEECFF', '#81D5BC', '#67B3FD', '#E9C8FF', '#56BFA1', '#6799FD'],
          series: seriesData
        }
        myChart.setOption(option);
        window.addEventListener("resize", function () {
          myChart.resize();//图表跟随页面大小变化宽度
        });
      })
    },
    initChart4(data) {
      this.$nextTick(() => {
        let myChart = echarts.init(document.getElementById("echarts4"))
        let seriesData=[]
        let color=['#FCD68A', '#FFE48A', '#FFB8AD', '#FFD7AD', '#A9F1E5', '#D0FAB7', '#ADC0FF', '#BEECFF', '#81D5BC', '#67B3FD', '#E9C8FF', '#56BFA1', '#6799FD'];
        let typeNameList=data[0].typeList.map(item => item.type);
        let item={}
        for(var i=0; i<data.length; i++){
          for(var j=0; j<data[i].typeList.length; j++){
            item[typeNameList[j]] = [];
          }
        }
        for(var i=0; i<data.length; i++) {
          for (var j = 0; j < data[i].typeList.length; j++) {
            if(data[i].typeList[j].type === typeNameList[0]){
              item[typeNameList[0]].push(data[i].typeList[j].count)
            }
            if(data[i].typeList[j].type === typeNameList[1]){
              item[typeNameList[1]].push(data[i].typeList[j].count)
            }
            if(data[i].typeList[j].type === typeNameList[2]){
              item[typeNameList[2]].push(data[i].typeList[j].count)
            }
            if(data[i].typeList[j].type === typeNameList[3]){
              item[typeNameList[3]].push(data[i].typeList[j].count)
            }
            if(data[i].typeList[j].type === typeNameList[4]){
              item[typeNameList[4]].push(data[i].typeList[j].count)
            }
            if(data[i].typeList[j].type === typeNameList[5]){
              item[typeNameList[5]].push(data[i].typeList[j].count)
            }
            if(data[i].typeList[j].type === typeNameList[6]){
              item[typeNameList[6]].push(data[i].typeList[j].count)
            }
            if(data[i].typeList[j].type === typeNameList[7]){
              item[typeNameList[7]].push(data[i].typeList[j].count)
            }
            if(data[i].typeList[j].type === typeNameList[8]){
              item[typeNameList[8]].push(data[i].typeList[j].count)
            }
            if(data[i].typeList[j].type === typeNameList[9]){
              item[typeNameList[9]].push(data[i].typeList[j].count)
            }
            if(data[i].typeList[j].type === typeNameList[10]){
              item[typeNameList[10]].push(data[i].typeList[j].count)
            }
            if(data[i].typeList[j].type === typeNameList[11]){
              item[typeNameList[11]].push(data[i].typeList[j].count)
            }
            if(data[i].typeList[j].type === typeNameList[12]){
              item[typeNameList[12]].push(data[i].typeList[j].count)
            }
          }
        }
        for(var i=0; i<typeNameList.length; i++) {
          seriesData.push({
            name:typeNameList[i],
            smooth: false, //平滑
            type:"line",
            symbolSize: 6, //折线拐点大小
            itemStyle: {
              normal: {
                color: color[i], //图例颜色
                borderWidth: 4,
                borderColor: color[i],
                lineStyle: { color: color[i], width: 2 }
              }
            },
            data:item[typeNameList[i]],
          });
        }
        let option ={
          // legend: {
          //   left: "center",
          //   bottom: 0,
          //   itemHeight:8,
          //   itemWidth:16,
          // },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'line',
              label: {
                backgroundColor: '#FFFFFF'
              }
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            axisLabel: {
              show: true,
              interval: 0
            },
            data: data.map(item => item.type),
          },
          yAxis: {
            type: 'value',
          },
          grid: {
            top:30,
            left:50,
            right:20,
            bottom:60,
          },
          color:['#FCD68A', '#FFE48A', '#FFB8AD', '#FFD7AD', '#A9F1E5', '#D0FAB7', '#ADC0FF', '#BEECFF', '#81D5BC', '#67B3FD', '#E9C8FF', '#56BFA1', '#6799FD'],
          series: seriesData
        }
        myChart.setOption(option);
        window.addEventListener("resize", function () {
          myChart.resize();//图表跟随页面大小变化宽度
        });
      })
    },
    //地区
    async dataRegion() {
      var str = [];
      for (let x = 0; x < 3; x++) {
        for (let i = 0; i < dataRegion.length; i++) {
          if (dataRegion[i].regionLevel == x + 1 && x + 1 == 1) {
            str.push({
              'id': dataRegion[i].id,
              "label": dataRegion[i].regionName,
              "short": dataRegion[i].short,
              "value": dataRegion[i].parentId,
              "children": []
            });
          }
        }
      }
      this.addressList = str;
    },
    handleYears(key){
      switch (key) {
        case 1:
          this.getCountLandMarketByType()
          break;
        case 2:
          this.getCountLandMarketByTypeTd()
          break;
        case 3:
          this.getCountLandMarketByProvince()
          break;
      }
    },
    handleSearch(){
      // console.log(this.address)
    },
    yearsData(){
      let mydate=new Date();
      let Year = mydate.getFullYear();
      let startyear=mydate.getFullYear()-4;
      let Years=[];
      for(var i=startyear;i<=Year;i++){
        Years.push(i);
      }
      this.yearOptions=Years.reverse()
    },
    formatStatus: function(row, column, cellValue) {
      return cellValue? cellValue : '-'
    },
    getSummaries(param){
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计';
          return;
        }
        if (index === 1) {
          sums[index] = '-';
          return;
        }
        if (index === 3) {
          sums[index] = '100';
          return;
        }
        const values = data.map(item => Number(item[column.property]));
        sums[index] = values.reduce((prev, curr) => {
          const value = Number(curr);
          if (!isNaN(value)) {
            return Number(prev) + Number(curr)
          } else {
            return prev;
          }
        }, 0);

        if (index === 1) {
          sums[index] = Number(sums[index]).toFixed(0);
          return;
        }
      });
      return sums;
    },

  }
}
</script>

<style lang="scss" scoped>
  .land_date_picker{
    position: absolute!important;
    visibility: hidden;
    left: -645px;
    top: 145px;
  }
  ::v-deep .el-popper .popper__arrow, .el-popper .popper__arrow::after{
    display: none;
  }
  .color_text{
    background: #F3F4F5;
    border-radius: 4px;
    color: #0081FF;
  }
  .tdjy{
    .text_p{
      color: #999999;
      font-size: 14px;
      margin: 0;
    }
    .empty{
      margin: 0 auto;
      height: 300px;
      text-align: center;
      .img{
        width: 108px;
        height: 108px;
        margin-bottom: 24px;
        margin-top: 70px;
      }
      .p1{
        color: #333333;
        font-size: 16px;
      }
    }
    .query-params{
      .common-title{
        margin-right: 24px;
      }
      ::v-deep .form-content-width{
        width: 150px;
        .el-select__input{
          width: 10px !important;
          max-width: 10px !important;
          margin-left:0;
        }
      }
      ::v-deep .el-cascader{
        width: 220px;
        .el-cascader__tags{
          flex-wrap: inherit;
          .el-tag{
            max-width: 130px;
          }
        }
      }
    }
    .td_content{
      background: #ffffff;
      border-radius: 4px;
      margin-top: 12px;
      padding: 16px 52px 16px 16px;
    }
    .content_box{
      display: flex;
      justify-content: space-between;
      .box-left{
        width: 60%;
      }
      .box-right{
        width: 33%;
        float: right;
        ::v-deep .el-table{
          .sort-caret.ascending{
            border-bottom-color: rgba(0,129,255,0.5);
          }
          .ascending .sort-caret.ascending{
            border-bottom-color: #0081FF;
          }
          .sort-caret.descending{
            border-top-color: rgba(0,129,255,0.5);
          }
          .descending .sort-caret.descending{
            border-top-color: #0081FF;
          }

          .el-table__header-wrapper{
            background: #F0F3FA;
            th{
              background: #F0F3FA;
              /*text-align: left;*/
            }
          }
          .el-table__footer-wrapper{
            background: #F0F3FA;
          }
          th {
            font-size: 13px !important;
            font-weight: 400 !important;
          }
          .cell {
            padding-right: 12px !important;
            padding-left: 12px !important;
            line-height: 18px;
          }
          .el-table__fixed-header-wrapper{
            th{
              background: #F0F3FA;
            }
          }
          td.el-table__cell{
            border-bottom: 0;
          }
          tr{
            &.current-row>td{
              background-color: initial;
            }
            &:nth-child(2n) {
              background: #F8FBFF;
            }
          }
          .el-table__cell{
            height: 40px;
            padding: 0;
            line-height: 40px;
          }
          .el-table__body tr:hover > td.el-table__cell{
            background: #DCEBFF;
          }
          ::-webkit-scrollbar-track-piece {
            //滚动条凹槽的颜色，还可以设置边框属性
            background-color: #F3F4F5;
            height: 16px;
            padding: 0 4px;
          }
          //滚动条的宽度
          ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
            background-color: #F3F4F5;
            border-radius: 6px;
          }
          //滚动条的滑块
          ::-webkit-scrollbar-thumb {
            border-radius: 8px;
            height: 8px;
            margin: 0 4px;
            background: rgba(98,110,126,0.2);
            border: 4px solid rgba(98,110,126,0.2);;
            &:hover{
              background: #566380;
            }
          }
          .has-gutter{
            tr{
              th:nth-child(4){
                border-right:0;
              }
              td:nth-child(4){
                border-right:0;
              }
            }
          }
          .el-table__cell.gutter{
            background: #F0F3FA;
          }
          .el-table__row{
            td:last-child{
              .cell{
                padding-right: 12px !important;
              }
            }
          }
        }
      }
    }

    ::v-deep .el-input--medium{
      .el-input__icon{
        line-height: 32px;
      }
    }
  }
</style>
