添加阀门开度曲线图

src/system/IOT/controlPanel/model/MT05/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>
@@ -10,12 +10,27 @@
     </div>
     <div class="control-content" v-if="refresh">
       <div class="lamp-box">
-        <Lamp :isTrue="detail.params.A003 ? detail.params.A003.lastvalue == 1 : false">{{ detail.params.A003 && detail.params.A003.paramname }}</Lamp>
-        <Lamp :isTrue="detail.params.A004 ? detail.params.A004.lastvalue == 1 : false">{{ detail.params.A004 && detail.params.A004.paramname }}</Lamp>
-        <Lamp :isTrue="detail.params.A002 ? detail.params.A002.lastvalue == 1 : false">{{ detail.params.A002 && detail.params.A002.paramname }}</Lamp>
+        <Lamp
+          :isTrue="
+            detail.params.A003 ? detail.params.A003.lastvalue == 1 : false
+          "
+          >{{ detail.params.A003 && detail.params.A003.paramname }}</Lamp
+        >
+        <Lamp
+          :isTrue="
+            detail.params.A004 ? detail.params.A004.lastvalue == 1 : false
+          "
+          >{{ detail.params.A004 && detail.params.A004.paramname }}</Lamp
+        >
+        <Lamp
+          :isTrue="
+            detail.params.A002 ? detail.params.A002.lastvalue == 1 : false
+          "
+          >{{ detail.params.A002 && detail.params.A002.paramname }}</Lamp
+        >
       </div>
-      <div class="map" :style="{transform:`scale(${calcSize})`}">
-        <div style="display: inline-block;position: relative">
+      <div class="map" :style="{ transform: `scale(${calcSize})` }">
+        <div style="display: inline-block; position: relative">
           <!-- <dataBlock 
             v-if="detail.params.瞬时流量"
             :title="detail.params.瞬时流量.paramname" 
@@ -23,29 +38,44 @@
             left="50" 
             :data="[{value:detail.params.瞬时流量.lastvalue,unit:detail.params.瞬时流量.unit}]"
           ></dataBlock> -->
-          <dataBlock 
+          <dataBlock
             v-if="detail.params.U002"
-            :title="detail.params.U002.paramname" 
-            top="25" 
-            left="350" 
-            :data="[{value:detail.params.U002.lastvalue,unit:detail.params.U002.unit}]"
+            :title="detail.params.U002.paramname"
+            top="25"
+            left="350"
+            :data="[
+              {
+                value: detail.params.U002.lastvalue,
+                unit: detail.params.U002.unit,
+              },
+            ]"
           ></dataBlock>
-          <dataBlock 
+          <dataBlock
             v-if="detail.params.U001"
-            :title="detail.params.U001.paramname" 
-            :top="240" 
-            :left="350" 
-            :data="[{value:detail.params.U001.lastvalue,unit:detail.params.U001.unit}]"
+            :title="detail.params.U001.paramname"
+            :top="240"
+            :left="350"
+            :data="[
+              {
+                value: detail.params.U001.lastvalue,
+                unit: detail.params.U001.unit,
+              },
+            ]"
           ></dataBlock>
-          <img :src="imgUrl" alt="">
-          <div style="clear: both;"></div>
+          <img :src="imgUrl" alt="" />
+          <div style="clear: both"></div>
         </div>
       </div>
       <div class="chart">
-        <MyChart :options="[{label:'压力历史曲线图',value:['U001'],sumShow:true}]"></MyChart>
+        <MyChart :options="options"></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>
@@ -56,131 +86,176 @@
 </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 Lamp from '../../modules/lamp.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 Lamp from "../../modules/lamp.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 detail = ref('')
+let detail = ref("");
 
 let modelList = ref([
-  {label:'就地模式',value:'就地模式'},
-  {label:'远程开关阀模式',value:'远程开关阀模式'},
-  {label:'远程不利点模式',value:'远程不利点模式'},
-  {label:'恒压控制',value:'恒压控制启动'},
-  {label:'分时控制模式',value:'分时控制启动'},
-])
+  { label: "就地模式", value: "就地模式" },
+  { label: "远程开关阀模式", value: "远程开关阀模式" },
+  { label: "远程不利点模式", value: "远程不利点模式" },
+  { label: "恒压控制", value: "恒压控制启动" },
+  { label: "分时控制模式", value: "分时控制启动" },
+]);
 
