houzekong 3 месяцев назад
Родитель
Сommit
4c71e68ce1

+ 2 - 2
src/main.ts

@@ -18,7 +18,7 @@ import { registerGlobComp } from '/@/components/registerGlobComp';
 import { registerThirdComp } from '/@/settings/registerThirdComp';
 import { useSso } from '/@/hooks/web/useSso';
 import { useAppStoreWithOut } from '@/store/modules/app';
-import { useMineStore } from './store/modules/mine';
+import { useMineDepartmentStore } from './store/modules/mine';
 
 // 程序入口
 async function main() {
@@ -118,6 +118,6 @@ function setupProps(props?: MainAppProps) {
   const appStore = useAppStoreWithOut();
   appStore.setMainAppProps(props);
 
-  const mineStore = useMineStore();
+  const mineStore = useMineDepartmentStore();
   mineStore.fetchDepartTree();
 }

+ 281 - 278
src/views/analysis/warningAnalysis/connectAnalysis/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="connectAnalysis">
     <div class="filter-area">
-      <Row style="width:100%">
+      <Row style="width: 100%">
         <Col :span="6">
           <div class="filter-section param-section">
             <span class="filter-label">煤矿名称:</span>
@@ -15,16 +15,21 @@
           <div class="filter-section param-section">
             <span class="filter-label">采空区选择:</span>
             <Select ref="select" v-model:value="goafId" style="width: 300px" placeholder="请选择采空区">
-              <SelectOption v-for="(item, index) in goafOption" :key="index" :value="item.value">{{ item.label }}
-              </SelectOption>
+              <SelectOption v-for="(item, index) in goafOption" :key="index" :value="item.value">{{ item.label }} </SelectOption>
             </Select>
           </div>
         </Col>
         <Col :span="6">
           <div class="filter-section param-section">
             <span class="filter-label">时间选择:</span>
-            <RangePicker v-model:value="dateRange" format="YYYY-MM-DD HH:mm:ss" :placeholder="['开始时间', '结束时间']"
-              style="width: 300px" :show-time="{ format: 'HH:mm:ss' }" @change="changeTime" />
+            <RangePicker
+              v-model:value="dateRange"
+              format="YYYY-MM-DD HH:mm:ss"
+              :placeholder="['开始时间', '结束时间']"
+              style="width: 300px"
+              :show-time="{ format: 'HH:mm:ss' }"
+              @change="changeTime"
+            />
           </div>
         </Col>
         <Col :span="6">
@@ -54,8 +59,7 @@
       <div class="chart-item" style="flex: 1 1 100%">
         <div class="chart-placeholder">
           <template v-if="generatedChartData.length">
-            <CustomChart :chart-data="generatedChartData" :chart-config="generatedChartConfig"
-              style="height: 100%; width: 100%" />
+            <CustomChart :chart-data="generatedChartData" :chart-config="generatedChartConfig" style="height: 100%; width: 100%" />
           </template>
           <template v-else-if="isChartGenerated">
             <div class="empty-chart">暂无匹配数据,请调整筛选条件</div>
@@ -70,312 +74,311 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, onMounted, watchEffect } from 'vue';
-import dayjs from 'dayjs';
-// import { treeData, historicalMockChartData } from './connectAnalysis.data'; // 引入模拟数据
-import { Select, SelectOption, Row, Col, DatePicker, Button, message, Input, } from 'ant-design-vue';
-// import { BasicTree } from '/@/components/Tree/index';
-import CustomChart from '/@/components/Configurable/detail/CustomChart.vue';
-import MineCascader from '@/components/Form/src/jeecg/components/MineCascader/MineCascader.vue'
-import { getGoafHistory, getGoafList } from './connectAnalysis.api'
-import { storeToRefs } from 'pinia';
-import { useMineStore } from '/@/store/modules/mine';
-import { useRouter } from 'vue-router';
+  import { computed, ref, onMounted, watchEffect } from 'vue';
+  import dayjs from 'dayjs';
+  // import { treeData, historicalMockChartData } from './connectAnalysis.data'; // 引入模拟数据
+  import { Select, SelectOption, Row, Col, DatePicker, Button, message, Input } from 'ant-design-vue';
+  // import { BasicTree } from '/@/components/Tree/index';
+  import CustomChart from '/@/components/Configurable/detail/CustomChart.vue';
+  import MineCascader from '@/components/Form/src/jeecg/components/MineCascader/MineCascader.vue';
+  import { getGoafHistory, getGoafList } from './connectAnalysis.api';
+  import { storeToRefs } from 'pinia';
+  import { useMineDepartmentStore } from '/@/store/modules/mine';
+  import { useRouter } from 'vue-router';
 
