(*)首页图表数据接入

web/client/src/sections/shouye/components/charts/column.js

@@ -7,22 +7,22 @@ class ColumnChart extends Component {
         };
     }
     componentDidMount() {
-        const { xAxis, datas, domId } = this.props;
-        this.createCharts(xAxis, datas, domId);
+        const { xAxis, yAxis, domId } = this.props;
+        this.createCharts(xAxis, yAxis, domId);
     }
 
     componentWillReceiveProps(nextProps) {
-        let { xAxis, datas, domId } = nextProps;
-        if (JSON.stringify(xAxis) != JSON.stringify(this.props.xAxis) || JSON.stringify(datas) != JSON.stringify(this.props.datas)) {
-            this.createCharts(xAxis, datas, domId);
+        let { xAxis, yAxis, domId } = nextProps;
+        if (JSON.stringify(xAxis) != JSON.stringify(this.props.xAxis) || JSON.stringify(yAxis) != JSON.stringify(this.props.yAxis)) {
+            this.createCharts(xAxis, yAxis, domId);
         }
     }
 
-    createCharts = (xAxis, datas, domId) => {
+    createCharts = (xAxis, yAxis, domId) => {
         this.clearEchart();
         let chartDom = document.getElementById(domId);
         this.chart = echarts.init(chartDom);
-        let option = this.getOption(xAxis, datas);
+        let option = this.getOption(xAxis, yAxis);
         this.chart.setOption(option);
         this.onSize = () => {
             this.chart.resize();
@@ -39,8 +39,7 @@ class ColumnChart extends Component {
         }
     };
 
-    getOption = (xAxis, datas) => {
-        const { unit } = this.props
+    getOption = (xAxis, yAxis) => {
         let option = {
             title: {
                 text: '成本分析'
@@ -54,17 +53,18 @@ class ColumnChart extends Component {
             },
             xAxis: {
                 type: 'category',
-                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+                data: xAxis
             },
             yAxis: {
                 type: 'value',
-                name: '单位：万元',
+                name: '单位：元',
             },
             tooltip: {},
             series: [
                 {
-                    data: [120, 200, 150, 80, 70, 110, 130],
-                    type: 'bar'
+                    data: yAxis,
+                    type: 'bar',
+                    barMaxWidth: 30,//柱子最大宽度
                 }
             ]
         }

web/client/src/sections/shouye/components/charts/stackColumn.js

@@ -7,22 +7,23 @@ class StackColumn extends Component {
         };
     }
     componentDidMount() {
-        const { xAxis, datas, domId } = this.props;
-        this.createCharts(xAxis, datas, domId);
+        const { xAxis, yAxis1, yAxis2, domId } = this.props;
+        this.createCharts(xAxis, yAxis1, yAxis2, domId);
     }
 
     componentWillReceiveProps(nextProps) {
-        let { xAxis, datas, domId } = nextProps;
-        if (JSON.stringify(xAxis) != JSON.stringify(this.props.xAxis) || JSON.stringify(datas) != JSON.stringify(this.props.datas)) {
-            this.createCharts(xAxis, datas, domId);
+        let { xAxis, yAxis1, yAxis2, domId } = nextProps;
+        if (JSON.stringify(xAxis) != JSON.stringify(this.props.xAxis)
+            || JSON.stringify(yAxis1) != JSON.stringify(this.props.yAxis1) || JSON.stringify(yAxis2) != JSON.stringify(this.props.yAxis2)) {
+            this.createCharts(xAxis, yAxis1, yAxis2, domId);
         }
     }
 
-    createCharts = (xAxis, datas, domId) => {
+    createCharts = (xAxis, yAxis1, yAxis2, domId) => {
         this.clearEchart();
         let chartDom = document.getElementById(domId);
         this.chart = echarts.init(chartDom);
-        let option = this.getOption(xAxis, datas);
+        let option = this.getOption(xAxis, yAxis1, yAxis2);
         this.chart.setOption(option);
         this.onSize = () => {
             this.chart.resize();
@@ -39,15 +40,7 @@ class StackColumn extends Component {
         }
     };
 
-    getOption = (xAxis, datas) => {
-        let xAxisData = [];
-        let data1 = [];
-        let data2 = [];
-        for (let i = 0; i < 10; i++) {
-            xAxisData.push('Class' + i);
-            data1.push(+(Math.random() * 2).toFixed(2));
-            data2.push(+(Math.random() * 5).toFixed(2));
-        }
+    getOption = (xAxis, yAxis1, yAxis2) => {
         let emphasisStyle = {
             itemStyle: {
                 shadowBlur: 10,
@@ -64,7 +57,7 @@ class StackColumn extends Component {
             },
             tooltip: {},
             xAxis: {
-                data: xAxisData,
+                data: xAxis,
                 axisLine: { onZero: true },
                 splitLine: { show: false },
                 splitArea: { show: false }
@@ -84,14 +77,16 @@ class StackColumn extends Component {
                     type: 'bar',
                     stack: 'one',
                     emphasis: emphasisStyle,
-                    data: data1
+                    data: yAxis1,
+                    barMaxWidth: 30,//柱子最大宽度
                 },
                 {
                     name: '维修数',
                     type: 'bar',
                     stack: 'one',
                     emphasis: emphasisStyle,
-                    data: data2
+                    data: yAxis2,
+                    barMaxWidth: 30,//柱子最大宽度
                 }
             ]
         }

web/client/src/sections/shouye/components/charts/xColumn.js

@@ -42,7 +42,7 @@ class XColumn extends Component {
     getOption = (xAxis, yAxis) => {
         let option = {
             title: {
-                text: '故障点位分析'
+                text: '实时故障点位分析'
             },
             tooltip: {
                 trigger: 'axis',
@@ -69,7 +69,8 @@ class XColumn extends Component {
                 {
                     name: '异常数',
                     type: 'bar',
-                    data: xAxis
+                    data: xAxis,
+                    barMaxWidth: 30,//柱子最大宽度
                 }
             ]
         };

web/client/src/sections/shouye/containers/shouye.js

@@ -60,17 +60,45 @@ const Information = (props) => {
    console.log(xunjiandata,'xunjiandata')
 
    const calcChartData = (data) => {
-      let arr = []
+      let arr1 = [], arr2 = [], arr4 = []
       data.filter(d => d.alarm).forEach(l => {
-         let ext = arr.find(a => a.name === l.point.name);
-         if (ext) {
-            ext.value++;
+         let repairOk = l.patrolRecordIssueHandles.length && l.patrolRecordIssueHandles[0]?.state === 6;//验收通过
+         if(!repairOk){//没修||没修好
+            let ext1 = arr1.find(a => a.name === l.point.name);
+            if (ext1) {
+               ext1.value++;
+            } else {
+               arr1.push({ name: l.point.name, value: 1 })
+            }
+         } else {//修好了
+            let ext4 = arr4.find(a => a.name === l.point.name);
+            if (ext4) {
+               ext4.cost += parseFloat(l.patrolRecordIssueHandles[0]?.cost);
+            } else {
+               arr4.push({ name: l.point.name, cost: parseFloat(l.patrolRecordIssueHandles[0]?.cost) })
+            }
+         }
+
+         //右上
+         let ext2 = arr2.find(a => a.name === l.point.name);
+         if (ext2) {
+            ext2.num++;
+            if(repairOk){
+               ext2.repairNum += l.patrolRecordIssueHandles[0]?.yanshoucishu;
+            }
          } else {
-            arr.push({ name: l.point.name, value: 1 })
+            let repairNum = repairOk ? l.patrolRecordIssueHandles[0]?.yanshoucishu : 0;
+            arr2.push({ name: l.point.name, num: 1, repairNum })
          }
       })
-      arr.sort((a, b) => b.value - a.value)
-      setChartData1(arr.slice(0, 10));//展示前10名
+      arr1.sort((a, b) => b.value - a.value);
+      setChartData1(arr1.slice(0, 10));//前10名
+
+      arr2.sort((a, b) => (b.num + b.repairNum) - (a.num + a.repairNum));
+      setChartData2(arr2.slice(0, 10));//前10名
+
+      arr4.sort((a, b) => b.cost - a.cost);
+      setChartData4(arr4.slice(0, 10));//前10名
    }
 
    return (
@@ -120,17 +148,22 @@ const Information = (props) => {
                <div style={{ width: '45%' }}>
                   <StackColumn
                      domId={'column-chart-2'}
-                     height={clientHeight * 0.35} />
+                     height={clientHeight * 0.35}
+                     xAxis={chartData2.map(cd => cd.name)}
+                     yAxis1={chartData2.map(cd => cd.num)}
+                     yAxis2={chartData2.map(cd => cd.repairNum)} />
                </div>
             </div>
-            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+            <div style={{ display: 'flex', justifyContent: 'space-between', marginTop : 12 }}>
                <div style={{ width: '45%' }}>
                   <AlarmStatistics height={clientHeight * 0.25} />
                </div>
                <div style={{ width: '45%' }}>
                   <Column
                      domId={'column-chart-3'}
-                     height={clientHeight * 0.35} />
+                     height={clientHeight * 0.35}
+                     xAxis={chartData4.map(cd => cd.name)}
+                     yAxis={chartData4.map(cd => cd.cost)} />
                </div>
             </div>
          </Card>