<!--
 * @Author: 纪泽龙 jizelong@qq.com
 * @Date: 2026-03-09 13:59:46
 * @LastEditors: 纪泽龙 jizelong@qq.com
 * @LastEditTime: 2026-03-11 17:01:29
 * @FilePath: /chuanganqi/src/views/Ind.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="ind f-d-c">
    <div class="top">
      <div class="time">
        <div class="l">{{ YYYY }}</div>
        <div>{{ HHHH }}</div>
      </div>
      <div class="qw">
        <div class="a">{{ arr[0] }}°C</div>
        <div class="b">{{ arr[1] }}</div>
        <div class="c">{{ arr[2] }}</div>
        <div class="d">{{ arr[3] }}</div>
      </div>
    </div>

    <div class="center f-c">
      <div class="cl f-d-c">
        <div class="tlt">
          <TITLE />
        </div>
        <div class="box f-d-c">
          <PICTEXT
            v-for="item in pictextArr"
            :key="item.text1"
            :src="item.src"
            :text1="item.text1"
            :text2="item.text2"
          />
        </div>
      </div>
      <div class="cc f-d-c">
        <div class="tlt">
          <TITLE text="设备分布" />
        </div>
        <div class="box">
          <CCCOM v-for="item in comData" :itemData="item" :key="item.code" />
        </div>
      </div>
      <div class="cr f-d-c">
        <div class="tlt">
          <TITLE text="老化结果统计（近一周）" />
        </div>
        <div class="text f-c">
          <div class="cr-tx" v-for="item in crtxArr" :key="item.text">
            <div class="t">{{ item.text }}</div>
            <div class="b">{{ item.num }}</div>
          </div>
        </div>
        <div class="box">
          <div class="chars-title">良率统计直方图</div>
          <UserTypeBarChart
            :categories="categories"
            :residential="residential"
            :industrial="industrial"
          />
        </div>
      </div>
    </div>
    <div class="bottom f-c">
      <div class="bl">
        <div class="tlt">
          <TITLE text="传感器异常统计（近一周）" />
        </div>
        <div class="box">
          <HazardOverviewB :items="items" v-if="items.length > 0" />
        </div>
      </div>
      <div class="br">
        <div class="tlt">
          <TITLE text="设备运行日志" />
        </div>
        <div class="box">
          <DeviceScrollTable :rows="tableRows" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TITLE from "@/components/Title.vue";
import PICTEXT from "@/components/picText";
import CCCOM from "@/components/ccCom";
import UserTypeBarChart from "@/components/UserTypeBarChart";
import HazardOverviewB from "@/components/HazardOverviewB";
import DeviceScrollTable from "@/components/DeviceScrollTable";

import cl1 from "@/assets/Ind/cl1.png";
import cl2 from "@/assets/Ind/cl2.png";
import cl3 from "@/assets/Ind/cl3.png";
import cl4 from "@/assets/Ind/cl4.png";

import { getData } from "@/api/httpRequest.js";

