首页优化

tzipc-ui/src/views/ipc/bigscreen/index.vue

@@ -175,8 +175,8 @@
                 ></div>
                 <div
                   style="font-family: 'BiaoTi';"
-                  @click="handleViewTendency(queryParams[0], titleMap[queryParams[0]], 'oip', '进油压力', 'Bar')"
-                >进油压力</div>
+                  @click="handleViewTendency(queryParams[0], titleMap[queryParams[0]], 'oip', '抽油泵压力', 'Bar')"
+                >抽油泵压力</div>
               </div>
               <div class="bottom-grid-item">
                 <div
@@ -185,13 +185,13 @@
                 >
                   <div
                     class="extra-bar-item"
-                    :style="`height: ${parseInt(l1 * 100)}%;background-color:#6581f0;`"
+                    :style="`height: ${parseInt(l1 )}%;background-color:#6581f0;`"
                   ></div>
                   <div
                     class="extra-bar-text"
-                    :style="`height: calc(100% - ${parseInt(l1 * 100)}%);`"
+                    :style="`height: calc(100% - ${parseInt(l1)}%);`"
                   >
-                    {{ parseInt(l1 * 100) }}
+                    {{ parseInt(l1 ) }}
                   </div>
                 </div>
                 <div
@@ -270,13 +270,13 @@
                 >
                   <div
                     class="extra-bar-item"
-                    :style="`height: ${parseInt(r2 * 100)}%;background-color:#6581f0;`"
+                    :style="`height: ${parseInt(r2)}%;background-color:#6581f0;`"
                   ></div>
                   <div
                     class="extra-bar-text"
-                    :style="`height: calc(100% - ${parseInt(r2 * 100)}%);`"
+                    :style="`height: calc(100% - ${parseInt(r2)}%);`"
                   >
-                    {{ parseInt(r2 * 100) }}
+                    {{ parseInt(r2) }}
                   </div>
                 </div>
                 <div
@@ -291,8 +291,8 @@
                 ></div>
                 <div
                   style="font-family: 'BiaoTi';"
-                  @click="handleViewTendency(queryParams[1], titleMap[queryParams[1]], 'oip', '进油压力', 'Bar')"
-                >进油压力</div>
+                  @click="handleViewTendency(queryParams[1], titleMap[queryParams[1]], 'oip', '抽油泵压力', 'Bar')"
+                >抽油泵压力</div>
               </div>
               <div class="bottom-grid-item">
                 <div
