|
@@ -0,0 +1,255 @@
|
|
|
+@extends('module.layouts.content')
|
|
|
+
|
|
|
+@push('meta')
|
|
|
+
|
|
|
+@endpush
|
|
|
+
|
|
|
+@push('css')
|
|
|
+ <style >
|
|
|
+ .operation{
|
|
|
+ width: 100%;
|
|
|
+ float: left;
|
|
|
+ text-align: center;
|
|
|
+ margin-top: 30px;
|
|
|
+ }
|
|
|
+ .result {
|
|
|
+ width: 60%;
|
|
|
+ float: left;
|
|
|
+ margin: 20px 0 0;
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ }
|
|
|
+ .tips{
|
|
|
+ float: right;
|
|
|
+ width: 35%;
|
|
|
+ margin: 20px 0 0;
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ }
|
|
|
+ h3{
|
|
|
+ width: 100%;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 40px;
|
|
|
+ }
|
|
|
+ .process{
|
|
|
+ margin-top: 20px;
|
|
|
+ width: 100%;
|
|
|
+ float: left;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 30px;
|
|
|
+ color: #30B08F;
|
|
|
+ }
|
|
|
+ .area-row{
|
|
|
+ line-height: 60px;
|
|
|
+ border-top: 1px solid #ccc;
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+ .area-row div{
|
|
|
+ flex: 1;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 30px;
|
|
|
+ }
|
|
|
+ .area-row .area-name{
|
|
|
+ font-size: 20px;
|
|
|
+ }
|
|
|
+ .area-row .area-value{
|
|
|
+ color: #30B08F;
|
|
|
+ transition: all 2s ease-in;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+@endpush
|
|
|
+
|
|
|
+@push('js')
|
|
|
+ <link href="{{ theme_asset('app/css/common.css') }}" rel="stylesheet">
|
|
|
+ <link href="{{theme_asset('app/css/recruit/recruit.css')}}" rel="stylesheet" type="text/css"/>
|
|
|
+ <link rel="stylesheet" href="{{ theme_asset('app/css/element.css') }}">
|
|
|
+
|
|
|
+@endpush
|
|
|
+
|
|
|
+@section('content')
|
|
|
+ <div id="app">
|
|
|
+ <div class="recruit_container clearfix">
|
|
|
+ <div class="recruit_show_content" style="margin-top: 10px;width: 100%">
|
|
|
+ <div class="title" style="text-align: center"><h2>晋江市公开招聘第十三批村务(社区)专职工作者择岗系统</h2></div>
|
|
|
+ <div class="clearfix">
|
|
|
+ <div class="operation">
|
|
|
+ <el-button type="primary" @click="getResult()" :disabled="disabled" v-text="start_button"></el-button>
|
|
|
+ <el-button type="primary" @click="test()">测试</el-button>
|
|
|
+ </div>
|
|
|
+ <div class="process clearfix" ref="process" v-if="init">
|
|
|
+ 择岗进度:<count-to ref='count' class='count' :start-val=startval :end-val=endval :duration=4000></count-to>/<span class="count" v-text="count"></span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="result">
|
|
|
+ <h3>择岗结果</h3>
|
|
|
+ <el-divider></el-divider>
|
|
|
+ <el-table :data="result" style="width: 100%">
|
|
|
+ <el-table-column
|
|
|
+ prop="realname"
|
|
|
+ label="姓名"
|
|
|
+ width="100"
|
|
|
+ align="center">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="ex_number"
|
|
|
+ label="准考证号"
|
|
|
+ width="150"
|
|
|
+ align="center">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="select_result"
|
|
|
+ label="择岗结果"
|
|
|
+ width="100"
|
|
|
+ align="center">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="result"
|
|
|
+ label="择岗意愿"
|
|
|
+ align="center">
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ <div class="tips" ref="tips">
|
|
|
+ <h3>各镇街剩余名额</h3>
|
|
|
+{{-- <el-table--}}
|
|
|
+{{-- :data="quota"--}}
|
|
|
+{{-- style="width: 100%">--}}
|
|
|
+{{-- <el-table-column--}}
|
|
|
+{{-- prop="name"--}}
|
|
|
+{{-- label="地区"--}}
|
|
|
+{{-- align="center">--}}
|
|
|
+{{-- </el-table-column>--}}
|
|
|
+{{-- <el-table-column--}}
|
|
|
+{{-- prop="value"--}}
|
|
|
+{{-- label="剩余名额"--}}
|
|
|
+{{-- width="180"--}}
|
|
|
+{{-- align="center">--}}
|
|
|
+{{-- </el-table-column>--}}
|
|
|
+{{-- </el-table>--}}
|
|
|
+ <div v-for="(item, index) in quota" class="area-row clearfix">
|
|
|
+ <div class="area-name">
|
|
|
+ @{{ item.name }}
|
|
|
+ </div>
|
|
|
+ <div class="area-value" :ref="'area_'+index">
|
|
|
+ <count-to class='count' :start-val=item.old_value :end-val=item.new_value :duration=4000></count-to>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+@endsection
|
|
|
+
|
|
|
+@section('script')
|
|
|
+ <script src="{{theme_asset('app/js/vue.min.js')}}"></script>
|
|
|
+ <script src="{{theme_asset('app/js/qs.min.js')}}"></script>
|
|
|
+ <script src="{{theme_asset('app/js/axios.js')}}"></script>
|
|
|
+ <script src="{{theme_asset('app/js/Sortable.min.js')}}"></script>
|
|
|
+ <script src="{{theme_asset('app/js/vuedraggable.umd.min.js')}}"></script>
|
|
|
+ <script src="{{theme_asset('app/js/element.js')}}"></script>
|
|
|
+ <script src="{{theme_asset('app/js/vue-count-to.min.js')}}"></script>
|
|
|
+ <script>
|
|
|
+ const app = new Vue({
|
|
|
+ el: '#app',
|
|
|
+ data: {
|
|
|
+ quota:[],
|
|
|
+ result: [],
|
|
|
+ post_data: {
|
|
|
+ limit: 1
|
|
|
+ },
|
|
|
+ disabled: false,
|
|
|
+ start_button: "开始分析择岗结果",
|
|
|
+ init:false,
|
|
|
+ startval: 0,
|
|
|
+ endval: 0,
|
|
|
+ count: 0
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getResult: function(){
|
|
|
+ this.disabled = true;
|
|
|
+ this.start_button = "择岗排序中";
|
|
|
+ setInterval(this.getSelectResult,2000);
|
|
|
+ },
|
|
|
+ getInitInfo: function(){
|
|
|
+ axios.post("{{route('recruit.select_init')}}").then(response => {
|
|
|
+ let result = response.data;
|
|
|
+ if(result.data.count > 0){
|
|
|
+ this.init = true;
|
|
|
+ this.count = result.data.count;
|
|
|
+ let quota = eval(result.data.quota);
|
|
|
+ for(let i = 0;i < quota.length;i++){
|
|
|
+ let item = new Object();
|
|
|
+ item.name = quota[i].name;
|
|
|
+ item.old_value = quota[i].value;
|
|
|
+ item.new_value = quota[i].value;
|
|
|
+ this.quota.push(item)
|
|
|
+ }
|
|
|
+ this.result = result.data.list;
|
|
|
+ //this.quota = eval(result.data.quota);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getSelectResult: function(){
|
|
|
+ var that = this;
|
|
|
+ axios.post("{{route('recruit.get_select_result')}}",Qs.stringify(this.post_data)).then(response => {
|
|
|
+ var result = response.data;
|
|
|
+ if(result.status){
|
|
|
+ //加入一条结果记录
|
|
|
+ this.result.push(result.data.list[0]);
|
|
|
+ //修改进度结果
|
|
|
+ this.endval++;
|
|
|
+ this.$refs.count.start();
|
|
|
+ this.startval = this.endval;
|
|
|
+ //名额减
|
|
|
+ let index = result.data.quota.index;
|
|
|
+ this.$refs['area_'+index][0].style.background = "#fff611";
|
|
|
+ var that = this;
|
|
|
+ setTimeout(function (){
|
|
|
+ that.$refs['area_'+index][0].style.background = "#fff"
|
|
|
+ }, 2000);
|
|
|
+ this.quota[index].old_value = result.data.quota.old_value;
|
|
|
+ this.quota[index].new_value = result.data.quota.new_value;
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handleScroll: function(){
|
|
|
+ let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
|
|
|
+ if(scrollTop > 300){
|
|
|
+ this.$refs.process.style.position = "fixed";
|
|
|
+ this.$refs.process.style.top = "0";
|
|
|
+ this.$refs.process.style.background = "#fff666";
|
|
|
+ this.$refs.process.style.zIndex = "9";
|
|
|
+
|
|
|
+ this.$refs.tips.style.position = "fixed";
|
|
|
+ this.$refs.tips.style.top = "60px";
|
|
|
+ this.$refs.tips.style.right = "35px";
|
|
|
+ }else{
|
|
|
+ this.$refs.process.style.position = "static";
|
|
|
+ this.$refs.process.style.background = "#fff";
|
|
|
+
|
|
|
+ this.$refs.tips.style.position = "static";
|
|
|
+ }
|
|
|
+ console.log(scrollTop, '滚动距离')
|
|
|
+ },
|
|
|
+ test: function(){
|
|
|
+ let i = Math.round(Math.random()*19);;
|
|
|
+ this.$refs['area_'+i][0].style.background = "#fff611"
|
|
|
+ var that = this;
|
|
|
+ setTimeout(function (){
|
|
|
+ that.$refs['area_'+i][0].style.background = "#fff"
|
|
|
+ }, 2000);
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created(){
|
|
|
+ this.getInitInfo();
|
|
|
+ window.addEventListener('scroll', this.handleScroll)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ </script>
|
|
|
+@endsection
|