Merge branch 'master' of http://39.97.59.228:8013/lxh/gas-injection

src/assets/icons/gas-export.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14.647" height="15" viewBox="0 0 14.647 15">
+  <path id="路径_57882" data-name="路径 57882" d="M151.721,132.366l-2.4,2.4L147.549,133l2.4-2.4-1.909-1.98h5.586v5.727Zm-5.162-3.818v1.2h-4.6a.668.668,0,0,0-.707.707v10.111a.668.668,0,0,0,.707.707h9.687a.668.668,0,0,0,.707-.707v-4.879h1.2v4.667a2.083,2.083,0,0,1-2.121,2.121H142.1a2.083,2.083,0,0,1-2.121-2.121V130.6a2.083,2.083,0,0,1,2.121-2.121h4.455Zm-2.828,7.424h6.152v1.273h-6.152Zm0-2.475h2.475v1.273h-2.475V133.5Zm0,4.95h6.152v1.273h-6.152Z" transform="translate(-139.483 -127.977)" fill="#fff" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1"/>
+</svg>

src/design/themify/dark.less

@@ -5,8 +5,10 @@ html[data-theme='dark2'] {
   --vent-btn-primary-focus-color: #1c638a99;
   --vent-btn-primary-color: #1c638a;
   --vent-btn-primary-border-color: #56b3c96b;
-  --vent-table-thead: #3d9dd45d;
-  --vent-table-thead-border: #91e9fe;
+  // --vent-table-thead: #3d9dd45d;
+    --vent-table-thead: #103b6a;
+  // --vent-table-thead-border: #91e9fe;
+   --vent-table-thead-border: #2896ca;
   --vent-table-hover: #0dc3ff22;
   --vent-table-no-hover: #00bfff10;
   --vent-table-action-link: #00e7ff;
@@ -25,7 +27,8 @@ html[data-theme='dark2'] {
   --vent-base-light-bg: #60f4ff;
   --vent-base-light-bg-opcity: #60f4ff55;
   --vent-transparent: #fff0;
-  --vent-font-color: #fff;
+  // --vent-font-color: #fff;
+    --vent-font-color: #3df6ff;
   --vent-font-action-link: #7af5ff;
   --vent-configurable-bg: #09316a;
   --vent-configurable-module-bg: #3df6ff11;

src/design/themify/default.less

@@ -9,8 +9,10 @@ html {
   --vent-btn-primary-color: #1c638a;
   --vent-btn-primary-border-color: #56b3c96b;
 
-  --vent-table-thead: #3d9dd45d;
-  --vent-table-thead-border: #91e9fe;
+  // --vent-table-thead: #3d9dd45d;
+  --vent-table-thead: #103b6a;
+  // --vent-table-thead-border: #91e9fe;
+   --vent-table-thead-border: #2896ca;
   --vent-table-hover: #0dc3ff22;
   --vent-table-no-hover: #00bfff10;
   --vent-table-action-link: #00e7ff;
@@ -33,7 +35,8 @@ html {
   --vent-base-light-bg: #60f4ff;
   --vent-base-light-bg-opcity: #60f4ff55;
   --vent-transparent: #ffffff00;
-  --vent-font-color: #ffffff;
+  // --vent-font-color: #ffffff;
+   --vent-font-color: #3df6ff;
   --vent-font-yellow-color: #ffae00;
   --vent-font-action-link: #7af5ff;
 

src/design/themify/light.less

@@ -5,8 +5,10 @@ html[data-theme='light'] {
   --vent-btn-primary-focus-color: #1c638a99;
   --vent-btn-primary-color: #1c638a;
   --vent-btn-primary-border-color: #56b3c96b;
-  --vent-table-thead: #3d9dd45d;
-  --vent-table-thead-border: #91e9fe;
+  // --vent-table-thead: #3d9dd45d;
+    --vent-table-thead: #103b6a;
+  // --vent-table-thead-border: #91e9fe;
+  --vent-table-thead-border: #2896ca;
   --vent-table-hover: #0dc3ff22;
   --vent-table-no-hover: #00bfff10;
   --vent-table-action-link: #00e7ff;
@@ -25,7 +27,8 @@ html[data-theme='light'] {
   --vent-base-light-bg: #60f4ff;
   --vent-base-light-bg-opcity: #60f4ff55;
   --vent-transparent: #fff0;
-  --vent-font-color: #fff;
+  // --vent-font-color: #fff;
+    --vent-font-color: #3df6ff;
   --vent-font-action-link: #7af5ff;
   --vent-configurable-bg: #09316a;
   --vent-configurable-module-bg: #3df6ff11;

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

@@ -72,7 +72,6 @@ function redirectTo() {
 
 //详情点击
 function handleClickDetail() {
-  console.log('111')
   showDetail.value = true
 }
 //关闭弹窗

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

@@ -1,9 +1,36 @@
 <template>
   <div class="detail-info">
-    <a-modal v-model:visible="visibleDetail" width="1350px" :footer="null" :title="detailTitle" centered destroyOnClose
+    <a-modal v-model:visible="visibleDetail" width="1350px" :footer="null" :title="modalTitle" centered destroyOnClose
       @cancel="handleCancel">
-      <template v-if="deviceType == 'cc_gas'">
-        <curveEchartDetail></curveEchartDetail>
+      <template v-if="deviceType == 'cc_gas_nd'">
+        <curveEchartDetail :sysType="'Cc'" :isShowExport="false" :tableColumn="tableColumnCc"></curveEchartDetail>
+      </template>
+      <template v-if="deviceType == 'cc_gas_ll'">
+        <curveEchartDetail :sysType="'Cc'" :isShowExport="false" :tableColumn="tableColumnCc"></curveEchartDetail>
+      </template>
+      <template v-if="deviceType == 'gas_zq-yl'">
+        <curveEchartDetail :sysType="'Zq'" :isShowExport="false" :tableColumn="tableColumnSj"></curveEchartDetail>
+      </template>
+      <template v-if="deviceType == 'gas_zq_sj'">
+        <zqMonitorDetail :isShowExport="false" :tableColumn="tableColumnSj" :optionDetail="optionDetailZq">
+        </zqMonitorDetail>
+      </template>
+      <template v-if="deviceType == 'gas_zq_hj'">
+        <zqMonitorDetail :isShowExport="true" :tableColumn="tableColumnHj"></zqMonitorDetail>
+      </template>
+      <template v-if="deviceType == 'gas_zq_paramline'">
+        <curveEchartDetail :sysType="'Zq'" :isShowExport="false" :tableColumn="tableColumnSj"></curveEchartDetail>
+      </template>
+      <template v-if="deviceType == 'gas_zq_video'">
+        <zqMonitorDetail :isShowExport="true" :tableColumn="tableColumnSj"></zqMonitorDetail>
+      </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>
       </template>
       <template v-if="deviceType == 'syq-env-monitor'">
         <SyqDetails />
@@ -13,19 +40,49 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
-import curveEchartDetail from '../gasInject/curveEchartDetail.vue'
+import { computed, reactive, ref } from 'vue'
+import curveEchartDetail from './curveEchartDetail.vue'
+import zqMonitorDetail from './zqMonitorDetail.vue'
+import { tableColumnSj, tableColumnHj, tableColumnCc, optionDetailZq, optionDetailCc } from '../gasInject/gasInject.data'
 import SyqDetails from './SyqDetails.vue';
-
 let props = defineProps({
   deviceType: {
     type: String
   }
 })
 let visibleDetail = ref(true)
-let detailTitle = ref('抽采参数时程曲线')
 let $emit = defineEmits(['closeModal'])
 
+// //注气压力/流量配置项
+// let optionDataYl = ref<any[]>([
+//   { label: '压力', value: 'yl' },
+//   { label: '流量', value: 'll' },
+// ])
+//抽采流量配置项
+// let optionDataLl = ref<any[]>([
+//   { label: '纯量', value: 'cl' },
+//   { label: '混量', value: 'hl' },
+// ])
+
+//弹窗标题
+let modalTitle = computed(() => {
+  if (props.deviceType == 'cc_gas_nd' || props.deviceType == 'cc_gas_ll' || props.deviceType == 'gas_cc_line') {
+    return '抽采参数时程曲线'
+  } else if (props.deviceType == 'gas_zq-yl' || props.deviceType == 'gas_zq_paramline') {
+    return '注气参数时程曲线'
+  } else if (props.deviceType == 'gas_zq_sj') {
+    return '注气数据监测'
+  } else if (props.deviceType == 'gas_zq_hj') {
+    return '环境监测'
+  } else if (props.deviceType == 'gas_zq_video') {
+    return '历史数据'
+  } else if (props.deviceType == 'gas_cc_detail') {
+    return '抽采数据监测'
+  }
+})
+
+
+
 //关闭弹窗
 function handleCancel() {
   visibleDetail.value = false
@@ -35,24 +92,4 @@ function handleCancel() {
 
 </script>
 
-<style lang="less" scoped>
-@import '/@/design/theme.less';
-
-@{theme-deepblue} {
-  .detail-info {
-    --image-modal-gas_bg: url('@/assets/images/themify/deepblue/home-container/configurable/gasInjection/9-1.png');
-  }
-}
-
-.detail-info {
-  --image-modal-gas_bg: url('@/assets/images/gasInjection/9-1.png');
-}
-:deep(.zxm-modal-content){
-    border: none !important;
-    box-shadow: none !important;
-    background-color: transparent !important;
-    background-image: var(--image-confirm-modal) !important;
-    background-size: 100% auto;
-    background-repeat: no-repeat;
-  }
-</style>
+<style lang="less" scoped></style>

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

@@ -1,16 +1,213 @@
 <template>
   <div class="curve-detail">
-
+    <template v-if="!showExport">
+      <div class="curve-nav">
+        <div class="nav-search">
+          <!-- 时间查询选项 -->
+          <a-radio-group v-model:value="timerTabs" name="radioGroup">
+            <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" :placeholder="['开始时间', '结束时间']" />
+        </div>
+     
+          <a-radio-group v-model:value="nowData" name="radioGroup">
+            <a-radio v-for="(item, index) in option" :value="item.value">{{ item.label }}</a-radio>
+          </a-radio-group>
+     
+          <div class="nav-btn" @click="handleHistory">
+            <div class="nav-text">
+              <SvgIcon class="icon-style" size="18" name="gas-export"></SvgIcon>
+              <span>历史数据详情</span>
+            </div>
+          </div>
+       
+      </div>
+      <div class="curve-content">
+        <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>
+          </div>
+        </div>
+      </div>
+    </template>
+    <template v-else>
+      <zqHistoryExport :tableColumn="tableColumn"></zqHistoryExport>
+    </template>
   </div>
 </template>
 
 <script setup lang="ts">
-import {ref} from 'vue'
+import { computed, reactive, ref, watch } from 'vue'
+import echartLineDate from '../gasInject/echartLineDate.vue'
+import { SvgIcon } from '/@/components/Icon';
+import zqHistoryExport from './zqHistoryExport.vue'
+import { zqEchartOption, ccEchartOption } from './gasInject.data'
+
+let props = defineProps({
+  //选择按钮配置项
+  option: {
+    type: Array as any,
+  },
+  //是否打开历史数据页面
+  isShowExport: {
+    type: Boolean
+  },
+  //table列
+  tableColumn: {
+    type: Array
+  },
+  //详情图表系统类型
+  sysType: {
+    type: String
+  }
+})
+
+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 timerTabs = ref('day')
+let nowData = ref('cl')
+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 handleHistory() {
+  showExport.value = true
+}
+
+watch(() => props.isShowExport, (newV, oldV) => {
+  showExport.value = newV
+}, { immediate: true })
 </script>
 
 <style lang="less" scoped>
-.curve-detail{
+@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');
+  }
+}
+
+.curve-detail {
+  --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: 15px 20px;
+  box-sizing: border-box;
+
+  .curve-nav {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    height: 39px;
+    margin-bottom: 15px;
+    padding: 0px 20px;
+    background: var(--image-inject_curve_bg) no-repeat;
+    background-size: 100% 100%;
+  }
+
+  .curve-content {
+    display: flex;
+    flex-wrap: wrap;
+    width: 100%;
+    height: calc(100% - 54px);
+    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%;
+  }
+
+  .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);
+  }
+
+  .nav-btn {
+    width: 125px;
+    height: 78%;
+    padding: 2px;
+    border: 1px solid #1081d7;
+    cursor: pointer;
+    color: #fff;
+  }
+
+  .nav-text {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #1081d7;
+  }
+
+  .icon-style {
+    margin-right: 5px;
+  }
+}
+
+: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/echartLineDate.vue

@@ -0,0 +1,115 @@
+<template>
+  <div class="echart-line" ref="echartLines"></div>
+</template>
+
+<script setup lang="ts">
+import { nextTick, onMounted, ref } from 'vue'
+import * as echarts from 'echarts';
+
+let props = defineProps({
+  //图表配置项
+  echartOption: {
+    type: Object as any
+  },
+  //图表数据
+  ecahrtData: {
+    type: Object as any
+  }
+})
+let echartLines = ref(null)
+
+function getOption() {
+  nextTick(() => {
+    let myChart = echarts.init(echartLines.value);
+    let option = {
+      tooltip: props.echartOption.tooltip,
+      grid: props.echartOption.grid,
+      legend: props.echartOption.legend,
+      xAxis: [{
+        type: 'category',
+        boundaryGap: false,
+        axisLine: { //坐标轴轴线相关设置。数学上的x轴
+          show: true,
+          lineStyle: {
+            color: 'rgba(4, 49, 79)',
+          },
+        },
+        axisLabel: { //坐标轴刻度标签的相关设置
+          textStyle: {
+            color: '#7ec7ff',
+            padding: 5,
+            fontSize: 12
+          },
+          formatter: function (data) {
+            return data
+          }
+        },
+        splitLine: {
+          show: false,
+        },
+        axisTick: {
+          show: false,
+        },
+        data: props.ecahrtData.xData
+      }],
+      yAxis: [{
+        name: props.echartOption.yname,
+        nameTextStyle: {
+          color: "#7ec7ff",
+          fontSize: 12,
+          padding: 0
+        },
+        min: 0,
+        splitLine: {
+          show: true,
+          lineStyle: {
+            color: 'rgba(4, 49, 79)',
+          },
+        },
+        axisLine: {
+          show: false,
+        },
+        axisLabel: {
+          show: true,
+          textStyle: {
+            color: '#7ec7ff',
+            padding: 12
+          },
+          formatter: '{value}',
+        },
+        axisTick: {
+          show: false,
+        },
+      }],
+      series: props.echartOption.series.map((el, index) => {
+        return {
+          name: el.name,
+          type: el.type,
+          symbol: el.symbol, // 默认是空心圆（中间是白色的），改成实心圆
+          showAllSymbol: el.showAllSymbol,
+          symbolSize: el.symbolSize,
+          smooth: el.smooth,
+          lineStyle: el.lineStyle,
+          itemStyle: el.itemStyle,
+          areaStyle: el.areaStyle,
+          data: props.ecahrtData[el.data]
+        }
+      })
+    };
+    myChart.setOption(option);
+    window.onresize = function () {
+      myChart.resize();
+    };
+  });
+}
+onMounted(() => {
+  getOption()
+})
+</script>
+
+<style lang="less" scoped>
+.echart-line {
+  width: 100%;
+  height: 100%;
+}
+</style>

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

@@ -0,0 +1,639 @@
+import * as echarts from 'echarts';
+import { BasicColumn } from '/@/components/Table';
+
+export let tableColumnSj: BasicColumn[] = [
+  {
+    title: '序号',
+    width: 60,
+    align: 'center',
+    customRender: ({ index }: { index: number }) => `${index + 1}`
+  },
+  {
+    title: '时间',
+    dataIndex: 'fileName',
+    key: 'fileName',
+    align: 'center',
+    ellipsis: true,
+  },
+  {
+    title: '1#注氮定向钻孔',
+    children: [
+      {
+        title: '累计流量',
+        dataIndex: 'fileType_dictText',
+        key: 'fileType_dictText',
+        align: 'center',
+        ellipsis: true,
+      },
+      {
+        title: '标况瞬量',
+        dataIndex: 'fileType_dictText',
+        key: 'fileType_dictText',
+        align: 'center',
+        ellipsis: true,
+      },
+      {
+        title: '工况瞬量',
+        dataIndex: 'fileType_dictText',
+        key: 'fileType_dictText',
+        align: 'center',
+        ellipsis: true,
+      },
+      {
+        title: '压力',
+        dataIndex: 'fileType_dictText',
+        key: 'fileType_dictText',
+        align: 'center',
+        ellipsis: true,
+      },
+    ]
+  },
+
+  {
+    title: '2#注氮定向钻孔',
+    children: [
+      {
+        title: '累计流量',
+        dataIndex: 'fileType_dictText',
+        key: 'fileType_dictText',
+        align: 'center',
+        ellipsis: true,
+      },
+      {
+        title: '标况瞬量',
+        dataIndex: 'fileType_dictText',
+        key: 'fileType_dictText',
+        align: 'center',
+        ellipsis: true,
+      },
+      {
+        title: '工况瞬量',
+        dataIndex: 'fileType_dictText',
+        key: 'fileType_dictText',
+        align: 'center',
+        ellipsis: true,
+      },
+      {
+        title: '压力',
+        dataIndex: 'fileType_dictText',
+        key: 'fileType_dictText',
+        align: 'center',
+        ellipsis: true,
+      },
+    ]
+  },
+  {
+    title: '3#注氮定向钻孔',
+    children: [
+      {
+        title: '累计流量',
+        dataIndex: 'fileType_dictText',
+        key: 'fileType_dictText',
+        align: 'center',
+        ellipsis: true,
+      },
+      {
+        title: '标况瞬量',
+        dataIndex: 'fileType_dictText',
+        key: 'fileType_dictText',
+        align: 'center',
+        ellipsis: true,
+      },
+      {
+        title: '工况瞬量',
+        dataIndex: 'fileType_dictText',
+        key: 'fileType_dictText',
+        align: 'center',
+        ellipsis: true,
+      },
+      {
+        title: '压力',
+        dataIndex: 'fileType_dictText',
+        key: 'fileType_dictText',
+        align: 'center',
+        ellipsis: true,
+      },
+    ]
+  },
+  // {
+  // title: '审批操作',
+  // dataIndex: 'actionSp',
+  // width: 200,
+  // align: 'center',
+  // slots: { customRender: 'actionSp' },
+  // },
+
+]
+
+export let tableColumnHj: BasicColumn[] = [
+  {
+    title: '序号',
+    width: 60,
+    align: 'center',
+    customRender: ({ index }: { index: number }) => `${index + 1}`
+  },
+  {
+    title: '时间',
+    dataIndex: 'fileName',
+    key: 'fileName',
+    align: 'center',
+    ellipsis: true,
+  },
+  {
+    title: '注气区域 (定向钻场)',
+    children: [
+      {
+        title: '甲烷浓度(%)',
+        dataIndex: 'fileType_dictText',
+        key: 'fileType_dictText',
+        align: 'center',
+        ellipsis: true,
+      },
+      {
+        title: '氧气浓度(%)',
+        dataIndex: 'fileType_dictText',
+        key: 'fileType_dictText',
+        align: 'center',
+        ellipsis: true,
+      },
+      {
+        title: '温度(℃)',
+        dataIndex: 'fileType_dictText',
+        key: 'fileType_dictText',
+        align: 'center',
+        ellipsis: true,
+      },
+    ]
+  },
+
+  {
+    title: '抽采区域(回风巷)',
+    children: [
+      {
+        title: '甲烷浓度(%)',
+        dataIndex: 'fileType_dictText',
+        key: 'fileType_dictText',
+        align: 'center',
+        ellipsis: true,
+      },
+      {
+        title: '氧气浓度(%)',
+        dataIndex: 'fileType_dictText',
+        key: 'fileType_dictText',
+        align: 'center',
+        ellipsis: true,
+      },
+      {
+        title: '温度(℃)',
+        dataIndex: 'fileType_dictText',
+        key: 'fileType_dictText',
+        align: 'center',
+        ellipsis: true,
+      },
+      {
+        title: '风速(m/s)',
+        dataIndex: 'fileType_dictText',
+        key: 'fileType_dictText',
+        align: 'center',
+        ellipsis: true,
+      },
+    ]
+  },
+  // {
+  // title: '审批操作',
+  // dataIndex: 'actionSp',
+  // width: 200,
+  // align: 'center',
+  // slots: { customRender: 'actionSp' },
+  // },
+
+]
+export let tableColumnCc: BasicColumn[] = [
+  {
+    title: '序号',
+    width: 60,
+    align: 'center',
+    customRender: ({ index }: { index: number }) => `${index + 1}`
+  },
+  {
+    title: '时间',
+    dataIndex: 'fileName',
+    key: 'fileName',
+    align: 'center',
+    ellipsis: true,
+  },
+  {
+    title: '1#汇流管',
+    children: [
+      {
+        title: '混合气体总量',
+        dataIndex: 'fileType_dictText',
+        key: 'fileType_dictText',
+        align: 'center',
+        ellipsis: true,
+      },
+      {
+        title: '混合气体标况瞬量',
+        dataIndex: 'fileType_dictText',
+        key: 'fileType_dictText',
+        align: 'center',
+        ellipsis: true,
+      },
+      {
+        title: '混合气体工况瞬量',
+        dataIndex: 'fileType_dictText',
+        key: 'fileType_dictText',
+        align: 'center',
+        ellipsis: true,
+      },
+       {
+        title: '甲烷气体总量',
+        dataIndex: 'fileType_dictText',
+        key: 'fileType_dictText',
+        align: 'center',
+        ellipsis: true,
+      },
+        {
+        title: '甲烷气体标况瞬量',
+        dataIndex: 'fileType_dictText',
+        key: 'fileType_dictText',
+        align: 'center',
+        ellipsis: true,
+      },
+          {
+        title: '甲烷气体工况瞬量',
+        dataIndex: 'fileType_dictText',
+        key: 'fileType_dictText',
+        align: 'center',
+        ellipsis: true,
+      },
+      {
+        title: '甲烷浓度',
+        dataIndex: 'fileType_dictText',
+        key: 'fileType_dictText',
+        align: 'center',
+        ellipsis: true,
+      },
+       {
+        title: '抽采负压',
+        dataIndex: 'fileType_dictText',
+        key: 'fileType_dictText',
+        align: 'center',
+        ellipsis: true,
+      },
+    ]
+  },
+
+  {
+    title: '2#汇流管',
+    children: [
+      {
+        title: '混合气体总量',
+        dataIndex: 'fileType_dictText',
+        key: 'fileType_dictText',
+        align: 'center',
+        ellipsis: true,
+      },
+      {
+        title: '混合气体标况瞬量',
+        dataIndex: 'fileType_dictText',
+        key: 'fileType_dictText',
+        align: 'center',
+        ellipsis: true,
+      },
+      {
+        title: '混合气体工况瞬量',
+        dataIndex: 'fileType_dictText',
+        key: 'fileType_dictText',
+        align: 'center',
+        ellipsis: true,
+      },
+       {
+        title: '甲烷气体总量',
+        dataIndex: 'fileType_dictText',
+        key: 'fileType_dictText',
+        align: 'center',
+        ellipsis: true,
+      },
+        {
+        title: '甲烷气体标况瞬量',
+        dataIndex: 'fileType_dictText',
+        key: 'fileType_dictText',
+        align: 'center',
+        ellipsis: true,
+      },
+          {
+        title: '甲烷气体工况瞬量',
+        dataIndex: 'fileType_dictText',
+        key: 'fileType_dictText',
+        align: 'center',
+        ellipsis: true,
+      },
+      {
+        title: '甲烷浓度',
+        dataIndex: 'fileType_dictText',
+        key: 'fileType_dictText',
+        align: 'center',
+        ellipsis: true,
+      },
+       {
+        title: '抽采负压',
+        dataIndex: 'fileType_dictText',
+        key: 'fileType_dictText',
+        align: 'center',
+        ellipsis: true,
+      },
+    ]
+  },
+  // {
+  // title: '审批操作',
+  // dataIndex: 'actionSp',
+  // width: 200,
+  // align: 'center',
+  // slots: { customRender: 'actionSp' },
+  // },
+
+]
+
+//注气详情界面配置项数据
+export let optionDetailZq = [
+  { label: '注气总量', value: 'value1' },
+  { label: '标况瞬量', value: 'value2' },
+  { label: '工况瞬量', value: 'value3' },
+  { label: '注气压力', value: 'value4' },
+]
+//抽采详情界面配置项数据
+export let optionDetailCc = [
+  { label: '混合气体标况总量', value: 'value1' },
+  { label: '混合气体标况瞬量', value: 'value2' },
+  { label: '甲烷气体标况总量', value: 'value3' },
+  { label: '甲烷气体标况瞬量', value: 'value4' },
+  { label: '甲烷浓度', value: 'value5' },
+  { label: '抽采负压', value: 'value6' },
+]
+
+//注气详情图表配置项
+export let zqEchartOption = {
+  yname: 'MPa',
+  tooltip: {
+    trigger: 'axis',
+    padding: 8,
+    backgroundColor: 'rgba(0, 0, 0, .6)',
+    textStyle: {
+      color: '#fff',
+      fontSize: 12,
+    },
+  },
+  grid: {
+    top: '27%',
+    left: '7%',
+    right: '5%',
+    bottom: '8%',
+    containLabel: true
+  },
+  legend: {
+    top: '1%',
+    right: '3%',
+    icon: 'circle',
+    itemWidth: 8,
+    itemHeight: 8,
+    itemGap: 12,
+    textStyle: {
+      color: '#fff',
+      fontSize: 12,
+    },
+    data: [
+      { name: '注气流量' },
+      { name: '注气压力' },
+    ]
+  },
+  series: [
+    {
+      name: '注气流量',
+      type: 'line',
+      symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
+      showAllSymbol: true,
+      symbolSize: 0,
+      smooth: true,
+      lineStyle: {
+        normal: {
+          width: 2,
+          color: 'rgba(236, 255, 62,1)', // 线条颜色
+        },
+        borderColor: 'rgba(0,0,0,.4)',
+      },
+      itemStyle: {
+        color: 'rgba(236, 255, 62,1)',
+        borderColor: "#646ace",
+        borderWidth: 2
+      },
+      areaStyle: { //区域填充样式
+        normal: {
+          //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+            offset: 0,
+            color: "rgba(236, 255, 62,.4)"
+          },
+          {
+            offset: 1,
+            color: "rgba(236, 255, 62, .1)"
+          }
+          ], false),
+          shadowColor: 'rgba(236, 255, 62, 0.5)', //阴影颜色
+          shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
+        }
+      },
+      data: 'yData'
+    },
+    {
+      name: '注气压力',
+      type: 'line',
+      symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
+      showAllSymbol: true,
+      symbolSize: 0,
+      smooth: true,
+      lineStyle: {
+        normal: {
+          width: 2,
+          color: 'rgba(86, 241, 133,1)', // 线条颜色
+        },
+        borderColor: 'rgba(0,0,0,.4)',
+      },
+      itemStyle: {
+        color: 'rgba(86, 241, 133,1)',
+        borderColor: "#646ace",
+        borderWidth: 2
+
+      },
+      areaStyle: { //区域填充样式
+        normal: {
+          //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+            offset: 0,
+            color: "rgba(86, 241, 133,.4)"
+          },
+          {
+            offset: 1,
+            color: "rgba(86, 241, 133, .1)"
+          }
+          ], false),
+          shadowColor: 'rgba(86, 241, 133, 0.5)', //阴影颜色
+          shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
+        }
+      },
+      data: 'yData1'
+    },
+  ]
+}
+//抽采详情图表配置项
+export let ccEchartOption = {
+  yname: 'MPa',
+  tooltip: {
+    trigger: 'axis',
+    padding: 8,
+    backgroundColor: 'rgba(0, 0, 0, .6)',
+    textStyle: {
+      color: '#fff',
+      fontSize: 12,
+    },
+  },
+  grid: {
+    top: '27%',
+    left: '7%',
+    right: '5%',
+    bottom: '8%',
+    containLabel: true
+  },
+  legend: {
+    top: '1%',
+    right: '3%',
+    icon: 'circle',
+    itemWidth: 8,
+    itemHeight: 8,
+    itemGap: 12,
+    textStyle: {
+      color: '#fff',
+      fontSize: 12,
+    },
+    data: [
+      { name: '抽采纯量' },
+      { name: '抽采混量' },
+      { name: '瓦斯浓度' },
+    ]
+  },
+  series: [
+    {
+      name: '抽采纯量',
+      type: 'line',
+      symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
+      showAllSymbol: true,
+      symbolSize: 0,
+      smooth: true,
+      lineStyle: {
+        normal: {
+          width: 2,
+          color: 'rgba(236, 255, 62,1)', // 线条颜色
+        },
+        borderColor: 'rgba(0,0,0,.4)',
+      },
+      itemStyle: {
+        color: 'rgba(236, 255, 62,1)',
+        borderColor: "#646ace",
+        borderWidth: 2
+      },
+      areaStyle: { //区域填充样式
+        normal: {
+          //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+            offset: 0,
+            color: "rgba(236, 255, 62,.4)"
+          },
+          {
+            offset: 1,
+            color: "rgba(236, 255, 62, .1)"
+          }
+          ], false),
+          shadowColor: 'rgba(236, 255, 62, 0.5)', //阴影颜色
+          shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
+        }
+      },
+      data: 'yData'
+    },
+    {
+      name: '瓦斯浓度',
+      type: 'line',
+      symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
+      showAllSymbol: true,
+      symbolSize: 0,
+      smooth: true,
+      lineStyle: {
+        normal: {
+          width: 2,
+          color: 'rgba(86, 241, 133,1)', // 线条颜色
+        },
+        borderColor: 'rgba(0,0,0,.4)',
+      },
+      itemStyle: {
+        color: 'rgba(86, 241, 133,1)',
+        borderColor: "#646ace",
+        borderWidth: 2
+
+      },
+      areaStyle: { //区域填充样式
+        normal: {
+          //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+            offset: 0,
+            color: "rgba(86, 241, 133,.4)"
+          },
+          {
+            offset: 1,
+            color: "rgba(86, 241, 133, .1)"
+          }
+          ], false),
+          shadowColor: 'rgba(86, 241, 133, 0.5)', //阴影颜色
+          shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
+        }
+      },
+      data: 'yData1'
+    },
+    {
+      name: '抽采混量',
+      type: 'line',
+      symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
+      showAllSymbol: true,
+      symbolSize: 0,
+      smooth: true,
+      lineStyle: {
+        normal: {
+          width: 2,
+          color: 'rgba(56, 218, 228,1)', // 线条颜色
+        },
+        borderColor: 'rgba(0,0,0,.4)',
+      },
+      itemStyle: {
+        color: 'rgba(56, 218, 228,1)',
+        borderColor: "#646ace",
+        borderWidth: 2
+
+      },
+      areaStyle: { //区域填充样式
+        normal: {
+          //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+            offset: 0,
+            color: "rgba(56, 218, 228,.4)"
+          },
+          {
+            offset: 1,
+            color: "rgba(56, 218, 228, .1)"
+          }
+          ], false),
+          shadowColor: 'rgba(56, 218, 228, 0.5)', //阴影颜色
+          shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
+        }
+      },
+      data: 'yData2'
+    },
+  ]
+}

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

