From 62edface3ca3f15332c92c73aea5d6cdc1e06db3 Mon Sep 17 00:00:00 2001
From: mhsnet <mhsnet@163.com>
Date: Wed, 22 Mar 2023 16:26:18 +0800
Subject: [PATCH] =?UTF-8?q?PC=E9=A6=96=E9=A1=B5=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/VisualPortal/LayoutB/index.vue |  69 ++
 .../components/VisualPortal/LayoutC/index.vue | 104 +++
 .../components/VisualPortal/Todo/index.vue    |  26 +-
 SC-web/src/store/modules/tagsView.js          |   2 +
 .../dashboard/admin/components/LineChartA.vue | 132 ++++
 .../dashboard/admin/components/LineChartB.vue | 132 ++++
 SC-web/src/views/dashboard/admin/index.vue    | 597 +++++++++++-------
 7 files changed, 812 insertions(+), 250 deletions(-)
 create mode 100644 SC-web/src/components/VisualPortal/LayoutB/index.vue
 create mode 100644 SC-web/src/components/VisualPortal/LayoutC/index.vue
 create mode 100644 SC-web/src/views/dashboard/admin/components/LineChartA.vue
 create mode 100644 SC-web/src/views/dashboard/admin/components/LineChartB.vue

diff --git a/SC-web/src/components/VisualPortal/LayoutB/index.vue b/SC-web/src/components/VisualPortal/LayoutB/index.vue
new file mode 100644
index 00000000..8684fb8a
--- /dev/null
+++ b/SC-web/src/components/VisualPortal/LayoutB/index.vue
@@ -0,0 +1,69 @@
+<template>
+  <div style="margin-bottom: 12px;">
+    <el-row :gutter="12">
+      <template v-for="item in layout">
+        <el-col :span="12" v-if="item.jnpfKey === 'todo'">
+            <Todo v-if="item.jnpfKey === 'todo'" :title="item.title" />
+        </el-col>
+        <el-col :span="12" v-if="item.jnpfKey === 'commonFunc'">
+            <CommonFunc v-if="item.jnpfKey === 'commonFunc'" :title="item.title" :list="item.list" />
+        </el-col>
+      </template>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import {
+  Todo,
+  CommonFunc,
+} from "@/components/VisualPortal"
+//import VueGridLayout from 'vue-grid-layout'
+export default {
+  props: {
+    layout: { type: Array, default: () => [] },
+    mask: { type: Boolean, default: false },
+  },
+  components: {
+    Todo,
+    CommonFunc,
+  },
+}
+</script>
+<style lang="scss" scoped>
+.layout-area {
+  height: 300px;
+  overflow: hidden;
+
+  .el-scrollbar__wrap {
+    margin-bottom: 0 !important;
+    overflow-x: auto;
+  }
+
+  .el-scrollbar__bar.is-horizontal>div {
+    display: none;
+  }
+
+  .el-card {
+    width: 100%;
+    height: 100%;
+
+    .el-card__body {
+      padding: 0;
+    }
+  }
+
+  .vue-grid-item {
+    position: relative;
+
+    .mask {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 1;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/SC-web/src/components/VisualPortal/LayoutC/index.vue b/SC-web/src/components/VisualPortal/LayoutC/index.vue
new file mode 100644
index 00000000..d0fee5f6
--- /dev/null
+++ b/SC-web/src/components/VisualPortal/LayoutC/index.vue
@@ -0,0 +1,104 @@
+<template>
+  <div style="margin-bottom: 12px;">
+    <el-row :gutter="12">
+      <template v-for="item in layout">
+        <el-col :span="12" v-if="item.jnpfKey === 'barChart'">
+          <HBarChart :title="item.title" :option="item.option" :dataType="item.dataType" :propsApi="item.propsApi" />
+        </el-col>
+        <el-col :span="12" v-if="item.jnpfKey === 'annularChart'">
+          <HAnnularChart :title="item.title" :option="item.option" :dataType="item.dataType" :propsApi="item.propsApi" />
+        </el-col>
+        <el-col :span="12" v-if="item.jnpfKey === 'areaChart'">
+          <HAreaChart :title="item.title" :option="item.option" :dataType="item.dataType" :propsApi="item.propsApi" />
+        </el-col>
+        <el-col :span="12" v-if="item.jnpfKey === 'lineChart'">
+          <HLineChart :title="item.title" :option="item.option" :dataType="item.dataType" :propsApi="item.propsApi" />
+        </el-col>
+        <el-col :span="12" v-if="item.jnpfKey === 'pieChart'">
+          <HPieChart :title="item.title" :option="item.option" :dataType="item.dataType" :propsApi="item.propsApi" />
+        </el-col>
+        <el-col :span="12" v-if="item.jnpfKey === 'radarChart'">
+          <HRadarChart  :title="item.title" :option="item.option"
+            :dataType="item.dataType" :propsApi="item.propsApi" />
+        </el-col>
+      </template>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import {
+  Todo,
+  CommonFunc,
+  TodoList,
+  HNotice,
+  HEmail,
+  DataBoard,
+  HBarChart,
+  HAnnularChart,
+  HAreaChart,
+  HLineChart,
+  HPieChart,
+  HRadarChart
+} from "@/components/VisualPortal"
+import VueGridLayout from 'vue-grid-layout'
+export default {
+  props: {
+    layout: { type: Array, default: () => [] },
+    mask: { type: Boolean, default: false },
+  },
+  components: {
+    GridLayout: VueGridLayout.GridLayout,
+    GridItem: VueGridLayout.GridItem,
+    Todo,
+    CommonFunc,
+    TodoList,
+    HNotice,
+    HEmail,
+    DataBoard,
+    HBarChart,
+    HAnnularChart,
+    HAreaChart,
+    HLineChart,
+    HPieChart,
+    HRadarChart
+  },
+}
+</script>
+<style lang="scss" scoped>
+.layout-area {
+  height: 100%;
+  overflow: hidden;
+
+  >>>.el-scrollbar__wrap {
+    margin-bottom: 0 !important;
+    overflow-x: auto;
+  }
+
+  >>>.el-scrollbar__bar.is-horizontal>div {
+    display: none;
+  }
+
+  >>>.el-card {
+    width: 100%;
+    height: 100%;
+
+    .el-card__body {
+      padding: 0;
+    }
+  }
+
+  .vue-grid-item {
+    position: relative;
+
+    .mask {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 1;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/SC-web/src/components/VisualPortal/Todo/index.vue b/SC-web/src/components/VisualPortal/Todo/index.vue
index ff070f40..9cb96bf1 100644
--- a/SC-web/src/components/VisualPortal/Todo/index.vue
+++ b/SC-web/src/components/VisualPortal/Todo/index.vue
@@ -1,27 +1,27 @@
 <template>
   <el-card shadow="never" class="todo-box">
     <div slot="header" class="portal-common-title">
-      <span>{{title}}</span>
+      <span>{{ title }}</span>
     </div>
-    <div class="todo-box-body">
+    <div class="todo-box-body sty-now">
       <router-link class="item" to="/workFlow/flowTodo">
         <i class="icon-ym icon-ym-flowTodo"></i>
         <div class="text">
-          <p class="num">{{toBeReviewed}}</p>
+          <p class="num">{{ toBeReviewed }}</p>
           <p class="name">待我审核</p>
         </div>
       </router-link>
       <router-link class="item" to="/workFlow/entrust">
         <i class="icon-ym icon-ym-flowEntrust"></i>
         <div class="text">
-          <p class="num">{{entrust}}</p>
+          <p class="num">{{ entrust }}</p>
           <p class="name">流程委托</p>
         </div>
       </router-link>
       <router-link class="item" to="/workFlow/flowDone">
         <i class="icon-ym icon-ym-flowDone"></i>
         <div class="text">
-          <p class="num">{{flowDone}}</p>
+          <p class="num">{{ flowDone }}</p>
           <p class="name">已办事宜</p>
         </div>
       </router-link>
@@ -57,19 +57,22 @@ export default {
 </script>
 <style lang="scss" scoped>
 .todo-box {
-  >>> .el-card__body {
+  .el-card__body {
     width: 100%;
     height: calc(100% - 55px);
   }
+
   .todo-box-body {
-    padding: 0 30px;
+    padding: 7px 30px;
     height: 100%;
     display: flex;
     justify-content: space-between;
     align-items: center;
+
     .item {
       height: 56px;
       display: block;
+
       i {
         width: 56px;
         height: 56px;
@@ -81,23 +84,29 @@ export default {
         text-align: center;
         line-height: 56px;
         font-size: 30px;
+
         &.icon-ym-flowTodo {
           background: #f68900;
         }
+
         &.icon-ym-flowEntrust {
           background: #1890ff;
         }
+
         &.icon-ym-flowDone {
           background: #7b1ae1;
         }
       }
+
       .text {
         display: inline-block;
         height: 56px;
+
         .num {
           font-size: 20px;
           line-height: 36px;
         }
+
         .name {
           font-size: 14px;
           color: #666;
@@ -105,5 +114,4 @@ export default {
       }
     }
   }
-}
-</style>
\ No newline at end of file
+}</style>
\ No newline at end of file
diff --git a/SC-web/src/store/modules/tagsView.js b/SC-web/src/store/modules/tagsView.js
index 4abf4c46..549e9fd8 100644
--- a/SC-web/src/store/modules/tagsView.js
+++ b/SC-web/src/store/modules/tagsView.js
@@ -5,6 +5,8 @@ const state = {
 
 const mutations = {
   ADD_VISITED_VIEW: (state, view) => {
+    // 封门户
+    if(view.name === 'dashboard') return
     if (state.visitedViews.some(v => v.path === view.path)) return
     state.visitedViews.push(
       Object.assign({}, view, {
diff --git a/SC-web/src/views/dashboard/admin/components/LineChartA.vue b/SC-web/src/views/dashboard/admin/components/LineChartA.vue
new file mode 100644
index 00000000..1c52249e
--- /dev/null
+++ b/SC-web/src/views/dashboard/admin/components/LineChartA.vue
@@ -0,0 +1,132 @@
+<template>
+  <div id="charta" style="width:100%;height:400px;margin-top:30px;"></div>
+</template>
+
+<script>
+import echarts from 'echarts'
+import resize from './mixins/resize'
+export default {
+  name: 'charta',
+  mixins: [resize],
+  data() {
+    return {
+      chart: null,
+      option: {
+        title: {
+          text: '近7日采购量',
+          textStyle: {
+            fontSize: 16,
+            fontWeight: 900,
+            color: '#333'
+          }
+        },
+        grid: {
+          x: 80,
+          y: 50,
+          x2: 50,
+          y2: 60,
+          borderWidth: 0
+        },
+        // legend: {
+        //   data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎'],
+        //   top : '55%',
+        //   orient: 'vertical',
+        //   textStyle:{//图例文字的样式
+        //     color:'#dbdbdb' 
+        //   }
+        // },
+        tooltip: {
+          trigger: 'axis',
+          // formatter:function(){
+          //   return '整天数据'+"<br>"+'交易'
+          // }
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: ['2AM', '4AM', '6AM', '8AM', '10AM',
+            '12AM', '2PM', '4PM', '6PM', '8PM', '10PM', '12PM'],
+          axisLine: {
+            show: false, //是否显示x轴
+            lineStyle: {
+              // color: '#dbdbdb', // y坐标轴的轴线颜色
+              // width: 1, //这里是坐标轴的宽度,可以去掉
+            }
+          },
+          axisTick: {
+            show: false, //是否显示刻度
+          },
+          // X轴的字体样式
+          axisLabel: {
+            show: true, //这行代码控制着坐标轴y轴的文字是否显示
+            textStyle: {
+              color: '#666', //X轴上的字体颜色
+              fontSize: '12', // X轴字体大小
+
+            }
+          },
+        },
+        yAxis: {
+          type: 'value',
+          // y轴的颜色和宽度
+          axisLine: {
+            show: false, //是否显示y轴
+            lineStyle: {
+              // color: '#000', // y坐标轴的轴线颜色
+              // width: 1, //这里是坐标轴的宽度,可以去掉
+            }
+          },
+          axisTick: {
+            show: false, //是否显示刻度
+          },
+          // y轴的字体样式
+          axisLabel: {
+            show: true, //这行代码控制着坐标轴y轴的文字是否显示
+            textStyle: {
+              color: '#666', //y轴上的字体颜色
+              fontSize: '12' // y轴字体大小
+            }
+          },
+        },
+        series: [{
+          data: [0, 2820, 8932, 5700, 7901, 4934, 5000, 3000, 4090, 2330, 3820, 0],
+          type: 'line',
+          radius: '100%',
+          center: ['100%', '50%'],
+          areaStyle: {},
+          smooth: true,
+          areaStyle: {
+            color: '#d0e2f3'
+          },
+          itemStyle: {
+            normal: {
+              color: '#1890FF', //改变折线点的颜色
+              lineStyle: {
+                color: '#1890FF' //改变折线颜色
+              }
+            }
+          },
+          stack: '总量',
+        }]
+      }
+    }
+  },
+  mounted() {
+    this.initChart()
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(document.getElementById('charta'))
+      this.chart.setOption(this.option);
+      window.onresize = this.chart.resize()
+    }
+  }
+}
+</script>
diff --git a/SC-web/src/views/dashboard/admin/components/LineChartB.vue b/SC-web/src/views/dashboard/admin/components/LineChartB.vue
new file mode 100644
index 00000000..c546535e
--- /dev/null
+++ b/SC-web/src/views/dashboard/admin/components/LineChartB.vue
@@ -0,0 +1,132 @@
+<template>
+  <div id="chartb" style="width:100%;height:400px;margin-top:30px;"></div>
+</template>
+
+<script>
+import echarts from 'echarts'
+import resize from './mixins/resize'
+export default {
+  name: 'chartb',
+  mixins: [resize],
+  data() {
+    return {
+      chart: null,
+      option: {
+        title: {
+          text: '近7日销售量',
+          textStyle: {
+            fontSize: 16,
+            fontWeight: 900,
+            color: '#333'
+          }
+        },
+        grid: {
+          x: 80,
+          y: 50,
+          x2: 50,
+          y2: 60,
+          borderWidth: 0
+        },
+        // legend: {
+        //   data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎'],
+        //   top : '55%',
+        //   orient: 'vertical',
+        //   textStyle:{//图例文字的样式
+        //     color:'#dbdbdb' 
+        //   }
+        // },
+        tooltip: {
+          trigger: 'axis',
+          // formatter:function(){
+          //   return '整天数据'+"<br>"+'交易'
+          // }
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: ['2AM', '4AM', '6AM', '8AM', '10AM',
+            '12AM', '2PM', '4PM', '6PM', '8PM', '10PM', '12PM'],
+          axisLine: {
+            show: false, //是否显示x轴
+            lineStyle: {
+              // color: '#dbdbdb', // y坐标轴的轴线颜色
+              // width: 1, //这里是坐标轴的宽度,可以去掉
+            }
+          },
+          axisTick: {
+            show: false, //是否显示刻度
+          },
+          // X轴的字体样式
+          axisLabel: {
+            show: true, //这行代码控制着坐标轴y轴的文字是否显示
+            textStyle: {
+              color: '#666', //X轴上的字体颜色
+              fontSize: '12', // X轴字体大小
+
+            }
+          },
+        },
+        yAxis: {
+          type: 'value',
+          // y轴的颜色和宽度
+          axisLine: {
+            show: false, //是否显示y轴
+            lineStyle: {
+              // color: '#000', // y坐标轴的轴线颜色
+              // width: 1, //这里是坐标轴的宽度,可以去掉
+            }
+          },
+          axisTick: {
+            show: false, //是否显示刻度
+          },
+          // y轴的字体样式
+          axisLabel: {
+            show: true, //这行代码控制着坐标轴y轴的文字是否显示
+            textStyle: {
+              color: '#666', //y轴上的字体颜色
+              fontSize: '12' // y轴字体大小
+            }
+          },
+        },
+        series: [{
+          data: [0, 2820, 8932, 5700, 7901, 4934, 5000, 3000, 4090, 2330, 3820, 0],
+          type: 'line',
+          radius: '100%',
+          center: ['100%', '50%'],
+          areaStyle: {},
+          smooth: true,
+          areaStyle: {
+            color: '#d0e2f3'
+          },
+          itemStyle: {
+            normal: {
+              color: '#1890FF', //改变折线点的颜色
+              lineStyle: {
+                color: '#1890FF' //改变折线颜色
+              }
+            }
+          },
+          stack: '总量',
+        }]
+      }
+    }
+  },
+  mounted() {
+    this.initChart()
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(document.getElementById('chartb'))
+      this.chart.setOption(this.option);
+      window.onresize = this.chart.resize()
+    }
+  }
+}
+</script>
diff --git a/SC-web/src/views/dashboard/admin/index.vue b/SC-web/src/views/dashboard/admin/index.vue
index 3d5cf7b2..c93b8c84 100644
--- a/SC-web/src/views/dashboard/admin/index.vue
+++ b/SC-web/src/views/dashboard/admin/index.vue
@@ -1,5 +1,6 @@
 <template>
   <div class="dashboard-editor-container">
+    <PortalLayoutB :layout="layout" v-if="type === 0" />
     <div class="sale">
       <div class="sale_title">
         <span> 销售指数</span>
@@ -16,7 +17,7 @@
         <li>
           <span>销售目标完成率</span>
           <p class="nums">
-            <count-to :start-val=" 0 " :end-val="92" :duration="3600" class="card-panel-num" />%
+            <count-to :start-val="0" :end-val="92" :duration="3600" class="card-panel-num" />%
           </p>
           <span>-0.3%</span>
         </li>
@@ -41,29 +42,64 @@
       </ul>
     </div>
     <panel-group />
+    <!-- <el-row style="background:#fff;padding:0 16px;margin-bottom:10px;border-radius: 4px;">
+      <div class="dateSelect">
+        <el-date-picker v-model="value1" type="date" placeholder="进7日" size="small">
+        </el-date-picker>
+      </div>
+      <line-chart-a />
+    </el-row>
     <el-row style="background:#fff;padding:0 16px;margin-bottom:10px;border-radius: 4px;">
+      <div class="dateSelect">
+        <el-date-picker v-model="value1" type="date" placeholder="进7日" size="small">
+        </el-date-picker>
+      </div>
+      <line-chart-b />
+    </el-row> -->
+    <el-row :gutter="12">
+      <el-col :span="12">
+        <el-row style="background:#fff;padding:0 16px;margin-bottom:10px;border-radius: 4px;">
+          <div class="dateSelect">
+            <el-date-picker v-model="value1" type="date" placeholder="进7日" size="small">
+            </el-date-picker>
+          </div>
+          <line-chart-a />
+        </el-row>
+      </el-col>
+      <el-col :span="12">
+        <el-row style="background:#fff;padding:0 16px;margin-bottom:10px;border-radius: 4px;">
+          <div class="dateSelect">
+            <el-date-picker v-model="value1" type="date" placeholder="进7日" size="small">
+            </el-date-picker>
+          </div>
+          <line-chart-b />
+        </el-row>
+      </el-col>
+    </el-row>
+    <!-- <el-row style="background:#fff;padding:0 16px;margin-bottom:10px;border-radius: 4px;">
       <div class="dateSelect">
         <el-date-picker v-model="value1" type="date" placeholder="选择日期" size="small">
         </el-date-picker>
       </div>
       <line-chart />
-    </el-row>
+    </el-row> -->
+    <!-- <PortalLayoutC :layout="layout" v-if="type === 0" /> -->
     <el-row :gutter="10" class="notice">
       <el-col :span="12">
         <div class="notice_left">
           <div class="notice_title">
             <div class="title_left">
-              <span>公告通知</span>
+              <span>消息通知</span>
             </div>
             <div class="title_right">
-              查看更多 >
+
             </div>
           </div>
           <div class="no_left_massage">
             <ul>
-              <li v-for="(item,index) in massageList" :key="index">
-                <p class="com-hover">{{item.title}}</p>
-                <span class="time">{{item.listDate}}</span>
+              <li v-for="(item, index) in massageList" :key="index">
+                <p class="com-hover">{{ item.head }}</p>
+                <span class="time">{{ item.creatorTime }}</span>
               </li>
             </ul>
           </div>
@@ -73,7 +109,7 @@
         <div class="notice_right">
           <div class="notice_title">
             <div class="title_left">
-              <span>进行中的项目</span>
+              <span>进行中的合同</span>
             </div>
             <div class="title_right">
               查看更多 >
@@ -138,291 +174,370 @@
 </template>
 
 <script>
-  import echarts from 'echarts'
-  import PanelGroup from './components/PanelGroup'
-  import LineChart from './components/LineChart'
-  import CountTo from 'vue-count-to'
-  export default {
-    name: 'DashboardAdmin',
-    components: {
-      PanelGroup,
-      LineChart,
-      CountTo
-    },
-    data() {
-      return {
-        value1: '',
-        charts: '',
-        opinionData: ["3", "2", "4", "4", "5"],
-        massageList: [
-          { title: '【通知】中秋国庆双节放假通知', listDate: '2020-09-19' },
-          { title: '【公告】你好朋友，感谢使用再生资源智慧管家平台', listDate: '2020-09-18' },
-          { title: '【通知】月饼发放通知，请各部门主管到行政部领取', listDate: '2020-09-17' },
-          { title: '【公告】本季度销售之星名单公示', listDate: '2020-09-16' },
-          { title: '【通知】公司上班时间调整通知，下月执行', listDate: '2020-09-15' },
-          { title: '【公告】公司新上任总裁任命书', listDate: '2020-09-14' },
-          { title: '【公告】午餐补贴通知，本月生效', listDate: '2020-09-13' },
-          { title: '【通知】公司技术交流培训课通知', listDate: '2020-09-12' },
-          { title: '【通知】关于公司组织员工秋季旅游通知', listDate: '2020-09-11' },
-        ]
-      }
+import request from '@/utils/request'
+import { getAuthPortal } from '@/api/onlineDev/portal'
+import PortalLayoutB from '@/components/VisualPortal/LayoutB'
+import PortalLayoutC from '@/components/VisualPortal/LayoutC'
+import { mapGetters } from 'vuex'
+import echarts from 'echarts'
+import PanelGroup from './components/PanelGroup'
+import LineChartA from './components/LineChartA'
+import LineChartB from './components/LineChartB'
+import CountTo from 'vue-count-to'
+export default {
+  name: 'DashboardAdmin',
+  components: {
+    PanelGroup,
+    LineChartA,
+    LineChartB,
+    CountTo,
+    PortalLayoutB,
+    PortalLayoutC
+  },
+  data() {
+    return {
+      type: null,
+      layout: [],
+      value1: '',
+      charts: '',
+      opinionData: ["3", "2", "4", "4", "5"],
+      massageList: []
+    }
+  },
+  computed: {
+    sysConfig() {
+      return this.$store.state.settings.sysConfig
     },
-    computed: {
-      sysConfig() {
-        return this.$store.state.settings.sysConfig
-      }
+    ...mapGetters(['userInfo'])
+  },
+  created() {
+    this.portalId = this.userInfo.portalId
+    this.getData()
+    this.getMsg()
+  },
+  methods: {
+    getData() {
+      getAuthPortal(this.portalId).then(res => {
+        this.type = res.data.type || 0
+        if (res.data) {
+          if (res.data.type === 1) {
+            if (res.data.customUrl && res.data.customUrl !== 1) {
+              this.currentView = (resolve) => require([`@/views/${res.data.customUrl}`], resolve)
+            }
+          } else {
+            if (res.data.formData) {
+              let formData = JSON.parse(res.data.formData)
+              this.layout = formData.layout || []
+            }
+          }
+        }
+      });
     },
-    methods: {}
+    getMsg() {
+      request({
+        url: "/api/messageCenter/MessageCenter/getMobileList",
+        method: "post",
+        data: {
+          currentPage: 1,
+					pageSize: 9,
+        },
+      }).then(res => {
+        if(res.code==200){
+          let _list = res.data.list;
+          this.massageList = _list;
+          //console.log(_list)
+        }
+      }).catch(() => {
+      })
+      console.log('getMsg')
+    }
   }
+}
 </script>
 
 <style lang="scss" scoped>
-  .sale {
-    background: #fff;
-    margin-bottom: 10px;
-    border-radius: 4px;
-    .sale_title {
-      padding-top: 16px;
-      padding-left: 22px;
-      span {
-        &:first-child {
-          font-size: 16px;
-          font-weight: bold;
-          color: #333;
-          margin-right: 10px;
-        }
-        &:nth-child(2) {
-          color: #999;
-          font-size: 12px;
-        }
+.sale {
+  background: #fff;
+  margin-bottom: 10px;
+  border-radius: 4px;
+
+  .sale_title {
+    padding-top: 16px;
+    padding-left: 22px;
+
+    span {
+      &:first-child {
+        font-size: 16px;
+        font-weight: bold;
+        color: #333;
+        margin-right: 10px;
+      }
+
+      &:nth-child(2) {
+        color: #999;
+        font-size: 12px;
       }
     }
-    .sale_items {
+  }
+
+  .sale_items {
+    display: flex;
+    justify-content: space-around;
+    padding: 34px 0;
+
+    li {
       display: flex;
-      justify-content: space-around;
-      padding: 34px 0;
-      li {
-        display: flex;
-        flex-direction: column;
-        text-align: center;
-        .nums {
+      flex-direction: column;
+      text-align: center;
+
+      .nums {
+        font-size: 26px !important;
+        padding-top: 13px;
+        padding-bottom: 9px;
+        color: #1890ff;
+        font-weight: 600;
+
+        span {
           font-size: 26px !important;
           padding-top: 13px;
           padding-bottom: 9px;
-          color: #1890ff;
+          color: #1890ff !important;
           font-weight: 600;
-          span {
-            font-size: 26px !important;
-            padding-top: 13px;
-            padding-bottom: 9px;
-            color: #1890ff !important;
-            font-weight: 600;
-          }
         }
-        .lastnums {
-          font-size: 26px !important;
-          padding-top: 13px;
-          padding-bottom: 9px;
-          font-weight: 600;
-          color: #333;
+      }
+
+      .lastnums {
+        font-size: 26px !important;
+        padding-top: 13px;
+        padding-bottom: 9px;
+        font-weight: 600;
+        color: #333;
+      }
+
+      &:first-child {
+        span:last-child {
+          color: #08b41f;
         }
-        &:first-child {
-          span:last-child {
+      }
+
+      &:nth-child(4) {
+        span {
+          &:last-child {
             color: #08b41f;
           }
         }
-        &:nth-child(4) {
-          span {
-            &:last-child {
-              color: #08b41f;
-            }
+      }
+
+      &:nth-child(2) {
+        span {
+          &:last-child {
+            color: #b40808;
           }
         }
-        &:nth-child(2) {
-          span {
-            &:last-child {
-              color: #b40808;
-            }
+      }
+
+      &:nth-child(3) {
+        span {
+          &:last-child {
+            color: #999;
           }
         }
-        &:nth-child(3) {
-          span {
-            &:last-child {
-              color: #999;
-            }
+      }
+
+      &:last-child {
+        span {
+          &:last-child {
+            color: #000;
           }
         }
-        &:last-child {
-          span {
-            &:last-child {
-              color: #000;
-            }
-          }
+      }
+
+      span {
+        &:nth-child(2) {
+          font-size: 26px !important;
+          padding-top: 13px;
+          padding-bottom: 9px;
+          color: #1890ff;
+          font-weight: 600;
         }
-        span {
-          &:nth-child(2) {
-            font-size: 26px !important;
-            padding-top: 13px;
-            padding-bottom: 9px;
-            color: #1890ff;
-            font-weight: 600;
-          }
-          &:nth-child(3) {
-            font-size: 12px;
-          }
+
+        &:nth-child(3) {
+          font-size: 12px;
         }
       }
     }
   }
-  .notice {
-    padding-bottom: 20px;
-    .notice_title {
+}
+
+.notice {
+  padding-bottom: 20px;
+
+  .notice_title {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 60px;
+    padding: 0 25px;
+
+    .title_left {
       display: flex;
-      justify-content: space-between;
       align-items: center;
-      height: 60px;
-      padding: 0 25px;
-      .title_left {
-        display: flex;
-        align-items: center;
-        span {
-          font-size: 16px;
-          font-weight: bold;
-          color: #333;
-        }
-      }
-      .title_right {
-        font-size: 12px;
-        color: #999;
-        line-height: 30px;
+
+      span {
+        font-size: 16px;
+        font-weight: bold;
+        color: #333;
       }
     }
-    .notice_right {
-      background: #fff;
-      height: 400px;
-      border-radius: 4px;
-      overflow: hidden;
-      .no_right_massage {
-        li {
+
+    .title_right {
+      font-size: 12px;
+      color: #999;
+      line-height: 30px;
+    }
+  }
+
+  .notice_right {
+    background: #fff;
+    height: 400px;
+    border-radius: 4px;
+    overflow: hidden;
+
+    .no_right_massage {
+      li {
+        display: flex;
+        background: #fff;
+        border: 1px;
+        height: 170px;
+        border-top: 1px solid #f2f2f5;
+
+        .right_item {
+          width: 50%;
+          padding: 16px 20px;
           display: flex;
-          background: #fff;
-          border: 1px;
-          height: 170px;
-          border-top: 1px solid #f2f2f5;
-          .right_item {
-            width: 50%;
-            padding: 16px 20px;
+          flex-direction: column;
+          justify-content: space-between;
+
+          .right-top {
+            font-size: 14px;
             display: flex;
-            flex-direction: column;
-            justify-content: space-between;
-            .right-top {
-              font-size: 14px;
-              display: flex;
-              align-items: center;
-              img {
-                margin-right: 10px;
-              }
-            }
-            p {
-              font-size: 14px;
-              line-height: 22px;
-              padding: 20px 0;
-              color: #999;
-              display: -webkit-box;
-              line-clamp: 3;
-              -webkit-line-clamp: 3;
-              overflow: hidden;
-              text-overflow: ellipsis;
-              /*! autoprefixer: off */
-              -webkit-box-orient: vertical;
-              /* autoprefixer: on */
-            }
-            .bt {
-              display: flex;
-              justify-content: space-between;
-              font-size: 12px;
-              color: #999;
+            align-items: center;
+
+            img {
+              margin-right: 10px;
             }
           }
-          .linet {
-            border-left: 1px solid #f2f2f5;
+
+          p {
+            font-size: 14px;
+            line-height: 22px;
+            padding: 20px 0;
+            color: #999;
+            display: -webkit-box;
+            line-clamp: 3;
+            -webkit-line-clamp: 3;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            /*! autoprefixer: off */
+            -webkit-box-orient: vertical;
+            /* autoprefixer: on */
           }
-        }
-      }
-    }
-    .notice_left {
-      background: #fff;
-      height: 400px;
-      border-radius: 4px;
-      overflow: hidden;
-      .no_left_massage {
-        height: 340px;
-        padding: 10px 20px;
-        border-top: 1px solid #f2f2f5;
-        ul {
-          li {
+
+          .bt {
             display: flex;
             justify-content: space-between;
-            font-size: 14px;
-            color: #303133;
-            padding: 10px 0;
-            cursor: pointer;
-            p {
-              width: calc(100% - 80px);
-              white-space: nowrap;
-              overflow: hidden;
-              text-overflow: ellipsis;
-            }
-            .time {
-              width: 80px;
-              display: inline-block;
-              text-align: right;
-              color: #999999;
-            }
+            font-size: 12px;
+            color: #999;
           }
         }
+
+        .linet {
+          border-left: 1px solid #f2f2f5;
+        }
       }
     }
   }
 
-  .componey {
-    font-size: 14px;
-    text-align: center;
-    color: #999;
-    padding-bottom: 10px;
-  }
-
-  .dashboard-editor-container {
-    background-color: #ebeef5;
-    position: relative;
-    width: 100%;
+  .notice_left {
+    background: #fff;
+    height: 400px;
+    border-radius: 4px;
     overflow: hidden;
 
-    .github-corner {
-      position: absolute;
-      top: 0px;
-      border: 0;
-      right: 0;
-    }
+    .no_left_massage {
+      height: 340px;
+      padding: 10px 20px;
+      border-top: 1px solid #f2f2f5;
 
-    .chart-wrapper {
-      background: #fff;
-      padding: 16px 16px 0;
-      margin-bottom: 20px;
+      ul {
+        li {
+          display: flex;
+          justify-content: space-between;
+          font-size: 14px;
+          color: #303133;
+          padding: 10px 0;
+          cursor: pointer;
+
+          p {
+            width: calc(100% - 80px);
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
+
+          .time {
+            width: 180px;
+            display: inline-block;
+            text-align: right;
+            color: #999999;
+          }
+        }
+      }
     }
   }
-  .dateSelect {
+}
+
+.componey {
+  font-size: 14px;
+  text-align: center;
+  color: #999;
+  padding-bottom: 10px;
+}
+
+.dashboard-editor-container {
+  background-color: #ebeef5;
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+
+  .github-corner {
     position: absolute;
-    right: 67px;
-    top: 38px;
-    z-index: 100;
-    .el-date-editor {
-      width: 160px;
-    }
+    top: 0px;
+    border: 0;
+    right: 0;
   }
-  @media (max-width: 1024px) {
-    .chart-wrapper {
-      padding: 8px;
-    }
+
+  .chart-wrapper {
+    background: #fff;
+    padding: 16px 16px 0;
+    margin-bottom: 20px;
+  }
+}
+
+.dateSelect {
+  position: absolute;
+  right: 67px;
+  top: 38px;
+  z-index: 100;
+
+  .el-date-editor {
+    width: 160px;
+  }
+}
+
+@media (max-width: 1024px) {
+  .chart-wrapper {
+    padding: 8px;
   }
+}
 </style>