[Wip 0000] 过渡页开发

src/views/dashboard/Overhaul/components/RootPage.vue

@@ -1,2 +1,133 @@
-<template>ROOT</template>
-<script setup lang="ts"></script>
+<template>
+  <div class="dashboard-container">
+    <div class="info-card">
+      <div class="card-title">
+        <div class="info-details">
+          <div class="label">{{ mineStore.getRoot }}</div>
+          <!-- <div class="value">西川煤矿分公司</div> -->
+          <!-- <div class="tag" :style="{ backgroundColor: getAlarmColor(basicInfo.alarmLevel), color: '#fff' }">
+            {{ getRiskText(basicInfo.alarmLevel) }}
+          </div> -->
+        </div>
+      </div>
+    </div>
+    <a-card>
+      <title>{{ mineStore.getRoot?.departName }}</title>
+      <span v-for="value in accessStatics" :key="value.id">
+        组织机构：{{ value.name }} 应接入：{{ value.yjNum }} 在线：{{ value.yjNum }} 中断：{{ value.yjNum }} 未接入：{{ value.yjNum }} 接入密闭数：{{
+          value.yjNum
+        }}
+      </span>
+    </a-card>
+
+    <a-card title="实时预警统计">
+      {{ realtimeWarning }}
+    </a-card>
+
+    <a-card title="预警数据详情">
+      {{ mineData }}
+    </a-card>
+
+    <a-card title="近半年报警统计">
+      <a-row>
+        <a-col :span="12">
+          {{ alarmType }}
+          <Pie :chart-data="alarmType"></Pie>
+        </a-col>
+        <a-col :span="12">
+          {{ historyAlarmNum }}
+          <Bar :chart-data="historyAlarmNum"></Bar>
+        </a-col>
+      </a-row>
+    </a-card>
+  </div>
+</template>
+<script setup lang="ts">
+  import { onMounted, ref } from 'vue';
+  import { getAlarmType, getGoafAccessCount, getHistoryAlarmNum, getMineData, getRealAlarmNum } from '../overhaul.api';
+  import { useMineDepartmentStore } from '/@/store/modules/mine';
+  import dayjs from 'dayjs';
+  import Pie from '/@/components/chart/Pie.vue';
+  import Bar from '/@/components/chart/Bar.vue';
+
+  const mineStore = useMineDepartmentStore();
+
+  const accessStatics = ref<any[]>([]);
+  async function fetchAccessStatics() {
+    accessStatics.value = await getGoafAccessCount({ deptId: mineStore.getRootId });
+  }
+
+  const realtimeWarning = ref<any>({});
+  async function fetchRealtimeWarning() {
+    realtimeWarning.value = await getRealAlarmNum({ deptId: mineStore.getRootId });
+  }
+
+  const alarmType = ref<any[]>([]);
+  async function fetchAlarmType() {
+    const result = await getAlarmType({
+      deptId: mineStore.getRootId,
+      startTime: dayjs().add(-6, 'months').format('YYYY-MM-DD HH:mm:ss'),
+      endTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
+    });
+    alarmType.value = result.map((e) => ({
+      name: e.name,
+      value: e.num,
+    }));
+  }
+
+  const historyAlarmNum = ref<any[]>([]);
+  async function fetchHistoryAlarmNum() {
+    const result = await getHistoryAlarmNum({
+      deptId: mineStore.getRootId,
+      startTime: dayjs().add(-6, 'months').format('YYYY-MM-DD HH:mm:ss'),
+      endTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
+    });
+    historyAlarmNum.value = result.map((e) => ({
+      name: e.mine_name,
+      value: e.num,
+    }));
+  }
+
+  const mineData = ref<any>();
+  async function fetchMineData() {
+    mineData.value = await getMineData({
+      deptId: mineStore.getRootId,
+    });
+  }
+
+  onMounted(() => {
+    fetchAccessStatics();
+    fetchRealtimeWarning();
+    fetchAlarmType();
+    fetchHistoryAlarmNum();
+    fetchMineData();
+  });
+</script>
+<style lang="less" scoped>
+  .dashboard-container {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: scroll;
+  }
+  .info-card {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    background-image: url('/@/assets/images/overHaul/leafgPage/info-card-bg.png');
+    background-repeat: no-repeat;
+    background-size: 100%;
+    border-radius: 8px;
+    padding: 20px;
+
+    .card-title {
+      width: 20%;
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      padding: 8px 10px 8px 50px;
+    }
+  }
+</style>