@@ -6,7 +6,7 @@
          <span class="action-btn close-btn" @click="closeModel"></span>
         <span @click="clickHandler">{{ title }}</span>
        </div>
-       <span v-if="visibleDetail" class="detail-text">详情</span>
+       <span v-if="visibleDetail" class="detail-text" @click="handleClickDetail">详情</span>
       </div>
       <div class="module-slot">
         <slot></slot>
@@ -16,7 +16,7 @@
 </template>
 <script lang="ts" setup>
   defineProps<{ title: string; visible: boolean,visibleDetail:boolean }>();
-  const emit = defineEmits(['close', 'click']);
+  const emit = defineEmits(['close', 'click','handleClickDetail']);
 
   function closeModel() {
     emit('close');
@@ -24,6 +24,10 @@
   function clickHandler() {
     emit('click');
   }
+  //详情点击
+function handleClickDetail() {
+  emit('handleClickDetail')
+}
 </script>
 <style lang="less" scoped>
   @import '/@/design/theme.less';
@@ -56,6 +60,7 @@
     background-size: 100% 100%;
     position: relative;
     padding-left: 45px;
+    padding-right: 24px;
     padding-top: 2px;
     margin-bottom: 5px;
     font-family: 'douyuFont';
@@ -72,6 +77,7 @@
   }
   .detail-text{
     color: #2cb6ff;
+    cursor: pointer;
   }
 
   // Transition动画相关

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

