燕山石化溯源三维电子沙盘-【前端】-Web
surprise
2024-03-27 08d0c4ca9064c27be7b3e488bec497e87a05cc18
代码更新
已添加1个文件
已修改13个文件
839 ■■■■ 文件已修改
package-lock.json 148 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
public/config/config.js 7 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/api/api.js 15 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/assets/js/menuData.js 6 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/assets/js/menuTool.js 3 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/components/BJlist.vue 200 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/components/PreCusPage.vue 423 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/components/YJlist.vue 3 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/components/xgzs/dayzdmax.vue 5 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/components/xgzs/weekzdmax.vue 6 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/components/xgzs/zdmax.vue 5 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/utils/request.js 4 ●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/index.vue 13 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/menus.vue 1 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
package-lock.json
@@ -1373,11 +1373,6 @@
      "integrity": "sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==",
      "dev": true
    },
    "@popperjs/core": {
      "version": "npm:@sxzz/popperjs-es@2.11.7",
      "resolved": "https://registry.npmmirror.com/@sxzz/popperjs-es/-/popperjs-es-2.11.7.tgz",
      "integrity": "sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ=="
    },
    "@soda/friendly-errors-webpack-plugin": {
      "version": "1.8.1",
      "resolved": "https://registry.npmmirror.com/@soda/friendly-errors-webpack-plugin/-/friendly-errors-webpack-plugin-1.8.1.tgz",
@@ -1961,6 +1956,51 @@
          "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
          "dev": true
        },
        "ansi-styles": {
          "version": "4.3.0",
          "resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-4.3.0.tgz",
          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
          "dev": true,
          "optional": true,
          "requires": {
            "color-convert": "^2.0.1"
          }
        },
        "chalk": {
          "version": "4.1.2",
          "resolved": "https://registry.npmmirror.com/chalk/-/chalk-4.1.2.tgz",
          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
          "dev": true,
          "optional": true,
          "requires": {
            "ansi-styles": "^4.1.0",
            "supports-color": "^7.1.0"
          }
        },
        "color-convert": {
          "version": "2.0.1",
          "resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz",
          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
          "dev": true,
          "optional": true,
          "requires": {
            "color-name": "~1.1.4"
          }
        },
        "color-name": {
          "version": "1.1.4",
          "resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz",
          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
          "dev": true,
          "optional": true
        },
        "has-flag": {
          "version": "4.0.0",
          "resolved": "https://registry.npmmirror.com/has-flag/-/has-flag-4.0.0.tgz",
          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
          "dev": true,
          "optional": true
        },
        "ssri": {
          "version": "8.0.1",
          "resolved": "https://registry.npmmirror.com/ssri/-/ssri-8.0.1.tgz",
@@ -1968,6 +2008,28 @@
          "dev": true,
          "requires": {
            "minipass": "^3.1.1"
          }
        },
        "supports-color": {
          "version": "7.2.0",
          "resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-7.2.0.tgz",
          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
          "dev": true,
          "optional": true,
          "requires": {
            "has-flag": "^4.0.0"
          }
        },
        "vue-loader-v16": {
          "version": "npm:vue-loader@16.8.3",
          "resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-16.8.3.tgz",
          "integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
          "dev": true,
          "optional": true,
          "requires": {
            "chalk": "^4.1.0",
            "hash-sum": "^2.0.0",
            "loader-utils": "^2.0.0"
          }
        }
      }
