修改首页逻辑

修改首页逻辑

src/permission.js

@@ -98,6 +98,15 @@ router.beforeEach(async (to, from, next) => {
                     setUseType(userInfo.data.type_id, 86400)
                     setWebSiteId(userInfo.data.website_id, 86400)
                     console.log("用户有访问权限，访问继续！")
+
+                    //稳定性待测试
+                    if(router.options.routes.length < 2){
+                        console.log("用户路由出现异常，重新获取路由菜单！")
+                        const { roles } = await store.dispatch('user/getInfo')
+                        const accessRoutes = await store.dispatch('permission/generateRoutes', roles)
+                        router.addRoutes(accessRoutes)
+                        console.log("添加路由成功！")
+                    }
                     next()
                 }
             } else {
@@ -107,6 +116,7 @@ router.beforeEach(async (to, from, next) => {
                     const accessRoutes = await store.dispatch('permission/generateRoutes', roles)
                     router.addRoutes(accessRoutes)
                     next({ ...to, replace: true })
+                    console.log("添加路由成功！")
                 } catch (error) {
                     await store.dispatch('user/resetToken')
                     Message.error(error || 'Has Error')

src/utils/baseUrl.js

@@ -7,10 +7,10 @@ const URL = {
   //baseUrl: 'http://adminpre.bjzxtw.org.cn:9501',//pre环境域名
 
   webUrl: 'adminpre.bjzxtw.org.cn',//管理系统地址，如果用户因为某种原因以外退出，需要一个userurl用于请求接口
-  baseUrl: 'http://apipre1.bjzxtw.org.cn:29501',//pre环境域名2
-  // baseUrl: 'http://192.168.1.201:9501',//刘佳伟本地环境
+  //-------------baseUrl: 'http://apipre1.bjzxtw.org.cn:29501',//pre环境域名2
+  //baseUrl: 'http://192.168.1.201:9501',//刘佳伟本地环境
   //baseUrl:'http://192.168.1.115:9501',//冯蕊的本地环境
-  //baseUrl: 'http://192.168.1.125:9501',//刘剑的本地环境
+  baseUrl: 'http://192.168.1.129:9501',//刘剑的本地环境
   //WebsocketUrl: 'ws://192.168.1.201:9506',//刘佳伟 -- websocket地址
   // WebsocketUrl: 'ws://192.168.1.127:9506'//刘剑 -- websocket地址
   //WebsocketUrl: 'ws://183.131.25.186:9506',//测试环境ip -- websocket地址

src/views/dashboard/admin/components/LineChart.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="className" :style="{height:height,width:width}" />
+    <div :class="className" :style="{ height: height, width: width }" />
 </template>
 
 <script>
@@ -8,121 +8,213 @@ require('echarts/theme/macarons') // echarts theme
 import resize from './mixins/resize'
 
 export default {
-  mixins: [resize],
-  props: {
-    className: {
-      type: String,
-      default: 'chart'
+    mixins: [resize],
+    props: {
+        className: {
+            type: String,
+            default: 'chart'
+        },
+        width: {
+            type: String,
+            default: '100%'
+        },
+        height: {
+            type: String,
+            default: '350px'
+        },
+        autoResize: {
+            type: Boolean,
+            default: true
+        },
+        chartData: {
+            type: Array,
+            required: true
+        }
     },
-    width: {
-      type: String,
-      default: '100%'
+    data() {
+        return {
+            chart: null
+        }
     },
-    height: {
-      type: String,
-      default: '350px'
+    watch: {
+        chartData: {
+            deep: true,
+            handler(val) {
+                this.setOptions(val)
+            }
+        }
     },
-    autoResize: {
-      type: Boolean,
-      default: true
+    mounted() {
+        this.$nextTick(() => {
+            this.initChart()
+        })
     },
-    chartData: {
-      type: Array,
-      required: true
-    }
-  },
-  data() {
-    return {
-      chart: null
-    }
-  },
-  watch: {
-    chartData: {
-      deep: true,
-      handler(val) {
-        this.setOptions(val)
-      }
-    }
-  },
-  mounted() {
-    this.$nextTick(() => {
-      this.initChart()
-    })
-  },
-  beforeDestroy() {
-    if (!this.chart) {
-      return
-    }
-    this.chart.dispose()
-    this.chart = null
-  },
-  methods: {
-    initChart() {
-      this.chart = echarts.init(this.$el, 'macarons')
-      this.setOptions(this.chartData)
+    beforeDestroy() {
+        if (!this.chart) {
+            return
+        }
+        this.chart.dispose()
+        this.chart = null
     },
-    setOptions(chartData) {
-      const actualData = chartData.map(item => item.total_count)
-      const dates = chartData.map(item => item.date)
-
-      this.chart.setOption({
-        xAxis: {
-          data: dates,
-          boundaryGap: false,
-          axisTick: {
-            show: false
-          }
+    methods: {
+        initChart() {
+            this.chart = echarts.init(this.$el, 'macarons')
+            this.setOptions(this.chartData)
         },
-        grid: {
-          left: 10,
-          right: 10,
-          bottom: 20,
-          top: 30,
-          containLabel: true
-        },
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: {
-            type: 'cross'
-          },
-          padding: [5, 10]
-        },
-        yAxis: {
-          axisTick: {
-            show: false
-          },
-          minInterval: 1,
-          axisLabel: {
-            formatter: function (value) {
-              return value
+        setOptions(chartData) {
+            //循环一下第一个数据，把日期取出来
+            const dates = chartData[0].data.map(item => item.date)
+            //管理员
+            let data1 = [];
+            for(let item of chartData[0].data) {
+                data1.push(item.count)
             }
-          }
-        },
-        legend: {
-          data: ['新增数量']
-        },
-        series: [{
-          name: '新增数量',
-          smooth: true,
-          type: 'line',
-          itemStyle: {
-            normal: {
-              color: '#3888fa',
-              lineStyle: {
-                color: '#3888fa',
-                width: 2
-              },
-              areaStyle: {
-                color: '#f3f8ff'
-              }
+            //个人会员
+            let data2 = [];
+            for(let item of chartData[1].data) {
+                data2.push(item.count)
+            }
+            //政务会员
+            let data3 = [];
+            for(let item of chartData[2].data) {
+                data3.push(item.count)
             }
-          },
-          data: actualData,
-          animationDuration: 2800,
-          animationEasing: 'quadraticOut'
-        }]
-      })
+            //企业会员
+            let data4 = [];
+            for(let item of chartData[3].data) {
+                data4.push(item.count)
+            }
+            //调研员
+            let data5 = [];
+            for(let item of chartData[4].data) {
+                data5.push(item.count)
+            }
+
+
+            this.chart.setOption({
+                xAxis: {
+                    data: dates,
+                    boundaryGap: false,
+                    axisTick: {
+                        show: false
+                    }
+                },
+                grid: {
+                    left: 10,
+                    right: 10,
+                    bottom: 20,
+                    top: 30,
+                    containLabel: true
+                },
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {
+                        type: 'cross'
+                    },
+                    padding: [5, 10]
+                },
+                yAxis: {
+                    axisTick: {
+                        show: false
+                    },
+                    minInterval: 1,
+                    axisLabel: {
+                        formatter: function (value) {
+                            return value
+                        }
+                    }
+                },
+                legend: {
+                    data: ['管理员','个人会员','政务会员','企业会员','调研员']
+                    //管理员=10000
+                    //个人会员=1
+                    //政务会员=2
+                    //企业会员=3
+                    //调研员=4
+                },
+                series: [{
+                    name: '管理员',
+                    smooth: true,
+                    type: 'line',
+                    itemStyle: {
+                        normal: {
+                            color: '#5570F1',
+                            lineStyle: {
+                                color: '#5570F1',
+                                width: 2
+                            }
+                        }
+                    },
+                    data: data1,
+                    animationDuration: 2800,
+                    animationEasing: 'quadraticOut'
+                },{
+                    name: '个人会员',
+                    smooth: true,
+                    type: 'line',
+                    itemStyle: {
+                        normal: {
+                            color: '#FFCC91',
+                            lineStyle: {
+                                color: '#FFCC91',
+                                width: 2
+                            }
+                        }
+                    },
+                    data: data2,
+                    animationDuration: 2800,
+                    animationEasing: 'quadraticOut'
+                },{
+                    name: '政务会员',
+                    smooth: true,
+                    type: 'line',
+                    itemStyle: {
+                        normal: {
+                            color: '#91FFA5',
+                            lineStyle: {
+                                color: '#91FFA5',
+                                width: 2
+                            }
+                        }
+                    },
+                    data: data3,
+                    animationDuration: 2800,
+                    animationEasing: 'quadraticOut'
+                },{
+                    name: '企业会员',
+                    smooth: true,
+                    type: 'line',
+                    itemStyle: {
+                        normal: {
+                            color: '#FF9191',
+                            lineStyle: {
+                                color: '#FF9191',
+                                width: 2
+                            }
+                        }
+                    },
+                    data: data3,
+                    animationDuration: 2800,
+                    animationEasing: 'quadraticOut'
+                },{
+                    name: '调研员',
+                    smooth: true,
+                    type: 'line',
+                    itemStyle: {
+                        normal: {
+                            color: '#97A5EB',
+                            lineStyle: {
+                                color: '#97A5EB',
+                                width: 2
+                            }
+                        }
+                    },
+                    data: data3,
+                    animationDuration: 2800,
+                    animationEasing: 'quadraticOut'
+                }]
+            })
+        }
     }
-  }
 }
 </script>

src/views/dashboard/admin/components/RingChart.vue

@@ -78,12 +78,13 @@ export default {
           {
             name: '会员类型', // 可以根据需要修改名称
             type: 'pie',
-            radius: ['40%', '60%'], // 环形图，使用内外径
-            center: ['50%', '40%'],
+            radius: ['45%', '60%'], // 环形图，使用内外径
+            center: ['50%', '42%'],
             data: data, // 使用提取的数据
             label: {
               show: true,
-              formatter: '{b}: {c} ({d}%)',
+              //formatter: '{b}: {c} ({d}%)',
+              formatter: '{b}: {c} 人',
             },
             labelLine: {
               show: true,

src/views/dashboard/admin/index.vue

@@ -1,119 +1,575 @@
 <template>
-  <div class="dashboard-editor-container">
-    <!--超级管理员-->
-    <div v-if="userType == 10000">
-      <!--网站，内容，公共栏目数量 start------------------------------------------>
-      <el-row :gutter="32">
-        <el-col :xs="24" :sm="24" :lg="8">
-          <div class="topWindowBox">
-            <div class="twbTitle">
-              <div class="twbIconbgRed">
-                <img src="@/assets/index/twbIconbgBlue.png" />
-              </div>
-              网站数量
-            </div>
-            <div class="twbNumber">{{ topData.website.count }}</div>
-            <!-- <div class="twbStatus"><img src="@/assets/index/arrow-up.png"/> +12% <span>较上周</span></div> -->
-          </div>
-        </el-col>
-        <el-col :xs="24" :sm="24" :lg="8">
-          <div class="topWindowBox">
-            <div class="twbTitle">
-              <div class="twbIconbgBlue">
-                <img src="@/assets/index/twbIconbgRed.png" />
-              </div>
-              <!-- 文章发布数量 -->
-              资讯发布数量
-            </div>
-            <div class="twbNumber">{{ topData.article.count }}</div>
-            <!-- <div class="twbStatus"><img src="@/assets/index/arrow-up.png"/> +18% <span>较昨天</span></div> -->
-          </div>
-        </el-col>
-        <el-col :xs="24" :sm="24" :lg="8">
-          <div class="topWindowBox">
-            <div class="twbTitle">
-              <div class="twbIconbgPurple">
-                <img src="@/assets/index/twbIconbgPurple.png" />
-              </div>
-              公共栏目数量
-            </div>
-            <div class="twbNumber">{{ topData.category.count }}</div>
-            <!-- <div class="twbStatusDown"><img src="@/assets/index/arrow-down.png"/> -2% <span>较上个月</span></div> -->
-          </div>
-        </el-col>
-      </el-row>
-      <!--网站，内容，公共栏目数量 end------------------------------------------>
-      <!--chart start------------------------------------------>
-      <el-row :gutter="32">
-        <el-col :xs="24" :sm="24" :lg="16">
-          <div class="chartBox">
-            <div class="chartTitle">平台文章增长的数量</div>
-            <el-row style="background:#fff;padding:16px 16px 0;">
-              <line-chart :chart-data="chartData.lineChartData" />
+    <div class="dashboard-editor-container">
+        <!--超级管理员10000√ 个人会员1× 政务会员2× 企业会员3× 调研员4×-->
+        <div v-if="userType == 10000">
+            <el-row :gutter="32">
+                <el-col :xs="24" :sm="24" :lg="24">
+                    <div class="topDataBox">
+                        <div class="topDataBoxTitle">
+                            <div class="chatIconBox cibStyle1">
+                                <img src="@/assets/index/top_time.png">
+                            </div>
+                            <div class="topDataBoxTitleText">待审核列表</div>
+                        </div>
+                        <div class="topDataBoxList" v-if="indexData.apply">
+                            <div class="topDataLi1">
+                                <div class="topDataMain">
+                                    <span @click="goToList(1)">待审核资讯</span>
+                                    <span @click="goToList(1)">{{indexData.apply.article}}</span>
+                                </div>
+                                <div class="topDataMain">
+                                    <span @click="goToList(8)">待审核广告</span>
+                                    <span @click="goToList(8)">{{indexData.apply.order}}</span>
+                                </div>
+                            </div>
+                            <div class="topDataLi2">
+                                <div class="topDataMainCenter">
+                                    <span @click="goToList(2)">待审核商品</span>
+                                    <span @click="goToList(2)">{{indexData.apply.good}}</span>
+                                </div>
+                                <div class="topDataMainCenter">
+                                    <span @click="goToList(3)">待审核书刊音像</span>
+                                    <span @click="goToList(3)">{{indexData.apply.book}}</span>
+                                </div>
+                            </div>
+                            <div class="topDataLi3">
+                                <div class="topDataMainCenter">
+                                    <span @click="goToList(4)">待审核招聘</span>
+                                    <span @click="goToList(4)">{{indexData.apply.jobRecruiting}}</span>
+                                </div>
+                                <div class="topDataMainCenter">
+                                    <span @click="goToList(5)">待审核求职</span>
+                                    <span @click="goToList(5)">{{indexData.apply.jobHunting}}</span>
+                                </div>
+                            </div>
+                            <div class="topDataLi4">
+                                <div class="topDataMain">
+                                    <span @click="goToList(6)">待审核行政通知</span>
+                                    <span @click="goToList(6)">{{indexData.apply.notice}}</span>
+                                </div>
+                                <div class="topDataMain">
+                                    <span @click="goToList(7)">待审核行政投诉</span>
+                                    <span @click="goToList(7)">{{indexData.apply.complaint}}</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </el-col>
             </el-row>
-          </div>
-        </el-col>
-        <el-col :xs="24" :sm="24" :lg="8">
-          <div class="chartBox">
-            <div class="chartTitle">用户类型</div>
-            <div class="chart-wrapper">
-              <ring-chart :chart-data="chartData.ringChartData" />
-            </div>
-          </div>
-        </el-col>
-      </el-row>
-      <!--chart end------------------------------------------>
-    </div>
-    <!--调研员-->
-    <div v-if="userType == 4">
-      <el-row :gutter="32">
-        <el-col :xs="24" :sm="24" :lg="24">
-          <div class="chartBox">
-            <div class="chartTitle">投诉举报增长数量</div>
-            <el-row style="background:#fff;padding:16px 16px 0;">
-              <line-chart :chart-data="chartData.lineChartData" />
+            <el-row :gutter="32">
+                <el-col :xs="24" :sm="24" :lg="6">
+                    <div class="topWindowBox">
+                        <div class="twbTitle">
+                            <div class="twbIconbg bg1">
+                                <img src="@/assets/index/topIcon1.png" />
+                            </div>
+                            网站数量
+                        </div>
+                        <div class="twbNumber">{{indexData.website.count}}</div>
+                        <!-- <div class="twbStatus"><img src="@/assets/index/arrow-up.png"/> +12% <span>较上周</span></div> -->
+                    </div>
+                </el-col>
+                <el-col :xs="24" :sm="24" :lg="6">
+                    <div class="topWindowBox">
+                        <div class="twbTitle">
+                            <div class="twbIconbg bg2">
+                                <img src="@/assets/index/topIcon2.png" />
+                            </div>
+                            栏目数量
+                        </div>
+                        <div class="twbNumber">{{indexData.category.count}}</div>
+                        <!-- <div class="twbStatus"><img src="@/assets/index/arrow-up.png"/> +18% <span>较昨天</span></div> -->
+                    </div>
+                </el-col>
+                <el-col :xs="24" :sm="24" :lg="6">
+                    <div class="topWindowBox">
+                        <div class="twbTitle">
+                            <div class="twbIconbg bg3">
+                                <img src="@/assets/index/topIcon3.png" />
+                            </div>
+                            资讯发布总数量
+                        </div>
+                        <div class="twbNumber">{{indexData.article.count}}</div>
+                    </div>
+                </el-col>
+                <el-col :xs="24" :sm="24" :lg="6">
+                    <div class="topWindowBox">
+                        <div class="twbTitle">
+                            <div class="twbIconbg bg4">
+                                <img src="@/assets/index/topIcon4.png" />
+                            </div>
+                            商品发布总数量
+                        </div>
+                        <div class="twbNumber">{{indexData.good.count}}</div>
+                    </div>
+                </el-col>
             </el-row>
-          </div>
-        </el-col>
-      </el-row>
-    </div>
-    <!--个人会员-->
-    <div v-if="userType == 1">
-      <el-row :gutter="32">
-        <el-col :xs="24" :sm="24" :lg="24">
-          <!-- <div class="noData">
-            欢迎使用恒星管理平台
-          </div> -->
-          <!-- 已审核文章 -->
-          <div class="chartBox">
-            <div class="chartTitle">已审核文章</div>
-            <div class="chart-wrapper">
-              <!-- 展示文章列表 -->
-              <!-- 列表 -->
-              <el-table :data="type_id1.article" style="width: 100%" @row-click="handleClick">
-                <el-table-column prop="title" label="标题" width="">
-                </el-table-column>
-
-                <el-table-column prop="created_at" label="创建时间" width="180">
-                </el-table-column>
-                <el-table-column prop="updated_at" label="创建时间" width="180">
-                </el-table-column>
-
-                <el-table-column prop="status" label="状态" width="180">
-                  <template slot-scope="scope">
-                    <el-tag :type="scope.row.status == 1 ? 'success' : 'danger'">{{ scope.row.status == 1 ? '已审核' :
-                      '未审核' }}</el-tag>
-                  </template>
-                </el-table-column>
-              </el-table>
-
-            </div>
-          </div>
-
-        </el-col>
-      </el-row>
+            <el-row :gutter="32">
+                <el-col :xs="24" :sm="24" :lg="6">
+                    <div class="topWindowBox">
+                        <div class="twbTitle">
+                            <div class="twbIconbg bg5">
+                                <img src="@/assets/index/topIcon5.png" />
+                            </div>
+                            书刊音像发布总数量
+                        </div>
+                        <div class="twbNumber">{{indexData.book.count}}</div>
+                    </div>
+                </el-col>
+                <el-col :xs="24" :sm="24" :lg="6">
+                    <div class="topWindowBox">
+                        <div class="twbTitle">
+                            <div class="twbIconbg bg6">
+                                <img src="@/assets/index/topIcon6.png" />
+                            </div>
+                            招聘发布总数量
+                        </div>
+                        <div class="twbNumber">{{indexData.jobRecruiting.count}}</div>
+                    </div>
+                </el-col>
+                <el-col :xs="24" :sm="24" :lg="6">
+                    <div class="topWindowBox">
+                        <div class="twbTitle">
+                            <div class="twbIconbg bg7">
+                                <img src="@/assets/index/topIcon7.png" />
+                            </div>
+                            求职发布总数量
+                        </div>
+                        <div class="twbNumber">{{indexData.jobHunting.count}}</div>
+                    </div>
+                </el-col>
+            </el-row>
+            <el-row :gutter="32">
+                <el-col :xs="24" :sm="24" :lg="16">
+                    <div class="chartBox">
+                        <div class="chartTitle">
+                            平台数据增长趋势
+                            <el-select 
+                                v-model="chatType" 
+                                placeholder="请选择" 
+                                class="chartSelectInput"
+                                @change="changeLineChartData"
+                            >
+                                <el-option 
+                                    v-for="item in indexDataOptions" 
+                                    :key="item.value" 
+                                    :label="item.label"
+                                    :value="item.value"
+                                >
+                                </el-option>
+                            </el-select>
+                        </div>
+                        <el-row style="background:#fff;padding:16px 16px 0;">
+                            <line-chart :chart-data="chartData.lineChartData" />
+                        </el-row>
+                    </div>
+                </el-col>
+                <el-col :xs="24" :sm="24" :lg="8">
+                    <div class="chartBox">
+                        <div class="chartTitle">用户类型占比</div>
+                        <div class="chart-wrapper">
+                            <ring-chart :chart-data="chartData.ringChartData" />
+                        </div>
+                    </div>
+                </el-col>
+            </el-row>
+        </div>
+
+        <!--超级管理员10000× 个人会员1√ 政务会员2× 企业会员3 调研员4-->
+        <div v-if="userType == 1">
+            <el-row :gutter="32">
+                <el-col :xs="24" :sm="24" :lg="24">
+                    <div class="topDataBox">
+                        <div class="topDataBoxTitle">
+                            <div class="chatIconBox cibStyle1">
+                                <img src="@/assets/index/top_time.png">
+                            </div>
+                            <div class="topDataBoxTitleText">待审核列表</div>
+                        </div>
+                        <div class="topDataBoxList" v-if="indexData.apply">
+                            <div class="topDataLi1">
+                                <div class="topDataMain">
+                                    <span @click="goToList(1)">待审核资讯</span>
+                                    <span @click="goToList(1)">{{indexData.apply.article}}</span>
+                                </div>
+                            </div>
+                            <div class="topDataLi2">
+                                <div class="topDataMainCenter">
+                                    <span @click="goToList(2)">待审核商品</span>
+                                    <span @click="goToList(2)">{{indexData.apply.good}}</span>
+                                </div>
+                                <div class="topDataMainCenter">
+                                    <span @click="goToList(3)">待审核书刊音像</span>
+                                    <span @click="goToList(3)">{{indexData.apply.book}}</span>
+                                </div>
+                            </div>
+                            <div class="topDataLi3">
+                                <div class="topDataMainCenter">
+                                    <span @click="goToList(4)">待审核招聘</span>
+                                    <span @click="goToList(4)">{{indexData.apply.jobRecruiting}}</span>
+                                </div>
+                                <div class="topDataMainCenter">
+                                    <span @click="goToList(5)">待审核求职</span>
+                                    <span @click="goToList(5)">{{indexData.apply.jobHunting}}</span>
+                                </div>
+                            </div>
+                            <div class="topDataLi4">
+                                <div class="topDataMain">
+                                    <span @click="goToList(6)">待审核行政通知</span>
+                                    <span @click="goToList(6)">{{indexData.apply.notice}}</span>
+                                </div>
+                                <div class="topDataMain">
+                                    <span @click="goToList(7)">待审核行政投诉</span>
+                                    <span @click="goToList(7)">{{indexData.apply.complaint}}</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </el-col>
+            </el-row>
+            <el-row :gutter="32">
+                <el-col :xs="24" :sm="24" :lg="6">
+                    <div class="topWindowBox">
+                        <div class="twbTitle">
+                            <div class="twbIconbg bg3">
+                                <img src="@/assets/index/topIcon3.png" />
+                            </div>
+                            资讯发布数量
+                        </div>
+                        <div class="twbNumber">{{indexData.article.count}}</div>
+                    </div>
+                </el-col>
+                <el-col :xs="24" :sm="24" :lg="6">
+                    <div class="topWindowBox">
+                        <div class="twbTitle">
+                            <div class="twbIconbg bg4">
+                                <img src="@/assets/index/topIcon4.png" />
+                            </div>
+                            商品发布数量
+                        </div>
+                        <div class="twbNumber">{{indexData.good.count}}</div>
+                    </div>
+                </el-col>
+                <el-col :xs="24" :sm="24" :lg="6">
+                    <div class="topWindowBox">
+                        <div class="twbTitle">
+                            <div class="twbIconbg bg5">
+                                <img src="@/assets/index/topIcon5.png" />
+                            </div>
+                            书刊音像发布数量
+                        </div>
+                        <div class="twbNumber">{{indexData.book.count}}</div>
+                    </div>
+                </el-col>
+                <el-col :xs="24" :sm="24" :lg="6">
+                    <div class="topWindowBox">
+                        <div class="twbTitle">
+                            <div class="twbIconbg bg7">
+                                <img src="@/assets/index/topIcon7.png" />
+                            </div>
+                            求职发布数量
+                        </div>
+                        <div class="twbNumber">{{indexData.jobHunting.count}}</div>
+                    </div>
+                </el-col>
+            </el-row>
+        </div>
+
+        <!--超级管理员10000× 个人会员1× 政务会员2 √ 企业会员3× 调研员4×-->
+        <div v-if="userType == 2">
+            <el-row :gutter="32">
+                <el-col :xs="24" :sm="24" :lg="24">
+                    <div class="topDataBox">
+                        <div class="topDataBoxTitle">
+                            <div class="chatIconBox cibStyle1">
+                                <img src="@/assets/index/top_time.png">
+                            </div>
+                            <div class="topDataBoxTitleText">待审核列表</div>
+                        </div>
+                        <div class="topDataBoxList" v-if="indexData.apply">
+                            <div class="topDataLi1">
+                                <div class="topDataMain">
+                                    <span @click="goToList(1)">待审核资讯</span>
+                                    <span @click="goToList(1)">{{indexData.apply.article}}</span>
+                                </div>
+                            </div>
+                            <div class="topDataLi2">
+                                <div class="topDataMainCenter">
+                                    <span @click="goToList(2)">待审核商品</span>
+                                    <span @click="goToList(2)">{{indexData.apply.good}}</span>
+                                </div>
+                                <div class="topDataMainCenter">
+                                    <span @click="goToList(3)">待审核书刊音像</span>
+                                    <span @click="goToList(3)">{{indexData.apply.book}}</span>
+                                </div>
+                            </div>
+                            <div class="topDataLi4">
+                                <div class="topDataMain">
+                                    <span @click="goToList(6)">待审核行政通知</span>
+                                    <span @click="goToList(6)">{{indexData.apply.notice}}</span>
+                                </div>
+                                <div class="topDataMain">
+                                    <span @click="goToList(7)">待审核行政投诉</span>
+                                    <span @click="goToList(7)">{{indexData.apply.complaint}}</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </el-col>
+            </el-row>
+            <el-row :gutter="32">
+                <el-col :xs="24" :sm="24" :lg="6">
+                    <div class="topWindowBox">
+                        <div class="twbTitle">
+                            <div class="twbIconbg bg3">
+                                <img src="@/assets/index/topIcon3.png" />
+                            </div>
+                            资讯发布数量
+                        </div>
+                        <div class="twbNumber">{{indexData.article.count}}</div>
+                    </div>
+                </el-col>
+                <el-col :xs="24" :sm="24" :lg="6">
+                    <div class="topWindowBox">
+                        <div class="twbTitle">
+                            <div class="twbIconbg bg4">
+                                <img src="@/assets/index/topIcon4.png" />
+                            </div>
+                            商品发布数量
+                        </div>
+                        <div class="twbNumber">{{indexData.good.count}}</div>
+                    </div>
+                </el-col>
+                <el-col :xs="24" :sm="24" :lg="6">
+                    <div class="topWindowBox">
+                        <div class="twbTitle">
+                            <div class="twbIconbg bg5">
+                                <img src="@/assets/index/topIcon5.png" />
+                            </div>
+                            书刊音像发布数量
+                        </div>
+                        <div class="twbNumber">{{indexData.book.count}}</div>
+                    </div>
+                </el-col>
+                <el-col :xs="24" :sm="24" :lg="6">
+                    <div class="topWindowBox">
+                        <div class="twbTitle">
+                            <div class="twbIconbg bg8">
+                                <img src="@/assets/index/topIcon8.png" />
+                            </div>
+                            待处理
+                        </div>
+                        <div class="twbNumber2">
+                            <div class="twbNumber2Item">
+                                <div class="twbNumber2ItemNum">{{indexData.notice.count}}</div>
+                                <div>行政通知</div>
+                            </div>
+                            <div class="twbNumber2Item">
+                                <div class="twbNumber2ItemNum">{{indexData.complaint.count}}</div>
+                                <div>行政投诉</div>
+                            </div>
+                        </div>
+                    </div>
+                </el-col>
+            </el-row>
+
+            <!-- <div class="chartBox">
+                <div class="chartTitle">已审核文章</div>
+                <div class="chart-wrapper">
+                    展示文章列表
+                    <el-table :data="type_id1.article" style="width: 100%" @row-click="handleClick">
+                        <el-table-column prop="title" label="标题" width="">
+                        </el-table-column>
+                        <el-table-column prop="created_at" label="创建时间" width="180">
+                        </el-table-column>
+                        <el-table-column prop="updated_at" label="创建时间" width="180">
+                        </el-table-column>
+                        <el-table-column prop="status" label="状态" width="180">
+                            <template slot-scope="scope">
+                                <el-tag :type="scope.row.status == 1 ? 'success' : 'danger'">{{ scope.row.status == 1 ? '已审核' :
+                                '未审核' }}</el-tag>
+                            </template>
+                        </el-table-column>
+                    </el-table>
+                </div>
+            </div> -->
+        </div>
+
+        <!--超级管理员10000× 个人会员1× 政务会员2× 企业会员3√ 调研员4×-->
+        <div v-if="userType == 3">
+            <el-row :gutter="32">
+                <el-col :xs="24" :sm="24" :lg="24">
+                    <div class="topDataBox">
+                        <div class="topDataBoxTitle">
+                            <div class="chatIconBox cibStyle1">
+                                <img src="@/assets/index/top_time.png">
+                            </div>
+                            <div class="topDataBoxTitleText">待审核列表</div>
+                        </div>
+                        <div class="topDataBoxList" v-if="indexData.apply">
+                            <div class="topDataLi1">
+                                <div class="topDataMain">
+                                    <span @click="goToList(1)">待审核资讯</span>
+                                    <span @click="goToList(1)">{{indexData.apply.article}}</span>
+                                </div>
+                            </div>
+                            <div class="topDataLi2">
+                                <div class="topDataMainCenter">
+                                    <span @click="goToList(2)">待审核商品</span>
+                                    <span @click="goToList(2)">{{indexData.apply.good}}</span>
+                                </div>
+                                <div class="topDataMainCenter">
+                                    <span @click="goToList(3)">待审核书刊音像</span>
+                                    <span @click="goToList(3)">{{indexData.apply.book}}</span>
+                                </div>
+                            </div>
+                            <div class="topDataLi3">
+                                <div class="topDataMainCenter">
+                                    <span @click="goToList(4)">待审核招聘</span>
+                                    <span @click="goToList(4)">{{indexData.apply.jobRecruiting}}</span>
+                                </div>
+                            </div>
+                            <div class="topDataLi4">
+                                <div class="topDataMain">
+                                    <span @click="goToList(6)">待审核行政通知</span>
+                                    <span @click="goToList(6)">{{indexData.apply.notice}}</span>
+                                </div>
+                                <div class="topDataMain">
+                                    <span @click="goToList(7)">待审核行政投诉</span>
+                                    <span @click="goToList(7)">{{indexData.apply.complaint}}</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </el-col>
+            </el-row>
+            <el-row :gutter="32">
+                <el-col :xs="24" :sm="24" :lg="6">
+                    <div class="topWindowBox">
+                        <div class="twbTitle">
+                            <div class="twbIconbg bg3">
+                                <img src="@/assets/index/topIcon3.png" />
+                            </div>
+                            资讯发布数量
+                        </div>
+                        <div class="twbNumber">{{indexData.article.count}}</div>
+                    </div>
+                </el-col>
+                <el-col :xs="24" :sm="24" :lg="6">
+                    <div class="topWindowBox">
+                        <div class="twbTitle">
+                            <div class="twbIconbg bg4">
+                                <img src="@/assets/index/topIcon4.png" />
+                            </div>
+                            商品发布数量
+                        </div>
+                        <div class="twbNumber">{{indexData.good.count}}</div>
+                    </div>
+                </el-col>
+                <el-col :xs="24" :sm="24" :lg="6">
+                    <div class="topWindowBox">
+                        <div class="twbTitle">
+                            <div class="twbIconbg bg5">
+                                <img src="@/assets/index/topIcon5.png" />
+                            </div>
+                            书刊音像发布数量
+                        </div>
+                        <div class="twbNumber">{{indexData.book.count}}</div>
+                    </div>
+                </el-col>
+                <el-col :xs="24" :sm="24" :lg="6">
+                    <div class="topWindowBox">
+                        <div class="twbTitle">
+                            <div class="twbIconbg bg6">
+                                <img src="@/assets/index/topIcon6.png" />
+                            </div>
+                            招聘发布数量
+                        </div>
+                        <div class="twbNumber">{{indexData.jobRecruiting.count}}</div>
+                    </div>
+                </el-col>
+            </el-row>
+        </div>
+
+        <!--超级管理员10000× 个人会员1× 政务会员2× 企业会员3× 调研员4√-->
+        <div v-if="userType == 4">
+            <el-row :gutter="32">
+                <el-col :xs="24" :sm="24" :lg="24">
+                    <div class="topDataBox">
+                        <div class="topDataBoxTitle">
+                            <div class="chatIconBox cibStyle1">
+                                <img src="@/assets/index/top_time.png">
+                            </div>
+                            <div class="topDataBoxTitleText">待审核列表</div>
+                        </div>
+                        <div class="topDataBoxList" v-if="indexData.apply">
+                            <div class="topDataLi1">
+                                <div class="topDataMain">
+                                    <span @click="goToList(1)">待审核资讯</span>
+                                    <span @click="goToList(1)">{{indexData.apply.article}}</span>
+                                </div>
+                            </div>
+                            <div class="topDataLi2">
+                                <div class="topDataMainCenter">
+                                    <span @click="goToList(2)">待审核商品</span>
+                                    <span @click="goToList(2)">{{indexData.apply.good}}</span>
+                                </div>
+                                <div class="topDataMainCenter">
+                                    <span @click="goToList(3)">待审核书刊音像</span>
+                                    <span @click="goToList(3)">{{indexData.apply.book}}</span>
+                                </div>
+                            </div>
+                            <div class="topDataLi4">
+                                <div class="topDataMain">
+                                    <span @click="goToList(6)">待审核行政通知</span>
+                                    <span @click="goToList(6)">{{indexData.apply.notice}}</span>
+                                </div>
+                                <div class="topDataMain">
+                                    <span @click="goToList(7)">待审核行政投诉</span>
+                                    <span @click="goToList(7)">{{indexData.apply.complaint}}</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </el-col>
+            </el-row>
+            <el-row :gutter="32">
+                <el-col :xs="24" :sm="24" :lg="8">
+                    <div class="topWindowBox">
+                        <div class="twbTitle">
+                            <div class="twbIconbg bg3">
+                                <img src="@/assets/index/topIcon3.png" />
+                            </div>
+                            资讯发布数量
+                        </div>
+                        <div class="twbNumber">{{indexData.article.count}}</div>
+                    </div>
+                </el-col>
+                <el-col :xs="24" :sm="24" :lg="8">
+                    <div class="topWindowBox">
+                        <div class="twbTitle">
+                            <div class="twbIconbg bg4">
+                                <img src="@/assets/index/topIcon4.png" />
+                            </div>
+                            商品发布数量
+                        </div>
+                        <div class="twbNumber">{{indexData.good.count}}</div>
+                    </div>
+                </el-col>
+                <el-col :xs="24" :sm="24" :lg="8">
+                    <div class="topWindowBox">
+                        <div class="twbTitle">
+                            <div class="twbIconbg bg5">
+                                <img src="@/assets/index/topIcon5.png" />
+                            </div>
+                            书刊音像发布数量
+                        </div>
+                        <div class="twbNumber">{{indexData.book.count}}</div>
+                    </div>
+                </el-col>
+            </el-row>
+        </div>
     </div>
-  </div>
 </template>
 
 <script>
@@ -130,97 +586,135 @@ import RingChart from './components/RingChart'//圆环图
 
 
 export default {
-  name: 'DashboardAdmin',
-  components: {
-    // GithubCorner,
-    // PanelGroup,
-    LineChart,
-    // RaddarChart,
-    // PieChart,
-    // BarChart,
-    // TransactionTable,
-    // TodoList,
-    // BoxCard,
-    RingChart
-  },
-  data() {
-    return {
-      userType: 0,//用户身份
-      topData: {
-        website: {//网站
-          count: 0,//总数
-          growth_rate: 0//增长数
-        },
-        article: {//文章
-          count: 0,//总数
-          growth_rate: 0//增长数
-        },
-        category: {//栏目
-          count: 0,//总数
-          growth_rate: 0//增长数
-        }
-      },
-      chartData: {
-        lineChartData: [],//折线图数据
-        ringChartData: []//圆环图数据
-      },
-      type_id1: [],
-    }
-  },
-  methods: {
-    handleClick(row) {
-      console.log(row, '----------------1---')
-      //跳转
-      this.$router.push({
-        path: '/articleList',
-        query: {
-          id: row.id
-        }
-      })
-
+    name: 'DashboardAdmin',
+    components: {
+        // GithubCorner,
+        // PanelGroup,
+        LineChart,
+        // RaddarChart,
+        // PieChart,
+        // BarChart,
+        // TransactionTable,
+        // TodoList,
+        // BoxCard,
+        RingChart
     },
-    // 获取首页数据
-    //获取用户身份信息
-    getUserInfo(fun) {
-      this.$store.dispatch('public/getInfo').then(res => {
-        console.log(res)
-        this.userType = res.data.type_id;
-        //if(res.data.type_id==10000){}//管理员
-        //if(res.data.type_id==4){}//调研员
-        //个人会员=1 政务会员=2 企业会员=3 调研员=4 管理员=10000 游客=20000
-      }).catch(() => {
-        this.$message({
-          type: 'info',
-          message: '网络错误，请重试！'
-        });
-      })
-      fun();
+    data() {
+        return {
+            userType: 0,//用户身份
+            indexData:[],//首页的全部数据
+            chartData: {
+                lineChartData:[],//折线图目前展示哪个数据
+                ringChartData: [],//圆环图数据
+                lineChartData1: [],//折线图数据 - 资讯
+                lineChartData2: [],//折线图数据 - 商品
+                lineChartData3: [],//折线图数据 - 书刊音像
+                lineChartData4: [],//折线图数据 - 招聘
+                lineChartData5: [],//折线图数据 - 求职
+            },
+            chatType: '1', //用户选择的哪个数据
+            indexDataOptions: [
+                {label:'资讯',value:'1'},
+                {label:'商品',value:'2'},
+                {label:'书刊音像',value:'3'},
+                {label:'招聘',value:'4'},
+                {label:'求职',value:'5'}
+            ]
+        }
     },
-    getData() {
-      //获取首页数据
-      this.$store.dispatch('public/getAdminIndex').then(res => {
-        //如果是调研员就不显示其他的
-        if (this.userType == 4) {
-          this.chartData.lineChartData = res.data.letterOfComplaintList;
-        } else if (this.userType == 1) {
-          //个人会员
-          this.type_id1 = res.data;
-        } else {
-          this.topData.article.count = res.data.article.count;
-          this.topData.category.count = res.data.category.count;
-          this.topData.website.count = res.data.website.count;
-          this.chartData.lineChartData = res.data.monthArticle;
-          this.chartData.ringChartData = res.data.userType;
+    methods: {
+        handleClick(row) {
+            console.log(row, '----------------1---')
+            //跳转
+            this.$router.push({
+                path: '/articleList',
+                query: {
+                    id: row.id
+                }
+            })
+
+        },
+        // 获取首页数据
+        //获取用户身份信息
+        getUserInfo(fun) {
+            this.$store.dispatch('public/getInfo').then(res => {
+                console.log(res)
+                this.userType = res.data.type_id;
+                //if(res.data.type_id==10000){}//管理员
+                //if(res.data.type_id==4){}//调研员
+                //个人会员=1 政务会员=2 企业会员=3 调研员=4 管理员=10000 游客=20000
+            }).catch(() => {
+                this.$message({
+                    type: 'info',
+                    message: '网络错误，请重试！'
+                });
+            })
+            fun();
+        },
+        getData() {
+            //获取首页数据
+            this.$store.dispatch('public/getAdminIndex').then(res => {
+                //如果是调研员就不显示其他的
+                // if (this.userType == 4) {
+                //     this.chartData.lineChartData = res.data.letterOfComplaintList;
+                // } else if (this.userType == 1) {
+                //     //个人会员
+                //     this.type_id1 = res.data;
+                // } else {
+                //     this.topData.article.count = res.data.article.count;
+                //     this.topData.category.count = res.data.category.count;
+                //     this.topData.website.count = res.data.website.count;
+                //     this.chartData.lineChartData = res.data.monthArticle;
+                //     this.chartData.ringChartData = res.data.userType;
+                // }
+                if(res.code==200){
+                    this.indexData = res.data;//面板其他数据
+                    this.chartData.lineChartData = res.data.monthArticle;//初始化展示资讯的数据
+                    this.chartData.ringChartData = res.data.userType;//圆环图数据
+                    this.chartData.lineChartData1 = res.data.monthArticle;//折线图数据 - 资讯
+                    this.chartData.lineChartData2 = res.data.monthGood;//圆环图数据 - 资讯
+                    this.chartData.lineChartData3 = res.data.monthBook;//圆环图数据 - 书刊音像
+                    this.chartData.lineChartData4 = res.data.monthJobRecruiting;//圆环图数据 - 招聘
+                    this.chartData.lineChartData5 = res.data.monthJobHunting;//圆环图数据 - 求职
+                }
+            })
+        },
+        goToList(typenumber){
+            if(typenumber == 1){this.$router.push({path:'/examine'})}
+            if(typenumber == 2){this.$router.push({path:'/goodListApply'})}
+            if(typenumber == 3){this.$router.push({path:'/bookListApply'})}
+            if(typenumber == 4){this.$router.push({path:'/checkjobRecruitingList'})}
+            if(typenumber == 5){this.$router.push({path:'/jobHuntingListApply'})}
+            if(typenumber == 6){this.$router.push({path:'/noticeListApply'})}
+            if(typenumber == 7){this.$router.push({path:'/ncomplaintListApply'})}
+            if(typenumber == 8){this.$router.push({path:'/adList'})}
+        },
+        //切换折线图数据
+        changeLineChartData(type){
+            console.log(type)
+            if(type == 1){
+                this.chartData.lineChartData = this.chartData.lineChartData1;
+            }
+            if(type == 2){
+                this.chartData.lineChartData = this.chartData.lineChartData2;
+            }
+            if(type == 3){
+                this.chartData.lineChartData = this.chartData.lineChartData3;
+            }
+            if(type == 4){
+                this.chartData.lineChartData = this.chartData.lineChartData4;
+            }
+            if(type == 5){
+                this.chartData.lineChartData = this.chartData.lineChartData5;
+            }
         }
-      })
     },
-  },
-  mounted() {
-    //先获取用户身份
-    this.getUserInfo(this.getData)
-    //再获取数据
-    // this.getData()
-  }
+    mounted() {
+        //先获取用户身份
+        this.getUserInfo(this.getData)
+        //再获取数据
+        // this.getData()
+    }
 }
 </script>
 
@@ -228,118 +722,243 @@ export default {
 @title: #212227;
 @bgColor: #FFFFFF;
 
-.topWindowBox {
-  background: @bgColor;
-  border-Radius: 20px;
-  height: 160px;
-  width: 100%;
-  margin-bottom: 30px;
-  padding: 25px;
-  box-sizing: border-box;
-
-  .twbTitle {
+//图标背景
+.chatIconBox {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    line-height: 40px;
+    overflow: hidden;
     display: flex;
     align-items: center;
-    font-size: 16px;
-    color: @title;
-
-    .twbIconbgRed,
-    .twbIconbgBlue,
-    .twbIconbgPurple {
-      width: 40px;
-      height: 40px;
-      border-radius: 50%;
-      margin-right: 15px;
-    }
+    justify-content: center;
+}
+.cibStyle1 {
+    background:#667EF2
+}
+
+//管理员顶部数据栏
+.topDataBox {
+    height: 182px;
+    background: url('../../../assets/index/top_bg.png') no-repeat center center;
+    background-size: 100% 100%;
+    margin-bottom: 30px;
+    border-radius: 20px;
+    overflow: hidden;
+    box-sizing: border-box;
+    padding: 25px;
+}
+
+.topDataBoxTitle {
+    display: flex;
+    align-items: center;
+    margin-bottom:16px;
+    color:#fff;
+    font-size:16px;
+}
+
+.topDataBoxTitleText {
+    margin-left: 15px;
+}
 
-    // .twbIconbgRed {
-    //   background: #EA79BA;
-    // }
-    // .twbIconbgBlue {
-    //   background: #6DACE7;
-    // }
-    // .twbIconbgPurple{
-    //   background: #AA7AEB;
-    // }
-  }
-
-  .twbNumber {
-    font-size: 30px;
-    margin-top: 32px;
-    font-weight: 1000;
-  }
-
-  .twbStatus,
-  .twbStatusDown {
-    font-size: 14px;
-    margin-top: 35px;
+//顶部数据展示
+.topDataBoxList {
     display: flex;
+    align-items: center;
+    .topDataLi1 {
+        width:268px;
+        border-right: 1px solid #fff;
+        height:70px;
+        .topDataMain:nth-child(1) {
+            margin-bottom:20px;
+        }
+    }
+    .topDataLi2,.topDataLi3{
+        width:359px;
+        border-right: 1px solid #fff;
+        height:70px;
+        .topDataMainCenter:nth-child(1){
+            margin-bottom:20px
+        }
+    }
+    .topDataLi4 {
+        width:268px;
+        height:70px;
+        .topDataMain {
+            margin-left:90px;
+        }
+        .topDataMain:nth-child(1) {
+            margin-bottom:20px;
+        }
+    }
+    .topDataMain,.topDataMainCenter {
+        color:#fff;
+        height:26px;
+        line-height:26px;
+        width:177px;
+        display:flex;
+        align-items: center;
+        justify-content: space-between;
+        span:nth-child(1){
+            font-size:16px;
+            cursor: pointer;
+        }
+        span:nth-child(2){
+            font-size:22px;
+            font-weight:bold;
+            cursor: pointer;
+        }
+    }
+    .topDataMainCenter {
+        margin:0 auto;
+    }
+}
+
+
+.topWindowBox {
+    background: @bgColor;
+    border-Radius: 20px;
+    height: 165px;
+    width: 100%;
+    margin-bottom: 30px;
+    padding: 22px 25px 25px 25px;
+    box-sizing: border-box;
+
+    .twbTitle {
+        display: flex;
+        align-items: center;
+        font-size: 16px;
+        color: @title;
+
+        .twbIconbg{
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            margin-right: 15px;
+            display:flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .bg1 {background: #FDF2F9;}
+        .bg2 {background: #E9F3FC;}
+        .bg3 {background: #F7F2FD;}
+        .bg4 {background: #FFF4F4;}
+        .bg5 {background: #E9F3FC;}
+        .bg6 {background: #F2EBFC;}
+        .bg7 {background: #FDF2F9;}
+        .bg8 {background: #FFFAF4;}
+
+    }
 
-    img {
-      display: block;
-      margin-right: 4px;
+    .twbNumber {
+        font-size: 30px;
+        margin-top: 20px;
+        font-weight: 1000;
     }
 
-    span {
-      color: #707B81;
-      margin-left: 8px;
+    .twbNumber2 {
+        font-size: 30px;
+        margin-top: 20px;
+        font-weight: 1000;
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        .twbNumber2ItemNum {
+            font-size:30px;
+            margin-bottom:5px;
+            font-weight:1000;
+        }
+        .twbNumber2Item {
+            font-size:16px;
+            width:70px;
+            font-weight:normal;
+        }
+        .twbNumber2Item:nth-child(1) {
+            margin-right:130px;
+        }
     }
-  }
 
-  .twbStatus {
-    color: #23C581;
-  }
+    .twbStatus,
+    .twbStatusDown {
+        font-size: 14px;
+        margin-top: 10px;
+        display: flex;
+
+        img {
+            display: block;
+            margin-right: 4px;
+        }
+
+        span {
+            color: #707B81;
+            margin-left: 8px;
+        }
+    }
+
+    .twbStatus {
+        color: #23C581;
+    }
 
-  .twbStatusDown {
-    color: #E74545
-  }
+    .twbStatusDown {
+        color: #E74545
+    }
 }
 
 .chartBox {
-  width: 100%;
-  height: 440px;
-  border-radius: 20px;
-  overflow: hidden;
-  background-color: @bgColor;
-
-  .chartTitle {
-    color: @title;
-    padding: 30px 30px 0 30px;
-    font-size: 16px;
-  }
+    width: 100%;
+    height: 440px;
+    border-radius: 20px;
+    overflow: hidden;
+    background-color: @bgColor;
+
+    .chartTitle {
+        color: @title;
+        padding: 30px 30px 0 30px;
+        font-size: 24px;
+    }
 }
 
 .noData {
-  color: #CCCCCC;
-  font-size: 32px;
-  font-weight: bold;
-  text-align: center;
-  height: 740px;
-  line-height: 740px;
+    color: #CCCCCC;
+    font-size: 32px;
+    font-weight: bold;
+    text-align: center;
+    height: 740px;
+    line-height: 740px;
 }
 
 .dashboard-editor-container {
-  padding: 32px;
-  background-color: rgb(240, 242, 245);
-  position: relative;
-
-  .github-corner {
-    position: absolute;
-    top: 0px;
-    border: 0;
-    right: 0;
-  }
-
-  .chart-wrapper {
-    background: #fff;
-    padding: 16px 16px 0;
-    margin-bottom: 32px;
-  }
+    padding: 32px;
+    background-color: rgb(240, 242, 245);
+    position: relative;
+
+    .github-corner {
+        position: absolute;
+        top: 0px;
+        border: 0;
+        right: 0;
+    }
+
+    .chart-wrapper {
+        background: #fff;
+        padding: 16px 16px 0;
+        margin-bottom: 32px;
+    }
 }
 
 @media (max-width:1024px) {
-  .chart-wrapper {
-    padding: 8px;
-  }
+    .chart-wrapper {
+        padding: 8px;
+    }
+}
+
+::v-deep .chartSelectInput .el-input__inner {
+    background:#F2F4FE;
+    color:#5570F1;
+    border:none;
+    border-radius: 8px;
+    width:130px;
+    margin-left:20px;
 }
 </style>

src/views/website/websiteColumn.vue

@@ -96,7 +96,8 @@
               >
               <template slot-scope="{ node, data }">
                 <span>{{ data.name }}</span>
-                <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
+                <!-- <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span> -->
+                 <span>({{ data.id }})</span>
               </template>
             </el-cascader>
           </el-form-item>