@@ -6,7 +6,7 @@
          <span class="action-btn close-btn" @click="closeModel"></span>
         <span @click="clickHandler">{{ title }}</span>
        </div>
-       <span v-if="visibleDetail" class="detail-text">详情</span>
+       <span v-if="visibleDetail" class="detail-text" @click="handleClickDetail">详情</span>
       </div>
       <div class="module-slot">
         <slot></slot>
@@ -17,7 +17,7 @@
 <script lang="ts" setup>
 // 和 ./moduleLeft 一样，针对动画做了一些修改
 defineProps<{ title: string; visible: boolean,visibleDetail:boolean }>();
-const emit = defineEmits(['close', 'click']);
+const emit = defineEmits(['close', 'click','handleClickDetail']);
 
 function closeModel() {
   emit('close');
@@ -25,6 +25,10 @@ function closeModel() {
 function clickHandler() {
   emit('click');
 }
+//详情点击
+function handleClickDetail() {
+  emit('handleClickDetail')
+}
 </script>
 <style lang="less" scoped>
 @import '/@/design/theme.less';
@@ -77,6 +81,7 @@ function clickHandler() {
 
 .detail-text{
     color: #2cb6ff;
+    cursor: pointer;
   }
 
 // Transition动画相关

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

@@ -0,0 +1,99 @@
+<template>
+  <div class="detail-card">
+      <div class="card-title">{{ `${dataIndex}#数据` }}</div>
+      <div class="card-content">
+        <div class="card-content-item" v-for="(item, index) in optionDetail" :key="index">
+          <div class="content-item-label">{{ item.label }}</div>
+          <div class="content-item-value">{{ zqDetailData[item.value] }}</div>
+        </div>
+      </div>
+   
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+let props = defineProps({
+  //详情界面配置项
+  optionDetail: {
+    type: Array as any
+  },
+  //数据序列
+  dataIndex:{
+    type:Number
+  },
+  //分组数据
+  zqDetailData: {
+    type: Object as any
+  },
+ 
+})
+</script>
+
+<style lang="less" scoped>
+@import '/@/design/theme.less';
+
+@{theme-deepblue} {
+  .detail-card {
+    --image-inject_zq_card: url('@/assets/images/themify/deepblue/home-container/configurable/gasInjection/9-5.png');
+    --image-inject_zq_card1: url('@/assets/images/themify/deepblue/home-container/configurable/gasInjection/9-7.png');
+  }
+}
+
+.detail-card {
+  --image-inject_zq_card: url('@/assets/images/gasInjection/9-5.png');
+  --image-inject_zq_card1: url('@/assets/images/gasInjection/9-7.png');
+  width: 100%;
+  height: 100%;
+
+  .card-title {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 52px;
+    margin-bottom: 4px;
+    padding: 0px 20px;
+    font-size: 16px;
+    color: #fff;
+    background: var(--image-inject_zq_card) no-repeat;
+    background-size: 100% 100%;
+  }
+
+  .card-content {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    height: calc(100% - 56px);
+    border-radius: 15px;
+    /* 内阴影 */
+    box-shadow: inset 0px 0px 15px rgba(34, 142, 220, 0.8);
+    padding:15px;
+    overflow-y: auto;
+  }
+
+  .card-content-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    // height: 26px;
+    margin: 5px 0px;
+    padding: 0px 15px;
+    color: #fff;
+    background: linear-gradient(to right, rgba(17, 50, 86, 1), rgba(17, 50, 86, .1));
+  }
+
+  .content-item-label {
+    color: #c3f5ff;
+  }
+
+  .content-item-value {
+
+    font-family: 'douyuFont';
+    color: #91faff;
+  }
+}
+</style>

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

@@ -0,0 +1,174 @@
+<template>
+  <div class="history-export">
+    <div class="nav-box">
+      <div class="nav-picker">
+        <span>时间:</span>
+        <a-range-picker style="width:300px" v-model:value="timer" :show-time="{ format: 'HH:mm' }"
+          format="YYYY-MM-DD HH:mm" :placeholder="['开始时间', '结束时间']" @change="onRangeChange" />
+      </div>
+      <div class="nav-btn" @click="handleHisExport">
+        <div class="nav-text">
+          <SvgIcon class="icon-style" size="18" name="gas-export"></SvgIcon>
+          <span>数据导出</span>
+        </div>
+      </div>
+    </div>
+    <div class="main-content">
+      <a-table size="small" :dataSource="dataSource" :columns="tableColumn" :scroll="{ y: 455 }" :pagination="pagination">
+        <template #action="{ record }">
+          <!-- <a class="table-action-link" @click="handleSpDetail(record)">审批详情</a> -->
+        </template>
+      </a-table>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref } from 'vue'
+import { SvgIcon } from '/@/components/Icon';
+
+let props=defineProps({
+  tableColumn:{
+    type:Array
+  }
+})
+
+let timer = ref('')
+let dataSource = ref<any[]>([
+  { fileName: '测试' },
+  { fileName: '测试' },
+  { fileName: '测试' },
+  { fileName: '测试' },
+  { fileName: '测试' },
+  { fileName: '测试' },
+  { fileName: '测试' },
+  { fileName: '测试' },
+  { fileName: '测试' },
+  { fileName: '测试' },
+  { fileName: '测试' },
+  { fileName: '测试' },
+  { fileName: '测试' },
+])
+
+
+//分页参数配置
+let pagination = reactive({
+  current: 1, // 当前页码
+  pageSize: 15, // 每页显示条数
+  total: 0, // 总条目数，后端返回
+  // showTotal: (total, range) => `${range[0]}-${range[1]} 条，总共 ${total} 条`, // 分页右下角显示信息
+  showSizeChanger: true, // 是否可改变每页显示条数
+  pageSizeOptions: ['15', '20', '25', '30', '50'], // 可选的每页显示条数
+});
+
+//导出历史数据
+function handleHisExport() { }
+//日期切换
+function onRangeChange() { }
+</script>
+
+<style lang="less" scoped>
+@import '/@/design/theme.less';
+
+@{theme-deepblue} {
+  .history-export {
+    --image-inject_zq_monitor: url('@/assets/images/themify/deepblue/home-container/configurable/gasInjection/9-3.png');
+  }
+}
+
+.history-export {
+  --image-inject_zq_monitor: url('@/assets/images/gasInjection/9-3.png');
+  width: 100%;
+  height: 100%;
+
+  .nav-box {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    height: 39px;
+    padding: 0px 20px;
+    margin-bottom: 15px;
+    background: var(--image-inject_zq_monitor) no-repeat;
+    background-size: 100% 100%;
+  }
+
+  .nav-picker {
+    color: #fff;
+  }
+
+  .nav-btn {
+    width: 100px;
+    height: 78%;
+    padding: 2px;
+    border: 1px solid #1081d7;
+    cursor: pointer;
+    color: #fff;
+  }
+
+  .nav-text {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #1081d7;
+  }
+
+  .icon-style {
+    margin-right: 5px;
+  }
+
+  .main-content {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    height: calc(100% - 54px);
+  }
+}
+
+: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;
+}
+
+:deep(.zxm-table-header) {
+  border-left: 1px solid #2896ca !important;
+  border-right: 1px solid #2896ca !important;
+}
+
+:deep(.zxm-table-thead > tr > th:last-child) {
+  border-right: 1px solid #2896ca !important;
+}
+
+:deep(.zxm-table-tbody > tr) {
+  &:nth-child(odd) {
+    td {
+      background-color: #0d2c50 !important;
+    }
+
+  }
+
+  &:nth-child(even) {
+    td {
+      background-color: #0d233f !important;
+    }
+
+  }
+}
+
+:deep(.zxm-table-tbody > tr > td) {
+  border-color: transparent !important;
+  background: #0a2140 !important;
+}
+</style>

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

