fix:监控的面板，位置组件

src/views/component/weiZhiChangGui.vue

@@ -0,0 +1,697 @@
+<template>
+  <div class="sample-content">
+    <!-- 表格組件 -->
+    <!-- <div @dblclick="clickBtn">{{ showValue }}</div> -->
+    <div @dblclick="clickBtn" style="cursor: pointer;" >
+      位置选择
+      <!-- <input placeholder="请输入内容" :value="showValue"  id="valueDom" @click="onChange"> -->
+    </div>
+    <!-- <el-input></el-input> -->
+    <div class="selectArea" v-if="ifshow">
+      <div @click="close" class="close-content">关闭</div>
+      <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.cang_ku_ming_chen_value"
+                placeholder="请选择样品"
+              >
+                <el-option
+                  v-for="(item, index) in cangkuOption"
+                  :key="index"
+                  placeholder="区域"
+                  :label="item.cang_ku_ming_chen"
+                  :value="item.cang_ku_ming_chen"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item style="margin-left: 50px" 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>
+              <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="test-quyu">
+        <div class="test-list">
+          <ul class="list-items">
+            <li
+              class="list-item quyu-item"
+              :style="{
+                background: quyuShow == item.qu_yu_ ? '#FF9900' : '#e5baba',
+              }"
+              @click="qu_yu_Event"
+              v-for="item in quyu_arr"
+              :key="item.qu_yu_"
+            >
+              <div v-if="item.qu_yu_.includes('冰箱')">
+                {{ item.qu_yu_ | freezerFilters }}({{ item.cun_chu_tiao_jian }})
+              </div>
+
+              <div v-if="!item.qu_yu_.includes('冰箱')">
+                {{ item.qu_yu_ | freezerFilters }}
+              </div>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div class="body-content">
+        <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 | indexfilter(listData) }}层 -->
+                    第{{ index }}层
+                  </div>
+                  <div class="goods-list">
+                    <div
+                      v-for="(it, index) in listData[index]"
+                      :key="index"
+                      class="goods-dsc"
+                      :style="{
+                        background:
+                          it.cun_fang_wei_zhi_ == '空' ? '' : '#67c23a',
+                      }"
+                      @click="closeView(it)"
+                    >
+                      <div class="top-dsc">
+                        <div class="position">
+                          <p>名称：{{ it.wu_liao_ming_chen || 空 }}</p>
+                          <p>编码：{{ it.wu_liao_bian_ma_ || it.wu_liao_bian_ma_ }}</p>
+                          <p>位置：{{ it.wei_zhi_ || it.cun_fang_wei_zhi_ }}</p>
+                          <p>货号:{{ it.huo_hao_ || "空" }}</p>
+                        </div>
+                        <div class="right-content">
+                          <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 }} -->
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="goodshelf-name" v-if="index == 1">
+                {{ desString }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import curdPost from "@/business/platform/form/utils/custom/joinCURD.js";
+export default {
+  data() {
+    return {
+      cangkuOption: [],
+      formInline: {
+        cang_ku_ming_chen_value: "耗材库",
+        qu_yu_value: "1号 货架",
+        huo_jia_value: "",
+      },
+      huojiaInfo: {
+        empty: "",
+        al: "",
+      },
+      listData: [],
+      desString: "",
+      warehouseOptions: [],
+      quyu_arr: [],
+      huo_jia_arr: [],
+      // qu_yu_value: "",
+      desShow: true,
+      quyuShow: "",
+      huojiashow: "",
+      firstLoadActive: "false",
+      selectActive: "",
+      cenghao: [],
+      warehouse: [],
+      loading: false,
+      pagination: {},
+      secondshow: false,
+      ifshow: false,
+      showValue: "",
+      value:"111"
+    };
+  },
+  props: {
+    field: Object,
+    formData: {
+      type: Object,
+      default() {
+        return {};
+      },
+    },
+    component_12u7eoo:{
+      type:String,
+      default(){
+        return 111
+      }
+    }
+    
+  },
+  filters: {
+    indexfilter: function (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("冷藏柜", "冰箱");
+      } else if (value.includes("冷冻柜")) {
+        return value.replace("冷冻柜", "冰箱");
+      } else {
+        return value;
+      }
+    },
+    specimenFilters: function (value) {
+      if (value == "" || value == undefined) {
+        return "未占用";
+      } else {
+        return value;
+      }
+    },
+    bian_hao_Filters: function (value) {
+      if (!value || value == undefined || value == "") {
+        return "无";
+      } else {
+        return value;
+      }
+    },
+  },
+  mounted() {
+    this.loadQueryData();
+    this.firstLoadViewData();
+    this.firstLoadQuyu("试剂库1");
+  },
+  beforeDestroy() {
+    console.log(this.formData, "formData");
+    let id = this.formData.id;
+    let Status = this.formData.anNiugTai;
+    let ming_chen = this.formInline.cang_ku_ming_chen_value;
+    let weizhi = this.showValue;
+    console.log(weizhi, ming_chen);
+    return
+    if (weizhi !="" &&Status =="已入库") {
+      // 数据库更新
+      curdPost(
+        "update",
+        '{"tableName":"t_mjwlgl","paramWhere":{"wai_jian_":"' +
+          id +
+          '",},"paramCond":{"cang_ku_ming_chen":"' +
+          ming_chen +
+          '","cun_fang_wei_zhi_":"' +
+          weizhi +
+          '"}}'
+      )
+        .then((res) => {
+          this.$message({
+            message: "当前物料位置更新状态更新成功",
+            type: "success",
+          });
+        })
+        .catch((err) => {
+          console.log(err);
+        });
+    }
+  },
+  methods: {
+
+    onChange(e){
+      console.log("onChange")
+
+    },
+    closeView(value1) {
+      // let values = value[0];
+      // console.log(this.formData, "formData");
+      // console.log(value1);
+      //  this.showValue = value[0].wei_zhi_?value[0].wei_zhi_:value[0].cun_fang_wei_zhi_;
+      if (value1.wei_zhi_) {
+        this.showValue = value1.wei_zhi_;
+      } else if (value1.cun_fang_wei_zhi_) {
+        this.showValue = value1.cun_fang_wei_zhi_;
+      }
+      //  values.cun_fang_wei_zhi_;
+      // console.log(this.showValue)
+      const name = "cunFangWeiZhi"; //其他字段属性
+      const value= this.showValue; //字段的值
+      this.$emit("change-data", name, value);
+
+      const name2 = "biaoZhunZhi"; //其他字段属性
+      const value2= this.formInline.cang_ku_ming_chen_value; //字段的值
+      this.$emit("change-data", name2, value2);
+      this.ifshow = !this.ifshow;
+    },
+    close() {
+      this.ifshow = !this.ifshow;
+    },
+    firstLoadQuyu(cang_ku) {
+      let sqlString = `select distinct qu_yu_,cun_chu_tiao_jian from t_ck where cang_ku_ming_chen = '${cang_ku}' order by qu_yu_ asc`;
+      var this_ = this;
+      curdPost("sql", sqlString).then((response) => {
+        this_.quyu_arr = response.variables.data;
+        if (!this.firstLoadActive) {
+          this_.formInline.qu_yu_value = "";
+        }
+      });
+    },
+    firstLoadViewData() {
+      //首次加载视图数据 默认中心仓库 耗材区
+      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_mjwlgl where cang_ku_ming_chen = '试剂库1'  and cun_fang_wei_zhi_ like" +
+        "'%" +
+        "SJG1" +
+        "%'";
+      this.queryLoad(sqlString, "SJG1");
+    },
+    sqlSlice(value) {
+      switch (value) {
+        case "货架":
+          return "HJ";
+        case "试剂柜":
+          return "SJG";
+        case "冰箱":
+          return "BX";
+        default:
+          "";
+      }
+    },
+    loadQueryData() {
+      //查询选择仓库数据查询
+      var sqlString = "select distinct cang_ku_ming_chen from t_ck ";
+      var this_ = this;
+      curdPost("sql", sqlString).then((response) => {
+        this_.cangkuOption = response.variables.data;
+        this_.cangkuOption.forEach((item, index) => {
+          if (!item) {
+            this_.cangkuOption.splice(index, 1);
+          }
+        });
+      });
+    },
+    onSubmits() {
+      this.desShow = false;
+      //头部按钮查询事
+      // 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 cang_ku_ming_chen = '" +
+        this.formInline.cang_ku_ming_chen_value +
+        "' and cun_fang_wei_zhi_ like " +
+        "'%" +
+        type +
+        "%'";
+      this.queryLoad(sqlString, type);
+    },
+    queryLoad(sql, py) {
+      //数据加载
+      let this_ = this;
+      var datas = [];
+      this.cenghao = [];
+      const labelsMap = {}; // map存储
+      let typeData = [];
+      let typeArr = [];
+      var sqltype =
+        `select DISTINCT wei_zhi_ from t_ck where wei_zhi_ like ` +
+        "'%" +
+        py +
+        "%'" +
+        " and cang_ku_ming_chen ='" +
+        this.formInline.cang_ku_ming_chen_value +
+        "' ORDER BY wei_zhi_ ASC ";
+      let classSql =
+        `select DISTINCT SUBSTR(wei_zhi_,1,6) AS wei_zhi_  from t_ck where wei_zhi_ like ` +
+        "'%" +
+        py +
+        "%'" +
+        " and cang_ku_ming_chen ='" +
+        this.formInline.cang_ku_ming_chen_value +
+        "' ORDER BY wei_zhi_ ASC ";
+      curdPost("sql", sqltype).then((res) => {
+        typeData = res.variables.data; //查询具体仓库某个货架的所有位置
+        // console.log(typeData, "位置");
+        curdPost("sql", sql).then((res) => {
+          datas = res.variables.data; //具体仓库某个货架的所有物料数据
+          // console.log(datas, "数据");
+          typeData.forEach((item) => {
+            typeArr[item.wei_zhi_] = [];
+            if (datas.length == 0) {
+              typeArr[item.wei_zhi_].push(item);
+            } else {
+              datas.forEach((it, index) => {
+                if (item.wei_zhi_ == it.cun_fang_wei_zhi_) {
+                  typeArr[item.wei_zhi_].push(it);
+                } else if (
+                  item.wei_zhi_ != it.cun_fang_wei_zhi_ &&
+                  index == datas.length - 1
+                ) {
+                  typeArr[item.wei_zhi_].push(item);
+                }
+              });
+            }
+          });
+          // console.log(typeArr, "22222222222222");
+          curdPost("sql", classSql).then((res2) => {
+            let resData = res2.variables.data;
+            resData.forEach((item) => {
+              let layer = item.wei_zhi_;
+              layer = layer.split("-")[1];
+              labelsMap[layer] = [];
+              for (var prop in typeArr) {
+                if (typeArr.hasOwnProperty(prop)) {
+                  // console.log(prop,item.wei_zhi_);
+                  if (prop.includes(item.wei_zhi_)) {
+                    labelsMap[layer].push(...typeArr[prop]);
+                    //  console.log(labelsMap)
+                  }
+                }
+              }
+            });
+            // console.log(labelsMap, "数据");
+            this_.listData = labelsMap;
+          });
+        });
+      });
+    },
+    qu_yu_Event(e) {
+      //点击区域事件，加载可视化视\
+      console.log(this.formData, "formData");
+      let value = e.target.innerText;
+      if (value.includes("(")) {
+        let index = value.indexOf("(");
+        value = value.slice(0, index);
+      }
+      let num = value.slice(0, 1);
+      let py = value.split("号")[1].replace(/^\s*/g, "");
+      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 +
+        "%'" +
+        "  and cang_ku_ming_chen = '" +
+        this.formInline.cang_ku_ming_chen_value +
+        "'";
+      // console.log(sqlString, type);
+      this.queryLoad(sqlString, type);
+      this.formInline.qu_yu_value = value;
+      this.quyuShow = value;
+    },
+    blackEvent() {
+      this.desShow = true;
+    },
+    clickBtn() {
+      this.ifshow = !this.ifshow;
+    },
+  },
+  watch: {
+    //监控仓库名称变化 触发第一次加载数据
+    "formInline.cang_ku_ming_chen_value": async function (newdata) {
+      this.firstLoadQuyu(newdata);
+    },
+    "formInline.qu_yu_value": function (newdata) {
+      this.qu_yu_value = newdata;
+      this.quyuShow = newdata;
+      this.firstLoadActive = false;
+    },
+    // formData(val) {
+    //   // console.log(val, "watching");
+    // },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+ul {
+  margin: 0;
+}
+p {
+  padding: 0;
+  margin: 0;
+}
+.close-content {
+  position: absolute;
+  right: 100px;
+  top: 50px;
+  color: red;
+  font-size: 18px;
+}
+.sample-content {
+  cursor: pointer;
+
+  .selectArea {
+    width: 100%;
+    height: 100%;
+    overflow: scroll;
+    position: fixed;
+    top: 50px;
+    left: 50px;
+    background: white;
+    z-index: 999;
+  }
+  .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;
+    }
+  }
+  .test-quyu,
+  .huojia {
+    width: 100%;
+    .list-items {
+      display: flex;
+      cursor: pointer;
+      .wDTianjian::after {
+        content: "2-6";
+      }
+      .quyu-item {
+        border: 1px solid #a172ab;
+        background: #0099cc;
+      }
+      .huojia-item {
+        background: #99ccff;
+      }
+      .list-item {
+        padding: 4px 14px;
+        height: 30px;
+        background-color: #cec6a4;
+        text-align: center;
+        line-height: 30px;
+        margin-left: 20px;
+        margin-bottom: 6px;
+        /* margin-top: 6px; */
+        border-radius: 10px;
+        position: relative;
+        .tiaojian {
+          // position: absolute;
+          // right: 0px;
+          // top: 0px;
+          // background-color: #f56c6c;
+          // border-radius: 10px;
+          // color: #fff;
+          // display: inline-block;
+          // font-size: 12px;
+          // height: 18px;
+          // line-height: 18px;
+          // padding: 0 6px;
+          // text-align: center;
+          // white-space: nowrap;
+          // border: 1px solid #fff;
+          font-size: 12px;
+        }
+      }
+    }
+    .cangku-mingchen {
+      width: 100%;
+      text-align: left;
+      margin-left: 50px;
+    }
+  }
+  .body-content {
+    margin-bottom: 70px;
+    display: flex;
+    box-sizing: border-box;
+    height: calc(100vh - 240px);
+    overflow-x: hidden;
+    overflow-y: scroll;
+    .black {
+      position: fixed;
+      top: 300px;
+      right: 100px;
+      width: 100px;
+      height: 40px;
+      line-height: 40px;
+      text-align: center;
+      background-color: #e6a23c;
+      z-index: 99;
+    }
+    .left-table {
+      // width: 40%;
+      ::v-deep .el-table {
+        width: 40%;
+      }
+    }
+    .right-view {
+      z-index: 99;
+      width: 100%;
+      .goods-items {
+        width: 100%;
+        overflow-x: hidden;
+        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;
+          // overflow-y: scroll;
+          .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;
+            margin-right: 15px;
+            .goods-dsc {
+              cursor: pointer;
+              // width: 170px;
+              // height: 80px;
+              padding: 6px 12px;
+              border-radius: 5px;
+              background: #e6a23c;
+              margin-left: 12px;
+              margin-top: 6px;
+              //   background-color: aliceblue;
+              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 > p {
+                  margin-left: 15px;
+                  // color: #fbe8ff;
+                  text-align: left;
+                }
+                // .condition {
+                //   // color: #fbe8ff;
+                // }
+              }
+              .bottom-dsc {
+                width: 100%;
+                font-size: 18px;
+                height: 42px;
+                line-height: 60px;
+                margin-top: 20px;
+                // 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-bottom: 49px;
+          }
+          .shelf {
+            width: 100%;
+            height: 40px;
+            line-height: 40px;
+            text-align: center;
+          }
+        }
+      }
+    }
+  }
+  .body-content::-webkit-scrollbar {
+    display: none; /*隐藏滚动条*/
+  }
+}
+</style>

