Merge branch 'master' of http://182.92.126.35:3000/hrx/mky-vent-base

src/components/chart/SingLineArea.vue

@@ -0,0 +1,115 @@
+<template>
+  <div ref="chartRef" :style="{ height, width }"></div>
+</template>
+<script lang="ts">
+import { defineComponent, PropType, ref, Ref, reactive, watchEffect } from 'vue';
+import { useECharts } from '/@/hooks/web/useECharts';
+import { cloneDeep } from 'lodash-es';
+export default defineComponent({
+  name: 'single-line',
+  props: {
+    chartData: {
+      type: Array,
+      default: () => [],
+    },
+    option: {
+      type: Object,
+      default: () => ({}),
+    },
+    width: {
+      type: String as PropType<string>,
+      default: '100%',
+    },
+    height: {
+      type: String as PropType<string>,
+      default: '100%',
+    },
+  },
+  setup(props) {
+    const chartRef = ref<HTMLDivElement | null>(null);
+    const { setOptions, echarts } = useECharts(chartRef as Ref<HTMLDivElement>);
+    const option = reactive({
+
+      tooltip: {
+        trigger: 'axis',
+        backgroundColor: 'rgba(0, 0, 0, .6)',
+        textStyle: {
+          color: '#fff',
+          fontSize: 12,
+        },
+      },
+      legend: {
+        // right: 'center',
+        top: '4%',
+        type: 'plain',
+        textStyle: {
+          color: '#fff',
+          fontSize: 12,
+        },
+        // icon:'rect',
+        itemGap: 15,
+        itemWidth: 10,
+        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: [],
+      },
+      xAxis: {
+        type: 'category',
+        data: [],
+      },
+      yAxis: {
+        type: 'value',
+      },
+      series: [],
+    });
+
+    watchEffect(() => {
+      initCharts();
+      // props.chartData && initCharts();
+    });
+
+    function initCharts() {
+      if (props.option) {
+        Object.assign(option, cloneDeep(props.option));
+      }
+      let seriesData = props.chartData.map((item, index) => {
+        return item.val;
+      });
+      let seriesData1 = props.chartData.map((item, index) => {
+        return item.val1;
+      });
+      let seriesData2 = props.chartData.map((item, index) => {
+        return item.val2;
+      });
+      let xAxisData = props.chartData.map((item) => {
+        return item.name;
+      });
+      let legendData = option.series.map(item => {
+        return {
+          name: item.name
+        }
+      })
+
+      option.series.forEach((el: any, index) => {
+        if (el.data == 'val') {
+          option.series[index].data = seriesData;
+        } else if (el.data == 'val1') {
+          option.series[1].data = seriesData1;
+        } else if (el.data == 'val2') {
+          option.series[2].data = seriesData2;
+        }
+      });
+
+
+
+      option.xAxis.data = xAxisData;
+      option.legend.data = legendData
+      setOptions(option);
+      //   window.onresize = function () {
+      //   myChart.resize();
+      // };
+    }
+
+    return { chartRef };
+  },
+});
+</script>

src/views/vent/deviceManager/deviceTable/device.api.ts

@@ -3,14 +3,19 @@ import { Modal } from 'ant-design-vue';
 
 enum Api {
   list = '/safety/ventanalyDeviceInfo/list',
+  footageList = '/safety/fteGasReg/list',
   queryById = '/safety/ventanalyDeviceInfo/queryById',
   save = '/safety/ventanalyDeviceInfo/add',
+  saveF = '/safety/fteGasReg/add',
   edit = '/safety/ventanalyDeviceInfo/edit',
+  editF = '/safety/fteGasReg/edit',
   deleteById = '/safety/ventanalyDeviceInfo/delete',
+  deleteByIdF = '/safety/fteGasReg/delete',
   deleteBatch = '/safety/ventanalyDeviceInfo/deleteBatch',
   importExcel = '/sys/user/importExcel',
   exportXls = '/safety/ventanalyMonitorParams/exportXls',
   importExcel1 = '/safety/gasDayReport/importByExcel',
+
 }
 /**
  * 导出api
@@ -31,6 +36,12 @@ export const getImportUrl1 = Api.importExcel1;
  */
 export const list = (params) => defHttp.get({ url: Api.list, params });
 
