状态查看

src/components/Statuschart/index.jsx

+import React, { useState, useMemo, useEffect } from 'react';
+import { Card, Form, Divider, Empty, Spin, Button } from 'antd';
+import ReactEcharts from 'echarts-for-react';
+import { useRequest, useAsyncEffect } from "ahooks";
+import { doFetch } from '@/utils/doFetch';
+import * as echarts from "echarts";
+import moment from 'moment';
+const Statuschart = ({ statusData = [], statusColorList = [], barStyle }) => {
+    const [datas, cdatas] = useState([]);
+    useEffect(() => {
+        cdatas([]);
+        statusData?.map((it, i) => {
+            let arrs = resetData(it.value, i, it.name);
+            cdatas(datas => [...datas, ...arrs]);
+        })
+    }, [statusData]);
+    function resetData(data, index, parentName) {
+        let reslist = data?.map((it, i) => {
+            let time = it.value[0],
+                endtime = it.value[1];
+            let typeItem = statusColorList.filter((item) => it.name == item.type)[0];
+            let baseTime = moment(time).valueOf(),
+                endTime = moment(endtime).valueOf(),
+                duration = moment(endtime).diff(moment(time), 'milliseconds');
+            return {
+                name: typeItem?.name,
+                value: [
+                    index,
+                    baseTime,
+                    endTime,
+                    duration
+                ],
+                itemStyle: {
+                    color: typeItem?.color
+                },
+                parentName: parentName
+            }
+        }) ?? [];
+        return reslist;
+    }
+    function renderItem(params, api) {
+        var categoryIndex = api.value(0);
+        var start = api.coord([api.value(1), categoryIndex]);
+        var end = api.coord([api.value(2), categoryIndex]);
+        var height = api.size([0, 1])[1] * 0.8;
+        var rectShape = echarts.graphic.clipRectByRect({
+            x: start[0],
+            y: start[1] - height / 2,
+            width: end[0] - start[0],
+            height: height
+        }, {
+            x: params.coordSys.x,
+            y: params.coordSys.y,
+            width: params.coordSys.width,
+            height: params.coordSys.height * 0.8
+        });
+        return rectShape && {
+            type: 'rect',
+            shape: rectShape,
+            style: api.style(),
+            transition: ['shape']
+        };
+    };
+    const options = useMemo(() => {
+        let xAxisoption = {
+            min: 'dataMin',
+            max: 'dataMax',
+            scale: true,
+            axisLine: {
+                show: false
+            },
+            axisTick: {
+                show: false
+            },
+            splitLine: {
+                show: false
+            },
+            axisLabel: {
+                formatter: (val) => {
+                    let item = moment(val).format("YYYY-MM-DD HH:mm:ss").split(" ")[1];
+                    return item;
+                },
+                // rotate: 25
+            }
+
+        }, yAxisoption = {
+            data: statusData?.map(it => it.name) ?? [],
+            axisLine: {
+                show: false
+            },
+            axisTick: {
+                show: false
+            },
+            splitLine: {
+                show: false
+            },
+            axisLabel: {
+                formatter: (params) => {
+                    let newParamsName = '';
+                    const paramsNameNumber = params.length;
+                    const provideNumber = 10;
+                    const rowNumber = Math.ceil(paramsNameNumber / provideNumber);
+                    if (paramsNameNumber > provideNumber) {
+                        for (let p = 0; p < rowNumber; p++) {
+                            let tempStr = '';
+                            const start = p * provideNumber;
+                            const end = start + provideNumber;
+                            if (p == rowNumber - 1) {
+                                tempStr = params.substring(start, paramsNameNumber);
+                            } else {
+                                tempStr = params.substring(start, end) + '\n';
+                            }
+                            newParamsName += tempStr;
+                        }
+                    } else {
+                        newParamsName = params;
+                    }
+                    return newParamsName;
+
+                },
+                // rotate:15
+            }
+        };
+        return {
+            grid: {
+                left: 10,
+                right: "2%",
+                bottom: 40,
+                containLabel: true
+            },
+            tooltip: {
+                formatter: function (params) {
+                    return `设备：${params?.data?.parentName}
+                            <br />
+                            设备状态：${params.name}
+                            <br />
+                            开始时间：${moment(params.value[1]).format("YYYY-MM-DD HH:mm:ss")}
+                            <br />
+                            结束时间：${moment(params.value[2]).format("YYYY-MM-DD HH:mm:ss")}
+                        `
+                }
+            },
+            dataZoom: [{
+                type: 'slider',
+                filterMode: 'weakFilter',
+                showDataShadow: true,
+                labelFormatter: '',
+                bottom: "1%"
+            },
+            {
+                type: 'inside',
+                filterMode: 'weakFilter'
+            }],
+            xAxis: xAxisoption,
+            yAxis: yAxisoption,
+            series: [{
+                type: 'custom',
+                renderItem: renderItem,
+                itemStyle: {
+                    opacity: 0.8
+                },
+                encode: {
+                    x: [1, 2],
+                    y: 0
+                },
+                data: datas
+            }]
+        }
+
+    }, [datas, statusData]);
+    return <div className='screenwh center'>
+        <ReactEcharts
+            style={{ height: "100%", width: "100%" }}
+            option={options}
+        />
+    </div>
+}
+export default Statuschart;
\ No newline at end of file

