燕山石化溯源三维电子沙盘-【前端】-Web
surprise
2024-03-27 08d0c4ca9064c27be7b3e488bec497e87a05cc18
src/components/BJlist.vue
@@ -8,72 +8,33 @@
      <div class="list_title">报警点位列表</div>
      <div class="inp_box">
        <span>选择时间段:</span>
        <el-date-picker
          size="large"
          v-model="selectform.value1"
          type="datetimerange"
          @change="changeTime"
          value-format="YYYY-MM-DD HH"
          format="YYYY-MM-DD HH"
        />
        <el-date-picker size="large" v-model="selectform.value1" type="datetimerange" @change="changeTime"
          value-format="YYYY-MM-DD HH" format="YYYY-MM-DD HH" />
      </div>
      <div class="table_box">
        <el-table
          :data="data.tableData"
          style="width: 100%"
          height="100%"
          @row-click="flytoPoi"
        >
          <el-table-column
            prop="name"
            label="名称"
            show-overflow-tooltip
            align="center"
          />
        <el-table :data="data.tableData" style="width: 100%" height="100%" @row-click="flytoPoi">
          <el-table-column prop="name" label="名称" show-overflow-tooltip align="center" />
          <!--          <el-table-column prop="name" label="名称" show-overflow-tooltip />-->
          <el-table-column
            prop="lon"
            label="经度"
            show-overflow-tooltip
            align="center"
          />
          <el-table-column
            prop="lat"
            label="纬度"
            show-overflow-tooltip
            align="center"
          />
          <el-table-column
            prop="value"
            label="数值"
            show-overflow-tooltip
            align="center"
          />
          <el-table-column
            prop="time"
            label="时间"
            show-overflow-tooltip
            :formatter="dateFormatter"
            align="center"
          />
          <el-table-column label="操作">
          <el-table-column prop="lon" label="经度" show-overflow-tooltip align="center" />
          <el-table-column prop="lat" label="纬度" show-overflow-tooltip align="center" />
          <el-table-column prop="value" label="数值" show-overflow-tooltip align="center" />
          <el-table-column prop="time" label="时间" show-overflow-tooltip :formatter="dateFormatter" align="center" />
          <el-table-column label="操作" width="180px">
            <template #default="scope">
              <el-button
                link
                type="primary"
                size="small"
                @click.stop="listClick(scope.row)"
                >污染源</el-button
              >
              <el-button link type="primary" size="small" @click.stop="listClick(scope.row)" :disabled="scope.row.isSuYuan == 0 || scope.row.isSuYuan == null
        ">污染源</el-button>
              <el-button link type="primary" size="small" @click.stop="kssyClick(scope.row)">快速溯源</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
  <!--   :disabled="scope.row.isFast == 0 || scope.row.isFast == null" -->
