样品看板

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

@@ -0,0 +1,244 @@
+<template>
+  <!-- 年度检测完成情况(环形图) -->
+  <div  class="annualStatus">
+    <dv-border-box-7 backgroundColor="rgba(6, 30, 93, 0.5)" >
+      <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'
+import echarts from 'echarts'
+export default {
+  data(){
+    return{
+      annualStatus:null,
+      NowTime:''
+    }
+  },
+  created(){
+    this.getNowTime()
+  },
+  mounted(){
+    this.getCheckSampleData()
+  },
+  methods:{
+    //页面进来显示当前时间
+    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 = echarts.init(this.$refs.AnnualStatus_refs);
+      var annualStatusOption ={
+        grid:{
+          left:'',
+          top:'0%',
+          bottom:'0%',
+          containLabel:true  //?
+        },
+        title: {
+          text: '检测任务总量',
+          subtext: `${data3}`,
+          // center: ["40%", "48%"],
+          x: "50%",     //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:'10%',
+        //   bottom:'10%',
+        //   lineStyle:{
+
+        //   }
+        // },
+        series: [
+       
+        
+          {
+            name: 'Access From',
+            type: 'pie',
+            radius: ['40%', '70%'],
+            center: ["50%", "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: [
+              { value: data1, name: '已检测' },
+              { value: data2, name: '未检测' },
+             
+            ]
+          }
+       ]
+      }
+      annualStatus.setOption(annualStatusOption);
+
+    },
+  }
+
+}
+</script>
+
+<style lang="less" scoped>
+*body{
+  padding: 0px;
+  margin: 0px;
+}
+.annualStatus{
+  width: 100%;
+  height: 100%;
+  #dv-border-box-7{
+    background-size: 100% 100%;
+    display: flex;
+    flex-direction:column;
+    align-content:space-between;
+  }
+  .annualStatus_title{
+    width: 100%;
+    height: 50px;
+    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);
+  } 
+}
+</style>

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

@@ -0,0 +1,474 @@
+<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"
+            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'
+import echarts from 'echarts'
+
+import { resolve } from 'path';
+export default {
+  data(){ 
+    return{
+      NowTime: '',
+      entrustNumber:null,
+      //对应月份的每一天的数组
+      days:[],
+      //月份天数
+      day:0,
+      //填充数量的数组
+      filledNum:[],
+
+      // //已收到要填充的数组
+      // ReceivedNum:[],
+      // //不合格要填充的数据
+      // UnqualifiedNum:[],
+      // //留样要填充的数据
+      // RetentionNum:[],
+      //  //已收到样品数据
+      //  received:[],
+      // //不合格样品数据
+      // unqualifiedData:[],
+      // //留样样品数据
+      // retentionData:[],
+      
+    }
+  },
+  mounted() {
+    this.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) //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)
+      
+    },
+
+    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;
+      }, []);
+      //console.log('日期相同数量相加 处理结果',newArray);
+      //创建一个长度为当前月份天数的数组
+      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.filledNum.splice(key - 1,1,value)
+      })
+      //返回处理好的数量数组
+      return this.filledNum;
+    },
+    //处理留样数据
+    dealingRetentionData(data,dayNum){
+      let newArray = data.reduce((total, cur, index) => {
+          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('日期相同数量相加 处理结果',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)
+      })
+    },
+  
+    //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;
+        })
+
+    },
+    //不合格
+    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,receivedData,unqualifiedData,retentionData){
+      // console.log('拿到日期数组',dayArray)
+      this.entrustNumber = 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:receivedData 
+            },
+            {
+              type: 'line',
+              name:'不合格样品',
+              label: {
+                show: true,
+                position: 'top',
+                color:'#f5f12a'
+              },
+              //柱子的颜色
+              itemStyle:{
+                show:true,
+                color:'rgba(245, 241, 42, 0.4)',
+              },
+              data:unqualifiedData 
+            },
+            {
+              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)
+    }
+  }
+}
+</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;
+    // border: 2px solid rgb(245, 41, 160);
+    .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%;
+    //calc()里面内容需要两边有空格，否则无效
+    height: calc(100% - 50px);
+  }
+  
+}
+
+</style>

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

@@ -0,0 +1,226 @@
+<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>
+</template>
+
+<script>
+import curdPost from '@/business/platform/form/utils/custom/joinCURD.js'
+import echarts from 'echarts'
+
+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); 
+   })
+
+
+ },
+ mounted(){
+   //初始化eCharts组件
+   this.entrustTypeData()
+  
+
+ },
+ 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 = 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: [
+      
+       
+         {
+           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;
+}
+.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);
+ }
+}
+
+</style>

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

@@ -0,0 +1,276 @@
+<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"
+          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'
+ import echarts from 'echarts'
+ export default {
+  data(){ 
+    return{
+      NowTime: '',
+      entrustNumber:null,
+      days:[],
+      //月份天数
+      day:0,
+      //填充数量的数组
+      filledNum:[],
+    }
+  },
+  created(){
+  },
+  mounted() {
+    this.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) //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.getCheckSampleData(this.day)
+
+    },
+    //已检测 未检测 检测汇总表记录的是样品的检测项目,一个检测项目对应一条数据，
+    //当一个样品的编号对应的多条检测项目数据的“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 = 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>
+ 
+ <style lang="less" scoped >
+ *body{
+   padding: 0px;
+   margin: 0px;
+ }
+.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

