下拉框样式

src/assets/scss/modules/visual/processAnalyze.scss

@@ -19,23 +19,43 @@
   span {
     display: block;
   }
-  .customer_cascader {
-    margin-left: 10px;
-    width: 280px;
-  }
 
-  .customer_select {
+  .second-title {
-    margin-left: 10px;
     display: flex;
-    justify-content: flex-start;
+    align-items: center;
 
-    > span {
+    .second-select {
-      width: auto;
+      margin: 0 10px 0 40px;
-      font-size: 22px;
+
-      font-family: PingFang SC;
+      ::v-deep .el-input {
-      font-weight: 800;
+        width: 140px;
-      color: #ffffff;
+        height: 36px;
-      line-height: 34px;
+        .el-input__inner {
+          height: 100%;
+          padding: 0 10px;
+          color: #fff;
+          line-height: 36px;
+          background: #06186d;
+          border: 1px solid #1a64cc;
+        }
+        .el-icon-arrow-up:before {
+          content: '\e78f';
+        }
+      }
+      ::v-deep .el-date-editor {
+        .el-input__prefix {
+          left: unset;
+          right: 5px;
+        }
+      }
+    }
+    .cascader {
+      ::v-deep .el-input {
+        width: 220px;
+      }
+    }
+    .second-select:last-child {
+      margin-left: 0;
     }
   }
 }
@@ -43,8 +63,6 @@
 .g-cpt-resi {
   display: flex;
   flex-direction: row;
-  // flex-wrap: wrap;
-  // justify-content: center;
   height: calc(100vh - 170px);
 
   .g-l {
@@ -64,15 +82,6 @@
     .l_bottom {
       height: calc(100vh - 230px - 385px);
       margin-top: 20px;
-      > span {
-        font-size: 18px;
-        font-family: PingFang SC;
-        font-weight: 800;
-        color: #ffffff;
-      }
-      .echart-line {
-        margin-top: 10px;
-      }
     }
   }
 
@@ -83,6 +92,37 @@
     height: calc(100vh - 160px - 20px);
   }
 }