+  // 组件注册
+  const RangePicker: any = DatePicker.RangePicker;
+  const { currentRoute } = useRouter();
+  const mineCode = ref<any>(currentRoute.value['query']['mineCode']); //传递过来的矿ID
+  // 筛选相关响应式数据
+  const dateRange = ref([dayjs().add(-30, 'day'), dayjs()]); // 默认时间范围(近1天)
+  // const selectedParamsText = ref(''); // 参数选择框显示文本
+  // const showTree = ref(false); // 控制树形选择器显示/隐藏
+  // const checkedTreeKeys = ref([]); // 树形选中的key
+  const selectedParams = ref(['coVal', 'ch4Val', 'c2h4Val', 'c2h2Val', 'co2Val', 'o2Val', 'sourcePressure', 'temperature']); // 选中的参数(实际用于图表)
+  const generatedChartData = ref<any[]>([]); // 生成的图表数据
+  const generatedChartConfig = ref({}); // 生成的图表配置
+  const isChartGenerated = ref(false); // 是否已点击生成
+  const goafId = ref(''); //采空区id
+  const goafOption = ref<any[]>([]); //采空区列表
+  const filteredData = ref<any[]>([]); //曲线数据
+  const mineStore = useMineDepartmentStore();
+  const { getMine, getMineCode, getDepartPath, getMineTree } = storeToRefs(mineStore);
+  const innerValue = computed(() => getDepartPath.value.map((e) => e.fax));
 
-// 组件注册
-const RangePicker: any = DatePicker.RangePicker;
-const { currentRoute } = useRouter();
-const mineCode = ref<any>(currentRoute.value['query']['mineCode'])//传递过来的矿ID
-// 筛选相关响应式数据
-const dateRange = ref([dayjs().add(-30, 'day'), dayjs()]); // 默认时间范围(近1天)
-// const selectedParamsText = ref(''); // 参数选择框显示文本
-// const showTree = ref(false); // 控制树形选择器显示/隐藏
-// const checkedTreeKeys = ref([]); // 树形选中的key
-const selectedParams = ref(['coVal', 'ch4Val', 'c2h4Val', 'c2h2Val', 'co2Val', 'o2Val', 'sourcePressure', 'temperature']); // 选中的参数(实际用于图表)
-const generatedChartData = ref<any[]>([]); // 生成的图表数据
-const generatedChartConfig = ref({}); // 生成的图表配置
-const isChartGenerated = ref(false); // 是否已点击生成
-const goafId = ref('')//采空区id
-const goafOption = ref<any[]>([])//采空区列表
-const filteredData = ref<any[]>([])//曲线数据
-const mineStore = useMineStore();
-const { getMine, getMineCode, getMinePath, getMineTree } = storeToRefs(mineStore);
-const innerValue = computed(() => getMinePath.value.map((e) => e.fax));
+  // Tree Key 与参数名映射(关键:关联树形节点和实际参数)
+  const treeKeyToParamMap = computed(() => ({
+    '0-0-0': 'coVal',
+    '0-0-1': 'ch4Val',
+    '0-0-2': 'c2h4Val',
+    '0-0-3': 'c2h2Val',
+    '0-0-4': 'co2Val',
+    '0-0-5': 'o2Val',
+    '1-1-0': 'sourcePressure',
+    // '1-1-1': 'outerPressure',
+    // '1-1-2': 'pressureDiff',
+    '2-2': 'temperature',
+  }));
+  // 参数标签映射(图表系列名称)
+  const paramLabelMap = computed(() => ({
+    coVal: 'CO浓度(ppm)',
+    ch4Val: 'CH4浓度(%)',
+    c2h4Val: 'C2H4浓度(ppm)',
+    c2h2Val: 'C2H2浓度(ppm)',
+    co2Val: 'CO2浓度(%)',
+    o2Val: 'O2浓度(%)',
+    sourcePressure: '压力(kPa)',
+    temperature: '温度(℃)',
+    // 'innerPressure': '内压力(kPa)',
+    // 'outerPressure': '外压力(kPa)',
+    // 'pressureDiff': '压差(kPa)',
+    // 'temperature': '温度(℃)',
+  }));
+  // 参数颜色映射
+  const paramColorMap = computed(() => ({
+    coVal: '#f5222d', // 红色
+    ch4Val: '#1890ff', // 蓝色
+    c2h4Val: '#faad14', // 橙色
+    c2h2Val: '#52c41a', // 绿色
+    co2Val: '#722ed1', // 紫色
+    o2Val: '#13c2c2', // 青色
+    sourcePressure: '#ff4d4f', // 浅红
+    // 'outerPressure': '#40a9ff',// 浅蓝
+    // 'pressureDiff': '#fa8c16', // 浅橙
+    temperature: '#9254de', // 浅紫
+  }));
 
