基础信息-历史趋势

src/pages/business_basic/components/second_datamodel_components/HistoryTrend.js

@@ -159,9 +159,8 @@ const HistoryTrend = () => {
             },
             legend: {
                 data: ['液位 (%)'],
-                right: 20,
+                left: 'center',
                 top: 10,
-                icon: 'circle',
                 textStyle: { color: '#4e5856' },
             },
             grid: { left: 40, right: 20, top: 50, bottom: 30 },
@@ -184,11 +183,11 @@ const HistoryTrend = () => {
                 {
                     name: '液位 (%)',
                     type: 'line',
-                    smooth: true,
                     symbol: 'circle',
-                    symbolSize: 8,
+                    symbolSize: 6,
-                    lineStyle: { width: 3 },
+                    lineStyle: { width: 1 },
-                    itemStyle: { color: '#2d9e9d' },
+                    itemStyle: { color: "#fff", borderColor: '#2d9e9d', borderWidth: 1 },
+                    lineStyle: { color: '#2d9e9d' },
                     areaStyle: { color: areaGradient },
                     data: liquidLevelSeries,
                 },
@@ -207,10 +206,12 @@ const HistoryTrend = () => {
                 axisPointer: { type: 'cross', link: [{ xAxisIndex: 'all' }] },
             },
             legend: {
-                data: ['温度 (℃)', '压力 (MPa)'],
+                data: [
-                right: 20,
+                    '温度 (℃)',
+                    '压力 (MPa)',
+                ],
+                left: 'center',
                 top: 10,
-                icon: 'circle',
                 textStyle: { color: '#4e5856' },
             },
             grid: { left: 50, right: 50, top: 50, bottom: 30 },
@@ -249,21 +250,21 @@ const HistoryTrend = () => {
                 {
                     name: '温度 (℃)',
                     type: 'line',
-                    smooth: true,
+                    // smooth: true,
                     symbol: 'circle',
-                    symbolSize: 7,
+                    symbolSize: 6,
-                    lineStyle: { width: 3, color: '#2a7b8d' },
+                    itemStyle: { color: '#fff', borderColor: "#2a7b8d", borderWidth: 1 },
-                    itemStyle: { color: '#2a7b8d' },
+                    lineStyle: { width: 2, color: '#2a7b8d' },
                     data: temperatureSeries,
                 },
                 {
                     name: '压力 (MPa)',
                     type: 'line',
-                    smooth: true,
+                    // smooth: true,
-                    symbol: 'diamond',
+                     symbol: 'circle',
-                    symbolSize: 7,
+                    symbolSize: 6,
-                    lineStyle: { width: 3, color: '#c2b453' },
+                    lineStyle: { width: 2, color: '#c2b453' },
-                    itemStyle: { color: '#c2b453' },
+                    itemStyle: { color: '#fff', borderColor: "#c2b453", borderWidth: 1 },
                     yAxisIndex: 1,
                     data: pressureSeries,
                 },

src/pages/business_basic/components/second_datamodel_components/HistoryTrend.less

@@ -12,18 +12,18 @@
         padding: 20px;
         display: flex;
         flex-direction: column;
-        box-shadow: 0 4px 20px rgba(21, 32, 66, 0.04);
+        box-shadow: 0 4px 20px rgba(21, 32, 66, 0.04)
     }
 
     .rightPanel {
         flex: 1;
-        background: #fff;
+        // background: #fff;
-        border-radius: 12px;
+        // border-radius: 12px;
-        padding: 15px 20px;
+        // padding: 15px 20px;
-        box-shadow: 0 4px 20px rgba(21, 32, 66, 0.04);
+        // box-shadow: 0 4px 20px rgba(21, 32, 66, 0.04);
         display: flex;
         flex-direction: column;
-        gap: 16px;
+        // gap: 16px;
     }
 
     .blockHeader {
@@ -142,11 +142,11 @@
     }
 
     .trendCard {
-        background: #fff;
+        // background: #fff;
-        border-radius: 10px;
+        // border-radius: 10px;
-        border: 1px solid #e0eeea;
+        // border: 1px solid #e0eeea;
         padding: 12px 12px 16px;
-        box-shadow: 0 6px 16px rgba(12, 49, 41, 0.06);
+        // box-shadow: 0 6px 16px rgba(12, 49, 41, 0.06);
         display: flex;
         flex-direction: column;
         gap: 12px;
@@ -164,6 +164,14 @@
         gap: 8px;
     }
 
+    .titleIcon {
+        width: 2px;
+        height: 16px;
+        border-radius: 2px;
+        background: rgba(0, 102, 101, 1);
+        display: inline-block;
+    }
+
     .rangeSelect {
         width: 120px;