Pārlūkot izejas kodu

[Wip 0000] 瓦斯监测-添加测点监测/预测曲线切换功能

houzekong 2 mēneši atpakaļ
vecāks
revīzija
f050171542

+ 1 - 1
.gitignore

@@ -36,4 +36,4 @@ os_del.cmd
 /.vscode/
 /.history/
 /svn clear.bat
-/src/views/vent/monitorManager/alarmMonitor
+# /src/views/vent/monitorManager/alarmMonitor

+ 224 - 0
src/views/vent/monitorManager/alarmMonitor/common/echartLine3.vue

@@ -0,0 +1,224 @@
+<template>
+  <div ref="work" class="work-box"></div>
+</template>
+
+<script lang="ts" setup>
+  import * as echarts from 'echarts';
+  import { ref, nextTick, reactive, watch, defineProps } from 'vue';
+
+  let props = defineProps({
+    deviceId: {
+      type: String,
+    },
+  });
+
+  //获取dom元素节点
+  let work = ref<any>();
+  let echartDataWds = reactive({});
+
+  watch(
+    () => props.deviceId,
+    (data) => {
+      echartDataWds = Object.assign({}, data);
+      getOption();
+    },
+    { immediate: true, deep: true }
+  );
+
+  function getOption() {
+    nextTick(() => {
+      const myChart = echarts.init(work.value);
+      let option = {
+        tooltip: {
+          trigger: 'axis',
+          backgroundColor: 'rgba(0, 0, 0, .6)',
+          textStyle: {
+            color: '#fff',
+            fontSize: 12,
+          },
+        },
+
+        legend: {
+          align: 'left',
+          right: '50%',
+          top: '0%',
+          type: 'plain',
+          textStyle: {
+            color: '#7ec7ff',
+            fontSize: 14,
+          },
+          // icon:'rect',
+          itemGap: 25,
+          itemWidth: 18,
+          icon: 'path://M0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z',
+          data: [
+            {
+              name: echartDataWds.maxData ? echartDataWds.maxData.lengedData : '',
+            },
+          ],
+        },
+
+        grid: {
+          top: '20%',
+          left: '4%',
+          right: '4%',
+          bottom: '20%',
+          // containLabel: true
+        },
+
+        xAxis: [
+          {
+            type: 'category',
+            boundaryGap: false,
+            axisLine: {
+              //坐标轴轴线相关设置。数学上的x轴
+              show: true,
+              lineStyle: {
+                color: '#244a94',
+              },
+            },
+            axisLabel: {
+              //坐标轴刻度标签的相关设置
+              textStyle: {
+                color: '#b3b8cc',
+                padding: 5,
+                fontSize: 14,
+              },
+              formatter: function (data) {
+                return data;
+              },
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: '#0d2973',
+                type: 'dashed',
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            data: echartDataWds.xData,
+          },
+        ],
+
+        yAxis: [
+          {
+            name: '(℃)',
+            nameTextStyle: {
+              color: '#7ec7ff',
+              fontSize: 14,
+              padding: 0,
+            },
+            min: 0,
+            max: 100,
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: '#0d2973',
+                type: 'dashed',
+              },
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: '#244a94',
+              },
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                color: '#b3b8cc',
+                padding: 5,
+              },
+              formatter: function (value) {
+                if (value === 0) {
+                  return value;
+                }
+                return value;
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: echartDataWds.maxData ? echartDataWds.maxData.lengedData : '',
+            type: 'line',
+            smooth: true,
+            yAxisIndex: 0,
+            symbolSize: 8,
+            lineStyle: {
+              normal: {
+                width: 2,
+                color: '#4653fd', // 线条颜色
+              },
+              borderColor: 'rgba(0,0,0,.4)',
+            },
+            itemStyle: {
+              color: '#4653fd',
+              borderColor: '#646ace',
+              borderWidth: 0,
+            },
+            data: echartDataWds.maxData ? echartDataWds.maxData.data : [],
+          },
+          {
+            name: echartDataWds.minData ? echartDataWds.minData.lengedData : '',
+            type: 'line',
+            smooth: true,
+            yAxisIndex: 0,
+            symbolSize: 8,
+
+            lineStyle: {
+              normal: {
+                width: 2,
+                color: '#46fda8', // 线条颜色
+              },
+              borderColor: 'rgba(0,0,0,.4)',
+            },
+            itemStyle: {
+              color: '#46fda8',
+              borderColor: '#646ace',
+              borderWidth: 0,
+            },
+            data: echartDataWds.minData ? echartDataWds.minData.data : [],
+          },
+          {
+            name: echartDataWds.aveaData ? echartDataWds.aveaData.lengedData : '',
+            type: 'line',
+            smooth: true,
+            yAxisIndex: 0,
+            symbolSize: 8,
+
+            lineStyle: {
+              normal: {
+                width: 2,
+                color: '#1eb0fc', // 线条颜色
+              },
+              borderColor: 'rgba(0,0,0,.4)',
+            },
+            itemStyle: {
+              color: '#1eb0fc',
+              borderColor: '#646ace',
+              borderWidth: 0,
+            },
+            data: echartDataWds.aveaData ? echartDataWds.aveaData.data : [],
+          },
+        ],
+      };
+      myChart.setOption(option);
+      window.onresize = function () {
+        myChart.resize();
+      };
+    });
+  }
+</script>
+
+<style scoped lang="less">
+  .work-box {
+    width: 100%;
+    height: 100%;
+  }
+</style>

