内审不符合项列表+统计

src/router/routes.js

@@ -111,6 +111,15 @@ const frameOut = [
     },
     component: _import('/viewFile')
   },
+  //内审不符合项统计的跳转
+  {
+    path: '/inconformity',
+    name: 'inconformity',
+    meta: {
+      title: '不符合项统计',
+    },
+    component: _import('/warehouse')
+  },
 /*  */  {
     path: '/register',
     name: 'register',

src/views/demo/yangPin/yangPinShuJu/AnnualStatus.vue

@@ -121,34 +121,32 @@ export default {
 }
 </script>
 
-<style lang="less" >
-* border,body{
+<style lang="less" scoped>
+*body{
   padding: 0px;
   margin: 0px;
 }
-  .annualStatus{
-    width: 400px;
-    height: 416px;
+.annualStatus{
+  width: 100%;
+  height: 100%;
+  #dv-border-box-7{
+    background-size: 100% 100%;
     display: flex;
-    flex-direction:cloumn;
-    flex-wrap :wrap;
-    //  background-color: rgb(25, 97, 156);
-    overflow: hidden;
-     
-      .annualStatus_title{
-        width: 100%;
-        height: 50px;
-        line-height: 50px;
-        text-align: center;
-        // background-color: rgb(25, 97, 156);
-        font-weight: 600;
-        font-size: 20px;
-        color: '#fff';
-      }
-      .annualStatus_content{
-        width: 100%;
-        height: 350px;
-        // background-color: red;
-      }
-    }
+    flex-direction:column;
+    align-content:space-between;
+  }
+  .annualStatus_title{
+    width: 100%;
+    height: 50px;
+    line-height: 50px;
+    text-align: center;
+    font-weight: 600;
+    font-size: 20px;
+    color: '#fff';
+  }
+  .annualStatus_content{
+    width: 100%;
+    height: calc(100% - 50px);
+  } 
+}
 </style>

src/views/demo/yangPin/yangPinShuJu/EntrustNumber.vue

@@ -1,315 +1,359 @@
 <template>
   <div class="entrustNumber" >
-   <!-- 委托样品情况 -->
-       <dv-border-box-7  backgroundColor="rgba(6, 30, 93, 0.5)" >
-         <div class="entrustNumber_title">
-           <span class="demonstration">委托样品情况</span>
-           <el-date-picker
-           class="chooseMonth"
-             v-model="NowTime"
-             type="month"
-           
-             @change="changeTime"
-             placeholder="请选择时间">
-           </el-date-picker>
-         </div>
- 
-         <div class="entrustNumber_content" ref="Number_refs"></div>
-     </dv-border-box-7>       
-    </div>
-   
-     
- </template>
- 
- <script>
+  <!-- 委托样品情况 -->
+      <dv-border-box-7  backgroundColor="rgba(6, 30, 93, 0.5)" >
+        <div class="entrustNumber_title">
+          <span class="demonstration">委托样品情况</span>
+          <el-date-picker
+            class="chooseMonth"
+            v-model="NowTime"
+            type="month"
+            @change="changeTime"
+            format="yyyy-MM" 
+            value-format="yyyy-MM"
+            placeholder="请选择时间">
+          </el-date-picker>
+        </div>
+        <div class="entrustNumber_content" ref="Number_refs"></div>
+    </dv-border-box-7>       
+  </div> 
+</template>
+
+<script>
  import curdPost from '@/business/platform/form/utils/custom/joinCURD.js'
- export default {
-   data(){ 
-     return{
-       NowTime: '',
-       entrustNumber:null,
-       //已委托未收到样品数据
-       notReceivedNumber:[],
-       //已收到样品数据
-       received:[],
-       //不合格样品数据
-       unqualifiedData:[],
-       //留样样品数据
-       retentionData:[],
-       
- 
- }
-   },
-   created(){
-     this.getNowTime()
-     this.getNotReceivedData()
-     this.getReceivedData()
-     this.getUnqualifiedData()
-     this.getRetentionData()
-   },
-   mounted() {
-     //初始化组件
-     this.entrustNumberInit();
-   },
- methods:{
-   //样品相关数据时间控件默认显示当前时间
-   getNowTime(){
-       const nowDate = new Date();
-       const date = {
-           year: nowDate.getFullYear(),
-           month: nowDate.getMonth() + 1,
-       }
-       this.NowTime = date.year + '-' + date.month 
-     },
-     //用户手动查看某月份 的 样品相关数据
-   changeTime(e){
-     console.log(e,'未收到样品数据',this.notReceivedNumber)
-     console.log(e,'已收到样品数据',this.received)
-     // this.filter(this.notReceivedNumber,'shou_yang_ri_qi_',e)
-     console.log(this.filter(this.received,'shou_yang_ri_qi_',e))
-     // console.log(this.filter(this.unqualifiedData,'shou_yang_ri_qi_',e))
-     // console.log(this.filter(this.retentionData,'shou_yang_ri_qi_',e))
-       },
-       //筛选月份数据   filter(要处理的数据，6，时间)
-   filter(array,keyname,date){
-     let res=[]
-     array.forEach(e => {
-       //用户选中的时间
-       let month= date.getMonth()+1
-       month = month < 10 ? ('0' + month) :month
-       let year =date.getFullYear()
-      //数据库里每一项的年，月
-       let year2= e[keyname].slice(0,4)
-       let month2=e[keyname].slice(5,7)
-       console.log('用户选择的时间',year + '年'  + month + '月' )
-       console.log('数据库里的时间',year2 + '年'  + month2 + '月' )
-       console.log('已收到的每一项',array)
-       console.log('当前项的收养日期',e[keyname])
-      
-       //把用户选中的年，月 的样品相关数据筛选出来
-       if(year2==year && month2 ==month  ){
-         res.push(e)
-         console.log("用户选择的时间 对应的数据",res)
-       }  
-     });
-     // return res
+export default {
+  data(){ 
+    return{
+      NowTime: '',
+      entrustNumber:null,
+      //对应月份的每一天的数组
+      days:[],
+      //月份天数
+      day:0,
+      //已委托未收到样品数据
+      notReceivedNumber:[],
+      //已收到样品数据
+      received:[],
+      //不合格样品数据
+      unqualifiedData:[],
+      //留样样品数据
+      retentionData:[],
+}
+  },
+  created(){
     
- 
-     
-   },
-   //1.未收到样品：已委托未收到样品数量:样品表有，登记表没有
-   getNotReceivedData(){
-       let sql1 = "select * from t_mjypb where t_mjypb.yang_pin_bian_hao not in(select t_mjypdjb.wei_tuo_bian_hao_ from t_mjypdjb)"
-       curdPost('sql',sql1).then(response => { 
-       this.notReceivedNumber = response.variables.data
-       // console.log('样品表未收样数据aa',this.notReceivedNumber)
-       })
-   },
-   
-   //2.已收到：样品登记表有数据
-   getReceivedData(){
-     let sql2 = "select * from t_mjypdjb"
-       curdPost('sql',sql2).then(response => { 
-       this.received = response.variables.data
-       // console.log('已收到样品数据aa',this.received)
-       // let dataList = this.received.map((item)=>{
-       //   return isNaN(parseInt(item.shou_yang_shu_lia))?0:parseInt(item.shou_yang_shu_lia);
-       // });
-       // console.log('已收',dataList);
-     })
-   },
-   
-   //3.已经收到不合格xx
-   getUnqualifiedData(){
-     let sql3 = "select * from t_mjypdjb where yan_shou_zhuang_t = '残缺'"
-       curdPost('sql',sql3).then(response => { 
-       this.unqualifiedData = response.variables.data
-       // console.log('不合格样品数据aa',this.unqualifiedData)
-       })
-   },
-   //4.留样样品数据xx
-    getRetentionData(){
-     let sql4 = "select  * from (select * from t_mjypdjb where  liu_yang_ri_qi_ ='' ) a where   a.shi_fou_liu_yang_ != '否'"
-       curdPost('sql',sql4).then(response => { 
-       this.retentionData = response.variables.data
-       // console.log('留样样品数据aa',this.retentionData)
-       })
- 
+    // this.getReceivedData()
+    // this.getUnqualifiedData()
+    // this.getRetentionData()
+    // this.getInconformityData()
+  },
+  mounted() {
+    this.getNowTime()
+    //初始化组件
+    // this.entrustNumberInit(this.days)s
+  },
+  // watch: {
+  //   NowTime(newval,oldval) {
+  //     console.log("监听时间",val,NowTime)
+	//     //  console.log(val,'NowTime');
+	//      let mm = val.split('-');    //把2022-11变成需要传输的样子：2020和11
+	//      this.getDaysInMonth(mm[0],mm[1]) 
+	//  },
+  // },
+methods:{
+    //样品相关数据时间控件 :页面进来显示当前时间
+    getNowTime(){
+      const nowDate = new Date();
+      const date = {
+        year: nowDate.getFullYear(),
+        month: nowDate.getMonth() + 1,
+    }
+      this.NowTime = date.year + '-' + date.month
+      // console.log('页面第一次进来显示时间',date.year,date.month)
+      //进来获取当前时间 之后获取当前月份天数 传给
+      this.getDaysInMonth(date.year,date.month)
+      
     },
    
-   //委托样品图表
-   entrustNumberInit(){
-     var entrustNumber = this.$echarts.init(this.$refs.Number_refs);
-     var entrustNumberOption = {
-         xAxis:{
-           type: "category",
-           //获取当前月的日期1到30日
-           data: ["1号", "2号", "3号", "4号", "5号", "6号", "7号","8号","9号","10号",
-           "11号","12号","13号", "14号", "15号", "16号", "17号", "18号", "19号","20号",
-           "21号","22号","23号","24号","25号","26号","27号","28号","29号","30号"],
-           splitLine:{
-             show:false
-           },
-           axisLine: {
-             lineStyle: {
-               type: 'solid',
-               color: 'white',//坐标线的颜色
-                 
-             }
-           },
-           axisLabel: {
-             style: {
-                 fill: '#fff'
-             }
-         },
-         },
-         yAxis: {
-           type: "value",
-           name:'数量',
-           axisLine: {
-             lineStyle: {
-               type: 'solid',
-               color: 'white',//坐标线的颜色
-                 
-             }
-           },
-           //去除网格线
-           splitLine: {
-             show: false
-         },
-         },
-         // title: {
-         //   text: '委托样品数量柱形图',
-         // },
-         grid:{
-           left:'2%',
-           right:"5%",
-           top:'15%',
-           bottom:'2%',
-           containLabel:true
-         
-         },
-         // tooltip悬浮提示框
-         tooltip:{
-           show:true
-         },
-         //图例的位置
+
+  //手动操作时间控件改变时间
+  changeTime(e){
+    // Sat Jan 01 2022-09
+    // console.log('改变时间',e)
+    let year = e.slice(0,4)
+    let month = e.slice(5,7)
+    this.getDaysInMonth(year,month)
+  },
+  //用户操作获取月份对应天数,
+  getDaysInMonth(year,month){
+    let temp = new Date(year,month,0);
+    this.day = temp.getDate(); //这里mm就是天数啦
+    // console.log('当前月份：',month,',天数',this.day);
+    for( let i=1;i <= this.day ;i++){
+      this.days.push(i)
+    }
+    // console.log('月份每一天',this.days)
+    // console.log('当前月天数',this.day)
+    this.entrustNumberInit(this.days)
+    this.getReceivedData(this.day)
+  },
+
+    //用户手动查看某月份 的 样品相关数据
+  // changeTime(e){
+    // console.log(e,'未收到样品数据',this.notReceivedNumber)
+    // console.log(e,'已收到样品数据',this.received)
+    // this.filter(this.notReceivedNumber,'shou_yang_ri_qi_',e)
+    // console.log(this.filter(this.received,'shou_yang_ri_qi_',e))
+    // console.log(this.filter(this.unqualifiedData,'shou_yang_ri_qi_',e))
+    // console.log(this.filter(this.retentionData,'shou_yang_ri_qi_',e))
+  // },
+  //筛选月份数据   filter(要处理的数据，6，时间)
+  filter(array,keyname,date){
+    let res=[]
+    array.forEach(e => {
+      //用户选中的时间
+      let month= date.getMonth()+1
+      month = month < 10 ? ('0' + month) :month
+      let year =date.getFullYear()
+     //数据库里每一项的年，月
+      let year2= e[keyname].slice(0,4)
+      let month2=e[keyname].slice(5,7)
+      // console.log('用户选择的时间',year + '年'  + month + '月' )
+      // console.log('数据库里的时间',year2 + '年'  + month2 + '月' )
+      // console.log('已收到的每一项',array)
+      // console.log('当前项的收养日期',e[keyname])
+      //把用户选中的年，月 的样品相关数据筛选出来
+      if(year2==year && month2 ==month){
+        res.push(e)
+        // console.log("用户选择的时间 对应的数据",res)
+      }  
+    });
+    // return res
+  },
+  //1.未收到样品：已委托未收到样品数量:样品表有，登记表没有
+  // getNotReceivedData(){
+  //   let sql1 = "select t_mjypb.shu_liang_ ,t_mjypb.song_yang_ri_qi_ from t_mjypb where t_mjypb.yang_pin_bian_hao not in(select t_mjypdjb.wei_tuo_bian_hao_ from t_mjypdjb)"
+  //   curdPost('sql',sql1).then(response => { 
+  //   this.notReceivedNumber = response.variables.data
+  //   console.log('样品表未收样数据aa',this.notReceivedNumber)
+  //   })
+  // },
+  
  
-         legend: {
-           show:true, 
-           orient: 'horizontal',  //horizontal 水平排列
-           top:'0%',
-           left:'center',
-           lineStyle:{
- 
-           },
-           textStyle: {
-             color: '#fff',
-         },
-         },
-         //隐藏刻度线
-         axisTick:{
-               show:false,
-             },
-       
-         series: [
-           {
-             type:"bar",
-             name:'未收到样品',
-             label: {
-               show: true,
-               position: 'top',
-               color:'#fff'
-              
-             },
-            
-             data: [120, 200, 150, 80, 70, 110, 130,120, 200, 150, 80, 70, 110, 130,120, 200, 150, 80, 70, 110, 130,120, 200, 150, 80, 70, 110, 130,167,128],
+  //2.已收到：样品登记表有数据
+  getReceivedData(dayNum){
+    // console.log('getReceivedData function ',dayNum)
+    let sql2 = "select shou_yang_ri_qi_,shou_yang_shu_lia from t_mjypdjb"
+      curdPost('sql',sql2).then(response => { 
+      let data = response.variables.data
+      // console.log('已收',data)
+      let newArray = data.reduce((total, cur, index) => {
+        let hasValue = total.findIndex(current => {
+          return current.shou_yang_ri_qi_ === cur.shou_yang_ri_qi_;
+        });
+        hasValue === -1 && total.push(cur);
+        hasValue !== -1 && (total[hasValue].shou_yang_shu_lia = total[hasValue].shou_yang_shu_lia + cur.shou_yang_shu_lia);
+        return total;
+      }, []);
+      // console.log('日期数量11111111',newArray);
+      //创建一个当前月份天数的数组
+      let newArrayNUm = Array(dayNum)
+      // console.log('创建对应月份的数组',newArrayNUm.fill(0))
+      //遍历拿到的数组，截取出月份对应的
+      //console.log('已收到样品数据aa',this.received)
+      // let dataList = this.received.map((item)=>{
+      //   return isNaN(parseInt(item.shou_yang_shu_lia))?0:parseInt(item.shou_yang_shu_lia);
+      // });
+   
+    })
+  },
+  
+  //3.已经收到不合格xx
+  getUnqualifiedData(){
+    let sql3 = "select shou_yang_ri_qi_,shou_yang_shu_lia from t_mjypdjb where yan_shou_zhuang_t = '残缺'"
+      curdPost('sql',sql3).then(response => { 
+      this.unqualifiedData = response.variables.data
+      // console.log('不合格样品数据',this.unqualifiedData)
+      })
+  },
+  //4.留样样品数据xx
+   getRetentionData(){
+    let sql4 = "select  shou_yang_ri_qi_,shou_yang_shu_lia from (select * from t_mjypdjb where  liu_yang_ri_qi_ ='' ) a where   a.shi_fou_liu_yang_ != '否'"
+      curdPost('sql',sql4).then(response => { 
+      this.retentionData = response.variables.data
+      // console.log('留样样品数据',this.retentionData)
+      })
+
+   },
+  
+  //委托样品图表
+  entrustNumberInit(dayArray){
+    var entrustNumber = this.$echarts.init(this.$refs.Number_refs);
+    // var mWidth = $(".entrustNumber").width();  // 获取父节点宽高
+    // var mHeight = $(".entrustNumber").height();
+    // chart_preHist.resize({width:mWidth, height:mHeight})
+    var entrustNumberOption = {
+        xAxis:{
+          type: "category",
+          //获取当前月的日期
+          // data: ["1号", "2号", "3号", "4号", "5号", "6号", "7号","8号","9号","10号",
+          // "11号","12号","13号", "14号", "15号", "16号", "17号", "18号", "19号","20号",
+          // "21号","22号","23号","24号","25号","26号","27号","28号","29号","30号"],
+          data: dayArray,
+          splitLine:{
+            show:false
+          },
+          axisLine: {
+            lineStyle: {
+              type: 'solid',
+              color: 'white',//坐标线的颜色
+                
+            }
+          },
+          axisLabel: {
+            style: {
+                fill: '#fff'
+            }
+        },
+        },
+        yAxis: {
+          type: "value",
+          name:'数量',
+          axisLine: {
+            lineStyle: {
+              type: 'solid',
+              color: 'white',//坐标线的颜色
+                
+            }
+          },
+          //去除网格线
+          splitLine: {
+            show: false
+        },
+        },
+        grid:{
+          left:'2%',
+          right:"5%",
+          top:'15%',
+          bottom:'2%',
+          containLabel:true
+        
+        },
+        // tooltip悬浮提示框
+        tooltip:{
+          show:true
+        },
+        //图例的位置
+
+        legend: {
+          show:true, 
+          orient: 'horizontal',  //horizontal 水平排列
+          top:'0',
+          left:'center',
+          lineStyle:{},
+          textStyle: {
+            color: '#fff',
+        },
+        },
+        //隐藏刻度线
+        axisTick:{
+              show:false,
+            },
+      
+        series: [
+          {
+            type:"bar",
+            name:'未收到样品',
+            label: {
+              show: true,
+              position: 'top',
+              color:'#fff'
              
-            //柱子的颜色
-             itemStyle:{
-               show:true,
-               color:'rgba(0, 186, 255, 0.4)',
-             },
+            },
            
+            data: [120, 200, 150, 80, 70, 110, 130,120, 200, 150, 80, 70, 110, 130,120, 200, 150, 80, 70, 110, 130,120, 200, 150, 80, 70, 110, 130,167,128],
             
-             //背景颜色
-             // backgroundStyle: {
-             //   color: "rgba(0, 186, 255, 0.4)",
-             // },
-           },
-           {
-             name:'已收到样品',
-             type: 'line',
-             label: {
-               show: true,
-               position: 'bottom',
-               color:'#fff'  
-             },
-             data: [22 ,18, 33, 45, 63, 12, 20, 24, 23, 16, 12, 34,
-             22 ,18, 33, 45, 63, 12, 20, 24, 23, 16, 12, 34,
-             22 ,18, 12, 20, 24,  34],
-             itemStyle:{
-                 color:'rgba(55, 162, 218, 0.6)'
-             },
+           //柱子的颜色
+            itemStyle:{
+              show:true,
+              color:'rgba(0, 186, 255, 0.4)',
+            },
+          
            
-           },
-         ],
-         // series:this.series
-     }
-       entrustNumber.setOption(entrustNumberOption)
-   }
- }
- }
- </script>
- 
- <style lang="less" >
- * border,body{
-   padding: 0px;
-   margin: 0px;
- }
- .entrustNumber{
-   width: 1190px;
-   height: 416px;
- }
- // .entrustNumber_content{
- //   width: 100%;
- //   height: 100%;
- // }
- .entrustNumber{
-       // flex: 3;
-       // background-color: rgb(39, 3, 59);
-       display: flex;
-       flex-direction:cloumn;
-       flex-wrap :wrap;
-       // justify-content:center;
-       .entrustNumber_title{
-         // background-color: rgb(25, 97, 156);
-         width: 100%;
-         height: 50px;
-         position: relative;
-         .demonstration{
-           line-height: 50px;
-           position: absolute;
-           left: 50%;
-           top: 50%;
-           margin-left: -50px;
-           margin-top: -25px;
-           color: '#fff';
-           font-size:20px;
-           font-weight:600;
- 
-         }
-         .chooseMonth{
-           width: 120px;
-           line-height: 50px;
-           margin-left: 10px;
-         }
-       }
-       .entrustNumber_content{
-         width: 100%;
-         height: 366px;
-         // background-color: red;
-       }
-     }
- 
- </style>
+            //背景颜色
+            // backgroundStyle: {
+            //   color: "rgba(0, 186, 255, 0.4)",
+            // },
+          },
+          {
+            name:'已收到样品',
+            type: 'line',
+            label: {
+              show: true,
+              position: 'bottom',
+              color:'#fff'  
+            },
+            data: [22 ,18, 33, 45, 63, 12, 20, 24, 23, 16, 12, 34,
+            22 ,18, 33, 45, 63, 12, 20, 24, 23, 16, 12, 34,
+            22 ,18, 12, 20, 24,  34],
+            itemStyle:{
+                color:'rgba(55, 162, 218, 0.6)'
+            },
+          
+          },
+        ],
+        // series:this.series
+    }
+      entrustNumber.setOption(entrustNumberOption)
+  }
+}
+}
+</script>
+
+<style lang="less" scoped>
+* body{
+  padding: 0px;
+  margin: 0px;
+  border: 0;
+}
+.entrustNumber{
+  width: 100%;
+  height: 100%;
+  #dv-border-box-7{
+    background-size: 100% 100%;
+    border: 2px solid rgb(3, 59, 31);
+    display: flex;
+    flex-direction:column;
+    align-content:space-between;
+    
+  }
+  .entrustNumber_title{
+    width: 100%;
+    height: 50px;
+    position: relative;
+    .demonstration{
+      line-height: 50px;
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      margin-left: -50px;
+      margin-top: -25px;
+      color: '#fff';
+      font-size:16px;
+      font-weight:600;
+    }
+    .chooseMonth{
+      width: 120px;
+      line-height: 50px;
+      margin-left: 10px;
+    }
+  }
+  .entrustNumber_content{
+    width: 100%;
+    //calc()里面内容需要两边有空格，否则无效
+    height: calc(100% - 50px);
+  }
+  
+}
+
+</style>

src/views/demo/yangPin/yangPinShuJu/EntrustType.vue

@@ -1,225 +1,224 @@
 <template>
-  <!-- 委托样品类型环形图 -->
-  
-  <div class="entrustType" >
-     <dv-border-box-7 backgroundColor="rgba(6, 30, 93, 0.5)" >
-       <div class="entrustType_title">委托样品类型占比情况</div>
-       <div class="entrustType_content" ref="Type_refs"></div>
-   </dv-border-box-7>       
-  </div>
+   <!-- 委托样品类型环形图 -->
+   
+   <div class="entrustType" >
+      <dv-border-box-7 backgroundColor="rgba(6, 30, 93, 0.5)" >
+        <div class="entrustType_title">委托样品类型占比情况</div>
+        <div class="entrustType_content" ref="Type_refs"></div>
+    </dv-border-box-7>       
+   </div>
 </template>
 
 <script>
 import curdPost from '@/business/platform/form/utils/custom/joinCURD.js'
 
 export default {
- data(){
-   return{
-     entrustType:null,
-     timer: null,  // 定时器名称    
-     entrustArray:[],
-     sendTime:''
-   }
- },
- created(){
-   //获取数据库里的数据
-   this.getData()
-   this.getNowTime()
-   clearInterval(this.timer)
-   this.timer = null
-   this.timer = setInterval(() =>{
-     this.getData()
-     this.getNowTime()
-   }, 1000 * 60 * 30 );
-   // 通过$once来监听定时器
-   // 在beforeDestroy钩子触发时清除定时器
-   this.$once('hook:beforeDestroy', () => {
-   clearInterval(this.timer); 
-   })
+  data(){
+    return{
+      entrustType:null,
+      timer: null,  // 定时器名称    
+      entrustArray:[],
+      sendTime:''
+    }
+  },
+  created(){
+    //获取数据库里的数据
+    this.getData()
+    this.getNowTime()
+    clearInterval(this.timer)
+    this.timer = null
+    this.timer = setInterval(() =>{
+      this.getData()
+      this.getNowTime()
+    }, 1000 * 60 * 30 );
+    // 通过$once来监听定时器
+    // 在beforeDestroy钩子触发时清除定时器
+    this.$once('hook:beforeDestroy', () => {
+    clearInterval(this.timer); 
+    })
 
 
- },
- mounted(){
-   //初始化eCharts组件
-   this.entrustTypeData()
-  
+  },
+  mounted(){
+    //初始化eCharts组件
+    this.entrustTypeData()
+   
 
- },
- methods:{
-   //实际收到数据：登记表里面样品类型数据
-   getData(){
-     let sql = "select * from t_mjypdjb" 
-     curdPost('sql',sql).then(response => { 
-     let data = response.variables.data
-     // console.log('委托类型数据111',data)
-     let dataList = data.map((item)=>({
-      
-       value:item.shou_yang_shu_lia,
-       name:item.yang_pin_lei_xing
-     }));
-     console.log('委托类型数据222',dataList)
-     this.entrustArray = dataList.reduce((total, cur, index) => {
-       let hasValue = total.findIndex(current => {
-         return current.name === cur.name;
-       });
-       hasValue === -1 && total.push(cur);
-       hasValue !== -1 && (total[hasValue].value = total[hasValue].value + cur.value);
-       return total;
-     }, []);
-     // console.log('委托类型数333',this.entrustArray)
-     }) 
-    
-   },
+  },
+  methods:{
+    //实际收到数据：登记表里面样品类型数据
+    getData(){
+      let sql = "select * from t_mjypdjb" 
+      curdPost('sql',sql).then(response => { 
+      let data = response.variables.data
+      // console.log('委托类型数据111',data)
+      let dataList = data.map((item)=>({
+       
+        value:item.shou_yang_shu_lia,
+        name:item.yang_pin_lei_xing
+      }));
+      // console.log('委托类型数据222',dataList)
+      this.entrustArray = dataList.reduce((total, cur, index) => {
+        let hasValue = total.findIndex(current => {
+          return current.name === cur.name;
+        });
+        hasValue === -1 && total.push(cur);
+        hasValue !== -1 && (total[hasValue].value = total[hasValue].value + cur.value);
+        return total;
+      }, []);
+      // console.log('委托类型数333',this.entrustArray)
+      }) 
+     
+    },
 
-    //获取时间
-    getNowTime(){
-     const nowDate = new Date();
-     const date = {
-         year: nowDate.getFullYear(),
-         month: nowDate.getMonth() + 1,
-         day: nowDate.getDate(),
-         hour: nowDate.getHours(),
-     }
-     this.sendTime = date.year + '年' + date.month + '月' + date.day + '日' +date.hour + '时' 
-   },
-    //委托样品类型环形图
-    entrustTypeData(){
-     var entrustType = this.$echarts.init(this.$refs.Type_refs);
-     var entrustTypeOption ={
-       grid:{
-         left:'',
-         top:'0%',
-         bottom:'0%',
-         containLabel:true  //?
-       },
-       title: {
-         text: '委托样品总数',
-         subtext: '400',
-         // center: ["40%", "48%"],
-         x: "40%",     //X坐标   
-         y: "42%",    //Y坐标
-          // left:195,//慎用百分比（相对环形图宽度）
-         // top: '160px',
-         //主副标题之间的间距
-         itemGap:10,
-         textAlign:'center',  //竖直居中对齐
-         // textVerticalAlign:'auto',
-         textStyle: {    //标题样式
-           fontSize: 18,
-           fontWeight: "bolder",  //bold??
-           color: "#aaa",
-           transform: "translate(-50%,-50%)",
-           marginTop:"-50%",
-           marginLeft:"-50%",
-         },
-         subtextStyle: {   //副标题样式
-           fontSize: 26,
-           fontWeight: "bolder",
-           color: "#333",
-           formatter: '', 
-           marginTop:"-50%",
-           marginLeft:"-50%",
-           transfrom:"translate(-50%,-50%)",
-           // align:'center'
-         },
-       },
-      //鼠标滑过显示信息
-       tooltip: {
-         trigger: "item",
-         formatter: '{d}%\n{b}',//
-       },
-       //图例的位置
-       legend: {
-         orient: 'vertical',  //horizontal 水平排列
-         // left: 'right',
-         right:'1%',
-         bottom:'10%',
-         lineStyle:{
+     //获取时间
+     getNowTime(){
+      const nowDate = new Date();
+      const date = {
+          year: nowDate.getFullYear(),
+          month: nowDate.getMonth() + 1,
+          day: nowDate.getDate(),
+          hour: nowDate.getHours(),
+      }
+      this.sendTime = date.year + '年' + date.month + '月' + date.day + '日' +date.hour + '时' 
+    },
+     //委托样品类型环形图
+     entrustTypeData(){
+      var entrustType = this.$echarts.init(this.$refs.Type_refs);
+      var entrustTypeOption ={
+        grid:{
+          left:'',
+          top:'0%',
+          bottom:'0%',
+          containLabel:true  //?
+        },
+        title: {
+          text: '委托样品总数',
+          subtext: '400',
+          // center: ["40%", "48%"],
+          x: "40%",     //X坐标   
+          y: "42%",    //Y坐标
+           // left:195,//慎用百分比（相对环形图宽度）
+          // top: '160px',
+          //主副标题之间的间距
+          itemGap:10,
+          textAlign:'center',  //竖直居中对齐
+          // textVerticalAlign:'auto',
+          textStyle: {    //标题样式
+            fontSize: 16,
+            fontWeight: "bolder",  //bold??
+            color: "#aaa",
+            transform: "translate(-50%,-50%)",
+            marginTop:"-50%",
+            marginLeft:"-50%",
+          },
+          subtextStyle: {   //副标题样式
+            fontSize: 26,
+            fontWeight: "bolder",
+            color: "#333",
+            formatter: '', 
+            marginTop:"-50%",
+            marginLeft:"-50%",
+            transfrom:"translate(-50%,-50%)",
+            // align:'center'
+          },
+        },
+       //鼠标滑过显示信息
+        tooltip: {
+          trigger: "item",
+          formatter: '{d}%\n{b}',//
+        },
+        //图例的位置
+        legend: {
+          orient: 'vertical',  //horizontal 水平排列
+          // left: 'right',
+          right:'1%',
+          bottom:'10%',
+          lineStyle:{
 
-         },
-         textStyle: {
-           color: '#fff',
-       },
-       },
-       series: [
-      
+          },
+          textStyle: {
+            color: '#fff',
+        },
+        },
+        series: [
        
-         {
-           name: 'Access From',
-           type: 'pie',
-           radius: ['40%', '70%'],
-           // radius:'30%',
-           center: ["40%", "48%"],//图表的位置 以圆心为基准 水平竖直位置
-           avoidLabelOverlap: true,//是否启用防止标签重叠策略
-          
-           label: {
-             show: true,
-             formatter: " {b}\n {c} ({d}%)",
-             // formatter: '{d}%\n{b}',// 显示百分比，
-             position: 'outside',
-             color:'#fff'
-           },
-           emphasis: {
-             label: {
-               show: true,
-               fontSize: '40',
-               fontWeight: 'bold'
-             }
-           },
-           labelLine: {
-             show: false
-           },
-           // data:this.entrustArray,
-           data: [
-             { value: 48, name: '培养基/细胞上清' },
-             { value: 15, name: '培养基/细胞悬液' },
-             { value: 35, name: '培养基/细胞上清/细胞悬液' },
-             { value: 14, name: '间充质干细胞' },
-             { value: 30, name: '细胞悬液,细胞悬液' },
-             {value:1,name:'1017075228309716992'},
-             { value:18,name:'培养基/细胞上清,细胞悬液'}
-           ]
-         }
-      ]
-     }
-     entrustType.setOption(entrustTypeOption);
+        
+          {
+            name: 'Access From',
+            type: 'pie',
+            radius: ['40%', '70%'],
+            // radius:'30%',
+            center: ["40%", "48%"],//图表的位置 以圆心为基准 水平竖直位置
+            avoidLabelOverlap: true,//是否启用防止标签重叠策略
+           
+            label: {
+              show: true,
+              formatter: " {b}\n {c} ({d}%)",
+              // formatter: '{d}%\n{b}',// 显示百分比，
+              position: 'outside',
+              color:'#fff'
+              
+            },
+            emphasis: {
+              label: {
+                show: true,
+                fontSize: '40',
+                fontWeight: 'bold'
+              }
+            },
+            labelLine: {
+              show: false
+            },
+            // data:this.entrustArray,
+            data: [
+              { value: 48, name: '培养基/细胞上清' },
+              { value: 15, name: '培养基/细胞悬液' },
+              { value: 35, name: '培养基/细胞上清/细胞悬液' },
+              { value: 14, name: '间充质干细胞' },
+              { value: 30, name: '细胞悬液,细胞悬液' },
+              {value:1,name:'1017075228309716992'},
+              { value:18,name:'培养基/细胞上清,细胞悬液'}
+            ]
+          }
+       ]
+      }
+      entrustType.setOption(entrustTypeOption);
 
-   },
+    },
 
- }
+  }
 
 }
 </script>
 
-<style lang="less" >
-* border,body{
- padding: 0px;
- margin: 0px;
+<style lang="less" scoped>
+*body{
+  padding: 0px;
+  margin: 0px;
+}
+.entrustType{
+  width: 100%;
+  height: 100%;
+  #dv-border-box-7{
+    background-size: 100% 100%;
+    display: flex;
+    flex-direction:column;
+    align-content:space-between;
+  }
+  .entrustType_title{
+    width: 100%;
+    height: 50px;
+    line-height: 50px;
+    text-align: center;
+    color: '#fff';
+    font-size:16px;
+    font-weight: 600;
+  }
+  .entrustType_content{
+    width: 100%;
+    height: calc(100% - 50px);
+  }
 }
- .entrustType{
-   width: 600px;
-   height: 416px;
-   display: flex;
-   flex-direction:cloumn;
-   flex-wrap :wrap;
-   overflow: hidden;
-    
-     .entrustType_title{
-         // background-color: rgb(0, 99, 180);
-         width: 100%;
-         height: 50px;
-         line-height: 50px;
-         text-align: center;
-         color: '#fff';
-         font-size:20px;
-         font-weight: 600;
-       // font-weight:bold;
-     }
-     .entrustType_content{
-       width: 100%;
-       height: 350px;
-       // background-color: red($color: #000000);
-     }
-   }
 
 </style>

src/views/demo/yangPin/yangPinShuJu/MonthlyNumber.vue

@@ -1,22 +1,20 @@
 <template>
   <div class="entrustNumber" >
    <!-- 月度样品检测情况组件  -->
-       <dv-border-box-7  backgroundColor="rgba(6, 30, 93, 0.5)" >
-         <div class="entrustNumber_title">
-           <span class="demonstration">月度样品检测情况</span>
-           <el-date-picker
-           class="chooseMonth"
-             v-model="NowTime"
-             type="month"
-           
-             @change="changeTime"
-             placeholder="请选择时间">
-           </el-date-picker>
-         </div>
- 
-         <div class="entrustNumber_content" ref="Number_refs"></div>
-     </dv-border-box-7>       
-    </div>
+    <dv-border-box-7  backgroundColor="rgba(6, 30, 93, 0.5)" >
+      <div class="entrustNumber_title">
+        <span class="demonstration">月度样品检测情况</span>
+        <el-date-picker
+          class="chooseMonth"
+          v-model="NowTime"
+          type="month"
+          @change="changeTime"
+          placeholder="请选择时间">
+        </el-date-picker>
+      </div>
+      <div class="entrustNumber_content" ref="Number_refs"></div>
+    </dv-border-box-7>       
+  </div>
    
      
  </template>
@@ -63,10 +61,10 @@
      },
      //用户手动查看某月份 的 样品相关数据
    changeTime(e){
-     console.log(e,'未收到样品数据',this.notReceivedNumber)
-     console.log(e,'已收到样品数据',this.received)
+    //  console.log(e,'未收到样品数据',this.notReceivedNumber)
+    //  console.log(e,'已收到样品数据',this.received)
      // this.filter(this.notReceivedNumber,'shou_yang_ri_qi_',e)
-     console.log(this.filter(this.received,'shou_yang_ri_qi_',e))
+    //  console.log(this.filter(this.received,'shou_yang_ri_qi_',e))
      // console.log(this.filter(this.unqualifiedData,'shou_yang_ri_qi_',e))
      // console.log(this.filter(this.retentionData,'shou_yang_ri_qi_',e))
        },
