首页修改

ruoyi-ui/src/views/dashboard/chart/BarChart.vue

@@ -0,0 +1,180 @@
+<template>
+  <div :class="className" :style="{height:height,width:width}" />
+</template>
+
+<script>
+import echarts from 'echarts'
+require('echarts/theme/macarons') // echarts theme
+import resize from '../mixins/resize'
+
+const animationDuration = 6000
+
+export default {
+  mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '300px'
+    },
+    chartData: {
+      type: Object,
+      required: true
+    }
+  },
+  watch: {
+    chartData: {
+      deep: true,
+      handler(val) {
+        this.setOptions(val)
+      }
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$el, 'macarons');
+      this.chart = echarts.init(this.$el, 'macarons')
+      this.setOptions(this.chartData)
+    },
+      setOptions({ y, x ,data } = {}) {
+        console.log(y,x,data,56)
+       this.chart.setOption({
+         tooltip: {
+           trigger: 'axis',
+           axisPointer: { // 坐标轴指示器，坐标轴触发有效
+             type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+           }
+         },
+         // 缩放问题
+          dataZoom: [
+              {
+                bottom:0,
+                  type: "slider",
+                  show: true,
+                  start: 0,
+                  end: 70,
+                  handleSize: 30,
+                  zoomOnMouseWheel: true,
+                },
+                {
+                  type: "inside",
+                  start: 0,
+                  end: 10,
+                }
+        ],
+         grid: {
+           top: 30,
+           left: '2%',
+           right: '2%',
+           bottom: 20,
+           containLabel: true
+         },
+         xAxis: [{
+           type: 'category',
+           data: ['进口冷链食品存储、 加工类企业一线人员', '市场监管系统一线 人员（直接接触）', '市场监管系统非一线人员', '入境人员隔离点工作专班人员', '境内隔离点专班工作人员', '阳性感染着、密切 接触者等现场流调、 转运的有关工作人员', '定点医疗机构的医 护、保洁、转运司 机等工作人员',
+             '普通医疗机构中发 热门诊的医护、保洁等工作人员','普通医疗机构除发 热门诊以外的工作人员','发热门诊患者','新住院患者、 陪护人员','医疗废弃物处理企 业的从事收运、处 理等工作人员','国际邮政快递包裹 运输、分拣装卸、 派送等二线工作人 员及快递服务点从 业人员','国内邮政快递包裹 运输、分拣装卸、 派送等一线工作人 员及快递服务点从 业人员',
+           ],
+           splitLine:{
+             show:true
+           },
+            axisLine: {
+                 lineStyle: {
+                   color: '#9BA2B0', //x轴的颜色
+                    width:'1'
+                 },
+             },
+            axisLabel: {
+               interval: 0, // 设置数据间隔
+               formatter:function(value){
+                   var str = "";
+                       var num = 8; //每行显示字数
+                       var valLength = value.length; //该项x轴字数
+                       var rowNum = Math.ceil(valLength / num); // 行数
+                       if(rowNum > 1)
+                       {
+                           for(var i = 0; i < rowNum; i++)
+                           {
+                               var temp = "";
+                               var start = i * num;
+                               var end = start + num;
+
+                               temp = value.substring(start, end) + "\n";
+                               str += temp;
+                           }
+
+                           return str;
+                       }
+                       else
+                       {
+                           return value;
+                       }
+               },
+           },
+         }],
+         yAxis: [{
+           type: 'value',
+           axisTick: {
+             show: false
+           },
+            axisLine: {
+                               lineStyle: {
+                                    type: 'solid',
+                                     color: '#9BA2B0',
+                                   width:'1'
+                               }
+                              }
+         }],
+         series: [
+          {
+						type: "bar",
+						data: [70, 150, 110, 210, 200,70, 150, 110, 210, 200,70, 150, 110, 210, 200,],
+						barWidth: '15',
+						itemStyle: {
+              //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
+              barBorderRadius:[10, 10, 10, 10],
+							color: {
+                x: 0,  //右
+                y: 1,  //下
+                x2: 0,  //左
+                y2: 0,  //上
+                colorStops: [{
+                		offset: 0, // 颜色的开始位置
+                		color: 'rgba(2, 197, 29, 1)' // 0% 处的颜色
+                	},
+                	{
+                		offset: 1, // 颜色的结束位置
+                		color: 'rgba(29, 233, 182, 1)' // 100% 处的颜色
+                	}
+                ]
+							},
+						},}
+          ]
+       })
+      }
+  }
+}
+</script>

