<template>
  <v-scale-screen width="1920" height="1080" :fullScreen="false">
    <div class="app-container home" style="">
      <div class="head">
        <div class="head-content">
          <div class="title">烘房状态监控看板</div>
        </div>
      </div>
      <div class="content">
        <div class="itemtop">
          <div class="left">
            <!-- <div class="box">
              <div class="name name1">烘房运行数量:</div>
              <div class="number">
                <div class="number1">00</div>
              </div>
              <div class="unit">台</div>
            </div>
            <div class="box">
              <div class="name">烘房自动模式数量:</div>
              <div class="number">
                <div class="number1">00</div>
              </div>
              <div class="unit">台</div>
            </div> -->
            <div class="box" :key="item.title" v-for="item in digitalFlopData">
              <div class="name">{{ item.title }}:</div>
              <div class="number">
                <div class="number1">{{ item.number.number }}</div>
              </div>
              <div class="unit">{{ item.unit }}</div>
            </div>
          </div>
        </div>
        <div class="itembottom">
          <div class="left">
            <div id="cards">
              <div
                class="card-item fleft clearfix"
                v-for="(card, index) in dataPropdata"
                :key="index"
                :class="[[index + 1] % 7 == 0 ? 'isactive' : 'active1']"
              >
                <div class="card-header">
                  <span class="card-header-left">烘房{{ card.i }}</span>
                </div>
                <div class="card-box"></div>
                <div class="card-footer">
                  <div class="card-footer-item">
                    <div class="footer-detail">
                      <span
                        :style="{
                          fontSize: '22px',
                          fontWeight: 'bold',
                          color: '#FDA45D',
                          textAlign: 'right',
                        }"
                      >
                        {{ getTagModel(card.status) }}
                      </span>
                    </div>
                    <div class="footer-title">烘房模式</div>
                  </div>
                  <div class="card-footer-item">
                    <div class="footer-detail">
                      <span
                        :style="{
                          fontSize: '22px',
                          fontWeight: 'bold',
                          color: '#93FE66',
                          textAlign: 'right',
                        }"
                      >
                        {{ getTagText(card.dollyNumber) }}
                      </span>
                    </div>
                    <div class="footer-title">门前数量</div>
                  </div>
                </div>
                <div class="card-footer">
                  <div class="card-footer-item">
                    <div class="footer-detail">
                      <span
                        style="
                          font-size: 22px;
                          font-weight: bold;
                          color: #fda45d;
                          text-align: right;
                        "
                        >{{ card.temperature }}
                        <span
                          style="
                            font-weight: normal;
                            font-size: 18px;
                            color: #ffffff;
                          "
                          >℃</span
                        ></span
                      >
                    </div>
                    <div class="footer-title">烘房温度</div>
                  </div>
                  <div class="card-footer-item">
                    <div class="footer-detail">
                      <span
                        style="
                          font-size: 22px;
                          font-weight: bold;
                          color: #93fe66;
                          text-align: right;
                        "
                        >{{ card.waitmin
                        }}<span
                          style="
                            font-weight: normal;
                            font-size: 18px;
                            color: #ffffff;
                          "
                          >min</span
                        ></span
                      >
                    </div>
                    <div class="footer-title">保持时长</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- <div class="item"></div> -->
      <!-- <div class="item"></div> -->
    </div>
  </v-scale-screen>
</template>
  
  <script>
