<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 left2">
            <div class="box">
              <div class="name name1">当天烘房情况</div>
            </div>
            <div class="cards">
              <div class="card-item">
                <div class="card-header">
                  <span class="card-header-left"
                    >生产总数:
                    <span class="color1">{{ Dailyoutputnumber || "0" }}</span>
                    车</span
                  >
                </div>
                <div class="card-box">
                  <div class="list1">
                    <div class="listitem1 header4">烘房</div>
                    <div class="listitem1 header5">产量</div>
                    <div class="listitem1 header6">标准产能</div>
                  </div>
                </div>
                <div class="card-box card-box1">
                  <div
                    class="list"
                    v-for="(card, index) in Dailyoutput"
                    :key="index"
                  >
                    <div class="listitem2"></div>
                    <div
                      class="listitem1"
                      style="min-width: 55px; text-align: center"
                    >
                      {{ card.equCode }}
                    </div>
                    <div
                      class="listitem1"
                      style="min-width: 145px; text-align: center"
                    >
                      {{ card.totalNum }}
                    </div>
                    <div
                      class="listitem1"
                      style="min-width: 120px; text-align: center"
                    >
                      {{ card.unitPro }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="left left1">
            <div class="cards">
              <div class="card-item card-item1">
                <div class="swiper-container" style="height: 100%">
                  <div class="swiper-wrapper">
                    <div
                      class="lefttop swiper-slide"
                      v-for="(card, index) in dataPropdata"
                      :key="index"
                    >
                      <div class="card-header1">
                        <span class="card-header-left1">烘房{{ card.i }}</span>
                      </div>
                      <div class="boximage">
                        <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"
                            style="margin-top: 80px"
                          >
                            <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>
                        <!-- <div class="image1">
                          <img
                            src="../../../assets/images/image1.png"
                            alt="暂无图片"
                          />
                        </div> -->
                        <div class="card-footer">
                          <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
                            class="card-footer-item"
                            style="margin-top: 80px"
                          >
                            <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 class="lefttop swiper-slide">
                    </div> -->
                  </div>
                  <div class="swiper-pagination"></div>
                </div>
              </div>
            </div>
          </div>
          <div class="left left2">
            <div class="box">
              <div class="name name1">当天质量情况</div>
            </div>
            <div class="cards">
              <div class="card-item">
                <div class="card-header">
                  <span class="card-header-left"
                    >不合格异常数量:
                    <span class="color2">{{ Qualityday.length || "0" }}</span>
                    车</span
                  >
                </div>
                <div class="card-box">
                  <div class="list1">
                    <div class="listitem1 header1">烘房</div>
                    <div class="listitem1 header2">托盘号</div>
                    <div class="listitem1 header3">时间</div>
                  </div>
                </div>
                <div class="card-box card-box1">
                  <div
                    class="list"
                    v-for="(card, index) in Qualityday"
                    :key="index"
                  >
                    <div class="listitem2"></div>
                    <div
                      class="listitem1"
                      style="min-width: 80px; text-align: center"
                    >
                      {{ card.equCode }}
                    </div>
                    <div
                      class="listitem1"
                      style="min-width: 120px; text-align: center"
                    >
                      {{ card.rfid }}
                    </div>
                    <div
                      class="listitem1"
                      style="min-width: 170px; text-align: center"
                    >
                      {{ card.createTime || "0" }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="itembottom">
          <div class="left">
            <div class="box">
              <div class="name name1">当天烘房情况</div>
            </div>
            <div class="cards">
              <div class="card-item">
                <div
                  id="echart1"
                  style="margin: auto; width: 1770px; height: 340px"
                ></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- <div class="item"></div> -->
      <!-- <div class="item"></div> -->
    </div>
  </v-scale-screen>
</template>
  
  <script>
import {
  getHFxlInfo,
  getHFQcInfo,
  getHEProInfo,
} from "@/api/kanban/dryingprocess";
import { dryRoomDataCarousel } from "@/api/kanban/dryingroom";
import * as echarts from "echarts";
import moment from "moment";
import Swiper from "swiper";
import { getDeviceRefreshTime } from "@/api/kanban/equipment";
// 引入css
import "swiper/css/swiper.min.css";
// 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: [],
      Dailyoutput: [],
      Qualityday: [],
      echartsdata: [],
      cards: {
        data1: [],
        data2: [],
      },
      cardss: [],
      swiper: null,
      swiperList: [],
      Dailyoutputnumber: null,
      Qualitydaynumber: [],
      dataPropdata: [
        {}
      ],
    };
  },
  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)
    this.gettime();
    this.getSwiper();
    this.getDeviceRefreshTime()

  },
  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 = [];
    },
    getSwiper() {
      this.swiper = new Swiper(".swiper-container", {
        loop: true, // 无缝
        autoplay: {
          //自动开始
          delay: 2000, //时间间隔
          disableOnInteraction: false, //*手动操作轮播图后不会暂停*
        },
        // paginationClickable: true,
        // slidesPerView: 1, // 一组三个
        spaceBetween: 90, // 间隔
        // 如果需要前进后退按钮
        // navigation: {
        //   nextEl: '.swiper-button-next',
        //   prevEl: '.swiper-button-prev',
        // },
        // 窗口变化,重新init,针对F11全屏和放大缩小,必须加
        observer: true,
        observeParents: true,
        // 如果需要分页器
        pagination: {
          el: ".swiper-pagination",
          clickable: true, // 分页器可以点击
        },
      });
    },
    initChart1() {
      const _this = this;
      var xData = [];
      var data1 = [];
      var data4 = [];
      var data0 = [];
      _this.echartsdata.forEach((item) => {
        xData.push(item.equCode);
        data1.push(item.totalNum0);
        data4.push(item.totalNum);
        data0.push(1);
      });
      var data3 = [];
      var data5 = [];
      for (let i = 0; i < data1.length; i++) {
        data3.push(data1[i] + data4[i]);
      }
      for (let i = 0; i < data1.length; i++) {
        data5.push(data1[i]);
      }
      let max = Math.max(...data3);
      var myChart1 = echarts.init(document.querySelector("#echart1"));
      var option1 = {
        // backgroundColor: "#000E1A", //背景色
        tooltip: {
          trigger: "axis",
          borderColor: "rgba(255,255,255,.3)",
          backgroundColor: "rgba(13,5,30,.6)",
          textStyle: {
            color: "white", //设置文字颜色
          },
          borderWidth: 1,
          padding: 5,
          formatter: function (parms) {
            var str =
              "烘房:" +
              parms[0].axisValue +
              "</br>" +
              parms[0].marker +
              "入:" +
              parms[0].value +
              "</br>" +
              parms[1].marker +
              "出:" +
              parms[1].value +
              "</br>";
            return str;
          },
        },
        textStyle: {
          color: "#C9C9C9",
        },

        // color: ['#fbc292', '#06fbfe',  '#f06e91'],
        legend: {
          // type: "scroll",
          // orient: "vertical",
          selectedMode: false, //图例点击失效
          right: "2%",
          top: "1%",
          textStyle: {
            color: "#ffffff",
            fontSize: 22,
          },

          // data: datas.legendData,
        },
        grid: {
          containLabel: true,
          left: "1%",
          top: "10%",
          bottom: "1%",
          right: "1%",
        },
        xAxis: {
          type: "category",
          data: xData,
          axisLine: {
            show: true,
            lineStyle: {
              color: "#B5B5B5",
            },
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: true,
            lineStyle: {
              // 使用深浅的间隔色
              color: ["#B5B5B5"],
              type: "dashed",
              opacity: 0.5,
            },
          },
          axisLabel: {
            margin: 20, //刻度标签与轴线之间的距离。
            textStyle: {
              fontFamily: "Microsoft YaHei",
              color: "#7F889B",
            },
            fontSize: 18,
            fontStyle: "bold",
          },
          data: xData,
        },
        yAxis: [
          {
            type: "value",
            min: 0,
            max: max + 10,
            splitNumber: 5,
            axisLine: {
              show: true,
              lineStyle: {
                color: "#B5B5B5",
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                // 使用深浅的间隔色
                color: ["#B5B5B5"],
                type: "dashed",
                opacity: 0.5,
              },
            },
            axisLabel: {
              show: true,
              textStyle: {
                fontFamily: "Microsoft YaHei",
                color: "#FFF",
              },
              fontSize: 20,
            },
          },
        ],
        series: [
          {
            type: "bar",
            name: "入",
            data: data1,
            stack: "zs",
            barMaxWidth: "auto",
            showBackground: true,
            zlevel: -1,
            barWidth: 60,
            // color: "#40CB89",
            itemStyle: {
              color: {
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                type: "linear",
                global: false,
                colorStops: [
                  {
                    offset: 0,
                    color: "#23B780",
                  },
                  {
                    offset: 1,
                    color: "#64E490",
                  },
                ],
              },
              normal: {
                color: "#40CB89",
                barBorderRadius: 0,

                label: {
                  show: true,
                  position: "inside",
                  color: "white",
                  fontSize: 20,
                  formatter: function (p) {
                    return p.value > 0 ? p.value : "";
                  },
                },
              },
            },
            backgroundStyle: {
              color: "#0E4271", // 设置背景颜色
            },
          },
          {
            name: "出",
            type: "bar",
            data: data4,
            stack: "zs",
            barMaxWidth: "auto",
            zlevel: -1,
            barWidth: 60,
            itemStyle: {
              color: {
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                type: "linear",
                global: false,
                colorStops: [
                  {
                    offset: 0,
                    color: "#0C75FF",
                  },
                  {
                    offset: 1,
                    color: "#01A5FE",
                  },
                ],
              },
              normal: {
                color: "#0886FE",
                barBorderRadius: 0,
                label: {
                  show: true,
                  position: "top",
                  color: "white",
                  fontSize: 20,
                  formatter: function (p) {
                    return p.value > 0 ? p.value : "";
                  },
                },
              },
            },
          },
          {
            data: data0,
            type: "pictorialBar",
            barMaxWidth: "20",
            symbol: "diamond",
            symbolOffset: [0, "50%"],
            symbolSize: [60, 20],
            zlevel: 2,
            itemStyle: {
              normal: {
                color: "#23B780",
              },
            },
          },
          {
            data: data1,
            type: "pictorialBar",
            barMaxWidth: "20",
            symbolPosition: "end",
            symbol: "diamond",
            symbolOffset: [0, "-50%"],
            symbolSize: [60, 20],
            zlevel: 2,
          },
          {
            data: data1,
            type: "pictorialBar",
            barMaxWidth: "20",
            symbolPosition: "end",
            symbol: "diamond",
            symbolOffset: [0, "-50%"],
            symbolSize: [60, 20],
            zlevel: 2,
          },
          {
            data: data5,
            type: "pictorialBar",
            barMaxWidth: "20",
            symbolPosition: "end",
            symbol: "diamond",
            symbolOffset: [0, "-50%"],
            symbolSize: [0, 20],
            zlevel: 2,
          },
          {
            data: data5,
            type: "pictorialBar",
            barMaxWidth: "20",
            symbolPosition: "end",
            symbol: "diamond",
            symbolOffset: [0, "-50%"],
            symbolSize: [60, 20],
            zlevel: 2,
            itemStyle: {
              normal: {
                color: "#64E490",
              },
            },
          },
          {
            data: data3,
            type: "pictorialBar",
            barMaxWidth: "20",
            symbolPosition: "end",
            symbol: "diamond",
            symbolOffset: [0, "-50%"],
            symbolSize: [60, 20],
            zlevel: 2,
            itemStyle: {
              normal: {
                color: "#54BBF3",
              },
            },
          },
        ],
      };
      myChart1.setOption(option1);
    },
    getDatalist() {
      const _this = this;
      this.dataPropdata =[]
      getHEProInfo({
        factoryCode: "ds_999",
      }).then((response) => {
        if (response) {
          if (response.data) {
            _this.Dailyoutputnumber = 0;
            _this.Dailyoutput = response.data;
            _this.Dailyoutput.forEach((item) => {
              if (item.totalNum != null) {
                _this.Dailyoutputnumber =
                  parseFloat(item.totalNum) +
                  parseFloat(_this.Dailyoutputnumber);
              }
            });
          }
        }
      });
      getHFQcInfo({
        factoryCode: "ds_999",
      }).then((response) => {
        if (response) {
          if (response.data) {
            _this.Qualityday = response.data;
            _this.Qualityday.forEach((item) => {
              if (item.createTime != null) {
                item.createTime = moment(item.createTime).format('YYYY-MM-DD HH:mm:ss')
              }
            });
          }
        }
      });
      getHFxlInfo({
        factoryCode: "ds_999",
      }).then((response) => {
        if (response) {
          if (response.data) {
            _this.echartsdata = response.data;
            _this.initChart1();
          }
        }
      });
      dryRoomDataCarousel({ factory: 999 }).then((response) => {
        if (response.data) {
          this.dataPropdata = response.data.dryingroomList;
          console.log("wwwwwwww", this.dataPropdata);
        }
      });
    },
    getDeviceRefreshTime() {
      const _this = this;
      getDeviceRefreshTime().then((response) => {
        if (response) {
          this.RefreshTime = response.data;
          _this.getDatalist();
          this.time2 = setInterval(() => {
            _this.getDatalist();
          }, 1000 * 60 * this.RefreshTime);
        }
      });
    },
    //左侧第一个选择类型下拉框 回调函数
  },
};
</script>
  <style lang="scss" scoped>
