样品看板切换时间bug

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

@@ -2,29 +2,107 @@
   <!-- 年度检测完成情况(环形图) -->
   <div  class="annualStatus">
     <dv-border-box-7 backgroundColor="rgba(6, 30, 93, 0.5)" >
-        <div class="annualStatus_title">年度检测情况统计</div>
-        <div class="annualStatus_content" ref="AnnualStatus_refs"></div>
+      <div class="annualStatus_title">
+        <span class="annualStatus">年度检测情况统计</span>
+        <el-date-picker
+          class="chooseMonth"
+          v-model="NowTime"
+          type="year"
+          @change="changeTime"
+          format="yyyy" 
+          value-format="yyyy"
+          placeholder="请选择时间">
+        </el-date-picker>
+      </div>
+      <div class="annualStatus_content" ref="AnnualStatus_refs"></div>
     </dv-border-box-7>  
   </div>
 </template>
 
 <script>
+import curdPost from '@/business/platform/form/utils/custom/joinCURD.js'
 export default {
   data(){
     return{
       annualStatus:null,
-      annualTotal:0,
+      NowTime:''
     }
   },
   created(){
-
+    this.getNowTime()
   },
   mounted(){
-    this.annualStatusData()
-
+    this.getCheckSampleData()
   },
   methods:{
-    annualStatusData(){
+    //页面进来显示当前时间
+    getNowTime(){
+      const nowDate = new Date();
+      const date = {
+        year: nowDate.getFullYear()
+        // month: nowDate.getMonth() + 1,
+      }
+      // this.NowTime = date.year
+      this.NowTime = date.year  + '-' 
+    },
+    //用户操作改变时间
+    changeTime(e){
+      // console.log('改变时间',e) //2022-07
+      let year = e.slice(0,4)
+      let month = e.slice(5,7)
+      this.NowTime = year
+      // this.NowTime = year + '-' + month
+      this.getCheckSampleData()
+    },
+    //查询函数
+    getCheckSampleData(){
+      let sql1 = "select yang_pin_bian_hao,DATE_FORMAT(create_time_,'%Y-%m-%d') AS detectionTime FROM t_mjjcbg WHERE yang_pin_bian_hao != ''  AND create_time_ LIKE '"+this.NowTime+'%'+"' GROUP BY yang_pin_bian_hao"
+      let sql2="select yang_pin_bian_hao,DATE_FORMAT(MIN(create_time_),'%Y-%m-%d') AS detectionTime FROM t_jchzb WHERE jian_ce_zhuang_ta != '已完成' AND yang_pin_bian_hao !=''  AND create_time_ LIKE '"+this.NowTime+'%'+"' GROUP BY yang_pin_bian_hao"
+      Promise.all([
+        curdPost('sql', sql1),
+        curdPost('sql', sql2),
+      ]).then(([ res1, res2]) => {
+        let data1 = res1.variables.data.length
+        let data2 = res2.variables.data.length
+        let data3 = data1+ data2
+        // console.log('hhhhhhhhhh',data1,data2,data3)
+        this.annualStatusData(data1,data2,data3)
+      })
+    },
+     //页面进来显示当前时间
+    //  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) //2022-07
+    //   let year = e.slice(0,4)
+    //   let month = e.slice(5,7)
+    //   this.NowTime = year + '-' + month
+    //   this.getCheckSampleData()
+    // },
+    //查询函数
+    // getCheckSampleData(){
+    //   let sql1 = "select yang_pin_bian_hao,DATE_FORMAT(create_time_,'%Y-%m-%d') AS detectionTime FROM t_mjjcbg WHERE yang_pin_bian_hao != ''  AND create_time_ LIKE '"+this.NowTime+'%'+"' GROUP BY yang_pin_bian_hao"
+    //   let sql2="select yang_pin_bian_hao,DATE_FORMAT(MIN(create_time_),'%Y-%m-%d') AS detectionTime FROM t_jchzb WHERE jian_ce_zhuang_ta != '已完成' AND yang_pin_bian_hao !=''  AND create_time_ LIKE '"+this.NowTime+'%'+"' GROUP BY yang_pin_bian_hao"
+    //   Promise.all([
+    //     curdPost('sql', sql1),
+    //     curdPost('sql', sql2),
+    //   ]).then(([ res1, res2]) => {
+    //     let data1 = res1.variables.data.length
+    //     let data2 = res2.variables.data.length
+    //     let data3 = data1+ data2
+    //     // console.log('hhhhhhhhhh',data1,data2,data3)
+    //     this.annualStatusData(data1,data2,data3)
+    //   })
+    // },
+    //年度统计情况图表
+    annualStatusData(data1,data2,data3){
       var annualStatus = this.$echarts.init(this.$refs.AnnualStatus_refs);
       var annualStatusOption ={
         grid:{
@@ -35,7 +113,7 @@ export default {
         },
         title: {
           text: '检测任务总量',
-          subtext: 424,
+          subtext: `${data3}`,
           // center: ["40%", "48%"],
           x: "50%",     //X坐标   
           y: "42%",    //Y坐标
@@ -106,8 +184,8 @@ export default {
               show: false
             },
             data: [
-              { value: 297, name: '已检测' },
-              { value: 127, name: '未检测' },
+              { value: data1, name: '已检测' },
+              { value: data2, name: '未检测' },
              
             ]
           }
@@ -138,12 +216,25 @@ export default {
   .annualStatus_title{
     width: 100%;
     height: 50px;
-    line-height: 50px;
-    text-align: center;
-    font-weight: 600;
-    font-size: 20px;
-    color: '#fff';
+    position: relative;
+    .annualStatus{
+      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;
+    }
   }
+  
   .annualStatus_content{
     width: 100%;
     height: calc(100% - 50px);

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

@@ -21,6 +21,7 @@
 
 <script>
  import curdPost from '@/business/platform/form/utils/custom/joinCURD.js'
+import { resolve } from 'path';
 export default {
   data(){ 
     return{
@@ -30,227 +31,396 @@ export default {
       days:[],
       //月份天数
       day:0,
-      //已收到样品数据
-      received:[],
-      //不合格样品数据
+      //填充数量的数组
+      filledNum:[],
+
+      // //已收到要填充的数组
+      // ReceivedNum:[],
+      // //不合格要填充的数据
+      // UnqualifiedNum:[],
+      // //留样要填充的数据
+      // RetentionNum:[],
+      //  //已收到样品数据
+      //  received:[],
+      // //不合格样品数据
       // unqualifiedData:[],
-      //留样样品数据
-      retentionData:[],
-      //需要填充的数组
-      newArrayNum:[]
-}
-  },
-  created(){
-    // this.getUnqualifiedData()
+      // //留样样品数据
+      // retentionData:[],
+      
+    }
   },
   mounted() {
     this.getNowTime()
   },
-methods:{
+  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)
       //进来获取当前时间 之后获取当前月份天数 传给
+      // console.log('页面显示的时间',this.NowTime)  //2022-11
+      //把页面第一次进来的 当前年度月份 传给该方法处理 得到day及days
       this.getDaysInMonth(date.year,date.month)
       
     },
    
 
-  //手动操作时间控件改变时间
-  changeTime(e){
-    // 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(); 
-    // 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.getReceivedData(this.day)
-   
+    //手动操作时间控件改变时间
+    changeTime(e){
+      // console.log('改变时间',e) //2022-07
+      let year = e.slice(0,4)
+      let month = e.slice(5,7)
+      this.NowTime = year + '-' + month
+      // console.log('用户操作之后 页面显示的时间',this.NowTime,year,month) //2022-11 2022 11
+      //把年度月份传给getDaysInMonth()之前，先清理上一次数据
+      // this.entrustNumber.diswpose()  //这个方法干嘛的？？ 为啥清不掉entrustNumberInit()方法的数据
+      this.days=[]
+      //在这里打印一下this.days数组
+      // console.log('用户操作了时间控件之后打印this.days数组',this.days)
+      //把用户操作时间控件改变的时间 的年度月份 传给该方法处理 得到day及days
+      this.getDaysInMonth(year,month)
     
-    
-  },
+    },
+    //拿到当前年度 月份 获取当前月份的天数day及【天数数组】days
+    getDaysInMonth(year,month){
+      let temp = new Date(year,month,0);
+      this.day = temp.getDate(); 
+      // console.log('处理好的年 月 月份天数',year,month,this.day);   //2022 11 30
+      //把月份对应天数转化为数组
+      for( let i=1;i <= this.day ;i++){
+        this.days.push(i)
+      }
+      // console.log('月份每一天',this.days)
+      this.getdemandData(this.day)
+      
+    },
 
-  //
-  //1.已收到：样品登记表有数据
-  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)
+    getdemandData(dayNum){
+      // console.log('返回的全部数据 传日期到sql查询',this.NowTime,dayNum)
+      //SELECT shou_yang_ri_qi_ FROM t_mjypdjb WHERE yan_shou_zhuang_t = '残缺'  AND shou_yang_ri_qi_ LIKE '2022-11%'   //不合格
+      //SELECT liu_yang_ri_qi_,liu_yang_shu_lian FROM (SELECT * FROM t_mjypdjb WHERE  liu_yang_ri_qi_ ='' ) a WHERE   a.shi_fou_liu_yang_ != '否' AND shou_yang_ri_qi_ LIKE '2022-11%'  //留样
+      let sql1 = "select shou_yang_ri_qi_,shou_yang_shu_lia FROM t_mjypdjb WHERE shou_yang_ri_qi_ LIKE '"+this.NowTime+'%'+"'"
+      let sql2 ="select shou_yang_ri_qi_,shou_yang_shu_lia FROM t_mjypdjb WHERE yan_shou_zhuang_t = '残缺'  AND shou_yang_ri_qi_ LIKE '"+this.NowTime+'%'+"'"
+      let sql3 = "select liu_yang_ri_qi_,liu_yang_shu_lian FROM (SELECT * FROM t_mjypdjb WHERE  liu_yang_ri_qi_ ='' ) a WHERE   a.shi_fou_liu_yang_ != '否' AND shou_yang_ri_qi_ LIKE '"+this.NowTime+'%'+"'"
+      Promise.all([
+        curdPost('sql', sql1),
+        curdPost('sql', sql2),
+        curdPost('sql', sql3),
+      ]).then(([ res1, res2, res3]) => {
+        let data1 = res1.variables.data
+        let data2 = res2.variables.data
+        let data3 = res3.variables.data
+        // console.log('返回的全部数据',data1,data2)
+        // console.log('返回的全部数据',data1,data2,data3)
+        const receivedData = this.dealingData(data1,dayNum)
+        const unqualifiedData = this.dealingData(data2,dayNum)
+        const retentionData = this.dealingRetentionData(data3,dayNum)
+        // console.log('xxxxxxxxx方法返回的数据1   -------',receivedData)
+        // console.log('xxxxxxxxx方法返回的数据2   -------',unqualifiedData)
+        // console.log('xxxxxxxxx方法返回的数据3   -------',retentionData)
+        //三组数据处理完毕之后，传给图表进行渲染  （月份天数数组，已收样，不合格，留样）
+        this.entrustNumberInit(this.days,receivedData,unqualifiedData,retentionData)
+      })
+    },
+    //处理sql查询出来的数据
+    dealingData(data,dayNum){
       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;
+          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);
+      //console.log('日期相同数量相加 处理结果',newArray);
       //创建一个长度为当前月份天数的数组
-      this.newArrayNum = Array(dayNum)
-      this.newArrayNum = this.newArrayNum.fill(0)
-      //console.log('创建对应月份的数组',this.newArrayNum)
+      this.filledNum = Array(dayNum).fill(0)
       //遍历拿到的数组，截取出月份对应的 // 2022-11-01
       newArray.forEach(item =>{
         let key = item.shou_yang_ri_qi_.slice(8,10) < 10 ?item.shou_yang_ri_qi_.slice(9,10) :item.shou_yang_ri_qi_.slice(8,10)
         let value =parseInt(item.shou_yang_shu_lia)
-        this.newArrayNum.splice(key - 1,1,value)
+        this.filledNum.splice(key - 1,1,value)
       })
-      //console.log('处理好的数据',this.newArrayNum)
-      //拿到月份数组和y轴数量数组
-      this.entrustNumberInit(this.days,this.newArrayNum)
-    })
-  },
-  
-  //2.已经收到不合格 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 => { 
-      let data = response.variables.data
-      console.log('不合格样品数据',data )
+      //返回处理好的数量数组
+      return this.filledNum;
+    },
+    //处理留样数据
+    dealingRetentionData(data,dayNum){
       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;
+          let hasValue = total.findIndex(current => {
+            return current.liu_yang_ri_qi_ === cur.liu_yang_ri_qi_;
+          });
+          hasValue === -1 && total.push(cur);
+          hasValue !== -1 && (total[hasValue].liu_yang_ri_qi_ = total[hasValue].liu_yang_ri_qi_ + cur.liu_yang_ri_qi_);
+          return total;
       }, []);
-      //console.log('日期数量11111111',newArray);
-      //创建一个长度为当前月份天数的数组
-      this.newArrayNum = Array(dayNum)
-      this.newArrayNum = this.newArrayNum.fill(0)
-      //console.log('创建对应月份的数组',this.newArrayNum)
-      //遍历拿到的数组，截取出月份对应的 // 2022-11-01
-      newArray.forEach(item =>{
-        let key = item.shou_yang_ri_qi_.slice(8,10) < 10 ?item.shou_yang_ri_qi_.slice(9,10) :item.shou_yang_ri_qi_.slice(8,10)
-        let value =parseInt(item.shou_yang_shu_lia)
-        this.newArrayNum.splice(key - 1,1,value)
+        //console.log('日期相同数量相加 处理结果',newArray);
+        //创建一个长度为当前月份天数的数组
+        this.filledNum = Array(dayNum).fill(0)
+        //遍历拿到的数组，截取出月份对应的 // 2022-11-01
+        newArray.forEach(item =>{
+          let key = item.liu_yang_ri_qi_.slice(8,10) < 10 ?item.liu_yang_ri_qi_.slice(9,10) :item.liu_yang_ri_qi_.slice(8,10)
+          let value =parseInt(item.liu_yang_shu_lian)
+          this.filledNum.splice(key - 1,1,value)
+        })
+        //返回处理好的数量数组
+        return this.filledNum;
+    },
+    //1.已收到：样品登记表有数据
+    getReceivedData(dayNum){
+      // console.log('已收样品传日期到sql查询',this.NowTime)   //2022-11
+      // console.log('getReceivedData function ',dayNum)
+      //let sql2 = "select shou_yang_ri_qi_,shou_yang_shu_lia FROM t_mjypdjb"
+      let sql2 = "select shou_yang_ri_qi_,shou_yang_shu_lia FROM t_mjypdjb WHERE shou_yang_ri_qi_ LIKE '"+this.NowTime+'%'+"'" 
+        curdPost('sql',sql2).then(response => { 
+        let data = response.variables.data
+        // console.log('已收',data,data.length)
+
+        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);
+        //创建一个长度为当前月份天数的数组
+        this.ReceivedNum = Array(dayNum)
+        this.ReceivedNum = this.ReceivedNum.fill(0)
+        //console.log('创建对应月份的数组',this.ReceivedNum)
+        //遍历拿到的数组，截取出月份对应的 // 2022-11-01
+        newArray.forEach(item =>{
+          let key = item.shou_yang_ri_qi_.slice(8,10) < 10 ?item.shou_yang_ri_qi_.slice(9,10) :item.shou_yang_ri_qi_.slice(8,10)
+          let value =parseInt(item.shou_yang_shu_lia)
+          this.ReceivedNum.splice(key - 1,1,value)
+        })
+        //console.log('getReceivedData 处理好的数据',this.ReceivedNum)
+        //拿到月份数组和y轴数量数组
+        this.entrustNumberInit(this.days,this.ReceivedNum)
       })
-      console.log('处理好的数据',this.newArrayNum)
-      //拿到月份数组和y轴数量数组
-      // this.entrustNumberInit(this.days,this.newArrayNum)
+    },
+  
+    //2.已经收到不合格 xx
+    getUnqualifiedData(dayNum){
+      //let sql3 = "select shou_yang_ri_qi_,shou_yang_shu_lia from t_mjypdjb where yan_shou_zhuang_t = '残缺'"
+      let sql3 ="select shou_yang_ri_qi_,shou_yang_shu_lia FROM t_mjypdjb WHERE yan_shou_zhuang_t = '残缺'  AND shou_yang_ri_qi_ LIKE '"+this.NowTime+'%'+"'"
+        curdPost('sql',sql3).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);
+        //创建一个长度为当前月份天数的数组
+        //console.log("getUnqualifiedData function before this newArrayNew is ", this.newArrayNum);
+        this.UnqualifiedNum = Array(dayNum)
+        this.UnqualifiedNum = this.UnqualifiedNum.fill(0)
+        //console.log('创建对应月份的数组',this.UnqualifiedNum)
+        //遍历拿到的数组，截取出月份对应的 // 2022-11-01
+        newArray.forEach(item =>{
+          let key = item.shou_yang_ri_qi_.slice(8,10) < 10 ?item.shou_yang_ri_qi_.slice(9,10) :item.shou_yang_ri_qi_.slice(8,10)
+          let value =parseInt(item.shou_yang_shu_lia)
+          this.UnqualifiedNum.splice(key - 1,1,value)
+        })
+        // console.log('getUnqualifiedData 处理好的数据',this.UnqualifiedNum)
+        return this.UnqualifiedNum;
+        // 到这里说明上面的数据已经处理好了
+        // 可以写return语句将处理好的数据返回
+        //拿到月份数组和y轴数量数组
+        this.entrustNumberInit(this.days,this.UnqualifiedNum)
+        
+        })
+    },
       