+/**
+ * 列表接口-进尺与瓦斯涌出
+ * @param params
+ */
+export const footageList = (params) => defHttp.get({ url: Api.footageList, params });
+
 export const queryById = (params) => defHttp.get({ url: Api.queryById, params });
 
 /**
@@ -41,6 +52,14 @@ export const deleteById = (params, handleSuccess) => {
     handleSuccess();
   });
 };
+/**
+ * 删除用户-进尺与瓦斯涌出
+ */
+export const deleteByIdF = (params, handleSuccess) => {
+  return defHttp.delete({ url: Api.deleteById, params }, { joinParamsToUrl: true }).then(() => {
+    handleSuccess();
+  });
+};
 /**
  * 批量删除用户
  * @param params
@@ -66,3 +85,17 @@ export const saveOrUpdate = (params, isUpdate) => {
   const url = isUpdate ? Api.edit : Api.save;
   return isUpdate ? defHttp.put({ url: url, params }) : defHttp.post({ url: url, params });
 };
+/**
+ * 保存或者更新用户-进尺与瓦斯涌出
+ * @param params
+ */
+export const saveOrUpdateF = (params, isUpdate) => {
+  const url = isUpdate ? Api.editF : Api.saveF;
+  return isUpdate ? defHttp.put({ url: url, params }) : defHttp.post({ url: url, params });
+};
+
+/**
+ * 列表接口
+ * @param params
+ */
+export const listF = (params) => defHttp.get({ url: Api.list, params });

src/views/vent/deviceManager/deviceTable/device.data.ts

@@ -1,6 +1,8 @@
 import { BasicColumn } from '/@/components/Table';
 import { FormSchema } from '/@/components/Table';
 import { list } from '../substationTabel/substation.api';