ruoyi-ui/src/views/dashboard/chart/LineChart.vue

@@ -0,0 +1,176 @@
+<template>
+  <div :class="className" :style="{height:height,width:width}" />
+</template>
+
+<script>
+  import echarts from 'echarts'
+  require('echarts/theme/macarons') // echarts theme
+  import resize from '../mixins/resize'
+
+  export default {
+    mixins: [resize],
+    props: {
+      className: {
+        type: String,
+        default: 'chart'
+      },
+      width: {
+        type: String,
+        default: '100%'
+      },
+      height: {
+        type: String,
+        default: '350px'
+      },
+      autoResize: {
+        type: Boolean,
+        default: true
+      },
+      chartData: {
+        type: Object,
+        required: true
+      }
+    },
+    data() {
+      return {
+        chart: null
+      }
+    },
+    watch: {
+      chartData: {
+        deep: true,
+        handler(val) {
+          this.setOptions(val)
+        }
+      }
+    },
+    mounted() {
+      this.$nextTick(() => {
+        this.initChart()
+      })
+    },
+    beforeDestroy() {
+      if (!this.chart) {
+        return
+      }
+      this.chart.dispose()
+      this.chart = null
+    },
+    methods: {
+      initChart() {
+        this.chart = echarts.init(this.$el, 'macarons')
+        this.setOptions(this.chartData)
+
+      },
+      setOptions({
+        czjs,
+        czxz,
+        hjjs,
+        hjxz,
+        time
+      } = {}) {
+        // console.log(x,y[0].data,45)
+        this.chart.setOption({
+          xAxis: {
+            type: 'category',
+            data: ['进口冷链食品相关', '集中隔离场所工作', '现场疫情处置工作', '定点医疗机构', '普通医疗机构 （工作人员）', '普通医疗机构 （患者、陪护）', '医废收运与处置',
+              '快递、外卖类'
+            ],
+            splitLine:{
+              show:true
+            },
+             axisLine: {
+                  lineStyle: {
+                    color: '#9BA2B0', //x轴的颜色
+                     width:'1'
+                  },
+              },
+             axisLabel: {
+                interval: 0, // 设置数据间隔
+                formatter:function(value){
+                    var str = "";
+                        var num = 8; //每行显示字数
+                        var valLength = value.length; //该项x轴字数
+                        var rowNum = Math.ceil(valLength / num); // 行数
+                        if(rowNum > 1)
+                        {
+                            for(var i = 0; i < rowNum; i++)
+                            {
+                                var temp = "";
+                                var start = i * num;
+                                var end = start + num;
+
+                                temp = value.substring(start, end) + "\n";
+                                str += temp;
+                            }
+
+                            return str;
+                        }
+                        else
+                        {
+                            return value;
+                        }
+                },
+            },
+            boundaryGap: false,
+            axisTick: {
+              show: false,
+              alignWithLabel: true
+            }
+          },
+          grid: {
+            left: 25,
+            right: 50,
+            bottom: 10,
+            top: 30,
+            containLabel: true
+          },
+          tooltip: {
+           type: 'line',
+            lineStyle: {
+                color: '#dddddd',
+                width: 1,
+                type: 'dashed'
+            },
+          },
+          yAxis: {
+            axisTick: {
+              show: false
+            },
+            axisLine: {
+                 lineStyle: {
+                   color: '#9BA2B0', //x轴的颜色
+                    width:'1'
+                 },
+             },
+          },
+          legend: {
+            data: ''
+          },
+          series: [{
+            data: [100, 145, 160, 150, 163, 180, 170, 200, 230],
+            type: 'line',
+            areaStyle: {
+              color: {
+                //线性渐变
+                type: 'linear',
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [{
+                  offset: 0,
+                  color: 'rgba(1, 219, 127, 1)', // 0% 处的颜色
+                }, {
+                  offset: 0.6,
+                  color: 'rgba(1, 219, 127,0)', // 100% 处的颜色
+                }],
+                global: false, // 缺省为 false
+              },
+            },
+          }]
+        })
+      }
+    }
+  }
+</script>

