xml
计算器的源码
xml
计算器触发事件
源码
typescript
import { DictValueEnumObj } from '@/components/DictTag';
import { getDeptTree, getFormulaListAll, getListAll } from '@/services/Energy/Metering';
import { getListAllInfo, getDepartmentName } from '@/services/Energy/Calculation';
import { ProForm, ProFormText, ProFormTreeSelect } from '@ant-design/pro-components';
import { useIntl } from '@umijs/max';
import { Button, Cascader, Form, Modal, message, Tag } from 'antd';
import { DataNode } from 'antd/es/tree';
import React, { useEffect, useState, useRef } from 'react';
import './index.scss';
import _, { forEach } from 'lodash';
import { json } from 'express';
import Item from 'antd/es/list/Item';
export type RoleFormData = Record<string, unknown> & Partial<API.System.Role>;
let data = [];
export type RoleFormProps = {
onCancel: (flag?: boolean, formVals?: RoleFormData) => void;
onSubmit: (values: RoleFormData) => Promise<void>;
open: boolean;
values: Partial<API.System.Role>;
menuTree: DataNode[];
menuCheckedKeys: string[];
statusOptions: DictValueEnumObj;
currentRow: DictValueEnumObj;
};
let meterItemIdList: string | string[];
let operatorList: string;
let formula1List: string | string[];
let chanLiangList: any[] = [];
const RoleForm: React.FC<RoleFormProps> = (props) => {
const [form] = Form.useForm();
const { menuTree, menuCheckedKeys } = props;
const [menuIds, setMenuIds] = useState<string[]>([]);
const [treeData, setTreeData] = useState<[]>([]);
const [treeDataString, setTreeDataString] = useState<any>([]);
const [textData, setTextData] = useState<any>('');
const [treeData1, setTreeData1] = useState<string[]>([]);
const [treeData2, setTreeData2] = useState<string[]>([]);
const [formulaBatch, setFormulaBatch] = useState<string[]>([]);
const [meterItemIdBatch, setMeterItemIdBatch] = useState<string[]>([]);
const [disabled, setDisabled] = useState<boolean>(true);
const [disabled1, setDisabled1] = useState<boolean>(true);
const [operator, setOperator] = useState<string[]>([]); //回显字典
const [operator1, setOperator1] = useState<string>(); //回显字典
const [operator2, setOperator2] = useState<string[]>([]); //回显字典
const [statusTypeOptions, setStatusTypeOptions] = useState<any>([]);
const [meterItemId, setMeterItemId] = useState<string[]>([]); //回显id
const [meterItemIdFormula, setMeterItemIdFormula] = useState<string[]>([]); //回显id
// const [meterItemIdFormula, setMeterItemIdFormula] = useState<string[]>([]); //回显id
const [formula1List, setFormula1List] = useState<any>([]); //回显id
const [meterItemIdList, setMeterItemIdList] = useState<string[]>([]); //回显id
const [statusOptions, setStatusOptions] = useState<string[]>([]);
const [gongshi, setGongshi] = useState<string[]>([]);
const cascaderCatergoryRef = useRef(null);
const displayRender = (labels: string[]) => labels[labels.length - 1];
const [roleName, setRoleName] = useState<string[]>([]);
// const { statusOptions } = props;
const childFun1 = (res: any) => {
// let children = [];
for (let itemChilf of res.children) {
itemChilf['label'] = itemChilf.meterName;
itemChilf['value'] = itemChilf.id;
itemChilf['key'] = itemChilf.id;
itemChilf['children'] = itemChilf.tbMeterInfoVoList || [];
childFun1(itemChilf);
}
};
const childFun = (res: any) => {
if (res.tbMeterInfoVoList != null) {
const opts: DictValueEnumObj = {};
for (let itemChilf of res.tbMeterInfoVoList) {
opts[itemChilf.id] = {
text: itemChilf.id,
label: itemChilf.meterName,
value: itemChilf.id,
tbMeterInfoVoList: childFun(itemChilf),
};
}
return opts;
}
return;
};
const getlistFormula = () => {
getFormulaListAll().then((res) => {
// console.log(res);
if (res.code === 200) {
const opts2: DictValueEnumObj = {};
res.data.map((item: any) => {
item['label'] = item.indexName;
item['value'] = item.id;
opts2['B' + item.id] = {
text: item.indexName,
label: item.indexName,
value: 'B' + item.id,
key: 'B' + item.id,
idString: item.idString,
formulaString: item.formulaString,
};
return opts2;
});
setTreeData2(opts2);
}
});
};
const operaIndexOf = (itemList: any, key: any) => {
console.log(itemList, key);
for (let item of itemList) {
if (item.indexOf('+') != -1) {
console.log(item.split(key), '+');
data.push(item.split(key));
operaIndexOf(item.split(key), '-');
}
}
};
const getListJianZhi = (val: number) => {
getListAllInfo(val).then((res: any) => {
if (res.code === 200) {
const opts2: DictValueEnumObj = {};
res.data.map((item: any) => {
item['label'] = item.indexName;
item['value'] = item.id;
opts2['A' + item.id] = {
text: item.bcMeterDataTypeVo?.meterType,
label: item.bcMeterDataTypeVo?.meterType,
value: 'A' + item.id,
key: 'A' + item.id,
};
return opts2;
});
setTreeData1(opts2);
// let data = res.data.map((item: any) => {
// item['label'] = item.bcMeterDataTypeVo?.meterType;
// item['value'] = 'A'+item.id;
// return item;
// });
// setTreeData1(data);
// getlistFormula(val[val.length - 1]);
}
});
};
const getChanliang = () => {
let data = [
{ deptId: 'C' + 101, deptName: '经典薄片车间产量' },
{ deptId: 'C' + 102, deptName: '新型薄片车间产量' },
];
chanLiangList = data;
// chanLiangList = data?.map(res=>{
// res.deptId = 'C' + res.deptId
// return res
// });
// getDepartmentName().then((res: { code: number; data: any[]; }) => {
// if (res.code === 200) {
// console.log(res)
// chanLiangList = res.data?.map(res=>{
// res.deptId = 'C' + res.deptId
// return res
// });
// }
// })
};
useEffect(() => {
getChanliang();
form.resetFields();
setTreeData([]);
form.setFieldsValue({
deptId: props.values.deptId,
geo: props.values.geo,
domain: props.values.domain,
metric: props.values.metric,
deptName: props.values.deptName,
digitNum: props.values.digitNum,
generateType: props.values.generateType,
groupFlag: props.values.groupFlag,
indexCode: props.values.indexCode,
indexName: props.values.indexName,
indexType: props.values.indexType,
kpiDetailId: props.values.kpiDetailId,
kpiFlag: props.values.kpiFlag,
mediumId: props.values.mediumId,
meterItemId: props.values.meterItemId,
meteringUnitId: props.values.meteringUnitId,
indexNo: props.values.indexNo,
isEdit: props.values.isEdit,
formula1: props.values.operator,
meterItemIdBatch: props.values.meterItemIdBatch,
formulaBatch: props.values.formulaBatch,
operator: props.values.operator,
id: props.values.id,
formula: props.values.formula,
bcEnergyMediumVoProduct: props.values.bcEnergyMediumVoProduct,
bcMeteringUnit: props.values.bcMeteringUnit,
});
let operator = props.values?.operator;
console.log(operator, form.getFieldValue(), props.currentRow);
if (operator) {
operator = [operator];
operator.forEach((res: any) => {
console.log(res, [res]?.slice('+'));
if (res.indexOf('+') != -1) {
// operator = res.split('')
console.log(operator.join(''), '+');
operaIndexOf(operator, '+');
}
});
console.log(operator);
}
getDeptTree().then((res: any) => {
const exKeys = [];
exKeys.push('1');
// console.log(res);
res.forEach((item: any) => {
item['label'] = item.meterName;
item['value'] = item.id;
item['children'] = item.tbMeterInfoVoList || [];
childFun1(item);
});
setTreeData(res);
const opts: DictValueEnumObj = {};
res.forEach((item: any) => {
opts[item.id] = item;
});
setTreeDataString(opts);
setTreeDataString(_.cloneDeep(opts));
});
getlistFormula();
setRoleName([]);
setOperator([]);
// setMeterItemId([]);
setMeterItemIdFormula([]);
form.setFieldsValue({
// formula: '',
// formula1: '',
});
setRoleName([]);
setOperator([]);
setMeterItemIdFormula([]);
// console.log(props.values.operator.split());
setOperator2([]);
setMeterItemId([]);
setFormulaBatch([]);
setMeterItemIdBatch([]);
if (props.values.id) {
setMeterItemIdFormula(props.values.formula.split());
console.log(props.values.operator.split());
setOperator2(props.values.operator.split());
setMeterItemId(props.values.meterItemId.split());
setFormulaBatch(props.values.formulaBatch.split());
setMeterItemIdBatch(props.values.meterItemIdBatch.split());
console.log(props.values, 'props', props.values?.meterItemId, formula1List);
let zhibiao = props.values?.meterItemId?.split(/\s*(,)\s*/);
operatorList = props.values?.operator;
setFormula1List(props.values?.formula?.split(/\s*(\+|-|\*|\/)\s*/));
setMeterItemIdList(props.values?.meterItemId);
// meterItemIdList = props.values?.meterItemId;
// formula1List = props.values?.formula
return;
}
}, [form, props]);
const intl = useIntl();
const handleOk = () => {
form.submit();
};
const handleCancel = () => {
props.onCancel();
};
const handleFinish = async (values: Record<string, any>) => {
props.onSubmit({ ...values, menuIds } as RoleFormData);
};
const jiData = [
[
{ lable: '(', value: 18 },
{ lable: ')', value: 17 },
{ lable: 'AC', value: 16 },
{ lable: '/', value: 15 },
],
[
{ lable: '7', value: 7 },
{ lable: '8', value: 8 },
{ lable: '9', value: 9 },
{ lable: '*', value: 14 },
],
[
{ lable: '4', value: 4 },
{ lable: '5', value: 5 },
{ lable: '6', value: 6 },
{ lable: '-', value: 13 },
],
[
{ lable: '1', value: 1 },
{ lable: '2', value: 2 },
{ lable: '3', value: 3 },
{ lable: '+', value: 12 },
],
[
{ lable: '0', value: 0 },
{ lable: '.', value: 9 },
{ lable: '=', value: 10 },
],
];
// 数据类型
const getListAllType = (val: any) => {
getListAll(val[0]).then((res: any) => {
if (res.code === 200) {
const opts: DictValueEnumObj = {};
res.data.forEach((item: any) => {
item['label'] = item.meterType;
item['value'] = item.id;
opts[item.id] = {
text: item.meterType,
label: item.meterType,
value: item.id,
key: item.id,
meteringUnitId: item.meteringUnitId,
};
});
// console.log(opts);
setStatusTypeOptions(opts);
}
});
};
const dataString1 = (element: any, item: any) => {
console.log(item, element);
if (
item.tbMeterInfoVoList?.length > 0 &&
item.tbMeterInfoVoList &&
item.tbMeterInfoVoList != null
) {
let data = item.tbMeterInfoVoList.map((itemChild) => {
if (element === itemChild.id) {
console.log(item);
// text = itemChild.meterName;
return setTextData(itemChild.meterName);
}
return dataString1(element, itemChild);
});
}
};
const onChange = (val: any) => {
// console.log(val,treeDataString[val[0]]);
console.log(treeDataString, val);
if (!val) return;
let text = '';
val.forEach((element: any, index: any) => {
// console.log(element,index,treeDataString[val[index]])
if (val.length > 1) {
// let data = dataString(treeDataString[val[0]].tbMeterInfoVoList,element,val)
// console.log(data)
for (let item of treeDataString[val[0]].tbMeterInfoVoList) {
if (element === item.id) {
console.log(item);
text = item.meterName;
setTextData(text);
dataString1(val[val.length - 1], item);
}
}
}
});
getListAllType(val);
form.setFieldsValue({
deptId1: '',
});
getListJianZhi(val[val.length - 1]);
};
return (
<Modal
width={700}
title={'计算公式'}
forceRender
open={props.open}
destroyOnClose
onOk={() => {
let label = meterItemIdFormula ? meterItemIdFormula.join('') : '';
form.setFieldsValue({
formula: label,
});
// if (!label) {
// return;
// }
console.log(label);
let verifyState = null; // 验证状态
let str = label.replace(/ /g, ''); // 去掉空格
const english = new RegExp('[A-Za-z]+'); // 字母
// 判断字符串中是否存在加减乘除
// console.log(str.length);
for (let i = 0; i < str.length; i++) {
if (english.test(str[i])) {
// 找出汉字与字母并替换成 数字 1
str = str.replaceAll(str[i], 1);
// 判断字符串中是否存在加减乘除
if (!str.match(/\*|-|[/]|[+]/)) {
verifyState = false;
break;
}
}
}
// 如果公式错误会出现报错信息
try {
// 构造函数
// 执行字符串
let makeFun = new Function('return ' + str);
try {
makeFun();
verifyState = true;
// console.log('语法正确', makeFun());
handleOk();
} catch (error) {
verifyState = false;
// console.log('语法', makeFun());
message.warning('计算公式语法不正确');
}
} catch (errorInfo) {
verifyState = false;
// console.log('语法正确11');
message.warning('计算公式语法不正确');
}
return verifyState;
}}
onCancel={handleCancel}
>
<ProForm
form={form}
grid={true}
layout="horizontal"
submitter={false}
onFinish={(form) => {
form['operator'] = operator2.join('');
form['formula'] = meterItemIdFormula.join('');
console.log(meterItemId);
// console.log(props.values);
if (props.values.id) {
form['id'] = props.values.id;
}
form['bcEnergyMediumVoProduct'] = props.values.bcEnergyMediumVoProduct;
form['bcMeteringUnit'] = props.values.bcMeteringUnit;
form['deptId'] = props.values.deptId;
form['geo'] = props.values.geo;
form['domain'] = props.values.domain;
form['metric'] = props.values.metric;
form['deptName'] = props.values.deptName;
form['digitNum'] = props.values.digitNum;
form['generateType'] = props.values.generateType;
form['groupFlag'] = props.values.groupFlag;
form['indexCode'] = props.values.indexCode;
form['indexName'] = props.values.indexName;
form['indexType'] = props.values.indexType;
form['kpiDetailId'] = props.values.kpiDetailId;
form['kpiFlag'] = props.values.kpiFlag;
form['mediumId'] = props.values.mediumId;
form['meterItemId'] = meterItemId.join(',');
form['meteringUnitId'] = props.values.meteringUnitId;
form['indexNo'] = props.values.indexNo;
form['isEdit'] = props.values.isEdit;
// form['meterItemIdBatch'] =
// meterItemIdBatch.length > 0 ? meterItemIdBatch.join('') : props.values.meterItemIdBatch;
form['meterItemIdBatch'] = props.values?.meterItemIdBatch || '';
// form['formulaBatch'] =
// formulaBatch.length > 0 ? formulaBatch.join('') : props.values.formulaBatch;
form['formulaBatch'] = props.values.formulaBatch || '';
console.log(form);
handleFinish(form);
}}
>
<ProFormText
name="formula1"
label="公式"
colProps={{ md: 18, xl: 22 }}
disabled={true}
placeholder="请输入"
rules={[
{
required: true,
message: '请输入公式',
},
]}
/>
<span
onClick={() => {
form.setFieldsValue({
formula: '',
formula1: '',
});
setRoleName([]);
setOperator([]);
setMeterItemId([]);
setMeterItemIdFormula([]);
setOperator2([]);
}}
>
清除
</span>
<div style={{ width: '60%' }}>
<div style={{ display: 'flex' }}>
<span
style={{
display: 'inline-block',
width: '-webkit-fill-available',
marginTop: '10px',
marginLeft: '16px',
}}
>
表计:
</span>
<div className="form-item1">
<Cascader
allowClear
ref={cascaderCatergoryRef}
expand-trigger="hover"
changeOnSelect
options={treeData}
placeholder="请选择设备"
displayRender={displayRender}
onChange={onChange}
/>
</div>
<ProFormTreeSelect
name="deptId1"
// valueEnum={ }
colProps={{ md: 12, xl: 8 }}
placeholder="请选择数据项"
valueEnum={treeData1}
// valueEnum={treeData1}
onChange={(val: any, option: any) => {
// console.log(option, option.join(''));
setDisabled(false);
form.setFieldsValue({
operator: operator,
});
// console.log(operator2);
console.log(option, cascaderCatergoryRef, treeDataString, textData);
let textOption = option.map((res: string) => {
return textData + '.' + res;
});
let data = operator2.concat(textOption);
setOperator1(textOption);
}}
/>
<Button
disabled={disabled}
onClick={() => {
setRoleName([...roleName, form.getFieldsValue().deptId1]);
setMeterItemId([...meterItemId, form.getFieldsValue().deptId1]);
let data = operator2.concat(operator1);
console.log(data, operator2, operator1, form.getFieldsValue());
setOperator2(data);
setMeterItemIdFormula([...meterItemIdFormula, form.getFieldsValue().deptId1]);
let label = roleName ? roleName.join('') : '';
console.log(operator2, operator1);
// let data = operator2;
form.setFieldsValue({
formula1: data.join(''),
});
form.setFieldsValue({
formula: label
? label + form.getFieldsValue().deptId1
: form.getFieldsValue().deptId1,
});
setGongshi([...roleName, form.getFieldsValue().deptId1]);
//二期修改 赋值
operatorList = data.join('');
console.log(formula1List);
setFormula1List([...formula1List, form.getFieldsValue().deptId1]);
setMeterItemIdList([...meterItemId, form.getFieldsValue().deptId1]);
form.setFieldsValue({
deptId1: '',
deptId: '',
});
setDisabled(true);
setOperator([...operator, operator1 ? operator1 : '']);
}}
>
确认
</Button>
</div>
<div style={{ marginLeft: '16px', marginBottom: '20px' }}>
<p>产量：</p>
{chanLiangList.length > 0 &&
chanLiangList?.map((item) => (
// eslint-disable-next-line react/jsx-key
<Button
style={{ marginRight: '10px' }}
onClick={() => {
console.log(item);
setRoleName([...roleName, item.deptId]);
setMeterItemId([...meterItemId, item.deptId]);
let data = operator2.concat([item.deptName]);
console.log(data, operator2, operator1, item);
setOperator2(data);
setMeterItemIdFormula([...meterItemIdFormula, item.deptId]);
let label = roleName ? roleName.join('') : '';
console.log(operator2, operator1);
// let data = operator2;
form.setFieldsValue({
formula1: data.join(''),
});
form.setFieldsValue({
formula: label ? label + item.deptId : item.deptId,
});
setGongshi([...roleName, item.deptId]);
//二期修改 赋值
operatorList = data.join('');
// formula1List =[...formula1List, item.deptId]
// meterItemIdList = [...meterItemId, item.deptId]
console.log(formula1List);
setFormula1List([...formula1List, item.deptId]);
setMeterItemIdList([...meterItemId, item.deptId]);
form.setFieldsValue({
deptId: '',
deptId: '',
});
setDisabled(true);
setOperator([...operator, operator1 ? operator1 : '']);
}}
>
{item.deptName}
</Button>
))}
{/* <p>经典薄片车间产量</p>
<p>新型薄片车间产量</p> */}
</div>
<div className="form-item" style={{ display: 'flex' }}>
<ProFormTreeSelect
name="deptId2"
label="指标"
valueEnum={treeData2}
colProps={{ md: 12, xl: 20 }}
placeholder="请选择指标"
onChange={(val: any, option: any) => {
setDisabled1(false);
setOperator1(option);
form.setFieldsValue({
operator: operator,
operator2: operator,
});
}}
/>
<Button
disabled={disabled1}
onClick={() => {
setRoleName([...roleName, form.getFieldsValue().deptId2]);
setMeterItemId([...meterItemId, form.getFieldsValue().deptId2]);
setMeterItemIdFormula([...meterItemIdFormula, form.getFieldsValue().deptId2]);
let label = roleName ? roleName.join('') : '';
let data = operator2.concat(operator1);
// console.log(data, operator2, operator1, form.getFieldsValue());
setOperator2(data);
form.setFieldsValue({
formula: label
? label + form.getFieldsValue().deptId2
: form.getFieldsValue().deptId2,
});
form.setFieldsValue({
formula1: operator2.length > 0 ? data.join('') : data.join(''),
});
setGongshi([...roleName, form.getFieldsValue().deptId2]);
//二期修改 赋值
console.log(formula1List, form.getFieldsValue());
operatorList = operator2.length > 0 ? data.join('') : data.join('');
setFormula1List([...formula1List, form.getFieldsValue().deptId2]);
setMeterItemIdList([...meterItemId, form.getFieldsValue().deptId2]);
form.setFieldsValue({
deptId1: '',
deptId: '',
deptId2: '',
});
setDisabled1(true);
setOperator([...operator, operator1 ? operator1 : '']);
}}
>
确认
</Button>
</div>
</div>
<div style={{ width: '32%', marginLeft: '20px', textAlign: 'right' }}>
{jiData.map((item, index) => (
<div key={index}>
{item.map((list, index1) => (
<span
key={index1}
style={{
width: list.lable === '=' ? '100px' : '50px',
height: '50px',
background: '#fff',
lineHeight: '50px',
color: '#000',
display: 'inline-block',
textAlign: 'center',
fontSize: '18px',
border: '1px solid #999',
}}
onClick={() => {
console.log(formula1List);
if (list.lable === 'AC') {
// 二期修改
// 正则表达是去掉+-*/
let operator =
typeof operatorList === 'string'
? operatorList?.split(/\s*(\+|-|\*|\/)\s*/)
: operatorList;
let meterItemId =
typeof meterItemIdList === 'string'
? meterItemIdList?.split(/\s*(,)\s*/)
: meterItemIdList;
let Formula =
typeof formula1List === 'string'
? formula1List?.split(/\s*(\+|-|\*|\/)\s*/)
: formula1List;
// 过滤已删除
operator = operator.filter((l) => l != '');
Formula = Formula.filter((l) => l != '');
// 后往前删
let operatorArr = operator.splice(operator.length - 1, 1);
let FormulaArr = Formula.splice(Formula.length - 1, 1);
console.log(Formula, FormulaArr);
// 一期
form.setFieldsValue({
formula: operator.join(''),
formula1: operator.join(''),
});
// 删除赋值
operatorList = operator.filter((l) => l != '').join('');
setFormula1List(Formula.filter((l) => l != '').join(''));
console.log(Formula.join('').replace(/[(+|\-|*|/)]/g, ','));
let list = Formula.join('').replace(/[(+|\-|*|/)]/g, ',');
console.log(list.split());
setRoleName([]);
setOperator(operator);
setGongshi([]);
setMeterItemId(list.split());
setOperator2(operator);
setMeterItemIdFormula(Formula);
return;
}
let label = roleName ? roleName.join('') : '';
form.setFieldsValue({
formula: label ? label + list.lable : list.lable,
});
let data = operator2.concat([list.lable]);
setOperator2(data);
let label1 = operator2 ? operator2.join('') : '';
console.log(label1, list, operator, operator2);
form.setFieldsValue({
formula1: label1 ? label1 + list.lable : list.lable,
});
console.log(operator, 'operator');
setRoleName([...roleName, list.lable]);
// let meterItem = meterItemId ? meterItemId.join('') : '';
let MeterItemId = meterItemIdFormula.concat([list.lable]);
console.log(MeterItemId.join(''), MeterItemId);
setMeterItemIdFormula(MeterItemId);
setMeterItemIdFormula(_.cloneDeep(MeterItemId));
console.log(meterItemIdFormula);
setGongshi([...roleName, list.lable]);
setOperator([...operator, list.lable]); //回显
//二期修改 赋值
operatorList = data.join('');
setFormula1List([...formula1List, list.lable]);
setMeterItemIdList(meterItemId);
form.setFieldsValue({
operator: operator,
});
}}
>
{list.lable}
</span>
))}
</div>
))}
</div>
</ProForm>
</Modal>
);
};
export default RoleForm;