diff --git a/src/moduleIOT/pages/iotCarePlan/components/Echart/index.tsx b/src/moduleIOT/pages/iotCarePlan/components/Echart/index.tsx index 42dacc4..cb7e993 100644 --- a/src/moduleIOT/pages/iotCarePlan/components/Echart/index.tsx +++ b/src/moduleIOT/pages/iotCarePlan/components/Echart/index.tsx @@ -14,10 +14,13 @@ interface Props { facialMaskConnectStatus: any; } + + function Index() { + const echartsRef = useRef(null); const option: EChartOption = { - + grid: { // 让图表占满容器 top: "28rpx", @@ -25,6 +28,13 @@ function Index() { right: "28rpx", bottom: "17rpx", }, + // legend: { + // itemStyle: { + // decal: { + // rotation: 90 + // } + // } + // }, xAxis: { // name: '', // nameGap: 5, @@ -251,12 +261,28 @@ function Index() { }; 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 ( - + - + 实时能量 {level.map((item) => ( @@ -279,7 +305,7 @@ function Index() { 时间 - + ); } diff --git a/src/moduleIOT/pages/iotCarePlan/components/Echart_face/index.tsx b/src/moduleIOT/pages/iotCarePlan/components/Echart_face/index.tsx index 8ca270a..49f2027 100644 --- a/src/moduleIOT/pages/iotCarePlan/components/Echart_face/index.tsx +++ b/src/moduleIOT/pages/iotCarePlan/components/Echart_face/index.tsx @@ -9,361 +9,169 @@ import echarts from "@/utils/echarts.min.js"; import "./index.less"; interface Props { - Electricity: any; - matrixElectricity: any; - facialMaskConnectStatus: any; + Electricity: any; + matrixElectricity: any; + facialMaskConnectStatus: any; } function Index() { - - const echartsRef = useRef(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)); + + const echartsRef = useRef(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; } - 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 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 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; -} + function interpolate(start, end, steps, count) { + return start + ((end - start) / steps) * count; + } -const startColor = "#FFFF00"; // 黄色 -const endColor = "#FF0000"; // 红色 -const steps = 80; // 80个颜色 + const startColor = "#FFFF00"; // 黄色 + const endColor = "#FF0000"; // 红色 + const steps = 80; // 80个颜色 -const colors = generateColorArray(startColor, endColor, steps); -const xList = [...new Array(61).fill(0).map((item, key) => key)]; -const seriesData = [ - ...xList.map((item) => { - return Math.random() * 80; - }), -]; - // 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: "10rpx", - left: "35rpx", - right: "28rpx", - bottom: "17rpx", - }, - xAxis: { - type: "category", - data: [...xList], - axisLabel: { - interval: 9, - formatter: function (value, index) { - return value * 6 + 's'; - }, - textStyle: { + const colors = generateColorArray(startColor, endColor, steps); + const xList = [...new Array(61).fill(0).map((item, key) => key)]; + const seriesData = [ + ...xList.map((item) => { + return Math.random() * 80; + }), + ]; + // 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: "10rpx", + left: "35rpx", + right: "28rpx", + bottom: "17rpx", + }, + xAxis: { + type: "category", + data: [...xList], + axisLabel: { + interval: 9, + formatter: function (value, index) { + return value * 6 + '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: { + }, + 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: { + }, + type: "value", + splitLine: { lineStyle: { - color: ["#ccc", "#ccc", "#ccc", "#ccc", "#ccc", "#ccc", "#ccc", "#ccc", "#fff"], - type:'dashed' - }, - } - }, - ], - series: [ + 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], // 黄色 - }, - ]);; - }, - }, - }, - }, - ], - }; - // 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%', - // // } - // // ] - // }; + { + 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], // 黄色 + }, + ]);; + }, + }, + }, + }, + ], + }; + let arr = [2, 3, 4, 5, 6, 7] + return ( + + - const level = [8, 7, 6, 5, 4, 3, 2]; - let arr =[2,3,4,5,6,7] - return ( - - - - {/* + {/* */} - - - ); + + + ); } export default Index; diff --git a/src/recoding/pages/recording/recording.tsx b/src/recoding/pages/recording/recording.tsx index 7c43693..246bb8c 100644 --- a/src/recoding/pages/recording/recording.tsx +++ b/src/recoding/pages/recording/recording.tsx @@ -221,7 +221,9 @@ export default class Recording extends Component { if (item.id === id) { item.detail = res.data.data; 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, "."); }); @@ -296,7 +298,7 @@ export default class Recording extends Component { case 2: this.two(item); break; - case 3: + case 6: this.three(item); break; default: @@ -322,9 +324,9 @@ export default class Recording extends Component { two = async (item) => { console.log("打开第二种类型", item); }; - // 打开第二种类型 + // 打开第三种类型 three = async (item) => { - console.log("打开第二种类型", item); + go("/recoding/pages/moisture_test_report/moisture_test_report"); }; // 打开其他类型 AllDevice = async (item) => { @@ -464,8 +466,8 @@ export default class Recording extends Component { > {item.name} @@ -660,7 +662,7 @@ export default class Recording extends Component { {item.isMore && item.detail && ( {item.detail.map((obj) => ( - +