居住页修改

src/pages/live/home.vue

@@ -98,8 +98,71 @@
         </div>
       </div>
     </div>
+    <div class="home_center" style="display: block">
+      <div class="inner_box" style="width: 99%;height:21%">
+        <div class="inner-header"></div>
+        <div class="header-bg1"></div>
+        <div class="header-bg2"></div>
+        <div class="header-bg3"></div>
+      </div>
+      <div class="inner_box" style="width: 99%;height:30%">
+        <div class="inner-second"></div>
+        <div class="second-bg1"></div>
+        <div class="second-bg2"></div>
+        <div class="second-bg3"></div>
+      </div>
+      <div class="inner_box" style="width: 99%;height:21%">
+        <div class="inner-third"></div>
+        <div class="third-bg"></div>
+      </div>
+      <div class="inner_box" style="width: 99%;height:25%;display: flex;justify-content: space-between">
+        <div class="center-bottom">
+          <div class="center-bottom-title btm-til1"></div>
+          <div class="chart_box">
+            <Echarts
+                class="echarts"
+                :echartObj="echartObj6"
+            ></Echarts>
+          </div>
+        </div>
+        <div class="center-bottom">
+          <div class="center-bottom-title btm-til2"></div>
+          <div class="chart_box">
+            <Echarts
+                class="echarts"
+                :echartObj="echartObj7"
+            ></Echarts>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="home_right">
+      <InnerBox :echartObj="echartObj8" style="width: 99%;" header_title="进15天床位趋势" 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>长者子女人数情况分析</span>
+              <span class="little_font">（人）</span>
+            </div>
+          </div>
+        </div>
+        <div class="box_content">
+          <dv-capsule-chart :config="echartObj9" style="height: 100%" />
+        </div>
+      </div>
+      <InnerBox :echartObj="echartObj10" header_title="护理异常事件处理统计" little_font="(%)"  />
+      <InnerBox :echartObj="echartObj11" header_title="床位变更原因分析" little_font="(人)" />
+      <InnerBox :echartObj="echartObj12" header_title="本年退住、病亡人数分析" little_font="(人)"  />
+      <InnerBox :echartObj="echartObj13" style="width: 99%;"  header_title="长者关怀分析" little_font="（人/次）" />
 
-    <img src="@/assets/img/page2/04长者.png" alt="" style="width: 69%;height: calc(100vh - 5vw);margin-left: 1%;">
+    </div>
+<!--    <img src="@/assets/img/page2/04长者.png" alt="" style="width: 69%;height: calc(100vh - 5vw);margin-left: 1%;">-->
   </div>
 </template>
 
@@ -109,6 +172,7 @@ import { Progress,Divider } from 'ant-design-vue';
 Vue.use(Progress);
 Vue.use(Divider);
 import Echarts from "@/components/echarts";
