init commit

src/hooks/getChartOption.js

@@ -0,0 +1,97 @@
+import * as echarts from 'echarts';
+
+export default function getOptions(seriesData, name) {
+	const colors = [
+		'#FFD160',
+		'#12FFF5',
+		'#2760FF',
+		'#E80091',
+		'#8064ff',
+		'#ff8a3b',
+		'#8cd26d',
+		'#2aa1ff',
+	];
+	return {
+		color: colors,
+		grid: { top: 38, right: 12, bottom: 20, left: 48 },
+		legend: {
+			show: false,
+			icon: 'roundRect',
+			top: 10,
+			right: 10,
+			padding: 0,
+			itemWidth: 8,
+			itemHeight: 8,
+			itemGap: 3,
+			height: 8,
+			textStyle: {
+				color: '#DFF1FE',
+				fontSize: 10,
+			},
+		},
+		xAxis: {
+			type: 'category',
+			data: Array(7)
+				.fill(1)
+				.map((_, index) => {
+					const today = new Date();
+					const dtimestamp = today - index * 24 * 60 * 60 * 1000;
+					return `${new Date(dtimestamp).getMonth() + 1}.${new Date(
+						dtimestamp,
+					).getDate()}`;
+				})
+				.reverse(),
+			axisLabel: {
+				color: '#fff',
+				fontSize: 12,
+			},
+			axisTick: { show: false },
+			axisLine: {
+				lineStyle: {
+					width: 1,
+					color: '#213259',
+				},
+			},
+		},
+		yAxis: {
+			name: '单位m³/h',
+			nameTextStyle: {
+				color: '#fff',
+				fontSize: 10,
+				align: 'right',
+			},
+			type: 'value',
+			axisLabel: {
+				color: '#fff',
+				fontSize: 12,
+				formatter: '{value}',
+			},
+			axisLine: {
+				show: true,
+				lineStyle: {
+					color: '#213259',
+				},
+			},
+			splitLine: {
+				lineStyle: {
+					color: '#213259a0',
+				},
+			},
+		},
+		series: seriesData.map((arr, index) => ({
+			name: index + 1 + '#' + name,
+			data: arr,
+			type: 'line',
+			areaStyle: {
+				color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+					{ offset: 0, color: colors[index] + '40' },
+					{ offset: 0.5, color: colors[index] + '20' },
+					{ offset: 1, color: colors[index] + '00' },
+				]),
+			},
+		})),
+		tooltip: {
+			trigger: 'axis',
+		},
+	};
+}

src/hooks/slider.css

@@ -0,0 +1,28 @@
+.slider {
+    height: 5vh;
+    width: 20vw;
+    border-radius: 88px;
+    box-shadow: 0 0 68px 8px rgba(0, 0, 0, .3);
+    padding: 32px;
+    display: grid;
+    place-items: center;
+    background: #fff;
+    position: fixed;
+    bottom: 0;
+    opacity: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    transition: opacity 0.3s ease-out, bottom 0.3s ease-out;
+}
+
+.slider input {
+    width: 100%;
+    transform: translateY(-7px);
+    color: #0b58ff;
+    background: #fcc;
+}
+
+.slider.show {
+    opacity: 1;
+    bottom: 64px;
+}

src/hooks/useChart.js

@@ -0,0 +1,3 @@
+function useChart(el, data) {
+	return <div>chart</div>;
+}

src/hooks/useIcon.js

@@ -0,0 +1,30 @@
+import IconStack from '../assets/Icon/icon-stack.png';
+import IconGood from '../assets/Icon/icon-good.png';
+import IconCharger from '../assets/Icon/icon-charge.png';
+import IconSmoke from '../assets/Icon/icon-taiji.png';
+import IconChart from '../assets/Icon/icon-chart.png';
+import IconPuzzle from '../assets/Icon/icon-puzzle.png';
+import IconPause from '../assets/Icon/icon-pause.png';
+import IconDefault from '../assets/Icon/icon-puzzle.png';
+
+function useIcon(iconName) {
+	// const icon = require(`../assets/icons/${iconName}.svg`).default;
+	// return icon;
+	return iconName == 'kiln'
+		? IconStack
+		: iconName == 'goods'
+		? IconGood
+		: iconName == 'battery'
+		? IconCharger
+		: iconName == 'smoke'
+		? IconSmoke
+		: iconName == 'chart'
+		? IconChart
+		: iconName == 'puzzle'
+		? IconPuzzle
+		: iconName == 'pause'
+		? IconPause
+		: IconDefault;
+}
+
+export default useIcon;

src/hooks/useSlider.js

@@ -0,0 +1,48 @@
+import { useState, useEffect } from 'react';
+import './slider.css';
+
+export const Slider = ({ value, setValue }) => {
+	const handleInput = (e) => {
+		setValue(e.target.value);
+	};
+	return (
+		<div id="slider" className="slider">
+			<input type="range" value={value} onChange={handleInput} />
+		</div>
+	);
+};
+
+export default function useSlider(defaultSize) {
+	const [value, setValue] = useState(defaultSize || 100);
+
+	const v = (value / 100).toFixed(2);
+
+	const styles = {
+		transform: `scale(${v})`,
+		// transform: `scale(${v * 24 / 33}, ${v})`,
+		transformOrigin: 'top left',
+	};
+
+	useEffect(() => {
+		let fn = (e) => {
+			if (e.shiftKey && e.key === 'L') {
+				document.getElementById('slider').classList.toggle('show');
+			}
+		};
+		let fn2 = () => {
+			setTimeout(() => {
+				document.getElementById('slider').classList.remove('show');
+			}, 200);
+		};
+
+		document.addEventListener('keydown', fn);
+		document.getElementById('slider').addEventListener('mouseleave', fn2);
+
+		return () => {
+			document.removeEventListener('keydown', fn);
+			document.getElementById('slider').removeEventListener('mouseleave', fn2);
+		};
+	}, [value]);
+
+	return { styles, value, setValue };
+}