数据统计大屏修改

package-lock.json

@@ -17526,6 +17526,11 @@
         "videojs-hotkeys": "^0.2.20"
       }
     },
+    "vue2-scale-box": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/vue2-scale-box/-/vue2-scale-box-0.1.7.tgz",
+      "integrity": "sha512-mI/eEaBg5+9Op8i7sHBPEWnxRC744xBZnl4lf6yF+2ShhURTunipWz7dMcJ0nhgZ1jK+I4rv2BF1oK+0K7CmlA=="
+    },
     "vuex": {
       "version": "3.6.2",
       "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.6.2.tgz",

package.json

@@ -53,6 +53,7 @@
         "vue-svg-component-runtime": "^1.0.1",
         "vue-ueditor-wrap": "^2.5.6",
         "vue-video-player": "^5.0.2",
+        "vue2-scale-box": "^0.1.7",
         "vuex": "^3.1.1",
         "wangeditor": "^3.1.1"
     },

src/assets/scss/index.scss

@@ -1,6 +1,5 @@
 #index {
   color: #d3d6dd;
-	// color: #0f1325;
   width: 1920px;
   height: 1080px;
   position: absolute;
@@ -40,7 +39,7 @@
       background-repeat: no-repeat;
 
       .title-text {
-        font-size: 24px;
+        font-size: 30px;
         position: absolute;
         bottom: 0;
         left: 50%;
@@ -68,11 +67,11 @@
 
     // 平行四边形
     .react-right {
-      &.react-l-s {
+      /* &.react-l-s {
         text-align: right;
         width: 500px;
-      }
+      } */
-      font-size: 18px;
+      font-size: 24px;
       width: 300px;
       line-height: 50px;
       text-align: center;
@@ -99,7 +98,7 @@
         width: 500px;
         text-align: left;
       }
-      font-size: 18px;
+      font-size: 24px;
       width: 300px;
       height: 50px;
       line-height: 50px;

src/components/echart/bottom/bottomLeftChart/chart.vue

@@ -1,6 +1,5 @@
 <template>
   <div>
-    <!-- 年度开工率 -->
     <Echart
       :options="options"
       id="bottomLeftChart"
@@ -15,50 +14,51 @@ import Echart from '@/common/echart'
 export default {
   data () {
     return {
-      options: {},
+      options: {}
-    };
+    }
   },
   components: {
-    Echart,
+    Echart
   },
   props: {
     cdata: {
       type: Object,
       default: () => ({})
-    },
+    }
   },
   watch: {
     cdata: {
       handler (newData) {
         this.options = {
           tooltip: {
-            trigger: "axis",
+            trigger: 'axis',
-            backgroundColor: "rgba(255,255,255,0.1)",
+            backgroundColor: 'rgba(255,255,255,0.1)',
             axisPointer: {
-              type: "shadow",
+              type: 'shadow',
               label: {
                 show: true,
-                backgroundColor: "#7B7DDC"
+                backgroundColor: '#7B7DDC'
               }
             }
           },
           legend: {
-            data: ["已贯通", "计划贯通", "贯通率"],
+            data: ['集中供养数', '供养总人数', '集中供养率'],
             textStyle: {
-              color: "#B4B4B4"
+              color: '#B4B4B4',
+              fontSize:20
             },
-            top: "0%"
+            top: '0%'
           },
           grid: {
-            x: "8%",
+            x: '8%',
-            width: "88%",
+            width: '88%',
-            y: "4%"
+            y: '4%'
           },
           xAxis: {
             data: newData.category,
             axisLine: {
               lineStyle: {
-                color: "#B4B4B4"
+                color: '#B4B4B4'
               }
             },
             axisTick: {
@@ -70,69 +70,69 @@ export default {
               splitLine: { show: false },
               axisLine: {
                 lineStyle: {
-                  color: "#B4B4B4"
+                  color: '#B4B4B4'
                 }
               },
 
               axisLabel: {
-                formatter: "{value} "
+                formatter: '{value} '
               }
             },
             {
               splitLine: { show: false },
               axisLine: {
                 lineStyle: {
-                  color: "#B4B4B4"
+                  color: '#B4B4B4'
                 }
               },
               axisLabel: {
-                formatter: "{value} "
+                formatter: '{value} '
               }
             }
           ],
           series: [
             {
-              name: "贯通率",
+              name: '集中供养率',
-              type: "line",
+              type: 'line',
               smooth: true,
               showAllSymbol: true,
-              symbol: "emptyCircle",
+              symbol: 'emptyCircle',
               symbolSize: 8,
               yAxisIndex: 1,
               itemStyle: {
                 normal: {
-                  color: "#F02FC2"
+                  color: '#F02FC2'
                 }
               },
               data: newData.rateData
             },
             {
-              name: "已贯通",
+              name: '集中供养数',
-              type: "bar",
+              type: 'bar',
               barWidth: 10,
               itemStyle: {
                 normal: {
                   barBorderRadius: 5,
                   color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                    { offset: 0, color: "#956FD4" },
+                    { offset: 0, color: '#956FD4' },
-                    { offset: 1, color: "#3EACE5" }
+                    { offset: 1, color: '#3EACE5' }
                   ])
                 }
               },
               data: newData.barData
             },
             {
-              name: "计划贯通",
+              name: '供养总人数',
-              type: "bar",
+              type: 'bar',
-              barGap: "-100%",
+              barGap: '-100%',
               barWidth: 10,
               itemStyle: {
                 normal: {
                   barBorderRadius: 5,
                   color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                    { offset: 0, color: "rgba(156,107,211,0.8)" },
+                    { offset: 0, color: 'rgba(156,107,211,0.8)' },
-                    { offset: 0.2, color: "rgba(156,107,211,0.5)" },
+                    { offset: 0.2, color: 'rgba(156,107,211,0.5)' },
-                    { offset: 1, color: "rgba(156,107,211,0.2)" }
+                    { offset: 1, color: 'rgba(156,107,211,0.2)' }
                   ])
                 }
               },
@@ -144,7 +144,7 @@ export default {
       },
       immediate: true,
       deep: true
-    },
+    }
-  },
+  }
 }
 </script>

src/components/echart/bottom/bottomLeftChart/index.vue

@@ -11,130 +11,55 @@ export default {
     return {
       cdata: {
         category: [
-          "市区",
+          '下堡坪村',
-          "万州",
+          '蛟龙寺村',
-          "江北",
+          '九山村',
-          "南岸",
+          '马宗岭村',
-          "北碚",
+          '赵勉河村',
-          "綦南",
+          '秀水村',
-          "长寿",
+          '磨坪村',
-          "永川",
+          '十八湾村'
-          "璧山",
-          "江津",
-          "城口",
-          "大足",
-          "垫江",
-          "丰都",
-          "奉节",
-          "合川",
-          "江津区",
-          "开州",
-          "南川",
-          "彭水",
-          "黔江",
-          "石柱",
-          "铜梁",
-          "潼南",
-          "巫山",
-          "巫溪",
-          "武隆",
-          "秀山",
-          "酉阳",
-          "云阳",
-          "忠县",
-          "川东",
-          "检修"
         ],
         lineData: [
-          18092,
+          15,
-          20728,
+          8,
-          24045,
+          5,
-          28348,
+          9,
-          32808,
+          7,
-          36097,
+          10,
-          39867,
+          9,
-          44715,
+          4
-          48444,
-          50415,
-          56061,
-          62677,
-          59521,
-          67560,
-          18092,
-          20728,
-          24045,
-          28348,
-          32808,
-          36097,
-          39867,
-          44715,
-          48444,
-          50415,
-          36097,
-          39867,
-          44715,
-          48444,
-          50415,
-          50061,
-          32677,
-          49521,
-          32808
         ],
         barData: [
-          4600,
+          13,
-          5000,
+          6,
-          5500,
+          4,
-          6500,
+          7,
-          7500,
+          6,
-          8500,
+          3,
-          9900,
+          7,
-          12500,
+          3
-          14000,
-          21500,
-          23200,
-          24450,
-          25250,
-          33300,
-          4600,
-          5000,
-          5500,
-          6500,
-          7500,
-          8500,
-          9900,
-          22500,
-          14000,
-          21500,
-          8500,
-          9900,
-          12500,
-          14000,
-          21500,
-          23200,
-          24450,
-          25250,
-          7500
         ],
         rateData: []
       }
-    };
+    }
   },
   components: {
-    Chart,
+    Chart
   },
   mounted () {
-    this.setData();
+    this.setData()
   },
   methods: {
     // 根据自己的业务情况修改
     setData () {
-      for (let i = 0; i < this.cdata.barData.length -1; i++) {
+      for (let i = 0; i < this.cdata.barData.length - 1; i++) {
-        let rate = this.cdata.barData[i] / this.cdata.lineData[i];
+        const rate = this.cdata.barData[i] / this.cdata.lineData[i]
-        this.cdata.rateData.push(rate.toFixed(2));
+        this.cdata.rateData.push(rate.toFixed(2))
       }
-    },
     }
-};
+  }
+}
 </script>
 
 <style lang="scss" scoped>

src/components/echart/centerLeft/centerLeft1Chart/chart.vue

@@ -3,8 +3,8 @@
     <Echart
       :options="options"
       id="centreLeft1Chart"
-      height="220px"
+      height="340px"
-      width="260px"
+      width="300px"
     ></Echart>
   </div>
 </template>
