明鉴样品大屏

package.json

@@ -35,7 +35,6 @@
     "better-scroll": "^2.0.2",
     "big.js": "^5.2.2",
     "bpmn-js": "^7.3.0",
-    "diagram-js": "^6.8.2",
     "bpmn-js-properties-panel": "^0.35.0",
     "camunda-bpmn-moddle": "^4.4.0",
     "clipboard": "^2.0.6",
@@ -44,6 +43,7 @@
     "dayjs": "^1.8.35",
     "default-passive-events": "^2.0.0",
     "detect-indent": "^6.0.0",
+    "diagram-js": "^6.8.2",
     "diagram-js-minimap": "^2.0.3",
     "diagram-js-origin": "^1.3.1",
     "echarts": "^4.9.0",

src/main.js

@@ -20,6 +20,10 @@ import less from 'less'
 import Blob from './excel/Blob'
 import Export2Excel from './excel/Export2Excel.js'
 
+//引入echarts
+import * as echarts from 'echarts'
+Vue.prototype.$echarts = echarts
+
 //less的css编码
 Vue.use(less)
 //数据大屏插件

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

@@ -0,0 +1,154 @@
+<template>
+  <!-- 年度检测完成情况(环形图) -->
+  <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>
+    </dv-border-box-7>  
+  </div>
+</template>
+
+<script>
+export default {
+  data(){
+    return{
+      annualStatus:null,
+      annualTotal:0,
+    }
+  },
+  created(){
+
+  },
+  mounted(){
+    this.annualStatusData()
+
+  },
+  methods:{
+    annualStatusData(){
+      var annualStatus = this.$echarts.init(this.$refs.AnnualStatus_refs);
+      var annualStatusOption ={
+        grid:{
+          left:'',
+          top:'0%',
+          bottom:'0%',
+          containLabel:true  //?
+        },
+        title: {
+          text: '检测任务总量',
+          subtext: 424,
+          // 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: 297, name: '已检测' },
+              { value: 127, name: '未检测' },
+             
+            ]
+          }
+       ]
+      }
+      annualStatus.setOption(annualStatusOption);
+
+    },
+  }
+
+}
+</script>
+
+<style lang="less" >
+* border,body{
+  padding: 0px;
+  margin: 0px;
+}
+  .annualStatus{
+    width: 400px;
+    height: 416px;
+    display: flex;
+    flex-direction:cloumn;
+    flex-wrap :wrap;
+    //  background-color: rgb(25, 97, 156);
+    overflow: hidden;
+     
+      .annualStatus_title{
+        width: 100%;
+        height: 50px;
+        line-height: 50px;
+        text-align: center;
+        // background-color: rgb(25, 97, 156);
+        font-weight: 600;
+        font-size: 20px;
+        color: '#fff';
+      }
+      .annualStatus_content{
+        width: 100%;
+        height: 350px;
+        // background-color: red;
+      }
+    }
+</style>

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

