修改bug

修改bug

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,219 @@ 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
-            }
-          }
-        },
-        legend: {
-          data: ['新增数量']
-        },
-        series: [{
-          name: '新增数量',
-          smooth: true,
-          type: 'line',
-          itemStyle: {
-            normal: {
-              color: '#3888fa',
-              lineStyle: {
-                color: '#3888fa',
-                width: 2
-              },
-              areaStyle: {
-                color: '#f3f8ff'
-              }
+        setOptions(chartData) {
+            console.log(chartData.length)
+            //循环一下第一个数据，把日期取出来
+            if(chartData.length > 0){
+                const dates = chartData[0].data.map(item => item.date)
+                //管理员
+                let data1 = [];
+                for(let item of chartData[0].data) {
+                    data1.push(item.count)
+                }
+                //个人会员
+                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)
+                }
+                //企业会员
+                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: 20,
+                        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'
+                    }]
+                })
+
             }
-          },
-          data: actualData,
-          animationDuration: 2800,
-          animationEasing: 'quadraticOut'
-        }]
-      })
+
+
+        }
     }
-  }
 }
 </script>

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

@@ -1,106 +1,108 @@
 <template>
-  <div :class="className" :style="{ height: height, width: width }"></div>
-</template>
-
-<script>
-import echarts from 'echarts';
-require('echarts/theme/macarons'); // echarts 主题
-import resize from './mixins/resize';
-
-export default {
-  mixins: [resize],
-  props: {
-    className: {
-      type: String,
-      default: 'chart',
+    <div :class="className" :style="{ height: height, width: width }"></div>
+  </template>
+  
+  <script>
+  import echarts from 'echarts';
+  require('echarts/theme/macarons'); // echarts 主题
+  import resize from './mixins/resize';
+  
+  export default {
+    mixins: [resize],
+    props: {
+      className: {
+        type: String,
+        default: 'chart',
+      },
+      width: {
+        type: String,
+        default: '100%',
+      },
+      height: {
+        type: String,
+        default: '350px',
+      },
+      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);
+        }
+      }
     },
-    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;
       }
-    }
-  },
-  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);
+      this.chart.dispose();
+      this.chart = null;
     },
-    setOptions(chartData) {
-      // 格式化数据
-      const data = chartData.map(item => ({
-        value: item.counts, // 将 counts 作为 value
-        name: item.typeName  // 将 typeName 作为 name
-      }));
-
-      this.chart.setOption({
-        tooltip: {
-          trigger: 'item',
-          formatter: '{a} <br/>{b} : {c} ({d}%)',
-        },
-        legend: {
-          left: 'center',
-          bottom: '10',
-          data: data.map(item => item.name) // 使用提取的 typeName 作为图例
-        },
-        series: [
-          {
-            name: '会员类型', // 可以根据需要修改名称
-            type: 'pie',
-            radius: ['40%', '60%'], // 环形图，使用内外径
-            center: ['50%', '40%'],
-            data: data, // 使用提取的数据
-            label: {
-              show: true,
-              formatter: '{b}: {c} ({d}%)',
-            },
-            labelLine: {
-              show: true,
-            },
-            animationEasing: 'cubicInOut',
-            animationDuration: 2600,
+    methods: {
+      initChart() {
+        this.chart = echarts.init(this.$el, 'macarons');
+        this.setOptions(this.chartData);
+      },
+      setOptions(chartData) {
+        // 格式化数据
+        const data = chartData.map(item => ({
+          value: item.counts, // 将 counts 作为 value
+          name: item.typeName  // 将 typeName 作为 name
+        }));
+  
+        this.chart.setOption({
+          tooltip: {
+            trigger: 'item',
+            formatter: '{a} <br/>{b} : {c} ({d}%)',
           },
-        ],
-      });
+          legend: {
+            left: 'center',
+            bottom: '10',
+            data: data.map(item => item.name) // 使用提取的 typeName 作为图例
+          },
+          series: [
+            {
+              name: '会员类型', // 可以根据需要修改名称
+              type: 'pie',
+              radius: ['45%', '60%'], // 环形图，使用内外径
+              center: ['50%', '42%'],
+              data: data, // 使用提取的数据
+              label: {
+                show: true,
+                //formatter: '{b}: {c} ({d}%)',
+                formatter: '{b}: {c} 人',
+              },
+              labelLine: {
+                show: true,
+              },
+              animationEasing: 'cubicInOut',
+              animationDuration: 2600,
+            },
+          ],
+        });
+      },
     },
-  },
-};
-</script>
-
-<style scoped>
-.chart {
-  width: 100%; /* 或者设置为具体的像素值 */
-  height: 300px; /* 确保有高度 */
-}
-</style>
+  };
+  </script>
+  
+  <style scoped>
+  .chart {
+    width: 100%; /* 或者设置为具体的像素值 */
+    height: 300px; /* 确保有高度 */
+  }
+  </style>
+  

