fw01详情页布局调整

src/operation/moduleNormal/controlPanel/model/FW01/index.vue

@@ -4,9 +4,10 @@
     :center="latlng"
     :zoom="zoom"
     :scroll-wheel-zoom="true"
-    @ready="ready">
+    @ready="ready"
+  >
   </baidu-map>
-  <div :class="['control',{'wrapper':wrapper}]" v-if="detail">
+  <div :class="['control', { wrapper: wrapper }]" v-if="detail">
     <div class="control-left">
       <div class="top">
         <infoPanel></infoPanel>
@@ -17,53 +18,87 @@
     </div>
     <div class="control-content" v-if="refresh">
       <div class="network">
-        <span style="color:#ffffff;font-size: 10px;">信号强度：</span>
+        <span style="color: #ffffff; font-size: 10px">信号强度：</span>
         <network :num="Math.abs(detail.paramvalues.U004)"></network>
       </div>
-      <div class="lamp-box" style="z-index: 9;">
-        <div style="position: relative;">
-          <div v-if="detail.params.A005.lastvalue == 1" style="position: absolute;left: 85px;top: 18px;"><customBtn :btnOptions="[{label:'复位',icon:false}]" :icon1="false" @click="back"></customBtn></div>
-          <Lamp :isTrue="detail.params.A005 ? detail.params.A005.lastvalue == 1 : false">{{ detail.params.A005 && detail.params.A005.paramname }}</Lamp>
-          <Lamp :isTrue="detail.params.A002 ? detail.params.A002.lastvalue == 1 : false">{{ detail.params.A002 && detail.params.A002.paramname }}</Lamp>
+      <div class="lamp-box" style="z-index: 9">
+        <div style="position: relative">
+          <div
+            v-if="detail.params.A005.lastvalue == 1"
+            style="position: absolute; left: 85px; top: 18px"
+          >
+            <customBtn
+              :btnOptions="[{ label: '复位', icon: false }]"
+              :icon1="false"
+              @click="back"
+            ></customBtn>
+          </div>
+          <Lamp
+            :isTrue="
+              detail.params.A005 ? detail.params.A005.lastvalue == 1 : false
+            "
+            >{{ detail.params.A005 && detail.params.A005.paramname }}</Lamp
+          >
+          <Lamp
+            :isTrue="
+              detail.params.A002 ? detail.params.A002.lastvalue == 1 : false
+            "
+            >{{ detail.params.A002 && detail.params.A002.paramname }}</Lamp
+          >
         </div>
       </div>
-      <div class="map" :style="{transform:`scale(${calcSize})`}">
-        <div style="display: inline-block;position: relative">
-          <dataBlock 
+      <div class="map">
+        <img class="image" :src="imgUrl" mode="aspectFit" />
+        <div class="data-block-box">
+          <dataBlock
             v-if="detail.params.U002"
-            :title="detail.params.U002.paramname" 
-            :top="20"  
-            :left="420" 
-            :data="[{value:detail.params.U002.lastvalue,unit:detail.params.U002.unit}]"
+            :title="detail.params.U002.paramname"
+            :data="[
+              {
+                value: detail.params.U002.lastvalue,
+                unit: detail.params.U002.unit,
+              },
+            ]"
           ></dataBlock>
-          <dataBlock 
+          <dataBlock
             v-if="detail.params.U003"
-            :title="detail.params.U003.paramname" 
-            :top="110" 
-            :left="420" 
-            :data="[{value:detail.params.U003.lastvalue,unit:detail.params.U003.unit}]"
+            :title="detail.params.U003.paramname"
+            :data="[
+              {
+                value: detail.params.U003.lastvalue,
+                unit: detail.params.U003.unit,
+              },
+            ]"
           ></dataBlock>
-          <img :src="imgUrl" alt="">
-          <div style="clear: both;"></div>
         </div>
       </div>
-      
-      
       <div class="chart">