@@ -0,0 +1,315 @@
+<template>
+  <div class="entrustNumber" >
+   <!-- 委托样品情况 -->
+       <dv-border-box-7  backgroundColor="rgba(6, 30, 93, 0.5)" >
+         <div class="entrustNumber_title">
+           <span class="demonstration">委托样品情况</span>
+           <el-date-picker
+           class="chooseMonth"
+             v-model="NowTime"
+             type="month"
+           
+             @change="changeTime"
+             placeholder="请选择时间">
+           </el-date-picker>
+         </div>
+ 
+         <div class="entrustNumber_content" ref="Number_refs"></div>
+     </dv-border-box-7>       
+    </div>
+   
+     
+ </template>
+ 
+ <script>
+ import curdPost from '@/business/platform/form/utils/custom/joinCURD.js'
+ export default {
+   data(){ 
+     return{
+       NowTime: '',
+       entrustNumber:null,
+       //已委托未收到样品数据
+       notReceivedNumber:[],
+       //已收到样品数据
+       received:[],
+       //不合格样品数据
+       unqualifiedData:[],
+       //留样样品数据
+       retentionData:[],
+       
+ 
+ }
+   },
+   created(){
+     this.getNowTime()
+     this.getNotReceivedData()
+     this.getReceivedData()
+     this.getUnqualifiedData()
+     this.getRetentionData()
+   },
+   mounted() {
+     //初始化组件
+     this.entrustNumberInit();
+   },
+ methods:{
+   //样品相关数据时间控件默认显示当前时间
+   getNowTime(){
+       const nowDate = new Date();
+       const date = {
+           year: nowDate.getFullYear(),
+           month: nowDate.getMonth() + 1,
+       }
+       this.NowTime = date.year + '-' + date.month 
+     },
+     //用户手动查看某月份 的 样品相关数据
+   changeTime(e){
+     console.log(e,'未收到样品数据',this.notReceivedNumber)
+     console.log(e,'已收到样品数据',this.received)
+     // this.filter(this.notReceivedNumber,'shou_yang_ri_qi_',e)
+     console.log(this.filter(this.received,'shou_yang_ri_qi_',e))
+     // console.log(this.filter(this.unqualifiedData,'shou_yang_ri_qi_',e))
+     // console.log(this.filter(this.retentionData,'shou_yang_ri_qi_',e))
+       },
+       //筛选月份数据   filter(要处理的数据，6，时间)
+   filter(array,keyname,date){
+     let res=[]
+     array.forEach(e => {
+       //用户选中的时间
+       let month= date.getMonth()+1
+       month = month < 10 ? ('0' + month) :month
+       let year =date.getFullYear()
+      //数据库里每一项的年，月
+       let year2= e[keyname].slice(0,4)
+       let month2=e[keyname].slice(5,7)
+       console.log('用户选择的时间',year + '年'  + month + '月' )
+       console.log('数据库里的时间',year2 + '年'  + month2 + '月' )
+       console.log('已收到的每一项',array)
+       console.log('当前项的收养日期',e[keyname])
+      
+       //把用户选中的年，月 的样品相关数据筛选出来
+       if(year2==year && month2 ==month  ){
+         res.push(e)
+         console.log("用户选择的时间 对应的数据",res)
+       }  
+     });
+     // return res
+    
+ 
+     
+   },
+   //1.未收到样品：已委托未收到样品数量:样品表有，登记表没有
+   getNotReceivedData(){
+       let sql1 = "select * from t_mjypb where t_mjypb.yang_pin_bian_hao not in(select t_mjypdjb.wei_tuo_bian_hao_ from t_mjypdjb)"
+       curdPost('sql',sql1).then(response => { 
+       this.notReceivedNumber = response.variables.data
+       // console.log('样品表未收样数据aa',this.notReceivedNumber)
+       })
+   },
+   
+   //2.已收到：样品登记表有数据
+   getReceivedData(){
+     let sql2 = "select * from t_mjypdjb"
+       curdPost('sql',sql2).then(response => { 
+       this.received = response.variables.data
+       // console.log('已收到样品数据aa',this.received)
+       // let dataList = this.received.map((item)=>{
+       //   return isNaN(parseInt(item.shou_yang_shu_lia))?0:parseInt(item.shou_yang_shu_lia);
+       // });
+       // console.log('已收',dataList);
+     })
+   },
+   
+   //3.已经收到不合格xx
+   getUnqualifiedData(){
+     let sql3 = "select * from t_mjypdjb where yan_shou_zhuang_t = '残缺'"
+       curdPost('sql',sql3).then(response => { 
+       this.unqualifiedData = response.variables.data
+       // console.log('不合格样品数据aa',this.unqualifiedData)
+       })
+   },
+   //4.留样样品数据xx
+    getRetentionData(){
+     let sql4 = "select  * from (select * from t_mjypdjb where  liu_yang_ri_qi_ ='' ) a where   a.shi_fou_liu_yang_ != '否'"
+       curdPost('sql',sql4).then(response => { 
+       this.retentionData = response.variables.data
+       // console.log('留样样品数据aa',this.retentionData)
+       })
+ 
+    },
+   
+   //委托样品图表
+   entrustNumberInit(){
+     var entrustNumber = this.$echarts.init(this.$refs.Number_refs);
+     var entrustNumberOption = {
+         xAxis:{
+           type: "category",
+           //获取当前月的日期1到30日
+           data: ["1号", "2号", "3号", "4号", "5号", "6号", "7号","8号","9号","10号",
+           "11号","12号","13号", "14号", "15号", "16号", "17号", "18号", "19号","20号",
+           "21号","22号","23号","24号","25号","26号","27号","28号","29号","30号"],
+           splitLine:{
+             show:false
+           },
+           axisLine: {
+             lineStyle: {
+               type: 'solid',
+               color: 'white',//坐标线的颜色
+                 
+             }
+           },
+           axisLabel: {
+             style: {
+                 fill: '#fff'
+             }
+         },
+         },
+         yAxis: {
+           type: "value",
+           name:'数量',
+           axisLine: {
+             lineStyle: {
+               type: 'solid',
+               color: 'white',//坐标线的颜色
+                 
+             }
+           },
+           //去除网格线
+           splitLine: {
+             show: false
+         },
+         },
+         // title: {
+         //   text: '委托样品数量柱形图',
+         // },
+         grid:{
+           left:'2%',
+           right:"5%",
+           top:'15%',
+           bottom:'2%',
+           containLabel:true
+         
+         },
+         // tooltip悬浮提示框
+         tooltip:{
+           show:true
+         },
+         //图例的位置
+ 
+         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],
+             
+            //柱子的颜色
+             itemStyle:{
+               show:true,
+               color:'rgba(0, 186, 255, 0.4)',
+             },
+           
+            
+             //背景颜色
+             // backgroundStyle: {
+             //   color: "rgba(0, 186, 255, 0.4)",
+             // },
+           },
+           {
+             name:'已收到样品',
+             type: 'line',
+             label: {
+               show: true,
+               position: 'bottom',
+               color:'#fff'  
+             },
+             data: [22 ,18, 33, 45, 63, 12, 20, 24, 23, 16, 12, 34,
+             22 ,18, 33, 45, 63, 12, 20, 24, 23, 16, 12, 34,
+             22 ,18, 12, 20, 24,  34],
+             itemStyle:{
+                 color:'rgba(55, 162, 218, 0.6)'
+             },
+           
+           },
+         ],
+         // series:this.series
+     }
+       entrustNumber.setOption(entrustNumberOption)
+   }
+ }
+ }
+ </script>
+ 
+ <style lang="less" >
+ * border,body{
+   padding: 0px;
+   margin: 0px;
+ }
+ .entrustNumber{
+   width: 1190px;
+   height: 416px;
+ }
+ // .entrustNumber_content{
+ //   width: 100%;
+ //   height: 100%;
+ // }
+ .entrustNumber{
+       // flex: 3;
+       // background-color: rgb(39, 3, 59);
+       display: flex;
+       flex-direction:cloumn;
+       flex-wrap :wrap;
+       // justify-content:center;
+       .entrustNumber_title{
+         // background-color: rgb(25, 97, 156);
+         width: 100%;
+         height: 50px;
+         position: relative;
+         .demonstration{
+           line-height: 50px;
+           position: absolute;
+           left: 50%;
+           top: 50%;
+           margin-left: -50px;
+           margin-top: -25px;
+           color: '#fff';
+           font-size:20px;
+           font-weight:600;
+ 
+         }
+         .chooseMonth{
+           width: 120px;
+           line-height: 50px;
+           margin-left: 10px;
+         }
+       }
+       .entrustNumber_content{
+         width: 100%;
+         height: 366px;
+         // background-color: red;
+       }
+     }
+ 
+ </style>

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