@@ -14,58 +14,59 @@ import Echart from '@/common/echart'
 export default {
   data () {
     return {
-      options: {},
+      options: {}
-    };
+    }
   },
   components: {
-    Echart,
+    Echart
   },
   props: {
     cdata: {
       type: Object,
       default: () => ({})
-    },
+    }
   },
   watch: {
     cdata: {
       handler (newData) {
         this.options = {
           color: [
-            "#37a2da",
+            '#37a2da',
-            "#32c5e9",
+            '#32c5e9',
-            "#9fe6b8",
+            '#fb7293'
-            "#ffdb5c",
-            "#ff9f7f",
-            "#fb7293",
-            "#e7bcf3",
-            "#8378ea"
           ],
           tooltip: {
-            trigger: "item",
+            trigger: 'item',
-            formatter: "{a} <br/>{b} : {c} ({d}%)"
+            formatter: '{a} <br/>{b} : {c} ({d}%)'
           },
           toolbox: {
             show: true
           },
           calculable: true,
           legend: {
-            orient: "horizontal",
+            orient: 'horizontal',
-            icon: "circle",
+            icon: 'circle',
             bottom: 0,
-            x: "center",
+            x: 'center',
             data: newData.xData,
             textStyle: {
-              color: "#fff"
+              color: '#fff',
+              "fontSize": 18
             }
           },
           series: [
             {
-              name: "通过率统计",
+              name: '等级统计',
-              type: "pie",
+              type: 'pie',
-              radius: [10, 50],
+              radius: [20, 100],
-              roseType: "area",
+              roseType: 'area',
-              center: ["50%", "40%"],
+              center: ['50%', '50%'],
-              data: newData.seriesData
+              data: newData.seriesData,
+              label: {
+                normal: {
+                  show: false
+                },
+              },
             }
           ]
         }
@@ -74,7 +75,7 @@ export default {
       deep: true
     }
   }
-};
+}
 </script>
 
 <style lang="scss" scoped>

src/components/echart/centerLeft/centerLeft1Chart/index.vue

@@ -5,25 +5,22 @@
 </template>
 
 <script>
-import Chart from './chart.vue';
+import Chart from './chart.vue'
 export default {
   data () {
     return {
       cdata: {
-        xData: ["data1", "data2", "data3", "data4", "data5", "data6"],
+        xData: ['一级护理', '二级护理', '三级护理'],
         seriesData: [
-          { value: 10, name: "data1" },
+          { value: 10, name: '一级护理' },
-          { value: 5, name: "data2" },
+          { value: 5, name: '二级护理' },
-          { value: 15, name: "data3" },
+          { value: 15, name: '三级护理' }
-          { value: 25, name: "data4" },
-          { value: 20, name: "data5" },
-          { value: 35, name: "data6" }
         ]
       }
     }
   },
   components: {
-    Chart,
+    Chart
   },
   mounted () {
   },

src/components/echart/centerLeft/centerLeft2Chart/chart.vue

@@ -1,290 +1,88 @@
 <template>
   <div>
-    <Echart
+    <Echart :options="options" id="centreLeft2Chart" height="340px" width="270px" style="padding: 10px;"></Echart>
-      id="centreLeft2Chart"
-      ref="centreLeft2ChartRef"
-      :options="options"
-      height="360px"
-      width="330px"
-    ></Echart>
   </div>
 </template>
 
 <script>
-import Echart from '@/common/echart';
+  import Echart from '@/common/echart'
-export default {
+  export default {
     data() {
       return {
-      options: {},
+        options: {}
-    };
+      }
     },
     components: {
-    Echart,
+      Echart
     },
     props: {
       cdata: {
-      type: Array,
+        type: Object,
-      default: () => [],
+        default: () => ({})
-    },
+      }
     },
     watch: {
       cdata: {
         handler(newData) {
-        // 设置点的位置(经纬度)
-        const geoCoordMap = {
-          厦门市: [118.11022, 24.490474, 20],
-          福州市: [119.206239, 26.275302, 20],
-          泉州市: [118.589421, 24.908853, 20],
-          漳州市: [117.561801, 24.510897, 20],
-          龙岩市: [116.82978, 25.391603, 20],
-          莆田市: [119.007558, 25.591011, 20],
-          三明市: [117.435001, 26.465444, 20],
-          南平市: [118.178459, 27.535627, 20],
-          宁德市: [119.527082, 27.15924, 20],
-        };
-        let seriesData = [
-          {
-            name: '厦门市',
-          },
-          {
-            name: '福州市',
-          },
-          {
-            name: '泉州市',
-          },
-          {
-            name: '漳州市',
-          },
-          {
-            name: '龙岩市',
-          },
-          {
-            name: '莆田市',
-          },
-          {
-            name: '三明市',
-          },
-          {
-            name: '南平市',
-          },
-          {
-            name: '宁德市',
-          },
-        ];
-        let convertData = function (data) {
-          let scatterData = [];
-          for (var i = 0; i < data.length; i++) {
-            var geoCoord = geoCoordMap[data[i].name];
-            if (geoCoord) {
-              scatterData.push({
-                name: data[i].name,
-                value: geoCoord.concat(data[i].value),
-              });
-            }
-          }
-          return scatterData;
-        };
           this.options = {
-          showLegendSymbol: true,
+            // title: {
+            //   text: 'Referer of a Website',
+            //   subtext: 'Fake Data',
+            //   left: 'center'
+            // },
             tooltip: {
-            trigger: 'item',
+              trigger: 'item'
+            },
+            legend: {
+              orient: 'vertical',
+              left: 'left',
               textStyle: {
-              fontSize: 14,
+                color: '#fff',
-              lineHeight: 22,
+                "fontSize": 18
-            },
-            position: point => {
-              // 固定在顶部
-              return [point[0] + 50, point[1] - 20];
-            },
-            // 如果需要自定义 tooltip样式，需要使用formatter
-            /*
-              formatter: params => {
-                return `<div style=""> ... </div>`
               }
-            */
-          },
-          visualMap: {
-            min: 0,
-            max: 10,
-            show: false,
-            seriesIndex: 0,
-            // 颜色
-            inRange: {
-              color: ['rgba(41,166,206, .5)', 'rgba(69,117,245, .9)'],
-            },
-          },
-          // 底部背景
-          geo: {
-            show: true,
-            aspectScale: 0.85, //长宽比
-            zoom: 1.2,
-            top: '10%',
-            left: '16%',
-            map: '福建',
-            roam: false,
-            itemStyle: {
-              normal: {
-                areaColor: 'rgba(0,0,0,0)',
-                shadowColor: 'rgba(7,114,204, .8)',
-                shadowOffsetX: 5,
-                shadowOffsetY: 5,
             },
+            series: [{
+              // name: 'Access From',
+              type: 'pie',
+              radius: '75%',
+              data: newData.seriesData,
               emphasis: {
-                areaColor: '#00aeef',
-              },
-            },
-          },
-          series: [
-            {
-              name: '相关指数',
-              type: 'map',
-              aspectScale: 0.85, //长宽比
-              zoom: 1.2,
-              mapType: '福建', // 自定义扩展图表类型
-              top: '10%',
-              left: '16%',
                 itemStyle: {
-                normal: {
-                  color: 'red',
-                  areaColor: 'rgba(19,54,162, .5)',
-                  borderColor: 'rgba(0,242,252,.3)',
-                  borderWidth: 1,
-                  shadowBlur: 7,
-                  shadowColor: '#00f2fc',
-                },
-                emphasis: {
-                  areaColor: '#4f7fff',
-                  borderColor: 'rgba(0,242,252,.6)',
-                  borderWidth: 2,
                   shadowBlur: 10,
-                  shadowColor: '#00f2fc',
+                  shadowOffsetX: 0,
+                  shadowColor: 'rgba(0, 0, 0, 0.5)'
+                }
+              },
+            itemStyle: {
+              normal: {
+                color: function(colors) {
+                  var colorList = [
+                    '#457bef',
+                    '#ffaaff'
+                  ];
+                  return colorList[colors.dataIndex];
+                }
               },
             },
               label: {
-                formatter: params => `${params.name}`,
-                show: true,
-                position: 'insideRight',
-                textStyle: {
-                  fontSize: 14,
-                  color: '#efefef',
-                },
-                emphasis: {
-                  textStyle: {
-                    color: '#fff',
-                  },
-                },
-              },
-              data: newData,
-            },
-            {
-              type: 'effectScatter',
-              coordinateSystem: 'geo',
-              symbolSize: 7,
-              effectType: 'ripple',
-              legendHoverLink: false,
-              showEffectOn: 'render',
-              rippleEffect: {
-                period: 4,
-                scale: 2.5,
-                brushType: 'stroke',
-              },
-              zlevel: 1,
-              itemStyle: {
                 normal: {
-                  color: '#99FBFE',
+                  show: false,
-                  shadowBlur: 5,
-                  shadowColor: '#fff',
                 },
               },
-              data: convertData(seriesData),
+              labelLine: {
-            },
+                normal: {
-          ],
+                  show: false
-        };
+                }
-        // 重新选择区域
+              }
-        this.handleMapRandomSelect();
+            }]
+          }
         },
         immediate: true,
-      deep: true,
+        deep: true
-    },
-  },
-  methods: {
-    // 开启定时器
-    startInterval() {
-      const _self = this;
-      // 应通过接口获取配置时间，暂时写死5s
-      const time = 2000;
-      if (this.intervalId !== null) {
-        clearInterval(this.intervalId);
       }
-      this.intervalId = setInterval(() => {
-        _self.reSelectMapRandomArea();
-      }, time);
-    },
-    // 重新随机选中地图区域
-    reSelectMapRandomArea() {
-      const length = 9;
-      this.$nextTick(() => {
-        try {
-          const map = this.$refs.centreLeft2ChartRef.chart;
-          let index = Math.floor(Math.random() * length);
-          while (index === this.preSelectMapIndex || index >= length) {
-            index = Math.floor(Math.random() * length);
     }
-          map.dispatchAction({
-            type: 'mapUnSelect',
-            seriesIndex: 0,
-            dataIndex: this.preSelectMapIndex,
-          });
-          map.dispatchAction({
-            type: 'showTip',
-            seriesIndex: 0,
-            dataIndex: index,
-          });
-          map.dispatchAction({
-            type: 'mapSelect',
-            seriesIndex: 0,
-            dataIndex: index,
-          });
-          this.preSelectMapIndex = index;
-        } catch (error) {
-          console.log(error)
   }
-      });
-    },
-    handleMapRandomSelect() {
-      this.$nextTick(() => {
-        try {
-          const map = this.$refs.centreLeft2ChartRef.chart;
-          const _self = this;
-          setTimeout(() => {
-            _self.reSelectMapRandomArea();
-          }, 0);
-          // 移入区域，清除定时器、取消之前选中并选中当前
-          map.on('mouseover', function (params) {
-            clearInterval(_self.intervalId);
-            map.dispatchAction({
-              type: 'mapUnSelect',
-              seriesIndex: 0,
-              dataIndex: _self.preSelectMapIndex,
-            });
-            map.dispatchAction({
-              type: 'mapSelect',
-              seriesIndex: 0,
-              dataIndex: params.dataIndex,
-            });
-            _self.preSelectMapIndex = params.dataIndex;
-          });
-          // 移出区域重新随机选中地图区域，并开启定时器
-          map.on('globalout', function () {
-            _self.reSelectMapRandomArea();
-            _self.startInterval();
-          });
-          this.startInterval();
-        } catch (error) {
-          console.log(error)
-        }
-      });
-    },
-  },
-};
 </script>