@@ -0,0 +1,208 @@
+<template>
+  <!-- 月度检测完成情况(环形图) -->
+  <div  class="monthlyStatus">
+    <dv-border-box-7 backgroundColor="rgba(6, 30, 93, 0.5)" >
+      <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>
+
+<script>
+import curdPost from '@/business/platform/form/utils/custom/joinCURD.js'
+import echarts from 'echarts'
+export default {
+  data(){
+    return{
+      monthlyStatus:null,
+      NowTime:''
+    }
+  },
+  created(){
+    this.getNowTime()
+  },
+  mounted(){
+    this.getCheckSampleData()
+  },
+  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) //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(data1,data2,data3){
+      var monthlyStatus = echarts.init(this.$refs.MonthlyStatus_refs);
+      var monthlyStatusOption ={
+        grid:{
+          left:'',
+          top:'0%',
+          bottom:'0%',
+          containLabel:true  //?
+        },
+        title: {
+          text: '检测任务总量',
+          subtext: `${data3}`,
+          // center: ["40%", "48%"],
+          x: "50%",     //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:'10%',
+        //   bottom:'10%',
+        //   lineStyle:{
+
+        //   }
+        // },
+        series: [
+          {
+            name: 'Access From',
+            type: 'pie',
+            radius: ['40%', '70%'],
+            center: ["50%", "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: [
+              { value: data1, name: '已检测' },
+              { value: data2, name: '未检测' }
+            ]
+          }
+       ]
+      }
+      monthlyStatus.setOption(monthlyStatusOption);
+
+    },
+  }
+
+}
+</script>
+
+<style lang="less" scoped>
+*body{
+  padding: 0px;
+  margin: 0px;
+}
+.monthlyStatus{
+  width: 100%;
+  height: 100%;
+  #dv-border-box-7{
+    background-size: 100% 100%;
+    display: flex;
+    flex-direction:column;
+    align-content:space-between;
+    
+  }
+  .monthlyStatus_title{
+    width: 100%;
+    height: 50px;
+    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%;
+    height: calc(100% - 50px);
+  }
+  
+}
+</style>

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

@@ -0,0 +1,212 @@
+<template>
+  <!-- 样品数据总览组件 -->
+  <div class="baseBgColor">
+      <div class="totalNumber">
+        <div>委托样品总数</div>
+        <div class="number">{{EntrustedTotal}}个</div>
+      </div>
+      <div class="notReceived">
+        <div>待收样数量(已委托未收样)</div>
+        <div class="number">{{NotReceiveNumber}}个</div>
+      </div>
+      <div class="received">
+        <div>已收样数量</div>
+        <div class="number">{{ReceiveNumber}}个</div>
+      </div>
+      <div class="staging">
+        <div>待检样品数量</div>
+        <div class="number">{{StagingNumber}}个</div>
+      </div>
+      <div class="unqualified">
+        <div>不合格样品数量</div>
+        <div class="number">{{UnqualifiedNumber}}个</div>
+      </div>
+      <div class="retention">
+        <div>留样样品数量</div>
+        <div class="number">{{RetentionNumber}}个</div>
+      </div>
+      <div class="retention">
+        <div>样品完成检测数量</div>
+        <div class="number">{{SuccessNumber}}个</div>
+      </div>
+      <!-- <button @click="getTime">时间</button> -->
+    
+  </div>
+  
+</template>
+
+<script>
+import curdPost from '@/business/platform/form/utils/custom/joinCURD.js'
+export default {
+  data(){
+    return{
+      timer:null,
+      sendTime:'',
+      EntrustedTotal:0,
+      NotReceiveNumber:0,
+      ReceiveNumber:0,
+      StagingNumber:0,
+      UnqualifiedNumber:0,
+      RetentionNumber:0,
+      SuccessNumber:0
+    }
+  },
+  created(){
+    //数据获取
+    this.getEntrustedTotalData()
+    this.getNotReceivedData()
+    this.getReceivedData()
+    this.getUnqualifiedData()
+    this.getStayData()
+    this.getSuccessData()
+    this.getStagingNumberData()
+    //拿到数据后先获取当前时间，把时间传给父组件
+    this.getNowTime()
+    // this.$emit('getUpdateTime',this.sendTime)
+    // 页面进来先清除定时器
+    clearInterval(this.timer)
+    this.timer = null
+    this.timer = setInterval(() =>{
+      this.getEntrustedTotalData()
+      this.getNotReceivedData()
+      this.getReceivedData()
+      this.getUnqualifiedData()
+      this.getStayData()
+      this.getSuccessData()
+
+      // console.log('执行了定时器',this.sendTime)
+      //数据回来之后调用触发this.$emit,触发父组件自定义方法获取时间
+      this.getNowTime()
+      // this.$emit('getUpdateTime',this.sendTime)
+    }, 1000 * 60 *30);
+    // 组件销毁清楚定时器
+    this.$once('hook:beforeDestroy', () => {
+    clearInterval(this.timer); 
+    })
+  },
+
+  methods:{
+   
+     //获取时间
+     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 + '时' 
+      // console.log("获取时间函数执行了",this.sendTime)
+      //获取时间的时候直接传给父组件
+      this.$emit('getUpdateTime',this.sendTime)
+    },
+    //委托样品总数:样品表所有
+    getEntrustedTotalData(){
+      let sql1 = "select count(id_) as sum from t_lhypb" 
+      curdPost('sql',sql1).then(response => { 
+      let data = response.variables.data
+      this.EntrustedTotal = data[0].sum
+      })
+      
+    },
+    //待收样数量:已委托，未收到
+    getNotReceivedData(){
+      let sql2= "select count(id_) as sum from  t_lhypb WHERE parent_id_ in(select id_ from t_lhwtsqb where wei_tuo_zhuang_ta = '待样品接收')" 
+      curdPost('sql',sql2).then(response => { 
+      let data = response.variables.data
+      this.NotReceiveNumber = data[0].sum
+
+    })
+  },
+     //已经收样
+     getReceivedData(){
+      let sql3= "select count(id_) as sum from t_lhypdjb" 
+      curdPost('sql',sql3).then(response => { 
+      let data = response.variables.data
+      this.ReceiveNumber = data[0].sum
+    })
+
+     },
+     //待检样品数量
+     getStagingNumberData(){
+      // let sql6 = "select * from t_mjypdjb"
+      let sql6= "select count(id_) as sum from t_lhypdjb where liu_zhuan_zhuang_ = '待检' " 
+      curdPost('sql',sql6).then(response => { 
+      let data = response.variables.data
+      this.StagingNumber =data[0].sum
+      // console.log("样品登记表数据777",this.StagingNumber)
+
+    })
+      },
+     //不合格样品数量
+     getUnqualifiedData(){
+      let sql4= "select count(id_) as sum from t_lhypdjb where yan_shou_jie_guo_ = '残缺'" 
+      curdPost('sql',sql4).then(response => { 
+      let data = response.variables.data
+      this.UnqualifiedNumber =data[0].sum
+
+    })
+     },
+     //留样样品数量
+     getStayData(){
+      let sql5= "select  * from (select * from t_lhypdjb where  liu_yang_ri_qi_ ='' ) a where   a.shi_fou_liu_yang_ != '否'" 
+      curdPost('sql',sql5).then(response => { 
+      let data = response.variables.data
+      this.RetentionNumber = data.length 
+
+    })
+     },
+     //样品完成检测数量
+     getSuccessData(){
+      let sql6= "select COUNT(t_lhypdjb.id_) as num from t_lhypdjb LEFT JOIN t_lhjcbgb on t_lhypdjb.yang_ben_bian_hao = t_lhjcbgb.yang_pin_bian_hao where t_lhjcbgb.zhuang_tai_ = '待发放'" 
+      curdPost('sql',sql6).then(response => { 
+      let data = response.variables.data
+      this.SuccessNumber = data[0].num
+
+    })
+     }
+
+  },
+ 
+
+
+}
+</script>
+
+<style lang="scss" scoped>
+.baseBgColor{
+    width: 100%;
+    height: 80px;
+    background-color: rgba(6, 30, 93, 0.5);
+    display: flex;
+    .totalNumber,
+    .notReceived,
+    .received,
+    .staging,
+    .unqualified,
+    .retention
+    {
+        border-right: 1px solid #00db95;
+        flex: 1;
+        text-align: center;
+        font-size: 16px;
+        display: flex;
+        flex-direction:cloumn; 
+        flex-wrap :wrap; 
+        align-content: space-around;
+
+        margin: 10px 0px;
+        position:relative;
+        text-align:center;
+        display:table-cell;
+        vertical-align:middle;
+        .number{
+          display:inline-block;
+          margin: 15px 0px 0px 0px;
+        }
+      }
+    
+
+}
+</style>

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

