添加综合管理页

src/components/header.vue

@@ -78,7 +78,7 @@ export default {
         {
           index: "5",
           title: "综合管理",
-          path: "/05"
+          path: "/comprehensive"
         },
         {
           index: "6",

src/pages/comprehensive/home.vue

@@ -0,0 +1,997 @@
+<template>
+  <div class="main_box">
+    <div class="home_left">
+      <!-- 各机构入住率 -->
+      <div class="inner_box">
+        <div class="inner_header">
+          <div class="header_left"></div>
+          <div class="header_icon">
+            <div style="width: 12px; height: 10px; margin-bottom: -6px"><img src="@/assets/img/bigScreen/polygon1.png"></div>
+            <div style="width: 12px; height: 10px; margin-bottom: 10px"><img src="@/assets/img/bigScreen/polygon2.png"></div>
+          </div>
+          <div class="header_title">
+            <div>
+              <span>各机构入住率TOP5</span>
+              <span class="little_font">（%）</span>
+            </div>
+          </div>
+        </div>
+        <div class="left-top1"></div>
+        <div class="left-top2"></div>
+      </div>
+      <InnerBox :echartObj="echartObj1" header_title="本年每月用餐类型统计" little_font="(单)"/>
+      <InnerBox :echartObj="echartObj2" header_title="菜品订单量TOP10" little_font="(单)"/>
+    </div>
+    <div class="home_center" style="display: block">
+      <div class="inner_box" style="width: 99%;height:32%">
+        <div class="inner-header"></div>
+        <div style="display: flex;justify-content: space-around;width: 100%;height: 100%">
+          <div class="header-left">
+            <div class="header-left-title"></div>
+            <Echarts class="echarts" style="height: 80%" :echartObj="echartObj3" />
+          </div>
+          <div class="header-right">
+            <div class="header-right-title"></div>
+            <Echarts class="echarts" style="height: 80%" :echartObj="echartObj4" />
+          </div>
+        </div>
+      </div>
+      <div class="inner_box" style="width: 99%;height:32%">
+        <div class="inner-center"></div>
+        <div style="display: flex;justify-content: space-around;width: 100%;height: 100%">
+          <div class="center-left">
+            <div class="center-left-title"></div>
+            <Echarts class="echarts" style="height: 80%" :echartObj="echartObj5" />
+          </div>
+          <div class="center-right">
+            <div class="center-right-title"></div>
+            <Echarts class="echarts" style="height: 80%" :echartObj="echartObj6" />
+          </div>
+        </div>
+      </div>
+      <div class="inner_box" style="width: 99%;height:32%">
+        <div class="inner-bottom"></div>
+        <div style="display: flex;justify-content: space-around;width: 100%;height: 100%">
+          <div class="bottom-left"></div>
+          <div class="bottom-right">
+            <div class="bottom-right-title"></div>
+            <Echarts class="echarts" style="height: 80%" :echartObj="echartObj7" />
+          </div>
+        </div>
+      </div>
+      </div>
+    <div class="home_right">
+      <div class="right-top"></div>
+      <div class="right-center"></div>
+      <InnerBox :echartObj="echartObj8" style="width: 99%;" header_title="护理人员能力分析" />
+
+    </div>
+  </div>
+</template>
+
+<script>
+import Vue from 'vue'
+import { Progress,Divider } from 'ant-design-vue';
+Vue.use(Progress);
+Vue.use(Divider);
+import Echarts from "@/components/echarts";
+import echarts from "echarts";
+
+export default {
+  data() {
+    return {
+      echartObj1: {
+        legend: {
+          show: true,
+          bottom: 10,
+          data: ['套餐(单)','自定义餐(单)','营养餐(单)'],
+          textStyle: {
+            color: '#FFFFFF',
+            lineHeight: 10
+          },
+        },
+        color: ['#2B8EF3','#F5B12D','#48E5E5'],
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        xAxis: {
+          type: 'category',
+          axisLabel: {//x轴文字的配置
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 10,
+            }
+          },
+          data: ['1月','2月','3月','4月','5月','6月'],
+        },
+        yAxis: {
+          type: 'value',
+          axisLabel: {//y轴文字的配置
+            textStyle: {
+              color: "#fff",
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              type: 'dashed',
+              color: ['#1F7DAF']
+            }
+          },
+        },
+        series: [
+          {
+            name: '套餐(单)',
+            data: [
+              {name: '套餐(单)', value: 210},
+              {name: '套餐(单)', value: 140},
+              {name: '套餐(单)', value: 130},
+              {name: '套餐(单)', value: 130},
+              {name: '套餐(单)', value: 130},
+              {name: '套餐(单)', value: 130},
+            ],
+            type: 'bar',
+            barWidth: 10,
+            barGap:0.5,
+            itemStyle: {
+              normal: {
+                label: {
+                  show: true,
+                  position: 'top',
+                  textStyle: {
+                    color: '#FFFFFF',
+                    fontSize: 10
+                  },
+                },
+                // color: '#1B7EF2'
+                color: () => {
+                  return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    { offset: 0, color: '#1976E2' },
+                    { offset: 1, color: 'rgba(25,118,226,0.30)' },
+                  ]);
+                },
+              }
+            },
+          },
+          {
+            name: '自定义餐(单)',
+            data: [
+              {name: '自定义餐(单)', value: 180} ,
+              {name: '自定义餐(单)', value: 120},
+              {name: '自定义餐(单)', value: 48},
+              {name: '自定义餐(单)', value: 50},
+              {name: '自定义餐(单)', value: 90},
+              {name: '自定义餐(单)', value: 120},
+            ],
+            type: 'bar',
+            barGap:0.5,
+            barWidth: 10,
+            itemStyle: {
+              normal: {
+                label: {
+                  show: true,
+                  position: 'top',
+                  textStyle: {
+                    color: '#FFFFFF',
+                    fontSize: 10
+                  },
+                },
+                // color: '#1B7EF2'
+                color: () => {
+                  return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    { offset: 0, color: '#FF7B00' },
+                    { offset: 1, color: 'rgba(255,123,0,0.30)' },
+                  ]);
+                },
+              }
+            },
+          },
+          {
+            name: '营养餐(单)',
+            data: [
+              {name: '营养餐(单)', value: 90} ,
+              {name: '自定义餐(单)', value: 170},
+              {name: '营养餐(单)', value: 70},
+              {name: '营养餐(单)', value: 120},
+              {name: '营养餐(单)', value: 180},
+              {name: '营养餐(单)', value: 110}
+            ],
+            type: 'bar',
+            barGap:0.5,
+            barWidth: 10,
+            //同一系列的柱间距离
+            itemStyle: {
+              normal: {
+                label: {
+                  show: true,
+                  position: 'top',
+                  textStyle: {
+                    color: '#FFFFFF',
+                    fontSize: 12
+                  },
+                },
+                // color: '#1B7EF2'
+                color: () => {
+                  return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    { offset: 0, color: '#48E5E5' },
+                    { offset: 1, color: 'rgba(72,228,229,0.30)' },
+                  ]);
+                }
+              }
+            },
+          },
+        ]
+      },
+      echartObj2: {
+        grid: {
+          show: false,
+          left: '20',
+          top: 20,
+          bottom: '20',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'value',
+          axisLabel: {//x轴文字的配置
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 10,
+            },
+          },
+          splitLine:{
+            show:false
+          }
+        },
+        yAxis: {
+          type: 'category',
+          splitLine:{
+            show:false
+          },
+          axisLabel: {//y轴文字的配置
+            textStyle: {
+              color: "#fff",
+            },
+          },
+          data: ['水煮鱼','麻婆豆腐','锅包肉','糖醋排骨','红烧鱼','切丁肉末','清炒油麦菜', '蒜蓉娃娃菜','青椒肉丝','西红柿鸡蛋',]
+        },
+        series: [
+          {
+            data: [130,60,40,130,100,160,180,190,260,300],
+            type: 'bar',
+            itemStyle:{
+              normal: {
+                color: (param)=>{
+                  if(param.dataIndex % 2 ==0){
+                    return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+                      { offset: 0, color:'rgba(255,187,0,0.30)' },
+                      { offset: 1, color: '#FFBB00'  },
+                    ]);
+                  }else {
+                    return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+                      { offset: 0, color:'rgba(25,118,226,0.30)' },
+                      { offset: 1, color: '#1B7EF2'  },
+                    ]);
+                  }
+                },
+              }
+            },
+            showBackground: true,
+            backgroundStyle: {
+              color: 'rgba(180, 180, 180, 0.2)'
+            },
+            barWidth: 10,
+
+          }
+        ]
+      },
+      echartObj3: {
+        legend: {
+          show: true,
+          top: 'middle',
+          right: 0,
+          orient: 'vertical',
+          data: ['设备','床单','被罩','垃圾袋','洗衣液','消毒液'],
+          textStyle: {
+            color: '#FFFFFF',
+            lineHeight: 18
+          },
+          formatter:  (name) => {
+            let data = this.echartObj3.series[0].data
+            let total = 0
+            let tarValue
+            for (let i = 0; i < data.length; i++) {
+              total += data[i].value
+              if (data[i].name == name) {
+                tarValue = data[i].value
+              }
+            }
+            //计算出百分比
+            let p = Math.round((tarValue / total) * 100) + '%'
+            return `${name}${p}`
+          }
+        },
+        color: ['#2B8EF3','#48E5E5','#3D7DFA','#68A400','#F5B12D','#D599FD'],
+        series: [
+          {
+            name: 'Access From',
+            type: 'pie',
+            radius: [60, 90],
+            top: 'middle',
+            left: -50,
+            avoidLabelOverlap: false,
+            label: {
+              show: 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: '消毒液' },
+            ]
+          }
+        ]
+      },
+      echartObj4: {
+        legend: {
+          show: true,
+          bottom: 10,
+          data: ['在库(个)','出库(个)'],
+          itemHeight: 8, // 图例高度
+          itemWidth: 15, // 图例高度
+          textStyle: {
+            color: '#FFFFFF',
+            lineHeight: 10,
+            fontSize: 10,
+          },
+        },
+        color: ['#2B8EF3','#F5B12D'],
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        xAxis: {
+          type: 'category',
+          axisLabel: {//x轴文字的配置
+            show: true,
+            interval: 0, // 强制文字全部显示
+            textStyle: {
+              color: "#fff",
+              fontSize: 10,
+            }
+          },
+          data: ['设备','床单','被罩','垃圾袋','洗衣液','消毒液'],
+        },
+        yAxis: {
+          type: 'value',
+          axisLabel: {//y轴文字的配置
+            textStyle: {
+              color: "#fff",
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              type: 'dashed',
+              color: ['#1F7DAF']
+            }
+          },
+        },
+        series: [
+          {
+            name: '在库(个)',
+            data: [3000,900,2300,5500,4500,4000],
+            type: 'bar',
+            stack: 'Ad',
+            barWidth: 18,
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                  position: 'top',
+                  textStyle: {
+                    color: '#FFFFFF',
+                    fontSize: 10
+                  },
+                },
+                // color: '#1B7EF2'
+                color: () => {
+                  return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    { offset: 0, color: '#1976E2' },
+                    { offset: 1, color: 'rgba(25,118,226,0.30)' },
+                  ]);
+                },
+              }
+            },
+          },
+          {
+            name: '出库(个)',
+            data: [1000,5000,5500,12000,2500,2000],
+            type: 'bar',
+            stack: 'Ad',
+            barWidth: 18,
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                  position: 'top',
+                  textStyle: {
+                    color: '#FFFFFF',
+                    fontSize: 10
+                  },
+                },
+                // color: '#1B7EF2'
+                color: () => {
+                  return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    { offset: 0, color: '#FFBB00' },
+                    { offset: 1, color: '#FF7B00' },
+                  ]);
+                },
+              }
+            },
+          }
+        ]
+      },
+      echartObj5: {
+        legend: {
+          show: true,
+          top: 'middle',
+          right: 0,
+          orient: 'vertical',
+          data: ['已处理','处理中','未处理'],
+          textStyle: {
+            color: '#FFFFFF',
+            lineHeight: 18
+          },
+          formatter:  (name) => {
+            let data = this.echartObj5.series[0].data
+            let total = 0
+            let tarValue
+            for (let i = 0; i < data.length; i++) {
+              total += data[i].value
+              if (data[i].name == name) {
+                tarValue = data[i].value
+              }
+            }
+            //计算出百分比
+            let p = Math.round((tarValue / total) * 100) + '%'
+            return `${name}${p}`
+          }
+        },
+        color: ['#3D7DFA','#48E5E5','#F5B12D'],
+        series: [
+          {
+            name: 'Access From',
+            type: 'pie',
+            radius: [60, 90],
+            top: 'middle',
+            left: -50,
+            avoidLabelOverlap: false,
+            label: {
+              show: false,
+              position: 'center'
+            },
+            emphasis: {
+              label: {
+                show: false,
+                fontSize: 20,
+              }
+            },
+            labelLine: {
+              show: false
+            },
+            data: [
+              { value: 35, name: '已处理' },
+              { value: 35, name: '处理中' },
+              { value: 30, name: '未处理' },
+            ]
+          }
+        ]
+      },
+      echartObj6: {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        xAxis: {
+          type: 'category',
+          axisLabel: {//x轴文字的配置
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 10,
+            }
+          },
+          data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
+        },
+        yAxis: {
+          type: 'value',
+          axisLabel: {//y轴文字的配置
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.64)",
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              type: 'dashed',
+              color: ['#1F7DAF']
+            }
+          },
+        },
+        series: [
+          {
+            data: [
+              {name: '1月', value: 10 },
+              {name: '2月', value: 12 },
+              {name: '3月', value: 8 },
+              {name: '4月', value: 14 },
+              {name: '5月', value: 13 },
+              {name: '6月', value: 8 },
+              {name: '7月', value: 13 },
+              {name: '8月', value: 25 },
+              {name: '9月', value: 20 },
+              {name: '10月', value: 13 },
+              {name: '11月', value: 9 },
+              {name: '12月', value: 5 },
+
+            ],
+            type: 'bar',
+            barWidth: 20,
+            barGap:'100%',
+            itemStyle: this.setSeriesItemStyle('lan'),
+          },
+        ]
+      },
+      echartObj7: {
+        legend: {
+          show: true,
+          bottom: 10,
+          data: ['用电量(度)','用水量(吨)','用气量(m²)'],
+          textStyle: {
+            color: '#FFFFFF',
+            lineHeight: 10
+          },
+        },
+        color: ['#2B8EF3','#F5B12D','#48E5E5'],
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        xAxis: {
+          type: 'category',
+          axisLabel: {//x轴文字的配置
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 10,
+            }
+          },
+          data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
+        },
+        yAxis: {
+          type: 'value',
+          axisLabel: {//y轴文字的配置
+            textStyle: {
+              color: "#fff",
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              type: 'dashed',
+              color: ['#1F7DAF']
+            }
+          },
+        },
+        series: [
+          {
+            name: '用电量(度)',
+            data: [
+              {name: '用电量(度)', value: 1500},
+              {name: '用电量(度)', value: 2400},
+              {name: '用电量(度)', value: 2000},
+              {name: '用电量(度)', value: 2300},
+              {name: '用电量(度)', value: 2450},
+              {name: '用电量(度)', value: 1450},
+              {name: '用电量(度)', value: 1000},
+              {name: '用电量(度)', value: 2500},
+              {name: '用电量(度)', value: 1980},
+              {name: '用电量(度)', value: 2500},
+              {name: '用电量(度)', value: 2300},
+              {name: '用电量(度)', value: 1600},
+            ],
+            type: 'bar',
+            barWidth: 10,
+            barGap:0.5,
+            itemStyle: {
+              normal: {
+                label: {
+                  show: true,
+                  position: 'top',
+                  textStyle: {
+                    color: '#FFFFFF',
+                    fontSize: 10
+                  },
+                },
+                // color: '#1B7EF2'
+                color: () => {
+                  return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    { offset: 0, color: '#1976E2' },
+                    { offset: 1, color: 'rgba(25,118,226,0.30)' },
+                  ]);
+                },
+              }
+            },
+          },
+          {
+            name: '用水量(吨)',
+            data: [
+              {name: '用水量(吨)', value: 2200} ,
+              {name: '用水量(吨)', value: 1500},
+              {name: '用水量(吨)', value: 800},
+              {name: '用水量(吨)', value: 1500},
+              {name: '用水量(吨)', value: 1900},
+              {name: '用水量(吨)', value: 2300},
+              {name: '用水量(吨)', value: 1500},
+              {name: '用水量(吨)', value: 1500},
+              {name: '用水量(吨)', value: 1490},
+              {name: '用水量(吨)', value: 1490},
+              {name: '用水量(吨)', value: 1500},
+              {name: '用水量(吨)', value: 2300},
+            ],
+            type: 'bar',
+            barGap:0.5,
+            barWidth: 10,
+            itemStyle: {
+              normal: {
+                label: {
+                  show: true,
+                  position: 'top',
+                  textStyle: {
+                    color: '#FFFFFF',
+                    fontSize: 10
+                  },
+                },
+                // color: '#1B7EF2'
+                color: () => {
+                  return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    { offset: 0, color: '#FF7B00' },
+                    { offset: 1, color: 'rgba(255,123,0,0.30)' },
+                  ]);
+                },
+              }
+            },
+          },
+          {
+            name: '用气量(m²)',
+            data: [
+              {name: '用气量(m²)', value: 1100} ,
+              {name: '用气量(m²)', value: 1150},
+              {name: '用气量(m²)', value: 1200},
+              {name: '用气量(m²)', value: 1100},
+              {name: '用气量(m²)', value: 700},
+              {name: '用气量(m²)', value: 1100},
+              {name: '用气量(m²)', value: 2400},
+              {name: '用气量(m²)', value: 1200},
+              {name: '用气量(m²)', value: 1250},
+              {name: '用气量(m²)', value: 900},
+              {name: '用气量(m²)', value: 1200},
+              {name: '用气量(m²)', value: 1150}
+            ],
+            type: 'bar',
+            barGap:0.5,
+            barWidth: 10,
+            //同一系列的柱间距离
+            itemStyle: {
+              normal: {
+                label: {
+                  show: true,
+                  position: 'top',
+                  textStyle: {
+                    color: '#FFFFFF',
+                    fontSize: 12
+                  },
+                },
+                // color: '#1B7EF2'
+                color: () => {
+                  return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    { offset: 0, color: '#48E5E5' },
+                    { offset: 1, color: 'rgba(72,228,229,0.30)' },
+                  ]);
+                }
+              }
+            },
+          },
+        ]
+      },
+      echartObj8: {
+        radar: {
+          indicator: [
+            { name: '口腔护理', max: 25,},
+            { name: '食物护理', max: 50, axisLabel:{show:false}},
+            { name: '修建', max: 25,axisLabel:{show:false} },
+            { name: '清洗', max: 25,axisLabel:{show:false} },
+            { name: '按摩', max: 25,axisLabel:{show:false}},
+          ],
+          radius: '65%', // 坐标轴半径占可显示区域的比例
+          axisLine: { // 坐标轴样式
+            lineStyle: {
+              color: '#BBBBBB',
+              type: 'solid',
+              width: 1
+            }
+          },
+          axisTick: { // 氪度线样式
+            lineStyle: {
+            },
+          },
+          axisLabel: {// 是否展示坐标数字
+            show: true
+          },
+          splitArea: { // 坐标轴分隔区显示颜色:默认是一深一浅的间隔颜色，这里我们设置间隔之间是空白
+            areaStyle: {
+              opacity: 0.5,
+              color: ['#032750','rgba(25, 118, 226, 0.2)'],
+            }
+          },
+          splitLine: { // 分割线样式
+            lineStyle: {
+              color: 'rgba(25, 118, 226, 0.2)',
+              type: 'solid',
+              width: 1
+            }
+          },
+          axisName: { // 指示器样式
+            color: '#FFFFFF',
+            fontSize: 16
+          },
+        },
+        series: [
+          {
+            type: 'radar',
+            data: [
+              {
+                value: [12, 25, 3, 12, 20],
+                name: 'Allocated Budget'
+              },
+            ],
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(         // 设置渐变色
+                  0, 0, 0, 1,
+                  [
+                    { offset: 0, color: 'rgba(245,177,45,0.73)' },
+                    { offset: 1, color: 'rgba(245,177,45,0.17)' }
+                  ]
+              )
+            },
+            areaStyle: {// 雷达图辐射区域的样式
+              color: new echarts.graphic.LinearGradient(
+                  0, 0, 0, 1,
+                  [
+                    { offset: 0, color: 'rgba(245,177,45,0.73)' },
+                    { offset: 1, color: 'rgba(245,177,45,0.17)' }
+                  ]
+              )
+            },
+          }
+        ]
+      },
+
+    }
+  },
+  created() {
+    this.init();
+  },
+  components: {
+    Echarts,
+  },
+  methods: {
+    init() {
+      this.getData();
+    },
+    search() {
+      this.init();
+    },
+    getData() {
+    },
+    setSeriesItemStyle(color, obj={}){
+      let colors = {
+        qing: ['#48E5E5', 'rgba(72,228,229,0.30)'],
+        lan: ['#2B8EF3', 'rgba(25,118,226,0.30)'],
+        // huang: ['#F5B12D', 'rgba(255,123,0,0.30)'],
+        huang: ['#FF7B00', 'rgba(255,123,0,0.30)'],
+        lv: ['#07F090', 'rgba(60,212,149,0.28)'],
+        zi: ['#9B64D3', 'rgba(155,100,211,0.24)'],
+      }
+      return {
+        normal: {
+          label: {
+            show: true,
+            position: 'top',
+            textStyle: {
+              color: '#FFFFFF',
+              fontSize: 12
+            },
+          },
+          color: () => {
+            return new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              { offset: 0, color: colors[color][0] },
+              { offset: 1, color: colors[color][1] },
+            ]);
+          },
+          ...obj,
+        }
+      }
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+/deep/ .ant-progress-circle .ant-progress-text {
+  color: #FFFFFF;
+  font-size: 20px;
+}
+/deep/ .ant-progress-circle-trail{
+  stroke:#334D60 !important;
+}
+.main_box{
+  padding: 0 2rem;
+  > div{
+    padding: 0;
+  }
+  img{
+    max-width: 100%;
+  }
+  .home_center {
+    width: 49%;
+    padding: 0 10px;
+    .inner_box{
+      margin-top: 1%;
+    }
+    .center-left-title{
+      background-image: url(../../assets/img/comprehensive/center-center1.png);
+    }
+    .header-left-title{
+      background-image: url(../../assets/img/comprehensive/center-top1.png);
+    }
+    .center-left-title,
+    .header-left-title{
+       width: 80%;
+       height: 18%;
+       margin: 2% auto;
+       background-repeat: no-repeat;
+       background-size: 100% 100%;
+     }
+    .center-left,
+    .header-left{
+      width: 38%;
+      height: 80%;
+      border: 1px solid;
+      border-image: linear-gradient(180deg, rgba(31,125,175,0.34) 0%, rgba(31,125,175,0.53) 100%) 1;
+    }
+    .center-right,
+    .header-right{
+      width: 59%;
+      height: 80%;
+    }
+    .center-right-title{
+      background-image: url(../../assets/img/comprehensive/center-center2.png);
+    }
+    .header-right-title{
+      background-image: url(../../assets/img/comprehensive/center-top2.png);
+    }
+    .bottom-right-title{
+      background-image: url(../../assets/img/comprehensive/center-bottom.png);
+    }
+
+    .bottom-right-title,
+    .center-right-title,
+    .header-right-title{
+      width: 80%;
+      height: 16%;
+      margin: 2% auto;
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+    }
+    .inner-header {
+      background-image: url(../../assets/img/comprehensive/top-title.png);
+    }
+    .inner-center{
+      background-image: url(../../assets/img/comprehensive/center-title.png);
+    }
+    .inner-bottom{
+      background-image: url(../../assets/img/comprehensive/bottom-title.png);
+    }
+    .bottom-left{
+      width: 29%;
+      height: 85%;
+      background-image: url(../../assets/img/comprehensive/bottom-left.png);
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+    }
+    .bottom-right{
+      width: 69%;
+      height: 80%;
+    }
+
+    .inner-bottom,
+    .inner-center,
+    .inner-header{
+      width: 80%;
+      margin: auto;
+      height: 60px;
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+    }
+  }
+
+  .inner_box{
+    overflow: hidden;
+  }
+  .home_left,
+  .home_right{
+    width: 24%;
+    .right-top{
+      width: 100%;
+      height: 40%;
+      background-image: url(../../assets/img/comprehensive/right.png);
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+    }
+    .right-center{
+      width: 100%;
+      height: 24%;
+      background-image: url(../../assets/img/comprehensive/right1.png);
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+    }
+    .inner_box{
+      width: 99%;
+      height: 32%;
+      margin-left: 1%;
+    }
+  }
+  .home_left{
+    .left-top1{
+      width: 80%;
+      height: 20%;
+      margin: auto;
+      background-image: url(../../assets/img/comprehensive/left-top1.png);
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+    }
+    .left-top2{
+      width: 80%;
+      height: 40%;
+      margin: auto;
+      background-image: url(../../assets/img/comprehensive/left-top2.png);
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+    }
+  }
+}
+</style>