-      })
+    //3.留样样品数据xx
+    getRetentionData(dayNum){
+      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 => { 
+        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);
+        //创建一个长度为当前月份天数的数组
+        this.RetentionNum = Array(dayNum)
+        this.RetentionNum = this.RetentionNum.fill(0)
+        //console.log('创建对应月份的数组',this.RetentionNum)
+        //遍历拿到的数组，截取出月份对应的 // 2022-11-01
+        newArray.forEach(item =>{
+          let key = item.shou_yang_ri_qi_.slice(8,10) < 10 ?item.shou_yang_ri_qi_.slice(9,10) :item.shou_yang_ri_qi_.slice(8,10)
+          let value =parseInt(item.shou_yang_shu_lia)
+          this.RetentionNum.splice(key - 1,1,value)
+        })
+        // console.log('getRetentionData 处理好的数据',this.RetentionNum)
+        return this.RetentionNum;
+        })
+
     },
-     
-  //3.留样样品数据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)
-      })
+    //不合格
+    getUnqualifiedData(dayNum){
+      let sql3 = "select * from t_mjypdjb where yan_shou_zhuang_t = '残缺'"
+        curdPost('sql',sql3).then(response => {
+        this.unqualifiedData = response.variables.data
+        let data = response.variables.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);
+        //创建一个长度为当前月份天数的数组
+        this.newArrayNum = Array(dayNum)
+        this.newArrayNum = this.newArrayNum.fill(0)
+        //console.log('创建对应月份的数组',this.newArrayNum)
+        //遍历拿到的数组，截取出月份对应的 // 2022-11-01
+        newArray.forEach(item =>{
+          let key = item.shou_yang_ri_qi_.slice(8,10) < 10 ?item.shou_yang_ri_qi_.slice(9,10) :item.shou_yang_ri_qi_.slice(8,10)
+          let value =parseInt(item.shou_yang_shu_lia)
+          this.newArrayNum.splice(key - 1,1,value)
+        })
+        //console.log('处理好的数据',this.newArrayNum)
+        //拿到月份数组和y轴数量数组
+        this.entrustNumberInit(this.days,this.newArrayNum)
 
-   },
+        })
+    },
   