ruoyi-ui/src/views/dashboard/chart/PieChart.vue

@@ -0,0 +1,125 @@
+<template>
+  <div :class="className" :style="{height:height,width:width}" />
+</template>
+
+<script>
+import echarts from 'echarts'
+require('echarts/theme/macarons') // echarts theme
+import resize from '../mixins/resize'
+
+export default {
+  mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '200px'
+    },
+    chartData: {
+      type: Array,
+      required: true
+    }
+  },
+  watch: {
+    chartData: {
+      deep: true,
+      handler(val) {
+        this.setOptions(val)
+      }
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$el, 'macarons');
+      this.chart = echarts.init(this.$el, 'macarons')
+      this.setOptions(this.chartData)
+    },
+    setOptions(data) {
+      this.chart.setOption({
+        graphic:{
+          type: 'text',
+          left: 'center',
+          top: 'center',
+          style:{
+            text:'本周与上周\n核酸人数',
+            textAlign:"center",
+            fill:"#333",
+            fontSize:14,
+          },
+        },
+         tooltip: {
+            trigger: 'item',
+          },
+
+          color:['#18A6E2', '#02DB80'],
+          legend: {
+            show:false,
+            // bottom: 10,
+            // left: 'center',
+          },
+          series: [
+            {
+              name: '',
+              type: 'pie',
+              radius: ['40%', '70%'],
+              avoidLabelOverlap: false,
+              center: ['50%', '50%'],
+              itemStyle: {
+                  borderRadius: 10,
+                  borderColor: '#fff',
+                  borderWidth: 2
+
+              },
+              label: {
+                show: false,
+                position: 'center'
+              },
+              // emphasis: {
+              //   label: {
+              //     show: true,
+              //     fontSize: '18',
+              //     fontWeight: '400',
+              //     color:"#333"
+              //   }
+              // },
+              labelLine: {
+                show: false
+              },
+              // data:data,
+              data: [
+                { value: 6, name: '上周核酸人数' },
+                { value: 4, name: '本周核酸人数' }
+
+              ]
+            }
+          ]
+      })
+    }
+
+  }
+}
+</script>

ruoyi-ui/src/views/index.vue

@@ -7,49 +7,91 @@
       <p>{{ '\xa0\xa0' }}|{{ '\xa0\xa0' }}</p>
       <p @click="day(3)" :class="[dayList == 3 ? 'heade_cod' : '']">月</p>
     </div> -->
-    <el-row style=" margin-top: 20px;">
-      <el-col :xs="24" :sm="24">
-        <el-row>
-          <div class="njues">
-            <!-- <keep-alive :include="cachedViews">
-                <router-view :key="key" /> -->
-                <div style=" text-align: center; " class="hedse_radt" @click="wbhde">
-                  <div class="hedse_radtone">
-                    <p>五保户</p>
-                    <p>6<span>人</span></p>
+    <el-row style=" margin-top: 20px;" :gutter="30">
+     <!-- <el-col :xs="24" :sm="24">
+        <el-row> -->
+          <!-- <div class="njues"> -->
+            <el-col :xs="24" :sm="14" >
+              <el-row type="flex" justify="space-between" :gutter="30">
+                <el-col>
+                  <div class="nchead ncheadl">
+                    <div class="ncheadtit">本月核酸总人数</div>
+                    <div class="ncheadtxt">13654</div>
+                  </div>
+                  </el-col>
+                  <el-col>
+                  <div class="nchead ncheadc">
+                    <div class="ncheadtit">本周核酸总人数</div>
+                    <div class="ncheadtxt">4550</div>
+                  </div>
+                </el-col>
+              </el-row>
+
+            </el-col>
+            <!-- 饼图 -->
+            <el-col :xs="24" :sm="10">
+              <div class="ncheadr">
+                <div class="chart_tit">
+                  <div style="padding-left: 30px;">
+                    <div class="chart_titl">较上周核酸人数比率</div>
+                  </div>
+                </div>
+                <div class="nche_chart">
+                  <div class="nche_chartl">
+                    <pie-chart :chart-data="panelChartDatayuanh" />
+                  </div>
+                  <div class="nche_chartr">
+                    <div class="nche_chartrr">
+                      <div class="nche_chartra coca">本周核酸人数</div>
+                      <div class="nche_chartrb">4550</div>
+                      <div class="nche_chartra">占比</div>
+                      <div class="nche_chartrb coa" style="margin-bottom: 0;">47%</div>
+                    </div>
+                    <div class="nche_chartrr">
+                      <div class="nche_chartra cocb">上周核酸人数</div>
+                      <div class="nche_chartrb">5137</div>
+                      <div class="nche_chartra" >占比</div>
+                      <div class="nche_chartrb cob" style="margin-bottom: 0;">53%</div>
+                    </div>
                   </div>
                 </div>
