<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>
            <div class="cards">
              <div
                class="card-item"
                :class="[[index + 1] % 7 == 0 ? 'isactive' : 'active1']"
              >
                <div class="card-header">
                  <span class="card-header-left"
                    >生产总数:<span class="color1">80</span>车</span
                  >
                </div>
                <div
                  class="card-box"
                  v-for="(card, index) in dataPropceshidata"
                  :key="index"
                ></div>
              </div>
            </div>
          </div>
          <div class="left left1">
            <div class="cards">
              <div
                class="card-item card-item1"
                :class="[[index + 1] % 7 == 0 ? 'isactive' : 'active1']"
              >
                <div class="card-header">
                  <span class="card-header-left">烘房</span>
                </div>
                <div
                  class="card-box"
                  v-for="(card, index) in dataPropceshidata"
                  :key="index"
                ></div>
              </div>
            </div>
          </div>
          <div class="left">
            <div class="box">
              <div class="name name1">当天质量情况</div>
            </div>
            <div class="cards">
              <div
                class="card-item"
                :class="[[index + 1] % 7 == 0 ? 'isactive' : 'active1']"
              >
                <div class="card-header">
                  <span class="card-header-left"
                    >车不合格异常数量: <span class="color2">04</span> 车</span
                  >
                </div>
                <div class="card-box">
                  <div class="list1">
                    <div class="listitem1">烘房</div>
                    <div class="listitem1">产量</div>
                    <div class="listitem1">标准产能</div>
                  </div>
                </div>
                <div
                  class="card-box card-box1"
                >
                  <div class="list" v-for="(card, index) in dataPropceshidata"
                  :key="index">
                    <div class="listitem1">烘房</div>
                    <div class="listitem1">产量</div>
                    <div class="listitem1">标准产能</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="itembottom">
          <div class="left"></div>
        </div>
      </div>
      <!-- <div class="item"></div> -->
      <!-- <div class="item"></div> -->
    </div>
  </v-scale-screen>
</template>
  
  <script>
import {
  getBoardFactory,
  getMesBoardEquProductionToday,
  getBoardShifts,
  getRepairWorkOrder,
  getEquipmentInfo,
  getRepairQuantity,
  equipmentIntactRate,
  equipmentStability,
  getDeviceRefreshTime,
  getdictlist,
} from "@/api/kanban/equipment";
import { dryRoomDataCarousel } 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,
      getlist: [],
      repairlist: [],
      equipmentlist: [],
      equipmentrepairlist: [],
      equipmentstabilizelist: [],
      equipmentinfo: [],
      RefreshTime: null,
      dictlist: [],
      StartArray: [],
      dataPropceshidata: [{}, {}, {}, {}, {}, {}],
      dataPropdata: [],
      cards: {
        data1: [],
        data2: [],
      },
      cardss: [],
    };
  },
  created() {},
  destroyed() {
    clearInterval(this.time1);
    this.time1 = null;
  },
  mounted() {
    // this.datetime = moment().subtract(2, "day").format("yyyy-MM-DD");
    //console.log('zhuanhuahou',this.dateRangeone)
    const { createData } = this;
    createData();
    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 ");
      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);
        }
      });
    },

    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 {
        .box {
          width: 525px;
          height: 62px;
          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;
          background-color: #1f3668;
          .name {
            min-width: 300px;
            letter-spacing: 4px;
            color: #ffffff;
            font-size: 22px;
          }
          .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: 30px;
            font-size: 24px;
          }
        }
        .cards {
          width: 525px;
          .card-item {
            width: 525px;
            height: 387px;
            background: url("../../../assets/images/bg3.png") no-repeat;
            background-size: 100% 100%;
            padding: 10px;
            background-color: #192c56;
            // display: flex;
            // flex-direction: column;
          }
          .card-item1 {
            width: 750px;
            height: 450px;
            background: url("../../../assets/images/bg3.png") no-repeat;
            background-size: 100% 100%;
            padding: 10px;
            background-color: #0e1d3a;
            // display: flex;
            // flex-direction: column;
          }
          .card-header {
            width: 450px;
            height: 13%;
            margin: auto;
            align-items: center;
            text-align: center;
            color: #f6f3f9;
            font-size: 26px;
            margin-top: 10px;
            .card-header-left {
              display: inline-block;
              min-width: 100px;
              padding: 16px 26px;
              letter-spacing: 8px;
              background: linear-gradient(to right, #192c56, #11518f, #192c56);
              .color1 {
                color: #0195fd;
              }
              .color2 {
                color: #fb0102;
              }
            }
          }
          .card-box {
            margin-top: 35px;
            position: relative;
            .list1 {
              background-color: #0d61aa;
              color: #ffffff;
              border-radius: 10px;
              display: flex;
              justify-content: space-around;
              align-items: center;
              font-size: 22px;
              min-height: 60px;
            }
            .list1::before {
              content: "";
              position: absolute;
              bottom: 40px;
              left: 3%;
              transform: translateX(-50%);
              border-width: 10px;
              border-style: solid;
              border-color: transparent transparent #0496FD transparent;
              transform: rotate(315deg);
            }
            .list {
              background-color: #114881;
              color: #46AFF7;
              border-radius: 10px;
              display: flex;
              justify-content: space-around;
              align-items: center;
              font-size: 22px;
              min-height: 60px;
              margin-bottom: 5px;
            }
            .list::before {
              content: "";
              position: absolute;
              bottom: 40px;
              left: 3%;
              transform: translateX(-50%);
              border-width: 10px;
              border-style: solid;
              border-color: transparent transparent #0496FD transparent;
              transform: rotate(315deg);
            }
          }
          .card-box1{
            margin-top: 5px;
          }

          .ring-charts {
            height: 55%;
          }
        }
      }
      .left1 {
        width: 750px;
      }
    }

    .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;
}
::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> 
  