-  //委托样品图表
-  entrustNumberInit(dayArray,numAray){
-    console.log('拿到日期数组',dayArray)
-    console.log('拿到日期对应数量数组',this.newArrayNum)
-    var entrustNumber = this.$echarts.init(this.$refs.Number_refs);
-    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
+    //委托样品图表
+    entrustNumberInit(dayArray,receivedData,unqualifiedData,retentionData){
+      // console.log('拿到日期数组',dayArray)
+      this.entrustNumber = this.$echarts.init(this.$refs.Number_refs);
+      var entrustNumberOption = {
+          xAxis:{
+            type: "category",
+            //当前月的每一天 数组
+            data: dayArray,
+            splitLine:{
+              show:false
+            },
+            axisLine: {
+              lineStyle: {
+                type: 'solid',
+                color: 'white',//坐标线的颜色   
+              }
+            },
+            axisLabel: {
+              style: {
+                  fill: '#fff'
+              }
+            },
           },
-          axisLine: {
-            lineStyle: {
-              type: 'solid',
-              color: 'white',//坐标线的颜色   
-            }
+          yAxis: {
+            type: "value",
+            name:'数量',
+            axisLine: {
+              lineStyle: {
+                type: 'solid',
+                color: 'white',//坐标线的颜色
+              }
+            },
+            splitLine: {
+              show: false
+            },
           },
-          axisLabel: {
-            style: {
-                fill: '#fff'
-            }
+          grid:{
+            left:'2%',
+            right:"5%",
+            top:'15%',
+            bottom:'2%',
+            containLabel:true
           },
-        },
-        yAxis: {
-          type: "value",
-          name:'数量',
-          axisLine: {
-            lineStyle: {
-              type: 'solid',
-              color: 'white',//坐标线的颜色
-            }
+          // tooltip悬浮提示框
+          tooltip:{
+            show:true
           },
-          splitLine: {
-            show: false
+          //图例的位置
+          legend: {
+            show:true, 
+            orient: 'horizontal',  //horizontal 水平排列
+            top:'0',
+            left:'center',
+            lineStyle:{},
+            textStyle: {
+              color: '#fff',
+            },
           },
-        },
-        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,
           },
-        },
-        //隐藏刻度线
-        axisTick:{
-          show:false,
-        },
-        series: [
-          {
-            type:"bar",
-            // type: 'line',
-            name:'已收到样品',
-            label: {
-              show: true,
-              position: 'top',
-              color:'#fff'
+          series: [
+            {
+              type:"bar",
+              name:'已收到样品',
+              //显示数字的颜色
+              label: {
+                show: true,
+                position: 'top',
+                color:'#fff'
+              },
+              //柱子的颜色
+              itemStyle:{
+                show:true,
+                color:'rgba(0, 186, 255, 0.4)',
+              },
+              data:receivedData 
             },
-            //柱子的颜色
-            itemStyle:{
-              show:true,
-              color:'rgba(0, 186, 255, 0.4)',
+            {
+              type: 'line',
+              name:'不合格样品',
+              label: {
+                show: true,
+                position: 'top',
+                color:'#f5f12a'
+              },
+              //柱子的颜色
+              itemStyle:{
+                show:true,
+                color:'rgba(245, 241, 42, 0.4)',
+              },
+              data:unqualifiedData 
             },
-            //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],
-            data:numAray 
-          },
-        ],
+            {
+              type: 'line',
+              name:'留样样品',
+              label: {
+                show: true,
+                position: 'top',
+                color:'#f52aa0'
+              },
+              //柱子的颜色
+              itemStyle:{
+                show:true,
+                color:'rgba(245, 41, 160,0.4)',
+              },
+              data:retentionData 
+            },
+          ],
+      }
+      this.entrustNumber.setOption(entrustNumberOption)
     }
-    entrustNumber.setOption(entrustNumberOption)
   }
 }
-}
 </script>
 <style lang="less" scoped>
 * body{
@@ -273,6 +443,7 @@ methods:{
     width: 100%;
     height: 50px;
     position: relative;
+    // border: 2px solid rgb(245, 41, 160);
     .demonstration{
       line-height: 50px;
       position: absolute;
@@ -281,7 +452,7 @@ methods:{
       margin-left: -50px;
       margin-top: -25px;
       color: '#fff';
-      font-size:16px;
+      font-size:20px;
       font-weight:600;
     }
     .chooseMonth{

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

@@ -1,224 +1,225 @@
 <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:{
+   //实际收到数据：登记表里面样品类型数据
+   //SELECT a.yang_pin_lei_xing,b.lei_xing_ FROM t_mjypdjb a JOIN t_yplxb  b ON a.yang_pin_lei_xing = b.id_
+   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: 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:{
+    //获取时间
+    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" scoped>
 *body{
-  padding: 0px;
-  margin: 0px;
+ 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);
-  }
+ 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);
+ }
 }
 
 </style>

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

@@ -9,6 +9,8 @@
           v-model="NowTime"
           type="month"
           @change="changeTime"
+          format="yyyy-MM" 
+          value-format="yyyy-MM"
           placeholder="请选择时间">
         </el-date-picker>
       </div>
@@ -22,211 +24,209 @@
  <script>
  import curdPost from '@/business/platform/form/utils/custom/joinCURD.js'
  export default {
-   data(){ 
-     return{
-       NowTime: '',
-       entrustNumber:null,
-       //已委托未收到样品数据
-       notReceivedNumber:[],
-       //留样样品数据
-       retentionData:[],
-       //对应月份的每一天的数组
-       days:[],
-       //月份天数
-       day:0,
-      //需要填充的数组
-      newArrayNum:[]
-       
- 
- }
-   },
-   created(){
-    
-   },
-   mounted() {
+  data(){ 
+    return{
+      NowTime: '',
+      entrustNumber:null,
+      days:[],
+      //月份天数
+      day:0,
+      //填充数量的数组
+      filledNum:[],
+    }
+  },
+  created(){
+  },
+  mounted() {
     this.getNowTime()
-   
-   },
- methods:{
-   //样品相关数据时间控件 :页面进来显示当前时间
-   getNowTime(){
+  },
+  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)
       //进来获取当前时间 之后获取当前月份天数 传给
+      // console.log('页面显示的时间',this.NowTime)  //2022-11
+      //把页面第一次进来的 当前年度月份 传给该方法处理 得到day及days
       this.getDaysInMonth(date.year,date.month)
       
     },
-   
-
-  //手动操作时间控件改变时间
-  changeTime(e){
-    // console.log('改变时间',e)
+    //手动操作时间控件改变时间
+    changeTime(e){
+    // console.log('改变时间',e) //2022-07
     let year = e.slice(0,4)
     let month = e.slice(5,7)
+    this.NowTime = year + '-' + month
+    // console.log('用户操作之后 页面显示的时间',this.NowTime,year,month) //2022-11 2022 11
+    //把年度月份传给getDaysInMonth()之前，先清理上一次数据
+    // this.entrustNumber.diswpose()  //这个方法干嘛的？？ 为啥清不掉entrustNumberInit()方法的数据
+    this.days=[]
+    //在这里打印一下this.days数组
+    // console.log('用户操作了时间控件之后打印this.days数组',this.days)
+    //把用户操作时间控件改变的时间 的年度月份 传给该方法处理 得到day及days
     this.getDaysInMonth(year,month)
-  },
-  //用户操作获取月份对应天数,
-  getDaysInMonth(year,month){
+
+    },
+    //拿到当前年度 月份 获取当前月份的天数day及【天数数组】days
+    getDaysInMonth(year,month){
     let temp = new Date(year,month,0);
     this.day = temp.getDate(); 
-    // console.log('当前月份：',month,',天数',this.day);
+    // console.log('处理好的年 月 月份天数',year,month,this.day);   //2022 11 30
+    //把月份对应天数转化为数组
     for( let i=1;i <= this.day ;i++){
       this.days.push(i)
     }
     // console.log('月份每一天',this.days)
-    // console.log('当前月天数',this.day)
-    this.getUnqualifiedData(this.day)
-  },
-   
-  
-   
-   //3.已经收到不合格xx
-   getUnqualifiedData(dayNum){
-     let sql3 = "select * from t_mjypdjb where yan_shou_zhuang_t = '残缺'"
-       curdPost('sql',sql3).then(response => { 
-       this.unqualifiedData = response.variables.data
-       let data = response.variables.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);
-      //创建一个长度为当前月份天数的数组
-      this.newArrayNum = Array(dayNum)
-      this.newArrayNum = this.newArrayNum.fill(0)
-      //console.log('创建对应月份的数组',this.newArrayNum)
-      //遍历拿到的数组，截取出月份对应的 // 2022-11-01
-      newArray.forEach(item =>{
-        let key = item.shou_yang_ri_qi_.slice(8,10) < 10 ?item.shou_yang_ri_qi_.slice(9,10) :item.shou_yang_ri_qi_.slice(8,10)
-        let value =parseInt(item.shou_yang_shu_lia)
-        this.newArrayNum.splice(key - 1,1,value)
-      })
-      //console.log('处理好的数据',this.newArrayNum)
-      //拿到月份数组和y轴数量数组
-      this.entrustNumberInit(this.days,this.newArrayNum)
+    this.getCheckSampleData(this.day)
 
-       })
-   },
-   //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)
-       })
- 
     },
-   
-   //委托样品图表
-   entrustNumberInit(dayArray,numAray){
-     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号"],
-          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
-         },
-         },
-         // title: {
-         //   text: '委托样品数量柱形图',
-         // },
-         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'
-             },
-            
-             //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],
-             data:numAray,
-            //柱子的颜色
-             itemStyle:{
-               show:true,
-               color:'rgba(0, 186, 255, 0.4)'
-               
-             },
-           },
-          
-         ],
-     }
-       entrustNumber.setOption(entrustNumberOption)
-   }
- }
+    //已检测 未检测 检测汇总表记录的是样品的检测项目,一个检测项目对应一条数据，
+    //当一个样品的编号对应的多条检测项目数据的“jian_ce_zhaung_ta”为 已完成，就表示该样品被归到已检的样品中
+    //(这样的话一个样品有多项检测，意味着一个样品有多个检测日期)
+    getCheckSampleData(dayNum){
+      let sql1 = "select yang_pin_bian_hao,DATE_FORMAT(create_time_,'%Y-%m-%d') AS detectionTime FROM t_mjjcbg WHERE yang_pin_bian_hao != ''  AND create_time_ LIKE '"+this.NowTime+'%'+"' GROUP BY yang_pin_bian_hao"
+      let sql2="select yang_pin_bian_hao,DATE_FORMAT(MIN(create_time_),'%Y-%m-%d') AS detectionTime FROM t_jchzb WHERE jian_ce_zhuang_ta != '已完成' AND yang_pin_bian_hao !=''  AND create_time_ LIKE '"+this.NowTime+'%'+"' GROUP BY yang_pin_bian_hao"
+      Promise.all([
+        curdPost('sql', sql1),
+        curdPost('sql', sql2),
+      ]).then(([ res1, res2]) => {
+        let data1 = res1.variables.data
+        let data2 = res2.variables.data
+        // console.log('已检测样品',data1)
+        const detection = this.dealingData(data1,dayNum)    //dealingData()方法处理返回的数据 this.filledNum;
+        const undetected = this.dealingData(data2,dayNum)
+        this.entrustNumberInit(this.days,detection,undetected)
+        
+
+      })
+    },
+    //处理数据
+    dealingData(data,dayNum){
+      let result = data.reduce((obj, item) => {
+          let find = obj.find(i => i.detectionTime === item.detectionTime);
+          let  CheckedArray= {
+            detectionTime:item.detectionTime,
+            count: 1
+          };
+          find ? find.count++ : obj.push(CheckedArray);
+          return obj;
+        }, []);
+        // console.log('12345678',result);
+        this.filledNum = Array(dayNum).fill(0)
+        //遍历拿到的数组，截取出月份对应的 // 2022-11-01
+        result.forEach(item =>{
+          let key = item.detectionTime.slice(8,10) < 10 ?item.detectionTime.slice(9,10) :item.detectionTime.slice(8,10)
+          let value =parseInt(item.count)
+          this.filledNum.splice(key - 1,1,value)
+        })
+        return this.filledNum;
+    },
+
+    //检测样品图表
+    entrustNumberInit(dayArray,detection,undetected){
+      // console.log('拿到日期数组',dayArray)
+      this.entrustNumber = this.$echarts.init(this.$refs.Number_refs);
+      var entrustNumberOption = {
+          xAxis:{
+            type: "category",
+            //当前月的每一天 数组
+            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:detection 
+            },
+            {
+              type:"line",
+              name:'未检测样品',
+              label: {
+                show: true,
+                position: 'top',
+                color:'#f5f12a'
+              },
+              //柱子的颜色
+              itemStyle:{
+                show:true,
+                color:'rgba(245, 241, 42, 0.4)',
+              },
+              data:undetected 
+            },
+          ],
+      }
+      this.entrustNumber.setOption(entrustNumberOption)
+    }
+  }
  }
  </script>
  
