污染溯源模块编写中

riku

2025-03-05 7b52f30bc471b7f433eea950f77ecb74a87d867c

 src/components/scene/SceneSearch.vue

@@ -15,40 +15,59 @@
    width="400px"
  >
    <template #default>
      <el-row class="scene-table">
        <!-- <el-col :span="20"> -->
        <el-table
          :data="sceneStore.sceneList"
          table-layout="fixed"
      <div v-show="!nextPage">
        <div>
          <el-text size="small" type="warning">
            共计{{ sceneStore.sceneList.length }}个点位，其中{{
              sceneTypeSummary
            }}
          </el-text>
        </div>
        <!-- <div v-for="(t, i) in closestScene" :key="i"> -->
        <el-text
          v-for="(t, i) in closestScene"
          :key="i"
          size="small"
          height="30vh"
          :show-overflow-tooltip="true"
          border
          row-class-name="t-row"
          cell-class-name="t-cell"
          header-row-class-name="t-header-row"
          header-cell-class-name="t-header-cell"
          @row-click="handleRowClick"
          @filter-change="handleFilterChange"
          type="warning"
        >
          <el-table-column type="index" label="#" width="25" />
          <el-table-column
            prop="type"
            label="类型"
            width="56"
            column-key="type"
            :filters="sceneTypeFilter"
            :filter-method="filterHandler"
          />
          <el-table-column prop="name" label="名称" />
          <!-- <el-table-column prop="location" label="地址" /> -->
          <el-table-column
            prop="districtName"
            label="区县"
            align="center"
            width="54"
          />
          <!-- <el-table-column label="管理" width="70" align="center">
          {{ t }}
        </el-text>
        <!-- </div> -->
        <!-- <el-row> 共计{{ sceneStore.sceneList.length }}个点位，其中 </el-row> -->
        <el-row class="scene-table">
          <!-- <el-col :span="20"> -->
          <el-table
            :data="sceneStore.sceneList"
            table-layout="fixed"
            size="small"
            height="30vh"
            :show-overflow-tooltip="true"
            border
            row-class-name="t-row"
            cell-class-name="t-cell"
            header-row-class-name="t-header-row"
            header-cell-class-name="t-header-cell"
            @row-click="handleRowClick"
            @filter-change="handleFilterChange"
          >
            <el-table-column type="index" label="#" width="25" />
            <el-table-column
              prop="type"
              label="类型"
              width="56"
              column-key="type"
              :filters="sceneTypeFilter"
              :filter-method="filterHandler"
            />
            <el-table-column prop="name" label="名称" />
            <!-- <el-table-column prop="location" label="地址" /> -->
            <el-table-column
              prop="districtName"
              label="区县"
              align="center"
              width="54"
            />
            <!-- <el-table-column label="管理" width="70" align="center">
            <template #default="{ row }">
              <el-button
                type="primary"
@@ -59,13 +78,50 @@
              >
            </template>
          </el-table-column> -->
        </el-table>
        <!-- </el-col> -->
      </el-row>
          </el-table>
          <!-- </el-col> -->
        </el-row>
      </div>
      <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>
      <el-row justify="start" align="middle" class="p-b-2 one-row">
        <el-text size="small" type="warning">搜索范围</el-text>
      <!-- <el-row justify="start" align="middle" class="p-b-2 one-row"> -->
      <!-- <el-text size="small" type="warning">搜索范围</el-text>
        <el-input
          class="input-radius m-h-2"
          size="small"
@@ -74,8 +130,9 @@
        />
        <el-text size="small" type="warning">
          公里以内，结果{{ sceneStore.sceneList.length }}条</el-text
        >
      </el-row>
        > -->

      <!-- </el-row> -->
    </template>
  </CardDialog>
</template>
@@ -87,8 +144,32 @@
import { useSceneStore } from '@/stores/scene';
import { useToolboxStore } from '@/stores/toolbox';
import MapUtil from '@/utils/map/util';
import calculate from '@/utils/map/calculate';

let layer = undefined;
const devices = [
  {
    name: '程桥站',
    typeId: 20,
    type: 'type',
    longitude: 121.362928,
    latitude: 31.192925
  },
  {
    name: '华阳站',
    typeId: 20,
    type: '市控点',
    longitude: 121.424603,
    latitude: 31.223644
  },
  {
    name: '仙霞站',
    typeId: 19,
    type: '国控点',
    longitude: 121.394775,
    latitude: 31.203982
  }
];

export default {
  setup() {
@@ -103,7 +184,9 @@
    return {
      dialogVisible: false,
      onConfirm: undefined,
      showSceneTypes: []
      showSceneTypes: [],
      nextPage: false,
      selectedScene: undefined
    };
  },
  computed: {
@@ -126,6 +209,57 @@
          return this.showSceneTypes.indexOf(v.type) != -1;
        });
      }
    },
    // 搜索结果场景类型统计
    sceneTypeSummary() {
      const typeMap = new Map();
      this.sceneStore.sceneList.forEach((s) => {
        if (!typeMap.has(s.type)) {
          typeMap.set(s.type, []);
        }
        typeMap.get(s.type).push(s);
      });

      let summary = '';
      typeMap.forEach((v, k) => {
        summary += `${k}${v.length}个、`;
      });
      summary = summary.slice(0, summary.length - 1);

      return summary;
    },
    // 计算距离给定点位最近的场景
    closestScene() {
      let txt = [];
      devices.forEach((d) => {
        let minDistance, scene;
        this.sceneStore.sceneList.forEach((s) => {
          const dis = calculate.getDistance(
            s.longitude,
            s.latitude,
            d.longitude,
            d.latitude
          );
          if (!minDistance || dis < minDistance) {
            minDistance = dis;
            scene = s;
          }
          if (!s.closestDevice || dis < s.closestDevice.dis) {
            s.closestDevice = {
              name: d.name,
              dis: Math.round(dis)
            };
          }
        });
        if (minDistance) {
          minDistance = Math.round(minDistance);
        }
        if (scene) {
          txt.push(`距${d.name}最近的为${scene.name}，距离${minDistance}米；`);
        }
      });

      return txt;
    }
  },
  watch: {
@@ -149,6 +283,7 @@
    // },
    showSceneList(nV, oV) {
      if (nV != oV) {
        this.nextPage = false;
        this.dialogVisible = true;
        this.drawMarks(nV);
      }
@@ -177,6 +312,8 @@
      }
    },
    handleRowClick(row, col, event) {
      this.nextPage = true;
      this.selectedScene = row;
      MapUtil.setCenter([row.longitude, row.latitude], true);
    },
    filterHandler(value, row, column) {
@@ -203,4 +340,28 @@
/* .ff-content-medium .ff-border-top {
  padding: 0px 0px var(--bevel-length-2) 0px;
} */

::v-deep .el-table {
  --el-table-bg-color: transparent;
  --el-table-row-hover-bg-color: var(--select_color);
  --el-table-current-row-bg-color: var(--select_color);
  /* --el-table-current-row-bg-color: #7dff5d96; */
  --el-table-text-color: var(--font-color);
}

::v-deep .t-row {
  cursor: pointer;
  background-color: transparent !important;
}

.t-cell {
}

.t-header-row {
}

::v-deep .t-header-cell {
  background-color: var(--bg-color-2) !important;
  color: white !important;
}
</style>