-provide('detail',detail)
-provide('modelList',modelList)
+provide("detail", detail);
+provide("modelList", modelList);
 
-let calcSize = ref(1)
+let options = [
+  { label: "压力历史曲线图", value: ["U001"], sumShow: true },
+  { label: "阀门开度曲线图", value: ["U002"] },
+];
+
+let calcSize = ref(1);
 calcSizeFun((size) => {
-  calcSize.value = 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 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 numberArr = {
-  1:'一',
-  2:'二',
-  3:'三',
-  4:'四',
-  5:'五',
-  6:'六',
-  7:'七',
-  8:'八',
-} 
+  1: "一",
+  2: "二",
+  3: "三",
+  4: "四",
+  5: "五",
+  6: "六",
+  7: "七",
+  8: "八",
+};
 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 index = 1; index <= 12; index++) {
-    detail.value.paramvalues[`start${index}`] = detail.value.paramvalues[`T0${numberCale(index*4-3)}`] ? detail.value.paramvalues[`T0${numberCale(index*4-3)}`] + ':' + detail.value.paramvalues[`T0${numberCale(index*4-1)}`] : ''
-    detail.value.paramvalues[`end${index}`] = detail.value.paramvalues[`T0${numberCale(index*4-2)}`] ? detail.value.paramvalues[`T0${numberCale(index*4-2)}`] + ':' + detail.value.paramvalues[`T0${numberCale(index*4)}`] : ''
-    detail.value.paramcmdvalues[`start${index}`] = detail.value.paramcmdvalues[`T0${numberCale(index*4-3)}`] ? detail.value.paramcmdvalues[`T0${numberCale(index*4-3)}`] + ':' + detail.value.paramcmdvalues[`T0${numberCale(index*4-1)}`] : ''
-    detail.value.paramcmdvalues[`end${index}`] = detail.value.paramcmdvalues[`T0${numberCale(index*4-2)}`] ? detail.value.paramcmdvalues[`T0${numberCale(index*4-2)}`] + ':' + detail.value.paramcmdvalues[`T0${numberCale(index*4)}`] : ''
+    detail.value.paramvalues[`start${index}`] = detail.value.paramvalues[
+      `T0${numberCale(index * 4 - 3)}`
+    ]
+      ? detail.value.paramvalues[`T0${numberCale(index * 4 - 3)}`] +
+        ":" +
+        detail.value.paramvalues[`T0${numberCale(index * 4 - 1)}`]
+      : "";
+    detail.value.paramvalues[`end${index}`] = detail.value.paramvalues[
+      `T0${numberCale(index * 4 - 2)}`
+    ]
+      ? detail.value.paramvalues[`T0${numberCale(index * 4 - 2)}`] +
+        ":" +
+        detail.value.paramvalues[`T0${numberCale(index * 4)}`]
+      : "";
+    detail.value.paramcmdvalues[`start${index}`] = detail.value.paramcmdvalues[
+      `T0${numberCale(index * 4 - 3)}`
+    ]
+      ? detail.value.paramcmdvalues[`T0${numberCale(index * 4 - 3)}`] +
+        ":" +
+        detail.value.paramcmdvalues[`T0${numberCale(index * 4 - 1)}`]
+      : "";
+    detail.value.paramcmdvalues[`end${index}`] = detail.value.paramcmdvalues[
+      `T0${numberCale(index * 4 - 2)}`
+    ]
+      ? detail.value.paramcmdvalues[`T0${numberCale(index * 4 - 2)}`] +
+        ":" +
+        detail.value.paramcmdvalues[`T0${numberCale(index * 4)}`]
+      : "";
   }