@@ -5094,6 +5156,13 @@
        "lodash-unified": "^1.0.2",
        "memoize-one": "^6.0.0",
        "normalize-wheel-es": "^1.2.0"
      },
      "dependencies": {
        "@popperjs/core": {
          "version": "npm:@sxzz/popperjs-es@2.11.7",
          "resolved": "https://registry.npmmirror.com/@sxzz/popperjs-es/-/popperjs-es-2.11.7.tgz",
          "integrity": "sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ=="
        }
      }
    },
    "elliptic": {
@@ -12700,75 +12769,6 @@
            "big.js": "^5.2.2",
            "emojis-list": "^3.0.0",
            "json5": "^1.0.1"
          }
        }
      }
    },
    "vue-loader-v16": {
      "version": "npm:vue-loader@16.8.3",
      "resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-16.8.3.tgz",
      "integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
      "dev": true,
      "optional": true,
      "requires": {
        "chalk": "^4.1.0",
        "hash-sum": "^2.0.0",
        "loader-utils": "^2.0.0"
      },
      "dependencies": {
        "ansi-styles": {
          "version": "4.3.0",
          "resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-4.3.0.tgz",
          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
          "dev": true,
          "optional": true,
          "requires": {
            "color-convert": "^2.0.1"
          }
        },
        "chalk": {
          "version": "4.1.2",
          "resolved": "https://registry.npmmirror.com/chalk/-/chalk-4.1.2.tgz",
          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
          "dev": true,
          "optional": true,
          "requires": {
            "ansi-styles": "^4.1.0",
            "supports-color": "^7.1.0"
          }
        },
        "color-convert": {
          "version": "2.0.1",
          "resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz",
          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
          "dev": true,
          "optional": true,
          "requires": {
            "color-name": "~1.1.4"
          }
        },
        "color-name": {
          "version": "1.1.4",
          "resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz",
          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
          "dev": true,
          "optional": true
        },
        "has-flag": {
          "version": "4.0.0",
          "resolved": "https://registry.npmmirror.com/has-flag/-/has-flag-4.0.0.tgz",
          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
          "dev": true,
          "optional": true
        },
        "supports-color": {
          "version": "7.2.0",
          "resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-7.2.0.tgz",
          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
          "dev": true,
          "optional": true,
          "requires": {
            "has-flag": "^4.0.0"
          }
        }
      }
public/config/config.js
@@ -3,7 +3,7 @@
const mapUrl = "http://localhost:8084/";
// const mapUrl = "http://192.168.20.99:8084/"; //ue地图连接地址
// const BASE_URL = "http://183.162.245.49:2228/yssh/"; //后端接口地址
const BASE_URL = "http://192.168.20.228:8082/yssh/"; //后端接口地址
const BASE_URL = "http://192.168.11.206:8082/yssh/"; //后端接口地址
const jsonUrl = "/json"; //原请求本地json文件地址,现在不用了
// const imgUrl = "http://10.101.5.98:8080/";
// const mapUrl = "http://10.101.5.98:8085/";
@@ -11,6 +11,11 @@
// const jsonUrl = "http://10.101.5.98:8080";
// const getTokenUrl = "http://10.101.5.98:8080/gettoken";
// const websocketUrl = "ws://192.168.124.132:8765/"
const websocketUrl = "ws://192.168.124.135:8888/"
const scope = 200000;
const val_step = -90;
const videoJS = "config/燕山石化系统功能展示.mp4";
const SMvideoJS = "config/系统说明.mp4";
//二维热力图半径
src/api/api.js
@@ -247,6 +247,13 @@
    params: params,
  });
}
//id日期查询快速溯源
export function selectFastByld(params) {
  //请求地址
  return request.get(`suYuan/selectFastById`, {
    params: params,
  });
}
//根据经纬度查询地名
export function selectAddrByXY(params) {
  //请求地址
@@ -287,3 +294,11 @@
    params: params,
  });
}
//发送消息
export function sendMsg(params) {
  //请求地址
  return request.get(`/suYuan/sendMsg`, {
    params: params,
  });
}
src/assets/js/menuData.js
@@ -66,6 +66,12 @@
          isActive: true,
          name: "污染物扩散趋势",
        },
        {
          id: "b5",
          num: 23,
          isActive: true,
          name: "自定义模拟",
        },
      ],
    },
    {
src/assets/js/menuTool.js
@@ -49,6 +49,9 @@
          heading: -90,
        });
        break;
      case "b5": //自定义
        debugger
        break;
      case "c2": //预警信息
        break;
      case "c3": //报警信息
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;
src/components/PreCusPage.vue
¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,423 @@
<template>
  <div class="PreCusPage_box">
    <div class="list_box" id="list_box1">
      <div class="list_title">自定义{{ timeInter }}</div>
      <div class="inp_box">
        <span>经&nbsp;&nbsp;&nbsp;纬:</span>
        <input v-model="selectform.x" type="text" placeholder="请输入经度" />
      </div>
      <div class="inp_box" style="margin-top: 5px">
        <span>ç»´&nbsp;&nbsp;&nbsp;度:</span>
        <input
          size="large"
          v-model="selectform.y"
          type="text"
          placeholder="请输入维度"
        />
      </div>
      <div class="inp_box" style="margin-top: 5px">
        <span>污染值:</span>
        <input
          size="large"
          v-model="selectform.value"
          type="text"
          placeholder="请输入污染值"
        />
      </div>
      <div class="inp_box" style="margin-top: 5px">
        <!-- <span
          >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span
        > -->
        <el-button
          class="btnsubmit"
          type="primary"
          :disabled="btnDisabled"
          @click="submitBtn"
        >
          æäº¤
        </el-button>
        <el-button
          class="btnsubmit"
          type="primary"
          :disabled="mnBtnDisabled"
          @click="submitBtnMN"
        >
          æ¨¡æ‹Ÿ
        </el-button>
      </div>
    </div>
  </div>
