|
@@ -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,168 @@
|
|
|
</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)}`
|
|
|
+ ] !== undefined && detail.value.paramvalues[`T0${numberCale(index * 4 - 1)}`] !== undefined
|
|
|
+ ? `${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)}`
|
|
|
+ ] !== undefined && detail.value.paramvalues[`T0${numberCale(index * 4)}`] !== undefined
|
|
|
+ ? `${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)}`
|
|
|
+ ] !== undefined && detail.value.paramcmdvalues[`T0${numberCale(index * 4 - 1)}`] !== undefined
|
|
|
+ ? `${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)}`
|
|
|
+ ] !== undefined && detail.value.paramcmdvalues[`T0${numberCale(index * 4)}`] !== undefined
|
|
|
+ ? `${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 +255,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 +276,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 +289,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 +333,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 +355,8 @@ onUnmounted(() => {
|
|
|
}
|
|
|
.lamp-box {
|
|
|
position: absolute;
|
|
|
- left:-10px;
|
|
|
- top:-40px;
|
|
|
+ left: -10px;
|
|
|
+ top: -40px;
|
|
|
margin: 70px 0 0 20px;
|
|
|
transform: scale(0.9);
|
|
|
}
|