1. 模拟除尘风机数据

2. 新增瓦斯单元评价页面

src/api/sys/user.ts

@@ -102,7 +102,7 @@ export function tokenLogin(params: TokenInfo, mode: ErrorMessageMode = 'modal')
     {
       url: Api.tokenLogin,
       headers: {
-        token: decodeURIComponent(params.token),
+        Token: decodeURIComponent(params.token),
       },
     },
     {

src/components/vent/customHeader.vue

@@ -96,7 +96,7 @@
     --image-vent-header1: url('/@/assets/images/vent/vent-header1.png');
     --image-select-bg: url('/@/assets/images/vent/home/select-bg.png');
     width: 100%;
-    height: fit-content;
+    height: 30px;
     .vent-home-header {
       width: 100%;
 

src/views/vent/gas/gasAssessment/gasAssessment.data.ts

@@ -171,6 +171,90 @@ export const gasMonitor = [
     unit: '',
   },
 ];
+export const gasUnitBase = [
+  {
+    title: '单元名称',
+    code: 'T0',
+    unit: '',
+  },
+  {
+    title: '煤炭储量',
+    code: 'T1',
+    unit: '',
+  },
+  {
+    title: '瓦斯储量',
+    code: 'T2',
+    unit: 'm³/t',
+  },
+  {
+    title: '钻孔施工长度',
+    code: 'CO2',
+    unit: 'm',
+  },
+  {
+    title: '单元瓦斯含量',
+    code: 'gasC',
+    unit: 'm³/t',
+  },
+  {
+    title: '单元原始瓦斯压力',
+    code: 'gasMixMass',
+    unit: 'MPa',
+  },
+  {
+    title: '抽采钻孔管径',
+    code: 'gasMass',
+    unit: 'm',
+  },
+  {
+    title: '抽采单元汇总管径',
+    code: 'gasMass',
+    unit: 'm',
+  },
+];
+export const gasUnitMonitor = [
+  {
+    title: '瓦斯总储量',
+    code: 'T0',
+    unit: 'm³/t',
+  },
+  {
+    title: '抽采达标量',
+    code: 'T1',
+    unit: 'm³/t',
+  },
+  {
+    title: '累计抽采纯量',
+    code: 'T2',
+    unit: 'm³/t',
+  },
+  {
+    title: '当前抽采率',
+    code: 'CO2',
+    unit: '%',
+  },
+  {
+    title: '实时抽采率',
+    code: 'gasC',
+    unit: '%',
+  },
+  {
+    title: '实时抽采浓度',
+    code: 'gasMixMass',
+    unit: '%',
+  },
+  {
+    title: '实时抽采负压',
+    code: 'gasMass',
+    unit: 'MPa',
+  },
+  {
+    title: '残余瓦斯压力',
+    code: 'gasMass',
+    unit: 'MPa',
+  },
+];
 
 export const gasParamData = [
   {
@@ -385,7 +469,7 @@ export const headerBadges = ref([
 export const gasUnitBarOption: ModuleDataChart = {
   type: 'bar_cylinder',
   readFrom: '',
-  legend: { show: false },
+  legend: { show: true },
   xAxis: [{ show: true }],
   yAxis: [{ show: true, name: '', position: 'left' }],
   series: [
@@ -428,7 +512,7 @@ export const mockData = {
 export const gasUnitPieOption: ModuleDataChart = {
   type: 'pie',
   readFrom: '',
-  legend: { show: false },
+  legend: { show: true },
   xAxis: [{ show: true }],
   yAxis: [{ show: true, name: '', position: 'left' }],
   series: [

src/views/vent/gas/gasAssessment/gasUnit.vue

@@ -1,11 +1,5 @@
 <template>
-  <CustomHeader
-    :fieldNames="{ label: 'systemname', value: 'id', options: 'children' }"
-    :options="options"
-    @change="getSelectRow"
-    :optionValue="optionValue"
-    >瓦斯抽采单元详情</CustomHeader
-  >
+  <CustomHeader>瓦斯抽采达标评判</CustomHeader>
   <CustomBadges class="w-1710px ml-100px mt-50px" :badges="unitHeaderBadges" />
   <a-spin tip="Loading..." :spinning="loading">
     <div class="bg" style="">
@@ -37,11 +31,11 @@
       <div class="lr left-box">
         <ventBox1>
           <template #title>
-            <div>平均单元基础信息</div>
+            <div>评价单元基础信息</div>
           </template>
           <template #container>
             <ListItem
-              v-for="(item, index) in gasMonitor"
+              v-for="(item, index) in gasUnitBase"
               :key="index"
               class="w-100% mb-5px"
               :value="get(dataSource, item.code)"
@@ -53,7 +47,7 @@
 
         <ventBox1 class="vent-margin-t-10">
           <template #title>
-            <div>工作面基础信息</div>
+            <div>单元累计抽采混量</div>
           </template>
           <template #container>
             <CustomChart :chart-config="gasUnitBarOption" :chart-data="mockData" height="280px" />
@@ -64,11 +58,11 @@
         <div class="item-box">
           <ventBox1>
             <template #title>
-              <div>工作面支管抽采信息</div>
+              <div>实时监测数据</div>
             </template>
             <template #container>
               <ListItem
-                v-for="(item, index) in gasPumpValve"
+                v-for="(item, index) in gasUnitMonitor"
                 :key="index"
                 class="w-100% mb-5px"
                 :value="get(dataSource, item.code)"
@@ -93,15 +87,15 @@
 
 <script setup lang="ts">
   import FourBorderBg from '/@/components/vent/fourBorderBg.vue';
-  import { onBeforeMount, ref, onMounted, onUnmounted, nextTick, watch, computed } from 'vue';
+  import { onBeforeMount, ref, onMounted, onUnmounted, nextTick, unref, computed } from 'vue';
   import ventBox1 from '/@/components/vent/ventBox1.vue';
   import CustomHeader from '/@/components/vent/customHeader.vue';
   import CustomBadges from './components/customHeader.vue';
   import {
-    gasMonitor,
+    gasUnitMonitor,
     gasUnitDetail,
     unitHeaderBadges,
-    gasPumpValve,
+    gasUnitBase,
     gasUnitBarOption,
     mockData,
     gasUnitPieOption,
@@ -112,9 +106,12 @@
   import ListItem from '@/views/vent/gas/components/list/listItem.vue';
   import { get } from '@/utils/ventutil';
   import CustomChart from '@/views/vent/home/configurable/components/detail/CustomChart.vue';
+  import { useRouter } from 'vue-router';
 
+  const { currentRoute } = useRouter();
   const loading = ref(false);
   const dataSource = ref({});
+  const unitId = ref('');
   // 获取模型类型
   const changeModalType = (currentData) => {
     if (currentData) {
@@ -172,10 +169,10 @@
   onBeforeMount(() => {});
 
   onMounted(async () => {
+    const { query } = unref(currentRoute);
+    if (query['deviceType']) unitId.value = query['id'] as string;
     loading.value = true;
-
     timer = null;
-
     mountedThree().then(async () => {
       // gasUnitNum.value = Math.ceil(Math.random() * 10)
       gasUnitNum.value = 4;

src/views/vent/gas/gasAssessment/threejs/gasAssessmen.threejs.base.ts

@@ -32,6 +32,7 @@ class GasAssessmen {
   playerStartClickTime1 = new Date().getTime();
   playerStartClickTime2 = new Date().getTime();
   planeNum = 0;
+  unitList = [];
 
   constructor(model) {
     this.model = model;
@@ -81,26 +82,32 @@ class GasAssessmen {
 
     const sizeList = [
       {
+        id: '',
         ratio: 0.2,
         color: colors.c1,
       },
       {
+        id: '',
         ratio: 0.3,
         color: colors.c2,
       },
       {
+        id: '',
         ratio: 0.1,
         color: colors.c4,
       },
       {
+        id: '',
         ratio: 0.2,
         color: colors.c5,
       },
       {
+        id: '',
         ratio: 0.2,
         color: colors.c3,
       },
     ];
+    this.unitList = sizeList;
 
     // width = 7.713 height =3.717
 
@@ -288,6 +295,35 @@ class GasAssessmen {
 
   /* 点击 */
   mousedownModel(rayCaster: THREE.Raycaster) {
+    const intersects = rayCaster?.intersectObjects([...this.planeGroup.children]) as THREE.Intersection[];
+
+    // 判断是否点击到视频
+    intersects.find((intersect) => {
+      const intersectedObject = intersects[0].object;
+
+      // 如果对象是我们的平面，并且它有自定义属性来标识它的 UV 范围
+      if (intersectedObject && intersectedObject.material && intersectedObject.material.uniforms) {
+        const uv = intersects[0].uv; // 点击点的 UV 坐标
+        const clickedRatio = uv.x; // 使用 UV 的 x 分量作为比例值
+
+        // // 根据点击的比例找到对应的色块
+        // let clickedColorIndex = -1;
+        // for (let i = 0; i < accumulatedRatios.length - 1; i++) {
+        //   if (clickedRatio >= accumulatedRatios[i] && clickedRatio < accumulatedRatios[i + 1]) {
+        //     clickedColorIndex = i;
+        //     break;
+        //   }
+        // }
+
+        // if (clickedColorIndex !== -1) {
+        //   // 提供反馈，例如打印信息到控制台
+        //   console.log(`Clicked color block ${clickedColorIndex}:`, sizeList[clickedColorIndex]);
+
+        //   // 这里你可以做更多事情，如改变颜色、显示弹窗等
+        // }
+      }
+      return false;
+    });
     this.render();
   }
 

src/views/vent/home/configurable/components/detail/CustomChart.vue

@@ -8,6 +8,7 @@
   import { ModuleDataChart } from '/@/views/vent/deviceManager/configurationTable/types';
   import { EChartsOption, graphic } from 'echarts';
   import { getData, getFormattedText } from '../../hooks/helper';
+  import { install$10 } from 'echarts/types/dist/shared';
 
   const props = withDefaults(
     defineProps<{
@@ -77,6 +78,37 @@
       };
     });
 
+    // if (type === 'pie') {
+    //   return {
+    //     textStyle,
+    //     legend: {
+    //       textStyle,
+    //       show: legend.show,
+    //     },
+    //     tooltip: {
+    //       trigger: 'item',
+    //     },
+    //     color: ['#d9a1ff', '#00d1ff', '#82fe78'],
+    //     series: baseSeries.map((serie) => {
+    //       return {
+    //         type: 'pie',
+    //         radius: ['50%', '75%'],
+    //         center: ['50%', '55%'],
+    //         labelLine: { show: false },
+    //         label: { show: false },
+    //         itemStyle: {
+    //           shadowBlur: 20,
+    //           shadowColor: '#259bcf',
+    //         },
+    //         data: serie.data.map((e) => ({
+    //           name: e[0],
+    //           value: e[1],
+    //         })),
+    //       };
+    //     }),
+    //   };
+    // }
+
     if (type === 'pie') {
       return {
         textStyle,
@@ -87,24 +119,89 @@
         tooltip: {
           trigger: 'item',
         },
-        color: ['#d9a1ff', '#00d1ff', '#82fe78'],
-        series: baseSeries.map((serie) => {
-          return {
+        color: ['#73C0DE', '#5470C6', '#91CC75', '#FAC858', '#ED6666', '#17d1b2', '#2ae271', '#11bce7', '#c127f0', '#ee125b'],
+        series: baseSeries.reduce((curr: EChartsOption[], serie, index) => {
+          const colors = ['#73C0DE', '#5470C6', '#91CC75', '#FAC858', '#ED6666', '#17d1b2', '#2ae271', '#11bce7', '#c127f0', '#ee125b'];
+          if (baseSeries.length === 1) {
+            curr.push({
+              ...serie,
+              type: 'pie',
+              radius: ['30%', '64%'],
+              center: ['50%', '55%'],
+              z: 1,
+              padAngle: 5,
+              itemStyle: {
+                shadowColor: 'rgba(0, 0, 0, 0.5)',
+                borderWidth: 10,
+              },
+              label: {
+                show: true,
+                position: 'inner',
+                formatter: '{d}%',
+                color: '#fff',
+                fontSize: 14,
+                rich: {
+                  d: {
+                    fontFamily: '微软雅黑',
+                    fontSize: 16,
+                    color: '#fff',
+                    lineHeight: 30,
+                  },
+                },
+              },
+              labelLine: { show: false },
+              data: serie.data.map((e) => ({
+                name: e[0],
+                value: e[1],
+              })),
+            });
+            curr.push({
+              ...serie,
+              type: 'pie',
+              radius: ['64%', '74%'],
+              center: ['50%', '55%'],
+              labelLine: { show: false },
+              label: { show: false },
+              padAngle: 5,
+              avoidLabelOverlap: false,
+              itemStyle: {
+                borderWidth: 10,
+                normal: {
+                  color: function (obj) {
+                    return `${colors[obj['dataIndex']]}88`;
+                  },
+                },
+              },
+              data: serie.data.map((e) => ({
+                name: e[0],
+                value: e[1],
+              })),
+            });
+          }
+          curr.push({
+            ...serie,
             type: 'pie',
-            radius: ['50%', '75%'],
+            radius: ['25%', '30%'],
             center: ['50%', '55%'],
             labelLine: { show: false },
             label: { show: false },
+            z: 5,
+            padAngle: 5,
             itemStyle: {
-              shadowBlur: 20,
-              shadowColor: '#259bcf',
+              borderWidth: 10,
+              normal: {
+                color: function (obj) {
+                  return `${colors[obj['dataIndex']]}88`;
+                },
+              },
             },
             data: serie.data.map((e) => ({
               name: e[0],
               value: e[1],
             })),
-          };
-        }),
+          });
+          return curr;
+        }, []),
       };
     }
 
@@ -464,7 +561,8 @@
           };
         }),
         series: baseSeries.reduce((curr: EChartsOption[], serie, index) => {
-          const colors = ['#66ffff', '#00ff66', '#ffff66'];
+          // const colors = ['#66ffff', '#00ff66', '#ffff66'];
+          const colors = ['#73C0DE', '#ED6666', '#5470C6', '#91CC75', '#FAC858', '#17d1b2', '#2ae271', '#11bce7', '#c127f0', '#ee125b'];
           if (baseSeries.length === 1) {
             curr.push({
               ...serie,
@@ -496,7 +594,7 @@
           curr.push({
             ...serie,
             type: 'bar',
-            silent: true,
+            // silent: true,
             yAxisIndex: index,
             barWidth: 20,
             barGap: '100%',
@@ -509,6 +607,18 @@
                 ]),
               borderRadius: [5, 5, 0, 0],
             },
+            label: {
+              show: true, //开启显示
+              position: 'top', //在上方显示
+              textStyle: {
+                //数值样式
+                color: '#ffffffbb',
+                fontSize: 13,
+              },
+              formatter: function (obj) {
+                return obj['data'][1];
+              },
+            },
           });
 
           return curr;

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

@@ -84,7 +84,7 @@
                 <div class="item-val">{{ item.address }}</div>
                 <div class="item-val">{{ item.production }}</div>
                 <div class="item-val">{{ item.person }}</div>
-                <div  class="item-val">{{ item.br }}</div>
+                <div class="item-val">{{ item.br }}</div>
                 <div :class="contList.length > 18 ? 'item-val1' : 'item-val'">{{ item.brz }}</div>
               </div>
             </div>
@@ -131,7 +131,7 @@
     { value: 'tom', label: 'Tom' },
   ]);
   const total = ref(18);
- 
+
   let contList = reactive<any[]>([
     { id: '1', name: '柳塔矿', address: '陕西省榆林市', production: 800, person: 1435, br: 1, brz: 1 },
     { id: '2', name: '寸草塔二矿', address: '陕西省榆林市', production: 800, person: 1435, br: 1, brz: 1 },