|
|
@@ -0,0 +1,218 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>Document</title>
|
|
|
+ <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
|
|
|
+ <script src="https://unpkg.com/element-ui@2.15.14/lib/index.js"></script>
|
|
|
+ <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
|
|
|
+ <style>
|
|
|
+ @import url("https://unpkg.com/element-ui@2.15.14/lib/theme-chalk/index.css");
|
|
|
+ *{
|
|
|
+ margin:0;
|
|
|
+ padding:0;
|
|
|
+ }
|
|
|
+ .el-calendar__header{
|
|
|
+ border:none;
|
|
|
+ }
|
|
|
+ .el-calendar__body{
|
|
|
+ margin-top:-24px;
|
|
|
+ }
|
|
|
+ td{
|
|
|
+ text-align:center;
|
|
|
+ }
|
|
|
+ .el-calendar-table .el-calendar-day{
|
|
|
+ height:auto;
|
|
|
+ }
|
|
|
+ .el-calendar-table td{
|
|
|
+ border:none;
|
|
|
+ }
|
|
|
+ .el-calendar-table tr td:first-child{
|
|
|
+ border:none;
|
|
|
+ }
|
|
|
+ .el-calendar-table .el-calendar-day{
|
|
|
+ padding:6px;
|
|
|
+ }
|
|
|
+ .el-calendar-table tr:first-child td{
|
|
|
+ border:none;
|
|
|
+ }
|
|
|
+ .el-calendar-day span{
|
|
|
+ font-size:14px;
|
|
|
+ }
|
|
|
+ .form{
|
|
|
+ display:flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding:0 20px;
|
|
|
+ margin-top:-20px;
|
|
|
+ margin-bottom:-20px;
|
|
|
+ }
|
|
|
+ .form input{
|
|
|
+ background:#F6F6F6;
|
|
|
+ border:none;
|
|
|
+ border-radius: 10px;
|
|
|
+ width:120px;
|
|
|
+ padding:5px 10px;
|
|
|
+ }
|
|
|
+ .form button{
|
|
|
+ border:none;
|
|
|
+ color:white;
|
|
|
+ background:#3B70FE;
|
|
|
+ border-radius: 10px;
|
|
|
+ width:60px;
|
|
|
+ height:40px;
|
|
|
+ }
|
|
|
+ .list{
|
|
|
+ padding:20px;
|
|
|
+ }
|
|
|
+ .list .item{
|
|
|
+ display:flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom:20px;
|
|
|
+ }
|
|
|
+ .list .item .left{
|
|
|
+ display:flex;
|
|
|
+ align-items: center;
|
|
|
+ position:relative;
|
|
|
+ }
|
|
|
+ .list .item .left .shu{
|
|
|
+ border-left:1px solid #DADADA;
|
|
|
+ width:1px;
|
|
|
+ height:30px;
|
|
|
+ position:absolute;
|
|
|
+ left:5px;
|
|
|
+ top:16px;
|
|
|
+ }
|
|
|
+ .list .item span{
|
|
|
+ color:#DADADA;
|
|
|
+ }
|
|
|
+ .list .item .left .yuan{
|
|
|
+ width:10px;
|
|
|
+ height:10px;
|
|
|
+ border-radius: 50%;
|
|
|
+ border:1px solid #DBDBDB;
|
|
|
+ margin-right:10px;
|
|
|
+ }
|
|
|
+ .list .item .left .through{
|
|
|
+ background:#3F6EFE;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+
|
|
|
+<body>
|
|
|
+ <div id="app">
|
|
|
+ <el-calendar v-model="val">
|
|
|
+ </el-calendar>
|
|
|
+ <div class="form">
|
|
|
+ <!-- <input type="text" v-model="section" placeholder="单位名称"> -->
|
|
|
+ <!-- <input type="text" v-model="name" placeholder="姓名"> -->
|
|
|
+ <el-form :inline="true" class="demo-form-inline">
|
|
|
+ <el-form-item>
|
|
|
+ <el-select v-model="section" placeholder="单位名称" @change="handleSectionChange">
|
|
|
+ <el-option v-for="(item,index) in select_list" :key="index" :label="item.name" :value="item.name"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-select v-model="name" placeholder="姓名">
|
|
|
+ <el-option v-for="(item,index) in name_select" :key="index" :label="item.person_name" :value="item.person_id"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <button @click="search">搜索</button>
|
|
|
+ </div>
|
|
|
+ <div class="list">
|
|
|
+ <div class="item" v-for="(item,index) in record_list" :key="index" @click="page_dump(item.url)">
|
|
|
+ <div class="left">
|
|
|
+ <div class="yuan" :class="{ 'through': item.date }"></div>
|
|
|
+ <div class="shu"></div>
|
|
|
+ <p>{{item.area}}</p>
|
|
|
+ </div>
|
|
|
+ <span>{{item.date}}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <script>
|
|
|
+ var Main = {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ val: new Date(),
|
|
|
+ section:'',
|
|
|
+ name:'',
|
|
|
+ ind:0,
|
|
|
+ select_list:[],
|
|
|
+ name_select:[],
|
|
|
+ record_list:[]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created(){
|
|
|
+ this.get_select()
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ val(newValue, oldValue) {
|
|
|
+ this.get_select()
|
|
|
+ // 在这里可以处理选中日期改变的逻辑
|
|
|
+ // 例如：
|
|
|
+ // this.fetchEvents(newValue); // 拉取新选中日期的事件
|
|
|
+ },
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ search(){
|
|
|
+ this.get_select()
|
|
|
+ const date = new Date(this.val);
|
|
|
+ const year = date.getFullYear();
|
|
|
+ const month = ('0' + (date.getMonth() + 1)).slice(-2); // 月份从0开始，需要加1并补零
|
|
|
+ const day = ('0' + date.getDate()).slice(-2); // 获取日并补零
|
|
|
+ const formattedDate = `${year}-${month}-${day}`;
|
|
|
+ const loading = this.$loading({
|
|
|
+ lock: true,
|
|
|
+ text: '数据加载中',
|
|
|
+ spinner: 'el-icon-loading',
|
|
|
+ background: 'rgba(0, 0, 0, 0.7)'
|
|
|
+ });
|
|
|
+ axios.post('http://video.nxjiewei.com:8011/api/fanwei/get_person_travel',{'person_id':this.name,'date':formattedDate,'depart':this.section})
|
|
|
+ .then( (response)=> {
|
|
|
+ this.record_list = response.data.content.data
|
|
|
+ loading.close()
|
|
|
+ })
|
|
|
+ .catch(function (error) {
|
|
|
+ console.log(error);
|
|
|
+ loading.close()
|
|
|
+ });
|
|
|
+ },
|
|
|
+ get_select() {
|
|
|
+ const date = new Date(this.val);
|
|
|
+ const year = date.getFullYear();
|
|
|
+ const month = ('0' + (date.getMonth() + 1)).slice(-2); // 月份从0开始，需要加1并补零
|
|
|
+ const day = ('0' + date.getDate()).slice(-2); // 获取日并补零
|
|
|
+ const formattedDate = `${year}-${month}-${day}`;
|
|
|
+
|
|
|
+ axios.post('http://video.nxjiewei.com:8011/api/fanwei/get_query_conition',{'date':formattedDate})
|
|
|
+ .then( (response)=> {
|
|
|
+ this.select_list = response.data.content.data
|
|
|
+ })
|
|
|
+ .catch(function (error) {
|
|
|
+ console.log(error);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handleSectionChange() {
|
|
|
+ this.name = ''
|
|
|
+ this.ind = this.select_list.findIndex(item => item.name === this.section)
|
|
|
+ this.name_select = this.select_list[this.ind].person_list
|
|
|
+ },
|
|
|
+ page_dump(url){
|
|
|
+ if(url != ''){
|
|
|
+ window.location.href = url
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ var Ctor = Vue.extend(Main)
|
|
|
+ new Ctor().$mount('#app')
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+
|
|
|
+</html>
|