@@ -0,0 +1,334 @@
+<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="zqDetailData1"></zqDetailCard>
+          </div>
+          <div class="area-item">
+            <zqDetailCard :dataIndex="2" :optionDetail="optionDetail" :zqDetailData="zqDetailData2"></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="zqDetailData3"></zqDetailCard>
+          </div>
+          <div class="area-item">
+            <zqDetailCard :dataIndex="4" :optionDetail="optionDetail" :zqDetailData="zqDetailData4"></zqDetailCard>
+          </div>
+        </div>
+      </div>
+    </template>
+    <template v-else>
+      <zqHistoryExport :tableColumn="tableColumn"></zqHistoryExport>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref, watch } from 'vue'
+import { SvgIcon } from '/@/components/Icon';
+import zqDetailCard from './zqDetailCard.vue'
+import zqHistoryExport from './zqHistoryExport.vue'
+
+let props = defineProps({
+  //是否打开历史数据页面
+  isShowExport: {
+    type: Boolean
+  },
+  //table列
+  tableColumn:{
+    type:Array
+  },
+  //详情界面配置项
+  optionDetail:{
+    type:Array
+  }
+
+})
+
+let showExport = ref(false)
+//注气详情数据
+let zqDetailData1 = reactive({
+  value1: '10',
+  value2: '10',
+  value3: '10',
+  value4: '10',
+  value5:'10',
+   value6:'10',
+})
+let zqDetailData2 = reactive({
+  value1: '20',
+  value2: '20',
+  value3: '20',
+  value4: '20',
+   value5:'20',
+   value6:'20',
+})
+let zqDetailData3 = reactive({
+  value1: '30',
+  value2: '30',
+  value3: '30',
+  value4: '30',
+   value5:'30',
+   value6:'30',
+})
+let zqDetailData4 = reactive({
+  value1: '40',
+  value2: '40',
+  value3: '40',
+  value4: '40',
+   value5:'40',
+   value6:'40',
+})
+
+
+//历史数据跳转
+function handleExport() {
+  showExport.value = true
+}
+
+watch(() => props.isShowExport, (newV, oldV) => {
+  showExport.value = newV
+}, { immediate: true })
+</script>
+
+<style lang="less" scoped>
+@import '/@/design/theme.less';
+
+@{theme-deepblue} {
+  .gas-inject-card {
+    --image-inject_zq_monitor: url('@/assets/images/themify/deepblue/home-container/configurable/gasInjection/9-3.png');
+    --image-inject_zq_monitor1: url('@/assets/images/themify/deepblue/home-container/configurable/gasInjection/9-6.png');
+
+  }
+}
+
+.zq-monitor {
+  --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: 100%;
+  padding: 15px 30px;
+  box-sizing: border-box;
+
+  .nav-box {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    width: 100%;
+    height: 39px;
+    padding: 0px 20px;
+    background: var(--image-inject_zq_monitor) no-repeat;
+    background-size: 100% 100%;
+  }
+
+  .nav-btn {
+    width: 125px;
+    height: 78%;
+    padding: 2px;
+    border: 1px solid #1081d7;
+    cursor: pointer;
+    color: #fff;
+  }
+
+  .nav-text {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #1081d7;
+  }
+
+  .icon-style {
+    margin-right: 5px;
+  }
+
+  .main-content {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    height: calc(100% - 39px);
+    padding: 30px 0px 20px 0px;
+  }
+
+  .common-area {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    width: 320px;
+    height: 100%;
+  }
+
+  .area-item {
+    width: 100%;
+    height: calc(50% - 15px);
+  }
+
+  .center-area {
+    position: relative;
+    width: calc(100% - 640px);
+    height: 100%;
+  }
+
+  .center-content {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: 500px;
+    height: 315px;
+    border-radius: 20px;
+    box-shadow: inset 0px 0px 20px rgba(34, 142, 220, 0.8);
+  }
+
+  .line-L {
+    display: flex;
+    position: absolute;
+    left: 0;
+    top: 24px;
+    width: 90px;
+    height: 282px;
+  }
+
+  .line-R {
+    display: flex;
+    position: absolute;
+    right: 0;
+    top: 24px;
+    width: 90px;
+    height: 282px;
+  }
+
+  .line-L-1 {
+    width: 50%;
+    height: 100%;
+    border-top: 2px solid #277297;
+    border-right: 2px solid #277297;
+    border-bottom: 2px solid #277297;
+  }
+
+  .line-R-1 {
+    position: absolute;
+    left: 50%;
+    top: 0;
+    width: 50%;
+    height: 100%;
+    border-top: 2px solid #277297;
+    border-left: 2px solid #277297;
+    border-bottom: 2px solid #277297;
+  }
+
+  .t-icon {
+    position: absolute;
+    left: 0;
+    top: -8px;
+    width: 30px;
+    height: 18px;
+    background: var(--image-inject_zq_monitor1) no-repeat;
+    background-size: 100% 100%;
+  }
+
+  .t-icon-r {
+    position: absolute;
+    right: 0;
+    top: -10px;
+    width: 30px;
+    height: 18px;
+    background: var(--image-inject_zq_monitor1) no-repeat;
+    background-size: 100% 100%;
+    transform: rotate(180deg);
+  }
+
+  .t-icon1 {
+    position: absolute;
+    left: 0;
+    bottom: -8px;
+    width: 30px;
+    height: 18px;
+    background: var(--image-inject_zq_monitor1) no-repeat;
+    background-size: 100% 100%;
+  }
+
+  .t-icon-r1 {
+    position: absolute;
+    right: 0;
+    bottom: -10px;
+    width: 30px;
+    height: 18px;
+    background: var(--image-inject_zq_monitor1) no-repeat;
+    background-size: 100% 100%;
+    transform: rotate(180deg);
+  }
+
+  .line-L-2 {
+    position: absolute;
+    width: 50%;
+    height: 2px;
+    left: 50%;
+    top: 190px;
+    background-color: #277297;
+  }
+
+  .line-R-2 {
+    position: absolute;
+    width: 50%;
+    height: 2px;
+    left: 0;
+    top: 190px;
+    background-color: #277297;
+  }
+
+  .t-icon2 {
+    position: absolute;
+    right: 5px;
+    top: 182px;
+    width: 30px;
+    height: 18px;
+    background: var(--image-inject_zq_monitor1) no-repeat;
+    background-size: 100% 100%;
+  }
+
+  .t-icon2-r {
+    position: absolute;
+    left: 5px;
+    top: 182px;
+    width: 30px;
+    height: 18px;
+    background: var(--image-inject_zq_monitor1) no-repeat;
+    background-size: 100% 100%;
+    transform: rotate(180deg);
+  }
+
+
+}
+</style>

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

