东泰鑫源火灾粉尘预警记录-提交

src/components/Upload/src/components/ImageUpload.vue

@@ -165,7 +165,7 @@
         name: props.name,
         filename: props.filename,
       });
-      info.onSuccess!(res.data);
+      info.onSuccess!(res.data || res.result);
       const value = getValue();
       isInnerOperate.value = true;
       emit('change', value);

src/utils/http/axios/index.ts

@@ -44,7 +44,7 @@ const transform: AxiosTransform = {
     // 不进行任何处理，直接返回
     // 用于页面代码可能需要直接获取code，data，message这些信息时开启
     if (!isTransformResponse) {
-      return res.data;
+      return res.data || res.result;
     }
     // 错误的时候返回
 

src/views/vent/dust/dustHome/components/dustGlzb.vue

@@ -40,7 +40,7 @@ watch(() => props.dustGlzbData, (newD, oldD) => {
     display: flex;
     position: relative;
     flex-wrap: wrap;
-    align-items: flex-start;
+    align-items: center;
     justify-content: flex-start;
     width: 100%;
     height: 100%;

src/views/vent/dust/dustHome/dustHome.api.ts

@@ -7,6 +7,7 @@ enum Api {
   getDustInfos = '/dust/dustDisasterApi/getDustInfos',
   historyAndForecast = '/dust/dustDisasterApi/historyAndForecast',
   realData = '/fire/show/realData',
+  getGzmMaxBySensorType='/dust/dustDisasterApi/getGzmMaxBySensorType'
 }
 /**
  * 粉尘工作面监测图表数据
@@ -43,3 +44,9 @@ export const historyAndForecast = (params) => defHttp.get({ url: Api.historyAndF
  * @param params
  */
 export const realData = (params) => defHttp.post({ url: Api.realData, params });
+
+/**
+ * 粉尘关联指标数据
+ * @param params
+ */
+export const getGzmMaxBySensorType = () => defHttp.get({ url: Api.getGzmMaxBySensorType, });

src/views/vent/dust/dustHome/index.vue

@@ -66,8 +66,8 @@
           </div>
           <!-- 右中区域 -->
           <div class="right-c">
-            <DanelBd :moduleName="'粉尘关联指标'" :contentStyle="{ contentH: '280px' }" commonTitle="selected"
-              :selectList="selectListBd" :selectValue="sensorCode" @change-select="changeSelect1">
+            <DanelBd :moduleName="'粉尘关联指标'" :contentStyle="{ contentH: '280px' }"
+             >
               <dustGlzb :dustGlzbData="dustGlzbData" />
             </DanelBd>
           </div>
@@ -98,10 +98,9 @@ import {
   getDustInfos,
   historyAndForecast,
   realData,
-  getDustWarningCntByType
+  getDustWarningCntByType,
+  getGzmMaxBySensorType
 } from './dustHome.api';
-import { CodeSandboxCircleFilled } from '@ant-design/icons-vue';
-
 //是否显示左侧区域和右侧区域
 let isShow = ref(true);
 
@@ -128,14 +127,7 @@ let unInterTotal = ref(0);
 let pwData = reactive<any[]>([]);
 
 //粉尘关联指标数据
-let dustGlzbData = reactive<any[]>([
-  { label: '最高温度(℃)', val: 0 },
-  { label: '环境湿度(%)', val: 0 },
-  { label: '风速(m/s)', val: 0 },
-  { label: '采煤机', val: 0 },
-  { label: '水压(Mpa)', val: 0 },
-  { label: '水阀', val: 0 },
-]);
+let dustGlzbData = reactive<any[]>([]);
 
 //粉尘静态指标数据
 let selectListJt = reactive<any[]>([
@@ -157,6 +149,7 @@ function getMonitor() {
     await getDustWarningCntByTypeList()
     await getFireAreaInfoList();
     await getRealDataList();
+    await getGzmMaxBySensorTypeList()
     if (timer) {
       timer = null;
     }
@@ -169,17 +162,7 @@ function changeSelect(data) {
   sensorCode.value = data.value;
   getDustInfosList();
 }
-//粉尘关联指标下拉选项切换
-function changeSelect1(data) {
-  let param = selectListBd.filter((v) => v.value == data.value)[0];
-  dustGlzbData[0].val = param['temperature'] || '--';
-  dustGlzbData[1].val = param['humidity'] || '--';
-  dustGlzbData[2].val = param['windSpeed'] || '--';
-  dustGlzbData[3].val = '--';
-  // dustGlzbData[4].val = param['waterPressure'] || '--';
-  dustGlzbData[4].val = 10;
-  dustGlzbData[5].val = '--';
-}
+
 //获取工作面风险监测图表数据
 async function getDustWarningCntByTypeList() {
   let res = await getDustWarningCntByType({ areaType: 2 })
@@ -231,14 +214,6 @@ async function getRealSensorDataByTypeList() {
       });
     });
     sensorCode.value = sensorCode.value ? sensorCode.value : selectListBd[0]['value'];
-    dustGlzbData[0].val = selectListBd[0]['temperature'] || '--';
-    dustGlzbData[1].val = selectListBd[0]['humidity'] || '--';
-    dustGlzbData[2].val = selectListBd[0]['windSpeed'] || '--';
-    dustGlzbData[3].val = '--';
-    // dustGlzbData[4].val = selectListBd[0]['waterPressure'] || '--';
-    dustGlzbData[4].val = 10;
-    dustGlzbData[5].val = '--';
-
     //获取单项数据
     getDustInfosList();
   }
@@ -298,10 +273,22 @@ async function getRealDataList() {
   }
 }
 
+//粉尘关联指标数据
+async function getGzmMaxBySensorTypeList(){
+  let res=await getGzmMaxBySensorType()
+  if(res.length!=0){
+    dustGlzbData.length=0
+    res.forEach(el=>{
+      dustGlzbData.push({label:`${el.sensorName}${el.unit}`,val:el.value})
+    })
+  }
+}
+
 onMounted(() => {
   getDustWarningCntByTypeList()
   getFireAreaInfoList();
   getRealDataList();
+  getGzmMaxBySensorTypeList()
   getMonitor();
 });
 onUnmounted(() => {

src/views/vent/dust/warnRecordDust/index.vue

@@ -1,13 +1,213 @@
 <template>
-  <div>
+  <div class="warnRecordDust">
+    <div class="record-left">
+      <basicTree :treeData="treeData" @selectChange="selectChange"></basicTree>
+    </div>
+    <div class="record-right">
+      <div class="search-box">
+        <div class="search-label">监测日期 ：</div>
+        <div class="search-time">
+          <a-range-picker v-model:value="TimeRange" :format="dateFormat" @change="onDataChange" />
+        </div>
+      </div>
+      <div class="content-record">
+        <a-table size="small" :dataSource="dataSource" :columns="columns" :scroll="{ y: 730 }" :pagination="pagination"
+          @change="pageChange">
 
+          <template #action="{ record }">
+            <a-button type="link" style="color:#3DF6FF" @click="getViews">
+              查看
+            </a-button>
+          </template>
+        </a-table>
+      </div>
+    </div>
+    <a-modal title="查看" ok-text=""  cancel-text="取消"  v-model:open="lookVisible"
+      :destroyOnClose="true" centered width="1000px">
+        <div style="height: 600px;"></div>
+    </a-modal>
   </div>
 </template>
 
 <script lang="ts" setup>
+import { ref, reactive, onMounted, onUnmounted } from 'vue'
+import basicTree from '../../common/basicTree.vue'
+import { getFireAreaInfo} from '../../fire/warnRecordFire/warnRecordFire.api'
+import {getDustWarnHistory} from './warnRecordDust.api'
+import { columns } from './warnRecordDust.data'
+import dayjs, { Dayjs } from 'dayjs';
 
+let areaCode = ref('')
+let treeData = reactive<any[]>([])
+
+let dateFormat = ref('YYYY-MM-DD');
+let TimeRange = ref<[Dayjs, Dayjs]>([dayjs(dayjs(new Date().getTime()).format('YYYY-MM-DD'), dateFormat.value), dayjs(dayjs(new Date().getTime() + 24 * 60 * 60 * 1000).format('YYYY-MM-DD'), dateFormat.value)])
+
+let dataSource = ref<any[]>([])
+
+let pagination = reactive({
+  current: 1, // 当前页码
+  pageSize: 10, // 每页显示条数
+  total: 0, // 总条目数，后端返回
+  // showTotal: (total, range) => `${range[0]}-${range[1]} 条，总共 ${total} 条`, // 分页右下角显示信息
+  showSizeChanger: true, // 是否可改变每页显示条数
+  pageSizeOptions: ['10', '20', '50',], // 可选的每页显示条数
+})
+
+let lookVisible=ref(false)
+
+// https获取监测数据
+let timer: null | NodeJS.Timeout = null;
+function getMonitor() {
+  timer = setTimeout(
+    async () => {
+      await getTreeList()
+      await getDustWarnHistoryList()
+      if (timer) {
+        timer = null;
+      }
+      getMonitor();
+    },
+    5000
+  );
+}
+
+//获取树形菜单数据
+async function getTreeList() {
+  let res = await getFireAreaInfo({})
+  console.log(res, 'tree列表')
+  if (res.length != 0) {
+    treeData.length = 0
+    res.forEach(el => {
+      treeData.push({ name: el.areaName, value: el.ind, id: el.ind, pid: null, areaCode: el.areaCode, warningLevel: el.warningLevel })
+    })
+    areaCode.value = areaCode.value ? areaCode.value : treeData[0]['areaCode']
+  }
+}
+//树形菜单选项切换
+function selectChange(treeNode) {
+  console.log(treeNode, 'treeNode--------')
+  pagination.current = 1
+  dataSource.value = dataSource.value.filter(v => v.areaName == treeNode.node.dataRef.title)
+}
+//时间选项切换
+function onDataChange(value, dateString) {
+  TimeRange.value = [value[0], value[1]]
+  getDustWarnHistoryList()
+}
+
+//获取预警记录
+async function getDustWarnHistoryList() {
+  let ttime_begin = `${dayjs(TimeRange.value[0]).format('YYYY-MM-DD')} 00:00:00`
+  let ttime_end = `${dayjs(TimeRange.value[1]).format('YYYY-MM-DD')} 00:00:00`
+  let res = await getDustWarnHistory({ pageNo: pagination.current, pageSize: pagination.pageSize, ttime_begin: ttime_begin, ttime_end: ttime_end })
+  console.log(res, '预警记录------------')
+  if (res.result.records.length != 0) {
+    res.result.records.forEach(el => {
+      el.zhType = '粉尘'
+      el.isLk = '未联控'
+    })
+    dataSource.value = res.result.records
+    pagination.total = res.result.total
+  }
+}
+//分页切换
+function pageChange(page, page1) {
+  console.log(page, page1, 'page------')
+  pagination.current = page.current
+  pagination.pageSize = page.pageSize
+  getDustWarnHistoryList()
+}
+
+//查看
+function getViews() {
+  lookVisible.value=true
+}
+
+onMounted(() => {
+  getTreeList()
+  getDustWarnHistoryList()
+  getMonitor()
+})
+onUnmounted(() => {
+  if (timer) {
+    clearTimeout(timer);
+    timer = null;
+  }
+});
 </script>
 
 <style lang="less" scoped>
+.warnRecordDust {
+  display: flex;
+  position: relative;
+  align-items: center;
+  justify-content: space-between;
+  width: calc(100% - 20px);
+  height: 928px;
+  margin: 0 10px;
+  background: #282828;
+
+  .record-left {
+    width: 220px;
+    height: 100%;
+    background-color: rgb(27 35 39 / 80%);
+  }
+
+  .record-right {
+    box-sizing: border-box;
+    width: calc(100% - 230px);
+    height: 100%;
+    margin-left: 10px;
+    padding: 15px 10px;
+    overflow-y: auto;
+    background-color: rgb(27 35 39 / 80%);
+
+    .search-box {
+      display: flex;
+      box-sizing: border-box;
+      align-items: center;
+      width: 100%;
+      height: 60px;
+      padding: 0 15px;
+    }
+  }
+
+}
+
+:deep(.vMonitor-table) {
+  background-color: transparent;
+  color: #fff;
+}
+
+:deep(.vMonitor-table-wrapper .vMonitor-table-thead >tr>th) {
+  padding: 4px 0;
+  border-bottom: none;
+  background: rgb(34 127 173/ 50%);
+  color: #04ffdb;
+}
+
+:deep(.vMonitor-table-thead >tr>th:not(:last-child):not(.vMonitor-table-selection-column):not(.vMonitor-table-row-expand-icon-cell):not([colspan])::before) {
+  background: transparent;
+}
+
+:deep(.vMonitor-table-wrapper .vMonitor-table-cell-scrollbar:not([rowspan])) {
+  box-shadow: none;
+}
+
+:deep(.vMonitor-table-wrapper .vMonitor-table:not(.vMonitor-table-bordered) .vMonitor-table-tbody >tr >td) {
+  border-top: none;
+}
+
+:deep(.vMonitor-table.vMonitor-table-small .vMonitor-table-tbody>tr>td) {
+  padding: 4px 8px;
+}
+
+:deep(.vMonitor-table-wrapper .vMonitor-table-tbody >tr >td.vMonitor-table-cell-row-hover) {
+  background: rgb(38 74 96) !important;
+}
 
+:deep(.vMonitor-table-wrapper .vMonitor-table-tbody >tr.vMonitor-table-row:hover>td) {
+  background: rgb(38 74 96) !important;
+}
 </style>

src/views/vent/dust/warnRecordDust/warnRecordDust.api.ts

@@ -0,0 +1,13 @@
+import { defHttp } from '@/utils/http/axios';
+
+enum Api {
+  getDustWarnHistory='/dust/dustDisasterApi/getDustWarnHistory'
+}
+
+/**
+ * 预警记录
+ * @param params
+ */
+export const getDustWarnHistory = (params) => defHttp.post({ url: Api.getDustWarnHistory, params });
+
+

src/views/vent/dust/warnRecordDust/warnRecordDust.data.ts

@@ -0,0 +1,69 @@
+import { reactive } from 'vue';
+import { BasicColumn, FormSchema } from '/@/components/Table';
+export const  columns = reactive<any[]>([
+  {
+    title: '序号',
+    width: 60,
+    align: 'center',
+    customRender: ({ index }: { index: number }) => `${index + 1}`
+  },
+  {
+    title: '预警区域名称',
+    dataIndex: 'areaName',
+    key: 'areaName',
+    align: 'center',
+    ellipsis: true,
+  },
+  {
+    title: '预警等级',
+    dataIndex: 'warnLevel_dictText',
+    key: 'warnLevel_dictText',
+    align: 'center',
+    ellipsis: true,
+  },
+  {
+    title: '灾害类型',
+    dataIndex: 'zhType',
+    key: 'zhType',
+    align: 'center',
+    ellipsis: true,
+  },
+  {
+    title: '是否联控',
+    dataIndex: 'isLk',
+    key: 'isLk',
+    align: 'center',
+    ellipsis: true,
+  },
+  {
+    title: '预警产生原因',
+    dataIndex: 'remarks',
+    key: 'remarks',
+    width: 200,
+    align: 'center',
+    ellipsis: true,
+  },
+  {
+    title: '给出的预警建议',
+    dataIndex: 'suggestMsg',
+    key: 'suggestMsg',
+    width: 200,
+    align: 'center',
+    ellipsis: true,
+  },
+  {
+    title: '预警时间',
+    dataIndex: 'startTime',
+    key: 'startTime',
+    align: 'center',
+    ellipsis: true,
+  },
+
+  {
+    title: '操作',
+    key: 'action',
+    width: 150,
+    slots: { customRender: 'action' },
+    align: 'center',
+  },
+])

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

@@ -291,7 +291,6 @@ async function getSgjcHistoryDataList() {
 }
 
 onMounted(() => {
-
   getFireAreaInfos()
   getMonitor()
 

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

@@ -15,13 +15,17 @@
           @change="pageChange">
 
           <template #action="{ record }">
-            <a-button type="link" style="color:#3DF6FF">
+            <a-button type="link" style="color:#3DF6FF" @click="getViews">
               查看
             </a-button>
           </template>
         </a-table>
       </div>
     </div>
+    <a-modal title="查看" ok-text=""  cancel-text="取消"  v-model:open="lookVisible"
+      :destroyOnClose="true" centered width="1000px">
+        <div style="height: 600px;"></div>
+    </a-modal>
   </div>
 </template>
 
@@ -29,7 +33,7 @@
 import { ref, reactive, onMounted, onUnmounted } from 'vue'
 import basicTree from '../../common/basicTree.vue'
 import { getFireAreaInfo, getFireWarnHistory } from './warnRecordFire.api'
-import {columns} from './warnRecordFire.data'
+import { columns } from './warnRecordFire.data'
 import dayjs, { Dayjs } from 'dayjs';
 
 let areaCode = ref('')
@@ -49,6 +53,24 @@ let pagination = reactive({
   pageSizeOptions: ['10', '20', '50',], // 可选的每页显示条数
 })
 
+let lookVisible=ref(false)
+
+// https获取监测数据
+let timer: null | NodeJS.Timeout = null;
+function getMonitor() {
+  timer = setTimeout(
+    async () => {
+      await getTreeList()
+      await getFireWarnHistoryList()
+      if (timer) {
+        timer = null;
+      }
+      getMonitor();
+    },
+    5000
+  );
+}
+
 //获取树形菜单数据
 async function getTreeList() {
   let res = await getFireAreaInfo({})
@@ -70,6 +92,7 @@ function selectChange(treeNode) {
 //时间选项切换
 function onDataChange(value, dateString) {
   TimeRange.value = [value[0], value[1]]
+  getFireWarnHistoryList()
 }
 
 //获取预警记录
@@ -88,16 +111,29 @@ async function getFireWarnHistoryList() {
   }
 }
 //分页切换
-function pageChange(page,page1) {
-  console.log(page,page1,'page------')
-  pagination.current=page.current
-  pagination.pageSize=page.pageSize
+function pageChange(page, page1) {
+  console.log(page, page1, 'page------')
+  pagination.current = page.current
+  pagination.pageSize = page.pageSize
+  getFireWarnHistoryList()
+}
+
+//查看
+function getViews() {
+  lookVisible.value=true
 }
 
 onMounted(() => {
   getTreeList()
   getFireWarnHistoryList()
+  getMonitor()
 })
+onUnmounted(() => {
+  if (timer) {
+    clearTimeout(timer);
+    timer = null;
+  }
+});
 </script>
 
 <style lang="less" scoped>