|
|
@@ -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>
|