+ 185 - 0
src/views/vent/monitorManager/alarmMonitor/common/measurePoint.vue

@@ -0,0 +1,185 @@
+<template>
+  <div class="content">
+    <div class="title">
+      <div class="text">{{ title }}</div>
+      <!-- <a-radio-group v-model:value="shown" button-style="solid">
+        <a-radio-button value="default">测点信息</a-radio-button>
+        <a-radio-button value="chart">预测曲线</a-radio-button>
+      </a-radio-group> -->
+      <BaseTab
+        style="width: 200px"
+        :tabs="[
+          { name: '测点信息', id: 'default' },
+          { name: '预测曲线', id: 'chart' },
+        ]"
+        v-model:id="shown"
+      />
+    </div>
+    <div v-if="shown === 'default'" class="content-item">
+      <div class="card-content" v-for="(item, index) in cards" :key="index">
+        <div class="item-l">
+          <div class="label-l">{{ item.label }}</div>
+          <div class="value-l">{{ `${item.value}%` }}</div>
+        </div>
+        <div class="item-r">
+          <div class="content-r" v-for="(items, ind) in item.listR" :key="ind">
+            <span>{{ `${items.label} : ` }}</span>
+            <span
+              :class="{
+                'status-f': items.value == 1,
+                'status-l': items.value == 0,
+              }"
+              >{{ items.value == 1 ? '异常' : items.value == 0 ? '正常' : items.value }}</span
+            >
+          </div>
+        </div>
+      </div>
+    </div>
+    <div v-if="shown === 'chart'" class="chart-item">
+      <div v-for="(item, index) in charts" :key="`acmt${index}`">
+        <EchartLine3 style="height: 270px; width: 350px; margin: 0 5px" />
+        <div class="text-center">
+          {{ item.label }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+  import { ref } from 'vue';
+  import EchartLine3 from './echartLine3.vue';
+  import BaseTab from '../../../gas/components/tab/baseTab.vue';
+
+  defineProps<{
+    cards: { label: string; value: any; listR: { id: number; label: string; dw: string; value: any }[] }[];
+    charts: { label: string; data: { x: string; y: number }[] }[];
+    title: string;
+  }>();
+
+  const shown = ref('default');
+</script>
+<style lang="less">
+  @import '/@/design/theme.less';
+
+  @{theme-deepblue} {
+    .content {
+      --image-bot-area: url('/@/assets/images/themify/deepblue/fire/bot-area.png');
+      --image-bot-area1: url('/@/assets/images/themify/deepblue/fire/bot-area1.png');
+    }
+  }
+  .content {
+    --image-bot-area: url('/@/assets/images/fire/bot-area.png');
+    --image-bot-area1: url('/@/assets/images/fire/bot-area1.png');
+    height: 100%;
+    color: var(--vent-font-color);
+
+    .title {
+      height: 30px;
+      margin-bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      .text {
+        font-family: 'douyuFont';
+        font-size: 14px;
+      }
+    }
+
+    .content-item {
+      display: flex;
+      justify-content: flex-start;
+      align-items: flex-start;
+      flex-wrap: wrap;
+      height: calc(100% - 50px);
+      overflow-y: auto;
+
+      .card-content {
+        position: relative;
+        width: 30%;
+        height: 128px;
+        margin: 0px 15px 15px 15px;
+        background: var(--image-bot-area) no-repeat center;
+        background-size: 100% 100%;
+
+        .item-l {
+          position: absolute;
+          left: 32px;
+          top: 50%;
+          transform: translate(0, -50%);
+          width: 89px;
+          height: 98px;
+          background: var(--image-bot-area1) no-repeat center;
+
+          .label-l {
+            position: absolute;
+            left: 50%;
+            top: 7px;
+            color: var(--vent-font-color);
+            font-size: 14px;
+            transform: translate(-50%, 0);
+          }
+
+          .value-l {
+            position: absolute;
+            left: 50%;
+            top: 50px;
+            transform: translate(-50%, 0);
+            font-family: 'douyuFont';
+            font-size: 14px;
+            color: var(--vent-table-action-link);
+          }
+        }
+
+        .item-r {
+          position: absolute;
+          left: 132px;
+          top: 50%;
+          transform: translate(0, -50%);
+          height: 128px;
+          padding: 5px 0px;
+          display: flex;
+          flex-direction: column;
+          justify-content: space-around;
+          box-sizing: border-box;
+
+          .content-r {
+            display: flex;
+
+            span {
+              font-size: 14px;
+              color: var(--vent-font-color);
+
+              &:first-child {
+                display: inline-block;
+                width: 68px;
+              }
+
+              &:last-child {
+                display: inline-block;
+                width: calc(100% - 68px);
+              }
+            }
+
+            .status-f {
+              color: #ff0000;
+            }
+
+            .status-l {
+              color: var(--vent-table-action-link);
+            }
+          }
+        }
+      }
+    }
+
+    .chart-item {
+      display: flex;
+      justify-content: flex-start;
+      align-items: flex-start;
+      flex-wrap: wrap;
+      height: calc(100% - 50px);
+      overflow-y: auto;
+    }
+  }
+</style>

+ 8 - 133
src/views/vent/monitorManager/alarmMonitor/warn/gasWarn.vue

@@ -76,31 +76,7 @@
         </div>
 
         <div :class="topAreaListWs.length != 0 ? 'bot-area' : 'bot-area1'">
-          <div class="title-b">
-            <div class="text-b">安全监控测点信息</div>
-          </div>
-          <div class="content-b">
-            <div class="content-b-item">
-              <div class="card-b" v-for="(item, index) in cardListWs" :key="index">
-                <div class="item-l">
-                  <div class="label-l">{{ item.label }}</div>
-                  <div class="value-l">{{ `${item.value}%` }}</div>
-                </div>
-                <div class="item-r">
-                  <div class="content-r" v-for="(items, ind) in item.listR" :key="ind">
-                    <span>{{ `${items.label} : ` }}</span>
-                    <span
-                      :class="{
-                        'status-f': items.value == 1,
-                        'status-l': items.value == 0,
-                      }"
-                      >{{ items.value == 1 ? '异常' : items.value == 0 ? '正常' : items.value }}</span
-                    >
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
+          <MeasurePoint title="安全监控测点信息" :cards="cardListWs" :charts="chartListWs" />
         </div>
       </div>
       <div style="width: 100%; height: 100%" v-else-if="isShow == 'yjzb'">