</template>
<script>
import { Search } from "@element-plus/icons-vue"; // svg图标
// import type { FormInstance, FormRules } from "element-plus";
import { reactive, onMounted, watch, ref, onUnmounted } from "vue";
import { FormInstance, ElMessage, ElMessageBox } from "element-plus";
import menuTool from "@/assets/js/menuTool";
import { useStore } from "vuex";
import {
  ysshSuYuanX00Controller,
  getCoordByName,
  selectSuYuan46ById,
  sendMsg,
} from "@/api/api.js";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: { Search },
  props: ["POIListData"],
  setup(props, { emit }) {
    const store = useStore();
    // è¿™ä¸ªæ˜¯å†™åœ¨setup()里的!!
    const timeInter = ref("");
    const formRef = ref < FormInstance > "";
    const selectform = reactive({
      x: "",
      y: "",
      value: "",
    });
    const btnDisabled = ref(false);
    const btnLoading = ref(false);
    const mnBtnDisabled = ref(false);
    let data = reactive({
      tableData: [],
      dialogFormVisible: false,
      activeName: "first",
      chart_isshow: false,
      time: "",
      WGlist: [],
    });
    const flytoPoi = (row) => {
      sgworld.Navigate.flyToPosition(row.lon, row.lat, 500, {
        heading: 270,
        pitch: -89.5,
        roll: 0,
      });
    };
    const submitBtnMN = () => {
      // console.log(selectform.x, selectform.y, 8000)
      sgworld.Navigate.flyToPosition(selectform.x, selectform.y, 8000, {
        heading: 270,
        pitch: -89.5,
        roll: 0,
      });
      sgworld.Core.postMessage({
        func_name: "StartImage",
        TypeL1: "End",
        Year: "",
        Mouth: "",
        Day: "",
        Hour: "",
      });
      // sgworld.Core.postMessage({
      //   func_name: "StartImage",
      //   TypeL1: "Start",
      //   Year: "2023",
      //   Mouth: "10",
      //   Day: "26",
      //   Hour: "18",
      // });
      if (window.socketMsg) {
        sgworld.Core.postMessage({
          func_name: "StartImage",
          TypeL1: "Start",
          Year: window.socketMsg.Year,
          Mouth: window.socketMsg.Mouth,
          Day: window.socketMsg.Day,
          Hour: window.socketMsg.Hour,
        });
      }
    };
    const submitBtn = () => {
      if (selectform.x == "") {
        ElMessage.error("请输入经度");
        return;
      } else if (selectform.y == "") {
        ElMessage.error("请输入维度");
        return;
      } else if (selectform.value == "") {
        ElMessage.error("请输入污染值");
        return;
      }
      // ElMessage.success("数据已提交,请稍候20分钟");
      ElMessage.success("数据已提交");
      timeInter.value = "(数据已提交,请稍候)";
      btnDisabled.value = true;
      btnLoading.value = true;
      mnBtnDisabled.value = true;
      sendMsg({ msg: JSON.stringify(selectform) }).then((res) => {
        btnDisabled.value = false;
        btnLoading.value = false;
        mnBtnDisabled.value = false;
        ElMessage.success("数据生成成功!");
        console.log(res);
        let str = "2023102618";
        str = res.result + "";
        const year = str.slice(0, 4);
        const month = str.slice(4, 6);
        const day = str.slice(6, 8);
        const hour = str.slice(8, 10);
        window.socketMsg = {
          Year: year,
          Mouth: month,
          Day: day,
          Hour: hour,
        };
      });
      // // window.timeInterNumer = 20 * 60;
      // // window.timeInterIntervalId = setInterval(() => {
      // //   timeInter.value = "数据需要等待" + --window.timeInterNumer + "秒后生成";
      // // }, 1000);
      // // setTimeout(() => {
      // //   mnBtnDisabled.value = false;
      // //   btnLoading.value = false;
      // //   clearInterval(window.timeInterIntervalId);
      // // }, 20 * 60 * 1000);
      // if (window.socket) {
      //   window.socket.close();
      // }
      // // å®žä¾‹åŒ–socket
      // console.log("websocketUrl", websocketUrl);
      // window.socket = new WebSocket(websocketUrl);
      // // ç›‘听socket连接
      // window.socket.onopen = function () {
      //   debugger
      //   window.socket.send(JSON.stringify(selectform));
      // };
      // // ç›‘听socket错误信息
      // window.socket.onerror = function (error) {
      //   console.log("socket open error");
      //   console.log(error);
      // };
      // // ç›‘听socket消息
      // window.socket.onmessage = function (msg) {
      //   ElMessage.success("数据生成成功!");
      //   mnBtnDisabled.value = false;
      //   btnLoading.value = false;
      //   console.log(msg);
      //   clearInterval(window.timeInterIntervalId);
      //   mnBtnDisabled.value = false;
      //   btnLoading.value = false;
      //   window.socketMsg = JSON.parse(msg.data);
      // };
    };
    onMounted(() => {
      // data.tableData = store.state.YJlist;
    });
    onUnmounted(() => {
      sgworld.Core.postMessage({
        func_name: "StartImage",
        TypeL1: "End",
        Year: "",
        Mouth: "",
        Day: "",
        Hour: "",
      });
    });
    return {
      data,
      formRef,
      flytoPoi,
      selectform,
      submitBtn,
      submitBtnMN,
      btnDisabled,
      btnLoading,
      mnBtnDisabled,
      timeInter,
    };
  },
};
</script>
<style lang="less" scoped>
//@import url(); å¼•入公共cssç±»
.PreCusPage_box {
  // position: absolute;
  // right: 20px;
  // top: 490px;
  position: fixed;
  left: 1.66rem;
  top: 0.88573rem;
  input[type="text"] {
    height: 0.16rem;
    background-color: rgb(103, 109, 124);
    border: 1px solid white;
    color: white;
  }
  input[type="text"]:focus {
    height: 0.16rem;
    border: 1px solid blue;
  }
  input[type="text"]::placeholder {
    color: white;
  }
  .btnsubmit {
    height: 0.16rem;
    width: 0.55rem;
    font-size: 0.05688rem;
  }
  .bjtext {
    margin-left: 35px;
    width: calc(723px * 1.8);
    height: 80px;
    background: rgba(24, 25, 12, 0.8);
    border: 2px solid rgba(255, 114, 0);
    border-radius: 10px;
    padding: 30px;
    box-sizing: border-box;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    .ico {
      width: 33px;
      height: 33px;
      background: #ff7200;
      border-radius: 50%;
      margin-right: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      // text-align: center;
      color: #fff;
      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);
    box-sizing: border-box;
    background: url("../assets/img/bgk.png") no-repeat center;
    background-size: 100% 100%;
    padding: calc(45px * 1.5);
    position: relative;
    overflow: auto;
    .list_close {
      width: 22px;
      height: 22px;
      cursor: pointer;
      background: url("../assets/img/close.png") center no-repeat;
      background-size: 100% 100%;
      position: absolute;
      right: 80px;
      top: 80px;
    }
    .list_title {
      font-size: 30px;
      margin-bottom: 20px;
      font-weight: bold;
      color: #ffffff;
    }
    .table_box {
      width: 100%;
      height: 80%;
      // position: absolute;
      // top: 110px;
      // left: 50%;
      // 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 {
      background-color: rgba(0, 0, 0, 1) !important;
    }
    /deep/ .el-table__body {
      width: 100% !important;
    }
    /deep/ .el-table__header {
      width: 100% !important;
    }
  }
  .inp_box {
    span {
      font-size: 24px;
      font-weight: 400;
      color: #ffffff;
      padding-right: 10px;
    }
    /deep/ .el-input__wrapper {
      // width: 460px;
      background: rgba(0, 0, 0, 0.2);
      border: 2px solid #2e58cc;
      border-radius: 10px;
      color: #ffffff;
      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;
      border-radius: 10px;
      color: #ffffff;
      padding: 0;
      padding-left: 6px;
    }
    .el-select /deep/ .el-input__inner {
      color: #ffffff;
      font-size: 24px;
    }
  }
}
</style>
src/components/YJlist.vue
@@ -57,12 +57,13 @@
            :formatter="dateFormatter"
            align="center"
          />
          <el-table-column label="操作">
          <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
              >
