更新

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

@@ -31,11 +31,15 @@ function getMonitor(flag?) {
       await upcomingList()
       //获取左侧菜单数据
       await getMenuList()
+      if (timer) {
+        timer = null;
+      }
       getMonitor(false);
     },
-    flag ? 0 : 10000
+    flag ? 0 : 5000
   );
 }
+
 //左侧数据
 async function getMenuList() {
   let res = await getDevice({ devicetype: "gate", pagetype: "normal" })
@@ -54,7 +58,7 @@ async function upcomingList() {
 
 onMounted(() => {
   getMenuList()
-  getMonitor()
+  getMonitor(true)
 })
 onUnmounted(() => {
   if (timer) {

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

@@ -7,8 +7,7 @@
         </template>
         <template #container>
           <div class="container-t">
-            <ModuleHead :menuData="menuList" :timeDate="timeDate" :devID="devID" :devLabel="devLabel"
-              @changeMenu="changeMenu" @changeTime="changeTime"></ModuleHead>
+            <ModuleHead  :timeDate="timeDate" @changeTime="changeTime"></ModuleHead>
           </div>
           <div class="container-b">
             <SingLineArea :option="option" :chartData="chartData" height="280px"></SingLineArea>
@@ -21,7 +20,7 @@
         </template>
         <template #container>
           <div class="container-t">
-            <ModuleHead :menuData="gasMenuList" :timeDate="timeDate" :devLabel="gasDevLabel" @changeMenu="changeGasMenu"
+            <ModuleHead :isShowSelect="true" :menuData="gasMenuList" :timeDate="timeDate" :devLabel="gasDevLabel" @changeMenu="changeGasMenu"
               @changeTime="changeTime"></ModuleHead>
           </div>
           <div class="container-b">
@@ -52,7 +51,7 @@
 
 <script setup lang="ts">
 
-import { onBeforeMount, ref, onMounted, onUnmounted, reactive, defineProps, } from 'vue';
+import {  ref, onMounted, onUnmounted, reactive, defineProps,watchEffect } from 'vue';
 import ventBox1 from '/@/components/vent/ventBox1.vue'
 import SingLineArea from '@/components/chart/SingLineArea.vue'
 import BarAndLine from '@/components/chart/BarAndLine.vue';
@@ -61,17 +60,20 @@ import { option, gasMenuList, chartsColumns, echatsOption, optionGas } from '../
 import { list, getCurveGraphData } from '../footage.api';
 import dayjs from 'dayjs';
 
+let props=defineProps({
+  optionValue:{
+    type:String,
+    default:''
+  }
+})
 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 xAxisPropType = ref('ttime');
+let chartData = ref<any[]>([]);
 let gasList = ref<any[]>([]);
 let chartGasData = ref<any[]>([])
 
@@ -85,11 +87,11 @@ function getMonitor(flag?) {
         timer = null;
       }
       await getMonitor();
-    }, flag ? 0 : 10000);
+    }, flag ? 0 : 5000);
   }
 };
 async function getCurveGraphDataList() {
-  let res = await getCurveGraphData({ devId: devID.value, startTime: timeDate.startTime, endTime: timeDate.endTime })
+  let res = await getCurveGraphData({ devId: props.optionValue, startTime: timeDate.startTime, endTime: timeDate.endTime })
   if (res.length) {
     paramData.value = res
     chartData.value = res.map(el => {
@@ -121,21 +123,6 @@ async function getCurveGraphDataList() {
   }
 }
 
-// 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) {
@@ -184,9 +171,10 @@ function changeTime(param) {
   getCurveGraphDataList()
 }
 
+watchEffect(()=>{
+  props.optionValue &&  getCurveGraphDataList()
+})
 onMounted(async () => {
-  timer = null
-  // await getMenuList()
   await getMonitor(true)
 });
 onUnmounted(() => {

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

@@ -3,7 +3,7 @@
   <!-- Header部分 -->
   <div class="w-100% flex costume-header">
     <!-- 选择下拉框，自动填充剩余空间，这种实现是因为 Select 不支持 suffix -->
-    <Dropdown class="flex-grow-1 costume-header_left" :trigger="['click']" :bordered="false"
+    <Dropdown v-if="isShowSelect" 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" />
@@ -22,7 +22,7 @@
       </template>
     </Dropdown>
 
-    <div class="flex-basis-100% flex flex-items-center flex-grow-1 costume-header_right">
+    <div class="flex-basis-100% flex flex-items-center flex-grow-1 costume-header_right " :class="isShowSelect ? '' : 'costume-header_left'">
       <a-range-picker :showTime="false" valueFormat="YYYY-MM-DD" :value="[chartParams.startTime, chartParams.endTime]"
         :bordered="false" @change="onRangeChange" />
     </div>
@@ -35,6 +35,11 @@ import { MenuItem, Menu, Dropdown } from 'ant-design-vue';
 import { SwapOutlined, CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons-vue';
 
 let props = defineProps({
+  //是否显示Select组件
+  isShowSelect: {
+    type: Boolean,
+    default: false
+  },
   menuData: {
     type: Array,
     default: () => {
@@ -67,7 +72,7 @@ const chartParams = reactive({
   startTime: '',
   endTime: '',
 });
-let $emit=defineEmits(['changeMenu','changeTime'])
+let $emit = defineEmits(['changeMenu', 'changeTime'])
 
 
 
@@ -78,13 +83,13 @@ 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}) 
+  $emit('changeMenu', { id: selectedDeviceID.value, label: selectedDeviceLabel.value })
 }
 
 function onRangeChange(__, time) {
   chartParams.startTime = time[0];
   chartParams.endTime = time[1];
-  $emit('changeTime',chartParams)
+  $emit('changeTime', chartParams)
 }
 
 watchEffect(() => {
@@ -139,11 +144,13 @@ watchEffect(() => {
 }
 
 ::v-deep .zxm-picker {
+  width: 100%;
   padding: 4px 2px 4px;
   background: transparent;
 }
 
 ::v-deep .zxm-picker-input>input {
+  text-align: center;
   color: #fff;
 }
 

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

@@ -3,7 +3,7 @@
     <customHeader :fieldNames="{ label: 'label', value: 'value', options: 'children' }" :options='options'
       @change="getSelectRow" :optionValue="optionValue">进尺与瓦斯涌出分析</customHeader>
     <div class="box-container">
-      <ModuleCommon></ModuleCommon>
+      <ModuleCommon :optionValue="optionValue"></ModuleCommon>
     </div>
   </div>
 </template>
@@ -12,13 +12,10 @@
 import { onBeforeMount, ref, onMounted, onUnmounted, nextTick, provide } from 'vue';
 import customHeader from '/@/components/vent/customHeader.vue';
 import ModuleCommon from './components/moduleCommon.vue';
-import { getTableList, list } from './footage.api'
+import { list } from './footage.api'
 
 let options = ref<any[]>([])
 let optionValue = ref('')
-let menuList = ref<any[]>([])
-let devID = ref('')
-let devLabel = ref('')
 
 
 async function getSysDataSource() {
@@ -32,34 +29,15 @@ async function getSysDataSource() {
   if (!optionValue.value) {
     optionValue.value = options.value[0]['value']
   }
-  // devID.value = menuList.value[0].value
-  // devLabel.value = menuList.value[0].label
-
-  // const res = await getTableList({ strtype: 'sys_surface_juejin', pagetype: 'normal' });
-  // if (!options.value && res) {
-  //   // 初始时选择第一条数据
-  //   options.value = res.records || [];
-  //   if (!optionValue.value) {
-  //     optionValue.value = options.value[0]['id']
-  //     getMenuList()
-  //   }
-  // }
 };
 
 // 切换检测数据
 async function getSelectRow(deviceID) {
-  // const currentData = dataSource.value.find((item: any) => {
-  //   return item.deviceID == deviceID
-  // })
-  // if (currentData) {
-  //   optionValue.value = currentData['deviceID']
-  //   Object.assign(selectData, currentData)
-  //   await getDeviceList()
-  // }
+  console.log(deviceID, '选项切换')
+  optionValue.value = deviceID
 }
 
 onMounted(async () => {
-  // optionValue.value = currentRoute.value['query']['id']
   await getSysDataSource()
 })
 </script>