@@ -124,6 +100,7 @@
   import { getMonitorComponent } from '../common.data';
   import { usePermission } from '/@/hooks/web/usePermission';
   import { useGlobSetting } from '/@/hooks/setting';
+  import MeasurePoint from '../common/measurePoint.vue';
 
   let typeMenuListGas = getMonitorComponent();
   const { sysOrgCode } = useGlobSetting();
@@ -137,6 +114,7 @@
   let topAreaListWs = reactive<any[]>([]);
   //瓦斯监控列表数据
   let cardListWs = reactive<any[]>([]);
+  const chartListWs = reactive<any[]>([]);
   let router = useRouter();
   //监测/指标激活索引
   let activeIndex = ref(0);
@@ -168,6 +146,7 @@
       // listData.common = res;
       topAreaListWs.length = 0;
       cardListWs.length = 0;
+      chartListWs.length = 0;
       if (JSON.stringify(res) != '{}') {
         res.pump.forEach((v) => {
           topAreaListWs.push({
@@ -204,6 +183,10 @@
               { id: 3, label: '测点状态', value: el.warnFlag },
             ],
           });
+          chartListWs.push({
+            label: el.strinstallpos,
+            data: [],
+          });
         });
       }
     });
@@ -274,8 +257,6 @@
       --image-border: url('/@/assets/images/themify/deepblue/fire/border.png');
       --image-bj1: url('/@/assets/images/themify/deepblue/fire/bj1.png');
       --image-top-area: url('/@/assets/images/themify/deepblue/fire/top-area.png');