-        <MyChart ref="chart" :options="[{label:'阀门开度',value:['U002'],sumShow:true}]"></MyChart>
+        <MyChart
+          ref="chart"
+          :options="[{ label: '阀门开度', value: ['U002'], sumShow: true }]"
+        ></MyChart>
       </div>
       <div class="message-header">
-        <customBtn :btnOptions="[{label:wrapper ? '退出全屏' : '进入全屏'}]" :btn="true" style="width:70px" @clickBtn="clickBtn"></customBtn>
+        <customBtn
+          :btnOptions="[{ label: wrapper ? '退出全屏' : '进入全屏' }]"
+          :btn="true"
+          style="width: 70px"
+          @clickBtn="clickBtn"
+        ></customBtn>
         <!-- <Message></Message> -->
       </div>
     </div>
     <div class="control-right" v-if="false">
       <div class="header">
-        <span style="color:#ffffff">上传日志</span>
+        <span style="color: #ffffff">上传日志</span>
       </div>
       <div class="upinfo" v-load-directive="historyLoad">
         <div class="upinfo-wrapper" v-if="uphistory.length">
-          <div class="upinfo-item" v-for="(item) in uphistory" :key="item.rowindex">
+          <div
+            class="upinfo-item"
+            v-for="item in uphistory"
+            :key="item.rowindex"
+          >
             <div class="name">{{ item.createdate }}</div>
             <div class="value">
               <a-tooltip>
@@ -82,176 +117,201 @@
 </template>
 
 <script setup>
-import infoPanel from '../../modules/infoPanel.vue'
-import MyChart from '../../modules/MyChart.vue'
-import customBtn from '../../modules/customBtn.vue'
-import Lamp from '../../modules/lamp.vue'
-import dataBlock from '../../modules/dataBlock.vue'
-import controlPanel from './modules/controlPanel.vue'
-import network from '@/operation/moduleNormal/controlPanel/modules/network.vue'
-import Map from '@/operation/moduleNormal/equipmentMag/modules/map.vue'
-import {ref, defineProps, defineEmits, onMounted, provide, onBeforeMount, onUnmounted, computed, watch, nextTick} 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 { Empty } from 'ant-design-vue';
+import infoPanel from "../../modules/infoPanel.vue";
+import MyChart from "../../modules/MyChart.vue";
+import customBtn from "../../modules/customBtn.vue";
+import Lamp from "../../modules/lamp.vue";
+import dataBlock from "./modules/dataBlock.vue";
+import controlPanel from "./modules/controlPanel.vue";
+import network from "@/operation/moduleNormal/controlPanel/modules/network.vue";
+import Map from "@/operation/moduleNormal/equipmentMag/modules/map.vue";
+import {
+  ref,
+  defineProps,
+  defineEmits,
+  onMounted,
+  provide,
+  onBeforeMount,
+  onUnmounted,
+  computed,
+  watch,
+  nextTick,
+} 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 { Empty } from "ant-design-vue";
 const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;
 
-let AuthStore = useAuthStore()
-let map1 = ref()
-
-let router = useRouter()
-let emit = defineEmits(['onSuccess'])
-let props = defineProps({})
+let AuthStore = useAuthStore();
+let map1 = ref();
 
-let refresh = ref(true)
-let wrapper = ref(false)
+let router = useRouter();
+let emit = defineEmits(["onSuccess"]);
+let props = defineProps({});
 
-let detail = ref('')
+let refresh = ref(true);
+let wrapper = ref(false);
 
-provide('detail',detail)
+let detail = ref("");
 
-let calcSize = ref(1)
-calcSizeFun((size) => {
-  calcSize.value = size
-})
+provide("detail", detail);
 
 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 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
-  })
-}
-let chart = ref()
+    refresh.value = true;
+  });
+};
+let chart = ref();
 