-// Tree Key 与参数名映射(关键:关联树形节点和实际参数)
-const treeKeyToParamMap = computed(() => ({
-  '0-0-0': 'coVal',
-  '0-0-1': 'ch4Val',
-  '0-0-2': 'c2h4Val',
-  '0-0-3': 'c2h2Val',
-  '0-0-4': 'co2Val',
-  '0-0-5': 'o2Val',
-  '1-1-0': 'sourcePressure',
-  // '1-1-1': 'outerPressure',
-  // '1-1-2': 'pressureDiff',
-  '2-2': 'temperature',
-}));
-// 参数标签映射(图表系列名称)
-const paramLabelMap = computed(() => ({
-  coVal: 'CO浓度(ppm)',
-  ch4Val: 'CH4浓度(%)',
-  c2h4Val: 'C2H4浓度(ppm)',
-  c2h2Val: 'C2H2浓度(ppm)',
-  co2Val: 'CO2浓度(%)',
-  o2Val: 'O2浓度(%)',
-  sourcePressure: '压力(kPa)',
-  temperature: '温度(℃)',
-  // 'innerPressure': '内压力(kPa)',
-  // 'outerPressure': '外压力(kPa)',
-  // 'pressureDiff': '压差(kPa)',
-  // 'temperature': '温度(℃)',
-}));
-// 参数颜色映射
-const paramColorMap = computed(() => ({
-  coVal: '#f5222d', // 红色
-  ch4Val: '#1890ff', // 蓝色
-  c2h4Val: '#faad14', // 橙色
-  c2h2Val: '#52c41a', // 绿色
-  co2Val: '#722ed1', // 紫色
-  o2Val: '#13c2c2', // 青色
-  sourcePressure: '#ff4d4f', // 浅红
-  // 'outerPressure': '#40a9ff',// 浅蓝
-  // 'pressureDiff': '#fa8c16', // 浅橙
-  temperature: '#9254de', // 浅紫
-}));
+  //  // 树形选择事件处理
+  //   const handleTreeCheck = (checkedKeys) => {
+  //     checkedTreeKeys.value = checkedKeys;
+  //     // 转换为实际参数名
+  //     const params = checkedKeys
+  //       .map(key => treeKeyToParamMap.value[key])
+  //       .filter(param => param); // 过滤无效参数
+  //     selectedParams.value = params;
+  //     console.log(selectedParams.value, ' selectedParams')
+  //     // 更新输入框显示文本
+  //     const paramLabels = params.map(param => paramLabelMap.value[param]);
+  //     selectedParamsText.value = paramLabels.join('、');
+  //     console.log(selectedParamsText.value, ' selectedParamsText')
+  //   };
 
