dingcong
/
everlight.eap


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524
							<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>信息化展示平台-大连线体</title>
    <link rel="stylesheet" href="../css/ofilm-dalianxian/dalianxin.css" />
    <link rel="stylesheet" href="../css/ofilm-dalianxian/switch.css" />
    <script src="../js/dataHelper.js"></script>
    <script src="../lib/vue.min.js"></script>
    <script src="../lib/oidc-client.js"></script>
    <script src="../lib/axios.js"></script>
    <script src="../js/server-config.js"></script>
    <script src="../js/macstatus/oauth-client-config.js"></script>
    <script src="../js/macstatus/auth.js"></script>
    <script src="../js/request.js"></script>
    <script src="../lib/jquery/jquery.min.js"></script>
    <link rel="stylesheet" href="../lib/element-ui/element-chalk-theme.css" />
    <script src="../lib/element-ui/element-ui.js"></script>
  </head>
  <body>
    <div class="home" id="app">
      <div class="home-content">
        <div class="big-title">
          <div class="total-info">
            <span>机种：{{recipe}}</span>
            <span>总投入数：{{output}}</span>
            <span>总产出数：{{output}}</span>
          </div>
          <p>
            <span class="left"></span>信息化展示平台-大连线体<span
              class="right"
            ></span>
          </p>
          <span class="timer">{{ currentTime }}</span>
        </div>
        <div class="main-content">
          <div class="mac-info-category">
            <table border="1" cellspacing="0">
              <tbody>
                <tr>
                  <td class="category" rowspan="3">
                    关<br />键<br />设<br />备
                  </td>
                  <td style="text-align: center">实<br />时<br />状<br />态</td>
                </tr>
                <tr>
                  <td></td>
                </tr>
                <tr>
                  <td style="border-top: none"></td>
                </tr>
                <tr>
                  <td rowspan="3" class="category">
                    稼<br />动<br />管<br />理
                  </td>
                  <td class="sub-category">产量</td>
                </tr>
                <tr>
                  <td class="sub-category">稼动率</td>
                </tr>
                <tr>
                  <td class="sub-category">报警率</td>
                </tr>
                <tr>
                  <td rowspan="4" class="category">
                    O<br />E<br />E<br />管<br />理
                  </td>
                  <td
                    class="sub-category"
                    style="padding-left: 0; padding-right: 0"
                  >
                    报警TOP1
                  </td>
                </tr>
                <tr>
                  <td
                    class="sub-category"
                    style="padding-left: 0; padding-right: 0"
                  >
                    报警TOP2
                  </td>
                </tr>
                <tr>
                  <td
                    class="sub-category"
                    style="padding-left: 0; padding-right: 0"
                  >
                    报警TOP3
                  </td>
                </tr>
                <tr>
                  <td class="sub-category">MTBA</td>
                </tr>
                <tr>
                  <td rowspan="3" class="category">
                    品<br />质<br />管<br />理
                  </td>
                  <td
                    class="sub-category"
                    style="padding-left: 0; padding-right: 0"
                  >
                    首件时间
                  </td>
                </tr>
                <tr>
                  <td
                    class="sub-category"
                    style="padding-left: 0; padding-right: 0"
                  >
                    首件结果
                  </td>
                </tr>
                <tr>
                  <td
                    class="sub-category"
                    style="padding-left: 0; padding-right: 0"
                  >
                    定人定岗
                  </td>
                </tr>
                <tr>
                  <td rowspan="4" class="category" style="height: 9.7rem">
                    参<br />数<br />管<br />理
                  </td>
                  <td
                    class="sub-category"
                    style="padding-left: 0; padding-right: 0"
                  >
                    功能开启
                  </td>
                </tr>
                <tr>
                  <td
                    class="sub-category"
                    rowspan="3"
                    style="padding-left: 0; padding-right: 0"
                  >
                    设备<br />控制
                  </td>
                </tr>
                <tr>
                  <td style="display: none"></td>
                </tr>
                <tr>
                  <td style="display: none"></td>
                </tr>
              </tbody>
            </table>
          </div>
          <div class="mac-item" v-for="item in macInfoes">
            <div class="mac-img">
              <img
                :src="item.imgSrc"
                :alt="item.macCode"
                @click="toMacStatusDetail(item.macCode)"
              />
            </div>
            <div class="mac-info">
              <div class="mac-title" style="border-bottom: none">
                {{item.macCode}}
              </div>
              <div class="data-item">
                <!-- <div class="data-name">产<br />量<br />数<br />据</div> -->
                <div class="data-detail">
                  <table border="1" cellspacing="0">
                    <tr>
                      <td>{{item.output}}</td>
                    </tr>
                    <tr>
                      <td>{{item.runRate}}%</td>
                    </tr>
                    <tr>
                      <td>{{item.alarmRate}}%</td>
                    </tr>
                    <tr>
                      <td
                        :title="item.alarm1"
                        style="
                          font-size: 0.8rem;
                          padding-left: 0;
                          padding-right: 0;
                        "
                      >
                        {{item.alarm1.length>19?item.alarm1.substring(0,15)+'...':item.alarm1}}
                      </td>
                    </tr>
                    <tr>
                      <td
                        :title="item.alarm2"
                        style="
                          font-size: 0.8rem;
                          padding-left: 0;
                          padding-right: 0;
                        "
                      >
                        {{item.alarm2.length>19?item.alarm2.substring(0,15)+'...':item.alarm2}}
                      </td>
                    </tr>
                    <tr>
                      <td
                        :title="item.alarm3"
                        style="
                          font-size: 0.8rem;
                          padding-left: 0;
                          padding-right: 0;
                        "
                      >
                        {{item.alarm3.length>19?item.alarm3.substring(0,15)+'...':item.alarm3}}
                      </td>
                    </tr>
                    <tr>
                      <td>{{item.mtba}}</td>
                    </tr>
                    <tr>
                      <td
                        style="
                          font-size: 0.8rem;
                          padding-left: 0;
                          padding-right: 0;
                        "
                      >
                        {{item.firstTime}}
                      </td>
                    </tr>
                    <tr>
                      <td>{{item.firstResult}}</td>
                    </tr>
                    <tr>
                      <td
                        style="
                          font-size: 0.8rem;
                          padding-left: 0;
                          padding-right: 0;
                        "
                      >
                        {{item.fixedPersonPost}}
                      </td>
                    </tr>
                    <tr>
                      <td>{{item.functions}}</td>
                    </tr>
                    <tr>
                      <td rowspan="3" style="height: 7.1rem">
                        <a
                          href="#"
                          @click="changeSwitch(item)"
                          :class="[item.isOn?'toggle--on':'toggle--off','toggle']"
                        ></a>
                      </td>
                    </tr>
                    <tr>
                      <td style="display: none"></td>
                    </tr>
                    <tr>
                      <td style="display: none"></td>
                    </tr>
                  </table>
                  <!-- <div>{{item.output}}</div>
                  <div>{{item.runRate}}%</div>
                  <div>{{item.alarmRate}}%</div>
                  <div>{{item.alarms[0]}}</div>
                  <div>{{item.alarms[1]}}</div>
                  <div>{{item.alarms[2]}}</div>
                  <div>{{item.mtba}}</div>
                  <div>{{item.firstTime}}</div>
                  <div>{{item.firstResult}}</div>
                  <div>{{item.staffCode}}</div>
                  <div>{{item.functions[0]}}</div>
                  <div>{{item.parameters[0]}}</div>
                  <div>{{item.parameters[1]}}</div>
                  <div>{{item.parameters[2]}}</div> -->
                </div>
                <!-- <table class="data-detail">
                  <thead>
                    <th>产量</th>
                    <th>稼动率</th>
                    <th>故障率</th>
                  </thead>
                  <tbody>
                    <tr>
                      <td>{{item.output}}</td>
                      <td>{{item.runRate}}%</td>
                      <td>{{item.alarmRate}}%</td>
                    </tr>
                  </tbody>
                </table> -->
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
  <!-- <script>
    $(".toggle").click(function (e) {
      var toggle = this;

      e.preventDefault();

      $(toggle)
        .toggleClass("toggle--on")
        .toggleClass("toggle--off")
        .addClass("toggle--moving");

      setTimeout(function () {
        $(toggle).removeClass("toggle--moving");
      }, 200);
    });
  </script> -->
  <script type="module">
    new Vue({
      el: "#app",
      data() {
        return {
          currentTime: "",
          macInfoes: [],
          recipe: "",
          output: 0,
          fullscreenLoading: null,
        };
      },
      created() {
        this.initTimer();
        //  this.getMacData();
        this.getMacStatusFromApi();
        this.fullscreenLoading = this.$loading({
          lock: true,
          text: "加载中",
          background: "rgba(0, 0, 0, 0.7)",
        });
      },
      methods: {
        toMacStatusDetail(macCode) {
          window.open("./machine-detail.html?macCode=" + macCode);
        },
        initTimer() {
          setInterval(() => {
            this.currentTime = new Date().toLocaleString();
          }, 1000);
        },
        changeSwitch(item) {
          this.isAuthorized().then((authed) => {
            if (!authed) {
              alert("您没有权限操作，请联系管理员授权");
            } else {
              item.isOn = !item.isOn;
              if (item.isOn) {
                this.sendStopOrder(item);
              }
            }
          });
        },
        // 用户是否有权限操作
        isAuthorized() {
          return mgr.getUser().then((user) => {
            if (!user) return false;
            var usercode = user.profile.account;
            var btnCode = "DMacStop";
            return axios({
              method: "get",
              url: server + "/ufp/api/btnfunc/GetIsPermitted",
              headers: { usercode: usercode },
              params: { btnCode },
            }).then((res) => {
              if (res && res.code === 1) return true;
              else return false;
            });
          });
        },
        sendStopOrder(item) {
          axios({
            method: "post",
            url: "http://192.168.124.93:8606/eap/api/equipment/equipmentShutDown",
            headers: {
              "Content-Type": "application/x-www-form-urlencoded",
            },
            data: {
              equipmentID: item.macCode,
              message: "停机",
              type: 1,
            },
            transformRequest: [
              function (data) {
                let ret = "";
                for (let it in data) {
                  ret +=
                    encodeURIComponent(it) +
                    "=" +
                    encodeURIComponent(data[it]) +
                    "&";
                }
                ret = ret.substring(0, ret.lastIndexOf("&"));
                return ret;
              },
            ],
          })
            .then((res) => {
              const data = res.data;
              if (data.code === "fail") {
                item.isOn = false;
                alert(data.message || "操作失败");
              } else {
                alert("操作成功");
              }
            })
            .catch(function (error) {
              console.log(error);
            });
        },
        dateFormat(fmt, date) {
          let ret;
          const opt = {
            "y+": date.getFullYear().toString(), // 年
            "M+": (date.getMonth() + 1).toString(), // 月
            "d+": date.getDate().toString(), // 日
            "H+": date.getHours().toString(), // 时
            "m+": date.getMinutes().toString(), // 分
            "s+": date.getSeconds().toString(), // 秒
            // 有其他格式化字符需求可以继续添加，必须转化成字符串
          };
          for (let k in opt) {
            ret = new RegExp("(" + k + ")").exec(fmt);
            if (ret) {
              fmt = fmt.replace(
                ret[1],
                ret[1].length == 1
                  ? opt[k]
                  : opt[k].padStart(ret[1].length, "0")
              );
            }
          }
          return fmt;
        },
        getMacStatusFromApi() {
          var macCodes = [
            "DA00027",
            "WB00151",
            "WB00152",
            "WB00153",
            "WB00154",
            "WB00155",
            "WB00156",
            "LHA0029",
            "AA00058",
          ];
          axios
            .get(`${server}/eap/api/MacStatusTotalInfo/GetMacDetail`, {
              params: {
                macCode: macCodes.join(","),
                date: this.dateFormat("yyyy-MM-dd HH:mm:ss", new Date()),
              },
            })
            .then((res) => {
              if (this.fullscreenLoading) {
                this.fullscreenLoading.close();
              }
              var befores = Object.create(this.macInfoes);
              if (res && res.data) {
                const data = res.data;
                this.recipe = data.recipe;
                this.output = data.totalCount;
                const macDtos = data.macInfoShowLineDtos;
                this.macInfoes = [];
                macDtos.forEach((element) => {
                  const imgSrc = `../images/machines/${element.pCode}/${element.pCode}_${element.statusName}.png`;
                  var alarm1 = "暂无",
                    alarm2 = "暂无",
                    alarm3 = "暂无";
                  if (element.macAlarms && element.macAlarms.length > 0) {
                    element.macAlarms.forEach((item, index) => {
                      if (index === 0) {
                        alarm1 = item.description;
                      } else if (index == 1) {
                        alarm2 = item.description;
                      } else {
                        alarm3 = item.description;
                      }
                    });
                  }
                  var isOn = false;
                  if (befores && befores.length > 0) {
                    var beforeMac = befores.find(
                      (c) => c.macCode === element.macCode
                    );
                    if (beforeMac) {
                      isOn = beforeMac.isOn;
                    }
                  }
                  this.macInfoes.push({
                    macCode: element.macCode,
                    pCode: element.pCode,
                    status: element.statusName,
                    imgSrc: imgSrc,
                    output: element.count,
                    runRate: element.runRate,
                    alarmRate: element.errorRate,
                    alarm1,
                    alarm2,
                    alarm3,
                    mtba: element.mtba,
                    firstTime: element.falTime || "暂无",
                    firstResult: element.falResult || "暂无",
                    fixedPersonPost: element.fixedPersonPosts
                      ? `${element.fixedPersonPosts.workNm} ${element.fixedPersonPosts.name}`
                      : "暂无",
                    functions: element.isControl === "1" ? "已开启" : "未开启",
                    parameters: [" ", " ", " "],
                    isOn: isOn,
                  });
                });
              }
            })
            .catch((err) => {
              console.log(err);
            });
          setTimeout(() => {
            this.getMacStatusFromApi();
          }, 60 * 1000);
        },
      },
    });
  </script>
</html>