src/views/dashboard/admin/index.vue

@@ -1,80 +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">
+                            <div class="topDataLi1">
+                                <div class="topDataMain">
+                                    <span @click="goToList(1)">待审核资讯</span>
+                                    <span @click="goToList(1)">{{articleCount}}</span>
+                                </div>
+                                <div class="topDataMain">
+                                    <span @click="goToList(8)">待审核广告</span>
+                                    <span @click="goToList(8)">{{adCount}}</span>
+                                </div>
+                            </div>
+                            <div class="topDataLi2">
+                                <div class="topDataMainCenter">
+                                    <span @click="goToList(2)">待审核商品</span>
+                                    <span @click="goToList(2)">{{goodsCount}}</span>
+                                </div>
+                                <div class="topDataMainCenter">
+                                    <span @click="goToList(3)">待审核书刊音像</span>
+                                    <span @click="goToList(3)">{{bookCount}}</span>
+                                </div>
+                            </div>
+                            <!-- <div class="topDataLi3">
+                                <div class="topDataMainCenter">
+                                    <span @click="goToList(4)">待审核招聘</span>
+                                    <span @click="goToList(4)">{{jobRecruitingCount}}</span>
+                                </div>
+                                <div class="topDataMainCenter">
+                                    <span @click="goToList(5)">待审核求职</span>
+                                    <span @click="goToList(5)">{{jobHuntingCount}}</span>
+                                </div>
+                            </div>
+                            <div class="topDataLi4">
+                                <div class="topDataMain">
+                                    <span @click="goToList(6)">待审核行政通知</span>
+                                    <span @click="goToList(6)">{{noticeCount}}</span>
+                                </div>
+                                <div class="topDataMain">
+                                    <span @click="goToList(7)">待审核行政投诉</span>
+                                    <span @click="goToList(7)">{{complaintCount}}</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">{{allWebsiteCount}}</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">{{allCategoryCount}}</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">{{allArticleCount}}</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">{{allGoodsCount}}</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">{{allBookCount}}</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">{{allJobRecruitingCount}}</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">{{allJobHuntingCount}}</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="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="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">
+                            <div class="topDataLi1">
+                                <div class="topDataMain">
+                                    <span @click="goToList(1)">待审核资讯</span>
+                                    <span @click="goToList(1)">{{articleCount}}</span>
+                                </div>
+                            </div>
+                            <div class="topDataLi2">
+                                <div class="topDataMainCenter">
+                                    <span @click="goToList(2)">待审核商品</span>
+                                    <span @click="goToList(2)">{{goodsCount}}</span>
+                                </div>
+                                <div class="topDataMainCenter">
+                                    <span @click="goToList(3)">待审核书刊音像</span>
+                                    <span @click="goToList(3)">{{bookCount}}</span>
+                                </div>
+                            </div>
+                            <!-- <div class="topDataLi3">
+                                <div class="topDataMainCenter">
+                                    <span @click="goToList(4)">待审核招聘</span>
+                                    <span @click="goToList(4)">{{jobRecruitingCount}}</span>
+                                </div>
+                                <div class="topDataMainCenter">
+                                    <span @click="goToList(5)">待审核求职</span>
+                                    <span @click="goToList(5)">{{jobHuntingCount}}</span>
+                                </div>
+                            </div>
+                            <div class="topDataLi4">
+                                <div class="topDataMain">
+                                    <span @click="goToList(6)">待审核行政通知</span>
+                                    <span @click="goToList(6)">{{noticeCount}}</span>
+                                </div>
+                                <div class="topDataMain">
+                                    <span @click="goToList(7)">待审核行政投诉</span>
+                                    <span @click="goToList(7)">{{complaintCount}}</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">{{allArticleCount}}</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">{{allGoodsCount}}</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">{{allBookCount}}</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">{{allJobHuntingCount}}</div>
+                    </div>
+                </el-col> -->
             </el-row>
