roose 5 years ago
parent
commit
a62a29be3d
2 changed files with 237 additions and 17 deletions
  1. 12 17
      src/pages/PatrolmanStatistics.vue
  2. 225 0
      src/pages/oldStatistics.vue

+ 12 - 17
src/pages/PatrolmanStatistics.vue

@@ -5,7 +5,7 @@
         <div class="return-btn" @click="goHome">返回首页</div>
         <div class="select-div">
             <span class="address-title">省:</span>
-            <el-select class="input" v-model="dept1" :popper-append-to-body="false" placeholder="请选择">
+            <el-select class="input" v-model="dept1" clearable :popper-append-to-body="false" placeholder="请选择">
                 <el-option
                         v-for="item in provinces"
                         :key="item.value"
@@ -15,7 +15,7 @@
                 </el-option>
             </el-select>
             <span class="address-title">地市:</span>
-            <el-select class="input" v-model="dept2" :popper-append-to-body="false" placeholder="请选择">
+            <el-select class="input" v-model="dept2" clearable :popper-append-to-body="false" placeholder="请选择">
                 <el-option
                         v-for="item in citys"
                         :key="item.value"
@@ -25,7 +25,7 @@
                 </el-option>
             </el-select>
             <span class="address-title">县(市区):</span>
-            <el-select class="input1" v-model="dept3" :popper-append-to-body="false" placeholder="请选择">
+            <el-select class="input1" v-model="dept3" clearable :popper-append-to-body="false" placeholder="请选择">
                 <el-option
                         v-for="item in areas"
                         :key="item.value"
@@ -38,7 +38,7 @@
             <span v-else class="bj-shouqi" @click="guanbi"></span>
             <span class="bj-qeuren" @click="queren"></span>
             <span v-if="isZhankai" class="address-title">乡镇(街道):</span>
-            <el-select v-if="isZhankai" class="input1" :popper-append-to-body="false" v-model="dept4" placeholder="请选择">
+            <el-select v-if="isZhankai" class="input1" clearable :popper-append-to-body="false" v-model="dept4" placeholder="请选择">
                 <el-option
                         v-for="item in countys"
                         :key="item.value"
@@ -48,7 +48,7 @@
                 </el-option>
             </el-select>
             <span v-if="isZhankai" class="address-title">村(居)民委员会:</span>
-            <el-select v-if="isZhankai" class="input1" :popper-append-to-body="false" v-model="dept5" placeholder="请选择">
+            <el-select v-if="isZhankai" class="input1" clearable :popper-append-to-body="false" v-model="dept5" placeholder="请选择">
                 <el-option
                         v-for="item in villages"
                         :key="item.value"
@@ -163,7 +163,6 @@
         components: {com1, com2, com3, com4, com5, com6, com7, com8, com9},
         data() {
             return {
-                // 省份
                 provinces: [
                     {
                         value: '1',
@@ -172,7 +171,7 @@
                         value: '2',
                         label: '辽宁省'
                     }
-                ],
+                ],   // 省份
                 citys: [
                     {
                         value: '3',
@@ -186,7 +185,7 @@
                     }, {
                         value: '6',
                         label: '白城市'
-                    }],
+                    }], // 市
                 areas: [
                     {
                         value: '7',
@@ -196,7 +195,7 @@
                         value: '8',
                         label: '朝阳区'
                     },
-                ],
+                ],   // 县
                 countys: [
                     {
                         value: '9',
@@ -206,8 +205,7 @@
                         value: '10',
                         label: '西广街道办事处'
                     },
-                ],
-
+                ],  // 乡
                 villages: [
                     {
                         value: '11',
@@ -217,16 +215,13 @@
                         value: '12',
                         label: '西三条社区'
                     },
-                ],
+                ],  // 村
                 dept1: '',
                 dept2: '',
                 dept3: '',
                 dept4: '',
                 dept5: '',
-                // 左一
-                dataArr1: [],
-                // 左二
-                dataArr2: [],
+                isZhankai: false,  //是够展开和收起
                 listData: [
                     {
                         userName: '张三',
@@ -280,7 +275,7 @@
                     },
 
                 ],
