Browse Source

样式调整

xiaohaizhao 4 months ago
parent
commit
e25628c094

+ 135 - 119
src/operation/moduleNormal/controlPanel/model/YK01/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <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>
@@ -95,10 +95,7 @@
             detail.params.stop && detail.params.stop.paramname
           }}</a-button>
         </div>
-        <div
-          class="dataBlock-box"
-          style="top: 5%; left: 15%; transform: scale(1.4)"
-        >
+        <div class="dataBlock-box" style="top: 5%; left: 15%">
           <dataBlock
             v-if="detail.params.oilpressure"
             :top="0"
@@ -123,12 +120,8 @@
           ></dataBlock>
         </div>
 
-        <div
-          class="dataBlock-box"
-          style="top: 0%; right: 29.5%; transform: scale(1.2)"
-        >
+        <div class="dataBlock-box" style="top: 0%; right: 29.5%">
           <dataBlock
-            style="transform: scale(0.9)"
             v-if="detail.params.closepressure"
             :data="[
               {
@@ -160,10 +153,7 @@
           ></dataBlock>
         </div>
 
-        <div
-          class="dataBlock-box"
-          style="bottom: 28%; left: 2.2%; transform: scale(1.2)"
-        >
+        <div class="dataBlock-box" style="bottom: 28%; left: 5%">
           <dataBlock
             v-if="detail.params.pipeflow"
             :data="[
@@ -180,10 +170,7 @@
             ]"
           ></dataBlock>
         </div>
-        <div
-          class="dataBlock-box"
-          style="bottom: 32%; right: 30%; transform: scale(1.5)"
-        >
+        <div class="dataBlock-box" style="bottom: 32%; right: 30%">
           <dataBlock
             v-if="detail.params.flowspeed"
             :data="[
@@ -216,147 +203,175 @@
       </div>
     </div>
     <div class="control-right">
-      <timeControl>
-      </timeControl>
+      <timeControl> </timeControl>
     </div>
   </div>
 </template>
 
 <script setup>
-import infoPanel from '../../modules/infoPanel.vue'
-import MyChart from '../../modules/MyChart.vue'
-import timeControl from './modules/statusContent.vue'
-import controlPanel from './modules/controlPanel.vue'
-import customBtn from '../../modules/customBtn.vue'
-import Lamp from '../../modules/lamp-vw.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, 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 infoPanel from "../../modules/infoPanel.vue";
+import MyChart from "../../modules/MyChart.vue";
+import timeControl from "./modules/statusContent.vue";
+import controlPanel from "./modules/controlPanel.vue";
+import customBtn from "../../modules/customBtn.vue";
+import Lamp from "../../modules/lamp-vw.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,
+  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";
 
-let status = ref('')
+let status = ref("");
 
-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 detail = ref('')
-
-provide('detail',detail)
+let detail = ref("");
 
+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
-  })
-}
+    refresh.value = true;
+  });
+};
 
 let StopFun = (type) => {
   Modal.confirm({
-    title:`确定${type == 'stop' ? '暂停' : type == 'close' ? '关阀' : '开阀'}吗?`,
-    async onOk () {
+    title: `确定${
+      type == "stop" ? "暂停" : type == "close" ? "关阀" : "开阀"
+    }吗?`,
+    async onOk() {
       let res = await Api.requested({
-        "id": "20230627163701",
-        "content": {
-          "w_deviceid": router.currentRoute.value.query.id,
-          "w_functionid": detail.value.function[type].w_functionid,
-          "params": {
-            [type]:1
-          }
-        }
-      })
-      utils.message(res,'操作成功', async () => {
-        detailFun()
-      })
+        id: "20230627163701",
+        content: {
+          w_deviceid: router.currentRoute.value.query.id,
+          w_functionid: detail.value.function[type].w_functionid,
+          params: {
+            [type]: 1,
+          },
+        },
+      });
+      utils.message(res, "操作成功", async () => {
+        detailFun();
+      });
     },
-    onCancel () {
-      status.value = detail.value.paramvalues.open == 1 ? 'open' : detail.value.paramvalues.close == 1 ? 'close' : 'stop'
-    }
-  })
-}
+    onCancel() {
+      status.value =
+        detail.value.paramvalues.open == 1
+          ? "open"
+          : detail.value.paramvalues.close == 1
+          ? "close"
+          : "stop";
+    },
+  });
+};
 
 let controlBtn = async (data) => {
   Modal.confirm({
-    title:'确定更新数据吗?',
-    async onOk () {
+    title: "确定更新数据吗?",
+    async onOk() {
       let res = await Api.requested({
-        "id": "20230627163701",
-        "content": {
-          "w_deviceid": router.currentRoute.value.query.id,
-          "w_functionid": detail.value.function['Pilot valve'].w_functionid,
-          "params": {
-            'DaoFa':data.value
-          }
-        }
-      })
-      utils.message(res,'操作成功', async () => {
-        detailFun()
-      })
-    }
-   })
-}
+        id: "20230627163701",
+        content: {
+          w_deviceid: router.currentRoute.value.query.id,
+          w_functionid: detail.value.function["Pilot valve"].w_functionid,
+          params: {
+            DaoFa: data.value,
+          },
+        },
+      });
+      utils.message(res, "操作成功", async () => {
+        detailFun();
+      });
+    },
+  });
+};
 
 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];