-let uphistory = ref([])
+let uphistory = ref([]);
 let upParam = ref({
-  id:20230701132202,
+  id: 20230701132202,
   content: {
-    type:1,
-    pageNumber:1,
-    pageSize:20,
-    w_deviceid:router.currentRoute.value.query.id
-  }
-})
+    type: 1,
+    pageNumber: 1,
+    pageSize: 20,
+    w_deviceid: router.currentRoute.value.query.id,
+  },
+});
 
 let back = async () => {
   Modal.confirm({
-  title:'确定复位吗?',
-  async onOk () {
-    let functions = detail.value.function.开度提醒复位
-    let res = await Api.requested({
-      "id": "20230627163701",
-      "content": {
-        "w_deviceid": router.currentRoute.value.query.id,
-        "w_functionid": functions.w_functionid,
-        "params": {
-          A005:0
-        }
-      }
-    })
-    utils.message(res,'复位成功',async () => {
-      emit('onSuccess')
-    })
-  }
-  })
-  
-}
+    title: "确定复位吗?",
+    async onOk() {
+      let functions = detail.value.function.开度提醒复位;
+      let res = await Api.requested({
+        id: "20230627163701",
+        content: {
+          w_deviceid: router.currentRoute.value.query.id,
+          w_functionid: functions.w_functionid,
+          params: {
+            A005: 0,
+          },
+        },
+      });
+      utils.message(res, "复位成功", async () => {
+        emit("onSuccess");
+      });
+    },
+  });
+};
 
 let detailFun = async () => {
   let res = await Api.requested({
-    "id": "20230628084901",
-    "content": {
-      "w_deviceid": router.currentRoute.value.query.id
-    }
-  })
-  detail.value = res.data
-  detail.value.isSite = AuthStore.nowAccount.sitename == detail.value.sitename //是否本站点设备
+    id: "20230628084901",
+    content: {
+      w_deviceid: router.currentRoute.value.query.id,
+    },
+  });
+  detail.value = res.data;
+  detail.value.isSite = AuthStore.nowAccount.sitename == detail.value.sitename; //是否本站点设备
 
   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];
+    });
   }
+};
 
-}
-
-provide('detailFun',detailFun)
+provide("detailFun", detailFun);
 
-let address = ref('')
+let address = ref("");
 let ready = async () => {
-  address.value = detail.value.paramvalues.Longitude && detail.value.paramvalues.Latitude ? await utils.getLocation({lng:detail.value.paramvalues.Longitude,lat:detail.value.paramvalues.Latitude}) : '--'
-  console.log(address,'地址');
-}
+  address.value =
+    detail.value.paramvalues.Longitude && detail.value.paramvalues.Latitude
+      ? await utils.getLocation({
+          lng: detail.value.paramvalues.Longitude,
+          lat: detail.value.paramvalues.Latitude,
+        })
+      : "--";
+  console.log(address, "地址");
+};
 
 let vLoadDirective = {
-  mounted (el,binding) {
-    let tableWarp = el
-    function handleFun (e) {
-      if (tableWarp.scrollTop + tableWarp.clientHeight >= tableWarp.scrollHeight) {
-        binding.value()
+  mounted(el, binding) {
+    let tableWarp = el;
+    function handleFun(e) {
+      if (
+        tableWarp.scrollTop + tableWarp.clientHeight >=
+        tableWarp.scrollHeight
+      ) {
+        binding.value();
       }
     }
-    tableWarp.addEventListener('scroll',handleFun)
-    el.tableWarp = tableWarp
-    el.handleFun = handleFun
+    tableWarp.addEventListener("scroll", handleFun);
+    el.tableWarp = tableWarp;
+    el.handleFun = handleFun;
   },
   unmounted(el) {
-    el.tableWarp.removeEventListener('scroll',el.handleFun)
+    el.tableWarp.removeEventListener("scroll", el.handleFun);
   },
-}
+};
 
-let TotalPage = ref(0)
-let loading = ref(false)
+let TotalPage = ref(0);
+let loading = ref(false);
 let historyLoad = () => {
-  if (upParam.value.content.pageNumber == TotalPage.value || loading.value == true) return
-  upParam.value.content.pageNumber += 1
+  if (
+    upParam.value.content.pageNumber == TotalPage.value ||
+    loading.value == true
+  )
+    return;
+  upParam.value.content.pageNumber += 1;
   console.log(upParam.value);
-  getHistoryData()
-}
+  getHistoryData();
+};
 
 let getHistoryData = async () => {
   return;
-  loading.value = true
-  upParam.value.content.timer = new Date().getTime()
-  let res = await Api.requested(upParam.value)
+  loading.value = true;
+  upParam.value.content.timer = new Date().getTime();
+  let res = await Api.requested(upParam.value);
   console.log(res);
-  uphistory.value = upParam.value.content.pageNumber == 1 ? res.data : uphistory.value.concat(res.data)
-  TotalPage.value = res.pageTotal
+  uphistory.value =
+    upParam.value.content.pageNumber == 1
+      ? res.data
+      : uphistory.value.concat(res.data);
+  TotalPage.value = res.pageTotal;
   setTimeout(() => {
-    loading.value = false
-  },1500)
-  console.log(uphistory.value,'上传日志信息');
-}
- 
+    loading.value = false;
+  }, 1500);
+  console.log(uphistory.value, "上传日志信息");
+};
+
 //刷新数据
