|
@@ -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%;
|