@@ -0,0 +1,85 @@
+<template>
+  <div id="top">
+    <dv-decoration-8 class="header-left-decoration" />
+    <dv-decoration-5 class="header-center-decoration" />
+   
+    <dv-decoration-8 class="header-right-decoration" :reverse="true" />
+    <div class="center-title">{{titleName}}</div>
+    <!-- <span class="showTime">当前时间为:{{sendTime}}</span> -->
+    
+  </div>
+</template>
+
+<script>
+
+export default {
+  props:['titleName'],
+  data () {
+    return {
+      sendTime:''
+      
+	}
+  },
+  created(){
+    this.currentTime()
+  },
+  methods:{
+    currentTime() {
+      setInterval(this.getNowTime, 500);
+    },
+    getNowTime(){
+      const nowDate = new Date();
+      const date = {
+          year: nowDate.getFullYear(),
+          month: nowDate.getMonth() + 1,
+          day: nowDate.getDate(),
+          hour: nowDate.getHours(),
+          minute: nowDate.getMinutes(),
+          second: nowDate.getSeconds()
+      }
+      this.sendTime = date.year + '年' + date.month + '月' + date.day + '日' +date.hour + '时' + date.minute + '分' + date.second + '秒'
+
+
+      // var date  = new Date()
+      // var yy = date.getFullYear()
+      // var mm = date.getMonth() + 1
+      // var dd = date.getDate()
+      // var hh = date.getHours()
+      // var mm = date.getMinutes()
+      // var ss = date.getSeconds()
+      // document.querySelector(".showTime").innerHTML = "当前时间为" + yy + '年' + mm + '月' + dd + '日' + ss + '时' + mm + '分' + ss + '秒'
+
+
+    }
+  }
+}
+</script>
+
+<style lang="less">
+#top {
+  position: relative;
+  width: 100%;
+  height: 100px;
+  display: flex;
+  justify-content: space-between;
+  flex-shrink: 0;
+ 
+  .header-center-decoration {
+    width: 40%;
+    height: 60px;
+    margin-top: 30px;
+  }
+  .header-left-decoration, .header-right-decoration {
+    width: 25%;
+    height: 60px;
+  }
+  .center-title {
+    position: absolute;
+    font-size: 30px;
+    font-weight: bold;
+    left: 50%;
+    top: 15px;
+    transform: translateX(-50%);
+  }
+}
+</style>

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

@@ -1,441 +1,217 @@
 <template>
