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

src/views/vent/bundle/bundleMonitorTable/bundle-table.api.ts

@@ -0,0 +1,10 @@
+import { defHttp } from '/@/utils/http/axios';
+
+enum Api {
+  getBundleInfo = '/ventanaly-device/safety/reportLocalData/queryReportData',
+}
+/**
+ *
+ * @param params
+ */
+export const getBundleInfoList = (params) => defHttp.post({ url: Api.getBundleInfo, params });

src/views/vent/bundle/bundleMonitorTable/bundle-table.data.ts

@@ -0,0 +1,144 @@
+import { BasicColumn } from '/@/components/Table';
+export const columns: BasicColumn[] = [
+  {
+    title: '序号',
+    width: 60,
+    align: 'center',
+    dataIndex: 'xh',
+    key: 'xh',
+  },
+  {
+    title: '测点名称',
+    dataIndex: 'jcdd',
+    key: 'jcdd',
+    width: 150,
+    align: 'center',
+  },
+  {
+    title: '分析次数',
+    dataIndex: 'fxcs',
+    key: 'fxcs',
+    width: 60,
+    align: 'center',
+  },
+  {
+    title: 'CO(PPM)',
+    children: [
+      {
+        title: '最大值',
+        dataIndex: 'co_max',
+        key: 'co_max',
+        width: 80,
+        align: 'center',
+      },
+      {
+        title: '平均值',
+        dataIndex: 'co_ave',
+        key: 'co_ave',
+        width: 80,
+        align: 'center',
+      },
+    ],
+  },
+  {
+    title: 'CO2(%)',
+    children: [
+      {
+        title: '最大值',
+        dataIndex: 'co2_max',
+        key: 'co2_max',
+        width: 80,
+        align: 'center',
+      },
+      {
+        title: '平均值',
+        dataIndex: 'co2_ave',
+        key: 'co2_ave',
+        width: 80,
+        align: 'center',
+      },
+    ],
+  },
+  {
+    title: 'O2(%)',
+    children: [
+      {
+        title: '最小值',
+        dataIndex: 'o2_min',
+        key: 'o2_min',
+        width: 80,
+        align: 'center',
+      },
+      {
+        title: '平均值',
+        dataIndex: 'o2_ave',
+        key: 'o2_ave',
+        width: 80,
+        align: 'center',
+      },
+    ],
+  },
+  {
+    title: 'CH4(%)',
+    children: [
+      {
+        title: '最大值',
+        dataIndex: 'ch4_max',
+        key: 'ch4_max',
+        width: 80,
+        align: 'center',
+      },
+      {
+        title: '平均值',
+        dataIndex: 'ch4_ave',
+        key: 'ch4_ave',
+        width: 80,
+        align: 'center',
+      },
+    ],
+  },
+  {
+    title: 'C2H2(PPM)',
+    children: [
+      {
+        title: '最大值',
+        dataIndex: 'c2h2_max',
+        key: 'c2h2_max',
+        width: 80,
+        align: 'center',
+      },
+      {
+        title: '平均值',
+        dataIndex: 'c2h2_ave',
+        key: 'c2h2_ave',
+        width: 80,
+        align: 'center',
+      },
+    ],
+  },
+  {
+    title: 'C2H4(PPM)',
+    children: [
+      {
+        title: '最大值',
+        dataIndex: 'c2h4_max',
+        key: 'c2h4_max',
+        width: 80,
+        align: 'center',
+      },
+      {
+        title: '平均值',
+        dataIndex: 'c2h4_ave',
+        key: 'c2h4_ave',
+        width: 80,
+        align: 'center',
+      },
+    ],
+  },
+  {
+    title: '操作',
+    dataIndex: 'action',
+    width: 100,
+    align: 'center',
+  },
+];

src/views/vent/bundle/bundleMonitorTable/index.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="dustMonitor">
+    <customHeader>束管日报分析</customHeader>
+    <a-table :columns="columns" :data-source="tableData" size="small" :scroll="{ y: 500 }" class="tableW">
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.dataIndex === 'action'">
+          <a class="action-link" @click="toDetail(record)">数据分析</a>
+        </template>
+      </template>
+    </a-table>
+    <a-modal style="width: 24%; height: 600px" title="爆炸三角形" v-model:visible="modalVisible" :draggable="true" :footer="null">
+      <blastDelta :posMonitor="posMonitor" />
+    </a-modal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, shallowRef } from 'vue';
+import { columns } from './bundle-table.data';
+import { getBundleInfoList } from './bundle-table.api';
+import customHeader from '/@/components/vent/customHeader.vue';
+// import { blastDelta } from './modal/blastDelta.vue';
+import blastDelta from './modal/blastDelta.vue';
+
+let tableData = ref<any[]>([]);
+let modalVisible = ref(false);
+const posMonitor = shallowRef({});
+async function getTableList() {
+  let res = await getBundleInfoList({ type: 'bundle' });
+  const content = res.content;
+  let contentArr = JSON.parse(content);
+  tableData.value = contentArr;
+}
+
+function toDetail(record: any) {
+  posMonitor.value = record;
+  console.log(posMonitor.value, 'posMonitor');
+  modalVisible.value = true;
+}
+onMounted(() => {
+  getTableList();
+});
+</script>
+
+<style lang="less" scoped>
+@import '/@/design/theme.less';
+
+.dustMonitor {
+  width: 100%;
+  height: 100%;
+  padding: 80px 10px 15px 10px;
+  box-sizing: border-box;
+  position: relative;
+}
+
+:deep(.zxm-table-thead > tr > th:last-child) {
+  border-right: 1px solid #91e9fe !important;
+}
+
+:deep(.zxm-picker-input > input) {
+  color: #fff;
+}
+
+:deep(.zxm-select:not(.zxm-select-customize-input) .zxm-select-selector) {
+  border: 1px solid var(--vent-form-item-border) !important;
+  background-color: #ffffff00 !important;
+}
+
+:deep(.zxm-select-selection-item) {
+  color: #fff !important;
+}
+</style>

src/views/vent/bundle/bundleMonitorTable/modal/blastDelta.vue

