污染溯源模块编写中

riku

2025-03-05 7b52f30bc471b7f433eea950f77ecb74a87d867c

污染溯源模块编写中

 src/api/index.js

@@ -1,7 +1,7 @@
import axios from 'axios';
import { ElMessage } from 'element-plus';

const debug = true;
const debug = false;

let ip1 = 'http://47.100.191.150:9029/';
// console.log(import.meta.env);

 src/components.d.ts

@@ -16,6 +16,8 @@
    CoreMenu: typeof import('./components/core/CoreMenu.vue')['default']
    DataSummary: typeof import('./components/monitor/DataSummary.vue')['default']
    DataTable: typeof import('./components/monitor/DataTable.vue')['default']
    DescriptionsList: typeof import('./components/list/DescriptionsList.vue')['default']
    DescriptionsListItem: typeof import('./components/list/DescriptionsListItem.vue')['default']
    DeviceCreate: typeof import('./components/device/DeviceCreate.vue')['default']
    DeviceManage: typeof import('./components/device/DeviceManage.vue')['default']
    ElButton: typeof import('element-plus/es')['ElButton']
@@ -51,6 +53,7 @@
    FactorTrend: typeof import('./components/monitor/FactorTrend.vue')['default']
    GaugeChart: typeof import('./components/chart/GaugeChart.vue')['default']
    GridSearch: typeof import('./components/grid/GridSearch.vue')['default']
    GridTool: typeof import('./components/grid/GridTool.vue')['default']
    HistoricalTrajectory: typeof import('./components/animation/HistoricalTrajectory.vue')['default']
    MapLocation: typeof import('./components/map/MapLocation.vue')['default']
    MapScene: typeof import('./components/map/MapScene.vue')['default']

 src/components/grid/GridSearch.vue

@@ -7,31 +7,15 @@
    width="300px"
  >
    <template #default>
      <el-form
        :inline="false"
        ref="formRef"
        label-position="right"
        label-width="100px"
      >
        <el-form-item label="网格编号：">
          <div>
            {{ data.cellIndex }}
          </div>
        </el-form-item>
        <el-form-item label="经纬度：">
          <div>
            {{ data.longitude + ', ' + data.latitude }}
          </div>
        </el-form-item>
        <el-form-item label="PM2.5：">
          <div>
            {{ data.pm25 + ' Î¼g/m³' }}
          </div>
        </el-form-item>
        <el-form-item label="四至范围：">
          <div>/</div>
        </el-form-item>
      </el-form>
      <DescriptionsList v-if="data">
        <DescriptionsListItem label="网格编号" :content="data.cellIndex" />
        <DescriptionsListItem
          label="经纬度"
          :content="data.longitude + ', ' + data.latitude"
        />
        <DescriptionsListItem label="PM2.5" :content="data.pm25 + ' Î¼g/m³'" />
        <DescriptionsListItem label="四至范围" content="/" />
      </DescriptionsList>
    </template>
    <template #footer> </template>
  </CardDialog>

 src/components/grid/GridTool.vue

 src/components/list/DescriptionsList.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,31 @@
<template>
  <div class="title-wrapper">
    <div v-if="title" class="fy-h2">{{ title }}</div>
    <slot name="extra"></slot>
  </div>
  <table>
    <tbody>
      <slot></slot>
    </tbody>
  </table>
</template>

<script>
export default {
  props: {
    title: String
  }
};
</script>

<style scoped>
.title-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

table {
  width: 100%;
}
</style>

 src/components/list/DescriptionsListItem.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,37 @@
<template>
  <tr>
    <td v-if="label" class="td-1">{{ label }}</td>
    <td v-else class="td-1"><slot name="label"></slot></td>
    <td v-if="content" class="td-2">{{ content }}</td>
    <td v-else class="td-2"><slot name="content"></slot></td>
  </tr>
</template>

<script>
export default {
  props: {
    label: String,
    content: String
  }
};
</script>

<style scoped>
tr {
  font-size: var(--el-font-size-small);
}
td {
  border: 1px solid rgba(255, 255, 255, 0.616);
  padding: 2px 6px;
}
.td-1 {
  width: 68px;
  background-color: var(--bg-color-2);
  color: white;
}

.td-2 {
  color: white;
  /* background-color: var(--el-fill-color-light); */
}
</style>

 src/components/scene/SceneSearch.vue

@@ -15,7 +15,7 @@
    width="400px"
  >
    <template #default>
      <div v-show="nextPage">
      <div v-show="!nextPage">
        <div>
          <el-text size="small" type="warning">
            å…±è®¡{{ sceneStore.sceneList.length }}个点位，其中{{
@@ -82,13 +82,41 @@
          <!-- </el-col> -->
        </el-row>
      </div>
      <div v-show="!nextPage">
        <el-button
          @click="nextPage = false"
          type="primary"
          class="el-button-custom p-events-auto"
          >返回</el-button
        >
      <div v-show="nextPage">
        <DescriptionsList v-if="selectedScene" title="场景详情">
          <template #extra>
            <el-button
              @click="nextPage = false"
              icon="back"
              type="primary"
              size="small"
              class="el-button-custom p-events-auto"
              >返回</el-button
            >
          </template>
          <DescriptionsListItem label="名称" :content="selectedScene.name" />
          <DescriptionsListItem label="类型" :content="selectedScene.type" />
          <DescriptionsListItem
            label="区县"
            :content="selectedScene.districtName"
          />
          <DescriptionsListItem
            label="地址"
            :content="selectedScene.location"
          />
          <DescriptionsListItem
            label="经纬度"
            :content="selectedScene.longitude + ', ' + selectedScene.latitude"
          />
          <DescriptionsListItem
            label="靠近站点"
            :content="selectedScene.closestDevice.name"
          />
          <DescriptionsListItem
            label="相距站点"
            :content="selectedScene.closestDevice.dis + 'ç±³'"
          />
        </DescriptionsList>
      </div>
    </template>
    <template #footer>
@@ -157,7 +185,8 @@
      dialogVisible: false,
      onConfirm: undefined,
      showSceneTypes: [],
      nextPage: false
      nextPage: false,
      selectedScene: undefined
    };
  },
  computed: {
@@ -218,7 +247,7 @@
          if (!s.closestDevice || dis < s.closestDevice.dis) {
            s.closestDevice = {
              name: d.name,
              dis: dis
              dis: Math.round(dis)
            };
          }
        });
@@ -254,6 +283,7 @@
    // },
    showSceneList(nV, oV) {
      if (nV != oV) {
        this.nextPage = false;
        this.dialogVisible = true;
        this.drawMarks(nV);
      }
@@ -283,6 +313,7 @@
    },
    handleRowClick(row, col, event) {
      this.nextPage = true;
      this.selectedScene = row;
      MapUtil.setCenter([row.longitude, row.latitude], true);
    },
    filterHandler(value, row, column) {