src/pages/comprehensive/index.vue

@@ -0,0 +1,91 @@
+<template>
+  <div class="main">
+    <!--    <userStatus />-->
+    <!-- <h1>首页</h1> -->
+    <!--    <img class="h1" src="../../assets/img/h1.png" />-->
+    <Header :headerObj="{title:'中科软养老大数据分析平台', index: '5'}"/>
+    <home></home>
+    <!--    <Nav />-->
+    <!--    <img class="b" src="../../assets/img/1.png" alt="" />-->
+  </div>
+</template>
+<script>
+import Header from '@/components/header'
+import home from './home.vue'
+import userStatus from "@/components/userStatus";
+import { Index } from "@/api/index";
+
+export default {
+  name: "index",
+  data: function () {
+    return {
+      param: {
+        startYear: "",
+        endYear: "",
+      },
+    };
+  },
+  created() {
+    this.param = {
+      startYear: "",
+      endYear: "",
+    };
+    // this.init();
+  },
+  components: {
+    Header,
+    home,
+    userStatus,
+  },
+  methods: {
+    init() {
+      this.getData();
+    },
+    getData() {
+      Index(this.param).then((res) => {
+        console.log(res);
+      });
+    },
+  },
+};
+</script>
+<style scoped lang="less">
+.main {
+  height: 100%;
+  background: url(../../assets/img/bigScreen/background.jpg) no-repeat;
+  background-size: 100% 100%;
+  /deep/ .modal,
+  /deep/ .el-icon-close {
+    display: none;
+  }
+  h1 {
+    font-size: 50px;
+    font-weight: 600;
+    padding-top: 50px;
+    text-align: center;
+    -webkit-line-clamp: 2;
+    background-image: -webkit-linear-gradient(bottom, #eefcff, #51dcfe);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+  .h1 {
+    position: absolute;
+    left: 50%;
+    margin-left: -509px;
+  }
+  //.b {
+  //  position: absolute;
+  //  bottom: 0;
+  //  width: 100%;
+  //  // animation:turn 10s linear infinite;
+  //}
+  @keyframes turn {
+    0% {
+      transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
+    }
+    100% {
+      transform: rotateX(0deg) rotateY(180deg) rotateZ(0deg);
+    }
+  }
+}
+</style>

src/router.js

@@ -56,10 +56,11 @@ export default new Router({
         index: 0,
       }
     },
+      //综合管理
     {
-      path: '/05',
+      path: '/comprehensive',
-      name: '05',
+      name: 'comprehensive',
-      component: () => import('@/pages/page/05'),
+      component: () => import('@/pages/comprehensive/index'),
       meta: {
         index: 0,
       }