Merge branch 'master' of http://119.23.210.103:3000/wy/mj_firm_former

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/api/detection/wx.js

@@ -8,7 +8,7 @@ const WX_URL = '/business/v3/wx'
  */
 export function get(params) {
   return request({
-    url: WX_URL + '/openid',
+    url: WX_URL + '/openids',
     method: 'get',
     params: params
   })

src/assets/styles/pages/login.scss

@@ -52,17 +52,18 @@
   width: 450px;
   border-radius: 3px;
   box-sizing: border-box;
-  background-color: #fff;
+  //background-color: #fff;
   & > .el-tabs {
     margin-top: 30px;
   }
 }
 .login-main > h3 {
   margin-bottom: 20px;
-  border-left: 4px solid #409EFF;
+  border-left: 4px solid #a73a3a;
   .title {
     margin-left: 5px;
-    color: #409EFF;
+	color:#a73a3a;
+    //color: #409EFF;
   }
 }
 .login-main > p {
@@ -124,13 +125,15 @@
   .title {
     font-size: 26px;
     font-weight: 400;
-    color:$color-primary;
+    // color:$color-primary;
+	color:#a73a3a;
     margin: 0px auto 40px auto;
     text-align: center;
     font-weight: bold;
   }
   .lang-select {
-    color: $color-primary;
+    // color: $color-primary;
+	color:#a73a3a;
     position: absolute;
     top: 5px;
     right: 0px;
@@ -144,7 +147,8 @@
 .copyright {
 	display: none;
   text-align: center;
-  color:$color-primary;
+  //color:$color-primary;
+  color:#a73a3a;
   font-size: 13px;
   a {
     text-decoration: underline;

src/business/platform/form/utils/JForm.js

@@ -22,6 +22,7 @@ import { snapshoot,seal,sealPre,
 const _import = require('@/utils/util.import.' + process.env.NODE_ENV)
 import pinyin4js from 'pinyin4js';
 import store from '@/store'
+import router from '@/router'
 
 // 定义全局
 var JForm
@@ -56,7 +57,8 @@ _.extend(JForm, {
     this.$getSigPageUrl = getSigPageUrl // 对报表进行手动印章->预处理->签章页面url
     this.$generateUUID = generateUUID // 自定义规则自动生成uuid
     this._ = _
-    this.$store=store
+    this.$store = store
+    this.$router = router //添加router对象
     this._isInitialization = true
   },
 

src/business/platform/form/utils/custom/joinCURD.js

@@ -9,68 +9,71 @@ import md5 from 'js-md5';
 // 	  return post('update',JSON.stringify(cont))
 // 	}
 
-const post =  (url,data) => {
- let pash =''
- let requestData= ''
-  if(url=='select'){
+const post = (url, data) => {
+  let pash = ''
+  let requestData = ''
+  if (url == 'select') {
     pash = 'selectDataContextTable'
-  }else if(url=='selects'){
+  } else if (url == 'selects') {
     pash = 'selectDatasContextTable'
-  }else if(url=='batchDelete'){
+  } else if (url == 'batchDelete') {
     pash = 'batchDelete'
-  }else if(url=='delete'){
+  } else if (url == 'delete') {
     pash = 'deleteDataContextTable'
-  }else if(url =='batchDelete'){
+  } else if (url == 'batchDelete') {
     pash = 'batchDelete'
-  }else if(url=='add'){
+  } else if (url == 'add') {
     pash = 'addDataContextTable'
-  }else if(url=='update'){
+  } else if (url == 'update') {
     pash = 'updateDataContextTable' // 
-  }else if(url=='updates'){ //批量修改
+  } else if (url == 'updates') { //批量修改
     pash = 'updateDatasContextTable'
-  }else if(url=="sql"){ //直接传入sql
+  } else if (url == "sql") { //直接传入sql
     pash = 'inputSqlSelectData'
-  }else if(url=="str"){ //插入主管提醒数据
+  } else if (url == "str") { //插入主管提醒数据
     pash = 'crudZhuGuan'
-  }else if(url=="send"){ //插入主管提醒数据
+  } else if (url == "send") { //插入主管提醒数据
     pash = 'sendmessage'
   }
-  else if(url=="sendCms"){ //插入主管提醒数据
+  else if (url == "sendCms") { //插入主管提醒数据
     pash = 'sendCms'
   }
+  else if (url == "sendmessages") { //插入主管提醒数据
+    pash = 'sendmessages'
+  }
 
-  if(typeof data =="object" ){
-     data = JSON.stringify(data)
+  if (typeof data == "object") {
+    data = JSON.stringify(data)
   }
-  if(data && data.slice(2,1) == "l"){ //往主管表提交数据
+  if (data && data.slice(2, 1) == "l") { //往主管表提交数据
 
-    data='{"str":"'+data+'"}'
+    data = '{"str":"' + data + '"}'
     let md5 = sig(data) //加密， 获取md5密文
-    requestData =  data.slice(0,1)+'"sig":"'+md5+'",'+data.slice(1) //结果拼接
+    requestData = data.slice(0, 1) + '"sig":"' + md5 + '",' + data.slice(1) //结果拼接
 
-  }else if(data && data.slice(0,1) =="s"){ //判断是{}的参数，还是纯sql字符串的参数 , 纯sql补全。
+  } else if (data && data.slice(0, 1) == "s") { //判断是{}的参数，还是纯sql字符串的参数 , 纯sql补全。
 
-    data='{"sql":"'+data+'"}'
+    data = '{"sql":"' + data + '"}'
     let md5 = sig(data) //加密， 获取md5密文
-    requestData =  data.slice(0,1)+'"sig":"'+md5+'",'+data.slice(1) //结果拼接
+    requestData = data.slice(0, 1) + '"sig":"' + md5 + '",' + data.slice(1) //结果拼接
 
-  }else{ //对象转字符串
+  } else { //对象转字符串
 
     let md5 = sig(data) //加密， 获取md5密文
-    requestData =  data.slice(0,1)+'"sig":"'+md5+'",'+data.slice(1) //结果拼接
+    requestData = data.slice(0, 1) + '"sig":"' + md5 + '",' + data.slice(1) //结果拼接
 
   }
- return request({
-            url: 'business/v3/sys/universal/'+pash,
-            method: 'post',
-            data: requestData
-            })
+  return request({
+    url: 'business/v3/sys/universal/' + pash,
+    method: 'post',
+    data: requestData
+  })
 }
 /* 直接传入sql的签名算法   MD5加密*/
-function sig(sql){
-  let rul = (sql.length + 9)*12*3+168
-  let salt ="JinYuanXinTong"
-  return md5(rul+''+salt)
+function sig(sql) {
+  let rul = (sql.length + 9) * 12 * 3 + 168
+  let salt = "JinYuanXinTong"
+  return md5(rul + '' + salt)
 }
 
 export default post

src/components/jbd-panel/index.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="jbd-sys-title">
       <!--<span  class="jbd-sys-title-cont-center" style="margin-left: 40px;float: left;">金通实验室认证认可LIMS系统V2.0</span>-->
-      <span  class="jbd-sys-title-cont-center" style="margin-left: 40px;float: left;">明鉴实验室信息管理系统</span>
+      <span  class="jbd-sys-title-cont-center" style="margin-left: 40px;float: left;">明鉴细胞检测实验室信息管理系统</span>
        <span style="float: right; " class="jbd-sys-title-contact">
          </br>
-       深圳市金源信通科技有限公司开发 <i style="margin-left: 10px;" class="el-icon-phone"/> 0755-2642-4403
-       <i style="margin-left: 20px;" class="el-icon-phone"/> 1360 2583 429
+       <!-- 深圳市金源信通科技有限公司开发 <i style="margin-left: 10px;" class="el-icon-phone"/> 0755-2642-4403
+       <i style="margin-left: 20px;" class="el-icon-phone"/> 1360 2583 429 -->
 
      </span>
   </div>
-</template>
+</template>

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/component/qrcodeedse.vue

@@ -43,7 +43,8 @@
         let qrcode = new QRCode('qrcode', {
           width: 132,
           height: 132,
-          text:`https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxf0aecf99696061a3&redirect_uri=https%3A%2F%2Fwww.mingjianlims.com%2F%23%2Fziliao&response_type=code&scope=snsapi_base&state=${id}#wechat_redirect`,
+         // text:`https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxf0aecf99696061a3&redirect_uri=https%3A%2F%2Fwww.mingjianlims.com%2F%23%2Fziliao&response_type=code&scope=snsapi_base&state=${id}#wechat_redirect`,
+         text:`https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxea2c214ca5d25739&redirect_uri=https%3A%2F%2Fwww.mingjianlims.com%2F%23%2Fziliao&response_type=code&scope=snsapi_base&state=${id}#wechat_redirect`,//明鉴
           colorDark: "#000000", //前景色
           colorLight: "#FFFFFF", //背景色
           correctLevel: QRCode.CorrectLevel.L,

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>

src/views/huanjingjiankong/huanjingjiankong.vue

@@ -1,167 +1,81 @@
 <template>
   <div class="test-content">
-    <div class="title">环境监控</div>
+    <div class="title">
+      <div class="title-center" style="font-size: 26px; color: #c12530">
+        明鉴检测实验室温湿度负压动态监控系统
+      </div>
+      <div class="info-right">
+        <span style="color: #c12530; margin-right: 5px">采集时间:</span
+        ><span style="color: #276bcc; margin-right: 15px">{{ newTiMe }}</span>
+        <button @click="returnBlack" class="black">返回</button>
+      </div>
+    </div>
     <div class="body-content">
-      <div class="infoShow">
-        <div class="title">监控数据</div>
-        <div class="control-data">
-          <div class="dmo">
-            <div class="left-icon">
-              <div>
-                <i
-                  class="el-icon-school"
-                  style="font-size: 30px; color: #70cae5"
-                ></i>
-              </div>
-              <div class="room-name">试剂库1</div>
-            </div>
-            <div class="right-target">
-              <div class="wendu item">
-                温度:
-                <span
-                  >25℃
-                  <i
-                    class="el-icon-minus"
-                    style="color: #3399ff; font-size: 18px; padding-left: 4px"
-                  ></i
-                ></span>
-              </div>
-              <div class="shidu item">
-                湿度:
-                <span
-                  >91%
-                  <i
-                    class="el-icon-minus"
-                    style="color: #3399ff; font-size: 18px; padding-left: 4px"
-                  ></i
-                ></span>
-              </div>
-              <div class="qiya item">
-                气压:
-                <span
-                  >15pa
-                  <i
-                    class="el-icon-minus"
-                    style="color: #3399ff; font-size: 18px"
-                  ></i
-                ></span>
-              </div>
-            </div>
-          </div>
-          <div class="dmo">
-            <div class="left-icon">
-              <div>
-                <i
-                  class="el-icon-school"
-                  style="font-size: 30px; color: #70cae5"
-                ></i>
-              </div>
-              <div class="room-name">试剂库2</div>
-            </div>
-            <div class="right-target">
-              <div class="wendu item">
-                温度:
-                <span
-                  >25℃
-                  <i
-                    class="el-icon-minus"
-                    style="color: #3399ff; font-size: 18px; padding-left: 4px"
-                  ></i
-                ></span>
-              </div>
-              <div class="shidu item">
-                湿度:
-                <span
-                  >91%
-                  <i
-                    class="el-icon-minus"
-                    style="color: #3399ff; font-size: 18px; padding-left: 4px"
-                  ></i
-                ></span>
-              </div>
-              <div class="qiya item">
-                气压:
-                <span
-                  >15pa
-                  <i
-                    class="el-icon-minus"
-                    style="color: #3399ff; font-size: 18px; padding-left: 4px"
-                  ></i
-                ></span>
-              </div>
-            </div>
+      <div class="marquee-wrap" v-if="false">
+        <div>
+          <ul
+            class="marquee-list"
+            :class="{ 'animate-up': animateUp }"
+            :style="{ width: btnShow ? '360px' : '0px' }"
+          >
+            <li v-for="(item, index) in envirListData" :key="index">
+              <span>{{ item.deviceName }}</span> &nbsp;
+              <span>{{ item.t1 | numToFixed }}</span
+              >&nbsp; <span>{{ item.h1 | numToFixed }}</span
+              >&nbsp; <span>{{ item.p1 | numToFixed }}</span
+              >&nbsp;
+            </li>
+          </ul>
+          <div class="button">
+            <i class="el-icon-caret-right" @click="btnextendRight"></i>
+            <i class="el-icon-caret-left" @click="btnextendLeft"></i>
           </div>
-          <div class="dmo active">
-            <div class="left-icon">
-              <div>
-                <i
-                  class="el-icon-school"
-                  style="font-size: 30px; color: #70cae5"
-                ></i>
-              </div>
-              <div class="room-name">培养室2</div>
-            </div>
-            <div class="right-target">
-              <div class="wendu item item_active">
-                温度:
-                <span
-                  >25℃
-                  <i
-                    class="el-icon-top"
-                    style="color: red; font-size: 18px; padding-left: 4px"
-                  ></i
-                ></span>
-              </div>
-              <div class="shidu item">
-                湿度:
-                <span
-                  >91%
-                  <i
-                    class="el-icon-top"
-                    style="color: red; font-size: 18px; padding-left: 4px"
-                  ></i
-                ></span>
-              </div>
-              <div class="qiya item">
-                气压:
-                <span
-                  >15pa
-                  <i
-                    class="el-icon-bottom"
-                    style="color: #67c23a; font-size: 18px"
-                  ></i
-                ></span>
-              </div>
-            </div>
-          </div>
-          <!-- <span class="room">试剂库1:</span
-          ><span class="room-data">温度:25℃,湿度:71.6%</span>
-        </div>
-        <div class="control-data">
-          <span class="room">细胞培养室：</span
-          ><span class="room-data">温度:25℃,湿度:51.6%</span>
-        </div>
-        <div class="control-data active">
-          <span class="room">产物分析室：</span
-          ><span class="room-data">温度:29℃,湿度:71.6%</span>
-          <i
-            class="el-icon-warning-outline active-icon"
-  
-          ></i> -->
         </div>
       </div>
       <div class="mapShow">
         <div class="mapurl"></div>
         <div class="img-box">
-          <img src="images/shiyanshijiankong/shiyanshi.png" class="img" alt="" @click="mapEvent" />
+          <img
+            src="images/shiyanshijiankong/shiyanshi.png"
+            class="img"
+            alt=""
+            ref="wrap"
+          />
           <div
             ref="shijiku1"
             v-for="(item, index) in newweizhi"
             :key="index"
             :style="{ top: `${item.y}px`, left: `${item.x}px` }"
-            :class="[index == 1 ? 'shiyanshi_false' : 'shiyanshi_success']"
-          ></div>
-          <!-- <div  :style="{ top: `${item.y + 10}px`, left: `${item.x}px` }"><i class="el-icon-bell" style="background:red;font-size:20px;   position: absolute;"></i></div> -->
+            :class="[
+              item.run == '1'
+                ? item.ifshow == 'false'
+                  ? 'shiyanshi_false'
+                  : 'shiyanshi_success'
+                : 'bggray',
+            ]"
+          >
+            <div
+              :class="[item.ifshow == 'false' ? 'contentshow' : 'content']"
+              v-show="item.run == 1"
+            >
+              <div class="envir-conditoin">温度:{{ item.temp }}</div>
+              <div class="envir-conditoin">湿度:{{ item.humidness }}</div>
+              <div class="envir-conditoin">气压:{{ item.airPressure }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="controlStatus">
+        <div class="noControl">
+          <span class="gray"></span><span style="margin-left: 30px">未控</span>
+        </div>
+        <div class="yesControl">
+          <span class="green"></span>
+          <span style="margin-left: 30px">在控</span>
+        </div>
+        <div class="runWild">
+          <span class="red"></span>
+          <span><span style="margin-left: 30px">失控</span> </span>
         </div>
       </div>
     </div>
@@ -169,148 +83,557 @@
 </template>
 
 <script>
+import curdPost from "@/business/platform/form/utils/custom/joinCURD.js";
 export default {
+  name: "DataView",
   data() {
     return {
+      btnShow: true,
+      animateUp: false,
+      envirListData: [],
+      fullHeight: "",
+      fullWidth: "",
+      list: [
+        {
+          room: "*HAU01",
+          time: "2020-07-08 18:27:23",
+          temp: "20",
+        },
+        {
+          room: "*HAU01",
+          time: "2020-07-08 18:27:23",
+          temp: "20",
+        },
+        {
+          room: "*HAU01",
+          time: "2020-07-08 18:27:23",
+          temp: "20",
+        },
+        {
+          room: "*HAU01",
+          time: "2020-07-08 18:27:23",
+          temp: "20",
+        },
+        {
+          room: "*HAU01",
+          time: "2020-07-08 18:27:23",
+          temp: "20",
+        },
+      ],
       screen: [],
       x: 396,
       y: 453,
       newposition: [],
       newweizhi: [],
+      newTiMe: "",
       weizhi: [
         {
-          x: 280,
-          y: 619,
-        },
-        {
-          x: 353,
-          y: 619,
+          x: 463,
+          y: 653,
         },
         {
-          x: 436,
-          y: 619,
+          x: 584,
+          y: 653,
         },
         {
-          x: 42,
-          y: 241,
+          x: 719,
+          y: 653,
         },
         {
-          x: 106,
-          y: 241,
+          x: 847,
+          y: 653,
         },
         {
-          x: 48,
-          y: 97,
+          x: 1460,
+          y: 655,
         },
         {
-          x: 437,
-          y: 234,
+          x: 1460,
+          y: 450,
         },
         {
-          x: 437,
-          y: 165,
+          x: 713,
+          y: 260,
         },
-      ],
-      domsize: [
         {
-          width: 949,
-          height: 757,
+          x: 724,
+          y: 89,
         },
         {
-          width: 949,
-          height: 757,
+          x: 950,
+          y: 127,
         },
         {
-          width: 949,
-          height: 757,
+          x: 1062,
+          y: 127,
         },
         {
-          width: 949,
-          height: 757,
+          x: 1205,
+          y: 127,
         },
         {
-          width: 949,
-          height: 757,
+          x: 1353,
+          y: 127,
         },
+        ,
         {
-          width: 949,
-          height: 757,
+          x: 321,
+          y: 99,
         },
         {
-          width: 949,
-          height: 757,
+          x: 357,
+          y: 200,
         },
+      ],
+      domsize: [
         {
-          width: 949,
-          height: 757,
+          width: 1560,
+          height: 857,
         },
       ],
+      timelistData: [],
+      ifshow: true,
+      setIntervalDis: false,
     };
   },
+  filters: {
+    numToFixed: function (value) {
+      return value.toFixed(2);
+    },
+  },
   methods: {
-    mapEvent(e) {
-      console.log(e.offsetX, e.target.width, "  x   ");
-      console.log(e.offsetY, e.target.height, "y");
-      var dom = document.getElementsByClassName("img-box");
-      var doms = document.getElementsByClassName("shijiku2");
-      doms.style.top = "300px";
-      doms.style.left = "600px";
-      console.log(dom[0].clientHeight);
+    envirData() {
+      let sqlString =
+        "select * FROM DATA WHERE deviceName IN ('HAU01','HAU02','HAU03','HAU04','PAU01','PAU02')  ORDER BY saveTime DESC LIMIT 12";
+      var this_ = this;
+      curdPost("sql", sqlString).then((response) => {
+        this_.envirListData = response.variables.data;
+      });
+    },
+    returnBlack() {
+      this.$router.back(-1);
+    },
+    fmtDate(obj) {
+      var date = new Date(obj);
+      var y = 1900 + date.getYear();
+      var m = "0" + (date.getMonth() + 1);
+      var d = "0" + date.getDate();
+      var h = date.getHours();
+      var min = date.getMinutes();
+      var s = date.getMinutes();
+      return (
+        y +
+        "-" +
+        m.substring(m.length - 2, m.length) +
+        "-" +
+        d.substring(d.length - 2, d.length) +
+        "  " +
+        h +
+        ":" +
+        min +
+        ":" +
+        s
+      );
+    },
+    scrollAnimate() {
+      // this.animateUp = true;
+      let this_ = this;
+      let sqlString =
+        "select * FROM DATA WHERE deviceName IN ('HAU01','HAU02','HAU03','HAU04','PAU01','PAU02')  ORDER BY saveTime DESC LIMIT 6";
+      let newdata = [];
+      curdPost("sql", sqlString).then((response) => {
+        newdata = response.variables.data;
+        this_.newTiMe = this_.fmtDate(newdata[0].saveTime);
+        for (let i = 0; i < newdata.length; i++) {
+          setTimeout(() => {
+            this_.envirListData.push(newdata[i]);
+            this_.envirListData.shift();
+            this_.animateUp = true;
+          }, 3000 * (i + 1));
+        }
+        // clearTimeout(timer)
+      });
+    },
+    btnextendRight() {
+      this.btnShow = !this.btnShow;
+      this.screenChange();
+      this.mapChange();
+    },
+    btnextendLeft() {
+      this.btnShow = !this.btnShow;
+      this.screenChange();
+      this.mapChange();
+    },
+    // mapEvent(e) {
+    //   console.log(e.offsetX, e.offsetY, "  x   ");
+    //   console.log(e.target.height, e.target.width, "y");
+    // },
+    screenChange() {
+      this.fullHeight = `${document.documentElement.clientHeight}`;
+      // this.fullWidth = `${document.documentElement.clientWidth}`; //默认值
+      const that = this;
+      // that.domsize = [];
+      // that.domsize.push({
+      //   width: that.$refs.wrap.offsetWidth,
+      //   height: that.$refs.wrap.offsetHeight,
+      // });
+      // console.log(that.domsize, "domsizethat");
+      window.onresize = () => {
+        return (() => {
+          window.fullHeight = document.documentElement.clientHeight;
+          that.fullHeight = window.fullHeight;
+          // window.clientWidth = document.documentElement.clientWidth;
+          // that.fullWidth = window.fullWidth;
+        })();
+      };
+    },
+    mapChange() {
+      let this_ = this;
+      setTimeout(() => {
+        var dom = document.getElementsByClassName("img");
+        this_.screen = [];
+        this_.screen.push(dom[0].clientWidth);
+        this_.screen.push(dom[0].clientHeight);
+        this_.newweizhi = [];
+        this_.weizhi.forEach((item, index) => {
+          this_.x = parseInt(
+            (item.x * this_.screen[0]) / this_.domsize[0].width
+          );
+          this_.y = parseInt(
+            (item.y * this_.screen[1]) / this_.domsize[0].height
+          );
+          var newobj = {
+            x: "",
+            y: "",
+            temp: "",
+            humidness: "",
+            airPressure: "",
+            ifshow: "",
+            run: "",
+          };
+          newobj.x = this_.x;
+          newobj.y = this_.y;
+          newobj.temp = "";
+          newobj.humidness = "";
+          newobj.airPressure = "";
+          newobj.ifshow = "";
+          this_.newweizhi.push(newobj);
+        });
+      }, 10);
+    },
+    setIntervalData() {
+      let this_ = this;
+      var timer = setInterval(() => {
+        if (this_.setIntervalDis == true) {
+          clearInterval(timer);
+          return;
+        }
+        this.screenChange();
+        this_.mapChange();
+        this_.timeData();
+      }, 300000);
+    },
+    returnifShow(t, h, p) {
+      let temp = t.toFixed(2);
+      let humidness = h.toFixed(2);
+      let airPressure = p.toFixed(2);
+      let ifshow = "";
+      if (temp > 999 || temp <= 0) {
+        //不给予赋值
+      } else if (temp >= 18 && temp <= 26) {
+        ifshow = "true";
+      } else {
+        ifshow = "false";
+      }
+      if (humidness > 999 || humidness <= 0) {
+      } else if (humidness >= 35 && humidness <= 75) {
+        ifshow = "true";
+      } else {
+        ifshow = "false";
+      }
+      if (airPressure > 999) {
+        //不给予赋值
+      } else if (airPressure >= 5) {
+        ifshow = "true";
+      } else {
+        ifshow = "false";
+      }
+      return ifshow;
+    },
+    // 大屏数据列表赋值
+    timeData() {
+      let this_ = this;
+      let sql =
+        "select * FROM DATA WHERE deviceName = 'HAU01'  ORDER BY saveTime DESC LIMIT 1";
+      curdPost("sql", sql).then((res) => {
+        let data = res.variables.data;
+        this_.newweizhi[0].temp = data[0].t1;
+        this_.newweizhi[0].humidness = data[0].h1;
+        this_.newweizhi[0].airPressure = data[0].p1;
+        this_.newweizhi[0].run = data[0].run;
+        this_.newTiMe = this_.fmtDate(data[0].saveTime);
+        this_.newweizhi[0].ifshow = this_.returnifShow(
+          data[0].t1,
+          data[0].h1,
+          data[0].p1
+        );
+
+        this_.newweizhi[1].temp = data[0].t2;
+        this_.newweizhi[1].humidness = data[0].h2;
+        this_.newweizhi[1].airPressure = data[0].p2;
+        this_.newweizhi[1].run = data[0].run;
+        this_.newweizhi[1].ifshow = this_.returnifShow(
+          data[0].t2,
+          data[0].h2,
+          data[0].p2
+        );
+
+        this_.newweizhi[2].temp = data[0].t3;
+        this_.newweizhi[2].humidness = data[0].h3;
+        this_.newweizhi[2].airPressure = data[0].p3;
+        this_.newweizhi[2].run = data[0].run;
+        this_.newweizhi[2].ifshow = this_.returnifShow(
+          data[0].t3,
+          data[0].h3,
+          data[0].p3
+        );
+        this_.newweizhi[3].temp = data[0].t4;
+        this_.newweizhi[3].humidness = data[0].h4;
+        this_.newweizhi[3].airPressure = data[0].p4;
+        this_.newweizhi[3].run = data[0].run;
+        this_.newweizhi[3].ifshow = this_.returnifShow(
+          data[0].t4,
+          data[0].h4,
+          data[0].p4
+        );
+      });
+      let sql1 =
+        "select * FROM DATA WHERE deviceName ='HAU02'  ORDER BY saveTime ASC LIMIT 1";
+      curdPost("sql", sql1).then((res) => {
+        let data = res.variables.data;
+        this_.newweizhi[4].temp = data[0].t1;
+        this_.newweizhi[4].humidness = data[0].h1;
+        this_.newweizhi[4].airPressure = data[0].p1;
+        this_.newweizhi[4].run = data[0].run;
+        this_.newweizhi[4].ifshow = this_.returnifShow(
+          data[0].t1,
+          data[0].h1,
+          data[0].p1
+        );
+        this_.newweizhi[5].temp = data[0].t2;
+        this_.newweizhi[5].humidness = data[0].h2;
+        this_.newweizhi[5].airPressure = data[0].p2;
+        this_.newweizhi[5].run = data[0].run;
+        this_.newweizhi[5].ifshow = this_.returnifShow(
+          data[0].t2,
+          data[0].h2,
+          data[0].p2
+        );
+      });
+      let sql2 =
+        "select * FROM DATA WHERE deviceName ='HAU03' ORDER BY saveTime ASC LIMIT 1";
+      curdPost("sql", sql2).then((res) => {
+        let data = res.variables.data;
+        this_.newweizhi[6].temp = data[0].t1;
+        this_.newweizhi[6].humidness = data[0].h1;
+        this_.newweizhi[6].airPressure = data[0].p1;
+        this_.newweizhi[6].run = data[0].run;
+        this_.newweizhi[6].ifshow = this_.returnifShow(
+          data[0].t1,
+          data[0].h1,
+          data[0].p1
+        );
+      });
+      let sql3 =
+        "select * FROM DATA WHERE deviceName ='HAU04'  ORDER BY saveTime ASC LIMIT 1";
+      curdPost("sql", sql3).then((res) => {
+        let data = res.variables.data;
+        this_.newweizhi[7].temp = data[0].t1;
+        this_.newweizhi[7].humidness = data[0].h1;
+        this_.newweizhi[7].airPressure = data[0].p1;
+        this_.newweizhi[7].run = data[0].run;
+        this_.newweizhi[7].ifshow = this_.returnifShow(
+          data[0].t1,
+          data[0].h1,
+          data[0].p1
+        );
+      });
+      let sql4 =
+        "select * FROM DATA WHERE deviceName ='PAU01'  ORDER BY saveTime ASC LIMIT 1";
+      curdPost("sql", sql4).then((res) => {
+        let data = res.variables.data;
+        this_.newweizhi[8].temp = data[0].t1;
+        this_.newweizhi[8].humidness = data[0].h1;
+        this_.newweizhi[8].airPressure = data[0].p1;
+        this_.newweizhi[8].run = data[0].run;
+        this_.newweizhi[8].ifshow = this_.returnifShow(
+          data[0].t1,
+          data[0].h1,
+          data[0].p1
+        );
+        this_.newweizhi[9].temp = data[0].t2;
+        this_.newweizhi[9].humidness = data[0].h2;
+        this_.newweizhi[9].airPressure = data[0].p2;
+        this_.newweizhi[9].run = data[0].run;
+        this_.newweizhi[9].ifshow = this_.returnifShow(
+          data[0].t2,
+          data[0].h2,
+          data[0].p2
+        );
+        this_.newweizhi[10].temp = data[0].t3;
+        this_.newweizhi[10].humidness = data[0].h3;
+        this_.newweizhi[10].airPressure = data[0].p3;
+        this_.newweizhi[10].run = data[0].run;
+        this_.newweizhi[10].ifshow = this_.returnifShow(
+          data[0].t3,
+          data[0].h3,
+          data[0].p3
+        );
+        this_.newweizhi[11].temp = data[0].t4;
+        this_.newweizhi[11].humidness = data[0].h4;
+        this_.newweizhi[11].airPressure = data[0].p4;
+        this_.newweizhi[11].run = data[0].run;
+        this_.newweizhi[11].ifshow = this_.returnifShow(
+          data[0].t4,
+          data[0].h4,
+          data[0].p4
+        );
+      });
+      let sql5 =
+        "select * FROM DATA WHERE deviceName ='PAU02'  ORDER BY saveTime ASC LIMIT 1";
+      curdPost("sql", sql5).then((res) => {
+        let data = res.variables.data;
+        this_.newweizhi[12].temp = data[0].t1;
+        this_.newweizhi[12].humidness = data[0].h1;
+        this_.newweizhi[12].airPressure = data[0].p1;
+        this_.newweizhi[12].run = data[0].run;
+        this_.newweizhi[12].ifshow = this_.returnifShow(
+          data[0].t1,
+          data[0].h1,
+          data[0].p1
+        );
+        this_.newweizhi[13].temp = data[0].t2;
+        this_.newweizhi[13].humidness = data[0].h2;
+        this_.newweizhi[13].airPressure = data[0].p2;
+        this_.newweizhi[13].run = data[0].run;
+        this_.newweizhi[13].ifshow = this_.returnifShow(
+          data[0].t2,
+          data[0].h2,
+          data[0].p2
+        );
+      });
     },
   },
   mounted() {
-    var dom = document.getElementsByClassName("img");
-    this.screen = [];
-    this.screen.push(dom[0].clientWidth);
-    this.screen.push(dom[0].clientHeight);
-    this.weizhi.forEach((item, index) => {
-      this.x = parseInt((item.x * this.screen[0]) / this.domsize[index].width);
-      this.y = parseInt((item.y * this.screen[1]) / this.domsize[index].height);
-      var newobj = { x: "", y: "" };
-      newobj.x = this.x;
-      newobj.y = this.y;
-      this.newweizhi.push(newobj);
-    });
-
-    // window.onresize = () => {
-    //   console.log(122222);
-    //   var dom = document.getElementsByClassName("img");
-    //   this.screen = [];
-    //   this.screen.push(dom[0].clientWidth);
-    //   this.screen.push(dom[0].clientHeight);
-    //   //[34,237]
-    // };
+    this.envirData();
+    // this.scrollAnimate()
+    // setInterval(this.scrollAnimate, 10000);
+    this.screenChange();
+    this.mapChange();
+    this.timeData();
+    this.setIntervalData();
+  },
+  destroyed() {
+    this.setIntervalDis = true;
+  },
+  watch: {
+    // 如果 `fullHeight ` 发生改变，这个函数就会运行
+    fullHeight: function (val) {
+      this.screenChange();
+      this.mapChange();
+      this.timeData();
+    },
   },
-  // watch: {
-  //   screen: function (newdata, olddata) {
-  //     if (olddata.length == 0) {
-  //       return;
-  //     }
-  //     console.log(newdata, olddata, this.x, this.y, "2222222222222");
-  //     var newx, newy;
-  //     newx = parseInt((this.x * newdata[0]) / olddata[0]);
-  //     newy = parseInt((this.y * newdata[1]) / olddata[1]);
-  //     this.$refs.shijiku.style.left = newx + "px";
-  //     this.$refs.shijiku.style.top = newy + "px";
-  //     console.log(newx, newy, "xyssss");
-  //   },
-  // },
 };
 </script>
 
- <style lang="scss" scoped>
+ <style lang="less" scoped>
+ul,
+li {
+  margin: 0;
+  padding: 0;
+}
+
 .test-content {
+  width: 100%;
+  height: 100%;
+  color: #fff;
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  overflow: hidden;
+  -webkit-transform-origin: left top;
+  transform-origin: left top;
+  z-index: 999;
+  background: #f5f5f5;
   .title {
     text-align: center;
+    margin: 0 auto;
     height: 40px;
     line-height: 40px;
     font-size: 18px;
     font-weight: bold;
+    .title-center {
+      color: #1d1f22;
+      display: inline-block;
+    }
+    .info-right {
+      position: absolute;
+      top: 0px;
+      right: 0px;
+    }
+    .black {
+      opacity: 0;
+    }
+    .black:hover {
+      opacity: 1;
+      color: black;
+    }
   }
   .body-content {
     display: flex;
-
     border: 1px solid bisque;
+    .marquee-wrap {
+      position: relative;
+      flex-grow: 0;
+      background-color: #f5f5f5;
+      overflow: hidden;
+      .button {
+        position: absolute;
+        top: 50%;
+        right: -8px;
+        color: black;
+        opacity: 0;
+        i {
+          font-size: 30px;
+          width: 30px;
+          height: 30px;
+        }
+        .button:hover {
+          opacity: 1;
+        }
+      }
+    }
+    .marquee-list li {
+      text-overflow: ellipsis;
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+      white-space: nowrap;
+      // padding: 0 20px;
+      list-style: none;
+      line-height: 40px;
+      text-align: center;
+      color: #1d1f22;
+      font-size: 18px;
+      font-weight: 400;
+      text-align: left;
+      padding-left: 10px;
+    }
+    .animate-up {
+      transition: all 0.5s ease-in-out;
+      transform: translateY(-40px);
+    }
 
     .infoShow {
       flex-grow: 0;
@@ -355,7 +678,7 @@ export default {
               height: 20px;
               line-height: 20px;
             }
-            .item_active{
+            .item_active {
               color: rgb(171, 252, 10);
             }
           }
@@ -363,19 +686,10 @@ export default {
             color: #338de6;
           }
         }
-        //   .room {
-        //     margin-right: 10px;
-        //   }
-        //   .active-icon {
-        //     text-align: center;
-        //     color: wheat;
-        //     background: #fd4343;
-        //     border-radius: 50%;
-        //     font-size: 18px;
-        //   }
       }
     }
     .mapShow {
+      margin-right: 10px;
       flex-grow: 1;
       .mapurl {
         // background-image: url("images/shiyanshijiankong/shiyanshi.png");
@@ -388,49 +702,48 @@ export default {
     .img-box {
       width: 100%;
       padding-right: 100px;
-
       position: relative;
       .img {
         background-size: contain;
-        width: 95%;
-        height: calc(100vh - 180px);
+        width: 100%;
+        height: calc(100vh - 80px);
       }
       .shiyanshi_success {
         width: 20px;
         height: 20px;
         position: absolute;
-
         border-radius: 50%;
         z-index: 99;
         animation: traffic-light 2s linear 4s infinite;
         text-align: center;
-        @keyframes traffic-light {
-          from {
-            background: transparent; /* 黄灯 */
+        background: green;
+        // @keyframes traffic-light {
+        //   from {
+        //     background: transparent; /* 黄灯 */
 
-            box-shadow: 0px 0 15px 0 transparent; /* 黄灯光影 */
-          }
-          50% {
-            background: #a7f09e; /* 黄灯 */
+        //     box-shadow: 0px 0 15px 0 transparent; /* 黄灯光影 */
+        //   }
+        //   50% {
+        //     background: #a7f09e; /* 黄灯 */
 
-            box-shadow: 0px 0 15px 0 #82d277; /* 黄灯光影 */
-          }
-          to {
-            background: transparent; /* 黄灯 */
+        //     box-shadow: 0px 0 15px 0 #82d277; /* 黄灯光影 */
+        //   }
+        //   to {
+        //     background: transparent; /* 黄灯 */
 
-            box-shadow: 0px 0 15px 0 transparent; /* 黄灯光影 */
-          }
-        }
+        //     box-shadow: 0px 0 15px 0 transparent; /* 黄灯光影 */
+        //   }
+        // }
       }
       .shiyanshi_false {
         width: 20px;
         height: 20px;
         position: absolute;
-
         border-radius: 50%;
         z-index: 99;
-        animation: waring-false 2s linear 4s infinite;
+        animation: waring-false 1s linear 0s infinite;
         text-align: center;
+        background: #fa0404;
         @keyframes waring-false {
           from {
             background: transparent; /* 黄灯 */
@@ -438,9 +751,9 @@ export default {
             box-shadow: 0px 0 15px 0 transparent; /* 黄灯光影 */
           }
           50% {
-            background: #f56c6c; /* 黄灯 */
+            background: #fa0404; /* 黄灯 */
 
-            box-shadow: 0px 0 15px 0 #f82d2d; /* 黄灯光影 */
+            box-shadow: 0px 0 15px 0 #fa0404; /* 黄灯光影 */
           }
 
           to {
@@ -450,6 +763,81 @@ export default {
           }
         }
       }
+      .bggray {
+        width: 20px;
+        height: 20px;
+        position: absolute;
+        border-radius: 50%;
+        z-index: 99;
+        animation: traffic-light 2s linear 4s infinite;
+        text-align: center;
+        background: #828282 !important;
+      }
+      .contentshow {
+        position: absolute;
+        z-index: 99;
+        width: 90px;
+        left: 30px;
+        top: 0px;
+        color: black;
+      }
+      .envir-conditoin {
+        text-align: left;
+        width: 76px;
+        white-space: nowrap;
+        height: 20px;
+        line-height: 20px;
+        overflow: hidden;
+      }
+      .content {
+        position: absolute;
+        z-index: 99;
+        width: 90px;
+        left: 30px;
+        top: 0px;
+        color: black;
+        opacity: 0;
+      }
+      .content:hover {
+        opacity: 1;
+      }
+    }
+  }
+  .controlStatus {
+    position: fixed;
+    right: 5px;
+    bottom: 10px;
+    z-index: 99;
+    color: black;
+    font-size: 18px;
+    div {
+      display: inline-block;
+      margin-right: 30px;
+    }
+    .gray,
+    .green,
+    .red {
+      width: 20px;
+      height: 20px;
+      position: absolute;
+      border-radius: 50%;
+      text-align: center;
+      padding-right: 5px;
+    }
+    .noControl {
+      .gray {
+        background: #828282;
+      }
+    }
+    .yesControl {
+      .green {
+        background: green;
+      }
+    }
+    .runWild {
+      .red {
+        background: red;
+      }
     }
   }
 }

src/views/huanjingjiankong/shiyanshiyuanshijilu.vue

@@ -0,0 +1,337 @@
+<template>
+  <div>
+    <div class="heads">实验室温湿度压差原始记录</div>
+    <div class="top-box">
+      <span class="t-span">区域名称:</span>
+        <el-select v-model="quyu" placeholder="请选择"  clearable>
+          <el-option
+          v-for="item in options"
+          :key="item.value"
+          :label="item.label" 
+          :value="item.value"        
+          >
+          </el-option>
+       </el-select>  
+      <span class="t-span" style="margin-left:50px;">日期:</span>
+      <el-date-picker type="date" placeholder="选择日期" v-model="riqi">
+      </el-date-picker>
+      <el-button class="btn" type="primary" @click="query">
+        <i class="ibps-icon-search"></i>查询
+      </el-button>
+    </div>
+    <el-table
+      :data="tableData"
+      :stripe="true"
+      style="width: 100%"
+      height="70vh"
+      :header-cell-style="{
+        color: '#000',
+        'font-size': '14px',
+        padding: '6px 6px',
+        background: '#a7d6f8 !important',
+      }"
+    >
+      <el-table-column
+        prop="deviceName"
+        label="区域"
+        width="80"
+      ></el-table-column>
+      <el-table-column prop="saveTime" label="日期" width="150">
+        <template slot-scope="scope">
+          {{ scope.row.saveTime | fmtDate }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="t1" label="t1" width="65">
+        <template slot-scope="scope">
+          {{ scope.row.t1 | numToFixed }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="t2" label="t2" width="65">
+        <template slot-scope="scope">
+          {{ scope.row.t2 | numToFixed }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="t3" label="t3" width="65">
+        <template slot-scope="scope">
+          {{ scope.row.t3 | numToFixed }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="t4" label="t4" width="65">
+        <template slot-scope="scope">
+          {{ scope.row.t4 | numToFixed }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="t5" label="t5" width="65">
+        <template slot-scope="scope">
+          {{ scope.row.t5 | numToFixed }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="h1" label="h1" width="65">
+        <template slot-scope="scope">
+          {{ scope.row.h1 | numToFixed }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="h2" label="h2" width="65">
+        <template slot-scope="scope">
+          {{ scope.row.h2 | numToFixed }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="h3" label="h3" width="65">
+        <template slot-scope="scope">
+          {{ scope.row.h3 | numToFixed }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="h4" label="h4" width="65">
+        <template slot-scope="scope">
+          {{ scope.row.h4 | numToFixed }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="h5" label="h5" width="65">
+        <template slot-scope="scope">
+          {{ scope.row.h5 | numToFixed }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="p1" label="p1" width="65">
+        <template slot-scope="scope">
+          {{ scope.row.p1 | numToFixedP }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="p2" label="p2" width="65">
+        <template slot-scope="scope">
+          {{ scope.row.p2 | numToFixedP }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="p3" label="p3" width="65">
+        <template slot-scope="scope">
+          {{ scope.row.p3 | numToFixedP }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="p4" label="p4" width="65">
+        <template slot-scope="scope">
+          {{ scope.row.p4 | numToFixedP }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="p5" label="p5" width="65">
+        <template slot-scope="scope">
+          {{ scope.row.p5 | numToFixedP }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="p6" label="p6" width="65">
+        <template slot-scope="scope">
+          {{ scope.row.p6 | numToFixedP }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="p7" label="p7" width="65">
+        <template slot-scope="scope">
+          {{ scope.row.p7 | numToFixedP }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="p8" label="p8" width="65">
+        <template slot-scope="scope">
+          {{ scope.row.p8 | numToFixedP }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="p9" label="p9" width="65">
+        <template slot-scope="scope">
+          {{ scope.row.p9 | numToFixedP }}
+        </template>
+      </el-table-column>
+    </el-table>
+      <div class="block">
+    <el-pagination
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+      :current-page="currentPage4"
+      :page-sizes="[10, 15, 25, 50]"
+      :page-size="20"
+      layout="total, sizes, prev, pager, next, jumper"
+      :total="numtotal">
+    </el-pagination>
+  </div>
+    <div>
+      注： 一、各点压差、温湿度合格标准及对应房间序号名称见监控面板；
+      二、温湿度：AHU01的1、2、3、4对应细胞培养室1、2、3、4；
+      AHU02的1、2对应分拣室1、2；
+      AHU03、04的1分别对应支原体、无菌检查室；PAU02的1、2对应无菌阳性、支原体阳性室
+      异常情况登记及处理：
+    </div>
+  </div>
+</template>
+
+<script>
+import curdPost from "@/business/platform/form/utils/custom/joinCURD.js";
+import data from '@/components/ibps-icon-select/data';
+export default {
+  data() {
+    return {
+      tableData: [],
+      quyu: "",
+      riqi: "",
+      currentPage4:'',
+      currentPage:'1',
+      limit:'15',
+      numtotal:'',
+      currentSql :'',
+      countSql:'',
+      options: [{
+          value: 'HAU01',
+          label: 'HAU01'
+        }, {
+          value: 'HAU02',
+          label: 'HAU02'
+        }, {
+          value: 'HAU03',
+          label: 'HAU03'
+        }, {
+          value: 'HAU04',
+          label: 'HAU04'
+        }, {
+          value: 'PAU01',
+          label: 'PAU01'
+       }, {
+          value: 'PAU02',
+          label: 'PAU02'
+       }],
+    };
+  },
+  created() {
+    let this_= this;
+    let sql =
+      "select * FROM DATA WHERE deviceName IN ('HAU01','HAU02','HAU03','HAU04','PAU01','PAU02')  ORDER BY saveTime DESC LIMIT "+this.limit;
+    this.currentSql = sql;
+    this.loadData(sql);
+    let sql1 = "select COUNT(*) as COUNT FROM DATA "
+    curdPost("sql", sql1).then((res) => {
+      let data = res.variables.data;
+      this_.numtotal= data[0].COUNT;
+    });
+  },
+  filters: {
+    numToFixed: function (value) {
+      if (value > 9999) {
+        return "??";
+      }
+      return value.toFixed(1);
+    },
+    numToFixedP: function (value) {
+      if (value > 9999) {
+        return "??";
+      }
+      return value.toFixed(2);
+    },
+    fmtDate: function (obj) {
+      var date = new Date(obj);
+      var y = 1900 + date.getYear();
+      var m = "0" + (date.getMonth() + 1);
+      var d = "0" + date.getDate();
+      var h = date.getHours();
+      var min = date.getMinutes();
+      var s = date.getMinutes();
+      return (
+        y +
+        "-" +
+        m.substring(m.length - 2, m.length) +
+        "-" +
+        d.substring(d.length - 2, d.length) +
+        "  " +
+        h +
+        ":" +
+        min +
+        ":" +
+        s
+      );
+    },
+  },
+  methods: {
+    // 请求表格数据函数
+    loadData(sql) {
+      let this_ = this;
+      this.listData = [];
+      curdPost("sql", sql).then((res) => {
+        this_.tableData = res.variables.data;
+      });
+    },
+    countLength(sql){
+      let this_=this;
+      curdPost("sql", sql).then((res) => {
+      let data = res.variables.data;
+      this_.numtotal= data[0].COUNT;
+    });
+    },
+    filter() {
+      let quyu =this.quyu;
+      if(this.riqi){
+        var riqi =  this.riqi.getFullYear() + "-" + (this.riqi.getMonth() + 1) + "-" + this.riqi.getDate();
+      }
+      let sql = "";
+      if (quyu && riqi) {
+         sql = "select * FROM DATA WHERE deviceName = '" + quyu +"' and saveTime like '%" +riqi +"%'  ORDER BY saveTime DESC LIMIT "+this.limit;
+         this.countSql ="select COUNT(*) as COUNT FROM DATA WHERE deviceName = '" + quyu +"' and saveTime like '%" +riqi +"%'  ORDER BY saveTime DESC LIMIT "+this.limit;
+         this.countLength(this.countSql);
+      } else if (quyu && !riqi) {
+        sql ="select * FROM DATA WHERE deviceName = '" +quyu +"' ORDER BY saveTime DESC LIMIT "+this.limit;
+        this.countSql ="select COUNT(*) as COUNT FROM DATA WHERE deviceName = '" + quyu +"' ORDER BY saveTime DESC LIMIT "+this.limit;
+        this.countLength(this.countSql);
+      } else if (!quyu && riqi) {
+       sql = "select * FROM DATA WHERE  saveTime like '%" +riqi +"%'  ORDER BY saveTime DESC LIMIT "+this.limit;
+       this.countSql ="select COUNT(*) as COUNT FROM DATA WHERE  saveTime like '%" +riqi +"%'  ORDER BY saveTime DESC LIMIT "+this.limit;
+       this.countLength(this.countSql);
+      }else if (!quyu && !riqi) {
+       sql =  "select * FROM DATA WHERE deviceName IN ('HAU01','HAU02','HAU03','HAU04','PAU01','PAU02')  ORDER BY saveTime DESC LIMIT "+this.limit;
+       this.countSql = "select COUNT(*) as COUNT FROM DATA ";
+       this.countLength(this.countSql);
+      }
+      return sql;
+    },
+    query() {
+     let sql =  this.filter();
+     this.currentSql = sql;
+     this.loadData(sql);
+    },
+    handleSizeChange(val){
+      this.limit = val;
+      let splitone = this.currentSql.split("LIMIT");
+      let sql = splitone[0] +"LIMIT " + this.currentPage +","+val;
+      this.currentSql = splitone[0] +"LIMIT "+val;
+      this.loadData(sql);
+    },
+    handleCurrentChange(val){
+      this.currentPage = val;
+      let splitone = this.currentSql.split("LIMIT");
+      let sql = splitone[0] +"LIMIT " + val +","+splitone[1]
+      this.loadData(sql);
+    }
+  },
+};
+</script>
+<style lang="scss">
+.tableRowClassName {
+  backface-visibility: #d9eefd;
+}
+.heads {
+  margin-top: 5px;
+  width: 100%;
+  text-align: center;
+  font-weight: 700;
+  background-color: #f9ffff;
+  width: 100%;
+  font-size: 18px;
+}
+.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
+  background: #d9eefd;
+}
+.more,
+.item {
+  cursor: pointer;
+}
+.more {
+  color: #409eff;
+}
+.el-dropdown-link {
+  cursor: pointer;
+  color: #409eff;
+}
+.el-icon-arrow-down {
+  font-size: 12px;
+}
+</style>

src/views/platform/bpmn/bpmInstHis/listType/CMAjiancedangan.vue

@@ -37,6 +37,7 @@
     </div>
     <el-table
       :data="tableData"
+      border
       :stripe="true"
       style="width: 100%"
       height="75vh"
@@ -49,9 +50,9 @@
       }"
     >
       <!-- <el-table-column type="selection" width="55"> </el-table-column> -->
-      <el-table-column prop="chu_ju_bao_gao_sh" label="年份" width="80" >
+      <el-table-column prop="chu_ju_bao_gao_sh" label="年份" width="80">
         <template slot-scope="scope">
-              {{ scope.row.chu_ju_bao_gao_sh | yeare("年") }}
+          {{ scope.row.chu_ju_bao_gao_sh | yeare("年") }}
         </template>
       </el-table-column>
       <el-table-column prop="he_tong_bian_hao_" label="合同编号" width="100">
@@ -66,7 +67,7 @@
       <el-table-column
         prop="jian_ce_shen_qing"
         label="检测委托单号"
-        width="150"
+        width="180"
       >
       </el-table-column>
       <!-- <el-table-column prop="wei_tuo_dan_wei_" label="委托单位">
@@ -75,7 +76,7 @@
       </el-table-column>
       <el-table-column prop="yang_pin_bian_hao" label="样品编号" width="150">
       </el-table-column>
-      <el-table-column prop="yang_pin_ming_che" label="样品名称" width="150">
+      <el-table-column prop="yang_pin_ming_che" label="样品名称" width="">
       </el-table-column>
       <!-- <el-table-column prop="lian_xi_ren_" label="联系人"> </el-table-column>
       <el-table-column prop="lian_xi_dian_hua_" label="联系电话"></el-table-column> -->
@@ -85,7 +86,7 @@
         </template>
       </el-table-column> -->
       <!-- <el-table-column width="180"> </el-table-column> -->
-      <el-table-column label="操作" align="left" >
+      <el-table-column label="操作" align="left" width="100">
         <template slot-scope="scope">
           <el-popover placement="left" width="200" trigger="click">
             <div slot="reference" class="more">
@@ -153,9 +154,9 @@
                     style="color: #85ce61; cursor: pointer"
                     v-for="it in yubaogaoitem"
                     :key="it.id_"
-                    @click="yuReports(reports.yubaogao,it.id)"
+                    @click="yuReports(reports.yubaogao, it.id)"
                   >
-                  {{ it.jian_ce_xiang_mu_ }}预报告记录
+                    {{ it.jian_ce_xiang_mu_ }}预报告记录
                   </div>
                 </div>
               </el-popover>
@@ -232,14 +233,14 @@ export default {
         jiancebaogao: "42明鉴/吴/明鉴细胞专业技术检测报告.rpx",
       },
       shenqingdanid: "",
-      nianfen:'',
+      nianfen: "",
       danwei: "",
       bianhao: "",
       tableData: [],
       itemInfo: [], // 列表内容
-      yubaogaoitem:[],
+      yubaogaoitem: [],
       hetong: [],
-      triggerType:'click'
+      triggerType: "click",
     };
   },
   filters: {
@@ -250,25 +251,29 @@ export default {
         }
       }
     },
-    yeare(value,dedal){
-      if(dedal=="年"){
-        return value.split("-")[0]
-      }else if(dedal=="月"){
-        return value.split("-")[0] + value.split("-")[1]
-      }else{
-        value
+    yeare(value, dedal) {
+      if (value == undefined || value == null || value == "") {
+        return ""
       }
-    }
+      if (dedal == "年") {
+        return value.split("-")[0];
+      } else if (dedal == "月") {
+        return value.split("-")[0] + value.split("-")[1];
+      } else {
+        value;
+      }
+    },
   },
   created() {
     let sql =
-      "select * from t_mjjcbg WHERE shi_fou_yu_bao_ga='否' and lei_bie_qu_fen_yu ='cnas/CMA' ORDER BY create_time_ DESC limit 0,20";
+      "select * from t_mjjcbg WHERE shi_fou_yu_bao_ga='否' and lei_bie_qu_fen_yu ='cnas/CMA' and zhuang_tai_ = '报告待发放' or  zhuang_tai_ = '已完成'  ORDER BY create_time_ DESC limit 0,20";
+      console.log(sql)
     this.loadData(sql);
     // curdPost("sql", sql).then((response) => {
     //   this.tableData = response.variables.data;
     // });
     let sumsql =
-      "select COUNT(*) AS sum  FROM t_mjjcbg WHERE shi_fou_yu_bao_ga='否' and lei_bie_qu_fen_yu ='cnas/CMA'";
+      "select COUNT(*) AS sum  FROM t_mjjcbg WHERE shi_fou_yu_bao_ga='否' and lei_bie_qu_fen_yu ='cnas/CMA' and zhuang_tai_ ='报告待发放' or  zhuang_tai_ = '已完成'";
     curdPost("sql", sumsql).then((response) => {
       this.total = response.variables.data[0].sum;
     });
@@ -337,7 +342,7 @@ export default {
         curdPost("sql", itemSql).then((res) => {
           this_.itemInfo = res.variables.data;
           for (var i = 0; i++; i < this_itemInfo) {
-            if (this_itemInfo[i].shi_fou_yu_bao_ga =="是") {
+            if (this_itemInfo[i].shi_fou_yu_bao_ga == "是") {
               this_.yubaogaoitem.push(it);
             }
           }
@@ -349,11 +354,8 @@ export default {
         });
       });
     },
-    yuReports(url,id){
-      this.alertReport(
-         url,
-         id
-    );
+    yuReports(url, id) {
+      this.alertReport(url, id);
     },
     formEvent(itemName) {
       if (itemName.includes("pH检测")) {
@@ -469,7 +471,7 @@ export default {
     selectSplit() {
       var q1, q2, q3;
       if (this.nianfen) {
-        q1 = "chu_ju_bao_gao_sh like'" +"%" + this.nianfen +"%"  + "' ";
+        q1 = "chu_ju_bao_gao_sh like'" + "%" + this.nianfen + "%" + "' ";
       }
       if (this.danwei) {
         q2 = "wei_tuo_dan_wei_  = '" + this.danwei + "' ";
@@ -500,19 +502,21 @@ export default {
       var sql =
         "select * from t_mjjcbg " +
         moreSql +
-        " shi_fou_yu_bao_ga='否' and lei_bie_qu_fen_yu = 'cnas/CMA' ORDER BY create_time_ DESC limit 0,20";
-      console.log(sql, "moresql");
+        " shi_fou_yu_bao_ga='否' and lei_bie_qu_fen_yu = 'cnas/CMA' and zhuang_tai_ = '报告待发放' or  zhuang_tai_ = '已完成' ORDER BY create_time_ DESC limit 0,20";
       this.loadData(sql);
     },
     handleSizeChange(value) {
       this.currentPage4 = 1;
       let sql =
-        "select * from t_mjjcbg WHERE shi_fou_yu_bao_ga='否' and lei_bie_qu_fen_yu ='cnas/CMA' ORDER BY create_time_ DESC limit 0," +value;
+        "select * from t_mjjcbg WHERE shi_fou_yu_bao_ga='否' and lei_bie_qu_fen_yu ='cnas/CMA' and zhuang_tai_ = '报告待发放' or  zhuang_tai_ = '已完成' ORDER BY create_time_ DESC limit 0," +
+        value;
       this.loadData(sql);
     },
     handleCurrentChange(value) {
       let sql =
-        "select * from t_mjjcbg WHERE shi_fou_yu_bao_ga='否' and lei_bie_qu_fen_yu ='cnas/CMA' ORDER BY create_time_ DESC limit " +value +", 20";
+        "select * from t_mjjcbg WHERE shi_fou_yu_bao_ga='否' and lei_bie_qu_fen_yu ='cnas/CMA'  and zhuang_tai_ = '报告待发放' or  zhuang_tai_ = '已完成' ORDER BY create_time_ DESC limit " +
+        value +
+        ", 20";
       this.loadData(sql);
     },
   },

src/views/platform/bpmn/bpmInstHis/listType/CNASjiancedangan.vue

@@ -37,6 +37,7 @@
     </div>
     <el-table
       :data="tableData"
+      border
       :stripe="true"
       style="width: 100%"
       height="75vh"
@@ -66,7 +67,7 @@
       <el-table-column
         prop="jian_ce_shen_qing"
         label="检测委托单号"
-        width="150"
+        width="180"
       >
       </el-table-column>
       <!-- <el-table-column prop="wei_tuo_dan_wei_" label="委托单位">
@@ -75,7 +76,7 @@
       </el-table-column>
       <el-table-column prop="yang_pin_bian_hao" label="样品编号" width="150">
       </el-table-column>
-      <el-table-column prop="yang_pin_ming_che" label="样品名称" width="150">
+      <el-table-column prop="yang_pin_ming_che" label="样品名称" width="">
       </el-table-column>
 
       <!-- <el-table-column prop="lian_xi_ren_" label="联系人">
@@ -87,9 +88,9 @@
            {{scope.row.lei_bie_qu_fen_yu.toUpperCase()}}
          </template>
       </el-table-column> -->
-      <el-table-column label="操作" align="left">
+      <el-table-column label="操作" align="left" width="100"  >
         <template slot-scope="scope">
-          <el-popover placement="left" width="200" trigger="click">
+          <el-popover placement="left" width="150" trigger="click">
             <div slot="reference" class="more">
               <i class="el-icon-caret-bottom"></i>查阅
             </div>
@@ -253,6 +254,9 @@ export default {
       }
     },
     yeare(value,dedal){
+      if(value ==undefined || value ==null || undefined ==""){
+        return ""
+      }
       if(dedal=="年"){
         return value.split("-")[0]
       }else if(dedal=="月"){
@@ -264,13 +268,13 @@ export default {
   },
   created() {
     let sql =
-      "select * from t_mjjcbg WHERE shi_fou_yu_bao_ga='否' and lei_bie_qu_fen_yu ='cnas' ORDER BY create_time_ DESC limit 0,20";
+      "select * from t_mjjcbg WHERE shi_fou_yu_bao_ga='否' and lei_bie_qu_fen_yu ='cnas' and zhuang_tai_ ='报告待发放' or  zhuang_tai_ = '已完成' ORDER BY create_time_ DESC limit 0,20";
     this.loadData(sql);
     // curdPost("sql", sql).then((response) => {
     //   this.tableData = response.variables.data;
     // });
     let sumsql =
-      "select COUNT(*) AS sum  FROM t_mjjcbg WHERE shi_fou_yu_bao_ga='否' and lei_bie_qu_fen_yu ='cnas'";
+      "select COUNT(*) AS sum  FROM t_mjjcbg WHERE shi_fou_yu_bao_ga='否' and lei_bie_qu_fen_yu ='cnas' and zhuang_tai_ ='报告待发放' or  zhuang_tai_ = '已完成'";
     curdPost("sql", sumsql).then((response) => {
       this.total = response.variables.data[0].sum;
     });
@@ -282,7 +286,6 @@ export default {
       this.listData = [];
       curdPost("sql", sql).then((res) => {
         this_.tableData = res.variables.data;
-        console.log(this_.tableData, "12121");
         if (this_.tableData.length > 0) {
           this.hetongidFn(this_.tableData);
         } else {
@@ -469,7 +472,7 @@ export default {
       }
     },
     isYubaogao(value, row) {
-      console.log(value, row.jian_ce_xiang_mu_, "1222222222");
+      
     },
     // pin凑sql
     selectSplit() {
@@ -506,20 +509,18 @@ export default {
       var sql =
         "select * from t_mjjcbg " +
         moreSql +
-        " shi_fou_yu_bao_ga='否' and lei_bie_qu_fen_yu = 'cnas' ORDER BY create_time_ DESC limit 0,20";
-      console.log(sql, "moresql");
+        " shi_fou_yu_bao_ga='否' and lei_bie_qu_fen_yu = 'cnas' and zhuang_tai_ ='报告待发放' or  zhuang_tai_ = '已完成' ORDER BY create_time_ DESC limit 0,20";
       this.loadData(sql);
     },
     handleSizeChange(value) {
       this.currentPage4 = 1;
       let sql =
-        "select * from t_mjjcbg WHERE shi_fou_yu_bao_ga='否' and lei_bie_qu_fen_yu ='cnas' ORDER BY create_time_ DESC limit 0,"+value;
+        "select * from t_mjjcbg WHERE shi_fou_yu_bao_ga='否' and lei_bie_qu_fen_yu ='cnas' and zhuang_tai_ ='报告待发放' or  zhuang_tai_ = '已完成' ORDER BY create_time_ DESC limit 0,"+value;
       this.loadData(sql);
     },
     handleCurrentChange(value) {
-      console.log(value)
       let sql =
-        "select * from t_mjjcbg WHERE shi_fou_yu_bao_ga='否' and lei_bie_qu_fen_yu ='cnas' ORDER BY create_time_ DESC limit " +
+        "select * from t_mjjcbg WHERE shi_fou_yu_bao_ga='否' and lei_bie_qu_fen_yu ='cnas' and zhuang_tai_ ='报告待发放' or  zhuang_tai_ = '已完成' ORDER BY create_time_ DESC limit " +
         value +", 20";
       this.loadData(sql);
     },

src/views/platform/bpmn/bpmInstHis/listType/feijiancedangan.vue

@@ -30,7 +30,8 @@
         class="inp"
         v-model="bianhao"
         placeholder="请输入内容"
-        clearable>
+        clearable
+      >
       </el-input>
       <el-button class="btn" type="primary" @click="search">
         <i class="ibps-icon-search"></i>查询
@@ -38,6 +39,7 @@
     </div>
     <el-table
       :data="tableData"
+      border
       :stripe="true"
       style="width: 100%"
       height="75vh"
@@ -52,66 +54,92 @@
       <!-- <el-table-column type="selection" width="55"> </el-table-column> -->
       <el-table-column prop="chu_ju_bao_gao_sh" label="年份" width="80">
         <template slot-scope="scope">
-              {{ scope.row.chu_ju_bao_gao_sh | yeare("年") }}
+          {{ scope.row.chu_ju_bao_gao_sh | yeare("年") }}
         </template>
       </el-table-column>
       <el-table-column prop="he_tong_bian_hao_" label="合同编号" width="100">
         <template slot-scope="scope">
-          {{scope.row.he_tong_bian_hao_|returnHetong(hetong)}}
+          {{ scope.row.he_tong_bian_hao_ | returnHetong(hetong) }}
         </template>
       </el-table-column>
-      <el-table-column prop="bao_gao_bian_hao_" label="报告编号" width="150"> 
+      <el-table-column prop="bao_gao_bian_hao_" label="报告编号" width="150">
       </el-table-column>
-      <el-table-column prop="jian_ce_kai_shi_s" label="检测时间" width="150">
+      <el-table-column prop="jian_ce_kai_shi_s" label="检测时间" width="120">
       </el-table-column>
-      <el-table-column prop="jian_ce_shen_qing" label="检测委托单号" width="150">
+      <el-table-column
+        prop="jian_ce_shen_qing"
+        label="检测委托单号"
+        width="180"
+      >
       </el-table-column>
       <!-- <el-table-column prop="wei_tuo_dan_wei_" label="委托单位">
       </el-table-column> -->
-      <el-table-column prop="wei_tuo_ri_qi_" label="委托日期" width="100">
+      <el-table-column prop="wei_tuo_ri_qi_" label="委托日期" width="120">
       </el-table-column>
       <el-table-column prop="yang_pin_bian_hao" label="样品编号" width="150">
       </el-table-column>
-      <el-table-column prop="yang_pin_ming_che" label="样品名称" width="150">
+      <el-table-column prop="yang_pin_ming_che" label="样品名称" width="">
       </el-table-column>
       <!-- <el-table-column prop="lian_xi_ren_" label="联系人">
       </el-table-column>
       <el-table-column prop="lian_xi_dian_hua_" label="联系电话">
       </el-table-column> -->
-       <!-- <el-table-column prop="lei_bie_qu_fen_yu" label="类别">
+      <!-- <el-table-column prop="lei_bie_qu_fen_yu" label="类别">
          <template slot-scope="scope">
            {{scope.row.lei_bie_qu_fen_yu}}CNAS/CMA
          </template>
       </el-table-column> -->
-      <el-table-column label="操作">
+      <el-table-column label="操作" align="left" width="100">
         <template slot-scope="scope">
           <el-popover placement="left" width="200" trigger="click">
             <div slot="reference" class="more">
-              <i class="el-icon-caret-bottom"></i>查阅          
+              <i class="el-icon-caret-bottom"></i>查阅
             </div>
             <!-- <div class="item" style="color: #85ce61">
               <i class="el-icon-s-order"></i> 合同
             </div> -->
 
-            <div class="item" style="color: #85ce61" @click="alertReport(reports.jianceshenqingdan, scope.row.id_)">
+            <div
+              class="item"
+              style="color: #85ce61"
+              @click="alertReport(reports.jianceshenqingdan, scope.row.id_)"
+            >
               <i class="el-icon-s-order"></i> 检测委托单
             </div>
-            <div class="item" style="color: #85ce61" @click="alertReport(reports.hetongpingshen, scope.row.id_)">
+            <div
+              class="item"
+              style="color: #85ce61"
+              @click="alertReport(reports.hetongpingshen, scope.row.id_)"
+            >
               <i class="el-icon-s-order"></i> 合同评审
             </div>
             <div>
               <el-popover placement="left" width="200" trigger="click">
-                <div class="div_test item" style="color: #85ce61" slot="reference" @click="juTiItem(scope.row)">
-                  <i class="el-icon-s-order"></i> 检测记录               
+                <div
+                  class="div_test item"
+                  style="color: #85ce61"
+                  slot="reference"
+                  @click="juTiItem(scope.row)"
+                >
+                  <i class="el-icon-s-order"></i> 检测记录
                 </div>
                 <div class="three-item">
-                  <div style="color: #85ce61; cursor: pointer" v-for="it in itemInfo" :key="it.id_" @click="formEvent(it.jian_ce_xiang_mu_)">
+                  <div
+                    style="color: #85ce61; cursor: pointer"
+                    v-for="it in itemInfo"
+                    :key="it.id_"
+                    @click="formEvent(it.jian_ce_xiang_mu_)"
+                  >
                     {{ it.jian_ce_xiang_mu_ }}记录
                   </div>
                 </div>
               </el-popover>
             </div>
-            <div class="item" style="color: #85ce61" @click="alertReport(reports.baogaoshenpibiao, scope.row.id_)">
+            <div
+              class="item"
+              style="color: #85ce61"
+              @click="alertReport(reports.baogaoshenpibiao, scope.row.id_)"
+            >
               <i class="el-icon-s-order"></i> 检测报告审批表
             </div>
             <div v-if="false">
@@ -129,9 +157,9 @@
                     style="color: #85ce61; cursor: pointer"
                     v-for="it in yubaogaoitem"
                     :key="it.id_"
-                    @click="yuReports(reports.yubaogao,it.id)"
+                    @click="yuReports(reports.yubaogao, it.id)"
                   >
-                  {{ it.jian_ce_xiang_mu_ }}预报告记录
+                    {{ it.jian_ce_xiang_mu_ }}预报告记录
                   </div>
                 </div>
               </el-popover>
@@ -139,7 +167,11 @@
             <!-- <div class="item" style="color: #85ce61" @click="alertReport(reports.yubaogao, scope.row.id_)">
               <i class="el-icon-s-order"></i> 预报告
             </div> -->
-            <div class="item" style="color: #85ce61" @click="alertReport(reports.jiancebaogao, scope.row.id_)">
+            <div
+              class="item"
+              style="color: #85ce61"
+              @click="alertReport(reports.jiancebaogao, scope.row.id_)"
+            >
               <i class="el-icon-s-order"></i>检测报告
             </div>
           </el-popover>
@@ -183,7 +215,6 @@
 import curdPost from "@/business/platform/form/utils/custom/joinCURD.js";
 import GetReport from "../corresponding/getReport.js";
 export default {
-
   data() {
     return {
       runqianId: "",
@@ -199,44 +230,49 @@ export default {
         yubaogao: "42明鉴/吴/明鉴细胞专业技术检测预报告.rpx",
         jiancebaogao: "42明鉴/吴/明鉴细胞专业技术检测报告.rpx",
       },
-      shenqingdanid:"",
-      nianfen:'',
-      danwei:"",
-      bianhao:"",
+      shenqingdanid: "",
+      nianfen: "",
+      danwei: "",
+      bianhao: "",
       tableData: [],
       itemInfo: [], // 列表内容
-      yubaogaoitem:[],
-      hetong:[],
-      triggerType:"click"
+      yubaogaoitem: [],
+      hetong: [],
+      triggerType: "click",
     };
   },
   mixins: [GetReport],
-  filters:{
-    returnHetong(value,arr){
-      for(var i =0;i<arr.length;i++){
-        if(arr[i].id_ == value){
+  filters: {
+    returnHetong(value, arr) {
+      for (var i = 0; i < arr.length; i++) {
+        if (arr[i].id_ == value) {
           return arr[i].he_tong_bian_hao_;
         }
       }
     },
-    yeare(value,dedal){
-      if(dedal=="年"){
-        return value.split("-")[0]
-      }else if(dedal=="月"){
-        return value.split("-")[0] + value.split("-")[1]
-      }else{
-        value
+    yeare(value, dedal) {
+      if (value == undefined || value == null || value == "") {
+        return "";
+      }
+      if (dedal == "年") {
+        return value.split("-")[0];
+      } else if (dedal == "月") {
+        return value.split("-")[0] + value.split("-")[1];
+      } else {
+        value;
       }
-    }
+    },
   },
   created() {
     let this_ = this;
-    let sql = "select * from t_mjjcbg WHERE shi_fou_yu_bao_ga='否' and lei_bie_qu_fen_yu ='非' ORDER BY create_time_ DESC limit 0,20";
+    let sql =
+      "select * from t_mjjcbg WHERE shi_fou_yu_bao_ga='否' and lei_bie_qu_fen_yu ='非' and zhuang_tai_ ='报告待发放' or  zhuang_tai_ = '已完成' ORDER BY create_time_ DESC limit 0,20";
     // curdPost("sql", sql).then((response) => {
     //   this_.tableData = response.variables.data;
     // });
-    this.loadData(sql)
-    let sumsql = "select COUNT(*) AS sum  FROM t_mjjcbg WHERE shi_fou_yu_bao_ga='否' and lei_bie_qu_fen_yu ='非'";
+    this.loadData(sql);
+    let sumsql =
+      "select COUNT(*) AS sum  FROM t_mjjcbg WHERE shi_fou_yu_bao_ga='否' and lei_bie_qu_fen_yu ='非' and zhuang_tai_ ='报告待发放' or  zhuang_tai_ = '已完成'";
     curdPost("sql", sumsql).then((response) => {
       this.total = response.variables.data[0].sum;
     });
@@ -248,25 +284,26 @@ export default {
       this.listData = [];
       curdPost("sql", sql).then((res) => {
         this_.tableData = res.variables.data;
-        if(this_.tableData.length >0){
+        if (this_.tableData.length > 0) {
           this.hetongidFn(this_.tableData);
-        }else{
+        } else {
           this_.tableData = [];
         }
       });
     },
-    hetongidFn(bianhaoArr){
-      var sqlStr ="";
-      var this_ =this;
-      bianhaoArr.forEach(item=> {
-        sqlStr += "'"+item.he_tong_bian_hao_ + "',"
+    hetongidFn(bianhaoArr) {
+      var sqlStr = "";
+      var this_ = this;
+      bianhaoArr.forEach((item) => {
+        sqlStr += "'" + item.he_tong_bian_hao_ + "',";
       });
-      sqlStr=sqlStr.substring(0,sqlStr.length-1);
+      sqlStr = sqlStr.substring(0, sqlStr.length - 1);
       sqlStr = "(" + sqlStr + ")";
-      let sql = "select he_tong_bian_hao_,id_ from t_bjd WHERE id_ in "+sqlStr;
-      curdPost("sql",sql).then(res=>{
+      let sql =
+        "select he_tong_bian_hao_,id_ from t_bjd WHERE id_ in " + sqlStr;
+      curdPost("sql", sql).then((res) => {
         this_.hetong = res.variables.data;
-      })
+      });
     },
     juTiItem(info) {
       let itemId;
@@ -275,7 +312,6 @@ export default {
         "select b.id_ ,c.jian_ce_xiang_mu2 FROM t_mjjcbg a JOIN t_jchzb b ON a.jian_ce_shen_qing = b.shen_qing_dan_id_ JOIN t_mjypb c ON a.jian_ce_shen_qing = c.wai_jian_ WHERE a.id_ = '" +
         info.id_ +
         "'";
-        console.log(sql,"sql11111111")
       curdPost("sql", sql).then((res) => {
         itemId = res.variables.data;
         this_.runqianId = itemId[0].id_;
@@ -283,7 +319,6 @@ export default {
           "select id_,jian_ce_xiang_mu_ FROM t_mjjcnlfw WHERE id_ IN(" +
           itemId[0].jian_ce_xiang_mu2 +
           ")";
-          console.log(itemSql,"111111111111")
         curdPost("sql", itemSql).then((res) => {
           this_.itemInfo = res.variables.data;
         });
@@ -416,7 +451,7 @@ export default {
         curdPost("sql", itemSql).then((res) => {
           this_.itemInfo = res.variables.data;
           for (var i = 0; i++; i < this_itemInfo) {
-            if (this_itemInfo[i].shi_fou_yu_bao_ga =="是") {
+            if (this_itemInfo[i].shi_fou_yu_bao_ga == "是") {
               this_.yubaogaoitem.push(it);
             }
           }
@@ -428,63 +463,62 @@ export default {
         });
       });
     },
-    yuReports(url,id){
-      this.alertReport(
-         url,
-         id
-    );
+    yuReports(url, id) {
+      this.alertReport(url, id);
     },
     // pin凑sql
     selectSplit() {
-      var q1,q2,q3;
+      var q1, q2, q3;
       if (this.nianfen) {
-        q1 = "chu_ju_bao_gao_sh like'" +"%" +this.nianfen +"%"+"' ";
+        q1 = "chu_ju_bao_gao_sh like'" + "%" + this.nianfen + "%" + "' ";
       }
-      if (this.danwei){
-        q2 = "wei_tuo_dan_wei_  = '"+this.danwei+"' ";
+      if (this.danwei) {
+        q2 = "wei_tuo_dan_wei_  = '" + this.danwei + "' ";
       }
-      if(this.bianhao){
-        q3 = "bao_gao_bian_hao_ = '"+this.bianhao+"'";
+      if (this.bianhao) {
+        q3 = "bao_gao_bian_hao_ = '" + this.bianhao + "'";
       }
-      if(this.nianfen&&this.danwei&&this.bianhao){
-        return "where " + '"+q1+"' +" and " + q2 + " and " + q3 + " and ";
-      }else if(this.nianfen&&this.danwei&&!this.bianhao){
-        return "where " + q1 +" and " + q2  + " and ";
-      }else if(!this.nianfen&&this.danwei&&this.bianhao){
+      if (this.nianfen && this.danwei && this.bianhao) {
+        return "where " + '"+q1+"' + " and " + q2 + " and " + q3 + " and ";
+      } else if (this.nianfen && this.danwei && !this.bianhao) {
+        return "where " + q1 + " and " + q2 + " and ";
+      } else if (!this.nianfen && this.danwei && this.bianhao) {
         return "where " + q2 + " and " + q3 + " and ";
-      }else if(this.nianfen&&!this.danwei&&this.bianhao){
-        return "where " + q1 +" and " + q3 + " and ";
-      }else if(this.nianfen&&!this.danwei&&!this.bianhao){
+      } else if (this.nianfen && !this.danwei && this.bianhao) {
+        return "where " + q1 + " and " + q3 + " and ";
+      } else if (this.nianfen && !this.danwei && !this.bianhao) {
         return "where " + q1 + " and ";
-      }else if(!this.nianfen&&this.danwei&&!this.bianhao){
+      } else if (!this.nianfen && this.danwei && !this.bianhao) {
         return "where " + q2 + " and ";
-      }else if(!this.nianfen&&!this.danwei&&this.bianhao){
+      } else if (!this.nianfen && !this.danwei && this.bianhao) {
         return "where " + q3 + " and ";
-      }else if(!this.nianfen&&!this.danwei&&!this.bianhao){
-        return "WHERE"
+      } else if (!this.nianfen && !this.danwei && !this.bianhao) {
+        return "WHERE";
       }
     },
     search() {
-      let moreSql = this.selectSplit()
-        var sql = "select * from t_mjjcbg " + moreSql+" shi_fou_yu_bao_ga ='否' and lei_bie_qu_fen_yu = '非' ORDER BY create_time_ DESC limit 0,20"
-     console.log(sql,"gengd")
-     this.loadData(sql);
+      let moreSql = this.selectSplit();
+      var sql =
+        "select * from t_mjjcbg " +
+        moreSql +
+        " shi_fou_yu_bao_ga ='否' and lei_bie_qu_fen_yu = '非' and zhuang_tai_ ='报告待发放' or  zhuang_tai_ = '已完成' ORDER BY create_time_ DESC limit 0,20";
+      this.loadData(sql);
     },
     handleSizeChange(value) {
       this.currentPage4 = 1;
       let sql =
-        "select * from t_mjjcbg WHERE shi_fou_yu_bao_ga='否' and lei_bie_qu_fen_yu ='非' ORDER BY create_time_ DESC limit 0,"+value;
+        "select * from t_mjjcbg WHERE shi_fou_yu_bao_ga='否' and lei_bie_qu_fen_yu ='非' and zhuang_tai_ ='报告待发放' or zhuang_tai_ = '已完成' ORDER BY create_time_ DESC limit 0," +
+        value;
       this.loadData(sql);
     },
     handleCurrentChange(value) {
       let sql =
-        "select * from t_mjjcbg WHERE shi_fou_yu_bao_ga='否' and lei_bie_qu_fen_yu ='非' ORDER BY create_time_ DESC limit "+value+", 20";
-
-        console.log(sql,"sql")
+        "select * from t_mjjcbg WHERE shi_fou_yu_bao_ga='否' and lei_bie_qu_fen_yu ='非' and zhuang_tai_ ='报告待发放' or zhuang_tai_ = '已完成' ORDER BY create_time_ DESC limit " +
+        value +
+        ", 20";
       this.loadData(sql);
     },
   },
-
 };
 </script>
 

src/views/sample/reservedSample.vue

@@ -0,0 +1,665 @@
+<template>
+  <div class="sample-content">
+    <!-- 表格組件 -->
+    <div class="top-content">
+      <div class="top-title">样品间存放可视化</div>
+      <div class="query-content">
+        <el-form :inline="true" :model="formInline" class="demo-form-inline">
+          <el-form-item label="房间号：">
+            <el-select
+              v-model="formInline.fang_jian_hao_value"
+              placeholder="请选择样品"
+            >
+              <el-option
+                v-for="(item, index) in sampleOption"
+                :key="index"
+                placeholder="区域"
+                :label="item.fang_jian_lei_xin"
+                :value="item.fang_jian_lei_xin"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item
+            v-show="leixingcare"
+            style="margin-left: 50px"
+            prop="title"
+            label="区域名称："
+          >
+            <el-select
+              v-model="formInline.qu_yu_value"
+              placeholder="请选择区域名称"
+            >
+              <el-option
+                v-for="(item, index) in quyu_arr"
+                :key="index"
+                placeholder="区域"
+                :label="item.qu_yu_"
+                :value="item.qu_yu_"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item style="margin-left: 50px" label="货架号：">
+            <el-select
+              v-model="formInline.huo_jia_value"
+              placeholder="请选择货架号"
+            >
+              <el-option
+                v-for="(item, index) in huo_jia_arr"
+                :key="index"
+                placeholder="区域"
+                :label="item.huo_jia_hao_ + '号' + item.huo_jia_lei_xing_"
+                :value="item.huo_jia_hao_ + '号' + item.huo_jia_lei_xing_"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item
+            v-show="!leixingcare"
+            style="margin-left: 50px"
+            label="挂件号："
+          >
+            <el-select
+              v-model="formInline.gua_jia_value"
+              placeholder="请选择挂件号"
+            >
+              <el-option
+                v-for="(item, index) in gua_jia_arr"
+                :key="index"
+                placeholder="区域"
+                :label="item.gua_jia_hao_ + '号' + '挂件'"
+                :value="item.gua_jia_hao_ + '号' + '挂件'"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <button
+              type="button"
+              class="el-button el-button--primary el-button--mini"
+              @click="onSubmits"
+            >
+              <i class="ibps-icon-search"></i><span>查询</span>
+            </button>
+          </el-form-item>
+        </el-form>
+      </div>
+    </div>
+    <div class="select_quyu">
+      <div class="test-quyu" v-if="leixingcare">
+        <div class="test-list">
+          <ul class="list-items">
+            <li
+              class="list-item quyu-item"
+              :style="{
+                background: quyuShow == item.qu_yu_ ? '#FF9900' : '#0099CC',
+              }"
+              @click="qu_yu_Event"
+              v-for="item in quyu_arr"
+              :key="item.qu_yu_"
+            >
+              {{ item.qu_yu_ }}
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div class="huojia">
+        <div class="test-list">
+          <ul class="list-items">
+            <li
+              class="list-item huojia-item"
+              :style="{
+                background:
+                  huojiashow ==
+                  item.huo_jia_hao_ + '号' + item.huo_jia_lei_xing_
+                    ? '#ff9900'
+                    : '#0099cc',
+              }"
+              @click="huo_jia_hao_Event"
+              v-for="(item, index) in huo_jia_arr"
+              :key="index"
+            >
+              {{ item.huo_jia_hao_ }}号{{ item.huo_jia_lei_xing_ }}
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div class="huojia">
+        <div class="test-list" v-show="!leixingcare">
+          <ul class="list-items">
+            <li
+              class="list-item huojia-item"
+              :style="{
+                background:
+                  guajiashow == item.gua_jia_hao_ + '号挂件'
+                    ? '#FF9900'
+                    : '#e5baba',
+              }"
+              @click="gua_jia_Event"
+              v-for="(item, index) in gua_jia_arr"
+              :key="index"
+            >
+              {{ item.gua_jia_hao_ }}号挂件
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+    <div class="body-content">
+      <div class="left-table" v-if="false"></div>
+      <div class="right-view">
+        <div class="goods-items">
+          <div class="show-demo" v-for="(item, index) in listData" :key="index">
+            <div>
+              <div class="goods-level">
+                <div class="level-dsc">第{{ index }}层</div>
+                <div class="goods-list">
+                  <div
+                    class="goods-dsc"
+                    v-for="(it, ind) in listData[index]"
+                    :key="ind"
+                    :style="{
+                      background:
+                        it.wei_zhi_zhuang_ta == '空余' ? '#E6A23C' : '',
+                    }"
+                  >
+                    <div class="top-dsc">
+                      <div class="position">
+                        <p>存放位置：{{ it.wei_zhi_bian_hao_ }}</p>
+                        <p>样品编号：{{ it.yang_pin_bian_hao }}</p>
+                        <p>
+                          存储条件：{{
+                            it.cun_chu_tiao_jian || it.cun_chu_yao_qiu_
+                          }}
+                        </p>
+                        <p>留样期限：{{ it.liu_yang_qi_xian_ }}</p>
+                        <!-- <p>编号:{{it.yang_pin_bian_hao}}</p> -->
+                        <!-- <p>批次:</p>
+                        <p>有效期:</p> -->
+                      </div>
+                      <div class="right-content" v-if="false">
+                        <p v-if="false">编号:{{ it.liu_yang_qi_xian_ }}</p>
+                        <p>
+                          {{ it.wei_zhi_zhuang_ta || it.yang_pin_ming_che }}
+                        </p>
+                        <p v-if="false">
+                          存储条件：{{
+                            it.cun_chu_tiao_jian || it.cun_chu_yao_qiu_
+                          }}
+                        </p>
+                        <p v-if="false">留样期限：{{ it.liu_yang_qi_xian_ }}</p>
+                        <!-- <p>类型：{{ it.cun_fang_lei_xing }}</p> -->
+                      </div>
+                      <div class="right-content">
+                        <p>
+                          {{ it.wei_zhi_zhuang_ta || it.yang_pin_ming_che }}
+                        </p>
+                      </div>
+                      <!-- <div class="condition">{{ it.cun_chu_tiao_jian }}</div> -->
+                    </div>
+                    <div class="bottom-dsc" v-if="false">
+                      {{ it.wei_zhi_zhuang_ta || it.yang_pin_ming_che }}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="goodshelf-name" v-if="index == 1">
+              {{ desString }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import FixHeight from "@/mixins/height";
+import curdPost from "@/business/platform/form/utils/custom/joinCURD.js";
+export default {
+  mixins: [FixHeight],
+  data() {
+    return {
+      sampleOption: [],
+      formInline: {
+        fang_jian_hao_value: "",
+        qu_yu_value: "",
+        huo_jia_value: "",
+        gua_jia_value: "",
+      },
+      listData: [],
+      warehouseOptions: [],
+      quyu_arr: [],
+      huo_jia_arr: [],
+      gua_jia_arr: [],
+      firstLoadActive: true,
+      qu_yu_value: "",
+      quyuShow: "",
+      huojiashow: "",
+      guajiashow: "",
+      leixingcare: true,
+      cenghao: [],
+      warehouse: [],
+      loading: false,
+      // pagination: {},
+      // secondshow: false,
+      desString: "",
+    };
+  },
+  filters: {
+    specimenFilters: function (value) {
+      if (value == "空余") {
+        return "未占用";
+      } else {
+        return value;
+      }
+    },
+  },
+  created() {
+    this.loadQueryData();
+    this.firstLoadViewData();
+  },
+  methods: {
+    firstLoadViewData() {
+      var this_ = this;
+      var sqlString = `select * from t_mjypcfwz where fang_jian_lei_xin = '样品间' and qu_yu_ ='待检区' and huo_jia_hao_ = '1' and huo_jia_lei_xing_ = '冰箱'`;
+      this.huojiashow = "1号冰箱";
+      this.quyuShow = "待检区";
+      this.desString = "样品间" + "待检区1号冰箱";
+      this.queryLoad(sqlString);
+      this.formInline.fang_jian_hao_value = "样品间";
+      this.formInline.qu_yu_value = "待检区";
+      this.formInline.huo_jia_value = "1号冰箱";
+      let sql = `select distinct huo_jia_hao_,huo_jia_lei_xing_ from t_mjypcfwz where fang_jian_lei_xin = '样品间' and qu_yu_ ='待检区'  order by huo_jia_hao_ asc `;
+      curdPost("sql", sql).then((response) => {
+        this_.huo_jia_arr = response.variables.data;
+      });
+    },
+    loadQueryData() {
+      //查询选择数据查询
+      var sqlString = "select distinct fang_jian_lei_xin from t_mjypcfwz WHERE fang_jian_lei_xin !=''";
+      // var sqlString = "select * from t_mjypcfwz";
+      var this_ = this;
+      curdPost("sql", sqlString)
+        .then((response) => {
+          this_.sampleOption = response.variables.data;
+          this_.sampleOption.pop();
+        })
+    },
+    onSubmits(sql) {
+      var fang_jian_ = this.formInline.fang_jian_hao_value;
+      var qu_yu = this.formInline.qu_yu_value;
+      var huo_jia_hao_ = this.formInline.huo_jia_value.substr(0, 1);
+      let huo_jia_lei_xing_ = this.formInline.huo_jia_value.substr(
+        2,
+        this.formInline.huo_jia_value.length
+      );
+      var gua_jia_hao = this.formInline.gua_jia_value.substr(0, 1);
+      var sql;
+      if (qu_yu != "") {;
+        sql = `select * from t_mjypcfwz where fang_jian_lei_xin = '${fang_jian_}' and qu_yu_ = '${qu_yu}' and huo_jia_lei_xing_ = '${huo_jia_lei_xing_}' and huo_jia_hao_ = '${huo_jia_hao_}'`;
+      } else {
+        if (huo_jia_lei_xing_.includes("冰箱")) {
+          sql = `select * from t_mjypcfwz where fang_jian_lei_xin = '${fang_jian_}' and huo_jia_lei_xing_ = '${huo_jia_lei_xing_}' and huo_jia_hao_ = '${huo_jia_hao_}'`;
+        } else if (huo_jia_lei_xing_.includes("液氮罐")) {
+          sql = `select * from t_mjypcfwz where fang_jian_lei_xin = '${fang_jian_}' and huo_jia_lei_xing_ = '${huo_jia_lei_xing_}'  and huo_jia_hao_ = '${huo_jia_hao_}' and gua_jia_hao_= '${gua_jia_hao}'`;
+        }
+      }
+      // this.desString = fang_jian_ + qu_yu + huo_jia_hao_;
+      this.queryLoad(sql);
+    },
+    queryLoad(sql) {
+      //根据样品信息货位查询相对应的样品登记表
+      var datas = [];
+      var labelsMap = {}; // map存储
+      var this_ = this;
+      this_.listData = [];
+      curdPost("sql", sql).then((res) => {
+        datas = res.variables.data;
+        datas.forEach((item) => {
+          if (!labelsMap[item.ceng_hao_]) {
+            //没有就创建
+            labelsMap[item.ceng_hao_] = [];
+          }
+          // 通过样品货位配置的id外键 查询样品登记表
+          let yangpingSql =
+            "select * from t_mjypdjb WHERE shou_yang_wei_zhi = '" +
+            item.id_ +
+            "'";
+          curdPost("sql", yangpingSql).then((res) => {
+            var resData = res.variables.data;
+            if (resData.length > 0) {
+              resData.forEach((it) => {
+                it.wei_zhi_bian_hao_ = item.wei_zhi_bian_hao_;
+                labelsMap[item.ceng_hao_].push(it);
+              });
+            } else {
+              labelsMap[item.ceng_hao_].push(item);
+            }
+          });
+        });
+        // this.loading = true;
+        
+        this_.listData = labelsMap;
+      });
+    },
+    qu_yu_Event(e) {
+      //区间 留样 样品间 点击事件 查询相应的货架号->冰箱 赋值 huo_jia_hao_
+      this.huo_jia_arrEvent(e.target.innerText);
+      this.huojiashow = "";
+      this.guajiashow = "";
+      let sqlString = `select distinct huo_jia_hao_,huo_jia_lei_xing_ from t_mjypcfwz where fang_jian_lei_xin = '${this.formInline.fang_jian_hao_value}' and qu_yu_ = '${e.target.innerText}' order by huo_jia_hao_ asc`;
+      var this_ = this;
+      this.qu_yu_value = e.target.innerText;
+      this.quyuShow = e.target.innerText;
+      this.formInline.qu_yu_value = e.target.innerText;
+      curdPost("sql", sqlString).then((response) => {
+        this_.huo_jia_arr = response.variables.data;
+      });
+    },
+    huo_jia_hao_Event(e) {
+      //货架 冰箱 液氮罐点击事件
+      this.guajiashow = "";
+      let selectText = e.target.innerText;
+      this.guajiaarrEvent(selectText);
+      this.huojiashow = selectText;
+      let huojiaNum = selectText.substr(0, 1);
+      this.formInline.huo_jia_value = selectText;
+      let huojialeixing = this.formInline.huo_jia_value.substr(
+        2,
+        this.formInline.huo_jia_value.length
+      );
+      //区分是冰箱和液氮罐的点击事件
+      if (selectText.includes("冰箱")) {
+        //如果是冰箱 请求样品货位配置信息 ->查询登记表
+        var sql = `select * from t_mjypcfwz where fang_jian_lei_xin = '${this.formInline.fang_jian_hao_value}' and qu_yu_ = '${this.formInline.qu_yu_value}' and  huo_jia_lei_xing_ = '${huojialeixing}' and huo_jia_hao_ = '${huojiaNum}'`;
+        this.queryLoad(sql);
+        //  alert("冰箱");
+      } else if (selectText.includes("液氮罐")) {
+        //液氮罐 查询该液氮罐下所有的挂件
+        let sqlString = `select distinct gua_jia_hao_ from t_mjypcfwz where huo_jia_lei_xing_ = '液氮罐' and huo_jia_hao_ = '${huojiaNum}'  order by gua_jia_hao_ asc`;
+        var this_ = this;
+        curdPost("sql", sqlString).then((response) => {
+          this_.gua_jia_arr = response.variables.data;
+        });
+      }
+      this.formInline.huo_jia_value = selectText;
+    },
+    gua_jia_Event(e) {
+      //液氮罐挂件号点击事件 查询该液氮罐下该挂件的货位位置信息;
+      let selectText = e.target.innerText;
+      this.guajiashow = selectText;
+      let hguajiaNum = selectText.substr(0, 1);
+      var fang_jian_hao_value = this.formInline.fang_jian_hao_value;
+      var huo_jia_value = this.formInline.huo_jia_value;
+      var sql = `select * from t_mjypcfwz where fang_jian_lei_xin = '${fang_jian_hao_value}' and huo_jia_lei_xing_ = '液氮罐' and huo_jia_hao_ = '${huo_jia_value.substring(
+        0,
+        1
+      )}' and gua_jia_hao_= '${hguajiaNum}'`;
+      this.desString = fang_jian_hao_value + huo_jia_value + selectText;
+      this.queryLoad(sql);
+    },
+    huo_jia_arrEvent(quyu){
+      let sqlString = `select distinct huo_jia_hao_,huo_jia_lei_xing_ from t_mjypcfwz where fang_jian_lei_xin = '${this.formInline.fang_jian_hao_value}' and qu_yu_ = '${quyu}'   order by huo_jia_hao_ asc`;
+      var this_ = this;
+      curdPost("sql", sqlString).then((response) => {
+        this_.huo_jia_arr = response.variables.data;
+        if (!this_.firstLoadActive) {
+          this_.formInline.huo_jia_value = "";
+        }
+        this_.firstLoadActive = false;
+      });
+    },
+    guajiaarrEvent(huojiaweizhi) {
+      let huojiaNum = huojiaweizhi.substr(0, 1);
+      let huojialeixing = huojiaweizhi.substr(2, huojiaweizhi.length);
+      if(huojiaweizhi.includes("冰箱")){
+        this.gua_jia_arr =[];
+        return
+      }
+      let sqlString = `select distinct gua_jia_hao_ from t_mjypcfwz where fang_jian_lei_xin = '留样间' and huo_jia_lei_xing_ = '${huojialeixing}' and huo_jia_hao_ = '${huojiaNum}'   order by gua_jia_hao_`;
+      var this_ = this;
+      curdPost("sql", sqlString).then((response) => {
+        this_.gua_jia_arr = response.variables.data;
+      });
+    },
+  },
+  watch: {
+    "formInline.fang_jian_hao_value": function (newdata, olddata) {
+      //监控房间号 input 输入框数据变化 来改变区域和货架信息（input）
+      this.huo_jia_arr = [];
+      let sqlString = `select distinct qu_yu_ ,huo_jia_hao_ from t_mjypcfwz where fang_jian_lei_xin = '${newdata}' `;
+      var this_ = this;
+      curdPost("sql", sqlString).then((response) => {
+        this_.quyu_arr = response.variables.data.reverse();
+        this_.quyu_arr.forEach((item) => {
+          //待优化 事实上是一个用来判断
+          if (item.qu_yu_ == "") {
+            this_.leixingcare = false;
+            this_.formInline.qu_yu_value = "";
+            let sql = `select distinct huo_jia_hao_,huo_jia_lei_xing_ from t_mjypcfwz where fang_jian_lei_xin = '${newdata}'  order by huo_jia_hao_ asc`;
+            curdPost("sql", sql).then((res) => {
+              this_.huo_jia_arr = res.variables.data;
+            });
+            return;
+          } else {
+            this_.leixingcare = true;
+          }
+        });
+        if (!this.firstLoadActive) {
+          this_.formInline.qu_yu_value = "";
+        }
+      });
+    },
+    // "formInline.qu_yu_value": function (newdata, olddata) {
+    //   let sqlString = `select distinct huo_jia_hao_,huo_jia_lei_xing_ from t_mjypcfwz where fang_jian_lei_xin = '${this.formInline.fang_jian_hao_value}' and qu_yu_ = '${newdata}'   order by huo_jia_hao_ asc`;
+    //   var this_ = this;
+    //   curdPost("sql", sqlString).then((response) => {
+    //     this_.huo_jia_arr = response.variables.data;
+    //     if (!this_.firstLoadActive) {
+    //       this_.formInline.huo_jia_value = "";
+    //     }
+    //     this_.firstLoadActive = false;
+    //   });
+    // },
+    // "formInline.huo_jia_value": function (newdata, olddata) {
+    //   console.log(newdata.substr(0, 1), "货架监听");
+    //   let sqlString = `select distinct gua_jia_hao_ from t_mjypcfwz where fang_jian_lei_xin = '留样间' and huo_jia_lei_xing_ = '液氮罐' and huo_jia_hao_ = '${newdata.substr(
+    //     0,
+    //     1
+    //   )}'   order by gua_jia_hao_`;
+    //   var this_ = this;
+    //   console.log(sqlString, "件数");
+    //   curdPost("sql", sqlString).then((response) => {
+    //     this_.gua_jia_arr = response.variables.data;
+    //     console.log(this_.gua_jia_arr, "挂件数");
+    //   });
+    // },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+p {
+  padding: 0;
+  margin: 0;
+}
+.sample-content {
+  width: 100%;
+  .top-content {
+    width: 100%;
+    .top-title {
+      text-align: center;
+      font-weight: bold;
+      width: 100%;
+      font-size: 18px;
+      line-height: 40px;
+    }
+    .query-content {
+      display: flex;
+      margin-left: 25px;
+    }
+  }
+  .select_quyu {
+    .test-quyu,
+    .huojia {
+      width: 100%;
+      .list-items {
+        display: flex;
+        cursor: pointer;
+        .quyu-item {
+          background: #0099cc;
+        }
+        .huojia-item {
+          background: #99ccff;
+        }
+        .list-item {
+          padding: 0px 10px;
+          background-color: rgb(206, 198, 164);
+          text-align: center;
+          line-height: 35px;
+          margin-left: 20px;
+          border-radius: 10px;
+        }
+      }
+      .cangku-mingchen {
+        width: 100%;
+        text-align: left;
+        margin-left: 50px;
+      }
+    }
+  }
+  .body-content {
+    // margin-top: 70px;
+    display: flex;
+    box-sizing: border-box;
+    height: calc(100vh - 340px);
+    overflow-x: hidden;
+    overflow-y: scroll;
+    // .left-table {
+    //   // width: 40%;
+    //   ::v-deep .el-table {
+    //     width: 40%;
+    //   }
+    // }
+    .right-view {
+      z-index: 99;
+      width: 100%;
+      .goods-items {
+        width: 100%;
+        border: solid 2px rgb(202, 236, 247);
+        display: flex;
+        flex-direction: column-reverse;
+        .show-demo {
+          width: 100%;
+          border-bottom: 1px solid bisque;
+          //   margin: 0 auto;
+          text-align: center;
+
+          .goods-level {
+            display: flex;
+            position: relative;
+            margin-bottom: 6px;
+          }
+          .level-dsc {
+            margin-top: 12px;
+            position: absolute;
+            bottom: 0;
+            left: 10px;
+          }
+          .goods-list {
+            display: flex;
+            // justify-content: flex-start;
+            flex-wrap: wrap-reverse;
+            align-content: flex-start;
+            margin-left: 50px;
+            .goods-dsc {
+              cursor: pointer;
+              padding: 2px 6px;
+              border-radius: 5px;
+              background: #67c23a;
+              margin-left: 12px;
+              margin-top: 6px;
+              box-sizing: border-box;
+              .top-dsc {
+                display: flex;
+                justify-content: space-between;
+                font-size: 12px;
+                // height: 18px;
+                line-height: 18px;
+                .position > p {
+                  text-align: left;
+                  color: #fbe8ff;
+                }
+                .right-content {
+                  display: flex;
+                  align-items: center;
+                  p {
+                    height: 18px;
+                    line-height: 18px;
+                    margin-left: 5px;
+                    color: #fbe8ff;
+                    text-align: left;
+                  }
+                }
+              }
+              .bottom-dsc {
+                width: 100%;
+                text-align: center;
+                font-size: 18px;
+                height: 45px;
+                line-height: 45px;
+                margin-top: 9px;
+                color: #fbe8ff;
+              }
+              .goods-demo {
+                display: block;
+                width: 70px;
+                height: 90px;
+                border: 1px solid rgb(10, 9, 8);
+                text-align: center;
+                margin: 0;
+              }
+              .goods-code {
+                text-align: center;
+                width: 100%;
+                height: 20px;
+                line-height: 20px;
+              }
+            }
+          }
+          .goodshelf-name {
+            margin: 15px 0px;
+          }
+          .shelf {
+            width: 100%;
+            height: 40px;
+            line-height: 40px;
+            text-align: center;
+          }
+        }
+        // .shelf-pointer {
+        //   position: fixed;
+        //   right: 75px;
+        //   bottom: 35%;
+        //   cursor: pointer;
+        //   .pointer {
+        //     .pointer-item {
+        //       width: 45px;
+        //       height: 45px;
+        //       line-height: 45px;
+        //       border: 1px solid #fcfefd;
+        //       background-color: #fcb400;
+        //       border-radius: 50%;
+        //       text-align: center;
+        //       color: #fff0f3;
+        //       font-size: 18px;
+        //       margin-top: 10px;
+        //     }
+        //   }
+        // }
+      }
+    }
+  }
+}
+</style>
+
+

src/views/sample/sampleView.vue

@@ -162,14 +162,16 @@
                   >
                     <div class="top-dsc">
                       <div class="position">
-                        <p>位置：{{ it.wei_zhi_bian_hao_ }}</p>
+                        <p>位置：{{ it.shi_fou_liu_yang_?	liu_yang_wei_zhi_:it.wei_zhi_bian_hao_}}</p>
                         <p>样品编号：{{ it.yang_pin_bian_hao }}</p>
                         <p>
                           存储条件：{{
                             it.cun_chu_tiao_jian || it.cun_chu_yao_qiu_
                           }}
                         </p>
-                        <p>留样期限：{{ it.liu_yang_qi_xian_ }}</p>
+                        <p >收样日期：{{ it.shou_yang_ri_qi_}}</p>
+                        <p v-if="it.shi_fou_liu_yang_ =='是'">留样期限：{{ it.liu_yang_qi_xian_}}</p>
+                        
                         <!-- <p>编号:{{it.yang_pin_bian_hao}}</p> -->
                         <!-- <p>批次:</p>
                         <p>有效期:</p> -->
@@ -184,8 +186,6 @@
                             it.cun_chu_tiao_jian || it.cun_chu_yao_qiu_
                           }}
                         </p>
-                        <p v-if="false">留样期限：{{ it.liu_yang_qi_xian_ }}</p>
-                        <!-- <p>类型：{{ it.cun_fang_lei_xing }}</p> -->
                       </div>
                       <div class="right-content">
                         <p>
@@ -205,9 +205,9 @@
         </div>
       </div>
     </div>
-    <div class="goodshelf-name">
+    <!-- <div class="goodshelf-name">
       {{ desString }}
-    </div>
+    </div> -->
   </div>
 </template>
 

src/views/system/blank/index.vue

@@ -6,7 +6,7 @@
                  <i style="font-size:28px;" :class="'ibps-icon-'+$route.query.icon"></i>
                   {{$route.query.name}}
                 </br>
-                 <span style="color: red; font-size: 16px;">选择左侧菜单功能项</span>
+                 <!-- <span style="color: red; font-size: 16px;">选择左侧菜单功能项</span> -->
           </div>
        </div>
 </template>

src/views/system/jbdHome/board/checkBoard.vue

@@ -0,0 +1,465 @@
+<template>
+    <div :class="$style.content">
+        <dv-full-screen-container>
+            <!-- 头部内容 -->
+            <div :class="$style.header">
+                <dv-decoration-8 :class="$style.left" />
+                <dv-decoration-5 :class="$style.center" />
+                <dv-decoration-8 :class="$style.right" :reverse="true" />
+                <div :class="$style.title">{{ titleName }}</div>
+                <div :class="$style.time">
+                    <span>月份：</span>
+                    <el-date-picker
+                        v-model="month"
+                        type="month"
+                        value-format="yyyy-MM"
+                        format="yyyy-MM"
+                        placeholder="日期选择"
+                        style="width: 120px"
+                        :readonly="false"
+                        :editable="true"
+                        :clearable="false"
+                        @change="updateAll"
+                    />
+                </div>
+                <div :class="$style.back" @click.prevent="goBack()">
+                    <dv-border-box-8>返回</dv-border-box-8>
+                </div>
+            </div>
+            <dv-border-box-1>
+                <!-- topBar -->
+                <top-bar v-if="topBarData.length" :info="topBarData" />
+                <!-- middleCard -->
+                <middle-card v-if="middleCardData.flag" :info="middleCardData" />
+                <!-- bottomCard -->
+                <bottom-card v-if="bottomCardData.flag" :info="bottomCardData" />
+            </dv-border-box-1>
+        </dv-full-screen-container>
+    </div>
+</template>
+<script>
+    import screenfull from 'screenfull'
+    import curdPost from '@/business/platform/form/utils/custom/joinCURD.js'
+    export default {
+        name: 'checkBoard',
+        components: {
+            topBar: () => import('./component/topBar'),
+            middleCard: () => import('./component/middleCard'),
+            bottomCard: () => import('./component/bottomCard')
+        },
+        data() {
+            const d = new Date()
+            return {
+                titleName: '检测综合信息查询',
+                year: d.toJSON().slice(0, 4),
+                month: d.toJSON().slice(0, 7),
+                today: d.toJSON().slice(0, 10),
+                label: ['委托', '受理', '任务发放', '报告'],
+                topBarData: [],
+                middleCardData: {
+                    tableData: {
+                        header: [
+                            '检测项目',
+                            '检测类型',
+                            '计划完成时间',
+                            '当前状态',
+                            '人员'
+                        ],
+                        data: [],
+                        rowNum: 7,
+                        columnWidth: ['300','100','150','150','100']
+                    },
+                    acceptData:[],
+                    taskData: [],
+                    flag: false
+                },
+                bottomCardData: {
+                    flag: false
+                },
+                timer: null
+            }
+        },
+        // beforeRouteEnter(to, from, next){
+        //     Promise.all([  ]).done(([ res ]) => {
+        //         console.log(res)
+        //     }).then(err => {
+        //         window.observer.trigger('error', err)
+        //         next()
+        //     })
+        // },
+        created() {
+            if (screenfull.isEnabled && !screenfull.isFullscreen) {
+                this.allView()
+            }
+
+            this.updateAll()
+
+            if (this.timer){
+                clearInterval(this.timer)
+            }
+
+            this.timer = setInterval(() => {
+                this.updateAll()
+            },600000)
+        },
+        beforeDestroy() {
+            if (screenfull.isFullscreen) {
+                screenfull.toggle()
+            }
+            clearInterval(this.timer)
+        },
+        methods: {
+            allView() {
+                // 默认显示全屏
+                screenfull.request()
+            },
+            goBack() {
+                this.$router.back(-1)
+            },
+            updateAll(e) {
+                this.getTopBarData()
+                this.getMiddleData()
+                this.getBottomData()
+            },
+            // 获取topBar数据
+            /**
+             *  委托——t_mjwtsqb
+             *  检测——t_jchzb
+             *  任务——t_rwfpb
+             *  报告——t_mjjcbg
+             */
+            getTopBarData() {
+                let quarter = this.getDateRange('quarter')
+                let week = this.getDateRange('week')
+                // 获取委托数及受理数
+                const sql = `select wt.month as month, wt.accepted as accepted, wt2.today as today, wt2.week as week, wt2.quarter as quarter, jc.total as jcTotal, jc.finished as jcFinish, rw.task as task, rw.finished as rwFinish, bg.report as report, bg.process as process,bg.approval as approval
+                from
+                (select count(id_) as month, count(zhuang_tai_ = '委托结束' or null) as accepted from t_mjwtsqb where create_time_ LIKE '${this.month}%') wt,
+                (select count(create_time_ like '${this.today}' or null) as today, count(create_time_ between '${week.start}' and '${week.end}' or null) as week, count(create_time_ between '${quarter.start}' and '${quarter.end}' or null) as quarter from t_mjwtsqb) wt2,
+                (select count(id_) as total, count(jian_ce_zhuang_ta = '已完成' or null) as finished from t_jchzb where create_time_ LIKE '${this.month}%') jc,
+                (select count(id_) as task, count(zhuang_tai_ = '任务已完成' or null) as finished from t_rwfpb where create_time_ LIKE '${this.month}%') rw,
+                (select count(id_) as report, count(zhuang_tai_ = '报告待审核' or null) as process, count(zhuang_tai_ = '报告待审批' or null) as approval from t_mjjcbg where create_time_ LIKE '${this.month}%') bg`
+                console.log(sql)
+                curdPost('sql', sql).then(res => {
+                    const data = res.variables.data
+                    console.log(data)
+                    
+                    if ( data && data.length ) {
+                        const { month, accepted, approval, jcFinish, jcTotal, process, report, rwFinish, task, today, week, quarter } = data[0]
+                        this.middleCardData.taskData = [month, jcTotal, task, report]
+                        let result = [
+                            {
+                                title: '委托',
+                                children: [
+                                    {
+                                        label: '本季度',
+                                        value: quarter
+                                    },
+                                    {
+                                        label: '月度',
+                                        value: month
+                                    },
+                                    {
+                                        label: '本周',
+                                        value: week
+                                    },
+                                    {
+                                        label: '本日',
+                                        value: today
+                                    },
+                                    {
+                                        label: '受理',
+                                        value: accepted
+                                    }
+                                ]
+                            },
+                            {
+                                title: '任务分配',
+                                children: [
+                                    {
+                                        label: '总数',
+                                        value: task
+                                    },
+                                    {
+                                        label: '已完成',
+                                        value: rwFinish
+                                    },
+                                    {
+                                        label: '未完成',
+                                        value: task - rwFinish
+                                    }
+                                ]
+                            },
+                            {
+                                title: '检测',
+                                children: [
+                                    {
+                                        label: '总数',
+                                        value: jcTotal
+                                    },
+                                    {
+                                        label: '已完成',
+                                        value: jcFinish
+                                    },
+                                    {
+                                        label: '未完成',
+                                        value: jcTotal - jcFinish
+                                    }
+                                ]
+                            },
+                            {
+                                title: '报告',
+                                children: [
+                                    {
+                                        label: '总数',
+                                        value: report
+                                    },
+                                    {
+                                        label: '已完成',
+                                        value: report - approval - process
+                                    },
+                                    {
+                                        label: '待审批',
+                                        value: approval
+                                    },
+                                    {
+                                        label: '待审核',
+                                        value: process
+                                    }
+                                ]
+                            }
+                        ]
+                        
+                        this.topBarData = result
+                    }
+                }).catch(error => {
+                    console.log(error)
+                })
+            },
+            // 获取中间图表数据
+            getMiddleData() {
+                // 获取检测数据
+                const sql1 = `select tm.jian_ce_xiang_mu_, tm.jian_ce_lei_bie_, IFNULL(rw.qi_wang_wan_cheng, '') as qi_wang_wan_cheng, rw.zhuang_tai_, ipe.NAME_ from t_rwfpb rw, ibps_party_employee ipe, t_mjjcnlfw tm where rw.jian_ce_yuan_ = ipe.ID_ and rw.jian_ce_xiang_mu_ = tm.id_ and rw.create_time_ like '${this.month}%'`
+                // 获取检测受理类型数据
+                const sql2 = `select count(tm.jian_ce_lei_bie_ = '理化' or null) as lh, count(tm.jian_ce_lei_bie_ = '微生物' or null) as wsw, count(tm.jian_ce_lei_bie_ = '细胞活率' or null) as xbhl, count(tm.jian_ce_lei_bie_ = '残留检测' or null) as cljc, count(tm.jian_ce_lei_bie_ = '细胞鉴别' or null) as xbjb from t_jchzb tj, t_mjjcnlfw tm where tj.jian_ce_xiang_mu_ = tm.id_ and tj.create_time_ like '${this.month}%'`
+
+                Promise.all([
+                    curdPost('sql', sql1),
+                    curdPost('sql', sql2)
+                ]).then(([res1, res2]) => {
+                    const data1 = res1.variables.data
+                    const data2 = res2.variables.data
+                    // console.log(data1, data2)
+
+                    this.middleCardData.tableData.data = []
+                    data1.forEach(item => {
+                        this.middleCardData.tableData.data.push(Object.values(item))
+                    })
+
+                    this.middleCardData.acceptData = Object.values(data2[0])
+                    this.middleCardData.flag = true
+                }).catch(error => {
+                    console.log(error)
+                })
+            },
+            // 获取底部图表数据
+            getBottomData() {
+                // 获取检测委托受理情况数据
+                const sql1 = `select tm.zhuang_tai_ as state, DATE_FORMAT(tm.create_time_, '%Y-%m-%d %H:%i:%s') as time from t_mjwtsqb tm where tm.create_time_ like '${this.year}%'`
+                // 获取检测月度年度任务完成情况数据
+                const sql2 = `select rw.zhuang_tai_ as state, DATE_FORMAT(rw.create_time_, '%Y-%m-%d %H:%i:%s') as time from t_rwfpb rw where rw.create_time_ like '${this.year}%'`
+                // 获取已委托样品数量
+                const sql3 = `select count(yp.id_) as unReceive from t_mjypb yp, t_mjwtsqb wt where yp.wai_jian_ = wt.id_ and yp.create_time_ like '${this.month}%'`
+                // 获取样品 收样/留样/不合格数量
+                const sql4 = `select count(id_) as receive, count(shi_fou_liu_yang_ = '是' or null) as keep, count(yan_shou_zhuang_t = '残缺' or null) as incomplete from t_mjypdjb where create_time_ like '${this.month}%'`
+                Promise.all([
+                    curdPost('sql', sql1),
+                    curdPost('sql', sql2),
+                    curdPost('sql', sql3),
+                    curdPost('sql', sql4),
+                ]).then(([ res1, res2, res3, res4]) => {
+                    this.bottomCardData.flag = false
+                    const data1 = res1.variables.data
+                    const data2 = res2.variables.data
+                    const data3 = res3.variables.data
+                    const data4 = res4.variables.data
+                    // console.log(data1, data2, data3, data4)
+
+                    let trust = new Array(12).fill(0)
+                    let accepted = new Array(12).fill(0)
+                    let task = new Array(12).fill(0)
+                    let complete = new Array(12).fill(0)
+                    data1.forEach(item => {
+                        const index = parseInt(item.time.slice(5,7)) - 1
+                        if (item.state === '委托结束') {
+                            accepted[index]++
+                        }
+                        trust[index]++
+                    })
+                    data2.forEach(item => {
+                        const index = parseInt(item.time.slice(5,7)) - 1
+                        if (item.state === '任务已完成') {
+                            complete[index]++
+                        }
+                        task[index]++
+                    })
+                    let taskCount = task.reduce((pre, cur) => pre + cur)
+                    let completeCount = complete.reduce((pre, cur) => pre + cur)
+                    let year = [
+                        {
+                            name: '未完成',
+                            value: taskCount - completeCount
+                        },
+                        {
+                            name: '已完成',
+                            value: completeCount
+                        }
+                    ]
+                    let sample = [data3[0].unReceive - data4[0].receive, data4[0].receive, data4[0].incomplete, data4[0].keep]
+                    this.bottomCardData.trust = trust
+                    this.bottomCardData.accepted = accepted
+                    this.bottomCardData.task = task
+                    this.bottomCardData.complete = complete
+                    this.bottomCardData.year = year
+                    this.bottomCardData.sample = sample
+                    this.bottomCardData.flag = true
+
+                    // console.log(this.bottomCardData)
+                }).catch(error => {
+                    console.log(error)
+                })
+            },
+            // 获取本周和本季度的开始和结束日期，以对象形式返回
+            getDateRange(type) {
+                let current = new Date()
+                if (type !== 'week' && type !== 'quarter') {
+                    console.log('type is error')
+                    return
+                }
+                if (type === 'quarter') {
+                    let year = current.getFullYear()
+                    let month = current.getMonth() + 1
+                    const dateList = [
+                        {
+                            start: `${year}-01-01`,
+                            end: `${year}-03-31`
+                        },
+                        {
+                            start: `${year}-04-01`,
+                            end: `${year}-06-31`
+                        },
+                        {
+                            start: `${year}-07-01`,
+                            end: `${year}-09-31`
+                        },
+                        {
+                            start: `${year}-10-01`,
+                            end: `${year}-12-31`
+                        }
+                    ]
+                    let quarter = dateList[parseInt(month / 3)]
+                    return quarter
+                }
+                if (type === 'week') {
+                    let week = {}
+                    let currentWeek = current.getDay() === 0 ? 7 : current.getDay()
+                    let temp = new Date(current - (currentWeek - 1) * 86400000)
+                    week.start = new Date(current - (currentWeek - 1) * 86400000).toJSON().slice(0, 10)
+                    week.end = new Date((temp / 1000 + 6 * 86400) * 1000).toJSON().slice(0, 10)
+                    return week
+                }
+            }
+        }
+    }
+</script>
+<style lang="scss" module>
+    .content {
+        width: 100%;
+        height: 100%;
+        background-color: #030409;
+        position: absolute;
+        color: #fff;
+        z-index: 999;
+        :global {
+            #dv-full-screen-container {
+                background-image: url('../datav/img/bg.png');
+                background-size: 100% 100%;
+                box-shadow: 0 0 3px blue;
+                display: flex;
+                flex-direction: column;
+            }
+            .main-content {
+                flex: 1;
+                display: flex;
+                flex-direction: column;
+            }
+
+            .block-left-right-content {
+                flex: 1;
+                display: flex;
+                margin-top: 0.8%;
+            }
+
+            .block-top-bottom-content {
+                flex: 1;
+                display: flex;
+                flex-direction: column;
+                box-sizing: border-box;
+                padding-left: 0.8%;
+            }
+
+            .block-top-content {
+                height: 55%;
+                display: flex;
+                flex-grow: 0;
+                box-sizing: border-box;
+                padding-bottom: 0.8%;
+            }
+        }
+        .header {
+            position: relative;
+            width: 100%;
+            height: 100px;
+            display: flex;
+            justify-content: space-between;
+            flex-shrink: 0;
+            .left, .right {
+                width: 25%;
+                height: 60px;
+            }
+            .center {
+                width: 40%;
+                height: 60px;
+                margin-top: 30px;
+            }
+            .title {
+                position: absolute;
+                font-size: 30px;
+                font-weight: bold;
+                left: 50%;
+                top: 15px;
+                transform: translateX(-50%);
+            }
+            .time, .back {
+                width: 8%;
+                cursor: pointer;
+                height: 2.825rem;
+                line-height: 2.825rem;
+                text-align: center;
+                margin-top: 2.5%;
+                flex: 1;
+                position: absolute;
+                color: #ffffff;
+            }
+            .time {
+                display: flex;
+                justify-content: flex-end;
+                width: 20%;
+                right: 75%;
+            }
+            .back {
+                left: 75%;
+            }
+        }
+    }
+</style>

src/views/system/jbdHome/board/component/bottomCard.vue

@@ -0,0 +1,106 @@
+<template>
+    <div id="bottom-card">
+        <div :class="$style.chart_box">
+            <!-- <div
+                v-for="(item, index) in cards"
+                :key="index"
+                :class="$style.item"
+            >
+                <div :id="item" style="width: 100%; height: 100%"></div>
+            </div> -->
+            <div :class="$style.item">
+                <div id="trust"></div>
+            </div>
+            <dv-decoration-2 :reverse="true" :dur="4" style="width:5px;height:100%;" />
+            <div :class="$style.item">
+                <div id="sample"></div>
+            </div>
+            <dv-decoration-2 :reverse="true" :dur="6" style="width:5px;height:100%;" />
+            <div :class="$style.item">
+                <div id="month"></div>
+            </div>
+            <dv-decoration-2 :reverse="true" :dur="8" style="width:5px;height:100%;" />
+            <div :class="$style.item">
+                <div id="year"></div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+    import echarts from 'echarts'
+    import { trustOption, sampleOption, monthOption, yearOption } from '../data'
+    export default {
+        name: 'topBar',
+        props: {
+            info: {
+                type: Array,
+                default: []
+            }
+        },
+        components: {},
+        watch: {
+            info: {
+                handler() {
+                    this.init()
+                },
+                deep: true
+            }
+        },
+        data() {
+            return {
+                cards: ['trust', 'sample', 'month', 'year']
+            }
+        },
+        created() {},
+        mounted() {
+            this.init()
+        },
+        methods: {
+            init() {
+                const trust = echarts.init(document.getElementById('trust'))
+                const sample = echarts.init(document.getElementById('sample'))
+                const month = echarts.init(document.getElementById('month'))
+                const year = echarts.init(document.getElementById('year'))
+
+                // 设置图表数据
+                trustOption.series[0].data = this.info.trust
+                trustOption.series[1].data = this.info.accepted
+                monthOption.series[0].data = this.info.task
+                monthOption.series[1].data = this.info.complete
+                sampleOption.series[0].data = this.info.sample
+                yearOption.series[0].data = this.info.year
+
+                // 渲染
+                trust.setOption(trustOption)
+                sample.setOption(sampleOption)
+                month.setOption(monthOption)
+                year.setOption(yearOption)
+            }
+        }
+    }
+</script>
+<style lang="scss" module>
+    .chart_box {
+        position: relative;
+        display: flex;
+        justify-content: space-between;
+        width: 100%;
+        height: 100%;
+        .item {
+            width: 24%;
+            height: 100%;
+            background-color: rgba(6, 30, 93, 0.5);
+            > div {
+                width: 100%;
+                height: 100%;
+            }
+        }
+    }
+    :global {
+        #bottom-card {
+            width: 96%;
+            height: calc((100% - 240px) / 2);
+            padding: 0 2%;
+        }
+    }
+</style>

src/views/system/jbdHome/board/component/middleCard.vue

@@ -0,0 +1,106 @@
+<template>
+    <div id="middle-card">
+        <div :class="$style.chart_box">
+            <div :class="$style.item">
+                <!-- <div :class="$style.title">
+                    <span>检测受理类型</span>
+                </div> -->
+                <div id="accept" style="width: 100%; height: 100%"></div>
+            </div>
+            <dv-decoration-2 :reverse="true" style="width:5px;height:100%;" />
+            <div :class="$style.item">
+                <!-- <div :class="$style.title">
+                    <span>检测任务情况</span>
+                </div> -->
+                <div id="task" style="min-width: 300px; height: 100%"></div>
+            </div>
+            <dv-decoration-2 :reverse="true" :dur="10" style="width:5px;height:100%;" />
+            <div :class="$style.item">
+                <dv-scroll-board
+                    v-if="tableData.data && tableData.data.length"
+                    :config="tableData"
+                    style="width: 100%; height: 100%"
+                />
+            </div>
+        </div>
+        <dv-decoration-10 :dur="15"/>
+    </div>
+</template>
+<script>
+    import echarts from 'echarts'
+    import { acceptOption, taskOption } from '../data'
+    export default {
+        name: 'topBar',
+        props: {
+            info: {
+                type: Object,
+                default: {}
+            }
+        },
+        components: {},
+        watch: {
+            info: {
+                handler() {
+                    this.init()
+                },
+                deep: true
+            }
+        },
+        data() {
+            return {
+                tableData: {}
+            }
+        },
+        created() {
+            // this.init()
+        },
+        mounted() {
+            this.init()
+        },
+        methods: {
+            init() {
+                const accept = echarts.init(document.getElementById('accept'))
+                const task = echarts.init(document.getElementById('task'))
+                
+                // 设置图表数据
+                acceptOption.series[0].data = this.info.acceptData
+                taskOption.series[0].data = this.info.taskData
+                this.tableData = JSON.parse(JSON.stringify(this.info.tableData))
+
+                //渲染
+                accept.setOption(acceptOption)
+                task.setOption(taskOption)
+            }
+        }
+    }
+</script>
+<style lang="scss" module>
+    .chart_box {
+        position: relative;
+        display: flex;
+        justify-content: space-between;
+        width: 100%;
+        height: 100%;
+        .item {
+            width: 24%;
+            height: 100%;
+            background-color: rgba(6, 30, 93, 0.5);
+            &:last-child {
+                width: 49%;
+            }
+        }
+    }
+    :global {
+        #middle-card {
+            width: 96%;
+            height: calc((100% - 240px) / 2);
+            padding: 0 2%;
+            margin: 15px 0 30px;
+            .dv-decoration-10 {
+                width: 100%;
+                margin: 12px 0;
+                height: 5px;
+            }
+        }
+    }
+</style>

src/views/system/jbdHome/board/component/topBar.vue

@@ -0,0 +1,165 @@
+<template>
+    <div id="top-bar">
+        <div :class="$style.bar">
+            <div
+                v-for="(item, index) in topBarData"
+                :key="index"
+                :class="$style.item"
+            >
+                <div :class="$style.title">{{ item.title }}</div>
+                <div
+                    v-for="(v, i) in item.children"
+                    :key="i"
+                    :class="$style.box"
+                >
+                    <div :class="$style.label">{{ v.label }}</div>
+                    <div :class="$style.count">
+                        <dv-digital-flop
+                            :config="v.data"
+                            :class="$style.flop"
+                        />
+                        <div :class="$style.unit">{{ v.unit }}</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <dv-decoration-10 />
+    </div>
+</template>
+<script>
+    export default {
+        name: 'topBar',
+        props: {
+            info: {
+                type: Array,
+                default: []
+            }
+        },
+        components: {},
+        watch: {
+            info(v) {
+                console.log(v)
+                this.update()
+            }
+        },
+        data() {
+            return {
+                topBarData: [],
+                fontColor: [
+                    '#d20962',
+                    '#f47721',
+                    '#7ac143',
+                    '#00a78e',
+                    '#00bce4',
+                    '#7d3f98',
+                    '#037ef3',
+                    '#f85a40',
+                    '#00c16e',
+                    '#ffd900',
+                    '#0cb9c1',
+                    '#7552cc'
+                ]
+            }
+        },
+        created() {
+            this.update()
+        },
+        methods: {
+            //随机颜色
+            getRandom(minNum, maxNum) {
+                if (arguments.length === 1) {
+                    return parseInt(Math.random() * minNum + 1, 10)
+                } else {
+                    return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10)
+                }
+            },
+            // 数据更新
+            update() {
+                this.info.forEach(item => {
+                    item.children.forEach(i => {
+                        i.data = {
+                            number: [i.value],
+                            content: '{nt}',
+                            textAlign: 'right',
+                            style: {
+                                fill: this.fontColor[this.getRandom(0, 11)],
+                                fontWeight: 'bold'
+                            }
+                        }
+                        i.unit = '件'
+                    })
+                })
+                this.topBarData = JSON.parse(JSON.stringify(this.info))
+            }
+        }
+    }
+</script>
+<style lang="scss" module>
+    .bar {
+        position: relative;
+        height: 90%;
+        margin: 20px 2%;
+        display: flex;
+        // flex-shrink: 0;
+        justify-content: space-between;
+        align-items: center;
+        background-color: rgba(6, 30, 93, 0.5);
+        .item {
+            width: 20%;
+            // width: calc(100% / 13);
+            height: 60%;
+            padding: 12px 20px;
+            border-left: 5px solid rgb(6, 30, 93);
+            &:first-child{
+                width: 33.3%;
+                .box{
+                    width: 20%;
+                }
+            }
+            &:last-child{
+                width: 26.6%;
+                .box{
+                    width: 25%;
+                }
+            }
+            .title {
+                text-align: center;
+                font-size: 18px;
+                font-weight: bold;
+                margin-bottom: 20px;
+            }
+            .box{
+                display: inline-block;
+                width: 33%;
+                .label{
+                    text-align: center;
+                    font-size: 14px;
+                }
+                .count {
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    .flop {
+                        width: 60px;
+                        height: 40px;
+                        font-size: 18px;
+                    }
+                    .unit {
+                        margin-left: 10px;
+                        box-sizing: border-box;
+                    }
+                }
+            }
+        }
+    }
+    :global {
+        #top-bar{
+            height: 150px;
+        }
+        .dv-decoration-10 {
+            width: 96%;
+            margin: -7px 2% 0;
+            height: 5px;
+        }
+    }
+</style>

src/views/system/jbdHome/board/data.js

@@ -0,0 +1,594 @@
+import echarts from "echarts"
+
+export const acceptOption = {
+    // 图表标题
+    title: {
+        show: true,
+        text: '检测受理类型',
+        textStyle: {
+            color: '#fff',
+            fontSize: 20,
+            fontWeight: '600'
+        },
+        textAlign: 'center',
+        left: '50%',
+        top: '20px'
+    },
+    xAxis: {
+        type: 'category',
+        data: ['理化', '微生物', '细胞活率', '残留检测', '细胞鉴别'],
+        axisTick: {
+            alignWithLabel: true
+        },
+        axisLabel: {
+            style: {
+                fill: '#fff'
+            },
+            formatter: function (params) {
+                let result = ''
+                //一行显示几个字
+                let rowMax = 2
+                let rowNumber = Math.ceil(params.length / rowMax)
+                // 超过 3 个字换行
+                if (params.length > 3) {
+                    for (let p = 0; p < rowNumber; p++) {
+                        let tempStr = ''
+                        let start = p * rowMax
+                        let end = start + rowMax
+                        if (p == rowNumber - 1) {
+                            tempStr = params.substring(start, params.length);
+                        } else {
+                            tempStr = params.substring(start, end) + '\n'
+                        }
+                        result += tempStr
+                    }
+    
+                } else {
+                    result = params
+                }
+                return result
+            }
+        },
+        axisLine: {
+            lineStyle: {
+                color: '#fff'
+            }
+        }
+        // axisLabel: {
+        //     inside: true,
+        //     color: "#000",
+        // },
+        // axisTick: {
+        //     show: true,
+        // },
+        // axisLine: {
+        //     show: true,
+        // },
+        // z: 10
+    },
+    yAxis: {
+        type: 'value',
+        name: '',
+        nameTextStyle: {
+            color: '#fff',
+            fontSize: 14
+        },
+        splitLine: {
+            show: false
+        },
+        axisLine: {
+            lineStyle: {
+                color: '#fff'
+            }
+        }
+    },
+    series: [{
+        type: 'bar',
+        name: '',
+        data: [],
+        barMaxWidth: '35px',
+        itemStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: "#83bff6" },
+                { offset: 0.5, color: "#188df0" },
+                { offset: 1, color: "#188df0" },
+            ])
+        },
+        emphasis: {
+            itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    { offset: 0, color: "#2378f7" },
+                    { offset: 0.7, color: "#2378f7" },
+                    { offset: 1, color: "#83bff6" },
+                ])
+            }
+        }
+    }],
+    tooltip: {
+        show: true,
+        trigger: 'axis'
+    }
+}
+
+export const taskOption = {
+    // 图表标题
+    title: {
+        show: true,
+        text: '检测任务情况',
+        textStyle: {
+            color: '#fff',
+            fontSize: 20,
+            fontWeight: '600'
+        },
+        textAlign: 'center',
+        left: '50%',
+        top: '20px'
+    },
+    xAxis: {
+        type: 'category',
+        data: ['委托', '任务分配', '检测', '报告'],
+        axisTick: {
+            alignWithLabel: true
+        },
+        axisLabel: {
+            style: {
+                fill: '#fff'
+            }
+        },
+        axisLine: {
+            lineStyle: {
+                color: '#fff'
+            }
+        }
+    },
+    yAxis: {
+        type: 'value',
+        name: '',
+        nameTextStyle: {
+            color: '#fff',
+            fontSize: 14
+        },
+        splitLine: {
+            show: false
+        },
+        axisLine: {
+            lineStyle: {
+                color: '#fff'
+            }
+        }
+    },
+    series: [{
+        type: 'bar',
+        name: '',
+        data: [],
+        barMaxWidth: '35px',
+        itemStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: "#83bff6" },
+                { offset: 0.5, color: "#188df0" },
+                { offset: 1, color: "#188df0" },
+            ])
+        },
+        emphasis: {
+            itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    { offset: 0, color: "#2378f7" },
+                    { offset: 0.7, color: "#2378f7" },
+                    { offset: 1, color: "#83bff6" },
+                ])
+            }
+        }
+    }],
+    tooltip: {
+        show: true,
+        trigger: 'axis'
+    }
+}
+
+export const trustOption = {
+    legend: {
+        data: [
+            {
+                name: '委托',
+                itemStyle: {
+                    color: '#00baff'
+                }
+            },
+            {
+                name: '受理',
+                itemStyle: {
+                    color: '#f5d94e'
+                }
+            }
+        ],
+        textStyle: {
+            color: '#fff',
+        },
+        bottom: 10
+    },
+    title: {
+        show: true,
+        text: '检测委托受理量',
+        textStyle: {
+            color: '#fff',
+            fontSize: 20,
+            fontWeight: '600'
+        },
+        textAlign: 'center',
+        left: '50%',
+        top: '20px'
+    },
+    xAxis: {
+        type: 'category',
+        data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+        axisTick: {
+            alignWithLabel: true
+        },
+        axisLabel: {
+            style: {
+                fill: '#fff'
+            }
+        },
+        axisLine: {
+            lineStyle: {
+                color: '#fff'
+            }
+        }
+    },
+    yAxis: {
+        type: 'value',
+        name: '',
+        nameTextStyle: {
+            color: '#fff',
+            fontSize: 14
+        },
+        splitLine: {
+            show: false
+        },
+        axisLabel: {
+            style: {
+                fill: '#fff'
+            }
+        },
+        axisLine: {
+            lineStyle: {
+                color: '#fff'
+            }
+        }
+    },
+    series: [
+        {
+            type: 'bar',
+            name: '委托',
+            data: [],
+            barMaxWidth: '35px',
+            barStyle: {
+                fill: 'rgba(0, 186, 255, 0.4)'
+            },
+            itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    { offset: 0, color: "#83bff6" },
+                    { offset: 0.5, color: "#188df0" },
+                    { offset: 1, color: "#188df0" },
+                ])
+            },
+            emphasis: {
+                itemStyle: {
+                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        { offset: 0, color: "#2378f7" },
+                        { offset: 0.7, color: "#2378f7" },
+                        { offset: 1, color: "#83bff6" },
+                    ])
+                }
+            }
+        },
+        {
+            type: 'line',
+            name: '受理',
+            data: [],
+            symbol: 'circle',
+            symbolSize: 10,
+            lineArea: {
+                show: true,
+                gradient: ['rgba(245, 217, 79, 0.8)', 'rgba(245, 217, 79, 0.2)']
+            },
+            itemStyle: {
+                color: '#f5d94e'
+            }
+        }
+        
+    ],
+    tooltip: {
+        show: true,
+        trigger: 'axis'
+    }
+}
+
+export const sampleOption = {
+    title: {
+        show: true,
+        text: '样品受理情况',
+        textStyle: {
+            color: '#fff',
+            fontSize: 20,
+            fontWeight: '600'
+        },
+        textAlign: 'center',
+        left: '50%',
+        top: '20px'
+    },
+    xAxis: {
+        type: 'category',
+        data: ['已委托未收样', '已收样', '已收不合格', '留样'],
+        axisTick: {
+            alignWithLabel: true
+        },
+        axisLabel: {
+            style: {
+                fill: '#fff'
+            },
+            formatter: function (params) {
+                let result = ''
+                //一行显示几个字
+                let rowMax = 3
+                let rowNumber = Math.ceil(params.length / rowMax)
+                if (params.length > rowMax) {
+                    for (let p = 0; p < rowNumber; p++) {
+                        let tempStr = ''
+                        let start = p * rowMax
+                        let end = start + rowMax
+                        if (p == rowNumber - 1) {
+                            tempStr = params.substring(start, params.length);
+                        } else {
+                            tempStr = params.substring(start, end) + '\n'
+                        }
+                        result += tempStr
+                    }
+    
+                } else {
+                    result = params
+                }
+                return result
+            }
+        },
+        axisLine: {
+            lineStyle: {
+                color: '#fff'
+            }
+        }
+    },
+    yAxis: {
+        type: 'value',
+        name: '',
+        nameTextStyle: {
+            color: '#fff',
+            fontSize: 14
+        },
+        splitLine: {
+            show: false
+        },
+        axisLine: {
+            lineStyle: {
+                color: '#fff'
+            }
+        }
+    },
+    series: [{
+        type: 'bar',
+        name: '',
+        data: [],
+        barMaxWidth: '35px',
+        itemStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: "#83bff6" },
+                { offset: 0.5, color: "#188df0" },
+                { offset: 1, color: "#188df0" },
+            ])
+        },
+        emphasis: {
+            itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    { offset: 0, color: "#2378f7" },
+                    { offset: 0.7, color: "#2378f7" },
+                    { offset: 1, color: "#83bff6" },
+                ])
+            }
+        }
+    }],
+    tooltip: {
+        show: true,
+        trigger: 'axis'
+    }
+}
+
+export const monthOption = {
+    legend: {
+        data: [
+            {
+                name: '任务总数',
+                itemStyle: {
+                    color: '#00baff'
+                }
+            },
+            {
+                name: '已完成',
+                itemStyle: {
+                    color: '#f5d94e'
+                }
+            }
+        ],
+        textStyle: {
+            color: '#fff',
+        },
+        bottom: 10
+    },
+    title: {
+        show: true,
+        text: '检测任务月度完成量',
+        textStyle: {
+            color: '#fff',
+            fontSize: 20,
+            fontWeight: '600'
+        },
+        textAlign: 'center',
+        left: '50%',
+        top: '20px'
+    },
+    xAxis: {
+        type: 'category',
+        data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+        axisTick: {
+            alignWithLabel: true
+        },
+        axisLabel: {
+            style: {
+                fill: '#fff'
+            }
+        },
+        axisLine: {
+            lineStyle: {
+                color: '#fff'
+            }
+        }
+    },
+    yAxis: {
+        type: 'value',
+        name: '',
+        nameTextStyle: {
+            color: '#fff',
+            fontSize: 14
+        },
+        splitLine: {
+            show: false
+        },
+        axisLabel: {
+            style: {
+                fill: '#fff'
+            }
+        },
+        axisLine: {
+            lineStyle: {
+                color: '#fff'
+            }
+        }
+    },
+    series: [
+        {
+            type: 'bar',
+            name: '任务总数',
+            data: [],
+            barMaxWidth: '35px',
+            barStyle: {
+                fill: 'rgba(0, 186, 255, 0.4)'
+            },
+            itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    { offset: 0, color: "#83bff6" },
+                    { offset: 0.5, color: "#188df0" },
+                    { offset: 1, color: "#188df0" },
+                ])
+            },
+            emphasis: {
+                itemStyle: {
+                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        { offset: 0, color: "#2378f7" },
+                        { offset: 0.7, color: "#2378f7" },
+                        { offset: 1, color: "#83bff6" },
+                    ])
+                }
+            }
+        },
+        {
+            type: 'line',
+            name: '已完成',
+            data: [],
+            symbol: 'circle',
+            symbolSize: 10,
+            lineArea: {
+                show: true,
+                gradient: ['rgba(245, 217, 79, 0.8)', 'rgba(245, 217, 79, 0.2)']
+            },
+            itemStyle: {
+                color: '#f5d94e'
+            }
+        }
+        
+    ],
+    tooltip: {
+        show: true,
+        trigger: 'axis'
+    }
+}
+
+export const yearOption = {
+    title: {
+        show: true,
+        text: '检测任务年度完成量',
+        textStyle: {
+            color: '#fff',
+            fontSize: 20,
+            fontWeight: '600'
+        },
+        textAlign: 'center',
+        left: '50%',
+        top: '20px'
+    },
+    legend: {
+        orient: 'horizontal',
+        show: true,
+        left: 'center',
+        bottom: 10,
+        z: 3,
+        itemWidth: 25,
+        itemHeight: 14,
+        itemGap: 10,
+        data: [
+            {
+                name: '未完成',
+                textStyle: {
+                    color: '#ff6347'
+                }
+            },
+            {
+                name: '已完成',
+                textStyle: {
+                    color: '#3f3'
+                }
+            }
+        ]
+    },
+    series: [
+        {
+            name: '任务完成情况',
+            type: 'pie',
+            radius: '55%',
+            center: ['50%', '50%'],
+            data: [],
+            itemStyle: {
+                emphasis: {
+                    shadowBlur: 10,
+                    shadowOffsetX: 0,
+                    shadowColor: 'rgba(0, 0, 0, 0.5)'
+                },
+                normal: {
+                    label: {
+                        show: true,
+                        position: 'outer',
+                        formatter: `占比：{d}%\n\n\r{b}:{c}`,
+                        // formatter: `{b}:{c}\n\n\r占比：{d}%`,
+                        fontSize: 12
+                    },
+                    labelLine: {
+                        show: true
+                    }
+                }
+            }
+        }
+    ],
+    color: ['#ff6347', '#3f3'],
+    tooltip: {
+        show: true,
+        trigger: 'item',
+        formatter: '任务情况<br/>{b}：{c}<br/>占比：{d}%'
+    }
+}

src/views/system/jbdScan/goods/manualConfirmation.vue

@@ -45,7 +45,7 @@
                          <el-table-column
                            prop="shou_yang_shu_lia"
                            label="收样数量"
-                           width="100px">
+                           width="130px">
                          </el-table-column>
 
                          <el-table-column

src/views/system/jbdScan/goods/sampleConfirmation.vue

@@ -44,7 +44,7 @@
                          <el-table-column
                            prop="shou_yang_shu_lia"
                            label="收样数量"
-                           width="100px">
+                           width="130px">
                          </el-table-column>
 
                          <el-table-column

src/views/system/login/login-info.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="login-info text-white animated fadeInLeft">
-      <el-divider content-position="center"> <h1 class="login-info-title">明鉴实验室信息管理系统</h1></el-divider>
+      <el-divider content-position="center"> <h1 class="login-info-title">明鉴细胞检测实验室信息管理系统</h1></el-divider>
    <!-- <ul class="login-info-list">
       <li class="login-info-item">
         <i class="el-icon-check" /> 集成实验室资源管理、质量管理、检测流程管理等子系统

src/views/system/login/page.vue

@@ -1,49 +1,98 @@
 <template>
-  <div class="jbd-login-page-bg">
-    <el-container class="login-container" @keyup.enter="handleLogin" >
-        <el-header style="width: 100%">
-            <!-- <div style="width: 100%; height: 93px; text-align: center; position: relative; top: 10%; overflow: hidden">
+    <div class="jbd-login-page-bg">
+        <div class="official">
+            <a href="https://www.mingjiantech.com" target="_blank">官网首页</a>
+        </div>
+        <el-container class="login-container" @keyup.enter="handleLogin">
+            <!-- <el-header style="width: 100%">
+             <div style="width: 100%; height: 93px; text-align: center; position: relative; top: 10%; overflow: hidden">
                 <h1 class="login-info-title" style="font-size: 40px; color: #a73a3a">明鉴实验室信息管理系统</h1>
-            </div> -->
-        </el-header>
+            </div>
+        </el-header> -->
 
-        <el-main style="width: 80%; height: 100%; margin-top: 60px; overflow: hidden; border: 0px">
-            <div class="login-border">
-<!--                <div class="animated fadeIn jbd-login-page-main-img"></div> -->
+            <el-main
+                style="width: 80%; height: 100%; overflow: hidden; border: 0px"
+            >
+                <div class="login-border">
+                    <!--                <div class="animated fadeIn jbd-login-page-main-img"></div> -->
 
-                <div class="login-main animated fadeIn jbd-login-page-main">
-                    <h3>
+                    <div class="login-main animated fadeIn jbd-login-page-main">
+                        <!-- <h3> -->
                         <!-- <span>{{ $t('login.userLogin') }}</span> -->
-
-                        <ibps-api-base-url-controller v-if="$nodeEnv === 'development'">
-                            <el-tooltip effect="dark" :content="$t('navbar.switchEnvironment')" placement="bottom">
-                                <el-button type="text" class="ibps-fr ibps-mr-5 btn-text can-hover">
-                                    <ibps-icon name="wifi" style="font-size: 18px" />
+                        <div
+                            class="logo-box"
+                            style="width: 100%; margin: -0.0625rem"
+                        >
+                            <p>
+                                <img
+                                    src="../../../assets/images/login/bg.png"
+                                    style="
+                                        height: 80px;
+                                        width: 387px;
+                                        background-size: 100% 100%;
+                                    "
+                                />
+                            </p>
+                            <p class="txt">
+                                欢迎登陆·明鉴细胞检测实验室信息管理系统
+                            </p>
+                        </div>
+                        <ibps-api-base-url-controller
+                            v-if="$nodeEnv === 'development'"
+                        >
+                            <el-tooltip
+                                effect="dark"
+                                :content="$t('navbar.switchEnvironment')"
+                                placement="bottom"
+                            >
+                                <el-button
+                                    type="text"
+                                    class="ibps-fr ibps-mr-5 btn-text can-hover"
+                                >
+                                    <ibps-icon
+                                        name="wifi"
+                                        style="font-size: 18px"
+                                    />
                                 </el-button>
                             </el-tooltip>
                         </ibps-api-base-url-controller>
-                    </h3>
-                    <user-login />
-                    <login-bottom />
+                        <!-- </h3> -->
+                        <user-login />
+                        <login-bottom />
+                    </div>
                 </div>
-            </div>
-        </el-main>
-                <el-footer style="width: 80%">
-                    <div class="footer">
-                        <!-- <p>
+            </el-main>
+
+            <!-- <span style="text-align: center;"> <a href="https://www.mingjiantech.com" target="_blank">>>返回首页</a></span> -->
+            <el-footer style="width: 100%">
+                <div class="footer">
+                    <!-- <p>
                             <i style="margin-left: 50px;" class="el-icon-office-building"/> 深圳市明鉴细胞专业技术有限公司
                           <i style="margin-left: 20px;" class="el-icon-location-information"/> 深圳市南山区科技园高新北区源兴科技大厦东座303
                           <i style="margin-left: 20px;" class="el-icon-phone"/> 400-9919-863
                           <i style="margin-left: 20px;" class="el-icon-message"/> services@mingjiantech.com
                           <i class="el-icon-s-platform" /> 深圳市金源信通科技有限公司开发
                         </p> -->
-                          <span>深圳市明鉴细胞专业技术有限公司 | <a href="https://beian.miit.gov.cn" target="_blank">粤ICP备2022077950号|</a></span>
-                          <span class="dev"><i class="el-icon-s-platform" /> 深圳市金源信通科技有限公司开发</span>
-                    </div>
-                </el-footer>
-            </el-container>
-</div>
-
+                    <hr />
+                    <span style="display: flex; justify-content: space-between">
+                        <a
+                            ><i class="el-icon-s-platform" />
+                            深圳市金源信通科技有限公司开发</a
+                        >
+                        <a href="https://beian.miit.gov.cn" target="_blank"
+                            >粤ICP备2022077950号</a
+                        >
+                        <a></a>
+                        <!-- <a
+                            href="https://www.mingjiantech.com"
+                            style="text-align: right"
+                            >官网首页&nbsp;&nbsp;&nbsp;&nbsp;</a
+                        > -->
+                    </span>
+                </div>
+            </el-footer>
+        </el-container>
+    </div>
 </template>
 <script>
 import '@/assets/styles/pages/login.scss'
@@ -73,35 +122,63 @@ export default {
 }
 </script>
 <style lang="scss">
-.jbd-login-page-bg{
-    margin-top:0px;
+.jbd-login-page-bg {
+    margin-top: 0px;
     height: 100%;
     width: 100%;
-    background-image: url("../../../assets/images/login/MJ02.jpg");
-    background-repeat:no-repeat;
-    background-size:100% ;
-
-
-  }
+    background-color: #f0f3f5;
+    //background-image: url("../../../assets/images/login/MJ02.jpg");
+    //background-repeat:no-repeat;
+    //background-size:100% ;
+}
 
 .jbd-login-page-main {
-    margin-top: 140px;
-    margin-right: 40%;
+    //margin-top: 140px;
+    //margin-right: 40%;
     margin-bottom: 20px;
-    box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1);
+    //box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1);
     padding: 30px;
-    height: 300px;
-    width: 300px;
-    background-image: url('../../../assets/images/login/03.png');
-    background-size:95% ;
+    height: 400px;
+    width: 460px;
+    //background-image: url('../../../assets/images/login/03.png');
+    background-size: 100%;
     background-repeat: no-repeat;
-    border-radius: 5%;
-    box-sizing: border-box;
+    //border-radius: 5%;
+    //box-sizing: border-box;
     // border: solid black;
 
-    opacity:0.9;
+    //opacity:0.9;
+}
+
+.logo-box {
+    width: 460px;
+    height: 120px;
+    margin: 0;
+    //margin: 150px auto;
+    position: relative;
+}
+
+.txt {
+    font-family: '微软雅黑';
+    font-size: 20px;
+    line-height: 24px;
+    font-weight: bold;
+    color: grey;
+    text-align: center;
+}
+
+.backindex {
+    text-align: right;
+    padding-right: 45px;
 }
 
+.backindexText {
+    font-family: '微软雅黑';
+    font-size: 16px;
+    line-height: 16px;
+    font-weight: bold;
+    color: #a73a3a;
+}
 
 // .jbd-login-page-main-img {
 //     /* box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); */
@@ -117,8 +194,21 @@ export default {
 .footer {
     font-size: 12px;
     text-align: center;
+
+    a {
+        // color: #000;
+        width: 200px;
+        color: #8c92a4;
+    }
+}
+
+.official {
+    margin-left: 10px;
+    font-size: 26px;
+    font-weight: bold;
     a {
-        color: #000;
+        // color: #8c92a4;
+        color: black;
     }
 }
 </style>

src/views/system/login/user-login.vue

@@ -5,7 +5,7 @@
       </br>
     <el-form-item label="账号" style="font-weight: 1000;font-family: arial black;" prop="username" >
       <el-input v-model="loginForm.username" :placeholder="$t('login.username')" tabindex="1" auto-complete="on" prefix-icon="ibps-icon-user" @keyup.enter.native="handleLogin"
-      style="width:75%;"/>
+      style="width:100%;"/>
     </el-form-item>
     <el-tooltip v-model="capsTooltip" :content="$t('login.capsTooltip')" placement="right" manual>
       <el-form-item label="密码" style="font-weight: 1000;font-family: arial black;" prop="password">
@@ -18,7 +18,7 @@
           prefix-icon="ibps-icon-lock"
           @keyup.native="checkCapslock"
           @blur="capsTooltip = false"
-           style="width: 75%;"
+           style="width: 100%;"
           @keyup.enter.native="handleLogin"
         >
           <i slot="suffix" :class="passwordType==='password'?'ibps-icon-eye-slash':'ibps-icon-eye'" class=" el-input__icon" @click="showPassword" />
@@ -38,10 +38,10 @@
         </el-col>
       </el-row>
     </el-form-item>
-    <el-form-item prop="remember">
+    <el-form-item prop="remember" class="remember">
       <el-row :span="24">
         <el-col :span="14">
-          <el-checkbox v-model="loginForm.remember">{{ $t('login.remember') }}</el-checkbox>
+          <el-checkbox class="remember" v-model="loginForm.remember" >{{ $t('login.remember') }}</el-checkbox>
         </el-col>
         <el-col v-if="isRegOpen || isTenantOpen" :span="10">
           <el-button v-if="!isTenantOpen" type="text" class="forget" @click="forget">{{ $t('login.forget') }}</el-button>
@@ -314,3 +314,21 @@ export default {
   }
 }
 </script>
+<style scoped>
+  ::v-deep .remember .el-checkbox__input.is-checked .el-checkbox__inner, .remember .el-checkbox__input.is-indeterminate .el-checkbox__inner{
+  background-color: rgb(180,35,41);
+  border-color:rgb(180,35,41);
+  }
+  ::v-deep  .remember .el-checkbox__input.is-checked+.el-checkbox__label {
+  color: rgb(180,35,41);
+  }
+  ::v-deep  .login-submit {
+  background-color: rgb(180,35,41);
+  }
+  ::v-deep .login-submit:hover {
+   background-color: rgb(180,35,41);
+  }
+  ::v-deep .el-button--primary {
+    border-color: rgb(180,35,41);
+  }
+</style>

src/views/warehouse/cangku.vue

@@ -2,7 +2,7 @@
   <div class="sample-content">
     <!-- 表格組件 -->
     <div class="top-content">
-      <div class="top-title">仓库可视化</div>
+      <div class="top-title">库存可视化</div>
       <div class="query-content">
         <el-form :inline="true" :model="formInline" class="demo-form-inline">
           <el-form-item label="仓库名称：">
@@ -74,31 +74,33 @@
           <div class="show-demo" v-for="(item, index) in listData" :key="index">
             <div>
               <div class="goods-level">
-                <div class="level-dsc">第{{ index }}层</div>
+                <div class="level-dsc">第{{ index | indexfilter(listData) }}层</div>
                 <div class="goods-list">
                   <div
                     v-for="(it, index) in listData[index]"
                     :key="index"
                     class="goods-dsc"
                     :style="{
-                      background: it.zhuang_tai_ == '空余' ? '' : '#67c23a',
+                      background: it.cun_fang_wei_zhi_ == '空' ? '' : '#67c23a',
                     }"
                   >
                     <div class="top-dsc">
                       <div class="position">
-                        <p>位置：{{ it.wei_zhi_ }}</p>
-                        <p>类型:{{ it.lei_xing_ }}</p>
-                        <p>编号：{{ it.wu_pin_bian_hao | bian_hao_Filters }}</p>
+                        <p>名称：{{ it.wu_liao_ming_chen }}</p>
+                        <p>编码：{{ it.wu_liao_bian_ma_ || "空" }}</p>
+                        <p>位置：{{ it.cun_fang_wei_zhi_ || "空" }}</p>
+                        <p>货号:{{ it.huo_hao_ || "空" }}</p>
                       </div>
                       <div class="right-content">
-                        <p>存储条件:{{ it.cun_chu_tiao_jian }}</p>
-                        <p>有效期:{{ it.you_xiao_qi_ }}</p>
-                        <p>批号:{{ it.pi_hao_ }}</p>
+                        <p>入库批号:{{ it.ru_ku_pi_hao_ || "空" }}</p>
+                        <p>存储条件:{{ it.cun_chu_yao_qiu_ || "空" }}</p>
+                        <p>有效期:{{ it.you_xiao_qi_ || "空" }}</p>
+                        <p>库存量：{{ it.ku_cun_liang_ || "空" }}</p>
                       </div>
                       <!-- <div class="condition">{{ it.cun_chu_tiao_jian }}</div> -->
                     </div>
                     <div class="bottom-dsc">
-                      {{ it.wu_pin_ming_cheng | specimenFilters }}
+                      <!-- {{ it.wu_pin_ming_cheng | specimenFilters }} -->
                     </div>
                   </div>
                 </div>
@@ -116,6 +118,19 @@
 
 <script>
 import curdPost from "@/business/platform/form/utils/custom/joinCURD.js";
+// import curdPost from "@/business/platform/form/utils/custom/joinCURD.js";
+/*
+[
+  1:{  //第一层
+  1: {[{item:1},{item2:2}]} //第一个区域
+  2:{[{item:1},{item2:2}]} //第二个区域
+  },
+  2:{  //第二层
+   1：{[{item:1},{item2:2}]} //第一个区域
+   2：{[{item:1},{item2:2}]} //第二个区域
+  }
+]
+*/
 export default {
   data() {
     return {
@@ -148,6 +163,17 @@ export default {
     };
   },
   filters: {
+    indexfilter: function (value,data) {
+      console.log(value,data)
+      if (data[0]) {
+        return value + 1;
+      } else {
+        return value;
+      }
+    },
+    laySlice: function (value) {
+      return value.split("-")[2];
+    },
     freezerFilters: function (value) {
       if (value.includes("冷藏柜")) {
         return value.replace("冷藏柜", "冰箱");
@@ -175,7 +201,7 @@ export default {
   mounted() {
     this.loadQueryData();
     this.firstLoadViewData();
-    this.firstLoadQuyu("耗材库");
+    this.firstLoadQuyu("试剂库1");
   },
   methods: {
     firstLoadQuyu(cang_ku) {
@@ -189,14 +215,32 @@ export default {
       });
     },
     firstLoadViewData() {
-      //首次加载视图数据 默认中心仓库 耗材区
-      this.formInline.cang_ku_ming_chen_value = "耗材库";
-      this.formInline.qu_yu_value = "1号 货架";
+      //首次加载视图数据 默认中心仓库 耗材区   
+      this.formInline.cang_ku_ming_chen_value = "试剂库1";
+      this.formInline.qu_yu_value = "1号试剂柜";
       this.selectActive = 1;
       this.firstLoadActive = true;
-      this.quyuShow = "1号 货架";
-      var sqlString = `select * from t_ck where cang_ku_ming_chen = '${this.formInline.cang_ku_ming_chen_value}' and qu_yu_ = '${this.formInline.qu_yu_value}'`;
-      this.queryLoad(sqlString);
+      this.quyuShow = "1号试剂柜";
+      var sqlString =
+        "select * from t_mjwlgl where cun_fang_wei_zhi_ like" +
+        "'%" +
+        "SJG1" +
+        "%'";
+      this.queryLoad(sqlString, "SJG1");
+    },
+    sqlSlice(value) {
+      // let py = value.split("号")[1];
+
+      switch (value) {
+        case "货架":
+          return "HJ";
+        case "试剂柜":
+          return "SJG";
+        case "冰箱":
+          return "BX";
+        default:
+          "";
+      }
     },
     loadQueryData() {
       //查询选择仓库数据查询
@@ -214,35 +258,101 @@ export default {
     onSubmits() {
       this.desShow = false;
       //头部按钮查询事
-      var sqlString = `select * from t_ck where cang_ku_ming_chen = '${this.formInline.cang_ku_ming_chen_value}' and qu_yu_ = '${this.formInline.qu_yu_value}'`;
-      this.queryLoad(sqlString);
+      // var sqlString = `select * from t_mjwlgl where cang_ku_ming_chen = '${this.formInline.cang_ku_ming_chen_value}' and qu_yu_ = '${this.formInline.qu_yu_value}'`;
+      let py = this.formInline.qu_yu_value.split("号")[1].replace(/^\s*/g, "");
+      let num = this.formInline.qu_yu_value.split("号")[0];
+      let quyu = this.sqlSlice(py);
+      let type = (quyu + num).replace(/^\s*/g, "");
+      var sqlString =
+        `select * from t_mjwlgl where cun_fang_wei_zhi_ like ` +
+        "'%" +
+        type +
+        "%'";
+      console.log(sqlString);
+      this.queryLoad(sqlString, type);
     },
-    queryLoad(sql) {
+    queryLoad(sql, py) {
       var datas = [];
       this.cenghao = [];
       const labelsMap = {}; // map存储
-      curdPost("sql", sql).then((res) => {
-        datas = res.variables.data;
-        datas.forEach((item) => { 
-          if (!labelsMap[item.ceng_hao_]) {
-            labelsMap[item.ceng_hao_] = [];
+      let typeData = [];
+      var sqltype =
+        `select DISTINCT SUBSTR(wei_zhi_,1,6) as wei_zhi_ from t_ck where wei_zhi_ like ` +
+        "'%" +
+        py +
+        "%'" +
+        "ORDER BY wei_zhi_ ASC ";
+      console.log(sqltype, sql);
+      curdPost("sql", sqltype).then((res) => {
+        typeData = res.variables.data;
+        console.log(sqltype, sql);
+        curdPost("sql", sql).then((res) => {
+          datas = res.variables.data;
+          typeData.forEach((item) => {
+            let num = item.wei_zhi_.split("-")[1];
+            labelsMap[num] = [];
+          });
+          if (datas.length == 0) {
+            for (var prop in labelsMap) {
+              labelsMap[prop].push({ cun_fang_wei_zhi_: "空" });
+            }
+
+            this.listData = labelsMap;
+            return;
+          }
+          datas.forEach((item) => {
+            let props1 = item.cun_fang_wei_zhi_.split("-")[1];
+            for (var prop in labelsMap) {
+              if (labelsMap.hasOwnProperty(prop)) {
+                if (prop == props1) {
+                  labelsMap[prop].push(item);
+                }
+                if (prop != props1 && labelsMap[prop].length == 0) {
+                  labelsMap[prop].push({ cun_fang_wei_zhi_: "空" });
+                }
+              }
+            }
+          });
+
+          let newarr = [];
+          for (var prop in labelsMap) {
+            if (labelsMap.hasOwnProperty(prop)) {
+              if (labelsMap[prop].length > 1) {
+                var item = labelsMap[prop].slice(1);
+                // delete labelsMap[0]
+                console.log(item);
+                newarr.push(item);
+              } else {
+                console.log(labelsMap[prop]);
+                newarr.push(labelsMap[prop]);
+              }
+            }
           }
-          this.desString = `${item.cang_ku_ming_chen} ${item.qu_yu_}`;
-          labelsMap[item.ceng_hao_].push(item);
+          this.listData = newarr;
+          console.log(this.listData, "listData");
         });
-        this.listData = labelsMap;
-        console.log(this.listData,"listData")
       });
     },
     qu_yu_Event(e) {
+      //点击区域事件，加载可视化视图
       let value = e.target.innerText;
       if (value.includes("(")) {
         let index = value.indexOf("(");
         value = value.slice(0, index);
       }
-      let sqlString = `select * from t_ck where cang_ku_ming_chen = '${this.formInline.cang_ku_ming_chen_value}' and qu_yu_ = '${value}' `;
-      this.queryLoad(sqlString);
-      // var this_ = this;
+      let num = value.slice(0, 1);
+      console.log(value, "类型");
+      let py = value.split("号")[1].replace(/^\s*/g, "");
+      // let num = this.formInline.qu_yu_value.split("号")[0];
+      let quyu = this.sqlSlice(py);
+      let type = (quyu + num).replace(/^\s*/g, "");
+      var sqlString =
+        `select * from t_mjwlgl where cun_fang_wei_zhi_ like ` +
+        "'%" +
+        type +
+        "%'";
+      console.log(sqlString);
+      this.queryLoad(sqlString, type);
       this.formInline.qu_yu_value = value;
       this.quyuShow = value;
     },
@@ -251,8 +361,9 @@ export default {
     },
   },
   watch: {
-    //监控仓库名称变化
+    //监控仓库名称变化 触发第一次加载数据
     "formInline.cang_ku_ming_chen_value": async function (newdata) {
+      console.log(newdata);
       this.firstLoadQuyu(newdata);
     },
     "formInline.qu_yu_value": function (newdata) {