@@ -8,8 +8,8 @@ import { getThemifyImagesURL } from '/@/utils/ui';
 //注气驱替-主界面
 export const testConfigGasInject: Config[] = [
   {
-    deviceType: 'zy_device',
-    moduleName: '增压装备运行监测',
+    deviceType: 'gas_device_zyStatus',
+    moduleName: '气体增压装备状态',
     pageType: 'gas_injection',
     moduleData: {
       header: {
@@ -78,10 +78,10 @@ export const testConfigGasInject: Config[] = [
     },
   },
   {
-    deviceType: 'cc_gas',
+    deviceType: 'cc_gas_nd',
     moduleName: '抽采支管瓦斯浓度',
     pageType: 'gas_injection',
-    showDetail:true,
+    showDetail: true,
     moduleData: {
       header: {
         show: false,
@@ -145,6 +145,7 @@ export const testConfigGasInject: Config[] = [
     deviceType: 'cc_gas_ll',
     moduleName: '抽采支管瓦斯流量',
     pageType: 'gas_injection',
+    showDetail: true,
     moduleData: {
       header: {
         show: false,
@@ -400,8 +401,9 @@ export const testConfigGasInject: Config[] = [
     },
   },
   {
-    deviceType: 'zq-infos',
+    deviceType: 'gas_zq-yl',
     moduleName: '注气压力/流量',
+    showDetail: true,
     pageType: 'gas_injection',
     moduleData: {
       header: {
@@ -532,7 +534,7 @@ export const testConfigGasInjectZq: Config[] = [
     },
   },
   {
-    deviceType: 'monitor_sj',
+    deviceType: 'gas_zq_sj',
     moduleName: '注气数据监测',
     showDetail: true,
     pageType: 'gas_injection',
@@ -605,9 +607,10 @@ export const testConfigGasInjectZq: Config[] = [
     },
   },
   {
-    deviceType: 'monitor_hj',
+    deviceType: 'gas_zq_hj',
     moduleName: '环境监测',
     pageType: 'gas_injection',
+    showDetail: true,
     moduleData: {
       header: {
         show: false,
@@ -663,9 +666,10 @@ export const testConfigGasInjectZq: Config[] = [
     },
   },
   {
-    deviceType: 'zq_param-line',
+    deviceType: 'gas_zq_paramline',
     moduleName: '注气参数曲线',
     pageType: 'gas_injection',
+    showDetail: true,
     moduleData: {
       header: {
         show: false,
@@ -727,9 +731,10 @@ export const testConfigGasInjectZq: Config[] = [
     },
   },
   {
-    deviceType: 'video-monitor',
+    deviceType: 'gas_zq_video',
     moduleName: '视频监控',
     pageType: 'gas_injection',
+     showDetail: true,
     moduleData: {
       header: {
         show: false,
@@ -778,10 +783,9 @@ export const testConfigGasInjectZq: Config[] = [
 //注气驱替-抽采
 export const testConfigGasInjectCc: Config[] = [
   {
-    deviceType: 'cc-data',
+    deviceType: 'gas_cc_data',
     moduleName: '抽采数据显示',
     pageType: 'gas_injection',
-    showDetail: true,
     moduleData: {
       header: {
         show: false,
@@ -838,7 +842,7 @@ export const testConfigGasInjectCc: Config[] = [
     },
   },
   {
-    deviceType: 'cc-detail',
+    deviceType: 'gas_cc_detail',
     moduleName: '各抽采单元详情',
     pageType: 'gas_injection',
     showDetail: true,
@@ -892,8 +896,9 @@ export const testConfigGasInjectCc: Config[] = [
     },
   },
   {
-    deviceType: 'zq_param-line',
-    moduleName: '注气压力/流量',
+    deviceType: 'gas_cc_line',
+    moduleName: '抽采数据曲线',
+     showDetail: true,
     pageType: 'gas_injection',
     moduleData: {
       header: {