|
@@ -1,264 +0,0 @@
|
|
-
|
|
|
|
-
|
|
|
|
-<template>
|
|
|
|
- <div :class="['control',{'wrapper':wrapper}]" v-if="detail">
|
|
|
|
- <div class="control-left">
|
|
|
|
- <div class="top">
|
|
|
|
- <infoPanel></infoPanel>
|
|
|
|
- </div>
|
|
|
|
- <div class="bottom">
|
|
|
|
- <controlPanel @onSuccess="detailFun"></controlPanel>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- <div class="control-content" v-if="refresh">
|
|
|
|
- <div class="map" :style="{transform:`scale(${calcSize})`}">
|
|
|
|
- <div style="display: inline-block;position: relative">
|
|
|
|
- <dataBlock
|
|
|
|
- v-if="detail.params.UpP"
|
|
|
|
- :title="detail.params.UpP.paramname"
|
|
|
|
- :top="0"
|
|
|
|
- :left="50"
|
|
|
|
- :data="[{value:detail.params.UpP.lastvalue,unit:detail.params.UpP.unit}]"
|
|
|
|
- ></dataBlock>
|
|
|
|
- <dataBlock
|
|
|
|
- v-if="detail.params.DownP"
|
|
|
|
- :title="detail.params.DownP.paramname"
|
|
|
|
- :top="0"
|
|
|
|
- :left="400"
|
|
|
|
- :data="[{value:detail.params.DownP.lastvalue,unit:detail.params.DownP.unit}]"
|
|
|
|
- ></dataBlock>
|
|
|
|
- <img :src="imgUrl" alt="">
|
|
|
|
- <div style="clear: both;"></div>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- <div class="chart">
|
|
|
|
- <MyChart :options="[{label:'压力历史曲线图',value:'UpP',sumShow:true},{label:'流量历史曲线图',value:'CumFlow'}]"></MyChart>
|
|
|
|
- </div>
|
|
|
|
- <div class="message-header">
|
|
|
|
- <customBtn :btnOptions="[{label:wrapper ? '退出全屏' : '进入全屏'}]" :btn="true" style="width:70px" @clickBtn="clickBtn"></customBtn>
|
|
|
|
- <!-- <Message></Message> -->
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- <div class="control-right">
|
|
|
|
- <timeControl></timeControl>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
-</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 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 } from '../../modules/util.js'
|
|
|
|
-
|
|
|
|
-
|
|
|
|
-let AuthStore = useAuthStore()
|
|
|
|
-
|
|
|
|
-let router = useRouter()
|
|
|
|
-let emit = defineEmits(['onSuccess'])
|
|
|
|
-let props = defineProps({})
|
|
|
|
-
|
|
|
|
-let refresh = ref(true)
|
|
|
|
-let wrapper = ref(false)
|
|
|
|
-
|
|
|
|
-let detail = ref('')
|
|
|
|
-
|
|
|
|
-let modelList = ref([
|
|
|
|
- {label:'就地模式',value:'LocalMode'},
|
|
|
|
- {label:'远程开关阀模式',value:'SwitchMode'},
|
|
|
|
- {label:'远程不利点模式',value:'DisadvantageMode'},
|
|
|
|
- {label:'恒压控制',value:'ConstantConON'},
|
|
|
|
-])
|
|
|
|
-
|
|
|
|
-provide('detail',detail)
|
|
|
|
-provide('modelList',modelList)
|
|
|
|
-
|
|
|
|
-let calcSize = ref(1)
|
|
|
|
-calcSizeFun((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 clickBtn = (tag) => {
|
|
|
|
- tag.label == '进入全屏' ? wrapper.value = true : wrapper.value = false
|
|
|
|
- refresh.value = false
|
|
|
|
- setTimeout(() => {
|
|
|
|
- refresh.value = true
|
|
|
|
- })
|
|
|
|
-}
|
|
|
|
-
|
|
|
|
-let detailFun = async () => {
|
|
|
|
- let res = await Api.requested({
|
|
|
|
- "id": "20230628084901",
|
|
|
|
- "content": {
|
|
|
|
- "w_deviceid": router.currentRoute.value.query.id
|
|
|
|
- }
|
|
|
|
- })
|
|
|
|
- detail.value = res.data
|
|
|
|
-
|
|
|
|
-
|
|
|
|
- for (let i=1;i<9;i++) {
|
|
|
|
- if (detail.value.paramvalues[`T${i}H`]) {
|
|
|
|
- detail.value.paramvalues[`start${i}`] = detail.value.paramvalues[`T${i}H`] ? detail.value.paramvalues[`T${i}H`] + ':' + detail.value.paramvalues[`T${i}M`] : ''
|
|
|
|
- detail.value.paramvalues[`end${i}`] = detail.value.paramvalues[`T${i}H1`] ? detail.value.paramvalues[`T${i}H1`] + ':' + detail.value.paramvalues[`T${i}M1`] : ''
|
|
|
|
- detail.value.paramcmdvalues[`start${i}`] = detail.value.paramcmdvalues[`T${i}H`] ? detail.value.paramcmdvalues[`T${i}H`] + ':' + detail.value.paramcmdvalues[`T${i}M`] : ''
|
|
|
|
- detail.value.paramcmdvalues[`end${i}`] = detail.value.paramcmdvalues[`T${i}H1`] ? detail.value.paramcmdvalues[`T${i}H1`] + ':' + detail.value.paramcmdvalues[`T${i}M1`] : ''
|
|
|
|
- } else {
|
|
|
|
- detail.value.paramvalues[`start${i}`] = ''
|
|
|
|
- detail.value.paramvalues[`end${i}`] = ''
|
|
|
|
- detail.value.paramcmdvalues[`start${i}`] = ''
|
|
|
|
- detail.value.paramcmdvalues[`end${i}`] = ''
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- modelList.value.forEach(item => {
|
|
|
|
- console.log(detail.value.paramvalues[item.value]);
|
|
|
|
- if (detail.value.paramvalues[item.value] == '1') {
|
|
|
|
- detail.value.paramvalues.控制模式 = item.label
|
|
|
|
- }
|
|
|
|
- if (detail.value.paramcmdvalues[item.value] == '1') {
|
|
|
|
- detail.value.paramcmdvalues.控制模式 = item.label
|
|
|
|
- }
|
|
|
|
- })
|
|
|
|
-
|
|
|
|
- console.log(res.data);
|
|
|
|
-}
|
|
|
|
-
|
|
|
|
-let timer = setInterval(async () => {
|
|
|
|
- let res = await Api.isRefreshDevice({
|
|
|
|
- "w_deviceid":router.currentRoute.value.query.id,
|
|
|
|
- },'get')
|
|
|
|
- if (res) detailFun()
|
|
|
|
-},5000)
|
|
|
|
-
|
|
|
|
-onMounted( () => {
|
|
|
|
- detailFun()
|
|
|
|
- timer
|
|
|
|
-})
|
|
|
|
-onUnmounted(() => {
|
|
|
|
- clearInterval(timer)
|
|
|
|
-})
|
|
|
|
-</script>
|
|
|
|
-
|
|
|
|
-<style scoped>
|
|
|
|
-*{
|
|
|
|
- box-sizing: border-box;
|
|
|
|
-}
|
|
|
|
-.control {
|
|
|
|
- display: flex;
|
|
|
|
- height: calc(100vh - 60px);
|
|
|
|
- width: 100%;
|
|
|
|
- padding: 10px 0;
|
|
|
|
- background: linear-gradient(90deg, #001D6A 0%, #0060B2 82%, #007BD5 100%) !important;
|
|
|
|
-}
|
|
|
|
-.wrapper {
|
|
|
|
- position: absolute;
|
|
|
|
- top: 0;
|
|
|
|
- left: 0;
|
|
|
|
- z-index: 999;
|
|
|
|
- height: 100vh !important;
|
|
|
|
- padding: 20px;
|
|
|
|
-}
|
|
|
|
-.control .control-left {
|
|
|
|
- width: 290px;
|
|
|
|
- height: 100%;
|
|
|
|
- display: flex;
|
|
|
|
- flex-direction: column;
|
|
|
|
- justify-content: space-between;
|
|
|
|
-}
|
|
|
|
-.control .control-left .top {
|
|
|
|
- width: 100%;
|
|
|
|
- height: 49.5%;
|
|
|
|
- background: rgb(0, 0, 0,.05);
|
|
|
|
- padding: 10px;
|
|
|
|
-}
|
|
|
|
-.control .control-left .bottom {
|
|
|
|
- width: 100%;
|
|
|
|
- min-width: 290px;
|
|
|
|
- height: 49.5%;
|
|
|
|
- background: rgb(0, 0, 0,.05);
|
|
|
|
- padding: 10px;
|
|
|
|
-}
|
|
|
|
-
|
|
|
|
-.control .control-content {
|
|
|
|
- flex:1 ;
|
|
|
|
- height: 100%;
|
|
|
|
- padding: 0 10px;
|
|
|
|
- display: flex;
|
|
|
|
- flex-direction: column;
|
|
|
|
- justify-content: space-between;
|
|
|
|
- position: relative;
|
|
|
|
- overflow: hidden;
|
|
|
|
-}
|
|
|
|
-.control .control-content .message-header {
|
|
|
|
- display: flex;
|
|
|
|
- justify-content: space-between;
|
|
|
|
- align-items: center;
|
|
|
|
- position: absolute;
|
|
|
|
- top: 0;
|
|
|
|
- left: 0;
|
|
|
|
- width: 100%;
|
|
|
|
- padding-left: 10px;
|
|
|
|
-}
|
|
|
|
-.control .control-content .map {
|
|
|
|
- width: 100%;
|
|
|
|
- height: calc(100vh - 255px);
|
|
|
|
- position: relative;
|
|
|
|
- display: flex;
|
|
|
|
- align-items: center;
|
|
|
|
- width: 684px;
|
|
|
|
- padding: 0 70px;
|
|
|
|
- margin: auto;
|
|
|
|
-}
|
|
|
|
-.control .control-content .map img {
|
|
|
|
- width: 100%;
|
|
|
|
- object-fit: scale-down;
|
|
|
|
- z-index: 1;
|
|
|
|
-}
|
|
|
|
-
|
|
|
|
-.control .control-content .chart {
|
|
|
|
- width: 100%;
|
|
|
|
- height: 255px;
|
|
|
|
- background: rgb(0, 0, 0,.05);
|
|
|
|
- padding: 0 10px 10px 0;
|
|
|
|
-}
|
|
|
|
-
|
|
|
|
-.control .control-right {
|
|
|
|
- width: 272px;
|
|
|
|
- height: 100%;
|
|
|
|
- background: rgb(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-btn {
|
|
|
|
- border-radius: 50%;
|
|
|
|
- width: 60px;
|
|
|
|
- height: 60px;
|
|
|
|
- font-size: 12px;
|
|
|
|
-}
|
|
|
|
-</style>
|
|
|