+    });
   }
-  status.value = detail.value.paramvalues.open == 1 ? 'open' : detail.value.paramvalues.close == 1 ? 'close' : 'stop'
-}
+  status.value =
+    detail.value.paramvalues.open == 1
+      ? "open"
+      : detail.value.paramvalues.close == 1
+      ? "close"
+      : "stop";
+};
 
-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>
-*{
+* {
   box-sizing: border-box;
 }
 .control {
   display: flex;
   height: calc(100vh - 60px);
-  width: 100%;
+  width: calc(100vw - 255px);
   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;
@@ -372,12 +387,12 @@ onUnmounted(() => {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-} 
+}
 .control .control-left .top {
   width: 100%;
   height: 49%;
   min-height: 330px;
-  background:  rgb(0, 0, 0,.05);
+  background: rgb(0, 0, 0, 0.05);
   padding: 10px;
 }
 .control .control-left .bottom {
@@ -385,7 +400,7 @@ onUnmounted(() => {
   min-width: 290px;
   height: 49%;
   min-height: 330px;
-  background:  rgb(0, 0, 0,.05);
+  background: rgb(0, 0, 0, 0.05);
   padding: 10px;
 }
 
@@ -439,15 +454,16 @@ onUnmounted(() => {
 .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;
+  flex-shrink: 0;
 }
 .stop {
   /* border-radius: 50%;

+ 0 - 1
src/operation/moduleNormal/positionControl/index.vue

@@ -551,7 +551,6 @@ onMounted( async () => {
   initChart()
   listData()
   getCmdData()
-  getDeviceData()
   getHanleData()
   getwarningData()
   scrollUp()

+ 3 - 6
src/operation/moduleNormal/pressureControl/modules/devices.vue

@@ -345,15 +345,10 @@ onMounted(async () => {
   --color2: rgba(255, 164, 6);
 }
 .empty-box {
-  position: absolute;
-  width: 220rem;
-  height: 220rem;
   display: flex;
   justify-content: center;
   align-items: center;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
+  margin-top: 20px;
 }
 /* 地图 */
 .M-map {
@@ -414,11 +409,13 @@ onMounted(async () => {
   scrollbar-width: none; /* firefox */
   -ms-overflow-style: none; /* IE 10+ */
   margin-top: 10rem;
+  width: 100%;
 }
 .device-wrapper .device-list {
   display: flex;
   flex-wrap: wrap;
   padding-bottom: 50rem;
+  width: 100%;
 }
 
 .device-wrapper .device-list .content_box {

+ 0 - 1
src/operation/moduleNormal/waterhammerControl/index.vue

@@ -663,7 +663,6 @@ onMounted(async () => {
   initChart();
   listData();
   getCmdData();
-  getDeviceData();
   getHanleData();
   getwarningData();
   scrollUp();

+ 4 - 4
vite.config.js

@@ -12,15 +12,15 @@ export default defineConfig({
   },
   define: {
     'process.env': {
-      // 'BASE_API':"http://60.204.153.188"
-      'BASE_API':"http://61.164.207.46:8100/"
+      'BASE_API':"http://60.204.153.188"
+      // 'BASE_API':"http://61.164.207.46:8100/"
     }
   },
   server: {
     proxy: {
       "/api": {
-        // target: "http://60.204.153.188/",
-        target: "http://61.164.207.46:8100/",
+        target: "http://60.204.153.188/",
+        // target: "http://61.164.207.46:8100/",
         ws: true,
         changeOrigin: true,
         rewrite: (path) => path.replace(/^\/api/, ""),