@@ -0,0 +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>
+</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); 
+   })
+
+
+ },
+ 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)
+     }) 
+    
+   },
+
+    //获取时间
+    getNowTime(){
+     const nowDate = new Date();
+     const date = {
+         year: nowDate.getFullYear(),
+         month: nowDate.getMonth() + 1,
+         day: nowDate.getDate(),
+         hour: nowDate.getHours(),
+     }
+     this.sendTime = date.year + '年' + date.month + '月' + date.day + '日' +date.hour + '时' 
+   },
+    //委托样品类型环形图
+    entrustTypeData(){
+     var entrustType = this.$echarts.init(this.$refs.Type_refs);
+     var entrustTypeOption ={
+       grid:{
+         left:'',
+         top:'0%',
+         bottom:'0%',
+         containLabel:true  //?
+       },
+       title: {
+         text: '委托样品总数',
+         subtext: '400',
+         // center: ["40%", "48%"],
+         x: "40%",     //X坐标   
+         y: "42%",    //Y坐标
+          // left:195,//慎用百分比（相对环形图宽度）
+         // top: '160px',
+         //主副标题之间的间距
+         itemGap:10,
+         textAlign:'center',  //竖直居中对齐
+         // textVerticalAlign:'auto',
+         textStyle: {    //标题样式
+           fontSize: 18,
+           fontWeight: "bolder",  //bold??
+           color: "#aaa",
+           transform: "translate(-50%,-50%)",
+           marginTop:"-50%",
+           marginLeft:"-50%",
+         },
+         subtextStyle: {   //副标题样式
+           fontSize: 26,
+           fontWeight: "bolder",
+           color: "#333",
+           formatter: '', 
+           marginTop:"-50%",
+           marginLeft:"-50%",
+           transfrom:"translate(-50%,-50%)",
+           // align:'center'
+         },
+       },
+      //鼠标滑过显示信息
+       tooltip: {
+         trigger: "item",
+         formatter: '{d}%\n{b}',//
+       },
+       //图例的位置
+       legend: {
+         orient: 'vertical',  //horizontal 水平排列
+         // left: 'right',
+         right:'1%',
+         bottom:'10%',
+         lineStyle:{
+
+         },
+         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" >
+* border,body{
+ padding: 0px;
+ margin: 0px;
+}
+ .entrustType{
+   width: 600px;
+   height: 416px;
+   display: flex;
+   flex-direction:cloumn;
+   flex-wrap :wrap;
+   overflow: hidden;
+    
+     .entrustType_title{
+         // background-color: rgb(0, 99, 180);
+         width: 100%;
+         height: 50px;
+         line-height: 50px;
+         text-align: center;
+         color: '#fff';
+         font-size:20px;
+         font-weight: 600;
+       // font-weight:bold;
+     }
+     .entrustType_content{
+       width: 100%;
+       height: 350px;
+       // background-color: red($color: #000000);
+     }
+   }
+
+</style>

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

@@ -0,0 +1,309 @@
+<template>
+  <div class="entrustNumber" >
+   <!-- 月度样品检测情况组件  -->
+       <dv-border-box-7  backgroundColor="rgba(6, 30, 93, 0.5)" >
+         <div class="entrustNumber_title">
+           <span class="demonstration">月度样品检测情况</span>
+           <el-date-picker
+           class="chooseMonth"
+             v-model="NowTime"
+             type="month"
+           
+             @change="changeTime"
+             placeholder="请选择时间">
+           </el-date-picker>
+         </div>
+ 
+         <div class="entrustNumber_content" ref="Number_refs"></div>
+     </dv-border-box-7>       
+    </div>
+   
+     
+ </template>
+ 
+ <script>
+ import curdPost from '@/business/platform/form/utils/custom/joinCURD.js'
+ export default {
+   data(){ 
+     return{
+       NowTime: '',
+       entrustNumber:null,
+       //已委托未收到样品数据
+       notReceivedNumber:[],
+       //已收到样品数据
+       received:[],
+       //不合格样品数据
+       unqualifiedData:[],
+       //留样样品数据
+       retentionData:[],
+       
+ 
+ }
+   },
+   created(){
+     this.getNowTime()
+     this.getNotReceivedData()
+     this.getReceivedData()
+     this.getUnqualifiedData()
+     this.getRetentionData()
+   },
+   mounted() {
+     //初始化组件
+     this.entrustNumberInit();
+   },
+ methods:{
+   //样品相关数据时间控件默认显示当前时间
+   getNowTime(){
+       const nowDate = new Date();
+       const date = {
+           year: nowDate.getFullYear(),
+           month: nowDate.getMonth() + 1,
+       }
+       this.NowTime = date.year + '-' + date.month 
+     },
+     //用户手动查看某月份 的 样品相关数据
+   changeTime(e){
+     console.log(e,'未收到样品数据',this.notReceivedNumber)
+     console.log(e,'已收到样品数据',this.received)
+     // this.filter(this.notReceivedNumber,'shou_yang_ri_qi_',e)
+     console.log(this.filter(this.received,'shou_yang_ri_qi_',e))
+     // console.log(this.filter(this.unqualifiedData,'shou_yang_ri_qi_',e))
+     // console.log(this.filter(this.retentionData,'shou_yang_ri_qi_',e))
+       },
+       //筛选月份数据   filter(要处理的数据，6，时间)
+   filter(array,keyname,date){
+     let res=[]
+     array.forEach(e => {
+       //用户选中的时间
+       let month= date.getMonth()+1
+       month = month < 10 ? ('0' + month) :month
+       let year =date.getFullYear()
+      //数据库里每一项的年，月
+       let year2= e[keyname].slice(0,4)
+       let month2=e[keyname].slice(5,7)
+       console.log('用户选择的时间',year + '年'  + month + '月' )
+       console.log('数据库里的时间',year2 + '年'  + month2 + '月' )
+       console.log('已收到的每一项',array)
+       console.log('当前项的收养日期',e[keyname])
+      
+       //把用户选中的年，月 的样品相关数据筛选出来
+       if(year2==year && month2 ==month  ){
+         res.push(e)
+         console.log("用户选择的时间 对应的数据",res)
+       }  
+     });
+     // return res
+    
+ 
+     
+   },
+   //1.未收到样品：已委托未收到样品数量:样品表有，登记表没有
+   getNotReceivedData(){
+       let sql1 = "select * from t_mjypb where t_mjypb.yang_pin_bian_hao not in(select t_mjypdjb.wei_tuo_bian_hao_ from t_mjypdjb)"
+       curdPost('sql',sql1).then(response => { 
+       this.notReceivedNumber = response.variables.data
+       // console.log('样品表未收样数据aa',this.notReceivedNumber)
+       })
+   },
+   
+   //2.已收到：样品登记表有数据
+   getReceivedData(){
+     let sql2 = "select * from t_mjypdjb"
+       curdPost('sql',sql2).then(response => { 
+       this.received = response.variables.data
+       // console.log('已收到样品数据aa',this.received)
+       // let dataList = this.received.map((item)=>{
+       //   return isNaN(parseInt(item.shou_yang_shu_lia))?0:parseInt(item.shou_yang_shu_lia);
+       // });
+       // console.log('已收',dataList);
+     })
+   },
+   
+   //3.已经收到不合格xx
+   getUnqualifiedData(){
+     let sql3 = "select * from t_mjypdjb where yan_shou_zhuang_t = '残缺'"
+       curdPost('sql',sql3).then(response => { 
+       this.unqualifiedData = response.variables.data
+       // console.log('不合格样品数据aa',this.unqualifiedData)
+       })
+   },
+   //4.留样样品数据xx
+    getRetentionData(){
+     let sql4 = "select  * from (select * from t_mjypdjb where  liu_yang_ri_qi_ ='' ) a where   a.shi_fou_liu_yang_ != '否'"
+       curdPost('sql',sql4).then(response => { 
+       this.retentionData = response.variables.data
+       // console.log('留样样品数据aa',this.retentionData)
+       })
+ 
+    },
+   
+   //委托样品图表
+   entrustNumberInit(){
+     var entrustNumber = this.$echarts.init(this.$refs.Number_refs);
+     var entrustNumberOption = {
+         xAxis:{
+           type: "category",
+           //获取当前月的日期1到30日
+           data: ["1号", "2号", "3号", "4号", "5号", "6号", "7号","8号","9号","10号",
+           "11号","12号","13号", "14号", "15号", "16号", "17号", "18号", "19号","20号",
+           "21号","22号","23号","24号","25号","26号","27号","28号","29号","30号"],
+           splitLine:{
+             show:false
+           },
+           axisLine: {
+             lineStyle: {
+               type: 'solid',
+               color: 'white',//坐标线的颜色
+                 
+             }
+           },
+           axisLabel: {
+             style: {
+                 fill: '#fff'
+             }
+         },
+         },
+         yAxis: {
+           type: "value",
+           name:'数量',
+           axisLine: {
+             lineStyle: {
+               type: 'solid',
+               color: 'white',//坐标线的颜色
+                 
+             }
+           },
+           //去除网格线
+           splitLine: {
+             show: false
+         },
+         },
+         // title: {
+         //   text: '委托样品数量柱形图',
+         // },
+         grid:{
+           left:'2%',
+           right:"5%",
+           top:'15%',
+           bottom:'2%',
+           containLabel:true
+         
+         },
+         // tooltip悬浮提示框
+         tooltip:{
+           show:true
+         },
+         //图例的位置
+ 
+         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],
+             
+            //柱子的颜色
+             itemStyle:{
+               show:true,
+               color:'rgba(0, 186, 255, 0.4)'
+               
+             },
+           },
+           {
+             name:'已检样品',
+             type: 'line',
+             label: {
+               show: true,
+               position: 'bottom',
+               color:'#fff'
+             },
+             data: [22 ,18, 33, 45, 63, 12, 20, 24, 23, 16, 12, 34,
+            22 ,18, 33, 45, 63, 12, 20, 24, 23, 16, 12, 34,
+            22 ,18, 12, 20, 24,  34],
+             itemStyle:{
+                 color:'rgba(55, 162, 218, 0.6)'
+             },
+           
+           },
+         ],
+         // series:this.series
+     }
+       entrustNumber.setOption(entrustNumberOption)
+   }
+ }
+ }
+ </script>
+ 
+ <style lang="less" >
+ * border,body{
+   padding: 0px;
+   margin: 0px;
+ }
+ .entrustNumber{
+   width: 1190px;
+   height: 416px;
+ }
+ // .entrustNumber_content{
+ //   width: 100%;
+ //   height: 100%;
+ // }
+ .entrustNumber{
+       // flex: 3;
+       // background-color: rgb(39, 3, 59);
+       display: flex;
+       flex-direction:cloumn;
+       flex-wrap :wrap;
+       // justify-content:center;
+       .entrustNumber_title{
+         // background-color: rgb(25, 97, 156);
+         width: 100%;
+         height: 50px;
+         position: relative;
+         .demonstration{
+           line-height: 50px;
+           position: absolute;
+           left: 50%;
+           top: 50%;
+           margin-left: -60px;
+           margin-top: -25px;
+           color: '#fff';
+           font-size:20px;
+           font-weight:600;
+ 
+         }
+         .chooseMonth{
+           width: 120px;
+           line-height: 50px;
+           margin-left: 10px;
+         }
+       }
+       .entrustNumber_content{
+         width: 100%;
+         height: 366px;
+         // background-color: red;
+       }
+     }
+ 
+ </style>

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

