zqyy-yl/src/pages/elder/home.vue

<template>
  <div class="main_box">
    <div class="home_left">
      <InnerBox :echartObj="echartObj1" header_title="长者年龄分析" little_font="（人）" />
      <InnerBox :echartObj="echartObj2" header_title="各机构长者数量TOP5" little_font="（人）" />
      <InnerBox :echartObj="echartObj3" style="width: 99%;" header_title="各机构能力评估人数TOP5" little_font="（人）" />
      <InnerBox :echartObj="echartObj4" style="width: 99%;" header_title="入住人数趋势分析" little_font="（人）" />

      <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 echart5">
          <div v-for="(item,index) in echartObj5.title">
            <div class="div1">{{item}}</div>
            <div class="div2"></div>
            <div class="div3">
              <div class="div4" :style="'width:' + (100 - (echartObj5.data[index]/echartObj5Max*100)) / 2 + '%;'"></div>
              <div class="div5" :style="'width: '+ echartObj5.data[index]/echartObj5Max*100 + '%;'">
                <span style="font-size: 14px; font-weight: bold">{{echartObj5.data[index]}}</span>
              </div>
              <div class="div6" :style="'width:' + (100 - (echartObj5.data[index]/echartObj5Max*100)) / 2 + '%;'"></div>
            </div>
            <div class="div7"></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" 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 :strokeWidth="13" type="circle" :stroke-color="{'9%': '#FA6400','89%': '#FEDB65'}" :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 :strokeWidth="13" type="circle" :stroke-color="{'9%': '#FA6400','89%': '#FEDB65'}" :percent="30" />
            </div>
            <div style="color: #FFFFFF;margin-top: 15px">非夫妻</div>
          </div>
        </div>
      </div>
    </div>
    <div class="home_center">
      <!--长者总数-->
      <div class="inner_box" style="height: 17%;">
        <div class="inner_header">
          <div class="header_title">
            <div>
              <span>长者总数</span>
            </div>
          </div>
        </div>
        <div class="zz">
          <div>
            <div>
              <img src="@/assets/img/elder/1.png" alt="">
              <div>
                <div>长者总数</div>
                <div><span>1761</span>人</div>
              </div>
            </div>
            <div>
              <div><i class="circle"></i>男性长者</div>
              <div>1761人</div>
            </div>
            <div>
              <div><i class="circle circle2"></i>女性长者</div>
              <div>1761人</div>
            </div>
          </div>
          <div>
            <img src="@/assets/img/elder/2.png" alt="">
            <div>医疗人数</div>
            <div>373</div>
          </div>
          <div>
            <img src="@/assets/img/elder/3.png" alt="">
            <div>养护人数</div>
            <div>595</div>
          </div>
          <div>
            <img src="@/assets/img/elder/4.png" alt="">
            <div>颐养人数</div>
            <div>490</div>
          </div>
        </div>
      </div>
    </div>
    <div class="home_right">
      <InnerBox :echartObj="echartObj1" header_title="长者年龄分析" little_font="(人)" />
      <InnerBox :echartObj="echartObj1" header_title="长者年龄分析" little_font="(人)" />
      <InnerBox :echartObj="echartObj1" header_title="长者年龄分析" little_font="(人)" />
      <InnerBox :echartObj="echartObj1" header_title="长者年龄分析" little_font="(人)" />
      <InnerBox :echartObj="echartObj1" header_title="长者年龄分析" little_font="(人)" />
      <InnerBox :echartObj="echartObj1" header_title="长者年龄分析" little_font="(人)" />
      <InnerBox :echartObj="echartObj1" header_title="长者年龄分析" little_font="(人)" />
      <InnerBox :echartObj="echartObj1" header_title="长者年龄分析" little_font="(人)" />
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Progress,Divider } from 'ant-design-vue';
Vue.use(Progress);
Vue.use(Divider);

