swOperation/src/operation/moduleNormal/controlPanel/model/dianci/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="map">
        <div style="display: inline-block;position: relative">
          <dataBlock 
            v-if="detail.params.NowFlow"
            :title="detail.params.NowFlow.paramname" 
            top="-30" 
            left="0" 
            :data="[{value:detail.params.NowFlow.lastvalue,unit:detail.params.NowFlow.unit},{title:detail.params.CumFlow.paramname,value:detail.params.CumFlow.lastvalue,unit:detail.params.CumFlow.unit}]"
          ></dataBlock>
          <dataBlock 
            v-if="detail.params.UpP"
            :title="detail.params.UpP.paramname" 
            top="250" 
            left="0" 
            :data="[{value:detail.params.UpP.lastvalue,unit:detail.params.UpP.unit}]"
          ></dataBlock>
          <dataBlock 
            v-if="detail.params.Batt4"
            top="-30"  
            left="300" 
            :data="[{title:detail.params.Batt4.paramname,value:detail.params.Batt4.lastvalue,unit:detail.params.Batt4.unit},{title:detail.params.Batt12.paramname,value,value:detail.params.Batt12.lastvalue,unit:detail.params.Batt12.unit},{title:detail.params.BatFlow.paramname,value:detail.params.BatFlow.lastvalue,unit:detail.params.BatFlow.unit}]"
          ></dataBlock>
          <dataBlock :title="detail.params.DaoFa.paramname" top="-30" left="480" v-if="detail.function['Pilot valve'] && detail.params.DaoFa">
            <div style="display: flex;">
              <div style="padding: 0 5px;">
                <a-tag color="blue">{{ detail.params.DaoFa.options.filter(item => item.value == detail.params.DaoFa.lastvalue).length && detail.params.DaoFa.options.filter(item => item.value == +detail.params.DaoFa.lastvalue)[0].label }}</a-tag>
              </div>
              <updataBtn :icon1="detail.paramcmdvalues.DaoFa ? true : false">
                <a-button type="default" size="small" style="margin:5px;" v-for="item in detail.params.DaoFa.options" @click="controlBtn(item)" :disabled="detail.paramcmdvalues.DaoFa == item.value">{{ item.label }}</a-button>
              </updataBtn>
            </div>
            
          </dataBlock>
          <dataBlock 
            v-if="detail.params.DownP"
            :title="detail.params.DownP.paramname" 
            top="250" 
            left="250" 
            :data="[{value:detail.params.DownP.lastvalue,unit:detail.params.DownP.unit}]"
          ></dataBlock>
          <div class="stop" v-if="detail.function['cease']">
            <a-button :type="detail.params.Emer && +detail.params.Emer.lastvalue ?  'primary' : 'danger'" size="small">{{detail.params.Emer && +detail.params.Emer.lastvalue ?  '开启' : detail.function.cease && detail.function.cease.funcname }}</a-button>
            <updataBtn :icon1="detail.paramcmdvalues.Emer ? true : false">
              <a-button :type="detail.params.Emer && +detail.paramcmdvalues.Emer ?  'primary' : 'danger'" size="small" @click="StopFun">{{detail.params.Emer && +detail.paramcmdvalues.Emer ?  '开启' : detail.function.cease && detail.function.cease.funcname }}</a-button>
            </updataBtn>
          </div>
          <img src="@/assets/deviced/电池.png" alt="">
          <div style="clear: both;"></div>
        </div>
      </div>
      <div class="chart">
        <MyChart></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} from 'vue'
import {Modal} from 'ant-design-vue'
import { useRouter } from 'vue-router'
import Api from '@/api/api'
import Http from '@/api/http'
import utils from '@/utils/utils'

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 clickBtn = (tag) => {
  tag.label == '进入全屏' ? wrapper.value = true : wrapper.value = false
  refresh.value = false
  setTimeout(() => {
    refresh.value = true
  })
}

let StopFun = () => {
  Modal.confirm({
    title:`确定${+detail.value.paramvalues.Emer ?'开启' : detail.value.function.cease.funcname}吗?`,
    async onOk () {
      let res = await Api.requested({
        "id": "20230627163701",
        "content": {
          "w_deviceid": router.currentRoute.value.query.id,
          "w_functionid": detail.value.function['cease'].w_functionid,
          "params": {
            'Emer':detail.value.function['cease'].params.Emer == '0' ? '1' : '0'
          }
        }
      })
      utils.message(res,'操作成功', async () => {
        detailFun()
      })
    }
  })
}

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
  console.log(res.data);
}

/* 适配 */
let set =  () => {
  let baseWidth = 1700
  console.log('基准值:2133',document.body.clientWidth);
  document.querySelector('html').style.fontSize = `${100 / baseWidth}vw`
}

let timer = setInterval(async () => {
  let res = await Api.isRefreshDevice({
    "w_deviceid":router.currentRoute.value.query.id,
  },'get')
  if (res) detailFun()
},5000)

onMounted( () => {
  detailFun()
  set()
  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,.25);
  padding: 10px;
}
.control .control-left .bottom {
  width: 100%;
  min-width: 290px;
  height: 49.5%;
  background:  rgb(0, 0, 0,.25);
  padding: 10px;
}

.control .control-content {
  flex:1 ;
  height: 100%;
  padding: 0 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}
.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;
  min-width: 600px;
  min-height: 420px;
  padding: 0 70rem;
}
.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,.25);
  padding: 0 10px 10px 0;
}

.control .control-right {
  width: 272px;
  height: 100%;
  background:  rgb(0, 0, 0,.25);
  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: 60rem;
  height: 60rem;
  font-size: 12rem;
}
</style>