@@ -0,0 +1,555 @@
+<template>
+  <div class="blastDelta">
+    <!-- <div class="blast-title">爆炸三角形</div> -->
+    <div ref="coord" class="coords">
+      <div class="coord-lineY">
+        <div :style="{ width: '5px', height: `${lengY}px`, 'border-top': '1px solid #0079ff' }" v-for="item in 10" :key="item"></div>
+      </div>
+      <div class="coord-labelY">
+        <div :style="{ width: '20px', height: `${lengY}px`, color: '#fff' }" v-for="(ite, ind) in 10" :key="ind">{{ ind == 0 ? maxY : '' }}</div>
+      </div>
+      <div class="coord-lineX">
+        <div :style="{ height: '5px', width: `${lengY}px`, 'border-right': '1px solid #0079ff' }" v-for="item in 15" :key="item"></div>
+      </div>
+      <div class="coord-labelX">
+        <div :style="{ height: '20px', width: `${lengY}px`, color: '#fff' }" v-for="(ite, ind) in 15" :key="ind">{{ ind == 14 ? maxX : '' }}</div>
+      </div>
+      <div class="line-AB" :style="{ width: 'calc(100% - 10px)', height: 'calc(100% - 10px)' }">
+        <canvas id="myCanvas" :width="canvasSize.width" :height="canvasSize.height"></canvas>
+      </div>
+      <!-- <div class="line-legend">
+        <div class="legend-ite" v-for="ite in 4" :key="ite"></div>
+      </div>
+      <div class="legend-name">
+        <div class="item-name" v-for="item in legendList" :key="item">{{ item.name }}</div>
+      </div> -->
+    </div>
+    <div class="line-legend">
+      <div class="legend-box" v-for="(item, index) in legendList" :key="index">
+        <span class="legend-icon"></span>
+        <span class="legend-label">{{ item.name }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive, onMounted, watch, nextTick } from 'vue';
+
+let props = defineProps({
+  posMonitor: {
+    type: Object,
+    default: () => {
+      return {};
+    },
+  },
+  canvasSize: {
+    type: Object,
+    default: () => {
+      return { width: 348, height: 245 };
+    },
+  },
+});
+let coord = ref(null);
+let lengY = ref(0);
+//与x,y轴相交最大值坐标
+let maxY = ref(0);
+let maxX = ref(0);
+let maxY1 = ref(0);
+let maxX1 = ref(0);
+
+//A点坐标
+let coordinateA = reactive({
+  x: 0,
+  y: 0,
+});
+//B点坐标
+let coordinateB = reactive({
+  x: 0,
+  y: 0,
+});
+//E点坐标
+let coordinateE = reactive({
+  x: 0,
+  y: 0,
+});
+//F点坐标
+let coordinateF = reactive({
+  x: 0,
+  y: 0,
+});
+//G点坐标
+let coordinateG = reactive({
+  x: 0,
+  y: 0,
+});
+
+let legendList = ref<any[]>([{ name: '不爆炸' }, { name: '可燃气体不足' }, { name: '可爆炸' }, { name: '氧气不足' }]);
+
+function getAreas() {
+  if (coord.value) {
+    let width = coord.value.offsetWidth;
+    let height = coord.value.offsetHeight;
+    lengY.value = Math.ceil((height - 10) / 10);
+  }
+}
+//根据A,B,E,G等点坐标绘制爆炸三角形
+function getBlast() {
+  maxY.value = getCoordABY(0);
+  // 获取canvas元素
+  let canvas = document.getElementById('myCanvas');
+  let ctx = canvas.getContext('2d');
+  let scalcY, scalcX;
+  if (coordinateB.x < 50) {
+    maxX.value = 50;
+    scalcY = canvas.height / maxY.value;
+    scalcX = canvas.width / maxX.value;
+  } else {
+    maxX.value = parseInt(coordinateB.x + 10);
+    scalcY = canvas.height / maxY.value;
+    scalcX = canvas.width / maxX.value;
+  }
+  //绘制AB点线条
+  ctx.beginPath();
+  ctx.moveTo(coordinateA.x * scalcX, canvas.height - coordinateA.y * scalcY); // 开始绘制的点
+  ctx.lineTo(coordinateB.x * scalcX, canvas.height - coordinateB.y * scalcY); // 结束绘制的点
+  ctx.strokeStyle = '#000';
+  ctx.stroke(); // 进行绘制
+
+  //绘制AE线条
+  ctx.beginPath();
+  ctx.moveTo(coordinateA.x * scalcX, canvas.height - coordinateA.y * scalcY); // 开始绘制的点
+  ctx.lineTo(coordinateE.x * scalcX, canvas.height - coordinateE.y * scalcY); // 结束绘制的点
+  ctx.strokeStyle = '#000';
+  ctx.stroke(); // 进行绘制
+
+  //绘制BE线条
+  ctx.beginPath();
+  ctx.moveTo(coordinateB.x * scalcX, canvas.height - coordinateB.y * scalcY); // 开始绘制的点
+  ctx.lineTo(coordinateE.x * scalcX, canvas.height - coordinateE.y * scalcY); // 结束绘制的点
+  ctx.strokeStyle = '#000';
+  ctx.stroke(); // 进行绘制
+
+  //绘制A点与坐标轴连线
+  ctx.beginPath();
+  ctx.moveTo(0, canvas.height - maxY.value * scalcY); // 开始绘制的点
+  ctx.lineTo(coordinateA.x * scalcX, canvas.height - coordinateA.y * scalcY); // 结束绘制的点
+  ctx.strokeStyle = '#000';
+  ctx.stroke(); // 进行绘制
+
+  //绘制B点c连线
+  ctx.beginPath();
+  ctx.moveTo(coordinateB.x * scalcX, canvas.height - coordinateB.y * scalcY); // 开始绘制的点
+  ctx.lineTo(maxX.value * scalcX, canvas.height - getCoordABY(maxX.value) * scalcY); // 结束绘制的点
+  ctx.strokeStyle = '#000';
+  ctx.stroke(); // 进行绘制
+  //绘制c点与坐标轴连线
+  ctx.beginPath();
+  ctx.moveTo(maxX.value * scalcX, canvas.height - getCoordABY(maxX.value) * scalcY); // 开始绘制的点
+  ctx.lineTo(maxX.value * scalcX, canvas.height); // 结束绘制的点
+  ctx.strokeStyle = '#000';
+  ctx.stroke(); // 进行绘制
+
+  //绘制E,F线条
+  ctx.beginPath();
+  ctx.moveTo(coordinateE.x * scalcX, canvas.height - coordinateE.y * scalcY); // 开始绘制的点
+  ctx.lineTo(coordinateF.x * scalcX, canvas.height - coordinateF.y * scalcY); // 结束绘制的点
+  ctx.strokeStyle = '#000';
+  ctx.stroke(); // 进行绘制
+
+  //绘制GE线条
+  ctx.beginPath();
+  ctx.moveTo(coordinateG.x * scalcX, canvas.height - coordinateG.y * scalcY); // 开始绘制的点
+  ctx.lineTo(coordinateE.x * scalcX, canvas.height - coordinateE.y * scalcY); // 结束绘制的点
+  ctx.strokeStyle = '#000';
+  ctx.stroke(); // 进行绘制
+
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  let pointData = [
+    {
+      arr: [
+        { x: coordinateG.x * scalcX, y: canvas.height - coordinateG.y * scalcY }, //G
+        { x: coordinateE.x * scalcX, y: canvas.height - coordinateE.y * scalcY }, //E
+        { x: coordinateA.x * scalcX, y: canvas.height - coordinateA.y * scalcY }, //A
+        { x: 0, y: canvas.height - maxY.value * scalcY },
+      ],
+      color: 'rgb(1, 127, 2, .9)',
+    },
+    {
+      arr: [
+        { x: 0, y: canvas.height }, //原点
+        { x: coordinateF.x * scalcX, y: canvas.height - coordinateF.y * scalcY }, //F
+        { x: coordinateE.x * scalcX, y: canvas.height - coordinateE.y * scalcY }, //E
+        { x: coordinateG.x * scalcX, y: canvas.height - coordinateG.y * scalcY }, //G
+      ],
+      color: 'rgb(127, 254, 2, .9)',
+    },
+    {
+      arr: [
+        { x: coordinateF.x * scalcX, y: canvas.height - coordinateF.y * scalcY }, //F
+        { x: maxX.value * scalcX, y: canvas.height },
+        { x: maxX.value * scalcX, y: canvas.height - getCoordABY(maxX.value) * scalcY },
+        { x: coordinateB.x * scalcX, y: canvas.height - coordinateB.y * scalcY }, //B
+        { x: coordinateE.x * scalcX, y: canvas.height - coordinateE.y * scalcY }, //E
+      ],
+      color: 'rgb(255, 255, 0, .9)',
+    },
+    {
+      arr: [
+        { x: coordinateE.x * scalcX, y: canvas.height - coordinateE.y * scalcY }, //E
+        { x: coordinateB.x * scalcX, y: canvas.height - coordinateB.y * scalcY }, //B
+        { x: coordinateA.x * scalcX, y: canvas.height - coordinateA.y * scalcY }, //A
+      ],
+      color: 'rgb(255, 0, 0, .9)',
+    },
+  ];
+
+  pointData.forEach((item, index) => {
+    ctx.beginPath();
+    ctx.moveTo(item.arr[0].x, item.arr[0].y);
+    item.arr.forEach((items, ind) => {
+      if (ind != 0) {
+        ctx.lineTo(item.arr[ind].x, item.arr[ind].y);
+      }
+    });
+    ctx.closePath();
+    ctx.fillStyle = item.color;
+    ctx.fill();
+    ctx.strokeStyle = 'transparent';
+    ctx.lineWidth = 1;
+    ctx.stroke();
+  });
+
+  // 标记点A
+  ctx.beginPath();
+  ctx.arc(coordinateA.x * scalcX, canvas.height - coordinateA.y * scalcY, 1, 0, 2 * Math.PI);
+  ctx.fillStyle = '#eee';
+  ctx.fill();
+  // 在点附近添加文字
+  ctx.font = '12px Arial';
+  ctx.fillStyle = '#fff';
+  ctx.fillText('A', coordinateA.x * scalcX + 10, canvas.height - coordinateA.y * scalcY); // 文字位置略微偏上，以便于文字与点对齐
+
+  //标记点B
+  ctx.beginPath();
+  ctx.arc(coordinateB.x * scalcX, canvas.height - coordinateB.y * scalcY, 1, 0, 2 * Math.PI);
+  ctx.fillStyle = '#eee';
+  ctx.fill();
+  // 在点附近添加文字
+  ctx.font = '12px Arial';
+  ctx.fillStyle = '#fff';
+  ctx.fillText('B', coordinateB.x * scalcX + 10, canvas.height - coordinateB.y * scalcY); // 文字位置略微偏上，以便于文字与点对齐
+
+  //标记点E
+  ctx.beginPath();
+  ctx.arc(coordinateE.x * scalcX, canvas.height - coordinateE.y * scalcY, 1, 0, 2 * Math.PI);
+  ctx.fillStyle = '#eee';
+  ctx.fill();
+  // 在点附近添加文字
+  ctx.font = '12px Arial';
+  ctx.fillStyle = '#fff';
+  ctx.fillText('E', coordinateE.x * scalcX + 5, canvas.height - coordinateE.y * scalcY + 10); // 文字位置略微偏上，以便于文字与点对齐
+
+  //标记点G
+  ctx.beginPath();
+  ctx.arc(coordinateG.x * scalcX, canvas.height - coordinateG.y * scalcY, 1, 0, 2 * Math.PI);
+  ctx.fillStyle = '#eee';
+  ctx.fill();
+  // 在点附近添加文字
+  ctx.font = '12px Arial';
+  ctx.fillStyle = '#fff';
+  ctx.fillText('G', coordinateG.x * scalcX + 5, canvas.height - coordinateG.y * scalcY); // 文字位置略微偏上，以便于文字与点对齐
+  //标记点F
+  ctx.beginPath();
+  ctx.arc(coordinateF.x * scalcX, canvas.height - coordinateF.y * scalcY, 1, 0, 2 * Math.PI);
+  ctx.fillStyle = '#eee';
+  ctx.fill();
+  // 在点附近添加文字
+  ctx.font = '12px Arial';
+  ctx.fillStyle = '#fff';
+  ctx.fillText('F', coordinateF.x * scalcX + 10, canvas.height - coordinateF.y * scalcY - 10); // 文字位置略微偏上，以便于文字与点对齐
+  //标记点
+  ctx.beginPath();
+  ctx.arc(maxX1.value * scalcX, canvas.height - maxY1.value * scalcY, 5, 0, 2 * Math.PI);
+  ctx.fillStyle = 'blue';
+  ctx.fill();
+  // 在点附近添加文字
+  ctx.font = '12px Arial';
+  ctx.fillStyle = '#fff';
+  ctx.fillText('', maxX1.value * scalcX + 10, canvas.height - maxY1.value * scalcY - 10); // 文字位置略微偏上，以便于文字与点对齐
+}
+//绘制不爆炸三角形
+function getUnblast() {
+  maxY.value = 21;
+  maxX.value = 50;
+  // 获取canvas元素
+  let canvas = document.getElementById('myCanvas');
+  let ctx = canvas.getContext('2d');
+  let scalcY = canvas.height / maxY.value;
+  let scalcX = canvas.width / maxX.value;
+
+  //绘制AB点线条
+  ctx.beginPath();
+  ctx.moveTo(0, canvas.height - maxY.value * scalcY); // 开始绘制的点
+  ctx.lineTo(maxX.value * scalcX, canvas.height); // 结束绘制的点
+  ctx.strokeStyle = '#000';
+  ctx.stroke(); // 进行绘制
+
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  let pointData = [
+    {
+      arr: [
+        { x: 0, y: canvas.height }, //原点
+        { x: 0, y: canvas.height - maxY.value * scalcY }, //A
+        { x: maxX.value * scalcX, y: canvas.height }, //B
+      ],
+      color: 'rgb(127, 254, 2, .9)',
+    },
+  ];
+
+  pointData.forEach((item, index) => {
+    ctx.beginPath();
+    ctx.moveTo(item.arr[0].x, item.arr[0].y);
+    item.arr.forEach((items, ind) => {
+      if (ind != 0) {
+        ctx.lineTo(item.arr[ind].x, item.arr[ind].y);
+      }
+    });
+    ctx.closePath();
+    ctx.fillStyle = item.color;
+    ctx.fill();
+    ctx.strokeStyle = 'transparent';
+    ctx.lineWidth = 1;
+    ctx.stroke();
+  });
+
+  // 标记点A
+  ctx.beginPath();
+  ctx.arc(0, canvas.height - maxY.value * scalcY, 1, 0, 2 * Math.PI);
+  ctx.fillStyle = '#eee';
+  ctx.fill();
+  // 在点附近添加文字
+  ctx.font = '12px Arial';
+  ctx.fillStyle = '#fff';
+  ctx.fillText('A', 10, canvas.height - maxY.value * scalcY + 10); // 文字位置略微偏上，以便于文字与点对齐
+  // 标记点B
+  ctx.beginPath();
+  ctx.arc(maxX.value * scalcX, canvas.height, 1, 0, 2 * Math.PI);
+  ctx.fillStyle = '#eee';
+  ctx.fill();
+  // 在点附近添加文字
+  ctx.font = '12px Arial';
+  ctx.fillStyle = '#fff';
+  ctx.fillText('B', maxX.value * scalcX - 10, canvas.height - 10); // 文字位置略微偏上，以便于文字与点对齐
+  //标记点
+  ctx.beginPath();
+  ctx.arc(maxX1.value * scalcX, canvas.height - maxY1.value * scalcY, 5, 0, 2 * Math.PI);
+  ctx.fillStyle = 'blue';
+  ctx.fill();
+  // 在点附近添加文字
+  ctx.font = '12px Arial';
+  ctx.fillStyle = '#fff';
+  ctx.fillText('', maxX1.value * scalcX + 10, canvas.height - maxY1.value * scalcY - 10); // 文字位置略微偏上，以便于文字与点对齐
+}
+//根据横坐标获取直线AB纵坐标
+function getCoordABY(params) {
+  return Math.ceil(
+    ((parseFloat(coordinateB.y) - parseFloat(coordinateA.y)) * params -
+      parseFloat(coordinateA.x) * parseFloat(coordinateB.y) +
+      parseFloat(coordinateB.x) * parseFloat(coordinateA.y)) /
+      (parseFloat(coordinateB.x) - parseFloat(coordinateA.x))
+  );
+}
+//根据纵坐标获取直线AB横坐标
+function getCoordABX(params1) {
+  return Math.floor(
+    ((parseFloat(coordinateB.x) - parseFloat(coordinateA.x)) * params1 +
+      parseFloat(coordinateA.x) * parseFloat(coordinateB.y) -
+      parseFloat(coordinateB.x) * parseFloat(coordinateA.y)) /
+      (parseFloat(coordinateB.y) - parseFloat(coordinateA.y))
+  );
+}
+
+watch(
+  () => props.posMonitor,
+  (newV, oldV) => {
+    if (newV.btTriBlast) {
+      maxY1.value = parseFloat(newV.o2val);
+      maxX1.value = parseFloat(newV.coval) * 0.0001 + parseFloat(newV.gasval) + parseFloat(newV.ch2val) * 0.0001 + parseFloat(newV.chval) * 0.0001;
+      let btTriBlasts = newV.btTriBlast;
+      coordinateA.x = btTriBlasts.A_x;
+      coordinateA.y = btTriBlasts.A_y;
+      coordinateB.x = btTriBlasts.B_x;
+      coordinateB.y = btTriBlasts.B_y;
+      coordinateE.x = btTriBlasts.E_x;
+      coordinateE.y = btTriBlasts.E_y;
+      coordinateF.x = btTriBlasts.F_x;
+      coordinateF.y = btTriBlasts.F_y;
+      coordinateG.x = btTriBlasts.G_x;
+      coordinateG.y = btTriBlasts.G_y;
+      if (
+        !((coordinateA.y - coordinateB.y) / (coordinateA.x - coordinateB.x)) ||
+        (coordinateA.y - coordinateB.y) / (coordinateA.x - coordinateB.x) == 1
+      ) {
+        // 使用 nextTick 为了让 immediate watch 触发时等待组件挂载后执行绘制
+        nextTick(getUnblast);
+      } else {
+        nextTick(getBlast);
+      }
+    }
+  },
+  { deep: true, immediate: true }
+);
+
+onMounted(() => {
+  getAreas();
+});
+</script>
+
+<style lang="less" scoped>
+.blastDelta {
+  position: relative;
+  width: 100%;
+  height: 450px;
+
+  // .blast-title {
+  //   position: absolute;
+  //   left: 50%;
+  //   top: 24px;
+  //   transform: translate(-50%, 0);
+  //   font-size: 12px;
+  //   color: #fff;
+  // }
+
+  .line-legend {
+    position: absolute;
+    left: 50%;
+    top: 20px;
+    width: 75%;
+    height: 20px;
+    transform: translate(-50%, 0);
+    display: flex;
+    justify-content: space-around;
+
+    .legend-box {
+      display: flex;
+
+      height: 100%;
+      justify-content: center;
+      align-items: center;
+      font-size: 12px;
+
+      &:nth-child(1) {
+        flex: 1;
+
+        .legend-icon {
+          width: 10px;
+          height: 10px;
+          background-color: #7ffe02;
+          margin-right: 5px;
+        }
+      }
+
+      &:nth-child(2) {
+        flex: 1.5;
+
+        .legend-icon {
+          width: 10px;
+          height: 10px;
+          background-color: #017f02;
+          margin-right: 5px;
+        }
+      }
+
+      &:nth-child(3) {
+        flex: 1;
+
+        .legend-icon {
+          width: 10px;
+          height: 10px;
+          background-color: #ff0000;
+          margin-right: 5px;
+        }
+      }
+
+      &:nth-child(4) {
+        flex: 1;
+
+        .legend-icon {
+          width: 10px;
+          height: 10px;
+          background-color: #ffff00;
+          margin-right: 5px;
+        }
+      }
+    }
+  }
+
+  .coords {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    width: 90%;
+    height: 80%;
+    border-left: 1px solid #006c9d;
+    border-bottom: 1px solid #006c9d;
+    transform: translate(-45%, -46%);
+
+    .coord-lineY {
+      position: absolute;
+      left: -5px;
+      top: 10px;
+      width: 5px;
+      height: calc(100% - 10px);
+    }
+
+    .coord-labelY {
+      position: absolute;
+      left: -25px;
+      top: -5px;
+      width: 20px;
+      height: 100%;
+    }
+
+    .coord-lineX {
+      display: flex;
+      position: absolute;
+      bottom: -5px;
+      right: 10px;
+      width: calc(100% - 10px);
+      height: 5px;
+    }
+
+    .coord-labelX {
+      display: flex;
+      justify-content: flex-end;
+      position: absolute;
+      bottom: -25px;
+      left: -5px;
+      width: 100%;
+      height: 20px;
+    }
+
+    .line-AB {
+      position: absolute;
+      left: 0;
+      top: 10px;
+    }
+
+    // .legend-name {
+    //   position: absolute;
+    //   right: 0;
+    //   top: 20px;
+    //   height: 80px;
+
+    //   .item-name {
+    //     height: 20px;
+    //     line-height: 20px;
+    //     font-size: 10px;
+    //     color: #fff;
+    //     letter-spacing: 2px;
+    //   }
+    // }
+  }
+}
+</style>

