数据质量报告详情

src/components/StatisticsList.vue

@@ -52,6 +52,12 @@ export default {
     w:{
       type: String,
       default: ''
+    },
+    statisParams: {
+      type: Object,
+      default: () => {
+        return {};
+      },
     }
   },
   components:{
@@ -67,7 +73,14 @@ export default {
   },
   methods: {
    getStatisList () {
-     this.$get(this.url).then(res=>{
+     // 如果对象属性值为-1，动态设置为空字符串
+    let params =JSON.parse(JSON.stringify(this.statisParams))
+    Object.entries(params).forEach(([key,value])=>{
+      if (value == '-1') {
+       params[key] = ''
+      }
+    })
+     this.$get(this.url,params).then(res=>{
         if (res.httpCode == 1){
           this.tabsData = res.data.data
         } else {

src/components/common/LoadingAnimation.vue

@@ -1,6 +1,9 @@
 <template>
     <div class="loading-animation">
-      <div class="loading-title" v-show="loadingTitle"><i class="iconfont icon-xiayibu" style="font-size:15px;margin-right:6px;"></i>{{loadingTitle}}</div>
+      <div class="loading-title" v-show="loadingTitle">
+        <span>{{loadingTitle}}</span>
+        <span class="loading-title-right">详情<Icon type="ios-arrow-forward" style="margin-left:6px"/></span>
+      </div>
       <!-- <div class="loading" :class="{'loading-has-text':loadingTitle}" :style="loadingTitle ? 'height:calc(100% -'+ height+'px)':''"> -->
       <div class="loading" :class="{'loading-has-text':loadingTitle}">
        <div class="spinner">
@@ -42,7 +45,7 @@ export default {
     },
     height: {
       type: Number,
-      default: 30
+      default: 50
     }
   },
   data() {
@@ -52,11 +55,21 @@ export default {
 </script>
 <style scoped>
 .loading-title {
-    text-align: left;
     color: #ec9c45;
-    font-size: 18px;
-    margin: 12px 0 0 14px;
+    font-size: 14px;
+    color: #FEF0F0;
     font-weight: bold;
+    height: 50px;
+    background: #14316A;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 20px;
+  }
+  .loading-title-right {
+    color: #D7790C;
+    font-size: 12px;
+    cursor: pointer;
   }
 .loading {
   height: 100%;
@@ -73,12 +86,13 @@ export default {
   margin: auto; */
 }
 .loading-has-text {
-  height: calc(100% - 30px);
+  height: calc(100% - 50px);
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
-  margin-top: 30px;
+  background: #06214D;
+  border: 1px solid #204384;
 }
 .loading-text {
   font-size: 16PX;

src/components/common/NoData.vue

@@ -1,10 +1,16 @@
 <template>
     <div>
       <div class="nodata" :style="{backgroundColor:backgroundColor}">
-        <div class="title" v-show="nodataTitle"><i class="iconfont icon-xiayibu" style="font-size:15px;margin-right:6px;"></i>{{nodataTitle}}</div>
-        <div class="nodata-img" :class="{'show-title-img': !nodataTitle}">
-             <!-- <img src="../../assets/images/noData.png"> -->
-        </div>     
+        <div class="title" v-show="nodataTitle">
+          <span>{{nodataTitle}}</span>
+          <span class="title-right">详情<Icon type="ios-arrow-forward" style="margin-left:6px"/></span>
+        </div>
+        <div class="nodata-img">
+          <img src="../../assets/images/noData.png">
+        </div> 
+        <!-- <div class="nodata-img" :class="{'show-title-img': !nodataTitle}">
+          <img src="../../assets/images/noData.png">
+        </div>      -->
       </div>
     </div>
 </template>
@@ -18,7 +24,8 @@ export default {
         default: () => {
           return ''
         }
-      }
+      },
+      id: ''
     },
 }
 </script>
@@ -29,15 +36,25 @@ export default {
     /* background-color: #081c43 !important; */
   }
   .title {
-    text-align: left;
     color: #ec9c45;
-    font-size: 18px;
+    font-size: 14px;
+    color: #FEF0F0;
     font-weight: bold;
-    padding: 12px 0 0 14px;
+    height: 50px;
+    background: #14316A;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 20px;
+  }
+  .title-right {
+    color: #D7790C;
+    font-size: 12px;
+    cursor: pointer;
   }
   .nodata-img {
     position: relative;
-    height: calc(100% - 30px);
+    height: calc(100% - 50px);
     display: flex;
     justify-content: center;
     align-items: center;

src/components/common/RollingDetailTable.vue

@@ -12,7 +12,7 @@
   </div>
 </template>
 <script>
-import _ from 'lodash'
+import _ from 'lodash' //Lodash之throttle（节流）与debounce（防抖）
 export default {
   props: {
     columns1: { // 表格表头

src/login/DownAllQualityReport.vue

@@ -9,7 +9,7 @@
         <div class="header-subtitle">
           <span>数据范围：全部</span>
           <span>报告类型：{{queryParams.reportClassName}}</span>
-           <span v-if="queryParams.reportClassName == '日报'">时间范围：{{queryParams.beginDate}}</span>
+           <span v-if="queryParams.reportClassName == '日报' || queryParams.reportClassName == '年报'">时间范围：{{queryParams.beginDate}}</span>
           <span v-else>时间范围：{{queryParams.beginDate}}~{{queryParams.endDate}}</span>
         </div>
       </div>
@@ -1367,18 +1367,6 @@ export default {
             }
           },
         },
-        // legend: {
-        //   orient: "horizontal",
-        //   top: '4%',
-        //   x: "center",
-        //   itemWidth: 10,
-        //   itemHeight: 10,
-        //   textStyle: {
-        //     color: "#ffffff",
-        //     fontSize: 12
-        //   },
-        //   data: pieData.legend
-        // },
         tooltip: {
           trigger: "item",
           labelLine: false,
@@ -1394,7 +1382,6 @@ export default {
           }
         },
         series: [{
-          color: pieData.color,
           type: 'pie',
           radius: ['50%', '70%'],
           center: ['50%', '50%'],
@@ -1411,7 +1398,14 @@ export default {
                   return ''
                 }
               }
-            },
+          },
+          itemStyle: {
+            normal: {
+              color: function (params) {
+               return pieData.color[params.dataIndex]
+              }
+            }
+          },
           data: pieData.data,
         }, ]
       };

src/login/DownAppQualityReport.vue

@@ -9,7 +9,7 @@
         <div class="header-subtitle">
           <span>数据范围：{{queryParams.appName}}</span>
           <span>报告类型：{{queryParams.reportClassName}}</span>
-          <span v-if="queryParams.reportClassName == '日报'">时间范围：{{queryParams.beginDate}}</span>
+          <span v-if="queryParams.reportClassName == '日报' || queryParams.reportClassName == '年报'">时间范围：{{queryParams.beginDate}}</span>
           <span v-else>时间范围：{{queryParams.beginDate}}~{{queryParams.endDate}}</span>
         </div>
       </div>
@@ -1044,7 +1044,6 @@ export default {
           }
         },
         series: [{
-          color: pieData.color,
           type: 'pie',
           radius: ['50%', '70%'],
           center: ['50%', '50%'],
@@ -1061,7 +1060,14 @@ export default {
                   return ''
                 }
               }
-            },
+          },
+          itemStyle: {
+            normal: {
+              color: function (params) {
+               return pieData.color[params.dataIndex]
+              }
+            }
+          },
           data: pieData.data,
         }, ]
       };

src/login/Login.vue

@@ -87,7 +87,7 @@ export default {
           //   userName: userName,
           //   vCode: 111111
           // }
-          // this.$store.dispatch('userLogin', params).then(() => {
+          // this.$store.dispatch('userLogin', params).then(() => { //直接调用vuex里的登录方法 Action 通过 store.dispatch 方法触发
           //   utils.storage("sw_user", {
           //     user: userName,
           //     menus: this.$store.state.user.userInfo.menus,

src/main.js

@@ -7,7 +7,6 @@ import 'view-design/dist/styles/iview.css';
 import './assets/styles/common.css';
 import './assets/iconfont/iconfont.css';
 import store from './store'
-// import 'lib-flexible'
 import {get,post,patch,put,deletefn,axiosAll} from './libs/http.js';
 //定义全局变量
 Vue.prototype.$post = post

src/store/modules/user.js

@@ -29,9 +29,8 @@ import axios from 'axios'
 const state =  { // state状态树 保留变量数据 （其他页面调用state里的值是 this.$store.state.user.userInfo）
   userInfo: JSON.parse(sessionStorage.getItem('userInfo'))
 }
-const mutations = { //更改 Vuex 的 store 中的状态的唯一方法是提交 mutation
+const mutations = { //更改 Vuex 的 store 中的状态的唯一方法是提交 mutation (mutation 必须是同步函数)
   userSign (state, userInfo) {
-    console.log(userInfo)
     state.userInfo = userInfo
     sessionStorage.setItem('userInfo', JSON.stringify(userInfo))
   },
@@ -44,13 +43,12 @@ const actions = { // Action 类似于 mutation. Action 提交的是 mutation，
       if (httpCode !== 1) {
         throw new Error(msg)
       }
-      console.log(data)
       commit('userSign', data)
     })
   },
 }
 const getters = {
-  getMenuList: state => state.userInfo.menus //store 中的 state 中派生出一些状态
+  getMenuList: state => state.userInfo.menus //store 中的 state 中派生出一些状态 通过属性访问this.$store.getters.getMenuList 也可以通过方法访问
 }
 
 export default {

src/views/homecomponents/DataManagement/DataMonitor.vue

@@ -1,24 +1,719 @@
 <template>
-  <div class="container">
-    数据质量监测
+  <div class="content-main-manage">
+     <div class="content-main">
+     <div class="content-body-wrap">
+       <div class="content-body">
+          <div class="search-list">
+            <div class="search-left">
+              <Form class="common-form common-form-list" ref="monitorParams" :model="monitorParams" inline>
+                 <FormItem label="" prop="appId">
+                  <Select v-model="monitorParams.appId" placeholder="来源应用">
+                    <Option v-for="item in appData" :value="item.id" :key="item.id">{{ item.appName}}</Option>
+                  </Select>
+                </FormItem>
+                <FormItem label="" prop="dateType">
+                  <Select v-model="monitorParams.dateType" placeholder="请选择报告类型" @on-change="selectReport">
+                      <Option v-for="item in reportList" :value="item.value" :key="item.value">{{ item.label }}</Option>
+                    </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>
+                </FormItem>
+                <FormItem label="" >
+                  <Button type="primary" class="common-btn-search" @click="searchClick">
+                    <Icon type="ios-search" style="margin-right:4px;font-size: 16px"/> 筛选
+                  </Button> 
+                  <Button type="primary" class="common-btn-search" style="margin-left:10px" @click="resetClick">
+                    <Icon type="ios-search" style="margin-right:4px;font-size: 16px"/> 重置
+                  </Button>
+                </FormItem>
+              </Form>
+            </div>
+            </div> 
+            <statistics-list :tabsInitData="tabsInitData" :statisParams="monitorParams" :tabsTitleColor="tabsTitleColor" :unitArr="unitArr" :tabsIcon="tabsIcon" url="metroapi/dataQuality/insp/statistical" ref="statistics"></statistics-list>
+           <div class="manage-main-center">
+              <Row :gutter="16">
+              <Col :span="8">
+                <loading-animation class="line-loading" loadingTitle="准确性-数据内容准确性" v-if="loading1"></loading-animation>
+                <div v-else class="line-loading">
+                  <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>
+                    </div>
+                    <div id="line1" class="line-loading-echarts"></div>
+                  </div>
+                  <no-data v-show="showImg1" class="line-loading no-title-data" nodataTitle="准确性-数据内容准确性"></no-data>
+                </div>
+              </Col>
+              <Col :span="8">
+               <loading-animation class="line-loading" loadingTitle="数据一致性-数据类型一致性" v-if="loading2"></loading-animation>
+                <div v-else class="line-loading">
+                  <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>
+                    </div>
+                    <div id="line2" class="line-loading-echarts"></div>
+                  </div>
+                  <no-data v-show="showImg2" class="line-loading no-title-data" nodataTitle="数据一致性-数据类型一致性"></no-data>
+                </div>
+              </Col>
+              <Col :span="8">
+               <loading-animation class="line-loading" loadingTitle="数据一致性-处理前后一致性" v-if="loading3"></loading-animation>
+               <div v-else class="line-loading">
+                  <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>
+                    </div>
+                    <div id="line3" class="line-loading-echarts"></div>
+                  </div>
+                  <no-data v-show="showImg3" class="line-loading no-title-data" nodataTitle="数据一致性-处理前后一致性"></no-data>
+                </div>
+              </Col>
+            </Row>
+            <Row :gutter="16" style="padding-top:10px">
+              <Col :span="8">
+               <loading-animation class="line-loading" loadingTitle="及时性-数据采集" v-if="loading4"></loading-animation>
+               <div v-else class="line-loading">
+                  <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>
+                    </div>
+                    <div id="line4" class="line-loading-echarts"></div>
+                  </div>
+                  <no-data v-show="showImg4" class="line-loading no-title-data" nodataTitle="及时性-数据采集"></no-data>
+                </div>
+              </Col>
+              <Col :span="8">
+               <loading-animation class="line-loading" loadingTitle="及时性-数据入库" v-if="loading5"></loading-animation>
+               <div v-else class="line-loading">
+                  <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>
+                    </div>
+                    <div id="line5" class="line-loading-echarts"></div>
+                  </div>
+                  <no-data v-show="showImg5" class="line-loading no-title-data" nodataTitle="及时性-数据入库"></no-data>
+                </div>
+              </Col>
+              <Col :span="8">
+               <loading-animation class="line-loading" loadingTitle="数据完整性" v-if="loading6"></loading-animation>
+               <div v-else class="line-loading">
+                  <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>
+                    </div>
+                    <div id="line6" class="line-loading-echarts"></div>
+                  </div>
+                  <no-data v-show="showImg6" class="line-loading no-title-data" nodataTitle="数据完整性"></no-data>
+                </div>
+              </Col>
+            </Row>
+           </div>
+       </div>
+     </div>
+    </div>
+    <Modal
+      v-model="showModal"
+      :title="title"
+      width="40"
+      ref="modalGrag"
+      draggable
+      reset-drag-position
+      :mask-closable="false"
+      footer-hide
+      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>监测记录</span>
+            <span class="modal-top-left-color2">445544条</span>
+            <span>异常记录</span>
+            <span class="modal-top-left-color3">44条</span>
+          </div>
+          <div id="guage" class="common-modal-top-right"></div>
+        </div>
+        <div class="common-modal-content">
+          <span>监测异常记录</span>
+        </div>
+      </div>
+    </Modal>
   </div>
 </template>
 <script>
+import * as echarts from "echarts"
+import StatisticsList from '../../../components/StatisticsList.vue'
+import moment from 'moment'
 export default {
   name: "DataMonitor",
-  components:{
+  components: {
+    StatisticsList
   },
   data() {
     return {
+      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') },
+      ],
+      tabsTitleColor:['#45F2FD', '#EBF310', '#54D593', '#FD7545'],
+      unitArr: ['个','种','条','种'],
+      tabsInitData: [
+        { name: '监测覆盖应用', value: 0},
+        { name: '覆盖业务类型', value: 0},
+        { name: '监测规则', value: 0},
+        { name: '规则维度', value: 0},
+      ],
+      reportList: [{label: "日报",value: 'DAY'},{label: "月报",value: 'MONTH'},{label: "年报",value: 'YEAR'}],
+      monitorParams: {
+        appId: '-1',
+        dateType: 'DAY',
+        dateStr: moment(new Date(new Date().getTime())).format('YYYY-MM-DD')
+      },
+      applicationParams: {
+        level: '',
+        lineId: '',
+        stationId: '',
+        equipmentCheck: '',
+        instrumentCheck: '',
+        pageNum: 1,
+        pageSize: 9999
+      },
+      appData: [],
+      loading1: true,
+      loading2: true,
+      loading3: true,
+      loading4: true,
+      loading5: true,
+      loading6: true,
+      showImg1: false,
+      showImg2: false,
+      showImg3: false,
+      showImg4: false,
+      showImg5: false,
+      showImg6: false,
+      showModal: false,
+      title: '',
+    //   optionsDay: {
+    //     disabledDate(date) {
+    //       return date && date.valueOf() < Date.now() - 86400000 //可选择今日起之后的日期
+    //     }
+    //   },
+    //  optionsMonth: {
+    //     disabledDate(date) {
+    //       var dateNow = new Date() ; //之前月份禁用
+    //       return date && date.valueOf() < dateNow.setMonth(dateNow.getMonth()-1);
+    //     }
+    //   },
     };
   },
   mounted() {
+    this.getType()
+    this.getEcharts()
   },
   methods: {
-   
+     getType  () {
+      // 指标类型数据
+      this.$get('metroapi/application/info/list', this.applicationParams).then(res=>{
+        if (res.httpCode == 1 ){
+          this.appData = res.data.data
+          this.appData.unshift({ id: '-1', appName: '来源应用' })
+        } else {
+          this.appData = []
+        }
+      })
+    },
+    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'
+      this.monitorParams.dateType = 'DAY'
+      this.monitorParams.dateStr =  moment(new Date(new Date().getTime())).format('YYYY-MM-DD')
+      this.$refs.statistics.getStatisList()
+      this.getEcharts()
+    }, 
+    modalChange (modalStatus) {
+     if (!modalStatus) {
+      this.$refs.formOption.resetFields();
+     }
+    },
+    selectReport (val) {
+      if (val == 'DAY') {
+        this.monitorParams.dateStr = moment(new Date(new Date().getTime())).format('YYYY-MM-DD')
+      } else if (val == 'MONTH') {
+        this.monitorParams.dateStr = moment(new Date(new Date().getTime())).format('YYYY-MM')
+      } else {
+        this.monitorParams.dateStr = moment(new Date(new Date().getTime())).format('YYYY')
+      } 
+    },
+    changeDate (date) {
+     this.monitorParams.dateStr = date
+    },
+    getEcharts () {
+      let params = JSON.parse(JSON.stringify(this.monitorParams))
+      params.appId= params.appId == '-1'?'':params.appId
+      params.modelType = '准确性'
+      this.loading1 = true
+      this.$get('metroapi/dataQuality/insp/trend',params).then(res=>{
+        this.loading1 = false
+        if (res.httpCode == 1 ){
+          this.showImg1 = false
+          let obj = res.data
+          obj.id = 'line1'
+          obj.legend = ['']
+          obj.lineColor = ['#2F9B34']
+          obj.unit = '%'
+          this.$nextTick(() => this.creatLine(obj))
+        } else {
+          this.showImg1 = true
+        } 
+      })
+      let params2 = JSON.parse(JSON.stringify(params))
+      params2.modelType = '一致性'
+      this.loading2 = true
+      this.$get('metroapi/dataQuality/insp/trend',params2).then(res=>{
+        this.loading2 = false
+        if (res.httpCode == 1 ){
+          this.showImg2 = false
+          let obj = res.data
+          obj.id = 'line2'
+          obj.legend = ['']
+          obj.lineColor = ['#F18404']
+          obj.unit = '%'
+          this.$nextTick(() => this.creatLine(obj))
+        } else {
+          this.showImg2 = true
+        } 
+      })
+      let params3 = JSON.parse(JSON.stringify(params))
+      params3.modelType = '一致性'
+      this.loading3 = true
+      this.$get('metroapi/dataQuality/insp/trend',params3).then(res=>{
+        this.loading3 = false
+        if (res.httpCode == 1 ){
+          this.showImg3 = false
+          let obj = res.data
+          obj.id = 'line3'
+          obj.legend = ['']
+          obj.lineColor = ['#7A70D6']
+          obj.unit = '%'
+          this.$nextTick(() => this.creatLine(obj))
+        } else {
+          this.showImg3 = true
+        } 
+      })
+      let params4 = JSON.parse(JSON.stringify(params))
+      params4.modelType = '及时性（数据采集）'
+      this.loading4 = true
+      this.$get('metroapi/dataQuality/insp/trend',params4).then(res=>{
+        this.loading4 = false
+        if (res.httpCode == 1 ){
+          this.showImg4 = false
+          let obj = res.data
+          obj.id = 'line4'
+          obj.legend = ['']
+          obj.lineColor = ['#FB638B']
+          obj.unit = '%'
+          this.$nextTick(() => this.creatLine(obj))
+        } else {
+          this.showImg4 = true
+        } 
+      })
+      let params5 = JSON.parse(JSON.stringify(params))
+      params5.modelType = '及时性（数据入库）'
+      this.loading5 = true
+      this.$get('metroapi/dataQuality/insp/trend',params5).then(res=>{
+        this.loading5 = false
+        if (res.httpCode == 1 ){
+          this.showImg5 = false
+          let obj = res.data
+          obj.id = 'line5'
+          obj.legend = ['']
+          obj.lineColor = ['#54A4F8']
+          obj.unit = '%'
+          this.$nextTick(() => this.creatLine(obj))
+        } else {
+          this.showImg5 = true
+        } 
+      })
+      let params6 = JSON.parse(JSON.stringify(params))
+      params6.modelType = '完整性'
+      this.loading6 = true
+      this.$get('metroapi/dataQuality/insp/trend',params6).then(res=>{
+        this.loading6 = false
+        if (res.httpCode == 1 ){
+          this.showImg6 = false
+          let obj = res.data
+          obj.id = 'line6'
+          obj.legend = ['']
+          obj.lineColor = ['#EBF310']
+          obj.unit = '%'
+          this.$nextTick(() => this.creatLine(obj))
+        } else {
+          this.showImg6 = 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) {
+          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' }
+        },
+        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
+      }))
+      let toplineoption = {
+        legend: {
+          top: '5%', left: 'center', itemWidth: 10, itemHeight: 10, itemGap: 25,
+          textStyle: { color: '#fff', fontSize: 12 },
+          data: lineData.legend
+        },
+        tooltip: { trigger: "axis",
+          confine: true,
+          backgroundColor: '#011235',
+          borderWidth: 0,
+          extraCssText: 'opacity:0.8',
+          textStyle: {
+            color: '#fff'
+          },
+        formatter: function (params) {
+          let res = ''
+          params.forEach((item,i) => {
+            res += '<div style="display: flex;align-items:center;justify-content:space-between"><span>'+ item.marker + item.seriesName + '：</span><span>' +  item.value + lineData.unit+'</span></div> '
+          })
+          return params[0].name + res
+        }
+        },
+        grid: {
+          top: '10%', 
+          left: "6%",
+          right: "6%",
+          bottom: "4%",
+          containLabel: true
+        },
+        xAxis: [{
+          type: 'category',
+          data: lineData.category,
+          boundaryGap: false,
+          axisLine: {
+            lineStyle: {
+              color: '#00479D',
+              width: 1
+            }
+          },
+          axisLabel: {
+            color: '#fff',
+          },
+          axisTick: {
+            alignWithLabel: true
+          }
+        }],
+        yAxis: [{
+          type: 'value',
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: '#00479D',
+              width: 1
+            }
+          },
+          axisTick: {
+            show: true
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              type: "solid",
+              width: 1,
+              color: "#153068"
+            }
+          },
+          axisLabel: {
+            show: true,
+            color: '#fff'
+          }
+        }],
+        series: seriesData
+      }
+      toplinechart.resize()
+      toplinechart.clear()
+      toplinechart.setOption(toplineoption)
+      window.addEventListener("resize", function () { toplinechart.resize() })
+    },
+    creatGauge(gaugeData) {
+      let titleArr = this.title.split('-')
+      let myChart = echarts.init(document.getElementById(gaugeData.id))
+      let option = {
+         series: [
+            {
+              type: 'gauge',
+              center: ['55%', '55%'],
+              radius:'110%',
+              min: 0,
+              max: 100,
+              progress: {
+                show: true,
+                width: 18
+              },
+              itemStyle: {
+                color: '#4992FF'
+              },
+              axisLine: {
+                lineStyle: {
+                  color:[[1, '#36344E']],
+                  width: 18
+                }
+              },
+              axisTick: {
+                show: false
+              },
+              splitLine: {
+                length: 10,
+                lineStyle: {
+                  width: 2,
+                  color: '#363349'
+                }
+              },
+              axisLabel: {
+                distance: 25,
+                color: '#fff',
+                fontSize: 12
+              },
+              anchor: {
+                show: true,
+                showAbove: true,
+                size: 25,
+                itemStyle: {
+                  borderWidth: 10
+                }
+              },
+              title: {
+                offsetCenter: [0, '70%'],
+                fontSize: 12,
+                color:'#fff'
+              },
+              detail: {
+                valueAnimation: true,
+                fontSize: 26,
+                offsetCenter: [0, '40%'],
+                formatter: '{value} %',
+                color: '#4992FF'
+              },
+              data: [
+                {
+                  value: gaugeData.scores,
+                  name: titleArr[0]+'\n\n'+titleArr[1]
+                }
+              ]
+            }
+          ]
+        };
+      myChart.resize()
+      myChart.clear()
+      myChart.setOption(option)
+      window.addEventListener("resize", function() {
+        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>
 <style scoped lang="stylus">
-
+.content-main-manage {
+  overflow: hidden;
+  height: calc(100% - 50px);
+  width: 100%;
+}
+.content-main {
+  width: 100%;
+  height: 100%;
+}
+.content-body-wrap {
+  width: 100%;
+  height: 100%;
+  background: #06214d;
+  padding: 10px;
+}
+.content-body {
+  height: 100%;
+  position: relative;
+}
+.search-list {
+  display: flex;
+  justify-content: space-between;
+  padding: 0 0 15px 0;
+}
+.search-left {
+  display: flex;
+  align-items: center;
+   .ivu-select {
+     width: 150px;
+     height: 32px;
+   }
+   .ivu-select-single .ivu-select-selection {
+     height: 100%;
+   }
+    >>> .ivu-input {
+     width: 150px;
+     height: 32px;
+   }
+    >>> .ivu-date-picker-editor .ivu-input {
+     width: 150px;
+   }
+    >>> .ivu-input-prefix, >>> .ivu-input-suffix {
+     height: 32px;
+     line-height: 32px;
+   }
+}
+>>> .common-form-list .ivu-form-item {
+ margin-bottom: 0px;
+}
+.manage-main-center {
+  width: 100%;
+  height: calc(100% - 165px);
+  padding-top: 10px;
+}
+/* 对话框里的input里的placeholder样式修改 */
+/deep/ .ivu-input::-webkit-input-placeholder , /deep/ .ivu-input-number-input::-webkit-input-placeholder{
+  color: #718EBD;
+}
+/deep/ .ivu-input::-moz-placeholder, /deep/ .ivu-input-number-input::-webkit-input-placeholder{   /* Mozilla Firefox 19+ */
+  color: #718EBD;
+}
+/deep/ .ivu-input::-moz-placeholde, /deep/ .ivu-input-number-input::-webkit-input-placeholderr{    /* Mozilla Firefox 4 to 18 */
+ color: #718EBD;
+}
+/deep/ .ivu-input::-ms-input-placeholder, /deep/ .ivu-input-number-input::-webkit-input-placeholder{  /* Internet Explorer 10-11 */
+  color: #718EBD;
+}
+>>> .ivu-row {
+  height: 50%;
+}
+.line-loading {
+  height: 100%;
+}
+.manage-title {
+   color: #ec9c45;
+    font-size: 14px;
+    color: #FEF0F0;
+    font-weight: bold;
+    height: 50px;
+    background: #14316A;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 20px;
+    .title-right {
+    color: #D7790C;
+    font-size: 12px;
+    cursor: pointer;
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+.line-loading-echarts {
+  height: calc(100% - 50px);
+  border: 1px solid #204384;
+}
+.no-title-data {
+  border: 1px solid #204384;
+}
+.common-modal-top {
+  height: 234px;
+  border: 1px solid #1F4584;
+  padding: 20px;
+  display: flex;
+}
+.common-modal-top-left {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  height: 100%;
+  width: 40%;
+  span {
+    width: 50%;
+  }
+  span:nth-child(odd) {
+    color: #FFFFFF;
+    font-size: 16px;
+  }
+  span:nth-child(even) {
+   text-align: right;
+   font-size: 30px;
+   font-weight: bold;
+  }
+  .modal-top-left-color1 {
+    color:#DAA924;
+  }
+  .modal-top-left-color2 {
+    color:#24DA93;
+  }
+  .modal-top-left-color3 {
+    color:#F84C78;
+  }
+}
+.common-modal-top-right {
+  height: 100%;
+  width: 60%;
+}
+.common-modal-content {
+  margin: 20px 0;
+}
+.common-modal-content span { 
+  font-size: 16px;
+  font-weight: bold;
+  color: #FFFFFF;
+}
 </style>

src/views/homecomponents/DataManagement/DataReport.vue

@@ -7,7 +7,7 @@
           <div class="search-list">
             <div class="search-left">
               <Form class="common-form common-form-list" ref="tableParams" :model="tableParams" inline>
-                 <FormItem label="" prop="dataRange">
+                 <FormItem label="" prop="appId">
                   <Select v-model="tableParams.appId" placeholder="来源应用">
                     <Option v-for="item in appData" :value="item.id" :key="item.id">{{ item.appName}}</Option>
                   </Select>
@@ -52,8 +52,8 @@
        </div>
      </div>
     </div>
-      <down-all-quality-report ref="report" class="down-report"></down-all-quality-report>
-      <down-app-quality-report ref="appReport" class="down-report"></down-app-quality-report>
+    <down-all-quality-report ref="report" class="down-report"></down-all-quality-report>
+    <down-app-quality-report ref="appReport" class="down-report"></down-app-quality-report>
   </div>
 </template>
 <script>
@@ -63,8 +63,8 @@ import DownAppQualityReport from '../../../login/DownAppQualityReport.vue';
 export default {
   name: "DataReport",
   components: {
-      StatisticsList,DownAllQualityReport,DownAppQualityReport
-    },
+    StatisticsList,DownAllQualityReport,DownAppQualityReport
+  },
   data() {
     return {
       tabsIcon: [
@@ -81,11 +81,10 @@ export default {
         { name: '数据质量月报', value: 0},
         { name: '数据质量年报', value: 0},
         { name: '平台数据质量报告', value: 0},
-        { name: '应用数据质量报告', value: 0}
+        { name: '应用数据质量报告', value: 0},
       ],
       loading: true,
       reportList: [{label: "日报",value: 'DAY'},{label: "月报",value: 'MONTH'},{label: "年报",value: 'YEAR'}],
-      targetTypeNameList: [],
       tableParams: {
         appId: '',
         reportClass: '',

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

@@ -25,14 +25,14 @@
     <Col :span="12">
     <div class="modal-step2-title modal-rule-detail"><span class="modal-step2-star">* </span>配置规则</div>
        <div class="modal-step2-body modal-step2-body-fixed common-scroll">
-         <div v-show="ruleObj.targetName=='完整性'" class="common-form-detail-text">
+         <div v-show="ruleObj.targetName=='完整性'" class="common-form-detail-text else-detail-text">
           不能是字符串null、NULL、无、空格，不能是空
          </div>
-         <div v-show="ruleObj.targetName=='一致性'" class="common-form-detail-text">
+         <div v-show="ruleObj.targetName=='一致性'" class="common-form-detail-text else-detail-text">
           <div class="common-form-detail-row">数据处理前字段值 = 数据处理后字段</div>
           <div class="common-form-detail-row">数据类型为 {{ruleObj.dataType == 'all' ? '任意': ruleObj.dataType}}</div>
          </div>
-         <div v-show="ruleObj.targetName=='及时性（数据采集）' || ruleObj.targetName=='及时性（数据入库）'" class="common-form-detail-text">
+         <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">
@@ -43,7 +43,7 @@
             </Col>
           </Row>
          </div>
-         <div v-show="ruleObj.targetName=='准确性'" class="common-form-detail-text"> 
+         <div v-show="ruleObj.targetName=='准确性'" class="common-form-detail-text else-detail-text"> 
           <Row v-for="(item, index) in ruleObj.logicalValueDTOList" :key="index" class="common-form-detail-row">
             <Col span="3">条件{{index+1}}：</Col>
             <Col span="5">{{ruleObj.field}}</Col>
@@ -122,9 +122,12 @@ export default {
   overflow-y: auto;
 }
 .common-form-detail-text {
-  color: #fff;
+  color: #0180e1;
   font-size: 14PX;
 }
+.else-detail-text {
+  color: #fff;
+}
 .common-form-detail-row {
   margin-bottom: 20px;
   line-height: 32px;

src/views/homecomponents/Head.vue

@@ -46,7 +46,7 @@
 </template>
 <script>
 import utils from '../../libs/utils';
-//...mapState({...}) 将多个对象合并为一个 并且将vuex中的this.$store.user.userInfo 映射到this.userInfo (this -> vue)上面来
+//...mapState({...}) 辅助函数（需要获取多个状态的时候使用） 将多个对象合并为一个 并且将vuex中的this.$store.user.userInfo 映射到this.userInfo (this -> vue)上面来
 // mapMutations 其实跟mapState 的作用是类似的，将组件中的 methods 映射为 store.commit 调用 如@click="sign"
 // mapActions, action的一个辅助函数，将组件的 methods 映射为 store.dispatch 调用 this.userLogin()
 // mapGetter 仅仅是将 store 中的 getter 映射到局部计算属性 userInfo
@@ -66,11 +66,11 @@ export default {
     };
   },
 //   computed: {
-//     ...mapState({
-//     userInfo: 'userInfo'
+//     ...mapState({ //使用对象展开运算符将此对象混入到外部对象中
+//     userInfo: 'userInfo' //mapState等这种辅助函数的时候，前面的方法名和获取的属性名是一致的 传字符串参数 'userInfo' 等同于 `state => state.userInfo` 也可以使用箭头函数
 //     }),
-//     ...mapGetters({
-//     getMenuList: 'getMenuList' // getToDo 不是字符串，对应的是getter里面的一个方法名字 然后将这个方法名字重新取一个别名 todosALise
+//     ...mapGetters({ //辅助函数
+//     getMenuList: 'getMenuList' // getMenuList 不是字符串，对应的是getter里面的一个方法名字 然后将这个方法名字重新取一个别名 getMenuList
 //     })
 //  },
   watch: {
@@ -126,7 +126,7 @@ export default {
     // this.userLogin() // 通过mapActions 触发mutation 从而commit ，改变state的值
 
     // let params = {userId: 75,menus: []}
-    // this.$store.commit('userSign',params); 重新调用mutations的userSign方法
+    // this.$store.commit('userSign',params); 重新调用mutations的userSign方法,触发状态变更 再次强调，我们通过提交 mutation 的方式，而非直接改变 this.$store.state.user.userInfo，是因为我们想要更明确地追踪到状态的变化
   },
   mounted() {
     // this.menus = this.getMenuList // vuex里保存菜单的写法 获取菜单

src/views/homecomponents/SystemSettings/UserManagementIndex.vue

@@ -769,7 +769,7 @@ export default {
   color: #85A3D4;
 }
 .common-form-detail-text {
-  color: #fff;
+  color: #0180e1;
   font-size: 14PX;
 }
 /* 对话框里的input里的placeholder样式修改 */