注气驱替-接口对接更新

src/views/vent/home/configurable/components/content.vue

@@ -131,13 +131,13 @@
           <gasInjectList class="content__module" :option="config.config.option" :listData="config.data" />
         </template>
         <template v-else-if="config.name === 'gas_zy_chart'">
-          <gasZyChart class="content__module" />
+          <gasZyChart class="content__module" :data="config.data" />
         </template>
         <template v-else-if="config.name === 'gas_warn_chart'">
-          <gasWarnChart class="content__module" :option="config.config.option" />
+          <gasWarnChart class="content__module" :option="config.config.option" :echartData="config.data" />
         </template>
         <template v-else-if="config.name === 'gas_warn_list'">
-          <gasWarnList class="content__module" :option="config.config.option" />
+          <gasWarnList class="content__module" :option="config.config.option" :listData="config.data" />
         </template>
         <template v-else-if="config.name === 'gasdevice_status_control'">
           <gasDeviceStatusControl class="content__module" :option="config.config.option" :statusData="config.data" />

src/views/vent/home/configurable/components/gasInject/DetailInfo.vue

@@ -1,41 +1,47 @@
 <template>
   <a-modal v-model:visible="visibleDetail" width="1350px" :footer="null" :title="modalTitle" centered destroyOnClose
     @cancel="handleCancel">
-    <!-- 注气参数 -->
-    <template v-if="deviceType == 'cc_gas_nd'">
+    <!-- 注气参数/注气数据监测 -->
+    <template v-if="deviceType == 'cc_gas_nd' || deviceType == 'gas_zq_sj'">
       <curveEchartDetail :sysType="'Zq'" :isShowExport="false" :tableColumn="tableColumnZqcs" :deviceID="data.deviceId"
-        :strtype="data.strtype"></curveEchartDetail>
+        :strtype="data.strtype" :isShowExports="true"></curveEchartDetail>
     </template>
     <!-- 抽采参数 -->
     <template v-if="deviceType == 'cc_gas_ll'">
-      <curveEchartDetail :sysType="'Cc'" :isShowExport="false" :tableColumn="tableColumnCcs"
+      <curveEchartDetail :sysType="'Cc'" :isShowExport="false" :tableColumn="tableColumnCcs" :strtype="data.pumpStrtype"
+        :isShowExports="true"></curveEchartDetail>
+    </template>
+    <!-- 注气驱替促抽效果评价   -->
+    <template v-if="deviceType == 'gas_cc_detail'">
+      <curveEchartDetail :sysType="'Cc-xg'" :isShowExport="false" :tableColumn="tableColumnCcxg"
         :strtype="data.pumpStrtype"></curveEchartDetail>
     </template>
+    <!-- 抽采数据  -->
+    <template v-if="deviceType == 'gas_cc_data'">
+      <!-- <curveEchartDetail :sysType="'Cc-xg'" :isShowExport="false" :tableColumn="tableColumnCcxg"
+        :strtype="data.pumpStrtype"></curveEchartDetail> -->
+      <TableAndLine></TableAndLine>
+    </template>
     <template v-if="deviceType == 'gas_zq-yl'">
-      <curveEchartDetail :sysType="'Zq'" :isShowExport="false" :tableColumn="tableColumnSj"></curveEchartDetail>
+      <curveEchartDetail :sysType="'Zq'" :isShowExport="false" ></curveEchartDetail>
     </template>
-    <template v-if="deviceType == 'gas_zq_sj'">
-      <!-- <zqMonitorDetail :isShowExport="false" :tableColumn="tableColumnSj" :data="data" :optionDetail="optionDetailZq">
-      </zqMonitorDetail> -->
-      <LineAndBarDetail :sysType="'Zq'" :isShowExport="false" :tableColumn="tableColumnSj" :deviceID="data.deviceId">
+    <!-- 注气数据监测 -->
+    <!-- <template v-if="deviceType == 'gas_zq_sj'">
+      <LineAndBarDetail :sysType="'Zq'" :isShowExport="false" :tableColumn="tableColumnSj" :deviceID="data.deviceId"
+        :strtype="data.strtype" :isShowExports="true">
       </LineAndBarDetail>
-    </template>
+    </template> -->
     <!-- 环境监测 -->
     <template v-if="deviceType == 'gas_zq_hj'">
-      <environmentDetailTable :isShowExport="true" :deviceData="data" :strtype="data.strtype"></environmentDetailTable>
+      <environmentDetailTable :isShowExport="true" :deviceData="data" ></environmentDetailTable>
     </template>
     <!-- 装备运行工况监测 -->
     <template v-if="deviceType == 'gas_zq_paramline'">
       <echartLineDateGk :echartOption="echartOptionGk" :deviceID="data.deviceId" :strtype="data.strtype" />
     </template>
     <template v-if="deviceType == 'gas_zq_video'">
-      <!-- <zqMonitorDetail :isShowExport="true" :tableColumn="tableColumnSj"></zqMonitorDetail> -->
       <cameraDetailModal></cameraDetailModal>
     </template>
-    <template v-if="deviceType == 'gas_cc_detail'">
-      <zqMonitorDetail :isShowExport="false" :tableColumn="tableColumnCc" :optionDetail="optionDetailCc">
-      </zqMonitorDetail>
-    </template>
     <template v-if="deviceType == 'gas_cc_line'">
       <curveEchartDetail :sysType="'Cc'" :isShowExport="false" :tableColumn="tableColumnCc">
       </curveEchartDetail>
@@ -43,16 +49,20 @@
     <template v-if="deviceType == 'syq-env-monitor'">
       <SyqDetails />
     </template>
-    <template v-if="deviceType == 'zy-device-status'">
-      <systemDetailTable :isShowExport="true"></systemDetailTable>
+    <!-- 系统运行状态 -->
+    <template v-if="deviceType == 'run-status'">
+      <systemDetailTable :tableData="data.systemRunData"></systemDetailTable>
     </template>
+    <!-- 异常提醒 -->
     <template v-if="deviceType == 'warn-info'">
-      <warnDetailTable :isShowExport="true"></warnDetailTable>
+      <warnDetailTable ></warnDetailTable>
     </template>
     <!-- 装备运行状态与控制 -->
     <template v-if="deviceType == 'device_status_control'">
-      <zqMonitorDetail :isShowExport="true" :tableColumn="columnControl" :deviceID="data.deviceId"
-        :strtype="data.strtype"></zqMonitorDetail>
+      <div class="history-pad">
+        <zqHistoryExport :isShowIcon="true" :tableColumn="columnControl" :deviceId="data.deviceId"
+          :strtype="data.strtype" :isShowExports="false"></zqHistoryExport>
+      </div>
     </template>
 
   </a-modal>
@@ -61,8 +71,7 @@
 <script setup lang="ts">
 import { computed, reactive, ref, watch } from 'vue'
 import curveEchartDetail from './curveEchartDetail.vue'
-import zqMonitorDetail from './zqMonitorDetail.vue'
-import { columnControl, tableColumnZqcs, tableColumnCcs, tableColumnSj, tableColumnHj, tableColumnCc, optionDetailZq, optionDetailCc, columnCc, echartOptionGk } from './gasInject.data'
+import { columnControl, tableColumnZqcs, tableColumnCcs, tableColumnCcxg,tableColumnHj, tableColumnCc, optionDetailZq, optionDetailCc,echartOptionGk } from './gasInject.data'
 import SyqDetails from './SyqDetails.vue';
 import systemDetailTable from './systemDetailTable.vue'
 import warnDetailTable from './warnDetailTable.vue'
@@ -70,6 +79,8 @@ import LineAndBarDetail from './LineAndBarDetail.vue'
 import environmentDetailTable from './environmentDetailTable.vue'
 import echartLineDateGk from './echartLineDateGk.vue'
 import cameraDetailModal from './cameraDetailModal.vue'