src/views/vent/bundleSpy/bundleSpyTable/bundleSpy-table.api.ts

@@ -0,0 +1,10 @@
+import { defHttp } from '/@/utils/http/axios';
+
+enum Api {
+  getbunudleSpyInfo = '/ventanaly-device/safety/reportLocalData/queryReportData',
+}
+/**
+ *
+ * @param params
+ */
+export const getbundleSpyInfoList = (params) => defHttp.post({ url: Api.getbunudleSpyInfo, params });

src/views/vent/bundleSpy/bundleSpyTable/bundleSpy-table.data.ts

@@ -0,0 +1,94 @@
+import { BasicColumn } from '/@/components/Table';
+export const columns: BasicColumn[] = [
+  {
+    title: '序号',
+    width: 60,
+    align: 'center',
+    dataIndex: 'xh',
+    key: 'xh',
+  },
+  {
+    title: '化验编号',
+    dataIndex: 'hybh',
+    key: 'hybh',
+    width: 100,
+    align: 'center',
+  },
+  {
+    title: '采样地点',
+    dataIndex: 'jcdd',
+    key: 'jcdd',
+    width: 140,
+    align: 'center',
+  },
+  {
+    title: '取样分析时间',
+    dataIndex: 'qyfxsj',
+    key: 'qyfxsj',
+    width: 100,
+    align: 'center',
+  },
+  {
+    title: 'O2(%)',
+    dataIndex: 'o2_ave',
+    key: 'o2_ave',
+    width: 100,
+    align: 'center',
+  },
+  {
+    title: 'N2(%)',
+    dataIndex: 'n2_ave',
+    key: 'n2_ave',
+    width: 100,
+    align: 'center',
+  },
+  {
+    title: 'CO(%)',
+    dataIndex: 'co_ave',
+    key: 'co_ave',
+    width: 100,
+    align: 'center',
+  },
+  {
+    title: 'CO2(%)',
+    dataIndex: 'co2_ave',
+    key: 'co2_ave',
+    width: 100,
+    align: 'center',
+  },
+  {
+    title: 'CH4(%)',
+    dataIndex: 'ch4_ave',
+    key: 'ch4_ave',
+    width: 100,
+    align: 'center',
+  },
+  {
+    title: 'C2H6(%)',
+    dataIndex: 'c2h6_ave',
+    key: 'c2h6_ave',
+    width: 100,
+    align: 'center',
+  },
+  {
+    title: 'C2H4(%)',
+    dataIndex: 'c2h4_ave',
+    key: 'c2h4_ave',
+    width: 100,
+    align: 'center',
+  },
+  {
+    title: 'C2H2(%)',
+    dataIndex: 'c2h2_ave',
+    key: 'c2h2_ave',
+    width: 100,
+    align: 'center',
+  },
+  {
+    title: '总组分含量',
+    dataIndex: 'zzfhl_ave',
+    key: 'zzfhl_ave',
+    width: 100,
+    align: 'center',
+  },
+];

src/views/vent/bundleSpy/bundleSpyTable/index.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="dustMonitor">
+    <customHeader>束管色谱仪报表</customHeader>
+    <a-table :columns="columns" :data-source="tableData" size="small" :scroll="{ y: 500 }" class="tableW"> </a-table>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { columns } from './bundleSpy-table.data';
+import { getbundleSpyInfoList } from './bundleSpy-table.api';
+import customHeader from '/@/components/vent/customHeader.vue';
+
+let tableData = ref<any[]>([]);
+
+async function getTableList() {
+  let res = await getbundleSpyInfoList({ type: 'bundleSpy' });
+  const content = res.content;
+  let contentArr = JSON.parse(content);
+  tableData.value = contentArr;
+}
+
+onMounted(() => {
+  getTableList();
+});
+</script>
+
+<style lang="less" scoped>
+@import '/@/design/theme.less';
+
+.dustMonitor {
+  width: 100%;
+  height: 100%;
+  padding: 80px 10px 15px 10px;
+  box-sizing: border-box;
+  position: relative;
+}
+
+:deep(.zxm-table-thead > tr > th:last-child) {
+  border-right: 1px solid #91e9fe !important;
+}
+
+:deep(.zxm-picker-input > input) {
+  color: #fff;
+}
+
+:deep(.zxm-select:not(.zxm-select-customize-input) .zxm-select-selector) {
+  border: 1px solid var(--vent-form-item-border) !important;
+  background-color: #ffffff00 !important;
+}
+
+:deep(.zxm-select-selection-item) {
+  color: #fff !important;
+}
+</style>

src/views/vent/cad/GasGeoViewer.vue

@@ -0,0 +1,52 @@
+<template>
+  <!-- 更适用于文件共享中心的CAD viewer组件，支持两种使用方法，详见下文 -->
+  <CADViewer class="w-100% h-100%" />
+</template>
+<script lang="ts" setup>
+  import { onMounted, onUnmounted } from 'vue';
+  import { CADViewer, useCADViewer } from '/@/components/CADViewer';
+  import { queryGasGeoMap } from './cad.api';
+
+  const { processFile, postMessage, registHook, unregistHook } = useCADViewer();
+
+  function openFile() {
+    // 只触发一次，因为MKY_Open_Mxweb之后会自动触发MKY_Open_File_Complete钩子，导致循环
+    registHook('MKY_Open_File_Complete', () => {
+      unregistHook('MKY_Open_File_Complete');
+      queryGasGeoMap({}).then(({ id }) => {
+        processFile(id).then((path) => {
+          postMessage('MKY_Open_Mxweb', path);
+        });
+      });
+    });
+  }
+
+  // watch(
+  //   () => props.id,
+  //   (v) => {
+  //     if (!v) return;
+  //     openFile(v, props.filename);
+  //   }
+  // );
+
+  // let initByRoute = false;
+
+  onMounted(() => {
+    openFile();
+  });
+
+  onUnmounted(() => {
+    unregistHook('MKY_Open_File_Complete');
+  });
+</script>
+
+<style scoped lang="less">
+  @import '/@/design/theme.less';
+
+  ::v-deep .suffix {
+    height: 32px;
+    line-height: 32px;
+    margin-left: 5px;
+    color: var(--vent-font-color);
+  }
+</style>

