|
@@ -13,16 +13,27 @@
|
|
|
</a-col>
|
|
|
</a-row>
|
|
|
</div>
|
|
|
- <div class="content" style="--zIndex:999">
|
|
|
+ <div class="content" style="--zIndex: 999">
|
|
|
<!--顶部搜索已经其他操作-->
|
|
|
<div class="header-control">
|
|
|
<div class="left">
|
|
|
- <a-button style="margin:8px 22px" type="primary" size="small" round @click="model=false" v-if="model==true">切换列表</a-button>
|
|
|
+ <a-button
|
|
|
+ style="margin: 8px 22px"
|
|
|
+ type="primary"
|
|
|
+ size="small"
|
|
|
+ round
|
|
|
+ @click="model = false"
|
|
|
+ v-if="model == true"
|
|
|
+ >切换列表</a-button
|
|
|
+ >
|
|
|
<!-- <a-input v-if="model" placeholder="区域" v-model:value="param.content.where.areaname" @keyup.enter="listData"></a-input> -->
|
|
|
</div>
|
|
|
</div>
|
|
|
<!--地图-->
|
|
|
- <div class="M-map" :style="model ? 'display:inline-block' : 'display:none'">
|
|
|
+ <div
|
|
|
+ class="M-map"
|
|
|
+ :style="model ? 'display:inline-block' : 'display:none'"
|
|
|
+ >
|
|
|
<baidu-map
|
|
|
class="map"
|
|
|
ref="map"
|
|
@@ -31,39 +42,76 @@
|
|
|
:scroll-wheel-zoom="true"
|
|
|
@ready="mapReady"
|
|
|
@click="mapClick"
|
|
|
- :mapStyle="mapConfig">
|
|
|
- <bm-marker
|
|
|
- v-for="item in list"
|
|
|
- :position="{lat:item.latitude,lng:item.longitude}"
|
|
|
- @click="devicedClick($event,item)"
|
|
|
- :icon="{url:MarkerIcon,size:{width:25,height:25}}"
|
|
|
+ :mapStyle="mapConfig"
|
|
|
+ >
|
|
|
+ <bm-marker
|
|
|
+ v-for="item in list"
|
|
|
+ :position="{ lat: item.latitude, lng: item.longitude }"
|
|
|
+ @click="devicedClick($event, item)"
|
|
|
+ :icon="{ url: MarkerIcon, size: { width: 25, height: 25 } }"
|
|
|
>
|
|
|
- <bm-label :content="item.devicename" :labelStyle="{border:'none'}" :offset="{width: -35, height: 16}"/>
|
|
|
+ <bm-label
|
|
|
+ :content="item.devicename"
|
|
|
+ :labelStyle="{ border: 'none' }"
|
|
|
+ :offset="{ width: -35, height: 16 }"
|
|
|
+ />
|
|
|
</bm-marker>
|
|
|
</baidu-map>
|
|
|
|
|
|
<!--设备信息面板-->
|
|
|
- <div class="info-panel" :style="infoPanel.baseInfo ? 'display:inline-block' : 'display:none'">
|
|
|
+ <div
|
|
|
+ class="info-panel"
|
|
|
+ :style="infoPanel.baseInfo ? 'display:inline-block' : 'display:none'"
|
|
|
+ >
|
|
|
<div class="info-header">
|
|
|
<div class="left">
|
|
|
<span>设备信息</span>
|
|
|
</div>
|
|
|
<div class="right">
|
|
|
- <customBtn :btn="true" :btn-options="[{'label':'控制面板'}]" @clickBtn="router.push({path:'/' + infoPanel.baseInfo.prodnum,query:{id:infoPanel.baseInfo.w_deviceid}})"></customBtn>
|
|
|
+ <customBtn
|
|
|
+ :btn="true"
|
|
|
+ :btn-options="[{ label: '控制面板' }]"
|
|
|
+ @clickBtn="
|
|
|
+ router.push({
|
|
|
+ path: '/' + infoPanel.baseInfo.prodnum,
|
|
|
+ query: { id: infoPanel.baseInfo.w_deviceid },
|
|
|
+ })
|
|
|
+ "
|
|
|
+ ></customBtn>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="map-deviced-info">
|
|
|
- <p>设备名称:<span>{{ infoPanel.baseInfo.devicename }}</span></p>
|
|
|
- <p>设备编码:<span>{{ infoPanel.baseInfo.serialnumber }}</span></p>
|
|
|
- <p>状态:<a-tag type="info">{{ infoPanel.baseInfo.status }}</a-tag></p>
|
|
|
- <p>区域:<span>{{ infoPanel.baseInfo.areaname }}</span></p>
|
|
|
- <p>设备地点:<span>{{ infoPanel.baseInfo.address }}</span></p>
|
|
|
- <p>固件版本:<span>{{ infoPanel.baseInfo.version }}</span></p>
|
|
|
- <p>上次在线时间:<span>{{ infoPanel.baseInfo.lastconnecttime }}</span></p>
|
|
|
+ <p>
|
|
|
+ 设备名称:<span>{{ infoPanel.baseInfo.devicename }}</span>
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ 设备编码:<span>{{ infoPanel.baseInfo.serialnumber }}</span>
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ 状态:<a-tag type="info">{{ infoPanel.baseInfo.status }}</a-tag>
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ 区域:<span>{{ infoPanel.baseInfo.areaname }}</span>
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ 设备地点:<span>{{ infoPanel.baseInfo.address }}</span>
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ 固件版本:<span>{{ infoPanel.baseInfo.version }}</span>
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ 上次在线时间:<span>{{
|
|
|
+ infoPanel.baseInfo.lastconnecttime
|
|
|
+ }}</span>
|
|
|
+ </p>
|
|
|
</div>
|
|
|
<p>监测指数</p>
|
|
|
<div class="data-info">
|
|
|
- <p v-for="item in infoPanel.dataInfo">{{ item.paramname }}:<span>{{ item.lastvalue }}{{ item.unit }}</span></p>
|
|
|
+ <p v-for="item in infoPanel.dataInfo">
|
|
|
+ {{ item.paramname }}:<span
|
|
|
+ >{{ item.lastvalue }}{{ item.unit }}</span
|
|
|
+ >
|
|
|
+ </p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!--控制点显示面板-->
|
|
@@ -96,91 +144,120 @@
|
|
|
|
|
|
</div> -->
|
|
|
</div>
|
|
|
- <!--列表-->
|
|
|
- <a-card :bordered="false" class="M-list" v-if="!model">
|
|
|
- <template #title>
|
|
|
- <a-button type="primary" size="small" round @click="model=true">切换地图</a-button>
|
|
|
- </template>
|
|
|
- <normalTable rowKey="w_deviceid" :is-select="false" ref="list2" size="small" :param="param2" :columns="utils.TBLayout('equipmentTable')">
|
|
|
- <template #tb_cell="{data}">
|
|
|
- <div v-if="data.column.dataIndex == 'operation'">
|
|
|
- <a-button type="link" @click="router.push({path:'/' + (data.record.dashboardpath || 'baseDevice'),query:{id:data.record.w_deviceid}})">控制界面</a-button>
|
|
|
- </div>
|
|
|
- <template v-else-if="data.column.dataIndex === 'isused'">
|
|
|
- <span :style="{color:utils.statusAndColor(data.record.isused ? '启用' : '停用')}">{{ data.record.isused ? '启用' : '停用' }}</span>
|
|
|
- </template>
|
|
|
- <div v-else-if="data.column.dataIndex == 'rwtype'">
|
|
|
- {{ data.record.rwtype == 0 ? '读' : data.record.rwtype == 1 ? '写' : '上报' }}
|
|
|
- </div>
|
|
|
- <div v-else>
|
|
|
- {{ data.record[data.column.dataIndex] }}
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <template #operation>
|
|
|
-
|
|
|
+ <!--列表-->
|
|
|
+ <a-card :bordered="false" class="M-list" v-if="!model">
|
|
|
+ <template #title>
|
|
|
+ <a-button type="primary" size="small" round @click="model = true"
|
|
|
+ >切换地图</a-button
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ <normalTable
|
|
|
+ rowKey="w_deviceid"
|
|
|
+ :is-select="false"
|
|
|
+ ref="list2"
|
|
|
+ size="small"
|
|
|
+ :param="param2"
|
|
|
+ :columns="utils.TBLayout('equipmentTable')"
|
|
|
+ >
|
|
|
+ <template #tb_cell="{ data }">
|
|
|
+ <div v-if="data.column.dataIndex == 'operation'">
|
|
|
+ <a-button
|
|
|
+ type="link"
|
|
|
+ @click="
|
|
|
+ router.push({
|
|
|
+ path: '/' + (data.record.dashboardpath || 'baseDevice'),
|
|
|
+ query: { id: data.record.w_deviceid },
|
|
|
+ })
|
|
|
+ "
|
|
|
+ >控制界面</a-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <template v-else-if="data.column.dataIndex === 'isused'">
|
|
|
+ <span
|
|
|
+ :style="{
|
|
|
+ color: utils.statusAndColor(
|
|
|
+ data.record.isused ? '启用' : '停用'
|
|
|
+ ),
|
|
|
+ }"
|
|
|
+ >{{ data.record.isused ? "启用" : "停用" }}</span
|
|
|
+ >
|
|
|
</template>
|
|
|
- </normalTable>
|
|
|
- </a-card>
|
|
|
+ <div v-else-if="data.column.dataIndex == 'rwtype'">
|
|
|
+ {{
|
|
|
+ data.record.rwtype == 0
|
|
|
+ ? "读"
|
|
|
+ : data.record.rwtype == 1
|
|
|
+ ? "写"
|
|
|
+ : "上报"
|
|
|
+ }}
|
|
|
+ </div>
|
|
|
+ <div v-else>
|
|
|
+ {{ data.record[data.column.dataIndex] }}
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template #operation> </template>
|
|
|
+ </normalTable>
|
|
|
+ </a-card>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-import mapConfig from './modules/mapConfig.js'
|
|
|
-import MarkerIcon from '../../../assets/map/marker1.svg'
|
|
|
-import customBtn from '../controlPanel/modules/customBtn.vue'
|
|
|
-import productInfo from './modules/productInfo.vue'
|
|
|
-import deviceInfo from './modules/deviceInfo.vue'
|
|
|
-import dataInfo from './modules/dataInfo.vue'
|
|
|
-import normalTable from '@/template/normalTable/index.vue'
|
|
|
-import { useRouter } from 'vue-router'
|
|
|
-import {ref, defineProps, defineEmits, onMounted} from 'vue'
|
|
|
-import Api from '@/api/api'
|
|
|
-import utils from '@/utils/utils'
|
|
|
-let emit = defineEmits([])
|
|
|
-let props = defineProps({})
|
|
|
+import mapConfig from "./modules/mapConfig.js";
|
|
|
+import MarkerIcon from "../../../assets/map/marker1.svg";
|
|
|
+import customBtn from "../controlPanel/modules/customBtn.vue";
|
|
|
+import productInfo from "./modules/productInfo.vue";
|
|
|
+import deviceInfo from "./modules/deviceInfo.vue";
|
|
|
+import dataInfo from "./modules/dataInfo.vue";
|
|
|
+import normalTable from "@/template/normalTable/index.vue";
|
|
|
+import { useRouter } from "vue-router";
|
|
|
+import { ref, defineProps, defineEmits, onMounted } from "vue";
|
|
|
+import Api from "@/api/api";
|
|
|
+import utils from "@/utils/utils";
|
|
|
+let emit = defineEmits([]);
|
|
|
+let props = defineProps({});
|
|
|
let param = ref({
|
|
|
- "id": 20230711144102,
|
|
|
- "content": {
|
|
|
- "pageNumber": 1,
|
|
|
- "pageSize": 999999,
|
|
|
- "where": {
|
|
|
- "condition": "",
|
|
|
- "areaname": ""
|
|
|
- }
|
|
|
+ id: 20230711144102,
|
|
|
+ content: {
|
|
|
+ pageNumber: 1,
|
|
|
+ pageSize: 999999,
|
|
|
+ where: {
|
|
|
+ condition: "",
|
|
|
+ areaname: "",
|
|
|
+ },
|
|
|
},
|
|
|
-})
|
|
|
+});
|
|
|
let param2 = ref({
|
|
|
- "id": 20230711144102,
|
|
|
- "content": {
|
|
|
- "pageNumber": 1,
|
|
|
- "pageSize": 20,
|
|
|
- "where": {
|
|
|
- "condition": "",
|
|
|
- "areaname": ""
|
|
|
- }
|
|
|
+ id: 20230711144102,
|
|
|
+ content: {
|
|
|
+ pageNumber: 1,
|
|
|
+ pageSize: 20,
|
|
|
+ where: {
|
|
|
+ condition: "",
|
|
|
+ areaname: "",
|
|
|
+ },
|
|
|
},
|
|
|
-})
|
|
|
+});
|
|
|
|
|
|
-let list = ref([])
|
|
|
+let list = ref([]);
|
|
|
let latlng = ref({
|
|
|
- lat:0,
|
|
|
- lng:0
|
|
|
-})
|
|
|
-let zoom = ref(3)
|
|
|
-let model = ref(true)
|
|
|
-let map = ref()
|
|
|
+ lat: 0,
|
|
|
+ lng: 0,
|
|
|
+});
|
|
|
+let zoom = ref(3);
|
|
|
+let model = ref(true);
|
|
|
+let map = ref();
|
|
|
let infoPanel = ref({
|
|
|
- baseInfo:'',
|
|
|
- dataInfo:''
|
|
|
-})
|
|
|
-let dataInfoList = ref([])
|
|
|
+ baseInfo: "",
|
|
|
+ dataInfo: "",
|
|
|
+});
|
|
|
+let dataInfoList = ref([]);
|
|
|
|
|
|
-let router = useRouter()
|
|
|
+let router = useRouter();
|
|
|
|
|
|
let autoRange = (map, points_arr) => {
|
|
|
if (points_arr.length === 0) {
|
|
|
- return
|
|
|
+ return;
|
|
|
}
|
|
|
/**
|
|
|
* 先计算中心点坐标
|
|
@@ -195,170 +272,152 @@ let autoRange = (map, points_arr) => {
|
|
|
* 目标点的经度需要大于左下角点的经度并且小于右上角的经度
|
|
|
*
|
|
|
*/
|
|
|
- let max_lng = points_arr[0].split(',')[0],
|
|
|
- min_lat = points_arr[0].split(',')[1],
|
|
|
- max_lat = points_arr[0].split(',')[1],
|
|
|
- min_lng = points_arr[0].split(',')[0]
|
|
|
+ let max_lng = points_arr[0].split(",")[0],
|
|
|
+ min_lat = points_arr[0].split(",")[1],
|
|
|
+ max_lat = points_arr[0].split(",")[1],
|
|
|
+ min_lng = points_arr[0].split(",")[0];
|
|
|
for (let i = 0; i < points_arr.length - 1; i++) {
|
|
|
- let lng_lat = points_arr[i + 1].split(',')
|
|
|
- // max = max < arr[i+1] ? arr[i+1] : max
|
|
|
- max_lng = max_lng < lng_lat[0] ? lng_lat[0] : max_lng
|
|
|
- min_lng = min_lng > lng_lat[0] ? lng_lat[0] : min_lng
|
|
|
- max_lat = max_lat < lng_lat[1] ? lng_lat[1] : max_lat
|
|
|
- min_lat = min_lat > lng_lat[1] ? lng_lat[1] : min_lat
|
|
|
+ let lng_lat = points_arr[i + 1].split(",");
|
|
|
+ // max = max < arr[i+1] ? arr[i+1] : max
|
|
|
+ max_lng = max_lng < lng_lat[0] ? lng_lat[0] : max_lng;
|
|
|
+ min_lng = min_lng > lng_lat[0] ? lng_lat[0] : min_lng;
|
|
|
+ max_lat = max_lat < lng_lat[1] ? lng_lat[1] : max_lat;
|
|
|
+ min_lat = min_lat > lng_lat[1] ? lng_lat[1] : min_lat;
|
|
|
}
|
|
|
// console.log((Number(max_lng) + Number(min_lng)) / 2,(Number(max_lat)+Number(min_lat))/2);
|
|
|
- let n_lng = (Number(max_lng) + Number(min_lng)) / 2
|
|
|
- let n_lat = (Number(max_lat) + Number(min_lat)) / 2
|
|
|
+ let n_lng = (Number(max_lng) + Number(min_lng)) / 2;
|
|
|
+ let n_lat = (Number(max_lat) + Number(min_lat)) / 2;
|
|
|
|
|
|
/**
|
|
|
* 计算层级
|
|
|
* 百度地图比例尺与级别关系
|
|
|
*/
|
|
|
- let bs = map.getBounds() //获取可视区域
|
|
|
- let bssw = bs.getSouthWest() //可视区域左下角
|
|
|
- let bsne = bs.getNorthEast() //可视区域右上角
|
|
|
-// 百度地图比例尺与级别关系,参考https://blog.csdn.net/tjj3027/article/details/81015138
|
|
|
+ let bs = map.getBounds(); //获取可视区域
|
|
|
+ let bssw = bs.getSouthWest(); //可视区域左下角
|
|
|
+ let bsne = bs.getNorthEast(); //可视区域右上角
|
|
|
+ // 百度地图比例尺与级别关系,参考https://blog.csdn.net/tjj3027/article/details/81015138
|
|
|
const map_rule = [
|
|
|
- 500000,
|
|
|
- 250000,
|
|
|
- 100000,
|
|
|
- 50000,
|
|
|
- 25000,
|
|
|
- 10000,
|
|
|
- 5000,
|
|
|
- 2500,
|
|
|
- 1250,
|
|
|
- 1000,
|
|
|
- 500,
|
|
|
- 250,
|
|
|
- 100,
|
|
|
- 50,
|
|
|
- 25,
|
|
|
- 10,
|
|
|
- 5,
|
|
|
- 2.5,
|
|
|
- 1,
|
|
|
- ]
|
|
|
+ 500000, 250000, 100000, 50000, 25000, 10000, 5000, 2500, 1250, 1000, 500,
|
|
|
+ 250, 100, 50, 25, 10, 5, 2.5, 1,
|
|
|
+ ];
|
|
|
|
|
|
- let zoomA = [4, 4]
|
|
|
+ let zoomA = [4, 4];
|
|
|
for (let j = 0; j < 2; j++) {
|
|
|
- let viewSize, searchSize
|
|
|
- if (j === 0) {
|
|
|
- viewSize = bsne.lng - bssw.lng // 当前可视宽度右上角经度-左下角经度
|
|
|
- searchSize = (max_lng - min_lng) * 1.1 // 搜索结果的最大宽度 经度最大值-经度最小值
|
|
|
- } else {
|
|
|
- viewSize = bsne.lat - bssw.lat // 当前可视高度右上角纬度-左下角纬度
|
|
|
- searchSize = (max_lat - min_lat) * 1.1 // 搜索结果的最大宽度 纬度最大值-纬度最小值
|
|
|
- }
|
|
|
+ let viewSize, searchSize;
|
|
|
+ if (j === 0) {
|
|
|
+ viewSize = bsne.lng - bssw.lng; // 当前可视宽度右上角经度-左下角经度
|
|
|
+ searchSize = (max_lng - min_lng) * 1.1; // 搜索结果的最大宽度 经度最大值-经度最小值
|
|
|
+ } else {
|
|
|
+ viewSize = bsne.lat - bssw.lat; // 当前可视高度右上角纬度-左下角纬度
|
|
|
+ searchSize = (max_lat - min_lat) * 1.1; // 搜索结果的最大宽度 纬度最大值-纬度最小值
|
|
|
+ }
|
|
|
|
|
|
- let minDiff = 0
|
|
|
- for (let i = 0; i < map_rule.length; i++) {
|
|
|
- let diff =
|
|
|
- (viewSize * map_rule[i]) / map_rule[zoom.value - 1] - searchSize
|
|
|
- if (diff > 0) {
|
|
|
- if (minDiff == 0 || diff < minDiff) {
|
|
|
- zoomA[j] = i + 1
|
|
|
- minDiff = diff
|
|
|
- }
|
|
|
- }
|
|
|
+ let minDiff = 0;
|
|
|
+ for (let i = 0; i < map_rule.length; i++) {
|
|
|
+ let diff =
|
|
|
+ (viewSize * map_rule[i]) / map_rule[zoom.value - 1] - searchSize;
|
|
|
+ if (diff > 0) {
|
|
|
+ if (minDiff == 0 || diff < minDiff) {
|
|
|
+ zoomA[j] = i + 1;
|
|
|
+ minDiff = diff;
|
|
|
+ }
|
|
|
}
|
|
|
+ }
|
|
|
}
|
|
|
- let zoom1 = zoomA[0] > zoomA[1] ? zoomA[1] : zoomA[0]
|
|
|
+ let zoom1 = zoomA[0] > zoomA[1] ? zoomA[1] : zoomA[0];
|
|
|
// 设定地图最大缩放层级为18,最小为4
|
|
|
- zoom1 = zoom1 >= 18 ? 18 : zoom1
|
|
|
- zoom1 = zoom1 <= 4 ? 4 : zoom1
|
|
|
-/*
|
|
|
-* 图移动到新的中点,调整好层级
|
|
|
-* 这里使用 map.centerAndZoom(new BMap.Point(n_lng, n_lat),zoom)
|
|
|
-* 屏幕可能会过度晃动,暂时知道原因,所以用了下面的方案
|
|
|
-**/
|
|
|
- zoom.value = zoom1
|
|
|
+ zoom1 = zoom1 >= 18 ? 18 : zoom1;
|
|
|
+ zoom1 = zoom1 <= 4 ? 4 : zoom1;
|
|
|
+ /*
|
|
|
+ * 图移动到新的中点,调整好层级
|
|
|
+ * 这里使用 map.centerAndZoom(new BMap.Point(n_lng, n_lat),zoom)
|
|
|
+ * 屏幕可能会过度晃动,暂时知道原因,所以用了下面的方案
|
|
|
+ **/
|
|
|
+ zoom.value = zoom1;
|
|
|
function setCenter() {
|
|
|
- map.panTo(new BMap.Point(n_lng, n_lat), { noAnimation: false }) // 设置中心点坐标
|
|
|
- console.log('触发')
|
|
|
- map.removeEventListener('tilesloaded', setCenter)
|
|
|
+ map.panTo(new BMap.Point(n_lng, n_lat), { noAnimation: false }); // 设置中心点坐标
|
|
|
+ console.log("触发");
|
|
|
+ map.removeEventListener("tilesloaded", setCenter);
|
|
|
}
|
|
|
//地图加载完毕(地图稍微有改动就会触发) 当地图所有图块完成加载时触发此事件
|
|
|
map.addEventListener("tilesloaded", setCenter);
|
|
|
-}
|
|
|
+};
|
|
|
|
|
|
let listData = async () => {
|
|
|
- let res = await Api.requested(param.value)
|
|
|
- list.value = res.data.filter(item => item.latitude != '')
|
|
|
+ let res = await Api.requested(param.value);
|
|
|
+ list.value = res.data.filter((item) => item.latitude != "");
|
|
|
if (!list.value.length) {
|
|
|
latlng.value = {
|
|
|
- lat:32.98007167711148,
|
|
|
- lng:110.34538404697058
|
|
|
- }
|
|
|
- zoom.value = 6
|
|
|
+ lat: 32.98007167711148,
|
|
|
+ lng: 110.34538404697058,
|
|
|
+ };
|
|
|
+ zoom.value = 6;
|
|
|
}
|
|
|
-
|
|
|
-}
|
|
|
+};
|
|
|
|
|
|
let getData = async () => {
|
|
|
let res = await Api.requested({
|
|
|
- "id": 20230711101902,
|
|
|
- "content": {},
|
|
|
- })
|
|
|
- dataInfoList.value = res.data
|
|
|
+ id: 20230711101902,
|
|
|
+ content: {},
|
|
|
+ });
|
|
|
+ dataInfoList.value = res.data;
|
|
|
console.log(dataInfoList.value);
|
|
|
-}
|
|
|
+};
|
|
|
|
|
|
-let mapReady = ({Bmap,map}) => {
|
|
|
- let lngLatArr = list.value.map(item => {
|
|
|
- return item.longitude + ',' + item.latitude
|
|
|
- })
|
|
|
- map.value = map
|
|
|
- autoRange(map,lngLatArr)
|
|
|
-}
|
|
|
+let mapReady = ({ Bmap, map }) => {
|
|
|
+ let lngLatArr = list.value.map((item) => {
|
|
|
+ return item.longitude + "," + item.latitude;
|
|
|
+ });
|
|
|
+ map.value = map;
|
|
|
+ autoRange(map, lngLatArr);
|
|
|
+};
|
|
|
|
|
|
let mapClick = (e) => {
|
|
|
console.log(e);
|
|
|
- if(infoPanel.value.baseInfo) infoPanel.value = {baseInfo:'',dataInfo:''}
|
|
|
-}
|
|
|
+ if (infoPanel.value.baseInfo)
|
|
|
+ infoPanel.value = { baseInfo: "", dataInfo: "" };
|
|
|
+};
|
|
|
|
|
|
-let devicedClick = async (map,data) => {
|
|
|
- console.log(map,data,'触发');
|
|
|
+let devicedClick = async (map, data) => {
|
|
|
+ console.log(map, data, "触发");
|
|
|
let res = await Api.requested({
|
|
|
- "id": 20230711165702,
|
|
|
- "content": {
|
|
|
- "w_deviceid": data.w_deviceid
|
|
|
+ id: 20230711165702,
|
|
|
+ content: {
|
|
|
+ w_deviceid: data.w_deviceid,
|
|
|
},
|
|
|
- })
|
|
|
+ });
|
|
|
infoPanel.value = {
|
|
|
- baseInfo:data,
|
|
|
- dataInfo:res.data
|
|
|
- }
|
|
|
-}
|
|
|
+ baseInfo: data,
|
|
|
+ dataInfo: res.data,
|
|
|
+ };
|
|
|
+};
|
|
|
|
|
|
let modelChange = () => {
|
|
|
if (model.value) {
|
|
|
- listData()
|
|
|
+ listData();
|
|
|
}
|
|
|
-}
|
|
|
+};
|
|
|
|
|
|
-router.afterEach( route => {
|
|
|
- if (route.path == '/IoTdashboard') set()
|
|
|
-})
|
|
|
+router.afterEach((route) => {
|
|
|
+ if (route.path == "/IoTdashboard") set();
|
|
|
+});
|
|
|
|
|
|
/* 适配 */
|
|
|
-let set = () => {
|
|
|
- let baseWidth = 2133
|
|
|
- document.querySelector('html').style.fontSize = `${100 / baseWidth}vw`
|
|
|
-}
|
|
|
+let set = () => {
|
|
|
+ let baseWidth = 2133;
|
|
|
+ document.querySelector("html").style.fontSize = `${100 / baseWidth}vw`;
|
|
|
+};
|
|
|
|
|
|
onMounted(() => {
|
|
|
- getData()
|
|
|
- listData()
|
|
|
- set()
|
|
|
- console.log(utils.TBLayout('equipmentTable'));
|
|
|
-})
|
|
|
-
|
|
|
+ getData();
|
|
|
+ listData();
|
|
|
+ set();
|
|
|
+ console.log(utils.TBLayout("equipmentTable"));
|
|
|
+});
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
-*{
|
|
|
+* {
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
.M-container {
|
|
@@ -392,10 +451,9 @@ onMounted(() => {
|
|
|
align-items: center;
|
|
|
}
|
|
|
|
|
|
-
|
|
|
.info-panel {
|
|
|
width: 350rem;
|
|
|
- background: rgb(90,100,119,.8) !important;
|
|
|
+ background: rgb(90, 100, 119, 0.8) !important;
|
|
|
position: absolute;
|
|
|
top: 50%;
|
|
|
left: 20%;
|
|
@@ -411,20 +469,20 @@ onMounted(() => {
|
|
|
align-items: center;
|
|
|
}
|
|
|
.info-panel .map-deviced-info {
|
|
|
- background: rgba(255, 255, 255,.2);
|
|
|
+ background: rgba(255, 255, 255, 0.2);
|
|
|
border-radius: 5rem;
|
|
|
padding: 10rem;
|
|
|
margin: 10rem 0;
|
|
|
}
|
|
|
.info-panel .data-info {
|
|
|
- background: rgba(255, 255, 255,.2);
|
|
|
+ background: rgba(255, 255, 255, 0.2);
|
|
|
border-radius: 5rem;
|
|
|
padding: 10rem;
|
|
|
margin: 10rem 0;
|
|
|
}
|
|
|
.point-control {
|
|
|
width: 166rem;
|
|
|
- background: rgb(90,100,119,.8) !important;
|
|
|
+ background: rgb(90, 100, 119, 0.8) !important;
|
|
|
padding: 0 10rem;
|
|
|
position: absolute;
|
|
|
right: 10rem;
|
|
@@ -456,7 +514,7 @@ onMounted(() => {
|
|
|
width: 180px;
|
|
|
}
|
|
|
/deep/ .header-control .ant-input {
|
|
|
- background: rgb(90,100,119,.5) !important;
|
|
|
+ background: rgb(90, 100, 119, 0.5) !important;
|
|
|
border: none !important;
|
|
|
padding: 0 !important;
|
|
|
color: #ffffff !important;
|