ushio
/
video_system


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218
							<!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://anvideo.nxmy.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://anvideo.nxmy.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 = 'http://10.186.132.147'+url
					}
				}
			}
          }
        var Ctor = Vue.extend(Main)
        new Ctor().$mount('#app')
    </script>
</body>

</html>