|
|
|
|
@ -1,287 +1,253 @@
|
|
|
|
|
|
|
|
|
|
import { Block, View, Image, Text, Input } from "@tarojs/components";
|
|
|
|
|
import { useRef } from "react";
|
|
|
|
|
import { Block, View, Image } from "@tarojs/components";
|
|
|
|
|
import { useEffect, useRef, useState, useCallback } from "react";
|
|
|
|
|
import Echarts, { EChartOption, EchartsHandle } from "taro-react-echarts";
|
|
|
|
|
// import echarts from "@/utils/echarts.min.js";
|
|
|
|
|
import * as echarts from "echarts";
|
|
|
|
|
import echarts from "../echarts.min.js";
|
|
|
|
|
|
|
|
|
|
import "./index.less";
|
|
|
|
|
|
|
|
|
|
interface Props {
|
|
|
|
|
EchartsData: any
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function Index({
|
|
|
|
|
EchartsData
|
|
|
|
|
}: Props) {
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
let type = 0
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
switch (EchartsData?.data?.workMode) {
|
|
|
|
|
case 'face':
|
|
|
|
|
type = 37
|
|
|
|
|
break;
|
|
|
|
|
case 'eyes':
|
|
|
|
|
type = 25
|
|
|
|
|
break;
|
|
|
|
|
case 'nasolabialFold':
|
|
|
|
|
type = 25
|
|
|
|
|
break;
|
|
|
|
|
case 'mandibularLine':
|
|
|
|
|
type = 19
|
|
|
|
|
break;
|
|
|
|
|
case 'headLiftingPro':
|
|
|
|
|
type = 13
|
|
|
|
|
break;
|
|
|
|
|
default:
|
|
|
|
|
|
|
|
|
|
series: any;
|
|
|
|
|
full: any;
|
|
|
|
|
time: any;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function Index({ series, full, time }: Props) {
|
|
|
|
|
const echartsRef = useRef<EchartsHandle>(null);
|
|
|
|
|
|
|
|
|
|
function generateColorArray(startColor, endColor, steps) {
|
|
|
|
|
var startRGB = hexToRgb(startColor);
|
|
|
|
|
var endRGB = hexToRgb(endColor);
|
|
|
|
|
var colors = [];
|
|
|
|
|
for (var i = 0; i < steps; i++) {
|
|
|
|
|
var r = interpolate(startRGB.r, endRGB.r, steps, i);
|
|
|
|
|
var g = interpolate(startRGB.g, endRGB.g, steps, i);
|
|
|
|
|
var b = interpolate(startRGB.b, endRGB.b, steps, i);
|
|
|
|
|
colors.push(rgbToHex(r, g, b));
|
|
|
|
|
}
|
|
|
|
|
return colors;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function hexToRgb(hex) {
|
|
|
|
|
var bigint = parseInt(hex.slice(1), 16);
|
|
|
|
|
var r = (bigint >> 16) & 255;
|
|
|
|
|
var g = (bigint >> 8) & 255;
|
|
|
|
|
var b = bigint & 255;
|
|
|
|
|
return { r: r, g: g, b: b };
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function rgbToHex(r, g, b) {
|
|
|
|
|
return (
|
|
|
|
|
"#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function interpolate(start, end, steps, count) {
|
|
|
|
|
return start + ((end - start) / steps) * count;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const startColor = "#FFFF00"; // 黄色
|
|
|
|
|
const endColor = "#FF0000"; // 红色
|
|
|
|
|
const steps = 81; // 80个颜色
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const colors = generateColorArray(startColor, endColor, steps);
|
|
|
|
|
// const xList = [...new Array(type).fill(0).map((item, key) => key)];
|
|
|
|
|
let seriesData: any = []
|
|
|
|
|
seriesData = EchartsData?.data?.groupedAa
|
|
|
|
|
const xList = [...new Array(type).fill(0).map((item, key) => key)];
|
|
|
|
|
// const seriesData = [
|
|
|
|
|
// ...xList.map((item) => {
|
|
|
|
|
// return Math.random() * 80;
|
|
|
|
|
// }),
|
|
|
|
|
// ];
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const option: EChartOption = {
|
|
|
|
|
const [options, setOptions] = useState({
|
|
|
|
|
animation: false,
|
|
|
|
|
grid: {
|
|
|
|
|
// 让图表占满容器
|
|
|
|
|
top: "10rpx",
|
|
|
|
|
left: "45rpx",
|
|
|
|
|
// containLabel: true,
|
|
|
|
|
top: "28rpx",
|
|
|
|
|
left: "18rpx",
|
|
|
|
|
right: "28rpx",
|
|
|
|
|
bottom: "17rpx",
|
|
|
|
|
},
|
|
|
|
|
xAxis: {
|
|
|
|
|
type: "category",
|
|
|
|
|
data: [...xList],
|
|
|
|
|
axisLabel: {
|
|
|
|
|
interval: 5,
|
|
|
|
|
formatter: function (value, index) {
|
|
|
|
|
return value * 10 + 's';
|
|
|
|
|
axisLine: {
|
|
|
|
|
//坐标轴轴线相关设置。数学上的x轴
|
|
|
|
|
show: true,
|
|
|
|
|
lineStyle: {
|
|
|
|
|
color: "#cccccc",
|
|
|
|
|
},
|
|
|
|
|
textStyle: {
|
|
|
|
|
color: '#999999', // 文字颜色
|
|
|
|
|
fontSize: 8 // 文字大小
|
|
|
|
|
},
|
|
|
|
|
axisLabel: {
|
|
|
|
|
//坐标轴刻度标签的相关设置
|
|
|
|
|
color: "#fff",
|
|
|
|
|
fontSize: 1,
|
|
|
|
|
},
|
|
|
|
|
axisTick: {
|
|
|
|
|
// alignWithLabel: true,
|
|
|
|
|
show: false,
|
|
|
|
|
interval: 9,
|
|
|
|
|
},
|
|
|
|
|
// axisLine: {
|
|
|
|
|
// show: false,
|
|
|
|
|
// },
|
|
|
|
|
},
|
|
|
|
|
yAxis: [
|
|
|
|
|
{
|
|
|
|
|
yAxis: {
|
|
|
|
|
type: "value",
|
|
|
|
|
min: 0,
|
|
|
|
|
max: 80,
|
|
|
|
|
splitNumber: 10,
|
|
|
|
|
axisLabel: {
|
|
|
|
|
formatter: function (value, index) {
|
|
|
|
|
const num = value / 10 + 1
|
|
|
|
|
return num === 9 ? '' : num + '级';
|
|
|
|
|
max: 8,
|
|
|
|
|
splitNumber: 8,
|
|
|
|
|
splitLine: {
|
|
|
|
|
show: true,
|
|
|
|
|
lineStyle: {
|
|
|
|
|
color: "#cccccc",
|
|
|
|
|
type: [4, 2],
|
|
|
|
|
dashOffset: 4,
|
|
|
|
|
},
|
|
|
|
|
textStyle: {
|
|
|
|
|
color: '#999999', // 文字颜色
|
|
|
|
|
fontSize: 8 // 文字大小
|
|
|
|
|
},
|
|
|
|
|
axisLine: {
|
|
|
|
|
show: false,
|
|
|
|
|
},
|
|
|
|
|
type: "value",
|
|
|
|
|
splitLine: {
|
|
|
|
|
lineStyle: {
|
|
|
|
|
color: ["#ccc", "#ccc", "#ccc", "#ccc", "#ccc", "#ccc", "#ccc", "#ccc", "#fff"],
|
|
|
|
|
type: 'dashed'
|
|
|
|
|
axisLabel: {
|
|
|
|
|
show: false,
|
|
|
|
|
},
|
|
|
|
|
}
|
|
|
|
|
axisTick: {
|
|
|
|
|
show: false,
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
series: [
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
visualMap: {
|
|
|
|
|
z: 1,
|
|
|
|
|
top: 0,
|
|
|
|
|
right: 0,
|
|
|
|
|
seriesIndex: 0,
|
|
|
|
|
show: false,
|
|
|
|
|
pieces: [
|
|
|
|
|
{
|
|
|
|
|
barCategoryGap: '0%',
|
|
|
|
|
data: seriesData,
|
|
|
|
|
type: "bar",
|
|
|
|
|
// barWidth: 15,
|
|
|
|
|
gapWidth: "0%",
|
|
|
|
|
itemStyle: {
|
|
|
|
|
normal: {
|
|
|
|
|
color: function (params) {
|
|
|
|
|
var value = params.data;
|
|
|
|
|
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
|
|
gt: 0,
|
|
|
|
|
lte: 1,
|
|
|
|
|
color: "#f8f4f9",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
offset: 0,
|
|
|
|
|
color: colors[parseInt(value)], // 红色
|
|
|
|
|
gt: 1,
|
|
|
|
|
lte: 2,
|
|
|
|
|
color: "#f5f1f8",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
offset: 1,
|
|
|
|
|
color: colors[0], // 黄色
|
|
|
|
|
gt: 2,
|
|
|
|
|
lte: 3,
|
|
|
|
|
color: "#f1edf6",
|
|
|
|
|
},
|
|
|
|
|
]);;
|
|
|
|
|
{
|
|
|
|
|
gt: 3,
|
|
|
|
|
lte: 4,
|
|
|
|
|
color: "#ece9f5",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
gt: 4,
|
|
|
|
|
lte: 5,
|
|
|
|
|
color: "#e8e4f3",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
gt: 5,
|
|
|
|
|
lte: 6,
|
|
|
|
|
color: "#e3e0f1",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
gt: 6,
|
|
|
|
|
lte: 7,
|
|
|
|
|
color: "#e1ddf0",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
gt: 7,
|
|
|
|
|
lte: 8,
|
|
|
|
|
color: "#dedaef",
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
outOfRange: {
|
|
|
|
|
color: "#ff8410",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
// series: []
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const level = [8, 7, 6, 5, 4, 3, 2];
|
|
|
|
|
const [isFull, setIsfull] = useState(false);
|
|
|
|
|
const [data, setData] = useState([
|
|
|
|
|
"00:01",
|
|
|
|
|
"00:02",
|
|
|
|
|
"00:03",
|
|
|
|
|
"00:04",
|
|
|
|
|
"00:05",
|
|
|
|
|
"00:06",
|
|
|
|
|
"00:07",
|
|
|
|
|
"00:08",
|
|
|
|
|
"00:09",
|
|
|
|
|
"00:10",
|
|
|
|
|
]);
|
|
|
|
|
const [newOptions, setNewOptions] = useState(options);
|
|
|
|
|
|
|
|
|
|
const updata = useCallback((res, times) => {
|
|
|
|
|
if (times.second == 0) {
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 基于 EchartsData 生成 ECharts 配置
|
|
|
|
|
// const option: EChartOption ={
|
|
|
|
|
// grid: {
|
|
|
|
|
// // 让图表占满容器
|
|
|
|
|
// top: "10rpx",
|
|
|
|
|
// left: "45rpx",
|
|
|
|
|
// right: "28rpx",
|
|
|
|
|
// bottom: "17rpx",
|
|
|
|
|
// },
|
|
|
|
|
// xAxis: {
|
|
|
|
|
// type: "category",
|
|
|
|
|
// data: [...xList],
|
|
|
|
|
// axisLabel: {
|
|
|
|
|
// interval: 5,
|
|
|
|
|
// formatter: function (value, index) {
|
|
|
|
|
// return value * 10 + 's';
|
|
|
|
|
// },
|
|
|
|
|
// textStyle: {
|
|
|
|
|
// color: '#999999', // 文字颜色
|
|
|
|
|
// fontSize: 8 // 文字大小
|
|
|
|
|
// },
|
|
|
|
|
// },
|
|
|
|
|
// axisTick: {
|
|
|
|
|
// // alignWithLabel: true,
|
|
|
|
|
// show: false,
|
|
|
|
|
// interval: 9,
|
|
|
|
|
// },
|
|
|
|
|
// // axisLine: {
|
|
|
|
|
// // show: false,
|
|
|
|
|
// // },
|
|
|
|
|
// },
|
|
|
|
|
// yAxis: [
|
|
|
|
|
// {
|
|
|
|
|
// min: 0,
|
|
|
|
|
// max: 80,
|
|
|
|
|
// splitNumber: 10,
|
|
|
|
|
// axisLabel: {
|
|
|
|
|
// formatter: function (value, index) {
|
|
|
|
|
// const num = value / 10 + 1
|
|
|
|
|
// return num === 9 ? '' : num + '级';
|
|
|
|
|
// },
|
|
|
|
|
// textStyle: {
|
|
|
|
|
// color: '#999999', // 文字颜色
|
|
|
|
|
// fontSize: 8 // 文字大小
|
|
|
|
|
// },
|
|
|
|
|
// },
|
|
|
|
|
// type: "value",
|
|
|
|
|
// splitLine: {
|
|
|
|
|
// lineStyle: {
|
|
|
|
|
// color: ["#ccc", "#ccc", "#ccc", "#ccc", "#ccc", "#ccc", "#ccc", "#ccc", "#fff"],
|
|
|
|
|
// type: 'dashed'
|
|
|
|
|
// },
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// let option
|
|
|
|
|
// if (data) {
|
|
|
|
|
// option = JSON.parse(JSON.stringify(newParams))
|
|
|
|
|
// } else {
|
|
|
|
|
// option = JSON.parse(JSON.stringify(options))
|
|
|
|
|
// }
|
|
|
|
|
// },
|
|
|
|
|
// ],
|
|
|
|
|
// series: [
|
|
|
|
|
let option = JSON.parse(JSON.stringify(options))
|
|
|
|
|
let datas = JSON.parse(JSON.stringify(data))
|
|
|
|
|
if (series[0].data.length == 1) {
|
|
|
|
|
datas = [
|
|
|
|
|
"00:01",
|
|
|
|
|
"00:02",
|
|
|
|
|
"00:03",
|
|
|
|
|
"00:04",
|
|
|
|
|
"00:05",
|
|
|
|
|
"00:06",
|
|
|
|
|
"00:07",
|
|
|
|
|
"00:08",
|
|
|
|
|
"00:09",
|
|
|
|
|
"00:10",
|
|
|
|
|
]
|
|
|
|
|
} else {
|
|
|
|
|
if (times.min > 0 || times.second > 10) {
|
|
|
|
|
datas.splice(0, 1)
|
|
|
|
|
datas.push(formatTime(times))
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
setData(JSON.parse(JSON.stringify(datas)))
|
|
|
|
|
// option.xAxis.data = data
|
|
|
|
|
option.series = JSON.parse(JSON.stringify(res))
|
|
|
|
|
// 更新图表数据
|
|
|
|
|
setNewOptions(option);
|
|
|
|
|
}, [data]);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// {
|
|
|
|
|
// barCategoryGap: '0%',
|
|
|
|
|
// data: seriesData,
|
|
|
|
|
// type: "bar",
|
|
|
|
|
// // barWidth: 15,
|
|
|
|
|
// gapWidth: "0%",
|
|
|
|
|
// itemStyle: {
|
|
|
|
|
// normal: {
|
|
|
|
|
// color: function (params) {
|
|
|
|
|
// var value = params.data;
|
|
|
|
|
// return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
|
|
// {
|
|
|
|
|
// offset: 0,
|
|
|
|
|
// color: colors[parseInt(value)], // 红色
|
|
|
|
|
// },
|
|
|
|
|
// {
|
|
|
|
|
// offset: 1,
|
|
|
|
|
// color: colors[0], // 黄色
|
|
|
|
|
// },
|
|
|
|
|
// ]);;
|
|
|
|
|
// },
|
|
|
|
|
// },
|
|
|
|
|
// },
|
|
|
|
|
// },
|
|
|
|
|
// ],
|
|
|
|
|
// };
|
|
|
|
|
|
|
|
|
|
function formatTime(times: any) {
|
|
|
|
|
let mins;
|
|
|
|
|
if (times.min < 10) {
|
|
|
|
|
mins = "0" + times.min;
|
|
|
|
|
} else {
|
|
|
|
|
mins = times.min;
|
|
|
|
|
}
|
|
|
|
|
let secs;
|
|
|
|
|
if (times.second < 10) {
|
|
|
|
|
secs = "0" + times.second;
|
|
|
|
|
} else {
|
|
|
|
|
secs = times.second;
|
|
|
|
|
}
|
|
|
|
|
return `${mins.toString()}:${secs.toString()}`;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const cancelFull = useCallback(
|
|
|
|
|
(res) => {
|
|
|
|
|
full();
|
|
|
|
|
setIsfull(!isFull);
|
|
|
|
|
},
|
|
|
|
|
[isFull]
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
setOptions(newOptions);
|
|
|
|
|
}, [newOptions]);
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
|
|
|
|
|
updata(series, time);
|
|
|
|
|
}, [series]);
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<Block>
|
|
|
|
|
<View className={isFull ? "echart-component-full" : "echart-component"}>
|
|
|
|
|
<Echarts
|
|
|
|
|
force-use-old-canvas="false"
|
|
|
|
|
echarts={echarts}
|
|
|
|
|
option={option}
|
|
|
|
|
option={options}
|
|
|
|
|
ref={echartsRef}
|
|
|
|
|
// isPage={false}
|
|
|
|
|
// style自定义设置echarts宽高
|
|
|
|
|
// style={{ width: "100%", height: "100%" }}
|
|
|
|
|
style={{ width: "670rpx", height: "260rpx" }}
|
|
|
|
|
style={{ width: "630rpx", height: "260rpx", zIndex: 1 }}
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
{/* <View className="box">
|
|
|
|
|
<Echarts
|
|
|
|
|
echarts={echarts}
|
|
|
|
|
option={option}
|
|
|
|
|
ref={echartsRef}
|
|
|
|
|
// isPage={false}
|
|
|
|
|
// style自定义设置echarts宽高
|
|
|
|
|
style={{ width: "630rpx", height: "240rpx" }}
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
</View> */}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<View className="box_background">
|
|
|
|
|
<Image
|
|
|
|
|
className={isFull ? "part" : "full"}
|
|
|
|
|
src={require(`@/img/${isFull ? "part-scran" : "full-scran"}.png`)}
|
|
|
|
|
onClick={cancelFull}
|
|
|
|
|
></Image>
|
|
|
|
|
|
|
|
|
|
<View className="power">实时能量</View>
|
|
|
|
|
{level.map((item) => (
|
|
|
|
|
<View className="line" key={item}>
|
|
|
|
|
<View className="number">{item}</View>
|
|
|
|
|
<View className="bottom_line"></View>
|
|
|
|
|
</View>
|
|
|
|
|
))}
|
|
|
|
|
<View className="line">
|
|
|
|
|
<View className="number">1</View>
|
|
|
|
|
</View>
|
|
|
|
|
<View className="time_list flex">
|
|
|
|
|
{data.map((times, index) => (
|
|
|
|
|
<View key={index}>{times}</View>
|
|
|
|
|
))}
|
|
|
|
|
</View>
|
|
|
|
|
<View className="time">时间</View>
|
|
|
|
|
</View>
|
|
|
|
|
</View>
|
|
|
|
|
</Block>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
c'g'l
2 years ago