-      --image-bot-area: url('/@/assets/images/themify/deepblue/fire/bot-area.png');
-      --image-bot-area1: url('/@/assets/images/themify/deepblue/fire/bot-area1.png');
     }
   }
 
@@ -285,8 +266,6 @@
     --image-border: url('/@/assets/images/fire/border.png');
     --image-bj1: url('/@/assets/images/fire/bj1.png');
     --image-top-area: url('/@/assets/images/fire/top-area.png');
-    --image-bot-area: url('/@/assets/images/fire/bot-area.png');
-    --image-bot-area1: url('/@/assets/images/fire/bot-area1.png');
     width: 100%;
     height: 100%;
     padding: 80px 10px 15px 10px;
@@ -530,110 +509,6 @@
         background: var(--image-bj1) no-repeat center;
         background-size: 100% 100%;
         box-sizing: border-box;
-
-        .title-b {
-          height: 30px;
-          margin-bottom: 10px;
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-
-          .text-b {
-            font-family: 'douyuFont';
-            font-size: 14px;
-            color: #fff;
-          }
-        }
-
-        .content-b {
-          height: calc(100% - 40px);
-          overflow-y: auto;
-
-          .content-b-item {
-            display: flex;
-            justify-content: flex-start;
-            align-items: flex-start;
-            flex-wrap: wrap;
-
-            .card-b {
-              position: relative;
-              width: 30%;
-              height: 128px;
-              margin: 0px 15px 15px 15px;
-              background: var(--image-bot-area) no-repeat center;
-              background-size: 100% 100%;
-
-              .item-l {
-                position: absolute;
-                left: 32px;
-                top: 50%;
-                transform: translate(0, -50%);
-                width: 89px;
-                height: 98px;
-                background: var(--image-bot-area1) no-repeat center;
-
-                .label-l {
-                  position: absolute;
-                  left: 50%;
-                  top: 7px;
-                  color: #fff;
-                  font-size: 14px;
-                  transform: translate(-50%, 0);
-                }
-
-                .value-l {
-                  position: absolute;
-                  left: 50%;
-                  top: 50px;
-                  transform: translate(-50%, 0);
-                  font-family: 'douyuFont';
-                  font-size: 14px;
-                  color: var(--vent-table-action-link);
-                }
-              }
-
-              .item-r {
-                position: absolute;
-                left: 132px;
-                top: 50%;
-                transform: translate(0, -50%);
-                height: 128px;
-                padding: 5px 0px;
-                display: flex;
-                flex-direction: column;
-                justify-content: space-around;
-                box-sizing: border-box;
-
-                .content-r {
-                  display: flex;
-
-                  span {
-                    font-size: 14px;
-                    color: #fff;
-
-                    &:first-child {
-                      display: inline-block;
-                      width: 68px;
-                    }
-
-                    &:last-child {
-                      display: inline-block;
-                      width: calc(100% - 68px);
-                    }
-                  }
-
-                  .status-f {
-                    color: #ff0000;
-                  }
-
-                  .status-l {
-                    color: var(--vent-table-action-link);
-                  }
-                }
-              }
-            }
-          }
-        }
       }
 
       .bot-area1 {