src/global.less

@@ -586,3 +586,8 @@ ol {
     }
   }
 }
+
+.screenwh {
+  width: 100%;
+  height: 100%;
+}
\ No newline at end of file

src/pages/lease/contract/index.jsx

@@ -532,6 +532,9 @@ function Contract(props) {
     }
   }, [activeTabKey, drawer?.val, drawer?.item?.id]);
 
+  const tabList = useMemo(() => {
+    return getcolumns();
+  }, [activeTabKey]);
   const pathconfig = useMemo(() => {
     let defpath = getcolumns(setdrawer).filter((it) => it.key == activeTabKey)[0]?.pathconfig ?? {};
     return defpath;
@@ -607,7 +610,7 @@ function Contract(props) {
             },
           },
         }}
-        tabList={getcolumns()}
+        tabList={tabList}
         activeTabKey={activeTabKey}
         onTabChange={(key) => {
           setactiveTabKey(key);

src/pages/lease/costanalysis/index.jsx

@@ -40,6 +40,9 @@ const Costanalysis = () => {
             render: (text, row, _, action) => rightExtra(text, row, _, action),
         });
     }, [activeKey]);
+    const tabList = useMemo(() => {
+        return getcolumns();
+    }, [activeKey]);
     const rightExtra = (text, row, _, action) => {
         return [
             activeKey == 'item-1' && <PremButton
@@ -208,7 +211,7 @@ const Costanalysis = () => {
                 setextraparams({})
             }}
             activeTabKey={activeKey}
-            tabList={getcolumns()}
+            tabList={tabList}
             pageextra={'export'}
             formRef={formRef}
             dataSourceFieldsChange={(vals) => {

src/pages/lease/leasedevice/index.jsx

@@ -92,7 +92,7 @@ const columnsa = [
             key: 'standbyRate',
             search: false,
             render: (_, row) => {
-                return <span style={{ color: "#00bce4" }}>{row.runRate}%</span>
+                return <span style={{ color: "#00bce4" }}>{row.standbyRate}%</span>
             }
         },
         {
@@ -101,7 +101,7 @@ const columnsa = [
             key: 'alarmRate',
             search: false,
             render: (_, row) => {
-                return <span style={{ color: "#fa4659" }}>{row.runRate}%</span>
+                return <span style={{ color: "#fa4659" }}>{row.alarmRate}%</span>
             }
         },
         {
@@ -110,7 +110,7 @@ const columnsa = [
             key: 'offRate',
             search: false,
             render: (_, row) => {
-                return <span style={{ color: "#6a737b" }}>{row.runRate}%</span>
+                return <span style={{ color: "#6a737b" }}>{row.offRate}%</span>
             }
         },
     ];