shuiwu/src/system/IOT/controlPanel/model/YK01/index.vue

<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="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 
            v-if="detail.params.oilpressure"
            :top="-35" 
            :left="40" 
            :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}
            ]"
          ></dataBlock>
          <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}
            ]"
          ></dataBlock>
          <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},
            ]"
          ></dataBlock>
          <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},
            ]"
          ></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>
      </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> -->
      </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/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('')

let AuthStore = useAuthStore()

let router = useRouter()
let emit = defineEmits(['onSuccess'])
let props = defineProps({})

let refresh = ref(true)
let wrapper = ref(false)

let detail = ref('')

provide('detail',detail)

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 StopFun = (type) => {
  Modal.confirm({
    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()
      })
    },
    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 () {
      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()
      })
    }
   })
}

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 //是否本站点设备

  if (!detail.value.isfeedback) {
    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'
}

provide('detailFun',detailFun)

let timer = setIntervalFun(detailFun,router.currentRoute.value.query.id)

onMounted( () => {
  detailFun()
})
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%;
  min-height: 330px;
  background:  rgb(0, 0, 0,.05);
  padding: 10px;
}
.control .control-left .bottom {
  width: 100%;
  min-width: 290px;
  height: 49%;
  min-height: 330px;
  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 - 245px);
  position: relative;
  display: flex;
  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 .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-radio-button {
  font-size: 12px !important;
}
</style>