src/views/component/wuliaoPosition.vue

@@ -0,0 +1,697 @@
+<template>
+  <div class="sample-content">
+    <!-- 表格組件 -->
+    <!-- <div @dblclick="clickBtn">{{ showValue }}</div> -->
+    <div @dblclick="clickBtn" style="cursor: pointer;" >
+      <el-input placeholder="请输入内容1" :value="showValue"  id="valueDom"></el-input>
+    </div>
+    <!-- <el-input></el-input> -->
+    <div class="selectArea" v-if="ifshow">
+      <div @click="close" class="close-content">关闭</div>
+      <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.cang_ku_ming_chen_value"
+                placeholder="请选择样品"
+              >
+                <el-option
+                  v-for="(item, index) in cangkuOption"
+                  :key="index"
+                  placeholder="区域"
+                  :label="item.cang_ku_ming_chen"
+                  :value="item.cang_ku_ming_chen"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item style="margin-left: 50px" 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>
+              <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="test-quyu">
+        <div class="test-list">
+          <ul class="list-items">
+            <li
+              class="list-item quyu-item"
+              :style="{
+                background: quyuShow == item.qu_yu_ ? '#FF9900' : '#e5baba',
+              }"
+              @click="qu_yu_Event"
+              v-for="item in quyu_arr"
+              :key="item.qu_yu_"
+            >
+              <div v-if="item.qu_yu_.includes('冰箱')">
+                {{ item.qu_yu_ | freezerFilters }}({{ item.cun_chu_tiao_jian }})
+              </div>
+
+              <div v-if="!item.qu_yu_.includes('冰箱')">
+                {{ item.qu_yu_ | freezerFilters }}
+              </div>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div class="body-content">
+        <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 | indexfilter(listData) }}层 -->
+                    第{{ index }}层
+                  </div>
+                  <div class="goods-list">
+                    <div
+                      v-for="(it, index) in listData[index]"
+                      :key="index"
+                      class="goods-dsc"
+                      :style="{
+                        background:
+                          it.cun_fang_wei_zhi_ == '空' ? '' : '#67c23a',
+                      }"
+                      @click="closeView(it)"
+                    >
+                      <div class="top-dsc">
+                        <div class="position">
+                          <p>名称：{{ it.wu_liao_ming_chen || 空 }}</p>
+                          <p>编码：{{ it.wu_liao_bian_ma_ || it.wu_liao_bian_ma_ }}</p>
+                          <p>位置：{{ it.wei_zhi_ || it.cun_fang_wei_zhi_ }}</p>
+                          <p>货号:{{ it.huo_hao_ || "空" }}</p>
+                        </div>
+                        <div class="right-content">
+                          <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 }} -->
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="goodshelf-name" v-if="index == 1">
+                {{ desString }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import curdPost from "@/business/platform/form/utils/custom/joinCURD.js";
+export default {
+  data() {
+    return {
+      cangkuOption: [],
+      formInline: {
+        cang_ku_ming_chen_value: "耗材库",
+        qu_yu_value: "1号 货架",
+        huo_jia_value: "",
+      },
+      huojiaInfo: {
+        empty: "",
+        al: "",
+      },
+      listData: [],
+      desString: "",
+      warehouseOptions: [],
+      quyu_arr: [],
+      huo_jia_arr: [],
+      // qu_yu_value: "",
+      desShow: true,
+      quyuShow: "",
+      huojiashow: "",
+      firstLoadActive: "false",
+      selectActive: "",
+      cenghao: [],
+      warehouse: [],
+      loading: false,
+      pagination: {},
+      secondshow: false,
+      ifshow: false,
+      showValue: "",
+      value:"111"
+    };
+  },
+  props: {
+    field: Object,
+    formData: {
+      type: Object,
+      default() {
+        return {};
+      },
+    },
+  },
+  filters: {
+    indexfilter: function (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("冷藏柜", "冰箱");
+      } else if (value.includes("冷冻柜")) {
+        return value.replace("冷冻柜", "冰箱");
+      } else {
+        return value;
+      }
+    },
+    specimenFilters: function (value) {
+      if (value == "" || value == undefined) {
+        return "未占用";
+      } else {
+        return value;
+      }
+    },
+    bian_hao_Filters: function (value) {
+      if (!value || value == undefined || value == "") {
+        return "无";
+      } else {
+        return value;
+      }
+    },
+  },
+  mounted() {
+    this.loadQueryData();
+    this.firstLoadViewData();
+    this.firstLoadQuyu("试剂库1");
+    console.log(this.formData, "formData");
+
+  },
+  updated(){
+       console.log(this.formData, "formData1");
+  },
+  // beforeDestroy() {
+  //   console.log(this.formData, "formData");
+  //   let id = this.formData.id;
+  //   let Status = this.formData.anNiugTai;
+  //   let ming_chen = this.formInline.cang_ku_ming_chen_value;
+  //   let weizhi = this.showValue;
+  //   console.log(weizhi, ming_chen);
+  //   if (weizhi !="" &&Status =="已入库") {
+  //     // 数据库更新
+  //     curdPost(
+  //       "update",
+  //       '{"tableName":"t_mjwlgl","paramWhere":{"wai_jian_":"' +
+  //         id +
+  //         '",},"paramCond":{"cang_ku_ming_chen":"' +
+  //         ming_chen +
+  //         '","cun_fang_wei_zhi_":"' +
+  //         weizhi +
+  //         '"}}'
+  //     )
+  //       .then((res) => {
+  //         this.$message({
+  //           message: "当前物料位置更新状态更新成功",
+  //           type: "success",
+  //         });
+  //       })
+  //       .catch((err) => {
+  //         console.log(err);
+  //       });
+  //   }
+  // },
+  methods: {
+    closeView(value) {
+      // let values = value[0];
+      // console.log(value);
+      //  this.showValue = value[0].wei_zhi_?value[0].wei_zhi_:value[0].cun_fang_wei_zhi_;
+      if (value.wei_zhi_) {
+        this.showValue = value.wei_zhi_;
+      } else if (value.cun_fang_wei_zhi_) {
+        this.showValue = value.cun_fang_wei_zhi_;
+      }
+      //  values.cun_fang_wei_zhi_;
+      const name2 = "cunFangWeiZhi"; //位置
+      const value2= this.showValue; //字段的值
+      this.$emit("change-data", name2, value2);
+      const name1 = "cangKuMingCheng"; //仓库名
+      const value1= this.formInline.cang_ku_ming_chen_value; //字段的值
+      this.$emit("change-data", name1, value1);
+      this.ifshow = !this.ifshow;
+    },
+    close() {
+      this.ifshow = !this.ifshow;
+    },
+    firstLoadQuyu(cang_ku) {
+      let sqlString = `select distinct qu_yu_,cun_chu_tiao_jian from t_ck where cang_ku_ming_chen = '${cang_ku}' order by qu_yu_ asc`;
+      var this_ = this;
+      curdPost("sql", sqlString).then((response) => {
+        this_.quyu_arr = response.variables.data;
+        if (!this.firstLoadActive) {
+          this_.formInline.qu_yu_value = "";
+        }
+      });
+    },
+    firstLoadViewData() {
+      //首次加载视图数据 默认中心仓库 耗材区
+      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_mjwlgl where cang_ku_ming_chen = '试剂库1'  and cun_fang_wei_zhi_ like" +
+        "'%" +
+        "SJG1" +
+        "%'";
+      this.queryLoad(sqlString, "SJG1");
+    },
+    sqlSlice(value) {
+      switch (value) {
+        case "货架":
+          return "HJ";
+        case "试剂柜":
+          return "SJG";
+        case "冰箱":
+          return "BX";
+        default:
+          "";
+      }
+    },
+    loadQueryData() {
+      //查询选择仓库数据查询
+      var sqlString = "select distinct cang_ku_ming_chen from t_ck ";
+      var this_ = this;
+      curdPost("sql", sqlString).then((response) => {
+        this_.cangkuOption = response.variables.data;
+        this_.cangkuOption.forEach((item, index) => {
+          if (!item) {
+            this_.cangkuOption.splice(index, 1);
+          }
+        });
+      });
+    },
+    onSubmits() {
+      this.desShow = false;
+      //头部按钮查询事
+      // 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 cang_ku_ming_chen = '" +
+        this.formInline.cang_ku_ming_chen_value +
+        "' and cun_fang_wei_zhi_ like " +
+        "'%" +
+        type +
+        "%'";
+      this.queryLoad(sqlString, type);
+    },
+    queryLoad(sql, py) {
+      //数据加载
+      let this_ = this;
+      var datas = [];
+      this.cenghao = [];
+      const labelsMap = {}; // map存储
+      let typeData = [];
+      let typeArr = [];
+      var sqltype =
+        `select DISTINCT wei_zhi_ from t_ck where wei_zhi_ like ` +
+        "'%" +
+        py +
+        "%'" +
+        " and cang_ku_ming_chen ='" +
+        this.formInline.cang_ku_ming_chen_value +
+        "' ORDER BY wei_zhi_ ASC ";
+      let classSql =
+        `select DISTINCT SUBSTR(wei_zhi_,1,6) AS wei_zhi_  from t_ck where wei_zhi_ like ` +
+        "'%" +
+        py +
+        "%'" +
+        " and cang_ku_ming_chen ='" +
+        this.formInline.cang_ku_ming_chen_value +
+        "' ORDER BY wei_zhi_ ASC ";
+      curdPost("sql", sqltype).then((res) => {
+        typeData = res.variables.data; //查询具体仓库某个货架的所有位置
+        // console.log(typeData, "位置");
+        curdPost("sql", sql).then((res) => {
+          datas = res.variables.data; //具体仓库某个货架的所有物料数据
+          // console.log(datas, "数据");
+          typeData.forEach((item) => {
+            typeArr[item.wei_zhi_] = [];
+            if (datas.length == 0) {
+              typeArr[item.wei_zhi_].push(item);
+            } else {
+              datas.forEach((it, index) => {
+                if (item.wei_zhi_ == it.cun_fang_wei_zhi_) {
+                  typeArr[item.wei_zhi_].push(it);
+                } else if (
+                  item.wei_zhi_ != it.cun_fang_wei_zhi_ &&
+                  index == datas.length - 1
+                ) {
+                  typeArr[item.wei_zhi_].push(item);
+                }
+              });
+            }
+          });
+          // console.log(typeArr, "22222222222222");
+          curdPost("sql", classSql).then((res2) => {
+            let resData = res2.variables.data;
+            resData.forEach((item) => {
+              let layer = item.wei_zhi_;
+              layer = layer.split("-")[1];
+              labelsMap[layer] = [];
+              for (var prop in typeArr) {
+                if (typeArr.hasOwnProperty(prop)) {
+                  // console.log(prop,item.wei_zhi_);
+                  if (prop.includes(item.wei_zhi_)) {
+                    labelsMap[layer].push(...typeArr[prop]);
+                    //  console.log(labelsMap)
+                  }
+                }
+              }
+            });
+            // console.log(labelsMap, "数据");
+            this_.listData = labelsMap;
+          });
+        });
+      });
+    },
+    qu_yu_Event(e) {
+      //点击区域事件，加载可视化视\
+      console.log(this.formData, "formData");
+      let value = e.target.innerText;
+      if (value.includes("(")) {
+        let index = value.indexOf("(");
+        value = value.slice(0, index);
+      }
+      let num = value.slice(0, 1);
+      let py = value.split("号")[1].replace(/^\s*/g, "");
+      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 +
+        "%'" +
+        "  and cang_ku_ming_chen = '" +
+        this.formInline.cang_ku_ming_chen_value +
+        "'";
+      // console.log(sqlString, type);
+      this.queryLoad(sqlString, type);
+      this.formInline.qu_yu_value = value;
+      this.quyuShow = value;
+    },
+    blackEvent() {
+      this.desShow = true;
+    },
+    clickBtn() {
+      this.ifshow = !this.ifshow;
+    },
+  },
+  watch: {
+    //监控仓库名称变化 触发第一次加载数据
+    "formInline.cang_ku_ming_chen_value": async function (newdata) {
+      this.firstLoadQuyu(newdata);
+    },
+    "formInline.qu_yu_value": function (newdata) {
+      this.qu_yu_value = newdata;
+      this.quyuShow = newdata;
+      this.firstLoadActive = false;
+    },
+    //。。。。。省略部分代码
+    formData: {
+      handler(val) {
+          //根据实际逻辑处理
+        if(!this.showValue){
+          this.showValue = val.cunFangWeiZhi
+          console.log('自定义组件formData', val)
+        }
+        
+        
+      },
+      deep: true,
+      immediate: true
+    }
+    
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+ul {
+  margin: 0;
+}
+p {
+  padding: 0;
+  margin: 0;
+}
+.close-content {
+  position: absolute;
+  right: 100px;
+  top: 50px;
+  color: red;
+  font-size: 18px;
+}
+.sample-content {
+  cursor: pointer;
+
+  .selectArea {
+    width: 100%;
+    height: 100%;
+    overflow: scroll;
+    position: fixed;
+    top: 50px;
+    left: 50px;
+    background: white;
+    z-index: 999;
+  }
+  .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;
+    }
+  }
+  .test-quyu,
+  .huojia {
+    width: 100%;
+    .list-items {
+      display: flex;
+      cursor: pointer;
+      .wDTianjian::after {
+        content: "2-6";
+      }
+      .quyu-item {
+        border: 1px solid #a172ab;
+        background: #0099cc;
+      }
+      .huojia-item {
+        background: #99ccff;
+      }
+      .list-item {
+        padding: 4px 14px;
+        height: 30px;
+        background-color: #cec6a4;
+        text-align: center;
+        line-height: 30px;
+        margin-left: 20px;
+        margin-bottom: 6px;
+        /* margin-top: 6px; */
+        border-radius: 10px;
+        position: relative;
+        .tiaojian {
+          // position: absolute;
+          // right: 0px;
+          // top: 0px;
+          // background-color: #f56c6c;
+          // border-radius: 10px;
+          // color: #fff;
+          // display: inline-block;
+          // font-size: 12px;
+          // height: 18px;
+          // line-height: 18px;
+          // padding: 0 6px;
+          // text-align: center;
+          // white-space: nowrap;
+          // border: 1px solid #fff;
+          font-size: 12px;
+        }
+      }
+    }
+    .cangku-mingchen {
+      width: 100%;
+      text-align: left;
+      margin-left: 50px;
+    }
+  }
+  .body-content {
+    margin-bottom: 70px;
+    display: flex;
+    box-sizing: border-box;
+    height: calc(100vh - 240px);
+    overflow-x: hidden;
+    overflow-y: scroll;
+    .black {
+      position: fixed;
+      top: 300px;
+      right: 100px;
+      width: 100px;
+      height: 40px;
+      line-height: 40px;
+      text-align: center;
+      background-color: #e6a23c;
+      z-index: 99;
+    }
+    .left-table {
+      // width: 40%;
+      ::v-deep .el-table {
+        width: 40%;
+      }
+    }
+    .right-view {
+      z-index: 99;
+      width: 100%;
+      .goods-items {
+        width: 100%;
+        overflow-x: hidden;
+        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;
+          // overflow-y: scroll;
+          .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;
+            margin-right: 15px;
+            .goods-dsc {
+              cursor: pointer;
+              // width: 170px;
+              // height: 80px;
+              padding: 6px 12px;
+              border-radius: 5px;
+              background: #e6a23c;
+              margin-left: 12px;
+              margin-top: 6px;
+              //   background-color: aliceblue;
+              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 > p {
+                  margin-left: 15px;
+                  // color: #fbe8ff;
+                  text-align: left;
+                }
+                // .condition {
+                //   // color: #fbe8ff;
+                // }
+              }
+              .bottom-dsc {
+                width: 100%;
+                font-size: 18px;
+                height: 42px;
+                line-height: 60px;
+                margin-top: 20px;
+                // 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-bottom: 49px;
+          }
+          .shelf {
+            width: 100%;
+            height: 40px;
+            line-height: 40px;
+            text-align: center;
+          }
+        }
+      }
+    }
+  }
+  .body-content::-webkit-scrollbar {
+    display: none; /*隐藏滚动条*/
+  }
+}
+</style>

