|
|
@@ -0,0 +1,795 @@
|
|
|
+<template>
|
|
|
+ <div class="app-container patrolRecord">
|
|
|
+ <div class="patrolRecordPage" v-show="pageType === 1">
|
|
|
+ <div class="left-page-max-big-box">
|
|
|
+ <el-tree
|
|
|
+ style="margin-right:10px;"
|
|
|
+ :data="deptOptions"
|
|
|
+ :props="defaultProps"
|
|
|
+ icon-class=""
|
|
|
+ node-key="id"
|
|
|
+ :highlight-current="true"
|
|
|
+ default-expand-all
|
|
|
+ :expand-on-click-node="false"
|
|
|
+ :filter-node-method="filterNode"
|
|
|
+ ref="tree"
|
|
|
+ @node-click="handleNodeClick"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <p class="center-border-p"></p>
|
|
|
+ <div class="right-page-max-big-box">
|
|
|
+ <div class="top-button-max-box">
|
|
|
+ <div class="yearMonthButtonBox">
|
|
|
+ <p @click="yearMonthSwitchButton(1)" :class="yearMonthType===1?'left-button-one':'left-button-tow'">月度</p>
|
|
|
+ <p @click="yearMonthSwitchButton(2)" :class="yearMonthType===2?'right-button-one':'right-button-tow'">年度</p>
|
|
|
+ </div>
|
|
|
+ <div class="year-month-data-button-box">
|
|
|
+ <p class="year-month-subtract-button" @click="subtractDate"><</p>
|
|
|
+ <p class="year-month-text-p" v-show="yearMonthType===1">{{yearMonthData.year}}-{{yearMonthData.month}}</p>
|
|
|
+ <p class="year-month-text-p" v-show="yearMonthType===2">{{yearMonthData.year}}</p>
|
|
|
+ <p class="year-month-add-button" @click="addDate">></p>
|
|
|
+ </div>
|
|
|
+ <p class="return-year-month-button page-submit-common-style-button" v-show="yearMonthType===1" @click="returnPresent">回到本月</p>
|
|
|
+ </div>
|
|
|
+ <div class="month-max-big-box scrollbar-box" v-if="yearMonthType === 1">
|
|
|
+ <div class="month-week-box">
|
|
|
+ <p class="for-week-box" v-for="item of weekList" :key="item.key">{{ item.value }}</p>
|
|
|
+ </div>
|
|
|
+ <div class="month-big-box">
|
|
|
+ <div v-for="(year,index) in yearDate" v-if="year.year == yearMonthData.year && year.month == yearMonthData.month">
|
|
|
+ <div class="for-month-max-big-box" v-for="(item,index) in year.list" :key="item.key">
|
|
|
+ <p class="for-month-top-big-box" :class="item.disable?'for-month-top-big-box-color':''">{{item.date}}</p>
|
|
|
+ <div class="for-month-bottom-big-box" :class="item.noSignedInCount>0?'red-backgroud-color':''"
|
|
|
+ v-if="!item.disable&&(item.signInCount>0||item.noSignedInCount>0)" @click.stop="goPage('info',item)">
|
|
|
+ <div class="for-month-bottom-left-min-box">
|
|
|
+ <p>已签到人员：{{item.signInCount}}</p>
|
|
|
+ <p>未签到人员：{{item.noSignedInCount}}</p>
|
|
|
+ </div>
|
|
|
+ <div class="for-month-bottom-right-min-box el-icon-arrow-right"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="year-max-big-box scrollbar-box" v-if="yearMonthType === 2">
|
|
|
+ <div class="for-year-max-big-box" v-for="(year,index) in yearDate" :key="year.key" v-if="year.year == yearMonthData.year">
|
|
|
+ <p class="year-name-p">{{year.month==1?'一月':(year.month===2?'二月':(year.month===3?'三月':(year.month===4?'四月':(
|
|
|
+ year.month===5?'五月':(year.month===6?'六月':(year.month===7?'七月':(year.month===8?'八月':(year.month===9?'九月':(
|
|
|
+ year.month===10?'十月':(year.month===11?'十一月':(year.month===12?'十二月':'')))))))))))}}</p>
|
|
|
+ <div class="year-week-box">
|
|
|
+ <p class="for-week-box" v-for="item of weekList" :key="item.key">{{ item.value }}</p>
|
|
|
+ </div>
|
|
|
+ <div class="year-big-box">
|
|
|
+ <div class="for-year-big-box" v-for="(item,index) in year.list" :key="item.key">
|
|
|
+ <p class="for-year-top-big-box" :class="item.disable?'for-year-top-big-box-color':''">{{item.date}}</p>
|
|
|
+ <div class="for-year-bottom-big-box" :class="!item.disable&&item.noSignedInCount>0?'red-backgroud-color':''" v-if="(item.signInCount>0||item.noSignedInCount>0)&&!item.disable" @click.stop="goPage('info',item)">{{item.noSignedInCount>0?item.noSignedInCount:item.signInCount}}人</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <info-page v-if="pageType === 2" :propsData="propsData"></info-page>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import { getListYmd } from '@/apiDemo/laboratory/patrolRecord'
|
|
|
+ import { getTreeList} from '@/apiDemo/evacuation3_2/index'
|
|
|
+ import { treeselect } from "@/apiDemo/system/user_teacher";
|
|
|
+ import infoPage from "./infoPage.vue";
|
|
|
+ // V3
|
|
|
+ import { systemDeptOrganizeStructureByDept } from "@/api/commonality/permission";
|
|
|
+ export default {
|
|
|
+ name: 'index',
|
|
|
+ components: {
|
|
|
+ infoPage
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ //页面状态切换
|
|
|
+ pageType:1,
|
|
|
+ //树状结构
|
|
|
+ treeList:[],
|
|
|
+ deptOptions:[],
|
|
|
+ defaultProps: {
|
|
|
+ children: "children",
|
|
|
+ label: "label"
|
|
|
+ },
|
|
|
+ checkTreeId:null,
|
|
|
+ //年月状态切换 1.月度 2.年度
|
|
|
+ yearMonthType:1,
|
|
|
+ //全选按钮状态
|
|
|
+ allButtonType:false,
|
|
|
+ //年月数据切换
|
|
|
+ yearMonthData:{
|
|
|
+ presentYear:null,
|
|
|
+ presentMonth:null,
|
|
|
+ presentDate:null,
|
|
|
+ year:null,
|
|
|
+ month:null,
|
|
|
+ },
|
|
|
+ //计算用日期
|
|
|
+ shareDate: new Date(),
|
|
|
+ newKey:0,
|
|
|
+ weekList: [
|
|
|
+ {
|
|
|
+ key:"1",
|
|
|
+ value:"周一",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key:"2",
|
|
|
+ value:"周二",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key:"3",
|
|
|
+ value:"周三",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key:"4",
|
|
|
+ value:"周四",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key:"5",
|
|
|
+ value:"周五",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key:"6",
|
|
|
+ value:"周六",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key:"7",
|
|
|
+ value:"周日",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ //年日历
|
|
|
+ yearDate:[],
|
|
|
+ //月日历
|
|
|
+ monthDate:[],
|
|
|
+ //已勾选数据
|
|
|
+ checkList:[],
|
|
|
+ //子页面传参数据
|
|
|
+ propsData:{},
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getTreeselect();
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ /**************************************************/
|
|
|
+ //查询值班记录列表
|
|
|
+ getListYmd(){
|
|
|
+ let self = this;
|
|
|
+ let obj = {
|
|
|
+ deptId:this.checkTreeId,
|
|
|
+ // beginTime:this.yearDate[0].list[0].value,
|
|
|
+ beginTime:"",
|
|
|
+ // endTime:this.yearDate[this.yearDate.length-1].list[this.yearDate[this.yearDate.length-1].list.length-1].value,
|
|
|
+ endTime:"",
|
|
|
+ };
|
|
|
+ if(this.yearMonthType == 1){
|
|
|
+ for(let i=0;i<self.yearDate.length;i++){
|
|
|
+ if(self.yearDate[i].year == self.yearMonthData.year &&
|
|
|
+ self.yearDate[i].month == self.yearMonthData.month){
|
|
|
+ obj.beginTime = self.yearDate[i].list[0].value;
|
|
|
+ obj.endTime = self.yearDate[i].list[self.yearDate[i].list.length-1].value;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }else if(this.yearMonthType == 2){
|
|
|
+ let list = [];
|
|
|
+ for(let i=0;i<self.yearDate.length;i++){
|
|
|
+ if(self.yearDate[i].year == self.yearMonthData.year){
|
|
|
+ list.push(self.yearDate[i]);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ obj.beginTime = list[0].list[0].value;
|
|
|
+ obj.endTime = list[list.length-1].list[list[list.length-1].list.length-1].value;
|
|
|
+ }
|
|
|
+ getListYmd(obj).then(response => {
|
|
|
+ for(let o=0;o<self.yearDate.length;o++){
|
|
|
+ for(let x=0;x<self.yearDate[o].list.length;x++){
|
|
|
+ let signInCount = 0;
|
|
|
+ let noSignedInCount = 0;
|
|
|
+ for(let i=0;i<response.data.length;i++){
|
|
|
+ if(self.yearDate[o].list[x].value == response.data[i].dutyTime){
|
|
|
+ signInCount = response.data[i].signInCount
|
|
|
+ noSignedInCount = response.data[i].noSignedInCount
|
|
|
+ }
|
|
|
+ }
|
|
|
+ self.yearDate[o].list[x].signInCount = signInCount
|
|
|
+ self.yearDate[o].list[x].noSignedInCount = noSignedInCount
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ // for(let i=0;i<response.data.length;i++){
|
|
|
+ // let year = parseInt(response.data[i].dutyTime.split('-')[0]);
|
|
|
+ // let month = parseInt(response.data[i].dutyTime.split('-')[1]);
|
|
|
+ // for(let o=0;o<self.yearDate.length;o++){
|
|
|
+ // if(self.yearDate[o].year == year && self.yearDate[o].month == month){
|
|
|
+ // for(let x=0;x<self.yearDate[o].list.length;x++){
|
|
|
+ // if(self.yearDate[o].list[x].value == response.data[i].dutyTime){
|
|
|
+ // self.yearDate[o].list[x].signInCount = response.data[i].signInCount
|
|
|
+ // self.yearDate[o].list[x].noSignedInCount = response.data[i].noSignedInCount
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //时间初始化
|
|
|
+ initializationDate(){
|
|
|
+ let myDate = new Date();
|
|
|
+ let obj = {
|
|
|
+ presentYear:myDate.getFullYear(),
|
|
|
+ presentMonth:myDate.getMonth()+1,
|
|
|
+ presentDate:parseInt(this.stringify(myDate.getFullYear(),myDate.getMonth(), myDate.getDate()).replace(/-/g,"")),
|
|
|
+ year:myDate.getFullYear(),
|
|
|
+ month:myDate.getMonth()+1,
|
|
|
+ };
|
|
|
+ this.$set(this,'yearMonthData',obj);
|
|
|
+ this.$set(this,'yearDate',[]);
|
|
|
+ this.$set(this,'checkList',[]);
|
|
|
+ if(this.generateDate()){
|
|
|
+ //后端数据回填
|
|
|
+ this.getListYmd();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /** 查询部门下拉树结构 */
|
|
|
+ getTreeselect() {
|
|
|
+ let self = this;
|
|
|
+ treeselect({}).then(response => {
|
|
|
+ this.deptOptions = response.data;
|
|
|
+ this.$nextTick(function(){
|
|
|
+ if(response.data[0]){
|
|
|
+ self.$refs.tree.setCurrentKey(response.data[0].id);
|
|
|
+ self.$set(self,'checkTreeId',response.data[0].id);
|
|
|
+ self.initializationDate();
|
|
|
+ }
|
|
|
+ })
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 筛选节点
|
|
|
+ filterNode(value, data) {
|
|
|
+ if (!value) return true;
|
|
|
+ return data.label.indexOf(value) !== -1;
|
|
|
+ },
|
|
|
+ // 节点单击事件
|
|
|
+ handleNodeClick(data) {
|
|
|
+ if(data.id != this.checkTreeId){
|
|
|
+ console.log('123')
|
|
|
+ this.$set(this,'checkTreeId',data.id);
|
|
|
+ this.initializationDate();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //页面切换
|
|
|
+ goPage(type,item){
|
|
|
+ if(type == 'index'){
|
|
|
+ this.$set(this,'pageType',1)
|
|
|
+ }else if(type=='info'){
|
|
|
+ if(!this.hasPermiDom(['laboratory:xxpIns:query'])){
|
|
|
+ this.msgError('您没有相关权限,无法查看.')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ let obj = {
|
|
|
+ checkTreeId:this.checkTreeId,
|
|
|
+ time:item.value,
|
|
|
+ }
|
|
|
+ this.$set(this,'propsData',obj)
|
|
|
+ this.$set(this,'pageType',2)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //返回当前时间
|
|
|
+ returnPresent(){
|
|
|
+ this.$set(this.yearMonthData,'year',this.yearMonthData.presentYear);
|
|
|
+ this.$set(this.yearMonthData,'month',this.yearMonthData.presentMonth);
|
|
|
+ this.getListYmd();
|
|
|
+ },
|
|
|
+ //年或月增加
|
|
|
+ addDate(){
|
|
|
+ if(this.yearMonthType == 1){
|
|
|
+ if(this.yearMonthData.month<12){
|
|
|
+ this.yearMonthData.month++
|
|
|
+ }else{
|
|
|
+ if(this.yearMonthData.year>=this.yearMonthData.presentYear){
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.yearMonthData.year++
|
|
|
+ this.$set(this.yearMonthData,'month',1);
|
|
|
+ }
|
|
|
+ }else if(this.yearMonthType == 2){
|
|
|
+ if(this.yearMonthData.year>=this.yearMonthData.presentYear){
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.yearMonthData.year++
|
|
|
+ }
|
|
|
+ this.getListYmd();
|
|
|
+ },
|
|
|
+ //年或月减少
|
|
|
+ subtractDate(){
|
|
|
+ if(this.yearMonthType == 1){
|
|
|
+ if(this.yearMonthData.month>1){
|
|
|
+ this.yearMonthData.month--
|
|
|
+ }else{
|
|
|
+ if(this.yearMonthData.year<=this.yearMonthData.presentYear-1){
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.yearMonthData.year--
|
|
|
+ this.$set(this.yearMonthData,'month',12);
|
|
|
+ }
|
|
|
+ }else if(this.yearMonthType == 2){
|
|
|
+ if(this.yearMonthData.year<=this.yearMonthData.presentYear-1){
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.yearMonthData.year--
|
|
|
+ }
|
|
|
+ this.getListYmd();
|
|
|
+ },
|
|
|
+ //年月展示切换按钮
|
|
|
+ yearMonthSwitchButton(type){
|
|
|
+ if(this.yearMonthType != type){
|
|
|
+ this.$set(this,'yearMonthType',type);
|
|
|
+ }
|
|
|
+ this.getListYmd();
|
|
|
+ },
|
|
|
+ // 生成日历
|
|
|
+ generateDate() {
|
|
|
+ let self = this;
|
|
|
+ let myDate = new Date();
|
|
|
+ let year = myDate.getFullYear()-1;
|
|
|
+ let newTimeList = [];
|
|
|
+ self.newKey = 0;
|
|
|
+ for(let o=0;o<2;o++){
|
|
|
+ for(let i=0;i<12;i++){
|
|
|
+ self.newKey++
|
|
|
+ newTimeList.push(self.setCurrentYearMonth(year,i))
|
|
|
+ }
|
|
|
+ year++
|
|
|
+ }
|
|
|
+ this.$set(this,'yearDate',newTimeList);
|
|
|
+ return true;
|
|
|
+ },
|
|
|
+ // 设置日历显示的日期（年-月）
|
|
|
+ setCurrentYearMonth(year,month) {
|
|
|
+ let showYearMonth = {
|
|
|
+ year,
|
|
|
+ month,
|
|
|
+ };
|
|
|
+ return this.createCalendar(showYearMonth);
|
|
|
+ },
|
|
|
+ // 创建当前月对应日历的日期数据
|
|
|
+ createCalendar(showYearMonth) {
|
|
|
+ const oneDayMS = 24 * 60 * 60 * 1000;
|
|
|
+ let { year, month } = showYearMonth;
|
|
|
+ let obj = {
|
|
|
+ key:this.newKey,
|
|
|
+ time:year+'-'+(month+1),
|
|
|
+ year:year,
|
|
|
+ month:month+1,
|
|
|
+ list:[],
|
|
|
+ }
|
|
|
+ let firstDay = this.getFirstDayByMonths(year, month);
|
|
|
+ let prefixDaysLen = firstDay === 0 ? 6 : firstDay - 1;
|
|
|
+ let begin = new Date(year, month, 1).getTime() - oneDayMS * prefixDaysLen;
|
|
|
+ let lastDay = this.getLastDayByMonth(year, month);
|
|
|
+ let suffixDaysLen = lastDay === 0 ? 0 : 7 - lastDay;
|
|
|
+ let end = new Date(year, month + 1, 0).getTime() + oneDayMS * suffixDaysLen;
|
|
|
+ while (begin <= end) {
|
|
|
+ this.shareDate.setTime(begin);
|
|
|
+ let year = this.shareDate.getFullYear();
|
|
|
+ let curMonth = this.shareDate.getMonth();
|
|
|
+ let date = this.shareDate.getDate();
|
|
|
+ let time = this.stringify(year, curMonth, date).replace(/-/g,"");
|
|
|
+ obj.list.push({
|
|
|
+ year: year,
|
|
|
+ month: curMonth + 1,
|
|
|
+ date: date,
|
|
|
+ weeks:this.calculationWeeks(year, curMonth, date),
|
|
|
+ value: this.stringify(year, curMonth, date),
|
|
|
+ key:this.newKey+''+time,
|
|
|
+ time:time,
|
|
|
+ disable: curMonth !== month,
|
|
|
+ checkType:false,
|
|
|
+ signInCount:0,
|
|
|
+ noSignedInCount:0,
|
|
|
+ });
|
|
|
+ begin += oneDayMS;
|
|
|
+ }
|
|
|
+ return obj;
|
|
|
+ },
|
|
|
+ //计算当前是周几
|
|
|
+ calculationWeeks(year, curMonth, date){
|
|
|
+ let now = new Date(this.stringify(year, curMonth, date));
|
|
|
+ let day = now.getDay();
|
|
|
+ let weeks = new Array(
|
|
|
+ "7",
|
|
|
+ "1",
|
|
|
+ "2",
|
|
|
+ "3",
|
|
|
+ "4",
|
|
|
+ "5",
|
|
|
+ "6"
|
|
|
+ );
|
|
|
+ return weeks[day];
|
|
|
+ },
|
|
|
+ // 格式化时间
|
|
|
+ stringify(year, month, date) {
|
|
|
+ return [year, this.pad(month + 1), this.pad(date)].join("-");
|
|
|
+ },
|
|
|
+ // 对小于 10 的数字，前面补 0
|
|
|
+ pad(str) {
|
|
|
+ return str < 10 ? `0${str}` : str;
|
|
|
+ },
|
|
|
+ // 当前月的第一天是星期几
|
|
|
+ getFirstDayByMonths(year, month) {
|
|
|
+ return new Date(year, month, 1).getDay();
|
|
|
+ },
|
|
|
+ // 当前月的最后一天是星期几
|
|
|
+ getLastDayByMonth(year, month) {
|
|
|
+ return new Date(year, month + 1, 0).getDay();
|
|
|
+ },
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+.patrolRecord{
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ font-weight:500;
|
|
|
+ *{
|
|
|
+ margin:0;
|
|
|
+ padding:0;
|
|
|
+ }
|
|
|
+ .patrolRecordPage{
|
|
|
+ flex:1;
|
|
|
+ display: flex;
|
|
|
+ overflow: hidden;
|
|
|
+ .left-page-max-big-box{
|
|
|
+ width:250px;
|
|
|
+ overflow: hidden;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ padding:36px 0 36px 10px;
|
|
|
+ .tree-box {
|
|
|
+ flex: 1;
|
|
|
+ .terr-max-box:nth-child(1){
|
|
|
+ margin:0;
|
|
|
+ }
|
|
|
+ .terr-max-box {
|
|
|
+ margin-top: 20px;
|
|
|
+ .max-name-box {
|
|
|
+ display: flex;
|
|
|
+ margin-right: 20px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ color: #D8D8D8;
|
|
|
+ font-size: 20px;
|
|
|
+ .max-name {
|
|
|
+ flex: 1;
|
|
|
+ margin-right: 19px;
|
|
|
+ color: #333;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 16px;
|
|
|
+ margin-top: 3px;
|
|
|
+ cursor: pointer;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .terr-big-box {
|
|
|
+ margin-left: 30px;
|
|
|
+ .big-name-box {
|
|
|
+ cursor: pointer;
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ display: flex;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #333;
|
|
|
+ img {
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ margin-top: 12px;
|
|
|
+ margin-right: 4px;
|
|
|
+ }
|
|
|
+ .name-p {
|
|
|
+ flex: 1;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .terr-min-box {
|
|
|
+ margin-left: 30px;
|
|
|
+ .min-name {
|
|
|
+ cursor: pointer;
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ display: flex;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #333;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .check-color {
|
|
|
+ color: #0183FA !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tree-null-p {
|
|
|
+ text-align: center;
|
|
|
+ line-height: 100px;
|
|
|
+ flex: 1;
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .center-border-p{
|
|
|
+ border-right:1px dashed #A2A2A2;
|
|
|
+ margin:36px 35px 36px 0;
|
|
|
+ }
|
|
|
+ .right-page-max-big-box{
|
|
|
+ flex:1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ overflow: hidden;
|
|
|
+ -webkit-user-select: none;
|
|
|
+ -moz-user-select: none;
|
|
|
+ -ms-user-select: none;
|
|
|
+ user-select: none;
|
|
|
+ .top-button-max-box{
|
|
|
+ height:87px;
|
|
|
+ padding:21px 0 26px 0;
|
|
|
+ display: flex;
|
|
|
+ border-bottom:1px solid #E0E0E0;
|
|
|
+ font-size:14px;
|
|
|
+ .yearMonthButtonBox{
|
|
|
+ width:200px;
|
|
|
+ height:40px;
|
|
|
+ display: flex;
|
|
|
+ p{
|
|
|
+ text-align: center;
|
|
|
+ line-height:38px;
|
|
|
+ width:100px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ p:nth-child(1){
|
|
|
+ border-top-left-radius: 4px;
|
|
|
+ border-bottom-left-radius: 4px;
|
|
|
+ }
|
|
|
+ p:nth-child(2){
|
|
|
+ border-top-right-radius: 4px;
|
|
|
+ border-bottom-right-radius: 4px;
|
|
|
+ }
|
|
|
+ .left-button-one{
|
|
|
+ background: #0183FA;
|
|
|
+ border:1px solid #0183FA;
|
|
|
+ color:#fff;
|
|
|
+ }
|
|
|
+ .left-button-tow{
|
|
|
+ color:#333333;
|
|
|
+ border:1px solid #E0E0E0;
|
|
|
+ border-right:none;
|
|
|
+ }
|
|
|
+ .right-button-one{
|
|
|
+ background: #0183FA;
|
|
|
+ border:1px solid #0183FA;
|
|
|
+ color:#fff;
|
|
|
+ }
|
|
|
+ .right-button-tow{
|
|
|
+ color:#333333;
|
|
|
+ border:1px solid #E0E0E0;
|
|
|
+ border-left:none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .year-month-data-button-box{
|
|
|
+ display: flex;
|
|
|
+ margin:0 33px 0 39px;
|
|
|
+ p{
|
|
|
+ line-height:38px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .year-month-subtract-button{
|
|
|
+ border:1px solid #E0E0E0;
|
|
|
+ border-top-left-radius: 4px;
|
|
|
+ border-bottom-left-radius: 4px;
|
|
|
+ width:38px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .year-month-text-p{
|
|
|
+ border-top:1px solid #E0E0E0;
|
|
|
+ border-bottom:1px solid #E0E0E0;
|
|
|
+ width:150px;
|
|
|
+ }
|
|
|
+ .year-month-add-button{
|
|
|
+ border:1px solid #E0E0E0;
|
|
|
+ border-top-right-radius: 4px;
|
|
|
+ border-bottom-right-radius: 4px;
|
|
|
+ width:38px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .return-year-month-button{
|
|
|
+ width:100px;
|
|
|
+ height:40px;
|
|
|
+ line-height:38px;
|
|
|
+ }
|
|
|
+ .flex-p{
|
|
|
+ flex:1;
|
|
|
+ }
|
|
|
+ .all-button{
|
|
|
+ width:80px;
|
|
|
+ height:40px;
|
|
|
+ margin-right:8px;
|
|
|
+ line-height:38px;
|
|
|
+ }
|
|
|
+ .add-button{
|
|
|
+ width:80px;
|
|
|
+ height:40px;
|
|
|
+ margin-right:23px;
|
|
|
+ line-height:38px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .month-max-big-box{
|
|
|
+ -webkit-user-select: none;
|
|
|
+ -moz-user-select: none;
|
|
|
+ -ms-user-select: none;
|
|
|
+ user-select: none;
|
|
|
+ flex:1;
|
|
|
+ padding:10px 0 30px;
|
|
|
+ .month-week-box{
|
|
|
+ display: flex;
|
|
|
+ overflow: hidden;
|
|
|
+ font-size:0;
|
|
|
+ .for-week-box{
|
|
|
+ font-size:14px;
|
|
|
+ width:180px;
|
|
|
+ text-align: center;
|
|
|
+ line-height:60px;
|
|
|
+ border-bottom:1px solid #E0E0E0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .month-big-box{
|
|
|
+ border-left:1px solid #E0E0E0;
|
|
|
+ font-size:0;
|
|
|
+ .for-month-max-big-box{
|
|
|
+ overflow: hidden;
|
|
|
+ font-size:16px;
|
|
|
+ width:180px;
|
|
|
+ height:110px;
|
|
|
+ display: inline-block;
|
|
|
+ border-right:1px solid #E0E0E0;
|
|
|
+ border-bottom:1px solid #E0E0E0;
|
|
|
+ position: relative;
|
|
|
+ .for-month-top-big-box{
|
|
|
+ width:180px;
|
|
|
+ height:50px;
|
|
|
+ line-height:50px;
|
|
|
+ text-align: center;
|
|
|
+ font-size:16px;
|
|
|
+ color:#333;
|
|
|
+ }
|
|
|
+ .for-month-top-big-box-color{
|
|
|
+ color:#E0E0E0;
|
|
|
+ }
|
|
|
+ .for-month-bottom-big-box{
|
|
|
+ height:60px;
|
|
|
+ background: rgba(1,131,250,0.2);
|
|
|
+ color:#0183FA;
|
|
|
+ display: flex;
|
|
|
+ cursor: pointer;
|
|
|
+ .for-month-bottom-left-min-box{
|
|
|
+ flex: 1;
|
|
|
+ font-size:14px;
|
|
|
+ padding:10px 0 0 10px;
|
|
|
+ p{
|
|
|
+ line-height:20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .for-month-bottom-right-min-box{
|
|
|
+ width:24px;
|
|
|
+ text-align: center;
|
|
|
+ line-height:60px;
|
|
|
+ font-size:12px;
|
|
|
+ font-weight:900;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .year-max-big-box{
|
|
|
+ flex:1;
|
|
|
+ padding:30px 0;
|
|
|
+ .for-year-max-big-box{
|
|
|
+ vertical-align:top;
|
|
|
+ width:596px;
|
|
|
+ display: inline-block;
|
|
|
+ margin:0 42px 40px 0;
|
|
|
+ overflow: hidden;
|
|
|
+ .year-name-p{
|
|
|
+ text-align: center;
|
|
|
+ font-size:16px;
|
|
|
+ background: #CCE6FE;
|
|
|
+ color:#0183FA;
|
|
|
+ line-height:40px;
|
|
|
+ border-top-left-radius:4px;
|
|
|
+ border-top-right-radius:4px;
|
|
|
+ }
|
|
|
+ .year-week-box{
|
|
|
+ overflow: hidden;
|
|
|
+ font-size:0;
|
|
|
+ background: rgba(224,224,224,0.2);
|
|
|
+ .for-week-box{
|
|
|
+ width:85px;
|
|
|
+ line-height:40px;
|
|
|
+ text-align: center;
|
|
|
+ display: inline-block;
|
|
|
+ font-size:12px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .year-big-box{
|
|
|
+ border-top:1px solid #E0E0E0;
|
|
|
+ border-left:1px solid #E0E0E0;
|
|
|
+ overflow: hidden;
|
|
|
+ font-size:0;
|
|
|
+ .for-year-big-box{
|
|
|
+ display: inline-block;
|
|
|
+ overflow: hidden;
|
|
|
+ width:85px;
|
|
|
+ height:60px;
|
|
|
+ border-right:1px solid #E0E0E0;
|
|
|
+ border-bottom:1px solid #E0E0E0;
|
|
|
+ position: relative;
|
|
|
+ .for-year-top-big-box{
|
|
|
+ flex:1;
|
|
|
+ font-size:12px;
|
|
|
+ color:#333;
|
|
|
+ line-height:30px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .for-year-top-big-box-color{
|
|
|
+ color:#E0E0E0;
|
|
|
+ }
|
|
|
+ .for-year-bottom-big-box{
|
|
|
+ line-height:30px;
|
|
|
+ font-size:14px;
|
|
|
+ text-align: center;
|
|
|
+ background: #CCE6FE;
|
|
|
+ color:#0183FA;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .red-backgroud-color{
|
|
|
+ background: rgba(255,0,0,0.2)!important;
|
|
|
+ color:#FF0000!important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style lang="scss">
|
|
|
+ .patrolRecord{
|
|
|
+ .el-tree-node__label{
|
|
|
+ font-size:16px;
|
|
|
+ }
|
|
|
+ .el-tree-node__content{
|
|
|
+ height:30px;
|
|
|
+ line-height: 30px;
|
|
|
+ }
|
|
|
+ .el-tree-node__expand-icon{
|
|
|
+ color:#333;
|
|
|
+ font-size:16px;
|
|
|
+ padding:0;
|
|
|
+ margin-right:3px;
|
|
|
+ }
|
|
|
+ .el-tree-node__expand-icon.is-leaf{
|
|
|
+ color: transparent;
|
|
|
+ }
|
|
|
+ .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content{
|
|
|
+ background-color:#ffffff;
|
|
|
+ color:#0183FA;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
dedsudiyu
