数据质量监测

src/components/Calendar.vue

@@ -0,0 +1,233 @@
+<template>
+  <div class="myCalendar">
+    <div class="myCalendar_topBar">
+      <div class="topBar_left">
+        <span class="topBtn" @click="YearPrev"><<</span>
+        <span class="topBtn" @click="MonthPrev"><</span>
+      </div>
+      <div class="topBar_center">{{currentYear}}-{{currentMonth<10?'0'+currentMonth:currentMonth}}</div>
+      <div class="topBar_right">
+        <span class="topBtn" @click="ToDay">今天</span>
+        <span class="topBtn" @click="MonthNext">></span>
+        <span class="topBtn" @click="YearNext">>></span>
+      </div>
+    </div>
+    <div class="myCalendar_container">
+      <table class="myCalendar_table">
+        <thead class="myCalendar_head">
+          <template v-for="(head,headIdx) in headList">
+            <th :key="headIdx">{{head}}</th>
+          </template>
+        </thead>
+        <tbody class="myCalendar_body">
+          <tr v-for="row in Math.ceil(bodyList.length/7)">
+            <td class="item-date" v-for="(item) in bodyList.slice((row>0?(row-1):row)*7,(row)*7)">
+              <div v-if="item.day" class="date_container" @click="selectDate(item)" :class="{'active':item.day===currentDay}">
+                <slot name="dateCell" :data="item">
+                  <span class="date">{{item.day}}</span>
+                </slot>
+              </div>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "myCalendar",
+    props:{
+      date:{},//可传入日期
+    },
+    data() {
+      return {
+        page: "myCalendar",
+        headList:['日','一','二','三','四','五','六'],
+        bodyList:[
+          // {date:'2021-05-01',forbidden:false}
+        ],
+        currentYear:"",
+        currentMonth:"",
+        currentDay:"",
+      }
+    },
+    mounted() {
+      this.init();
+    },
+    methods: {
+      init(date) {
+        if(!date){
+          date = new Date();
+          if(this.date){
+            date = new Date(this.date);
+          }
+        }
+        this.currentYear = date.getFullYear();
+        this.currentMonth = date.getMonth()+1;
+        this.currentDay = date.getDate();
+        this.renderList();
+      },
+      YearPrev(){
+        this.currentYear--;
+        this.currentDay = 1;
+        this.renderList();
+      },
+      MonthPrev(){
+        this.currentMonth--;
+        this.currentDay = 1;
+        if(this.currentMonth===0){
+          this.currentYear--;
+          this.currentMonth = 12;
+        }
+        this.renderList();
+      },
+      YearNext(){
+        this.currentYear++;
+        this.currentDay = 1;
+        this.renderList();
+      },
+      ToDay(){
+        this.init(new Date())
+      },
+      MonthNext(){
+        this.currentMonth++;
+        if(this.currentMonth===13){
+          this.currentYear++;
+          this.currentMonth = 1;
+        }
+        this.currentDay = 1;
+        this.renderList();
+      },
+      renderList(){
+        let currentYear = parseFloat(this.currentYear);
+        let currentMonth = parseFloat(this.currentMonth);
+        let currentDay = parseFloat(this.currentDay);
+        // console.log(currentDay)
+        let firstDay = `${currentYear}-${currentMonth<10?'0'+currentMonth:currentMonth}-01`;
+        let firstWeekDay = new Date(firstDay).getDay();
+        let nextYear,nextMonth;
+        if(parseFloat(currentMonth) === 12){
+          nextYear = parseFloat(currentYear)+1;
+          nextMonth = 1;
+        }else{
+          nextYear = currentYear;
+          nextMonth = parseFloat(currentMonth)+1;
+        }
+        let nextMonthFirstDay = `${nextYear}-${nextMonth<10?'0'+nextMonth:nextMonth}-01`;
+        let lastDay = new Date(new Date(nextMonthFirstDay).getTime() - 24*60*60*1000).getDate();
+        // console.log(lastDay);
+        // console.log(firstWeekDay);
+        let bodyList = [];
+        let cellLength = lastDay+firstWeekDay;
+        while (cellLength%7!==0){
+          cellLength++;
+        }
+        for(let i = 1;i <= cellLength;i++){
+          let item = {date:'',year:currentYear,month:currentMonth,day:"",forbidden:false};
+          if(i > firstWeekDay){
+            if(i<=(lastDay+firstWeekDay)){
+              let itemDay = i - firstWeekDay;
+              item.day = itemDay;
+              item.date = `${currentYear}-${currentMonth<10?'0'+currentMonth:currentMonth}-${itemDay<10?'0'+itemDay:itemDay}`;
+            }else{
+              item.forbidden = true;
+            }
+          }else{
+            item.forbidden = true;
+          }
+          bodyList.push(item);
+        }
+        this.bodyList = bodyList;
+        let currentItem = this.bodyList.filter(val=>{
+          return val['day'] === currentDay;
+        });
+        if(currentItem.length>0){
+          this.selectDate(currentItem[0]);
+        }
+        // console.log(JSON.parse(JSON.stringify(bodyList)))
+      },
+      //选择日期回调函数
+      selectDate(item){
+        this.currentDay = parseFloat(item.day);
+        this.$emit('selectDate',{cellInfo:item});
+      },
+    }
+  }
+</script>
+
+<style lang="stylus">
+  .myCalendar{
+    position: relative;
+    width: 100%;
+    min-width: 250px;
+    display: flex;
+    flex-direction: column;
+    // padding: 10px;
+    .myCalendar_topBar{
+      position: relative;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      color: #fff;
+      background-color: #296BB5;
+      height: 40px;
+      .topBar_center{
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%,-50%);
+      }
+      .topBtn{
+        margin: 0 10px;
+        cursor: pointer;
+      }
+    }
+    .myCalendar_container{
+      background-color: #fff;
+      padding: 0 20px;
+      border: 1px solid #ddd;
+    }
+    .myCalendar_table{
+      border-collapse: collapse;
+      width: 100%;
+      margin-bottom: 10px;
+      .myCalendar_head{
+        th{
+          height: 30px;
+          line-height: 30px;
+        }
+      }
+      .myCalendar_body{
+        border: 1px solid #ddd;
+      }
+      .item-date{
+        position: relative;
+        border: 1px solid #ddd;
+        padding-top: 10%;
+        .date_container{
+          position: absolute;
+          top:0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          cursor: pointer;
+          overflow: hidden;
+          .date{
+            // display: flex;
+            // align-items: center;
+            // justify-content: center;
+            width: 100%;
+            height: 100%;
+            // text-align: center;
+          }
+          &.active{
+            color: #fff;
+            background-color: #296BB5;
+          }
+        }
+      }
+    }
+  }
+</style>

src/components/common/CalendarSetting.vue