@@ -0,0 +1,193 @@
+<template>
+  <!-- 月度检测完成情况(环形图) -->
+  <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>
+    </dv-border-box-7>  
+  </div>
+</template>
+
+<script>
+import curdPost from '@/business/platform/form/utils/custom/joinCURD.js'
+export default {
+  data(){
+    return{
+      monthlyStatus:null,
+      testedData:[]
+    }
+  },
+  created(){
+    this.getTestedData()
+    this.getTestTotalData()
+
+  },
+  mounted(){
+    this.enmonthlyStatusData()
+
+  },
+  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)
+    },
+
+    //已经完成检测的样品
+    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)
+
+      })
+      
+    },
+    enmonthlyStatusData(){
+      var monthlyStatus = this.$echarts.init(this.$refs.MonthlyStatus_refs);
+      var monthlyStatusOption ={
+        grid:{
+          left:'',
+          top:'0%',
+          bottom:'0%',
+          containLabel:true  //?
+        },
+        title: {
+          text: '检测任务总量',
+          subtext: '424',
+          // 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: 297, name: '已检测' },
+              { value: 127, name: '未检测' }
+            ]
+          }
+       ]
+      }
+      monthlyStatus.setOption(monthlyStatusOption);
+
+    },
+  }
+
+}
+</script>
+
+<style lang="less" >
+* border,body{
+  padding: 0px;
+  margin: 0px;
+}
+  .monthlyStatus{
+    width: 400px;
+    height: 416px;
+    display: flex;
+    flex-direction:cloumn;
+    flex-wrap :wrap;
+    //  background-color: rgb(25, 97, 156);
+    overflow: hidden;
+     
+      .monthlyStatus_title{
+        width: 100%;
+        height: 50px;
+        line-height: 50px;
+        text-align: center;
+        // padding-left: 20px;
+        // background-color: rgb(25, 97, 156);
+        font-weight: 600;
+        font-size: 20px;
+        color:'#fff'
+        // overflow: hidden;
+      }
+      .monthlyStatus_content{
+        width: 100%;
+        height: 350px;
+        // background-color: red;
+      }
+    }
+</style>