-              <!-- </keep-alive> -->
-            <div style=" text-align: center; " class="hedse_radts hedse_radt" @click="dbhde">
-              <div class="hedse_radtone">
-                <p>低保户</p>
-                <p>3<span>人</span></p>
-              </div>
-            </div>
-            <div style=" text-align: center; " class="hedse_radtss hedse_radt" @click="pkde">
-              <div class="hedse_radtone">
-                <p>贫困户</p>
-                <p>5<span>人</span></p>
-              </div>
-            </div>
-            <div style=" text-align: center; " class="hedse_radt hedse_radtsss" @click="dyde">
-              <div class="hedse_radtone">
-                <p>党员</p>
-                <p>2<span>人</span></p>
-              </div>
-            </div>
-            <div style=" text-align: center; " class="hedse_radt hedse_radtssss" @click="twjrde">
-              <div class="hedse_radtone">
-                <p>退伍军人</p>
-                <p>1<span>人</span></p>
               </div>
-            </div>
+            </el-col>
 
+          <!-- </div> -->
+       <!-- </el-row>
+      </el-col> -->
+    </el-row>
+    <!-- 新的 -->
+    <!-- 折线图数据 -->
+    <el-row :gutter="30"  style="margin-left: 0; margin-right: 0;">
+      <el-col  style="padding-left: 0;padding-right: 0;">
+        <div class="chart-wrapper dp_zhud" style="  padding: 30px; ">
+          <div class="chart_tit">
+            <div class="chart_titl">本周职业类别核酸情况统计</div>
+            <div class="chart_titr">单位：人</div>
           </div>
-        </el-row>
+          <!-- <p class="dp_zhudtitle">本周职业类别核酸情况统计 </p> -->
+          <line-chart :chart-data="newlineChartData" />
+        </div>
       </el-col>
+
     </el-row>
-   <el-row :gutter="30"  style="margin-left: 0; margin-right: 0;">
+    <!-- 柱状图数据 -->
+    <el-row :gutter="30"  style="margin-left: 0; margin-right: 0;">
+      <el-col  style="padding-left: 0;padding-right: 0;">
+        <div class="chart-wrapper dp_zhud" style="  padding: 30px; ">
+         <div class="chart_tit">
+           <div class="chart_titl">本周重点人群分类核酸人数统计</div>
+           <div class="chart_titr">单位：人</div>
+         </div>
+          <bar-chart :chart-data="newlChartDatazhuzh" />
+        </div>
+      </el-col>
+
+    </el-row>
+
+<!-- <el-row :gutter="30"  style="margin-left: 0; margin-right: 0;">
      <el-col :xs="24" :sm="14" style="padding-left: 0;">
        <div class="chart-wrapper dp_zhud" style="  padding: 30px; ">
          <p class="dp_zhudtitle">人员类型统计柱状图 </p>
@@ -62,7 +104,7 @@
          <pie-chart :chart-data="panelChartDatayuanh" />
        </div>
      </el-col>
-   </el-row>
+   </el-row> -->
    <!-- <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <line-chart :chart-data="lineChartData"  v-if="nhye"/></el-row> -->
 