export default {
  name: "",
  components: {
    TITLE,
    PICTEXT,
    CCCOM,
    UserTypeBarChart,
    HazardOverviewB,
    DeviceScrollTable,
  },
  data() {
    return {
      YYYY: "",
      HHHH: "",
      comData: [],
      pictextArr: [
        {
          src: cl1,
          text1: "运行设备数量",
          text2: "15",
        },
        {
          src: cl2,
          text1: "空闲设备数量",
          text2: "3",
        },
        {
          src: cl3,
          text1: "停机设备数量",
          text2: "0",
        },
        {
          src: cl4,
          text1: "维护设备数量",
          text2: "2",
        },
      ],
      crtxArr: [
        {
          text: "完成总数",
          num: "490",
        },
        {
          text: "通过数量",
          num: "466",
        },
        {
          text: "异常数量",
          num: "24",
        },
        {
          text: "通过率",
          num: "95%",
        },
      ],
      categories: [],
      residential: [],
      industrial: [],
      items: [],
      tableRows: [],
      arr: [],
    };
  },
  created() {
    setInterval(() => {
      this.YYYY = this.$dayjs().format("YYYY-MM-DD");
      this.HHHH = this.$dayjs().format("HH:mm:ss");
    }, 1000);
    this.init();
  },
  methods: {
    init() {
      getData("cgq-a").then((res) => {
        const data = JSON.parse(res.data[0].jsonDataStr);
        this.pictextArr.forEach((item, index) => {
          item.text2 = data.arr[index];
        });
      });
      getData("cgq-b").then((res) => {
        const data = JSON.parse(res.data[0].jsonDataStr);

        this.comData = data.arr;
      });
      getData("cgq-c").then((res) => {
        const data = JSON.parse(res.data[0].jsonDataStr);
        this.crtxArr.forEach((item, index) => {
          item.num = data.arr[index];
        });
        this.categories = data.chars.a;
        this.residential = data.chars.b;
        this.industrial = data.chars.c;
      });
      getData("cgq-d").then((res) => {
        const data = JSON.parse(res.data[0].jsonDataStr);
        this.items = data.chars;
      });
      getData("cgq-e").then((res) => {
        const data = JSON.parse(res.data[0].jsonDataStr);
        console.log(data);
        this.tableRows = data.table;
      });
        getData("cgq-f").then((res) => {
        const data = JSON.parse(res.data[0].jsonDataStr);
        console.log(data);
        this.arr = data.arr
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.ind {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  padding-bottom: 20px;
}

.time {
  font-size: 28px;
  top: 66px;
  left: 48px;
  display: flex;
  position: absolute;
  color: #fff;
  z-index: 9999;
  .l {
    margin-right: 20px;
  }
}
.qw {
  width: 290px;
  height: 50px;
  background: url("~@/assets/Ind/qw.png") repeat center center;
  background-size: 100%;
  position: absolute;
  top: 60px;
  right: 60px;
  z-index: 9999;
  color: #fff;
  font-size: 28px;
  .a {
    position: absolute;
    top: -3px;
    left: 27px;
  }
  .b {
    position: absolute;
    top: -3px;

    left: 154px;
  }
  .c {
    position: absolute;
    top: -6px;
    left: 264px;
  }
  .d {
    position: absolute;
    top: 31px;
    right: -23px;
    font-size: 14px;
  }
}
.top {
  width: 1920px;
  height: 108px;
  overflow: hidden;
  box-sizing: border-box;
  background: url("~@/assets/Ind/top.png") no-repeat center -12px;
  // background-size:100% 100%;
  // margin-bottom:30px
}
.center,
.bottom {
  > div {
    box-sizing: border-box;
    padding-top: 20px;
    padding-left: 35px;
    padding-bottom: 30px;
    padding-right: 30px;
    overflow: hidden;
    .tlt {
      margin-bottom: 20px;
    }
    .text {
      margin-bottom: 20px;
      .cr-tx {
        color: #fff;
        .t {
          font-size: 16px;
        }
        .b {
          font-size: 28px;
        }
      }
    }
    .box {
      flex: 1;
      // background: red;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      overflow: hidden;
    }
  }
}
.center {
  width: 100%;
  height: 48.1%;
  margin-bottom: 25px;
  box-sizing: border-box;
  padding: 0 40px;

  // background: red;
  .cl {
    width: 280px;
    height: 100%;
    background: url("~@/assets/Ind/cl.png") no-repeat center center;
    background-size: 100% 100%;
  }
  .cc {
    width: 1040px;
    height: 100%;

    background: url("~@/assets/Ind/cc.png") no-repeat center center;
    background-size: 100% 100%;
  }
  .cr {
    width: 448px;
    height: 100%;
    background: url("~@/assets/Ind/cr.png") no-repeat center center;
    background-size: 100% 100%;
  }
}

.bottom {
  width: 100%;
  height: 32.4%;
  box-sizing: border-box;

  padding: 0 40px;
  .bl {
    width: 672px;
    height: 100%;
    background: url("~@/assets/Ind/bl.png") no-repeat center center;
    background-size: 100% 100%;
  }
  .br {
    width: 1136px;
    height: 100%;
    background: url("~@/assets/Ind/br.png") no-repeat center center;
    background-size: 100% 100%;
  }
}
.chars-title {
  color: #fff;
}
</style>