src/views/vent/cad/cad.api.ts

@@ -0,0 +1,14 @@
+import { defHttp } from '/@/utils/http/axios';
+import { omitBy, isNil } from 'lodash-es';
+
+enum Api {
+  queryGasGeoMap = '/ventanaly-sharefile/fileServer/queryGasGeoMap',
+}
+
+/**
+ * 列表接口
+ * @param params
+ */
+export function queryGasGeoMap(params: any) {
+  return defHttp.get({ url: Api.queryGasGeoMap, params: omitBy(params, isNil) });
+}

src/views/vent/cad/index.vue

@@ -1,10 +0,0 @@
-<!-- eslint-disable vue/multi-word-component-names -->
-<template>
-  <CADViewer class="w-100% h-100%" show-operations :height="820" />
-</template>
-
-<script setup lang="ts">
-  import { CADViewer } from '/@/components/CADViewer';
-</script>
-
-<style lang="less" scoped></style>

src/views/vent/deviceManager/comment/DeviceModal.vue

@@ -59,15 +59,21 @@
           <ManagerWarningTable v-else :deviceId="deviceData.id" />
         </template>
       </a-tab-pane>
-      <a-tab-pane key="7" tab="摄像头配置"
-        ><EditRowTable
+      <a-tab-pane key="7" tab="摄像头配置">
+        <EditRowTable
           :columns="cameraColumns"
           :list="cameraList"
           :params="{ deviceid: deviceData.id }"
           @saveOrUpdate="saveCameraData"
           @deleteById="deleteCameraById"
           :isAdd="true"
-      /></a-tab-pane>
+        />
+      </a-tab-pane>
+      <a-tab-pane key="9" :tab="'预案管理'">
+        <template v-if="activeKey == '9'">
+          <AccidentPlanTable :deviceId="deviceData.id" />
+        </template>
+      </a-tab-pane>
       <!-- <a-tab-pane key="9" tab="预警指标修改">
         <template v-if="activeKey == '9'">
         <editWarnTable></editWarnTable>
@@ -86,6 +92,7 @@
   import ManagerWarningTable from './warningTabel/index1.vue';
   import ManagerWarningDeviceTable from './warningTabel/index2.vue';
   import BackWindDeviceTable from './warningTabel/index3.vue';
+  import AccidentPlanTable from './warningTabel/index4.vue';
   import WorkFacePointTable from './pointTabel/WorkFacePointTable.vue';
   import DeviceReportInfo from './DeviceReportInfo.vue';
   // import editWarnTable from './editWarnTable/index.vue'

src/views/vent/deviceManager/comment/warningTabel/index4.vue

@@ -0,0 +1,177 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <!-- 配置预警设备 -->
+  <div class="warning-device-box">
+    <div class="warning-box">
+      <div v-for="item in warningList" class="link-item" :class="{ 'active-device-title': item.id == activeID }" :key="item.id">
+        <span class="" @click="selectWarning(item.id)">{{ item.alarmName }}</span>
+      </div>
+    </div>
+    <div class="device-box">
+      <a-button class="vent-margin-b-5" type="primary" @click="handleOpen(true, {})"> 新增 </a-button>
+      <a-table :columns="modelAlarmColumns" :data-source="dataSource" bordered :scroll="{ y: 500 }" :pagination="false" showIndexColumn>
+        <template v-if="show" #bodyCell="{ column, record }">
+          <template v-if="column.dataIndex === 'operation'">
+            <a class="action-link" @click="handleOpen('update', record)">编辑</a>
+            <a-popconfirm title="确认删除" @confirm="handleDelete(record)">
+              <a class="action-link vent-margin-l-10">删除</a>
+            </a-popconfirm>
+          </template>
+        </template>
+      </a-table>
+    </div>
+  </div>
+  <BasicModal @register="register" :width="800" :min-height="600" @ok="onSubmit">
+    <BasicForm @register="registerForm" />
+  </BasicModal>
+  <!-- <BaseModal @register="register" @add="onSubmit" @update="onSubmit" :form-schemas="formSchemas" :monitor-type="'2,3,9'" /> -->
+</template>
+
+<script lang="ts" setup>
+  import { ref, onMounted, nextTick } from 'vue';
+  import { modelAlarmColumns, modelAlarmFormSchemas } from './warning.data';
+  import { warningLogList, modelAlarmAutoList, modelAlarmAutoAdd, modelAlarmAutoEdit, modelAlarmAutoDelete } from './warning.api';
+  // import BaseModal from './BaseModal.vue';
+  import { message } from 'ant-design-vue';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { BasicModal, useModal } from '/@/components/Modal';
+
+  defineEmits(['register']);
+
+  const props = defineProps({
+    deviceId: { type: String },
+  });
+
+  const show = ref(false);
+  const formSchemas = modelAlarmFormSchemas();
+  const activeID = ref('');
+  const warningList = ref<{ id: string; alarmName: string }[]>([]);
+  const dataSource = ref<any[]>([]);
+
+  function selectWarning(id) {
+    activeID.value = id;
+    // 查询该条目的下预警设备列表
+    getDataSource();
+  }
+
+  async function getWarningList() {
+    const result = await warningLogList({ sysId: props.deviceId, pageSize: 100000 }); //id: props.deviceId
+    warningList.value = result.records;
+    activeID.value = warningList.value[0]['id'];
+  }
+
+  async function getDataSource() {
+    show.value = false;
+    const result = await modelAlarmAutoList({ sysId: props.deviceId, alarmId: activeID.value, pageSize: 100000 });
+    // const result = await Promise.resolve({
+    //   records: [
+    //     {
+    //       id: 0,
+    //       deviceName: '设备名称',
+    //       maxArea: '最大过风面积',
+    //       des: '灾变时动作描述',
+    //     },
+    //   ],
+    // });
+    show.value = true;
+    dataSource.value = result.records;
+  }
+
+  async function handleDelete(record) {
+    await modelAlarmAutoDelete({ id: record.id });
+    getDataSource();
+  }
+
+  const [register, { openModal, closeModal }] = useModal();
+  const [registerForm, { setFieldsValue, resetFields, validateFields, getFieldsValue }] = useForm({
+    schemas: formSchemas,
+    showActionButtonGroup: false,
+  });
+
+  async function handleOpen(flag, record) {
+    if (!activeID.value) {
+      message.warning('请先选择预警条目！');
+      return;
+    }
+    openModal(true, {
+      isUpdate: flag == 'update',
+    });
+    nextTick(() => {
+      resetFields();
+      setFieldsValue(record);
+    });
+  }
+
+  async function onSubmit() {
+    if (activeID.value) {
+      await validateFields();
+      const values = getFieldsValue();
+      // 提交数据弹窗
+      if (values.id) {
+        await modelAlarmAutoEdit({ ...values });
+      } else {
+        await modelAlarmAutoAdd({ ...values, sysId: props.deviceId, alarmId: activeID.value });
+      }
+      getDataSource();
+    }
+    closeModal();
+  }
+
+  onMounted(async () => {
+    await getWarningList();
+    await getDataSource();
+  });
+</script>
+
+<style lang="less" scoped>
+  @import '/@/design/theme.less';
+  @ventSpace: zxm;
+
+  .warning-device-box {
+    width: 100%;
+    height: 600px;
+    overflow-y: auto;
+    display: flex;
+    .warning-box {
+      width: 200px;
+      height: 100%;
+      overflow-y: auto;
+      background: #ffffff11;
+      padding: 5px;
+      border-radius: 5px;
+
+      .link-item {
+        position: relative;
+        cursor: pointer;
+        line-height: 30px;
+        padding-left: 30px;
+        color: var(--vent-font-color);
+        span:hover {
+          color: var(--vent-font-action-link);
+        }
+        &::after {
+          content: '';
+          position: absolute;
+          display: block;
+          width: 8px;
+          height: 8px;
+          top: 12px;
+          left: 10px;
+          transform: rotateZ(45deg) skew(10deg, 10deg);
+          background: var(--vent-base-light-bg);
+        }
+      }
+      .active-device-title {
+        color: var(--vent-font-action-link);
+      }
+    }
+    .device-box {
+      flex: 1;
+      margin-left: 10px;
+    }
+
+    .action-link {
+      color: var(--vent-font-action-link);
+    }
+  }
+</style>

src/views/vent/deviceManager/comment/warningTabel/warning.api.ts

