<template>
  <div class="bodys">
    <!-- 顶部部分 -->
    <div class="topStyle">
      <div style="width: 30%">
        <dv-decoration-8 style="height: 50px; width: 65%; float: left" />
        <!-- <div style="position: absolute; font-size: 15px; top: 0"> -->
        <!-- 2023-07-04 08:12:30 -->
        <!-- </div> -->
      </div>

      <div class="topStyle_centen">
        <div class="title">{{ title }}</div>
        <dv-decoration-5 style="height: 40px" />
      </div>
      <div class="topStyle_frotop">
        <div class="topStyle_frotop_tiem">当前时间:2023-08-01 08:12:30</div>
        <dv-decoration-8
          :reverse="true"
          style="height: 50px; width: 65%; float: right; height: 50px" />
      </div>
    </div>
    <!-- 主体部分 -->
    <div class="mainStyle">
      <!-- 左边数据表格 -->
      <div>
        <dv-border-box-12>
          <!-- <div>各地工厂产量</div> -->
          <div id="container01">
            <div class="container_letf">
              <p class="title_p">今日硫酸镍产量</p>
              <p style="color: #01ffdc">50吨</p>
              <p class="title_p">当月硫酸镍产量</p>
              <p style="color: #d800ff">1000吨</p>
              <p class="title_p">年产量</p>
              <p style="color: #cff308">100000吨</p>
            </div>
            <dv-decoration-2 :reverse="true" style="width: 5px; height: 99%" />
            <div class="container_right">
              <p class="title_p">今日氯化镍产量</p>
              <p style="color: #01ffdc">40吨</p>
              <p class="title_p">当月氯化镍产量</p>
              <p style="color: #d800ff">800吨</p>
              <p class="title_p">年产量</p>
              <p style="color: #cff308">80000吨</p>
            </div>
          </div>
        </dv-border-box-12>
        <dv-border-box-12>
          <div>班组产量对比</div>
          <div id="container02">
            <dv-scroll-board
              :config="config"
              :hoverPause="false"
              style="width: 100%; height: 100%" />
          </div>
        </dv-border-box-12>
        <dv-border-box-12>
          <div>产品合格率</div>
          <div id="container03"></div>
        </dv-border-box-12>
      </div>
      <!-- 中间部分 -->
      <div>
        <!-- 地图 -->
        <div style="position: relative">
          <div id="containerMap" style="width: 100%; height: 100%">
            <div class="bageImg"></div>
          </div>
        </div>
        <!-- 三维跑车模型 -->
        <div>
          <div id="modelCar">
            <div class="" style="height: 82%">
              <dv-border-box-8>
                <div
                  class="borDer_div"
                  style="
                    padding-top: 2%;
                    font-size: 20px;
                    color: #35f3fd;
                    display: flex;
                    -webkit-box-pack: center;
                    -ms-flex-pack: center;
                    justify-content: center;
                  ">
                  库位信息
                </div>
                <div style="margin: 0px 2%; height: 79%">
                  <dv-scroll-board
                    :config="teamOutput"
                    style="width: 100%; flex-direction: column; height: 100%" />
                </div>
              </dv-border-box-8>
            </div>
          </div>
        </div>
      </div>
      <!-- 右边数据表格 -->
      <div>
        <dv-border-box-12>
          <div>AGV1车辆信息</div>
          <div id="container04">
            <p>
              电量:
              <span>80%</span>
            </p>
            <p style="margin: 10% 0px">
              状态:
              <span>任务中</span>
            </p>
            <p>
              当前任务号:
              <span>NS54645613213</span>
            </p>
          </div>
        </dv-border-box-12>
        <dv-border-box-12>
          <div>AGV2车辆信息</div>
          <div id="container05">
            <p>
              电量:
              <span>80%</span>
            </p>
            <p style="margin: 10% 0px">
              状态:
              <span>任务中</span>
            </p>
            <p>
              当前任务号:
              <span>NS54645613213</span>
            </p>
          </div>
        </dv-border-box-12>
        <dv-border-box-12>
          <div>任务列表</div>
          <div id="container06">
            <dv-scroll-board
              :config="configData"
              style="width: 100%; flex-direction: column; height: 100%" />
          </div>
        </dv-border-box-12>
      </div>
    </div>
  </div>
</template>