src/components/xgzs/dayzdmax.vue
@@ -47,7 +47,10 @@
            "-" +
            item.time.slice(4, 6) +
            "-" +
            item.time.slice(6, 8);
            item.time.slice(6, 8)
            +
            " "+
            item.time.slice(8,10);
          return [item.name, item.value, item.time];
        });
        data.sort(this.sequence);
src/components/xgzs/weekzdmax.vue
@@ -37,18 +37,22 @@
    },
    async getWaringList() {
      let dt = await getweekTop();
      if (dt.code === 200 && dt.result.length > 0) {
        // console.log(dt);
        const sotrArr = dt.result.sort((a, b) => b - a);
        let result = sotrArr.slice(0, 10);
        const data = result.map((item) => {
          item.value = Number(item.value).toFixed(2);
          item.time =
            item.time.slice(0, 4) +
            "-" +
            item.time.slice(4, 6) +
            "-" +
            item.time.slice(6, 8);
            item.time.slice(6, 8)+
            " "+
            item.time.slice(8,10);
          return [item.name, item.value, item.time];
        });
        data.sort(this.sequence);
src/components/xgzs/zdmax.vue
@@ -47,7 +47,10 @@
            "-" +
            item.time.slice(4, 6) +
            "-" +
            item.time.slice(6, 8);
            item.time.slice(6, 8)
            +
            " "+
            item.time.slice(8,10);
          return [item.name, item.value, item.time];
        });
        data.sort(this.sequence);