@@ -259,7 +259,6 @@
       color: '#fff';
       font-size:20px;
       font-weight:600;
-
     }
     .chooseMonth{
       width: 120px;

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

@@ -2,8 +2,19 @@
   <!-- 月度检测完成情况(环形图) -->
   <div  class="monthlyStatus">
     <dv-border-box-7 backgroundColor="rgba(6, 30, 93, 0.5)" >
-        <div class="monthlyStatus_title">月度检测情况统计</div>
-        <div class="monthlyStatus_content" ref="MonthlyStatus_refs"></div>
+      <div class="monthlyStatus_title">
+        <span class="monthlyStatus">月度检测情况统计</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="monthlyStatus_content" ref="MonthlyStatus_refs"></div>
     </dv-border-box-7>  
   </div>
 </template>
@@ -14,55 +25,50 @@ export default {
   data(){
     return{
       monthlyStatus:null,
-      testedData:[]
+      NowTime:''
     }
   },
   created(){
-    this.getTestedData()
-    this.getTestTotalData()
-
+    this.getNowTime()
   },
   mounted(){
-    this.enmonthlyStatusData()
-
+    this.getCheckSampleData()
   },
   methods:{
-    
-    // SELECT * FROM t_mjypb WHERE yang_pin_bian_hao IN (SELECT yang_pin_bian_hao FROM t_jchzb WHERE jian_ce_zhuang_ta = '已完成')
-
-    //获取检测样品任务总数
-    getTestTotalData(){
-
-      let sql1 = "select * from t_mjypb" 
-      curdPost('sql',sql1).then(response => { 
-        let  data = response.variables.data
-       
-        // 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)
-      })
-      //定义一个对象：任务总量
-      let newObj = {name:"任务总量",value:this.testedData}
-      // console.log("检测样品任务总数444", newObj)
+    //页面进来显示当前时间
+    getNowTime(){
+      const nowDate = new Date();
+      const date = {
+        year: nowDate.getFullYear(),
+        month: nowDate.getMonth() + 1,
+      }
+      this.NowTime = date.year + '-' + date.month
     },
-
-    //已经完成检测的样品
-    getTestedData(){
-      let sql2 = "select * from t_mjypb where yang_pin_bian_hao in (select yang_pin_bian_hao from t_jchzb where jian_ce_zhuang_ta = '已完成')" 
-      curdPost('sql',sql2).then(response => { 
-      let  data = response.variables.data
-      // this.testedData 
-      // console.log('已经完成检测数据',data.length)
-
+    //用户操作改变时间
+    changeTime(e){
+      // console.log('改变时间',e) //2022-07
+      let year = e.slice(0,4)
+      let month = e.slice(5,7)
+      this.NowTime = year + '-' + month
+      this.getCheckSampleData()
+    },
+    //查询函数
+    getCheckSampleData(){
+      let sql1 = "select yang_pin_bian_hao,DATE_FORMAT(create_time_,'%Y-%m-%d') AS detectionTime FROM t_mjjcbg WHERE yang_pin_bian_hao != ''  AND create_time_ LIKE '"+this.NowTime+'%'+"' GROUP BY yang_pin_bian_hao"
+      let sql2="select yang_pin_bian_hao,DATE_FORMAT(MIN(create_time_),'%Y-%m-%d') AS detectionTime FROM t_jchzb WHERE jian_ce_zhuang_ta != '已完成' AND yang_pin_bian_hao !=''  AND create_time_ LIKE '"+this.NowTime+'%'+"' GROUP BY yang_pin_bian_hao"
+      Promise.all([
+        curdPost('sql', sql1),
+        curdPost('sql', sql2),
+      ]).then(([ res1, res2]) => {
+        let data1 = res1.variables.data.length
+        let data2 = res2.variables.data.length
+        let data3 = data1+ data2
+        // console.log('hhhhhhhhhh',data1,data2,data3)
+        this.enmonthlyStatusData(data1,data2,data3)
       })
-      
     },
-    enmonthlyStatusData(){
+    //检测量统计图
+    enmonthlyStatusData(data1,data2,data3){
       var monthlyStatus = this.$echarts.init(this.$refs.MonthlyStatus_refs);
       var monthlyStatusOption ={
         grid:{
@@ -73,7 +79,7 @@ export default {
         },
         title: {
           text: '检测任务总量',
-          subtext: '424',
+          subtext: `${data3}`,
           // center: ["40%", "48%"],
           x: "50%",     //X坐标   
           y: "42%",    //Y坐标
@@ -118,8 +124,6 @@ export default {
         //   }
         // },
         series: [
-       
-        
           {
             name: 'Access From',
             type: 'pie',
@@ -144,8 +148,8 @@ export default {
               show: false
             },
             data: [
-              { value: 297, name: '已检测' },
-              { value: 127, name: '未检测' }
+              { value: data1, name: '已检测' },
+              { value: data2, name: '未检测' }
             ]
           }
        ]
@@ -176,11 +180,23 @@ export default {
   .monthlyStatus_title{
     width: 100%;
     height: 50px;
-    line-height: 50px;
-    text-align: center;
-    font-weight: 600;
-    font-size: 20px;
-    color:'#fff';
+    position: relative;
+    .monthlyStatus{
+      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;
+    }
   }
   .monthlyStatus_content{
     width: 100%;

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

@@ -7,23 +7,31 @@
            <!-- 标题装饰组件 -->
           <header-decoration :titleName="outputData.headerName"/> 
           <!-- 返回按钮 -->
-          <div class="goBackButton" @click.prevent="goBack()" >
+          <div 
+            class="goBackButton" 
+            @click.prevent="goBack()" 
+            style="width: 12%;
+            height:2.825rem;
+            line-height: 2.825rem;
+            text-align:center;
+            position: absolute;
+            left: 20%;
+            top:4%;" >
             <dv-border-box-8>返回</dv-border-box-8>
           </div>
           <!-- 显示数据上一次更新的时间 -->
           <div
-             style="width: 18%;
-              cursor: pointer;
-              height:2.825rem;
-              line-height: 2.825rem;
-              text-align:center;
-              margin-left:70%;
-              margin-top:-60px;
-              flex: 1;
-              position: absolute;
-              color: #FFFFFF;"
-              >
-                <dv-border-box-8 >上一次更新时间:{{this.sendTime}}</dv-border-box-8>
+            class="changeTime"
+            style="width: 18%;
+            cursor: pointer;
+            height:2.825rem;
+            line-height: 2.825rem;
+            text-align:center;
+            position: absolute;
+            left: 70%;
+            top:4%;
+            color: #FFFFFF;">
+              <dv-border-box-8 >上一次更新时间:{{this.sendTime}}</dv-border-box-8>
           </div>
           <!-- 样品头部数据总览 -->
           <div class="overView">
@@ -140,19 +148,7 @@ export default {
     .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;
-      }
+      position:relative
       .overView{
         width: 100%;
         height: 80px;