import {
  dryRoomDataCarousel,
  getDryingRoomList,
} from "@/api/kanban/dryingroom";
import * as echarts from "echarts";
import moment from "moment";
// import Echarts3D from "./echarts3d.vue";
// import Echarts3D2 from "./echarts3d2.vue";
export default {
  name: "Index",
  components: {},
  data() {
    return {
      gettimedata: "",
      selectxt: null,
      selectxtclasses: null,
      getLineList: [],
      classesList: [],
      number1: 0,
      number2: 0,
      number3: 0,
      number4: 0,
      nameList: [
        "成型机一",
        "成型机二",
        "成型机三",
        "成型机四",
        "成型机五",
        "成型机六",
        "成型机五",
        "成型机六",
      ],
      valueList: [1639, 1422, 1306, 1131, 1040, 732, 1040, 732],
      optionDatalist1: [],
      optionDatalist2: [],
      optionDatalist3: [],
      optionDatalist4: [],
      colorlist: ["#005aff", "#f8b551"],
      datetime: null,
      time1: null,
      time2: null,
      getlist: [],
      repairlist: [],
      equipmentlist: [],
      equipmentrepairlist: [],
      equipmentstabilizelist: [],
      equipmentinfo: [],
      RefreshTime: null,
      dictlist: [],
      StartArray: [],
      dataPropceshidata: [],
      dataPropdata: [],
      cards: {
        data1: [],
        data2: [],
      },
      cardss: [],
      digitalFlopData: [],
      dryingRoomList: [],
      cxjZCNumber: 0,
    };
  },
  created() {},
  destroyed() {
    clearInterval(this.time1);
    this.time1 = null;
    clearInterval(this.time2);
    this.time2 = null;
  },
  mounted() {
    // this.datetime = moment().subtract(2, "day").format("yyyy-MM-DD");
    //console.log('zhuanhuahou',this.dateRangeone)
    const { createData } = this;
    createData();
    this.createData1();
    this.time2 = setInterval(() => {
      this.createData1();
    }, 5000);
    this.gettime();
  },
  methods: {
    back() {
      this.$router.push({ path: "/index" });
    },
    getTagText(value) {
      // 根据值返回要显示的文字
      if (value === "0") {
        return "无车";
      } else if (value === "1") {
        return "有车";
      }
    },

    getTextColor(value) {
      if (value === "0") {
        return "#26fcd8";
      } else if (value === "1") {
        return "#ea6027";
      }
    },

    getTagModel(value) {
      // 根据值返回要显示的文字
      if (value === "0") {
        return "手动";
      } else if (value === "1") {
        return "自动";
      }
    },
    gettime() {
      this.gettimedata = moment().format("YYYY-MM-DD HH:mm:ss ");
      this.time1 = setInterval(() => {
        this.gettimedata = moment().format("YYYY-MM-DD HH:mm:ss ");
      }, 1000);
    },
    selectline() {
      const _this = this;
      this.optionDatalist1 = [];
      this.optionDatalist2 = [];
      this.optionDatalist3 = [];
      this.optionDatalist4 = [];
    },
    createData() {
      this.cards.data1 = new Array(8).fill(0).map((foo, i) => ({
        i: i + 1,
      }));
      this.cards.data2 = new Array(8).fill(0).map((foo, i) => ({
        i: i + 9,
      }));
      this.cards.data3 = new Array(5).fill(0).map((foo, i) => ({
        i: i === 0 ? 17 : i === 1 ? 18 : i === 2 ? 61 : i === 3 ? 62 : 63,
      }));
      // console.log(this.cards.data1)
      dryRoomDataCarousel({ factory: 999 }).then((response) => {
        if (response.data) {
          this.dataPropdata = response.data.dryingroomList;
          //  console.log(response);
          this.cards.data1 = this.cards.data1.map((card) => {
            const matchingIndex = response.data.dryingroomList.find(
              (index) => index.i === card.i
            );
            if (matchingIndex) {
              return {
                ...card,
                title: "烘房" + matchingIndex.i,
                model: matchingIndex.status,
                dollyNumber: matchingIndex.dollyNumber,
                waitmin: matchingIndex.waitmin,
                temperature: matchingIndex.temperature,
              };
            } else {
              return card;
            }
          });
          this.cards.data2 = this.cards.data2.map((card) => {
            const matchingIndex = response.data.dryingroomList.find(
              (index) => index.i === card.i
            );
            if (matchingIndex) {
              return {
                ...card,
                title: "烘房" + matchingIndex.i,
                model: matchingIndex.status,
                dollyNumber: matchingIndex.dollyNumber,
                waitmin: matchingIndex.waitmin,
                temperature: matchingIndex.temperature,
              };
            } else {
              return card;
            }
          });
          this.cards.data3 = this.cards.data3.map((card) => {
            const matchingIndex = response.data.dryingroomList.find(
              (index) => index.i === card.i
            );
            if (matchingIndex) {
              return {
                ...card,
                title: "烘房" + matchingIndex.i,
                model: matchingIndex.status,
                dollyNumber: matchingIndex.dollyNumber,
                waitmin: matchingIndex.waitmin,
                temperature: matchingIndex.temperature,
              };
            } else {
              return card;
            }
          });
          this.cardss = this.cardss.map((card) => {
            const matchingIndex = response.data.dryingroomList.find(
              (index) => index.i === card.i
            );
            if (matchingIndex) {
              return {
                ...card,
                title: "烘房" + matchingIndex.i,
                model: matchingIndex.status,
                dollyNumber: matchingIndex.dollyNumber,
                waitmin: matchingIndex.waitmin,
                temperature: matchingIndex.temperature,
              };
            } else {
              return card;
            }
          });
          console.log(this.cardss, this.cards, "wwwwwwww", this.dataPropdata);
        }
      });
    },
    createData1() {
      const that = this;
      getDryingRoomList({
        factory: 999,
      }).then((response) => {
        if (response.data) {
          // console.log(response)
          this.cxjZCNumber = response.data.cxzc;
          this.cxjYCNumber = response.data.cxyc;
          this.dryingRoomList = response.data.result;
          this.digitalFlopData = [
            {
              title: "成型机运行",
              number: {
                number: this.cxjZCNumber,
                content: "{nt}",
                textAlign: "right",
                style: {
                  fill: "#4d99fc",
                  fontWeight: "bold",
                },
              },

              unit: "台",
            },
            {
              title: "烘房运行(自动)",
              number: {
                number: response.data.hfauto,
                content: "{nt}",
                textAlign: "right",
                style: {
                  fill: "#4d99fc",
                  fontWeight: "bold",
                },
              },

              unit: "座",
            },
            {
              title: "收坯机台运行",
              number: {
                number: response.data.spzc,
                content: "{nt}",
                textAlign: "right",
                style: {
                  fill: "#4d99fc",
                  fontWeight: "bold",
                },
              },
              unit: "台",
            },
            {
              title: "成型缓存区数量",
              number: {
                number: response.data.hcnumber,
                content: "{nt}",
                textAlign: "right",
                style: {
                  fill: "#4d99fc",
                  fontWeight: "bold",
                },
              },
              unit: "个",
            },
          ];
        }
      });
    },

    handleScroll(event) {
      //请求烘房数据接口
      this.createData();
      // if (event==0){
      //   const that = this;
      //
      // }
      // 获取滚动事件的相关信息

      // console.log(scrollTop);
      // 根据需要处理滚动事件的逻辑
      // ...
    },
    //左侧第一个选择类型下拉框 回调函数
  },
};
</script>
  <style lang="scss" scoped>
