|
@@ -1,529 +0,0 @@
|
|
|
-<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>
|