.app-container {
  padding: 0px 24px;
}

.home {
  width: 100%;
  // height: 100vh;
  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: 46px;
          // 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: 420px;
            // 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: 481px;
            background: url("../../../assets/images/image1.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: 22px;
            margin-top: 1px;
            .card-header-left {
              display: inline-block;
              min-width: 100px;
              padding: 14px 26px;
              letter-spacing: 8px;
              // background: linear-gradient(to right, #192c56, #11518f, #192c56);
              .color1 {
                color: #0195fd;
              }
              .color2 {
                color: #fb0102;
              }
            }
          }
          .card-box {
            margin-top: 18px;
            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;
              text-align: center;
              .header1 {
                min-width: 118px;
              }
              .header2 {
                min-width: 50px;
              }
              .header3 {
                min-width: 180px;
              }
              .header4 {
                min-width: 110px;
              }
              .header5 {
                min-width: 50px;
              }
              .header6 {
                min-width: 125px;
              }
            }
            .list1::before {
              content: "";
              position: absolute;
              bottom: 40px;
              left: 3%;
              transform: translateX(-50%);
              border-width: 8px;
              border-style: solid;
              border-color: transparent transparent #0496fd transparent;
              transform: rotate(315deg);
            }
            .list {
              border: 2px solid #0a62ab;
              background-color: #114881;
              color: #50b3fe;
              border-radius: 10px;
              display: flex;
              justify-content: space-around;
              align-items: center;
              font-size: 22px;
              min-height: 60px;
              margin-bottom: 5px;
              position: relative;
            }
            .listitem2::before {
              content: "";
              position: absolute;
              bottom: 43px;
              left: 0%;
              transform: translateX(-50%);
              border-width: 8px;
              border-style: solid;
              border-color: transparent transparent #0496fd transparent;
              transform: rotate(315deg);
            }
          }
          .card-box1 {
            margin-top: 5px;
            height: 258px;
            overflow: scroll;
            margin-bottom: 0px;
          }

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

        .swiper-container {
          .swiper-wrapper {
            .lefttop {
              .card-header1 {
                width: 450px;
                height: 13%;
                margin: auto;
                align-items: center;
                text-align: center;
                color: #f6f3f9;
                font-size: 22px;
                margin-top: 1px;
                .card-header-left1 {
                  display: inline-block;
                  min-width: 100px;
                  padding: 14px 26px;
                  letter-spacing: 8px;
                  // background-color: #114989;
                  // box-shadow: 0px 0px 10px 6px #114989;
                  margin-top: 10px;
                  // border-bottom: 1px solid #20aae6;
                }
              }
              .boximage {
                display: flex;
                margin-top: 15px;
                justify-content: space-between;
                .card-footer {
                  height: 25%;
                  margin-top: 25px;
                  width: 140px;
                  .card-footer-item {
                    box-sizing: border-box;
                    width: 100%;
                    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;
                      }
                    }
                  }
                }
                .image1 {
                  // width: 450px;
                  // height: 340px;
                  img {
                    width: 450px;
                    height: 340px;
                  }
                }
              }
            }
          }
        }
      }
      .left2 {
        width: 525px;
        height: 480px;
        background: url("../../../assets/images/bg4.png") no-repeat;
        background-size: 100% 100%;
      }
    }

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

      .left {
        width: 1872px;
        height: 417px;
        background: url("../../../assets/images/bg5.png");
        background-size: 100% 100%;
        .box {
          width: 1872px;
          height: 56px;
          // background: url("../../../assets/images/bg2.png");
          // 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: 100%;
          .card-item {
            width: 100%;
            height: 360px;
            // 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: 481px;
            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: 22px;
            margin-top: 1px;
            .card-header-left {
              display: inline-block;
              min-width: 100px;
              padding: 14px 26px;
              letter-spacing: 8px;
              background: linear-gradient(to right, #192c56, #11518f, #192c56);
              .color1 {
                color: #0195fd;
              }
              .color2 {
                color: #fb0102;
              }
            }
          }
          .card-box {
            margin-top: 18px;
            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;
              text-align: center;
              .header1 {
                min-width: 180px;
              }
              .header2 {
                min-width: 100px;
              }
              .header3 {
                min-width: 210px;
              }
              .header4 {
                min-width: 135px;
              }
              .header5 {
                min-width: 90px;
              }
              .header6 {
                min-width: 80px;
              }
            }
            .list1::before {
              content: "";
              position: absolute;
              bottom: 40px;
              left: 3%;
              transform: translateX(-50%);
              border-width: 8px;
              border-style: solid;
              border-color: transparent transparent #0496fd transparent;
              transform: rotate(315deg);
            }
            .list {
              border: 2px solid #0a62ab;
              background-color: #114881;
              color: #50b3fe;
              border-radius: 10px;
              display: flex;
              justify-content: space-around;
              align-items: center;
              font-size: 22px;
              min-height: 60px;
              margin-bottom: 5px;
              position: relative;
              text-align: center;
            }
            .listitem2 {
              position: absolute;
            }
            .listitem2::before {
              content: "";
              position: absolute;
              bottom: 43px;
              left: 0%;
              transform: translateX(-50%);
              border-width: 8px;
              border-style: solid;
              border-color: transparent transparent #0496fd transparent;
              transform: rotate(315deg);
            }
          }
          .card-box1 {
            margin-top: 5px;
            height: 258px;
            overflow: scroll;
            margin-bottom: 0px;
          }

          .ring-charts {
            height: 55%;
          }
        }
      }
    }
  }
}

.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> 
  