+import echarts from "echarts";
 
 export default {
   data() {
@@ -382,6 +446,574 @@ export default {
         data: [357,489,456,189,129,93,47],
         colors: ['#A35BD9', '#209B9B', '#FA6C06', '#F5B12D', '#1974DF', '#18DFE8', '#0CB872'],
       },
+      //一年内入住率趋势
+      echartObj6:{
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#000'
+            }
+          },
+          formatter: function (params){
+            console.log(params,'111111');
+            let value = params[0].data + '%'
+            return value;
+          }
+        },
+        legend: {
+          show: false,
+          icon: 'roundRect',
+          textStyle: {
+            color: '#FFFFFF',
+            lineHeight: 10
+          },
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: ['22.08', '22.09', '22.10', '22.11', '22.12','23.01','23.02','23.03','23.04','23.05'],
+          axisLabel: {//x轴文字的配置
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 10,
+            }
+          },
+        },
+        yAxis: {
+          type: 'value',
+          axisLabel: {//y轴文字的配置
+            formatter:'{value}%',
+            textStyle: {
+              color: "#fff",
+            },
+
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              type: 'dashed',
+              color: ['#1F7DAF']
+            },
+
+          },
+        },
+        series: [
+          {
+            name: '',
+            type: 'line',
+            data: [20, 30, 40, 50, 60, 80,50,40,50,30],
+            symbol: 'circle',
+            showSymbol: false,
+            itemStyle: {
+              normal: {
+                label: {
+                  textStyle: {
+                    color: '#FFFFFF',
+                    fontSize: 10
+                  }
+                },
+                // color: '#1B7EF2'
+                color: '#1890FF',
+              }
+            },
+          },
+        ]
+      },
+      //入住时长分析
+      echartObj7:{
+        title: {
+          show: true,
+          text: '平均入住时长320天',
+          left: 'center',
+          textStyle: {
+            color: '#108EFF',
+            fontSize: 14,
+          }
+        },
+        xAxis: {
+          type: 'category',
+          axisLabel: {//x轴文字的配置
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 10,
+            }
+          },
+          data: ['1个月内','1-3个月','3-6个月','半年-1年','1-2年','2-3年'],
+        },
+        yAxis: {
+          type: 'value',
+          axisLabel: {//y轴文字的配置
+            textStyle: {
+              color: "#fff",
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              type: 'dashed',
+              color: ['#1F7DAF']
+            }
+          },
+        },
+        series: [
+          {
+            data: [80,158,130,80,120,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)' },
+                  ]);
+                },
+              }
+            }
+          },
+        ]
+      },
+      //近15天床位趋势
+      echartObj8: {
+        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: ['0705','0706','0709','0710','0711','0714','0715','0716','0717','0718','0719'],
+          }
+        ],
+        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(41,241,250,1)']
+            },
+            showSymbol: false,
+            areaStyle: {
+              opacity: 0.8,
+              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: 'rgba(41,241,250,0.35)'
+                },
+                {
+                  offset: 0.48,
+                  color: 'rgba(41,241,250,0.21)'
+                },
+                {
+                  offset: 0.99,
+                  color: 'rgba(41,241,250,0.00)'
+                }
+              ])
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            data: [60, 67, 70, 126, 110, 50, 80, 160, 140, 130,160]
+          },
+          {
+            type: 'line',
+            stack: 'Total',
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              color: ['rgba(27,126,242,1)']
+            },
+            showSymbol: false,
+            areaStyle: {
+              opacity: 0.8,
+              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: 'rgba(27,126,242,0.35)'
+                },
+                {
+                  offset: 0.48,
+                  color: 'rgba(27,126,242,0.21)'
+                },
+                {
+                  offset: 0.99,
+                  color: 'rgba(27,126,242,0.00)'
+                }
+              ])
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            data: [60, 67, 70, 126, 110, 50, 80, 160, 140, 130,160]
+          },
+          {
+            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: [110, 87, 100, 146, 130, 90, 150, 190, 180, 140,110]
+          },
+        ]
+      },
+      //近一个月护理异常事件统计
+      echartObj9: {
+        data: [
+          {
+            name: '隐患事件',
+            value: 53
+          },
+          {
+            name: '未造成后果事件',
+            value: 36
+          },
+          {
+            name: '不良事件',
+            value: 27
+          },
+          {
+            name: '警告事件',
+            value: 19
+          },
+        ],
+        colors: ['#08EC8F', '#2B8EF3', '#08FFFF', '#F5B12D'],
+        unit: '',
+        showValue: false
+      },
+      //  护理异常事件处理统计
+      echartObj10: {
+        legend: {
+          show: true,
+          top: 'middle',
+          right: 0,
+          orient: 'vertical',
+          data: ['已处理', '处理中', '未处理',],
+          textStyle: {
+            color: '#FFFFFF',
+            lineHeight: 18
+          },
+          formatter:  (name) => {
+            let data = this.echartObj10.series[0].data
+            let total = 0
+            let tarValue
+            for (let i = 0; i < data.length; i++) {
+              total += data[i].value
+              if (data[i].name == name) {
+                tarValue = data[i].value
+              }
+            }
+            //计算出百分比
+            let p = Math.round((tarValue / total) * 100) + '%'
+            return `${name}${p}`
+          }
+        },
+        color: ['#507AFC','#48E5E5','#FAC858'],
+        series: [
+          {
+            name: 'Access From',
+            type: 'pie',
+            radius: [60, 90],
+            top: 'middle',
+            left: -50,
+            avoidLabelOverlap: false,
+            label: {
+              show: false,
+              position: 'center'
+            },
+            emphasis: {
+              label: {
+                show: false,
+                fontSize: 20,
+              }
+            },
+            labelLine: {
+              show: false
+            },
+            data: [
+              { value: 75, name: '已处理' },
+              { value: 15, name: '处理中' },
+              { value: 5, name: '未处理' },
+            ]
+          }
+        ]
+      },
+      //床位便跟原因分析
+      echartObj11: {
+        tooltip: {
+          trigger: 'item',
+          formatter: '{a} <br/>{b} : {c} ({d}%)'
+        },
+        legend: {
+          right: '0',
+          top: 'center',
+          orient: 'vertical',
+          data: ['距厕所距离', '朝向问题', '室友关系','养转医','医转养',],
+          textStyle: {
+            color: '#FFFFFF',
+            lineHeight: 18
+          },
+          formatter: (name) => {
+            let data = this.echartObj11.series[0].data
+            let total = 0
+            let tarValue
+            console.log(data,name,'数据');
+            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})`
+          }
+        },
+        color: ['#2B8EF3','#48E5E5','#2B8EF3','#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: [20, 80],
+            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: '医转养'},
+            ]
+          }
+        ]
+      },
+      //本年退住、病亡人数
+      echartObj12: {
+        legend: {
+          show: true,
+          top: 'middle',
+          right: 0,
+          orient: 'vertical',
+          data: ['退住人数', '病亡人数', ],
+          textStyle: {
+            color: '#FFFFFF',
+            lineHeight: 18
+          },
+          formatter:  (name) => {
+            let data = this.echartObj12.series[0].data
+            let total = 0
+            let tarValue
+            for (let i = 0; i < data.length; i++) {
+              total += data[i].value
+              if (data[i].name == name) {
+                tarValue = data[i].value
+              }
+            }
+            //计算出百分比
+            let p = Math.round((tarValue / total) * 100) + '%'
+            return `${name}${p}`
+          }
+        },
+        color: ['#507AFC','#48E5E5','#FAC858'],
+        series: [
+          {
+            name: 'Access From',
+            type: 'pie',
+            radius: [60, 90],
+            top: 'middle',
+            left: -50,
+            avoidLabelOverlap: false,
+            label: {
+              show: false,
+              position: 'center'
+            },
+            emphasis: {
+              label: {
+                show: false,
+                fontSize: 20,
+              }
+            },
+            labelLine: {
+              show: false
+            },
+            data: [
+              { value: 75, name: '退住人数' },
+              { value: 25, name: '病亡人数' },
+            ]
+          }
+        ]
+      },
+      //长者关怀分析
+      echartObj13: {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        xAxis: {
+          type: 'category',
+          axisLabel: {//x轴文字的配置
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 10,
+            }
+          },
+          data: ['0705','0706','0708','0709','0710','0711','0712','0713','0714','0715','0716','0717','0718','0719'],
+        },
+        yAxis: {
+          type: 'value',
+          axisLabel: {//y轴文字的配置
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.64)",
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              type: 'dashed',
+              color: ['#1F7DAF']
+            }
+          },
+        },
+        series: [
+          {
+            data: [
+              {name: '0705', value: 107 },
+              {name: '0706', value: 87 },
+              {name: '0708', value: 102 },
+              {name: '0709', value: 90 },
+              {name: '0710', value: 95 },
+              {name: '0711', value: 103 },
+              {name: '0712', value: 95 },
+              {name: '0713', value: 104 },
+              {name: '0714', value: 100 },
+              {name: '0715', value: 95 },
+              {name: '0716', value: 80 },
+              {name: '0717', value: 97 },
+              {name: '0718', value: 91 },
+              {name: '0719', value: 90 },
+            ],
+            type: 'bar',
+            barWidth: 10,
+            barGap:'100%',
+            itemStyle: this.setSeriesItemStyle('lan'),
+          },
+        ]
+      },
+
     }
   },
   created() {
@@ -448,12 +1080,108 @@ export default {
   img{
     max-width: 100%;
   }
+  .home_center {
+    width: 34%;
+    padding: 0 10px;
+    .inner_box{
+      margin-top: 1%;
+    }
+    .center-bottom{
+      width: 49%;
+      height: 100%;
+      .btm-til1{
+        background-image: url(../../assets/img/live/bottom-title1.png);
+      }
+      .btm-til2{
+        background-image: url(../../assets/img/live/bottom-title2.png);
+      }
+      .center-bottom-title{
+        width: 100%;
+        height: 50px;
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+      }
+      .chart_box{
+        width: 100%;
+        height: 80%;
+        margin-top: 1%;
+      }
+    }
+    .inner-header {
+      background-image: url(../../assets/img/live/top-title.png);
+    }
+    .inner-second{
+      background-image: url(../../assets/img/live/title2.png);
+    }
+    .inner-third{
+      background-image: url(../../assets/img/live/title3.png);
+    }
+    .third-bg{
+      height: 56%;
+      width: 90%;
+      margin: 2% auto;
+      background-image: url(../../assets/img/live/third-bg.png);
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+    }
+    .inner-header,
+    .inner-third,
+    .inner-last,
+    .inner-second{
+      height: 60px;
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+    }
+    .second-bg1{
+      background-image:url(../../assets/img/live/second-bg1.png); ;
+    }
+    .second-bg2{
+      background-image:url(../../assets/img/live/second-bg2.png); ;
+    }
+    .second-bg3{
+      background-image:url(../../assets/img/live/second-bg3.png); ;
+    }
+    .second-bg1,
+    .second-bg2,
+    .second-bg3{
+      width: 90%;
+      height: 19%;
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      margin:3% auto;
+    }
+    .header-bg1{
+      background-image: url(../../assets/img/live/top1.png);
+    }
+    .header-bg3{
+      background-image: url(../../assets/img/live/top2.png);
+    }
+    .header-bg2{
+      background-image: url(../../assets/img/live/bottom.png);
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      width: 100%;
+      height: 10px;
+      margin: 1% 0;
+
+    }
+    .header-bg1,
+    .header-bg3
+    {
+      height: 30%;
+      width: 90%;
+      margin: auto;
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+    }
+  }
+
   .inner_box{
     overflow: hidden;
   }
   .home_left,
   .home_right{
-    width: 30%;
+    width: 33%;
     .inner_box{
       margin-left: 1%;
     }