-          </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">
+                            <div class="topDataLi1">
+                                <div class="topDataMain">
+                                    <span @click="goToList(1)">待审核资讯</span>
+                                    <span @click="goToList(1)">{{articleCount}}</span>
+                                </div>
+                            </div>
+                            <div class="topDataLi2">
+                                <div class="topDataMainCenter">
+                                    <span @click="goToList(2)">待审核商品</span>
+                                    <span @click="goToList(2)">{{goodsCount}}</span>
+                                </div>
+                                <div class="topDataMainCenter">
+                                    <span @click="goToList(3)">待审核书刊音像</span>
+                                    <span @click="goToList(3)">{{bookCount}}</span>
+                                </div>
+                            </div>
+                            <!-- <div class="topDataLi4">
+                                <div class="topDataMain">
+                                    <span @click="goToList(6)">待审核行政通知</span>
+                                    <span @click="goToList(6)">{{noticeCount}}</span>
+                                </div>
+                                <div class="topDataMain">
+                                    <span @click="goToList(7)">待审核行政投诉</span>
+                                    <span @click="goToList(7)">{{complaintCount}}</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">{{allArticleCount}}</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">{{allGoodsCount}}</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">{{allBookCount}}</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">{{allNoticeCount}}</div>
+                                <div>行政通知</div>
+                            </div>
+                            <div class="twbNumber2Item">
+                                <div class="twbNumber2ItemNum">{{allComplaintCount}}</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">
+                            <div class="topDataLi1">
+                                <div class="topDataMain">
+                                    <span @click="goToList(1)">待审核资讯</span>
+                                    <span @click="goToList(1)">{{articleCount}}</span>
+                                </div>
+                            </div>
+                            <div class="topDataLi2">
+                                <div class="topDataMainCenter">
+                                    <span @click="goToList(2)">待审核商品</span>
+                                    <span @click="goToList(2)">{{goodsCount}}</span>
+                                </div>
+                                <div class="topDataMainCenter">
+                                    <span @click="goToList(3)">待审核书刊音像</span>
+                                    <span @click="goToList(3)">{{bookCount}}</span>
+                                </div>
+                            </div>
+                            <!-- <div class="topDataLi3">
+                                <div class="topDataMainCenter">
+                                    <span @click="goToList(4)">待审核招聘</span>
+                                    <span @click="goToList(4)">{{jobRecruitingCount}}</span>
+                                </div>
+                            </div>
+                            <div class="topDataLi4">
+                                <div class="topDataMain">
+                                    <span @click="goToList(6)">待审核行政通知</span>
+                                    <span @click="goToList(6)">{{noticeCount}}</span>
+                                </div>
+                                <div class="topDataMain">
+                                    <span @click="goToList(7)">待审核行政投诉</span>
+                                    <span @click="goToList(7)">{{complaintCount}}</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">{{allWebsiteCount}}</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">{{allGoodsCount}}</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">{{allBookCount}}</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">{{allJobRecruitingCount}}</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">
+                            <div class="topDataLi1">
+                                <div class="topDataMain">
+                                    <span @click="goToList(1)">待审核资讯</span>
+                                    <span @click="goToList(1)">{{articleCount}}</span>
+                                </div>
+                            </div>
+                            <div class="topDataLi2">
+                                <div class="topDataMainCenter">
+                                    <span @click="goToList(2)">待审核商品</span>
+                                    <span @click="goToList(2)">{{goodsCount}}</span>
+                                </div>
+                                <div class="topDataMainCenter">
+                                    <span @click="goToList(3)">待审核书刊音像</span>
+                                    <span @click="goToList(3)">{{bookCount}}</span>
+                                </div>
+                            </div>
+                            <!-- <div class="topDataLi4">
+                                <div class="topDataMain">
+                                    <span @click="goToList(6)">待审核行政通知</span>
+                                    <span @click="goToList(6)">{{noticeCount}}</span>
+                                </div>
+                                <div class="topDataMain">
+                                    <span @click="goToList(7)">待审核行政投诉</span>
+                                    <span @click="goToList(7)">{{complaintCount}}</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">{{allArticleCount}}</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">{{allGoodsCount}}</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">{{allBookCount}}</div>
+                    </div>
+                </el-col>
+            </el-row>
+        </div>
     </div>
