网格大屏-修改bug

src/components/top-menu.vue

@@ -10,9 +10,9 @@
             <dv-decoration-8 :reverse="true" style="width: 100%;height: 100%;" />
           </div>
           <div style="display: flex;justify-content: center;align-items: center;flex-direction: column;height: 100%;">
-            <div style="display: flex;margin-top: 40px;">
+            <div style="display: flex;">
               <dv-decoration-1 style="width:200px;height:50px;margin-top: 15px;" />
-              <div style="width: 260px;">
+              <div style="width: 260px;margin-top: 8px;">
                 <el-select style="z-index: 99;" class="myselect" popper-class="popperClass"
                   @change="changeGrid" :value="currentGrid.gridName">
                   <el-option v-for="(item,index) in gridList" :label="item.gridName" :value="index">
@@ -22,7 +22,7 @@
               </div>
               <dv-decoration-1 style="width:200px;height:50px;margin-top: 15px;" />
             </div>
-            <dv-decoration-5 style="width:35%;height:50%;margin-top: -25px;" />"
+            <dv-decoration-5 style="width:35%;height:60%;margin-top: -20px;" />
           </div>
         </div>
         <div class="nav_btn">
@@ -168,7 +168,7 @@
 </script>
 
 <style>
-  .popperClass {
+ .popperClass {
     background-color: rgba(0, 0, 0, .4) !important;
     z-index: 9999 !important;
     color: #01f8ce;

src/views/grid/dataPage.vue

@@ -1,8 +1,9 @@
 <template>
   <div class="full">
     <map3-d ref="map" style="height: 100%;"></map3-d>
-    <data-screen v-if="clickIndex==0"></data-screen>
-    <person-screen v-if="clickIndex==1"></person-screen>
+    <data-screen  v-if="clickIndex==0"></data-screen>
+    <person-screen :class="tagIndex!=0?'animate__animated animate__faster animate__bounceOutDown':''" v-if="clickIndex==1"></person-screen>
+    <party-screen :class="tagIndex!=0?'animate__animated animate__faster animate__bounceOutDown':''" v-if="clickIndex==2"></party-screen>
 
     <div class="btnGroup" :class="tagIndex!=0?'animate__animated animate__faster animate__bounceOutLeft':''">
       <div class="animate__fast" :id="item.name" v-for="(item,index) of menu" :key="index"
@@ -26,12 +27,14 @@
   import Map3D from "../../components/3DMap/Map3D.vue"
   import dataScreen from "./scenes/dataScreen.vue"
   import personScreen from "./scenes/personScreen.vue"
+  import partyScreen from "./scenes/partyScreen.vue"
   import topMenu from "../../components/top-menu.vue"
   export default {
     components: {
       Map3D,
       dataScreen,
       personScreen,
+      partyScreen,
       topMenu
     },
     computed:{
@@ -50,15 +53,11 @@
             time: '0.5s'
           },
           {
-            name: '特殊人员',
-            time: '0.5s'
-          },
-          {
-            name: '车辆统计',
+            name: '党员统计',
             time: '0.6s'
           },
           {
-            name: '党员统计',
+            name: '车辆统计',
             time: '0.65s'
           },
           {
@@ -75,8 +74,12 @@
     },
     methods: {
       btnClick(item, index) {
-        this.clickIndex = index
         this.$animateCss('#' + item.name, 'animate__heartBeat')
+        if (index==0 || index==1 || index==2) {
+          this.clickIndex = index
+        }else{
+          this.$message('定制中...');
+        }
       }
     }
   }

src/views/grid/scenes/dataScreen.vue

@@ -122,11 +122,12 @@
             <div style="width: 90%;height: 15%;color: white;font-size: 20px;font-weight: 800;"
               :style="{color:fontColor}" class="center">告警信息列表</div>
 
-              <div v-if="config.data.length>0" style="width: 94%;color: #FFFFFF;margin-top: 10px;display: flex; justify-content: space-around;background-color: #ee6666;padding: 10px 0;">
-                <div>告警类型</div>
-                <div>设备地点</div>
-                <div>告警时间</div>
-              </div>
+            <div v-if="config.data.length>0"
+              style="width: 94%;color: #FFFFFF;margin-top: 10px;display: flex; justify-content: space-around;background-color: #ee6666;padding: 10px 0;">
+              <div>告警类型</div>
+              <div>设备地点</div>
+              <div>告警时间</div>
+            </div>
             <dv-scroll-board ref="border8" v-if="config.data.length>0" style="height: 82%;width: 94%"
               :config="config" />
             <div class="green" style="font-size: 20px;letter-spacing: 5px" v-else>暂无报警信息</div>
@@ -193,6 +194,10 @@
   import {
     mapGetters
   } from "vuex";
+  import {
+    getList as getNoticeList
+  } from "/src/api/desk/notice.js"
+
   import {
     getAgencyListForCustom,
     getAgencysByAreaCode,
@@ -209,7 +214,9 @@
       Map3D
     },
     mounted() {
-      let _this = this
+      getNoticeList().then(res=>{
+        console.log(res,"========================>");
+      })
       this.getOptionData()
     },
     watch: {
@@ -238,10 +245,6 @@
         selectGrid: {},
         selectGridIndex: 0,
 
-        dialogShow: false,
-        maskShow: false,
-        closeEnter: false,
-
         noticeOption: {
           columnWidth: [500],
           oddRowBGC: 'rgba(9, 215, 183, 0.1)',
@@ -253,6 +256,10 @@
             ['停水通知，停水通知'],
           ]
         },
+
+        dialogShow: false,
+        maskShow: false,
+        closeEnter: false,
         fontColor: "#00f9cf",
         backgroundColor: "rgba(15, 33, 70, 0.6)",
         color: ['#42599d', '#3a4e8a'],
@@ -337,12 +344,17 @@
         this.fetchData(this.$route.query['id']);
         let _this = this
         setTimeout(() => {
+          //获取通知公告的数据
+          _this.getNoticeOption()
           //获取人员分布
           _this.getPersonnelDistribution()
           //获取年龄分布
           _this.getAgeDistribution()
           _this.getGridOption()
         }, 500)
+      },
+      async getNoticeOption(){
+
       },
       changeGridIndex(type) {
         this.$animateCss('#gridName', 'animate__fadeInDown')
@@ -543,9 +555,9 @@
           myChart.resize();
         })
 
