<template>
    <div class="left-container cim-left-container" :class="roleinfo.btnVisible?'show':'hide'">
      <div class="left-container-body">
          <div class="left-container-body-title"><span>水稻种植分布情况</span></div>
          
          <div class="left-container-body-box" style="height:calc(100% - 27px);">
              <div id="rightEchartsId" v-if="roleinfo.echartsVislble" class="coverDiv"></div>
          </div>
      </div>
      <div class="left-container-body left-container-body-middle">
          <div class="left-container-body-title"><span>农村土地利用现状</span></div>
     
          <div class="left-container-body-box" style="height:calc(100% - 27px);">
              <div id="fwjglxCharts" v-if="roleinfo.echartsVislble" class="coverDiv"></div>
          </div>
      </div>
      <div class="left-container-body left-container-body-bottom">
          <div class="left-container-body-title"><span>农田分布情况</span></div>
          <div class="left-container-body-bottom-box">
              <el-table :data="roleinfo.tableData" border style="width: 100%">
                  <el-table-column prop="name" label="地区" />
                  <el-table-column prop="area" label="面积" />
              </el-table>
          </div>
      </div>
    </div>
  
  
  
    <div class="right-container cim-left-container" :class="roleinfo.btnVisible?'show':'hide'">
      <div class="left-container-body">
          <div class="left-container-body-title"><span>土地交易情况</span></div>
          <div class="flex fc-w " style="height:calc(100% - 27px);">
            <div class="flex-1 flex column">
                <div class="flex-1 flex ai-c jc-c column">
                    <p>承包户数量</p>
                    <p class="mt-1"><span class="fz-18" style="color:aqua">11231</span>户</p>
                </div>
                <div class="flex-1 flex ai-c jc-c column">
                    <p>承包户面积</p>
                    <p class="mt-1"><span class="fz-18" style="color:aqua">25618.74</span>亩</p>
                </div>
            </div>
            <div class="flex-1 flex column">
                <div class="flex-1 flex ai-c jc-c column">
                    <p>挂牌土地成交面积</p>
                    <p class="mt-1"><span class="fz-18" style="color:aquamarine">1362.49</span>亩</p>
                </div>
                <div class="flex-1 flex ai-c jc-c column">
                    <p>挂牌土地成交量</p>
                    <p class="mt-1"><span class="fz-18" style="color:aquamarine">9</span>笔</p>
                </div>
            </div>
          </div>
          
      </div>
      <div class="left-container-body left-container-body-middle">
          <div class="left-container-body-title"><span>不动产用途统计</span></div>
          <div class="left-container-body-box" style="height:calc(100% - 27px);">
              <div id="rightEchartsId1" v-if="roleinfo.echartsVislble" class="coverDiv"></div>
          </div>
      </div>
      <div class="left-container-body left-container-body-bottom">
          <div class="left-container-body-title"><span>粮食生产情况</span></div>
          <div class="left-container-body-box" style="height:calc(100% - 27px);">
              <div id="rightEchartsId2" v-if="roleinfo.echartsVislble" class="coverDiv"></div>
          </div>
      </div>
    </div>
  </template>
  <script>
  import {defineComponent, reactive, onMounted,inject,watch} from "vue";
  import { postMethodCommon,getMethodCommon } from "../../../api/common"
  export default defineComponent({
    name: 'realestate',
    components: {
      
    },
    props:['visible'],
    setup(props) {
      let data = reactive({
          roleinfo:{
              btnVisible: true,
              echartsVislble: true,
              buildType:{
                  commercial_housie: '',
                  self_built_house: ''
              },
              areavalue:'',
              jgareavalue: '',
              areaOptions:[],
              jgIndex: 0,
              houseType: 1,
              jgOptions:[
                  {
                      value: 1,
                      label: '商品房'
                  },
                  {
                      value: 2,
                      label: '自建房'
                  },
                  {
                      value: 3,
                      label: '主房'
                  },{
                      value: 4,
                      label: '配房'
                  }
              ],
              tableData:[
                  { name: '民义社区', area: '775' },
                  { name: '城南头社区', area: '648' },
                  { name: '兴国庄村', area: '639' },
                  { name: '仲口村', area: '610' },
                  { name: '仲口屯', area: '632' },
                  { name: '万仓', area: '677' },
                  { name: '永兴庄', area: '535' },
                  { name: '顺合村', area: '504' },
                  { name: '古城村', area: '546' },
                  { name: '西毕城', area: '794' },
                  { name: '东西沟村', area: '711' },
                  { name: '刘官庄', area: '798' },
                  { name: '双邱村', area: '764' },
                  { name: '平安曲池村', area: '498' },
                  { name: '大青太村', area: '799' },
                  { name: '上冶一村', area: '771' },
                  { name: '上冶二村', area: '612' },
                  { name: '上冶三村', area: '632' },
                  { name: '上冶四村', area: '610' },
                  { name: '上冶五村', area: '612' },
                  { name: '坝前村', area: '577' },
                  { name: '北村', area: '435' },
                  { name: '埠后', area: '524' },
                  { name: '蔡庄', area: '576' },
                  { name: '东岭', area: '714' },
                  { name: '里仁庄村', area: '611' },
                  { name: '姚河庄', area: '718' },
                  { name: '翟家村', area: '664' }
                  
              ]
          }
      })
      watch(
        () => props.visible,
        (newVal, oldVal) => {
          data.roleinfo.btnVisible = newVal
        }
      )
      onMounted(() => {
          methods.getOrgArea()
          methods.getHouseRegisterList()
          methods.handRightEcharts1()
          methods.handRightEcharts2()
          methods.handRightEcharts3()
      })
      let echarts = inject("echarts");
      let methods = {
          jgClick(item,index){
              data.roleinfo.jgIndex = index
              data.roleinfo.houseType = item.value
              methods.getStructure()
          },
          buildChange(){
              methods.getBuildType()
          },
          structureChange(){
              methods.getStructure()
          },
          // 房屋建筑类型
          getBuildType(){
              let arrData = data.roleinfo.areaOptions
              let areaText = ''
              arrData.forEach(item =>{
                  if(item.id == data.roleinfo.areavalue){
                      areaText = item.text
                  }
              })
              let param = {
                  county: areaText
              }
              getMethodCommon('/CimApplication/GetHouseBuildCount',param).then(res => {
                  let dataObj = res.result
                  data.roleinfo.buildType = dataObj
              })
          },
          // 房屋结构类型
          getStructure(){
              let arrData = data.roleinfo.areaOptions
              let areaText = ''
              arrData.forEach(item =>{
                  if(item.id == data.roleinfo.jgareavalue){
                      areaText = item.text
                  }
              })
              let param = {
                  county: areaText,
                  house_type: data.roleinfo.houseType
              }
              postMethodCommon('/CimApplication/LoadControlLandUsed').then(res => {
                  let dataObj = res.result
                  let xValue = []
                  let yValue = []
                  dataObj.forEach(item =>{
                    if (item.type == 1) {
                        xValue.push(item.name);
                        yValue.push({
                            value: item.num,
                            name: item.name,
                        });
                    }
                  })
                 
                  methods.getCharts(xValue, yValue)
              })
          },
          // 房屋产权登记列表
          getHouseRegisterList(){
              postMethodCommon('/CimApplication/LoadRealEstateBuildList').then(res => {
                  let dataObj = res.data
                //   data.roleinfo.tableData = dataObj
              })
          },
          getOrgArea(){
              getMethodCommon('/Orgs/OrgList', {name: '费县'}).then(res => {
                  let dataObj = res.result
                  data.roleinfo.areaOptions = dataObj[0].children
  
                  let obj = {
                      id: 'feixian',
                      text: '费县'
                  }
                  data.roleinfo.areaOptions.unshift(obj);
                  data.roleinfo.areavalue = dataObj[0].children[0].id
                  data.roleinfo.jgareavalue = dataObj[0].children[0].id
                  
                  methods.getBuildType()
                  methods.getStructure()
              })
          },
          getCharts(xValue, yValue){
              let chartBox = echarts.init(document.getElementById("fwjglxCharts")); 
              let colorList = [
                    ["#F76B1C", "#FAD961"],
                    ["#4D7CFE", "#51C0F8"],
                    ["#0096AF", "#00D6BE"],
                    ["#F7F011", "#CAD951"],
                    ["#9D7C0E", "#91C0E8"],
                    ["#0096AF", "#00D6BE"],
                    ["#176B1C", "#0AD961"],
                    ["#907CFE", "#F1C0F8"],
                ];
                let option = {
                grid: {
                    bottom: "40",
                    top: "20",
                },
                tooltip: {
                    trigger: "axis",
                    // formatter: (params) => {
                    //   var result = "";
                    //   params.forEach(function (item) {
                    //     let markerHtml = `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background: linear-gradient(360deg, ${item.color.colorStops[1].color} 0%, ${item.color.colorStops[0].color} 100%);"></span>`;
                    //     result += `${item.axisValue}<br>${markerHtml}${item.data}%`;
                    //   });
                    //   return result;
                    // },
                },
                xAxis: {
                    data: xValue,
                    axisTick: {
                    show: false,
                    },
                    axisLine: {
                    show: true,
                    lineStyle: {
                        color: "#fff",
                        width: 0.5, //这里是为了突出显示加上的
                    },
                    },
                    axisLabel: {
                    color: "#fff",
                    fontSize: 8,
                    interval: 0,
                    rotate: 25,
                    },
                    // axisLabel: {
                    //   textStyle: {
                    //     color: "#8998AC",
                    //     fontSize: 10,
                    //   },
                    // },
                },
                yAxis: [
                    {
                    // name: "亩",
                    nameTextStyle: {
                        color: "#fff",
                        padding: [0, 10, 0, 0],
                    },
                    splitLine: {
                        lineStyle: {
                        color: "#21387F",
                        type: "dashed",
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLine: {
                        show: false,
                    },
                    axisLabel: {
                        textStyle: {
                        color: "#fff",
                        fontSize: 8,
                        },
                    },
                    },
                ],
                series: [
                    {
                    name: "农村土地利用现状",
                    type: "pictorialBar",
                    barCategoryGap: "0%",
                    symbol:
                        "path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z",
                    barWidth: "65%",
                    itemStyle: {
                        color: function (params) {
                        let itemColor = colorList[params.dataIndex];
                        let curColor = "";
                        if (Array.isArray(itemColor)) {
                            curColor = {
                            type: "linear",
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [
                                {
                                offset: 0,
                                color: itemColor[0], //  0%  处的颜色
                                },
                                {
                                offset: 1,
                                color: itemColor[1] ? itemColor[1] : itemColor[0], //  100%  处的颜色
                                },
                            ],
                            global: false, //  缺省为  false
                            };
                        } else {
                            curColor = itemColor;
                        }
                        return curColor;
                        },
                    },
                    data: yValue,
                    z: 10,
                    },
                ],
                };
              chartBox.setOption(option);
              // 根据页面大小自动响应图表大小
              window.addEventListener("resize", function () {
                  chartBox.resize();
              })
          },
          handRightEcharts1(){
              let chartBox = echarts.init(document.getElementById("rightEchartsId")); 
              var data1 = [
                  { value: 16, name: "上冶镇" },
                  { value: 10, name: "太平镇" },
              ];
              let colorList = [ "#02F2F3", "#68B5FB", "#D45A49", "#F3E58D", "#C0FE5D", "#15DE57", "#F9F936", "#F76B1C","#176B1C","#F1C0F8","#907CFE","#0096AF","#0AD961", "#FAD961" ];
  
              let option = {
                  tooltip: {
                      trigger: "item",
                      formatter: "{a} <br/>{b}: {c} ({d}%)"
                  },
                  legend: {
                      orient: "vertical",
                      top: "center",
                      left: "0",
                      textStyle: {
                          fontSize: 14,
                          color: "#fff"
                      },
                      formatter:function(name){
                          const item = data1.filter((item) => item.name === name)[0];
                          return `${name}：${item.value}`;
                      }
                  },
                  series: [
                      {
                          name: "小麦种植分布",
                          type: "pie",
                          center: ["70%", "50%"],
                        //   radius: ["50%", "80%"],
                          avoidLabelOverlap: false,
                          label: {
                              show: false,
                              position: "center"
                          },
                          itemStyle: {
                              normal: {
                                  color: function(params) {
                                      return colorList[params.dataIndex];
                                  }
                              }
                          },
                          labelLine: {
                              show: false
                          },
                          data: data1
                      }
                  ]
              };
              chartBox.setOption(option);
              // 根据页面大小自动响应图表大小
              window.addEventListener("resize", function () {
                  chartBox.resize();
              })
  
          },
          handRightEcharts2(){
              let chartBox = echarts.init(document.getElementById("rightEchartsId1")); 
              let data = [{
                  "name": "办公",
                  "value": 80
              }, {
                  "name": "住宅",
                  "value": 87.8
              }, {
                  "name": "商业",
                  "value": 71
              }, {
                  "name": "工业",
                  "value": 80
              }, {
                  "name": "仓储",
                  "value": 66
              }, {
                  "name": "其他",
                  "value": 80
              }];
              let xData = [],
                  yData = [];
              let min = 50; 
              data.map(function(a, b) {
                  xData.push(a.name);
                  if (a.value === 0) {
                      yData.push(a.value + min);
                  } else {
                      yData.push(a.value);
                  }
              });
              let option = {
                  tooltip: {
                      trigger: 'axis',
                      formatter: "{a} <br/>{b}: {c} "
                  },
                  legend: {
                      show: false
                  },
                  grid: {
                      left: '0%',
                      right: '2%',
                      bottom: '1%',
                      top: '10%',
                      containLabel: true,
                      z: 22
                  },
                  xAxis: [{
                      type: 'category',
                      gridIndex: 0,
                      data: xData,
                      axisTick: {
                          alignWithLabel: true
                      },
                      axisLine: {
                          lineStyle: {
                              color: '#0c3b71'
                          }
                      },
                      axisLabel: {
                          show: true,
                          color: '#fff',
                          fontSize:14
                      }
                  }],
                  yAxis: [{
                          type: 'value',
                          gridIndex: 0,
                          splitLine: {
                              show: false
                          },
                          axisTick: {
                              show: false
                          },
                          min: min,
                          max: 100,
                          splitLine: {
                              lineStyle: {
                                  type: 'solid',
                                  color: '#8EE3FF',
                                  opacity: '0.3'
                              },
                          },
                          axisLine: {
                              lineStyle: {
                                  color: '#00E4FF'
                              }
                          },
                          axisLabel: {
                              color: '#fff',
                          }
                      }
                  ],
                  series: [{
                          name: '不动产用途统计',
                          type: 'bar',
                          barWidth: '20',
                          xAxisIndex: 0,
                          yAxisIndex: 0,
                          itemStyle: {
                              normal: {
                                  barBorderRadius: 30,
                                  color: new echarts.graphic.LinearGradient(
                                      0, 0, 0, 1, [{
                                              offset: 0,
                                              color: '#00A2FF'
                                          },
                                          {
                                              offset: 1,
                                              color: '#00CCD2'
                                          }
                                      ]
                                  )
                              }
                          },
                          data: yData,
                          zlevel: 11
  
                      }
                  
                  ]
              };
  
  
              chartBox.setOption(option);
              // 根据页面大小自动响应图表大小
              window.addEventListener("resize", function () {
                  chartBox.resize();
              })
          },
          handRightEcharts3(){
              let chartBox = echarts.init(document.getElementById("rightEchartsId2")); 
              let getname = ["2016","2017","2018", "2019", "2020", "2021","2022"];
              let getvalue= [120,130,125,130,125,135,140];
              let getvalue1= [100,95,105,108,105,111,115];
  
              let option = {
                  tooltip: {
                      trigger: 'axis',
                    //   formatter: "{a} <br/>{b}: {c}"
                  },
                  grid: {
                      top: '28%',
                      left: '3%',
                      right: '5%',
                      bottom: '5%',
                      containLabel: true
                  },
                  legend: {
                      orient: "vertical",
                      top: "0",
                      right: "0",
                      textStyle: {
                          fontSize: 14,
                          color: "#fff"
                      },
                  },
                  xAxis: [{
                      data: getname,
                      axisLabel: {
                          margin: 10,
                          color: '#fff',
                          textStyle: {
                              fontSize: 12
                          },
                      },
                      axisLine: {
                          lineStyle: {
                              color: '#00E4FF',
                          }
                      },
                      axisTick: {
                          show: false
                      },
                  }],
                  yAxis: [{
                      type:'value',
                      axisLabel: {
                          color: '#fff',
                          textStyle: {
                              fontSize: 12
                          },
                      },
                      axisLine: {
                          show:false,
                      },
                      axisTick: {
                          show: false
                      },
                      splitLine: {
                          lineStyle: {
                              color: '#8EE3FF',
                              opacity: '0.3'
                          }
                      }
                  }],
                  series: [
                      {
                          name:'粮食播种面积',
                          type: "line",
                          symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
                          showAllSymbol: true,
                          symbolSize: 0,
                          smooth: true,
                          data: getvalue,
                          lineStyle: {
                              normal: {
                                  width: 5,
                              },
                              borderColor: 'rgba(93,241,255 ,1)',
                          },
                          itemStyle: {
                              normal: {
                                  borderWidth:0,
                                  color: 'rgba(93,241,255 ,1)',
                              },
  
                          }
                      },
                      {
                          name:'粮食总产量',
                          type: "line",
                          symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
                          showAllSymbol: true,
                          symbolSize: 0,
                          smooth: true,
                          data: getvalue1,
                          lineStyle: {
                              normal: {
                                  width: 5,
                              },
                              borderColor: 'rgba(93,23,255 ,1)',
                          },
                          itemStyle: {
                              normal: {
                                  borderWidth:0,
                                  color: 'rgba(93,23,255 ,1)',
                              },
  
                          }
                      }
                  ]
              }
              chartBox.setOption(option);
              // 根据页面大小自动响应图表大小
              window.addEventListener("resize", function () {
                  chartBox.resize();
              })
          }
      };
      return {
        ...methods,
        ...data,
      };
    },
  });
  </script>
  
  <style scoped>
  .left-container{
      position: fixed;
      width: 380px;
      height: calc(100% - 140px);
      top: 95px;
      background: url(/images/cim/leftbg.png);
      background-size: 100% 100%;
  }
  .right-container{
      position: fixed;
      width: 380px;
      height: calc(100% - 140px);
      top: 95px;
      background: url(/images/cim/rightbg.png);
      background-size: 100% 100%;
  }
  .left-container.show{
      left: 20px;
      animation:mymove 1.5s 1;
      -webkit-animation:mymove 1.5s 1;
  }
  .left-container.hide{
      left: -10000px;
      animation:myhidemove 1.5s 1;
      -webkit-animation:myhidemove 1.5s 1;
  }
  .right-container.show{
      right: 20px;
      animation:mymoveright 1.5s 1;
      -webkit-animation:mymoveright 1.5s 1;
  }
  .right-container.hide{
      right: -10000px;
      animation:mymoverighthide 1.5s 1;
      -webkit-animation:mymoverighthide 1.5s 1;
  }
  @keyframes mymove
  { from {left:0px;} to {left:20px;} }
  
  @-webkit-keyframes mymove 
  { from {left:0px;} to {left:20px;} }
  
  @keyframes myhidemove
  { from {left:20px;} to {left:-10000px;} }
  
  @-webkit-keyframes myhidemove 
  { from {left:20px;} to {left:-10000px;} }
  
  @keyframes mymoveright
  { from {right:0px;} to {right:20px;} }
  
  @-webkit-keyframes mymoveright 
  { from {right:0px;} to {right:20px;} }
  
  @keyframes mymoverighthide
  { from {right:20px;} to {right:-10000px;} }
  
  @-webkit-keyframes mymoverighthide 
  { from {right:0px;} to {right:-10000px;} }
  
  .left-container-body{
      width: calc(100% - 26px);
      height: calc(34% - 34px);
      margin-bottom: 10px;
      padding: 13px 12px;
  }
  .left-container-body-middle{
      height: calc(33% - 34px);
  }
  .left-container-body-bottom{
      height: calc(33% - 34px);
  }
  .left-container-body-title{
      width: 361px;
      height: 27px;
      background: url(/public/images/cim/titlebg.png);
      background-size: 100% 100%;
      text-align: left;
      line-height: 18px;
  }
  .left-container-body-title span{
      padding-left: 25px;
      padding-right: 10px;
      font-size: 16px;
      font-family: Adobe Heiti Std;
      font-weight: bold;
      font-style: italic;
      color: #54B3EB;
      background: linear-gradient(-3deg, #76A2ED 0.146484375%, #FFFFFF 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
  }
  
  .left-container-body-screen{
      width: 94%;
      height: 25px;
      margin: 10px auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
  }
  .left-container-body-screen-left{
      width: 95px;
      height: 100%;
  }
  .left-container-body-screen-right{
      color: #fff;
      font-size: 12px;
  }
  .left-container-body-box{
      width: 94%;
      margin: 0 auto;
      height: calc(100% - 45px);
      display: flex;
  }
  .left-container-body-box-container{
      width: 50%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
  }
  .left-container-body-box-container-bg{
      width: 120px;
      height: 120px;
      text-align: center;
      line-height: 120px;
      font-size: 20px;
      font-family: Adobe Heiti Std;
      color: #FFFFFF;
  }
  .left-container-body-box-container-bg.left{
       background: url(/public/images/echartsimg/realestbg1.png);
       background-size: 100% 100%;
  }
  .left-container-body-box-container-bg.left span{
      text-shadow: 0px 0px 8px rgba(0,0,0,0.2600);
      background: linear-gradient(0deg, #FFD620 0%, #FFFFFF 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
  }
  .left-container-body-box-container-bg.right{
      background: url(/public/images/echartsimg/realestbg2.png);
      background-size: 100% 100%;
  }
  .left-container-body-box-container-bg.right span{
      text-shadow: 0px 0px 8px rgba(0,0,0,0.2600);
      background: linear-gradient(0deg, #2CC6FF 0%, #FFFFFF 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
  }
  .left-container-body-box-container-title{
      color: #fff;
      height: 35px;
      line-height: 35px;
  }
  .left-container-body-middle-radio{
      display: flex;
  }
  .left-container-body-middle-radio-item{
      display: flex;
      margin-left: 10px;
      align-items: center;
      cursor: pointer;
  }
  .left-container-body-middle-radio-item span{
      display: block;
      width: 12px;
      height: 12px;
      border-radius: 12px;
      background: #fff;
      margin-right: 7px;
  }
  .left-container-body-middle-radio-item.active span{
      background: linear-gradient(0deg, #630BD1 0%, #BE2FF1 100%);;
  }
  .left-container-body-bottom-box{
      width: 94%;
      height: calc(100% - 30px);
      overflow: auto;
      margin: 10px auto 0;
  }
  .active{
      border: none !important;
  }
  .coverDiv{
      width: 100%;
      height: 100%;
  }
  ::v-deep .el-input__inner{
      width: 100%;
      height: 25px !important;
      background: none;
      border-radius: 0;
      border: 1px solid #1147B9;
      color: #fff;
      font-size: 14px;
      border-radius: 5px;
  }
  </style>
  <style>
  
  .cim-left-container .el-popper{
      background: #fff !important;
  }
  .cim-left-container .el-input__icon{
      color: #fff !important;
  }
  .cim-left-container .el-table tr{
      background: none !important;
  }
  .cim-left-container .el-table{
      background: none !important;
      color: #fff !important;
      border-color: #0B4AC9;
  }
  .cim-left-container .el-table th.el-table__cell{
      color: #fff;
      background: linear-gradient(0deg, #028FCA 0%, #262DCA 100%);
      border-color: #0B4AC9;
  }
  .cim-left-container .el-table--border .el-table__cell{
      border-color:#0B4AC9;
  ;
  }
  .cim-left-container .el-table td.el-table__cell, .cim-left-container .el-table th.el-table__cell.is-leaf{
      border-color: #0B4AC9;
  }
  .cim-left-container .el-table--border:after,
  .el-table--group:after,
  .el-table:before {
      background-color: #0B4AC9;
  }
  
  .cim-left-container .el-table--border,
  .cim-left-container .el-table--group {
      border-color: #0B4AC9;
  }
  
  
  
  .cim-left-container .el-table--enable-row-hover .el-table__body tr:hover > td {
    background-color: #028FCA !important;
  }
  </style>