调整样式

src/system/IOT/controlPanel/model/MT02/index.vue

@@ -15,8 +15,6 @@
           <dataBlock
             v-if="detail.params.UpP"
             :title="detail.params.UpP.paramname"
-            :top="0"
-            :left="50"
             :data="[
               {
                 value: detail.params.UpP.lastvalue,
@@ -24,29 +22,25 @@
               },
             ]"
           ></dataBlock>
-          <dataBlock
-            v-if="detail.params.DownP"
-            :title="detail.params.DownP.paramname"
-            :top="0"
-            :left="400"
-            :data="[
-              {
-                value: detail.params.DownP.lastvalue,
-                unit: detail.params.DownP.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="[
-            { label: '压力历史曲线图', value: ['DownP', 'UpP'], sumShow: true },
-            { label: '流量历史曲线图', value: ['CumFlow'] },
-          ]"
-        ></MyChart>
+        <MyChart :options="options"></MyChart>
       </div>
       <div class="message-header">
         <customBtn
@@ -65,110 +59,155 @@
 </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'
+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 AuthStore = useAuthStore()
+let router = useRouter();
+let emit = defineEmits(["onSuccess"]);
+let props = defineProps({});
 
-let router = useRouter()
-let emit = defineEmits(['onSuccess'])
-let props = defineProps({})
+let refresh = ref(true);
+let wrapper = ref(false);
 
-let refresh = ref(true)
-let wrapper = ref(false)
+let options = ref([
+  { label: "压力历史曲线图", value: ["DownP", "UpP"], sumShow: true },
+  { label: "流量历史曲线图", value: ["CumFlow"] },
+]);
 
-let detail = ref('')
+let detail = ref("");
 
 let modelList = ref([
-  {label:'就地模式',value:'LocalMode'},
-  {label:'远程开关阀模式',value:'SwitchMode'},
-  {label:'远程不利点模式',value:'DisadvantageMode'},
-  {label:'恒压控制',value:'ConstantConON'},
-  {label:'分时控制模式',value:'TimeConON'},
-])
+  { label: "就地模式", value: "LocalMode" },
+  { label: "远程开关阀模式", value: "SwitchMode" },
+  { label: "远程不利点模式", value: "DisadvantageMode" },
+  { label: "恒压控制", value: "ConstantConON" },
+  { label: "分时控制模式", value: "TimeConON" },
+]);
 
-provide('detail',detail)
-provide('modelList',modelList)
+provide("detail", detail);
+provide("modelList", modelList);
 
-let calcSize = ref(1)
+let calcSize = ref(1);
 calcSizeFun((size) => {
-  calcSize.value = size
-})
+  calcSize.value = size;
+});
 
 let clickBtn = (tag) => {
-  tag.label == '进入全屏' ? wrapper.value = true : wrapper.value = false
-  refresh.value = false
+  tag.label == "进入全屏" ? (wrapper.value = true) : (wrapper.value = false);
+  refresh.value = false;
   setTimeout(() => {
-    refresh.value = true
-  })
-}
+    refresh.value = true;
+  });
+};
 
 let imgUrl = computed(() => {
-  let arr = detail.value.attinfos.filter(item => item.usetype == 'previewImage')
-  return arr[arr.length - 1] ? arr[arr.length - 1].url : ''
-})
+  let arr = detail.value.attinfos.filter(
+    (item) => item.usetype == "previewImage"
+  );
+  return arr[arr.length - 1] ? arr[arr.length - 1].url : "";
+});
 
 let detailFun = async () => {
   let res = await Api.requested({
-    "id": "20230628084901",
-    "content": {
-      "w_deviceid": router.currentRoute.value.query.id
-    }
-  })
-  detail.value = res.data
+    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 : '-')
+  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 => {
+  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.paramvalues[item.value] == "1") {
+      detail.value.paramvalues.控制模式 = item.label;
     }
-    if (detail.value.paramcmdvalues[item.value] == '1') {
-      detail.value.paramcmdvalues.控制模式 = 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]
-    })
+    let keys = Object.keys(detail.value.paramcmdvalues);
+    keys.forEach((item) => {
+      detail.value.paramcmdvalues[item] = detail.value.paramvalues[item];
+    });
   }
 
   console.log(res.data);
-  detail.value.isSite = AuthStore.nowAccount.sitename == detail.value.sitename //是否本站点设备
-}
+  detail.value.isSite = AuthStore.nowAccount.sitename == detail.value.sitename; //是否本站点设备
+};
 
-provide('detailFun',detailFun)
+provide("detailFun", detailFun);
 
-let timer = setIntervalFun(detailFun,router.currentRoute.value.query.id)
+let timer = setIntervalFun(detailFun, router.currentRoute.value.query.id);
 
-onMounted( () => {
-  detailFun()
-})
+onMounted(() => {
+  detailFun();
+});
 onUnmounted(() => {
-  clearInterval(timer)
-})
+  clearInterval(timer);
+});
 </script>
 
 <style scoped>