-        let nameList=[]
-        let valueList=[]
-        data.forEach(item=>{
+        let nameList = []
+        let valueList = []
+        data.forEach(item => {
           nameList.push(item.name)
           valueList.push(item.value)
         })
@@ -708,9 +720,9 @@
           data.data.push([item.alarmContent, item.alarmPosition, item.alarmTime])
         });
         this.config = data
-        let _this=this
+        let _this = this
         window.addEventListener('resize', function() { //执行
-           _this.config.resize();
+          _this.config.resize();
         })
       },
       resize() {

src/views/grid/scenes/partyScreen.vue

@@ -0,0 +1,468 @@
+<template>
+  <div class="full" style="z-index: 9;">
+    <!-- 左视图 -->
+    <div class="left-view">
+      <dv-border-box-6 class="animate__animated animate__backInLeft animate__faster" ref="border3" style="height: 58%;"
+        :color="color" :backgroundColor="backgroundColor">
+        <dv-border-box-8 style="height: 100%;">
+          <dv-border-box-1>
+            <div class="full center" style="flex-direction: column">
+              <div class="title">
+                党员人数变化
+                <dv-decoration-5 style="width:350px;height:20px;" />
+              </div>
+              <div id="numChange" style="width: 90%;height: 90%;"></div>
+            </div>
+          </dv-border-box-1>
+        </dv-border-box-8>
+      </dv-border-box-6>
+      <dv-border-box-6 class="animate__animated animate__backInLeft animate__faster" ref="border3" style="height: 40%;"
+        :color="color" :backgroundColor="backgroundColor">
+        <dv-border-box-8 :reverse="true" style="height: 98%;width: 98%;">
+          <dv-border-box-1 style="height: 100%;">
+            <div class="center full" style="padding-top: 50px;">
+              <div id="partyAge" style="width: 90%;height: 100%;"></div>
+            </div>
+          </dv-border-box-1>
+        </dv-border-box-8>
+      </dv-border-box-6>
+    </div>
+
+    <!-- 底部视图 -->
+    <div class="bottom-view">
+      <dv-border-box-4 style="width: 100%;height: 100%;position: relative;" :color="['#00f9cf', '#2b496a']"
+        :backgroundColor="backgroundColor" class="animate__animated animate__backInLeft animate__faster">
+        <div class="full center" style="flex-direction: column">
+          <div class="title" style="margin-bottom: -50px;display: flex;">
+            <dv-decoration-3 style="width:150px;height:30px;margin-right: 10px;" />
+            党员学历统计
+            <dv-decoration-3 style="width:150px;height:30px;margin-left: 10px;" />
+          </div>
+          <div id="educationOption" style="width: 100%;height: 90%;"></div>
+        </div>
+        <dv-decoration-4 :color="['#4ed0dc', '#4ed0dc']"
+          style="width:2px;height:85%;position: absolute;right: 2%;top: 10%;" />
+        <dv-decoration-4 :color="['#4ed0dc', '#4ed0dc']" :reverse="true"
+          style="width:93%;height:5px;position: absolute;bottom: 1%;left: 5%;" />
+      </dv-border-box-4>
+    </div>
+
+  <!-- 右部视图 -->
+    <div class="right-view">
+
+      <dv-border-box-6 class="animate__animated animate__backInRight animate__faster"
+        backgroundColor="rgba(15, 33, 70, 0.7)" :color="['#00f9cf', '#2b496a']" style="width: 100%;height: 55%;position: relative;">
+        <dv-border-box-8 :color="['#2b496a', '#00f9cf']" :reverse="true" style="height: 100%;">
+          <dv-border-box-1 >
+            <div class="full center" style="flex-direction: column">
+              <div class="title">
+                党员人数变化
+                <dv-decoration-5 style="width:350px;height:20px;" />
+              </div>
+              <dv-scroll-ranking-board :config="ageConfig" style="width:80%;height:80%" />
+            </div>
+          </dv-border-box-1>
+        </dv-border-box-8>
+      </dv-border-box-6>
+
+      <dv-border-box-5 class="animate__animated animate__backInRight animate__faster"
+        style="width: 100%;height: 35%;position: relative;" :backgroundColor="backgroundColor"
+        :color="['#00f9cf', '#2b496a']">
+        <div class="center full" style="flex-direction:column;padding-top: 10px;">
+          <div class="title" style="margin-bottom: -20px;display: flex;justify-content: center;">
+            <dv-decoration-1 style="width:30%;height:30px;" />
+            党员性别占比
+            <dv-decoration-1 style="width:30%;height:30px;" />
+          </div>
+          <div id="genderOption" style="width: 90%;height: 90%;"></div>
+        </div>
+        <dv-decoration-4 :color="['#4ed0dc', '#4ed0dc']" :reverse="true"
+          style="width:80%;height:5px;position: absolute;bottom: 1%;left: 5%;" />
+      </dv-border-box-5>
+    </div>
+
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        fontColor: "#fff",
+        backgroundColor: "rgba(15, 33, 70, 0.6)",
+        color: ['#0f234a', '#2b496a'],
+        ageConfig: {},
+
+      }
+    },
+    mounted() {
+      this.getOption()
+    },
+    methods: {
+      getOption() {
+        this.getNumchangeOption()
+        this.getPartyAgeOption()
+        this.getEducationOption()
+        this.getGenderOption()
+        this.getAgeOption()
+      },
+      getAgeOption() {
+        this.ageConfig = {
+          data: [{
+              name: '21-25岁',
+              value: 23
+            },
+            {
+              name: '26-30岁',
+              value: 62
+            },
+            {
+              name: '31-35岁',
+              value: 63
+            },
+            {
+              name: '36-40岁',
+              value: 24
+            },
+            {
+              name: '41-45岁',
+              value: 12
+            },
+            {
+              name: '46-50岁',
+              value: 16
+            },
+            {
+              name: '51-55岁',
+              value: 8
+            },
+            {
+              name: '56-60岁',
+              value: 54
+            },
+            {
+              name: '60岁以上',
+              value: 2
+            }
+          ],
+          rowNum: 7,
+          unit: '人'
+        }
+      },
+      getGenderOption() {
+        var myChart = this.$echarts.init(document.getElementById('genderOption'));
+        let option = {
+          tooltip: {
+            trigger: 'item'
+          },
+          legend: {
+            orient: 'vertical',
+            left: 'left',
+            textStyle: {
+              color: "#fff"
+            },
+          },
+          series: [{
+            name: '访问来源',
+            type: 'pie',
+            radius: '50%',
+            data: [{
+                value: 68,
+                name: '男'
+              },
+              {
+                value: 21,
+                name: '女'
+              }
+            ],
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: 'rgba(0, 0, 0, 0.5)'
+              }
+            }
+          }]
+        };
+        myChart.setOption(option);
+      },
+      getEducationOption() {
+        var myChart = this.$echarts.init(document.getElementById('educationOption'));
+        let option = {
+           tooltip: {
+             trigger: 'axis'
+           },
+          textStyle: {
+            color: "#fff"
+          },
+          grid: {
+            left: '3%',
+            right: '4%',
+            bottom: '4%',
+            containLabel: true
+          },
+          xAxis: {
+            type: 'category',
+            data: ['博士', '研究生', '大学本科', '大专',
+              '中专中技', '技工学校', '高中',"初中","小学","文盲半文盲"]
+          },
+          yAxis: {
+            type: 'value'
+          },
+          series: [{
+            data:[
+              {
+                value:23,
+                itemStyle: {
+                  color: '#37a2da'
+                }
+              },
+              {
+                value:26,
+                itemStyle: {
+                  color: '#32c5e9'
+                }
+              },
+              {
+                value:23,
+                itemStyle: {
+                  color: '#67e0e3'
+                }
+              },
+              {
+                value:32,
+                itemStyle: {
+                  color: '#32c5e9'
+                }
+              },
+              {
+                value:56,
+                itemStyle: {
+                  color: '#26c3be'
+                }
+              },
+              {
+                value:32,
+                itemStyle: {
+                  color: '#91cc75'
+                }
+              },
+              {
+                value:42,
+                itemStyle: {
+                  color: '#2be3dd'
+                }
+              },
+              {
+                value:12,
+                itemStyle: {
+                  color: '#64afe9'
+                }
+              },
+              {
+                value:8,
+                itemStyle: {
+                  color: '#00aaff'
+                }
+              },
+              {
+                value:0,
+                itemStyle: {
+                  color: '#64afe9'
+                }
+              },
+            ],
+            type: 'bar'
+          }]
+        };
+        myChart.setOption(option);
+      },
+
+      getPartyAgeOption() {
+        var myChart = this.$echarts.init(document.getElementById('partyAge'));
+        let option = {
+          color: ['#67F9D8', '#FFE434', '#56A3F1', '#FF917C'],
+          title: {
+            text: '党员党龄统计',
+            textStyle: {
+              color: this.fontColor
+            }
+          },
+          tooltip: {
+            trigger: 'item',
+          },
+          legend: {
+            data: ['人数'],
+            textStyle: {
+              color: "#fff"
+            }
+          },
+          grid: {
+            left: '2%',
+            right: '2%',
+            bottom: '2%',
+            containLabel: true
+          },
+          radar: [{
+            indicator: [{
+                text: '5年以下',
+              },
+              {
+                text: '5-20年',
+              },
+              {
+                text: '20-30年',
+              },
+              {
+                text: '30-40年',
+              },
+              {
+                text: '40年以上',
+              }
+            ],
+            radius: 80,
+            startAngle: 90,
+            splitNumber: 4,
+            shape: 'circle',
+            name: {
+              textStyle: {
+                color: '#ffffff'
+              }
+            },
+            splitArea: {
+              areaStyle: {
+                color: ['#77EADF', '#26C3BE', '#64AFE9', '#428BD4'],
+                shadowColor: 'rgba(0, 0, 0, 0.2)',
+              }
+            },
+            axisLine: {
+              lineStyle: {
+                color: 'rgba(211, 253, 250, 0.8)'
+              }
+            },
+            splitLine: {
+              lineStyle: {
+                color: 'rgba(211, 253, 250, 0.8)'
+              }
+            }
+          }],
+          series: [{
+            name: '雷达图',
+            type: 'radar',
+            emphasis: {
+              lineStyle: {
+                width: 4
+              }
+            },
+            data: [{
+              value: [6, 38, 20, 5, 2],
+              name: '人数'
+            }]
+          }]
+        };
+        myChart.setOption(option);
+      },
+      getNumchangeOption() {
+        var myChart = this.$echarts.init(document.getElementById('numChange'));
+        let option = {
+          textStyle: {
+            color: "#fff"
+          },
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              type: 'shadow'
+            }
+          },
+          legend: {
+            data: ['正式党员', '预备党员'],
+            textStyle: {
+              color: "#fff"
+            },
+          },
+          grid: {
+            left: '2%',
+            right: '2%',
+            bottom: '4%',
+            containLabel: true
+          },
+          yAxis: {
+            type: 'value',
+          },
+          xAxis: {
+            type: 'category',
+            data: ['2020-07', '2020-08', '2020-09', '2020-10',
+              '2020-11', '2020-12', '2021-01', '2021-02', '2021-03',
+              '2021-04', '2021-05', '2021-06'
+            ],
+          },
+          color: ['#167ee0', '#2aa854'],
+          series: [{
+              name: '正式党员',
+              type: 'bar',
+              data: [0, 0, 0, 0, 49, 0, 0, 0, 0, 0, 20, 0, ]
+            },
+            {
+              name: '预备党员',
+              type: 'bar',
+              data: [0, 0, 0, 0, 17, 0, 0, 0, 0, 0, 2, 0, ]
+            }
+          ]
+        };
+        myChart.setOption(option);
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .full {
+    width: 100%;
+    height: 100%;
+  }
+
+  .title {
+    text-align: center;
+    padding: 15px 0;
+    font-size: 20px;
+    color: #fff;
+    font-weight: 800;
+  }
+
+  .center {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .left-view {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 22%;
+    height: 88%;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+
+  }
+
+  .bottom-view {
+    position: absolute;
+    bottom: 0%;
+    left: 22%;
+    right: 22%;
+    height: 24%;
+  }
+
+  .right-view {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    width: 23%;
+    height: 85%;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+  }
+</style>

src/views/grid/scenes/personScreen.vue

@@ -1,5 +1,6 @@
 <template>
-  <div class="full" style="z-index: 9;">
+  <div class="full"  style="z-index: 9;">
+    <!-- 左部视图 -->
     <div class="left-view">
       <dv-border-box-11 title="人口年龄结构图" class="animate__animated animate__backInLeft animate__faster" ref="border3"
         style="height: 70%;" :color="color" :backgroundColor="backgroundColor">
@@ -23,13 +24,25 @@
 
     <!-- 底部视图 -->
     <div class="bottom-view">
-      <dv-border-box-12 class="animate__animated animate__backInLeft animate__faster" style="height: 100%"
-        :color="color" :backgroundColor="backgroundColor">
+      <dv-border-box-12 style="position: relative;height: 100%" class="animate__animated animate__backInLeft animate__faster"
+         :color="color" :backgroundColor="backgroundColor">
         <dv-border-box-1>
           <div style="padding: 10px;width: 100%;height: 100%;padding-top: 20px;">
             <div id="personChangeOption" style="height: 90%;width: 100%;"></div>
           </div>
         </dv-border-box-1>
+
+        <div style="position: absolute;top: 6%;right: 4%;">
+          <el-select @change="selectChange" size="mini" popper-class="popperClass1" v-model="value" placeholder="请选择">
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
+        </div>
+
       </dv-border-box-12>
     </div>
 
@@ -47,7 +60,7 @@
         :color="color" :backgroundColor="backgroundColor">
         <dv-border-box-1 style="height: 100%;">
           <div style="text-align: center;padding-top: 15px;font-size: 20px;" :style="{color:fontColor}">
-              特殊人员变化
+            特殊人员变化
           </div>
           <div style="padding: 10px;width: 100%;height: 100%;padding-top: 20px;">
             <div id="specialPersonnelChange" style="height: 90%;width: 100%;"></div>
@@ -66,6 +79,15 @@
         fontColor: "#00f9cf",
         backgroundColor: "rgba(15, 33, 70, 0.6)",
         color: ['#0f234a', '#2b496a'],
+
+        options: [{
+          value: 'month',
+          label: '最近一个月'
+        }, {
+          value: 'year',
+          label: '最近一年'
+        }],
+        value: 'month'
       }
     },
     mounted() {
@@ -82,6 +104,9 @@
         this.getSpecialPersonnelChange()
         this.getProportionOfKeyPersonnel()
       },
