燕山石化溯源三维电子沙盘-【前端】-Web
surprise
2024-04-09 71f13ae626284e476a300b08a5f9e2c0f188544c
src/views/index.vue
@@ -5,54 +5,59 @@
    <transition name="el-zoom-in-center" v-show="showlogo">
      <menus @menusData="menusData"></menus>
    </transition>
    <transition name="el-zoom-in-top" v-show="showlogo">
      <div class="right_box">
        <poiList></poiList>
        <BGDC v-show="checkMenuFlag == 'a3'"></BGDC>
        <SYFX
          :SYPOIname="POIName"
          @toggleFK="toggleFK"
          v-if="checkMenuFlag == 'a2'"
        ></SYFX>
        <SYFK
          :SYPOIname="POIName"
          :syfkData="syfkData"
          v-if="showFk"
          @FKclose="FKclose"
        ></SYFK>
        <YCWG v-show="checkMenuFlag == 'b2'"></YCWG>
        <div class="chart_box" v-if="chart_isshow">
          <div class="popout_title">曲线统计图</div>
          <div class="close" @click="popoutClose('QX')"></div>
          <chart></chart>
        </div>
        <date-time-picker
          :tpData="checkMenuFlag"
          v-if="checkMenuFlag == 'd2' || checkMenuFlag == 'd3'"
          @changeTime="changeTime"
        ></date-time-picker>
        <div class="weather_box_c" v-show="checkMenuFlag == 'd6'">
          <div class="popout_title">天气特效</div>
          <!-- <div class="close" @click="popoutClose('HJ')"></div> -->
          <weather></weather>
        </div>
        <SZSZ v-show="checkMenuFlag == 'e2'"></SZSZ>
        <div class="content">
          <div class="left">
            <dayzdmax v-if="checkMenuFlag == 'f1'"></dayzdmax>
            <weekzdmax v-if="checkMenuFlag == 'f1'"></weekzdmax>
          </div>
          <div class="right">
            <BGDC v-show="checkMenuFlag == 'a3'"></BGDC>
            <report-list :menusId="checkMenuFlag" v-if="checkMenuFlag == 'a4' ||
      checkMenuFlag == 'a5' ||
      checkMenuFlag == 'a6'
      "></report-list>
            <SYFX :SYPOIname="POIName" @toggleFK="toggleFK" v-if="checkMenuFlag == 'a2'"></SYFX>
            <SYFK :SYPOIname="POIName" :syfkData="syfkData" v-if="showFk" @FKclose="FKclose"></SYFK>
            <YCWG v-if="checkMenuFlag == 'b2'"></YCWG>
            <div class="chart_box" v-if="chart_isshow">
              <div class="popout_title">曲线统计图</div>
              <div class="close" @click="popoutClose('QX')"></div>
              <chart></chart>
            </div>
        <BJlist v-if="checkMenuFlag == 'c3'"></BJlist>
        <YJlist v-if="checkMenuFlag == 'c2'"></YJlist>
        <gjfx v-if="checkMenuFlag == 'f1'"></gjfx>
        <zdmax v-if="checkMenuFlag == 'f1'"></zdmax>
            <date-time-picker :tpData="checkMenuFlag" v-if="checkMenuFlag == 'd21' ||
      checkMenuFlag == 'd22' ||
      checkMenuFlag == 'd23' ||
      checkMenuFlag == 'd3'
      " @changeTime="changeTime"></date-time-picker>
            <div class="weather_box_c" v-show="checkMenuFlag == 'd6'">
              <div class="popout_title">天气特效</div>
              <!-- <div class="close" @click="popoutClose('HJ')"></div> -->
              <weather></weather>
            </div>
            <SZSZ v-show="checkMenuFlag == 'e2'"></SZSZ>
            <BJlist v-if="checkMenuFlag == 'c3'"></BJlist>
            <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>
    </transition>
    <div class="video_box" v-show="checkMenuFlag == 'e3'">
      <video
        :src="videoUrl"
        controls="controls"
        autoplay
        muted
        style="width: 100%"
      ></video>
    <div class="video_box" v-if="checkMenuFlag == 'e3' || checkMenuFlag == 'e5'">
      <video :src="videoUrl" controls="controls" autoplay muted style="width: 100%"></video>
    </div>
    <yjxq v-if="yjwryisshow"></yjxq>
  </div>
</template>
@@ -68,6 +73,7 @@
import menus from "@/views/menus.vue";
//智能报告
import BGDC from "@/components/BGDC.vue";
import reportList from "@/components/reportList.vue";
//溯源分析
import SYFX from "@/components/SYFX.vue";
import SYFK from "@/components/SYFK.vue";
@@ -77,6 +83,7 @@
import YCWG from "@/components/YCWG.vue";
//时间选择
import dateTimePicker from "@/components/dateTimePicker.vue";
//天气特效
import weather from "@/views/weather.vue";
//阈值设置
@@ -84,11 +91,15 @@
//预警报警
import BJlist from "@/components/BJlist.vue";
import YJlist from "@/components/YJlist.vue";
import PreCusPage from "@/components/PreCusPage.vue";
//点位列表
import poiList from "@/components/poiList.vue";
//统计图
import gjfx from "@/components/xgzs/gjfx.vue";
import zdmax from "@/components/xgzs/zdmax.vue";
import dayzdmax from "@/components/xgzs/dayzdmax.vue";
import weekzdmax from "@/components/xgzs/weekzdmax.vue";
import yjxq from '@/components/yjxq.vue';
import {
  queryWeatherList,
  queryLocaltion,
@@ -96,6 +107,7 @@
  getRunAlarm,
  getRunWarning,
} from "@/api/api.js";
import { tr } from 'element-plus/es/locale';
export default {
  components: {
    headerBox,
@@ -113,9 +125,15 @@
    poiList,
    gjfx,
    zdmax,
    reportList,
    dayzdmax,
    weekzdmax,
    PreCusPage,
    yjxq
  },
  setup(props, { emit }) {
    const store = useStore();
    const checkMenuFlag = ref("f1");
    let POIName = ref("");
    let syfkData = reactive({
@@ -126,6 +144,7 @@
    });
    const showFk = ref(false);
    let chart_isshow = ref(false);
    let yjwryisshow = ref(false);
    let data = reactive({
      histogram: null,
      HeatMap: null,
@@ -186,6 +205,28 @@
      } else {
        checkMenuFlag.value = null;
      }
      if (res.id == "e4") {
        window.open(
          `${window.location.href.split("#")[0]
          }config/燕山石化系统功能操作文档.pdf`
        );
      }
      if (res.id == "e3") {
        videoUrl.value = window.location.href.split("#")[0] + videoJS;
      }
      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) => {
@@ -225,6 +266,7 @@
    const changeTime = (res) => {
      console.log(res);
    };
    getPOI();
    // menuTool.bjthis();
    onMounted(() => {
@@ -254,7 +296,15 @@
      },
      { deep: true, immediate: true }
    );
    watch(
      () => store.state.YJXQFlag,
      (nVal, oVal) => {
        console.log("sdasd", nVal)
        yjwryisshow.value = nVal;
      },
      { deep: true, immediate: true }
    );
    return {
      menusData,
      checkMenuFlag,
@@ -269,6 +319,8 @@
      showlogo,
      changeTime,
      videoUrl,
      yjwryisshow
    };
  },
};
@@ -280,6 +332,7 @@
  height: 100vh;
  position: relative;
  overflow: hidden;
  .right_box {
    position: absolute;
    right: 70px;
@@ -290,14 +343,23 @@
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    .content {
      display: flex;
      justify-content: space-between;
      align-content: center;
    }
  }
  .right_box::-webkit-scrollbar {
    width: 8px;
  }
  .right_box::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.2);
  }
  .right_box::-webkit-scrollbar-track {
    border-radius: 0;
    background: rgba(0, 0, 0, 0);
@@ -312,6 +374,7 @@
    // background: #000;
  }
  .chart_box {
    // position: absolute;
    // right: 70px;
@@ -324,6 +387,7 @@
    background: url("../assets/img/zbg.png") no-repeat center;
    background-size: 100% 100%;
    position: relative;
    .close {
      width: 22px;
      height: 22px;
@@ -334,6 +398,7 @@
      right: 50px;
      top: 50px;
    }
    .popout_title {
      font-size: 35px;
      font-weight: bold;
@@ -344,6 +409,7 @@
      // top: 50px;
    }
  }
  .weather_box_c {
    // position: absolute;
    // right: 20px;
@@ -355,6 +421,7 @@
    box-sizing: border-box;
    background: url("../assets/img/bgk.png") no-repeat center;
    background-size: 100% 100%;
    .popout_title {
      font-size: 30px;
      font-weight: bold;
@@ -365,12 +432,14 @@
      // top: 50px;
    }
  }
  .video_box {
    width: 50%;
    bottom: 21%;
    position: absolute;
    left: 23%;
  }
  .video_box_close {
    width: 100%;
    background: #333333;