变电硐室界面及接口修改-提交

src/views/vent/fire/fireDistributionPoint/index.vue

@@ -160,7 +160,6 @@ onUnmounted(() => {
     justify-content: flex-start;
     width: 100%;
     height: 100%;
-    margin-left: 10px;
     padding: 15px 10px;
     background-color: rgb(27 35 39 / 80%);
 

src/views/vent/fire/fireMonitor/fireMonitor.api.ts

@@ -1,41 +1,29 @@
 import { defHttp } from '@/utils/http/axios';
 
 enum Api {
-  getFireAreaInfo = '/fire/fireDisasterApi/getFireAreaInfo',
-  getMbRealData = '/fire/fireDisasterApi/getMbRealData',
-  getMbHistoryData = '/fire/fireDisasterApi/getMbHistoryData',
-  getInfosByAreaCode = '/fire/fireDisasterApi/getInfosByAreaCode',
+  getYwRealData='/fire/fireDisasterApi/getYwRealData',
+  getHyRealData='/fire/fireDisasterApi/getHyRealData',
+  getPfmhRealData='/fire/fireDisasterApi/getPfmhRealData',
   getGxcwHistoryDataByPointCode = '/fire/fireDisasterApi/getGxcwHistoryDataByPointCode',
-  getSgjcPointInfo = '/fire/fireDisasterApi/getSgjcPointInfo',
-  getSgjcRealDataByPointCode = '/fire/fireDisasterApi/getSgjcRealDataByPointCode',
-  getSgjcHistoryData = '/fire/fireDisasterApi/getSgjcHistoryData',
+  getInfosByAreaCode = '/fire/fireDisasterApi/getInfosByAreaCode',
 }
 /**
- * 密闭监测实时数据
- * @param params
- */
-export const getMbRealData = (params) => defHttp.get({ url: Api.getMbRealData, params });
-
-/**
- *
- * 获取左侧菜单树
+ * 烟雾传感器数据
  * @param params
  */
-export const getFireAreaInfo = (params) => defHttp.get({ url: Api.getFireAreaInfo, params });
+export const getYwRealData = (params) => defHttp.get({ url: Api.getYwRealData, params });
 
 /**
- *
- * 获取图表数据
+ * 火焰传感器数据
  * @param params
  */
-export const getMbHistoryData = (params) => defHttp.get({ url: Api.getMbHistoryData, params });
+export const getHyRealData = (params) => defHttp.get({ url: Api.getHyRealData, params });
 
 /**
- *
- * 获取光钎条数及测点编号
+ * 喷粉灭火装置数据
  * @param params
  */
-export const getInfosByAreaCode = (params) => defHttp.get({ url: Api.getInfosByAreaCode, params });
+export const getPfmhRealData = (params) => defHttp.get({ url: Api.getPfmhRealData, params });
 
 /**
  *
@@ -47,21 +35,7 @@ export const getGxcwHistoryDataByPointCode = (params) =>
 
 /**
  *
- * 获取束管列表
+ * 获取工作面光钎条数及测点编号
  * @param params
  */
-export const getSgjcPointInfo = (params) => defHttp.get({ url: Api.getSgjcPointInfo, params });
-
-/**
- *
- * 获取束管测点实时数据
- * @param params
- */
-export const getSgjcRealDataByPointCode = (params) =>
-  defHttp.get({ url: Api.getSgjcRealDataByPointCode, params });
-
-/**
- * 获取束管曲线数据
- * @param params
- */
-export const getSgjcHistoryData = (params) => defHttp.get({ url: Api.getSgjcHistoryData, params });
+export const getInfosByAreaCode = (params) => defHttp.get({ url: Api.getInfosByAreaCode, params });

src/views/vent/fire/fireMonitor/index.vue

@@ -1,26 +1,147 @@
 <template>
   <div class="fireMonitor">
     <div class="top-box">
-      <!-- <div class="table-box">
+      <div class="table-box">
         <basicSensor :sensorTitle="sensorTitle" :sensorList="sensorList" :headList="headList" />
       </div>
       <div class="table-box">
-        <basicSensor :sensorTitle="sensorTitle" :sensorList="sensorList" :headList="headList" />
+        <basicSensor :sensorTitle="sensorTitle1" :sensorList="sensorList1" :headList="headList" />
       </div>
       <div class="table-box">
-        <basicSensor :sensorTitle="sensorTitle" :sensorList="sensorList" :headList="headList" />
-      </div> -->
+        <basicSensor :sensorTitle="sensorTitle2" :sensorList="sensorList2" :headList="headList" />
+      </div>
+    </div>
+    <div class="bot-box">
+      <div class="bot-item-title">
+        <div class="item-left">光钎测温系统温度实时监测</div>
+        <a-select style="width: 180px" :options="gxSelectList" size="small" placeholder="请选择" v-model:value="gxSelect"
+          allowClear @change="pointChange"></a-select>
+      </div>
+      <div class="bot-item-content">
+        <basicEchartLine :gridV="gridV" :echartData="echartDataGx"></basicEchartLine>
+      </div>
     </div>
-    <div class="bot-box"></div>
 
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref, reactive, onMounted } from 'vue'
-// import basicSensor from '../../common/basicSensor.vue';
+import basicSensor from '../../common/basicSensor.vue';
+import { getYwRealData, getHyRealData, getPfmhRealData, getGxcwHistoryDataByPointCode, getInfosByAreaCode } from './fireMonitor.api'
+
+let sensorTitle = ref('烟雾传感器监测');
+let sensorTitle1 = ref('火焰传感器监测');
+let sensorTitle2 = ref('电磁阀开关量监测');
+
+let headList = reactive([
+  { id: 0, title: '测点位置' },
+  { id: 1, title: '预警级别' },
+  { id: 2, title: '时间' },
+]);
+
+let sensorList = reactive<any[]>([])
+let sensorList1 = reactive<any[]>([])
+let sensorList2 = reactive<any[]>([])
+
+let gxSelect = ref('')
+let gxSelectList = reactive<any[]>([])
+
+let gridV = reactive({
+  top: '8%',
+  left: '3%',
+  right: '3%',
+  bottom: '10%',
+})
+let echartDataGx = reactive(
+  {
+    xData: [],
+    yData: [],
+    yData1: [],
+    legendName: ['最高温度', '最低温度']
+  }
+)
+
+//获取烟雾传感器监测数据
+async function getYwRealDataList() {
+  let res = await getYwRealData({ areaCode: 'zybds001' })
+  console.log(res, '烟雾传感器数据------------')
+  if(res.length!=0){
+    sensorList.length=0
+    res.forEach(el=>{
+      el.isOpens=el.isOpen=='0' ? '正常' : '关闭'
+      sensorList.push({name:el.pointName,warn:el.isOpens,times:el.time})
+    })
+  }
+}
+//获取火焰传感器监测数据
+async function getHyRealDataList() {
+  let res = await getHyRealData({ areaCode: 'zybds001' })
+  console.log(res, '火焰传感器数据------')
+  if(res.length!=0){
+    sensorList1.length=0
+    res.forEach(el=>{
+      el.isOpens=el.isOpen=='0' ? '正常' : '关闭'
+      sensorList1.push({name:el.pointName,warn:el.isOpens,times:el.time})
+    })
+  }
+}
+//获取喷粉灭火装置数据
+async function getPfmhRealDataList() {
+  let res = await getPfmhRealData({ areaCode: 'zybds001' })
+  console.log(res, '喷粉灭火装置数据---')
+  if(res.length!=0){
+    sensorList2.length=0
+    res.forEach(el=>{
+      el.isOpens=el.isOpen=='0' ? '正常' : '关闭'
+      sensorList2.push({name:el.pointName,warn:el.isOpens,times:el.time})
+    })
+  }
+}
 
-onMounted(()=>{})
+//获取工作面光钎条数及测点编号
+async function getInfosByAreaCodeList() {
+  let res = await getInfosByAreaCode({ areaCode: 'zybds001' })
+  if (res.length != 0) {
+    gxSelectList.length = 0
+    res.forEach(el => {
+      gxSelectList.push({
+        label: el.pointName,
+        value: el.pointCode,
+      })
+    })
+    gxSelect.value = gxSelect.value ? gxSelect.value : res[0]['pointCode']
+    //获取光钎测温图表数据
+    getGxcwHistoryDataByPointCodeList()
+  }
+}
+//获取光钎测温图表数据
+async function getGxcwHistoryDataByPointCodeList() {
+  let res = await getGxcwHistoryDataByPointCode({ pointCode: gxSelect.value })
+  echartDataGx.xData.length = 0
+  echartDataGx.yData.length = 0
+  echartDataGx.yData1.length = 0
+  res.time.forEach(el => {
+    echartDataGx.xData.push(el)
+  })
+  res.maxValue.forEach(el => {
+    echartDataGx.yData.push(el)
+  })
+  res.minValue.forEach(el => {
+    echartDataGx.yData1.push(el)
+  })
+}
+//工作面光钎测温测点编号选项切换
+function pointChange(val) {
+  gxSelect.value = val
+  getGxcwHistoryDataByPointCodeList()
+}
+onMounted(() => {
+  getYwRealDataList()
+  getHyRealDataList()
+  getPfmhRealDataList()
+  getInfosByAreaCodeList()
+})
 
 
 
@@ -32,26 +153,64 @@ onMounted(()=>{})
   width: calc(100% - 20px);
   height: 928px;
   margin: 0 10px;
-  background: #282828;
+  background-color: rgb(27 35 39 / 80%);
 
   .top-box {
     display: flex;
+    box-sizing: border-box;
     justify-content: space-between;
     width: 100%;
-    height: calc(70% - 15px);
-    margin-bottom: 15px;
-    background-color: rgb(27 35 39 / 80%);
+    height: calc(70% - 2px);
+    margin-bottom: 2px;
+    padding: 10px 0;
 
-    // .table-box{
 
-    // }
+    .table-box {
+      width: 33%;
+      height: 100%;
+    }
   }
 
   .bot-box {
     width: 100%;
     height: 30%;
-    background-color: rgb(27 35 39 / 80%);
+
+    .bot-item-title {
+      display: flex;
+      box-sizing: border-box;
+      align-items: center;
+      justify-content: space-between;
+      height: 40px;
+      padding: 10px;
+      background: rgb(41 49 53 / 80%);
+
+      .item-left {
+        color: #fff;
+        font-family: "Microsoft YaHei", sans-serif;
+        font-size: 16px;
+      }
+    }
+
+    .bot-item-content {
+      box-sizing: border-box;
+      height: calc(100% - 30px);
+      padding: 10px;
+      background: rgb(41 49 53 / 80%);
+    }
   }
+}
+
+:deep(.vMonitor-select-selector) {
+  border: none !important;
+  background-color: rgb(15 64 88) !important;
+  color: #a1dff8 !important;
+}
+
+:deep(.vMonitor-select-selection-placeholder) {
+  color: #a1dff8 !important;
+}
 
+:deep(.vMonitor-select-arrow) {
+  color: #a1dff8 !important;
 }
 </style>