@@ -38,6 +38,13 @@ enum Api {
   backWindControlDevicePointBatchAdd = '/safety/managesysAuto/addBatch',
   backWindControlDevicePointDelete = '/safety/managesysAuto/delete',
   backWindControlDevicePointEdit = '/safety/managesysAuto/edit',
+
+  modelAlarmAutoList = '/ventanaly-device/safety/modelAlarmAuto/list',
+  modelAlarmAutoEdit = '/ventanaly-device/safety/modelAlarmAuto/edit',
+  modelAlarmAutoDelete = '/ventanaly-device/safety/modelAlarmAuto/delete',
+  modelAlarmAutoAdd = '/ventanaly-device/safety/modelAlarmAuto/add',
+  modelAlarmAutoDeleteBatch = '/ventanaly-device/safety/modelAlarmAuto/deleteBatch',
+  modelAlarmAutoAddBatch = '/ventanaly-device/safety/modelAlarmAuto/addBatch',
 }
 /**
  * 导出api
@@ -132,3 +139,11 @@ export const warningLogList = (params) => defHttp.get({ url: Api.warningLogList,
 export const warningLogAdd = (params) => defHttp.post({ url: Api.warningLogAdd, params });
 export const warningLogEdit = (params) => defHttp.put({ url: Api.warningLogEdit, params });
 export const warningLogDeleteById = (params) => defHttp.delete({ url: Api.warningLogDeleteById, params });
+
+// 模型灾变预案配置
+export const modelAlarmAutoList = (params) => defHttp.get({ url: Api.modelAlarmAutoList, params });
+export const modelAlarmAutoAdd = (params) => defHttp.post({ url: Api.modelAlarmAutoAdd, params });
+export const modelAlarmAutoAddBatch = (params) => defHttp.post({ url: Api.modelAlarmAutoAddBatch, params });
+export const modelAlarmAutoDelete = (params) => defHttp.delete({ url: Api.modelAlarmAutoDelete, params }, { joinParamsToUrl: true });
+export const modelAlarmAutoDeleteBatch = (params) => defHttp.delete({ url: Api.modelAlarmAutoDeleteBatch, params });
+export const modelAlarmAutoEdit = (params) => defHttp.post({ url: Api.modelAlarmAutoEdit, params });

src/views/vent/deviceManager/comment/warningTabel/warning.data.ts

@@ -338,6 +338,11 @@ export const controlFormSchemas = (param) =>
       field: 'orderNum',
       component: 'InputNumber',
     },
+    {
+      label: '操作描述',
+      field: 'remark',
+      component: 'Input',
+    },
   ];
 
 export const controlDevicePointColumns: BasicColumn[] = [
@@ -754,3 +759,153 @@ export const testData1 = [
     updateBy: 'Dublin No. 2 Lake Park',
   },
 ];
+
+export const modelAlarmFormSchemas = () =>
+  <FormSchema[]>[
+    {
+      label: 'ID',
+      field: 'id',
+      component: 'Input',
+      show: false,
+    },
+    {
+      label: '灾变时过风面积',
+      field: 'alarmArea',
+      component: 'InputNumber',
+    },
+    {
+      label: '灾变时状态',
+      field: 'alarmState',
+      component: 'Select',
+      componentProps: {
+        options: [
+          {
+            label: '开启',
+            value: 1,
+          },
+          {
+            label: '关闭',
+            value: 0,
+          },
+        ],
+      },
+      // required: true,
+    },
+    {
+      label: '灾变时动作描述',
+      field: 'des',
+      component: 'Input',
+    },
+    {
+      label: '恢复时动作描述',
+      field: 'des2',
+      component: 'Input',
+    },
+    {
+      label: '设备类型',
+      field: 'deviceKind',
+      component: 'Select',
+      componentProps: {
+        options: [
+          {
+            label: '风门',
+            value: 'gate',
+          },
+          {
+            label: '风窗',
+            value: 'window',
+          },
+          {
+            label: '局部风机',
+            value: 'fanlocal',
+          },
+          {
+            label: '主风机',
+            value: 'fanmain',
+          },
+        ],
+      },
+      // required: true,
+    },
+    {
+      label: '设备名称',
+      field: 'deviceName',
+      component: 'Input',
+    },
+    {
+      label: '控制设备ID',
+      field: 'modelDevId',
+      component: 'Input',
+    },
+    {
+      label: '最大过风面积',
+      field: 'maxArea',
+      component: 'InputNumber',
+    },
+    {
+      label: '正常过风面积',
+      field: 'normalArea',
+      component: 'InputNumber',
+    },
+    {
+      label: '正常时状态',
+      field: 'normalState',
+      component: 'Select',
+      componentProps: {
+        options: [
+          {
+            label: '开启',
+            value: 1,
+          },
+          {
+            label: '关闭',
+            value: 0,
+          },
+        ],
+      },
+      // required: true,
+    },
+    {
+      label: '巷道ID',
+      field: 'tunId',
+      component: 'Input',
+    },
+    {
+      label: '执行顺序',
+      field: 'orderNum',
+      component: 'InputNumber',
+    },
+  ];
+
+export const modelAlarmColumns: TableColumnType[] = [
+  {
+    title: '序号',
+    width: 80,
+    align: 'center',
+    customRender: ({ index }: { index: number }) => `${index + 1}`,
+  },
+  // { dataIndex: 'alarmArea', title: '灾变时过风面积' },
+  // { dataIndex: 'alarmId', title: '报警条目id' },
+  // { dataIndex: 'alarmName', title: '预警名称' },
+  // { dataIndex: 'alarmState', title: '灾变时状态' },
+  // { dataIndex: 'bpmStatus', title: '审批状态' },
+  // { dataIndex: 'createBy', title: '创建人' },
+  // { dataIndex: 'createTime', title: '创建日期' },
+  // { dataIndex: 'des2', title: '恢复正常时动作描述' },
+  // { dataIndex: 'deviceId', title: '关联设备id' },
+  // { dataIndex: 'deviceKind', title: '设备类型' },
+  { dataIndex: 'deviceName', title: '设备名称' },
+  { dataIndex: 'maxArea', title: '最大过风面积' },
+  { dataIndex: 'des', title: '灾变时动作描述' },
+  // { dataIndex: 'modelDevId', title: '控制设备id' },
+  // { dataIndex: 'normalArea', title: '正常过风面积' },
+  // { dataIndex: 'normalState', title: '正常时状态' },
+  // { dataIndex: 'orderNum', title: '执行顺序' },
+  // { dataIndex: 'sysId', title: '场景ID' },
+  // { dataIndex: 'sysName', title: '场景名称' },
+  // { dataIndex: 'sysOrgCode', title: '所属部门' },
+  // { dataIndex: 'tunId', title: '巷道id' },
+  // { dataIndex: 'updateBy', title: '更新人' },
+  // { dataIndex: 'updateTime', title: '更新日期' },
+  { dataIndex: 'operation', title: '操作' },
+];

src/views/vent/dust/dustMonitorTable/dsut-table.api.ts

@@ -0,0 +1,12 @@
+import { defHttp } from '/@/utils/http/axios';
+
+enum Api {
+  getDustInfo = '/ventanaly-device/safety/reportLocalData/queryReportData',
+  getFileList = '/ventanaly-device/safety/reportLocalData/list',
+}
+/**
+ * 获取粉尘监测结果报表
+ * @param params
+ */
+export const getDustInfoList = (params) => defHttp.post({ url: Api.getDustInfo, params });
+export const getAllFileList = (params) => defHttp.get({ url: Api.getFileList, params });

src/views/vent/dust/dustMonitorTable/dust-table.data.ts

@@ -0,0 +1,130 @@
+export const columns = [
+  {
+    title: '序号',
+    width: 60,
+    align: 'center',
+    customRender: ({ index }: { index: number }) => `${index + 1}`,
+  },
+  {
+    title: '工作场所',
+    dataIndex: 'gzcs',
+    key: 'gzcs',
+    width: 130,
+    align: 'center',
+  },
+  {
+    title: '工种',
+    dataIndex: 'gz',
+    key: 'gz',
+    width: 100,
+    align: 'center',
+  },
+  {
+    title: '监测地点',
+    dataIndex: 'jcdd',
+    key: 'jcdd',
+    width: 100,
+    align: 'center',
+  },
+  {
+    title: '粉尘种类',
+    dataIndex: 'fczl',
+    key: 'fczl',
+    width: 80,
+    align: 'center',
+  },
+  {
+    title: '总尘(短时间监测浓度，单位：mg/m³)',
+    width: 100,
+    align: 'center',
+    children: [
+      {
+        title: '作业工序-生产',
+        dataIndex: 'sc_zcds',
+        key: 'sc_zcds',
+        width: 100,
+        align: 'center',
+      },
+      {
+        title: '作业工序-检修',
+        dataIndex: 'jx_zcds',
+        key: 'jx_zcds',
+        width: 100,
+        align: 'center',
+      },
+    ],
+  },
+  {
+    title: '呼尘(短时间监测浓度，单位：mg/m³)',
+    width: 100,
+    align: 'center',
+    children: [
+      {
+        title: '作业工序-生产',
+        dataIndex: 'sc_hcds',
+        key: 'sc_hcds',
+        width: 100,
+        align: 'center',
+      },
+      {
+        title: '作业工序-检修',
+        dataIndex: 'jx_hcds',
+        key: 'jx_hcds',
+        width: 100,
+        align: 'center',
+      },
+    ],
+  },
+  {
+    title: '总尘(时间加权平均浓度，单位：mg/m³)',
+    dataIndex: 'zcjqpj',
+    key: 'zcjqpj',
+    width: 100,
+    align: 'center',
+  },
+  {
+    title: '呼尘(时间加权平均浓度，单位：mg/m³)',
+    dataIndex: 'hcjqpj',
+    key: 'hcjqpj',
+    width: 100,
+    align: 'center',
+  },
+  {
+    title: '总尘容许浓度(mg/m³)',
+    children: [
+      {
+        title: '短时间监测浓度',
+        dataIndex: 'zcrxd_ds',
+        key: 'zcrxd_ds',
+        width: 100,
+        align: 'center',
+      },
+      {
+        title: '时间加权平均浓度',
+        dataIndex: 'zcrxd_jqpj',
+        key: 'zcrxd_jqpj',
+        width: 120,
+        align: 'center',
+      },
+    ],
+  },
+  {
+    title: '呼尘容许浓度(mg/m³)',
+    children: [
+      {
+        title: '短时间监测浓度',
+        dataIndex: 'hcrxd_ds',
+        key: 'hcrxd_ds',
+        width: 120,
+        align: 'center',
+      },
+      {
+        title: '时间加权平均浓度',
+        dataIndex: 'hcrxd_jqpj',
+        key: 'hcrxd_jqpj',
+        width: 120,
+        align: 'center',
+      },
+    ],
+  },
+];

src/views/vent/dust/dustMonitorTable/index.vue