-  <div id="data-view-yangp">
-    <!-- 扫码接收的输入框-->
-    <el-input
-      v-model="facilityId"
-      ref="redarInput"
-      @change="facilityData(facilityId)"
-      style="z-index: -999;"
-      ></el-input>
-
-    <dv-full-screen-container>
-      <div class="main-header">
-
-        <div class="mh-left">
-          <div @click.prevent="toHome()"
-                        style="width: 140px;
-                           height: 40px;
-                           cursor: pointer;
-                           text-align:center;
-                           color: #FFFFFF;
-                           line-height: 40px;
-                           font-size: 14px;
-                           margin-left:35px;
-                           ">
-                    <dv-border-box-8>
-                            返回首页
-                          </dv-border-box-8>
+  <div  class="data-view">
+      <!-- 全屏显示容器 -->
+      <dv-full-screen-container>
+        <!-- 头部内容部分 -->
+        <div class="headerContent">
+           <!-- 标题装饰组件 -->
+          <header-decoration :titleName="outputData.headerName"/> 
+          <!-- 返回按钮 -->
+          <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>
-
-        <div class="mh-middle">样品流转及数据监控统计</div>
-        <div class="mh-right">
-
-
-
-        </div>
-      </div>
-
-      <dv-border-box-1 class="main-container">
-        <div class="mc-top">
-          <Top-Left-Cmp />
-          <Top-Middle-Cmp />
-         <!-- <Top-right-Cmp /> -->
-
-
-
-         <!-- 出入库管理-->
-         <div>
-            <div @click.prevent="openRedar('检验检测')"
-                          style="width: 180px;
-                            cursor: pointer;
-                             text-align:center;
-                             color: #FFFFFF;
-                             line-height: 50px;
-                             ">
-                      <dv-border-box-7>
-                          检验检测扫码登记
-                      </dv-border-box-7>
-            </div>
-            <dv-decoration-8 :reverse="true" style="width:300px;height:50px;" />
-            </br>
-            <div @click.prevent="openRedar('待处理')"
-                          style="width: 180px;
-                            cursor: pointer;
-                             text-align:center;
-                             color: #FFFFFF;
-                             line-height: 50px;
-                             ">
-                      <dv-border-box-7>
-                          检完待处理扫码登记
-                      </dv-border-box-7>
-            </div>
-            <dv-decoration-8 :reverse="true" style="width:300px;height:50px;" />
-            </br>
-            <div @click.prevent="openRedar('处理')"
-                          style="width: 180px;
-                            cursor: pointer;
-                             text-align:center;
-                             color: #FFFFFF;
-                             line-height: 50px;
-                             ">
-                      <dv-border-box-7>
-                          样品处理扫码登记
-                      </dv-border-box-7>
-            </div>
-            <dv-decoration-8 :reverse="true" style="width:300px;height:50px;" />
-         </div>
-
-         <!-- 扫码操作组件-->
-
-         <div class="popContainer" v-if="redar" @click="remRedar">
-              <dv-decoration-12 style="width:150px;height:150px;margin:0 auto;top: 35%;">
-                 开启扫描设备连接
-              </dv-decoration-12>
-         </div>
-
-         <el-dialog
-             width="75%"
-             :modal-append-to-body='false'
-             :visible.sync="visible">
-                 <div style="min-height: 600px;">
-                   <div style="float: left; font-weight: bold;">需要{{behavior}}操作的样品:</div>
-                    <el-button @click="submitData" type="primary" style="float: right;">确认提交</el-button>
-                    <el-table
-                       :data="listData"
-                       stripe
-                       style="width: 100%">
-                       <el-table-column
-                         prop="sheBeiMingCheng"
-                         label="设备名称"
-                         >
-                       </el-table-column>
-
-                       <el-table-column
-                         prop="guiGeXingHao"
-                         label="规格型号"
-                        >
-                       </el-table-column>
-
-                       <el-table-column
-                         prop="sheBeiShiBieH"
-                         label="设备识别号">
-                       </el-table-column>
-
-                       <el-table-column
-                         prop="sheBeiZhuangTa"
-                         label="设备状态">
-                       </el-table-column>
-                     </el-table>
-                 </div>
-           </el-dialog>
+          <!-- 显示数据上一次更新的时间 -->
+          <div
+            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">
+            <headerContent  @getUpdateTime="getTime"></headerContent>
+            <dv-decoration-10 style="width:100%;height:5px;" />
+          </div> 
 
         </div>
+       
 
-        <!-- 其他统计组件 -->
-        <div class="mc-bottom">
-          <dv-border-box-6 class="bottom-left-container">
-            <dv-decoration-4 class="mcb-decoration-1" style="width:5px;height:45%;" />
-            <dv-decoration-4 class="mcb-decoration-2" style="width:5px;height:45%;" />
-            <Bottom-Left-Chart-1 />
-            <Bottom-Left-Chart-2 />
-          </dv-border-box-6>
-
-          <div class="bottom-right-container">
-            <Bottom-Right-Table-1 />
-            <Bottom-Right-Table-2 />
-            <Bottom-Right-Table-3 />
-            <Bottom-Right-Table-4 />
+        <!-- 主体内容(图表部分) -->
+        <div class="mainContent">
+          <div class="entrust">
+            <div class="Number" ref="Number_refs"><entrustNumber/> </div>
+            <!-- <div class="Type" ><entrustType/></div> -->
+          </div>
+          <div class="detection">
+            <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>
-      </dv-border-box-1>
-
-    </dv-full-screen-container>
-  </div>
+        
+      </dv-full-screen-container>
+   </div>
 </template>
 
 <script>