.app-container {
  padding: 0px 24px;
}

.home {
  width: 100%;
  background: url("../../../assets/images/bg1.jpg") no-repeat;
  background-size: 100% 100%;
  background-color: #050711;

  .head {
    width: 100%;
    height: 74px;
    position: relative;

    .head-content {
      height: 74px;
      background-image: url("../../../assets/images/bg-head.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      text-align: center;

      .title {
        font-size: 42px;
        font-weight: 400;
        color: #ffffff;
      }
    }

    .head-logo {
      position: absolute;
      left: 0px;
      top: 1px;

      img {
        height: 38px;
        // width: ;
      }
    }

    .back {
      position: absolute;
      right: 0px;
      top: 5px;
    }
  }

  .content {
    margin-top: 63px;

    .itemtop {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .left {
        width: 100%;
        justify-content: space-between;
        display: flex;
        .box {
          width: 437px;
          height: 92px;
          background: url("../../../assets/images/bg2.png") no-repeat;
          background-size: 100% 100%;
          padding: 0px 21px 0px 25px;
          box-sizing: border-box;
          display: flex;
          align-items: center;
          .name {
            min-width: 225px;
            letter-spacing: 0px;
            color: #ffffff;
            font-size: 26px;
          }
          .name1 {
            min-width: 220px;
            letter-spacing: 25px;
          }
          .number {
            min-width: 120px;
            height: 50px;
            border: 2px solid #274583;
            border-radius: 5px;
            padding: 1px;
            box-sizing: border-box;
            .number1 {
              text-align: center;
              height: 100%;
              line-height: 43px;
              color: #ffa95b;
              border-radius: 7px;
              font-size: 32px;
              letter-spacing: 3px;
              background-color: #294584;
            }
          }
          .unit {
            color: #b7b9c1;
            margin-left: 20px;
            font-size: 24px;
          }
        }
      }
    }

    .itembottom {
      margin-top: 19px;
      display: flex;
      justify-content: space-around;

      .left {
        // width: 100%;
        // justify-content: space-between;
        // display: flex;
      }
    }
  }
}

.titlebox {
  width: 431px;
  height: 38px;
  background: url("../../../assets/images/bg-title.png") no-repeat;
  background-size: 100% 100%;
  //   text-align: center;
  font-size: 20px;
  font-weight: bold;
  color: #ffffff;
  line-height: 38px;
  letter-spacing: 2px;
  text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
  padding-left: 60px;
  //   .titlename{
  //     position: relative;
  //     left: 24px;
  //   }
}

.factory {
  display: flex;
  align-items: center;
  // justify-content: space-around;
}

.selectborder {
  background-color: transparent;
  border-radius: 4px;
  // border: 2px solid #27408c;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 350px;
  margin-left: 50px;
}

.selectborder1 {
  background-color: transparent;
  border-radius: 4px;
  // border: 2px solid #27408c;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 88px;
  margin-left: 25px;
}

.selectborder select {
  /*清除select的边框样式*/
  border: none;
  /*清除select聚焦时候的边框颜色*/
  outline: none;
  background-color: transparent;
  /*将select的宽高等于div的宽高*/
  width: 100%;
  height: 50px;
  /*隐藏select的下拉图标*/
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  font-size: 25px;
  font-weight: 400;
  color: #ffffff;
  line-height: 42px;
}

.selectborder option {
  /*清除select的边框样式*/
  border: none;
  /*清除select聚焦时候的边框颜色*/
  outline: none;
  background-color: transparent;
  /*将select的宽高等于div的宽高*/
  width: 100%;
  height: 50px;
  /*隐藏select的下拉图标*/
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-left: 20px;
  font-size: 25px;
  font-weight: 500;
  color: #3fa2ff;
  border-radius: 0%;
}

.selectborder1 option {
  /*清除select的边框样式*/
  border: none;
  /*清除select聚焦时候的边框颜色*/
  outline: none;
  background-color: transparent;
  /*将select的宽高等于div的宽高*/
  width: 200px;
  height: 50px;
  /*隐藏select的下拉图标*/
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-left: 20px;
  font-size: 25px;
  font-weight: 500;
  color: #3fa2ff;
  border-radius: 0%;
}

.selectborder:after {
  content: "";
  width: 24px;
  height: 24px;
  background: url(../../../assets/images/xiala.png) no-repeat center;
  /*通过定位将图标放在合适的位置*/
  position: absolute;
  right: 0px;
  top: 25%;
  /*给自定义的图标实现点击下来功能*/
  pointer-events: none;
}

.selectborder1:after {
  content: "";
  width: 24px;
  height: 24px;
  background: url(../../../assets/images/xiala.png) no-repeat center;
  /*通过定位将图标放在合适的位置*/
  position: absolute;
  right: 0px;
  top: 25%;
  /*给自定义的图标实现点击下来功能*/
  pointer-events: none;
}

::v-deep .el-button--primary {
  color: #ffffff;
  background-color: #325e82;
  border-color: #0a0f19;
}

.active1 {
  background-color: #0d1b2f;
}

.active2 {
  // background-color: #04060E;
}

::-webkit-scrollbar {
  width: 3px;
  height: 0px;
  background-color: #0c0642;
}

/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  background-color: #07356a;
}