+import { listF } from './device.api';
+import { getAutoScrollContainer } from '/@/utils/common/compUtils';
 
 export const columns: BasicColumn[] = [
   {
@@ -78,6 +80,36 @@ export const searchFormSchema: FormSchema[] = [
   },
 ];
 
+export const searchFormSchemaF: FormSchema[] = [
+  {
+    label: '设备类型',
+    field: 'devId',
+    component: 'ApiSelect',
+    colProps: { span: 6 },
+    componentProps: {
+      api: listF.bind(null, { devicekind: 'footageGas' }),
+      labelField: 'strname',
+      valueField: 'id',
+       resultField: 'records',
+    },
+  },
+
+  {
+    field: 'starttime',
+    label: '日期',
+    component: 'DatePicker',
+    componentProps: {
+      showTime: false,
+      valueFormat: 'YYYY-MM-DD',
+      getPopupContainer: getAutoScrollContainer,
+    },
+    colProps: {
+      span: 4,
+    },
+  },
+
+];
+
 export const formSchema: FormSchema[] = [
   {
     label: '',

src/views/vent/deviceManager/deviceTable/index-footage.vue

@@ -0,0 +1,190 @@
+<template>
+  <div class="device-manager-box">
+    <NormalTable
+      v-if="isRefresh"
+      :columns="columns"
+      :searchFormSchema="searchFormSchemaF"
+      :list="footageList"
+      :formSchema="formSchema"
+      :deleteById="deleteByIdF"
+      :saveOrUpdate="saveOrUpdateF"
+      designScope="device-tabel"
+      title="进尺与瓦斯涌出列表"
+      :showTab="true"
+      :deviceType="deviceType"
+    />
+  </div>
+</template>
+
+<script lang="ts" name="system-user" setup>
+  //ts语法
+  import { ref, onMounted, unref } from 'vue';
+  import NormalTable from '../comment/NormalTable.vue';
+  import { footageList, deleteByIdF, batchDeleteById, saveOrUpdateF, getImportUrl1 } from './device.api';
+  import { list as substationList } from '../substationTabel/substation.api';
+
+  import { searchFormSchemaF } from './device.data';
+  import { FormSchema } from '/@/components/Table';
+  import { getFormSchemaColumns, getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
+  import { useRouter } from 'vue-router';
+  import { getAutoScrollContainer } from '/@/utils/common/compUtils';
+
+  const { currentRoute } = useRouter();
+
+  const formSchema = ref<FormSchema[]>([]);
+  const isRefresh = ref(false);
+
+  const deviceType = ref('');
+
+  const columns = ref<any[]>([]);
+
+  const arrToFormColumns = (tableHeaderColumns = []) => {
+    const columnList: any[] = [];
+    tableHeaderColumns.forEach((item: any) => {
+      let columnsItem;
+      if (item.type == 1 || item.type == 10) {
+        columnsItem = {
+          label: item.des, //_dictText
+          field: item.monitorcode,
+          component: item.type == 1 ? 'Input' : item.type == 10 ? 'InputTextArea' : '',
+        };
+      } else {
+        if (item.type == 2 && item['monitorcode'] == 'nsubstationid') {
+          columnsItem = {
+            label: item.des, //_dictText
+            field: item.monitorcode,
+            component: 'ApiSelect',
+            componentProps: {
+              api: substationList,
+              labelField: 'strname',
+              valueField: 'id',
+            },
+          };
+        }
+        if (item.type == 3) {
+          columnsItem = {
+            label: item.des, //_dictText
+            field: item.monitorcode,
+            component: 'RadioGroup',
+            defaultValue: 1,
+            componentProps: () => {
+              return {
+                options: [
+                  { label: '是', value: 1, key: '1' },
+                  { label: '否', value: 0, key: '2' },
+                ],
+                stringToNumber: true,
+              };
+            },
+          };
+        }
+        if (item.type == 4) {
+          columnsItem = {
+            label: item.des, //_dictText
+            field: item.monitorcode,
+            component: 'JDictSelectTag',
+            componentProps: {
+              dictCode: item.dict,
+              placeholder: '请选择',
+              // stringToNumber: true,
+            },
+          };
+        }
+        // date日期
+        if (item.type == 8) {
+          columnsItem = {
+            label: item.des, //_dictText
+            field: item.monitorcode,
+            component: 'DatePicker',
+            componentProps: {
+              showTime: false,
+              valueFormat: 'YYYY-MM-DD',
+              getPopupContainer: getAutoScrollContainer,
+            },
+          };
+        }
+        // 日期+时间
+        if (item.type == 9) {
+          columnsItem = {
+            label: item.des, //_dictText
+            field: item.monitorcode,
+            component: 'DatePicker',
+            componentProps: {
+              showTime: true,
+              valueFormat: 'YYYY-MM-DD HH:mm:ss',
+              getPopupContainer: getAutoScrollContainer,
+            },
+          };
+        }
+      }
+      columnList.push(columnsItem);
+    });
+    formSchema.value = columnList;
+    formSchema.value.unshift(
+      {
+        label: '设备id', //_dictText
+        field: 'id',
+        component: 'Input',
+        componentProps: {
+          disabled: true,
+        },
+      },
+      {
+        label: '点表',
+        field: 'strtype',
+        component: 'JDictSelectTag',
+        componentProps: {
+          dictCode: `${deviceType.value}kind`,
+          placeholder: '请选择点表',
+          // stringToNumber: true,
+        },
+      }
+    );
+    formSchema.value.push(
+      {
+        label: '设备排序', //_dictText
+        field: 'orderNum',
+        component: 'InputNumber',
+      },
+      {
+        label: '备用分站',
+        field: 'stationids',
+        component: 'ApiSelect',
+        componentProps: {
+          api: substationList,
+          labelField: 'strname',
+          valueField: 'id',
+        },
+      },
+      {
+        label: '是否显示',
+        field: 'linkId',
+        component: 'RadioGroup',
+        defaultValue: 1,
+        componentProps: () => {
+          return {
+            options: [
+              { label: '是', value: 1, key: '1' },
+              { label: '否', value: 0, key: '2' },
+            ],
+            stringToNumber: true,
+          };
+        },
+      }
+    );
+  };
+
+  onMounted(() => {
+    const route = unref(currentRoute);
+    const pageType = route.name;
+    deviceType.value = pageType;
+    // searchFormSchema[0].componentProps['dictCode'] = `${deviceType.value}kind`;
+    columns.value = getTableHeaderColumns(`${deviceType.value}_list`) || [];
+    const formSchemaColumns = getFormSchemaColumns(`${deviceType.value}_edit`) || [];
+
+    arrToFormColumns(formSchemaColumns);
+    isRefresh.value = true;
+  });
+</script>
+
+<style scoped></style>

src/views/vent/monitorManager/deviceMonitor/components/device/index.vue

@@ -23,10 +23,6 @@
     <div v-if="deviceType.startsWith('gasDay_normal') && activeKey == 'monitor'" class="inspect-info-xj">
       <gasInspectDialog :gasSearch="gasSearch"></gasInspectDialog>
     </div>
-    <!-- 基于大气压预测氧气浓度  v-if="deviceType.startsWith('sys_surface_junya')"-->
-    <div class="inspect-info-xj">
-      <CustomChart :chart-config="PressO2Option" :chart-data="chartData" height="220px"></CustomChart>
-    </div>
     <div
       class="location-icon"
       :class="{ 'location-btn-show': !locationSettingShow, 'location-btn-hide': locationSettingShow }"
@@ -690,9 +686,7 @@ import { useMethods } from '/@/hooks/system/useMethods';
 import { useGo } from '/@/hooks/web/usePage';
 import { useGlobSetting } from '/@/hooks/setting';
 import { usePermission } from '/@/hooks/web/usePermission';
-import CustomChart from '@/views/vent/home/configurable/components/detail/CustomChart.vue';
-import { PressO2Option } from '@/views/vent/monitorManager/balancePressMonitor/balancePressO2.data';
-import { getO2PressData } from '@/views/vent/monitorManager/balancePressMonitor/balancePress.api';
+
 type DeviceType = { deviceType: string; deviceName: string; datalist: any[] };
 const glob = useGlobSetting();
 // import { BorderBox8 as DvBorderBox8 } from '@kjgl77/datav-vue3';
@@ -776,9 +770,6 @@ let gasSearch = reactive({
   insType: '2',
   class: 'night',
 });
-const chartData = ref<any[]>([]);
-const O2PressDataFetched = ref(false);
-const modelsensorO2Data = ref<any[]>([]);
 //树形菜单选择事件
 const onSelect: TreeProps['onSelect'] = (keys, e) => {
   deviceType.value = '';
@@ -1114,16 +1105,6 @@ async function processReadData(data: any[]) {
     });
   await Promise.all(promises);
 }
-//获取氧气浓度 大气压数据
-async function getO2Press(params) {
-  const deviceID = params[0].deviceID;
-  const param = {
-    deviceId: deviceID,
-  };
-  chartData.value = [];
-  const res = await getO2PressData(param);
-  chartData.value = [...res.o2HistoryDataList, ...res.o2List];
-}
 //设备分站详情跳转
 function stationDetail() {
   const newPage = router.resolve({ path: '/safety/list/detail/home' });

src/views/vent/monitorManager/footageMonitor/components/moduleCommon.vue

@@ -0,0 +1,230 @@
+<template>
+  <div class="monitor-container">
+    <div class="lr left-box">
+      <ventBox1>
+        <template #title>
+          <div>通风参数监测</div>
+        </template>
+        <template #container>
+          <div class="container-t">
+            <ModuleHead :menuData="menuList" :timeDate="timeDate" :devID="devID" :devLabel="devLabel"
+              @changeMenu="changeMenu" @changeTime="changeTime"></ModuleHead>
+          </div>
+          <div class="container-b">
+            <SingLineArea :option="option" :chartData="chartData" height="280px"></SingLineArea>
+          </div>
+        </template>
+      </ventBox1>
+      <ventBox1 class="vent-margin-t-10">
+        <template #title>
+          <div>瓦斯浓度及风量监测</div>
+        </template>
+        <template #container>
+          <div class="container-t">
+            <ModuleHead :menuData="gasMenuList" :timeDate="timeDate" :devLabel="gasDevLabel" @changeMenu="changeGasMenu"
+              @changeTime="changeTime"></ModuleHead>
+          </div>
+          <div class="container-b">
+            <BarAndLine class="echarts-line" :xAxisPropType="xAxisPropType" :dataSource="gasList" height="280px"
+              :chartsColumns="chartsColumns" :option="echatsOption" />
+          </div>
+
+        </template>
+      </ventBox1>
+
+    </div>
+    <div class="lr right-box">
+      <div class="item-box sensor-container">
+        <ventBox1>
+          <template #title>
+            <div>工作面进尺及瓦斯涌出量</div>
+          </template>
+          <template #container>
+            <SingLineArea :option="optionGas" :chartData="chartGasData" height="280px"></SingLineArea>
+          </template>
+        </ventBox1>
+
+      </div>
+    </div>
+  </div>
+
+</template>
+
+<script setup lang="ts">
+
+import { onBeforeMount, ref, onMounted, onUnmounted, reactive, defineProps, } from 'vue';
+import ventBox1 from '/@/components/vent/ventBox1.vue'
+import SingLineArea from '@/components/chart/SingLineArea.vue'
+import BarAndLine from '@/components/chart/BarAndLine.vue';
+import ModuleHead from './moduleHead.vue'
+import { option, gasMenuList, chartsColumns, echatsOption, optionGas } from '../footage.data'
+import { list, getCurveGraphData } from '../footage.api';
+import dayjs from 'dayjs';
+
+let paramData = ref<any[]>([])
+let menuList = ref<any[]>([])
+let devID = ref('')
+let devLabel = ref('')
+let timeDate = reactive({
+  startTime: dayjs().subtract(7, 'day').format('YYYY-MM-DD'),
+  endTime: dayjs().format('YYYY-MM-DD'),
+})
+const chartData = ref<any[]>([]);
+let gasDevLabel = ref('T0（上隅角）')
+const xAxisPropType = ref('ttime');
+let gasList = ref<any[]>([]);
+let chartGasData = ref<any[]>([])
+
+// https获取监测数据
+let timer: null | NodeJS.Timeout = null;
+function getMonitor(flag?) {
+  if (Object.prototype.toString.call(timer) === '[object Null]') {
+    timer = setTimeout(async () => {
+      getCurveGraphDataList()
+      if (timer) {
+        timer = null;
+      }
+      await getMonitor();
+    }, flag ? 0 : 10000);
+  }
+};
+async function getCurveGraphDataList() {
+  let res = await getCurveGraphData({ devId: devID.value, startTime: timeDate.startTime, endTime: timeDate.endTime })
+  if (res.length) {
+    paramData.value = res
+    chartData.value = res.map(el => {
+      return {
+        name: el.fteTime,
+        val: el.planFte,
+        val1: el.ateFte,
+        val2: el.sumFte
+      }
+    }) || []
+    gasList.value = res.map(d => {
+      let data = JSON.parse(d.gasInfo)
+      return {
+        ttime: d.fteTime,
+        wsnd: data.gasVal0Ave,
+        xdnd: data.gasVal0Rel,
+        jdnd: data.gasVal0Abs,
+        m3Ave: data.m3Ave
+      }
+    }) || []
+    chartGasData.value = res.map(c => {
+      let data = JSON.parse(c.gasInfo)
+      return {
+        name: c.fteTime,
+        val: c.ateFte,
+        val1: data.gasVal0Ave,
+      }
+    }) || []
+  }
+}
+
+async function getMenuList() {
+  let res = await list({ devicekind: 'footageGas' })
+  menuList.value = res.records.map(el => {
+    return {
+      label: el.strname,
+      value: el.id,
+    }
+  }) || []
+  devID.value = menuList.value[0].value
+  devLabel.value = menuList.value[0].label
+}
+function changeMenu(param) {
+  devID.value = param.id
+  getCurveGraphDataList()
+}
+function changeGasMenu(param) {
+  gasDevLabel.value = param.label
+  switch (param.label) {
+    case 'T0（上隅角）':
+      gasList.value = paramData.value.map(d => {
+        let data = JSON.parse(d.gasInfo)
+        return {
+          ttime: d.fteTime,
+          wsnd: data.gasVal0Ave,
+          xdnd: data.gasVal0Rel,
+          jdnd: data.gasVal0Abs,
+          m3Ave: data.m3Ave
+        }
+      })
+      break;
+    case 'T1（回风流距工作面割煤线10m范围内）':
+      gasList.value = paramData.value.map(d => {
+        let data = JSON.parse(d.gasInfo)
+        return {
+          ttime: d.fteTime,
+          wsnd: data.gasVal1Ave,
+          xdnd: data.gasVal1Rel,
+          jdnd: data.gasVal1Abs,
+          m3Ave: data.m3Ave
+        }
+      })
+      break;
+    case 'T2（回风绕道口10～15m处）':
+      gasList.value = paramData.value.map(d => {
+        let data = JSON.parse(d.gasInfo)
+        return {
+          ttime: d.fteTime,
+          wsnd: data.gasVal2Ave,
+          xdnd: data.gasVal2Rel,
+          jdnd: data.gasVal2Abs,
+          m3Ave: data.m3Ave
+        }
+      })
+      break;
+  }
+}
+function changeTime(param) {
+  console.log(param, 'param===')
+  timeDate.startTime = param.startTime
+  timeDate.endTime = param.endTime
+  getCurveGraphDataList()
+}
+
+onMounted(async () => {
+  timer = null
+  await getMenuList()
+  await getMonitor(true)
+});
+onUnmounted(() => {
+  if (timer) {
+    clearTimeout(timer);
+    timer = undefined;
+  }
+});
+</script>
+
+<style lang="less">
+@import '/@/design/vent/modal.less';
+
+.@{ventSpace}-select-dropdown {
+  background: #ffffff !important;
+  border-bottom: 1px solid rgba(236, 236, 236, 0.4);
+  backdrop-filter: blur(10px);
+
+  .@{ventSpace}-select-item-option-selected,
+  .@{ventSpace}-select-item-option-active {
+    background-color: #ffffff33 !important;
+  }
+
+  .@{ventSpace}-select-item:hover {
+    background-color: #ffffff33 !important;
+  }
+}
+</style>
+
+<style lang="less" scoped>
+@import '../../comment/less/workFace.less';
+@ventSpace: zxm;
+
+.left-box {
+  margin-top: 0 !important;
+}
+
+.right-box {
+  margin-top: 0 !important;
+}
+</style>

src/views/vent/monitorManager/footageMonitor/components/moduleHead.vue

@@ -0,0 +1,161 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <!-- Header部分 -->
+  <div class="w-100% flex costume-header">
+    <!-- 选择下拉框，自动填充剩余空间，这种实现是因为 Select 不支持 suffix -->
+    <Dropdown class="flex-grow-1 costume-header_left" :trigger="['click']" :bordered="false"
+      @open-change="visible = $event">
+      <div class="flex-basis-100% flex flex-items-center" @click.prevent>
+        <SwapOutlined class="w-30px" />
+        <div class="w-100px flex-grow-1 overflow-hidden whitespace-nowrap text-ellipsis">
+          {{ selectedDeviceLabel }}
+        </div>
+        <CaretUpOutlined class="w-30px" v-if="visible" />
+        <CaretDownOutlined class="w-30px" v-else />
+      </div>
+      <template #overlay>
+        <Menu :selected-keys="[selectedDeviceID]" @click="selectHandler">
+          <MenuItem v-for="item in menuData" :key="item.value" :title="item.label">
+          {{ item.label }}
+          </MenuItem>
+        </Menu>
+      </template>
+    </Dropdown>
+
+    <div class="flex-basis-100% flex flex-items-center flex-grow-1 costume-header_right">
+      <a-range-picker :showTime="false" valueFormat="YYYY-MM-DD" :value="[chartParams.startTime, chartParams.endTime]"
+        :bordered="false" @change="onRangeChange" />
+    </div>
+
+  </div>
+</template>
+<script lang="ts" setup>
+import { ref, reactive, onMounted, watch, watchEffect } from 'vue';
+import { MenuItem, Menu, Dropdown } from 'ant-design-vue';
+import { SwapOutlined, CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons-vue';
+
+let props = defineProps({
+  menuData: {
+    type: Array,
+    default: () => {
+      return []
+    }
+  },
+  timeDate: {
+    type: Object,
+    default: () => {
+      return {}
+    }
+  },
+  devLabel: {
+    type: String,
+    default: ''
+  },
+  devID: {
+    type: String,
+    default: ''
+  }
+})
+
+
+
+const visible = ref(false);
+let selectedDeviceLabel = ref('')
+
+let selectedDeviceID = ref('')
+const chartParams = reactive({
+  startTime: '',
+  endTime: '',
+});
+let $emit=defineEmits(['changeMenu','changeTime'])
+
+
+
+
+
+
+
+function selectHandler({ key }) {
+  selectedDeviceID.value = key;
+  selectedDeviceLabel.value = props.menuData.find((el: any) => el.value == key)?.label || ''
+ $emit('changeMenu',{id:selectedDeviceID.value,label:selectedDeviceLabel.value}) 
+}
+
+function onRangeChange(__, time) {
+  chartParams.startTime = time[0];
+  chartParams.endTime = time[1];
+  $emit('changeTime',chartParams)
+}
+
+watchEffect(() => {
+  selectedDeviceLabel.value = props.devLabel
+  selectedDeviceID.value = props.devID
+  chartParams.startTime = props.timeDate.startTime
+  chartParams.endTime = props.timeDate.endTime
+
+})
+
+
+
+
+
+</script>
+<style scoped>
+@import '/@/design/theme.less';
+
+.costume-header {
+  height: 30px;
+  background-image: linear-gradient(90deg, var(--vent-base-light-bg-opcity), transparent 20%, transparent 80%, var(--vent-base-light-bg-opcity));
+}
+
+.costume-header_left {
+  border-left: 3px solid;
+  border-right: 3px solid;
+  border-image-source: linear-gradient(to top, #00000033, var(--vent-base-light-bg), #00000033);
+  border-image-slice: 1;
+}
+
+.costume-header_right {
+  border-right: 3px solid;
+  border-image-source: linear-gradient(to top, #00000033, var(--vent-base-light-bg), #00000033);
+  border-image-slice: 1;
+}
+
+::v-deep .zxm-select:not(.zxm-select-customize-input) .zxm-select-selector {
+  /* background-color: transparent; */
+  color: #fff;
+}
+
+::v-deep .zxm-select-arrow {
+  color: #fff;
+}
+
+::v-deep .zxm-select-selection-item {
+  color: #fff !important;
+}
+
+::v-deep .zxm-select-selection-placeholder {
+  color: #fff !important;
+}
+
+::v-deep .zxm-picker {
+  padding: 4px 2px 4px;
+  background: transparent;
+}
+
+::v-deep .zxm-picker-input>input {
+  color: #fff;
+}
+
+::v-deep .zxm-picker-range-separator {
+  padding: 0px 2px;
+}
+
+::v-deep .zxm-picker-separator {
+  color: #fff;
+}
+
+::v-deep .zxm-picker-suffix {
+  color: #fff;
+}
+</style>

src/views/vent/monitorManager/footageMonitor/footage.api.ts

@@ -0,0 +1,22 @@
+import { defHttp } from '/@/utils/http/axios';
+import { Modal } from 'ant-design-vue';
+
+enum Api {
+  list = '/safety/ventanalyDeviceInfo/list',
+ 
+   getCurveGraphData = '/safety/fteGasReg/getCurveGraphData',
+  
+
+}
+
+/**
+ * 列表接口
+ * @param params
+ */
+export const list = (params) => defHttp.get({ url: Api.list, params });
+
+/**
+ * 列表接口
+ * @param params
+ */
+export const getCurveGraphData = (params) => defHttp.post({ url: Api.getCurveGraphData, params });

src/views/vent/monitorManager/footageMonitor/footage.data.ts

@@ -0,0 +1,361 @@
+import { Config } from '@/views/vent/deviceManager/configurationTable/types';
+import * as echarts from 'echarts';
+
+export const option = {
+  grid: {
+    top: '14%',
+    left: '12%',
+    bottom: '12%',
+    right: '10%',
+    //   containLabel: true,
+  },
+  xAxis: {
+    type: 'category',
+    boundaryGap: false,
+    axisLabel: {
+      // formatter: '{value}',
+      fontSize: 12,
+      margin: 10,
+      textStyle: {
+        color: '#b3b8cc',
+      },
+      // interval: 0,
+    },
+    axisLine: {
+      lineStyle: {
+        color: '#244a94',
+      },
+    },
+    splitLine: {
+      show: true,
+      lineStyle: {
+        color: '#0d2973',
+        type: 'dashed',
+      },
+    },
+    axisTick: {
+      show: false,
+    },
+
+  },
+  yAxis: {
+    boundaryGap: false,
+    name: '',
+    type: 'value',
+    // max: props.maxY,
+    // min:props.minY,
+    axisLabel: {
+      textStyle: {
+        color: '#b3b8cc',
+      },
+    },
+    nameTextStyle: {
+      color: '#fff',
+      fontSize: 12,
+      lineHeight: 5,
+    },
+    splitLine: {
+      lineStyle: {
+        color: '#0d2973',
+        type: 'dashed',
+      },
+    },
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: '#244a94',
+      },
+    },
+    axisTick: {
+      show: false,
+    },
+  },
+  series: [
+    {
+      name: '计划进尺',
+      type: 'line',
+      smooth: false,
+      showSymbol: true,
+      zlevel: 3,
+      itemStyle: {
+        color: '#4874cb',
+        borderColor: 'red',
+      },
+      lineStyle: {
+        normal: {
+          width: 2,
+          color: '#4874cb',
+        },
+      },
+      data: 'val',
+    },
+    {
+      name: '实际进尺',
+      type: 'line',
+      smooth: false,
+      showSymbol: true,
+      zlevel: 3,
+      itemStyle: {
+        color: '#ee822f',
+        borderColor: '#a3c8d8',
+      },
+      lineStyle: {
+        normal: {
+          width: 2,
+          color: '#ee822f',
+        },
+      },
+
+      data: 'val1',
+    },
+    {
+      name: '累计进尺',
+      type: 'line',
+      smooth: false,
+      showSymbol: true,
+      zlevel: 3,
+      itemStyle: {
+        color: '#f2ba02',
+        borderColor: '#a3c8d8',
+      },
+      lineStyle: {
+        normal: {
+          width: 2,
+          color: '#f2ba02',
+        },
+      },
+      areaStyle: {
+        normal: {
+          color: new echarts.graphic.LinearGradient(
+            0,
+            0,
+            0,
+            1,
+            [
+              {
+                offset: 0,
+                color: 'rgba(242, 186, 2,0.8)',
+              },
+              {
+                offset: 0.5,
+                color: 'rgba(242, 186, 2,0.4)',
+              },
+              {
+                offset: 0.9,
+                color: 'rgba(242, 186, 2,0)',
+              },
+            ],
+            false
+          ),
+        },
+      },
+      data: 'val2',
+    },
+  ]
+};
+export const optionGas = {
+  grid: {
+    top: '14%',
+    left: '12%',
+    bottom: '12%',
+    right: '10%',
+    //   containLabel: true,
+  },
+  xAxis: {
+    type: 'category',
+    boundaryGap: false,
+    axisLabel: {
+      // formatter: '{value}',
+      fontSize: 12,
+      margin: 10,
+      textStyle: {
+        color: '#b3b8cc',
+      },
+      // interval: 0,
+    },
+    axisLine: {
+      lineStyle: {
+        color: '#244a94',
+      },
+    },
+    splitLine: {
+      show: true,
+      lineStyle: {
+        color: '#0d2973',
+        type: 'dashed',
+      },
+    },
+    axisTick: {
+      show: false,
+    },
+
+  },
+  yAxis: {
+    boundaryGap: false,
+    name: '',
+    type: 'value',
+    // max: props.maxY,
+    // min:props.minY,
+    axisLabel: {
+      textStyle: {
+        color: '#b3b8cc',
+      },
+    },
+    nameTextStyle: {
+      color: '#fff',
+      fontSize: 12,
+      lineHeight: 5,
+    },
+    splitLine: {
+      lineStyle: {
+        color: '#0d2973',
+        type: 'dashed',
+      },
+    },
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: '#244a94',
+      },
+    },
+    axisTick: {
+      show: false,
+    },
+  },
+  series: [
+    {
+      name: '工作面进尺',
+      type: 'line',
+      smooth: false,
+      showSymbol: true,
+      zlevel: 3,
+      itemStyle: {
+        color: '#4874cb',
+        borderColor: 'red',
+      },
+      lineStyle: {
+        normal: {
+          width: 2,
+          color: '#4874cb',
+        },
+      },
+      data: 'val',
+    },
+
+    {
+      name: '瓦斯浓度',
+      type: 'line',
+      smooth: false,
+      showSymbol: true,
+      zlevel: 3,
+      itemStyle: {
+        color: '#f2ba02',
+        borderColor: '#a3c8d8',
+      },
+      lineStyle: {
+        normal: {
+          width: 2,
+          color: '#f2ba02',
+        },
+      },
+      areaStyle: {
+        normal: {
+          color: new echarts.graphic.LinearGradient(
+            0,
+            0,
+            0,
+            1,
+            [
+              {
+                offset: 0,
+                color: 'rgba(242, 186, 2,0.8)',
+              },
+              {
+                offset: 0.5,
+                color: 'rgba(242, 186, 2,0.4)',
+              },
+              {
+                offset: 0.9,
+                color: 'rgba(242, 186, 2,0)',
+              },
+            ],
+            false
+          ),
+        },
+      },
+      data: 'val1',
+    },
+  ]
+};
+
+export let gasMenuList = [
+  { label: 'T0（上隅角）', value: '1' },
+  { label: 'T1（回风流距工作面割煤线10m范围内）', value: '2' },
+  { label: 'T2（回风绕道口10～15m处）', value: '3' },
+]
+
+export const chartsColumns = [
+
+  {
+    legend: '瓦斯浓度',
+    seriesName: '(ppm)',
+    ymax: 15,
+    yname: 'ppm',
+    linetype: 'line',
+    yaxispos: 'left',
+    color: '#00FFA8',
+    sort: 1,
+    xRotate: 0,
+    dataIndex: '瓦斯浓度',
+  },
+  {
+    legend: '瓦斯相对浓度',
+    seriesName: '',
+    ymax: 15,
+    yname: 'ppm',
+    linetype: 'line',
+    yaxispos: 'left',
+    color: '#9C83D9',
+    sort: 1,
+    xRotate: 0,
+    dataIndex: 'xdnd',
+  },
+  {
+    legend: '瓦斯绝对浓度',
+    seriesName: '',
+    ymax: 15,
+    yname: 'ppm',
+    linetype: 'line',
+    yaxispos: 'left',
+    color: '#FDB146',
+    sort: 1,
+    xRotate: 0,
+    dataIndex: 'jdnd',
+  },
+  {
+    legend: '风量',
+    seriesName: '(m³/s)',
+    ymax: 15,
+    yname: 'm³/s',
+    linetype: 'line',
+    yaxispos: 'right',
+    color: '#03C2EC',
+    sort: 2,
+    xRotate: 0,
+    dataIndex: 'm3Ave',
+  },
+]
+
+
+export const echatsOption = {
+  grid: {
+    top: '32%',
+    left: '0',
+    right: '1%',
+    bottom: '3%',
+    containLabel: true,
+  },
+  toolbox: {
+    feature: null,
+  },
+};

src/views/vent/monitorManager/footageMonitor/index.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="footage-box">
+    <customHeader>进尺与瓦斯涌出分析</customHeader>
+    <div class="box-container">
+      <ModuleCommon ></ModuleCommon>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onBeforeMount, ref, onMounted, onUnmounted, nextTick,provide } from 'vue';
+
+import customHeader from '/@/components/vent/customHeader.vue';
+import ModuleCommon from './components/moduleCommon.vue';
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+onUnmounted(() => {});
+
+</script>
+<style lang="less" scoped>
+@import '/@/design/theme.less';
+@ventSpace: zxm;
+
+
+.footage-box {
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  .box-container {
+    margin-top: 80px;
+    height: calc(100% - 80px);
+  }
+}
+</style>