@@ -81,15 +79,15 @@
       //数据库里每一项的年，月
        let year2= e[keyname].slice(0,4)
        let month2=e[keyname].slice(5,7)
-       console.log('用户选择的时间',year + '年'  + month + '月' )
-       console.log('数据库里的时间',year2 + '年'  + month2 + '月' )
-       console.log('已收到的每一项',array)
-       console.log('当前项的收养日期',e[keyname])
+      //  console.log('用户选择的时间',year + '年'  + month + '月' )
+      //  console.log('数据库里的时间',year2 + '年'  + month2 + '月' )
+      //  console.log('已收到的每一项',array)
+      //  console.log('当前项的收养日期',e[keyname])
       
        //把用户选中的年，月 的样品相关数据筛选出来
        if(year2==year && month2 ==month  ){
          res.push(e)
-         console.log("用户选择的时间 对应的数据",res)
+        //  console.log("用户选择的时间 对应的数据",res)
        }  
      });
      // return res
@@ -256,54 +254,47 @@
  }
  </script>
  
- <style lang="less" >
- * border,body{
+ <style lang="less" scoped >
+ *body{
    padding: 0px;
    margin: 0px;
  }
- .entrustNumber{
-   width: 1190px;
-   height: 416px;
- }
- // .entrustNumber_content{
- //   width: 100%;
- //   height: 100%;
- // }
- .entrustNumber{
-       // flex: 3;
-       // background-color: rgb(39, 3, 59);
-       display: flex;
-       flex-direction:cloumn;
-       flex-wrap :wrap;
-       // justify-content:center;
-       .entrustNumber_title{
-         // background-color: rgb(25, 97, 156);
-         width: 100%;
-         height: 50px;
-         position: relative;
-         .demonstration{
-           line-height: 50px;
-           position: absolute;
-           left: 50%;
-           top: 50%;
-           margin-left: -60px;
-           margin-top: -25px;
-           color: '#fff';
-           font-size:20px;
-           font-weight:600;
- 
-         }
-         .chooseMonth{
-           width: 120px;
-           line-height: 50px;
-           margin-left: 10px;
-         }
-       }
-       .entrustNumber_content{
-         width: 100%;
-         height: 366px;
-         // background-color: red;
-       }
-     }
+.entrustNumber{
+  width: 100%;
+  height: 100%;
+  #dv-border-box-7{
+    background-size: 100% 100%;
+    display: flex;
+    flex-direction:column;
+    align-content:space-between;
+   
+  } 
+  .entrustNumber_title{
+    width: 100%;
+    height: 50px;
+    position: relative;
+    .demonstration{
+      line-height: 50px;
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      margin-left: -60px;
+      margin-top: -25px;
+      color: '#fff';
+      font-size:20px;
+      font-weight:600;
+
+    }
+    .chooseMonth{
+      width: 120px;
+      line-height: 50px;
+      margin-left: 10px;
+    }
+  }
+  .entrustNumber_content{
+    width: 100%;
+    height: calc(100% - 50px);
+  }     
+}
  
  </style>