@@ -0,0 +1,521 @@
+<template>
+    <div class="wj-calendar-box">
+        <!--左边-->
+        <div class="calendar-left">
+            <!--菜单标题栏-->
+            <div class="calendar-title">
+                <span>{{initCurrentMonth}}</span>
+                <!-- <Button class="ivu-btn-blue btn-back-today mr10" @click="onBackToday">返回今天</Button> -->
+                <!-- <Select v-model="currentYear" @on-change="onChangeYear" class="sel-calendar">
+                    <Option v-for="item in years" :value="item.value" :key="item.value">{{ item.label }}</Option>
+                </Select>
+                <Icon type="ios-arrow-back" class="ml10 mr5 cursor-pointer" color="#008080" @click.native="onPreMonth" />
+                <Select v-model="currentMonth" @on-change="onChangeMonth"  class="sel-calendar">
+                    <Option v-for="item in months" :value="item.value" :key="item.value">{{ item.label }}</Option>
+                </Select>
+                <Icon type="ios-arrow-forward" class="ml5 cursor-pointer" color="#008080" @click.native="onNextMonth" /> -->
+            </div>
+            <!--日历表格-->
+            <div class="left-body">
+                <table class="calendar-table">
+                    <thead>
+                    <tr>
+                        <th v-for="val in weekdays" :key="val">{{val}}</th>
+                    </tr>
+                    </thead>
+                    <tbody>
+                        <tr v-for="(week,index) in calendars" :key="index">
+                            <td v-for="(day,i) in week" :key="i" :class="{'other-month':!day.is_currentMonth,'work-day':day.work_type === '99',
+                            'rest-day':day.work_type === '2' || day.work_type === '4','holiday':day.work_type === '3','today':day.is_currentMonth && day.day === new Date().getDate()&&
+                            (day.month === new Date().getMonth() + 1) && day.year === new Date().getFullYear()}">
+                                <div @click="onCheckDate(day.day,$event,day.is_currentMonth,!day.is_currentMonth)" :class="{'active':day.is_currentMonth && day.day === currentDay}">
+                                    <!-- {{day.day}}
+                                    <Checkbox v-model="day.checked" style="position:absolute;top:0;right:10px" :disabled="!day.is_currentMonth"></Checkbox> -->                                   
+                                    <Tooltip placement="top-end" transfer v-if="day.isNew">
+                                        <span style="background:pink">{{day.day}}</span>
+                                        <div slot="content">
+                                            <div v-for="detail in day.detailArr" :key="detail.lineId">
+                                                <p>{{detail.lineId+'号线' }}</p>
+                                                <p>{{'首班：' + detail.firstTime }}</p>
+                                                <p>{{'末班：' + detail.lastTime}}</p>
+                                            </div>
+                                        </div>    
+                                    </Tooltip>
+                                    <span v-else>{{day.day}}</span>
+                            </div>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+        <!--右边-->
+        <!-- <div class="calendar-right">
+            <div class="calendar-title text-center">
+                {{currentDate}}
+            </div>
+            <div class="right-day">
+                {{currentDay}}
+            </div>
+            <div class="mt20 mb20 ml10">
+              设置为：
+            </div>
+            <Select v-model="work_type" style="width:128px" class="ml10 mb20">
+                <template v-if="method === 1">
+                    <Option :value="1">上班</Option>
+                    <Option :value="2">公休</Option>
+                </template>
+                <template v-else>
+                     <Option :value="0">删除</Option>
+                     <Option :value="99">上班</Option>
+                     <Option :value="3">节假日</Option>
+                     <Option :value="4">公休日</Option>
+                </template>
+
+            </Select>
+            <Button class="ivu-btn-blue mt10 ml10" style="width: 128px" @click="onSubmitWorkType">保存</Button>
+        </div> -->
+    </div>
+</template>
+
+<script>
+    export default {
+      name: "CalendarSetting",
+        props: {
+            // url_data:String,   //请求数据接口url
+            // url_set: String,   //设置状态接口url
+            show_other_month: {  //是否显示非本月日期
+                type: Boolean,
+                default: true
+            },
+            method: {
+                type: Number,
+                default: 0
+            },
+            initCurrentYear:{
+                type: Number,
+                default: 0
+            },
+            initCurrentMonth:{
+                type: String,
+                default: ''
+            },
+            currentMonthNum: {
+                type: Number,
+                default: 1
+            },
+            // calendarData: {
+            //     type: Object,
+            //     default: () => {}
+            // },
+            calendarData: {
+                type: Array,
+                default: () => []
+            }
+        },
+        data() {
+            return {
+                // currentYear: 0,    //当前年
+                // currentMonth: 0,   //当前月
+                currentYear: new Date().getFullYear(),    //当前年
+                currentMonth: new Date().getMonth() + 1,   //当前月
+                weekdays: ['一','二','三','四','五','六','日'],
+                calendars:[],  //日历数据
+                currentDate: '',   //右边标题栏显示日期
+                currentDay: new Date().getDate(),     //右边大字日期
+                work_type: 1,  //作息状态
+                is_year_eve: false,   //是否跨年
+            }
+        },
+        computed: {
+            years() {
+                let arr = [];
+                for(let i = 1970; i<=2050; i++) {
+                    let obj = {};
+                    obj.value = i;
+                    obj.label = i + '年';
+                    arr.push(obj);
+                }
+                return arr;
+            },
+            months() {
+                let arr = [];
+                for (let i = 1; i <= 12; i++) {
+                    let obj = {};
+                    obj.value = i;
+                    obj.label = i + '月';
+                    arr.push(obj);
+                }
+                return arr;
+            }
+        },
+        created() {
+            // this.currentYear = this.initCurrentYear
+            // this.currentMonth = this.initCurrentMonth
+            const weekday = new Date().getDay() === 0 ? 7 : new Date().getDay();
+            this.currentDate = new Date().getFullYear() + '-' + (new Date().getMonth() < 9 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1)
+                + '-' + (new Date().getDate() < 10 ? '0' + new Date().getDate() : new Date().getDate()) + ' 星期' + this.weekdays[weekday - 1];
+            this.onGetCalendarData();
+        },
+        mounted() {
+            // $('.ivu-select .ivu-icon-arrow-down-b').addClass('icon-arrow-down').removeClass('ivu-icon-arrow-down-b').addClass('arrow-mini');
+        },
+        methods: {
+            /**
+             * 获取后台日历数据
+             */
+            onGetCalendarData() {
+                this.onCalendarInit()
+                // this.$axios.ajax.post(this.url_data, {month:this.currentYear+ '' + (this.currentMonth < 10 ? '0' + this.currentMonth : this.currentMonth)}).then(res => {
+                //     if(res.data.code===0) {
+                //         this.onCalendarInit(res.data.data.calwork ? res.data.data.calwork : res.data.data);
+                //         this.$emit('callback',res.data.data);
+                //     }else if(res.data.code===2) {
+                //         this.onCalendarInit();
+                //     } else {
+                //         console.error(res.data.msg);
+                //     }
+                // })
+            },
+            /**
+             * 日历初始化
+             * @param val 后台日历数据
+             */
+            onCalendarInit(cuyear) {
+                // if (cuyear) {
+                //     this.currentYear = cuyear 
+                // }
+                let first_day = this.currentYear + '-' + this.currentMonth + '-01';  //取出当月第一天
+                let year = this.currentYear;  //当前年
+                let month = this.currentMonth;  //当前月
+                let last_day = new Date(year,month,0).getDate() ;   //当前月最后一天
+                let currentMonthDays = [];   //当前月份数据
+                //构造本月数组
+                for(let i = 1; i <= last_day; i++) {
+                    let obj = {};
+                    obj.is_currentMonth = true;
+                    obj.day = i;
+                    // obj.month = month;
+                    obj.month = this.currentMonthNum
+                    obj.year = year;
+                    obj.detailArr = []
+                    // if(val && !!val[i-1]){
+                    //     obj.work_type = val[i-1].work_type;
+                    // }
+                    currentMonthDays.push(obj);
+                }
+                let first_weekday = new Date(first_day).getDay() === 0 ? 7 : new Date(first_day).getDay(); //计算出第一天是周几
+                const week_length = Math.ceil((last_day + first_weekday - 8)/7 + 1);
+                let first_week = currentMonthDays.splice(0,8 - first_weekday);    //取出第一周数据
+                let weeks = [];   //日历按周分组
+                let pre_last_day = new Date(year,month - 1,0).getDate() ;   //前一个月的最后一天
+                let pre_length = pre_last_day - first_weekday + 2;  //前一个月需要补充的天数
+                let n = new Date()
+                let date = new Date(n.getFullYear() - 1, n.getMonth(), n.getDate(), n.getHours(), n.getMinutes(), n.getSeconds(), n.getMilliseconds());
+                let endDate = new Date(date.getFullYear(), date.getMonth() + 1, 0)
+                let dayEnd = endDate.getDate()
+                //补全第一周数据
+                for(let i = pre_last_day; i >= pre_length; i--) {
+                    if(this.show_other_month){
+                        first_week.unshift({day: i,is_currentMonth: false});
+                    }else {
+                        first_week.unshift({});
+                    }
+                }
+                weeks.push(first_week);
+                //将剩下数据按7等分
+                let day_last = '';
+                for(let i = 0; i <= week_length - 2; i++) {
+                    let currentWeek = currentMonthDays.splice(0,7);  //每次截取7天
+                    //补全最后一周数据
+                    if( i === week_length - 2 && this.show_other_month) {
+                        let length = currentWeek.length;
+                        day_last = 8 - length;
+                        for(let j = 1; j <= 7 - length; j++) {
+                            currentWeek.push({day: j,is_currentMonth: false});
+                        }
+                    }
+                    weeks.push(currentWeek);
+                }
+                //如果少于6周，再补一周
+                if(weeks.length < 6) {
+                    let currentWeek = [];
+                    for(let i = day_last; i < day_last + 7; i++) {
+                        currentWeek.push({day: this.show_other_month ? i : '', is_currentMonth: false});
+                    }
+                    weeks.push(currentWeek);
+                }
+                // function flatten(arr) { return [].concat( ...arr.map(x => Array.isArray(x) ? flatten(x) : x) ) } //二维数组转变为一维数组
+                var arr2 = this.flatten(weeks); // arr2 [0, 1, 2, 3, 4, 5]
+                // console.log('arr2',arr2)
+                let newArr = this.calendarData
+                // console.log('newArr',newArr)
+                for(let m = 0; m < arr2.length ; m++) {
+                    for(let n = 0; n <= newArr.length; n++) {
+                       if (arr2[m].is_currentMonth) {
+                           if(newArr[n]  && (arr2[m].month == newArr[n].currentMonth) && (arr2[m].day == newArr[n].currentDay)) {
+                              arr2[m].isNew = true
+                              arr2[m].detailArr.push({lineId : newArr[n].lineId,firstTime: newArr[n].firstTime,lastTime: newArr[n].lastTime})
+                            //   arr2[m].lineId =  newArr[n].lineId
+                            //   arr2[m].firstTime = newArr[n].firstTime
+                            //   arr2[m].lastTime = newArr[n].lastTime
+                           }
+                       }
+                    } 
+                }
+
+                let newArr2 = []; //一维数组转变为二维数组 一个二维数组里有7个值
+                let len = 7;//数量
+                for (let i = 0; i < Math.ceil(arr2.length / len); i++) {
+                    let start = i * len
+                    let end = start + len
+                    newArr2.push(arr2.slice(start, end))
+                }
+                this.calendars = newArr2
+                console.log('45454',this.calendars)
+                // console.log('last Array',this.calendars)
+                // this.calendars = weeks;
+            },
+            flatten (arr) { //二维数组转变为一维数组
+             return [].concat( ...arr.map(x => Array.isArray(x) ? this.flatten(x) : x) )
+            },
+            /**
+             * 改变年份
+             */
+            onChangeYear() {
+                if(!this.is_year_eve) {
+                    this.onGetCalendarData();
+                }else {
+                    this.is_year_eve = false;
+                }
+            },
+            /**
+             * 改变月份
+             */
+            onChangeMonth() {
+                this.onGetCalendarData();
+            },
+            /**
+             * 前一个月
+             */
+            onPreMonth() {
+                this.currentMonth --;
+                if(this.currentMonth <= 0) {
+                    this.currentMonth = 12;
+                    this.is_year_eve = true;
+                    this.currentYear --;
+                }else {
+                    this.is_year_eve = false;
+                }
+            },
+            /**
+             * 后一个月
+             */
+            onNextMonth() {
+                this.currentMonth ++;
+                if(this.currentMonth > 12) {
+                    this.currentMonth = 1;
+                    this.is_year_eve = true;
+                    this.currentYear ++;
+                }else {
+                    this.is_year_eve = false;
+                }
+            },
+            /**
+             * 点击日期
+             * @param val 点击的日期的日数
+             * @param e 点击的dom节点
+             * @param val2 点击的日期是否是本月
+             */
+            onCheckDate(val,e,val2,val3) {
+                if (val3) return;
+                if(!val2) {
+                    if(val > 15) {
+                        this.onPreMonth();
+                    }else {
+                        this.onNextMonth();
+                    }
+                }
+                this.currentDay = val;
+                const date = this.currentYear + '-' + (this.currentMonth <10 ? '0' + this.currentMonth :this.currentMonth) + '-' + (val <10 ? '0' + val : val);
+                const weekday = new Date(date).getDay() === 0 ? 7 : new Date(date).getDay();
+                this.currentDate = date + ' 星期' + this.weekdays[weekday - 1];
+
+            },
+            /**
+             * 返回今天
+             */
+            onBackToday() {
+                //获取当前时间
+                const year = new Date().getFullYear();
+                const month = new Date().getMonth() + 1;
+                const day = new Date().getDate();
+                const weekday = new Date().getDay();
+                //给变量重新赋值
+                this.currentYear= year;
+                this.currentMonth = month;
+                this.currentDate = year + '-' + (month < 10 ? '0' + month : month) + '-' + (day < 10 ? '0' + day : day) + ' 星期' + this.weekdays[weekday - 1];
+                this.currentDay = day;
+            },
+            /**
+             * 提交状态修改
+             */
+            onSubmitWorkType() {
+                this.$axios.ajax.post(this.url_set, {date:this.currentDate.split(' ')[0],work_type:this.work_type}).then(res => {
+                    if(res.data.code===0) {
+                        this.$Message.success('设置成功');
+                        this.onGetCalendarData();
+                    }else {
+                        this.$Message.error('只能设置今天之后的日期，请检查');
+                    }
+                })
+            }
+        }
+    }
+</script>
+
+<style scoped lang="stylus">
+    .wj-calendar-box {
+        // width: 540px;
+        width: 100%;
+        height: 100%;
+        .calendar-title {
+            width: 100%;
+            height: 26px;
+            line-height: 26px;
+            background-color: #a5e4fe;
+
+            .btn-back-today {
+                width: 90px;
+                height: 32px;
+                margin-left: 25px;
+                border-radius: 32px;
+            }
+
+            .sel-calendar {
+                width: 90px;
+
+                .ivu-select-selection {
+                    border-radius: 30px;
+                }
+            }
+        }
+
+        .calendar-left {
+            height: 100%;
+            // width: 380px;
+            // float: left;
+            border: 1px solid #e6e6e6;
+
+            .left-body {
+                width: 100%;
+                height: 100%;;
+                .calendar-table {
+                    width: 100%;
+                    text-align: center;
+
+                    thead {
+                        width: 100%;
+                        background-color: #f5fdff;
+                        height: 38px;
+                        line-height: 38px;
+                        color: #2484cf;
+                        font-size: 16px;
+                        
+                    }
+                    caption, th {
+                     text-align: center;
+                    }
+                    tbody {
+                        background-color: #fff;
+
+                        tr {
+                            font-size: 18px;
+                            color: #222222;
+
+                            td {
+                                position: relative;
+                                cursor: pointer;
+                                height: 54px;
+                            }
+                            td div {
+                                border-radius:50%;
+                                border: 1px solid white;
+                                width: 40px;
+                                height: 40px;
+                                line-height: 40px;
+                                margin: auto;
+                            }
+                            td div:hover,td div.active {
+                                border: 1px solid #e6e6e6;
+                            }
+                            td:before {
+                                content: '';
+                                display: none;
+                                position: absolute;
+                                top: 5px;
+                                right: 5px;
+                                font-size: 13px;
+                                text-align: center;
+                                line-height: 15px;
+                                text-indent: 1px;
+                                width: 15px;
+                                background: rgb(0,195,150);
+                                height: 15px;
+                                color: #fff;
+                                overflow: hidden;
+                                border-radius: 15px;
+                            }
+
+                            td.work-day:before {
+                                content: '班';
+                                display: block;
+                            }
+
+                            td.rest-day:before {
+                                content: '休';
+                                display: block;
+                            }
+
+                            td.holiday:before {
+                                content: '节';
+                                display: block;
+                            }
+                            td.other-month {
+                                color: rgb(191, 191, 197);
+                                cursor: not-allowed;
+                            }
+                            td.today div {
+                                background: #47baef;
+                                color: #FFFFFF;
+                            }
+                        }
+                    }
+                }
+            }
+
+        }
+
+        .calendar-right {
+            width: 150px;
+            height: 410px;
+            float: left;
+            margin-left: 10px;
+            border: 1px solid #e6e6e6;
+            background-color: #fff;
+
+            .right-day {
+                width: 130px;
+                height: 130px;
+                line-height: 130px;
+                margin: 20px auto;
+                text-align: center;
+                background-color: #e4f5ff;
+                font-size: 60px;
+                color: #1698d6;
+                border-radius: 7px;
+                font-weight: 700;
+            }
+        }
+    }
+</style>