src/utils/request.js
@@ -12,7 +12,9 @@
// create an axios instance
const service = axios.create({
  baseURL: BASE_URL, // api的base_url
  timeout: 1200000, // è¯·æ±‚è¶…æ—¶æ—¶é—´
  timeout: 120000000, // è¯·æ±‚è¶…æ—¶æ—¶é—´
  // timeout: 10, // è¯·æ±‚è¶…æ—¶æ—¶é—´
  // headers: {
  //   "content-type": "application/json;charset=UTF-8",
  // },
src/views/index.vue
@@ -63,6 +63,7 @@
            <YJlist v-if="checkMenuFlag == 'c2'"></YJlist>
            <gjfx v-if="checkMenuFlag == 'f1'"></gjfx>
            <zdmax v-if="checkMenuFlag == 'f1'"></zdmax>
            <PreCusPage v-if="checkMenuFlag == 'b5'"></PreCusPage>
          </div>
        </div>
      </div>
@@ -112,6 +113,7 @@
//预警报警
import BJlist from "@/components/BJlist.vue";
import YJlist from "@/components/YJlist.vue";
import PreCusPage from "@/components/PreCusPage.vue";
//点位列表
import poiList from "@/components/poiList.vue";
//统计图
@@ -146,6 +148,7 @@
    reportList,
    dayzdmax,
    weekzdmax,
    PreCusPage
  },
  setup(props, { emit }) {
    const store = useStore();
@@ -232,6 +235,16 @@
      if (res.id == "e5") {
        videoUrl.value = window.location.href.split("#")[0] + SMvideoJS;
      }
      sgworld.Core.postMessage({
        func_name: "SetSmallWind",
        lon: "",
        lat: "",
        alt: 300,
        Scope: "",
        Direction: "",
        Hidden: "true",
      });
    };
    const toggleFK = (params) => {
src/views/menus.vue
@@ -97,6 +97,7 @@
      emit("menusData", res);
    };
    const setMenuChildClick = (res) => {
      debugger;
      if (childMenuOptions.value && childMenuOptions.value == res.id) {
        if (checkMenuChildFlag.value != null) {
          if (checkMenuChildFlag.value[0] == res.id[0]) {