swOperation/src/operation/moduleNormal/controlPanel/model/MT02/index.vue

<template>
  <div :class="['control', { wrapper: wrapper }]" v-if="detail">
    <div class="control-left">
      <div class="top">
        <infoPanel></infoPanel>
      </div>
      <div class="bottom">
        <controlPanel @onSuccess="detailFun"></controlPanel>
      </div>
    </div>
    <div class="control-content" v-if="refresh">
      <div class="map" :style="{ transform: `scale(${calcSize})` }">
        <div style="display: inline-block; position: relative">
          <dataBlock
            v-if="detail.params.UpP"
            :title="detail.params.UpP.paramname"
            :data="[
              {
                value: detail.params.UpP.lastvalue,
                unit: detail.params.UpP.unit,
              },
            ]"
          ></dataBlock>
          <view style="position: absolute; right: 35%">
            <dataBlock
              v-if="detail.params.DownP"
              :title="detail.params.DownP.paramname"
              :data="[
                {
                  value: detail.params.DownP.lastvalue,
                  unit: detail.params.DownP.unit,
                },
              ]"
            ></dataBlock>
          </view>
          <img :src="imgUrl" alt="" />
          <div style="clear: both"></div>
        </div>
      </div>
      <div class="chart">
        <MyChart :options="options"></MyChart>
      </div>
      <div class="message-header">
        <customBtn
          :btnOptions="[{ label: wrapper ? '退出全屏' : '进入全屏' }]"
          :btn="true"
          style="width: 70px"
          @clickBtn="clickBtn"
        ></customBtn>
        <!-- <Message></Message> -->
      </div>
    </div>
    <div class="control-right">
      <timeControl></timeControl>
    </div>
  </div>
</template>

<script setup>
import infoPanel from "../../modules/infoPanel.vue";
import MyChart from "../../modules/MyChart.vue";
import timeControl from "./modules/timeControl.vue";
import controlPanel from "./modules/controlPanel.vue";
import customBtn from "../../modules/customBtn.vue";
import Message from "../../modules/message.vue";
import dataBlock from "../../modules/dataBlock.vue";
import updataBtn from "../../modules/updataBtn.vue";
import {
  ref,
  defineProps,
  defineEmits,
  onMounted,
  provide,
  onBeforeMount,
  onUnmounted,
  computed,
  watch,
} from "vue";
import { Modal } from "ant-design-vue";
import { onBeforeRouteUpdate, useRouter } from "vue-router";
import { useAuthStore } from "@/stores/modules/auth";
import Api from "@/api/api";
import Http from "@/api/http";
import utils from "@/utils/utils";
import { calcSizeFun, setIntervalFun } from "../../modules/util.js";

let AuthStore = useAuthStore();

let router = useRouter();
let emit = defineEmits(["onSuccess"]);
let props = defineProps({});

let refresh = ref(true);
let wrapper = ref(false);

let options = ref([
  { label: "压力历史曲线图", value: ["DownP", "UpP"], sumShow: true },
  { label: "流量历史曲线图", value: ["CumFlow"] },
]);

let detail = ref("");

let modelList = ref([
  { label: "就地模式", value: "LocalMode" },
  { label: "远程开关阀模式", value: "SwitchMode" },
  { label: "远程不利点模式", value: "DisadvantageMode" },
  { label: "恒压控制", value: "ConstantConON" },
  { label: "分时控制模式", value: "TimeConON" },
]);

provide("detail", detail);
provide("modelList", modelList);

let calcSize = ref(1);
calcSizeFun((size) => {
  calcSize.value = size;
});

let imgUrl = computed(() => {
  let arr = detail.value.attinfos.filter(
    (item) => item.usetype == "previewImage"
  );
  return arr[arr.length - 1] ? arr[arr.length - 1].url : "";
});

let clickBtn = (tag) => {
  tag.label == "进入全屏" ? (wrapper.value = true) : (wrapper.value = false);
  refresh.value = false;
  setTimeout(() => {
    refresh.value = true;
  });
};

let detailFun = async () => {
  let res = await Api.requested({
    id: "20230628084901",
    content: {
      w_deviceid: router.currentRoute.value.query.id,
    },
  });
  detail.value = res.data;

  for (let i = 1; i < 9; i++) {
    detail.value.paramvalues[`start${i}`] =
      (detail.value.paramvalues[`T${i}H`] !== ""
        ? detail.value.paramvalues[`T${i}H`] || 0
        : "-") +
      ":" +
      (detail.value.paramvalues[`T${i}M`] !== ""
        ? detail.value.paramvalues[`T${i}M`] || 0
        : "-");
    detail.value.paramvalues[`end${i}`] =
      (detail.value.paramvalues[`T${i}H1`] !== ""
        ? detail.value.paramvalues[`T${i}H1`] || 0
        : "-") +
      ":" +
      (detail.value.paramvalues[`T${i}M1`] !== ""
        ? detail.value.paramvalues[`T${i}M1`] || 0
        : "-");
    detail.value.paramcmdvalues[`start${i}`] =
      (detail.value.paramcmdvalues[`T${i}H`] !== ""
        ? detail.value.paramcmdvalues[`T${i}H`] || 0
        : "-") +
      ":" +
      (detail.value.paramcmdvalues[`T${i}M`] !== ""
        ? detail.value.paramcmdvalues[`T${i}M`] || 0
        : "-");
    detail.value.paramcmdvalues[`end${i}`] =
      (detail.value.paramcmdvalues[`T${i}H1`] !== ""
        ? detail.value.paramcmdvalues[`T${i}H1`] || 0
        : "-") +
      ":" +
      (detail.value.paramcmdvalues[`T${i}M1`] !== ""
        ? detail.value.paramcmdvalues[`T${i}M1`] || 0
        : "-");
  }

  modelList.value.forEach((item) => {
    console.log(detail.value.paramvalues[item.value]);
    if (detail.value.paramvalues[item.value] == "1") {
      detail.value.paramvalues.控制模式 = item.label;
    }
    if (detail.value.paramcmdvalues[item.value] == "1") {
      detail.value.paramcmdvalues.控制模式 = item.label;
    }
  });

  if (!detail.value.isfeedback) {
    let keys = Object.keys(detail.value.paramcmdvalues);
    keys.forEach((item) => {
      detail.value.paramcmdvalues[item] = detail.value.paramvalues[item];
    });
  }

  console.log(res.data);
};

provide("detailFun", detailFun);

//刷新数据
let timer = setIntervalFun(detailFun, router.currentRoute.value.query.id);

onMounted(() => {
  detailFun();
});
onUnmounted(() => {
  clearInterval(timer);
});
</script>

<style scoped>
* {
  box-sizing: border-box;
}
.control {
  display: flex;
  height: calc(100vh - 60px);
  width: 100%;
  padding: 10px 0;
  background: linear-gradient(
    90deg,
    #001d6a 0%,
    #0060b2 82%,
    #007bd5 100%
  ) !important;
}
.wrapper {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
  height: 100vh !important;
  padding: 20px;
}
.control .control-left {
  width: 290px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.control .control-left .top {
  width: 100%;
  height: 49.5%;
  background: rgb(0, 0, 0, 0.05);
  padding: 10px;
}
.control .control-left .bottom {
  width: 100%;
  min-width: 290px;
  height: 49.5%;
  background: rgb(0, 0, 0, 0.05);
  padding: 10px;
}

.control .control-content {
  flex: 1;
  height: 100%;
  padding: 0 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}
.control .control-content .message-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding-left: 10px;
}
.control .control-content .map {
  width: 100%;
  height: calc(100vh - 255px);
  position: relative;
  display: flex;
  align-items: center;
  width: 684px;
  padding: 0 70px;
  margin: auto;
}
.control .control-content .map img {
  width: 100%;
  object-fit: scale-down;
  z-index: 1;
}

.control .control-content .chart {
  width: 100%;
  height: 255px;
  background: rgb(0, 0, 0, 0.05);
  padding: 0 10px 10px 0;
}

.control .control-right {
  width: 272px;
  height: 100%;
  background: rgb(0, 0, 0, 0.05);
  padding: 10px;
}
.stop {
  /* border-radius: 50%;
  background: #ffffff; */
  position: absolute;
  top: -30px;
  right: -60px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/deep/ .stop .ant-btn {
  border-radius: 50%;
  width: 60px;
  height: 60px;
  font-size: 12px;
}
</style>