swOperation/src/operation/moduleNormal/controlPanel/model/FW01/index.vue

<template>
  <baidu-map
    class="view"
    :center="latlng"
    :zoom="zoom"
    :scroll-wheel-zoom="true"
    @ready="ready">
  </baidu-map>
  <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="network">
        <span style="color:#ffffff;font-size: 10px;">信号强度：</span>
        <network :num="Math.abs(detail.paramvalues.U004)"></network>
      </div>
      <div class="lamp-box" style="z-index: 9;">
        <div style="position: relative;">
          <div v-if="detail.params.A005.lastvalue == 1" style="position: absolute;left: 85px;top: 18px;"><customBtn :btnOptions="[{label:'复位',icon:false}]" :icon1="false" @click="back"></customBtn></div>
          <Lamp :isTrue="detail.params.A005 ? detail.params.A005.lastvalue == 1 : false">{{ detail.params.A005 && detail.params.A005.paramname }}</Lamp>
          <Lamp :isTrue="detail.params.A002 ? detail.params.A002.lastvalue == 1 : false">{{ detail.params.A002 && detail.params.A002.paramname }}</Lamp>
        </div>
      </div>
      <div class="map" :style="{transform:`scale(${calcSize})`}">
        <div style="display: inline-block;position: relative">
          <dataBlock 
            v-if="detail.params.U002"
            :title="detail.params.U002.paramname" 
            :top="20"  
            :left="420" 
            :data="[{value:detail.params.U002.lastvalue,unit:detail.params.U002.unit}]"
          ></dataBlock>
          <dataBlock 
            v-if="detail.params.U003"
            :title="detail.params.U003.paramname" 
            :top="110" 
            :left="420" 
            :data="[{value:detail.params.U003.lastvalue,unit:detail.params.U003.unit}]"
          ></dataBlock>
          <img :src="imgUrl" alt="">
          <div style="clear: both;"></div>
        </div>
      </div>
      
      
      <div class="chart">
        <MyChart ref="chart" :options="[{label:'阀门开度',value:['U002'],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" v-if="false">
      <div class="header">
        <span style="color:#ffffff">上传日志</span>
      </div>
      <div class="upinfo" v-load-directive="historyLoad">
        <div class="upinfo-wrapper" v-if="uphistory.length">
          <div class="upinfo-item" v-for="(item) in uphistory" :key="item.rowindex">
            <div class="name">{{ item.createdate }}</div>
            <div class="value">
              <a-tooltip>
                <template #title>
                  {{ item.content }}
                </template>
                {{ item.content }}
              </a-tooltip>
            </div>
          </div>
        </div>
        <a-empty :image="simpleImage" v-else />
      </div>
    </div>
  </div>
</template>

<script setup>
import infoPanel from '../../modules/infoPanel.vue'
import MyChart from '../../modules/MyChart.vue'
import customBtn from '../../modules/customBtn.vue'
import Lamp from '../../modules/lamp.vue'
import dataBlock from '../../modules/dataBlock.vue'
import controlPanel from './modules/controlPanel.vue'
import network from '@/operation/moduleNormal/controlPanel/modules/network.vue'
import Map from '@/operation/moduleNormal/equipmentMag/modules/map.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 { Empty } from 'ant-design-vue';
const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;

let AuthStore = useAuthStore()
let map1 = ref()

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 chart = ref()

let uphistory = ref([])
let upParam = ref({
  id:20230701132202,
  content: {
    type:1,
    pageNumber:1,
    pageSize:20,
    w_deviceid:router.currentRoute.value.query.id
  }
})

let back = async () => {
  Modal.confirm({
  title:'确定复位吗?',
  async onOk () {
    let functions = detail.value.function.开度提醒复位
    let res = await Api.requested({
      "id": "20230627163701",
      "content": {
        "w_deviceid": router.currentRoute.value.query.id,
        "w_functionid": functions.w_functionid,
        "params": {
          A005:0
        }
      }
    })
    utils.message(res,'复位成功',async () => {
      emit('onSuccess')
    })
  }
  })
  
}

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]
    })
  }

}

provide('detailFun',detailFun)