@@ -814,7 +814,7 @@ export default {
           xAxis: {
             data: xAxis,
           },
-          yAxis: { name: "单位: ㎛" },
+          yAxis: { name: "单位: m/s²" },
           tooltip: {
             trigger: "axis",
             axisPointer: {
@@ -886,7 +886,7 @@ export default {
           xAxis: {
             data: xAxis,
           },
-          yAxis: { name: "单位: ㎛" },
+          yAxis: { name: "单位: m/s²" },
           tooltip: {
             trigger: "axis",
             axisPointer: {
@@ -1060,8 +1060,8 @@ export default {
           color: ["0ec6c4", "0ec6c4"],
           bgColor: "aef1f5",
           name: "",
-          value: parseInt(owc * 100),
-          limit: 100,
+          value: owc,
+          limit: 20,
           unit: "%",
         }),
         true,
@@ -1078,8 +1078,8 @@ export default {
           color: ["1860b1", "1860b1"],
           bgColor: "c2d6ec",
           name: "",
-          value: parseInt(ov * 100),
-          limit: 100,
+          value: ov,
+          limit: 800,
           unit: "CP",
         }),
         true,
@@ -1092,12 +1092,11 @@ export default {
     initBottomL3(oip = 0) {
       const chartIns = echarts.init(document.getElementById("bottomL3"));
       chartIns.setOption(
-        this.generateGaugeOption({
+        this.generateGaugeOption2({
           color: ["f3c128", "f3c128"],
           bgColor: "f0eace",
           name: "",
-          value: parseInt(oip * 100),
-          limit: 100,
+          value: oip,
           unit: "Bar",
         }),
         true,
@@ -1110,12 +1109,11 @@ export default {
     initBottomR1(oip = 0) {
       const chartIns = echarts.init(document.getElementById("bottomR1"));
       chartIns.setOption(
-        this.generateGaugeOption({
+        this.generateGaugeOption2({
           color: ["f3c128", "f3c128"],
           bgColor: "f0eace",
           name: "",
-          value: parseInt(oip * 100),
-          limit: 100,
+          value: oip ,
           unit: "Bar",
         }),
         true,
@@ -1132,8 +1130,8 @@ export default {
           color: ["1860b1", "1860b1"],
           bgColor: "c2d6ec",
           name: "",
-          value: parseInt(ov * 100),
-          limit: 100,
+          value: ov,
+          limit: 800,
           unit: "CP",
         }),
         true,
@@ -1150,8 +1148,8 @@ export default {
           color: ["0ec6c4", "0ec6c4"],
           bgColor: "aef1f5",
           name: "",
-          value: parseInt(owc * 100),
-          limit: 100,
+          value: owc,
+          limit: 20,
           unit: "%",
         }),
         true,
@@ -1276,6 +1274,121 @@ export default {
         }
       );
     },
+    generateGaugeOption2(
+      option = {
+        color: ["0DDF7A"],
+        bgColor: "fff",
+        name: "",
+        value: 0,
+        limit: 1,
+      }
+    ) {
+      return merge(
+        {
+          series: [
+            {
+              type: "gauge",
+              center: ["50%", "60%"],
+              startAngle: 220,
+              endAngle: -40,
+              min: -1,
+              max: 1,
+              splitNumber: 12,
+              progress: {
+                show: true,
+                width: 20,
+                itemStyle: {
+                  color: {
+                    type: "linear",
+                    x: 0.8,
+                    y: 0,
+                    x2: 0,
+                    y2: 1,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "#" + option.color[1], // 0% 处的颜色
+                      },
+                      {
+                        offset: 1,
+                        color: "#" + option.color[0], // 100% 处的颜色
+                      },
+                    ],
+
+                    global: false,
+                  },
+                },
+              },
+              pointer: {
+                show: false,
+              },
+              axisLine: {
+                lineStyle: {
+                  width: 20,
+                  color: [[1, "#" + option.bgColor]],
+                },
+              },
+              axisTick: {
+                distance: -30,
+                splitNumber: 3,
+                lineStyle: {
+                  width: 1,
+                  color: "#" + option.color[0],
+                },
+              },
+              splitLine: {
+                distance: -40,
+                length: 10,
+                lineStyle: {
+                  width: 2,
+                  color: "#" + option.color[0],
+                },
+              },
+              axisLabel: {
+                show: false,
+              },
+              anchor: {
+                show: false,
+              },
+              title: {
+                show: false,
+                fontSize: 16,
+                color: "#" + option.color[0],
+                offsetCenter: [0, "100%"],
+              },
+              detail: {
+                valueAnimation: true,
+                width: "60%",
+                offsetCenter: [0, 0],
+                formatter: "{back| {value} }\n{unit|" + option.unit + "}",
+                rich: {
+                  back: {
+                    fontSize: 20,
+                    fontWeight: 700,
+                    color: "#" + option.color[0],
+                  },
+                  unit: {
+                    fontSize: 12,
+                    fontWeight: 400,
+                    color: "#" + option.color[0],
+                  },
+                },
+              },
+              data: [
+                {
+                  value: option.value,
+                  name: option.name,
+                },
+              ],
+            },
+          ],
+        },
+        {},
+        (objVal, srcVal) => {
+          if (isArray(objVal)) return srcVal;
+        }
+      );
+    },
     generateOptions(option = {}) {
       return merge(
         {

tzipc-ui/src/views/ipc/dataLog/plcDataLog.vue

@@ -176,7 +176,7 @@
         show-overflow-tooltip
       />
       <el-table-column
-        label="进油压力"
+        label="抽油泵压力"
         align="center"
         key="oip"
         prop="oip"
@@ -199,7 +199,7 @@
     />
   </div>
 </template>
-  
+
   <script>
 import { getPlcDataLog } from "@/api/ipc/dataLog";
 import { getFields } from "@/api/ipc/monitorFields";
@@ -483,4 +483,4 @@ export default {
   align-items: center;
   cursor: pointer;
 }
-</style>
+</style>

tzipc-ui/src/views/ipc/dataLog/sensorDataLog.vue

@@ -165,7 +165,7 @@
     </el-dialog>
   </div>
 </template>
-    
+
 <script>
 import { getSensorDataLog } from "@/api/ipc/dataLog";
 import { getFields } from "@/api/ipc/monitorFields";
@@ -451,7 +451,7 @@ export default {
             xAxis: {
               data: xAxis,
             },
-            yAxis: { name: "单位: ㎛" },
+            yAxis: { name: "单位: m/s²" },
             tooltip: {
               trigger: "axis",
               axisPointer: {
@@ -673,4 +673,4 @@ export default {
   align-items: center;
   cursor: pointer;
 }
-</style>
+</style>