人员类别分析

src/assets/scss/modules/visual/search_1.scss

@@ -81,6 +81,30 @@
       }
     }
   }
+  .range-data2 {
+    ::v-deep .el-date-editor {
+      width: 360px;
+      position: relative;
+   
+      .el-range-input {
+        color: #fff;
+        background: #06186d;
+        margin-left: 10px;
+      }
+      .el-range-separator {
+        color: #fff;
+      }
+      .el-range__icon {
+        position: absolute;
+        right: 5px;
+        // float: right;
+      }
+      .el-input__prefix {
+        left: unset;
+        right: 5px;
+      }
+    }
+  }
 
   .one-date{
     ::v-deep .el-date-editor {

src/views/modules/visual/basicinfo/personCategory/index.vue

@@ -22,29 +22,31 @@
           <img src="@/assets/img/shuju/title-tip.png" />
           <span>人员类别分析</span>
 
-          <div class="second-select cascader">
+          <div class="search">
-
+            <div class="second-select cascader">
-            <el-cascader class="customer_cascader"
+
-                         ref="myCascader"
+              <el-cascader class="customer_cascader"
-                         v-model="agencyIdArray"
+                           ref="myCascader"
-                         :key="iscascaderShow"
+                           v-model="agencyIdArray"
-                         :options="casOptions"
+                           :key="iscascaderShow"
-                         :props="optionProps"
+                           :options="casOptions"
-                         :show-all-levels="false"
+                           :props="optionProps"
-                         @change="handleChangeAgency"></el-cascader>
+                           :show-all-levels="false"
-          </div>
+                           @change="handleChangeAgency"></el-cascader>
-          <div class="second-select ">
+            </div>
-
+            <div class="second-select range-data2">
-            <el-date-picker v-model="dateIdShow"
+
-                            type="date"
+              <el-date-picker v-model="dateIdShow"
-                            :clearable="false"
+                              type="date"
-                            @change="handleChangeDate"
+                              :clearable="false"
-                            :picker-options="pickerOptions"
+                              @change="handleChangeDate"
-                            prefix-icon="el-icon-caret-bottom"
+                              :picker-options="pickerOptions"
-                            placeholder="选择日期"
+                              prefix-icon="el-icon-caret-bottom"
-                            value-format="yyyy-MM-dd">
+                              placeholder="选择日期"
-            </el-date-picker>
+                              value-format="yyyy-MM-dd">
+              </el-date-picker>
 
+            </div>
           </div>
         </div>
         <el-scrollbar style="width: 100%">
@@ -255,7 +257,7 @@ export default {
 
     async handleChangeAgency (value) {
       let arr = this.$refs["myCascader"].getCheckedNodes();
-      if(!Array.isArray(arr) || arr.length==0) return;
+      if (!Array.isArray(arr) || arr.length == 0) return;
       let selAgency = arr[0].data
       // this.agencyName = this.$refs["myCascader"].getCheckedNodes()[0].label
       this.agencyName = selAgency.name
@@ -308,3 +310,10 @@ export default {
   scoped
 ></style>
 
+<style
+  lang="scss"
+  src="@/assets/scss/modules/visual/search_1.scss"
+  scoped
+></style>
+
+