+      selectChange(e){
+          this.getPersonChangeOption(e)
+      },
       getSpecialPersonnelChange() {
         var myChart = this.$echarts.init(document.getElementById('specialPersonnelChange'));
         let option = {
@@ -96,7 +121,7 @@
             }
           },
           legend: {
-            data: ['重点人员', '关爱人员','服务人员'],
+            data: ['重点人员', '关爱人员', '服务人员'],
             textStyle: {
               color: "#fff"
             },
@@ -112,23 +137,23 @@
           },
           xAxis: {
             type: 'category',
-            data: ['2020-06', '2020-07', '2020-08', '2020-09', '2020-10', '2020-11', '2020-12', '2021-01','2021-02'],
+            data: ['2020-06', '2020-07', '2020-08', '2020-09', '2020-10', '2020-11', '2020-12', '2021-01', '2021-02'],
           },
-          color:['#3cb2ef','#9fe080','#5470c6'],
+          color: ['#3cb2ef', '#9fe080', '#5470c6'],
           series: [{
               name: '重点人员',
               type: 'bar',
-              data: [6,0,10,96,23,87,20,26,10]
+              data: [6, 0, 10, 96, 23, 87, 20, 26, 10]
             },
             {
               name: '关爱人员',
               type: 'bar',
-              data: [96,10,0,30,0,23,6,12,26]
+              data: [96, 10, 0, 30, 0, 23, 6, 12, 26]
             },
             {
               name: '服务人员',
               type: 'bar',
-              data: [56,20,90,35,43,0,56,45,36]
+              data: [56, 20, 90, 35, 43, 0, 56, 45, 36]
             }
           ]
         };
