Compare commits
1 Commits
tangjian（T
...
Leei
| Author | SHA1 | Date | |
|---|---|---|---|
|
ebd850dc73 |
@@ -2,20 +2,17 @@ module.exports = {
|
|||||||
root: true,
|
root: true,
|
||||||
env: { browser: true, es2020: true },
|
env: { browser: true, es2020: true },
|
||||||
extends: [
|
extends: [
|
||||||
"eslint:recommended",
|
'eslint:recommended',
|
||||||
"plugin:@typescript-eslint/recommended",
|
'plugin:@typescript-eslint/recommended',
|
||||||
"plugin:react-hooks/recommended",
|
'plugin:react-hooks/recommended',
|
||||||
],
|
],
|
||||||
ignorePatterns: ["dist", ".eslintrc.cjs"],
|
ignorePatterns: ['dist', '.eslintrc.cjs'],
|
||||||
parser: "@typescript-eslint/parser",
|
parser: '@typescript-eslint/parser',
|
||||||
plugins: ["react-refresh"],
|
plugins: ['react-refresh'],
|
||||||
rules: {
|
rules: {
|
||||||
"react-refresh/only-export-components": [
|
'react-refresh/only-export-components': [
|
||||||
"warn",
|
'warn',
|
||||||
{ allowConstantExport: true },
|
{ allowConstantExport: true },
|
||||||
],
|
],
|
||||||
"@typescript-eslint/no-explicit-any": "off",
|
|
||||||
"prefer-const": "off",
|
|
||||||
"@typescript-eslint/no-unused-vars": "off",
|
|
||||||
},
|
},
|
||||||
};
|
}
|
||||||
|
|||||||
@@ -19,7 +19,6 @@
|
|||||||
"nprogress": "^0.2.0",
|
"nprogress": "^0.2.0",
|
||||||
"react": "^18.2.0",
|
"react": "^18.2.0",
|
||||||
"react-dom": "^18.2.0",
|
"react-dom": "^18.2.0",
|
||||||
"react-echarts-core": "^1.0.2",
|
|
||||||
"react-redux": "^8.1.2",
|
"react-redux": "^8.1.2",
|
||||||
"react-router-dom": "^6.15.0",
|
"react-router-dom": "^6.15.0",
|
||||||
"redux-persist": "^6.0.0",
|
"redux-persist": "^6.0.0",
|
||||||
|
|||||||
@@ -1,174 +0,0 @@
|
|||||||
import { useState, useRef, useEffect } from "react";
|
|
||||||
import "../index.scss";
|
|
||||||
import { Button, Select } from "antd";
|
|
||||||
// import type { EChartsOption } from "node_modules/react-echarts-core/lib/ChartCore";
|
|
||||||
// import ChartCore from "node_modules/react-echarts-core/lib/ChartCore";
|
|
||||||
import * as echarts from "echarts";
|
|
||||||
export default function EchartsEditor() {
|
|
||||||
const echartRef: any = useRef(null);
|
|
||||||
const [xList, setXList] = useState<any[]>([]);
|
|
||||||
const [yList, setYList] = useState<any[]>([]);
|
|
||||||
const [currentDrag, setCurrentDrag] = useState<any>({});
|
|
||||||
const [dataList, setDataList] = useState<any[]>([
|
|
||||||
{ id: 1, name: "Vue", state: "Value" },
|
|
||||||
{ id: 2, name: "React", state: "Value" },
|
|
||||||
{ id: 3, name: "Angular", state: "Key" },
|
|
||||||
]);
|
|
||||||
const [echartOption, setEchartOption] = useState<object | any>({
|
|
||||||
xAxis: {
|
|
||||||
data: ["A", "B", "C", "D", "E"],
|
|
||||||
},
|
|
||||||
yAxis: {
|
|
||||||
type: "value",
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
data: [1, 2, 3, 4, 5],
|
|
||||||
type: "line",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
});
|
|
||||||
|
|
||||||
const onDragStart: any = (item: any) => {
|
|
||||||
console.log(item.name, "开始拖拽");
|
|
||||||
setCurrentDrag(item);
|
|
||||||
};
|
|
||||||
|
|
||||||
const onDragEnd: any = (item: any) => {
|
|
||||||
console.log(item.name, "结束拖拽");
|
|
||||||
};
|
|
||||||
|
|
||||||
const onYDragOver: any = (e: any) => {
|
|
||||||
e.preventDefault();
|
|
||||||
};
|
|
||||||
|
|
||||||
const onXDrop: any = () => {
|
|
||||||
console.log("拖拽至X轴区域");
|
|
||||||
setXList(xList.concat(currentDrag));
|
|
||||||
let newDataList = handleDelDataList(currentDrag.id);
|
|
||||||
setDataList(newDataList);
|
|
||||||
setEchartOption({
|
|
||||||
...echartOption,
|
|
||||||
xAxis: {
|
|
||||||
data: xList.map((item) => item.name),
|
|
||||||
},
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const onXDragOver: any = (e: any) => {
|
|
||||||
e.preventDefault();
|
|
||||||
};
|
|
||||||
|
|
||||||
const onYDrop: any = () => {
|
|
||||||
console.log("拖拽至Y轴区域");
|
|
||||||
console.log("拖拽至Y轴区域");
|
|
||||||
console.log("拖拽至Y轴区域");
|
|
||||||
console.log("拖拽至Y轴区域");
|
|
||||||
setYList(yList.concat(currentDrag));
|
|
||||||
let newDataList = handleDelDataList(currentDrag.id);
|
|
||||||
setDataList(newDataList);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleDelDataList = (id: number) => {
|
|
||||||
let newDataList = dataList;
|
|
||||||
const curIndex = newDataList.findIndex((item) => item.id === id);
|
|
||||||
newDataList.splice(curIndex, 1);
|
|
||||||
return newDataList;
|
|
||||||
};
|
|
||||||
|
|
||||||
// const res = () => {
|
|
||||||
// let res: any[] = [];
|
|
||||||
// setXList(xList);
|
|
||||||
// xList.forEach((item: any) => {
|
|
||||||
// res.push(item.name);
|
|
||||||
// });
|
|
||||||
// setXEchartList(res);
|
|
||||||
// console.log(xEchartList);
|
|
||||||
// return xEchartList;
|
|
||||||
// };
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const myEchart: any = echarts.init(document.querySelector(".canvas"));
|
|
||||||
myEchart.setOption(echartOption);
|
|
||||||
console.log(echartOption);
|
|
||||||
}, [echartOption]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<div className="controller">
|
|
||||||
<div className="data bg">
|
|
||||||
<Select
|
|
||||||
placeholder="折线图"
|
|
||||||
allowClear
|
|
||||||
style={{ width: 100 + "%" }}
|
|
||||||
options={[{ value: "折线图", label: "折线图" }]}
|
|
||||||
/>
|
|
||||||
{dataList.map((item: any) => {
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
className="list-item"
|
|
||||||
key={item.id}
|
|
||||||
draggable={true}
|
|
||||||
onDragStart={() => onDragStart(item)}
|
|
||||||
onDragEnd={() => onDragEnd(item)}
|
|
||||||
>
|
|
||||||
{item.name}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
className="index-x bg"
|
|
||||||
onDragOver={onXDragOver}
|
|
||||||
onDrop={() => onXDrop()}
|
|
||||||
>
|
|
||||||
<span>值轴/X轴</span>
|
|
||||||
{xList.map((item: any) => {
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
className="list-item"
|
|
||||||
key={item.id}
|
|
||||||
// draggable={true}
|
|
||||||
// onDragStart={() => onDragStart(item)}
|
|
||||||
// onDragEnd={() => onDragEnd(item)}
|
|
||||||
>
|
|
||||||
{item.name}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
className="index-y bg"
|
|
||||||
onDragOver={onYDragOver}
|
|
||||||
onDrop={() => onYDrop()}
|
|
||||||
>
|
|
||||||
<span>值轴/y轴</span>
|
|
||||||
{yList.map((item: any) => {
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
className="list-item"
|
|
||||||
key={item.id}
|
|
||||||
// draggable={true}
|
|
||||||
// onDragStart={() => onDragStart(item)}
|
|
||||||
// onDragEnd={() => onDragEnd(item)}
|
|
||||||
>
|
|
||||||
{item.name}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="center-edit">
|
|
||||||
<div></div>
|
|
||||||
</div>
|
|
||||||
<div className="center-edit">
|
|
||||||
<Button>保存</Button>
|
|
||||||
<Button>高级设置</Button>
|
|
||||||
</div>
|
|
||||||
<div className="canvas" ref={echartRef}>
|
|
||||||
{/* <ChartCore option={option}></ChartCore> */}
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,38 +0,0 @@
|
|||||||
.controller {
|
|
||||||
display: flex;
|
|
||||||
.bg {
|
|
||||||
text-align: left;
|
|
||||||
box-shadow: 1px 1px 3px 1px #ddd;
|
|
||||||
background-color: #fff;
|
|
||||||
height: 40vh;
|
|
||||||
padding: 10px;
|
|
||||||
margin: 5px;
|
|
||||||
}
|
|
||||||
.list-item {
|
|
||||||
width: 95%;
|
|
||||||
margin: 10px auto;
|
|
||||||
height: 50px;
|
|
||||||
padding: 10px;
|
|
||||||
font-size: 20px;
|
|
||||||
border: 1px solid #ddd;
|
|
||||||
}
|
|
||||||
.data {
|
|
||||||
flex: 25%;
|
|
||||||
padding: 10px;
|
|
||||||
}
|
|
||||||
.index-x {
|
|
||||||
flex: 40%;
|
|
||||||
}
|
|
||||||
.index-y {
|
|
||||||
flex: 40%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.center-edit {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
.canvas {
|
|
||||||
width: 800px;
|
|
||||||
height: 400px;
|
|
||||||
background-color: pink;
|
|
||||||
}
|
|
||||||
0
src/view/system/role/index.tsx
Normal file
0
src/view/system/role/index.tsx
Normal file
Reference in New Issue
Block a user