swOperation/src/operation/moduleNormal/controlPanel/model/01/index copy.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" :style="Object.keys(iotcard).length || assets.length ? '--height:49.5%' : '--height:100%'">
        <infoPanel :and-info="false" :is-handle="true"></infoPanel>
      </div>
      <div class="bottom" :style="Object.keys(iotcard).length || assets.length ? '--height:49.5%' : '--height:0%'" v-if="Object.keys(iotcard).length || assets.length">
        <div class="header">
          <span style="color:#ffffff">关联信息</span>
        </div>
        <div class="info">
          <div v-if="Object.keys(iotcard).length">
            <div class="info-item">
              <div class="name">物联卡</div>
              <div class="value">
                <a-tooltip>
                  <template #title>
                    {{ iotcard.iccid }}
                  </template>
                  {{ iotcard.iccid }}
                </a-tooltip>
              </div>
            </div>
            <div class="info-item">
              <div class="name">剩余流量</div>
              <div class="value">
                <a-tooltip>
                  <template #title>
                    {{ calcUnit(iotcard.data_remainamount) }}
                  </template>
                  {{ calcUnit(iotcard.data_remainamount) }}
                </a-tooltip>
              </div>
            </div>
            <div class="info-item">
              <div class="name">余额</div>
              <div class="value">
                <a-tooltip>
                  <template #title>
                    {{ iotcard.balance }}
                  </template>
                  {{ iotcard.data_useamount }}
                </a-tooltip>
              </div>
            </div>
          </div>
          <div class="assets" v-for="(item) in assets" :key="item.w_device_assetid">
            <div class="info-item">
              <div class="name">阀门资产</div>
              <div class="value">
                <a-tooltip>
                  <template #title>
                    {{ item.itemname }}
                  </template>
                  {{ item.itemname }}
                </a-tooltip>
              </div>
            </div>
            <div class="info-item">
              <div class="name">型号</div>
              <div class="value">
                <a-tooltip>
                  <template #title>
                    {{ item.model }}
                  </template>
                  {{ item.model }}
                </a-tooltip>
              </div>
            </div>
            <div class="info-item">
              <div class="name">规格</div>
              <div class="value">
                <a-tooltip>
                  <template #title>
                    {{ item.spec }}
                  </template>
                  {{ item.spec }}
                </a-tooltip>
              </div>
            </div>
            <div class="info-item">
              <div class="name" style="line-height: 88px;">图片</div>
              <div class="value">
                <img :src="item.attinfos.length ? item.attinfos[0].url : ''" alt="">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="control-content" v-if="refresh">
      <div class="map" :style="{transform:`scale(${calcSize})`}">
        <div style="display: inline-block;position: relative">
          <dataBlock 
            style="transform: scale(0.9)"
            :top="20"  
            :left="-40" 
            title="位置"
            :data="[{title:'地址',value:address.address || '--'},{title:detail.params.Longitude.paramname,value:detail.params.Longitude.lastvalue || '--',fontSize:'12px'},{title:detail.params.Latitude.paramname,value,value:detail.params.Latitude.lastvalue || '--',fontSize:'12px'}]"
          >
            <template #handle>
              <a-button v-if="detail.function['position']" size="small" @click="positionCheck" style="width: 100%;margin-top: 5px;" ghost>{{ detail.params.position.paramname }}</a-button>
            </template>
          </dataBlock>
          <dataBlock 
            v-if="detail.params.OpenDeg"
            :title="detail.params.OpenDeg.paramname" 
            :top="20"  
            :left="420" 
            :data="[{value:detail.params.OpenDeg.lastvalue,unit:detail.params.OpenDeg.unit}]"
          ></dataBlock>
          <dataBlock 
            v-if="detail.params.Voltage"
            :title="detail.params.Voltage.paramname" 
            :top="110" 
            :left="420" 
            :data="[{value:detail.params.Voltage.lastvalue,unit:detail.params.Voltage.unit}]"
          ></dataBlock>
          <!-- <div style="position: absolute;top: 180px;left: 10px;" v-if="detail.function['position']">
            <a-button size="small" @click="positionCheck">{{ detail.params.position.paramname }}</a-button>
          </div> -->
          <img :src="imgUrl" alt="">
          <div style="clear: both;"></div>
        </div>
      </div>
      
      
      <div class="chart">
        <MyChart ref="chart" :options="[{label:'阀门开度',value:['OpenDeg'],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">
      <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 dataBlock from '../../modules/dataBlock.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 calcUnit = computed(() => {
  return (value) => {
    if (value) {
      return (value / 1024).toFixed(2) + 'MB'
    } else {
      return '0.0MB'
    }
  }
})

let chart = ref()

let iotcard = ref({})
let assets = ref([])
let uphistory = ref([])
let upParam = ref({
  id:20230701132202,
  content: {
    type:1,
    pageNumber:1,
    pageSize:20,
    w_deviceid:router.currentRoute.value.query.id
  }
})
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 //是否本站点设备

  let res2 = await Api.requested({
    id:20230826160402,
    content: {
      w_deviceid:router.currentRoute.value.query.id
    }
  })
  iotcard.value = res2.data.length ? res2.data[0] : {}
  console.log(iotcard.value,'物联卡信息');

  let res3 = await Api.requested({
    id:20230802163102,
    content: {
      assettype:'阀门',
      pageNumber:1,
      pageSize:999999,
      w_deviceid:router.currentRoute.value.query.id
    }
  })
  assets.value = res3.data
  console.log(assets.value,'阀门资产信息');

  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 positionCheck = () => {
  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['position'].w_functionid,
          "params": {
            'position':1
          }
        }
      })
      utils.message(res,'操作成功', async () => {
        detailFun()
      })
    }
  })
}

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 () => {
  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,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: var(--height);
  background:  rgb(0, 0, 0,.05);
  padding: 10px;
}
.control .control-left .bottom {
  width: 100%;
  min-width: 290px;
  height: var(--height);
  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;
}
</style>