-import TopLeftCmp from './TopLeftCmp'
-import TopMiddleCmp from './TopMiddleCmp'
-import TopRightCmp from './TopRightCmp'
-
-import BottomLeftChart1 from './BottomLeftChart1'
-import BottomLeftChart2 from './BottomLeftChart2'
+//全屏展示
+import screenfull from 'screenfull'
+//大屏标题组件
+import headerDecoration from './headerDecoration'
+//头部内容组件
+import headerContent from './headerContent'
+//委托样品条目情况组件
+import entrustNumber from './EntrustNumber'
+//委托样品类型组件
+import entrustType from './EntrustType'  
+// 月度检测完成情况(环形图)
+import monthlyStatus from './MonthlyStatus'
+//年度检测完成情况(环形图)
+import annualStatus from './AnnualStatus'
+//月度检测情况组件
+import monthlyNumber from './MonthlyNumber'
+export default {
 
-import BottomRightTable1 from './BottomRightTable1'
-import BottomRightTable2 from './BottomRightTable2'
-import BottomRightTable3 from './BottomRightTable3'
-import BottomRightTable4 from './BottomRightTable4'
-import repostCurd from '../../../../business/platform/form/utils/custom/joinCURD.js'
+  components:{
+    headerDecoration,
+    headerContent,
+    entrustNumber,
+    entrustType,
+    monthlyStatus,
+    annualStatus,
+    monthlyNumber
+  },
+  data(){
+    return{
+      sendTime:'',
+      outputData:{
+        headerName:"样品管理看板"
+      }
 
-export default {
-  name: 'DataView',
-  components: {
-    TopLeftCmp,
-    TopMiddleCmp,
-    TopRightCmp,
-    BottomLeftChart1,
-    BottomLeftChart2,
-    BottomRightTable1,
-    BottomRightTable2,
-    BottomRightTable3,
-    BottomRightTable4
+    }
+    
+  },
+  mounted(){
+    // this.getTime()
   },
-  data () {
-    return {
-     visible:false,
-     redar:false,
-     facilityId:'',
-     listData:[],
-     behavior:''
+  created() {
+    //时间
+    // this.currentTime()
+    if(screenfull.isEnabled && !screenfull.isFullscreen){
+     this.allView()
+      
     }
   },
-   methods: {
-	  toHome(){
-      this.$router.push({
-      			name:'dashboard'
-      })
-		 },
-     allView(){
-       screenfull.request() //默认显示全屏
-     },
-     openRedar(type){
-       this.behavior = type
-       this.redar = true
-       this.$refs.redarInput.focus();
-        this.listData = []
-     },
-     remRedar(){
-       this.redar = false
-     },
-     //扫码之后
-     facilityData(id){
-       if(id){
-         for(let item of this.listData){
-           if(item.id==id){
-             return
-             }
-                   }
-         this.loadData(id)
-         //开始查询设备
-         this.facilityId = ''
+  beforeDestroy() {
+      if(screenfull.isFullscreen){
+        screenfull.toggle()
         }
-     },
-     /* 查询参数格式化*/
-     getSearcFormData(id) {
-       const params = {}
-       params['Q^id_^S'] = id
-       return ActionUtils.formatParams(
-         params,
-        {},
-        {},
-         )
-     },
-     // 提交设备
-     submitData(){
-         this.visible = false
-         alert("提交设备 [ "+this.behavior+" ] 信息成功")
-       },
-
-     /* 获取数据*/
-     loadData(id) {
-       if(!id){
-         return
-       }
-     repostCurd('select',
-          '{"tableName": "t_ypgl","paramWhere":{"id_":"'+id+'"}}'
-              ).then(response => {
-                let cont = response.variables.data[0]
-
-                switch(cont.yang_pin_zhuang_t){
-                  case '入库':
-                    this.addSamRecord(id,cont.yang_pin_bian_hao,cont.yang_pin_ming_che,"检验检测" ) //增加流转记录
-                    this.updateSam(id,{yang_pin_zhuang_t:"检验检测"},"检验检测",cont.yang_pin_bian_hao)//修改样品信息
-                  break;
-
-                  case '检验检测':
-                    this.addSamRecord(id,cont.yang_pin_bian_hao,cont.yang_pin_ming_che,"检完、待处理" ) //增加流转记录
-                    this.updateSam(id,{yang_pin_zhuang_t:"检完、待处理",jian_ce_ri_qi_: this.sysTime() + ""},"检完、待处理",cont.yang_pin_bian_hao)//修改样品信息
-                  break;
-
-                  case '检完、待处理':
-                     this.$confirm('当前状态为 [ '+ cont.yang_pin_zhuang_t +' ] 可进行以下操作', '编号 [ '+cont.yang_pin_bian_hao+' ] 的样品', {
-                       cancelButtonText: '继续检验检测',
-                       confirmButtonText: '样品处理 / 送还',
-                       type: 'warning'
-                     }).then(() => {
-                       this.addSamRecord(id,cont.yang_pin_bian_hao,cont.yang_pin_ming_che,"检完、处理" ) //增加流转记录
-                       this.updateSam(id,{yang_pin_zhuang_t:"检完、处理"},"检完、处理",cont.yang_pin_bian_hao)//修改样品信息
-                     }).catch(() => {
-                       this.addSamRecord(id,cont.yang_pin_bian_hao,cont.yang_pin_ming_che,"检验检测" ) //增加流转记录
-                       this.updateSam(id,{yang_pin_zhuang_t:"检验检测"},"检验检测",cont.yang_pin_bian_hao)//修改样品信息
-                     })
-                  break;
-                  case '检完、处理':
-                    this.$message.warning("当前样品状态为: ["+cont.yang_pin_zhuang_t+" ] 无法进行操作！")
-                    this.redar = false
-                  break;
-
-                   default:
-                      this.$message.warning("数据库中没有找到当前样品！");
-                      break;
-
-                }
-                })
-
-     },
-     // 修改样品状态
-    updateSam(id,data,state,mun){
-       repostCurd('update',
-       '{"tableName": "t_ypgl","paramWhere":{"id_":"'+id+'"},"paramCond":'+JSON.stringify(data)+'}'
-              ).then((res)=>{
-                     this.$alert('<span style="font-size:16px;font-weight: bold;">状态成功变更为 [ <span style="color: #00CC66;">'+ state +'</span> ] ！！!</span>', '编号 [ '+mun+' ] 的样品', {
-                              dangerouslyUseHTMLString: true,
-                               type: 'success',
-                        }).then(() => { this.redar = false }).catch(() => {})
-             }).catch((er) => {
-                this.$message.error("参数错误，或网络延迟。请联系管理员")
-                this.redar = false
-             })
-    },
-    //添加流转记录
-    addSamRecord(id,num,name,state){
-      let addLiuZhuan = []
-      let queRen = {}
-      queRen["jing_shou_shi_jia"] = this.sysTime() + "";
-      queRen["yang_pin_ming_che"] = name
-      queRen["yang_pin_bian_hao"] = num
-      queRen["jing_shou_ren_"] = this.$store.getters.userInfo.user.id
-      queRen["parent_id_"] = id
-      queRen["zhuang_tai_"] = state
-      addLiuZhuan.push(queRen)
-      repostCurd('add',
-      '{"tableName": "t_yplzjl","paramWhere":'+JSON.stringify(addLiuZhuan)+'}'
-             )
-
     },
-     sysTime(){
-        var myDate = new Date();
-        var year = myDate.getFullYear();
-        var month = myDate.getMonth()+1;
-        var date = myDate.getDate();
-        var h = myDate.getHours();
-        var m = myDate.getMinutes();
-        var s = myDate.getSeconds();
-        var now = year + '-' +(month < 10 ? "0" :"")+ month + "-"+((date < 10 ? "0" :"")) +date + " "+((h < 10 ? "0" :"")) + h + ':'+((m < 10 ? "0" :"")) + m + ":"+((s < 10 ? "0" :"")) + s;
-        return now;
+  methods: {
+    getTime(val){
+      this.sendTime = val
     },
 
-
+    allView(){
+      screenfull.request() //默认显示全屏
+    },
+    goBack(){
+      this.$router.back(-1)
+    }
   }
+
 }
 </script>
 
-<style lang="less">
-#data-view-yangp {
+<style lang="less" scoped>
+*body{
+  padding: 0px;
+  margin: 0px;
+}
+.data-view {
   width: 100%;
   height: 100%;
-  background-color: #030409;
   color: #fff;
+  z-index: 9999;
   #dv-full-screen-container {
-    background-image: url('./img/bg.png');
+    background-image: url('./img/stars.png');
     background-size: 100% 100%;
-    box-shadow: 0 0 3px blue;
-    display: flex;
-    flex-direction: column;
-  }
-
-  .main-header {
-    height: 80px;
     display: flex;
-    justify-content: space-between;
-    align-items: flex-end;
-
-    .mh-left {
-      font-size: 20px;
-      color: rgb(1,134,187);
-
-      a:visited {
-        color: rgb(1,134,187);
+    flex-direction:column;
+    align-items: center;
+    .headerContent{
+      width: 100%;
+      height: 19%;
+      position:relative
+      .overView{
+        width: 100%;
+        height: 80px;
       }
     }
-
-    .mh-middle {
-      font-size: 30px;
-    }
-
-    .mh-left, .mh-right {
-      width: 450px;
-    }
-  }
-
-  .main-container {
-    height: calc(~"100% - 80px");
-
-    .mc-top, .mc-bottom {
-      box-sizing: border-box;
-      padding: 30px;
+    
+    .mainContent{
+      width: 100%;
+      height:80%;
       display: flex;
-    }
-
-    .mc-top {
-      height: 40%;
-    }
-
-    .mc-bottom {
-      height: 60%;
-    }
-
-    .yp-top-left-cmp, .bottom-left-container {
-      width: 35%;
-    }
-
-    .yp-top-middle-cmp, .top-right-cmp {
-      width: 58%;
-    }
-
-    .bottom-left-container {
-      position: relative;
-
-      .border-box-content {
+      flex-direction:column;
+      align-content:space-between;
+      // border: 1px solid rgb(71, 17, 197);
+        .entrust{
+        width: 100%;
+        height: 48%;
         display: flex;
-      }
-
-      .mcb-decoration-1, .mcb-decoration-2 {
-        position: absolute;
-        left: 50%;
-        margin-left: -2px;
-      }
-
-      .mcb-decoration-1 {
-        top: 5%;
-        transform: rotate(180deg);
-      }
-
-      .mcb-decoration-2 {
-        top: 50%;
-      }
-
-      .yp-bottom-left-chart-1, .yp-bottom-left-chart-2 {
-        width: 50%;
-        height: 100%;
-      }
-    }
+        justify-content:space-between;
+        // border: 1px solid rgb(17, 110, 197);
+          .Number{
+            width: 100%;
+            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);
+          
+          }
+        }
 
-    .bottom-right-container {
-      width: 68%;
-      box-sizing: border-box;
-      display: flex;
-    }
-    .popContainer{
-        position: fixed;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        z-index: 999;
-        background: rgba(0,0,0,0.7);
-    }
-  }
+        .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);
+          }
+        
+        }
+    } 
+  } 
 }
-</style>
+
+</style>

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

@@ -0,0 +1,441 @@
+<template>
+  <div id="data-view-yangp">
+    <!-- 扫码接收的输入框-->
+    <el-input
+      v-model="facilityId"
+      ref="redarInput"
+      @change="facilityData(facilityId)"
+      style="z-index: -999;"
+      ></el-input>
+
+    <dv-full-screen-container>
+      <div class="main-header">
+
+        <div class="mh-left">
+          <div @click.prevent="toHome()"
+                        style="width: 140px;
+                           height: 40px;
+                           cursor: pointer;
+                           text-align:center;
+                           color: #FFFFFF;
+                           line-height: 40px;
+                           font-size: 14px;
+                           margin-left:35px;
+                           ">
+                    <dv-border-box-8>
+                            返回首页
+                          </dv-border-box-8>
+          </div>
+        </div>
+
+        <div class="mh-middle">样品流转及数据监控统计</div>
+        <div class="mh-right">
+
+
+
+        </div>
+      </div>
+
+      <dv-border-box-1 class="main-container">
+        <div class="mc-top">
+          <Top-Left-Cmp />
+          <Top-Middle-Cmp />
+         <!-- <Top-right-Cmp /> -->
+
+
+
+         <!-- 出入库管理-->
+         <div>
+            <div @click.prevent="openRedar('检验检测')"
+                          style="width: 180px;
+                            cursor: pointer;
+                             text-align:center;
+                             color: #FFFFFF;
+                             line-height: 50px;
+                             ">
+                      <dv-border-box-7>
+                          检验检测扫码登记
+                      </dv-border-box-7>
+            </div>
+            <dv-decoration-8 :reverse="true" style="width:300px;height:50px;" />
+            </br>
+            <div @click.prevent="openRedar('待处理')"
+                          style="width: 180px;
+                            cursor: pointer;
+                             text-align:center;
+                             color: #FFFFFF;
+                             line-height: 50px;
+                             ">
+                      <dv-border-box-7>
+                          检完待处理扫码登记
+                      </dv-border-box-7>
+            </div>
+            <dv-decoration-8 :reverse="true" style="width:300px;height:50px;" />
+            </br>
+            <div @click.prevent="openRedar('处理')"
+                          style="width: 180px;
+                            cursor: pointer;
+                             text-align:center;
+                             color: #FFFFFF;
+                             line-height: 50px;
+                             ">
+                      <dv-border-box-7>
+                          样品处理扫码登记
+                      </dv-border-box-7>
+            </div>
+            <dv-decoration-8 :reverse="true" style="width:300px;height:50px;" />
+         </div>
+
+         <!-- 扫码操作组件-->
+
+         <div class="popContainer" v-if="redar" @click="remRedar">
+              <dv-decoration-12 style="width:150px;height:150px;margin:0 auto;top: 35%;">
+                 开启扫描设备连接
+              </dv-decoration-12>
+         </div>
+
+         <el-dialog
+             width="75%"
+             :modal-append-to-body='false'
+             :visible.sync="visible">
+                 <div style="min-height: 600px;">
+                   <div style="float: left; font-weight: bold;">需要{{behavior}}操作的样品:</div>
+                    <el-button @click="submitData" type="primary" style="float: right;">确认提交</el-button>
+                    <el-table
+                       :data="listData"
+                       stripe
+                       style="width: 100%">
+                       <el-table-column
+                         prop="sheBeiMingCheng"
+                         label="设备名称"
+                         >
+                       </el-table-column>
+
+                       <el-table-column
+                         prop="guiGeXingHao"
+                         label="规格型号"
+                        >
+                       </el-table-column>
+
+                       <el-table-column
+                         prop="sheBeiShiBieH"
+                         label="设备识别号">
+                       </el-table-column>
+
+                       <el-table-column
+                         prop="sheBeiZhuangTa"
+                         label="设备状态">
+                       </el-table-column>
+                     </el-table>
+                 </div>
+           </el-dialog>
+
+        </div>
+
+        <!-- 其他统计组件 -->
+        <div class="mc-bottom">
+          <dv-border-box-6 class="bottom-left-container">
+            <dv-decoration-4 class="mcb-decoration-1" style="width:5px;height:45%;" />
+            <dv-decoration-4 class="mcb-decoration-2" style="width:5px;height:45%;" />
+            <Bottom-Left-Chart-1 />
+            <Bottom-Left-Chart-2 />
+          </dv-border-box-6>
+
+          <div class="bottom-right-container">
+            <Bottom-Right-Table-1 />
+            <Bottom-Right-Table-2 />
+            <Bottom-Right-Table-3 />
+            <Bottom-Right-Table-4 />
+          </div>
+        </div>
+      </dv-border-box-1>
+
+    </dv-full-screen-container>
+  </div>
+</template>
+
+<script>
+import TopLeftCmp from './TopLeftCmp'
+import TopMiddleCmp from './TopMiddleCmp'
+import TopRightCmp from './TopRightCmp'
+
+import BottomLeftChart1 from './BottomLeftChart1'
+import BottomLeftChart2 from './BottomLeftChart2'
+
+import BottomRightTable1 from './BottomRightTable1'
+import BottomRightTable2 from './BottomRightTable2'
+import BottomRightTable3 from './BottomRightTable3'
+import BottomRightTable4 from './BottomRightTable4'
+import repostCurd from '../../../../business/platform/form/utils/custom/joinCURD.js'
+
+export default {
+  name: 'DataView',
+  components: {
+    TopLeftCmp,
+    TopMiddleCmp,
+    TopRightCmp,
+    BottomLeftChart1,
+    BottomLeftChart2,
+    BottomRightTable1,
+    BottomRightTable2,
+    BottomRightTable3,
+    BottomRightTable4
+  },
+  data () {
+    return {
+     visible:false,
+     redar:false,
+     facilityId:'',
+     listData:[],
+     behavior:''
+    }
+  },
+   methods: {
+	  toHome(){
+      this.$router.push({
+      			name:'dashboard'
+      })
+		 },
+     allView(){
+       screenfull.request() //默认显示全屏
+     },
+     openRedar(type){
+       this.behavior = type
+       this.redar = true
+       this.$refs.redarInput.focus();
+        this.listData = []
+     },
+     remRedar(){
+       this.redar = false
+     },
+     //扫码之后
+     facilityData(id){
+       if(id){
+         for(let item of this.listData){
+           if(item.id==id){
+             return
+             }
+                   }
+         this.loadData(id)
+         //开始查询设备
+         this.facilityId = ''
+        }
+     },
+     /* 查询参数格式化*/
+     getSearcFormData(id) {
+       const params = {}
+       params['Q^id_^S'] = id
+       return ActionUtils.formatParams(
+         params,
+        {},
+        {},
+         )
+     },
+     // 提交设备
+     submitData(){
+         this.visible = false
+         alert("提交设备 [ "+this.behavior+" ] 信息成功")
+       },
+
+     /* 获取数据*/
+     loadData(id) {
+       if(!id){
+         return
+       }
+     repostCurd('select',
+          '{"tableName": "t_ypgl","paramWhere":{"id_":"'+id+'"}}'
+              ).then(response => {
+                let cont = response.variables.data[0]
+
+                switch(cont.yang_pin_zhuang_t){
+                  case '入库':
+                    this.addSamRecord(id,cont.yang_pin_bian_hao,cont.yang_pin_ming_che,"检验检测" ) //增加流转记录
+                    this.updateSam(id,{yang_pin_zhuang_t:"检验检测"},"检验检测",cont.yang_pin_bian_hao)//修改样品信息
+                  break;
+
+                  case '检验检测':
+                    this.addSamRecord(id,cont.yang_pin_bian_hao,cont.yang_pin_ming_che,"检完、待处理" ) //增加流转记录
+                    this.updateSam(id,{yang_pin_zhuang_t:"检完、待处理",jian_ce_ri_qi_: this.sysTime() + ""},"检完、待处理",cont.yang_pin_bian_hao)//修改样品信息
+                  break;
+
+                  case '检完、待处理':
+                     this.$confirm('当前状态为 [ '+ cont.yang_pin_zhuang_t +' ] 可进行以下操作', '编号 [ '+cont.yang_pin_bian_hao+' ] 的样品', {
+                       cancelButtonText: '继续检验检测',
+                       confirmButtonText: '样品处理 / 送还',
+                       type: 'warning'
+                     }).then(() => {
+                       this.addSamRecord(id,cont.yang_pin_bian_hao,cont.yang_pin_ming_che,"检完、处理" ) //增加流转记录
+                       this.updateSam(id,{yang_pin_zhuang_t:"检完、处理"},"检完、处理",cont.yang_pin_bian_hao)//修改样品信息
+                     }).catch(() => {
+                       this.addSamRecord(id,cont.yang_pin_bian_hao,cont.yang_pin_ming_che,"检验检测" ) //增加流转记录
+                       this.updateSam(id,{yang_pin_zhuang_t:"检验检测"},"检验检测",cont.yang_pin_bian_hao)//修改样品信息
+                     })
+                  break;
+                  case '检完、处理':
+                    this.$message.warning("当前样品状态为: ["+cont.yang_pin_zhuang_t+" ] 无法进行操作！")
+                    this.redar = false
+                  break;
+
+                   default:
+                      this.$message.warning("数据库中没有找到当前样品！");
+                      break;
+
+                }
+                })
+
+     },
+     // 修改样品状态
+    updateSam(id,data,state,mun){
+       repostCurd('update',
+       '{"tableName": "t_ypgl","paramWhere":{"id_":"'+id+'"},"paramCond":'+JSON.stringify(data)+'}'
+              ).then((res)=>{
+                     this.$alert('<span style="font-size:16px;font-weight: bold;">状态成功变更为 [ <span style="color: #00CC66;">'+ state +'</span> ] ！！!</span>', '编号 [ '+mun+' ] 的样品', {
+                              dangerouslyUseHTMLString: true,
+                               type: 'success',
+                        }).then(() => { this.redar = false }).catch(() => {})
+             }).catch((er) => {
+                this.$message.error("参数错误，或网络延迟。请联系管理员")
+                this.redar = false
+             })
+    },
+    //添加流转记录
+    addSamRecord(id,num,name,state){
+      let addLiuZhuan = []
+      let queRen = {}
+      queRen["jing_shou_shi_jia"] = this.sysTime() + "";
+      queRen["yang_pin_ming_che"] = name
+      queRen["yang_pin_bian_hao"] = num
+      queRen["jing_shou_ren_"] = this.$store.getters.userInfo.user.id
+      queRen["parent_id_"] = id
+      queRen["zhuang_tai_"] = state
+      addLiuZhuan.push(queRen)
+      repostCurd('add',
+      '{"tableName": "t_yplzjl","paramWhere":'+JSON.stringify(addLiuZhuan)+'}'
+             )
+
+    },
+     sysTime(){
+        var myDate = new Date();
+        var year = myDate.getFullYear();
+        var month = myDate.getMonth()+1;
+        var date = myDate.getDate();
+        var h = myDate.getHours();
+        var m = myDate.getMinutes();
+        var s = myDate.getSeconds();
+        var now = year + '-' +(month < 10 ? "0" :"")+ month + "-"+((date < 10 ? "0" :"")) +date + " "+((h < 10 ? "0" :"")) + h + ':'+((m < 10 ? "0" :"")) + m + ":"+((s < 10 ? "0" :"")) + s;
+        return now;
+    },
+
+
+  }
+}
+</script>
+
+<style lang="less">
+#data-view-yangp {
+  width: 100%;
+  height: 100%;
+  background-color: #030409;
+  color: #fff;
+  #dv-full-screen-container {
+    background-image: url('./img/bg.png');
+    background-size: 100% 100%;
+    box-shadow: 0 0 3px blue;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .main-header {
+    height: 80px;
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+
+    .mh-left {
+      font-size: 20px;
+      color: rgb(1,134,187);
+
+      a:visited {
+        color: rgb(1,134,187);
+      }
+    }
+
+    .mh-middle {
+      font-size: 30px;
+    }
+
+    .mh-left, .mh-right {
+      width: 450px;
+    }
+  }
+
+  .main-container {
+    height: calc(~"100% - 80px");
+
+    .mc-top, .mc-bottom {
+      box-sizing: border-box;
+      padding: 30px;
+      display: flex;
+    }
+
+    .mc-top {
+      height: 40%;
+    }
+
+    .mc-bottom {
+      height: 60%;
+    }
+
+    .yp-top-left-cmp, .bottom-left-container {
+      width: 35%;
+    }
+
+    .yp-top-middle-cmp, .top-right-cmp {
+      width: 58%;
+    }
+
+    .bottom-left-container {
+      position: relative;
+
+      .border-box-content {
+        display: flex;
+      }
+
+      .mcb-decoration-1, .mcb-decoration-2 {
+        position: absolute;
+        left: 50%;
+        margin-left: -2px;
+      }
+
+      .mcb-decoration-1 {
+        top: 5%;
+        transform: rotate(180deg);
+      }
+
+      .mcb-decoration-2 {
+        top: 50%;
+      }
+
+      .yp-bottom-left-chart-1, .yp-bottom-left-chart-2 {
+        width: 50%;
+        height: 100%;
+      }
+    }
+
+    .bottom-right-container {
+      width: 68%;
+      box-sizing: border-box;
+      display: flex;
+    }
+    .popContainer{
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        z-index: 999;
+        background: rgba(0,0,0,0.7);
+    }
+  }
+}
+</style>