<template>
  <div class="main_box">
    <div class="home_left">
      <!-- 各机构入住率 -->
      <div class="inner_box">
        <div class="inner_header">
          <div class="header_left"></div>
          <div class="header_icon">
            <div style="width: 12px; height: 10px; margin-bottom: -6px"><img src="@/assets/img/bigScreen/polygon1.png"></div>
            <div style="width: 12px; height: 10px; margin-bottom: 10px"><img src="@/assets/img/bigScreen/polygon2.png"></div>
          </div>
          <div class="header_title">
            <div>
              <span>各机构入住率TOP5</span>
              <span class="little_font">（%）</span>
            </div>
          </div>
        </div>
        <div class="left-top1"></div>
        <div class="left-top2"></div>
      </div>
      <InnerBox :echartObj="echartObj1" header_title="本年每月用餐类型统计" little_font="(单)"/>
      <InnerBox :echartObj="echartObj2" header_title="菜品订单量TOP10" little_font="(单)"/>
    </div>
    <div class="home_center" style="display: block">
      <dv-border-box-8 :color="['#053D7E', '#1E6FEA']" style="width: 100%;height: 32%">
      <div class="inner_box" style="width: 100%;height:100%">
        <div class="inner-header"></div>
        <div style="display: flex;justify-content: space-around;width: 100%;height: 100%">
          <div class="header-left">
            <div class="header-left-title"></div>
            <Echarts class="echarts" style="height: 80%" :echartObj="echartObj3" />
          </div>
          <div class="header-right">
            <div class="header-right-title"></div>
            <Echarts class="echarts" style="height: 80%" :echartObj="echartObj4" />
          </div>
        </div>
      </div>
      </dv-border-box-8>
      <dv-border-box-8 :color="['#00D0FF', '#48E5E5']" style="width: 100%;height: 32%">
      <div class="inner_box" style="width: 100%;height:100%">
        <div class="inner-center"></div>
        <div style="display: flex;justify-content: space-around;width: 100%;height: 100%">
          <div class="center-left">
            <div class="center-left-title"></div>
            <Echarts class="echarts" style="height: 80%" :echartObj="echartObj5" />
          </div>
          <div class="center-right">
            <div class="center-right-title"></div>
            <Echarts class="echarts" style="height: 80%" :echartObj="echartObj6" />
          </div>
        </div>
      </div>
      </dv-border-box-8>
      <dv-border-box-8 :color="['#053D7E', '#1E6FEA']" style="width: 100%;height: 32%">
      <div class="inner_box" style="width: 100%;height:100%">
        <div class="inner-bottom"></div>
        <div style="display: flex;justify-content: space-around;width: 100%;height: 100%">
          <div class="bottom-left"></div>
          <div class="bottom-right">
            <div class="bottom-right-title"></div>
            <Echarts class="echarts" style="height: 80%" :echartObj="echartObj7" />
          </div>
        </div>
      </div>
      </dv-border-box-8>
      </div>
    <div class="home_right">
      <div class="inner_box" style="height: 40%">
        <div class="inner_header">
          <div class="header_left"></div>
          <div class="header_icon">
            <div style="width: 12px; height: 10px; margin-bottom: -6px"><img src="@/assets/img/bigScreen/polygon1.png"></div>
            <div style="width: 12px; height: 10px; margin-bottom: 10px"><img src="@/assets/img/bigScreen/polygon2.png"></div>
          </div>
          <div class="header_title">
            <div>
              <span>房间状态统计</span>
              <span class="little_font"></span>
            </div>
          </div>
        </div>
        <div class="box_content">
          <div style="width: 100%;height: 40%;display: flex;justify-content: center;margin-top: 2%">
            <img src="@/assets/img/comprehensive/right-1.png" style="width:20%;max-height: 80%;">
            <div style="height: 100%;width: 60%">
              <Echarts class="echarts" style="height: 90%;" :echartObj="echartObj9" />
            </div>
          </div>
          <div  style="width: 100%;height: 10%;display: flex;justify-content: space-around">
            <img src="@/assets/img/comprehensive/right2.png" style="width:30%;max-height: 80%;">
            <img src="@/assets/img/comprehensive/right3.png" style="width:60%;max-height: 80%;">
          </div>
          <div  style="width: 100%;height: 40%;display: flex;justify-content: space-around;align-items: center;">
            <img src="@/assets/img/comprehensive/right4.png" style="width:25%;max-height: 70%;">
            <img src="@/assets/img/comprehensive/right5.png" style="width:25%;max-height: 60%;">
            <img src="@/assets/img/comprehensive/right6.png" style="width:25%;max-height: 36%;">
          </div>
        </div>
      </div>

      <div class="right-center"></div>
      <InnerBox :echartObj="echartObj8" style="width: 100%;margin-left: 0" header_title="护理人员能力分析" />

    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Progress,Divider } from 'ant-design-vue';
