314637581
/
flossom-miniapp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

添加图片

Browse Source
master
qsj 2 years ago
parent 8e7a2e5eb0
commit 755d87a7cb
10 changed files with 2053 additions and 4 deletions
Show Stats Download Patch File Download Diff File

16
project.private.config.json
Unescape Escape View File

@ -0,0 +1,16 @@
{
"description": "项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html",
"condition": {
"miniprogram": {
"list": [
{
"name": "pages/face_report_one/face_report_one",
"pathName": "pages/face_report_one/face_report_one",
"query": "id=60&recordId=undefined&report=false",
"launchMode": "default",
"scene": null
}
]
}
}
}

BIN
src/img/face-report/Head_lift_Pro.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 246 KiB

BIN
src/img/face-report/Mandibular_Pro.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 237 KiB

BIN
src/img/face-report/eye.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 246 KiB

BIN
src/img/face-report/face.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 246 KiB

BIN
src/img/face-report/nasolabial_Pro.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 246 KiB

1654
src/moduleIOT/pages/iotCarePlan/components/Echart_face/index.less
View File

File diff suppressed because it is too large Load Diff

373
src/moduleIOT/pages/iotCarePlan/components/Echart_face/index.tsx
Unescape Escape View File

@ -0,0 +1,373 @@
import Taro from "@tarojs/taro";
import classnames from "classnames";
import { Block, View, Image, Text, Input } from "@tarojs/components";
import { Popup, Progress, Slider } from "@antmjs/vantui";
import { useRef } from "react";
import Echarts, { EChartOption, EchartsHandle } from "taro-react-echarts";
import echarts from "@/utils/echarts.min.js";
import "./index.less";
interface Props {
Electricity: any;
matrixElectricity: any;
facialMaskConnectStatus: any;
}
function Index() {
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 = 100; // 50个颜色
const colors = generateColorArray(startColor, endColor, steps);
const xList = [...new Array(361).fill(0).map((item, key) => key)];
// const seriesData = [
// ...xList.map((item) => {
// return Math.random() * 100;
// })
// ];
let seriesData=[
1,2,2,3,3,4,5,1,2,3,4,2,3,5,1,2,3,1,2,2,3,3,4,5,1,2,3,4,2,3,5,1,2,3,
1,2,2,3,3,4,5,1,2,3,4,2,3,5,1,2,3,
1,2,2,3,3,4,5,1,2,3,4,2,3,5,1,2,3
,1,2,2,3,3,4,5,1,2,3,4,2,3,5,1,2,3
,1,2,2,3,3,4,5,1,2,3,4,2,3,5,1,2,3
,1,2,2,3,3,4,5,1,2,3,4,2,3,5,1,2,3
,1,2,2,3,3,4,5,1,2,3,4,2,8,5,1,2,3,
1,2,2,3,3,4,5,1,2,3,4,2,3,5,1,2,3
,1,2,2,3,3,4,5,1,2,3,4,2,3,5,1,2,3
,1,2,2,3,3,4,5,1,2,3,4,2,3,5,1,2,3
,1,2,2,3,3,4,5,1,2,3,4,2,3,5,1,2,3
,1,2,2,3,3,4,5,1,2,3,4,2,3,5,1,2,3
]
console.log(seriesData,'seriesData',xList);
// const option: EChartOption ={
// grid: {
// // 让图表占满容器
// top: "28rpx",
// left: "18rpx",
// right: "28rpx",
// bottom: "17rpx",
// },
// xAxis: {
// type: 'category',
// data: [...xList],
// axisLabel: {
// interval: 59
// },
// axisTick: {
// alignWithLabel: true,
// interval: 10,
// show: false,
// },
// axisLine: {
// show: false,
// },
// },
// yAxis: {
// min: 0,
// max: 8,
// splitNumber: 8,
// type: 'value',
// axisLine: {
// show: false,
// },
// axisLabel: {
// show: false,
// },
// axisTick: {
// show: false,
// },
// },
// series: [
// {
// data: seriesData,
// type: 'bar',
// // barWidth: 15,
// itemStyle: {
// normal: {
// color: function (params) {
// var value = params.data;
// var color = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
// {
// offset: 0,
// color: colors[parseInt(value)] // 红色
// },
// {
// offset: 1,
// color: colors[0] // 黄色
// }
// ]);
// return value === 100 ? '#FF0000' : color;
// }
// }
// }
// }
// ]
// }
const option: EChartOption = {
grid: {
// 让图表占满容器
top: "28rpx",
left: "18rpx",
right: "28rpx",
bottom: "17rpx",
},
xAxis: [
{
type: 'category',
axisTick: { show: false },
data: ['2012', '2013', '2014', '2015', '2016'],
axisLine: {
show: false,
},
axisLabel: {
show: false,
},
}
],
yAxis: {
type: "value",
min: 0,
max: 8,
splitNumber: 8,
splitLine: {
show: false,
// lineStyle: {
// color: "#cccccc",
// type: [4, 2],
// dashOffset: 4,
// },
},
axisLine: {
show: false,
},
axisLabel: {
show: false,
},
axisTick: {
show: false,
},
},
series: [
{ barCategoryGap:'0%',
name: 'Forest',
type: 'bar',
barGap: 0,
// label: labelOption,
// emphasis: {
// focus: 'series'
// },
data: [2, 4, 4, 5, 7]
},
{ barCategoryGap:'0%',
name: 'Steppe',
type: 'bar',
// label: labelOption,
emphasis: {
focus: 'series'
},
data: [2, 4, 4, 5, 7]
},
{ barCategoryGap:'0%',
name: 'Desert',
type: 'bar',
// label: labelOption,
// emphasis: {
// focus: 'series'
// },
data: [2, 4, 4, 5, 7]
},
{ barCategoryGap:'0%',
name: 'Wetland',
type: 'bar',
// label: labelOption,
// emphasis: {
// focus: 'series'
// },
data: [2, 4, 4, 5, 7]
},
{ barCategoryGap:'0%',
name: 'demo1',
type: 'bar',
// label: labelOption,
// emphasis: {
// focus: 'series'
// },
data: [2, 4, 4, 5, 7]
},
{ barCategoryGap:'0%',
name: 'demo2',
type: 'bar',
// label: labelOption,
// emphasis: {
// focus: 'series'
// },
data: [2, 4, 4, 5, 7]
},
{ barCategoryGap:'0%',
name: 'demo3',
type: 'bar',
// label: labelOption,
// emphasis: {
// focus: 'series'
// },
data: [2, 4, 4, 5, 7]
},
{ barCategoryGap:'0%',
name: 'demo4',
type: 'bar',
// label: labelOption,
// emphasis: {
// focus: 'series'
// },
data: [2, 4, 4, 5, 7]
},
{ barCategoryGap:'0%',
name: 'demo5',
type: 'bar',
// label: labelOption,
// emphasis: {
// focus: 'series'
// },
data: [2, 4, 4, 5, 7]
},
{
color:'red',
barCategoryGap:'0%',
name: 'demo6',
type: 'bar',
// label: labelOption,
// emphasis: {
// focus: 'series'
// },
data: [2, 4, 4, 5, 7]
}
]
// grid: {
// // 让图表占满容器
// top: "28rpx",
// left: "18rpx",
// right: "28rpx",
// bottom: "17rpx",
// },
// xAxis: {
// type: 'category',
// // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
// show: false,
// // axisLine: {
// // show: false,
// // },
// },
// yAxis: {
// type: "value",
// min: 0,
// max: 50,
// splitNumber: 10,
// splitLine: {
// show: false,
// // lineStyle: {
// // color: "#cccccc",
// // type: [4, 2],
// // dashOffset: 4,
// // },
// },
// axisLine: {
// show: false,
// },
// axisLabel: {
// show: false,
// },
// axisTick: {
// show: false,
// },
// },
// series: [
// {
// data: [1, 6, 3, 4, 7, 6, 0,8, 0, 10, 11, 12, 13, 14,15, 16, 17, 18, 19, 20, 21,22, 23, 24, 25, 26, 27, 28,29, 30, 31, 32, 33, 34, 35,36],
// type: 'bar',
// barWidth:30, //设置柱子的宽度
// barGap:'100%',
// barCategoryGap:'0%',
// }
// ]
};
const level = [8, 7, 6, 5, 4, 3, 2];
let arr =[2,3,4,5,6,7]
return (
<Block>
<View className="box">
<Echarts
echarts={echarts}
option={option}
ref={echartsRef}
// isPage={false}
// style自定义设置echarts宽高
style={{ width: "630rpx", height: "167rpx" }}
/>
<View className="box_background">
{level.map((item) => (
<View className="line" key={item}>
<View className="number">{item}</View>
<View className="bottom_line">8</View>
</View>
))}
<View className="line">
<View className="number">1</View>
</View>
{/* <View className="time">时间</View> */}
<View className="Seconds">
{
arr.map(item =>(
<View key={item} className="Seconds_item">{item}</View>
))
}
</View>
</View>
</View>
</Block>
);
}
export default Index;