-  detail.value.paramvalues.nian = `${detail.value.paramvalues.C006}-${detail.value.paramvalues.C007}-${detail.value.paramvalues.C008}`
-  detail.value.paramvalues.time = `${detail.value.paramvalues.C009}-${detail.value.paramvalues.C010}-${detail.value.paramvalues.C011}`
+  detail.value.paramvalues.nian = `${detail.value.paramvalues.C006}-${detail.value.paramvalues.C007}-${detail.value.paramvalues.C008}`;
+  detail.value.paramvalues.time = `${detail.value.paramvalues.C009}-${detail.value.paramvalues.C010}-${detail.value.paramvalues.C011}`;
   if (!detail.value.paramcmdvalues.C006) {
-    detail.value.paramcmdvalues.time = ''
+    detail.value.paramcmdvalues.time = "";
   } else {
-    detail.value.paramcmdvalues.time = `${detail.value.paramcmdvalues.C006}-${detail.value.paramcmdvalues.C007}-${detail.value.paramcmdvalues.C008} ${detail.value.paramcmdvalues.C009}:${detail.value.paramcmdvalues.C010}:${detail.value.paramcmdvalues.C011}`
+    detail.value.paramcmdvalues.time = `${detail.value.paramcmdvalues.C006}-${detail.value.paramcmdvalues.C007}-${detail.value.paramcmdvalues.C008} ${detail.value.paramcmdvalues.C009}:${detail.value.paramcmdvalues.C010}:${detail.value.paramcmdvalues.C011}`;
   }
 
   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];
+    });
   }
 
-  if (detail.value.paramcmdvalues.C006 == '00' || detail.value.paramcmdvalues.C006 == '0' || detail.value.paramcmdvalues.C006 == '') {
-    detail.value.paramcmdvalues.times = ''
+  if (
+    detail.value.paramcmdvalues.C006 == "00" ||
+    detail.value.paramcmdvalues.C006 == "0" ||
+    detail.value.paramcmdvalues.C006 == ""
+  ) {
+    detail.value.paramcmdvalues.times = "";
   } else {
-    detail.value.paramcmdvalues.times = `${detail.value.paramcmdvalues.C006}-${detail.value.paramcmdvalues.C007}-${detail.value.paramcmdvalues.C008} ${detail.value.paramcmdvalues.C009}:${detail.value.paramcmdvalues.C010}:${detail.value.paramcmdvalues.C011}`
+    detail.value.paramcmdvalues.times = `${detail.value.paramcmdvalues.C006}-${detail.value.paramcmdvalues.C007}-${detail.value.paramcmdvalues.C008} ${detail.value.paramcmdvalues.C009}:${detail.value.paramcmdvalues.C010}:${detail.value.paramcmdvalues.C011}`;
   }
-  
-  console.log(detail.value,'数据');
-  detail.value.isSite = AuthStore.nowAccount.sitename == detail.value.sitename //是否本站点设备
-}
+
+  console.log(detail.value, "数据");
+  detail.value.isSite = AuthStore.nowAccount.sitename == detail.value.sitename; //是否本站点设备
+};
 
 let numberCale = (num) => {
-  return (num+'').padStart(2,'0')
-}
+  return (num + "").padStart(2, "0");
+};
 
-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 {
@@ -188,7 +263,12 @@ onUnmounted(() => {
   height: calc(100vh - 60px);
   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;
@@ -204,12 +284,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 {
@@ -217,12 +297,12 @@ onUnmounted(() => {
   min-width: 290px;
   height: 49%;
   min-height: 330px;
-  background:  rgb(0, 0, 0,.05);
+  background: rgb(0, 0, 0, 0.05);
   padding: 10px;
 }
 
 .control .control-content {
-  flex:1 ;
+  flex: 1;
   height: 100%;
   padding: 0 10px;
   display: flex;
@@ -261,14 +341,14 @@ 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;
 }
 .stop {
@@ -283,8 +363,8 @@ onUnmounted(() => {
 }
 .lamp-box {
   position: absolute;
-  left:-10px;
-  top:-40px;
+  left: -10px;
+  top: -40px;
   margin: 70px 0 0 20px;
   transform: scale(0.9);
 }