src/views/demo/yangPin/yangPinShuJu/SampleIndex.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>

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

@@ -0,0 +1,195 @@
+<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>
+      <!-- <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
+    }
+  },
+  created(){
+    //数据获取
+    this.getEntrustedTotalData()
+    this.getNotReceivedData()
+    this.getReceivedData()
+    this.getUnqualifiedData()
+    this.getStayData()
+    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()
+      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_mjypb" 
+      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_mjypb WHERE wai_jian_ in(select id_ from t_mjwtsqb where zhuang_tai_ = '待样品接收')" 
+      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_mjypdjb" 
+      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_mjypdjb 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_mjypdjb where yan_shou_zhuang_t = '残缺'" 
+      curdPost('sql',sql4).then(response => { 
+      let data = response.variables.data
+      this.UnqualifiedNumber =data[0].sum
+
+    })
+     },
+     //留样样品数量
+     getStayData(){
+      let sql5= "select  * from (select * from t_mjypdjb 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 
+
+    })
+     }
+
+  },
+ 
+
+
+}
+</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,236 @@
 <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()" >
+            <dv-border-box-8>返回</dv-border-box-8>
           </div>
-        </div>
-
-        <div class="mh-middle">样品流转及数据监控统计</div>
-        <div class="mh-right">
-
-
-
-        </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>
       </div>