-  </div>
 </template>
 
 <script>
@@ -91,177 +586,394 @@ 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//增长数
+    name: 'DashboardAdmin',
+    components: {
+        // GithubCorner,
+        // PanelGroup,
+        LineChart,
+        // RaddarChart,
+        // PieChart,
+        // BarChart,
+        // TransactionTable,
+        // TodoList,
+        // BoxCard,
+        RingChart
+    },
+    data() {
+        return {
+            //防止对象超过三层无法被vue监听，直接把对象的属性拿出来放到这里
+            //待审核数据
+            articleCount: 0, //待审核资讯
+            adCount: 0, //待审核广告
+            goodsCount: 0, //待审核商品
+            bookCount: 0,//待审核书刊音像
+            jobRecruitingCount: 0, //待审核招聘
+            jobHuntingCount: 0, //待审核求职
+            noticeCount: 0, //待审核行政通知
+            complaintCount: 0, //待审核行政投诉
+            //所有数据
+            allWebsiteCount: 0,
+            allArticleCount: 0,
+            allCategoryCount: 0,
+            allGoodsCount: 0,
+            allBookCount: 0,
+            allJobRecruitingCount: 0,
+            allJobHuntingCount: 0,
+            allNoticeCount: 0,
+            allComplaintCount: 0,
+            //折线图
+            chatType: '1', //用户选择的哪个数据
+            indexDataOptions: [
+                {label:'资讯',value:'1'},
+                {label:'商品',value:'2'},
+                {label:'书刊音像',value:'3'},
+                // {label:'招聘',value:'4'},
+                // {label:'求职',value:'5'}
+            ],
+            lineChartData:[],//折线图目前展示哪个数据
+            lineChartData1: [],//折线图数据 - 资讯
+            lineChartData2: [],//折线图数据 - 商品
+            lineChartData3: [],//折线图数据 - 书刊音像
+            lineChartData4: [],//折线图数据 - 招聘
+            lineChartData5: [],//折线图数据 - 求职
+            //圆环图
+            ringChartData: [],//圆环图数据
+            //用户身份
+            userType: 0,
         }
-      },
-      chartData:{
-        lineChartData:[],//折线图数据
-        ringChartData:[]//圆环图数据
-      }
-    }
-  },
-  methods: {
-    //获取用户身份信息
-    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{
-          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) {
+            //跳转
+            this.$router.push({
+                path: '/articleList',
+                query: {
+                    id: row.id
+                }
+            })
+        },
+        // 获取首页数据
+        //获取用户身份信息
+        getUserInfo() {
+            let that = this;
+            this.$store.dispatch('public/getInfo').then(res => {
+                this.userType = res.data.type_id;
+                that.getData();
+            })
+        },
+        getData() {
+            //获取首页数据
+            this.$store.dispatch('public/getAdminIndex').then(res => {
+                if(res.code==200){
+                    //待审核数据
+                    this.articleCount = res.data.apply.article;
+                    this.adCount = res.data.apply.order;
+                    this.goodsCount = res.data.apply.good;
+                    this.bookCount = res.data.apply.book;
+                    this.jobRecruitingCount = res.data.apply.jobRecruiting;
+                    this.jobHuntingCount = res.data.apply.jobHunting;
+                    this.noticeCount = res.data.apply.notice;
+                    this.complaintCount = res.data.apply.complaint;
+                    //所有数据
+                    this.allWebsiteCount = res.data.website.count;
+                    this.allCategoryCount = res.data.category.count;
+                    this.allArticleCount = res.data.article.count;
+                    this.allGoodsCount = res.data.good.count;
+                    this.allBookCount = res.data.book.count;
+                    this.allJobRecruitingCount = res.data.jobRecruiting.count;
+                    this.allJobHuntingCount = res.data.jobHunting.count;
+                    this.allNoticeCount = res.data.notice.count;
+                    this.allComplaintCount = res.data.complaint.count;
+                    //折线图
+                    this.lineChartData = res.data.monthArticle;//当前展示的那个
+                    this.lineChartData1 = res.data.monthArticle;//折线图数据 - 资讯
+                    this.lineChartData2 = res.data.monthGood;//圆环图数据 - 资讯
+                    this.lineChartData3 = res.data.monthBook;//圆环图数据 - 书刊音像
+                    this.lineChartData4 = res.data.monthJobRecruiting;//圆环图数据 - 招聘
+                    this.lineChartData5 = res.data.monthJobHunting;//圆环图数据 - 求职
+                    //圆环图
+                    this.ringChartData = res.data.userType;
+                }
+            })
+        },
+        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.lineChartData = this.lineChartData1;
+            }
+            if(type == 2){
+                this.lineChartData = this.lineChartData2;
+            }
+            if(type == 3){
+                this.lineChartData = this.lineChartData3;
+            }
+            if(type == 4){
+                this.lineChartData = this.lineChartData4;
+            }
+            if(type == 5){
+                this.lineChartData = this.lineChartData5;
+            }
         }