-//  // 树形选择事件处理
-//   const handleTreeCheck = (checkedKeys) => {
-//     checkedTreeKeys.value = checkedKeys;
-//     // 转换为实际参数名
-//     const params = checkedKeys
-//       .map(key => treeKeyToParamMap.value[key])
-//       .filter(param => param); // 过滤无效参数
-//     selectedParams.value = params;
-//     console.log(selectedParams.value, ' selectedParams')
-//     // 更新输入框显示文本
-//     const paramLabels = params.map(param => paramLabelMap.value[param]);
-//     selectedParamsText.value = paramLabels.join('、');
-//     console.log(selectedParamsText.value, ' selectedParamsText')
-//   };
-
-function changeTime(val) {
-  dateRange.value[0] = val[0]
-  dateRange.value[1] = val[1]
-}
-
-// 生成折线图核心逻辑
-async function generateChart() {
-  // showTree.value = false
-  //获取采空区历史数据列表
-  let startTime = dateRange.value[0].format('YYYY-MM-DD HH:mm:ss')
-  let endTime = dateRange.value[1].format('YYYY-MM-DD HH:mm:ss')
-  let res = await getGoafHistory({ pageNo: 1, pageSize: 100, startTime: startTime, endTime: endTime, goafId: goafId.value })
-  if (res && res.records) {
-    filteredData.value = res.records
-    isChartGenerated.value = false
-  } else {
-    filteredData.value.length = 0
-    isChartGenerated.value = true;
+  function changeTime(val) {
+    dateRange.value[0] = val[0];
+    dateRange.value[1] = val[1];
   }
-  console.log(filteredData.value, 'filteredData')
 
-  // 2. 构建图表数据结构(适配 CustomChart 的 line 类型)
-  const timeMap = new Map();
-  // 修复变量名:filteredRawData → filteredData(之前未定义)
-  filteredData.value.forEach((item) => {
-    const timeStr = dayjs(item.createTime).format('YYYY-MM-DD HH:mm:ss');
-    if (!timeMap.has(timeStr)) {
-      timeMap.set(timeStr, { time: timeStr });
+  // 生成折线图核心逻辑
+  async function generateChart() {
+    // showTree.value = false
+    //获取采空区历史数据列表
+    let startTime = dateRange.value[0].format('YYYY-MM-DD HH:mm:ss');
+    let endTime = dateRange.value[1].format('YYYY-MM-DD HH:mm:ss');
+    let res = await getGoafHistory({ pageNo: 1, pageSize: 100, startTime: startTime, endTime: endTime, goafId: goafId.value });
+    if (res && res.records) {
+      filteredData.value = res.records;
+      isChartGenerated.value = false;
+    } else {
+      filteredData.value.length = 0;
+      isChartGenerated.value = true;
     }
-    // 只保留选中的参数数据
-    selectedParams.value.forEach((param) => {
-      if (item[param] !== undefined) {
-        timeMap.get(timeStr)[param] = item[param];
+    console.log(filteredData.value, 'filteredData');
+
+    // 2. 构建图表数据结构(适配 CustomChart 的 line 类型)
+    const timeMap = new Map();
+    // 修复变量名:filteredRawData → filteredData(之前未定义)
+    filteredData.value.forEach((item) => {
+      const timeStr = dayjs(item.createTime).format('YYYY-MM-DD HH:mm:ss');
+      if (!timeMap.has(timeStr)) {
+        timeMap.set(timeStr, { time: timeStr });
       }
+      // 只保留选中的参数数据
+      selectedParams.value.forEach((param) => {
+        if (item[param] !== undefined) {
+          timeMap.get(timeStr)[param] = item[param];
+        }
+      });
     });
-  });
 
-  // 转换为数组并按时间排序
-  const chartData = Array.from(timeMap.values()).sort((a, b) => {
-    return dayjs(a.time).valueOf() - dayjs(b.time).valueOf();
-  });
-  generatedChartData.value = chartData;
-  console.log(generatedChartData.value, 'generatedChartData')
+    // 转换为数组并按时间排序
+    const chartData = Array.from(timeMap.values()).sort((a, b) => {
+      return dayjs(a.time).valueOf() - dayjs(b.time).valueOf();
+    });
+    generatedChartData.value = chartData;
+    console.log(generatedChartData.value, 'generatedChartData');
 
-  // 3. 构建图表配置(折线图类型,完善适配逻辑)
-  generatedChartConfig.value = {
-    type: 'line', // 折线图
-    clear: true, // 每次生成清空之前的图表
-    legend: { show: true, top: 10, right: 10, textStyle: { color: '#fff', fontSize: 14 } },
-    xAxis: [
-      {
-        type: 'category',
+    // 3. 构建图表配置(折线图类型,完善适配逻辑)
+    generatedChartConfig.value = {
+      type: 'line', // 折线图
+      clear: true, // 每次生成清空之前的图表
+      legend: { show: true, top: 10, right: 10, textStyle: { color: '#fff', fontSize: 14 } },
+      xAxis: [
+        {
+          type: 'category',
+          axisLabel: {
+            rotate: 30,
+            textStyle: {
+              color: '#fff',
+            },
+            formatter: (value) => dayjs(value).format('HH:mm:ss'),
+            interval: Math.max(1, Math.floor(chartData.length / 10)), // 控制x轴标签密度
+          },
+        },
+      ],
+      yAxis: selectedParams.value.map((param) => ({
+        type: 'value',
         axisLabel: {
-          rotate: 30,
           textStyle: {
             color: '#fff',
           },
-          formatter: (value) => dayjs(value).format('HH:mm:ss'),
-          interval: Math.max(1, Math.floor(chartData.length / 10)), // 控制x轴标签密度
         },
-      },
-    ],
-    yAxis: selectedParams.value.map((param) => ({
-      type: 'value',
-      axisLabel: {
-        textStyle: {
-          color: '#fff',
+        name: paramLabelMap.value[param].split('(')[1].replace(')', ''), // 显示单位
+        // nameTextStyle: { color: paramColorMap.value[param] },
+        nameTextStyle: { color: '#fff' },
+        axisLine: { lineStyle: { color: paramColorMap.value[param] } },
+        splitLine: { lineStyle: { opacity: 0.1 } },
+      })),
+      series: selectedParams.value.map((param, index) => ({
+        name: paramLabelMap.value[param],
+        type: 'line',
+        readFrom: '', // 适配 CustomChart 的 baseSeries 读取逻辑
+        label: paramLabelMap.value[param],
+        xprop: 'time', // 对应图表数据的 x 字段(时间)
+        yprop: param, // 对应图表数据的 y 字段(参数值)
+        color: paramColorMap.value[param],
+        smooth: true,
+        symbol: 'circle',
+        symbolSize: 4,
+        yAxisIndex: index,
+      })),
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: { type: 'cross' },
+        formatter: (params) => {
+          let tooltipHtml = `<div>${dayjs(params[0].axisValue).format('YYYY-MM-DD HH:mm:ss')}</div>`;
+          params.forEach((param) => {
+            tooltipHtml += `<div style="color: ${param.color}">${param.seriesName}: ${param.value[1]} ${param.seriesName.split('(')[1].replace(')', '')}</div>`;
+          });
+          return tooltipHtml;
         },
       },
-      name: paramLabelMap.value[param].split('(')[1].replace(')', ''), // 显示单位
-      // nameTextStyle: { color: paramColorMap.value[param] },
-      nameTextStyle: { color: '#fff' },
-      axisLine: { lineStyle: { color: paramColorMap.value[param] } },
-      splitLine: { lineStyle: { opacity: 0.1 } },
-    })),
-    series: selectedParams.value.map((param, index) => ({
-      name: paramLabelMap.value[param],
-      type: 'line',
-      readFrom: '', // 适配 CustomChart 的 baseSeries 读取逻辑
-      label: paramLabelMap.value[param],
-      xprop: 'time', // 对应图表数据的 x 字段(时间)
-      yprop: param, // 对应图表数据的 y 字段(参数值)
-      color: paramColorMap.value[param],
-      smooth: true,
-      symbol: 'circle',
-      symbolSize: 4,
-      yAxisIndex: index,
-    })),
-    tooltip: {
-      trigger: 'axis',
-      axisPointer: { type: 'cross' },
-      formatter: (params) => {
-        let tooltipHtml = `<div>${dayjs(params[0].axisValue).format('YYYY-MM-DD HH:mm:ss')}</div>`;
-        params.forEach((param) => {
-          tooltipHtml += `<div style="color: ${param.color}">${param.seriesName}: ${param.value[1]} ${param.seriesName.split('(')[1].replace(')', '')}</div>`;
-        });
-        return tooltipHtml;
-      },
-    },
-    grid: { left: 60, top: 40, right: 60, bottom: 60 },
-  };
+      grid: { left: 60, top: 40, right: 60, bottom: 60 },
+    };
 
-  // 无数据提示
-  if (chartData.length === 0) {
-    message.info('当前筛选条件下无数据');
+    // 无数据提示
+    if (chartData.length === 0) {
+      message.info('当前筛选条件下无数据');
+    }
   }
-}
 
-//获取采空区列表
-async function getGoafListData() {
-  let res = await getGoafList({ mineCode: innerValue.value[innerValue.value.length - 1] })
-  if (res.length) {
-    goafOption.value = res.map(el => {
-      return {
-        label: el.devicePos,
-        value: el.id,
-      }
-    })
-    goafId.value = goafId.value ? goafId.value : goafOption.value[0]['value']
+  //获取采空区列表
+  async function getGoafListData() {
+    let res = await getGoafList({ mineCode: innerValue.value[innerValue.value.length - 1] });
+    if (res.length) {
+      goafOption.value = res.map((el) => {
+        return {
+          label: el.devicePos,
+          value: el.id,
+        };
+      });
+      goafId.value = goafId.value ? goafId.value : goafOption.value[0]['value'];
+    }
   }
-}
 
-watchEffect(() => {
-  innerValue.value && getGoafListData();
-});
+  watchEffect(() => {
+    innerValue.value && getGoafListData();
+  });
 </script>
 
 <style lang="less" scoped>
-.connectAnalysis {
-  padding: 16px;
+  .connectAnalysis {
+    padding: 16px;
 
-  .filter-area {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 16px;
-    margin-bottom: 20px;
-    padding: 20px;
-    border: 1px solid #f0f0f0;
-    border-radius: 10px;
-    background: @card-bg-color;
-    align-items: center;
-  }
+    .filter-area {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 16px;
+      margin-bottom: 20px;
+      padding: 20px;
+      border: 1px solid #f0f0f0;
+      border-radius: 10px;
+      background: @card-bg-color;
+      align-items: center;
+    }
 
-  .filter-section {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-  }
+    .filter-section {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
 
-  .filter-label {
-    color: #666;
-    min-width: 80px;
-    flex-shrink: 0;
-    font-weight: 500;
-  }
+    .filter-label {
+      color: #666;
+      min-width: 80px;
+      flex-shrink: 0;
+      font-weight: 500;
+    }
 
-  .param-section {
-    flex: 1;
-    // min-width: 300px;
-  }
+    .param-section {
+      flex: 1;
+      // min-width: 300px;
+    }
 
-  .param-selector {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    position: relative;
-  }
+    .param-selector {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      position: relative;
+    }
 
-  .tree-popup {
-    position: absolute;
-    top: 100%;
-    left: 0;
-    margin-top: 8px;
-    width: 300px;
-    max-height: 300px;
-    overflow-y: auto;
-    background: #fff;
-    border: 1px solid #e8e8e8;
-    border-radius: 4px;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-    z-index: 100;
-    padding: 8px;
-  }
+    .tree-popup {
+      position: absolute;
+      top: 100%;
+      left: 0;
+      margin-top: 8px;
+      width: 300px;
+      max-height: 300px;
+      overflow-y: auto;
+      background: #fff;
+      border: 1px solid #e8e8e8;
+      border-radius: 4px;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+      z-index: 100;
+      padding: 8px;
+    }
 
-  .chart-area {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 16px;
-    padding: 20px;
-    border: 1px solid #f0f0f0;
-    border-radius: 10px;
-    background: @card-bg-color;
-  }
+    .chart-area {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 16px;
+      padding: 20px;
+      border: 1px solid #f0f0f0;
+      border-radius: 10px;
+      background: @card-bg-color;
+    }
 
-  .chart-item {
-    flex: 1;
-    min-width: 200px;
-  }
+    .chart-item {
+      flex: 1;
+      min-width: 200px;
+    }
 
-  .chart-placeholder {
-    width: 100%;
-    height: 300px;
-    border-radius: 4px;
-    overflow: hidden;
-    background: #333;
-    border: 1px solid #eee;
-  }
+    .chart-placeholder {
+      width: 100%;
+      height: 300px;
+      border-radius: 4px;
+      overflow: hidden;
+      background: #333;
+      border: 1px solid #eee;
+    }
 
-  .empty-chart {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: #999;
-    font-size: 14px;
+    .empty-chart {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #999;
+      font-size: 14px;
+    }
   }
-}
 </style>

+ 27 - 34
src/views/dashboard/basicInfo/dataQuality/index.vue

@@ -88,26 +88,22 @@
 <script setup lang="ts">
   import { ref, nextTick, computed, onMounted } from 'vue';
   import { useRouter } from 'vue-router';
-  import { BasicTable, useTable, BasicColumn, FormSchema  } from '/@/components/Table';
+  import { BasicTable, useTable, BasicColumn, FormSchema } from '/@/components/Table';
   import { useModal } from '/@/components/Modal';
   import { Tabs, TabPane, Popconfirm, message } from 'ant-design-vue';
   import DataQualityModal from './components/DataQualityModal.vue';
   import { SvgIcon } from '/@/components/Icon';
-  import { 
-    getColumns, 
-    getSearchFormSchema, 
-    type ProductionStatusMap,
-  } from './dataQuality.data';
+  import { getColumns, getSearchFormSchema, type ProductionStatusMap } from './dataQuality.data';
   import { getDataQuaQueList, addDataQuaQue, deleteDataQuaQue, editDataQuaQue } from '../basicInfo.api';
   import { findNode } from '/@/utils/helper/treeHelper';
-  import { useMineStore } from '/@/store/modules/mine';
+  import { useMineDepartmentStore } from '/@/store/modules/mine';
   import { getDictItemsByCode } from '/@/utils/dict';
-  import dayjs from 'dayjs'; 
+  import dayjs from 'dayjs';
   import * as XLSX from 'xlsx';
   // 路由实例
   const router = useRouter();
   // 实例化矿井Store
-  const mineStore = useMineStore();
+  const mineStore = useMineDepartmentStore();
   // 响应式数据
   const activeKey = ref('unresolved'); // 激活的Tab键
   const pageMode = ref('add');
@@ -121,7 +117,8 @@
   // 3. 颜色分配规则(可根据业务灵活调整)
   const getStatusColor = (statusText: string) => {
     if (statusText.includes('正常生产')) return 'green'; // 正常生产 → 绿色
-    if (statusText.includes('拟建矿井')) return 'blue';   // 拟建矿井 → 蓝色
+    if (statusText.includes('拟建矿井'))
+      return 'blue'; // 拟建矿井 → 蓝色
     else return 'red'; // 停产/停建/关闭/整改/责令 → 红色
   };
 
@@ -135,12 +132,12 @@
       // 生成动态映射和下拉选项
       const statusMap: ProductionStatusMap = {};
       const statusOptions: { label: string; value: string | number }[] = [];
-      
+
       statusList.forEach((item) => {
         const value = item.value; // 接口返回的value(数字/字符串)
         const label = item.text || item.label; // 接口返回的文本
         const color = getStatusColor(label); // 按规则分配颜色
-        
+
         // 填充映射表
         statusMap[value] = { label, value, color };
         // 填充下拉选项
@@ -152,7 +149,7 @@
       dynamicProductionStatusOptions.value = statusOptions;
 
       // 刷新表格(确保表格使用最新的映射)
-      await safeReloadActiveTable(); 
+      await safeReloadActiveTable();
     } catch (error) {
       console.error('获取生产状态列表失败:', error);
       message.error('生产状态数据加载失败');
@@ -171,7 +168,7 @@
     columns: columns, // 绑定动态列
     formConfig: {
       labelWidth: 120,
-      schemas: searchFormSchema.value, 
+      schemas: searchFormSchema.value,
       showAdvancedButton: false,
       schemaGroupNames: ['常规查询'],
     },
@@ -237,7 +234,7 @@
       console.error('解析质量问题JSON失败:', error);
       return '问题数据解析失败';
     }
-  };
+  }
 
   // 安全重载当前激活的表格
   async function safeReloadActiveTable() {
@@ -261,13 +258,13 @@
     await nextTick();
     // 未解决表格:await + try/catch 捕获异步错误
     try {
-      await reloadUnresolved(); 
+      await reloadUnresolved();
     } catch (e) {
       console.warn('未解决表格暂未就绪,跳过重载:', e);
     }
     // 已解决表格:同理,一个报错不影响另一个
     try {
-      await reloadResolved(); 
+      await reloadResolved();
     } catch (e) {
       console.warn('已解决表格暂未就绪,跳过重载:', e);
     }
@@ -277,7 +274,7 @@
   async function handleTabChange(key: string) {
     activeKey.value = key;
     await safeReloadActiveTable();
-  };
+  }
 
   /**
    * 根据标签获取表格数据(已解决/未解决)
@@ -310,24 +307,20 @@
       } else if (pageMode.value === 'edit') {
         await editDataQuaQue(result);
       }
-      await safeReloadActiveTable(); 
+      await safeReloadActiveTable();
     } catch (error) {
       console.log('操作失败:', error);
     }
   }
   /**
- * 通用页面跳转方法
- * @param record 当前行数据
- * @param path 目标路径(树形结构所在页面的路由地址)
- */
+   * 通用页面跳转方法
+   * @param record 当前行数据
+   * @param path 目标路径(树形结构所在页面的路由地址)
+   */
   async function handleGoToPage(record: any) {
     try {
       const mineCode = record.mineCode;
-      const targetNode = findNode(
-        mineStore.getMineTree,
-        (item) => item.id === mineCode,
-        { id: 'id', pid: 'parentId', children: 'childDepart' }
-      );
+      const targetNode = findNode(mineStore.getDepartTree, (item) => item.id === mineCode, { id: 'id', pid: 'parentId', children: 'childDepart' });
 
       let minePath = '';
       if (targetNode) {
@@ -368,7 +361,7 @@
     try {
       await deleteDataQuaQue({ id: record.id });
       await nextTick();
-      await safeReloadActiveTable(); 
+      await safeReloadActiveTable();
     } catch (error) {
       console.error('删除失败:', error);
     }
@@ -382,12 +375,12 @@
     const copyRecord = {
       ...record,
       isOk: true,
-      updateTime: dayjs().format('YYYY-MM-DD HH:mm:ss')
+      updateTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
     };
     try {
       await editDataQuaQue(copyRecord);
-      await safeReloadActiveTable(); 
-    }catch (error) {
+      await safeReloadActiveTable();
+    } catch (error) {
       console.error('操作失败:', error);
     }
   }
@@ -440,7 +433,7 @@
     let hideLoading: () => void = () => {};
     try {
       hideLoading = message.loading('正在导出数据,请稍候...');
-      
+
       const unresolvedList = await getAllUnresolvedData();
       const resolvedList = await getAllResolvedData();
 
@@ -469,7 +462,7 @@
   // ========== 初始化:先获取状态数据,再加载表格 ==========
   onMounted(async () => {
     await fetchProductionStatus(); // 先获取动态状态数据
-    await safeReloadActiveTable(); 
+    await safeReloadActiveTable();
   });
 </script>