|
|
@@ -17,67 +17,35 @@
|
|
|
<!--顶部搜索已经其他操作-->
|
|
|
<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'"
|
|
|
- >
|
|
|
- <baidu-map
|
|
|
- class="map"
|
|
|
- ref="map"
|
|
|
- :center="latlng"
|
|
|
- :zoom="zoom"
|
|
|
- :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 } }"
|
|
|
- >
|
|
|
- <bm-label
|
|
|
- :content="item.devicename"
|
|
|
- :labelStyle="{ border: 'none' }"
|
|
|
- :offset="{ width: -35, height: 16 }"
|
|
|
- />
|
|
|
+ <div class="M-map" :style="model ? 'display:inline-block' : 'display:none'">
|
|
|
+ <baidu-map class="map" ref="map" :center="latlng" :zoom="zoom" :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 } }">
|
|
|
+ <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.dashboardpath || infoPanel.baseInfo.prodnum,
|
|
|
- query: { id: infoPanel.baseInfo.w_deviceid },
|
|
|
- })
|
|
|
- "
|
|
|
- ></customBtn>
|
|
|
+ <customBtn :btn="true" :btn-options="[{ label: '控制面板' }]" @clickBtn="
|
|
|
+ router.push({
|
|
|
+ path: '/' + infoPanel.baseInfo.dashboardpath || infoPanel.baseInfo.prodnum || 'baseDevice',
|
|
|
+ query: { id: infoPanel.baseInfo.w_deviceid },
|
|
|
+ })
|
|
|
+ "></customBtn>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="map-deviced-info">
|
|
|
@@ -108,9 +76,7 @@
|
|
|
<p>监测指数</p>
|
|
|
<div class="data-info">
|
|
|
<p v-for="item in infoPanel.dataInfo">
|
|
|
- {{ item.paramname }}：<span
|
|
|
- >{{ item.lastvalue }}{{ item.unit }}</span
|
|
|
- >
|
|
|
+ {{ item.paramname }}：<span>{{ item.lastvalue }}{{ item.unit }}</span>
|
|
|
</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -147,48 +113,33 @@
|
|
|
<!--列表-->
|
|
|
<a-card :bordered="false" class="M-list" v-if="!model">
|
|
|
<template #title>
|
|
|
- <a-button type="primary" size="small" round @click="model = true"
|
|
|
- >切换地图</a-button
|
|
|
- >
|
|
|
+ <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')"
|
|
|
- >
|
|
|
+ <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
|
|
|
- >
|
|
|
+ <a-button type="link" @click="
|
|
|
+ router.push({
|
|
|
+ path: '/' + (data.record.dashboardpath || data.record.prodnum || '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
|
|
|
- >
|
|
|
+ <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>
|
|
|
@@ -420,32 +371,39 @@ onMounted(() => {
|
|
|
* {
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
+
|
|
|
.M-container {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
}
|
|
|
+
|
|
|
.M-container .deviced-info {
|
|
|
width: 100%;
|
|
|
padding: 10px 0;
|
|
|
}
|
|
|
+
|
|
|
.M-container .content {
|
|
|
position: relative;
|
|
|
}
|
|
|
+
|
|
|
.M-container .M-map {
|
|
|
width: 100%;
|
|
|
height: calc(100vh - 290rem);
|
|
|
position: relative;
|
|
|
}
|
|
|
+
|
|
|
.M-container .M-map .map {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
}
|
|
|
+
|
|
|
.header-control {
|
|
|
position: absolute;
|
|
|
top: 10px;
|
|
|
left: 2px;
|
|
|
z-index: var(--zIndex);
|
|
|
}
|
|
|
+
|
|
|
.header-control .left {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
@@ -463,23 +421,27 @@ onMounted(() => {
|
|
|
color: #ffffff;
|
|
|
font-size: 14rem;
|
|
|
}
|
|
|
+
|
|
|
.info-panel .info-header {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
}
|
|
|
+
|
|
|
.info-panel .map-deviced-info {
|
|
|
background: rgba(255, 255, 255, 0.2);
|
|
|
border-radius: 5rem;
|
|
|
padding: 10rem;
|
|
|
margin: 10rem 0;
|
|
|
}
|
|
|
+
|
|
|
.info-panel .data-info {
|
|
|
background: rgba(255, 255, 255, 0.2);
|
|
|
border-radius: 5rem;
|
|
|
padding: 10rem;
|
|
|
margin: 10rem 0;
|
|
|
}
|
|
|
+
|
|
|
.point-control {
|
|
|
width: 166rem;
|
|
|
background: rgb(90, 100, 119, 0.8) !important;
|
|
|
@@ -490,19 +452,23 @@ onMounted(() => {
|
|
|
color: #ffffff;
|
|
|
z-index: var(--zIndex);
|
|
|
}
|
|
|
+
|
|
|
.point-control .title {
|
|
|
line-height: 40rem;
|
|
|
color: rgba(22, 255, 246, 1);
|
|
|
border-bottom: 1rem solid #ffffff;
|
|
|
}
|
|
|
+
|
|
|
.point-control .point-item {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
margin-bottom: 10rem;
|
|
|
}
|
|
|
+
|
|
|
.point-control .point-content {
|
|
|
padding: 10rem 0;
|
|
|
}
|
|
|
+
|
|
|
.point-control .point-item .bg {
|
|
|
width: 40rem;
|
|
|
height: 20rem;
|
|
|
@@ -513,6 +479,7 @@ onMounted(() => {
|
|
|
color: #ffffff !important;
|
|
|
width: 180px;
|
|
|
}
|
|
|
+
|
|
|
/deep/ .header-control .ant-input {
|
|
|
background: rgb(90, 100, 119, 0.5) !important;
|
|
|
border: none !important;
|
|
|
@@ -520,9 +487,10 @@ onMounted(() => {
|
|
|
color: #ffffff !important;
|
|
|
padding: 4px 20px !important;
|
|
|
}
|
|
|
+
|
|
|
.header-control input::placeholder {
|
|
|
color: #ffffff;
|
|
|
}
|
|
|
-.M-list {
|
|
|
-}
|
|
|
+
|
|
|
+.M-list {}
|
|
|
</style>
|
