燕山石化溯源三维电子沙盘-【前端】-Web
surprise
2024-04-09 71f13ae626284e476a300b08a5f9e2c0f188544c
src/views/index.vue
@@ -16,25 +16,12 @@
          </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>
            <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>
@@ -42,16 +29,11 @@
              <chart></chart>
            </div>
            <date-time-picker
              :tpData="checkMenuFlag"
              v-if="
                checkMenuFlag == 'd21' ||
                checkMenuFlag == 'd22' ||
                checkMenuFlag == 'd23' ||
                checkMenuFlag == 'd3'
              "
              @changeTime="changeTime"
            ></date-time-picker>
            <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> -->
@@ -64,22 +46,18 @@
            <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-if="checkMenuFlag == 'e3' || checkMenuFlag == 'e5'"
    >
      <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>
@@ -121,6 +99,7 @@
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,
@@ -128,6 +107,7 @@
  getRunAlarm,
  getRunWarning,
} from "@/api/api.js";
import { tr } from 'element-plus/es/locale';
export default {
  components: {
    headerBox,
@@ -148,10 +128,12 @@
    reportList,
    dayzdmax,
    weekzdmax,
    PreCusPage
    PreCusPage,
    yjxq
  },
  setup(props, { emit }) {
    const store = useStore();
    const checkMenuFlag = ref("f1");
    let POIName = ref("");
    let syfkData = reactive({
@@ -162,6 +144,7 @@
    });
    const showFk = ref(false);
    let chart_isshow = ref(false);
    let yjwryisshow = ref(false);
    let data = reactive({
      histogram: null,
      HeatMap: null,
@@ -224,8 +207,7 @@
      }
      if (res.id == "e4") {
        window.open(
          `${
            window.location.href.split("#")[0]
          `${window.location.href.split("#")[0]
          }config/燕山石化系统功能操作文档.pdf`
        );
      }
@@ -284,6 +266,7 @@
    const changeTime = (res) => {
      console.log(res);
    };
    getPOI();
    // menuTool.bjthis();
    onMounted(() => {
@@ -313,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,
@@ -328,6 +319,8 @@
      showlogo,
      changeTime,
      videoUrl,
      yjwryisshow
    };
  },
};
@@ -339,6 +332,7 @@
  height: 100vh;
  position: relative;
  overflow: hidden;
  .right_box {
    position: absolute;
    right: 70px;
@@ -349,19 +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);
@@ -376,6 +374,7 @@
    // background: #000;
  }
  .chart_box {
    // position: absolute;
    // right: 70px;
@@ -388,6 +387,7 @@
    background: url("../assets/img/zbg.png") no-repeat center;
    background-size: 100% 100%;
    position: relative;
    .close {
      width: 22px;
      height: 22px;
@@ -398,6 +398,7 @@
      right: 50px;
      top: 50px;
    }
    .popout_title {
      font-size: 35px;
      font-weight: bold;
@@ -408,6 +409,7 @@
      // top: 50px;
    }
  }
  .weather_box_c {
    // position: absolute;
    // right: 20px;
@@ -419,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;
@@ -429,12 +432,14 @@
      // top: 50px;
    }
  }
  .video_box {
    width: 50%;
    bottom: 21%;
    position: absolute;
    left: 23%;
  }
  .video_box_close {
    width: 100%;
    background: #333333;