1737 lines
47 KiB
Vue
1737 lines
47 KiB
Vue
<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">{{ 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>车辆外观检测</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" @click="getQrcode()"> </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, //声纹检测
|
||
};
|
||
},
|
||
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();
|
||
} 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 +
|
||
"/#/pages/index/index?DetectionReportId=21ad44647c8a4b9c871af5bae82d160a";
|
||
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;
|
||
}
|
||
</style>
|