export default {
  data() {
    return {
      // 长者年龄分析
      echartObj1: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        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: "rgba(255, 255, 255, 0.64)",
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: ['#1F7DAF']
            }
          },
        },
        series: [
          {
            data: [
              {name: '60-65岁', value: 120 },
              {name: '65-70岁', value: 160 },
              {name: '70-75岁', value: 150 },
              {name: '75-80岁', value: 120 },
              {name: '80-85岁', value: 80 },
              {name: '85岁以上', value: 60 },
            ],
            type: 'bar',
            barWidth: 10,
            barGap:'100%',
            itemStyle: this.setSeriesItemStyle('lan'),
          },
        ]
      },
      // 各机构长者数量TOP5
      echartObj2: {
        legend: {
          show: true,
          bottom: 10,
          data: ['长者人数','男','女'],
          textStyle: {
            color: '#FFFFFF',
            lineHeight: 10
          },
        },
        color: ['#48E5E5','#2B8EF3','#F5B12D',],
        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: this.setSeriesItemStyle('qing'),
          },
          /*深业龙投*/
          {
            name: '男',
            data: [
              {name: '长者人数', value: 136} ,
              {name: '男', value: 600},
              {name: '女', value: 245},
            ],
            type: 'bar',
            barGap:'100%',
            barWidth: 10,
            itemStyle: this.setSeriesItemStyle('lan'),
          },
          /*深业世纪山谷*/
          {
            name: '女',
            data: [
              {name: '长者人数', value: 321} ,
              {name: '男', value: 700},
              {name: '女', value: 750}
            ],
            type: 'bar',
            barGap:'100%',
            barWidth: 10,
            //同一系列的柱间距离
            itemStyle: this.setSeriesItemStyle('huang'),
          },
        ]
      },
      // 各机构能力评估人数TOP5
      echartObj3: {
        legend: {
          show: true,
          bottom: 10,
          data: ['总人数','重度失能','中度失能','轻度失能','能力完好'],
          textStyle: {
            color: '#FFFFFF',
            lineHeight: 10
          },
        },
        color: ['#07F090','#2B8EF3','#FF7B00','#48E5E5','#9B64D3'],
        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: 358} ,
              {name: '深业龙投', value: 916} ,
              {name: '深业世纪山谷', value: 486} ,
            ],
            type: 'bar',
            barGap:'100%',
            barWidth: 10,
            //同一系列的柱间距离
            itemStyle: this.setSeriesItemStyle('lv'),
          },
          {
            name: '重度失能',
            data: [
              {name: '深业颐居', value: 98} ,
              {name: '深业龙投', value: 198} ,
              {name: '深业世纪山谷', value: 77} ,
            ],
            type: 'bar',
            barWidth: 10,
            barGap:'100%',
            itemStyle: this.setSeriesItemStyle('lan'),
          },
          {
            name: '中度失能',
            data: [
              {name: '深业颐居', value: 232} ,
              {name: '深业龙投', value: 361} ,
              {name: '深业世纪山谷', value: 247} ,
            ],
            type: 'bar',
            barGap:'100%',
            barWidth: 10,
            itemStyle: this.setSeriesItemStyle('huang'),
          },
          {
            name: '轻度失能',
            data: [
              {name: '深业颐居', value: 28} ,
              {name: '深业龙投', value: 357} ,
              {name: '深业世纪山谷', value: 152} ,
            ],
            type: 'bar',
            barGap:'100%',
            barWidth: 10,
            itemStyle: this.setSeriesItemStyle('qing'),
          },
          {
            name: '能力完好',
            data: [
              {name: '深业颐居', value: 28} ,
              {name: '深业龙投', value: 28} ,
              {name: '深业世纪山谷', value: 28} ,
            ],
            type: 'bar',
            barGap:'100%',
            barWidth: 10,
            itemStyle: this.setSeriesItemStyle('zi'),
          },
        ]
      },
      // 入住人数趋势分析
      echartObj4: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            axisLabel: {//x轴文字的配置
              show: true,
              interval: 0, // 强制文字全部显示
              textStyle: {
                color: "#fff",
                fontSize: 10,
              }
            },
            data: ['2022年9月','2022年10月','2022年11月','2022年12月','2023年1月','2023年2月','2023年3月'],
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLabel: {//y轴文字的配置
              textStyle: {
                color: "#fff",
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed',
                color: ['#1F7DAF']
              }
            },
          }
        ],
        series: [
          {
            type: 'line',
            stack: 'Total',
            smooth: true,
            lineStyle: {
              width: 2,
              color: ['rgba(255,167,85,1)']
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgba(255,167,85,0.35)'
                },
                {
                  offset: 0.48,
                  color: 'rgba(255,167,85,0.21)'
                },
                {
                  offset: 0.99,
                  color: 'rgba(255,167,85,0.00)'
                }
              ])
            },
            emphasis: {
              focus: 'series'
            },
            data: [90, 87, 100, 146, 130, 90, 150, 190, 180, 140]
          }
        ]
      },
      // 护理服务需求TOP5
      echartObj5Max: 135,
      echartObj5: {
        title: ['衣物清洗','助餐','助浴','康复训练','陪同散步',],
        data: [135,132,88,70,60],
      },
      // 入住长者夫妻占比
      echartObj6: {
        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: () => {
                  return new this.$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: () => {
                  return new this.$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: () => {
                  return new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#48E5E5' },
                    { offset: 1, color: 'rgba(72,228,229,0.30)' },
                  ]);
                }
              }
            },
          },
        ]
      },
    }
  },
  created() {
    this.init();
  },
  components: {
  },
  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 48px;
  > div{
    padding: 0;
  }
  .home_left,
  .home_right{
    width: 30%;
  }
  .home_center{
    width: 40%;
    padding: 0 24px;
    .zz{
      padding: 16px 30px;
      height: calc(100% - 60px);
      display: flex;
      justify-content: space-between;
      >div{
        text-align: center;
        border: 1px solid;
        border-image: linear-gradient(180deg, rgba(238,124,17,0.32) 0%, #E48900 100%) 1;
        // border-image: linear-gradient(180deg, #20F6A5 0%, #00bbf2 20%, #038F81 99%) 1 1 1 1;
        // border-radius: 10000px;
        padding: 0 16px;
      }
      >div:nth-child(1){
        width: 50%;
        padding: 16px 30px 16px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: linear-gradient(89deg, #088152 3%, #01190C 99%);
        border: 3px solid #08B975;
        border-radius: 10000px;
        .circle{
          display: inline-block;
          position: absolute;
          width: 12px;
          height: 1.5em;
          border-left: 1px solid;
          border-bottom: 1px solid;
          border-color: #00B4FF;
          margin-left: -12px;
          // margin-top: -0.5em;
          &:after{
            content: "";
            display: block;
            width: 7px;
            height: 7px;
            border-radius: 7px;
            background: #00B4FF;
            position: absolute;
            margin-top: -7px;
            margin-left: -3.5px;
          }
        }
        .circle2{
          border-color: #F77802;
          &:after{
            background: #F77802;
          }
        }
        >div:nth-child(1){
          display: flex;
          align-items: center;
          img{
            height: 100%;
          }
        }
      }
    }
  }
  .echart5{
    > div{
      font-size: 1rem;
      color: #FFFFFF;
      width: 100%;
      display: flex;
      align-items: center;
      margin-bottom: 16px;
      &:last-child{
        margin: 0;
      }
      &:nth-child(1) .div5{
        background: #FA6C06;
      }
      &:nth-child(2) .div5{
        background: #F5B12D;
      }
      &:nth-child(3) .div5{
        background: #1974DF;
      }
      &:nth-child(4) .div5{
        background: #18DFE8;
      }
      &:nth-child(5) .div5{
        background: #0CB872;
      }
    }
    .div1{
      flex-shrink: 0;
      margin-left: 10px;
      width: 30%;
    }
    .div2{
      width: 5%;
      height: 1px;
      border-bottom: 1px dashed rgba(230, 247, 255, 0.5);
    }
    .div3{
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
    }
    .div4{
      height: 1px;
      border-bottom: 1px dashed rgba(230, 247, 255, 0.5);
      flex: 1;
      margin-right: 10px;
    }
    .div5{
      height: 20px;
      border-radius: 2px;
      text-align: center;
    }
    .div6{
      height: 1px;
      border-bottom: 1px dashed rgba(230, 247, 255, 0.5);
      flex: 1;
      margin-left: 10px;
    }
    .div7{
      width: 5%;
      height: 1px;
      margin-right: 10px;
      border-bottom: 1px dashed rgba(230, 247, 255, 0.5);
    }
  }
}
</style>