diff --git a/src/components/BottomBar/Chart1.jsx b/src/components/BottomBar/Chart1.jsx deleted file mode 100644 index 6156e72..0000000 --- a/src/components/BottomBar/Chart1.jsx +++ /dev/null @@ -1,127 +0,0 @@ -import React, { useEffect, useState } from 'react'; -import { motion } from 'framer-motion'; - -//小时蒸汽产生量 -import Item from './substitutionCharts/Chart1.jsx'; - -//窑炉温度变化 -import Item2 from './substitutionCharts/Chart4.jsx'; - -// import ICon1 from '../../assets/Icon/ButtonChart1Icon1.png'; -// import ICon2 from '../../assets/Icon/ButtonChart1Icon2.png'; - -import './Chart1.less'; - -const Daytitle = '日发电量统计'; -const Dayxdata = [ - '1:00', - '2:00', - '3:00', - '4:00', - '5:00', - '6:00', - '7:00', - '8:00', - '9:00', - '10:00', - '11:00', - '12:00', - '13:00', - '14:00', - '15:00', - '16:00', - '17:00', - '18:00', - '19:00', - '20:00', - '21:00', - '22:00', - '23:00', - '24:00', -]; -const Daydata = [ - 70, - 45, - 10, - 28, - 18, - 28, - 46, - 70, - 45, - 10, - 28, - 18, - 28, - 46, - 70, - 45, - 10, - 28, - 18, - 28, - 46, - 22, - 25, - 26, -]; - -const Monthtitle = '月发电量统计'; -const Monthxdata = ['一月', '二月', '三月', '四月', '五月', '六月', '七月']; -const Monthdata = [170, 145, 110, 128, 118, 128, 146]; - -const Yeartitle = '年发电量统计'; -const Yearxdata = ['2016', '2017', '2018', '2019', '2020', '2021', '2022']; -const Yeardata = [870, 845, 810, 828, 818, 828, 846]; - -export default function Chart1() { - const [index, setIndex] = useState(1); - - useEffect(() => { - const timer = setInterval(() => { - SwitchIndex(); - }, 10000); - return () => clearInterval(timer); - }, []); - let num = 1; - - function SwitchIndex() { - num = num + 1; - if (num < 3) { - setIndex(num); - } else { - num = 1; - setIndex(num); - } - } - - //切换图表 - function SwitchChart(index) { - switch (index) { - case 1: - return ; - case 2: - return ; - default: - return ; - } - } - - return ( -
-
- {/* 图片读取失败 */} -
- {index == 1 ? '小时蒸汽产生量' : '窑炉温度变化'} -
-
- - {SwitchChart(index)} - -
- ); -} diff --git a/src/components/BottomBar/Chart1.less b/src/components/BottomBar/Chart1.less deleted file mode 100644 index 1cc34f6..0000000 --- a/src/components/BottomBar/Chart1.less +++ /dev/null @@ -1,38 +0,0 @@ -.ButtonChart1AllBorder { - width: 625px; - height: 306px; - background: url('../../assets/ItemBg.png'); - display: flex; - flex-direction: column; - justify-content: space-between; - - .ButtonChart1ItemitemBorder { - margin-top: 24px; - margin-left: 24px; - width: 202px; - height: 24px; - display: flex; - flex-direction: row; - justify-content: flex-start; - vertical-align: middle; - - .ButtonChart1ItemIcon { - width: 24px; - height: 24px; - margin-top: 2px; - } - .ButtonChart1ItemTitle { - font-size: 24px; - color: #ffffff; - margin-left: 8px; - margin-top: -5px; - } - } - .ButtonChart1ItemBorder { - width: 95%; - height: 227px; - margin-left: 16px; - margin-bottom: 16px; - - } -} diff --git a/src/components/BottomBar/Chart2.jsx b/src/components/BottomBar/Chart2.jsx deleted file mode 100644 index e51b110..0000000 --- a/src/components/BottomBar/Chart2.jsx +++ /dev/null @@ -1,23 +0,0 @@ -import { useEffect, useState } from 'react' - -import Item2 from './substitutionCharts/Chart2.jsx' -// import Icon from '../../assets/Icon/ButtonChart2Icon1.png' -// import GapLine from '../../assets/buttonChart2GapLine.png' -import './Chart2.less' - - -export default function Chart2() { - return ( -
-
- {/* 图片加载错误 */} -
AB线成品量
-
-
- -
- -
-
- ) -} diff --git a/src/components/BottomBar/Chart2.less b/src/components/BottomBar/Chart2.less deleted file mode 100644 index 57ac882..0000000 --- a/src/components/BottomBar/Chart2.less +++ /dev/null @@ -1,50 +0,0 @@ -.ButtonChart2AllBorder { - width: 625px; - height: 306px; - background: url('../../assets/ItemBg.png'); - display: flex; - flex-direction: column; - justify-content: space-between; - - .ButtonChart2ItemitemBorder { - margin-top: 24px; - margin-left: 24px; - width: 202px; - height: 24px; - display: flex; - flex-direction: row; - justify-content: flex-start; - vertical-align: middle; - - .ButtonChart2ItemIcon { - width: 24px; - height: 24px; - margin-top:2px; - } - - .ButtonChart2ItemTitle { - font-size: 24px; - color: #ffffff; - margin-left: 8px; - margin-top: -5px; - } - } - - .ButtonChart2ItemBorder { - width: 95%; - height: 227px; - margin-left: 16px; - margin-bottom: 16px; - display: flex; - flex-direction: row; - justify-content: space-around; - .ButtonChart2ItemGap {/* */ - float: left; - width: 1px; - height: 90%; - background:url('../../assets/Gap.png'); - border-width: 1.3px; - z-index: 20; - } - } -} diff --git a/src/components/BottomBar/Chart3.jsx b/src/components/BottomBar/Chart3.jsx deleted file mode 100644 index 3367f32..0000000 --- a/src/components/BottomBar/Chart3.jsx +++ /dev/null @@ -1,36 +0,0 @@ -import React from 'react' - -//导入图表 -import Item from './Form/Form.jsx' -import Item1 from './Form/Form1.jsx' - -// import Icon1 from '../../assets/Icon/ButtonChart3Icon1.png' -// import Icon2 from '../../assets/Icon/ButtonChart1Icon1.png' - -import './Chart3.less' - -export default function Chart3() { - return ( -
-
-
- {/* 图片加载错误 */} -
退火风机状况
-
-
- -
-
-
-
-
- {/* 图片加载错误 */} -
空压机运行时间
-
-
- -
-
-
- ) -} diff --git a/src/components/BottomBar/Chart3.less b/src/components/BottomBar/Chart3.less deleted file mode 100644 index 246b03a..0000000 --- a/src/components/BottomBar/Chart3.less +++ /dev/null @@ -1,56 +0,0 @@ -.ButtonChart3AllBorder { - width: 625px; - height: 306px; - background: url('../../assets/ItemBg.png'); - display: flex; - flex-direction: row; - justify-content: space-around; - - .ButtonChart3ItemBorder { - width: 48%; - height: 100%; - - .ButtonChart3ItemitemBorder { - margin-top: 24px; - margin-left: 24px; - width: 100%; - height: 24px; - display: flex; - flex-direction: row; - justify-content: flex-start; - vertical-align: middle; - - - .ButtonChart3ItemIcon { - width: 24px; - height: 24px; - margin-top:3px; - } - - .ButtonChart3ItemTitle { - font-size: 24px; - color: #ffffff; - margin-left: 8px; - margin-top: -5px; - } - } - - .ButtonChart3ItemDetail { - width: 92%; - height: 230px; - margin-left: 16px; - margin-bottom: 16px; - - } - } - .ButtonChart3ItemGap{ - float: left; - margin-top: 8%; - width: 1px; - height:75%; - background:url('../../assets/Gap.png'); - background-repeat: no-repeat; - border-width: 1.3px; - z-index:20; - } -} \ No newline at end of file diff --git a/src/components/BottomBar/Chart4.jsx b/src/components/BottomBar/Chart4.jsx deleted file mode 100644 index bcb2aef..0000000 --- a/src/components/BottomBar/Chart4.jsx +++ /dev/null @@ -1,68 +0,0 @@ -import React, { useEffect, useState } from 'react'; -import { motion } from 'framer-motion'; - -//火炉实时流量 -import Chart1 from './substitutionCharts/Chart3.jsx'; - -//空压机运行时间 -import Chart2 from './substitutionCharts/Chart4.jsx'; - -// import Icon1 from '../../assets/Icon/ButtonChart4Icon1.png'; -// import Icon2 from '../../assets/Icon/ButtonChart1Icon2.png'; - -import './Chart4.less'; - - -export default function Chart4() { - const [index, setIndex] = useState(1); - let num = 1; - useEffect(() => { - const timer = setInterval(() => { - SwitchIndex(); - }, 10000); - return () => clearInterval(timer); - }, []); - - function SwitchIndex() { - num = num + 1; - if (num < 3) { - setIndex(num); - } else { - num = 1; - setIndex(num); - } - } - - function SwitchData(index) { - switch (index) { - case 1: - return ; - case 2: - return ; - } - } - - return ( -
-
- {/* 图片加载错误 */} -
- {index == 1 ? '火炉实时流量' : '火炉实时温度'} -
-
- -
{SwitchData(index)}
- -
- ); -} diff --git a/src/components/BottomBar/Chart4.less b/src/components/BottomBar/Chart4.less deleted file mode 100644 index 6fabdfe..0000000 --- a/src/components/BottomBar/Chart4.less +++ /dev/null @@ -1,47 +0,0 @@ -.ButtonChart4AllBorder { - width: 528px; - height: 306px; - background: url('../../assets/ItemBg3.png'); - display: flex; - flex-direction: column; - justify-content: space-between; - - .ButtonChart4ItemitemBorder { - margin-top: 24px; - margin-left: 24px; - width: 100%; - height: 24px; - display: flex; - flex-direction: row; - justify-content: flex-start; - vertical-align: middle; - .ButtonChart4ItemIcon { - width: 24px; - height: 24px; - margin-top: 3px; - } - .ButtonChart4ItemTitle { - font-size: 24px; - color: #ffffff; - margin-left: 8px; - margin-top: -5px; - } - } - - .ButtonChart4ItemBorder { - width: 95%; - height: 227px; - margin-left: 16px; - margin-bottom: 16px; - background-repeat: round; - display: flex; - flex-direction: row; - justify-content: space-around; - - .ButtonChart4ItemBorder1 { - margin-top: 1%; - width: 98%; - height: 90%; - } - } -} diff --git a/src/components/BottomBar/FaultTotal/index.jsx b/src/components/BottomBar/FaultTotal/index.jsx index 35d03ea..983e13e 100644 --- a/src/components/BottomBar/FaultTotal/index.jsx +++ b/src/components/BottomBar/FaultTotal/index.jsx @@ -28,15 +28,6 @@ function FaultTotal(props) { color: '#DFF1FE', fontSize: 12, }, - // data: [ - // { name: '缺陷1', icon: 'roundRect' }, - // { name: '缺陷2', icon: 'roundRect' }, - // { name: '缺陷3', icon: 'roundRect' }, - // { name: '缺陷4', icon: 'roundRect' }, - // { name: '缺陷5', icon: 'roundRect' }, - // { name: '缺陷6', icon: 'roundRect' }, - // { name: '缺陷8', icon: 'roundRect' }, - // ], }, xAxis: { type: 'category', @@ -44,11 +35,6 @@ function FaultTotal(props) { .fill(1) .map((_, index) => { return '产线' + (index + 1); - // const today = new Date(); - // const dtimestamp = today - index * 24 * 60 * 60 * 1000; - // return `${new Date(dtimestamp).getMonth() + 1}.${new Date( - // dtimestamp, - // ).getDate()}`; }), axisLabel: { color: '#fff', @@ -147,54 +133,6 @@ function FaultTotal(props) { }, data: [620, 732, 701, 734, 1090, 1130, 1120], }, - // { - // data: Array(5) - // .fill(1) - // .map((_) => { - // return randomInt(1000, 10000); - // }), - // type: 'line', - // areaStyle: { - // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ - // { offset: 0, color: '#FFD16040' }, - // { offset: 0.5, color: '#FFD16020' }, - // { offset: 1, color: '#FFD16010' }, - // ]), - // }, - // // smooth: true, - // }, - // { - // data: Array(7) - // .fill(1) - // .map((_) => { - // return randomInt(60, 100); - // }), - // type: 'line', - // areaStyle: { - // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ - // { offset: 0, color: '#12FFF540' }, - // { offset: 0.5, color: '#12FFF520' }, - // { offset: 1, color: '#12FFF510' }, - // ]), - // }, - // // smooth: true, - // }, - // { - // data: Array(7) - // .fill(1) - // .map((_) => { - // return randomInt(60, 100); - // }), - // type: 'line', - // areaStyle: { - // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ - // { offset: 0, color: '#2760FF40' }, - // { offset: 0.5, color: '#2760FF20' }, - // { offset: 1, color: '#2760FF10' }, - // ]), - // }, - // // smooth: true, - // }, ], tooltip: { trigger: 'axis', @@ -203,7 +141,6 @@ function FaultTotal(props) { return ( - {/* 产线缺陷统计 堆叠图 颜色 上下legend 日周月年 */}
{/* 日周月年 */} o.name == name).value) return `${name} {sub|${ options.series[0].data.find((o) => o.name == name).value }}`; diff --git a/src/components/BottomBar/FaultType/index.module.css b/src/components/BottomBar/FaultType/index.module.css index c30d052..1f811e2 100644 --- a/src/components/BottomBar/FaultType/index.module.css +++ b/src/components/BottomBar/FaultType/index.module.css @@ -1,6 +1,5 @@ .chart { height: 100%; - /* background-color: #00ee33; */ } .faultType { @@ -9,12 +8,11 @@ .headWidget { position: absolute; - /* background: #00ee33; */ top: 20px; right: 24px; height: 32px; width: 340px; - text-align: right; + text-align: right; } .radioGroup * { diff --git a/src/components/BottomBar/Form/Form.jsx b/src/components/BottomBar/Form/Form.jsx deleted file mode 100644 index de7a453..0000000 --- a/src/components/BottomBar/Form/Form.jsx +++ /dev/null @@ -1,67 +0,0 @@ - -import React, { Component } from 'react'; - -import { ScrollBoard } from '@jiaminghi/data-view-react' - -import fault from '@/assets/status/fault.svg' -import maintenance from '@/assets/status/maintenance.svg' -import normal from '@/assets/status/normal.svg' -import './Form.less' -// 　
欢迎来到php中文网学习html技术，这里有全面的css教程
-// background-image: radial-gradient(circle, red, yellow, green);, color:#1723ff"，radial-gradient(circle, red, yellow, green) -const Style1 = `
Error 正常
` -const Style2 = `
Error 维修
` -const Style3 = `
Error 故障
` - -//rgba(201, 196, 191,0.5) - -let config = { - headerBGC: 'rgba(4, 36, 68,0.5)', - header: ['设备名称 ', '设备状态 '], - align: ['center'], - indexHeader: '序号 ', - index: true, - rowNum: 7, - columnWidth: [400, 400, 400], - headerHeight: 35, - oddRowBGC: "#042444", - evenRowBGC: "#042c4c", - data: [ - ['退火1', Style1], - ['退火2', Style2], - ['退火3', Style1], - ['退火4', Style2], - ['退火5', Style1], - ['退火6', Style3], - ['退火7', Style3], - ['退火8', Style1], - ['退火9', Style1], - ['退火10', Style3] - ] -} - - -function replaceStyle(STR) { - if (STR) { - return ` ${STR}` - } -} - - - -class Form extends Component { - - - render() { - return ( -
-
-
- -
- - ); - } -} - -export default Form; diff --git a/src/components/BottomBar/Form/Form.less b/src/components/BottomBar/Form/Form.less deleted file mode 100644 index 71663d9..0000000 --- a/src/components/BottomBar/Form/Form.less +++ /dev/null @@ -1,28 +0,0 @@ -.ButtonFormitemDetailBorder { - width: 98%; - height: 100%; - margin-top: 2%; - position: relative; - - .ButtonFormitemDetailBorderLine1 { - width: 1px; - height: 95%; - background-color:#041c2c; - float: left; - margin-left:28%; - z-index: 5; - position: absolute; - border-width: 1px; - } - .ButtonFormitemDetailBorderLine2 { - width: 1px; - height: 95%; - background-color:#041c2c; - float: left; - margin-left: 60%; - z-index: 10; - position: absolute; - border-width: 1px; - - } -} diff --git a/src/components/BottomBar/Form/Form1.jsx b/src/components/BottomBar/Form/Form1.jsx deleted file mode 100644 index 80ef2b2..0000000 --- a/src/components/BottomBar/Form/Form1.jsx +++ /dev/null @@ -1,62 +0,0 @@ -import React, { Component } from 'react'; - -import { ScrollBoard } from '@jiaminghi/data-view-react' - - -import './Form1.less' - -let config = { - headerBGC: 'rgba(4, 36, 68,0.5)', - header: ['设备名称 ', '运行时间 '], - index: true, - align: ['center'], - oddRowBGC: "#042444", - evenRowBGC: "#042c4c", - indexHeader: '序号 ', - rowNum: 5, - columnWidth: [300, 350, 300], - headerHeight: 35, - rowNum:7, - data: [ - ['#1空压', '2039'], - ['#2空压', '23212'], - ['#3空压', '2532'], - ['#4空压', '1252'], - ['#5空压', '1231'], - ['#6空压', '1231'], - ['#7空压', '3532'], - ['#8空压', '3567'], - ['#9空压', '3054'], - ['#10空压', '3564'], - ] -} - -// function (STR) { - -// if (STR) { -// return ` ${STR}` -// } - -// } - - - - -class Form extends Component { - - - - render() { - return ( - <> -
- - - -
- - ); - } -} - -export default Form; diff --git a/src/components/BottomBar/Form/Form1.less b/src/components/BottomBar/Form/Form1.less deleted file mode 100644 index a5ff42e..0000000 --- a/src/components/BottomBar/Form/Form1.less +++ /dev/null @@ -1,26 +0,0 @@ -.ButtonForm1itemDetailBorder { - width: 98%; - height: 100%; - margin-top: 2%; - position: relative; - - .RightFormitemDetailBorderLine1 { - width: 1px; - height: 100%; - background-color: #041c2c; - float: left; - margin-left: 28%; - z-index: 10; - position: absolute; - } - - .RightFormitemDetailBorderLine2 { - width: 1px; - height: 100%; - background-color: #041c2c; - float: left; - margin-left: 58%; - z-index: 10; - position: absolute; - } -} \ No newline at end of file diff --git a/src/components/BottomBar/gasi/index.jsx b/src/components/BottomBar/gasi/index.jsx index 2bbf6ab..079e5f1 100644 --- a/src/components/BottomBar/gasi/index.jsx +++ b/src/components/BottomBar/gasi/index.jsx @@ -118,24 +118,6 @@ function GasI(props) { ]), }, })), - // [ - // { - // data: Array(7) - // .fill(1) - // .map((_) => { - // return randomInt(60, 100); - // }), - // type: 'line', - // areaStyle: { - // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ - // { offset: 0, color: '#12FFF540' }, - // { offset: 0.5, color: '#12FFF520' }, - // { offset: 1, color: '#12FFF510' }, - // ]), - // }, - // // smooth: true, - // }, - // ], tooltip: { trigger: 'axis', }, diff --git a/src/components/BottomBar/gasii/gasChart/index.jsx b/src/components/BottomBar/gasii/gasChart/index.jsx index 6c30f3c..0ee2909 100644 --- a/src/components/BottomBar/gasii/gasChart/index.jsx +++ b/src/components/BottomBar/gasii/gasChart/index.jsx @@ -7,7 +7,6 @@ import { useContext } from 'react'; function GasChart(props) { const { dataSource } = props; const { hisState } = useContext(SocketContext); - console.log('his state', hisState); const dataName = dataSource == 'gas-i' ? 'kilnGasT1' : 'kilnGasT2'; diff --git a/src/components/BottomBar/gasii/gridList/index.jsx b/src/components/BottomBar/gasii/gridList/index.jsx index 22ee72b..2cbcccd 100644 --- a/src/components/BottomBar/gasii/gridList/index.jsx +++ b/src/components/BottomBar/gasii/gridList/index.jsx @@ -30,14 +30,6 @@ function getData(type) { } function GridList(props) { - // const [dataList, setDataList] = useState([]); - // setDataList(getData(props.dataSource)) - // useEffect(() => { - // // 这种写法有点问题。。。 - // console.log('data source change:', props.dataSource); - // setDataList(getData(props.dataSource)); - // }, props.dataSource); - const dataList = getData(props.dataSource); return ( diff --git a/src/components/BottomBar/gasii/index.module.css b/src/components/BottomBar/gasii/index.module.css index 993158c..63e0a05 100644 --- a/src/components/BottomBar/gasii/index.module.css +++ b/src/components/BottomBar/gasii/index.module.css @@ -1,6 +1,5 @@ .chart { height: 100%; - /* background-color: #00ee33; */ } .gas { @@ -24,7 +23,6 @@ .headWidget { position: absolute; - /* background: #00ee33; */ top: 22px; right: 24px; height: 32px; diff --git a/src/components/BottomBar/index.jsx b/src/components/BottomBar/index.jsx index 20e3fa7..8e150f0 100644 --- a/src/components/BottomBar/index.jsx +++ b/src/components/BottomBar/index.jsx @@ -1,10 +1,5 @@ import React from 'react'; import { useEffect, useState } from 'react'; -import { motion } from 'framer-motion'; -import Chart1 from './Chart1'; -import Chart2 from './Chart2'; -import Chart3 from './Chart3'; -import Chart4 from './Chart4'; import GasI from './gasi'; import GasII from './gasii'; @@ -16,21 +11,11 @@ import cls from './index.module.css'; export default function index() { return ( - <> - {false && ( -
- - - - -
- )} -
- - - - -
- +
+ + + + +
); } diff --git a/src/components/BottomBar/substitutionCharts/Chart1.jsx b/src/components/BottomBar/substitutionCharts/Chart1.jsx deleted file mode 100644 index dd821a7..0000000 --- a/src/components/BottomBar/substitutionCharts/Chart1.jsx +++ /dev/null @@ -1,207 +0,0 @@ - -import React, { Component } from 'react'; -import './Chart3.less' -import ReactECharts from 'echarts-for-react'; - -var colors = 'rgb(13, 119, 145)'; -var fontColor = '#fff' -var lineColor = 'rgba(33, 50, 89,0.8)' - - - -var datalist = [ - { - name: "天津之眼", - value: [25, 85], - symbolSize: 30, - opacity: 0.6, - }, - { - name: "天津之眼", - value: [100, 305], - symbolSize: 50, - opacity: 0.6, - }, - { - name: "天津之眼", - value: [200, 525], - symbolSize: 70, - opacity: 0.6, - }, - { - name: "天津之眼", - value: [255, 405], - symbolSize: 30, - opacity: 0.6, - }, - { - name: "天津之眼", - value: [500, 705], - symbolSize: 50, - opacity: 0.6, - }, - { - name: "天津之眼", - value: [400, 525], - symbolSize: 70, - opacity: 0.6, - }, - { - name: "天津之眼", - value: [255, 405], - symbolSize: 30, - opacity: 0.6, - }, - { - name: "天津之眼", - value: [700, 805], - symbolSize: 50, - opacity: 0.6, - }, - { - name: "天津之眼", - value: [300, 425], - symbolSize: 70, - opacity: 0.6, - }, - { - name: "天津之眼", - value: [365, 505], - symbolSize: 30, - opacity: 0.6, - }, - { - name: "天津之眼", - value: [600, 705], - symbolSize: 40, - opacity: 0.6, - }, - { - name: "天津之眼", - value: [400, 525], - symbolSize: 70, - opacity: 0.6, - }, - { - name: "天津之眼", - value: [800, 925], - symbolSize: 30, - opacity: 0.6, - }, - { - name: "天津之眼", - value: [900, 985], - symbolSize: 20, - opacity: 0.6, - }, - -]; -var datas = []; -for (var i = 0; i < datalist.length; i++) { - var item = datalist[i]; - const colorInex = i % colors.length; - - datas.push({ - ...item, - label: { - normal: { - textStyle: { - fontSize: 11, - }, - }, - }, - itemStyle: { - normal: { - color: colors, - opacity: item.opacity, - }, - }, - }); -} - - - -class Chart3 extends Component { - - getOption = () => ({ - grid: { - show: false, - right: 15, - left: 10, - top: 10, - bottom: 10, - containLabel: true - }, - xAxis: [ - { - gridIndex: 0, - type: "value", - // show: false, - min: 0, - max: 1000, - nameLocation: "middle", - nameGap: 5, - axisLabel: { - show: true, - color: fontColor, - }, - axisLine: { - lineStyle: { - color: lineColor, - }, - }, - splitLine: { - lineStyle: { - color: lineColor, - width: 0.5, - }, - }, - }, - ], - yAxis: [ - { - gridIndex: 0, - min: 0, - // show: false, - max: 1000, - nameLocation: "middle", - nameGap: 30, - axisLabel: { - show: true, - color: fontColor, - }, - axisLine: { - show: true, - lineStyle: { - color: lineColor, - }, - }, - splitLine: { - lineStyle: { - color: lineColor, - width: 0.5, - }, - }, - }, - - ], - series: [ - { - type: "scatter", - symbol: "circle", - symbolSize: 120, - data: datas, - }, - ], - }) - - render() { - return ( -
- -
- ); - } -} - -export default Chart3; diff --git a/src/components/BottomBar/substitutionCharts/Chart1.less b/src/components/BottomBar/substitutionCharts/Chart1.less deleted file mode 100644 index 52e140f..0000000 --- a/src/components/BottomBar/substitutionCharts/Chart1.less +++ /dev/null @@ -1,6 +0,0 @@ -.ButtonChart1itemDetailBorder { - width: 100%; - height: 100%; - - -} \ No newline at end of file diff --git a/src/components/BottomBar/substitutionCharts/Chart2.jsx b/src/components/BottomBar/substitutionCharts/Chart2.jsx deleted file mode 100644 index e3ce256..0000000 --- a/src/components/BottomBar/substitutionCharts/Chart2.jsx +++ /dev/null @@ -1,142 +0,0 @@ - -import React, { Component } from 'react'; -import './Chart2.less' -import ReactECharts from 'echarts-for-react'; - - - - - - -class Chart2 extends Component { - - - getOption = () => ({ - - title: [{ - text: `${this.props.data[0]}%`, - x: "center", - y: "32%", - textStyle: { - fontWeight: "normal", - color: "#5CB2FF", - fontSize: "34px", - }, - }, - { - text: "成品率", - x: "center", - y: "55%", - textStyle: { - fontWeight: "normal", - color: "rgba(255,255,255,0.7)", - fontSize: "18px", - }, - }, - ], - - color: ["rgba(176, 212, 251, 1)"], - - series: [ - { - name: "Line 1", - type: "pie", - clockWise: true, - radius: ["65%", "95%"], - itemStyle: { - normal: { - label: { - show: false, - }, - labelLine: { - show: false, - }, - }, - }, - hoverAnimation: false, - data: [ - { - value: this.props.data[0], - name: "01", - itemStyle: { - normal: { - borderWidth: 1, - shadowBlur: 7, - borderColor: "rgba(90,107,255,0.5)", - shadowColor: "rgba(92,183,255,0.9)", - color: { - // 完成的圆环的颜色 - colorStops: [ - { - offset: 0, - color: "rgba(90,107,255,1)", // 0% 处的颜色 - }, - { - offset: 1, - color: "rgba(92,183,255,0.5)", // 100% 处的颜色 - }, - ], - }, - label: { - show: false, - }, - labelLine: { - show: false, - }, - }, - }, - }, - { - name: "02", - value: 100 - this.props.data[0], - itemStyle: { - normal: { - color:"rgba(255,255,255,0.25)",//未完成圆环颜色 - borderWidth: 1, - shadowBlur: 7, - borderColor: "rgba(90,107,255,0.5)", - shadowColor: "rgba(92,183,255,0.9)", - label: { - show: false, - }, - labelLine: { - show: false, - }, - }, - }, - }, - ], - }, - ], - - }) - - render() { - return ( -
-
- -
-
-

{this.props.title}

-
-
-
-

订单总量：

-

{this.props.data[1]}

-
-
-

成品量：

-

{this.props.data[2]}

-
-
- - - -
-
- ); - } -} - -export default Chart2; diff --git a/src/components/BottomBar/substitutionCharts/Chart2.less b/src/components/BottomBar/substitutionCharts/Chart2.less deleted file mode 100644 index e3757e9..0000000 --- a/src/components/BottomBar/substitutionCharts/Chart2.less +++ /dev/null @@ -1,66 +0,0 @@ -.buttonChart2itemDetailBorder { - width: 215px; - height: 216px; - display: flex; - flex-direction: column; - justify-content: flex-start; - .buttonChart2itemEchart { - width: 160px; - height: 160px; - align-self: center; - - } - .buttonChart2itemTitle { - width: 88%; - height: 56px; - margin-left: 20px; - margin-top: 8px; - align-self: center; - display: flex; - flex-direction: row; - justify-content: flex-start; - - .buttonChart2itemTitle1 { - color: rgb(255, 255, 255); - font-size: 22px; - line-height: 24px; - font-style: normal; - margin-top: 10px; - white-space: nowrap; - } - - .buttonChart2itemTitleGAp { - width: 2px; - height: 80%; - margin-left: 15px; - background-color: #73808C; - } - - .buttonChart2itemTitleDetail { - width: 158px; - height: 44px; - display: flex; - flex-direction: column; - justify-content: flex-start; - - - .buttonChart2itemTitleDetailRow { - width: 100%; - height: 50%; - display: flex; - flex-direction: row; - justify-content: center; - - .buttonChart2itemTitle2 { - font-size: 15px; - color: rgba(255, 255, 255, 0.8); - } - - .buttonChart2itemTitle3 { - color: rgb(255, 255, 255); - font-size: 15px; - } - } - } - } -} \ No newline at end of file diff --git a/src/components/BottomBar/substitutionCharts/Chart3.jsx b/src/components/BottomBar/substitutionCharts/Chart3.jsx deleted file mode 100644 index d1240f6..0000000 --- a/src/components/BottomBar/substitutionCharts/Chart3.jsx +++ /dev/null @@ -1,124 +0,0 @@ - -import React, { Component } from 'react'; -import './Chart3.less' -import ReactECharts from 'echarts-for-react'; - -var data = [[800, 4302, 200, 3234, 800, 4302, 200, 3234, 800, 4302, 200, 3234, 800, 4302, 200, 3234], -[4450, 553, 2350, 234, 4450, 553, 2350, 234, 4450, 553, 2350, 234, 4450, 553, 2350, 234], -[2400, 305, 3500, 234, 2400, 305, 3500, 234, 2400, 305, 3500, 234, 2400, 305, 3500, 234], -[50, 3302, 480, 3334, 50, 3302, 480, 3334, 50, 3302, 480, 3334, 50, 3302, 480, 3334], - -] - -var name = ['10HZ-15HZ', '15HZ-25HZ', '30HZ-35HZ', '40HZ-45HZ'] - - -var color = ["#2760ff", "#ffb70c", "#3dbdc2", "#e02094"] -var fontColor = '#fff' -var lineColor = 'rgba(33, 50, 89,0.8)' - -function makeseries(data, name, color) { - if (data) { - let All = [] - for (let i in data) { - All.push({ - name: name[i], - type: 'line', - showSymbol: false, - symbol: "circle", - data: data[i], - lineStyle: { - width: 1, - color: color[i] - }, - itemStyle: { - - color: color[i], - - }, - }) - } - return All; - } -} - - - -class Chart3 extends Component { - - - getOption = () => ({ - legend: { - right: "0%", - width: "80%", - height: "14%", - itemWidth: 12, - itemHeight: 11, - textStyle: { - fontSize: 12, - color: "#F1F1F3", - }, - // itemStyle: { - // color: "rgba(222, 9, 9, 1)" - // }, - data: name - }, - grid: { - top: '15%', - left: '2%', - right: '4%', - bottom: '3%', - containLabel: true - }, - - xAxis: { - type: 'category', - boundaryGap: false, - data: ['day1', 'day2', 'day3', 'day4', 'day5', 'day6', 'day7', 'day5', 'day6', 'day7', 'day6', 'day7', 'day5', 'day6', 'day7'], - axisLabel: { - show: true, - color: fontColor, - }, - axisLine: { - lineStyle: { - color: lineColor, - }, - }, - splitLine: { - lineStyle: { - color: lineColor, - width: 0.5, - }, - }, - }, - yAxis: { - type: 'value', - axisLabel: { - show: true, - color: fontColor, - }, - axisLine: { - show: true, - lineStyle: { - color: lineColor, - }, - }, - splitLine: { - lineStyle: { - color: lineColor, - width: 0.5, - }, - }, - }, - series: makeseries(data, name, color) - }) - render() { - return ( -
- -
- ); - } -} - -export default Chart3; diff --git a/src/components/BottomBar/substitutionCharts/Chart3.less b/src/components/BottomBar/substitutionCharts/Chart3.less deleted file mode 100644 index 14e4ec3..0000000 --- a/src/components/BottomBar/substitutionCharts/Chart3.less +++ /dev/null @@ -1,6 +0,0 @@ -.ButtonChart3itemDetailBorder { - width: 100%; - height: 100%; - - -} \ No newline at end of file diff --git a/src/components/BottomBar/substitutionCharts/Chart4.jsx b/src/components/BottomBar/substitutionCharts/Chart4.jsx deleted file mode 100644 index 3221983..0000000 --- a/src/components/BottomBar/substitutionCharts/Chart4.jsx +++ /dev/null @@ -1,138 +0,0 @@ -import React, { Component } from 'react'; -import './Chart4.less'; -import ReactECharts from 'echarts-for-react'; - -var name = ['10HZ-15HZ', '15HZ-25HZ', '30HZ-35HZ', '40HZ-45HZ']; - -import * as echarts from 'echarts'; - -var color = ['#2760ff', '#ffb70c', '#3dbdc2', '#e02094']; -var fontColor = '#fff'; -var lineColor = 'rgba(33, 50, 89,0.8)'; - -class Chart3 extends Component { - getOption = () => ({ - legend: { - right: '0%', - width: '70%', - height: '14%', - itemWidth: 17, - itemHeight: 13.5, - textStyle: { - fontSize: 12, - color: '#F1F1F3', - }, - - data: name, - }, - grid: { - left: '3%', - right: '4%', - bottom: '5%', - top: '3%', - containLabel: true, - }, - - xAxis: { - type: 'category', - boundaryGap: false, - data: [ - 'day1', - 'day2', - 'day3', - 'day4', - 'day5', - 'day6', - 'day7', - 'day5', - 'day6', - 'day7', - 'day6', - 'day7', - 'day5', - 'day6', - 'day7', - ], - axisLabel: { - show: true, - color: fontColor, - }, - axisLine: { - lineStyle: { - color: lineColor, - }, - }, - }, - yAxis: { - type: 'value', - axisLabel: { - show: true, - color: fontColor, - }, - axisLine: { - show: true, - lineStyle: { - color: lineColor, - }, - }, - splitLine: { - lineStyle: { - color: lineColor, - }, - }, - }, - series: { - name: '发电量', - type: 'line', - showSymbol: true, - symbol: 'circle', - symbolSize: 8, - symbolBorder: 'rgba(17, 36, 246,0.1)', - data: [ - 200, - 320, - 121, - 125, - 585, - 213, - 521, - 326, - 542, - 258, - 632, - 145, - 258, - 632, - 145, - ], - lineStyle: { - width: 1, - color: 'rgba(246, 23, 106,0.9)', - }, - areaStyle: { - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ - { offset: 0, color: 'rgba(246, 23, 106,0.3)' }, - { offset: 0.5, color: 'rgba(246, 23, 106,0.2)' }, - { offset: 1, color: 'rgba(246, 23, 106,0.1)' }, - ]), - }, - itemStyle: { - borderColor: '#F6176A', - color: 'rgba(4, 20, 36,0.8)', - }, - }, - }); - - render() { - return ( -
- -
- ); - } -} - -export default Chart3; diff --git a/src/components/BottomBar/substitutionCharts/Chart4.less b/src/components/BottomBar/substitutionCharts/Chart4.less deleted file mode 100644 index 8ae72b3..0000000 --- a/src/components/BottomBar/substitutionCharts/Chart4.less +++ /dev/null @@ -1,9 +0,0 @@ -.ButtonChart4itemDetailBorder { - width: 100%; - height: 100%; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - margin-top: 15px; -} diff --git a/src/components/BottomBar/substitutionCharts/Chart6.jsx b/src/components/BottomBar/substitutionCharts/Chart6.jsx deleted file mode 100644 index 02847b7..0000000 --- a/src/components/BottomBar/substitutionCharts/Chart6.jsx +++ /dev/null @@ -1,183 +0,0 @@ - -import React, { Component } from 'react'; - -import ReactECharts from 'echarts-for-react'; - - - -import './Chart2.less' - -class Chart2 extends Component { - - getOption = () => ({ - grid: { - left: "5%", - right: "2%", - top: "2%", - bottom: "5%", - containLabel: true, - }, - - legend: { - - itemWidth: 14, - itemHeight: 5, - itemGap: 13, - data: ["窑炉1", "窑炉2", "窑炉3"], - top:'5%', - right: "4%", - textStyle: { - fontSize: 12, - color: "#F1F1F3", - }, - }, - grid: { - left: "3%", - right: "4%", - bottom: "3%", - containLabel: true, - }, - xAxis: [ - { - type: "category", - boundaryGap: false, - axisLine: { - lineStyle: { - color: "#57617B", - }, - }, - data: [ - "00:00", - "01:05", - "02:10", - "03:15", - "04:20", - "05:25", - "06:30", - "07:35", - "08:40", - "09:45", - "10:45", - "11:45", - "12:45", - - "13:00", - "14:05", - "15:10", - "16:15", - "17:20", - "18:25", - "19:30", - "20:35", - "21:40", - "22:45", - "23:50", - "24:55", - ], - }, - - ], - yAxis: [ - { - type: "value", - name: "单位（%)", - - axisTick: { - show: false, - }, - axisLine: { - lineStyle: { - color: "#57617B", - }, - }, - axisLabel: { - margin: 10, - textStyle: { - fontSize: 14, - }, - }, - splitLine: { - lineStyle: { - color: "#57617B", - }, - }, - }, - ], - series: [ - { - name: "窑炉1", - type: "line", - smooth: false, - symbol: "circle", - symbolSize: 6, - showSymbol: true, - lineStyle: { - color: "rgba(116, 172, 100,0.8)", - width:3, - }, - itemStyle: { - borderWidth: 3, - borderColor: 'rgba(116, 172, 100,0.8)', - color:'rgba(4, 28, 52,1)', - - }, - data: this.props.data[0], - }, - { - name: "窑炉2", - type: "line", - smooth: false, - symbol: "circle", - symbolSize: 6, - showSymbol: true, - - lineStyle: { - color: "rgba(164, 132, 44,1)", - width:3, - }, - itemStyle: { - borderWidth: 3, - borderColor: 'rgba(164, 132, 44,1)', - color:'rgba(4, 28, 52,1)', - - }, - - - data: this.props.data[1], - }, - { - name: "窑炉3", - type: "line", - smooth: false, - symbol: "circle", - symbolSize:6, - showSymbol: true, - - lineStyle: { - color: "rgba(52, 156, 172,1)", - width:3, - }, - itemStyle: { - borderWidth: 3, - borderColor: 'rgba(52, 156, 172,1)', - color:'rgba(4, 28, 52,1)', - - }, - - - - data: this.props.data[2], - }, - ], - }) - - render() { - return ( -
- -
- ); - } -} - -export default Chart2; diff --git a/src/components/BottomBar/substitutionCharts/Chart6.less b/src/components/BottomBar/substitutionCharts/Chart6.less deleted file mode 100644 index 5b722cf..0000000 --- a/src/components/BottomBar/substitutionCharts/Chart6.less +++ /dev/null @@ -1,6 +0,0 @@ -.ButtonChart2itemDetailBorder { - width: 100%; - height: 100%; - - -} \ No newline at end of file diff --git a/src/components/BottomBar/substitutionCharts/Chart7.jsx b/src/components/BottomBar/substitutionCharts/Chart7.jsx deleted file mode 100644 index 44a524d..0000000 --- a/src/components/BottomBar/substitutionCharts/Chart7.jsx +++ /dev/null @@ -1,38 +0,0 @@ - -import React, { Component } from 'react'; - -import './Chart7.less' - -export default class Chart7 extends Component { - - parseData() { - const { data } = this.props - const name = Object.keys(data) - const Value = Object.values(data) - return name.map((item, index) => ( - -
- -
-

{name[index]}:

-
-
-

{Value[index]}

-
-
- - )) - } - - render() { - return ( -
- {this.parseData()} -
- ); - } -} - - - - diff --git a/src/components/BottomBar/substitutionCharts/Chart7.less b/src/components/BottomBar/substitutionCharts/Chart7.less deleted file mode 100644 index d98e54f..0000000 --- a/src/components/BottomBar/substitutionCharts/Chart7.less +++ /dev/null @@ -1,44 +0,0 @@ -.ButtonChart7itemDetailBorder { - width: 100%; - height: 100%; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - margin-top:-8px; - - .buttonChart7FormBorder { - background: url(../../assets/ButtonChart7ItemBg.png); - margin-top: 1.5%; - width: 288px; - height: 48px; - border-radius: 3px; - display: flex; - flex-direction: row; - justify-content: left; - .buttonChart7FormTxt2Border { - width: 30%; - height: 100%; - .buttonChart7FormTxt2 { - margin-left: 20%; - margin-right: 5%; - margin-top: 13px; - text-align:left; - font-size: 15px; - color: rgba(255, 255, 255, 1); - } - } - .buttonChart7FormTxt1Border { - width: 55%; - height: 100%; - - .buttonChart7FormTxt1 { - margin-top: 13px; - margin-left: 3%; - text-align:right; - font-size: 15px; - color: rgba(255, 255, 255, 1); - } - } - } -} diff --git a/src/components/LeftBar/Kiln.jsx b/src/components/LeftBar/Kiln.jsx index aa5d7ca..1b2f708 100644 --- a/src/components/LeftBar/Kiln.jsx +++ b/src/components/LeftBar/Kiln.jsx @@ -6,18 +6,6 @@ import cls from './kiln.module.less'; export default function Kiln() { const ctx = useContext(SocketContext); - console.log('use ctx', ctx); - - // const [infos, setInfos] = useState([ - // { label: '窑炉压力', value: '29KPa' }, - // { label: '循环水温度', value: '59℃' }, - // { label: '循环水流量', value: '59㎡/h' }, - // { label: '循环水压力', value: '34KPa' }, - // { label: '窑温', value: '59℃' }, - // { label: '压缩器压力', value: '293Pa' }, - // { label: '水分', value: '12%' }, - // { label: '助燃风', value: '122' }, - // ]); const infos = [ { label: '窑炉压力', value: ctx.runState?.kilnPressure || '0Pa' }, diff --git a/src/components/LeftBar/index.jsx b/src/components/LeftBar/index.jsx index 1a86aa1..17d3422 100644 --- a/src/components/LeftBar/index.jsx +++ b/src/components/LeftBar/index.jsx @@ -1,17 +1,14 @@ -import React from 'react' +import React from 'react'; +import Kiln from './Kiln'; +import GoodProduction from './GoodProduction'; - -import Kiln from './Kiln' -// import Chart2 from './Chart2' -import GoodProduction from './GoodProduction' - -import cls from './index.module.less' +import cls from './index.module.less'; export default function index() { - return ( -
- - -
- ) + return ( +
+ + +
+ ); } diff --git a/src/components/LeftBar/kiln.module.less b/src/components/LeftBar/kiln.module.less index c5894e6..ef3c423 100644 --- a/src/components/LeftBar/kiln.module.less +++ b/src/components/LeftBar/kiln.module.less @@ -26,59 +26,4 @@ user-select: none; } } - - // .LeftChart1ItemitemBorder { - // margin-top: 24px; - // margin-left: 24px; - // width: 202px; - // height: 24px; - // display: flex; - // flex-direction: row; - // justify-content: flex-start; - // vertical-align: middle; - - // .LeftChart1ItemIcon { - // width: 24px; - // height: 24px; - // margin-top: 2px; - // } - - // .LeftChart1ItemTitle { - // font-size: 24px; - // color: #ffffff; - // font-weight: 900px; - // margin-left: 8px; - // margin-top: -5px; - // font-family: 'pingFangSC-Medium'; - // } - // } - - // .LeftChart1ItemBorder { - // width: 95%; - // height: 227px; - // margin-left: 16px; - // margin-bottom: 16px; - // display: flex; - // flex-direction: row; - // justify-content: space-between; - // .LeftChart1ItemRow { - // width: 288px; - // height: 100%; - // display: flex; - // flex-direction: column; - // justify-content: flex-start; - // .LeftChart1ItemRowDetail { - // width: 100%; - // height: 32px; - // display: flex; - // flex-direction: row; - // .LeftChart1ItemRowDetailTxt { - // font-size: 22px; - // font-weight: 400px; - // color: #ffffff; - // margin-left: 8px; - // } - // } - // } - // } } diff --git a/src/components/LeftBar/substitutionCharts/GoodRateChart/index.module.less b/src/components/LeftBar/substitutionCharts/GoodRateChart/index.module.less index c3003b1..7741f68 100644 --- a/src/components/LeftBar/substitutionCharts/GoodRateChart/index.module.less +++ b/src/components/LeftBar/substitutionCharts/GoodRateChart/index.module.less @@ -2,7 +2,7 @@ height: 1px; flex: 1; padding-top: 8px; - background: #ae27276a; + // background: #ae27276a; .titleBar { display: flex; @@ -71,8 +71,6 @@ } .radioGroup { - // border: 2px solid red; - * { border: none !important; border-radius: 0 !important; diff --git a/src/components/LeftBar/substitutionCharts/GoodRateChart/overwrite.css b/src/components/LeftBar/substitutionCharts/GoodRateChart/overwrite.css index 456a6d2..ff1e4b8 100644 --- a/src/components/LeftBar/substitutionCharts/GoodRateChart/overwrite.css +++ b/src/components/LeftBar/substitutionCharts/GoodRateChart/overwrite.css @@ -21,7 +21,7 @@ background: #004782 !important; } .ant-switch .ant-switch-handle::before { - background-color: #00233f !important; + background-color: #00233f !important; } .ant-switch-checked { background: #b4fffdb1 !important; @@ -32,21 +32,3 @@ .ant-switch-checked .ant-switch-handle::before { background-color: #76fff9 !important; } -/* -.radioGroup * { - border: none !important; - border-radius: 0 !important; -} - -.radioGroup *:focus-within { - box-shadow: none !important; -} - -.radioGroup *::before { - width: 0 !important; -} - -.radioGroup_button_wrapper { - color: #fff !important; - background: #03233c !important; -} */ diff --git a/src/components/RadioGroup.jsx b/src/components/RadioGroup.jsx deleted file mode 100644 index 7128645..0000000 --- a/src/components/RadioGroup.jsx +++ /dev/null @@ -1,5 +0,0 @@ -import cls from './radio.group.module.less'; - -function RadioGroup(props) { - return
; -} diff --git a/src/components/RightBar/index.jsx b/src/components/RightBar/index.jsx index 9fda564..8105e89 100644 --- a/src/components/RightBar/index.jsx +++ b/src/components/RightBar/index.jsx @@ -1,14 +1,6 @@ import React from 'react'; - -// import Chart1 from './Chart1'; -// import Chart2 from './Chart2'; -// import Chart3 from './Chart3'; -// import RightChart2 from './Chart2' import SmokeHandle from './SmokeHandle'; import EnergyCost from './EnergyCost'; -//引用原来的公共工程 -// import RightChart2 from './Chart2' -// import RightChart3 from './Chart3' import cls from './index.module.less'; @@ -17,10 +9,6 @@ export default function index() {
- - {/* - - */}
); } diff --git a/src/components/RightBar/index.module.less b/src/components/RightBar/index.module.less index c23689d..6854f5b 100644 --- a/src/components/RightBar/index.module.less +++ b/src/components/RightBar/index.module.less @@ -1,10 +1,5 @@ .rightBar { - // background: #f00; - > div { - // height: 1px; - // flex: 1; - &:first-child { margin-bottom: 24px; } diff --git a/src/components/radio.group.module.less b/src/components/radio.group.module.less deleted file mode 100644 index e69de29..0000000