Compare commits
17 Commits
9b93ce8c0a
...
75413856f7
| Author | SHA1 | Date |
|---|---|---|
blak-kong
|
75413856f7 | 2 years ago |
|
blak-kong
|
64302d397e | 2 years ago |
|
blak-kong
|
bc9b6bc487 | 2 years ago |
|
blak-kong
|
a1d3824adf | 2 years ago |
|
blak-kong
|
b426251c83 | 2 years ago |
|
blak-kong
|
0f0bca2771 | 2 years ago |
|
blak-kong
|
0041b69e61 | 2 years ago |
|
blak-kong
|
9c83b1d9bf | 2 years ago |
rongweikang
|
e7f20bd40c | 2 years ago |
|
rongweikang
|
ab7a90ce81 | 2 years ago |
|
rongweikang
|
ef441b00f0 | 2 years ago |
|
rongweikang
|
328d55b69a | 2 years ago |
|
blak-kong
|
0e2d775ebe | 2 years ago |
|
blak-kong
|
0459a45ab4 | 2 years ago |
|
blak-kong
|
18eaff89e6 | 2 years ago |
|
blak-kong
|
3a4019a313 | 2 years ago |
|
blak-kong
|
11f5aed2dc | 2 years ago |
@ -0,0 +1,53 @@
|
||||
import Taro from "@tarojs/taro";
|
||||
import { Component, PropsWithChildren } from "react";
|
||||
import "./app.less";
|
||||
// // html4
|
||||
// import "@tarojs/taro/html.css";
|
||||
// // html5
|
||||
// import "@tarojs/taro/html5.css";
|
||||
|
||||
import { Provider } from "react-redux";
|
||||
import store from "./store";
|
||||
import "./iconfont/iconfont.css";
|
||||
import "taro-ui/rn/style/components/icon.scss";
|
||||
|
||||
import { go } from "./utils/traoAPI";
|
||||
|
||||
class App extends Component {
|
||||
// 可以使用所有的 React 生命周期方法
|
||||
componentDidMount() {}
|
||||
|
||||
// 对应 onLaunch
|
||||
onLaunch(options) {
|
||||
// console.log("onLaunch", options);
|
||||
if (options.scene == 1007 || options.scene == 1008) {
|
||||
return;
|
||||
}
|
||||
|
||||
// go("/pages/iotCarePlan/iotCarePlan");
|
||||
// go("/pages/instrument_clickin_upload/index");
|
||||
// go("/pages/instrument/intro");
|
||||
// Taro.switchTab({
|
||||
// url: "/pages/user/user",
|
||||
// });
|
||||
go("/pages/index/index");
|
||||
}
|
||||
|
||||
onError(error) {
|
||||
console.log("error 错误捕获", error);
|
||||
}
|
||||
|
||||
// 对应 onShow
|
||||
componentDidShow() {}
|
||||
|
||||
// 对应 onHide
|
||||
componentDidHide() {}
|
||||
|
||||
// this.props.children 是将要会渲染的页面
|
||||
render() {
|
||||
// return this.props.children
|
||||
return <Provider store={store} children={this.props.children}></Provider>;
|
||||
}
|
||||
}
|
||||
|
||||
export default App;
|
||||
@ -0,0 +1,19 @@
|
||||
.nodata {
|
||||
width: 200rpx;
|
||||
height: 300rpx;
|
||||
margin: 0 auto;
|
||||
// margin-top: 310rpx;
|
||||
text-align: center;
|
||||
.nodata_img {
|
||||
display: inline-block;
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
margin-bottom: 34rpx;
|
||||
}
|
||||
.nodata_text {
|
||||
font-size: 30rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,45 @@
|
||||
import classnames from "classnames";
|
||||
import Taro from "@tarojs/taro";
|
||||
import { Component } from "react";
|
||||
|
||||
import { Block, View, Image } from "@tarojs/components";
|
||||
|
||||
import "./nodata.less";
|
||||
|
||||
export default class NoDataComponent extends Component<any, any> {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
name: "无数据组件",
|
||||
};
|
||||
}
|
||||
|
||||
async onLoad() {}
|
||||
componentDidMount() {}
|
||||
|
||||
componentWillUnmount() {}
|
||||
|
||||
componentDidShow() {}
|
||||
|
||||
componentDidHide() {}
|
||||
|
||||
async initData() {}
|
||||
|
||||
showInit() {}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Block>
|
||||
<View>
|
||||
<View className="nodata">
|
||||
<Image
|
||||
className="nodata_img"
|
||||
src={require("../../img/nodata.png")}
|
||||
></Image>
|
||||
<View className="nodata_text">暂无数据</View>
|
||||
</View>
|
||||
</View>
|
||||
</Block>
|
||||
);
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 80 KiB After Width: | Height: | Size: 22 KiB |
@ -0,0 +1,62 @@
|
||||
.box {
|
||||
width: 690rpx;
|
||||
height: 320rpx;
|
||||
margin: 28rpx auto;
|
||||
background-color: #fff;
|
||||
border-radius: 30rpx;
|
||||
padding: 35rpx 25rpx 25rpx 35rpx;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
}
|
||||
.box_background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 690rpx;
|
||||
height: 320rpx;
|
||||
border-radius: 30rpx;
|
||||
background-color: #fff;
|
||||
.power {
|
||||
margin: 34rpx 0 28rpx 28rpx;
|
||||
font-family: PingFang-SC;
|
||||
font-weight: 500;
|
||||
font-size: 18rpx;
|
||||
color: #cccccc;
|
||||
}
|
||||
.full{
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
position: absolute;
|
||||
top: 32rpx;
|
||||
right: 26rpx;
|
||||
}
|
||||
.line {
|
||||
margin: 0 0 6rpx 35rpx;
|
||||
font-family: PingFang-SC;
|
||||
font-size: 14rpx;
|
||||
color: #cccccc;
|
||||
display: flex;
|
||||
position: relative;
|
||||
height: 18rpx;
|
||||
.bottom_line {
|
||||
border-bottom: 1rpx #ccc dashed;
|
||||
width: 550rpx;
|
||||
margin-left: 20rpx;
|
||||
position: absolute;
|
||||
bottom: -6rpx;
|
||||
right: 74rpx;
|
||||
height: 4rpx;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.time {
|
||||
position: absolute;
|
||||
bottom: 22rpx;
|
||||
right: 24rpx;
|
||||
font-family: PingFang-SC;
|
||||
font-size: 18rpx;
|
||||
color: #cccccc;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,284 @@
|
||||
import Taro from "@tarojs/taro";
|
||||
import classnames from "classnames";
|
||||
import { Block, View, Image, Text } from "@tarojs/components";
|
||||
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)
|
||||
const option: EChartOption = {
|
||||
grid: { // 让图表占满容器
|
||||
top: "28rpx",
|
||||
left: "18rpx",
|
||||
right: "28rpx",
|
||||
bottom: "17rpx"
|
||||
},
|
||||
xAxis: {
|
||||
// name: '',
|
||||
// nameGap: 5,
|
||||
// nameTextStyle: {
|
||||
// color: '#e4e4e4',
|
||||
// fontSize:7
|
||||
// },
|
||||
type: 'category',
|
||||
axisLine: {
|
||||
//坐标轴轴线相关设置。数学上的x轴
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#cccccc'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
//坐标轴刻度标签的相关设置
|
||||
color: '#cccccc',
|
||||
fontSize: 8
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
data: [
|
||||
'00:01',
|
||||
'00:02',
|
||||
'00:03',
|
||||
'00:04',
|
||||
'00:05',
|
||||
'00:06',
|
||||
'00:07',
|
||||
'00:08',
|
||||
'00:09',
|
||||
'00:10'
|
||||
]
|
||||
},
|
||||
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
|
||||
}
|
||||
},
|
||||
visualMap: {
|
||||
z: 1,
|
||||
top: 0,
|
||||
right: 0,
|
||||
seriesIndex: 0,
|
||||
show: false,
|
||||
pieces: [
|
||||
{
|
||||
gt: 0,
|
||||
lte: 1,
|
||||
color: '#fff8c9'
|
||||
},
|
||||
{
|
||||
gt: 1,
|
||||
lte: 2,
|
||||
color: '#fff0c6'
|
||||
},
|
||||
{
|
||||
gt: 2,
|
||||
lte: 3,
|
||||
color: '#ffe5c3'
|
||||
},
|
||||
{
|
||||
gt: 3,
|
||||
lte: 4,
|
||||
color: '#ffdbbf'
|
||||
},
|
||||
{
|
||||
gt: 4,
|
||||
lte: 5,
|
||||
color: '#ffcfbb'
|
||||
},
|
||||
{
|
||||
gt: 5,
|
||||
lte: 6,
|
||||
color: '#ffbab5'
|
||||
},
|
||||
{
|
||||
gt: 6,
|
||||
lte: 7,
|
||||
color: '#ffb4b3'
|
||||
},
|
||||
{
|
||||
gt: 7,
|
||||
lte: 8,
|
||||
color: '#ffb4b3'
|
||||
}
|
||||
],
|
||||
outOfRange: {
|
||||
color: '#ff8410'
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [2, 3, 5, 3, 5, 6, 8, 5, 6, 4],
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
z: 1,
|
||||
areaStyle: {},
|
||||
color: 'red'
|
||||
},
|
||||
{
|
||||
data: [2, 3, 5, 3, 5, 6, 8, 5, 6, 4],
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbolSize: 5,
|
||||
lineStyle: {
|
||||
color: '#ff8410',
|
||||
width: 1
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#ff8410'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'a',
|
||||
data: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
|
||||
type: 'bar',
|
||||
barWidth: 12,
|
||||
z: 2,
|
||||
stack: 'x',
|
||||
visualMap: false,
|
||||
itemStyle: {
|
||||
color: '#ffcf56'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'b',
|
||||
data: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
|
||||
type: 'bar',
|
||||
z: 2,
|
||||
stack: 'x',
|
||||
visualMap: false,
|
||||
itemStyle: {
|
||||
color: '#febb22'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'c',
|
||||
data: [0, 1, 1, 1, 1, 1, 1, 1, 1, 1],
|
||||
type: 'bar',
|
||||
z: 2,
|
||||
stack: 'x',
|
||||
visualMap: false,
|
||||
itemStyle: {
|
||||
color: '#ffac28'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'd',
|
||||
data: [0, 0, 1, 0, 1, 1, 1, 1, 1, 1],
|
||||
type: 'bar',
|
||||
z: 2,
|
||||
stack: 'x',
|
||||
visualMap: false,
|
||||
itemStyle: {
|
||||
color: '#ff8410'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'e',
|
||||
data: [0, 0, 1, 0, 1, 1, 1, 1, 1, 0],
|
||||
type: 'bar',
|
||||
z: 2,
|
||||
stack: 'x',
|
||||
visualMap: false,
|
||||
itemStyle: {
|
||||
color: '#f85804'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'f',
|
||||
data: [0, 0, 0, 0, 0, 1, 1, 0, 1, 0],
|
||||
type: 'bar',
|
||||
z: 2,
|
||||
stack: 'x',
|
||||
visualMap: false,
|
||||
itemStyle: {
|
||||
color: '#e02e14'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'h',
|
||||
data: [0, 0, 0, 0, 0, 0, 1, 0, 0, 0],
|
||||
type: 'bar',
|
||||
z: 2,
|
||||
stack: 'x',
|
||||
visualMap: false,
|
||||
itemStyle: {
|
||||
color: '#b30016'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'i',
|
||||
data: [0, 0, 0, 0, 0, 0, 1, 0, 0, 0],
|
||||
type: 'bar',
|
||||
z: 2,
|
||||
stack: 'x',
|
||||
visualMap: false,
|
||||
itemStyle: {
|
||||
color: '#750010'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
const level = [8, 7, 6, 5, 4, 3, 2]
|
||||
|
||||
return (
|
||||
<View className='box' >
|
||||
<Echarts
|
||||
echarts={echarts}
|
||||
option={option}
|
||||
ref={echartsRef}
|
||||
// isPage={false}
|
||||
// style自定义设置echarts宽高
|
||||
style={{ width: '630rpx', height: '260rpx' }}
|
||||
/>
|
||||
<View className='box_background'>
|
||||
<Image className='full' src={require('@/img/full-scran.png')}></Image>
|
||||
<View className='power'>实时能量</View>
|
||||
{
|
||||
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>
|
||||
</View>
|
||||
);
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
export default Index;
|
||||
@ -0,0 +1,76 @@
|
||||
.iot-footer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
z-index: 99;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
width: 100%;
|
||||
height: 153rpx;
|
||||
background: #ffffff;
|
||||
box-shadow: 0rpx -3rpx 7rpx 1rpx rgba(173, 191, 207, 0.21);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
box-sizing: border-box;
|
||||
.btn {
|
||||
width: 690rpx;
|
||||
height: 90rpx;
|
||||
background: #000;
|
||||
border-radius: 45rpx;
|
||||
color: #fff;
|
||||
line-height: 90rpx;
|
||||
text-align: center;
|
||||
margin: 21rpx 49rpx 42rpx 30rpx;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.text {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.btn-disable {
|
||||
background-color: #ccc !important; /* 设置按钮背景颜色为灰色 */
|
||||
color: #fff !important; /* 设置按钮文字颜色为白色 */
|
||||
border-color: #ccc !important; /* 设置按钮边框颜色为灰色 */
|
||||
}
|
||||
|
||||
.switch-btn-box {
|
||||
width: 100vw;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 34rpx;
|
||||
.btn-item {
|
||||
height: 70rpx;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.btn-icon {
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
margin-right: 18rpx;
|
||||
}
|
||||
.btn-text {
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #000000;
|
||||
}
|
||||
}
|
||||
.border-right {
|
||||
border-right: 1px solid #ddd;
|
||||
}
|
||||
.btn-disable {
|
||||
color: #fff !important; /* 设置按钮文字颜色为白色 */
|
||||
border-color: #ccc !important; /* 设置按钮边框颜色为灰色 */
|
||||
background-color: #fff !important; /* 设置按钮背景颜色为灰色 */
|
||||
.btn-text {
|
||||
color: #ccc !important; /* 设置按钮文字颜色为白色 */
|
||||
border-color: #ccc !important; /* 设置按钮边框颜色为灰色 */
|
||||
background-color: #fff !important; /* 设置按钮背景颜色为灰色 */
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue