修改风场

WX

2023-08-11 b01346e041ffa205d69fddffa8c6f78cbeb307af

修改风场

 src/assets/img/sj.png

 src/assets/js/menuData.js

@@ -79,6 +79,23 @@
          num: 41,
          isActive: true,
          name: "风场模拟",
          child: [
            {
              id: "d21",
              isActive: true,
              name: "整个厂区",
            },
            {
              id: "d22",
              isActive: true,
              name: "西部厂区",
            },
            {
              id: "d23",
              isActive: true,
              name: "东部厂区",
            },
          ],
        },
        {
          id: "d3",
@@ -86,6 +103,12 @@
          isActive: true,
          name: "污染物模拟",
        },
        {
          id: "d7",
          num: 43,
          isActive: true,
          name: "设备分布",
          child: [
        {
          id: "d4",
          num: 43,
@@ -98,6 +121,9 @@
          isActive: true,
          name: "排放点位",
        },
          ],
        },

        {
          id: "d6",
          num: 45,

 src/assets/js/menuTool.js

@@ -53,7 +53,28 @@
        window.sgworld.Navigate.flyToPosition(115.95108, 39.7411754, 7200, {
          heading: -90,
        });
        this.createFC("fc");

        break;
      case "d21": //全场风场模拟
        this.createFC("fc", "", {
          start: "",
          end: "",
          Classify: "Main",
        });
        break;
      case "d22": //西部风场模拟
        this.createFC("fc", "", {
          start: "",
          end: "",
          Classify: "West",
        });
        break;
      case "d23": //东部风场模拟
        this.createFC("fc", "", {
          start: "",
          end: "",
          Classify: "East",
        });
        break;
      case "d3": //污染物模拟
        window.sgworld.Navigate.flyToPosition(115.95108, 39.7411754, 7200, {
@@ -150,7 +171,9 @@
        break;
      case "d6": //天气特效清除
        break;

      case "d7": //监控点位排放点位清除
        this.closePoi();
        break;
      case "e2": //阈值设置清除
        break;
      case "e3": //系统说明清除
@@ -289,10 +312,10 @@
    sgworld.Core.postMessage({ type: "delete" });
  },
  //风场模拟
  createFC(type, date) {
  createFC(type, date, data) {
    if (type == "fc") {
      sgworld.Core.postMessage(
        `Type=shunxuwinds;Bool=true;Density=${FC.Density};Speed=${FC.Speed};`
        `Type=shunxuwinds;Bool=true;Density=${FC.Density};Speed=${FC.Speed};StartLayer=${data.start};EndLayer=${data.end};Classify=${data.Classify};`
      );
    } else if (type == "sj") {
      let arr = date.split(/\s+/);
@@ -302,12 +325,11 @@
      let Hour = arr[1];

      sgworld.Core.postMessage(
        `Type=customewinds;Bool=true;Year=${day[0]};Mouth=${day[1]};Day=${day[2]};Hour=${Hour};Density=${FC.Density};Speed=${FC.Speed};`
        `Type=customewinds;Bool=true;Year=${day[0]};Mouth=${day[1]};Day=${day[2]};Hour=${Hour};Density=${FC.Density};Speed=${FC.Speed};StartLayer=${data.start};EndLayer=${data.end};Classify=${data.Classify};`
      );
      // console.log(
      //   `Type=customewinds;Bool=true;Year=${day[0]};Mouth=${day[1]};Day=${day[2]};Hour=${Hour[0]};Density=${FC.Density};Speed=${FC.Speed};`
      // );
    } else {
    }
  },
  //风场删除

 src/components/BGDC.vue

@@ -32,7 +32,7 @@
      </div>

      <div class="button_box">
        <el-button size="small" @click="selectList">确认</el-button>
        <el-button @click="selectList" class="button">确认</el-button>
      </div>
    </div>
  </div>
@@ -422,7 +422,7 @@
    font-size: 30px;
    font-weight: bold;
    color: #ffffff;
    padding-bottom: 30px;
    padding-bottom: 10px;
  }
}
.form_box {
@@ -430,12 +430,6 @@
  justify-content: space-around;
  align-items: center;
  .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);
@@ -474,10 +468,13 @@
    }
  }
}
.el-button {
.button {
  background: rgba(0, 0, 0, 0.2);
  border: 2px solid #2e58cc;
  border-radius: 10px;
  border: 4px solid #2e58cc !important;
  border-radius: 20px !important;
  color: #ffffff;
  height: 64px !important;
  font-size: 28px !important;
  padding: 16px 30px !important;
}
</style>

 src/components/SYFX.vue

@@ -435,5 +435,12 @@
    font-size: 24px !important;
    padding: 16px 30px !important;
  }
  .el-button:focus,
  .el-button:hover {
    color: var(--el-button-hover-text-color);
    border-color: var(--el-button-hover-border-color);
    background-color: var(--el-button-hover-bg-color);
    outline: 0;
  }
}
</style>

 src/components/SZSZ.vue

@@ -11,7 +11,9 @@
        <el-input v-model="data.YJ" size="large" />
      </div>
      <div class="button_box">
        <el-button size="small" @click="selectList">确认</el-button>
        <el-button size="small" @click="selectList" class="button"
          >确认</el-button
        >
      </div>
    </div>
  </div>

 src/components/YCWG.vue

@@ -337,6 +337,13 @@
    font-size: 28px !important;
    padding: 16px 30px !important;
  }
  .el-button:focus,
  .el-button:hover {
    color: var(--el-button-hover-text-color);
    border-color: var(--el-button-hover-border-color);
    background-color: var(--el-button-hover-bg-color);
    outline: 0;
  }
}
// .XZboxDate {
//   width: 70%;

 src/components/dateTimePicker.vue

@@ -1,9 +1,58 @@
<template>
  <div>
    <div class="picker_box" v-show="tpData == 'd22' || tpData == 'd23'">
      <div class="pickerBox">
        <div class="picker_title">风区选择</div>
        <div class="form_box">
          <!-- <div class="inp_box XZboxDate">
            <span>风区</span>
            <el-select
              class="FQ_s"
              v-model="selectform.fetch"
              placeholder="风区"
              size="large"
              clearable
            >
              <el-option label="整个厂区" value="Main" />
              <el-option label="西部厂区" value="West" />
              <el-option label="东部厂区" value="East" />
            </el-select>
          </div> -->

          <div class="inp_box">
            <span>选择层数</span>
            <el-select
              v-model="selectform.start"
              size="large"
              placeholder="开始"
              class="CS_s"
              clearable
            >
              <el-option :label="i" :value="i" v-for="(e, i) in 50" :key="i" />
            </el-select>
            <i>-</i>
            <el-select
              v-model="selectform.end"
              size="large"
              placeholder="结束"
              class="CS_s"
              clearable
            >
              <el-option :label="e" :value="e" v-for="(e, i) in 50" :key="i" />
            </el-select>
          </div>

          <div class="button_box">
            <el-button @click="FQselectBtn">确定</el-button>
          </div>
        </div>
      </div>
    </div>
  <div class="picker_box">
    <div class="pickerBox">
      <div class="picker_title">时间选择</div>
      <div class="form_box">
        <div class="inp_box XZboxDate">
          <div class="inp_box">
          <el-date-picker
            size="large"
            v-model="selectform.value"
@@ -19,6 +68,7 @@

        <div class="button_box">
          <el-button @click="selectBtn">确定</el-button>
          </div>
        </div>
      </div>
    </div>
@@ -39,8 +89,16 @@

    let selectform = reactive({
      value: "",
      fetch: "",
      start: 0,
      end: 0,
    });

    let btnState = false;
    let CS = {
      start: "",
      end: "",
      Classify: "",
    };
    const selectBtn = () => {
      if (selectform.value) {
        // let newTimeStr = `${value.slice(0, 13)}:00:00`;
@@ -73,18 +131,33 @@

        emit("changeTime", { data: newTimeStr, week: week });
        if (props.tpData == "d2") {
          menuTool.createFC("sj", newTimeStr);
          if (!btnState) {
            return ElMessage.error("请先选择风区");
          }
          menuTool.createFC("sj", newTimeStr, CS);
        } else {
          menuTool.createWRW("sj", newTimeStr);
        }
      }
    };
    function changeTime(value) {}

    function FQselectBtn() {
      btnState = true;
      selectform.value = "";
      CS.start = selectform.start;
      CS.end = selectform.end;
      CS.Classify = selectform.fetch;
      if (selectform.start > selectform.end) {
        CS.start = selectform.end;
        CS.end = selectform.start;
      }
      menuTool.createFC("fc", "", CS);
    }
    function changeTime() {}
    return {
      selectBtn,
      changeTime,
      selectform,
      FQselectBtn,
    };
  },
};
@@ -99,7 +172,7 @@
  width: 38%;
}
.picker_box {
  width: calc(742px * 1);
  // width: calc(742px * 1.5);
  //   position: absolute;
  //   right: 70px;
  //   top: 490px;
@@ -131,6 +204,9 @@
    // justify-content: space-around;
    align-items: center;
    .inp_box {
      display: flex;
      // justify-content: space-around;
      align-items: center;
      span {
        font-size: 24px;
        font-weight: 400;
@@ -187,20 +263,34 @@
  }
  .el-button {
    background: rgba(0, 0, 0, 0.2);
    border: 4px solid #2e58cc !important;
    border-radius: 20px !important;
    border: 4px solid #2e58cc;
    border-radius: 20px;
    color: #ffffff;
    height: 64px !important;
    font-size: 28px !important;
    padding: 16px 30px !important;
    height: 64px;
    font-size: 28px;
    padding: 16px 30px;
  }
  .el-button:focus,
  .el-button:hover {
    color: var(--el-button-hover-text-color);
    border-color: var(--el-button-hover-border-color);
    background-color: var(--el-button-hover-bg-color);
    outline: 0;
  }
}
// .XZboxDate {
//   width: 70%;
//   /deep/ .el-input {
//     width: 100%;
.XZboxDate {
  margin-right: 30px;
  //   width: 460px;
  //   .el-select {
  //     width: 30%;
//   }
// }
}
.FQ_s {
  width: 160px;
}
.CS_s {
  width: 100px;
}
</style>
<style>
@media (width: 1920px) {

 src/components/fetch.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,235 @@
<template>
  <div class="picker_box">
    <div class="pickerBox">
      <div class="picker_title">风区选择</div>
      <div class="form_box">
        <div class="inp_box XZboxDate">
          <span>风区</span>
          <el-select
            class="FQ_s"
            v-model="selectform.fetch"
            placeholder="风区"
            size="large"
            clearable
          >
            <el-option label="整个厂区" value="Main" />
            <el-option label="西部厂区" value="West" />
            <el-option label="东部厂区" value="East" />
          </el-select>
        </div>

        <div class="inp_box">
          <span>选择层数</span>
          <el-select
            v-model="selectform.start"
            size="large"
            placeholder="开始"
            class="CS_s"
            clearable
            @change="startChange"
          >
            <el-option :label="i" :value="i" v-for="(e, i) in 50" :key="i" />
          </el-select>
          <i>-</i>
          <el-select
            v-model="selectform.end"
            size="large"
            placeholder="结束"
            class="CS_s"
            clearable
            @change="endChange"
          >
            <el-option :label="e" :value="e" v-for="(e, i) in 50" :key="i" />
          </el-select>
        </div>

        <div class="button_box">
          <el-button @click="selectBtn">确定</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, reactive, onMounted, watch, computed } from "vue";
import { useStore } from "vuex";
import { FormInstance, ElMessage, ElMessageBox } from "element-plus";
import menuTool from "@/assets/js/menuTool";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  props: ["tpData"],
  setup(props, { emit }) {
    const store = useStore();

    let selectform = reactive({
      fetch: "",
      start: 0,
      end: 0,
    });

    const selectBtn = () => {
      if (selectform.start > selectform.end) {
        return ElMessage.error("请检查是否有数据");
      }
    };
    const endChange = (val) => {};
    const startChange = (val) => {};
    return {
      selectBtn,

      selectform,
      startChange,
      endChange,
    };
  },
};
</script>
<style lang="less" scoped>
//@import url(); å¼•å…¥å…¬å…±cssç±»
.pickerBox {
  width: 100%;
}
.pickerBox1 {
  margin-right: 60px;
  width: 38%;
}
.picker_box {
  //   width: calc(742px * 1);
  //   position: absolute;
  //   right: 70px;
  //   top: 490px;
  //   width: calc(742px * 1.5);
  // width: 560px;
  height: calc(200px * 1);

  background: url("../assets/img/d.png") no-repeat center;
  background-size: 100% 100%;
  padding: 40px;
  padding-left: 60px;
  padding-right: 60px;
  box-sizing: border-box;
  // display: flex;
  // align-items: center;
  // justify-content: space-around;
  .picker_title {
    font-size: 30px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #ffffff;
    padding-bottom: 10px;
  }
  .picker_title_right {
    display: flex;
    justify-content: flex-end;
  }
  .form_box {
    width: 100%;
    display: flex;
    // justify-content: space-around;
    align-items: center;
    .inp_box {
      display: flex;
      // justify-content: space-around;
      align-items: center;
      span {
        font-size: 24px;
        font-weight: 400;
        color: #ffffff;
        padding-right: 10px;
        white-space: nowrap;
      }
      i {
        font-size: 24px;
        font-weight: 400;
        color: #ffffff;
        padding-right: 10px;
        padding-left: 10px;
      }
      //   :deep(.el-date-editor) {
      //     height: 64px;
      //   }
      //   .el-date-picker {
      //   }
      /deep/ .el-input__wrapper {
        height: 64px;
        // 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;
      }
    }
    :deep(.el-range-editor--large .el-range-separator) {
      font-size: 24px;
    }
    :deep(.el-input__icon),
    :deep(.el-range__icon) {
      font-size: 28px;
    }
    ::-webkit-input-placeholder {
      font-size: 24px;
    }
    :deep(.el-range-input) {
      font-size: 28px;
    }
  }
  .button_box {
    margin-left: 20px;
  }
  .button_box_right {
    display: flex;
    justify-content: flex-end;
  }
  .el-button {
    background: rgba(0, 0, 0, 0.2);
    border: 4px solid #2e58cc !important;
    border-radius: 20px !important;
    color: #ffffff;
    height: 64px !important;
    font-size: 28px !important;
    padding: 16px 30px !important;
  }
}
.XZboxDate {
  margin-right: 30px;
  //   width: 460px;
  //   .el-select {
  //     width: 30%;
  //   }
}
.FQ_s {
  width: 160px;
}
.CS_s {
  width: 100px;
}
</style>
<style>
@media (width: 1920px) {
  .el-date-range-picker {
    transform: scale(1);
  }
}

