<template>
  <ScaleScreen
    :width="1920"
    :height="1080"
    class="scale-wrap"
    :selfAdaption="true"
    fullScreen
  >
    <div id="index" ref="appRef">
      <div class="bg">
        <dv-loading v-if="loading">Loading...</dv-loading>
        <div v-else class="host-body">
          <div class="d-flex jc-between headerWrapper"></div>
          <div class="mainWrapper">
            <div class="leftBg"></div>
            <div class="m-left">
              <div class="title"><span>车辆信息</span></div>
              <div class="detection">
                <p v-if="!reportInfo.Score">检测中</p>
                <p v-else>{{ reportInfo.Score }}</p>
                <p class="d-mark">电池评分</p>
                <p class="d-date"><span>评估日期：</span>{{ reportInfo.EvalDate }}</p>
              </div>
              <div class="box">
                <p>电池类型</p>
                <p v-show="batteryShow">{{ batteryInfo.BatteryType }}</p>
              </div>
              <div class="box1 box">
                <p>判别位</p>
                <p v-show="batteryShow">{{ batteryInfo.DiscriminantPosition }}</p>
              </div>
              <div class="box3 box">
                <p>车牌号</p>
                <p v-show="carNumShow">{{ carInfo.LicensePlateNumber }}</p>
              </div>
              <div class="box4 box">
                <p>电池额定容量</p>
                <p v-show="batteryShow">{{ batteryInfo.RatedCapacityBattery }}</p>
              </div>
              <div class="box5 box">
                <p>VIN</p>
                <p style="font-size: 12px" v-show="carNumShow">{{ frameInfo.VIN }}</p>
              </div>
              <div class="box6 box">
                <p>电池标称能量</p>
                <p v-show="batteryShow">{{ batteryInfo.BatteryNominalEnergy }}</p>
              </div>
              <p class="title title2"><span>电池健康度检测</span></p>
              <ul>
                <li>
                  <span>电压</span>
                  <span v-show="batteryShow">{{ batteryInfo.Voltage }}</span
                  >V
                </li>
                <li>
                  <span>电流</span>
                  <span v-show="batteryShow">{{ batteryInfo.ElectricCurrent }}</span
                  >A
                </li>
              </ul>
              <ul>
                <li>
                  <span>功率</span>
                  <span v-show="batteryShow">{{ batteryInfo.Power }}</span
                  >kW
                </li>
                <li>
                  <span>电量</span>
                  <span v-show="batteryShow">{{ batteryInfo.QuantityElectricity }}</span
                  >kWh
                </li>
              </ul>
              <ul>
                <li>
                  <span>单体最高电压</span>
                  <span v-show="batteryShow">{{ batteryInfo.MaximumVoltagePerUnit }}</span
                  >V
                </li>
                <li>
                  <span>单体最低电压</span>
                  <span v-show="batteryShow">{{ batteryInfo.MinimumVoltagePerUnit }}</span
                  >V
                </li>
              </ul>
              <ul>
                <li>
                  <span>开始SOC</span>
                  <span v-show="batteryShow">{{ batteryInfo.StartSoc }}</span
                  >V
                </li>
                <li>
                  <span>结束SOC</span>
                  <span v-show="batteryShow">{{ batteryInfo.EndSoc }}</span
                  >V
                </li>
              </ul>
              <p class="chargeBegin">
                <span>充电开始时间</span
                ><span v-show="batteryShow">{{ batteryInfo.ChargingStartTime }}</span>
              </p>
              <p class="chargeEnd">
                <span>充电结束时间</span
                ><span v-show="batteryShow">{{ batteryInfo.ChargingEndTime }}</span>
              </p>
              <p class="title title3"><span>360°车体探伤检测</span></p>
              <div class="carAppearance">
                <!-- <div class="overall">
                  <img src="../assets/shouye/carAll.png" alt="" />
                </div>
                <div class="four">
                  <div><img src="../assets/shouye/frontLeft.png" alt="" /></div>
                  <div><img src="../assets/shouye/frontRight.png" alt="" /></div>
                  <div><img src="../assets/shouye/rearLeft.png" alt="" /></div>
                  <div><img src="../assets/shouye/rearRight.png" alt="" /></div>
                </div> -->
              </div>
            </div>
            <div class="m-main">
              <!-- <img @click="getQrcode()" src="../assets/car.png" alt="" /> -->
              <canvas ref="bgcode" class="bgcode"> </canvas>
              <!-- <canvas ref="jhcode" class="jhcode" @click="getJhcode()"> </canvas> -->
            </div>
            <div class="rightBg"></div>
            <div class="m-right">
              <p class="title"><span>红外检测</span></p>
              <div class="infrared">
                <!-- <img src="../assets/shouye/infrared.png" alt="" /> -->
              </div>
              <p class="title"><span>紫外检测</span></p>
              <div class="ultraviolet">
                <!-- <img src="../assets/shouye/ultraviolet.png" alt="" /> -->
              </div>
              <p class="title"><span>声纹检测</span></p>
              <div v-show="!voiceprintShow" class="voiceprintBg">声纹检测中...</div>
              <div id="chart1" ref="chart1" class="chart1" v-show="voiceprintShow"></div>
              <div id="chart2" ref="chart2" class="chart2" v-show="voiceprintShow"></div>
            </div>
          </div>
          <div class="mainBottom"></div>
          <!-- <layoutMain></layoutMain> -->
        </div>
      </div>
    </div>
  </ScaleScreen>
