04.26推送代码
c'g'l
2 years ago
parent
a5bed953a1
commit
ac85563603
File diff suppressed because it is too large
Load Diff
@ -1,289 +1,255 @@
|
||||
|
||||
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
|
||||
series: any;
|
||||
full: any;
|
||||
time: 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:
|
||||
|
||||
}
|
||||
|
||||
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 Index({ series, full, time }: Props) {
|
||||
const echartsRef = useRef<EchartsHandle>(null);
|
||||
const [options, setOptions] = useState({
|
||||
animation: false,
|
||||
grid: {
|
||||
// 让图表占满容器
|
||||
// containLabel: true,
|
||||
top: "28rpx",
|
||||
left: "18rpx",
|
||||
right: "28rpx",
|
||||
bottom: "17rpx",
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
axisLine: {
|
||||
//坐标轴轴线相关设置。数学上的x轴
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#cccccc",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
//坐标轴刻度标签的相关设置
|
||||
color: "#fff",
|
||||
fontSize: 1,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
min: 0,
|
||||
max: 8,
|
||||
splitNumber: 8,
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#cccccc",
|
||||
type: [4, 2],
|
||||
dashOffset: 4,
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
show: false,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
visualMap: {
|
||||
z: 1,
|
||||
top: 0,
|
||||
right: 0,
|
||||
seriesIndex: 0,
|
||||
show: false,
|
||||
pieces: [
|
||||
{
|
||||
gt: 0,
|
||||
lte: 1,
|
||||
color: "#f8f4f9",
|
||||
},
|
||||
{
|
||||
gt: 1,
|
||||
lte: 2,
|
||||
color: "#f5f1f8",
|
||||
},
|
||||
{
|
||||
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
|
||||
}
|
||||
|
||||
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;
|
||||
// let option
|
||||
// if (data) {
|
||||
// option = JSON.parse(JSON.stringify(newParams))
|
||||
// } else {
|
||||
// option = JSON.parse(JSON.stringify(options))
|
||||
// }
|
||||
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]);
|
||||
|
||||
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 = {
|
||||
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'
|
||||
},
|
||||
}
|
||||
},
|
||||
],
|
||||
series: [
|
||||
|
||||
{
|
||||
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()}`;
|
||||
}
|
||||
|
||||
// 基于 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'
|
||||
// },
|
||||
// }
|
||||
// },
|
||||
// ],
|
||||
// series: [
|
||||
const cancelFull = useCallback(
|
||||
(res) => {
|
||||
full();
|
||||
setIsfull(!isFull);
|
||||
},
|
||||
[isFull]
|
||||
);
|
||||
|
||||
// {
|
||||
// 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], // 黄色
|
||||
// },
|
||||
// ]);;
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
// ],
|
||||
// };
|
||||
useEffect(() => {
|
||||
setOptions(newOptions);
|
||||
}, [newOptions]);
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
return (
|
||||
<Block>
|
||||
<Echarts
|
||||
echarts={echarts}
|
||||
option={option}
|
||||
ref={echartsRef}
|
||||
// isPage={false}
|
||||
// style自定义设置echarts宽高
|
||||
// style={{ width: "100%", height: "100%" }}
|
||||
style={{ width: "670rpx", height: "260rpx" }}
|
||||
/>
|
||||
updata(series, time);
|
||||
}, [series]);
|
||||
|
||||
{/* <View className="box">
|
||||
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: "630rpx", height: "240rpx" }}
|
||||
style={{ width: "630rpx", height: "260rpx", zIndex: 1 }}
|
||||
/>
|
||||
|
||||
</View> */}
|
||||
|
||||
|
||||
</Block>
|
||||
);
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
||||
export default Index;
|
||||
|
||||
Loading…
Reference in New Issue