-let timer = setIntervalFun([detailFun,getHistoryData],router.currentRoute.value.query.id)
+let timer = setIntervalFun(
+  [detailFun, getHistoryData],
+  router.currentRoute.value.query.id
+);
 
-onMounted( () => {
-  detailFun()
-  getHistoryData()
-})
+onMounted(() => {
+  detailFun();
+  getHistoryData();
+});
 onUnmounted(() => {
-  clearInterval(timer)
-})
+  clearInterval(timer);
+});
 </script>
 
 <style scoped>
 /deep/.ant-empty-description {
   color: #ffffff !important;
 }
-*{
+* {
   box-sizing: border-box;
 }
 .control {
@@ -259,7 +319,12 @@ onUnmounted(() => {
   height: calc(100vh - 115px);
   width: 100%;
   padding: 10px 0;
-  background: linear-gradient(90deg, #001D6A 0%, #0060B2 82%, #007BD5 100%) !important;
+  background: linear-gradient(
+    90deg,
+    #001d6a 0%,
+    #0060b2 82%,
+    #007bd5 100%
+  ) !important;
 }
 .wrapper {
   position: absolute;
@@ -275,24 +340,24 @@ onUnmounted(() => {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-} 
+}
 .control .control-left .top {
   width: 100%;
   height: 59.5%;
-  background:  rgb(0, 0, 0,.05);
+  background: rgb(0, 0, 0, 0.05);
   padding: 10px;
 }
 .control .control-left .bottom {
   width: 100%;
   min-width: 290px;
   height: 39.5%;
-  background:  rgb(0, 0, 0,.05);
+  background: rgb(0, 0, 0, 0.05);
   padding: 10px;
   margin-top: 20px;
 }
 
 .control .control-content {
-  flex:1;
+  flex: 1;
   height: 100%;
   padding: 0 10px;
   display: flex;
@@ -311,34 +376,43 @@ onUnmounted(() => {
   width: 100%;
   padding-left: 10px;
 }
+
 .control .control-content .map {
   width: 100%;
-  height: calc(100vh - 245px);
-  position: relative;
+  height: 100%;
   display: flex;
+  justify-content: center;
   align-items: center;
-  width: 684px;
-  padding: 10px 70px 0 70px;
-  margin: auto;
+  margin-left: -18%;
 }
-.control .control-content .map img {
+
+.control .control-content .map .image {
   width: 100%;
-  object-fit: scale-down;
-  z-index: 1;
-  margin-bottom: 30px;
 }
 
+.control .control-content .map .data-block-box {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  min-height: 130px;
+  height: 20%;
+  max-height: 150px;
+  width: 8%;
+  min-width: 140px;
+  margin-left: -30%;
+  transform: scale(1.8, 1.8);
+}
 .control .control-content .chart {
   width: 100%;
   height: 255px;
-  background:  rgb(0, 0, 0,.05);
+  background: rgb(0, 0, 0, 0.05);
   padding: 0 10px 10px 0;
 }
 
 .control .control-right {
   width: 272px;
   height: 100%;
-  background:  rgb(0, 0, 0,.05);
+  background: rgb(0, 0, 0, 0.05);
   padding: 10px;
 }
 
@@ -354,7 +428,7 @@ onUnmounted(() => {
 .control .control-right .upinfo .upinfo-item .name {
   font-size: 12px;
   color: #ffffff;
-  background: rgb(255, 225, 255,.25);
+  background: rgb(255, 225, 255, 0.25);
   padding: 0 10px;
   width: 100px;
   text-align: center;
@@ -365,8 +439,8 @@ onUnmounted(() => {
 }
 .control .control-right .upinfo .upinfo-item .value {
   font-size: 12px;
-  color:#16FFF6;
-  background: rgb(255, 225, 255,.10);
+  color: #16fff6;
+  background: rgb(255, 225, 255, 0.1);
   padding: 0 10px;
   flex: 100;
   overflow: hidden;
@@ -389,14 +463,14 @@ onUnmounted(() => {
 .info .info-item .name {
   font-size: 12px;
   color: #ffffff;
-  background: rgb(255, 225, 255,.25);
+  background: rgb(255, 225, 255, 0.25);
   padding: 0 10px;
   width: 100px;
 }
 .info .info-item .value {
   font-size: 12px;
-  color:#16FFF6;
-  background: rgb(255, 225, 255,.10);
+  color: #16fff6;
+  background: rgb(255, 225, 255, 0.1);
   padding: 0 10px;
   flex: 100;
   text-align: right;
@@ -412,14 +486,14 @@ onUnmounted(() => {
   margin-bottom: 0px !important;
 }
 /deep/.ant-btn-background-ghost:hover {
-  border-color: #16FFF6 !important;
-  color: #16FFF6 !important;
-  background: rgb(22,255,246,.30) !important;
+  border-color: #16fff6 !important;
+  color: #16fff6 !important;
+  background: rgb(22, 255, 246, 0.3) !important;
 }
 .lamp-box {
   position: absolute;
-  left:30px;
-  top:80px;
+  left: 30px;
+  top: 80px;
   margin: 70px 0 0 20px;
   transform: scale(0.9);
 }
@@ -427,7 +501,7 @@ onUnmounted(() => {
   display: flex;
   align-items: center;
   position: absolute;
-  left:50px;
-  top:100px;
+  left: 50px;
+  top: 100px;
 }
 </style>

src/operation/moduleNormal/controlPanel/model/FW01/modules/dataBlock.vue

@@ -0,0 +1,63 @@
+<template>
+  <div>
+    <div class="data-block">
+      <div class="title" v-if="title">{{ title }}</div>
+      <div
+        class="content"
+        v-if="!Object.keys($slots).filter((item) => item != 'handle').length"
+      >
+        <div class="item" v-for="(item, index) in data">
+          <span class="item-title" v-if="item.title">{{ item.title }}</span>
+          <div class="value">
+            <span :style="[{ fontSize: item.fontSize }]">{{ item.value }}</span>
+            <span>{{ item.unit }}</span>
+          </div>
+        </div>
+        <slot name="handle"></slot>
+      </div>
+      <div v-else>
+        <slot></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, defineProps, defineEmits } from "vue";
+let emit = defineEmits([]);
+let props = defineProps(["title", "data"]);
+</script>
+
+<style scoped>
+* {
+  box-sizing: border-box;
+}
+
+.data-block {
+  background: rgba(0, 0, 0, 0.25);
+  width: 100%;
+  color: #ffffff;
+}
+
+.title {
+  background: linear-gradient(-60deg, transparent 10%, rgba(255, 164, 6));
+  padding: 2px 8px 2px 8px;
+  margin-bottom: 3px;
+  font-size: 12px;
+}
+.content {
+  padding: 0 5px 5px 5px;
+}
+.content .item {
+}
+.content .item .item-title {
+  font-size: 14px;
+}
+.content .item .value {
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  font-size: 16px;
+}
+.content .item:last-child {
+  border: none;
+}
+</style>