+          <!-- <div>当前时间</div> -->
+          <!-- 样品数据总览 -->
+          <div class="overView">
+            <!-- <header-content/> -->
+            <headerContent  @getUpdateTime="getTime"></headerContent>
+            <dv-decoration-10 style="width:100%;height:5px;" />
+          </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>
+       
+
+        <!-- 主体内容(图表部分) -->
+        <div class="mainContent">
+          <div class="entrust">
+            <div class="entrustNumber" ref="Number_refs">
+              <!-- 委托样品条目情况组件 -->
+              <entrust-number/>
             </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 class="entrustType" >
+              <entrust-type/>
             </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 class="detection">
+            <div class="monthlyStatus" ref="MonthlyStatus_refs"><monthlyStatus/></div>
+            <div class="monthlyNumber" ref="MonthlyNumber_refs"><monthlyNumber/></div>
+            <div class="annualStatus" ref="AnnualStatus_refs"><annualStatus/></div>
           </div>
         </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)+'}'
-             )
-
+  methods: {
+    getTime(val){
+      this.sendTime = val
     },
-     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;
-    },
-
 
+    allView(){
+      screenfull.request() //默认显示全屏
+    },
+    goBack(){
+      this.$router.back(-1)
+    }
   }
+
 }
 </script>
 