src/views/demo/yangPin/yangPinShuJu/MonthlyStatus.vue

@@ -37,18 +37,18 @@ export default {
       curdPost('sql',sql1).then(response => { 
         let  data = response.variables.data
        
-        console.log('检测样品任务总数',data.length)
+        // console.log('检测样品任务总数',data.length)
         let obj = {};
         let newArray = data.reduce((cur,next) => {
             obj[next.yang_pin_bian_hao] ? "" : obj[next.yang_pin_bian_hao] = true && cur.push(next);
             return cur;
         },[])
          this.testedData = newArray.length
-        console.log("检测样品任务总数3333", this.testedData)
+        // console.log("检测样品任务总数3333", this.testedData)
       })
       //定义一个对象：任务总量
       let newObj = {name:"任务总量",value:this.testedData}
-      console.log("检测样品任务总数444", newObj)
+      // console.log("检测样品任务总数444", newObj)
     },
 
     //已经完成检测的样品
@@ -57,7 +57,7 @@ export default {
       curdPost('sql',sql2).then(response => { 
       let  data = response.variables.data
       // this.testedData 
-      console.log('已经完成检测数据',data.length)
+      // console.log('已经完成检测数据',data.length)
 
       })
       
@@ -158,36 +158,34 @@ export default {
 }
 </script>
 
-<style lang="less" >
-* border,body{
+<style lang="less" scoped>
+*body{
   padding: 0px;
   margin: 0px;
 }
-  .monthlyStatus{
-    width: 400px;
-    height: 416px;
+.monthlyStatus{
+  width: 100%;
+  height: 100%;
+  #dv-border-box-7{
+    background-size: 100% 100%;
     display: flex;
-    flex-direction:cloumn;
-    flex-wrap :wrap;
-    //  background-color: rgb(25, 97, 156);
-    overflow: hidden;
-     
-      .monthlyStatus_title{
-        width: 100%;
-        height: 50px;
-        line-height: 50px;
-        text-align: center;
-        // padding-left: 20px;
-        // background-color: rgb(25, 97, 156);
-        font-weight: 600;
-        font-size: 20px;
-        color:'#fff'
-        // overflow: hidden;
-      }
-      .monthlyStatus_content{
-        width: 100%;
-        height: 350px;
-        // background-color: red;
-      }
-    }
+    flex-direction:column;
+    align-content:space-between;
+    
+  }
+  .monthlyStatus_title{
+    width: 100%;
+    height: 50px;
+    line-height: 50px;
+    text-align: center;
+    font-weight: 600;
+    font-size: 20px;
+    color:'#fff';
+  }
+  .monthlyStatus_content{
+    width: 100%;
+    height: calc(100% - 50px);
+  }
+  
+}
 </style>

src/views/demo/yangPin/yangPinShuJu/headerContent.vue

@@ -66,7 +66,7 @@ export default {
       this.getReceivedData()
       this.getUnqualifiedData()
       this.getStayData()
-      console.log('执行了定时器',this.sendTime)
+      // console.log('执行了定时器',this.sendTime)
       //数据回来之后调用触发this.$emit,触发父组件自定义方法获取时间
       this.getNowTime()
       // this.$emit('getUpdateTime',this.sendTime)
@@ -89,7 +89,7 @@ export default {
           hour: nowDate.getHours(),
       }
       this.sendTime = date.year + '年' + date.month + '月' + date.day + '日' +date.hour + '时' 
-      console.log("获取时间函数执行了",this.sendTime)
+      // console.log("获取时间函数执行了",this.sendTime)
       //获取时间的时候直接传给父组件
       this.$emit('getUpdateTime',this.sendTime)
     },

src/views/demo/yangPin/yangPinShuJu/index.vue

@@ -2,12 +2,15 @@
   <div  class="data-view">
       <!-- 全屏显示容器 -->
       <dv-full-screen-container>
+        <!-- 头部内容部分 -->
         <div class="headerContent">
            <!-- 标题装饰组件 -->
           <header-decoration :titleName="outputData.headerName"/> 
+          <!-- 返回按钮 -->
           <div class="goBackButton" @click.prevent="goBack()" >
             <dv-border-box-8>返回</dv-border-box-8>
           </div>
+          <!-- 显示数据上一次更新的时间 -->
           <div
              style="width: 18%;
               cursor: pointer;
@@ -21,11 +24,9 @@
               color: #FFFFFF;"
               >
                 <dv-border-box-8 >上一次更新时间:{{this.sendTime}}</dv-border-box-8>
-      </div>
-          <!-- <div>当前时间</div> -->
-          <!-- 样品数据总览 -->
+          </div>
+          <!-- 样品头部数据总览 -->
           <div class="overView">
-            <!-- <header-content/> -->
             <headerContent  @getUpdateTime="getTime"></headerContent>
             <dv-decoration-10 style="width:100%;height:5px;" />
           </div> 
@@ -36,19 +37,13 @@
         <!-- 主体内容(图表部分) -->
         <div class="mainContent">
           <div class="entrust">
-            <div class="entrustNumber" ref="Number_refs">
-              <!-- 委托样品条目情况组件 -->
-              <entrust-number/>
-            </div>
-            <!-- 委托样品类型组件 -->
-            <div class="entrustType" >
-              <entrust-type/>
-            </div>
+            <div class="Number" ref="Number_refs"><entrustNumber/> </div>
+            <div class="Type" ><entrustType/></div>
           </div>
           <div class="detection">
-            <div class="monthlyStatus" ref="MonthlyStatus_refs"><monthlyStatus/></div>
-            <div class="monthlyNumber" ref="MonthlyNumber_refs"><monthlyNumber/></div>
-            <div class="annualStatus" ref="AnnualStatus_refs"><annualStatus/></div>
+            <div class="monthlyS" ref="MonthlyStatus_refs"><monthlyStatus/></div>
+            <div class="monthlyN" ref="MonthlyNumber_refs"><monthlyNumber/></div>
+            <div class="annualS" ref="AnnualStatus_refs"><annualStatus/></div>
           </div>
         </div>
         
@@ -126,7 +121,7 @@ export default {
 }
 </script>
 
-<style lang="less" >
+<style lang="less" scoped>
 *body{
   padding: 0px;
   margin: 0px;
@@ -134,103 +129,93 @@ export default {
 .data-view {
   width: 100%;
   height: 100%;
-  // position: absolute;
   color: #fff;
   z-index: 9999;
   #dv-full-screen-container {
     background-image: url('./img/stars.png');
     background-size: 100% 100%;
-    // box-shadow: 0 0 3px blue;bete
-    // display: flex;
-    // flex-direction: column;
-    display: flex;
-    flex-direction:column;
-    align-items: stretch;
-    
-   .headerContent{
-    flex: 1;
-    
-    // background-color: rgb(99, 12, 41);
-    
-
-   }
-   .goBackButton{ 
-      width: 10%;
-      cursor: pointer;
-      height:2.825rem;
-      line-height: 2.825rem;
-      text-align:center;
-      margin-left:20%;
-      margin-top:-60px;
-      flex: 1;
-      position: absolute;
-      color: #FFFFFF;
-   }
-   .mainContent{
-    width: 100%;
-    height: 100%;
-    flex: 4;
     display: flex;
     flex-direction:column;
-    // align-items: stretch;
-    // align-items: flex-start;
-    align-content:space-between;
-    // margin-top: 20px;
+    align-items: center;
+    .headerContent{
+      width: 100%;
+      height: 19%;
+      // border: 1px solid rgb(197, 17, 41);
+      .goBackButton{ 
+        width: 10%;
+        cursor: pointer;
+        height:2.825rem;
+        line-height: 2.825rem;
+        text-align:center;
+        margin-left:20%;
+        margin-top:-60px;
+        flex: 1;
+        position: absolute;
+        color: #FFFFFF;
+      }
+      .overView{
+        width: 100%;
+        height: 80px;
+      }
+    }
     
-    // background-color: rgb(12, 99, 58);
-      .entrust{
-      // width: 100%;
-      flex: 1;
-      // border: 1px solid rgb(25, 156, 91);
-      // background-color: rgb(6, 47, 161);
+    .mainContent{
+      width: 100%;
+      height:80%;
       display: flex;
-      justify-content:space-between;
-      margin-bottom: 15px ;
-        .entrustNumber{
-          flex: 5;
-          margin-right: 10px;
-          // background-color: rgb(25, 97, 156);
+      flex-direction:column;
+      align-content:space-between;
+      // border: 1px solid rgb(71, 17, 197);
+        .entrust{
+        width: 100%;
+        height: 48%;
+        display: flex;
+        justify-content:space-between;
+        // border: 1px solid rgb(17, 110, 197);
+          .Number{
+            width: 62%;
+            height: 100%;
+            display: flex;
+            justify-content: center;
+            // background-color: rgb(171, 163, 204);
+          }
+          .Type{
+            width: 37.5%;
+            height: 100%;
+            margin-left: 10px;
+            // background-color: rgb(12, 103, 131);
+          
+          }
         }
-        .entrustType{
-          flex: 3;
-         
-        }
-      }
 
-      .detection{
-      // width: 100%;
-      flex: 1;
-      display: flex;
-      // border: 1px solid rgb(39, 3, 59);
-      // background-color: rgb(226, 77, 134);
-        .monthlyStatus{
-          flex: 1;
+        .detection{
+          width: 100%;
+          height: 48%;
+          margin-top: 15px;
+          display: flex;
+          justify-content:space-between;
+          // border: 1px solid rgb(142, 190, 30);
+          .monthlyS{
+            width: 23%;
+            height: 100%;
+            // background-color: rgb(12, 103, 131);
+          }
+          .monthlyN{
+            flex: 3;
+            width: 50%;
+            height: 100%;
+            margin: 0px 10px;
+            // background-color: rgb(171, 163, 204);
+          }
+          .annualS{
+            width: 23%;
+            height: 100%;
+            // background-color: rgb(12, 103, 131);
+          }
         
-          // background-color: rgb(25, 156, 91);
         }
-        .monthlyNumber{
-          flex: 3;
-          margin: 0px 10px;
-          // background-color: rgb(39, 3, 59);
-        }
-        .annualStatus{
-          flex: 1;
-        // margin-right: 10px;
-        // background-color: rgb(25, 156, 91);
-        }
-      
-      }
-   
-
-  
-  }
- 
-    .overView{
-      width: 100%;
-      height: 80px;
-    }
-  
-}
+    } 
+  } 
 }
 
 </style>

src/views/warehouse/inconformity.vue

@@ -5,36 +5,36 @@
   <div class="audit">
     
     <!-- 1.不符合条款统计柱状图 -->
-    <div class="audit_title">不符合条款统计情况</div>
+    <div class="audit_title">
+      <span class="title">不符合条款统计情况</span>
+      <!-- //数据更新没有触发视图更新 -->
+      <!-- <el-date-picker
+        class="selectorYear"
+        v-model="annual"
+        @change="changeAnnual"
+        type="year"
+        placeholder="选择年">
+      </el-date-picker>
+      <el-select v-model="value" placeholder="请选择" class="selectorType" @change="changeType">
+        <el-option
+          v-for="item in options"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value">
+        </el-option>
+      </el-select> -->
+      <!-- 路由 -->
+      <p>{{this.$route.params.id}}</p>
+    </div>
     <!-- 图表 -->
     <div class="audit_content">
       <div  class="clauseA">
-        <el-select v-model="value1" placeholder="请选择" class="selectorA" @change="changeTypeA">
-          <el-option
-            v-for="item in options1"
-            :key="item.value1"
-            :label="item.label"
-            :value="item.value1">
-          </el-option>
-        </el-select>
         <div  class="clauseA_content" ref="clauseA_refs"></div>
       </div>
-      <div  class="clauseB" >
-        <el-select v-model="value2" placeholder="请选择" class="selectorB" @change="changeTypeB">
-          <el-option
-            v-for="item in options2"
-            :key="item.value2"
-            :label="item.label"
-            :value="item.value2">
-          </el-option>
-        </el-select>
+      <div  class="clauseB">
         <div class="clauseB_content" ref="clauseB_refs"></div>
       </div>
     </div>
-
- 
-     
-
     <!-- 暂时撤掉的需求（条款分布统计，条款组统计） -->
 
     <!-- <div class="pieChart">
@@ -51,51 +51,39 @@
       </dv-border-box-7>  
     </div>
     </div> -->
-
-    
-   
-    
   </div>
 </template>
 
 <script>
  import curdPost from '@/business/platform/form/utils/custom/joinCURD.js'
 export default {
-
   data(){
     return{
-      options1: [{
-          value1: '常规内审',
-          label: '常规内审'
-        }, {
-          value1: '附加内审',
-          label: '附加内审'
-        }, {
-          value1: '日常监督',
-          label: '日常监督'
-        },{
-          value1: '外部审核',
-          label: '外部审核'
-        }],
-        options2: [{
-          value2: '常规内审',
+
+      options: [{
+          value: '常规内审',
           label: '常规内审'
         }, {
-          value2: '附加内审',
+          value: '附加内审',
           label: '附加内审'
         }, {
-          value2: '日常监督',
+          value: '日常监督',
           label: '日常监督'
         },{
-          value2: '外部审核',
+          value: '外部审核',
           label: '外部审核'
         }],
-        value1: '常规内审',
-        value2: '常规内审',
+        value: '常规内审',
+        // date:{},
+        annual:'',
         clause:null,
         titleNumA:{},
         regulation:null,
-        titleNumB:{}
+        titleNumB:{},
+        //计划总外键
+        id:'',
+        type:'',
+        clause:''
         // categories:null,
         // department:null,
         // newArray:[],
@@ -103,37 +91,84 @@ export default {
         
     }
   },
-  
+  created(){
+    // this.getNowAnnual()
+   
+    // this.$axios.get().then(res =>{
+    //   this.data ={}
+    //   this.data.value=res
+    // })
+    // data:{}
+    // {{data.value}}
+  },
   mounted(){
-    this.getRetentionData(this.value1);
-    this.getInconformityData(this.value2)
+    this.id = this.$route.query.id
+    this.type = this.$route.query.type
+    this.clause = this.$route.query.clause
+    // console.log('444444',this.id)
+    // console.log('555555',this.type)
+    // console.log('666',this.clause)
    
+    // this.id = this.$route.params.item.id
+    //组件加载时获取评审类型
+    // this.getRetentionData(this.value);
+    // this.getInconformityData(this.value)
+   this.getType(this.type,this.id);
   },
   methods:{
-    changeTypeA(e){
-      this.value1 = e
-      //e是value,
-      // console.log('改变类型',this.value1)
-      this.getRetentionData(this.value1)
-    },
-    changeTypeB(e){
-      this.value2 = e
-      console.log('改变类型',this.value2)
-      this.getInconformityData(this.value2)
-    },
+    //如果传过来的standardNumber="17025"
+    //页面进来获取当前年度
+    // getNowAnnual(){
+    //   const nowDate = new Date();
+    //   const date = { year: nowDate.getFullYear() }
+      // console.log('获取年度',nowDate)
+      // console.log('当前年度',date)
+      // console.log('date.year',date.year)
+      // this.annual = date.year
+      // this.annual = date.year
+      // this.$set(this.annual,'annual',this.annual)
+      
+      //修改的数组或对象，修改的对象名，修改成功的值
+      // Vue.set(target,propertyName/index, value)
+      // this.$set(this.date,'annual',this.date.annual)
+      // console.log('this.date.annual111',this.date.annual)
+      // console.log('this.$set方法',this.$set)
+      // Vue.set(this.namelist,1,{message:"yeluosen",id:"1"})
+     
+      
+    // },
+    //用户操作获取评审类型
+    // changeType(e){
+    //   this.value = e
+    //   this.getRetentionData(this.value)
+    //   this.getInconformityData(this.value)
+    // },
+    
+
 
-    //RBT 214_2017不符合项执行情况页面的数据
-    getRetentionData(type){
-      // let sql = "select  a.bu_fu_he_xiang_ti from t_bfhxbgyjzcsjlbx a where a.biao_zhun_bian_ha like '%RB-T 214-2017%' order by a.create_time_   desc"
+
+    // //RBT 214_2017不符合项执行情况页面的数据
+    getType(type,id) {
+      // console.log("getType type is ", type === '17025');
+      if(type === 'RB-T 214-2017'){
+        this.getRetentionData(id)
+  
+      }else if(type === '17025'){
+        this.getInconformityData(id)
+      }
+    },
+    getRetentionData(id){
+      // console.log("getRetentionData id is ", id);
+      let sql = "select  a.biao_zhun_bian_ha,a.bu_fu_he_xiang_ti, a.bu_fu_he_bao_gao_  FROM t_bfhxbgyjzcsjlbx a WHERE CONCAT(a.biao_zhun_bian_ha) LIKE   '%RB-T 214-2017%' AND a.ji_hua_zong_wai_j='"+id+"' ORDER BY a.create_time_ DESC"      
       //某一类型(常规，附加，日常，外部)的 标准编号为"RB-T 214-2017"的  按时间降序的  不符合数据（标准号，条款号，类型）
-      let sql ="select  a.biao_zhun_bian_ha,a.bu_fu_he_xiang_ti, a.bu_fu_he_bao_gao_  from t_bfhxbgyjzcsjlbx a where concat(a.biao_zhun_bian_ha) like '%RB-T 214-2017%' and concat(a.bu_fu_he_bao_gao_) like '%"+type+"%' order by a.create_time_ desc"
+      //let sql ="select  a.biao_zhun_bian_ha,a.bu_fu_he_xiang_ti, a.bu_fu_he_bao_gao_  from t_bfhxbgyjzcsjlbx a where concat(a.biao_zhun_bian_ha) like '%RB-T 214-2017%' and concat(a.bu_fu_he_bao_gao_) like '%"+type+"%' order by a.create_time_ desc"
       curdPost('sql',sql).then(response => { 
       let data = response.variables.data 
-      console.log('RB-T214-2017常规内审的',data)
+      // console.log('RB-T214-2017常规内审的',data)
       let titleList = data.map(item => {
         return item.bu_fu_he_xiang_ti
       })
-      console.log('不符合条款',titleList)
+      // console.log('不符合条款',titleList)
       //计算条款数量，以对象形式返回
       this.titleNumA = titleList.reduce((pre,cur)=>{
         if(cur in pre){
@@ -143,8 +178,8 @@ export default {
         }
         return pre
       },{})
-      console.log('条款对应数量',this.titleNumA)
-      this.clauseInit(this.titleNumA);
+      // console.log('条款对应数量',this.titleNumA)
+      this.clauseInit(this.titleNumA,titleList.length);
       //-----------------------------------
       //条款号，数量；以数组对象形式返回
       // let newArray = [];
@@ -174,8 +209,11 @@ export default {
    },
    
    //17025 不符合项执行情况
-   getInconformityData(type){
-      let sql ="select a.bu_fu_he_xiang_ti  from t_bfhxbgyjzcsjlbx a where concat(a.biao_zhun_bian_ha) like '%17025%' and concat(a.bu_fu_he_bao_gao_) like '%"+type+"%' order by a.create_time_ desc"
+   getInconformityData(id){
+    // let sql = "select  a.biao_zhun_bian_ha,a.bu_fu_he_xiang_ti, a.bu_fu_he_bao_gao_  FROM t_bfhxbgyjzcsjlbx a WHERE CONCAT(a.biao_zhun_bian_ha) LIKE '%17025%' AND a.ji_hua_zong_wai_j='"+id+"' ORDER BY a.create_time_ DESC"
+      let sql = "select  a.biao_zhun_bian_ha,a.bu_fu_he_xiang_ti, a.bu_fu_he_bao_gao_  FROM t_bfhxbgyjzcsjlbx a WHERE CONCAT(a.biao_zhun_bian_ha) LIKE '%"+17025+"%' AND a.ji_hua_zong_wai_j='"+id+"' ORDER BY a.create_time_ DESC"
+      //获取所有不符合项目
+      //let sql ="select a.bu_fu_he_xiang_ti  from t_bfhxbgyjzcsjlbx a where concat(a.biao_zhun_bian_ha) like '%17025%' and concat(a.bu_fu_he_bao_gao_) like '%"+id+"%' order by a.create_time_ desc"
       curdPost('sql',sql).then(response => { 
       let data = response.variables.data 
       console.log('17025标准的条款号',data)
@@ -192,25 +230,28 @@ export default {
         }
         return pre
       },{})
-      this.regulationInit(this.titleNumB);
+      // console.log('条款对应数量',this.titleNumB)
+      // this.regulationInit(this.titleNumB);
+      this.regulationInit(this.titleNumB,titleList.length);
     
       })
      
    },
     // RBT 214-2017 不符合条款数量统计
-    clauseInit(initData){
+    clauseInit(initData,total){
       var clause = this.$echarts.init(this.$refs.clauseA_refs);
       var clauseOption = {
         title: {
-          text: 'RB/T 214-2017不符合条款数量统计',
+          text: 'RB/T 214-2017不符合条款统计',
+          subtext: '总计:'+ total,
           textStyle: {
             // color: '#fff',
-            fontSize: 20,
+            fontSize: 14,
             fontWeight: '600'
           },
           textAlign: 'center',
           left: '50%',
-          top: '20px'
+          top: '10px'
         },
        
         //鼠标悬浮显示效果
@@ -223,11 +264,13 @@ export default {
        
         grid: {
           left: '3%',
-          right: '5%',
-          bottom: '25%',
+          right: '18%',
+          bottom: '12%',
+          top:'16%',
           containLabel: true
         },
         xAxis: {
+          name:'数量',
           type: 'value',
           // boundaryGap: [0, 0.01],
           splitLine: {
@@ -235,6 +278,7 @@ export default {
           },
         },
         yAxis: {
+          name:'条款编号',
           type: 'category',
           //条款编号
           data:Object.keys(initData)
@@ -243,7 +287,8 @@ export default {
           {
             name: 'RB-T214-2017',
             type: 'bar',
-            data:Object.values(initData)
+            data:Object.values(initData),
+            barWidth: '25%',
           },
         ]
       }
@@ -251,18 +296,22 @@ export default {
 
     },
     //17025 不符合条款数量统计
-    regulationInit(regulationData){
+    regulationInit(regulationData,total){
       var regulation = this.$echarts.init(this.$refs.clauseB_refs);
+    //   var mWidth = $(".entrustNumber").width();  // 获取父节点宽高
+    // var mHeight = $(".entrustNumber").height();
+    // chart_preHist.resize({width:mWidth, height:mHeight})
       var regulationOption = {
         title: {
-          text: '17025 不符合条款数量统计',
+          text: 'CNAS-Cl01:2018不符合条款统计',
+          subtext: '总计:'+ total,
           textStyle: {
-            fontSize: 20,
+            fontSize: 14,
             fontWeight: '600'
           },
           textAlign: 'center',
           left: '50%',
-          top: '20px'
+          top: '10px'
         },
        
         //鼠标悬浮显示效果
@@ -275,11 +324,13 @@ export default {
        
         grid: {
           left: '3%',
-          right: '10%',
-          bottom: '25%',
+          right: '18%',
+          bottom: '12%',
+          top:'16%',
           containLabel: true
         },
         xAxis: {
+          name:'数量',
           type: 'value',
           // boundaryGap: [0, 0.01],
           splitLine: {
@@ -287,6 +338,7 @@ export default {
           },
         },
         yAxis: {
+          name:'条款编号',
           type: 'category',
           data:Object.keys(regulationData)
         },
@@ -294,7 +346,8 @@ export default {
           {
             name: '17025',
             type: 'bar',
-            data:Object.values(regulationData)
+            data:Object.values(regulationData),
+            barWidth: '25%',
           },
         ]
       }
@@ -438,13 +491,14 @@ export default {
 </script>
 
 <style  lang="scss" scoped>
-*padding,body{
+*body{
   padding: 0px;
   margin: 0px;
 }
 .audit{
-  width: 100%;
-  height: 100%;
+  width: 100vw;
+  height: 100vh;
+  // border: 2px solid rgb(53, 5, 129);
   
   .audit_title{
     width: 100%;
@@ -453,40 +507,57 @@ export default {
     line-height: 50px;
     font-weight: 600;
     font-size: 20px;
+    position: relative;
+    .title{
+      height: 50px;
+      line-height: 50px;
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      margin-left: -170px;
+      margin-top: -25px;
+      font-size:16px;
+      font-weight:600;
+
+    }
+    .selectorYear{
+      position: absolute;
+      width: 100px;
+      height: 30px;
+      left: 20px;
+    }
+    .selectorType{
+      position: absolute;
+      width: 100px;
+      height: 30px;
+      left: 120px;
+    }
   }
   
   .audit_content{
     width: 100%;
     height: calc(100% - 50px);
+    
     display: flex;
-    justify-content:space-between ;
-    // align-items:flex-start;
+    justify-content:flex-start ;
     .clauseA{
-      width: 100vw;
-      height: 100vh;
-      .selectorA{
-        width: 100px;
-        height: 30px;
-        margin:10px;
-      }
+      width: 25%;
+      height: 50%;
       .clauseA_content{
         width: 100%;
         height: 100%;
+        // border: 2px solid rgb(50, 136, 93);
 
       }
       
     }
     .clauseB{
-      width: 50%;
-      height: 100%;
-      .selectorB{
-        width: 100px;
-        height: 30px;
-        margin:10px;
-      }
+      width: 25%;
+      height: 50%;
       .clauseB_content{
         width: 100%;
         height: 100%;
+        // border: 2px solid rgb(136, 50, 103);
 
       }
     }

src/views/warehouse/index.js

@@ -0,0 +1,3 @@
+import inconformity from './inconformity'
+
+export default inconformity

src/views/warehouse/progressFollow.vue

@@ -5,65 +5,87 @@
     
     <div class="tracking_title">不符合及纠正跟踪列表</div>
     <div class="table_content">
-    
       <!-- 每次截取从当前页码开始*页容量
         第一页  0，页容量
         第二页  10 = 当前页码-1*页容量，20 -->
         <!-- :data="dataList.slice((currentPage - 1) * pageSize,currentPage*pageSize)" -->
+        <!--  -->
       <el-table
-      :data="dataList.slice((currentPage - 1) * pageSize,currentPage*pageSize)"
-      :header-cell-style="{background:'#409EFF'}"
-      style="{width: 100%}"
-      row-key="id"
-      stripe
-     height="740px"
-      border
-      lazy
-      :load="load"
-      :span-method="objectSpanMethod"
-        >
-        <el-table-column
-      type="selection"
-      width="55">
-    </el-table-column>
-      <!-- <el-table-column
+        :data="dataList.slice((currentPage - 1) * pageSize,currentPage*pageSize)"
+        :header-cell-style="{background:'#409EFF'}"
+        style="{width: 100%}"
+        row-key="id"
+        stripe
+        height="740px"
+        border
+        lazy
+        :load="load"
+        :span-method="objectSpanMethod">
+      <el-table-column
+        type="selection"
+        width="55">
+      </el-table-column>
+       <!-- <el-table-column
       prop="id"
       label="流程id"
       sortable
       :index="indexMethod"
       width="180"> 
-      </el-table-column>-->
+      </el-table-column> -->
       <el-table-column
-      prop="type"
-      label="不符合项类型"
-      width="180">
-    </el-table-column>
+        prop="name"
+        label="表单名称"
+        width="220">
+        
+      </el-table-column>
       <el-table-column
-      prop="department"
-      label="被内审部门"
-      width="180">
+        prop="type"
+        label="类型"
+        width="180">
       </el-table-column>
       <el-table-column
-      prop="standardNumber"
-      label="不符合标准编号">
+        prop="department"
+        label="被内审部门"
+        width="180">
       </el-table-column>
       <el-table-column
-      prop="termsNumber"
-      label="不符合项条款编号">
+        prop="standardNumber"
+        label="标准编号">
       </el-table-column>
       <el-table-column
-      prop="completion"
-      label="完成情况">
+        prop="termsNumber"
+        label="条款编号">
       </el-table-column>
       <el-table-column
-      prop="date"
-      label="开立不符合项时间">
+        prop="completion"
+        label="状态">
+      </el-table-column>
+      <el-table-column
+        prop="date"
+        label="开立时间">
+      </el-table-column>
+      <el-table-column
+        prop="date"
+        label="详情">
+        <!-- <template slot-scope="scope">
+              查看报告页按钮
+              <router-link to="/doctor/firstanalysis/hla1seachReport2">
+                <el-button @click="seach(scope.row)" type="disabled" size="mini" prop="id">查 看</el-button>
+              </router-link>
+            </template> -->
+      <!-- 查看此流程id下所有的不符合条款号，条款数量 -->
+      <template slot-scope="scope">
+        <!-- <router-link to="https://www.baidu.com/"> -->
+          <el-button  @click="toHome(scope.row)" type="disabled" size="mini" prop="id">查 看</el-button>
+        <!-- </router-link> -->
+      </template>
+        <!-- <template>
+          <el-button @click="goTo()" type="text" size="small">查看</el-button>
+        </template> -->
+        <!-- <router-link to='/inconformity'>
+          <button>点击跳转2</button>
+        </router-link> -->
       </el-table-column>
-      <!-- <el-table-column
-      prop="date"
-      label="当前责任人">
-      </el-table-column> -->
-     
       </el-table>
       
     </div>
@@ -75,9 +97,7 @@
       :page-sizes="[10, 20, 30, 40,50]"
       :total="dataList.length"
       :page-size="pageSize"
-      :current-page="currentPage"
-      
-      >
+      :current-page="currentPage">
     </el-pagination>
   </div>
 
@@ -95,6 +115,7 @@
         currentPage: 1,  //当前页码，前往第5页
         //页码总数
         // pageTotal:0,
+        spanArr: [],
      
       }
     },
@@ -107,26 +128,76 @@
     mounted(){
     },
     methods: {
+      toHome(item){
+        // console.log('111111111',item)
+        this.$router.push({
+          path:'/inconformity',
+          query:{
+            id:item.id,
+            //条款类型
+            type:item.standardNumber,
+            //条款编号
+            clause:item.termsNumber
+          }
+          
+          // params:{
+          //   id:item.id
+          // }
+          // params: {type:item},
+        
+        })
+      // console.log('1111',params)
+		 },
+      // handleClick(row) {
+      //   console.log('点击查询按钮跳转页面',row);
+      // },
+      // goTo(){
+      //   this.$router.push('./inconformity.vue')
+      // },
+      //合并第二项和第十项
+      // objectSpanMethod({ row, column, rowIndex, columnIndex }) {
+      //   //表格合并行
+      //   if (columnIndex === 0) {
+      //     const _row = this.spanArr[rowIndex];
+      //     const _col = _row > 0 ? 1 : 0;
+      //     return {
+      //       rowspan: _row,
+      //       colspan: _col
+      //     };
+      //   }
+        // if (columnIndex === 9) {
+        //   const _row = this.spanArr[rowIndex];
+        //   const _col = _row > 0 ? 1 : 0;
+        //   return {
+        //     rowspan: _row,
+        //     colspan: _col
+        //   };
+        // }
+      // },
       //每页n条
       handleSizeChange(val) {
-      // this.currentPage = 1;
+      this.currentPage = 1;
       this.pageSize = val;
-      console.log(`每页 ${val} 条`);
+      // console.log(`每页 ${val} 条`);
     },
     //当前页改变时触发 跳转其他页
     handleCurrentChange(val) {
       this.currentPage = val;
-      console.log(`当前页: ${val}`);
+      // console.log(`当前页: ${val}`);
     },
     //获取受审核部门的id的对应部门    最后按照部门
       getInconformityData(){
-        let sql1 = "select a.ji_hua_zong_wai_j,a.bu_fu_he_bao_gao_,b.name_, a.biao_zhun_bian_ha,a.bu_fu_he_xiang_ti,a.zhuang_tai_,a.ri_qi_ from t_bfhxbgyjzcsjlbx a left join ibps_party_org b on a.shou_shen_he_bu_m=b.id_ order by a.create_time_  desc"
+        //内审不符合
+        let sql1 = "select a.ji_hua_zong_wai_j,a.bu_fu_he_bao_gao_,b.name_, a.biao_zhun_bian_ha,a.bu_fu_he_xiang_ti,a.zhuang_tai_,a.ri_qi_ FROM t_bfhxbgyjzcsjlbx a LEFT JOIN ibps_party_org b ON a.shou_shen_he_bu_m=b.id_ WHERE a.bu_fu_he_bao_gao_ != '日常监督' AND a.bu_fu_he_bao_gao_ != '外部审核'  ORDER BY a.create_time_  DESC"
+        //所有不符合
+        //let sql1 = "select a.ji_hua_zong_wai_j,a.bu_fu_he_bao_gao_,b.name_, a.biao_zhun_bian_ha,a.bu_fu_he_xiang_ti,a.zhuang_tai_,a.ri_qi_ from t_bfhxbgyjzcsjlbx a left join ibps_party_org b on a.shou_shen_he_bu_m=b.id_ order by a.create_time_  desc"
         curdPost('sql',sql1).then(response => { 
           let data = response.variables.data
-          console.log('计划总外键',data)
+          // console.log('计划总外键',data)
           //对从年度计划 或内审实施计划 流程过来 创建的不符合项  返回result
           // const result =  data.filter(item => item.ji_hua_zong_wai_j !=='' && item.ji_hua_zong_wai_j)
           this.dataList = data.map((item)=>({
+            name:"不符合项报告与纠正措施记录列表",
             id:item.ji_hua_zong_wai_j,
             type:item.bu_fu_he_bao_gao_,
             department:item.name_,
@@ -136,7 +207,7 @@
             date:item.ri_qi_,
 
           }));
-          console.log('选出所需要的数据',this.dataList)
+          // console.log('选出所需要的数据',this.dataList)
          
           //对完成情况进行处理  !== "已完成"
           this.dataList = this.dataList.map(item=>{
@@ -152,7 +223,7 @@
              
             }
           })
-          console.log('执行情况数据',this.dataList)
+          // console.log('执行情况数据',this.dataList)
            // 排序(对有效流程的流程id) 做流程id合并（先排序，后分页）
           //  function compare(property){
           //   return function(a,b){
@@ -174,7 +245,7 @@
             }
           }
           this.dataList = this.dataList.sort(compare('type'))
-          console.log('不符合项类型排序后数据',this.dataList)
+          // console.log('不符合项类型排序后数据',this.dataList)
         })
 
       },
@@ -217,7 +288,7 @@
 }
 .table_content{
   width: 100%;
-  height: calc(100%-86px);
+  height: calc(100% - 50px);
 
 }
 .paging_block{
@@ -231,6 +302,7 @@
   border-top: 1px solid rgb(233, 222, 222);
   padding-top: 6px;
   background-color: rgb(250, 250, 250);
+  z-index:1000;
 }
 }