Vue.use(Progress);
Vue.use(Divider);
import Echarts from "@/components/echarts";
import echarts from "echarts";

export default {
  data() {
    return {
      echartObj1: {
        legend: {
          show: true,
          bottom: 10,
          data: ['套餐(单)','自定义餐(单)','营养餐(单)'],
          textStyle: {
            color: '#FFFFFF',
            lineHeight: 10
          },
        },
        color: ['#2B8EF3','#F5B12D','#48E5E5'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          axisLabel: {//x轴文字的配置
            show: true,
            textStyle: {
              color: "#fff",
              fontSize: 10,
            }
          },
          data: ['1月','2月','3月','4月','5月','6月'],
        },
        yAxis: {
          type: 'value',
          axisLabel: {//y轴文字的配置
            textStyle: {
              color: "#fff",
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: ['#1F7DAF']
            }
          },
        },
        series: [
          {
            name: '套餐(单)',
            data: [
              {name: '套餐(单)', value: 210},
              {name: '套餐(单)', value: 140},
              {name: '套餐(单)', value: 130},
              {name: '套餐(单)', value: 130},
              {name: '套餐(单)', value: 130},
              {name: '套餐(单)', value: 130},
            ],
            type: 'bar',
            barWidth: 10,
            barGap:0.5,
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: 'top',
                  textStyle: {
                    color: '#FFFFFF',
                    fontSize: 10
                  },
                },
                // color: '#1B7EF2'
                color: () => {
                  return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#1976E2' },
                    { offset: 1, color: 'rgba(25,118,226,0.30)' },
                  ]);
                },
              }
            },
          },
          {
            name: '自定义餐(单)',
            data: [
              {name: '自定义餐(单)', value: 180} ,
              {name: '自定义餐(单)', value: 120},
              {name: '自定义餐(单)', value: 48},
              {name: '自定义餐(单)', value: 50},
              {name: '自定义餐(单)', value: 90},
              {name: '自定义餐(单)', value: 120},
            ],
            type: 'bar',
            barGap:0.5,
            barWidth: 10,
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: 'top',
                  textStyle: {
                    color: '#FFFFFF',
                    fontSize: 10
                  },
                },
                // color: '#1B7EF2'
                color: () => {
                  return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#FF7B00' },
                    { offset: 1, color: 'rgba(255,123,0,0.30)' },
                  ]);
                },
              }
            },
          },
          {
            name: '营养餐(单)',
            data: [
              {name: '营养餐(单)', value: 90} ,
              {name: '自定义餐(单)', value: 170},
              {name: '营养餐(单)', value: 70},
              {name: '营养餐(单)', value: 120},
              {name: '营养餐(单)', value: 180},
              {name: '营养餐(单)', value: 110}
            ],
            type: 'bar',
            barGap:0.5,
            barWidth: 10,
            //同一系列的柱间距离
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: 'top',
                  textStyle: {
                    color: '#FFFFFF',
                    fontSize: 12
                  },
                },
                // color: '#1B7EF2'
                color: () => {
                  return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#48E5E5' },
                    { offset: 1, color: 'rgba(72,228,229,0.30)' },
                  ]);
                }
              }
            },
          },
        ]
      },
      echartObj2: {
        grid: {
          show: false,
          left: '20',
          top: 20,
          bottom: '20',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          axisLabel: {//x轴文字的配置
            show: true,
            textStyle: {
              color: "#fff",
              fontSize: 10,
            },
          },
          splitLine:{
            show:false
          }
        },
        yAxis: {
          type: 'category',
          splitLine:{
            show:false
          },
          axisLabel: {//y轴文字的配置
            textStyle: {
              color: "#fff",
            },
          },
          data: ['水煮鱼','麻婆豆腐','锅包肉','糖醋排骨','红烧鱼','切丁肉末','清炒油麦菜', '蒜蓉娃娃菜','青椒肉丝','西红柿鸡蛋',]
        },
        series: [
          {
            data: [130,60,40,130,100,160,180,190,260,300],
            type: 'bar',
            itemStyle:{
              normal: {
                color: (param)=>{
                  if(param.dataIndex % 2 ==0){
                    return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                      { offset: 0, color:'rgba(255,187,0,0.30)' },
                      { offset: 1, color: '#FFBB00'  },
                    ]);
                  }else {
                    return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                      { offset: 0, color:'rgba(25,118,226,0.30)' },
                      { offset: 1, color: '#1B7EF2'  },
                    ]);
                  }
                },
              }
            },
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            },
            barWidth: 10,

          }
        ]
      },
      echartObj3: {
        legend: {
          show: true,
          top: 'middle',
          right: 0,
          orient: 'vertical',
          data: ['设备','床单','被罩','垃圾袋','洗衣液','消毒液'],
          textStyle: {
            color: '#FFFFFF',
            lineHeight: 18
          },
          // formatter:  (name) => {
          //   let data = this.echartObj3.series[0].data
          //   let total = 0
          //   let tarValue
          //   for (let i = 0; i < data.length; i++) {
          //     total += data[i].value
          //     if (data[i].name == name) {
          //       tarValue = data[i].value
          //     }
          //   }
          //   //计算出百分比
          //   let p = Math.round((tarValue / total) * 100) + '%'
          //   return `${name}${p}`
          // }
        },
        color: ['#2B8EF3','#48E5E5','#3D7DFA','#68A400','#F5B12D','#D599FD'],
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: [60, 90],
            top: 'middle',
            left: -50,
            avoidLabelOverlap: false,
            label: {
              show: true,
              position: 'inside',
              formatter: '{c}%',
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 20,
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 35, name: '设备' },
              { value: 15, name: '床单' },
              { value: 15, name: '被罩' },
              { value: 11, name: '垃圾袋' },
              { value: 10, name: '洗衣液' },
              { value: 9, name: '消毒液' },
            ]
          }
        ]
      },
      echartObj4: {
        legend: {
          show: true,
          bottom: 10,
          data: ['在库(个)','出库(个)'],
          itemHeight: 8, // 图例高度
          itemWidth: 15, // 图例高度
          textStyle: {
            color: '#FFFFFF',
            lineHeight: 10,
            fontSize: 10,
          },
        },
        color: ['#2B8EF3','#F5B12D'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          axisLabel: {//x轴文字的配置
            show: true,
            interval: 0, // 强制文字全部显示
            textStyle: {
              color: "#fff",
              fontSize: 10,
            }
          },
          data: ['设备','床单','被罩','垃圾袋','洗衣液','消毒液'],
        },
        yAxis: {
          type: 'value',
          axisLabel: {//y轴文字的配置
            textStyle: {
              color: "#fff",
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: ['#1F7DAF']
            }
          },
        },
        series: [
          {
            name: '在库(个)',
            data: [3000,900,2300,5500,4500,4000],
            type: 'bar',
            stack: 'Ad',
            barWidth: 18,
            itemStyle: {
              normal: {
                label: {
                  show: false,
                  position: 'top',
                  textStyle: {
                    color: '#FFFFFF',
                    fontSize: 10
                  },
                },
                // color: '#1B7EF2'
                color: () => {
                  return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#1976E2' },
                    { offset: 1, color: 'rgba(25,118,226,0.30)' },
                  ]);
                },
              }
            },
          },
          {
            name: '出库(个)',
            data: [1000,5000,5500,12000,2500,2000],
            type: 'bar',
            stack: 'Ad',
            barWidth: 18,
            itemStyle: {
              normal: {
                label: {
                  show: false,
                  position: 'top',
                  textStyle: {
                    color: '#FFFFFF',
                    fontSize: 10
                  },
                },
                // color: '#1B7EF2'
                color: () => {
                  return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#FFBB00' },
                    { offset: 1, color: '#FF7B00' },
                  ]);
                },
              }
            },
          }
        ]
      },
      echartObj5: {
        legend: {
          show: true,
          top: 'middle',
          right: 0,
          orient: 'vertical',
          data: ['已处理','处理中','未处理'],
          textStyle: {
            color: '#FFFFFF',
            lineHeight: 18
          },
          // formatter:  (name) => {
          //   let data = this.echartObj5.series[0].data
          //   let total = 0
          //   let tarValue
          //   for (let i = 0; i < data.length; i++) {
          //     total += data[i].value
          //     if (data[i].name == name) {
          //       tarValue = data[i].value
          //     }
          //   }
          //   //计算出百分比
          //   let p = Math.round((tarValue / total) * 100) + '%'
          //   return `${name}${p}`
          // }
        },
        color: ['#3D7DFA','#48E5E5','#F5B12D'],
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: [60, 90],
            top: 'middle',
            left: -50,
            avoidLabelOverlap: false,
            label: {
              show: true,
              position: 'inside',
              formatter: '{c}%',
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 20,
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 35, name: '已处理' },
              { value: 35, name: '处理中' },
              { value: 30, name: '未处理' },
            ]
          }
        ]
      },
      echartObj6: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          axisLabel: {//x轴文字的配置
            show: true,
            textStyle: {
              color: "#fff",
              fontSize: 10,
            }
          },
          data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
        },
        yAxis: {
          type: 'value',
          axisLabel: {//y轴文字的配置
            textStyle: {
              color: "rgba(255, 255, 255, 0.64)",
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: ['#1F7DAF']
            }
          },
        },
        series: [
          {
            data: [
              {name: '1月', value: 10 },
              {name: '2月', value: 12 },
              {name: '3月', value: 8 },
              {name: '4月', value: 14 },
              {name: '5月', value: 13 },
              {name: '6月', value: 8 },
              {name: '7月', value: 13 },
              {name: '8月', value: 25 },
              {name: '9月', value: 20 },
              {name: '10月', value: 13 },
              {name: '11月', value: 9 },
              {name: '12月', value: 5 },

            ],
            type: 'bar',
            barWidth: 20,
            barGap:'100%',
            itemStyle: this.setSeriesItemStyle('lan'),
          },
        ]
      },
      echartObj7: {
        legend: {
          show: true,
          bottom: 10,
          data: ['用电量(度)','用水量(吨)','用气量(m²)'],
          textStyle: {
            color: '#FFFFFF',
            lineHeight: 10
          },
        },
        color: ['#2B8EF3','#F5B12D','#48E5E5'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          axisLabel: {//x轴文字的配置
            show: true,
            textStyle: {
              color: "#fff",
              fontSize: 10,
            }
          },
          data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
        },
        yAxis: {
          type: 'value',
          axisLabel: {//y轴文字的配置
            textStyle: {
              color: "#fff",
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: ['#1F7DAF']
            }
          },
        },
        series: [
          {
            name: '用电量(度)',
            data: [
              {name: '用电量(度)', value: 1500},
              {name: '用电量(度)', value: 2400},
              {name: '用电量(度)', value: 2000},
              {name: '用电量(度)', value: 2300},
              {name: '用电量(度)', value: 2450},
              {name: '用电量(度)', value: 1450},
              {name: '用电量(度)', value: 1000},
              {name: '用电量(度)', value: 2500},
              {name: '用电量(度)', value: 1980},
              {name: '用电量(度)', value: 2500},
              {name: '用电量(度)', value: 2300},
              {name: '用电量(度)', value: 1600},
            ],
            type: 'bar',
            barWidth: 10,
            barGap:0.5,
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: 'top',
                  textStyle: {
                    color: '#FFFFFF',
                    fontSize: 10
                  },
                },
                // color: '#1B7EF2'
                color: () => {
                  return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#1976E2' },
                    { offset: 1, color: 'rgba(25,118,226,0.30)' },
                  ]);
                },
              }
            },
          },
          {
            name: '用水量(吨)',
            data: [
              {name: '用水量(吨)', value: 2200} ,
              {name: '用水量(吨)', value: 1500},
              {name: '用水量(吨)', value: 800},
              {name: '用水量(吨)', value: 1500},
              {name: '用水量(吨)', value: 1900},
              {name: '用水量(吨)', value: 2300},
              {name: '用水量(吨)', value: 1500},
              {name: '用水量(吨)', value: 1500},
              {name: '用水量(吨)', value: 1490},
              {name: '用水量(吨)', value: 1490},
              {name: '用水量(吨)', value: 1500},
              {name: '用水量(吨)', value: 2300},
            ],
            type: 'bar',
            barGap:0.5,
            barWidth: 10,
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: 'top',
                  textStyle: {
                    color: '#FFFFFF',
                    fontSize: 10
                  },
                },
                // color: '#1B7EF2'
                color: () => {
                  return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#FF7B00' },
                    { offset: 1, color: 'rgba(255,123,0,0.30)' },
                  ]);
                },
              }
            },
          },
          {
            name: '用气量(m²)',
            data: [
              {name: '用气量(m²)', value: 1100} ,
              {name: '用气量(m²)', value: 1150},
              {name: '用气量(m²)', value: 1200},
              {name: '用气量(m²)', value: 1100},
              {name: '用气量(m²)', value: 700},
              {name: '用气量(m²)', value: 1100},
              {name: '用气量(m²)', value: 2400},
              {name: '用气量(m²)', value: 1200},
              {name: '用气量(m²)', value: 1250},
              {name: '用气量(m²)', value: 900},
              {name: '用气量(m²)', value: 1200},
              {name: '用气量(m²)', value: 1150}
            ],
            type: 'bar',
            barGap:0.5,
            barWidth: 10,
            //同一系列的柱间距离
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: 'top',
                  textStyle: {
                    color: '#FFFFFF',
                    fontSize: 12
                  },
                },
                // color: '#1B7EF2'
                color: () => {
                  return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#48E5E5' },
                    { offset: 1, color: 'rgba(72,228,229,0.30)' },
                  ]);
                }
              }
            },
          },
        ]
      },
      echartObj8: {
        radar: {
          indicator: [
            { name: '口腔护理', max: 25,},
            { name: '食物护理', max: 50, axisLabel:{show:false}},
            { name: '修建', max: 25,axisLabel:{show:false} },
            { name: '清洗', max: 25,axisLabel:{show:false} },
            { name: '按摩', max: 25,axisLabel:{show:false}},
          ],
          radius: '65%', // 坐标轴半径占可显示区域的比例
          axisLine: { // 坐标轴样式
            lineStyle: {
              color: '#BBBBBB',
              type: 'solid',
              width: 1
            }
          },
          axisTick: { // 氪度线样式
            lineStyle: {
            },
          },
          axisLabel: {// 是否展示坐标数字
            show: true
          },
          splitArea: { // 坐标轴分隔区显示颜色:默认是一深一浅的间隔颜色，这里我们设置间隔之间是空白
            areaStyle: {
              opacity: 0.5,
              color: ['#032750','rgba(25, 118, 226, 0.2)'],
            }
          },
          splitLine: { // 分割线样式
            lineStyle: {
              color: 'rgba(25, 118, 226, 0.2)',
              type: 'solid',
              width: 1
            }
          },
          axisName: { // 指示器样式
            color: '#FFFFFF',
            fontSize: 16
          },
        },
        series: [
          {
            type: 'radar',
            data: [
              {
                value: [12, 25, 3, 12, 20],
                name: 'Allocated Budget'
              },
            ],
            itemStyle: {
              color: new echarts.graphic.LinearGradient(         // 设置渐变色
                  0, 0, 0, 1,
                  [
                    { offset: 0, color: 'rgba(245,177,45,0.73)' },
                    { offset: 1, color: 'rgba(245,177,45,0.17)' }
                  ]
              )
            },
            areaStyle: {// 雷达图辐射区域的样式
              color: new echarts.graphic.LinearGradient(
                  0, 0, 0, 1,
                  [
                    { offset: 0, color: 'rgba(245,177,45,0.73)' },
                    { offset: 1, color: 'rgba(245,177,45,0.17)' }
                  ]
              )
            },
          }
        ]
      },
      echartObj9: {
        legend: {
          show: true,
          top: 'middle',
          right: 0,
          orient: 'vertical',
          data: ['被罩','洗衣液',],
          textStyle: {
            color: '#FFFFFF',
            lineHeight: 18
          },
        },
        color: ['#3D7DFA','#F5B12D'],
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: [50, 70],
            top: 'middle',
            left: -50,
            avoidLabelOverlap: false,
            label: {
              show: true,
              position: 'inside',
              formatter: '{c}%',
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 20,
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 85, name: '被罩' },
              { value: 15, name: '洗衣液'},
            ]
          }
        ]
      },

    }
  },
  created() {
    this.init();
  },
  components: {
    Echarts,
  },
  methods: {
    init() {
      this.getData();
    },
    search() {
      this.init();
    },
    getData() {
    },
    setSeriesItemStyle(color, obj={}){
      let colors = {
        qing: ['#48E5E5', 'rgba(72,228,229,0.30)'],
        lan: ['#2B8EF3', 'rgba(25,118,226,0.30)'],
        // huang: ['#F5B12D', 'rgba(255,123,0,0.30)'],
        huang: ['#FF7B00', 'rgba(255,123,0,0.30)'],
        lv: ['#07F090', 'rgba(60,212,149,0.28)'],
        zi: ['#9B64D3', 'rgba(155,100,211,0.24)'],
      }
      return {
        normal: {
          label: {
            show: true,
            position: 'top',
            textStyle: {
              color: '#FFFFFF',
              fontSize: 12
            },
          },
          color: () => {
            return new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: colors[color][0] },
              { offset: 1, color: colors[color][1] },
            ]);
          },
          ...obj,
        }
      }
    },
  },
};
</script>

