提交新版本

npminstall-debug.log

@@ -1,14 +1,22 @@
 {
   root: 'D:\\project\\jiJin',
   registry: 'https://registry.npmmirror.com',
-  pkgs: [],
+  pkgs: [
+    {
+      name: 'vue3-moment',
+      version: 'latest',
+      type: 'tag',
+      alias: undefined,
+      arg: [Result]
+    }
+  ],
   production: false,
   cacheStrict: false,
   cacheDir: 'C:\\Users\\86175\\.npminstall_tarball',
   env: {
     npm_config_registry: 'https://registry.npmmirror.com',
-    npm_config_argv: '{"remain":[],"cooked":["--fix-bug-versions","--china","--userconfig=C:\\\\Users\\\\86175\\\\.cnpmrc","--disturl=https://cdn.npmmirror.com/binaries/node","--registry=https://registry.npmmirror.com"],"original":["--fix-bug-versions","--china","--userconfig=C:\\\\Users\\\\86175\\\\.cnpmrc","--disturl=https://cdn.npmmirror.com/binaries/node","--registry=https://registry.npmmirror.com"]}',
-    npm_config_user_agent: 'npminstall/7.8.0 npm/? node/v18.14.0 win32 x64',
+    npm_config_argv: '{"remain":[],"cooked":["--fix-bug-versions","--china","--userconfig=C:\\\\Users\\\\86175\\\\.cnpmrc","--disturl=https://cdn.npmmirror.com/binaries/node","--registry=https://registry.npmmirror.com","vue3-moment"],"original":["--fix-bug-versions","--china","--userconfig=C:\\\\Users\\\\86175\\\\.cnpmrc","--disturl=https://cdn.npmmirror.com/binaries/node","--registry=https://registry.npmmirror.com","vue3-moment"]}',
+    npm_config_user_agent: 'npminstall/7.8.0 npm/? node/v16.15.0 win32 x64',
     npm_config_cache: 'C:\\Users\\86175\\.npminstall_tarball',
     NODE: 'C:\\Program Files\\nodejs\\node.exe',
     npm_node_execpath: 'C:\\Program Files\\nodejs\\node.exe',

package.json

@@ -59,6 +59,7 @@
     "lodash-es": "^4.17.21",
     "md5": "^2.3.0",
     "mockjs": "^1.1.0",
+    "moment": "^2.30.1",
     "nprogress": "^0.2.0",
     "path-to-regexp": "^6.2.1",
     "pinia": "2.1.4",

src/locales/lang/zh-CN/routes/vent.json

@@ -3,9 +3,9 @@
     "fire": "火灾",
     "home": "火灾预警监测",
     "fireCompositeWarn": "工作面监测预警分析",
-    "Atomizing": "工作面监测预警分析(1)",
+   
     "goaf": "密闭采空区监测预警分析",
-    "goaflist": "密闭采空区监测预警分析(1)",
+   
     "fireMonitor": "变电硐室防灭火监控预警系统",
     "workFace": "工作面监测预警分析",
     "beltConveyor": "带试运输机放灭火监测系统",
@@ -17,7 +17,7 @@
     "dust": "粉尘",
     "home": "粉尘预警监测",
     "dustWarnAnalysis": "粉尘监测预警分析",
-    "dustWarnAnalysislist": "粉尘监测预警分析(1)",
+   
     "dustAtomizing": "智能喷雾降尘装置"
   },
   "monitor": {

src/router/routes/vent/dust.ts

@@ -31,14 +31,14 @@ const dust: AppRouteModule = {
       },
       component: () => import('@/views/vent/dust/dustWarnAnalysis/index.vue'),
     },
-    {
-      path: 'dust-warnAnalysisList',
-      name: 'dustWarnAnalysisList',
-      meta: {
-        title: t('routes.vent.dust.dustWarnAnalysislist'),
-      },
-      component: () => import('@/views/vent/dust/dustWarnAnalysisList/index.vue'),
-    },
+    // {
+    //   path: 'dust-warnAnalysisList',
+    //   name: 'dustWarnAnalysisList',
+    //   meta: {
+    //     title: t('routes.vent.dust.dustWarnAnalysislist'),
+    //   },
+    //   component: () => import('@/views/vent/dust/dustWarnAnalysisList/index.vue'),
+    // },
     {
       path: 'dust-atomizing',
       name: 'dustAtomizing',

src/router/routes/vent/fire.ts

@@ -30,14 +30,14 @@ const fire: AppRouteModule = {
       },
       component: () => import('@/views/vent/fire/compositeWarn/index.vue'),
     },
-     {
-      path: 'fire-atomizing',
-      name: 'fireAtomizing',
-      meta: {
-        title: t('routes.vent.fire.Atomizing'),
-      },
-      component: () => import('@/views/vent/fire/fireAtomizing/index.vue'),
-    },
+    //  {
+    //   path: 'fire-atomizing',
+    //   name: 'fireAtomizing',
+    //   meta: {
+    //     title: t('routes.vent.fire.Atomizing'),
+    //   },
+    //   component: () => import('@/views/vent/fire/fireAtomizing/index.vue'),
+    // },
     {
       path: 'fire-goaf',
       name: 'fireGoaf',
@@ -46,14 +46,14 @@ const fire: AppRouteModule = {
       },
       component: () => import('@/views/vent/fire/fireGoaf/index.vue'),
     },
-    {
-      path: 'fire-goafList',
-      name: 'fireGoafList',
-      meta: {
-        title: t('routes.vent.fire.goaflist'),
-      },
-      component: () => import('@/views/vent/fire/fireGoafList/index.vue'),
-    },
+    // {
+    //   path: 'fire-goafList',
+    //   name: 'fireGoafList',
+    //   meta: {
+    //     title: t('routes.vent.fire.goaflist'),
+    //   },
+    //   component: () => import('@/views/vent/fire/fireGoafList/index.vue'),
+    // },
     {
       path: 'fire-monitor',
       name: 'fireMonitor',

src/utils/http/axios/Axios.ts

@@ -228,8 +228,9 @@ export class VAxios {
         .then((res: AxiosResponse<Result>) => {
           if (transformResponseHook && isFunction(transformResponseHook)) {
             try {
-              const ret = transformResponseHook(res, opt);
-              resolve(ret);
+              // const ret = transformResponseHook(res, opt);//lxh
+              // resolve(ret);
+              resolve(res.data)//lxh
             } catch (err) {
               reject(err || new Error('request error!'));
             }

src/views/vent/common/basicCard3.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="basicCard3">
-    <div :class="activeIndex==index ? 'card3-box1' : 'card3-box'" v-for="(item, index) in card3Lists" :key="index" @click="toggleChange(index, item)">
+    <div :class="activeIndex == index ? 'card3-box1' : 'card3-box'" v-for="(item, index) in card3Lists" :key="index"
+      @click="toggleChange(index, item)">
       <div class="card3-box-title">{{ item.title }}</div>
       <div class="card3-box-nd">
         <span class="card3-box-label">{{ item.ndLabel }}</span>
@@ -14,38 +15,51 @@
         <span class="card3-box-label">{{ item.aLabel }}</span>
         <span class="card3-box-val">{{ item.aVal }}</span>
       </div>
-      <div class="card3-box-warn">低风险</div>
+      <div class="card3-box-warn">
+        <div class="card3-box-item">
+          {{ warningLevel }}
+        </div>
+      </div>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { ref, reactive,defineProps,watch } from 'vue'
+import { ref, reactive, defineProps, watch,defineEmits } from 'vue'
 
-let props=defineProps({
-  card3List:{
-    type:Array,
-    default:()=>{
+let props = defineProps({
+  card3List: {
+    type: Array,
+    default: () => {
       return []
     }
+  },
+  //风险等级
+  warningLevel: {
+    type: String,
+    default: () => {
+      return ''
+    }
   }
+
 })
 let activeIndex = ref(0)
-let card3Lists=ref<any[]>([])
-
+let card3Lists = ref<any[]>([])
+  const emit = defineEmits(['toggleChange']);
 
 //选项切换
 function toggleChange(index, item) {
   console.log(index, '当前激活索引-------')
   activeIndex.value = index
+  emit('toggleChange', item.title)
 }
 
-watch(()=>props.card3List,(newV,oldV)=>{
-  console.log(newV,'newV---------')
-  card3Lists.value=newV
-},{
-  immediate:true,
-  deep:true
+watch(() => props.card3List, (newV, oldV) => {
+  console.log(newV, 'newV---------')
+  card3Lists.value = newV
+}, {
+  immediate: true,
+  deep: true
 })
 
 </script>
@@ -139,14 +153,22 @@ watch(()=>props.card3List,(newV,oldV)=>{
 
     .card3-box-warn {
       position: absolute;
-      bottom: 20px;
-      left: 6px;
-      transform: rotate(45deg);
-      color: #fff;
-
+      bottom: 0;
+      left: 0;
+      width: 75px;
+      height: 75px;
+
+      .card3-box-item {
+        position: absolute;
+        top: 50%;
+        left: 29%;
+        transform: rotate(45deg);
+        color: #fff;
+      }
     }
 
     .card3-box-label {
+      width: 40px;
       color: #fff;
     }
 
@@ -231,14 +253,23 @@ watch(()=>props.card3List,(newV,oldV)=>{
 
     .card3-box-warn {
       position: absolute;
-      bottom: 48px;
-      left: 6px;
-      transform: rotate(45deg);
-      color: #fff;
+      bottom: 0;
+      left: 0;
+      width: 75px;
+      height: 100px;
+
+      .card3-box-item {
+        position: absolute;
+        top: 38%;
+        left: 32%;
+        transform: rotate(45deg);
+        color: #fff;
+      }
 
     }
 
     .card3-box-label {
+      width: 40px;
       color: #fff;
     }
 

src/views/vent/common/basicEchartLine.vue

@@ -260,6 +260,7 @@ watch(() => props.echartData, (newE, oldE) => {
   echartDatas.yData = newE.yData
   echartDatas.yData1=newE.yData1
   echartDatas.legendName=newE.legendName
+  getOption();
 }, { immediate: true, deep: true })
 
 

src/views/vent/common/basicTree.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="basicTree">
         <Tree :tree-data="treeDatas" show-icon default-expand-all v-model:selectedKeys="selectedKeys"
-            v-model:expandedKeys="expandedKeys">
+            v-model:expandedKeys="expandedKeys" @select="selectChange">
             <template #switcherIcon>
                 <CaretDownOutlined />
             </template>
@@ -11,7 +11,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, reactive, defineProps, watch } from 'vue'
+import { ref, reactive, defineProps, watch, defineEmits } from 'vue'
 import { Tree } from 'ant-design-vue';
 import { CaretDownOutlined, } from '@ant-design/icons-vue';
 
@@ -26,10 +26,10 @@ let props = defineProps({
 
 let treeDatas = ref([])//树节点数据
 //默认选中节点
-let selectedKeys = ref(['0-0-0'])
+let selectedKeys = ref(['0-0'])
 //默认展开节点
-const expandedKeys = ref<string[]>(['1']);
-
+const expandedKeys = ref<string[]>([0]);
+const emit = defineEmits(['selectChange']);
 //递归遍历菜单数据
 function getMenuTree(menuList, pid) {
     let treeList = [];
@@ -48,6 +48,11 @@ function getMenuTree(menuList, pid) {
     return treeList;
 }
 
+//点击树节点
+function selectChange(select, select1) {
+    console.log(select, 'select---===')
+    emit('selectChange', select1)
+}
 watch(() => props.treeData, (newV, oldV) => {
     treeDatas.value.length = 0
     treeDatas.value = getMenuTree(newV, null)

src/views/vent/fire/compositeWarn/composite.api.ts

@@ -0,0 +1,35 @@
+
+import { defHttp } from '@/utils/http/axios';
+enum Api {
+  getFireAreaInfo = '/fire/fireDisasterApi/getFireAreaInfo',
+  getSgjcPointInfo= '/fire/fireDisasterApi/getSgjcPointInfo',
+  getSgjcRealDataByPointCode='/fire/fireDisasterApi/getSgjcRealDataByPointCode',
+  getSgjcHistoryData='/fire/fireDisasterApi/getSgjcHistoryData',
+
+
+}
+/**
+ * 菜单树接口
+ * @param params
+ */
+export const getFireAreaInfo = (params) => defHttp.get({ url: Api.getFireAreaInfo, params });
+
+/**
+ * 
+ * 获取工作面束管列表
+ * @param params
+ */
+export const getSgjcPointInfo = (params) => defHttp.get({ url: Api.getSgjcPointInfo, params });
+
+/**
+ * 
+ * 获取束管测点实时数据
+ * @param params
+ */
+export const getSgjcRealDataByPointCode = (params) => defHttp.get({ url: Api.getSgjcRealDataByPointCode, params });
+
+/**
+ * 获取束管曲线数据
+ * @param params
+ */
+export const getSgjcHistoryData = (params) => defHttp.get({ url: Api.getSgjcHistoryData, params });

src/views/vent/fire/compositeWarn/composite.data.ts

@@ -0,0 +1,29 @@
+import { reactive } from 'vue';
+import { BasicColumn, FormSchema } from '/@/components/Table';
+
+
+export const formConfig = {
+  labelAlign: 'left',
+  showAdvancedButton: false,
+  showResetButton: false,
+  baseColProps: {
+    // offset: 0.5,
+    xs: 24,
+    sm: 24,
+    md: 24,
+    lg: 9,
+    xl: 7,
+    xxl: 4,
+  },
+  schemas: [
+    {
+      label: '预警等级',
+      labelWidth: 200,
+      field: 'leveltype',
+      colProps: { span: 10 },
+      component: 'JDictSelectTag',
+      componentProps: { dictCode: 'leveltype' },
+    },
+  ],
+};
+

src/views/vent/fire/compositeWarn/index.vue

@@ -1,64 +1,166 @@
 <template>
   <div class="compositeWarn">
     <div class="composite-left-box">
-      <basicTree :treeData="treeData"></basicTree>
+      <basicTree :treeData="treeData" @selectChange="selectChange"></basicTree>
     </div>
     <div class="composite-right-box">
       <div class="composite-top-box">
-        <basicCard3 :card3List="card3List"></basicCard3>
+        <basicCard3 :card3List="card3List" :warningLevel="warningLevel" @toggleChange="toggleChange"></basicCard3>
       </div>
       <div class="composite-bot-box">
-        <basicEchartLine :gridV="gridV" :echartData="echartData"></basicEchartLine>
+        <div class="search-area">
+          <!-- <RangePicker  v-model="TimeRange" size="small" style="width: 260px"   :show-time="{ format: 'HH:mm:ss' }"
+            format="YYYY-MM-DD HH:mm:ss"
+            :placeholder="['开始时间', '结束时间']" @change="onDataChange"  /> -->
+        </div>
+        <div class="content-area">
+          <basicEchartLine :gridV="gridV" :echartData="echartData"></basicEchartLine>
+        </div>
+      
       </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, reactive } from 'vue'
+import { ref, reactive, onMounted } from 'vue'
 import basicCard3 from '../../common/basicCard3.vue';
 import basicEchartLine from '../../common/basicEchartLine.vue';
 import basicTree from '../../common/basicTree.vue'
+// import { Select, RangePicker,} from 'ant-design-vue';
+import moment from 'moment'
+import { getFireAreaInfo, getSgjcPointInfo, getSgjcRealDataByPointCode, getSgjcHistoryData } from './composite.api'
 
-let card3List = reactive([
-  { title: 'O2(%)', ndLabel: '浓度 : ', ndVal: '14.79', tLabel: '时间 : ', tVal: '2023-05-14 15:26:24', aLabel: '位置 : ', aVal: '81203综放工作面' },
-  { title: 'N2(%)', ndLabel: '浓度 : ', ndVal: '14.79', tLabel: '时间 : ', tVal: '2023-05-14 15:26:24', aLabel: '位置 : ', aVal: '81203综放工作面' },
-  { title: 'CO(ppm)', ndLabel: '浓度 : ', ndVal: '14.79', tLabel: '时间 : ', tVal: '2023-05-14 15:26:24', aLabel: '位置 : ', aVal: '81203综放工作面' },
-  { title: 'CO2(%)', ndLabel: '浓度 : ', ndVal: '14.79', tLabel: '时间 : ', tVal: '2023-05-14 15:26:24', aLabel: '位置 : ', aVal: '81203综放工作面' },
-  { title: 'CH4(%)', ndLabel: '浓度 : ', ndVal: '14.79', tLabel: '时间 : ', tVal: '2023-05-14 15:26:24', aLabel: '位置 : ', aVal: '81203综放工作面' },
-  { title: 'C2H4(ppm)', ndLabel: '浓度 : ', ndVal: '14.79', tLabel: '时间 : ', tVal: '2023-05-14 15:26:24', aLabel: '位置 : ', aVal: '81203综放工作面' },
-  { title: 'C2H2(ppm)', ndLabel: '浓度 : ', ndVal: '14.79', tLabel: '时间 : ', tVal: '2023-05-14 15:26:24', aLabel: '位置 : ', aVal: '81203综放工作面' },
-  { title: 'H2(%)', ndLabel: '浓度 : ', ndVal: '14.79', tLabel: '时间 : ', tVal: '2023-05-14 15:26:24', aLabel: '位置 : ', aVal: '81203综放工作面' },
-  { title: 'NO2(%)', ndLabel: '浓度 : ', ndVal: '14.79', tLabel: '时间 : ', tVal: '2023-05-14 15:26:24', aLabel: '位置 : ', aVal: '81203综放工作面' },
+let warningLevel = ref('')//风险等级
+let card3List = reactive<any[]>([
+  // { title: 'O2(%)', ndLabel: '浓度 : ', ndVal: '14.79', tLabel: '时间 : ', tVal: '2023-05-14 15:26:24', aLabel: '位置 : ', aVal: '81203综放工作面' },
+  // { title: 'N2(%)', ndLabel: '浓度 : ', ndVal: '14.79', tLabel: '时间 : ', tVal: '2023-05-14 15:26:24', aLabel: '位置 : ', aVal: '81203综放工作面' },
+  // { title: 'CO(ppm)', ndLabel: '浓度 : ', ndVal: '14.79', tLabel: '时间 : ', tVal: '2023-05-14 15:26:24', aLabel: '位置 : ', aVal: '81203综放工作面' },
+  // { title: 'CO2(%)', ndLabel: '浓度 : ', ndVal: '14.79', tLabel: '时间 : ', tVal: '2023-05-14 15:26:24', aLabel: '位置 : ', aVal: '81203综放工作面' },
+  // { title: 'CH4(%)', ndLabel: '浓度 : ', ndVal: '14.79', tLabel: '时间 : ', tVal: '2023-05-14 15:26:24', aLabel: '位置 : ', aVal: '81203综放工作面' },
+  // { title: 'C2H4(ppm)', ndLabel: '浓度 : ', ndVal: '14.79', tLabel: '时间 : ', tVal: '2023-05-14 15:26:24', aLabel: '位置 : ', aVal: '81203综放工作面' },
+  // { title: 'C2H2(ppm)', ndLabel: '浓度 : ', ndVal: '14.79', tLabel: '时间 : ', tVal: '2023-05-14 15:26:24', aLabel: '位置 : ', aVal: '81203综放工作面' },
+  // { title: 'H2(%)', ndLabel: '浓度 : ', ndVal: '14.79', tLabel: '时间 : ', tVal: '2023-05-14 15:26:24', aLabel: '位置 : ', aVal: '81203综放工作面' },
+  // { title: 'NO2(%)', ndLabel: '浓度 : ', ndVal: '14.79', tLabel: '时间 : ', tVal: '2023-05-14 15:26:24', aLabel: '位置 : ', aVal: '81203综放工作面' },
 ])
 
 //数据随便写的，不符合实际情况，因为懒得改
-const treeData = reactive([
-  { name: "81203综放工作面", value: "111", id: '1', pid: null },
-  { name: "束管监测系统", value: "222", id: '1-2', pid: '1' },
-  { name: "81203综放工作面", value: "458", id: '2', pid: null },
-  { name: "束管监测系统", value: "445", id: '2-1', pid: '2' },
-  { name: "束管监测系统", value: "456", id: '2-2', pid: '2' },
-  { name: "束管监测系统", value: "647", id: '2-3', pid: '2' },
-  { name: "81203综放工作面", value: "189", id: '3', pid: null },
-  { name: "束管监测系统", value: "664", id: '3-1', pid: '3' },
-  { name: "束管监测系统", value: "652", id: '3-2', pid: '3' },
-  { name: "束管监测系统", value: "732", id: '3-3', pid: '3' },
-  { name: "束管监测系统", value: "852", id: '3-3-1', pid: '3-3' },
+const treeData = reactive<any[]>([
+  // { name: "81203综放工作面", value: "111", id: '1', pid: null },
+  // { name: "束管监测系统", value: "222", id: '1-2', pid: '1' },
+  // { name: "81203综放工作面", value: "458", id: '2', pid: null },
+  // { name: "束管监测系统", value: "445", id: '2-1', pid: '2' },
+  // { name: "束管监测系统", value: "456", id: '2-2', pid: '2' },
+  // { name: "束管监测系统", value: "647", id: '2-3', pid: '2' },
+  // { name: "81203综放工作面", value: "189", id: '3', pid: null },
+  // { name: "束管监测系统", value: "664", id: '3-1', pid: '3' },
+  // { name: "束管监测系统", value: "652", id: '3-2', pid: '3' },
+  // { name: "束管监测系统", value: "732", id: '3-3', pid: '3' },
+  // { name: "束管监测系统", value: "852", id: '3-3-1', pid: '3-3' },
 ])
+let areaCode = ref('')
+let gasType = ref('')
+let pointCode = ref('')
+let TimeRange=ref([moment('2024/01/01 00:00:00', 'YYYY-MM-DD HH:mm:ss'), moment('2024/01/02 00:00:00', 'YYYY-MM-DD HH:mm:ss')])  //查询时间
+//[moment().subtract(1, 'days').format('YYYY-MM-DD HH:mm:ss'), moment().format('YYYY-MM-DD HH:mm:ss')]
 
-let gridV=reactive({
+let gridV = reactive({
   top: '8%',
-        left: '3%',
-        right: '3%',
-        bottom: '10%',
+  left: '3%',
+  right: '3%',
+  bottom: '10%',
 })
 
-let echartData=reactive({
-    xData:['12.1', '12.2', '12.3', '12.4', '12.5', '12.6', '12.7'],
-    yData:[90, 105, 84, 125, 110, 92, 98],
-    yData1:[140, 165, 134, 175, 160, 152, 158],
-    legendName:['实时值','预测值']
+let echartData = reactive(
+  {
+    xData: [],
+    yData: [],
+    yData1: [],
+    legendName: ['实时值', '预测值']
+  }
+)
+
+ //时间选项切换
+ function onDataChange(value, dateString) {
+    TimeRange = [dateString[0], dateString[1]]
+      console.log(TimeRange, 'TimeRange')
+    }
+//获取左侧菜单树
+async function getFireAreaInfos() {
+  const res = await getFireAreaInfo({ fireCauseType: 2 })
+  // treeData.length = 0
+  if (res.success) {
+    res.data.forEach((el, ind) => {
+      if (el.areaType == 2) {
+        treeData.push({ name: el.areaName, value: el.ind, id: el.ind, pid: null, areaCode: el.areaCode })
+      }
+    })
+    areaCode.value = treeData[0]['areaCode']
+    warningLevel.value = treeData[0].warningLevel == 0 ? '正常' : treeData[0].warningLevel == 101 ? '较低风险' : treeData[0].warningLevel == 102 ? '低风险' : treeData[0].warningLevel == 103 ? '中风险' : treeData[0].warningLevel == 104 ? '高风险' : treeData[0].warningLevel == 105 ? '高风险' : '--'
+    console.log(treeData, 'treeData-------')
+    getSgjcPointInfoList()
+  }
+}
+//点击左侧树节点
+function selectChange(treeNode) {
+  console.log(treeNode, 'treeNode---')
+  areaCode.value = treeData.filter((v) => v.name == treeNode.node.dataRef.title)[0]['areaCode']
+  let level = treeData.filter((m) => m.name == treeNode.node.dataRef.title)[0]['warningLevel']
+  warningLevel.value = level == 0 ? '正常' : level == 101 ? '较低风险' : level == 102 ? '低风险' : level == 103 ? '中风险' : level == 104 ? '高风险' : level == 105 ? '高风险' : '--'
+  card3List.length = 0
+  echartData.xData.length = 0
+  echartData.yData.length = 0
+  echartData.yData1.length = 0
+  getSgjcPointInfoList()
+}
+
+//获取工作面束管测点编号列表
+async function getSgjcPointInfoList() {
+  let res = await getSgjcPointInfo({ areaCode: areaCode.value })
+  console.log(res, '工作面束管测点编号列表')
+  if (res.success) {
+    pointCode.value = res.data[0]['pointCode']
+    //获取工作面束管测点实时数据
+    getSgjcRealDataByPointCodeList()
+  }
+}
+//获取工作面束管测点实时数据
+async function getSgjcRealDataByPointCodeList() {
+  let res = await getSgjcRealDataByPointCode({ pointCode: pointCode.value })
+  console.log(res, '工作面束管测点实时数据======')
+  if (res.success) {
+    res.data.forEach(el => {
+      card3List.push({ title: el.type, ndLabel: '浓度', ndVal: el.currentValue, tLabel: '时间', tVal: el.time, aLabel: '位置', aVal: el.position })
+    })
+    gasType.value = card3List[0]['title']
+    //获取束管曲线数据
+    getSgjcHistoryDataList()
+  }
+}
+//工作面束管选项切换
+function toggleChange(title) {
+  gasType.value = title
+  echartData.xData.length = 0
+  echartData.yData.length = 0
+  echartData.yData1.length = 0
+  getSgjcHistoryDataList()
+}
+//获取束管曲线数据
+async function getSgjcHistoryDataList() {
+  let res = await getSgjcHistoryData({ pointCode: pointCode.value, type: gasType.value })
+  console.log(res, '束管曲线数据-------')
+  if (res.success) {
+    res.data.time.forEach(el => {
+      echartData.xData.push(el)
+    })
+    res.data.value.forEach(el => {
+      echartData.yData.push(el)
+    })
+  }
+}
+
+onMounted(() => {
+  getFireAreaInfos()
 })
 
 </script>
@@ -100,9 +202,45 @@ let echartData=reactive({
       border: 1px solid #1e96cd;
       background-color: rgb(41 49 53 / 80%);
 
+      .search-area{
+        display: flex;
+        box-sizing: border-box;
+        align-items: center;
+        height: 40px;
+        padding: 0 15px;
+      }
+
+      .content-area{
+        height: calc(100% - 40px);
+      }
+
     }
   }
+}
 
+:deep(.vMonitor-picker) {
+  border: none !important;
+  background-color: rgb(15 64 88) !important;
+  box-shadow: none;
+  color: #a1dff8 !important;
+}
+
+:deep(.vMonitor-picker-input >input) {
+  color: #a1dff8 !important;
+  text-align: center !important;
+}
+
+
+
+:deep(.vMonitor-picker-separator) {
+  color: #a1dff8 !important;
+}
+
+:deep(.vMonitor-picker-active-bar) {
+  display: none !important;
+}
 
+:deep(.vMonitor-picker-suffix) {
+  color: #a1dff8 !important;
 }
 </style>

src/views/vent/fire/fireGoaf/goaf.api.ts

@@ -0,0 +1,28 @@
+
+import { defHttp } from '@/utils/http/axios';
+enum Api {
+  getFireAreaInfo = '/fire/fireDisasterApi/getFireAreaInfo',
+  getMbRealData ='/fire/fireDisasterApi/getMbRealData',
+  getMbHistoryData='/fire/fireDisasterApi/getMbHistoryData',
+
+
+}
+/**
+ * 密闭监测实时数据
+ * @param params
+ */
+export const getMbRealData = (params) => defHttp.get({ url: Api.getMbRealData, params });
+
+/**
+ * 
+ * 获取左侧菜单树
+ * @param params
+ */
+export const getFireAreaInfo = (params) => defHttp.get({ url: Api.getFireAreaInfo, params });
+
+/**
+ * 
+ * 获取图表数据
+ * @param params
+ */
+export const getMbHistoryData = (params) => defHttp.get({ url: Api.getMbHistoryData, params });

src/views/vent/fire/fireGoaf/index.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="fireGoaf">
     <div class="composite-left-box">
-      <basicTree :treeData="treeData"></basicTree>
+      <basicTree :treeData="treeData" @selectChange="selectChange"></basicTree>
     </div>
     <div class="composite-right-box">
       <div class="composite-top-box">
-        <basicCard3 :card3List="card3List"></basicCard3>
+        <basicCard3 :card3List="card3List" :warningLevel="warningLevel" @toggleChange="toggleChange"></basicCard3>
       </div>
       <div class="composite-bot-box">
         <basicEchartLine :gridV="gridV" :echartData="echartData"></basicEchartLine>
@@ -15,52 +15,114 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive } from 'vue'
+import { ref, reactive, onMounted } from 'vue'
 import basicCard3 from '../../common/basicCard3.vue';
 import basicEchartLine from '../../common/basicEchartLine.vue';
 import basicTree from '../../common/basicTree.vue'
+import { getFireAreaInfo, getMbRealData ,getMbHistoryData} from './goaf.api'
 
-let card3List = reactive([
-  { title: 'O2(%)', ndLabel: '浓度 : ', ndVal: '14.79', tLabel: '时间 : ', tVal: '2023-05-14 15:26:24', aLabel: '位置 : ', aVal: '81203综放工作面' },
-  { title: 'N2(%)', ndLabel: '浓度 : ', ndVal: '14.79', tLabel: '时间 : ', tVal: '2023-05-14 15:26:24', aLabel: '位置 : ', aVal: '81203综放工作面' },
-  { title: 'CO(ppm)', ndLabel: '浓度 : ', ndVal: '14.79', tLabel: '时间 : ', tVal: '2023-05-14 15:26:24', aLabel: '位置 : ', aVal: '81203综放工作面' },
-  { title: 'CO2(%)', ndLabel: '浓度 : ', ndVal: '14.79', tLabel: '时间 : ', tVal: '2023-05-14 15:26:24', aLabel: '位置 : ', aVal: '81203综放工作面' },
-  { title: 'CH4(%)', ndLabel: '浓度 : ', ndVal: '14.79', tLabel: '时间 : ', tVal: '2023-05-14 15:26:24', aLabel: '位置 : ', aVal: '81203综放工作面' },
-  { title: 'C2H4(ppm)', ndLabel: '浓度 : ', ndVal: '14.79', tLabel: '时间 : ', tVal: '2023-05-14 15:26:24', aLabel: '位置 : ', aVal: '81203综放工作面' },
-  { title: 'C2H2(ppm)', ndLabel: '浓度 : ', ndVal: '14.79', tLabel: '时间 : ', tVal: '2023-05-14 15:26:24', aLabel: '位置 : ', aVal: '81203综放工作面' },
-  { title: 'H2(%)', ndLabel: '浓度 : ', ndVal: '14.79', tLabel: '时间 : ', tVal: '2023-05-14 15:26:24', aLabel: '位置 : ', aVal: '81203综放工作面' },
-  { title: 'NO2(%)', ndLabel: '浓度 : ', ndVal: '14.79', tLabel: '时间 : ', tVal: '2023-05-14 15:26:24', aLabel: '位置 : ', aVal: '81203综放工作面' },
+let card3List = reactive<any[]>([
+  // { title: 'O2(%)', ndLabel: '浓度 : ', ndVal: '14.79', tLabel: '时间 : ', tVal: '2023-05-14 15:26:24', aLabel: '位置 : ', aVal: '81203综放工作面' },
+  // { title: 'N2(%)', ndLabel: '浓度 : ', ndVal: '14.79', tLabel: '时间 : ', tVal: '2023-05-14 15:26:24', aLabel: '位置 : ', aVal: '81203综放工作面' },
+  // { title: 'CO(ppm)', ndLabel: '浓度 : ', ndVal: '14.79', tLabel: '时间 : ', tVal: '2023-05-14 15:26:24', aLabel: '位置 : ', aVal: '81203综放工作面' },
+  // { title: 'CO2(%)', ndLabel: '浓度 : ', ndVal: '14.79', tLabel: '时间 : ', tVal: '2023-05-14 15:26:24', aLabel: '位置 : ', aVal: '81203综放工作面' },
+  // { title: 'CH4(%)', ndLabel: '浓度 : ', ndVal: '14.79', tLabel: '时间 : ', tVal: '2023-05-14 15:26:24', aLabel: '位置 : ', aVal: '81203综放工作面' },
+  // { title: 'C2H4(ppm)', ndLabel: '浓度 : ', ndVal: '14.79', tLabel: '时间 : ', tVal: '2023-05-14 15:26:24', aLabel: '位置 : ', aVal: '81203综放工作面' },
+  // { title: 'C2H2(ppm)', ndLabel: '浓度 : ', ndVal: '14.79', tLabel: '时间 : ', tVal: '2023-05-14 15:26:24', aLabel: '位置 : ', aVal: '81203综放工作面' },
+  // { title: 'H2(%)', ndLabel: '浓度 : ', ndVal: '14.79', tLabel: '时间 : ', tVal: '2023-05-14 15:26:24', aLabel: '位置 : ', aVal: '81203综放工作面' },
+  // { title: 'NO2(%)', ndLabel: '浓度 : ', ndVal: '14.79', tLabel: '时间 : ', tVal: '2023-05-14 15:26:24', aLabel: '位置 : ', aVal: '81203综放工作面' },
 ])
 
-//数据随便写的，不符合实际情况，因为懒得改
-const treeData = reactive([
-  { name: "81203综放工作面", value: "111", id: '1', pid: null },
-  { name: "束管监测系统", value: "222", id: '1-2', pid: '1' },
-  { name: "81203综放工作面", value: "458", id: '2', pid: null },
-  { name: "束管监测系统", value: "445", id: '2-1', pid: '2' },
-  { name: "束管监测系统", value: "456", id: '2-2', pid: '2' },
-  { name: "束管监测系统", value: "647", id: '2-3', pid: '2' },
-  { name: "81203综放工作面", value: "189", id: '3', pid: null },
-  { name: "束管监测系统", value: "664", id: '3-1', pid: '3' },
-  { name: "束管监测系统", value: "652", id: '3-2', pid: '3' },
-  { name: "束管监测系统", value: "732", id: '3-3', pid: '3' },
-  { name: "束管监测系统", value: "852", id: '3-3-1', pid: '3-3' },
-])
+//左侧菜单树
+const treeData = reactive<any[]>([])
+let areaCode = ref('')
+let warningLevel = ref('')//风险等级
+let type=ref('')
 
-let gridV=reactive({
+let gridV = reactive({
   top: '8%',
-        left: '3%',
-        right: '3%',
-        bottom: '10%',
+  left: '3%',
+  right: '3%',
+  bottom: '10%',
 })
 
-let echartData=reactive({
-    xData:['12.1', '12.2', '12.3', '12.4', '12.5', '12.6', '12.7'],
-    yData:[90, 105, 84, 125, 110, 92, 98],
-    yData1:[140, 165, 134, 175, 160, 152, 158],
-    legendName:['实时值','预测值']
+let echartData = reactive({
+  xData: [],
+  yData: [],
+  yData1: [],
+  legendName: ['实时值', '预测值']
 })
 
+//点击左侧树节点
+function selectChange(treeNode) {
+  console.log(treeNode, 'treeNode---')
+  areaCode.value = treeData.filter((v) => v.name == treeNode.node.dataRef.title)[0]['areaCode']
+  let level = treeData.filter((m) => m.name == treeNode.node.dataRef.title)[0]['warningLevel']
+  warningLevel.value = level == 0 ? '正常' : level == 101 ? '较低风险' : level == 102 ? '低风险' : level == 103 ? '中风险' : level == 104 ? '高风险' : level == 105 ? '高风险' : '--'
+  card3List.length = 0
+  echartData.xData.length = 0
+  echartData.yData.length = 0
+  echartData.yData1.length = 0
+  getMbRealDataList()
+}
+
+//获取左侧菜单树
+async function getFireAreaInfos() {
+  const res = await getFireAreaInfo({ fireCauseType: 2 })
+  // treeData.length = 0
+  if (res.success) {
+    res.data.forEach((el, ind) => {
+      if (el.areaType == 1) {
+        treeData.push({ name: el.areaName, value: el.ind, id: el.ind, pid: null, areaCode: el.areaCode })
+      }
+    })
+    areaCode.value = treeData[0]['areaCode']
+    warningLevel.value = treeData[0].warningLevel == 0 ? '正常' : treeData[0].warningLevel == 101 ? '较低风险' : treeData[0].warningLevel == 102 ? '低风险' : treeData[0].warningLevel == 103 ? '中风险' : treeData[0].warningLevel == 104 ? '高风险' : treeData[0].warningLevel == 105 ? '高风险' : '--'
+    console.log(treeData, 'treeData-------')
+    getMbRealDataList()
+  }
+}
+
+//获取密闭监测实时数据
+async function getMbRealDataList() {
+  let res = await getMbRealData({areaCode:areaCode.value})
+  console.log(res,'密闭监测实时数据------')
+  if (res.success) {
+    res.data.forEach(el=>{
+      card3List.push({title: el.type, ndLabel: '浓度 : ', ndVal: el.currentValue, tLabel: '时间 : ', tVal: el.time, aLabel: '位置 : ', aVal:el.position})
+    })
+    type.value=card3List[0]['title']
+    //获取密闭图表数据
+    getMbHistoryDataList()
+  }
+}
+//密闭实时数据选项切换
+function toggleChange(title){
+  console.log(title,'title---------')
+  type.value=title
+  echartData.xData.length = 0
+  echartData.yData.length = 0
+  echartData.yData1.length = 0
+  getMbHistoryDataList()
+}
+//获取密闭图表数据
+async function getMbHistoryDataList(){
+      let res=await getMbHistoryData({areaCode:areaCode.value,type:type.value})
+      console.log(res,'密闭图表数据------')
+      if(res.success){
+        res.data.time.forEach(el => {
+      echartData.xData.push(el)
+    })
+    res.data.value.forEach(el => {
+      echartData.yData.push(el)
+    })
+      }
+    }
+
+onMounted(() => {
+  getFireAreaInfos()
+  
+})
 </script>
 
 <style lang="less" scoped>

src/views/vent/fire/home/index.vue

@@ -1,18 +0,0 @@
-<template>
-  <div>fire/home</div>
-</template>
-<script lang="ts" setup>
-  // import { onUnmounted } from 'vue';
-  // import { useAppStore } from '@/store/modules/app';
-
-  // const appStore = useAppStore();
-  // appStore.setMenuSetting({
-  //   show: false,
-  // });
-  // onUnmounted(() => {
-  //   appStore.setMenuSetting({
-  //     show: true,
-  //   });
-  // });
-</script>
-<style lang="less" scoped></style>