+
+.l_bottom {
+  .bottom_label {
+    position: relative;
+    padding-left: 40px;
+    font-size: 16px;
+    font-weight: 500;
+    color: #fff;
+  }
+  .bottom_label::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 20px;
+    width: 12px;
+    height: 12px;
+    box-sizing: border-box;
+    margin-top: -6px;
+    background: #2865fa;
+    border-radius: 50%;
+  }
+  > span {
+    font-size: 18px;
+    font-family: PingFang SC;
+    font-weight: 800;
+    color: #ffffff;
+  }
+  .echart-line {
+    margin-top: 10px;
+  }
+}
 .g-count {
   margin-top: 104px;
   margin-left: 52px;

src/assets/scss/modules/visual/resibuzz.scss

@@ -19,26 +19,45 @@
   span {
     display: block;
   }
-  .customer_cascader {
+
-    margin-left: 10px;
+  .second-select {
-    width: 280px;
+    margin: 0 10px 0 40px;
+
+    ::v-deep .el-input {
+      width: 140px;
+      height: 36px;
+      .el-input__inner {
+        height: 100%;
+        padding: 0 10px;
+        color: #fff;
+        line-height: 36px;
+        background: #06186d;
+        border: 1px solid #1a64cc;
+      }
+      .el-icon-arrow-up:before {
+        content: '\e78f';
+      }
+    }
+    ::v-deep .el-date-editor {
+      .el-input__prefix {
+        left: unset;
+        right: 5px;
+      }
+    }
   }
 
-  .customer_select {
+  .cascader {
+    ::v-deep .el-input {
+      width: 220px;
+    }
+  }
+  .status-select {
     position: absolute;
-    right: 20px;
+    top: 20px;
-    top: 30px;
+    right: 10px;
-    display: flex;
-    justify-content: flex-start;
-
-    > span {
-      width: auto;
-      font-size: 22px;
-      font-family: PingFang SC;
-      font-weight: 800;
-      color: #ffffff;
-      line-height: 34px;
   }
+  .second-select:last-child {
+    margin-left: 0;
   }
 }
 

src/views/modules/visual/communityGovern/processAnalyze.vue

@@ -3,6 +3,9 @@
     <div class="title">
       <img src="@/assets/img/shuju/title-tip.png" />
       <span>项目处理分析</span>
+
+      <div class="second-title">
+        <div class="second-select cascader">
           <el-cascader class="customer_cascader"
                        ref="myCascader"
                        v-model="agencyIdArray"
@@ -11,19 +14,16 @@
                        :props="optionProps"
                        @change="handleChangeAgency"
                        clearable></el-cascader>
-
+        </div>
-      <div class="customer_select">
+        <div class="second-select">
-
+          <el-date-picker v-model="dateId"
-        <el-select v-model="status"
+                          type="date"
-                   :popper-append-to-body="false"
+                          :clearable="false"
-                   placeholder="请选择">
+                          prefix-icon="el-icon-caret-bottom"
-          <el-option v-for="(item,index) in stateArray"
+                          placeholder="选择日期"
-                     :key="item.value"
+                          value-format="yyyyMMdd">
-                     :label="item.label"
+          </el-date-picker>
-                     :value="item.value"
+        </div>
-                     @click.native="handleChangeState(index)">
-          </el-option>
-        </el-select>
       </div>
 
     </div>
@@ -47,7 +47,7 @@
           </div>
         </div>
         <div class="l_bottom">
-          <span>近12月新增项目数折线图</span>
+          <div class="bottom_label">党建单位分类统计</div>
           <screen-echarts-frame class="echart-line"
                                 @myChartMethod="lineInitOk"
                                 ref="lineChart"></screen-echarts-frame>
@@ -125,7 +125,7 @@ export default {
         },
       ],
 
-      status: 'all',
+      dateId: '',
       agencyId: '',
 
       casOptions: [],
@@ -150,11 +150,16 @@ export default {
 
   async mounted () {
     this.userId = this.uid;
+    this.initData()
     this.getApiData();
   },
 
   methods: {
+    initData () {
+      var time = (new Date).getTime() - 24 * 60 * 60 * 1000;
+      this.dateId = new Date(time); // 获取的是前一天日期
 
+    },
     async getApiData () {
       await this.getAgencylist()//获取组织级别
       await this.getProjectTotal()
@@ -190,7 +195,7 @@ export default {
       const url = "http://yapi.elinkservice.cn/mock/245/data/aggregator/project/projecttotal";
       let params = {
         agencyId: '',
-        dateId: '',
+        dateId: this.dateId,
       };
 
       const { data, code, msg } = await requestPost(url, params);
@@ -265,7 +270,6 @@ export default {
           this.lineData = [0]
         }
 
-        debugger
         this.$refs.lineChart.setOption(this.lineOption)
       } else {
         this.$message.error(msg);

src/views/modules/visual/communityGovern/resibuzz.vue

@@ -3,6 +3,9 @@
     <div class="title">
       <img src="@/assets/img/shuju/title-tip.png" />
       <span>居民热议</span>
+
+      <div class="second-select cascader">
+
         <el-cascader class="customer_cascader"
                      ref="myCascader"
                      v-model="agencyIdArray"
@@ -11,9 +14,8 @@
                      :props="optionProps"
                      @change="handleChangeAgency"
                      clearable></el-cascader>
-
+      </div>
-      <div class="customer_select">
+      <div class="second-select status-select">
-
         <el-select v-model="status"
                    :popper-append-to-body="false"
                    placeholder="请选择">
@@ -25,8 +27,8 @@
           </el-option>
         </el-select>
       </div>
-
     </div>
+
     <div class="g-cpt-resi">
       <div class="g-l">
         <screen-echarts-frame class="echart-wr"
@@ -440,82 +442,5 @@ export default {
   scoped
 ></style>
 
-<style lang=scss >
+<style lang=scss scoped>
-.customer_select {
+</style>
-  /* 未选中任何选项的时候 placeholder的样式 需要先选中父元素 增加权重 */
-  /deep/ input::-webkit-input-placeholder {
-    color: #fff;
-  }
-  /deep/ input::-moz-input-placeholder {
-    color: #fff;
-  }
-  /deep/ input::-ms-input-placeholder {
-    color: #fff;
-  }
-
-  /* 修改的是el-input的样式 */
-  /* 一种方法是设置最里层el-input__inner的背景色 外层的两级父元素设置为透明色 */
-  /* 另一种方法是从el-select到el-input__inenr的背景色都设置为需要的颜色 */
-  /deep/ .el-select,
-  /deep/ .el-input,
-  /deep/ .el-input__inner {
-    background-color: #08164d00;
-    color: #fff;
-    border: 0px;
-    border-radius: 0px;
-    text-align: left;
-    font-size: 22px;
-    font-family: PingFang SC;
-    font-weight: 800;
-    color: #ffffff;
-    display: flex;
-  }
-
-  /* el-input聚焦的时候 外层的border会有一个样式 */
-  /deep/ .el-select .el-input.is-focus .el-input__inner {
-    border: 0px;
-  }
-
-  /* 修改的是el-input上下的小图标的颜色 */
-  /deep/ .el-select .el-input .el-select__caret::before {
-    color: #fff;
-    content: "";
-    background: url("../../../../assets/img/xiala.png") center center no-repeat;
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
-
-  /* 修改总体选项的样式 最外层 */
-  /deep/ .el-select-dropdown {
-    background-color: #08164d;
-    margin: 0px;
-    border: 0px;
-    border-radius: 0px;
-  }
-
-  /* 修改选项整体的样式 */
-  /deep/ .el-select-dropdown__list {
-    padding: 6px 0 20px 0;
-  }
-  /* 修改单个的选项的样式 */
-  /deep/ .el-select-dropdown__item {
-    background-color: transparent;
-    color: #fff;
-  }
-
-  /* item选项的hover样式 */
-  /deep/ .el-select-dropdown__item.hover,
-  /deep/ .el-select-dropdown__item:hover {
-    color: #409eff;
-  }
-
-  /* 修改的是下拉框选项内容上方的尖角 */
-  /deep/ .el-popper .popper__arrow,
-  .el-popper .popper__arrow::after {
-    display: none;
-  }
-}