<style lang="less" scoped>
/deep/ .ant-progress-circle .ant-progress-text {
  color: #FFFFFF;
  font-size: 20px;
}
/deep/ .ant-progress-circle-trail{
  stroke:#334D60 !important;
}
.main_box{
  padding: 0 2rem;
  > div{
    padding: 0;
  }
  img{
    max-width: 100%;
  }
  .home_center {
    width: 50%;
    padding: 0 10px;
    .inner_box{
      margin-top: 1%;
    }
    .center-left-title{
      background-image: url(../../assets/img/comprehensive/center-center1.png);
    }
    .header-left-title{
      background-image: url(../../assets/img/comprehensive/center-top1.png);
    }
    .center-left-title,
    .header-left-title{
       width: 80%;
       height: 18%;
       margin: 2% auto;
       background-repeat: no-repeat;
       background-size: 100% 100%;
     }
    .center-left,
    .header-left{
      width: 38%;
      height: 80%;
      border: 1px solid;
      border-image: linear-gradient(180deg, rgba(31,125,175,0.34) 0%, rgba(31,125,175,0.53) 100%) 1;
    }
    .center-right,
    .header-right{
      width: 59%;
      height: 80%;
    }
    .center-right-title{
      background-image: url(../../assets/img/comprehensive/center-center2.png);
    }
    .header-right-title{
      background-image: url(../../assets/img/comprehensive/center-top2.png);
    }
    .bottom-right-title{
      background-image: url(../../assets/img/comprehensive/center-bottom.png);
    }

    .bottom-right-title,
    .center-right-title,
    .header-right-title{
      width: 80%;
      height: 16%;
      margin: 2% auto;
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
    .inner-header {
      background-image: url(../../assets/img/comprehensive/top-title.png);
    }
    .inner-center{
      background-image: url(../../assets/img/comprehensive/center-title.png);
    }
    .inner-bottom{
      background-image: url(../../assets/img/comprehensive/bottom-title.png);
    }
    .bottom-left{
      width: 29%;
      height: 85%;
      background-image: url(../../assets/img/comprehensive/bottom-left.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
    .bottom-right{
      width: 69%;
      height: 80%;
    }

    .inner-bottom,
    .inner-center,
    .inner-header{
      width: 80%;
      margin: auto;
      height: 60px;
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
  }

  .inner_box{
    overflow: hidden;
  }
  .home_left,
  .home_right{
    width: 25%;
    .right-top{
      width: 100%;
      height: 40%;
      background-image: url(../../assets/img/comprehensive/right.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
    .right-center{
      width: 100%;
      height: 24%;
      background-image: url(../../assets/img/comprehensive/right1.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
    .inner_box{
      width: 99%;
      height: 32%;
      margin-left: 1%;
    }
  }
  .home_left{
    .left-top1{
      width: 80%;
      height: 20%;
      margin: auto;
      background-image: url(../../assets/img/comprehensive/left-top1.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
    .left-top2{
      width: 80%;
      height: 40%;
      margin: auto;
      background-image: url(../../assets/img/comprehensive/left-top2.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
  }
}
</style>