src/components/common/LoadingAnimation.vue

@@ -69,7 +69,6 @@ export default {
   .loading-title-right {
     color: #D7790C;
     font-size: 12px;
-    cursor: pointer;
   }
 .loading {
   height: 100%;

src/components/common/NoData.vue

@@ -50,7 +50,6 @@ export default {
   .title-right {
     color: #D7790C;
     font-size: 12px;
-    cursor: pointer;
   }
   .nodata-img {
     position: relative;

src/components/common/index.js

@@ -10,6 +10,7 @@ import RollingDetailTable from './RollingDetailTable.vue'
 import TreeList from './TreeList.vue'
 import TreeFilter from './TreeFilter.vue'
 import TreeSelect from './TreeSelect.vue'
+import CalendarSetting from './CalendarSetting.vue'
 // import AsideList from './AsideList.vue'
 // import TabsList from './TabsList.vue'
 // import SearchTable from './SearchTable.vue'
@@ -40,6 +41,7 @@ const Global = {
     // 树形下拉框组件
     Vue.component('TreeSelect', TreeSelect)
     Vue.component('TreeFilter', TreeFilter)
+    Vue.component('CalendarSetting', CalendarSetting)
     // // 表格搜索组件
     // // Vue.component('SearchTable', SearchTable)
     // Vue.component('AsideList', AsideList)

src/login/DownAllQualityReport.vue

@@ -109,7 +109,7 @@
                       </Col>
                       <Col :span="16">
                         <div class="report-echarts-table report-echarts-right-table">
-                           <Table :columns="columnsRule" :data="tableData6" class="common-table report-table-detail" no-data-text="" :row-class-name="rowClassName">
+                           <Table :columns="columnsApp" :data="tableData6" class="common-table report-table-detail" no-data-text="" :row-class-name="rowClassName">
                              <template slot-scope="{ index }" slot="xAxis">
                               <span class="table-legend" :style="'background:'+tableColumnColor6[index]" v-show="index>0"></span>
                             </template>
@@ -167,7 +167,7 @@
                       </Col>
                       <Col :span="16">
                         <div class="report-echarts-table report-echarts-right-table">
-                           <Table :columns="columnsRule" :data="tableData8" class="common-table report-table-detail" no-data-text="" :row-class-name="rowClassName">
+                           <Table :columns="columnsApp" :data="tableData8" class="common-table report-table-detail" no-data-text="" :row-class-name="rowClassName">
                             <template slot-scope="{ index }" slot="xAxis">
                               <span class="table-legend" :style="'background:'+tableColumnColor8[index]" v-show="index>0"></span>
                             </template>
@@ -192,7 +192,7 @@
                       </Col>
                       <Col :span="16">
                         <div class="report-echarts-table report-echarts-right-table">
-                          <Table :columns="columnsRule" :data="tableData9" class="common-table report-table-detail" no-data-text="" :row-class-name="rowClassName">
+                          <Table :columns="columnsApp" :data="tableData9" class="common-table report-table-detail" no-data-text="" :row-class-name="rowClassName">
                              <template slot-scope="{ index }" slot="xAxis">
                               <span class="table-legend" :style="'background:'+tableColumnColor9[index]" v-show="index>0"></span>
                             </template>
@@ -217,7 +217,7 @@
                       </Col>
                       <Col :span="16">
                         <div class="report-echarts-table report-echarts-right-table">
-                          <Table :columns="columnsRule" :data="tableData10" class="common-table report-table-detail" no-data-text="" :row-class-name="rowClassName">
+                          <Table :columns="columnsApp" :data="tableData10" class="common-table report-table-detail" no-data-text="" :row-class-name="rowClassName">
                              <template slot-scope="{ index }" slot="xAxis">
                               <span class="table-legend" :style="'background:'+tableColumnColor10[index]" v-show="index>0"></span>
                             </template>
@@ -242,7 +242,7 @@
                       </Col>
                       <Col :span="16">
                         <div class="report-echarts-table report-echarts-right-table">
-                          <Table :columns="columnsRule" :data="tableData11" class="common-table report-table-detail" no-data-text="" :row-class-name="rowClassName">
+                          <Table :columns="columnsApp" :data="tableData11" class="common-table report-table-detail" no-data-text="" :row-class-name="rowClassName">
                             <template slot-scope="{ index }" slot="xAxis">
                               <span class="table-legend" :style="'background:'+tableColumnColor11[index]" v-show="index>0"></span>
                             </template>
@@ -267,7 +267,7 @@
                       </Col>
                       <Col :span="16">
                         <div class="report-echarts-table report-echarts-right-table">
-                          <Table :columns="columnsRule" :data="tableData12" class="common-table report-table-detail" no-data-text="" :row-class-name="rowClassName">
+                          <Table :columns="columnsApp" :data="tableData12" class="common-table report-table-detail" no-data-text="" :row-class-name="rowClassName">
                              <template slot-scope="{ index }" slot="xAxis">
                               <span class="table-legend" :style="'background:'+tableColumnColor12[index]" v-show="index>0"></span>
                             </template>
@@ -430,7 +430,7 @@ export default {
         ],
         columns5: [
            {
-            title: '来源应用',
+            title: '规则类型',
             key: 'xAxis',
             align: 'center',
             ellipsis: true,
@@ -471,7 +471,7 @@ export default {
         tableData13: [],
         tableData14: [],
         tableData15: [],
-        columnsRule: [
+        columnsApp: [
           {
             title: '图例颜色',
             slot: 'xAxis',
@@ -506,6 +506,41 @@ export default {
             align: 'center',
           }
         ],
+        columnsRule: [
+          {
+            title: '图例颜色',
+            slot: 'xAxis',
+            align: 'right',
+            width: 70,
+            className: 'table-legend-list',
+          },
+          {
+            title: '规则类型',
+            key: 'xAxis',
+            align: 'center',
+            ellipsis: true,
+            tooltip: true
+          },
+          {
+            title: '记录总数',
+            key: 'paramNum01',
+            align: 'center',
+            ellipsis: true,
+            tooltip: true
+          },
+          {
+            title: '异常总数',
+            key: 'paramNum02',
+            align: 'center',
+            ellipsis: true,
+            tooltip: true
+          },
+          {
+            title: '异常占比',
+            slot: 'paramDou01',
+            align: 'center',
+          }
+        ],
         columnsQuality: [
         {
           title: '来源应用',
@@ -1102,8 +1137,8 @@ export default {
       let toplinechart = echarts.init(document.getElementById(lineData.id));
       let seriesData = _.map(lineData.data, (item,index)=>({
           name: lineData.legend[index], type: 'line', symbol: 'circle', symbolSize: 2,smooth: true, // 平滑曲线
-          lineStyle: { normal: { color: lineData.lineColor[index], width: 2 } },
-          itemStyle: { normal: { color: lineData.lineColor[index], borderColor: lineData.lineColor[index], borderWidth: 2 },
+          lineStyle: {color: lineData.lineColor[index], width: 2},
+          itemStyle: {color: lineData.lineColor[index], borderColor: lineData.lineColor[index], borderWidth: 2,
           emphasis: { color: '#fff' }
         },
         areaStyle: { opacity:0.4,color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0.3, color: lineData.lineColor[index]}, { offset: 1, color: 'rgba(0,0,0,0)' }])},
@@ -1203,9 +1238,7 @@ export default {
         let itemStyle = {}
         if (botmLeftBarData.showStack) {
           itemStyle = {
-            normal: {
               color:botmLeftBarData.color[i]
-            }
           }
         } else {
           itemStyle = {
@@ -1400,10 +1433,8 @@ export default {
               }
           },
           itemStyle: {
-            normal: {
               color: function (params) {
                return pieData.color[params.dataIndex]
-              }
             }
           },
           data: pieData.data,

src/login/DownAppQualityReport.vue

@@ -185,7 +185,7 @@ export default {
         queryParams: {reportClassName:'',beginDate:'',endDate: '',appId:0,appName: ''},
         columns4: [
            {
-            title: '来源应用',
+            title: '规则类型',
             key: 'xAxis',
             align: 'center',
             ellipsis: true,
@@ -231,7 +231,7 @@ export default {
           className: 'table-legend-list',
         },
         {
-          title: '来源应用',
+          title: '规则类型',
           key: 'xAxis',
           align: 'center',
           ellipsis: true,

src/router/index.js

@@ -47,7 +47,7 @@ const routes = [
     path: '/MainPage',
     component: MainPage,
     meta: { Auth: true }, // 添加该字段，表示进入这个路由是需要登录的
-    beforeEnter: (to, from, next) => {
+    beforeEnter: (to, from, next) => { //路由独守守卫
       if (!utils.storage('sw_user')) {
         next({ path: '/login' })
         return false

src/views/homecomponents/DataManagement/DataMonitor.vue

@@ -1,6 +1,18 @@
 <template>
   <div class="content-main-manage">
-     <div class="content-main">
+    <!-- <DatePicker type="date" :value="dateArr" multiple placeholder="Select date" style="width: 300px"></DatePicker> -->
+    <!-- <div v-show="showTable">
+       erwerwr
+       <Button @click="showCalendar">切换</Button>
+    </div>
+    <Row :gutter="16" style="height:100%" v-show="!showTable">
+      <Col style="height:23%" :span="8" v-for="(item,index) in monthList" :key="item"><calendar-setting ref="calendar" :currentMonthNum="index+1" :calendarData="calendarData" :initCurrentYear="year" :initCurrentMonth="item" ></calendar-setting></Col>
+    </Row> -->
+    <!-- <div v-for="(item,index) in monthList" :key="item">
+      <calendar-setting ref="calendar" :initCurrentYear="year" :initCurrentMonth="item" ></calendar-setting>
+    </div> -->
+    <!-- <calendar-setting ref="calendar"></calendar-setting> -->
+    <div class="content-main">
      <div class="content-body-wrap">
        <div class="content-body">
           <div class="search-list">
@@ -17,9 +29,9 @@
                     </Select>
                 </FormItem>
                 <FormItem label="" prop="dateStr">
-                   <DatePicker type="date" :value="monitorParams.dateStr" placeholder="Select date" :clearable="false" :editable="false" class="common-date-picker date-picker-main" placement="bottom-start" v-show="monitorParams.dateType=='DAY'" @on-change="changeDate"></DatePicker>
-                   <DatePicker type="month" :value="monitorParams.dateStr" placeholder="Select year" :clearable="false" :editable="false" class="common-date-picker date-picker-main" placement="bottom-start" v-show="monitorParams.dateType=='MONTH'" @on-change="changeDate"></DatePicker>
-                   <DatePicker type="year"  :value="monitorParams.dateStr" placeholder="Select year"  :clearable="false" :editable="false" class="common-date-picker date-picker-main" placement="bottom-start" v-show="monitorParams.dateType=='YEAR'" @on-change="changeDate"></DatePicker>
+                   <DatePicker type="date" :value="monitorParams.dateStr" :clearable="false" :editable="false" class="common-date-picker date-picker-main" placement="bottom-start" v-show="monitorParams.dateType=='DAY'" @on-change="changeDate"></DatePicker>
+                   <DatePicker type="month" :value="monitorParams.dateStr" :clearable="false" :editable="false" class="common-date-picker date-picker-main" placement="bottom-start" v-show="monitorParams.dateType=='MONTH'" @on-change="changeDate"></DatePicker>
+                   <DatePicker type="year"  :value="monitorParams.dateStr" :clearable="false" :editable="false" class="common-date-picker date-picker-main" placement="bottom-start" v-show="monitorParams.dateType=='YEAR'" @on-change="changeDate"></DatePicker>
                 </FormItem>
                 <FormItem label="" >
                   <Button type="primary" class="common-btn-search" @click="searchClick">
@@ -41,7 +53,7 @@
                   <div v-show="!showImg1" class="line-loading">
                     <div class="manage-title">
                       <span>准确性-数据内容准确性</span>
-                      <span class="title-right">详情<Icon type="ios-arrow-forward" style="margin-left:6px"/></span>
+                      <span class="title-right" @click="showDetail('准确性-数据内容准确性','准确性')">详情<Icon type="ios-arrow-forward" style="margin-left:6px"/></span>
                     </div>
                     <div id="line1" class="line-loading-echarts"></div>
                   </div>
@@ -54,7 +66,7 @@
                   <div v-show="!showImg2" class="line-loading">
                     <div class="manage-title">
                       <span>数据一致性-数据类型一致性</span>
-                      <span class="title-right">详情<Icon type="ios-arrow-forward" style="margin-left:6px"/></span>
+                      <span class="title-right" @click="showDetail('数据一致性-数据类型一致性','一致性')">详情<Icon type="ios-arrow-forward" style="margin-left:6px"/></span>
                     </div>
                     <div id="line2" class="line-loading-echarts"></div>
                   </div>
@@ -67,7 +79,7 @@
                   <div v-show="!showImg3" class="line-loading">
                     <div class="manage-title">
                       <span>数据一致性-处理前后一致性</span>
-                      <span class="title-right">详情<Icon type="ios-arrow-forward" style="margin-left:6px"/></span>
+                      <span class="title-right" @click="showDetail('数据一致性-处理前后一致性','一致性')">详情<Icon type="ios-arrow-forward" style="margin-left:6px"/></span>
                     </div>
                     <div id="line3" class="line-loading-echarts"></div>
                   </div>
@@ -82,7 +94,7 @@
                   <div v-show="!showImg4" class="line-loading">
                     <div class="manage-title">
                       <span>及时性-数据采集</span>
-                      <span class="title-right">详情<Icon type="ios-arrow-forward" style="margin-left:6px"/></span>
+                      <span class="title-right" @click="showDetail('及时性-数据采集','及时性（数据采集）')">详情<Icon type="ios-arrow-forward" style="margin-left:6px"/></span>
                     </div>
                     <div id="line4" class="line-loading-echarts"></div>
                   </div>
@@ -95,7 +107,7 @@
                   <div v-show="!showImg5" class="line-loading">
                     <div class="manage-title">
                       <span>及时性-数据入库</span>
-                      <span class="title-right">详情<Icon type="ios-arrow-forward" style="margin-left:6px"/></span>
+                      <span class="title-right" @click="showDetail('及时性-数据入库','及时性（数据）')">详情<Icon type="ios-arrow-forward" style="margin-left:6px"/></span>
                     </div>
                     <div id="line5" class="line-loading-echarts"></div>
                   </div>
@@ -108,7 +120,7 @@
                   <div v-show="!showImg6" class="line-loading">
                     <div class="manage-title">
                       <span>数据完整性</span>
-                      <span class="title-right">详情<Icon type="ios-arrow-forward" style="margin-left:6px"/></span>
+                      <span class="title-right" @click="showDetail('数据完整性','完整性')">详情<Icon type="ios-arrow-forward" style="margin-left:6px"/></span>
                     </div>
                     <div id="line6" class="line-loading-echarts"></div>
                   </div>
@@ -129,21 +141,23 @@
       reset-drag-position
       :mask-closable="false"
       footer-hide
+      @on-visible-change="modalChange"
       class-name="common-modal">
       <div class="common-modal-body">
         <div class="common-modal-top">
           <div class="common-modal-top-left">
             <span>质量规则</span>
-            <span class="modal-top-left-color1">4444条</span>
+            <span class="modal-top-left-color1">{{qualityRuleSum}}条</span>
             <span>监测记录</span>
-            <span class="modal-top-left-color2">445544条</span>
+            <span class="modal-top-left-color2">{{recordSum}}条</span>
             <span>异常记录</span>
-            <span class="modal-top-left-color3">44条</span>
+            <span class="modal-top-left-color3">{{abnormalRecord}}条</span>
           </div>
           <div id="guage" class="common-modal-top-right"></div>
         </div>
         <div class="common-modal-content">
           <span>监测异常记录</span>
+           <rolling-detail-table :columns1="abnormalData" apiUrl="metroapi/dataQuality/insp/trend/detail" ref="detailTable" class="rolling-detail-table"></rolling-detail-table>
         </div>
       </div>
     </Modal>
@@ -156,16 +170,122 @@ import moment from 'moment'
 export default {
   name: "DataMonitor",
   components: {
-    StatisticsList
+    StatisticsList,
   },
   data() {
     return {
+      // dateArr: ['2022-04-04','2022-04-12','2022-04-15'],
+      // showTable: true,
+      // year: new Date().getFullYear(),
+      // monthList:['一','二','三','四','五','六','七','八','九','十','十一','十二'],
+      // calendarData: [ {
+      //   "id": "1507197300345442306",
+      //   "lineId": "1",
+      //   "startDate": "2022-03-02",
+      //   "endDate": "2022-03-31",
+      //   "firstTime": "06:30:00",
+      //   "lastTime": "21:30:00",
+      //   "gmtModified": "2022-03-29 13:58:22",
+      //   "gmtCreate": "2022-03-25 11:26:53",
+      //   "name": "3月运行计划",
+      //   "currentMonth": 3,
+      //   "currentDay": 1,
+      // },{
+      //   "id": "1507197300345442306",
+      //   "lineId": "1",
+      //   "startDate": "2022-03-02",
+      //   "endDate": "2022-03-31",
+      //   "firstTime": "06:30:00",
+      //   "lastTime": "21:30:00",
+      //   "gmtModified": "2022-03-29 13:58:22",
+      //   "gmtCreate": "2022-03-25 11:26:53",
+      //   "name": "3月运行计划",
+      //   "currentMonth": 3,
+      //   "currentDay": 4,
+      // },
+      // ,{
+      //   "id": "1507197300345442306",
+      //   "lineId": "2",
+      //   "startDate": "2022-03-02",
+      //   "endDate": "2022-03-31",
+      //   "firstTime": "06:30:00",
+      //   "lastTime": "21:30:00",
+      //   "gmtModified": "2022-03-29 13:58:22",
+      //   "gmtCreate": "2022-03-25 11:26:53",
+      //   "name": "3月运行计划",
+      //   "currentMonth": 3,
+      //   "currentDay": 4,
+      // },
+      // {
+      //   "id": "1507197300345442306",
+      //   "lineId": "3",
+      //   "startDate": "2022-03-02",
+      //   "endDate": "2022-03-31",
+      //   "firstTime": "06:30:00",
+      //   "lastTime": "21:30:00",
+      //   "gmtModified": "2022-03-29 13:58:22",
+      //   "gmtCreate": "2022-03-25 11:26:53",
+      //   "name": "3月运行计划",
+      //   "currentMonth": 3,
+      //   "currentDay": 4,
+      // },
+      // {
+      //   "id": "1507197300345442306",
+      //   "lineId": "1",
+      //   "startDate": "2022-04-02",
+      //   "endDate": "2022-04-10",
+      //   "firstTime": "06:30:00",
+      //   "lastTime": "21:30:00",
+      //   "gmtModified": "2022-03-29 13:58:22",
+      //   "gmtCreate": "2022-03-25 11:26:53",
+      //   "name": "4月运行计划",
+      //   "currentMonth": 4,
+      //   "currentDay": 10,
+      // },
+      // {
+      //   "id": "1507197300345442306",
+      //   "lineId": "1",
+      //   "startDate": "2022-04-02",
+      //   "endDate": "2022-04-10",
+      //   "firstTime": "06:30:00",
+      //   "lastTime": "21:30:00",
+      //   "gmtModified": "2022-03-29 13:58:22",
+      //   "gmtCreate": "2022-03-25 11:26:53",
+      //   "name": "4月运行计划",
+      //   "currentMonth": 6,
+      //   "currentDay": 6,
+      // },
+      //  {
+      //   "id": "1507197300345442306",
+      //   "lineId": "1",
+      //   "startDate": "2022-04-02",
+      //   "endDate": "2022-04-10",
+      //   "firstTime": "06:30:00",
+      //   "lastTime": "21:30:00",
+      //   "gmtModified": "2022-03-29 13:58:22",
+      //   "gmtCreate": "2022-03-25 11:26:53",
+      //   "name": "4月运行计划",
+      //   "currentMonth": 7,
+      //   "currentDay": 12,
+      // },
+      // {
+      //   "id": "1507197300345442306",
+      //   "lineId": "1",
+      //   "startDate": "2022-04-02",
+      //   "endDate": "2022-04-10",
+      //   "firstTime": "06:30:00",
+      //   "lastTime": "21:30:00",
+      //   "gmtModified": "2022-03-29 13:58:22",
+      //   "gmtCreate": "2022-03-25 11:26:53",
+      //   "name": "4月运行计划",
+      //   "currentMonth": 12,
+      //   "currentDay": 20,
+      // }],
       tabsIcon: [
-        { imgSrc: require('@/assets/images/dataReport1.png') },
-        { imgSrc: require('@/assets/images/dataReport2.png') },
-        { imgSrc: require('@/assets/images/dataReport3.png') },
-        { imgSrc: require('@/assets/images/dataReport4.png') },
-        { imgSrc: require('@/assets/images/dataReport5.png') },
+        { imgSrc: require('@/assets/images/dataMonitor1.png') },
+        { imgSrc: require('@/assets/images/dataMonitor2.png') },
+        { imgSrc: require('@/assets/images/dataMonitor3.png') },
+        { imgSrc: require('@/assets/images/dataMonitor4.png') },
       ],
       tabsTitleColor:['#45F2FD', '#EBF310', '#54D593', '#FD7545'],
       unitArr: ['个','种','条','种'],
@@ -205,26 +325,78 @@ export default {
       showImg6: false,
       showModal: false,
       title: '',
+      abnormalData: [
+          {
+            title: '规则名称',
+            key: 'xAxis',
+            align: 'center',
+            ellipsis: true,
+            tooltip: true
+          },
+          {
+            title: '应用',
+            key: 'xAxis2',
+            align: 'center',
+            ellipsis: true,
+            tooltip: true
+          },
+          {
+            title: '异常字段',
+            key: 'param01',
+            align: 'center',
+            ellipsis: true,
+            tooltip: true
+          },
+          {
+            title: '更新时间',
+            key: 'param03',
+            align: 'center',
+            ellipsis: true,
+            tooltip: true
+          },
+          {
+            title: '数据记录',
+            key: 'param04',
+            align: 'center',
+            ellipsis: true,
+            tooltip: true
+          },
+      ],
+      detailParams: {},
+      qualityRuleSum: 0,
+      recordSum: 0,
+      abnormalRecord: 0,
     //   optionsDay: {
     //     disabledDate(date) {
     //       return date && date.valueOf() < Date.now() - 86400000 //可选择今日起之后的日期
     //     }
     //   },
     //  optionsMonth: {
-    //     disabledDate(date) {
+    //     disabledDate(date)
     //       var dateNow = new Date() ; //之前月份禁用
     //       return date && date.valueOf() < dateNow.setMonth(dateNow.getMonth()-1);
     //     }
     //   },
     };
   },
+  created () {
+   this.getType()
+  },
   mounted() {
-    this.getType()
     this.getEcharts()
   },
   methods: {
+    showCalendar () {
+      this.showTable = false
+    },
+    changeClick() {
+      this.year = 2023
+      let arr = this.$refs.calendar
+      arr.forEach((item)=> {
+        item.onCalendarInit(this.year)
+      })
+    },
      getType  () {
-      // 指标类型数据
       this.$get('metroapi/application/info/list', this.applicationParams).then(res=>{
         if (res.httpCode == 1 ){
           this.appData = res.data.data
@@ -237,11 +409,6 @@ export default {
     searchClick () {
       this.$refs.statistics.getStatisList()
       this.getEcharts()
-      // this.getDetailData()
-      // this.title = '准确性-数据内容准确性'
-      // this.showModal = true
-      // this.monitorParams.pageNum = 1
-      // this.getTableData()
     },
     resetClick () {
       this.monitorParams.appId = '-1'
@@ -251,9 +418,10 @@ export default {
       this.getEcharts()
     }, 
     modalChange (modalStatus) {
-     if (!modalStatus) {
-      this.$refs.formOption.resetFields();
-     }
+      if (!modalStatus) {
+        this.detailParams.pageNum = 1
+        document.querySelector(".rolling-detail-table .ivu-table-body").scrollTo(0, 0)
+      }
     },
     selectReport (val) {
       if (val == 'DAY') {
@@ -301,7 +469,7 @@ export default {
           this.$nextTick(() => this.creatLine(obj))
         } else {
           this.showImg2 = true
-        } 
+        }
       })
       let params3 = JSON.parse(JSON.stringify(params))
       params3.modelType = '一致性'
@@ -372,26 +540,56 @@ export default {
         } 
       })
     },
-    getDetailData () {
-      let params = {
-        dateStrDate: '2022-03-01',
-        endDate: '2022-03-31'
+    showDetail (title,modelTypeText) {
+      this.title = title
+      this.detailParams = JSON.parse(JSON.stringify(this.monitorParams))
+      this.detailParams.appId= this.detailParams.appId == '-1'?'':this.detailParams.appId
+      this.detailParams.modelType = modelTypeText
+      this.detailParams.pageSize = 5
+      this.detailParams.pageNum = 1
+      let params = JSON.parse(JSON.stringify(this.detailParams))
+      if (params.hasOwnProperty('pageNum')) {
+        delete params.pageNum
+        delete params.pageSize
       }
-      this.$get('metroapi/dataQuality/report/comScores',params).then(res => {
-        if (res.httpCode == 1) {
+      console.log(params)
+      this.$get('metroapi/dataQuality/insp/trend/detail/stat',params).then(res => {
+        if (res.httpCode == 1) { 
           let obj = res.data
           obj.id = 'guage'
           this.$nextTick(() => this.creatGauge(obj))
+          this.qualityRuleSum = res.data.data[0].value
+          this.recordSum = res.data.data[1].value
+          this.abnormalRecord = res.data.data[2].value
         }
       })
+      this.$nextTick(()=> {    
+        this.$refs.detailTable.getChartsDetail(this.detailParams)
+        this.showModal = true
+      })
     },
+    // getDetailData () {
+    //   let params = {
+    //     dateStrDate: '2022-03-01',
+    //     endDate: '2022-03-31'
+    //   }
+    //   this.$get('metroapi/dataQuality/report/comScores',params).then(res => {
+    //     if (res.httpCode == 1) {
+    //       this.summaryDeatail = res.data.data
+    //       console.log(this.summaryDeatail)
+    //       let obj = res.data
+    //       obj.id = 'guage'
+    //       this.$nextTick(() => this.creatGauge(obj))
+    //     }
+    //   })
+    // },
     creatLine (lineData) {
       let toplinechart = echarts.init(document.getElementById(lineData.id));
       let seriesData = _.map(lineData.legend, (item,index)=>({
           name: lineData.legend[index], type: 'line', symbol: 'circle', symbolSize: 2,smooth: true, // 平滑曲线
-          lineStyle: { normal: { color: lineData.lineColor[index], width: 2 } },
-          itemStyle: { normal: { color: lineData.lineColor[index], borderColor: lineData.lineColor[index], borderWidth: 2 },
-          emphasis: { color: '#fff' }
+          lineStyle: {color: lineData.lineColor[index], width: 2},
+          itemStyle: { color: lineData.lineColor[index], borderColor: lineData.lineColor[index], borderWidth: 2,
+          // emphasis: { color: '#fff' }
         },
         areaStyle: { opacity:0.4,color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0.3, color: lineData.lineColor[index]}, { offset: 1, color: 'rgba(0,0,0,0)' }])},
         data: lineData.data
@@ -476,6 +674,7 @@ export default {
     },
     creatGauge(gaugeData) {
       let titleArr = this.title.split('-')
+      console.log(titleArr)
       let myChart = echarts.init(document.getElementById(gaugeData.id))
       let option = {
          series: [
@@ -487,7 +686,7 @@ export default {
               max: 100,
               progress: {
                 show: true,
-                width: 18
+                width: 10
               },
               itemStyle: {
                 color: '#4992FF'
@@ -495,48 +694,50 @@ export default {
               axisLine: {
                 lineStyle: {
                   color:[[1, '#36344E']],
-                  width: 18
+                  width: 10
                 }
               },
               axisTick: {
                 show: false
               },
               splitLine: {
-                length: 10,
+                length: 5,
+                distance: 5,
                 lineStyle: {
                   width: 2,
                   color: '#363349'
                 }
               },
               axisLabel: {
-                distance: 25,
+                distance: 15,
                 color: '#fff',
                 fontSize: 12
               },
               anchor: {
                 show: true,
                 showAbove: true,
-                size: 25,
+                size: 15,
                 itemStyle: {
-                  borderWidth: 10
+                  borderWidth: 5
                 }
               },
               title: {
-                offsetCenter: [0, '70%'],
+                offsetCenter: [0, '65%'],
                 fontSize: 12,
                 color:'#fff'
               },
               detail: {
                 valueAnimation: true,
-                fontSize: 26,
-                offsetCenter: [0, '40%'],
+                fontSize: 24,
+                offsetCenter: [0, '35%'],
                 formatter: '{value} %',
                 color: '#4992FF'
               },
               data: [
                 {
-                  value: gaugeData.scores,
-                  name: titleArr[0]+'\n\n'+titleArr[1]
+                  value: gaugeData.data[3].value,
+                  name:  `${titleArr[0]}\n\n${titleArr[1]?titleArr[1]:''}`
+                  // name: titleArr[0]+'\n\n'+titleArr[1]?titleArr[1]:''
                 }
               ]
             }
@@ -549,23 +750,6 @@ export default {
         myChart.resize()
       })
     },
-    // 获取实时大数据处理
-    // getRealTimeFirst() {
-    //   this.loading1 = true
-    //   this.$get('api/dataCenter/realTimeData', {
-    //     flag: 1
-    //   }).then(res => {
-    //     this.loading1 = false
-    //     if (res.httpCode == 1) {
-    //       this.showImg1 = false
-    //       let obj = res.data
-    //       obj.id = 'line'
-    //       this.$nextTick(() => this.creatLine(obj))
-    //     } else {
-    //       this.showImg1 = true
-    //     }
-    //   })
-    // },
   }
 };
 </script>
@@ -673,7 +857,7 @@ export default {
 .common-modal-top {
   height: 234px;
   border: 1px solid #1F4584;
-  padding: 20px;
+  padding: 15px 10px 15px 25px;
   display: flex;
 }
 .common-modal-top-left {
@@ -682,7 +866,7 @@ export default {
   align-items: center;
   height: 100%;
   width: 40%;
-  span {
+  span { 
     width: 50%;
   }
   span:nth-child(odd) {
@@ -709,11 +893,16 @@ export default {
   width: 60%;
 }
 .common-modal-content {
-  margin: 20px 0;
+  margin: 10px 0;
 }
 .common-modal-content span { 
   font-size: 16px;
   font-weight: bold;
   color: #FFFFFF;
 }
+>>> .common-modal-content .ivu-table-body {
+   max-height: 239PX;
+   overflow: hidden;
+   overflow-y: auto;
+ }
 </style>

src/views/homecomponents/DataManagement/DataRules.vue

@@ -135,7 +135,7 @@ import TabsList from '../../../components/TabsList.vue'
 import RuleStepTwo from './QualityRules/RuleStepTwo.vue'
 import RuleStepThree from './QualityRules/RuleStepThree.vue'
 import RuleStepFour from './QualityRules/RuleStepFour.vue'
-const defaultFrom = {ruleName:'',targetType:'',targetName: '',ruleDesc:'',applicationId:'',applicationName: '',equipmentTypeCode:'',field:'',expr: '',dataType:'all',dataValue:null,logicalValueDTOList:[],exprDesc: ''}
+const defaultFrom = {ruleName:'',targetType:'',targetName: '',ruleDesc:'',applicationId:'',applicationName: '',equipmentTypeName:'',field:'',expr: '',dataType:'all',dataValue:null,logicalValueDTOList:[],exprDesc: ''}
 export default {
   name: "DataRules",
   components: {
@@ -264,7 +264,7 @@ export default {
       activeClass: '',
       modalTitle: '',
       currentStep: 1,
-      formOption: {ruleName:'',targetType:'',targetName: '',ruleDesc:'',applicationId:'',applicationName: '',equipmentTypeCode:'',field:'',expr: '',dataType:'all',dataValue: null,logicalValueDTOList:[],exprDesc: ''},
+      formOption: {ruleName:'',targetType:'',targetName: '',ruleDesc:'',applicationId:'',applicationName: '',equipmentTypeName:'',field:'',expr: '',dataType:'all',dataValue: null,logicalValueDTOList:[],exprDesc: ''},
       ruleValidate: {
         ruleName: [{
           required: true,
@@ -387,7 +387,7 @@ export default {
       this.showModal = true
       // this.formOption = JSON.parse(JSON.stringify(this.rowObj));
       this.formOption = JSON.parse(JSON.stringify(row));
-      this.formOption.equipmentTypeCode = !this.formOption.equipmentTypeCode ? 0 : this.formOption.equipmentTypeCode
+      this.formOption.equipmentTypeName = !this.formOption.equipmentTypeName ? 0 : this.formOption.equipmentTypeName
     },
     delClick (row) {
       this.rowObj = row
@@ -441,7 +441,7 @@ export default {
     },
     saveRule () {
       let params = JSON.parse(JSON.stringify(this.formOption))
-      params.equipmentTypeCode = params.equipmentTypeCode== '展示全部字段' ? '': params.equipmentTypeCode
+      params.equipmentTypeName = params.equipmentTypeName== '展示全部字段' ? '': params.equipmentTypeName
       this.saveData(params)
     },
     commonOk () {
@@ -488,9 +488,9 @@ export default {
       if (obj.text == 'applicationId') {
         this.formOption.applicationId = obj.id
         this.formOption.applicationName = obj.applicationName
-        this.formOption.equipmentTypeCode = ''
-      } else if (obj.text == 'equipmentTypeCode') {
-        this.formOption.equipmentTypeCode = obj.id
+        this.formOption.equipmentTypeName = ''
+      } else if (obj.text == 'equipmentTypeName') {
+        this.formOption.equipmentTypeName = obj.id
       } else {
         this.formOption.field = obj.id
       }

src/views/homecomponents/DataManagement/QualityRules/RuleStepFour.vue

@@ -35,9 +35,7 @@
          <div v-show="ruleObj.targetName=='及时性（数据采集）' || ruleObj.targetName=='及时性（数据入库）'" class="common-form-detail-text else-detail-text">
            <Row class="common-form-detail-row">
             <Col span="3">{{ruleObj.targetName=='及时性（数据采集）' ? '数据采集' : '数据入库'}}</Col>
-            <Col span="1" class="timeliness-form-col timeliness-form-col-select">
-              <=
-            </Col>
+            <Col span="1" class="timeliness-form-col timeliness-form-col-select"><=</Col>
             <Col span="20" class="timeliness-form-col"> 
             {{ruleObj.dataValue}}ms
             </Col>

src/views/homecomponents/DataManagement/QualityRules/RuleStepTwo.vue

@@ -64,7 +64,7 @@ export default {
         pageSize: 9999
       },
       applicationId: '',
-      equipmentTypeCode: '',
+      equipmentTypeName: '',
       fieldCode: '',
       // highlightIndex:1,
       appModalData: [],
@@ -95,7 +95,7 @@ export default {
       columnsCodeModal:[
         {
           title: '字段类型',
-          key: 'equipmentTypeCode',
+          key: 'equipmentName',
           align: 'left',
           ellipsis: true,
           tooltip: true
@@ -163,33 +163,54 @@ export default {
    },
    // 根据应用获取字段类型 
     getAddCodeType (status) {
-      this.$get('metroapi/datarule/queryEquTypeByAppId', {applicationId:this.applicationId}).then(res=>{
+      let params = {
+        applicationId: this.applicationId,
+        equipmentTypeId: '',
+        keywords: '',
+        pageNum: 1,
+        pageSize: 9999
+      }
+      this.$get('metroapi/application/equipmentTypeInfo', params).then(res=>{
         if (res.httpCode == 1 ){
-          this.codeModalData = res.data
+          this.codeModalData = res.data.data
            if (status == 'changeState') { //当status等于changeState时(选择来源应用清空表格数据及选中效果)
             this.$refs.tableSource2.clearCurrentRow()
           } else {
             if (this.codeModalData && this.codeModalData.length>0) {
               this.codeModalData.forEach((item,index)=> {
-                if(item.equipmentTypeCode == this.currentObj.equipmentTypeCode) {
+                if(item.equipmentName == this.currentObj.equipmentTypeName) {
                   this.codeModalData[index]._highlight = true
-                  this.equipmentTypeCode = item.equipmentTypeCode
+                  this.equipmentTypeName = item.equipmentName
                   this.getAddField()
                 }
               })
             }
           }
+          if (this.codeModalData && this.codeModalData.length==0) {
+            this.codeModalData = []
+            this.$refs.tableSource2.clearCurrentRow()
+            if (status == 'edit') {
+              this.codeModalData = [{equipmentName: '展示全部字段'}]
+              this.codeModalData[0]._highlight = true
+              this.equipmentTypeName = '展示全部字段'
+              this.getAddField()
+            }
+            if(status == 'clickTable1') {
+              this.codeModalData = [{equipmentName: '展示全部字段'}]
+              this.codeModalData[0]._highlight = false
+            }
+          }
         } else {
           this.codeModalData = []
           this.$refs.tableSource2.clearCurrentRow()
           if (status == 'edit') {
-            this.codeModalData = [{equipmentTypeCode: '展示全部字段'}]
+            this.codeModalData = [{equipmentTypeName: '展示全部字段'}]
             this.codeModalData[0]._highlight = true
-            this.equipmentTypeCode = '展示全部字段'
+            this.equipmentTypeName = '展示全部字段'
             this.getAddField()
           }
           if(status == 'clickTable1') {
-            this.codeModalData = [{equipmentTypeCode: '展示全部字段'}]
+            this.codeModalData = [{equipmentName: '展示全部字段'}]
             this.codeModalData[0]._highlight = false
           }
         }
@@ -197,8 +218,8 @@ export default {
     },
     // 根据字段类型选择字段 
      getAddField (status) {
-      let equipmentTypeCode = this.equipmentTypeCode== '展示全部字段' ? '': this.equipmentTypeCode
-      this.$get('metroapi/datarule/queryFieldByEquTypeCode', {applicationId:this.applicationId,equipmentTypeCode:equipmentTypeCode}).then(res=>{
+      let equipmentTypeName = this.equipmentTypeName== '展示全部字段' ? '': this.equipmentTypeName
+      this.$get('metroapi/datarule/queryFieldByEquTypeName', {applicationId:this.applicationId,equipmentTypeName:equipmentTypeName}).then(res=>{
         if (res.httpCode == 1 ){
           this.fieldModalData = res.data
            if (status == 'changeState') { //当status等于changeState时(选择字段类型清空选择字段表格数据及选中效果)
@@ -220,6 +241,7 @@ export default {
       })
     },
    selectBusinessType (value) {
+     this.applicationId = ''
      this.businessParams.businessTypeId = value
      this.getAppList('changeState')
      this.codeModalData = []
@@ -231,7 +253,7 @@ export default {
       this.fieldModalData = []
       this.$refs.tableSource3.clearCurrentRow()
       this.applicationId = currentRow.id
-      this.equipmentTypeCode = ''
+      this.equipmentTypeName = ''
       this.fieldCode = ''
       this.getAddCodeType('clickTable1')
       let obj = {
@@ -241,19 +263,19 @@ export default {
       }
       this.$emit('selectTableChange',obj)
     },
-    rowClick2 (currentRow,index) {
+    rowClick2 (currentRow) {
       this.fieldModalData = []
       this.$refs.tableSource3.clearCurrentRow()
-      this.equipmentTypeCode = currentRow.equipmentTypeCode
+      this.equipmentTypeName = currentRow.equipmentName
       this.fieldCode = ''
       this.getAddField('changeState')
       let obj = {
-        id: currentRow.equipmentTypeCode,
-        text: 'equipmentTypeCode'
+        id: currentRow.equipmentName,
+        text: 'equipmentTypeName'
       }
       this.$emit('selectTableChange',obj)
     },
-    rowClick3 (currentRow,index) {
+    rowClick3 (currentRow) {
       this.fieldCode = currentRow.fieldCode
       let obj = {
         id: currentRow.fieldCode,
@@ -267,7 +289,7 @@ export default {
       this.$refs.tableSource3.clearCurrentRow()
       let obj = {
         id: 0,
-        text: 'equipmentTypeCode'
+        text: 'equipmentTypeName'
       }
      this.showClickTable2 = true
      this.$emit('selectTableChange',obj)
@@ -277,7 +299,7 @@ export default {
       if (!this.applicationId) {
         this.$Message.info('请选择来源应用')
         return false
-      } else if (!this.equipmentTypeCode){
+      } else if (!this.equipmentTypeName){
         this.$Message.info('请选择字段类型')
         return false
       } else if (this.fieldCode == ''){