+
+<style lang="scss" scoped>
+</style>

src/components/echart/centerLeft/centerLeft2Chart/index.vue

@@ -5,56 +5,21 @@
 </template>
 
 <script>
-import Chart from './chart.vue';
+import Chart from './chart.vue'
 export default {
   data () {
     return {
-      cdata: [
+      cdata: {
-        {
+        xData: ['男', '女'],
-          // 名字需要与 “common/map/fujian.js” 地图数据文件里面定义的一一对应，不能是 “福州” 或者 “闽” 之类的缩写
+        seriesData: [
-          name: '福州市',
+          { value: 42, name: '男' },
-          value: 10,
+          { value: 12, name: '女' }
-          elseData:{
-            // 这里放置地图 tooltip 里想显示的数据
-          }
-        },
-        {
-          name: '厦门市',
-          value: 9,
-        },
-        {
-          name: '漳州市',
-          value: 8,
-        },
-        {
-          name: '泉州市',
-          value: 7,
-        },
-        {
-          name: '三明市',
-          value: 6,
-        },
-        {
-          name: '莆田市',
-          value: 5,
-        },
-        {
-          name: '南平市',
-          value: 4,
-        },
-        {
-          name: '龙岩市',
-          value: 3,
-        },
-        {
-          name: '宁德市',
-          value: 2,
-        }
         ]
       }
+    }
   },
   components: {
-    Chart,
+    Chart
   },
   mounted () {
   },

src/components/echart/centerRight/centerRight1Chart/chart.vue

@@ -0,0 +1,86 @@
+<template>
+  <div>
+    <Echart
+      :options="options"
+      id="centreLeft1Chart"
+      height="340px"
+      width="380px"
+    ></Echart>
+  </div>
+</template>
+
+<script>
+import Echart from '@/common/echart'
+export default {
+  data () {
+    return {
+      options: {}
+    }
+  },
+  components: {
+    Echart
+  },
+  props: {
+    cdata: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  watch: {
+    cdata: {
+      handler (newData) {
+        this.options = {
+          color: [
+            '#37a2da',
+            "#ffdb5c",
+            "#ff9f7f",
+            '#fb7293',
+            "#e7bcf3",
+            '#8378ea'
+          ],
+          tooltip: {
+            trigger: 'item',
+            formatter: '{a} <br/>{b} : {c} ({d}%)'
+          },
+          toolbox: {
+            show: true
+          },
+          calculable: true,
+          legend: {
+            orient: 'horizontal',
+            icon: 'circle',
+            bottom: 0,
+            x: 'center',
+            data: newData.xData,
+            textStyle: {
+              color: '#fff',
+              "fontSize": 18
+            }
+          },
+          series: [
+            {
+              name: '年龄统计',
+              type: 'pie',
+              radius: [20, 100],
+              roseType: 'area',
+              center: ['50%', '40%'],
+              data: newData.seriesData,
+              label: {
+                normal: {
+                  show: true,
+              "fontSize": 18
+                },
+              },
+            }
+          ]
+        }
+      },
+      immediate: true,
+      deep: true
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

src/components/echart/centerRight/centerRight1Chart/index.vue

@@ -0,0 +1,36 @@
+<template>
+  <div>
+    <Chart :cdata="cdata" />
+  </div>
+</template>
+
+<script>
+import Chart from './chart.vue'
+export default {
+  data () {
+    return {
+      cdata: {
+        xData: ['50岁以下', '50岁-59岁', '60岁-69岁','70岁-79岁','80岁-89岁','90岁以上'],
+        seriesData: [
+          { value: 6, name: '50岁以下' },
+          { value: 12, name: '50岁-59岁' },
+          { value: 14, name: '60岁-69岁' },
+          { value: 21, name: '70岁-79岁' },
+          { value: 16, name: '80岁-89岁' },
+          { value: 9, name: '90岁以上' },
+        ]
+      }
+    }
+  },
+  components: {
+    Chart
+  },
+  mounted () {
+  },
+  methods: {
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

src/components/echart/centerRight/centerRight2Chart/chart.vue

@@ -0,0 +1,84 @@
+<template>
+  <div>
+    <Echart :options="options" id="centreLeft2Chart" height="360px" width="270px" style="padding: 10px;"></Echart>
+  </div>
+</template>
+
+<script>
+  import Echart from '@/common/echart'
+  export default {
+    data() {
+      return {
+        options: {}
+      }
+    },
+    components: {
+      Echart
+    },
+    props: {
+      cdata: {
+        type: Object,
+        default: () => ({})
+      }
+    },
+    watch: {
+      cdata: {
+        handler(newData) {
+          this.options = {
+            // title: {
+            //   text: 'Referer of a Website',
+            //   subtext: 'Fake Data',
+            //   left: 'center'
+            // },
+            tooltip: {
+              trigger: 'item'
+            },
+            legend: {
+              orient: 'vertical',
+              left: 'left'
+            },
+            series: [{
+              // name: 'Access From',
+              type: 'pie',
+              radius: '75%',
+              data: newData.seriesData,
+              emphasis: {
+                itemStyle: {
+                  shadowBlur: 10,
+                  shadowOffsetX: 0,
+                  shadowColor: 'rgba(0, 0, 0, 0.5)'
+                }
+              },
+              itemStyle: {
+                normal: {
+                  color: function(colors) {
+                    var colorList = [
+                      '#5470c6',
+                      '#9A60B4',
+                    ];
+                    return colorList[colors.dataIndex];
+                  }
+                },
+              },
+              label: {
+                normal: {
+                  show: false,
+                }
+              },
+              labelLine: {
+                normal: {
+                  show: false
+                }
+              }
+            }]
+          }
+        },
+        immediate: true,
+        deep: true
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+</style>

src/components/echart/centerRight/centerRight2Chart/index.vue

@@ -0,0 +1,32 @@
+<template>
+  <div>
+    <Chart :cdata="cdata" />
+  </div>
+</template>
+
+<script>
+import Chart from './chart.vue'
+export default {
+  data () {
+    return {
+      cdata: {
+        xData: ['是', '否'],
+        seriesData: [
+          { value: 26, name: '是' },
+          { value: 11, name: '否' }
+        ]
+      }
+    }
+  },
+  components: {
+    Chart
+  },
+  mounted () {
+  },
+  methods: {
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

src/layouts/BigScreenLayout.vue

@@ -24,8 +24,8 @@ export default {
 </script>
 
 <style>
-  #bigScreenLayout {
+  #app {
 
-    background-color: #0f1325;
+    background-color: #03050C;
   }
 </style>

src/views/bigScreen/bottomLeft.vue

@@ -6,7 +6,7 @@
           <icon name="chart-bar" class="text-icon"></icon>
         </span>
         <div class="d-flex">
-          <span class="fs-xl text mx-2">数据统计图</span>
+          <span class="fs-xl text mx-2" style="font-size: 20px;">各村供养人数</span>
         </div>
       </div>
       <div>

src/views/bigScreen/bottomRight.vue

@@ -3,58 +3,200 @@
     <div class="bg-color-black">
       <div class="d-flex pt-2 pl-2">
         <span>
-          <icon name="chart-area" class="text-icon"></icon>
+          <icon name="align-left" class="text-icon"></icon>
         </span>
-        <div class="d-flex">
+        <span class="fs-xl text mx-2" style="font-size: 20px;">入住情况统计</span>
-          <span class="fs-xl text mx-2">工单修复以及满意度统计图</span>
-          <div class="decoration2">
-            <dv-decoration-2 :reverse="true" style="width:5px;height:6rem;" />
       </div>
+      <div class="d-flex ai-center flex-column body-box">
+        <dv-capsule-chart class="dv-cap-chart" :config="config" />
       </div>
+      <!-- 4个主要的数据 -->
+      <div class="bottom-data">
+        <div
+          class="item-box mt-2"
+          v-for="(item, index) in numberData"
+          :key="index"
+        >
+           <p class="text" style="text-align: center;">
+            <dv-digital-flop class="dv-digital-flop" :config="item.number" />
+          </p>
+          <p class="text" >
+            {{ item.text }}
+            <span class="colorYellow" v-if="item.dw">({{ item.dw }})</span>
+          </p>
         </div>
-      <div>
-        <BottomRightChart />
       </div>
     </div>
   </div>
 </template>
 
 <script>
-import BottomRightChart from "@/components/echart/bottom/bottomRightChart";
+import centerRight2Chart1 from '@/components/echart/centerRight/centerRightChart'
 export default {
   components: {
-    BottomRightChart
+    centerRight2Chart1
+  },
+  data () {
+    return {
+      config: {
+        data: [
+          {
+            name: '供养房',
+            value: 21
+          },
+          {
+            name: '餐厅',
+            value: 1
+          },
+          {
+            name: '厨房',
+            value: 3
+          },
+          {
+            name: '活动室',
+            value: 1
+          },
+          {
+            name: '办公室',
+            value: 4
           }
-};
+        ],
+    showValue: true
+      },
+      numberData: [
+        {
+          number: {
+            number: [22],
+            toFixed: 0,
+            textAlign: 'left',
+            content: '{nt}',
+            style: {
+              fontSize: 24
+            }
+          },
+          text: '入住房间',
+          dw: '间'
+        },
+        {
+          number: {
+            number: [37],
+            textAlign: 'left',
+            content: '{nt}',
+            style: {
+              fontSize: 24
+            }
+          },
+          text: '供养房间',
+          dw: '间'
+        },
+        {
+          number: {
+            number: [52],
+            toFixed: 0,
+            textAlign: 'left',
+            content: '{nt}',
+            style: {
+              fontSize: 24
+            }
+          },
+          text: '入住床位',
+          dw: '个'
+        },
+        {
+          number: {
+            number: [80],
+            toFixed: 0,
+            textAlign: 'left',
+            content: '{nt}',
+            style: {
+              fontSize: 24
+            }
+          },
+          text: '总床位数',
+          dw: '个'
+        },
+        {},
+        {
+          number: {
+            number: [32.25],
+            toFixed: 2,
+            textAlign: 'left',
+            content: '{nt}',
+            style: {
+              fontSize: 24
+            }
+          },
+          text: '床位入住率',
+          dw: '%'
+        }
+      ]
+    }
+  }
+}
 </script>
 
-<style lang="scss" class>
+<style lang="scss" scoped>
-$box-height: 520px;
+$box-height: 485px;
 $box-width: 100%;
 #bottomRight {
-  padding: 14px 16px;
+  padding: 20px 16px;
   height: $box-height;
   width: $box-width;
   border-radius: 5px;
   .bg-color-black {
-    height: $box-height - 30px;
+    padding: 5px;
+    height: $box-height;
+    width: $box-width;
     border-radius: 10px;
   }
   .text {
     color: #c3cbde;
   }
-  //下滑线动态
+  .body-box {
-  .decoration2 {
+    border-radius: 10px;
-    position: absolute;
+    overflow: hidden;
-    right: 0.125rem;
+    .dv-cap-chart {
+      width: 100%;
+      height: 270px;
+      position: relative;
     }
-  .chart-box {
+  }
-    margin-top: 16px;
+  .bottom-data {
-    width: 170px;
+    position: absolute;
-    height: 170px;
+    top: 270px;
-    .active-ring-name {
+    left: 30px;
-      padding-top: 10px;
+    .item-box {
+      & > div {
+        padding-right: 5px;
+      }
+      font-size: 14px;
+      float: right;
+      position: relative;
+      width: 50%;
+      color: #d3d6dd;
+      .dv-digital-flop {
+        width: 120px;
+        height: 30px;
+      }
+      // 金币
+      .coin {
+        position: relative;
+        top: 6px;
+        font-size: 20px;
+        color: #ffc107;
+      }
+      .colorYellow {
+        color: yellowgreen;
+      }
+      /* p {
+        text-align: center;
+      } */
     }
   }
 }
+
+// 让下方单位的精度值隐藏
+::v-deep .dv-capsule-chart .unit-label {
+  visibility: hidden;
+}
 </style>

src/views/bigScreen/center.vue

@@ -6,7 +6,7 @@
         v-for="item in titleItem"
         :key="item.title"
       >
-        <p class="ml-3 colorBlue fw-b fs-xl">{{ item.title }}</p>
+        <p class="ml-3 colorBlue fw-b fs-xl bt-zh">{{ item.title }}</p>
         <div>
           <dv-digital-flop
             class="dv-dig-flop ml-1 mt-2 pl-3"
@@ -20,12 +20,12 @@
         <span>
           <icon name="chart-pie" class="text-icon"></icon>
         </span>
-        <span class="fs-xl text mx-2 mb-1 pl-3">年度负责人组件达标榜</span>
+        <span class="fs-xl text mx-2 mb-1 pl-3 bt-zh">所属村组榜</span>
         <dv-scroll-ranking-board class="dv-scr-rank-board mt-1" :config="ranking" />
       </div>
       <div class="percent">
         <div class="item bg-color-black">
-          <span>今日任务通过率</span>
+          <span>集中供养率</span>
           <CenterChart
             :id="rate[0].id"
             :tips="rate[0].tips"
@@ -33,7 +33,7 @@
           />
         </div>
         <div class="item bg-color-black">
-          <span>今日任务达标率</span>
+          <span>分散供养率</span>
           <CenterChart
             :id="rate[1].id"
             :tips="rate[1].tips"
@@ -56,74 +56,74 @@ export default {
     return {
       titleItem: [
         {
-          title: '今年累计任务建次数',
+          title: '累计入住数',
           number: {
             number: [120],
-            toFixed: 1,
+            toFixed: 0,
             textAlign: 'left',
             content: '{nt}',
             style: {
-              fontSize: 26
+              fontSize: 30
             }
           }
         },
         {
-          title: '本月累计任务次数',
+          title: '今年入住数',
           number: {
             number: [18],
-            toFixed: 1,
+            toFixed: 0,
             textAlign: 'left',
             content: '{nt}',
             style: {
-              fontSize: 26
+              fontSize: 30
             }
           }
         },
         {
-          title: '今日累计任务次数',
+          title: '本月新增数',
           number: {
             number: [2],
-            toFixed: 1,
+            toFixed: 0,
             textAlign: 'left',
             content: '{nt}',
             style: {
-              fontSize: 26
+              fontSize: 30
             }
           }
         },
         {
-          title: '今年失败任务次数',
+          title: '目前在院数',
-          number: {
-            number: [14],
-            toFixed: 1,
-            textAlign: 'left',
-            content: '{nt}',
-            style: {
-              fontSize: 26
-            }
-          }
-        },
-        {
-          title: '今年成功任务次数',
           number: {
             number: [106],
-            toFixed: 1,
+            toFixed: 0,
             textAlign: 'left',
             content: '{nt}',
             style: {
-              fontSize: 26
+              fontSize: 30
             }
           }
         },
         {
-          title: '今年达标任务个数',
+          title: '外出就医数',
           number: {
-            number: [100],
+            number: [14],
-            toFixed: 1,
+            toFixed: 0,
             textAlign: 'left',
             content: '{nt}',
             style: {
-              fontSize: 26
+              fontSize: 30
+            }
+          }
+        },
+        {
+          title: '今日减员数',
+          number: {
+            number: [1],
+            toFixed: 0,
+            textAlign: 'left',
+            content: '{nt}',
+            style: {
+              fontSize: 30
             }
           }
         }
@@ -131,44 +131,36 @@ export default {
       ranking: {
         data: [
           {
-            name: '周口',
+            name: '下堡坪村',
             value: 55
           },
           {
-            name: '南阳',
+            name: '蛟龙寺村',
             value: 120
           },
           {
-            name: '西峡',
+            name: '九山村',
             value: 78
           },
           {
-            name: '驻马店',
+            name: '马宗岭村',
-            value: 66
+            value: 12
           },
           {
-            name: '新乡',
+            name: '赵勉河村',
-            value: 80
+            value: 32
           },
           {
-            name: '新乡2',
+            name: '秀水村',
-            value: 80
+            value: 16
           },
           {
-            name: '新乡3',
+            name: '磨坪村',
-            value: 80
+            value: 23
           },
           {
-            name: '新乡4',
+            name: '十八湾村',
-            value: 80
+            value: 32
-          },
-          {
-            name: '新乡5',
-            value: 80
-          },
-          {
-            name: '新乡6',
-            value: 80
           }
         ],
         carousel: 'single',
@@ -266,7 +258,7 @@ export default {
         height: 120px;
         span {
           margin-top: 8px;
-          font-size: 14px;
+          font-size: 20px;
           display: flex;
           justify-content: center;
         }
@@ -280,4 +272,7 @@ export default {
     }
   }
 }
+.bt-zh {
+  font-size: 20px;
+  }
 </style>

src/views/bigScreen/centerLeft1.vue

@@ -1,169 +0,0 @@
-<template>
-  <div id="centerLeft1">
-    <div class="bg-color-black">
-      <div class="d-flex pt-2 pl-2">
-        <span>
-          <icon name="chart-bar" class="text-icon"></icon>
-        </span>
-        <div class="d-flex">
-          <span class="fs-xl text mx-2">任务通过率</span>
-          <dv-decoration-3 class="dv-dec-3" />
-        </div>
-      </div>
-      <div class="d-flex jc-center">
-        <CenterLeft1Chart />
-      </div>
-      <!-- 4个主要的数据 -->
-      <div class="bottom-data">
-        <div
-          class="item-box mt-2"
-          v-for="(item, index) in numberData"
-          :key="index"
-        >
-          <div class="d-flex">
-            <span class="coin">￥</span>
-            <dv-digital-flop class="dv-digital-flop" :config="item.number" />
-          </div>
-          <p class="text" style="text-align: center;">
-            {{ item.text }}
-            <span class="colorYellow">(件)</span>
-          </p>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import CenterLeft1Chart from '@/components/echart/centerLeft/centerLeft1Chart'
-export default {
-  data() {
-    return {
-      numberData: [
-        {
-          number: {
-            number: [15],
-            toFixed: 1,
-            textAlign: 'left',
-            content: '{nt}',
-            style: {
-              fontSize: 24
-            }
-          },
-          text: '今日构建总量'
-        },
-        {
-          number: {
-            number: [1144],
-            toFixed: 1,
-            textAlign: 'left',
-            content: '{nt}',
-            style: {
-              fontSize: 24
-            }
-          },
-          text: '总共完成数量'
-        },
-        {
-          number: {
-            number: [361],
-            toFixed: 1,
-            textAlign: 'left',
-            content: '{nt}',
-            style: {
-              fontSize: 24
-            }
-          },
-          text: '正在编译数量'
-        },
-        {
-          number: {
-            number: [157],
-            toFixed: 1,
-            textAlign: 'left',
-            content: '{nt}',
-            style: {
-              fontSize: 24
-            }
-          },
-          text: '未通过数量'
-        }
-      ]
-    }
-  },
-  components: {
-    CenterLeft1Chart
-  },
-  mounted() {
-    this.changeTiming()
-  },
-  methods: {
-    changeTiming() {
-      setInterval(() => {
-        this.changeNumber()
-      }, 3000)
-    },
-    changeNumber() {
-      this.numberData.forEach((item, index) => {
-        item.number.number[0] += ++index
-        item.number = { ...item.number }
-      })
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-$box-width: 300px;
-$box-height: 410px;
-
-#centerLeft1 {
-  padding: 16px;
-  height: $box-height;
-  width: $box-width;
-  border-radius: 10px;
-  .bg-color-black {
-    height: $box-height - 30px;
-    border-radius: 10px;
-  }
-  .text {
-    color: #c3cbde;
-  }
-  .dv-dec-3 {
-    position: relative;
-    width: 100px;
-    height: 20px;
-    top: -3px;
-  }
-
-  .bottom-data {
-    .item-box {
-      & > div {
-        padding-right: 5px;
-      }
-      font-size: 14px;
-      float: right;
-      position: relative;
-      width: 50%;
-      color: #d3d6dd;
-      .dv-digital-flop {
-        width: 120px;
-        height: 30px;
-      }
-      // 金币
-      .coin {
-        position: relative;
-        top: 6px;
-        font-size: 20px;
-        color: #ffc107;
-      }
-      .colorYellow {
-        color: yellowgreen;
-      }
-      p {
-        text-align: center;
-      }
-    }
-  }
-}
-</style>

src/views/bigScreen/centerRight1.vue

@@ -1,76 +0,0 @@
-<template>
-  <div id="centerRight1">
-    <div class="bg-color-black">
-      <div class="d-flex pt-2 pl-2">
-        <span>
-          <icon name="chart-line" class="text-icon"></icon>
-        </span>
-        <div class="d-flex">
-          <span class="fs-xl text mx-2">任务完成排行榜</span>
-        </div>
-      </div>
-      <div class="d-flex jc-center body-box">
-        <dv-scroll-board class="dv-scr-board" :config="config" />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      config: {
-        header: ['组件', '分支', '覆盖率'],
-        data: [
-          ['组件1', 'dev-1', "<span  class='colorGrass'>↑75%</span>"],
-          ['组件2', 'dev-2', "<span  class='colorRed'>↓33%</span>"],
-          ['组件3', 'dev-3', "<span  class='colorGrass'>↑100%</span>"],
-          ['组件4', 'rea-1', "<span  class='colorGrass'>↑94%</span>"],
-          ['组件5', 'rea-2', "<span  class='colorGrass'>↑95%</span>"],
-          ['组件6', 'fix-2', "<span  class='colorGrass'>↑63%</span>"],
-          ['组件7', 'fix-4', "<span  class='colorGrass'>↑84%</span>"],
-          ['组件8', 'fix-7', "<span  class='colorRed'>↓46%</span>"],
-          ['组件9', 'dev-2', "<span  class='colorRed'>↓13%</span>"],
-          ['组件10', 'dev-9', "<span  class='colorGrass'>↑76%</span>"]
-        ],
-        rowNum: 7, //表格行数
-        headerHeight: 35,
-        headerBGC: '#0f1325', //表头
-        oddRowBGC: '#0f1325', //奇数行
-        evenRowBGC: '#171c33', //偶数行
-        index: true,
-        columnWidth: [50],
-        align: ['center']
-      }
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-$box-height: 410px;
-$box-width: 300px;
-#centerRight1 {
-  padding: 16px;
-  padding-top: 20px;
-  height: $box-height;
-  width: $box-width;
-  border-radius: 5px;
-  .bg-color-black {
-    height: $box-height - 30px;
-    border-radius: 10px;
-  }
-  .text {
-    color: #c3cbde;
-  }
-  .body-box {
-    border-radius: 10px;
-    overflow: hidden;
-    .dv-scr-board {
-      width: 270px;
-      height: 340px;
-    }
-  }
-}
-</style>

src/views/bigScreen/centerRight2.vue

@@ -1,80 +0,0 @@
-<template>
-  <div id="centerRight2">
-    <div class="bg-color-black">
-      <div class="d-flex pt-2 pl-2">
-        <span>
-          <icon name="align-left" class="text-icon"></icon>
-        </span>
-        <span class="fs-xl text mx-2">产品销售渠道分析</span>
-      </div>
-      <div class="d-flex ai-center flex-column body-box">
-        <dv-capsule-chart class="dv-cap-chart" :config="config" />
-        <centerRight2Chart1 />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import centerRight2Chart1 from '@/components/echart/centerRight/centerRightChart'
-
-export default {
-  data() {
-    return {
-      config: {
-        data: [
-          {
-            name: '南阳',
-            value: 167
-          },
-          {
-            name: '周口',
-            value: 67
-          },
-          {
-            name: '漯河',
-            value: 123
-          },
-          {
-            name: '郑州',
-            value: 55
-          },
-          {
-            name: '西峡',
-            value: 98
-          }
-        ]
-      }
-    }
-  },
-  components: { centerRight2Chart1 }
-}
-</script>
-
-<style lang="scss" scoped>
-#centerRight2 {
-  $box-height: 410px;
-  $box-width: 340px;
-  padding: 5px;
-  height: $box-height;
-  width: $box-width;
-  border-radius: 5px;
-  .bg-color-black {
-    padding: 5px;
-    height: $box-height;
-    width: $box-width;
-    border-radius: 10px;
-  }
-  .text {
-    color: #c3cbde;
-  }
-  .body-box {
-    border-radius: 10px;
-    overflow: hidden;
-    .dv-cap-chart {
-      width: 100%;
-      height: 160px;
-    }
-  }
-}
-</style>

src/views/bigScreen/hldj.vue

@@ -0,0 +1,92 @@
+<template>
+  <div id="centerLeft1">
+    <div class="bg-color-black">
+      <div class="d-flex pt-2 pl-2">
+        <span>
+          <icon name="chart-bar" class="text-icon"></icon>
+        </span>
+        <div class="d-flex">
+          <span class="fs-xl text mx-2">护理等级</span>
+          <dv-decoration-3 class="dv-dec-3" />
+        </div>
+      </div>
+      <div class="d-flex jc-center">
+        <CenterLeft1Chart />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import CenterLeft1Chart from '@/components/echart/centerLeft/centerLeft1Chart'
+export default {
+  data () {
+    return {
+
+    }
+  },
+  components: {
+    CenterLeft1Chart
+  },
+  mounted () {
+  },
+  methods: {
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+$box-width: 300px;
+$box-height: 410px;
+
+#centerLeft1 {
+  padding: 16px;
+  height: $box-height;
+  min-width: $box-width;
+  border-radius: 10px;
+  .bg-color-black {
+    height: $box-height - 30px;
+    border-radius: 10px;
+  }
+  .text {
+    color: #c3cbde;
+    font-size: 20px;
+  }
+  .dv-dec-3 {
+    position: relative;
+    width: 100px;
+    height: 20px;
+    top: -3px;
+  }
+
+  .bottom-data {
+    .item-box {
+      & > div {
+        padding-right: 5px;
+      }
+      font-size: 14px;
+      float: right;
+      position: relative;
+      width: 50%;
+      color: #d3d6dd;
+      .dv-digital-flop {
+        width: 120px;
+        height: 30px;
+      }
+      // 金币
+      .coin {
+        position: relative;
+        top: 6px;
+        font-size: 20px;
+        color: #ffc107;
+      }
+      .colorYellow {
+        color: yellowgreen;
+      }
+      p {
+        text-align: center;
+      }
+    }
+  }
+}
+</style>

src/views/bigScreen/index.vue

@@ -1,4 +1,6 @@
 <template>
+  <div>
+          <scale-box :width="1920" :height="1080" bgc="transparent" :delay="100">
   <div id="index" ref="appRef" :key="componentKey">
     <div class="bg">
       <dv-loading v-if="loading">Loading...</dv-loading>
@@ -8,7 +10,7 @@
           <div class="d-flex jc-center">
             <dv-decoration-8 class="dv-dec-8" :color="decorationColor" />
             <div class="title" @click="handleWelcome" style="cursor: pointer;">
-              <span class="title-text" style="display: inline-block;width: 80%;">
+              <span class="title-text" style="display: inline-block;width: 100%;line-height: 2;">
                 下堡坪乡农村福利院长者管理系统
               </span>
               <dv-decoration-6
@@ -29,16 +31,22 @@
         <!-- 第二行 -->
         <div class="d-flex jc-between px-2">
           <div class="d-flex aside-width">
-            <div class="react-left ml-4 react-l-s">
+            <!-- <div class="react-left ml-4 react-l-s">
               <span class="react-left"></span>
               <span class="text">数据分析1</span>
+            </div> -->
+            <div class="react-left ml-3 fw-b" style="background-color: #1a5cd7;">
+              <span class="text">数据统计</span>
             </div>
             <div class="react-left ml-3">
-              <span class="text">数据分析2</span>
+              <span class="text">数据查询</span>
+            </div>
+            <div class="react-left ml-3">
+              <span class="text">荣誉展示</span>
             </div>
           </div>
-          <div class="d-flex aside-width">
+          <!-- <div class="d-flex aside-width">
-            <div class="react-right bg-color-blue mr-3">
+            <div class="react-right mr-3">
               <span class="text fw-b">数据统计</span>
             </div>
             <div class="react-right mr-4 react-l-s">
@@ -47,6 +55,21 @@
                 >{{ dateYear }} {{ dateWeek }} {{ dateDay }}</span
               >
             </div>
+          </div> -->
+          <div class="d-flex aside-width">
+            <div class="react-right mr-3 react-l-s" style="width: 250px;">
+              <span class="text ">实时监控</span>
+            </div>
+            <div class="react-right mr-3 react-l-s" style="width: 250px;">
+              <span class="text ">健康预警</span>
+            </div>
+            <div class="react-right mr-4 react-l-s" style="width: 380px;">
+              <span class="react-after"></span>
+             <span
+                class="text"
+              >{{ dateYear }} {{ dateWeek }} {{ dateDay }}</span
+              >
+            </div>
           </div>
         </div>
 
@@ -55,12 +78,12 @@
           <div class="content-box">
             <div>
               <dv-border-box-12>
-                <centerLeft1 />
+                <xb />
               </dv-border-box-12>
             </div>
             <div>
               <dv-border-box-12>
-                <centerLeft2 />
+                <nltj />
               </dv-border-box-12>
             </div>
             <!-- 中间 -->
@@ -69,12 +92,14 @@
             </div>
             <!-- 中间 -->
             <div>
-              <centerRight2 />
+              <dv-border-box-12>
+                <hldj />
+              </dv-border-box-12>
             </div>
             <div>
-              <dv-border-box-13>
+              <dv-border-box-12>
-                <centerRight1 />
+                <jzfp />
-              </dv-border-box-13>
+              </dv-border-box-12>
             </div>
           </div>
 
@@ -91,23 +116,26 @@
       </div>
     </div>
   </div>
+  </scale-box>
+    </div>
 </template>
 
 <script>
-import drawMixin from "../../utils/drawMixin";
+import drawMixin from '../../utils/drawMixin'
 import useDraw from '@/utils/useDraw'
 import { formatTime } from '../../utils/index.js'
-import centerLeft1 from './centerLeft1'
+import hldj from './hldj'
-import centerLeft2 from './centerLeft2'
+import xb from './xb'
-import centerRight1 from './centerRight1'
+import jzfp from './jzfp'
-import centerRight2 from './centerRight2'
+import nltj from './nltj'
 import center from './center'
 import bottomLeft from './bottomLeft'
 import bottomRight from './bottomRight'
+import ScaleBox from "vue2-scale-box";
 
 export default {
   mixins: [ drawMixin ],
-  data() {
+  data () {
     return {
       timing: null,
       loading: true,
@@ -116,19 +144,20 @@ export default {
       dateWeek: null,
       weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
       decorationColor: ['#568aea', '#000000'],
-      componentKey: 0,
+      componentKey: 0
     }
   },
   components: {
-    centerLeft1,
+    ScaleBox,
-    centerLeft2,
+    hldj,
-    centerRight1,
+    xb,
-    centerRight2,
+    jzfp,
+    nltj,
     center,
     bottomLeft,
     bottomRight
   },
-  mounted() {
+  mounted () {
     this.timeFn()
     this.cancelLoading()
 
@@ -136,8 +165,13 @@ export default {
 
     // 调用 useDraw 返回的方法 屏幕适应
     windowDraw();
+    console.log(111)
     calcRate();
-    this.componentKey += 1;
+    console.log(222)
+    this.componentKey += 1
+    console.log(333)
+
+    // this.fullscreenCheck()
   },
   beforeDestroy () {
     clearInterval(this.timing)
@@ -146,14 +180,14 @@ export default {
     unWindowDraw();
   },
   methods: {
-    timeFn() {
+    timeFn () {
       this.timing = setInterval(() => {
         this.dateDay = formatTime(new Date(), 'HH: mm: ss')
         this.dateYear = formatTime(new Date(), 'yyyy-MM-dd')
         this.dateWeek = this.weekday[new Date().getDay()]
       }, 1000)
     },
-    cancelLoading() {
+    cancelLoading () {
       setTimeout(() => {
         this.loading = false
       }, 500)
@@ -163,10 +197,40 @@ export default {
         path: '/welcome'
       })
     },
+    fullscreenCheck() {
+      if (!document.fullscreenElement &&
+          !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement) {  // current working methods
+        if (document.documentElement.requestFullscreen) {
+          document.documentElement.requestFullscreen();
+        } else if (document.documentElement.msRequestFullscreen) {
+          document.documentElement.msRequestFullscreen();
+        } else if (document.documentElement.mozRequestFullScreen) {
+          document.documentElement.mozRequestFullScreen();
+        } else if (document.documentElement.webkitRequestFullscreen) {
+          document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
+        }
+      }
+      else {
+        if (document.exitFullscreen) {
+          document.exitFullscreen();
+        } else if (document.msExitFullscreen) {
+          document.msExitFullscreen();
+        } else if (document.mozCancelFullScreen) {
+          document.mozCancelFullScreen();
+        } else if (document.webkitExitFullscreen) {
+          document.webkitExitFullscreen();
+        }
+      }
+    }
+
   }
 }
 </script>
 
 <style lang="scss" scoped>
 @import '../../assets/scss/index.scss';
+body {
+    margin: 0;
+    padding: 0;
+}
 </style>

src/views/bigScreen/jzfp.vue

@@ -0,0 +1,60 @@
+<template>
+  <div id="centerLeft1">
+    <div class="bg-color-black">
+      <div class="d-flex pt-2 pl-2">
+        <span>
+          <icon name="chart-pie" class="text-icon"></icon>
+        </span>
+        <div class="d-flex">
+          <span class="fs-xl text mx-2">精准扶贫</span>
+          <dv-decoration-1 class="dv-dec-1" />
+        </div>
+      </div>
+      <div class="d-flex jc-center">
+        <CenterRight2Chart />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import CenterRight2Chart from '@/components/echart/centerRight/centerRight2Chart'
+export default {
+  components: {
+    CenterRight2Chart
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+#centerLeft1 {
+  $box-width: 270px;
+  $box-height: 410px;
+  padding: 16px;
+  height: $box-height;
+  width: $box-width;
+  border-radius: 5px;
+  .bg-color-black {
+    height: $box-height - 30px;
+    border-radius: 10px;
+  }
+  .text {
+    color: #c3cbde;
+    font-size: 20px;
+  }
+  .dv-dec-1 {
+    position: relative;
+    width: 100px;
+    height: 20px;
+    top: -3px;
+  }
+  .chart-box {
+    margin-top: 16px;
+    width: 170px;
+    height: 170px;
+    .active-ring-name {
+      padding-top: 10px;
+    }
+  }
+}
+</style>

src/views/bigScreen/nltj.vue

@@ -0,0 +1,91 @@
+<template>
+  <div id="centerLeft1">
+    <div class="bg-color-black">
+      <div class="d-flex pt-2 pl-2">
+        <span>
+          <icon name="chart-bar" class="text-icon"></icon>
+        </span>
+        <div class="d-flex">
+          <span class="fs-xl text mx-2">是否在院</span>
+          <dv-decoration-3 class="dv-dec-3" />
+        </div>
+      </div>
+      <div class="d-flex jc-center">
+        <CenterRight1Chart />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import CenterRight1Chart from '@/components/echart/centerRight/centerRight1Chart'
+export default {
+  data () {
+    return {
+    }
+  },
+  components: {
+    CenterRight1Chart
+  },
+  mounted () {
+  },
+  methods: {
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+$box-width: 380px;
+$box-height: 410px;
+
+#centerLeft1 {
+  padding: 16px;
+  height: $box-height;
+  min-width: $box-width;
+  border-radius: 10px;
+  .bg-color-black {
+    height: $box-height - 30px;
+    border-radius: 10px;
+  }
+  .text {
+    color: #c3cbde;
+    font-size: 20px;
+  }
+  .dv-dec-3 {
+    position: relative;
+    width: 100px;
+    height: 20px;
+    top: -3px;
+  }
+
+  .bottom-data {
+    .item-box {
+      & > div {
+        padding-right: 5px;
+      }
+      font-size: 14px;
+      float: right;
+      position: relative;
+      width: 50%;
+      color: #d3d6dd;
+      .dv-digital-flop {
+        width: 120px;
+        height: 30px;
+      }
+      // 金币
+      .coin {
+        position: relative;
+        top: 6px;
+        font-size: 20px;
+        color: #ffc107;
+      }
+      .colorYellow {
+        color: yellowgreen;
+      }
+      p {
+        text-align: center;
+      }
+    }
+  }
+}
+</style>

src/views/bigScreen/xb.vue

@@ -6,7 +6,7 @@
           <icon name="chart-pie" class="text-icon"></icon>
         </span>
         <div class="d-flex">
-          <span class="fs-xl text mx-2">地图数据</span>
+          <span class="fs-xl text mx-2">性别</span>
           <dv-decoration-1 class="dv-dec-1" />
         </div>
       </div>
@@ -28,11 +28,11 @@ export default {
 
 <style lang="scss" scoped>
 #centerLeft1 {
-  $box-width: 300px;
+  $box-width: 270px;
   $box-height: 410px;
   padding: 16px;
   height: $box-height;
-  min-width: $box-width;
+  width: $box-width;
   border-radius: 5px;
   .bg-color-black {
     height: $box-height - 30px;
@@ -40,6 +40,7 @@ export default {
   }
   .text {
     color: #c3cbde;
+    font-size: 20px;
   }
   .dv-dec-1 {
     position: relative;

src/views/index/dataSupportList.vue

@@ -0,0 +1,206 @@
+<template>
+  <a-card :bordered="false">
+    <div class="table-page-search-wrapper">
+      <a-form layout="inline">
+        <a-row :gutter="48">
+          <a-col :md="6" :sm="24">
+            <a-form-item label="村组">
+              <a-select
+                :allowClear="true"
+                v-model="queryParam.village"
+                style="width: 100%"
+                placeholder="请选择村组">
+                <a-select-option v-for="(item, index) in villageData" :key="index" :value="item.value" :lable="item.name">
+                  {{ item.name }}
+                </a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-col>
+          <a-col :md="6" :sm="24">
+            <a-form-item label="年龄区间">
+              <a-select v-model="queryParam.ageRange" placeholder="请选择年龄区间" default-value="null" style="width: 100%">
+                <a-select-option value="1">50岁以下</a-select-option>
+                <a-select-option value="2">50岁-59岁</a-select-option>
+                <a-select-option value="3">60岁-69岁</a-select-option>
+                <a-select-option value="4">70岁-79岁</a-select-option>
+                <a-select-option value="5">80岁-89岁</a-select-option>
+                <a-select-option value="6">90岁以上</a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-col>
+          <a-col :md="6" :sm="24">
+            <a-form-item label="性别">
+              <a-select v-model="queryParam.gender" placeholder="请选择性别" default-value="null" style="width: 100%">
+                <a-select-option value="1">男</a-select-option>
+                <a-select-option value="0">女</a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-row :gutter="48">
+          <a-col :md="6" :sm="24">
+            <a-form-item label="护理等级">
+              <a-select
+                :allowClear="true"
+                v-model="queryParam.nursingLevel"
+                style="width: 100%"
+                placeholder="请选择护理等级">
+                <a-select-option v-for="(item, index) in nursingLevelData" :key="index" :value="item.value" :lable="item.name">
+                  {{ item.name }}
+                </a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-col>
+          <a-col :md="6" :sm="24">
+            <a-form-item label="是否在院">
+              <a-select v-model="queryParam.isInHospital" placeholder="请选择" default-value="null" style="width: 100%">
+                <a-select-option value="1">是</a-select-option>
+                <a-select-option value="0">否</a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-col>
+          <a-col :md="6" :sm="24">
+            <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
+            <a-button style="margin-left: 8px" @click="() => {queryParam = {}, $refs.table.refresh(true)}">重置</a-button>
+          </a-col>
+        </a-row>
+
+      </a-form>
+      <s-table ref="table" :columns="columns" :data="loadData" :rowKey="(record) => record.id" >
+        <template slot="bringTime" slot-scope="text, record">
+          {{ record.bringTime | moment('YYYY-MM-DD') }}
+        </template>
+
+        <template slot="sex" slot-scope="text, record">
+          {{ record.sex == 1 ? '男' : '女' }}
+        </template>
+
+        <template slot="isInHospital" slot-scope="text, record">
+          {{ record.isInHospital == 1 ? '是' : '否' }}
+        </template>
+
+        <template slot="title" style="font-weight: bold;">
+          合计人数：{{ totalCount }}
+        </template>
+      </s-table>
+    </div>
+  </a-card>
+</template>
+
+<script>
+import { STable } from '@/components'
+import { personPage } from '@/api/person/personSupport'
+  import {
+    dictionaryDropDown
+  } from '@/api/sys/dictionaryItem'
+
+export default {
+  components: {
+    STable
+  },
+  data () {
+    return {
+      // 查询参数
+      queryParam: { village: '', ageRange: '', gender: '', nursingLevel: '', isInHospital: '' },
+      type: 1,
+      villageData: [],
+      nursingLevelData: [],
+      totalCount: 0,
+      // 表头
+      columns: [
+        {
+          title: '姓名',
+          width: 200,
+          dataIndex: 'name'
+        },
+        {
+          title: '年龄',
+          dataIndex: 'age'
+        },
+        {
+          title: '村组',
+          dataIndex: 'villageName'
+        },
+        {
+          title: '护理等级',
+          dataIndex: 'nursingLevelName'
+        },
+        {
+          title: '供养类型',
+          dataIndex: 'supportTypeName'
+        },
+        {
+          title: '性别',
+          dataIndex: 'sex',
+          scopedSlots: { customRender: 'sex' }
+        },
+        {
+          title: '入院时间',
+          dataIndex: 'bringTime',
+          scopedSlots: { customRender: 'bringTime' }
+        },
+        {
+          title: '居住房间',
+          dataIndex: 'roomBed'
+        },
+        {
+          title: '是否在院',
+          dataIndex: 'isInHospital',
+          scopedSlots: { customRender: 'isInHospital' }
+        }
+      ],
+
+      // 加载数据方法 必须为 Promise 对象
+      loadData: (parameter) => {
+        return personPage(Object.assign(parameter, this.queryParam,
+            { type: this.type }
+          )).then((res) => {
+           this.totalCount = res.total
+          return res
+        })
+      }
+    }
+  },
+  // 生命周期 - 创建完成
+  created () {
+    this.dictionaryDropDown()
+  },
+  // 生命周期 - 销毁完成
+  destroyed () { },
+  // 监控data中的数据变化
+  watch: {
+    $route (to, from) { // to是前往的路由  from是去往的路由 同一个组件只会渲染一次
+      this.$refs.table.refresh(true)
+    }
+  },
+  methods: {
+    // 详情
+    handleDetail (record) {
+      this.$router.push({
+        path: '/person/support/detail',
+        query: {
+          type: this.type,
+          id: record.id
+        }
+      })
+    },
+    /**
+     * 获取字典数据
+     */
+    dictionaryDropDown () {
+      // 所在村
+      dictionaryDropDown({
+        dictionaryCode: '0040'
+      }).then(res => {
+        this.villageData = res.data
+      })
+      // 护理等级
+      dictionaryDropDown({
+        dictionaryCode: '0021'
+      }).then(res => {
+        this.nursingLevelData = res.data
+      })
+    }
+  }
+}
+</script>

src/views/index/welcome.vue

@@ -5,15 +5,18 @@
     </div>
 
   </a-card> -->
-  <myHome></myHome>
+  <!-- <myHome></myHome> -->
+  <dataSupport></dataSupport>
 </template>
 
 <script>
 import { mapState } from 'vuex'
 import MyHome from '@/views/data/index.vue'
+import DataSupport from '@/views/index/dataSupportList.vue'
 export default {
   components: {
-    MyHome
+    MyHome,
+    DataSupport
   },
   data () {
     return {}

src/views/person/SupportAdd.vue

@@ -35,15 +35,7 @@
         </a-col>
       </a-row>
 
-      <a-row>
+      <!--
-        <a-col :span="12">
-          <a-form-model-item ref="phone" label="联系方式" prop="phone">
-            <a-input v-model="form.phone" />
-          </a-form-model-item>
-        </a-col>
-
-      </a-row>
-
       <a-row v-if="form.type == 1">
         <a-col :span="12">
           <a-form-model-item ref="ifDisabled" label="是否残疾" prop="ifDisabled">
@@ -62,6 +54,15 @@
             <a-input v-model="form.disabilityLevel" />
           </a-form-model-item>
         </a-col>
+      </a-row>-->
+
+      <template v-if="form.type == 2">
+        <a-row>
+          <a-col :span="12">
+            <a-form-model-item ref="phone" label="联系方式" prop="phone">
+              <a-input v-model="form.phone" />
+            </a-form-model-item>
+          </a-col>
         </a-row>
 
         <a-row>
@@ -77,15 +78,9 @@
           </a-col>
         </a-row>
 
-      <template v-if="form.type == 2">
         <a-row>
           <a-col>
-            <a-form-model-item
+            <a-form-model-item ref="health" label="身体状况" prop="health" :label-col="{ span: 2 }" :wrapper-col="{ span: 21 }">
-              ref="health"
-              label="身体状况"
-              prop="health"
-              :label-col="{ span: 2 }"
-              :wrapper-col="{ span: 21 }">
               <a-input v-model="form.health" />
             </a-form-model-item>
           </a-col>
@@ -113,6 +108,47 @@
       </template>
 
       <template v-if="form.type == 1">
+        <a-row>
+          <a-col>
+            <a-form-model-item
+              ref="nursingLevel"
+              label="护理等级"
+              prop="nursingLevel"
+              :label-col="{ span: 2 }"
+              :wrapper-col="{ span: 21 }">
+              <a-select v-model="form.nursingLevel" style="width: 100%" placeholder="请选择护理等级">
+                <a-select-option v-for="(item, index) in nursingLevelData" :key="index" :value="item.value" :lable="item.name">
+                  {{ item.name }}
+                </a-select-option>
+              </a-select>
+            </a-form-model-item>
+          </a-col>
+        </a-row>
+
+        <a-row>
+          <a-col>
+            <a-form-model-item ref="village" label="所在村" prop="village" :label-col="{ span: 2 }" :wrapper-col="{ span: 21 }">
+              <a-select v-model="form.village" style="width: 100%" placeholder="请选择存">
+                <a-select-option v-for="(item, index) in villageData" :key="index" :value="item.value" :lable="item.name">
+                  {{ item.name }}
+                </a-select-option>
+              </a-select>
+            </a-form-model-item>
+          </a-col>
+        </a-row>
+
+        <a-row>
+          <a-col>
+            <a-form-model-item
+              ref="residenceVillage"
+              label="归属村组"
+              prop="residenceVillage"
+              :label-col="{ span: 2 }"
+              :wrapper-col="{ span: 21 }">
+              <a-input v-model="form.residenceVillage" />
+            </a-form-model-item>
+          </a-col>
+        </a-row>
 
         <a-row>
           <a-col>
@@ -126,7 +162,7 @@
           </a-col>
         </a-row>
 
-        <a-row>
+        <!-- <a-row>
           <a-col>
             <a-form-model-item ref="selfCare" label="自理情况登记" prop="selfCare" :label-col="{ span: 2 }" :wrapper-col="{ span: 21 }">
               <a-textarea :autoSize="{ minRows: 2, maxRows: 5 }" v-model="form.selfCare" />
@@ -167,10 +203,29 @@
             </a-form-model-item>
           </a-col>
         </a-row>
-
+-->
         <a-row>
           <a-col :span="12">
-            <a-form-model-item ref="ifHelpPoor" label="是否精准扶贫户" prop="ifHelpPoor" :label-col="{ span: 5 }">
+            <a-form-model-item ref="isInHospital" label="是否在院" prop="isInHospital" >
+              <a-radio-group v-model="form.isInHospital">
+                <a-radio :value="1">
+                  是
+                </a-radio>
+                <a-radio :value="0">
+                  否
+                </a-radio>
+              </a-radio-group>
+            </a-form-model-item>
+          </a-col>
+          <a-col :span="12" v-show="form.isInHospital == 0">
+            <a-form-model-item ref="hospitalMessage" label="住院信息" prop="hospitalMessage">
+              <a-input v-model="form.hospitalMessage" />
+            </a-form-model-item>
+          </a-col>
+        </a-row>
+        <a-row>
+          <a-col :span="12">
+            <a-form-model-item ref="ifHelpPoor" label="是否精准扶贫户" prop="ifHelpPoor" >
               <a-radio-group v-model="form.ifHelpPoor">
                 <a-radio :value="1">
                   是
@@ -182,21 +237,26 @@
             </a-form-model-item>
           </a-col>
         </a-row>
-      </template>
+
-      <template v-if="form.id && form.type == 1">
-        <a-divider orientation="left">详细信息</a-divider>
         <a-row>
-          <a-col>
+          <a-col :span="12" >
-            <a-form-model-item
+            <a-form-model-item ref="relativeContact" label="亲属联系方式" prop="relativeContact">
-              ref="residenceVillage"
+              <a-input v-model="form.relativeContact" />
-              label="户籍村属"
-              prop="residenceVillage"
-              :label-col="{ span: 2 }"
-              :wrapper-col="{ span: 21 }">
-              <a-input v-model="form.residenceVillage" />
             </a-form-model-item>
           </a-col>
         </a-row>
+
+        <a-row>
+          <a-col :span="12">
+            <a-form-model-item ref="bringTime" label="入住福利院时间" prop="bringTime">
+              <a-date-picker v-model="form.bringTime" :format="'YYYY-MM-DD'" valueFormat="YYYY-MM-DD" placeholder="入住福利院时间" />
+            </a-form-model-item>
+          </a-col>
+        </a-row>
+      </template>
+
+      <template v-if="form.id && form.type == 1">
+        <a-divider orientation="left">详细信息</a-divider>
         <a-row>
           <a-col>
             <a-form-model-item
@@ -422,11 +482,14 @@
           age: null,
           sex: null,
           phone: '',
-          supportType: 2,
+          supportType: 1,
           residenceAddress: '',
           ifDisabled: 0,
           ifHelpPoor: 0,
+          isInHospital: 1,
           maritalStatus: null,
+          nursingLevel: null,
+          village: null,
           familyList: [
             // { name: 'Tom', relation: '20', phone: '13872572250', workInfo:'ces' }
           ]
@@ -434,6 +497,8 @@
         },
         supportTypeData: [],
         maritalStatusData: [],
+        nursingLevelData: [],
+        villageData: [],
         rules: {
           name: [{
               required: true,
@@ -455,6 +520,16 @@
             required: true,
             message: '请输入身份证号',
             trigger: 'blur'
+          }],
+          nursingLevel: [{
+            required: true,
+            message: '请选择护理等级',
+            trigger: 'blur'
+          }],
+          village: [{
+            required: true,
+            message: '请选择所在村',
+            trigger: 'blur'
           }]
         }
       }
@@ -484,10 +559,10 @@
 
           // 动态回显身份证号相关信息
           this.idCardNoBlur()
-          this.form.supportType = parseInt(form.supportType)
+          // this.form.supportType = parseInt(form.supportType)
-          this.form.maritalStatus = parseInt(form.maritalStatus)
+          // this.form.maritalStatus = parseInt(form.maritalStatus)
 
-          this.dataLoaded = true;
+          this.dataLoaded = true
         })
       },
       onSubmit (e) {
@@ -582,6 +657,18 @@
         }).then(res => {
           this.maritalStatusData = res.data
         })
+        // 所在村
+        dictionaryDropDown({
+          dictionaryCode: '0040'
+        }).then(res => {
+          this.villageData = res.data
+        })
+        // 护理等级
+        dictionaryDropDown({
+          dictionaryCode: '0021'
+        }).then(res => {
+          this.nursingLevelData = res.data
+        })
       },
       // 返回
       goback () {

src/views/person/SupportDetail.vue

@@ -35,16 +35,7 @@
         </a-col>
       </a-row>
 
-      <a-row>
+      <!-- <a-row v-if="form.type == 1">
-        <a-col :span="12">
-          <a-form-model-item ref="phone" label="联系电话" prop="phone">
-            <a-input disabled v-model="form.phone" />
-          </a-form-model-item>
-        </a-col>
-
-      </a-row>
-
-      <a-row v-if="form.type == 1">
         <a-col :span="12">
           <a-form-model-item ref="ifDisabled" label="是否残疾" prop="ifDisabled">
             <a-radio-group v-model="form.ifDisabled" disabled>
@@ -62,8 +53,16 @@
             <a-input disabled v-model="form.disabilityLevel" />
           </a-form-model-item>
         </a-col>
-      </a-row>
+      </a-row> -->
 
+      <template v-if="form.type == 2">
+        <a-row>
+          <a-col :span="12">
+            <a-form-model-item ref="phone" label="联系电话" prop="phone">
+              <a-input disabled v-model="form.phone" />
+            </a-form-model-item>
+          </a-col>
+        </a-row>
         <a-row>
           <a-col>
             <a-form-model-item
@@ -76,8 +75,6 @@
             </a-form-model-item>
           </a-col>
         </a-row>
-
-      <template v-if="form.type == 2">
         <a-row>
           <a-col>
             <a-form-model-item
@@ -113,7 +110,47 @@
       </template>
 
       <template v-if="form.type == 1">
+        <a-row>
+          <a-col>
+            <a-form-model-item
+              ref="nursingLevel"
+              label="护理等级"
+              prop="nursingLevel"
+              :label-col="{ span: 2 }"
+              :wrapper-col="{ span: 21 }">
+              <a-select disabled v-model="form.nursingLevel" style="width: 100%" placeholder="请选择护理等级">
+                <a-select-option v-for="(item, index) in nursingLevelData" :key="index" :value="item.value" :lable="item.name">
+                  {{ item.name }}
+                </a-select-option>
+              </a-select>
+            </a-form-model-item>
+          </a-col>
+        </a-row>
 
+        <a-row>
+          <a-col>
+            <a-form-model-item ref="village" label="所在村" prop="village" :label-col="{ span: 2 }" :wrapper-col="{ span: 21 }">
+              <a-select disabled v-model="form.village" style="width: 100%" placeholder="请选择存">
+                <a-select-option v-for="(item, index) in villageData" :key="index" :value="item.value" :lable="item.name">
+                  {{ item.name }}
+                </a-select-option>
+              </a-select>
+            </a-form-model-item>
+          </a-col>
+        </a-row>
+
+        <a-row>
+          <a-col>
+            <a-form-model-item
+              ref="residenceVillage"
+              label="归属村组"
+              prop="residenceVillage"
+              :label-col="{ span: 2 }"
+              :wrapper-col="{ span: 21 }">
+              <a-input v-model="form.residenceVillage" disabled />
+            </a-form-model-item>
+          </a-col>
+        </a-row>
         <a-row>
           <a-col>
             <a-form-model-item ref="supportType" label="供养方式" prop="supportType" :label-col="{ span: 2 }" :wrapper-col="{ span: 21 }">
@@ -126,6 +163,7 @@
           </a-col>
         </a-row>
 
+        <!--
         <a-row>
           <a-col>
             <a-form-model-item ref="selfCare" label="自理情况登记" prop="selfCare" :label-col="{ span: 2 }" :wrapper-col="{ span: 21 }">
@@ -167,10 +205,29 @@
             </a-form-model-item>
           </a-col>
         </a-row>
-
+ -->
         <a-row>
           <a-col :span="12">
-            <a-form-model-item ref="ifHelpPoor" label="是否精准扶贫户" prop="ifHelpPoor" :label-col="{ span: 5 }">
+            <a-form-model-item ref="isInHospital" label="是否在院" prop="isInHospital" >
+              <a-radio-group v-model="form.isInHospital" disabled>
+                <a-radio :value="1">
+                  是
+                </a-radio>
+                <a-radio :value="0">
+                  否
+                </a-radio>
+              </a-radio-group>
+            </a-form-model-item>
+          </a-col>
+          <a-col :span="12" v-show="form.isInHospital == 0">
+            <a-form-model-item ref="hospitalMessage" label="住院信息" prop="hospitalMessage">
+              <a-input v-model="form.hospitalMessage" disabled/>
+            </a-form-model-item>
+          </a-col>
+        </a-row>
+        <a-row>
+          <a-col :span="12">
+            <a-form-model-item ref="ifHelpPoor" label="是否精准扶贫户" prop="ifHelpPoor" >
               <a-radio-group v-model="form.ifHelpPoor" disabled>
                 <a-radio :value="1">
                   是
@@ -182,21 +239,23 @@
             </a-form-model-item>
           </a-col>
         </a-row>
-      </template>
-      <template v-if="form.id && form.type == 1">
-        <a-divider orientation="left">详细信息</a-divider>
         <a-row>
-          <a-col>
+          <a-col :span="12" >
-            <a-form-model-item
+            <a-form-model-item ref="relativeContact" label="亲属联系方式" prop="relativeContact">
-              ref="residenceVillage"
+              <a-input v-model="form.relativeContact" disabled />
-              label="户籍村属"
-              prop="residenceVillage"
-              :label-col="{ span: 2 }"
-              :wrapper-col="{ span: 21 }">
-              <a-input disabled v-model="form.residenceVillage" />
             </a-form-model-item>
           </a-col>
         </a-row>
+        <a-row>
+          <a-col :span="12">
+            <a-form-model-item ref="bringTime" label="入住福利院时间" prop="bringTime">
+              <a-date-picker disabled v-model="form.bringTime" :format="'YYYY-MM-DD'" valueFormat="YYYY-MM-DD" placeholder="入住福利院时间" />
+            </a-form-model-item>
+          </a-col>
+        </a-row>
+      </template>
+      <template v-if="form.id && form.type == 1">
+        <a-divider orientation="left">详细信息</a-divider>
         <a-row>
           <a-col>
             <a-form-model-item
@@ -426,14 +485,18 @@
           residenceAddress: '',
           ifDisabled: 0,
           ifHelpPoor: 0,
+          isInHospital: 1,
           maritalStatus: null,
+          nursingLevel: null,
+          village: null,
           familyList: [
-            { name: 'Tom', relation: '20', phone: '13872572250', workInfo: 'ces' }
           ]
           // disabilityLevel:''
         },
         supportTypeData: [],
         maritalStatusData: [],
+        nursingLevelData: [],
+        villageData: [],
         rules: {
           name: [{
               required: true,
@@ -597,6 +660,18 @@
         }).then(res => {
           this.maritalStatusData = res.data
         })
+        // 所在村
+        dictionaryDropDown({
+          dictionaryCode: '0040'
+        }).then(res => {
+          this.villageData = res.data
+        })
+        // 护理等级
+        dictionaryDropDown({
+          dictionaryCode: '0021'
+        }).then(res => {
+          this.nursingLevelData = res.data
+        })
       },
       // 返回
       goback () {

src/views/person/SupportList.vue

@@ -29,7 +29,7 @@
           <a-button v-if="hasPerm('person:support:add')" type="primary" icon="plus" @click="handleCreate" >新增</a-button>
         </a-space>
       </a-form>
-      <s-table ref="table" :columns="columns" :data="loadData" :rowKey="(record) => record.id" >
+      <s-table ref="table" :columns="type==1?columns:columns2" :data="loadData" :rowKey="(record) => record.id" >
         <template slot="bringTime" slot-scope="text, record">
           {{ record.bringTime | moment('YYYY-MM-DD') }}
         </template>
@@ -63,6 +63,42 @@ export default {
       type: 1,
       // 表头
       columns: [
+        {
+          title: '姓名',
+          width: 200,
+          dataIndex: 'name'
+        },
+        {
+          title: '身份证号',
+          dataIndex: 'idCardNo'
+        },
+        {
+          title: '村组',
+          dataIndex: 'villageName'
+        },
+        {
+          title: '护理等级',
+          dataIndex: 'nursingLevelName'
+        },
+        {
+          title: '供养类型',
+          dataIndex: 'supportTypeName'
+        },
+        {
+          title: '入院时间',
+          dataIndex: 'bringTime',
+          scopedSlots: { customRender: 'bringTime' }
+        },
+        {
+          title: '操作',
+          key: 'operation',
+          fixed: 'right',
+          width: 200,
+          scopedSlots: { customRender: 'action' }
+        }
+      ],
+      // 表头
+      columns2: [
         {
           title: '姓名',
           width: 200,
@@ -77,7 +113,7 @@ export default {
           dataIndex: 'phone'
         },
         {
-          title: this.type == 1 ? '纳入时间' : '入住时间',
+          title: '入住时间',
           dataIndex: 'bringTime',
           scopedSlots: { customRender: 'bringTime' }
         },