-<style lang="less">
-#data-view-yangp {
+<style lang="less" >
+*body{
+  padding: 0px;
+  margin: 0px;
+}
+.data-view {
   width: 100%;
   height: 100%;
-  background-color: #030409;
+  // position: absolute;
   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;
+    // box-shadow: 0 0 3px blue;bete
+    // display: flex;
+    // flex-direction: column;
     display: flex;
-    flex-direction: column;
-  }
-
-  .main-header {
-    height: 80px;
+    flex-direction:column;
+    align-items: stretch;
+    
+   .headerContent{
+    flex: 1;
+    
+    // background-color: rgb(99, 12, 41);
+    
+
+   }
+   .goBackButton{ 
+      width: 10%;
+      cursor: pointer;
+      height:2.825rem;
+      line-height: 2.825rem;
+      text-align:center;
+      margin-left:20%;
+      margin-top:-60px;
+      flex: 1;
+      position: absolute;
+      color: #FFFFFF;
+   }
+   .mainContent{
+    width: 100%;
+    height: 100%;
+    flex: 4;
     display: flex;
-    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;
+    flex-direction:column;
+    // align-items: stretch;
+    // align-items: flex-start;
+    align-content:space-between;
+    // margin-top: 20px;
+    
+    // background-color: rgb(12, 99, 58);
+      .entrust{
+      // width: 100%;
+      flex: 1;
+      // border: 1px solid rgb(25, 156, 91);
+      // background-color: rgb(6, 47, 161);
       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%;
+      justify-content:space-between;
+      margin-bottom: 15px ;
+        .entrustNumber{
+          flex: 5;
+          margin-right: 10px;
+          // background-color: rgb(25, 97, 156);
+        }
+        .entrustType{
+          flex: 3;
+         
+        }
       }
 
-      .yp-bottom-left-chart-1, .yp-bottom-left-chart-2 {
-        width: 50%;
-        height: 100%;
+      .detection{
+      // width: 100%;
+      flex: 1;
+      display: flex;
+      // border: 1px solid rgb(39, 3, 59);
+      // background-color: rgb(226, 77, 134);
+        .monthlyStatus{
+          flex: 1;
+        
+          // background-color: rgb(25, 156, 91);
+        }
+        .monthlyNumber{
+          flex: 3;
+          margin: 0px 10px;
+          // background-color: rgb(39, 3, 59);
+        }
+        .annualStatus{
+          flex: 1;
+        // margin-right: 10px;
+        // background-color: rgb(25, 156, 91);
+        }
+      
       }
-    }
+   
 
-    .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);
-    }
+  
   }
+ 
+    .overView{
+      width: 100%;
+      height: 80px;
+    }
+  
 }
-</style>
+}
+
+</style>