@@ -141,7 +166,7 @@
             text: '重点人员比例',
             left: 'center',
             textStyle: {
-              color:  this.fontColor,
+              color: this.fontColor,
             },
           },
           tooltip: {
@@ -154,7 +179,7 @@
               color: "#fff"
             },
           },
-          color:['#37a2da','#32c5e9','#67e0e3','#32c5e9','#ffdb5c','#9fe080','#5c7caf'],
+          color: ['#37a2da', '#32c5e9', '#67e0e3', '#32c5e9', '#ffdb5c', '#9fe080', '#5c7caf'],
           series: [{
             name: '重点人员',
             type: 'pie',
@@ -199,8 +224,30 @@
         };
         myChart.setOption(option);
       },
-      getPersonChangeOption() {
+      getPersonChangeOption(type='month') {
         var myChart = this.$echarts.init(document.getElementById('personChangeOption'));
+        let nameList=[]
+        let valueList={}
+        if (type=='month') {
+          nameList=['05-02', '05-03', '05-04', '05-05', '05-06', '05-07', '05-08', '05-09', '05-10',
+              '05-11', '05-12', '05-13', '05-14', '05-15', '05-16', '05-17', '05-18', '05-19', '05-20',
+              '05-21', '05-22', '05-23', '05-24', '05-25', '05-26', '05-27', '05-28', '05-29', '05-30'
+            ]
+          valueList={
+            permanent:[0, 0, 0, 0, 0, 3, 4, 13, 0, 0, 1, 1, 0, 0, 0, 0, 9, 8, 0, 4, 5, 0, 0, 8, 0, 5, 12, 4, 0, 0],
+            flow:[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 1, 4, 5, 0, 0, 8, 0, 5, 5, 2, 0, 0],
+            overseas:[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
+          }
+        }else{
+          nameList=['2020-07','2020-08','2020-09','2020-10','2020-11','2020-12','2021-01','2021-02','2021-03','2021-04',
+          '2021-05','2021-06'
+          ]
+          valueList={
+            permanent:[0, 0, 0, 0,3187, 1, 0, 0 , 0, 0, 0, 0],
+            flow:[0, 0, 0, 0, 210, 4, 0, 0, 0, 0, 0, 0],
+            overseas:[0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0]
+          }
+        }
         let option = {
           title: {
             text: '小区人口变化',
@@ -227,22 +274,14 @@
             bottom: '4%',
             containLabel: true
           },
-          toolbox: {
-            feature: {
-              saveAsImage: {}
-            }
-          },
-          color:['#37a2da','#32c5e9','#9fe080'],
+          color: ['#37a2da', '#32c5e9', '#9fe080'],
           xAxis: {
             splitLine: {
               show: false
             },
             type: 'category',
             boundaryGap: false,
-            data: ['05-02', '05-03', '05-04', '05-05', '05-06', '05-07', '05-08', '05-09', '05-10',
-              '05-11', '05-12', '05-13', '05-14', '05-15', '05-16', '05-17', '05-18', '05-19', '05-20',
-              '05-21', '05-22', '05-23', '05-24', '05-25', '05-26', '05-27', '05-28', '05-29', '05-30'
-            ],
+            data: nameList,
           },
           yAxis: {
             splitLine: {
@@ -255,21 +294,21 @@
               type: 'line',
               stack: '人数',
               smooth: true,
-              data: [0, 0, 0, 0, 0, 3, 4, 13, 0, 0, 1, 1, 0, 0, 0, 0, 9, 8, 0, 4, 5, 0, 0, 8, 0, 5, 12, 4, 0, 0]
+              data: valueList.permanent
             },
             {
               name: '流动人口',
               type: 'line',
               stack: '人数',
               smooth: true,
-              data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 1, 4, 5, 0, 0, 8, 0, 5, 5, 2, 0, 0]
+              data: valueList.flow
             },
             {
               name: '境外人口',
               type: 'line',
               stack: '人数',
               smooth: true,
-              data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
+              data: valueList.overseas
             }
           ]
         };
@@ -291,13 +330,13 @@
               color: this.fontColor
             },
           },