let address = ref('')
let ready = async () => {
  address.value = detail.value.paramvalues.Longitude && detail.value.paramvalues.Latitude ? await utils.getLocation({lng:detail.value.paramvalues.Longitude,lat:detail.value.paramvalues.Latitude}) : '--'
  console.log(address,'地址');
}

let vLoadDirective = {
  mounted (el,binding) {
    let tableWarp = el
    function handleFun (e) {
      if (tableWarp.scrollTop + tableWarp.clientHeight >= tableWarp.scrollHeight) {
        binding.value()
      }
    }
    tableWarp.addEventListener('scroll',handleFun)
    el.tableWarp = tableWarp
    el.handleFun = handleFun
  },
  unmounted(el) {
    el.tableWarp.removeEventListener('scroll',el.handleFun)
  },
}

let TotalPage = ref(0)
let loading = ref(false)
let historyLoad = () => {
  if (upParam.value.content.pageNumber == TotalPage.value || loading.value == true) return
  upParam.value.content.pageNumber += 1
  console.log(upParam.value);
  getHistoryData()
}

let getHistoryData = async () => {
  return;
  loading.value = true
  upParam.value.content.timer = new Date().getTime()
  let res = await Api.requested(upParam.value)
  console.log(res);
  uphistory.value = upParam.value.content.pageNumber == 1 ? res.data : uphistory.value.concat(res.data)
  TotalPage.value = res.pageTotal
  setTimeout(() => {
    loading.value = false
  },1500)
  console.log(uphistory.value,'上传日志信息');
}
 
//刷新数据
let timer = setIntervalFun([detailFun,getHistoryData],router.currentRoute.value.query.id)

onMounted( () => {
  detailFun()
  getHistoryData()
})
onUnmounted(() => {
  clearInterval(timer)
})
</script>

<style scoped>
/deep/.ant-empty-description {
  color: #ffffff !important;
}
*{
  box-sizing: border-box;
}
.control {
  display: flex;
  height: calc(100vh - 115px);
  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: 59.5%;
  background:  rgb(0, 0, 0,.05);
  padding: 10px;
}
.control .control-left .bottom {
  width: 100%;
  min-width: 290px;
  height: 39.5%;
  background:  rgb(0, 0, 0,.05);
  padding: 10px;
  margin-top: 20px;
}

.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;
}

.control .control-right .upinfo {
  overflow-y: scroll;
  height: calc(100% - 10px);
  scrollbar-width: none;
}
.control .control-right .upinfo .upinfo-item {
  display: flex;
  margin-bottom: 10px;
}
.control .control-right .upinfo .upinfo-item .name {
  font-size: 12px;
  color: #ffffff;
  background: rgb(255, 225, 255,.25);
  padding: 0 10px;
  width: 100px;
  text-align: center;

  display: -webkit-box;
  -webkit-box-align: center;
  -webkit-align-items: center;
}
.control .control-right .upinfo .upinfo-item .value {
  font-size: 12px;
  color:#16FFF6;
  background: rgb(255, 225, 255,.10);
  padding: 0 10px;
  flex: 100;
  overflow: hidden;
  word-break: break-all;
}

.info {
  overflow-y: scroll;
  height: calc(100% - 25px);
  scrollbar-width: none;
}
::-webkit-scrollbar {
  display: none;
}
.info .info-item {
  display: flex;
  line-height: 32px;
  white-space: nowrap;
}
.info .info-item .name {
  font-size: 12px;
  color: #ffffff;
  background: rgb(255, 225, 255,.25);
  padding: 0 10px;
  width: 100px;
}
.info .info-item .value {
  font-size: 12px;
  color:#16FFF6;
  background: rgb(255, 225, 255,.10);
  padding: 0 10px;
  flex: 100;
  text-align: right;
  overflow: hidden;
}
.info .info-item .value img {
  width: 100%;
}
.info .assets {
  margin-top: 10px;
}
.info .assets .info-item {
  margin-bottom: 0px !important;
}
/deep/.ant-btn-background-ghost:hover {
  border-color: #16FFF6 !important;
  color: #16FFF6 !important;
  background: rgb(22,255,246,.30) !important;
}
.lamp-box {
  position: absolute;
  left:30px;
  top:80px;
  margin: 70px 0 0 20px;
  transform: scale(0.9);
}
.network {
  display: flex;
  align-items: center;
  position: absolute;
  left:50px;
  top:100px;
}
</style>