|
@@ -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>
|
|
@@ -9,221 +9,383 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="control-content" v-if="refresh">
|
|
|
- <div class="lamp-box" style="position: absolute;margin: 70px 0 0 20px;">
|
|
|
- <Lamp bgStart="green" bgEnd="rgb(0, 255, 0)" :isTrue="detail.params.solenoid1 ? detail.params.solenoid1.lastvalue == 1 : false">{{ detail.params.solenoid1 && detail.params.solenoid1.paramname }}</Lamp>
|
|
|
- <Lamp bgStart="green" bgEnd="rgb(0, 255, 0)" :isTrue="detail.params.solenoid2 ? detail.params.solenoid2.lastvalue == 1 : false">{{ detail.params.solenoid2 && detail.params.solenoid2.paramname }}</Lamp>
|
|
|
- <Lamp bgStart="green" bgEnd="rgb(0, 255, 0)" :isTrue="detail.params.solenoid3 ? detail.params.solenoid3.lastvalue == 1 : false">{{ detail.params.solenoid3 && detail.params.solenoid3.paramname }}</Lamp>
|
|
|
- <Lamp bgStart="green" bgEnd="rgb(0, 255, 0)" :isTrue="detail.params.solenoid4 ? detail.params.solenoid4.lastvalue == 1 : false">{{ detail.params.solenoid4 && detail.params.solenoid4.paramname }}</Lamp>
|
|
|
- <Lamp bgStart="green" bgEnd="rgb(0, 255, 0)" :isTrue="detail.params.solenoid5 ? detail.params.solenoid5.lastvalue == 1 : false">{{ detail.params.solenoid5 && detail.params.solenoid5.paramname }}</Lamp>
|
|
|
- </div>
|
|
|
- <div class="map" :style="{transform:`scale(${calcSize})`}">
|
|
|
- <div style="display: inline-block;position: relative">
|
|
|
- <dataBlock
|
|
|
+ <div class="image-box">
|
|
|
+ <div class="full-screen">
|
|
|
+ <customBtn
|
|
|
+ :btnOptions="[{ label: wrapper ? '退出全屏' : '进入全屏' }]"
|
|
|
+ :btn="true"
|
|
|
+ style="width: 70px"
|
|
|
+ @clickBtn="clickBtn"
|
|
|
+ ></customBtn>
|
|
|
+ </div>
|
|
|
+ <div style="position: absolute; top: 13%; left: 2%">
|
|
|
+ <Lamp
|
|
|
+ bgStart="green"
|
|
|
+ bgEnd="rgb(0, 255, 0)"
|
|
|
+ style="margin-bottom: 1vh"
|
|
|
+ :isTrue="
|
|
|
+ detail.params.solenoid1
|
|
|
+ ? detail.params.solenoid1.lastvalue == 1
|
|
|
+ : false
|
|
|
+ "
|
|
|
+ >{{
|
|
|
+ detail.params.solenoid1 && detail.params.solenoid1.paramname
|
|
|
+ }}</Lamp
|
|
|
+ >
|
|
|
+ <Lamp
|
|
|
+ bgStart="green"
|
|
|
+ bgEnd="rgb(0, 255, 0)"
|
|
|
+ style="margin-bottom: 1vh"
|
|
|
+ :isTrue="
|
|
|
+ detail.params.solenoid2
|
|
|
+ ? detail.params.solenoid2.lastvalue == 1
|
|
|
+ : false
|
|
|
+ "
|
|
|
+ >{{
|
|
|
+ detail.params.solenoid2 && detail.params.solenoid2.paramname
|
|
|
+ }}</Lamp
|
|
|
+ >
|
|
|
+ <Lamp
|
|
|
+ bgStart="green"
|
|
|
+ bgEnd="rgb(0, 255, 0)"
|
|
|
+ style="margin-bottom: 1vh"
|
|
|
+ :isTrue="
|
|
|
+ detail.params.solenoid3
|
|
|
+ ? detail.params.solenoid3.lastvalue == 1
|
|
|
+ : false
|
|
|
+ "
|
|
|
+ >{{
|
|
|
+ detail.params.solenoid3 && detail.params.solenoid3.paramname
|
|
|
+ }}</Lamp
|
|
|
+ >
|
|
|
+ <Lamp
|
|
|
+ bgStart="green"
|
|
|
+ bgEnd="rgb(0, 255, 0)"
|
|
|
+ style="margin-bottom: 1vh"
|
|
|
+ :isTrue="
|
|
|
+ detail.params.solenoid4
|
|
|
+ ? detail.params.solenoid4.lastvalue == 1
|
|
|
+ : false
|
|
|
+ "
|
|
|
+ >{{
|
|
|
+ detail.params.solenoid4 && detail.params.solenoid4.paramname
|
|
|
+ }}</Lamp
|
|
|
+ >
|
|
|
+ <Lamp
|
|
|
+ bgStart="green"
|
|
|
+ bgEnd="rgb(0, 255, 0)"
|
|
|
+ :isTrue="
|
|
|
+ detail.params.solenoid5
|
|
|
+ ? detail.params.solenoid5.lastvalue == 1
|
|
|
+ : false
|
|
|
+ "
|
|
|
+ >{{
|
|
|
+ detail.params.solenoid5 && detail.params.solenoid5.paramname
|
|
|
+ }}</Lamp
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <div class="stop" v-if="detail.isSite && detail.params.open">
|
|
|
+ <a-button class="a-but" @click="StopFun('open')" size="small">{{
|
|
|
+ detail.params.open && detail.params.open.paramname
|
|
|
+ }}</a-button>
|
|
|
+ <a-button class="a-but" @click="StopFun('close')" size="small">{{
|
|
|
+ detail.params.close && detail.params.close.paramname
|
|
|
+ }}</a-button>
|
|
|
+ <a-button class="a-but" @click="StopFun('stop')" size="small">{{
|
|
|
+ detail.params.stop && detail.params.stop.paramname
|
|
|
+ }}</a-button>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="dataBlock-box"
|
|
|
+ style="top: 5%; left: 15%; transform: scale(1.4)"
|
|
|
+ >
|
|
|
+ <dataBlock
|
|
|
v-if="detail.params.oilpressure"
|
|
|
- :top="-35"
|
|
|
- :left="40"
|
|
|
+ :top="0"
|
|
|
+ :left="0"
|
|
|
:data="[
|
|
|
- {title:detail.params.oilpressure.paramname,value:detail.params.oilpressure.lastvalue,unit:detail.params.oilpressure.unit},
|
|
|
- {title:detail.params.tanklevel.paramname,value:detail.params.tanklevel.lastvalue,unit:detail.params.tanklevel.unit},
|
|
|
- {title:detail.params.tanktemp.paramname,value:detail.params.tanktemp.lastvalue,unit:detail.params.tanktemp.unit}
|
|
|
+ {
|
|
|
+ title: detail.params.oilpressure.paramname,
|
|
|
+ value: detail.params.oilpressure.lastvalue,
|
|
|
+ unit: detail.params.oilpressure.unit,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: detail.params.tanklevel.paramname,
|
|
|
+ value: detail.params.tanklevel.lastvalue,
|
|
|
+ unit: detail.params.tanklevel.unit,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: detail.params.tanktemp.paramname,
|
|
|
+ value: detail.params.tanktemp.lastvalue,
|
|
|
+ unit: detail.params.tanktemp.unit,
|
|
|
+ },
|
|
|
]"
|
|
|
></dataBlock>
|
|
|
- <dataBlock
|
|
|
- style="transform: scale(0.9);"
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div
|
|
|
+ class="dataBlock-box"
|
|
|
+ style="top: 0%; right: 29.5%; transform: scale(1.2)"
|
|
|
+ >
|
|
|
+ <dataBlock
|
|
|
+ style="transform: scale(0.9)"
|
|
|
v-if="detail.params.closepressure"
|
|
|
- :top="-50"
|
|
|
- :left="300"
|
|
|
:data="[
|
|
|
- {title:detail.params.closepressure.paramname,value:detail.params.closepressure.lastvalue,unit:detail.params.closepressure.unit},
|
|
|
- {title:detail.params.FMKQS120S.paramname,value:detail.params.FMKQS120S.lastvalue,unit:detail.params.FMKQS120S.unit},
|
|
|
- {title:detail.params.closetime.paramname,value:detail.params.closetime.lastvalue,unit:detail.params.closetime.unit},
|
|
|
- {title:detail.params.kv.paramname,value:detail.params.kv.lastvalue,unit:detail.params.kv.unit},
|
|
|
- {title:detail.params.flowresistance.paramname,value:detail.params.flowresistance.lastvalue,unit:detail.params.flowresistance.unit}
|
|
|
+ {
|
|
|
+ title: detail.params.closepressure.paramname,
|
|
|
+ value: detail.params.closepressure.lastvalue,
|
|
|
+ unit: detail.params.closepressure.unit,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: detail.params.FMKQS120S.paramname,
|
|
|
+ value: detail.params.FMKQS120S.lastvalue,
|
|
|
+ unit: detail.params.FMKQS120S.unit,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: detail.params.closetime.paramname,
|
|
|
+ value: detail.params.closetime.lastvalue,
|
|
|
+ unit: detail.params.closetime.unit,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: detail.params.kv.paramname,
|
|
|
+ value: detail.params.kv.lastvalue,
|
|
|
+ unit: detail.params.kv.unit,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: detail.params.flowresistance.paramname,
|
|
|
+ value: detail.params.flowresistance.lastvalue,
|
|
|
+ unit: detail.params.flowresistance.unit,
|
|
|
+ },
|
|
|
]"
|
|
|
></dataBlock>
|
|
|
- <dataBlock
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div
|
|
|
+ class="dataBlock-box"
|
|
|
+ style="bottom: 28%; left: 2.2%; transform: scale(1.2)"
|
|
|
+ >
|
|
|
+ <dataBlock
|
|
|
v-if="detail.params.pipeflow"
|
|
|
- :top="200"
|
|
|
- :left="40"
|
|
|
:data="[
|
|
|
- {title:detail.params.pipeflow.paramname,value:detail.params.pipeflow.lastvalue,unit:detail.params.pipeflow.unit},
|
|
|
- {title:detail.params.position.paramname,value:detail.params.position.lastvalue,unit:detail.params.position.unit},
|
|
|
+ {
|
|
|
+ title: detail.params.pipeflow.paramname,
|
|
|
+ value: detail.params.pipeflow.lastvalue,
|
|
|
+ unit: detail.params.pipeflow.unit,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: detail.params.position.paramname,
|
|
|
+ value: detail.params.position.lastvalue,
|
|
|
+ unit: detail.params.position.unit,
|
|
|
+ },
|
|
|
]"
|
|
|
></dataBlock>
|
|
|
- <dataBlock
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="dataBlock-box"
|
|
|
+ style="bottom: 32%; right: 30%; transform: scale(1.5)"
|
|
|
+ >
|
|
|
+ <dataBlock
|
|
|
v-if="detail.params.flowspeed"
|
|
|
- :top="200"
|
|
|
- :left="300"
|
|
|
:data="[
|
|
|
- {title:detail.params.flowspeed.paramname,value:detail.params.flowspeed.lastvalue,unit:detail.params.flowspeed.unit},
|
|
|
- {title:detail.params.headloss.paramname,value:detail.params.headloss.lastvalue,unit:detail.params.headloss.unit},
|
|
|
+ {
|
|
|
+ title: detail.params.flowspeed.paramname,
|
|
|
+ value: detail.params.flowspeed.lastvalue,
|
|
|
+ unit: detail.params.flowspeed.unit,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: detail.params.headloss.paramname,
|
|
|
+ value: detail.params.headloss.lastvalue,
|
|
|
+ unit: detail.params.headloss.unit,
|
|
|
+ },
|
|
|
]"
|
|
|
></dataBlock>
|
|
|
- <div class="stop" v-if="detail.isSite && detail.params.open">
|
|
|
- <a-button @click="StopFun('open')" size="small">{{ detail.params.open && detail.params.open.paramname }}</a-button>
|
|
|
- <a-button @click="StopFun('close')" size="small">{{ detail.params.close && detail.params.close.paramname }}</a-button>
|
|
|
- <a-button @click="StopFun('stop')" size="small">{{ detail.params.stop && detail.params.stop.paramname }}</a-button>
|
|
|
- </div>
|
|
|
- <img :src="imgUrl" alt="">
|
|
|
- <div style="clear: both;"></div>
|
|
|
</div>
|
|
|
+ <img class="image" :src="imgUrl" alt="" />
|
|
|
</div>
|
|
|
-
|
|
|
-
|
|
|
+
|
|
|
<div class="chart">
|
|
|
- <MyChart :options="[{label:'阀门关闭起阀后压力',value:['closepressure'],sumShow:true}]"></MyChart>
|
|
|
- </div>
|
|
|
- <div class="message-header">
|
|
|
- <customBtn :btnOptions="[{label:wrapper ? '退出全屏' : '进入全屏'}]" :btn="true" style="width:70px" @clickBtn="clickBtn"></customBtn>
|
|
|
- <!-- <Message></Message> -->
|
|
|
+ <MyChart
|
|
|
+ :options="[
|
|
|
+ {
|
|
|
+ label: '阀门关闭起阀后压力',
|
|
|
+ value: ['closepressure'],
|
|
|
+ sumShow: true,
|
|
|
+ },
|
|
|
+ ]"
|
|
|
+ ></MyChart>
|
|
|
</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.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('')
|
|
|
+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 AuthStore = useAuthStore()
|
|
|
+let status = ref("");
|
|
|
|
|
|
-let router = useRouter()
|
|
|
-let emit = defineEmits(['onSuccess'])
|
|
|
-let props = defineProps({})
|
|
|
+let AuthStore = useAuthStore();
|
|
|
|
|
|
-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
|
|
|
- })
|
|
|
-}
|
|
|
+ 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 - 256px);
|
|
|
+ box-sizing: border-box;
|
|
|
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;
|
|
@@ -239,12 +401,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 {
|
|
@@ -252,71 +414,68 @@ 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;
|
|
|
- height: 100%;
|
|
|
- padding: 0 10px;
|
|
|
+ flex: 1;
|
|
|
display: flex;
|
|
|
+ width: 53vw;
|
|
|
flex-direction: column;
|
|
|
justify-content: space-between;
|
|
|
- position: relative;
|
|
|
- overflow: hidden;
|
|
|
}
|
|
|
-.control .control-content .message-header {
|
|
|
+.control .control-content .image-box {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
display: flex;
|
|
|
- justify-content: space-between;
|
|
|
+ justify-content: center;
|
|
|
align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.control .control-content .full-screen {
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
- width: 100%;
|
|
|
- padding-left: 10px;
|
|
|
}
|
|
|
-.control .control-content .map {
|
|
|
- width: 100%;
|
|
|
- height: calc(100vh - 245px);
|
|
|
- position: relative;
|
|
|
+
|
|
|
+.control .control-content .image-box .stop {
|
|
|
+ position: absolute;
|
|
|
+ top: 5%;
|
|
|
+ right: 1.5%;
|
|
|
display: flex;
|
|
|
+ flex-direction: column;
|
|
|
align-items: center;
|
|
|
- width: 684px;
|
|
|
- padding: 10px 70px 0 70px;
|
|
|
- margin: auto;
|
|
|
}
|
|
|
-.control .control-content .map img {
|
|
|
- width: 100%;
|
|
|
- object-fit: scale-down;
|
|
|
- z-index: 1;
|
|
|
- margin-bottom: 30px;
|
|
|
+
|
|
|
+.control .control-content .image-box .a-but {
|
|
|
+ width: 3vw;
|
|
|
+ height: 1.8vw;
|
|
|
+ font-size: 0.8vw;
|
|
|
+}
|
|
|
+
|
|
|
+.dataBlock-box {
|
|
|
+ position: absolute;
|
|
|
+}
|
|
|
+
|
|
|
+.image {
|
|
|
+ width: 80%;
|
|
|
+ height: 80%;
|
|
|
+ object-fit: contain;
|
|
|
}
|
|
|
|
|
|
.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 {
|
|
|
- /* border-radius: 50%;
|
|
|
- background: #ffffff; */
|
|
|
- position: absolute;
|
|
|
- top: -30px;
|
|
|
- right: -60px;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
-}
|
|
|
-/deep/ .stop .ant-radio-button {
|
|
|
- font-size: 12px !important;
|
|
|
-}
|
|
|
</style>
|