@@ -0,0 +1,111 @@
+<template>
+  <div class="dustMonitor">
+    <customHeader>粉尘日常监测报表</customHeader>
+    <div class="select-container">
+      <span class="select-label">选择文件：</span>
+      <a-select v-model:value="formSearch.fileId" style="width: 220px" size="small" placeholder="请选择...">
+        <a-select-option v-for="item in selectList" :key="item.fileId">{{ item.fileName }}</a-select-option>
+      </a-select>
+      <a-button type="primary" style="margin-left: 10px" @click="getSearch">查询</a-button>
+    </div>
+    <a-table :columns="columns" :data-source="tableData" size="small" :scroll="{ y: 500 }" class="tableW"> </a-table>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, reactive } from 'vue';
+import { columns } from './dust-table.data';
+import { getDustInfoList, getAllFileList } from './dsut-table.api';
+import customHeader from '/@/components/vent/customHeader.vue';
+
+let tableData = ref<any[]>([]);
+let selectList = ref<any[]>([]);
+
+let formSearch = reactive({
+  pageNum: 1,
+  pageSize: 1000,
+  fileId: '',
+  fileName: '',
+});
+//获取粉尘监测结果数据
+async function getTableList(params: any) {
+  let res = await getDustInfoList({ type: 'smoke', ...params });
+  const content = res.content;
+  let contentArr = JSON.parse(content);
+  tableData.value = contentArr;
+}
+//获取所有文件列表
+async function getAllFile() {
+  let res = await getAllFileList({ type: 'smoke' });
+  selectList.value = res.records.map((item: any) => ({
+    fileId: item.fileId,
+    fileName: item.fileName,
+  }));
+}
+//查询
+function getSearch() {
+  const selectedFile = selectList.value.find((item) => item.fileId === formSearch.fileId);
+  const params = {
+    fileId: formSearch.fileId,
+    fileName: selectedFile ? selectedFile.fileName : '',
+  };
+  getTableList(params);
+}
+onMounted(() => {
+  getTableList({ type: 'smoke' });
+  getAllFile();
+});
+</script>
+
+<style lang="less" scoped>
+@import '/@/design/theme.less';
+
+.dustMonitor {
+  width: 100%;
+  height: 100%;
+  padding: 80px 10px 15px 10px;
+  box-sizing: border-box;
+  position: relative;
+}
+
+.select-container {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.select-label {
+  margin-right: 10px;
+  color: white;
+}
+
+.action-link {
+  color: #1890ff;
+  cursor: pointer;
+}
+
+.dustMonitor {
+  width: 100%;
+  height: 100%;
+  padding: 80px 10px 15px 10px;
+  box-sizing: border-box;
+  position: relative;
+}
+
+:deep(.zxm-table-thead > tr > th:last-child) {
+  border-right: 1px solid #91e9fe !important;
+}
+
+:deep(.zxm-picker-input > input) {
+  color: #fff;
+}
+
+:deep(.zxm-select:not(.zxm-select-customize-input) .zxm-select-selector) {
+  border: 1px solid var(--vent-form-item-border) !important;
+  background-color: #ffffff00 !important;
+}
+
+:deep(.zxm-select-selection-item) {
+  color: #fff !important;
+}
+</style>

src/views/vent/monitorManager/dedustMonitor/components/AlarmHistory.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="alarm-history">
+    <AlarmHistoryTable
+      columns-type="alarm"
+      device-type="sys_surface_juejin"
+      :device-list-api="workFaceDeviceList.bind(null, { id: deviceId })"
+      :list="list"
+      :sys-id="deviceId"
+      designScope="alarm-history"
+    />
+  </div>
+</template>
+<script setup lang="ts">
+  import AlarmHistoryTable from '../../comment/WorkFaceAlarmHistoryTable.vue';
+  import { workFaceDeviceList } from '../../../deviceManager/comment/warningTabel/warning.api';
+  import { defHttp } from '/@/utils/http/axios';
+
+  const props = defineProps({
+    deviceType: {
+      type: String,
+      required: true,
+    },
+    deviceId: {
+      type: String,
+      required: true,
+    },
+  });
+
+  const list = (params) => defHttp.get({ url: '/safety/managesysAutoLog/list', params });
+</script>
+<style lang="less" scoped>
+  .alarm-history {
+    pointer-events: auto;
+  }
+</style>

src/views/vent/monitorManager/dedustMonitor/components/DedustHistory.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="history-box">
+    <HistoryTable
+      :columns-type="`${deviceType}`"
+      :device-type="deviceType"
+      :sysId="deviceId"
+      designScope="pressurefan_history"
+      :scroll="{ y: 650 }"
+    />
+  </div>
+</template>
+<script setup lang="ts">
+  import { ref, defineProps } from 'vue';
+  import HistoryTable from '../../comment/HistoryTable.vue';
+  import { getTableList } from '../dedust.api';
+
+  const props = defineProps({
+    deviceType: {
+      type: String,
+      required: true,
+    },
+    deviceId: {
+      type: String,
+      required: true,
+    },
+  });
+</script>
+<style lang="less" scoped>
+  .history-box {
+    pointer-events: auto;
+  }
+</style>

src/views/vent/monitorManager/dedustMonitor/components/DedustHome.vue

@@ -0,0 +1,194 @@
+<template>
+  <a-spin tip="Loading..." :spinning="loading">
+    <div class="monitor-container">
+      <div class="lr left-box vent-margin-t-10">
+        <ventBox1>
+          <template #title>
+            <div>除尘机状态</div>
+          </template>
+          <template #container>
+            <List layout="double-columns" title="故障状态" v-bind="dedustStatusPropA" />
+            <List title="报警状态" v-bind="dedustStatusPropB" />
+            <List title="激活状态" v-bind="dedustStatusPropC" />
+          </template>
+        </ventBox1>
+      </div>
+      <div class="lr right-box">
+        <ventBox1 class="vent-margin-t-10">
+          <template #title>
+            <div>监测参数</div>
+          </template>
+          <template #container>
+            <List v-bind="dedustMonitorProp" />
+          </template>
+        </ventBox1>
+      </div>
+    </div>
+  </a-spin>
+</template>
+
+<script setup lang="ts">
+  import { onBeforeMount, ref, onMounted, onUnmounted, reactive, defineProps, computed } from 'vue';
+  import { list } from '../dedust.api';
+  import ventBox1 from '/@/components/vent/ventBox1.vue';
+  // import { SvgIcon } from '/@/components/Icon';
+  import {
+    dedustMonitorConfig,
+    dedustStatusConfigA,
+    dedustStatusConfigB,
+    dedustStatusConfigC,
+    statusConfigA,
+    statusConfigB,
+    statusConfigC,
+  } from '../dedust.data';
+  import List from '/@/views/vent/gas/components/list/index.vue';
+
+  const props = defineProps({
+    deviceId: {
+      type: String,
+      require: true,
+    },
+  });
+
+  const loading = ref(false);
+
+  // 默认初始是第一行
+  // const openDust = ref(false);
+  const deviceInfo = ref({});
+  const workFaceSource = ref({});
+  const workFaceHistorySource = ref([]);
+  // const gateDataSource = ref([]);
+  // const windowDataSource = ref([]);
+  // const windDataSource = ref([]);
+  // const temperatureDataSource = ref([]);
+  // const fireDataSource = ref([]);
+
+  // 将列表配置项转换为列表可用的prop
+  function transConfigToProp(config, source) {
+    return config.map((c) => {
+      return {
+        ...c,
+        value: _.get(c.prop, source),
+        label: c.label,
+      };
+    });
+  }
+
+  // 各个模块的配置项
+  const dedustMonitorProp = computed(() => {
+    return {
+      items: transConfigToProp(dedustMonitorConfig, deviceInfo.value),
+    };
+  });
+  const dedustStatusPropA = computed(() => {
+    return {
+      status: statusConfigA as any,
+      items: transConfigToProp(dedustStatusConfigA, deviceInfo.value),
+    };
+  });
+  const dedustStatusPropB = computed(() => {
+    return {
+      status: statusConfigB as any,
+      items: transConfigToProp(dedustStatusConfigB, deviceInfo.value),
+    };
+  });
+  const dedustStatusPropC = computed(() => {
+    return {
+      status: statusConfigC as any,
+      items: transConfigToProp(dedustStatusConfigC, deviceInfo.value),
+    };
+  });
+
+  // 监测数据
+  const selectData = reactive({});
+
+  // https获取监测数据
+  let timer: null | NodeJS.Timeout = null;
+  function getMonitor(flag?) {
+    if (Object.prototype.toString.call(timer) === '[object Null]') {
+      timer = setTimeout(
+        async () => {
+          if (props.deviceId) {
+            const data = await getDataSource(props.deviceId);
+            Object.assign(selectData, data);
+          }
+          if (timer) {
+            timer = null;
+          }
+          await getMonitor();
+          loading.value = false;
+        },
+        flag ? 0 : 1000
+      );
+    }
+  }
+
+  async function getDataSource(systemID) {
+    const res = await list({ devicetype: 'sys', systemID, type: 'all' });
+    deviceInfo.value = res.deviceInfo;
+    workFaceHistorySource.value = res['sysInfo']['history'];
+    workFaceSource.value = Object.assign(res['sysInfo'], res['sysInfo']['readData']);
+    loading.value = false;
+  }
+
+  onBeforeMount(() => {});
+
+  onMounted(async () => {
+    loading.value = true;
+    timer = null;
+    await getMonitor(true);
+  });
+  onUnmounted(() => {
+    if (timer) {
+      clearTimeout(timer);
+      timer = null;
+    }
+  });
+</script>
+<style lang="less" scoped>
+  @import '/@/design/vent/modal.less';
+  // @import '../less/tunFace.less';
+  @import '../../comment/less/workFace.less';
+  @ventSpace: zxm;
+
+  .dust-fan-monitor {
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .dust-fan-monitor-item {
+    width: 152px;
+    height: 70px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    border: 1px solid rgba(25, 251, 255, 0.4);
+    box-shadow: inset 0 0 20px rgba(0, 197, 255, 0.4);
+    background: rgba(0, 0, 0, 0.06666667);
+    margin-bottom: 5px;
+    padding: 8px 0;
+    &:nth-child(2n) {
+      margin-left: 12px;
+    }
+    .title {
+      color: #5dfaff;
+    }
+    .unit {
+      font-size: 13px;
+      color: #ffffffaa;
+    }
+    .value {
+      color: #ffb212;
+    }
+  }
+
+  .fault {
+    .title {
+      color: #c4fdff;
+    }
+    .value {
+      // color: #FFB212;
+      color: #61ddb1;
+    }
+  }
+</style>

src/views/vent/monitorManager/dedustMonitor/components/HandleHistory.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="handle-history">
+    <HandlerHistoryTable v-if="refresh" columns-type="operator_history" :device-type="type"
+      :sys-id="deviceId"
+      designScope="juejin_history" :scroll="{ y: 650 }"/>
+  </div>
+</template>
+<script setup lang="ts">
+import { watch, ref, nextTick } from 'vue'
+import HandlerHistoryTable from '../../comment/WorkFaceHandlerHistoryTable.vue';
+
+  const props = defineProps({
+    deviceType: {
+      type: String,
+      required: true,
+    },
+    deviceId: {
+      type: String,
+      required: true,
+    }
+  })
+
+  const type = ref(props.deviceType)
+
+  const refresh = ref(true)
+
+  watch(() => props.deviceType, (newVal) => {
+    type.value = newVal
+    refresh.value = false
+    nextTick(() => {
+      refresh.value = true
+    })
+  })
+
+
+</script>
+<style lang="less" scoped>
+.handle-history {
+  width: 100%;
+  pointer-events: auto;
+}
+</style>

src/views/vent/monitorManager/dedustMonitor/dedust.api.ts

@@ -0,0 +1,23 @@
+import { defHttp } from '/@/utils/http/axios';
+
+enum Api {
+  systemList = '/monitor/device',
+  list = '/monitor/system',
+  baseList = '/safety/ventanalyManageSystem/list',
+  deviceList = '/safety/ventanalyDeviceInfo/list',
+}
+/**
+ * 列表接口
+ * @param params
+ */
+export const list = (params) => defHttp.post({ url: Api.list, params });
+
+export const systemList = (params) => defHttp.post({ url: Api.systemList, params });
+
+/**
+ * 保存或者更新用户
+ * @param params
+ */
+export const getTableList = (params) => defHttp.get({ url: Api.baseList, params });
+
+export const getDeviceList = (params) => defHttp.get({ url: Api.deviceList, params });

src/views/vent/monitorManager/dedustMonitor/dedust.data.ts

@@ -0,0 +1,137 @@
+/** 故障相关状态配置 */
+export const statusConfigA = [{ value: 1, label: '故障' }, { label: '正常' }];
+/** 报警相关状态配置 */
+export const statusConfigB = [{ value: 1, label: '报警' }, { label: '正常' }];
+/** 激活与否相关状态配置 */
+export const statusConfigC = [{ value: 1, label: '激活' }, { label: '接触' }];
+
+export const dedustMonitorConfig = [
+  // {
+  //   prop: 'FrequencySetPointZD',
+  //   label: '最低频率设置',
+  // },
+  // {
+  //   prop: 'FrequencySetPointYTW',
+  //   label: '以太网频率比率',
+  // },
+  // {
+  //   prop: 'FrequencySetPoint',
+  //   label: '给定频率',
+  // },
+  {
+    prop: 'Frequency',
+    label: '运行频率',
+  },
+  {
+    prop: 'BusVoltage',
+    label: '母线电压',
+  },
+  {
+    prop: 'OutputVoltage',
+    label: '输出电压',
+  },
+  {
+    prop: 'Outputcurrent',
+    label: '输出电流',
+  },
+  {
+    prop: 'OutputPower',
+    label: '输出功率',
+  },
+  {
+    prop: 'Current1',
+    label: '前机电流',
+  },
+  {
+    prop: 'Current2',
+    label: '后机电流',
+  },
+];
+
+/** 故障相关配置 */
+export const dedustStatusConfigA = [
+  {
+    prop: 'NotRunningFault',
+    label: '正常运行',
+  },
+  {
+    prop: 'EquipmentFault',
+    label: '设备故障',
+  },
+  {
+    prop: 'FaultStatus',
+    label: '故障状态',
+  },
+  {
+    prop: 'PowerFault',
+    label: '电源故障',
+  },
+  {
+    prop: 'ContorlPSError',
+    label: '控制电源故障',
+  },
+  {
+    prop: 'VFDFault',
+    label: '变频器故障',
+  },
+  {
+    prop: 'KMFault',
+    label: '电源接触器故障',
+  },
+  {
+    prop: 'CoolFanNotReady1',
+    label: '散热风机跳闸',
+  },
+  {
+    prop: 'CoolFanNotReady2',
+    label: '散热接触器故障',
+  },
+];
+
+/** 报警相关配置 */
+export const dedustStatusConfigB = [
+  {
+    prop: 'Alarmstatus',
+    label: '报警状态',
+  },
+  {
+    prop: 'OverLoadAlarm1',
+    label: '前电机过载',
+  },
+  {
+    prop: 'OverLoadAlarm2',
+    label: '后电机过载',
+  },
+];
+
+/** 激活与否相关配置 */
+export const dedustStatusConfigC = [
+  {
+    prop: 'HMIReset',
+    label: '故障复位',
+  },
+  {
+    prop: 'SwitchOn',
+    label: '启动控制',
+  },
+  {
+    prop: 'SwitchOff',
+    label: '停止控制',
+  },
+];
+
+// export const dedustStatusConfigD = [
+//   {
+//     prop: 'GasLock',
+//     label: '瓦斯闭锁',
+//     status: [{ label: '' }]
+//   },
+//   {
+//     prop: 'SwitchOn',
+//     label: '启动控制',
+//   },
+//   {
+//     prop: 'SwitchOff',
+//     label: '停止控制',
+//   },
+// ];

src/views/vent/monitorManager/dedustMonitor/dedust.threejs.base.ts

@@ -0,0 +1,116 @@
+import * as THREE from 'three';
+// import { setModalCenter } from '/@/utils/threejs/util';
+import Smoke from '/@/views/vent/comment/threejs/Smoke';
+// import * as dat from 'dat.gui';
+// const gui = new dat.GUI();
+// gui.domElement.style = 'position:absolute;top:100px;left:10px;z-index:99999999999999';
+
+class WorkFace {
+  model;
+  modelName = 'tunFace';
+  group: THREE.Object3D | null = null;
+  inSmoke: Smoke | null = null;
+  outSmoke: Smoke | null = null;
+
+  constructor(model) {
+    this.model = model;
+  }
+
+  addLight() {
+    const directionalLight = new THREE.DirectionalLight(0xffffff, 1.2);
+    directionalLight.position.set(6.3, 28, 20);
+    this.group?.add(directionalLight);
+    directionalLight.target = this.group as THREE.Object3D;
+
+    const pointLight = new THREE.PointLight(0xffffff, 1, 1000);
+    pointLight.position.set(45, 51, -4.1);
+    pointLight.shadow.bias = 0.05;
+    this.model.scene.add(pointLight);
+
+    // gui.add(directionalLight.position, 'x', -100, 100);
+    // gui.add(directionalLight.position, 'y', -100, 100);
+    // gui.add(directionalLight.position, 'z', -100, 100);
+  }
+
+  addChamberText() {
+    //
+  }
+
+  initFly = async () => {
+    const inCurve = [
+      {
+        path0: new THREE.Vector3(-15.134, 3.734, -3.485),
+        path1: new THREE.Vector3(-17.13, 3.734, -3.485),
+        isSpread: false,
+        spreadDirection: 0,
+      },
+      {
+        path0: new THREE.Vector3(-17.13, 3.734, -3.485),
+        path1: new THREE.Vector3(-19.518, 3.075, 2.071),
+        isSpread: true,
+        spreadDirection: 1, // 1是由小变大，-1是由大变小
+      },
+    ];
+
+    const outCurve = [
+      {
+        path0: new THREE.Vector3(-31.51, 3.075, 2.071),
+        path1: new THREE.Vector3(-26.51, 3.075, 2.071),
+        isSpread: true,
+        spreadDirection: -1,
+      },
+      {
+        path0: new THREE.Vector3(-26.51, 3.075, 2.071),
+        path1: new THREE.Vector3(-24.514, 3.075, 2.071),
+        isSpread: false,
+        spreadDirection: 0, // 1是由小变大，-1是由大变小
+      },
+    ];
+
+    if (!this.inSmoke) {
+      this.inSmoke = new Smoke('/model/img/texture-smoke.png', '#ffffff', 0, 0.5, 0.5, 30);
+      this.inSmoke.setPath(inCurve);
+      await this.inSmoke.setPoints();
+      this.group?.add(this.inSmoke.points);
+    }
+    if (!this.outSmoke) {
+      this.outSmoke = new Smoke('/model/img/texture-smoke.png', '#333333', 0, 1, 0.8, 20);
+      this.outSmoke.setPath(outCurve);
+      await this.outSmoke.setPoints();
+      this.group?.add(this.outSmoke.points);
+    }
+
+    this.inSmoke.startSmoke(1);
+    this.outSmoke.startSmoke(1);
+  };
+
+  clearFly = () => {
+    if (this.inSmoke) this.inSmoke.clearSmoke();
+    if (this.outSmoke) this.outSmoke.clearSmoke();
+  };
+
+  mountedThree() {
+    return new Promise((resolve) => {
+      this.model.setGLTFModel([this.modelName]).then(async (gltf) => {
+        this.group = gltf[0];
+        if (this.group) {
+          resolve(null);
+          this.addLight();
+          await this.initFly();
+        }
+      });
+    });
+  }
+
+  destroy() {
+    if (this.model) {
+      this.clearFly();
+      this.model.clearGroup(this.group);
+      this.model = null;
+      this.group = null;
+      this.inSmoke = null;
+      this.outSmoke = null;
+    }
+  }
+}
+export default WorkFace;

src/views/vent/monitorManager/dedustMonitor/dedust.threejs.ts

@@ -0,0 +1,102 @@
+import * as THREE from 'three';
+import UseThree from '../../../../utils/threejs/useThree';
+import WorkFace from './dedust.threejs.base';
+import { animateCamera } from '/@/utils/threejs/util';
+import useEvent from '../../../../utils/threejs/useEvent';
+
+// 模型对象、 文字对象
+let model: UseThree | undefined,
+  workFaceObj: WorkFace | undefined,
+  group: THREE.Object3D | undefined,
+  fiberType = 'tunFace'; // workerFaceFiber
+const { mouseDownFn } = useEvent();
+
+// 鼠标点击、松开事件
+const mouseEvent = (event) => {
+  if (event.button == 0 && model && group) {
+    mouseDownFn(model, group, event, () => {});
+  }
+};
+
+const addMouseEvent = () => {
+  // 定义鼠标点击事件
+  if (!model) return;
+  model.canvasContainer?.addEventListener('mousedown', mouseEvent.bind(null));
+};
+
+const render = () => {
+  if (model && model.isRender && model.renderer) {
+    // model.animationId = requestAnimationFrame(render);
+    model.css3dRender?.render(model.scene as THREE.Scene, model.camera as THREE.PerspectiveCamera);
+    model.renderer.render(model.scene as THREE.Scene, model.camera as THREE.PerspectiveCamera);
+    model.stats?.update();
+  }
+};
+
+export const refreshModal = () => {
+  if (fiberType === 'tunFace') {
+    // workFaceObj.render();
+    render();
+  }
+};
+
+// 切换风窗类型
+export const setModelType = (type) => {
+  if (!model) return;
+  fiberType = type;
+  return new Promise((resolve) => {
+    if (fiberType === 'tunFace' && workFaceObj && workFaceObj.group) {
+      group = workFaceObj.group;
+
+      // const oldCameraPosition = { x: 124.736, y: 63.486, z: 103.337 };
+
+      model?.orbitControls?.addEventListener('change', render);
+
+      setTimeout(async () => {
+        resolve(null);
+        const oldCameraPosition = { x: -693, y: 474, z: 398 };
+        if (!model?.scene?.getObjectByName('tunFace') && group) {
+          model?.scene?.add(group);
+        }
+        const position = { x: 14.826074594663222, y: 16.901762713393836, z: 36.459944037951004 };
+        await animateCamera(
+          oldCameraPosition,
+          { x: 0, y: 0, z: 0 },
+          { x: position.x, y: position.y, z: position.z },
+          { x: 0, y: 0, z: 0 },
+          model,
+          0.8,
+          render
+        );
+      }, 400);
+    }
+  });
+};
+
+export const mountedThree = () => {
+  return new Promise(async (resolve) => {
+    model = new UseThree('#tunFace3D', '#tunFace3DCSS');
+    model.setEnvMap('test1');
+    /** @ts-ignore-next-line */
+    model.renderer.toneMappingExposure = 1.0;
+    // model?.camera?.position.set(100, 0, 1000);
+    workFaceObj = new WorkFace(model);
+    await workFaceObj.mountedThree();
+
+    addMouseEvent();
+    // render();
+    model.animate();
+    resolve(null);
+  });
+};
+
+export const destroy = () => {
+  if (model) {
+    model.isRender = false;
+    workFaceObj?.destroy();
+    workFaceObj = undefined;
+    group = undefined;
+    model.destroy();
+    model = undefined;
+  }
+};

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

@@ -0,0 +1,257 @@
+<template>
+  <div
+    v-show="activeKey == 'monitor' && !loading"
+    class="bg"
+    style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden"
+  >
+    <a-spin :spinning="loading" />
+    <div
+      id="tunFace3DCSS"
+      class="threejs-Object-CSS"
+      v-show="!loading"
+      style="width: 100%; height: 100%; position: absolute; pointer-events: none; overflow: hidden; z-index: 1; top: 0"
+    >
+    </div>
+    <div id="tunFace3D" style="width: 100%; height: 100%; position: absolute; overflow: hidden"> </div>
+  </div>
+  <div class="scene-box">
+    <customHeader
+      :fieldNames="{ label: 'systemname', value: 'id', options: 'children' }"
+      :options="options"
+      :optionValue="optionValue"
+      @change="getSelectRow"
+    >
+      除尘风机智能管控
+    </customHeader>
+    <div class="center-container">
+      <template v-if="activeKey == 'monitor'">
+        <DedustHome :deviceId="optionValue" />
+      </template>
+      <div v-else class="history-group">
+        <div class="device-button-group" v-if="deviceList.length > 0 && activeKey !== 'faultRecord'">
+          <div
+            class="device-button"
+            :class="{ 'device-active': deviceActive == device.deviceType }"
+            v-for="(device, index) in deviceList"
+            :key="index"
+            @click="deviceChange(index)"
+            >{{ device.deviceName }}</div
+          >
+        </div>
+        <div class="history-container">
+          <DedustHistory
+            v-if="activeKey == 'monitor_history'"
+            ref="historyTable"
+            class="vent-margin-t-20"
+            :deviceId="optionValue"
+            :device-type="deviceType"
+          />
+          <HandleHistory
+            v-if="activeKey == 'handler_history'"
+            ref="alarmHistoryTable"
+            class="vent-margin-t-20"
+            :deviceId="optionValue"
+            :device-type="deviceType"
+          />
+          <AlarmHistory
+            v-if="activeKey == 'faultRecord'"
+            ref="handlerHistoryTable"
+            class="vent-margin-t-20"
+            :deviceId="optionValue"
+            :device-type="deviceType"
+          />
+        </div>
+      </div>
+    </div>
+    <BottomMenu @change="changeActive" />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { onBeforeMount, ref, onMounted, onUnmounted, reactive } from 'vue';
+  import { mountedThree, destroy, setModelType } from './dedust.threejs';
+  import { systemList, getTableList } from './dedust.api';
+  import customHeader from '/@/components/vent/customHeader.vue';
+  import BottomMenu from '/@/views/vent/comment/components/bottomMenu.vue';
+  import DedustHome from './components/DedustHome.vue';
+  import DedustHistory from './components/DedustHistory.vue';
+  import HandleHistory from './components/HandleHistory.vue';
+  import AlarmHistory from './components/AlarmHistory.vue';
+  import { useRouter } from 'vue-router';
+
+  type DeviceType = { deviceType: string; deviceName: string; datalist: any[] };
+
+  const { currentRoute } = useRouter();
+  const activeKey = ref('monitor');
+  const loading = ref(false);
+
+  const historyTable = ref();
+  const alarmHistoryTable = ref();
+  const handlerHistoryTable = ref();
+
+  //关联设备
+  const deviceList = ref<DeviceType[]>([]);
+  const deviceActive = ref('');
+  const deviceType = ref('');
+
+  const options = ref();
+  // 默认初始是第一行
+  // const selectRowIndex = ref(0);
+  const dataSource = ref([]);
+
+  const optionValue = ref('');
+
+  // 监测数据
+  const selectData = reactive({});
+
+  function changeActive(activeValue) {
+    activeKey.value = activeValue;
+    loading.value = true;
+    if (activeKey.value === 'monitor') {
+      setModelType('tunFace');
+      setTimeout(() => {
+        loading.value = false;
+      }, 600);
+    } else {
+      loading.value = false;
+    }
+  }
+
+  function deviceChange(index) {
+    deviceActive.value = deviceType.value = deviceList.value[index].deviceType;
+  }
+
+  // 查询关联设备列表
+  async function getDeviceList() {
+    const res = await systemList({ devicetype: 'sys', systemID: optionValue.value });
+    if (res && res.msgTxt && res.msgTxt.length) {
+      const result = res.msgTxt;
+      const deviceArr: DeviceType[] = [];
+      result.forEach((item) => {
+        const data = item['datalist'].filter((data: any) => {
+          const readData = data.readData;
+          return Object.assign(data, readData);
+        });
+        if (item.type != 'sys') {
+          deviceArr.unshift({
+            deviceType: item.type,
+            deviceName: item['typeName'] ? item['typeName'] : item['datalist'][0]['typeName'],
+            datalist: data,
+          });
+        }
+      });
+      deviceList.value = deviceArr;
+      deviceActive.value = deviceArr[0].deviceType;
+      deviceChange(0);
+    }
+  }
+
+  async function getSysDataSource() {
+    const res = await getTableList({ strtype: 'dedustfan_normal', pagetype: 'normal' });
+    if (!options.value && res) {
+      // 初始时选择第一条数据
+      options.value = res.records || [];
+      if (!optionValue.value) {
+        optionValue.value = options.value[0]['id'];
+        getDeviceList();
+      }
+    }
+  }
+
+  // 切换检测数据
+  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();
+    }
+  }
+
+  onBeforeMount(() => {});
+
+  onMounted(async () => {
+    loading.value = true;
+    mountedThree().then(async () => {
+      setModelType('tunFace');
+      loading.value = false;
+    });
+    if (currentRoute.value && currentRoute.value['query'] && currentRoute.value['query']['id']) {
+      optionValue.value = currentRoute.value['query']['id'] as string;
+    }
+    await getSysDataSource();
+    await getDeviceList();
+  });
+
+  onUnmounted(() => {
+    destroy();
+  });
+</script>
+<style lang="less" scoped>
+  @import '/@/design/theme.less';
+  @import '/@/design/vent/modal.less';
+
+  .history-group {
+    padding: 0 20px;
+    margin-top: 90px;
+    .history-container {
+      position: relative;
+      background: #6195af1a;
+      width: calc(100% + 10px);
+      top: 0px;
+      left: -10px;
+      border: 1px solid #00fffd22;
+      padding: 10px 0;
+      box-shadow: 0 0 20px #44b4ff33 inset;
+    }
+  }
+  .device-button-group {
+    // margin: 0 20px;
+    display: flex;
+    pointer-events: auto;
+    position: relative;
+    &::after {
+      position: absolute;
+      content: '';
+      width: calc(100% + 10px);
+      height: 2px;
+      top: 30px;
+      left: -10px;
+      border-bottom: 1px solid var(--vent-base-border);
+    }
+    .device-button {
+      padding: 4px 15px;
+      position: relative;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-size: 14px;
+
+      color: var(--vent-font-color);
+      cursor: pointer;
+      margin: 0 3px;
+
+      &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        border: 1px solid #6176af;
+        transform: skewX(-38deg);
+        background-color: rgba(0, 77, 103, 85%);
+        z-index: -1;
+      }
+    }
+    .device-active {
+      // color: #0efcff;
+      &::before {
+        border-color: #0efcff;
+        box-shadow: 1px 1px 3px 1px #0efcff inset;
+      }
+    }
+  }
+</style>