@media (width: 3840px) {
  .el-date-range-picker {
    transform: scale(1.7);
  }
}
</style>

 src/views/index.vue

@@ -26,9 +26,15 @@
          <div class="close" @click="popoutClose('QX')"></div>
          <chart></chart>
        </div>

        <date-time-picker
          :tpData="checkMenuFlag"
          v-if="checkMenuFlag == 'd2' || checkMenuFlag == 'd3'"
          v-if="
            checkMenuFlag == 'd21' ||
            checkMenuFlag == 'd22' ||
            checkMenuFlag == 'd23' ||
            checkMenuFlag == 'd3'
          "
          @changeTime="changeTime"
        ></date-time-picker>
        <div class="weather_box_c" v-show="checkMenuFlag == 'd6'">
@@ -77,6 +83,7 @@
import YCWG from "@/components/YCWG.vue";
//时间选择
import dateTimePicker from "@/components/dateTimePicker.vue";

//天气特效
import weather from "@/views/weather.vue";
//阈值设置

 src/views/menus.vue

@@ -24,10 +24,25 @@
          class="menus_btn_c_list"
          v-for="(v, j) in item.child"
          :key="j"
          @click="setMenuChildClick(v)"
          @click.stop="setMenuChildClick(v)"
          :class="{ child_Menu_Options: childMenuOptions == v.id }"
        >
          {{ v.name }}
          <div
            class="menus_btn_c_list_chlid"
            v-if="v.child"
            v-show="childMenuOptions == v.id"
          >
            <div
              class="menus_btn_c_list_chlid_list"
              v-for="(e, k) in v.child"
              :key="k"
              :class="{ child_Menu_Options: checkMenuChildFlag == e.id }"
              @click.stop="setMenuTreeChildClick(e)"
            >
              {{ e.name }}
            </div>
          </div>
        </div>
      </div>
    </div>