-      })
     },
-  },
-  mounted(){
-    //先获取用户身份
-    this.getUserInfo(this.getData)
-    //再获取数据
-    // this.getData()
-  }
+    mounted() {
+        //先获取用户身份
+        this.getUserInfo()
+    }
 }
 </script>
 
 <style lang="less" scoped>
-  @title: #212227;
-  @bgColor: #FFFFFF;
-  .topWindowBox{
-    background:@bgColor;
-    border-Radius:20px;
-    height:160px;
-    width:100%;
-    margin-bottom:30px;
-    padding:25px;
+@title: #212227;
+@bgColor: #FFFFFF;
+
+//图标背景
+.chatIconBox {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    line-height: 40px;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    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;
+}
+
+//顶部数据展示
+.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;
-      .twbIconbgRed,.twbIconbgBlue,.twbIconbgPurple{
-        width: 40px;
-        height: 40px;
-        border-radius: 50%;
-        margin-right: 15px;
-      }
-      // .twbIconbgRed {
-      //   background: #EA79BA;
-      // }
-      // .twbIconbgBlue {
-      //   background: #6DACE7;
-      // }
-      // .twbIconbgPurple{
-      //   background: #AA7AEB;
-      // }
+        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;}
+
     }
+
     .twbNumber {
-      font-size: 30px;
-      margin-top:32px;
-      font-weight: 1000;
+        font-size: 30px;
+        margin-top: 20px;
+        font-weight: 1000;
     }
-    .twbStatus,.twbStatusDown {
-      font-size:14px;
-      margin-top: 35px;
-      display:flex;
-      img {
-        display: block;
-        margin-right: 4px;
-      }
-      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,
+    .twbStatusDown {
+        font-size: 14px;
+        margin-top: 10px;
+        display: flex;
+
+        img {
+            display: block;
+            margin-right: 4px;
+        }
+
+        span {
+            color: #707B81;
+            margin-left: 8px;
+        }
     }
+
     .twbStatus {
-      color:#23C581;
+        color: #23C581;
     }
+
     .twbStatusDown {
-      color:#E74545
+        color: #E74545
     }
-  }
+}
 
-  .chartBox {
+.chartBox {
     width: 100%;
     height: 440px;
     border-radius: 20px;
     overflow: hidden;
     background-color: @bgColor;
+
     .chartTitle {
-      color: @title;
-      padding: 30px 30px 0 30px;
-      font-size: 16px;
+        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;
+}
 
-  .dashboard-editor-container {
+.dashboard-editor-container {
     padding: 32px;
     background-color: rgb(240, 242, 245);
     position: relative;
 
     .github-corner {
-      position: absolute;
-      top: 0px;
-      border: 0;
-      right: 0;
+        position: absolute;
+        top: 0px;
+        border: 0;
+        right: 0;
     }
 
     .chart-wrapper {
-      background: #fff;
-      padding: 16px 16px 0;
-      margin-bottom: 32px;
+        background: #fff;
+        padding: 16px 16px 0;
+        margin-bottom: 32px;
     }
-  }
+}
 
-  @media (max-width:1024px) {
+@media (max-width:1024px) {
     .chart-wrapper {
-      padding: 8px;
+        padding: 8px;
     }
-  }
+}
+
+::v-deep .chartSelectInput .el-input__inner {
+    background:#F2F4FE;
+    color:#5570F1;
+    border:none;
+    border-radius: 8px;
+    width:130px;
+    margin-left:20px;
+}
 </style>