<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>会员转化分析</span>
              <span class="little_font">（人）</span>
            </div>
          </div>
        </div>
        <!-- 内容-->
        <div class="box_content">
          <!-- 预约报名人数 -->
          <div style="font-size: 1rem;color: #FFFFFF;width: 100%;display: flex;align-items: center;">
            <div style="flex-shrink: 0;margin-left: 10px;width: 30%">预约报名人数</div>
            <div style="width: 5%;height: 1px; border-bottom: 1px dashed rgba(230, 247, 255, 0.5);"></div>
            <div style="display: flex;justify-content: center;align-items: center;width: 100%">
              <div :style="'width:' + (100 - (3122/3122*100)) / 2 + '%;height: 1px; border-bottom: 1px dashed rgba(230, 247, 255, 0.5); flex: 1;margin-right: 10px'"></div>
              <div :style="'width: '+ 3122/3122*100 + '%;height: 20px;border-radius: 2px;background: #3D7DFA;text-align: center'">
                <span style="font-size: 14px; font-weight: bold">3122</span>
              </div>
              <div :style="'width:' + (100 - (3122/3122*100)) / 2 + '%;height: 1px; border-bottom: 1px dashed rgba(230, 247, 255, 0.5); flex: 1;margin-left: 10px'"></div>
            </div>
            <div style="width: 5%;height: 1px; margin-right: 10px;border-bottom: 1px dashed rgba(230, 247, 255, 0.5);"></div>
          </div>
          <!-- 来访人数-->
          <div style="font-family: MicrosoftYaHei;font-size: 1rem;color: #FFFFFF;width: 100%;display: flex;align-items: center;margin-top: 20px">
            <div style="flex-shrink: 0;margin-left: 10px;width: 30%">来访人数</div>
            <div style="width: 5%;height: 1px; border-bottom: 1px dashed rgba(230, 247, 255, 0.5);"></div>
            <div style="display: flex;justify-content: center;align-items: center;width: 100%">
              <div :style="'width:' + (100 - (2033/3122*100)) / 2 + '%;height: 1px; border-bottom: 1px dashed rgba(230, 247, 255, 0.5); flex: 1;margin-right: 10px'"></div>
              <div :style="'width: '+ 2033/3122*100 + '%;height: 20px;border-radius: 2px;background: #3CD495;text-align: center'">
                <span style="font-size: 14px; font-weight: bold">2033</span>
              </div>
              <div :style="'width:' + (100 - (1000/3122*100)) / 2 + '%;height: 1px; border-bottom: 1px dashed rgba(230, 247, 255, 0.5); flex: 1;margin-left: 10px'"></div>
            </div>
            <div style="width: 5%;height: 1px; margin-right: 10px;border-bottom: 1px dashed rgba(230, 247, 255, 0.5);"></div>
          </div>
          <!-- 预付定金人数-->
          <div style="font-family: MicrosoftYaHei;font-size: 1rem;color: #FFFFFF;width: 100%;display: flex;align-items: center;margin-top: 20px">
            <div style="flex-shrink: 0;margin-left: 10px;width: 30%">预付定金人数</div>
            <div style="width: 5%;height: 1px; border-bottom: 1px dashed rgba(230, 247, 255, 0.5);"></div>
            <div style="display: flex;justify-content: center;align-items: center;width: 100%">
              <div :style="'width:' + (100 - (1055/3122*100)) / 2 + '%;height: 1px; border-bottom: 1px dashed rgba(230, 247, 255, 0.5); flex: 1;margin-right: 10px'"></div>
              <div :style="'width: '+ 1055/3122*100 + '%;height: 20px;border-radius: 2px;background: #18DFE8;text-align: center'">
                <span style="font-size: 14px; font-weight: bold">1055</span>
              </div>
              <div :style="'width:' + (100 - (1055/3122*100)) / 2 + '%;height: 1px; border-bottom: 1px dashed rgba(230, 247, 255, 0.5); flex: 1;margin-left: 10px'"></div>
            </div>
            <div style="width: 5%;height: 1px; margin-right: 10px;border-bottom: 1px dashed rgba(230, 247, 255, 0.5);"></div>
          </div>
          <!-- 会员人数-->
          <div style="font-family: MicrosoftYaHei;font-size: 1rem;color: #FFFFFF;width: 100%;display: flex;align-items: center;margin-top: 20px">
            <div style="flex-shrink: 0;margin-left: 10px;width: 30%">会员人数</div>
            <div style="width: 5%;height: 1px; border-bottom: 1px dashed rgba(230, 247, 255, 0.5);"></div>
            <div style="display: flex;justify-content: center;align-items: center;width: 100%">
              <div :style="'width:' + (100 - (1055/3122*100)) / 2 + '%;height: 1px; border-bottom: 1px dashed rgba(230, 247, 255, 0.5); flex: 1;margin-right: 10px'"></div>
              <div :style="'width: '+ 1055/3122*100 + '%;height: 20px;border-radius: 2px;background: #F5B12D;text-align: center'">
                <span style="font-size: 14px; font-weight: bold">1055</span>
              </div>
              <div :style="'width:' + (100 - (1055/3122*100)) / 2 + '%;height: 1px; border-bottom: 1px dashed rgba(230, 247, 255, 0.5); flex: 1;margin-left: 10px'"></div>
            </div>
            <div style="width: 5%;height: 1px; margin-right: 10px;border-bottom: 1px dashed rgba(230, 247, 255, 0.5);"></div>
          </div>
        </div>
      </div>
      <!--退住原因占比分析-->
      <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>退住原因占比分析</span>
              <span class="little_font">（%）</span>
            </div>
          </div>
        </div>
        <!-- 内容-->
        <div class="box_content">
          <div class="chart_box">
            <Echarts
                :key="echartObjKey"
                class="echarts"
                :echartObj="echartObj1"
            ></Echarts>
          </div>
        </div>
      </div>
      <!--长者数据-->
      <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>长者数据</span>
              <span class="little_font">（人）</span>
            </div>
          </div>
        </div>
        <!-- 内容-->
        <div class="box_content">
          <div style="display: flex; justify-content: center;margin-top: 10px">
            <div style="display: flex;font-size: 14px; color: #FFFFFF;">
              <div style="display: flex; align-items: center;"><img src="../../assets/img/bigScreen/icon/boy.png" alt /></div>
              <div style="display: flex; flex-direction: column;margin-left: 5px">
                <div>男性</div>
                <div style="color: #00B3DB; font-size: 24px; font-weight: bold">182<span style="font-size: 14px">人</span></div>
              </div>
            </div>
            <div style="display: flex;font-size: 14px; color: #FFFFFF;margin-left: 50px">
              <div style="display: flex; align-items: center;margin-top: 6px"><img src="../../assets/img/bigScreen/icon/girl.png" alt /></div>
              <div style="display: flex; flex-direction: column;margin-left: 5px">
                <div>女性</div>
                <div style="color: #00B3DB; font-size: 24px; font-weight: bold">176<span style="font-size: 14px">人</span></div>
              </div>
            </div>
          </div>
          <div class="chart_box">
            <Echarts
                :key="echartObjKey"
                class="echarts"
                :echartObj="echartObj2"
            ></Echarts>
          </div>
        </div>
      </div>
      <!--能力评估-->
      <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>能力评估</span>
              <span class="little_font">（人）</span>
            </div>
          </div>
        </div>
        <!-- 内容-->
        <div class="box_content">
          <dv-capsule-chart :config="echartObj5" style="width:90%;height:90%" />
        </div>
      </div>
      <!--慢病统计-->
      <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>慢病统计</span>
              <span class="little_font">（人）</span>
            </div>
          </div>
        </div>
        <!-- 内容-->
        <div class="box_content">
          <div class="chart_box">
            <Echarts
                :key="echartObjKey3"
                class="echarts"
                :echartObj="echartObj3"
            ></Echarts>
          </div>
        </div>
      </div>
      <!--中西医治疗占比分析-->
      <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>中西医治疗占比分析</span>
              <span class="little_font">（%）</span>
            </div>
          </div>
        </div>
        <!-- 内容-->
        <div class="box_content" style="flex-direction: row;">
          <div class="chart_box" style="width: 49%; justify-content: center; align-items: center;display: flex;flex-direction: column">
            <div style="border: solid 12px #004657; border-radius: 100%">
            <a-progress style="color: #FFFFFF" :strokeWidth="13" type="circle" :stroke-color="{'9%': '#FA6400','89%': '#FEDB65','9%': '#FA6400'}"
                :percent="70"
            />
            </div>
            <div style="color: #FFFFFF;margin-top: 15px">中医占比</div>
          </div>
          <div class="chart_box" style="width: 49%;justify-content: center; align-items: center;display: flex;flex-direction: column">
            <div style="border: solid 12px #004657; border-radius: 100%">
            <a-progress style="color: #FFFFFF" :strokeWidth="13" type="circle" :stroke-color="{'9%': '#FA6400','89%': '#FEDB65','9%': '#FA6400'}"
                        :percent="30">
            </a-progress>
            </div>
            <div style="color: #FFFFFF;margin-top: 15px">西医占比</div>
          </div>
        </div>
      </div>
      <!--入住人数趋势分析-->
      <div class="inner_box" style="width: 99%">
        <!-- 标题 -->
        <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 class="chart_box">
            <Echarts
                :key="echartObjKey"
                class="echarts"
                :echartObj="echartObj4"
            ></Echarts>
          </div>
        </div>
      </div>
    </div>
    <div class="home_center">
      <!--数据概况-->
      <div class="inner_box">
        <div class="inner_header">
          <div class="header_title">
            <div>
              <span>数据概况</span>
            </div>
          </div>
        </div>
        <div class="box_content">
          <div style="display: flex; width: 90%; justify-content: space-between; align-items: center ">
            <!--机构数-->
            <div style="display: flex; flex-direction: column; justify-content: center; align-items: center">
              <div style="color: #00B3DB; font-size: 24px; font-weight: bold">3<span style="font-size: 17px">家</span></div>
              <img src="../../assets/img/bigScreen/icon/jigou.png" alt />
              <div style="color: #DDDDDD; font-size: 14px; line-height: 15px">机构数</div>
            </div>
            <!--合作医院-->
            <div style="display: flex; flex-direction: column; justify-content: center; align-items: center">
              <div style="color: #00B3DB; font-size: 24px; font-weight: bold">2<span style="font-size: 17px">家</span></div>
              <img src="../../assets/img/bigScreen/icon/hospitol.png" alt />
              <div style="color: #DDDDDD; font-size: 14px; line-height: 15px">合作医院</div>
            </div>
            <!--房间总数-->
            <div style="display: flex; flex-direction: column; justify-content: center; align-items: center">
              <div style="color: #00B3DB; font-size: 24px; font-weight: bold">565<span style="font-size: 17px">间</span></div>
              <img src="../../assets/img/bigScreen/icon/fangjian.png" alt />
              <div style="color: #DDDDDD; font-size: 14px; line-height: 15px">房间总数</div>
            </div>
            <!--床位数-->
            <div style="display: flex; flex-direction: column; justify-content: center; align-items: center">
              <div style="color: #00B3DB; font-size: 24px; font-weight: bold">2,257<span style="font-size: 17px">个</span></div>
              <img src="../../assets/img/bigScreen/icon/bed.png" alt />
              <div style="color: #DDDDDD; font-size: 14px; line-height: 15px">床位总数</div>
            </div>
            <!--入住人数-->
            <div style="display: flex; flex-direction: column; justify-content: center; align-items: center">
              <div style="color: #00B3DB; font-size: 24px; font-weight: bold">1,760<span style="font-size: 17px">个</span></div>
              <img src="../../assets/img/bigScreen/icon/ruzhu.png" alt />
              <div style="color: #DDDDDD; font-size: 14px; line-height: 15px">入住人数</div>
            </div>
          </div>
          <div style="display: flex; width: 80%; margin-top: 20px; justify-content: space-between; align-items: center ">
            <!--医护人员-->
            <div style="display: flex; flex-direction: column; justify-content: center; align-items: center">
              <div style="color: #00B3DB; font-size: 24px; font-weight: bold">1241<span style="font-size: 17px">人</span></div>
              <img src="../../assets/img/bigScreen/icon/yihu.png" alt />
              <div style="color: #DDDDDD; font-size: 14px; line-height: 15px">医护人员</div>
            </div>
            <!--会员人数-->
            <div style="display: flex; flex-direction: column; justify-content: center; align-items: center">
              <div style="color: #00B3DB; font-size: 24px; font-weight: bold">356<span style="font-size: 17px">人</span></div>
              <img src="../../assets/img/bigScreen/icon/huiyuan.png" alt />
              <div style="color: #DDDDDD; font-size: 14px; line-height: 15px">会员人数</div>
            </div>
            <!--退住人数-->
            <div style="display: flex; flex-direction: column; justify-content: center; align-items: center">
              <div style="color: #00B3DB; font-size: 24px; font-weight: bold">25<span style="font-size: 17px">人</span></div>
              <img src="../../assets/img/bigScreen/icon/tuizhu.png" alt />
              <div style="color: #DDDDDD; font-size: 14px; line-height: 15px">退住人数</div>
            </div>
            <!--设备总数-->
            <div style="display: flex; flex-direction: column; justify-content: center; align-items: center">
              <div style="color: #00B3DB; font-size: 24px; font-weight: bold">565<span style="font-size: 17px">个</span></div>
              <img src="../../assets/img/bigScreen/icon/shebei.png" alt />
              <div style="color: #DDDDDD; font-size: 14px; line-height: 15px">设备总数</div>
            </div>
            <!--志愿者总数-->
            <div style="display: flex; flex-direction: column; justify-content: center; align-items: center">
              <div style="color: #00B3DB; font-size: 24px; font-weight: bold">103<span style="font-size: 17px">人</span></div>
              <img src="../../assets/img/bigScreen/icon/zhiyuan.png" alt />
              <div style="color: #DDDDDD; font-size: 14px; line-height: 15px">志愿者总数</div>
            </div>
          </div>
        </div>
      </div>
      <!--入住率-->
      <div class="inner_box" style="height: 25%">
        <div class="inner_header">
          <div class="header_title">
            <div>
              <span>入住率</span>
              <span class="little_font">（%）</span>
            </div>
          </div>
        </div>
        <!-- 内容-->
        <div class="box_content" style="flex-direction: row;height: calc(100% - 60px)">
          <div class="chart_box" style="width: 25%; justify-content: center; align-items: center;display: flex;flex-direction: column">
              <a-progress style="color: #FFFFFF" :width="165" :strokeWidth="13" type="circle" :stroke-color="{'13%': 'rgba(111,253,190,0.11)','89%': '#15E5F1','13%': 'rgba(111,253,190,0.11)'}"
                          :percent="78">
                <template #format="percent">
                  <span style="color: #FFFFFF;font-size: 2.2rem;font-weight: bold">{{ percent }}<span style="font-size: 0.9rem">%</span></span>
                  <div style="color: #DDDDDD;font-size: 1rem;margin-top: 5px">总床位入住率</div>
                </template>
              </a-progress>
          </div>
            <a-divider  style="height: 70%;margin:0 5%;background-color: rgba(38, 103, 173, 0.8);opacity: 0.5" type="vertical" :dashed= "true"/>
          <div class="chart_box" style="width: 25%;justify-content: center; align-items: center;display: flex;flex-direction: column">
              <a-progress style="color: #FFFFFF" :width="165" :strokeWidth="13" type="circle" :stroke-color="{'13%': 'rgba(61,126,250,0.20)','91%': '#3B7AF3','13%': 'rgba(61,126,250,0.20)'}"
                          :percent="67">
                <template #format="percent">
                  <span style="color: #FFFFFF;font-size: 2.2rem;font-weight: bold">{{ percent }}<span style="font-size: 0.9rem">%</span></span>
                  <div style="color: #DDDDDD;font-size: 1rem;margin-top: 5px">医疗床位入住率</div>
                </template>
              </a-progress>
          </div>
            <a-divider  style="height: 70%;margin:0 5%;opacity: 0.5; background-color: rgba(38, 103, 173, 0.8);" type="vertical" :dashed= "true"/>
          <div class="chart_box" style="width: 25%;justify-content: center; align-items: center;display: flex;flex-direction: column">
              <a-progress style="color: #FFFFFF" :width="165" :strokeWidth="13" type="circle" :stroke-color="{'2%': 'rgba(246,187,66,0.00)','90%': '#FAB32B','2%': 'rgba(246,187,66,0.00)'}"
                          :percent="85">
                <template #format="percent">
                  <span style="color: #FFFFFF;font-size: 2.2rem;font-weight: bold">{{ percent }}<span style="font-size: 0.9rem">%</span></span>
                  <div style="color: #DDDDDD;font-size: 1rem;margin-top: 5px">养护床位入住率</div>
                </template>
              </a-progress>
          </div>
        </div>
      </div>
      <!--设备情况-->
      <div class="inner_box" style="height: 39%">
        <div class="inner_header">
          <div class="header_title">
            <div>
              <span>设备情况</span>
            </div>
          </div>
        </div>
        <!-- 内容-->
        <div class="box_content" style="flex-direction: row; height:calc(100% - 60px);width: 100%;align-items: unset">
          <div style="width: 33%">
            <div style="height:20px; width: 100%;display: flex;align-items: center;">
              <div style="margin-left: 10px"><img src="../../assets/img/bigScreen/icon/title2icon.png"></div>
              <div style="margin-left: 5px; font-size: 1rem; color: #00B3DB;line-height: 15px">设备报警处理分析(%)</div>
            </div>
            <div style="height: 2px;width: 100%">
              <img style="margin-left: 10px;height: 2px;width: calc(100% - 10px)" src="../../assets/img/bigScreen/title2-bottom.png">
            </div>
            <div class="chart_box" style="height: calc(100% - 22px);display:flex; align-items: center;justify-content: center;flex-direction: column">
              <div class="shebei">
                <Echarts
                    :key="echartObjKey3"
                    class="echarts"
                    :echartObj="echartObj6"
                ></Echarts>
                <div style="text-align: center; vertical-align: center;position: relative;bottom: 115px;">
                  <div style="color: #00B3DB;font-size: 24px;">230</div>
                  <div style="font-size: 14px">报警总数</div>
                </div>
              </div>
              <div style="display: flex;align-items: center;justify-content: center;margin-top: 20px">
                <div class="block_bg">
                  <div style="font-size: 26px">70%</div>
                  <div style="font-size: 14px">已处理 </div>
                  <div style="background: #3D7DFA;width: 24px;height: 3px;margin-top: 5px"></div>
                </div>
                <div class="block_bg">
                  <div style="font-size: 26px">20%</div>
                  <div style="font-size: 14px">处理中</div>
                  <div style="background: #18DFE8;width: 24px;height: 3px;margin-top: 5px"></div>
                </div>
                <div class="block_bg">
                  <div style="font-size: 26px">10%</div>
                  <div style="font-size: 14px">未处理</div>
                  <div style="background: #F5B12D;width: 24px;height: 3px;margin-top: 5px"></div>
                </div>
              </div>
            </div>
          </div>
          <!--时时设备报警情况表-->
          <div style="width: 60%;margin-left: 5%">
            <div style="height:20px; width: 100%;display: flex;align-items: center;">
              <div style="margin-left: 10px"><img src="../../assets/img/bigScreen/icon/title2icon.png"></div>
              <div style="margin-left: 5px; font-size: 1rem; color: #00B3DB;line-height: 15px">实时设备报警情况</div>
            </div>
            <div style="height: 2px;width: 100%">
              <img style="margin-left: 10px;height: 2px;width: calc(100% - 10px)" src="../../assets/img/bigScreen/title2-bottom.png">
            </div>
            <!--表格-->
            <div style="width: 90%;display: flex;flex-direction: column;margin-top: 20px">
              <div class="table_title_bg">
                <div style="width: 25%">日期</div>
                <div style="width: 20%">时间</div>
                <div style="width: 20%">地址</div>
                <div style="width: 20%">姓名</div>
                <div style="width: 20%">警告类型</div>
              </div>
              <div v-for="(item, index) in echartObj7" :key="index"
                   class="table_row_bg" :style=" index%2== 1 ? '' : 'background: none; border:none'">
                <div style="width: 25%">{{item.date}}</div>
                <div style="width: 20%">{{item.time}}</div>
                <div style="width: 20%">{{item.address}}</div>
                <div style="width: 20%">{{item.name}}</div>
                <div style="width: 20%"><img src="../../assets/img/bigScreen/icon/warning.png">{{item.warning}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="home_right">
      <!-- 各机构床位TOP5-->
      <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="box_content">
          <div class="chart_box">
            <Echarts
                :key="echartObjKey8"
                class="echarts"
                :echartObj="echartObj8"
            ></Echarts>
          </div>
        </div>
      </div>
      <!-- 各机构入住率TOP5（%）-->
      <div class="inner_box" style="margin-left: 1%;">
        <!-- 标题 -->
        <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="box_content">
          <div class="chart_box">
            <Echarts
                :key="echartObjKey8"
                class="echarts"
                :echartObj="echartObj9"
            ></Echarts>
          </div>
        </div>
      </div>
      <!-- 收入支出趋势（万元）-->
      <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>收入支出趋势</span>
              <span class="little_font">(万元)</span>
            </div>
          </div>
        </div>
        <!-- 内容-->
        <!-- 内容-->
        <div class="box_content">
          <div class="chart_box">
            <Echarts
                :key="echartObjKey8"
                class="echarts"
                :echartObj="echartObj10"
            ></Echarts>
          </div>
        </div>
      </div>
      <!-- 支出占比分析（%）-->
      <div class="inner_box" style="margin-left: 1%;">
        <!-- 标题 -->
        <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" style="flex-direction: row">
          <div class="chart_box" style="display:flex;width: 175px;margin-left: 20px;align-items: center">
            <div class="shebei">
              <Echarts
                  :key="echartObjKey3"
                  class="echarts"
                  :echartObj="echartObj11"
              ></Echarts>
            </div>
          </div>
          <!--描述-->
          <div style="display: flex; justify-content:center; flex-direction:column; align-items: center; width: calc(100% - 175px)">
            <div style="display: flex;align-items: center;width: 60%"><div style="width: 15px;height: 8px;background-color: #2B8EF3;font-size: 14px;"></div><div style="width:64px;margin-left: 10px">设备</div><span style="color:#2B8EF3;font-weight: bold">35%</span></div>
            <div style="display: flex;align-items: center;width: 60%"><div style="width: 15px;height: 8px;background-color: #48E5E5;font-size: 14px;"></div><div style="width:64px;margin-left: 10px">护理材料</div><span style="color:#48E5E5;font-weight: bold">35%</span></div>
            <div style="display: flex;align-items: center;width: 60%"><div style="width: 15px;height: 8px;background-color: #3D7DFA;font-size: 14px;"></div><div style="width:64px;margin-left: 10px">电</div><span style="color:#3D7DFA;font-weight: bold">35%</span></div>
            <div style="display: flex;align-items: center;width: 60%"><div style="width: 15px;height: 8px;background-color: #68A400;font-size: 14px;"></div><div style="width:64px;margin-left: 10px">水</div><span style="color:#68A400;font-weight: bold;">35%</span></div>
            <div style="display: flex;align-items: center;width: 60%"><div style="width: 15px;height: 8px;background-color: #F5B12D;font-size: 14px;"></div><div style="width:64px;margin-left: 10px">食材</div><span style="color:#F5B12D;font-weight: bold">35%</span></div>
            <div style="display: flex;align-items: center;width: 60%"><div style="width: 15px;height: 8px;background-color: #D599FD;font-size: 14px;"></div><div style="width:64px;margin-left: 10px">天然气</div><span style="color:#D599FD;font-weight: bold">35%</span></div>
            <div style="display: flex;align-items: center;width: 60%"><div style="width: 15px;height: 8px;background-color: #EA8533;font-size: 14px;"></div><div style="width:64px;margin-left: 10px">其他</div><span style="color:#EA8533;font-weight: bold">35%</span></div>
          </div>
        </div>
      </div>
      <!-- 各机构医护人员、志愿者分析（人）-->
      <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>各机构医护人员、志愿者分析</span>
              <span class="little_font">(人)</span>
            </div>
          </div>
        </div>
        <!-- 内容-->
        <!-- 内容-->
        <div class="box_content">
          <div class="chart_box">
            <Echarts
                :key="echartObjKey8"
                class="echarts"
                :echartObj="echartObj12"
            ></Echarts>
          </div>
        </div>
      </div>
      <!-- 培训课程能力分析（人）-->
      <div class="inner_box" style="margin-left: 1%;">
        <!-- 标题 -->
        <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 class="chart_box">
            <Echarts
                :key="echartObjKey8"
                class="echarts"
                :echartObj="echartObj13"
            ></Echarts>
          </div>
        </div>
      </div>
      <!--活动占比分析（%）-->
      <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>活动占比分析</span>
              <span class="little_font">（%）</span>
            </div>
          </div>
        </div>
        <!-- 内容-->
        <div class="box_content">
          <div class="chart_box">
            <Echarts
                :key="echartObjKey3"
                class="echarts"
                :echartObj="echartObj14"
            ></Echarts>
          </div>
        </div>
      </div>
      <!--满意度调查（%）-->
      <div class="inner_box" style="margin-left: 1%;">
        <!-- 标题 -->
        <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 class="chart_box" style="justify-content: center; align-items: center; display: flex; flex-direction: column">
            <div style="height:23%;display: flex;justify-content: center;align-items: center">
              <div style="font-size: 14px;width: 58px;text-align: right">非常满意</div>
              <div style="margin-left: 10px">
                <svg-icon icon-class="smile" :style="echartObj15.verygood > 5 ? 'color: #F5B12D;width:25px;height: 25px' : 'color: #35596B;width:25px;height: 25px'"/>
                <svg-icon icon-class="smile" :style="echartObj15.verygood > 15 ? 'color: #F5B12D;width:25px;height: 25px' : 'color: #35596B;width:25px;height: 25px'"/>
                <svg-icon icon-class="smile" :style="echartObj15.verygood > 25 ? 'color: #F5B12D;width:25px;height: 25px' : 'color: #35596B;width:25px;height: 25px'"/>
                <svg-icon icon-class="smile" :style="echartObj15.verygood > 35 ? 'color: #F5B12D;width:25px;height: 25px' : 'color: #35596B;width:25px;height: 25px'"/>
                <svg-icon icon-class="smile" :style="echartObj15.verygood > 45 ? 'color: #F5B12D;width:25px;height: 25px' : 'color: #35596B;width:25px;height: 25px'"/>
                <svg-icon icon-class="smile" :style="echartObj15.verygood > 55 ? 'color: #F5B12D;width:25px;height: 25px' : 'color: #35596B;width:25px;height: 25px'"/>
                <svg-icon icon-class="smile" :style="echartObj15.verygood > 65 ? 'color: #F5B12D;width:25px;height: 25px' : 'color: #35596B;width:25px;height: 25px'"/>
                <svg-icon icon-class="smile" :style="echartObj15.verygood > 75 ? 'color: #F5B12D;width:25px;height: 25px' : 'color: #35596B;width:25px;height: 25px'"/>
                <svg-icon icon-class="smile" :style="echartObj15.verygood > 85 ? 'color: #F5B12D;width:25px;height: 25px' : 'color: #35596B;width:25px;height: 25px'"/>
                <svg-icon icon-class="smile" :style="echartObj15.verygood > 95 ? 'color: #F5B12D;width:25px;height: 25px' : 'color: #35596B;width:25px;height: 25px'"/>
              </div>
              <div style="color: #00C7F2;font-size: 16px;margin-left: 13px">{{echartObj15.verygood}}%</div>
            </div>
            <div style="height:23%;display: flex;justify-content: center;align-items: center">
              <div style="font-size: 14px;width: 58px;text-align: right">一般满意</div>
              <div style="margin-left: 10px">
                <svg-icon icon-class="smile" :style="echartObj15.good > 5 ? 'color: #3CD495;width:25px;height: 25px' : 'color: #35596B;width:25px;height: 25px'"/>
                <svg-icon icon-class="smile" :style="echartObj15.good > 15 ? 'color: #3CD495;width:25px;height: 25px' : 'color: #35596B;width:25px;height: 25px'"/>
                <svg-icon icon-class="smile" :style="echartObj15.good > 25 ? 'color: #3CD495;width:25px;height: 25px' : 'color: #35596B;width:25px;height: 25px'"/>
                <svg-icon icon-class="smile" :style="echartObj15.good > 35 ? 'color: #3CD495;width:25px;height: 25px' : 'color: #35596B;width:25px;height: 25px'"/>
                <svg-icon icon-class="smile" :style="echartObj15.good > 45 ? 'color: #3CD495;width:25px;height: 25px' : 'color: #35596B;width:25px;height: 25px'"/>
                <svg-icon icon-class="smile" :style="echartObj15.good > 55 ? 'color: #3CD495;width:25px;height: 25px' : 'color: #35596B;width:25px;height: 25px'"/>
                <svg-icon icon-class="smile" :style="echartObj15.good > 65 ? 'color: #3CD495;width:25px;height: 25px' : 'color: #35596B;width:25px;height: 25px'"/>
                <svg-icon icon-class="smile" :style="echartObj15.good > 75 ? 'color: #3CD495;width:25px;height: 25px' : 'color: #35596B;width:25px;height: 25px'"/>
                <svg-icon icon-class="smile" :style="echartObj15.good > 85 ? 'color: #3CD495;width:25px;height: 25px' : 'color: #35596B;width:25px;height: 25px'"/>
                <svg-icon icon-class="smile" :style="echartObj15.good > 95 ? 'color: #3CD495;width:25px;height: 25px' : 'color: #35596B;width:25px;height: 25px'"/>
              </div>
              <div style="color: #00C7F2;font-size: 16px;margin-left: 13px">{{echartObj15.good}}%</div>
            </div>
            <div style="height:23%;display: flex;justify-content: center;align-items: center">
              <div style="font-size: 14px;width: 58px;text-align: right">不满意</div>
              <div style="margin-left: 10px">
                <svg-icon icon-class="smile" :style="echartObj15.bad > 5 ? 'color: #3D7DFA;width:25px;height: 25px' : 'color: #35596B;width:25px;height: 25px'"/>
                <svg-icon icon-class="smile" :style="echartObj15.bad > 15 ? 'color: #3D7DFA;width:25px;height: 25px' : 'color: #35596B;width:25px;height: 25px'"/>
                <svg-icon icon-class="smile" :style="echartObj15.bad > 25 ? 'color: #3D7DFA;width:25px;height: 25px' : 'color: #35596B;width:25px;height: 25px'"/>
                <svg-icon icon-class="smile" :style="echartObj15.bad > 35 ? 'color: #3D7DFA;width:25px;height: 25px' : 'color: #35596B;width:25px;height: 25px'"/>
                <svg-icon icon-class="smile" :style="echartObj15.bad > 45 ? 'color: #3D7DFA;width:25px;height: 25px' : 'color: #35596B;width:25px;height: 25px'"/>
                <svg-icon icon-class="smile" :style="echartObj15.bad > 55 ? 'color: #3D7DFA;width:25px;height: 25px' : 'color: #35596B;width:25px;height: 25px'"/>
                <svg-icon icon-class="smile" :style="echartObj15.bad > 65 ? 'color: #3D7DFA;width:25px;height: 25px' : 'color: #35596B;width:25px;height: 25px'"/>
                <svg-icon icon-class="smile" :style="echartObj15.bad > 75 ? 'color: #3D7DFA;width:25px;height: 25px' : 'color: #35596B;width:25px;height: 25px'"/>
                <svg-icon icon-class="smile" :style="echartObj15.bad > 85 ? 'color: #3D7DFA;width:25px;height: 25px' : 'color: #35596B;width:25px;height: 25px'"/>
                <svg-icon icon-class="smile" :style="echartObj15.bad > 95 ? 'color: #3D7DFA;width:25px;height: 25px' : 'color: #35596B;width:25px;height: 25px'"/>
              </div>
              <div style="color: #00C7F2;font-size: 16px;margin-left: 13px">{{echartObj15.bad}}%</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import echarts from "echarts";
import Vue from 'vue'
import Echarts from "@/components/echarts";
import { Progress,Divider } from 'ant-design-vue';
import SvgIcon from '@/components/svgIcon.vue';
Vue.use(Progress);
Vue.use(Divider);
import { fxjIndex } from "@/api/cultApi";
import {createOperationLog} from "@/api/api"
// 定义柱状图左侧图形元素
const leftRect = echarts.graphic.extendShape({
  shape: {
    x: 0,
    y: 0,
    width: 16, //柱状图宽
    zWidth: 8, //阴影折角宽
    zHeight: 4 //阴影折角高
  },
  buildPath: function (ctx, shape) {
    const api = shape.api;
    const xAxisPoint = api.coord([shape.xValue, 0]);
    const p0 = [shape.x - shape.width / 2, shape.y - shape.zHeight];
    const p1 = [shape.x - shape.width / 2, shape.y - shape.zHeight];
    const p2 = [xAxisPoint[0] - shape.width / 2, xAxisPoint[1]];
    const p3 = [xAxisPoint[0] + shape.width / 2, xAxisPoint[1]];
    const p4 = [shape.x + shape.width / 2, shape.y];

    ctx.moveTo(p0[0], p0[1]);
    ctx.lineTo(p1[0], p1[1]);
    ctx.lineTo(p2[0], p2[1]);
    ctx.lineTo(p3[0], p3[1]);
    ctx.lineTo(p4[0], p4[1]);
    ctx.lineTo(p0[0], p0[1]);
    ctx.closePath();
  }
});
// 定义柱状图右侧以及顶部图形元素
const rightRect = echarts.graphic.extendShape({
  shape: {
    x: 0,
    y: 0,
    width: 15,
    zWidth: 12,
    zHeight: 8
  },
  buildPath: function (ctx, shape) {
    const api = shape.api;
    const xAxisPoint = api.coord([shape.xValue, 0]);
    const p1 = [shape.x - shape.width / 2, shape.y - shape.zHeight / 2];
    const p3 = [xAxisPoint[0] + shape.width / 2, xAxisPoint[1]];
    const p4 = [shape.x + shape.width / 2, shape.y];
    const p5 = [xAxisPoint[0] + shape.width / 2 + shape.zWidth, xAxisPoint[1]];
    const p6 = [
      shape.x + shape.width / 2 + shape.zWidth,
      shape.y - shape.zHeight / 2
    ];
    const p7 = [
      shape.x - shape.width / 2 + shape.zWidth,
      shape.y - shape.zHeight
    ];
    ctx.moveTo(p4[0], p4[1]);
    ctx.lineTo(p3[0], p3[1]);
    ctx.lineTo(p5[0], p5[1]);
    ctx.lineTo(p6[0], p6[1]);
    ctx.lineTo(p4[0], p4[1]);

    ctx.moveTo(p4[0], p4[1]);
    ctx.lineTo(p6[0], p6[1]);
    ctx.lineTo(p7[0], p7[1]);
    ctx.lineTo(p1[0], p1[1]);
    ctx.lineTo(p4[0], p4[1]);
    ctx.closePath();
  }
});
// 注册图形元素
echarts.graphic.registerShape('leftRect', leftRect);
echarts.graphic.registerShape('rightRect', rightRect);
export default {
  data() {
    let self = this
    return {
      echartObjKey: "echartObjKey",
      echartObjKey1: "echartObjKey1",
      echartObjKey3: "echartObjKey3",
      echartObjKey6: "echartObjKey6",
      echartObjKey7: "echartObjKey7",
      echartObjKey8: "echartObjKey8",
      /*退住原因分析*/
      echartObj1: {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          right: '10',
          top: 'center',
          orient: 'vertical',
          data: ['环境设施', '工作人员态度', '服务质量', '文娱活动', '其他'],
          textStyle: {
            color: '#FFFFFF',
            lineHeight: 18
          },
          formatter: function (name) {
            let data = self.echartObj1.series[0].data
            // console.log(data, '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})`
            //name是名称，v是数值
          }
        },
        color: ['#2B8EF3','#48E5E5','#3D7DFA','#F5B12D','#3CD495'],
        toolbox: {
          show: false,
          feature: {
            mark: {show: true},
            dataView: {show: true, readOnly: false},
            magicType: {
              show: true,
              type: ['pie', 'funnel']
            },
            restore: {show: true},
            saveAsImage: {show: true}
          }
        },
        series: [
          {
            name: '原因',
            type: 'pie',
            radius: [30, 90],
            roseType: 'area',
            top: 'middle',
            left: -100,
            label: {
              show: false,
              position: 'inside',
              formatter: '{d}%',
            },
            data: [
              {value: 10, name: '环境设施'},
              {value: 5, name: '工作人员态度'},
              {value: 15, name: '服务质量'},
              {value: 25, name: '文娱活动'},
              {value: 20, name: '其他'},
            ]
          }
        ]
      },
      /*长者数据*/
      echartObj2: {
        title: {
          show: true,
          text: '长者年龄',
          left: 'center',
          textStyle: {
            color: '#FFFFFf',
            fontSize: 14,
          }
        },
        xAxis: {
          type: 'category',
          axisLabel: {//x轴文字的配置
            show: true,
            textStyle: {
              color: "#fff",
              fontSize: 10,
            }
          },
          data: ['60-65岁','65-70岁','70-75岁','75-80岁','80-85岁','85岁以'],
        },
        yAxis: {
          type: 'value',
          axisLabel: {//y轴文字的配置
            textStyle: {
              color: "#fff",
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: ['#1F7DAF']
            }
          },
        },
        series: [
          {
            data: [80,158,130,80,30,10],
            type: 'custom',
            renderItem: function (params, api) {
              const index = params.seriesIndex;
              let location = api.coord([api.value(0) + index, api.value(1)]);
              var extent = api.size([0, api.value(1)]);
              return {
                type: 'group',
                children: [
                  {
                    type: 'leftRect',
                    shape: {
                      api,
                      xValue: api.value(0) + index,
                      yValue: api.value(1),
                      x: location[0],
                      y: location[1]
                    },
                    style: api.style()
                  },
                  {
                    type: 'rightRect',
                    shape: {
                      api,
                      xValue: api.value(0) + index,
                      yValue: api.value(1),
                      x: location[0],
                      y: location[1]
                    },
                    style: api.style()
                  }
                ]
              };
            },
            barWidth: 18,
            itemStyle: {
              normal: {
                // color: '#1B7EF2'
                color: () => {
                  return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: 'rgba(26, 132, 191, 1)' },
                    { offset: 1, color: 'rgba(27,126,242,0.00)' },
                  ]);
                },
              }
            }
          },
        ]
      },
      /*慢病统计*/
      echartObj3: {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          right: '10',
          top: 'center',
          orient: 'vertical',
          data: ['高血压', '糖尿病', '冠心病', '心肌梗塞', '慢性胃炎'],
          textStyle: {
            color: '#FFFFFF',
            lineHeight: 18
          },
          formatter: function (name) {
            let data = self.echartObj3.series[0].data
            // console.log(data, '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})`
            //name是名称，v是数值
          }
        },
        color: ['#2B8EF3','#48E5E5','#3D7DFA','#F5B12D','#3CD495'],
        toolbox: {
          show: false,
          feature: {
            mark: {show: true},
            dataView: {show: true, readOnly: false},
            magicType: {
              show: true,
              type: ['pie', 'funnel']
            },
            restore: {show: true},
            saveAsImage: {show: true}
          }
        },
        series: [
          {
            name: '原因',
            type: 'pie',
            radius: [30, 90],
            roseType: 'area',
            top: 'middle',
            left: -100,
            label: {
              show: true,
              position: 'inside',
              formatter: '{c}人',
            },
            data: [
              {value: 10, name: '高血压'},
              {value: 5, name: '糖尿病'},
              {value: 15, name: '冠心病'},
              {value: 25, name: '心肌梗塞'},
              {value: 20, name: '慢性胃炎'},
            ]
          }
        ]
      },
      /*入住人数趋势分析*/
      echartObj4: {
        xAxis: {
          type: 'category',
          axisLabel: {//x轴文字的配置
            show: true,
            textStyle: {
              color: "#fff",
              fontSize: 10,
            }
          },
          data: ['2018年','2019年','2020年','2021年','2022年','2023年'],
        },
        yAxis: {
          type: 'value',
          axisLabel: {//y轴文字的配置
            textStyle: {
              color: "#fff",
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: ['#1F7DAF']
            }
          },
        },
        series: [
          {
            data: [790,1056,1180,1298,1450,1760],
            type: 'pictorialBar',
            //同一系列的柱间距离
            barCategoryGap:"-60%",
            // 自定义svg 图标 (三角形的关)
            symbol: "path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z",
            z: 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: 'rgba(26, 132, 191, 1)' },
                    { offset: 1, color: 'rgba(27,126,242,0.00)' },
                  ]);
                },
                borderColor: '#206fde',
                borderWhidh: 2,
              }
            },
          },
        ]
      },
      /*能力评估*/
      echartObj5: {
        data: [{
          name: '能力完好',
          value: 537
        },
          {
            name: '轻度失能',
            value: 631
          },
          {
            name: '中度失能',
            value: 482
          },
          {
            name: '重度失能',
            value: 432
          },
          ],
        colors: ['#FFB200', '#1976E2', '#FF7B00', '#1976E2'],
        unit: '单位(人)',
        showValue: true
      },
      /*设备情况*/
      echartObj6: {
        color: ['#F5B12D','#18DFE8','#3D7DFA',],
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['55%', '76%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: false,
                fontSize: 20,
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 10, name: '未处理' },
              { value: 20, name: '处理中' },
              { value: 70, name: '已处理' },
            ]
          }
        ]
      },
      /*报警列表*/
      echartObj7: [
        {
          date: "2023年7月24日",
          address: "2楼202",
          time: "9:21",
          name: "张三",
          warning: "血压异常",
        },
        {
          date: "2023年7月24日",
          address: "2楼202",
          time: "9:21",
          name: "张三",
          warning: "心率异常",
        },
        {
          date: "2023年7月24日",
          address: "2楼202",
          time: "9:21",
          name: "张三",
          warning: "呼吸异常",
        },
        {
          date: "2023年7月24日",
          address: "2楼202",
          time: "9:21",
          name: "张三",
          warning: "设备离线",
        },
        {
          date: "2023年7月24日",
          address: "2楼202",
          time: "9:21",
          name: "张三",
          warning: "血压异常",
        },
        {
          date: "2023年7月24日",
          address: "2楼202",
          time: "9:21",
          name: "张三",
          warning: "血压异常",
        },
        {
          date: "2023年7月24日",
          address: "2楼202",
          time: "9:21",
          name: "张三",
          warning: "血压异常",
        },
        {
          date: "2023年7月24日",
          address: "2楼202",
          time: "9:21",
          name: "张三",
          warning: "血压异常",
        },
      ],
      /*各机构床位TOP5*/
      echartObj8: {
        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: ['深业颐居','深业龙投','深业世纪山谷'],
        },
        yAxis: {
          type: 'value',
          axisLabel: {//y轴文字的配置
            textStyle: {
              color: "#fff",
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: ['#1F7DAF']
            }
          },
        },
        series: [
            /*深业颐居*/
          {
            name: '总床位',
            data: [
              {name: '总床位', value: 457} ,
              {name: '医疗床位', value: 1300} ,
              {name: '养老床位', value: 950} ,
            ],
            type: 'bar',
            barWidth: 10,
            barGap:'100%',
            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: 136} ,
              {name: '医疗床位', value: 600},
              {name: '养老床位', value: 245},
            ],
            type: 'bar',
            barGap:'100%',
            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: 321} ,
                {name: '医疗床位', value: 700},
                {name: '养老床位', value: 750}
                ],
            type: 'bar',
            barGap:'100%',
            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)' },
                  ]);
                }
              }
            },
          },
        ]
      },
      /*各机构入住率TOP5*/
      echartObj9: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          axisLabel: {//x轴文字的配置
            show: true,
            textStyle: {
              color: "#fff",
              fontSize: 10,
            }
          },
          data: ['深业颐居','深业龙投','深业世纪山谷'],
        },
        yAxis: {
          type: 'value',
          axisLabel: {//y轴文字的配置
            textStyle: {
              color: "#fff",
            },
            formatter: '{value} %'
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: ['#1F7DAF']
            }
          },
        },
        series: [
          {
            data: [
              {name: '深业颐居', value: 85} ,
              {name: '深业龙投', value: 50} ,
              {name: '深业世纪山谷', value: 40} ,
            ],
            type: 'bar',
            barWidth: 28,
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: 'top',
                  textStyle: {
                    color: '#FFFFFF',
                    fontSize: 10
                  },
                  formatter: function (params) {
                    return params.value + '%'
                  },
                },
                // 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)' },
                  ]);
                },
              }
            },
          }
        ]
      },
      /*收入支出趋势*/
      echartObj10: {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['收入', '支出'],
          show: true,
          bottom: 10,
          icon: 'roundRect',
          textStyle: {
            color: '#FFFFFF',
            lineHeight: 10
          },
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['2022.08', '2022.09', '2022.10', '2022.11', '2022.12','2023.01'],
          axisLabel: {//x轴文字的配置
            show: true,
            textStyle: {
              color: "#fff",
              fontSize: 10,
            }
          },
        },
        yAxis: {
          type: 'value',
          axisLabel: {//y轴文字的配置
            textStyle: {
              color: "#fff",
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: ['#1F7DAF']
            }
          },
        },
        series: [
          {
            name: '收入',
            type: 'line',
            data: [700, 1000, 1000, 1500, 1300, 800],
            itemStyle: {
              normal: {
                label: {
                  textStyle: {
                    color: '#FFFFFF',
                    fontSize: 10
                  }
                },
                // color: '#1B7EF2'
                color: '#1890FF',
              }
            },
          },
          {
            name: '支出',
            type: 'line',
            stack: 'Total',
            data: [200, 1000, 1500, 1200, 1600, 1000],
            itemStyle: {
              normal: {
                label: {
                  textStyle: {
                    color: '#FFFFFF',
                    fontSize: 10
                  }
                },
                // color: '#1B7EF2'
                color: '#41E4BB',
              }
            },
          }
        ]
      },
      /*设备情况*/
      echartObj11: {
        legend: {
          show: false,
          right: '0',
          top: 'center',
          orient: 'vertical',
          data: ['设备', '护理材料', '电', '水', '食材', '天然气', '其他'],
          textStyle: {
            color: '#FFFFFF',
            lineHeight: 18
          },
          formatter: function (name) {
            let data = self.echartObj11.series[0].data
            // console.log(data, '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})`
            //name是名称，v是数值
          }
        },
        color: ['#2B8EF3','#48E5E5','#3D7DFA','#68A400','#F5B12D','#D599FD','#EA8533'],
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['50%', '76%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: false,
                fontSize: 20,
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 35, name: '设备' },
              { value: 15, name: '护理材料' },
              { value: 15, name: '电' },
              { value: 11, name: '水' },
              { value: 10, name: '食材' },
              { value: 9, name: '天然气' },
              { value: 5, name: '其他' },
            ]
          }
        ]
      },
      /*各机构床位TOP5*/
      echartObj12: {
        legend: {
          show: true,
          bottom: 10,
          data: ['总人数','医生','护理人员','志愿者'],
          textStyle: {
            color: '#FFFFFF',
            lineHeight: 10
          },
        },
        color: ['#2B8EF3','#F5B12D','#48E5E5','#68A400'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          axisLabel: {//x轴文字的配置
            show: true,
            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: [228,696,317],
            type: 'bar',
            barWidth: 10,
            barGap:'100%',
            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: [23,433,45],
            type: 'bar',
            barGap:'100%',
            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: [49,78,96],
            type: 'bar',
            barGap:'100%',
            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)' },
                  ]);
                }
              }
            },
          },
          /*志愿者*/
          {
            name: '志愿者',
            data: [156,185,176],
            type: 'bar',
            barGap:'100%',
            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: '#3CD495' },
                    { offset: 1, color: 'rgba(60,212,149,0.50)' },
                  ]);
                }
              }
            },
          },
        ]
      },
      /*培训课程能力分析*/
      echartObj13: {
        radar: {
          indicator: [
            { name: '老年人医学常识和护理', max: 25,},
            { name: '紧急救护知识', max: 25, 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(72,228,229,0.73)' },
                    { offset: 1, color: 'rgba(72,228,229,0.17)' }
                  ]
              )
            },
            areaStyle: {// 雷达图辐射区域的样式
                  color: new echarts.graphic.LinearGradient(
                      0, 0, 0, 1,
                      [
                        { offset: 0, color: 'rgba(72,228,229,0.73)' },
                        { offset: 1, color: 'rgba(72,228,229,0.17)' }
                      ]
                  )
                },
          }
        ]
      },
      /*活动占比分析*/
      echartObj14: {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          right: '10',
          top: 'center',
          orient: 'vertical',
          data: ['文化类', '体育类', '艺术类','分享类', '教育类'],
          textStyle: {
            color: '#FFFFFF',
            lineHeight: 18
          },
          formatter: function (name) {
            let data = self.echartObj14.series[0].data
            // console.log(data, '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, 2) + '%'
            return `${name}(${p})`
            //name是名称，v是数值
          }
        },
        color: ['#2B8EF3','#48E5E5','#3D7DFA','#F5B12D','#3CD495'],
        toolbox: {
          show: false,
          feature: {
            mark: {show: true},
            dataView: {show: true, readOnly: false},
            magicType: {
              show: true,
              type: ['pie', 'funnel']
            },
            restore: {show: true},
            saveAsImage: {show: true}
          }
        },
        series: [
          {
            name: '原因',
            type: 'pie',
            radius: [30, 90],
            roseType: 'area',
            top: 'middle',
            left: -100,
            label: {
              show: false,
              position: 'inside',
              formatter: '{d}%',
            },
            data: [
              {value: 32, name: '文化类'},
              {value: 28, name: '体育类'},
              {value: 20, name: '艺术类'},
              {value: 10, name: '分享类'},
              {value: 10, name: '教育类'},
            ]
          }
        ]
      },
      /*客户满意度调查*/
      echartObj15: {
        verygood: 70,
        good: 20,
        bad: 10
      }
    }
  },
  created() {
    this.param = {
      startYear: "",
      endYear: "",
    };
    this.init();
  },
  components: {
    Echarts,
    SvgIcon,
  },
  methods: {
    init() {
      this.getData();
    },
    search() {
      this.init();
    },
    getData() {
    },
  },
};
</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;
}
.shebei{
  background-image: url(../../assets/img/bigScreen/cyclebg.png);
  background-repeat: no-repeat;
  width: 175px;
  height: 175px;
  background-size: 100% 100%;
  .echarts {
    width: 120%;
    height: 120%;
  }
}
.block_bg{
  background-image: url(../../assets/img/bigScreen/block-bg.png);
  background-repeat: no-repeat;
  width: 71px;
  height: 80px;
  background-size: 100% 100%;
  margin-left: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.table_title_bg{
  width:98%;
  height: 34px;
  line-height: 34px;
  font-size:14px;
  color: #00B3DB;
  display: flex;
  border-bottom: 1px solid;
  border-image: linear-gradient(270deg, rgba(31,125,175,0.00) 0%, #1F7DAF 100%) 0 0 1 0
}
.table_row_bg{
  width:98%;
  height: 34px;
  line-height: 34px;
  font-size:14px;
  display: flex;
  background: linear-gradient(270deg, rgba(2,61,89,0.00) 0%, #023D59 100%);

  /* 渐变/列表/描边 */
  border: 1px solid ;
  border-image: linear-gradient(270deg, rgba(31,125,175,0.00) 0%, #1F7DAF 100%) 1;
  border-right: none;
}
</style>