@@ -70,22 +112,23 @@
 
 <!-- v-if="panelChartDatas.dqdw == '潜山市'" -->
     <div class="tabsty" >
-      <div class="tabbuut">
-        <p>各乡镇人口信息表</p>
-        <!-- <el-button  size="small" @click="handleExport" type="primary">导出</el-button> -->
-      </div>
+     <div class="chart_tit">
+       <div class="chart_titl">本周重点人群核酸详情</div>
+       <div class="chart_titra">查看更多 >></div>
+     </div>
+     <div class="chart_titrb">2022年08月08日 - 14日</div>
       <!-- panelChartDatas.townDatas -->
       <!-- tableData -->
       <el-table v-loading="loading" :data="tableData"
         style="width: 100%;"  stripe  height="280" :show-overflow-tooltip="true">
-        <el-table-column prop="zhen" label="乡镇"  align="center"/>
-        <el-table-column prop="cun" label="村"  align="center" width="180"/>
+        <el-table-column prop="name" label="姓名"  align="center"/>
+        <el-table-column prop="card" label="身份证号"  align="center" width="180"/>
         <!-- <el-table-column prop="zu" label="组"  align="center"/> -->
-        <el-table-column prop="czzrs" label="五保户人口"  align="center"/>
-        <el-table-column prop="hjzrs" label="低保户人口"  align="center"/>
-        <el-table-column prop="hjxz" label="贫困户人口"  align="center"/>
-        <el-table-column prop="czxz" label="党员人口"  align="center"/>
-        <el-table-column prop="hjjs" label="退伍军人人口"  align="center"/>
+        <el-table-column prop="rphone" label="联系电话(人口信息登记)"  align="center"/>
+        <el-table-column prop="hphone" label="联系电话(核酸检测登记)"  align="center"/>
+        <el-table-column prop="cjsj" label="采集时间"  align="center"/>
+        <el-table-column prop="cjdd" label="采集地点"  align="center"/>
+        <el-table-column prop="shsj" label="审核时间"  align="center"/>
 
 
       </el-table>
@@ -121,10 +164,17 @@ import PanelGroupone from './dashboard/PanelGroupone';
 import PanelGrouptwo from './dashboard/PanelGrouptwo';
 import PanelGroupther from './dashboard/PanelGroupther';
 import PanelGroupfour from './dashboard/PanelGroupfour';
-import LineChart from './dashboard/LineChart';
+// import LineChart from './dashboard/LineChart';
 import RaddarChart from './dashboard/RaddarChart';