4
src/pages/face_report_one/face_report_one.less
Unescape Escape View File

@ -76,7 +76,7 @@ page {
// margin: 48rpx 0 34rpx; // margin: 48rpx 0 34rpx;
} }
.eacharts{ .eacharts{
background-color: red; // background-color: red;
margin-top: 14px; margin-top: 14px;
margin-bottom: 45rpx; margin-bottom: 45rpx;
/* margin: 52rpx 0rpx; */ /* margin: 52rpx 0rpx; */
@ -283,7 +283,7 @@ page {
height: 211rpx; height: 211rpx;
border-radius: 20rpx; border-radius: 20rpx;
margin-right: 37rpx; margin-right: 37rpx;
background-color: red; // background-color: red;
} }
.content { .content {

10
src/pages/face_report_one/face_report_one.tsx
Unescape Escape View File

@ -14,6 +14,8 @@ import Navbar from "../../components/navbar/navbar";
import PopupAlert from "../../components/popup/popup-alert"; import PopupAlert from "../../components/popup/popup-alert";
import { InstrumentInfo } from "../../utils/Interface"; import { InstrumentInfo } from "../../utils/Interface";
// 引入ecahrts图表
import EchartsForm from '../../moduleIOT/pages/iotCarePlan/components/Echart_face'
/** 自定义组件 **/ /** 自定义组件 **/
import "./face_report_one.less"; import "./face_report_one.less";
@ -26,7 +28,9 @@ export default class Index extends Component<any, any> {
name: "template模板页", name: "template模板页",
statistics: {}, statistics: {},
recordList: [], recordList: [],
recordData: {}, recordData: {
modeImage:require("@/img/face-report/face.png")
},
year: new Date().getFullYear(), year: new Date().getFullYear(),
show: false, show: false,
clockStatistics: [], clockStatistics: [],
@ -329,7 +333,9 @@ export default class Index extends Component<any, any> {
</View> </View>
</View> </View>
<View className="main_title">能量等级图谱-{face_Tyep}</View> <View className="main_title">能量等级图谱-{face_Tyep}</View>
<View className="eacharts">echarts图标</View> <View className="eacharts">
<EchartsForm></EchartsForm>
</View>
</View> </View>
<View className="bottom-title"> <View className="bottom-title">

Write Preview
Loading…
Cancel
Save