src/views/huanjingjiankong/huanjingjiankong.vue

@@ -34,7 +34,7 @@
       </div>
       <div class="mapShow">
         <div class="mapurl"></div>
-        <div class="img-box">
+        <div class="img-box" @click="mapEvent">
           <img
             src="images/shiyanshijiankong/shiyanshi.png"
             class="img"
@@ -58,8 +58,9 @@
               :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="contentshow"> -->
+              <div class="envir-conditoin" v-show="item.temp?true:false">温度:{{ item.temp }}</div>
+              <div class="envir-conditoin" v-show="item.humidness?true:false">湿度:{{ item.humidness }}</div>
               <div class="envir-conditoin">气压:{{ item.airPressure }}</div>
             </div>
           </div>
@@ -128,6 +129,7 @@ export default {
       newTiMe: "",
       weizhi: [
         {
+          //细胞
           x: 463,
           y: 653,
         },
@@ -144,6 +146,7 @@ export default {
           y: 653,
         },
         {
+          //分练区
           x: 1460,
           y: 655,
         },
@@ -152,13 +155,16 @@ export default {
           y: 450,
         },
         {
+          //支原体
           x: 713,
           y: 260,
         },
         {
+          //无菌检测室
           x: 724,
           y: 89,
         },
+        //产物分析室
         {
           x: 950,
           y: 127,
@@ -175,8 +181,8 @@ export default {
           x: 1353,
           y: 127,
         },
-        ,
         {
+          //支原体阳性
           x: 321,
           y: 99,
         },
@@ -184,6 +190,117 @@ export default {
           x: 357,
           y: 200,
         },
+        //细胞->更
+        {
+          x: 584,
+          y: 420,
+        },
+        {
+          x: 584,
+          y: 480,
+        },
+        {
+          x: 640,
+          y: 465,
+        },
+        {
+          x: 710,
+          y: 480,
+        },
+        {
+          
+          x: 710,
+          y: 420,
+        },
+        {
+          x: 584,
+          y: 547,
+        },
+        // 分练区 ->更
+        {
+          x: 1390,
+          y: 560,
+        },
+        {
+          x: 1450,
+          y: 525,
+        },
+        {
+          x: 1495,
+          y: 570,
+        },
+        {//支原体检测->更
+          x: 850,
+          y: 250,
+        },
+        {
+          
+          x: 780,
+          y: 290,
+        },
+        {
+          x: 780,
+          y: 235,
+        },
+
+        {
+          //无菌检测->更
+          x: 850,
+          y: 180,
+        },
+        {
+          x: 850,
+          y: 70,
+        },
+        { //产物分析室->更
+          x: 1098,
+          y: 270,
+        },
+        { 
+          x: 1355,
+          y: 270,
+        },
+        {
+         
+          x: 965,
+          y: 220,
+        },
+        {
+          x: 1088,
+          y: 220,
+        },
+        {
+          x: 1190,
+          y: 220,
+        },
+        //无菌阳性->
+        {
+          x: 250,
+          y: 280,
+        },
+        {
+          x: 250,
+          y: 220,
+        },
+        {
+          x: 250,
+          y: 170,
+        },
+        {
+          x: 340,
+          y: 280,
+        },
+        {
+          //支原体阳性->更
+          x: 400,
+          y: 280,
+        },
+
+        {
+          x: 250,
+          y: 280,
+        },
+
       ],
       domsize: [
         {
@@ -243,6 +360,7 @@ export default {
       let newdata = [];
       curdPost("sql", sqlString).then((response) => {
         newdata = response.variables.data;
+        console.log(newdata);
         this_.newTiMe = this_.fmtDate(newdata[0].saveTime);
         for (let i = 0; i < newdata.length; i++) {
           setTimeout(() => {
@@ -264,10 +382,10 @@ export default {
       this.screenChange();
       this.mapChange();
     },
-    // mapEvent(e) {
-    //   console.log(e.offsetX, e.offsetY, "  x   ");
-    //   console.log(e.target.height, e.target.width, "y");
-    // },
+    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}`; //默认值
@@ -288,6 +406,7 @@ export default {
       };
     },
     mapChange() {
+      //图片变动函数
       let this_ = this;
       setTimeout(() => {
         var dom = document.getElementsByClassName("img");
@@ -322,22 +441,29 @@ export default {
       }, 10);
     },
     setIntervalData() {
+      //刷新频率
       let this_ = this;
       var timer = setInterval(() => {
         if (this_.setIntervalDis == true) {
           clearInterval(timer);
           return;
         }
-        this.screenChange();
+        this_.screenChange();
         this_.mapChange();
         this_.timeData();
-      }, 300000);
+      }, 300000); /// 300000
     },
-    returnifShow(t, h, p) {
+    returnifShow(t, h, p,qiya) {
+       let ifshow = "";
+       if(t==999&&h===999){
+        ifshow = "true";
+        return ifshow;
+       }
       let temp = t.toFixed(2);
       let humidness = h.toFixed(2);
       let airPressure = p.toFixed(2);
-      let ifshow = "";
+      // let ifshow = "";
+     
       if (temp > 999 || temp <= 0) {
         //不给予赋值
       } else if (temp >= 18 && temp <= 26) {
@@ -353,15 +479,16 @@ export default {
       }
       if (airPressure > 999) {
         //不给予赋值
-      } else if (airPressure >= 5) {
+      } else if (airPressure >= qiya) {
         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";
@@ -369,43 +496,72 @@ export default {
         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].airPressure = data[0].p6;
         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
+          data[0].p6,
+          5
         );
 
         this_.newweizhi[1].temp = data[0].t2;
         this_.newweizhi[1].humidness = data[0].h2;
-        this_.newweizhi[1].airPressure = data[0].p2;
+        this_.newweizhi[1].airPressure = data[0].p7;
         this_.newweizhi[1].run = data[0].run;
         this_.newweizhi[1].ifshow = this_.returnifShow(
           data[0].t2,
           data[0].h2,
-          data[0].p2
+          data[0].p7,
+          5
         );
 
         this_.newweizhi[2].temp = data[0].t3;
         this_.newweizhi[2].humidness = data[0].h3;
-        this_.newweizhi[2].airPressure = data[0].p3;
+        this_.newweizhi[2].airPressure = data[0].p8;
         this_.newweizhi[2].run = data[0].run;
         this_.newweizhi[2].ifshow = this_.returnifShow(
           data[0].t3,
           data[0].h3,
-          data[0].p3
+          data[0].p8,
+          5
         );
         this_.newweizhi[3].temp = data[0].t4;
         this_.newweizhi[3].humidness = data[0].h4;
-        this_.newweizhi[3].airPressure = data[0].p4;
+        this_.newweizhi[3].airPressure = data[0].p9;
         this_.newweizhi[3].run = data[0].run;
         this_.newweizhi[3].ifshow = this_.returnifShow(
           data[0].t4,
           data[0].h4,
-          data[0].p4
+          data[0].p9,
+          5
         );
+        this_.newweizhi[14].airPressure = data[0].p1;
+        this_.newweizhi[14].ifshow = this_.returnifShow(999,999,data[0].p1,10);
+        this_.newweizhi[14].run = data[0].run;
+
+        this_.newweizhi[15].airPressure = data[0].p2;
+        this_.newweizhi[15].ifshow = this_.returnifShow(999,999,data[0].p2,10);
+        this_.newweizhi[15].run = data[0].run;
+
+        this_.newweizhi[16].airPressure = data[0].p3;
+        this_.newweizhi[16].ifshow = this_.returnifShow(999,999,data[0].p3,5);
+        this_.newweizhi[16].run = data[0].run;
+
+        this_.newweizhi[17].airPressure =data[0].p4;
+        this_.newweizhi[17].ifshow = this_.returnifShow(999,999,data[0].p4,5);
+        this_.newweizhi[17].run = data[0].run;
+
+        this_.newweizhi[18].airPressure = data[0].p5;
+        this_.newweizhi[18].ifshow = this_.returnifShow(999,999,data[0].p5,10);
+        this_.newweizhi[18].run = data[0].run;
+
+        this_.newweizhi[19].airPressure = 6666;
+        this_.newweizhi[19].ifshow = this_.returnifShow(999,999,data[0].p10,10);
+        this_.newweizhi[19].run = data[0].run;
+
       });
       let sql1 =
         "select * FROM DATA WHERE deviceName ='HAU02'  ORDER BY saveTime ASC LIMIT 1";
@@ -413,99 +569,167 @@ export default {
         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].airPressure = data[0].p4;
         this_.newweizhi[4].run = data[0].run;
         this_.newweizhi[4].ifshow = this_.returnifShow(
           data[0].t1,
           data[0].h1,
-          data[0].p1
+          data[0].p4,
+          5
         );
         this_.newweizhi[5].temp = data[0].t2;
         this_.newweizhi[5].humidness = data[0].h2;
-        this_.newweizhi[5].airPressure = data[0].p2;
+        this_.newweizhi[5].airPressure = data[0].p5;
         this_.newweizhi[5].run = data[0].run;
         this_.newweizhi[5].ifshow = this_.returnifShow(
           data[0].t2,
           data[0].h2,
-          data[0].p2
+          data[0].p5,
+          5
         );
+        
+        this_.newweizhi[20].airPressure = data[0].p1;
+        this_.newweizhi[20].ifshow = this_.returnifShow(999,999,data[0].p1,10);
+        this_.newweizhi[20].run = data[0].run;
+
+        this_.newweizhi[21].airPressure = data[0].p2;
+        this_.newweizhi[21].ifshow = this_.returnifShow(999,999,data[0].p2,10);
+        this_.newweizhi[21].run = data[0].run;
+
+        this_.newweizhi[22].airPressure = data[0].p3;
+        this_.newweizhi[22].ifshow = this_.returnifShow(999,999,data[0].p3,5);
+        this_.newweizhi[22].run = data[0].run;
+
+
+
       });
       let sql2 =
-        "select * FROM DATA WHERE deviceName ='HAU03' ORDER BY saveTime ASC LIMIT 1";
+        "select * FROM DATA WHERE deviceName ='HAU03' ORDER BY saveTime DESC 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].airPressure = data[0].p4;
         this_.newweizhi[6].run = data[0].run;
         this_.newweizhi[6].ifshow = this_.returnifShow(
           data[0].t1,
           data[0].h1,
-          data[0].p1
+          data[0].p4,
+          5
         );
+        this_.newweizhi[23].airPressure = data[0].p1
+        this_.newweizhi[23].ifshow = this_.returnifShow(999,999,data[0].p1,10);
+        this_.newweizhi[23].run = data[0].run;
+
+        this_.newweizhi[24].airPressure = data[0].p2
+        this_.newweizhi[24].ifshow = this_.returnifShow(999,999,data[0].p2,10);
+        this_.newweizhi[24].run = data[0].run;
+
+        this_.newweizhi[25].airPressure = data[0].p3;
+        this_.newweizhi[25].ifshow = this_.returnifShow(999,999,data[0].p3,5);
+        this_.newweizhi[25].run = data[0].run;
+
+
       });
       let sql3 =
-        "select * FROM DATA WHERE deviceName ='HAU04'  ORDER BY saveTime ASC LIMIT 1";
+        "select * FROM DATA WHERE deviceName ='HAU04'  ORDER BY saveTime DESC 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].airPressure = data[0].p3;
         this_.newweizhi[7].run = data[0].run;
         this_.newweizhi[7].ifshow = this_.returnifShow(
           data[0].t1,
           data[0].h1,
-          data[0].p1
+          data[0].p3,
+          5
         );
+        this_.newweizhi[26].airPressure = data[0].p1
+        this_.newweizhi[26].ifshow = this_.returnifShow(999,999,data[0].p1,10);
+        this_.newweizhi[26].run = data[0].run;
+
+        this_.newweizhi[27].airPressure = data[0].p2;
+        this_.newweizhi[27].ifshow = this_.returnifShow(999,999,data[0].p2,5);
+        this_.newweizhi[27].run = data[0].run;
+
+
+
+
       });
       let sql4 =
-        "select * FROM DATA WHERE deviceName ='PAU01'  ORDER BY saveTime ASC LIMIT 1";
+        "select * FROM DATA WHERE deviceName ='PAU01'  ORDER BY saveTime DESC 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].airPressure = data[0].p9;//产物
         this_.newweizhi[8].run = data[0].run;
         this_.newweizhi[8].ifshow = this_.returnifShow(
           data[0].t1,
           data[0].h1,
-          data[0].p1
+          data[0].p9,
+          -10
         );
         this_.newweizhi[9].temp = data[0].t2;
         this_.newweizhi[9].humidness = data[0].h2;
-        this_.newweizhi[9].airPressure = data[0].p2;
+        this_.newweizhi[9].airPressure = data[0].p7;//扩增
         this_.newweizhi[9].run = data[0].run;
         this_.newweizhi[9].ifshow = this_.returnifShow(
           data[0].t2,
           data[0].h2,
-          data[0].p2
+          data[0].p7,
+          -25
         );
         this_.newweizhi[10].temp = data[0].t3;
         this_.newweizhi[10].humidness = data[0].h3;
-        this_.newweizhi[10].airPressure = data[0].p3;
+        this_.newweizhi[10].airPressure = data[0].p5;//样本制备
         this_.newweizhi[10].run = data[0].run;
         this_.newweizhi[10].ifshow = this_.returnifShow(
           data[0].t3,
           data[0].h3,
-          data[0].p3
+          data[0].p5,
+          5
         );
         this_.newweizhi[11].temp = data[0].t4;
         this_.newweizhi[11].humidness = data[0].h4;
-        this_.newweizhi[11].airPressure = data[0].p4;
+        this_.newweizhi[11].airPressure = data[0].p3;//试剂准备
         this_.newweizhi[11].run = data[0].run;
         this_.newweizhi[11].ifshow = this_.returnifShow(
           data[0].t4,
           data[0].h4,
-          data[0].p4
+          data[0].p3,
+          15
         );
+        this_.newweizhi[28].airPressure = data[0].p1; //pcr
+        this_.newweizhi[28].ifshow = this_.returnifShow(999,999,data[0].p1,5);
+        this_.newweizhi[28].run = data[0].run;
+
+        this_.newweizhi[29].airPressure = data[0].p2;//试剂准备缓冲
+        this_.newweizhi[29].ifshow = this_.returnifShow(999,999,data[0].p2,5);
+        this_.newweizhi[29].run = data[0].run;
+
+        this_.newweizhi[30].airPressure = data[0].p8//产物缓冲
+        this_.newweizhi[30].ifshow = this_.returnifShow(999,999,data[0].p8,5);
+        this_.newweizhi[30].run = data[0].run;
+
+        this_.newweizhi[31].airPressure = data[0].p6;//扩增缓冲
+        this_.newweizhi[31].ifshow = this_.returnifShow(999,999,data[0].p6,5);
+        this_.newweizhi[31].run = data[0].run;
+
+        this_.newweizhi[32].airPressure = data[0].p4//样本制备缓冲
+        this_.newweizhi[32].ifshow = this_.returnifShow(999,999,data[0].p4s,5);
+        this_.newweizhi[32].run = data[0].run;
+
+
       });
       let sql5 =
-        "select * FROM DATA WHERE deviceName ='PAU02'  ORDER BY saveTime ASC LIMIT 1";
+        "select * FROM DATA WHERE deviceName ='PAU02'  ORDER BY saveTime DESC 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].airPressure = data[0].p4;
         this_.newweizhi[12].run = data[0].run;
         this_.newweizhi[12].ifshow = this_.returnifShow(
           data[0].t1,
@@ -521,6 +745,32 @@ export default {
           data[0].h2,
           data[0].p2
         );
+
+        this_.newweizhi[33].airPressure = data[0].p1;
+        this_.newweizhi[33].ifshow = this_.returnifShow(999,999,data[0].p5);
+        this_.newweizhi[33].run = data[0].run;
+
+        this_.newweizhi[34].airPressure = data[0].p2;
+        this_.newweizhi[34].ifshow = this_.returnifShow(999,999,data[0].p5);
+        this_.newweizhi[34].run = data[0].run;
+
+        this_.newweizhi[35].airPressure = data[0].p3;
+        this_.newweizhi[35].ifshow = this_.returnifShow(999,999,data[0].p5);
+        this_.newweizhi[36].run = data[0].run;
+
+        this_.newweizhi[37].airPressure = data[0].p5;
+        this_.newweizhi[37].ifshow = this_.returnifShow(999,999,data[0].p5);
+        this_.newweizhi[37].run = data[0].run;
+
+        this_.newweizhi[38].airPressure = data[0].p6;
+        this_.newweizhi[38].ifshow = this_.returnifShow(999,999,data[0].p5);
+        this_.newweizhi[38].run = data[0].run;
+
+        // this_.newweizhi[37].airPressure = data[0].p1;
+        // this_.newweizhi[31].ifshow = this_.returnifShow(999,999,data[0].p5);
+        // this_.newweizhi[37].run = data[0].run;
+
+        console.log(this_.newweizhi, "新位置数据");
       });
     },
   },
@@ -768,7 +1018,7 @@ li {
         height: 20px;
         position: absolute;
         border-radius: 50%;
-        z-index: 99;
+        // z-index: 99;
         animation: traffic-light 2s linear 4s infinite;
         text-align: center;
         background: #828282 !important;
@@ -777,9 +1027,10 @@ li {
         position: absolute;
         z-index: 99;
         width: 90px;
-        left: 30px;
-        top: 0px;
+        left: 25px;
+        top: 5px;
         color: black;
+        z-index: 99;
       }
       .envir-conditoin {
         text-align: left;
@@ -788,6 +1039,7 @@ li {
         height: 20px;
         line-height: 20px;
         overflow: hidden;
+        z-index: 99;
       }
       .content {
         position: absolute;