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

合并分支

Browse Source
master
blak-kong 2 years ago
parent 9363bb5f99 475862c926
commit 786d8d8a37
3 changed files with 187 additions and 351 deletions
Show Stats Download Patch File Download Diff File

36
src/moduleIOT/pages/iotCarePlan/components/Echart/index.tsx
Unescape Escape View File

@ -14,10 +14,13 @@ interface Props {
facialMaskConnectStatus: any; facialMaskConnectStatus: any;
} }
function Index() { function Index() {
const echartsRef = useRef<EchartsHandle>(null); const echartsRef = useRef<EchartsHandle>(null);
const option: EChartOption = { const option: EChartOption = {
grid: { grid: {
// 让图表占满容器 // 让图表占满容器
top: "28rpx", top: "28rpx",
@ -25,6 +28,13 @@ function Index() {
right: "28rpx", right: "28rpx",
bottom: "17rpx", bottom: "17rpx",
}, },
// legend: {
// itemStyle: {
// decal: {
// rotation: 90
// }
// }
// },
xAxis: { xAxis: {
// name: '', // name: '',
// nameGap: 5, // nameGap: 5,
@ -251,12 +261,28 @@ function Index() {
}; };
const level = [8, 7, 6, 5, 4, 3, 2]; const level = [8, 7, 6, 5, 4, 3, 2];
const full = () => {
let box = document.getElementById("box");
box?.classList.add('fullscreen')
}
// const quanping = () => {
// T.setPageOrientation({
// orientation: "portrait",
// });
// // taro.setPageOrientation({
// // orientation: "landscape",
// // });
// },
return ( return (
<Block> <Block>
<View className='box'> <View id='box' className='box'>
<Echarts <Echarts
force-use-old-canvas="false" force-use-old-canvas='false'
echarts={echarts} echarts={echarts}
option={option} option={option}
ref={echartsRef} ref={echartsRef}
@ -265,7 +291,7 @@ function Index() {
style={{ width: "630rpx", height: "260rpx", zIndex: 1 }} style={{ width: "630rpx", height: "260rpx", zIndex: 1 }}
/> />
<View className='box_background'> <View className='box_background'>
<Image className='full' src={require("@/img/full-scran.png")}></Image> <Image className='full' src={require("@/img/full-scran.png")} onClick={full}></Image>
<View className='power'>实时能量</View> <View className='power'>实时能量</View>
{level.map((item) => ( {level.map((item) => (
<View className='line' key={item}> <View className='line' key={item}>
@ -279,7 +305,7 @@ function Index() {
<View className='time'>时间</View> <View className='time'>时间</View>
</View> </View>
</View> </View>
</Block> </Block >
); );
} }

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

@ -9,361 +9,169 @@ import echarts from "@/utils/echarts.min.js";
import "./index.less"; import "./index.less";
interface Props { interface Props {
Electricity: any; Electricity: any;
matrixElectricity: any; matrixElectricity: any;
facialMaskConnectStatus: any; facialMaskConnectStatus: any;
} }
function Index() { function Index() {
const echartsRef = useRef<EchartsHandle>(null); const echartsRef = useRef<EchartsHandle>(null);
function generateColorArray(startColor, endColor, steps) { function generateColorArray(startColor, endColor, steps) {
var startRGB = hexToRgb(startColor); var startRGB = hexToRgb(startColor);
var endRGB = hexToRgb(endColor); var endRGB = hexToRgb(endColor);
var colors = []; var colors = [];
for (var i = 0; i < steps; i++) { for (var i = 0; i < steps; i++) {
var r = interpolate(startRGB.r, endRGB.r, steps, i); var r = interpolate(startRGB.r, endRGB.r, steps, i);
var g = interpolate(startRGB.g, endRGB.g, steps, i); var g = interpolate(startRGB.g, endRGB.g, steps, i);
var b = interpolate(startRGB.b, endRGB.b, steps, i); var b = interpolate(startRGB.b, endRGB.b, steps, i);
colors.push(rgbToHex(r, g, b)); colors.push(rgbToHex(r, g, b));
}
return colors;
} }
return colors;
}
function hexToRgb(hex) { function hexToRgb(hex) {
var bigint = parseInt(hex.slice(1), 16); var bigint = parseInt(hex.slice(1), 16);
var r = (bigint >> 16) & 255; var r = (bigint >> 16) & 255;
var g = (bigint >> 8) & 255; var g = (bigint >> 8) & 255;
var b = bigint & 255; var b = bigint & 255;
return { r: r, g: g, b: b }; return { r: r, g: g, b: b };
} }
function rgbToHex(r, g, b) { function rgbToHex(r, g, b) {
return ( return (
"#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1) "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)
); );
} }
function interpolate(start, end, steps, count) { function interpolate(start, end, steps, count) {
return start + ((end - start) / steps) * count; return start + ((end - start) / steps) * count;
} }
const startColor = "#FFFF00"; // 黄色 const startColor = "#FFFF00"; // 黄色
const endColor = "#FF0000"; // 红色 const endColor = "#FF0000"; // 红色
const steps = 80; // 80个颜色 const steps = 80; // 80个颜色
const colors = generateColorArray(startColor, endColor, steps); const colors = generateColorArray(startColor, endColor, steps);
const xList = [...new Array(61).fill(0).map((item, key) => key)]; const xList = [...new Array(61).fill(0).map((item, key) => key)];
const seriesData = [ const seriesData = [
...xList.map((item) => { ...xList.map((item) => {
return Math.random() * 80; return Math.random() * 80;
}), }),
]; ];
// let seriesData=[ // 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,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,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 // ,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); // console.log(seriesData,'seriesData',xList);
const option: EChartOption ={ const option: EChartOption = {
grid: { grid: {
// 让图表占满容器 // 让图表占满容器
top: "10rpx", top: "10rpx",
left: "35rpx", left: "35rpx",
right: "28rpx", right: "28rpx",
bottom: "17rpx", bottom: "17rpx",
}, },
xAxis: { xAxis: {
type: "category", type: "category",
data: [...xList], data: [...xList],
axisLabel: { axisLabel: {
interval: 9, interval: 9,
formatter: function (value, index) { formatter: function (value, index) {
return value * 6 + 's'; return value * 6 + 's';
}, },
textStyle: { textStyle: {
color: '#999999', // 文字颜色 color: '#999999', // 文字颜色
fontSize: 8 // 文字大小 fontSize: 8 // 文字大小
}, },
}, },
axisTick: { axisTick: {
// alignWithLabel: true, // alignWithLabel: true,
show: false, show: false,
interval: 9, interval: 9,
}, },
// axisLine: { // axisLine: {
// show: false, // show: false,
// }, // },
}, },
yAxis: [ yAxis: [
{ {
min: 0, min: 0,
max: 80, max: 80,
splitNumber: 10, splitNumber: 10,
axisLabel: { axisLabel: {
formatter: function (value, index) { formatter: function (value, index) {
const num = value / 10 + 1 const num = value / 10 + 1
return num === 9 ? '' : num + '级'; return num === 9 ? '' : num + '级';
}, },
textStyle: { textStyle: {
color: '#999999', // 文字颜色 color: '#999999', // 文字颜色
fontSize: 8 // 文字大小 fontSize: 8 // 文字大小
}, },
}, },
type: "value", type: "value",
splitLine: { splitLine: {
lineStyle: { lineStyle: {
color: ["#ccc", "#ccc", "#ccc", "#ccc", "#ccc", "#ccc", "#ccc", "#ccc", "#fff"], color: ["#ccc", "#ccc", "#ccc", "#ccc", "#ccc", "#ccc", "#ccc", "#ccc", "#fff"],
type:'dashed' type: 'dashed'
}, },
} }
}, },
], ],
series: [ series: [
{ {
barCategoryGap:'0%', barCategoryGap: '0%',
data: seriesData, data: seriesData,
type: "bar", type: "bar",
// barWidth: 15, // barWidth: 15,
gapWidth: "0%", gapWidth: "0%",
itemStyle: { itemStyle: {
normal: { normal: {
color: function (params) { color: function (params) {
var value = params.data; var value = params.data;
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [ return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ {
offset: 0, offset: 0,
color: colors[parseInt(value)], // 红色 color: colors[parseInt(value)], // 红色
}, },
{ {
offset: 1, offset: 1,
color: colors[0], // 黄色 color: colors[0], // 黄色
}, },
]);; ]);;
}, },
}, },
}, },
}, },
], ],
}; };
// const option: EChartOption = { let arr = [2, 3, 4, 5, 6, 7]
// grid: { return (
// // 让图表占满容器 <Block>
// top: "28rpx", <Echarts
// left: "18rpx", echarts={echarts}
// right: "28rpx", option={option}
// bottom: "17rpx", ref={echartsRef}
// }, // isPage={false}
// xAxis: [ // style自定义设置echarts宽高
// { // style={{ width: "100%", height: "100%" }}
// type: 'category', style={{ width: "630rpx", height: "260rpx" }}
// 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]; {/* <View className="box">
let arr =[2,3,4,5,6,7]
return (
<Block>
<Echarts
echarts={echarts}
option={option}
ref={echartsRef}
// isPage={false}
// style自定义设置echarts宽高
// style={{ width: "100%", height: "100%" }}
style={{ width: "630rpx", height: "260rpx" }}
/>
{/* <View className="box">
<Echarts <Echarts
echarts={echarts} echarts={echarts}
option={option} option={option}
@ -375,9 +183,9 @@ const seriesData = [
</View> */} </View> */}
</Block> </Block>
); );
} }
export default Index; export default Index;

16
src/recoding/pages/recording/recording.tsx
Unescape Escape View File

@ -221,7 +221,9 @@ export default class Recording extends Component<any, any> {
if (item.id === id) { if (item.id === id) {
item.detail = res.data.data; item.detail = res.data.data;
item.detail.map((obj) => { item.detail.map((obj) => {
let updateTime = getdates(obj.updateTime); let updateTime = obj.updateTime
? getdates(obj.updateTime)
: getdates(obj.createTime);
obj.updateTime = updateTime && updateTime.replace(/-/g, "."); obj.updateTime = updateTime && updateTime.replace(/-/g, ".");
}); });
@ -296,7 +298,7 @@ export default class Recording extends Component<any, any> {
case 2: case 2:
this.two(item); this.two(item);
break; break;
case 3: case 6:
this.three(item); this.three(item);
break; break;
default: default:
@ -322,9 +324,9 @@ export default class Recording extends Component<any, any> {
two = async (item) => { two = async (item) => {
console.log("打开第二种类型", item); console.log("打开第二种类型", item);
}; };
// 打开第二种类型 // 打开第三种类型
three = async (item) => { three = async (item) => {
console.log("打开第二种类型", item); go("/recoding/pages/moisture_test_report/moisture_test_report");
}; };
// 打开其他类型 // 打开其他类型
AllDevice = async (item) => { AllDevice = async (item) => {
@ -464,8 +466,8 @@ export default class Recording extends Component<any, any> {
> >
<Image <Image
className="products_cover" className="products_cover"
src={item.banner} src={item.logo}
mode="aspectFit" mode="aspectFill"
></Image> ></Image>
<View className="products_title">{item.name}</View> <View className="products_title">{item.name}</View>
</View> </View>
@ -660,7 +662,7 @@ export default class Recording extends Component<any, any> {
{item.isMore && item.detail && ( {item.isMore && item.detail && (
<View> <View>
{item.detail.map((obj) => ( {item.detail.map((obj) => (
<View key={obj}> <View key={obj.id}>
<View style="height: 57rpx"></View> <View style="height: 57rpx"></View>
<View className="month_item"> <View className="month_item">
<View className="month_item_date"> <View className="month_item_date">

Write Preview
Loading…
Cancel
Save