</template>

<script>
// import echarts from 'echarts'
import QRCode from "qrcode";
import * as echarts from "echarts";
// import drawMixin from "@/utils/drawMixin";
import { formatTime } from "@/utils/index.js";
import layoutMain from "@/components/layout/index.vue";
import ScaleScreen from "@/components/scale-screen/scale-screen.vue";
import projectData from "@/utils/data.json";
export default {
  // mixins: [drawMixin],
  data() {
    return {
      timing: null,
      loading: true,
      dateDay: null,
      dateYear: null,
      dateWeek: null,
      weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
      decorationColor: ["#568aea", "#000000"],
      leftTabData: [
        {
          label: "健身锻炼综合数据",
          value: "/integratedData",
        },
        {
          label: "赛事活动",
          value: "/matchActivity",
        },
        {
          label: "体育场地设施",
          value: "/sportFacilities",
        },
        {
          label: "体育社会组织",
          value: "/sportsSociety",
        },
        {
          label: "社会指导员",
          value: "/socialInstructor",
        },
      ],
      rightTabData: [
        {
          label: "百姓健身房",
          value: "/fitnessSite",
        },
        {
          label: "基层体育委员组织",
          value: "/grassrootsSports",
        },
        {
          label: "百姓运动码",
          value: "/sportCode",
        },
        {
          label: "运动银行",
          value: "/sportsBank",
        },
      ],
      currentTab: "/integratedData",
      menudata: [],
      projectName: "",
      viewData: {},
      topicSends: [], //mqttTopic
      carInfo: {}, //车辆信息
      frameInfo: {}, //车架号信息
      batteryInfo: {}, //电池信息
      reportInfo: {}, //报告信息
      PcmInfo: {}, //音频波信息
      FeaturesInfo: {}, //时频波信息
      xData: [],
      yData: [],
      carNumShow: false, //车牌号展示
      batteryShow: false, //电池数据展示
      voiceprintShow: false, //声纹检测
      reportShow:false, //报告评分展示
    };
  },
  components: {
    layoutMain,
    ScaleScreen,
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      vm.getCurrentIndex(to.path);
    });
  },
  mounted() {
    this.timeFn();
    this.cancelLoading();
    this.$nextTick(() => {
      // this.initChart();
      this.initChart2();
    });
    //mqtt订阅
    this.createMqtt();
  },
  beforeDestroy() {
    clearInterval(this.timing);
  },
  created() {
    this.getMenuData();
    let that = this;
    window.getCode = that.getCode;
  },
  methods: {
    getCode(val) {
      if (val == "二维码") {
        this.getQrcode();
        this.reportShow = true
      } else if (val == "车牌识别") {
        this.carNumShow = true;
      } else if (val == "电池检测") {
        this.batteryShow = true;
      } else if (val == "声纹检测") {
        this.voiceprintShow = true;
      }
    },
    getJhcode() {
      var text1 =
        window.g.H5_IP +
        "/#/pages/balanced/index?DetectionReportId=21ad44647c8a4b9c871af5bae82d160a";
      QRCode.toCanvas(this.$refs.jhcode, text1, function (error) {
        if (error) {
          console.error("生成二维码时出错:", error);
        } else {
          console.log("二维码生成成功!");
        }
      });
    },
    getQrcode() {
      var text1 =
        window.g.H5_IP +
        "?DetectionReportId="+this.reportInfo.DetectionReportId;
      QRCode.toCanvas(this.$refs.bgcode, text1, function (error) {
        if (error) {
          console.error("生成二维码时出错:", error);
        } else {
          console.log("二维码生成成功!");
        }
      });
    },
    getNoiseHelper(global) {
      var module = {};

      function Grad(x, y, z) {
        this.x = x;
        this.y = y;
        this.z = z;
      }

      Grad.prototype.dot2 = function (x, y) {
        return this.x * x + this.y * y;
      };

      Grad.prototype.dot3 = function (x, y, z) {
        return this.x * x + this.y * y + this.z * z;
      };

      var grad3 = [
        new Grad(1, 1, 0),
        new Grad(-1, 1, 0),
        new Grad(1, -1, 0),
        new Grad(-1, -1, 0),
        new Grad(1, 0, 1),
        new Grad(-1, 0, 1),
        new Grad(1, 0, -1),
        new Grad(-1, 0, -1),
        new Grad(0, 1, 1),
        new Grad(0, -1, 1),
        new Grad(0, 1, -1),
        new Grad(0, -1, -1),
      ];

      var p = [
        151,
        160,
        137,
        91,
        90,
        15,
        131,
        13,
        201,
        95,
        96,
        53,
        194,
        233,
        7,
        225,
        140,
        36,
        103,
        30,
        69,
        142,
        8,
        99,
        37,
        240,
        21,
        10,
        23,
        190,
        6,
        148,
        247,
        120,
        234,
        75,
        0,
        26,
        197,
        62,
        94,
        252,
        219,
        203,
        117,
        35,
        11,
        32,
        57,
        177,
        33,
        88,
        237,
        149,
        56,
        87,
        174,
        20,
        125,
        136,
        171,
        168,
        68,
        175,
        74,
        165,
        71,
        134,
        139,
        48,
        27,
        166,
        77,
        146,
        158,
        231,
        83,
        111,
        229,
        122,
        60,
        211,
        133,
        230,
        220,
        105,
        92,
        41,
        55,
        46,
        245,
        40,
        244,
        102,
        143,
        54,
        65,
        25,
        63,
        161,
        1,
        216,
        80,
        73,
        209,
        76,
        132,
        187,
        208,
        89,
        18,
        169,
        200,
        196,
        135,
        130,
        116,
        188,
        159,
        86,
        164,
        100,
        109,
        198,
        173,
        186,
        3,
        64,
        52,
        217,
        226,
        250,
        124,
        123,
        5,
        202,
        38,
        147,
        118,
        126,
        255,
        82,
        85,
        212,
        207,
        206,
        59,
        227,
        47,
        16,
        58,
        17,
        182,
        189,
        28,
        42,
        223,
        183,
        170,
        213,
        119,
        248,
        152,
        2,
        44,
        154,
        163,
        70,
        221,
        153,
        101,
        155,
        167,
        43,
        172,
        9,
        129,
        22,
        39,
        253,
        19,
        98,
        108,
        110,
        79,
        113,
        224,
        232,
        178,
        185,
        112,
        104,
        218,
        246,
        97,
        228,
        251,
        34,
        242,
        193,
        238,
        210,
        144,
        12,
        191,
        179,
        162,
        241,
        81,
        51,
        145,
        235,
        249,
        14,
        239,
        107,
        49,
        192,
        214,
        31,
        181,
        199,
        106,
        157,
        184,
        84,
        204,
        176,
        115,
        121,
        50,
        45,
        127,
        4,
        150,
        254,
        138,
        236,
        205,
        93,
        222,
        114,
        67,
        29,
        24,
        72,
        243,
        141,
        128,
        195,
        78,
        66,
        215,
        61,
        156,
        180,
      ];
      // To remove the need for index wrapping, double the permutation table length
      var perm = new Array(512);
      var gradP = new Array(512);

      // This isn't a very good seeding function, but it works ok. It supports 2^16
      // different seed values. Write something better if you need more seeds.
      module.seed = function (seed) {
        if (seed > 0 && seed < 1) {
          // Scale the seed out
          seed *= 65536;
        }

        seed = Math.floor(seed);
        if (seed < 256) {
          seed |= seed << 8;
        }

        for (var i = 0; i < 256; i++) {
          var v;
          if (i & 1) {
            v = p[i] ^ (seed & 255);
          } else {
            v = p[i] ^ ((seed >> 8) & 255);
          }

          perm[i] = perm[i + 256] = v;
          gradP[i] = gradP[i + 256] = grad3[v % 12];
        }
      };

      module.seed(0);

      /*
for(var i=0; i<256; i++) {
  perm[i] = perm[i + 256] = p[i];
  gradP[i] = gradP[i + 256] = grad3[perm[i] % 12];
}*/

      // Skewing and unskewing factors for 2, 3, and 4 dimensions
      var F2 = 0.5 * (Math.sqrt(3) - 1);
      var G2 = (3 - Math.sqrt(3)) / 6;

      var F3 = 1 / 3;
      var G3 = 1 / 6;

      // 2D simplex noise
      module.simplex2 = function (xin, yin) {
        var n0, n1, n2; // Noise contributions from the three corners
        // Skew the input space to determine which simplex cell we're in
        var s = (xin + yin) * F2; // Hairy factor for 2D
        var i = Math.floor(xin + s);
        var j = Math.floor(yin + s);
        var t = (i + j) * G2;
        var x0 = xin - i + t; // The x,y distances from the cell origin, unskewed.
        var y0 = yin - j + t;
        // For the 2D case, the simplex shape is an equilateral triangle.
        // Determine which simplex we are in.
        var i1, j1; // Offsets for second (middle) corner of simplex in (i,j) coords
        if (x0 > y0) {
          // lower triangle, XY order: (0,0)->(1,0)->(1,1)
          i1 = 1;
          j1 = 0;
        } else {
          // upper triangle, YX order: (0,0)->(0,1)->(1,1)
          i1 = 0;
          j1 = 1;
        }
        // A step of (1,0) in (i,j) means a step of (1-c,-c) in (x,y), and
        // a step of (0,1) in (i,j) means a step of (-c,1-c) in (x,y), where
        // c = (3-sqrt(3))/6
        var x1 = x0 - i1 + G2; // Offsets for middle corner in (x,y) unskewed coords
        var y1 = y0 - j1 + G2;
        var x2 = x0 - 1 + 2 * G2; // Offsets for last corner in (x,y) unskewed coords
        var y2 = y0 - 1 + 2 * G2;
        // Work out the hashed gradient indices of the three simplex corners
        i &= 255;
        j &= 255;
        var gi0 = gradP[i + perm[j]];
        var gi1 = gradP[i + i1 + perm[j + j1]];
        var gi2 = gradP[i + 1 + perm[j + 1]];
        // Calculate the contribution from the three corners
        var t0 = 0.5 - x0 * x0 - y0 * y0;
        if (t0 < 0) {
          n0 = 0;
        } else {
          t0 *= t0;
          n0 = t0 * t0 * gi0.dot2(x0, y0); // (x,y) of grad3 used for 2D gradient
        }
        var t1 = 0.5 - x1 * x1 - y1 * y1;
        if (t1 < 0) {
          n1 = 0;
        } else {
          t1 *= t1;
          n1 = t1 * t1 * gi1.dot2(x1, y1);
        }
        var t2 = 0.5 - x2 * x2 - y2 * y2;
        if (t2 < 0) {
          n2 = 0;
        } else {
          t2 *= t2;
          n2 = t2 * t2 * gi2.dot2(x2, y2);
        }
        // Add contributions from each corner to get the final noise value.
        // The result is scaled to return values in the interval [-1,1].
        return 70 * (n0 + n1 + n2);
      };

      // 3D simplex noise
      module.simplex3 = function (xin, yin, zin) {
        var n0, n1, n2, n3; // Noise contributions from the four corners

        // Skew the input space to determine which simplex cell we're in
        var s = (xin + yin + zin) * F3; // Hairy factor for 2D
        var i = Math.floor(xin + s);
        var j = Math.floor(yin + s);
        var k = Math.floor(zin + s);

        var t = (i + j + k) * G3;
        var x0 = xin - i + t; // The x,y distances from the cell origin, unskewed.
        var y0 = yin - j + t;
        var z0 = zin - k + t;

        // For the 3D case, the simplex shape is a slightly irregular tetrahedron.
        // Determine which simplex we are in.
        var i1, j1, k1; // Offsets for second corner of simplex in (i,j,k) coords
        var i2, j2, k2; // Offsets for third corner of simplex in (i,j,k) coords
        if (x0 >= y0) {
          if (y0 >= z0) {
            i1 = 1;
            j1 = 0;
            k1 = 0;
            i2 = 1;
            j2 = 1;
            k2 = 0;
          } else if (x0 >= z0) {
            i1 = 1;
            j1 = 0;
            k1 = 0;
            i2 = 1;
            j2 = 0;
            k2 = 1;
          } else {
            i1 = 0;
            j1 = 0;
            k1 = 1;
            i2 = 1;
            j2 = 0;
            k2 = 1;
          }
        } else {
          if (y0 < z0) {
            i1 = 0;
            j1 = 0;
            k1 = 1;
            i2 = 0;
            j2 = 1;
            k2 = 1;
          } else if (x0 < z0) {
            i1 = 0;
            j1 = 1;
            k1 = 0;
            i2 = 0;
            j2 = 1;
            k2 = 1;
          } else {
            i1 = 0;
            j1 = 1;
            k1 = 0;
            i2 = 1;
            j2 = 1;
            k2 = 0;
          }
        }
        // A step of (1,0,0) in (i,j,k) means a step of (1-c,-c,-c) in (x,y,z),
        // a step of (0,1,0) in (i,j,k) means a step of (-c,1-c,-c) in (x,y,z), and
        // a step of (0,0,1) in (i,j,k) means a step of (-c,-c,1-c) in (x,y,z), where
        // c = 1/6.
        var x1 = x0 - i1 + G3; // Offsets for second corner
        var y1 = y0 - j1 + G3;
        var z1 = z0 - k1 + G3;

        var x2 = x0 - i2 + 2 * G3; // Offsets for third corner
        var y2 = y0 - j2 + 2 * G3;
        var z2 = z0 - k2 + 2 * G3;

        var x3 = x0 - 1 + 3 * G3; // Offsets for fourth corner
        var y3 = y0 - 1 + 3 * G3;
        var z3 = z0 - 1 + 3 * G3;

        // Work out the hashed gradient indices of the four simplex corners
        i &= 255;
        j &= 255;
        k &= 255;
        var gi0 = gradP[i + perm[j + perm[k]]];
        var gi1 = gradP[i + i1 + perm[j + j1 + perm[k + k1]]];
        var gi2 = gradP[i + i2 + perm[j + j2 + perm[k + k2]]];
        var gi3 = gradP[i + 1 + perm[j + 1 + perm[k + 1]]];

        // Calculate the contribution from the four corners
        var t0 = 0.6 - x0 * x0 - y0 * y0 - z0 * z0;
        if (t0 < 0) {
          n0 = 0;
        } else {
          t0 *= t0;
          n0 = t0 * t0 * gi0.dot3(x0, y0, z0); // (x,y) of grad3 used for 2D gradient
        }
        var t1 = 0.6 - x1 * x1 - y1 * y1 - z1 * z1;
        if (t1 < 0) {
          n1 = 0;
        } else {
          t1 *= t1;
          n1 = t1 * t1 * gi1.dot3(x1, y1, z1);
        }
        var t2 = 0.6 - x2 * x2 - y2 * y2 - z2 * z2;
        if (t2 < 0) {
          n2 = 0;
        } else {
          t2 *= t2;
          n2 = t2 * t2 * gi2.dot3(x2, y2, z2);
        }
        var t3 = 0.6 - x3 * x3 - y3 * y3 - z3 * z3;
        if (t3 < 0) {
          n3 = 0;
        } else {
          t3 *= t3;
          n3 = t3 * t3 * gi3.dot3(x3, y3, z3);
        }
        // Add contributions from each corner to get the final noise value.
        // The result is scaled to return values in the interval [-1,1].
        return 32 * (n0 + n1 + n2 + n3);
      };

      // ##### Perlin noise stuff

      function fade(t) {
        return t * t * t * (t * (t * 6 - 15) + 10);
      }

      function lerp(a, b, t) {
        return (1 - t) * a + t * b;
      }

      // 2D Perlin Noise
      module.perlin2 = function (x, y) {
        // Find unit grid cell containing point
        var X = Math.floor(x),
          Y = Math.floor(y);
        // Get relative xy coordinates of point within that cell
        x = x - X;
        y = y - Y;
        // Wrap the integer cells at 255 (smaller integer period can be introduced here)
        X = X & 255;
        Y = Y & 255;

        // Calculate noise contributions from each of the four corners
        var n00 = gradP[X + perm[Y]].dot2(x, y);
        var n01 = gradP[X + perm[Y + 1]].dot2(x, y - 1);
        var n10 = gradP[X + 1 + perm[Y]].dot2(x - 1, y);
        var n11 = gradP[X + 1 + perm[Y + 1]].dot2(x - 1, y - 1);

        // Compute the fade curve value for x
        var u = fade(x);

        // Interpolate the four results
        return lerp(lerp(n00, n10, u), lerp(n01, n11, u), fade(y));
      };

      // 3D Perlin Noise
      module.perlin3 = function (x, y, z) {
        // Find unit grid cell containing point
        var X = Math.floor(x),
          Y = Math.floor(y),
          Z = Math.floor(z);
        // Get relative xyz coordinates of point within that cell
        x = x - X;
        y = y - Y;
        z = z - Z;
        // Wrap the integer cells at 255 (smaller integer period can be introduced here)
        X = X & 255;
        Y = Y & 255;
        Z = Z & 255;

        // Calculate noise contributions from each of the eight corners
        var n000 = gradP[X + perm[Y + perm[Z]]].dot3(x, y, z);
        var n001 = gradP[X + perm[Y + perm[Z + 1]]].dot3(x, y, z - 1);
        var n010 = gradP[X + perm[Y + 1 + perm[Z]]].dot3(x, y - 1, z);
        var n011 = gradP[X + perm[Y + 1 + perm[Z + 1]]].dot3(x, y - 1, z - 1);
        var n100 = gradP[X + 1 + perm[Y + perm[Z]]].dot3(x - 1, y, z);
        var n101 = gradP[X + 1 + perm[Y + perm[Z + 1]]].dot3(x - 1, y, z - 1);
        var n110 = gradP[X + 1 + perm[Y + 1 + perm[Z]]].dot3(x - 1, y - 1, z);
        var n111 = gradP[X + 1 + perm[Y + 1 + perm[Z + 1]]].dot3(x - 1, y - 1, z - 1);

        // Compute the fade curve value for x, y, z
        var u = fade(x);
        var v = fade(y);
        var w = fade(z);

        // Interpolate
        return lerp(
          lerp(lerp(n000, n100, u), lerp(n001, n101, u), w),
          lerp(lerp(n010, n110, u), lerp(n011, n111, u), w),
          v
        );
      };

      return module;
    },
    generateData(theta, min, max) {
      var noise = this.getNoiseHelper();
      noise.seed(Math.random());
      const x = 55,
        y = 40;
      var data = [];
      this.yData = [];
      this.xData = [];
      for (var i = 0; i <= x; i++) {
        for (var j = 0; j <= y; j++) {
          data.push([i, j, noise.perlin2((i / x) * 2, (j / y) * 2) + 0.5]);
        }
        this.xData.push(i);
      }
      let yData = this.FeaturesInfo.yData;
      data = data.map((item, index) => {
        return [item[0], item[1], yData[index]]; // 替换第三位为 yData 中的值
      });
      // console.log(data,'data');
      // this.xData = this.FeaturesInfo.xLim;
      for (var j = 0; j < y; j++) {
        this.yData.push(j);
        // this.yData = this.FeaturesInfo.yLim;
      }
      return data;
    },
    initChart() {
      // const chartDom = this.$refs.chart;
      setTimeout(() => {
        var chartDom = document.getElementById("chart2");
        this.myChart = echarts.init(chartDom);
        var data = this.generateData(2, -5, 5);
        var option = {
          textStyle: {
            color: "#fff",
          },
          height: 115,
          tooltip: {},
          grid: {
            left: "3%",
            right: "1%",
            bottom: "10%",
            top: "20%",
            containLabel: true,
          },
          xAxis: {
            axisLabel: {
              show: false,
            },
            axisTick: {
              show: false,
              alignWithLabel: true,
            },
            type: "category",
            data: this.xData,
          },
          yAxis: {
            type: "category",
            data: this.yData,
          },
          visualMap: {
            min: 0,
            max: 60,
            calculable: true,
            realtime: false,
            orient: "horizontal",
            calculable: false,
            itemWidth: "10",
            top: 0,
            right: 0,
            inRange: {
              color: [
                "#rgb(0,0,0)",
                "rgb(115,32,129)",
                "rgb(219,72,105)",
                "rgb(254,175,108)",
                "rgb(253,235,172)",
              ],
            },
            text: ["", ""],
            textStyle: { color: "#fff" },
          },
          series: [
            {
              name: "Gaussian",
              type: "heatmap",
              data: data,
              itemStyle: {
                emphasis: {
                  // borderColor: '#333',
                  // borderWidth: 1
                },
              },
              progressive: 1000,
              animation: false,
            },
          ],
        };
        this.myChart.setOption(option);
        window.addEventListener("resize", () => {
          this.myChart.resize();
        });
      }, 1000);
    },
    initChart2() {
      setTimeout(() => {
        let xData = [];
        for (let i = 0; i <= 2401; i++) {
          xData.push(i);
        }
        var chartDom1 = document.getElementById("chart1");
        this.myChart1 = echarts.init(chartDom1);
        var option1;
        // const rawData = [0.1, 0.5, 0.7, 0.9, 0.3, 0.1, 0.5, 0.7, 0.9, 0.3]; // 示例数据，确保数据在0到1之间
        const rawData = this.FeaturesInfo.yData;;
        const grid = {
          left: 10,
          right: 40,
          top: 35,
          bottom: 10,
          containLabel: true,
        };
        option1 = {
          grid,
          series: [
            {
              stack: "total",
              barWidth: "30%",
              data: rawData,
              type: "line",
              itemStyle: {
                color: "#05D9ED", // 绿色
              },
            },
          ],
          yAxis: {
            name: "dB",
            nameTextStyle: {
              color: "rgb(255, 255, 255)",
              fontSize: 13,
            },
            type: "value",
            // min: 0,
            // max: 1,
            axisLabel: {
              show: true,
              color: "#FFFFFF",
            },
            splitLine: {
              show: true, // 显示分割线
              lineStyle: {
                color: "#ccc", // 设置网格线颜色
                type: "dashed", // 设置为虚线
                width: 1, // 设置网格线宽度
              },
            },
          },
          xAxis: {
            type: "category",
            data: xData,
            // min: '0',
            // max: '10',
            boundaryGap: true,
            axisTick: {
              show: false,
              alignWithLabel: true,
            },
            axisLabel: {
              show: true,
              // interval: 1,
              color: "#FFFFFF",
            },
          },
          graphic: [
            {
              type: "text",
              right: "0%", // 相对于容器左侧的位置
              top: "10%", // 相对于容器顶部的位置
              style: {
                text: "正  特",
                fontSize: 12,
                fill: "#FFF", // 文本颜色
              },
            },
            {
              type: "text",
              right: "0%", // 相对于容器左侧的位置
              top: "20%", // 相对于容器顶部的位置
              style: {
                text: "常  征",
                fontSize: 12,
                fill: "#FFF", // 文本颜色
              },
            },
            {
              type: "text",
              right: "0%", // 相对于容器左侧的位置
              top: "35%", // 相对于容器顶部的位置
              style: {
                text: "声  范",
                fontSize: 12,
                fill: "#FFF", // 文本颜色
              },
            },
            {
              type: "text",
              right: "0%", // 相对于容器左侧的位置
              top: "50%", // 相对于容器顶部的位置
              style: {
                text: "纹  围",
                fontSize: 12,
                fill: "#FFF", // 文本颜色
              },
            },
            {
              type: "text",
              right: "0%", // 相对于容器左侧的位置
              top: "78%", // 相对于容器顶部的位置
              style: {
                text: "Hz",
                fontSize: 10,
                fill: "#FFF 50%", // 文本颜色
              },
            },
          ],
        };
        this.myChart1.setOption(option1);
        window.addEventListener("resize", () => {
          this.myChart1.resize();
        });
      }, 1000);
    },
    onResize() {
      if (this.myChart) {
        this.myChart.resize(); // 重新计算图表尺寸
      }
    },
    getMenuData() {
      this.projectName = "健身锻炼综合数据";
      this.currentTab = `/integratedData`;
      this.$router.push({
        path: `/integratedData`,
      });
    },
    timeFn() {
      this.timing = setInterval(() => {
        this.dateDay = formatTime(new Date(), "HH: mm: ss");
        this.dateYear = formatTime(new Date(), "yyyy-MM-dd");
        this.dateWeek = this.weekday[new Date().getDay()];
      }, 1000);
    },
    cancelLoading() {
      setTimeout(() => {
        this.loading = false;
      }, 500);
    },
    routeChange(data) {
      if (data.value && data.value != "" && data.value != this.currentTab) {
        this.projectName = data.label;
        this.currentTab = data.value;
        this.$router.push(`${data.value}`);
      }
    },
    getCurrentIndex(path) {
      this.currentTab = path;
    },

    //mqtt订阅数据
    createMqtt() {
      this.topicSends = [
        "LicensePlateData",
        "CollectorData",
        "BatteryData",
        "DetectionReportData",
        "PcmData",
        "Features",
      ];
      window.PubScribe(this.topicSends, this.realInfo);
    },
    /** 实时数据分类 */
    realInfo(topic, message) {
      switch (topic) {
        // 接收车牌号主题
        case "LicensePlateData":
          try {
            const utf8decoder = new TextDecoder();
            const u8arr = new Uint8Array(message);
            const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
            const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
            console.log("车牌号msg", msg); //msg为转换后的JSON数据
            this.carInfo = msg;
          } catch (error) {}
          break;
        //车架号主题
        case "CollectorData":
          try {
            const utf8decoder = new TextDecoder();
            const u8arr = new Uint8Array(message);
            const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
            const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
            console.log("车架号msg", msg); //msg为转换后的JSON数据
            this.frameInfo = msg;
          } catch (error) {}
          break;
        //电池主题
        case "BatteryData":
          try {
            const utf8decoder = new TextDecoder();
            const u8arr = new Uint8Array(message);
            const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
            const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
            console.log("电池msg", msg); //msg为转换后的JSON数据
            this.batteryInfo = msg;
          } catch (error) {}
          break;
        //报告主题
        case "DetectionReportData":
          try {
            const utf8decoder = new TextDecoder();
            const u8arr = new Uint8Array(message);
            const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
            const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
            console.log("报告msg", msg); //msg为转换后的JSON数据
            this.reportInfo = msg;
          } catch (error) {}
          break;
        //音频波形主题
        case "PcmData":
          try {
            const utf8decoder = new TextDecoder();
            const u8arr = new Uint8Array(message);
            const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
            const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
            console.log("音频msg", msg); //msg为转换后的JSON数据
            this.PcmInfo = msg;
            this.initChart2();
          } catch (error) {}
          break;
        //时频图主题
        case "Features":
          try {
            const utf8decoder = new TextDecoder();
            const u8arr = new Uint8Array(message);
            const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
            const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
            console.log("时频图msg", msg); //msg为转换后的JSON数据
            this.FeaturesInfo = msg;
            this.initChart();
            this.initChart2();
          } catch (error) {}
          break;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../assets/scss/index.scss";

.scale-wrap {
  width: 1920px;
  height: 1080px;

  .bg {
    width: 100%;
    height: 100%;
    // padding: 16px 16px 0 16px;
    // background-image: url("../assets/pageBg.png");
    background-size: cover;
    background-position: center center;

    .headerWrapper {
      height: 90px;
      width: 100%;
      background-image: url("../assets/header.png");
      background-size: cover;
      // background-position: center center;
      z-index: 10;
      position: relative;

      & > div {
        padding-top: 38px;
      }

      .aside-width {
        flex: 1;
        justify-content: space-around;
      }

      .projectName {
        width: 300px;
        text-align: center;
        padding-top: 20px;
        margin: 0 90px;
        font-size: 30px;
        font-weight: bold;
        color: #fff;
        text-shadow: 5px 5px 5px 5px red;
      }

      .leftBox,
      .rightBox {
        min-width: 100px;
        padding: 14px 20px 6px;
        background-color: none;

        &.active {
          background-image: url("../assets/tab_active.png");
          background-size: 100% 100%;
          background-position: center center;
        }
      }
    }

    .mainWrapper {
      height: 990px;
      width: 100%;
      display: flex;
      .leftBg {
        position: absolute;
        width: 475px;
        background: url("../assets/leftBg.png") no-repeat;
        background-size: 100% 100%;
        height: 100%;
        top: 0;
        z-index: 1;
      }
      .m-left {
        width: 475px;
        padding-left: 30px;
        z-index: 999;

        .title {
          width: 410px !important;
          height: 40px;
          line-height: 40px;
          background-image: url("../assets/shouye/yiji.png");
          // background-size: cover;
          background-size: 100% 100%;
          // background-position: center center;
          text-align: left !important;
          padding-left: 43px;
          font-family: "庞门正道";
          font-weight: 400;
          font-size: 22px;
          color: #fff;
          span {
            // background: -webkit-linear-gradient(top, #ffffff, #28B4FF);
            background: linear-gradient(180deg, #ffffff 25%, #28b4ff 100%);
            -webkit-text-stroke: 0px #28b4ff;
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            color: transparent;
            display: inline-block;
          }
        }

        .detection {
          width: 196px;
          height: 114px;
          margin-top: 18px;
          background-image: url("../assets/shouye/mark.png");
          background-size: 100% 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          position: relative;

          p:first-child {
            font-family: Alibaba PuHuiTi 2, Alibaba PuHuiTi 20;
            font-weight: 500;
            font-size: 18px;
            text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
            font-style: normal;
            text-transform: none;
            background: linear-gradient(180deg, #c2eaff 25%, #28b4ff 100%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
          }

          .d-mark {
            font-family: Alibaba PuHuiTi 2, Alibaba PuHuiTi 20;
            font-weight: 400;
            font-size: 10px;
            color: #ffffff;
            font-style: normal;
            text-transform: none;
          }

          .d-date {
            font-size: 12px;
            color: #05d9ed;
            position: absolute;
            bottom: 1px;
          }

          float: left;
        }

        .box {
          width: 196px;
          height: 52px;
          margin-top: 18px;
          background-image: url("../assets/shouye/battery.png");
          background-size: 100% 100%;
          float: left;
          margin-left: 18px;

          p:nth-child(1) {
            height: 17px;
            padding-left: 58px;
            font-family: Alibaba PuHuiTi 2, Alibaba PuHuiTi 20;
            font-weight: 400;
            font-size: 12px;
            color: #ffffff;
            line-height: 17px;
            text-align: left;
            font-style: normal;
            text-transform: none;
            margin-top: 4px;
          }

          p:nth-child(2) {
            height: 22px;
            padding-left: 58px;
            font-family: Alibaba PuHuiTi 2, Alibaba PuHuiTi 20;
            font-weight: 700;
            font-size: 16px;
            color: #05d9ed;
            line-height: 22px;
            text-align: left;
            font-style: normal;
            text-transform: none;
            margin-top: 3px;
          }
        }

        .box1 {
          margin-top: 10px;
        }

        .box3 {
          margin-top: 10px;
          margin-left: 0px;
        }

        .box4 {
          margin-top: 10px;
        }

        .box5 {
          margin-top: 10px;
          margin-left: 0px;
        }

        .box6 {
          margin-top: 10px;
        }

        .title2 {
          margin-top: 23px;
          float: left;
        }

        .title3 {
          margin-top: 20px;
          float: left;
        }

        ul {
          list-style: none;
          float: left;
          width: 410px;
          margin-top: 6px;

          li {
            display: block;
            float: left;
            width: 200px;
            height: 36px;
            border-radius: 4px 4px 4px 4px;
            border: 1px solid;
            border-image: linear-gradient(
                270deg,
                rgba(194.00000363588333, 234.00000125169754, 255, 0.30000001192092896),
                rgba(194.00000363588333, 234.00000125169754, 255, 0)
              )
              1 1;
            line-height: 36px;
            font-size: 12px;
            text-align: right;
            padding-right: 16px;

            span:nth-child(1) {
              font-family: Alibaba PuHuiTi 2, Alibaba PuHuiTi 20;
              font-weight: 400;
              font-size: 14px;
              color: #ffffff;
              float: left;
              padding-left: 16px;
            }

            span:nth-child(2) {
              padding-right: 4px;
              font-family: Alibaba PuHuiTi 2, Alibaba PuHuiTi 20;
              font-weight: 700;
              font-size: 14px;
              color: #28b4ff;
            }
          }

          li:nth-child(2) {
            margin-left: 10px;
          }
        }

        .chargeBegin,
        .chargeEnd {
          width: 410px;
          height: 36px;
          line-height: 36px;
          margin-top: 6px;
          float: left;
          border-radius: 4px 4px 4px 4px;
          border: 1px solid;
          border-image: linear-gradient(
              270deg,
              rgba(194.00000363588333, 234.00000125169754, 255, 0.30000001192092896),
              rgba(194.00000363588333, 234.00000125169754, 255, 0)
            )
            1 1;

          span:nth-child(1) {
            font-family: Alibaba PuHuiTi 2, Alibaba PuHuiTi 20;
            font-weight: 400;
            font-size: 14px;
            color: #ffffff;
            padding-left: 16px;
          }

          span:nth-child(2) {
            font-family: Alibaba PuHuiTi 2, Alibaba PuHuiTi 20;
            font-weight: 700;
            font-size: 14px;
            color: #28b4ff;
            float: right;
            padding-right: 16px;
          }
        }

        .carAppearance {
          width: 410px;
          height: 248px;
          float: left;
          border-radius: 0px 0px 0px 0px;
          border: 1px solid rgba(255, 255, 255, 0.5);
          margin-top: 8px;
          display: flex;

          .overall {
            margin: 8px;
            width: 128px !important;
            height: 232px;
            border-radius: 0px 0px 0px 0px;
            border: 1px solid rgba(255, 255, 255, 0.5);
            float: left;

            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
              /* 保持图片比例，裁剪溢出的部分 */
            }
          }

          .four {
            flex: 1;
            float: left;

            div {
              float: left;
              width: 128px;
              height: 113px;
              border-radius: 0px 0px 0px 0px;
              border: 1px solid rgba(255, 255, 255, 0.5);

              img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                /* 保持图片比例，裁剪溢出的部分 */
              }
            }

            div:nth-child(1) {
              margin-top: 8px;
            }

            div:nth-child(2) {
              margin-top: 8px;
              margin-left: 4px;
            }

            div:nth-child(3) {
              margin-top: 6px;
            }

            div:nth-child(4) {
              margin-top: 6px;
              margin-left: 4px;
            }
          }
        }
      }

      .m-main {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        .bgcode {
          position: absolute;
          bottom: 40px;
          right: 50px;
          width: 200px !important;
          height: 200px !important;
          // border: 1px solid salmon;
          // background: url("../assets/2wm.png") no-repeat;
          // background-size: 100% 100%;
        }
        .jhcode {
          position: absolute;
          bottom: 40px;
          right: 280px;
          width: 200px !important;
          height: 200px !important;
          background: url("../assets/2wm.png") no-repeat;
          background-size: 100% 100%;
        }
      }
      .rightBg {
        position: absolute;
        width: 475px;
        background: url("../assets/rightBg.png") no-repeat;
        background-size: 100% 100%;
        height: 100%;
        top: 0;
        z-index: 1;
        right: 0;
      }
      .m-right {
        width: 475px;
        padding-left: 30px;
        // background: url("../assets/rightBg.png") no-repeat;
        // background-size: 100% 100%;
        z-index: 999;
        .title {
          width: 410px !important;
          height: 40px;
          line-height: 40px;
          background-image: url("../assets/shouye/yiji.png");
          // background-size: cover;
          background-size: 100% 100%;
          text-align: left !important;
          padding-left: 43px;
          font-family: "庞门正道";
          font-weight: 400;
          font-size: 22px;
          color: #fff;
          span {
            // background: -webkit-linear-gradient(top, #ffffff, #28B4FF);
            background: linear-gradient(180deg, #ffffff 25%, #28b4ff 100%);
            -webkit-text-stroke: 0px #28b4ff;
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            color: transparent;
            display: inline-block;
          }
        }

        .infrared {
          width: 410px;
          height: 248px;
          margin-top: 8px;
          margin-bottom: 20px;
          background-image: url("../assets/shouye/boxbg.png");

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            /* 保持图片比例，裁剪溢出的部分 */
          }
        }

        .ultraviolet {
          width: 410px;
          height: 248px;
          margin-top: 8px;
          margin-bottom: 20px;
          background-image: url("../assets/shouye/boxbg.png");

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            /* 保持图片比例，裁剪溢出的部分 */
          }
        }

        .chart1 {
          width: 410px;
          height: 150px;
        }

        .chart2 {
          width: 410px;
          height: 150px;
        }
      }
    }
    .mainBottom {
      background-image: url("../assets/bottom.png");
      background-size: 100% 100%;
      width: 100%;
      height: 62px;
      position: absolute;
      bottom: 0;
      z-index: 99;
    }
  }
}
.voiceprintBg {
  background-image: url("../assets/swjcBg.png");
  background-size: 100% 100%;
  width: 410px;
  height: 248px;
  color: #05d9ed;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  margin-top: 8px;
  margin-bottom: 20px;
  font-weight: 600;
}
</style>
