[Feat 0000] 瓦斯巡检历史曲线开发

src/views/vent/gas/gasInspectNonfc/gasInspectNonfc.api.ts

@@ -16,6 +16,7 @@ enum Api {
   addGasReportAddressNew = '/safety/gasDayReport/addGasReportAddressNew', //新增瓦斯巡检地址(新自动排序)
   clearCardInfoNew = '/safety/gasIns/deleteNew', //瓦斯巡检卡信息删除(新自动排序)
   editNew = '/safety/gasIns/editNew', //瓦斯巡检地点编辑(新自动排序)
+  queryHisCurve = '/safety/gasDayReport/queryHisCurve', //瓦斯巡检地点历史数据
 }
 
 /**
@@ -83,3 +84,4 @@ export const taskSubmit = (params) => defHttp.post({ url: Api.taskSubmit, params
 export const addGasReportAddressNew = (params) => defHttp.post({ url: Api.addGasReportAddressNew, params });
 export const clearCardInfoNew = (params) => defHttp.delete({ url: Api.clearCardInfoNew, params }, { joinParamsToUrl: true });
 export const editNew = (params) => defHttp.post({ url: Api.editNew, params });
+export const queryHisCurve = (params) => defHttp.get({ url: Api.queryHisCurve, params });

src/views/vent/gas/gasInspectNonfc/index2.vue

@@ -31,6 +31,7 @@
         @change="pageChange"
       >
         <template #action="{ record }">
+          <a class="table-action-link" @click="handlerCurve(record)">历史曲线</a>
           <a class="table-action-link" @click="handlerEdit(record)">编辑</a>
           <a-popconfirm title="删除内容无法恢复，是否删除" ok-text="确定" cancel-text="取消" @confirm="handleDelCardInfo(record)">
             <a class="table-action-link">删除</a>
@@ -74,6 +75,27 @@
       <a-modal v-model:visible="visibleAddress" width="450px" :footer="null" :title="titleAddress" centered destroyOnClose>
         <addressAdd @confirmAddress="confirmAddress" @cancelAddress="cancelAddress" />
       </a-modal>
+
+      <BasicModal :width="1000" title="历史曲线" @register="registerModal">
+        <Space>
+          <a-range-picker
+            style="width: 220px"
+            :showTime="false"
+            valueFormat="YYYY-MM-DD"
+            :value="[chartParams.startTime, chartParams.endTime]"
+            @change="onRangeChange"
+          />
+          <RadioGroup class="ml-auto" v-model:value="chartParams.category" @change="getChartData">
+            <Radio value="gwSdz">甲烷</Radio>
+            <Radio value="co2">二氧化碳</Radio>
+            <Radio value="co">一氧化碳</Radio>
+            <Radio value="o2">氧气</Radio>
+            <Radio value="temp">温度</Radio>
+          </RadioGroup>
+          <a-button type="primary" :loading="chartLoaing" @click="getChartData">查询</a-button>
+        </Space>
+        <LineMulti height="300px" x-axis-prop-type="time" :chart-data="chartData" :option="chartOption" :prop-type-arr="new Map([['val', '值']])" />
+      </BasicModal>
     </div>
   </div>
 </template>
@@ -85,7 +107,7 @@
   import inspectEdit from './components/inspectEdit2.vue';
   import uploadOrdown from './components/uploadOrdown.vue';
   import addressAdd from './components/addressAdd2.vue';
-  import { message } from 'ant-design-vue';
+  import { message, RadioGroup, Space, Radio } from 'ant-design-vue';
   import { columns2, pagination } from './gasInspectNonfc.data';
   import {
     list,
@@ -96,7 +118,11 @@
     taskSubmit,
     clearCardInfoNew,
     addGasReportAddressNew,
+    queryHisCurve,
   } from './gasInspectNonfc.api';
+  import { BasicModal, useModal } from '/@/components/Modal';
+  import LineMulti from '/@/components/chart/LineMulti.vue';
+  import dayjs from 'dayjs';
 
   let keyActive = ref(0);
   let searchParams = ref('');
@@ -278,7 +304,6 @@
   //确定新增
   async function confirmAddress(param) {
     let res = await addGasReportAddressNew(param);
-    console.log(res, '新增瓦斯巡检地点');
     if (res) {
       visibleAddress.value = false;
       queryByIdList();
@@ -288,6 +313,95 @@
   let cancelAddress = () => {
     visibleAddress.value = false;
   };
+
+  const [registerModal, { openModal }] = useModal();
+  const chartParams = ref({
+    startTime: dayjs().subtract(1, 'day').format('YYYY-MM-DD'),
+    endTime: dayjs().format('YYYY-MM-DD'),
+    category: 'temp',
+    devId: '',
+  });
+  const chartLoaing = ref(false);
+  const chartData = ref<any[]>([]);
+  const chartOption = ref({
+    yAxis: {
+      type: 'value',
+      name: '',
+    },
+  });
+
+  function onRangeChange(__, time) {
+    chartParams.value.startTime = time[0];
+    chartParams.value.endTime = time[1];
+  }
+
+  async function handlerCurve(record) {
+    chartParams.value.devId = record.id;
+    openModal();
+    getChartData();
+  }
+
+  async function getChartData() {
+    chartLoaing.value = true;
+    const result = await queryHisCurve(chartParams.value).finally(() => {
+      chartLoaing.value = false;
+    });
+    switch (chartParams.value.category) {
+      case 'gwSdz':
+        chartData.value = result.map((e) => {
+          return {
+            time: e.time,
+            val: e.gwSdz,
+          };
+        });
+        chartOption.value.yAxis.name = '%';
+        break;
+
+      case 'co2':
+        chartData.value = result.map((e) => {
+          return {
+            time: e.time,
+            val: e.co2,
+          };
+        });
+        chartOption.value.yAxis.name = '%';
+        break;
+
+      case 'co':
+        chartData.value = result.map((e) => {
+          return {
+            time: e.time,
+            val: e.co,
+          };
+        });
+        chartOption.value.yAxis.name = 'ppm';
+        break;
+
+      case 'o2':
+        chartData.value = result.map((e) => {
+          return {
+            time: e.time,
+            val: e.o2,
+          };
+        });
+        chartOption.value.yAxis.name = '%';
+        break;
+
+      case 'temp':
+        chartData.value = result.map((e) => {
+          return {
+            time: e.time,
+            val: e.t,
+          };
+        });
+        chartOption.value.yAxis.name = '℃';
+        break;
+
+      default:
+        break;
+    }
+  }
+
   onMounted(() => {
     queryByIdList();
   });
@@ -338,9 +452,9 @@
     border-right: 1px solid #91e9fe !important;
   }
 
-  :deep(.zxm-picker-input > input) {
-    color: #fff;
-  }
+  // :deep(.zxm-picker-input > input) {
+  //   color: #fff;
+  // }
 
   :deep(.zxm-select:not(.zxm-select-customize-input) .zxm-select-selector) {
     border: 1px solid #3ad8ff77 !important;