src/views/vent/monitorManager/deviceMonitor/components/device/modal/blastDelta.vue

@@ -3,20 +3,16 @@
     <!-- <div class="blast-title">爆炸三角形</div> -->
     <div ref="coord" class="coords">
       <div class="coord-lineY">
-        <div :style="{ width: '5px', height: `${lengY}px`, 'border-top': '1px solid #0079ff' }" v-for="item in 10"
-          :key="item"></div>
+        <div :style="{ width: '5px', height: `${lengY}px`, 'border-top': '1px solid #0079ff' }" v-for="item in 10" :key="item"></div>
       </div>
       <div class="coord-labelY">
-        <div :style="{ width: '20px', height: `${lengY}px`, color: '#fff' }" v-for="(ite, ind) in 10" :key="ind">{{ ind
-          == 0 ? maxY : '' }}</div>
+        <div :style="{ width: '20px', height: `${lengY}px`, color: '#fff' }" v-for="(ite, ind) in 10" :key="ind">{{ ind == 0 ? maxY : '' }}</div>
       </div>
       <div class="coord-lineX">
-        <div :style="{ height: '5px', width: `${lengY}px`, 'border-right': '1px solid #0079ff' }" v-for="item in 15"
-          :key="item"></div>
+        <div :style="{ height: '5px', width: `${lengY}px`, 'border-right': '1px solid #0079ff' }" v-for="item in 15" :key="item"></div>
       </div>
       <div class="coord-labelX">