+import TableAndLine from './TableAndLine.vue'
+import zqHistoryExport from './zqHistoryExport.vue';
 let props = defineProps({
   //是否显示弹窗
   showDetail: {
@@ -101,8 +112,10 @@ let modalTitle = computed(() => {
   } else if (props.deviceType == 'gas_zq_video') {
     return '视屏监控详情'
   } else if (props.deviceType == 'gas_cc_detail') {
-    return '抽采数据监测'
-  } else if (props.deviceType == 'zy-device-status') {
+    return '注气驱替促抽效果评价'
+  } else if (props.deviceType == 'gas_cc_data') {
+    return '抽采数据'
+  } else if (props.deviceType == 'run-status') {
     return '系统运行状态'
   } else if (props.deviceType == 'warn-info') {
     return '异常提醒'
@@ -124,6 +137,12 @@ watch(() => props.showDetail, (newV, oldV) => {
 </script>
 
 <style lang="less">
+.history-pad {
+  min-height: 400px;
+  padding: 15px 20px;
+  box-sizing: border-box;
+}
+
 .zxm-modal-content {
   // height: 700px;
   border: none !important;

src/views/vent/home/configurable/components/gasInject/LineAndBarDetail.vue

@@ -4,14 +4,17 @@
       <div class="curve-nav">
         <div class="nav-search">
           <!-- 时间查询选项 -->
-          <a-radio-group v-model:value="timerTabs" name="radioGroup">
+          <a-radio-group v-model:value="timerTabs" name="radioGroup" @change="changeRadio">
             <a-radio value="day">按天</a-radio>
             <a-radio value="hours">按小时</a-radio>
             <a-radio value="minutes">按分钟</a-radio>
           </a-radio-group>
           <!-- 时间查询条件 -->
-          <a-range-picker style="width:280px" v-model:value="timerSearch" :show-time="formatDate"
-            format="YYYY-MM-DD HH:mm:ss" :placeholder="['开始时间', '结束时间']" />
+           <a-range-picker style="width:340px" :value="[searchData.startTime, searchData.endTime]"
+            :show-time="{ format: 'HH:mm:ss' }" valueFormat="YYYY-MM-DD HH:mm:ss" :placeholder="['开始时间', '结束时间']"
+            @change="onRangeChange" />
+            <a-button type="primary" preIcon="ant-design:search-outlined" @click="getSearch"
+            style="margin-left: 10px;">查询</a-button>
         </div>
         <div class="nav-btn" @click="handleHistory">
           <div class="nav-text">
@@ -24,16 +27,16 @@
         <div class="curve-content-item" v-for="(item, index) in listData" :key="index">
           <div class="content-item-title">{{ item.label }}</div>
           <div class="content-echart-box">
-            <echartLineDate :ecahrtData="item" :echartOption="echartOption"></echartLineDate>
+            <echartLineDate :ecahrtData="item" :echartOption="zqEchartOption"></echartLineDate>
           </div>
         </div>
       </div>
-      <div class="curve-bar-content">
+      <!-- <div class="curve-bar-content">
           <gasInjectChart  :option="echartBarOption" />
-      </div>
+      </div> -->
     </template>
     <template v-else>
-      <zqHistoryExport :tableColumn="tableColumn" @handleBack="handleBack" :deviceID="deviceID"></zqHistoryExport>
+      <zqHistoryExport :tableColumn="tableColumn" :detailType="'history'" @handleBack="handleBack" :deviceId="deviceID" :strtype="strtype" :isShowExports="isShowExports"></zqHistoryExport>
     </template>
   </div>
 </template>
@@ -44,7 +47,9 @@ import echartLineDate from './echartLineDate.vue'
 import { SvgIcon } from '/@/components/Icon';
 import zqHistoryExport from './zqHistoryExport.vue'
 import gasInjectChart from '../preset/gasInjectChart.vue'
-import { zqEchartOption, ccEchartOption,echartBarOption } from './gasInject.data'
+import { zqEchartOption,echartBarOption } from './gasInject.data'
+import dayjs from 'dayjs';
+import { listdays } from './gasInject.api';
 
 let props = defineProps({
   //是否打开历史数据页面
@@ -62,42 +67,35 @@ let props = defineProps({
   //设备ID
   deviceID:{
     type:String,
+  },
+   //设备类型
+  strtype: {
+    type: String
+  },
+  //是否显示导出按钮
+  isShowExports:{
+    type:Boolean
   }
   
 })
+let searchData = reactive({
+  startTime: dayjs().subtract(1, 'day').format('YYYY-MM-DD HH:mm:ss'),
+  endTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
+})
 //注气参数详情数据
-let listData = ref<any[]>([
-  { label: '钻孔1', xData: ['3.26', '3.27', '3.28', '3.29', '3.30', '3.31'], yData: ["20", "50", "12", "65", "30", "60"], yData1: ["40", "60", "22", "85", "50", "40"], yData2: ["70", "30", "42", "65", "80", "60"], },
-  { label: '钻孔2', xData: ['3.26', '3.27', '3.28', '3.29', '3.30', '3.31'], yData: ["20", "50", "12", "65", "30", "60"], yData1: ["40", "60", "22", "85", "50", "40"], yData2: ["70", "30", "42", "65", "80", "60"], },
-  { label: '钻孔3', xData: ['3.26', '3.27', '3.28', '3.29', '3.30', '3.31'], yData: ["20", "50", "12", "65", "30", "60"], yData1: ["40", "60", "22", "85", "50", "40"], yData2: ["70", "30", "42", "65", "80", "60"], },
-  { label: '钻孔4', xData: ['3.26', '3.27', '3.28', '3.29', '3.30', '3.31'], yData: ["20", "50", "12", "65", "30", "60"], yData1: ["40", "60", "22", "85", "50", "40"], yData2: ["70", "30", "42", "65", "80", "60"], },
-  { label: '钻孔5', xData: ['3.26', '3.27', '3.28', '3.29', '3.30', '3.31'], yData: ["20", "50", "12", "65", "30", "60"], yData1: ["40", "60", "22", "85", "50", "40"], yData2: ["70", "30", "42", "65", "80", "60"], },
-  { label: '钻孔6', xData: ['3.26', '3.27', '3.28', '3.29', '3.30', '3.31'], yData: ["20", "50", "12", "65", "30", "60"], yData1: ["40", "60", "22", "85", "50", "40"], yData2: ["70", "30", "42", "65", "80", "60"], },
-  { label: '钻孔7', xData: ['3.26', '3.27', '3.28', '3.29', '3.30', '3.31'], yData: ["20", "50", "12", "65", "30", "60"], yData1: ["40", "60", "22", "85", "50", "40"], yData2: ["70", "30", "42", "65", "80", "60"], },
-  { label: '钻孔8', xData: ['3.26', '3.27', '3.28', '3.29', '3.30', '3.31'], yData: ["20", "50", "12", "65", "30", "60"], yData1: ["40", "60", "22", "85", "50", "40"], yData2: ["70", "30", "42", "65", "80", "60"], },
-  { label: '钻孔9', xData: ['3.26', '3.27', '3.28', '3.29', '3.30', '3.31'], yData: ["20", "50", "12", "65", "30", "60"], yData1: ["40", "60", "22", "85", "50", "40"], yData2: ["70", "30", "42", "65", "80", "60"], },
-])
+let listData = ref<any[]>([])
 let timerTabs = ref('day')
 let showExport = ref(false)
-//查询时间段-天
-let timerSearch = ref('')
-//时间显示格式
-let formatDate = computed(() => {
-  let showTime = {}
-  if (timerTabs.value == 'day') {
-    showTime = {}
-  } else if (timerTabs.value == 'hours') {
-    showTime = Object.assign({}, { format: 'HH' })
-  } else if (timerTabs.value == 'minutes') {
-    showTime = Object.assign({}, { format: 'HH:mm' })
-  }
-  return showTime
-})
-//图表配置项
-let echartOption = computed(() => {
-  return props.sysType == 'Cc' ? ccEchartOption : zqEchartOption
-})
 
+//时间间隔切换
+function changeRadio(val) {
+  timerTabs.value = val.target.value
+}
+//日期切换
+function onRangeChange(__, time) {
+  searchData.startTime = time[0];
+  searchData.endTime = time[1];
+}
 //打开历史数据详情及导出
 function handleHistory() {
   showExport.value = true
@@ -106,10 +104,44 @@ function handleHistory() {
 function handleBack() {
   showExport.value = false
 }
+//查询
+function getSearch() {
+  switch (timerTabs.value) {
+    case 'day':
+      getHistoryData('9')
+      break;
+    case 'hours':
+      getHistoryData('8')
+      break;
+    case 'minutes':
+      getHistoryData('6')
+      break;
+  }
+}
+async function getHistoryData(skip) {
+    let res = await listdays({ pageNo: 1, pageSize: 1000, gdeviceids: props.deviceID, strtype: props.strtype, ttime_begin: searchData.startTime, ttime_end: searchData.endTime, skip: skip })
+    if (res.datalist.records.length) {
+      let count = 0
+      let data = res.datalist.records.find(el => el.readData.flowStdInstant_1)
+      Object.keys(data.readData).forEach(el => {
+        if (el.indexOf('flowStdAccum_') != -1) {
+          count += 1
+        }
+      })
+      listData.value = Array.from({ length: count }).map((el, index) => {
+        return {
+          label: `钻孔${index + 1}`,
+          xData: res.xlist,
+          yData: res.datalist.records.map(dl => dl.readData[`flowStdInstant_${index + 1}`]),
+          yData1: res.datalist.records.map(dl => dl.readData[`injectionPressure_${index + 1}`]),
+        }
+      })
+    }
+}
 
 watch(() => props.isShowExport, (newV, oldV) => {
-  console.log(props.deviceID,'9900')
   showExport.value = newV
+   getHistoryData('9')
 }, { immediate: true })
 </script>
 
@@ -127,8 +159,8 @@ watch(() => props.isShowExport, (newV, oldV) => {
   --image-inject_curve_bg: url('@/assets/images/gasInjection/9-3.png');
   --image-inject_curve_bg1: url('@/assets/images/gasInjection/9-4.png');
   width: 100%;
-  height: 100%;
-  padding: 25px 20px;
+ min-height: 400px;
+ padding: 15px 20px;
   box-sizing: border-box;
 
   .curve-nav {
@@ -147,8 +179,7 @@ watch(() => props.isShowExport, (newV, oldV) => {
     display: flex;
     flex-wrap: wrap;
     width: 100%;
-    height: 415px;
-    margin-bottom: 15px;
+    margin:10px 0px ;
     overflow-y: auto;
   }
 

src/views/vent/home/configurable/components/gasInject/TableAndLine.vue

@@ -0,0 +1,229 @@
+<template>
+  <div class="tableandLine">
+    <div class="top-area">
+      <div class="curve-nav">
+        <div class="nav-search">
+          <!-- 时间查询选项 -->
+          <a-radio-group v-model:value="timerTabs" name="radioGroup" @change="changeRadio">
+            <a-radio value="9">按天</a-radio>
+            <a-radio value="8">按小时</a-radio>
+            <a-radio value="6">按分钟</a-radio>
+          </a-radio-group>
+          <!-- 时间查询条件 -->
+          <a-range-picker style="width:340px" :value="[searchData.startTime, searchData.endTime]"
+            :show-time="{ format: 'HH:mm:ss' }" valueFormat="YYYY-MM-DD HH:mm:ss" :placeholder="['开始时间', '结束时间']"
+            @change="onRangeChange" />
+          <a-button type="primary" preIcon="ant-design:search-outlined" @click="getSearch"
+            style="margin-left: 10px;">查询</a-button>
+        </div>
+      </div>
+
+      <a-tabs v-model:activeKey="activeKey" @change="tabChange">
+        <a-tab-pane key="1" tab="瞬时混量">
+          <a-table size="small" :dataSource="dataSource" :columns="tableColumn" :scroll="{ y: 200 }"
+            :pagination="false">
+            <template #action="{ record }">
+              <!-- <a class="table-action-link" @click="handleSpDetail(record)">审批详情</a> -->
+            </template>
+          </a-table>
+        </a-tab-pane>
+        <a-tab-pane key="2" tab="累计混量">
+          <a-table size="small" :dataSource="dataSource" :columns="tableColumn" :scroll="{ y: 200 }"
+            :pagination="false">
+            <template #action="{ record }">
+              <!-- <a class="table-action-link" @click="handleSpDetail(record)">审批详情</a> -->
+            </template>
+          </a-table>
+        </a-tab-pane>
+      </a-tabs>
+    </div>
+
+    <div class="bot-area">
+      <div class="curve-content-item" v-for="(item, index) in listData" :key="index">
+        <div class="content-item-title">{{ item.label }}</div>
+        <div class="content-echart-box">
+          <echartLineDate :ecahrtData="item" :echartOption="ccHlEchartOption"></echartLineDate>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, reactive, ref } from 'vue'
+import echartLineDate from './echartLineDate.vue'
+import { tableColumnSshl, tableColumnLjhl } from './gasInject.data'
+import { ccHlEchartOption, } from './gasInject.data'
+import { listdays } from './gasInject.api'
+import dayjs from 'dayjs'
+
+let timerTabs = ref('9')
+let activeKey = ref('1')
+let searchData = reactive({
+  startTime: dayjs().subtract(1, 'day').format('YYYY-MM-DD HH:mm:ss'),
+  endTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
+})
+let dataSource = ref<any[]>([])
+let tableColumn = ref(tableColumnSshl)
+let listData = ref<any[]>([])
+
+//时间间隔切换
+function changeRadio(val) {
+  timerTabs.value = val.target.value
+}
+//日期切换
+function onRangeChange(__, time) {
+  searchData.startTime = time[0];
+  searchData.endTime = time[1];
+}
+//tab选项切换
+function tabChange(val) {
+  activeKey.value = val
+  switch (val) {
+    case '1':
+      tableColumn.value = tableColumnSshl
+      getHistoryData(timerTabs.value)
+      break;
+    case '2':
+      tableColumn.value = tableColumnLjhl
+      getHistoryData(timerTabs.value)
+      break;
+  }
+}
+//查询
+function getSearch() {
+   getHistoryData(timerTabs.value)
+}
+async function getHistoryData(skip) {
+  let res = await listdays({ pageNo: 1, pageSize: 1000, strtype: 'pump', ttime_begin: searchData.startTime, ttime_end: searchData.endTime, skip: skip })
+  console.log(res, '抽采数据===')
+  if (res.datalist.records.length) {
+    let gdevicetype = res.datalist.records.map(v => v.gdevicetype)
+    let count = [...new Set(gdevicetype)].filter(el => el != 'pump_under_1');
+    let data = res.datalist.records.filter(fl => fl.gdevicetype != 'pump_under_1').map(el => {
+      return {
+        ...el,
+        ...el.readData
+      }
+    })
+    dataSource.value = data
+    if (activeKey.value == '1') {
+      listData.value = count.map((el, index) => {
+        return {
+          label: `汇流管${index + 1}`,
+          xData: res.xlist,
+          yData: res.datalist.records.filter(fl => fl.gdevicetype == el).map(dl => dl.readData['mixStdInstant']),
+          yData1: res.datalist.records.filter(fl => fl.gdevicetype == el).map(dl => dl.readData['gasConcentration']),
+        }
+      })
+    } else {
+      listData.value = count.map((el, index) => {
+        return {
+          label: `汇流管${index + 1}`,
+          xData: res.xlist,
+          yData: res.datalist.records.filter(fl => fl.gdevicetype == el).map(dl => dl.readData['mixStdTotal']),
+          yData1: res.datalist.records.filter(fl => fl.gdevicetype == el).map(dl => dl.readData['gasConcentration']),
+        }
+      })
+    }
+    console.log(listData.value, 'listData.value')
+  }
+}
+
+onMounted(() => {
+  getHistoryData(timerTabs.value)
+})
+
+</script>
+
+<style lang="less" scoped>
+@import '/@/design/theme.less';
+
+@{theme-deepblue} {
+  .gas-inject-card {
+    --image-inject_curve_bg: url('@/assets/images/themify/deepblue/home-container/configurable/gasInjection/9-3.png');
+    --image-inject_curve_bg1: url('@/assets/images/themify/deepblue/home-container/configurable/gasInjection/9-4.png');
+  }
+}
+
+.tableandLine {
+  --image-inject_curve_bg: url('@/assets/images/gasInjection/9-3.png');
+  --image-inject_curve_bg1: url('@/assets/images/gasInjection/9-4.png');
+  width: 100%;
+  min-height: 400px;
+  padding: 15px 20px;
+  box-sizing: border-box;
+}
+
+.top-area {
+  margin-bottom: 10px;
+}
+
+.curve-nav {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  height: 39px;
+  padding: 0px 20px;
+  background: var(--image-inject_curve_bg) no-repeat;
+  background-size: 100% 100%;
+}
+
+.bot-area {
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+  height: 450px;
+  overflow-y: auto;
+}
+
+
+.curve-content-item {
+  position: relative;
+  width: 315px;
+  height: 200px;
+  margin: 5px;
+  background: var(--image-inject_curve_bg1) no-repeat;
+  background-size: 100% 100%;
+}
+
+.curve-content-item-xg {
+  position: relative;
+  width: 420px;
+  height: 230px;
+  margin: 8px;
+  background: var(--image-inject_curve_bg1) no-repeat;
+  background-size: 100% 100%;
+}
+
+.content-item-title {
+  position: absolute;
+  left: 15px;
+  top: 3px;
+  color: #fff;
+}
+
+.content-echart-box {
+  position: absolute;
+  left: 0;
+  top: 25px;
+  width: 100%;
+  height: calc(100% - 25px);
+}
+
+:deep(.zxm-picker) {
+  background: #0b223f !important;
+  border: 1px solid #1081d7 !important;
+  border-radius: 4px;
+  margin-left: 10px;
+}
+
+:deep(.zxm-picker-input > input) {
+  color: #fff;
+}
+
+:deep(.zxm-picker-separator) {
+  color: #fff;
+}
+</style>

src/views/vent/home/configurable/components/gasInject/commonTable.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="common-table">
+    <a-table size="small" :dataSource="tableD" :columns="tableColumn" :scroll="{ y: 465 }"
+        :pagination="false">
+        <template #action="{ record }">
+          <!-- <a class="table-action-link" @click="handleSpDetail(record)">审批详情</a> -->
+        </template>
+      </a-table>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref } from 'vue'
+
+let props=defineProps({
+  tableColumn:{
+    type:Array 
+  },
+  tableD:{
+    type:Array
+  }
+})
+
+
+
+</script>
+
+<style lang="less" scoped>
+@import '/@/design/theme.less';
+
+@{theme-deepblue} {
+  .common-table {
+    --image-inject_zq_monitor: url('@/assets/images/themify/deepblue/home-container/configurable/gasInjection/9-3.png');
+  }
+}
+
+.common-table {
+  --image-inject_zq_monitor: url('@/assets/images/gasInjection/9-3.png');
+  position: relative;
+  width: 100%;
+  min-height: 400px;
+  
+
+ 
+}
+</style>

src/views/vent/home/configurable/components/gasInject/curveEchartDetail.vue

@@ -25,16 +25,17 @@
 
       </div>
       <div class="curve-content">
-        <div class="curve-content-item" v-for="(item, index) in listData" :key="index">
+        <div :class="sysType != 'Cc-xg' ? 'curve-content-item' : 'curve-content-item-xg'" v-for="(item, index) in listData" :key="index">
           <div class="content-item-title">{{ item.label }}</div>
           <div class="content-echart-box">
-            <echartLineDate :ecahrtData="item" :echartOption="echartOption"></echartLineDate>
+            <echartLineDate  :ecahrtData="item" :echartOption="echartOption"></echartLineDate>
           </div>
         </div>
       </div>
     </template>
     <template v-else>
-      <zqHistoryExport :tableColumn="tableColumn" :detailType="'history'" :deviceId="deviceID" :strtype="strtype"  @handleBack="handleBack">
+      <zqHistoryExport :tableColumn="tableColumn" :detailType="'history'" :deviceId="deviceID" :isShowExports="isShowExports" :strtype="strtype"
+        @handleBack="handleBack">
       </zqHistoryExport>
     </template>
   </div>
@@ -45,7 +46,7 @@ import { computed, reactive, ref, watch } from 'vue'
 import echartLineDate from './echartLineDate.vue'
 import { SvgIcon } from '/@/components/Icon';
 import zqHistoryExport from './zqHistoryExport.vue'
-import { zqEchartOption, ccEchartOption, gkEchartOption } from './gasInject.data'
+import { zqEchartOption, ccEchartOption, ccxgEchartOption, gkEchartOption } from './gasInject.data'
 import { listdays } from './gasInject.api'
 import dayjs from 'dayjs';
 
@@ -68,8 +69,12 @@ let props = defineProps({
     type: String
   },
   //设备类型
-  strtype:{
-    type:String
+  strtype: {
+    type: String
+  },
+  //是否显示导出按钮
+  isShowExports:{
+    type:Boolean
   }
 })
 //注气参数详情数据
@@ -84,7 +89,7 @@ let showExport = ref(false)
 
 //图表配置项
 let echartOption = computed(() => {
-  return props.sysType == 'Cc' ? ccEchartOption : props.sysType == 'Zq' ? zqEchartOption : gkEchartOption
+  return props.sysType == 'Cc' ? ccEchartOption : props.sysType == 'Zq' ? zqEchartOption : props.sysType == 'Cc-xg' ? ccxgEchartOption : gkEchartOption
 })
 
 //时间间隔切换
@@ -116,7 +121,7 @@ async function getHistoryData(skip) {
         }
       })
     }
-  } else if (props.sysType == 'Cc') {
+  } else if (props.sysType == 'Cc' || props.sysType == 'Cc-xg') {
     let res = await listdays({ pageNo: 1, pageSize: 1000, strtype: 'pump', ttime_begin: searchData.startTime, ttime_end: searchData.endTime, skip: skip })
     console.log(res, '抽采数据')
     if (res.datalist.records.length) {
@@ -129,6 +134,9 @@ async function getHistoryData(skip) {
           xData: res.xlist,
           yData: res.datalist.records.filter(fl => fl.gdevicetype == el).map(dl => dl.readData['mixStdInstant']),
           yData1: res.datalist.records.filter(fl => fl.gdevicetype == el).map(dl => dl.readData['negativePressure']),
+          ext_rate_percent: res.datalist.records.filter(fl => fl.gdevicetype == el).map(dl => dl.readData['ext_rate_percent']),
+          residual_gas_content_m3_t: res.datalist.records.filter(fl => fl.gdevicetype == el).map(dl => dl.readData['residual_gas_content_m3_t']),
+          gas_drop_rate_m3_t_mon: res.datalist.records.filter(fl => fl.gdevicetype == el).map(dl => dl.readData['gas_drop_rate_m3_t_mon']),
         }
       })
       console.log(listData.value, 'listData.value')
@@ -180,7 +188,7 @@ watch(() => props.isShowExport, (newV, oldV) => {
   --image-inject_curve_bg: url('@/assets/images/gasInjection/9-3.png');
   --image-inject_curve_bg1: url('@/assets/images/gasInjection/9-4.png');
   width: 100%;
-  height: 700px;
+  min-height: 400px;
   padding: 15px 20px;
   box-sizing: border-box;
 
@@ -212,6 +220,14 @@ watch(() => props.isShowExport, (newV, oldV) => {
     background: var(--image-inject_curve_bg1) no-repeat;
     background-size: 100% 100%;
   }
+  .curve-content-item-xg{
+    position: relative;
+    width: 420px;
+    height: 230px;
+    margin: 8px;
+    background: var(--image-inject_curve_bg1) no-repeat;
+    background-size: 100% 100%;
+  }
 
   .content-item-title {
     position: absolute;

src/views/vent/home/configurable/components/gasInject/echartLineDate.vue

@@ -105,13 +105,7 @@ function getFormat() {
     ecahrtDatas.yData = ["200", "500", "120", "650", "300", "600", "500", "120", "650",]
     ecahrtDatas.yData1 = ["400", "600", "220", "850", "500", "400", "600", "220", "850",]
     ecahrtDatas.yData2 = ["700", "300", "420", "650", "800", "600", "300", "420", "650",]
-  } else {
-    //  ecahrtDatas.xData = ['3.26', '3.27', '3.28', '3.29', '3.30', '3.31']
-    //  ecahrtDatas.yData = ["200", "500", "120", "650", "300", "600", "500", "120", "650",]
-    // ecahrtDatas.yData1 = ["400", "600", "220", "850", "500", "400", "600", "220", "850",]
-    // ecahrtDatas.yData2 = ["700", "300", "420", "650", "800", "600", "300", "420", "650",]
-
-  }
+  } 
   getOption()
 }
 

src/views/vent/home/configurable/components/gasInject/environHistoryExport.vue

@@ -12,7 +12,7 @@
         <div class="search-item">
           <span> 间隔时间:</span>
           <a-select ref="select" v-model:value="skip" style="width: 240px">
-            <a-select-option v-for="(item, index) in optionList" :key="item.label" :value="item.value">{{ item.label
+            <a-select-option v-for="(item, index) in timeOption" :key="item.label" :value="item.value">{{ item.label
             }}</a-select-option>
           </a-select>
         </div>
@@ -42,6 +42,7 @@
 import { onMounted, reactive, ref } from 'vue'
 import { SvgIcon } from '/@/components/Icon';
 import { listdays } from './gasInject.api'
+import {timeOption} from './gasInject.data'
 import dayjs from 'dayjs';
 
 let props = defineProps({
@@ -66,45 +67,7 @@ let searchData = reactive({
   endTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
 })
 let skip = ref('9')
-let optionList = ref<any[]>([
-  {
-    label: '1秒',
-    value: '1',
-  },
-  {
-    label: '5秒',
-    value: '2',
-  },
-  {
-    label: '10秒',
-    value: '3',
-  },
-  {
-    label: '30秒',
-    value: '4',
-  },
-  {
-    label: '1分钟',
-    value: '5',
-  },
-  {
-    label: '10分钟',
-    value: '6',
-  },
-  {
-    label: '30分钟',
-    value: '7',
-  },
-  {
-    label: '1小时',
-    value: '8',
-  },
-  {
-    label: '1天',
-    value: '9',
-  },
 
-])
 let dataSource = ref<any[]>([])
 //分页参数配置
 let pagination = reactive({
@@ -130,6 +93,13 @@ function getSearch() {
 async function getTbleData() {
   let res = await listdays({ ttime_begin: searchData.startTime, ttime_end: searchData.endTime, skip: skip.value, gdeviceids: props.deviceId, pageNo: pagination.current, pageSize: pagination.pageSize, strtype: props.strtype })
   console.log(res, '环境监测')
+  dataSource.value=res.datalist.records.map(el=>{
+    return {
+      ...el,
+      ...el.readData
+    }
+  }) || []
+  pagination.total=res.datalist.total
 }
 //导出历史数据
 function handleHisExport() { }

src/views/vent/home/configurable/components/gasInject/environmentDetailTable.vue

@@ -2,25 +2,25 @@
   <div class="environment-detail-table">
     <a-tabs v-model:activeKey="activeKey" @change="changeTab">
       <a-tab-pane key="1" tab="氧气传感器">
-        <environHistoryExport :isShowIcon="true" :tableColumn="columnZy" :deviceId="deviceId" :strtype="strtype"></environHistoryExport>
+        <environHistoryExport :isShowIcon="true" :tableColumn="columnO2" :deviceId="deviceId" :strtype="'modelsensor_o2'"></environHistoryExport>
       </a-tab-pane>
       <a-tab-pane key="2" tab="甲烷传感器">
-        <environHistoryExport :isShowIcon="true" :tableColumn="columnCc" :deviceId="deviceId" :strtype="strtype"></environHistoryExport>
+        <environHistoryExport :isShowIcon="true" :tableColumn="columnCh4" :deviceId="deviceId" :strtype="'modelsensor_ch4'"></environHistoryExport>
       </a-tab-pane>
       <a-tab-pane key="3" tab="温度传感器">
-        <environHistoryExport :isShowIcon="true" :tableColumn="columnCc" :deviceId="deviceId" :strtype="strtype"></environHistoryExport>
+        <environHistoryExport :isShowIcon="true" :tableColumn="columnTemp" :deviceId="deviceId" :strtype="'modelsensor_temperature'"></environHistoryExport>
       </a-tab-pane>
       <a-tab-pane key="4" tab="CO传感器">
-        <environHistoryExport :isShowIcon="true" :tableColumn="columnCc" :deviceId="deviceId" :strtype="strtype"></environHistoryExport>
+        <environHistoryExport :isShowIcon="true" :tableColumn="columnCO" :deviceId="deviceId" :strtype="'modelsensor_co'"></environHistoryExport>
       </a-tab-pane>
     </a-tabs>
   </div>
 </template>
 
 <script setup lang='ts'>
-import { ref, onMounted, watchEffect, watch, onBeforeMount } from 'vue'
+import { ref, onMounted,  onBeforeMount } from 'vue'
 import environHistoryExport from './environHistoryExport.vue'
-import { columnZy, columnCc } from './gasInject.data'
+import { columnO2,columnCh4,columnTemp,columnCO } from './gasInject.data'
 
 
 let props = defineProps({
@@ -65,8 +65,8 @@ onBeforeMount(() => {
 <style lang="less" scoped>
 .environment-detail-table {
   width: 100%;
-  height: 100%;
-  padding: 20px;
+ min-height: 400px;
+  padding: 15px 20px;
   box-sizing: border-box;
 }
 </style>

src/views/vent/home/configurable/components/gasInject/gasInject.api.ts

@@ -10,6 +10,8 @@ enum Api {
   devicecontrol = '/safety/ventanalyMonitorData/devicecontrol',
   listdays = '/safety/ventanalyMonitorData/listdays',
   historydata = '/safety/ventanalyMonitorData/export/historydata',
+  getAlarmLogList='/monitor/groupCompany/getAlarmLogList'
+   
 }
 
 
@@ -40,6 +42,10 @@ export const listdays = (params) => defHttp.get({ url: Api.listdays, params }, {
  * 导出详情历史
  * @param params
  */
-export const historydata = (params) => defHttp.get({ url: Api.historydata, params }, { joinParamsToUrl: true });
-
 
+export const historydata = (params) => defHttp.get({ url: Api.historydata, params, responseType: 'blob' });
+/**
+* 设备预警历史
+* @param params
+*/
+export const getAlarmLogList = (params) => defHttp.post({ url: Api.getAlarmLogList, params },);

src/views/vent/home/configurable/components/gasInject/systemDetailTable.vue

@@ -1,29 +1,59 @@
 <template>
   <div class="tab-detail-table">
-    <a-tabs v-model:activeKey="activeKey">
+    <a-tabs v-model:activeKey="activeKey" @change="tabChange">
       <a-tab-pane key="1" tab="增压装备运行状态历史数据">
-        <zqHistoryExport :isShowIcon="true" :tableColumn="columnZy"></zqHistoryExport>
+        <commonTable :tableColumn="columnRunstatus" :tableD="tableDatas"></commonTable>
       </a-tab-pane>
       <a-tab-pane key="2" tab="抽采系统运行状态历史数据">
-        <zqHistoryExport :isShowIcon="true" :tableColumn="columnCc"></zqHistoryExport>
+        <commonTable :tableColumn="columnRunstatus" :tableD="tableDatas"></commonTable>
       </a-tab-pane>
     </a-tabs>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
-import zqHistoryExport from './zqHistoryExport.vue'
-import {columnZy,columnCc} from './gasInject.data'
+import { reactive, ref, watch } from 'vue'
+import commonTable from './commonTable.vue'
+import { columnRunstatus } from './gasInject.data'
+
+let props = defineProps({
+  tableData: {
+    type: Object as any
+  }
+})
 
 let activeKey = ref('1')
+let readData = reactive({}) as any
+let tableDatas = ref<any[]>([])
+
+
+//tab选项切换
+function tabChange(val) {
+  activeKey.value = val
+  switch (val) {
+    case '1':
+      tableDatas.value = readData.devices[0].segments || []
+      break;
+    case '2':
+      tableDatas.value = readData.devices[1].segments || []
+      break;
+  }
+}
+
+watch(() => props.tableData, (newV, oldV) => {
+  if (newV) {
+    readData = Object.assign({}, newV)
+    tableDatas.value = activeKey.value == '1' ?  readData.devices[0].segments : readData.devices[1].segments
+  }
+}, { immediate: true })
+
 </script>
 
 <style lang="less" scoped>
 .tab-detail-table {
   width: 100%;
   height: 100%;
-  padding:20px;
+  padding: 20px;
   box-sizing: border-box;
 }
 </style>

src/views/vent/home/configurable/components/gasInject/warnDetailTable.vue

@@ -1,25 +1,53 @@
 <template>
   <div class="warn-detail-table">
-    <a-tabs v-model:activeKey="activeKey">
-      <a-tab-pane key="1" tab="装备运行异常历史数据">
-        <zqHistoryExport :isShowIcon="true" :tableColumn="columnZy"></zqHistoryExport>
+    <a-tabs v-model:activeKey="activeKey" @change="tabChange">
+      <a-tab-pane key="1" tab="设备预警历史">
+        <commonTable :tableColumn="columnDeviceWarn" :tableD="tableData"></commonTable>
       </a-tab-pane>
-      <a-tab-pane key="2" tab="环境监测异常历史数据">
-        <zqHistoryExport :isShowIcon="true" :tableColumn="columnCc"></zqHistoryExport>
+      <!-- <a-tab-pane key="2" tab="环境监测异常历史数据">
+        <zqHistoryExport :isShowIcon="true" :tableColumn="columnRunstatus"></zqHistoryExport>
       </a-tab-pane>
       <a-tab-pane key="3" tab="信号传输异常历史数据">
-        <zqHistoryExport :isShowIcon="true" :tableColumn="columnCc"></zqHistoryExport>
-      </a-tab-pane>
+        <zqHistoryExport :isShowIcon="true" :tableColumn="columnRunstatus"></zqHistoryExport>
+      </a-tab-pane> -->
     </a-tabs>
   </div>
 </template>
 
 <script setup lang='ts'>
-import { ref } from 'vue'
-import zqHistoryExport from './zqHistoryExport.vue'
-import { columnZy, columnCc } from './gasInject.data'
+import { onMounted, ref } from 'vue'
+import commonTable from './commonTable.vue'
+import { columnDeviceWarn } from './gasInject.data'
+import { getAlarmLogList } from './gasInject.api'
+
+let props = defineProps({
+
+})
 
 let activeKey = ref('1')
+let tableData = ref<any[]>([])
+
+//tab选项切换
+function tabChange(val) {
+  activeKey.value = val
+  switch (val) {
+    case '1':
+      break;
+    case '2':
+      break;
+  }
+}
+
+//获取列表数据
+async function getData() {
+  let res = await getAlarmLogList({ deviceKind: null, isOk: false, pageNo: 1, pageSize: 15 })
+  console.log(res, '预警历史')
+  tableData.value = res.records || []
+}
+
+onMounted(() => {
+  getData()
+})
 </script>
 
 <style lang="less" scoped>

src/views/vent/home/configurable/components/gasInject/zqHistoryExport.vue

@@ -12,7 +12,7 @@
             style="margin-left: 10px;">查询</a-button>
         </div>
       </div>
-      <div class="nav-btn" @click="handleHisExport">
+      <div v-if="isShowExports" class="nav-btn" @click="handleHisExport">
         <div class="nav-text">
           <SvgIcon class="icon-style" size="18" name="gas-export" />
           <span>数据导出</span>
@@ -20,7 +20,7 @@
       </div>
     </div>
     <div class="main-content">
-      <a-table size="small" :dataSource="dataSource" :columns="tableColumn" :scroll="{ y: 455 }"
+      <a-table size="small" :dataSource="dataSource" :columns="tableColumn" :scroll="{ y: 465 }"
         :pagination="pagination" @change="changePage">
         <template #action="{ record }">
           <!-- <a class="table-action-link" @click="handleSpDetail(record)">审批详情</a> -->
@@ -33,8 +33,9 @@
 <script setup lang="ts">
 import { reactive, ref, onMounted } from 'vue'
 import { SvgIcon } from '/@/components/Icon';
-import { listdays, getList, } from './gasInject.api'
+import { listdays, getList, historydata } from './gasInject.api'
 import dayjs from 'dayjs';
+import { message } from 'ant-design-vue';
 
 let props = defineProps({
   //是否显示返回按钮
@@ -55,6 +56,11 @@ let props = defineProps({
   //设备类型
   strtype: {
     type: String
+  },
+  //是否显示导出按钮
+  isShowExports: {
+    type: Boolean,
+    default: true
   }
 })
 
@@ -117,8 +123,31 @@ function changePage(val) {
 }
 //导出历史数据
 async function handleHisExport() {
-  // let res = await historydataExport({ ttime_begin: searchData.startTime, ttime_end: searchData.endTime, skip: '8', gdeviceids: props.deviceId, pageNo: pagination.current, pageSize: pagination.pageSize, strtype: props.strtype })
-  // console.log(res, '导出')
+  let res = await historydata({ ttime_begin: searchData.startTime, ttime_end: searchData.endTime, skip: '8', gdeviceids: props.deviceId, pageNo: pagination.current, pageSize: pagination.pageSize, strtype: props.strtype })
+  console.log(res, '导出---')
+  let filename = `${new Date().getTime()}.xlsx`;
+  downFilePublic(res, filename);
+  message.success('导出成功')
+}
+// 下载公用方法
+function downFilePublic(content, fileName) {
+  const blob = new Blob([content], { type: 'application/xlsx;charset=UTF-8' }); // 构造一个blob对象来处理数据
+  // 对于<a>标签，只有 Firefox 和 Chrome（内核） 支持 download 属性
+  // IE10以上支持blob但是依然不支持download
+  if ('download' in document.createElement('a')) {
+    // 支持a标签download的浏览器
+    const link = document.createElement('a'); // 创建a标签
+    link.download = fileName; // a标签添加属性
+    link.style.display = 'none';
+    link.href = URL.createObjectURL(blob);
+    document.body.appendChild(link);
+    link.click(); // 执行下载
+    URL.revokeObjectURL(link.href); // 释放url
+    document.body.removeChild(link); // 释放标签
+  } else {
+    // 其他浏览器
+    navigator.msSaveBlob(blob, fileName);
+  }
 }
 
 
@@ -140,7 +169,7 @@ onMounted(() => {
   --image-inject_zq_monitor: url('@/assets/images/gasInjection/9-3.png');
   position: relative;
   width: 100%;
-  height: 100%;
+  min-height: 400px;
 
   .icon-style-back {
     position: absolute;

src/views/vent/home/configurable/components/gasInject/zqMonitorDetail.vue

@@ -1,62 +1,14 @@
 <template>
   <div class="zq-monitor">
-    <!-- <template v-if="!showExport">
-      <div class="nav-box">
-        <div class="nav-btn" @click="handleExport">
-          <div class="nav-text">
-            <SvgIcon class="icon-style" size="18" name="gas-export"></SvgIcon>
-            <span>历史数据详情</span>
-          </div>
-        </div>
-      </div>
-      <div class="main-content">
-        <div class="common-area">
-          <div class="area-item">
-            <zqDetailCard :dataIndex="1" :optionDetail="optionDetail" :zqDetailData="data.ZqsjDetail.first"></zqDetailCard>
-          </div>
-          <div class="area-item">
-            <zqDetailCard :dataIndex="2" :optionDetail="optionDetail" :zqDetailData="data.ZqsjDetail.second"></zqDetailCard>
-          </div>
-        </div>
-        <div class="center-area">
-          <div class="line-L">
-            <div class="line-L-1">
-              <div class="t-icon"></div>
-              <div class="t-icon1"></div>
-            </div>
-            <div class="line-L-2"></div>
-            <div class="t-icon2"></div>
-          </div>
-          <div class="center-content"></div>
-          <div class="line-R">
-            <div class="line-R-1">
-              <div class="t-icon-r"></div>
-              <div class="t-icon-r1"></div>
-            </div>
-            <div class="line-R-2"></div>
-            <div class="t-icon2-r"></div>
-          </div>
-        </div>
-        <div class="common-area">
-          <div class="area-item">
-            <zqDetailCard :dataIndex="3" :optionDetail="optionDetail" :zqDetailData="data.ZqsjDetail.third"></zqDetailCard>
-          </div>
-          <div class="area-item">
-            <zqDetailCard :dataIndex="4" :optionDetail="optionDetail" :zqDetailData="data.ZqsjDetail.fourth"></zqDetailCard>
-          </div>
-        </div>
-      </div>
-    </template> -->
-    <zqHistoryExport :tableColumn="tableColumn" :detailType="'operation'" :isShowIcon="isShowExport" :deviceId="deviceID"  :strtype="strtype"
-      @handleBack="handleBack">
+    <zqHistoryExport :tableColumn="tableColumn" :detailType="'operation'" :isShowIcon="isShowExport" :deviceId="deviceID"  :strtype="strtype">
     </zqHistoryExport>
   </div>
 </template>
 
 <script setup lang="ts">
   import { reactive, ref, watch } from 'vue';
-  import { SvgIcon } from '/@/components/Icon';
-  import zqDetailCard from './zqDetailCard.vue';
+  // import { SvgIcon } from '/@/components/Icon';
+  // import zqDetailCard from './zqDetailCard.vue';
   import zqHistoryExport from './zqHistoryExport.vue';
 
 let props = defineProps({
@@ -82,17 +34,6 @@ let props = defineProps({
   }
 })
 
-let showExport = ref(false)
-
-
-//历史数据返回至详情
-function handleBack() {
-  showExport.value = false
-}
-
-watch(() => props.isShowExport, (newV, oldV) => {
-  showExport.value = newV
-}, { immediate: true })
 </script>
 
 <style lang="less" scoped>
@@ -109,8 +50,8 @@ watch(() => props.isShowExport, (newV, oldV) => {
     --image-inject_zq_monitor: url('@/assets/images/gasInjection/9-3.png');
     --image-inject_zq_monitor1: url('@/assets/images/gasInjection/9-6.png');
     width: 100%;
-    height: 650px;
-    padding: 15px 30px;
+    min-height: 400px;
+    padding: 15px 25px;
     box-sizing: border-box;
 
     .nav-box {

src/views/vent/home/configurable/components/preset/gasChlChart.vue

@@ -1,18 +1,31 @@
 <template>
   <div class="gas-chl-chart">
     <div class="echart-box" v-for="(item, index) in echartOption" :key="index">
-      <div class="box-title">{{ item.title }}</div>
+      <div class="box-title">
+        <span>{{ item.title }}</span>
+        <span class="box-btn-detail" @click="handlerDetail(index)">详情</span>
+      </div>
       <div class="box-content">
         <echartLineDate :echartOption="item.option" :ecahrtData="echartData" />
       </div>
       <div class="box-foot"></div>
     </div>
+    <!-- 详情 -->
+    <a-modal v-model:visible="visibleDetail" width="1350px" :footer="null" :title="modalTitle" centered destroyOnClose
+      @cancel="handleCancel">
+      <div style="padding: 20px;">
+        <zqHistoryExport :tableColumn="tableColumn" detailType="history" :isShowIcon="true" :strtype="strtype">
+      </zqHistoryExport>
+      </div>
+    </a-modal>
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue'
 import echartLineDate from '../gasInject/echartLineDate.vue'
+import { columnCchl, columnNd, columnCcfy } from '../gasInject/gasInject.data'
+import zqHistoryExport from '../gasInject/zqHistoryExport.vue'
 
 let props = defineProps({
   echartOption: {
@@ -23,6 +36,34 @@ let props = defineProps({
   }
 })
 
+let visibleDetail = ref(false)
+let modalTitle = ref('')
+let tableColumn = ref<any>(null)
+let strtype = ref('pump')
+
+//点击查看详情
+function handlerDetail(index) {
+  visibleDetail.value = true
+  switch (index) {
+    case 0:
+      modalTitle.value = '抽采混量'
+      tableColumn.value = columnCchl
+      break;
+    case 1:
+      modalTitle.value = '抽采浓度'
+      tableColumn.value = columnNd
+      break;
+    case 2:
+      modalTitle.value = '抽采负压'
+      tableColumn.value = columnCcfy
+      break;
+  }
+}
+//关闭弹窗
+function handleCancel() {
+
+}
+
 </script>
 
 <style lang="less" scoped>
@@ -52,14 +93,20 @@ let props = defineProps({
     height: 100%;
 
     .box-title {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
       width: 100%;
       height: 28px;
-      line-height: 28px;
-      padding-left: 15px;
+      padding: 0px 15px;
       background: var(--image-gas_board_bg1) no-repeat;
       background-size: 100% 100%;
     }
 
+    .box-btn-detail {
+      color: #2cb6ff;
+    }
+
     .box-content {
       width: 100%;
       height: calc(100% - 45px);

src/views/vent/home/configurable/components/preset/gasWarnChart.vue

@@ -6,32 +6,21 @@
 </template>
 
 <script setup lang="ts">
-import { nextTick, onMounted, ref } from 'vue'
+import { nextTick, onMounted, ref, watch } from 'vue'
 import { SvgIcon } from '/@/components/Icon';
 import * as echarts from 'echarts';
 
 let props = defineProps({
   option: {
     type: Object as any
+  },
+  echartData: {
+    type: Array as any
   }
 })
 let gasWarnChart = ref(null)
-
-const data = [
-  { name: "消纳场-01", value: 900 },
-  { name: "消纳场-02", value: 900 },
-  { name: "消纳场-03", value: 650 },
-  { name: "消纳场-04", value: 450 },
-];
-
-const maxCircleData = data.map((item, index) => {
-  return {
-    ...item,
-    itemStyle: {
-      color: props.option.colorOn[index],
-    },
-  };
-});
+let echartD = ref<any[]>([])
+let maxCircleData = ref<any[]>([])
 
 function getOption() {
   nextTick(() => {
@@ -49,7 +38,7 @@ function getOption() {
           emphasis: {
             disabled: true,
           },
-          data: maxCircleData,
+          data: maxCircleData.value,
         },
         {
           type: "pie",
@@ -74,7 +63,7 @@ function getOption() {
           //   length2: 6,
           //   minTurnAngle: 30,
           // },
-          data: data,
+          data: echartD.value,
         },
       ],
     }
@@ -85,12 +74,20 @@ function getOption() {
   });
 }
 
-onMounted(() => {
-  getOption()
-})
-
-
-
+watch(() => props.echartData, (newV, oldV) => {
+  if (newV) {
+    echartD.value = newV
+    maxCircleData.value = newV.map((item, index) => {
+      return {
+        ...item,
+        itemStyle: {
+          color: props.option.colorOn[index],
+        },
+      };
+    });
+    getOption()
+  }
+}, { immediate: true })
 </script>
 
 <style lang="less" scoped>

src/views/vent/home/configurable/components/preset/gasWarnList.vue

@@ -6,26 +6,31 @@
           <div class="item-icon"></div>
           <div class="item-text">{{ item.label }}</div>
         </div>
-        <div class="box-item-value">{{ item.value }}</div>
+        <div class="box-item-value">{{ listD[item.value] }}</div>
       </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { reactive, ref, watch } from 'vue'
 
 let props = defineProps({
   option: {
     type: Array as any,
+  },
+  listData: {
+    type: Object as any
   }
 })
-// let listData = ref<any[]>([
-//   { label: '设备运行异常', value: '50' },
-//   { label: '环境监测异常', value: '30' },
-//   { label: '信号传输异常', value: '10' },
-//   { label: '驱替数据异常', value: '20' },
-// ])
+
+let listD = reactive({})
+
+watch(() => props.listData, (newV, oldV) => {
+  if (newV) {
+    listD = Object.assign({}, newV)
+  }
+}, { immediate: true })
 </script>
 
 <style lang="less" scoped>

src/views/vent/home/configurable/components/preset/gasZyChart.vue

@@ -5,46 +5,30 @@
 </template>
 
 <script setup lang="ts">
-import { nextTick, onMounted, ref } from 'vue'
+import { nextTick, onMounted, ref, watch } from 'vue'
 import * as echarts from 'echarts';
 
+let props = defineProps({
+  data: {
+    type: Object as any
+  }
+})
 let gasZyChart = ref(null)
 
-let series = ref<any[]>(['增压装备运行状态', '抽采系统运行状态',]);
-let startTimeAll = ref(new Date('2021-03-01 00:00:00').getTime());
-let endTimeAll = ref(new Date('2021-03-04 00:00:00').getTime());
-let categories = ref<any[]>(['A', 'C']);
+//选项标签
+let series = ref<any[]>([]);
+//x轴开始时间
+let startTimeAll = ref(0);
+//x轴结束时间
+let endTimeAll = ref(0);
+//1为运行状态，0为停止状态
+let categories = ref<any[]>([1, 0]);
 let seriesValue = ref<any[]>([]);
-let jsonData = ref<any[]>([
-  {
-    category: 'A',
-    series: '增压装备运行状态',
-    startTime: '2021-03-01 08:00:00',
-    endTime: '2021-03-01 18:00:00',
-  },
-  {
-    category: 'A',
-    series: '抽采系统运行状态',
-    startTime: '2021-03-03 10:00:00',
-    endTime: '2021-03-03 18:00:00',
-  },
-  {
-    category: 'C',
-    series: '增压装备运行状态',
-    startTime: '2021-03-01 08:00:00',
-    endTime: '2021-03-01 16:00:00',
-  },
-  {
-    category: 'C',
-    series: '抽采系统运行状态',
-    startTime: '2021-03-02 04:00:00',
-    endTime: '2021-03-02 19:00:00',
-  },
-])
+let jsonData = ref<any[]>([])
 
-let colorList=[
-  {color:'rgba(255, 158, 30)',color1:'rgba(255, 247, 194)'},
-  {color:'rgba(14, 98, 255)',color1:'rgba(3, 223, 252)'},
+let colorList = [
+  { color: 'rgba(255, 158, 30)', color1: 'rgba(255, 247, 194)' },
+  { color: 'rgba(14, 98, 255)', color1: 'rgba(3, 223, 252)' },
 ]
 
 function getXDate(time) {
@@ -57,61 +41,7 @@ function getXDate(time) {
   return year + '-' + month + '-' + day + ' ' + hour + ':' + minutes + ':' + seconds;
 }
 
-echarts.util.each(categories.value, function (category, index: number) {
-  let cgory = categories.value[index];
-  series.value.forEach((itemS, indexS) => {
-    jsonData.value.forEach((itemj, indexj) => {
-      if (itemj.category == cgory) {
-        let data: any[] = [];
-        let startTime = new Date(itemj.startTime).getTime();
-        let endTime = new Date(itemj.endTime).getTime();
-        let duration = endTime - startTime;
-        if (itemj.series == itemS) {
-          data.push({
-            name: itemj.series,
-            value: [index, startTime, endTime, duration],
-            itemStyle: {
-              normal: {
-                //color: '#7b9ce1',
-              },
-            },
-          });
-          seriesValue.value.push({
-            name: itemS,
-            type: 'custom',
-            renderItem: renderItem,
-            itemStyle: {
-              normal: {
-                color:new echarts.graphic.LinearGradient(
-                  0,
-                  0,
-                  1,
-                  0,
-                  [
-                    {
-                      offset: 0,
-                      color: colorList[indexS].color,
-                    },
-                    {
-                      offset: 1,
-                      color:colorList[indexS].color1,
-                    },
-                  ],
-                  false
-                ),
-              },
-            },
-            encode: {
-              x: [1, 2],
-              y: 0,
-            },
-            data: data,
-          });
-        }
-      }
-    });
-  });
-});
+
 
 function renderItem(params, api) {
   let categoryIndex = api.value(0);
@@ -160,8 +90,8 @@ function getOption() {
       },
       grid: {
         top: "12%",
-        left: "6%",
-        right: "6%",
+        left: "10%",
+        right: "10%",
         bottom: "3%",
         containLabel: true,
       },
@@ -177,7 +107,7 @@ function getOption() {
         itemGap: 2,
         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: ['增压装备运行状态', '抽采系统运行状态',],
+        data: series.value,
       },
 
       xAxis: [
@@ -244,9 +174,89 @@ function getOption() {
   });
 }
 
-onMounted(() => {
-  getOption()
-})
+
+watch(() => props.data, (newV, oldV) => {
+  if (newV) {
+    console.log(newV, '运行状态')
+    startTimeAll.value = new Date(newV.startTime).getTime()
+    endTimeAll.value = new Date(newV.endTime).getTime()
+    series.value = newV.devices.map(el => el.name)
+    let yData = newV.devices[0].segments.map(el => {
+      return {
+        series: newV.devices[0].name,
+        category: el.status,
+        startTime: el.start,
+        endTime: el.end,
+      }
+    })
+    let yData1 = newV.devices[1].segments.map(el => {
+      return {
+        series: newV.devices[1].name,
+        category: el.status,
+        startTime: el.start,
+        endTime: el.end,
+      }
+    })
+    jsonData.value = [...yData, ...yData1]
+
+    echarts.util.each(categories.value, function (category, index: number) {
+      let cgory = categories.value[index];
+      series.value.forEach((itemS, indexS) => {
+        jsonData.value.forEach((itemj, indexj) => {
+          if (itemj.category == cgory) {
+            let data: any[] = [];
+            let startTime = new Date(itemj.startTime).getTime();
+            let endTime = new Date(itemj.endTime).getTime();
+            let duration = endTime - startTime;
+            if (itemj.series == itemS) {
+              data.push({
+                name: itemj.series,
+                value: [index, startTime, endTime, duration],
+                itemStyle: {
+                  normal: {
+                    //color: '#7b9ce1',
+                  },
+                },
+              });
+              seriesValue.value.push({
+                name: itemS,
+                type: 'custom',
+                renderItem: renderItem,
+                itemStyle: {
+                  normal: {
+                    color: new echarts.graphic.LinearGradient(
+                      0,
+                      0,
+                      1,
+                      0,
+                      [
+                        {
+                          offset: 0,
+                          color: colorList[indexS].color,
+                        },
+                        {
+                          offset: 1,
+                          color: colorList[indexS].color1,
+                        },
+                      ],
+                      false
+                    ),
+                  },
+                },
+                encode: {
+                  x: [1, 2],
+                  y: 0,
+                },
+                data: data,
+              });
+            }
+          }
+        });
+      });
+    });
+    getOption()
+  }
+}, { immediate: true })
 
 </script>
 

src/views/vent/home/configurable/configurable.api.ts

@@ -19,13 +19,41 @@ enum Api {
   system = '/ventanaly-device/monitor/device',
   getSystem = '/monitor/deviceForZhuQi',
   listdays = '/safety/ventanalyMonitorData/listdays',
+  todayDeviceRunStatus = '/safety/ventanalyMonitorData/todayDeviceRunStatus',
+  summary = '/safety/ventanalyAlarmStatistic/summary',
 }
 
-
+//注气驱替相关数据定义
+let count = ref(0)
+//抽采参数
+let ccEchart = reactive({
+  xData: [],
+  yData: [],
+  yData1: []
+}) as any
+//绘流管抽采数据
+let hlgEchart = reactive({
+  xData: [],
+  yDataHl: [],
+  yDataHl1: [],
+  yDataHl2: [],
+  yDataHl3: [],
+  yDataHl4: [],
+  yDataNd: [],
+  yDataNd1: [],
+  yDataNd2: [],
+  yDataNd3: [],
+  yDataNd4: [],
+  yDataFy: [],
+  yDataFy1: [],
+  yDataFy2: [],
+  yDataFy3: [],
+  yDataFy4: [],
+}) as any
 // 搞这个缓存是由于：目前代码上的设计是多个模块发出多次请求，每个模块自己负责消费前者的响应。
 // 这会导致相同的请求被同时发送多次。
 const cache = new Map<string, Promise<any>>();
-let count = ref(0)
+
 /**
  * 列表接口，5.5专用，和6.0的getHomeData基本一致
  * @param params
@@ -637,36 +665,25 @@ export const getElectroData = (params) => {
   });
 };
 
-//获取抽采系统数据
-export const sysCc = (params) => {
-  const key = `${Api.getSystem}?${JSON.stringify(params)}`;
-  if (!cache.has(key)) {
-    cache.set(
-      key,
-      defHttp.post({ url: Api.getSystem, params }).finally(() => {
-        cache.delete(key);
-      })
-    );
-  }
-  return (cache.get(key) as Promise<any>).then((res) => {
-    return res;
-  });
-};
-//获取抽采系统数据
-function getCcSystem() {
-  return new Promise(async (resolve) => {
-    const result = await sysCc({ devicetype: 'sys', systemID: '2036610034808954882' });
-    resolve(result);
-  });
-}
+
 //获取注气历史数据
 export const sysZq = (params) => defHttp.get({ url: Api.listdays, params });
 //获取注气历史数据
-function getZqSystem(param) {
-  return new Promise(async (resolve) => {
-    const result = await sysZq(param);
-    resolve(result);
-  });
+async function getZqSystem(param) {
+  const result = await sysZq(param);
+  return result
+}
+//获取系统运行状态数据
+export const todayDeviceRunStatus = (params) => defHttp.post({ url: Api.todayDeviceRunStatus, params });
+async function getTodayDeviceRunStatus(param) {
+  const result = await todayDeviceRunStatus(param);
+  return result
+}
+//获取异常提醒数据
+export const summary = (params) => defHttp.get({ url: Api.summary, params });
+async function getSummary(param) {
+  const result = await summary(param);
+  return result
 }
 //获取注气驱替数据
 export const getSystemApi = (params) => {
@@ -737,7 +754,6 @@ export const getSystemApi = (params) => {
     }
 
 
-
     //抽采数据
     //let pumpData = await getCcSystem();
     res.pumpData = res.msgTxt[res.msgTxt.length - 1].empty_device[0].datalist[0]
@@ -766,81 +782,61 @@ export const getSystemApi = (params) => {
     }
 
     count.value += 1
-    res.ccEchart = {
-      xData: [],
-      yData: [],
-      yData1: []
-    }
-    //绘流管抽采数据
-    res.hlgEchart = {
-      xData: [],
-      yDataHl: [],
-      yDataHl1: [],
-      yDataHl2: [],
-      yDataHl3: [],
-      yDataHl4: [],
-      yDataNd: [],
-      yDataNd1: [],
-      yDataNd2: [],
-      yDataNd3: [],
-      yDataNd4: [],
-      yDataFy: [],
-      yDataFy1: [],
-      yDataFy2: [],
-      yDataFy3: [],
-      yDataFy4: [],
-    }
     let hlg1 = res.dyCcData[0].datalist[0].readData
     let hlg2 = res.dyCcData[1].datalist[0].readData
     let hlg3 = res.dyCcData[2].datalist[0].readData
     let hlg4 = res.dyCcData[3].datalist[0].readData
     let hlg5 = res.dyCcData[4].datalist[0].readData
-    if (count.value <= 10) {
-      Array.from({ length: count.value }).forEach(el => {
-        res.ccEchart.xData.push(res.pumpData.readTime)
-        res.ccEchart.yData.push(res.pumpData.readData.mixStdInstant)
-        res.ccEchart.yData1.push(res.pumpData.readData.gasConcentration)
-
-        res.hlgEchart.xData.push(res.pumpData.readTime)
-        res.hlgEchart.yDataHl.push(hlg1.mixStdInstant)
-        res.hlgEchart.yDataHl1.push(hlg2.mixStdInstant)
-        res.hlgEchart.yDataHl2.push(hlg3.mixStdInstant)
-        res.hlgEchart.yDataHl3.push(hlg4.mixStdInstant)
-        res.hlgEchart.yDataHl4.push(hlg5.mixStdInstant)
-        res.hlgEchart.yDataNd.push(hlg1.gasConcentration)
-        res.hlgEchart.yDataNd1.push(hlg2.gasConcentration)
-        res.hlgEchart.yDataNd2.push(hlg3.gasConcentration)
-        res.hlgEchart.yDataNd3.push(hlg4.gasConcentration)
-        res.hlgEchart.yDataNd4.push(hlg5.gasConcentration)
-        res.hlgEchart.yDataFy.push(hlg1.negativePressure)
-        res.hlgEchart.yDataFy1.push(hlg2.negativePressure)
-        res.hlgEchart.yDataFy2.push(hlg3.negativePressure)
-        res.hlgEchart.yDataFy3.push(hlg4.negativePressure)
-        res.hlgEchart.yDataFy4.push(hlg5.negativePressure)
-      })
+    if (count.value <= 11) {
+      ccEchart.xData.push(res.pumpData.readTime)
+      ccEchart.yData.push(res.pumpData.readData.mixStdInstant)
+      ccEchart.yData1.push(res.pumpData.readData.gasConcentration)
+
+      hlgEchart.xData.push(res.pumpData.readTime)
+      hlgEchart.yDataHl.push(hlg1.mixStdInstant)
+      hlgEchart.yDataHl1.push(hlg2.mixStdInstant)
+      hlgEchart.yDataHl2.push(hlg3.mixStdInstant)
+      hlgEchart.yDataHl3.push(hlg4.mixStdInstant)
+      hlgEchart.yDataHl4.push(hlg5.mixStdInstant)
+      hlgEchart.yDataNd.push(hlg1.gasConcentration)
+      hlgEchart.yDataNd1.push(hlg2.gasConcentration)
+      hlgEchart.yDataNd2.push(hlg3.gasConcentration)
+      hlgEchart.yDataNd3.push(hlg4.gasConcentration)
+      hlgEchart.yDataNd4.push(hlg5.gasConcentration)
+      hlgEchart.yDataFy.push(hlg1.negativePressure)
+      hlgEchart.yDataFy1.push(hlg2.negativePressure)
+      hlgEchart.yDataFy2.push(hlg3.negativePressure)
+      hlgEchart.yDataFy3.push(hlg4.negativePressure)
+      hlgEchart.yDataFy4.push(hlg5.negativePressure)
+
     } else {
-      res.ccEchart.xData.unshift()
-      res.ccEchart.yData.unshift()
-      res.ccEchart.yData1.unshift()
-
-      res.hlgEchart.xData.unshift()
-      res.hlgEchart.yDataHl.unshift()
-      res.hlgEchart.yDataHl1.unshift()
-      res.hlgEchart.yDataHl2.unshift()
-      res.hlgEchart.yDataHl3.unshift()
-      res.hlgEchart.yDataHl4.unshift()
-      res.hlgEchart.yDataNd.unshift()
-      res.hlgEchart.yDataNd1.unshift()
-      res.hlgEchart.yDataNd2.unshift()
-      res.hlgEchart.yDataNd3.unshift()
-      res.hlgEchart.yDataNd4.unshift()
-      res.hlgEchart.yDataFy.unshift()
-      res.hlgEchart.yDataFy1.unshift()
-      res.hlgEchart.yDataFy2.unshift()
-      res.hlgEchart.yDataFy3.unshift()
-      res.hlgEchart.yDataFy4.unshift()
-      count.value--
+      count.value = count.value - 2
+      console.log(count.value, ' count.value')
+      console.log(ccEchart.xData, 'res.ccEchart.xData')
+      console.log(hlgEchart.xData, 'res.hlgEchart.xData')
+      ccEchart.xData.shift()
+      ccEchart.yData.shift()
+      ccEchart.yData1.shift()
+      hlgEchart.xData.shift()
+      hlgEchart.yDataHl.shift()
+      hlgEchart.yDataHl1.shift()
+      hlgEchart.yDataHl2.shift()
+      hlgEchart.yDataHl3.shift()
+      hlgEchart.yDataHl4.shift()
+      hlgEchart.yDataNd.shift()
+      hlgEchart.yDataNd1.shift()
+      hlgEchart.yDataNd2.shift()
+      hlgEchart.yDataNd3.shift()
+      hlgEchart.yDataNd4.shift()
+      hlgEchart.yDataFy.shift()
+      hlgEchart.yDataFy1.shift()
+      hlgEchart.yDataFy2.shift()
+      hlgEchart.yDataFy3.shift()
+      hlgEchart.yDataFy4.shift()
+
     }
+    res.hlgEchart = hlgEchart
+    res.ccEchart = ccEchart
 
     //注气驱替促抽效果评价
     res.ccPjData = {
@@ -849,6 +845,24 @@ export const getSystemApi = (params) => {
       gas_drop_rate_m3_t_mon: res.pumpData.readData.gas_drop_rate_m3_t_mon || '-',
       inject_extract_ratio: res.pumpData.readData.inject_extract_ratio || '-',
     }
+    //系统运行状态
+    let systemRun = await getTodayDeviceRunStatus({ "injectionDeviceId": res.deviceId, "injectionValueCode": "runStatus", "pumpDeviceId": res.pumpDeviceId, "pumpStatusCode": "runStatus" })
+    res.systemRunData = systemRun
+    //异常提醒数据
+    let SummaryD = await getSummary({})
+    console.log(SummaryD, 'SummaryD')
+    res.warnechartD = [
+      { name: "环境监测异常", value: SummaryD.alarmTypeStats[0].count },
+      { name: "信号传输异常", value: SummaryD.alarmTypeStats[1].count },
+      { name: "装备运行异常", value: SummaryD.alarmTypeStats[2].count },
+      { name: "驱替数据异常", value: 0 },
+    ]
+    res.warnListD = {
+      deviceWarn: SummaryD.alarmTypeStats[2].count,
+      hjWarn: SummaryD.alarmTypeStats[0].count,
+      xhWarn: SummaryD.alarmTypeStats[1].count,
+      qtWarn: 0,
+    }
     return res;
   });
 };

src/views/vent/home/configurable/configurable.data.ts

@@ -134,8 +134,8 @@ export const testConfigGasInject: Config[] = [
                 fontSize: 12,
               },
               data: [
-                { name: '实时流量' },
-                { name: '实时压力' },
+                { name: '瞬时流量' },
+                { name: '注气压力' },
               ]
             },
             yAxis: [
@@ -156,10 +156,7 @@ export const testConfigGasInject: Config[] = [
                   },
                 },
                 axisLine: {
-                  show: true,
-                  lineStyle: {
-                    color: 'rgba(4, 49, 79)',
-                  },
+                  show: false,
                 },
                 axisLabel: {
                   show: true,
@@ -190,10 +187,7 @@ export const testConfigGasInject: Config[] = [
                   },
                 },
                 axisLine: {
-                  show: true,
-                  lineStyle: {
-                    color: 'rgba(4, 49, 79)',
-                  },
+                  show: false,
                 },
                 axisLabel: {
                   show: true,
@@ -210,7 +204,7 @@ export const testConfigGasInject: Config[] = [
             ],
             series: [
               {
-                name: '实时流量',
+                name: '瞬时流量',
                 type: 'line',
                 symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
                 showAllSymbol: true,
@@ -248,7 +242,7 @@ export const testConfigGasInject: Config[] = [
                 data: 'flowStdInstant'
               },
               {
-                name: '实时压力',
+                name: '注气压力',
                 type: 'line',
                 symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
                 showAllSymbol: true,
@@ -371,8 +365,8 @@ export const testConfigGasInject: Config[] = [
                 fontSize: 12,
               },
               data: [
-                { name: '实时混量' },
-                { name: '实时压力' },
+                { name: '瞬时混量' },
+                { name: '抽采负压' },
               ]
             },
             yAxis: [
@@ -387,16 +381,13 @@ export const testConfigGasInject: Config[] = [
                 },
                 min: 0,
                 splitLine: {
-                  show: true,
+                  show: false ,
                   lineStyle: {
                     color: 'rgba(4, 49, 79)',
                   },
                 },
                 axisLine: {
-                  show: true,
-                  lineStyle: {
-                    color: 'rgba(4, 49, 79)',
-                  },
+                  show: false,
                 },
                 axisLabel: {
                   show: true,
@@ -427,10 +418,7 @@ export const testConfigGasInject: Config[] = [
                   },
                 },
                 axisLine: {
-                  show: true,
-                  lineStyle: {
-                    color: 'rgba(4, 49, 79)',
-                  },
+                  show: false,
                 },
                 axisLabel: {
                   show: true,
@@ -447,7 +435,7 @@ export const testConfigGasInject: Config[] = [
             ],
             series: [
               {
-                name: '实时混量',
+                name: '瞬时混量',
                 type: 'line',
                 symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
                 showAllSymbol: true,
@@ -485,7 +473,7 @@ export const testConfigGasInject: Config[] = [
                 data: 'mixStdInstant'
               },
               {
-                name: '实时压力',
+                name: '抽采负压',
                 type: 'line',
                 symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
                 showAllSymbol: true,
@@ -594,7 +582,7 @@ export const testConfigGasInject: Config[] = [
     },
   },
   {
-    deviceType: 'zy-device-status',
+    deviceType: 'run-status',
     moduleName: '系统运行状态',
     pageType: 'gas_injection',
     showDetail: true,
@@ -634,11 +622,7 @@ export const testConfigGasInject: Config[] = [
       complex_list: [],
       preset: [
         {
-          readFrom: '',
-          option: [
-            { label: '装备运行', value: '2025-07-30 21:29:00', iconName: 'famen-open' },
-            { label: '注气阀门开启', value: '2025-07-30 21:29:00', iconName: 'device-run' },
-          ],
+          readFrom: 'systemRunData',
         },
       ],
     },
@@ -693,19 +677,19 @@ export const testConfigGasInject: Config[] = [
       complex_list: [],
       preset: [
         {
-          readFrom: '',
+          readFrom: 'warnechartD',
           option: {
             colorOn: ['rgba(70, 255, 156, 1)', 'rgba(0, 243, 255, 1)', 'rgba(255, 157, 28, 1)', 'rgba(44, 182, 255, 1)'],
             colorOut: ['rgba(70, 255, 156, .5)', 'rgba(0, 243, 255, .5)', 'rgba(255, 157, 28, .5)', 'rgba(44, 182, 255, .5)'],
           },
         },
         {
-          readFrom: '',
+          readFrom: 'warnListD',
           option: [
-            { label: '装备运行异常', value: '50' },
-            { label: '环境监测异常', value: '30' },
-            { label: '信号传输异常', value: '10' },
-            { label: '驱替数据异常', value: '20' },
+            { label: '装备运行异常', value: 'deviceWarn' },
+            { label: '环境监测异常', value: 'hjWarn' },
+            { label: '信号传输异常', value: 'xhWarn' },
+            { label: '驱替数据异常', value: 'qtWarn' },
           ],
         },
       ],
@@ -1389,6 +1373,7 @@ export const testConfigGasInjectCc: Config[] = [
     deviceType: 'gas_cc_data',
     moduleName: '抽采数据',
     pageType: 'gas_injection',
+    showDetail: true,
     moduleData: {
       header: {
         show: false,
@@ -2184,7 +2169,7 @@ export const testConfigGasInjectCc: Config[] = [
                 yAxis: [
                   {
                     type: 'value',
-                    name: '(%)',
+                    name: '(kPa)',
                     nameTextStyle: {
                       color: "#a3a7ae",
                       fontSize: 12,

src/views/vent/home/configurable/gasInjection.vue

@@ -8,7 +8,7 @@
         <navMenu @toggleMenu="toggleMenu"></navMenu>
       </div>
       <template v-if="menuName == 'zjm'">
-        <div class="main-status"> 运行中 </div>
+        <div class="main-status">{{ runStatus=='1' ? '运行中' : '停止' }}</div>
         <ModuleGasInject
           v-for="cfg in configs"
           :key="cfg.deviceType"
@@ -63,7 +63,10 @@
   const { mainTitle, data, updateData } = useInitPage('注气驱替智能管控系统');
   const three3D = ref(null);
   let interval: number | undefined;
+  //当前选中菜单项
   let menuName = ref('zjm');
+  //运行状态
+  let runStatus=ref('')
   const isInitModal = ref(false);
 
   //选项切换
@@ -128,6 +131,8 @@
     (newData, oldData) => {
       if (newData && !Object.keys(oldData).length) {
         isInitModal.value = true;
+        runStatus.value=newData.deviceStatusControl.runStatus
+
       }
     }
   );