|
|
@@ -0,0 +1,477 @@
|
|
|
+<template>
|
|
|
+ <div class="home">
|
|
|
+ <timeing></timeing>
|
|
|
+ <p class="backtitle">探访数据排行榜</p>
|
|
|
+
|
|
|
+ <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="input" 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 class="address-title">乡镇(街道)：</span>
|
|
|
+ <el-select 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 class="address-title">村(居)民委员会：</span>
|
|
|
+ <el-select 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>
|
|
|
+ <span class="address-title">选择时间：</span>
|
|
|
+ <span class="bj-qeuren" @click="queren"></span>
|
|
|
+ <span class="return-btn" @click="goHome"></span>
|
|
|
+ </div>
|
|
|
+ <div class="title-leftdiv">地区探访数据排行</div>
|
|
|
+ <div class="title-rightdiv">个人探访数据排行</div>
|
|
|
+ <div class="left-box scroll" >
|
|
|
+ <el-row :span="24" v-for="(item, index) in listData" :key="index">
|
|
|
+ <el-col :span="3" class="name">
|
|
|
+ <el-image v-if="index == 0 ||index == 1 || index== 2 " class="img"
|
|
|
+ :src="scrollTextisColor(index)"></el-image>
|
|
|
+ <div v-else class="top10-number">{{index+1}}</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="4" class="name">{{item.name}}</el-col>
|
|
|
+ <el-col :span="4" class="name">{{item.address}}</el-col>
|
|
|
+ <el-col :span="8" class="name">
|
|
|
+ <el-progress :stroke-width="15" :show-text="isText" :percentage="formatNum(item.num)"></el-progress>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="3" class="name">{{item.num}}</el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ <div class="right-box scroll">
|
|
|
+ <el-row :span="24" v-for="(item, index) in listData1" :key="index">
|
|
|
+ <el-col :span="3" class="name">
|
|
|
+ <el-image v-if="index == 0 ||index == 1 || index== 2 " class="img"
|
|
|
+ :src="scrollTextisColor(index)"></el-image>
|
|
|
+ <div v-else class="top10-number">{{index+1}}</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="4" class="name">{{item.name}}</el-col>
|
|
|
+ <el-col :span="4" class="name">{{item.address}}</el-col>
|
|
|
+ <el-col :span="8" class="name">
|
|
|
+ <el-progress :stroke-width="15" :show-text="isText" :percentage="formatNum(item.num)"></el-progress>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="3" class="name">{{item.num}}</el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+ // import jlMap from "../components/index/jlMap.vue";
|
|
|
+ // import com3 from "../components/index/3.vue";
|
|
|
+ // import com6 from "../components/oldStatistics/6.vue";
|
|
|
+ // import vueSeamlessScroll from "vue-seamless-scroll";
|
|
|
+ // import moment from "moment";
|
|
|
+
|
|
|
+ import {} from "../api";
|
|
|
+
|
|
|
+ export default {
|
|
|
+ name: "Home",
|
|
|
+ components: {},
|
|
|
+ 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: [],
|
|
|
+ // 左二
|
|
|
+ dataArr2: [],
|
|
|
+ listData: [
|
|
|
+ {name: '张三', address: '桃园办事处', num: 56236},
|
|
|
+ {name: '李四', address: '背景办事处', num: 50000},
|
|
|
+ {name: '周五', address: '背景办事处', num: 48000},
|
|
|
+ {name: '周五', address: '背景办事处', num: 48000},
|
|
|
+ {name: '张三', address: '桃园办事处', num: 56236},
|
|
|
+ {name: '李四', address: '背景办事处', num: 50000},
|
|
|
+ {name: '周五', address: '背景办事处', num: 48000},
|
|
|
+ {name: '周五', address: '背景办事处', num: 48000},
|
|
|
+ {name: '张三', address: '桃园办事处', num: 56236},
|
|
|
+ {name: '李四', address: '背景办事处', num: 50000},
|
|
|
+ {name: '周五', address: '背景办事处', num: 48000},
|
|
|
+ {name: '周五', address: '背景办事处', num: 48000},
|
|
|
+ {name: '张三', address: '桃园办事处', num: 56236},
|
|
|
+ {name: '李四', address: '背景办事处', num: 50000},
|
|
|
+ {name: '周五', address: '背景办事处', num: 48000},
|
|
|
+ {name: '周五', address: '背景办事处', num: 48000},
|
|
|
+ ],
|
|
|
+ listData1: [
|
|
|
+ {name: '张三', address: '桃园办事处', num: 56236},
|
|
|
+ {name: '李四', address: '背景办事处', num: 50000},
|
|
|
+ {name: '周五', address: '背景办事处', num: 48000},
|
|
|
+ {name: '周五', address: '背景办事处', num: 48000},
|
|
|
+ {name: '张三', address: '桃园办事处', num: 56236},
|
|
|
+ {name: '李四', address: '背景办事处', num: 50000},
|
|
|
+ {name: '周五', address: '背景办事处', num: 48000},
|
|
|
+ {name: '周五', address: '背景办事处', num: 48000},
|
|
|
+ {name: '张三', address: '桃园办事处', num: 56236},
|
|
|
+ {name: '李四', address: '背景办事处', num: 50000},
|
|
|
+ {name: '周五', address: '背景办事处', num: 48000},
|
|
|
+ {name: '周五', address: '背景办事处', num: 48000},
|
|
|
+ {name: '张三', address: '桃园办事处', num: 56236},
|
|
|
+ {name: '李四', address: '背景办事处', num: 50000},
|
|
|
+ {name: '周五', address: '背景办事处', num: 48000},
|
|
|
+ {name: '周五', address: '背景办事处', num: 48000},
|
|
|
+ ],
|
|
|
+ isText:false
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ //糊掉首页
|
|
|
+ goHome() {
|
|
|
+ this.$router.push({
|
|
|
+ path: '/'
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 省市选择框 展开
|
|
|
+ zhankai() {
|
|
|
+ this.isZhankai = !this.isZhankai
|
|
|
+
|
|
|
+ },
|
|
|
+ // 省市选择框 收起
|
|
|
+ guanbi() {
|
|
|
+ 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("确定了")
|
|
|
+ },
|
|
|
+ // 滚动颜色
|
|
|
+ scrollTextisColor: function (i) {
|
|
|
+ if (i == 0) {
|
|
|
+ return require("../assets/PatrolmanStatistics/top1.png")
|
|
|
+ } else if (i == 1) {
|
|
|
+ return require("../assets/PatrolmanStatistics/top2.png")
|
|
|
+ } else if (i == 2) {
|
|
|
+ return require("../assets/PatrolmanStatistics/top3.png")
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ formatNum(num) {
|
|
|
+ console.log(num)
|
|
|
+ let a = num / this.listData[0].num * 100
|
|
|
+ console.log(a)
|
|
|
+ return a
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+
|
|
|
+ }
|
|
|
+ };
|
|
|
+</script>
|
|
|
+<style scoped lang="less" type="text/css">
|
|
|
+ .backtitle {
|
|
|
+ background-image: -webkit-linear-gradient(bottom, #91e5ff, #fff);
|
|
|
+ -webkit-background-clip: text;
|
|
|
+ -webkit-text-fill-color: transparent;
|
|
|
+ font-size: 32px;
|
|
|
+ font-weight: 900;
|
|
|
+ position: absolute;
|
|
|
+ left: 44%;
|
|
|
+ top: 1%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .address-title {
|
|
|
+ color: #00d8fe;
|
|
|
+ }
|
|
|
+
|
|
|
+ .input {
|
|
|
+ width: 8%;
|
|
|
+ margin-right: 1.5%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .input1 {
|
|
|
+ width: 10%;
|
|
|
+ margin-right: 1.5%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .select-div {
|
|
|
+ width: 100%;
|
|
|
+ height: 4%;
|
|
|
+ position: absolute;
|
|
|
+ top: 10%;
|
|
|
+ left: 2%;
|
|
|
+ z-index: 999;
|
|
|
+ background: #01135b;
|
|
|
+ }
|
|
|
+
|
|
|
+ .title-leftdiv {
|
|
|
+ width: 47%;
|
|
|
+ height: 3.5%;
|
|
|
+ position: absolute;
|
|
|
+ top: 16%;
|
|
|
+ left: 2%;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 18px;
|
|
|
+ font-family: SourceHanSansCN;
|
|
|
+ font-weight: 400;
|
|
|
+ color: rgba(255, 255, 255, 1);
|
|
|
+ }
|
|
|
+
|
|
|
+ .title-rightdiv {
|
|
|
+ width: 47%;
|
|
|
+ height: 3.5%;
|
|
|
+ position: absolute;
|
|
|
+ top: 16%;
|
|
|
+ left: 51%;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 18px;
|
|
|
+ font-family: SourceHanSansCN;
|
|
|
+ font-weight: 400;
|
|
|
+ color: rgba(255, 255, 255, 1);
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .return-btn {
|
|
|
+ display: inline-block;
|
|
|
+ vertical-align: bottom;
|
|
|
+ background: url("../assets/Ranking/fanhui.png") no-repeat;
|
|
|
+ background-size: 95% 95%;
|
|
|
+ width: 70px;
|
|
|
+ line-height: 40px;
|
|
|
+ height: 39px;
|
|
|
+ text-align: center;
|
|
|
+ font-weight: 900;
|
|
|
+ color: #00afde;
|
|
|
+ font-size: 10px;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .home {
|
|
|
+ height: 100%;
|
|
|
+ position: fixed;
|
|
|
+ width: 100%;
|
|
|
+ background: url("../assets/Ranking/bj.png");
|
|
|
+ background-size: 100% 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .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/Ranking/queren.png") no-repeat;
|
|
|
+ background-size: 90% 90%;
|
|
|
+ width: 69px;
|
|
|
+ height: 37px;
|
|
|
+ vertical-align: bottom;
|
|
|
+ margin-right: 1%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bj-qeuren:hover {
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ .scroll::-webkit-scrollbar {
|
|
|
+ background-color: #374991;
|
|
|
+ height: 10px;
|
|
|
+ width: 15px;
|
|
|
+ -webkit-border-radius: 4px;
|
|
|
+ -moz-border-radius: 4px;
|
|
|
+ border-radius: 4px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .scroll::-webkit-scrollbar-track {
|
|
|
+ opacity: 0;
|
|
|
+ transition: opacity 0.12s ease-out;
|
|
|
+ -webkit-border-radius: 4px;
|
|
|
+ -moz-border-radius: 4px;
|
|
|
+ border-radius: 4px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .scroll::-webkit-scrollbar-thumb {
|
|
|
+ background-color: #15a1e1;
|
|
|
+ transition: background-color 0.3s;
|
|
|
+ -webkit-border-radius: 4px;
|
|
|
+ -moz-border-radius: 4px;
|
|
|
+ border-radius: 10px;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .el-select,
|
|
|
+ /deep/ .el-input,
|
|
|
+ /deep/ .el-input__inner {
|
|
|
+ color: #00d0f6;
|
|
|
+ text-align: center;
|
|
|
+ background: rgba(254, 196, 0, 0);
|
|
|
+ border-radius: 10px;
|
|
|
+ border: 0.5px solid #00d0f6;
|
|
|
+ /*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: #00d0f6;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .el-select-dropdown__item.hover,
|
|
|
+ /deep/ .el-select-dropdown__item:hover {
|
|
|
+ background: #123a80;
|
|
|
+ color: white;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .el-select-dropdown {
|
|
|
+ background: #010f5a;
|
|
|
+ border: 1px solid #00d7ff;
|
|
|
+ color: red;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .el-select-dropdown__item {
|
|
|
+ color: #00d7ff
|
|
|
+ }
|
|
|
+
|
|
|
+ .right-box {
|
|
|
+ width: 47%;
|
|
|
+ height: 74.8%;
|
|
|
+ position: absolute;
|
|
|
+ top: 22%;
|
|
|
+ left: 51%;
|
|
|
+ overflow-y: auto;
|
|
|
+ overflow-x: hidden;
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .left-box {
|
|
|
+ width: 47%;
|
|
|
+ height: 74.8%;
|
|
|
+ position: absolute;
|
|
|
+ top: 22%;
|
|
|
+ left: 2%;
|
|
|
+ overflow-y: auto;
|
|
|
+ overflow-x: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ .name {
|
|
|
+ color: white;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ /deep/.el-row{
|
|
|
+ margin-top: 25px;
|
|
|
+
|
|
|
+ }
|
|
|
+ .left-box/deep/ .el-progress-bar__inner {
|
|
|
+ background:linear-gradient(-90deg,rgba(75,226,236,1),rgba(0,113,252,1));
|
|
|
+ }
|
|
|
+ .right-box/deep/ .el-progress-bar__inner {
|
|
|
+ background:linear-gradient(-90deg,#fab111,#e98000);
|
|
|
+ }
|
|
|
+</style>
|
