燕山石化溯源三维电子沙盘-【前端】-Web
surprise
2024-04-09 71f13ae626284e476a300b08a5f9e2c0f188544c
src/components/YJlist.vue
@@ -8,65 +8,22 @@
      <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="true"
            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
            width="120"
            prop="time"
            label="时间"
            show-overflow-tooltip
            :formatter="dateFormatter"
            align="center"
          />
          <el-table-column label="操作"  width="180px">
          <el-table-column prop="lon" label="经度" :show-overflow-tooltip="true" 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 width="120" 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"
                :disabled="scope.row.isSuYuan == 0"
                @click.stop="listClick(scope.row)"
                >污染源</el-button
              >
              <el-button link type="primary" size="small" :disabled="scope.row.isSuYuan == 0"
                @click.stop="listClick(scope.row)">污染源</el-button>
            </template>
          </el-table-column>
        </el-table>
@@ -90,6 +47,7 @@
} from "@/api/api.js";
export default {
  //import引入的组件需要注入到对象中才能使用
  emits: ["toYJList"],
  components: { Search },
  props: ["POIListData"],
  setup(props, { emit }) {
@@ -126,10 +84,8 @@
        )};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
        };`
      );
    };
@@ -152,7 +108,6 @@
        data.feedbackId = dt.result.feedbackId;
        data.WGlist = dt.result.data;
        let h = 450;
        let arr = [];
        dt.result.data.forEach((e) => {
          arr.push({
@@ -181,12 +136,13 @@
          h = 500;
        }
        const dt1 = await getCoordByName(POIobj.name);
        sgworld.Navigate.flyToPosition(dt1.result.lon, dt1.result.lat, h, {
          heading: 270,
          pitch: -89.5,
          roll: 0,
        });
        WRY(dt.result.data, date);
        WRY(POIobj, dt.result.data, date);
      } else {
        return ElMessage.error("请检查是否有数据");
      }
@@ -221,7 +177,7 @@
    const dateFormatter = (row) => {
      return insertStr(row.time);
    };
    const WRY = (val, time) => {
    const WRY = (obj, val, time) => {
      sgworld.Core.postMessage({ func_name: "RemoveGridLines", id: "" });
      //删除边界
      sgworld.Core.postMessage({ func_name: "RemoveGridSide", id: "" });
@@ -234,6 +190,7 @@
          date: time,
        });
        if (dt.result) {
          sgworld.Core.postMessage({
            func_name: "RemoveGridLines",
            id: "line",
@@ -271,6 +228,20 @@
              Addr: dt.result.addr3,
            });
          }
        store.state.YJXQ={
          name:obj,
          val:dt.result,
          time:time,
        }
        setTimeout(() => {
  store.state.YJXQFlag = true;
}, 500);
          sgworld.Core.postMessage({
            func_name: "SpawnGridLines",
            StartPointArr: location,
@@ -283,6 +254,10 @@
            fx_number: 20,
            line_scale: 0.5,
          });
        }
      });
    };
@@ -316,6 +291,7 @@
<style lang="less" scoped>
//@import url(); 引入公共css类
.YJlist_box {
  // position: absolute;
  // right: 20px;
  // top: 490px;
@@ -346,12 +322,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);
@@ -361,6 +339,7 @@
    padding: calc(45px * 1.5);
    position: relative;
    overflow: auto;
    .list_close {
      width: 22px;
      height: 22px;
@@ -371,12 +350,14 @@
      right: 80px;
      top: 80px;
    }
    .list_title {
      font-size: 30px;
      margin-bottom: 20px;
      font-weight: bold;
      color: #ffffff;
    }
    .table_box {
      width: 100%;
      height: 80%;
@@ -386,26 +367,32 @@
      // transform: translateX(-50%);
      // z-index: 10;
    }
    .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 {
    .el-table /deep/ tr:hover>td {
      background-color: rgba(0, 0, 0, 1) !important;
    }
    /deep/ .el-table__body {
      width: 100% !important;
    }
@@ -414,6 +401,7 @@
      width: 100% !important;
    }
  }
  .inp_box {
    span {
      font-size: 24px;
@@ -421,6 +409,7 @@
      color: #ffffff;
      padding-right: 10px;
    }
    /deep/ .el-input__wrapper {
      // width: 460px;
      background: rgba(0, 0, 0, 0.2);
@@ -430,21 +419,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;
@@ -453,6 +447,7 @@
      padding: 0;
      padding-left: 6px;
    }
    .el-select /deep/ .el-input__inner {
      color: #ffffff;
      font-size: 24px;