PM20220923166_Web.git

<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>