-                isZhankai: false,
+
             };
         },
         mounted() {

+ 225 - 0
src/pages/oldStatistics.vue

@@ -3,6 +3,61 @@
     <timeing></timeing>
     <p class="backtitle">老年人信息统计</p>
     <div class="return-btn" @click="goHome">返回首页</div>
+    <div class="select-div">
+      <span class="address-title">省:</span>
+      <el-select class="input" v-model="dept1" clearable :popper-append-to-body="false" placeholder="请选择">
+        <el-option
+                v-for="item in provinces"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+                :disabled="item.disabled">
+        </el-option>
+      </el-select>
+      <span class="address-title">地市:</span>
+      <el-select class="input" v-model="dept2" clearable :popper-append-to-body="false" placeholder="请选择">
+        <el-option
+                v-for="item in citys"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+                :disabled="item.disabled">
+        </el-option>
+      </el-select>
+      <span class="address-title">县(市区):</span>
+      <el-select class="input1" v-model="dept3" clearable :popper-append-to-body="false" placeholder="请选择">
+        <el-option
+                v-for="item in areas"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+                :disabled="item.disabled">
+        </el-option>
+      </el-select>
+      <span v-if="!isZhankai" class="bj-zhankai" @click="zhankai"></span>
+      <span v-else class="bj-shouqi" @click="guanbi"></span>
+      <span class="bj-qeuren" @click="queren"></span>
+      <span v-if="isZhankai" class="address-title">乡镇(街道):</span>
+      <el-select v-if="isZhankai" class="input1" clearable :popper-append-to-body="false" v-model="dept4" placeholder="请选择">
+        <el-option
+                v-for="item in countys"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+                :disabled="item.disabled">
+        </el-option>
+      </el-select>
+      <span v-if="isZhankai" class="address-title">村(居)民委员会:</span>
+      <el-select v-if="isZhankai" class="input1" clearable :popper-append-to-body="false" v-model="dept5" placeholder="请选择">
+        <el-option
+                v-for="item in villages"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+                :disabled="item.disabled">
+        </el-option>
+      </el-select>
+    </div>
     <div class="header">
     <!--  图1     -->
       <div class="tu-one">
@@ -65,6 +120,65 @@ export default {
   components: {com1,com2},
   data() {
     return {
+      provinces: [
+        {
+          value: '1',
+          label: '吉林省',
+        }, {
+          value: '2',
+          label: '辽宁省'
+        }
+      ],   // 省份
+      citys: [
+        {
+          value: '3',
+          label: '长春市',
+        }, {
+          value: '4',
+          label: '四平市'
+        }, {
+          value: '5',
+          label: '辽源市'
+        }, {
+          value: '6',
+          label: '白城市'
+        }], // 市
+      areas: [
+        {
+          value: '7',
+          label: '宽城区'
+        },
+        {
+          value: '8',
+          label: '朝阳区'
+        },
+      ],   // 县
+      countys: [
+        {
+          value: '9',
+          label: '南广街道办事处'
+        },
+        {
+          value: '10',
+          label: '西广街道办事处'
+        },
+      ],  // 乡
+      villages: [
+        {
+          value: '11',
+          label: '东三条社区'
+        },
+        {
+          value: '12',
+          label: '西三条社区'
+        },
+      ],  // 村
+      dept1: '',
+      dept2: '',
+      dept3: '',
+      dept4: '',
+      dept5: '',
+      isZhankai: false,  //是够展开和收起
       // 左一
       dataArr1: [],
       // 左二
@@ -82,6 +196,26 @@ export default {
       this.$router.push({
         path: '/'});
     },
+
+    zhankai() {
+      console.log("111")
+      this.isZhankai = !this.isZhankai
+
+    },
+    guanbi() {
+      console.log("222")
+      this.isZhankai = !this.isZhankai
+    },
+
+    queren() {
+      console.log(this.dept1)
+      console.log(this.dept2)
+      console.log(this.dept3)
+      console.log(this.dept4)
+      console.log(this.dept5)
+      console.log("确定了")
+    },
+
     async platformResult() {
       const response = await platformResult();
       // console.log(response);
@@ -135,6 +269,15 @@ export default {
   top: 1%;
 
 }
+.select-div {
+  width: 34%;
+  /*height: 4%;*/
+  position: absolute;
+  top: 4.5%;
+  left: 2%;
+  z-index: 999;
+  background: #01135b;
+}
 
 .return-btn{
   /*background-image: -webkit-linear-gradient(bottom, #91e5ff, #fff);*/
@@ -333,5 +476,87 @@ export default {
 }
 
 
+.address-title {
+  color: #00d8fe;
+}
+
+.input {
+  width: 15.5%;
+  margin-right: 1%;
+}
+
+.input1 {
+  width: 20%;
+  margin-right: 1%;
+}
+
+.bj-zhankai {
+  display: inline-block;
+  background: url("../assets/PatrolmanStatistics/zhankai.png") no-repeat;
+  background-size: 90% 90%;
+  width: 60px;
+  height: 37px;
+  margin-right: 1%;
+  vertical-align: bottom;
+}
+
+.bj-zhankai:hover {
+  cursor: pointer;
+}
+
+.bj-shouqi {
+  display: inline-block;
+  background: url("../assets/PatrolmanStatistics/shouqi.png") no-repeat;
+  background-size: 90% 90%;
+  width: 60px;
+  height: 37px;
+  margin-right: 1%;
+  vertical-align: bottom;
+}
+
+.bj-shouqi:hover {
+  cursor: pointer;
+}
+
+.bj-qeuren {
+  display: inline-block;
+  background: url("../assets/PatrolmanStatistics/queren.png") no-repeat;
+  background-size: 90% 90%;
+  width: 69px;
+  height: 37px;
+  vertical-align: bottom;
+}
+
+.bj-qeuren:hover {
+  cursor: pointer;
+}
+
+/deep/ .el-select,
+/deep/ .el-input,
+/deep/ .el-input__inner {
+  color: #00d7ff;
+  text-align: center;
+  background: rgba(254, 196, 0, 0);
+  border-radius: 10px;
+  border: 1px solid;
+  border-image: linear-gradient(-90deg, rgba(0, 187, 234, 0), rgba(3, 77, 129, 1), rgba(0, 161, 254, 0)) 1 1;
+  box-shadow: 0px 0px 46px 0px rgba(8, 91, 168, 0.4);
+
+}
+
+/deep/ .el-select .el-input .el-select__caret {
+  color: #00d7ff;
+}
+
+/deep/ .el-select-dropdown__item.hover,
+/deep/ .el-select-dropdown__item:hover {
+  color: #409eff;
+}
+
+/*/deep/ .el-select-dropdown{*/
+/*   background: #01135B;*/
+
+/*}*/
+
 
 </style>