<script>
import bgimgsimg from "@/assets/jingchuan.png";
// import Charts from "@jiaminghi/charts";
export default {
  name: "DemoOne",
  data() {
    return {
      option: null,
      // 页面标题
      title: "金川集团镍盐有限公司金分朽厂",
      config: {
        waitTime: 600000000000000, // 轮播时间间隔(ms)
        data: [
          ["班组1", "1000吨", "2023-07-30"],
          ["班组2", "2000吨", "2023-07-30"],
          ["班组3", "3000吨", "2023-07-30"],
          ["班组4", "1000吨", "2023-07-30"],
          ["班组5", "4000吨", "2023-07-30"],
          ["班组6", "6000吨", "2023-07-30"],
          ["班组7", "1000吨", "2023-07-30"],
          ["班组8", "1000吨", "2023-07-30"],
          ["班组9", "8000吨", "2023-07-30"],
        ],
      },
      teamOutput: {
        waitTime: 600000000000000, // 轮播时间间隔(ms)
        data: [
          ["A区库存量", "50托", "100吨"],
          ["B区库存量", "50托", "100吨"],
          ["C区库存量", "50托", "100吨"],
          ["D区库存量", "50托", "100吨"],
          ["E区库存量", "50托", "100吨"],
          ["F区库存量", "50托", "100吨"],
          ["G区库存量", "50托", "100吨"],
          ["H区库存量", "50托", "100吨"],
          ["I区库存量", "50托", "100吨"],
        ],
        // index: true,
        // columnWidth: [50],
        align: ["center"],
      },
      configData: {
        waitTime: 600000000000000, // 轮播时间间隔(ms)
        header: ["起始座位", "目标库任", "状态", "车号"],
        data: [
          ["A-01-01", "B01-01", "完成", "1"],
          ["B-01-01", "B01-01", "完成", "1"],
          ["C-01-01", "B01-01", "完成", "1"],
          ["D-01-01", "B01-01", "完成", "1"],
          ["E-01-01", "B01-01", "完成", "1"],
          ["F-01-01", "B01-01", "完成", "1"],
          ["G-01-01", "B01-01", "完成", "1"],
          ["H-01-01", "B01-01", "完成", "1"],
          ["I-01-01", "B01-01", "完成", "1"],
        ],
        index: true,
        columnWidth: [50],
        align: ["center"],
      },
    };
  },
  mounted() {
    // Charts.prototype.setOption = function (option, animationEnd = false) {
    //   //...
    // };
    this.getLoadEcharts();
  },
  methods: {
    getLoadEcharts() {
      var myChart = this.echarts.init(document.getElementById("container03"));
      var option;

      option = {
        title: {
          text: "Stacked Line",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["硫酸镍", "氯化镍", "Video Ads", "Direct", "Search Engine"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "硫酸镍",
            type: "line",
            stack: "Total",
            data: [120, 132, 101, 134, 90, 230, 210],
          },
          {
            name: "氯化镍",
            type: "line",
            stack: "Total",
            data: [220, 182, 191, 234, 290, 330, 310],
          },
        ],
      };

      option && myChart.setOption(option);
    },
  },
};
</script>
<style>
/* .rows {
  position: absolute;
  top: 2vw;
} */
</style>
<style lang="scss" scoped>
.modelCar {
  .border-box-content {
    .borDer_div {
    }
  }
}
.mainStyle {
  color: #ffffff;
  margin: 2% 5%;
  height: 85%;
  display: flex;
  > div:nth-child(1),
  div:nth-child(3) {
    width: 25%;
    > div {
      width: 100%;
      height: 30%;
      margin: 4% 0;
      > div {
        > div {
          display: flex;
          justify-content: center;
          // width: 94%;
          // margin: 0 3%;
        }
        > div:nth-child(1) {
          padding-top: 2%;
          font-size: 20px;
          font-family: "FZY4JW";
          color: #35f3fd;
        }
        > div:nth-child(2) {
          height: 79%;
        }
      }
    }
  }
  > div:nth-child(2) {
    width: 50%;
    > div {
      padding: 0 2%;
    }
    > div:nth-child(1) {
      margin-top: 1%;
      height: 63%;
      > div > div {
        position: absolute;
        top: 2.5%;
        height: 95% !important;
      }
    }
    > div:nth-child(2) {
      margin-top: 3%;
      height: 35%;
      > div {
        width: 100%;
        height: 100%;
      }
    }
  }
  #container01 {
    width: 100%;
    height: 100%;
    display: flex;
    .container_letf {
      width: 48%;
      text-align: center;
      p {
        margin: 12px;
        padding: 0;
      }
      .title_p {
        color: white;
        font-size: 0.9rem;
      }
    }
    .container_right {
      width: 48%;
      text-align: center;
      p {
        margin: 12px;
        padding: 0;
      }
      .title_p {
        color: white;
        font-size: 0.9rem;
      }
    }
  }
  #container02 {
    margin: 0 1vw;
    .dv-scroll-board {
      .rows {
        position: absolute;
        top: 2vw;
      }
    }
  }
  #container04 {
    display: block;
    margin: 0 5%;
  }
  #container05 {
    display: block;
    margin: 0 5%;
  }
  #container06 {
    margin: 0 1vw;
  }
}
#containerMap {
  background-image: url("../assets/jingchuan.png");
  background-size: 50% 50%;
  background-repeat: no-repeat;
  position: absolute;
  left: 26%;
  top: 20%;
  .bageImg {
    text-align: center;
    margin: 0 auto;
  }
}
.bodys {
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  /*    background-color: #0d243a; */
  background-image: url("https://img.zcool.cn/community/01d6e55e781fafa80120a895b54d6b.png");
  background-size: 100% 100%;
}
.topStyle {
  position: relative;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 1.6% 6% 0 6%;
  font-size: 18px;
  > div:nth-child(2) {
    font-size: 32px;
    font-family: "FZZiYHJW";
    letter-spacing: 3px;
    // margin-left: 4%;
  }
  .topStyle_centen {
    text-align: center;
    width: 40%;
    .title {
      font-size: 25px;
      font-weight: 600;
    }
  }
  .topStyle_frotop {
    width: 30%;
    .topStyle_frotop_tiem {
      position: absolute;
      font-size: 0.5rem;
      top: 0.6rem;
      right: 59px;
    }
  }
}

@font-face {
  font-family: "FZZiYHJW";
  // src: url("@/assets/font/FZZiYHJW.TTF");
}

@font-face {
  font-family: "FZY4JW";
  // src: url("@/assets/font/FZY4JW.TTF");
}
</style>