-import PieChart from './dashboard/PieChart';
-import BarChart from './dashboard/BarChart';
+// import PieChart from './dashboard/PieChart';
+// import BarChart from './dashboard/BarChart';
+
+
+// 新版
+import BarChart from './dashboard/chart/BarChart';
+import LineChart from './dashboard/chart/LineChart';
+import PieChart from './dashboard/chart/PieChart';
+// 新版
 const lineChartData = {
   newVisitis: {
     expectedData: [80, 120, 111, 104, 105, 100, 105],
@@ -160,6 +210,10 @@ export default {
   },
   data() {
     return {
+      newlineChartData:{},
+      newlChartDatazhuzh:{},
+
+
       lineChartData: {},
       dayList: 1, //判断天周月
       taye: 'newVisitis', //根据点击天周月变换，折线图数据变换
@@ -168,23 +222,14 @@ export default {
       panelChartDataleid:{},
       panelChartDatayuanh:[],
       tableData: [
-         {hjzrs: 0, hjxz: 0, hjbfb: "0.00%", czxz: 0, czzrs: 0, zu: 388, hjjs: 0, czbfb: "4.02%", cun: 14,zhen: "槎水镇"},
-        {hjzrs: 0, hjxz: 0, hjbfb: "0.00%", czxz: 0, czzrs: 0, zu: 203, hjjs: 0, czbfb: "2.66%", cun: 6,zhen: "痘姆乡"},
-        {hjzrs: 0, hjxz: 0, hjbfb: "0.00%", czxz: 0, czzrs: 0, zu: 355, hjjs: 0, czbfb: "2.68%", cun: 14,zhen: "官庄镇"},
-        {hjzrs: 3, hjxz: 5, hjbfb: "0.00%", czxz: 2, czzrs: 6, zu: 175, hjjs: 1, czbfb: "2.05%", cun: 6,zhen: "黄柏镇"},
-        {hjzrs: 0, hjxz: 0, hjbfb: "0.00%", czxz: 0, czzrs: 0, zu: 171, hjjs: 0, czbfb: "2.16%", cun: 7,zhen: "黄泥镇"},
-        {hjzrs: 0, hjxz: 0, hjbfb: "0.00%", czxz: 0, czzrs: 0, zu: 476, hjjs: 0, czbfb: "6.77%", cun: 14,zhen: "黄铺镇"},
-        {hjzrs: 0, hjxz: 0, hjbfb: "0.00%", czxz: 0, czzrs: 0, zu: 226, hjjs: 0, czbfb: "2.31%", cun: 9,zhen: "龙潭乡"},
-        {hjzrs: 0, hjxz: 0, hjbfb: "0.00%", czxz: 0, czzrs: 0, zu: 497, hjjs: 0, czbfb: "22.50%", cun: 19,zhen: "梅城镇"},
-        {hjzrs: 0, hjxz: 0, hjbfb: "0.00%", czxz: 0, czzrs: 0, zu: 368, hjjs: 0, czbfb: "4.82%", cun: 14,zhen: "水吼镇"},
-        {hjzrs: 0, hjxz: 0, hjbfb: "0.00%", czxz: 0, czzrs: 0, zu: 266, hjjs: 0, czbfb: "2.44%", cun: 11,zhen: "塔畈乡"},
-        {hjzrs: 0, hjxz: 0, hjbfb: "0.00%", czxz: 0, czzrs: 0, zu: 115, hjjs: 0, czbfb: "2.47%", cun: 6,zhen: "天柱山镇"},
-        {hjzrs: 0, hjxz: 0, hjbfb: "0.00%", czxz: 0, czzrs: 0, zu: 415, hjjs: 0, czbfb: "6.86%", cun: 17,zhen: "王河镇"},
-        {hjzrs: 0, hjxz: 0, hjbfb: "0.00%", czxz: 0, czzrs: 0, zu: 119, hjjs: 0, czbfb: "1.90%", cun: 6,zhen: "五庙乡"},
-        {hjzrs: 0, hjxz: 0, hjbfb: "0.00%", czxz: 0, czzrs: 0, zu: 217, hjjs: 0, czbfb: "2.32%", cun: 6,zhen: "油坝乡"},
-        {hjzrs: 0, hjxz: 0, hjbfb: "0.00%", czxz: 0, czzrs: 0, zu: 522, hjjs: 0, czbfb: "6.19%", cun: 14,zhen: "余井镇"},
-        {hjzrs: 0, hjxz: 0, hjbfb: "0.00%", czxz: 0, czzrs: 0, zu: 639, hjjs: 0, czbfb: "10.34%", cun: 18,zhen: "源潭镇"},
-        {hjzrs: 0, hjxz: 0, hjbfb: "0.00%", czxz: 0, czzrs: 0, zu: 102, hjjs: 0, czbfb: "2.72%", cun: 3,zhen: "开发区"}
+         {name: '王天风', card: '123456789112345631', rphone: "14756055892", hphone: '14756055892', cjsj: '2022-08-08 10:23:56', cjdd: '中医院', shsj: '2022-08-08 19:23:56'},
+         {name: '李铎', card: '123456789112345632', rphone: "14756055892", hphone: '14756055892', cjsj: '2022-08-08 10:23:56', cjdd: '中医院', shsj: '2022-08-08 19:23:56'},
+         {name: '冯毅发', card: '123456789112345632', rphone: "14756055892", hphone: '14756055892', cjsj: '2022-08-08 10:23:56', cjdd: '中医院', shsj: '2022-08-08 19:23:56'},
+         {name: '刘婷婷', card: '123456789112345633', rphone: "14756055892", hphone: '14756055892', cjsj: '2022-08-08 10:23:56', cjdd: '中医院', shsj: '2022-08-08 19:23:56'},
+         {name: '尹菲菲', card: '123456789112345635', rphone: "14756055892", hphone: '14756055892', cjsj: '2022-08-08 10:23:56', cjdd: '中医院', shsj: '2022-08-08 19:23:56'},
+         {name: '马鑫', card: '123456789112345636', rphone: "14756055892", hphone: '14756055892', cjsj: '2022-08-08 10:23:56', cjdd: '中医院', shsj: '2022-08-08 19:23:56'},
+         {name: '吴自力', card: '123456789112345637', rphone: "14756055892", hphone: '14756055892', cjsj: '2022-08-08 10:23:56', cjdd: '中医院', shsj: '2022-08-08 19:23:56'},
+         {name: '林琳', card: '123456789112345638', rphone: "14756055892", hphone: '14756055892', cjsj: '2022-08-08 10:23:56', cjdd: '中医院', shsj: '2022-08-08 19:23:56'},
       ], //表格数据
       // 总条数
       total: 10,
@@ -606,5 +651,101 @@ p {
         font-weight: bold;
         color: #343434;
       }
+
+
+    }
+
+
+
+    // 新布局
+    .nchead{
+      width:100%;
+      height: 270px;
+      padding: 50px 39px;
+      box-sizing: border-box;
+      margin-bottom: 26px;
+      box-shadow: 0px 3px 10px 0px rgba(46,46,46,0.0600);
+      &.ncheadl{
+        background:url("../assets/images/ncbgl.png") no-repeat ;
+        background-size: 100%  100%;
+      }
+      &.ncheadc{
+        background:url("../assets/images/ncbgc.png") no-repeat ;
+        background-size: 100% 100%;
+      }
+      .ncheadtit{font-size: 16px;
+      font-weight: 500;
+      color: #FFFFFF;
+      margin-bottom: 20px;
+      }
+      .ncheadtxt{font-size: 44px;color: #FFFFFF;font-weight: bold;}
+    }
+    .ncheadr{height: 270px;background: #ffffff;box-shadow: 0px 3px 10px 0px rgba(46,46,46,0.0600);border-radius: 6px;padding: 28px 20px 0px 0px;box-sizing: border-box;margin-bottom:26px ;
+    .nche_chart{
+      display: flex;align-items: center;
+      .nche_chartl{flex:1;max-width: 200px;}
+      .nche_chartr{flex: 1;display: flex;min-width: 90px;
+        .nche_chartrr{
+          width: 50%;
+          padding-left: 30px;box-sizing: border-box;
+          .nche_chartra{font-size: 14px;font-weight: bold;
+color: #343434;margin-bottom: 10px;
+          position:relative;
+          line-height: 20px;
+          &.coca::before{
+            width: 14px;
+            height: 14px;
+            position: absolute;left:-24px; content: '';top: 3px;
+            background: #02DB80;
+          }
+          &.cocb::before{
+           width: 14px;
+           height: 14px;
+           position: absolute;left:-24px; content: '';top: 3px;
+            background: #18A6E2;
+          }
+}
+          .nche_chartrb{font-weight: bold;
+color: #343434;font-size: 30px;margin-bottom: 20px;
+        &.coa{color: #01DB80;}
+        &.cob{color: #18A6E2;}
+
+}
+        }
+
+      }
+
+    }
+    }
+    .chart_tit{
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 16px;
+      align-items: center;
+      .chart_titl{
+        font-size: 16px;
+        font-weight: bold;
+        color: #343434;
+        position: relative;
+        &::after{
+          width: 30px;
+          height: 3px;
+          background: #00B385;
+          position: absolute;
+          bottom: -12px;
+          left: 0;
+          content: '';
+        }
+      }
+      .chart_titr{
+        font-size: 15px;
+        color: #343434;
+      }
+      .chart_titra{
+        font-size: 15px;
+        color: #9BA2B0;
+        cursor: pointer;
+      }
     }
+    .chart_titrb{font-size: 14px;color: #9BA2B0;margin-bottom: 26px;}
 </style>