/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
  border-radius: 8px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #0091ff;
}
#cards {
  .card-item {
    width: 254px;
    height: 262px;
    background: url("../../../assets/images/bg3.png") no-repeat;
    background-size: 100% 100%;
    padding: 10px;
    margin-right: 15px;
    margin-bottom: 20px;
    // display: flex;
    // flex-direction: column;
  }

  .card-header {
    width: 180px;
    height: 20%;
    margin: auto;
    align-items: center;
    text-align: center;
    color: #f6f3f9;
    font-size: 24px;
    margin-top: 10px;

    .card-header-left {
      display: inline-block;
      min-width: 100px;
      background-color: #0b3765;
      box-shadow: 0px 3px 18px 12px #0b3765;
    }
  }

  .ring-charts {
    height: 55%;
  }

  .card-footer {
    height: 25%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-top: 25px;
  }

  .card-footer-item {
    box-sizing: border-box;
    width: 40%;
    text-align: center;
    .footer-title {
      font-size: 22px;
      margin-bottom: 5px;
      color: #0593fd;
    }

    .footer-detail {
      min-height: 46px;
      text-align: center;
      font-size: 20px;
      color: #192c57;
      font-size: 18px;
      padding: 10px 10px 10px 10px;
      box-sizing: border-box;
      width: 100%;
      background-color: #192c57;
      border-radius: 3px;
      .dv-digital-flop {
        margin-right: 5px;
      }
    }
  }
}
::v-deep .el-date-editor .el-range-input {
  background-color: #142944;
  color: #ffffff;
}
::v-deep .el-range-input::placeholder {
  color: #ffffff; /* 设置 placeholder 文本的颜色 */
}
::v-deep .el-range-separator {
  color: #ffffff; /* 设置 placeholder 文本的颜色 */
}
::v-deep .el-range-editor--medium .el-range-separator {
  line-height: 35px;
}
::v-deep .el-input__icon .el-range__icon .el-icon-date {
  color: #ffffff; /* 设置 placeholder 文本的颜色 */
}
.fleft {
  float: left;
}

.fright {
  float: right;
}

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}
#cards .isactive {
  margin-right: 0px;
}
</style> 
  