-        <div :style="{ height: '20px', width: `${lengY}px`, color: '#fff' }" v-for="(ite, ind) in 15" :key="ind">{{ ind
-          == 14 ? maxX : '' }}</div>
+        <div :style="{ height: '20px', width: `${lengY}px`, color: '#fff' }" v-for="(ite, ind) in 15" :key="ind">{{ ind == 14 ? maxX : '' }}</div>
       </div>
       <div class="line-AB" :style="{ width: 'calc(100% - 10px)', height: 'calc(100% - 10px)' }">
         <canvas id="myCanvas" :width="canvasSize.width" :height="canvasSize.height"></canvas>
@@ -54,6 +50,7 @@ let props = defineProps({
     },
   },
 });
+const canvasRef = ref<HTMLCanvasElement | null>(null);
 let coord = ref(null);
 let lengY = ref(0);
 //与x,y轴相交最大值坐标
@@ -103,13 +100,13 @@ function getBlast() {
   // 获取canvas元素
   let canvas = document.getElementById('myCanvas');
   let ctx = canvas.getContext('2d');
-  let scalcY, scalcX
+  let scalcY, scalcX;
   if (coordinateB.x < 50) {
-    maxX.value = 50
+    maxX.value = 50;
     scalcY = canvas.height / maxY.value;
     scalcX = canvas.width / maxX.value;
   } else {
-    maxX.value = parseInt(coordinateB.x + 10)
+    maxX.value = parseInt(coordinateB.x + 10);
     scalcY = canvas.height / maxY.value;
     scalcX = canvas.width / maxX.value;
   }
@@ -361,7 +358,7 @@ function getCoordABY(params) {
     ((parseFloat(coordinateB.y) - parseFloat(coordinateA.y)) * params -
       parseFloat(coordinateA.x) * parseFloat(coordinateB.y) +
       parseFloat(coordinateB.x) * parseFloat(coordinateA.y)) /
-    (parseFloat(coordinateB.x) - parseFloat(coordinateA.x))
+      (parseFloat(coordinateB.x) - parseFloat(coordinateA.x))
   );
 }
 //根据纵坐标获取直线AB横坐标
@@ -370,7 +367,7 @@ function getCoordABX(params1) {
     ((parseFloat(coordinateB.x) - parseFloat(coordinateA.x)) * params1 +
       parseFloat(coordinateA.x) * parseFloat(coordinateB.y) -
       parseFloat(coordinateB.x) * parseFloat(coordinateA.y)) /
-    (parseFloat(coordinateB.y) - parseFloat(coordinateA.y))
+      (parseFloat(coordinateB.y) - parseFloat(coordinateA.y))
   );
 }
 
@@ -406,6 +403,18 @@ watch(
 );
 
 onMounted(() => {
+  if (canvasRef.value) {
+    const ctx = canvasRef.value.getContext('2d');
+    if (ctx) {
+      // 在这里使用 ctx 进行绘图操作
+      ctx.fillStyle = 'red';
+      ctx.fillRect(10, 10, 100, 100);
+    } else {
+      console.error('无法获取 Canvas 2D 上下文');
+    }
+  } else {
+    console.error('Canvas 元素未初始化');
+  }
   getAreas();
 });
 </script>

src/views/vent/performance/comment/CADModal.vue

@@ -33,7 +33,7 @@
   import { ref } from 'vue';
   import { BasicModal, useModalInner } from '/@/components/Modal';
   import { onMounted } from 'vue';
-  import CADViewer from '/@/views/vent/performance/fileDetail/commen/CADViewer.vue';
+  import CADViewer from './CADViewer.vue';
   // import { useGlobSetting } from '/@/hooks/setting';
   // import { useAutoLogin } from '/@/hooks/vent/useAutoLogin';
   // import { MOCK_LOGIN_UESRNAME } from '/@/store/constant';