</template>
//
<script>
import { Search } from "@element-plus/icons-vue"; // svg图标
// import type { FormInstance, FormRules } from "element-plus";
@@ -83,6 +44,7 @@
  ysshSuYuanX00Controller,
  getCoordByName,
  selectSuYuan46ById,
  selectFastByld,
} from "@/api/api.js";
import menuTool from "@/assets/js/menuTool";
import { useStore } from "vuex";
@@ -116,6 +78,15 @@
    const listClick = (row) => {
      SYWG(row);
      sgworld.Core.postMessage({
        func_name: "SetSmallWind",
        lon: "",
        lat: "",
        alt: 300,
        Scope: scope,
        Direction: "",
        Hidden: "true",
      });
      window.sgworld.Core.postMessage("Type=customewinds;Bool=false;");
      window.sgworld.Core.postMessage(
        `Type=customewinds;Bool=true;Year=${row.time.slice(
@@ -124,13 +95,104 @@
        )};Mouth=${row.time.slice(4, 6)};Day=${row.time.slice(
          6,
          8
        )};Hour=${row.time.slice(8, 10)};Density=${BJFC.Density};Speed=${
          BJFC.Speed
        };d1=0;d2=30;Corp=1;Lon=${row.lon};Lat=${row.lat};Length=${
          BJFC.Length
        )};Hour=${row.time.slice(8, 10)};Density=${BJFC.Density};Speed=${BJFC.Speed
        };d1=0;d2=30;Corp=1;Lon=${row.lon};Lat=${row.lat};Length=${BJFC.Length
        };`
      );
    };
    /**
     * 快速溯源
     */
    const kssyClick = (row) => {
      kssyOperator(row);
    };
    const kssyOperator = async (POIobj) => {
      sgworld.Core.postMessage({ type: "delete" });
      const dt1 = await getCoordByName(POIobj.name);
      var date = insertStr(POIobj.time) + ":00:00";
      // const dt = await ysshSuYuanX00Controller(
      //   { name: POIobj.name, date: date },
      //   100
      // );
      // console.log("快速溯源-获取溯源列表", dt);
      // if (dt1.result) {
      sgworld.Core.postMessage({ func_name: "RemoveGridLines", id: "" });
      //删除边界
      sgworld.Core.postMessage({ func_name: "RemoveGridSide", id: "" });
      const dt2 = await selectFastByld({
        id: dt1.result.id.slice(0, -2) + "_0",
        date: date,
      });
      window.sgworld.Core.postMessage("Type=customewinds;Bool=false;");
      sgworld.Core.postMessage({
        func_name: "SetSmallWind",
        lon: "",
        lat: "",
        alt: 300,
        Scope: scope,
        Direction: "",
        Hidden: "true",
      });
      console.log("快速溯源-获取溯源详情", dt2);
      if (dt2.result) {
        dt2.result.map((item) => {
          console.log("val_step",item.dir);
          var dir = item.dir + val_step;
          console.log("val_step",dir);
          sgworld.Core.postMessage({
            func_name: "SetSmallWind",
            lon: item.x,
            lat: item.y,
            alt: 300,
            Scope: scope,
            Direction: dir,
            Hidden: "false",
          });
        });
        console.log("快速溯源-获取经纬度,", dt2);
        sgworld.Navigate.flyToPosition(dt2.result[0].x, dt2.result[0].y, 500, {
          heading: 270,
          pitch: -89.5,
          roll: 0,
        });
      }
      // dt.result.data.forEach(async (e) => {
      //   const dt2 = await selectFastByld({
      //     id: e.id,
      //     date: date,
      //   });
      //   console.log("快速溯源-获取溯源详情", dt2);
      //   if (dt2.result) {
      //     dt2.result.nap((item) => {
      //       sgworld.Core.postMessage({
      //         func_name: "SetSmallWind",
      //         lon: item.x,
      //         lat: item.y,
      //         alt: 300,
      //         Scope: 300000,
      //         Direction: item.dir,
      //         Hidden: "false",
      //       });
      //     });
      //   }
      // });
      // } else {
      //   return ElMessage.error("请检查是否有数据");
      // }
    };
    const SYWG = async (POIobj) => {
      // data.time = insertStr(POIobj.time) + ":00:00";
      var date = insertStr(POIobj.time) + ":00:00";
@@ -300,6 +362,8 @@
      flytoPoi,
      selectform,
      changeTime,
      kssyClick,
      kssyOperator,
    };
  },
};
@@ -307,6 +371,7 @@
<style lang="less" scoped>
//@import url(); 引入公共css类
.BJlist_box {
  // position: absolute;
  // right: 20px;
  // top: 490px;
@@ -337,12 +402,14 @@
      font-size: 16px;
      font-weight: 600;
    }
    .text {
      font-size: 24px;
      font-weight: 400;
      color: #ffffff;
    }
  }
  .list_box {
    width: calc(775px * 1.8);
    height: calc(472px * 1.8);
@@ -351,6 +418,7 @@
    background-size: 100% 100%;
    padding: calc(45px * 1.5);
    position: relative;
    .list_close {
      width: 22px;
      height: 22px;
@@ -361,12 +429,14 @@
      right: 80px;
      top: 80px;
    }
    .list_title {
      font-size: 30px;
      margin-bottom: 20px;
      font-weight: bold;
      color: #ffffff;
    }
    .table_box {
      width: 100%;
      height: 80%;
@@ -377,26 +447,32 @@
      // z-index: 10;
      overflow: auto;
    }
    .el-table {
      // height: 370px;
      width: 100%;
      overflow: auto;
      background-color: transparent;
    }
    .el-table::before {
      height: 0;
    }
    .el-table /deep/ .el-tooltip {
      padding: 0;
    }
    .el-table /deep/ th,
    .el-table /deep/ tr {
      background-color: transparent;
      color: white;
    }
    .el-table /deep/ tr:hover > td {
      background-color: rgba(0, 0, 0, 1) !important;
    }
    /deep/ .el-table__body {
      width: 100% !important;
    }
@@ -405,6 +481,7 @@
      width: 100% !important;
    }
  }
  .inp_box {
    span {
      font-size: 24px;
@@ -412,6 +489,7 @@
      color: #ffffff;
      padding-right: 10px;
    }
    /deep/ .el-input__wrapper {
      // width: 460px;
      background: rgba(0, 0, 0, 0.2);
@@ -421,21 +499,26 @@
      padding: 0;
      padding-left: 3px;
    }
    /deep/ .el-input__inner,
    /deep/ .el-textarea__inner {
      //   background-color: rgba(134, 132, 132, 0.5);
      color: #ffffff;
      font-size: 24px;
    }
    /deep/.el-range-input {
      color: white;
    }
    /deep/ .el-range-separator {
      color: white;
    }
    .el-select {
      width: 180px;
    }
    .el-select /deep/ .el-input__wrapper {
      background: rgba(0, 0, 0, 0.2);
      border: 2px solid #2e58cc;
@@ -444,6 +527,7 @@
      padding: 0;
      padding-left: 6px;
    }
    .el-select /deep/ .el-input__inner {
      color: #ffffff;
      font-size: 24px;