src/views/dashboard/Overhaul/overhaul.api.ts

@@ -1,16 +1,15 @@
 import { defHttp } from '/@/utils/http/axios';
 
 enum Api {
-  getCoalSeamFireNum = '/province/homeData/getCoalSeamFireNum',
-  getMineProductionStatusNum = '/province/homeData/getMineProductionStatusNum',
-  getOverLimitNum = '/province/homeData/getOverLimitNum',
   getGoafAlarmNum = '/province/homeData/getGoafAlarmNum',
-  getGoafAlarmLevel = '/province/homeData/getGoafAlarmLevel',
-  getGoafAccessCount = '/province/mineData/getGoafAccessCount',
   getGoafData = '/province/device/getGoafData',
-  getGoafStatusNum = '/province/homeData/getGoafStatusNum',
   getProvinceAlarm = '/province/alarm/getProvinceAlarm',
   getMineData = '/province/mineData/getMineData',
+  // 接入统计
+  getGoafAccessCount = '/ventanaly-province/province/mineData/getGoafAccessCount',
+  getRealAlarmNum = '/ventanaly-province/province/mineData/getRealAlarmNum',
+  getHistoryAlarmNum = '/ventanaly-province/province/mineData/getHistoryAlarmNum',
+  getAlarmType = '/ventanaly-province/province/mineData/getAlarmType',
 }
 
 // 执法处风险统计
@@ -27,7 +26,7 @@ export const getGoafAlarmNum = (params) =>
 
 // 查询密闭监测数据
 export function getGoafData(params: any) {
-    return defHttp.post({ url: Api.getGoafData, params }, { joinParamsToUrl: true });
+  return defHttp.post({ url: Api.getGoafData, params }, { joinParamsToUrl: true });
 }
 
 // 获取煤矿数据
@@ -38,7 +37,6 @@ export const getMineData = (params) =>
     params,
   });
 
-
 //查询预警数据
 export const getProvinceAlarm = (params) =>
   defHttp.post(
@@ -50,4 +48,47 @@ export const getProvinceAlarm = (params) =>
       },
     },
     { joinParamsToUrl: true }
-  );
+  );
+
+// 实时预警统计
+export const getRealAlarmNum = (params) =>
+  defHttp.post(
+    {
+      url: Api.getRealAlarmNum,
+      params,
+    },
+    {
+      joinParamsToUrl: true,
+    }
+  );
+
+// 接入统计
+export const getGoafAccessCount = (params) =>
+  defHttp.get({
+    url: Api.getGoafAccessCount,
+    params,
+  });
+
+// 重点矿井报警次数统计
+export const getHistoryAlarmNum = (params) =>
+  defHttp.post(
+    {
+      url: Api.getHistoryAlarmNum,
+      params,
+    },
+    {
+      joinParamsToUrl: true,
+    }
+  );
+
+// 报警种类统计
+export const getAlarmType = (params) =>
+  defHttp.post(
+    {
+      url: Api.getAlarmType,
+      params,
+    },
+    {
+      joinParamsToUrl: true,
+    }
+  );

src/views/monitor/sealedMonitor/components/RealtimeDetailsModal.vue

@@ -24,7 +24,7 @@
       <MiniBoard
         v-for="(item, index) in modalDetailsData.board"
         :key="index"
-        type="I"
+        type="J"
         :label="item.label"
         :value="dataRef[item.value] || '-'"
         layout="label-top"