@@ -41,7 +56,7 @@
export default {
  setup(props, { emit }) {
    const checkMenuFlag = ref("f1");

    let checkMenuChildFlag = ref("");
    let menuOptions = ref([]);
    let childMenuOptions = ref("");
    const setMenuClick = (res) => {
@@ -52,6 +67,13 @@
            childMenuOptions.value = null;
            emit("menusData", { id: null, isActive: false });
            menuTool.clearLeftTools(res);
          }
          if (checkMenuChildFlag.value != null) {
            if (checkMenuChildFlag.value[0] == res.id[0]) {
              checkMenuChildFlag.value = null;
              // emit("menusData", { id: null, isActive: false });
              // menuTool.clearLeftTools(res);
            }
          }
        }
        res.isActive = false;
@@ -65,11 +87,36 @@
    };
    const setMenuChildClick = (res) => {
      if (childMenuOptions.value && childMenuOptions.value == res.id) {
        if (checkMenuChildFlag.value != null) {
          if (checkMenuChildFlag.value[0] == res.id[0]) {
            checkMenuChildFlag.value = null;
            emit("menusData", { id: null, isActive: false });
            menuTool.clearLeftTools(res);
          }
        }
        childMenuOptions.value = null;
        menuTool.clearLeftTools(res);
        res.isActive = false;
      } else {
        if (checkMenuChildFlag.value) {
          checkMenuChildFlag.value = null;
          emit("menusData", { id: null, isActive: false });
          menuTool.clearLeftTools(res);
        }
        childMenuOptions.value = res.id;
        menuTool.leftTools(res);
        res.isActive = true;
      }
      emit("menusData", res);
    };
    const setMenuTreeChildClick = (res) => {
      if (checkMenuChildFlag.value && checkMenuChildFlag.value == res.id) {
        checkMenuChildFlag.value = null;

        menuTool.clearLeftTools(res);
        res.isActive = false;
      } else {
        checkMenuChildFlag.value = res.id;
        menuTool.leftTools(res);
        res.isActive = true;
      }
@@ -84,6 +131,8 @@
      childMenuOptions,
      setMenuClick,
      setMenuChildClick,
      checkMenuChildFlag,
      setMenuTreeChildClick,
    };
  },
};
@@ -150,6 +199,35 @@
        line-height: 64px;
        border-radius: 5px;
        padding: 0 12px;
        position: relative;
        .menus_btn_c_list_chlid {
          position: absolute;
          width: 280px;
          // height: 200px;
          background: url("../assets/img/sj.png") no-repeat center;
          background-size: 100% 100%;
          right: -320px;
          top: 50%;
          transform: translateY(-50%);
          padding: 43px 42px 52px 56px;
          box-sizing: border-box;
          .menus_btn_c_list_chlid_list {
            width: 100%;
            font-size: 30px;
            font-family: JLinXin;
            font-weight: 600;
            color: #ffffff;
            white-space: nowrap;
            cursor: pointer;
            line-height: 64px;
            border-radius: 5px;
            text-align: center;
            // padding: 0 12px;
          }
          .menus_btn_c_list_chlid_list:hover {
            background: rgba(0, 6, 80, 0.4);
          }
        }
      }
      .menus_btn_c_list:hover {
        background: rgba(0, 6, 80, 0.4);