-          textStyle:{
-            color:"#fff"
+          textStyle: {
+            color: "#fff"
           },
           legend: {
             data: ['男', '女'],
-            textStyle:{
-              color:"#fff"
+            textStyle: {
+              color: "#fff"
             }
           },
           grid: {
@@ -323,7 +362,7 @@
               emphasis: {
                 focus: 'series'
               },
-              data: [1833,0,0,0,0]
+              data: [1833, 0, 0, 0, 0]
             },
             {
               name: '女',
@@ -335,7 +374,7 @@
               emphasis: {
                 focus: 'series'
               },
-              data: [1680,0,0,0,0]
+              data: [1680, 0, 0, 0, 0]
             }
           ]
         };
@@ -399,7 +438,49 @@
   }
 </script>
 
+<style>
+  .popperClass1 {
+    background-color: #fff !important;
+    z-index: 9999 !important;
+    color: #FFFFFF !important;
+    border-color: #fff !important
+  }
+</style>
+
 <style lang="scss" scoped>
+  ::v-deep {
+    .el-input__inner {
+      color: #fff;
+      border-color: rgba(104, 141, 199, 0.7);
+      background-color: rgba(104, 141, 199, 0.7);
+      width: 105px;
+      height: 25px;
+      border-radius: 0;
+      text-align: center;
+    }
+    .el-input__suffix {
+        right: 0px;
+        transition: all .3s;
+        pointer-events: none;
+    }
+
+    .el-select-dropdown__item {
+        font-size: 14px;
+        padding: 0 20px;
+        position: relative;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        color: #FFFFFF;
+        height: 34px;
+        line-height: 34px;
+        -webkit-box-sizing: border-box;
+        box-sizing: border-box;
+        cursor: pointer;
+    }
+  }
+
+
   .full {
     width: 100%;
     height: 100%;
@@ -452,11 +533,4 @@
     right: 22%;
     height: calc(24%);
   }
-
-  .title {
-    width: 90%;
-    height: 15%;
-    color: white;
-    font-size: 18px
-  }
 </style>